vue2-client 1.2.79 → 1.2.80

package/CHANGELOG.md

@@ -1,215 +1,219 @@
-# 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 @陈栋扬**
-- 初始化：
-- 公共组件和配置抽取完成
+# Change Log
+> 所有关于本项目的变化都在该文档里。
+
+**1.2.80 -2022-07-18 @江超**
+- 功能修改：
+- 更新物联网表统计页面
+
+**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.79",
+  "version": "1.2.80",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/base-client/components/iot/WebmeterAnalysisView/WebmeterAnalysisView.vue

@@ -86,21 +86,23 @@
         </a-col>
       </a-row>
 
-      <a-card :body-style="{padding: '0'}" :bordered="false" :loading="loading">
+      <a-card :body-style="{padding: '0'}" :bordered="false">
         <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>今日</a>
-                <a>本周</a>
-                <a>本月</a>
-                <a>本年</a>
+                <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>
+                  <a-radio-button value="year">近一年</a-radio-button>
+                </a-radio-group>
               </div>
               <a-range-picker :style="{width: '256px'}" />
             </div>
             <a-tab-pane key="1" tab="抄表情况分析">
               <a-row :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
-                <x-card :loadState="radarLoadState" :retry="loadGasView">
+                <x-card :loadState="radarLoadState" :retry="getHandPlanCountByMeterBrand">
                   <div id="container" style="padding: 0 0 0 20px;height: 370px" />
                 </x-card>
               </a-row>
@@ -122,7 +124,7 @@
       <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="用气情况排行">
+            <x-card :bordered="false" :loadState="useGasLoadState" :retry="loadUseGasData" title="用气情况排行">
               <a-dropdown slot="extra" :trigger="['click']" placement="bottomLeft">
                 <a class="ant-dropdown-link" href="#">
                   <a-icon type="ellipsis" />
@@ -138,38 +140,38 @@
               </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 :status="useGasSubValue.status" :sub-total="useGasSubValue.subValue" :total="todayUseGasTotalValue">
                     <span slot="subtitle">
                       <span>当天总用气量</span>
-                      <a-tooltip slot="action" title="指标说明">
+                      <a-tooltip slot="action" title="本日所有物联网表用户总用气量">
                         <a-icon :style="{ marginLeft: '8px' }" type="info-circle-o" />
                       </a-tooltip>
                     </span>
                   </number-info>
                   <!-- miniChart -->
                   <div>
-                    <mini-smooth-area :dataSource="searchUserData" :scale="searchUserScale" :style="{ height: '45px' }" />
+                    <mini-smooth-area :dataSource="useGasWeekData" :scale="useGasWeekDataScale" :style="{ height: '45px' }" />
                   </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 :status="handPlanUserSubValue.status" :sub-total="handPlanUserSubValue.subValue" :total="todayHandPlanUserCount">
                     <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>
                   </number-info>
                   <!-- miniChart -->
                   <div>
-                    <mini-smooth-area :dataSource="searchUserData" :scale="searchUserScale" :style="{ height: '45px' }" />
+                    <mini-smooth-area :dataSource="handPlanUserData" :scale="handPlanUserDataScale" :style="{ height: '45px' }" />
                   </div>
                 </a-col>
               </a-row>
               <div class="ant-table-wrapper">
                 <a-table
                   :columns="searchTableColumns"
-                  :dataSource="searchData"
+                  :dataSource="gasConsumptionRanking"
                   :pagination="{ pageSize: 5 }"
                   row-key="index"
                   size="small"
@@ -181,10 +183,10 @@
                   </span>
                 </a-table>
               </div>
-            </a-card>
+            </x-card>
           </a-col>
           <a-col :lg="24" :md="24" :sm="24" :xl="12" :xs="24">
-            <a-card :bordered="false" :loading="loading" :style="{ height: '100%' }" class="antd-pro-pages-dashboard-analysis-salesCard" title="指令类别占比">
+            <a-card :bordered="false" :loading="false" :style="{ height: '100%' }" class="antd-pro-pages-dashboard-analysis-salesCard" title="指令类别占比">
               <div slot="extra" style="height: inherit;">
                 <div class="analysis-salesTypeRadio">
                   <a-radio-group defaultValue="a">
@@ -262,17 +264,6 @@ for (let i = 0; i < 7; i++) {
     y: Math.ceil(Math.random() * 10)
   })
 }
