vue2-client 1.2.65 → 1.2.68

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

@@ -1,647 +1,647 @@
-<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" :loading="loading">
-        <div class="salesCard">
-          <a-tabs :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}" default-active-key="1" size="large">
-            <div slot="tabBarExtraContent" class="extra-wrapper">
-              <div class="extra-item">
-                <a>今日</a>
-                <a>本周</a>
-                <a>本月</a>
-                <a>本年</a>
-              </div>
-              <a-range-picker :style="{width: '256px'}" />
-            </div>
-            <a-tab-pane key="1" tab="抄表情况分析">
-              <a-row :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
-                <x-card :loadState="radarLoadState" :retry="loadGasView">
-                  <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">
-            <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="17.1" :total="21232.1">
-                    <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.2" :total="0.7" 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>
-  </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 } from '@antv/g2plot'
-import { mapState } from 'vuex'
-import { WebmeterAnalysisViewApi, post } from '@vue2-client/services/api'
-
-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 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',
-    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++
-}
-
-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: '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
-      radarLoadState: 'loading',
-      // 在用表具统计Loading
-      usingMeterSumLoadState: 'loading',
-      //  在用表具总量
-      usingMeterSum: 0,
-      //  昨日新增在用表具量
-      usingMeterYesAdd: 0,
-      //  近一周新增在用表具明细
-      usingMeterSumDataByWeek: [],
-      //  近一周新增在用表具明细列
-      usingMeterSumByWeekScale: [
-        {
-          dataKey: 'x',
-          alias: '时间'
-        },
-        {
-          dataKey: 'y',
-          alias: '开户数'
-        }
-      ],
-      // 指令成功率统计Loading
-      instructRateOfSuccessLoadState: 'loading',
-      //  指令成功率
-      instructRateOfSuccessValue: 0,
-      //  昨日指令成功率
-      yesterdayInstructRateOf: 0,
-      //  同周比
-      instructRateOfSuccessYoW: 0,
-      //  日同比
-      instructRateOfSuccessYoD: 0,
-      //  指令成功率进度色
-      instructRateOfColor: 'rgb(19, 194, 194)',
-      // 是否刷新加载中
-      loading: false,
-      rankList,
-
-      // 搜索用户数
-      searchUserData,
-      searchUserScale,
-      searchTableColumns,
-      searchData,
-
-      barData,
-      barData2,
-
-      //
-      pieScale,
-      pieData,
-      sourceData,
-      pieStyle: {
-        stroke: '#fff',
-        lineWidth: 1
-      }
-    }
-  },
-  mounted () {
-    // 加载指令数统计
-    this.loadInstructSumCount()
-    // 加载抄表量统计
-    this.loadMetereadSumCount()
-    // 加载在用表具量统计
-    this.loadUsingMeterSumCount()
-    // 加载指令成功率统计
-    this.loadInstructRateOfSuccess()
-    // 加载g2图表
-    this.loadGasView()
-  },
-  computed: {
-    ...mapState('setting', ['isMobile'])
-  },
-  props: {
-  },
-  methods: {
-    loadInstructSumCount () {
-      this.instructSumLoadState = 'loading'
-      return 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'
-      return 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'
-      return 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'
-      })
-    },
-    format (date, format) {
-      return formatDate(date, format)
-    },
-    loadGasView () {
-      const _this = this
-      _this.getHandPlanCountByMeterBrand()
-    },
-    getHandPlanCountByMeterBrand () {
-      this.radarLoadState = 'loading'
-      fetch('/webmeterapi/foreignaidHandMeterSumCountData', {
-        method: 'POST',
-        body: JSON.stringify({})
-      }).then((res) => res.json())
-        .then((data) => {
-          const linePlot = new Line('container', {
-            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.5,
-              end: 1
-            },
-            legend: {
-              position: 'top'
-            },
-            smooth: true
-          })
-          linePlot.render()
-          this.radarLoadState = 'success'
-        })
-      .catch((ex) => {
-        console.error(ex)
-        this.radarLoadState = '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" :loading="loading">
+        <div class="salesCard">
+          <a-tabs :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}" default-active-key="1" size="large">
+            <div slot="tabBarExtraContent" class="extra-wrapper">
+              <div class="extra-item">
+                <a>今日</a>
+                <a>本周</a>
+                <a>本月</a>
+                <a>本年</a>
+              </div>
+              <a-range-picker :style="{width: '256px'}" />
+            </div>
+            <a-tab-pane key="1" tab="抄表情况分析">
+              <a-row :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
+                <x-card :loadState="radarLoadState" :retry="loadGasView">
+                  <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">
+            <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="17.1" :total="21232.1">
+                    <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.2" :total="0.7" 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>
+  </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 } from '@antv/g2plot'
+import { mapState } from 'vuex'
+import { WebmeterAnalysisViewApi, post } from '@vue2-client/services/api'
+
+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 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',
+    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++
+}
+
+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: '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
+      radarLoadState: 'loading',
+      // 在用表具统计Loading
+      usingMeterSumLoadState: 'loading',
+      //  在用表具总量
+      usingMeterSum: 0,
+      //  昨日新增在用表具量
+      usingMeterYesAdd: 0,
+      //  近一周新增在用表具明细
+      usingMeterSumDataByWeek: [],
+      //  近一周新增在用表具明细列
+      usingMeterSumByWeekScale: [
+        {
+          dataKey: 'x',
+          alias: '时间'
+        },
+        {
+          dataKey: 'y',
+          alias: '开户数'
+        }
+      ],
+      // 指令成功率统计Loading
+      instructRateOfSuccessLoadState: 'loading',
+      //  指令成功率
+      instructRateOfSuccessValue: 0,
+      //  昨日指令成功率
+      yesterdayInstructRateOf: 0,
+      //  同周比
+      instructRateOfSuccessYoW: 0,
+      //  日同比
+      instructRateOfSuccessYoD: 0,
+      //  指令成功率进度色
+      instructRateOfColor: 'rgb(19, 194, 194)',
+      // 是否刷新加载中
+      loading: false,
+      rankList,
+
+      // 搜索用户数
+      searchUserData,
+      searchUserScale,
+      searchTableColumns,
+      searchData,
+
+      barData,
+      barData2,
+
+      //
+      pieScale,
+      pieData,
+      sourceData,
+      pieStyle: {
+        stroke: '#fff',
+        lineWidth: 1
+      }
+    }
+  },
+  mounted () {
+    // 加载指令数统计
+    this.loadInstructSumCount()
+    // 加载抄表量统计
+    this.loadMetereadSumCount()
+    // 加载在用表具量统计
+    this.loadUsingMeterSumCount()
+    // 加载指令成功率统计
+    this.loadInstructRateOfSuccess()
+    // 加载g2图表
+    this.loadGasView()
+  },
+  computed: {
+    ...mapState('setting', ['isMobile'])
+  },
+  props: {
+  },
+  methods: {
+    loadInstructSumCount () {
+      this.instructSumLoadState = 'loading'
+      return 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'
+      return 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'
+      return 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'
+      })
+    },
+    format (date, format) {
+      return formatDate(date, format)
+    },
+    loadGasView () {
+      const _this = this
+      _this.getHandPlanCountByMeterBrand()
+    },
+    getHandPlanCountByMeterBrand () {
+      this.radarLoadState = 'loading'
+      fetch('/webmeterapi/foreignaidHandMeterSumCountData', {
+        method: 'POST',
+        body: JSON.stringify({})
+      }).then((res) => res.json())
+        .then((data) => {
+          const linePlot = new Line('container', {
+            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.5,
+              end: 1
+            },
+            legend: {
+              position: 'top'
+            },
+            smooth: true
+          })
+          linePlot.render()
+          this.radarLoadState = 'success'
+        })
+      .catch((ex) => {
+        console.error(ex)
+        this.radarLoadState = '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>