接口完成

package-lock.json

@@ -1061,7 +1061,6 @@
       "version": "7.14.6",
       "resolved": "https://registry.nlark.com/@babel/runtime/download/@babel/runtime-7.14.6.tgz?cache=0&sync_timestamp=1623708023742&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40babel%2Fruntime%2Fdownload%2F%40babel%2Fruntime-7.14.6.tgz",
       "integrity": "sha1-U1IDvAiS78fexgvcJ7Ls9uQJBi0=",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.4"
       }
@@ -1458,6 +1457,80 @@
         }
       }
     },
+    "@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==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.2",
+        "aes-decrypter": "3.1.2",
+        "global": "^4.4.0",
+        "m3u8-parser": "4.7.0",
+        "mpd-parser": "0.17.0",
+        "mux.js": "5.12.2",
+        "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==",
+          "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"
+          }
+        }
+      }
+    },
+    "@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"
+      }
+    },
+    "@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==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "global": "~4.4.0",
+        "is-function": "^1.0.1"
+      }
+    },
     "@vue/babel-helper-vue-jsx-merge-props": {
       "version": "1.2.1",
       "resolved": "https://registry.nlark.com/@vue/babel-helper-vue-jsx-merge-props/download/@vue/babel-helper-vue-jsx-merge-props-1.2.1.tgz",
@@ -2069,6 +2142,14 @@
       "integrity": "sha1-vxEWycdYxRt6kz0pa3LCIe2UKLY=",
       "dev": true
     },
+    "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"
+      }
+    },
     "ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.nlark.com/ajv/download/ajv-6.12.6.tgz?cache=0&sync_timestamp=1622991493844&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fajv%2Fdownload%2Fajv-6.12.6.tgz",
@@ -4575,6 +4656,11 @@
         }
       }
     },
+    "dom-walk": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
+      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.nlark.com/domain-browser/download/domain-browser-1.2.0.tgz",
@@ -4857,6 +4943,11 @@
         "is-symbol": "^1.0.2"
       }
     },
+    "es5-shim": {
+      "version": "4.5.15",
+      "resolved": "https://registry.npmjs.org/es5-shim/-/es5-shim-4.5.15.tgz",
+      "integrity": "sha512-FYpuxEjMeDvU4rulKqFdukQyZSTpzhg4ScQHrAosrlVpR6GFyaw14f74yn2+4BugniIS0Frpg7TvwZocU4ZMTw=="
+    },
     "escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.nlark.com/escalade/download/escalade-3.1.1.tgz",
@@ -5867,6 +5958,15 @@
       "integrity": "sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=",
       "dev": true
     },
+    "global": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+      "requires": {
+        "min-document": "^2.19.0",
+        "process": "^0.11.10"
+      }
+    },
     "globals": {
       "version": "11.12.0",
       "resolved": "https://registry.nlark.com/globals/download/globals-11.12.0.tgz?cache=0&sync_timestamp=1622088114568&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fglobals%2Fdownload%2Fglobals-11.12.0.tgz",
@@ -6536,6 +6636,11 @@
       "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
       "dev": true
     },
+    "individual": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz",
+      "integrity": "sha1-gzsJfa0jKU52EXqY+zjg2a1hu5c="
+    },
     "infer-owner": {
       "version": "1.0.4",
       "resolved": "https://registry.nlark.com/infer-owner/download/infer-owner-1.0.4.tgz",
@@ -6895,6 +7000,11 @@
       "integrity": "sha1-8Rb4Bk/pCz94RKOJl8C3UFEmnx0=",
       "dev": true
     },
+    "is-function": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
+      "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ=="
+    },
     "is-glob": {
       "version": "4.0.1",
       "resolved": "https://registry.nlark.com/is-glob/download/is-glob-4.0.1.tgz",
@@ -7193,6 +7303,11 @@
         "verror": "1.10.0"
       }
     },
+    "keycode": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
+      "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ="
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/killable/download/killable-1.0.1.tgz",
@@ -7446,6 +7561,11 @@
         "yallist": "^3.0.2"
       }
     },
+    "m3u8-parser": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-2.1.0.tgz",
+      "integrity": "sha1-yBcDKewc1RXQ1Yu4t2LamJbLA2g="
+    },
     "make-dir": {
       "version": "3.1.0",
       "resolved": "https://registry.npm.taobao.org/make-dir/download/make-dir-3.1.0.tgz",
@@ -7634,6 +7754,14 @@
       "integrity": "sha1-ggyGo5M0ZA6ZUWkovQP8qIBX0CI=",
       "dev": true
     },
