vue2-client 1.2.76 → 1.2.79

package/CHANGELOG.md

@@ -1,206 +1,215 @@
-# Change Log
-> 所有关于本项目的变化都在该文档里。
-
-**1.2.75 - 1.2.76 -2022-06-18 @江超**
-- 功能修改：
-- 依赖更新
-- 提交物联网设备统计（完成60%）
-
-**1.2.74 -2022-06-17 @张振宇**
-- 功能修改：
-- 拖拽样式修改
-
-**1.2.73 -2022-06-16 @江超**
-- 功能修改：
-- 现在表格列排序不再通过前端判断，而是从后端生成了
-
-**1.2.71 - 1.2.72 2022-06-16 @张振宇**
-- 功能修改：
-- 基础表单bug修改
-- 数据字段可以拖拽了
-
-**1.2.71 2022-06-15 @苗艳强**
-- 功能修改：
-- 优化工单详情页面移交功能
-- 新增操作工单时获取当前登录用户信息
-- 删除多余的 api
-
-**1.2.69 - 1.2.70 2022-06-09 @张振宇**
-- 功能修改：
-- 表单增加刷新以及选择keys刷新函数
-- 业务逻辑数据源 修改时不展示 logic@
-- 父节点验证框消不掉bug修改
-- 级联选择框的父级框从禁用变可输入的过度状态取消
-- 修改数据字段时校验类型不显示bug
-- 表单水印显示时机修改
-- 字段默认值显示时机修改
-
-
-**1.2.66 - 1.2.68 -2022-06-08 @江超**
-- 功能修改：
-- 设备类型详情页新增设备查询配置
-
-**1.2.64 - 1.2.65 -2022-05-25 @张振宇**
-- 功能修改：
-- 建档表单配置 bug修改
-- 文件上传框 文件类型以及个数限制可以生效了
-- 表单增加按钮插槽
-
-**1.2.64 -2022-05-26 @苗艳强**
-- 功能修改：
-- x-form-table:
-- 修改 afterSubmit 事件增加操作类型
-- 新增 afterDelete 事件
-
-**1.2.57 - 1.2.63 -2022-05-25 @张振宇**
-- 功能修改：
-- 文件上传 基础表单相关修改
-- 简单表单生成 数据字段提取出来
-- 新增修改表单加载时不带出 文件属性
-- 查询表单页面按钮配置
-
-**1.2.55 -2022-05-20 @江超**
-- 问题修复：
-- 解决OA兼容模式下登录取不到字典的问题
-
-**1.2.54-5 -2022-05-20 @张振宇**
-- 功能修改：
-- 运行编译错误修改
-- 我觉得在座的各位都推脱不了责任
-
-**1.2.50 - 1.2.51 -2022-05-11 @何文强**
-- 功能修改：
-- 新增地址搜索框表单项
-- 新增省市区选择框表单项
-
-**1.2.50 - 1.2.51 -2022-05-11 @何文强**
-- 功能修改：
-- 整理地图组件
-
-**1.2.49 -2022-05-07 @江超**
-- 问题修复：
-- 解决售后工单定时器内存泄露问题
-
-**1.2.48 -2022-05-07 @江超**
-- 功能修改：
-- 登录后不再请求加载燃气公司列表，以及燃气设备报警信息了
-
-**1.2.47 -2022-04-27 @何文强**
-- 功能修改：
-- 新增根据地址串获取经纬度
-
-**1.2.46 -2022-04-26 @陈栋扬**
-- 问题修复：
-- 主题颜色可以替换即时生效了
-
-**1.2.44 - 1.2.45 -2022-04-26 @苗艳强**
-- 问题修复：
-- 修复单页面刷新无效的问题
-- 修复单页面关闭再打开不重载的问题
-
-**##1.2.41 - 1.2.43 -2022-04-24 @江超**
-- 功能修改：
-- 全局滚动条样式替换
-- 问题修复：
-- 修复`XaddForm.vue`和`XaddNativeForm.vue`将版本号渲染为表单项的问题
-
-**##1.2.40 -2022-04-24 @苗艳强**
-- 问题修复：
-- 修复 singlepage 页面不能缓存的问题
-
-**##1.2.39 -2022-04-22 @朱子峰**
-- 问题修复：
-- [工单提交] 修复数据库时区问题，正确显示时间
-
-**##1.2.38 -2022-04-22 @朱子峰**
-- 功能修改：
-- [工单提交] 要求联系方式必须明确填写，不再从vuex中获取
-- [工单提交] 添加远程链接使用说明
-
-**##1.2.37 -2022-04-21 @张振宇**
-- `CreateQuery.vue`  还原不小心删除的内容
-- `CreateQuery.vue`  调整v_if的位置
-
-**##1.2.36 -2022-04-21 @苗艳强**
-- 样式修改：
-- 修正了一处布局问题
-- 布局配置：
-- 默认开启 TabsHead 固定位置
-
-**##1.2.35 -2022-04-13 @江超**
-- 功能修改：
-- [工单提交] 页面不再需要登录，而是通过路径传参获取信息
-- 生成环境不再使用CDN加速
-
-**##1.2.34 -2022-04-11 @张振宇**
-- 功能修改：
-- 文件上传组件完善
-- [request.js] post请求可以自定义请求头参数了
-- [.eslint] 不限制json结尾的逗号了
-
-**##1.2.33 -2022-04-11 @朱子峰**
-- 功能修改：
-- [XFormTable]：临时表数据插入BUG修复，增加不需要数据初始化的判断
-
-**##1.2.32 -2022-04-07 @朱子峰**
-- 功能修改：
-- [XFormTable]：新增判断，如果表名以##开始，则在查询时为其创建临时表
-
-**##1.2.30 - 1.2.31  -2022-04-02 @张振宇**
-- 功能修改：
-- 查询配置页面bug修改
-- 表单配置页面bug修改
-
-**##1.2.28 -2022-03-29 @朱子峰**
-- 功能修改：
-- [Cookie]：去除自定义Cookie
-
-**##1.2.27 -2022-03-29 @朱子峰**
-- 功能新增：
-- [XAddNativeForm]：将XAddForm从模态框中抽取，用于页面直接展示Form
-
-**##1.2.25 -2022-03-26 @江超**
-- 功能修改：
-- [查询配置生成]：表单[新增/修改场景]增加[version(版本号)]类型
-- [api.js]：移除[跨域代理前缀]
-- 问题修复：
-- [查询配置生成]：修复修改已有查询配置时，部分数据显示状态不一致的问题
-- [设备详情页]：修复设备抄表记录，异常记录查询报错的问题
-- [XFormItem]：修复非懒加载搜索的下拉框显示问题
-
-**##1.2.20 - 1.2.24 -2022-03-25 @朱子峰**
-- 功能修改：
-- [工单关闭/开始处理]：工单关闭和开始处理时，不由id来进行判断，改由姓名进行判断是否为同一个人
-
-**##1.2.17 - 1.2.19 -2022-03-25 @朱子峰**
-- 问题修复：
-- [钉钉消息推送]：将类别字段从int修改为String，直接传字典中的值
-- 功能修改：
-- [问题描述]：如果用户没有填写描述，新增默认值：“该用户没有填写描述信息”
-- [问题描述]：展示问题描述时，按时间倒序展示，最新的信息显示在最上面
-
-**##1.2.16 -2022-03-25 @张振宇**
-- 功能修改：
-- [查询配置生成]：逻辑修改，取消选择组和顺序，用户新增数组字段时需要选择是否为根节点，根节点index为1,不是根节点得数据字段index默认为父节点index+1
-
-**##1.2.9 - 1.2.15 -2022-03-24 @江超**
-- 功能新增：
-- [查询配置生成]：下拉框表单选择业务逻辑作为数据源时，可以选择数据源加载方式
-- [XFormItem]：当数据源加载方式为懒加载搜索时，将渲染一个可以根据关键词实时查询的选择框
-- 问题修复：
-- [查询配置生成]：修复修改已有查询配置时，显示状态不一致的问题
-- [指令详情页]：修复操作记录查询报错的问题
-
-**##1.2.8 -2022-03-24 @江超**
-- 问题修复：
-- [登录页面]：修复登录后欢迎提示出现undefined的问题
-- [查询配置生成]：修复修改表单查询方式下拉框报错的问题
-
-**##1.2.7 -2022-03-24 @江超**
-- 功能新增：
-- [系统设置]：新增 [工单提交] 功能（submitTicket），用户在操作业务时如发现系统异常，可使用该功能反馈问题
-- [登录页面]：登陆人部门为 [用户工单登记] 时会直接跳转到[工单提交]页面（在基于新架构的营收全面使用时，会取消该限制，并将[工单提交]作为常驻功能）
-
-**##1.0.0 - 1.2.6 -2022-03-23 @陈栋扬**
-- 初始化：
-- 公共组件和配置抽取完成
+# Change Log
+> 所有关于本项目的变化都在该文档里。
+
+**1.2.79 -2022-06-24 @苗艳强**
+- 问题修复：
+- x-form-table：
+- 修复fixedQueryForm属性变化时查询表单异常清空问题
+
+**1.2.78 -2022-06-24 @江超**
+- 功能修改：
+- 更新物联网设备统计页面
+
+**1.2.75 - 1.2.77 -2022-06-18 @江超**
+- 功能修改：
+- 依赖更新
+- 提交物联网设备统计（完成60%）
+
+**1.2.74 -2022-06-17 @张振宇**
+- 功能修改：
+- 拖拽样式修改
+
+**1.2.73 -2022-06-16 @江超**
+- 功能修改：
+- 现在表格列排序不再通过前端判断，而是从后端生成了
+
+**1.2.71 - 1.2.72 2022-06-16 @张振宇**
+- 功能修改：
+- 基础表单bug修改
+- 数据字段可以拖拽了
+
+**1.2.71 2022-06-15 @苗艳强**
+- 功能修改：
+- 优化工单详情页面移交功能
+- 新增操作工单时获取当前登录用户信息
+- 删除多余的 api
+
+**1.2.69 - 1.2.70 2022-06-09 @张振宇**
+- 功能修改：
+- 表单增加刷新以及选择keys刷新函数
+- 业务逻辑数据源 修改时不展示 logic@
+- 父节点验证框消不掉bug修改
+- 级联选择框的父级框从禁用变可输入的过度状态取消
+- 修改数据字段时校验类型不显示bug
+- 表单水印显示时机修改
+- 字段默认值显示时机修改
+
+
+**1.2.66 - 1.2.68 -2022-06-08 @江超**
+- 功能修改：
+- 设备类型详情页新增设备查询配置
+
+**1.2.64 - 1.2.65 -2022-05-25 @张振宇**
+- 功能修改：
+- 建档表单配置 bug修改
+- 文件上传框 文件类型以及个数限制可以生效了
+- 表单增加按钮插槽
+
+**1.2.64 -2022-05-26 @苗艳强**
+- 功能修改：
+- x-form-table:
+- 修改 afterSubmit 事件增加操作类型
+- 新增 afterDelete 事件
+
+**1.2.57 - 1.2.63 -2022-05-25 @张振宇**
+- 功能修改：
+- 文件上传 基础表单相关修改
+- 简单表单生成 数据字段提取出来
+- 新增修改表单加载时不带出 文件属性
+- 查询表单页面按钮配置
+
+**1.2.55 -2022-05-20 @江超**
+- 问题修复：
+- 解决OA兼容模式下登录取不到字典的问题
+
+**1.2.54-5 -2022-05-20 @张振宇**
+- 功能修改：
+- 运行编译错误修改
+- 我觉得在座的各位都推脱不了责任
+
+**1.2.50 - 1.2.51 -2022-05-11 @何文强**
+- 功能修改：
+- 新增地址搜索框表单项
+- 新增省市区选择框表单项
+
+**1.2.50 - 1.2.51 -2022-05-11 @何文强**
+- 功能修改：
+- 整理地图组件
+
+**1.2.49 -2022-05-07 @江超**
+- 问题修复：
+- 解决售后工单定时器内存泄露问题
+
+**1.2.48 -2022-05-07 @江超**
+- 功能修改：
+- 登录后不再请求加载燃气公司列表，以及燃气设备报警信息了
+
+**1.2.47 -2022-04-27 @何文强**
+- 功能修改：
+- 新增根据地址串获取经纬度
+
+**1.2.46 -2022-04-26 @陈栋扬**
+- 问题修复：
+- 主题颜色可以替换即时生效了
+
+**1.2.44 - 1.2.45 -2022-04-26 @苗艳强**
+- 问题修复：
+- 修复单页面刷新无效的问题
+- 修复单页面关闭再打开不重载的问题
+
+**##1.2.41 - 1.2.43 -2022-04-24 @江超**
+- 功能修改：
+- 全局滚动条样式替换
+- 问题修复：
+- 修复`XaddForm.vue`和`XaddNativeForm.vue`将版本号渲染为表单项的问题
+
+**##1.2.40 -2022-04-24 @苗艳强**
+- 问题修复：
+- 修复 singlepage 页面不能缓存的问题
+
+**##1.2.39 -2022-04-22 @朱子峰**
+- 问题修复：
+- [工单提交] 修复数据库时区问题，正确显示时间
+
+**##1.2.38 -2022-04-22 @朱子峰**
+- 功能修改：
+- [工单提交] 要求联系方式必须明确填写，不再从vuex中获取
+- [工单提交] 添加远程链接使用说明
+
+**##1.2.37 -2022-04-21 @张振宇**
+- `CreateQuery.vue`  还原不小心删除的内容
+- `CreateQuery.vue`  调整v_if的位置
+
+**##1.2.36 -2022-04-21 @苗艳强**
+- 样式修改：
+- 修正了一处布局问题
+- 布局配置：
+- 默认开启 TabsHead 固定位置
+
+**##1.2.35 -2022-04-13 @江超**
+- 功能修改：
+- [工单提交] 页面不再需要登录，而是通过路径传参获取信息
+- 生成环境不再使用CDN加速
+
+**##1.2.34 -2022-04-11 @张振宇**
+- 功能修改：
+- 文件上传组件完善
+- [request.js] post请求可以自定义请求头参数了
+- [.eslint] 不限制json结尾的逗号了
+
+**##1.2.33 -2022-04-11 @朱子峰**
+- 功能修改：
+- [XFormTable]：临时表数据插入BUG修复，增加不需要数据初始化的判断
+
+**##1.2.32 -2022-04-07 @朱子峰**
+- 功能修改：
+- [XFormTable]：新增判断，如果表名以##开始，则在查询时为其创建临时表
+
+**##1.2.30 - 1.2.31  -2022-04-02 @张振宇**
+- 功能修改：
+- 查询配置页面bug修改
+- 表单配置页面bug修改
+
+**##1.2.28 -2022-03-29 @朱子峰**
+- 功能修改：
+- [Cookie]：去除自定义Cookie
+
+**##1.2.27 -2022-03-29 @朱子峰**
+- 功能新增：
+- [XAddNativeForm]：将XAddForm从模态框中抽取，用于页面直接展示Form
+
+**##1.2.25 -2022-03-26 @江超**
+- 功能修改：
+- [查询配置生成]：表单[新增/修改场景]增加[version(版本号)]类型
+- [api.js]：移除[跨域代理前缀]
+- 问题修复：
+- [查询配置生成]：修复修改已有查询配置时，部分数据显示状态不一致的问题
+- [设备详情页]：修复设备抄表记录，异常记录查询报错的问题
+- [XFormItem]：修复非懒加载搜索的下拉框显示问题
+
+**##1.2.20 - 1.2.24 -2022-03-25 @朱子峰**
+- 功能修改：
+- [工单关闭/开始处理]：工单关闭和开始处理时，不由id来进行判断，改由姓名进行判断是否为同一个人
+
+**##1.2.17 - 1.2.19 -2022-03-25 @朱子峰**
+- 问题修复：
+- [钉钉消息推送]：将类别字段从int修改为String，直接传字典中的值
+- 功能修改：
+- [问题描述]：如果用户没有填写描述，新增默认值：“该用户没有填写描述信息”
+- [问题描述]：展示问题描述时，按时间倒序展示，最新的信息显示在最上面
+
+**##1.2.16 -2022-03-25 @张振宇**
+- 功能修改：
+- [查询配置生成]：逻辑修改，取消选择组和顺序，用户新增数组字段时需要选择是否为根节点，根节点index为1,不是根节点得数据字段index默认为父节点index+1
+
+**##1.2.9 - 1.2.15 -2022-03-24 @江超**
+- 功能新增：
+- [查询配置生成]：下拉框表单选择业务逻辑作为数据源时，可以选择数据源加载方式
+- [XFormItem]：当数据源加载方式为懒加载搜索时，将渲染一个可以根据关键词实时查询的选择框
+- 问题修复：
+- [查询配置生成]：修复修改已有查询配置时，显示状态不一致的问题
+- [指令详情页]：修复操作记录查询报错的问题
+
+**##1.2.8 -2022-03-24 @江超**
+- 问题修复：
+- [登录页面]：修复登录后欢迎提示出现undefined的问题
+- [查询配置生成]：修复修改表单查询方式下拉框报错的问题
+
+**##1.2.7 -2022-03-24 @江超**
+- 功能新增：
+- [系统设置]：新增 [工单提交] 功能（submitTicket），用户在操作业务时如发现系统异常，可使用该功能反馈问题
+- [登录页面]：登陆人部门为 [用户工单登记] 时会直接跳转到[工单提交]页面（在基于新架构的营收全面使用时，会取消该限制，并将[工单提交]作为常驻功能）
+
+**##1.0.0 - 1.2.6 -2022-03-23 @陈栋扬**
+- 初始化：
+- 公共组件和配置抽取完成

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.2.76",
+  "version": "1.2.79",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -12,38 +12,40 @@
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@antv/data-set": "^0.11.8",
     "@antv/f2": "^3.8.11",
