vue2-client 1.0.0 → 1.2.1

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

@@ -1,723 +1,723 @@
-<template>
-  <a-drawer
-    title="物联网综合分析"
-    placement="right"
-    :width="isMobile ? screenWidth : screenWidth * 0.85"
-    :visible="visible"
-    @close="onClose"
-  >
-    <a-page-header :title="selectOrgName +' - 物联网运行维护'">
-      <div>
-        <a-row :gutter="24">
-          <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
-            <x-card :loadState="instructSumLoadState" :retry="loadInstructSumCount">
-              <chart-card title="总指令数" :total="instructSum | NumberFormat">
-                <a-tooltip title="刷新" slot="action" :style="{ marginRight: '10px' }" @click="loadInstructSumCount()">
-                  <a-icon type="redo" />
-                </a-tooltip>
-                <a-tooltip title="生成的所有指令总数" slot="action">
-                  <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 :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
-            <x-card :loadState="metereadSumLoadState" :retry="loadMetereadSumCount">
-              <chart-card title="总抄表量" :total="metereadSum | NumberFormat">
-                <a-tooltip title="刷新" slot="action" :style="{ marginRight: '10px' }" @click="loadMetereadSumCount()">
-                  <a-icon type="redo" />
-                </a-tooltip>
-                <a-tooltip title="生成的所有抄表(meteread)总数" slot="action">
-                  <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 :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
-            <x-card :loadState="usingMeterSumLoadState" :retry="loadUsingMeterSumCount">
-              <chart-card title="在用表具数" :total="usingMeterSum | NumberFormat">
-                <a-tooltip title="刷新" slot="action" :style="{ marginRight: '10px' }" @click="loadUsingMeterSumCount()">
-                  <a-icon type="redo" />
-                </a-tooltip>
-                <a-tooltip title="开户成功的物联网表总数" slot="action">
-                  <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 :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
-            <x-card :loadState="instructRateOfSuccessLoadState" :retry="loadInstructRateOfSuccess">
-              <chart-card title="指令下发成功率" :total="instructRateOfSuccessValue + '%'">
-                <a-tooltip title="刷新" slot="action" :style="{ marginRight: '10px' }" @click="loadInstructRateOfSuccess()">
-                  <a-icon type="redo" />
-                </a-tooltip>
-                <a-tooltip title="执行成功和已发送状态的指令占所有指令的比例" slot="action">
-                  <a-icon type="info-circle-o" />
-                </a-tooltip>
-                <div>
-                  <mini-progress :color="instructRateOfColor" :target="90" :percentage="instructRateOfSuccessValue" 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 :loading="loading" :bordered="false" :body-style="{padding: '0'}">
-          <div class="salesCard">
-            <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
-              <div class="extra-wrapper" slot="tabBarExtraContent">
-                <div class="extra-item">
-                  <a>今日</a>
-                  <a>本周</a>
-                  <a>本月</a>
-                  <a>本年</a>
-                </div>
-                <a-range-picker :style="{width: '256px'}" />
-              </div>
-              <a-tab-pane tab="抄表情况分析" key="1">
-                <a-row :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
-                  <x-card :loadState="radarLoadState" :retry="loadGasView">
-                    <div style="padding: 0 0 0 20px;height: 370px" id="container" />
-                  </x-card>
-                </a-row>
-              </a-tab-pane>
-              <a-tab-pane tab="访问量" key="2">
-                <a-row>
-                  <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
-                    <bar :data="barData2" title="销售额趋势" />
-                  </a-col>
-                  <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
-                    <rank-list title="门店销售排行榜" :list="rankList"/>
-                  </a-col>
-                </a-row>
-              </a-tab-pane>
-            </a-tabs>
-          </div>
-        </a-card>
-
-        <div class="antd-pro-pages-dashboard-analysis-twoColLayout" :class="!isMobile && 'desktop'">
-          <a-row :gutter="24" type="flex" :style="{ marginTop: '24px' }">
-            <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
-              <a-card :loading="loading" :bordered="false" title="用气情况排行" :style="{ height: '100%' }">
-                <a-dropdown :trigger="['click']" placement="bottomLeft" slot="extra">
-                  <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 :xs="24" :sm="12" :style="{ marginBottom: ' 24px'}">
-                    <number-info :total="21232.1" :sub-total="17.1">
-                      <span slot="subtitle">
-                        <span>当天总用气量</span>
-                        <a-tooltip title="指标说明" slot="action">
-                          <a-icon type="info-circle-o" :style="{ marginLeft: '8px' }" />
-                        </a-tooltip>
-                      </span>
-                    </number-info>
-                    <!-- miniChart -->
-                    <div>
-                      <mini-smooth-area :style="{ height: '45px' }" :dataSource="searchUserData" :scale="searchUserScale" />
-                    </div>
-                  </a-col>
-                  <a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px'}">
-                    <number-info :total="0.7" :sub-total="0.2" status="up">
-                      <span slot="subtitle">
-                        <span>人均用气量</span>
-                        <a-tooltip title="指标说明" slot="action">
-                          <a-icon type="info-circle-o" :style="{ marginLeft: '8px' }" />
-                        </a-tooltip>
-                      </span>
-                    </number-info>
-                    <!-- miniChart -->
-                    <div>
-                      <mini-smooth-area :style="{ height: '45px' }" :dataSource="searchUserData" :scale="searchUserScale" />
-                    </div>
-                  </a-col>
-                </a-row>
-                <div class="ant-table-wrapper">
-                  <a-table
-                    row-key="index"
-                    size="small"
-                    :columns="searchTableColumns"
-                    :dataSource="searchData"
-                    :pagination="{ pageSize: 5 }"
-                  >
-                    <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 :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
-              <a-card class="antd-pro-pages-dashboard-analysis-salesCard" :loading="loading" :bordered="false" title="指令类别占比" :style="{ height: '100%' }">
-                <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 :force-fit="true" :height="405" :data="pieData" :scale="pieScale">
-                      <v-tooltip :showTitle="false" dataKey="item*percent" />
-                      <v-axis />
-                      <!-- position="right" :offsetX="-140" -->
-                      <v-legend dataKey="item"/>
-                      <v-pie position="percent" color="item" :vStyle="pieStyle" />
-                      <v-coord type="theta" :radius="0.75" :innerRadius="0.6" />
-                    </v-chart>
-                  </div>
-                </div>
-              </a-card>
-            </a-col>
-          </a-row>
-        </div>
-      </div>
-    </a-page-header>
-  </a-drawer>
-</template>
-
-<script>
-import moment from 'moment'
-import {
-  ChartCard,
-  MiniArea,
-  MiniBar,
-  MiniProgress,
-  RankList,
-  Bar,
-  Trend,
-  NumberInfo,
-  MiniSmoothArea
-} from '@/components'
-import { formatDate } from '@/utils/util'
-import { Line } from '@antv/g2plot'
-import { mapState } from 'vuex'
-import { post } from '@/services/api/restTools'
-import { WebmeterAnalysisViewApi } from '@/services/api/WebmeterAnalysisViewApi'
-
-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: {
-    selectOrgName: {
-      type: String,
-      required: true
-    },
-    webmeterUrl: {
-      type: String,
-      required: true
-    },
-    systemVersion: {
-      type: String,
-      required: true
-    },
-    dataSource: {
-      type: String,
-      required: true
-    },
-    visible: {
-      type: Boolean,
-      default: false
-    }
-  },
-  methods: {
-    onClose () {
-      this.$emit('update:visible', false)
-    },
-    loadInstructSumCount () {
-      this.instructSumLoadState = 'loading'
-      return post(WebmeterAnalysisViewApi.instructSumCount, {
-        webmeterUrl: this.webmeterUrl,
-        systemVersion: this.systemVersion,
-        dataSource: this.dataSource
-      }).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, {
-        webmeterUrl: this.webmeterUrl,
-        systemVersion: this.systemVersion,
-        dataSource: this.dataSource
-      }).then(res => {
-        // 加载近一周抄表数图表
-        post(WebmeterAnalysisViewApi.meteReadDataByWeek, {
-          webmeterUrl: this.webmeterUrl,
-          systemVersion: this.systemVersion,
-          dataSource: this.dataSource
-        }).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, {
-        webmeterUrl: this.webmeterUrl,
-        systemVersion: this.systemVersion,
-        dataSource: this.dataSource
-      }).then(res => {
-        // 加载近一周开户数图表
-        post(WebmeterAnalysisViewApi.usingMeterDataByWeek, {
-          webmeterUrl: this.webmeterUrl,
-          systemVersion: this.systemVersion,
-          dataSource: this.dataSource
-        }).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, {
-        webmeterUrl: this.webmeterUrl,
-        systemVersion: this.systemVersion,
-        dataSource: this.dataSource
-      }).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({
-          webmeterUrl: this.webmeterUrl,
-          systemVersion: this.systemVersion,
-          dataSource: this.dataSource
-        })
-      }).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'
-      })
-    }
-  },
-  watch: {
-    'visible' (val) {
-      if (val) {
-        // 加载指令数统计
-        this.loadInstructSumCount()
-        // 加载抄表量统计
-        this.loadMetereadSumCount()
-        // 加载在用表具量统计
-        this.loadUsingMeterSumCount()
-        // 加载指令成功率统计
-        this.loadInstructRateOfSuccess()
-        // 加载g2图表
-        this.loadGasView()
-      }
-    }
-  }
-}
-</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-drawer
+    title="物联网综合分析"
+    placement="right"
+    :width="isMobile ? screenWidth : screenWidth * 0.85"
+    :visible="visible"
+    @close="onClose"
+  >
+    <a-page-header :title="selectOrgName +' - 物联网运行维护'">
+      <div>
+        <a-row :gutter="24">
+          <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
+            <x-card :loadState="instructSumLoadState" :retry="loadInstructSumCount">
+              <chart-card title="总指令数" :total="instructSum | NumberFormat">
+                <a-tooltip title="刷新" slot="action" :style="{ marginRight: '10px' }" @click="loadInstructSumCount()">
+                  <a-icon type="redo" />
+                </a-tooltip>
+                <a-tooltip title="生成的所有指令总数" slot="action">
+                  <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 :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
+            <x-card :loadState="metereadSumLoadState" :retry="loadMetereadSumCount">
+              <chart-card title="总抄表量" :total="metereadSum | NumberFormat">
+                <a-tooltip title="刷新" slot="action" :style="{ marginRight: '10px' }" @click="loadMetereadSumCount()">
+                  <a-icon type="redo" />
+                </a-tooltip>
+                <a-tooltip title="生成的所有抄表(meteread)总数" slot="action">
+                  <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 :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
+            <x-card :loadState="usingMeterSumLoadState" :retry="loadUsingMeterSumCount">
+              <chart-card title="在用表具数" :total="usingMeterSum | NumberFormat">
+                <a-tooltip title="刷新" slot="action" :style="{ marginRight: '10px' }" @click="loadUsingMeterSumCount()">
+                  <a-icon type="redo" />
+                </a-tooltip>
+                <a-tooltip title="开户成功的物联网表总数" slot="action">
+                  <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 :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
+            <x-card :loadState="instructRateOfSuccessLoadState" :retry="loadInstructRateOfSuccess">
+              <chart-card title="指令下发成功率" :total="instructRateOfSuccessValue + '%'">
+                <a-tooltip title="刷新" slot="action" :style="{ marginRight: '10px' }" @click="loadInstructRateOfSuccess()">
+                  <a-icon type="redo" />
+                </a-tooltip>
+                <a-tooltip title="执行成功和已发送状态的指令占所有指令的比例" slot="action">
+                  <a-icon type="info-circle-o" />
+                </a-tooltip>
+                <div>
+                  <mini-progress :color="instructRateOfColor" :target="90" :percentage="instructRateOfSuccessValue" 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 :loading="loading" :bordered="false" :body-style="{padding: '0'}">
+          <div class="salesCard">
+            <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
+              <div class="extra-wrapper" slot="tabBarExtraContent">
+                <div class="extra-item">
+                  <a>今日</a>
+                  <a>本周</a>
+                  <a>本月</a>
+                  <a>本年</a>
+                </div>
+                <a-range-picker :style="{width: '256px'}" />
+              </div>
+              <a-tab-pane tab="抄表情况分析" key="1">
+                <a-row :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
+                  <x-card :loadState="radarLoadState" :retry="loadGasView">
+                    <div style="padding: 0 0 0 20px;height: 370px" id="container" />
+                  </x-card>
+                </a-row>
+              </a-tab-pane>
+              <a-tab-pane tab="访问量" key="2">
+                <a-row>
+                  <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
+                    <bar :data="barData2" title="销售额趋势" />
+                  </a-col>
+                  <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
+                    <rank-list title="门店销售排行榜" :list="rankList"/>
+                  </a-col>
+                </a-row>
+              </a-tab-pane>
+            </a-tabs>
+          </div>
+        </a-card>
+
+        <div class="antd-pro-pages-dashboard-analysis-twoColLayout" :class="!isMobile && 'desktop'">
+          <a-row :gutter="24" type="flex" :style="{ marginTop: '24px' }">
+            <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
+              <a-card :loading="loading" :bordered="false" title="用气情况排行" :style="{ height: '100%' }">
+                <a-dropdown :trigger="['click']" placement="bottomLeft" slot="extra">
+                  <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 :xs="24" :sm="12" :style="{ marginBottom: ' 24px'}">
+                    <number-info :total="21232.1" :sub-total="17.1">
+                      <span slot="subtitle">
+                        <span>当天总用气量</span>
+                        <a-tooltip title="指标说明" slot="action">
+                          <a-icon type="info-circle-o" :style="{ marginLeft: '8px' }" />
+                        </a-tooltip>
+                      </span>
+                    </number-info>
+                    <!-- miniChart -->
+                    <div>
+                      <mini-smooth-area :style="{ height: '45px' }" :dataSource="searchUserData" :scale="searchUserScale" />
+                    </div>
+                  </a-col>
+                  <a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px'}">
+                    <number-info :total="0.7" :sub-total="0.2" status="up">
+                      <span slot="subtitle">
+                        <span>人均用气量</span>
+                        <a-tooltip title="指标说明" slot="action">
+                          <a-icon type="info-circle-o" :style="{ marginLeft: '8px' }" />
+                        </a-tooltip>
+                      </span>
+                    </number-info>
+                    <!-- miniChart -->
+                    <div>
+                      <mini-smooth-area :style="{ height: '45px' }" :dataSource="searchUserData" :scale="searchUserScale" />
+                    </div>
+                  </a-col>
+                </a-row>
+                <div class="ant-table-wrapper">
+                  <a-table
+                    row-key="index"
+                    size="small"
+                    :columns="searchTableColumns"
+                    :dataSource="searchData"
+                    :pagination="{ pageSize: 5 }"
+                  >
+                    <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 :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
+              <a-card class="antd-pro-pages-dashboard-analysis-salesCard" :loading="loading" :bordered="false" title="指令类别占比" :style="{ height: '100%' }">
+                <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 :force-fit="true" :height="405" :data="pieData" :scale="pieScale">
+                      <v-tooltip :showTitle="false" dataKey="item*percent" />
+                      <v-axis />
+                      <!-- position="right" :offsetX="-140" -->
+                      <v-legend dataKey="item"/>
+                      <v-pie position="percent" color="item" :vStyle="pieStyle" />
+                      <v-coord type="theta" :radius="0.75" :innerRadius="0.6" />
+                    </v-chart>
+                  </div>
+                </div>
+              </a-card>
+            </a-col>
+          </a-row>
+        </div>
+      </div>
+    </a-page-header>
+  </a-drawer>
+</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 { post } from '@vue2-client/services/api/restTools'
+import { WebmeterAnalysisViewApi } from '@vue2-client/services/api/WebmeterAnalysisViewApi'
+
+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: {
+    selectOrgName: {
+      type: String,
+      required: true
+    },
+    webmeterUrl: {
+      type: String,
+      required: true
+    },
+    systemVersion: {
+      type: String,
+      required: true
+    },
+    dataSource: {
+      type: String,
+      required: true
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    onClose () {
+      this.$emit('update:visible', false)
+    },
+    loadInstructSumCount () {
+      this.instructSumLoadState = 'loading'
+      return post(WebmeterAnalysisViewApi.instructSumCount, {
+        webmeterUrl: this.webmeterUrl,
+        systemVersion: this.systemVersion,
+        dataSource: this.dataSource
+      }).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, {
+        webmeterUrl: this.webmeterUrl,
+        systemVersion: this.systemVersion,
+        dataSource: this.dataSource
+      }).then(res => {
+        // 加载近一周抄表数图表
+        post(WebmeterAnalysisViewApi.meteReadDataByWeek, {
+          webmeterUrl: this.webmeterUrl,
+          systemVersion: this.systemVersion,
+          dataSource: this.dataSource
+        }).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, {
+        webmeterUrl: this.webmeterUrl,
+        systemVersion: this.systemVersion,
+        dataSource: this.dataSource
+      }).then(res => {
+        // 加载近一周开户数图表
+        post(WebmeterAnalysisViewApi.usingMeterDataByWeek, {
+          webmeterUrl: this.webmeterUrl,
+          systemVersion: this.systemVersion,
+          dataSource: this.dataSource
+        }).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, {
+        webmeterUrl: this.webmeterUrl,
+        systemVersion: this.systemVersion,
+        dataSource: this.dataSource
+      }).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({
+          webmeterUrl: this.webmeterUrl,
+          systemVersion: this.systemVersion,
+          dataSource: this.dataSource
+        })
+      }).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'
+      })
+    }
+  },
+  watch: {
+    'visible' (val) {
+      if (val) {
+        // 加载指令数统计
+        this.loadInstructSumCount()
+        // 加载抄表量统计
+        this.loadMetereadSumCount()
+        // 加载在用表具量统计
+        this.loadUsingMeterSumCount()
+        // 加载指令成功率统计
+        this.loadInstructRateOfSuccess()
+        // 加载g2图表
+        this.loadGasView()
+      }
+    }
+  }
+}
+</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>