地图组件及图表模块跳转方法添加

whyczyk

2021-09-30 c04569e75ef0c526f7f08169cc5724c83005d250

地图组件及图表模块跳转方法添加

 package-lock.json

Diff too large

 package.json

@@ -17,7 +17,8 @@
    "vue": "^2.6.11",
    "vue-draggable-resizable-gorkys": "^2.4.4",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
    "vuex": "^3.4.0",
    "vue-layer": "^1.2.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",

 src/assets/images/iw_close1d3.gif

 src/assets/images/iw_tail.png

 src/assets/js/api.js

@@ -176,3 +176,46 @@
    asy: 1
  })
}

/**
 * 删除地图上的机房
 * 参数：json={"num":141,"StationId":"42070545",
 * "StationName":"湖北省-武汉市-BTS-东西湖区-GDXG演示","StationName3":"",
 * "Address":"湖北省-武汉市-东西湖区-公园南路","longitude":114.252963,"latitude":30.646197,"information":"",
 * "FBSDeviceId":910000120}
 */
export const delMapHome = (params) => {
  return axios({
    method: "post",
    url: "BattMap_informationAction!del",
    data: "json=" + JSON.stringify(params),
    asy: 1
  });
};

/**
 * 根据设备id查询配置
 * @param data
 * @returns {AxiosPromise}
 */
export const searchByDevId = (data) => {
  return axios({
    method: 'post',
    url: 'Station3DAction!getByDeviceId',
    data: 'json=' + JSON.stringify(data),
    asy: 1
  });
};

/**
 * 根据基站信息查询基站的告警和落后信息
 * 参数： json={"StationId":"@机房编号","FBSDeviceId":"@设备id"}
 */
export const searchHomeNum = (data) => {
  return axios({
    method: "post",
    url: "BattMap_informationAction!multiAmount",
    data: 'json=' + JSON.stringify(data),
    asy: 1
  });
};

 src/assets/js/tools/Timeout.js

New file
@@ -0,0 +1,67 @@
// 延时计时器
function Timeout(name) {
    this.timer = null;
    this.time = '';
    this.callback = '';
    this.workState = false;
    this.name = name?name:-33;
}
// 开启计时器并添加
Timeout.prototype.start = function(callback, time, exe) {
    // 配置执行函数
    if(typeof callback == 'function' && typeof time == 'number') {
        this.callback = callback;
        this.time = time;
        // 获取缓存的session
        let name = sessionStorage.getItem('acTabs');
        if(exe != 'exe') {
            this.workState = true;
            callback();
        }else {
            // 已经停止了
            if(!this.workState) {
                return;
            }
            // 清除计时器
            clearTimeout(this.timer);
            if(this.name == -33 || this.name == name) {
                this.timer = setTimeout(callback, time);
            }else {
                setTimeout(()=>{
                    this.open();
                }, 300);
            }
            
            
        }
    }else {
        console.warn('未完整配置参数！');
    }
};
// 开启计时器
Timeout.prototype.open = function() {
    var callback = this.callback;
    var time = this.time;
    this.start(callback, time, 'exe');
};

// 关闭计时器
Timeout.prototype.stop = function() {
    clearTimeout(this.timer);
    this.workState = false;
};

// 设置循环体 但不开始
Timeout.prototype.init = function (callback, time) {
    this.callback = callback;
    this.time = time;
    this.workState = true;
};

// 关闭后重启计时器
Timeout.prototype.restart = function() {
    this.workState = true;
    this.open();
};

export default Timeout;

 src/assets/js/tools/index.js

New file
@@ -0,0 +1,5 @@
import Timeout from './Timeout'

export {
    Timeout,
}

 src/components/charts/AcInputWarp.vue

@@ -1,5 +1,5 @@
<template>
  <div class="chartCon">
    <div class="chartCon" @click="toParentPage">
    <div class="chartItem">
      <ac-input id="AcInput0" ref="AcInput0"></ac-input>
    </div>
