manage-client 3.2.87-aode → 3.2.87-aodeToV4

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

@@ -1,389 +1,389 @@
-<template>
-    <div>
-      <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>
-</template>
-
-<script>
-  import * as DataSql from '../../../stores/DataSql'
-  import co from 'co'
-    export default {
-        name: "TextShanximap",
-      data() {
-        return {
-          xc: '',
-          index:0,
-          indexO:0,
-          idname:'manageShanxiMap',
-          indexflag:false,
-          selldata: [
-            {name:"西安市",value:600},
-            {name:"安康市",value:600},
-            {name:"榆林市",value:80},
-            {name:"铜川市",value:600},
-            {name:"延安市",value:600},
-            {name:"宝鸡市",value:600},
-            {name:"渭南市",value:600},
-            {name:"商洛市",value:600},
-            {name:"汉中市",value:600},
-            {name:"咸阳市",value:600}
-          ],     //销售数据
-          timer:'',
-        }
-      },
-      beforeDestroy() {
-        //清除定时器
-        clearInterval(this.timer);
-      },
-      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)
-
-        },
-        //请求后台数据
-        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)
-        },
-      },
-      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)
-
-          }
-       }
-      },
-
-      ready() {
-        // 拼接sql，请求后台
-        this.setBar()
-        // this.searchdata()
-      }
-    }
-</script>
-
-<style scoped>
-
-</style>
+<template>
+    <div>
+      <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>
+</template>
+
+<script>
+  import * as DataSql from '../../../stores/DataSql'
+  import co from 'co'
+    export default {
+        name: "TextShanximap",
+      data() {
+        return {
+          xc: '',
+          index:0,
+          indexO:0,
+          idname:'manageShanxiMap',
+          indexflag:false,
+          selldata: [
+            {name:"西安市",value:600},
+            {name:"安康市",value:600},
+            {name:"榆林市",value:80},
+            {name:"铜川市",value:600},
+            {name:"延安市",value:600},
+            {name:"宝鸡市",value:600},
+            {name:"渭南市",value:600},
+            {name:"商洛市",value:600},
+            {name:"汉中市",value:600},
+            {name:"咸阳市",value:600}
+          ],     //销售数据
+          timer:'',
+        }
+      },
+      beforeDestroy() {
+        //清除定时器
+        clearInterval(this.timer);
+      },
+      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)
+
+        },
+        //请求后台数据
+        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)
+        },
+      },
+      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)
+
+          }
+       }
+      },
+
+      ready() {
+        // 拼接sql，请求后台
+        this.setBar()
+        // this.searchdata()
+      }
+    }
+</script>
+
+<style scoped>
+
+</style>