马宇豪
2023-12-19 346adb79f263ae12193758e1c9be227e5f913246
新项目
已修改4个文件
已添加7个文件
782 ■■■■ 文件已修改
.env.development 4 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
package-lock.json 287 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
public/bigMap.png 补丁 | 查看 | 原始文档 | blame | 历史
public/bigMap2.png 补丁 | 查看 | 原始文档 | blame | 历史
public/bigMapPic.JPG 补丁 | 查看 | 原始文档 | blame | 历史
public/bigMapPic2.png 补丁 | 查看 | 原始文档 | blame | 历史
public/factoryMap.png 补丁 | 查看 | 原始文档 | blame | 历史
src/api/bigScreen/index.ts 7 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/assets/factoryMap.png 补丁 | 查看 | 原始文档 | blame | 历史
src/views/bigScreen/components/map.vue 130 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/bigScreen/components/screen.vue 354 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
.env.development
@@ -1,6 +1,6 @@
# 本地环境
ENV = 'development'
#VITE_API_URL = 'http://192.168.0.47:17080'
VITE_API_URL = 'http://192.168.0.47:17080'
#线上正式环境接口地址
VITE_API_URL = 'http://121.239.169.30:17081/api'
#VITE_API_URL = 'http://121.239.169.30:17081/api'
package-lock.json
@@ -9,8 +9,9 @@
            "version": "2.1.1",
            "license": "MIT",
            "dependencies": {
        "@amap/amap-jsapi-loader": "^1.0.1",
                "@element-plus/icons-vue": "^2.0.6",
                "@kjgl77/datav-vue3": "^1.2.1",
        "@kjgl77/datav-vue3": "^1.6.1",
                "@wangeditor/editor": "^5.1.14",
                "axios": "^0.27.2",
                "countup.js": "^2.2.0",
@@ -24,6 +25,7 @@
                "json-bigint": "^1.0.0",
                "jsplumb": "^2.15.6",
                "mitt": "^3.0.0",
        "moment": "^2.29.4",
                "nprogress": "^0.2.0",
                "pinia": "^2.0.14",
                "pinia-plugin-persistedstate": "^2.1.1",
@@ -33,6 +35,7 @@
                "sortablejs": "^1.15.0",
                "splitpanes": "^3.1.1",
                "vue": "^3.2.36",
        "vue-baidu-map-3x": "^1.0.35",
                "vue-clipboard3": "^2.0.0",
                "vue-grid-layout": "^3.0.0-beta1",
                "vue-i18n": "^9.1.10",
@@ -49,9 +52,11 @@
                "@typescript-eslint/parser": "^5.27.0",
                "@vitejs/plugin-vue": "^2.3.3",
                "@vue/compiler-sfc": "^3.2.36",
        "amfe-flexible": "^2.2.1",
                "dotenv": "^16.0.1",
                "eslint": "^8.17.0",
                "eslint-plugin-vue": "^9.1.0",
        "postcss-pxtorem": "^6.0.0",
                "prettier": "^2.6.2",
                "sass": "^1.52.2",
                "sass-loader": "^13.0.0",
@@ -63,6 +68,11 @@
                "node": ">=12.0.0",
                "npm": ">= 6.0.0"
            }
    },
    "node_modules/@amap/amap-jsapi-loader": {
      "version": "1.0.1",
      "resolved": "https://registry.npmmirror.com/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
      "integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw=="
        },
        "node_modules/@babel/parser": {
            "version": "7.18.0",
@@ -450,12 +460,9 @@
            }
        },
        "node_modules/@jiaminghi/color": {
            "version": "0.1.1",
            "resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-0.1.1.tgz",
            "integrity": "sha512-M09+Sb5HGqVim0zo+nG5gU1v+6gXT8ptr0BZR6dMGt83XmCJgnZtO8s7llTW4hLFFFM5co6geZvTekqLpSPAAQ==",
            "dependencies": {
                "@babel/runtime": "^7.5.5"
            }
      "version": "1.1.3",
      "resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-1.1.3.tgz",
      "integrity": "sha512-ZY3hdorgODk4OSTbxyXBPxAxHPIVf9rPlKJyK1C1db46a50J0reFKpAvfZG8zMG3lvM60IR7Qawgcu4ZDO3+Hg=="
        },
        "node_modules/@jiaminghi/transition": {
            "version": "1.1.11",
@@ -466,40 +473,42 @@
            }
        },
        "node_modules/@kjgl77/datav-vue3": {
            "version": "1.2.1",
            "resolved": "https://registry.npmmirror.com/@kjgl77/datav-vue3/-/datav-vue3-1.2.1.tgz",
            "integrity": "sha512-hiSodPvXkp6o8nyPPgDFcrb+M4h9dZd2hmuT3WqHY+sInEHCFtypCGrhvxRFT3oGlcIlLKSX9WVb117JksFROA==",
      "version": "1.6.1",
      "resolved": "https://registry.npmmirror.com/@kjgl77/datav-vue3/-/datav-vue3-1.6.1.tgz",
      "integrity": "sha512-HgEr/McsMhYIIqUhBQR0LB9Q2rFARUd4VrjcsTCyEW6RPZsCJO1Yoto/7P9jLO2uRmzfDOyxJxLx4c67rORziw==",
            "dependencies": {
                "@jiaminghi/c-render": "^0.4.3",
                "@jiaminghi/charts": "^0.2.18",
                "@vueuse/core": "^9.1.0"
        "@jiaminghi/color": "^1.1.3",
        "@vueuse/core": "^10.1.2",
        "lodash-es": "^4.17.21"
            }
        },
        "node_modules/@kjgl77/datav-vue3/node_modules/@types/web-bluetooth": {
            "version": "0.0.15",
            "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.15.tgz",
            "integrity": "sha512-w7hEHXnPMEZ+4nGKl/KDRVpxkwYxYExuHOYXyzIzCDzEZ9ZCGMAewulr9IqJu2LR4N37fcnb1XVeuZ09qgOxhA=="
      "version": "0.0.17",
      "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.17.tgz",
      "integrity": "sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA=="
        },
        "node_modules/@kjgl77/datav-vue3/node_modules/@vueuse/core": {
            "version": "9.1.1",
            "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-9.1.1.tgz",
            "integrity": "sha512-QfuaNWRDMQcCUwXylCyYhPC3ScS9Tiiz4J0chdwr3vOemBwRToSywq8MP+ZegKYFnbETzRY8G/5zC+ca30wrRQ==",
      "version": "10.3.0",
      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-10.3.0.tgz",
      "integrity": "sha512-BEM5yxcFKb5btFjTSAFjTu5jmwoW66fyV9uJIP4wUXXU8aR5Hl44gndaaXp7dC5HSObmgbnR2RN+Un1p68Mf5Q==",
            "dependencies": {
                "@types/web-bluetooth": "^0.0.15",
                "@vueuse/metadata": "9.1.1",
                "@vueuse/shared": "9.1.1",
                "vue-demi": "*"
        "@types/web-bluetooth": "^0.0.17",
        "@vueuse/metadata": "10.3.0",
        "@vueuse/shared": "10.3.0",
        "vue-demi": ">=0.14.5"
            }
        },
        "node_modules/@kjgl77/datav-vue3/node_modules/@vueuse/metadata": {
            "version": "9.1.1",
            "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.1.1.tgz",
            "integrity": "sha512-XZ2KtSW+85LLHB/IdGILPAtbIVHasPsAW7aqz3BRMzJdAQWRiM/FGa1OKBwLbXtUw/AmjKYFlZJo7eOFIBXRog=="
      "version": "10.3.0",
      "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-10.3.0.tgz",
      "integrity": "sha512-Ema3YhNOa4swDsV0V7CEY5JXvK19JI/o1szFO1iWxdFg3vhdFtCtSTP26PCvbUpnUtNHBY2wx5y3WDXND5Pvnw=="
        },
        "node_modules/@kjgl77/datav-vue3/node_modules/vue-demi": {
            "version": "0.13.11",
            "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",
            "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
      "version": "0.14.5",
      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.5.tgz",
      "integrity": "sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==",
            "hasInstallScript": true,
            "bin": {
                "vue-demi-fix": "bin/vue-demi-fix.js",
@@ -1071,17 +1080,17 @@
            "integrity": "sha512-g2s2BeyeEtJElmMFfFPnM+BTvnt0omniyvz8U18/zXDpQIMGozlNQgHoFeratyMfgVBhH/u2VKzmchChtDsgPQ=="
        },
        "node_modules/@vueuse/shared": {
            "version": "9.1.1",
            "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-9.1.1.tgz",
            "integrity": "sha512-c+IfcOYmHiHqoEa3ED1Tbpue5GHmoUmTp8PtO4YbczthtY155Rt6DmWhjxMLXBF1Bcidagxljmp/7xtAzEHXLw==",
      "version": "10.3.0",
      "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-10.3.0.tgz",
      "integrity": "sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==",
            "dependencies": {
                "vue-demi": "*"
        "vue-demi": ">=0.14.5"
            }
        },
        "node_modules/@vueuse/shared/node_modules/vue-demi": {
            "version": "0.13.11",
            "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",
            "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
      "version": "0.14.5",
      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.5.tgz",
      "integrity": "sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==",
            "hasInstallScript": true,
            "bin": {
                "vue-demi-fix": "bin/vue-demi-fix.js",
@@ -1481,6 +1490,12 @@
                "ajv": "^6.9.1"
            }
        },
    "node_modules/amfe-flexible": {
      "version": "2.2.1",
      "resolved": "https://registry.npmmirror.com/amfe-flexible/-/amfe-flexible-2.2.1.tgz",
      "integrity": "sha512-L2VfvDzoETBjhRptg5u/IUuzHSuxm22JpSRb404p/TBGeRfwWmmNEbB+TFPIP/sS/+pbM18bCFH9QnMojLuPNw==",
      "dev": true
    },
        "node_modules/ansi-regex": {
            "version": "5.0.1",
            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -1579,6 +1594,39 @@
            "engines": {
                "node": ">=8"
            }
    },
    "node_modules/bmaplib.curveline": {
      "version": "1.0.0",
      "resolved": "https://registry.npmmirror.com/bmaplib.curveline/-/bmaplib.curveline-1.0.0.tgz",
      "integrity": "sha512-9wcFMVhiYxNPqpvsLDAADn3qDhNzXp2mA6VyHSHg2XOAgSooC7ZiujdFhy0sp+0QYjTfJ/MjmLuNoUg2HHxH4Q=="
    },
    "node_modules/bmaplib.distancetool": {
      "version": "1.0.2",
      "resolved": "https://registry.npmmirror.com/bmaplib.distancetool/-/bmaplib.distancetool-1.0.2.tgz",
      "integrity": "sha512-EvxMnQRH6xM036zx5OLPyTg5tMCTbFBuGTTHOtExLy2/T0X6v5Va0YE7c3IPm/a/Eo5V/ynYpOLOLZbRY8ccyA=="
    },
    "node_modules/bmaplib.heatmap": {
      "version": "1.0.4",
      "resolved": "https://registry.npmmirror.com/bmaplib.heatmap/-/bmaplib.heatmap-1.0.4.tgz",
      "integrity": "sha512-rmhqUARBpUSJ9jXzUI2j7dIOqnc38bqubkx/8a349U2qtw/ulLUwyzRD535OrA8G7w5cz4aPKm6/rNvUAarg/Q=="
    },
    "node_modules/bmaplib.lushu": {
      "version": "1.0.7",
      "resolved": "https://registry.npmmirror.com/bmaplib.lushu/-/bmaplib.lushu-1.0.7.tgz",
      "integrity": "sha512-LVvgpESPii6xGxyjnQjq8u+ic4NjvhdCPV/RiSS/PGTUdZKeTDS7prSpleJLZH3ES0+oc0gYn8bw0LtPYUSz2w=="
    },
    "node_modules/bmaplib.markerclusterer": {
      "version": "1.0.13",
      "resolved": "https://registry.npmmirror.com/bmaplib.markerclusterer/-/bmaplib.markerclusterer-1.0.13.tgz",
      "integrity": "sha512-VrLyWSiuDEVNi0yUfwOhFQ6z1oEEHS4w36GNu3iASu6p52QIx9uAXMUkuSCHReNR0bj2Cp9SA1dSx5RpojXajQ==",
      "dependencies": {
        "bmaplib.texticonoverlay": "^1.0.2"
      }
    },
    "node_modules/bmaplib.texticonoverlay": {
      "version": "1.0.2",
      "resolved": "https://registry.npmmirror.com/bmaplib.texticonoverlay/-/bmaplib.texticonoverlay-1.0.2.tgz",
      "integrity": "sha512-4ZTWr4ZP3B6qEWput5Tut16CfZgII38YwM3bpyb4gFTQyORlKYryFp9WHWrwZZaHlOyYDAXG9SX0hka43jTADg=="
        },
        "node_modules/boolbase": {
            "version": "1.0.0",
@@ -3436,6 +3484,14 @@
            "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.0.tgz",
            "integrity": "sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ=="
        },
    "node_modules/moment": {
      "version": "2.29.4",
      "resolved": "https://registry.npmmirror.com/moment/-/moment-2.29.4.tgz",
      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
      "engines": {
        "node": "*"
      }
    },
        "node_modules/ms": {
            "version": "2.1.2",
            "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -3685,6 +3741,15 @@
            },
            "engines": {
                "node": "^10 || ^12 || >=14"
      }
    },
    "node_modules/postcss-pxtorem": {
      "version": "6.0.0",
      "resolved": "https://registry.npmmirror.com/postcss-pxtorem/-/postcss-pxtorem-6.0.0.tgz",
      "integrity": "sha512-ZRXrD7MLLjLk2RNGV6UA4f5Y7gy+a/j1EqjAfp9NdcNYVjUMvg5HTYduTjSkKBkRkfqbg/iKrjMO70V4g1LZeg==",
      "dev": true,
      "peerDependencies": {
        "postcss": "^8.0.0"
            }
        },
        "node_modules/postcss-selector-parser": {
@@ -4487,6 +4552,24 @@
                "@vue/shared": "3.2.36"
            }
        },
    "node_modules/vue-baidu-map-3x": {
      "version": "1.0.35",
      "resolved": "https://registry.npmmirror.com/vue-baidu-map-3x/-/vue-baidu-map-3x-1.0.35.tgz",
      "integrity": "sha512-1FDzxgd+X7MVcG8JbyyxDOSYRDUi96qEuuNICQmwlAE/EDwf4vz1oYRhRz05s/MuDpW7aIBlubF/PlSTpBlUEw==",
      "dependencies": {
        "bmaplib.curveline": "^1.0.0",
        "bmaplib.distancetool": "^1.0.2",
        "bmaplib.heatmap": "^1.0.4",
        "bmaplib.lushu": "^1.0.7",
        "bmaplib.markerclusterer": "^1.0.13",
        "tiny-emitter": "^2.1.0",
        "vue": "^3.2.25",
        "vue-router": "^4.0.14"
      },
      "peerDependencies": {
        "vue": "^3.2.25"
      }
    },
        "node_modules/vue-clipboard3": {
            "version": "2.0.0",
            "resolved": "https://registry.npmjs.org/vue-clipboard3/-/vue-clipboard3-2.0.0.tgz",
@@ -4788,6 +4871,11 @@
        }
    },
    "dependencies": {
    "@amap/amap-jsapi-loader": {
      "version": "1.0.1",
      "resolved": "https://registry.npmmirror.com/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
      "integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw=="
    },
        "@babel/parser": {
            "version": "7.18.0",
            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.0.tgz",
@@ -5085,12 +5173,9 @@
            }
        },
        "@jiaminghi/color": {
            "version": "0.1.1",
            "resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-0.1.1.tgz",
            "integrity": "sha512-M09+Sb5HGqVim0zo+nG5gU1v+6gXT8ptr0BZR6dMGt83XmCJgnZtO8s7llTW4hLFFFM5co6geZvTekqLpSPAAQ==",
            "requires": {
                "@babel/runtime": "^7.5.5"
            }
      "version": "1.1.3",
      "resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-1.1.3.tgz",
      "integrity": "sha512-ZY3hdorgODk4OSTbxyXBPxAxHPIVf9rPlKJyK1C1db46a50J0reFKpAvfZG8zMG3lvM60IR7Qawgcu4ZDO3+Hg=="
        },
        "@jiaminghi/transition": {
            "version": "1.1.11",
@@ -5101,40 +5186,42 @@
            }
        },
        "@kjgl77/datav-vue3": {
            "version": "1.2.1",
            "resolved": "https://registry.npmmirror.com/@kjgl77/datav-vue3/-/datav-vue3-1.2.1.tgz",
            "integrity": "sha512-hiSodPvXkp6o8nyPPgDFcrb+M4h9dZd2hmuT3WqHY+sInEHCFtypCGrhvxRFT3oGlcIlLKSX9WVb117JksFROA==",
      "version": "1.6.1",
      "resolved": "https://registry.npmmirror.com/@kjgl77/datav-vue3/-/datav-vue3-1.6.1.tgz",
      "integrity": "sha512-HgEr/McsMhYIIqUhBQR0LB9Q2rFARUd4VrjcsTCyEW6RPZsCJO1Yoto/7P9jLO2uRmzfDOyxJxLx4c67rORziw==",
            "requires": {
                "@jiaminghi/c-render": "^0.4.3",
                "@jiaminghi/charts": "^0.2.18",
                "@vueuse/core": "^9.1.0"
        "@jiaminghi/color": "^1.1.3",
        "@vueuse/core": "^10.1.2",
        "lodash-es": "^4.17.21"
            },
            "dependencies": {
                "@types/web-bluetooth": {
                    "version": "0.0.15",
                    "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.15.tgz",
                    "integrity": "sha512-w7hEHXnPMEZ+4nGKl/KDRVpxkwYxYExuHOYXyzIzCDzEZ9ZCGMAewulr9IqJu2LR4N37fcnb1XVeuZ09qgOxhA=="
          "version": "0.0.17",
          "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.17.tgz",
          "integrity": "sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA=="
                },
                "@vueuse/core": {
                    "version": "9.1.1",
                    "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-9.1.1.tgz",
                    "integrity": "sha512-QfuaNWRDMQcCUwXylCyYhPC3ScS9Tiiz4J0chdwr3vOemBwRToSywq8MP+ZegKYFnbETzRY8G/5zC+ca30wrRQ==",
          "version": "10.3.0",
          "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-10.3.0.tgz",
          "integrity": "sha512-BEM5yxcFKb5btFjTSAFjTu5jmwoW66fyV9uJIP4wUXXU8aR5Hl44gndaaXp7dC5HSObmgbnR2RN+Un1p68Mf5Q==",
                    "requires": {
                        "@types/web-bluetooth": "^0.0.15",
                        "@vueuse/metadata": "9.1.1",
                        "@vueuse/shared": "9.1.1",
                        "vue-demi": "*"
            "@types/web-bluetooth": "^0.0.17",
            "@vueuse/metadata": "10.3.0",
            "@vueuse/shared": "10.3.0",
            "vue-demi": ">=0.14.5"
                    }
                },
                "@vueuse/metadata": {
                    "version": "9.1.1",
                    "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.1.1.tgz",
                    "integrity": "sha512-XZ2KtSW+85LLHB/IdGILPAtbIVHasPsAW7aqz3BRMzJdAQWRiM/FGa1OKBwLbXtUw/AmjKYFlZJo7eOFIBXRog=="
          "version": "10.3.0",
          "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-10.3.0.tgz",
          "integrity": "sha512-Ema3YhNOa4swDsV0V7CEY5JXvK19JI/o1szFO1iWxdFg3vhdFtCtSTP26PCvbUpnUtNHBY2wx5y3WDXND5Pvnw=="
                },
                "vue-demi": {
                    "version": "0.13.11",
                    "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",
                    "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
          "version": "0.14.5",
          "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.5.tgz",
          "integrity": "sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==",
                    "requires": {}
                }
            }
@@ -5543,17 +5630,17 @@
            "integrity": "sha512-g2s2BeyeEtJElmMFfFPnM+BTvnt0omniyvz8U18/zXDpQIMGozlNQgHoFeratyMfgVBhH/u2VKzmchChtDsgPQ=="
        },
        "@vueuse/shared": {
            "version": "9.1.1",
            "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-9.1.1.tgz",
            "integrity": "sha512-c+IfcOYmHiHqoEa3ED1Tbpue5GHmoUmTp8PtO4YbczthtY155Rt6DmWhjxMLXBF1Bcidagxljmp/7xtAzEHXLw==",
      "version": "10.3.0",
      "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-10.3.0.tgz",
      "integrity": "sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==",
            "requires": {
                "vue-demi": "*"
        "vue-demi": ">=0.14.5"
            },
            "dependencies": {
                "vue-demi": {
                    "version": "0.13.11",
                    "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",
                    "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
          "version": "0.14.5",
          "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.5.tgz",
          "integrity": "sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==",
                    "requires": {}
                }
            }
@@ -5860,6 +5947,12 @@
            "peer": true,
            "requires": {}
        },
    "amfe-flexible": {
      "version": "2.2.1",
      "resolved": "https://registry.npmmirror.com/amfe-flexible/-/amfe-flexible-2.2.1.tgz",
      "integrity": "sha512-L2VfvDzoETBjhRptg5u/IUuzHSuxm22JpSRb404p/TBGeRfwWmmNEbB+TFPIP/sS/+pbM18bCFH9QnMojLuPNw==",
      "dev": true
    },
        "ansi-regex": {
            "version": "5.0.1",
            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -5937,6 +6030,39 @@
            "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
            "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
            "dev": true
    },
    "bmaplib.curveline": {
      "version": "1.0.0",
      "resolved": "https://registry.npmmirror.com/bmaplib.curveline/-/bmaplib.curveline-1.0.0.tgz",
      "integrity": "sha512-9wcFMVhiYxNPqpvsLDAADn3qDhNzXp2mA6VyHSHg2XOAgSooC7ZiujdFhy0sp+0QYjTfJ/MjmLuNoUg2HHxH4Q=="
    },
    "bmaplib.distancetool": {
      "version": "1.0.2",
      "resolved": "https://registry.npmmirror.com/bmaplib.distancetool/-/bmaplib.distancetool-1.0.2.tgz",
      "integrity": "sha512-EvxMnQRH6xM036zx5OLPyTg5tMCTbFBuGTTHOtExLy2/T0X6v5Va0YE7c3IPm/a/Eo5V/ynYpOLOLZbRY8ccyA=="
    },
    "bmaplib.heatmap": {
      "version": "1.0.4",
      "resolved": "https://registry.npmmirror.com/bmaplib.heatmap/-/bmaplib.heatmap-1.0.4.tgz",
      "integrity": "sha512-rmhqUARBpUSJ9jXzUI2j7dIOqnc38bqubkx/8a349U2qtw/ulLUwyzRD535OrA8G7w5cz4aPKm6/rNvUAarg/Q=="
    },
    "bmaplib.lushu": {
      "version": "1.0.7",
      "resolved": "https://registry.npmmirror.com/bmaplib.lushu/-/bmaplib.lushu-1.0.7.tgz",
      "integrity": "sha512-LVvgpESPii6xGxyjnQjq8u+ic4NjvhdCPV/RiSS/PGTUdZKeTDS7prSpleJLZH3ES0+oc0gYn8bw0LtPYUSz2w=="
    },
    "bmaplib.markerclusterer": {
      "version": "1.0.13",
      "resolved": "https://registry.npmmirror.com/bmaplib.markerclusterer/-/bmaplib.markerclusterer-1.0.13.tgz",
      "integrity": "sha512-VrLyWSiuDEVNi0yUfwOhFQ6z1oEEHS4w36GNu3iASu6p52QIx9uAXMUkuSCHReNR0bj2Cp9SA1dSx5RpojXajQ==",
      "requires": {
        "bmaplib.texticonoverlay": "^1.0.2"
      }
    },
    "bmaplib.texticonoverlay": {
      "version": "1.0.2",
      "resolved": "https://registry.npmmirror.com/bmaplib.texticonoverlay/-/bmaplib.texticonoverlay-1.0.2.tgz",
      "integrity": "sha512-4ZTWr4ZP3B6qEWput5Tut16CfZgII38YwM3bpyb4gFTQyORlKYryFp9WHWrwZZaHlOyYDAXG9SX0hka43jTADg=="
        },
        "boolbase": {
            "version": "1.0.0",
@@ -7296,6 +7422,11 @@
            "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.0.tgz",
            "integrity": "sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ=="
        },
    "moment": {
      "version": "2.29.4",
      "resolved": "https://registry.npmmirror.com/moment/-/moment-2.29.4.tgz",
      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
    },
        "ms": {
            "version": "2.1.2",
            "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -7460,6 +7591,13 @@
                "picocolors": "^1.0.0",
                "source-map-js": "^1.0.2"
            }
    },
    "postcss-pxtorem": {
      "version": "6.0.0",
      "resolved": "https://registry.npmmirror.com/postcss-pxtorem/-/postcss-pxtorem-6.0.0.tgz",
      "integrity": "sha512-ZRXrD7MLLjLk2RNGV6UA4f5Y7gy+a/j1EqjAfp9NdcNYVjUMvg5HTYduTjSkKBkRkfqbg/iKrjMO70V4g1LZeg==",
      "dev": true,
      "requires": {}
        },
        "postcss-selector-parser": {
            "version": "6.0.10",
@@ -7981,6 +8119,21 @@
                "@vue/shared": "3.2.36"
            }
        },
    "vue-baidu-map-3x": {
      "version": "1.0.35",
      "resolved": "https://registry.npmmirror.com/vue-baidu-map-3x/-/vue-baidu-map-3x-1.0.35.tgz",
      "integrity": "sha512-1FDzxgd+X7MVcG8JbyyxDOSYRDUi96qEuuNICQmwlAE/EDwf4vz1oYRhRz05s/MuDpW7aIBlubF/PlSTpBlUEw==",
      "requires": {
        "bmaplib.curveline": "^1.0.0",
        "bmaplib.distancetool": "^1.0.2",
        "bmaplib.heatmap": "^1.0.4",
        "bmaplib.lushu": "^1.0.7",
        "bmaplib.markerclusterer": "^1.0.13",
        "tiny-emitter": "^2.1.0",
        "vue": "^3.2.25",
        "vue-router": "^4.0.14"
      }
    },
        "vue-clipboard3": {
            "version": "2.0.0",
            "resolved": "https://registry.npmjs.org/vue-clipboard3/-/vue-clipboard3-2.0.0.tgz",
public/bigMap.png
public/bigMap2.png
public/bigMapPic.JPG
public/bigMapPic2.png
public/factoryMap.png
src/api/bigScreen/index.ts
@@ -22,6 +22,13 @@
                data: data
            });
        },
        getWindNum: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + '/gasWarnLog/gasWindRoseByTime',
                method: 'post',
                data: data
            });
        },
        getWarningInfo: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + '/gasWarnLog/gasWarnLogInfoByTime',
