manage-client 3.1.8-aode → 3.1.8-ls

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

@@ -0,0 +1,394 @@
+<template>
+    <div>
+      <div style="width: 100%;height: 110%;float: left">
+<!--        <shanxi mode="0" :index="index" :idname="idname" ref="shanxi"></shanxi>-->
+        <baoding mode="0" :index="index" :idname="idname" v-ref:baoding></baoding>
+      </div>
+<!--      <div class="map-1" style="width: 50%;height: 100%;float: left">-->
+<!--&lt;!&ndash;        <div class="map-bar">分公司销售气量</div>&ndash;&gt;-->
+<!--        <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)
+        },
+          resize() {
+            console.log('刷新地图')
+              this.$refs.baoding.searchdata()
+          },
+      },
+      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>