前台提交内容

whyczyk

2020-10-28 64b7d07f3c3901ed9bb377b5f4a2f554df5c16c9

前台提交内容

 package-lock.json

@@ -2255,6 +2255,15 @@
      "integrity": "sha1-vxEWycdYxRt6kz0pa3LCIe2UKLY=",
      "dev": true
    },
    "adler-32": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.2.0.tgz",
      "integrity": "sha1-aj5r8KY5ALoVZSgIyxXGgT0aXyU=",
      "requires": {
        "exit-on-epipe": "~1.0.1",
        "printj": "~1.1.0"
      }
    },
    "aggregate-error": {
      "version": "3.0.1",
      "resolved": "https://registry.npm.taobao.org/aggregate-error/download/aggregate-error-3.0.1.tgz?cache=0&sync_timestamp=1570167911603&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Faggregate-error%2Fdownload%2Faggregate-error-3.0.1.tgz",
@@ -3281,6 +3290,16 @@
      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
      "dev": true
    },
    "cfb": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.0.tgz",
      "integrity": "sha512-sXMvHsKCICVR3Naq+J556K+ExBo9n50iKl6LGarlnvuA2035uMlGA/qVrc0wQtow5P1vJEw9UyrKLCbtIKz+TQ==",
      "requires": {
        "adler-32": "~1.2.0",
        "crc-32": "~1.2.0",
        "printj": "~1.1.2"
      }
    },
    "chalk": {
      "version": "2.4.2",
      "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-2.4.2.tgz",
@@ -3572,6 +3591,22 @@
        "@types/q": "^1.5.1",
        "chalk": "^2.4.1",
        "q": "^1.1.2"
      }
    },
    "codepage": {
      "version": "1.14.0",
      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.14.0.tgz",
      "integrity": "sha1-jL4lSBMjVZ19MHVxsP/5HnodL5k=",
      "requires": {
        "commander": "~2.14.1",
        "exit-on-epipe": "~1.0.1"
      },
      "dependencies": {
        "commander": {
          "version": "2.14.1",
          "resolved": "https://registry.npmjs.org/commander/-/commander-2.14.1.tgz",
          "integrity": "sha512-+YR16o3rK53SmWHU3rEM3tPAh2rwb1yPcQX5irVn7mb0gXbwuCCrnkbV5+PBfETdfg1vui07nM6PCG1zndcjQw=="
        }
      }
    },
    "collection-visit": {
@@ -3953,6 +3988,15 @@
            "json-parse-better-errors": "^1.0.1"
          }
        }
      }
    },
    "crc-32": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.0.tgz",
      "integrity": "sha512-1uBwHxF+Y/4yF5G48fwnKq6QsIXheor3ZLPT80yGBV1oEUwpPojlEhQbWKVw1VwcTQyMGHK1/XMmTjmlsmTTGA==",
      "requires": {
        "exit-on-epipe": "~1.0.1",
        "printj": "~1.1.0"
      }
    },
    "create-ecdh": {
@@ -5218,6 +5262,11 @@
        "strip-eof": "^1.0.0"
      }
    },
    "exit-on-epipe": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz",
      "integrity": "sha512-h2z5mrROTxce56S+pnvAV890uu7ls7f1kEvVGJbw1OlFH3/mlJ5bkXu0KRyW94v37zzHPiUd55iLn3DA7TjWpw=="
    },
    "expand-brackets": {
      "version": "2.1.4",
      "resolved": "https://registry.npm.taobao.org/expand-brackets/download/expand-brackets-2.1.4.tgz",
@@ -5536,6 +5585,11 @@
        "schema-utils": "^2.5.0"
      }
    },
    "file-saver": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.2.tgz",
      "integrity": "sha512-Wz3c3XQ5xroCxd1G8b7yL0Ehkf0TC9oYC6buPFkNnU9EnaPlifeAFCyCh+iewXTyFRcg0a6j3J7FmJsIhlhBdw=="
    },
    "file-uri-to-path": {
      "version": "1.0.0",
      "resolved": "https://registry.npm.taobao.org/file-uri-to-path/download/file-uri-to-path-1.0.0.tgz",
@@ -5695,6 +5749,11 @@
      "resolved": "https://registry.npm.taobao.org/forwarded/download/forwarded-0.1.2.tgz",
      "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=",
      "dev": true
    },
    "frac": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA=="
    },
    "fragment-cache": {
      "version": "0.2.1",
@@ -9085,6 +9144,11 @@
        "utila": "~0.4"
      }
    },
    "printj": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/printj/-/printj-1.1.2.tgz",
      "integrity": "sha512-zA2SmoLaxZyArQTOPj5LXecR+RagfPSU5Kw1qP+jkWeNlrq+eJZyY2oS68SU1Z/7/myXM4lo9716laOFAVStCQ=="
    },
    "process": {
      "version": "0.11.10",
      "resolved": "https://registry.npm.taobao.org/process/download/process-0.11.10.tgz",
@@ -10270,6 +10334,14 @@
      "resolved": "https://registry.npm.taobao.org/sprintf-js/download/sprintf-js-1.0.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsprintf-js%2Fdownload%2Fsprintf-js-1.0.3.tgz",
      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
      "dev": true
    },
    "ssf": {
      "version": "0.11.2",
      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
      "requires": {
        "frac": "~1.1.2"
      }
    },
    "sshpk": {
      "version": "1.16.1",
@@ -11951,6 +12023,16 @@
      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
      "dev": true
    },
    "wmf": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw=="
    },
    "word": {
      "version": "0.3.0",
      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA=="
    },
    "word-wrap": {
      "version": "1.2.3",
      "resolved": "https://registry.npm.taobao.org/word-wrap/download/word-wrap-1.2.3.tgz",
@@ -12033,6 +12115,29 @@
        "async-limiter": "~1.0.0"
      }
    },
    "xlsx": {
      "version": "0.16.8",
      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.16.8.tgz",
      "integrity": "sha512-qWub4YCn0xLEGHI7WWhk6IJ73MDu7sPSJQImxN6/LiI8wsHi0hUhICEDbyqBT+jgFgORZxrii0HvhNSwBNAPoQ==",
      "requires": {
        "adler-32": "~1.2.0",
        "cfb": "^1.1.4",
        "codepage": "~1.14.0",
        "commander": "~2.17.1",
        "crc-32": "~1.2.0",
        "exit-on-epipe": "~1.0.1",
        "ssf": "~0.11.2",
        "wmf": "~1.0.1",
        "word": "~0.3.0"
      },
      "dependencies": {
        "commander": {
          "version": "2.17.1",
          "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz",
          "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg=="
        }
      }
    },
    "xtend": {
      "version": "4.0.2",
      "resolved": "https://registry.npm.taobao.org/xtend/download/xtend-4.0.2.tgz",

 package.json

@@ -12,6 +12,7 @@
    "core-js": "^3.6.5",
    "echarts": "^4.8.0",
    "element-ui": "^2.13.2",
    "file-saver": "^2.0.2",
    "inmap": "^2.3.3",
    "js-md5": "^0.7.3",
    "moment": "^2.27.0",
@@ -21,7 +22,8 @@
    "vue-layer": "^1.2.0",
    "vue-router": "^3.4.3",
    "vuejs-progress-bar": "^1.2.2",
    "vuex": "^3.5.1"
    "vuex": "^3.5.1",
    "xlsx": "^0.16.8"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.0",

 src/assets/images/login-img.png

 src/assets/js/excel/Blob.js

New file
@@ -0,0 +1,204 @@
/* eslint-disable */
/* Blob.js*/

/*global self, unescape */
/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
  plusplus: true */

/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */

(function(view) {
    "use strict";

    view.URL = view.URL || view.webkitURL;

    if (view.Blob && view.URL) {
        try {
            new Blob;
            return;
        } catch (e) {}
    }

    // Internally we use a BlobBuilder implementation to base Blob off of
    // in order to support older browsers that only have BlobBuilder
    var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function(view) {
        var
            get_class = function(object) {
                return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
            },
            FakeBlobBuilder = function BlobBuilder() {
                this.data = [];
            },
            FakeBlob = function Blob(data, type, encoding) {
                this.data = data;
                this.size = data.length;
                this.type = type;
                this.encoding = encoding;
            },
            FBB_proto = FakeBlobBuilder.prototype,
            FB_proto = FakeBlob.prototype,
            FileReaderSync = view.FileReaderSync,
            FileException = function(type) {
                this.code = this[this.name = type];
            },
            file_ex_codes = (
                "NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR " +
                "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"
            ).split(" "),
            file_ex_code = file_ex_codes.length,
            real_URL = view.URL || view.webkitURL || view,
            real_create_object_URL = real_URL.createObjectURL,
            real_revoke_object_URL = real_URL.revokeObjectURL,
            URL = real_URL,
            btoa = view.btoa,
            atob = view.atob

            ,
            ArrayBuffer = view.ArrayBuffer,
            Uint8Array = view.Uint8Array

            ,
            origin = /^[\w-]+:\/*\[?[\w\.:-]+\]?(?::[0-9]+)?/;
        FakeBlob.fake = FB_proto.fake = true;
        while (file_ex_code--) {
            FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
        }
        // Polyfill URL
        if (!real_URL.createObjectURL) {
            URL = view.URL = function(uri) {
                var
                    uri_info = document.createElementNS("http://www.w3.org/1999/xhtml", "a"),
                    uri_origin;
                uri_info.href = uri;
                if (!("origin" in uri_info)) {
                    if (uri_info.protocol.toLowerCase() === "data:") {
                        uri_info.origin = null;
                    } else {
                        uri_origin = uri.match(origin);
                        uri_info.origin = uri_origin && uri_origin[1];
                    }
                }
                return uri_info;
            };
        }
        URL.createObjectURL = function(blob) {
            var
                type = blob.type,
                data_URI_header;
            if (type === null) {
                type = "application/octet-stream";
            }
            if (blob instanceof FakeBlob) {
                data_URI_header = "data:" + type;
                if (blob.encoding === "base64") {
                    return data_URI_header + ";base64," + blob.data;
                } else if (blob.encoding === "URI") {
                    return data_URI_header + "," + decodeURIComponent(blob.data);
                }
                if (btoa) {
                    return data_URI_header + ";base64," + btoa(blob.data);
                } else {
                    return data_URI_header + "," + encodeURIComponent(blob.data);
                }
            } else if (real_create_object_URL) {
                return real_create_object_URL.call(real_URL, blob);
            }
        };
        URL.revokeObjectURL = function(object_URL) {
            if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {
                real_revoke_object_URL.call(real_URL, object_URL);
            }
        };
        FBB_proto.append = function(data /*, endings*/ ) {
            var bb = this.data;
            // decode data to a binary string
            if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
                var
                    str = "",
                    buf = new Uint8Array(data),
                    i = 0,
                    buf_len = buf.length;
                for (; i < buf_len; i++) {
                    str += String.fromCharCode(buf[i]);
                }
                bb.push(str);
            } else if (get_class(data) === "Blob" || get_class(data) === "File") {
                if (FileReaderSync) {
                    var fr = new FileReaderSync;
                    bb.push(fr.readAsBinaryString(data));
                } else {
                    // async FileReader won't work as BlobBuilder is sync
                    throw new FileException("NOT_READABLE_ERR");
                }
            } else if (data instanceof FakeBlob) {
                if (data.encoding === "base64" && atob) {
                    bb.push(atob(data.data));
                } else if (data.encoding === "URI") {
                    bb.push(decodeURIComponent(data.data));
                } else if (data.encoding === "raw") {
                    bb.push(data.data);
                }
            } else {
                if (typeof data !== "string") {
                    data += ""; // convert unsupported types to strings
                }
                // decode UTF-16 to binary string
                bb.push(unescape(encodeURIComponent(data)));
            }
        };
        FBB_proto.getBlob = function(type) {
            if (!arguments.length) {
                type = null;
            }
            return new FakeBlob(this.data.join(""), type, "raw");
        };
        FBB_proto.toString = function() {
            return "[object BlobBuilder]";
        };
        FB_proto.slice = function(start, end, type) {
            var args = arguments.length;
            if (args < 3) {
                type = null;
            }
            return new FakeBlob(
                this.data.slice(start, args > 1 ? end : this.data.length), type, this.encoding
            );
        };
        FB_proto.toString = function() {
            return "[object Blob]";
        };
        FB_proto.close = function() {
            this.size = 0;
            delete this.data;
        };
        return FakeBlobBuilder;
    }(view));

    view.Blob = function(blobParts, options) {
        var type = options ? (options.type || "") : "";
        var builder = new BlobBuilder();
        if (blobParts) {
            for (var i = 0, len = blobParts.length; i < len; i++) {
                if (Uint8Array && blobParts[i] instanceof Uint8Array) {
                    builder.append(blobParts[i].buffer);
                } else {
                    builder.append(blobParts[i]);
                }
            }
        }
        var blob = builder.getBlob(type);
        if (!blob.slice && blob.webkitSlice) {
            blob.slice = blob.webkitSlice;
        }
        return blob;
    };

    var getPrototypeOf = Object.getPrototypeOf || function(object) {
        return object.__proto__;
    };
    view.Blob.prototype = getPrototypeOf(new view.Blob());
}(
    typeof self !== "undefined" && self ||
    typeof window !== "undefined" && window ||
    this
));

 src/assets/js/excel/Export2Excel.js

