2023年全国职业院校技能大赛高职组应用软件系统开发正式赛题—模块二：软件系统开发

模块二：软件系统开发（5 小时）

一、模块考核点模块时长：5 小时
模块分值：55 分
本模块重点考查参赛选手的业务设计、前端页面开发和后端业务代码编写能力，具体包括：
1.前端页面开发。基于给定的系统需求，利用后端API 提供的数据接口，使用HTML5、CSS3、JavaScript、Vue.js（ElementUI、 vue-element-admin）等技术，遵循MVVM 模式完成前端页面，实现业务功能，要求编码符合前端工程化开发技术规范。
2.后端业务开发。基于给定的系统需求，利用可视化开发工具设计数据库，并利用 Spring Boot 框架实现后端业务功能，完成 RESTful API 接口开发，并发布运行。要求设计符合 Spring Boot 框架的 Domain/POJO、DAO、Service、Controller 分层架构模式，编码符合命名和注释规范。
二、任务要求
1.利用数据库可视化管理工具，创建 carbon 数据库，并导入 carbon.sql 数据库文件，根据竞赛任务描述，实现项目业务功能后，
导出数据库脚本 carbon.sql。数据库账号/密码：root/123456。
2.利用后端开发工具IntelliJ IDEA，打开后端项目carbon，根
据竞赛任务描述，实现项目业务功能，然后利用 Maven 将项目发布为 carbon.jar 包文件。

3.使用前端开发工具，打开管理前端项目，根据竞赛任务描述，实现项目业务功能，然后发布为生产环境 dist1 文件夹，使用Nginx进行部署，在浏览器内键入 http://IP:8088，验证管理端的业务功
能，利用admin/admin123 登录双碳管理系统。
4.使用前端开发工具，打开用户前端项目，根据竞赛任务描述，实现项目业务功能，然后发布为生产环境 dist2 文件夹，使用Nginx进行部署，在浏览器内键入 http://IP:8081，验证用户前端的业务功能。
5.使用前端开发工具，打开数据可视化驾驶前端项目，根据竞赛任务描述，实现项目业务功能，然后发布为生产环境 dist3 文件夹，使用 Nginx 进行部署，在浏览器内键入 http://IP:8080，验证可视化前端的业务功能。
6.竞赛结束前，选手将上述成果物“carbon.sql”“carbon.jar” “dist1”“dist2”和“dist3”添加到“应用系统开发.zip”压缩包内，按选择的竞赛平台在 U 盘根文件夹下新建“东软+赛位号”或“中慧+赛位号”文件夹（U 盘根文件夹下如果已有该文件夹，则不需要新建该文件夹），并将“应用系统开发.zip”压缩文件提交至 U 盘的 “东软+赛位号”或“中慧+赛位号”文件夹。示例（假设赛位号是 80 号）：
U 盘:\东软 80\应用系统开发.zip
U 盘:\中慧 80\应用系统开发.zip三、竞赛任务

参赛选手根据客户提供的任务描述，按照模块二的任务要求，完成管理前后端、用户前端、数据可视化功能开发任务。
备注：本模块所提供的图片、插件等资源，仅供参赛选手参考，
参赛选手可使用也可自行制作或编码实现。
任务 1：制造执行 MES—质量管理—产品检验（7 分）
注：选手自行编写、设计服务接口部分（pojo、mapper、service、 controller）、管理前台界面。
【基本要求】
1.进入双碳管理系统主界面，点击左侧制造执行 MES 下的质量管理标签，然后在下拉菜单中点击产品检验，进入产品检验页面。实现产品检验数据列表显示，数据列表显示内容应包括：编号、流水号、
计划编号、完工单号、作业名称、生产线名称、检验批次、产品名称、生产日期、检验项、生产数量、抽检数量、检验值、阈值上限、阈值下限、检验结果、检验人、检验时间、【修改】按钮、【删除】按钮。
2.点击【修改】按钮后弹出「修改产品检验单」对话框，对话框中可修改内容包括：完工单号（*必填项）、检验标准（*必填项）、抽检数量（*必填项）、检验值（*必填项）、检验结果（*必填项）、备注。点击完工单号【选择】按钮后，弹出「选择生产完工单」对话框，点击「选择生产完工单」对话框中的数据列表信息后的【选择】按钮后将数据自动填写至产品检验单中。点击检验标准【选择】按钮后，弹出「选择检验标准」对话框，点击「选择检验标准」对话框中的数据列表信息后的【选择】按钮后将数据自动填写至产品检验单中。

