告警数据推送、弹框优化

package-lock.json

@@ -1,4 +1,5 @@
 {
+  "name": "IOT",
   "version": "0.1.0",
   "lockfileVersion": 1,
   "requires": true,
@@ -1457,63 +1458,45 @@
       }
     },
     "@videojs/http-streaming": {
-      "version": "2.9.2",
-      "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-2.9.2.tgz",
-      "integrity": "sha512-2ZsxJn4/nZZ6k6jIhic2l9ynGmKwprtuI5b3+M6JgqOSLvQQ/ah+heVs/0g2Ze7qJxodqR+aSY948JwJIz1gCw==",
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-2.11.2.tgz",
+      "integrity": "sha512-3tR8hhHhtptJmsybUN2PDERWP4THGuDlXaCyQ/56HpPIq7wBpXtvsSb52x+sioD5HLs+/mc7Oi9rPRbbFPvzSQ==",
       "requires": {
         "@babel/runtime": "^7.12.5",
-        "@videojs/vhs-utils": "^3.0.2",
+        "@videojs/vhs-utils": "3.0.4",
         "aes-decrypter": "3.1.2",
         "global": "^4.4.0",
         "m3u8-parser": "4.7.0",
-        "mpd-parser": "0.17.0",
-        "mux.js": "5.12.2",
+        "mpd-parser": "0.19.2",
+        "mux.js": "5.14.1",
         "video.js": "^6 || ^7"
       },
       "dependencies": {
-        "aes-decrypter": {
-          "version": "3.1.2",
-          "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-3.1.2.tgz",
-          "integrity": "sha512-42nRwfQuPRj9R1zqZBdoxnaAmnIFyDi0MNyTVhjdFOd8fifXKKRfwIHIZ6AMn1or4x5WONzjwRTbTWcsIQ0O4A==",
-          "requires": {
-            "@babel/runtime": "^7.12.5",
-            "@videojs/vhs-utils": "^3.0.0",
-            "global": "^4.4.0",
-            "pkcs7": "^1.0.4"
-          }
-        },
-        "m3u8-parser": {
-          "version": "4.7.0",
-          "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-4.7.0.tgz",
-          "integrity": "sha512-48l/OwRyjBm+QhNNigEEcRcgbRvnUjL7rxs597HmW9QSNbyNvt+RcZ9T/d9vxi9A9z7EZrB1POtZYhdRlwYQkQ==",
+        "mpd-parser": {
+          "version": "0.19.2",
+          "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-0.19.2.tgz",
+          "integrity": "sha512-M5tAIdtBM2TN+OSTz/37T7V+h9ZLvhyNqq4TNIdtjAQ/Hg8UnMRf5nJQDjffcXag3POXi31yUJQEKOXdcAM/nw==",
           "requires": {
             "@babel/runtime": "^7.12.5",
-            "@videojs/vhs-utils": "^3.0.0",
+            "@videojs/vhs-utils": "^3.0.2",
+            "@xmldom/xmldom": "^0.7.2",
             "global": "^4.4.0"
           }
         },
         "mux.js": {
-          "version": "5.12.2",
-          "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-5.12.2.tgz",
-          "integrity": "sha512-9OY1lrFIo7FxMeIC6aLUftiNv97AztufDfi30N7qDll1Pcy7bCxlHztyHp1Ce0KQwy2XqchGeENPS4v1NJngHQ==",
+          "version": "5.14.1",
+          "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-5.14.1.tgz",
+          "integrity": "sha512-38kA/xjWRDzMbcpHQfhKbJAME8eTZVsb9U2Puk890oGvGqnyu8B/AkKdICKPHkigfqYX9MY20vje88TP14nhog==",
           "requires": {
             "@babel/runtime": "^7.11.2"
           }
-        },
-        "pkcs7": {
-          "version": "1.0.4",
-          "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.4.tgz",
-          "integrity": "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==",
-          "requires": {
-            "@babel/runtime": "^7.5.5"
-          }
         }
       }
     },
     "@videojs/vhs-utils": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.3.tgz",
-      "integrity": "sha512-bU7daxDHhzcTDbmty1cXjzsTYvx2cBGbA8hG5H2Gvpuk4sdfuvkZtMCwtCqL59p6dsleMPspyaNS+7tWXx2Y0A==",
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.4.tgz",
+      "integrity": "sha512-hui4zOj2I1kLzDgf8QDVxD3IzrwjS/43KiS8IHQO0OeeSsb4pB/lgNt1NG7Dv0wMQfCccUpMVLGcK618s890Yg==",
       "requires": {
         "@babel/runtime": "^7.12.5",
         "global": "^4.4.0",
@@ -1521,9 +1504,9 @@
       }
     },
     "@videojs/xhr": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@videojs/xhr/-/xhr-2.5.1.tgz",
-      "integrity": "sha512-wV9nGESHseSK+S9ePEru2+OJZ1jq/ZbbzniGQ4weAmTIepuBMSYPx5zrxxQA0E786T5ykpO8ts+LayV+3/oI2w==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@videojs/xhr/-/xhr-2.6.0.tgz",
+      "integrity": "sha512-7J361GiN1tXpm+gd0xz2QWr3xNWBE+rytvo8J3KuggFaLg+U37gZQ2BuPLcnkfGffy2e+ozY70RHC8jt7zjA6Q==",
       "requires": {
         "@babel/runtime": "^7.5.5",
         "global": "~4.4.0",
@@ -1824,6 +1807,63 @@
           "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
           "dev": true
         },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+          "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
         "ssri": {
           "version": "8.0.1",
           "resolved": "https://registry.nlark.com/ssri/download/ssri-8.0.1.tgz?cache=0&sync_timestamp=1621364668574&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fssri%2Fdownload%2Fssri-8.0.1.tgz",
@@ -1832,6 +1872,28 @@
           "requires": {
             "minipass": "^3.1.1"
           }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.8.3",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
+          "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          }
         }
       }
     },
@@ -2089,6 +2151,11 @@
         "@xtuc/long": "4.2.2"
       }
     },
+    "@xmldom/xmldom": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.7.5.tgz",
+      "integrity": "sha512-V3BIhmY36fXZ1OtVcI9W+FxQqxVLsPKcNjWigIaa81dLC9IolJl5Mt4Cvhmr0flUnjSpTdrbMTSbXqYqV5dT6A=="
+    },
     "@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.nlark.com/@xtuc/ieee754/download/@xtuc/ieee754-1.2.0.tgz",
@@ -2142,11 +2209,14 @@
       "dev": true
     },
     "aes-decrypter": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-1.0.3.tgz",
-      "integrity": "sha1-nAa4pUNaWtCduTP4oBSvzxhMw04=",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-3.1.2.tgz",
+      "integrity": "sha512-42nRwfQuPRj9R1zqZBdoxnaAmnIFyDi0MNyTVhjdFOd8fifXKKRfwIHIZ6AMn1or4x5WONzjwRTbTWcsIQ0O4A==",
       "requires": {
-        "pkcs7": "^0.2.3"
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.0",
+        "global": "^4.4.0",
+        "pkcs7": "^1.0.4"
       }
     },
     "ajv": {
@@ -4943,9 +5013,14 @@
       }
     },
     "es5-shim": {
-      "version": "4.5.15",
-      "resolved": "https://registry.npmjs.org/es5-shim/-/es5-shim-4.5.15.tgz",
-      "integrity": "sha512-FYpuxEjMeDvU4rulKqFdukQyZSTpzhg4ScQHrAosrlVpR6GFyaw14f74yn2+4BugniIS0Frpg7TvwZocU4ZMTw=="
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/es5-shim/-/es5-shim-4.6.2.tgz",
+      "integrity": "sha512-n0XTVMGps+Deyr38jtqKPR5F5hb9owYeRQcKJW39eFvzUk/u/9Ww315werRzbiNMnHCUw/YHDPBphTlEnzdi+A=="
+    },
+    "es6-promise": {
+      "version": "4.2.8",
+      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
+      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
     },
     "escalade": {
       "version": "3.1.1",
@@ -5693,6 +5768,15 @@
         "readable-stream": "^2.3.6"
       }
     },
+    "flv.js": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/flv.js/-/flv.js-1.6.2.tgz",
+      "integrity": "sha512-xre4gUbX1MPtgQRKj2pxJENp/RnaHaxYvy3YToVVCrSmAWUu85b9mug6pTXF6zakUjNP2lFWZ1rkSX7gxhB/2A==",
+      "requires": {
+        "es6-promise": "^4.2.8",
+        "webworkify-webpack": "^2.1.5"
+      }
+    },
     "follow-redirects": {
       "version": "1.14.1",
       "resolved": "https://registry.nlark.com/follow-redirects/download/follow-redirects-1.14.1.tgz?cache=0&sync_timestamp=1620555292056&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.14.1.tgz",
@@ -6183,6 +6267,11 @@
       "integrity": "sha1-aXJy45kTVuQMPKxWanTu9oF1ZTE=",
       "dev": true
     },
+    "hls": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/hls/-/hls-0.0.1.tgz",
+      "integrity": "sha1-NDO+DUsTBdsxLJZlJ/uxVufteco="
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/hmac-drbg/download/hmac-drbg-1.0.1.tgz",
@@ -7561,9 +7650,14 @@
       }
     },
     "m3u8-parser": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-2.1.0.tgz",
-      "integrity": "sha1-yBcDKewc1RXQ1Yu4t2LamJbLA2g="
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-4.7.0.tgz",
+      "integrity": "sha512-48l/OwRyjBm+QhNNigEEcRcgbRvnUjL7rxs597HmW9QSNbyNvt+RcZ9T/d9vxi9A9z7EZrB1POtZYhdRlwYQkQ==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.0",
+        "global": "^4.4.0"
+      }
     },
     "make-dir": {
       "version": "3.1.0",
@@ -7905,14 +7999,14 @@
       }
     },
     "mpd-parser": {
-      "version": "0.17.0",
-      "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-0.17.0.tgz",
-      "integrity": "sha512-oKS5G0jCcHHJ3sHYlcLeM9Xcbuixl08eAx7QW0Th7ChlZiI0YvLtGaHE/L0aKUBJFNvtkeksIr8XgJgSBBsS4g==",
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-0.19.0.tgz",
+      "integrity": "sha512-FDLIXtZMZs99fv5iXNFg94quNFT26tobo0NUgHu7L3XgZvEq1NBarf5yxDFFJ1zzfbcmtj+NRaml6nYIxoPWvw==",
       "requires": {
         "@babel/runtime": "^7.12.5",
         "@videojs/vhs-utils": "^3.0.2",
-        "global": "^4.4.0",
-        "xmldom": "^0.5.0"
+        "@xmldom/xmldom": "^0.7.2",
+        "global": "^4.4.0"
       }
     },
     "ms": {
@@ -7944,9 +8038,12 @@
       "dev": true
     },
     "mux.js": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-4.3.2.tgz",
-      "integrity": "sha512-g0q6DPdvb3yYcoK7ElBGobdSSrhY/RjPt19U7uUc733aqvc5bCS/aCvL9z+448y+IoCZnYDwyZfQBBXMSmGOaQ=="
+      "version": "5.13.0",
+      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-5.13.0.tgz",
+      "integrity": "sha512-PkmnzHcTQjUBEHp3KRPQAFoNkJtKlpCEvsYtXDfDrC+/WqbMuxHvoYfmAbHVAH7Sa/KliPVU0dT1ureO8wilog==",
+      "requires": {
+        "@babel/runtime": "^7.11.2"
+      }
     },
     "mz": {
       "version": "2.7.0",
@@ -8303,8 +8400,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.nlark.com/object-assign/download/object-assign-4.1.1.tgz?cache=0&sync_timestamp=1618847198142&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fobject-assign%2Fdownload%2Fobject-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
     "object-copy": {
       "version": "0.1.0",
@@ -8658,9 +8754,9 @@
       }
     },
     "parse-headers": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.3.tgz",
-      "integrity": "sha512-QhhZ+DCCit2Coi2vmAKbq5RGTRcQUOE2+REgv8vdyu7MnYx2eZztegqtTx99TZ86GTIwqiy3+4nQTWZ2tgmdCA=="
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.4.tgz",
+      "integrity": "sha512-psZ9iZoCNFLrgRjZ1d8mn0h9WRqJwFxM9q3x7iUjN/YT2OksthDJ5TiPCu2F38kS4zutqfW+YdVVkBZZx3/1aw=="
     },
     "parse-json": {
       "version": "5.2.0",
@@ -8821,9 +8917,12 @@
       }
     },
     "pkcs7": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-0.2.3.tgz",
-      "integrity": "sha1-ItYGZtAQZcXyRDkJjkpIMEUic74="
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.4.tgz",
+      "integrity": "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==",
+      "requires": {
+        "@babel/runtime": "^7.5.5"
+      }
     },
     "pkg-dir": {
       "version": "4.2.0",
@@ -12015,60 +12114,50 @@
       }
     },
     "video.js": {
-      "version": "7.14.3",
-      "resolved": "https://registry.npmjs.org/video.js/-/video.js-7.14.3.tgz",
-      "integrity": "sha512-6avCdSIfn5ss5NOgoQfY/xEfPNcz9DXSw+ZN80NwPguCdRd4VL4y40b/d7osYJwyCdF+YkvhqAW7dw4s0vBigg==",
+      "version": "7.15.4",
+      "resolved": "https://registry.npmjs.org/video.js/-/video.js-7.15.4.tgz",
+      "integrity": "sha512-hghxkgptLUvfkpktB4wxcIVF3VpY/hVsMkrjHSv0jpj1bW9Jplzdt8IgpTm9YhlB1KYAp07syVQeZcBFUBwhkw==",
       "requires": {
         "@babel/runtime": "^7.12.5",
-        "@videojs/http-streaming": "2.9.2",
-        "@videojs/vhs-utils": "^3.0.2",
-        "@videojs/xhr": "2.5.1",
+        "@videojs/http-streaming": "2.10.2",
+        "@videojs/vhs-utils": "^3.0.3",
+        "@videojs/xhr": "2.6.0",
         "aes-decrypter": "3.1.2",
         "global": "^4.4.0",
         "keycode": "^2.2.0",
         "m3u8-parser": "4.7.0",
-        "mpd-parser": "0.17.0",
-        "mux.js": "5.12.2",
+        "mpd-parser": "0.19.0",
+        "mux.js": "5.13.0",
         "safe-json-parse": "4.0.0",
         "videojs-font": "3.2.0",
         "videojs-vtt.js": "^0.15.3"
       },
       "dependencies": {
-        "aes-decrypter": {
-          "version": "3.1.2",
-          "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-3.1.2.tgz",
-          "integrity": "sha512-42nRwfQuPRj9R1zqZBdoxnaAmnIFyDi0MNyTVhjdFOd8fifXKKRfwIHIZ6AMn1or4x5WONzjwRTbTWcsIQ0O4A==",
+        "@videojs/http-streaming": {
+          "version": "2.10.2",
+          "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-2.10.2.tgz",
+          "integrity": "sha512-JTAlAUHzj0sTsge2WBh4DWKM2I5BDFEZYOvzxmsK/ySILmI0GRyjAHx9uid68ZECQ2qbEAIRmZW5lWp0R5PeNA==",
           "requires": {
             "@babel/runtime": "^7.12.5",
-            "@videojs/vhs-utils": "^3.0.0",
+            "@videojs/vhs-utils": "3.0.3",
+            "aes-decrypter": "3.1.2",
             "global": "^4.4.0",
-            "pkcs7": "^1.0.4"
-          }
-        },
-        "m3u8-parser": {
-          "version": "4.7.0",
-          "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-4.7.0.tgz",
-          "integrity": "sha512-48l/OwRyjBm+QhNNigEEcRcgbRvnUjL7rxs597HmW9QSNbyNvt+RcZ9T/d9vxi9A9z7EZrB1POtZYhdRlwYQkQ==",
-          "requires": {
-            "@babel/runtime": "^7.12.5",
-            "@videojs/vhs-utils": "^3.0.0",
-            "global": "^4.4.0"
-          }
-        },
-        "mux.js": {
-          "version": "5.12.2",
-          "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-5.12.2.tgz",
-          "integrity": "sha512-9OY1lrFIo7FxMeIC6aLUftiNv97AztufDfi30N7qDll1Pcy7bCxlHztyHp1Ce0KQwy2XqchGeENPS4v1NJngHQ==",
-          "requires": {
-            "@babel/runtime": "^7.11.2"
-          }
-        },
-        "pkcs7": {
-          "version": "1.0.4",
-          "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.4.tgz",
-          "integrity": "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==",
-          "requires": {
-            "@babel/runtime": "^7.5.5"
+            "m3u8-parser": "4.7.0",
+            "mpd-parser": "0.19.0",
+            "mux.js": "5.13.0",
+            "video.js": "^6 || ^7"
+          },
+          "dependencies": {
+            "@videojs/vhs-utils": {
+              "version": "3.0.3",
+              "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.3.tgz",
+              "integrity": "sha512-bU7daxDHhzcTDbmty1cXjzsTYvx2cBGbA8hG5H2Gvpuk4sdfuvkZtMCwtCqL59p6dsleMPspyaNS+7tWXx2Y0A==",
+              "requires": {
+                "@babel/runtime": "^7.12.5",
+                "global": "^4.4.0",
+                "url-toolkit": "^2.2.1"
+              }
+            }
           }
         }
       }
@@ -12088,6 +12177,29 @@
         "webwackify": "0.1.6"
       },
       "dependencies": {
+        "aes-decrypter": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-1.0.3.tgz",
+          "integrity": "sha1-nAa4pUNaWtCduTP4oBSvzxhMw04=",
+          "requires": {
+            "pkcs7": "^0.2.3"
+          }
+        },
+        "m3u8-parser": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-2.1.0.tgz",
+          "integrity": "sha1-yBcDKewc1RXQ1Yu4t2LamJbLA2g="
+        },
+        "mux.js": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-4.3.2.tgz",
+          "integrity": "sha512-g0q6DPdvb3yYcoK7ElBGobdSSrhY/RjPt19U7uUc733aqvc5bCS/aCvL9z+448y+IoCZnYDwyZfQBBXMSmGOaQ=="
+        },
+        "pkcs7": {
+          "version": "0.2.3",
+          "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-0.2.3.tgz",
+          "integrity": "sha1-ItYGZtAQZcXyRDkJjkpIMEUic74="
+        },
         "process": {
           "version": "0.5.2",
           "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
@@ -12145,6 +12257,11 @@
         "webwackify": "0.1.6"
       },
       "dependencies": {
+        "mux.js": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-4.3.2.tgz",
+          "integrity": "sha512-g0q6DPdvb3yYcoK7ElBGobdSSrhY/RjPt19U7uUc733aqvc5bCS/aCvL9z+448y+IoCZnYDwyZfQBBXMSmGOaQ=="
+        },
         "process": {
           "version": "0.5.2",
           "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
@@ -12191,11 +12308,26 @@
         }
       }
     },
+    "videojs-flash": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/videojs-flash/-/videojs-flash-2.2.1.tgz",
+      "integrity": "sha512-mHu6TD12EKkxMvr8tg4AcfV/DuVLff427nneoZom3N9Dd2bv0sJOWwdLPQH1v5BCuAuXAVuAOba56ovTl+G3tQ==",
+      "requires": {
+        "global": "^4.4.0",
+        "video.js": "^6 || ^7",
+        "videojs-swf": "5.4.2"
+      }
+    },
     "videojs-font": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-3.2.0.tgz",
       "integrity": "sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA=="
     },
+    "videojs-hotkeys": {
+      "version": "0.2.27",
+      "resolved": "https://registry.npmjs.org/videojs-hotkeys/-/videojs-hotkeys-0.2.27.tgz",
+      "integrity": "sha512-pwtm1QocRmzJy1PWQsmFVHyeldYHHpLdeATK3FsFHVMmNpz6CROkAn8TFy2UILr8Ghgq134K8jEKNue8HWpudQ=="
+    },
     "videojs-ie8": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/videojs-ie8/-/videojs-ie8-1.1.2.tgz",
@@ -12204,6 +12336,11 @@
         "es5-shim": "^4.5.1"
       }
     },
+    "videojs-swf": {
+      "version": "5.4.2",
+      "resolved": "https://registry.npmjs.org/videojs-swf/-/videojs-swf-5.4.2.tgz",
+      "integrity": "sha512-FGg+Csioa8/A/EacvFefBdb9Z0rSiMlheHDunZnN3xXfUF43jvjawcWFQnZvrv1Cs1nE1LBrHyUZjF7j2mKOLw=="
+    },
     "videojs-vtt.js": {
       "version": "0.15.3",
       "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.3.tgz",
@@ -12288,87 +12425,6 @@
         }
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.2.0",
-      "resolved": "https://registry.nlark.com/vue-loader/download/vue-loader-16.2.0.tgz",
-      "integrity": "sha1-BGpTMI3Ufljv4g3ewe3sAnzjtG4=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1618995778321&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz",
-          "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.1.tgz?cache=0&sync_timestamp=1618995355917&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-4.1.1.tgz",
-          "integrity": "sha1-yAs/qyi/Y3HmhjMl7uZ+YYt35q0=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.nlark.com/color-convert/download/color-convert-2.0.1.tgz",
-          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
-          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.nlark.com/has-flag/download/has-flag-4.0.0.tgz?cache=0&sync_timestamp=1618847009337&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fhas-flag%2Fdownload%2Fhas-flag-4.0.0.tgz",
-          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
-          "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.nlark.com/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1622293579301&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
-          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "vue-router": {
       "version": "3.5.1",
       "resolved": "https://registry.nlark.com/vue-router/download/vue-router-3.5.1.tgz?cache=0&sync_timestamp=1620899536020&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue-router%2Fdownload%2Fvue-router-3.5.1.tgz",
@@ -12408,6 +12464,62 @@
       "integrity": "sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=",
       "dev": true
     },