src/assets/factoryMap.png
src/views/bigScreen/components/map.vue
对比新文件
@@ -0,0 +1,130 @@
<template>
  <baidu-map class="bigMap" ref="map" ak="Z4tYehNEVsdeMw3Mjspdn77pV50ffc8t" v="3.0" type="API" :scroll-wheel-zoom="true" :center="{lng: 85.126263, lat: 45.603813}" :zoom="17" map-type="BMAP_SATELLITE_MAP" @ready="initMap">
<!--    <bm-polygon :path="polygonPath1" stroke-color="blue" fillColor="blue" :fillOpacity="1" :stroke-weight="2"/>-->
<!--    <bm-polygon :path="polygonPath2" stroke-color="red" fillColor="red" :fillOpacity="1" :stroke-weight="2"/>-->
<!--    <bm-overlay pane="mapPane" class="bg-pic" @draw="initMap">-->
      <bm-ground class="picBg" :bounds="{ne: {lng: 85.129048, lat: 45.605790}, sw:{lng: 85.122984, lat: 45.592812}}" imageURL="/bigMap2.png" opacity="1" :displayOnMaxLevel="18" :zIndex="1"></bm-ground>
<!--    </bm-overlay>-->
    <bm-overlay pane="mapPane" class="polys" @draw="initMap">
      <bm-polygon :path="polygonPath3" stroke-color="yellow" fillColor="yellow" :fillOpacity="1" :stroke-weight="2" :zIndex="2"/>
      <bm-label content="1" :position="{lng: 85.127634, lat: 45.604176}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="1" :zIndex="3"/>
  <!--    <bm-polygon :path="polygonPath4" stroke-color="red" fillColor="red" :fillOpacity="1" :stroke-weight="2"/>-->
      <bm-polygon :path="polygonPath5" stroke-color="#01007f" fillColor="#01007f" :fillOpacity="1" :stroke-weight="2" :zIndex="2"/>
      <bm-label content="2" :position="{lng: 85.126928, lat: 45.603873}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="2" :zIndex="3"/>
      <bm-polygon :path="polygonPath6" stroke-color="#ff00fa" fillColor="#ff00fa" :fillOpacity="1" :stroke-weight="2" :zIndex="2"/>
      <bm-label content="3" :position="{lng: 85.123940, lat: 45.604109}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="3" :zIndex="3"/>
      <bm-polygon :path="polygonPath7" stroke-color="#02ff02" fillColor="#02ff02" :fillOpacity="1" :stroke-weight="2" :zIndex="2"/>
      <bm-label content="4" :position="{lng: 85.125489, lat: 45.603525}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="4" :zIndex="3"/>
      <bm-polygon :path="polygonPath8" stroke-color="#028002" fillColor="#028002" :fillOpacity="1" :stroke-weight="2" :zIndex="2"/>
      <bm-label content="5" :position="{lng: 85.126150, lat: 45.603173}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="5" :zIndex="3"/>
      <bm-polygon :path="polygonPath9" stroke-color="#008081" fillColor="#008081" :fillOpacity="1" :stroke-weight="2" :zIndex="2"/>
      <bm-label content="6" :position="{lng: 85.126805, lat: 45.602739}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="6" :zIndex="3"/>
    </bm-overlay>
