大屏对接新平台

whyczyk

2022-03-01 f868ff46ef4fb25a01364f3c5d0fe220d32b7ad0

大屏对接新平台

 src/assets/js/axios.js

@@ -1,6 +1,7 @@
import Vue from 'vue';
import axios from 'axios';
// import qs from 'qs';
let newPlatform = sessionStorage.getItem('newPlatform')
if (process.env.NODE_ENV == 'dev') {
    // 跨域请求
    axios.defaults.baseURL = 'http://localhost:8090/screen';
@@ -13,13 +14,19 @@
axios.interceptors.request.use(function (config) {
    if (config.asy) {
        if (process.env.NODE_ENV == 'dev') {
            // 跨域请求
            config.baseURL = 'http://localhost:8919/fg';
            config.withCredentials = true; // 保持请求头
            if (newPlatform == 1) {
                config.baseURL = 'http://localhost:8091/fg';
            } else {
                config.baseURL = 'http://localhost:8919/fg';
            }
        } else {
            config.baseURL = `http://${location.hostname}:8919/fg`;
            config.withCredentials = true; // 保持请求头
            if (newPlatform == 1) {
                config.baseURL = `http://${location.hostname}:8091/fg`;
            } else {
                config.baseURL = `http://${location.hostname}:8919/fg`;
            }
        }
        config.withCredentials = true; // 保持请求头
    }
    // 在发送请求之前做些什么
    return config;

 src/assets/js/newApi.js

New file
@@ -0,0 +1,61 @@
import axios from "./axios";

/**
 * 查询已添加到地图的机房
 * 参数:json={"adata":{"alm_cleared_type":0,"alm_id":1},"bplan":{"discharge_reason":3}}
 */
export const searchMap = () => {
  return axios({
    method: "GET",
    url: "/battMapInformation/searchUserManageStation",
    asy: 1
  });
};

// 统计核容/停电放电
export const searchMapHomeState = () => {
  return axios({
    method: "GET",
    url: '/battMapInformation/findStationState',
    asy: 1
  });
};

/**
 * 首页地图json数据配置  查询关联地图
 * 参数： json={"id":id}
 */
export const getAllMapOutlineAction = () => {
  return axios({
    method: "GET",
    url: "/mapOutline/all",
    asy: 1
  });
};

/**
 * 根据设备id查询配置
 * @param data
 * @returns {AxiosPromise}
 */
export const searchByDevId = (params) => {
  return axios({
    method: 'GET',
    url: '/station3D/byDeviceId',
    params: params,
    asy: 1
  });
};

/**
 * 根据基站信息查询基站的告警和落后信息
 * 参数： json={"stationId":"@机房编号"}
 */
export const searchHomeNum = (params) => {
  return axios({
    method: "GET",
    url: "/battMapInformation/multAmout",
    params: params,
    asy: 1
  });
};

 src/components/charts/AcInputWarp.vue

@@ -72,17 +72,31 @@
        },
        toParentPage(value) {
            if (typeof (value) == 'string') {
                window.parent.parent.postMessage({
                    cmd: "syncPage",
                    params: {
                        pageInfo: {
                            label: "电源实时告警",
                            name: "powerRealtimeInfo",
                            src: '#/powerRealtimeInfo/?alarmType=' + value,
                            closable: true
                        },
                    }
                }, "*");
                if (sessionStorage.getItem('newPlatform') == 1) {
                    window.parent.parent.postMessage({
                        cmd: "syncPage",
                        params: {
                            pageInfo: {
                                label: "电源实时告警",
                                name: "powerRealtimeInfo",
                                src: '/alarmMager/powerRealtimeInfo/?alarmType=' + value,
                                closable: true
                            },
                        }
                    }, "*");
                } else {
                    window.parent.parent.postMessage({
                        cmd: "syncPage",
                        params: {
                            pageInfo: {
                                label: "电源实时告警",
                                name: "powerRealtimeInfo",
                                src: '#/powerRealtimeInfo/?alarmType=' + value,
                                closable: true
                            },
                        }
                    }, "*");
                }
            }
        },
        clickItem(name) {

 src/components/charts/CustomPie.vue

@@ -59,17 +59,31 @@
        },
        toParentPage(value) {
            if (typeof (value) == 'string') {
                window.parent.parent.postMessage({
                    cmd: "syncPage",
                    params: {
                        pageInfo: {
                            label: "电源实时告警",
                            name: "powerRealtimeInfo",
                            src: '#/powerRealtimeInfo/?alarmType=' + value,
                            closable: true
                        },
                    }
                }, "*");
                if (sessionStorage.getItem('newPlatform') == 1) {
                    window.parent.parent.postMessage({
                        cmd: "syncPage",
                        params: {
                            pageInfo: {
                                label: "电源实时告警",
                                name: "powerRealtimeInfo",
                                src: '/alarmMager/powerRealtimeInfo/?alarmType=' + value,
                                closable: true
                            },
                        }
                    }, "*");
                } else {
                    window.parent.parent.postMessage({
                        cmd: "syncPage",
                        params: {
                            pageInfo: {
                                label: "电源实时告警",
                                name: "powerRealtimeInfo",
                                src: '#/powerRealtimeInfo/?alarmType=' + value,
                                closable: true
                            },
                        }
                    }, "*");
                }
            }
        },
        setOption(opt) {

 src/components/charts/MonCap.vue

@@ -93,17 +93,31 @@
            this.$refs.circleChart.resize();
        },
        toParentPage() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "电池实时告警",
                        name: "batteryrTimequery",
                        src: "#/batteryrTimequery",
                        closable: true
                    },
                }
            }, "*");
            if (sessionStorage.getItem('newPlatform') == 1) {
                window.parent.parent.postMessage({
                    cmd: "syncPage",
                    params: {
                        pageInfo: {
                            label: "电池告警实时查询",
                            name: "batteryrTimequery",
                            src: "/alarmMager/batteryrTimequery",
                            closable: true
                        },
                    }
                }, "*");
            } else {
                window.parent.parent.postMessage({
                    cmd: "syncPage",
                    params: {
                        pageInfo: {
                            label: "电池实时告警",
                            name: "batteryrTimequery",
                            src: "#/batteryrTimequery",
                            closable: true
                        },
                    }
                }, "*");
            }
        },
        setData(data) {
            this.$nextTick(() => {

 src/components/charts/PictorialBar.vue

@@ -61,17 +61,31 @@
        },
        toParentPage(value) {
            if (typeof (value) == 'string') {
                window.parent.parent.postMessage({
                    cmd: "syncPage",
                    params: {
                        pageInfo: {
                            label: "电池实时告警",
                            name: "batteryrTimequery",
                            src: "#/batteryrTimequery/?alarmType=" + value,
                            closable: true
                        },
                    }
                }, "*");
                if (sessionStorage.getItem('newPlatform') == 1) {
                    window.parent.parent.postMessage({
                        cmd: "syncPage",
                        params: {
                            pageInfo: {
                                label: "电池告警实时查询",
                                name: "batteryrTimequery",
                                src: "/alarmMager/batteryrTimequery/?alarmType=" + value,
                                closable: true
                            },
                        }
                    }, "*");
                } else {
                    window.parent.parent.postMessage({
                        cmd: "syncPage",
                        params: {
                            pageInfo: {
                                label: "电池实时告警",
                                name: "batteryrTimequery",
                                src: "#/batteryrTimequery/?alarmType=" + value,
                                closable: true
                            },
                        }
                    }, "*");
                }
            }
        },
        setOption(opt) {

 src/components/charts/RoseChart.vue

@@ -61,17 +61,31 @@
        },
        toParentPage(value) {
            if (typeof (value) == 'string') {
                window.parent.parent.postMessage({
                    cmd: "syncPage",
                    params: {
                        pageInfo: {
                            label: "设备状态查询",
                            name: "btsStatusTest",
                            src: "#/dataMager/btsStatus?workStauts=" + value,
                            closable: true
                        },
                    }
                }, "*");
                if (sessionStorage.getItem('newPlatform') == 1) {
                    window.parent.parent.postMessage({
                        cmd: "syncPage",
                        params: {
                            pageInfo: {
                                label: "设备状态查询",
                                name: "btsStatus",
                                src: "/dataTest/btsStatus?workStauts=" + value,
                                closable: true
                            },
                        }
                    }, "*");
                } else {
                    window.parent.parent.postMessage({
                        cmd: "syncPage",
                        params: {
                            pageInfo: {
                                label: "设备状态查询",
                                name: "btsStatusTest",
                                src: "#/dataMager/btsStatus?workStauts=" + value,
                                closable: true
                            },
                        }
                    }, "*");
                }
            }
        },
        toParentPage2(value) {

 src/components/charts/RoseChartED.vue

@@ -61,17 +61,31 @@
        },
        toParentPage(value) {
            if (typeof (value) == 'string') {
                window.parent.parent.postMessage({
                    cmd: "syncPage",
                    params: {
                        pageInfo: {
                            label: "电池信息统计分析",
                            name: "produceTotal",
                            src: "#/dataMager/produceTotal/?xuHang=" + value,
                            closable: true
                        },
                    }
                }, "*");
                if (sessionStorage.getItem('newPlatform') == 1) {
                    window.parent.parent.postMessage({
                        cmd: "syncPage",
                        params: {
                            pageInfo: {
                                label: "电池信息统计分析",
                                name: "produceTotal",
                                src: "/dataMager/produceTotal/?xuHang=" + value,
                                closable: true
                            },
                        }
                    }, "*");
                } else {
                    window.parent.parent.postMessage({
                        cmd: "syncPage",
                        params: {
                            pageInfo: {
                                label: "电池信息统计分析",
                                name: "produceTotal",
                                src: "#/dataMager/produceTotal/?xuHang=" + value,
                                closable: true
                            },
                        }
                    }, "*");
                }
            }
        },
        setOption(opt) {

 src/components/charts/RoseChartHea.vue

@@ -59,17 +59,31 @@
            this.$options.chart.resize();
        },
        toParentPage() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "落后单体查询",
                        name: "taskplan",
                        src: "#/reportStatistics/taskplan",
                        closable: true
                    },
                }
            }, "*");
            if (sessionStorage.getItem('newPlatform') == 1) {
                window.parent.parent.postMessage({
                    cmd: "syncPage",
                    params: {
                        pageInfo: {
                            label: "落后单体查询",
                            name: "taskplan",
                            src: "/reportStatistics/taskplan",
                            closable: true
                        },
                    }
                }, "*");
            } else {
                window.parent.parent.postMessage({
                    cmd: "syncPage",
                    params: {
                        pageInfo: {
                            label: "落后单体查询",
                            name: "taskplan",
                            src: "#/reportStatistics/taskplan",
                            closable: true
                        },
                    }
                }, "*");
            }
        },
        setOption(opt) {
            this.$options.chart.setOption(opt);

 src/components/charts/abeamProChart.vue

@@ -72,17 +72,32 @@
        },
        toParentPage(value) {
            if (typeof (value) == 'string') {
                window.parent.parent.postMessage({
                    cmd: "syncPage",
                    params: {
                        pageInfo: {
                            label: "设备状态查询",
                            name: "btsStatusTest",
                            src: "#/dataMager/btsStatus?workStauts=" + value,
                            closable: true
                        },
                    }
                }, "*");
                if (sessionStorage.getItem('newPlatform') == 1) {
                    window.parent.parent.postMessage({
                        cmd: "syncPage",
                        params: {
                            pageInfo: {
                                label: "设备状态查询",
                                name: "btsStatus",
                                src: "/dataTest/btsStatus?workStauts=" + value,
                                closable: true
                            },
                        }
                    }, "*");
                } else {
                    window.parent.parent.postMessage({
                        cmd: "syncPage",
                        params: {
                            pageInfo: {
                                label: "设备状态查询",
                                name: "btsStatusTest",
                                src: "#/dataMager/btsStatus?workStauts=" + value,
                                closable: true
                            },
                        }
                    }, "*");
                }

            }
        },
        setOption(opt) {

 src/components/charts/chinaMap.vue

@@ -1,5 +1,6 @@
<template>
    <div class="echarts-wrapper" @dblclick="dblclick">
    <new-china-map v-if="newPlatform==1"></new-china-map>
    <div class="echarts-wrapper" @dblclick="dblclick" v-else>
        <div class="echarts-content" ref="chart" id="cityChart">

        </div>
@@ -43,6 +44,7 @@
// 放电图标
import HomeDischargeImage from '@/assets/images/home-discharge.png';
import InfoPanel from '../indexPanel/InfoPanel.vue';
import newChinaMap from './newChinaMap.vue';
let homeDischargeImage = new Image();
homeDischargeImage.src = HomeDischargeImage;
let chartData = []; //chart数据
@@ -51,12 +53,13 @@
let chart, chartLng, chartLat;

export default {
    components: { InfoPanel },
    components: { InfoPanel, newChinaMap },
    name: "chinaMap",
    chart: "",
    chartData: "",
    data() {
        return {
            newPlatform: 0,
            parentsStyle: {},
            isAllScreen: false,
            timers: null,
@@ -128,7 +131,9 @@
                this.organizeData(sendData)
            } else {
                // 初始化页面
                this.getAllMapOutlineAction();
                this.$nextTick(() => {
                    this.getAllMapOutlineAction();
                })
            }
        },
        organizeData(data) {
@@ -570,6 +575,7 @@
                this.mapInfoY = poit[1] - 190;
            }, 300);
        });
        this.newPlatform = sessionStorage.getItem('newPlatform')
    },
    destroyed() {
        window.removeEventListener('resize', this.resize);

 src/components/charts/dischargeCircuit.vue

@@ -82,17 +82,31 @@
        },
        toParentPage(value) {
            if (typeof (value) == 'string') {
                window.parent.parent.postMessage({
                    cmd: "syncPage",
                    params: {
                        pageInfo: {
                            label: "电池实时告警",
                            name: "batteryrTimequery",
                            src: "#/batteryrTimequery/?alarmType=" + value,
                            closable: true
                        },
                    }
                }, "*");
                if (sessionStorage.getItem('newPlatform') == 1) {
                    window.parent.parent.postMessage({
                        cmd: "syncPage",
                        params: {
                            pageInfo: {
                                label: "电池告警实时查询",
                                name: "batteryrTimequery",
                                src: "/alarmMager/batteryrTimequery/?alarmType=" + value,
                                closable: true
                            },
                        }
                    }, "*");
                } else {
                    window.parent.parent.postMessage({
                        cmd: "syncPage",
                        params: {
                            pageInfo: {
                                label: "电池实时告警",
                                name: "batteryrTimequery",
                                src: "#/batteryrTimequery/?alarmType=" + value,
                                closable: true
                            },
                        }
                    }, "*");
                }
            }
        },
        setOption(opt) {

 src/components/charts/histogramAlternating.vue

@@ -82,17 +82,32 @@
        },
        toParentPage(value) {
            if (typeof (value) == 'string') {
                window.parent.parent.postMessage({
                    cmd: "syncPage",
                    params: {
                        pageInfo: {
                            label: "电源实时告警",
                            name: "powerRealtimeInfo",
                            src: '#/powerRealtimeInfo/?alarmType=' + value,
                            closable: true
                        },
                    }
                }, "*");
                if (sessionStorage.getItem('newPlatform') == 1) {
                    window.parent.parent.postMessage({
                        cmd: "syncPage",
                        params: {
                            pageInfo: {
                                label: "电源实时告警",
                                name: "powerRealtimeInfo",
                                src: '/alarmMager/powerRealtimeInfo/?alarmType=' + value,
                                closable: true
                            },
                        }
                    }, "*");
                } else {
                    window.parent.parent.postMessage({
                        cmd: "syncPage",
                        params: {
                            pageInfo: {
                                label: "电源实时告警",
                                name: "powerRealtimeInfo",
                                src: '#/powerRealtimeInfo/?alarmType=' + value,
                                closable: true
                            },
                        }
                    }, "*");
                }

            }
        },
        setOption(opt) {

 src/components/charts/imgPieChart.vue

@@ -70,17 +70,31 @@
        },
        toParentPage(value) {
            if (typeof (value) == 'string') {
                window.parent.parent.postMessage({
                    cmd: "syncPage",
                    params: {
                        pageInfo: {
                            label: "电源实时告警",
                            name: "powerRealtimeInfo",
                            src: '#/powerRealtimeInfo/?alarmType=' + value,
                            closable: true
                        },
                    }
                }, "*");
                if (sessionStorage.getItem('newPlatform') == 1) {
                    window.parent.parent.postMessage({
                        cmd: "syncPage",
                        params: {
                            pageInfo: {
                                label: "电源实时告警",
                                name: "powerRealtimeInfo",
                                src: '/alarmMager/powerRealtimeInfo/?alarmType=' + value,
                                closable: true
                            },
                        }
                    }, "*");
                } else {
                    window.parent.parent.postMessage({
                        cmd: "syncPage",
                        params: {
                            pageInfo: {
                                label: "电源实时告警",
                                name: "powerRealtimeInfo",
                                src: '#/powerRealtimeInfo/?alarmType=' + value,
                                closable: true
                            },
                        }
                    }, "*");
                }
            }
        },
        setOption(opt) {

 src/components/charts/latticeBar.vue

@@ -67,17 +67,31 @@
        },
        toParentPage(value) {
            if (typeof (value) == 'string') {
                window.parent.parent.postMessage({
                    cmd: "syncPage",
                    params: {
                        pageInfo: {
                            label: "电池实时告警",
                            name: "batteryrTimequery",
                            src: "#/batteryrTimequery/?alarmType=" + value,
                            closable: true
                        },
                    }
                }, "*");
                if (sessionStorage.getItem('newPlatform') == 1) {
                    window.parent.parent.postMessage({
                        cmd: "syncPage",
                        params: {
                            pageInfo: {
                                label: "电池实时告警",
                                name: "batteryrTimequery",
                                src: "/alarmMager/batteryrTimequery/?alarmType=" + value,
                                closable: true
                            },
                        }
                    }, "*");
                } else {
                    window.parent.parent.postMessage({
                        cmd: "syncPage",
                        params: {
                            pageInfo: {
                                label: "电池实时告警",
                                name: "batteryrTimequery",
                                src: "#/batteryrTimequery/?alarmType=" + value,
                                closable: true
                            },
                        }
                    }, "*");
                }
            }
        },
        setOption(opt) {

 src/components/charts/monomerVoltage.vue

@@ -82,17 +82,31 @@
        },
        toParentPage(value) {
            if (typeof (value) == 'string') {
                window.parent.parent.postMessage({
                    cmd: "syncPage",
                    params: {
                        pageInfo: {
                            label: "电池实时告警",
                            name: "batteryrTimequery",
                            src: "#/batteryrTimequery/?alarmType=" + value,
                            closable: true
                        },
                    }
                }, "*");
                if (sessionStorage.getItem('newPlatform') == 1) {
                    window.parent.parent.postMessage({
                        cmd: "syncPage",
                        params: {
                            pageInfo: {
                                label: "电池告警实时查询",
                                name: "batteryrTimequery",
                                src: "/alarmMager/batteryrTimequery/?alarmType=" + value,
                                closable: true
                            },
                        }
                    }, "*");
                } else {
                    window.parent.parent.postMessage({
                        cmd: "syncPage",
                        params: {
                            pageInfo: {
                                label: "电池实时告警",
                                name: "batteryrTimequery",
                                src: "#/batteryrTimequery/?alarmType=" + value,
                                closable: true
                            },
                        }
                    }, "*");
                }
            }
        },
        setOption(opt) {

 src/components/charts/newChinaMap.vue

New file
@@ -0,0 +1,634 @@
<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' }">
            <h4 class="infoPanel-Title">
                {{ mapInfoTitle }}
                <div class="closeBtn" @click.self="isShowInfoPanel=false"></div>
            </h4>
            <div class="infoPanel-center">
                <info-panel ref="infoPanel"></info-panel>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import {
    searchMap,
    searchMapHomeState,
    getAllMapOutlineAction,
    searchByDevId,
    searchHomeNum,
} from "../../assets/js/newApi";

import HomeNormal from '@/assets/images/home.png'
let mapHomeImage = new Image();
mapHomeImage.src = HomeNormal;
// 正常的图标
import HomeNormalImage from '@/assets/images/home-normal.png';
let homeNormalImage = new Image();
homeNormalImage.src = HomeNormalImage;
// 充电的图标
import HomeChargeImage from '@/assets/images/home-charge.png';
let homeChargeImage = new Image();
homeChargeImage.src = HomeChargeImage;
// 告警图标
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';
let homeDischargeImage = new Image();
homeDischargeImage.src = HomeDischargeImage;
let chartData = []; //chart数据
let abnormalArr = []; //异常数组
let tempData = []; //站点数组
let chart, chartLng, chartLat;

export default {
    components: { InfoPanel },
    name: "chinaMap",
    chart: "",
    chartData: "",
    data() {
        return {
            parentsStyle: {},
            isAllScreen: false,
            timers: null,
            mapName: 'zhongguo',
            mapInfoX: null,
            mapInfoY: null,
            mapInfoTitle: "",
            isShowInfoPanel: false,
            panelInfo: {
                num: 369,
                stationId: "42070471",
                stationName: "贵州省-贵阳市-观山湖区-观山湖区护理学院-设备1",
                stationName3: "观山湖区护理学院",
                address: "湖北省武汉市武昌区",
                longitude: 114.37285909,
                latitude: 30.56442241,
                information: "",
                fbsdeviceId: 910000111,
                nums: {
                    code: 0,
                    sum: 0,
                    newsum: 0
                }
            },
        }
    },
    methods: {
        findParents(node, select) {
            var parent = node.parentNode;
            if (parent === null || parent.className.indexOf(select) != -1) {
                return parent;
            } else {
                return this.findParents(parent, select);
            }
        },
        dblclick(e) {
            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.left = 0;
                parents.style.right = 0;
                parents.style.bottom = 0;
                parents.style.top = 0;
                parents.style.zIndex = 99999;
            } else {
                parents.style.transform = this.parentsStyle.transform;
                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';
            }
            this.$options.chart.resize();
        },
        setOption(opt) {
            this.$options.chart.setOption(opt);
        },
        setData(sendData) {
            if (sendData) {
                this.$options.chartData = sendData;
                this.organizeData(sendData)
            } else {
                // 初始化页面
                this.$nextTick(() => {
                    this.getAllMapOutlineAction();
                })
            }
        },
        organizeData(data) {
            let geoJson = require(`../../../public/mapJson/${this.mapName}.json`);
            echarts.registerMap('map', geoJson);
            // 整体配置项
            let option = {
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        if (params.componentSubType == "map") {
                            return ''
                        } else if (params.componentSubType == "scatter") {
                            return params.name;
                        }
                    }
                },
                visualMap: {
                    show: false,
                    min: 0,
                    max: 500,
                    left: 'left',
                    top: 'bottom',
                    text: ['高', '低'], // 文本，默认为数值文本
                    calculable: true,
                    seriesIndex: [1],
                    inRange: {}
                },
                geo: {
                    map: "map",
                    layoutCenter: ["55%", "50%"],
                    layoutSize: "100%",
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        emphasis: {
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    roam: true, //是否允许缩放
                    mapLocation: {
                        width: "110%",
                        height: "97%"
                    },
                    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)',
                            shadowOffsetX: -2,
                            shadowOffsetY: 2,
                            shadowBlur: 10
                        },
                        emphasis: {
                            areaColor: '#1ecee5',
                            borderWidth: 0,
                            label: {
                                show: false
                            }
                        }
                    }
                },
                series: this.getSeries(data)
            };
            // 设置配置项
            this.setOption(option);
        },
        resize() {
            setTimeout(() => {
                this.$options.chart.resize();
                if (JSON.stringify(this.$options.chartData) != '{}') {
                    this.setData(this.$options.chartData);
                }
            }, 300)
        },
        getSeries(opt) {
            // 未配置series
            if (!opt || !opt.series) {
                return [];
            }
            // 设置配置项
            let series = opt.series
            // 返回
            return series;
        },
        getAllMapOutlineAction() {
            //查询激活轮廓图
            getAllMapOutlineAction().then((res) => {
                let rs = res.data;
                if (rs.code == 1) {
                    let data = rs.data;
                    data.map((item) => {
                        if (item.status == 1) {
                            this.mapName = item.name;
                        }
                    });
                }
                this.$nextTick(() => {
                    this.initPage();
                });
            })
                .catch((err) => {
                    console.log(err);
                });
        },
        changeChartPanelStatus(homeData) {
            //panel面板状态改变
            this.isShowInfoPanel = true;
            let poit = this.convertMain(homeData.longitude, homeData.latitude);
            this.mapInfoX = poit[0] - 120;
            this.mapInfoY = poit[1] - 190;
            this.mapInfoTitle = homeData.stationName;
            this.$nextTick(() => {
                this.$refs.infoPanel.setInfo(homeData); //传值子组件
            });
        },
        convertMain(Lng, lat) {
            //根据经纬度计算定位
            // let getModel = chart.getModel().getSeries()[1];
            let seriesModel = chart.getModel().getSeriesByIndex(0);
            let coordSys = seriesModel.coordinateSystem;
            let point = coordSys.dataToPoint([Lng, lat]);
            return point;
        },
        startSearchMapHomeState() {
            this.timers = setInterval(() => {
                this.searchChartHomeState()
            }, 60 * 1000)
        },
        initPage() {
            // 初始化地图
            this.initCityChart();
            chart = echarts.init(document.getElementById('cityChart'));

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

                    var option = chart.getOption(); //获得option对象
                    if (params.zoom != null && params.zoom != undefined) {
                        //捕捉到缩放时
                        option.series[0].zoom = option.geo[0].zoom; //下层geo的缩放等级跟着上层的geo一起改变
                        option.series[0].center = option.geo[0].center; //下层的geo的中心位置随着上层geo一起改变
                    } else {
                        //捕捉到拖曳时
                        option.series[0].center = option.geo[0].center; //下层的geo的中心位置着上层geo一起改变
                    }
                    chart.setOption(option); //设置option

                    // this.startSearchMapHomeState();
                }, 300);
            });
            chart.off("click"); //防止chart点击触发多次
            chart.on("click", (params) => {
                //点击跳转实时数据
                if (params.seriesType == "scatter") {
                    chartLng = params.data.longitude;
                    chartLat = params.data.latitude;
                    this.showChartPanel(
                        params.data.stationId,
                        params.data.fbsdeviceId,
                        params.data
                    );
                }
            });
        },
        // 查询告警落后的信息
        showChartPanel(sId, dev_id, homeData) {
            // 检测是否存在3D机房
            searchByDevId({
                deviceId: dev_id,
            })
                .then((res) => {
                    let rs = res.data;
                    if (rs.data.length != 0) {
                        this.areas = rs.data;
                        //this.hdwDialog = true;
                        this.showThreeHomeDialog(this.areas);
                    } else {
                        searchHomeNum({
                            stationId: sId,
                        })
                            .then((res) => {
                                let rs = res.data;
                                homeData.nums = rs.data;
                                this.changeChartPanelStatus(homeData);
                            })
                            .catch((error) => {
                                console.log(error);
                            });
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        initCityChart() {
            searchMap().then((res) => {
                let rs = res.data.data;
                let list = this.mergeMapInfos(rs);
                if (list != undefined && list.length > 0) {
                    list.map((item) => {
                        item.name = item.stationName;
                        item.value = [];
                        item.value.push(item.longitude);
                        item.value.push(item.latitude);
                        tempData.push(item)
                    })
                    this.searchChartHomeState()
                    this.startSearchMapHomeState();
                } else {
                    this.initChart([], []);
                }
            }).catch((err) => {
                console.log(err)
            })
        },
        searchChartHomeState() {
            searchMapHomeState().then((res) => {
                let rsState = res.data;
                let arr = [];
                abnormalArr = [];
                if (rsState.code === 1) {
                    let data = rsState.data;
                    data.map((item) => {
                        let infos = tempData.filter((jtem) => {
                            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';
                                    abnormalArr.push(info);
                                    break;
                                case 2: // 告警
                                    info.img = HomeWarnImage;
                                    info.color = '#d4ac6e';
                                    abnormalArr.push(info);
                                    break;
                                case 3:
                                    info.img = HomeChargeImage;
                                    info.color = '#4ba1fa';
                                    abnormalArr.push(info);
                                    break;
                                default:
                                    info.img = HomeNormalImage;
                                    break;
                            }
                            arr.push(info)
                        }
                    })
                    let arrId = [];
                    for (let item of arr) {
                        if (arrId.indexOf(item['stationId']) == -1) {
                            arrId.push(item['stationId']);
                            chartData.push(item);
                        }
                    }
                    this.initChart(chartData, abnormalArr);

                }
            }).catch((err) => {
                console.log(err)
            })
        },
        initChart(chartData, abnormalArr) { //初始化chart图
            let option = {};
            if (abnormalArr.length > 0) {
                option = {
                    series: [{ //图片
                        name: '图片',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        symbol: function (value, params) {
                            return 'image://' + params.data.img
                        },
                        symbolSize: [26, 26],
                        label: {
                            normal: {
                                show: false,
                            }
                        },
                        data: chartData,
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        hoverAnimation: true,
                        zlevel: 2
                    }, { //波纹点
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        showEffectOn: 'render',
                        zlevel: 1,
                        rippleEffect: {
                            period: 4,
                            scale: 4,
                            brushType: 'fill'
                        },
                        hoverAnimation: false,
                        label: {
                            normal: {
                                show: false
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: function (value) {
                                    return value.data.color
                                },
                                shadowBlur: 8,
                                shadowColor: function (value) {
                                    return value.data.color
                                },
                            }
                        },
                        symbolSize: [15, 15],
                        data: abnormalArr
                    }]
                };
            } else {
                option = {
                    series: [{ //图片
                        name: '图片',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        symbol: function (value, params) {
                            return 'image://' + params.data.img
                        },
                        symbolSize: [26, 26],
                        label: {
                            normal: {
                                show: false,
                            }
                        },
                        data: chartData,
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        hoverAnimation: true,
                        zlevel: 2
                    }]
                };
            }
            this.setData(option);
            window.addEventListener('resize', this.resize);
        },
        mergeMapInfos(list) {
            var mergeData = [];
            // 遍历list
            for (var i = 0; i < list.length; i++) {
                var _list = list[i];
                var isIn = this.checkMapInfoIsIn(_list, mergeData);
                if (isIn == -1) {
                    mergeData.push(_list);
                }
            }
            // 返回合并值
            return mergeData;
        },
        checkMapInfoIsIn(mapInfo, mergeData) {
            var rs = -1;
            // 遍历mergeData
            for (var i = 0; i < mergeData.length; i++) {
                var _mergeData = mergeData[i];
                // 经纬度相同
                if (mapInfo.latitude == _mergeData.latitude && mapInfo.longitude == _mergeData.longitude) {
                    rs = i;
                }
            }
            return rs;
        },
        showThreeHomeDialog(areas) {
            window.parent.parent.postMessage(
                {
                    cmd: "showDialog",
                    params: {
                        dialog: "hdwDialog",
                        pageInfo: areas,
                    },
                },
                "*"
            );
        },
        outClear() {
            window.removeEventListener('resize', this.resize);
            clearInterval(this.timers)
            this.timers = null
        }
    },
    mounted() {
        // 基于准备好的dom，初始化echarts实例
        this.$options.chart = echarts.init(this.$refs.chart);
        // 监听chartMap的面板
        window.addEventListener("resize", () => {
            if (!this.isShowInfoPanel || !this.mapName) {
                return;
            }
            this.isShowInfoPanel = false;
            setTimeout(() => {
                this.isShowInfoPanel = true;
                let poit = this.convertMain(chartLng, chartLat);
                this.mapInfoX = poit[0] - 120;
                this.mapInfoY = poit[1] - 190;
            }, 300);
        });
    },
    destroyed() {
        window.removeEventListener('resize', this.resize);
        clearInterval(this.timers)
    },
}
</script>

<style scoped>
.infoPanel {
    position: absolute;
    background-color: #ffffff;
    color: rgb(0, 0, 0);
    border: 1px solid #999;
    z-index: 99;
}

.infoPanel .infoPanel-Title {
    border-bottom: 1px solid #ccc;
    height: 31px;
    line-height: 30px;
    background-color: #f9f9f9;
    overflow: hidden;
    height: 30px;
    padding: 0 5px;
    font-size: 12px;
    position: relative;
}

.infoPanel .infoPanel-Title .closeBtn {
    background: url("../../assets/images/iw_close1d3.gif") 0 0 no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 9px;
    right: 12px;
    width: 10px;
    height: 10px;
    user-select: none;
    overflow: hidden;
    cursor: pointer;
    line-height: 9999px;
    z-index: 10000;
}

.infoPanel .infoPanel-center {
    padding: 3px 5px;
    overflow-x: auto;
    overflow-y: hidden;
}

.infoPanel::after {
    content: "";
    display: block;
    z-index: 5;
    position: absolute;
    bottom: -31px;
    width: 58px;
    height: 31px;
    left: 125px;
    background: url("../../assets/images/iw_tail.png") 0 0 no-repeat;
    background-size: 100% 100%;
}
</style>

 src/components/charts/prossPieChart.vue

@@ -32,17 +32,31 @@
    methods: {
        toParentPage(value) {
            if (typeof (value) == 'string') {
                window.parent.parent.postMessage({
                    cmd: "syncPage",
                    params: {
                        pageInfo: {
                            label: "电源实时告警",
                            name: "powerRealtimeInfo",
                            src: '#/powerRealtimeInfo/?alarmType=' + value,
                            closable: true
                        },
                    }
                }, "*");
                if (sessionStorage.getItem('newPlatform') == 1) {
                    window.parent.parent.postMessage({
                        cmd: "syncPage",
                        params: {
                            pageInfo: {
                                label: "电源实时告警",
                                name: "powerRealtimeInfo",
                                src: '/alarmMager/powerRealtimeInfo/?alarmType=' + value,
                                closable: true
                            },
                        }
                    }, "*");
                } else {
                    window.parent.parent.postMessage({
                        cmd: "syncPage",
                        params: {
                            pageInfo: {
                                label: "电源实时告警",
                                name: "powerRealtimeInfo",
                                src: '#/powerRealtimeInfo/?alarmType=' + value,
                                closable: true
                            },
                        }
                    }, "*");
                }
            }
        },
        setOption(opt) {

 src/components/charts/triangleBarChart.vue

@@ -68,17 +68,32 @@
        },
        toParentPage(value) {
            if (typeof (value) == 'string') {
                window.parent.parent.postMessage({
                    cmd: "syncPage",
                    params: {
                        pageInfo: {
                            label: "电源实时告警",
                            name: "powerRealtimeInfo",
                            src: '#/powerRealtimeInfo/?alarmType=' + value,
                            closable: true
                        },
                    }
                }, "*");
                if (sessionStorage.getItem('newPlatform') == 1) {
                    window.parent.parent.postMessage({
                        cmd: "syncPage",
                        params: {
                            pageInfo: {
                                label: "电源实时告警",
                                name: "powerRealtimeInfo",
                                src: '/alarmMager/powerRealtimeInfo/?alarmType=' + value,
                                closable: true
                            },
                        }
                    }, "*");
                } else {
                    window.parent.parent.postMessage({
                        cmd: "syncPage",
                        params: {
                            pageInfo: {
                                label: "电源实时告警",
                                name: "powerRealtimeInfo",
                                src: '#/powerRealtimeInfo/?alarmType=' + value,
                                closable: true
                            },
                        }
                    }, "*");
                }

            }
        },
        setOption(opt) {

 src/components/indexPanel/newInfoPanel.vue

New file
@@ -0,0 +1,148 @@
<template>
    <div class="map-panel-content">
        <div class="content-item content-item-nowrap">
            蓄电池组告警数目：{{warnText}}
            <a class="content-detail" href="javascript:;" @click="goBattWarn">详情>></a>
        </div>
        <div class="content-item content-item-nowrap">
            蓄电池组落后数目：{{info.nums.numBadBatt}}
            <a class="content-detail" href="javascript:;" @click="goBehind">详情>></a>
        </div>
        <div class="content-item">
            <el-button type="primary" size="mini" @click="goRealTime">实时数据</el-button>
            <el-button type="primary" size="mini" @click="goHistory">历史数据</el-button>
        </div>
        <div class="content-item">地址：{{info.address}}</div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            isCanDel: false,
            username: sessionStorage.getItem('username'),
            info: {
                num: 369,
                stationId: "42070471",
                stationName: "贵州省-贵阳市-观山湖区-观山湖区护理学院-设备1",
                stationName3: "观山湖区护理学院",
                address: "湖北省武汉市武昌区",
                longitude: 114.37285909,
                latitude: 30.56442241,
                information: "",
                fbsdeviceId: 910000111,
                nums: {
                    code: 0,
                    numBadBatt: 0,
                    numPlan: 0,
                    battAlarmStr: "0,0"
                }
            }
        }
    },
    methods: {
        // 跳转到历史数据
        goHistory() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "历史数据",
                        name: "history",
                        src: "/dataTest/history" + this.search,
                        closable: true
                    }
                }
            }, "*");
        },
        // 跳转到实时数据
        goRealTime() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "实时监控",
                        name: "movingRingSystem",
                        src: "/dataTest/movingRingSystem" + this.search + '&listReload=1',
                        closable: true
                    }
                }
            }, "*");
        },
        // 跳转告警界面
        goBattWarn() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "电池告警实时查询",
                        name: "batteryrTimequery",
                        src: "/alarmMager/batteryrTimequery" + this.search + '&fromType=fromIndex',
                        closable: true
                    }
                }
            }, "*");
        },
        // 跳转到落后机房
        goBehind() {
            // this.$layer.msg('该功能暂未开启');
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "落后单体查询",
                        name: "taskplan",
                        src: "/reportStatistics/taskplan?province=" + this.info.StationName.split('-')[0] + '&home=' + this.info.StationName + '&fromType=fromIndex',
                        closable: true
                    }
                }
            }, "*");
        },
        // 跳转到延时
        goTimeout() {
            this.$layer.msg('该功能暂未开启');
        },
        setInfo(info) {
            this.info = info;
        },
        setType(type) {
            this.type = type;
        }
    },
    computed: {
        search() {
            let list = this.info.stationName.split('-');
            return '?province=' + list[0] + '&city=' + list[1] + '&county=' + list[2] + '&home=' + list[3]
        },
        warnText() {
            let warns = this.info.nums.battAlarmStr.split(",");
            return "未确认：" + (warns[1] || 0) + "; 已确认：" + (warns[0] || 0);
        }
    },
}
</script>

<style scoped>
.map-panel-content {
    width: 300Px;
}

.content-item {
    padding: 4px;
    font-size: 12px;
}

.content-item-nowrap {
    white-space: nowrap;
}

.content-detail {
    margin-left: 8px;
}

.box-height {
    height: 32px;
}
</style>

 src/pages/exhibition.vue

@@ -49,6 +49,9 @@
        if (this.$route.query.userId) {
            localStorage.setItem('userId', this.$route.query.userId);
        }
        if (this.$route.query.newPlatform) {
            sessionStorage.setItem('newPlatform', this.$route.query.newPlatform);
        }
        this.nowlayOut.appName = this.$route.query.name;
        if (this.$route.query.head && this.$route.query.head == 1) {
            this.isHeader = false
@@ -106,7 +109,13 @@
                                nowBox[0].appendChild(chartModular.$el)
                                this.modularArr.push(chartModular);
                            }
                            chartModular.setData();
                            if (chartModular.id == "chart14") {
                                this.$nextTick(() => {
                                    chartModular.$children[0].setData()
                                })
                            } else {
                                chartModular.setData();
                            }
                            chartModular.resize();
                        }, 0)