3.填写完成后点击【确定】按钮可修改产品检验单并提示“修改成功”字样，若点击【取消】按钮可关闭对话框。
4.点击【删除】按钮可删除产品检验单数据并提示“删除成功”字样。
5.数据列表上方搜索框中输入流水号、完工单号、计划编号、作业名称、产品名称、检验批次、生产日期（区间选择）、检验项、检验结果下拉选项（结果包括“合格”“不合格”）、检验人、检验时间
（区间选择）后点击【搜索】按钮，可实现按搜索条件模糊查询的功能并刷新列表数据，若点击【重置】按钮可清空输入的查询条件。
6.数据列表上方显示【新增】按钮，点击【新增】按钮后，在弹出的「添加生产采样单」对话框中输入完工单号（*必填项）、检验标准（*必填项）、抽检数量（*必填项）、检验值（*必填项）、检验结果
（*必填项）、备注。点击完工单号【选择】按钮后，弹出「选择生产完工单」对话框，点击「选择生产完工单」对话框中的数据列表信息后的【选择】按钮后将数据自动填写至产品检验单中。点击检验标准
【选择】按钮后，弹出「选择检验标准」对话框，点击「选择检验标准」对话框中的数据列表信息后的【选择】按钮后将数据自动填写至产品检验单中。
7.填写完成后点击【确定】按钮可新增产品检验单并提示“新增成功”字样，若点击【取消】按钮可关闭对话框。
详见双碳管理系统API 文档。

任务 2：制造执行 MES—生产完工单（8 分）
注：选手自行编写、设计服务接口部分（pojo、mapper、service、 controller）、管理前台界面。
【基本要求】
1.进入双碳管理系统主界面，点击左侧制造执行 MES 下的生产完工单标签，进入生产完工单页面。实现生产完工单数据列表显示，数据列表显示内容应包括：编号、单号、生产计划、生产作业、产品、
型号、规格、单位、完工日期、生产数量、生产批号、状态、【详情】按钮、【删除】按钮。
2.点击【详情】按钮后弹出「修改生产完工单」对话框，对话框中可修改内容包括：生产批号（*必填项）、备注，修改完成后点击【确定】按钮可保存修改内容并刷新数据列表，若点击【取消】按钮可关闭对话框。
3.点击【删除】按钮可删除生产完工单数据并提示“删除成功”字样。
4.数据列表上方搜索框中输入生产计划、生产作业、产品、完工日期（区间选择）、生产批号、状态下拉选项（状态包括“未入库” “入库中”“已入库”“检验合格”“检验未合格”）后点击【搜索】按钮，可实现按搜索条件模糊查询的功能并刷新列表数据，若点击【重置】按钮可清空输入的查询条件。
接口详见双碳管理系统API 文档。

任务 3：制造执行 MES—质量管理—来料检验（7 分）
注：选手自行编写、设计服务接口部分（pojo、mapper、service、 controller）、管理前台界面。
【基本要求】
1.进入双碳管理系统主界面，点击左侧制造执行 MES 下的质量管理标签，然后在下拉菜单中点击来料检验，进入来料检验页面。实现来料检验数据列表显示，数据列表显示内容应包括：编号、流水号、
领料单号、物料名称、规格、型号、单位、需求数量、已领数量、抽检数量、检验项、标准值上限、标准值下限、检验值、检验结果、检验人、检验时间、【修改】按钮、【删除】按钮。
2.点击【修改】按钮后弹出「修改来料检验单」对话框，对话框中可修改内容包括：领料编号（*必填项）、物料名称（*必填项）、抽检数量（*必填项）、检验值（*必填项）、检验结果（*必填项）、备注。点击领料编号【选择】按钮后，弹出「选择领料单」对话框，点击「选择领料单」对话框中的数据列表信息后的【选择】按钮后将数据自动填写至来料检验单中。
3.填写完成后点击【确定】按钮可修改来料检验单并提示“修改成功”字样，若点击【取消】按钮可关闭对话框。
4.点击【删除】按钮可删除来料检验单数据并提示“删除成功”字样。
5.数据列表上方搜索框中输入流水号、领料单号、物料名称、检验人、检验时间（区间选择）后点击【搜索】按钮，可实现按搜索条