New file
@@ -0,0 +1,179 @@
/* eslint-disable */
import FileSaver from 'file-saver'
import Blob from './Blob.js'
import XLSX from 'xlsx'

function generateArray(table) {
    var out = [];
    var rows = table.querySelectorAll('tr');
    var ranges = [];
    for (var R = 0; R < rows.length; ++R) {
        var outRow = [];
        var row = rows[R];
        var columns = row.querySelectorAll('td');
        for (var C = 0; C < columns.length; ++C) {
            var cell = columns[C];
            var colspan = cell.getAttribute('colspan');
            var rowspan = cell.getAttribute('rowspan');
            var cellValue = cell.innerText;
            if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;

            //Skip ranges
            ranges.forEach(function(range) {
                if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
                    for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
                }
            });

            //Handle Row Span
            if (rowspan || colspan) {
                rowspan = rowspan || 1;
                colspan = colspan || 1;
                ranges.push({
                    s: {
                        r: R,
                        c: outRow.length
                    },
                    e: {
                        r: R + rowspan - 1,
                        c: outRow.length + colspan - 1
                    }
                });
            };

            //Handle Value
            outRow.push(cellValue !== "" ? cellValue : null);

            //Handle Colspan
            if (colspan)
                for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
        }
        out.push(outRow);
    }
    return [out, ranges];
};

