vue2-client 1.2.77 → 1.2.80

package/CHANGELOG.md

@@ -1,6 +1,19 @@
 # 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 @江超**
 - 功能修改：
 - 依赖更新

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.2.77",
+  "version": "1.2.80",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

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/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 }

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 }