manage-client 3.2.2 → 3.2.4-aode

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

@@ -0,0 +1,348 @@
+<template>
+  <div>
+    <div class="label">报建用户分布</div>
+    <div id="applyuser"></div>
+  </div>
+</template>
+
+<script>
+  import co from 'co'
+  import * as DataSql from '../../../stores/DataSql'
+
+  export default {
+    name: "inspec-distri",
+    props: {
+      listenheight: String,
+      f_filiale: String,
+    },
+    data() {
+      return {
+        xc: '',
+        resdata: [],
+        ecdata: [],
+        totaluser: '',
+        timer:''
+      }
+    },
+    beforeDestroy() {
+      //清除定时器
+      clearInterval(this.timer);
+    },
+    methods: {
+      setBar() {
+        this.xc = this.$echarts.init(document.getElementById('applyuser'))
+        var scale=this.$parent.$parent.$parent.scale
+        let echartData = []
+        let lengname = []
+        let ecdatastr = []
+        this.ecdata.forEach(function (s) {
+          ecdatastr.push(DataSql.dataunit(s.value))
+          echartData.push(s)
+          lengname.push(s.name)
+        })
+        var rich = {
+          yellow: {
+            color: "#ffc72b",
+            fontSize: 10 * scale,
+            padding: [5, 4],
+            align: 'center'
+          },
+          total: {
+            color: "#ffc72b",
+            fontSize: 10 * scale,
+            align: 'center'
+          },
+          white: {
+            color: "#fff",
+            align: 'center',
+            fontSize: 10 * scale,
+            padding: [11*scale, 0, 11*scale, 0]
+          },
+          blue: {
+            color: '#15dce2',
+            fontSize: 14 * scale,
+            align: 'center',
+            padding: [10*scale, 0]
+          }
+        }
+        var total = 0; //用户总和
+        echartData.forEach(function (value) {
+          total += value.value;
+        });
+        this.xc.setOption({
+          title: [
+            {
+              text: '总用户数',
+              left: '44%',
+              top: '36%',
+              textStyle: {
+                color: '#ffffff',
+                fontSize: 14 * scale,
+
+              }
+            },
+            {
+              text: total,
+              left: '45%',
+              top: '43%',
+              padding: [10 * scale, 10 * scale],
+              textStyle: {
+                color: '#00e2ea',
+                fontSize: 14 * scale,
+              }
+            }],
+
+          tooltip: {
+            show: true,
+            alwaysShowContent:true,
+            backgroundColor:'rgba(2, 59, 63, 0.45)',
+            // borderColor :'rgba(13, 109, 180)',
+            borderWidth:0,
+            hideDelay:100,
+            triggerOn:'mousemove',
+              padding:10*scale,
+              textStyle:{
+                  fontSize:16*scale
+              },
+            formatter: function (params) {
+              return  params.marker + " " + params.name + "  <span style=\"color:#e1e52a;font-weight: bolder\">&nbsp;&nbsp;" + params.value + "</span>"
+            },
+            enterable:true,
+            position: function(point, params, dom, rect, size) {
+              //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
+              var x = point[0]; //
+              var y = point[1];
+              var viewWidth = size.viewSize[0];
+              var viewHeight = size.viewSize[1];
+              var boxWidth = size.contentSize[0];
+              var boxHeight = size.contentSize[1];
+              var posX = 0; //x坐标位置
+              var posY = 0; //y坐标位置
+              if (x < boxWidth) { //左边放不开
+                posX = 5;
+              } else { //左边放的下
+                posX = x - boxWidth;
+              }
+
+              if (y < boxHeight) { //上边放不开
+                posY = 5;
+              } else { //上边放得下
+                posY = y - boxHeight;
+              }
+              return [posX, posY];
+            },
+            extraCssText:'width: auto;height:auto;',
+          },
+          legend: {
+            orient: 'horizontal',
+            icon: 'circle',
+            x: 'center',
+            y: '85%',
+            itemGap: 20,
+            itemWidth: 20 * scale,
+            itemHeight: 10 * scale,
+            textStyle: {
+              fontSize: 12 * scale,
+              // padding: [0, 0, 0, 4 * scale],
+              color: '#ffffff'
+            },
+            data: lengname
+          },
+          series: [
+            // {
+            //   name: 'Line 1',
+            //   type: 'pie',
+            //   animation: false,
+            //   clockWise: false,
+            //   radius: ['30%', '31%'],
+            //   center: ['46%', '49%'],
+            //   itemStyle: {
+            //     normal: {
+            //       label: {
+            //         show: false
+            //       },
+            //       labelLine: {
+            //         show: false
+            //       },
+            //     }
+            //   },
+            //   hoverAnimation: false,
+            //   tooltip: {
+            //     show: false
+            //   },
+            //   data: [{
+            //     value: 100,
+            //     name: '02',
+            //     itemStyle: {
+            //       normal: {
+            //         color: '#29b7ff',//未完成的圆环的颜色
+            //         label: {
+            //           show: false
+            //         },
+            //         labelLine: {
+            //           show: false
+            //         }
+            //       }
+            //     }
+            //   }]
+            // },
+            {
+              name: '总用户数',
+              type: 'pie',
+              radius: ['35%', '50%'],
+              center: ['50%', '42%'],
+              minAngle: 15,//最小角度
+              startAngle: 60, //起始角度
+              hoverAnimation: false,
+              color: ['#6fd9d0', '#ede61f',  '#6e93e0','#e5ae26'],
+              label: {
+                show:false
+                // normal: {
+                //   borderWidth: 20 * scale,
+                //   borderRadius: 4 * scale,
+                //   formatter: function (params, ticket, callback) {
+                //     var total = 0; //用户总数量
+                //     var percent = 0;
+                //     echartData.forEach(function (value, index, array) {
+                //       total += value.value;
+                //     });
+                //     percent = ((params.value / total) * 100).toFixed(1);
+                //     return '{blue|' + params.name + '}{blue|' + params.value + '}\n\n';
+                //   },
+                //   padding: [0, -86 * scale],
+                //   rich: rich,
+                // }
+              },
+
+              labelLine: {
+                show:false
+                // normal: {
+                //   length: 20 * scale,
+                //   length2: 80 * scale,
+                //   lineStyle: {
+                //     formatter: function (params, ticket, callback) {
+                //       var total = 0; //用户总数量
+                //       var percent = 0; //用户占比
+                //       echartData.forEach(function (value, index, array) {
+                //         total += value.value;
+                //       });
+                //       percent = ((params.value / total) * 100).toFixed(1);
+                //       return '{white|     ' + params.name + '}\n{hr|}\n{yellow|     ' + params.value + '}\n{blue|    ' + percent + '%}';
+                //     },
+                //   }
+                // }
+              },
+              data: echartData
+            },
+            // {
+            //   name: 'Line 2',
+            //   type: 'pie',
+            //   animation: false,
+            //   clockWise: false,
+            //   radius: ['54%', '55%'],
+            //   center: ['46%', '49%'],
+            //   itemStyle: {
+            //     normal: {
+            //       label: {
+            //         show: false
+            //       },
+            //       labelLine: {
+            //         show: false
+            //       },
+            //     }
+            //   },
+            //   hoverAnimation: false,
+            //   tooltip: {
+            //     show: false
+            //   },
+            //   data: [{
+            //     value: 100,
+            //     name: '02',
+            //     itemStyle: {
+            //       normal: {
+            //         color: '#29b7ff',//未完成的圆环的颜色
+            //         label: {
+            //           show: false
+            //         },
+            //         labelLine: {
+            //           show: false
+            //         }
+            //       }
+            //     }
+            //   }
+            //   ]
+            // }
+          ]
+        }, true)
+
+        let idx = 0;
+        var dataLen=echartData.length
+        var oroptionmapjsonr_charts=this.xc
+        this.timer=setInterval(()=>{
+          // 取消之前选中的图形
+          oroptionmapjsonr_charts.dispatchAction({
+            type: 'pieUnSelect',
+            seriesIndex: 0,
+            dataIndex: idx,
+          });
+
+          idx = (idx+ 1) % dataLen;
+          //console.log(app.currentIndex);
+          // 选中当前图形
+          oroptionmapjsonr_charts.dispatchAction({
+            type: 'pieSelect',
+            seriesIndex: 0,
+            dataIndex: idx
+          });
+          oroptionmapjsonr_charts.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: idx
+          });
+        }, 3000)
+      },
+    },
+    watch: {
+      'resdata': {
+        deep: true,
+        handler(val) {
+          for (var i = 0; i < this.resdata.length; i++) {
+            let item = {}
+            if (this.resdata[i].name == null) {
+              item.name = '未确定'
+              item.value = this.resdata[i].value
+            } else {
+              item.name = this.resdata[i].name
+              item.value = this.resdata[i].value
+            }
+            this.ecdata.push(item)
+          }
+          this.setBar()
+          this.$parent.loaddata++
+        }
+      }
+    },
+    ready() {
+      let getdata = DataSql.getData(this,  'apply',{f_filiale:this.$parent.$parent.f_filiale}, 'resdata')
+      co(getdata)
+    }
+  }
+</script>
+
+<style scoped>
+
+  .label {
+    font-size: 1.85rem;
+    color: #fff;
+    height: 8%;
+    width: 100%;
+    margin-left: 6%;
+  }
+
+  #applyuser {
+    height: 89%;
+    width: 100%;
+  }
+
+
+</style>

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

