Skip to content

原型设计

登录界面

登录界面登录界面

修改密码修改密码

模块名称

用户登录界面

功能描述

用户登录界面是煤炭采购决策规划系统的入口界面,用于系统用户的身份验证和登录。用户通过输入用户名、密码及验证码进行身份验证,以确保系统的安全性。

界面元素

  1. 系统名称与图标

    • 系统名称: 煤炭采购决策规划系统
    • 英文名称: Procurement Decision Planning System
    • 系统图标: 位于界面左上方,与系统名称一起显示,增加系统品牌识别度。
  2. 用户登录表单

    • 用户名输入框
      • 标签:"请输入用户名"
      • 描述:用户在此输入其用户名,用户名为系统唯一标识。
    • 密码输入框
      • 标签:"请输入登录密码"
      • 描述:用户在此输入其密码,密码应符合系统设置的安全要求。
    • 验证码输入框
      • 标签:"请输入右侧验证码"
      • 描述:用户在此输入显示在右侧的验证码,验证码用于防止机器自动登录。
      • 验证码显示:"2020"(动态生成,每次登录显示不同)
  3. 记住密码选项

    • 复选框
      • 标签:"记住密码"
      • 描述:用户勾选后,系统会记住用户的密码,下次登录时无需再次输入。
  4. 忘记密码链接

    • 链接文本: "忘记密码?"
    • 描述:用户点击该链接后,会跳转到密码找回页面,帮助用户找回忘记的密码。
  5. 登录按钮

    • 按钮文本: "登录"
    • 描述:用户填写完所有登录信息后,点击该按钮提交登录请求,系统进行验证并决定是否允许用户登录。

用户交互流程

  1. 用户访问登录页面,看到登录表单。
  2. 用户在相应输入框中输入用户名、密码和验证码。
  3. 用户可选择是否勾选“记住密码”选项。
  4. 若用户忘记密码,可点击“忘记密码?”链接跳转到密码找回页面。
  5. 用户填写完所有信息后,点击“登录”按钮提交表单。
  6. 系统验证用户输入的信息,若验证成功则允许用户进入系统主界面,若失败则提示错误信息。

界面设计说明

  • 整体布局: 页面分为左、右两部分,左侧展示系统名称及图标,右侧为用户登录表单。
  • 颜色和风格: 使用蓝白配色,界面简洁明快,体现系统专业性。
  • 响应式设计: 页面设计应适配不同屏幕尺寸,确保在各种设备上有良好的用户体验。

版权声明

  • 版权信息: 界面底部显示版权信息,确保合法性和版权保护。

系统框架

系统框架系统框架

模块名称

系统框架

功能描述

煤炭采购决策规划系统的系统框架界面是系统的主界面,用户可以通过该界面访问系统的各个功能模块。系统框架界面提供了侧边栏导航、顶部导航栏、主内容区等元素,用户可以方便地切换不同模块进行煤炭数据分析和预测工作。

界面元素

顶部导航栏

  1. 系统名称

    • 显示在左上角,明确系统的名称:“煤炭采购决策规划系统”,便于用户识别当前使用的系统。
  2. 搜索框

    • 位于顶部导航栏的中部,用户可以通过搜索框快速查找系统内的功能或数据。
  3. 用户信息

    • 显示当前登录用户的用户名,如“Admin”。
    • 用户头像:显示当前登录用户的头像,点击头像可以访问用户个人信息和设置。
    • 消息通知:顶部导航栏右侧显示消息通知图标,用户点击可以查看系统通知和消息。
    • 退出按钮:用户点击退出按钮可以安全退出系统。

侧边栏导航

  1. 导航模块
    • 系统侧边栏包含多个导航模块,用户可以通过点击不同模块切换到相应的功能页面。主要模块包括:
      • 系统概览:显示系统的整体概况和主要统计数据。
      • 订单管理:管理煤炭采购和销售订单。
      • 客户管理:管理客户信息和联系记录。
      • 库存管理:管理煤炭库存信息和动态。
      • 物流管理:管理物流运输和调度。
      • 统计分析:提供煤炭数据的统计和分析功能。
      • 个人中心:用户可以在个人中心查看和修改个人信息。
      • 后台管理:系统管理员可以在后台管理模块进行系统配置和权限管理。
    • 每个模块在侧边栏都有相应的图标和文字描述,便于用户快速识别和访问。

