manage-client 3.1.8-aode → 3.1.8-ls

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

@@ -1,8 +1,7 @@
-<template lang="html">
+<template>
   <div>
     <div class="label">用气性质分布图</div>
-    <div id="gasdistri">
-    </div>
+    <div id="gasdistri"></div>
   </div>
 </template>
 
@@ -11,333 +10,211 @@
   import co from 'co'
 
   export default {
-    name: 'gasdistri',
-    props: {
-      listenheight: String,
-      f_filiale: String,
-    },
+    name: "gasdistri",
     data() {
       return {
-        xc: '',
-        parentgasname: [],
-        childrengasname: [],
-        resdata1: [],
-        resdata2: [],
-        timer:''
+        resdata: []
       }
     },
-    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
+      setBar(id, data) {
+        this.xc = this.$echarts.init(document.getElementById(id))
         var scale=this.$parent.$parent.$parent.scale
-        this.xc.setOption(
+        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 = [
           {
-            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
+            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"
                 },
-              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>"
+              }
+            },
+            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>";
                 }
-              },
-              extraCssText: 'width: auto;height: auto;'
+              });
+              return "<div style='text-align: center;height: 1px;font-weight: normal'>"+params[0].axisValue + '</div><br/>数量 ' + result
             },
-            // 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
+            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],
               },
-              // {
-              //   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,
-          });
+              axisLine: {show: true, lineStyle: {color: '#04669e', width: 1}},
+              axisLabel: {
+                interval: 0, textStyle: {color: '#ffffff', fontSize: 13 * scale},
+                formatter: function (value, index) {
 
-          idx = (idx+ 1) % dataLen;
+                  //进行客户名称截取换行
+                  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()
 
-          for(var i=0;i<6;i++){
-            if(series[1].data[idx].parentname==series[0].data[i].name){
-              sidx=i
-              flag=true
-              break
+                  return s;
+                }
+              },
+              axisTick: {show: false},
+              data: xAxisData,
             }
-            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
-          });
+          ],
+          yAxis: [
+            {
+              name: '数量',
+              type: 'value',
 
-        }, 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)
+              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: {
-      // 监听用户数据并进行绘图
-      'parentgasname': {
-        deep: true,
-        handler(val) {
-          if (this.childrengasname.length > 0 && this.parentgasname.length > 0) {
-            this.setBar()
-          }
-          this.$parent.loaddata++
-        }
-      },
-      // 监听用户数据并进行绘图
-      'childrengasname': {
+      'resdata': {
         deep: true,
         handler(val) {
-          if (this.childrengasname.length > 0 && this.parentgasname.length > 0) {
-            this.setBar()
-          }
+          this.setBar('gasdistri', this.resdata)
           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,')
-    },
+      let getData = DataSql.getData(this, 'gasdistri',{condition:'1=1',f_filiale:this.$parent.$parent.f_filiale}, 'resdata')
+      co(getData)
+    }
   }
 </script>
+
 <style scoped>
   .label {
-    margin-left: 6%;
-    font-size: 1.85rem;
+    font-size: 0.85em;
     color: #fff;
+    height: 10%;
     width: 100%;
-    height: 9%;
+    margin-left: 6%;
   }
 
-  #gasdistri {
+  #resdata {
+    margin-top: 3%;
     height: 90%;
     width: 100%;
   }
+
 </style>