vue2-client 1.2.86 → 1.2.90

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

@@ -6,10 +6,10 @@
           <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-icon type="redo"/>
               </a-tooltip>
               <a-tooltip slot="action" title="生成的所有指令总数">
-                <a-icon type="info-circle-o" />
+                <a-icon type="info-circle-o"/>
               </a-tooltip>
               <div>
                 <trend :flag="instructYoW >= 0 ? 'up' : 'down'" style="margin-right: 16px;">
@@ -29,13 +29,13 @@
           <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-icon type="redo"/>
               </a-tooltip>
               <a-tooltip slot="action" title="生成的所有抄表(meteread)总数">
-                <a-icon type="info-circle-o" />
+                <a-icon type="info-circle-o"/>
               </a-tooltip>
               <div>
-                <mini-area :dataSource="metereadSumDataByWeek" :scale="metereadSumByWeekScale" />
+                <mini-area :dataSource="metereadSumDataByWeek" :scale="metereadSumByWeekScale"/>
               </div>
               <template slot="footer">昨日新增 <span> {{ metereadYesAdd | NumberFormat }}</span></template>
             </chart-card>
@@ -45,13 +45,13 @@
           <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-icon type="redo"/>
               </a-tooltip>
               <a-tooltip slot="action" title="开户成功的物联网表总数">
-                <a-icon type="info-circle-o" />
+                <a-icon type="info-circle-o"/>
               </a-tooltip>
               <div>
-                <mini-bar :dataSource="usingMeterSumDataByWeek" :scale="usingMeterSumByWeekScale" />
+                <mini-bar :dataSource="usingMeterSumDataByWeek" :scale="usingMeterSumByWeekScale"/>
               </div>
               <template slot="footer">昨日新增 <span>{{ usingMeterYesAdd | NumberFormat }}</span></template>
             </chart-card>
@@ -61,13 +61,17 @@
           <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-icon type="redo"/>
               </a-tooltip>
               <a-tooltip slot="action" title="执行成功和已发送状态的指令占所有指令的比例">
-                <a-icon type="info-circle-o" />
+                <a-icon type="info-circle-o"/>
               </a-tooltip>
               <div>
-                <mini-progress :color="instructRateOfColor" :percentage="instructRateOfSuccessValue" :target="90" height="8px" />
+                <mini-progress
+                  :color="instructRateOfColor"
+                  :percentage="instructRateOfSuccessValue"
+                  :target="90"
+                  height="8px"/>
               </div>
               <template slot="footer">
                 <trend :flag="instructRateOfSuccessYoW >= 0 ? 'up' : 'down'" style="margin-right: 16px;">
@@ -88,7 +92,12 @@
 
       <a-card :body-style="{padding: '0'}" :bordered="false">
         <div class="salesCard">
-          <a-tabs :activeKey="tabActiveKey" :default-active-key="tabActiveKey" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}" size="large" @change="handleTabChange">
+          <a-tabs
+            :activeKey="tabActiveKey"
+            :default-active-key="tabActiveKey"
+            :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}"
+            size="large"
+            @change="handleTabChange">
             <div slot="tabBarExtraContent" class="extra-wrapper">
               <div class="extra-item">
                 <a-radio-group v-model="countMode" button-style="solid" @change="toggleCountMode">
@@ -98,19 +107,19 @@
                   <a-radio-button value="year">近一年</a-radio-button>
                 </a-radio-group>
               </div>
-              <a-range-picker :style="{width: '256px'}" />
+              <a-range-picker :style="{width: '256px'}"/>
             </div>
             <a-tab-pane key="1" tab="抄表情况分析">
               <a-row :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
                 <x-card :loadState="radarLoadState" :retry="getHandPlanCountByMeterBrand">
-                  <div id="container" style="padding: 0 0 0 20px;height: 370px" />
+                  <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="销售额趋势" />
+                  <bar :data="barData2" title="销售额趋势"/>
                 </a-col>
                 <a-col :lg="12" :md="12" :sm="24" :xl="8" :xs="24">
                   <rank-list :list="rankList" title="门店销售排行榜"/>
@@ -127,7 +136,7 @@
             <x-card :bordered="false" :loadState="useGasLoadState" :retry="loadUseGasData" title="用气情况排行">
               <a-dropdown slot="extra" :trigger="['click']" placement="bottomLeft">
                 <a class="ant-dropdown-link" href="#">
-                  <a-icon type="ellipsis" />
+                  <a-icon type="ellipsis"/>
                 </a>
                 <a-menu slot="overlay">
                   <a-menu-item>