<!--    <bm-ground class="picBg" :bounds="{ne: {lng: 85.127749, lat: 45.600383}, sw:{lng: 85.106981, lat: 45.592463}}" imageURL="/bigMapPic.jpg" opacity="0.5"></bm-ground>-->
    <bm-map-type :map-types="['BMAP_SATELLITE_MAP','BMAP_NORMAL_MAP' ]" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
<!--                  <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>-->
  </baidu-map>
</template>
<script lang="ts">
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
import screen from './components/screen.vue'
import screenfull from 'screenfull'
import { ElMessage, ElMessageBox } from 'element-plus';
import {BaiduMap, BmOverlay, BmGround, BmMapType, BmNavigation, BmPolygon, BmLabel} from 'vue-baidu-map-3x'
// 定义接口来定义对象的类型
interface TableDataState {
  // polygonPath1: Array<location>
  // polygonPath2: Array<location>
  polygonPath3: Array<location>
  // polygonPath4: Array<location>
  polygonPath5: Array<location>
  polygonPath6: Array<location>
  polygonPath7: Array<location>
  polygonPath8: Array<location>
  polygonPath9: Array<location>
}
interface location{
  lng: number | null
  lat: number | null
}
export default defineComponent({
    name: 'map',
    components: {BaiduMap, BmOverlay, BmGround, BmMapType, BmNavigation, BmPolygon, BmLabel },
    setup() {
        const state = reactive<TableDataState>({
          // polygonPath1: [],
          // polygonPath2: [],
          polygonPath3: [],
          // polygonPath4: [],
          polygonPath5: [],
          polygonPath6: [],
          polygonPath7: [],
          polygonPath8: [],
          polygonPath9: []
        });
        // 页面加载时
        onMounted(() => {
          const baseSize = 38;
          /* 设置 rem 函数 */
          function setRem() {
            const scale = document.documentElement.clientWidth / 1920; /* 当前页面宽度缩放比例,可根据自己需要修改 */
            document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + "px";/* 设置页面根节点字体大小 */
            console.log('切换尺寸>>',document.documentElement.style.fontSize)
          }
          setRem();/* 初始化 rem */
          window.onresize = () => {
            setRem();/* 改变窗口大小时重新设置 rem */
            console.log('执行切换')
          }
        });
      const map = reactive({})
      const initMap=()=>{
        // state.polygonPath1 = [{ lng: 85.126523, lat: 45.604790 }, { lng: 85.126364, lat: 45.604687 }, { lng: 85.126775, lat: 45.604416 }, { lng: 85.126933, lat: 45.604528 }],
        // state.polygonPath2 = [{ lng: 85.127235, lat: 45.604406 }, { lng: 85.126908, lat: 45.604141 }, { lng: 85.127041, lat: 45.604046 }, { lng: 85.127396, lat: 45.604313 }],
        state.polygonPath3 = [{ lng: 85.127634, lat: 45.604176 }, { lng: 85.127331, lat: 45.603931 }, { lng: 85.127885, lat: 45.603602 }, { lng: 85.128178, lat: 45.603853 }],
        // state.polygonPath4 = [{ lng: 85.125247, lat: 45.604832 }, { lng: 85.124665, lat: 45.604483 }, { lng: 85.125910, lat: 45.603576 }, { lng: 85.126564, lat: 45.604053 }],
        state.polygonPath5 = [{ lng: 85.126928, lat: 45.603873 }, { lng: 85.126253, lat: 45.603399 }, { lng: 85.126923, lat: 45.602951 }, { lng: 85.127580, lat: 45.603464 }],
        state.polygonPath6 = [{ lng: 85.123940, lat: 45.604109 }, { lng: 85.123651, lat: 45.603782 }, { lng: 85.124211, lat: 45.603426 }, { lng: 85.124538, lat: 45.603693 }],
        state.polygonPath7 = [{ lng: 85.125489, lat: 45.603525 }, { lng: 85.124729, lat: 45.603024 }, { lng: 85.125304, lat: 45.602703 }, { lng: 85.125988, lat: 45.603217 }],
        state.polygonPath8 = [{ lng: 85.126150, lat: 45.603173 }, { lng: 85.125339, lat: 45.602580 }, { lng: 85.125847, lat: 45.602235 }, { lng: 85.126700, lat: 45.602838 }],
        state.polygonPath9 = [{ lng: 85.126805, lat: 45.602739 }, { lng: 85.125929, lat: 45.602127 }, { lng: 85.126505, lat: 45.601715 }, { lng: 85.127309, lat: 45.602365 }]
        console.log(map,'map')
        // const poly = document.getElementsByClassName('polys')
        // console.log(poly)
        // poly.attributes.style.zIndex = 9999999
        // console.log(poly,'poly')
      }
      return {
        initMap,
        map,
          ...toRefs(state)
        };
    }
});
</script>
<style lang="scss" scoped>
.bigMap{
  width: 100%;
  height: 100%;
  :deep(path) {
    position: relative;
    z-index: 9999999 !important;
  }
  :deep(BMapLabel){
    z-index: 9999999 !important;
  }
}
.bg-pic{
  position: relative;
  z-index: 1;
}
.polys{
  position: relative;
  z-index: 2;
}
</style>
src/views/bigScreen/components/screen.vue
@@ -99,11 +99,30 @@
<!--          <div class="bigMap">-->
<!--            <div id="bigMap"></div>-->
<!--          </div>-->
            <baidu-map class="bigMap" ak="Z4tYehNEVsdeMw3Mjspdn77pV50ffc8t" v="3.0" type="API" :scroll-wheel-zoom="true" :center="{lng: 85.057805, lat: 45.62550}" :zoom="16" @ready="initMap">
              <bm-map-type :map-types="['BMAP_SATELLITE_MAP','BMAP_NORMAL_MAP' ]" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
              <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
              <bm-polygon :path="polygonPath" stroke-color="blue" fillColor="blue" :fillOpacity="0.4" :stroke-weight="1"/>
            </baidu-map>