@@ -31,6 +31,19 @@

    },
    methods: {
        toParentPage() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "电源实时告警",
                        name: "powerRealtimeInfo",
                        src: "#/powerRealtimeInfo",
                        closable: true
                    },
                }
            }, "*");
        },
      setData(data) {
        this.$nextTick(() => {
          if (data) {

 src/components/charts/CustomPie.vue

@@ -1,5 +1,5 @@
<template>
    <div class="echarts-wrapper">
    <div class="echarts-wrapper" @click="toParentPage">
        <div class="echarts-content" ref="chart"></div>
    </div>
</template>
@@ -21,6 +21,19 @@
            return {}
        },
        methods: {
        toParentPage() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "电源实时告警",
                        name: "powerRealtimeInfo",
                        src: "#/powerRealtimeInfo",
                        closable: true
                    },
                }
            }, "*");
        },
            setOption(opt) {
                this.$options.chart.setOption(opt);
            },
@@ -364,5 +377,4 @@
</script>

<style scoped>

</style>

 src/components/charts/MonCap.vue

@@ -1,5 +1,5 @@
<template>
  <div class="flex-box">
    <div class="flex-box" @click="toParentPage">
    <div class="flex-box-body">
      <circle-chart id="circleChart" ref="circleChart"></circle-chart>
    </div>
@@ -58,6 +58,19 @@
      }
    },
    methods: {
        toParentPage() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "电池实时告警",
                        name: "batteryrTimequery",
                        src: "#/batteryrTimequery",
                        closable: true
                    },
                }
            }, "*");
        },
      setData(data) {
        this.$nextTick(() => {
          if (data) {

 src/components/charts/PictorialBar.vue

@@ -1,5 +1,5 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-wrapper" @click="toParentPage">
    <div class="echarts-content" ref="chart"></div>
  </div>
</template>
@@ -23,6 +23,19 @@
      return {}
    },
    methods: {
        toParentPage() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "电池实时告警",
                        name: "batteryrTimequery",
                        src: "#/batteryrTimequery",
                        closable: true
                    },
                }
            }, "*");
        },
      setOption(opt) {
        this.$options.chart.setOption(opt);
      },
@@ -184,5 +197,4 @@
</script>

<style scoped>

</style>

 src/components/charts/RoseChart.vue

@@ -1,5 +1,5 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-wrapper" @click="toParentPage">
    <div class="echarts-content" ref="chart"></div>
  </div>
</template>
@@ -23,6 +23,19 @@
      return {}
    },
    methods: {
        toParentPage() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "设备状态查询",
                        name: 'btsStatusTest',
                        src: '#/dataMager/btsStatus',
                        closable: true
                    },
                }
            }, "*");
        },
      setOption(opt) {
        this.$options.chart.setOption(opt);
      },
@@ -189,5 +202,4 @@
</script>

<style scoped>

</style>

 src/components/charts/abeamProChart.vue

@@ -1,5 +1,5 @@
<template>
  <div class="flexCon">
    <div class="flexCon" @click="toParentPage">
    <div class="con">
      <div class="echarts-wrapper">
        <div class="echarts-content" ref="chart">
@@ -36,6 +36,19 @@
      }
    },
    methods: {
        toParentPage() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "电池实时告警",
                        name: "batteryrTimequery",
                        src: "#/batteryrTimequery",
                        closable: true
                    },
                }
            }, "*");
        },
      setOption(opt) {
        this.$options.chart.setOption(opt);
      },

 src/components/charts/chinaMap.vue

@@ -3,6 +3,15 @@
        <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 :infos="panelInfo"></info-panel>
            </div>
        </div>
    </div>
</template>

@@ -12,6 +21,8 @@
    searchMap,
    searchMapHomeState,
    getAllMapOutlineAction,
    searchByDevId,
    searchHomeNum,
} from "../../assets/js/api";

import HomeNormal from '@/assets/images/home.png'
@@ -31,21 +42,43 @@
homeWarnImage.src = HomeWarnImage;
// 放电图标
import HomeDischargeImage from '@/assets/images/home-discharge.png';
import InfoPanel from '../indexPanel/InfoPanel.vue';
let homeDischargeImage = new Image();
homeDischargeImage.src = HomeDischargeImage;
let addHomeData = [];
let chartData = []; //chart数据
let abnormalArr = []; //异常数组
let tempData = []; //站点数组
let chart, chartLng, chartLat;
let chart, chartLng, chartLat, timers;

