vue2-client 0.1.1 → 1.0.0

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

@@ -0,0 +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>