manage-client 3.2.14 → 3.2.18

package/src/filiale/WEINAN/UserGasEcharts.vue

@@ -1,281 +1,281 @@
-<template lang="html">
-  <div class="basic-main">
-    <div class="form-horizontal select-overspread container-fluid auto">
-      <div class="row">
-        <div class="col-sm-3 form-group">
-          <button @click="$parent.notShowEcharts()" class="button_clear button_spacing">隐藏图表</button>
-        </div>
-
-      </div>
-    </div>
-    <div style="height: 97%;">
-      <div class="flex-row" style="flex: 1;border-bottom: 1px dashed #888;height: 48%">
-        <div style="flex: 1;border-right: 1px dashed #888;width: 50%">
-          <div id="charts3">
-            <div id="ms3" :style="{width:'100%',height:'100%'}"></div>
-          </div>
-        </div>
-        <div style="flex: 1;width: 50%">
-          <div id="charts1">
-            <div id="ms1" :style="{width:'100%',height:'100%'}"></div>
-          </div>
-          <!--        <bank-manager :startdate='model.startDate' :enddate='model.endDate' :orgid='model.orgid[0]'-->
-          <!--                      v-ref:pay></bank-manager>-->
-        </div>
-      </div>
-      <div class="flex-row" style="flex: 1;height: 48%">
-        <div style="flex: 1;width: 100%">
-          <div id="charts2">
-            <div id="ms2" :style="{width:'100%',height:'100%'}"></div>
-          </div>
-          <!--        <bussiness-type :startdate='model.startDate' :enddate='model.endDate' :orgid='model.orgid[0]' v-ref:pay ></bussiness-type>-->
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  import * as Util from '../../Util'
-  import co from 'co'
-  import { HttpResetClass } from 'vue-client'
-  import echarts from "echarts";
-
-  let getData = function * (self, condition) {
-    let load = new HttpResetClass()
-    load.load('POST', 'rs/sql/webmeter_getUserGasGroup',
-      {data: {condition: condition, groupname: self.groupname, startDate: self.startdate,
-          endDate: self.enddate}},
-      {resolveMsg: null, rejectMsg: null})
-      .then((res) => {
-        let d = res.data
-        let gasproperties = Array.from(new Set(d.map(x => x.f_gasproperties)))
-        let userType = Array.from(new Set(d.map(x => x.f_user_type)))
-        let meterBrand = Array.from(new Set(d.map(x => x.f_meter_brand)))
-        let gasproGas = []
-        let gasproMoney = []
-        let userTypeGas = []
-        let userTypeMoney = []
-        let meterBrandGas = []
-        let meterBrandMoney = []
-        for (let i in gasproperties) {
-          gasproGas.push(d.filter(x => x.f_gasproperties === gasproperties[i]).map(item => item.f_gas).reduce((x, y) => x + y, 0).toFixed(2))
-          gasproMoney.push(d.filter(x => x.f_gasproperties === gasproperties[i]).map(item => item.f_money).reduce((x, y) => x + y, 0).toFixed(2))
-        }
-        console.log('userType------', userType)
-        for (let items of userType) {
-          console.log('userType------', items)
-          let gas = d.filter(x => x.f_user_type === items).map(item => item.f_gas).reduce((x, y) => x + y, 0).toFixed(2)
-          let money = d.filter(x => x.f_user_type === items).map(item => item.f_money).reduce((x, y) => x + y, 0).toFixed(2)
-          userTypeGas.push({name: items, value: gas})
-          userTypeMoney.push({name: items, value: money})
-        }
-        console.log('userTypeGas------', userTypeGas)
-        console.log('userTypeMoney------', userTypeMoney)
-        for (let i in meterBrand) {
-          meterBrandGas.push(d.filter(x => x.f_meter_brand === meterBrand[i]).map(item => item.f_gas).reduce((x, y) => x + y, 0).toFixed(2))
-          meterBrandMoney.push(d.filter(x => x.f_meter_brand === meterBrand[i]).map(item => item.f_money).reduce((x, y) => x + y, 0).toFixed(2))
-        }
-        let legend1 = [{
-          name: '气量',
-          data: gasproGas
-        },{
-          name: '金额',
-          data: gasproMoney
-        }]
-        let legend2 = [{
-          name: '气量',
-          data: meterBrandGas
-        },{
-          name: '金额',
-          data: meterBrandMoney
-        }]
-        self.setBar('ms1','用气分析(用气性质)', gasproperties, legend1)
-        self.setBar('ms2','用气分析(气表品牌)', meterBrand, legend2)
-        self.setPie ('ms3', '用气分析(用户类型)', userType, userTypeGas, userTypeMoney)
-      })
-  }
-  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(){
-      this.searchdata(this.condition)
-      console.log(this.echarts)
-    },
-    methods: {
-      setBar (id, titleText, type, legend) {
-        let legendNew = legend.map(x => x.name)
-        let ser = legend.map(x => {
-          return {
-            name: x.name,
-            type: 'bar',
-            data: x.data,
-            markLine : {
-            data : [
-              {type : 'average', name: '平均值'}
-            ]
-          }}
-        })
-        this.xc = this.$echarts.init(document.getElementById(id))
-
-
-        this.xc.setOption({
-            title : {
-
-            text: titleText,
-            subtext: '数据查询来源',
-            x: 'left'
-          },
-        tooltip : {
-          trigger: 'axis',
-          extraCssText: 'width: auto;height: auto;'
-        },
-        legend: {
-            x: 'left',
-            y: 'bottom',
-            data: legendNew //['气量']
-        },
-        toolbox: {
-          show : true,
-            feature : {
-            dataView : {show: true, readOnly: false},
-            magicType : {show: true, type: ['line', 'bar']},
-            restore : {show: true},
-            saveAsImage : {show: true}
-          }
-        },
-        calculable : true,
-          xAxis : [
-          {
-            type : 'category',
-            data : type
-          }
-        ],
-          yAxis : [
-          {
-            type : 'value'
-          }
-        ],
-          series : ser
-      })
-      },
-      setPie (id, titleText, type, dateGas, dateMoney) {
-        console.log("进入组件")
-        let xc = this.$echarts.init(document.getElementById(id))
-        xc.setOption({
-          title: [
-            {
-              text: titleText,
-              x: '0%',
-              y: '0%',
-              textStyle: {
-                color: '#010606',
-                fontSize: 18,
-              }
-            },
-            {
-              text: '气量分布',
-              x: '18%',
-              y: '18%',
-              textStyle: {
-                color: '#010606',
-                fontSize: 16,
-              }
-            },
-            {
-              text: '金额分布',
-              x: '58%',
-              y: '18%',
-              textStyle: {
-                color: '#010606',
-                fontSize: 16,
-              }
-            }],
-          tooltip: {
-            trigger: 'item',
-            extraCssText: 'width: auto;height: auto;',
-            formatter: '{a} <br/>{b}: {c} ({d}%)'
-          },
-          legend: {
-            orient: 'horizontal',
-            icon: 'circle',
-            x: 'center',
-            y: '80%',
-
-            textStyle: {
-              padding: [0, 0, 0, 4],
-              color: '#010606'
-            },
-            data: type
-          },
-          series : [
-            {
-              name: '气量',
-              type: 'pie',
-              radius: ['0%', '40%'],
-              center: ['25%', '50%'],
-              hoverAnimation: true,
-              minAngle: 15,//最小角度
-              startAngle: 60, //起始角度
-              label: {normal: {show:true,}},
-              labelLine: { normal: {show:true,}},
-              data: dateGas
-            },
-            {
-              name: '金额',
-              type: 'pie',
-              radius: ['0%', '40%'],
-              center: ['65%', '50%'],
-              hoverAnimation: true,
-              minAngle: 15,//最小角度
-              startAngle: 60, //起始角度
-              label: {normal: {show:true,}},
-              labelLine: { normal: {show:true,}},
-              data: dateMoney
-            }
-          ]
-
-        },true)
-      },
-      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">
+    <div class="form-horizontal select-overspread container-fluid auto">
+      <div class="row">
+        <div class="col-sm-3 form-group">
+          <button @click="$parent.notShowEcharts()" class="button_clear button_spacing">隐藏图表</button>
+        </div>
+
+      </div>
+    </div>
+    <div style="height: 97%;">
+      <div class="flex-row" style="flex: 1;border-bottom: 1px dashed #888;height: 48%">
+        <div style="flex: 1;border-right: 1px dashed #888;width: 50%">
+          <div id="charts3">
+            <div id="ms3" :style="{width:'100%',height:'100%'}"></div>
+          </div>
+        </div>
+        <div style="flex: 1;width: 50%">
+          <div id="charts1">
+            <div id="ms1" :style="{width:'100%',height:'100%'}"></div>
+          </div>
+          <!--        <bank-manager :startdate='model.startDate' :enddate='model.endDate' :orgid='model.orgid[0]'-->
+          <!--                      v-ref:pay></bank-manager>-->
+        </div>
+      </div>
+      <div class="flex-row" style="flex: 1;height: 48%">
+        <div style="flex: 1;width: 100%">
+          <div id="charts2">
+            <div id="ms2" :style="{width:'100%',height:'100%'}"></div>
+          </div>
+          <!--        <bussiness-type :startdate='model.startDate' :enddate='model.endDate' :orgid='model.orgid[0]' v-ref:pay ></bussiness-type>-->
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import * as Util from '../../Util'
+  import co from 'co'
+  import { HttpResetClass } from 'vue-client'
+  import echarts from "echarts";
+
+  let getData = function * (self, condition) {
+    let load = new HttpResetClass()
+    load.load('POST', 'rs/sql/webmeter_getUserGasGroup',
+      {data: {condition: condition, groupname: self.groupname, startDate: self.startdate,
+          endDate: self.enddate}},
+      {resolveMsg: null, rejectMsg: null})
+      .then((res) => {
+        let d = res.data
+        let gasproperties = Array.from(new Set(d.map(x => x.f_gasproperties)))
+        let userType = Array.from(new Set(d.map(x => x.f_user_type)))
+        let meterBrand = Array.from(new Set(d.map(x => x.f_meter_brand)))
+        let gasproGas = []
+        let gasproMoney = []
+        let userTypeGas = []
+        let userTypeMoney = []
+        let meterBrandGas = []
+        let meterBrandMoney = []
+        for (let i in gasproperties) {
+          gasproGas.push(d.filter(x => x.f_gasproperties === gasproperties[i]).map(item => item.f_gas).reduce((x, y) => x + y, 0).toFixed(2))
+          gasproMoney.push(d.filter(x => x.f_gasproperties === gasproperties[i]).map(item => item.f_money).reduce((x, y) => x + y, 0).toFixed(2))
+        }
+        console.log('userType------', userType)
+        for (let items of userType) {
+          console.log('userType------', items)
+          let gas = d.filter(x => x.f_user_type === items).map(item => item.f_gas).reduce((x, y) => x + y, 0).toFixed(2)
+          let money = d.filter(x => x.f_user_type === items).map(item => item.f_money).reduce((x, y) => x + y, 0).toFixed(2)
+          userTypeGas.push({name: items, value: gas})
+          userTypeMoney.push({name: items, value: money})
+        }
+        console.log('userTypeGas------', userTypeGas)
+        console.log('userTypeMoney------', userTypeMoney)
+        for (let i in meterBrand) {
+          meterBrandGas.push(d.filter(x => x.f_meter_brand === meterBrand[i]).map(item => item.f_gas).reduce((x, y) => x + y, 0).toFixed(2))
+          meterBrandMoney.push(d.filter(x => x.f_meter_brand === meterBrand[i]).map(item => item.f_money).reduce((x, y) => x + y, 0).toFixed(2))
+        }
+        let legend1 = [{
+          name: '气量',
+          data: gasproGas
+        },{
+          name: '金额',
+          data: gasproMoney
+        }]
+        let legend2 = [{
+          name: '气量',
+          data: meterBrandGas
+        },{
+          name: '金额',
+          data: meterBrandMoney
+        }]
+        self.setBar('ms1','用气分析(用气性质)', gasproperties, legend1)
+        self.setBar('ms2','用气分析(气表品牌)', meterBrand, legend2)
+        self.setPie ('ms3', '用气分析(用户类型)', userType, userTypeGas, userTypeMoney)
+      })
+  }
+  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(){
+      this.searchdata(this.condition)
+      console.log(this.echarts)
+    },
+    methods: {
+      setBar (id, titleText, type, legend) {
+        let legendNew = legend.map(x => x.name)
+        let ser = legend.map(x => {
+          return {
+            name: x.name,
+            type: 'bar',
+            data: x.data,
+            markLine : {
+            data : [
+              {type : 'average', name: '平均值'}
+            ]
+          }}
+        })
+        this.xc = this.$echarts.init(document.getElementById(id))
+
+
+        this.xc.setOption({
+            title : {
+
+            text: titleText,
+            subtext: '数据查询来源',
+            x: 'left'
+          },
+        tooltip : {
+          trigger: 'axis',
+          extraCssText: 'width: auto;height: auto;'
+        },
+        legend: {
+            x: 'left',
+            y: 'bottom',
+            data: legendNew //['气量']
+        },
+        toolbox: {
+          show : true,
+            feature : {
+            dataView : {show: true, readOnly: false},
+            magicType : {show: true, type: ['line', 'bar']},
+            restore : {show: true},
+            saveAsImage : {show: true}
+          }
+        },
+        calculable : true,
+          xAxis : [
+          {
+            type : 'category',
+            data : type
+          }
+        ],
+          yAxis : [
+          {
+            type : 'value'
+          }
+        ],
+          series : ser
+      })
+      },
+      setPie (id, titleText, type, dateGas, dateMoney) {
+        console.log("进入组件")
+        let xc = this.$echarts.init(document.getElementById(id))
+        xc.setOption({
+          title: [
+            {
+              text: titleText,
+              x: '0%',
+              y: '0%',
+              textStyle: {
+                color: '#010606',
+                fontSize: 18,
+              }
+            },
+            {
+              text: '气量分布',
+              x: '18%',
+              y: '18%',
+              textStyle: {
+                color: '#010606',
+                fontSize: 16,
+              }
+            },
+            {
+              text: '金额分布',
+              x: '58%',
+              y: '18%',
+              textStyle: {
+                color: '#010606',
+                fontSize: 16,
+              }
+            }],
+          tooltip: {
+            trigger: 'item',
+            extraCssText: 'width: auto;height: auto;',
+            formatter: '{a} <br/>{b}: {c} ({d}%)'
+          },
+          legend: {
+            orient: 'horizontal',
+            icon: 'circle',
+            x: 'center',
+            y: '80%',
+
+            textStyle: {
+              padding: [0, 0, 0, 4],
+              color: '#010606'
+            },
+            data: type
+          },
+          series : [
+            {
+              name: '气量',
+              type: 'pie',
+              radius: ['0%', '40%'],
+              center: ['25%', '50%'],
+              hoverAnimation: true,
+              minAngle: 15,//最小角度
+              startAngle: 60, //起始角度
+              label: {normal: {show:true,}},
+              labelLine: { normal: {show:true,}},
+              data: dateGas
+            },
+            {
+              name: '金额',
+              type: 'pie',
+              radius: ['0%', '40%'],
+              center: ['65%', '50%'],
+              hoverAnimation: true,
+              minAngle: 15,//最小角度
+              startAngle: 60, //起始角度
+              label: {normal: {show:true,}},
+              labelLine: { normal: {show:true,}},
+              data: dateMoney
+            }
+          ]
+
+        },true)
+      },
+      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>