vue2-client 1.2.75 → 1.2.78

package/CHANGELOG.md

@@ -1,7 +1,11 @@
 # Change Log
 > 所有关于本项目的变化都在该文档里。
 
-**1.2.75 -2022-06-18 @江超**
+**1.2.78 -2022-06-24 @江超**
+- 功能修改：
+- 更新物联网设备统计页面
+
+**1.2.75 - 1.2.77 -2022-06-18 @江超**
 - 功能修改：
 - 依赖更新
 - 提交物联网设备统计（完成60%）

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.2.75",
+  "version": "1.2.78",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -10,40 +10,42 @@
   },
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
-    "@antv/data-set": "^0.11.4",
+    "@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/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 }