+    "vue-video-player": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/vue-video-player/-/vue-video-player-5.0.2.tgz",
+      "integrity": "sha512-IZXeRGGSX4YIp54G0Q5cB7iqh6Ok6Dpa2jRkjdyvMWw7MShJuh54/d5QNb1CZ+CvZUzX/TH7osnpir7mBNcFvQ==",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "video.js": "^6.6.0",
+        "videojs-contrib-hls": "^5.12.2",
+        "videojs-flash": "^2.1.0",
+        "videojs-hotkeys": "^0.2.20"
+      },
+      "dependencies": {
+        "global": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/global/-/global-4.3.2.tgz",
+          "integrity": "sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=",
+          "requires": {
+            "min-document": "^2.19.0",
+            "process": "~0.5.1"
+          }
+        },
+        "process": {
+          "version": "0.5.2",
+          "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
+          "integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8="
+        },
+        "video.js": {
+          "version": "6.13.0",
+          "resolved": "https://registry.npmjs.org/video.js/-/video.js-6.13.0.tgz",
+          "integrity": "sha512-36/JR/GhPQSZj0o+GNbhcEYv/b0SkV9SQsjlodAnzMQYN0TA7VhmqrKPYMCi1NGRYu7S9W3OaFCFoUxkYfSVlg==",
+          "requires": {
+            "babel-runtime": "^6.9.2",
+            "global": "4.3.2",
+            "safe-json-parse": "4.0.0",
+            "tsml": "1.0.1",
+            "videojs-font": "2.1.0",
+            "videojs-ie8": "1.1.2",
+            "videojs-vtt.js": "0.12.6",
+            "xhr": "2.4.0"
+          }
+        },
+        "videojs-font": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-2.1.0.tgz",
+          "integrity": "sha1-olkwpn9snPvyu4jay4xrRR8JM3k="
+        },
+        "videojs-vtt.js": {
+          "version": "0.12.6",
+          "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.12.6.tgz",
+          "integrity": "sha512-XFXeGBQiljnElMhwCcZst0RDbZn2n8LU7ZScXryd3a00OaZsHAjdZu/7/RdSr7Z1jHphd45FnOvOQkGK4YrWCQ==",
+          "requires": {
+            "global": "^4.3.1"
+          }
+        }
+      }
+    },
     "vue-wechat-title": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/vue-wechat-title/-/vue-wechat-title-2.0.7.tgz",
@@ -13082,6 +13194,11 @@
       "resolved": "https://registry.npmjs.org/webwackify/-/webwackify-0.1.6.tgz",
       "integrity": "sha512-pGcw1T3HpNnM/UTRQqqRkkkzythSLts05mB+7Gr00B+0VbL0m39dFL5g20rSIEUt9Wrpw+/8k+snxRlUFHhcqA=="
     },
+    "webworkify-webpack": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/webworkify-webpack/-/webworkify-webpack-2.1.5.tgz",
+      "integrity": "sha512-2akF8FIyUvbiBBdD+RoHpoTbHMQF2HwjcxfDvgztAX5YwbZNyrtfUMgvfgFVsgDhDPVTlkbb5vyasqDHfIDPQw=="
+    },
     "which": {
       "version": "1.3.1",
       "resolved": "https://registry.nlark.com/which/download/which-1.3.1.tgz",
@@ -13255,11 +13372,6 @@
         }
       }
     },
-    "xmldom": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.5.0.tgz",
-      "integrity": "sha512-Foaj5FXVzgn7xFzsKeNIde9g6aFBxTPi37iwsno8QvApmtg7KYrr+OPyRHcJF7dud2a5nGRBXK3n0dL62Gf7PA=="
-    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.nlark.com/xtend/download/xtend-4.0.2.tgz",

package.json

@@ -1,56 +1,61 @@
 {
-  "name": "IOT",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
-  },
-  "dependencies": {
-    "core-js": "^3.6.5",
-    "echarts": "^5.1.2",
-    "element-ui": "^2.4.5",
-    "video.js": "^7.14.3",
-    "videojs-contrib-hls": "^5.15.0",
-    "vue": "^2.6.11",
-    "vue-router": "^3.2.0",
-    "vuex": "^3.4.0"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-router": "^4.5.13",
-    "@vue/cli-plugin-vuex": "^4.5.13",
-    "@vue/cli-service": "~4.5.0",
-    "axios": "^0.18.0",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.2.2",
-    "node-sass": "^4.9.2",
-    "sass-loader": "^7.0.3",
-    "vue-cli-plugin-axios": "0.0.4",
-    "vue-cli-plugin-element": "~1.0.1",
-    "vue-template-compiler": "^2.6.11",
-    "vue-wechat-title": "^2.0.7"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
+    "name": "IOT",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+        "serve": "vue-cli-service serve",
+        "build": "vue-cli-service build",
+        "lint": "vue-cli-service lint"
     },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "babel-eslint"
+    "dependencies": {
+        "@videojs/http-streaming": "^2.11.2",
+        "core-js": "^3.6.5",
+        "echarts": "^5.1.2",
+        "element-ui": "^2.4.5",
+        "flv.js": "^1.6.2",
+        "hls": "0.0.1",
+        "videojs-contrib-hls": "^5.15.0",
+        "videojs-flash": "^2.2.1",
+        "vue": "^2.6.11",
+        "vue-router": "^3.2.0",
+        "vue-video-player": "^5.0.2",
+        "vuex": "^3.4.0"
     },
-    "rules": {}
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ]
+    "devDependencies": {
+        "@vue/cli-plugin-babel": "~4.5.0",
+        "@vue/cli-plugin-eslint": "~4.5.0",
+        "@vue/cli-plugin-router": "^4.5.13",
+        "@vue/cli-plugin-vuex": "^4.5.13",
+        "@vue/cli-service": "~4.5.0",
+        "axios": "^0.18.0",
+        "babel-eslint": "^10.1.0",
+        "eslint": "^6.7.2",
+        "eslint-plugin-vue": "^6.2.2",
+        "node-sass": "^4.9.2",
+        "sass-loader": "^7.0.3",
+        "video.js": "^7.15.4",
+        "vue-cli-plugin-axios": "0.0.4",
+        "vue-cli-plugin-element": "~1.0.1",
+        "vue-template-compiler": "^2.6.11",
+        "vue-wechat-title": "^2.0.7"
+    },
+    "eslintConfig": {
+        "root": true,
+        "env": {
+            "node": true
+        },
+        "extends": [
+            "plugin:vue/essential",
+            "eslint:recommended"
+        ],
+        "parserOptions": {
+            "parser": "babel-eslint"
+        },
+        "rules": {}
+    },
+    "browserslist": [
+        "> 1%",
+        "last 2 versions",
+        "not dead"
+    ]
 }

public/index.html

@@ -1,17 +1,22 @@
 <!DOCTYPE html>
 <html lang="">
-  <head>
+
+<head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
+    <title>
+        <%= htmlWebpackPlugin.options.title %>
+    </title>
+</head>
+
+<body>
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
-  </body>
-</html>
+</body>
+
+</html>

src/App.vue

@@ -1,16 +1,14 @@
 <template>
-  <div id="app" :style="{background:$store.state.typeFire === 0 ? '#002976' :''}">
-    <header-view class="headerView" v-if="$store.state.typeFire === 0"></header-view>
-    <header-view-af class="headerView-af" v-else></header-view-af>
-    <router-view :class="$store.state.typeFire === 0 ? 'content' : 'content-AF'" />
+  <div id="app" style="{background:'#002976'}">
+    <header-view class="headerView"></header-view>
+    <router-view class="content" />
   </div>
 </template>
 
 <script>
 import headerView from './components/SD-school/header-view'
-import headerViewAf from './components/AF-exhibition/header-view'
 export default {
-  components:{headerView,headerViewAf},
+  components:{headerView},
   data() {
     return {
       resizeTime: true,
@@ -30,12 +28,10 @@ export default {
       }, 300);
     },
     async getWeater(){
-        let res = await this.$axios.get('/top/listWeather?'+this.$qs.stringify({
-        area: '上海市'
-      }))
-      if(res.success){
-        this.$store.commit("changWeater", res.data.showapi_res_body.now);
-      }
+      // let res = await this.$axios.get('/top/listWeather?'+this.$qs.stringify({ area: '上海市' }))
+      // if(res.success){
+      //   this.$store.commit("changWeater", res.data.showapi_res_body.now);
+      // }
     }
   },
 };
@@ -45,7 +41,8 @@ export default {
 #app {
   width: 100%;
   height: 100%;
-  background: url('./assets/image/bg.jpg');
+  background: url('./assets/image/bg.png') no-repeat;
+  background-size: 100% 100%;
   color: #fff;
   display: flex;
   flex-direction: column;

src/assets/common.scss

@@ -195,48 +195,6 @@ body {
     }
 }
 
-// 安防
-.mianBox-af {
-    width: 100%;
-    height: 100%;
-    padding: 10px;
-    // display: flex;
-    // flex-direction: column;
-    background: url("../assets/image-af/bg.png") no-repeat;
-    background-size: 100% 100%;
-    .headerBox {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        height: 50px;
-        width: 100%;
-        color: #FFF;
-        background: url("../assets/image-af/title.png") no-repeat;
-        background-position: bottom;
-        .el-col {
-            width: auto;
-            height: 100%;
-            line-height: 100%;
-            text-align: center;
-        }
-        .title {
-            color: #F1F1F1;
-            font-weight: bold;
-            line-height: 50px;
-            font-size: 16px;
-            display: flex;
-            align-items: center;
-            img {
-                width: 49px;
-                height: 49px;
-            }
-        }
-    }
-    .contentBox {
-        height: calc(100% - 50px);
-    }
-}
-
 // form表单样式
 .el-form {
     .el-form-item {

src/assets/image/close2.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1636676780445" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2575" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M453.44 512L161.472 220.032a41.408 41.408 0 0 1 58.56-58.56L512 453.44 803.968 161.472a41.408 41.408 0 0 1 58.56 58.56L570.56 512l291.968 291.968a41.408 41.408 0 0 1-58.56 58.56L512 570.56 220.032 862.528a41.408 41.408 0 0 1-58.56-58.56L453.44 512z" fill="#3D3D3D" p-id="2576"></path></svg>

src/components/AF-exhibition/current-state/index.vue

@@ -1,68 +0,0 @@
-<template>
-  <el-row class="mianBox-af">
-    <el-row class="headerBox">
-      <el-col class="title">
-        <img src="../../../assets/image-af/title5.png" alt="" />
-        当前实时状态
-      </el-col>
-    </el-row>
-    <el-row class="contentBox">
-        <el-col>
-          <span>设备名称: </span>
-          <span>电梯运行监控#7</span>
-        </el-col>
-        <el-col>
-          <span>设备状态: </span>
-          <span class="red">异常关闭</span>
-        </el-col>
-        <el-col>
-          <span>状态: </span>
-          <span class="green">在线</span>
-        </el-col>
-        <el-col>
-          <span>电量: </span>
-          <span class="green">正常</span>
-        </el-col>
-        <el-col>
-          <span>联系方式: </span>
-          <span> 1398981221（张三）</span>
-        </el-col>
-    </el-row>
-  </el-row>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      checkList: [],
-    };
-  },
-  mounted() {},
-  methods: {},
-};
-</script>
-
-<style lang="scss" scoped>
-.mianBox-af {
-  .contentBox {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-between;
-    padding: 10px;
-    box-sizing: border-box;
-    padding: 10px 15px;
-    font-size: 16px;
-    .el-col{
-      &>span:first-child{
-        display: inline-block;
-        width: 70px;
-        text-align: right;
-        margin-right: 10px;
-      }
-    }
-  }
-}
-</style>

src/components/AF-exhibition/equipment/echart.js

@@ -1,98 +0,0 @@
-import * as echarts from "echarts";
-
-export default function getData(params = .23, color = ['#0099ff', '#00d5ff'], name = '处置率') {
-    return {
-        // backgroundColor:{
-        //       type: 'radial',
-        //       x: 0.5,
-        //       y: 0.5,
-        //       r: 0.5,
-        //       colorStops: [
-        //         { offset: 0,color: "#122c7a",},
-        //         { offset: 0.9,color: "#122c7a",},
-        //         { offset: 0.9,color: "#0b1f61",},
-        //         { offset: 1,color: "#0b1f61",},
-        //         { offset: 1,color: "transparent",},
-        //       ],
-        //       global: true // 缺省为 false
-        // },
-        title: {
-            show: true,
-            text: name,
-            left: "center",
-            right: "center",
-            bottom: "center",
-            top: "52%",
-            center: 20,
-            textStyle: {
-                color: "#FFF",
-                fontSize: 14,
-                align: "center",
-                fontWeight: "100",
-                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
-            },
-        },
-        series: [{
-            type: "gauge",
-            radius: "90%",
-            // center: ["50%","70%"],
-            startAngle: 225, //开始角度 左侧角度
-            endAngle: -135, //结束角度 右侧
-            z: 4,
-            axisLine: {
-                show: true,
-                roundCap: true,
-                lineStyle: {
-                    width: 10,
-                    color: [
-                        [1,
-                            new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-                                { offset: 0, color: color[2] },
-                                { offset: 1, color: color[0] },
-                            ]),
-                        ],
-                        [
-                            params > .5 ? params : 1 - params, color[1]
-                        ],
-                    ],
-                },
-            },
-            //分隔线样式。
-            splitLine: {
-                show: false,
-            },
-            axisLabel: {
-                show: false,
-            },
-            axisTick: {
-                show: false,
-            },
-            pointer: {
-                show: false,
-                length: "70%",
-                width: "2%",
-            },
-            title: {
-                show: false,
-            },
-            //仪表盘详情，用于显示数据。
-            detail: {
-                show: true,
-                offsetCenter: [0, "-20%"],
-                color: "#ffffff",
-                textStyle: {
-                    fontSize: 26,
-                    color: color[2],
-                    fontWeight: "500",
-                    fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
-                },
-                formatter: function(v) {
-                    return v * 100 + "%";
-                },
-            },
-            data: [{
-                value: params,
-            }, ],
-        }, ],
-    }
-}

src/components/AF-exhibition/equipment/index.vue