件模糊查询的功能并刷新列表数据，若点击【重置】按钮可清空输入的查询条件。
6.数据列表上方显示【新增】按钮，点击【新增】按钮后，在弹出的「添加来料检验单」对话框中输入领料编号（*必填项）、物料名称（*必填项）、抽检数量（*必填项）、检验值（*必填项）、检验结果
（*必填项）、备注。点击物料名称【选择】按钮后，弹出「选择领料单」对话框，点击「选择领料单」对话框中的数据列表信息后的【选择】按钮后将数据自动填写至来料检验单中。
7.填写完成后点击【确定】按钮可新增来料检验单并提示“新增成功”字样，若点击【取消】按钮可关闭对话框。
详见双碳管理系统API 文档。
任务 4：采购管理系统—企业信息（7 分）
注：选手根据已提供后台双碳管理系统——采购管理（可自行修改后台接口），自行编写双碳采购网前台页面。所有页面支持自适应，支持 PC 端和移动端自动切换显示模式（浏览器界面按 F12，移动端宽度为 375 像素）。
【基本要求】
1.前台双碳采购网
（1）进入双碳采购网主页，点击右上角个人头像，进入登录页面，登录成功后（投标企业账户密码：qy01/123456，选手自行开发），进入企业信息页。

（2）点击左侧【企业信息】菜单，进入企业信息页面，页面展示企业信息、法人信息和开户许可证信息；企业信息包括企业logo、企业营业执照扫描件、企业名称、统一社会信用代码、公司注册地址、注册资本（万元）、企业性质、成立日期、法定代表人、营业执照有效期、经营范围和单位注册电话；法人信息包括法人身份证扫描件、姓名和身份证号；开户许可证信息包括开户许可证扫描件、开户行、银行账号和开户行地址，以及【修改】按钮；点击【查看图片】按钮，弹窗显示大图，图片显示水印（双碳采购网），点击其他区域关闭弹窗。
（3）点击【修改】按钮弹出企业信息编辑弹窗，编辑企业信息，信息包括企业名称、统一社会信用代码、公司注册地址、注册资本（万元）、成立日期、法定代表人、营业执照有效期、经营范围、法人姓名、法人身份证号、开户行、银行账号和开户行地址，点击【保存】，完成提交并关闭弹窗，点击取消，关闭弹窗。
（4）后台进行审核，审核通过后，企业信息页右上角浮动显示
【审核通过】绿色字样，向右旋转 30°，且文字有圆角绿色外边框。 2.后台双碳管理系统——采购管理
（1）登录后台双碳管理系统账号密码admin/admin123，选手自行开发。
（2）同时后台支持企业信息查看。
（3）企业信息提交后，企业信息状态为待审核，管理员登录后台，可将企业信息变更为审核通过。

3.本任务涉及的企业信息页面和修改企业信息页面支持自适应，支持PC 端和移动端自动切换显示模式。
任务 5：采购管理系统—客服功能（7 分）
注：选手自行编写后台采购管理系统-客服管理，选手自行编写双碳采购网客服前台页面。前台页面支持自适应，支持PC 端和移动端自动切换显示模式（浏览器界面按F12，移动端宽度为 375 像素）。
1.进入双碳采购网主页。
2.投标企业登录成功后（投标企业账户密码：qy01/123456,选手自行开发）,网站主页默认右下角显示一个可拖动的圆形客服悬浮窗，大小为宽高 20px，中间显示客服 icon（kefu.svg）。悬浮窗拖动后自动吸附边界，最终位置距离屏幕左侧距离小于屏幕右侧距离则吸附在屏幕左侧，反之则吸附在屏幕右侧。
3.点击该客服悬浮窗打开一个对话框（如企业用户未登录，点击客服悬浮框时，则跳转至登录页面）。对话框右上角有【终止会话图标】和【最小化图标】，中间显示聊天内容，聊天内容左侧显示企业用户logo 和企业用户提问内容，提问内容四边为圆角，背景为白色的长方形。右侧显示在线客服logo（在线客服logo 自行指定）和在线客服回复内容，回复内容四边为圆角，背景为绿色的长方形。下面显示【转人工】按钮、【表情图标】按钮、消息输入框和【发送】按钮。
4.用户连接客服时，客服默认发送欢迎语：【“您好，您有什么需要我帮助的，可以跟我聊聊天气、网站的导航哦”】。用户可在对话框

