首页地图修改

whychdw

2020-10-19 1694ca9d103574b593371e702cdafe1b41ab86e2

首页地图修改

 package-lock.json

@@ -1,6 +1,6 @@
{
  "name": "admin_manage",
  "version": "2.1.1",
  "version": "2.1.2",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@@ -2500,7 +2500,6 @@
      "version": "2.6.3",
      "resolved": "https://registry.npm.taobao.org/async/download/async-2.6.3.tgz",
      "integrity": "sha1-1yYl4jRKNlbjo61Pp0n6gymdgv8=",
      "dev": true,
      "requires": {
        "lodash": "^4.17.14"
      }
@@ -2634,6 +2633,28 @@
      "dev": true,
      "requires": {
        "object.assign": "^4.1.0"
      }
    },
    "babel-polyfill": {
      "version": "6.26.0",
      "resolved": "https://registry.npm.taobao.org/babel-polyfill/download/babel-polyfill-6.26.0.tgz",
      "integrity": "sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM=",
      "requires": {
        "babel-runtime": "^6.26.0",
        "core-js": "^2.5.0",
        "regenerator-runtime": "^0.10.5"
      },
      "dependencies": {
        "core-js": {
          "version": "2.6.11",
          "resolved": "https://registry.npm.taobao.org/core-js/download/core-js-2.6.11.tgz?cache=0&sync_timestamp=1586450269267&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcore-js%2Fdownload%2Fcore-js-2.6.11.tgz",
          "integrity": "sha1-OIMUafmSK97Y7iHJ3EaYXgOZMIw="
        },
        "regenerator-runtime": {
          "version": "0.10.5",
          "resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.10.5.tgz?cache=0&sync_timestamp=1595456367497&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fregenerator-runtime%2Fdownload%2Fregenerator-runtime-0.10.5.tgz",
          "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg="
        }
      }
    },
    "babel-runtime": {
@@ -3604,6 +3625,11 @@
      "integrity": "sha1-TQuSEyXBT6+SYzCGpTbbbolWSxs=",
      "dev": true
    },
    "colors": {
      "version": "1.0.3",
      "resolved": "https://registry.npm.taobao.org/colors/download/colors-1.0.3.tgz",
      "integrity": "sha1-BDP0TYCWgP3rYO0mDxsMJi6CpAs="
    },
    "combined-stream": {
      "version": "1.0.8",
      "resolved": "https://registry.npm.taobao.org/combined-stream/download/combined-stream-1.0.8.tgz",
@@ -3899,6 +3925,11 @@
      "resolved": "https://registry.npm.taobao.org/core-util-is/download/core-util-is-1.0.2.tgz",
      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
      "dev": true
    },
    "corser": {
      "version": "2.0.1",
      "resolved": "https://registry.npm.taobao.org/corser/download/corser-2.0.1.tgz",
      "integrity": "sha1-jtolLsqrWEDc2XXOuQ2TcMgZ/4c="
    },
    "cosmiconfig": {
      "version": "5.2.1",
@@ -4712,6 +4743,24 @@
        "zrender": "4.3.1"
      }
    },
    "ecstatic": {
      "version": "3.3.2",
      "resolved": "https://registry.npm.taobao.org/ecstatic/download/ecstatic-3.3.2.tgz",
      "integrity": "sha1-bR3UmBTQBZRoLGUq22YHamnUbEg=",
      "requires": {
        "he": "^1.1.1",
        "mime": "^1.6.0",
        "minimist": "^1.1.0",
        "url-join": "^2.0.5"
      },
      "dependencies": {
        "mime": {
          "version": "1.6.0",
          "resolved": "https://registry.npm.taobao.org/mime/download/mime-1.6.0.tgz?cache=0&sync_timestamp=1590596706367&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmime%2Fdownload%2Fmime-1.6.0.tgz",
          "integrity": "sha1-Ms2eXGRVO9WNGaVor0Uqz/BJgbE="
        }
      }
    },
    "ee-first": {
      "version": "1.1.1",
      "resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -5127,8 +5176,7 @@
    "eventemitter3": {
      "version": "4.0.4",
      "resolved": "https://registry.npm.taobao.org/eventemitter3/download/eventemitter3-4.0.4.tgz?cache=0&sync_timestamp=1589283150629&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Feventemitter3%2Fdownload%2Feventemitter3-4.0.4.tgz",
      "integrity": "sha1-tUY6zmNaCD0Bi9x8kXtMXxCoU4Q=",
      "dev": true
      "integrity": "sha1-tUY6zmNaCD0Bi9x8kXtMXxCoU4Q="
    },
    "events": {
      "version": "3.2.0",
@@ -5617,8 +5665,7 @@
    "follow-redirects": {
      "version": "1.13.0",
      "resolved": "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.13.0.tgz",
      "integrity": "sha1-tC6Nk6Kn7qXtiGM2dtZZe8jjhNs=",
      "dev": true
      "integrity": "sha1-tC6Nk6Kn7qXtiGM2dtZZe8jjhNs="
    },
    "for-in": {
      "version": "1.0.2",
@@ -5975,8 +6022,7 @@
    "he": {
      "version": "1.2.0",
      "resolved": "https://registry.npm.taobao.org/he/download/he-1.2.0.tgz",
      "integrity": "sha1-hK5l+n6vsWX922FWauFLrwVmTw8=",
      "dev": true
      "integrity": "sha1-hK5l+n6vsWX922FWauFLrwVmTw8="
    },
    "hex-color-regex": {
      "version": "1.1.0",
@@ -6199,7 +6245,6 @@
      "version": "1.18.1",
      "resolved": "https://registry.npm.taobao.org/http-proxy/download/http-proxy-1.18.1.tgz",
      "integrity": "sha1-QBVB8FNIhLv5UmAzTnL4juOXZUk=",
      "dev": true,
      "requires": {
        "eventemitter3": "^4.0.0",
        "follow-redirects": "^1.0.0",
@@ -6216,6 +6261,28 @@
        "is-glob": "^4.0.0",
        "lodash": "^4.17.11",
        "micromatch": "^3.1.10"
      }
    },
    "http-server": {
      "version": "0.11.1",
      "resolved": "https://registry.npm.taobao.org/http-server/download/http-server-0.11.1.tgz?cache=0&sync_timestamp=1588038170224&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhttp-server%2Fdownload%2Fhttp-server-0.11.1.tgz",
      "integrity": "sha1-IwKlam/+9/mr6gFH2Dil6ba2p5s=",
      "requires": {
        "colors": "1.0.3",
        "corser": "~2.0.0",
        "ecstatic": "^3.0.0",
        "http-proxy": "^1.8.1",
        "opener": "~1.4.0",
        "optimist": "0.6.x",
        "portfinder": "^1.0.13",
        "union": "~0.4.3"
      },
      "dependencies": {
        "opener": {
          "version": "1.4.3",
          "resolved": "https://registry.npm.taobao.org/opener/download/opener-1.4.3.tgz",
          "integrity": "sha1-XG2ixdflgx6P+jlklQ+NZnSskLg="
        }
      }
    },
    "http-signature": {
@@ -6361,6 +6428,17 @@
      "resolved": "https://registry.npm.taobao.org/inherits/download/inherits-2.0.4.tgz",
      "integrity": "sha1-D6LGT5MpF8NDOg3tVTY6rjdBa3w=",
      "dev": true
    },
    "inmap": {
      "version": "2.3.3",
      "resolved": "https://registry.npm.taobao.org/inmap/download/inmap-2.3.3.tgz",
      "integrity": "sha1-Vyr9lwApy4Hoe/5A1RLAKnwGtbg=",
      "requires": {
        "babel-polyfill": "^6.26.0",
        "deepmerge": "^1.5.2",
        "http-server": "^0.11.1",
        "opn": "^5.3.0"
      }
    },
    "inquirer": {
      "version": "7.3.3",
@@ -6804,8 +6882,7 @@
    "is-wsl": {
      "version": "1.1.0",
      "resolved": "https://registry.npm.taobao.org/is-wsl/download/is-wsl-1.1.0.tgz?cache=0&sync_timestamp=1588494180082&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fis-wsl%2Fdownload%2Fis-wsl-1.1.0.tgz",
      "integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=",
      "dev": true
      "integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0="
    },
    "isarray": {
      "version": "1.0.0",
@@ -7195,8 +7272,7 @@
    "lodash": {
      "version": "4.17.20",
      "resolved": "https://registry.npm.taobao.org/lodash/download/lodash-4.17.20.tgz?cache=0&sync_timestamp=1597336196663&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash%2Fdownload%2Flodash-4.17.20.tgz",
      "integrity": "sha1-tEqbYpe8tpjxxRo1RaKzs2jVnFI=",
      "dev": true
      "integrity": "sha1-tEqbYpe8tpjxxRo1RaKzs2jVnFI="
    },
    "lodash.defaultsdeep": {
      "version": "4.6.1",
@@ -7499,8 +7575,7 @@
    "minimist": {
      "version": "1.2.5",
      "resolved": "https://registry.npm.taobao.org/minimist/download/minimist-1.2.5.tgz",
      "integrity": "sha1-Z9ZgFLZqaoqqDAg8X9WN9OTpdgI=",
      "dev": true
      "integrity": "sha1-Z9ZgFLZqaoqqDAg8X9WN9OTpdgI="
    },
    "minipass": {
      "version": "3.1.3",
@@ -7589,7 +7664,6 @@
      "version": "0.5.5",
      "resolved": "https://registry.npm.taobao.org/mkdirp/download/mkdirp-0.5.5.tgz?cache=0&sync_timestamp=1587535418745&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmkdirp%2Fdownload%2Fmkdirp-0.5.5.tgz",
      "integrity": "sha1-2Rzv1i0UNsoPQWIOJRKI1CAJne8=",
      "dev": true,
      "requires": {
        "minimist": "^1.2.5"
      }
@@ -7616,8 +7690,7 @@
    "ms": {
      "version": "2.1.2",
      "resolved": "https://registry.npm.taobao.org/ms/download/ms-2.1.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fms%2Fdownload%2Fms-2.1.2.tgz",
      "integrity": "sha1-0J0fNXtEP0kzgqjrPM0YOHKuYAk=",
      "dev": true
      "integrity": "sha1-0J0fNXtEP0kzgqjrPM0YOHKuYAk="
    },
    "multicast-dns": {
      "version": "6.2.3",
@@ -8020,9 +8093,24 @@
      "version": "5.5.0",
      "resolved": "https://registry.npm.taobao.org/opn/download/opn-5.5.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fopn%2Fdownload%2Fopn-5.5.0.tgz",
      "integrity": "sha1-/HFk+rVtI1kExRw7J9pnWMo7m/w=",
      "dev": true,
      "requires": {
        "is-wsl": "^1.1.0"
      }
    },
    "optimist": {
      "version": "0.6.1",
      "resolved": "https://registry.npm.taobao.org/optimist/download/optimist-0.6.1.tgz",
      "integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=",
      "requires": {
        "minimist": "~0.0.1",
        "wordwrap": "~0.0.2"
      },
      "dependencies": {
        "minimist": {
          "version": "0.0.10",
          "resolved": "https://registry.npm.taobao.org/minimist/download/minimist-0.0.10.tgz",
          "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8="
        }
      }
    },
    "optionator": {
@@ -8362,7 +8450,6 @@
      "version": "1.0.28",
      "resolved": "https://registry.npm.taobao.org/portfinder/download/portfinder-1.0.28.tgz?cache=0&sync_timestamp=1596019866852&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fportfinder%2Fdownload%2Fportfinder-1.0.28.tgz",
      "integrity": "sha1-Z8RiKFK9U3TdHdkA93n1NGL6x3g=",
      "dev": true,
      "requires": {
        "async": "^2.6.2",
        "debug": "^3.1.1",
@@ -8373,7 +8460,6 @@
          "version": "3.2.6",
          "resolved": "https://registry.npm.taobao.org/debug/download/debug-3.2.6.tgz",
          "integrity": "sha1-6D0X3hbYp++3cX7b5fsQE17uYps=",
          "dev": true,
          "requires": {
            "ms": "^2.1.1"
          }
@@ -9451,8 +9537,7 @@
    "requires-port": {
      "version": "1.0.0",
      "resolved": "https://registry.npm.taobao.org/requires-port/download/requires-port-1.0.0.tgz",
      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
      "dev": true
      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
    },
    "resize-observer-polyfill": {
      "version": "1.5.1",
@@ -10828,6 +10913,21 @@
      "integrity": "sha1-3Vepn2IHvt/0Yoq++5TFDblByPQ=",
      "dev": true
    },
    "union": {
      "version": "0.4.6",
      "resolved": "https://registry.npm.taobao.org/union/download/union-0.4.6.tgz",
      "integrity": "sha1-GY+9rrolTniLDvy2MLwR8kopWeA=",
      "requires": {
        "qs": "~2.3.3"
      },
      "dependencies": {
        "qs": {
          "version": "2.3.3",
          "resolved": "https://registry.npm.taobao.org/qs/download/qs-2.3.3.tgz",
          "integrity": "sha1-6eha2+ddoLvkyOBHaghikPhjtAQ="
        }
      }
    },
    "union-value": {
      "version": "1.0.1",
      "resolved": "https://registry.npm.taobao.org/union-value/download/union-value-1.0.1.tgz",
@@ -10972,6 +11072,11 @@
          "dev": true
        }
      }
    },
    "url-join": {
      "version": "2.0.5",
      "resolved": "https://registry.npm.taobao.org/url-join/download/url-join-2.0.5.tgz",
      "integrity": "sha1-WvIvGMBSoACkjXuCxenC4v7tpyg="
    },
    "url-loader": {
      "version": "2.3.0",
@@ -11852,6 +11957,11 @@
      "integrity": "sha1-YQY29rH3A4kb00dxzLF/uTtHB5w=",
      "dev": true
    },
    "wordwrap": {
      "version": "0.0.3",
      "resolved": "https://registry.npm.taobao.org/wordwrap/download/wordwrap-0.0.3.tgz",
      "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc="
    },
    "worker-farm": {
      "version": "1.7.0",
      "resolved": "https://registry.npm.taobao.org/worker-farm/download/worker-farm-1.7.0.tgz",

 package.json

@@ -12,6 +12,7 @@
    "core-js": "^3.6.5",
    "echarts": "^4.8.0",
    "element-ui": "^2.13.2",
    "inmap": "^2.3.3",
    "js-md5": "^0.7.3",
    "moment": "^2.27.0",
    "qs": "^6.9.4",

 src/assets/images/home.png

 src/pages/index.vue

@@ -5,8 +5,31 @@
            @leaf-click="leafClick"></home-list>
        <div class="map-container">
            <div class="map-content" id="allmap"></div>
            <div class="map-icon-details-wrapper">
                <div class="map-icon-details-title">地图图标说明</div>
                <div class="map-icon-details-content">
                    <div class="map-icon-list">
                        <div class="map-icon-item">
                            <div class="item-wrapper icon-wrapper"><img src="../assets/images/home-discharge.png" /></div>
                            <div class="item-wrapper text-wrapper">核容/停电放电</div>
                        </div>
                        <div class="map-icon-item">
                            <div class="item-wrapper icon-wrapper"><img src="../assets/images/home-warn.png" /></div>
                            <div class="item-wrapper text-wrapper">设备告警</div>
                        </div>
                        <div class="map-icon-item">
                            <div class="item-wrapper icon-wrapper"><img src="../assets/images/home-charge.png" /></div>
                            <div class="item-wrapper text-wrapper">设备充电</div>
                        </div>
                        <div class="map-icon-item">
                            <div class="item-wrapper icon-wrapper"><img src="../assets/images/home-normal.png" /></div>
                            <div class="item-wrapper text-wrapper">在线浮充</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <content-box title="站点列表" slot="footer" style="width:380px" no-header>
        <content-box title="站点列表" slot="footer" style="width:380px" no-header v-if="false">
            <div class="pie-list">
                <div class="pie-item">
                    <pie-chart ref="chart1" id="chart1"></pie-chart>
@@ -28,6 +51,7 @@
<script>
import Vue from "vue";
import BMap from "BMap";
import inMap from 'inmap';
import ContentBox from "../components/ContentBox";
import PieChart from "../components/chart/PieChart";
import InfoWindowTest from "../components/InfoWindowTest";
@@ -62,6 +86,28 @@
let infoPanel = new infoPanelExtend().$mount();
let addPanelExtend = Vue.extend(AddPanel);
let addPanel = new addPanelExtend().$mount();

let inmap;
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';
let homeDischargeImage = new Image();
homeDischargeImage.src = HomeDischargeImage;

export default {
    components: {
        ContentBox,
@@ -75,13 +121,16 @@
    },
    methods: {
        initMap() {
            // 按住鼠标右键，修改倾斜角和角度
            map = new BMap.Map("allmap", {minZoom:1, maxZoom: 15}); // 创建Map实例
            this.point = new BMap.Point(this.lng, this.lat); // 创建点坐标this.lng, this.lat 113.971,30.605
            map.centerAndZoom(this.point, 1); // 初始化地图,设置中心点坐标和地图级别
            map.enableScrollWheelZoom();
            map.disableDoubleClickZoom();

            inmap = new inMap.Map({
                id: "allmap",
                center: ["114.215408", "22.654411"],
                zoom: {
                    value: 11,
                    show: true,
                    max: 22
                }
            });
            map = inmap.getMap();
            // 查询设置的中心点
            this.searchCoordinateMove();
            // 查询地图上的机房
@@ -115,206 +164,6 @@
            }
            map.addContextMenu(menu);
        },
        initChart() {
            // 饼状图1
            chart1 = {
                //红，蓝，绿
                color: ["#FF0000", "#00FF00"],
                title: {
                    text: "机房停电"
                },
                series: [
                    {
                        name: "电池信息",
                        data: [
                            {value: 0, name: '机房停电'},
                            {value: 0, name: '机房未停电'},
                        ]
                    }
                ]
            };

            // 饼状图2
            chart2 = {
                // 红,黄，绿，蓝
                color: ["#00FF00", "#FFD700", "#FF0000"],
                title: {
                    text: "单体容量健康率"
                },
                series: [
                    {
                        name: "电池信息",
                        data: [
                            {value: 0, name: '单体容量健康'},
                            {value: 0, name: '单体容量告警'},
                            {value: 0, name: '单体容量更换'},
                        ]
                    }
                ]
            };

            // 饼状图3
            chart3 = {
                // 红, 黄，绿，紫色
                color: ["#FF0000", "#FFD700", "#00FF00", "#BA55D3"],
                title: {
                    text: "电池状态"
                },
                series: [
                    {
                        name: "电池信息",
                        data: [
                            {value: 0, name: '放电'},
                            {value: 0, name: '充电'},
                            {value: 0, name: '浮充'},
                            {value: 0, name: '均充'}
                        ]
                    }
                ]
            };

            // 饼状图4
            chart4 = {
                // 红, 深蓝色, 蓝，浅红，绿, 黄
                color: [
                    "#FF0000",
                    "#00008B",
                    "#1E90FF",
                    "#F08080",
                    "#7CFC00",
                    "#FFD700"
                ],
                title: {
                    text: "电池告警率"
                },
                series: [
                    {
                        name: "电池信息",
                        data: [
                            {value: 0, name: "容量告警告警"},
                            {value: 0, name: "组端电压"},
                            {value: 0, name: "充电电流"},
                            {value: 0, name: "放电电流"},
                            {value: 0, name: "单体电压"},
                            {value: 0, name: "容量更换告警"}
                        ]
                    }
                ]
            };

            // 设置图表
            this.setChart();
        },
        setChart() {
            this.$refs.chart1.setOption(chart1);
            this.$refs.chart2.setOption(chart2);
            this.$refs.chart3.setOption(chart3);
            this.$refs.chart4.setOption(chart4);
        },
        checkNetwork() {
            this.$apis.login.checkNetwork().then(res => {
                let head = document.getElementsByTagName('head')[0];
                if (res.data.result == 1) {
                    console.log(123);
                }
                // 初始化地图
                this.initMap();
            }).catch(error => {
                console.log(error);
            })
        },
        createScript(src) {
            let script = document.createElement('script');
            script.setAttribute('type', 'text/javascript');
            script.setAttribute('src', src);
            return script;
        },
        searchPieData() {
            this.timer.start(() => {
                this.$axios.all([
                    this.searchPowerOff(),
                    this.searchBattGood(),
                    this.searchBattState(),
                    this.searchAlarm()
                ]).then(res => {
                    this.timer.open();
                }).catch(error => {
                    this.timer.open();
                })
            }, 4000);
        },
        // 机房停电查询
        searchPowerOff() {
            searchPowerOff().then(res => {
                let rs = JSON.parse(res.data.result);
                if ((rs.sum >= 0) && (rs.newsum >= 0) && (rs.newsum >= rs.sum)) {
                    chart1.series[0].data[0].value = rs.sum;    // 机房停电
                    chart1.series[0].data[1].value = rs.newsum - rs.sum;  // 机房未停电
                } else {
                    chart1.series[0].data[0].value = 0;    // 机房停电
                    chart1.series[0].data[1].value = rs.sum;  // 机房未停电
                }
                this.$refs.chart1.setOption(chart1);
            }).catch(error => {
                console.log(error);
            });
        },
        // 电池健康率查询
        searchBattGood() {
            searchBattGood().then(res => {
                let rs = JSON.parse(res.data.result);
                if (rs.code == 1) {
                    chart2.series[0].data[0].value = rs.sum - rs.data[0] - rs.data[1];    // 单体容量健康
                    chart2.series[0].data[1].value = rs.data[0];  // 单体容量告警
                    chart2.series[0].data[2].value = rs.data[1];  // 单体容量更换
                } else {
                    chart2.series[0].data[0].value = 0;    // 单体容量健康
                    chart2.series[0].data[1].value = 0;  // 单体容量告警
                    chart2.series[0].data[2].value = 0;  // 单体容量更换
                }
                this.$refs.chart2.setOption(chart2);
            }).catch(error => {
                console.log(error);
            });
        },
        // 电池状态查询
        searchBattState() {
            searchBattState().then(res => {
                let rs = JSON.parse(res.data.result);
                if (rs.code == 1) {
                    let data = rs.data;
                    chart3.series[0].data[0].value = data[3].num;    // 放电
                    chart3.series[0].data[1].value = data[2].num;    // 充电
                    chart3.series[0].data[2].value = data[1].num;    // 浮充
                    chart3.series[0].data[3].value = data[4].num;    // 均充
                } else {
                    chart3.series[0].data[0].value = 0;    // 放电
                    chart3.series[0].data[1].value = 0;    // 充电
                    chart3.series[0].data[2].value = 0;    // 浮充
                    chart3.series[0].data[3].value = 0;    // 均充
                }
                this.$refs.chart3.setOption(chart3);
            }).catch(error => {
                console.log(error);
            });
        },
        searchAlarm() {
            searchAlarm().then(res => {
                let rs = JSON.parse(res.data.result);
                if (rs.code == 1) {
                    let data = rs.data;
                    chart4.series[0].data[0].value = data.BattGroupId;    // 容量告警告警
                    chart4.series[0].data[1].value = data.MonNum;    // 组端电压
                    chart4.series[0].data[2].value = data.alm_id;    // 充电电流
                    chart4.series[0].data[3].value = data.alm_signal_id;    // 放电电流
                    chart4.series[0].data[4].value = data.alm_level;    // 单体电压
                    chart4.series[0].data[5].value = data.alm_value + data.BattGroupId;    // 容量更换告警
                }
                this.$refs.chart4.setOption(chart4);
            }).catch(error => {
                console.log(error);
            })
        },
        // 查询设置的地图的中心点，并初始化地图位置
        searchCoordinateMove() {
            searchCoordinateMove().then(res => {
@@ -338,10 +187,16 @@
                            lng: data.longitude,
                            lat: data.latitude,
                            title: data.StationName,
                            data: data
                            data: data,
                            name: data.StationName,
                            geometry: {
                                type: 'Point',
                                coordinates: [data.longitude, data.latitude]
                            }
                        }
                    });
                    this.createMapDot(mapDotList);
                    //this.createMapDot(mapDotList);
                    this.createNormalHome(mapDotList);
                    addHomeData = mapDotList;
                }
            }).catch(error => {
@@ -372,6 +227,45 @@
                }
            }
            return rs;
        },
        createNormalHome(data) {   // 添加正常的图标
            let animationOverlay = new inMap.PointAnimationOverlay({
                style: {
                    fps: 25, //动画帧数
                    color: "#ff6a6a",
                    size: 20,
                    speed: 0.5
                },
                data: data
            });
            inmap.add(animationOverlay);

            let imgOverlay = new inMap.ImgOverlay({
                tooltip: {
                    show: true,
                    formatter: "{name}"
                },
                style: {
                    normal: {
                        icon: homeDischargeImage,
                        width: 26,
                        height: 26,
                        offsets: {
                            top: "-50%",
                            left: "-50%",
                        }
                    }
                },
                data: data,
            });
            // 添加事件
            imgOverlay.on('mouseClick', (info)=>{
                let homeInfo = this.getHomeByPoint(info[0]);
                if (homeInfo) {
                    this.searchHomeNum(homeInfo.data.StationId, homeInfo.data.FBSDeviceId, homeInfo.data);
                }
            });
            inmap.add(imgOverlay);
        },
        createMapDot(list) {
            let self = this;
@@ -597,13 +491,11 @@
                // 关闭弹出框
                this.$layer.close(loading);
            });
        }
        },
    },
    mounted() {
        // 初始化地图
        this.initMap();
        this.initChart();
        this.searchPieData();
        // 监听添加机房的事件
        addPanel.$on('handleEvent', (res)=>{
            // 清空覆盖物
@@ -646,4 +538,34 @@
.pie-item {
    flex: 1;
}
.map-icon-details-wrapper {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 99;
    background-color: #FFFFFF;
    color: #000000;
}
.map-icon-details-title {
    padding: 2px 8px;
    font-size: 14px;
    color: #FFFFFF;
    background-image: linear-gradient(#00A5EC, #078cc4, #00A5EC);
    font-weight: bold;
}
.map-icon-item {
    padding: 2px 8px;
}
.map-icon-item .item-wrapper {
    display: inline-block;
}
.item-wrapper.icon-wrapper img {
    width: 30px;
    height: auto;
    vertical-align: middle;
    margin-right: 4px;
}
.item-wrapper.text-wrapper {
    font-size: 12px;
}
</style>

 src/store/modules/user.js

@@ -5,13 +5,13 @@
    state() {
        let permits = sessionStorage.getItem('permits');
        return {
            permits: Array.isArray(permits)?permits:[],
            permits: permits?JSON.parse(permits):[],
        }
    },
    mutations: {
        setPermits(state, data) {
            state.permits = Array.isArray(data)?data:[];
            sessionStorage.setItem('permits', data);
            sessionStorage.setItem('permits', JSON.stringify(data));
        },
        init(state) {
            state.permits = [];