主内容区

  1. 模块展示
    • 用户点击侧边栏的导航模块后,主内容区会展示相应模块的具体内容和功能界面。
    • 内容区可以包含表格、图表、表单等多种元素,帮助用户进行数据录入、查看和分析。
    • 默认显示模块:系统初次加载时,主内容区可以默认展示“系统概览”模块,显示系统的主要统计数据和概况信息。

页面底部

  1. 操作按钮
    • 页面底部左侧显示一个操作按钮“添加内容”,用户点击后可以添加新的数据或记录。
    • 分页控件:主内容区的数据展示表格底部提供分页控件,用户可以通过点击页码查看不同页的数据记录。

用户交互流程

  1. 用户登录系统后,首先看到系统框架界面。
  2. 用户可以通过顶部导航栏的搜索框查找需要的功能或数据。
  3. 用户通过点击侧边栏的导航模块切换到相应的功能页面。
  4. 主内容区会根据用户的选择展示不同模块的具体内容。
  5. 用户可以在主内容区进行数据的录入、查看和分析。
  6. 用户点击顶部导航栏的消息通知图标查看系统通知和消息。
  7. 用户可以点击顶部导航栏的退出按钮安全退出系统。

界面设计说明

  • 整体布局: 系统框架界面分为顶部导航栏、侧边栏导航和主内容区,布局清晰明了,方便用户快速找到所需功能。
  • 颜色和风格: 使用简洁明快的配色,确保界面的美观和易用性。
  • 响应式设计: 页面设计适配不同屏幕尺寸,确保在各种设备上有良好的用户体验。

日志管理

操作记录操作记录

登录日志登录日志

登录记录登录记录

日志管理_审批日志_日志管理_审批日志_

日志管理_操作日志_日志管理_操作日志_

日志管理_登录日志_日志管理_登录日志_

模块名称

日志管理

功能描述

日志管理模块用于记录并展示系统用户的各类操作日志,包括登录记录、登录日志、操作日志和审批日志。通过日志管理模块,管理员可以全面跟踪和审计系统的使用情况,保障系统的安全性和透明度。

界面元素

登录记录界面

  1. 页面路径

    • 位于页面左上角,显示当前页面的路径导航,方便用户了解当前位置。
  2. 侧边栏导航

    • 包含“调研记录”、“待办事项”、“登录记录”、“系统消息”、“系统设置”等选项,用户可以通过侧边栏快速切换到其他功能模块。
  3. 记录展示区域

    • 日期分组: 日志按照日期进行分组,显示日期例如“2020-12-20”。
    • 记录条目: 每条记录包含以下信息:
      • 设备名称: 如“WindirPC”
      • IP 地址: 如“14.127.100.242”
      • 登录时间: 如“2020-12-20 12:00”
    • 分页控件: 页面底部提供分页控件,用户可以通过点击页码进行翻页查看更多记录。

登录日志界面

  1. 用户信息

    • 包含用户头像、用户名、账户余额、订单记录、可用积分等信息,展示在页面顶部。
  2. 操作按钮

    • 修改资料按钮:用户点击后可以修改个人资料。
    • 设置优先级按钮:用户点击后可以设置系统使用优先级。
    • 重置密码按钮:用户点击后可以重置账户密码。
  3. 日志标签页

    • 包含“用户详情”、“订单记录”、“积分记录”、“登录日志”、“操作记录”等标签页,用户可以点击不同标签页切换查看不同类别的日志。
  4. 日志记录表

    • 包含以下字段:
      • 登录时间: 如“2020-11-25 23:26:08”
      • IP 地址: 如“183.14.135.1”
      • 地址: 如“广东省珠海市”
      • 登录方式: 如“小程序”
    • 分页控件: 页面底部提供分页控件,用户可以通过点击页码进行翻页查看更多记录。