@@ -1,128 +0,0 @@
-<template>
-  <el-row class="mianBox-af">
-    <el-row class="headerBox">
-      <el-col class="title">
-        <img src="../../../assets/image-af/title1.png" alt="" />
-        设备工况
-      </el-col>
-    </el-row>
-    <el-row class="contentBox">
-      <el-col>
-        <div ref="echartD1" class="echartD"></div>
-        <div class="equipmentNumber greenNumber">{{resList.deviceTotal}}</div>
-        <div class="equipmentName">设备总数</div>
-      </el-col>
-      <el-col>
-        <div ref="echartD2" class="echartD"></div>
-        <div class="equipmentNumber yellowNumber">{{resList.alarmTotal}}</div>
-        <div class="equipmentName">告警次数</div>
-      </el-col>
-      <el-col>
-        <div ref="echartD3" class="echartD"></div>
-        <div class="equipmentNumber blueNumber">{{resList.unOnline}}</div>
-        <div class="equipmentName">离线总数</div>
-      </el-col>
-    </el-row>
-  </el-row>
-</template>
-
-<script>
-import * as echarts from "echarts";
-import echartsGet from "./echart";
-export default {
-  props:['resInfo'],
-  data() {
-    return {
-      isCheck: "info",
-      option: null,
-      resList:{}
-    };
-  },
-  watch: {
-    "$store.state.windowWidth"() {
-      echarts.init(this.$refs.echartD1).resize();
-      echarts.init(this.$refs.echartD2).resize();
-      echarts.init(this.$refs.echartD3).resize();
-    },
-    resInfo(){
-      this.getData()
-    }
-  },
-  mounted(){
-    this.getData()
-  },
-  methods: {
-    async getData(){
-		console.log(this.resInfo.apiAddr)
-       let res = await this.$axios.get(this.resInfo.apiAddr + '?' +this.$qs.stringify({
-        applicationCode: this.resInfo.applicationCode
-      }))
-      if(res.success){
-		  console.log(res)
-        this.resList = res.data
-        this.resList.alarmChart = (res.data.alarmList.reduce((next,res)=>{
-          next.findIndex(val=>val.registerDeviceId === res.registerDeviceId) === -1 && next.push(res)
-          return next
-        },[]).length / this.resList.deviceTotal ).toFixed(2)
-        this.enidCheck()
-      }
-    },
-    enidCheck(){
-      echarts.init(this.$refs.echartD1).setOption(echartsGet(1- this.resList.unOnline/this.resList.deviceTotal, ['rgba(47,255,91,0)',`rgba(47,255,91,.4)`,'rgba(47,255,91,1)',],'在线率'));
-      echarts.init(this.$refs.echartD2).setOption(echartsGet(this.resList.alarmChart, ['rgba(225,199,47,0)','rgba(225,199,47,.4)','rgba(225,199,47,1)',],'告警率'));
-      echarts.init(this.$refs.echartD3).setOption(echartsGet(this.resList.unOnline/this.resList.deviceTotal, ['rgba(5,60,125,0)','rgba(47,174,225,.4)', 'rgba(47,174,225,1)'],'离线率'));
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.mianBox-af {
-  .contentBox{
-    flex: 1;
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    padding: 10px 0;
-    overflow: hidden;
-    .el-col{
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      overflow: hidden;
-      .echartD{
-        flex: 1;
-        width: 100%;
-        height: 100%;
-        min-height: 95px;
-      }
-      .equipmentNumber{
-        width: 115px;
-        height: 35px;
-        font-size: 30px;
-        font-weight: 700;
-        color: #FFF;
-        font-family: "DS", "DS-B", "DS-BB", "DS-BS";
-        text-align: center;
-        line-height: 35px;
-      }
-      .equipmentName{
-        font-size: 14px;
-      }
-      .equipmentNumber.greenNumber{
-        border-bottom: 2px solid #2FFF5B;
-        background: linear-gradient(to bottom, transparent  0%,#2fff5b5c 100%);
-      }
-      .equipmentNumber.yellowNumber{
-        border-bottom: 2px solid #FFC72F;
-        background: linear-gradient(to bottom, transparent  0%,#e1c72f66 100%);
-      }
-      .equipmentNumber.blueNumber{
-        border-bottom: 2px solid #2FAEFF;
-        background: linear-gradient(to bottom, transparent  0%,#2faee166 100%);
-      }
-    }
-  }
-}
-</style>

src/components/AF-exhibition/footer/index.vue

@@ -1,146 +0,0 @@
-<template>
-  <el-row class="mainBox">
-    <el-col v-for="(item,ind) in footerList" :key="ind">
-      <!-- <img src="../../../assets/image-af/signal.png" alt="" class="signal"> -->
-      <!-- <img src="../../../assets/image-af/electric.png" alt="" class="electric"> -->
-      <span class="signal">{{item.signal}}</span>
-      <span class="electric">{{item.battery}}</span>
-      <span class="boxName">{{item.deviceName}}</span>
-      <el-row class="contentInfo fontBox">
-        <el-col v-html="item.status"></el-col>
-      </el-row>
-    </el-col>
-    <el-col>
-      <!-- <img src="../../../assets/image-af/test1.png" alt="" class="videoBox"> -->
-      
-      <video id="myVideo" class="video-js videoBox" controls preload="auto" data-setup='{}' style='width: 100%;height: 100%' v-if="resList[0]">
-          <source id="source" :src="resList[0] && resList[0].url || ''" type="application/x-mpegURL"/>
-      </video>
-      <img src="../../../assets/image-af/red.png" alt="" class="redImage" v-else>
-    </el-col>
-    <el-col>
-      <video id="myVideo2" class="video-js videoBox" controls preload="auto" data-setup='{}' style='width: 100%;height: 100%' v-if="resList[1]">
-          <source id="source" :src="resList[1] && resList[1].url || ''" type="application/x-mpegURL"/>
-      </video>
-      <img src="../../../assets/image-af/red.png" alt="" class="redImage" v-else>
-    </el-col>
-  </el-row>
-</template>
-
-<script>
-import videojs from 'video.js'
-import 'video.js/dist/video-js.css'
-import 'videojs-contrib-hls'
-export default {
-  props:['footerList'],
-  data(){
-    return{
-      myVideo:null,
-      myVideo2:null,
-      resList:[]
-    }
-  },
-  mounted(){
-    this.getData()
-  },
-  methods:{
-    videoPlay(){
-      // videojs 简单使用
-      if(this.resList[0]){
-        this.myVideo = videojs('myVideo', {
-            bigPlayButton: false,
-            textTrackDisplay: false,
-            posterImage: false,
-            errorDisplay: false,
-        })
-        console.log(this.myVideo)
-        this.myVideo.play()// 视频播放
-      }
-      if(this.resList[1]){
-        this.myVideo2 = videojs('myVideo2', {
-            bigPlayButton: false,
-            textTrackDisplay: false,
-            posterImage: false,
-            errorDisplay: false,
-        })
-        this.myVideo2.play()// 视频播放
-      }
-    },
-     async getData(){
-      let res = await this.$axios.get('/AFTop/querySystemUrl?'+this.$qs.stringify({
-        type: 1
-      }))
-      if(res.success){
-        this.resList = res.data.slice(0,2)
-        this.$nextTick(()=>{
-          this.videoPlay()
-        })
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.mainBox{
-    display: flex;
-    justify-content: space-between;
-    &>.el-col{
-      width: 10.5%;
-      height: 100%;
-      background: url('../../../assets/image-af/bg2.png') no-repeat;
-      background-size: 100% 100%;
-      position: relative;
-      font-size: 16px;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      .signal{
-        position: absolute;
-        left: 15px;
-        top: 15px;
-        width: 16px;
-        height: 16px;
-      }
-      .electric{
-        position: absolute;
-        right: 15px;
-        top: 15px;
-        width: 23px;
-        height: 14px;
-      }
-      .boxName{
-        position: absolute;
-        bottom: 10px;
-        text-align: center;
-        left: 0;
-        right: 0;
-      }
-      .contentInfo{
-        text-align: center;
-        font-size: 22px;
-        font-weight: 700;
-        color: #24FF00;
-      }
-      .fontBox{
-        font-size: 18px;
-      }
-      .videoBox{
-        width: 100%;
-        height: 100%;
-      }
-      .redImage{
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        top: 0;
-        margin: auto;
-        width: 100%;
-        height: 100%;
-        background: #ff000042;
-      }
-    }
-}
-</style>

src/components/AF-exhibition/give-an-alarm/echart.js

@@ -1,115 +0,0 @@
-import * as echarts from "echarts";
-
-export default function getData(params = []) {
-    let resList = params.alarmList.map(val => {
-        return {
-            ...val,
-            createTime: new Date(val.createTime).getDate()
-        }
-    }).reverse()
-    let resList2 = params.unOnlineList.map(val => {
-        return {
-            ...val,
-            createTime: new Date(val.createTime).getDate()
-        }
-    }).reverse()
-    return {
-        color: [
-            "rgba(62,175,64,.8)",
-            "rgba(239,107,61,.8)",
-        ],
-        title: {
-            show: false,
-            text: "渐变堆叠面积图",
-        },
-        tooltip: {
-            trigger: "axis",
-            textStyle: {
-                color: "#FFF",
-            },
-            confine: true,
-            backgroundColor: "rgba(11, 12, 72, 0.8)",
-            borderColor: "rgba(11, 12, 72, 0.4)",
-            position: "bottom",
-        },
-        legend: {
-            show: true,
-            top: 0,
-            right: 10,
-            itemGap: 20,
-            textStyle: {
-                color: "#FFF",
-            },
-        },
-        // toolbox: {},
-        grid: {
-            top: 30,
-            left: 10,
-            right: 15,
-            bottom: 10,
-            containLabel: true,
-        },
-        xAxis: {
-            type: "category",
-            boundaryGap: false,
-            data: resList.map(val => val.createTime),
-            axisLabel: {
-                color: "#FFFFFF",
-                // rotate: 50,
-            },
-            axisTick: {
-                show: false,
-            },
-        },
-        yAxis: {
-            type: "value",
-            axisLabel: {
-                color: "#FFFFFF",
-            },
-            splitLine: {
-                lineStyle: {
-                    color: "#ccc",
-                },
-            },
-        },
-        series: [{
-                name: "告警数",
-                type: "line",
-                smooth: true,
-                showSymbol: true,
-                areaStyle: {
-                    opacity: 0.8,
-                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                            offset: 0,
-                            color: "rgba(62,175,64)",
-                        },
-                        {
-                            offset: 1,
-                            color: "rgba(62,175,64,.1)",
-                        },
-                    ]),
-                },
-                data: resList.map(val => val.count),
-            },
-            {
-                name: "离线数",
-                type: "line",
-                smooth: true,
-                showSymbol: true,
-                areaStyle: {
-                    opacity: 0.8,
-                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                            offset: 0,
-                            color: "rgba(62, 175, 64,1)",
-                        },
-                        {
-                            offset: 1,
-                            color: "rgba(62, 175, 64,.1)",
-                        },
-                    ]),
-                },
-                data: resList2.map(val => val.count),
-            },
-        ],
-    }
-}

src/components/AF-exhibition/give-an-alarm/index.vue

@@ -1,68 +0,0 @@
-<template>
-  <el-row class="mianBox-af">
-    <el-row class="headerBox">
-      <el-col class="title">
-        <img src="../../../assets/image-af/title2.png" alt="" />
-        设备告警情况
-      </el-col>
-    </el-row>
-    <el-row class="contentBox">
-        <div ref="echartD" class="echartD"></div>
-    </el-row>
-  </el-row>
-</template>
-
-<script>
-import * as echarts from "echarts";
-import echartsGet from "./echart";
-export default {
-  props:['resInfo'],
-  data() {
-    return {
-      isCheck: "info",
-      option: null,
-      resList:{}
-    };
-  },
-  mounted(){
-    this.getData()
-  },
-  watch: {
-    "$store.state.windowWidth"() {
-      echarts.init(this.$refs.echartD).resize();
-    },
-    resInfo(){
-      this.getData()
-    }
-  },
-  methods: {
-    async getData(){
-       let res = await this.$axios.get(this.resInfo.apiAddr + '?' +this.$qs.stringify({
-        applicationCode: this.resInfo.applicationCode
-      }))
-      if(res.success){
-        this.resList = res.data
-        echarts.init(this.$refs.echartD).setOption(echartsGet(this.resList));
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.mianBox-af {
-  background: url("../../../assets/image-af/bg.png") no-repeat;
-  background-size: 100% 100%;
-  .contentBox{
-    width: 100%;
-    display: flex;
-    padding: 0 20px;
-    box-sizing: border-box;
-    .echartD{
-      width: 100%;
-      height: calc(100% + 15px);
-      transform: translateY(-15px); 
-    }
-  }
-}
-</style>

src/components/AF-exhibition/header-view/index copy.vue

@@ -1,138 +0,0 @@
-<template>
-  <header>
-    <el-row class="headerRowBox">
-      <el-col>{{ dateDay }}</el-col>
-      <el-col class="time">{{ dataTime }}</el-col>
-      <el-col class="weather">
-        <!-- <img v-if="weatherObj.weather_pic" :src="weatherObj.weather_pic || ''" alt="" /> -->
-        <!-- <span v-if="weatherObj.weather">{{ weatherObj.weather }} {{ weatherObj.temperature }}℃</span> -->
-        <img src="../../../assets/image/header-AF.png" alt="" />
-      </el-col>
-      <el-col>多云 23℃</el-col>
-    </el-row>
-    <el-row class="headerCenterBox">永天科技-智能安防系统数据看板</el-row>
-    <el-row class="headerRowBox">
-    </el-row>
-  </header>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      dateDay: "",
-      dataTime: "",
-      timeArea: "",
-      weatherObj: {},
-      dataWeekList: ["一", "二", "三", "四", "五", "六", "七"],
-    };
-  },
-  created() {},
-  mounted() {
-    this.getData();
-    setInterval(() => {
-      let day = new Date();
-      this.dateDay =
-        day.getFullYear() +
-        "年" +
-        (day.getMonth() + 1 < 10
-          ? "0" + (day.getMonth() + 1)
-          : "" + (day.getMonth() + 1)) +
-        "月" +
-        (day.getDate() < 10 ? "0" + day.getDate() : day.getDate()) +
-        "日  " +
-        " 星期" +
-        this.dataWeekList[day.getDay()];
-      this.dataTime =
-        (day.getHours() < 10 ? "0" + day.getHours() : day.getHours()) +
-        ":" +
-        (day.getMinutes() < 10 ? "0" + day.getMinutes() : day.getMinutes()) +
-        ":" +
-        (day.getSeconds() < 10 ? "0" + day.getSeconds() : day.getSeconds());
-    }, 1000);
-  },
-  methods: {
-    async getData() {
-
-    },
-    async getWeather() {
-      let res = await this.$axios.get("/aliWeather");
-      if (res.showapi_res_code === 0) {
-        this.weatherObj = res.showapi_res_body.now;
-      }
-    },
-  },
-  };
-</script>
-
-<style lang="scss" scoped>
-  header {
-    width: 100%;
-    padding: 0 20px;
-    display: flex;
-    background: url("../../../assets/image/header-AF.png");
-    background-size: 100% 100%;
-    font-size: 14px;
-    box-sizing: border-box;
-    .headerRowBox {
-      width: 34%;
-      display: flex;
-      padding-top: 12px;
-      height: 100%;
-      &::before{
-        display: none;
-      }
-      .el-col {
-        flex: none;
-        width: auto;
-        height: auto;
-        margin-right: 20px;
-        line-height: 30px;
-        span{
-          font-size: 20px;
-          color: #F6D311;
-          margin-left: 10px;
-        }
-      }
-      .time {
-        margin-left: 10px;
-        font-size: 28px;
-        width: 90px;
-        font-family: "DS", "DS-B", "DS-BB", "DS-BS";
-      }
-      .weather {
-        display: flex;
-        img {
-          width: 28px;
-          height: 28px;
-          display: block;
-        }
-      }
-    }
-    .headerCenterBox{
-      flex: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 32px;
-      font-family: "DS", "DS-B", "DS-BB", "DS-BS";
-      font-weight: 700;
-      letter-spacing: 1px;
-      background-image:-webkit-linear-gradient(top,#fafeff,#59c8ff,); 
-      -webkit-background-clip:text; 
-      -webkit-text-fill-color:transparent; 
-    }
-    // .headerRightBox {
-    //   width: 34%;
-    //   display: flex;
-    //   align-items: center;
-    //   height: 100%;
-    //   .el-col {
-    //     flex: none;
-    //     width: auto;
-    //     height: auto;
-    //     margin-right: 30px;
-    //   }
-    // }
-  }
-</style>

src/components/AF-exhibition/header-view/index.vue

@@ -1,138 +0,0 @@
-<template>
-  <header>
-    <el-row class="headerRowBox">
-      <el-col>{{ dateDay }}</el-col>
-      <el-col class="time">{{ dataTime }}</el-col>
-      <el-col class="weather">
-        <!-- <img v-if="weatherObj.weather_pic" :src="weatherObj.weather_pic || ''" alt="" /> -->
-        <!-- <span v-if="weatherObj.weather">{{ weatherObj.weather }} {{ weatherObj.temperature }}℃</span> -->
-         <img :src="$store.state.weaterRes.weather_pic || ''" alt="" />
-      </el-col>
-     <el-col>{{$store.state.weaterRes.weather || ''}}   {{$store.state.weaterRes.temperature || ''}}℃</el-col>
-    </el-row>
-    <el-row class="headerCenterBox">永天科技-智能物联网设备</el-row>
-    <el-row class="headerRowBox">
-    </el-row>
-  </header>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      dateDay: "",
-      dataTime: "",
-      timeArea: "",
-      weatherObj: {},
-      dataWeekList: ["一", "二", "三", "四", "五", "六", "七"],
-    };
-  },
-  created() {},
-  mounted() {
-    this.getData();
-    setInterval(() => {
-      let day = new Date();
-      this.dateDay =
-        day.getFullYear() +
-        "年" +
-        (day.getMonth() + 1 < 10
-          ? "0" + (day.getMonth() + 1)
-          : "" + (day.getMonth() + 1)) +
-        "月" +
-        (day.getDate() < 10 ? "0" + day.getDate() : day.getDate()) +
-        "日  " +
-        " 星期" +
-        this.dataWeekList[day.getDay()];
-      this.dataTime =
-        (day.getHours() < 10 ? "0" + day.getHours() : day.getHours()) +
-        ":" +
-        (day.getMinutes() < 10 ? "0" + day.getMinutes() : day.getMinutes()) +
-        ":" +
-        (day.getSeconds() < 10 ? "0" + day.getSeconds() : day.getSeconds());
-    }, 1000);
-  },
-  methods: {
-    async getData() {
-
-    },
-    async getWeather() {
-      let res = await this.$axios.get("/aliWeather");
-      if (res.showapi_res_code === 0) {
-        this.weatherObj = res.showapi_res_body.now;
-      }
-    },
-  },
-  };
-</script>
-
-<style lang="scss" scoped>
-  header {
-    width: 100%;
-    padding: 0 20px;
-    display: flex;
-    background: url("../../../assets/image/header.png");
-    background-size: 100% 100%;
-    font-size: 14px;
-    box-sizing: border-box;
-    .headerRowBox {
-      width: 34%;
-      display: flex;
-      padding-top: 12px;
-      height: 100%;
-      &::before{
-        display: none;
-      }
-      .el-col {
-        flex: none;
-        width: auto;
-        height: auto;
-        margin-right: 20px;
-        line-height: 30px;
-        span{
-          font-size: 20px;
-          color: #F6D311;
-          margin-left: 10px;
-        }
-      }
-      .time {
-        margin-left: 10px;
-        font-size: 28px;
-        width: 90px;
-        font-family: "DS", "DS-B", "DS-BB", "DS-BS";
-      }
-      .weather {
-        display: flex;
-        img {
-          width: 28px;
-          height: 28px;
-          display: block;
-        }
-      }
-    }
-    .headerCenterBox{
-      flex: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 32px;
-      font-family: "DS", "DS-B", "DS-BB", "DS-BS";
-      font-weight: 700;
-      letter-spacing: 1px;
-      background-image:-webkit-linear-gradient(top,#fafeff,#59c8ff,); 
-      -webkit-background-clip:text; 
-      -webkit-text-fill-color:transparent; 
-    }
-    // .headerRightBox {
-    //   width: 34%;
-    //   display: flex;
-    //   align-items: center;
-    //   height: 100%;
-    //   .el-col {
-    //     flex: none;
-    //     width: auto;
-    //     height: auto;
-    //     margin-right: 30px;
-    //   }
-    // }
-  }
-</style>

src/components/AF-exhibition/monitor-info/index.vue

@@ -1,65 +0,0 @@
-<template>
-  <el-row class="mianBox-af">
-    <el-row class="headerBox">
-      <el-col class="title">
-        <img src="../../../assets/image-af/title6.png" alt="" />
-        异常监控信息
-      </el-col>
-    </el-row>
-    <el-row class="contentBox" :gutter="10">
-      <el-col v-for="item in imageList" :key="item">
-        <img :src="item" alt="" />
-      </el-col>
-    </el-row>
-  </el-row>
-</template>
-
-<script>
-export default {
-  props: ["imageList"],
-  data() {
-    return {
-      checkList: [],
-    };
-  },
-  mounted() {},
-  methods: {},
-};
-</script>
-
-<style lang="scss" scoped>
-.mianBox-af {
-  .contentBox {
-    width: 100%;
-    display: flex;
-    padding: 10px;
-    box-sizing: border-box;
-    padding: 10px 15px;
-    font-size: 16px;
-    overflow: auto;
-    flex-wrap: wrap;
-    scrollbar-width: none;
-    /* firefox */
-    -ms-overflow-style: none;
-    /* IE 10+ */
-    overflow-x: hidden;
-    overflow-y: auto;
-    &::-webkit-scrollbar {
-      display: none;
-      // opacity: 0;
-      /* Chrome Safari */
-    }
-    .el-col {
-      width: 50%;
-      height: 100%;
-      &:nth-child(n + 3) {
-        margin-top: 10px;
-      }
-      img {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-}
-</style>

src/components/AF-exhibition/warning-info/index.vue

@@ -1,110 +0,0 @@
-<template>
-  <el-row class="mianBox-af">
-    <el-row class="headerBox">
-      <el-col class="title">
-        <img src="../../../assets/image-af/title3.png" alt="" />
-        告警信息
-      </el-col>
-    </el-row>
-    <el-row class="contentBox">
-      <el-row style="width: 100%;height: 100%; margin: 0 auto">
-      <el-table :data="resList" class="transparentTableRow" height="100%" style="width: 100%; margin: 0 auto">
-        <!-- min-width="20" -->
-        <el-table-column show-overflow-tooltip v-for="item in headerData" :key="item.prop" :prop="item.prop" align="center" :label="item.name"></el-table-column>
-      </el-table>
-      </el-row>
-    </el-row>
-  </el-row>
-</template>
-
-<script>
-export default {
-  props:['resInfo'],
-  data() {
-    return {
-      isCheck: "info",
-      option: null,
-      resList: [],
-      headerData: [
-        { name: "点位", prop: "alarmDeviceName" },
-        { name: "告警时间", prop: "alarmTime" },
-        { name: "类型", prop: "deviceType" },
-        { name: "内容详情", prop: "alarmContent" },
-      ],
-    };
-  },
-  watch: {
-    resInfo(){
-      this.getData()
-    } 
-  },
-  mounted(){
-    this.getData()
-  },
-  methods: {
-    async getData(){
-      if ("WebSocket" in window) {
-        this.ws = new WebSocket("ws://" + this.$store.state.wsUrl + this.resInfo.apiAddr);
-        this.ws.onopen =  ()=> {
-          console.log("websocket连接成功");
-          this.sendWs({aa:22});
-        };
-
-        this.ws.onmessage = (resJson) => {
-          let res = JSON.parse(resJson.data)
-          res.type === 0 && this.resList.unshift(...res.data)
-          if(res.type === 1) {
-            console.log(res.data.map(val=>val.url))
-            this.$emit('changeImage',res.data.map(val=>val.url))
-          }
-          if(res.type === 2) {
-            console.log(res.data)
-            this.$emit('footerImage',res.data)
-          }
-        };
-
-        this.ws.onclose = ()=> {
-          // 关闭 websocket
-          console.log("连接已关闭...");
-
-          //断线重新连接
-          setTimeout(() => {
-            this.getData();
-          }, 2000);
-        };
-      } else {
-        // 浏览器不支持 WebSocket
-        console.log("您的浏览器不支持 WebSocket!");
-      }
-      //  let res = await this.$axios.get(this.resInfo.apiAddr + '?' +this.$qs.stringify({
-      //   applicationCode: this.resInfo.applicationCode
-      // }))
-      // if(res.success){
-      //   this.resList = res.data
-      // }
-    },
-    sendWs(val){
-      if (this.ws && this.ws.readyState == 1) {
-        this.ws.send(JSON.stringify(val));
-        console.log('发送成功')
-      } else {
-        setTimeout(() => {
-          this.sendWs(val);
-        }, 100);
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.mianBox-af {
-  .contentBox{
-    width: 100%;
-    display: flex;
-    padding: 10px;
-    box-sizing: border-box;
-    
-  }
-}
-</style>

src/components/SD-school/Spring-frame/index.vue

@@ -0,0 +1,705 @@
+<template>
+    <div class="Spring-frame">
+        <!-- <el-dialog :visible.sync="centerDialogVisible"> -->
+            <el-row class="warning alert" v-if="warning.state"><!--告警推送弹框-->
+                <el-col class="contain">
+                    <el-col class="title">{{warning.warningMessage.deviceName ? "设备名称：" + warning.warningMessage.deviceName : "设备名称：--"}}</el-col>
+                    <el-col class="content">{{warning.warningMessage.alarmContent ? "告警信息：" + warning.warningMessage.alarmContent : "告警信息：--"}}</el-col>
+                    <el-col class="time">{{warning.warningMessage.createTime ? "告警时间：" + warning.warningMessage.createTime : "告警时间：--"}}</el-col>
+                </el-col>
+            </el-row>
+            <el-row class="meeting commonWidth" v-if="meeting.state"><!--会议系统弹框-->
+                <el-col class="top">
+                    <el-col class="title">
+                        <img src="../../../assets/image/arrow.png" alt="" />
+                        xxx会议室
+                    </el-col>
+                    <p class="close" @click="close"></p>
+                </el-col>
+                <!-- <el-col class="contain">
+                    <el-col class="section1 section" >
+                        <el-col class="title">会议预约列表</el-col>
+                        <el-table :data="meetimgMsg.order" border style="width: 100%;height:104px" class="scroll"  id="table1" v-infinite-scroll="moreMeetimgMsg1">
+                            <el-table-column prop="meetingStartTime,meetingEndTime" label="预约使用日期" width="240">
+                                <template  slot-scope="scope">
+                                    {{scope.row.meetingStartTime}} ~ {{scope.row.meetingEndTime}}
+                                </template>  
+                            </el-table-column>
+                            <el-table-column prop="meetingRoomName" label="会议名称" width="80"></el-table-column>
+                            <el-table-column prop="markPerson" label="预约人"> </el-table-column>
+                        </el-table>
+                    </el-col>
+                    <el-col class="section2 section">
+                        <el-col class="title" style="width:20%">历史会议信息</el-col>
+                        <el-date-picker
+                            v-model="time"
+                            type="datetimerange"
+                            range-separator="~"
+                            start-placeholder="开始时间"
+                            end-placeholder="结束时间"
+                            @change="changeDate"
+                            >
+                        </el-date-picker>
+                        <el-table :data="meetimgMsg.history" border style="width: 100%;height:80px" class="scroll"  v-infinite-scroll="moreMeetimgMsg2">
+                            <el-table-column prop="meetingRoomName" label="会议名称" width="64"></el-table-column>
+                            <el-table-column prop="meetingStartTime,meetingEndTime" label="会议时间" width="234">
+                                <template  slot-scope="scope">
+                                    {{scope.row.meetingStartTime}} ~ {{scope.row.meetingEndTime}}
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="signPerson" label="应到人数" width="64"> </el-table-column>
+                            <el-table-column prop="realityPerson" label="实到人数" width="64"> </el-table-column>
+                        </el-table>
+                    </el-col>
+                </el-col> -->
+            </el-row>
+            <el-row class="equipment commonWidth" v-if="equipment.state"><!--设备信息弹框-->
+                <el-col class="top">
+                    <el-col class="title">
+                        <img src="../../../assets/image/arrow.png" alt="" />
+                        <span>设备信息</span>
+                        <img src="../../../assets/image/icon1.png" alt="" class="equipment-icon"/>
+                    </el-col>
+                    <p class="close" @click="close"></p>
+                </el-col>
+                <el-col class="contain">
+                    <el-col class="title"><span class="type">设备名称：</span><span class="data">{{equipment.equipmentMessage.deviceName ? equipment.equipmentMessage.deviceName : "--"}}</span></el-col>
+                    <el-col class="title"><span class="type">设备类型：</span><span class="data">{{equipment.equipmentMessage.deviceType ? equipment.equipmentMessage.deviceType : "--"}}</span></el-col>
+                    <el-col class="title"><span class="type">设备编号：</span><span class="data">{{equipment.equipmentMessage.registerDeviceId ? equipment.equipmentMessage.registerDeviceId : "--"}}</span></el-col>
+                    <el-col class="title"><span class="type">楼层：</span><span class="data">{{equipment.equipmentMessage.floorUuid ? equipment.equipmentMessage.floorUuid : "--"}}</span></el-col>
+                    <el-col class="title"><span class="type">绑定时间：</span><span class="data">{{equipment.equipmentMessage.createTime ? equipment.equipmentMessage.createTime : "--"}}</span></el-col>
+                </el-col>
+            </el-row>
+            <!-- <el-row class="xinfa commonWidth" v-if="xinfa.state">
+                <el-col class="top">
+                    <el-col class="title">
+                        <img src="../../../assets/image/arrow.png" alt="" />
+                        <span>2楼东电梯信息终端</span>
+                        <img src="../../../assets/image/icon1.png" alt="" class="equipment-icon"/>
+                    </el-col>
+                    <p class="close" @click="close"></p>
+                </el-col>
+                <el-col class="contain">
+                    <el-col class="module1">
+                        <div class="title">设备工况</div>
+                        <div class="wrap">
+                            <span class="span1"></span>
+                            <span class="span2"></span>
+                        </div>
+                    </el-col>
+                    <el-col class="module2">
+                        <div class="title">设备控制</div>
+                        <div class="wrap">
+                            <span class="span1"></span>
+                            <span class="span2"></span>
+                        </div>
+                    </el-col>
+                </el-col>
+            </el-row> -->
+            <el-row class="music commonWidth" v-if="music.state"><!--背景音乐弹框-->
+                <el-col class="top">
+                    <el-col class="title">
+                        <img src="../../../assets/image/arrow.png" alt="" />
+                        <span class="title">背景音乐</span>
+                    </el-col>
+                    <p class="close" @click="close" ></p>
+					<!-- <p class="close" @click="centerDialogVisible = false" data="22"></p> -->
+                </el-col>
+                <el-col class="contain scroll" >
+                    <el-col class="section1 section">
+                        <el-table :data="music.musicTableData" border style="width: 100%;" >
+                            <el-table-column prop="playTime" label="播放时间" width="220"></el-table-column>
+                            <el-table-column prop="playContent" label="播放内容" ></el-table-column>
+                        </el-table>
+                    </el-col>
+                </el-col>
+            </el-row>
+            <el-row class="video commonWidth" v-if="video.state"><!--视屏监控弹框-->
+                <el-col class="top">
+                    <el-col class="title">
+                        <img src="../../../assets/image/arrow.png" alt="" />
+                        <span>视频监控</span>
+                        <img src="../../../assets/image/icon2.png" alt="" class="equipment-icon"/>
+                    </el-col>
+                    <p class="close" @click="close"></p>
+                </el-col>
+                <el-col class="contain">
+                    <video v-if="video.play"
+                        :id="video.videoId"  
+                        class="video-js vjs-default-skin videoPaly" 
+                        preload="auto" 
+                        autoplay="autoplay" 
+                        :src="video.videoUrl" type="application/x-mpegURL">
+                    </video>
+                    <div class="videoNo" v-if="video.videoNo">
+                        <img src="../../../assets/image/video.png"   alt="">
+                        <p>摄像头设备参数暂未接入</p>
+                    </div>
+                    
+                </el-col>
+                
+            </el-row>
+        <!-- </el-dialog> -->
+  </div>
+</template>
+<script>
+import 'video.js/dist/video-js.css'
+// import videojs from 'video.js'
+import 'videojs-contrib-hls'
+import "@videojs/http-streaming"
+import { meetingPageApi, meetingStatusApi, videoUrl } from "@/plugins/api"
+export default {
+    props:['resInfo',"close2"],
+    data() {
+        return {
+            centerDialogVisible: true,
+            warning:{//推送告警
+                "state":false,
+                "warningMessage":{},
+            },
+            equipment:{//设备信息
+                "state":false,
+                "equipmentMessage":{
+                    "deviceName": undefined,
+                    "deviceType": undefined,
+                    "createTime": undefined,
+                    "registerDeviceId":undefined,
+                },
+            },
+            meeting:{//会议
+                "meetingState":false,
+                "meetimgMessage":{ 
+                    "status":undefined,
+                    "meeting":false, //
+                    "order":[], //预约列表数据
+                    "history":[], //历史信息列表数据
+                    "meetingForm1":{ //预约列表form
+                        current:1,
+                        size:10,
+                        startTime:undefined,
+                        endTime:undefined,
+                        roomId:109,
+                    }, 
+                    "meetingForm2":{ //历史信息列表form
+                        current:1,
+                        size:10,
+                        startTime:undefined,
+                        endTime:undefined,
+                        roomId:109,
+                    }, 
+                    "moreHistoryNo":false,
+                    "moreOrderNo":false,
+                },
+
+            },
+            video:{//视频
+                "state":false,
+                "play":false,
+                "videoId":"video" + Date.now(),
+                "videoUrl":false,
+                "videoNo":false,
+                "videoImg":require("../../../assets/image/video.jpg"),
+                "vedioData":[
+                    // {"title": "3层东楼梯","cameraIndexCode":"4db3dfbea6894b02a24673147a64d6c5","path":"",},
+                ]
+            },
+            music:{//音乐
+                "state":false,
+                "musicTableData":[
+                    {"playTime":"2021-11-15 09:00:00","playContent":"时光对面的我"},
+                    {"playTime":"2021-11-15 10:00:00","playContent":"守护我的光"},  
+                ],
+            },
+            time:[],
+        }
+    },
+    // computed:{
+    //     resInfo(){
+    //         return this.getData()
+    //     },
+    // },
+    watch: {
+        resInfo(){
+            this.getData()
+        },
+        close2(){
+            this.close()
+        },
+        // immediate: true
+        // deep: true,//深度监听
+        // immediate: true//immediate设为true后，则监听的这个对象会立即输出，也就是说一刷新页面就会在控制台输出，
+    },
+    mounted(){
+        this.getData()
+    },
+    methods: {
+    videoPlay(){
+        this.$nextTick(() => {
+            let list = videojs(this.video.videoId , {
+                events: [],
+                playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
+                autoplay: "true", // 如果true,浏览器准备好时开始回放。
+                controls: true, //  控制条
+                preload: 'auto', // 视频预加载
+                muted: true, //  默认情况下将会消除任何音频。
+                loop: false, // 导致视频一结束就重新开始。
+                language: 'zh-CN',
+                controlBar: {
+                    timeDivider: true,
+                    durationDisplay: true
+                },
+                aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+                sources: [{
+                    type: 'application/x-mpegURL',
+                    src: this.videoUrl
+                }],
+                hls: true, // 启用hls？
+                poster: video.videoImg, // 你的封面地址
+                width: document.documentElement.clientWidth,
+                notSupportedMessage: '此视频暂无法播放，请稍后再试'
+            }, function () {
+                this.play() // 自动播放
+            })
+        })
+    },
+    getData(){
+        this.video.videoId = "video" + Date.now()
+        if(this.resInfo.warningState){//推送告警
+            this.warning.state = true
+		    this.warning.warningMessage = this.resInfo.warningMessage
+            if(this.timeout){
+                clearTimeout(this.timeout)
+            }
+            this.timeout = setTimeout(() => {
+                this.warning.state = false
+                this.close()
+            }, 3000);
+        }else if(this.resInfo.meetingState){//会议
+            console.log("会议更新")
+            //会议状态
+                meetingStatusApi({"rootName":this.meetimg.meetimgMessage.meetingForm1.roomId}).then(res =>{
+                    this.meetimg.state = res.data
+                })
+            //会议列表、历史会议
+            var myDate = new Date();
+            let Year = myDate.getFullYear();
+            let Month = myDate.getMonth() + 1;
+            let Day= myDate.getDate()
+            if(Month<10){
+                Month = '0' + Month
+            }else{
+                Month = Month
+            }
+            if(Day<10){
+                Day = '0' + Day
+            }else{
+                Day = Day
+            }
+            this.meetimg.meetimgMessage.meetingForm1.current = 1
+            this.meetimg.meetimgMessage.meetingForm2.current = 1
+            this.meetimg.meetimgMessage.meetingForm1.startTime = Year + '-' + Month + '-' + Day + " 00:00:00"
+            this.meetimg.meetimgMessage.meetingForm1.endTime = Year + '-' + Month + '-' + Day + " 23:59:59"
+                meetingPageApi(this.meetimg.meetimgMessage.meetingForm1).then(res =>{
+                    this.meetimg.meetimgMessage.meeting = true
+                    this.meetimg.meetimgMessage.order = res.data.records
+                })
+                meetingPageApi(this.meetimg.meetimgMessage.meetingForm2).then(res =>{
+                    this.meetimg.meetimgMessage.history = res.data.records
+                })
+            
+            
+        }else if(this.resInfo.equipmentState){//设备
+            console.log("点位设备")
+            this.equipment.state = true
+            this.equipment.equipmentMessage = this.resInfo.equipmentMessage
+        }else if(this.resInfo.videoState){//视频
+            if(this.resInfo.videoMessage){
+                videoUrl({"cameraIndexCode":this.resInfo.videoMessage.data.registerDeviceId,"protocol":"hls"}).then(res =>{ // 点位摄像头视频
+                    console.log("摄像头绑定")
+                    if(res.data != null){
+                        this.video.videoUrl = res.data.url
+                        this.video.state = true
+                        this.video.play = true
+                        this.videoNo = false
+                        this.videoPlay()
+                    }
+                })
+            }else{
+                console.log("摄像头未绑定")
+                this.video.state = true
+                this.video.videoNo = true
+                this.video.play = false
+            }
+        }else{
+
+        }
+    },
+    changeDate(){
+        this.meetimg.meetimgMessage.meetingForm2.current = 1
+		this.dataChange()
+        meetingPageApi(this.meetimg.meetimgMessage.meetingForm2).then(res =>{
+            this.meetimg.meetimgMessage.history = res.data.records
+        })
+    },
+    dataChange(){//时间转化
+        if(this.time.length>0){
+            var myDate1 = this.time[0];
+            let Year1 = myDate1.getFullYear();
+            let Month1 = myDate1.getMonth() + 1;
+            let Day1= myDate1.getDate()
+            if(Month1<10){
+            Month1 = '0' + Month1
+            }else{
+            Month1 = Month1
+            }
+            if(Day1<10){
+            Day1 = '0' + Day1
+            }else{
+            Day1 = Day1
+            }
+            this.meetimg.meetimgMessage.meetingForm2.startTime = Year1 + '-' + Month1 + '-' + Day1 + " 00:00:00"
+            var myDate2 = this.time[1];
+            let Year2 = myDate2.getFullYear();
+            let Month2 = myDate2.getMonth() + 1;
+            let Day2= myDate2.getDate()
+            
+            if(Month2<10){
+            Month2 = '0' + Month2
+            }else{
+            Month2 = Month2
+            }
+            if(Day2<10){
+            Day2 = '0' + Day2
+            }else{
+            Day2 = Day2
+            }
+            this.meetimg.meetimgMessage.meetingForm2.endTime = Year2 + '-' + Month2 + '-' + Day2 + " 23:59:59"
+        }
+	},
+    moreMeetimgMsg1() { //预约列表滑动加载
+		console.log('触发预约列表滑动加载事件')
+		this.meetimg.meetimgMessage.meetingForm1.current ++
+		meetingPageApi(this.meetimg.meetimgMessage.meetingForm1).then(res =>{
+			if(res.data.records.length>0){
+                let data = res.data.records
+                for(let i =0;i<data.length; i++){
+                    this.meetimg.meetimgMessage.order.push(data[i])
+                }
+			}else{
+				this.meetimg.meetimgMessage.meetingForm1.current --
+			}
+		})
+	},
+    moreMeetimgMsg2() { //历史会议信息列表滑动加载
+		console.log('触发历史会议信息滑动加载事件')
+        this.dataChange()
+		this.meetimg.meetimgMessage.meetingForm2.current ++
+		meetingPageApi(this.meetimg.meetimgMessage.meetingForm2).then(res =>{
+			if(res.data.records.length>0){
+                let data = res.data.records
+                for(let i =0;i<data.length; i++){
+                    this.meetimg.meetimgMessage.history.push(data[i])
+                }
+			}else{
+				this.meetimg.meetimgMessage.meetingForm2.current --
+			}
+		})
+	},
+	close(){
+        console.log(11)
+		this.warning.state = false
+		this.music.state = false
+		this.meeting.meetimgMessage.meeting = false
+        this.equipment.state = false
+        this.video.state = false
+        this.video.play = false
+        this.video.videoId = false
+        this.video.videoNo = false
+        this.$emit("close",false)
+	}
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.Spring-frame {
+    position: absolute;
+	width:50%;
+	top:20%;
+	left:25%;
+	margin:0 auto;
+    .warning{
+        width:389px;
+        height:126px;
+        margin:0 auto;
+        background: url('../../../assets/image/warning-bg.png') ;
+        background-size: 389px 126px;
+        .contain{
+            width:58%;
+            margin:6% 0 0 35%;
+            line-height: 22px;
+            color:#fff;
+            font-size: 12px;
+            .title{
+                font-size: 12px;
+            }
+            .content{
+                margin-top:0px;
+            }
+        }
+		// .close{
+		//     width:16px;
+		//     height:16px;
+		//     background: url('../../../assets/image/close2.png') no-repeat;
+		//     position: absolute;
+		// 	top:8px;right:6px;
+		// }
+    }
+    .commonWidth{
+        width:450px;
+        display: block;
+        margin:0 auto; 
+        .top{
+            height: 39px;
+            line-height: 35px;
+            background: rgba(28,82,216,.5);
+            border: 1px solid #1C52D8;
+            border-bottom:none;
+            border-radius: 4px 4px  0 0;
+            .title{
+                width:50%;
+                font-size: 16px;
+                margin-left:16px;
+                vertical-align: middle;
+                color:#38E7EE;
+                vertical-align: middle;
+                img{
+                    margin-right:4px;
+                    vertical-align: middle;
+                }
+                span{
+                    margin-left:16px;
+                    vertical-align: middle;
+                }
+                .equipment-icon{
+                    width:16px;
+                    position: absolute;
+                    top:16px;
+                    right:45%;
+                }
+            }
+            .close{
+                width:16px;
+                height:16px;
+                background: url('../../../assets/image/close.png') ;
+                float:right;
+                margin:12px 6px 0 0;
+            }
+        } 
+    }
+    .meeting,.music{
+        height:300px;
+        .contain{
+            height:300px;
+            background-color:rgba(0,22,103,.85);
+            border-radius: 0 0 4px 4px;
+            overflow: hidden;
+            .section{
+                padding:10px;
+                font-size: 14px;
+                font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
+                font-weight: bold;
+                text-align: left;
+                color: #ffffff;
+                line-height: 30px;
+                
+            }
+            .title{
+                margin-bottom:4px;
+            }
+            .section2 .title{
+                width:auto;
+                display: inline-block;
+                margin-right:10px;
+                vertical-align: middle;
+                // margin-bottom:2px;
+            }
+        }
+    }
+    .equipment{
+        .contain{
+            padding: 10px 10px 25px;
+            background-color:rgba(0,22,103,.85);
+            border-radius: 0 0 4px 4px;
+            overflow: hidden;
+            .title{
+                margin-top:10px;
+                font-size: 14px;
+                letter-spacing: 1px;
+                .type{
+                    width:25%;
+                    text-align: right;
+                    display: inline-block;
+                }
+                .data{
+                    width:75%;
+                    text-align: left;
+                    display: inline-block;
+                    vertical-align: top;
+                }
+            }
+        }
+    }
+    .video{
+        .contain{
+            background-color:rgba(0,22,103,.85);
+            border-radius: 0 0 4px 4px;
+            overflow: hidden;
+            .videoPaly{
+                width:100%;
+            }
+            .videoNo{
+                margin: 10% auto;
+                img{
+                    height:97px;
+                    width:102px;
+                    display: block;
+                    margin: 0 auto;
+                }
+                p{
+                    text-align: center;
+                    font-size: 12px;
+                    color:#fff;
+                    margin-top:3%;
+                }
+                
+            }
+        }
+        
+    }
+}
+.scroll{
+    overflow-y: scroll;
+    overflow-x: hidden;
+}
+::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width : 0px;  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 1px;
+  overflow: hidden;
+}
+::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 1px;
+  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background   : rgba(28,82,216,1);
+}
+::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 1px;
+  background   : #ededed;
+}
+
+// 对话框
+/deep/ .el-dialog{
+    background-color: transparent;
+    top:15%;
+}
+/deep/ .el-dialog__header{
+    padding:0;
+    padding-bottom:0;
+}
+/deep/ .el-dialog__body{
+    padding:0;
+}
+/deep/ .el-dialog__headerbtn .el-dialog__close{
+    display: none;
+}
+
+
+// table
+/deep/ .el-table--group, /deep/ .el-table--border{
+    border:none;
+}
+/deep/ .el-table thead{
+    color:#fff;
+    background-color: rgba(28,82,216,.2);
+}
+
+/deep/ .el-table--border th{
+    border:1px solid #fff;
+    border-bottom:none;
+}
+
+/deep/ .el-table--border td{
+    border:1px solid #fff
+}
+ /deep/  .el-table, .el-table__expanded-cell {
+    background-color: transparent;//这是设置透明背景色
+    color:#fff;
+    border-collapse: collapse;
+    
+  }
+/deep/ .el-table tr, /deep/ .el-table th, /deep/ .el-table td{
+      background-color: transparent;//这是设置透明背景色
+      font-size: 10px;
+      padding:0;
+}
+/deep/ .el-table__empty-text{
+    color:#fff;
+    font-size: 10px;
+    letter-spacing: 2px;
+}
+
+
+// data
+/deep/ .el-date-editor{
+    border:1px solid #ccc;
+    background-color: transparent;
+    height:25px;
+    line-height: 20px;
+    padding:0;
+    margin-top:2px;
+    box-sizing: border-box;
+}
+/deep/ .el-range-input, /deep/ .el-input__icon el-range__close-icon{
+    background-color: transparent;
+    color:#fff;
+    font-size: 12px;
+    text-align: top;
+    padding:0;
+    position: relative;
+    top:-4px
+}
+/deep/ .el-range__icon{
+    display: none;
+}
+/deep/ .el-date-editor--datetimerange.el-input__inner{
+    width:77%;
+    
+    display: inline-block;
+    
+}
+/deep/ ::placeholder{
+    color:#fff
+}
+/deep/ .el-range-separator{
+    color:#fff;
+    position: relative;
+    top:-4px
+}
+/deep/table,/deep/ tr,/deep/ td{
+    border-collapse: collapse !important;
+}
+/deep/ tr:hover, /deep/ td:hover, /deep/ table:hover{
+    background-color: none !important;
+}
+/deep/ .el-table__empty-block{
+    border:1px solid #fff;
+}
+/deep/ .el-table tbody tr:hover>td { 
+    background-color:transparent
+}
+</style>

src/components/SD-school/access-control/index.vue

@@ -3,36 +3,34 @@
     <el-row class="headerBox">
       <el-col class="title">
         <img src="../../../assets/image/arrow.png" alt="" />
-         {{resInfo.typeName || ''}}
+         门禁系统
       </el-col>
     </el-row>
     <el-row class="threeBox">
       <div class="flexBoxE">
         <el-row>
-          <el-col style="margin-bottom: 50px;">
+          <el-col style="margin:10px 0 20px 0;">
             <span>进门总数</span>
-            <div class="progress">
+            <div class="progress" v-if="resList.intoCount && resList.outCount">
               <div class="percentage" 
               :style="{
-                width: (resList.length > 0 && resList.reduce((a, b) => a + b.into, 0) / resList.reduce((a, b) => a + b.into + b.out, 0) * 100 || 0) + '%', 
+                width: (resList.intoCount / Number(resList.intoCount + resList.outCount)) * 100  + '%', 
                 background: `linear-gradient(to right, #C41825 0%,#E4AB33 100%)`
                 }"></div>
-              <span class="percentageValue">{{resList.length > 0 && resList.reduce((a, b) => a + b.into, 0) || 0}}</span>
+             <span class="percentageValue">{{resList.intoCount || 0}}</span>
             </div>
           </el-col>
           <el-col>
             <span>出门总数</span>
-            <div class="progress">
+            <div class="progress" v-if="resList.intoCount && resList.outCount">
               <div class="percentage" 
               :style="{
-                width: (resList.length > 0 && resList.reduce((a, b) => a + b.out, 0) / resList.reduce((a, b) => a + b.into + b.out, 0) * 100 || 0) + '%', 
+                width: (resList.outCount / Number(resList.intoCount + resList.outCount)) * 100  + '%', 
                 background: `linear-gradient(to right, #1C2AB0 0%,#33B8E4 100%)`
               }"></div>
-              <span class="percentageValue">
-                {{resList.length > 0 && resList.reduce((a, b) => a + b.out, 0) || 0}}
-              </span>
+              <span class="percentageValue">{{resList.outCount || 0}}</span>
             </div>
-          </el-col>
+          </el-col> 
         </el-row>
       </div>
     </el-row>
@@ -41,15 +39,21 @@
 
 <script>
 export default {
-  props:['resInfo'],
+  props:['resInfo', 'websocket'],
   data() {
     return {
-      resList:[]
+      resList:{
+		  "outCount":undefined,
+		  "intoCount":undefined
+	  }
     };
   },
   watch: {
     resInfo(){
       this.getData()
+    },
+    websocket(){
+      this.getData()
     }
   },
   mounted(){
@@ -57,12 +61,12 @@ export default {
   },
   methods: {
     async getData(){
-       let res = await this.$axios.get(this.resInfo.apiAddr + '?' +this.$qs.stringify({
-        applicationCode: this.resInfo.applicationCode
-      }))
-      if(res.success){
-		console.log(res)
-        this.resList = res.data
+      if(this.websocket.data){
+        this.resList.outCount = this.websocket.data.outCount
+        this.resList.intoCount = this.websocket.data.intoCount
+      }else{
+        this.resList.outCount = this.resInfo.outCount
+		    this.resList.intoCount = this.resInfo.intoCount
       }
     },
   },

src/components/SD-school/computer-room/echart.js

@@ -0,0 +1,63 @@
+import * as echarts from "echarts";
+
+export default function getData(params) {
+    let resList = params.map(val => {
+        return {
+            computerRoom: val.name,
+            temperature: val.temperature
+        }
+    })
+    return {
+        tooltip: {
+            trigger: 'axis',
+        },
+        grid: {
+            // x: "12%",//x 偏移量
+            y: "30%", // y 偏移量
+            // width: "87%", // 宽度
+            height: "50%" // 高度
+        },
+        xAxis: [{
+            type: 'category',
+            data: resList.map(val => val.computerRoom),
+            axisTick: {
+                alignWithLabel: true
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#fff',
+                    width: 1, //这里是为了突出显示加上的  
+                }
+            },
+        }],
+        yAxis: [{
+            type: 'value',
+            min: 0,
+            splitNumber: 3, // 控制刻度标签的数量
+            axisLine: {
+                lineStyle: {
+                    color: '#fff',
+                    width: 1, //这里是为了突出显示加上的  
+                }
+            },
+
+        }],
+        series: [{
+            name: 'Direct',
+            type: 'bar',
+            barWidth: '60%',
+            data: resList.map(val => val.temperature),
+            itemStyle: {
+                normal: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                        offset: 0,
+                        color: '#80FEFF'
+                    }, {
+                        offset: 1,
+                        color: '#3DF2B8'
+                    }]),
+                }
+            },
+        }]
+    }
+}

src/components/SD-school/computer-room/index.vue

@@ -0,0 +1,80 @@
+<template>
+  <el-row class="mianBox">
+    <el-row class="headerBox">
+      <el-col class="title">
+        <img src="../../../assets/image/arrow.png" alt="" />
+         机房平均温度
+      </el-col>
+    </el-row>
+    <el-row class="carLine">
+      <div ref="echartD" style="width:100%;height:100%;"></div>
+    </el-row>
+  </el-row>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import echartsGet from './echart'
+export default {
+  props:['resInfo'],
+  data() {
+    return {
+      resList: [],
+	    resList2: [],
+      data:[
+          { value: 0, hour: '机房1' },
+          { value: 40, hour: '机房2' },
+          { value: 50, hour: '机房3' },
+          { value: 80, hour: '机房4' },
+          { value: 90, hour: '机房5' },
+      ]
+    };
+  },
+  watch: {
+    "$store.state.windowWidth"() {
+      echarts.init(this.$refs.echartD).resize();
+    },
+    resInfo(){
+      this.getData()
+    },
+
+  },
+  mounted(){
+    this.getData()
+  },
+  methods:{
+    async getData(){
+      this.resList = this.resInfo
+      echarts.init(this.$refs.echartD).setOption(echartsGet(this.resList))
+		// let res = await this.$axios.get(this.resInfo.apiAddr + '?' +this.$qs.stringify({
+		// 	applicationCode: this.resInfo.applicationCode
+		// }))
+		// if(res.success){
+		// 	this.resList = res.data
+			//echarts.init(this.$refs.echartD).setOption(echartsGet(this.resList))
+		//}
+		// let res2 = await this.$axios.get('/top/listParkByDate')
+		// if(res2.success){
+		// 	this.resList2 = res2.data
+		// 	echarts.init(this.$refs.echartD).setOption(echartsGet(this.resList2))
+		// }
+    
+	},
+    resize() {
+      echarts.init(this.$refs.echartD).resize();
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.mianBox {
+  background: url("../../../assets/image/view2.png") no-repeat;
+  background-size: 100% 100%;
+  font-family: Impact Regular, Impact Regular-Regular;
+  .carLine {
+    flex: 1;
+    width: 100%;
+  }
+}
+</style>

src/components/SD-school/conference-room/index.vue

@@ -75,7 +75,6 @@ export default {
         applicationCode: this.resInfo.applicationCode
       }))
       this.resList = res.pageList
-	  console.log(this.resList)
       this.dataMap = res.pageList.list.map((val)=>{
         return {
           ...val,

src/components/AF-exhibition/screen-equipment/echart.js → src/components/SD-school/conference-room2/echart.js

@@ -1,7 +1,6 @@
 import * as echarts from "echarts";
 
 export default function getData(params) {
-    console.log(params)
     return {
         title: {
             show: true,
@@ -34,7 +33,7 @@ export default function getData(params) {
                     width: document.body.clientHeight > 1000 ? 20 : 15,
                     color: [
                         [
-                            (params.using / params.toatl) > 1 ? 1 : (params.using / params.toatl).toFixed(8),
+                            (params.using / params.toatl).toFixed(8) > 1 ? 1 : params.using / params.toatl.toFixed(8),
                             new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                 { offset: 0, color: "#ecc242" },
                                 { offset: 1, color: "#FDC51A" },
@@ -80,7 +79,7 @@ export default function getData(params) {
                     fontFamily: 'Impact Regular, Impact Regular-Regular',
                 },
                 formatter: function() {
-                    return params.toatl || 0;
+                    return params.toatl;
                 },
             },
             data: [{

src/components/AF-exhibition/screen-equipment/index.vue → src/components/SD-school/conference-room2/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <el-row class="mianBox mianBox-af">
+  <el-row class="mianBox">
     <el-row class="headerBox">
       <el-col class="title">
-        <img src="../../../assets/image-af/title4.png" alt="" />
+        <img src="../../../assets/image/arrow.png" alt="" />
         {{resInfo.typeName || ''}}
       </el-col>
     </el-row>
@@ -60,7 +60,7 @@ export default {
   watch: {
     "$store.state.windowWidth"() {
       echarts.dispose(this.$refs.echartD)
-      echarts.init(this.$refs.echartD).setOption(echartsGet(echartsGet(this.resList)))
+      echarts.init(this.$refs.echartD).setOption(echartsGet(this.resList))
     },
     resInfo(){
       this.getData()
@@ -93,6 +93,8 @@ export default {
 
 <style lang="scss" scoped>
 .mianBox {
+  background: url("../../../assets/image/view2.png") no-repeat;
+  background-size: 100% 100%;
   .roomLine {
     flex: 1;
     width: 100%;
@@ -125,7 +127,7 @@ export default {
   }
   .roomTable {
     height: 90px;
-    padding: 10px;
+    padding: 10px 0 0;
     width: 100%;
   }
 }

src/components/SD-school/emergency-disaster-prevention/echart.js

@@ -0,0 +1,62 @@
+export default function getData(data, type) {
+    let totle = data[0].total
+    return {
+        color: [
+            '#FDC51A',
+            '#1AF3FD'
+        ],
+        title: {
+            text: "报警数",
+            x: "27%",
+            y: "53%",
+            textStyle: {
+                fontSize: 14,
+                color: "#fff"
+            }
+        },
+        tooltip: {
+            trigger: 'item',
+            formatter: '{b}  {d}%',
+        },
+        emphasis: {
+            label: {
+                show: false,
+                fontSize: '40',
+                fontWeight: 'bold'
+            }
+        },
+        graphic: {
+            type: "text",
+            left: "30%",
+            top: "40%",
+            style: {
+                text: totle,
+                textAlign: "center",
+                fill: "#FF3A05",
+                fontSize: 18,
+                fontWeight: 800,
+            }
+        },
+        series: [{
+            // name: '访问来源',
+            type: 'pie',
+            radius: ['50%', '80%'],
+            center: ["40%", "50%"],
+            avoidLabelOverlap: false,
+            label: {
+                show: type === 'alarm',
+                position: 'inner',
+                fontSize: 12,
+                align: "right",
+                overflow: "truncate",
+                baseline: "middle",
+                color: '#FFF',
+                normal: {
+                    position: 'inner',
+                    show: false
+                }
+            },
+            data: data,
+        }]
+    }
+}

src/components/SD-school/emergency-disaster-prevention/index.vue

@@ -0,0 +1,146 @@
+<template>
+  <el-row class="mianBox">
+    <el-row class="headerBox">
+      <el-col class="title">
+        <img src="../../../assets/image/arrow.png" alt="" />
+        应急防灾
+      </el-col>
+    </el-row>
+    <el-row class="content-wrap">
+      <el-row class="content">
+          <div ref="echartD" style="width:100%;height:150px;"></div>
+      </el-row>
+      <el-row class="bot">
+          <el-col class="leftBot">
+              <el-col>待处理数</el-col>
+              <el-col>{{resList[0].value}}</el-col>
+          </el-col>
+          <el-col class="rightBot">
+              <el-col>已处理数</el-col>
+              <el-col>{{resList[1].value}}</el-col>
+          </el-col>
+      </el-row>
+    </el-row>
+    
+  </el-row>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import echartsGet from './echart'
+export default {
+  props:['resInfo'],
+  data() {
+    return {
+      isCheck: "alarm",
+      resList:[
+        {},
+        {}
+      ]
+    };
+  },
+  watch: {
+    "$store.state.windowWidth"() {
+      echarts.init(this.$refs.echartD).resize();
+    },
+    resInfo(){
+      this.getData()
+    }
+  },
+  mounted(){
+    this.getData()
+  },
+  methods:{
+    async getData(){
+      if(this.resInfo.websocket){
+
+      }else{
+        let arr = [{},{}]
+          arr[0] = {"name":"待处理数", "value":this.resInfo.meetNoDeal,"total":this.resInfo.meetNoDeal + this.resInfo.meetDeal}
+          arr[1] = {"name":"已处理数", "value":this.resInfo.meetDeal,"total":this.resInfo.meetNoDeal + this.resInfo.meetDeal}
+          this.resList = arr
+      }
+      // let res = await this.$axios.get(this.resInfo.apiAddr + '?' +this.$qs.stringify({
+      //   applicationCode: this.resInfo.applicationCode
+      // }))
+      this.enidCheck()
+    },
+    enidCheck(val){
+      val && (this.isCheck = val)
+      // this.totleNumber = this.resList[this.isCheck].length > 0 && this.resList[this.isCheck].reduce((a, b) => a + b.normal, 0) || 0;
+      // this.annormalNumber = this.resList[this.isCheck].length > 0 && this.resList[this.isCheck].reduce((a, b) => a + b.annormal, 0) || 0;
+      // echarts.init(this.$refs.echartD).setOption(echartsGet(this.resList[this.isCheck],this.isCheck))
+      echarts.init(this.$refs.echartD).setOption(echartsGet(this.resList,this.isCheck))
+    },
+    resize() {
+      echarts.init(this.$refs.echartD).resize();
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.mianBox {
+  background: url("../../../assets/image/view1.png") no-repeat;
+  background-size: 100% 100%;
+  .el-row {
+    flex: none;
+  }
+  .content-wrap{
+    display: flex;
+    padding:0px 30px;
+    .content {
+      flex: 1;
+      width: 100%;
+      height: 90px;
+      box-sizing: border-box;
+    }
+    .bot {
+      flex: 1;
+      height: 90px;
+      // width: 50%;
+      & > .el-col {
+        padding: 15px;
+        color: #FFF;
+        background: url("../../../assets/image/box2.png") no-repeat;
+        background-size: 100% 100%;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        margin-top:10px;
+        .el-col{
+            width: auto;
+        }
+      }
+      .leftBot{
+        line-height: 26px;
+        &>.el-col:first-child{
+            color: #fff;
+            font-size: 18px;
+            font-family: Impact Regular, Impact Regular-Regular;
+        }
+        &>.el-col:last-child{
+            font-size: 26px;
+            color: #FDC51A;
+            margin-left:20px;
+        }
+      }
+      .rightBot{
+        line-height: 26px;
+        &>.el-col:first-child{
+            color: #fff;
+            font-size: 18px;
+            font-family: Impact Regular, Impact Regular-Regular;
+        }
+        &>.el-col:last-child{
+            font-size: 26px;
+            color: #1AF3FD;
+            margin-left:20px;
+
+        }
+      }
+    }
+  }
+  
+}
+</style>

src/components/SD-school/give-an-alarm/index.vue

@@ -3,11 +3,11 @@
     <el-row class="headerBox">
       <el-col class="title">
         <img src="../../../assets/image/arrow.png" alt="" />
-         {{resInfo.typeName || ''}}
+         综合告警列表
       </el-col>
     </el-row>
-    <el-form ref="form" :model="form" inline label-width="40px" v-if="false">
-      <el-form-item label="时间">
+    <el-form ref="form" :model="form" inline label-width="40px" >
+      <el-form-item label="时间" >
           <el-date-picker
           v-model="form.valueTime"
           class="dataComponent"
@@ -18,102 +18,364 @@
           prefix-icon
           start-placeholder="开始日期"
           end-placeholder="结束日期"
-          @change="dateTimeChange"
+          @change="changeDate"
         >
         </el-date-picker>
       </el-form-item>
-      <el-form-item label="类型">
-        <el-select v-model="form.region" placeholder="请选择类型" size="mini">
-          <el-option label="类型一" value="shanghai"></el-option>
-          <el-option label="类型二" value="beijing"></el-option>
+      <el-form-item label="类型" >
+        <el-select v-model="a" placeholder="请选择类型" size="mini" @change="changeSelect">
+          <el-option :label="item.name" :value="item.code" v-for="(item, index) in type" :key="index" ></el-option>
         </el-select>
       </el-form-item>
     </el-form>
     <el-row class="threeBox">
-      <el-table :data="resList" class="transparentTableRow" height="100%" style="width: 100%; margin: 0 auto">
-        <!-- min-width="20" -->
-        <el-table-column show-overflow-tooltip v-for="item in headerData" :key="item.prop" :prop="item.prop" align="center" :label="item.name"></el-table-column>
+		<!-- :row-class-name="tableRowClassName" -->
+      <el-table 
+	  :data="resList" 
+	  class="transparentTableRow el-table__body-wrapper1" 
+	  height="100%" style="width: 100%; margin: 0 auto" 
+	  v-loadmore="loadMore" 
+	  @row-click = "column">
+        <el-table-column show-overflow-tooltip 
+			v-for="item in headerData" 
+			:key="item.prop" 
+			:prop="item.prop" 
+			align="center" 
+			:label="item.name"
+		>
+		
+		</el-table-column>
+		
       </el-table>
+	  
     </el-row>
+	<!-- <p v-if="moreNo" class="moreNo">没有最新的数据了</p> -->
   </el-row>
 </template>
-
 <script>
+import { typeApi, shebeifyApi } from "@/plugins/api";
 export default {
-  props:['resInfo'],
+  props:['resInfo','websocket'],
   data() {
     return {
+	  a:undefined,
       ws: null,
+	  systemCode:undefined,
+	  type:{
+		  
+	  },
       form:{
         region:'',
         valueTime: [],
       },
+	  formS:{
+		  startTime:'',
+		  endTime:'',
+		  systemCode:"",
+		  current:"1",
+		  size:"10"
+	  },
       resList: [],
       headerData: [
-        { name: "点位", prop: "alarmDeviceName" },
-        { name: "告警时间", prop: "alarmTime" },
-        { name: "类型", prop: "deviceType" },
+        // { name: "点位", prop: "alarmDeviceName" },
+        { name: "时间", prop: "createTime" },
+        { name: "类型", prop: "systemCode" },
         { name: "内容详情", prop: "alarmContent" },
       ],
+	  moreNo:false
     };
   },
   watch: {
     resInfo(){
       this.getData()
+    },
+	websocket(){
+      this.getDataAdd()
     }
   },
   mounted(){
     this.getData()
   },
   methods: {
-    async getData(){
-      if ("WebSocket" in window) {
-        this.ws = new WebSocket("ws://" + this.$store.state.wsUrl + this.resInfo.apiAddr);
-		console.log(this.ws)
-        this.ws.onopen =  ()=> {
-          console.log("websocket连接成功");
-          this.sendWs({aa:22});
-        };
+	  column(e){
+		this.$emit("giveAnAlarmClick",e)
+	  },
+	  loadMore() {
+		console.log('触发滚动加载事件')
+		this.dataChange()
+		this.formS.current ++
+		shebeifyApi(this.formS).then(res =>{
+			if(res.data.records.length>0){
+				this.moreNo = false
+				for(let i =0; i<res.data.records.length; i++){
+					if(res.data.records[i].systemCode == 1){
+						res.data.records[i].systemCode = "Ba"
+					}else if(res.data.records[i].systemCode == 2){
+						res.data.records[i].systemCode = "停车场"
+					}else if(res.data.records[i].systemCode == 3){
+						res.data.records[i].systemCode = "应急防灾"
+					}else if(res.data.records[i].systemCode == 4){
+						res.data.records[i].systemCode = "门禁"
+					}else if(res.data.records[i].systemCode == 5){
+						res.data.records[i].systemCode = "视频监控"
+					}
+					if(res.data.records[i].alarmContent){
+						if(this.isJSON(res.data.records[i].alarmContent)){
+							let alarmContent = JSON.parse(this.resInfo[i].alarmContent)
+							res.data.records[i].alarmContent = alarmContent[0].dp[0].property 
+							// + " " +  alarmContent[0].dp[0].serial + " " +  alarmContent[0].dp[0].value + " " +  alarmContent[0].dp[0].status
+						}
+					}
+					
+				} 
+				for(let i=0;i<res.data.records.length;i++){
+					this.resList.push(res.data.records[i])
+				}
+			}else{
+				this.moreNo = true
+				this.formS.current --
+			}
+			
+		})
+		
+	  },  
+	  changeSelect(val){
+		  this.resList = []
+		  this.systemCode = val
+		  this.formS.current = 1
+		  this.dataChange()
+		  this.formS.systemCode = val
+		  shebeifyApi(this.formS).then(res =>{
+			for(let i =0; i<res.data.records.length; i++){
+				if(res.data.records[i].systemCode == 1){
+					res.data.records[i].systemCode = "Ba"
+				}else if(res.data.records[i].systemCode == 2){
+					res.data.records[i].systemCode = "停车场"
+				}else if(res.data.records[i].systemCode == 3){
+					res.data.records[i].systemCode = "应急防灾"
+				}else if(res.data.records[i].systemCode == 4){
+					res.data.records[i].systemCode = "门禁"
+				}else if(res.data.records[i].systemCode == 5){
+					res.data.records[i].systemCode = "视频监控"
+				}
+				if(this.isJSON(res.data.records[i].alarmContent)){
+					let alarmContent = JSON.parse(res.data.records[i].alarmContent)
+					res.data.records[i].alarmContent = alarmContent.dp[0].property
+					// + " " +  alarmContent[0].dp[0].serial + " " +  alarmContent[0].dp[0].value + " " +  alarmContent[0].dp[0].status
+				}
+			}  
+		  	this.resList = res.data.records
+		  })
+	  },
+	  dataChange(){//时间转化
+		  if(this.form.valueTime.length>0){
+			  var myDate1 = this.form.valueTime[0];
+			  let Year1 = myDate1.getFullYear();
+			  let Month1 = myDate1.getMonth() + 1;
+			  let Day1= myDate1.getDate()
+			  if(Month1<10){
+			    Month1 = '0' + Month1
+			  }else{
+			    Month1 = Month1
+			  }
+			  if(Day1<10){
+			    Day1 = '0' + Day1
+			  }else{
+			    Day1 = Day1
+			  }
+			  this.formS.startTime = Year1 + '-' + Month1 + '-' + Day1 + " 00:00:00"
+			  var myDate2 = this.form.valueTime[1];
+			  let Year2 = myDate2.getFullYear();
+			  let Month2 = myDate2.getMonth() + 1;
+			  let Day2= myDate2.getDate()
+			  
+			  if(Month2<10){
+			    Month2 = '0' + Month2
+			  }else{
+			    Month2 = Month2
+			  }
+			  if(Day2<10){
+			    Day2 = '0' + Day2
+			  }else{
+			    Day2 = Day2
+			  }
+			  this.formS.endTime = Year2 + '-' + Month2 + '-' + Day2 + " 23:59:59"
+		  }
+	  },
+	  changeDate(val){
+		this.resList = []
+		this.formS.current = 1
+		this.dataChange()
+		shebeifyApi(this.formS).then(res =>{
+			for(let i =0; i<res.data.records.length; i++){
+			  if(res.data.records[i].systemCode == 1){
+				res.data.records[i].systemCode = "Ba"
+			  }else if(res.data.records[i].systemCode == 2){
+				res.data.records[i].systemCode = "停车场"
+			  }else if(res.data.records[i].systemCode == 3){
+				res.data.records[i].systemCode = "应急防灾"
+			  }else if(res.data.records[i].systemCode == 4){
+				res.data.records[i].systemCode = "门禁"
+			  }else if(res.data.records[i].systemCode == 5){
+				res.data.records[i].systemCode = "视频监控"
+			  }
+			  if(this.isJSON(res.data.records[i].alarmContent)){
+					let alarmContent = JSON.parse(res.data.records[i].alarmContent)
+					res.data.records[i].alarmContent = alarmContent.dp[0].property
+					// + " " +  alarmContent[0].dp[0].serial + " " +  alarmContent[0].dp[0].value + " " +  alarmContent[0].dp[0].status
+				}
+			}
+			
+			this.resList = res.data.records
+		})
+	  },
+	  timestampToTime(timestamp) {
+         var  date =  new  Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
+         var Y = date.getFullYear() +  '-' ;
+         var M = (date.getMonth()+1 < 10 ?  '0' +(date.getMonth()+1) : date.getMonth()+1) +  '-' ;
+         var D = date.getDate() +  ' ' ;
+         var h = date.getHours() +  ':' ;
+         var m = date.getMinutes() +  ':' ;
+         var s = date.getSeconds();
+         return  Y+M+D+h+m+s;
+     },
 
-        this.ws.onmessage = (res) => {
-			console.log(this.resList)
-          this.resList.unshift(...JSON.parse(res.data).data).slice(0,100)
-        };
+	//   tableRowClassName({row}) {
+		
+	// 	if (new Date(row.createTime).getTime() + 30000 > Date.parse(new Date())) {
+	// 		return 'warning-row';
+	// 	}
+	// 	return 
 
-        this.ws.onclose = ()=> {
-          // 关闭 websocket
-          console.log("连接已关闭...");
-
-          //断线重新连接
-          setTimeout(() => {
-            this.getData();
-          }, 2000);
-        };
-      } else {
-        // 浏览器不支持 WebSocket
-        console.log("您的浏览器不支持 WebSocket!");
+	//   },
+	  
+	  
+	isJSON(str) {
+      if (typeof str === 'string') {
+        try {
+          let obj = JSON.parse(str);
+          if (typeof obj === 'object' && obj) {
+            return obj;
+          } else {
+            return false;
+          }
+        } catch (error) {
+          return false;
+        }
       }
-      //  let res = await this.$axios.get(this.resInfo.apiAddr + '?' +this.$qs.stringify({
-      //   applicationCode: this.resInfo.applicationCode
-      // }))
-      // if(res.success){
-      //   this.resList = res.data
-      // }
-    },
-    sendWs(val){
-      if (this.ws && this.ws.readyState == 1) {
-        this.ws.send(JSON.stringify(val));
-        console.log('发送成功')
-      } else {
-        setTimeout(() => {
-          this.sendWs(val);
-        }, 100);
-      }
-    },
-    dateTimeChange() {
-      
+	},
+
+
+    async getData(){
+		typeApi().then(res =>{ //综合信息统计 告警信息
+			this.type = res.data
+		})
+		for(let i =0; i<this.resInfo.length; i++){
+		  if(this.resInfo[i].systemCode == 1){
+			this.resInfo[i].systemCode = "Ba"
+		  }else if(this.resInfo[i].systemCode == 2){
+			this.resInfo[i].systemCode = "停车场"
+		  }else if(this.resInfo[i].systemCode == 3){
+			this.resInfo[i].systemCode = "应急防灾"
+		  }else if(this.resInfo[i].systemCode == 4){
+			this.resInfo[i].systemCode = "门禁"
+		  }else if(this.resInfo[i].systemCode == 5){
+			this.resInfo[i].systemCode = "视频监控"
+		  }
+
+			if(this.isJSON(this.resInfo[i].alarmContent)){
+				let alarmContent = JSON.parse(this.resInfo[i].alarmContent)
+				this.resInfo[i].alarmContent = alarmContent.dp[0].property 
+				// + " " +  alarmContent[0].dp[0].serial + " " +  alarmContent[0].dp[0].value + " " +  alarmContent[0].dp[0].status
+			}
+		}
+		this.resList = this.resInfo
+
     },
+	async getDataAdd(){
+		console.log(this.websocket)
+		if(this.websocket.data?.systemCode){
+			if(this.websocket.data.systemCode == 1){
+				this.websocket.data.systemCode = "Ba"
+			}else if(this.websocket.data.systemCode == 2){
+				this.websocket.data.systemCode = "停车场"
+			}else if(this.websocket.data.systemCode == 3){
+				this.websocket.data.systemCode = "应急防灾"
+			}else if(this.websocket.data.systemCode == 4){
+				this.websocket.data.systemCode = "门禁"
+			}else if(this.websocket.data.systemCode == 5){
+				this.websocket.data.systemCode = "视频监控"
+			}else{
+				
+			}
+		}
+		console.log(this.systemCode,this.websocket.data.systemCode)
+		if(this.systemCode){
+			if(this.websocket.data?.systemCode == this.systemCode){
+				if(this.websocket.describe =="infoAdd"){
+					this.websocket.data.createTime = this.timestampToTime(this.websocket.data.alarmTime)
+					let alarmContent = JSON.parse(this.websocket.data.alarmContent)
+					this.websocket.data.alarmContent = alarmContent.dp[0].property
+				}else{
+					if(this.websocket.data.alarmContent){
+						let alarmContent = JSON.parse(this.websocket.data.alarmContent)
+						this.websocket.data.createTime = this.timeFormat(alarmContent[0].timeStamp)
+						this.websocket.data.alarmContent = alarmContent.dp[0].property 
+						// + " " +  alarmContent[0].dp[0].serial + " " +  alarmContent[0].dp[0].value + " " +  alarmContent[0].dp[0].status
+					}
+				}
+				this.resList.unshift(this.websocket.data)
+			}
+		}else{
+			if(this.websocket.describe =="infoAdd"){
+				console.log(111)
+				let alarmContent = JSON.parse(this.websocket.data.alarmContent)
+				this.websocket.data.createTime = this.timestampToTime(this.websocket.data.alarmTime)
+				this.websocket.data.alarmContent = alarmContent.dp[0].property 
+			}else{
+				
+				if(this.websocket.data?.alarmContent){
+					let alarmContent = JSON.parse(this.websocket.data.alarmContent)
+					this.websocket.data.createTime = this.timeFormat(alarmContent[0].timeStamp)
+					this.websocket.data.alarmContent = alarmContent[0].dp[0].property 
+					// + " " +  alarmContent[0].dp[0].serial + " " +  alarmContent[0].dp[0].value + " " +  alarmContent[0].dp[0].status
+				}else{
+					if(this.websocket.data.alarams[0].deviceType == "01"){
+						this.websocket.data.systemCode ="Ba"
+					}else if(this.websocket.data.alarams[0].deviceType == "02"){
+						this.websocket.data.systemCode ="停车场"
+					}else if(this.websocket.data.alarams[0].deviceType == "03"){
+						this.websocket.data.systemCode ="应急防灾"
+					}else if(this.websocket.data.alarams[0].deviceType == "04"){
+						this.websocket.data.systemCode ="门禁"
+					}else if(this.websocket.data.alarams[0].deviceType == "05"){
+						this.websocket.data.systemCode ="视频监控"
+					}
+					this.websocket.data.createTime = this.timeFormat(this.websocket.data.timeStamp)
+					this.websocket.data.alarmContent = this.websocket.data.alarams[0].dp[0].property
+				}
+			}
+			this.resList.unshift(this.websocket.data)
+		}
+		this.$emit("giveAnAlarmClick",this.websocket.data)
+		
+	},
+    timeFormat(timestamp){
+		timestamp = timestamp * 1000
+		var time = new Date(timestamp);
+		var year = time.getFullYear();
+		var month = time.getMonth()+1;
+		var date = time.getDate();
+		var hours = time.getHours();
+		var minutes = time.getMinutes();
+		var seconds = time.getSeconds();
+		return year + '-' + this.addZero(month) + '-' + this.addZero(date) + ' ' + this.addZero(hours) + ':' + this.addZero(minutes) + ':' + this.addZero(seconds)
+	},
+	addZero(num) { return num < 10 ? '0' + num : num },
+    
   },
+  	
+
   destroyed(){
     // this.ws.close()
     // this.ws = null
@@ -135,7 +397,7 @@ export default {
     height: 40px;
     width: 100%;
     .el-select{
-      width: 110px;
+      width: 120px;
     }
   }
   /deep/.dataComponent {
@@ -164,5 +426,20 @@ export default {
       color: #fff;
     }
   }
+  /deep/ .el-table__empty-text{
+	  color:#fff;
+  }
+  .moreNo{
+	  background:rgba(0, 251, 251, 0.051) !important;
+	  text-align: center;
+	  padding:4px 0;
+  }
+}
+/deep/ .el-table .warning-row {
+    background:red !important;
 }
+/deep/ .gg {
+    background:rgba(0, 251, 251, 0.051)  !important;
+}
+
 </style>

src/components/SD-school/header-view/index.vue

@@ -4,37 +4,53 @@
       <el-col>{{ dateDay }}</el-col>
       <el-col class="time">{{ dataTime }}</el-col>
       <el-col class="weather">
-        <!-- <img v-if="weatherObj.weather_pic" :src="weatherObj.weather_pic || ''" alt="" /> -->
-        <!-- <span v-if="weatherObj.weather">{{ weatherObj.weather }} {{ weatherObj.temperature }}℃</span> -->
-        <img :src="$store.state.weaterRes.weather_pic || ''" alt="" />
+        <!-- <img v-if="weatherObj.weather_pic" :src="weatherObj.weather_pic || ''" alt="" />
+        <span v-if="weatherObj.weather">{{ weatherObj.weather }} {{ weatherObj.temperature }}℃</span> -->
+        <img :src="weatherObj.weather_pic || ''" alt="" />
       </el-col>
-      <el-col>{{$store.state.weaterRes.weather || ''}}{{$store.state.weaterRes.temperature || ''}}</el-col>
-      <el-col>{{$store.state.weaterRes.wind_direction || ''}}{{$store.state.weaterRes.wind_power || ''}}</el-col>
-      <el-col>PM2.5<span>{{$store.state.weaterRes.aqiDetail && $store.state.weaterRes.aqiDetail.pm2_5 || ''}}</span></el-col>
+      <el-col>{{weatherObj.weather || ''}}{{weatherObj.temperature || ''}}℃</el-col>
+      <el-col>{{weatherObj.wind_direction || ''}}{{weatherObj.wind_power || ''}}</el-col>
+      <el-col>PM2.5<span>{{weatherObj.aqiDetail && weatherObj.aqiDetail.pm2_5 || ''}}</span></el-col>
     </el-row>
-    <el-row class="headerCenterBox">山东IOT物联网平台</el-row>
+    <el-row class="headerCenterBox" title="中共山东省委党校（山东行政学院） 东校区二期综合培训楼">中共山东省委党校（山东行政学院）</el-row>
     <el-row class="headerRowBox"> 
-      <el-col>空气质量：{{$store.state.weaterRes.aqi || ''}}</el-col>
-      <el-col>相对湿度：{{$store.state.weaterRes.sd || ''}}</el-col>
+      <el-col>空气质量：{{weatherObj.aqi || ''}}</el-col>
+      <el-col>相对湿度：{{weatherObj.sd || ''}}</el-col>
+      <!-- <p v-if="isOff" @click="musicBgcontrol">背景音乐开启 {{musicTitle}}</p>
+      <p v-else @click="musicBgcontrol">背景音乐关闭{{musicTitle}}</p> -->
     </el-row>
+    <!-- <audio class="audio"  id="audio" :src="musicUrl" controls  autoplay="autoplay" hidden="true" @ended="handleNext()"></audio> -->
+    <!-- ;handleLyric() -->
   </header>
 </template>
 
 <script>
+import { aliWeather } from "@/plugins/api";
 export default {
   data() {
     return {
+      musicUrl:null,
+      musicTitle:null,
+      isOff:false, //背景音乐
       dateDay: "",
       dataTime: "",
       timeArea: "",
       weatherObj: {},
       dataWeekList: ["一", "二", "三", "四", "五", "六", "七"],
+      music:[
+        {"time":"2021-11-14 10:55:50","title":"时光对面的我","url":require("../../../assets/audio/sgdmdw.mp3")},
+        {"time":"2021-11-14 10:59:40","title":"守护我的光","url":require("../../../assets/audio/shwdg.mp3")},
+      ]
     };
   },
-  created() {},
+  created() {
+    this.getWeather()
+    // this.musicPlay()
+  },
   mounted() {
-    this.getData();
+
     setInterval(() => {
+      // this.getData();
       let day = new Date();
       this.dateDay =
         day.getFullYear() +
@@ -50,17 +66,91 @@ export default {
         (day.getMinutes() < 10 ? "0" + day.getMinutes() : day.getMinutes()) +
         ":" +
         (day.getSeconds() < 10 ? "0" + day.getSeconds() : day.getSeconds());
+        for(let i = 0; i<this.music.length; i++){
+          if(Date.parse(new Date()) == (new Date(this.music[1].time)).getTime()){
+            this.musicUrl = this.music[i].url
+            this.musicTitle = this.music[i].title
+            this.isOff = true
+            let oAudio = document.querySelector("#audio");
+            if(this.isOff){
+              oAudio.play();//让音频文件开始播放     
+            }else{
+              oAudio.pause();//让音频文件暂停播放 
+            }
+          }
+        }
     }, 1000);
   },
   methods: {
+    
+    musicPlay(){
+      let now = Date.parse(new Date());
+      // let a = new Date(this.music[0].time)
+      // let b = new Date(this.music[1].time)
+      // console.log(now)
+      // console.log(a.getTime())
+      // console.log(b.getTime())
+      for(let i = 0; i<this.music.length; i++){
+        let time = new Date(this.music[i].time)
+        if(now<=time.getTime()){
+          this.musicUrl = this.music[i].url
+          localStorage.setItem("musicListIndex",i)
+          return 
+        }
+      }
+    },
+    musicBgcontrol(){ 
+      this.isOff =!this.isOff
+      this.changeOn()
+    },
+    handleNext(){ //音乐播放完成
+      this.musicUrl = undefined
+      this.musicTitle = undefined
+    },
+    musicInt(){ //初始化音乐
+      if(!this.musicUrl){
+        if(localStorage.getItem("musicListIndex")){
+          // console.log("播放记录1")
+          for(let i = localStorage.getItem("musicListIndex");i<this.music.length;i++){
+            if(new Date(this.music[i].time).getTime()  ==  Date.parse(new Date())){
+              this.musicUrl = this.music[i].url
+              this.musicTitle = this.music[i].title
+              localStorage.setItem("musicListIndex",i)
+            }
+          }
+        }else{
+          // console.log("播放记录2")
+          for(let i = 0;i<this.music.length;i++){
+            if(new Date(this.music[i].time).getTime()  ==  Date.parse(new Date())){
+              this.musicUrl = this.music[i].url
+              this.musicTitle = this.music[i].title
+              localStorage.setItem("musicListIndex",i)
+            }
+          }
+        }
+      }else{
+        // console.log("播放中")
+      }
+    },
+    changeOn(){
+      let oAudio = document.querySelector("#audio");
+      if(this.isOff){
+        oAudio.play();//让音频文件开始播放     
+      }else{
+        oAudio.pause();//让音频文件暂停播放 
+      }
+    },
     async getData() {
-
+      // this.musicInt()
     },
     async getWeather() {
-      let res = await this.$axios.get("/aliWeather");
-      if (res.showapi_res_code === 0) {
-        this.weatherObj = res.showapi_res_body.now;
-      }
+      aliWeather({"area":"历城区"}).then(res =>{ // 天气
+        if (res.showapi_res_code === 0) {
+          this.weatherObj = res.showapi_res_body.now;
+        }
+        
+      })
+      
     },
   },
   };
@@ -103,6 +193,7 @@ export default {
         display: flex;
         img {
           width: 28px;
+          height:28px;
           display: block;
         }
       }
@@ -113,7 +204,7 @@ export default {
       align-items: center;
       justify-content: center;
       color: #1e9dff;
-      font-size: 30px;
+      font-size: 22px;
       font-family: Microsoft YaHei Bold, Microsoft YaHei Bold-Bold;
       font-weight: 700;
       text-align: center;

src/components/SD-school/info/echart.js

@@ -1,35 +1,57 @@
 export default function getData(data, type) {
     let totle = data.reduce((a, b) => {
-        return a + b.normal
+        return a + b.typeCount
     }, 0)
     let params = data.map(val => {
         return {
-            value: (val.normal / totle).toFixed(4) * 100,
-            name: val.deviceType
+            value: ((val.typeCount / totle) * 100).toFixed(2),
+            name: val.alarmDeviceName
         }
     })
     return {
+        color: [
+            '#F8B13D',
+            '#6BD850',
+            '#ED6C86',
+            '#46A7ED',
+            '#AA70F2',
+
+            '#000000',
+            '#FFFFFF',
+            '#CCCCCC',
+            '#EEEEEE',
+
+
+        ],
+        grid: {
+            // x: "12%",//x 偏移量
+            y: "30%", // y 偏移量
+            // width: "87%", // 宽度
+            height: "50%" // 高度
+        },
         title: {
             show: false,
             text: '某站点用户访问来源',
             subtext: '纯属虚构',
-            left: 'center'
+            left: 'center',
+            color: "#fff"
         },
         tooltip: {
             trigger: 'item',
-            formatter: '{b}  {d}%',
+            // formatter: '{b}  {d}%',
         },
         legend: {
             orient: 'vertical',
+            type: 'scroll',
             right: 0,
-            top: 20,
-            itemGap: 15,
+            top: 0,
+            itemGap: 6,
             formatter: function(param) {
                 return param + '    ' + params.find(val => val.name === param).value + '%';
             },
-            tooltip: {
-                show: true
-            },
+            // tooltip: {
+            //     show: true
+            // },
             textStyle: {
                 color: "#FFF"
             }
@@ -42,7 +64,7 @@ export default function getData(data, type) {
             label: {
                 show: type === 'alarm',
                 position: 'inner',
-                fontSize: 14,
+                fontSize: 12,
                 align: "right",
                 overflow: "truncate",
                 baseline: "middle",
@@ -50,6 +72,13 @@ export default function getData(data, type) {
             },
             data: params,
             left: 1,
+            emphasis: {
+                itemStyle: {
+                    shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+            }
         }]
     }
 }

src/components/SD-school/info/index.vue

@@ -3,11 +3,13 @@
     <el-row class="headerBox">
       <el-col class="title">
         <img src="../../../assets/image/arrow.png" alt="" />
-        {{resInfo.typeName || ''}}
+        综合信息统计
       </el-col>
       <el-col class="btn">
         <span :class="{'clickBtn':isCheck === 'alarm'}" @click="enidCheck('alarm')">告警信息</span>
-        <span :class="{'clickBtn':isCheck === 'deviceStatus'}" @click="enidCheck('deviceStatus')">设备工况</span>
+        <!-- <span :class="{'clickBtn':isCheck === 'deviceStatus'}" @click="enidCheck('deviceStatus')">设备工况</span> -->
+        <!-- <span :class="{'clickBtn':isCheck === 'alarm'}" @click="enidCheck('alarm')">告警信息</span>
+        <span :class="{'clickBtn':isCheck === 'deviceStatus'}" @click="enidCheck('deviceStatus')">设备工况</span> -->
       </el-col>
     </el-row>
     <el-row class="content">
@@ -15,11 +17,11 @@
     </el-row>
     <el-row class="bot">
         <el-col class="leftBot">
-            <el-col>{{annormalNumber}}</el-col>
+            <el-col>{{resInfo && resInfo.checkCount || ''}}</el-col>
             <el-col>已处理</el-col>
         </el-col>
         <el-col class="rightBot">
-            <el-col>{{totleNumber}}</el-col>
+            <el-col>{{resInfo && resInfo.noCheckCount || ''}}</el-col>
             <el-col>待处理</el-col>
         </el-col>
     </el-row>
@@ -29,12 +31,16 @@
 <script>
 import * as echarts from "echarts";
 import echartsGet from './echart'
+import { 
+	infoApi2 ,
+	} from "@/plugins/api";
 export default {
-  props:['resInfo'],
+  props:['resInfo', 'websocket'],
   data() {
     return {
       isCheck: "alarm",
       resList:{alarm:[],deviceStatus:[]},
+      resList2:[],
       totleNumber:0,
       annormalNumber:0,
     };
@@ -52,19 +58,22 @@ export default {
   },
   methods:{
     async getData(){
-       let res = await this.$axios.get(this.resInfo.apiAddr + '?' +this.$qs.stringify({
-        applicationCode: this.resInfo.applicationCode
-      }))
-      if(res.success){
-        this.resList = res.data
+      console.log(this.resInfo)
+      this.resList=this.resInfo
+      infoApi2().then(res =>{
+        console.log(res)
+        this.resList2 = res.data
         this.enidCheck()
-      }
+      })
+       //this.enidCheck()
     },
     enidCheck(val){
       val && (this.isCheck = val)
-      this.totleNumber = this.resList[this.isCheck].length > 0 && this.resList[this.isCheck].reduce((a, b) => a + b.normal, 0) || 0;
-      this.annormalNumber = this.resList[this.isCheck].length > 0 && this.resList[this.isCheck].reduce((a, b) => a + b.annormal, 0) || 0;
-      echarts.init(this.$refs.echartD).setOption(echartsGet(this.resList[this.isCheck],this.isCheck))
+      // this.totleNumber = this.resList[this.isCheck].length > 0 && this.resList[this.isCheck].reduce((a, b) => a + b.normal, 0) || 0;
+      // this.annormalNumber = this.resList[this.isCheck].length > 0 && this.resList[this.isCheck].reduce((a, b) => a + b.annormal, 0) || 0;
+      // echarts.init(this.$refs.echartD).setOption(echartsGet(this.resList[this.isCheck],this.isCheck))
+      echarts.init(this.$refs.echartD).setOption(echartsGet(this.resList2, this.isCheck))
+      // echarts.init(this.$refs.echartD)
     },
     resize() {
       echarts.init(this.$refs.echartD).resize();
@@ -83,6 +92,8 @@ export default {
   .content {
     flex: 1;
     width: 100%;
+    padding:10px;
+    box-sizing: border-box;
   }
   .bot {
     height: 90px;

src/components/SD-school/monitor/index.vue

@@ -3,66 +3,226 @@
     <el-row class="headerBox">
       <el-col class="title">
         <img src="../../../assets/image/arrow.png" alt="" />
-          {{resInfo.typeName || ''}}
+          <!-- {{resInfo.typeName || ''}} -->
+          视频监控
       </el-col>
     </el-row>
-    <el-form ref="form" :model="form" label-width="80px">
-      <el-form-item label="区域位置">
-        <el-select v-model="form.region" filterable placeholder="请选择区域位置" size="mini" @change="selectRegion">
+    <!--<el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="区域选择">
+        <el-select v-model="form.region"  placeholder="请选择区域位置" size="mini" @change="selectRegion">
           <el-option :label="item.buildName + '-' + item.floorName" :value="item.floorUuid" v-for="item in selectList" :key="item.floorUuid"></el-option>
         </el-select>
       </el-form-item>
-    </el-form>
+    </el-form> -->
     <el-row class="threeBox" :gutter="10">
-      <el-col v-for="item in equipmentList" :key="item.id">
-        <img src="../../../assets/image/test1.png" alt="">
-      </el-col>
+      <div class="video" v-for="(item, index) in vedioData" :key="index">
+          <video 
+            :id="'video' + (index+1) "  
+            class="video-js vjs-default-skin" 
+            preload="auto" 
+            autoplay="autoplay" 
+            v-on:error.prevent="videoLoadError('video' + (index+1) )"
+            
+            :src="item.path" type="application/x-mpegURL">
+          </video>
+          <p>{{item.title}}</p>
+      </div>
     </el-row>
   </el-row>
 </template>
-
 <script>
+import 'video.js/dist/video-js.css'
+import videojs from 'video.js'
+import 'videojs-contrib-hls'
+import "@videojs/http-streaming"
+import { cameraPreviewURL, videoUrl, nodesUrl } from "@/plugins/api";
 export default {
-  props:['resInfo'],
+  // props:['resInfo'],
+
   data() {
     return {
+      
+      path:null,
+      dialogVisible: true,
+      isCheck:false,
+      videoSrc:null,
+     
       form:{
-        region:'',
+        region:'全部',
       },
       resList:[],
-      selectList:[],
-      equipmentList:[],
-    };
+      selectList:[
+        {"floorName":"1层","buildName":"大楼1","floorUuid":1},
+        {"floorName":"2层","buildName":"大楼1","floorUuid":2}
+      ],
+      // equipmentList:[
+      //   {"floorName":"1层","buildName":"大楼1","floorUuid":1},
+      //   {"floorName":"2层","buildName":"大楼1","floorUuid":2}
+      // ],
+
+
+      player: null,
+      vedioData:[
+        {
+          "title": "3层东楼梯","cameraIndexCode":"4db3dfbea6894b02a24673147a64d6c5","path":"",
+        },
+        // {
+        //   "title": "4层东电梯厅","cameraIndexCode":"eeced6dccd5845e8ac57530d28d0285c","path":"",
+        // },
+        {
+          "title": "5层西电梯厅","cameraIndexCode":"3841eccccbe248b9863a941cf00453dc","path":"",
+        },
+        {
+          "title": "6层东东楼梯","cameraIndexCode":"d61f260c25e9463f880d2ecf702b92b6","path":"",
+        },
+        // {
+        //   "title": "7层东电梯厅","cameraIndexCode":"ce50d61896ee4ad19fa0502d60576f4a","path":"",
+        // },
+        // {
+        //   "title": "9层西电梯厅","cameraIndexCode":"abdcf630ece64c00a0c82aadaeaeaec8","path":"",
+        // },
+        
+        
+        
+      ],
+      playsinline: true,
+      playerOptions: [],
+      options: ""
+    }
   },
   watch: {
-    resInfo(){
-      this.getData()
-    }
+    // resInfo(){
+    //   this.getData()
+    // }
+  },
+  created(){
+
   },
   mounted(){
     this.getData()
   },
   methods: {
+    init(){
+      // this.$nextTick(() => {
+        for(let i = 0; i<this.vedioData.length; i++){
+          let list = videojs('video' + (i + 1) , {
+            events: [],
+            playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
+            autoplay: "true", // 如果true,浏览器准备好时开始回放。
+            controls: true, //  控制条
+            preload: 'auto', // 视频预加载
+            muted: true, //  默认情况下将会消除任何音频。
+            loop: false, // 导致视频一结束就重新开始。
+            language: 'zh-CN',
+            controlBar: {
+              timeDivider: true,
+              durationDisplay: true
+            },
+            aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+            fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+            sources: [{
+              type: 'application/x-mpegURL',
+              src: this.vedioData[i].path
+            }],
+            hls: true, // 启用hls？
+            poster: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F945cad7c7105d352aa3c513c94846bb0c2f1a61342067-OWFZcE_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638947006&t=9cd1ab4df990ba151fcd5f0378f6e8cf', // 你的封面地址
+            width: document.documentElement.clientWidth,
+            notSupportedMessage: '此视频暂无法播放，请稍后再试'
+            // autoplay:true,
+            // controls:false,
+            // bigPlayButton: false,
+            // textTrackDisplay: false,
+            // posterImage: true,
+            // errorDisplay: false,
+            // controlBar: true,
+            // muted: true //静音模式 、、 解决首次页面加载播放。
+          }, function () {
+            this.play() // 自动播放
+          })
+        }
+        
+      // })   
+    },
+    videoLoadError(id){
+      setTimeout(()=>{
+        let list = videojs(id, {
+            events: [],
+            playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
+            autoplay: "true", // 如果true,浏览器准备好时开始回放。
+            controls: true, //  控制条
+            preload: 'auto', // 视频预加载
+            muted: true, //  默认情况下将会消除任何音频。
+            loop: false, // 导致视频一结束就重新开始。
+            language: 'zh-CN',
+            controlBar: {
+              timeDivider: true,
+              durationDisplay: true
+            },
+            aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+            fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+            sources: [{
+              type: 'application/x-mpegURL',
+              src: this.vedioData[i].path
+            }],
+            hls: true, // 启用hls？
+            poster: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F945cad7c7105d352aa3c513c94846bb0c2f1a61342067-OWFZcE_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638947006&t=9cd1ab4df990ba151fcd5f0378f6e8cf', // 你的封面地址
+            width: document.documentElement.clientWidth,
+            notSupportedMessage: '此视频暂无法播放，请稍后再试'
+          }, function () {
+            this.play() // 自动播放
+          })
+      },100)
+    },
+    // alone(){
+      
+    // },
+    handleClose() {
+      this.isCheck = false
+      this.dialogVisible = false
+      // 关闭弹出框时 视频关闭播放
+      const video = document.getElementById('video')
+      video.pause()
+    },
+    handleVideo(val) {
+      this.isCheck = val
+      this.dialogVisible = true
+    },
     async getData(){
-       let res = await this.$axios.get(this.resInfo.apiAddr + '?' +this.$qs.stringify({
-        applicationCode: this.resInfo.applicationCode,
-        pageSize:10000
-      }))
-      // if(res.success){
-		  console.log(res.pageList)
-        this.resList = res.pageList
-        this.selectList =  res.pageList.reduce((pre,cur)=>{
-            return !pre.some(val=>val.floorUuid === cur.floorUuid) ? pre.concat(cur) : pre
-        },[])
-		
-        this.form.region = this.selectList[0].floorUuid
-        this.selectRegion()
-      // }
+      // IP CAMERA
+      // nodesUrl({"resourceType":"camera","pageNo":1,"pageSize":100,"regionName":"山东省委党校综合楼"}).then(res =>{ // 门禁进出入统计
+      //     //this.vedioData[0].path = res.data.url
+      //     console.log(res)
+      //     // subNodes({"resourceType":"camera","pageNo":1,"pageSize":100}).then(res =>{})
+         
+        
+      // })
+      // this.init()
+      setTimeout(()=>{
+          videoUrl({"cameraIndexCode":this.vedioData[0].cameraIndexCode,"protocol":"hls"}).then(res =>{ // 门禁进出入统计
+            this.vedioData[0].path = res.data.url
+          })
+      },0)
+      setTimeout(()=>{
+          videoUrl({"cameraIndexCode":this.vedioData[1].cameraIndexCode,"protocol":"hls"}).then(res =>{ // 门禁进出入统计
+            this.vedioData[1].path = res.data.url
+          })
+      },1000)
+      setTimeout(()=>{
+        videoUrl({"cameraIndexCode":this.vedioData[2].cameraIndexCode,"protocol":"hls"}).then(res =>{ // 门禁进出入统计
+            this.vedioData[2].path = res.data.url
+            this.init()
+          })
+      },2000)
+      
+      
     },
     selectRegion(){
       this.equipmentList = this.resList.filter(val=> val.floorUuid === this.form.region)
-    }
-  },
+    },
+      
+
+    
+  }
 };
 </script>
 
@@ -87,6 +247,18 @@ export default {
         // opacity: 0;
         /* Chrome Safari */
     }
+    .video{
+      width:33.3%;
+      height:auto;
+      display: inline-block;
+      overflow: hidden;
+      div{
+        width:100% !important;
+      }
+      .video-dimensions{
+        height:100px;
+      }
+    }
     .el-col{
       height: auto;
       width: 33.33%;
@@ -96,6 +268,9 @@ export default {
         display: block;
         margin: 0 auto;
       }
+      .state{
+        margin:-20px 0 0 4px;
+      }
     }
   }
   .el-form{
@@ -105,5 +280,38 @@ export default {
       width: 100%;
     }
   }
+  .video-wrap{
+    width:90%;
+    margin-left:5%;
+    background-color: #ccc;
+    .video{
+      height:auto;
+      background-color: #fff;
+    }
+
+  }
+}
+/deep/ .el-dialog__header{
+  padding:0;
+  .el-dialog__headerbtn{
+    top:6px;
+    font-size: 28px;
+  }
+}
+/deep/ .el-dialog__body{
+  padding: 40px 20px 20px;
+  .el-divider{
+    display: none;
+  }
+  .el-divider--horizontal{
+    margin:8px 0;
+    border: none;
+  }
+}
+
+/deep/ .video-js .vjs-big-play-button{
+  top: 20% !important;
+  left: 50% !important;
+  margin-left: -1.5em !important;
 }
 </style>

src/components/SD-school/parking-lot/echart.js

@@ -1,20 +1,19 @@
 import * as echarts from "echarts";
-
 export default function getData(params) {
-	console.log(params)
-	params = parmas.map(val=>{
-		return {
-			time:val.creatTime,
-			num:val.tiatlFreeNum + Math.ceil(Math.random()*300)
-		}
-	})
-	let resList = params
-    // let resList = params.map(val => {
-    //     return {
-    //         ...val,
-    //         creatTime: new Date(val.creatTime).getDate()
-    //     }
-    // }).reverse()
+    let resList = params.map(val => {
+            return {
+                time: val.createTime + "时",
+                num: val.tiatlFreeNum
+                    // num:val.tiatlFreeNum + Math.ceil(Math.random()*300)
+            }
+        })
+        // let resList = params
+        // let resList = params.map(val => {
+        //     return {
+        //         ...val,
+        //         creatTime: new Date(val.creatTime).getDate()
+        //     }
+        // }).reverse()
     return {
         tooltip: {
             trigger: 'axis',
@@ -47,13 +46,14 @@ export default function getData(params) {
             },
         },
         yAxis: {
-			min:0,
-			max:300,
+            // min: 0,
+            // max: 300,
+            // splitNumber: 4, // 控制刻度标签的数量
             type: 'value',
             axisLabel: {
                 color: "#CCC",
             },
-			
+
             axisLine: {
                 show: true,
                 lineStyle: {
@@ -69,27 +69,27 @@ export default function getData(params) {
         },
         series: [{
             //data: resList.map(val => val.totalUsingNum),
-			data: resList.map(val => val.num),
+            data: resList.map(val => val.num),
             type: 'line',
-			color:'red',
+            color: '#49B9F5',
             smooth: 3,
             showSymbol: false,
             lineStyle: {
-                width: 1
+                width: 2
+            },
+            itemStyle: {
+                normal: {
+                    // 拐点上显示数值
+                    // label : {
+                    // show: true
+                    // },
+                    // borderColor:'red',  // 拐点边框颜色
+                    lineStyle: {
+                        width: 2, // 设置线宽
+                        // type:'dotted'  //'dotted'虚线 'solid'实线
+                    }
+                }
             },
-			itemStyle:{
-			  normal:{
-				// 拐点上显示数值
-				// label : {
-				// show: true
-				// },
-				// borderColor:'red',  // 拐点边框颜色
-				lineStyle:{                 
-				  width:5,  // 设置线宽
-				  // type:'dotted'  //'dotted'虚线 'solid'实线
-				}
-			  }
-			},
             areaStyle: {
                 opacity: 0.8,
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{

src/components/SD-school/parking-lot/index.vue

@@ -3,7 +3,7 @@
     <el-row class="headerBox">
       <el-col class="title">
         <img src="../../../assets/image/arrow.png" alt="" />
-         {{resInfo.typeName || ''}}
+         停车场统计
       </el-col>
     </el-row>
     <el-row class="carNumber">
@@ -12,7 +12,7 @@
           <img src="../../../assets/image/car2.png" alt="" />
         </el-col>
         <el-col class="carNumbderLot">
-          <span class="green">{{resList && resList.totalNum || ''}}</span>
+          <span class="green">{{resList && resList.totalNum || ""}}</span>
           <span>车位总数</span>
         </el-col>
       </el-col>
@@ -21,7 +21,7 @@
           <img src="../../../assets/image/car1.png" alt="" />
         </el-col>
         <el-col class="carNumbderLot">
-          <span class="yellow">{{resList && resList.tiatlFreeNum || ''}}</span>
+          <span class="yellow">{{resList && resList.tiatlFreeNum || ""}}</span>
           <span>空闲车位总数</span>
         </el-col>
       </el-col>
@@ -35,12 +35,13 @@
 <script>
 import * as echarts from "echarts";
 import echartsGet from './echart'
+import { parkingLotApi2 } from "@/plugins/api"
 export default {
-  props:['resInfo'],
+  props:['resInfo', 'websocket'],
   data() {
     return {
       resList: [],
-	  resList2: []
+	    resList2: [],
     };
   },
   watch: {
@@ -49,6 +50,9 @@ export default {
     },
     resInfo(){
       this.getData()
+    },
+    websocket(){
+      this.getData()
     }
   },
   mounted(){
@@ -56,18 +60,47 @@ export default {
   },
   methods:{
     async getData(){
-		let res = await this.$axios.get(this.resInfo.apiAddr + '?' +this.$qs.stringify({
-			applicationCode: this.resInfo.applicationCode
-		}))
-		if(res.success){
-			this.resList = res.data
-			//echarts.init(this.$refs.echartD).setOption(echartsGet(this.resList))
-		}
-		let res2 = await this.$axios.get('/top/listParkByDate')
-		if(res2.success){
-			this.resList2 = res2.data
-			echarts.init(this.$refs.echartD).setOption(echartsGet(this.resList2))
-		}
+      if(this.websocket.data){
+        this.resList=this.websocket.data
+      }else{
+        this.resList=this.resInfo
+      }
+        var myDate = new Date();
+        let tYear = myDate.getFullYear();
+        let tMonth = myDate.getMonth() + 1;
+        let lastDay= new Date(tYear,tMonth,0).getDate()
+        this.month = tMonth
+        let day = myDate.getDate(); //获取当前日(1-31)
+        let hours = myDate.getHours(); //获取当前小时数(0-23)
+        let minutes = myDate.getMinutes(); //获取当前分钟数(0-59)
+        let seconds = myDate.getSeconds(); //获取当前秒数(0-59)
+        // this.year = tYear + '年'
+        if(tMonth<10){
+          tMonth = '0' + tMonth
+          this.monthParameter = tMonth
+        }else{
+          this.monthParameter = tMonth
+        }
+        if(day<10){
+          day = '0' + day
+        }else{
+          day =  day
+        }
+        if(minutes<10){
+          minutes = '0' + minutes
+        }else{
+          minutes =  minutes
+        }
+        if(seconds<10){
+          seconds = '0' + seconds
+        }else{
+          seconds =  seconds
+        }
+        let startTime = tYear + '-' + tMonth + '-' + day + ' ' + "00:00:00"
+        let endTime = tYear + '-' + tMonth + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
+        parkingLotApi2({startTime:startTime,endTime:endTime}).then(res =>{
+          echarts.init(this.$refs.echartD).setOption(echartsGet(res.data))
+        })
 	},
     resize() {
       echarts.init(this.$refs.echartD).resize();

src/main.js

@@ -1,10 +1,11 @@
 import Vue from 'vue'
-import './plugins/axios'
+import './plugins/request.js'
 import App from './App.vue'
 import './plugins/element.js'
 import router from './router'
 import './assets/common.scss'
 import querystring from 'querystring';
+import hls from 'videojs-contrib-hls'
 import store from './store'
 import './assets/font/index.scss'
 Date.prototype.Format = function(fmt) {
@@ -23,9 +24,23 @@ Date.prototype.Format = function(fmt) {
     }
     return fmt;
 };
+// 在main.js文件钟准备一个滚动加载指令
+Vue.directive('loadmore', {
+    bind(el, binding) {
+        const selectWrap = el.querySelector('.el-table__body-wrapper')
+        selectWrap.addEventListener('scroll', function() {
+            let sign = 0
+            const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
+            if (scrollDistance <= sign) {
+                binding.value()
+            }
+        })
+    }
+})
 
 Vue.config.productionTip = false
 Vue.prototype.$qs = querystring
+Vue.use(hls)
 Vue.use(require('vue-wechat-title')) //实例化标题
 new Vue({
     router,

src/plugins/api.js

@@ -0,0 +1,157 @@
+import request from '@/plugins/request'
+
+//天气
+export function aliWeather(query) {
+    return request({
+        url: 'aliWeather',
+        method: 'get',
+        params: query
+    })
+}
+
+
+
+export function accessControlApi(query) {
+    return request({
+        url: 'sdp/messageDeviceInto/count',
+        method: 'get',
+        params: query
+    })
+}
+
+//机房系统
+export function computerRoomApi(query) { //温度
+    return request({
+        url: 'sdp/messageDeviceMachine/getAvgChart',
+        method: 'get',
+        params: query
+    })
+}
+export function emergencyDisasterPreventionApi(query) { //改/加
+    return request({
+        url: 'sdp/messageDeviceMeet/count',
+        method: 'get',
+        params: query
+    })
+}
+
+
+//停车系统
+export function parkingLotApi(query) { //各车位数据
+    return request({
+        url: 'sdp/messageDevicePark/listParkInfo',
+        method: 'get',
+        params: query
+    })
+}
+export function parkingLotApi2(query) { //图表数据
+    return request({
+        url: 'sdp/messageDevicePark/listParkByDate',
+        method: 'get',
+        params: query
+    })
+}
+
+
+export function infoApi(query) { //告警分页
+    return request({
+        url: 'sdp/tbAlarm/getCheckCount',
+        method: 'get',
+        params: query
+    })
+}
+export function infoApi2(query) {
+    return request({
+        url: 'sdp/tbAlarm/getTypeCount',
+        method: 'get',
+        params: query
+    })
+}
+export function typeApi(query) { //告警设备类型
+    return request({
+        url: 'list',
+        method: 'get',
+        params: query
+    })
+}
+export function shebeifyApi(query) { //告警数据分页
+    return request({
+        url: 'sdp/tbAlarm/page',
+        method: 'get',
+        params: query
+    })
+}
+
+
+
+//会议系统
+export function meetingPageApi(query) { //当前会议室分页
+    return request({
+        url: 'sdp/messageDeviceMeetingRoom/page',
+        method: 'get',
+        params: query
+    })
+}
+export function meetingStatusApi(query) { //当前会议室状态
+    return request({
+        url: 'sdp/messageDeviceMeetingRoom/isUse',
+        method: 'get',
+        params: query
+    })
+}
+
+
+//视频
+
+export function cameraPreviewURL(query) { //当前会议室状态
+    return request({
+        url: 'cameraPreviewURL',
+        method: 'get',
+        params: query
+    })
+}
+export function videoUrl(query) { //当前会议室状态
+    return request({
+        url: 'videoUrl',
+        method: 'get',
+        params: query
+    })
+}
+export function regionsUrl(query) { //分页获取区域信息
+    return request({
+        url: 'regionsUrl',
+        method: 'get',
+        params: query
+    })
+}
+export function nodesUrl(query) { //根据条件获取区域列表
+    return request({
+        url: 'nodesUrl',
+        method: 'get',
+        params: query
+    })
+}
+export function subNodes(query) { //获取下级的区域信息
+    return request({
+        url: 'subNodes',
+        method: 'get',
+        params: query
+    })
+}
+export function tbDevice(query) { //设备编号  查看设备详情
+    return request({
+        url: 'sdp/tbDevice/' + query,
+        method: 'get'
+
+    })
+}
+
+
+//立方
+export function xf(query) { //设备编号  查看设备详情
+    return request({
+        url: 'xftoken',
+        method: 'get'
+
+    })
+}

src/plugins/axios.js

@@ -6,7 +6,7 @@ import axios from "axios";
 // Full config:  https://github.com/axios/axios#request-config
 // axios.defaults.baseURL = 'http://120.55.70.156:80/api';
 // axios.defaults.baseURL = 'http://172.16.120.92:8089';
-axios.defaults.baseURL = 'http://172.16.120.104:8089';
+// axios.defaults.baseURL = 'http://172.16.120.104:8089';
 // axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || 'http://120.55.70.156:80/api';
 // axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
 // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

src/plugins/errorCode.js

@@ -0,0 +1,6 @@
+export default {
+  '401': '认证失败，无法访问系统资源',
+  '403': '当前操作没有权限',
+  '404': '访问资源不存在',
+  'default': '系统未知错误，请反馈给管理员'
+}

src/plugins/request.js

@@ -0,0 +1,68 @@
+import axios from 'axios'
+// import errorCode from '@/plugins/errorCode'
+axios.defaults.headers['Content-Type'] = 'application/json;multipart/form-data;charset=utf-8'
+    // 创建axios实例
+const service = axios.create({
+        // axios中请求配置有baseURL选项，表示请求URL公共部分
+        //baseURL: "http://101.133.214.75:81/sdpart/", //内测试
+        baseURL: "http://172.16.120.104:8089/", //本地
+        //baseURL: "http://10.108.34.2:80/sdpart/", //山东
+        // 超时
+        timeout: 10000
+    })
+    // request拦截器
+service.interceptors.request.use(config => {
+    // 是否需要设置 token
+    // const isToken = (config.headers || {}).isToken === false
+    // if (getToken() && !isToken) {
+    //     config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+    // }
+    // 导出请求blob类型或设置其他类型
+    if (config.responseType) {
+        config.responseType = config.responseType
+    }
+    // get请求映射params参数
+    if (config.method === 'get' && config.params) {
+        let url = config.url + '?';
+        for (const propName of Object.keys(config.params)) {
+            const value = config.params[propName];
+            var part = encodeURIComponent(propName) + "=";
+            if (value !== null && typeof(value) !== "undefined") {
+                if (typeof value === 'object') {
+                    for (const key of Object.keys(value)) {
+                        let params = propName + '[' + key + ']';
+                        var subPart = encodeURIComponent(params) + "=";
+                        url += subPart + encodeURIComponent(value[key]) + "&";
+                    }
+                } else {
+                    url += part + encodeURIComponent(value) + "&";
+                }
+            }
+        }
+        url = url.slice(0, -1);
+        config.params = {};
+        config.url = url;
+
+    }
+    return config
+}, error => {
+    console.log(error)
+    Promise.reject(error)
+})
+
+// 响应拦截器
+service.interceptors.response.use(res => {
+        return res.data
+    },
+    error => {
+        console.log('err' + error)
+        return Promise.reject(error)
+    }
+)
+
+
+
+
+
+
+export default service

src/router/index.js

@@ -8,15 +8,15 @@ const routes = [{
     name: 'Home',
     component: () =>
         import ( /* webpackChunkName: "about" */ '../views/Home.vue'),
-	meta:{
-		title:"山东IOT物联网平台",
-		requireAuth:true
-	}
+    meta: {
+        title: "中共山东省委党校（山东行政学院)",
+        requireAuth: true
+    }
 }, ]
 
 const router = new VueRouter({
     mode: 'history',
-    base: '/',
+    base: '/sdpart',
     routes
 })
 

src/store/index.js

@@ -6,20 +6,22 @@ Vue.use(Vuex)
 export default new Vuex.Store({
     state: {
         windowWidth: 1920 + 1080,
-        typeFire: 0,//0党校 1安防
-        wsUrl: '121.40.217.77:8082',
+        wsUrl: '172.16.120.104:8089/', //本地
+        //wsUrl: '101.133.214.75:81', //内测试
+        //wsUrl: '10.108.34.2:80/sdws', //山东
+
+
         weaterRes: {}
     },
     mutations: {
         changClient(state, val) {
             state.windowWidth = val
         },
-        changTypeFire(state, val) {
-            state.typeFire = val
-        },
+        // changTypeFire(state, val) {
+        //     state.typeFire = val
+        // },
         changWeater(state, val) {
             state.weaterRes = val
-            console.log(state.weaterRes)
         }
     },
     actions: {},

src/views/Home.vue

@@ -1,152 +1,311 @@
 <template>
-  <div class="home" v-if="$store.state.typeFire === 0">
-	  <div v-wechat-title="$route.meta.title"></div>
-    <!-- <iframe src="https://www.thingjs.com/s/3a22743aed245a60c7ae7d4f?params=105b0f77fd24654d4eebc434e9" frameborder="0"></iframe> -->
-    <el-row class="contentClass contnetLift">
-      <template v-for="item in resList.slice(0,3)">
-        <info class="info" v-if="item.styleValue === 1" :key="item.styleValue" :resInfo="item"></info>
-        <access-control class="accessControl" v-else-if="item.styleValue === 2" :key="item.styleValue" :resInfo="item"></access-control>
-        <monitor class="monitor" v-else-if="item.styleValue === 3" :key="item.styleValue" :resInfo="item"></monitor>
-        <parking-lot class="parkingLot" v-else-if="item.styleValue === 4" :key="item.styleValue" :resInfo="item"></parking-lot>
-        <conference-room class="conferenceRoom" v-else-if="item.styleValue === 5" :key="item.styleValue" :resInfo="item"></conference-room>
-        <give-an-alarm class="giveAnAlarm" v-else-if="item.styleValue === 6" :key="item.styleValue" :resInfo="item"></give-an-alarm>
-      </template>
-    </el-row>
-    <el-row class="contnetCenter"></el-row>
-    <el-row class="contentClass contnetRight">
-      <template v-for="item in resList.slice(3)">
-        <info class="info" v-if="item.styleValue === 1" :key="item.styleValue" :resInfo="item"></info>
-        <access-control class="accessControl" v-else-if="item.styleValue === 2" :key="item.styleValue" :resInfo="item"></access-control>
-        <monitor class="monitor" v-else-if="item.styleValue === 3" :key="item.styleValue" :resInfo="item"></monitor>
-        <parking-lot class="parkingLot" v-else-if="item.styleValue === 4" :key="item.styleValue" :resInfo="item"></parking-lot>
-        <conference-room class="conferenceRoom" v-else-if="item.styleValue === 5" :key="item.styleValue" :resInfo="item"></conference-room>
-        <give-an-alarm class="giveAnAlarm" v-else-if="item.styleValue === 6" :key="item.styleValue" :resInfo="item"></give-an-alarm>
-      </template>
-    </el-row>
-  </div>
-  <div class="home home-AF" v-else>
-    <div class="contentBox">
-        <!-- <iframe src="https://www.thingjs.com/s/3a22743aed245a60c7ae7d4f?params=105b0f77fd24654d4eebc434e9" frameborder="0"></iframe>  -->
-      <el-collapse-transition>
-        <el-row class="contentClass contnetLift" v-show="isLeft">
-          <template v-for="item in resList.slice(0,3)">
-            <equipment class="equipment" v-if="item.styleValue === 7" :key="item.styleValue" :resInfo="item"></equipment>
-            <give-an-alarm-af class="giveAnAlarmAf" v-if="item.styleValue === 8" :key="item.styleValue" :resInfo="item"></give-an-alarm-af>
-            <warning-info class="warningInfo" v-if="item.styleValue === 6" :key="item.styleValue" :resInfo="item" @changeImage ='changeImage' @footerImage="footerImage"></warning-info>
-          </template>
-        </el-row>
-      </el-collapse-transition>
-      <el-row class="contnetCenter">
-        <img src="../assets/image-af/left-icon.png" alt="" class="leftIcon" @click="roomBox('left')">
-        <img src="../assets/image-af/right-icon.png" alt="" class="rightIcon" @click="roomBox('right')">
-      </el-row>
-      <el-collapse-transition>
-        <el-row class="contentClass contnetRight" v-show="isRight">
-          <template v-for="item in resList.slice(3)">
-            <screen-equipment class="screenEquipment" v-if="item.styleValue === 5" :key="item.styleValue" :resInfo="item"></screen-equipment>
-            <current-state class="currentState" v-if="item.styleValue === 9" :key="item.styleValue" :resInfo="item"></current-state>
-            <monitor-info class="monitorInfo" v-if="item.styleValue === 10" :key="item.styleValue" :resInfo="item" :imageList="imageList"></monitor-info>
-          </template>
-        </el-row>
-      </el-collapse-transition>
-    </div>
-    <footer-view-af v-if="$store.state.typeFire === 1" class="footerViewAf" :footerList='footerList'></footer-view-af>
-  </div>
+  	<div class="home">
+	  	<div v-wechat-title="$route.meta.title"></div>
+		<el-row class="contentClass contnetLift">
+			<template>
+				<info class="info" :resInfo="data.info" :websocket="data.winfo" />
+				<!-- <access-control class="accessControl" v-else-if="item.styleValue === 2" :key="item.styleValue" :resInfo="item"></access-control> -->
+				<parking-lot class="parkingLot"  :resInfo="data.parkingLot" :websocket="data.wparkingLot" />
+				<!-- <monitor class="monitor" /> -->
+				<!-- <conference-room class="conferenceRoom" v-else-if="item.styleValue === 5" :key="item.styleValue" :resInfo="item"></conference-room>
+				<give-an-alarm class="giveAnAlarm" v-else-if="item.styleValue === 6" :key="item.styleValue" :resInfo="item"></give-an-alarm> -->
+			</template>
+		</el-row>
+		<el-row class="contnetCenter" >
+			<iframe src="https://www.thingjs.com/s/cd7b1592538e0f4a9572c55e?params=105b0f77fd24654d4eebc434e9" frameborder="0" id="iframe"></iframe>
+		</el-row>
+		<el-row class="contentClass contnetRight">
+			<emergencyDisasterPrevention class="emergencyDisasterPrevention" :resInfo="data.emergencyDisasterPrevention"  />
+			<access-control class="accessControl" :resInfo="data.accessControl" :websocket="data.waccessControl" />
+			<computerRoom class="computerRoom" :resInfo="data.computerRoom" :websocket="data.wcomputerRoom" />
+			<giveAnAlarm class="giveAnAlarm" :resInfo="data.giveAnAlarm"  :websocket="data.wgiveAnAlarm" @giveAnAlarmClick="giveAnAlarmClick" />
+		</el-row>
+		<SpringFrame  v-if="springFrameState" :resInfo="item" :close2="item.close" @close="SpringFrameChange" />
+	</div>
 </template>
-
 <script>
 // 党校
 import info from "../components/SD-school/info"; // 综合信息统计
-import accessControl from "../components/SD-school/access-control"; // 门进出入统计
-import monitor from "../components/SD-school/monitor"; // 视频监控
+import accessControl from "../components/SD-school/access-control"; // 门禁进出入统计
 import parkingLot from "../components/SD-school/parking-lot"; // 停车场统计
-import conferenceRoom from "../components/SD-school/conference-room"; // 会议室统计
+import monitor from "../components/SD-school/monitor"; // 视频监控
+import emergencyDisasterPrevention from "../components/SD-school/emergency-disaster-prevention" //应急防灾
+import computerRoom from "../components/SD-school/computer-room"; // 机房温度
+// import conferenceRoom from "../components/SD-school/conference-room"; // 会议室统计
 import giveAnAlarm from "../components/SD-school/give-an-alarm"; // 综合告警列表
 
-// 安防
-import equipment from "../components/AF-exhibition/equipment"; // 设备工况
-import giveAnAlarmAf from "../components/AF-exhibition/give-an-alarm"; // 设备告警情况
-import warningInfo from "../components/AF-exhibition/warning-info"; // 告警信息
-import screenEquipment from "../components/AF-exhibition/screen-equipment"; // 设备筛选
-import currentState from "../components/AF-exhibition/current-state"; // 当前实时状态
-import monitorInfo from "../components/AF-exhibition/monitor-info"; // 异常监控信息
-import footerViewAf from '../components/AF-exhibition/footer'
-
-
+import SpringFrame from "../components/SD-school/Spring-frame"; // 弹框
+import { 
+	accessControlApi, 
+	computerRoomApi, 
+	emergencyDisasterPreventionApi, 
+	parkingLotApi, 
+	infoApi,
+	typeApi,
+	shebeifyApi,
+	tbDevice,
+	xf,
+} from "@/plugins/api";
 export default {
-  name: "Home",
-  components: {
-    info,
-    accessControl,
-    monitor,
-    parkingLot,
-    conferenceRoom,
-    giveAnAlarm,
+  	name: "Home",
+  	components: {
+		info,
+		parkingLot,
+		monitor,
+		emergencyDisasterPrevention,
+		accessControl,
+		computerRoom,
+		giveAnAlarm,
+		SpringFrame,
+		
+  	},
+  	data() {
+		return {
+			// isLeft: true,
+			// isRight: true,
+			// resList:[],
+			// imageList:[],
+			
+			data:{//主页各系统板块初始数据及websocket数据
+				"accessControl":[],
+				"parkingLot":[],
+				"computerRoom":[],
+				"emergencyDisasterPrevention":[],
+				"parkingLot":[],
+				"info":[],
+				"giveAnAlarm":[],
+				"winfo":[],
 
-    equipment,
-    giveAnAlarmAf,
-    warningInfo,
-    screenEquipment,
-    currentState,
-    monitorInfo,
-    footerViewAf,
-  },
-  data() {
-    return {
-      isLeft: true,
-      isRight: true,
-      resList:[],
-      imageList:[],
-      footerList:[
-        {battery: "100", createTime: "2021-07-30 11:39:02", deviceName: "烟感探测", registerDeviceId: "0", signal: "75",status: "36℃"},
-        {battery: "100", createTime: "2021-07-30 11:39:02", deviceName: "电器火灾监控", registerDeviceId: "1", signal: "75",status: "36℃<br/>220V<br/>36A"},
-        {battery: "100", createTime: "2021-07-30 11:39:02", deviceName: "门体开启状态探测", registerDeviceId: "2", signal: "75",status: "关闭"},
-        {battery: "100", createTime: "2021-07-30 11:39:02", deviceName: "紧急求助", registerDeviceId: "3", signal: "75",status: "正常"},
-        {battery: "100", createTime: "2021-07-30 11:39:02", deviceName: "地磁车辆检测", registerDeviceId: "4", signal: "75",status: "车位变空"},
-        {battery: "100", createTime: "2021-07-30 11:39:02", deviceName: "窨井盖探测", registerDeviceId: "5", signal: "75",status: "井盖关闭"},
-        {battery: "100", createTime: "2021-07-30 11:39:02", deviceName: "可燃气体探测器", registerDeviceId: "6", signal: "75",status: "无可燃气体"},
-      ],
-    };
-  },
-  created() {
-    this.getData()
-  },
-  mounted() {
+				
+				"wparkingLot":[],
+				"wemergencyDisasterPrevention":[],
+				"waccessControl":[],
+				"wcomputerRoom":[],
+				"wgiveAnAlarm":[],
+				
+			},
+			springFrameState:false,//弹框
+			item:{ //弹框下各系统板块
+				"warningState":false,
+				"meetingState":false,
+				"equipmentState":false,
+				"videoState":false,
+				"xinfaState":false,
 
-  },
-  methods: {
-    async getData(){
-      let res = await this.$axios.get('/top/listTopConfig?'+this.$qs.stringify({
-        applicationCode: this.$store.state.typeFire === 0 ? 'SD' : 'AF'
-      }))
-      if(res.success){
-		  console.log(res)
-        this.resList = res.data
-		console.log(this.resList.slice(0,3))
-      }
-    },
-    roomBox(val){
-      val === 'left' ? this.isLeft = !this.isLeft : (this.isRight = !this.isRight)
-    },
-    changeImage(val){
-      this.imageList.unshift(...val)
-      console.log(this.imageList)
-    },
-    footerImage(val){
-      this.footerList.unshift(...val)
-      this.footerList = this.footerList.slice(0,7)
-      console.log(this.footerList)
-    }
-  },
+				"warningMessage":{},
+				"equipmentMessage":{},
+				"videoMessage":{},
+				"xinfaMessage":{},
+				"time":null,
+				"close":false
+				
+				// "alertMessage":{ //
+				// 	name:null,
+				// 	data:{}
+				// },
+				
+				// "time":false
+				// "music":false
+			},
+		};
+	},
+	created() {
+		this.getData()
+	},
+	mounted() {
+		var that = this;
+		window.addEventListener("message",function (event) {
+			console.log(event)
+			var isDOM = typeof event.data === "object";
+			// // 监听父窗口发送过来的数据向服务器发送post请求
+			var data = event.data;
+			if (isDOM == true) {
+				if ("param" in data == true) {
+					if (data.param.name === "1楼会议室" && data.param.id === "109") { //会议室弹框开启
+						setTimeout(()=>{
+							that.springFrameState = false
+						},1)
+						setTimeout(()=>{
+							that.springFrameState = true
+							that.item.meetingState = true
+						},2)
+						console.log("会议室")
+					}else if(data.param.id =="B1" || data.param.id =="F1" || data.param.id =="F2" || data.param.id =="F3" || data.param.id =="F4" 
+						|| data.param.id =="F5" || data.param.id =="F6" || data.param.id =="F7" || data.param.id =="F8" || data.param.id =="F9" 
+						|| data.param.id =="F10" || data.param.id =="F11" || data.param.id =="F12" || data.param.id =="F13"){ //楼层id过滤
+						console.log("楼层")
+					}else{
+						tbDevice(data.param.id).then(res =>{ //设备信息查询
+							setTimeout(()=>{
+								that.springFrameState = false
+							},1)
+							setTimeout(()=>{
+								console.log(res)
+								let name = data.param.name
+								if(name.indexOf("摄像头")>-1){ //摄像头
+									console.log("摄像头")
+									that.springFrameState = true
+									that.item.videoState = true
+									that.item.videoMessage = res.data.detail
+								}else{//设备
+									console.log("设备")
+									that.springFrameState = true
+									that.item.equipmentState = true
+									that.item.equipmentMessage = res.data.detail
+								}
+							},2)
+							
+							
+						})
+					}
+				}
+			}
+		},false)
+	},
+	methods: {
+		postMsg(newValue) {
+			var myframe = document.getElementById("iframe"); //获取iframe 
+			myframe.contentWindow.postMessage({ state: false, name: "门禁" }, "*"); //childDomain是子页面的源（协议+主机+端口号）
+		},
+		async getData(){
+			xf().then(res =>{ //信发设备
+				console.log(res)
+				// authToken: "1027d408-cb99-11e8-aaa2-00163e046949"
+				// secret: "c614157"
+			})
+			accessControlApi().then(res =>{ // 门禁进出入统计
+				this.data.accessControl = res.data
+			})
+			computerRoomApi().then(res =>{ // 机房温度
+				this.data.computerRoom = res.data
+			})
+			emergencyDisasterPreventionApi().then(res =>{ //应急防灾
+				this.data.emergencyDisasterPrevention = res.data
+			})
+			parkingLotApi().then(res =>{ //停车场统计
+				this.data.parkingLot = res.data
+			})
+			infoApi().then(res =>{ //综合信息统计 告警信息
+				this.data.info = res.data
+			})
+			// typeApi().then(res =>{ //综合信息统计 告警信息
+				shebeifyApi({"current":"1","size":"10"}).then(res =>{
+				this.data.giveAnAlarm = res.data.records
+				})
+			// })
+			console.log(this.$store.state.wsUrl)
+			console.log("ws://" + this.$store.state.wsUrl + "/top/WS/alarmPush")
+			if ("WebSocket" in window) {
+				this.ws = new WebSocket("ws://" + this.$store.state.wsUrl + "/top/WS/alarmPush");
+				console.log(this.ws)
+				this.ws.onopen = ()=> {
+				console.log("websocket连接成功");
+				//this.sendWs({aa:22});
+				};
+				this.ws.onmessage = (res) => { //接收websocket消息
+					let data = JSON.parse(res.data)
+					console.log(data)
+					if(data.describe == "parkingLotALL"){ //停车总数
+						this.data.wparkingLot = data
+					}else if(data.describe == "meeting"){ //会议数据
+						this.item.meetingState = true
+					}else if(data.describe == "emergencyDisasterPreventionALL"){ //应急防灾总数
+						this.data.emergencyDisasterPrevention = data.data
+					}else if(data.describe == "accessControlAll"){ //门禁总数
+						this.data.waccessControl = data
+					}else if(data.describe == "computerRoom"){ //机房温度
+						computerRoomApi().then(res =>{ 
+							this.data.computerRoom = res.data
+						})
+					}else if(data.describe == "infoAdd"){ //手推告警记录
+						infoApi().then(res =>{ //综合信息统计 告警信息
+							this.data.info = res.data
+							console.log(this.data.info)
+						})
+						this.data.wgiveAnAlarm = data
+						
+					  
+					}else if(data.describe == "accessControlSwitch"){ //三维建筑门禁开关
+						let state = JSON.parse(res.data).data.state
+						var myframe = document.getElementById("iframe"); //获取iframe
+						myframe.contentWindow.postMessage({ state: state, name: "门禁" , id: "F13XCMJ2"}, "*"); //childDomain是子页面的源（协议+主机+端口号）
+					}else{ //综合信息统计 、综合列表告警
+						infoApi().then(res =>{ //综合信息统计 告警信息
+							this.data.info = res.data
+						})
+						this.data.wgiveAnAlarm = data
+					}
+				};
+				this.ws.onclose = ()=> { //关闭websocket
+					// 关闭 websocket
+					//console.log("连接已关闭...");
+					//断线重新连接
+					setTimeout(() => {
+						this.getData();
+					}, 2000);
+				}
+			} else {
+				// 浏览器不支持 WebSocket
+				console.log("您的浏览器不支持 WebSocket!");
+			}
+		},
+		sendWs(val){
+			if (this.ws && this.ws.readyState == 1) {
+				this.ws.send(JSON.stringify(val));
+				console.log('发送成功')
+			} else {
+				setTimeout(() => {
+				this.sendWs(val);
+				}, 100);
+			}
+		},
+		giveAnAlarmClick(val){ //告警列表数据传值
+			setTimeout(()=>{
+				this.springFrameState = false
+			},0)
+			setTimeout(()=>{
+				this.item.warningMessage = val	
+				this.item.warningState = true
+				this.springFrameState = true
+			},1)
+			
+		},
+		SpringFrameChange(){
+			this.springFrameState = false
+			this.item.warningState = false
+			this.item.meetingState = false
+			this.item.equipmentState = false
+			this.item.videoState = false
+		},
+		// roomBox(val){
+		// 	val === 'left' ? this.isLeft = !this.isLeft : (this.isRight = !this.isRight)
+		// },
+		// changeImage(val){
+		// 	this.imageList.unshift(...val)
+		// },
+		footerImage(val){
+			this.footerList.unshift(...val)
+			this.footerList = this.footerList.slice(0,7)
+		}
+	},
 };
 </script>
 <style lang="scss" scoped>
 .home {
+  .iframe{
+    position: absolute;
+    width:100%;
+    height:100%;
+    z-index: -1;
+    top:0;
+    left:0;
+    right:0
+  }
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: space-between;
-  padding: 20px;
+  padding: 20px 0 20px 15px;
   box-sizing: border-box;
   position: relative;
   iframe{
@@ -165,7 +324,7 @@ export default {
   .contentClass {
     width: 25%;
     min-width: 500px;
-    height: 100%;
+    height: 102%;
     display: flex;
     flex-direction: column;
     position: relative;
@@ -175,7 +334,7 @@ export default {
   }
   .info {
     width: 100%;
-    height: 44%;
+    height: 40%;
   }
   .accessControl {
     width: 100%;
@@ -183,7 +342,7 @@ export default {
   }
   .monitor {
     width: 100%;
-    height: 28%;
+    height: 32%;
   }
   .parkingLot,
   .conferenceRoom,
@@ -195,42 +354,28 @@ export default {
   .currentState,
   .monitorInfo {
     width: 100%;
-    height: 33.33%;
+    height: 31%;
     overflow: hidden;
     // flex: 1;
   }
-}
-
-.home-AF{
-  padding: 0 30px;
-  height: 100%;
-  display: block;
-  .contentBox{
+  .emergencyDisasterPrevention,.computerRoom{
     width: 100%;
-    height: calc(100% - 160px);
-    display: flex;
-    justify-content: space-between;
+    height:25%;
   }
-  .footerViewAf{
-    width: 100%;
-    height: 160px;
-    padding: 10px 0 20px;
+  .contnetRight{
+    margin-left:15px;
   }
-}
-  .leftIcon{
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: -10px;
-    margin: auto;
-    z-index: 9;
+  .contnetCenter{
+    height:100.4%;
+    border-radius: 6px;
   }
-  .rightIcon{
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right:  -10px;
-    margin: auto;
-    z-index: 9;
+  .accessControl{
+	  height:20%;
   }
+  .giveAnAlarm{
+	  height:45%;
+  }
+  
+}
+
 </style>

vue.config.js

@@ -1,10 +1,64 @@
 module.exports = {
-    publicPath: '/', //部署路径后缀
+    publicPath: '/sdpart', //部署路径后缀
     assetsDir: 'static', // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
     indexPath: 'index.html', // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
     filenameHashing: true, // 文件名hash，默认
     lintOnSave: false, // 开发环境下通过 eslint-loader 在每次保存时 lint 代码
     productionSourceMap: false, // 关闭生产环境的 source map
+    // chainWebpack: (config) => {
+    //     config.module
+    //         .rule('sfw')
+    //         .test(/\.swf$/)
+    //         .use('url-loader')
+    //         .loader('url-loader')
+    //         .options({
+    //             limit: 10000
+    //         })
+    // },
+    chainWebpack(config) {
+
+        config.module
+
+            .rule('swf')
+
+        .test(/\.swf$/)
+
+        .use('url-loader')
+
+        .loader('url-loader')
+
+        .options({
+
+            limit: 1024,
+
+            name: 'file/[path][name].[hash:7].[ext]'
+
+        })
+
+        .end()
+
+    },
+    configureWebpack: config => {
+
+        if (process.env.NODE_ENV === 'production') {
+            // 为生产环境修改配置...
+            config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
+            config.mode = 'production';
+            config["performance"] = { //打包文件大小配置
+                "maxEntrypointSize": 10000000,
+                "maxAssetSize": 30000000
+            }
+        } else {
+            // 为开发环境修改配置...
+        }
+        Object.assign(config, {
+            externals: {
+                'AMap': 'AMap',
+                'AMapUI': 'AMapUI'
+            }
+        })
+
+    },
     devServer: {
         overlay: {
             // 让浏览器 overlay 同时显示警告和错误
@@ -20,7 +74,9 @@ module.exports = {
         proxy: {
             // 配置多个跨域
             '/': {
-                target: 'http://172.16.120.104:8089', //跨域接口的地址
+                //target: 'http://10.108.34.2:80/sdpart', //向日葵
+                //target: 'http://101.133.214.75:81/sdpart/', //线上测试
+                target: 'http://172.16.120.104:8089/', //本地
                 changeOrigin: true,
                 pathRewrite: {
                     '': '/'
@@ -30,5 +86,6 @@ module.exports = {
         headers: {
             'Access-Control-Allow-Origin': '*',
         }
-    }
+    },
+
 };