内输入消息，并点击发送按钮或按回车键发送消息给在线客服，在线客服匹配后台配置的问答（见表 1）。用户和客服的对话内容要实时 展示在对话框中，若客户的问题没有匹配上后台配置的问答，客服会发送【“抱歉，您的问题暂时无法回复，请点击【转人工】按钮，进行转接”】。点击【转人工】按钮，对话框会提示【“正在为您转接，请稍等……”】，转接成功后，会在客服管理-会话管理里显示刚刚在线客服未回答上来的问题。用户可以点击【表情图标】（见图 1），展开可发送的表情列表(可用ElementUI 的icon 代替，每行显示 5 个)，点击表情可填充到输入框，点击发送按钮发送给在线客服。
表 1 在线客服自动问答

序号 用户问题 系统响应内容
0 您好，您有什么需要我帮助的，可以跟我聊聊天气、网站的
导航哦！
1 你好 您好！有什么我可以帮助您的吗？
2 天气 当前天气是多云，温度为 25 摄氏度。
3 时间 现在是 2023 年 9 月 15 日，下午 2 点 30 分。（当前时间）
4 介绍 我是一个智能机器人，可以回答您的问题和提供帮助。
5 笑话 为什么鱼不喜欢打网球？因为它们怕被网打中。
6 音乐 您想听什么类型的音乐？我可以为您推荐一些歌曲。
7 新闻 最近的新闻是关于一项科学发现，科学家发现了一种新的行星。
8 健康 保持健康的生活习惯包括均衡饮食、适量运动和良好的睡眠。
9 技术 技术的发展非常迅速，您对哪方面的技术感兴趣？
10 照片 照片可以记录美好的时刻，您想打印照片还是分享在社交媒体上？

图 1 表情图标示例（供参考）
（1）点击【终止会话图标】后，结束会话，并收起对话框，再次连接前不会收到消息。点击【最小化图标】，收起对话框，收起后可以收到新消息，收到新消息右上角显示未读消息数，样式为圆形红色背景中间用白色字体显示未读消息数。再次点击客服悬浮窗打开对话框继续对话会清空未读数。
（2）对话框中用户和在线客服的对话实时进行，连接状态下 10秒内用户没有任何操作，连接会自动断开，并弹出提示框进行提示： “由于长时间未对话，已断开连接”，下面显示【取消】按钮和【重新连接】按钮。点击【重新连接】按钮可继续对话，点击【取消】则收起对话框结束会话。
5.利用客服账号登录后台双碳管理系统，左侧菜单只能显示客服中心和客服管理一级菜单，客服管理下显示问答管理和会话管理二级菜单。
（1）后台在线客服账户和密码：kf01/123456，选手自行开发。
（2）客服登录后，右侧默认显示客服中心页面，页面显示 kefu.jpg 图片。
（3）点击问答管理二级菜单，进入问答管理页面，上面显示【新增】按钮，【导入】按钮，【新增】按钮为蓝色边框、浅蓝色背景，里面显示蓝色新增icon 和“新增”字样，鼠标触摸【新增】按钮时，

按钮背景变成蓝色，里面的 icon 和文字变为白色，【导入】按钮为灰色边框、浅灰色背景，里面显示灰色导入icon 和“导入”字样，鼠标触摸【导入】按钮时，按钮背景变为灰色，里面的icon 和文字变为白色。按钮下面显示问答列表（没有数据则显示“暂无数据”字样），列表项包括：编号，问题，回答内容，操作（【修改】和【删除】），列表项下面显示分页（如果没有数据，则不显示），分页包括数据总数，设置每页条数，页码和跳转某一页。
1）点击【新增】按钮，弹出model 框，上面显示“新增问答”字样，下面是表单，表单内容为：问题和回答内容。底部显示【确定】和【取消】按钮，【确定】按钮背景为蓝色，文字为白色的“确定”字样，【取消】按钮边框为黑色，背景为白色，文字为黑色的“取消”字样。点击【确定】按钮，关闭 model 框，页面顶部弹出背景为浅绿色，文字为绿色的“新增成功”字样，并刷新列表数据，点击【取消】按钮，关闭model 框。
2）点击【导入】按钮，弹出model 框，上面显示“问答批量导入”字样，下面为上传文件组件框和【下载模板】按钮，【下载模板】按钮无背景颜色，字体为灰色，按钮下面使用红色字体提示“仅允许导入‘xls’和‘xlsx’格式文件”，底部是【确定】和【取消】按钮，【确定】按钮背景为蓝色，文字为白色的“确定”字样，【取消】按钮边框为黑色，背景为白色，文字为黑色的“取消”字样。拖动文件到上传文件框内或者【点击上传】按钮将文件上传至服务器，点击【确定】按钮，将上传后的文件批量新增到数据库中，并关闭 model 框，刷新

数据列表。点击【取消】按钮，关闭model 框。点击【下载模板】按钮，可以下载问答导入文件模板（问答导入文件模板选手自行设计）。
3）数据项中，点击【修改】按钮，弹出 model 框，上面显示“修改问答”字样，下面是可修改表单，表单内容为：问题和回答内容。底部显示【确定】和【取消】按钮，【确定】按钮背景为蓝色，文字为白色的“确定”字样，【取消】按钮边框为黑色，背景为白色，文字为黑色的“取消”字样。点击【确定】按钮，关闭model 框，页面顶部弹出“修改成功”，并刷新列表数据，点击【取消】按钮，关闭 model 框。
4）数据项中，点击【删除】按钮，弹出 model 框，model 框内显示“是否删除当前编号为‘x’的数据”（x 为当前数据编号），下面显示【确定】和【取消】按钮，【确定】按钮背景为蓝色，文字为白色的“确定”字样，【取消】按钮边框为黑色，背景为白色，文字为黑色的“取消”字样。点击【确定】按钮，关闭model 框，页面顶部提示“删除成功”字样，并刷新列表数据，点击【取消】按钮，关闭model 框。
（4）点击会话管理二级菜单，进入用户对话页面。
1）页面左侧上面显示“当前会话”字样，下面显示当前正在沟通的用户列表，用户列表左侧显示企业头像，中间上半部分显示企业名称，下半部分显示消息内容，右侧上半部分显示发送时间，如果有未读的消息在用户列表中，当前用户的右侧下半部分显示未读消息提示角标，角标样式为红色圆形背景，中间显示白色字体未读消息数，

右侧垂直居中显示会话 icon，如果没有沟通的用户，当前会话下面垂直居中显示“暂无会话”字样。
2）点击某一用户列表项，右侧上面显示用户名和【结束会话】按钮，中间显示与该用户的对话内容（会显示用户与在线客服的所有对话记录）,对话内容左侧显示企业用户logo 和企业用户提问内容，右侧如果是在线客服回复消息，显示在线客服logo（在线客服logo可自行指定）和在线客服回复内容，回复内容四边为圆角带阴影，背景为白色的长方形，转为人工客服回复时，显示人工客服logo 和人工客服回复内容，回复内容四边为圆角带阴影，背景为白色的长方形。下面显示【表情图标】按钮、输入框和【发送】按钮。客服可以在对话框中输入消息，点击【发送】按钮或按回车键回复用户消息，在线客服能实时接收到用户发送的消息。在线客服可以点击【表情图标】，展开可发送的表情列表(用ElementUI 的icon 代替，每行显示 5 个)，点击表情可填充到输入框，点击发送按钮发送给客户。
3）点击【结束会话】按钮后，会结束与当前用户的会话，并关闭聊天窗口。采购网用户端会弹出提示框，提示框上面居中显示“提示”字样，左上角有个【关闭图标】，中间显示“人工服务已结束”，用户点击【关闭图标】后，可继续与在线客服进行对话。
任务 6：采购管理系统—主页（6 分）
注：选手自行编写/修改后台双碳管理系统——采购管理，选手自行编写双碳采购网主页前台页面。前台页面支持自适应，支持PC

端和移动端自动切换显示模式（浏览器界面按 F12，移动端宽度为 375像素）。
1.前台双碳采购网
（1）进入双碳采购网主页，页面头部从左至右依次显示logo、主页标题（双碳采购网），中间显示 4 个tab 导航栏，主页、政策法规、违规投诉、会员服务。页面头部右侧显示用户头像和用户昵称，未登录用户显示默认头像和“请登录”字样。页面主体内容显示轮播图，轮播图高为屏幕的三分之一。轮播图要求可滑动、可循环播放，后台可对轮播图进行动态配置。
2.轮播图下方显示“新闻资讯”和“公告变更”两个模块
（1）模块头部左侧显示模块名称，头部右侧显示查看更多，头部背景色为绿色渐变白色。两个模块等高，模块内容背景色为白色，字体颜色为黑色。模块内列表项:发布企业、标题和发布时间的列表。若模块内列表项超出模块高度，列表项在模块内滚动显示。鼠标进入某个模块，模块内容放大显示，鼠标移出恢复原样。鼠标移入列表项发布企业、标题和发布时间，字体颜色变为绿色，移出恢复原样。
（2）点击模块区内对应列表项进入对应详情页，详情页顶部右侧显示【打印】按钮和字体选择按钮，字体选择按钮包括【大（40px）】、
【中(30px)】、【小(20px)】三个按钮。下方显示信息内容，由上至下依次显示信息标题、发布企业、发布时间、浏览次数和信息详细富文本内容。浏览次数为信息被查看的次数，要求动态显示。点击字体选择三个按钮可调整信息内容的字体大小。

（3）点击【打印】按钮弹出打印预览弹窗，弹窗左侧预览区显示需要打印的内容，预览区大小默认为纵向A4 纸大小，弹窗右侧为功能区，功能项自上而下排列，功能项包括目标打印机、页面、布局。弹窗左侧底部显示【保存】按钮和【取消】按钮，功能项左侧显示功能名称，右侧显示下拉框，目标打印机功能下拉框可选择“打印机”，页面功能可选择“全部”“自定义”，布局功能可选择“纵向”“横向”，要求“布局”选择横向时左侧预览区显示横向打印预览页面，选择纵向时纵向显示预览页面，大小为A4 纸大小，点击【取消】按钮关闭弹窗。
（4）点击查看更多进入公告列表页，列表页为具有响应式卡片式布局的列表，每行显示 4 个卡片，卡片头部为发布企业名称，背景色为绿色渐变白色，卡片内容为文章标题，背景色为白色，字体颜色为黑色，卡片底部为发布日期。要求鼠标移入，卡片放大显示，鼠标移出恢复原样。
3.页面内展示一个通知飘窗，该飘窗在网页任意位置移动，飘窗移动轨迹随机，但不可超出网页边界。当飘窗移动到网页边界时，应该反弹并继续移动。显示内容为最新的招标公告，飘窗内通知滚动显示。飘窗内右上角位置显示关闭按钮，点击后飘窗消失。当鼠标触碰到飘窗时，飘窗停止移动；当鼠标离开飘窗后，飘窗按照原来的轨迹继续移动。
4.主页内按【ctrl+k】展示搜索弹窗，可以搜索相关招标公告。弹窗内有搜索框和搜索列表。要求搜索词没有内容匹配时搜索列表提

示：【“无内容请搜索”】，搜索词和内容匹配时展示所有匹配的列表,点击列表项可跳转对应详情页面，匹配规则为招标公告标题包含搜索词即显示。
5.后台双碳管理系统
进入双碳管理系统，点击采购管理下的轮播图，进入轮播图页面，实现轮播图列表的展示，数据列表显示内容应包括：编号、图片地址、备注、【修改】和【删除】按钮。点击【修改】按钮后弹出「修改轮播图」对话框，对话框中可修改内容包括：轮播图上传功能（*必填项）、备注，修改完成后点击【确定】按钮可保存修改内容并刷新数据列表，若点击【取消】按钮可关闭对话框。列表点击【删除】按钮可删除轮播图数据并提示“删除成功”字样。
6.本任务涉及主页、信息列表页、信息详情页面、搜索页，均支持自适应，支持PC 端和移动端自动切换显示模式。
任务 7：采购管理系统—采购信息管理（9 分）
注：选手自行编写后台采购管理系统—采购信息管理，选手自行编写双碳采购网采购信息前台页面。前台页面支持自适应，支持 PC端和移动端自动切换显示模式（浏览器界面按 F12，移动端宽度为 375像素）。
1.发布招标
（1）后台双碳管理系统
1）双碳系统管理人员登录后台双碳管理系统（admin/admin123）。

2）进入后台双碳管理系统，点击左侧采购管理标签，进入采购管理页面，顶部分别显示标题输入框、发布时间选择框、发布者输入框、发布类型下拉框。下方显示搜索、重置按钮。点击搜索按钮按照输入的内容进行查询。点击重置按钮清空输入框内容。实现采购管理数据列表显示，数据列表显示内容包括编号、标题、发布时间、发布者、操作、【查看投标企业】、【修改】和【删除】按钮。列表上方显示【新增】【修改】【删除】【导出】按钮。
3）点击【新增】按钮显示弹出框，在弹出框中显示新增采购公告表单，表单内容为标题、发布者、联系方式、采购内容、发布时间、上传文件，弹出框底部显示【确认】与【取消】按钮。输入内容后点击确认新增一条采购信息，点击取消按钮关闭弹出框。新增成功后向所有用户推送本条采购公告信息。
4）点击列表项中的修改按钮或勾选一条数据，点击上方的修改按钮，显示弹层回显本条数据内容，修改完成后点击确认保存修改内容弹层关闭，点击取消按钮弹层关闭。点击列表项的删除按钮删除本条数据，点击列表上方【导出】按钮后，在弹出的「是否确认导出所有采购信息数据项?」对话框中点击【确定】按钮可导出当前列表形成excel 表格。
5）点击列表项内的【查看投标企业】按钮，显示投标企业列表弹层，弹层内企业列表按照是否提交投标文件进行排序，已提交优先排列，投标企业列表项包括编号、企业名称、招标项目、状态、身份证签名、投标文件。点击列表项中的身份证签名【预览】按钮查看身

份证签名水印照片，点击投标文件下的【预览】按钮跳转新页面在线查看标书。
（2）前台双碳采购网
1）进入前台双碳采购网主页面，点击右上角个人头像，如果未登录跳转至登录页进行登录（投标企业账户密码：qy01/123456，选手自行开发），登录成功后进入企业信息页面。用户头像左侧显示推送消息提示图标按钮，图标右上角显示消息未读数，未读数以红色背景和白色文字进行显示，点击消息提示图标按钮，在消息提示图标下方显示下拉列表，列表四周为圆角。列表项为推送消息，内容为是否已读状态、采购标题、发布时间。点击未读消息列表项进入对应详情页并标记已读，同时更新未读消息数，用户头像右侧显示退出登录按钮，点击退出登录按钮显示弹层，弹层内容为提示文字「是否退出登录？」
【确认】与【取消】按钮，点击【确认】按钮退出登录，点击【取消】按钮关闭弹层。
2）当后台新增采购信息时，前台页面右侧顶部显示推送消息提示框，提示框内容包括采购标题、关闭提示框图标、简要内容，内容显示两行，超出为省略号。点击消息提示框进入相应的采购公告详情页。
3）进入前台采购公告详情页，页面左上角显示面包屑，内容为主页、采购公告、公告详情，点击某一项跳转至对应页面。页面右上角显示【打印】按钮和字体选择按钮，字体选择按钮包括【大（40px）】、
【中(30px)】、【小(20px)】三个按钮，点击字体选择三个按钮可调整 采购公告详情内容的字体大小。采购公告详情页面内容包括采购标题、

发布企业、发布时间、招标内容、联系方式、标书附件、【报名】按钮。报名按钮与标书附件两端对齐，【报名】按钮以浅绿色背景、白色字体和圆角的形式显示，点击【报名】按钮显示弹层，弹层内容为
「您确定报名该投标吗？」提示文字、【确定】与【取消】按钮，点击【确定】按钮完成报名，点击【取消】按钮关闭弹层，报名成功后
【报名】按钮不可点击同时背景色置为灰色。
4）点击【打印】按钮弹出打印预览弹窗，弹窗左侧预览区显示需要打印的内容，预览区大小默认为纵向A4 纸大小，弹窗右侧为功能区，功能项自上而下排列，功能项包括目标打印机、页面、布局。弹窗左侧底部显示【保存】按钮和【取消】按钮，功能项左侧显示功能名称，右侧显示下拉框，目标打印机功能下拉框可选择“打印机”，页面功能可选择“全部”“自定义”，布局功能可选择“纵向”“横向”，要求“布局”选择横向时左侧预览区显示横向打印预览页面，选择纵向时纵向显示预览页面，大小为A4 纸大小，点击【取消】按钮关闭弹窗。
5）点击标书附件后，会弹出滑块验证码校验框，校验框顶部右侧显示关闭图标按钮，中间显示安全验证标题，标题下方显示分割线。内容区域顶部显示“拖动下方滑块完成拼图”字样，中间部分显示验证图片（yz.jpg），验证图片会在相同高度随机位置出现一个拼图和一个缺口，底部显示可以拖动的滑块，滑块为蓝色圆角矩形，内部三条白色竖线平均排布，滑动轨道为灰色圆角矩形。拖动滑块带动拼图对齐缺口，拼图与缺口吻合度相差不超过 3 像素时，即可验证通过，