-const searchUserScale = [
-  {
-    dataKey: 'x',
-    alias: '时间'
-  },
-  {
-    dataKey: 'y',
-    alias: '用气量',
-    min: 0,
-    max: 10
-  }]
 
 const searchTableColumns = [
   {
@@ -363,6 +354,7 @@ export default {
       screenWidth: document.documentElement.clientWidth,
       // 客户名称
       customerName: '',
+      // >> 指令总数统计
       // 指令数统计Loading
       instructSumLoadState: 'loading',
       //  总指令数
@@ -373,6 +365,7 @@ export default {
       instructYoD: 0,
       //  昨日新增指令数
       instructYesAdd: 0,
+      // >> 抄表量统计
       // 抄表量统计Loading
       metereadSumLoadState: 'loading',
       //  总抄表量
@@ -392,8 +385,7 @@ export default {
           alias: '抄表量'
         }
       ],
-      // 抄表情况分析Loading
-      radarLoadState: 'loading',
+      // >> 在用表具数统计
       // 在用表具统计Loading
       usingMeterSumLoadState: 'loading',
       //  在用表具总量
@@ -413,9 +405,8 @@ export default {
           alias: '开户数'
         }
       ],
-      // 指令成功率统计Loading
-      instructRateOfSuccessLoadState: 'loading',
-      //  指令成功率
+      // >> 表具指令下发成功率统计
+      //  表具指令成功率
       instructRateOfSuccessValue: 0,
       //  昨日指令成功率
       yesterdayInstructRateOf: 0,
@@ -425,13 +416,59 @@ export default {
       instructRateOfSuccessYoD: 0,
       //  指令成功率进度色
       instructRateOfColor: 'rgb(19, 194, 194)',
-      // 是否刷新加载中
-      loading: false,
+      // 表具指令下发成功率加载状态
+      instructRateOfSuccessLoadState: 'loading',
+
+      // 统计模式
+      countMode: 'now',
+      // 统计类型
+      tabActiveKey: '1',
+      // >> 表具上报情况统计
+      // 上报统计图表
+      uploadCountPlot: undefined,
+      // 抄表情况分析Loading
+      radarLoadState: 'loading',
+      // >> 用气情况排行统计
+      // 用气情况排行统计Loading
+      useGasLoadState: 'loading',
+      // 当天总用气量
+      todayUseGasTotalValue: 0,
+      // 昨天总用气量
+      yesterdayUseGasTotalValue: 0,
+      // 近一周的每天用气情况
+      useGasWeekData: [],
+      useGasWeekDataScale: [
+        {
+          dataKey: 'x',
+          alias: '时间'
+        },
+        {
+          dataKey: 'y',
+          alias: '用气量'
+        }
+      ],
+      // 当天抄表用户数
+      todayHandPlanUserCount: 0,
+      // 昨天抄表用户数
+      yesterdayHandPlanUserCount: 0,
+      // 近一周的每天抄表情况
+      handPlanUserData: [],
+      handPlanUserDataScale: [
+        {
+          dataKey: 'x',
+          alias: '时间'
+        },
+        {
+          dataKey: 'y',
+          alias: '用户数'
+        }
+      ],
+      // 用气排行榜
+      gasConsumptionRanking: [],
       rankList,
 
       // 搜索用户数
       searchUserData,
-      searchUserScale,
       searchTableColumns,
       searchData,
 
@@ -457,18 +494,37 @@ export default {
     this.loadUsingMeterSumCount()
     // 加载指令成功率统计
     this.loadInstructRateOfSuccess()
-    // 加载g2图表
-    this.loadGasView()
+    // 加载各表厂表具上报情况统计
+    this.getHandPlanCountByMeterBrand()
+    // 加载用气量统计
+    this.loadUseGasData()
   },
   computed: {
-    ...mapState('setting', ['isMobile'])
-  },
-  props: {
+    ...mapState('setting', ['isMobile']),
+    useGasSubValue: function () {
+      const subValue = this.todayUseGasTotalValue - this.yesterdayUseGasTotalValue
+      const status = subValue >= 0 ? 'up' : 'down'
+      return {
+        subValue: subValue,
+        status: status
+      }
+    },
+    handPlanUserSubValue: function () {
+      const subValue = this.todayHandPlanUserCount - this.yesterdayHandPlanUserCount
+      const status = subValue >= 0 ? 'up' : 'down'
+      return {
+        subValue: subValue,
+        status: status
+      }
+    },
   },
   methods: {
+    /**
+     * 加载指令总数统计
+     */
     loadInstructSumCount () {
       this.instructSumLoadState = 'loading'
-      return post(WebmeterAnalysisViewApi.instructSumCount, {}).then(res => {
+      post(WebmeterAnalysisViewApi.instructSumCount, {}).then(res => {
         this.instructSum = res.instructSum
         this.instructYoW = res.instructYoW
         this.instructYoD = res.instructYoD
@@ -479,10 +535,13 @@ export default {
         this.instructSumLoadState = 'error'
       })
     },
+    /**
+     * 加载抄表总数统计
+     */
     loadMetereadSumCount () {
       this.metereadSumDataByWeek = []
       this.metereadSumLoadState = 'loading'
-      return post(WebmeterAnalysisViewApi.meteReadSumCount, {}).then(res => {
+      post(WebmeterAnalysisViewApi.meteReadSumCount, {}).then(res => {
         // 加载近一周抄表数图表
         post(WebmeterAnalysisViewApi.meteReadDataByWeek, {}).then(res => {
           for (let i = 0, len = res.length; i < len; i++) {
@@ -500,6 +559,9 @@ export default {
         this.metereadSumLoadState = 'error'
       })
     },
+    /**
+     * 加载在用表具总数情况
+     */
     loadUsingMeterSumCount () {
       this.usingMeterSumDataByWeek = []
       this.usingMeterSumLoadState = 'loading'
@@ -521,9 +583,12 @@ export default {
         this.usingMeterSumLoadState = 'error'
       })
     },
+    /**
+     * 加载表具指令下发成功率
+     */
     loadInstructRateOfSuccess () {
       this.instructRateOfSuccessLoadState = 'loading'
-      return post(WebmeterAnalysisViewApi.instructRateOfSuccess, {}).then(res => {
+      post(WebmeterAnalysisViewApi.instructRateOfSuccess, {}).then(res => {
         this.instructRateOfSuccessValue = res.instructRateOfSuccessValue * 1.0
         if (this.instructRateOfSuccessValue < 70.0) {
           this.instructRateOfColor = 'rgb(242, 99, 123)'
@@ -541,21 +606,52 @@ export default {
         this.instructRateOfSuccessLoadState = 'error'
       })
     },
+    /**
+     * 格式化日期
+     * @param date 日期字符串
+     * @param format 格式化方式
+     * @returns {string|*} 格式化结果
+     */
     format (date, format) {
       return formatDate(date, format)
     },
-    loadGasView () {
-      const _this = this
-      _this.getHandPlanCountByMeterBrand()
+    /**
+     * 切换周期
+     */
+    toggleCountMode () {
+      this.updateDataByKey()
     },
+    /**
+     * Tab切换
+     */
+    handleTabChange (key) {
+      this.tabActiveKey = key + ''
+      this.updateDataByKey()
+    },
+    /**
+     * 根据模式更新数据
+     */
+    updateDataByKey () {
+      if (this.tabActiveKey === '1') {
+        this.getHandPlanCountByMeterBrand()
+      } else {
+        // this.getDeviceLostContactCountData()
+        // this.getDeviceLostContactRankData()
+      }
+    },
+    /**
+     * 获取各表厂表具上报情况
+     */
     getHandPlanCountByMeterBrand () {
       this.radarLoadState = 'loading'
-      fetch('/webmeterapi/foreignaidHandMeterSumCountData', {
+      fetch(WebmeterAnalysisViewApi.handMeterSumCountData, {
         method: 'POST',
-        body: JSON.stringify({})
+        body: JSON.stringify({
+          type: this.countMode
+        })
       }).then((res) => res.json())
         .then((data) => {
-          const linePlot = new Line('container', {
+          const plotOption = {
             data,
             xField: 'date',
             yField: 'value',
@@ -571,20 +667,47 @@ export default {
             },
             interactions: [{ type: 'brush' }],
             slider: {
-              start: 0.5,
+              start: 0,
               end: 1
             },
             legend: {
-              position: 'top'
+              position: 'top',
+              radio: true,
+              flipPage: false
             },
             smooth: true
-          })
-          linePlot.render()
+          }
+          if (this.uploadCountPlot) {
+            this.uploadCountPlot.update(plotOption)
+          } else {
+            this.uploadCountPlot = new Line('container', plotOption)
+            this.uploadCountPlot.render()
+          }
           this.radarLoadState = 'success'
         })
-      .catch((ex) => {
-        console.error(ex)
-        this.radarLoadState = 'error'
+        .catch((ex) => {
+          console.error(ex)
+          this.radarLoadState = 'error'
+        })
+    },
+    /**
+     * 获取用气请求排行
+     */
+    loadUseGasData () {
+      this.gasConsumptionRanking = []
+      this.useGasLoadState = 'loading'
+      return post(WebmeterAnalysisViewApi.useGasSumCount, {}).then(res => {
+        this.gasConsumptionRanking = res.gasConsumptionRanking
+        this.todayUseGasTotalValue = res.todayUseGasTotalValue
+        this.todayHandPlanUserCount = res.todayHandPlanUserCount
+        this.yesterdayUseGasTotalValue = res.yesterdayUseGasTotalValue
+        this.yesterdayHandPlanUserCount = res.yesterdayHandPlanUserCount
+        this.useGasWeekData = res.useGasWeekData
+        this.handPlanUserData = res.handPlanUserData
+        this.useGasLoadState = 'success'
+      }, err => {
+        console.warn(err)
+        this.useGasLoadState = 'error'
       })
     }
   }

package/src/services/api/WebmeterAnalysisViewApi.js

@@ -1,30 +1,20 @@
-const WebmeterAnalysisViewApi = {
-  // 查询：指令数统计
-  instructSumCount: '/webmeterapi/foreignaidInstructSumCountData',
-  // 查询：抄表数统计
-  meteReadSumCount: '/webmeterapi/foreignaidMetereadSumCountData',
-  // 查询：近一周抄表量数据
-  meteReadDataByWeek: '/webmeterapi/foreignaidMetereadDataByWeekData',
-  // 查询：在用表具数
-  usingMeterSumCount: '/webmeterapi/foreignaidUsingMeterSumCountData',
-  // 查询：近一周在用表具数数据
-  usingMeterDataByWeek: '/webmeterapi/foreignaidUsingMeterDataByWeekData',
-  // 查询：指令成功率统计
-  instructRateOfSuccess: '/webmeterapi/foreignaidInstructRateOfSuccessData',
-  // 查询：用气量趋势统计
-  VerticalChartOfGasConsumption: '/webmeterapi/VerticalChartOfGasConsumption',
-  // 查询：用气排行榜趋势统计
-  GasConsumptionRanking: '/webmeterapi/GasConsumptionRanking',
-  // 查询：指令圆形统计图
-  InstructionStateDiagram: '/webmeterapi/InstructionStateDiagram',
-  // 查询：用户气量分析
-  AnalysisOfUserGasConsumption: '/webmeterapi/AnalysisOfUserGasConsumption',
-  // 查询：用户气量统计图分析
-  LineChartOfTotalGasConsumption: '/webmeterapi/LineChartOfTotalGasConsumption',
-  // 查询：用户用气量分析折线图平均值
-  LineChartOfPerCapitaGasConsumption: '/webmeterapi/LineChartOfPerCapitaGasConsumption',
-  // 查询：周用用气量排行榜
-  RankingOfGasConsumptionAnalysis: '/webmeterapi/RankingOfGasConsumptionAnalysis'
-}
-
-export { WebmeterAnalysisViewApi }
+const WebmeterAnalysisViewApi = {
+  // 查询：指令数统计
+  instructSumCount: '/webmeterapi/foreignaidInstructSumCountData',
+  // 查询：抄表数统计
+  meteReadSumCount: '/webmeterapi/foreignaidMetereadSumCountData',
+  // 查询：近一周抄表量数据
+  meteReadDataByWeek: '/webmeterapi/foreignaidMetereadDataByWeekData',
+  // 查询：在用表具数
+  usingMeterSumCount: '/webmeterapi/foreignaidUsingMeterSumCountData',
+  // 查询：近一周在用表具数数据
+  usingMeterDataByWeek: '/webmeterapi/foreignaidUsingMeterDataByWeekData',
+  // 查询：指令成功率统计
+  instructRateOfSuccess: '/webmeterapi/foreignaidInstructRateOfSuccessData',
+  // 查询：按表厂抄表量统计
+  handMeterSumCountData: '/webmeterapi/foreignaidHandMeterSumCountData',
+  // 查询：统计用气量数据
+  useGasSumCount: '/webmeterapi/foreignaidUseGasSumCountData'
+}
+
+export { WebmeterAnalysisViewApi }