-    "@antv/g2plot": "^2.4.19",
+    "@antv/g2plot": "^2.4.20",
+    "@babel/core": "^7.18.5",
     "@logicflow/core": "^1.1.20",
     "@logicflow/extension": "^1.1.20",
     "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
     "@vue/babel-preset-jsx": "^1.2.4",
     "animate.css": "^4.1.1",
-    "ant-design-vue": "1.7.8",
+    "ant-design-vue": "^1.7.8",
     "axios": "^0.27.2",
     "clipboard": "^2.0.11",
-    "core-js": "^3.23.1",
+    "core-js": "^3.23.2",
+    "webpack": "^4.46.0",
     "date-fns": "^2.28.0",
     "default-passive-events": "^2.0.0",
     "enquire.js": "^2.1.6",
     "file-saver": "^2.0.5",
-    "highlight.js": "^10.7.3",
-    "js-cookie": "^2.2.1",
+    "highlight.js": "^11.5.1",
+    "js-cookie": "^3.0.1",
     "jsencrypt": "^3.2.1",
     "lodash.get": "^4.4.2",
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
     "viser-vue": "^2.4.8",
     "vue": "^2.6.14",
-    "vue-i18n": "^8.27.1",
+    "vue-i18n": "^8.27.2",
     "vue-infinite-scroll": "^2.0.2",
     "vue-json-viewer": "^2.2.22",
     "vue-router": "^3.5.4",
     "vuedraggable": "^2.24.3",
     "vuex": "^3.6.2",