日志管理 - 操作日志界面

  1. 筛选条件

    • 包含多个筛选条件输入框,如“输入关键字”、“所属模块”、“操作类型”、“操作时间”、“操作人”、“所属终端”等,用户可以通过输入筛选条件查询特定的日志记录。
  2. 操作日志记录表

    • 包含以下字段:
      • 操作编号: 如“2020010001”
      • 操作时间: 如“2020-12-23 22:31”
      • 操作人: 如“李小刚”
      • 所属模块: 如“客户”
      • 操作对象: 如“深圳市 XX 化工有限公司”
      • 操作类型: 如“编辑”
      • 更多按钮:用户点击后可以查看详细的操作日志信息。
    • 分页控件: 页面底部提供分页控件,用户可以通过点击页码进行翻页查看更多记录。

日志管理 - 登录日志界面

  1. 筛选条件

    • 包含多个筛选条件输入框,如“输入关键字”、“终端类型”、“浏览器版本”、“操作系统”、“登录人”等,用户可以通过输入筛选条件查询特定的日志记录。
  2. 登录日志记录表

    • 包含以下字段:
      • 登录时间: 如“2020-12-25 14:54”
      • 终端类型: 如“WEB 端”
      • 浏览器版本: 如“Firefox 68.0”
      • 操作系统: 如“Win10”
      • 设备名称: 如“WindirPC”
      • MAC 地址: 如“E8-4E-05-51-3B-16”
      • 登录 IP: 如“192.168.1.1”
      • 所属区域: 如“山东省青岛市”
    • 分页控件: 页面底部提供分页控件,用户可以通过点击页码进行翻页查看更多记录。

日志管理 - 审批日志界面

  1. 筛选条件

    • 包含多个筛选条件输入框,如“输入关键字”、“审批类型”、“审批人”、“审批时间”等,用户可以通过输入筛选条件查询特定的审批日志记录。
  2. 审批日志记录表

    • 包含以下字段:
      • 审批编号: 如“2020010001”
      • 审批时间: 如“2020-12-23 22:31”
      • 审批人: 如“李小刚”
      • 审批类型: 如“合同”
      • 业务编号: 如“HT2020010001”
      • 提交时间: 如“2020-12-23 22:31”
      • 审批状态: 如“审批通过”
      • 更多按钮:用户点击后可以查看详细的审批日志信息。
    • 分页控件: 页面底部提供分页控件,用户可以通过点击页码进行翻页查看更多记录。

操作记录界面

  1. 用户信息

    • 包含用户头像、用户名、账户余额、订单记录、可用积分等信息,展示在页面顶部。
  2. 日志标签页

    • 包含“用户详情”、“订单记录”、“登录日志”、“操作记录”等标签页,用户可以点击不同标签页切换查看不同类别的日志。
  3. 操作记录表

    • 包含以下字段:
      • 操作时间: 如“2020-08-19 15:43:23”
      • 操作人: 如“张小刚”
      • 操作类型: 如“修改资料”
      • 操作详情: 如“修改资料(旧值:张小刚 新值:张三丰)”
    • 分页控件: 页面底部提供分页控件,用户可以通过点击页码进行翻页查看更多记录。

用户交互流程

  1. 用户访问日志管理页面,默认展示登录记录。
  2. 用户可以通过侧边栏导航切换到其他日志类型。
  3. 在每个日志类型界面,用户可以通过输入筛选条件进行日志记录的查询。
  4. 用户可以点击分页控件查看更多日志记录。
  5. 用户可以点击“更多”按钮查看详细的日志信息。

界面设计说明

  • 整体布局: 页面主要分为侧边栏导航和主展示区域,侧边栏用于快速导航,主展示区域用于显示具体的日志记录。
  • 颜色和风格: 使用简洁明快的配色,保证界面的一致性和用户体验的舒适度。
  • 响应式设计: 页面设计适配不同屏幕尺寸,确保在各种设备上有良好的用户体验。

系统状态反馈

403 反馈403 反馈

404 反馈404 反馈

500 反馈500 反馈