+    "min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
+      "requires": {
+        "dom-walk": "^0.1.0"
+      }
+    },
     "mini-css-extract-plugin": {
       "version": "0.9.0",
       "resolved": "https://registry.nlark.com/mini-css-extract-plugin/download/mini-css-extract-plugin-0.9.0.tgz",
@@ -7777,6 +7905,17 @@
         "run-queue": "^1.0.3"
       }
     },
+    "mpd-parser": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-0.17.0.tgz",
+      "integrity": "sha512-oKS5G0jCcHHJ3sHYlcLeM9Xcbuixl08eAx7QW0Th7ChlZiI0YvLtGaHE/L0aKUBJFNvtkeksIr8XgJgSBBsS4g==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.2",
+        "global": "^4.4.0",
+        "xmldom": "^0.5.0"
+      }
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npm.taobao.org/ms/download/ms-2.1.2.tgz?cache=0&sync_timestamp=1607433905701&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fms%2Fdownload%2Fms-2.1.2.tgz",
@@ -7805,6 +7944,11 @@
       "integrity": "sha1-FjDEKyJR/4HiooPelqVJfqkuXg0=",
       "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=="
+    },
     "mz": {
       "version": "2.7.0",
       "resolved": "https://registry.npm.taobao.org/mz/download/mz-2.7.0.tgz",
@@ -8514,6 +8658,11 @@
         "safe-buffer": "^5.1.1"
       }
     },
+    "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=="
+    },
     "parse-json": {
       "version": "5.2.0",
       "resolved": "https://registry.npm.taobao.org/parse-json/download/parse-json-5.2.0.tgz?cache=0&sync_timestamp=1610966646988&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fparse-json%2Fdownload%2Fparse-json-5.2.0.tgz",
@@ -8672,6 +8821,11 @@
         "pinkie": "^2.0.0"
       }
     },
+    "pkcs7": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-0.2.3.tgz",
+      "integrity": "sha1-ItYGZtAQZcXyRDkJjkpIMEUic74="
+    },
     "pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npm.taobao.org/pkg-dir/download/pkg-dir-4.2.0.tgz",
@@ -9332,8 +9486,7 @@
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.nlark.com/process/download/process-0.11.10.tgz",
-      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
-      "dev": true
+      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
     },
     "process-nextick-args": {
       "version": "2.0.1",
@@ -9654,8 +9807,7 @@
     "regenerator-runtime": {
       "version": "0.13.7",
       "resolved": "https://registry.nlark.com/regenerator-runtime/download/regenerator-runtime-0.13.7.tgz",
-      "integrity": "sha1-ysLazIoepnX+qrrriugziYrkb1U=",
-      "dev": true
+      "integrity": "sha1-ysLazIoepnX+qrrriugziYrkb1U="
     },
     "regenerator-transform": {
       "version": "0.14.5",
@@ -9998,6 +10150,14 @@
         "aproba": "^1.1.1"
       }
     },
+    "rust-result": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/rust-result/-/rust-result-1.0.0.tgz",
+      "integrity": "sha1-NMdbLm3Dn+WHXlveyFteD5FTb3I=",
+      "requires": {
+        "individual": "^2.0.0"
+      }
+    },
     "rxjs": {
       "version": "6.6.7",
       "resolved": "https://registry.nlark.com/rxjs/download/rxjs-6.6.7.tgz?cache=0&sync_timestamp=1621619391474&other_urls=https%3A%2F%2Fregistry.nlark.com%2Frxjs%2Fdownload%2Frxjs-6.6.7.tgz",
@@ -10013,6 +10173,14 @@
       "integrity": "sha1-mR7GnSluAxN0fVm9/St0XDX4go0=",
       "dev": true
     },
+    "safe-json-parse": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
+      "integrity": "sha1-fA9XjPzNEtM6ccDgVBPi7KFx6qw=",
+      "requires": {
+        "rust-result": "^1.0.0"
+      }
+    },
     "safe-regex": {
       "version": "1.1.0",
       "resolved": "https://registry.npm.taobao.org/safe-regex/download/safe-regex-1.1.0.tgz",
@@ -11457,6 +11625,11 @@
       "integrity": "sha1-zy04vcNKE0vK8QkcQfZhni9nLQA=",
       "dev": true
     },