-    "xlsx": "0.18.5"
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
-    "@ant-design/colors": "^4.0.5",
+    "@ant-design/colors": "^6.0.0",
     "@vue/cli-plugin-babel": "^4.5.18",
     "@vue/cli-plugin-eslint": "^4.5.18",
     "@vue/cli-plugin-router": "^4.5.18",
@@ -52,13 +54,13 @@
     "@vue/cli-service": "^4.5.18",
     "@vue/eslint-config-standard": "^4.0.0",
     "@vue/test-utils": "^1.3.0",
-    "@vue/vue2-jest": "^28.0.0",
+    "@vue/vue2-jest": "^27.0.0",
     "@vuepress/plugin-back-to-top": "^1.9.7",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^28.1.1",
+    "babel-jest": "^27.1.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "babel-polyfill": "^6.26.0",
-    "compression-webpack-plugin": "^4.0.1",
+    "compression-webpack-plugin": "^5.0.2",
     "deepmerge": "^4.2.2",
     "echarts": "^5.3.3",
     "eslint": "^6.8.0",
@@ -68,19 +70,20 @@
     "eslint-plugin-vue": "^6.2.2",
     "fast-deep-equal": "^3.1.3",
     "gh-pages": "^3.2.3",
-    "jest": "^28.1.1",
-    "less-loader": "^6.2.0",
+    "jest": "^27.1.0",
+    "less": "^3.13.1",
+    "less-loader": "^7.3.0",
     "react-bmap": "^1.0.130",
     "script-loader": "^0.7.2",
     "style-resources-loader": "^1.5.0",
     "vue-amap": "^0.5.10",
     "vue-baidu-map": "^0.21.22",
