manage-client 3.2.88-2 → 3.2.88-aode

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

@@ -1,12 +1,12 @@
 <template>
     <div>
-      <div style="width: 100%;height: 110%;float: left">
+      <div style="width: 50%;height: 110%;float: left">
         <shanxi mode="0" :index="index" :idname="idname" ref="shanxi"></shanxi>
       </div>
-<!--      <div class="map-1" style="width: 50%;height: 100%;float: left">-->
-<!--        <div class="map-bar">分公司销售气量</div>-->
-<!--        <div class="map-2" id="sellmap"></div>-->
-<!--      </div>-->
+      <div class="map-1" style="width: 50%;height: 100%;float: left">
+        <div class="map-bar">分公司销售气量</div>
+        <div class="map-2" id="sellmap"></div>
+      </div>
     </div>
 </template>
 
@@ -43,342 +43,342 @@
       },
       methods: {
         //绘图
-        // setBar() {
-        //   this.xc = this.$echarts.init(document.getElementById('sellmap'))
-        //   console.log('sssss')
-        //   var scale=this.$parent.$parent.scale
-        //
-        //   var lname=[]
-        //   var  maxdata=0
-        //   var kdata=[]
-        //   this.selldata.forEach(function (s) {
-        //     if(s.value>maxdata){
-        //       maxdata=s.value
-        //     }
-        //     lname.push(s.name)
-        //   })
-        //   this.selldata.forEach(function () {
-        //     kdata.push(maxdata)
-        //   })
-        //   var option1={
-        //     tooltip: {
-        //       trigger: 'axis',
-        //       axisPointer: { // 坐标轴指示器，坐标轴触发有效
-        //         type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-        //       },
-        //       formatter:function(params, ticket, callback){
-        //         return params[0].marker+'   <span style="font-weight: normal">'+params[0].name+'</span>&nbsp;&nbsp;&nbsp; <span style="color:#e1e52a;font-weight: bolder">'+params[0].value+'</span>';
-        //       },
-        //         textStyle:{
-        //             fontSize:16*scale
-        //         },
-        //       show: true,
-        //       alwaysShowContent:true,
-        //       backgroundColor:'#01396d',
-        //       // borderColor :'rgba(13, 109, 180)',
-        //       borderWidth:0,
-        //       hideDelay:100,
-        //       triggerOn:'mousemove',
-        //       padding:10*scale,
-        //       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;
-        //         }
-        //         posX=posX-20
-        //         return [posX, posY];
-        //       },
-        //       extraCssText:'width: auto;height:auto;',
-        //     },
-        //     grid: {
-        //       left: '3%',
-        //       top: '4%',
-        //       containLabel: true
-        //     },
-        //     xAxis: {
-        //       type: 'value',
-        //       scale: true,
-        //       position: 'bottom',
-        //       min: 0,
-        //       nameGap:30,
-        //       splitLine: {
-        //         show: false
-        //       },
-        //       axisLine: {
-        //         show: true,
-        //         lineStyle: {
-        //           color: '#08738e'
-        //         }
-        //       },
-        //       axisTick: {
-        //         show: false
-        //       },
-        //       axisLabel: {
-        //         margin: 8,
-        //         textStyle: {
-        //           color: '#95bad7'
-        //         }
-        //       },
-        //     },
-        //     yAxis: {
-        //       type: 'category',
-        //       //  name: 'TOP 20',
-        //       axisLine: {
-        //         show: true,
-        //           lineStyle: {
-        //           color: '#08738e'
-        //         }
-        //       },
-        //       axisTick: {
-        //         show: false,
-        //         lineStyle: {
-        //           color: '#ddd'
-        //         }
-        //       },
-        //       axisLabel: {
-        //         interval: 0,
-        //         textStyle: {
-        //           color: '#95bad7'
-        //         }
-        //       },
-        //       data: lname
-        //     },
-        //     dataZoom: [{
-        //       type: "inside",
-        //       startValue:0,
-        //       endValue:7,
-        //       zoomLock:false,
-        //       throttle:10,
-        //       orient:'vertical',
-        //     }],
-        //     series: [
-        //       {
-        //         name:'',
-        //         type: 'bar',
-        //         barWidth: '30%',
-        //         itemStyle: {
-        //           barBorderRadius: [0,16,16,0],
-        //             color:'#6fd9d0',
-        //         },
-        //         emphasis:{
-        //           itemStyle:{
-        //             color:'#ffff2c'
-        //           }
-        //         },
-        //         zlevel:2,
-        //         data: this.selldata
-        //       },
-        //       {
-        //         type: 'bar',
-        //         barGap: '-100%',
-        //         barWidth: '30%',
-        //         itemStyle: {
-        //           normal: {
-        //             barBorderRadius: [0,16,16,0],
-        //             color: '#2a374e'
-        //           },
-        //         },
-        //         labelLine: {
-        //           show: true,
-        //         },
-        //         zlevel: 0,
-        //         data: kdata
-        //       }
-        //     ]
-        //   }
-        //
-        //   this.xc.setOption(option1);
-        //
-        //   // // 轮播
-        //   // let idx = -1;
-        //   // var dataLen=this.selldata.length
-        //   // setInterval(()=>{
-        //   //   var maxidx=0
-        //   //   var minidx=0
-        //   //   // 取消之前选中的图形
-        //   //   oroptionmapjsonr_charts1.dispatchAction({
-        //   //     type: 'downplay',
-        //   //     seriesIndex: 0,
-        //   //     dataIndex: idx,
-        //   //   });
-        //   //
-        //   //   idx = (idx+ 1) % dataLen;
-        //   //   //console.log(app.currentIndex);
-        //   //   // 选中当前图形
-        //   //   oroptionmapjsonr_charts1.dispatchAction({
-        //   //     type: 'highlight',
-        //   //     seriesIndex: 0,
-        //   //     dataIndex: idx
-        //   //   });
-        //   //   maxidx=idx+7
-        //   //   minidx=idx
-        //   //   if(minidx>=dataLen-7){
-        //   //     maxidx=dataLen
-        //   //     minidx=dataLen-8
-        //   //   }
-        //   //   oroptionmapjsonr_charts1.dispatchAction({
-        //   //     type: 'showTip',
-        //   //     seriesIndex: 0,
-        //   //     dataIndex: idx
-        //   //   });
-        //   //
-        //   //   oroptionmapjsonr_charts1.dispatchAction({
-        //   //     type: 'dataZoom',
-        //   //     startValue:minidx,
-        //   //     endValue: maxidx
-        //   //   });
-        //   // }, 3000)
-        //
-        // },
+        setBar() {
+          this.xc = this.$echarts.init(document.getElementById('sellmap'))
+          console.log('sssss')
+          var scale=this.$parent.$parent.scale
+
+          var lname=[]
+          var  maxdata=0
+          var kdata=[]
+          this.selldata.forEach(function (s) {
+            if(s.value>maxdata){
+              maxdata=s.value
+            }
+            lname.push(s.name)
+          })
+          this.selldata.forEach(function () {
+            kdata.push(maxdata)
+          })
+          var option1={
+            tooltip: {
+              trigger: 'axis',
+              axisPointer: { // 坐标轴指示器，坐标轴触发有效
+                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+              },
+              formatter:function(params, ticket, callback){
+                return params[0].marker+'   <span style="font-weight: normal">'+params[0].name+'</span>&nbsp;&nbsp;&nbsp; <span style="color:#e1e52a;font-weight: bolder">'+params[0].value+'</span>';
+              },
+                textStyle:{
+                    fontSize:16*scale
+                },
+              show: true,
+              alwaysShowContent:true,
+              backgroundColor:'#01396d',
+              // borderColor :'rgba(13, 109, 180)',
+              borderWidth:0,
+              hideDelay:100,
+              triggerOn:'mousemove',
+              padding:10*scale,
+              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;
+                }
+                posX=posX-20
+                return [posX, posY];
+              },
+              extraCssText:'width: auto;height:auto;',
+            },
+            grid: {
+              left: '3%',
+              top: '4%',
+              containLabel: true
+            },
+            xAxis: {
+              type: 'value',
+              scale: true,
+              position: 'bottom',
+              min: 0,
+              nameGap:30,
+              splitLine: {
+                show: false
+              },
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  color: '#08738e'
+                }
+              },
+              axisTick: {
+                show: false
+              },
+              axisLabel: {
+                margin: 8,
+                textStyle: {
+                  color: '#95bad7'
+                }
+              },
+            },
+            yAxis: {
+              type: 'category',
+              //  name: 'TOP 20',
+              axisLine: {
+                show: true,
+                  lineStyle: {
+                  color: '#08738e'
+                }
+              },
+              axisTick: {
+                show: false,
+                lineStyle: {
+                  color: '#ddd'
+                }
+              },
+              axisLabel: {
+                interval: 0,
+                textStyle: {
+                  color: '#95bad7'
+                }
+              },
+              data: lname
+            },
+            dataZoom: [{
+              type: "inside",
+              startValue:0,
+              endValue:7,
+              zoomLock:false,
+              throttle:10,
+              orient:'vertical',
+            }],
+            series: [
+              {
+                name:'',
+                type: 'bar',
+                barWidth: '30%',
+                itemStyle: {
+                  barBorderRadius: [0,16,16,0],
+                    color:'#6fd9d0',
+                },
+                emphasis:{
+                  itemStyle:{
+                    color:'#ffff2c'
+                  }
+                },
+                zlevel:2,
+                data: this.selldata
+              },
+              {
+                type: 'bar',
+                barGap: '-100%',
+                barWidth: '30%',
+                itemStyle: {
+                  normal: {
+                    barBorderRadius: [0,16,16,0],
+                    color: '#2a374e'
+                  },
+                },
+                labelLine: {
+                  show: true,
+                },
+                zlevel: 0,
+                data: kdata
+              }
+            ]
+          }
+
+          this.xc.setOption(option1);
+
+          // // 轮播
+          // let idx = -1;
+          // var dataLen=this.selldata.length
+          // setInterval(()=>{
+          //   var maxidx=0
+          //   var minidx=0
+          //   // 取消之前选中的图形
+          //   oroptionmapjsonr_charts1.dispatchAction({
+          //     type: 'downplay',
+          //     seriesIndex: 0,
+          //     dataIndex: idx,
+          //   });
+          //
+          //   idx = (idx+ 1) % dataLen;
+          //   //console.log(app.currentIndex);
+          //   // 选中当前图形
+          //   oroptionmapjsonr_charts1.dispatchAction({
+          //     type: 'highlight',
+          //     seriesIndex: 0,
+          //     dataIndex: idx
+          //   });
+          //   maxidx=idx+7
+          //   minidx=idx
+          //   if(minidx>=dataLen-7){
+          //     maxidx=dataLen
+          //     minidx=dataLen-8
+          //   }
+          //   oroptionmapjsonr_charts1.dispatchAction({
+          //     type: 'showTip',
+          //     seriesIndex: 0,
+          //     dataIndex: idx
+          //   });
+          //
+          //   oroptionmapjsonr_charts1.dispatchAction({
+          //     type: 'dataZoom',
+          //     startValue:minidx,
+          //     endValue: maxidx
+          //   });
+          // }, 3000)
+
+        },
         //请求后台数据
         searchdata() {
-          // let sqldata = DataSql.getData(this, 'user',{}, 'resdata')
-          // co(sqldata)
-          // let sqldatapie = DataSql.getData(this,'useri',{}, 'resdatapie')
-          // co(sqldatapie)
-          // let sqldataone = DataSql.getData(this,'userapply',{}, 'resdataapply')
-          // co(sqldataone)
+          let sqldata = DataSql.getData(this, 'user',{}, 'resdata')
+          co(sqldata)
+          let sqldatapie = DataSql.getData(this,'useri',{}, 'resdatapie')
+          co(sqldatapie)
+          let sqldataone = DataSql.getData(this,'userapply',{}, 'resdataapply')
+          co(sqldataone)
         },
       },
       watch: {
-      // 'index'(){
-      //
-      //   var dataLen=this.selldata.length
-      //   var oroptionmapjsonr_charts1=this.xc
-      //   var self=this
-      //   var flag=false
-      //     if(this.indexflag){
-      //       var maxidx=0
-      //       var minidx=0
-      //       // 取消之前选中的图形
-      //       oroptionmapjsonr_charts1.dispatchAction({
-      //         type: 'downplay',
-      //         seriesIndex: 0,
-      //         dataIndex: self.indexO
-      //       });
-      //
-      //       //console.log(app.currentIndex);
-      //       maxidx=self.index+7
-      //       minidx=self.index
-      //       if(minidx>=dataLen-7){
-      //         maxidx=dataLen
-      //         minidx=dataLen-7
-      //         flag=true
-      //       }else {flag=false}
-      //
-      //       if(!flag){
-      //         oroptionmapjsonr_charts1.dispatchAction({
-      //           type: 'dataZoom',
-      //           startValue:minidx,
-      //           endValue: maxidx
-      //         });
-      //         setTimeout(function () {
-      //           oroptionmapjsonr_charts1.dispatchAction({
-      //             type: 'showTip',
-      //             seriesIndex: 0,
-      //             dataIndex: self.index,
-      //           });
-      //           // 选中当前图形
-      //           oroptionmapjsonr_charts1.dispatchAction({
-      //             type: 'highlight',
-      //             seriesIndex: 0,
-      //             dataIndex: self.index,
-      //           });
-      //         },70)
-      //       }else {
-      //         oroptionmapjsonr_charts1.dispatchAction({
-      //           type: 'showTip',
-      //           seriesIndex: 0,
-      //           dataIndex: self.index,
-      //         });
-      //         // 选中当前图形
-      //         oroptionmapjsonr_charts1.dispatchAction({
-      //           type: 'highlight',
-      //           seriesIndex: 0,
-      //           dataIndex: self.index,
-      //         });
-      //       }
-      //       this.indexflag=false
-      //     }else {
-      //     // 轮播
-      //
-      //    this.timer= setInterval(()=>{
-      //       var maxidx=0
-      //       var minidx=0
-      //       // 取消之前选中的图形
-      //       oroptionmapjsonr_charts1.dispatchAction({
-      //         type: 'downplay',
-      //         seriesIndex: 0,
-      //         dataIndex: self.indexO
-      //       });
-      //
-      //       //console.log(app.currentIndex);
-      //       maxidx=self.index+7
-      //       minidx=self.index
-      //       if(minidx>=dataLen-7){
-      //         maxidx=dataLen
-      //         minidx=dataLen-7
-      //         flag=true
-      //       }else {flag=false}
-      //
-      //       if(!flag){
-      //         oroptionmapjsonr_charts1.dispatchAction({
-      //           type: 'dataZoom',
-      //           startValue:minidx,
-      //           endValue: maxidx
-      //         });
-      //         setTimeout(function () {
-      //           oroptionmapjsonr_charts1.dispatchAction({
-      //             type: 'showTip',
-      //             seriesIndex: 0,
-      //             dataIndex: self.index,
-      //           });
-      //           // 选中当前图形
-      //           oroptionmapjsonr_charts1.dispatchAction({
-      //             type: 'highlight',
-      //             seriesIndex: 0,
-      //             dataIndex: self.index,
-      //           });
-      //         },70)
-      //       }else {
-      //         oroptionmapjsonr_charts1.dispatchAction({
-      //           type: 'showTip',
-      //           seriesIndex: 0,
-      //           dataIndex: self.index,
-      //         });
-      //         // 选中当前图形
-      //         oroptionmapjsonr_charts1.dispatchAction({
-      //           type: 'highlight',
-      //           seriesIndex: 0,
-      //           dataIndex: self.index,
-      //         });
-      //       }
-      //     },3000)
-      //
-      //     }
-      //  }
+      'index'(){
+
+        var dataLen=this.selldata.length
+        var oroptionmapjsonr_charts1=this.xc
+        var self=this
+        var flag=false
+          if(this.indexflag){
+            var maxidx=0
+            var minidx=0
+            // 取消之前选中的图形
+            oroptionmapjsonr_charts1.dispatchAction({
+              type: 'downplay',
+              seriesIndex: 0,
+              dataIndex: self.indexO
+            });
+
+            //console.log(app.currentIndex);
+            maxidx=self.index+7
+            minidx=self.index
+            if(minidx>=dataLen-7){
+              maxidx=dataLen
+              minidx=dataLen-7
+              flag=true
+            }else {flag=false}
+
+            if(!flag){
+              oroptionmapjsonr_charts1.dispatchAction({
+                type: 'dataZoom',
+                startValue:minidx,
+                endValue: maxidx
+              });
+              setTimeout(function () {
+                oroptionmapjsonr_charts1.dispatchAction({
+                  type: 'showTip',
+                  seriesIndex: 0,
+                  dataIndex: self.index,
+                });
+                // 选中当前图形
+                oroptionmapjsonr_charts1.dispatchAction({
+                  type: 'highlight',
+                  seriesIndex: 0,
+                  dataIndex: self.index,
+                });
+              },70)
+            }else {
+              oroptionmapjsonr_charts1.dispatchAction({
+                type: 'showTip',
+                seriesIndex: 0,
+                dataIndex: self.index,
+              });
+              // 选中当前图形
+              oroptionmapjsonr_charts1.dispatchAction({
+                type: 'highlight',
+                seriesIndex: 0,
+                dataIndex: self.index,
+              });
+            }
+            this.indexflag=false
+          }else {
+          // 轮播
+
+         this.timer= setInterval(()=>{
+            var maxidx=0
+            var minidx=0
+            // 取消之前选中的图形
+            oroptionmapjsonr_charts1.dispatchAction({
+              type: 'downplay',
+              seriesIndex: 0,
+              dataIndex: self.indexO
+            });
+
+            //console.log(app.currentIndex);
+            maxidx=self.index+7
+            minidx=self.index
+            if(minidx>=dataLen-7){
+              maxidx=dataLen
+              minidx=dataLen-7
+              flag=true
+            }else {flag=false}
+
+            if(!flag){
+              oroptionmapjsonr_charts1.dispatchAction({
+                type: 'dataZoom',
+                startValue:minidx,
+                endValue: maxidx
+              });
+              setTimeout(function () {
+                oroptionmapjsonr_charts1.dispatchAction({
+                  type: 'showTip',
+                  seriesIndex: 0,
+                  dataIndex: self.index,
+                });
+                // 选中当前图形
+                oroptionmapjsonr_charts1.dispatchAction({
+                  type: 'highlight',
+                  seriesIndex: 0,
+                  dataIndex: self.index,
+                });
+              },70)
+            }else {
+              oroptionmapjsonr_charts1.dispatchAction({
+                type: 'showTip',
+                seriesIndex: 0,
+                dataIndex: self.index,
+              });
+              // 选中当前图形
+              oroptionmapjsonr_charts1.dispatchAction({
+                type: 'highlight',
+                seriesIndex: 0,
+                dataIndex: self.index,
+              });
+            }
+          },3000)
+
+          }
+       }
       },
 
       ready() {
         // 拼接sql，请求后台
-        // this.setBar()
+        this.setBar()
         // this.searchdata()
       }
     }