首页地图模块弹窗位置不对bug处理

whyczyk

2022-06-27 81fae9e2e35e7b3f0cf909f78f58a28f43a69456

首页地图模块弹窗位置不对bug处理

 src/components/charts/newChinaMap.vue

@@ -1,9 +1,11 @@
<template>
    <div class="echarts-wrapper" @dblclick="dblclick">
        <div class="echarts-content" ref="chart" id="cityChart">

        </div>
        <div class="infoPanel" v-show="isShowInfoPanel" :style="{ left: mapInfoX + 'px', top: mapInfoY + 'px' }">
    <div class="echarts-content" ref="chart" id="cityChart"></div>
    <div
      class="infoPanel"
      v-show="isShowInfoPanel"
      :style="{ left: mapInfoX + 'px', top: mapInfoY + 'px' }"
    >
            <h4 class="infoPanel-Title">
                {{ mapInfoTitle }}
                <div class="closeBtn" @click.self="isShowInfoPanel=false"></div>
@@ -16,7 +18,7 @@
</template>

<script>
import * as echarts from 'echarts';
import * as echarts from "echarts";
import {
    searchMap,
    searchMapHomeState,
@@ -25,24 +27,24 @@
    searchHomeNum,
} from "../../assets/js/newApi";

import HomeNormal from '@/assets/images/home.png'
import HomeNormal from "@/assets/images/home.png";
let mapHomeImage = new Image();
mapHomeImage.src = HomeNormal;
// 正常的图标
import HomeNormalImage from '@/assets/images/home-normal.png';
import HomeNormalImage from "@/assets/images/home-normal.png";
let homeNormalImage = new Image();
homeNormalImage.src = HomeNormalImage;
// 充电的图标
import HomeChargeImage from '@/assets/images/home-charge.png';
import HomeChargeImage from "@/assets/images/home-charge.png";
let homeChargeImage = new Image();
homeChargeImage.src = HomeChargeImage;
// 告警图标
import HomeWarnImage from '@/assets/images/home-warn.png';
import HomeWarnImage from "@/assets/images/home-warn.png";
let homeWarnImage = new Image();
homeWarnImage.src = HomeWarnImage;
// 放电图标
import HomeDischargeImage from '@/assets/images/home-discharge.png';
import InfoPanel from '../indexPanel/newInfoPanel.vue';
import HomeDischargeImage from "@/assets/images/home-discharge.png";
import InfoPanel from "../indexPanel/newInfoPanel.vue";
let homeDischargeImage = new Image();
homeDischargeImage.src = HomeDischargeImage;
let chartData = []; //chart数据
@@ -60,7 +62,7 @@
            parentsStyle: {},
            isAllScreen: false,
            timers: null,
            mapName: 'zhongguo',
      mapName: "zhongguo",
            mapInfoX: null,
            mapInfoY: null,
            mapInfoTitle: "",
@@ -78,10 +80,10 @@
                nums: {
                    code: 0,
                    sum: 0,
                    newsum: 0
                }
          newsum: 0,
            },
        }
      },
    };
    },
    methods: {
        findParents(node, select) {
@@ -93,14 +95,14 @@
            }
        },
        dblclick(e) {
            this.isAllScreen = !this.isAllScreen
            let parents = this.findParents(e.currentTarget, 'vdr')
      this.isAllScreen = !this.isAllScreen;
      let parents = this.findParents(e.currentTarget, "vdr");
            if (this.isAllScreen) {
                this.parentsStyle = JSON.parse(JSON.stringify(parents.style));
                parents.style.transform = 'none';
                parents.style.width = '100%';
                parents.style.height = '100%';
                parents.style.position = 'fixed';
        parents.style.transform = "none";
        parents.style.width = "100%";
        parents.style.height = "100%";
        parents.style.position = "fixed";
                parents.style.left = 0;
                parents.style.right = 0;
                parents.style.bottom = 0;
@@ -111,11 +113,11 @@
                parents.style.width = this.parentsStyle.width;
                parents.style.height = this.parentsStyle.height;
                parents.style.position = this.parentsStyle.position;
                parents.style.left = 'initial';
                parents.style.right = 'initial';
                parents.style.bottom = 'initial';
                parents.style.top = 'initial';
                parents.style.zIndex = 'auto';
        parents.style.left = "initial";
        parents.style.right = "initial";
        parents.style.bottom = "initial";
        parents.style.top = "initial";
        parents.style.zIndex = "auto";
            }
            this.$options.chart.resize();
        },