@@ -140,40 +149,53 @@
               </a-dropdown>
               <a-row :gutter="68">
                 <a-col :sm="12" :style="{ marginBottom: ' 24px'}" :xs="24">
-                  <number-info :status="useGasSubValue.status" :sub-total="useGasSubValue.subValue" :total="todayUseGasTotalValue">
+                  <number-info
+                    :status="useGasSubValue.status"
+                    :sub-total="useGasSubValue.subValue"
+                    :total="todayUseGasTotalValue">
                     <span slot="subtitle">
                       <span>当天总用气量</span>
                       <a-tooltip slot="action" title="本日所有物联网表用户总用气量">
-                        <a-icon :style="{ marginLeft: '8px' }" type="info-circle-o" />
+                        <a-icon :style="{ marginLeft: '8px' }" type="info-circle-o"/>
                       </a-tooltip>
                     </span>
                   </number-info>
                   <!-- miniChart -->
                   <div>
-                    <mini-smooth-area :dataSource="useGasWeekData" :scale="useGasWeekDataScale" :style="{ height: '45px' }" />
+                    <mini-smooth-area
+                      :dataSource="useGasWeekData"
+                      :scale="useGasWeekDataScale"
+                      :style="{ height: '45px' }"/>
                   </div>
                 </a-col>
                 <a-col :sm="12" :style="{ marginBottom: ' 24px'}" :xs="24">
-                  <number-info :status="handPlanUserSubValue.status" :sub-total="handPlanUserSubValue.subValue" :total="todayHandPlanUserCount">
+                  <number-info
+                    :status="handPlanUserSubValue.status"
+                    :sub-total="handPlanUserSubValue.subValue"
+                    :total="todayHandPlanUserCount">
                     <span slot="subtitle">
                       <span>当天总抄表用户数</span>
                       <a-tooltip slot="action" title="当天总抄表用户数">
-                        <a-icon :style="{ marginLeft: '8px' }" type="info-circle-o" />
+                        <a-icon :style="{ marginLeft: '8px' }" type="info-circle-o"/>
                       </a-tooltip>
                     </span>
                   </number-info>
                   <!-- miniChart -->
                   <div>
-                    <mini-smooth-area :dataSource="handPlanUserData" :scale="handPlanUserDataScale" :style="{ height: '45px' }" />
+                    <mini-smooth-area
+                      :dataSource="handPlanUserData"
+                      :scale="handPlanUserDataScale"
+                      :style="{ height: '45px' }"/>
                   </div>
                 </a-col>
               </a-row>
               <div class="ant-table-wrapper">
                 <a-table
+                  :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                   :columns="searchTableColumns"
                   :dataSource="gasConsumptionRanking"
                   :pagination="{ pageSize: 5 }"
-                  row-key="index"
+                  row-key="f_userinfo_id"
                   size="small"
                 >
                   <span slot="range" slot-scope="text, record">
@@ -185,32 +207,40 @@
               </div>
             </x-card>
           </a-col>
-          <a-col :lg="24" :md="24" :sm="24" :xl="12" :xs="24">
-            <a-card :bordered="false" :loading="false" :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-col
+            :lg="24"
+            :md="24"
+            :sm="24"
+            :xl="12"
+            :xs="24"
+            style="background-color:#fff">
+            <a-tabs
+              :activeKey="PieActiveKey"
+              tab-position="top"
+              :default-active-key="PieActiveKey"
+              :forceRender="true"
+              @change="handlePieTabChange">
+              <div slot="tabBarExtraContent" class="extra-wrapper">
+                <div class="extra-item">
+                  <a-radio-group v-model="countPieMode" button-style="solid" @change="loadPieMode">
+                    <a-radio-button value="now">本日</a-radio-button>
+                    <a-radio-button value="week">本周</a-radio-button>
+                    <a-radio-button value="month">本月</a-radio-button>
+                    <a-radio-button value="year">近一年</a-radio-button>
                   </a-radio-group>
                 </div>
               </div>
-              <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-tab-pane key="properties" tab="用气量用气性质占比">
+                <x-card :loadState="radarLoadState_gasproperties" :retry="loadPieMode">
+                  <div id="container_gasproperties"></div>
+                </x-card>
+              </a-tab-pane>
+              <a-tab-pane key="gasinuser" tab="用户用气量占比" :disabled="selectedRowKeys.length === 0 ">
+                <x-card :loadState="radarLoadState_gasInUser" :retry="loadGasInUser">
+                  <div id="container_gasInUser"></div>
+                </x-card>
+              </a-tab-pane>
+            </a-tabs>
           </a-col>
         </a-row>
       </div>