export default {
    components: { InfoPanel },
    name: "chinaMap",
    chart: "",
    chartData: "",
    data() {
        return {
            mapName: 'zhongguo'
            timer: 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: {
@@ -162,7 +195,7 @@
                let rs = JSON.parse(res.data.result);
                if (rs.code == 1) {
                    let data = rs.data;
                    data.map((item, index) => {
                    data.map((item) => {
                        if (item.status == 1) {
                            this.mapName = item.name;
                        }
@@ -176,17 +209,108 @@
                    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.panelInfo = homeData
                // 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.timer = setInterval(() => {
                this.searchChartHomeState()
            }, 4000)

        },
        initPage() {
            // 初始化地图
            this.initCityChart();
            chart = echarts.init(document.getElementById('cityChart'));
            chart.off('click'); //防止chart点击触发多次
            chart.on("click", params => { //点击跳转实时数据
                if (params.seriesType == "scatter") {
                    this.$router.push({
                        path: '/functionList'
                    })

            chart.on("georoam", (params) => {
                clearInterval(this.timer)
                if (!this.isShowInfoPanel) {
                    return;
                }
                this.isShowInfoPanel = false;
                clearTimeout(timers);
                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 = JSON.parse(res.data.result);
                    if (rs.data.length != 0) {
                        this.areas = rs.data;
                        //this.hdwDialog = true;
                        this.showThreeHomeDialog(this.areas);
                    } else {
                        searchHomeNum({
                            // 查询告警落后的信息
                            StationId: sId,
                            FBSDeviceId: dev_id,
                        })
                            .then((res) => {
                                let rs = JSON.parse(res.data.result);
                                homeData.nums = rs;
                                this.changeChartPanelStatus(homeData);
                            })
                            .catch((error) => {
                                console.log(error);
                            });
                    }
                })
                .catch((error) => {
                    console.log(error);
            });
        },
        initCityChart() {
@@ -194,29 +318,14 @@
                let rs = JSON.parse(res.data.result);
                let list = this.mergeMapInfos(rs);
                if (list != undefined && list.length > 0) {
                    list.map((item, index) => {
                    list.map((item) => {
                        item.name = item.StationName;
                        item.value = [];
                        item.value.push(item.longitude);
                        item.value.push(item.latitude);
                        tempData.push(item)
                    })
                    this.searchChartHomeState();

                    let mapDotList = list.map(data => {
                        return {
                            lng: data.longitude,
                            lat: data.latitude,
                            title: data.StationName,
                            data: data,
                            name: data.StationName,
                            geometry: {
                                type: 'Point',
                                coordinates: [data.longitude, data.latitude]
                            }
                        }
                    });
                    addHomeData = mapDotList;
                    this.startSearchMapHomeState();
                } else {
                    this.initChart([], []);
                }
@@ -231,7 +340,7 @@
                abnormalArr = [];
                if (rsState.code === 1) {
                    let data = rsState.data;
                    data.map((item, i) => {
                    data.map((item) => {
                        let infos = tempData.filter((jtem) => {
                            return jtem.StationId == item.StationId
                        })
@@ -284,6 +393,7 @@
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        symbol: function (value, params) {
                            let asd = value
                            return 'image://' + params.data.img
                        },
                        symbolSize: [26, 26],
@@ -317,11 +427,11 @@
                        },
                        itemStyle: {
                            normal: {
                                color: function (value, params) {
                                color: function (value) {
                                    return value.data.color
                                },
                                shadowBlur: 8,
                                shadowColor: function (value, params) {
                                shadowColor: function (value) {
                                    return value.data.color
                                },
                            }
@@ -337,6 +447,7 @@
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        symbol: function (value, params) {
                            let asd = value
                            return 'image://' + params.data.img
                        },
                        symbolSize: [26, 26],
@@ -383,20 +494,97 @@
            }
            return rs;
        },
        showThreeHomeDialog(areas) {
            window.parent.parent.postMessage(
                {
                    cmd: "showDialog",
                    params: {
                        dialog: "hdwDialog",
                        pageInfo: areas,
                    },
                },
                "*"
            );
        },
    },
    mounted() {
        // 初始化页面
        this.getAllMapOutlineAction();
        // 基于准备好的dom，初始化echarts实例
        this.$options.chart = echarts.init(this.$refs.chart);


        // 监听chartMap的面板
        window.addEventListener("resize", () => {
            if (!this.isShowInfoPanel || !this.mapName) {
                return;
            }
            this.isShowInfoPanel = false;
            timers = 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.timer)
    },
}
</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/dischargeCircuit.vue

@@ -1,5 +1,5 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-wrapper" @click="toParentPage">
    <div class="echarts-content" ref="dischargeCircuit">

    </div>
@@ -42,6 +42,19 @@
    }
  },
  methods: {
        toParentPage() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "电池实时告警",
                        name: "batteryrTimequery",
                        src: "#/batteryrTimequery",
                        closable: true
                    },
                }
            }, "*");
        },
    setOption(opt) {
      this.$options.discharge.setOption(opt);
    },
@@ -516,5 +529,4 @@
</script>

<style scoped>

</style>

 src/components/charts/histogramAlternating.vue

@@ -1,5 +1,5 @@
<template>
  <div class="echarts-wrapper echartsAlternating" ref="echartsAlternating">
    <div class="echarts-wrapper echartsAlternating" ref="echartsAlternating" @click="toParentPage">
    <div class="echarts-content" ref="alternating">

    </div>
@@ -48,6 +48,19 @@
    }
  },
  methods: {
        toParentPage() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "电源实时告警",
                        name: "powerRealtimeInfo",
                        src: "#/powerRealtimeInfo",
                        closable: true
                    },
                }
            }, "*");
        },
    setOption(opt) {
      this.$options.chart.setOption(opt);
    },
@@ -325,7 +338,6 @@
        text-align: right;
        padding-right: 5%;
        overflow: hidden;

    }
    .titleShow i{
        display: inline-block;

 src/components/charts/imgPieChart.vue

@@ -1,5 +1,5 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-wrapper" @click="toParentPage">
    <div class="echarts-content" ref="chart">

    </div>
@@ -33,6 +33,19 @@
      }
    },
    methods: {
        toParentPage() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "电源实时告警",
                        name: "powerRealtimeInfo",
                        src: "#/powerRealtimeInfo",
                        closable: true
                    },
                }
            }, "*");
        },
      setOption(opt) {
        this.$options.chart.setOption(opt);
      },