@@ -21,12 +21,10 @@
         xc: '',
         newyeardata: [],
         oldyeardata: [],
-        olderyeardata: [],
         year: '',
         usertag3: false,
         resdata: [],
         resdataold: [],
-        resdataolder:[],
         timer:''
       }
     },
@@ -40,17 +38,15 @@
         var scale=this.$parent.$parent.$parent.scale
         var xAxisData = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '', ''];
 
-        var legendData = ["" + eval(this.year + '-0'), "" + eval(this.year + '-1'), "" + eval(this.year + '-2')];
+        var legendData = ["" + eval(this.year + '-0'), "" + eval(this.year + '-1')];
         var serieData = [];
         var metaDate = [];
         let data0 = []
         let data1 = []
-        let data2 = []
         // for(var i=this.newyeardata.length-1;i>-1;i--){
         //   data0.push(this.newyeardata[i].value)
         //   data1.push(this.oldyeardata[i].value)
         // }
-
         for (var i = 0; i < 12; i++) {
           var l = false
           for (var j = 0; j < this.newyeardata.length; j++) {
@@ -77,26 +73,11 @@
             data1.push(0)
           }
         }
-
-        for (var i = 0; i < 12; i++) {
-          var l = false
-          for (var j = 0; j < this.olderyeardata.length; j++) {
-            if (xAxisData[i] == this.olderyeardata[j].name) {
-              l = true
-              data2.push(this.olderyeardata[j].value)
-              break
-            }
-          }
-          if (!l) {
-            data2.push(0)
-          }
-        }
         // data0.push(this.newyeardata)
         // data1.push(this.oldyeardata)
 
         metaDate.push(data0)
         metaDate.push(data1)