-    "vue-bmap-gl": "0.0.30",
+    "vue-bmap-gl": "^0.0.30",
     "vue-cli-plugin-style-resources-loader": "^0.1.5",
-    "vue-mapvgl": "0.0.34",
+    "vue-mapvgl": "^0.0.34",
     "vue-template-compiler": "^2.6.14",
     "vuepress": "^1.9.7",
-    "webpack-theme-color-replacer": "1.4.1",
+    "webpack-theme-color-replacer": "^1.4.1",
     "whatwg-fetch": "^3.6.2"
   },
   "browserslist": [

package/src/base-client/components/common/Upload/Upload.vue

@@ -104,7 +104,7 @@ export default {
       formData.append('resUploadStock', this.model.resUploadStock)
       formData.append('filename', info.file.name)
       formData.append('filesize', (info.file.size / 1024 / 1024).toFixed(4))
-      formData.append('f_operator', this.currUser.username)
+      formData.append('f_operator', this.currUser ? this.currUser.username : '')
 
       // const url = '/webmeteruploadapi/resource'
       // if (process.env.NODE_ENV === 'production') {

package/src/base-client/components/common/XFormTable/XFormTable.vue

@@ -192,13 +192,11 @@ export default {
     },
     fixedQueryForm: {
       handler () {
-        this.mainLoading = true
         this.form = {}
         indexedDB.getByWeb(this.queryParamsName, commonApi.getColumnsJson, { str: this.queryParamsName }, (ret) => {
           this.tableColumns = ret.columnJson
           this.formItems = ret.formJson
           this.buttonState = ret.buttonState
-          this.mainLoading = false
           this.loaded = true
         })
       },

package/src/base-client/components/iot/DeviceDetailsView/part/DeviceDetailsCount.vue

@@ -66,10 +66,10 @@
 
     <a-card :body-style="{padding: '0'}" :bordered="false" :loading="loading">
       <div class="salesCard">
-        <a-tabs :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}" default-active-key="1" size="large">
+        <a-tabs :activeKey="tabActiveKey" :default-active-key="tabActiveKey" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}" size="large" @change="handleTabChange">
           <div slot="tabBarExtraContent" class="extra-wrapper">
             <div class="extra-item">
-              <a-radio-group v-model="uploadCountMode" button-style="solid" @change="getDeviceUploadCountData">
+              <a-radio-group v-model="countMode" button-style="solid" @change="toggleCountMode">
                 <a-radio-button value="now">最近24小时</a-radio-button>
                 <a-radio-button value="week">近一周</a-radio-button>
                 <a-radio-button value="month">近一个月</a-radio-button>
@@ -88,10 +88,14 @@
           <a-tab-pane key="2" tab="失联情况分析">
             <a-row>
               <a-col :lg="12" :md="12" :sm="24" :xl="16" :xs="24">
-                <bar :data="barData2" title="失联发生情况" />
+                <x-card :loadState="lostContactLoadState" :retry="getDeviceLostContactCountData">
+                  <div id="lostContactContainer" style="padding: 0 0 0 20px;height: 370px" />
+                </x-card>
               </a-col>
               <a-col :lg="12" :md="12" :sm="24" :xl="8" :xs="24">
-                <rank-list :list="rankList" title="失联天数排行"/>
+                <x-card :loadState="lostContactRankLoadState" :retry="getDeviceLostContactCountData">
+                  <rank-list :list="lostContactRank" title="失联天数排行"/>
+                </x-card>
               </a-col>
             </a-row>
           </a-tab-pane>
@@ -102,26 +106,26 @@
     <div :class="!isMobile && 'desktop'" class="antd-pro-pages-dashboard-analysis-twoColLayout">
       <a-row :gutter="24" :style="{ marginTop: '24px' }" type="flex">
         <a-col :lg="24" :md="24" :sm="24" :xl="12" :xs="24">
-          <a-card :bordered="false" :loading="loading" :style="{ height: '100%' }" title="用气情况排行">
+          <a-card :bordered="false" :loading="loading" :style="{ height: '100%' }" title="异常报警分析">
             <a-dropdown slot="extra" :trigger="['click']" placement="bottomLeft">
               <a class="ant-dropdown-link" href="#">
                 <a-icon type="ellipsis" />
               </a>
               <a-menu slot="overlay">
                 <a-menu-item>
-                  <a href="javascript:">操作一</a>
+                  <a href="javascript:">异常处理</a>
                 </a-menu-item>
                 <a-menu-item>
-                  <a href="javascript;">操作二</a>
+                  <a href="javascript;">转向异常</a>
                 </a-menu-item>
               </a-menu>
             </a-dropdown>
             <a-row :gutter="68">
               <a-col :sm="12" :style="{ marginBottom: ' 24px'}" :xs="24">
-                <number-info :sub-total="17.1" :total="21232.1">
+                <number-info :sub-total="0" :total="0">
                   <span slot="subtitle">
-                    <span>当天总用气量</span>
-                    <a-tooltip slot="action" title="指标说明">
+                    <span>异常发生次数</span>
+                    <a-tooltip slot="action" title="近一年内发生异常的次数">
                       <a-icon :style="{ marginLeft: '8px' }" type="info-circle-o" />
                     </a-tooltip>
                   </span>
@@ -132,10 +136,10 @@
                 </div>
               </a-col>
               <a-col :sm="12" :style="{ marginBottom: ' 24px'}" :xs="24">
-                <number-info :sub-total="0.2" :total="0.7" status="up">
+                <number-info :sub-total="0" :total="0" status="up">
                   <span slot="subtitle">
-                    <span>人均用气量</span>
-                    <a-tooltip slot="action" title="指标说明">
+                    <span>报警发生次数</span>
+                    <a-tooltip slot="action" title="近一年内发生报警的次数">
                       <a-icon :style="{ marginLeft: '8px' }" type="info-circle-o" />
                     </a-tooltip>
                   </span>
@@ -209,32 +213,11 @@ import {
   MiniSmoothArea
 } from '@vue2-client/components'
 import { formatDate } from '@vue2-client/utils/util'
-import { Line } from '@antv/g2plot'
+import { Line, Column } from '@antv/g2plot'
 import { mapState } from 'vuex'
 import { post } from '@vue2-client/services/api'
 import { DeviceDetailsCountApi } from '@vue2-client/services/api/iot/DeviceDetailsView/DeviceDetailsCountApi'
 
-const barData = []
-const barData2 = []
-for (let i = 0; i < 12; i += 1) {
-  barData.push({
-    x: `${i + 1}月`,
-    y: Math.floor(Math.random() * 1000) + 200
-  })
-  barData2.push({
-    x: `${i + 1}月`,
-    y: Math.floor(Math.random() * 1000) + 200
-  })
-}
-
-const rankList = []
-for (let i = 0; i < 7; i++) {
-  rankList.push({
-    name: '白鹭岛 ' + (i + 1) + ' 号店',
-    total: 1234.56 - i * 100
-  })
-}
-
 const searchUserData = []
 for (let i = 0; i < 7; i++) {
   searchUserData.push({
@@ -249,7 +232,7 @@ const searchUserScale = [
   },
   {
     dataKey: 'y',
-    alias: '用气量',
+    alias: '发生次数',
     min: 0,
     max: 10
   }]
@@ -257,46 +240,25 @@ const searchUserScale = [
 const searchTableColumns = [
   {
     dataIndex: 'index',
-    title: '用户编号',
+    title: '异常类型',
     width: 90
   },
   {
     dataIndex: 'keyword',
-    title: '用户姓名'
+    title: '异常说明'
   },
   {
     dataIndex: 'count',
-    title: '用气量'
+    title: '发生时间'
   },
   {
     dataIndex: 'range',
-    title: '周涨幅',
-    align: 'right',
-    sorter: (a, b) => a.range - b.range,
-    scopedSlots: { customRender: 'range' }
+    title: '是否处理',
+    align: 'right'
   }
 ]
 
-const userInfoArray = [
-  '德昌鸿公司2',
-  '瑞鑫宇公司',
-  '保康县熊绎中学',
-  '文康置业有限公司',
-  '湖北省旗星文化旅游实业有限公司'
-]
-
 const searchData = []
-let j = 0
-for (let i = 0; i < 5; i += 1) {
-  searchData.push({
-    index: Math.floor(Math.random() * 10000000),
-    keyword: userInfoArray[j],
-    count: Math.floor(Math.random() * 1000),
-    range: Math.floor(Math.random() * 10),
-    status: Math.floor((Math.random() * 10) % 2)
-  })
-  j++
-}
 
 const DataSet = require('@antv/data-set')
 
@@ -381,16 +343,27 @@ export default {
       deviceInstructRateOfColor: 'rgb(19, 194, 194)',
       // 设备指令下发成功率加载状态
       deviceInstructRateOfSuccessLoadState: 'loading',
+
+      // 是否刷新加载中
+      loading: false,
+      // 统计模式
+      countMode: 'now',
+      // 统计类型
+      tabActiveKey: '1',
       // >> 设备上报情况统计
-      // 上报统计模式
-      uploadCountMode: 'now',
       // 上报统计图表
       uploadCountPlot: undefined,
       // 抄表情况分析Loading
       radarLoadState: 'loading',
-      // 是否刷新加载中
-      loading: false,
-      rankList,
+      // >> 设备失联情况统计
+      // 失联统计图表
+      lostContactCountPlot: undefined,
+      // 失联情况分析Loading
+      lostContactLoadState: 'loading',
+      // 失联天数排行榜
+      lostContactRank: [],
+      // 失联天数排行榜Loading
+      lostContactRankLoadState: 'loading',
 
       // 搜索用户数
       searchUserData,
@@ -398,9 +371,6 @@ export default {
       searchTableColumns,
       searchData,
 
-      barData,
-      barData2,
-
       //
       pieScale,
       pieData,
@@ -513,6 +483,30 @@ export default {
     format (date, format) {
       return formatDate(date, format)
     },
+    /**
+     * 切换周期
+     */
+    toggleCountMode () {
+      this.updateDataByKey()
+    },
+    /**
+     * Tab切换
+     */
+    handleTabChange (key) {
+      this.tabActiveKey = key + ''
+      this.updateDataByKey()
+    },
+    /**
+     * 根据模式更新数据
+     */
+    updateDataByKey () {
+      if (this.tabActiveKey === '1') {
+        this.getDeviceUploadCountData()
+      } else {
+        this.getDeviceLostContactCountData()
+        this.getDeviceLostContactRankData()
+      }
+    },
     /**
      * 获取设备上报情况
      */
@@ -522,46 +516,107 @@ export default {
         method: 'POST',
         body: JSON.stringify({
           deviceId: this.deviceId,
-          type: this.uploadCountMode
+          type: this.countMode
         })
       }).then((res) => res.json())
         .then((data) => {
+          const count = data.count
+          const plotOption = {
+            data: count,
+            xField: 'date',
+            yField: 'value',
+            seriesField: 'name',
+            yAxis: {
+              label: {
+                // 数值格式化为千分位
+                formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`)
+              }
+            },
+            tooltip: {
+              shared: true
+            },
+            interactions: [{ type: 'brush' }],
+            slider: {
+              start: 0,
+              end: 1
+            },
+            legend: {
+              position: 'top',
+              radio: true,
+              flipPage: false
+            },
+            smooth: true
+          }
+          if (data.legendStyle) {
+            plotOption.legend.selected = data.legendStyle
+          }
           if (this.uploadCountPlot) {
-            this.uploadCountPlot.changeData(data)
+            this.uploadCountPlot.update(plotOption)
           } else {
-            this.uploadCountPlot = new Line('container', {
+            this.uploadCountPlot = new Line('container', plotOption)
+            this.uploadCountPlot.render()
+          }
+          this.radarLoadState = 'success'
+        })
+        .catch((ex) => {
+          console.error(ex)
+          this.radarLoadState = 'error'
+        })
+    },
+    /**
+     * 获取设备失联情况
+     */
+    getDeviceLostContactCountData () {
+      this.lostContactLoadState = 'loading'
+      fetch(DeviceDetailsCountApi.getDeviceLostContactCountData, {
+        method: 'POST',
+        body: JSON.stringify({
+          deviceId: this.deviceId,
+          type: this.countMode
+        })
+      }).then((res) => res.json())
+        .then((data) => {
+          if (this.lostContactCountPlot) {
+            this.lostContactCountPlot.changeData(data)
+          } else {
+            this.lostContactCountPlot = new Column('lostContactContainer', {
               data,
-              xField: 'date',
-              yField: 'value',
-              seriesField: 'name',
-              yAxis: {
+              xField: '失联日期',
+              yField: '失联天数',
+              xAxis: {
                 label: {
-                  // 数值格式化为千分位
-                  formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`)
-                }
+                  autoRotate: false,
+                },
               },
-              tooltip: {
-                shared: true
-              },
-              interactions: [{ type: 'brush' }],
               slider: {
-                start: 0.5,
+                start: 0,
                 end: 1
-              },
-              legend: {
-                position: 'top',
-                radio: true
-              },
-              smooth: true
+              }
             })
-            this.uploadCountPlot.render()
+            this.lostContactCountPlot.render()
           }
-          this.radarLoadState = 'success'
+          this.lostContactLoadState = 'success'
         })
         .catch((ex) => {
           console.error(ex)
-          this.radarLoadState = 'error'
+          this.lostContactLoadState = 'error'
         })
+    },
+    /**
+     * 获取设备失联排行榜
+     */
+    getDeviceLostContactRankData () {
+      this.lostContactRankLoadState = 'loading'
+      post(DeviceDetailsCountApi.getDeviceLostContactRankData, {
+        deviceId: this.deviceId,
+        type: this.countMode
+      }).then(res => {
+        this.lostContactRank = res
+        this.lostContactRankLoadState = 'success'
+      }, err => {
+        console.warn(err)
+        this.lostContactRankLoadState = 'error'
+      })
     }
   }
 }

package/src/services/api/iot/DeviceDetailsView/DeviceDetailsCountApi.js

@@ -8,7 +8,11 @@ const DeviceDetailsCountApi = {
   // 获取设备指令下发成功率
   getInstructRateOfSuccess: '/webmeterapi/getInstructRateOfSuccess',
   // 获取设备上报情况
-  getDeviceUploadCountData: '/webmeterapi/getDeviceUploadCountData'
+  getDeviceUploadCountData: '/webmeterapi/getDeviceUploadCountData',
+  // 获取设备失联情况
+  getDeviceLostContactCountData: '/webmeterapi/getDeviceLostContactCountData',
+  // 获取设备失联排行榜
+  getDeviceLostContactRankData: '/webmeterapi/getDeviceLostContactRankData'
 }
 
 export { DeviceDetailsCountApi }