manage-client 3.1.8-aode → 3.1.8-ls

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

@@ -0,0 +1,382 @@
+
+<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>
+
+</template>
+
+<script>
+
+    import '../../../stores/shanxi1.js';
+    import * as DataSql from '../../../stores/DataSql'
+    import co from 'co'
+
+
+    export default {
+        name: 'echart-map',
+        title:'echart-map',
+        props: {
+            mode: {
+                type:String,
+                default:'1'
+            },
+            idname: {
+                type:String,
+                default:'ssss'
+            },
+            index:Number,
+        },
+        data() {
+            return {
+                mapdata:[
+                    {name:'陕西',value:require('../../../../static/shanxi1.json')},
+                    {name:'中国',value:require('../../../../static/res.json')},
+                    {name:'保定',value:require('../../../../static/baoding1.json')},
+                    {name:'廊坊',value:require('../../../../static/langfang.json')},
+                    // {name:'咸阳市',value:require('../../../static/xianyangshi.json')},
+                    // {name:'西安市',value:require('../../../static/xianshi.json')}
+                ],
+                list:[],
+                xc:'',
+                timer:'',
+                resdata:[],
+            }
+        },
+        methods: {
+            drawChinaMap(mapjson,data) {
+                this.$parent.$parent.loadnum++
+                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 geoCoordMap = {};
+
+                this.$echarts.registerMap(mapjson.name, mapjson.value);
+                oroptionmapjsonr_charts.showLoading();
+                var mapFeatures = this.$echarts.getMap(mapjson.name).geoJson.features;
+                oroptionmapjsonr_charts.hideLoading();
+
+
+                var serise = []
+
+                serise = this.getsericer(data)
+
+
+                var colormode=''
+                if(this.mode=='0'){colormode="#e7c83c"}
+                if(this.mode=='1'){colormode="#66f2de"}
+
+                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: '40%'
+                    // },
+                    legend: {
+                        show: true,
+                        bottom: '3%',
+                        itemWidth: 18,
+                        textStyle: {
+                            color: '#333333',
+                            fontSize: 12,
+                            fontStyle: 'italic',
+                        }
+                    },
+                    color: col,
+                    tooltip: {
+                        show: true,
+                        alwaysShowContent: false,
+                        backgroundColor: '#ffffff',
+                        borderColor: '#3f99ff',
+                        borderWidth: 1,
+                        padding: 10,
+                        hideDelay: 100,
+                        triggerOn: 'mousemove',
+                        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 - 20, posY - 20];
+
+                        },
+                        extraCssText: 'width: auto;height:auto;',
+                        formatter: function (params) {
+                                return '<div style=\'text-align: center;font-size:16px;height: 1px;margin-bottom: 5px；font-weight: normal\'><span style="color:#087afd;font-size:16px;font-weight: normal">' + params.data.name + '</span></div><br/><span style="color:#087afd;font-size:16px;font-weight: normal">'
+                                    + '售气量&nbsp;&nbsp;<span style="color:#ff4f01;font-size:16px;font-weight: normal">' + params.data.value[2] + '</span></span>';
+                        }
+                    },
+
+
+                    geo: {
+                        show: true,
+                        map: mapjson.name,
+                        label: {
+                            show: false
+                        },
+                        selectedMode: 'single',
+                        roam: false,
+                        top:'8%',
+                        zoom:1,
+                        emphasis: {   //高亮区域样式
+                            label: {
+                                show: false
+                            },
+                            itemStyle: {
+                                areaColor: '#62fff7'
+                            },
+                        },
+                        itemStyle: {
+                            normal: {
+                                borderColor: 'rgba(147, 235, 248, 1)',
+                                borderWidth: 1,
+                                areaColor: {
+                                    type: 'radial',
+                                    x: 0.5,
+                                    y: 0.5,
+                                    r: 0.8,
+                                    colorStops: [{
+                                        offset: 0,
+                                        color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
+                                    }, {
+                                        offset: 1,
+                                        color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
+                                    }],
+                                    globalCoord: false // 缺省为 false
+                                },
+                                shadowColor: 'rgba(128, 217, 248, 1)',
+                                // shadowColor: 'rgba(255, 255, 255, 1)',
+                                shadowOffsetX: -2,
+                                shadowOffsetY: 2,
+                                shadowBlur: 10
+                            },
+                            emphasis: {
+                                areaColor: '#389BB7',
+                                borderWidth: 0
+                            }
+                        }
+
+                    },
+                    series: serise
+                }
+
+
+                oroptionmapjsonr_charts.setOption(option, true)
+                var app = {
+                    currentIndex: 0,
+                };
+
+                var self=this
+                this.timer= setInterval(function () {
+                    var dataLen = option.series[0].data.length;
+                    // 取消之前高亮的图形
+                    oroptionmapjsonr_charts.dispatchAction({
+                        type: 'downplay',
+                        seriesIndex: 0,
+                        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: 0,
+                        dataIndex: app.currentIndex,
+                    });
+                    // 显示 tooltip
+                    oroptionmapjsonr_charts.dispatchAction({
+                        type: 'showTip',
+                        seriesIndex: 0,
+                        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: param.dataIndex,
+                    // });
+                    // 显示 tooltip
+                    oroptionmapjsonr_charts.dispatchAction({
+                        type: 'showTip',
+                        seriesIndex: 0,
+                        dataIndex:param.dataIndex
+                    });
+                    highindex=param.dataIndex
+                })
+
+                // oroptionmapjsonr_charts.on("mouseout", function () {
+                //     oroptionmapjsonr_charts.dispatchAction({
+                //         type: 'downplay',
+                //         seriesIndex: 0,
+                //         dataIndex: highindex
+                //     });
+                // })
+            },
+            getsericer(data){
+               var serise=[]
+                var geoCoordMap={}
+                data.forEach(function (row) {
+                    if (row.f_coordinate != null) {
+                        var coor=row.f_coordinate.toString().split(',')
+                        geoCoordMap [row.name] = [coor[0], coor[1]]
+                    }
+                })
+                console.log(data,geoCoordMap)
+                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 scadata = convertData(data)
+                console.log(scadata)
+                serise.push({
+                    type: 'effectScatter',
+                    coordinateSystem: 'geo',
+                    data: scadata,
+                    symbolSize: 10,
+                    // symbol: 'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7',
+                      symbol:'circle',
+                      label: {
+                      normal: {
+                          // formatter: function (param) {
+                          //     if(param.name=='福瑞康管道'){
+                          //         return '<div style=\"margin-top: 20px;margin-right: 30px\">'+param.name+'</div>'
+                          //     }else if(param.name=='保定富瑞康'){
+                          //         return '<div style=\"margin-top: 20px;margin-right: 40px\">'+param.name+'</div>'
+                          //     }else {
+                          //         return param.name
+                          //     }
+                          // },
+
+                          formatter:'{b}',
+                              position: 'right',
+                              show: true
+                            },
+                            emphasis: {
+                                show: true
+                            }
+                        },
+                        itemStyle: {
+                            normal: {
+                                color: '#F06C00'
+                            }
+                        }
+                })
+                return serise
+                console.log(serise,'处理数据')
+            },
+            eConsole(data){
+                this.selmapdata(data.name)
+            },
+            selmapdata(name){
+                for(var i=0;i<this.mapdata.length;i++){
+                    if(name==this.mapdata[i].name){
+                        this.drawChinaMap(this.mapdata[i])
+                        this.list.push(this.mapdata[i].name)
+                        break
+                    }
+                }
+            },
+            selmap(name){
+                for(var i=0;i<this.list.length;i++){
+                    if(i==this.list.length-1){
+                        break
+                    }
+                    if(name==this.list[i]){
+                        this.list.splice(0,i)
+                        this.selmapdata(name)
+                    }
+                }
+            },
+            searchdata() {
+                if(this.timer!=''){
+                    this.resdata.splice(0,this.resdata.length)
+                    clearInterval(this.timer);
+                }
+                let sqldataone = DataSql.getData(this,'getfiliasgas',{}, 'resdata')
+                co(sqldataone)
+            },
+            // resize() {
+            //     this.searchdata()
+            // },
+        },
+        beforeDestroy() {
+            //清除定时器
+            clearInterval(this.timer);
+        },
+        watch: {
+            // 监听用户数据并进行绘图
+            'resdata': {
+                deep: true,
+                handler(val) {
+                    if(this.resdata.length<1){
+                        return
+                    }
+                    this.list.push(this.mapdata[2].name)
+                    this.drawChinaMap(this.mapdata[2],this.resdata);
+                }
+            },
+        },
+        ready(){
+            this.searchdata()
+        }
+    };
+</script>