<!--            <baidu-map class="bigMap" ak="Z4tYehNEVsdeMw3Mjspdn77pV50ffc8t" v="3.0" type="API" :scroll-wheel-zoom="true" :center="{lng: 85.116263, lat: 45.596513}" :zoom="18" @ready="initMap">-->
<!--              <bm-ground-->
<!--                  :bounds="{ne: {lng: 85.118828, lat: 45.598437}, sw:{lng: 85.113210, lat: 45.593837}}" imageURL="../../../assets/factoryMap.png">-->
<!--              </bm-ground>-->
<!--              <bm-map-type :map-types="['BMAP_SATELLITE_MAP','BMAP_NORMAL_MAP' ]" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>-->
<!--&lt;!&ndash;              <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>&ndash;&gt;-->
<!--              <bm-polygon :path="polygonPath1" stroke-color="blue" fillColor="blue" :fillOpacity="0.4" :stroke-weight="1"/>-->
<!--              <bm-polygon :path="polygonPath2" stroke-color="red" fillColor="red" :fillOpacity="0.4" :stroke-weight="1"/>-->
<!--              <bm-polygon :path="polygonPath3" stroke-color="blue" fillColor="blue" :fillOpacity="0.4" :stroke-weight="1"/>-->
<!--              <bm-polygon :path="polygonPath4" stroke-color="blue" fillColor="blue" :fillOpacity="0.4" :stroke-weight="1"/>-->
<!--              <bm-polygon :path="polygonPath5" stroke-color="blue" fillColor="blue" :fillOpacity="0.4" :stroke-weight="1"/>-->
<!--            </baidu-map>-->
          <div class="map-filter">
            <div style="width: 100%">
              <el-select v-model="windTime" :teleported="false" class="m-2" placeholder="Select" size="small" @change="changeWind">
                <el-option :key="1" label="1小时" :value="1"/>
                <el-option :key="2" label="6小时" :value="2"/>
                <el-option :key="3" label="121小时" :value="3"/>
                <el-option :key="4" label="24小时" :value="4"/>
              </el-select>
            </div>
            <div style="width: 100%;height: 250px" :id="gasWind"></div>
          </div>
          <Map class="bigMap"></Map>