-        metaDate.push(data2)
         for (var v = 0; v < legendData.length; v++) {
           var serie = {
             name: legendData[v],
@@ -113,12 +94,11 @@
               }
             },
             data: metaDate[v]
-
           }
           serieData.push(serie)
         }
-        var colors = ["#f7cb32", "#6fd9d0", "#00FA9A"];
-        var xname = '      月份\n(' + eval(this.year + '-2') + '-' + eval(this.year + '-0') + ')'
+        var colors = ["#f7cb32", "#6fd9d0"];
+        var xname = '      月份\n(' + eval(this.year + '-1') + '-' + eval(this.year + '-0') + ')'
         this.xc.setOption({
           title: {
             text: '',
@@ -133,8 +113,8 @@
             data: legendData,
             y: '8%',
             // padding: [0, 25*scale, 0, 0],
-            itemWidth: 14 ,
-            itemHeight: 6 ,
+            itemWidth: 14 * scale,
+            itemHeight: 6 * scale,
             textStyle: {width: '20%', color: "#15dce2", fontSize: 12 * scale},
             formatter: function (params) {
               return params + "年"
@@ -240,7 +220,6 @@
         }, 3000)
       },
       linesql(year, resultname) {
-        year=year+'-01'
         // 拼接sql，请求后台
         let sqldata = DataSql.getData(this,  'salegas',{startDate:year,f_filiale:this.$parent.$parent.f_filiale}, resultname)
         co(sqldata)
@@ -254,9 +233,6 @@
         if (parm == 'oldyeardata') {
           year = eval(this.year + '-1')
         }
-        if (parm == 'olderyeardata') {
-          year = eval(this.year + '-2')
-        }
         var month = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
         for (var i = 0; i < 12; i++) {
           let item = {}
@@ -287,12 +263,6 @@
           this.datapress(this.resdataold, "oldyeardata")
         }
       },
-      'resdataolder': {
-        deep: true,
-        handler(val) {
-          this.datapress(this.resdataolder, "olderyeardata")
-        }
-      },
       'resdata': {
         deep: true,
         handler(val) {
@@ -303,9 +273,6 @@
       'newyeardata': {
         deep: true,
         handler(val) {
-          console.log('销售额往年同比分析============================')
-          console.log('this.newyeardata',this.newyeardata)
-
           if (this.newyeardata.length > 0 && this.oldyeardata.length > 0) {
             this.setBar()
           }
@@ -316,8 +283,6 @@
       'oldyeardata': {
         deep: true,
         handler(val) {
-          console.log('销售额往年同比分析============================')
-          console.log('this.oldyeardata',this.oldyeardata)
           if (this.newyeardata.length > 0 && this.oldyeardata.length > 0) {
             this.setBar()
           }
@@ -325,18 +290,6 @@
         },
         immediate: true
       },
-      'olderyeardata': {
-        deep: true,
-        handler(val) {
-          console.log('销售额往年同比分析============================')
-          console.log('this.olderyeardata',this.olderyeardata)
-          if (this.oldyeardata.length > 0 && this.olderyeardata.length > 0) {
-            this.setBar()
-          }
-          this.$parent.loaddata++
-        },
-        immediate: true
-      },
       //监听浏览器大小变化
       'listenheight': {
         deep: true,
@@ -353,7 +306,6 @@
       this.year = this.year.toString().substring(0, 4)
       this.linesql(this.year, "resdata")
       this.linesql(eval(this.year + '-1'), "resdataold")
-      this.linesql(eval(this.year + '-2'), "resdataolder")
     }
   }
 </script>

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

@@ -13,8 +13,7 @@
       <sale-proportion v-ref:saleproportion class="border saleproportion" :f_filiale="f_filiale"
                        :listenheight="listenheight"></sale-proportion>
       <!--报建用户分布-->
-      <my-inspec-distri v-ref:inspecdistri class="border inspecdistri" :f_filiale="f_filiale" :listenheight="listenheight"></my-inspec-distri>
-      <fmy-inspec-distri v-ref:inspecdistri class="border inspecdistri2" :f_filiale="f_filiale" :listenheight="listenheight"></fmy-inspec-distri>
+      <inspec-distri v-ref:inspecdistri class="border inspecdistri" :f_filiale="f_filiale" :listenheight="listenheight"></inspec-distri>
       <!--用气分布图-->
       <gas-distri v-ref:gasdistri class="border gasdistri" :f_filiale="f_filiale" :listenheight="listenheight"></gas-distri>
     </div>
@@ -118,7 +117,7 @@
     position: absolute;
     left: 34%;
     width: 32%;
-    height: 40%;
+    height: 55%;
   }
 
   /*销售往年同比*/
@@ -133,17 +132,10 @@
   /*报建用户*/
   .inspecdistri {
     position: absolute;
-    top:42%;
-    left: 34%;
-    width: 32%;
-    height: 25%;
-  }
-  .inspecdistri2 {
-    position: absolute;
-    top:69%;
+    top:57%;
     left: 34%;
     width: 32%;
-    height: 25%;
+    height: 37%;
   }
 
   /*用气分布*/

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

@@ -1,7 +1,6 @@
 <template>
   <div>
     <div class="label t1" @click="drillclick" >{{title}}</div>
-    <div style="text-align: right;height:5%;padding-right: 5%"><font color="yellow">{{time}}年</font></div>
     <div id="usergascontrast"></div>
   </div>
 </template>
@@ -23,8 +22,7 @@
         principaluser: [],
         principalstring: [],
         usertag1: false,
-        resdata: [],
-        time:Util.toStandardDateString().toString().substring(0, 4)
+        resdata: []
       }
     },
     methods: {
@@ -56,7 +54,15 @@
           grade: grade,
           visits: visits,
         }
-          this.xc.setOption({
+        var rich = {
+          blue: {
+            color: '#f3c832',
+            fontSize: 16 * scale,
+            align: 'center',
+            padding: [-12*scale, 0, 0, 0]
+          }
+        }
+        this.xc.setOption({
           title: [
             {
               text: '售气量top5',
@@ -147,15 +153,12 @@
               formatter: function (params) {
                 for (var i = 0; i < echartData1.length; i++) {
                   // 对比列名,显示单位化后的数据
-                  if ((4-i) == params.dataIndex) {
-                    return echartData1[i].value + 'm²';
+                  if (echartData1[i].name == params.name) {
+                    return '{blue|' + echartData1[i].value + '}\n';
                   }
                 }
               },
-              textStyle: { //数值样式
-                color: '#f3c832',
-                fontSize: 16 * scale
-              }
+              rich: rich,
             },
             data: data.visits,
           }]

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

@@ -513,14 +513,14 @@
         }
       },
       //监听用户增长模块的数据,更新计算潜在用户数
-      // 'increaseuser': {
-      //   deep: true,
-      //   handler(val) {
-      //     console.log(this.increaseuser, '潜在用户数据')
-      //     this.totaluser[2].value = this.increaseuser
-      //   },
-      //   immediate: true
-      // },
+      'increaseuser': {
+        deep: true,
+        handler(val) {
+          console.log(this.increaseuser, '潜在用户数据')
+          this.totaluser[2].value = this.increaseuser
+        },
+        immediate: true
+      },
       // 监听用户数据并进行绘图
       'totaluser': {
         deep: true,
@@ -544,8 +544,7 @@
         deep: true,
         handler(val) {
           if (this.resdataapply[0].totalnum > 0) {
-            this.totaluser[1].value = this.resdataapply[0].f_applycount?this.resdataapply[0].f_applycount:0
-            this.totaluser[2].value = this.resdataapply[0].f_installnum?this.resdataapply[0].f_installnum:0
+            this.totaluser[1].value = this.resdataapply[0].totalnum
           }
 
           console.log(this.resdataapply, '报建数据')

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

@@ -56,7 +56,7 @@
             name: legendData[v],
             type: 'line',
             symbol: "circle",
-            symbolSize: 5 ,
+            symbolSize: 5 * scale,
             itemStyle: {
               normal: {
                 lineStyle: {
@@ -85,10 +85,10 @@
             right:'2%',
             data: legendData,
             y: '8%',
-            padding: [0, 25, 0, 0],
-            itemWidth: 14 ,
-            itemHeight: 6 ,
-            textStyle: {width: '20%', color: "#15dce2", fontSize: 12 },
+            padding: [0, 25*scale, 0, 0],
+            itemWidth: 14 * scale,
+            itemHeight: 6 * scale,
+            textStyle: {width: '20%', color: "#15dce2", fontSize: 12 * scale},
           },
           color: colors,
           grid: {left: '5%', top: "22%", bottom: "2%", right: "5%", width: '90%', containLabel: true},