@@ -125,39 +127,39 @@
        setData(sendData) {
            if (sendData) {
                this.$options.chartData = sendData;
                this.organizeData(sendData)
        this.organizeData(sendData);
            } else {
                // 初始化页面
                this.$nextTick(() => {
                    this.getAllMapOutlineAction();
                })
        });
            }
        },
        organizeData(data) {
            let geoJson = require(`../../../public/mapJson/${this.mapName}.json`);
            echarts.registerMap('map', geoJson);
      echarts.registerMap("map", geoJson);
            // 整体配置项
            let option = {
                tooltip: {
                    trigger: 'item',
          trigger: "item",
                    formatter: function (params) {
                        if (params.componentSubType == "map") {
                            return ''
              return "";
                        } else if (params.componentSubType == "scatter") {
                            return params.name;
                        }
                    }
          },
                },
                visualMap: {
                    show: false,
                    min: 0,
                    max: 500,
                    left: 'left',
                    top: 'bottom',
                    text: ['高', '低'], // 文本，默认为数值文本
          left: "left",
          top: "bottom",
          text: ["高", "低"], // 文本，默认为数值文本
                    calculable: true,
                    seriesIndex: [1],
                    inRange: {}
          inRange: {},
                },
                geo: {
                    map: "map",
@@ -167,53 +169,56 @@
                        normal: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                color: "#fff",
              },
                        },
                        emphasis: {
                            textStyle: {
                                color: '#fff'
                            }
                        }
                color: "#fff",
              },
            },
                    },
                    roam: true, //是否允许缩放
                    mapLocation: {
                        width: "110%",
                        height: "97%"
            height: "97%",
                    },
                    itemStyle: {
                        normal: {
                            borderColor: 'rgba(147, 235, 248, 1)',
              borderColor: "rgba(147, 235, 248, 1)",
                            borderWidth: 1,
                            areaColor: {
                                type: 'radial',
                type: "radial",
                                x: 0.5,
                                y: 0.5,
                                r: 0.8,
                                colorStops: [{
                colorStops: [
                  {
                                    offset: 0,
                                    color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                                }],
                                globalCoord: false // 缺省为 false
                    color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                            },
                            shadowColor: 'rgba(128, 217, 248, 1)',
                  {
                    offset: 1,
                    color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
              shadowColor: "rgba(128, 217, 248, 1)",
                            shadowOffsetX: -2,
                            shadowOffsetY: 2,
                            shadowBlur: 10
              shadowBlur: 10,
                        },
                        emphasis: {
                            areaColor: '#1ecee5',
              areaColor: "#1ecee5",
                            borderWidth: 0,
                            label: {
                                show: false
                            }
                        }
                    }
                show: false,
                },
                series: this.getSeries(data)
            },
          },
        },
        series: this.getSeries(data),
            };
            // 设置配置项
            this.setOption(option);
