Commit ac6837b0 authored by caicaicai's avatar caicaicai

环境监测页面编写,主页球转动

parent 2c6c852b
......@@ -19,7 +19,7 @@
"mockjs": "^1.1.0",
"moment": "^2.29.1",
"qs": "^6.10.1",
"screenfull": "^5.1.0",
"video.js": "^7.14.3",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
......@@ -1570,7 +1570,6 @@
"version": "7.15.3",
"resolved": "https://registry.nlark.com/@babel/runtime/download/@babel/runtime-7.15.3.tgz",
"integrity": "sha1-LhwogMoRjlsvmYgyK9inZWoyUCs=",
"dev": true,
"dependencies": {
"regenerator-runtime": "^0.13.4"
},
......@@ -1981,6 +1980,52 @@
"node": ">=0.10.0"
}
},
"node_modules/@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==",
"dependencies": {
"@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"
},
"engines": {
"node": ">=8",
"npm": ">=5"
},
"peerDependencies": {
"video.js": "^6 || ^7"
}
},
"node_modules/@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==",
"dependencies": {
"@babel/runtime": "^7.12.5",
"global": "^4.4.0",
"url-toolkit": "^2.2.1"
},
"engines": {
"node": ">=8",
"npm": ">=5"
}
},
"node_modules/@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==",
"dependencies": {
"@babel/runtime": "^7.5.5",
"global": "~4.4.0",
"is-function": "^1.0.1"
}
},
"node_modules/@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",
......@@ -2690,6 +2735,17 @@
"node": ">= 0.12.0"
}
},
"node_modules/aes-decrypter": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-3.1.2.tgz",
"integrity": "sha512-42nRwfQuPRj9R1zqZBdoxnaAmnIFyDi0MNyTVhjdFOd8fifXKKRfwIHIZ6AMn1or4x5WONzjwRTbTWcsIQ0O4A==",
"dependencies": {
"@babel/runtime": "^7.12.5",
"@videojs/vhs-utils": "^3.0.0",
"global": "^4.4.0",
"pkcs7": "^1.0.4"
}
},
"node_modules/ajv": {
"version": "6.12.6",
"resolved": "https://registry.nlark.com/ajv/download/ajv-6.12.6.tgz",
......@@ -5940,6 +5996,11 @@
}
]
},
"node_modules/dom-walk": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
"integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
},
"node_modules/domain-browser": {
"version": "1.2.0",
"resolved": "https://registry.nlark.com/domain-browser/download/domain-browser-1.2.0.tgz",
......@@ -7252,6 +7313,15 @@
"integrity": "sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=",
"dev": true
},
"node_modules/global": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
"integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
"dependencies": {
"min-document": "^2.19.0",
"process": "^0.11.10"
}
},
"node_modules/global-dirs": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-3.0.0.tgz",
......@@ -8194,6 +8264,11 @@
"integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
"dev": true
},
"node_modules/individual": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz",
"integrity": "sha1-gzsJfa0jKU52EXqY+zjg2a1hu5c="
},
"node_modules/infer-owner": {
"version": "1.0.4",
"resolved": "https://registry.npm.taobao.org/infer-owner/download/infer-owner-1.0.4.tgz",
......@@ -8549,6 +8624,11 @@
"node": ">=4"
}
},
"node_modules/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=="
},
"node_modules/is-glob": {
"version": "4.0.1",
"resolved": "https://registry.nlark.com/is-glob/download/is-glob-4.0.1.tgz",
......@@ -9110,6 +9190,11 @@
"verror": "1.10.0"
}
},
"node_modules/keycode": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
"integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ="
},
"node_modules/keyv": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/keyv/-/keyv-3.1.0.tgz",
......@@ -9342,6 +9427,16 @@
"yallist": "^3.0.2"
}
},
"node_modules/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==",
"dependencies": {
"@babel/runtime": "^7.12.5",
"@videojs/vhs-utils": "^3.0.0",
"global": "^4.4.0"
}
},
"node_modules/make-dir": {
"version": "3.1.0",
"resolved": "https://registry.nlark.com/make-dir/download/make-dir-3.1.0.tgz",
......@@ -9686,6 +9781,14 @@
"node": ">=4"
}
},
"node_modules/min-document": {
"version": "2.19.0",
"resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
"integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
"dependencies": {
"dom-walk": "^0.1.0"
}
},
"node_modules/min-indent": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
......@@ -9958,6 +10061,20 @@
"run-queue": "^1.0.3"
}
},
"node_modules/mpd-parser": {
"version": "0.17.0",
"resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-0.17.0.tgz",
"integrity": "sha512-oKS5G0jCcHHJ3sHYlcLeM9Xcbuixl08eAx7QW0Th7ChlZiI0YvLtGaHE/L0aKUBJFNvtkeksIr8XgJgSBBsS4g==",
"dependencies": {
"@babel/runtime": "^7.12.5",
"@videojs/vhs-utils": "^3.0.2",
"global": "^4.4.0",
"xmldom": "^0.5.0"
},
"bin": {
"mpd-to-m3u8-json": "bin/parse.js"
}
},
"node_modules/ms": {
"version": "2.1.2",
"resolved": "https://registry.nlark.com/ms/download/ms-2.1.2.tgz",
......@@ -9982,6 +10099,21 @@
"integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=",
"dev": true
},
"node_modules/mux.js": {
"version": "5.12.2",
"resolved": "https://registry.npmjs.org/mux.js/-/mux.js-5.12.2.tgz",
"integrity": "sha512-9OY1lrFIo7FxMeIC6aLUftiNv97AztufDfi30N7qDll1Pcy7bCxlHztyHp1Ce0KQwy2XqchGeENPS4v1NJngHQ==",
"dependencies": {
"@babel/runtime": "^7.11.2"
},
"bin": {
"muxjs-transmux": "bin/transmux.js"
},
"engines": {
"node": ">=8",
"npm": ">=5"
}
},
"node_modules/mz": {
"version": "2.7.0",
"resolved": "https://registry.npm.taobao.org/mz/download/mz-2.7.0.tgz",
......@@ -11084,6 +11216,17 @@
"node": ">=0.10.0"
}
},
"node_modules/pkcs7": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.4.tgz",
"integrity": "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==",
"dependencies": {
"@babel/runtime": "^7.5.5"
},
"bin": {
"pkcs7": "bin/cli.js"
}
},
"node_modules/pkg-dir": {
"version": "4.2.0",
"resolved": "https://registry.nlark.com/pkg-dir/download/pkg-dir-4.2.0.tgz?cache=0&sync_timestamp=1618847182947&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fpkg-dir%2Fdownload%2Fpkg-dir-4.2.0.tgz",
......@@ -11854,7 +11997,6 @@
"version": "0.11.10",
"resolved": "https://registry.npm.taobao.org/process/download/process-0.11.10.tgz",
"integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
"dev": true,
"engines": {
"node": ">= 0.6.0"
}
......@@ -12204,8 +12346,7 @@
"node_modules/regenerator-runtime": {
"version": "0.13.9",
"resolved": "https://registry.nlark.com/regenerator-runtime/download/regenerator-runtime-0.13.9.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fregenerator-runtime%2Fdownload%2Fregenerator-runtime-0.13.9.tgz",
"integrity": "sha1-iSV0Kpj/2QgUmI11Zq0wyjsmO1I=",
"dev": true
"integrity": "sha1-iSV0Kpj/2QgUmI11Zq0wyjsmO1I="
},
"node_modules/regenerator-transform": {
"version": "0.14.5",
......@@ -12647,11 +12788,27 @@
"aproba": "^1.1.1"
}
},
"node_modules/rust-result": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/rust-result/-/rust-result-1.0.0.tgz",
"integrity": "sha1-NMdbLm3Dn+WHXlveyFteD5FTb3I=",
"dependencies": {
"individual": "^2.0.0"
}
},
"node_modules/safe-buffer": {
"version": "5.1.2",
"resolved": "https://registry.npm.taobao.org/safe-buffer/download/safe-buffer-5.1.2.tgz",
"integrity": "sha1-mR7GnSluAxN0fVm9/St0XDX4go0="
},
"node_modules/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=",
"dependencies": {
"rust-result": "^1.0.0"
}
},
"node_modules/safe-regex": {
"version": "1.1.0",
"resolved": "https://registry.nlark.com/safe-regex/download/safe-regex-1.1.0.tgz",
......@@ -12897,17 +13054,6 @@
"url": "https://opencollective.com/webpack"
}
},
"node_modules/screenfull": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.1.0.tgz",
"integrity": "sha512-dYaNuOdzr+kc6J6CFcBrzkLCfyGcMg+gWkJ8us93IQ7y1cevhQAugFsaCdMHb6lw8KV3xPzSxzH7zM1dQap9mA==",
"engines": {
"node": ">=0.10.0"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/scss-tokenizer": {
"version": "0.2.3",
"resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
......@@ -14869,6 +15015,11 @@
"node": ">=4"
}
},
"node_modules/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=="
},
"node_modules/url/node_modules/punycode": {
"version": "1.3.2",
"resolved": "https://registry.npm.taobao.org/punycode/download/punycode-1.3.2.tgz",
......@@ -14986,6 +15137,39 @@
"extsprintf": "^1.2.0"
}
},
"node_modules/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==",
"dependencies": {
"@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"
}
},
"node_modules/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=="
},
"node_modules/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==",
"dependencies": {
"global": "^4.3.1"
}
},
"node_modules/vm-browserify": {
"version": "1.1.2",
"resolved": "https://registry.nlark.com/vm-browserify/download/vm-browserify-1.1.2.tgz",
......@@ -16174,6 +16358,14 @@
"node": ">=8"
}
},
"node_modules/xmldom": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.5.0.tgz",
"integrity": "sha512-Foaj5FXVzgn7xFzsKeNIde9g6aFBxTPi37iwsno8QvApmtg7KYrr+OPyRHcJF7dud2a5nGRBXK3n0dL62Gf7PA==",
"engines": {
"node": ">=10.0.0"
}
},
"node_modules/xtend": {
"version": "4.0.2",
"resolved": "https://registry.nlark.com/xtend/download/xtend-4.0.2.tgz",
......@@ -17326,7 +17518,6 @@
"version": "7.15.3",
"resolved": "https://registry.nlark.com/@babel/runtime/download/@babel/runtime-7.15.3.tgz",
"integrity": "sha1-LhwogMoRjlsvmYgyK9inZWoyUCs=",
"dev": true,
"requires": {
"regenerator-runtime": "^0.13.4"
}
......@@ -17695,6 +17886,41 @@
}
}
},
"@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"
}
},
"@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",
......@@ -18287,6 +18513,17 @@
"integrity": "sha1-vxEWycdYxRt6kz0pa3LCIe2UKLY=",
"dev": true
},
"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"
}
},
"ajv": {
"version": "6.12.6",
"resolved": "https://registry.nlark.com/ajv/download/ajv-6.12.6.tgz",
......@@ -20892,6 +21129,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",
......@@ -21953,6 +22195,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"
}
},
"global-dirs": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-3.0.0.tgz",
......@@ -22676,6 +22927,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.npm.taobao.org/infer-owner/download/infer-owner-1.0.4.tgz",
......@@ -22943,6 +23199,11 @@
"resolved": "https://registry.npm.taobao.org/is-fullwidth-code-point/download/is-fullwidth-code-point-2.0.0.tgz?cache=0&sync_timestamp=1618552469710&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fis-fullwidth-code-point%2Fdownload%2Fis-fullwidth-code-point-2.0.0.tgz",
"integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
},
"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",
......@@ -23369,6 +23630,11 @@
"verror": "1.10.0"
}
},
"keycode": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
"integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ="
},
"keyv": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/keyv/-/keyv-3.1.0.tgz",
......@@ -23565,6 +23831,16 @@
"yallist": "^3.0.2"
}
},
"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"
}
},
"make-dir": {
"version": "3.1.0",
"resolved": "https://registry.nlark.com/make-dir/download/make-dir-3.1.0.tgz",
......@@ -23833,6 +24109,14 @@
"resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
"integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ=="
},
"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"
}
},
"min-indent": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
......@@ -24063,6 +24347,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.nlark.com/ms/download/ms-2.1.2.tgz",
......@@ -24084,6 +24379,14 @@
"integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=",
"dev": true
},
"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"
}
},
"mz": {
"version": "2.7.0",
"resolved": "https://registry.npm.taobao.org/mz/download/mz-2.7.0.tgz",
......@@ -24946,6 +25249,14 @@
"pinkie": "^2.0.0"
}
},
"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"
}
},
"pkg-dir": {
"version": "4.2.0",
"resolved": "https://registry.nlark.com/pkg-dir/download/pkg-dir-4.2.0.tgz?cache=0&sync_timestamp=1618847182947&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fpkg-dir%2Fdownload%2Fpkg-dir-4.2.0.tgz",
......@@ -25613,8 +25924,7 @@
"process": {
"version": "0.11.10",
"resolved": "https://registry.npm.taobao.org/process/download/process-0.11.10.tgz",
"integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
"dev": true
"integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
},
"process-nextick-args": {
"version": "2.0.1",
......@@ -25907,8 +26217,7 @@
"regenerator-runtime": {
"version": "0.13.9",
"resolved": "https://registry.nlark.com/regenerator-runtime/download/regenerator-runtime-0.13.9.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fregenerator-runtime%2Fdownload%2Fregenerator-runtime-0.13.9.tgz",
"integrity": "sha1-iSV0Kpj/2QgUmI11Zq0wyjsmO1I=",
"dev": true
"integrity": "sha1-iSV0Kpj/2QgUmI11Zq0wyjsmO1I="
},
"regenerator-transform": {
"version": "0.14.5",
......@@ -26261,11 +26570,27 @@
"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"
}
},
"safe-buffer": {
"version": "5.1.2",
"resolved": "https://registry.npm.taobao.org/safe-buffer/download/safe-buffer-5.1.2.tgz",
"integrity": "sha1-mR7GnSluAxN0fVm9/St0XDX4go0="
},
"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.nlark.com/safe-regex/download/safe-regex-1.1.0.tgz",
......@@ -26449,11 +26774,6 @@
"ajv-keywords": "^3.5.2"
}
},
"screenfull": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.1.0.tgz",
"integrity": "sha512-dYaNuOdzr+kc6J6CFcBrzkLCfyGcMg+gWkJ8us93IQ7y1cevhQAugFsaCdMHb6lw8KV3xPzSxzH7zM1dQap9mA=="
},
"scss-tokenizer": {
"version": "0.2.3",
"resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
......@@ -28079,6 +28399,11 @@
}
}
},
"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",
......@@ -28169,6 +28494,39 @@
"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"
}
},
"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-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.nlark.com/vm-browserify/download/vm-browserify-1.1.2.tgz",
......@@ -29134,6 +29492,11 @@
"resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-4.0.0.tgz",
"integrity": "sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q=="
},
"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",
......@@ -19,6 +19,7 @@
"mockjs": "^1.1.0",
"moment": "^2.29.1",
"qs": "^6.10.1",
"video.js": "^7.14.3",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
......
......@@ -7,6 +7,11 @@ import 'element-ui/lib/theme-chalk/index.css';
import '../plugins/jquery-2.1.1.min.js';
import $ from 'jquery'
import './assets/icon/iconfont.css'
import Videojs from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Videojs
Vue.prototype.$ = $;
......
<template>
<div class="AuHiViewBody">
<div class="AuHiTop">
<div style="font-size:20px;font-weight:600;">环境监测报警记录查询搜索</div>
<div style="margin-top:10px;display:flex;">
<div>
<span>环境在线监测报警记录</span>
<template>
<el-select v-model="feijishebei.value" placeholder="请选择风机设备">
<el-option
v-for="item in feijishebei.options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
</div>
<div style="margin-left:20px;">
<template>
<el-select v-model="jiancexiang.value" placeholder="请选择监测项">
<el-option
v-for="item in jiancexiang.options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
</div>
<div style="margin-left:20px;">
<template>
<el-date-picker
v-model="selectDate1.value"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</template>
</div>
<div style="margin:0px 20px;">
<template>
<el-date-picker
v-model="selectDate2.value"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</template>
</div>
<el-button type="primary" icon="el-icon-upload2" @click="daochu()">导出</el-button>
<el-button icon="el-icon-printer" @click="dayin()">打印</el-button>
</div>
</div>
<div class="AuHiBottom">
<div style="margin-bottom:20px;display: flex;justify-content: space-between;">
<div style="font-size:20px;font-weight:600;">{{bottomTitle}}</div>
<!-- <el-button type="primary" round size="small" @click="switchBtn1()">{{switchBtn}}</el-button> -->
</div>
<div v-show="'趋势图' == switchBtn">
<template>
<el-table :data="automatedReportData" height="700" border style="width: 100%" :row-style="tableRowStyle">
<el-table-column prop="equipment" label="产品设备" align="center"></el-table-column>
<el-table-column prop="name" label="指标名称" align="center"></el-table-column>
<el-table-column prop="numerical" label="数值" align="center"></el-table-column>
<el-table-column prop="alarmLevel" label="报警级别" align="center"></el-table-column>
<el-table-column prop="time" label="时间" align="center"></el-table-column>
<el-table-column prop="status" label="处理状态" align="center"></el-table-column>
</el-table>
</template>
</div>
<!-- <div id="sensor1" v-show="'表格图' == switchBtn" style="width:1500px;height:700px;"></div> -->
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data() {
return {
bottomTitle:"报警记录列表",
switchBtn:"趋势图",
feijishebei:{
options: [{
value: '1号风机设备',
label: '1号风机设备'
}, {
value: '2号风机设备',
label: '2号风机设备'
}, {
value: '3号风机设备',
label: '3号风机设备'
}, {
value: '4号风机设备',
label: '4号风机设备'
}, {
value: '5号风机设备',
label: '5号风机设备'
}],
value: ''
},
jiancexiang:{
options: [{
value: '选项1',
label: '111'
}, {
value: '选项2',
label: '222'
}, {
value: '选项3',
label: '333'
}, {
value: '选项4',
label: '444'
}, {
value: '选项5',
label: '555'
}],
value: ''
},
selectDate1:{
value:""
},
selectDate2:{
value:""
},
automatedReportData:[{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
}],
}
},
// mounted(){
// const that = this;
// var myChart1 = echarts.init(document.querySelector('#sensor1'));
// var option1 = {
// legend: {
// data: ['温数据', '警戒线'],
// y:'bottom',
// },
// tooltip: {
// trigger: 'axis'
// },
// xAxis: {
// type: 'category',
// boundaryGap: false,
// data: ['1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号', '9号', '10号',
// '11号', '12号', '13号', '14号', '15号', '16号', '17号', '18号', '19号', '20号',
// '21号', '22号', '23号', '24号', '25号', '26号', '27号', '28号', '29号', '30号', '31号'
// ],
// },
// yAxis: {
// type: 'value',
// min:0,
// max:250,
// splitNumber : 20,
// splitLine:{
// show:true,
// },
// name:"高度(米)",
// },
// series: [{
// name:"温数据",
// data: [24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
// 52, 58, 78, 68, 58, 42, 10, 5, 28, 58,
// 200, 100, 150, 85, 153, 186, 196, 120, 36, 14, 100,
// ],
// type: 'line',
// areaStyle: {},
// smooth: true
// },{
// name:"警戒线",
// data: [240, 240, 240, 240, 240, 240, 240, 240, 240, 240,
// 240, 240, 240, 240, 240, 240, 240, 240, 240, 240,
// 240, 240, 240, 240, 240, 240, 240, 240, 240, 240, 240,
// ],
// type: 'line',
// itemStyle: {
// normal: {
// color: "red", //折线点的颜色
// lineStyle: {
// color: "red" //折线的颜色
// }
// }
// },
// },]
// };
// option1 && myChart1.setOption(option1);
// },
methods:{
// switchBtn1(){
// if(this.switchBtn == "趋势图"){
// this.switchBtn = "表格图";
// this.bottomTitle = "温数据监测趋势图";
// }else{
// this.switchBtn = "趋势图";
// this.bottomTitle = "报警记录列表";
// }
// },
tableRowStyle({row, rowIndex}) {
// if (row.name == "王小虎") {
// return 'background: rgb(255,232,232);';
// }
},
daochu(){
//获取表格
var exportFileContent = document.querySelector(".el-table").outerHTML;
//设置格式为Excel,表格内容通过btoa转化为base64,此方法只在文件较小时使用(小于1M)
//exportFileContent=window.btoa(unescape(encodeURIComponent(exportFileContent)));
//var link = "data:"+MIMEType+";base64," + exportFileContent;
//使用Blob
var blob = new Blob([exportFileContent], {type: "text/plain;charset=utf-8"}); //解决中文乱码问题
blob = new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});
//设置链接
var link = window.URL.createObjectURL(blob);
var a = document.createElement("a"); //创建a标签
a.download = "生产自动化系统实时数据表.xls"; //设置被下载的超链接目标(文件名)
a.href = link; //设置a标签的链接
document.body.appendChild(a); //a标签添加到页面
a.click(); //设置a标签触发单击事件
document.body.removeChild(a); //移除a标签
},
dayin(){
var tableToPrint = document.querySelector(".el-table");//将要被打印的表格
var newWin= window.open("");//新打开一个空窗口
newWin.document.write(tableToPrint.outerHTML);//将表格添加进新的窗口
newWin.document.close();//在IE浏览器中使用必须添加这一句
newWin.focus();//在IE浏览器中使用必须添加这一句
newWin.print();//打印
newWin.close();//关闭窗口
},
}
}
</script>
<style>
<style scoped>
.AuHiViewBody{
width: 100%;
height:100%;
background-color: rgb(245,246,251);
padding: 30px;
box-sizing: border-box;
}
.AuHiTop{
height: 110px;
background-color: white;
border-radius: 10px;
padding: 18px 20px 0px ;
box-sizing: border-box;
}
.AuHiBottom{
width: 100%;
background-color: white;
padding: 30px;
box-sizing: border-box;
height: 810px;
margin-top: 20px;
}
.el-table .warning{
background: red !important;
}
.el-table .success-row {
background: blue;
}
</style>
\ No newline at end of file
<template>
<div class="AuHiViewBody">
<div class="AuHiTop">
<div style="font-size:20px;font-weight:600;">环境监测历史数据查询搜索</div>
<div style="margin-top:10px;display:flex;">
<div>
<span>环境在线监测历史数据</span>
<template>
<el-select v-model="feijishebei.value" placeholder="请选择风机设备">
<el-option
v-for="item in feijishebei.options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
</div>
<div style="margin-left:20px;">
<template>
<el-select v-model="jiancexiang.value" placeholder="请选择监测项">
<el-option
v-for="item in jiancexiang.options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
</div>
<div style="margin-left:20px;">
<template>
<el-date-picker
v-model="selectDate1.value"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</template>
</div>
<div style="margin:0px 20px;">
<template>
<el-date-picker
v-model="selectDate2.value"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</template>
</div>
<el-button type="primary" icon="el-icon-upload2" @click="daochu()">导出</el-button>
<el-button icon="el-icon-printer" @click="dayin()">打印</el-button>
</div>
</div>
<div class="AuHiBottom">
<div style="margin-bottom:20px;display: flex;justify-content: space-between;">
<div style="font-size:20px;font-weight:600;">{{bottomTitle}}</div>
<el-button type="primary" round size="small" @click="switchBtn1()">{{switchBtn}}</el-button>
</div>
<div v-show="'趋势图' == switchBtn">
<template>
<el-table :data="automatedReportData" height="700" border style="width: 100%" :row-style="tableRowStyle">
<el-table-column prop="equipment" label="产品设备" align="center"></el-table-column>
<el-table-column prop="name" label="指标名称" align="center"></el-table-column>
<el-table-column prop="numerical" label="数值" align="center"></el-table-column>
<el-table-column prop="alarmLevel" label="报警级别" align="center"></el-table-column>
<el-table-column prop="time" label="时间" align="center"></el-table-column>
<el-table-column prop="status" label="处理状态" align="center"></el-table-column>
</el-table>
</template>
</div>
<div id="sensor1" v-show="'表格图' == switchBtn" style="width:1500px;height:700px;"></div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data() {
return {
bottomTitle:"历史数据列表",
switchBtn:"趋势图",
feijishebei:{
options: [{
value: '1号风机设备',
label: '1号风机设备'
}, {
value: '2号风机设备',
label: '2号风机设备'
}, {
value: '3号风机设备',
label: '3号风机设备'
}, {
value: '4号风机设备',
label: '4号风机设备'
}, {
value: '5号风机设备',
label: '5号风机设备'
}],
value: ''
},
jiancexiang:{
options: [{
value: '选项1',
label: '111'
}, {
value: '选项2',
label: '222'
}, {
value: '选项3',
label: '333'
}, {
value: '选项4',
label: '444'
}, {
value: '选项5',
label: '555'
}],
value: ''
},
selectDate1:{
value:""
},
selectDate2:{
value:""
},
automatedReportData:[{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
}],
}
},
mounted(){
const that = this;
var myChart1 = echarts.init(document.querySelector('#sensor1'));
var option1 = {
legend: {
data: ['温数据', '警戒线'],
y:'bottom',
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号', '9号', '10号',
'11号', '12号', '13号', '14号', '15号', '16号', '17号', '18号', '19号', '20号',
'21号', '22号', '23号', '24号', '25号', '26号', '27号', '28号', '29号', '30号', '31号'
],
},
yAxis: {
type: 'value',
min:0,
max:250,
splitNumber : 20,
splitLine:{
show:true,
},
name:"高度(米)",
},
series: [{
name:"温数据",
data: [24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
52, 58, 78, 68, 58, 42, 10, 5, 28, 58,
200, 100, 150, 85, 153, 186, 196, 120, 36, 14, 100,
],
type: 'line',
areaStyle: {},
smooth: true
},{
name:"警戒线",
data: [240, 240, 240, 240, 240, 240, 240, 240, 240, 240,
240, 240, 240, 240, 240, 240, 240, 240, 240, 240,
240, 240, 240, 240, 240, 240, 240, 240, 240, 240, 240,
],
type: 'line',
itemStyle: {
normal: {
color: "red", //折线点的颜色
lineStyle: {
color: "red" //折线的颜色
}
}
},
},]
};
option1 && myChart1.setOption(option1);
},
methods:{
switchBtn1(){
if(this.switchBtn == "趋势图"){
this.switchBtn = "表格图";
this.bottomTitle = "温数据监测趋势图";
}else{
this.switchBtn = "趋势图";
this.bottomTitle = "历史数据列表";
}
},
tableRowStyle({row, rowIndex}) {
// if (row.name == "王小虎") {
// return 'background: rgb(255,232,232);';
// }
},
daochu(){
//获取表格
var exportFileContent = document.querySelector(".el-table").outerHTML;
//设置格式为Excel,表格内容通过btoa转化为base64,此方法只在文件较小时使用(小于1M)
//exportFileContent=window.btoa(unescape(encodeURIComponent(exportFileContent)));
//var link = "data:"+MIMEType+";base64," + exportFileContent;
//使用Blob
var blob = new Blob([exportFileContent], {type: "text/plain;charset=utf-8"}); //解决中文乱码问题
blob = new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});
//设置链接
var link = window.URL.createObjectURL(blob);
var a = document.createElement("a"); //创建a标签
a.download = "生产自动化系统实时数据表.xls"; //设置被下载的超链接目标(文件名)
a.href = link; //设置a标签的链接
document.body.appendChild(a); //a标签添加到页面
a.click(); //设置a标签触发单击事件
document.body.removeChild(a); //移除a标签
},
dayin(){
var tableToPrint = document.querySelector(".el-table");//将要被打印的表格
var newWin= window.open("");//新打开一个空窗口
newWin.document.write(tableToPrint.outerHTML);//将表格添加进新的窗口
newWin.document.close();//在IE浏览器中使用必须添加这一句
newWin.focus();//在IE浏览器中使用必须添加这一句
newWin.print();//打印
newWin.close();//关闭窗口
},
}
}
</script>
<style>
<style scoped>
.AuHiViewBody{
width: 100%;
height:100%;
background-color: rgb(245,246,251);
padding: 30px;
box-sizing: border-box;
}
.AuHiTop{
height: 110px;
background-color: white;
border-radius: 10px;
padding: 18px 20px 0px ;
box-sizing: border-box;
}
.AuHiBottom{
width: 100%;
background-color: white;
padding: 30px;
box-sizing: border-box;
height: 810px;
margin-top: 20px;
}
.el-table .warning{
background: red !important;
}
.el-table .success-row {
background: blue;
}
</style>
\ No newline at end of file
......@@ -250,8 +250,10 @@ export default {
switchBtn1(){
if(this.switchBtn == "趋势图"){
this.switchBtn = "表格图";
this.bottomTitle = "温数据监测趋势图";
}else{
this.switchBtn = "趋势图";
this.bottomTitle = "实时数据列表";
}
},
tableRowStyle({row, rowIndex}) {
......
<template>
<div class="allBox">
<!-- 中间球 -->
<div></div>
<div class="rotatingBall"></div>
<!-- 智能派单系统 -->
<div class="intelligentDispatch">
......@@ -112,7 +112,6 @@
</template>
<script>
export default {
data(){
return{
......@@ -138,6 +137,120 @@ export default {
height: 100%;
position: relative;
}
.rotatingBall{
position: absolute;
top: 12%;
left: 50%;
transform: translateX(-55%);
width: 300px;
height: 300px;
background-image: url('../imgs/qiuxuliezhen/00_00000.png');
background-size: 100% 100%;
animation: turn 3s linear infinite;
}
@keyframes turn {
0% { background-image: url('../imgs/qiuxuliezhen/00_00000.png');}
1% { background-image: url('../imgs/qiuxuliezhen/00_00001.png');}
2% { background-image: url('../imgs/qiuxuliezhen/00_00004.png');}
3% { background-image: url('../imgs/qiuxuliezhen/00_00006.png');}
4% { background-image: url('../imgs/qiuxuliezhen/00_00007.png');}
5% { background-image: url('../imgs/qiuxuliezhen/00_00008.png');}
6% { background-image: url('../imgs/qiuxuliezhen/00_00009.png');}
7% { background-image: url('../imgs/qiuxuliezhen/00_00011.png');}
8% { background-image: url('../imgs/qiuxuliezhen/00_00012.png');}
9% { background-image: url('../imgs/qiuxuliezhen/00_00014.png');}
10% { background-image: url('../imgs/qiuxuliezhen/00_00016.png');}
11% { background-image: url('../imgs/qiuxuliezhen/00_00018.png');}
12% { background-image: url('../imgs/qiuxuliezhen/00_00020.png');}
13% { background-image: url('../imgs/qiuxuliezhen/00_00021.png');}
14% { background-image: url('../imgs/qiuxuliezhen/00_00022.png');}
15% { background-image: url('../imgs/qiuxuliezhen/00_00023.png');}
16% { background-image: url('../imgs/qiuxuliezhen/00_00024.png');}
17% { background-image: url('../imgs/qiuxuliezhen/00_00025.png');}
18% { background-image: url('../imgs/qiuxuliezhen/00_00026.png');}
19% { background-image: url('../imgs/qiuxuliezhen/00_00027.png');}
20% { background-image: url('../imgs/qiuxuliezhen/00_00028.png');}
21% { background-image: url('../imgs/qiuxuliezhen/00_00029.png');}
22% { background-image: url('../imgs/qiuxuliezhen/00_00030.png');}
23% { background-image: url('../imgs/qiuxuliezhen/00_00031.png');}
24% { background-image: url('../imgs/qiuxuliezhen/00_00032.png');}
25% { background-image: url('../imgs/qiuxuliezhen/00_00034.png');}
26% { background-image: url('../imgs/qiuxuliezhen/00_00036.png');}
27% { background-image: url('../imgs/qiuxuliezhen/00_00038.png');}
28% { background-image: url('../imgs/qiuxuliezhen/00_00039.png');}
29% { background-image: url('../imgs/qiuxuliezhen/00_00040.png');}
30% { background-image: url('../imgs/qiuxuliezhen/00_00042.png');}
31% { background-image: url('../imgs/qiuxuliezhen/00_00043.png');}
32% { background-image: url('../imgs/qiuxuliezhen/00_00044.png');}
33% { background-image: url('../imgs/qiuxuliezhen/00_00045.png');}
34% { background-image: url('../imgs/qiuxuliezhen/00_00046.png');}
35% { background-image: url('../imgs/qiuxuliezhen/00_00047.png');}
36% { background-image: url('../imgs/qiuxuliezhen/00_00048.png');}
37% { background-image: url('../imgs/qiuxuliezhen/00_00049.png');}
38% { background-image: url('../imgs/qiuxuliezhen/00_00050.png');}
39% { background-image: url('../imgs/qiuxuliezhen/00_00051.png');}
40% { background-image: url('../imgs/qiuxuliezhen/00_00052.png');}
41% { background-image: url('../imgs/qiuxuliezhen/00_00053.png');}
42% { background-image: url('../imgs/qiuxuliezhen/00_00054.png');}
43% { background-image: url('../imgs/qiuxuliezhen/00_00055.png');}
44% { background-image: url('../imgs/qiuxuliezhen/00_00056.png');}
45% { background-image: url('../imgs/qiuxuliezhen/00_00057.png');}
46% { background-image: url('../imgs/qiuxuliezhen/00_00058.png');}
47% { background-image: url('../imgs/qiuxuliezhen/00_00059.png');}
48% { background-image: url('../imgs/qiuxuliezhen/00_00060.png');}
49% { background-image: url('../imgs/qiuxuliezhen/00_00061.png');}
50% { background-image: url('../imgs/qiuxuliezhen/00_00062.png');}
51% { background-image: url('../imgs/qiuxuliezhen/00_00063.png');}
52% { background-image: url('../imgs/qiuxuliezhen/00_00064.png');}
53% { background-image: url('../imgs/qiuxuliezhen/00_00066.png');}
54% { background-image: url('../imgs/qiuxuliezhen/00_00068.png');}
55% { background-image: url('../imgs/qiuxuliezhen/00_00070.png');}
56% { background-image: url('../imgs/qiuxuliezhen/00_00071.png');}
57% { background-image: url('../imgs/qiuxuliezhen/00_00072.png');}
58% { background-image: url('../imgs/qiuxuliezhen/00_00074.png');}
59% { background-image: url('../imgs/qiuxuliezhen/00_00076.png');}
60% { background-image: url('../imgs/qiuxuliezhen/00_00077.png');}
61% { background-image: url('../imgs/qiuxuliezhen/00_00078.png');}
62% { background-image: url('../imgs/qiuxuliezhen/00_00079.png');}
63% { background-image: url('../imgs/qiuxuliezhen/00_00080.png');}
64% { background-image: url('../imgs/qiuxuliezhen/00_00081.png');}
65% { background-image: url('../imgs/qiuxuliezhen/00_00082.png');}
66% { background-image: url('../imgs/qiuxuliezhen/00_00083.png');}
67% { background-image: url('../imgs/qiuxuliezhen/00_00084.png');}
68% { background-image: url('../imgs/qiuxuliezhen/00_00085.png');}
69% { background-image: url('../imgs/qiuxuliezhen/00_00086.png');}
70% { background-image: url('../imgs/qiuxuliezhen/00_00087.png');}
71% { background-image: url('../imgs/qiuxuliezhen/00_00088.png');}
72% { background-image: url('../imgs/qiuxuliezhen/00_00089.png');}
73% { background-image: url('../imgs/qiuxuliezhen/00_00090.png');}
74% { background-image: url('../imgs/qiuxuliezhen/00_00091.png');}
75% { background-image: url('../imgs/qiuxuliezhen/00_00092.png');}
76% { background-image: url('../imgs/qiuxuliezhen/00_00093.png');}
77% { background-image: url('../imgs/qiuxuliezhen/00_00094.png');}
78% { background-image: url('../imgs/qiuxuliezhen/00_00095.png');}
79% { background-image: url('../imgs/qiuxuliezhen/00_00096.png');}
80% { background-image: url('../imgs/qiuxuliezhen/00_00097.png');}
81% { background-image: url('../imgs/qiuxuliezhen/00_00098.png');}
82% { background-image: url('../imgs/qiuxuliezhen/00_00099.png');}
83% { background-image: url('../imgs/qiuxuliezhen/00_00100.png');}
84% { background-image: url('../imgs/qiuxuliezhen/00_00101.png');}
85% { background-image: url('../imgs/qiuxuliezhen/00_00102.png');}
86% { background-image: url('../imgs/qiuxuliezhen/00_00103.png');}
87% { background-image: url('../imgs/qiuxuliezhen/00_00104.png');}
88% { background-image: url('../imgs/qiuxuliezhen/00_00106.png');}
89% { background-image: url('../imgs/qiuxuliezhen/00_00108.png');}
90% { background-image: url('../imgs/qiuxuliezhen/00_00110.png');}
91% { background-image: url('../imgs/qiuxuliezhen/00_00112.png');}
92% { background-image: url('../imgs/qiuxuliezhen/00_00114.png');}
93% { background-image: url('../imgs/qiuxuliezhen/00_00116.png');}
94% { background-image: url('../imgs/qiuxuliezhen/00_00117.png');}
95% { background-image: url('../imgs/qiuxuliezhen/00_00118.png');}
96% { background-image: url('../imgs/qiuxuliezhen/00_00119.png');}
97% { background-image: url('../imgs/qiuxuliezhen/00_00120.png');}
98% { background-image: url('../imgs/qiuxuliezhen/00_00122.png');}
99% { background-image: url('../imgs/qiuxuliezhen/00_00123.png');}
100% { background-image: url('../imgs/qiuxuliezhen/00_00124.png');}
}
/* 智能派单系统 */
.intelligentDispatch{
top: 35%;
......
<template>
<div class="iframeBody">
<!-- <iframe src="http://192.168.0.106:8080/examples/?q=loader#webgl_loader_obj" class="iframeViews"></iframe> -->
<div class="leftMenuBar">
<div style="color:#071E4C;font-weight:600;font-size:20px;margin-bottom:20px;">视频监控区域</div>
<div style="color:#071E4C;font-weight:600;font-size:17px;">
<div v-for="(item,index) in videoAreaArray" :key="index" style="margin-bottom:10px;cursor: pointer;" :class="index == videoAreaIndex ? 'leftMenuSelected' : '' " @click="videoMenuIndex(index)">
<span class="el-icon-camera-solid"> {{item}}</span>
</div>
</div>
</div>
<div class="rightVideoBox">
</div>
</div>
</template>
<script>
export default {
data(){
return{
videoAreaArray:["采区监控","厂区监控","办公室监控","办公室监控1","办公室监控2"],
videoAreaIndex:0,
}
},
methods:{
videoMenuIndex(index){
this.videoAreaIndex = index;
}
},
}
</script>
<style scoped>
*{
margin: 0;
padding: 0;
}
.iframeBody{
height: 100%;
background-color: aquamarine;
}
.iframeViews{
display: flex;
width: 100%;
}
.leftMenuBar{
width: 10%;
height: 100%;
background-color: white;
padding: 20px;
box-sizing: border-box;
}
.rightVideoBox{
width: 90%;
height: 100%;
background-color: bisque;
}
.leftMenuSelected{
color: rgb(0,82,255);
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment