《工业互联网APP设计与开发》课件-14.数据面板页制作

Ⅹ-14数据面板页制作Ⅹ-14数据面板页制作掌握Echarts的安装，了解柱状图、饼图、仪表盘、折线图等图表的使用方法掌握flex布局掌握Day.js的安装和使用掌握Vue中onBeforeUnmount等生命周期钩子的使用掌握api的配置和使用掌握网络数据请求编写注册表单Ⅹ-14数据面板页制作编写注册表单Echarts安装、配置；Echarts图表使用；Day.js安装与使用；页面布局,排版；网络数据请求Ⅹ-14数据面板页制作您是一名web前端工程师，主管给您分配了新的任务，需要您实现一个展示设备数据的页面，页面中将通过图表的方式对设备的各类数据进行展示。通过柱状图的方式展示库存总数、通过饼图展示装箱数量、通过仪表盘展示罐体数据、通过折线图展示液位信息、通过表格展示产线数据，还需要间隔10s对设备数据进行更新。Ⅹ-14数据面板页制作学习任务Ⅹ-14数据面板页制作学习任务Ⅹ-13-S1数据面板页配置学习任务Ⅹ-13-S2数据面板页制作Ⅹ-14数据面板页制作学习任务Ⅹ-14-S1数据面板页配置任务要求：1.独立完成学习任务1的练习题，将完成的答案填到相应的空格处。2.我们将以小组工作的方式完成这个学习任务。3.能够独立完成数据面板页配置。Ⅹ-14数据面板页制作学习任务Ⅹ-14-S1数据面板页配置学习成果展示：1.阅读并独立完成任务第1题。2.通过VisualStudioCode对HTML页面进行编程。3.以小组工作的方式，各小组形成统一答案。4.选出代表，进行展示讲解。5.共同讨论答案。Ⅹ-14数据面板页制作学习任务Ⅹ-14-S1数据面板页配置1.设置空位数量为5，装箱数量为10，补全下方代码，完成Echarts环形图效果。Ⅹ-14数据面板页制作学习任务Ⅹ-14-S1数据面板页配置Ⅹ-14数据面板页制作学习任务Ⅹ-14-S1数据面板页配置Ⅹ-14数据面板页制作学习任务Ⅹ-14-S1数据面板页配置Ⅹ-14数据面板页制作学习任务Ⅹ-14-S1数据面板页配置Ⅹ-14数据面板页制作学习任务Ⅹ-14-S2数据面板页制作任务要求：1.独立完成学习任务2的练习题，将完成的答案填到相应的空格处。2.我们将以小组工作的方式完成这个学习任务。3.能够独立完成数据面板页制作。Ⅹ-14数据面板页制作学习任务Ⅹ-14-S2数据面板页制作学习成果展示：1.阅读并独立完成任务第1题。2.通过VisualStudioCode对HTML页面进行编程。3.以小组工作的方式，各小组形成统一答案。4.选出代表，进行展示讲解。5.共同讨论答案。Ⅹ-14数据面板页制作学习任务Ⅹ-14-S2数据面板页制作1.选择题，选择一个正确的答案，将相应字母填入题中括号内。1）下列选项中，Vue页面中引入组件的步骤正确的是？（

）Aimport…from…Bimport…form…C

importfrom…Dimportform…2）下列描述中对于setInterval()方法描述正确的是？

（）A

该定时器只能执行一次B

该定时器一旦启动，就不能被清理C

该定时器方法中可以传入回调函数和时间参数D该定时器的定时周期以秒为单位3）setInterval()函数的第二个参数设置（

）表示间隔1秒重复执行某段代码A1B10C100D

10004）下列选项中表示Vue实例销毁的生命周期的钩子函数是？（）A

onBeforeUnmountBonBeforeMountConBeforeUpdateDonErrorCapturedⅩ-14数据面板页制作学习任务Ⅹ-14-S2数据面板页制作1.选择题，选择一个正确的答案，将相应字母填入题中括号内。5）文本插值是数据绑定的最基本形式，使用（

）符号进行A[]B{}C

{{}}D<>6）Vue组件对组件属性传值是单向的，并且（）A

只能静态绑定属性B

只能动态绑定属性C

可以静态绑定属性也可以动态绑定属性D不能绑定属性7）push()方法向数组的末尾（

）一个或更多的元素A删除B

添加C修改D

查找Ⅹ-14数据面板页制作学习任务Ⅹ-14-S2数据面板页制作1.选择题，选择一个正确的答案，将相应字母填入题中括号内。1）下列选项中，Vue页面中引入组件的步骤正确的是？（

A

）Aimport…from…Bimport…form…C

importfrom…Dimportform…2）下列描述中对于setInterval()方法描述正确的是？

（C）A

该定时器只能执行一次B

该定时器一旦启动，就不能被清理C

该定时器方法中可以传入回调函数和时间参数D该定时器的定时周期以秒为单位3）setInterval()函数的第二个参数设置（D

）表示间隔1秒重复执行某段代码A1B10C100D

10004）下列选项中表示Vue实例销毁的生命周期的钩子函数是？（A）A

onBeforeUnmountBonBeforeMountConBeforeUpdateDonErrorCapturedⅩ-14数据面板页制作学习任务Ⅹ-14-S2数据面板页制作1.选择题，选择一个正确的答案，将相应字母填入题中括号内。5）文本插值是数据绑定的最基本形式，使用（C

）符号进行A[]B{}C

{{}}D<>6）Vue组件对组件属性传值是单向的，并且（C）A

只能静态绑定属性B

只能动态绑定属性C

可以静态绑定属性也可以动态绑定属性D不能绑定属性7）push()方法向数组的末尾（B

）一个或更多的元素A删除B

添加C修改D

查找Ⅹ-14数据面板页制作学习任务Ⅹ-14-S2数据面板页制作学习成果展示：1.阅读并独立完成任务第2、3题。2.通过VisualStudioCode对HTML页面进行编程。3.以小组工作的方式，各小组形成统一答案。4.选出代表，进行展示讲解。5.共同讨论答案。Ⅹ-14数据面板页制作学习任务Ⅹ-14-S2数据面板页制作3.下面代码中在el-table表格中渲染采集时间，并通过dayjs把时间处理成年-月-日时：分：秒的格式，根据提示补全代码。2.填空题。1）下图代码中打印的值是

；Ⅹ-14数据面板页制作学习任务Ⅹ-14-S2数据面板页制作4.根据活页式教材数据面板业，“罐体压力”图表效果图，对下面Echarts代码进行说明补充。1）配置图表标题名称，标题字体大小为18，颜色为#000，标题加粗显示，距离容器左侧1%，顶部2%，图表为仪表盘类型，图表最大显示数值为10。配置仪表盘，字体大小为16，设置显示数值动画Ⅹ-14数据面板页制作学习任务Ⅹ-14-S2数据面板页制作3.下面代码中在el-table表格中渲染采集时间，并通过dayjs把时间处理成年-月-日时：分：秒的格式，根据提示补全代码。2.填空题。1）下图代码中打印的值是

3

；Ⅹ-14数据面板页制作学习任务Ⅹ-14-S2数据面板页制作4.根据活页式教材数据面板业，“罐体压力”图表效果图，对下面Echarts代码进行说明补充。1）配置图表标题名称，标题字体大小为18，颜色为#000，标题加粗显示，距离容器左侧1%，顶部2%，图表为仪表盘类型，图表最大显示数值为10。配置仪表盘，字体大小为16，设置显示数值动画数据面板页制作请各小组讨论，根据项目任务需求，制定项目实施流程图，并将小组讨论最终结果进行案例展示。根据上述所学，完成注册表单设计，并使用CSS对注册表单进行美化。限时20min将小组讨论结果誊写到工作页中，注意要铅笔（流程图要横平竖直）限时10min数据面板页制作根据项目实施流程图，有些步骤内容等内容需要进行实现方式确认，请每组进行站立会议，根据计划对项目步骤流程进行细化，根据步骤设计实现方式,填写工作页中《站立决策卡》。限时30min数据面板页制作根据计划及决策内容，对项目进行实施，填写实施步骤，对实施步骤的结果进行选择是否实现，并根据自身情况填写工作页《项目实施卡》。限时120min数据面板页制作页面检查完成开发工作后，使用浏览器打开HTML文件，请根据页面检查表，对各自页面进行目检，将检查结果填入表中序号检查内容检查结果附注1页面内容是否缺失是〇

否〇

2页面内布局是否合理是〇

否〇

3页面是否符合任务需求是〇

否〇

数据面板页制作代码检查根据任务需求对代码进行检查，将检查结果填入检查表中序号功能要求检查结果附注1数据面板页布局是否完成是〇否〇

2Api配置是否完成是〇否〇

3网络请求是否完成是〇否〇

4库存总数图表是否制作完成是〇否〇

5装箱数量图表是否制作完成是〇否〇

数