成功页面成功页面

失败页面失败页面

警告页面警告页面

等侍页面等侍页面

系统监控系统监控

系统维护系统维护

系统锁屏系统锁屏

为空页面为空页面

模块名称

系统状态反馈页面

功能描述

系统状态反馈页面用于向用户展示系统当前状态的反馈信息,包括操作成功、等待处理、警告、错误、空白状态、系统锁屏、系统维护、403 权限错误、404 页面不存在和 500 服务器错误等情况。通过这些页面,用户可以及时了解系统的状态并采取相应的措施。

界面元素

500 服务器错误页面

  1. 错误代码与信息

    • 显示“500”错误代码。
    • 信息提示:“非常抱歉,服务器出错了”。
  2. 返回按钮

    • 按钮文本:“返回首页”。
    • 描述:用户点击后返回系统首页。
  3. 图示

    • 图示:显示一个与服务器错误相关的插图,帮助用户直观了解当前状态。

操作成功页面

  1. 状态图标

    • 显示成功的图标,表示操作成功。
  2. 成功提示

    • 信息提示:“操作成功”。
  3. 订单信息

    • 包含订单编号、创建人、创建时间等信息。
  4. 进度条

    • 显示订单处理的进度。
  5. 按钮

    • 返回列表:返回订单列表页面。
    • 查看订单:查看具体订单详情。

等待处理页面

  1. 状态图标

    • 显示等待处理的图标,表示操作正在处理中。
  2. 提示信息

    • 信息提示:“等待处理提示”。
  3. 订单信息

    • 包含订单编号、创建人、创建时间等信息。
  4. 进度条

    • 显示订单处理的进度。
  5. 按钮

    • 返回列表:返回订单列表页面。
    • 查看订单:查看具体订单详情。

警告状态页面

  1. 状态图标

    • 显示警告的图标,表示存在警告信息。
  2. 提示信息

    • 信息提示:“警告状态提示”。
  3. 错误内容

    • 列出错误的具体原因及解决办法。
  4. 返回按钮

    • 按钮文本:“返回修改”。

错误状态页面

  1. 状态图标

    • 显示错误的图标,表示操作失败。
  2. 提示信息

    • 信息提示:“错误状态提示”。
  3. 错误内容

    • 列出错误的具体原因及解决办法。
  4. 返回按钮

    • 按钮文本:“返回修改”。

空白状态页面

  1. 提示信息

    • 信息提示:“您还没添加任何项目”。
  2. 操作按钮

    • 按钮文本:“添加项目”。
    • 描述:用户点击后可以添加新的项目。

系统锁屏页面

  1. 登录提示

    • 提示信息:“请输入登录密码”。
  2. 密码输入框

    • 用户在此输入登录密码。
  3. 登录按钮

    • 按钮文本:无文字描述,点击图标即可登录。
  4. 其他登录方式

    • 用户点击可以使用其他账号登录。

系统维护页面

  1. 状态图标

    • 显示系统维护的图标。
  2. 提示信息

    • 信息提示:“系统升级维护,为您带来不便,敬请谅解”。
  3. 返回按钮

    • 按钮文本:“返回首页”。

403 权限错误页面

  1. 错误代码与信息

    • 显示“403”错误代码。
    • 信息提示:“非常抱歉,你无权访问该页面”。
  2. 返回按钮

    • 按钮文本:“返回首页”。
  3. 图示

    • 显示与权限错误相关的插图。

404 页面不存在页面

  1. 错误代码与信息

    • 显示“404”错误代码。
    • 信息提示:“非常抱歉,您访问的页面不存在”。
  2. 返回按钮

    • 按钮文本:“返回首页”。
  3. 图示

    • 显示与页面不存在相关的插图。

用户交互流程

  1. 用户进行操作后,系统根据不同的状态显示相应的反馈页面。
  2. 用户在各个状态页面查看相关信息,并根据提示采取相应措施。
  3. 用户点击“返回首页”或其他操作按钮进行相应的跳转和操作。

