指挥中心

commandCenter/package-lock.json

@@ -2414,6 +2414,14 @@
       "integrity": "sha512-tNEZYz5G/zYunxFm7sfhAxkXEuLj3K6BKwv6ZURlsF6yiUQ65z0Q2wZW9L5cPUl9ocofGvXOdFYbFHp0+6MOig==",
       "dev": true
     },
+    "aes-decrypter": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/aes-decrypter/-/aes-decrypter-1.0.3.tgz",
+      "integrity": "sha512-rsx8pfx7wJsn+ziYbpJ8XA5c93hKAtBCrfydxJqJCMT+qfjipd/B5wC2xHtBcoxyvlqJcpeAo3K55t0lXOn9yQ==",
+      "requires": {
+        "pkcs7": "^0.2.3"
+      }
+    },
     "ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmmirror.com/ajv/-/ajv-6.12.6.tgz",
@@ -5373,6 +5381,11 @@
         }
       }
     },
+    "dom-walk": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmmirror.com/dom-walk/-/dom-walk-0.1.2.tgz",
+      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -5441,8 +5454,7 @@
     "duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmmirror.com/duplexer/-/duplexer-0.1.2.tgz",
-      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
-      "dev": true
+      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
     },
     "duplexify": {
       "version": "3.7.1",
@@ -5661,6 +5673,11 @@
         "is-symbol": "^1.0.2"
       }
     },
+    "es5-shim": {
+      "version": "4.6.7",
+      "resolved": "https://registry.npmmirror.com/es5-shim/-/es5-shim-4.6.7.tgz",
+      "integrity": "sha512-jg21/dmlrNQI7JyyA2w7n+yifSxBng0ZralnSfVZjoCawgNTCnS+yBCyVM9DL5itm7SUnDGgv7hcq2XCZX4iRQ=="
+    },
     "escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmmirror.com/escalade/-/escalade-3.1.1.tgz",
@@ -5877,6 +5894,20 @@
       "integrity": "sha512-z7IyloorXvKbFx9Bpie2+vMJKKx1fH1EN5yiTfp8CiLOTptSYy1g8H4yDpGlEdshL1PBiFtBHepF2cNsqeEeFQ==",
       "dev": true
     },
+    "event-stream": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/event-stream/-/event-stream-4.0.1.tgz",
+      "integrity": "sha512-qACXdu/9VHPBzcyhdOWR5/IahhGMf0roTeZJfzz077GwylcDd90yOHLouhmv7GJ5XzPi6ekaQWd8AvPP2nOvpA==",
+      "requires": {
+        "duplexer": "^0.1.1",
+        "from": "^0.1.7",
+        "map-stream": "0.0.7",
+        "pause-stream": "^0.0.11",
+        "split": "^1.0.1",
+        "stream-combiner": "^0.2.2",
+        "through": "^2.3.8"
+      }
+    },
     "eventemitter3": {
       "version": "4.0.7",
       "resolved": "https://registry.npmmirror.com/eventemitter3/-/eventemitter3-4.0.7.tgz",
@@ -6476,6 +6507,11 @@
       "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
       "dev": true
     },
+    "from": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmmirror.com/from/-/from-0.1.7.tgz",
+      "integrity": "sha512-twe20eF1OxVxp/ML/kq2p1uc6KvFK/+vs8WjEbeKmV2He22MKm7YF2ANIt+EOqhJ5L3K/SuuPhk0hWQDjOM23g=="
+    },
     "from2": {
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/from2/-/from2-2.3.0.tgz",
@@ -6695,6 +6731,22 @@
       "integrity": "sha512-Iozmtbqv0noj0uDDqoL0zNq0VBEfK2YFoMAZoxJe4cwphvLR+JskfF30QhXHOR4m3KrE6NLRYw+U9MRXvifyig==",
       "dev": true
     },
+    "global": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmmirror.com/global/-/global-4.3.2.tgz",
+      "integrity": "sha512-/4AybdwIDU4HkCUbJkZdWpe4P6vuw/CUtu+0I1YlLIPe7OlUO7KNJ+q/rO70CW2/NW6Jc6I62++Hzsf5Alu6rQ==",
+      "requires": {
+        "min-document": "^2.19.0",
+        "process": "~0.5.1"
+      },
+      "dependencies": {
+        "process": {
+          "version": "0.5.2",
+          "resolved": "https://registry.npmmirror.com/process/-/process-0.5.2.tgz",
+          "integrity": "sha512-oNpcutj+nYX2FjdEW7PGltWhXulAnFlM0My/k48L90hARCOJtvBbQXc/6itV2jDvU5xAAtonP+r6wmQgCcbAUA=="
+        }
+      }
+    },
     "globals": {
       "version": "13.15.0",
       "resolved": "https://registry.npmmirror.com/globals/-/globals-13.15.0.tgz",
@@ -7785,6 +7837,11 @@
       "resolved": "https://registry.npmmirror.com/indexof/-/indexof-0.0.1.tgz",
       "integrity": "sha512-i0G7hLJ1z0DE8dsqJa2rycj9dBmNKgXBvotXtZYXakU9oivfB9Uj2ZBC27qqef2U58/ZLwalxa1X/RDCdkHtVg=="
     },
+    "individual": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/individual/-/individual-2.0.0.tgz",
+      "integrity": "sha512-pWt8hBCqJsUWI/HtcfWod7+N9SgAqyPEaF7JQjwzjn5vGrpg6aQ5qeAFQ7dx//UH4J1O+7xqew+gCeeFt6xN/g=="
+    },
     "infer-owner": {
       "version": "1.0.4",
       "resolved": "https://registry.npmmirror.com/infer-owner/-/infer-owner-1.0.4.tgz",
@@ -8195,6 +8252,11 @@
         "number-is-nan": "^1.0.0"
       }
     },
+    "is-function": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/is-function/-/is-function-1.0.2.tgz",
+      "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ=="
+    },
     "is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmmirror.com/is-glob/-/is-glob-4.0.3.tgz",
@@ -8615,6 +8677,11 @@
       "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "lodash.assign": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/lodash.assign/-/lodash.assign-4.2.0.tgz",
+      "integrity": "sha512-hFuH8TY+Yji7Eja3mGiuAxBqLagejScbG8GbG0j6o9vzn0YL14My+ktnqtZgFTosKymC9/44wP6s7xyuLfnClw=="
+    },
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmmirror.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -8768,6 +8835,11 @@
         "yallist": "^2.1.2"
       }
     },
+    "m3u8-parser": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/m3u8-parser/-/m3u8-parser-2.1.0.tgz",
+      "integrity": "sha512-WbEpQ2FUaNGbJ0YanSeyj9D9ruu4FUvz+ZvebIzI2bSME+PUwcPXO1kKXZkjcPUAFruDikoOI5fWQNIA6JCCOQ=="
+    },
     "make-dir": {
       "version": "3.1.0",
       "resolved": "https://registry.npmmirror.com/make-dir/-/make-dir-3.1.0.tgz",
@@ -8796,6 +8868,11 @@
       "resolved": "https://registry.npmmirror.com/map-obj/-/map-obj-1.0.1.tgz",
       "integrity": "sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg=="
     },
+    "map-stream": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmmirror.com/map-stream/-/map-stream-0.0.7.tgz",
+      "integrity": "sha512-C0X0KQmGm3N2ftbTGBhSyuydQ+vV1LC3f3zPvT3RXHXNZrvfPZcoXp/N5DOa8vedX/rTMm2CjTtivFg2STJMRQ=="
+    },
     "map-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/map-visit/-/map-visit-1.0.0.tgz",
@@ -8965,6 +9042,14 @@
       "resolved": "https://registry.npmmirror.com/min-dash/-/min-dash-3.8.1.tgz",
       "integrity": "sha512-evumdlmIlg9mbRVPbC4F5FuRhNmcMS5pvuBUbqb1G9v09Ro0ImPEgz5n3khir83lFok1inKqVDjnKEg3GpDxQg=="
     },
+    "min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmmirror.com/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==",
+      "requires": {
+        "dom-walk": "^0.1.0"
+      }
+    },
     "min-dom": {
       "version": "3.2.1",
       "resolved": "https://registry.npmmirror.com/min-dom/-/min-dom-3.2.1.tgz",
@@ -8977,6 +9062,11 @@
         "min-dash": "^3.8.1"
       }
     },
