manage-client 3.2.10 → 3.2.14

package/src/filiale/WEINAN/UserGasEcharts.vue

@@ -0,0 +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>