<!--          </div>-->
          <div class="mid-bottom">
            <div class="chart-head">
@@ -150,7 +169,8 @@
              </div>
            </div>
            <div class="chart-cont">
              <div class="echart" :id="gasN"></div>
              <div v-if="hasNd==true" class="echart" :id="gasN"></div>
              <div v-else class="echart" style="display: flex;font-size: 20px;justify-content: center;align-items: center"><span style="color:#11feee;">暂无数据</span></div>
            </div>
          </div>
          <div class="right-mid withFilterLong">
@@ -177,7 +197,8 @@
              </div>
            </div>
            <div class="chart-cont">
              <div class="echart" :id="gasT"></div>
              <div v-if="hasTl==true" class="echart" :id="gasT"></div>
              <div v-else class="echart" style="display: flex;font-size: 20px;justify-content: center;align-items: center"><span style="color:#11feee;">暂无数据</span></div>
            </div>
          </div>
          <div class="right-bottom withoutFilter">
@@ -239,8 +260,8 @@
import AMapLoader from '@amap/amap-jsapi-loader'
import { shallowRef } from '@vue/reactivity'
import { storeToRefs } from 'pinia';
import {BaiduMap, BmMapType, BmNavigation, BmPolygon} from 'vue-baidu-map-3x'
import Map from './map.vue'
import {BaiduMap, BmMapType, BmNavigation, BmPolygon, BmGround} from 'vue-baidu-map-3x'
import { useUserInfo } from '/@/stores/userInfo';
import {bigScreenApi} from "/@/api/bigScreen";
// 定义接口来定义对象的类型
@@ -252,6 +273,7 @@
  lockReconnect: boolean
  maxReconnect: number
  reconnectTime: number
  windTime: number | null
  time: string
  date: string
  weekDay: string