+    "mingo": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmmirror.com/mingo/-/mingo-1.3.3.tgz",
+      "integrity": "sha512-Y4wGTD/M7AMqF8QxKaBGps+axq/Z48hdtRAeiKtInkEXMLzUWUwT0OPDzrB26xrav9GF1AOYJfwVWPcLwnkgTA=="
+    },
     "mini-css-extract-plugin": {
       "version": "0.8.2",
       "resolved": "https://registry.npmmirror.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.8.2.tgz",
@@ -9182,6 +9272,11 @@
       "dev": true,
       "optional": true
     },
+    "mux.js": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmmirror.com/mux.js/-/mux.js-4.3.2.tgz",
+      "integrity": "sha512-g0q6DPdvb3yYcoK7ElBGobdSSrhY/RjPt19U7uUc733aqvc5bCS/aCvL9z+448y+IoCZnYDwyZfQBBXMSmGOaQ=="
+    },
     "mz": {
       "version": "2.7.0",
       "resolved": "https://registry.npmmirror.com/mz/-/mz-2.7.0.tgz",
@@ -9933,6 +10028,11 @@
         "safe-buffer": "^5.1.1"
       }
     },
+    "parse-headers": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/parse-headers/-/parse-headers-2.0.5.tgz",
+      "integrity": "sha512-ft3iAoLOB/MlwbNXgzy43SWGP6sQki2jQvAyBg/zDFAgr9bfNWZIUj42Kw2eJIl8kEi4PbgE6U1Zau/HwI75HA=="
+    },
     "parse-json": {
       "version": "2.2.0",
       "resolved": "https://registry.npmmirror.com/parse-json/-/parse-json-2.2.0.tgz",
@@ -10038,6 +10138,14 @@
         "pinkie-promise": "^2.0.0"
       }
     },
+    "pause-stream": {
+      "version": "0.0.11",
+      "resolved": "https://registry.npmmirror.com/pause-stream/-/pause-stream-0.0.11.tgz",
+      "integrity": "sha512-e3FBlXLmN/D1S+zHzanP4E/4Z60oFAa3O051qt1pxa7DEJWKAyil6upYVXCWadEnuoqa4Pkc9oUx9zsxYeRv8A==",
+      "requires": {
+        "through": "~2.3"
+      }
+    },
     "pbkdf2": {
       "version": "3.1.2",
       "resolved": "https://registry.npmmirror.com/pbkdf2/-/pbkdf2-3.1.2.tgz",
@@ -10085,6 +10193,11 @@
         "pinkie": "^2.0.0"
       }
     },
+    "pkcs7": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmmirror.com/pkcs7/-/pkcs7-0.2.3.tgz",
+      "integrity": "sha512-kJRwmADEQUg+qJyRgWLtpEL9q9cFjZschejTEK3GRjKvnsU9G5WWoe/wKqRgbBoqWdVSeTUKP6vIA3Y72M3rWA=="
+    },
     "pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npmmirror.com/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -11192,8 +11305,7 @@
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmmirror.com/process/-/process-0.11.10.tgz",
-      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
-      "dev": true
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A=="
     },
     "process-nextick-args": {
       "version": "2.0.1",
@@ -11855,6 +11967,14 @@
         "aproba": "^1.1.1"
       }
     },
+    "rust-result": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/rust-result/-/rust-result-1.0.0.tgz",
+      "integrity": "sha512-6cJzSBU+J/RJCF063onnQf0cDUOHs9uZI1oroSGnHOph+CQTIJ5Pp2hK5kEQq1+7yE/EEWfulSNXAQ2jikPthA==",
+      "requires": {
+        "individual": "^2.0.0"
+      }
+    },
     "rx-lite": {
       "version": "4.0.8",
       "resolved": "https://registry.npmmirror.com/rx-lite/-/rx-lite-4.0.8.tgz",
@@ -11877,6 +11997,14 @@
       "resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.1.2.tgz",
       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
+    "safe-json-parse": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
+      "integrity": "sha512-RjZPPHugjK0TOzFrLZ8inw44s9bKox99/0AZW9o/BEQVrJfhI+fIHMErnPyRa89/yRXUUr93q+tiN6zhoVV4wQ==",
+      "requires": {
+        "rust-result": "^1.0.0"
+      }
+    },
     "safe-regex": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/safe-regex/-/safe-regex-1.1.0.tgz",
@@ -11937,6 +12065,24 @@
         }
       }
     },
+    "save": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmmirror.com/save/-/save-2.5.0.tgz",
+      "integrity": "sha512-xiVLpKVbx8EmW0HDkNRjYL271OnIRCo8VGWAEq6/K+E0dgNrwKV2xvKXdfPj6HGYA6l760800LyewSY3ooljCg==",
+      "requires": {
+        "async": "^3.2.2",
+        "event-stream": "^4.0.1",
+        "lodash.assign": "^4.2.0",
+        "mingo": "1"
+      },
+      "dependencies": {
+        "async": {
+          "version": "3.2.4",
+          "resolved": "https://registry.npmmirror.com/async/-/async-3.2.4.tgz",
+          "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ=="
+        }
+      }
+    },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmmirror.com/sax/-/sax-1.2.4.tgz",
@@ -12594,6 +12740,14 @@
         }
       }
     },
+    "split": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/split/-/split-1.0.1.tgz",
+      "integrity": "sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==",
+      "requires": {
+        "through": "2"
+      }
+    },
     "split-string": {
       "version": "3.1.0",
       "resolved": "https://registry.npmmirror.com/split-string/-/split-string-3.1.0.tgz",
@@ -12696,6 +12850,15 @@
         "readable-stream": "^2.0.2"
       }
     },
+    "stream-combiner": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmmirror.com/stream-combiner/-/stream-combiner-0.2.2.tgz",
+      "integrity": "sha512-6yHMqgLYDzQDcAkL+tjJDC5nSNuNIx0vZtRZeiPh7Saef7VHX9H5Ijn9l2VIol2zaNYlYEX6KyuT/237A58qEQ==",
+      "requires": {
+        "duplexer": "~0.1.1",
+        "through": "~2.3.4"
+      }
+    },
     "stream-each": {
       "version": "1.2.3",
       "resolved": "https://registry.npmmirror.com/stream-each/-/stream-each-1.2.3.tgz",
@@ -13406,9 +13569,7 @@
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmmirror.com/through/-/through-2.3.8.tgz",
-      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==",
-      "dev": true,
-      "optional": true
+      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg=="
     },
     "through2": {
       "version": "2.0.5",
@@ -13554,6 +13715,11 @@
       "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==",
       "dev": true
     },
+    "tsml": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/tsml/-/tsml-1.0.1.tgz",
+      "integrity": "sha512-3KmepnH9SUsoOVtg013CRrL7c+AK7ECaquAsJdvu4288EDJuraqBlP4PDXT/rLEJ9YDn4jqLAzRJsnFPx+V6lg=="
+    },
     "tty-browserify": {
       "version": "0.0.0",
       "resolved": "https://registry.npmmirror.com/tty-browserify/-/tty-browserify-0.0.0.tgz",
@@ -13864,6 +14030,11 @@
         "requires-port": "^1.0.0"
       }
     },
+    "url-toolkit": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmmirror.com/url-toolkit/-/url-toolkit-2.2.5.tgz",
+      "integrity": "sha512-mtN6xk+Nac+oyJ/PrI7tzfmomRVNFIWKUbG8jdYFt52hxbiReFAXIjYskvu64/dvuW71IcB7lV8l0HvZMac6Jg=="
+    },
     "use": {
       "version": "3.1.1",
       "resolved": "https://registry.npmmirror.com/use/-/use-3.1.1.tgz",
@@ -13972,6 +14143,99 @@
         }
       }
     },