function datenum(v, date1904) {
    if (date1904) v += 1462;
    var epoch = Date.parse(v);
    return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
}

function sheet_from_array_of_arrays(data, opts) {
    var ws = {};
    var range = {
        s: {
            c: 10000000,
            r: 10000000
        },
        e: {
            c: 0,
            r: 0
        }
    };
    for (var R = 0; R != data.length; ++R) {
        for (var C = 0; C != data[R].length; ++C) {
            if (range.s.r > R) range.s.r = R;
            if (range.s.c > C) range.s.c = C;
            if (range.e.r < R) range.e.r = R;
            if (range.e.c < C) range.e.c = C;
            var cell = {
                v: data[R][C]
            };
            if (cell.v == null) continue;
            var cell_ref = XLSX.utils.encode_cell({
                c: C,
                r: R
            });

            if (typeof cell.v === 'number') cell.t = 'n';
            else if (typeof cell.v === 'boolean') cell.t = 'b';
            else if (cell.v instanceof Date) {
                cell.t = 'n';
                cell.z = XLSX.SSF._table[14];
                cell.v = datenum(cell.v);
            } else cell.t = 's';

            ws[cell_ref] = cell;
        }
    }
    if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
    return ws;
}

function Workbook() {
    if (!(this instanceof Workbook)) return new Workbook();
    this.SheetNames = [];
    this.Sheets = {};
}

function s2ab(s) {
    var buf = new ArrayBuffer(s.length);
    var view = new Uint8Array(buf);
    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
    return buf;
}

export function export_table_to_excel(id) {
    var theTable = document.getElementById(id);
    console.log('a')
    var oo = generateArray(theTable);
    var ranges = oo[1];

    /* original data */
    var data = oo[0];
    var ws_name = "SheetJS";
    console.log(data);

    var wb = new Workbook(),
        ws = sheet_from_array_of_arrays(data);

    /* add ranges to worksheet */
    // ws['!cols'] = ['apple', 'banan'];
    ws['!merges'] = ranges;

    /* add worksheet to workbook */
    wb.SheetNames.push(ws_name);
    wb.Sheets[ws_name] = ws;

    var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: false,
        type: 'binary'
    });

    saveAs(new Blob([s2ab(wbout)], {
        type: "application/octet-stream"
    }), "test.xlsx")
}

function formatJson(jsonData) {
    console.log(jsonData)
}

export function export_json_to_excel(th, jsonData, defaultTitle) {

    /* original data */

    var data = jsonData;
    data.unshift(th);
    var ws_name = "SheetJS";

    var wb = new Workbook(),
        ws = sheet_from_array_of_arrays(data);


    /* add worksheet to workbook */
    wb.SheetNames.push(ws_name);
    wb.Sheets[ws_name] = ws;

    var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: false,
        type: 'binary'
    });
    var title = defaultTitle || '列表'
    saveAs(new Blob([s2ab(wbout)], {
        type: "application/octet-stream"
    }), title + ".xlsx")
}

 src/components/ContentBox.vue