界面设计说明

  • 整体布局: 各状态页面布局简洁明了,信息提示清晰,操作按钮醒目易用。
  • 颜色和风格: 使用一致的配色方案和风格,确保界面的统一性和用户体验的舒适度。
  • 响应式设计: 页面设计适配不同屏幕尺寸,确保在各种设备上有良好的用户体验。

看板页面

商户统计商户统计

数据看板数据看板

销售统计销售统计

资源管理资源管理

模块名称

数据看板 - 煤炭采购决策规划系统

功能描述

数据看板模块是一个综合的实时数据展示界面,用于展示煤炭采购决策规划系统中的各类关键业务指标和统计信息。通过数据看板,用户可以直观地了解采购、库存、销售等业务运营情况,进行数据分析和决策支持。

界面元素

数据看板

  1. 实时数据统计

    • 今日采购额(元)
      • 显示今日的采购总金额,并标注与昨日的对比变化(如 +1.6%)。
    • 今日采购量(吨)
      • 显示今日的采购总量,并标注与昨日的对比变化(如 -0.5%)。
    • 今日库存量(吨)
      • 显示今日的库存总量,并标注与昨日的对比变化(如 +1.6%)。
    • 今日销售额(元)
      • 显示今日的销售总金额,并标注与昨日的对比变化(如 -0.5%)。
    • 今日销售量(吨)
      • 显示今日的销售总量,并标注与昨日的对比变化(如 +1.6%)。
    • 今日评价
      • 显示今日的评价数量,并标注与昨日的对比变化(如 -0.5%)。
  2. 图表展示

    • 订单数量趋势图
      • 折线图展示最近一周的订单数量变化趋势。
      • 数据类型:销售量、采购量。
      • 时间维度:每日。
    • 销售构成饼图
      • 显示各类煤炭的销售额占比。
      • 数据类型:不同煤炭种类的销售额。
      • 时间维度:当天、最近一周、最近一个月。
    • 活动完成情况概览
      • 显示活动总金额、目标完成率、活动剩余时间、每日交易金额等数据。
      • 世界地图显示活动销售分布情况。
    • 资源消耗
      • 显示当前的资源消耗情况,包括库存消耗、运输成本等。
    • 热词图
      • 显示与煤炭采购相关的热门关键词,帮助用户了解市场关注点。
  3. 总体预测

    • 销售预测
      • 显示未来一周的销售预测情况。
    • 采购预测
      • 显示未来一周的采购预测情况。
    • 库存预测
      • 显示未来一周的库存预测情况。

系统监控

  1. 服务器基本信息

    • 系统运行时间
      • 显示系统已运行的总时间。
    • CPU 核心数
      • 显示服务器的 CPU 核心数量。
    • 内存容量
      • 显示服务器的内存容量。
    • 当前运行负载
      • 显示服务器的当前运行负载情况。
    • CPU 使用率
      • 实时显示 CPU 的使用率。
    • 内存使用率
      • 实时显示内存的使用率。
    • 系统平均负载
      • 实时显示系统的平均负载情况。
  2. 图表展示

    • CPU 使用率图
      • 面积图展示 CPU 的使用率变化趋势。
    • 内存使用率图
      • 面积图展示内存的使用率变化趋势。
    • 服务流量图
      • 显示服务的上传下载流量情况。
    • 服务磁盘 IO 图
      • 显示服务的磁盘输入输出情况。

资源管理

  1. 资源基本信息

    • 用户信息
      • 显示当前用户的基本信息,包括用户名、邮箱、余额等。
    • 存储信息
      • 显示系统的存储总量和使用情况。
    • 协作状态
      • 显示当前的协作任务进度。
  2. 图表展示

    • 存储使用情况
      • 环形图展示公共存储和私有存储的使用情况。
    • 数据概览
      • 各类数据的使用情况,包括数据项数量、已用容量等。
    • 数据趋势
      • 柱状图和折线图展示数据的增长趋势和使用率情况。
    • 资源分配图
      • 饼图展示资源的分配情况。
    • 已部署资源
      • 饼图展示已部署的资源情况。