@@ -220,5 +233,4 @@
</script>

<style scoped>

</style>

 src/components/charts/latticeBar.vue

@@ -1,5 +1,5 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-wrapper" @click="toParentPage">
    <div class="echarts-content" ref="chart">

    </div>
@@ -31,6 +31,19 @@
      }
    },
    methods: {
        toParentPage() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "电池实时告警",
                        name: "batteryrTimequery",
                        src: "#/batteryrTimequery",
                        closable: true
                    },
                }
            }, "*");
        },
      setOption(opt) {
        this.$options.chart.setOption(opt);
      },
@@ -242,5 +255,4 @@
</script>

<style scoped>

</style>

 src/components/charts/monomerVoltage.vue

@@ -1,5 +1,5 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-wrapper" @click="toParentPage">
    <div class="echarts-content" ref="monomerVoltage">

    </div>
@@ -42,6 +42,19 @@
    }
  },
  methods: {
        toParentPage() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "电池实时告警",
                        name: "batteryrTimequery",
                        src: "#/batteryrTimequery",
                        closable: true
                    },
                }
            }, "*");
        },
    setOption(opt) {
      this.$options.chart.setOption(opt);
    },
@@ -205,5 +218,4 @@
</script>

<style scoped>

</style>

 src/components/charts/powerChart.vue

@@ -1,5 +1,5 @@
<template>
  <div class="chartCon">
    <div class="chartCon" @click="toParentPage">
    <div class="chartItem">
      <pross-pie-chart id="prossPieChart0" ref="prossPieChart0"></pross-pie-chart>
    </div>