@@ -262,8 +284,12 @@
  gasSearch: number | null
  tlGasSearch: number | null
  gasOptions: Array<gasType>
  monthAgo: string,
  today: string,
  gasData: Array<any>
  hasNd: boolean
  gasTlData: Array<any>
  hasTl: boolean
  areaOptions: Array<gasType>
  gasTotal: null | number
  tlTotal: null | number
@@ -274,7 +300,15 @@
  yellowNum: null | number
  redNum: null | number
  weatherData: Array<any>
  polygonPath: Array<location>
  polygonPath1: Array<location>
  polygonPath2: Array<location>
  polygonPath3: Array<location>
  polygonPath4: Array<location>
  polygonPath5: Array<location>
  polygonPath6: Array<location>
  polygonPath7: Array<location>
  polygonPath8: Array<location>
  polygonPath9: Array<location>
}
interface location{
  lng: number | null
@@ -287,7 +321,7 @@
export default defineComponent({
    name: 'bigScreen',
    components: {BaiduMap, BmMapType, BmNavigation, BmPolygon },
    components: {Map,BaiduMap, BmMapType, BmNavigation, BmPolygon },
    props:{
      isFull: Boolean
    },
@@ -308,6 +342,7 @@
          date: '',
          weekDay: '',
          dayTime: '',
          windTime: 4,
          isFull: props.isFull,
          chart2Search: [],
          infoParams:{
@@ -317,8 +352,12 @@
          gasSearch: null,
          tlGasSearch: null,
          gasOptions: [],
          monthAgo: '',
          today: '',
          gasData: [],
          hasNd: true,
          gasTlData: [],
          hasTl: true,
          areaOptions: [],
          gasTotal: 0,
          tlTotal: 0,
@@ -327,9 +366,18 @@
          dialogWarning: false,
          countTime: 1,
          weatherData: [],
          polygonPath: []
          polygonPath1: [],
          polygonPath2: [],
          polygonPath3: [],
          polygonPath4: [],
          polygonPath5: [],
          polygonPath6: [],
          polygonPath7: [],
          polygonPath8: [],
          polygonPath9: []
        });
        const router = useRouter();
        const router = useRouter()
        const gasWind = ref("eChartgasWind" + Date.now() + Math.random())
        const gasN = ref("eChartgasN" + Date.now() + Math.random())
        const gasT = ref("eChartgasT" + Date.now() + Math.random())
        const timeForm = {
@@ -343,11 +391,13 @@
        };
        const updatePolygonPath = (e) => {
          state.polygonPath = e.target.getPath()
          state.polygonPath1 = e.target.getPath()
        };
        // 页面加载时
        onMounted(() => {
          initTime()
          getGasData()
          getWindData()
          getWarningNum()
          getWarningInfo()
          getWarning()
@@ -376,12 +426,15 @@
        })
        const initMap=()=>{
            state.polygonPath = [
              { lng: 85.047805, lat: 45.62550 },
              { lng: 85.047505, lat: 45.62350 },
              { lng: 85.057205, lat: 45.62350 },
              { lng: 85.057005, lat: 45.62750 }
            ]
            state.polygonPath1 = [{ lng: 85.115523, lat: 45.597919 }, { lng: 85.114993, lat: 45.597520 }, { lng: 85.115925, lat: 45.597029 }, { lng: 85.116384, lat: 45.597328 }],
            state.polygonPath2 = [{ lng: 85.115251, lat: 45.597319 }, { lng: 85.114480, lat: 45.596719 }, { lng: 85.115082, lat: 45.596367 }, { lng: 85.115812, lat: 45.596965 }],
            state.polygonPath3 = [{ lng: 85.115251, lat: 45.597319 }, { lng: 85.114480, lat: 45.596719 }, { lng: 85.115082, lat: 45.596367 }, { lng: 85.115812, lat: 45.596965 }],
            state.polygonPath4 = [{ lng: 85.115251, lat: 45.597319 }, { lng: 85.114480, lat: 45.596719 }, { lng: 85.115082, lat: 45.596367 }, { lng: 85.115812, lat: 45.596965 }],
            state.polygonPath5 = [{ lng: 85.115251, lat: 45.597319 }, { lng: 85.114480, lat: 45.596719 }, { lng: 85.115082, lat: 45.596367 }, { lng: 85.115812, lat: 45.596965 }],
            state.polygonPath6 = [{ lng: 85.115251, lat: 45.597319 }, { lng: 85.114480, lat: 45.596719 }, { lng: 85.115082, lat: 45.596367 }, { lng: 85.115812, lat: 45.596965 }],
            state.polygonPath7 = [{ lng: 85.115251, lat: 45.597319 }, { lng: 85.114480, lat: 45.596719 }, { lng: 85.115082, lat: 45.596367 }, { lng: 85.115812, lat: 45.596965 }],
            state.polygonPath8 = [{ lng: 85.115251, lat: 45.597319 }, { lng: 85.114480, lat: 45.596719 }, { lng: 85.115082, lat: 45.596367 }, { lng: 85.115812, lat: 45.596965 }],
            state.polygonPath9 = [{ lng: 85.115251, lat: 45.597319 }, { lng: 85.114480, lat: 45.596719 }, { lng: 85.115082, lat: 45.596367 }, { lng: 85.115812, lat: 45.596965 }]
        }
        const toNdPage = () =>{
          router.push('/gasData')
@@ -406,7 +459,30 @@
          getGasNdData()
          getGasTlData()
        }
        const initTime =()=>{
          state.monthAgo = getPeriod(30)
          state.today = formatDate(new Date(),'end')
          state.chart2Search[0] = state.monthAgo
          state.chart2Search[1] = state.today+' 23:59:59'
          state.infoParams.startTime = state.monthAgo
          state.infoParams.endTime = state.today + ' 23:59:59'
        }
        const getPeriod =(num)=> {
          const currentDate = new Date();
          const startTime = new Date();
          startTime.setDate(currentDate.getDate() - num);
          return formatDate(startTime,'start')
        }
        const formatDate =(date,type)=> {
          const year = date.getFullYear().toString();
          const month = ('0' + (date.getMonth() + 1)).slice(-2);
          const day = ('0' + date.getDate()).slice(-2);
          if(type == 'start'){
            return `${year}-${month}-${day} 00:00:00`;
          }else{
            return `${year}-${month}-${day}`;
          }
        }
        const getAreaData = async ()=>{
          const res = await bigScreenApi().getAreas({pageSize: 99, pageIndex: 1, searchParams:{name: ''}})
          if(res.data.code == 100){
@@ -433,10 +509,63 @@
          }
        }
        const getWindData = async ()=>{
          const res = await bigScreenApi().getWindNum({countTime: state.windTime})
          if(res.data.code == 100){
            const windData = JSON.parse(JSON.stringify(res.data.data))
            if(Array.isArray(windData)){
              let pointFive = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
              let twoZone = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
              let fourZone = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
              let sixZone = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
              let eightZone = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
              let tenZone = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
              let tenAbove = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
              for (let i of windData){
                if(i.windSpeed<0.5){
                  pointFive[getDirection(i.windDirection)] += 1
                }else if(i.windSpeed>0.5 && i.windSpeed<=2){
                  twoZone[getDirection(i.windDirection)] += 1
                }else if(i.windSpeed>2 && i.windSpeed<=4){
                  fourZone[getDirection(i.windDirection)] += 1
                }else if(i.windSpeed>4 && i.windSpeed<=6){
                  sixZone[getDirection(i.windDirection)] += 1
                }else if(i.windSpeed>6 && i.windSpeed<=8){
                  eightZone[getDirection(i.windDirection)] += 1
                }else if(i.windSpeed>8 && i.windSpeed<=10){
                  tenZone[getDirection(i.windDirection)] += 1
                } else if(i.windSpeed>10){
                  console.log(777,i.windDirection,getDirection(i.windDirection))
                  tenAbove[getDirection(i.windDirection)] += 1
                  console.log(tenAbove,'10')
                }else{
                  console.log('windSpeed为null')
                }
              }
              console.log(pointFive,twoZone,fourZone,sixZone,eightZone,tenZone,tenAbove,666)
              initgasWind(pointFive,twoZone,fourZone,sixZone,eightZone,tenZone,tenAbove)
            }
          }else {
            ElMessage({
              type: 'warning',
              message: res.data.msg
            });
          }
        }
        const getDirection=(num:number)=>{
          if(num<=348.75 ){
            return Math.floor((num + 11.25) / 22.5)
          }else{
            return 0
          }
        }
        const getGasNdData = async ()=>{
          const res = await bigScreenApi().getGasNdData({startTime: '',endTime: '',gasName: state.gasSearch})
          const res = await bigScreenApi().getGasNdData({startTime: state.today+' 00:00:00',endTime: state.today+' 23:59:59',gasName: state.gasSearch})
          if(res.data.code == 100){
            if(res.data.data && res.data.data.length>0){
              state.hasNd = true
              state.gasTotal = res.data.data.length
              const timeList = res.data.data.map(i=>i.time.slice(11))
              const dotList = res.data.data.map(i=>i.gasValue)
@@ -452,6 +581,8 @@
              })
              state.weatherData = [...weather].reverse().slice(0, 4);
              initgasN(dotList.slice(dotList.length - 50),timeList.slice(timeList.length - 50))
            }else{
              state.hasNd = false
            }
          }else {
            ElMessage({
@@ -462,9 +593,10 @@
        }
      const getGasTlData = async ()=>{
        const res = await bigScreenApi().getGasTlData({startTime: '',endTime: '',gasName: state.tlGasSearch,areaId: null})
        const res = await bigScreenApi().getGasTlData({startTime: state.today+' 00:00:00',endTime: state.today+' 23:59:59',gasName: state.tlGasSearch,areaId: null})
        if(res.data.code == 100){
          if(res.data.data && res.data.data.length>0){
            state.hasTl = true
            state.tlTotal = res.data.data.length
            const gasTime = res.data.data.map(i=>i.time?.slice(11))
            const gasTlTime = [...new Set(gasTime)]
@@ -495,6 +627,8 @@
              }
            })
            initgasT(gasTlTime.slice(gasTlTime.length - 20),chartData)
          }else{
            state.hasTl = false
          }
        }else {
          ElMessage({
@@ -521,6 +655,8 @@
                return i
              })
              config.data = newData
            }else{
              config.data = []
            }
          }else {
            ElMessage({
@@ -531,7 +667,7 @@
        }
        const timeChange = (value:Array<string>)=>{
          state.infoParams.startTime = value[0]
          state.infoParams.endTime = value[1]
          state.infoParams.endTime = value[1].replace('00:00:00', '23:59:59')
          getWarningInfo()
        }
@@ -548,7 +684,9 @@
        const changeTotal = () =>{
          getWarningNum()
        }
        const changeWind = () =>{
          getWindData()
        }
        const getWarning = ()=>{
          initWebSocket('/ws/gas/exc/','预警',60)
        }
@@ -614,7 +752,6 @@
                  return;
                }
                if(type == '预警'){
                  console.log('预警')
                  const socketData = JSON.parse(text)
                  state.warningGas = JSON.parse(JSON.stringify(socketData))
                  state.dialogWarning = true
@@ -656,7 +793,11 @@
                  state.gasData = JSON.parse(text)
                  let gasNum = ''
                  let newArr = JSON.parse(JSON.stringify(state.gasData))
                  if(Array.isArray(newArr)){
                  state.gasTotal = newArr.length
                  }else{
                    state.gasTotal = 0
                  }
                  const weather = newArr.map((item)=>{
                      return {
                        time: item.dataReceivingTime?item.dataReceivingTime.slice(11,19):'--',
@@ -687,7 +828,12 @@
                if(type == '气体通量'){
                  state.gasTlData = JSON.parse(text)
                  let newArr = JSON.parse(JSON.stringify(state.gasTlData))
                  if(Array.isArray(newArr)){
                  state.tlTotal = newArr.length
                  }else{
                    state.tlTotal = 0
                  }
                  console.log(state.gasTotal,'获取结束')
                  const gasTime = newArr.map(i=>i.dataReceivingTime?.slice(11,19))
                  const gasTlTime = [...new Set(gasTime)]
                  let areaData = state.areaOptions.map((item)=>{
@@ -807,8 +953,8 @@
        const config = reactive({
          header: ['预警级别','气体名称', '气体浓度', '时间'],
          data: [],
          index: true,
          columnWidth: [38],
          // index: true,
          columnWidth: [200,200,200,200],
          align: ['center','center','center','center','center'],
          headerBGC: '',
          oddRowBGC: '',
@@ -834,6 +980,118 @@
        }
      type EChartsOption = echarts.EChartsOption
      const initgasWind =(pointFive,twoZone,fourZone,sixZone,eightZone,tenZone,tenAbove)=>{
        let dom = document.getElementById(gasWind.value);
        let myChart = echarts.init(dom)
        let option: EChartsOption;
        option = {
          title:{
            text:'',
            left:'center'
          },
          angleAxis: {
            type: 'category',
            data: ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE','SSE','S','SSW','SW','WSW','W','WNW','NW','NNW'],
            z: 0,
            boundaryGap: false,
            splitLine: {
              show: false,
              lineStyle: {
                color: '#ddd',
                type: 'solid'
              }
            },
            axisLine: {
              show: false
            }
          },
          radiusAxis: {
          },
          polar: {
          },
          series: [{
            type: 'bar',
            data: pointFive,
            coordinateSystem: 'polar',
            name: '<0.5m/s',
            stack: 'a',
            itemStyle:{
            }
          }, {
            type: 'bar',
            data: twoZone,
            coordinateSystem: 'polar',
            name: '0.5-2m/s',
            stack: 'a',
            itemStyle:{
            }
          }, {
            type: 'bar',
            data: fourZone,
            coordinateSystem: 'polar',
            name: '2-4m/s',
            stack: 'a',
            itemStyle:{
            }
          }, {
            type: 'bar',
            data: sixZone,
            coordinateSystem: 'polar',
            name: '4-6m/s',
            stack: 'a',
            itemStyle:{
            }
          }, {
            type: 'bar',
            data: eightZone,
            coordinateSystem: 'polar',
            name: '6-8m/s',
            stack: 'a',
            itemStyle:{
            }
          }, {
            type: 'bar',
            data: tenZone,
            coordinateSystem: 'polar',
            name: '8-10m/s',
            stack: 'a',
            itemStyle:{
            }
          }, {
            type: 'bar',
            data: tenAbove,
            coordinateSystem: 'polar',
            name: '>10m/s',
            stack: 'a',
            itemStyle:{
            }
          }],
          legend: {
            show: true,
            top:'bottom',
            right:'right',
            data: ['<0.5m/s', '0.5-2m/s', '2-4m/s','4-6m/s','6-8m/s','8-10m/s','>10m/s'],
            orient:'horizontal'
          }
        }
        option && myChart.setOption(option);
        window.addEventListener("resize",function (){
          myChart.resize();
        });
      }
      const initgasN =(data:Array<string>,time: Array<string>)=>{
        let dom = document.getElementById(gasN.value);
        let myChart = echarts.init(dom);
@@ -865,7 +1123,7 @@
          },
          grid: {
            top: '5%',
            bottom: '10%',
            bottom: '15%',
            right: '2%'
          },
          series: [
@@ -987,6 +1245,7 @@
          config,
          gasN,
          gasT,
          gasWind,
          initMap,
          updatePolygonPath,
          toNdPage,
@@ -994,6 +1253,7 @@
          timeChange,
          mouseoverHandler,
          changeTotal,
          changeWind,
          clickHandler,
          changeGas1,
          changeGas2,
@@ -1543,6 +1803,42 @@
  //}
  .main-middle{
    width: calc(50% - 10px);
    position: relative;
    .map-filter{
      position: absolute;
      display: flex;
      align-items: flex-start;
      width: 350px;
      right: 20px;
      top: 20px;
      z-index: 99999;
      .el-select{
        width: 60%;
        height: 24px;
      }
      ::v-deep(.el-popper){
        background-color: rgba(10,31,92,1);
        border: 1px solid rgba(17,254,238,.4);
        color: #11FEEE;
        .el-icon{
          color: #11FEEE;
        }
        .el-select-dropdown__item{
          color: #11FEEE;
        }
        .el-select-dropdown__item.hover{
          background: #0049af;
        }
      }
      ::v-deep(.el-popper__arrow){
        &::before{
          background-color: rgba(10,31,92,.6) !important;
          border: 1px solid rgba(17,254,238,.4);
        }
      }
    }
    .bigMap{
      width: 100%;
      height: calc((200% - 40px)/3 + 10px);