用户交互流程

  1. 用户访问数据看板页面,默认展示今日的各类关键指标。
  2. 用户可以通过顶部导航栏选择不同的时间范围(如当天、最近一周、最近一个月)查看数据。
  3. 用户可以点击不同的图表,查看详细的数据信息和趋势。
  4. 用户可以切换到“系统监控”、“销售统计”、“资源管理”等不同的子页面,查看相应的业务数据。
  5. 用户在“系统监控”页面可以实时监控服务器的运行状态和性能。
  6. 用户在“销售统计”页面可以查看与销售相关的各种统计数据和图表。
  7. 用户在“资源管理”页面可以查看系统资源的使用情况和分配情况。

界面设计说明

  • 整体布局: 各页面布局清晰明了,信息展示直观,操作便捷。
  • 颜色和风格: 使用一致的配色方案和风格,确保界面的统一性和用户体验的舒适度。
  • 响应式设计: 页面设计适配不同屏幕尺寸,确保在各种设备上有良好的用户体验。

数据列表

数据报表页数据报表页

数据搜索页数据搜索页

数据列表页_任务列表_数据列表页_任务列表_

数据表格页_静态数据__1340px数据表格页_静态数据__1340px

模块名称

数据列表 - 煤炭采购决策规划系统

功能描述

数据列表模块展示了煤炭采购决策规划系统中的各类任务和客户信息。用户可以在该模块中查看、编辑和管理任务和客户数据,帮助用户更好地进行采购决策和客户管理。

界面元素

任务列表页面

  1. 任务过滤和搜索

    • 提供任务的过滤条件输入框,包括任务名称、任务类型、任务状态、负责人、起始时间、结束时间等。
    • 通过“查询”按钮执行搜索操作。
    • “重置”按钮可以清空所有过滤条件。
  2. 任务数据表格

    • 任务开始时间
      • 显示任务的开始时间。
    • 任务编号
      • 显示任务的唯一编号。
    • 任务描述
      • 简要描述任务内容。
    • 负责人
      • 显示负责该任务的人员姓名。
    • 任务状态
      • 显示任务的当前状态(如进行中、已完成等)。
    • 紧急程度
      • 显示任务的紧急程度(如紧急、一般等)。
    • 完成进度
      • 以进度条的形式显示任务的完成进度百分比。
    • 操作
      • 提供编辑、查看、删除等操作按钮。
  3. 分页导航

    • 提供分页功能,每页显示一定数量的任务数据。
    • 用户可以通过点击分页按钮来查看不同页的数据。

客户列表页面

  1. 客户过滤和搜索

    • 提供客户的过滤条件输入框,包括客户名称、客户状态、行业类型、添加人员、更新时间等。
    • 通过“查询”按钮执行搜索操作。
    • “重置”按钮可以清空所有过滤条件。
  2. 客户数据表格

    • 客户编号
      • 显示客户的唯一编号。
    • 公司名称
      • 显示客户公司的名称。
    • 客户状态
      • 显示客户的当前状态(如正常、暂停等)。
    • 行业类型
      • 显示客户所属的行业类型。
    • 添加人员
      • 显示负责添加该客户的人员姓名。
    • 更新时间
      • 显示客户信息的最后更新时间。
    • 操作
      • 提供编辑、查看、删除等操作按钮。
  3. 分页导航

    • 提供分页功能,每页显示一定数量的客户数据。
    • 用户可以通过点击分页按钮来查看不同页的数据。

用户交互流程

  1. 用户进入任务列表页面,可以通过过滤条件搜索特定任务。
  2. 用户在任务列表中可以查看任务的详细信息,并可以进行编辑或删除操作。
  3. 用户通过分页导航查看更多任务数据。
  4. 用户进入客户列表页面,可以通过过滤条件搜索特定客户。
  5. 用户在客户列表中可以查看客户的详细信息,并可以进行编辑或删除操作。
  6. 用户通过分页导航查看更多客户数据。

界面设计说明

  • 整体布局: 列表页面布局清晰,信息展示简洁,操作按钮易于使用。
  • 颜色和风格: 使用一致的配色方案和风格,确保界面的统一性和用户体验的舒适度。
  • 响应式设计: 页面设计适配不同屏幕尺寸,确保在各种设备上有良好的用户体验。