+    "tsml": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tsml/-/tsml-1.0.1.tgz",
+      "integrity": "sha1-ifghi52eJX9H1/a1bQHFpNLGj8M="
+    },
     "tty-browserify": {
       "version": "0.0.0",
       "resolved": "https://registry.nlark.com/tty-browserify/download/tty-browserify-0.0.0.tgz",
@@ -11739,6 +11912,11 @@
         "requires-port": "^1.0.0"
       }
     },
+    "url-toolkit": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.3.tgz",
+      "integrity": "sha512-Da75SQoxsZ+2wXS56CZBrj2nukQ4nlGUZUP/dqUBG5E1su5GKThgT94Q00x81eVII7AyS1Pn+CtTTZ4Z0pLUtQ=="
+    },
     "use": {
       "version": "3.1.1",
       "resolved": "https://registry.npm.taobao.org/use/download/use-3.1.1.tgz",
@@ -11837,6 +12015,204 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "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==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/http-streaming": "2.9.2",
+        "@videojs/vhs-utils": "^3.0.2",
+        "@videojs/xhr": "2.5.1",
+        "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",
+        "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==",
+          "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==",
+          "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"
+          }
+        }
+      }
+    },
+    "videojs-contrib-hls": {
+      "version": "5.15.0",
+      "resolved": "https://registry.npmjs.org/videojs-contrib-hls/-/videojs-contrib-hls-5.15.0.tgz",
+      "integrity": "sha512-18zbMYZ0XRBKTPEayA9bFTWWrqhT9b4G8+zf0czJLD7Epe5PcK1I/3dflTHQeQ5rwlWir+/XnFU3sMg/B2MMcw==",
+      "requires": {
+        "aes-decrypter": "1.0.3",
+        "global": "^4.3.0",
+        "m3u8-parser": "2.1.0",
+        "mux.js": "4.3.2",
+        "url-toolkit": "^2.1.3",
+        "video.js": "^5.19.1 || ^6.2.0",
+        "videojs-contrib-media-sources": "4.7.2",
+        "webwackify": "0.1.6"
+      },
+      "dependencies": {
+        "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"
+          },
+          "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"
+              }
+            }
+          }
+        },
+        "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"
+          }
+        }
+      }
+    },
+    "videojs-contrib-media-sources": {
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/videojs-contrib-media-sources/-/videojs-contrib-media-sources-4.7.2.tgz",
+      "integrity": "sha512-e6iCHWBFuV05EGo7v+pS9iepObXnJ9joms467gzi8ZjpKVb3ifha9M0Ja24Rd8JfvYpzjltsgDVtGFDvIg4hQQ==",
+      "requires": {
+        "global": "^4.3.0",
+        "mux.js": "4.3.2",
+        "video.js": "^5.17.0 || ^6.2.0",
+        "webwackify": "0.1.6"
+      },
+      "dependencies": {
+        "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"
+          },
+          "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"
+              }
+            }
+          }
+        },
+        "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"
+          }
+        }
+      }
+    },
+    "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-ie8": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/videojs-ie8/-/videojs-ie8-1.1.2.tgz",
+      "integrity": "sha1-oj09hgitcZK2nGB3/E64SJmNNdk=",
+      "requires": {
+        "es5-shim": "^4.5.1"
+      }
+    },
+    "videojs-vtt.js": {
+      "version": "0.15.3",
+      "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.3.tgz",
+      "integrity": "sha512-5FvVsICuMRx6Hd7H/Y9s9GDeEtYcXQWzGMS+sl4UX3t/zoHp3y+isSfIPRochnTH7h+Bh1ILyC639xy9Z6kPag==",
+      "requires": {
+        "global": "^4.3.1"
+      }
+    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npm.taobao.org/vm-browserify/download/vm-browserify-1.1.2.tgz",
@@ -12696,6 +13072,11 @@
       "integrity": "sha1-f4RzvIOd/YdgituV1+sHUhFXikI=",
       "dev": true
     },
+    "webwackify": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/webwackify/-/webwackify-0.1.6.tgz",
+      "integrity": "sha512-pGcw1T3HpNnM/UTRQqqRkkkzythSLts05mB+7Gr00B+0VbL0m39dFL5g20rSIEUt9Wrpw+/8k+snxRlUFHhcqA=="
+    },
     "which": {
       "version": "1.3.1",
       "resolved": "https://registry.nlark.com/which/download/which-1.3.1.tgz",
@@ -12842,11 +13223,42 @@
         "async-limiter": "~1.0.0"
       }
     },