@@ -221,10 +226,10 @@
        resize() {
            setTimeout(() => {
                this.$options.chart.resize();
                if (JSON.stringify(this.$options.chartData) != '{}') {
        if (JSON.stringify(this.$options.chartData) != "{}") {
                    this.setData(this.$options.chartData);
                }
            }, 300)
      }, 300);
        },
        getSeries(opt) {
            // 未配置series
@@ -232,13 +237,14 @@
                return [];
            }
            // 设置配置项
            let series = opt.series
      let series = opt.series;
            // 返回
            return series;
        },
        getAllMapOutlineAction() {
            //查询激活轮廓图
            getAllMapOutlineAction().then((res) => {
      getAllMapOutlineAction()
        .then((res) => {
                let rs = res.data;
                if (rs.code == 1) {
                    let data = rs.data;
@@ -260,8 +266,8 @@
            //panel面板状态改变
            this.isShowInfoPanel = true;
            let poit = this.convertMain(homeData.longitude, homeData.latitude);
            this.mapInfoX = poit[0] - 120;
            this.mapInfoY = poit[1] - 190;
      this.mapInfoX = poit[0];
      this.mapInfoY = poit[1];
            this.mapInfoTitle = homeData.stationName;
            this.$nextTick(() => {
                this.$refs.infoPanel.setInfo(homeData); //传值子组件
@@ -277,16 +283,16 @@
        },
        startSearchMapHomeState() {
            this.timers = setInterval(() => {
                this.searchChartHomeState()
            }, 60 * 1000)
        this.searchChartHomeState();
      }, 60 * 1000);
        },
        initPage() {
            // 初始化地图
            this.initCityChart();
            chart = echarts.init(document.getElementById('cityChart'));
      chart = echarts.init(document.getElementById("cityChart"));

            chart.on("georoam", (params) => {
                clearInterval(this.timers)
        clearInterval(this.timers);
                if (!this.isShowInfoPanel) {
                    return;
                }
@@ -294,8 +300,8 @@
                this.timers = setTimeout(() => {
                    this.isShowInfoPanel = true;
                    let poit = this.convertMain(chartLng, chartLat);
                    this.mapInfoX = poit[0] - 120;
                    this.mapInfoY = poit[1] - 190;
          this.mapInfoX = poit[0];
          this.mapInfoY = poit[1];

                    var option = chart.getOption(); //获得option对象
                    if (params.zoom != null && params.zoom != undefined) {
@@ -356,7 +362,8 @@
                });
        },
        initCityChart() {
            searchMap().then((res) => {
      searchMap()
        .then((res) => {
                let rs = res.data.data;
                let list = this.mergeMapInfos(rs);
                if (list != undefined && list.length > 0) {
@@ -365,19 +372,21 @@
                        item.value = [];
                        item.value.push(item.longitude);
                        item.value.push(item.latitude);
                        tempData.push(item)
                    })
                    this.searchChartHomeState()
              tempData.push(item);
            });
            this.searchChartHomeState();
                    this.startSearchMapHomeState();
                } else {
                    this.initChart([], []);
                }
            }).catch((err) => {
                console.log(err)
            })
        .catch((err) => {
          console.log(err);
        });
        },
        searchChartHomeState() {
            searchMapHomeState().then((res) => {
      searchMapHomeState()
        .then((res) => {
                let rsState = res.data;
                let arr = [];
                abnormalArr = [];
@@ -385,130 +394,139 @@
                    let data = rsState.data;
                    data.map((item) => {
                        let infos = tempData.filter((jtem) => {
                            return jtem.stationId == item.stationId
                        })
                return jtem.stationId == item.stationId;
              });

                        if (infos.length > 0) {
                            let info = JSON.parse(JSON.stringify(infos[0]));
                            switch (item.num) {
                                case 1: // 落后
                                    info.img = HomeDischargeImage;
                                    info.color = '#ff6a6a';
                    info.color = "#ff6a6a";
                                    abnormalArr.push(info);
                                    break;
                                case 2: // 告警
                                    info.img = HomeWarnImage;
                                    info.color = '#d4ac6e';
                    info.color = "#d4ac6e";
                                    abnormalArr.push(info);
                                    break;
                                case 3:
                                    info.img = HomeChargeImage;
                                    info.color = '#4ba1fa';
                    info.color = "#4ba1fa";
                                    abnormalArr.push(info);
                                    break;
                                default:
                                    info.img = HomeNormalImage;
                                    break;
                            }
                            arr.push(info)
                arr.push(info);
                        }
                    })
            });
                    let arrId = [];
                    for (let item of arr) {
                        if (arrId.indexOf(item['stationId']) == -1) {
                            arrId.push(item['stationId']);
              if (arrId.indexOf(item["stationId"]) == -1) {
                arrId.push(item["stationId"]);
                            chartData.push(item);
                        }
                    }
                    this.initChart(chartData, abnormalArr);

                }
            }).catch((err) => {
                console.log(err)
            })
        .catch((err) => {
          console.log(err);
        });
        },
        initChart(chartData, abnormalArr) { //初始化chart图
    initChart(chartData, abnormalArr) {
      //初始化chart图
            let option = {};
            if (abnormalArr.length > 0) {
                option = {
                    series: [{ //图片
                        name: '图片',
                        type: 'scatter',
                        coordinateSystem: 'geo',
          series: [
            {
              //图片
              name: "图片",
              type: "scatter",
              coordinateSystem: "geo",
                        symbol: function (value, params) {
                            return 'image://' + params.data.img
                return "image://" + params.data.img;
                        },
                        symbolSize: [26, 26],
                        label: {
                            normal: {
                                show: false,
                            }
                },
                        },
                        data: chartData,
                        showEffectOn: 'render',
              showEffectOn: "render",
                        rippleEffect: {
                            brushType: 'stroke'
                brushType: "stroke",
                        },
                        hoverAnimation: true,
                        zlevel: 2
                    }, { //波纹点
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        showEffectOn: 'render',
              zlevel: 2,
            },
            {
              //波纹点
              type: "effectScatter",
              coordinateSystem: "geo",
              showEffectOn: "render",
                        zlevel: 1,
                        rippleEffect: {
                            period: 4,
                            scale: 4,
                            brushType: 'fill'
                brushType: "fill",
                        },
                        hoverAnimation: false,
                        label: {
                            normal: {
                                show: false
                  show: false,
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: function (value) {
                                    return value.data.color
                    return value.data.color;
                                },
                                shadowBlur: 8,
                                shadowColor: function (value) {
                                    return value.data.color
                    return value.data.color;
                                },
                            }
                },
                        },
                        symbolSize: [15, 15],
                        data: abnormalArr
                    }]
              data: abnormalArr,
            },
          ],
                };
            } else {
                option = {
                    series: [{ //图片
                        name: '图片',
                        type: 'scatter',
                        coordinateSystem: 'geo',
          series: [
            {
              //图片
              name: "图片",
              type: "scatter",
              coordinateSystem: "geo",
                        symbol: function (value, params) {
                            return 'image://' + params.data.img
                return "image://" + params.data.img;
                        },
                        symbolSize: [26, 26],
                        label: {
                            normal: {
                                show: false,
                            }
                },
                        },
                        data: chartData,
                        showEffectOn: 'render',
              showEffectOn: "render",
                        rippleEffect: {
                            brushType: 'stroke'
                brushType: "stroke",
                        },
                        hoverAnimation: true,
                        zlevel: 2
                    }]
              zlevel: 2,
            },
          ],
                };
            }
            this.setData(option);
            window.addEventListener('resize', this.resize);
      window.addEventListener("resize", this.resize);
        },
        mergeMapInfos(list) {
            var mergeData = [];
@@ -529,7 +547,10 @@
            for (var i = 0; i < mergeData.length; i++) {
                var _mergeData = mergeData[i];
                // 经纬度相同
                if (mapInfo.latitude == _mergeData.latitude && mapInfo.longitude == _mergeData.longitude) {
        if (
          mapInfo.latitude == _mergeData.latitude &&
          mapInfo.longitude == _mergeData.longitude
        ) {
                    rs = i;
                }
            }
@@ -548,10 +569,10 @@
            );
        },
        outClear() {
            window.removeEventListener('resize', this.resize);
            clearInterval(this.timers)
            this.timers = null
        }
      window.removeEventListener("resize", this.resize);
      clearInterval(this.timers);
      this.timers = null;
    },
    },
    mounted() {
        // 基于准备好的dom，初始化echarts实例
@@ -565,16 +586,16 @@
            setTimeout(() => {
                this.isShowInfoPanel = true;
                let poit = this.convertMain(chartLng, chartLat);
                this.mapInfoX = poit[0] - 120;
                this.mapInfoY = poit[1] - 190;
        this.mapInfoX = poit[0];
        this.mapInfoY = poit[1];
            }, 300);
        });
    },
    destroyed() {
        window.removeEventListener('resize', this.resize);
        clearInterval(this.timers)
    window.removeEventListener("resize", this.resize);
    clearInterval(this.timers);
    },
}
};
</script>

<style scoped>
@@ -583,7 +604,10 @@
    background-color: #ffffff;
    color: rgb(0, 0, 0);
    border: 1px solid #999;
    z-index: 99;
  transform: translateY(-100%);
  margin-top: -26px;
  margin-left: -120px;
  z-index: 2;
}

.infoPanel .infoPanel-Title {