@@ -232,10 +262,22 @@ import {
   MiniSmoothArea
 } from '@vue2-client/components'
 import { formatDate } from '@vue2-client/utils/util'
-import { Line } from '@antv/g2plot'
+import { Line, Pie, measureTextWidth } from '@antv/g2plot'
 import { mapState } from 'vuex'
 import { WebmeterAnalysisViewApi, post } from '@vue2-client/services/api'
 
+function renderStatistic (containerWidth, text, style) {
+  const { width: textWidth, height: textHeight } = measureTextWidth(text, style)
+  const R = containerWidth / 2
+  // r^2 = (w / 2)^2 + (h - offsetY)^2
+  let scale = 1
+  if (containerWidth < textWidth) {
+    scale = Math.min(Math.sqrt(Math.abs(Math.pow(R, 2) / (Math.pow(textWidth / 2, 2) + Math.pow(textHeight, 2)))), 1)
+  }
+  const textStyleStr = `width:${containerWidth}px;`
+  return `<div style="${textStyleStr};font-size:${scale}em;line-height:${scale < 1 ? 1 : 'inherit'};">${text}</div>`
+}
+
 const barData = []
 const barData2 = []
 for (let i = 0; i < 12; i += 1) {
@@ -309,32 +351,6 @@ for (let i = 0; i < 5; i += 1) {
   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: {
@@ -421,13 +437,25 @@ export default {
 
       // 统计模式
       countMode: 'now',
+      // 圆饼图
+      countPieMode: 'now',
       // 统计类型
       tabActiveKey: '1',
+      // 统计类型
+      PieActiveKey: 'properties',
       // >> 表具上报情况统计
       // 上报统计图表
       uploadCountPlot: undefined,
+      // 用气性质分析报表
+      gasPropertiesPlot: undefined,
+      // 用户用气占比
+      gasInUserPlot: undefined,
       // 抄表情况分析Loading
       radarLoadState: 'loading',
+      // 用气性质统计分析Loading
+      radarLoadState_gasproperties: 'loading',
+      // 用户在用气量中占比
+      radarLoadState_gasInUser: 'loading',
       // >> 用气情况排行统计
       // 用气情况排行统计Loading
       useGasLoadState: 'loading',
@@ -471,18 +499,10 @@ export default {
       searchUserData,
       searchTableColumns,
       searchData,
-
       barData,
       barData2,
-
-      //
-      pieScale,
-      pieData,
-      sourceData,
-      pieStyle: {
-        stroke: '#fff',
-        lineWidth: 1
-      }
+      // 左下列表选择框
+      selectedRowKeys: [],
     }
   },
   mounted () {
@@ -498,6 +518,8 @@ export default {
     this.getHandPlanCountByMeterBrand()
     // 加载用气量统计
     this.loadUseGasData()
+    // 加载按用气性质统计用气量
+    this.loadGasByGasProperties()
   },
   computed: {
     ...mapState('setting', ['isMobile']),
@@ -519,6 +541,164 @@ export default {
     },
   },
   methods: {
+    onSelectChange (selectedRowKeys) {
+      this.selectedRowKeys = selectedRowKeys
+      if (selectedRowKeys.length > 0) {
+        if (this.PieActiveKey === 'properties') {
+          this.PieActiveKey = 'gasinuser'
+        }
+        this.loadGasInUser()
+      } else {
+        this.PieActiveKey = 'properties'
+        this.loadGasByGasProperties()
+      }
+    },
+    loadPieMode () {
+      if (this.PieActiveKey === 'properties') {
+        this.loadGasByGasProperties()
+      } else {
+        this.loadGasInUser()
+      }
+    },
+    // 加载按用气性质统计用气量
+    loadGasByGasProperties () {
+      this.radarLoadState_gasproperties = 'loading'
+      fetch(WebmeterAnalysisViewApi.GasByGasProperties, {
+        method: 'POST',
+        body: JSON.stringify({
+          type: this.countPieMode
+        })
+      }).then((res) => res.json())
+        .then((data) => {
+          const piePlot = {
+            appendPadding: 10,
+            data,
+            angleField: 'value',
+            colorField: 'type',
+            radius: 1,
+            innerRadius: 0.64,
+            meta: {
+              value: {
+                formatter: (v) => `${v} m³`,
+              },
+            },
+            label: {
+              type: 'inner',
+              offset: '-50%',
+              style: {
+                textAlign: 'center',
+              },
+              autoRotate: false,
+              content: '{value}',
+            },
+            statistic: {
+              title: {
+                offsetY: -4,
+                customHtml: (container, view, datum) => {
+                  const { width, height } = container.getBoundingClientRect()
+                  const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2))
+                  const text = datum ? datum.type : '总计'
+                  return renderStatistic(d, text, { fontSize: 28 })
+                },
+              },
+              content: {
+                offsetY: 4,
+                style: {
+                  fontSize: '32px',
+                },
+                customHtml: (container, view, datum, data) => {
+                  const { width } = container.getBoundingClientRect()
+                  const text = datum ? `${datum.value}m³` : `${data.reduce((r, d) => r + d.value, 0)}m³`
+                  return renderStatistic(width, text, { fontSize: 32 })
+                },
+              },
+            },
+            // 添加 中心统计文本 交互
+            interactions: [{ type: 'element-selected' }, { type: 'element-active' }, { type: 'pie-statistic-active' }],
+          }
+          if (this.gasPropertiesPlot) {
+            this.gasPropertiesPlot.update(piePlot)
+          } else {
+            this.gasPropertiesPlot = new Pie('container_gasproperties', piePlot)
+            this.gasPropertiesPlot.render()
+          }
+          this.radarLoadState_gasproperties = 'success'
+        })
+        .catch((ex) => {
+          console.error(ex)
+          this.radarLoadState_gasproperties = 'error'
+        })
+    },
+    // 加载按用气性质统计用气量
+    loadGasInUser () {
+      this.radarLoadState_gasInUser = 'loading'
+      fetch(WebmeterAnalysisViewApi.GasInUser, {
+        method: 'POST',
+        body: JSON.stringify({
+          type: this.countPieMode,
+          ids: this.selectedRowKeys.join(',')
+        })
+      }).then((res) => res.json())
+        .then((data) => {
+          const piePlot = {
+            appendPadding: 10,
+            data,
+            angleField: 'value',
+            colorField: 'name',
+            radius: 1,
+            innerRadius: 0.64,
+            meta: {
+              value: {
+                formatter: (v) => `${v} m³`,
+              },
+            },
+            label: {
+              type: 'inner',
+              offset: '-50%',
+              style: {
+                textAlign: 'center',
+              },
+              autoRotate: false,
+              content: '{value}',
+            },
+            statistic: {
+              title: {
+                offsetY: -4,
+                customHtml: (container, view, datum) => {
+                  const { width, height } = container.getBoundingClientRect()
+                  const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2))
+                  const text = datum ? datum.name : '总计'
+                  return renderStatistic(d, text, { fontSize: 24 })
+                },
+              },
+              content: {
+                offsetY: 4,
+                style: {
+                  fontSize: '32px',
+                },
+                customHtml: (container, view, datum, data) => {
+                  const { width } = container.getBoundingClientRect()
+                  const text = datum ? `${datum.value}m³` : `${data.reduce((r, d) => r + d.value, 0)}m³`
+                  return renderStatistic(width, text, { fontSize: 32 })
+                },
+              },
+            },
+            // 添加 中心统计文本 交互
+            interactions: [{ type: 'element-selected' }, { type: 'element-active' }, { type: 'pie-statistic-active' }],
+          }
+          if (this.gasInUserPlot) {
+            this.gasInUserPlot.update(piePlot)
+          } else {
+            this.gasInUserPlot = new Pie('container_gasInUser', piePlot)
+            this.gasInUserPlot.render()
+          }
+          this.radarLoadState_gasInUser = 'success'
+        })
+        .catch((ex) => {
+          console.error(ex)
+          this.radarLoadState_gasInUser = 'error'
+        })
+    },
     /**
      * 加载指令总数统计
      */
@@ -628,6 +808,14 @@ export default {
       this.tabActiveKey = key + ''
       this.updateDataByKey()
     },
+    /**
+     * 右下圆饼图切换
+     */
+    handlePieTabChange (key) {
+      this.PieActiveKey = key + ''
+      this.loadPieMode()
+      // this.updateDataByKey()
+    },
     /**
      * 根据模式更新数据
      */
@@ -748,6 +936,7 @@ export default {
 
 .antd-pro-pages-dashboard-analysis-salesCard {
   height: calc(100% - 24px);
+
   /deep/ .ant-card-head {
     position: relative;
   }
@@ -756,12 +945,13 @@ export default {
 .dashboard-analysis-iconGroup {
   i {
     margin-left: 16px;
-    color: rgba(0,0,0,.45);
+    color: rgba(0, 0, 0, .45);
     cursor: pointer;
     transition: color .32s;
     color: black;
   }
 }
+
 .analysis-salesTypeRadio {
   position: absolute;
   right: 54px;