+    "xhr": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/xhr/-/xhr-2.4.0.tgz",
+      "integrity": "sha1-4W5mpF+GmGHu76tBbV7/ci3ECZM=",
+      "requires": {
+        "global": "~4.3.0",
+        "is-function": "^1.0.1",
+        "parse-headers": "^2.0.0",
+        "xtend": "^4.0.0"
+      },
+      "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="
+        }
+      }
+    },
+    "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",
-      "integrity": "sha1-u3J3n1+kZRhrH0OPZ0+jR/2121Q=",
-      "dev": true
+      "integrity": "sha1-u3J3n1+kZRhrH0OPZ0+jR/2121Q="
     },
     "y18n": {
       "version": "4.0.3",

package.json

@@ -11,6 +11,8 @@
     "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"

src/App.vue

@@ -3,16 +3,14 @@
     <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'" />
-    <footer-view-af v-if="$store.state.typeFire === 1" class="footerViewAf"></footer-view-af>
   </div>
 </template>
 
 <script>
 import headerView from './components/SD-school/header-view'
 import headerViewAf from './components/AF-exhibition/header-view'
-import footerViewAf from './components/AF-exhibition/footer'
 export default {
-  components:{headerView,headerViewAf,footerViewAf},
+  components:{headerView,headerViewAf},
   data() {
     return {
       resizeTime: true,
@@ -57,7 +55,7 @@ export default {
   }
   .content-AF{
     width: 100%;
-    height: calc(100% - 245px);
+    height: calc(100% - 85px);
     padding-bottom: 0px;
   }
   .headerView{
@@ -68,10 +66,5 @@ export default {
     width: 100%;
     height: 85px;
   }
-  .footerViewAf{
-    width: 100%;
-    height: 160px;
-    padding: 10px 30px 20px;
-  }
 }
 </style>

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

@@ -9,17 +9,17 @@
     <el-row class="contentBox">
       <el-col>
         <div ref="echartD1" class="echartD"></div>
-        <div class="equipmentNumber greenNumber">1280</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">1280</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">1280</div>
+        <div class="equipmentNumber blueNumber">{{resList.unOnline}}</div>
         <div class="equipmentName">离线总数</div>
       </el-col>
     </el-row>
@@ -30,25 +30,47 @@
 import * as echarts from "echarts";
 import echartsGet from "./echart";
 export default {
+  props:['resInfo'],
   data() {
     return {
       isCheck: "info",
       option: null,
+      resList:{}
     };
   },
-  mounted() {
-    echarts.init(this.$refs.echartD1).setOption(echartsGet(.2, ['rgba(47,255,91,0)',`rgba(47,255,91,.4)`,'rgba(47,255,91,1)',],'处置率'));
-    echarts.init(this.$refs.echartD2).setOption(echartsGet(.8, ['rgba(225,199,47,0)','rgba(225,199,47,.4)','rgba(225,199,47,1)',],'告警率'));
-    echarts.init(this.$refs.echartD3).setOption(echartsGet(.4, ['rgba(5,60,125,0)','rgba(47,174,225,.4)', 'rgba(47,174,225,1)'],'离线率'));
-  },
   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(){
+       let res = await this.$axios.get(this.resInfo.apiAddr + '?' +this.$qs.stringify({
+        applicationCode: this.resInfo.applicationCode
+      }))
+      if(res.success){
+        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)'],'离线率'));
+    },
   },
-  methods: {},
 };
 </script>
 

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

@@ -1,76 +1,66 @@
 <template>
   <el-row class="mainBox">
-    <el-col>
-      <img src="../../../assets/image-af/signal.png" alt="" class="signal">
-      <img src="../../../assets/image-af/electric.png" alt="" class="electric">
-      <span class="boxName">烟感探测</span>
-      <el-row class="contentInfo">
-        <el-col>36℃</el-col>
-      </el-row>
-    </el-col>
-    <el-col>
-      <img src="../../../assets/image-af/signal.png" alt="" class="signal">
-      <img src="../../../assets/image-af/electric.png" alt="" class="electric">
-      <span class="boxName">电器火灾监控</span>
+    <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>36℃</el-col>
-        <el-col>220V</el-col>
-        <el-col>36A</el-col>
-      </el-row>
-    </el-col>
-    <el-col>
-      <img src="../../../assets/image-af/signal.png" alt="" class="signal">
-      <img src="../../../assets/image-af/electric.png" alt="" class="electric">
-      <span class="boxName">门体开启状态探测</span>
-      <el-row class="contentInfo">
-        <el-col>关闭</el-col>
-      </el-row>
-    </el-col>
-    <el-col>
-      <img src="../../../assets/image-af/signal.png" alt="" class="signal">
-      <img src="../../../assets/image-af/electric.png" alt="" class="electric">
-      <span class="boxName">紧急求助</span>
-      <el-row class="contentInfo">
-        <el-col>正常</el-col>
-      </el-row>
-    </el-col>
-    <el-col>
-      <img src="../../../assets/image-af/signal.png" alt="" class="signal">
-      <img src="../../../assets/image-af/electric.png" alt="" class="electric">
-      <span class="boxName">地磁车辆检测</span>
-      <el-row class="contentInfo">
-        <el-col>车位变空</el-col>
-      </el-row>
-    </el-col>
-    <el-col>
-      <img src="../../../assets/image-af/signal.png" alt="" class="signal">
-      <img src="../../../assets/image-af/electric.png" alt="" class="electric">
-      <span class="boxName">窨井盖探测</span>
-      <el-row class="contentInfo">
-        <el-col>井盖关闭</el-col>
+        <el-col v-html="item.status"></el-col>
       </el-row>
     </el-col>
     <el-col>
-      <img src="../../../assets/image-af/signal.png" alt="" class="signal">
-      <img src="../../../assets/image-af/electric.png" alt="" class="electric">
-      <span class="boxName">可燃气体探测器</span>
-      <el-row class="contentInfo">
-        <el-col>无可燃气体</el-col>
-      </el-row>
+      <!-- <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%'>
+        <source id="source" src="http://172.16.120.243:10008/record/test/20210730/out.m3u8" type="application/x-mpegURL"/>
+    </video>
     </el-col>
     <el-col>
-      <img src="../../../assets/image-af/test1.png" alt="" class="videoBox">
-    </el-col>
-    <el-col>
-      <img src="../../../assets/image-af/test1.png" alt="" class="videoBox">
+      <video id="myVideo2" class="video-js videoBox" controls preload="auto" data-setup='{}' style='width: 100%;height: 100%'>
+          <source id="source" src="http://172.16.120.243:10008/record/test/20210730/out.m3u8" type="application/x-mpegURL"/>
+      </video>
       <img src="../../../assets/image-af/red.png" alt="" class="redImage">
     </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
+    }
+  },
+  mounted(){
+    this.videoPlay()
+  },
+  methods:{
+    videoPlay(){
+      // videojs 简单使用
+      this.myVideo = videojs('myVideo', {
+          bigPlayButton: false,
+          textTrackDisplay: false,
+          posterImage: false,
+          errorDisplay: false,
+      })
+      this.myVideo.play()// 视频播放
+      // videojs 简单使用
+      this.myVideo2 = videojs('myVideo2', {
+          bigPlayButton: false,
+          textTrackDisplay: false,
+          posterImage: false,
+          errorDisplay: false,
+      })
+      this.myVideo2.play()// 视频播放
+    }
+  }
 }
 </script>
 

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

