fj-dc-ui/.svn/pristine/9d/9de73279e06bd17852a8da091aa23509b7f80d93.svn-base

<template>
  <div class="map3D" id="map3D">

  </div>
</template>

<script>
  import echarts from "echarts";
  import '@util/echarts-gl.min.js';
  import axios from 'axios' //引入axios
  import {formatDate} from "@util/gw_date.js"
  import { hostUrl } from "@util/global_variable.js";
  import {
      getPblmProAll,
      getUserById
  } from "../../api/homeMainView.js";
  export default {
    components: {

    },
    props: [],
    data() {
      //这里存放数据
      return {
          chart1:null,
          currentOrgNm:"",
          currentRlcode:"",
          currentOrgId:"",
          //地图数据
          chartMapData:{
              mapPercent:[],
              geoCoordMap:{},
              geoCoordMapList:[],
          }
      }
    },
    //监听属性 类似于data概念
    computed: {
        formatDateTime() {
            return formatDate
        },
        hostUrl(){
            return hostUrl
        },
        organNm() {
            return this.currentOrgNm;
        },
        organCode() {
            return this.currentRlcode;
        }
    },
    //监控data中的数据变化
    watch: {

    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        var _self = this;
        this.getPerson();
        this.$nextTick(function () {
            var _self = this;
            window.onresize = function() {
                _self.resizeCharts();
            }
        });
    },
    //方法集合
    methods: {
        GetQueryString(name) {
          var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
          var r = window.location.search.substr(1).match(reg);
          if (r != null) return unescape(r[2]); return null;
        },
        getPerson(){
            var _self = this;
            var persId = this.GetQueryString("userid");
            getUserById(persId).then((res) => {
                if(res.data){
                    _self.currentOrgId = res.data.defaultOrg.orgId;
                    _self.currentRlcode = res.data.defaultOrg.rlcode;
                    _self.currentOrgNm = res.data.defaultOrg.orgNm;
                    this.initData();
                }
            });
        },
        resizeCharts(){
            this.chart1.resize();
        },
        toVal(val){
            if(val!=null && val!=""){
                return val.toFixed(2)
            }
            return 0;
        },
        initData(){
            var _self = this;
            _self.chartMapData.mapPercent = [];
            _self.chartMapData.geoCoordMap = [];
            _self.chartMapData.geoCoordMapList = [];
            getPblmProAll({timeType:"5",objType:"",orgId:this.currentOrgId}).then((res) => {
                if(res.data!=null && res.data.length>0){
                    for(var i = 0;i<res.data.length;i++){
                        if(res.data[i].adName!="合计"){
                            _self.chartMapData.geoCoordMap[res.data[i].adName] = [res.data[i].lgtd,res.data[i].lttd];
                            _self.chartMapData.geoCoordMapList.push({
                                name:res.data[i].adName,
                                value:res.data[i].pblmSize
                            });
                        }
                    }
                }
                _self.initChart1();
            });
        },
        initAddVcdFeatures(){
            let geoJsonName = this.organCode.substr(0, 6) + ".json";
            return axios.get('/src/assets/addvGeoData/' + geoJsonName);
        },
        async initChart1() {
            var _self = this;
            var convertData = function () {
                var res = [];
                for (var i = 0; i < _self.chartMapData.geoCoordMapList.length; i++) {
                    var geoCoord = _self.chartMapData.geoCoordMap[_self.chartMapData.geoCoordMapList[i].name];
                    if (geoCoord) {
                        res.push({
                            name: _self.chartMapData.geoCoordMapList[i].name,
                            value: geoCoord.concat(_self.chartMapData.geoCoordMapList[i].value)
                        });
                    }
                }

                return res;
            };

            this.chart1 = echarts.init(document.getElementById('map3D'));
            var jsonAddvcd  = await this.initAddVcdFeatures();
            echarts.registerMap(this.organNm, jsonAddvcd.data);
            let option = {
                title:{
                    text:(this.currentOrgId=='041'?'全国各省':this.currentOrgNm)+(this.organCode.substr(0, 2)=="66"?'各师问题数量分布':'各市问题数量分布'),
                    left:'center',
                    padding: 20,
                    textStyle:{
                        color:'rgb(62,215,213)',

                    }
                },
                tooltip: {
                    trigger: 'axis',
                },
                geo3D: {
                    map: this.organNm,
                    show: true,
                    zlevel: 15,
                    boxWidth:80,
                    boxHeight:30,
                    label: {
                        show:true,
                        formatter:function(params){
                            var content='',
                            content=params.name;
                            return content;
                        },
                        distance:0,
                        textStyle:{
                            color:'#ffffff',
                            fontWeight : 'bold',
                            fontSize :17,
                            backgroundColor: 'rgba(255,255,255,0)'
                        },
                    },
                    viewControl: { // 用于鼠标的旋转，缩放等视角控制。
                        distance: 100, // [ default: 100 ] 默认视角距离主体的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。在 projection 为'perspective'的时候有效。
                        minDistance: 40, // [ default: 40 ] 视角通过鼠标控制能拉近到主体的最小距离。在 projection 为'perspective'的时候有效。
                        maxDistance: 400, // [ default: 400 ] 视角通过鼠标控制能拉远到主体的最大距离。在 projection 为'perspective'的时候有效。
                        alpha: 40, // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
                        beta: 15, // 视角绕 y 轴，即左右旋转的角度。[ default: 0 ]
                        minAlpha: -360, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
                        maxAlpha: 360, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
                        minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
                        maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
                        center: [0,0,0], // 视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。
                        animation: true, // 是否开启动画。[ default: true ]
                        animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
                        animationEasingUpdate: 'cubicInOut' // 过渡动画的缓动效果。[ default: cubicInOut ]
                    },
                    light: {
                        main: {
                            shadow: true,
                            shadowQuality: 'ultra',
                        },

                    },
                    //地面的背景颜色
                    groundPlane: {
                        show: true,
                        color:'transparent'
                    },
                    //特效设置
                    postEffect: {
                        enable:false
                    },
                    itemStyle: {
                        areaColor: '#1b4474',
                        color:'#1b4474',
                        borderColor: 'rgb(62,215,213)',
                        borderWidth: 1
                    },
                    //鼠标 hover 高亮时图形和标签的样式
                    emphasis:{
                        label:{
                            show:true,
                            distance:10
                        },
                        itemStyle: {
                            color:'#15244a',
                        }
                    }
                },

                series: [
                    {
                        type: 'bar3D',
                        coordinateSystem: 'geo3D',
                        zlevel: 1,
                        barSize: 0.5,
                        shading: 'lambert',
                        itemStyle: {
                            color: '#c2f151'
                        },
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: '#c2f151',
                                backgroundColor: 'transparent'
                            },
                            formatter: function(params) {
                                return params.value[2]
                            }
                        },
                        data:convertData()
                    }
                ]
            };
            this.chart1.clear()
            this.chart1.setOption(option);
        }
    },
    beforeCreate() {
    }, //生命周期 - 创建之前
    beforeMount() {
    }, //生命周期 - 挂载之前
    beforeUpdate() {
    }, //生命周期 - 更新之前
    updated() {
    }, //生命周期 - 更新之后
    beforeDestroy() {
    }, //生命周期 - 销毁之前
    destroyed() {
    }, //生命周期 - 销毁完成
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发
  };
</script>
<style>
  .map3D{
     width: 100%;
     height:100%;
     background: url("../../assets/bjdc.png") no-repeat;
     background-size: 100% 100%;
  }

</style>