@@ -37,6 +37,19 @@

    },
    methods: {
        toParentPage() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "电源实时告警",
                        name: "powerRealtimeInfo",
                        src: "#/powerRealtimeInfo",
                        closable: true
                    },
                }
            }, "*");
        },
      setData(data) {
        this.$nextTick(() => {
          if (data) {

 src/components/charts/triangleBarChart.vue

@@ -1,5 +1,5 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-wrapper" @click="toParentPage">
    <div class="echarts-content" ref="chart">

    </div>
@@ -32,6 +32,19 @@
      }
    },
    methods: {
        toParentPage() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "电池实时告警",
                        name: "batteryrTimequery",
                        src: "#/batteryrTimequery",
                        closable: true
                    },
                }
            }, "*");
        },
      setOption(opt) {
        this.$options.chart.setOption(opt);
      },
@@ -223,5 +236,4 @@
</script>

<style scoped>

</style>

 src/components/indexPanel/AddPanel.vue

New file
@@ -0,0 +1,159 @@
<template>
    <div class="params-container">
        <el-form
        ref="ruleForm"
        size="mini"
        label-position="top"
        :model="params"
        :rules="rules"
        class="params-dialog bg-white">
            <el-form-item label="机房名称" prop="StationName">
                <el-select
                v-model="homeName"
                placeholder="请选择"
                @change="change"
                filterable>
                    <el-option
                        v-for="item in homeList" :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="详细地址" prop="Address">
                <el-input
                    type="textarea"
                    :rows="3"
                    resize="none"
                    placeholder="请输入详细地址"
                    v-model="params.Address">
                    </el-input>
            </el-form-item>
            <div class="table-layout">
                <div class="table-row">
                    <div class="table-cell">
                        经度：{{point.lng}}
                    </div>
                    <div class="table-cell">
                        纬度：{{point.lat}}
                    </div>
                </div>
            </div>
            <div class="form-footer">
                <three-btn @click="validData">确定</three-btn>
            </div>
        </el-form>
    </div>
</template>

<script>
import {
    addMapStation
} from "@/assets/js/api"

export default {
    name: "AddPanel",
    data() {
        return {
            homeName: "",
            homeList: [],
            point: {
                lng: 0,
                lat: 0,
            },
            params: {
                StationName1: '',        // 省
                StationName2: '',        // 市
                StationName5: '',        // 区县
                StationName3: '',        // 站点名称
                StationName: '',        // 站点全称
                Address:'',                //机房物理信息
                longitude:'',                // 经度
                latitude:'',                // 纬度
                information:"",                //备注
            },
            rules: {
                StationName:[
                    {required: true, message: '请选择要添加的机房', trigger: 'change'},
                ],
                Address: [
                    {required: true, message: '详细地址不能为空', trigger: 'change'},
                ]
            }
        }
    },
    methods: {
        // 根据选择的机房更新详细地址的省-市-区县
        change(value) {
            let infos = value.split('-');
            // 解析的长度大于2
            if(infos.length>3) {
                this.params.StationName1 = infos[0];    // 省
                this.params.StationName2 = infos[1];    // 市
                this.params.StationName5 = infos[2];    // 区县
                this.params.StationName3 = infos[3];    // 机房名称
                this.params.StationName = value;        // 机房全称
                this.params.Address = infos[0]+'-'+infos[1]+'-'+infos[2]+'-';       // 省-市-区县-
            }
        },
        init() {
            this.homeName = "";     //  初始化下拉框
            this.params.StationName1 = "";    // 省
            this.params.StationName2 = "";    // 市
            this.params.StationName5 = "";    // 区县
            this.params.StationName3 = "";    // 机房名称
            this.params.StationName = "";        // 机房全称
            this.params.Address = "";       // 地址
        },
        validData() {
            this.$refs.ruleForm.validate((valid) => {
                // 校验通过
                if (valid) {
                    // 设置经纬度
                    this.params.longitude = this.point.lng;
                    this.params.latitude = this.point.lat;
                    this.$layer.confirm('确认添加机房到该位置', {icon: 3, title: '系统提示'}, (index)=>{
                        // 关闭弹出框
                        this.$layer.close(index);
                        // 添加机房到地图
                        this.addHome();
                    });

                }else {
                    this.$layer.msg('存在校验未通过的数据！');
                    return false;
                }
            });
        },
        addHome() {
            // 请求后台添加机房到地图
            addMapStation(this.params).then(res=>{
                let rs = JSON.parse(res.data.result);
                if(rs.code === 1) {
                    this.init();        // 初始化面板
                    this.$layer.msg('添加成功！');
                    this.$emit('handleEvent', 1);
                }else {
                    this.$layer.msg('添加失败！');
                    this.$emit('handleEvent', 0);
                }
            }).catch(error=>{
                console.log(error);
            });
        },
    }
}
</script>

