vue2-client 1.2.109 → 1.2.112

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

@@ -1,960 +1,960 @@
-<template>
-  <a-page-header title="物联网运行维护">
-    <div>
-      <a-row :gutter="24">
-        <a-col :md="12" :sm="24" :style="{ marginBottom: '24px' }" :xl="6">
-          <x-card :loadState="instructSumLoadState" :retry="loadInstructSumCount">
-            <chart-card :total="instructSum | NumberFormat" title="总指令数">
-              <a-tooltip slot="action" :style="{ marginRight: '10px' }" title="刷新" @click="loadInstructSumCount()">
-                <a-icon type="redo"/>
-              </a-tooltip>
-              <a-tooltip slot="action" title="生成的所有指令总数">
-                <a-icon type="info-circle-o"/>
-              </a-tooltip>
-              <div>
-                <trend :flag="instructYoW >= 0 ? 'up' : 'down'" style="margin-right: 16px;">
-                  <span slot="term">同周比</span>
-                  {{ instructYoW + '%' }}
-                </trend>
-                <trend :flag="instructYoD >= 0 ? 'up' : 'down'">
-                  <span slot="term">日同比</span>
-                  {{ instructYoD + '%' }}
-                </trend>
-              </div>
-              <template slot="footer">昨日新增 <span>{{ instructYesAdd | NumberFormat }}</span></template>
-            </chart-card>
-          </x-card>
-        </a-col>
-        <a-col :md="12" :sm="24" :style="{ marginBottom: '24px' }" :xl="6">
-          <x-card :loadState="metereadSumLoadState" :retry="loadMetereadSumCount">
-            <chart-card :total="metereadSum | NumberFormat" title="总抄表量">
-              <a-tooltip slot="action" :style="{ marginRight: '10px' }" title="刷新" @click="loadMetereadSumCount()">
-                <a-icon type="redo"/>
-              </a-tooltip>
-              <a-tooltip slot="action" title="生成的所有抄表(meteread)总数">
-                <a-icon type="info-circle-o"/>
-              </a-tooltip>
-              <div>
-                <mini-area :dataSource="metereadSumDataByWeek" :scale="metereadSumByWeekScale"/>
-              </div>
-              <template slot="footer">昨日新增 <span> {{ metereadYesAdd | NumberFormat }}</span></template>
-            </chart-card>
-          </x-card>
-        </a-col>
-        <a-col :md="12" :sm="24" :style="{ marginBottom: '24px' }" :xl="6">
-          <x-card :loadState="usingMeterSumLoadState" :retry="loadUsingMeterSumCount">
-            <chart-card :total="usingMeterSum | NumberFormat" title="在用表具数">
-              <a-tooltip slot="action" :style="{ marginRight: '10px' }" title="刷新" @click="loadUsingMeterSumCount()">
-                <a-icon type="redo"/>
-              </a-tooltip>
-              <a-tooltip slot="action" title="开户成功的物联网表总数">
-                <a-icon type="info-circle-o"/>
-              </a-tooltip>
-              <div>
-                <mini-bar :dataSource="usingMeterSumDataByWeek" :scale="usingMeterSumByWeekScale"/>
-              </div>
-              <template slot="footer">昨日新增 <span>{{ usingMeterYesAdd | NumberFormat }}</span></template>
-            </chart-card>
-          </x-card>
-        </a-col>
-        <a-col :md="12" :sm="24" :style="{ marginBottom: '24px' }" :xl="6">
-          <x-card :loadState="instructRateOfSuccessLoadState" :retry="loadInstructRateOfSuccess">
-            <chart-card :total="instructRateOfSuccessValue + '%'" title="指令下发成功率">
-              <a-tooltip slot="action" :style="{ marginRight: '10px' }" title="刷新" @click="loadInstructRateOfSuccess()">
-                <a-icon type="redo"/>
-              </a-tooltip>
-              <a-tooltip slot="action" title="执行成功和已发送状态的指令占所有指令的比例">
-                <a-icon type="info-circle-o"/>
-              </a-tooltip>
-              <div>
-                <mini-progress
-                  :color="instructRateOfColor"
-                  :percentage="instructRateOfSuccessValue"
-                  :target="90"
-                  height="8px"/>
-              </div>
-              <template slot="footer">
-                <trend :flag="instructRateOfSuccessYoW >= 0 ? 'up' : 'down'" style="margin-right: 16px;">
-                  <span slot="term">同周比</span>
-                  {{ instructRateOfSuccessYoW + '%' }}
-                </trend>
-                <trend :flag="instructRateOfSuccessYoD >= 0 ? 'up' : 'down'" style="margin-right: 16px;">
-                  <span slot="term">日同比</span>
-                  {{ instructRateOfSuccessYoD + '%' }}
-                </trend>
-                <span slot="term">昨日成功率</span>
-                {{ yesterdayInstructRateOf + '%' }}
-              </template>
-            </chart-card>
-          </x-card>
-        </a-col>
-      </a-row>
-
-      <a-card :body-style="{padding: '0'}" :bordered="false">
-        <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="getHandPlanCountByMeterBrand">
-                  <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">
-                  <bar :data="barData2" title="销售额趋势"/>
-                </a-col>
-                <a-col :lg="12" :md="12" :sm="24" :xl="8" :xs="24">
-                  <rank-list :list="rankList" title="门店销售排行榜"/>
-                </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">
-            <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"/>
-                </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
-                    :status="useGasSubValue.status"
-                    :sub-total="useGasSubValue.subValue"
-                    :total="todayUseGasTotalValue">
-                    <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="useGasWeekData"
-                      :scale="useGasWeekDataScale"
-                      :style="{ height: '45px' }"/>
-                  </div>
-                </a-col>
-                <a-col :sm="12" :style="{ marginBottom: ' 24px'}" :xs="24">
-                  <number-info
-                    :status="handPlanUserSubValue.status"
-                    :sub-total="handPlanUserSubValue.subValue"
-                    :total="todayHandPlanUserCount">
-                    <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="handPlanUserData"
-                      :scale="handPlanUserDataScale"
-                      :style="{ height: '45px' }"/>
-                  </div>
-                </a-col>
-              </a-row>
-              <div class="ant-table-wrapper">
-                <a-table
-                  :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
-                  :columns="searchTableColumns"
-                  :dataSource="gasConsumptionRanking"
-                  :pagination="{ pageSize: 5 }"
-                  row-key="f_userinfo_id"
-                  size="small"
-                >
-                  <span slot="range" slot-scope="text, record">
-                    <trend :flag="record.status === 0 ? 'up' : 'down'">
-                      {{ text }}%
-                    </trend>
-                  </span>
-                </a-table>
-              </div>
-            </x-card>
-          </a-col>
-          <a-col
-            :lg="24"
-            :md="24"
-            :sm="24"
-            :xl="12"
-            :xs="24"
-            style="background-color:#fff">
-            <a-tabs
-              :activeKey="PieActiveKey"
-              tab-position="top"
-              :default-active-key="PieActiveKey"
-              :forceRender="true"
-              @change="handlePieTabChange">
-              <div slot="tabBarExtraContent" class="extra-wrapper">
-                <div class="extra-item">
-                  <a-radio-group v-model="countPieMode" button-style="solid" @change="loadPieMode">
-                    <a-radio-button value="now">本日</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>
-              </div>
-              <a-tab-pane key="properties" tab="用气量用气性质占比">
-                <x-card :loadState="radarLoadState_gasproperties" :retry="loadPieMode">
-                  <div id="container_gasproperties"></div>
-                </x-card>
-              </a-tab-pane>
-              <a-tab-pane key="gasinuser" tab="用户用气量占比" :disabled="selectedRowKeys.length === 0 ">
-                <x-card :loadState="radarLoadState_gasInUser" :retry="loadGasInUser">
-                  <div id="container_gasInUser"></div>
-                </x-card>
-              </a-tab-pane>
-            </a-tabs>
-          </a-col>
-        </a-row>
-      </div>
-    </div>
-  </a-page-header>
-</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, Pie, measureTextWidth } from '@antv/g2plot'
-import { mapState } from 'vuex'
-import { WebmeterAnalysisViewApi, post } from '@vue2-client/services/api'
-
-function renderStatistic (containerWidth, text, style) {
-  const { width: textWidth, height: textHeight } = measureTextWidth(text, style)
-  const R = containerWidth / 2
-  // r^2 = (w / 2)^2 + (h - offsetY)^2
-  let scale = 1
-  if (containerWidth < textWidth) {
-    scale = Math.min(Math.sqrt(Math.abs(Math.pow(R, 2) / (Math.pow(textWidth / 2, 2) + Math.pow(textHeight, 2)))), 1)
-  }
-  const textStyleStr = `width:${containerWidth}px;`
-  return `<div style="${textStyleStr};font-size:${scale}em;line-height:${scale < 1 ? 1 : 'inherit'};">${text}</div>`
-}
-
-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({
-    x: moment().add(i, 'days').format('YYYY-MM-DD'),
-    y: Math.ceil(Math.random() * 10)
-  })
-}
-
-const searchTableColumns = [
-  {
-    dataIndex: 'f_userinfo_id',
-    title: '用户编号',
-    width: 90
-  },
-  {
-    dataIndex: 'f_user_name',
-    title: '用户姓名'
-  },
-  {
-    dataIndex: 'count',
-    title: '用气量'
-  },
-  {
-    dataIndex: 'range',
-    title: '周涨幅',
-    align: 'right',
-    sorter: (a, b) => a.range - b.range,
-    scopedSlots: { customRender: 'range' }
-  }
-]
-
-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++
-}
-
-export default {
-  name: 'WebmeterAnalysisView',
-  components: {
-    ChartCard,
-    MiniArea,
-    MiniBar,
-    MiniProgress,
-    RankList,
-    Bar,
-    Trend,
-    NumberInfo,
-    MiniSmoothArea
-  },
-  data () {
-    return {
-      // 页面宽度
-      screenWidth: document.documentElement.clientWidth,
-      // 客户名称
-      customerName: '',
-      // >> 指令总数统计
-      // 指令数统计Loading
-      instructSumLoadState: 'loading',
-      //  总指令数
-      instructSum: 0,
-      //  同周比
-      instructYoW: 0,
-      //  日同比
-      instructYoD: 0,
-      //  昨日新增指令数
-      instructYesAdd: 0,
-      // >> 抄表量统计
-      // 抄表量统计Loading
-      metereadSumLoadState: 'loading',
-      //  总抄表量
-      metereadSum: 0,
-      //  昨日新增抄表量
-      metereadYesAdd: 0,
-      //  近一周抄表量明细
-      metereadSumDataByWeek: [],
-      //  近一周抄表量明细列
-      metereadSumByWeekScale: [
-        {
-          dataKey: 'x',
-          alias: '时间'
-        },
-        {
-          dataKey: 'y',
-          alias: '抄表量'
-        }
-      ],
-      // >> 在用表具数统计
-      // 在用表具统计Loading
-      usingMeterSumLoadState: 'loading',
-      //  在用表具总量
-      usingMeterSum: 0,
-      //  昨日新增在用表具量
-      usingMeterYesAdd: 0,
-      //  近一周新增在用表具明细
-      usingMeterSumDataByWeek: [],
-      //  近一周新增在用表具明细列
-      usingMeterSumByWeekScale: [
-        {
-          dataKey: 'x',
-          alias: '时间'
-        },
-        {
-          dataKey: 'y',
-          alias: '开户数'
-        }
-      ],
-      // >> 表具指令下发成功率统计
-      //  表具指令成功率
-      instructRateOfSuccessValue: 0,
-      //  昨日指令成功率
-      yesterdayInstructRateOf: 0,
-      //  同周比
-      instructRateOfSuccessYoW: 0,
-      //  日同比
-      instructRateOfSuccessYoD: 0,
-      //  指令成功率进度色
-      instructRateOfColor: 'rgb(19, 194, 194)',
-      // 表具指令下发成功率加载状态
-      instructRateOfSuccessLoadState: 'loading',
-
-      // 统计模式
-      countMode: 'now',
-      // 圆饼图
-      countPieMode: 'now',
-      // 统计类型
-      tabActiveKey: '1',
-      // 统计类型
-      PieActiveKey: 'properties',
-      // >> 表具上报情况统计
-      // 上报统计图表
-      uploadCountPlot: undefined,
-      // 用气性质分析报表
-      gasPropertiesPlot: undefined,
-      // 用户用气占比
-      gasInUserPlot: undefined,
-      // 抄表情况分析Loading
-      radarLoadState: 'loading',
-      // 用气性质统计分析Loading
-      radarLoadState_gasproperties: 'loading',
-      // 用户在用气量中占比
-      radarLoadState_gasInUser: '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,
-      searchTableColumns,
-      searchData,
-      barData,
-      barData2,
-      // 左下列表选择框
-      selectedRowKeys: [],
-    }
-  },
-  mounted () {
-    // 加载指令数统计
-    this.loadInstructSumCount()
-    // 加载抄表量统计
-    this.loadMetereadSumCount()
-    // 加载在用表具量统计
-    this.loadUsingMeterSumCount()
-    // 加载指令成功率统计
-    this.loadInstructRateOfSuccess()
-    // 加载各表厂表具上报情况统计
-    this.getHandPlanCountByMeterBrand()
-    // 加载用气量统计
-    this.loadUseGasData()
-    // 加载按用气性质统计用气量
-    this.loadGasByGasProperties()
-  },
-  computed: {
-    ...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: {
-    onSelectChange (selectedRowKeys) {
-      this.selectedRowKeys = selectedRowKeys
-      if (selectedRowKeys.length > 0) {
-        if (this.PieActiveKey === 'properties') {
-          this.PieActiveKey = 'gasinuser'
-        }
-        this.loadGasInUser()
-      } else {
-        this.PieActiveKey = 'properties'
-        this.loadGasByGasProperties()
-      }
-    },
-    loadPieMode () {
-      if (this.PieActiveKey === 'properties') {
-        this.loadGasByGasProperties()
-      } else {
-        this.loadGasInUser()
-      }
-    },
-    // 加载按用气性质统计用气量
-    loadGasByGasProperties () {
-      this.radarLoadState_gasproperties = 'loading'
-      fetch(WebmeterAnalysisViewApi.GasByGasProperties, {
-        method: 'POST',
-        body: JSON.stringify({
-          type: this.countPieMode
-        })
-      }).then((res) => res.json())
-        .then((data) => {
-          const piePlot = {
-            appendPadding: 10,
-            data,
-            angleField: 'value',
-            colorField: 'type',
-            radius: 1,
-            innerRadius: 0.64,
-            meta: {
-              value: {
-                formatter: (v) => `${v} m³`,
-              },
-            },
-            label: {
-              type: 'inner',
-              offset: '-50%',
-              style: {
-                textAlign: 'center',
-              },
-              autoRotate: false,
-              content: '{value}',
-            },
-            statistic: {
-              title: {
-                offsetY: -4,
-                customHtml: (container, view, datum) => {
-                  const { width, height } = container.getBoundingClientRect()
-                  const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2))
-                  const text = datum ? datum.type : '总计'
-                  return renderStatistic(d, text, { fontSize: 28 })
-                },
-              },
-              content: {
-                offsetY: 4,
-                style: {
-                  fontSize: '32px',
-                },
-                customHtml: (container, view, datum, data) => {
-                  const { width } = container.getBoundingClientRect()
-                  const text = datum ? `${datum.value}m³` : `${data.reduce((r, d) => r + d.value, 0)}m³`
-                  return renderStatistic(width, text, { fontSize: 32 })
-                },
-              },
-            },
-            // 添加 中心统计文本 交互
-            interactions: [{ type: 'element-selected' }, { type: 'element-active' }, { type: 'pie-statistic-active' }],
-          }
-          if (this.gasPropertiesPlot) {
-            this.gasPropertiesPlot.update(piePlot)
-          } else {
-            this.gasPropertiesPlot = new Pie('container_gasproperties', piePlot)
-            this.gasPropertiesPlot.render()
-          }
-          this.radarLoadState_gasproperties = 'success'
-        })
-        .catch((ex) => {
-          console.error(ex)
-          this.radarLoadState_gasproperties = 'error'
-        })
-    },
-    // 加载按用气性质统计用气量
-    loadGasInUser () {
-      this.radarLoadState_gasInUser = 'loading'
-      fetch(WebmeterAnalysisViewApi.GasInUser, {
-        method: 'POST',
-        body: JSON.stringify({
-          type: this.countPieMode,
-          ids: this.selectedRowKeys.join(',')
-        })
-      }).then((res) => res.json())
-        .then((data) => {
-          const piePlot = {
-            appendPadding: 10,
-            data,
-            angleField: 'value',
-            colorField: 'name',
-            radius: 1,
-            innerRadius: 0.64,
-            meta: {
-              value: {
-                formatter: (v) => `${v} m³`,
-              },
-            },
-            label: {
-              type: 'inner',
-              offset: '-50%',
-              style: {
-                textAlign: 'center',
-              },
-              autoRotate: false,
-              content: '{value}',
-            },
-            statistic: {
-              title: {
-                offsetY: -4,
-                customHtml: (container, view, datum) => {
-                  const { width, height } = container.getBoundingClientRect()
-                  const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2))
-                  const text = datum ? datum.name : '总计'
-                  return renderStatistic(d, text, { fontSize: 24 })
-                },
-              },
-              content: {
-                offsetY: 4,
-                style: {
-                  fontSize: '32px',
-                },
-                customHtml: (container, view, datum, data) => {
-                  const { width } = container.getBoundingClientRect()
-                  const text = datum ? `${datum.value}m³` : `${data.reduce((r, d) => r + d.value, 0)}m³`
-                  return renderStatistic(width, text, { fontSize: 32 })
-                },
-              },
-            },
-            // 添加 中心统计文本 交互
-            interactions: [{ type: 'element-selected' }, { type: 'element-active' }, { type: 'pie-statistic-active' }],
-          }
-          if (this.gasInUserPlot) {
-            this.gasInUserPlot.update(piePlot)
-          } else {
-            this.gasInUserPlot = new Pie('container_gasInUser', piePlot)
-            this.gasInUserPlot.render()
-          }
-          this.radarLoadState_gasInUser = 'success'
-        })
-        .catch((ex) => {
-          console.error(ex)
-          this.radarLoadState_gasInUser = 'error'
-        })
-    },
-    /**
-     * 加载指令总数统计
-     */
-    loadInstructSumCount () {
-      this.instructSumLoadState = 'loading'
-      post(WebmeterAnalysisViewApi.instructSumCount, {}).then(res => {
-        this.instructSum = res.instructSum
-        this.instructYoW = res.instructYoW
-        this.instructYoD = res.instructYoD
-        this.instructYesAdd = res.instructYesAdd
-        this.instructSumLoadState = 'success'
-      }, err => {
-        console.warn(err)
-        this.instructSumLoadState = 'error'
-      })
-    },
-    /**
-     * 加载抄表总数统计
-     */
-    loadMetereadSumCount () {
-      this.metereadSumDataByWeek = []
-      this.metereadSumLoadState = 'loading'
-      post(WebmeterAnalysisViewApi.meteReadSumCount, {}).then(res => {
-        // 加载近一周抄表数图表
-        post(WebmeterAnalysisViewApi.meteReadDataByWeek, {}).then(res => {
-          for (let i = 0, len = res.length; i < len; i++) {
-            this.metereadSumDataByWeek.push({
-              x: res[i].date,
-              y: res[i].num
-            })
-          }
-        })
-        this.metereadSum = res.metereadSum
-        this.metereadYesAdd = res.metereadYesAdd
-        this.metereadSumLoadState = 'success'
-      }, err => {
-        console.warn(err)
-        this.metereadSumLoadState = 'error'
-      })
-    },
-    /**
-     * 加载在用表具总数情况
-     */
-    loadUsingMeterSumCount () {
-      this.usingMeterSumDataByWeek = []
-      this.usingMeterSumLoadState = 'loading'
-      return post(WebmeterAnalysisViewApi.usingMeterSumCount, {}).then(res => {
-        // 加载近一周开户数图表
-        post(WebmeterAnalysisViewApi.usingMeterDataByWeek, {}).then(res => {
-          for (let i = 0, len = res.length; i < len; i++) {
-            this.usingMeterSumDataByWeek.push({
-              x: res[i].date,
-              y: res[i].num
-            })
-          }
-        })
-        this.usingMeterSum = res.usingMeterSum
-        this.usingMeterYesAdd = res.usingMeterYesAdd
-        this.usingMeterSumLoadState = 'success'
-      }, err => {
-        console.warn(err)
-        this.usingMeterSumLoadState = 'error'
-      })
-    },
-    /**
-     * 加载表具指令下发成功率
-     */
-    loadInstructRateOfSuccess () {
-      this.instructRateOfSuccessLoadState = 'loading'
-      post(WebmeterAnalysisViewApi.instructRateOfSuccess, {}).then(res => {
-        this.instructRateOfSuccessValue = res.instructRateOfSuccessValue * 1.0
-        if (this.instructRateOfSuccessValue < 70.0) {
-          this.instructRateOfColor = 'rgb(242, 99, 123)'
-        } else if (this.instructRateOfSuccessValue < 90.0) {
-          this.instructRateOfColor = 'rgb(251, 212, 55)'
-        } else {
-          this.instructRateOfColor = 'rgb(19, 194, 194)'
-        }
-        this.instructRateOfSuccessYoW = res.instructRateOfSuccessYoW
-        this.instructRateOfSuccessYoD = res.instructRateOfSuccessYoD
-        this.yesterdayInstructRateOf = res.yesterdayInstructRateOf
-        this.instructRateOfSuccessLoadState = 'success'
-      }, err => {
-        console.warn(err)
-        this.instructRateOfSuccessLoadState = '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()
-    },
-    /**
-     * 右下圆饼图切换
-     */
-    handlePieTabChange (key) {
-      this.PieActiveKey = key + ''
-      this.loadPieMode()
-      // this.updateDataByKey()
-    },
-    /**
-     * 根据模式更新数据
-     */
-    updateDataByKey () {
-      if (this.tabActiveKey === '1') {
-        this.getHandPlanCountByMeterBrand()
-      } else {
-        // this.getDeviceLostContactCountData()
-        // this.getDeviceLostContactRankData()
-      }
-    },
-    /**
-     * 获取各表厂表具上报情况
-     */
-    getHandPlanCountByMeterBrand () {
-      this.radarLoadState = 'loading'
-      fetch(WebmeterAnalysisViewApi.handMeterSumCountData, {
-        method: 'POST',
-        body: JSON.stringify({
-          type: this.countMode
-        })
-      }).then((res) => res.json())
-        .then((data) => {
-          const plotOption = {
-            data,
-            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 (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'
-        })
-    },
-    /**
-     * 获取用气请求排行
-     */
-    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'
-      })
-    }
-  }
-}
-</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>
+  <a-page-header title="物联网运行维护">
+    <div>
+      <a-row :gutter="24">
+        <a-col :md="12" :sm="24" :style="{ marginBottom: '24px' }" :xl="6">
+          <x-card :loadState="instructSumLoadState" :retry="loadInstructSumCount">
+            <chart-card :total="instructSum | NumberFormat" title="总指令数">
+              <a-tooltip slot="action" :style="{ marginRight: '10px' }" title="刷新" @click="loadInstructSumCount()">
+                <a-icon type="redo"/>
+              </a-tooltip>
+              <a-tooltip slot="action" title="生成的所有指令总数">
+                <a-icon type="info-circle-o"/>
+              </a-tooltip>
+              <div>
+                <trend :flag="instructYoW >= 0 ? 'up' : 'down'" style="margin-right: 16px;">
+                  <span slot="term">同周比</span>
+                  {{ instructYoW + '%' }}
+                </trend>
+                <trend :flag="instructYoD >= 0 ? 'up' : 'down'">
+                  <span slot="term">日同比</span>
+                  {{ instructYoD + '%' }}
+                </trend>
+              </div>
+              <template slot="footer">昨日新增 <span>{{ instructYesAdd | NumberFormat }}</span></template>
+            </chart-card>
+          </x-card>
+        </a-col>
+        <a-col :md="12" :sm="24" :style="{ marginBottom: '24px' }" :xl="6">
+          <x-card :loadState="metereadSumLoadState" :retry="loadMetereadSumCount">
+            <chart-card :total="metereadSum | NumberFormat" title="总抄表量">
+              <a-tooltip slot="action" :style="{ marginRight: '10px' }" title="刷新" @click="loadMetereadSumCount()">
+                <a-icon type="redo"/>
+              </a-tooltip>
+              <a-tooltip slot="action" title="生成的所有抄表(meteread)总数">
+                <a-icon type="info-circle-o"/>
+              </a-tooltip>
+              <div>
+                <mini-area :dataSource="metereadSumDataByWeek" :scale="metereadSumByWeekScale"/>
+              </div>
+              <template slot="footer">昨日新增 <span> {{ metereadYesAdd | NumberFormat }}</span></template>
+            </chart-card>
+          </x-card>
+        </a-col>
+        <a-col :md="12" :sm="24" :style="{ marginBottom: '24px' }" :xl="6">
+          <x-card :loadState="usingMeterSumLoadState" :retry="loadUsingMeterSumCount">
+            <chart-card :total="usingMeterSum | NumberFormat" title="在用表具数">
+              <a-tooltip slot="action" :style="{ marginRight: '10px' }" title="刷新" @click="loadUsingMeterSumCount()">
+                <a-icon type="redo"/>
+              </a-tooltip>
+              <a-tooltip slot="action" title="开户成功的物联网表总数">
+                <a-icon type="info-circle-o"/>
+              </a-tooltip>
+              <div>
+                <mini-bar :dataSource="usingMeterSumDataByWeek" :scale="usingMeterSumByWeekScale"/>
+              </div>
+              <template slot="footer">昨日新增 <span>{{ usingMeterYesAdd | NumberFormat }}</span></template>
+            </chart-card>
+          </x-card>
+        </a-col>
+        <a-col :md="12" :sm="24" :style="{ marginBottom: '24px' }" :xl="6">
+          <x-card :loadState="instructRateOfSuccessLoadState" :retry="loadInstructRateOfSuccess">
+            <chart-card :total="instructRateOfSuccessValue + '%'" title="指令下发成功率">
+              <a-tooltip slot="action" :style="{ marginRight: '10px' }" title="刷新" @click="loadInstructRateOfSuccess()">
+                <a-icon type="redo"/>
+              </a-tooltip>
+              <a-tooltip slot="action" title="执行成功和已发送状态的指令占所有指令的比例">
+                <a-icon type="info-circle-o"/>
+              </a-tooltip>
+              <div>
+                <mini-progress
+                  :color="instructRateOfColor"
+                  :percentage="instructRateOfSuccessValue"
+                  :target="90"
+                  height="8px"/>
+              </div>
+              <template slot="footer">
+                <trend :flag="instructRateOfSuccessYoW >= 0 ? 'up' : 'down'" style="margin-right: 16px;">
+                  <span slot="term">同周比</span>
+                  {{ instructRateOfSuccessYoW + '%' }}
+                </trend>
+                <trend :flag="instructRateOfSuccessYoD >= 0 ? 'up' : 'down'" style="margin-right: 16px;">
+                  <span slot="term">日同比</span>
+                  {{ instructRateOfSuccessYoD + '%' }}
+                </trend>
+                <span slot="term">昨日成功率</span>
+                {{ yesterdayInstructRateOf + '%' }}
+              </template>
+            </chart-card>
+          </x-card>
+        </a-col>
+      </a-row>
+
+      <a-card :body-style="{padding: '0'}" :bordered="false">
+        <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="getHandPlanCountByMeterBrand">
+                  <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">
+                  <bar :data="barData2" title="销售额趋势"/>
+                </a-col>
+                <a-col :lg="12" :md="12" :sm="24" :xl="8" :xs="24">
+                  <rank-list :list="rankList" title="门店销售排行榜"/>
+                </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">
+            <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"/>
+                </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
+                    :status="useGasSubValue.status"
+                    :sub-total="useGasSubValue.subValue"
+                    :total="todayUseGasTotalValue">
+                    <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="useGasWeekData"
+                      :scale="useGasWeekDataScale"
+                      :style="{ height: '45px' }"/>
+                  </div>
+                </a-col>
+                <a-col :sm="12" :style="{ marginBottom: ' 24px'}" :xs="24">
+                  <number-info
+                    :status="handPlanUserSubValue.status"
+                    :sub-total="handPlanUserSubValue.subValue"
+                    :total="todayHandPlanUserCount">
+                    <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="handPlanUserData"
+                      :scale="handPlanUserDataScale"
+                      :style="{ height: '45px' }"/>
+                  </div>
+                </a-col>
+              </a-row>
+              <div class="ant-table-wrapper">
+                <a-table
+                  :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+                  :columns="searchTableColumns"
+                  :dataSource="gasConsumptionRanking"
+                  :pagination="{ pageSize: 5 }"
+                  row-key="f_userinfo_id"
+                  size="small"
+                >
+                  <span slot="range" slot-scope="text, record">
+                    <trend :flag="record.status === 0 ? 'up' : 'down'">
+                      {{ text }}%
+                    </trend>
+                  </span>
+                </a-table>
+              </div>
+            </x-card>
+          </a-col>
+          <a-col
+            :lg="24"
+            :md="24"
+            :sm="24"
+            :xl="12"
+            :xs="24"
+            style="background-color:#fff">
+            <a-tabs
+              :activeKey="PieActiveKey"
+              tab-position="top"
+              :default-active-key="PieActiveKey"
+              :forceRender="true"
+              @change="handlePieTabChange">
+              <div slot="tabBarExtraContent" class="extra-wrapper">
+                <div class="extra-item">
+                  <a-radio-group v-model="countPieMode" button-style="solid" @change="loadPieMode">
+                    <a-radio-button value="now">本日</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>
+              </div>
+              <a-tab-pane key="properties" tab="用气量用气性质占比">
+                <x-card :loadState="radarLoadState_gasproperties" :retry="loadPieMode">
+                  <div id="container_gasproperties"></div>
+                </x-card>
+              </a-tab-pane>
+              <a-tab-pane key="gasinuser" tab="用户用气量占比" :disabled="selectedRowKeys.length === 0 ">
+                <x-card :loadState="radarLoadState_gasInUser" :retry="loadGasInUser">
+                  <div id="container_gasInUser"></div>
+                </x-card>
+              </a-tab-pane>
+            </a-tabs>
+          </a-col>
+        </a-row>
+      </div>
+    </div>
+  </a-page-header>
+</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, Pie, measureTextWidth } from '@antv/g2plot'
+import { mapState } from 'vuex'
+import { WebmeterAnalysisViewApi, post } from '@vue2-client/services/api'
+
+function renderStatistic (containerWidth, text, style) {
+  const { width: textWidth, height: textHeight } = measureTextWidth(text, style)
+  const R = containerWidth / 2
+  // r^2 = (w / 2)^2 + (h - offsetY)^2
+  let scale = 1
+  if (containerWidth < textWidth) {
+    scale = Math.min(Math.sqrt(Math.abs(Math.pow(R, 2) / (Math.pow(textWidth / 2, 2) + Math.pow(textHeight, 2)))), 1)
+  }
+  const textStyleStr = `width:${containerWidth}px;`
+  return `<div style="${textStyleStr};font-size:${scale}em;line-height:${scale < 1 ? 1 : 'inherit'};">${text}</div>`
+}
+
+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({
+    x: moment().add(i, 'days').format('YYYY-MM-DD'),
+    y: Math.ceil(Math.random() * 10)
+  })
+}
+
+const searchTableColumns = [
+  {
+    dataIndex: 'f_userinfo_id',
+    title: '用户编号',
+    width: 90
+  },
+  {
+    dataIndex: 'f_user_name',
+    title: '用户姓名'
+  },
+  {
+    dataIndex: 'count',
+    title: '用气量'
+  },
+  {
+    dataIndex: 'range',
+    title: '周涨幅',
+    align: 'right',
+    sorter: (a, b) => a.range - b.range,
+    scopedSlots: { customRender: 'range' }
+  }
+]
+
+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++
+}
+
+export default {
+  name: 'WebmeterAnalysisView',
+  components: {
+    ChartCard,
+    MiniArea,
+    MiniBar,
+    MiniProgress,
+    RankList,
+    Bar,
+    Trend,
+    NumberInfo,
+    MiniSmoothArea
+  },
+  data () {
+    return {
+      // 页面宽度
+      screenWidth: document.documentElement.clientWidth,
+      // 客户名称
+      customerName: '',
+      // >> 指令总数统计
+      // 指令数统计Loading
+      instructSumLoadState: 'loading',
+      //  总指令数
+      instructSum: 0,
+      //  同周比
+      instructYoW: 0,
+      //  日同比
+      instructYoD: 0,
+      //  昨日新增指令数
+      instructYesAdd: 0,
+      // >> 抄表量统计
+      // 抄表量统计Loading
+      metereadSumLoadState: 'loading',
+      //  总抄表量
+      metereadSum: 0,
+      //  昨日新增抄表量
+      metereadYesAdd: 0,
+      //  近一周抄表量明细
+      metereadSumDataByWeek: [],
+      //  近一周抄表量明细列
+      metereadSumByWeekScale: [
+        {
+          dataKey: 'x',
+          alias: '时间'
+        },
+        {
+          dataKey: 'y',
+          alias: '抄表量'
+        }
+      ],
+      // >> 在用表具数统计
+      // 在用表具统计Loading
+      usingMeterSumLoadState: 'loading',
+      //  在用表具总量
+      usingMeterSum: 0,
+      //  昨日新增在用表具量
+      usingMeterYesAdd: 0,
+      //  近一周新增在用表具明细
+      usingMeterSumDataByWeek: [],
+      //  近一周新增在用表具明细列
+      usingMeterSumByWeekScale: [
+        {
+          dataKey: 'x',
+          alias: '时间'
+        },
+        {
+          dataKey: 'y',
+          alias: '开户数'
+        }
+      ],
+      // >> 表具指令下发成功率统计
+      //  表具指令成功率
+      instructRateOfSuccessValue: 0,
+      //  昨日指令成功率
+      yesterdayInstructRateOf: 0,
+      //  同周比
+      instructRateOfSuccessYoW: 0,
+      //  日同比
+      instructRateOfSuccessYoD: 0,
+      //  指令成功率进度色
+      instructRateOfColor: 'rgb(19, 194, 194)',
+      // 表具指令下发成功率加载状态
+      instructRateOfSuccessLoadState: 'loading',
+
+      // 统计模式
+      countMode: 'now',
+      // 圆饼图
+      countPieMode: 'now',
+      // 统计类型
+      tabActiveKey: '1',
+      // 统计类型
+      PieActiveKey: 'properties',
+      // >> 表具上报情况统计
+      // 上报统计图表
+      uploadCountPlot: undefined,
+      // 用气性质分析报表
+      gasPropertiesPlot: undefined,
+      // 用户用气占比
+      gasInUserPlot: undefined,
+      // 抄表情况分析Loading
+      radarLoadState: 'loading',
+      // 用气性质统计分析Loading
+      radarLoadState_gasproperties: 'loading',
+      // 用户在用气量中占比
+      radarLoadState_gasInUser: '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,
+      searchTableColumns,
+      searchData,
+      barData,
+      barData2,
+      // 左下列表选择框
+      selectedRowKeys: [],
+    }
+  },
+  mounted () {
+    // 加载指令数统计
+    this.loadInstructSumCount()
+    // 加载抄表量统计
+    this.loadMetereadSumCount()
+    // 加载在用表具量统计
+    this.loadUsingMeterSumCount()
+    // 加载指令成功率统计
+    this.loadInstructRateOfSuccess()
+    // 加载各表厂表具上报情况统计
+    this.getHandPlanCountByMeterBrand()
+    // 加载用气量统计
+    this.loadUseGasData()
+    // 加载按用气性质统计用气量
+    this.loadGasByGasProperties()
+  },
+  computed: {
+    ...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: {
+    onSelectChange (selectedRowKeys) {
+      this.selectedRowKeys = selectedRowKeys
+      if (selectedRowKeys.length > 0) {
+        if (this.PieActiveKey === 'properties') {
+          this.PieActiveKey = 'gasinuser'
+        }
+        this.loadGasInUser()
+      } else {
+        this.PieActiveKey = 'properties'
+        this.loadGasByGasProperties()
+      }
+    },
+    loadPieMode () {
+      if (this.PieActiveKey === 'properties') {
+        this.loadGasByGasProperties()
+      } else {
+        this.loadGasInUser()
+      }
+    },
+    // 加载按用气性质统计用气量
+    loadGasByGasProperties () {
+      this.radarLoadState_gasproperties = 'loading'
+      fetch(WebmeterAnalysisViewApi.GasByGasProperties, {
+        method: 'POST',
+        body: JSON.stringify({
+          type: this.countPieMode
+        })
+      }).then((res) => res.json())
+        .then((data) => {
+          const piePlot = {
+            appendPadding: 10,
+            data,
+            angleField: 'value',
+            colorField: 'type',
+            radius: 1,
+            innerRadius: 0.64,
+            meta: {
+              value: {
+                formatter: (v) => `${v} m³`,
+              },
+            },
+            label: {
+              type: 'inner',
+              offset: '-50%',
+              style: {
+                textAlign: 'center',
+              },
+              autoRotate: false,
+              content: '{value}',
+            },
+            statistic: {
+              title: {
+                offsetY: -4,
+                customHtml: (container, view, datum) => {
+                  const { width, height } = container.getBoundingClientRect()
+                  const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2))
+                  const text = datum ? datum.type : '总计'
+                  return renderStatistic(d, text, { fontSize: 28 })
+                },
+              },
+              content: {
+                offsetY: 4,
+                style: {
+                  fontSize: '32px',
+                },
+                customHtml: (container, view, datum, data) => {
+                  const { width } = container.getBoundingClientRect()
+                  const text = datum ? `${datum.value}m³` : `${data.reduce((r, d) => r + d.value, 0)}m³`
+                  return renderStatistic(width, text, { fontSize: 32 })
+                },
+              },
+            },
+            // 添加 中心统计文本 交互
+            interactions: [{ type: 'element-selected' }, { type: 'element-active' }, { type: 'pie-statistic-active' }],
+          }
+          if (this.gasPropertiesPlot) {
+            this.gasPropertiesPlot.update(piePlot)
+          } else {
+            this.gasPropertiesPlot = new Pie('container_gasproperties', piePlot)
+            this.gasPropertiesPlot.render()
+          }
+          this.radarLoadState_gasproperties = 'success'
+        })
+        .catch((ex) => {
+          console.error(ex)
+          this.radarLoadState_gasproperties = 'error'
+        })
+    },
+    // 加载按用气性质统计用气量
+    loadGasInUser () {
+      this.radarLoadState_gasInUser = 'loading'
+      fetch(WebmeterAnalysisViewApi.GasInUser, {
+        method: 'POST',
+        body: JSON.stringify({
+          type: this.countPieMode,
+          ids: this.selectedRowKeys.join(',')
+        })
+      }).then((res) => res.json())
+        .then((data) => {
+          const piePlot = {
+            appendPadding: 10,
+            data,
+            angleField: 'value',
+            colorField: 'name',
+            radius: 1,
+            innerRadius: 0.64,
+            meta: {
+              value: {
+                formatter: (v) => `${v} m³`,
+              },
+            },
+            label: {
+              type: 'inner',
+              offset: '-50%',
+              style: {
+                textAlign: 'center',
+              },
+              autoRotate: false,
+              content: '{value}',
+            },
+            statistic: {
+              title: {
+                offsetY: -4,
+                customHtml: (container, view, datum) => {
+                  const { width, height } = container.getBoundingClientRect()
+                  const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2))
+                  const text = datum ? datum.name : '总计'
+                  return renderStatistic(d, text, { fontSize: 24 })
+                },
+              },
+              content: {
+                offsetY: 4,
+                style: {
+                  fontSize: '32px',
+                },
+                customHtml: (container, view, datum, data) => {
+                  const { width } = container.getBoundingClientRect()
+                  const text = datum ? `${datum.value}m³` : `${data.reduce((r, d) => r + d.value, 0)}m³`
+                  return renderStatistic(width, text, { fontSize: 32 })
+                },
+              },
+            },
+            // 添加 中心统计文本 交互
+            interactions: [{ type: 'element-selected' }, { type: 'element-active' }, { type: 'pie-statistic-active' }],
+          }
+          if (this.gasInUserPlot) {
+            this.gasInUserPlot.update(piePlot)
+          } else {
+            this.gasInUserPlot = new Pie('container_gasInUser', piePlot)
+            this.gasInUserPlot.render()
+          }
+          this.radarLoadState_gasInUser = 'success'
+        })
+        .catch((ex) => {
+          console.error(ex)
+          this.radarLoadState_gasInUser = 'error'
+        })
+    },
+    /**
+     * 加载指令总数统计
+     */
+    loadInstructSumCount () {
+      this.instructSumLoadState = 'loading'
+      post(WebmeterAnalysisViewApi.instructSumCount, {}).then(res => {
+        this.instructSum = res.instructSum
+        this.instructYoW = res.instructYoW
+        this.instructYoD = res.instructYoD
+        this.instructYesAdd = res.instructYesAdd
+        this.instructSumLoadState = 'success'
+      }, err => {
+        console.warn(err)
+        this.instructSumLoadState = 'error'
+      })
+    },
+    /**
+     * 加载抄表总数统计
+     */
+    loadMetereadSumCount () {
+      this.metereadSumDataByWeek = []
+      this.metereadSumLoadState = 'loading'
+      post(WebmeterAnalysisViewApi.meteReadSumCount, {}).then(res => {
+        // 加载近一周抄表数图表
+        post(WebmeterAnalysisViewApi.meteReadDataByWeek, {}).then(res => {
+          for (let i = 0, len = res.length; i < len; i++) {
+            this.metereadSumDataByWeek.push({
+              x: res[i].date,
+              y: res[i].num
+            })
+          }
+        })
+        this.metereadSum = res.metereadSum
+        this.metereadYesAdd = res.metereadYesAdd
+        this.metereadSumLoadState = 'success'
+      }, err => {
+        console.warn(err)
+        this.metereadSumLoadState = 'error'
+      })
+    },
+    /**
+     * 加载在用表具总数情况
+     */
+    loadUsingMeterSumCount () {
+      this.usingMeterSumDataByWeek = []
+      this.usingMeterSumLoadState = 'loading'
+      return post(WebmeterAnalysisViewApi.usingMeterSumCount, {}).then(res => {
+        // 加载近一周开户数图表
+        post(WebmeterAnalysisViewApi.usingMeterDataByWeek, {}).then(res => {
+          for (let i = 0, len = res.length; i < len; i++) {
+            this.usingMeterSumDataByWeek.push({
+              x: res[i].date,
+              y: res[i].num
+            })
+          }
+        })
+        this.usingMeterSum = res.usingMeterSum
+        this.usingMeterYesAdd = res.usingMeterYesAdd
+        this.usingMeterSumLoadState = 'success'
+      }, err => {
+        console.warn(err)
+        this.usingMeterSumLoadState = 'error'
+      })
+    },
+    /**
+     * 加载表具指令下发成功率
+     */
+    loadInstructRateOfSuccess () {
+      this.instructRateOfSuccessLoadState = 'loading'
+      post(WebmeterAnalysisViewApi.instructRateOfSuccess, {}).then(res => {
+        this.instructRateOfSuccessValue = res.instructRateOfSuccessValue * 1.0
+        if (this.instructRateOfSuccessValue < 70.0) {
+          this.instructRateOfColor = 'rgb(242, 99, 123)'
+        } else if (this.instructRateOfSuccessValue < 90.0) {
+          this.instructRateOfColor = 'rgb(251, 212, 55)'
+        } else {
+          this.instructRateOfColor = 'rgb(19, 194, 194)'
+        }
+        this.instructRateOfSuccessYoW = res.instructRateOfSuccessYoW
+        this.instructRateOfSuccessYoD = res.instructRateOfSuccessYoD
+        this.yesterdayInstructRateOf = res.yesterdayInstructRateOf
+        this.instructRateOfSuccessLoadState = 'success'
+      }, err => {
+        console.warn(err)
+        this.instructRateOfSuccessLoadState = '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()
+    },
+    /**
+     * 右下圆饼图切换
+     */
+    handlePieTabChange (key) {
+      this.PieActiveKey = key + ''
+      this.loadPieMode()
+      // this.updateDataByKey()
+    },
+    /**
+     * 根据模式更新数据
+     */
+    updateDataByKey () {
+      if (this.tabActiveKey === '1') {
+        this.getHandPlanCountByMeterBrand()
+      } else {
+        // this.getDeviceLostContactCountData()
+        // this.getDeviceLostContactRankData()
+      }
+    },
+    /**
+     * 获取各表厂表具上报情况
+     */
+    getHandPlanCountByMeterBrand () {
+      this.radarLoadState = 'loading'
+      fetch(WebmeterAnalysisViewApi.handMeterSumCountData, {
+        method: 'POST',
+        body: JSON.stringify({
+          type: this.countMode
+        })
+      }).then((res) => res.json())
+        .then((data) => {
+          const plotOption = {
+            data,
+            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 (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'
+        })
+    },
+    /**
+     * 获取用气请求排行
+     */
+    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'
+      })
+    }
+  }
+}
+</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>