manage-client 3.1.43 → 3.1.47

package/src/components/webmeter/newwebmeter/UserGasEchartsList.vue

@@ -1,218 +1,283 @@
-<template lang="html">
-  <div class="basic-main">
-    <div style="height: 40px;width: 100%;" v-show="echarts">
-      <div style="display: inline-block;">
-        <button @click="$parent.showEcharts()" class="button_clear button_spacing">隐藏图表</button>
-      </div>
-    </div>
-    <div id="charts" style=" height: 98%;width: 98%;padding: 1% 1%;">
-      <div id="userhandplan" style=" height: 600px;width: 1000px;padding: 1% 1%;min-width:98%;min-height: 98%"></div>
-    </div>
-  </div>
-</template>
-
-<script>
-  import * as Util from '../../../Util'
-  import co from 'co'
-  import echarts from 'echarts'
-  import { HttpResetClass } from 'vue-client'
-
-  let getData = function * (self) {
-    let load = new HttpResetClass()
-    load.load('POST','rs/sql/webmeter_getNewHandChanceList',
-      {data:{condition: self.condition, startDate: self.startdate, endDate: self.enddate}},
-      {resolveMsg: null, rejectMsg: null}).then((res) => {
-        // every_time,f_bv1,f_bv2,f_bv3,f_gas
-        let every_time = []
-        let f_bv1 = []
-        let f_gas = []
-        let f_gas1 = []
-        for (var i = 0; i < res.data.length; i++) {
-          every_time[i] = res.data[i].f_insert_date
-          f_bv1[i] = res.data[i].f_bv1
-          f_gas[i] = res.data[i].f_gas
-          f_gas1[i] = res.data[i].f_gas1
-        }
-        console.log(self.echarts)
-        self.set(every_time, f_bv1, f_gas, f_gas1)
-      })
-  }
-  export default {
-    props: {
-      echarts: {
-        type: Boolean,
-        default:false
-      },
-      startdate: {
-        type: String,
-        default: Util.toStandardDateString()
-      },
-      enddate: {
-        type: String,
-        default: Util.toStandardDateString()
-      },
-      condition: {
-        type: String,
-        default: '1=1'
-      }
-    },
-    data () {
-      return {
-        xc: ''
-      }
-    },
-    ready(){
-      console.log(this.echarts)
-    },
-    methods: {
-      // every_time: 日期  f_bv1: 抄表成功率   f_gas: 日用气量
-      set (every_time,f_bv1,f_gas,f_gas1) {
-
-        this.xc = echarts.init(document.getElementById('userhandplan'))
-        this.xc.setOption({
-          'title': {
-            'text': '抄表率分析',
-            'left': 'center',
-            'y': '10',
-            'textStyle': {
-              'color': '#696969',
-              fontSize: 20
-            }
-          },
-          'backgroundColor': '#F8F8FF',
-          'color': '#384757',
-          'tooltip': {
-            'trigger': 'axis',
-            'extraCssText': 'height: auto;'
-          },
-          'legend': {
-            'data': [
-              {
-                'name': '日均用气量(m³)',
-                'icon': 'circle',
-                'textStyle': {
-                  'color': '#7b5541',
-                  fontSize: 12
-                }
-              },
-              {
-                'name': '抄表成功率%',
-                'icon': 'circle',
-                'textStyle': {
-                  'color': '#ffaa00',
-                  fontSize: 12
-                }
-              }
-            ],
-            'top': '10%',
-            'textStyle': {
-              'color': '#fff'
-            }
-          },
-          'xAxis': [
-            {
-              'type': 'category',
-              'data': every_time,
-              'axisPointer': {
-                'type': 'shadow'
-              },
-              'axisLabel': {
-                'show': true,
-                'textStyle': {
-                  'color': '#7d838b',
-                  fontSize: 10
-                }
-              }
-            }
-          ],
-          'yAxis': [
-            {
-              'type': 'value',
-              'name': '用气量(m³)',
-              nameTextStyle: {
-                fontSize: 10
-              },
-              'show': true,
-              'axisLabel': {
-                'show': true,
-                'textStyle': {
-                  'color': '#7d8000',
-                  fontSize: 10
-                }
-              }
-            },
-            {
-              'type': 'value',
-              'name': '完成率(%)',
-              nameTextStyle: {
-                fontSize: 10
-              },
-              'show': true,
-              'axisLabel': {
-                'show': true,
-                'textStyle': {
-                  'color': '#7d838b',
-                  fontSize: 10
-                }
-              }
-            }
-          ],
-          'grid': {
-            'top': '20%'
-          },
-          'series': [
-            {
-              'name': '日均用气量(m³)',
-              nameTextStyle: {
-                fontSize: 10
-              },
-              'type': 'bar',
-              'data': f_gas1,
-              'barWidth': 'auto',
-              markPoint: {
-                data: [
-                  {type: 'max', name: '最大值'},
-                  {type: 'min', name: '最小值'}
-                ]
-              },
-              markLine: {
-                data: [
-                  {type: 'average', name: '平均值'}
-                ]
-              },
-              'itemStyle': {
-                'normal': {
-                  'color': '#7b5541'
-                }
-              },
-              'barGap': '0'
-            },
-            {
-              'name': '抄表成功率%',
-              'type': 'line',
-              'yAxisIndex': 1,
-              'data': f_bv1,
-              'itemStyle': {
-                'normal': {
-                  'color': '#ffaa00',
-                  fontSize: 10
-                }
-              },
-              'smooth': true
-            }
-          ]
-        })
-      },
-      searchdata () {
-        let getGen = getData(this)
-        co(getGen)
-      }
-    },
-    watch: {
-      'echarts' () {
-        console.log(this.echarts)
-        this.searchdata()
-      }
-    }
-  }
-</script>
+<template lang="html">
+  <div class="basic-main"  style="height: 100%;">
+    <div style="height: 10%;width: 100%;" v-show="echarts">
+      <div style="display: inline-block;">
+        <button @click="$parent.showEcharts()" class="button_clear button_spacing">隐藏图表</button>
+      </div>
+    </div>
+    <div style="height: 80%;width: 98%;">
+      <div id="userhandplan"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import * as Util from '../../../Util'
+  import co from 'co'
+  import echarts from 'echarts'
+  import { HttpResetClass } from 'vue-client'
+
+  let getData = function * (self) {
+    let load = new HttpResetClass()
+    load.load('POST','rs/sql/webmeter_getNewHandChanceList',
+      {data:{condition: self.condition, startDate: self.startdate, endDate: self.enddate}},
+      {resolveMsg: null, rejectMsg: null}).then((res) => {
+        // every_time,f_bv1,f_bv2,f_bv3,f_gas
+        let every_time = res.data.map(x => x.f_insert_date)
+        let f_bv1 = res.data.map(x => x.f_bv1)
+        // let f_gas = res.data.map(x => x.f_gas)
+        let f_gas1 = res.data.map(x => x.f_gas1)
+        let c = res.data.map(x => x.c)
+        let c1 = res.data.map(x => x.c1)
+        // for (var i = 0; i < res.data.length; i++) {
+        //   every_time[i] = res.data[i].f_insert_date
+        //   f_bv1[i] = res.data[i].f_bv1
+        //   f_gas[i] = res.data[i].f_gas
+        //   f_gas1[i] = res.data[i].f_gas1
+        // }
+        console.log(self.echarts)
+        self.set(every_time, f_bv1, f_gas1, c, c1)
+      })
+  }
+  export default {
+    props: {
+      echarts: {
+        type: Boolean,
+        default:false
+      },
+      startdate: {
+        type: String,
+        default: Util.toStandardDateString()
+      },
+      enddate: {
+        type: String,
+        default: Util.toStandardDateString()
+      },
+      condition: {
+        type: String,
+        default: '1=1'
+      }
+    },
+    data () {
+      return {
+        xc: ''
+      }
+    },
+    ready(){
+      console.log(this.echarts)
+    },
+    methods: {
+      // every_time: 日期  f_bv1: 抄表成功率   f_gas: 日用气量
+      set (every_time, f_bv1, f_gas1, c, c1) {
+
+        const statInfo = document.getElementById('userhandplan') // 获取图表元素
+        statInfo.style.width = window.innerWidth - 200 + "px";  //初始化echarts图表宽度
+        statInfo.style.height = window.innerHeight - 200 + "px";  //初始化echarts图表宽度
+        this.xc = this.$echarts.init(statInfo)
+        // 设置宽度自适应
+        window.addEventListener('resize', () => {
+          statInfo.style.width = window.innerWidth - 200 + "px";
+          statInfo.style.height = window.innerHeight - 200 + "px";
+          this.xc.resize();
+        })
+        this.xc.setOption({
+          'title': {
+            'text': '抄表率分析',
+            'left': 'center',
+            'y': '10',
+            'textStyle': {
+              'color': '#696969',
+              fontSize: 20
+            }
+          },
+
+          'tooltip': {
+            'trigger': 'axis',
+            'extraCssText': 'height: auto;'
+          },
+          'legend': {
+            'data': [
+              {
+                'name': '日均用气量(m³)',
+                'icon': 'circle',
+                'textStyle': {
+                  'color': '#7b5541',
+                  fontSize: 12
+                }
+              },
+              {
+                'name': '抄表成功户数',
+                'icon': 'circle',
+                'textStyle': {
+                  'color': '#45c1b6',
+                  fontSize: 12
+                }
+              },
+              {
+                'name': '再用户数',
+                'icon': 'circle',
+                'textStyle': {
+                  'color': '#8a9e64',
+                  fontSize: 12
+                }
+              },
+              {
+                'name': '抄表成功率%',
+                'icon': 'circle',
+                'textStyle': {
+                  'color': '#ffaa00',
+                  fontSize: 12
+                }
+              }
+            ],
+            'top': '10%',
+            'textStyle': {
+              'color': '#fff'
+            }
+          },
+          'xAxis': [
+            {
+              'type': 'category',
+              'data': every_time,
+              'axisPointer': {
+                'type': 'shadow'
+              },
+              'axisLabel': {
+                'show': true,
+                'textStyle': {
+                  'color': '#7d838b',
+                  fontSize: 10
+                }
+              }
+            }
+          ],
+          'yAxis': [
+            {
+              'type': 'value',
+              'name': '用气量(m³)',
+              nameTextStyle: {
+                fontSize: 10
+              },
+              'show': true,
+              'axisLabel': {
+                'show': true,
+                'textStyle': {
+                  'color': '#7d8000',
+                  fontSize: 10
+                }
+              }
+            },
+            {
+              'type': 'value',
+              'name': '完成率(%)',
+              nameTextStyle: {
+                fontSize: 10
+              },
+              'show': true,
+              'axisLabel': {
+                'show': true,
+                'textStyle': {
+                  'color': '#7d838b',
+                  fontSize: 10
+                }
+              }
+            }
+          ],
+          'grid': {
+            'top': '15%'
+          },
+          'series': [
+            {
+              'name': '日均用气量(m³)',
+              'type': 'line',
+              'yAxisIndex': 1,
+              'data': f_gas1,
+              'itemStyle': {
+                'normal': {
+                  'color': '#7b5541',
+                  fontSize: 10
+                }
+              },
+              'smooth': true
+            },
+            {
+              'name': '抄表成功户数',
+              nameTextStyle: {
+                fontSize: 10
+              },
+              'type': 'bar',
+              'data': c1,
+              'barWidth': 'auto',
+              markPoint: {
+                data: [
+                  {type: 'max', name: '最大值'},
+                  {type: 'min', name: '最小值'}
+                ]
+              },
+              markLine: {
+                data: [
+                  {type: 'average', name: '平均值'}
+                ]
+              },
+              'itemStyle': {
+                'normal': {
+                  'color': '#45c1b6'
+                }
+              },
+              'barGap': '0'
+            },
+            {
+              'name': '再用户数',
+              nameTextStyle: {
+                fontSize: 10
+              },
+              'type': 'bar',
+              'data': c,
+              'barWidth': 'auto',
+              markPoint: {
+                data: [
+                  {type: 'max', name: '最大值'},
+                  {type: 'min', name: '最小值'}
+                ]
+              },
+              markLine: {
+                data: [
+                  {type: 'average', name: '平均值'}
+                ]
+              },
+              'itemStyle': {
+                'normal': {
+                  'color': '#8a9e64'
+                }
+              },
+              'barGap': '0'
+            },
+            {
+              'name': '抄表成功率%',
+              'type': 'line',
+              'yAxisIndex': 1,
+              'data': f_bv1,
+              'itemStyle': {
+                'normal': {
+                  'color': '#ffaa00',
+                  fontSize: 10
+                }
+              },
+              'smooth': true
+            }
+          ]
+        })
+      },
+      searchdata () {
+        let getGen = getData(this)
+        co(getGen)
+      }
+    },
+    watch: {
+      'echarts' () {
+        console.log(this.echarts)
+        this.searchdata()
+      }
+    }
+  }
+</script>