+    "video.js": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmmirror.com/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-contrib-hls": {
+      "version": "5.15.0",
+      "resolved": "https://registry.npmmirror.com/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"
+      }
+    },
+    "videojs-contrib-media-sources": {
+      "version": "4.7.2",
+      "resolved": "https://registry.npmmirror.com/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"
+      }
+    },
+    "videojs-flash": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmmirror.com/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"
+      },
+      "dependencies": {
+        "global": {
+          "version": "4.4.0",
+          "resolved": "https://registry.npmmirror.com/global/-/global-4.4.0.tgz",
+          "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+          "requires": {
+            "min-document": "^2.19.0",
+            "process": "^0.11.10"
+          }
+        }
+      }
+    },
+    "videojs-font": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/videojs-font/-/videojs-font-2.1.0.tgz",
+      "integrity": "sha512-zFqWpLrXf1q8NtYx5qtZhMC6SLUFScDmR6j+UGPogobxR21lvXShhnzcNNMdOxJUuFLiToJ/BPpFUQwX4xhpvA=="
+    },
+    "videojs-hotkeys": {
+      "version": "0.2.27",
+      "resolved": "https://registry.npmmirror.com/videojs-hotkeys/-/videojs-hotkeys-0.2.27.tgz",
+      "integrity": "sha512-pwtm1QocRmzJy1PWQsmFVHyeldYHHpLdeATK3FsFHVMmNpz6CROkAn8TFy2UILr8Ghgq134K8jEKNue8HWpudQ=="
+    },
+    "videojs-ie8": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/videojs-ie8/-/videojs-ie8-1.1.2.tgz",
+      "integrity": "sha512-0Zb2T4MLkpfZbeGMK/Z93b8Lrepr+rLFoHgQV1CoDeFqXvH7b+Vsd/VHoILGxQrgCSHFQ7mAODR6oyMjuiD4/g==",
+      "requires": {
+        "es5-shim": "^4.5.1"
+      }
+    },
+    "videojs-swf": {
+      "version": "5.4.2",
+      "resolved": "https://registry.npmmirror.com/videojs-swf/-/videojs-swf-5.4.2.tgz",
+      "integrity": "sha512-FGg+Csioa8/A/EacvFefBdb9Z0rSiMlheHDunZnN3xXfUF43jvjawcWFQnZvrv1Cs1nE1LBrHyUZjF7j2mKOLw=="
+    },
+    "videojs-vtt.js": {
+      "version": "0.12.6",
+      "resolved": "https://registry.npmmirror.com/videojs-vtt.js/-/videojs-vtt.js-0.12.6.tgz",
+      "integrity": "sha512-XFXeGBQiljnElMhwCcZst0RDbZn2n8LU7ZScXryd3a00OaZsHAjdZu/7/RdSr7Z1jHphd45FnOvOQkGK4YrWCQ==",
+      "requires": {
+        "global": "^4.3.1"
+      }
+    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/vm-browserify/-/vm-browserify-1.1.2.tgz",
@@ -14156,6 +14420,18 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vue-video-player": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmmirror.com/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"
+      }
+    },
     "vuex": {
       "version": "3.6.2",
       "resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz",
@@ -15108,6 +15384,11 @@
       "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
       "dev": true
     },
+    "webwackify": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmmirror.com/webwackify/-/webwackify-0.1.6.tgz",
+      "integrity": "sha512-pGcw1T3HpNnM/UTRQqqRkkkzythSLts05mB+7Gr00B+0VbL0m39dFL5g20rSIEUt9Wrpw+/8k+snxRlUFHhcqA=="
+    },
     "which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/which/-/which-2.0.2.tgz",
@@ -15241,6 +15522,17 @@
         "async-limiter": "~1.0.0"
       }
     },