任务管理页面

任务管理_列表显示_任务管理_列表显示_

任务管理_看板视图_任务管理_看板视图_

模块名称

任务管理 - 煤炭采购决策规划系统

功能描述

任务管理模块用于管理和跟踪煤炭采购决策过程中的各项任务。用户可以在该模块中创建、查看、编辑和跟踪任务的进展情况。该模块提供了看板视图和列表视图两种展示方式,便于用户根据需求选择合适的任务管理方式。

界面元素

看板视图页面

  1. 任务分类

    • 按任务状态分类展示任务,包括“今日任务”、“进行中”、“逾期任务”、“已完成”等。
    • 提供快速查看任务状态的总览。
  2. 任务卡片

    • 任务标题
      • 简要描述任务内容。
    • 截止日期
      • 显示任务的截止日期,逾期任务日期标红。
    • 任务描述
      • 简要说明任务的具体内容和要求。
    • 责任人
      • 显示负责该任务的人员。
    • 优先级
      • 任务的优先级标签(如高、中、低)。
    • 任务状态
      • 显示任务当前的状态(如待办、进行中、已完成)。
    • 任务进度
      • 以进度条形式显示任务的完成进度百分比。
  3. 操作按钮

    • 新建任务
      • 提供新建任务的按钮,点击可创建新任务。
    • 任务操作
      • 每个任务卡片提供编辑、查看、删除等操作按钮。

列表视图页面

  1. 任务过滤和搜索

    • 提供任务的过滤条件输入框,包括任务名称、任务状态、负责人、截止日期等。
    • 通过“查询”按钮执行搜索操作。
    • “重置”按钮可以清空所有过滤条件。
  2. 任务数据表格

    • 任务标题
      • 简要描述任务内容。
    • 任务状态
      • 显示任务的当前状态(如待办、进行中、已完成)。
    • 优先级
      • 任务的优先级标签(如高、中、低)。
    • 截止日期
      • 显示任务的截止日期。
    • 责任人
      • 显示负责该任务的人员。
    • 任务进度
      • 以进度条形式显示任务的完成进度百分比。
    • 操作
      • 提供编辑、查看、删除等操作按钮。
  3. 分页导航

    • 提供分页功能,每页显示一定数量的任务数据。
    • 用户可以通过点击分页按钮来查看不同页的数据。

用户交互流程

  1. 用户进入任务管理模块,默认显示看板视图。
  2. 用户可以在看板视图中查看各类任务的进展情况,通过拖动卡片改变任务状态。
  3. 用户可以点击“新建任务”按钮创建新任务,填写任务详细信息并保存。
  4. 用户可以切换到列表视图,通过过滤和搜索条件查找特定任务。
  5. 用户可以在列表视图中查看任务的详细信息,并进行编辑或删除操作。
  6. 用户通过分页导航查看更多任务数据。

界面设计说明

  • 整体布局: 看板视图和列表视图布局清晰,信息展示简洁,操作按钮易于使用。
  • 颜色和风格: 使用一致的配色方案和风格,确保界面的统一性和用户体验的舒适度。
  • 响应式设计: 页面设计适配不同屏幕尺寸,确保在各种设备上有良好的用户体验。

其余杂项

公告管理公告管理

分类列表分类列表

发布公告发布公告

员工管理员工管理

员工详情员工详情

团队知识库团队知识库

团队管理团队管理

团队详情团队详情

基础详情页基础详情页

搜索列表搜索列表

文件管理文件管理

新增员工新增员工

消息设置消息设置

用户管理用户管理

高级详情页高级详情页

用户详情用户详情

知识搜索知识搜索

知识搜索_无结果_知识搜索_无结果_

知识详情知识详情

系统通知系统通知

职务管理职务管理

职务详情职务详情

联系人管理联系人管理

订单管理订单管理

订单记录订单记录

资料设置资料设置

部门管理部门管理

项目详情项目详情

高级筛选页高级筛选页

项目管理项目管理