@@ -1,6 +1,18 @@
 import * as echarts from "echarts";
 
-export default function getData(params = [1, 2, 3, 4, 5, 6, 7, ]) {
+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)",
@@ -40,15 +52,7 @@ export default function getData(params = [1, 2, 3, 4, 5, 6, 7, ]) {
         xAxis: {
             type: "category",
             boundaryGap: false,
-            data: [
-                "1",
-                "2",
-                "3",
-                "4",
-                "5",
-                "6",
-                "7",
-            ],
+            data: resList.map(val => val.createTime),
             axisLabel: {
                 color: "#FFFFFF",
                 // rotate: 50,
@@ -85,7 +89,7 @@ export default function getData(params = [1, 2, 3, 4, 5, 6, 7, ]) {
                         },
                     ]),
                 },
-                data: [12, 13, 15, 17, 19, 10, 123] || params,
+                data: resList.map(val => val.count),
             },
             {
                 name: "离线数",
@@ -104,7 +108,7 @@ export default function getData(params = [1, 2, 3, 4, 5, 6, 7, ]) {
                         },
                     ]),
                 },
-                data: [21, 31, 51, 71, 91, 110, 213],
+                data: resList2.map(val => val.count),
             },
         ],
     }

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

@@ -16,21 +16,36 @@
 import * as echarts from "echarts";
 import echartsGet from "./echart";
 export default {
+  props:['resInfo'],
   data() {
     return {
       isCheck: "info",
       option: null,
+      resList:{}
     };
   },
-  mounted() {
-    echarts.init(this.$refs.echartD).setOption(echartsGet(.4));
+  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));
+      }
+    },
   },
-  methods: {},
 };
 </script>
 

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