<style scoped>
.params-container {
    width: 320px;
    background-color: #ffffff;
}
.table-layout {
    margin-top: 16px;
}
.bg-white .table-cell {
    color: #000000;
}
</style>

 src/components/indexPanel/InfoPanel.vue

New file
@@ -0,0 +1,165 @@
<template>
    <div class="map-panel-content">
        <div class="content-item content-item-nowrap">
            蓄电池组告警数目：{{info.nums.code}}
            <a class="content-detail" href="javascript:;" @click="goBattWarn">详情>></a>
        </div>
        <div class="content-item content-item-nowrap">
            蓄电池组落后数目：{{info.nums.sum}}
            <a class="content-detail" href="javascript:;" @click="goBehind">详情>></a>
        </div>
        <div class="content-item content-item-nowrap">
            蓄电池组延时数目：{{info.nums.newsum}}
            <a class="content-detail" href="javascript:;" @click="goTimeout">详情>></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>
            <el-button v-if="isCanDel" type="danger" size="mini" @click="delHome">移除机房</el-button>
        </div>
        <div class="content-item">地址：{{info.Address}}</div>
    </div>
</template>

<script>
import {
    delMapHome
} from "@/assets/js/api";

export default {
    props: ['infos'],
    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,
                    sum: 0,
                    newsum: 0
                }
            }
        }
    },
    mounted() {
        this.info = this.infos
    },
    methods: {
        // 跳转到历史数据
        goHistory() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "历史数据",
                        name: "history",
                        src: "#/history" + this.search,
                        closable: true
                    }
                }
            }, "*");
        },
        // 跳转到实时数据
        goRealTime() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "实时监控",
                        name: "movingRingSysteRrealTime",
                        src: "#/moving-ring-system" + this.search,
                        closable: true
                    }
                }
            }, "*");
        },
        // 跳转告警界面
        goBattWarn() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "电池告警实时查询",
                        name: "batteryrTimequery",
                        src: "#/batteryrTimequery" + this.search + '&fromType=fromIndex',
                        closable: true
                    }
                }
            }, "*");
        },
        // 跳转到落后机房
        goBehind() {
            this.$layer.msg('该功能暂未开启');
        },
        // 跳转到延时
        goTimeout() {
            this.$layer.msg('该功能暂未开启');
        },
        // 移除机房
        delHome() {
            let content = "确认从地图上移除" + this.info.StationName
            this.$layer.confirm(content, {
                icon: 3
            }, index => {
                this.$layer.close(index);
                let loading = this.$layer.loading(1);
                delMapHome(this.info).then(res => {
                    let rs = JSON.parse(res.data.result);
                    if (rs.code == 1) {
                        this.$layer.msg("删除成功");
                        // 关闭等待框
                        this.$layer.close(loading);
                        // 触发删除事件，告诉父组件
                        this.$emit('delHome');
                    } else {
                        // 关闭等待框
                        this.$layer.close(loading);
                        this.$layer.msg("删除失败")
                    }
                }).catch(error => {
                    console.log(error)
                    // 关闭等待框
                    this.$layer.close(loading);
                });
            });
        },
        setInfo(info) {
            this.info = info;
        },
    },
    computed: {
        search() {
            let list = this.info.StationName.split('-');
            return '?province=' + list[0] + '&city=' + list[1] + '&county=' + list[2] + '&home=' + list[3]
        },
    },
}
</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;
}
</style>

 src/main.js

@@ -11,6 +11,10 @@
import '@/assets/js/rem.js'
import axios from './assets/js/axios'

import layer from 'vue-layer'
import 'vue-layer/lib/vue-layer.css';
Vue.prototype.$layer = layer(Vue);

Vue.prototype.$axios = axios;

Vue.use(ElementUI, {