manage-client 3.1.43 → 3.1.47

package/src/components/webmeter/DrillData/UserGasEcharts.vue

@@ -1,210 +1,220 @@
-<template lang="html">
-  <div class="basic-main">
-  <div class="row" style="height: 40px;width: 100%;" v-show="echarts">
-    <div class="col-sm-2" style="display: inline-block;">
-      <button @click="$parent.notShowEcharts()" class="button_clear button_spacing">隐藏图表</button>
-    </div>
-    <!--图显示模板-->
-    <div class="row col-sm-3 mystyle" style="display: inline-block;">
-      <label class="font_normal_body">图表统计项</label>
-      <v-select :options='$parent.getgroupname' :value.sync="groupname"
-                close-on-select
-                id="groupname"
-                placeholder='分组项'
-                v-model="groupname"
-                value-single="true"></v-select>
-    </div>
-  </div>
-  <div id="charts" style=" height: 98%;width: 98%;padding: 1% 1%;">
-    <div id="info" style=" height: 600px;width: 1000px;padding: 1% 1%;"></div>
-  </div>
-  </div>
-</template>
-
-<script>
-  import * as Util from '../../../Util'
-  import co from 'co'
-  import { HttpResetClass } from 'vue-client'
-
-  let getData = function * (self, condition) {
-    let load = new HttpResetClass()
-    load.load('POST', 'rs/sql/webmeter_getUserGasGroup',
-      {data: {condition: condition, groupname: self.groupname[0], startDate: self.startdate,
-          endDate: self.enddate}},
-      {resolveMsg: null, rejectMsg: null})
-      .then((res) => {
-        let arrparams = []
-        let gasdata1 = []
-        let gasdata2 = []
-        for (var i = 0; i < res.data.length; i++) {
-          arrparams[i] = res.data[i].f_type
-          gasdata1[i] = res.data[i].f_oughtamount1
-          gasdata2[i] = res.data[i].f_oughtamount2
-        }
-        self.set(arrparams, gasdata1, gasdata2)
-      })
-  }
-  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'
-      },
-      groupname: {
-        type: String,
-        default: 'year'
-      }
-    },
-    data () {
-      title: '业务类型'
-      return {
-        xc: ''
-      }
-    },
-    ready(){
-      console.log(this.echarts)
-    },
-    methods: {
-      set (arrparams, gasdata1, gasdata2) {
-        console.log('--------->>>>>>>>>>>>',arrparams,gasdata1,gasdata2)
-        console.log("ec:"+this.echarts)
-        let name = ''
-        if (this.groupname === 'year')
-        {
-          name = '年'
-        } else if (this.groupname === 'month'){
-          name = '月'
-        } else if (this.groupname === 'week'){
-          name = '周'
-        } else {
-          name = '日'
-        }
-        this.xc = this.$echarts.init(document.getElementById('info'))
-        // this.xc.resize({height: '100%',width: '100%'})
-        this.xc.setOption({
-          title: {
-            text: '用气' + name + '分析图',
-            left: 'center',
-            y: '10',
-            textStyle: {
-              color: '#000',
-              fontSize: 20
-            }
-          },
-          color: ['#61a0a8', '#2f4554'],
-          tooltip: {
-            trigger: 'axis'
-          },
-          grid:{
-            top:'20%',
-          },
-          legend: {
-            y: '50',
-            data: ['用气量(民用)(m³)', '用气量(非民用)(m³)']
-          },
-          toolbox: {
-            y: '50',
-            show: true,
-            right:'2%',
-            feature: {
-              mark: {show: true},
-              dataView: {show: true, readOnly: false},
-              magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
-              restore: {show: true},
-              saveAsImage: {show: true}
-            }
-          },
-          calculable: true,
-          xAxis: [
-          { name: '日期',
-            nameTextStyle: {
-              fontSize: 15
-            },
-            type: 'category',
-            data: arrparams
-          }
-        ],
-          yAxis : [
-          {
-            type : 'value',
-            name: '用气量(m³)',
-            nameTextStyle: {
-              fontSize: 15
-            },
-            axisLabel: {
-              show: true,
-              textStyle: {
-                fontSize: 15,
-                'color': '#7d8000'
-              }
-            }
-          }
-        ],
-        series : [
-          {
-            name: '用气量(民用)(m³)',
-            type: 'bar',
-            smooth: true,
-            itemStyle: {normal: {areaStyle: {type: 'default'}}},
-            data: gasdata1,
-            markPoint: {
-              data: [
-                {type: 'max', name: '最大值'},
-                {type: 'min', name: '最小值'}
-              ]
-            },
-            markLine: {
-              data: [
-                {type: 'average', name: '平均值'}
-              ]
-            }
-          },
-          {
-            name: '用气量(非民用)(m³)',
-            type: 'bar',
-            smooth: true,
-            itemStyle: {normal: {areaStyle: {type: 'default'}}},
-            data: gasdata2,
-            markPoint: {
-              data: [
-                {type: 'max', name: '最大值'},
-                {type: 'min', name: '最小值'}
-              ]
-            },
-            markLine: {
-              data: [
-                {type: 'average', name: '平均值'}
-              ]
-            }
-          }
-        ]
-        })
-      },
-      searchdata (condition) {
-        console.log("ec:"+this.echarts)
-        let getGen = getData(this, condition)
-        co(getGen)
-      }
-    },
-    watch: {
-      'echarts' (val) {
-        this.searchdata(this.condition)
-      },
-      'groupname' (val) {
-        this.searchdata(this.condition)
-      }
-    }
-  }
-</script>
+<template lang="html">
+  <div class="basic-main" style="height: 100%;">
+  <div class="row" style="height: 15%;width: 100%;" v-show="echarts">
+    <div class="col-sm-2" style="display: inline-block;">
+      <button @click="$parent.notShowEcharts()" class="button_clear button_spacing">隐藏图表</button>
+    </div>
+    <!--图显示模板-->
+    <div class="row col-sm-3 mystyle" style="display: inline-block;">
+      <label class="font_normal_body">图表统计项</label>
+      <v-select :options='$parent.getgroupname' :value.sync="groupname"
+                close-on-select
+                id="groupname"
+                placeholder='分组项'
+                v-model="groupname"
+                value-single="true"></v-select>
+    </div>
+  </div>
+  <div style="height: 80%;width: 98%;">
+    <div id="info"></div>
+  </div>
+  </div>
+</template>
+
+<script>
+  import * as Util from '../../../Util'
+  import co from 'co'
+  import { HttpResetClass } from 'vue-client'
+
+  let getData = function * (self, condition) {
+    let load = new HttpResetClass()
+    load.load('POST', 'rs/sql/webmeter_getUserGasGroup',
+      {data: {condition: condition, groupname: self.groupname[0], startDate: self.startdate,
+          endDate: self.enddate}},
+      {resolveMsg: null, rejectMsg: null})
+      .then((res) => {
+        let arrparams = []
+        let gasdata1 = []
+        let gasdata2 = []
+        for (var i = 0; i < res.data.length; i++) {
+          arrparams[i] = res.data[i].f_type
+          gasdata1[i] = res.data[i].f_oughtamount1
+          gasdata2[i] = res.data[i].f_oughtamount2
+        }
+        self.set(arrparams, gasdata1, gasdata2)
+      })
+  }
+  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'
+      },
+      groupname: {
+        type: String,
+        default: 'year'
+      }
+    },
+    data () {
+      title: '业务类型'
+      return {
+        xc: ''
+      }
+    },
+    ready(){
+      console.log(this.echarts)
+    },
+    methods: {
+      set (arrparams, gasdata1, gasdata2) {
+        console.log('--------->>>>>>>>>>>>',arrparams,gasdata1,gasdata2)
+        console.log("ec:"+this.echarts)
+        let name = ''
+        if (this.groupname === 'year')
+        {
+          name = '年'
+        } else if (this.groupname === 'month'){
+          name = '月'
+        } else if (this.groupname === 'week'){
+          name = '周'
+        } else {
+          name = '日'
+        }
+        const statInfo = document.getElementById('info') // 获取图表元素
+        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.resize({height: '100%',width: '100%'})
+        this.xc.setOption({
+          title: {
+            text: '用气' + name + '分析图',
+            left: 'center',
+            y: '10',
+            textStyle: {
+              color: '#000',
+              fontSize: 20
+            }
+          },
+          color: ['#61a0a8', '#2f4554'],
+          tooltip: {
+            trigger: 'axis',
+            extraCssText: 'width: auto;height: auto;'
+          },
+          grid:{
+            top:'20%',
+          },
+          legend: {
+            y: '50',
+            data: ['用气量(民用)(m³)', '用气量(非民用)(m³)']
+          },
+          toolbox: {
+            y: '50',
+            show: true,
+            right:'2%',
+            feature: {
+              mark: {show: true},
+              dataView: {show: true, readOnly: false},
+              magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
+              restore: {show: true},
+              saveAsImage: {show: true}
+            }
+          },
+          calculable: true,
+          xAxis: [
+          { name: '日期',
+            nameTextStyle: {
+              fontSize: 15
+            },
+            type: 'category',
+            data: arrparams
+          }
+        ],
+          yAxis : [
+          {
+            type : 'value',
+            name: '用气量(m³)',
+            nameTextStyle: {
+              fontSize: 15
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 15,
+                'color': '#7d8000'
+              }
+            }
+          }
+        ],
+        series : [
+          {
+            name: '用气量(民用)(m³)',
+            type: 'bar',
+            smooth: true,
+            itemStyle: {normal: {areaStyle: {type: 'default'}}},
+            data: gasdata1,
+            markPoint: {
+              data: [
+                {type: 'max', name: '最大值'},
+                {type: 'min', name: '最小值'}
+              ]
+            },
+            markLine: {
+              data: [
+                {type: 'average', name: '平均值'}
+              ]
+            }
+          },
+          {
+            name: '用气量(非民用)(m³)',
+            type: 'bar',
+            smooth: true,
+            itemStyle: {normal: {areaStyle: {type: 'default'}}},
+            data: gasdata2,
+            markPoint: {
+              data: [
+                {type: 'max', name: '最大值'},
+                {type: 'min', name: '最小值'}
+              ]
+            },
+            markLine: {
+              data: [
+                {type: 'average', name: '平均值'}
+              ]
+            }
+          }
+        ]
+        })
+      },
+      searchdata (condition) {
+        console.log("ec:"+this.echarts)
+        let getGen = getData(this, condition)
+        co(getGen)
+      }
+    },
+    watch: {
+      'echarts' (val) {
+        this.searchdata(this.condition)
+      },
+      'groupname' (val) {
+        this.searchdata(this.condition)
+      }
+    }
+  }
+</script>