@@ -101,13 +101,13 @@
        margin-right: 4px;
        padding-left: 10px;
        border-radius: 4px;
        font-size: 14px;
        font-size: 20px;
        text-align: center;
        background-image: linear-gradient(to right, #0c3688, #042271);
        background-image: -ms-linear-gradient(to right, #0c3688, #042271);
        background-image: -webkit-linear-gradient(to right, #0c3688, #042271);
        background-image: -moz-linear-gradient(to right, #0c3688, #042271);
        line-height: 32px;
        line-height: 36px;
        font-weight: bold;
        color: #00feff;
    }

 src/components/HdwBadgeBtn.vue

@@ -42,7 +42,7 @@
    background-color: #001260;
    border-radius: 2px;
    border: 1px solid #0090fd;
    color: #4ba1fa;
    color: #FFFFFF;
    align-items: center;
}
.hdw-badge-btn {

 src/components/PageHeader.vue

@@ -104,7 +104,7 @@
                        backgroundColor: '#FFE329'
                    },
                    layout: {
                        height: 20,
                        height: 15,
                        width: 60,
                        verticalTextAlign: 70,
                        horizontalTextAlign: 35,
@@ -573,18 +573,20 @@

<style scoped>
    .page-header-container {
        height: 63px;
        height: 70px;
    }

    .page-header-content {
        height: 100%;
        overflow: hidden;
        padding-top: 5px;
        box-sizing: border-box;
    }

    .page-header-left {
        height: 100%;
        background: url(../assets/images/page-header-left-bg.png) 0 0 no-repeat;
        background-size: 150% 100%;
        background-size: 150% 94%;
        display: flex;
        align-items: center;
        padding-right: 130px;
@@ -598,13 +600,14 @@
    }

    .page-header-left span {
        font-size: 32px;
        font-size: 33px;
        color: #00FEFF;
        font-weight: bold;
        letter-spacing: 7px;
    }

    .page-header-left span.sys-version {
        font-size: 28px;
        font-size: 24px;
        margin-left: 4px;
        color: #00FEFF;
        font-weight: normal;
@@ -623,6 +626,7 @@
        padding-left: 18px;
        display: flex;
        align-items: center;
        margin-bottom: 6px;
    }

    .header-info-item {
@@ -688,4 +692,5 @@
        margin-left: 8px;
        vertical-align: middle;
    }
	
</style>

 src/components/ProcessState.vue

@@ -48,8 +48,8 @@
        margin-right: 10px;
        vertical-align: top;
        cursor: pointer;
        width: 20px;
        height: 20px;
        width: 22px;
        height: 22px;
        display: inline-flex;
        justify-content: center;
        align-items: center;

 src/pages/HomeList.vue

@@ -1,5 +1,6 @@
<template>
    <content-box title="站点列表"
    titleLeft
    toggle
    @toggleChange="toggleChange" 
    style="width:320px">

 src/pages/alarmMager/batteryrTimequery.vue

@@ -118,7 +118,7 @@
        </div>
        <!-- 表单 -->
        <div class="flex-page-content">
            <el-table stripe size="small" :data="table.datas" height="100%" class="tableCent">
            <el-table id="batteryrTimequeryTable" stripe size="small" :data="table.datas" height="100%" class="tableCent">
                <el-table-column v-for="header in table.headers" :key="header.prop" :prop="header.prop" :label="header.label"
                 :width="header.width" :min-width="header.minWidth" align="center"></el-table-column>
                <el-table-column label="确认告警" align="center" :width="80">
@@ -140,7 +140,7 @@
        <div class="flex-page-footer" slot="footer">
            <div class="el-pagination-btns">
                <el-button type="primary" round size="mini" icon="el-icon-search" @click="paramsAlram">查询</el-button>
                <el-button type="primary" round size="mini" icon="el-icon-wallet">导出</el-button>
                <el-button type="primary" round size="mini" icon="el-icon-wallet" @click="exportFile">导出</el-button>
            </div>
            <el-pagination class="pagess" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum"
             :page-sizes="[10, 20, 30, 50, 100]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper"
@@ -163,6 +163,10 @@
    import {
        Timeout,
    } from "../../assets/js/tools";
    // 引入导出表格
    import {
        export_json_to_excel
    } from '../../assets/js/excel/Export2Excel.js'
    export default {
        data() {
            return {
@@ -326,6 +330,10 @@
            this.startTimer(); /* 定时请求 */
        },
        methods: {
            // 导出表格
            exportFile() {
                export_json_to_excel(this.table.headers, this.table.datas);
            },
            /* 维护区 */
            async vindicateData() {
                const resType = await dataType();
@@ -551,8 +559,8 @@
            },
            //selectValue1改变事件
            changeSelect1() {
                this.selectValue2='';
                this.selectValue3='';
                this.selectValue2 = '';
                this.selectValue3 = '';
                this.computerSite(); /*机房站点 */
                this.storageBatterys(); /* 蓄电池组 */
            },

 src/pages/dataTest/HomeList.vue

@@ -1,5 +1,6 @@
<template>
    <content-box title="站点列表"
    titleLeft
    toggle
    @toggleChange="toggleChange" 
    style="width:320px"

 src/pages/index.vue

@@ -1,88 +1,86 @@
<template>
    <flex-layout direction="row" class="page-index">
        <home-list
            slot="header"
            @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 v-if="false">
            <div class="pie-list">
                <div class="pie-item">
                    <pie-chart ref="chart1" id="chart1"></pie-chart>
                </div>
                <div class="pie-item">
                    <pie-chart ref="chart2" id="chart2"></pie-chart>
                </div>
                <div class="pie-item">
                    <pie-chart ref="chart3" id="chart3"></pie-chart>
                </div>
                <div class="pie-item">
                    <pie-chart ref="chart4" id="chart4"></pie-chart>
                </div>
            </div>
        </content-box>
    </flex-layout>
    <flex-layout direction="row" class="page-index">
        <home-list slot="header" @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 v-if="false">
            <div class="pie-list">
                <div class="pie-item">
                    <pie-chart ref="chart1" id="chart1"></pie-chart>
                </div>
                <div class="pie-item">
                    <pie-chart ref="chart2" id="chart2"></pie-chart>
                </div>
                <div class="pie-item">
                    <pie-chart ref="chart3" id="chart3"></pie-chart>
                </div>
                <div class="pie-item">
                    <pie-chart ref="chart4" id="chart4"></pie-chart>
                </div>
            </div>
        </content-box>
    </flex-layout>
</template>

<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";
import InfoPanel from "../components/indexPanel/InfoPanel"
import AddPanel from "@/components/indexPanel/AddPanel";
import HomeList from "./HomeList"
import {
    searchCoordinateMove,
    searchMap,
    searchRoomLocation,
    searchHomeNum,
    addMapHomeList,
    setMapCenterPoint,
    delMapHome,
    searchMapHomeState,
} from '../assets/js/api'
import {
    Timeout
} from '../assets/js/tools'
    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";
    import InfoPanel from "../components/indexPanel/InfoPanel"
    import AddPanel from "@/components/indexPanel/AddPanel";
    import HomeList from "./HomeList"
    import {
        searchCoordinateMove,
        searchMap,
        searchRoomLocation,
        searchHomeNum,
        addMapHomeList,
        setMapCenterPoint,
        delMapHome,
        searchMapHomeState,
    } from '../assets/js/api'
    import {
        Timeout
    } from '../assets/js/tools'

let map;
let addHomeData = [];
let mkList = [];
let chart1, chart2, chart3, chart4;
let infoWindowTest = Vue.extend(InfoWindowTest);
let showInfoWindowTest = new infoWindowTest().$mount();
// 地图panel组件
let infoPanelExtend = Vue.extend(InfoPanel);
let infoPanel = new infoPanelExtend().$mount();
let addPanelExtend = Vue.extend(AddPanel);
let addPanel = new addPanelExtend().$mount();
    let map;
    let addHomeData = [];
    let mkList = [];
    let chart1, chart2, chart3, chart4;
    let infoWindowTest = Vue.extend(InfoWindowTest);
    let showInfoWindowTest = new infoWindowTest().$mount();
    // 地图panel组件
    let infoPanelExtend = Vue.extend(InfoPanel);
    let infoPanel = new infoPanelExtend().$mount();
    let addPanelExtend = Vue.extend(AddPanel);
    let addPanel = new addPanelExtend().$mount();

let inmap;
import HomeNormal from '@/assets/images/home.png'
@@ -146,10 +144,10 @@
            });
            map = inmap.getMap();

            // 地图拖动事件监听
            map.addEventListener("moving", ()=>{
                this.initOverlay();
            });
                // 地图拖动事件监听
                map.addEventListener("moving", () => {
                    this.initOverlay();
                });

            map.addEventListener("moveend", ()=>{
               this.searchMapHomeState();
@@ -192,371 +190,383 @@
            normalOverlay.img.setData([]);
            normalOverlay.animate.setData([]);

            behindOverlay.img.setData([]);
            behindOverlay.animate.setData([]);
                behindOverlay.img.setData([]);
                behindOverlay.animate.setData([]);

            warnOverlay.img.setData([]);
            warnOverlay.animate.setData([]);
                warnOverlay.img.setData([]);
                warnOverlay.animate.setData([]);

            timeoutOverlay.img.setData([]);
            timeoutOverlay.animate.setData([]);
        },
        // 查询设置的地图的中心点，并初始化地图位置
        searchCoordinateMove() {
            searchCoordinateMove().then(res => {
                let rs = JSON.parse(res.data.result);
                if (rs.code == 1) {
                    let data = rs.data[0];
                    var _point = new BMap.Point(data.map_longitude, data.map_latitude);
                    map.centerAndZoom(_point, data.map_level);    // 用城市名设置地图中心点
                }
            }).catch(error => {
                console.log(error);
            });
        },
        searchMap() {
            searchMap().then(res => {
                let rs = JSON.parse(res.data.result);
                let list = this.mergeMapInfos(rs);
                if (list != undefined && list.length > 0) {
                    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]
                            }
                        }
                    });
                    // 设置正常机房
                    this.createMapHome("", mapDotList);
                    // 设置落后机房
                    this.createMapHome("timeout", []);
                    // 设置告警机房
                    this.createMapHome("warn", []);
                    // 设置延时机房
                    this.createMapHome("behind", []);
                    addHomeData = mapDotList;
                    this.startSearchMapHomeState();
                }
            }).catch(error => {
                console.log(error);
            });
        },
        startSearchMapHomeState() {
            this.timer.start(()=>{
                this.$axios.all([
                    this.searchMapHomeState(),
                ]).then(()=>{
                    this.timer.open();
                }).catch(()=>{
                    this.timer.open();
                });
            }, 4000);
        },
        searchMapHomeState() {
            searchMapHomeState().then(res=>{
                let rs = JSON.parse(res.data.result);
                let behind = [];
                let warn = [];
                let timeout = [];
                let normal = [];
                if(rs.code === 1) {
                    let data = rs.data;
                    data.forEach(item=>{
                        let infos = this.getHomeInfoByName(item.StationName);
                        if(infos.length !== 0) {
                            let info = infos[0];
                            switch(item.num) {
                                case 1:     // 落后
                                    behind.push(info);
                                    break;
                                case 2:     // 告警
                                    warn.push(info)
                                    break;
                                case 3:
                                    timeout.push(info);
                                    break;
                                default:
                                    normal.push(info);
                                    break;
                            }
                        }
                    });
                }
                // 更新正常地图图标
                behindOverlay.animate.setData(behind);
                behindOverlay.img.setData(behind);
                // 更新正常地图图标
                warnOverlay.animate.setData(warn);
                warnOverlay.img.setData(warn);
                // 更新正常地图图标
                timeoutOverlay.animate.setData(timeout);
                timeoutOverlay.img.setData(timeout);
                // 更新正常地图图标
                normalOverlay.animate.setData(normal);
                normalOverlay.img.setData(normal);
            }).catch(error=>{
                console.log(error);
            })
        },
        getHomeInfoByName(name) {
            return addHomeData.filter(item=>{
                return item.name === name;
            });
        },
        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;
        },
        createMapHome(type, data) {
            let overlay = normalOverlay;
            let color = "";
            let img = homeNormalImage;
            switch(type) {
                case 'behind':
                    overlay = behindOverlay;
                    color = "#FD696A";
                    img = homeDischargeImage;
                    break;
                case 'warn':
                    overlay = warnOverlay;
                    color = "#C5A26E";
                    img = homeWarnImage;
                    break;
                case 'timeout':
                    overlay = timeoutOverlay;
                    color = "#3274CA";
                    img = homeChargeImage;
                    break;
            }
            // 设置动画
            let animationOverlay = new inMap.PointAnimationOverlay({
                style: {
                    fps: 25, //动画帧数
                    color: color,
                    size: color?20:0,
                    speed: 0.5
                },
                data: data
            });
            // 设置动画层
            overlay.animate = animationOverlay;
            inmap.add(animationOverlay);
                timeoutOverlay.img.setData([]);
                timeoutOverlay.animate.setData([]);
            },
            // 查询设置的地图的中心点，并初始化地图位置
            searchCoordinateMove() {
                searchCoordinateMove().then(res => {
                    let rs = JSON.parse(res.data.result);
                    if (rs.code == 1) {
                        let data = rs.data[0];
                        var _point = new BMap.Point(data.map_longitude, data.map_latitude);
                        map.centerAndZoom(_point, data.map_level); // 用城市名设置地图中心点
                    }
                }).catch(error => {
                    console.log(error);
                });
            },
            searchMap() {
                searchMap().then(res => {
                    let rs = JSON.parse(res.data.result);
                    let list = this.mergeMapInfos(rs);
                    if (list != undefined && list.length > 0) {
                        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]
                                }
                            }
                        });
                        // 设置正常机房
                        this.createMapHome("", mapDotList);
                        // 设置落后机房
                        this.createMapHome("timeout", []);
                        // 设置告警机房
                        this.createMapHome("warn", []);
                        // 设置延时机房
                        this.createMapHome("behind", []);
                        addHomeData = mapDotList;
                        this.startSearchMapHomeState();
                    }
                }).catch(error => {
                    console.log(error);
                });
            },
            startSearchMapHomeState() {
                this.timer.start(() => {
                    this.$axios.all([
                        this.searchMapHomeState(),
                    ]).then(() => {
                        this.timer.open();
                    }).catch(() => {
                        this.timer.open();
                    });
                }, 4000);
            },
            searchMapHomeState() {
                searchMapHomeState().then(res => {
                    let rs = JSON.parse(res.data.result);
                    let behind = [];
                    let warn = [];
                    let timeout = [];
                    let normal = [];
                    if (rs.code === 1) {
                        let data = rs.data;
                        data.forEach(item => {
                            let infos = this.getHomeInfoByName(item.StationName);
                            if (infos.length !== 0) {
                                let info = infos[0];
                                switch (item.num) {
                                    case 1: // 落后
                                        behind.push(info);
                                        break;
                                    case 2: // 告警
                                        warn.push(info)
                                        break;
                                    case 3:
                                        timeout.push(info);
                                        break;
                                    default:
                                        normal.push(info);
                                        break;
                                }
                            }
                        });
                    }
                    // 更新正常地图图标
                    behindOverlay.animate.setData(behind);
                    behindOverlay.img.setData(behind);
                    // 更新正常地图图标
                    warnOverlay.animate.setData(warn);
                    warnOverlay.img.setData(warn);
                    // 更新正常地图图标
                    timeoutOverlay.animate.setData(timeout);
                    timeoutOverlay.img.setData(timeout);
                    // 更新正常地图图标
                    normalOverlay.animate.setData(normal);
                    normalOverlay.img.setData(normal);
                }).catch(error => {
                    console.log(error);
                })
            },
            getHomeInfoByName(name) {
                return addHomeData.filter(item => {
                    return item.name === name;
                });
            },
            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;
            },
            createMapHome(type, data) {
                let overlay = normalOverlay;
                let color = "";
                let img = homeNormalImage;
                switch (type) {
                    case 'behind':
                        overlay = behindOverlay;
                        color = "#FD696A";
                        img = homeDischargeImage;
                        break;
                    case 'warn':
                        overlay = warnOverlay;
                        color = "#C5A26E";
                        img = homeWarnImage;
                        break;
                    case 'timeout':
                        overlay = timeoutOverlay;
                        color = "#3274CA";
                        img = homeChargeImage;
                        break;
                }
                // 设置动画
                let animationOverlay = new inMap.PointAnimationOverlay({
                    style: {
                        fps: 25, //动画帧数
                        color: color,
                        size: color ? 20 : 0,
                        speed: 0.5
                    },
                    data: data
                });
                // 设置动画层
                overlay.animate = animationOverlay;
                inmap.add(animationOverlay);

            let imgOverlay = new inMap.ImgOverlay({
                tooltip: {
                    show: true,
                    formatter: "{name}"
                },
                style: {
                    normal: {
                        icon: img,
                        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);
                }
            });
            // 添加图片层
            overlay.img = imgOverlay;
            inmap.add(imgOverlay);
        },
        createMapDot(list) {
            let self = this;
            mkList = [];
            list.forEach(item => {
                let pt = new BMap.Point(item.lng, item.lat);
                let mk = new BMap.Marker(pt);    // 定义marker点
                // 向mk点添加label
                var home_name = new BMap.Label(item.title, {offset: new BMap.Size(20, -10)});
                home_name.setStyle({display: 'none', padding: '4px 2px'});
                mk.setLabel(home_name);
                mk.addEventListener('mouseover', function (e) {
                    this.getLabel().setStyle({display: 'block'});
                });
                let imgOverlay = new inMap.ImgOverlay({
                    tooltip: {
                        show: true,
                        formatter: "{name}"
                    },
                    style: {
                        normal: {
                            icon: img,
                            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);
                    }
                });
                // 添加图片层
                overlay.img = imgOverlay;
                inmap.add(imgOverlay);
            },
            createMapDot(list) {
                let self = this;
                mkList = [];
                list.forEach(item => {
                    let pt = new BMap.Point(item.lng, item.lat);
                    let mk = new BMap.Marker(pt); // 定义marker点
                    // 向mk点添加label
                    var home_name = new BMap.Label(item.title, {
                        offset: new BMap.Size(20, -10)
                    });
                    home_name.setStyle({
                        display: 'none',
                        padding: '4px 2px'
                    });
                    mk.setLabel(home_name);
                    mk.addEventListener('mouseover', function(e) {
                        this.getLabel().setStyle({
                            display: 'block'
                        });
                    });

                mk.addEventListener('mouseout', function (e) {
                    this.getLabel().setStyle({display: 'none'});
                });
                mk.addEventListener('click', function (e) {
                    var target = e.target;
                    let homeInfo = self.getHomeByPoint(target.point);
                    if (homeInfo) {
                        self.searchHomeNum(homeInfo.data.StationId, homeInfo.data.FBSDeviceId, homeInfo.data);
                    }
                });
                mkList.push(mk);
                // 设置覆盖物的右键菜单
                let menu = new BMap.ContextMenu();
                menu.addItem(new BMap.MenuItem('删除', (e)=>{
                    let point = new BMap.Point(e.lng, e.lat);
                    this.delMapHome(mk);
                }));
                mk.addContextMenu(menu);
                // 向地图添加覆盖物
                map.addOverlay(mk);
            });
        },
        leafClick(data) {
            // 构造查询条件
            let searchParams = {
                StationName1: data.data.StationName1,
                StationName2: data.data.StationName2,
                StationName5: data.data.StationName5,
                StationName3: data.data.StationName3
            };
            // 查询机房的定位信息
            this.searchRoomLocation(searchParams);
        },
        // 根据查询条件查询机房的定位信息
        searchRoomLocation(searchParams) {
            searchRoomLocation(searchParams).then(res => {
                let rs = JSON.parse(res.data.result);
                if (rs.code == 1) {
                    let data = rs.data[0];
                    // 构造点
                    let point = {
                        lng: data.longitude,
                        lat: data.latitude
                    };
                    let homeInfo = this.getHomeByPoint(point);
                    if (homeInfo) {
                        this.searchHomeNum(homeInfo.data.StationId, homeInfo.data.FBSDeviceId, homeInfo.data);
                    }
                } else {
                    this.$layer.msg('当前机房未定位')
                }
            }).catch(error => {
                console.log(error);
            });
        },
        // 查询告警落后的信息
        searchHomeNum(sId, dev_id, homeData) {
            searchHomeNum({StationId: sId, FBSDeviceId: dev_id}).then(res => {
                let rs = JSON.parse(res.data.result);
                homeData.nums = rs;
                this.showMapPanel(homeData);
            }).catch(error => {
                console.log(error);
            })
        },
        getMkByPoint(point) {
            let result = 0;
            for (let i = 0; i < mkList.length; i++) {
                let mk = mkList[i];
                if (mk.point.lng == point.lng && mk.point.lat == point.lat) {
                    result = mk;
                    break;
                }
            }
            return result;
        },
        getHomeByPoint(point) {
            let result = 0;
            for (let i = 0; i < addHomeData.length; i++) {
                let homeData = addHomeData[i];
                if (homeData.lng == point.lng && homeData.lat == point.lat) {
                    result = homeData;
                    break;
                }
            }
            return result;
        },
        showMapPanel(homeData) {
            let BMapLib = window.BMapLib;
            let infoWindow = null;
            let point = new BMap.Point(homeData.longitude, homeData.latitude);
            /* 设置站点窗口 */
            var opts = {
                title: homeData.StationName, // 信息窗口标题
                width: 'auto',             //宽度
                height: 'atuo',            //高度
                panel: "panel",         //检索结果面板
                enableAutoPan: true,     //自动平移
                enableSendToPhone: false,
                searchTypes: []
            };
            infoPanel.info = homeData;
            infoWindow = new BMapLib.SearchInfoWindow(map, infoPanel.$el, opts);
            infoWindow.open(point);
        },
        addHomeDot(map, point) {      // 向地图中添加覆盖物
            let removeMarker = function(e,ee,marker){
                map.removeOverlay(marker);
            };
            let mk = new BMap.Marker(point);
            mk.enableDragging();        // 设置覆盖物可以移动
            // 设置覆盖物的右键菜单
            let menu = new BMap.ContextMenu();
            menu.addItem(new BMap.MenuItem('删除', removeMarker.bind(mk)));
            mk.addContextMenu(menu);
            // 向覆盖物添加点击事件，显示添加机房的面板
            mk.addEventListener('click', e=>{
                let target = e.target;
                let point = new BMap.Point(target.getPosition().lng, target.getPosition().lat);
                this.addMapHomeList(point);
            });
            // 将覆盖物添加到地图上
            map.addOverlay(mk);
                    mk.addEventListener('mouseout', function(e) {
                        this.getLabel().setStyle({
                            display: 'none'
                        });
                    });
                    mk.addEventListener('click', function(e) {
                        var target = e.target;
                        let homeInfo = self.getHomeByPoint(target.point);
                        if (homeInfo) {
                            self.searchHomeNum(homeInfo.data.StationId, homeInfo.data.FBSDeviceId, homeInfo.data);
                        }
                    });
                    mkList.push(mk);
                    // 设置覆盖物的右键菜单
                    let menu = new BMap.ContextMenu();
                    menu.addItem(new BMap.MenuItem('删除', (e) => {
                        let point = new BMap.Point(e.lng, e.lat);
                        this.delMapHome(mk);
                    }));
                    mk.addContextMenu(menu);
                    // 向地图添加覆盖物
                    map.addOverlay(mk);
                });
            },
            leafClick(data) {
                // 构造查询条件
                let searchParams = {
                    StationName1: data.data.StationName1,
                    StationName2: data.data.StationName2,
                    StationName5: data.data.StationName5,
                    StationName3: data.data.StationName3
                };
                // 查询机房的定位信息
                this.searchRoomLocation(searchParams);
            },
            // 根据查询条件查询机房的定位信息
            searchRoomLocation(searchParams) {
                searchRoomLocation(searchParams).then(res => {
                    let rs = JSON.parse(res.data.result);
                    if (rs.code == 1) {
                        let data = rs.data[0];
                        // 构造点
                        let point = {
                            lng: data.longitude,
                            lat: data.latitude
                        };
                        let homeInfo = this.getHomeByPoint(point);
                        if (homeInfo) {
                            this.searchHomeNum(homeInfo.data.StationId, homeInfo.data.FBSDeviceId, homeInfo.data);
                        }
                    } else {
                        this.$layer.msg('当前机房未定位')
                    }
                }).catch(error => {
                    console.log(error);
                });
            },
            // 查询告警落后的信息
            searchHomeNum(sId, dev_id, homeData) {
                searchHomeNum({
                    StationId: sId,
                    FBSDeviceId: dev_id
                }).then(res => {
                    let rs = JSON.parse(res.data.result);
                    homeData.nums = rs;
                    this.showMapPanel(homeData);
                }).catch(error => {
                    console.log(error);
                })
            },
            getMkByPoint(point) {
                let result = 0;
                for (let i = 0; i < mkList.length; i++) {
                    let mk = mkList[i];
                    if (mk.point.lng == point.lng && mk.point.lat == point.lat) {
                        result = mk;
                        break;
                    }
                }
                return result;
            },
            getHomeByPoint(point) {
                let result = 0;
                for (let i = 0; i < addHomeData.length; i++) {
                    let homeData = addHomeData[i];
                    if (homeData.lng == point.lng && homeData.lat == point.lat) {
                        result = homeData;
                        break;
                    }
                }
                return result;
            },
            showMapPanel(homeData) {
                let BMapLib = window.BMapLib;
                let infoWindow = null;
                let point = new BMap.Point(homeData.longitude, homeData.latitude);
                /* 设置站点窗口 */
                var opts = {
                    title: homeData.StationName, // 信息窗口标题
                    width: 'auto', //宽度
                    height: 'atuo', //高度
                    panel: "panel", //检索结果面板
                    enableAutoPan: true, //自动平移
                    enableSendToPhone: false,
                    searchTypes: []
                };
                infoPanel.info = homeData;
                infoWindow = new BMapLib.SearchInfoWindow(map, infoPanel.$el, opts);
                infoWindow.open(point);
            },
            addHomeDot(map, point) { // 向地图中添加覆盖物
                let removeMarker = function(e, ee, marker) {
                    map.removeOverlay(marker);
                };
                let mk = new BMap.Marker(point);
                mk.enableDragging(); // 设置覆盖物可以移动
                // 设置覆盖物的右键菜单
                let menu = new BMap.ContextMenu();
                menu.addItem(new BMap.MenuItem('删除', removeMarker.bind(mk)));
                mk.addContextMenu(menu);
                // 向覆盖物添加点击事件，显示添加机房的面板
                mk.addEventListener('click', e => {
                    let target = e.target;
                    let point = new BMap.Point(target.getPosition().lng, target.getPosition().lat);
                    this.addMapHomeList(point);
                });
                // 将覆盖物添加到地图上
                map.addOverlay(mk);

        },
        // 查询还未添加到地图上的机房
        addMapHomeList(point) {
            // 查询后台
            addMapHomeList().then(res=>{
                let rs = JSON.parse(res.data.result);
                let data = [];
                if(rs.code == 1) {
                    data = rs.data.map(item=>{
                        let home = item.StationName1+'-'+item.StationName2+'-'+item.StationName5+'-'+item.StationName3;
                        item.label = home;
                        item.value = home;
                        return item;
                    });
                }
                // 设置组件的值
                addPanel.homeList = data;
                addPanel.point = point;
                // 显示添加机房的面板
                this.showMapAddPanel(point);
            }).catch(error=>{
            },
            // 查询还未添加到地图上的机房
            addMapHomeList(point) {
                // 查询后台
                addMapHomeList().then(res => {
                    let rs = JSON.parse(res.data.result);
                    let data = [];
                    if (rs.code == 1) {
                        data = rs.data.map(item => {
                            let home = item.StationName1 + '-' + item.StationName2 + '-' + item.StationName5 + '-' + item.StationName3;
                            item.label = home;
                            item.value = home;
                            return item;
                        });
                    }
                    // 设置组件的值
                    addPanel.homeList = data;
                    addPanel.point = point;
                    // 显示添加机房的面板
                    this.showMapAddPanel(point);
                }).catch(error => {

            });
        },
@@ -648,61 +658,74 @@
</script>

<style scoped lang="less">
    .page-index {
        color: #ffffff;
    }

.page-index {
    color: #ffffff;
}
    .map-container {
        margin-right: 4px;
        margin-left: 4px;
        box-sizing: border-box;
        height: 100%;
        border: 1px solid #143a92;
        border-radius: 8px;
        padding: 10px;
    }

.map-container {
    margin-right: 4px;
    margin-left: 4px;
    box-sizing: border-box;
    height: 100%;
}
    .map-content {
        height: 100%;
    }

.map-content {
    height: 100%;
}
    .pie-list {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        height: 100%;
        overflow: hidden;
    }

.pie-list {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100%;
    overflow: hidden;
}
    .pie-item {
        flex: 1;
    }

.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>
    .map-icon-details-wrapper {
        position: absolute;
        bottom: 16px;
        right: 20px;
        z-index: 99;
        background-color: #052272;
        color: #00ffff;
    }

    .map-icon-details-title {
        padding: 6px 12px;
        font-size: 14px;
        color: #FFFFFF;
        background: #0b388b;
        font-weight: bold;
        color: #00ffff;
    }

    .map-icon-details-content {
        padding: 10px 12px;
    }

    .map-icon-item {
        padding: 4px 8px;
    }

    .map-icon-item .item-wrapper {
        display: inline-block;
    }

    .item-wrapper.icon-wrapper img {
        width: 30px;
        height: auto;
        vertical-align: middle;
        margin-right: 8px;
    }

    .item-wrapper.text-wrapper {
        font-size: 12px;
    }
</style>

 src/pages/login.vue

@@ -119,16 +119,16 @@
        .logo{
            display: flex;
            align-items: center;
            font-size: 36px;
            font-size: 48px;
            color: #007fe1;
            font-weight: bold;
            .logoImg{
                height: 38px;
                margin-right: 20px;
                height: 40px;
                margin-right: 14px;
            }
        }
        .picImg{
            width: 600px;
            width: 580px;
            margin-top: 12vh;
        }
    }
@@ -198,12 +198,12 @@
        color: #007fe1;
    }
    
    @media screen and (max-width: 1366px) {
    @media screen and (max-width: 1680px) {
        .sliderCon .logo{
            font-size: 30px;
            font-size: 40px;
        }
        .sliderCon .picImg{
            width: 440px;
            width: 480px;
        }
        .login_box{
            width: 400px;