vue2-client 0.1.1 → 1.2.0

package/src/{components → base-client/components/iot}/MeterDetailsView/part/MeterDetailsCount.vue

@@ -1,381 +1,335 @@
-<template>
-  <div>
-    <a-row :gutter="24">
-      <a-col :md="12" :sm="24">
-        <a-card
-          title="日用气量分析"
-          style="margin-bottom: 24px"
-          :bordered="false"
-          :body-style="{ padding: 0 }">
-          <div style="padding:30px 0 0 30px;">
-            <a-skeleton v-show="radarLoading" active />
-            <div style="height: 382px" id="container" v-show="!radarLoading"/>
-          </div>
-        </a-card>
-      </a-col>
-      <a-col :md="12" :sm="24">
-        <a-card
-          title="日用气金额分析"
-          style="margin-bottom: 24px"
-          :bordered="false"
-          :body-style="{ padding: 0 }">
-          <div style="padding:30px 0 0 30px;">
-            <a-skeleton v-show="radarLoading2" active />
-            <div style="height: 382px" id="containerUseMoney" v-show="!radarLoading2"/>
-          </div>
-        </a-card>
-      </a-col>
-      <a-col :md="12" :sm="24">
-        <a-card
-          title="累计用气量分析"
-          style="margin-bottom: 24px"
-          :bordered="false"
-          :body-style="{ padding: 0 }">
-          <div style="padding:30px 0 0 30px;">
-            <a-skeleton v-show="radarLoading3" active />
-            <div style="height: 382px" id="container2" v-show="!radarLoading3"/>
-          </div>
-        </a-card>
-      </a-col>
-      <a-col :md="12" :sm="24">
-        <a-card
-          title="剩余余额分析"
-          style="margin-bottom: 24px"
-          :bordered="false"
-          :body-style="{ padding: 0 }">
-          <div style="padding:30px 0 0 30px;">
-            <a-skeleton v-show="radarLoading4" active />
-            <div style="height: 382px" id="container3" v-show="!radarLoading4"/>
-          </div>
-        </a-card>
-      </a-col>
-      <a-col :md="12" :sm="24">
-        <a-card
-          title="电压情况分析"
-          style="margin-bottom: 24px"
-          :bordered="false"
-          :body-style="{ padding: 0 }">
-          <div style="padding:30px 0 0 30px;">
-            <a-skeleton v-show="radarLoading5" active />
-            <div style="height: 382px" id="container4" v-show="!radarLoading5"/>
-          </div>
-        </a-card>
-      </a-col>
-      <a-col :md="12" :sm="24">
-        <a-card
-          title="信号强度情况分析"
-          style="margin-bottom: 24px"
-          :bordered="false"
-          :body-style="{ padding: 0 }">
-          <div style="padding:30px 0 0 30px;">
-            <a-skeleton v-show="radarLoading6" active />
-            <div style="height: 370px" id="container5" v-show="!radarLoading6"/>
-          </div>
-        </a-card>
-      </a-col>
-    </a-row>
-  </div>
-</template>
-<script>
-  import { Area, Column, Line } from '@antv/g2plot'
-  import { Radar, STable } from '@/components'
-  import ARow from 'ant-design-vue/es/grid/Row'
-  import ACol from 'ant-design-vue/es/grid/Col'
-  import { businessApi } from '@/vue2-client/api/business'
-
-  export default {
-    name: 'MeterDetailsCount',
-    components: {
-      ACol,
-      ARow,
-      Radar,
-      STable
-    },
-    props: {
-      userid: {
-        type: String,
-        required: true
-      }
-    },
-    data () {
-      return {
-        radarLoading: true,
-        radarLoading2: true,
-        radarLoading3: true,
-        radarLoading4: true,
-        radarLoading5: true,
-        radarLoading6: true
-      }
-    },
-    mounted () {
-      this.loadGasView()
-    },
-    methods: {
-      loadGasView () {
-        const _this = this
-        fetch(businessApi.meterManageCount, {
-          method: 'POST',
-          body: JSON.stringify({
-            id: this.userid
-          })
-        })
-          .then((res) => res.json())
-          .then((data) => {
-            const area = new Area('container', {
-              data,
-              padding: 'auto',
-              xField: 'date',
-              yField: 'scales',
-              point: {
-                size: 5,
-                shape: 'diamond',
-                style: {
-                  fill: 'white',
-                  stroke: '#2593fc',
-                  lineWidth: 2
-                }
-              },
-              areaStyle: () => {
-                return {
-                  fill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff'
-                }
-              },
-              slider: {
-                start: 0,
-                end: 1
-              },
-              smooth: true,
-              tooltip: {
-                fields: ['date', 'scales'],
-                formatter: (datum) => {
-                  return { name: '用气量', value: datum.scales + '方' }
-                }
-              }
-            })
-            area.render()
-            _this.radarLoading = false
-            const areaUseMoney = new Area('containerUseMoney', {
-              data,
-              padding: 'auto',
-              xField: 'date',
-              yField: 'oughtfee',
-              point: {
-                size: 5,
-                shape: 'diamond',
-                style: {
-                  fill: 'white',
-                  stroke: '#2593fc',
-                  lineWidth: 2
-                }
-              },
-              areaStyle: () => {
-                return {
-                  fill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff'
-                }
-              },
-              slider: {
-                start: 0,
-                end: 1
-              },
-              smooth: true,
-              tooltip: {
-                fields: ['date', 'oughtfee'],
-                formatter: (datum) => {
-                  return { name: '用气金额', value: datum.oughtfee + '元' }
-                }
-              }
-            })
-            areaUseMoney.render()
-            _this.radarLoading2 = false
-            const column = new Column('container2', {
-              data,
-              padding: 'auto',
-              xField: 'date',
-              yField: 'used',
-              columnWidthRatio: 0.2,
-              areaStyle: () => {
-                return {
-                  fill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff'
-                }
-              },
-              slider: {
-                start: 0,
-                end: 1
-              },
-              smooth: true,
-              tooltip: {
-                fields: ['date', 'used'],
-                formatter: (datum) => {
-                  return { name: '累计用气量', value: datum.used + '方' }
-                }
-              }
-            })
-            column.render()
-            _this.radarLoading3 = false
-            const line = new Line('container3', {
-              data,
-              padding: 'auto',
-              xField: 'date',
-              yField: 'balance',
-              point: {
-                size: 5,
-                shape: 'diamond',
-                style: {
-                  fill: 'white',
-                  stroke: '#2593fc',
-                  lineWidth: 2
-                }
-              },
-              smooth: true,
-              tooltip: {
-                fields: ['date', 'balance'],
-                formatter: (datum) => {
-                  return { name: '剩余金额', value: datum.balance + '元' }
-                }
-              },
-              annotations: [
-                // 低于中位数颜色变化
-                {
-                  type: 'regionFilter',
-                  start: ['max', '0'],
-                  end: ['min', '-999999'],
-                  color: '#F4664A'
-                },
-                {
-                  type: 'text',
-                  position: ['min', '0'],
-                  content: '欠费线',
-                  offsetY: -4,
-                  style: {
-                    textBaseline: 'bottom'
-                  }
-                },
-                {
-                  type: 'line',
-                  start: ['min', '0'],
-                  end: ['max', '0'],
-                  style: {
-                    stroke: '#F4664A',
-                    lineDash: [2, 2]
-                  }
-                }
-              ]
-            })
-            line.render()
-            _this.radarLoading4 = false
-            const area2 = new Area('container4', {
-              data,
-              padding: 'auto',
-              xField: 'date',
-              yField: 'batterylevel',
-              point: {
-                size: 5,
-                shape: 'diamond',
-                style: {
-                  fill: 'white',
-                  stroke: '#2593fc',
-                  lineWidth: 2
-                }
-              },
-              areaStyle: () => {
-                return {
-                  fill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff'
-                }
-              },
-              slider: {
-                start: 0,
-                end: 1
-              },
-              smooth: true,
-              tooltip: {
-                fields: ['date', 'batterylevel'],
-                formatter: (datum) => {
-                  return { name: '电压', value: datum.batterylevel + 'V' }
-                }
-              }
-            })
-            area2.render()
-            _this.radarLoading5 = false
-            const area3 = new Area('container5', {
-              data,
-              padding: 'auto',
-              xField: 'date',
-              yField: 'signal',
-              point: {
-                size: 5,
-                shape: 'diamond',
-                style: {
-                  fill: 'white',
-                  stroke: '#2593fc',
-                  lineWidth: 2
-                }
-              },
-              areaStyle: () => {
-                return {
-                  fill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff'
-                }
-              },
-              slider: {
-                start: 0,
-                end: 1
-              },
-              smooth: true,
-              tooltip: {
-                fields: ['date', 'signal'],
-                formatter: (datum) => {
-                  return { name: '信号强度', value: datum.signal + 'dBm' }
-                }
-              }
-            })
-            area3.render()
-            _this.radarLoading6 = false
-          })
-      }
-    },
-    watch: {
-      'userid' (val) {
-        this.loadGasView()
-      }
-    }
-  }
-</script>
-
-<style lang='less' scoped>
-  .detail-layout {
-    margin-left: 44px
-  }
-  .text {
-    color: rgba(0, 0, 0, .45)
-  }
-
-  .heading {
-    color: rgba(0, 0, 0, .85);
-    font-size: 20px
-  }
-
-  .no-data {
-    color: rgba(0, 0, 0, .25);
-    text-align: center;
-    line-height: 64px;
-    font-size: 16px
-
-    /*i {*/
-    /*  font-size: 24px*/
-    /*  margin-right: 16px*/
-    /*  position: relative*/
-    /*  top: 3px*/
-    /*}*/
-  }
-
-  .mobile {
-    .detail-layout {
-      margin-left: unset
-    }
-    .text {
-
-    }
-    .status-list {
-      text-align: left
-    }
-  }
-</style>
+<template>
+  <div>
+    <a-row :gutter="24">
+      <a-col :md="12" :sm="24">
+        <a-card
+          hoverable
+          title="累计用气量"
+          style="margin-bottom: 24px"
+          :bordered="true">
+          <div>
+            <a-skeleton v-show="radarLoading3" active />
+            <div style="height: 200px" id="container2" v-show="!radarLoading3"/>
+          </div>
+        </a-card>
+      </a-col>
+      <a-col :md="6" :sm="24">
+        <a-card
+          hoverable
+          title="日用气量"
+          style="margin-bottom: 24px"
+          :bordered="true">
+          <div>
+            <a-skeleton v-show="radarLoading" active />
+            <div style="height: 200px" id="container" v-show="!radarLoading"/>
+          </div>
+        </a-card>
+      </a-col>
+      <a-col :md="6" :sm="24">
+        <a-card
+          hoverable
+          title="日用气金额"
+          style="margin-bottom: 24px"
+          :bordered="true">
+          <div>
+            <a-skeleton v-show="radarLoading2" active />
+            <div style="height: 200px" id="containerUseMoney" v-show="!radarLoading2"/>
+          </div>
+        </a-card>
+      </a-col>
+      <a-col :md="12" :sm="24">
+        <a-card
+          hoverable
+          title="剩余余额"
+          style="margin-bottom: 24px"
+          :bordered="true">
+          <div>
+            <a-skeleton v-show="radarLoading4" active />
+            <div style="height: 200px" id="container3" v-show="!radarLoading4"/>
+          </div>
+        </a-card>
+      </a-col>
+      <a-col :md="6" :sm="24">
+        <a-card
+          hoverable
+          title="电压情况"
+          style="margin-bottom: 24px"
+          :bordered="true">
+          <div>
+            <a-skeleton v-show="radarLoading5" active />
+            <div style="height: 200px" id="container4" v-show="!radarLoading5"/>
+          </div>
+        </a-card>
+      </a-col>
+      <a-col :md="6" :sm="24">
+        <a-card
+          hoverable
+          title="信号强度情况"
+          style="margin-bottom: 24px"
+          :bordered="true">
+          <div>
+            <a-skeleton v-show="radarLoading6" active />
+            <div style="height: 200px" id="container5" v-show="!radarLoading6"/>
+          </div>
+        </a-card>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+<script>
+  import { Area, Line } from '@antv/g2plot'
+  import ARow from 'ant-design-vue/es/grid/Row'
+  import ACol from 'ant-design-vue/es/grid/Col'
+  import { MeterDetailsViewApi } from '@vue2-client/services/api/MeterDetailsViewApi'
+
+  export default {
+    name: 'MeterDetailsCount',
+    components: {
+      ACol,
+      ARow
+    },
+    props: {
+      selectOrgName: {
+        type: String,
+        required: true
+      },
+      userid: {
+        type: String,
+        required: true
+      }
+    },
+    data () {
+      return {
+        radarLoading: true,
+        radarLoading2: true,
+        radarLoading3: true,
+        radarLoading4: true,
+        radarLoading5: true,
+        radarLoading6: true
+      }
+    },
+    mounted () {
+      this.loadGasView()
+    },
+    methods: {
+      loadGasView () {
+        const _this = this
+        fetch(MeterDetailsViewApi.getGasConsumptionData, {
+          method: 'POST',
+          body: JSON.stringify({
+            orgName: this.selectOrgName,
+            userId: this.userid
+          })
+        })
+          .then((res) => res.json())
+          .then((data) => {
+            const line = new Line('container', {
+              data,
+              padding: 'auto',
+              xField: 'date',
+              yField: 'scales',
+              smooth: true,
+              color: 'l(0) 0:#3ED474 1:#399EFC',
+              lineStyle: {
+                lineWidth: 5
+              },
+              tooltip: {
+                fields: ['date', 'scales'],
+                formatter: (datum) => {
+                  return { name: '用气量', value: datum.scales + '方' }
+                }
+              }
+            })
+            line.render()
+            _this.radarLoading = false
+            const areaUseMoney = new Line('containerUseMoney', {
+              data,
+              padding: 'auto',
+              xField: 'date',
+              yField: 'oughtfee',
+              smooth: true,
+              color: 'l(0) 0:#9EFCFF 1:#9E87FF',
+              lineStyle: {
+                lineWidth: 5
+              },
+              tooltip: {
+                fields: ['date', 'oughtfee'],
+                formatter: (datum) => {
+                  return { name: '用气金额', value: datum.oughtfee + '元' }
+                }
+              }
+            })
+            areaUseMoney.render()
+            _this.radarLoading2 = false
+            const column = new Area('container2', {
+              data,
+              padding: 'auto',
+              xField: 'date',
+              yField: 'used',
+              point: {
+                size: 5,
+                shape: 'diamond',
+                style: {
+                  fill: 'white',
+                  stroke: 'l(0) 0:#3ED474 1:#399EFC',
+                  lineWidth: 2
+                }
+              },
+              color: 'l(270) 0:#3ED474 1:#399EFC',
+              areaStyle: () => {
+                return {
+                  fill: 'l(270) 0:#3ED474 1:#399EFC'
+                }
+              },
+              smooth: true,
+              tooltip: {
+                fields: ['date', 'used'],
+                formatter: (datum) => {
+                  return { name: '累计用气量', value: datum.used + '方' }
+                }
+              }
+            })
+            column.render()
+            _this.radarLoading3 = false
+            const area2 = new Area('container3', {
+              data,
+              padding: 'auto',
+              xField: 'date',
+              yField: 'balance',
+              point: {
+                size: 5,
+                shape: 'diamond',
+                style: {
+                  fill: 'white',
+                  stroke: 'l(270) 0:#3ED474 1:#399EFC',
+                  lineWidth: 2
+                }
+              },
+              color: 'l(270) 0:#3ED474 1:#399EFC',
+              lineStyle: {
+                lineWidth: 5
+              },
+              smooth: true,
+              tooltip: {
+                fields: ['date', 'balance'],
+                formatter: (datum) => {
+                  return { name: '剩余金额', value: datum.balance + '元' }
+                }
+              },
+              annotations: [
+                // 低于中位数颜色变化
+                {
+                  type: 'regionFilter',
+                  start: ['max', '0'],
+                  end: ['min', '-999999']
+                },
+                {
+                  type: 'text',
+                  position: ['min', '0'],
+                  content: '欠费线',
+                  offsetY: -4,
+                  style: {
+                    textBaseline: 'bottom'
+                  }
+                },
+                {
+                  type: 'line',
+                  start: ['min', '0'],
+                  end: ['max', '0'],
+                  style: {
+                    stroke: 'l(0) 0:#FEB692 1:#EA5455',
+                    lineDash: [2, 2]
+                  }
+                }
+              ]
+            })
+            area2.render()
+            _this.radarLoading4 = false
+            const line2 = new Line('container4', {
+              data,
+              padding: 'auto',
+              xField: 'date',
+              yField: 'batterylevel',
+              color: 'l(0) 0:#3ED474 1:#399EFC',
+              lineStyle: {
+                lineWidth: 5
+              },
+              smooth: true,
+              tooltip: {
+                fields: ['date', 'batterylevel'],
+                formatter: (datum) => {
+                  return { name: '电压', value: datum.batterylevel + 'V' }
+                }
+              }
+            })
+            line2.render()
+            _this.radarLoading5 = false
+            const line3 = new Line('container5', {
+              data,
+              padding: 'auto',
+              xField: 'date',
+              yField: 'signal',
+              color: 'l(0) 0:#9EFCFF 1:#9E87FF',
+              lineStyle: {
+                lineWidth: 5
+              },
+              smooth: true,
+              tooltip: {
+                fields: ['date', 'signal'],
+                formatter: (datum) => {
+                  return { name: '信号强度', value: datum.signal + 'dBm' }
+                }
+              }
+            })
+            line3.render()
+            _this.radarLoading6 = false
+          })
+      }
+    },
+    watch: {
+      'userid' () {
+        this.loadGasView()
+      }
+    }
+  }
+</script>
+
+<style lang='less' scoped>
+  .detail-layout {
+    margin-left: 44px
+  }
+  .text {
+    color: rgba(0, 0, 0, .45)
+  }
+
+  .heading {
+    color: rgba(0, 0, 0, .85);
+    font-size: 20px
+  }
+
+  .no-data {
+    color: rgba(0, 0, 0, .25);
+    text-align: center;
+    line-height: 64px;
+    font-size: 16px
+
+    /*i {*/
+    /*  font-size: 24px*/
+    /*  margin-right: 16px*/
+    /*  position: relative*/
+    /*  top: 3px*/
+    /*}*/
+  }
+
+  .mobile {
+    .detail-layout {
+      margin-left: unset
+    }
+    .text {
+
+    }
+    .status-list {
+      text-align: left
+    }
+  }
+</style>