vue2-client 1.2.84 → 1.2.88

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

@@ -1,678 +1,678 @@
-<template>
-  <div>
-    <a-row :gutter="24">
-      <a-col :md="12" :sm="24" :style="{ marginBottom: '24px' }" :xl="6">
-        <x-card :loadState="loadDeviceUsedDaySumState" :retry="getDeviceUsedDaySum">
-          <chart-card :total="usedDays" title="设备累计使用时长" unit="天">
-            <a-tooltip slot="action" :style="{ marginRight: '10px' }" title="刷新" @click="getDeviceUsedDaySum">
-              <a-icon type="redo" />
-            </a-tooltip>
-            <a-tooltip slot="action" title="从安装至今设备使用天数">
-              <a-icon type="info-circle-o" />
-            </a-tooltip>
-            <template slot="footer"><span>{{ format(installDate, 'yyyy-MM-dd') }} 安装</span></template>
-          </chart-card>
-        </x-card>
-      </a-col>
-      <a-col :md="12" :sm="24" :style="{ marginBottom: '24px' }" :xl="6">
-        <x-card :loadState="loadDeviceUploadTimesState" :retry="getDeviceUploadTimesCount">
-          <chart-card :total="uploadTimes | NumberFormat" title="累计上报次数" unit="次">
-            <a-tooltip slot="action" :style="{ marginRight: '10px' }" title="刷新" @click="getDeviceUploadTimesCount">
-              <a-icon type="redo" />
-            </a-tooltip>
-            <a-tooltip slot="action" title="从安装至今累计上报次数">
-              <a-icon type="info-circle-o" />
-            </a-tooltip>
-            <div>
-              <mini-area :dataSource="deviceRecentlyUploadList" :scale="deviceRecentlyUploadScale" />
-            </div>
-            <template slot="footer">近七天共上报 <span>{{ deviceRecentlyUploadSum | NumberFormat }} 次</span></template>
-          </chart-card>
-        </x-card>
-      </a-col>
-      <a-col :md="12" :sm="24" :style="{ marginBottom: '24px' }" :xl="6">
-        <x-card :loadState="loadDeviceLostContactState" :retry="getDeviceLostContactCount">
-          <chart-card :total="lostContactTimes | NumberFormat" title="累计失联次数" unit="次">
-            <a-tooltip slot="action" :style="{ marginRight: '10px' }" title="刷新" @click="getDeviceLostContactCount()">
-              <a-icon type="redo" />
-            </a-tooltip>
-            <a-tooltip slot="action" title="从安装至今累计失联（即3天未上报）次数">
-              <a-icon type="info-circle-o" />
-            </a-tooltip>
-            <div>
-              <mini-bar :dataSource="deviceLostContactList" :scale="deviceLostContactScale" />
-            </div>
-            <template slot="footer">最近失联日期 <span> {{ format(lastLostContactDate, 'yyyy-MM-dd') }}</span></template>
-          </chart-card>
-        </x-card>
-      </a-col>
-      <a-col :md="12" :sm="24" :style="{ marginBottom: '24px' }" :xl="6">
-        <x-card :loadState="deviceInstructRateOfSuccessLoadState" :retry="getInstructRateOfSuccess">
-          <chart-card :total="deviceInstructRateOfSuccessValue" title="指令下发成功率" unit="%">
-            <a-tooltip slot="action" :style="{ marginRight: '10px' }" title="刷新" @click="getInstructRateOfSuccess()">
-              <a-icon type="redo" />
-            </a-tooltip>
-            <a-tooltip slot="action" title="执行成功和已发送状态的指令占所有指令的比例">
-              <a-icon type="info-circle-o" />
-            </a-tooltip>
-            <div>
-              <mini-progress :color="deviceInstructRateOfColor" :percentage="deviceInstructRateOfSuccessValue" :target="90" height="8px" />
-            </div>
-            <template slot="footer">共下发指令 <span> {{ deviceInstructCount | NumberFormat }} 次</span></template>
-          </chart-card>
-        </x-card>
-      </a-col>
-    </a-row>
-
-    <a-card :body-style="{padding: '0'}" :bordered="false" :loading="loading">
-      <div class="salesCard">
-        <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="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="getDeviceUploadCountData">
-                <div id="container" style="padding: 0 0 0 20px;height: 370px" />
-              </x-card>
-            </a-row>
-          </a-tab-pane>
-          <a-tab-pane key="2" tab="失联情况分析">
-            <a-row>
-              <a-col :lg="12" :md="12" :sm="24" :xl="16" :xs="24">
-                <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">
-                <x-card :loadState="lostContactRankLoadState" :retry="getDeviceLostContactCountData">
-                  <rank-list :list="lostContactRank" title="失联天数排行"/>
-                </x-card>
-              </a-col>
-            </a-row>
-          </a-tab-pane>
-        </a-tabs>
-      </div>
-    </a-card>
-
-    <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-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-menu-item>
-                <a-menu-item>
-                  <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="0" :total="0">
-                  <span slot="subtitle">
-                    <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' }" />
-                </div>
-              </a-col>
-              <a-col :sm="12" :style="{ marginBottom: ' 24px'}" :xs="24">
-                <number-info :sub-total="0" :total="0" status="up">
-                  <span slot="subtitle">
-                    <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' }" />
-                </div>
-              </a-col>
-            </a-row>
-            <div class="ant-table-wrapper">
-              <a-table
-                :columns="searchTableColumns"
-                :dataSource="searchData"
-                :pagination="{ pageSize: 5 }"
-                row-key="index"
-                size="small"
-              >
-                <span slot="range" slot-scope="text, record">
-                  <trend :flag="record.status === 0 ? 'up' : 'down'">
-                    {{ text }}%
-                  </trend>
-                </span>
-              </a-table>
-            </div>
-          </a-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="指令类别占比">
-            <div slot="extra" style="height: inherit;">
-              <div class="analysis-salesTypeRadio">
-                <a-radio-group defaultValue="a">
-                  <a-radio-button value="a">本日</a-radio-button>
-                  <a-radio-button value="b">本周</a-radio-button>
-                  <a-radio-button value="c">本月</a-radio-button>
-                </a-radio-group>
-              </div>
-            </div>
-            <h4></h4>
-            <div>
-              <!-- style="width: calc(100% - 240px);" -->
-              <div>
-                <v-chart :data="pieData" :force-fit="true" :height="405" :scale="pieScale">
-                  <v-tooltip :showTitle="false" dataKey="item*percent" />
-                  <v-axis />
-                  <!-- position="right" :offsetX="-140" -->
-                  <v-legend dataKey="item"/>
-                  <v-pie :vStyle="pieStyle" color="item" position="percent" />
-                  <v-coord :innerRadius="0.6" :radius="0.75" type="theta" />
-                </v-chart>
-              </div>
-            </div>
-          </a-card>
-        </a-col>
-      </a-row>
-    </div>
-  </div>
-</template>
-
-<script>
-import moment from 'moment'
-import {
-  ChartCard,
-  MiniArea,
-  MiniBar,
-  MiniProgress,
-  RankList,
-  Bar,
-  Trend,
-  NumberInfo,
-  MiniSmoothArea
-} from '@vue2-client/components'
-import { formatDate } from '@vue2-client/utils/util'
-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 searchUserData = []
-for (let i = 0; i < 7; i++) {
-  searchUserData.push({
-    x: moment().add(i, 'days').format('YYYY-MM-DD'),
-    y: Math.ceil(Math.random() * 10)
-  })
-}
-const searchUserScale = [
-  {
-    dataKey: 'x',
-    alias: '时间'
-  },
-  {
-    dataKey: 'y',
-    alias: '发生次数',
-    min: 0,
-    max: 10
-  }]
-
-const searchTableColumns = [
-  {
-    dataIndex: 'index',
-    title: '异常类型',
-    width: 90
-  },
-  {
-    dataIndex: 'keyword',
-    title: '异常说明'
-  },
-  {
-    dataIndex: 'count',
-    title: '发生时间'
-  },
-  {
-    dataIndex: 'range',
-    title: '是否处理',
-    align: 'right'
-  }
-]
-
-const searchData = []
-
-const DataSet = require('@antv/data-set')
-
-const sourceData = [
-  { item: '远程开户', count: 32.2 },
-  { item: '远程充值', count: 21 },
-  { item: '阀门控制', count: 17 },
-  { item: '远程调价', count: 13 },
-  { item: '设置参数', count: 9 },
-  { item: '远程注销', count: 7.8 }
-]
-
-const pieScale = [{
-  dataKey: 'percent',
-  min: 0,
-  formatter: '.0%'
-}]
-
-const dv = new DataSet.View().source(sourceData)
-dv.transform({
-  type: 'percent',
-  field: 'count',
-  dimension: 'item',
-  as: 'percent'
-})
-const pieData = dv.rows
-
-export default {
-  name: 'DeviceDetailsCount',
-  components: {
-    ChartCard,
-    MiniArea,
-    MiniBar,
-    MiniProgress,
-    RankList,
-    Bar,
-    Trend,
-    NumberInfo,
-    MiniSmoothArea
-  },
-  data () {
-    return {
-      // 页面宽度
-      screenWidth: document.documentElement.clientWidth,
-      // 客户名称
-      customerName: '',
-      // >> 设备累计使用时长统计
-      //  设备近七天上报情况
-      deviceRecentlyUploadList: [],
-      //  设备累计使用天数
-      usedDays: 0,
-      //  设备安装时间
-      installDate: '',
-      //  设备累计使用天数加载状态
-      loadDeviceUsedDaySumState: 'loading',
-      // >> 设备累计上报次数统计
-      //  设备累计上报次数
-      uploadTimes: 0,
-      //  设备近七天上报总次数
-      deviceRecentlyUploadSum: 0,
-      //  设备近七天上报情况明细列
-      deviceRecentlyUploadScale: [{ dataKey: 'x', alias: '时间' }, { dataKey: 'y', alias: '次数' }],
-      //  设备累计上报次数加载状态
-      loadDeviceUploadTimesState: 'loading',
-      // >> 设备累计失联次数统计
-      //  设备近三个月失联情况
-      deviceLostContactList: [],
-      //  设备累计失联次数
-      lostContactTimes: 0,
-      //  设备最近失联日期
-      lastLostContactDate: undefined,
-      //  设备近七天失联情况明细列
-      deviceLostContactScale: [{ dataKey: 'x', alias: '时间' }, { dataKey: 'y', alias: '失联天数' }],
-      //  设备累计失联次数加载状态
-      loadDeviceLostContactState: 'loading',
-      // >> 设备指令下发成功率统计
-      //  设备指令成功率
-      deviceInstructRateOfSuccessValue: 0,
-      //  设备指令总数
-      deviceInstructCount: 0,
-      //  指令成功率进度色
-      deviceInstructRateOfColor: 'rgb(19, 194, 194)',
-      // 设备指令下发成功率加载状态
-      deviceInstructRateOfSuccessLoadState: 'loading',
-
-      // 是否刷新加载中
-      loading: false,
-      // 统计模式
-      countMode: 'now',
-      // 统计类型
-      tabActiveKey: '1',
-      // >> 设备上报情况统计
-      // 上报统计图表
-      uploadCountPlot: undefined,
-      // 抄表情况分析Loading
-      radarLoadState: 'loading',
-      // >> 设备失联情况统计
-      // 失联统计图表
-      lostContactCountPlot: undefined,
-      // 失联情况分析Loading
-      lostContactLoadState: 'loading',
-      // 失联天数排行榜
-      lostContactRank: [],
-      // 失联天数排行榜Loading
-      lostContactRankLoadState: 'loading',
-
-      // 搜索用户数
-      searchUserData,
-      searchUserScale,
-      searchTableColumns,
-      searchData,
-
-      //
-      pieScale,
-      pieData,
-      sourceData,
-      pieStyle: {
-        stroke: '#fff',
-        lineWidth: 1
-      }
-    }
-  },
-  props: {
-    deviceId: {
-      type: Number,
-      required: true
-    }
-  },
-  mounted () {
-    this.getDeviceUsedDaySum()
-    this.getDeviceUploadTimesCount()
-    this.getDeviceLostContactCount()
-    this.getInstructRateOfSuccess()
-    this.getDeviceUploadCountData()
-  },
-  computed: {
-    ...mapState('setting', ['isMobile'])
-  },
-  methods: {
-    /**
-     * 获取设备使用天数
-     */
-    getDeviceUsedDaySum () {
-      this.loadDeviceUsedDaySumState = 'loading'
-      post(DeviceDetailsCountApi.getDeviceUsedDaySum, {
-        deviceId: this.deviceId
-      }).then(res => {
-        this.usedDays = res.value
-        this.installDate = res.installDate
-        this.loadDeviceUsedDaySumState = 'success'
-      }, err => {
-        console.warn(err)
-        this.loadDeviceUsedDaySumState = 'error'
-      })
-    },
-    /**
-     * 获取设备累计上报次数和近七天上报情况
-     */
-    getDeviceUploadTimesCount () {
-      this.loadDeviceUploadTimesState = 'loading'
-      this.deviceRecentlyUploadSum = 0
-      post(DeviceDetailsCountApi.getDeviceUploadTimesCount, {
-        deviceId: this.deviceId
-      }).then(res => {
-        this.uploadTimes = res.value
-        this.deviceRecentlyUploadList = res.recentlyUpload
-        for (const item of this.deviceRecentlyUploadList) {
-          this.deviceRecentlyUploadSum += item.y
-        }
-        this.loadDeviceUploadTimesState = 'success'
-      }, err => {
-        console.warn(err)
-        this.loadDeviceUploadTimesState = 'error'
-      })
-    },
-    /**
-     * 获取设备累计失联次数和近三个月失联情况
-     */
-    getDeviceLostContactCount () {
-      this.loadDeviceLostContactState = 'loading'
-      return post(DeviceDetailsCountApi.getDeviceLostContactCount, {
-        deviceId: this.deviceId
-      }).then(res => {
-        this.lostContactTimes = res.value
-        this.lastLostContactDate = res.lastLostContactDate
-        this.deviceLostContactList = res.lostContactList
-        this.loadDeviceLostContactState = 'success'
-      }, err => {
-        console.warn(err)
-        this.loadDeviceLostContactState = 'error'
-      })
-    },
-    /**
-     * 获取设备指令下发成功率
-     */
-    getInstructRateOfSuccess () {
-      this.deviceInstructRateOfSuccessLoadState = 'loading'
-      post(DeviceDetailsCountApi.getInstructRateOfSuccess, {
-        deviceId: this.deviceId
-      }).then(res => {
-        this.deviceInstructRateOfSuccessValue = res.deviceInstructRateOfSuccessValue * 1.0
-        if (this.deviceInstructRateOfSuccessValue < 70.0) {
-          this.deviceInstructRateOfColor = 'rgb(242, 99, 123)'
-        } else if (this.deviceInstructRateOfSuccessValue < 90.0) {
-          this.deviceInstructRateOfColor = 'rgb(251, 212, 55)'
-        } else {
-          this.deviceInstructRateOfColor = 'rgb(19, 194, 194)'
-        }
-        this.deviceInstructCount = res.value
-        this.deviceInstructRateOfSuccessLoadState = 'success'
-      }, err => {
-        console.warn(err)
-        this.deviceInstructRateOfSuccessLoadState = 'error'
-      })
-    },
-    /**
-     * 格式化日期
-     * @param date 日期字符串
-     * @param format 格式化方式
-     * @returns {string|*} 格式化结果
-     */
-    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()
-      }
-    },
-    /**
-     * 获取设备上报情况
-     */
-    getDeviceUploadCountData () {
-      this.radarLoadState = 'loading'
-      fetch(DeviceDetailsCountApi.getDeviceUploadCountData, {
-        method: 'POST',
-        body: JSON.stringify({
-          deviceId: this.deviceId,
-          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.update(plotOption)
-          } else {
-            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: '失联日期',
-              yField: '失联天数',
-              xAxis: {
-                label: {
-                  autoRotate: false,
-                },
-              },
-              slider: {
-                start: 0,
-                end: 1
-              }
-            })
-            this.lostContactCountPlot.render()
-          }
-          this.lostContactLoadState = 'success'
-        })
-        .catch((ex) => {
-          console.error(ex)
-          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'
-      })
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-
-.text {
-  color: rgba(0, 0, 0, .45);
-}
-
-.heading {
-  color: rgba(0, 0, 0, .85);
-  font-size: 20px;
-}
-
-.extra-wrapper {
-  line-height: 55px;
-  padding-right: 24px;
-
-  .extra-item {
-    display: inline-block;
-    margin-right: 24px;
-
-    a {
-      margin-left: 24px;
-    }
-  }
-}
-
-.antd-pro-pages-dashboard-analysis-twoColLayout {
-  position: relative;
-  display: flex;
-  display: block;
-  flex-flow: row wrap;
-}
-
-.antd-pro-pages-dashboard-analysis-salesCard {
-  height: calc(100% - 24px);
-  /deep/ .ant-card-head {
-    position: relative;
-  }
-}
-
-.dashboard-analysis-iconGroup {
-  i {
-    margin-left: 16px;
-    color: rgba(0,0,0,.45);
-    cursor: pointer;
-    transition: color .32s;
-    color: black;
-  }
-}
-.analysis-salesTypeRadio {
-  position: absolute;
-  right: 54px;
-  bottom: 12px;
-}
-</style>
+<template>
+  <div>
+    <a-row :gutter="24">
+      <a-col :md="12" :sm="24" :style="{ marginBottom: '24px' }" :xl="6">
+        <x-card :loadState="loadDeviceUsedDaySumState" :retry="getDeviceUsedDaySum">
+          <chart-card :total="usedDays" title="设备累计使用时长" unit="天">
+            <a-tooltip slot="action" :style="{ marginRight: '10px' }" title="刷新" @click="getDeviceUsedDaySum">
+              <a-icon type="redo" />
+            </a-tooltip>
+            <a-tooltip slot="action" title="从安装至今设备使用天数">
+              <a-icon type="info-circle-o" />
+            </a-tooltip>
+            <template slot="footer"><span>{{ format(installDate, 'yyyy-MM-dd') }} 安装</span></template>
+          </chart-card>
+        </x-card>
+      </a-col>
+      <a-col :md="12" :sm="24" :style="{ marginBottom: '24px' }" :xl="6">
+        <x-card :loadState="loadDeviceUploadTimesState" :retry="getDeviceUploadTimesCount">
+          <chart-card :total="uploadTimes | NumberFormat" title="累计上报次数" unit="次">
+            <a-tooltip slot="action" :style="{ marginRight: '10px' }" title="刷新" @click="getDeviceUploadTimesCount">
+              <a-icon type="redo" />
+            </a-tooltip>
+            <a-tooltip slot="action" title="从安装至今累计上报次数">
+              <a-icon type="info-circle-o" />
+            </a-tooltip>
+            <div>
+              <mini-area :dataSource="deviceRecentlyUploadList" :scale="deviceRecentlyUploadScale" />
+            </div>
+            <template slot="footer">近七天共上报 <span>{{ deviceRecentlyUploadSum | NumberFormat }} 次</span></template>
+          </chart-card>
+        </x-card>
+      </a-col>
+      <a-col :md="12" :sm="24" :style="{ marginBottom: '24px' }" :xl="6">
+        <x-card :loadState="loadDeviceLostContactState" :retry="getDeviceLostContactCount">
+          <chart-card :total="lostContactTimes | NumberFormat" title="累计失联次数" unit="次">
+            <a-tooltip slot="action" :style="{ marginRight: '10px' }" title="刷新" @click="getDeviceLostContactCount()">
+              <a-icon type="redo" />
+            </a-tooltip>
+            <a-tooltip slot="action" title="从安装至今累计失联（即3天未上报）次数">
+              <a-icon type="info-circle-o" />
+            </a-tooltip>
+            <div>
+              <mini-bar :dataSource="deviceLostContactList" :scale="deviceLostContactScale" />
+            </div>
+            <template slot="footer">最近失联日期 <span> {{ format(lastLostContactDate, 'yyyy-MM-dd') }}</span></template>
+          </chart-card>
+        </x-card>
+      </a-col>
+      <a-col :md="12" :sm="24" :style="{ marginBottom: '24px' }" :xl="6">
+        <x-card :loadState="deviceInstructRateOfSuccessLoadState" :retry="getInstructRateOfSuccess">
+          <chart-card :total="deviceInstructRateOfSuccessValue" title="指令下发成功率" unit="%">
+            <a-tooltip slot="action" :style="{ marginRight: '10px' }" title="刷新" @click="getInstructRateOfSuccess()">
+              <a-icon type="redo" />
+            </a-tooltip>
+            <a-tooltip slot="action" title="执行成功和已发送状态的指令占所有指令的比例">
+              <a-icon type="info-circle-o" />
+            </a-tooltip>
+            <div>
+              <mini-progress :color="deviceInstructRateOfColor" :percentage="deviceInstructRateOfSuccessValue" :target="90" height="8px" />
+            </div>
+            <template slot="footer">共下发指令 <span> {{ deviceInstructCount | NumberFormat }} 次</span></template>
+          </chart-card>
+        </x-card>
+      </a-col>
+    </a-row>
+
+    <a-card :body-style="{padding: '0'}" :bordered="false" :loading="loading">
+      <div class="salesCard">
+        <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="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="getDeviceUploadCountData">
+                <div id="container" style="padding: 0 0 0 20px;height: 370px" />
+              </x-card>
+            </a-row>
+          </a-tab-pane>
+          <a-tab-pane key="2" tab="失联情况分析">
+            <a-row>
+              <a-col :lg="12" :md="12" :sm="24" :xl="16" :xs="24">
+                <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">
+                <x-card :loadState="lostContactRankLoadState" :retry="getDeviceLostContactCountData">
+                  <rank-list :list="lostContactRank" title="失联天数排行"/>
+                </x-card>
+              </a-col>
+            </a-row>
+          </a-tab-pane>
+        </a-tabs>
+      </div>
+    </a-card>
+
+    <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-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-menu-item>
+                <a-menu-item>
+                  <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="0" :total="0">
+                  <span slot="subtitle">
+                    <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' }" />
+                </div>
+              </a-col>
+              <a-col :sm="12" :style="{ marginBottom: ' 24px'}" :xs="24">
+                <number-info :sub-total="0" :total="0" status="up">
+                  <span slot="subtitle">
+                    <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' }" />
+                </div>
+              </a-col>
+            </a-row>
+            <div class="ant-table-wrapper">
+              <a-table
+                :columns="searchTableColumns"
+                :dataSource="searchData"
+                :pagination="{ pageSize: 5 }"
+                row-key="index"
+                size="small"
+              >
+                <span slot="range" slot-scope="text, record">
+                  <trend :flag="record.status === 0 ? 'up' : 'down'">
+                    {{ text }}%
+                  </trend>
+                </span>
+              </a-table>
+            </div>
+          </a-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="指令类别占比">
+            <div slot="extra" style="height: inherit;">
+              <div class="analysis-salesTypeRadio">
+                <a-radio-group defaultValue="a">
+                  <a-radio-button value="a">本日</a-radio-button>
+                  <a-radio-button value="b">本周</a-radio-button>
+                  <a-radio-button value="c">本月</a-radio-button>
+                </a-radio-group>
+              </div>
+            </div>
+            <h4></h4>
+            <div>
+              <!-- style="width: calc(100% - 240px);" -->
+              <div>
+                <v-chart :data="pieData" :force-fit="true" :height="405" :scale="pieScale">
+                  <v-tooltip :showTitle="false" dataKey="item*percent" />
+                  <v-axis />
+                  <!-- position="right" :offsetX="-140" -->
+                  <v-legend dataKey="item"/>
+                  <v-pie :vStyle="pieStyle" color="item" position="percent" />
+                  <v-coord :innerRadius="0.6" :radius="0.75" type="theta" />
+                </v-chart>
+              </div>
+            </div>
+          </a-card>
+        </a-col>
+      </a-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import {
+  ChartCard,
+  MiniArea,
+  MiniBar,
+  MiniProgress,
+  RankList,
+  Bar,
+  Trend,
+  NumberInfo,
+  MiniSmoothArea
+} from '@vue2-client/components'
+import { formatDate } from '@vue2-client/utils/util'
+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 searchUserData = []
+for (let i = 0; i < 7; i++) {
+  searchUserData.push({
+    x: moment().add(i, 'days').format('YYYY-MM-DD'),
+    y: Math.ceil(Math.random() * 10)
+  })
+}
+const searchUserScale = [
+  {
+    dataKey: 'x',
+    alias: '时间'
+  },
+  {
+    dataKey: 'y',
+    alias: '发生次数',
+    min: 0,
+    max: 10
+  }]
+
+const searchTableColumns = [
+  {
+    dataIndex: 'index',
+    title: '异常类型',
+    width: 90
+  },
+  {
+    dataIndex: 'keyword',
+    title: '异常说明'
+  },
+  {
+    dataIndex: 'count',
+    title: '发生时间'
+  },
+  {
+    dataIndex: 'range',
+    title: '是否处理',
+    align: 'right'
+  }
+]
+
+const searchData = []
+
+const DataSet = require('@antv/data-set')
+
+const sourceData = [
+  { item: '远程开户', count: 32.2 },
+  { item: '远程充值', count: 21 },
+  { item: '阀门控制', count: 17 },
+  { item: '远程调价', count: 13 },
+  { item: '设置参数', count: 9 },
+  { item: '远程注销', count: 7.8 }
+]
+
+const pieScale = [{
+  dataKey: 'percent',
+  min: 0,
+  formatter: '.0%'
+}]
+
+const dv = new DataSet.View().source(sourceData)
+dv.transform({
+  type: 'percent',
+  field: 'count',
+  dimension: 'item',
+  as: 'percent'
+})
+const pieData = dv.rows
+
+export default {
+  name: 'DeviceDetailsCount',
+  components: {
+    ChartCard,
+    MiniArea,
+    MiniBar,
+    MiniProgress,
+    RankList,
+    Bar,
+    Trend,
+    NumberInfo,
+    MiniSmoothArea
+  },
+  data () {
+    return {
+      // 页面宽度
+      screenWidth: document.documentElement.clientWidth,
+      // 客户名称
+      customerName: '',
+      // >> 设备累计使用时长统计
+      //  设备近七天上报情况
+      deviceRecentlyUploadList: [],
+      //  设备累计使用天数
+      usedDays: 0,
+      //  设备安装时间
+      installDate: '',
+      //  设备累计使用天数加载状态
+      loadDeviceUsedDaySumState: 'loading',
+      // >> 设备累计上报次数统计
+      //  设备累计上报次数
+      uploadTimes: 0,
+      //  设备近七天上报总次数
+      deviceRecentlyUploadSum: 0,
+      //  设备近七天上报情况明细列
+      deviceRecentlyUploadScale: [{ dataKey: 'x', alias: '时间' }, { dataKey: 'y', alias: '次数' }],
+      //  设备累计上报次数加载状态
+      loadDeviceUploadTimesState: 'loading',
+      // >> 设备累计失联次数统计
+      //  设备近三个月失联情况
+      deviceLostContactList: [],
+      //  设备累计失联次数
+      lostContactTimes: 0,
+      //  设备最近失联日期
+      lastLostContactDate: undefined,
+      //  设备近七天失联情况明细列
+      deviceLostContactScale: [{ dataKey: 'x', alias: '时间' }, { dataKey: 'y', alias: '失联天数' }],
+      //  设备累计失联次数加载状态
+      loadDeviceLostContactState: 'loading',
+      // >> 设备指令下发成功率统计
+      //  设备指令成功率
+      deviceInstructRateOfSuccessValue: 0,
+      //  设备指令总数
+      deviceInstructCount: 0,
+      //  指令成功率进度色
+      deviceInstructRateOfColor: 'rgb(19, 194, 194)',
+      // 设备指令下发成功率加载状态
+      deviceInstructRateOfSuccessLoadState: 'loading',
+
+      // 是否刷新加载中
+      loading: false,
+      // 统计模式
+      countMode: 'now',
+      // 统计类型
+      tabActiveKey: '1',
+      // >> 设备上报情况统计
+      // 上报统计图表
+      uploadCountPlot: undefined,
+      // 抄表情况分析Loading
+      radarLoadState: 'loading',
+      // >> 设备失联情况统计
+      // 失联统计图表
+      lostContactCountPlot: undefined,
+      // 失联情况分析Loading
+      lostContactLoadState: 'loading',
+      // 失联天数排行榜
+      lostContactRank: [],
+      // 失联天数排行榜Loading
+      lostContactRankLoadState: 'loading',
+
+      // 搜索用户数
+      searchUserData,
+      searchUserScale,
+      searchTableColumns,
+      searchData,
+
+      //
+      pieScale,
+      pieData,
+      sourceData,
+      pieStyle: {
+        stroke: '#fff',
+        lineWidth: 1
+      }
+    }
+  },
+  props: {
+    deviceId: {
+      type: Number,
+      required: true
+    }
+  },
+  mounted () {
+    this.getDeviceUsedDaySum()
+    this.getDeviceUploadTimesCount()
+    this.getDeviceLostContactCount()
+    this.getInstructRateOfSuccess()
+    this.getDeviceUploadCountData()
+  },
+  computed: {
+    ...mapState('setting', ['isMobile'])
+  },
+  methods: {
+    /**
+     * 获取设备使用天数
+     */
+    getDeviceUsedDaySum () {
+      this.loadDeviceUsedDaySumState = 'loading'
+      post(DeviceDetailsCountApi.getDeviceUsedDaySum, {
+        deviceId: this.deviceId
+      }).then(res => {
+        this.usedDays = res.value
+        this.installDate = res.installDate
+        this.loadDeviceUsedDaySumState = 'success'
+      }, err => {
+        console.warn(err)
+        this.loadDeviceUsedDaySumState = 'error'
+      })
+    },
+    /**
+     * 获取设备累计上报次数和近七天上报情况
+     */
+    getDeviceUploadTimesCount () {
+      this.loadDeviceUploadTimesState = 'loading'
+      this.deviceRecentlyUploadSum = 0
+      post(DeviceDetailsCountApi.getDeviceUploadTimesCount, {
+        deviceId: this.deviceId
+      }).then(res => {
+        this.uploadTimes = res.value
+        this.deviceRecentlyUploadList = res.recentlyUpload
+        for (const item of this.deviceRecentlyUploadList) {
+          this.deviceRecentlyUploadSum += item.y
+        }
+        this.loadDeviceUploadTimesState = 'success'
+      }, err => {
+        console.warn(err)
+        this.loadDeviceUploadTimesState = 'error'
+      })
+    },
+    /**
+     * 获取设备累计失联次数和近三个月失联情况
+     */
+    getDeviceLostContactCount () {
+      this.loadDeviceLostContactState = 'loading'
+      return post(DeviceDetailsCountApi.getDeviceLostContactCount, {
+        deviceId: this.deviceId
+      }).then(res => {
+        this.lostContactTimes = res.value
+        this.lastLostContactDate = res.lastLostContactDate
+        this.deviceLostContactList = res.lostContactList
+        this.loadDeviceLostContactState = 'success'
+      }, err => {
+        console.warn(err)
+        this.loadDeviceLostContactState = 'error'
+      })
+    },
+    /**
+     * 获取设备指令下发成功率
+     */
+    getInstructRateOfSuccess () {
+      this.deviceInstructRateOfSuccessLoadState = 'loading'
+      post(DeviceDetailsCountApi.getInstructRateOfSuccess, {
+        deviceId: this.deviceId
+      }).then(res => {
+        this.deviceInstructRateOfSuccessValue = res.deviceInstructRateOfSuccessValue * 1.0
+        if (this.deviceInstructRateOfSuccessValue < 70.0) {
+          this.deviceInstructRateOfColor = 'rgb(242, 99, 123)'
+        } else if (this.deviceInstructRateOfSuccessValue < 90.0) {
+          this.deviceInstructRateOfColor = 'rgb(251, 212, 55)'
+        } else {
+          this.deviceInstructRateOfColor = 'rgb(19, 194, 194)'
+        }
+        this.deviceInstructCount = res.value
+        this.deviceInstructRateOfSuccessLoadState = 'success'
+      }, err => {
+        console.warn(err)
+        this.deviceInstructRateOfSuccessLoadState = 'error'
+      })
+    },
+    /**
+     * 格式化日期
+     * @param date 日期字符串
+     * @param format 格式化方式
+     * @returns {string|*} 格式化结果
+     */
+    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()
+      }
+    },
+    /**
+     * 获取设备上报情况
+     */
+    getDeviceUploadCountData () {
+      this.radarLoadState = 'loading'
+      fetch(DeviceDetailsCountApi.getDeviceUploadCountData, {
+        method: 'POST',
+        body: JSON.stringify({
+          deviceId: this.deviceId,
+          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.update(plotOption)
+          } else {
+            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: '失联日期',
+              yField: '失联天数',
+              xAxis: {
+                label: {
+                  autoRotate: false,
+                },
+              },
+              slider: {
+                start: 0,
+                end: 1
+              }
+            })
+            this.lostContactCountPlot.render()
+          }
+          this.lostContactLoadState = 'success'
+        })
+        .catch((ex) => {
+          console.error(ex)
+          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'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+.text {
+  color: rgba(0, 0, 0, .45);
+}
+
+.heading {
+  color: rgba(0, 0, 0, .85);
+  font-size: 20px;
+}
+
+.extra-wrapper {
+  line-height: 55px;
+  padding-right: 24px;
+
+  .extra-item {
+    display: inline-block;
+    margin-right: 24px;
+
+    a {
+      margin-left: 24px;
+    }
+  }
+}
+
+.antd-pro-pages-dashboard-analysis-twoColLayout {
+  position: relative;
+  display: flex;
+  display: block;
+  flex-flow: row wrap;
+}
+
+.antd-pro-pages-dashboard-analysis-salesCard {
+  height: calc(100% - 24px);
+  /deep/ .ant-card-head {
+    position: relative;
+  }
+}
+
+.dashboard-analysis-iconGroup {
+  i {
+    margin-left: 16px;
+    color: rgba(0,0,0,.45);
+    cursor: pointer;
+    transition: color .32s;
+    color: black;
+  }
+}
+.analysis-salesTypeRadio {
+  position: absolute;
+  right: 54px;
+  bottom: 12px;
+}
+</style>