+    "xhr": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmmirror.com/xhr/-/xhr-2.4.0.tgz",
+      "integrity": "sha512-TUbBsdAuJbX8olk9hsDwGK8P1ri1XlV+PdEWkYw+HQQbpkiBR8PLgD1F3kQDPBs9l4Px34hP9rCYAZOCCAENbw==",
+      "requires": {
+        "global": "~4.3.0",
+        "is-function": "^1.0.1",
+        "parse-headers": "^2.0.0",
+        "xtend": "^4.0.0"
+      }
+    },
     "xss": {
       "version": "1.0.11",
       "resolved": "https://registry.npmmirror.com/xss/-/xss-1.0.11.tgz",
@@ -15253,8 +15545,7 @@
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmmirror.com/xtend/-/xtend-4.0.2.tgz",
-      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
-      "dev": true
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
     },
     "y18n": {
       "version": "4.0.3",

commandCenter/package.json

@@ -29,10 +29,13 @@
     "post-loader": "^2.0.0",
     "postcss-pxtorem": "^5.1.1",
     "sass-loader": "^10.0.3",
+    "save": "^2.5.0",
     "stylus": "^0.57.0",
     "stylus-loader": "^6.2.0",
+    "videojs-contrib-hls": "^5.15.0",
     "vue": "^2.6.10",
     "vue-router": "^3.0.3",
+    "vue-video-player": "^5.0.2",
     "vuex": "^3.5.1"
   },
   "devDependencies": {

commandCenter/src/components/common/Header.vue

@@ -11,12 +11,12 @@
         <div class="v-header-center">
             <div
                 class="tabSelect"
-                v-for="(item, index) in tagTableArr"
+                v-for="(item, index) in menuList"
                 :key="index"
-                :class="tagTabIndex == index ? 'active' : ''"
-                @click="selectTab(index)"
+                :class="setINdex() == index ? 'active' : ''"
+                @click="selectTab(item, index)"
             >
-                {{ item }}
+                {{ item.name }}
             </div>
         </div>
         <div class="v-header-right">
@@ -51,7 +51,32 @@ export default {
         return {
             name: '',
             envConfig: envConfig,
-            tagTableArr: ['指挥调度', '社区资产', '产业招商', '运营服务', '财务分析', '视频监控'],
+            tagTableArr: [
+                {
+                    name: '指挥调度',
+                    path: '/homeIndex'
+                },
+                {
+                    name: '社区资产',
+                    path: '/communityAssets'
+                },
+                {
+                    name: '产业招商',
+                    path: '/industrialInvestment'
+                },
+                {
+                    name: '运营服务',
+                    path: '/operationalServices'
+                },
+                {
+                    name: '财务分析',
+                    path: '/financialAnalysis'
+                },
+                {
+                    name: '视频监控',
+                    path: '/videoSurveillance'
+                }
+            ],
             tagTabIndex: 0,
             time: {
                 thisTime: '2000/01/01',
@@ -63,8 +88,8 @@ export default {
         };
     },
     computed: {
-        cruUserInfo() {
-            return this.$store.getters['getCruUserInfo'];
+        menuList() {
+            return this.$store.getters['getMenuList'] || [];
         }
     },
     methods: {
@@ -113,30 +138,30 @@ export default {
                 }
             });
         },
-        selectTab(index) {
+        selectTab(item, index) {
             this.tagTabIndex = index;
-            window.localStorage.setItem('tagTabIndex', index);
-            window.sessionStorage.setItem('tagTabIndex', index);
-            if (index == 0) {
-                this.$router.push('/homeIndex');
-            } else if (index == 1) {
-                this.$router.push('/communityAssets');
-            } else if (index == 2) {
-                this.$router.push('/industrialInvestment');
-            } else if (index == 3) {
-                this.$router.push('/operationalServices');
-            } else if (index == 4) {
-                this.$router.push('/financialAnalysis');
-            }
+            this.$router.push({ name: item.linkPath });
+        },
+        getMenuList() {
+            this.$http.get('/sc-user-center/user/findUserMenu', { appId: '1012' }).then(({ status, data, msg }) => {
+                if (0 == status) {
+                    this.$store.commit('setMenuList', data[0].children);
+                }
+            });
+        },
+        setINdex() {
+            let index = 0;
+            this.menuList.map((item, inx) => {
+                if (item.linkPath == this.$route.name) {
+                    index = inx;
+                }
+            });
+            return index;
         }
     },
     mounted() {},
     created() {
-        if (!!window.localStorage.tagTabIndex && !!window.sessionStorage.tagTabIndex) {
-            this.tagTabIndex = window.localStorage.tagTabIndex;
-        } else {
-            this.tagTabIndex = 0;
-        }
+        this.getMenuList();
         setInterval(() => {
             this.getTime();
         }, 1000);
@@ -201,6 +226,7 @@ $colorOption: rgba(250, 250, 250, 0.6);
             border: 1px solid $colorOption;
             cursor: pointer;
             box-sizing: border-box;
+            background: #18344E;
             width: 100px;
             line-height: 30px;
             text-align: center;

commandCenter/src/main.js

@@ -37,15 +37,6 @@ Vue.use(ElementUI, {
   size: 'small'
 });
 
-//使用钩子函数对路由进行权限跳转
-// router.beforeEach((to, from, next) => {
-//   if (to.path == '/') {
-//     next('/homeIndex')
-//   } else {
-//     next()
-//   }
-
-// });
 new Vue({
   router,
   store,

commandCenter/src/router/index.js

@@ -43,6 +43,12 @@ const quietRoute = [
                 component: () => import(/* webpackChunkName: "404" */ '@views/financialAnalysis/index.vue'),
                 meta: { title: 'financialAnalysis' }
             },
+            {
+                path: '/videoSurveillance',
+                name: 'videoSurveillance',
+                component: () => import(/* webpackChunkName: "404" */ '@views/videoSurveillance/index.vue'),
+                meta: { title: 'videoSurveillance' }
+            },
 
             {
                 path: '/403',

commandCenter/src/views/commandDispatch/index.vue

@@ -1,281 +1,245 @@
 <template>
-  <div class="index-content">
-    <div
-      class="img-content"
-      :class="{ mouseStyle: openCur == 1 }"
-      ref="divImg"
-      :style="`backgroundImage:url(${imgUrl});backgroundSize: 100% 100%;`"
-      @click="openCur == 1 ? paintingPoint($event) : null"
-    ></div>
-    <div
-      class="point"
-      :style="`left:${item.xcoordinate}%;top:${item.ycoordinate}%`"
-      v-for="(item, index) in points"
-      :key="index"
-    >
-      <span
-        class="point-type"
-        :class="`point-type${item.deviceType}`"
-        @click="openCur !== 2 ? togglePop(item) : null"
-      ></span>
-      <span class="textStyle">{{ item.deviceName }}</span>
-      <span
-        class="pointClose"
-        @click="pointClose(item)"
-        v-if="openCur == 2"
-      >x</span>
-    </div>
-    <div
-      class="index-content-left"
-      v-if="showChart"
-    >
-      <last-month-alarm></last-month-alarm>
-      <alarm-trend-analysis></alarm-trend-analysis>
-      <proportion-of-alarm-types></proportion-of-alarm-types>
-      <work-order-processing-status></work-order-processing-status>
-    </div>
-    <div
-      class="index-content-right-buttom"
-      @click="toggleShow"
-    ><span></span>{{ !showChart ? '显示' : '隐藏' }}图表</div>
-    <div
-      class="index-dotting-list"
-      :class="showChart ? '' : 'showChart'"
-    >
-      <div
-        class="list-type"
-        @click="addPoint()"
-        :class="{ thisDotting: openCur == 1 }"
-      >
-        <span class="zoniot_font zoniot-icon-tianjia1"></span>添加
-      </div>
-      <div
-        class="list-type"
-        @click="editPoint"
-        :class="{ thisDotting: openCur == 2 }"
-      >
-        <span class="zoniot_font zoniot-icon-bianji3"></span>编辑
-      </div>
-      <!-- <div class="list-type" @click="submitPoint" :class="{ thisDotting: openCur == 3 }">
+    <div class="index-content">
+        <div
+            class="img-content"
+            :class="{ mouseStyle: openCur == 1 }"
+            ref="divImg"
+            :style="`backgroundImage:url(${imgUrl});backgroundSize: 100% 100%;`"
+            @click="openCur == 1 ? paintingPoint($event) : null"
+        ></div>
+        <div class="point" :style="`left:${item.xcoordinate}%;top:${item.ycoordinate}%`" v-for="(item, index) in points" :key="index">
+            <span class="point-type" :class="`point-type${item.deviceType}`" @click="openCur !== 2 ? togglePop(item) : null"></span>
+            <span class="textStyle">{{ item.deviceName }}</span>
+            <span class="pointClose" @click="pointClose(item)" v-if="openCur == 2">x</span>
+        </div>
+        <div class="index-content-left" v-if="showChart">
+            <last-month-alarm></last-month-alarm>
+            <alarm-trend-analysis></alarm-trend-analysis>
+            <proportion-of-alarm-types></proportion-of-alarm-types>
+            <work-order-processing-status></work-order-processing-status>
+        </div>
+        <div class="index-content-right-buttom" @click="toggleShow"><span></span>{{ !showChart ? '显示' : '隐藏' }}图表</div>
+        <div class="index-dotting-list" :class="showChart ? '' : 'showChart'" v-if="menuListShow">
+            <div class="list-type" @click="addPoint()" :class="{ thisDotting: openCur == 1 }">
+                <span class="zoniot_font zoniot-icon-tianjia1"></span>添加
+            </div>
+            <div class="list-type" @click="editPoint" :class="{ thisDotting: openCur == 2 }">
+                <span class="zoniot_font zoniot-icon-bianji3"></span>编辑
+            </div>
+            <!-- <div class="list-type" @click="submitPoint" :class="{ thisDotting: openCur == 3 }">
                 <span class="zoniot_font zoniot-icon-baocun"></span>保存
             </div> -->
-    </div>
-    <div
-      class="rightFloatType"
-      :class="showChart ? '' : 'showChart'"
-    >
-      <el-checkbox-group v-model="showPointArr">
-        <el-checkbox
-          :class="'typeIcon' + items.type"
-          v-for="items in deviceArr"
-          :label="items.type"
-          :key="items.type"
-        >{{
+        </div>
+        <div class="rightFloatType" :class="showChart ? '' : 'showChart'">
+            <el-checkbox-group v-model="showPointArr">
+                <el-checkbox :class="'typeIcon' + items.type" v-for="items in deviceArr" :label="items.type" :key="items.type">{{
                     items.label
                 }}</el-checkbox>
-      </el-checkbox-group>
-    </div>
-    <div
-      class="index-content-right"
-      v-if="showChart"
-    >
-      <water-consumption></water-consumption>
-      <power-consumption></power-consumption>
-      <patrol-task-completion-rate></patrol-task-completion-rate>
-      <key-areas></key-areas>
+            </el-checkbox-group>
+        </div>
+        <div class="index-content-right" v-if="showChart">
+            <water-consumption></water-consumption>
+            <power-consumption></power-consumption>
+            <patrol-task-completion-rate></patrol-task-completion-rate>
+            <key-areas></key-areas>
+        </div>
+        <div class="index-content-buttom" v-if="showChart">
+            <passenger-flow-statistics></passenger-flow-statistics>
+        </div>
+        <modular-loading :loadding="false" tipsText="地图加载中"></modular-loading>
     </div>
-    <div
-      class="index-content-buttom"
-      v-if="showChart"
-    >
-      <passenger-flow-statistics></passenger-flow-statistics>
-    </div>
-    <modular-loading
-      :loadding="false"
-      tipsText="地图加载中"
-    ></modular-loading>
-  </div>
 </template>
 
 <script>
 import smallModuleIndex from '@views/smallModule/index.js';
 import { mapState } from 'vuex';
 export default {
-  mixins: [smallModuleIndex],
-  data () {
-    return {
-      showChart: true,
-      loadding: true,
-      openCur: null,
-      deviceArr: [
-        {
-          type: 1,
-          label: '摄像头'
-        },
-        {
-          type: 2,
-          label: '门禁机'
-        },
-        {
-          type: 3,
-          label: '停车道闸'
-        },
-        {
-          type: 4,
-          label: '水表'
+    mixins: [smallModuleIndex],
+    data() {
+        return {
+            showChart: true,
+            loadding: true,
+            openCur: null,
+            deviceArr: [
+                {
+                    type: 1,
+                    label: '摄像头'
+                },
+                {
+                    type: 2,
+                    label: '门禁机'
+                },
+                {
+                    type: 3,
+                    label: '停车道闸'
+                },
+                {
+                    type: 4,
+                    label: '水表'
+                },
+                {
+                    type: 5,
+                    label: '电表'
+                }
+            ],
+            mixins_query: {
+                communityId: ''
+            },
+            showPointArr: [1, 2, 3, 4, 5],
+            point: [],
+            imgUrl: require('@/assets/img/homeIcon/bg_bottom.png')
+        };
+    },
+    computed: {
+        ...mapState(['homeCommunityAll']),
+        points() {
+            let showArr = [];
+            this.point.map((item) => {
+                if (this.showPointArr.includes(item.deviceType)) {
+                    showArr.push(item);
+                }
+            });
+            return showArr;
         },
-        {
-          type: 5,
-          label: '电表'
-        }
-      ],
-      mixins_query: {
-        communityId: ''
-      },
-      showPointArr: [1, 2, 3, 4, 5],
-      point: [],
-      imgUrl: require('@/assets/img/homeIcon/bg_bottom.png')
-    };
-  },
-  computed: {
-    ...mapState(['homeCommunityAll']),
-    points () {
-      let showArr = [];
-      this.point.map((item) => {
-        if (this.showPointArr.includes(item.deviceType)) {
-          showArr.push(item);
+        menuListShow() {
+            if (
+                !!this.$store.getters['getMenuList'] &&
+                !!this.$store.getters['getMenuList'][0] &&
+                !!this.$store.getters['getMenuList'][0].children
+            ) {
+                return true;
+            } else {
+                return false;
+            }
         }
-      });
-      return showArr;
-    }
-  },
-  watch: {
-    //全局社区接口调用
-    homeCommunityAll (val) {
-      try {
-        this.mixins_query.communityId = val;
-        this.getData();
-      } catch { }
-    }
-  },
-  methods: {
-    addPoint () {
-      if (this.openCur == 1) {
-        this.openCur = null;
-      } else {
-        this.openCur = 1;
-      }
-    },
-    editPoint () {
-      if (this.openCur == 2) {
-        this.openCur = null;
-      } else {
-        this.openCur = 2;
-      }
     },
-    submitPoint () {
-      this.openCur = 3;
+    watch: {
+        //全局社区接口调用
+        homeCommunityAll(val) {
+            try {
+                this.mixins_query.communityId = val;
+                this.getData();
+            } catch {}
+        }
     },
-    togglePop (row) {
-      let url = '',
-        width = '2.89rem',
-        height = '2.25rem',
-        showHide = false;
+    methods: {
+        addPoint() {
+            if (this.openCur == 1) {
+                this.openCur = null;
+            } else {
+                this.openCur = 1;
+            }
+        },
+        editPoint() {
+            if (this.openCur == 2) {
+                this.openCur = null;
+            } else {
+                this.openCur = 2;
+            }
+        },
+        submitPoint() {
+            this.openCur = 3;
+        },
+        togglePop(row) {
+            let url = '',
+                width = '2.89rem',
+                height = '2.25rem',
+                showHide = false;
 
-      if (row.deviceType == 1) {
-        url = 'typeCamera';
-      } else if (row.deviceType == 2) {
-        url = 'typeAccessControl';
-      } else if (row.deviceType == 3) {
-        url = 'typeCard';
-        showHide = true;
-      } else if (row.deviceType == 4) {
-        url = 'typeHydropower';
-        height = '2.65rem';
-      } else if (row.deviceType == 5) {
-        url = 'typeHydropower';
-        height = '1.2rem';
-      }
-      new Promise((resolve) => {
-        this.$store.dispatch('addPopup', {
-          url: `/commandDispatch/pop/${url}.vue`,
-          title: row.deviceName,
-          notip: true,
-          width: width,
-          height: height,
-          fullscreen: false,
-          showFooter: true,
-          showAlarm: true,
-          showHide: showHide,
-          props: {
-            row,
-            callback: resolve
-          }
-        });
-      }).then(() => { });
-    },
-    paintingPoint (e) {
-      let width = window.getComputedStyle(this.$refs.divImg).width.replace(/px/, ''),
-        height = window.getComputedStyle(this.$refs.divImg).height.replace(/px/, '');
-      let pointObj = {
-        xcoordinate: Number(((e.x / width) * 100).toFixed(6)),
-        ycoordinate: Number(((e.y / height) * 100).toFixed(6))
-      };
-      new Promise((resolve) => {
-        this.$store.dispatch('addPopup', {
-          url: '/commandDispatch/pop/dottingEquipment.vue',
-          title: '添加设备',
-          notip: true,
-          width: '3.89rem',
-          height: '2.25rem',
-          props: {
-            pointObj,
-            deviceArr: this.deviceArr,
-            callback: resolve
-          }
-        });
-      }).then(() => {
-        this.getData();
-      });
-    },
-    pointClose (item) {
-      this.$msgBox(`删除`, '删除后将无法恢复，请问是否继续?')
-        .then(() => {
-          this.$http.get('/sc-community/community/layer/delete', { id: item.id }).then(({ status, data, msg }) => {
-            if (0 === status) {
-              this.$message({
-                type: 'success',
-                message: '删除成功!'
-              });
-              this.getData();
+            if (row.deviceType == 1) {
+                url = 'typeCamera';
+            } else if (row.deviceType == 2) {
+                url = 'typeAccessControl';
+            } else if (row.deviceType == 3) {
+                url = 'typeCard';
+                showHide = true;
+            } else if (row.deviceType == 4) {
+                url = 'typeHydropower';
+                height = '2.65rem';
+            } else if (row.deviceType == 5) {
+                url = 'typeHydropower';
+                height = '1.2rem';
             }
-          });
-        })
-        .catch(() => { });
-    },
-    toggleShow () {
-      this.showChart = !this.showChart;
+            new Promise((resolve) => {
+                this.$store.dispatch('addPopup', {
+                    url: `/commandDispatch/pop/${url}.vue`,
+                    title: row.deviceName,
+                    notip: true,
+                    width: width,
+                    height: height,
+                    fullscreen: false,
+                    showFooter: true,
+                    showAlarm: true,
+                    showHide: showHide,
+                    props: {
+                        row,
+                        callback: resolve
+                    }
+                });
+            }).then(() => {});
+        },
+        paintingPoint(e) {
+            let width = window.getComputedStyle(this.$refs.divImg).width.replace(/px/, ''),
+                height = window.getComputedStyle(this.$refs.divImg).height.replace(/px/, '');
+            let pointObj = {
+                xcoordinate: Number(((e.x / width) * 100).toFixed(6)),
+                ycoordinate: Number(((e.y / height) * 100).toFixed(6))
+            };
+            new Promise((resolve) => {
+                this.$store.dispatch('addPopup', {
+                    url: '/commandDispatch/pop/dottingEquipment.vue',
+                    title: '添加设备',
+                    notip: true,
+                    width: '3.89rem',
+                    height: '2.25rem',
+                    props: {
+                        pointObj,
+                        deviceArr: this.deviceArr,
+                        callback: resolve
+                    }
+                });
+            }).then(() => {
+                this.getData();
+            });
+        },
+        pointClose(item) {
+            this.$msgBox(`删除`, '删除后将无法恢复，请问是否继续?')
+                .then(() => {
+                    this.$http.get('/sc-community/community/layer/delete', { id: item.id }).then(({ status, data, msg }) => {
+                        if (0 === status) {
+                            this.$message({
+                                type: 'success',
+                                message: '删除成功!'
+                            });
+                            this.getData();
+                        }
+                    });
+                })
+                .catch(() => {});
+        },
+        toggleShow() {
+            this.showChart = !this.showChart;
+        },
+        getData() {
+            this.$http
+                .post('/sc-community/community/layer/list', this.mixins_query)
+                .then(({ status, data, msg }) => {
+                    if (status == 0 && !!data) {
+                        this.point = data;
+                    } else {
+                        this.$message.error(msg);
+                    }
+                    loading.close();
+                })
+                .catch(() => {});
+        }
     },
-    getData () {
-      this.$http
-        .post('/sc-community/community/layer/list', this.mixins_query)
-        .then(({ status, data, msg }) => {
-          if (status == 0 && !!data) {
-            this.point = data;
-          } else {
-            this.$message.error(msg);
-          }
-          loading.close();
-        })
-        .catch(() => { });
-    }
-  },
 
-  created () {
-    if (!!this.mixins_query.communityId) {
-      this.getData();
+    created() {
+        if (!!this.mixins_query.communityId) {
+            this.getData();
+        }
     }
-  }
 };
 </script>
 <style lang="scss" scoped>

commandCenter/src/views/financialAnalysis/index.vue

@@ -37,8 +37,9 @@ export default {
     margin: 10px;
 }
 .contentShow {
-    height: 100%;
-    padding-top: 100px;
+    padding: 0 10px;
+    height: calc(100% - 100px);
+    margin-top: 100px;
     width: 100%;
     border-radius: 4px;
     display: grid;

commandCenter/src/views/financialAnalysis/smallModuleIndex/collectionRate.vue

@@ -136,21 +136,6 @@ export default {
 </script>
 <style scoped lang="scss">
 @import './style.scss';
-.modelBlock {
-    // .model-content {
-    //     height: calc(100% - 80px);
-    // }
-}
-
-.model-title {
-    .model-title-right {
-        .saveColumn-select {
-            &:not(:first-child) {
-                margin-left: 10px;
-            }
-        }
-    }
-}
 
 .textAmount {
     width: 100px;
@@ -173,7 +158,7 @@ export default {
 }
 .item {
     margin-top: 25px;
-    margin-left: 25px;
+    margin-left: 40px;
     .ashText {
         opacity: 0.5;
     }

commandCenter/src/views/financialAnalysis/smallModuleIndex/deposit.vue

@@ -58,7 +58,7 @@ export default {
     methods: {
         getData() {
             this.$http.get('/sc-charge/deposit/statistics/received', this.mixins_query).then(({ data, msg, status }) => {
-                if (status == 0 && !!data.datas) {
+                if (status == 0 && !!data.length) {
                     this.clientOptions = ringType(colors, this.eachartObj(data), {}, { type: 'number', total: data.total });
                 } else {
                     this.clientOptions = ringType(
@@ -78,18 +78,20 @@ export default {
             this.getData();
         },
         eachartObj(data) {
-            this.total = data.total;
+            this.total = 0;
             let typeName = {
                 1: '装修押金',
                 2: '租赁押金'
             };
             let newData = [];
-            for (let a in data.datas) {
+            data.map((item) => {
+                this.total += item.paymentAmount || 0;
                 newData.push({
-                    value: data.datas[a],
-                    name: typeName[a]
+                    value: item.paymentAmount || 0,
+                    name: typeName[item.depositType]
                 });
-            }
+            });
+
             return newData;
         }
     },
@@ -100,54 +102,5 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import '@assets/css/public-style.scss';
-.modelBlock {
-    height: 100%;
-    padding: 15px 20px 20px;
-    background: #171f32;
-    .model-title {
-        line-height: 30px;
-        display: flex;
-        justify-content: space-between;
-        padding-bottom: 15px;
-        border-bottom: 1px solid rgba(224, 225, 227, 0.2);
-        .saveColumn-select {
-            width: 120px;
-            margin-left: 20px;
-            /deep/ .el-input__inner {
-                background: transparent;
-                color: white;
-                border-color: rgba(255, 255, 255, 0.2);
-            }
-        }
-        .model-title-text {
-            color: white;
-        }
-    }
-    .model-content {
-        height: calc(100% - 45px);
-        display: flex;
-        justify-content: space-between;
-        font-size: 12px;
-        position: relative;
-        .totals {
-            position: absolute;
-            right: 10px;
-            top: 26px;
-            width: 120px;
-            height: 40px;
-            background: linear-gradient(90deg, rgba(14, 174, 255, 0.5) 0%, rgba(14, 174, 255, 0) 100%);
-            border-radius: 5px;
-            font-size: 20px;
-            padding: 8px 10px;
-            display: flex;
-            justify-content: space-between;
-            .numbers {
-                font-size: 12px;
-                opacity: 0.5;
-                line-height: 32px;
-            }
-        }
-    }
-}
+@import './style.scss';
 </style>

commandCenter/src/views/financialAnalysis/smallModuleIndex/depositBalance.vue

@@ -158,13 +158,4 @@ export default {
 </script>
 <style scoped lang="scss">
 @import './style.scss';
-.model-title {
-    .model-title-right {
-        .saveColumn-select {
-            &:not(:first-child) {
-                margin-left: 10px;
-            }
-        }
-    }
-}
 </style>

commandCenter/src/views/financialAnalysis/smallModuleIndex/hydropower.vue

@@ -76,13 +76,4 @@ export default {
 </script>
 <style scoped lang="scss">
 @import './style.scss';
-.model-title {
-    .model-title-right {
-        .saveColumn-select {
-            &:not(:first-child) {
-                margin-left: 20px;
-            }
-        }
-    }
-}
 </style>

commandCenter/src/views/financialAnalysis/smallModuleIndex/incomeMode.vue

@@ -140,34 +140,5 @@ export default {
 </script>
 <style lang="scss" scoped>
 @import './style.scss';
-.modelBlock {
-    height: 100%;
-    padding: 15px 20px 20px;
-    background: #171f32;
-    .model-title {
-        line-height: 30px;
-        display: flex;
-        justify-content: space-between;
-        padding-bottom: 15px;
-        border-bottom: 1px solid rgba(224, 225, 227, 0.2);
-        .saveColumn-select {
-            width: 120px;
-            margin-left: 20px;
-            /deep/ .el-input__inner {
-                background: transparent;
-                color: white;
-                border-color: rgba(255, 255, 255, 0.2);
-            }
-        }
-        .model-title-text {
-            color: white;
-        }
-    }
-    .model-content {
-        display: flex;
-        justify-content: space-between;
-        font-size: 12px;
-        position: relative;
-    }
-}
+
 </style>

commandCenter/src/views/financialAnalysis/smallModuleIndex/indexOptionChart.js

@@ -47,7 +47,7 @@ export const getItemStyle = (c1, c2) => {
         }
     };
 };
-export const defaultMonth = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
+export const defaultMonth = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];
 export const defaultmonthData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
 export const defaultName = ['name1', 'name2', 'name3'];
 
@@ -65,9 +65,9 @@ export const ringType = (color = [], data = [], title = {}, legendFcuntion = {},
         data.map((item) => {
             if (item.name == v) {
                 if (legendFcuntion.type == '%') {
-                    val = `{a|${v}} · · · · · · {b|${parseInt((item.value / legendFcuntion.total).toFixed(2) * 100) || 0}%}`;
+                    val = `{a|${v}}{b|${parseInt((item.value / legendFcuntion.total).toFixed(2) * 100) || 0}%}`;
                 } else {
-                    val = `{a|${v}} · · · · · · {b|${item.value}}`;
+                    val = `{a|${v}}{b|${item.value}}`;
                 }
             }
         });
@@ -132,19 +132,19 @@ export const discountedWave = (name = '', xAxis = [], series = [], legendShow =
             textStyle: {
                 fontSize: 12,
                 color: '#FFFFFF'
+            },
+            formatter(param) {
+                let el = `<div class="dmp-echart-tooltip"><h4>${param[0].axisValue}月</h4>`;
+                param.forEach(item => {
+                    el += `<p>
+                              <span class="marker" style="display:inline-block;margin-right:4px;border-radius:10px;width:12px;height:8px;background-image: linear-gradient(to left,
+                                ${item.color.colorStops[0].color}, ${item.color.colorStops[1].color});"></span>
+                              <span>${item.value}</span>
+                            </p>`;
+                });
+                el += `</div>`;
+                return el;
             }
-            // formatter(param) {
-            //   let el = `<div class="dmp-echart-tooltip"><h4>${dateType(param[0].axisValue)}</h4>`;
-            //   param.forEach(item => {
-            //     el += `<p>
-            //                   <span class="marker" style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-image: linear-gradient(to left,
-            //                     ${item.color.colorStops[0].color}, ${item.color.colorStops[1].color});"></span>
-            //                   <span>${item.seriesName}：${item.value}</span>
-            //                 </p>`;
-            //   });
-            //   el += `</div>`;
-            //   return el;
-            // }
         },
         grid: {
             top: 50,
@@ -345,7 +345,7 @@ export const columnOptionsChart = (name = '', xAxis = [], series = [], color = [
                 color: '#FFFFFF'
             },
             formatter(param) {
-                let el = `<div class="dmp-echart-tooltip" style="text-align: center;"><h4>${param[0].axisValue}</h4>`;
+                let el = `<div class="dmp-echart-tooltip" style="text-align: center;"><h4>${param[0].axisValue}月</h4>`;
                 param.forEach((item) => {
                     el += `<p style="text-align: left;">
           <span style="display:inline-block;margin-right:5px;border-radius:4px;width:12px;height:8px;background-image: linear-gradient(to left, 
@@ -374,7 +374,7 @@ export const columnOptionsChart = (name = '', xAxis = [], series = [], color = [
             },
             axisLabel: {
                 formatter: function (params, index) {
-                    return params
+                    return params + '月';
                 },
                 color: '#9B9DA5',
                 margin: 15
@@ -1181,7 +1181,7 @@ export const columnOptionsChartss = (name = '', xAxis = [], series = [], dataser
             },
             axisLabel: {
                 formatter: function (params, index) {
-                    return params;
+                    return params + '月';
                 },
                 color: '#9B9DA5',
                 margin: 15
@@ -1219,6 +1219,7 @@ export const columnOptionsChartss = (name = '', xAxis = [], series = [], dataser
             show: true,
             x: 'right',
             icon: 'circle',
+            top: 10,
             itemWidth: 8, // 图例图形宽度
             itemHeight: 8,
             itemGap: 20,

commandCenter/src/views/financialAnalysis/smallModuleIndex/netReceipts.vue

@@ -98,13 +98,4 @@ export default {
 </script>
 <style scoped lang="scss">
 @import './style.scss';
-.model-title {
-    .model-title-right {
-        .saveColumn-select {
-            &:not(:first-child) {
-                margin-left: 20px;
-            }
-        }
-    }
-}
 </style>

commandCenter/src/views/financialAnalysis/smallModuleIndex/parkingLot.vue

@@ -78,7 +78,7 @@ export default {
                         resList = [],
                         timeDay = [];
                     data.map((item) => {
-                        timeDay.push(item.date);
+                        timeDay.push(this.$moment(item.date).format('M'));
 
                         dataList.push({
                             name: '临停收入',
@@ -116,13 +116,4 @@ export default {
 </script>
 <style scoped lang="scss">
 @import './style.scss';
-.model-title {
-    .model-title-right {
-        .saveColumn-select {
-            &:not(:first-child) {
-                margin-left: 20px;
-            }
-        }
-    }
-}
 </style>

commandCenter/src/views/financialAnalysis/smallModuleIndex/style.scss

@@ -21,6 +21,13 @@
     .model-title-text {
       color: white;
     }
+    .model-title-right {
+      .saveColumn-select {
+        &:not(:first-child) {
+          margin-left: 10px;
+        }
+      }
+    }
     .buttons {
       width: 120px;
       padding-left: 10px;
@@ -49,7 +56,7 @@
       position: absolute;
       right: 10px;
       top: 26px;
-      width: 120px;
+      min-width: 120px;
       height: 40px;
       background: linear-gradient(90deg, rgba(14, 174, 255, 0.5) 0%, rgba(14, 174, 255, 0) 100%);
       border-radius: 5px;
@@ -61,6 +68,7 @@
         font-size: 12px;
         opacity: 0.5;
         line-height: 32px;
+        margin-left: 5px;
       }
     }
   }

commandCenter/src/views/videoSurveillance/index.vue

@@ -0,0 +1,359 @@
+<template>
+    <div class="realVideoBox">
+        <div class="organ-tree">
+            <el-input class="tree-list-search-input" placeholder="请输入名称" v-model="filterText">
+                <i class="el-icon-search" slot="suffix"></i
+            ></el-input>
+            <div class="tree-list-ctrl-scroll">
+                <el-tree
+                    class="filter-tree tree-list-ctrl"
+                    :class="{ emptys: videoUrlList.length === 0 }"
+                    :index="3"
+                    :data="sceneLists"
+                    show-checkbox
+                    node-key="id"
+                    :check-on-click-node="true"
+                    :props="defaultProps"
+                    default-expand-all
+                    @check="checkChange"
+                    :filter-node-method="filterNode"
+                    ref="tree"
+                >
+                </el-tree>
+            </div>
+        </div>
+        <div class="rightVideo">
+            <video-list :videoUrlList="videoUrlList"></video-list>
+        </div>
+    </div>
+</template>
+
+<script>
+import videoList from './video.vue';
+
+export default {
+    components: {
+        videoList
+    },
+    data() {
+        return {
+            isShowVideo: 'one',
+            isDisLayerCtrl: false, //视频列表状态
+            isActive: '水源',
+            videoid: '',
+            filterText: '', //输入框筛选
+            initTree: [], //默认展开第1个节点数组
+            initTree2: [],
+            sceneLists: [], //
+            defaultProps: {
+                value: 'id',
+                children: 'children',
+                label: 'name'
+            },
+            videoTreeList: [],
+            isactive: -1,
+            btnIsactive: false,
+            currentBtn: 'one', //单屏、四屏按钮
+            fourView: 'one', //四屏默认不展示
+            videoUrl: '',
+            videoUrlList: [], //四屏视频框
+            fourVideoUrl: [],
+            isVideo: false,
+
+            channelId: '' //摄像头id
+        };
+    },
+    watch: {
+        filterText(val) {
+            this.$refs.tree.filter(val);
+        }
+    },
+    created() {
+        this.getSceneList(); //获取左侧场景列表
+    },
+
+    methods: {
+        // 过滤树
+        filterNode(value, data) {
+            if (!value) return true;
+            return data.sceneName.indexOf(value) !== -1;
+        },
+        getOneChannelCode(arr) {
+            if (!!arr[0] && arr[0].type == 'device') {
+                this.$nextTick(() => {
+                    this.$refs.tree.setCheckedKeys([arr[0].id]);
+                    this.isShowVideo = 'one';
+                    this.videoUrlList = [arr[0].channelCode];
+                });
+            } else if (!!arr[0].children) {
+                this.getOneChannelCode(arr[0].children);
+            }
+        },
+        getSceneList() {
+            this.$http.get('/sc-community/dahuaDevice/getDeviceTree').then(({ status, data, msg }) => {
+                if (status === 0 && data) {
+                    this.filterTreeData(data);
+                    this.sceneLists = data;
+                    this.getOneChannelCode(data);
+                }
+            });
+        },
+        filterTreeData(trData) {
+            trData.map((item, index) => {
+                if (this.isNotEmpty(item.children)) {
+                    item.disabled = true;
+                    this.filterTreeData(item.children);
+                } else if (item.type == 'device') {
+                    item.disabled = false;
+                } else {
+                    item.disabled = true;
+                }
+            });
+        },
+        isNotEmpty(arr) {
+            return arr && Array.isArray(arr) && arr.length > 0;
+        },
+
+        checkChange(nodeObj, SelectedObj) {
+            this.videoUrlList = [];
+            this.$refs.tree.getCheckedNodes().map((item) => {
+                if (item.type == 'device') {
+                    this.videoUrlList.push(item.channelCode);
+                }
+            });
+        }
+    }
+};
+</script>
+
+<style scoped lang='scss'>
+/* 实时视频左侧 */
+
+/deep/ .el-tree-node .el-tree-node__expand-icon {
+    display: hidden;
+}
+
+//隐藏展开的三角图标
+/deep/ .el-tree-node__content .expanded {
+    visibility: visible;
+}
+//隐藏子节点的展开三角形
+/deep/ .el-tree-node__children .el-icon-caret-right {
+    visibility: hidden;
+}
+
+/* /deep/.filter-tree .el-checkbox__inner {
+  display: none;
+} */
+.filter-tree .el-tree-node__children .el-checkbox__inner {
+    display: inline-block;
+}
+/deep/.el-tree-node__children .el-icon-caret-right {
+    visibility: initial;
+}
+
+//父级不显示复选框
+/deep/.el-tree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner {
+    display: inline-block;
+}
+/deep/.el-tree .el-tree-node .el-checkbox .el-checkbox__inner {
+    display: none;
+}
+/deep/.el-tree-node__content:hover {
+    background-color: #f5f7fa;
+}
+/deep/.is-current {
+    background: linear-gradient(90deg, rgba(37, 43, 60, 0.5) 0%, rgba(37, 43, 60, 0) 100%);
+}
+
+/deep/.el-tree-node__content > label.el-checkbox {
+    margin-right: 0.04rem;
+}
+/* .is-checked .el-tree-node__label {
+    color: #fff;
+} */
+/deep/ .el-tree {
+    color: rgba(255, 255, 255, 0.6);
+}
+// /deep/ .emptys > div > div > .el-tree-node__label {
+//     color: rgba(255, 255, 255, 0.6);
+// }
+
+.emptys {
+    div > div > .el-tree-node__label {
+        color: rgba(255, 255, 255, 0.6);
+    }
+    div[role='group'] {
+        color: rgba(255, 255, 255, 0.6);
+    }
+}
+/deep/.el-tree-node__content {
+    color: #000;
+    padding: 0 !important;
+}
+
+// 树的虚线
+.tree-list-ctrl-scroll /deep/ {
+    height: 100%;
+
+    .sidebar-wrapper .el-scrollbar__wrap {
+        overflow-x: hidden;
+    }
+    .is-horizontal {
+        display: none;
+    }
+    .el-tree > .el-tree-node:after {
+        border-top: none;
+    }
+    .el-tree-node {
+        position: relative;
+        padding-left: 5px;
+        background: white;
+    }
+    //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
+    .el-tree-node__expand-icon.is-leaf {
+        display: none;
+    }
+    .el-tree-node__children {
+        padding-left: 16px;
+    }
+
+    .el-tree-node :last-child:before {
+        height: 38px;
+    }
+
+    .el-tree > .el-tree-node:before {
+        border-left: none;
+    }
+
+    .el-tree > .el-tree-node:after {
+        border-top: none;
+    }
+
+    .el-tree-node:before {
+        content: '';
+        left: -4px;
+        position: absolute;
+        right: auto;
+        border-width: 1px;
+    }
+
+    .el-tree-node:after {
+        content: '';
+        left: -4px;
+        position: absolute;
+        right: auto;
+        border-width: 1px;
+    }
+
+    .el-tree-node:before {
+        border-left: 1px dashed rgba(216, 216, 216, 1);
+        bottom: 0px;
+        height: 100%;
+        top: -26px;
+        width: 1px;
+    }
+
+    .el-tree-node:after {
+        border-top: 1px dashed rgba(216, 216, 216, 1);
+        height: 20px;
+        top: 12px;
+        width: 20px;
+    }
+}
+
+//有子节点 且未展开
+.el-tree /deep/ .el-icon-caret-right:before {
+    background: url('~@/assets/img/expand.png') no-repeat center center;
+    content: '';
+    display: block;
+    width: 12px;
+    height: 12px;
+    font-size: 12px;
+    background-size: 12px;
+}
+//有子节点 且已展开
+.el-tree /deep/ .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
+    background: url('~@/assets/img/shrink.png') no-repeat center center;
+    content: '';
+    display: block;
+    width: 12px;
+    height: 12px;
+    font-size: 12px;
+    background-size: 12px;
+}
+//没有子节点
+.el-tree /deep/.el-tree-node__expand-icon.is-leaf::before {
+    background: url('~@/assets/img/shrink.png') no-repeat center center;
+    content: '';
+    display: block;
+    width: 14px;
+    height: 14px;
+    font-size: 14px;
+    background-size: 14px;
+}
+/deep/.el-tree-node__expand-icon.expanded {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+    background: white;
+}
+// /deep/.el-tree-node:focus > .el-tree-node__content {
+//     background-color: transparent !important;
+// }
+/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
+    background: url('~@/assets/img/checks.png') no-repeat center center;
+    content: '';
+    display: block;
+    width: 14px;
+    height: 14px;
+    font-size: 14px;
+    background-size: 14px;
+}
+
+.realVideoBox {
+    display: flex;
+    justify-content: space-between;
+    position: absolute;
+    top: 110px;
+    width: 100%;
+    height: calc(100% - 110px);
+
+    padding: 0 20px;
+    box-sizing: border-box;
+    .organ-tree {
+        width: 250px;
+        padding: 20px;
+        height: calc(100% - 80px);
+        background: white;
+        /deep/ .el-input__suffix{
+            top: 5px;
+        }
+        .tree-list-ctrl-scroll {
+            overflow-y: auto;
+            overflow-x: hidden;
+            height: calc(100% - 40px);
+            margin-top: 10px;
+            &::-webkit-scrollbar {
+                z-index: 11;
+                width: 4px;
+            }
+            &::-webkit-scrollbar-track,
+            &::-webkit-scrollbar-corner {
+                background: transparent;
+            }
+            &::-webkit-scrollbar-thumb {
+                border-radius: 5px;
+                width: 4px;
+                background: #e2e2e2;
+            }
+            &::-webkit-scrollbar-track-piece {
+                background: transparent;
+                width: 4px;
+            }
+        }
+    }
+    .rightVideo {
+        width: calc(100% - 270px);
+    }
+}
+</style>

commandCenter/src/views/videoSurveillance/myVideoPlayer.vue

@@ -0,0 +1,100 @@
+<template>
+    <video-player
+        class="video-player vjs-custom-skin"
+        :ref="uid"
+        :playsinline="true"
+        :options="playerOption"
+        @play="onPlayerPlay($event)"
+        @pause="onPlayerPause($event)"
+        @ended="onPlayerEnded($event)"
+        @waiting="onPlayerWaiting($event)"
+        @playing="onPlayerPlaying($event)"
+        @loadeddata="onPlayerLoadeddata($event)"
+        @timeupdate="onPlayerTimeupdate($event)"
+        @canplay="onPlayerCanplay($event)"
+        @canplaythrough="onPlayerCanplaythrough($event)"
+        @statechanged="playerStateChanged($event)"
+        @ready="playerReadied"
+    >
+    </video-player>
+</template>
+<script >
+import { videoPlayer } from 'vue-video-player';
+import 'video.js/dist/video-js.css';
+import 'vue-video-player/src/custom-theme.css';
+import 'videojs-contrib-hls';
+
+export default {
+    components: {
+        videoPlayer
+    },
+    props: {
+        videoData: Array
+    },
+    data() {
+        return {
+            uid: `videoPlayer_${this._uid}`
+        };
+    },
+    computed: {
+        playerOption() {
+            return {
+                playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
+                autoplay: false, // 如果为true,浏览器准备好时开始回放。
+                muted: false, // 默认情况下将会消除任何音频。
+                loop: false, // 是否视频一结束就重新开始。
+                preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
+                language: 'zh-CN',
+                aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+                sources: this.videoData,
+                hls: true,
+                poster: '', // 封面地址
+                notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
+                controlBar: {
+                    timeDivider: true, // 当前时间和持续时间的分隔符
+                    durationDisplay: true, // 显示持续时间
+                    remainingTimeDisplay: false, // 是否显示剩余时间功能
+                    fullscreenToggle: true // 是否显示全屏按钮
+                }
+            };
+        }
+    },
+    methods: {
+        // 播放回调
+        onPlayerPlay(player) {
+            this.$refs[this.uid].player.play();
+        },
+
+        // 暂停回调
+        onPlayerPause(player) {},
+
+        // 视频播完回调
+        onPlayerEnded($event) {},
+
+        // DOM元素上的readyState更改导致播放停止
+        onPlayerWaiting($event) {},
+
+        // 已开始播放回调
+        onPlayerPlaying($event) {},
+
+        // 当播放器在当前播放位置下载数据时触发
+        onPlayerLoadeddata($event) {},
+
+        // 当前播放位置发生变化时触发。
+        onPlayerTimeupdate($event) {},
+
+        //媒体的readyState为HAVE_FUTURE_DATA或更高
+        onPlayerCanplay(player) {},
+
+        //媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。
+        onPlayerCanplaythrough(player) {},
+
+        //播放状态改变回调
+        playerStateChanged(playerCurrentState) {},
+
+        //将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数。。
+        playerReadied(player) {}
+    }
+};
+</script>

commandCenter/src/views/videoSurveillance/video.vue

@@ -0,0 +1,73 @@
+<template>
+    <div class="videoContent" :class="`content${urlArr.length > 1 ? '_most' : ''}`">
+        <div class="videoList" v-for="(item, index) in urlArr" :key="index">
+            <my-video-playerVue
+                :videoData="[
+                    {
+                        type: 'application/x-mpegURL', // 类型
+                        withCredentials: false,
+                        src: item
+                    }
+                ]"
+            ></my-video-playerVue>
+        </div>
+    </div>
+</template>
+<script >
+import myVideoPlayerVue from './myVideoPlayer.vue';
+
+export default {
+    components: {
+        myVideoPlayerVue
+    },
+    props: {
+        videoUrlList: []
+    },
+    computed: {},
+    watch: {
+        videoUrlList(news) {
+            if (!!news.length) {
+                news.map((item) => {
+                    this.getVideo(item);
+                });
+            }
+        }
+    },
+    data() {
+        return {
+            urlArr: [
+                // 'http://cmgw-vpc.lechange.com:8888/LCO/7D100C2PAZ6C590/0/0/20220112T081910/051edef3559a8eca65febb70e504acdb.m3u8',
+            ]
+        };
+    },
+    methods: {
+        getVideo(urlId) {
+            this.$http
+                .post('/sc-community/dahuaDevice/getRealTimeUrl', { channelId: urlId, streamType: '1', type: 'hls' })
+                .then(({ status, data, msg }) => {
+                    if (status === 0 && data) {
+                        if (data.indexOf('10.35.239.168:7086') != -1) {
+                            let newUrl = data.replace('10.35.239.168:7086', '60.191.94.122:20046');
+                            this.urlArr.push(newUrl);
+                        }
+                    }
+                });
+        }
+    },
+    mounted() {}
+};
+</script>
+<style lang="scss" scoped>
+.videoContent {
+    &.content_most {
+        display: grid;
+        row-gap: 20px;
+        column-gap: 20px;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    .videoList {
+        width: 100%;
+        height: 100%;
+    }
+}
+</style>