manage-client 3.2.0 → 3.2.2-aode

package/src/components/ManageHomeCS/NewHome/shanxi.vue

@@ -2,7 +2,7 @@
 <template>
   <div style="width: 100%;height: 100%">
     <!--<div  style="height: 40px;"><span v-for="i in list"  @click="selmap(i)">{{i}}———></span></div>-->
-    <div id="idname"  style="text-align: left"></div>
+    <div :id="idname"  style="text-align: left"></div>
   </div>
 
 </template>
@@ -11,8 +11,6 @@
 
   import '../../../stores/shanxi1.js';
 
-  import china from 'echarts/map/json/china.json';
-
 
   export default {
     name: 'echart-map',
@@ -31,10 +29,11 @@
     data() {
       return {
         mapdata:[
-          {name:'陕西',value:require('../../../../static/china.json')}
+          {name:'陕西',value:require('../../../../static/shanxi1.json')},
+          {name:'中国',value:require('../../../../static/res.json')}
           // {name:'咸阳市',value:require('../../../static/xianyangshi.json')},
           // {name:'西安市',value:require('../../../static/xianshi.json')}
-        ],
+          ],
         list:[],
         xc:'',
         timer:'',
@@ -45,94 +44,220 @@
     },
     methods: {
       drawChinaMap(mapjson) {
-        var oroptionmapjsonr_charts =this.$echarts.init(document.getElementById("idname"));
+        var oroptionmapjsonr_charts =this.$echarts.init(document.getElementById(this.idname));
+        var scale=this.$parent.$parent.$parent.scale
+          console.log(scale,'asdasdasd')
         this.xc=oroptionmapjsonr_charts
-        var getColor = ['#CCFFFF', '#FFCCCC', '#FF6666','#73ACFF', '#FDD56A', '#FD866A', '#9E87FF', '#58D5FF']; // 分界值对应的颜色
-        // var getClassification = [10, 20]; // 3个分界值（从小往大排序）
-// 后台获取到的数据
-        var dates = [
-          {
-          name: '内蒙古',
-          value: 8
-         },
-          {
-            name:'山东',
-            value: 20
-          },
-          {
-            name: '广西',
-            value: 33
-          },
-          {
-            name: '河北',
-            value: 33
-          },
-          {
-            name: '黑龙江',
-            value: 33
-          },
-          {
-            name: '吉林',
-            value: 33
-          },
-          {
-            name: '江苏',
-            value: 33
-          },
-          {
-            name: '辽宁',
-            value: 33
-          },
-          {
-            name: '天津',
-            value: 33
+        var geoCoordMap = {};
+        this.$echarts.registerMap(mapjson.name, mapjson.value);
+        oroptionmapjsonr_charts.showLoading();
+        var mapFeatures = this.$echarts.getMap(mapjson.name).geoJson.features;
+        oroptionmapjsonr_charts.hideLoading();
+        mapFeatures.forEach(function(v) {
+          // 地区名称
+          var name = v.properties.name;
+          // 地区经纬度
+          geoCoordMap[name] = v.properties.cp;
+
+        });
+        var convertData = function(data) {
+          var res = [];
+          for (var i = 0; i < data.length; i++) {
+            var geoCoord = geoCoordMap[data[i].name];
+            if (geoCoord) {
+              res.push({
+                name: data[i].name,
+                value: geoCoord.concat(data[i].value),
+              });
+            }
           }
+          return res;
+        };
+        var colormode=''
+        if(this.mode=='0'){colormode="#e7c83c"}
+        if(this.mode=='1'){colormode="#66f2de"}
+        var data = [
+          {name:"西安市",value:80,sellgas:'600'},
+          {name:"安康市",value:80,sellgas:'600'},
+          {name:"榆林市",value:80,sellgas:'80'},
+          {name:"铜川市",value:80,sellgas:'600'},
+          {name:"延安市",value:80,sellgas:'600'},
+          {name:"宝鸡市",value:80,sellgas:'600'},
+          {name:"渭南市",value:80,sellgas:'600'},
+          {name:"商洛市",value:80,sellgas:'600'},
+          {name:"汉中市",value:80,sellgas:'600'},
+          {name:"咸阳市",value:80,sellgas:'600'}
         ];
+        var  col=['#2a4096','#1285de','#27459b','#284ba5','#225bb2','#2353a8','#244ca3','#1775cd','#1e64bc','#05a0fc','#108de7','#1b6dc3']
+        let colors=[]
+        for(var i =0;i<data.length;i++){
+          var jo={
+            name: data[i].name,
+            itemStyle: {
+              areaColor: col[i] ,
+              // color: '#02363f'
+              color:  col[i]
+            }
+          }
+          colors.push(jo)
+        }
+        var option= {
+          title : {
+            text: '',
+              subtext: '',
+              x:'center'
+          },
+          tooltip: {
+            show: true,
+            alwaysShowContent:false,
+            backgroundColor:'rgba(23, 46, 128, 0.7)',
+            borderColor :'rgba(13, 109, 180, 0.7)',
+            borderWidth:1,
+            padding:10*scale,
+            hideDelay:100*scale,
+            triggerOn:'mousemove',
+            enterable:true,
+            textStyle:{
+              fontSize:18*scale
+            },
+            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坐标位置
 
-        dates.forEach((item,index) => {  // 根据数组中每一项的 value 判断属于哪个等级，对应颜色，从 getColor 中取值
-          item.itemStyle = {
-                areaColor: getColor[index]
+              if (x < boxWidth) { //左边放不开
+                posX = 5;
+              } else { //左边放的下
+                posX = x - boxWidth;
               }
-        });
-        this.$echarts.registerMap("china", china);
-        oroptionmapjsonr_charts.showLoading();
-        var mapFeatures = this.$echarts.getMap("china").geoJson.features;
-        oroptionmapjsonr_charts.hideLoading();
-        var option = {
-          tooltip: {
-                  trigger: 'item',
-                  formatter: '{b}<br/>售气量 <span style="color: #0fa397">{c}</span> (m3)',
-                  extraCssText:'width: auto;height:auto;',
-                  backgroundColor:"#FFFFFF",
-                  textStyle: {
-                    color:'#4199FD',
-                    fontSize:20
-                  }
-                },
-          series: {
-            name: '售气量',
-            type: 'map',
-            map: 'china',
-            data: dates,
-            zoom: 1.2,
-            scaleLimit: {
-              min: 0.5,
-              max: 3
+
+              if (y < boxHeight) { //上边放不开
+                posY = 5;
+              } else { //上边放得下
+                posY = y - boxHeight;
+              }
+
+              return [posX-10, posY-10];
+
+            },
+            extraCssText:'width: auto;height:auto;',
+            formatter:function(params, ticket, callback){
+              return '<div style=\'text-align: center;height: 1px;margin-bottom: 5px;font-weight: normal!important;\'>'+data[params.dataIndex].name+'</div><br/><span style="font-weight: normal">'
+                +'年售气量 &nbsp;&nbsp;<span style="color:#e1e52a;font-weight: bolder">'+data[params.dataIndex].sellgas+'w</span><br/>'+'购&nbsp;气&nbsp;&nbsp;量  &nbsp;&nbsp;<span style="color:#e1e52a;font-weight: bolder">100w</span>'+'</span>';
+            }
+          },
+          dataRange:{
+            min: 0,
+              max: 2500,
+              left: 'left',
+              top: 'bottom',
+              text: ['高', '低'],
+              calculable: true,
+              show:false,
+              inRange: {
+              color: [
+                // "#1DE9B6", "#F46E36", "#04B9FF", "#5DBD32", "#FFC809", "#FB95D5", "#BDA29A", "#6E7074", "#546570", "#C4CCD3"
+                // "#ff002d"
+                // "#ffc188",
+                // "#479fd2",
+                // "#fba853",
+                // "#48c7c0",
+                // "#fa8737",
+                // "#4bbdd6",
+                // "#ff6f5b",
+                // "#F4D5B1",
+                // "#ADE1E3",
+                // "#F4B387",
+                // "#F0F3F4"
+              ]
             },
-            label: { // 地图中各区域的文本标签
-              normal: { // 标签显示
-                show: true,
-                color: '#c0c0c0'
+          },
+
+          series : [
+            {
+              type: 'map',
+              map: '陕西',
+              geoIndex: 0,
+              aspectScale: 0.75, //长宽比
+              showLegendSymbol: false, // 存在legend时显示
+              roam: true,
+              animation: true,
+              data: data
+            },
+            {  //涟漪点设置
+              //文字和标志
+              // name: 'light',
+              type: 'effectScatter',
+              coordinateSystem: 'geo',
+              data: convertData(data.sort(function(a, b) {
+                return b.value - a.value;
+              }).slice(0, 10)),
+              symbolSize: function(val) {
+                return val[2]/8 ;
               },
-              emphasis: { //鼠标放在对应的地图块中的显示内容
-                show: true,
-                color: '#fff'
-              }
+              emphasis: {   //高亮区域样式
+                label: {
+                  show: true
+                },
+                itemStyle: {
+                    color:'#e8f218',
+                    shadowBlur: 10*scale,
+                    shadowColor: '#4b5cf2'
+                },
+              },
+              showEffectOn: 'render',
+              rippleEffect: {
+                brushType: 'stroke'
+              },
+              hoverAnimation: true,
+              label: {
+                normal: {
+                  formatter: '{b}',
+                  position: 'top',
+                  fontSize:10*scale,
+                  color:'#ffffff',
+                  show: true
+                },
+              },
+              itemStyle: {
+                normal: {
+                  show:true,
+                  color:'#66f2de',
+                  shadowBlur: 10*scale,
+                  shadowColor: '#66f2de'
+                }
+              },
+
+              zlevel: 1
+            },
+          ]
+        }
+        if(this.mode=='0'){option.geo={  //地图设置
+            show: true,
+            map: mapjson.name,
+            label: {
+              show: false
             },
+            selectedMode: 'single',
             roam: false,
+
+            emphasis: {   //高亮区域样式
+              label: {
+                show: false
+              },
+              itemStyle: {
+                areaColor: '#ffff2c'
+              },
+            },
             itemStyle: {
               normal: {
-                borderColor: 'rgba(147, 235, 248, 1)',
+                borderColor: '#666666',
                 borderWidth: 1,
                 areaColor: {
                   type: 'radial',
@@ -141,73 +266,143 @@
                   r: 0.8,
                   colorStops: [{
                     offset: 0,
-                    color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
+                    offset: 0,
+                    color: '#02363f' // 0% 处的颜色
                   }, {
                     offset: 1,
-                    color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
+                    color: '#02363f'
                   }],
                   globalCoord: false // 缺省为 false
                 },
+                shadowBlur: 0
               },
             },
-            tooltip: {
-              formatter: function(params) {  // 信息提示框（鼠标放在省份上显示数据
-                if (params.data == undefined || params.data == null) {
-                  return
-                } else {
-                  var value = (params.value + '').split('.');
-                  value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
-                  return  params.name + '<br/>' + params.seriesName + ': ' + value;
-                }
+            regions: colors
+          } }
+        if(this.mode=='1'){option.geo={  //地图设置
+          show: true,
+          map: mapjson.name,
+          label: {
+            show: false
+          },
+          selectedMode: 'single',
+          roam: false,
 
-              }
+          emphasis: {   //高亮区域样式
+            label: {
+              show: false
             },
-          }
-        };
+            itemStyle: {
+              areaColor: '#62fff7'
+            },
+          },
+          // itemStyle: {
+          //   normal: {
+          //     borderWidth:0
+          //   }
+          //   },
+          itemStyle: {
+            normal: {
+              borderColor: '#21e3dc',
+              borderWidth: 1,
+              areaColor: {
+                type: 'radial',
+                x: 0.5,
+                y: 0.5,
+                r: 0.8,
+                colorStops: [{
+                  offset: 0,
+                  offset: 0,
+                  color: '#02363f' // 0% 处的颜色
+                }, {
+                  offset: 1,
+                  color: '#02363f'
+                }],
+                globalCoord: false // 缺省为 false
+              },
+              // shadowColor: '#21e3dc',
+              // // shadowColor: 'rgba(255, 255, 255, 1)',
+              // shadowOffsetX: -1,
+              // shadowOffsetY: 1,
+              shadowBlur: 0
+            },
+            // emphasis: {
+            //   areaColor: '#389BB7',
+            //   borderWidth: 0
+            // }
+          },
+          // regions: colors
+        }}
 
+        // console.log(this.$shanxi,'测试')
         oroptionmapjsonr_charts.setOption(option)
-        let idx = 0;
-        var dataLen=dates.length
-        this.timer= setInterval(()=>{
-
-
+        // oroptionmapjsonr_charts.on("click", this.eConsole)
+        var app = {
+          currentIndex: 0,
+        };
 
-          this.$parent.indexflag=false
-          this.$parent.index0=idx
-          idx = (idx+ 1) % dataLen;
-          this.$parent.index=idx
+         var self=this
+        this.timer= setInterval(function () {
+          var dataLen = option.series[0].data.length;
+          // 取消之前高亮的图形
           oroptionmapjsonr_charts.dispatchAction({
             type: 'downplay',
-            seriesIndex: 0
+            seriesIndex: 1,
+            dataIndex: app.currentIndex
           });
 
+          self.$parent.indexflag=false
+          self.$parent.index0=app.currentIndex
+          app.currentIndex = (app.currentIndex + 1) % dataLen;
+          self.$parent.index=app.currentIndex
+          //console.log(app.currentIndex);
+          // 高亮当前图形
+          oroptionmapjsonr_charts.dispatchAction({
+            type: 'highlight',
+            seriesIndex: 1,
+            dataIndex: app.currentIndex,
+          });
+          // 显示 tooltip
+          oroptionmapjsonr_charts.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 1,
+            dataIndex: app.currentIndex
+          });
+        }, 3000);
+         var highindex=0
+        oroptionmapjsonr_charts.on("mouseover", function (param) {
+          self.$parent.indexflag=true
+          oroptionmapjsonr_charts.dispatchAction({
+            type: 'downplay',
+            seriesIndex: 0,
+            dataIndex: app.currentIndex
+          });
+          self.$parent.index=param.dataIndex
           // 高亮当前图形
           oroptionmapjsonr_charts.dispatchAction({
             type: 'highlight',
             seriesIndex: 0,
-            dataIndex:idx
+            dataIndex: param.dataIndex,
           });
+          // 显示 tooltip
           oroptionmapjsonr_charts.dispatchAction({
             type: 'showTip',
+            seriesIndex: 1,
+            dataIndex:param.dataIndex
+          });
+          highindex=param.dataIndex
+        })
+
+        oroptionmapjsonr_charts.on("mouseout", function () {
+          oroptionmapjsonr_charts.dispatchAction({
+            type: 'downplay',
             seriesIndex: 0,
-            dataIndex: idx
+            dataIndex: highindex
           });
-        }, 3000)
-
-
-
-        // var index = 0; //播放所在下标
-        // this.timer = setInterval(function() {
-        //   oroptionmapjsonr_charts.dispatchAction({
-        //     type: 'showTip',
-        //     seriesIndex: 0,
-        //     dataIndex: index
-        //   });
-        //   index++;
-        //   if(index >= dates.length) {
-        //     index = 0;
-        //   }
-        // }, 2000);
+        })
+      },
+      eConsole(data){
+        this.selmapdata(data.name)
       },
       selmapdata(name){
         for(var i=0;i<this.mapdata.length;i++){
@@ -224,7 +419,7 @@
             break
           }
           if(name==this.list[i]){
-            this.list.splice(0,i)
+           this.list.splice(0,i)
             this.selmapdata(name)
           }
         }
@@ -234,7 +429,7 @@
       //清除定时器
       clearInterval(this.timer);
     },
-    ready(){
+      ready(){
       this.list.push(this.mapdata[0].name)
       this.drawChinaMap(this.mapdata[0]);
     }

package/src/components/ManageHomeCS/SecurityCheck/CustomerType.vue

@@ -31,25 +31,25 @@
         var rich = {
           yellow: {
             color: "#ffc72b",
-            fontSize: 10 ,
+            fontSize: 10 * scale,
             padding: [5, 4],
             align: 'center'
           },
           total: {
             color: "#ffc72b",
-            fontSize: 10 ,
+            fontSize: 10 * scale,
             align: 'center'
           },
           white: {
             color: "#fff",
             align: 'center',
-            fontSize: 14 ,
+            fontSize: 14 * scale,
             padding: [6, 4]
           },
           blue: {
             color: '#e1e52a',
             fontWeight:'bolder',
-            fontSize: 16 ,
+            fontSize: 16 * scale,
             align: 'center',
             padding: [6, 4]
           },
@@ -72,10 +72,10 @@
             x: 'center',
             y: '80%',
             itemGap: 20,
-            itemWidth: 20 ,
-            itemHeight: 10 ,
+            itemWidth: 20 * scale,
+            itemHeight: 10 * scale,
             textStyle: {
-              fontSize: 12 ,
+              fontSize: 12 * scale,
               // padding: [0, 0, 0, 4 * scale],
               color: '#ffffff'
             },