@@ -7,18 +7,16 @@
       </el-col>
     </el-row>
     <el-row class="contentBox" :gutter="10">
-        <el-col>
-          <img src="../../../assets/image-af/monitor.png" alt="">
-        </el-col>
-        <el-col>
-          <img src="../../../assets/image-af/monitor.png" alt="">
-        </el-col>
+      <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: [],
@@ -38,10 +36,26 @@ export default {
     box-sizing: border-box;
     padding: 10px 15px;
     font-size: 16px;
-    .el-col{
-      width: 100%;
+    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%;
-      img{
+      &:nth-child(n + 3) {
+        margin-top: 10px;
+      }
+      img {
         width: 100%;
         height: 100%;
       }

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

@@ -0,0 +1,91 @@
+import * as echarts from "echarts";
+
+export default function getData(params) {
+    console.log(params)
+    return {
+        title: {
+            show: true,
+            text: "总数",
+            left: "center",
+            right: "center",
+            bottom: "center",
+            top: "52%",
+            center: 20,
+            textStyle: {
+                color: "#FFF",
+                fontSize: 18,
+                align: "center",
+                fontWeight: "100",
+                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
+            },
+        },
+        series: [{
+            type: "gauge",
+            radius: document.body.clientHeight > 1000 ? '90%' : "100%",
+            // center: ["50%","70%"],
+            splitNumber: 5, //刻度数量
+            startAngle: -260, //开始角度 左侧角度
+            endAngle: 100, //结束角度 右侧
+            z: 4,
+            axisLine: {
+                show: true,
+                // roundCap: true,
+                lineStyle: {
+                    width: document.body.clientHeight > 1000 ? 20 : 15,
+                    color: [
+                        [
+                            (params.using / params.toatl) > 1 ? 1 : (params.using / params.toatl).toFixed(8),
+                            new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                                { offset: 0, color: "#ecc242" },
+                                { offset: 1, color: "#FDC51A" },
+                            ]),
+                        ],
+                        [1, "#1AF3FD"],
+                    ],
+                },
+            },
+            //分隔线样式。
+            splitLine: {
+                show: false,
+            },
+            axisLabel: {
+                show: false,
+            },
+            axisTick: {
+                show: false,
+            },
+            pointer: {
+                show: false,
+                length: "70%",
+                width: "2%",
+            },
+            title: {
+                show: false,
+                offsetCenter: [0, 0], // x, y，单位px
+                textStyle: {
+                    fontWeight: "100",
+                    color: "#0ab7ff",
+                    fontSize: 30,
+                },
+            },
+            //仪表盘详情，用于显示数据。
+            detail: {
+                show: true,
+                offsetCenter: [0, "-20%"],
+                color: "#ffffff",
+                textStyle: {
+                    fontSize: 36,
+                    color: "#FF3A05",
+                    fontWeight: "500",
+                    fontFamily: 'Impact Regular, Impact Regular-Regular',
+                },
+                formatter: function() {
+                    return params.toatl || 0;
+                },
+            },
+            data: [{
+                value: params,
+            }, ],
+        }, ]
+    }
+}

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

@@ -1,78 +1,132 @@
 <template>
-  <el-row class="mianBox-af">
+  <el-row class="mianBox mianBox-af">
     <el-row class="headerBox">
       <el-col class="title">
         <img src="../../../assets/image-af/title4.png" alt="" />
-        设备筛选
+        {{resInfo.typeName || ''}}
       </el-col>
     </el-row>
-    <el-row class="contentBox">
-      <el-row style="width: 100%; height: 100%">
-        <el-checkbox-group v-model="checkList">
-          <el-checkbox label="复选框 A"></el-checkbox>
-          <el-checkbox label="复选框 B"></el-checkbox>
-          <el-checkbox label="复选框 C"></el-checkbox>
-          <el-checkbox label="复选框 C"></el-checkbox>
-          <el-checkbox label="复选框 C"></el-checkbox>
-          <el-checkbox label="复选框 C"></el-checkbox>
-          <el-checkbox label="复选框 C"></el-checkbox>
-          <el-checkbox label="复选框 C"></el-checkbox>
-          <el-checkbox label="复选框 C"></el-checkbox>
-          <el-checkbox label="复选框 C"></el-checkbox>
-          <el-checkbox label="复选框 C"></el-checkbox>
-          <el-checkbox label="复选框 C"></el-checkbox>
-        </el-checkbox-group>
+    <el-row class="roomLine">
+      <div ref="echartD" style="width: 50%; height: 100%"></div>
+      <el-row class="roomNumber">
+        <el-col>
+          <el-col>在用数</el-col>
+          <el-col class="yellow">{{resList && resList.using || 0}}</el-col>
+        </el-col>
+        <el-col>
+          <el-col>空闲数</el-col>
+          <el-col class="blue">{{resList && resList.toatl - resList.using || 0}}</el-col>
+        </el-col>
       </el-row>
     </el-row>
+    <el-row class="roomTable">
+      <el-table
+        :data="dataMap"
+        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>
 </template>
 
 <script>
+import * as echarts from "echarts";
+import echartsGet from "./echart";
 export default {
+  props:['resInfo'],
   data() {
     return {
-      checkList: [],
+      resList: null,
+      dataMap: [],
+      headerData: [
+        { name: "会议室名称", prop: "meetingRoomName" },
+        { name: "会议名称", prop: "meetingTheme" },
+        { name: "开始时间", prop: "meetIngStartTime" },
+        { name: "截止时间", prop: "meetingEndTime" },
+      ],
     };
   },
-  mounted() {},
-  methods: {},
+  watch: {
+    "$store.state.windowWidth"() {
+      echarts.dispose(this.$refs.echartD)
+      echarts.init(this.$refs.echartD).setOption(echartsGet(echartsGet(this.resList)))
+    },
+    resInfo(){
+      this.getData()
+    }
+  },
+  mounted() {
+    this.getData()
+  },
+  methods:{
+    async getData(){
+       let res = await this.$axios.get(this.resInfo.apiAddr + '?' +this.$qs.stringify({
+        applicationCode: this.resInfo.applicationCode
+      }))
+      this.resList = res.pageList
+      this.dataMap = res.pageList.list.map((val)=>{
+        return {
+          ...val,
+          meetIngStartTime: new Date(val.meetIngStartTime).Format("yyyy-MM-dd hh:mm:ss").split(' ')[1],
+          meetingEndTime: new Date(val.meetingEndTime).Format("yyyy-MM-dd hh:mm:ss").split(' ')[1]
+        }
+      })
+      echarts.init(this.$refs.echartD).setOption(echartsGet(this.resList))
+    },
+    resize() {
+      echarts.init(this.$refs.echartD).resize();
+    },
+  }
 };
 </script>
 
 <style lang="scss" scoped>
-.mianBox-af {
-  .contentBox {
+.mianBox {
+  .roomLine {
+    flex: 1;
     width: 100%;
     display: flex;
-    padding: 10px;
-    box-sizing: border-box;
-    scrollbar-width: none; /* firefox */
-    -ms-overflow-style: none; /* IE 10+ */
-    overflow-x: hidden;
-    overflow-y: auto;
-    padding: 5px 15px;
-    &::-webkit-scrollbar {
-      display: none; /* Chrome Safari */
-    }
-    .el-checkbox {
+    .roomNumber {
+      font-family: Impact Regular, Impact Regular-Regular;
       width: 50%;
-      margin-right: 0;
-      color: #f1f1f1;
-      font-size: 16px;
-      margin: 5px 0;
-      /deep/ .el-checkbox__inner {
-        border-color: #1666c7;
-        background-color: #012149;
-      }
-      /deep/ .el-checkbox__label {
-        color: #f1f1f1 !important;
-      }
-      /deep/ .is-checked {
-        .el-checkbox__inner {
-          background-color: #1666c7;
+      display: flex;
+      flex-direction: column;
+      // padding: 10px 30px;
+      align-items: flex-start;
+      justify-content: center;
+      & > .el-col {
+        display: flex;
+        height: 50px;
+        width: 160px;
+        box-shadow: inset 0 0 16px 1px #3573fc;
+        border: 1px solid transparent;
+        line-height: 50px;
+        text-align: center;
+        font-size: 16px;
+        & > .el-col:last-child {
+          font-size: 25px;
         }
       }
+      & > .el-col:first-child {
+        margin-bottom: 20px;
+      }
     }
   }
+  .roomTable {
+    height: 90px;
+    padding: 10px;
+    width: 100%;
+  }
 }
 </style>

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

@@ -8,7 +8,7 @@
     </el-row>
     <el-row class="contentBox">
       <el-row style="width: 100%;height: 100%; margin: 0 auto">
-      <el-table :data="dataMap" class="transparentTableRow" height="100%" style="width: 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>
@@ -19,32 +19,81 @@
 
 <script>
 export default {
+  props:['resInfo'],
   data() {
     return {
       isCheck: "info",
       option: null,
-      dataMap: [
-        { name: "1会议室", nameF: "会议", time: "12:00:00-15:00:00" },
-        { name: "1会议室", nameF: "会议", time: "12:00:00-15:00:00" },
-        { name: "1会议室", nameF: "会议", time: "12:00:00-15:00:00" },
-        { name: "1会议室", nameF: "会议", time: "12:00:00-15:00:00" },
-        { name: "1会议室", nameF: "会议", time: "12:00:00-15:00:00" },
-        { name: "1会议室", nameF: "会议", time: "12:00:00-15:00:00" },
-        { name: "1会议室", nameF: "会议", time: "12:00:00-15:00:00" },
-        { name: "1会议室", nameF: "会议", time: "12:00:00-15:00:00" },
-      ],
+      resList: [],
       headerData: [
-        { name: "告警时间", prop: "name" },
-        { name: "告警设备", prop: "time" },
-        { name: "单位名称", prop: "nameF" },
-        { name: "报告内容", prop: "nameFF" },
+        { name: "点位", prop: "alarmDeviceName" },
+        { name: "告警时间", prop: "alarmTime" },
+        { name: "类型", prop: "deviceType" },
+        { name: "内容详情", prop: "alarmContent" },
       ],
     };
   },
-  mounted() {
-    
+  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);
+      }
+    },
   },
-  methods: {},
 };
 </script>
 

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

@@ -60,7 +60,7 @@ export default {
   watch: {
     "$store.state.windowWidth"() {
       echarts.dispose(this.$refs.echartD)
-      echarts.init(this.$refs.echartD).setOption(echartsGet())
+      echarts.init(this.$refs.echartD).setOption(echartsGet(this.resList))
     },
     resInfo(){
       this.getData()

src/plugins/axios.js

@@ -5,6 +5,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://121.40.217.77:8082';
 // 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/store/index.js

@@ -5,9 +5,9 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
     state: {
-        windowWidth: 0,
-        typeFire: 0,
-        wsUrl: '172.16.120.92:8081',
+        windowWidth: 1920 + 1080,
+        typeFire: 1,
+        wsUrl: '172.16.120.92:8084',
         weaterRes: {}
     },
     mutations: {

src/views/Home.vue

@@ -28,9 +28,11 @@
         <!-- <iframe src="https://www.thingjs.com/s/3a22743aed245a60c7ae7d4f?params=105b0f77fd24654d4eebc434e9" frameborder="0"></iframe>  -->
       <el-collapse-transition>
         <el-row class="contentClass contnetLift" v-show="isLeft">
-          <equipment class="equipment"></equipment>
-          <give-an-alarm-af class="giveAnAlarmAf"></give-an-alarm-af>
-          <warning-info class="warningInfo"></warning-info>
+          <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">
@@ -39,12 +41,15 @@
       </el-row>
       <el-collapse-transition>
         <el-row class="contentClass contnetRight" v-show="isRight">
-          <screen-equipment class="screenEquipment"></screen-equipment>
-          <current-state class="currentState"></current-state>
-          <monitor-info class="monitorInfo"></monitor-info>
+          <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>
 </template>
 
@@ -64,6 +69,7 @@ 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'
 
 
 export default {
@@ -82,12 +88,23 @@ export default {
     screenEquipment,
     currentState,
     monitorInfo,
+    footerViewAf,
   },
   data() {
     return {
       isLeft: true,
       isRight: true,
-      resList:[]
+      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() {
@@ -107,6 +124,15 @@ export default {
     },
     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)
     }
   },
 };
@@ -143,7 +169,6 @@ export default {
   }
   .contnetCenter{
     flex: 1;
-    z-index: -1;
   }
   .info {
     width: 100%;
@@ -175,6 +200,19 @@ export default {
 
 .home-AF{
   padding: 0 30px;
+  height: 100%;
+  display: block;
+  .contentBox{
+    width: 100%;
+    height: calc(100% - 160px);
+    display: flex;
+    justify-content: space-between;
+  }
+  .footerViewAf{
+    width: 100%;
+    height: 160px;
+    padding: 10px 0 20px;
+  }
 }
   .leftIcon{
     position: absolute;

vue.config.js

@@ -19,7 +19,7 @@ module.exports = {
         proxy: {
             // 配置多个跨域
             '/': {
-                target: 'http://172.16.120.92:8081/', //跨域接口的地址
+                target: 'http://172.16.120.92:8084/', //跨域接口的地址
                 changeOrigin: false,
                 pathRewrite: {
                     '': '/'