图片中间显示“验证成功”字样，关闭校验框并下载标书附件，拼图与缺口吻合度相差超过 3 像素时内容顶部“拖动下方滑块完成拼图”字样会改成“请控制拼图对齐缺口”，并且拼图回到原始位置，点击关闭图标按钮，会关闭校验框。若未报名，标书附件不可下载。
2.采购公告
（1）前台双碳采购网
1）进入双碳采购网主页面,点击企业信息页左侧【采购公告】菜单，进入采购公告页，实现可投标的信息数据列表展示，信息数据列表内容包括：标的发布名称、投标结束时间和【报名】按钮，【报名】按钮字体为绿色。
2）点击列表项中的【报名】按钮显示弹层，弹层内容为报名标题、
「您确定报名该投标吗？」提示文字、【确定】与【取消】按钮，点击【确认】按钮关闭弹层并提示“报名成功”字样，若点击【取消】按钮可关闭弹层。
3）点击列表项中标的名称，在浏览器新的页签中，打开对应的采购公告详情页面。列表下方显示分页器，每一页只显示 5 条数据，点击分页器中的【上一页】或【下一页】按钮可进行翻页。报名成功后列表项消失，更新列表数据。报名成功的采购公告添加至参标项目列表。
3.参标项目
（1）前台双碳采购网

1）点击采购公告页左侧菜单中的【参标项目】菜单项进入参标项目页，页面左上角显示面包屑，内容为主页、参标项目，点击某一项跳转至对应页面。页面显示可投标的信息数据列表，信息数据列表内容包括：序号、投标状态、标的发布名称、中标结果、投标结束时间、报名状态、【提交资料】按钮。列表项中投标状态分为已投标与未投标，已投标字体为绿色，未投标字体为红色，查看中标结果字体为绿色，报名成功状态字体为黄色，提交资料按钮字体为绿色。列表下方显示分页器，每一页显示 5 条数据，点击分页器中的【上一页】或【下一页】按钮可进行翻页。
2）点击参标项目列表项中的【提交资料】或【查看中标结果】按钮,页面跳转至参标项目详情页，页面顶部显示面包屑，内容为主页、参标项目、参标项目详情，点击某一项跳转至对应页面。页面内容包括招标截止时间倒计时、投标进度、项目信息、上传身份证、签字、身份证签名水印图片、资料上传、【提交】按钮。倒计时结束后
【提交】按钮不可点击。页面顶部显示招标截止时间倒计时提示文字
「距离招投标结束」居中显示，下方显示剩余时间，提示文字颜色为绿色，剩余时间为黑色，倒计时结束后变为红色。投标进度展示当前投标状态，同时用绿色标记状态分为报名、提交材料、开标结果。页面中部展示带有边框的项目信息，项目信息包括项目标题、发布时间、发布企业、内容简介。点击项目信息跳转至项目详情页。
3）上传身份证、签字、身份证签名水印图片横向排列，尺寸一致。点击上传身份证选择区域选择并上传身份证照片，在签字区域内

使用鼠标进行签字，点击下方重签按钮清空签字区域，点击确认按钮 后生成签字图片并上传，右侧显示服务端返回的身份证签名水印图片。
4）页面底部显示上传文件提示文字、【选择文件】与【提交】按钮，点击【选择文件】按钮，选择文件并确定后，上传文件。底部右下角显示【提交】按钮，上传资料后，点击【提交】按钮，提示“提交成功”字样，完成资料提交，并返回参标项目页面。
4.本任务涉及的采购公告页面、采购公告详情页面、参标项目页面和参标项目详情页面支持自适应，支持PC 端和移动端自动切换显示模式。
任务 8：数据可视化（4 分）
注：选手需要将提供的“数据分析数据和字段描述.xls”文件数据，导入到数据库中，自行设计实现后台 API，实现数据可视化分析。
实现销售统计数据分析，利用曲线图分析公司销售情况。曲线图请分析销售统计情况，横坐标为年月（如：2022-11、2022-12……），纵坐标左侧为销售额，其中两条曲线分别表示销售额、合同额。鼠标在组合图中悬停时，会显示具体数据。