manage-client 3.2.37 → 3.2.39-aode

package/src/components/ManageHomeCS/User/GasDistri.vue

@@ -1,220 +1,343 @@
-<template>
-  <div>
-    <div class="label">用气性质分布图</div>
-    <div id="gasdistri"></div>
-  </div>
-</template>
-
-<script>
-  import * as DataSql from '../../../stores/DataSql'
-  import co from 'co'
-
-  export default {
-    name: "gasdistri",
-    data() {
-      return {
-        resdata: []
-      }
-    },
-    methods: {
-      setBar(id, data) {
-        this.xc = this.$echarts.init(document.getElementById(id))
-        var scale=this.$parent.$parent.$parent.scale
-        var xAxisData = []  //列名
-        var meterCount = []  //数量
-
-        data.forEach(function (s) {
-          xAxisData.push(s.name)
-          meterCount.push(s.value)
-        })
-        xAxisData.push("")
-        var yname = ''
-        var endPercent = (6 / xAxisData.length) * 100;
-        var serieData = [
-          {
-            name: '',
-            type: "bar",
-            stack: "1",
-            barWidth: '30%',
-            barGap: "20%",
-            xAxisIndex: 0,
-            z: 2,
-            itemStyle: {
-              normal: {
-                color: "#7395db",
-                label: {
-                  show: true,
-                  textStyle: {
-                    color: "#ffffff",
-                    fontSize:16*scale
-                  },
-                  position: "top"
-                },
-              }
-            },
-            data: meterCount,
-          }
-        ];
-        var colors = ["#036BC8", "#4A95FF", "#5EBEFC", "#2EF7F3", "#FFFFFF"]
-        this.xc.setOption({
-          title: {
-            text: '',
-            left: '40%',
-            bottom: '1%',
-            textStyle: {color: "#fff", fontSize: 14 * scale, fontWeight: "normal"}
-          },
-          color: colors,
-          grid: {left: '4%', top: "18%", bottom: "5%", right: "5%", containLabel: true},
-          dataZoom: [{
-            type: 'inside',
-            show: true,
-            xAxisIndex: [0],
-            left: '9%',
-            bottom: -5,
-            start: 2,
-            end: 90 //初始化滚动条
-          }],
-          tooltip: {
-            alwaysShowContent:true,
-            backgroundColor:'rgba(2, 59, 63, 0.45)',
-            // borderColor :'rgba(13, 109, 180)',
-            borderWidth:0,
-            hideDelay:100,
-            padding:10*scale,
-            textStyle:{
-              fontSize:18*scale
-            },
-            formatter: function (params) {
-              if (params[0].axisValue == '') {
-                return ''
-              }
-              var result = ''
-              params.forEach(function (item) {
-                if (item.seriesName !== 'ser') {
-                  result += item.seriesName + " &nbsp;&nbsp;&nbsp;<span style='font-weight: bolder;color:#e1e52a;'>" + item.value + "</span></br>";
-                }
-              });
-              return "<div style='text-align: center;height: 1px;font-weight: normal'>"+params[0].axisValue + '</div><br/>数量 ' + result
-            },
-            axisPointer: {type: 'line', lineStyle: {width: 0}},
-            trigger: 'axis',
-            extraCssText: 'width: auto;height: auto;'
-          },
-          xAxis: [
-            {
-              name: yname,
-              type: 'category',
-              nameTextStyle: {
-                fontSize: 14 * scale,
-                color: '#15dce2',
-                padding: [40 * scale, 0, 0, -60 * scale],
-              },
-              axisLine: {show: true, lineStyle: {color: '#04669e', width: 1}},
-              axisLabel: {
-                interval: 0, textStyle: {color: '#ffffff', fontSize: 13 * scale},
-                formatter: function (value, index) {
-
-                  //进行客户名称截取换行
-                  var s = ''
-                  // 长度超过4个字符进行换行
-                  if (value.toString().length > 3 && value.toString().length < 8) {
-                    var s0 = value.toString().substring(0, 4)
-                    var s1 = value.toString().substring(4, value.toString().length)
-                    s = s0 + '\n' + s1
-                    return s
-                  }
-                  // 长度超过8个字符进行再次换行
-                  if (value.toString().length > 7 && value.toString().length < 12) {
-                    var s0 = value.toString().substring(0, 4)
-                    var s1 = value.toString().substring(4, 8)
-                    var s2 = value.toString().substring(8, value.toString().length)
-                    s = s0 + '\n' + s1 + '\n' + s2
-                    return s
-                  }
-                  // 长度超过12个字符进行再次换行
-                  if (value.toString().length > 11) {
-                    var s0 = value.toString().substring(0, 4)
-                    var s1 = value.toString().substring(4, 8)
-                    var s2 = value.toString().substring(8, 12)
-                    var s3 = value.toString().substring(12, value.toString().length)
-                    s = s0 + '\n' + s1 + '\n' + s2 + '\n' + s3
-                    return s
-                  }
-
-                  s = value.toString()
-
-                  return s;
-                }
-              },
-              axisTick: {show: false},
-              data: xAxisData,
-            }
-          ],
-          yAxis: [
-            {
-              name: '数量',
-              type: 'value',
-
-              nameTextStyle: {
-                fontSize: 14 * scale,
-                padding: [-10 * scale, 35 * scale, 0, 0],
-              },
-              axisTick: {show: false},
-              splitLine: {show: true, lineStyle: {type: 'dashed', color: '#004371'}},
-              axisLabel: {
-                interval: 0,
-                show: true,
-                textStyle: {
-                  color: '#15dce2',
-                  fontSize: 14 * scale,
-                },
-                formatter: function (value) {
-                  var index = value.toString().length
-                  if (index > 9) {
-                    return value.toString().substring(0, index - 9) + '亿'
-                  } else if (index > 4) {
-                    return value.toString().substring(0, index - 4) + '万'
-                  } else {
-                    return value
-                  }
-                }
-              },
-              axisLine: {show: false, lineStyle: {color: '#15dce2', fontSize: 14 * scale}},
-            },
-          ],
-          series: serieData
-        }, true)
-      }
-    },
-    watch: {
-      'resdata': {
-        deep: true,
-        handler(val) {
-          this.setBar('gasdistri', this.resdata)
-          this.$parent.loaddata++
-        }
-      },
-    },
-    ready() {
-      let getData = DataSql.getData(this, 'gasdistri',{condition:'1=1',f_filiale:this.$parent.$parent.f_filiale}, 'resdata')
-      co(getData)
-    }
-  }
-</script>
-
-<style scoped>
-  .label {
-    font-size: 0.85em;
-    color: #fff;
-    height: 10%;
-    width: 100%;
-    margin-left: 6%;
-  }
-
-  #resdata {
-    margin-top: 3%;
-    height: 90%;
-    width: 100%;
-  }
-
-</style>
+<template lang="html">
+  <div>
+    <div class="label">用气性质分布图</div>
+    <div id="gasdistri">
+    </div>
+  </div>
+</template>
+
+<script>
+  import * as DataSql from '../../../stores/DataSql'
+  import co from 'co'
+
+  export default {
+    name: 'gasdistri',
+    props: {
+      listenheight: String,
+      f_filiale: String,
+    },
+    data() {
+      return {
+        xc: '',
+        parentgasname: [],
+        childrengasname: [],
+        resdata1: [],
+        resdata2: [],
+        timer:''
+      }
+    },
+    beforeDestroy() {
+      //清除定时器
+      clearInterval(this.timer);
+    },
+    methods: {
+      setBar() {
+        this.xc = this.$echarts.init(document.getElementById('gasdistri'))
+        let legendname = []
+        var parenttotal = 0
+        var childrentotal = 0
+        this.parentgasname.forEach(function (s) {
+          parenttotal = parenttotal + s.value
+          legendname.push(s.name)
+        })
+        this.childrengasname.forEach(function (s) {
+          childrentotal = childrentotal + s.value
+          legendname.push(s.name)
+        })
+
+        let echartsdata = this.childrengasname
+        var userdata = this.parentgasname
+        var scale=this.$parent.$parent.$parent.scale
+        this.xc.setOption(
+          {
+            title: {
+              text: '',
+              subtext: '',
+              x: 'center'
+            },
+            tooltip: {
+              trigger: 'item',
+              show: true,
+              alwaysShowContent:true,
+              backgroundColor:'rgba(2, 59, 63, 0.45)',
+              // borderColor :'rgba(13, 109, 180)',
+              borderWidth:0,
+              hideDelay:100,
+                padding:10*scale,
+                textStyle:{
+                    fontSize:18*scale
+                },
+              formatter: function (params) {
+                if (params.name == legendname[0] || params.name == legendname[1] || params.name == legendname[2] || params.name == legendname[3]) {
+                  var percentage = (params.value / parenttotal) * 100
+                  return params.marker + " " + params.name + "  <span style=\"color:#64d8d4;font-weight: bolder\">&nbsp;&nbsp;&nbsp;" + params.value + "</span>" +
+                    " <span style=\"color:#e1e52a;font-weight: bolder\">&nbsp;&nbsp;&nbsp;" + percentage.toString().substring(0, 5) + "%</span>"
+                } else {
+                  var percentage = (params.value / childrentotal) * 100
+                  return "<div style='text-align: center;height: 1px'>"+params.data.parentname + "</div><br/>" + "" + params.marker + " " + params.name + "  <span style=\"color:#64d8d4;font-weight: bolder\">&nbsp;&nbsp;&nbsp;"
+                    + params.value + "</span>" + " <span style=\"color:#e1e52a;font-weight: bolder\">&nbsp;&nbsp;&nbsp;" + percentage.toString().substring(0, 5) + "%</span>"
+                }
+              },
+              extraCssText: 'width: auto;height: auto;'
+            },
+            // legend: {
+            //   orient: 'horizontal',
+            //   icon: 'circle',
+            //   x: 'center',
+            //   y: '70%',
+            //   itemWidth: 20 * scale,
+            //   itemHeight: 10 * scale,
+            //   padding:[0,20],
+            //   textStyle: {
+            //     fontSize: 12 * scale,
+            //     padding: [0, 0, 0, 4],
+            //     color: '#ffffff'
+            //   },
+            //   data: legendname
+            // },
+            series: [
+              {
+                // name:'数量',
+                type: 'pie',
+                selectedMode: 'single',
+                color: ['#f7cb32', '#ef7c3d', '#3d7ce5'],
+                radius: [0, '26%'],
+                center: ['50%', '50%'],
+                label: {
+                  normal: {
+                    position: 'inner'
+                  }
+                },
+                labelLine: {
+                  normal: {
+                    show: false
+                  }
+                },
+                data: userdata
+              },
+              // {
+              //   name: 'Line 1',
+              //   type: 'pie',
+              //   animation: false,
+              //   clockWise: false,
+              //   radius: ['34%', '35%'],
+              //   center: ['50%', '45%'],
+              //   tooltip: {
+              //     show: false
+              //   },
+              //   itemStyle: {
+              //     normal: {
+              //       label: {
+              //         show: false
+              //       },
+              //       labelLine: {
+              //         show: false
+              //       },
+              //     }
+              //   },
+              //   hoverAnimation: false,
+              //   data: [{
+              //     value: 100,
+              //     name: '02',
+              //     itemStyle: {
+              //       normal: {
+              //         color: '#29b7ff',//未完成的圆环的颜色
+              //         label: {
+              //           show: false
+              //         },
+              //         labelLine: {
+              //           show: false
+              //         }
+              //       }
+              //     }
+              //   }]
+              // },
+              {
+                // name:'数量',
+                type: 'pie',
+                color: ['#e5e280', '#6e93e0',  '#6fd9d0', '#c7e06e', '#e68d8d'],
+                label: {
+                  show: false
+                },
+                radius: ['40%', '55%'],
+                center: ['50%', '50%'],
+                data: echartsdata
+              },
+              // {
+              //   name: 'Line 2',
+              //   type: 'pie',
+              //   tooltip: {
+              //     show: false
+              //   },
+              //   animation: false,
+              //   clockWise: false,
+              //   radius: ['60%', '61%'],
+              //   center: ['50%', '35%'],
+              //   itemStyle: {
+              //     normal: {label: {show: false}, labelLine: {show: false},}
+              //   },
+              //   hoverAnimation: false,
+              //   data: [{
+              //     value: 100,
+              //     name: '02',
+              //     itemStyle: {
+              //       normal: {color: '#29b7ff', label: {show: false}, labelLine: {show: false}}
+              //     }
+              //   }]
+              // }
+            ]
+          }, true)
+
+        let idx = 0;
+        var dataLen=echartsdata.length
+        var oroptionmapjsonr_charts=this.xc
+        var sidx=0
+        var series=oroptionmapjsonr_charts.getOption().series
+        console.log(series)
+        var flag=false
+        this.timer=  setInterval(()=>{
+          if(!flag){
+            oroptionmapjsonr_charts.dispatchAction({
+              type: 'pieUnSelect',
+              seriesIndex:0 ,
+              dataIndex: sidx,
+            });
+          }
+
+          // 取消之前选中的图形
+          oroptionmapjsonr_charts.dispatchAction({
+            type: 'pieUnSelect',
+            seriesIndex:1 ,
+            dataIndex: idx,
+          });
+
+          idx = (idx+ 1) % dataLen;
+
+
+          for(var i=0;i<6;i++){
+            if(series[1].data[idx].parentname==series[0].data[i].name){
+              sidx=i
+              flag=true
+              break
+            }
+            flag=false
+          }
+          oroptionmapjsonr_charts.dispatchAction({
+            type: 'pieSelect',
+            seriesIndex: 0,
+            dataIndex: sidx
+          });
+          //console.log(app.currentIndex);
+          // 选中当前图形
+          oroptionmapjsonr_charts.dispatchAction({
+            type: 'pieSelect',
+            seriesIndex: 1,
+            dataIndex: idx
+          });
+          oroptionmapjsonr_charts.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 1,
+            dataIndex: idx
+          });
+
+        }, 3000)
+      },
+      searchdata(flag) {
+        let getGen = getData(this, flag)
+        co(getGen)
+      },
+      linesql(param) {
+        // 拼接sql，请求后台
+        if (param == '') {
+          let getGen = DataSql.getData(this, 'gasdistri',{item:param,f_filiale:this.$parent.$parent.f_filiale}, 'resdata1')
+          co(getGen)
+        } else {
+          let getGen = DataSql.getData(this,'gasdistri',{item:param,f_filiale:this.$parent.$parent.f_filiale}, 'resdata2')
+          co(getGen)
+        }
+      },
+      resize() {
+        // this.$parent.$parent.changeresize(this.xc)
+      }
+    },
+    watch: {
+      // 监听用户数据并进行绘图
+      'parentgasname': {
+        deep: true,
+        handler(val) {
+          if (this.childrengasname.length > 0 && this.parentgasname.length > 0) {
+            this.setBar()
+          }
+          this.$parent.loaddata++
+        }
+      },
+      // 监听用户数据并进行绘图
+      'childrengasname': {
+        deep: true,
+        handler(val) {
+          if (this.childrengasname.length > 0 && this.parentgasname.length > 0) {
+            this.setBar()
+          }
+          this.$parent.loaddata++
+        }
+      },
+      //监听浏览器大小变化
+      'listenheight': {
+        deep: true,
+        handler(val) {
+          if (this.listenheight !== '' && this.listenheight !== 0) {
+            // this.$parent.$parent.changeresize(this.xc)
+            this.listenheight = 0
+          }
+        },
+        immediate: true
+      },
+      'resdata1': {
+        deep: true,
+        handler(val) {
+          var self = this
+          this.resdata1.forEach(function (s) {
+            let item = {}
+            item.name = s.f_gasproperties
+            item.value = s.num
+            self.parentgasname.push(item)
+          })
+        },
+      },
+      'resdata2': {
+        deep: true,
+        handler(val) {
+          var self = this
+          this.resdata2.forEach(function (s) {
+            let item = {}
+            item.name = s.f_price_name
+            item.parentname = s.f_gasproperties
+            item.value = s.num
+            self.childrengasname.push(item)
+          })
+        },
+        immediate: true
+      }
+    },
+    ready() {
+      // this.searchdata()
+      // this.set()
+      this.linesql('')
+      this.linesql('c.f_price_name,')
+    },
+  }
+</script>
+<style scoped>
+  .label {
+    margin-left: 6%;
+    font-size: 1.85rem;
+    color: #fff;
+    width: 100%;
+    height: 9%;
+  }
+
+  #gasdistri {
+    height: 90%;
+    width: 100%;
+  }
+</style>