优化

babel.config.js

@@ -1,3 +1,6 @@
+// module.exports = {
+//   presets: ["@vue/cli-plugin-babel/preset"],
+// };
 module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"],
+  plugins: ["@babel/plugin-transform-optional-chaining"],
 };

package-lock.json

@@ -260,7 +260,7 @@
     },
     "@babel/helper-simple-access": {
       "version": "7.22.5",
-      "resolved": "https://registry.npmmirror.com/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
       "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
       "dev": true,
       "requires": {
@@ -386,13 +386,13 @@
     },
     "@babel/plugin-proposal-private-property-in-object": {
       "version": "7.21.0-placeholder-for-preset-env.2",
-      "resolved": "https://registry.npmmirror.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
       "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
       "dev": true
     },
     "@babel/plugin-syntax-async-generators": {
       "version": "7.8.4",
-      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
       "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
       "dev": true,
       "requires": {
@@ -401,7 +401,7 @@
     },
     "@babel/plugin-syntax-class-properties": {
       "version": "7.12.13",
-      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
       "integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
       "dev": true,
       "requires": {
@@ -410,7 +410,7 @@
     },
     "@babel/plugin-syntax-class-static-block": {
       "version": "7.14.5",
-      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
       "integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==",
       "dev": true,
       "requires": {
@@ -437,7 +437,7 @@
     },
     "@babel/plugin-syntax-export-namespace-from": {
       "version": "7.8.3",
-      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
       "integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
       "dev": true,
       "requires": {
@@ -464,7 +464,7 @@
     },
     "@babel/plugin-syntax-import-meta": {
       "version": "7.10.4",
-      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
       "integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==",
       "dev": true,
       "requires": {
@@ -473,7 +473,7 @@
     },
     "@babel/plugin-syntax-json-strings": {
       "version": "7.8.3",
-      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
       "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
       "dev": true,
       "requires": {
@@ -491,7 +491,7 @@
     },
     "@babel/plugin-syntax-logical-assignment-operators": {
       "version": "7.10.4",
-      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
       "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
       "dev": true,
       "requires": {
@@ -500,7 +500,7 @@
     },
     "@babel/plugin-syntax-nullish-coalescing-operator": {
       "version": "7.8.3",
-      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
       "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
       "dev": true,
       "requires": {
@@ -509,7 +509,7 @@
     },
     "@babel/plugin-syntax-numeric-separator": {
       "version": "7.10.4",
-      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
       "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
       "dev": true,
       "requires": {
@@ -518,7 +518,7 @@
     },
     "@babel/plugin-syntax-object-rest-spread": {
       "version": "7.8.3",
-      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
       "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
       "dev": true,
       "requires": {
@@ -527,7 +527,7 @@
     },
     "@babel/plugin-syntax-optional-catch-binding": {
       "version": "7.8.3",
-      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
       "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
       "dev": true,
       "requires": {
@@ -536,7 +536,7 @@
     },
     "@babel/plugin-syntax-optional-chaining": {
       "version": "7.8.3",
-      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
       "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
       "dev": true,
       "requires": {
@@ -545,7 +545,7 @@
     },
     "@babel/plugin-syntax-private-property-in-object": {
       "version": "7.14.5",
-      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz",
       "integrity": "sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==",
       "dev": true,
       "requires": {
@@ -554,7 +554,7 @@
     },
     "@babel/plugin-syntax-top-level-await": {
       "version": "7.14.5",
-      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz",
       "integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==",
       "dev": true,
       "requires": {
@@ -563,7 +563,7 @@
     },
     "@babel/plugin-syntax-unicode-sets-regex": {
       "version": "7.18.6",
-      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz",
       "integrity": "sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==",
       "dev": true,
       "requires": {
@@ -830,7 +830,7 @@
     },
     "@babel/plugin-transform-named-capturing-groups-regex": {
       "version": "7.22.5",
-      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.22.5.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.22.5.tgz",
       "integrity": "sha512-YgLLKmS3aUBhHaxp5hi1WJTgOUb/NCuDHzGT9z9WTt3YG+CPRhJs6nprbStx6DnWM4dh6gt7SU3sZodbZ08adQ==",
       "dev": true,
       "requires": {
@@ -901,14 +901,22 @@
       }
     },
     "@babel/plugin-transform-optional-chaining": {
-      "version": "7.22.10",
+      "version": "7.24.1",
-      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.22.10.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.24.1.tgz",
-      "integrity": "sha512-MMkQqZAZ+MGj+jGTG3OTuhKeBpNcO+0oCEbrGNEaOmiEn+1MzRyQlYsruGiU8RTK3zV6XwrVJTmwiDOyYK6J9g==",
+      "integrity": "sha512-n03wmDt+987qXwAgcBlnUUivrZBPZ8z1plL0YvgQalLm+ZE5BMhGm94jhxXtA1wzv1Cu2aaOv1BM9vbVttrzSg==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.24.0",
         "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
         "@babel/plugin-syntax-optional-chaining": "^7.8.3"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.24.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.0.tgz",
+          "integrity": "sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w==",
+          "dev": true
+        }
       }
     },
     "@babel/plugin-transform-parameters": {
@@ -1159,7 +1167,7 @@
     },
     "@babel/preset-modules": {
       "version": "0.1.6-no-external-plugins",
-      "resolved": "https://registry.npmmirror.com/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz",
       "integrity": "sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==",
       "dev": true,
       "requires": {
@@ -1170,7 +1178,7 @@
     },
     "@babel/regjsgen": {
       "version": "0.8.0",
-      "resolved": "https://registry.npmmirror.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/regjsgen/-/regjsgen-0.8.0.tgz",
       "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==",
       "dev": true
     },
@@ -2022,6 +2030,49 @@
         "webpack-merge": "^5.7.3",
         "webpack-virtual-modules": "^0.4.2",
         "whatwg-fetch": "^3.6.2"
+      },
+      "dependencies": {
+        "@vue/vue-loader-v15": {
+          "version": "npm:vue-loader@15.11.1",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.11.1.tgz",
+          "integrity": "sha512-0iw4VchYLePqJfJu9s62ACWUXeSqM30SQqlIftbYWM3C+jpPcEHKSPUZBLjSF9au4HTHQ/naF6OGnO3Q/qGR3Q==",
+          "dev": true,
+          "requires": {
+            "@vue/component-compiler-utils": "^3.1.0",
+            "hash-sum": "^1.0.2",
+            "loader-utils": "^1.1.0",
+            "vue-hot-reload-api": "^2.3.0",
+            "vue-style-loader": "^4.1.0"
+          },
+          "dependencies": {
+            "hash-sum": {
+              "version": "1.0.2",
+              "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
+              "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
+              "dev": true
+            }
+          }
+        },
+        "json5": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        }
       }
     },
     "@vue/cli-shared-utils": {
@@ -2186,47 +2237,6 @@
         }
       }
     },
-    "@vue/vue-loader-v15": {
-      "version": "npm:vue-loader@15.10.1",
-      "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.10.1.tgz",
-      "integrity": "sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==",
-      "dev": true,
-      "requires": {
-        "@vue/component-compiler-utils": "^3.1.0",
-        "hash-sum": "^1.0.2",
-        "loader-utils": "^1.1.0",
-        "vue-hot-reload-api": "^2.3.0",
-        "vue-style-loader": "^4.1.0"
-      },
-      "dependencies": {
-        "hash-sum": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
-          "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
-          "dev": true
-        },
-        "json5": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz",
-          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.4.2",
-          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-1.4.2.tgz",
-          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
-          }
-        }
-      }
-    },
     "@vue/web-component-wrapper": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz",
@@ -3034,6 +3044,16 @@
       "integrity": "sha512-4/aL9X3Wh0yiMQlE+eeRhWP6vclO3QRtw1JHKIT0FFUs5FjpFmESqtMvYZ0+lbzBw900b95mS0hohy+qn2VK/g==",
       "dev": true
     },
+    "clipboard": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmmirror.com/clipboard/-/clipboard-2.0.11.tgz",
+      "integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
+      "requires": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "clipboardy": {
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/clipboardy/-/clipboardy-2.3.0.tgz",
@@ -3672,6 +3692,11 @@
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
     },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
+    },
     "depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz",
@@ -4813,6 +4838,14 @@
         "slash": "^3.0.0"
       }
     },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
+      "requires": {
+        "delegate": "^3.1.2"
+      }
+    },
     "graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -7049,7 +7082,7 @@
     },
     "regenerate": {
       "version": "1.4.2",
-      "resolved": "https://registry.npmmirror.com/regenerate/-/regenerate-1.4.2.tgz",
+      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
       "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==",
       "dev": true
     },
@@ -7070,7 +7103,7 @@
     },
     "regenerator-transform": {
       "version": "0.15.2",
-      "resolved": "https://registry.npmmirror.com/regenerator-transform/-/regenerator-transform-0.15.2.tgz",
+      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.2.tgz",
       "integrity": "sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==",
       "dev": true,
       "requires": {
@@ -7085,7 +7118,7 @@
     },
     "regexpu-core": {
       "version": "5.3.2",
-      "resolved": "https://registry.npmmirror.com/regexpu-core/-/regexpu-core-5.3.2.tgz",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.3.2.tgz",
       "integrity": "sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==",
       "dev": true,
       "requires": {
@@ -7099,7 +7132,7 @@
     },
     "regjsparser": {
       "version": "0.9.1",
-      "resolved": "https://registry.npmmirror.com/regjsparser/-/regjsparser-0.9.1.tgz",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.9.1.tgz",
       "integrity": "sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==",
       "dev": true,
       "requires": {
@@ -7108,7 +7141,7 @@
       "dependencies": {
         "jsesc": {
           "version": "0.5.0",
-          "resolved": "https://registry.npmmirror.com/jsesc/-/jsesc-0.5.0.tgz",
+          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
           "integrity": "sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==",
           "dev": true
         }
@@ -7243,6 +7276,11 @@
         "ajv-keywords": "^3.5.2"
       }
     },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/select/-/select-1.1.2.tgz",
+      "integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA=="
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/select-hose/-/select-hose-2.0.0.tgz",
@@ -7879,6 +7917,11 @@
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
       "dev": true
     },
+    "tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+    },
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -7945,13 +7988,13 @@
     },
     "unicode-canonical-property-names-ecmascript": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmmirror.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
       "integrity": "sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==",
       "dev": true
     },
     "unicode-match-property-ecmascript": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmmirror.com/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
       "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
       "dev": true,
       "requires": {
@@ -7961,13 +8004,13 @@
     },
     "unicode-match-property-value-ecmascript": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmmirror.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz",
       "integrity": "sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==",
       "dev": true
     },
     "unicode-property-aliases-ecmascript": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmmirror.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
       "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==",
       "dev": true
     },
@@ -8062,6 +8105,14 @@
       "resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-5.0.1.tgz",
       "integrity": "sha512-mWjFJzUqA4lG+DmsmibvMpoiBnl+IH2SSeiiQ3i5M0t1y9FknTxnGT0DsMb2YdJLgjYMEK3sYOWzqgLnZMH8Lg=="
     },
+    "vue-clipboard2": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmmirror.com/vue-clipboard2/-/vue-clipboard2-0.3.3.tgz",
+      "integrity": "sha512-aNWXIL2DKgJyY/1OOeITwAQz1fHaCIGvUFHf9h8UcoQBG5a74MkdhS/xqoYe7DNZdQmZRL+TAdIbtUs9OyVjbw==",
+      "requires": {
+        "clipboard": "^2.0.0"
+      }
+    },
     "vue-eslint-parser": {
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",

package.json

@@ -17,6 +17,7 @@
     "swiper": "^10.2.0",
     "vue": "^2.6.14",
     "vue-awesome-swiper": "^5.0.1",
+    "vue-clipboard2": "^0.3.3",
     "vue-lazyload": "^1.3.3",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"
@@ -24,6 +25,7 @@
   "devDependencies": {
     "@babel/core": "^7.12.16",
     "@babel/eslint-parser": "^7.12.16",
+    "@babel/plugin-transform-optional-chaining": "^7.24.1",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-plugin-router": "~5.0.0",

public/index.html

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

src/App.vue

@@ -1,10 +1,61 @@
 <template>
   <div id="app">
-    <router-view />
+    <router-view></router-view>
   </div>
 </template>
 
-<style lang="less">
+<script>
-#app {
+import { mapActions } from "vuex";
-}
+
-</style>
+export default {
+  name: "App",
+  methods: {
+    ...mapActions("cache", ["addCache", "removeCache"]),
+    // 收集缓存（通过监听）
+    collectCaches() {
+      // 收集当前路由相关的缓存
+      this.$route.matched.forEach((routeMatch) => {
+        const instance = routeMatch.components?.default;
+        const componentName = instance?.name;
+        console.log(componentName);
+        if (process.env.NODE_ENV === "development") {
+          this.checkRouteComponentName(componentName, instance?.__file);
+        }
+        // 配置了meta.keepAlive的路由组件添加到缓存
+        if (routeMatch.meta.keepAlive) {
+          if (!componentName) {
+            console.warn(`${routeMatch.path} 路由的组件名称name为空`);
+            return;
+          }
+          this.addCache(componentName);
+        } else {
+          this.removeCache(componentName);
+        }
+      });
+    },
+    // 检测路由组件名称是否重复（组件重名会缓存到不该缓存的组件，而且不容易排查问题，所以开发环境时检测重名）
+    checkRouteComponentName(name, file) {
+      if (!this.cmpNames) this.cmpNames = {};
+      if (this.cmpNames[name]) {
+        if (this.cmpNames[name] !== file) {
+          console.warn(
+            `${file} 与${this.cmpNames[name]} 组件名称重复： ${name}`
+          );
+        }
+      } else {
+        this.cmpNames[name] = file;
+      }
+    },
+  },
+  watch: {
+    "$route.path": {
+      immediate: true,
+      handler() {
+        this.collectCaches();
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less"></style>

src/Permission.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="error-page">
+    <div class="error-code">4<span>0</span>3</div>
+    <div class="error-desc">啊哦~ 你没有权限访问该页面哦</div>
+    <div class="error-handle">
+      <router-link to="/stritl">
+        <el-button type="primary" size="large">返回首页</el-button>
+      </router-link>
+      <el-button class="error-btn" type="primary" size="large" @click="goBack"
+        >返回上一页</el-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    goBack() {
+      this.$router.go(-1);
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.error-page {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background: #f3f3f3;
+  box-sizing: border-box;
+  .error-code {
+    line-height: 1;
+    font-size: 250px;
+    font-weight: bolder;
+    color: #f02d2d;
+  }
+  .error-code span {
+    color: #00a854;
+  }
+  .error-desc {
+    font-size: 30px;
+    color: #777;
+  }
+  .error-handle {
+    margin-top: 30px;
+    padding-bottom: 200px;
+  }
+  .el-button--primary {
+    width: auto !important;
+  }
+  .error-btn {
+    margin-left: 100px;
+  }
+}
+</style>

src/assets/css/global.less

@@ -1,5 +1,5 @@
 //Brand @color
-@color-primary: #169e8c;
+@color-primary: #1c77ac;
 @color-primary-light: mix(@color-white, @color-primary, 80%);
 @color-primary-lighter: mix(@color-white, @color-primary, 90%);
 //Functional @color

src/assets/css/reset.css

@@ -2,7 +2,12 @@
   margin: 0;
   padding: 0;
 }
-
+img {
+  -webkit-user-select: none; /* Safari 3.1+ */
+  -moz-user-select: none; /* Firefox 2+ */
+  -ms-user-select: none; /* IE 10+ */
+  user-select: none; /* Standard syntax */
+}
 html,
 body,
 #app,

src/assets/fonts - 副本/iconfont.css

@@ -0,0 +1,61 @@
+@font-face {
+  font-family: "iconfont"; /* Project id  */
+  src: url('iconfont.ttf?t=1690188947515') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-paizhao:before {
+  content: "\e6ba";
+}
+
+.icon-paizhao-xianxing:before {
+  content: "\e8d1";
+}
+
+.icon-tuiguanglishitupianjinqun:before {
+  content: "\e613";
+}
+
+.icon-gongsi:before {
+  content: "\e62e";
+}
+
+.icon-dianli:before {
+  content: "\e649";
+}
+
+.icon-dianlihangye:before {
+  content: "\e791";
+}
+
+.icon-shexiangtoulixian:before {
+  content: "\e7b2";
+}
+
+.icon-video-camera:before {
+  content: "\e962";
+}
+
+.icon-shexiangtou-lixian:before {
+  content: "\ef1c";
+}
+
+.icon-shexiangtou-zaixian:before {
+  content: "\ef1d";
+}
+
+.icon-shudianxianlu_2722010801:before {
+  content: "\efed";
+}
+
+.icon-tupian_normal:before {
+  content: "\e681";
+}
+

src/assets/fonts/iconfont.css

@@ -1,6 +1,6 @@
 @font-face {
   font-family: "iconfont"; /* Project id  */
-  src: url('iconfont.ttf?t=1690188947515') format('truetype');
+  src: url('iconfont.ttf?t=1709789909096') format('truetype');
 }
 
 .iconfont {
@@ -11,6 +11,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-1wenhe:before {
+  content: "\e653";
+}
+
 .icon-paizhao:before {
   content: "\e6ba";
 }
@@ -27,6 +31,10 @@
   content: "\e62e";
 }
 
+.icon-shudianxianlu:before {
+  content: "\e60a";
+}
+
 .icon-dianli:before {
   content: "\e649";
 }
@@ -43,6 +51,10 @@
   content: "\e962";
 }
 
+.icon-qixiang:before {
+  content: "\e67c";
+}
+
 .icon-shexiangtou-lixian:before {
   content: "\ef1c";
 }
@@ -59,3 +71,7 @@
   content: "\e681";
 }
 
+.icon-fubing:before {
+  content: "\e7ac";
+}
+

src/components/Home.vue

@@ -1,11 +1,15 @@
 <template>
   <div class="wrapper">
     <v-head></v-head>
+    <layout-tabs></layout-tabs>
+
     <div class="content-box">
       <div class="content">
-        <transition name="move" mode="out-in">
+        <!-- <transition name="move" mode="out-in"> -->
-          <router-view></router-view>
+        <keep-alive :include="caches">
-        </transition>
+          <router-view v-if="isRenderTab"></router-view>
+        </keep-alive>
+        <!-- </transition> -->
       </div>
     </div>
   </div>
@@ -13,13 +17,19 @@
 
 <script>
 import vHead from "./header.vue";
-
+import LayoutTabs from "./LayoutTabs.vue";
+import { mapState } from "vuex";
 export default {
   data() {
     return {};
   },
   components: {
     vHead,
+    LayoutTabs,
+  },
+  computed: {
+    ...mapState("cache", ["caches"]),
+    ...mapState(["isRenderTab"]),
   },
   created() {},
 };
@@ -31,7 +41,7 @@ export default {
     position: absolute;
     left: 0px;
     right: 0;
-    top: 56px;
+    top: 92px;
     bottom: 0;
     //padding-bottom: 30px;
     -webkit-transition: left 0.3s ease-in-out;

src/components/LayoutTabs.vue

@@ -0,0 +1,251 @@
+<template>
+  <div class="layout-tabs">
+    <el-tabs
+      type="border-card"
+      v-model="curTabKey"
+      closable
+      @tab-click="clickTab"
+      @tab-remove="removeTab"
+    >
+      <el-tab-pane
+        v-for="item in tabs"
+        :label="item.title"
+        :name="item.tabKey"
+        :key="item.tabKey"
+      >
+        <template slot="label"
+          >{{ item.title }}
+          <i
+            v-if="curTabKey === item.tabKey"
+            class="el-icon-refresh"
+            @click="refreshTab(item)"
+          ></i
+        ></template>
+      </el-tab-pane>
+    </el-tabs>
+    <div class="close-tabs" @click="closeOtherTabs">关闭其他</div>
+  </div>
+</template>
+
+<script>
+import { mapMutations, mapActions } from "vuex";
+import EventBus from "@/utils/event-bus";
+
+export default {
+  name: "LayoutTabs",
+  props: {
+    // 【根据项目修改】tab页面在路由的第几层，或者说第几层的 router-view 组件（当前项目为第二层）
+    tabRouteViewDepth: {
+      type: Number,
+      default: 2,
+    },
+    // tab页面的key值，从route对象中取，一个key值对应一个tab页面
+    // 默认为matchRoute.path值
+    getTabKey: {
+      type: Function,
+      default: function (routeMatch /* , route */) {
+        return routeMatch.path;
+      },
+    },
+    // tab页签的标题，默认从路由meta.title中获取
+    tabTitleKey: {
+      type: String,
+      default: "title",
+    },
+  },
+  data() {
+    return {
+      tabs: [],
+      curTabKey: "",
+    };
+  },
+  methods: {
+    ...mapActions("cache", ["addCache", "removeCache", "removeCacheEntry"]),
+    ...mapMutations(["setIsRenderTab"]),
+    // 切换tab
+    changeCurTab() {
+      // 当前路由信息
+      const { path, query, params, hash, matched } = this.$route;
+      // tab标签页路由信息：meta、componentName
+      const routeMatch = matched[this.tabRouteViewDepth - 1];
+      const meta = routeMatch.meta;
+      const componentName = routeMatch.components?.default?.name;
+      // 获取tab标签页信息：tabKey标签页key值；title-标签页标题；tab-存在的标签页
+      const tabKey = this.getTabKey(routeMatch, this.$route);
+      const title = String(meta[this.tabTitleKey] || "");
+      const tab = this.tabs.find((tab) => tab.tabKey === tabKey);
+
+      if (!tabKey) {
+        // tabKey默认为路由的name值
+        console.warn(
+          `LayoutTabs组件：${path} 路由没有匹配的tab标签页，如有需要请配置tab标签页的key值`
+        );
+        return;
+      }
+
+      // 同一个路由，但是新旧路径不同时，需要清除路由缓存。例如route.path配置为 '/detail/:id'时路径会不同
+      // 这里判断 props.tabRouteViewDepth === matched.length 必须是跟tab同级路由，否则会影响多级路由缓存
+      if (
+        tab &&
+        tab.path !== path &&
+        this.tabRouteViewDepth === matched.length
+      ) {
+        this.removeCacheEntry(componentName || "");
+        tab.title = "";
+      }
+
+      const newTab = {
+        tabKey,
+        title: tab?.title || title,
+        path,
+        params,
+        query,
+        hash,
+        componentName,
+      };
+      tab ? Object.assign(tab, newTab) : this.tabs.push(newTab);
+      this.curTabKey = tabKey;
+    },
+    // 点击tab
+    clickTab(pane) {
+      if (!pane.index) return;
+
+      const tab = this.tabs[Number(pane.index)];
+      if (tab.path !== this.$route.path) {
+        this.gotoTab(tab);
+      }
+    },
+    // 移除tab
+    async removeTab(tabKey) {
+      // 剩下一个时不能删
+      if (this.tabs.length === 1) return;
+
+      const index = this.tabs.findIndex((tab) => tab.tabKey === tabKey);
+      if (index < -1) return;
+
+      const tab = this.tabs[index];
+      this.tabs.splice(index, 1);
+
+      // 如果删除的是当前tab，则切换到最后一个tab
+      if (tab.tabKey === this.curTabKey) {
+        const lastTab = this.tabs[this.tabs.length - 1];
+        lastTab && this.gotoTab(lastTab);
+      }
+      this.removeCache(tab.componentName || "");
+    },
+    // 跳转tab页面
+    async gotoTab(tab) {
+      await this.$router.push({
+        path: tab.path,
+        query: tab.query,
+        hash: tab.hash,
+      });
+    },
+    // 关闭非当前页的所有tab页签
+    closeOtherTabs() {
+      this.tabs
+        .filter((tab) => tab.tabKey !== this.curTabKey)
+        .forEach((tab) => {
+          this.removeCache(tab.componentName || "");
+        });
+      this.tabs = this.tabs.filter((tab) => tab.tabKey === this.curTabKey);
+    },
+    // 刷新当前tab页面
+    async refreshTab(tab) {
+      this.setIsRenderTab(false);
+      await this.removeCacheEntry(tab.componentName);
+      this.setIsRenderTab(true);
+    },
+    // 关闭tab页面，默认关闭当前页
+    async closeLayoutTab(tabKey = this.curTabKey) {
+      const index = this.tabs.findIndex((tab) => tab.tabKey === tabKey);
+      if (index > -1) {
+        this.removeCache(this.tabs[index].componentName);
+        this.tabs.splice(index, 1);
+      }
+    },
+    // 设置当前tab的标题
+    setCurTabTitle(title) {
+      const curTab = this.tabs.find((tab) => tab.tabKey === this.curTabKey);
+      if (curTab) {
+        curTab.title = title;
+      }
+    },
+  },
+  watch: {
+    "$route.path": {
+      handler() {
+        this.changeCurTab();
+      },
+      immediate: true,
+    },
+  },
+  created() {
+    // 对外提供的事件：关闭弹窗；设置tab标题
+    EventBus.$on("LayoutTabs:closeTab", (tabKey) => {
+      this.closeLayoutTab(tabKey);
+    });
+    EventBus.$on("LayoutTabs:setTabTitle", (title) => {
+      this.setCurTabTitle(title);
+    });
+  },
+};
+</script>
+
+<style lang="less">
+.layout-tabs {
+  position: relative;
+  height: 32px;
+  line-height: 32px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #f5f7fa;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
+  //background-color: #fcc;
+  .close-tabs {
+    padding-right: 12px;
+    cursor: pointer;
+    color: #999;
+    height: 32px;
+    line-height: 32px;
+    font-size: 12px;
+    &:hover {
+      color: #169e8c;
+    }
+  }
+  .el-tabs--border-card {
+    height: 30px;
+    flex: 1;
+    margin-right: 12px;
+    border: 1px solid #dcdfe6;
+    box-shadow: none;
+  }
+  .el-icon-refresh {
+    margin: 0px 8px 0px 4px;
+  }
+  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
+    color: #fff;
+    background-color: #169e8c;
+  }
+  .el-tabs--border-card
+    > .el-tabs__header
+    .el-tabs__item:not(.is-disabled):hover {
+    color: #fff;
+    background-color: #169e8c;
+  }
+  .el-tabs__item .el-icon-close {
+    transition: none;
+  }
+
+  .el-tabs__item {
+    height: 30px;
+    line-height: 30px;
+    font-size: 12px;
+    padding: 0 10px !important;
+  }
+  .el-tabs__content {
+    display: none;
+  }
+}
+</style>

src/components/Sidebar.vue

@@ -63,7 +63,6 @@ export default {
           index: "/realTimeMonitor",
           title: "实时监控",
         },
-
         {
           icon: "el-icon-film",
           index: "/pictureRotation",
@@ -74,12 +73,26 @@ export default {
           index: "/photoAlarm",
           title: "告警处理",
         },
-
         {
           icon: "el-icon-search",
           index: "/realTimeSearch",
           title: "历史图片",
         },
+        // {
+        //   icon: "iconfont icon-fubing",
+        //   index: "/weatherIce",
+        //   title: "气象覆冰",
+        //   subs: [
+        //     {
+        //       index: "/weather",
+        //       title: "气象监测",
+        //     },
+        //     {
+        //       index: "/icing",
+        //       title: "覆冰监测",
+        //     },
+        //   ],
+        // },
         {
           icon: "el-icon-files",
           index: "/property",
@@ -106,23 +119,6 @@ export default {
               index: "/devicePhotoSchedule",
               title: "拍照时间表设置",
             },
-            {
-              index: "/deviceReport",
-              title: "装置报表",
-            },
-            {
-              index: "/waterMark",
-              title: "水印下发",
-            },
-            // {
-            //   index: "/deviceUpgrade",
-            //   title: "装置升级",
-            // },
-            // {
-            //   icon: "el-icon-picture-outline",
-            //   index: "imageSettings",
-            //   title: "图像采集参数设置",
-            // },
           ],
         },
         {
@@ -135,162 +131,34 @@ export default {
               title: "用户管理",
             },
             {
-              index: "/globalTools",
+              index: "/roleManagement",
-              title: "全局设置",
+              title: "角色管理",
-            },
-          ],
-        },
-      ],
-      items1: [
-        {
-          icon: "el-icon-s-home",
-          index: "stritl",
-          title: "首页",
-        },
-        {
-          icon: "el-icon-camera",
-          index: "/realTimeMonitor",
-          title: "实时监控",
-        },
-
-        {
-          icon: "el-icon-film",
-          index: "/pictureRotation",
-          title: "图片轮巡",
-        },
-        {
-          icon: "el-icon-bell",
-          index: "/photoAlarm",
-          title: "告警处理",
-        },
-
-        {
-          icon: "el-icon-search",
-          index: "/realTimeSearch",
-          title: "历史图片",
-        },
-        {
-          icon: "el-icon-files",
-          index: "/property",
-          title: "资产管理",
-          subs: [
-            {
-              index: "/lineInformation",
-              title: "线路信息管理",
-            },
-            {
-              index: "/towerInformation",
-              title: "杆塔信息管理",
-            },
-
-            {
-              index: "/cameraChannel",
-              title: "通道管理",
-            },
-            {
-              index: "/photographicDevice",
-              title: "拍照装置管理",
-            },
-            {
-              index: "/devicePhotoSchedule",
-              title: "拍照时间表设置",
-            },
-            // {
-            //   index: "/deviceUpgrade",
-            //   title: "装置升级",
-            // },
-            // {
-            //   icon: "el-icon-picture-outline",
-            //   index: "imageSettings",
-            //   title: "图像采集参数设置",
-            // },
-          ],
-        },
-        {
-          icon: "el-icon-monitor",
-          index: "/system",
-          title: "系统管理",
-          subs: [
-            {
-              index: "/userManagement",
-              title: "用户管理",
             },
             // {
-            //   index: "/globalTools",
+            //   index: "/menuManagement",
-            //   title: "全局设置",
+            //   title: "菜单功能管理",
             // },
-          ],
-        },
-      ],
-      items2: [
-        {
-          icon: "el-icon-s-home",
-          index: "stritl",
-          title: "首页",
-        },
-        {
-          icon: "el-icon-camera",
-          index: "/realTimeMonitor",
-          title: "实时监控",
-        },
-
-        {
-          icon: "el-icon-film",
-          index: "/pictureRotation",
-          title: "图片轮巡",
-        },
-        {
-          icon: "el-icon-bell",
-          index: "photoAlarm",
-          title: "告警处理",
-        },
-        {
-          icon: "el-icon-search",
-          index: "/realTimeSearch",
-          title: "历史图片",
-        },
-        {
-          icon: "el-icon-files",
-          index: "/property",
-          title: "资产管理",
-          subs: [
             {
-              index: "/lineInformation",
+              index: "/deviceUpgrade",
-              title: "线路信息管理",
+              title: "升级管理",
-            },
-            {
-              index: "/towerInformation",
-              title: "杆塔信息管理",
             },
 
-            // {
-            //   index: "/cameraChannel",
-            //   title: "通道管理",
-            // },
             {
-              index: "/photographicDevice",
+              index: "/globalTools",
-              title: "拍照装置管理",
+              title: "全局设置",
             },
             {
-              index: "/devicePhotoSchedule",
+              index: "/waterMark",
-              title: "拍照时间表设置",
+              title: "水印下发",
             },
-            // {
-            //   index: "/deviceUpgrade",
-            //   title: "装置升级",
-            // },
-            // {
-            //   icon: "el-icon-picture-outline",
-            //   index: "imageSettings",
-            //   title: "图像采集参数设置",
-            // },
           ],
         },
       ],
-
       role: "",
+      menuList: [],
     };
   },
+
   watch: {
     $route() {
       this.setCurrentRoute();
@@ -298,24 +166,113 @@ export default {
   },
   methods: {
     setCurrentRoute() {
-      this.activeIndex = this.$route.path; // 通过他就可以监听到当前路由状态并激活当前菜单
+      console.log(this.$route.path);
+      this.$nextTick(() => {
+        this.activeIndex = this.$route.path; // 通过他就可以监听到当前路由状态并激活当前菜单
+        console.log(this.activeIndex);
+      });
+    },
+
+    getMenuArr(originalArray) {
+      const icons = {
+        stritl: "el-icon-s-home",
+        realTimeMonitor: "el-icon-camera",
+        pictureRotation: "el-icon-film",
+        photoAlarm: "el-icon-bell",
+        realTimeSearch: "el-icon-search",
+        // ... 其他图标
+        default: "el-icon-default", // 默认图标
+      };
+      const assetManagementSubs = []; // 用于存储资产管理子菜单的对象
+      const systemManagementSubs = []; // 用于存储系统管理子菜单的对象
+      const newArray = [];
+
+      // 遍历原始数组，根据条件构建新数组
+      originalArray.forEach((item) => {
+        const { id, key, desc } = item;
+        console.log(key, desc);
+        const index = key.startsWith("/") ? key.substring(1) : key; // 移除开头的斜杠
+        // 移除desc中"-"后面的内容
+        const processedDesc = desc.split("-")[0].trim();
+        console.log(index, processedDesc);
+        const icon = icons[index] || icons["default"]; // 获取图标，如果未找到则使用默认图标
+
+        if (
+          [
+            "lineInformation",
+            "towerInformation",
+            "cameraChannel",
+            "photographicDevice",
+            "devicePhotoSchedule",
+          ].includes(index)
+        ) {
+          // 如果包含杆塔或线路信息，则添加到资产管理子菜单
+          assetManagementSubs.push({
+            index: "/" + index,
+            title: processedDesc,
+          });
+        } else if (
+          [
+            "userManagement",
+            "roleManagement",
+            "menuManagement",
+            "deviceUpgrade",
+            "globalTools",
+            "waterMark",
+          ].includes(index)
+        ) {
+          // 如果包含用户列表等，则添加到系统管理子菜单
+          systemManagementSubs.push({
+            index: "/" + index,
+            title: processedDesc,
+          });
+        } else {
+          // 其他菜单项直接添加到新数组中
+          newArray.push({ icon, index: "/" + index, title: processedDesc });
+        }
+      });
+
+      // 如果存在资产管理子菜单项，则添加资产管理菜单
+      if (assetManagementSubs.length > 0) {
+        newArray.push({
+          icon: "el-icon-files",
+          index: "property",
+          title: "资产管理",
+          subs: assetManagementSubs,
+        });
+      }
+
+      // 如果存在系统管理子菜单项，则添加系统管理菜单
+      if (systemManagementSubs.length > 0) {
+        newArray.push({
+          icon: "el-icon-setting", // 假设的系统管理图标
+          index: "system",
+          title: "系统管理",
+          subs: systemManagementSubs,
+        });
+      }
+      console.log("我是最后的", newArray);
+
+      //return newArray;
+      this.items = newArray;
     },
   },
   created() {
+    console.log("我是被选中的", this.activeIndex);
     this.setCurrentRoute();
     this.role = localStorage.getItem("role");
     console.log("用户管理");
     console.log(this.role);
-
+    if (this.role !== "0") {
-    if (this.role == 0) {
+      this.menuList = JSON.parse(localStorage.getItem("menuPermission"));
+      console.log(this.menuList);
+      this.menuList.push({ id: 8, key: "/stritl", desc: "首页-菜单" });
+      this.menuList = this.menuList.sort((a, b) => a.id - b.id);
+      this.getMenuArr(this.menuList);
+    } else {
+      console.log("我是超管");
       this.items = this.items;
-    } else if (this.role == 1) {
-      this.items = this.items1;
-    } else if (this.role == 2) {
-      this.items = this.items2;
     }
-
-    console.log(this.items);
   },
 };
 </script>
@@ -335,6 +292,9 @@ export default {
     }
     .el-submenu__title {
       padding: 0 10px;
+      .iconfont {
+        margin-right: 5px;
+      }
     }
     .el-dropdown-menu__item,
     .el-menu-item,
@@ -411,5 +371,12 @@ export default {
     border: 1px solid #169e8c;
     background-color: #169e8c;
   }
+  .el-menu-item [class^="iconfont"] {
+    margin-right: 5px;
+    width: 24px;
+    text-align: center;
+    font-size: 18px;
+    vertical-align: middle;
+  }
 }
 </style>

src/components/header.vue

@@ -41,6 +41,7 @@ export default {
   data() {
     return {
       userName: localStorage.getItem("userName"),
+      role: localStorage.getItem("role"),
     };
   },
   methods: {

src/components/passwordDialog.vue

@@ -6,9 +6,19 @@
     :close-on-click-modal="false"
     width="420px"
   >
-    <el-form :model="psdForm" :rules="rules" ref="formInfo" label-position="left" label-width="80px">
+    <el-form
+      :model="psdForm"
+      :rules="rules"
+      ref="formInfo"
+      label-position="left"
+      label-width="80px"
+    >
       <el-form-item label="用户名:">
-        <el-input v-model="psdForm.userName" autocomplete="off" :disabled="true"></el-input>
+        <el-input
+          v-model="psdForm.userName"
+          autocomplete="off"
+          :disabled="true"
+        ></el-input>
       </el-form-item>
       <!-- <el-form-item label="原密码:">
         <el-input v-model="psdForm.originalPsd" autocomplete="off"></el-input>
@@ -31,9 +41,9 @@ import { updateUserApi } from "@/utils/api/index";
 export default {
   data() {
     return {
-      isShow:false,
+      isShow: false,
       psdForm: {
-        userName: localStorage.getItem('userName'),
+        userName: localStorage.getItem("userName"),
         originalPsd: "",
         newPsd: "",
         password: "",
@@ -54,12 +64,12 @@ export default {
     submitForm() {
       this.$refs.formInfo.validate((valid) => {
         if (valid) {
-          this.$set(this.psdForm,'userId',localStorage.getItem('userid'))
+          this.$set(this.psdForm, "uid", localStorage.getItem("uid"));
           updateUserApi(this.psdForm)
             .then((res) => {
               if (res.code == 200) {
                 this.$message.success("修改成功,请重新登录");
-                this.isShow = false
+                this.isShow = false;
                 this.$store.commit("REMOVE_INFO");
                 this.$router.push("/login");
               } else {

src/echartsDemo.vue

@@ -0,0 +1,452 @@
+<template>
+  <div class="echartsBox">
+    <div class="gropName">
+      <el-checkbox-group v-model="checkList">
+        <el-checkbox
+          v-for="item in qtOption"
+          :label="item.groupName"
+          :key="item.groupName"
+          ><span v-if="item.groupName == 'H2'">{{ item.groupName }}(氢气)</span>
+          <span v-if="item.groupName == 'CO'"
+            >{{ item.groupName }}(一氧化碳)</span
+          >
+          <span v-if="item.groupName == 'CH4'">{{ item.groupName }}(甲烷)</span>
+          <span v-if="item.groupName == 'C2H4'"
+            >{{ item.groupName }}(乙烯)</span
+          >
+          <span v-if="item.groupName == 'C2H6'"
+            >{{ item.groupName }}(乙烷)</span
+          >
+          <span v-if="item.groupName == 'C2H2'"
+            >{{ item.groupName }}(乙炔)</span
+          ></el-checkbox
+        >
+      </el-checkbox-group>
+    </div>
+    <div id="demo1"></div>
+    <div id="demo2"></div>
+    <div id="demo3"></div>
+  </div>
+</template>
+<script>
+import axios from "axios";
+export default {
+  name: "",
+  data() {
+    return {
+      checkList: [], //选中勾选框
+      qtOption: [], //气体数据
+      myChart: "",
+      xData1: [], //横坐标
+      lineData1: [], //纵坐标
+      yMax1: "", //y轴最大值
+      channelCrests1: [], //气体数组
+      dataPointer1: [], //气体点
+
+      xData2: [], //横坐标
+      lineData2: [], //纵坐标
+      yMax2: "", //y轴最大值
+      channelCrests2: [], //气体数组
+      dataPointer2: [], //气体点
+
+      xData3: [], //横坐标
+      lineData3: [], //纵坐标
+      yMax3: "", //y轴最大值
+      channelCrests3: [], //气体数组
+      dataPointer3: [], //气体点
+    };
+  },
+  created() {
+    this.getMenuData1();
+    this.getMenuData2();
+    this.getMenuData3();
+  },
+  mounted() {},
+  watch: {},
+  methods: {
+    //图表1
+    getMenuData1() {
+      axios
+        .get("/aa.json")
+        .then((res) => {
+          console.log("getMenuData", res);
+          // this.qtOption = res.data.config.channels[0].crests;//气体
+          // console.log(this.qtOption);
+          this.lineData1 = res.data.data[0]; //纵坐标数据
+          this.yMax1 = res.data.config.yMax; //y轴最大值
+
+          this.channelCrests1 = res.data.config.channels[0].crests;
+
+          var timeSpan = 1; //时间间隔
+          for (
+            var i = 0;
+            i < res.data.config.numberOfData * timeSpan;
+            i = i + timeSpan
+          ) {
+            this.xData1.push(i);
+          }
+          for (var i = 0; i < this.channelCrests1.length; i++) {
+            this.dataPointer1.push({
+              name: this.channelCrests1[i].groupName,
+              label: this.channelCrests1[i].crestNo + "",
+              xAxis: this.channelCrests1[i].crestTime,
+              yAxis: this.lineData1[this.channelCrests1[i].crestTime],
+            });
+          }
+          console.log(this.dataPointer1);
+
+          //横坐标数据
+          this.getEchart1();
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    //图表2
+    getMenuData2() {
+      axios
+        .get("/bb.json")
+        .then((res) => {
+          this.lineData2 = res.data.data[0]; //纵坐标数据
+          this.yMax2 = res.data.config.yMax; //y轴最大值
+
+          this.channelCrests2 = res.data.config.channels[0].crests;
+          var timeSpan = 1; //时间间隔
+          for (
+            var i = 0;
+            i < res.data.config.numberOfData * timeSpan;
+            i = i + timeSpan
+          ) {
+            this.xData2.push(i);
+          }
+          for (var i = 0; i < this.channelCrests2.length; i++) {
+            this.dataPointer2.push({
+              name: this.channelCrests2[i].groupName,
+              label: this.channelCrests2[i].crestNo + "",
+              xAxis: this.channelCrests2[i].crestTime,
+              yAxis: this.lineData2[this.channelCrests2[i].crestTime],
+            });
+          }
+          console.log(this.dataPointer2);
+
+          //横坐标数据
+          //横坐标数据
+          this.getEchart2();
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    //图表3
+    getMenuData3() {
+      axios
+        .get("/cc.json")
+        .then((res) => {
+          this.lineData3 = res.data.data[0]; //纵坐标数据
+          this.yMax3 = res.data.config.yMax; //y轴最大值
+          this.channelCrests3 = res.data.config.channels[0].crests;
+          var timeSpan = 1; //时间间隔
+          for (
+            var i = 0;
+            i < res.data.config.numberOfData * timeSpan;
+            i = i + timeSpan
+          ) {
+            this.xData3.push(i);
+          }
+          console.log(this.lineData3);
+          for (var i = 0; i < this.channelCrests3.length; i++) {
+            this.dataPointer3.push({
+              name: this.channelCrests3[i].groupName,
+              label: this.channelCrests3[i].crestNo + "",
+              xAxis: this.channelCrests3[i].crestTime,
+              yAxis: this.lineData3[this.channelCrests3[i].crestTime],
+            });
+          }
+          console.log(this.dataPointer3);
+
+          //横坐标数据
+          this.getEchart3();
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    //装置数量统计
+    getEchart1() {
+      this.$nextTick(() => {
+        let that = this;
+        that.myChart = this.$echarts.init(document.getElementById("demo1"));
+        let option = {
+          title: {
+            text: "图谱1",
+            left: "left",
+          },
+          tooltip: {
+            trigger: "axis",
+            axisPointer: {
+              animation: false,
+            },
+          },
+          dataZoom: [
+            {
+              type: "inside",
+              start: 0,
+              end: 100,
+            },
+            {
+              start: 0,
+              end: 100,
+            },
+          ],
+          xAxis: {
+            type: "category",
+            data: this.xData1, // 把时间组成的数组接过来，放在x轴上
+            boundaryGap: false,
+            showMaxLabel: true,
+            name: "单位:s", // 这个设置只在末尾添加单位
+          },
+
+          yAxis: {
+            type: "value",
+            scale: true,
+            name: "单位:mV", //  你的单位写在这就可以
+
+            nameTextStyle: {
+              //  单位样式
+              color: "#000", //  字体颜色
+              fontSize: 10, //  字体大小
+              padding: [0, 28, 4, 0], //  内填充
+            },
+          },
+          series: [
+            {
+              data: this.lineData1,
+              type: "line",
+              smooth: true,
+              symbol: "none",
+              sampling: "lttb",
+              itemStyle: {
+                color: "rgb(255, 70, 131)",
+              },
+              markPoint: {
+                data: this.dataPointer1,
+                symbol: "pin",
+                symbolSize: 18,
+                itemStyle: {
+                  normal: {
+                    label: {
+                      show: true,
+                      position: "top",
+                      distance: 0,
+                      formatter: function (params) {
+                        console.log(params);
+                        return params.data.label + ":" + params.name;
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          ],
+        };
+        that.myChart.setOption(option);
+        window.addEventListener("resize", () => {
+          that.myChart.resize();
+        });
+      });
+    },
+    getEchart2() {
+      this.$nextTick(() => {
+        let that = this;
+        that.myChart = this.$echarts.init(document.getElementById("demo2"));
+        let option = {
+          title: {
+            text: "图谱2",
+            left: "left",
+          },
+          tooltip: {
+            trigger: "axis",
+            axisPointer: {
+              animation: false,
+            },
+          },
+          dataZoom: [
+            {
+              type: "inside",
+              start: 0,
+              end: 100,
+            },
+            {
+              start: 0,
+              end: 100,
+            },
+          ],
+          xAxis: {
+            type: "category",
+            data: this.xData2, // 把时间组成的数组接过来，放在x轴上
+            boundaryGap: false,
+            showMaxLabel: true,
+            name: "单位:s", // 这个设置只在末尾添加单位
+          },
+
+          yAxis: {
+            type: "value",
+            scale: true,
+            name: "单位:mV", //  你的单位写在这就可以
+
+            nameTextStyle: {
+              //  单位样式
+              color: "#000", //  字体颜色
+              fontSize: 10, //  字体大小
+              padding: [0, 28, 4, 0], //  内填充
+            },
+          },
+          series: [
+            {
+              data: this.lineData2,
+              type: "line",
+              smooth: true,
+              symbol: "none",
+              sampling: "lttb",
+              itemStyle: {
+                color: "rgb(255, 70, 131)",
+              },
+              markPoint: {
+                data: this.dataPointer2,
+                symbol: "pin",
+                symbolSize: 18,
+                itemStyle: {
+                  normal: {
+                    label: {
+                      show: true,
+                      position: "top",
+                      distance: 0,
+                      formatter: function (params) {
+                        console.log(params);
+                        return params.data.label + ":" + params.name;
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          ],
+        };
+        that.myChart.setOption(option);
+        window.addEventListener("resize", () => {
+          that.myChart.resize();
+        });
+      });
+    },
+    getEchart3() {
+      this.$nextTick(() => {
+        let that = this;
+        that.myChart = this.$echarts.init(document.getElementById("demo3"));
+        let option = {
+          title: {
+            text: "图谱3",
+            left: "left",
+          },
+          tooltip: {
+            trigger: "axis",
+            axisPointer: {
+              animation: false,
+            },
+          },
+          dataZoom: [
+            {
+              type: "inside",
+              start: 0,
+              end: 100,
+            },
+            {
+              start: 0,
+              end: 100,
+            },
+          ],
+          xAxis: {
+            type: "category",
+            data: this.xData3, // 把时间组成的数组接过来，放在x轴上
+            boundaryGap: false,
+            showMaxLabel: true,
+            name: "单位:s", // 这个设置只在末尾添加单位
+          },
+
+          yAxis: {
+            type: "value",
+            scale: true,
+            show: true, //   前提：  y轴肯定是要显示的
+            name: "单位:mV", //  你的单位写在这就可以
+
+            nameTextStyle: {
+              //  单位样式
+              color: "#000", //  字体颜色
+              fontSize: 10, //  字体大小
+              padding: [0, 28, 4, 0], //  内填充
+            },
+          },
+          series: [
+            {
+              data: this.lineData3,
+              type: "line",
+              smooth: true,
+              symbol: "none",
+              sampling: "lttb",
+              itemStyle: {
+                color: "rgb(255, 70, 131)",
+              },
+              markPoint: {
+                data: this.dataPointer3,
+                symbol: "pin",
+                symbolSize: 18,
+                itemStyle: {
+                  normal: {
+                    label: {
+                      show: true,
+                      position: "top",
+                      distance: 0,
+                      formatter: function (params) {
+                        console.log(params);
+                        return params.data.label + ":" + params.name;
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          ],
+        };
+        that.myChart.setOption(option);
+        window.addEventListener("resize", () => {
+          that.myChart.resize();
+        });
+      });
+    },
+  },
+};
+</script>
+<style lang="less">
+.echartsBox {
+  height: calc(100% - 32px);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  // justify-content: space-around;
+  #demo1,
+  #demo2,
+  #demo3 {
+    height: 400px;
+    width: 80%;
+  }
+  .gropName {
+    .el-checkbox-group {
+      display: flex;
+      flex-direction: column;
+      .el-checkbox {
+        height: 40px;
+        line-height: 40px;
+      }
+    }
+  }
+}
+</style>

src/main.js

@@ -54,17 +54,42 @@ Vue.directive("noMoreClick", {
 //使用钩子函数对路由进行权限跳转
 router.beforeEach((to, from, next) => {
   document.title = `${to.meta.title} | 视频监控可视化平台`;
+
+  // 获取用户的角色和token
   const role = localStorage.getItem("role");
   const token = localStorage.getItem("token");
-  console.log(role, token);
+
+  // 如果没有token，并且不是登录页面，重定向到登录页面
   if (!token && to.path !== "/login") {
-    //next("/login");
+    return next({ path: "/login" });
-    next({
+  }
-      path: "/login",
+  // 如果用户是超级管理员（role == 0），则允许访问任何页面
-    });
+  if (role === "0") {
-  } else {
+    return next();
-    next();
+  }
+  // 如果用户从登录页面跳转到其他页面，并且已经拥有token，则允许通过
+  if (from.path === "/login" && token) {
+    return next();
+  }
+  // 获取权限列表（这里假设permissions是从后端获取的权限数组）
+  const permissions = JSON.parse(localStorage.getItem("menuPermission")) || [];
+
+  // 检查用户是否有访问当前路由的权限
+  const hasPermission = permissions.some(
+    (permission) => permission.key === to.path
+  );
+
+  // 如果路由需要权限，但用户没有权限，则重定向到无权限页面
+  if (to.meta.requiresAuth && !hasPermission) {
+    return next({ path: "/permission" });
+  }
+
+  // 如果路由在免登录白名单中，则直接通过
+  if (to.meta.noAuth) {
+    return next();
   }
+  // 如果以上条件都不满足，正常通过
+  next();
 });
 new Vue({
   router,

src/router/index.js

@@ -4,135 +4,234 @@ import VueRouter from "vue-router";
 Vue.use(VueRouter);
 
 const routes = [
-  { path: "/", redirect: "/login" },
   {
-    path: "/stritl",
+    path: "/",
+    redirect: "/stritl",
     component: () => import("../components/Home.vue"),
-    meta: { title: "首页" },
     children: [
       {
         path: "/stritl",
-        component: () =>
+        component: () => import("../views/homePage/index.vue"),
-          import(
+        name: "stritl",
-            /* webpackChunkName: "dashboard" */ "../views/homePage/index.vue"
-          ),
         meta: {
           title: "首页",
           icon: "el-icon-s-home",
+          keepAlive: true,
+          noAuth: true,
         },
       },
       {
         path: "/realTimeMonitor",
-        component: () =>
+        component: () => import("../views/realTimeMonitor/index.vue"),
-          import(
+        name: "realTimeMonitor",
-            /* webpackChunkName: "home" */ "../views/realTimeMonitor/index.vue"
-          ),
         meta: {
           title: "实时监控",
           permission: true,
           icon: "el-icon-camera",
+          keepAlive: true,
+          requiresAuth: true,
         },
       },
       {
         path: "/pictureRotation",
-        component: () =>
+        component: () => import("../views/pictureRotation/index.vue"),
-          import(
+        name: "pictureRotation",
-            /* webpackChunkName: "home" */ "../views/pictureRotation/index.vue"
-          ),
         meta: {
           title: "图片轮巡",
           permission: true,
           icon: "el-icon-camera",
+          keepAlive: true,
+          requiresAuth: true,
         },
       },
       {
         path: "/realTimeSearch",
-        component: () =>
+
-          import(
+        component: () => import("../views/realTimeSearch/index.vue"),
-            /* webpackChunkName: "home" */ "../views/realTimeSearch/index.vue"
+        name: "realTimeSearch",
-          ),
         meta: {
           title: "历史图片",
           permission: true,
           icon: "el-icon-camera",
+          requiresAuth: true,
+          //keepAlive: true,
         },
       },
       {
         path: "/photoAlarm",
-        component: () =>
+        component: () => import("../views/alarmHandling/index.vue"),
-          import(
+        name: "alarmHandling",
-            /* webpackChunkName: "home" */ "../views/alarmHandling/index.vue"
-          ),
         meta: {
           title: "告警处理",
           permission: true,
           icon: "el-icon-camera",
+          keepAlive: true,
+          requiresAuth: true,
         },
       },
 
       {
         path: "/userManagement",
-        component: () =>
+        component: () => import("../views/system/user/userManagement.vue"),
-          import(
+        name: "userManagement",
-            /* webpackChunkName: "tabs" */ "../views/system/userManagement.vue"
+        meta: {
-          ),
+          title: "用户管理",
-        meta: { title: "用户管理", icon: "el-icon-monitor" },
+          icon: "el-icon-monitor",
+          keepAlive: true,
+          requiresAuth: true,
+        },
+      },
+      {
+        path: "/roleManagement",
+        component: () => import("../views/system/roleManagement/index.vue"),
+        name: "roleManagement",
+        meta: {
+          title: "角色管理",
+          icon: "el-icon-monitor",
+          keepAlive: true,
+          requiresAuth: true,
+        },
+      },
+      {
+        path: "/menuManagement",
+        component: () => import("../views/system/menuManagement/index.vue"),
+        name: "menuManagement",
+        meta: {
+          title: "菜单功能管理",
+          icon: "el-icon-monitor",
+          keepAlive: true,
+          requiresAuth: true,
+        },
+      },
+
+      {
+        path: "/deviceUpgrade",
+        component: () => import("../views/system/deviceUpgrade/index.vue"),
+        name: "deviceUpgrade",
+        meta: {
+          title: "升级管理",
+          icon: "el-icon-monitor",
+          keepAlive: true,
+          requiresAuth: true,
+        },
       },
       {
         path: "/globalTools",
-        component: () =>
+        component: () => import("../views/system/globalTools/index.vue"),
-          import(
+        name: "globalTools",
-            /* webpackChunkName: "tabs" */ "../views/system/globalTools/index.vue"
+        meta: { title: "全局设置", keepAlive: true, requiresAuth: true },
-          ),
-        meta: { title: "全局设置" },
       },
       {
         path: "/lineInformation",
-        component: () =>
+        component: () => import("../views/lineInformation/index.vue"),
-          import(
+        name: "lineInformation",
-            /* webpackChunkName: "tabs" */ "../views/lineInformation/index.vue"
+        meta: {
-          ),
+          title: "线路信息管理",
-        meta: { title: "线路信息管理", icon: "" },
+          icon: "",
+          keepAlive: true,
+          requiresAuth: true,
+        },
       },
       {
         path: "/towerInformation",
-        component: () =>
+        component: () => import("../views/towerInformation/index.vue"),
-          import(
+        name: "towerInformation",
-            /* webpackChunkName: "tabs" */ "../views/towerInformation/index.vue"
+        meta: {
-          ),
+          title: "杆塔信息管理",
-        meta: { title: "杆塔信息管理", icon: "" },
+          icon: "",
+          keepAlive: true,
+          requiresAuth: true,
+        },
       },
       {
         path: "/cameraChannel",
-        component: () =>
+        component: () => import("../views/cameraChannel/index.vue"),
-          import(
+        name: "cameraChannel",
-            /* webpackChunkName: "tabs" */ "../views/cameraChannel/index.vue"
+        meta: {
-          ),
+          title: "通道管理",
-        meta: { title: "通道管理", icon: "" },
+          icon: "",
+          keepAlive: true,
+          requiresAuth: true,
+        },
       },
       {
         path: "/photographicDevice",
-        component: () =>
+        component: () => import("../views/photographicDevice/index.vue"),
-          import(
+        name: "photographicDevice",
-            /* webpackChunkName: "tabs" */ "../views/photographicDevice/index.vue"
+        meta: {
-          ),
+          title: "拍照装置管理",
-        meta: { title: "拍照装置管理", icon: "" },
+          icon: "",
+          keepAlive: true,
+          requiresAuth: true,
+        },
       },
       {
         path: "/devicePhotoSchedule",
-        component: () =>
+        component: () => import("../views/devicePhotoSchedule/index.vue"),
-          import(
+        name: "devicePhotoSchedule",
-            /* webpackChunkName: "tabs" */ "../views/devicePhotoSchedule/index.vue"
+        meta: {
-          ),
+          title: "拍照时间表设置",
-        meta: { title: "拍照时间表设置", icon: "" },
+          icon: "",
+          keepAlive: true,
+          requiresAuth: true,
+        },
+      },
+      {
+        path: "/waterMark",
+        component: () => import("../views/waterMark/index.vue"),
+        name: "waterMark",
+        meta: {
+          title: "水印下发",
+          icon: "",
+          keepAlive: true,
+          requiresAuth: true,
+        },
+      },
+      {
+        path: "/echarts",
+        component: () => import("../echartsDemo.vue"),
+        name: "echartsDemo",
+        meta: {
+          title: "echarts图表",
+          icon: "",
+          keepAlive: true,
+          requiresAuth: true,
+        },
+      },
+
+      //气象检测
+      {
+        path: "/weather",
+        component: () => import("../views/iceWeather/weather/index.vue"),
+        name: "weather",
+        meta: {
+          title: "气象检测",
+          icon: "",
+          keepAlive: true,
+          requiresAuth: true,
+        },
+      },
+      //覆冰
+      {
+        path: "/icing",
+        component: () => import("../views/iceWeather/icing/index.vue"),
+        name: "icing",
+        meta: { title: "覆冰", icon: "", keepAlive: true, requiresAuth: true },
       },
     ],
   },
-
   {
     path: "/login",
+    name: "login",
     component: () => import("../views/login/index.vue"),
-    meta: { title: "登录" },
+    meta: { title: "登录", noAuth: true }, // 标记为免登录页面
+  },
+  {
+    // 权限页面
+    path: "/permission",
+    component: () =>
+      import(/* webpackChunkName: "permission" */ "../Permission.vue"),
+    meta: { title: "权限测试" },
   },
 ];
 

src/store/cache.js

@@ -0,0 +1,57 @@
+import Vue from "vue";
+
+export default {
+  namespaced: true,
+  state: {
+    caches: [],
+  },
+  actions: {
+    // 添加缓存的路由组件
+    addCache({ state, dispatch }, componentName) {
+      if (Array.isArray(componentName)) {
+        componentName.forEach((item) => {
+          dispatch("addCache", item);
+        });
+        return;
+      }
+
+      const { caches } = state;
+      if (!componentName || caches.includes(componentName)) return;
+
+      caches.push(componentName);
+      console.log("缓存路由组件：", componentName);
+    },
+
+    // 移除缓存的路由组件
+    removeCache({ state, dispatch }, componentName) {
+      if (Array.isArray(componentName)) {
+        componentName.forEach((item) => {
+          dispatch("removeCache", item);
+        });
+        return;
+      }
+
+      const { caches } = state;
+      const index = caches.indexOf(componentName);
+      if (index > -1) {
+        console.log("清除缓存的路由组件：", componentName);
+        return caches.splice(index, 1)[0];
+      }
+    },
+    // 移除缓存的路由组件的实例
+    async removeCacheEntry({ dispatch }, componentName) {
+      const cacheRemoved = await dispatch("removeCache", componentName);
+      if (cacheRemoved) {
+        await Vue.nextTick();
+        dispatch("addCache", componentName);
+      }
+    },
+    // 清除缓存的路由组件的实例
+    clearEntry({ state, dispatch }) {
+      const { caches } = state;
+      caches.slice().forEach((key) => {
+        dispatch("removeCacheEntry", key);
+      });
+    },
+  },
+};

src/store/index.js

@@ -1,6 +1,6 @@
 import Vue from "vue";
 import Vuex from "vuex";
-
+import cacheModule from "./cache";
 Vue.use(Vuex);
 
 export default new Vuex.Store({
@@ -8,7 +8,7 @@ export default new Vuex.Store({
     //用户登录token 存储
     token: "",
     userName: "",
-    userid: "",
+    uid: "",
     role: "",
     currentData: "",
     channelId: "",
@@ -16,11 +16,13 @@ export default new Vuex.Store({
     protocol: "",
     cmdId: "",
     channelIdList: [],
+    isRenderTab: true,
   },
   getters: {
     token: (state) => state.token,
     userName: (state) => state.userName,
     role: (state) => state.role,
+    menuPermission: (state) => state.resources,
   },
   mutations: {
     //点击获取的左侧列表
@@ -63,17 +65,32 @@ export default new Vuex.Store({
     },
     SET_USERINFO(state, val) {
       state.userName = val.userName;
-      state.userid = val.id;
+      state.uid = val.uid;
       state.role = val.role;
+      if (val.role !== 0) {
+        state.resources = val.resources;
+        const menuArr = val.resources
+          .filter((item) => item.key.includes("/"))
+          .sort((a, b) => a.id - b.id);
+        const btnArr = val.resources
+          .filter((item) => item.key.includes("Btn"))
+          .sort((a, b) => a.id - b.id);
+        localStorage.setItem("menuPermission", JSON.stringify(menuArr));
+        localStorage.setItem("btnPermission", JSON.stringify(btnArr));
+      }
+
       localStorage.setItem("userName", state.userName);
-      localStorage.setItem("userid", state.userid);
+      localStorage.setItem("uid", state.uid);
       localStorage.setItem("role", state.role);
     },
     //退出清除locastorge
     REMOVE_INFO(state) {
       localStorage.clear();
     },
+    setIsRenderTab(state, data) {
+      state.isRenderTab = data;
+    },
   },
   actions: {},
-  modules: {},
+  modules: { cache: cacheModule },
 });

src/utils/api/iceApi.js

@@ -0,0 +1,24 @@
+import request from "../request";
+//获取装置总数图表
+//获取数据接口
+export function getDataListJoggle(data) {
+  return request({
+    url: "/xapi/query.php",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+//获取相位码
+export function funccodeJoggle(data) {
+  return request({
+    url: "/xapi/funccode.php",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}

src/utils/api/index.js

@@ -2,7 +2,7 @@ import request from "../request";
 //获取登录
 export function loginJoggle(data) {
   return request({
-    url: "/api/login",
+    url: "/xymanager/login",
     method: "post",
     data,
   });
@@ -10,7 +10,7 @@ export function loginJoggle(data) {
 //获取装置总数图表
 export function getTermStatistics(data) {
   return request({
-    url: "/api/getTermStatistics",
+    url: "/xymanager/getTermStatistics",
     method: "get",
     params: data,
   });
@@ -18,7 +18,7 @@ export function getTermStatistics(data) {
 //获取一周的装置告警
 export function getWeekAlarmStatistics(data) {
   return request({
-    url: "/api/getWeekAlarmStatistics",
+    url: "/xymanager/getWeekAlarmStatistics",
     method: "get",
     params: data,
   });
@@ -26,7 +26,7 @@ export function getWeekAlarmStatistics(data) {
 //获取当天告警分类统计
 export function getTodayAlarmStatistics(data) {
   return request({
-    url: "/api/getTodayAlarmStatistics",
+    url: "/xymanager/getTodayAlarmStatistics",
     method: "get",
     params: data,
   });
@@ -34,7 +34,7 @@ export function getTodayAlarmStatistics(data) {
 //首页查看数据
 export function getOnlineTerminalList(data) {
   return request({
-    url: "/api/getOnlineTerminalList",
+    url: "/xymanager/getOnlineTerminalList",
     method: "get",
     params: data,
   });
@@ -42,7 +42,7 @@ export function getOnlineTerminalList(data) {
 //导出数据
 export function getOnlineTerminalListExcel() {
   return request({
-    url: "/api/getOnlineTerminalListExcel",
+    url: "/xymanager/getOnlineTerminalListExcel",
     method: "post",
     responseType: "blob",
   });
@@ -51,7 +51,7 @@ export function getOnlineTerminalListExcel() {
 //修改用户
 export function updateUserApi(data) {
   return request({
-    url: "/api/updateUser",
+    url: "/xymanager/updateUser",
     method: "post",
     data,
   });
@@ -61,19 +61,20 @@ export function updateUserApi(data) {
 //获取线路树状结构
 export function getdyTreeListJoggle(data) {
   return request({
-    url: "/api/getdyTreeList",
+    url: "/xymanager/getdyTreeList",
-    method: "get",
+    method: "post",
-    params: data,
+    data,
-    headers: {
+    // params: data,
-      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    // headers: {
-    },
+    //   "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    // },
   });
 }
 //获取所有杆塔下的图片列表，实时监控
 
 export function getTowerAndPhotoList(data) {
   return request({
-    url: "/api/getTowerAndPhotoList",
+    url: "/xymanager/getTowerAndPhotoList",
     method: "post",
     data,
   });
@@ -81,7 +82,7 @@ export function getTowerAndPhotoList(data) {
 //获取通道
 export function getChannelByTermidJoggle(data) {
   return request({
-    url: "/api/getChannelByTermid",
+    url: "/xymanager/getChannelByTermid",
     method: "post",
     data,
   });
@@ -90,7 +91,7 @@ export function getChannelByTermidJoggle(data) {
 //获取图片接口
 export function getTerminalPhotoListJoggle(data) {
   return request({
-    url: "/api/getTerminalPhotoList",
+    url: "/xymanager/getTerminalPhotoList",
     method: "post",
     data,
   });
@@ -98,7 +99,7 @@ export function getTerminalPhotoListJoggle(data) {
 //判断装置是否在线
 export function getTermStatus(data) {
   return request({
-    url: "/api/getTermStatus",
+    url: "/xymanager/getTermStatus",
     method: "post",
     data,
     headers: {
@@ -110,7 +111,7 @@ export function getTermStatus(data) {
 
 export function setTermCamera(data) {
   return request({
-    url: "/api/setTermCamera",
+    url: "/xymanager/setTermCamera",
     method: "post",
     data,
     // headers: {
@@ -121,7 +122,7 @@ export function setTermCamera(data) {
 //统一返回数据
 export function getTermCameraRequest(data) {
   return request({
-    url: "/api/getTermCameraRequest",
+    url: "/xymanager/getTermCameraRequest",
     method: "post",
     data,
     // headers: {
@@ -133,7 +134,7 @@ export function getTermCameraRequest(data) {
 //手动拍 获取装置状态
 export function getTakePicStatusJoggle(data) {
   return request({
-    url: "/api/getTakePicStatus",
+    url: "/xymanager/getTakePicStatus",
     method: "get",
     params: data,
   });
@@ -142,14 +143,14 @@ export function getTakePicStatusJoggle(data) {
 //手动拍照获取最新图片
 export function getTakePicPhotoStatusJoggle(data) {
   return request({
-    url: "/api/getTakePicPhotoStatus",
+    url: "/xymanager/getTakePicPhotoStatus",
     method: "get",
     params: data,
   });
 }
 export function getDeviceList(data) {
   return request({
-    url: "/api/getTerminalStatus",
+    url: "/xymanager/getTerminalStatus",
     method: "post",
     data,
     headers: {
@@ -160,7 +161,7 @@ export function getDeviceList(data) {
 //获取最新装置信息aaa
 export function getinfoStatus(data) {
   return request({
-    url: "/api/getLastTermInfo",
+    url: "/xymanager/getLastTermInfo",
     method: "post",
     data,
     headers: {
@@ -171,7 +172,7 @@ export function getinfoStatus(data) {
 //获取最新装置信息
 export function getNewDeviceList(data) {
   return request({
-    url: "/api/getLastedTerminalStatus",
+    url: "/xymanager/getLastedTerminalStatus",
     method: "post",
     data,
   });
@@ -180,7 +181,7 @@ export function getNewDeviceList(data) {
 //声光报警
 export function alarmMarkJoggle(data) {
   return request({
-    url: "/api/alarmMark",
+    url: "/xymanager/alarmMark",
     method: "post",
     data,
   });
@@ -189,7 +190,7 @@ export function alarmMarkJoggle(data) {
 // 获取GPS位置
 export function getTermGPSJoggle(data) {
   return request({
-    url: "/api/getTermGPS",
+    url: "/xymanager/getTermGPS",
     method: "post",
     data,
   });
@@ -197,7 +198,7 @@ export function getTermGPSJoggle(data) {
 //setTermGPS 开启关闭gps
 export function setTermGPSJoggle(data) {
   return request({
-    url: "/api/setTermGPS",
+    url: "/xymanager/setTermGPS",
     method: "post",
     data,
   });
@@ -206,7 +207,7 @@ export function setTermGPSJoggle(data) {
 //获取GPS位置触发
 export function getTermGPSPosition(data) {
   return request({
-    url: "/api/getTermGPSPosition",
+    url: "/xymanager/getTermGPSPosition",
     method: "post",
     data,
   });
@@ -215,7 +216,7 @@ export function getTermGPSPosition(data) {
 
 export function getTermLastGPSPosition(data) {
   return request({
-    url: "/api/getTermLastGPSPosition",
+    url: "/xymanager/getTermLastGPSPosition",
     method: "post",
     data,
     headers: {
@@ -227,7 +228,7 @@ export function getTermLastGPSPosition(data) {
 //获取图片轮巡接口
 export function getPictureList(data) {
   return request({
-    url: "/api/getPhotoBanner",
+    url: "/xymanager/getPhotoBanner",
     method: "post",
     data,
   });
@@ -237,7 +238,7 @@ export function getPictureList(data) {
 //获取电压-线路-杆塔等信息
 export function getSearchInfo(data) {
   return request({
-    url: "/api/getLineAndGt",
+    url: "/xymanager/getLineAndGt",
     method: "post",
     data,
   });
@@ -245,7 +246,7 @@ export function getSearchInfo(data) {
 //获取实时图片数据
 export function getRealtimePhoto(data) {
   return request({
-    url: "/api/getPhotoList",
+    url: "/xymanager/getPhotoList",
     method: "post",
     data,
   });
@@ -255,7 +256,7 @@ export function getRealtimePhoto(data) {
 //获取告警列表
 export function getAlarmList(data) {
   return request({
-    url: "/api/getTerminalAlarmList",
+    url: "/xymanager/getTerminalAlarmList",
     method: "post",
     data,
   });
@@ -263,7 +264,7 @@ export function getAlarmList(data) {
 //获取告警label
 export function getAlarmTypeList(data) {
   return request({
-    url: "/api/getAlarmTypeList",
+    url: "/xymanager/getAlarmTypeList",
     method: "post",
     data,
   });
@@ -271,7 +272,7 @@ export function getAlarmTypeList(data) {
 //已读未读
 export function readAlarm(data) {
   return request({
-    url: "/api/readAlarm",
+    url: "/xymanager/readAlarm",
     method: "post",
     data,
   });
@@ -280,7 +281,7 @@ export function readAlarm(data) {
 //手动拍照
 export function takePicJoggle(data) {
   return request({
-    url: "/api/takePic",
+    url: "/xymanager/takePic",
     method: "get",
 
     params: data,
@@ -295,7 +296,7 @@ export function takePicJoggle(data) {
 //用户列表查询
 export function getUserList(data) {
   return request({
-    url: "/api/userList",
+    url: "/xymanager/userList",
     method: "post",
     data,
   });
@@ -303,7 +304,7 @@ export function getUserList(data) {
 //新增用户
 export function addUserApi(data) {
   return request({
-    url: "/api/addUser",
+    url: "/xymanager/addUser",
     method: "post",
     data,
   });
@@ -312,7 +313,7 @@ export function addUserApi(data) {
 //删除用户
 export function delUserApi(data) {
   return request({
-    url: "/api/deleteUser",
+    url: "/xymanager/deleteUser",
     method: "post",
     data,
     headers: {
@@ -324,14 +325,14 @@ export function delUserApi(data) {
 //设置告警可信度
 export function updateAlarmTypeList(data) {
   return request({
-    url: "/api/updateAlarmTypeList",
+    url: "/xymanager/updateAlarmTypeList",
     method: "post",
     data,
   });
 } //全局设置线缆绘制
 export function getMarkEnableStatus(data) {
   return request({
-    url: "/api/getMarkEnableStatus",
+    url: "/xymanager/getMarkEnableStatus",
     method: "post",
     data,
   });
@@ -339,7 +340,7 @@ export function getMarkEnableStatus(data) {
 //全局更新设置线缆绘制
 export function updateMarkEnableStatus(data) {
   return request({
-    url: "/api/updateMarkEnableStatus",
+    url: "/xymanager/updateMarkEnableStatus",
     method: "post",
     data,
     headers: {
@@ -351,7 +352,7 @@ export function updateMarkEnableStatus(data) {
 
 export function updateAlarmChannel(data) {
   return request({
-    url: "/api/updateAlarmChannel",
+    url: "/xymanager/updateAlarmChannel",
     method: "post",
     data,
     headers: {
@@ -363,7 +364,7 @@ export function updateAlarmChannel(data) {
 //获取电压等级列表
 export function getdyListJoggle(data) {
   return request({
-    url: "/api/getdyList",
+    url: "/xymanager/getdyList",
     method: "post",
     data,
   });
@@ -371,7 +372,7 @@ export function getdyListJoggle(data) {
 //1.线路列表信息
 export function getLineListJoggle(data) {
   return request({
-    url: "/api/getLineList",
+    url: "/xymanager/getLineList",
     method: "post",
     data,
   });
@@ -379,7 +380,7 @@ export function getLineListJoggle(data) {
 //2.添加单个或者多个线路信息
 export function addLineJoggle(data) {
   return request({
-    url: "/api/addLine",
+    url: "/xymanager/addLine",
     method: "post",
     data,
   });
@@ -387,7 +388,7 @@ export function addLineJoggle(data) {
 //3.删除新路信息
 export function deleteLineJoggle(data) {
   return request({
-    url: "/api/deleteLine",
+    url: "/xymanager/deleteLine",
     method: "post",
     data,
   });
@@ -395,7 +396,7 @@ export function deleteLineJoggle(data) {
 //4.修改信息
 export function updateLineJoggle(data) {
   return request({
-    url: "/api/updateLine",
+    url: "/xymanager/updateLine",
     method: "post",
     data,
   });
@@ -404,7 +405,7 @@ export function updateLineJoggle(data) {
 //1.获取杆塔列表
 export function getTowerListApi(data) {
   return request({
-    url: "/api/getTowerList",
+    url: "/xymanager/getTowerList",
     method: "post",
     data,
   });
@@ -412,7 +413,7 @@ export function getTowerListApi(data) {
 //2.获取线路编号列表
 export function getLineListApi(data) {
   return request({
-    url: "/api/getLineList",
+    url: "/xymanager/getLineList",
     method: "post",
     data,
   });
@@ -420,7 +421,7 @@ export function getLineListApi(data) {
 //3.新增杆塔信息
 export function addTowerApi(data) {
   return request({
-    url: "/api/addTower",
+    url: "/xymanager/addTower",
     method: "post",
     data,
   });
@@ -428,7 +429,7 @@ export function addTowerApi(data) {
 //4.修改杆塔信息
 export function updateTowerApi(data) {
   return request({
-    url: "/api/updateTower",
+    url: "/xymanager/updateTower",
     method: "post",
     data,
   });
@@ -436,7 +437,7 @@ export function updateTowerApi(data) {
 //5.删除杆塔信息
 export function delTowerApi(data) {
   return request({
-    url: "/api/deleteTower",
+    url: "/xymanager/deleteTower",
     method: "post",
     data,
   });
@@ -446,7 +447,7 @@ export function delTowerApi(data) {
 //1.获取通道列表
 export function getChannelListapi(data) {
   return request({
-    url: "/api/getChannelList",
+    url: "/xymanager/getChannelList",
     method: "post",
     data,
   });
@@ -454,7 +455,7 @@ export function getChannelListapi(data) {
 //2.新增通道
 export function addChannelapi(data) {
   return request({
-    url: "/api/addChannelList",
+    url: "/xymanager/addChannelList",
     method: "post",
     data,
   });
@@ -462,7 +463,7 @@ export function addChannelapi(data) {
 //3.删除通道
 export function deleteChannelapi(data) {
   return request({
-    url: "/api/deleteChannelList",
+    url: "/xymanager/deleteChannelList",
     method: "post",
     data,
   });
@@ -470,7 +471,7 @@ export function deleteChannelapi(data) {
 //4.修改通道
 export function updateChannelapi(data) {
   return request({
-    url: "/api/updateChannelList",
+    url: "/xymanager/updateChannelList",
     method: "post",
     data,
   });
@@ -480,7 +481,7 @@ export function updateChannelapi(data) {
 //获取列表
 export function getTerminalJoggle(data) {
   return request({
-    url: "/api/getTerminalList",
+    url: "/xymanager/getTerminalList",
     method: "post",
     data,
   });
@@ -488,7 +489,7 @@ export function getTerminalJoggle(data) {
 //添加设备信息
 export function addTerminalJoggle(data) {
   return request({
-    url: "/api/addTerminal",
+    url: "/xymanager/addTerminal",
     method: "post",
     data,
   });
@@ -496,7 +497,7 @@ export function addTerminalJoggle(data) {
 //添加设备---获取-线路-杆塔
 export function getLineAndGtInfo(data) {
   return request({
-    url: "/api/getLineAndGtList",
+    url: "/xymanager/getLineAndGtList",
     method: "post",
     data,
   });
@@ -504,7 +505,7 @@ export function getLineAndGtInfo(data) {
 //修改设备信息
 export function updateTerminalJoggle(data) {
   return request({
-    url: "/api/updateTerminal",
+    url: "/xymanager/updateTerminal",
     method: "post",
     data,
   });
@@ -512,7 +513,7 @@ export function updateTerminalJoggle(data) {
 //删除设备信息
 export function deleteTerminalJoggle(data) {
   return request({
-    url: "/api/deleteTerminal",
+    url: "/xymanager/deleteTerminal",
     method: "post",
     data,
   });
@@ -521,7 +522,7 @@ export function deleteTerminalJoggle(data) {
 
 export function getTerminalListExcel() {
   return request({
-    url: "/api/getTerminalListExcel",
+    url: "/xymanager/getTerminalListExcel",
     method: "post",
     responseType: "blob",
   });
@@ -530,7 +531,7 @@ export function getTerminalListExcel() {
 
 export function getAllChannelListJoggle(data) {
   return request({
-    url: "/api/getAllChannelList",
+    url: "/xymanager/getAllChannelList",
     method: "post",
     data,
   });
@@ -538,7 +539,7 @@ export function getAllChannelListJoggle(data) {
 //规约版本
 export function getProtocolList(data) {
   return request({
-    url: "/api/getProtocolList",
+    url: "/xymanager/getProtocolList",
     method: "get",
     params: data,
   });
@@ -547,7 +548,7 @@ export function getProtocolList(data) {
 
 export function getChannelListJoggle(data) {
   return request({
-    url: "/api/getChannelByTermid",
+    url: "/xymanager/getChannelByTermid",
     method: "post",
     data,
   });
@@ -555,7 +556,7 @@ export function getChannelListJoggle(data) {
 //装置复位
 export function resetTerminalApi(data) {
   return request({
-    url: "/api/resetTerminal",
+    url: "/xymanager/resetTerminal",
     method: "post",
     data,
     headers: {
@@ -566,7 +567,7 @@ export function resetTerminalApi(data) {
 //图像参数--获取图像分辨率
 export function getResolutionRatio(data) {
   return request({
-    url: "/api/getResolutionList",
+    url: "/xymanager/getResolutionList",
     method: "post",
     data,
     headers: {
@@ -578,7 +579,7 @@ export function getResolutionRatio(data) {
 
 export function getCoordinate(data) {
   return request({
-    url: "/api/getCoordinate",
+    url: "/xymanager/getCoordinate",
     method: "post",
     data,
   });
@@ -587,7 +588,7 @@ export function getCoordinate(data) {
 
 export function updateCoordinate(data) {
   return request({
-    url: "/api/updateCoordinate",
+    url: "/xymanager/updateCoordinate",
     method: "post",
     data,
   });
@@ -597,7 +598,7 @@ export function updateCoordinate(data) {
 //1.获取任务规则列表接口
 export function getScheduleRulelListJoggle(data) {
   return request({
-    url: "/api/getScheduleRulelList",
+    url: "/xymanager/getScheduleRulelList",
     method: "post",
     data,
   });
@@ -605,7 +606,7 @@ export function getScheduleRulelListJoggle(data) {
 //2.新增任务规则
 export function addScheduleRulel(data) {
   return request({
-    url: "/api/addSchelduleRuleList",
+    url: "/xymanager/addSchelduleRuleList",
     method: "post",
     data,
   });
@@ -613,7 +614,7 @@ export function addScheduleRulel(data) {
 //3.删除任务规则
 export function deleteScheduleRulel(data) {
   return request({
-    url: "/api/deleteSchelduleRule",
+    url: "/xymanager/deleteSchelduleRule",
     method: "post",
     data,
   });
@@ -621,7 +622,7 @@ export function deleteScheduleRulel(data) {
 //4.修改任务规则
 export function updateScheduleRulel(data) {
   return request({
-    url: "/api/updateSchelduleRule",
+    url: "/xymanager/updateSchelduleRule",
     method: "post",
     data,
   });
@@ -629,7 +630,7 @@ export function updateScheduleRulel(data) {
 //5.获取所有通道
 export function getScheduleRulelAccessList(data) {
   return request({
-    url: "/api/getChannelTreeList",
+    url: "/xymanager/getChannelTreeList",
     method: "post",
     data,
   });
@@ -637,7 +638,7 @@ export function getScheduleRulelAccessList(data) {
 //6.设置时间表通道
 export function setScheduleRulel(data) {
   return request({
-    url: "/api/relateSchelduleRule",
+    url: "/xymanager/relateSchelduleRule",
     method: "post",
     data,
   });
@@ -645,7 +646,7 @@ export function setScheduleRulel(data) {
 //7.查询设备时间表
 export function getSchedulenr(data) {
   return request({
-    url: "/api/getChannelSchelduleRule",
+    url: "/xymanager/getChannelSchelduleRule",
     method: "post",
     data,
   });
@@ -653,7 +654,299 @@ export function getSchedulenr(data) {
 //根据通道编号获取设备列表
 export function getTermListByChannelJoggle(data) {
   return request({
-    url: "/api/getTermListByChannel ",
+    url: "/xymanager/getTermListByChannel ",
+    method: "post",
+    data,
+  });
+}
+//调节焦距
+
+export function updateTermCamera(data) {
+  return request({
+    url: "/xymanager/updateTermCamera",
+    method: "get",
+    params: data,
+  });
+}
+
+//郑州左侧树状结构接口
+export function getICEdyTreeList(data) {
+  return request({
+    url: "/xymanager/getzzdyTreeList",
+    method: "post",
+    data,
+  });
+}
+//删除图片
+export function deletePicList(data) {
+  return request({
+    url: "/xymanager/deletePicList",
+    method: "post",
+    data,
+  });
+}
+
+export function addFavorList(data) {
+  return request({
+    url: "/xymanager/addFavorList",
+    method: "post",
+    data,
+  });
+}
+
+//上传图片
+export function uploadPicApi(data) {
+  return request({
+    url: "/xymanager/upload",
+    method: "post",
+    data,
+    headers: {
+      "Content-Type": "multipart/form-data", // set the content type to multipart/form-data
+    },
+  });
+}
+
+//角色管理
+//获取所有角色
+export function getRoleList(data) {
+  return request({
+    url: "/xymanager/role/listAll",
+    method: "get",
+    params: data,
+  });
+}
+//新增角色
+export function addRole(data) {
+  return request({
+    url: "/xymanager/role/add",
+    method: "post",
+    data,
+  });
+}
+//修改角色
+export function updateRole(data) {
+  return request({
+    url: "/xymanager/role/update",
+    method: "post",
+    data,
+  });
+}
+//删除角色
+export function deleteRole(data) {
+  return request({
+    url: "/xymanager/role/delete",
+    method: "post",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+
+//查询权限数结构
+
+export function getPermissionTree(data) {
+  return request({
+    url: "/xymanager/user/getFullTree",
+    method: "get",
+    params: data,
+  });
+}
+//@Api0peration("查询杈限")
+
+export function getPermission(data) {
+  return request({
+    url: "/xymanager/user/getPermission",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+
+//@Api0peration("修改杈限")
+export function changePermission(data) {
+  return request({
+    url: "/xymanager/user/changePermission",
+    method: "post",
+    data,
+  });
+}
+
+//装置信息报
+//故障信息报
+export function getTermFaultsApi(data) {
+  return request({
+    url: "/xymanager/getTermFaults",
+    method: "post",
+    data,
+  });
+}
+//导出数据故障信息报
+export function getTermFaultsExcel() {
+  return request({
+    url: "/xymanager/getTermFaultsExcel",
+    method: "get",
+    responseType: "blob",
+  });
+}
+
+//工作状态报
+export function getWorkingStatusHistoryApi(data) {
+  return request({
+    url: "/xymanager/getWorkingStatusHistory",
+    method: "post",
+    data,
+  });
+}
+//导出工作状态报
+export function getWorkingStatusHistoryExcel(data) {
+  return request({
+    url: "/xymanager/getWorkingStatusHistoryExcel",
+    method: "get",
+    responseType: "blob",
+  });
+}
+//运行状态报
+export function getTermRunningHistoryApi(data) {
+  return request({
+    url: "/xymanager/getTermRunningHistory",
+    method: "post",
+    data,
+  });
+}
+//导出运行状态报
+export function getTermRunningHistoryExcel(data) {
+  return request({
+    url: "/xymanager/getTermRunningHistoryExcel",
+    method: "get",
+    responseType: "blob",
+  });
+}
+
+//GPS位置报
+export function getTermGpsHistoryApi(data) {
+  return request({
+    url: "/xymanager/getTermGpsHistory",
+    method: "post",
+    data,
+  });
+}
+//导出GPS位置报
+export function getTermGpsHistoryExcel(data) {
+  return request({
+    url: "/xymanager/getTermGpsHistoryExcel",
+    method: "get",
+    responseType: "blob",
+  });
+}
+//基本信息报
+
+export function getTermBasicInfoHistoryApi(data) {
+  return request({
+    url: "/xymanager/getTermBasicInfoHistory",
+    method: "post",
+    data,
+  });
+}
+//导出基本信息报
+export function getTermBasicInfoHistoryExcel(data) {
+  return request({
+    url: "/xymanager/getTermBasicInfoHistoryExcel",
+    method: "get",
+    responseType: "blob",
+  });
+}
+
+//apk管理
+//查询apk列表
+export function listApk(data) {
+  return request({
+    url: "/xymanager/listApk",
+    method: "post",
+    data,
+  });
+}
+
+//上传apk
+export function uploadApk(data, onUploadProgress) {
+  return request({
+    url: "/xymanager/uploadApk",
+    method: "post",
+    data,
+    headers: {
+      "Content-Type": "multipart/form-data", // set the content type to multipart/form-data
+    },
+    onUploadProgress: onUploadProgress, // 允许外部传递进度回调函数
+  });
+}
+
+//修改apk
+export function updateApkApi(data) {
+  return request({
+    url: "/xymanager/updateApk",
+    method: "post",
+    data,
+  });
+}
+//删除apk
+export function deleteApkApi(data) {
+  return request({
+    url: "/xymanager/deleteApk",
+    method: "post",
+    data,
+  });
+}
+
+//获取菜单功能列表
+export function getMenuListApi(data) {
+  return request({
+    url: "/xymanager/resource/listAll",
+    method: "get",
+    params: data,
+  });
+}
+//新增菜单功能
+export function addResourceApi(data) {
+  return request({
+    url: "/xymanager/resource/add",
+    method: "post",
+    data,
+  });
+}
+//修改菜单功能
+export function updateResourceApi(data) {
+  return request({
+    url: "/xymanager/resource/update",
+    method: "post",
+    data,
+  });
+}
+//删除菜单功能
+export function deleteResourceApi(data) {
+  return request({
+    url: "/xymanager/resource/delete",
+    method: "post",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+
+//查询角色权限数结构
+export function getRolePermissionApi(data) {
+  return request({
+    url: "/xymanager/role/getPermission",
+    method: "get",
+    params: data,
+  });
+}
+//@Api0peration("修改角色杈限")
+export function getRolechangePermissionApi(data) {
+  return request({
+    url: "/xymanager/role/changePermission",
     method: "post",
     data,
   });

src/utils/event-bus.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+
+const EventBus = new Vue()
+export default EventBus

src/utils/request.js

@@ -13,45 +13,40 @@ const service = axios.create({
 
 service.interceptors.request.use((config) => {
   if (localStorage.getItem("token")) {
-    config.headers.sessionId = localStorage.getItem("token");
+    // console.log("aaaaaaaaaaaaaa", localStorage.getItem("token"));
+    config.headers.Authorization = localStorage.getItem("token");
   }
   return config;
 });
 service.interceptors.response.use(
-  // (response) => {
-  //   if (response.status === 200) {
-  //     return response.data;
-  //   } else {
-  //     Promise.reject();
-  //   }
-  // },
-  // (error) => {
-  //   console.log(error);
-  //   return Promise.reject();
-  // }
-
   (response) => {
     const res = response.data;
     if (res.code !== 200) {
-      // Message({
-      //   showClose: true,
-      //   message: res.msg || "Error",
-      //   type: "error",
-      //   duration: 5 * 1000,
-      // });
       if (res.code === 401) {
-        Message({ message: res.msg, type: "error", duration: 1500 });
+        Message({
+          showClose: true,
+          message: res.msg,
+          type: "error",
+          duration: 1500,
+        });
+        localStorage.removeItem("token");
         router.push("/login");
       }
 
       if (res.code === 400) {
-        Message({ message: res.msg, type: "error", duration: 1500 });
+        Message({
+          showClose: true,
+          message: res.msg,
+          type: "error",
+          duration: 1500,
+        });
       }
-
       if (res.code === 500) {
+        //alert(res.msg || "Error");
+
         Message({
           showClose: true,
-          message: 服务器错误(500),
+          message: res.msg,
           type: "error",
           duration: 1500,
         });

src/views/alarmHandling/index.vue

@@ -364,6 +364,7 @@ import {
 import morePicPreveiw from "../realTimeMonitor/components/morePicPreveiw";
 import moment from "moment";
 export default {
+  name: "alarmHandling",
   components: {
     morePicPreveiw,
   },
@@ -950,7 +951,7 @@ export default {
         alias: val.alias,
         channnelname: val.channnelName,
         photoTime: val.alarmTime,
-        termid: val.id,
+        termid: val.termId,
         channelid: val.channelId,
       };
       this.$refs.morePicPreveiw_ref.display(currentPrams);
@@ -1241,6 +1242,7 @@ export default {
           bottom: 0px;
           background: rgba(0, 0, 0, 0.5);
           width: calc(100% - 12px);
+          z-index: 3;
           .alarmInfo {
             color: #fff;
           }

src/views/cameraChannel/index.vue

@@ -100,6 +100,7 @@ import addChannelDialog from "./components/addChannelDialog.vue";
 import { getChannelListapi, deleteChannelapi } from "@/utils/api/index";
 
 export default {
+  name: "cameraChannel",
   components: {
     addChannelDialog,
   },

src/views/devicePhotoSchedule/components/bdSchedule.vue

@@ -445,7 +445,7 @@ export default {
       }
     }
     .treeDevice {
-      background-color: #169e8c;
+      //background-color: #169e8c;
       height: 366px;
       // overflow: auto;
       display: flex;

src/views/devicePhotoSchedule/index.vue

@@ -96,6 +96,7 @@ import adddeviceDialog from "./components/adddeviceDialog.vue";
 import bdSchedule from "./components/bdSchedule.vue";
 
 export default {
+  name: "devicePhotoSchedule",
   components: {
     adddeviceDialog,
     bdSchedule,

src/views/homePage/index.vue

@@ -126,7 +126,7 @@ import {
   getOnlineTerminalListExcel,
 } from "@/utils/api/index";
 export default {
-  name: "",
+  name: "stritl",
   data() {
     return {
       termDataNum: "", //总数
@@ -195,7 +195,8 @@ export default {
     //导出
     handleExport(val) {
       console.log(val);
-      window.location.href = "/api/api/getOnlineTerminalListExcel?type=" + val;
+      window.location.href =
+        "/api/xymanager/getOnlineTerminalListExcel?type=" + val;
     },
     // 隐患数量统计
     changedate() {
@@ -477,11 +478,11 @@ export default {
 </script>
 <style lang="less">
 .stritleEchartsPage {
-  height: calc(100% - 32px);
+  height: calc(100% - 24px);
-  padding: 16px;
+  padding: 12px;
   display: flex;
   flex-direction: column;
-  justify-content: space-around;
+  justify-content: space-between;
   .echart-top {
     display: flex;
     height: 48%;

src/views/iceWeather/components/leftTree.vue

@@ -0,0 +1,291 @@
+<template>
+  <div class="leftTreeBox">
+    <div class="companyBox">
+      <span class="spanLabel"
+        ><i class="el-icon-office-building"></i>公司：</span
+      >
+      <el-select v-model="companyVal" placeholder="请选择公司">
+        <!-- <el-option label="捕鱼达人" value="budr"></el-option> -->
+        <el-option
+          v-for="item in companyOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+          @click.native="handleClick(item.value)"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <el-divider></el-divider>
+    <div class="searchBar">
+      <el-input
+        placeholder="输入关键字进行过滤"
+        v-model="filterText"
+        prefix-icon="el-icon-search"
+      >
+      </el-input>
+    </div>
+    <el-tree
+      ref="tree"
+      v-loading="treeLoading"
+      :data="lineTreeData"
+      :props="defaultProps"
+      node-key="id"
+      highlight-current
+      :default-expanded-keys="[9]"
+      :expand-on-click-node="false"
+      :filter-node-method="filterNode"
+      :current-node-key="currentNodekey"
+      @node-click="handleNodeClick"
+    >
+      <span class="custom-tree-node" slot-scope="{ node, data }">
+        <span v-if="node.level === 1">
+          <span class="iconfont icon-dianli" style="margin-right: 6px"></span>
+          <!--<span>{{ node.label }} </span>-->
+          <span>捕鱼达人</span>
+        </span>
+        <span v-else-if="node.level === 2">
+          <span class="iconfont icon-dianlihangye" style="margin-right: 6px">
+          </span>
+          <span
+            >{{ node.label }}
+            <span class="num">({{ data.list.length }}) </span></span
+          >
+        </span>
+        <span v-else>
+          <span
+            class="iconfont icon-shexiangtoulixian"
+            v-if="data.onlinestatus == 0"
+            :class="data.onlinestatus == 0 ? 'disconnect' : ''"
+            style="margin-right: 6px"
+          ></span>
+          <span
+            class="iconfont icon-shexiangtou-lixian"
+            v-else
+            :class="data.onlinestatus == 0 ? 'disconnect' : ''"
+            style="margin-right: 6px"
+          ></span>
+          <span
+            :id="data.id"
+            :class="data.onlinestatus == 0 ? 'disconnect' : ''"
+            >{{ node.label }}</span
+          >
+        </span>
+      </span>
+    </el-tree>
+  </div>
+</template>
+<script>
+import { getICEdyTreeList } from "@/utils/api/index";
+export default {
+  data() {
+    return {
+      treeLoading: false,
+      companyVal: "", //公司，
+      companyOptions: [
+        {
+          value: "bydr",
+          label: "捕鱼达人",
+        },
+      ],
+      filterText: "", //查询字段过滤
+      lineTreeData: [],
+      defaultExpandedKeys: [], //默认展开
+      collapsedKeys: [], // 收起节点的key数组
+      defaultProps: {
+        //指定参数格式回显数据
+        children: "list",
+        label: "name",
+      },
+      currentData: {}, //当前选中的数据
+      currentNodekey: "", //默认选中的节点树,
+      role: "",
+    };
+  },
+  watch: {
+    filterText(newVal) {
+      this.handleFilter(); // 当 filterText 发生变化时执行过滤操作
+    },
+  },
+  created() {
+    this.getLineTreeList(); //获取树状图
+    this.companyVal = this.companyOptions[0].value;
+  },
+  methods: {
+    handleClick(val) {
+      console.log(val);
+    },
+    handleFilter() {
+      // 在输入框输入完成后的500毫秒执行过滤节点方法
+      setTimeout(() => {
+        this.$refs.tree.filter(this.filterText);
+      }, 500);
+    },
+    //树状图搜索
+    filterNode(value, data, node) {
+      // 如果什么都没填全部匹配全部返回
+      if (!value) return true;
+      this.searchName = data.name + data.cmdid;
+      //console.log(this.searchName);
+      // 如果传入的value和data中的label相同，匹配成功
+      if (this.searchName.indexOf(value) !== -1) {
+        return true;
+      }
+    },
+    //获取树状图列表
+    getLineTreeList() {
+      this.role = localStorage.getItem("role");
+      console.log(this.role);
+      this.treeLoading = true;
+
+      getICEdyTreeList({
+        type: -1,
+        lineid: [
+          "234",
+          "238",
+          "253",
+          "242",
+          "233",
+          "231",
+          "243",
+          "235",
+          "248",
+          "230",
+          "236",
+          "239",
+          "257",
+          "255",
+        ],
+      })
+        .then((res) => {
+          this.lineTreeData = res.data.list;
+          this.treeLoading = false;
+          this.currentData = JSON.parse(localStorage.getItem("currentData"));
+          this.lineTreeData.forEach((node) => {
+            if (node.list) {
+              node.list.forEach((child) => {
+                this.defaultExpandedKeys.push(child.id);
+              });
+            } else {
+              this.defaultExpandedKeys.push(node.id);
+            }
+          });
+          this.defaultExpandedKeys =
+            JSON.parse(localStorage.getItem("defaultKey")) !== null
+              ? JSON.parse(localStorage.getItem("defaultKey"))
+              : this.defaultExpandedKeys; //获取保存的defaultKey ;
+
+          //console.log(this.defaultExpandedKeys);
+          if (this.lineTreeData[0].list[0].list.length > 0) {
+          }
+          if (
+            this.currentData !== null &&
+            Object.keys(this.currentData).length !== 0
+          ) {
+            this.currentNodekey = this.currentData.id;
+            this.handleNodeClick(this.currentData);
+          } else {
+            this.currentData = this.lineTreeData[0]; //第一个选中的数据
+            this.currentNodekey = this.lineTreeData[0].id; //第一个数据
+            this.handleNodeClick(this.currentData);
+          }
+          this.$nextTick(() => {
+            this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
+          });
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //点击当前选中的treenode
+    handleNodeClick(data) {
+      this.currentData = data;
+      this.$parent.getCurrentData(this.currentData);
+    },
+  },
+};
+</script>
+<style lang="less">
+.leftTreeBox {
+  width: 200px;
+  display: flex;
+  flex-direction: column;
+  padding: 16px 0;
+  .companyBox {
+    display: flex;
+    width: 94%;
+    margin: 0 auto;
+    margin-bottom: 8px;
+    align-items: center;
+    .spanLabel {
+      font-size: 14px;
+      width: 96px;
+    }
+  }
+  .el-divider--horizontal {
+    margin: 0px 0px 8px 0px;
+  }
+  .searchBar {
+    width: 94%;
+    margin: 0 auto;
+    margin-bottom: 8px;
+  }
+  .el-tree {
+    overflow-y: scroll;
+    overflow-x: hidden;
+    .el-tree-node__content {
+      height: 32px;
+      font-size: 12px;
+    }
+    .custom-tree-node {
+      color: #333;
+      overflow: hidden;
+      span {
+        display: flex;
+        display: inline-table;
+        overflow: hidden;
+        align-items: center;
+      }
+      .num {
+        color: #1c77ac;
+      }
+    }
+  }
+  .disconnect {
+    color: #d3d3d3;
+  }
+
+  .el-tree--highlight-current
+    .el-tree-node.is-current
+    > .el-tree-node__content {
+    // 设置颜色
+    color: #fff;
+    background: #1c77ac;
+    .custom-tree-node {
+      color: #fff;
+      //overflow: hidden;
+      span {
+        display: flex;
+        //overflow: hidden;
+        align-items: center;
+        .num {
+          color: #fff;
+        }
+        .iconfont {
+          //width: 30px;
+          display: inline-table;
+        }
+      }
+    }
+  }
+}
+.el-table thead {
+  color: #333;
+  th {
+    font-weight: 400;
+  }
+}
+.el-table {
+  color: #666;
+}
+</style>

src/views/iceWeather/icing/index.vue

@@ -0,0 +1,714 @@
+<template>
+  <div class="icingBox">
+    <div class="icingContain">
+      <leftTree ref="sideTree"></leftTree>
+      <div class="rightTable">
+        <div class="dataBox">
+          <div class="childBox">
+            <div class="searchBox" ref="searchref">
+              <el-form
+                :inline="true"
+                :model="formdata"
+                class="demo-form-inline"
+              >
+                <el-form-item label="开始日期">
+                  <el-date-picker
+                    v-model="formdata.starttime"
+                    type="date"
+                    placeholder="开始日期"
+                  >
+                  </el-date-picker>
+                </el-form-item>
+                <el-form-item label="结束日期">
+                  <el-date-picker
+                    @change="changedate"
+                    v-model="formdata.endtime"
+                    type="date"
+                    placeholder="结束日期"
+                    class="ml10"
+                  >
+                  </el-date-picker>
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" @click="onSubmit">查询</el-button>
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" @click="exportExcl"
+                    >导出数据</el-button
+                  >
+                </el-form-item>
+                <el-form-item v-if="termalFlag">
+                  <el-button
+                    v-if="!echartsShow"
+                    type="primary"
+                    @click="lookLineCharts"
+                    >曲线图</el-button
+                  >
+                  <el-button
+                    v-if="echartsShow"
+                    type="primary"
+                    @click="lookTableCharts"
+                    >列表数据</el-button
+                  >
+                </el-form-item>
+              </el-form>
+            </div>
+            <div class="childTableShowBox" v-if="!echartsShow">
+              <el-table
+                :data="tableData"
+                style="width: 100%"
+                v-loading="loading"
+                height="calc(100% - 0px)"
+              >
+                <el-table-column
+                  prop="cmdid"
+                  label="监测终端编号"
+                ></el-table-column>
+                <el-table-column
+                  prop="updateTime"
+                  label="时间"
+                  min-width="120px"
+                >
+                  <template slot-scope="scope">
+                    <span v-if="scope.row.updateTime">
+                      {{
+                        $moment(scope.row.updateTime * 1000).format(
+                          "YYYY-MM-DD HH:mm:ss"
+                        )
+                      }}</span
+                    >
+                    <span v-else> - </span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="funcCode" label="功能单元识别码">
+                  <template slot-scope="scope">
+                    <span v-if="scope.row.funcCodeName && scope.row.funcCode">
+                      {{ scope.row.funcCodeName }}({{
+                        scope.row.funcCodeHex
+                      }})</span
+                    ><span v-else-if="scope.row.funcCodeHex"
+                      >({{ scope.row.funcCodeHex }})</span
+                    >
+                    <span v-else> - </span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="maxPull" label="最大拉力(Kg)">
+                  <template slot-scope="scope">
+                    <span v-if="scope.row.maxPull != 65535">
+                      {{ scope.row.maxPull }}</span
+                    >
+                    <span v-else> - </span>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  prop="maxPullWind"
+                  label="最大拉力时风偏角(°)"
+                ></el-table-column>
+                <el-table-column
+                  prop="maxPullTilt"
+                  label="最大拉力时倾斜角(°)"
+                ></el-table-column>
+                <el-table-column prop="minPull" label="最小拉力(Kg)">
+                  <template slot-scope="scope">
+                    <span v-if="scope.row.minPull != 65535">
+                      {{ scope.row.minPull }}</span
+                    >
+                    <span v-else> - </span>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  prop="minPullWind"
+                  label="最小拉力时风偏角(°)"
+                ></el-table-column>
+                <el-table-column
+                  prop="minPullTilt"
+                  label="最小拉力时倾斜角(°)"
+                ></el-table-column>
+                <el-table-column
+                  prop="maxWind"
+                  label="最大风偏角(°)"
+                ></el-table-column>
+                <el-table-column
+                  prop="maxWindTilt"
+                  label="最大风偏角时倾斜角(°)"
+                ></el-table-column>
+                <el-table-column
+                  prop="maxWindPull"
+                  label="最大风偏角时拉力(Kg)"
+                >
+                  <template slot-scope="scope">
+                    <span v-if="scope.row.maxWindPull != 65535">
+                      {{ scope.row.maxWindPull }}</span
+                    >
+                    <span v-else> - </span>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  prop="minWind"
+                  label="最小风偏角(°)"
+                ></el-table-column>
+                <el-table-column
+                  prop="minWindTilt"
+                  label="最小风偏角时倾斜角(°)"
+                ></el-table-column>
+                <el-table-column
+                  prop="minWindPull"
+                  label="最小风偏角时拉力(Kg)"
+                >
+                  <template slot-scope="scope">
+                    <span v-if="scope.row.minWindPull != 65535">
+                      {{ scope.row.minWindPull }}</span
+                    >
+                    <span v-else> - </span>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+            <div class="pageNation" v-if="!echartsShow">
+              <el-pagination
+                @current-change="handleCurrentChange"
+                @size-change="handleSizeChange"
+                :current-page="page"
+                :page-size="pageSize"
+                layout="sizes, prev, pager, next, jumper,total"
+                :total="total"
+              >
+              </el-pagination>
+            </div>
+            <div class="graphBox" v-if="echartsShow">
+              <div
+                class="codeBox1"
+                v-for="(item, index) in codeList"
+                :key="index"
+              >
+                <h3>相位(标识): ({{ item }})</h3>
+                <div class="codeBox">
+                  <div :id="'lineEchart' + index" class="lineChartBox"></div>
+                </div>
+              </div>
+              <div class="noDatabox" v-if="codeList.length == 0">
+                <img src="../../../assets/img/nopic1.jpg" />
+                <p>暂无图表</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import leftTree from "../components/leftTree.vue";
+import { getDataListJoggle, funccodeJoggle } from "@/utils/api/iceApi";
+export default {
+  name: "icing",
+  components: {
+    leftTree,
+  },
+  data() {
+    return {
+      loading: false,
+      tableData: [],
+      formdata: {},
+      page: 1, // 当前页数
+      pageSize: 20, // 每页数量
+      total: 0, //总条数
+      qt: "",
+      id: "",
+      termId: "",
+      paramsData: "",
+      termalFlag: false, //是否是子节点显示  曲线图按钮
+      echartsShow: false, //显示曲线图页面
+      codeList: [], //相位码
+      chartsData: [],
+    };
+  },
+  watch: {
+    endtime(newVal) {
+      if (newVal) {
+        const date = new Date(newVal);
+        date.setHours(23);
+        date.setMinutes(59);
+        date.setSeconds(59);
+        this.formdata.endtime = date.getTime();
+      }
+    },
+  },
+  created() {
+    var that = this;
+    document.onkeydown = function (e) {
+      var key = window.event.keyCode;
+      if (key === 13) {
+        that.onSubmit(); // 触发事件
+      }
+    };
+    this.$set(
+      this.formdata,
+      "starttime",
+      new Date(new Date().toLocaleDateString()).getTime()
+    );
+    const currentDate = new Date(); // 获取当前时间
+    currentDate.setHours(23); // 设置小时为23
+    currentDate.setMinutes(59); // 设置分钟为59
+    currentDate.setSeconds(59); // 设置秒数为59
+    this.$set(this.formdata, "endtime", currentDate.getTime());
+  },
+  mounted() {},
+  methods: {
+    getCurrentData(data) {
+      console.log("执行父组件", data);
+      this.paramsData = data;
+      console.log(data);
+      if (data.dyValue) {
+        console.log("电压-公司");
+        this.qt = "all";
+        this.id = data.id;
+        this.getIcingData(data);
+        this.termalFlag = false;
+      } else if (data.bsManufacturer) {
+        console.log("线路-电压");
+        this.qt = "line";
+        this.id = data.id;
+        this.getIcingData(data);
+        this.termalFlag = false;
+      } else {
+        console.log("装置-杆塔");
+        this.qt = "tower";
+        this.id = data.towerid;
+        this.termId = data.id;
+        this.getIcingData(data);
+        this.termalFlag = true;
+      }
+    },
+    //覆冰数数据
+    getIcingData(data) {
+      console.log(data, this.qt);
+      const sTime = Math.floor(this.formdata.starttime / 1000);
+      const eTime = Math.floor(this.formdata.endtime / 1000);
+      this.loading = true;
+      getDataListJoggle({
+        act: "ice_weight",
+        qt: this.qt,
+        id: this.id,
+        bt: sTime,
+        et: eTime,
+        p: this.page,
+        ps: this.pageSize,
+      })
+        .then((res) => {
+          console.log(res);
+          this.tableData = res.data;
+          this.total = Number(res.page.totalRecords);
+          this.loading = false;
+          this.echartsShow = false;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+
+    lookLineCharts() {
+      //获取相位码和数据
+      this.echartsShow = true;
+      console.log("点击了曲线");
+      this.$nextTick(() => {
+        this.getchartsData(this.paramsData);
+      });
+    },
+    //获取当天的数据
+    getchartsData(data) {
+      console.log(data, this.qt);
+      const sTime = Math.floor(this.formdata.starttime / 1000);
+      const eTime = Math.floor(this.formdata.endtime / 1000);
+      this.loading = true;
+      getDataListJoggle({
+        act: "ice_weight",
+        qt: this.qt,
+        id: this.id,
+        bt: sTime,
+        et: eTime,
+        p: 1,
+        ps: 10000000,
+      })
+        .then((res) => {
+          console.log(res);
+          this.chartsData = res.data;
+          this.$nextTick(() => {
+            this.drawLine();
+          });
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    lookTableCharts() {
+      this.echartsShow = false;
+      this.loading = false;
+    },
+    drawLine() {
+      console.log(this.chartsData);
+      var timeXData = [];
+      var legendData = [
+        "最大拉力",
+        "最大拉力时风偏角",
+        "最大拉力时倾斜角",
+        "最小拉力",
+        "最小拉力时风偏角",
+        "最小拉力时倾斜角",
+        "最大风偏角",
+        "最大风偏角时倾斜角",
+        "最大风偏角时拉力",
+        "最小风偏角",
+        "最小风偏角时倾斜角",
+        "最小风偏角时拉力",
+      ];
+      timeXData = this.chartsData.map((item) =>
+        this.$moment(item.updateTime * 1000).format("YYYY-MM-DD HH:mm:ss")
+      );
+      timeXData = [...new Set(timeXData)];
+      //console.log(timeXData);
+      // var codename = [
+      //   ...new Set(this.chartsData.map((item) => item.funcCodeName)),
+      // ];
+      var code = [...new Set(this.chartsData.map((item) => item.funcCodeHex))];
+
+      this.codeList = code;
+      // var finalData = [];
+      console.log(this.codeList);
+      const groupedData = this.chartsData.reduce((acc, item) => {
+        if (!acc[item.funcCodeHex]) {
+          acc[item.funcCodeHex] = [];
+        }
+        acc[item.funcCodeHex].push(item);
+        return acc;
+      }, []);
+
+      const result = Object.values(groupedData)
+        .map((arr) => [...arr])
+        .reverse();
+
+      console.log(result);
+      this.$nextTick(() => {
+        var roseCharts = document.querySelectorAll(".codeBox");
+        console.log(roseCharts);
+        for (var i = 0; i < roseCharts.length; i++) {
+          // console.log(result[i]);
+          // console.log(
+          //   "最大封片叫拉力",
+          //   result[i].map((item) => item.minWindPull)
+          // );
+
+          // 通过for循环，在相同class的dom内绘制元素
+          var myChart = this.$echarts.init(roseCharts[i]);
+          var option = {
+            // toolbox: {
+            //   feature: {
+            //     dataZoom: {
+            //       yAxisIndex: "none",
+            //     },
+            //     restore: {},
+            //     saveAsImage: {},
+            //   },
+            // },
+            tooltip: {
+              trigger: "axis",
+              axisPointer: {
+                type: "cross",
+                animation: false,
+                label: {
+                  backgroundColor: "#505765",
+                },
+              },
+            },
+            legend: {
+              data: legendData,
+              selected: {
+                最大拉力: true,
+                最大拉力时风偏角: false,
+                最大拉力时倾斜角: false,
+                最小拉力: false,
+                最小拉力时风偏角: false,
+                最小拉力时倾斜角: false,
+                最大风偏角: false,
+                最大风偏角时倾斜角: false,
+                最大风偏角时拉力: false,
+                最小风偏角: false,
+                最小风偏角时倾斜角: false,
+                最小风偏角时拉力: false,
+              },
+              // left: 10,
+            },
+            dataZoom: [
+              {
+                show: true,
+                realtime: true,
+                start: 0,
+                end: 100,
+              },
+              {
+                type: "inside",
+                realtime: true,
+                start: 0,
+                end: 100,
+              },
+            ],
+            xAxis: [
+              {
+                type: "category",
+                boundaryGap: false,
+                axisLine: { onZero: false },
+                // prettier-ignore
+                data: timeXData,
+              },
+            ],
+            yAxis: [
+              {
+                name: "拉力(Kg)",
+                type: "value",
+              },
+              {
+                name: "偏角（°）",
+                alignTicks: true,
+                type: "value",
+                // inverse: true
+              },
+            ],
+            series: [
+              {
+                name: "最大拉力",
+                type: "line",
+                data: result[i].map((item) =>
+                  item.maxPull == 65535 ? "" : item.maxPull
+                ),
+              },
+              {
+                name: "最小拉力",
+                type: "line",
+                data: result[i].map((item) =>
+                  item.minPull == 65535 ? "" : item.minPull
+                ),
+              },
+              {
+                name: "最大风偏角时拉力",
+                type: "line",
+
+                data: result[i].map((item) =>
+                  item.maxWindPull == 65535 ? "" : item.maxWindPull
+                ),
+              },
+              {
+                name: "最小风偏角时拉力",
+                type: "line",
+
+                data: result[i].map((item) =>
+                  item.minWindPull == 65535 ? "" : item.minWindPull
+                ),
+              },
+              {
+                name: "最大拉力时风偏角",
+                type: "line",
+                yAxisIndex: 1,
+                // prettier-ignore
+                data: result[i].map((item) => item.maxPullWind),
+              },
+              {
+                name: "最大拉力时倾斜角",
+                type: "line",
+                yAxisIndex: 1,
+                // prettier-ignore
+                data: result[i].map((item) => item.maxPullTilt),
+              },
+              {
+                name: "最小拉力时风偏角",
+                type: "line",
+                yAxisIndex: 1,
+                // prettier-ignore
+                data: result[i].map((item) => item.minPullWind),
+              },
+              {
+                name: "最小拉力时倾斜角",
+                type: "line",
+                yAxisIndex: 1,
+                // prettier-ignore
+                data: result[i].map((item) => item.minPullTilt),
+              },
+              {
+                name: "最大风偏角",
+                type: "line",
+                yAxisIndex: 1,
+                // prettier-ignore
+                data:result[i].map((item) => item.maxWind),
+              },
+              {
+                name: "最大风偏角时倾斜角",
+                type: "line",
+                yAxisIndex: 1,
+                // prettier-ignore
+                data:result[i].map((item) => item.maxWindTilt),
+              },
+              {
+                name: "最小风偏角",
+                type: "line",
+                yAxisIndex: 1,
+                // prettier-ignore
+                data: result[i].map((item) => item.minWind),
+              },
+              {
+                name: "最小风偏角时倾斜角",
+                type: "line",
+                yAxisIndex: 1,
+                // prettier-ignore
+                data: result[i].map((item) => item.minWindTilt),
+              },
+            ],
+          };
+          myChart.setOption(option);
+          console.log("我执行了");
+          window.addEventListener("resize", () => {
+            myChart.resize();
+          });
+        }
+      });
+    },
+
+    //结束日期
+    changedate() {
+      console.log(new Date(this.formdata.endtime));
+      const currentDate = new Date(this.formdata.endtime); // 获取当前时间
+      currentDate.setHours(23); // 设置小时为23
+      currentDate.setMinutes(59); // 设置分钟为59
+      currentDate.setSeconds(59); // 设置秒数为59
+      this.formdata.endtime = currentDate;
+      console.log("结束时间", this.formdata.endtime);
+    },
+    exportExcl() {
+      const sTime = Math.floor(this.formdata.starttime / 1000);
+      const eTime = Math.floor(this.formdata.endtime / 1000);
+      // window.location.href = "/api/api/getOnlineTerminalListExcel?type=" + val;
+      window.location.href =
+        "/api/xapi/query.php?act=ice_weight&qt=" +
+        this.qt +
+        "&id=" +
+        this.id +
+        "&bt=" +
+        sTime +
+        "&et=" +
+        eTime +
+        "&p=1&ps=20&exp=xls";
+    },
+    onSubmit() {
+      console.log(this.formdata.starttime, this.formdata.endtime);
+      // if (
+      //   new Date(this.formdata.starttime).getDate() ===
+      //   new Date(this.formdata.endtime).getDate()
+      // ) {
+      //   this.getIcingData(this.paramsData);
+      //   console.log("开始时间和结束时间为同一天");
+      // } else {
+      //   this.$message({
+      //     duration: 1500,
+      //     showClose: true,
+      //     message: "请选择同一天",
+      //     type: "warning",
+      //   });
+      //   return;
+      //   console.log("开始时间和结束时间不是同一天");
+      // }
+      this.getIcingData(this.paramsData);
+    },
+    //点击分页
+    handleCurrentChange(val) {
+      this.page = val;
+      this.tableData = [];
+      this.getIcingData(this.paramsData);
+    },
+    //每页条数
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.tableData = [];
+      this.getIcingData(this.paramsData);
+    },
+  },
+};
+</script>
+<style lang="less">
+.icingBox {
+  width: calc(100% - 24px);
+  height: calc(100% - 24px);
+  padding: 12px 12px;
+  background: #fff;
+  .icingContain {
+    display: flex;
+    height: 100%;
+    box-sizing: border-box;
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+  }
+  .rightTable {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex: 1;
+    overflow: hidden;
+    border-left: 1px solid #ddd;
+    .el-table .el-table__cell {
+      text-align: center;
+    }
+    .dataBox {
+      width: calc(100% - 24px);
+      height: calc(100% - 24px);
+      padding: 12px 12px;
+      background: #fff;
+    }
+    // .fatherTableShowBox {
+    //   height: calc(100% - 0px);
+    // }
+    .childBox {
+      height: calc(100% - 0px);
+      .childTableShowBox {
+        height: calc(100% - 91px);
+      }
+    }
+    .graphBox {
+      margin: 0 auto;
+      height: calc(100% - 54px);
+      overflow: auto;
+      .codeBox1 {
+        width: 100%;
+        height: 500px;
+        h3 {
+          font-size: 14px;
+          color: #333;
+          margin-top: 8px;
+          margin-bottom: 8px;
+          font-weight: normal;
+          text-align: center;
+        }
+        .codeBox {
+          width: 100%;
+          height: 450px;
+        }
+        .lineChartBox {
+          width: 100%;
+          height: 372px;
+        }
+      }
+      .noDatabox {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        img {
+          width: 400px;
+        }
+        p {
+          font-size: 16px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/iceWeather/weather/index.vue

@@ -0,0 +1,700 @@
+<template>
+  <div class="weatherBox">
+    <div class="weatherContain">
+      <leftTree ref="sideTree"></leftTree>
+      <div class="rightTable">
+        <div class="dataBox">
+          <div class="fatherTableShowBox" v-if="!childFlag">
+            <el-table
+              :data="tableData"
+              style="width: 100%"
+              v-loading="loading"
+              height="calc(100% - 40px)"
+            >
+              <el-table-column prop="lineName" label="线路"> </el-table-column>
+              <el-table-column prop="towerName" label="杆塔"> </el-table-column>
+              <el-table-column prop="cmdid" label="终端"> </el-table-column>
+
+              <el-table-column prop="updateTime" label="时间">
+                <template slot-scope="scope">
+                  <span v-if="scope.row.updateTime">
+                    {{
+                      $moment(scope.row.updateTime * 1000).format(
+                        "YYYY-MM-DD HH:mm:ss"
+                      )
+                    }}</span
+                  >
+                  <span v-else> - </span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="temperature" label="温度(℃)">
+                <template slot-scope="scope">
+                  <span v-if="scope.row.temperature">{{
+                    scope.row.temperature
+                  }}</span>
+                  <span v-else> - </span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="humidity" label="湿度(%RH)">
+                <template slot-scope="scope">
+                  <span v-if="scope.row.humidity">{{
+                    scope.row.humidity
+                  }}</span>
+                  <span v-else> - </span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="windSpeed" label="瞬时风速(m/s)">
+                <template slot-scope="scope">
+                  <span v-if="scope.row.windSpeed">{{
+                    scope.row.windSpeed
+                  }}</span>
+                  <span v-else> - </span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="windDirection" label="瞬时风向(°)">
+                <template slot-scope="scope">
+                  <span v-if="scope.row.windDirection">{{
+                    scope.row.windDirection
+                  }}</span>
+                  <span v-else> - </span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="rain" label="雨量(mm/hour)">
+                <template slot-scope="scope">
+                  <span v-if="scope.row.rain">{{ scope.row.rain }}</span>
+                  <span v-else> - </span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="airPressure" label="气压(hPa(百帕))">
+                <template slot-scope="scope">
+                  <span v-if="scope.row.airPressure">{{
+                    scope.row.airPressure
+                  }}</span>
+                  <span v-else> - </span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="radiationIntensity" label="日照(W/m2)">
+                <template slot-scope="scope">
+                  <span v-if="scope.row.radiationIntensity">{{
+                    scope.row.radiationIntensity
+                  }}</span>
+                  <span v-else> - </span>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作">
+                <template slot-scope="scope">
+                  <el-button
+                    type="text"
+                    @click="moreDataClick(scope.row)"
+                    v-if="scope.row.updateTime"
+                    >更多历史数据</el-button
+                  >
+                  <span v-else> 没有数据</span>
+                </template>
+              </el-table-column>
+            </el-table>
+            <div class="pageNation">
+              <el-pagination
+                @current-change="handleCurrentChange"
+                @size-change="handleSizeChange"
+                :current-page="page"
+                :page-size="pageSize"
+                layout="sizes, prev, pager, next, jumper,total"
+                :total="total"
+              >
+              </el-pagination>
+            </div>
+          </div>
+          <div class="childBox" v-else>
+            <div class="searchBox" ref="searchref">
+              <el-form
+                :inline="true"
+                :model="formdata"
+                class="demo-form-inline"
+              >
+                <el-form-item label="开始日期">
+                  <el-date-picker
+                    v-model="formdata.starttime"
+                    type="date"
+                    placeholder="开始日期"
+                  >
+                  </el-date-picker>
+                </el-form-item>
+                <el-form-item label="结束日期">
+                  <el-date-picker
+                    @change="changedate"
+                    v-model="formdata.endtime"
+                    type="date"
+                    placeholder="结束日期"
+                    class="ml10"
+                  >
+                  </el-date-picker>
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" @click="onSubmit">查询</el-button>
+                </el-form-item>
+              </el-form>
+            </div>
+            <div class="termalBox">
+              <h3>当前监测终端</h3>
+              <el-descriptions direction="vertical" :column="4" border>
+                <el-descriptions-item label="线路">{{
+                  childMsg.lineName
+                }}</el-descriptions-item>
+                <el-descriptions-item label="杆塔">{{
+                  childMsg.towerName
+                }}</el-descriptions-item>
+                <el-descriptions-item label="终端">{{
+                  childMsg.cmdid
+                }}</el-descriptions-item>
+              </el-descriptions>
+            </div>
+            <div class="echartsBox">
+              <div class="btnbox">
+                <el-button type="primary" @click="onWdLine"
+                  >温度变化趋势</el-button
+                >
+                <el-button type="primary" @click="onSdLine"
+                  >湿度变化趋势</el-button
+                >
+                <el-button type="primary" @click="onHidden">隐藏图表</el-button>
+              </div>
+              <div id="wDechart" class="chartClass" v-show="wdFlag"></div>
+              <div id="sDechart" class="chartClass" v-show="sdFlag"></div>
+            </div>
+            <div class="childTableShowBox">
+              <h3>气象数据列表</h3>
+              <el-table
+                :data="childTableDate"
+                style="width: 100%"
+                v-loading="loading"
+                height="calc(100% - 40px)"
+              >
+                <el-table-column prop="updateTime" label="时间">
+                  <template slot-scope="scope">
+                    <span v-if="scope.row.updateTime">
+                      {{
+                        $moment(scope.row.updateTime * 1000).format(
+                          "YYYY-MM-DD HH:mm:ss"
+                        )
+                      }}</span
+                    >
+                    <span v-else> - </span>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  prop="temperature"
+                  label="温度(℃)"
+                ></el-table-column>
+                <el-table-column
+                  prop="humidity"
+                  label="湿度(%RH)"
+                ></el-table-column>
+                <el-table-column
+                  prop="windSpeed"
+                  label="瞬时风速(m/s)"
+                ></el-table-column>
+                <el-table-column
+                  prop="windDirection"
+                  label="瞬时风向(°)"
+                ></el-table-column>
+                <el-table-column
+                  prop="precipitation"
+                  label="雨量(mm/hour)"
+                ></el-table-column>
+                <el-table-column
+                  prop="airPressure"
+                  label="气压(hPa(百帕))"
+                ></el-table-column>
+                <el-table-column
+                  prop="radiationIntensity"
+                  label="日照(W/m2)"
+                ></el-table-column>
+                <el-table-column
+                  prop="avgWindSpeed1Min"
+                  label="1分钟平均风速(m/s)"
+                ></el-table-column>
+                <el-table-column
+                  prop="avgWindDir1Min"
+                  label="1分钟平均风向(°)"
+                ></el-table-column>
+                <el-table-column
+                  prop="avgWindSpeed10Min"
+                  label="10分钟平均风速(m/s)"
+                ></el-table-column>
+                <el-table-column
+                  prop="avgWindDir10Min"
+                  label="10分钟平均风向(°)"
+                ></el-table-column>
+                <el-table-column
+                  prop="maxSpeed10Min"
+                  label="10分钟最大风速(m/s)"
+                ></el-table-column>
+              </el-table>
+            </div>
+            <div class="pageNation">
+              <el-pagination
+                @current-change="handlechildCurrentChange"
+                @size-change="handlechildSizeChange"
+                :current-page="childpage"
+                :page-size="childpageSize"
+                layout="sizes, prev, pager, next, jumper,total"
+                :total="childtotal"
+              >
+              </el-pagination>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import leftTree from "../components/leftTree";
+import { getDataListJoggle } from "@/utils/api/iceApi";
+export default {
+  name: "weather",
+  components: {
+    leftTree,
+  },
+  data() {
+    return {
+      loading: false,
+      childFlag: false,
+      tableData: [],
+      childTableDate: [],
+      formdata: {},
+      page: 1, // 当前页数
+      pageSize: 20, // 每页数量
+      total: 0, //总条数
+      qt: "",
+      id: "",
+      paramsData: "",
+      childpage: 1, // 当前页数
+      childpageSize: 20, // 每页数量
+      childtotal: 0, //总条数
+      childParma: "",
+      childMsg: "",
+      echartsData: "", //echarts数据
+      wdFlag: true,
+      sdFlag: false,
+    };
+  },
+  created() {
+    var that = this;
+    document.onkeydown = function (e) {
+      var key = window.event.keyCode;
+      if (key === 13) {
+        that.onSubmit(); // 触发事件
+      }
+    };
+  },
+  watch: {
+    endtime(newVal) {
+      if (newVal) {
+        const date = new Date(newVal);
+        date.setHours(23);
+        date.setMinutes(59);
+        date.setSeconds(59);
+        this.formdata.endtime = date.getTime();
+      }
+    },
+  },
+  mounted() {
+    //this.getWeatherData();
+  },
+  methods: {
+    getCurrentData(data) {
+      console.log("执行父组件", data);
+      this.paramsData = data;
+      console.log(data);
+      if (data.dyValue) {
+        console.log("电压-公司");
+        this.qt = "all";
+        this.id = data.id;
+        this.getWeatherData(data);
+      } else if (data.bsManufacturer) {
+        console.log("线路-电压");
+        this.qt = "line";
+        this.id = data.id;
+        this.getWeatherData(data);
+      } else {
+        console.log("装置-杆塔");
+        this.qt = "tower";
+        this.id = data.towerid;
+        this.getWeatherData(data);
+      }
+      //this.getAllData(data);
+    },
+    getWeatherData(data) {
+      this.childFlag = false;
+      console.log(data, this.qt);
+      this.loading = true;
+      getDataListJoggle({
+        act: "meteo",
+        qt: this.qt,
+        id: this.id,
+        p: this.page,
+        ps: this.pageSize,
+        latest: 1,
+      })
+        .then((res) => {
+          console.log(res);
+          this.tableData = res.data;
+          this.total = Number(res.page.totalRecords);
+          this.loading = false;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //点击分页
+    handleCurrentChange(val) {
+      this.page = val;
+      this.tableData = [];
+      this.getWeatherData(this.paramsData);
+    },
+    //每页条数
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.tableData = [];
+      this.getWeatherData(this.paramsData);
+    },
+    //点击查看更多历史数据
+    moreDataClick(row) {
+      this.childFlag = true;
+      console.log(row);
+      this.$set(
+        this.formdata,
+        "starttime",
+        new Date(new Date().toLocaleDateString()).getTime()
+      );
+      const currentDate = new Date(); // 获取当前时间
+      currentDate.setHours(23); // 设置小时为23
+      currentDate.setMinutes(59); // 设置分钟为59
+      currentDate.setSeconds(59); // 设置秒数为59
+      this.$set(this.formdata, "endtime", currentDate.getTime());
+      this.qt = "terminal";
+      this.id = row.termId;
+      this.childParma = row;
+      this.getchildWeatherData(row);
+    },
+
+    //查询时间
+    onSubmit() {
+      this.getchildWeatherData(this.childParma);
+    },
+    getchildWeatherData(row) {
+      this.loading = true;
+      this.childMsg = row;
+      const sTime = Math.floor(this.formdata.starttime / 1000);
+      const eTime = Math.floor(this.formdata.endtime / 1000);
+      getDataListJoggle({
+        act: "meteo",
+        qt: this.qt,
+        id: this.id,
+        bt: sTime,
+        et: eTime,
+        p: this.childpage,
+        ps: this.childpageSize,
+      })
+        .then((res) => {
+          console.log(res);
+          this.childTableDate = res.data;
+          this.childtotal = Number(res.page.totalRecords);
+          this.loading = false;
+          //获取温度折线图
+          this.getAllData(row);
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    getAllData(row) {
+      const sTime = Math.floor(this.formdata.starttime / 1000);
+      const eTime = Math.floor(this.formdata.endtime / 1000);
+      getDataListJoggle({
+        act: "meteo",
+        qt: this.qt,
+        id: this.id,
+        bt: sTime,
+        et: eTime,
+        p: this.childpage,
+        ps: 1000,
+      })
+        .then((res) => {
+          console.log(res);
+          this.echartsData = res.data;
+          //获取温度折线图
+          this.getEchart4(this.echartsData);
+          this.getEchart5(this.echartsData);
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    onWdLine() {
+      this.wdFlag = true;
+      this.sdFlag = false;
+    },
+    onSdLine() {
+      this.wdFlag = false;
+      this.sdFlag = true;
+    },
+    onHidden() {
+      this.wdFlag = false;
+      this.sdFlag = false;
+    },
+    //获取当天告警分类统计
+    getEchart4(wd) {
+      this.$nextTick(() => {
+        this.$echarts.init(document.getElementById("wDechart"));
+        this.mywDechart = this.$echarts.init(
+          document.getElementById("wDechart")
+        );
+        console.log(wd);
+        var xData = [];
+        var yData = [];
+        xData = wd.map((item) =>
+          this.$moment(item.updateTime * 1000).format("HH:mm:ss")
+        );
+        yData = wd.map((item) => item.temperature);
+        let option = {
+          tooltip: {
+            trigger: "axis",
+          },
+          grid: {
+            //left: "6%", //图表距离容器左侧多少距离
+            //right: "6%", //图表距离容器右侧侧多少距离
+            bottom: "6%", //图表距离容器上面多少距离
+            //top: "2%", //图表距离容器下面多少距离
+          },
+          title: {
+            text: "温度变化趋势",
+            x: "center", //设置标题位置居中
+            textStyle: {
+              //设置主标题的文字风格
+              color: "#333", //字体颜色
+              fontSize: 16, //文字大小
+              fontWeight: "normal",
+            },
+          },
+          toolbox: {
+            show: true,
+            feature: {
+              dataView: { readOnly: false },
+              magicType: { type: ["line", "bar"] },
+              restore: {},
+              saveAsImage: {},
+            },
+          },
+          xAxis: {
+            name: "时间", // 坐标轴名称
+            type: "category",
+            boundaryGap: false,
+            data: xData,
+          },
+          yAxis: {
+            name: "温度", // 坐标轴名称
+            type: "value",
+            axisLabel: {
+              formatter: "{value} °C",
+            },
+          },
+          series: [
+            {
+              name: "温度",
+              symbol: "none",
+              type: "line",
+              data: yData,
+            },
+          ],
+        };
+        this.mywDechart.setOption(option);
+        window.addEventListener("resize", () => {
+          this.mywDechart.resize();
+        });
+      });
+    },
+    getEchart5(sd) {
+      this.$nextTick(() => {
+        this.$echarts.init(document.getElementById("sDechart"));
+        this.mysDechart = this.$echarts.init(
+          document.getElementById("sDechart")
+        );
+        console.log(sd);
+        var xData = [];
+        var yData = [];
+        xData = sd.map((item) =>
+          this.$moment(item.updateTime * 1000).format("HH:mm:ss")
+        );
+        yData = sd.map((item) => item.humidity);
+        let option = {
+          tooltip: {
+            trigger: "axis",
+          },
+          grid: {
+            //left: "6%", //图表距离容器左侧多少距离
+            //right: "6%", //图表距离容器右侧侧多少距离
+            bottom: "6%", //图表距离容器上面多少距离
+            //top: "2%", //图表距离容器下面多少距离
+          },
+          title: {
+            text: "湿度变化趋势",
+            x: "center", //设置标题位置居中
+            textStyle: {
+              //设置主标题的文字风格
+              color: "#333", //字体颜色
+              fontSize: 16, //文字大小
+              fontWeight: "normal",
+            },
+          },
+          toolbox: {
+            show: true,
+            feature: {
+              dataView: { readOnly: false },
+              magicType: { type: ["line", "bar"] },
+              restore: {},
+              saveAsImage: {},
+            },
+          },
+          xAxis: {
+            name: "时间", // 坐标轴名称
+            type: "category",
+            boundaryGap: false,
+            data: xData,
+          },
+          yAxis: {
+            name: "湿度", // 坐标轴名称
+            type: "value",
+            axisLabel: {
+              formatter: "{value} %RH",
+            },
+          },
+          series: [
+            {
+              name: "湿度",
+              symbol: "none",
+              type: "line",
+              data: yData,
+            },
+          ],
+        };
+        this.mysDechart.setOption(option);
+        window.addEventListener("resize", () => {
+          this.mysDechart.resize();
+        });
+      });
+    },
+    changedate() {
+      console.log(new Date(this.formdata.endtime));
+      const currentDate = new Date(this.formdata.endtime); // 获取当前时间
+      currentDate.setHours(23); // 设置小时为23
+      currentDate.setMinutes(59); // 设置分钟为59
+      currentDate.setSeconds(59); // 设置秒数为59
+      this.formdata.endtime = currentDate;
+      console.log("结束时间", this.formdata.endtime);
+    },
+    //点击child分页
+    handlechildCurrentChange(val) {
+      this.childpage = val;
+      this.childTableDate = [];
+      this.getchildWeatherData(this.childParma);
+    },
+    //每页条数child分页
+    handlechildSizeChange(val) {
+      this.childpageSize = val;
+      this.childTableDate = [];
+      this.getchildWeatherData(this.childParma);
+    },
+  },
+};
+</script>
+<style lang="less">
+.weatherBox {
+  width: calc(100% - 24px);
+  height: calc(100% - 24px);
+  padding: 12px 12px;
+  background: #fff;
+
+  .weatherContain {
+    display: flex;
+    height: 100%;
+    box-sizing: border-box;
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+  }
+  .rightTable {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex: 1;
+    overflow: auto;
+    border-left: 1px solid #ddd;
+    .el-table .el-table__cell {
+      text-align: center;
+    }
+    .dataBox {
+      width: calc(100% - 24px);
+      height: calc(100% - 24px);
+      padding: 12px 12px;
+      background: #fff;
+    }
+    .fatherTableShowBox {
+      height: calc(100% - 0px);
+    }
+    .childBox {
+      height: 100%;
+      .echartsBox {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .btnbox {
+          display: flex;
+          margin-bottom: 8px;
+          .el-button--primary {
+            width: auto;
+          }
+        }
+        .chartClass {
+          height: 450px;
+          width: 800px;
+        }
+      }
+      .childTableShowBox {
+        h3 {
+          font-size: 16px;
+          font-weight: normal;
+          margin-bottom: 8px;
+          text-align: center;
+          color: #666;
+          margin-top: 16px;
+        }
+        height: calc(100% - 200px);
+      }
+      .termalBox {
+        h3 {
+          font-size: 16px;
+          font-weight: normal;
+          margin-bottom: 4px;
+          text-align: center;
+          color: #666;
+        }
+        .el-descriptions {
+          margin-bottom: 16px;
+          .el-descriptions-item__label.is-bordered-label {
+            color: #333;
+          }
+          .el-descriptions__body
+            .el-descriptions__table
+            .el-descriptions-item__cell {
+            text-align: center;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/lineInformation/components/addLineDialog.vue

@@ -154,7 +154,7 @@ export default {
   created() {
     getdyListJoggle().then((res) => {
       console.log(res);
-      this.dyOptions = res.data.list;
+      this.dyOptions = res.data;
       console.log(this.dyOptions);
     });
   },

src/views/lineInformation/index.vue

@@ -48,7 +48,7 @@
           </el-table-column>
 
           <el-table-column
-            prop="dyLevelname"
+            prop="dyLevelName"
             label="电压等级名称"
             show-overflow-tooltip
             min-width="120"
@@ -127,6 +127,7 @@ import { getLineListJoggle, deleteLineJoggle } from "@/utils/api/index";
 import addLineDialog from "./components/addLineDialog.vue";
 import addTowerDialog from "./components/addTowerDialog.vue";
 export default {
+  name: "lineInformation",
   components: {
     addLineDialog,
     addTowerDialog,
@@ -221,9 +222,7 @@ export default {
     //删除数据
     handleDelete(data) {
       let deleteArr = [];
-      deleteArr.push({
+      deleteArr.push(data.id);
-        id: data.id,
-      });
       this.$confirm("确定要删除记录吗,同时删除关联关系?", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
@@ -231,7 +230,22 @@ export default {
       })
         .then(() => {
           deleteLineJoggle({ list: deleteArr }).then((res) => {
-            this.lineList(); //刷新
+            if (res.code == 200) {
+              this.$message({
+                duration: 1500,
+                showClose: true,
+                type: "success",
+                message: "删除成功!",
+              });
+              this.lineList(); //刷新
+            } else {
+              this.$message({
+                duration: 1500,
+                showClose: true,
+                type: "error",
+                message: "删除失败!",
+              });
+            }
           });
           this.$message({
             duration: 1500,

src/views/login/index.vue

@@ -49,6 +49,7 @@ import { mapMutations } from "vuex";
 import { loginJoggle } from "@/utils/api/index";
 
 export default {
+  name: "login",
   components: {},
   data: function () {
     return {
@@ -78,7 +79,8 @@ export default {
           loginJoggle(this.userInfo)
             .then((res) => {
               if (res.code == 200) {
-                this.$store.commit("SET_TOKEN", res.data.sessionId); //将token保存在vuex中
+                console.log(res.data);
+                this.$store.commit("SET_TOKEN", res.data.token); //将token保存在vuex中
                 this.$store.commit("SET_USERINFO", res.data); //将用户信息保存在vuex中
                 this.$router.push("/stritl");
                 this.$message({

src/views/photographicDevice/components/addLineDialog.vue

@@ -127,7 +127,7 @@ export default {
   created() {
     getdyListJoggle().then((res) => {
       console.log(res);
-      this.dyOptions = res.data.list;
+      this.dyOptions = res.data;
       console.log(this.dyOptions);
     });
   },

src/views/photographicDevice/components/addPhotoDialog.vue

@@ -39,8 +39,18 @@
           </el-option>
         </el-select>
       </el-form-item>
-      <el-form-item label="装置ID：" prop="cmdId">
+      <el-form-item label="装置ID：" prop="cmdid">
-        <el-input v-model="formInfo.cmdId" autocomplete="on"></el-input>
+        <el-input v-model="formInfo.cmdid" autocomplete="on"></el-input>
+      </el-form-item>
+      <el-form-item label="装置类型：" prop="devType">
+        <el-select v-model="formInfo.devType" placeholder="请选择">
+          <el-option
+            v-for="item in devTypeOptions"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          ></el-option>
+        </el-select>
       </el-form-item>
       <el-form-item label="云台选择：" prop="hasPan">
         <el-select v-model="formInfo.hasPan" placeholder="请选择">
@@ -209,6 +219,21 @@ export default {
       filterOption: [], //筛选后的通道列表
       lineOptions: [], //线路
       toweridOptions: [], //杆塔
+      //装置类型
+      devTypeOptions: [
+        {
+          id: 1,
+          name: "微拍",
+        },
+        {
+          id: 2,
+          name: "覆冰拉力",
+        },
+        {
+          id: 3,
+          name: "微气象",
+        },
+      ],
       networkOptions: [
         {
           id: 1,
@@ -249,7 +274,7 @@ export default {
       ],
       protocolOptions: [], //规约版本
       rules: {
-        cmdId: [
+        cmdid: [
           { required: true, message: "请输入装置ID", trigger: "blur" },
           { validator: validCmid, trigger: "blur" },
         ],
@@ -281,13 +306,14 @@ export default {
         return (this.formInfo = {
           lineId: "",
           towerId: "",
-          cmdId: "",
+          cmdid: "",
           equipName: "",
+          devType: this.devTypeOptions[0].id,
           hasPan: this.hasPanOptions[0].id,
           sim: "",
           netType: this.networkOptions[0].id,
-          model: "",
+          model: "MSRDT-1-WP",
-          bsManufacturer: "",
+          bsManufacturer: "上海欣影",
           protocol: this.protocolOptions[0].id,
           workingDate: new Date().getTime(),
           list: [
@@ -373,7 +399,7 @@ export default {
             //   displayName: this.formInfo.cmdId,
             // };
             this.$set(this.formInfo, "workingDate", new Date().getTime());
-            this.$set(this.formInfo, "displayName", this.formInfo.cmdId);
+            this.$set(this.formInfo, "displayName", this.formInfo.cmdid);
             console.log(this.formInfo);
             addTerminalJoggle(this.formInfo)
               .then((res) => {
@@ -395,8 +421,10 @@ export default {
                 });
               });
           } else {
-            console.log(this.formInfo);
+            if (this.formInfo.list[0].id == "") {
-
+              this.$set(this.formInfo, "list", []);
+            }
+            console.log("修改aaaaaaaaaaaaaaa", this.formInfo);
             updateTerminalJoggle(this.formInfo)
               .then((res) => {
                 this.isShow = false;

src/views/photographicDevice/components/baseInfor.vue

@@ -1,16 +1,29 @@
 <template>
   <el-dialog
     class="baseInforDialog"
-    title="基本信息"
+    title="基本信息报"
     :visible.sync="isShow"
     :close-on-click-modal="false"
-    width="1280px"
+    width="1360px"
   >
+    <div class="zzinfo">
+      <span v-if="rowInfo.protocol == '65280'"> 国网I1 </span>
+      <span v-if="rowInfo.protocol == '65296'"> 陕西 </span>
+      <span v-if="rowInfo.protocol == '65281'"> 安徽 </span>
+      <span v-if="rowInfo.protocol == '65282'"> 江苏 </span>
+      <span v-if="rowInfo.protocol == '65283'"> 湖南 </span>
+      <span v-if="rowInfo.protocol == '65284'"> 浙江 </span>
+      <span v-if="rowInfo.protocol == '65285'"> 河南 </span>
+      <span v-if="rowInfo.protocol == '65286'"> 河南郑州 </span>
+      <span v-if="rowInfo.protocol == '65290'"> 河南统一视频v2020 </span>
+    </div>
     <el-form :inline="true" :model="formdata" class="demo-form-inline">
       <el-form-item label="开始日期">
         <el-date-picker
+          @change="changestartdate"
           v-model="formdata.starttime"
           type="datetime"
+          :picker-options="pickerOptions"
           placeholder="开始日期"
           value-format="timestamp"
         >
@@ -18,9 +31,10 @@
       </el-form-item>
       <el-form-item label="结束日期">
         <el-date-picker
+          @change="changeenddate"
           v-model="formdata.endtime"
           type="datetime"
-          default-time="23:59:59"
+          :picker-options="pickerOptions"
           placeholder="结束日期"
           value-format="timestamp"
           class="ml10"
@@ -29,7 +43,7 @@
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="onSubmit">查询</el-button>
-        <el-button type="primary">导出</el-button>
+        <el-button type="primary" @click="exportFault">导出</el-button>
       </el-form-item>
     </el-form>
     <el-table
@@ -38,6 +52,7 @@
       stripe
       tooltip-effect="dark"
       style="width: 100%"
+      height="442px"
       v-loading="loading"
     >
       <template slot="empty">
@@ -49,59 +64,49 @@
         </template>
       </el-table-column>
       <el-table-column
-        prop="name"
+        prop="cmdid"
-        label="采集时间"
+        label="装置编号"
-        min-width="120"
+        min-width="160"
-        show-overflow-tooltip
-      ></el-table-column>
-      <el-table-column
-        prop="name"
-        label="设备名称"
-        min-width="80"
-        show-overflow-tooltip
-      ></el-table-column>
-      <el-table-column
-        prop="name"
-        label="设备编号"
-        min-width="120"
         show-overflow-tooltip
       ></el-table-column>
+      <el-table-column prop="updateTimeStr" label="采集时间" min-width="140">
+      </el-table-column>
+
+      <el-table-column prop="equipName" label="装置名称" min-width="140">
+      </el-table-column>
+      <el-table-column prop="model" label="装置型号" show-overflow-tooltip>
+      </el-table-column>
       <el-table-column
-        prop="name"
+        prop="bsId"
-        label="装置名称"
+        label="出厂编号"
-        min-width="80"
         show-overflow-tooltip
       ></el-table-column>
       <el-table-column
-        prop="name"
+        prop="version"
-        label="装置型号"
+        label="基本信息版本号"
-        min-width="80"
         show-overflow-tooltip
       ></el-table-column>
       <el-table-column
-        prop="name"
+        prop="protocolVersion"
-        label="装置版本号"
+        label="通信协议版本号"
-        min-width="80"
         show-overflow-tooltip
       ></el-table-column>
-      <el-table-column
+      <!-- <el-table-column
-        prop="name"
+        prop="protocolVersion"
-        label="生产厂家"
+        label="规约版本号（V1.3）"
-        min-width="100"
         show-overflow-tooltip
-      ></el-table-column>
+      ></el-table-column> -->
+
+      <el-table-column prop="bsManu" label="生产厂家"> </el-table-column>
       <el-table-column
-        prop="name"
+        prop="productionDate"
         label="生产日期"
-        min-width="120"
         show-overflow-tooltip
-      ></el-table-column>
+      >
-      <el-table-column
+        <template slot-scope="scope">
-        prop="name"
+          {{ $moment(scope.row.productionDate).format("YYYY-MM-DD") }}
-        label="出厂编号"
+        </template>
-        min-width="100"
+      </el-table-column>
-        show-overflow-tooltip
-      ></el-table-column>
     </el-table>
     <div class="pageNation">
       <el-pagination
@@ -116,36 +121,97 @@
       </el-pagination>
     </div>
     <div slot="footer" class="dialog-footer">
-      <el-button @click="isShow = false">取 消</el-button>
+      <el-button @click="hide">取 消</el-button>
     </div>
   </el-dialog>
 </template>
 <script>
-import { getLineListJoggle } from "@/utils/api/index";
+import {
+  getTermBasicInfoHistoryApi,
+  getTermBasicInfoHistoryApiExcel,
+} from "@/utils/api/index";
 export default {
   data() {
     return {
       isShow: false,
       formdata: {},
-      listData: [
+      rowInfo: "",
-        {
+      listData: [],
-          name: "测试",
-        },
-        {
-          name: "测试2",
-        },
-      ],
       loading: false,
-      seltermid: "", //装置id
-      selcmdId: "", //cmdId
-      requestId: "",
       page: 1, // 当前页数
-      pageSize: 20, // 每页数量
+      pageSize: 10, // 每页数量
       total: 0, //总条数
+      pickerOptions: {
+        disabledDate(date) {
+          return date.getTime() > Date.now(); // 禁用大于今天的日期
+        },
+      },
     };
   },
+  watch: {
+    endtime(newVal) {
+      if (newVal) {
+        const date = new Date(newVal);
+        date.setHours(23);
+        date.setMinutes(59);
+        date.setSeconds(59);
+        this.formdata.endtime = date;
+      }
+    },
+  },
+  created() {},
   mounted() {},
   methods: {
+    getTime() {
+      const thirtyDaysAgo = new Date();
+      thirtyDaysAgo.setHours(0); // 设置小时为23
+      thirtyDaysAgo.setMinutes(0); // 设置分钟为59
+      thirtyDaysAgo.setSeconds(0); // 设置秒数为59
+      console.log(
+        new Date(thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30))
+      );
+      const startTimeNew = new Date(
+        thirtyDaysAgo.setDate(thirtyDaysAgo.getDate())
+      ).getTime();
+      this.$set(this.formdata, "starttime", startTimeNew);
+      console.log("开始时间", this.formdata.starttime);
+      const currentDate = new Date(); // 获取当前时间
+      currentDate.setHours(23); // 设置小时为23
+      currentDate.setMinutes(59); // 设置分钟为59
+      currentDate.setSeconds(59); // 设置秒数为59
+      this.$set(this.formdata, "endtime", currentDate.getTime());
+      console.log("结束时间", this.formdata.endtime);
+      this.getfaultinfo();
+    },
+    changestartdate(val) {
+      console.log(val);
+      if (val == null) {
+        console.log(new Date());
+        const startDate = new Date();
+        startDate.setHours(0); // 设置小时为23
+        startDate.setMinutes(0); // 设置分钟为59
+        startDate.setSeconds(0); // 设置秒数为59
+        this.formdata.starttime = startDate;
+        console.log(this.formdata.starttime);
+      } else {
+        this.formdata.starttime = val;
+      }
+    },
+    //结束日期
+    changeenddate(val) {
+      if (val == null) {
+        console.log(new Date());
+        const endDate = new Date();
+        endDate.setHours(23); // 设置小时为23
+        endDate.setMinutes(59); // 设置分钟为59
+        endDate.setSeconds(59); // 设置秒数为59
+        this.formdata.endtime = endDate;
+        console.log(this.formdata.endtime);
+      } else {
+        this.formdata.endtime = val;
+        console.log(val);
+      }
+    },
     //查询
     onSubmit() {
       if (this.formdata.starttime > this.formdata.endtime) {
@@ -156,45 +222,60 @@ export default {
           type: "warning",
         });
       }
-      this.getlistnr();
+      this.getfaultinfo();
+    },
+    //导出
+    exportFault() {
+      window.location.href =
+        "/api/getTermBasicInfoHistoryApiExcel?termid=" + this.rowInfo.id;
     },
     //获取数据
-    getlistnr(val) {
+    getfaultinfo() {
-      console.log(val);
-      this.seltermid = val.id;
-      this.selcmdId = val.cmdid;
       this.loading = true;
-      getLineListJoggle({
+      getTermBasicInfoHistoryApi({
+        termid: this.rowInfo.id,
+        // starttime: this.formdata.starttime,
+        // endtime: this.formdata.endtime,
         pageindex: this.page,
         pagesize: this.pageSize,
       }).then((res) => {
         this.listData = res.data.list;
         this.total = res.data.total;
-        this.loading = false;
+        this.$nextTick(() => {
+          this.loading = false;
+        });
       });
     },
     //点击分页
     handleCurrentChange(val) {
       this.page = val;
-      this.getlistnr();
+      this.getfaultinfo();
     },
     //每页条数
     handleSizeChange(val) {
       this.pageSize = val;
-      this.getlistnr();
+      this.getfaultinfo();
     },
-    display() {
+    display(row) {
+      console.log(row);
+      this.rowInfo = row;
       this.isShow = true;
+      this.getTime();
     },
     hide() {
       this.isShow = false;
+      this.formdata = {};
     },
   },
 };
 </script>
-<<<<<<< HEAD
 <style lang="less">
 .baseInforDialog {
+  .zzinfo {
+    position: absolute;
+    top: 22px;
+    left: 126px;
+  }
   .pageNation {
     justify-content: flex-start;
     margin-top: 16px;
@@ -207,6 +288,3 @@ export default {
   }
 }
 </style>
-=======
-<style lang="less" scoped></style>
->>>>>>> hn1.0

src/views/photographicDevice/components/faultInfomation.vue

@@ -0,0 +1,263 @@
+<template>
+  <el-dialog
+    class="faultInfo"
+    title="故障信息报"
+    :visible.sync="isShow"
+    :close-on-click-modal="false"
+    width="1000px"
+  >
+    <div class="zzinfo">
+      <span v-if="rowInfo.protocol == '65280'"> 国网I1 </span>
+      <span v-if="rowInfo.protocol == '65296'"> 陕西 </span>
+      <span v-if="rowInfo.protocol == '65281'"> 安徽 </span>
+      <span v-if="rowInfo.protocol == '65282'"> 江苏 </span>
+      <span v-if="rowInfo.protocol == '65283'"> 湖南 </span>
+      <span v-if="rowInfo.protocol == '65284'"> 浙江 </span>
+      <span v-if="rowInfo.protocol == '65285'"> 河南 </span>
+      <span v-if="rowInfo.protocol == '65286'"> 河南郑州 </span>
+      <span v-if="rowInfo.protocol == '65290'"> 河南统一视频v2020 </span>
+    </div>
+    <el-form :inline="true" :model="formdata" class="demo-form-inline">
+      <el-form-item label="开始日期">
+        <el-date-picker
+          @change="changestartdate"
+          v-model="formdata.starttime"
+          type="datetime"
+          :picker-options="pickerOptions"
+          placeholder="开始日期"
+          value-format="timestamp"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="结束日期">
+        <el-date-picker
+          @change="changeenddate"
+          v-model="formdata.endtime"
+          type="datetime"
+          :picker-options="pickerOptions"
+          placeholder="结束日期"
+          value-format="timestamp"
+          class="ml10"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">查询</el-button>
+        <el-button type="primary" @click="exportFault">导出</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+      ref="multipleTable"
+      :data="listData"
+      stripe
+      tooltip-effect="dark"
+      style="width: 100%"
+      height="442px"
+      v-loading="loading"
+    >
+      <template slot="empty">
+        <el-empty :image-size="160" description="暂无数据"></el-empty>
+      </template>
+      <el-table-column min-width="45" label="序号">
+        <template slot-scope="scope">
+          <span>{{ (page - 1) * pageSize + scope.$index + 1 }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="cmdid"
+        label="装置编号"
+        min-width="120"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        prop="faultTime"
+        label="采集时间"
+        min-width="120"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        prop="msg"
+        label="故障信息"
+        min-width="120"
+        show-overflow-tooltip
+      ></el-table-column>
+    </el-table>
+    <div class="pageNation">
+      <el-pagination
+        @current-change="handleCurrentChange"
+        @size-change="handleSizeChange"
+        :current-page="page"
+        :page-size="pageSize"
+        layout="sizes, prev, pager, next, jumper,total"
+        :total="total"
+        background
+      >
+      </el-pagination>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="hide">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { getTermFaultsApi, getTermFaultsExcel } from "@/utils/api/index";
+export default {
+  data() {
+    return {
+      isShow: false,
+      formdata: {},
+      rowInfo: "",
+      listData: [],
+      loading: false,
+      page: 1, // 当前页数
+      pageSize: 10, // 每页数量
+      total: 0, //总条数
+      pickerOptions: {
+        disabledDate(date) {
+          return date.getTime() > Date.now(); // 禁用大于今天的日期
+        },
+      },
+    };
+  },
+  watch: {
+    endtime(newVal) {
+      if (newVal) {
+        const date = new Date(newVal);
+        date.setHours(23);
+        date.setMinutes(59);
+        date.setSeconds(59);
+        this.formdata.endtime = date;
+      }
+    },
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    getTime() {
+      const thirtyDaysAgo = new Date();
+      thirtyDaysAgo.setHours(0); // 设置小时为23
+      thirtyDaysAgo.setMinutes(0); // 设置分钟为59
+      thirtyDaysAgo.setSeconds(0); // 设置秒数为59
+      console.log(
+        new Date(thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30))
+      );
+
+      const startTimeNew = new Date(
+        thirtyDaysAgo.setDate(thirtyDaysAgo.getDate())
+      ).getTime();
+      this.$set(this.formdata, "starttime", startTimeNew);
+      console.log("开始时间", this.formdata.starttime);
+      const currentDate = new Date(); // 获取当前时间
+      currentDate.setHours(23); // 设置小时为23
+      currentDate.setMinutes(59); // 设置分钟为59
+      currentDate.setSeconds(59); // 设置秒数为59
+      this.$set(this.formdata, "endtime", currentDate.getTime());
+      console.log("结束时间", this.formdata.endtime);
+
+      this.getfaultinfo();
+    },
+    changestartdate(val) {
+      console.log(val);
+      if (val == null) {
+        console.log(new Date());
+        const startDate = new Date();
+        startDate.setHours(0); // 设置小时为23
+        startDate.setMinutes(0); // 设置分钟为59
+        startDate.setSeconds(0); // 设置秒数为59
+        this.formdata.starttime = startDate;
+        console.log(this.formdata.starttime);
+      } else {
+        this.formdata.starttime = val;
+      }
+    },
+    //结束日期
+    changeenddate(val) {
+      if (val == null) {
+        console.log(new Date());
+        const endDate = new Date();
+        endDate.setHours(23); // 设置小时为23
+        endDate.setMinutes(59); // 设置分钟为59
+        endDate.setSeconds(59); // 设置秒数为59
+        this.formdata.endtime = endDate;
+        console.log(this.formdata.endtime);
+      } else {
+        this.formdata.endtime = val;
+        console.log(val);
+      }
+    },
+    //查询
+    onSubmit() {
+      if (this.formdata.starttime > this.formdata.endtime) {
+        return this.$message({
+          duration: 1500,
+          showClose: true,
+          message: "开始日期不能大于结束日期",
+          type: "warning",
+        });
+      }
+      this.getfaultinfo();
+    },
+    //导出
+    exportFault() {
+      window.location.href =
+        "/api/getTermFaultsExcel?termid=" + this.rowInfo.id;
+    },
+    //获取数据
+    getfaultinfo() {
+      this.loading = true;
+      getTermFaultsApi({
+        termid: this.rowInfo.id,
+        starttime: this.formdata.starttime,
+        endtime: this.formdata.endtime,
+        pageindex: this.page,
+        pagesize: this.pageSize,
+      }).then((res) => {
+        this.listData = res.data.list;
+        this.total = res.data.total;
+        this.$nextTick(() => {
+          this.loading = false;
+        });
+      });
+    },
+    //点击分页
+    handleCurrentChange(val) {
+      this.page = val;
+      this.getfaultinfo();
+    },
+    //每页条数
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.getfaultinfo();
+    },
+    display(row) {
+      console.log(row);
+      this.rowInfo = row;
+      this.isShow = true;
+      this.getTime();
+    },
+    hide() {
+      this.isShow = false;
+      this.formdata = {};
+    },
+  },
+};
+</script>
+<style lang="less">
+.faultInfo {
+  .zzinfo {
+    position: absolute;
+    top: 22px;
+    left: 126px;
+  }
+  .pageNation {
+    justify-content: flex-start;
+    margin-top: 16px;
+    .el-pagination {
+      padding: 0px;
+      .el-select .el-input {
+        margin-left: 0px;
+      }
+    }
+  }
+}
+</style>

src/views/photographicDevice/components/gpsPosition.vue

@@ -7,17 +7,6 @@
     width="662px"
     @close="handleclose"
   >
-    <!-- <div class="gpsbox" v-loading="loading">
-      <p>
-        <span>经度：</span><span>{{ infornr.longitude }}</span>
-      </p>
-      <p>
-        <span>纬度：</span><span>{{ infornr.latitude }}</span>
-      </p>
-      <p>
-        <span>半径：</span><span>{{ infornr.radius }}</span>
-      </p>
-    </div> -->
     <div class="gpsbox" v-loading="loading">
       <el-descriptions :column="1" border>
         <el-descriptions-item>

src/views/photographicDevice/components/gpsSite.vue

@@ -4,13 +4,26 @@
     title="GPS位置数据"
     :visible.sync="isShow"
     :close-on-click-modal="false"
-    width="1280px"
+    width="1000px"
   >
+    <div class="zzinfo">
+      <span v-if="rowInfo.protocol == '65280'"> 国网I1 </span>
+      <span v-if="rowInfo.protocol == '65296'"> 陕西 </span>
+      <span v-if="rowInfo.protocol == '65281'"> 安徽 </span>
+      <span v-if="rowInfo.protocol == '65282'"> 江苏 </span>
+      <span v-if="rowInfo.protocol == '65283'"> 湖南 </span>
+      <span v-if="rowInfo.protocol == '65284'"> 浙江 </span>
+      <span v-if="rowInfo.protocol == '65285'"> 河南 </span>
+      <span v-if="rowInfo.protocol == '65286'"> 河南郑州 </span>
+      <span v-if="rowInfo.protocol == '65290'"> 河南统一视频v2020 </span>
+    </div>
     <el-form :inline="true" :model="formdata" class="demo-form-inline">
       <el-form-item label="开始日期">
         <el-date-picker
+          @change="changestartdate"
           v-model="formdata.starttime"
           type="datetime"
+          :picker-options="pickerOptions"
           placeholder="开始日期"
           value-format="timestamp"
         >
@@ -18,9 +31,10 @@
       </el-form-item>
       <el-form-item label="结束日期">
         <el-date-picker
+          @change="changeenddate"
           v-model="formdata.endtime"
           type="datetime"
-          default-time="23:59:59"
+          :picker-options="pickerOptions"
           placeholder="结束日期"
           value-format="timestamp"
           class="ml10"
@@ -29,7 +43,7 @@
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="onSubmit">查询</el-button>
-        <el-button type="primary">导出</el-button>
+        <el-button type="primary" @click="exportFault">导出</el-button>
       </el-form-item>
     </el-form>
     <el-table
@@ -39,6 +53,7 @@
       tooltip-effect="dark"
       style="width: 100%"
       v-loading="loading"
+      height="442px"
     >
       <template slot="empty">
         <el-empty :image-size="160" description="暂无数据"></el-empty>
@@ -49,39 +64,29 @@
         </template>
       </el-table-column>
       <el-table-column
-        prop="name"
+        prop="cmdid"
-        label="采集时间"
+        label="装置编号"
-        min-width="120"
-        show-overflow-tooltip
-      ></el-table-column>
-      <el-table-column
-        prop="name"
-        label="设备名称"
-        min-width="80"
         show-overflow-tooltip
       ></el-table-column>
       <el-table-column
-        prop="name"
+        prop="updateTimeStr"
-        label="设备编号"
+        label="采集时间"
-        min-width="120"
         show-overflow-tooltip
       ></el-table-column>
+
       <el-table-column
-        prop="name"
+        prop="radius"
         label="半径"
-        min-width="80"
         show-overflow-tooltip
       ></el-table-column>
       <el-table-column
-        prop="name"
+        prop="latitude"
-        label="维度"
+        label="纬度"
-        min-width="80"
         show-overflow-tooltip
       ></el-table-column>
       <el-table-column
-        prop="name"
+        prop="longitude"
         label="经度"
-        min-width="80"
         show-overflow-tooltip
       ></el-table-column>
     </el-table>
@@ -98,36 +103,99 @@
       </el-pagination>
     </div>
     <div slot="footer" class="dialog-footer">
-      <el-button @click="isShow = false">取 消</el-button>
+      <el-button @click="hide">取 消</el-button>
     </div>
   </el-dialog>
 </template>
 <script>
-import { getLineListJoggle } from "@/utils/api/index";
+import {
+  getTermGpsHistoryApi,
+  getTermGpsHistoryExcel,
+} from "@/utils/api/index";
 export default {
   data() {
     return {
       isShow: false,
       formdata: {},
-      listData: [
+      rowInfo: "",
-        {
+      listData: [],
-          name: "测试",
-        },
-        {
-          name: "测试2",
-        },
-      ],
       loading: false,
-      seltermid: "", //装置id
-      selcmdId: "", //cmdId
-      requestId: "",
       page: 1, // 当前页数
-      pageSize: 20, // 每页数量
+      pageSize: 10, // 每页数量
       total: 0, //总条数
+      pickerOptions: {
+        disabledDate(date) {
+          return date.getTime() > Date.now(); // 禁用大于今天的日期
+        },
+      },
     };
   },
+  watch: {
+    endtime(newVal) {
+      if (newVal) {
+        const date = new Date(newVal);
+        date.setHours(23);
+        date.setMinutes(59);
+        date.setSeconds(59);
+        this.formdata.endtime = date;
+      }
+    },
+  },
+  created() {},
   mounted() {},
   methods: {
+    getTime() {
+      const thirtyDaysAgo = new Date();
+      thirtyDaysAgo.setHours(0); // 设置小时为23
+      thirtyDaysAgo.setMinutes(0); // 设置分钟为59
+      thirtyDaysAgo.setSeconds(0); // 设置秒数为59
+      console.log(
+        new Date(thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30))
+      );
+
+      const startTimeNew = new Date(
+        thirtyDaysAgo.setDate(thirtyDaysAgo.getDate())
+      ).getTime();
+      this.$set(this.formdata, "starttime", startTimeNew);
+      console.log("开始时间", this.formdata.starttime);
+      const currentDate = new Date(); // 获取当前时间
+      currentDate.setHours(23); // 设置小时为23
+      currentDate.setMinutes(59); // 设置分钟为59
+      currentDate.setSeconds(59); // 设置秒数为59
+      this.$set(this.formdata, "endtime", currentDate.getTime());
+      console.log("结束时间", this.formdata.endtime);
+
+      this.getfaultinfo();
+    },
+    changestartdate(val) {
+      console.log(val);
+      if (val == null) {
+        console.log(new Date());
+        const startDate = new Date();
+        startDate.setHours(0); // 设置小时为23
+        startDate.setMinutes(0); // 设置分钟为59
+        startDate.setSeconds(0); // 设置秒数为59
+        this.formdata.starttime = startDate;
+        console.log(this.formdata.starttime);
+      } else {
+        this.formdata.starttime = val;
+      }
+    },
+    //结束日期
+    changeenddate(val) {
+      if (val == null) {
+        console.log(new Date());
+        const endDate = new Date();
+        endDate.setHours(23); // 设置小时为23
+        endDate.setMinutes(59); // 设置分钟为59
+        endDate.setSeconds(59); // 设置秒数为59
+        this.formdata.endtime = endDate;
+        console.log(this.formdata.endtime);
+      } else {
+        this.formdata.endtime = val;
+        console.log(val);
+      }
+    },
     //查询
     onSubmit() {
       if (this.formdata.starttime > this.formdata.endtime) {
@@ -138,45 +206,60 @@ export default {
           type: "warning",
         });
       }
-      this.getlistnr();
+      this.getfaultinfo();
+    },
+    //导出
+    exportFault() {
+      window.location.href =
+        "/api/getTermGpsHistoryExcel?termid=" + this.rowInfo.id;
     },
     //获取数据
-    getlistnr(val) {
+    getfaultinfo() {
-      console.log(val);
-      this.seltermid = val.id;
-      this.selcmdId = val.cmdid;
       this.loading = true;
-      getLineListJoggle({
+      getTermGpsHistoryApi({
+        termid: this.rowInfo.id,
+        // starttime: this.formdata.starttime,
+        // endtime: this.formdata.endtime,
         pageindex: this.page,
         pagesize: this.pageSize,
       }).then((res) => {
         this.listData = res.data.list;
         this.total = res.data.total;
-        this.loading = false;
+        this.$nextTick(() => {
+          this.loading = false;
+        });
       });
     },
     //点击分页
     handleCurrentChange(val) {
       this.page = val;
-      this.getlistnr();
+      this.getfaultinfo();
     },
     //每页条数
     handleSizeChange(val) {
       this.pageSize = val;
-      this.getlistnr();
+      this.getfaultinfo();
     },
-    display() {
+    display(row) {
+      console.log(row);
+      this.rowInfo = row;
       this.isShow = true;
+      this.getTime();
     },
     hide() {
       this.isShow = false;
+      this.formdata = {};
     },
   },
 };
 </script>
-<<<<<<< HEAD
 <style lang="less">
 .gpsSiteDialog {
+  .zzinfo {
+    position: absolute;
+    top: 22px;
+    left: 126px;
+  }
   .pageNation {
     justify-content: flex-start;
     margin-top: 16px;
@@ -189,6 +272,3 @@ export default {
   }
 }
 </style>
-=======
-<style lang="less" scoped></style>
->>>>>>> hn1.0

src/views/photographicDevice/components/imageCapture.vue

@@ -90,6 +90,9 @@
           @click="imageSearch()"
           >查询</el-button
         >
+        <p class="looktime" v-if="lookTime && showLookTime">
+          {{ $moment(lookTime).format("YYYY-MM-DD HH:mm:ss") }}
+        </p>
         <!-- <el-button
           class="searchImage"
           :loading="searchloading"
@@ -744,6 +747,8 @@ export default {
       timer: null,
       i: 0,
       onlinestatus: "",
+      lookTime: "",
+      showLookTime: false,
     };
   },
   mounted() {},
@@ -751,6 +756,7 @@ export default {
     handleClick(tab, event) {
       console.log(tab, event);
       this.capturenr = {};
+      this.lookTime = "";
     },
     //获取设备通道
     getSingleAccess(val) {
@@ -799,7 +805,7 @@ export default {
       }
 
       if (val.protocol == 65281) {
-        this.$set(this.setForm, "resolution", this.ratiolist[12].id);
+        this.$set(this.setForm, "resolution", this.ratiolist[5].id);
         this.$set(this.setForm, "luminance", 50);
         this.$set(this.setForm, "contrast", 50);
         this.$set(this.setForm, "saturation", 50);
@@ -830,6 +836,10 @@ export default {
             name: "flag",
             value: 0,
           },
+          {
+            name: "rf",
+            value: 255,
+          },
           {
             name: "channel",
             value: this.selaccess,
@@ -879,6 +889,10 @@ export default {
             name: "flag",
             value: 1,
           },
+          {
+            name: "rf",
+            value: 255,
+          },
           {
             name: "channel",
             value: this.setForm.channelId,
@@ -922,6 +936,7 @@ export default {
         .then((res) => {
           console.log(res);
           this.requestid = res.data.requestId;
+          this.lookTime = res.data.date;
           //this.getinfo1();
           clearInterval(this.timer);
           this.timer = window.setInterval(() => {
@@ -950,6 +965,7 @@ export default {
               message: "信息已更新",
               type: "success",
             });
+            this.showLookTime = true;
           } else if (this.i > 9) {
             window.clearInterval(this.timer);
             this.timer = null;
@@ -977,6 +993,8 @@ export default {
       this.setForm = {};
       this.searchloading = false;
       this.setloading = false;
+      this.lookTime = "";
+      this.showLookTime = false;
     },
   },
 };
@@ -1008,6 +1026,10 @@ export default {
   .searchImage {
     margin-left: 110px;
   }
+  .looktime {
+    margin-top: 6px;
+    margin-left: 110px;
+  }
   .flexno {
     display: flex;
     height: 32px;

src/views/photographicDevice/components/pictureTags.vue

@@ -46,7 +46,7 @@
               <el-option
                 v-for="item in picoptions"
                 :key="item.id"
-                :label="item.name"
+                :label="item.channelName"
                 :value="item.id"
               >
               </el-option>
@@ -147,8 +147,9 @@ export default {
       this.isShow = true;
       this.pictureData = val; //获取当前列表数据
       this.picoptions = val.list; //获取所有通道
+      console.log("asdasdadadad", this.picoptions);
       this.channelId = val.list[0].id;
-      this.picvalue = val.list[0].name; //获取第一个通道
+      this.picvalue = val.list[0].channelName; //获取第一个通道
       this.termId = val.id; //装置id
       this.getcanvansPic(val, this.channelId);
     },
@@ -169,7 +170,8 @@ export default {
         .then((res) => {
           console.log(res);
           this.markId = res.data.markId;
-
+          this.color = res.data.color !== null ? res.data.color : "#f00";
+          this.num = res.data.boderWidth !== null ? res.data.boderWidth : 2;
           if (res.data.path !== null) {
             this.picsrc = res.data.path;
             if (res.data.list.length !== 0) {

src/views/photographicDevice/components/runStatus.vue

@@ -1,16 +1,29 @@
 <template>
   <el-dialog
     class="runStatusDialog"
-    title="装置运行状态"
+    title="运行状态报"
     :visible.sync="isShow"
     :close-on-click-modal="false"
-    width="1280px"
+    width="1360px"
   >
+    <div class="zzinfo">
+      <span v-if="rowInfo.protocol == '65280'"> 国网I1 </span>
+      <span v-if="rowInfo.protocol == '65296'"> 陕西 </span>
+      <span v-if="rowInfo.protocol == '65281'"> 安徽 </span>
+      <span v-if="rowInfo.protocol == '65282'"> 江苏 </span>
+      <span v-if="rowInfo.protocol == '65283'"> 湖南 </span>
+      <span v-if="rowInfo.protocol == '65284'"> 浙江 </span>
+      <span v-if="rowInfo.protocol == '65285'"> 河南 </span>
+      <span v-if="rowInfo.protocol == '65286'"> 河南郑州 </span>
+      <span v-if="rowInfo.protocol == '65290'"> 河南统一视频v2020 </span>
+    </div>
     <el-form :inline="true" :model="formdata" class="demo-form-inline">
       <el-form-item label="开始日期">
         <el-date-picker
+          @change="changestartdate"
           v-model="formdata.starttime"
           type="datetime"
+          :picker-options="pickerOptions"
           placeholder="开始日期"
           value-format="timestamp"
         >
@@ -18,9 +31,10 @@
       </el-form-item>
       <el-form-item label="结束日期">
         <el-date-picker
+          @change="changeenddate"
           v-model="formdata.endtime"
           type="datetime"
-          default-time="23:59:59"
+          :picker-options="pickerOptions"
           placeholder="结束日期"
           value-format="timestamp"
           class="ml10"
@@ -29,7 +43,7 @@
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="onSubmit">查询</el-button>
-        <el-button type="primary">导出</el-button>
+        <el-button type="primary" @click="exportFault">导出</el-button>
       </el-form-item>
     </el-form>
     <el-table
@@ -38,6 +52,7 @@
       stripe
       tooltip-effect="dark"
       style="width: 100%"
+      height="442px"
       v-loading="loading"
     >
       <template slot="empty">
@@ -49,45 +64,36 @@
         </template>
       </el-table-column>
       <el-table-column
-        prop="name"
+        prop="cmdid"
-        label="采集时间"
+        label="装置编号"
-        min-width="120"
+        min-width="160"
         show-overflow-tooltip
       ></el-table-column>
       <el-table-column
-        prop="name"
+        prop="rsUpdateTimeStr"
-        label="设备名称"
+        label="装置上次启动时间"
-        min-width="80"
+        min-width="140"
-        show-overflow-tooltip
+      >
-      ></el-table-column>
+      </el-table-column>
       <el-table-column
-        prop="name"
+        prop="signalStrength2g"
-        label="设备编号"
+        label="2G信号强度"
-        min-width="120"
         show-overflow-tooltip
       ></el-table-column>
       <el-table-column
-        prop="name"
+        prop="signalStrength4g"
         label="4G信号强度"
-        min-width="80"
         show-overflow-tooltip
       ></el-table-column>
+
       <el-table-column
-        prop="name"
+        prop="remainingRam"
-        label="2G信号强度"
+        label="剩余运行内存（M）"
-        min-width="80"
         show-overflow-tooltip
       ></el-table-column>
       <el-table-column
-        prop="name"
+        prop="remainingRom"
-        label="剩余运行内存"
+        label="剩余存储内存（M）"
-        min-width="80"
-        show-overflow-tooltip
-      ></el-table-column>
-      <el-table-column
-        prop="name"
-        label="剩余存储内存"
-        min-width="100"
         show-overflow-tooltip
       ></el-table-column>
     </el-table>
@@ -104,36 +110,97 @@
       </el-pagination>
     </div>
     <div slot="footer" class="dialog-footer">
-      <el-button @click="isShow = false">取 消</el-button>
+      <el-button @click="hide">取 消</el-button>
     </div>
   </el-dialog>
 </template>
 <script>
-import { getLineListJoggle } from "@/utils/api/index";
+import {
+  getTermRunningHistoryApi,
+  getTermRunningHistoryExcel,
+} from "@/utils/api/index";
 export default {
   data() {
     return {
       isShow: false,
       formdata: {},
-      listData: [
+      rowInfo: "",
-        {
+      listData: [],
-          name: "测试",
-        },
-        {
-          name: "测试2",
-        },
-      ],
       loading: false,
-      seltermid: "", //装置id
-      selcmdId: "", //cmdId
-      requestId: "",
       page: 1, // 当前页数
-      pageSize: 20, // 每页数量
+      pageSize: 10, // 每页数量
       total: 0, //总条数
+      pickerOptions: {
+        disabledDate(date) {
+          return date.getTime() > Date.now(); // 禁用大于今天的日期
+        },
+      },
     };
   },
+  watch: {
+    endtime(newVal) {
+      if (newVal) {
+        const date = new Date(newVal);
+        date.setHours(23);
+        date.setMinutes(59);
+        date.setSeconds(59);
+        this.formdata.endtime = date;
+      }
+    },
+  },
+  created() {},
   mounted() {},
   methods: {
+    getTime() {
+      const thirtyDaysAgo = new Date();
+      thirtyDaysAgo.setHours(0); // 设置小时为23
+      thirtyDaysAgo.setMinutes(0); // 设置分钟为59
+      thirtyDaysAgo.setSeconds(0); // 设置秒数为59
+      console.log(
+        new Date(thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30))
+      );
+      const startTimeNew = new Date(
+        thirtyDaysAgo.setDate(thirtyDaysAgo.getDate())
+      ).getTime();
+      this.$set(this.formdata, "starttime", startTimeNew);
+      console.log("开始时间", this.formdata.starttime);
+      const currentDate = new Date(); // 获取当前时间
+      currentDate.setHours(23); // 设置小时为23
+      currentDate.setMinutes(59); // 设置分钟为59
+      currentDate.setSeconds(59); // 设置秒数为59
+      this.$set(this.formdata, "endtime", currentDate.getTime());
+      console.log("结束时间", this.formdata.endtime);
+      this.getfaultinfo();
+    },
+    changestartdate(val) {
+      console.log(val);
+      if (val == null) {
+        console.log(new Date());
+        const startDate = new Date();
+        startDate.setHours(0); // 设置小时为23
+        startDate.setMinutes(0); // 设置分钟为59
+        startDate.setSeconds(0); // 设置秒数为59
+        this.formdata.starttime = startDate;
+        console.log(this.formdata.starttime);
+      } else {
+        this.formdata.starttime = val;
+      }
+    },
+    //结束日期
+    changeenddate(val) {
+      if (val == null) {
+        console.log(new Date());
+        const endDate = new Date();
+        endDate.setHours(23); // 设置小时为23
+        endDate.setMinutes(59); // 设置分钟为59
+        endDate.setSeconds(59); // 设置秒数为59
+        this.formdata.endtime = endDate;
+        console.log(this.formdata.endtime);
+      } else {
+        this.formdata.endtime = val;
+        console.log(val);
+      }
+    },
     //查询
     onSubmit() {
       if (this.formdata.starttime > this.formdata.endtime) {
@@ -144,44 +211,60 @@ export default {
           type: "warning",
         });
       }
-      this.getlistnr();
+      this.getfaultinfo();
+    },
+    //导出
+    exportFault() {
+      window.location.href =
+        "/api/getTermRunningHistoryExcel?termid=" + this.rowInfo.id;
     },
     //获取数据
-    getlistnr(val) {
+    getfaultinfo() {
-      console.log(val);
-      this.seltermid = val.id;
-      this.selcmdId = val.cmdid;
       this.loading = true;
-      getLineListJoggle({
+      getTermRunningHistoryApi({
+        termid: this.rowInfo.id,
+        // starttime: this.formdata.starttime,
+        // endtime: this.formdata.endtime,
         pageindex: this.page,
         pagesize: this.pageSize,
       }).then((res) => {
         this.listData = res.data.list;
         this.total = res.data.total;
-        this.loading = false;
+        this.$nextTick(() => {
+          this.loading = false;
+        });
       });
     },
     //点击分页
     handleCurrentChange(val) {
       this.page = val;
-      this.getlistnr();
+      this.getfaultinfo();
     },
     //每页条数
     handleSizeChange(val) {
       this.pageSize = val;
-      this.getlistnr();
+      this.getfaultinfo();
     },
-    display() {
+    display(row) {
+      console.log(row);
+      this.rowInfo = row;
       this.isShow = true;
+      this.getTime();
     },
     hide() {
       this.isShow = false;
+      this.formdata = {};
     },
   },
 };
 </script>
 <style lang="less">
 .runStatusDialog {
+  .zzinfo {
+    position: absolute;
+    top: 22px;
+    left: 126px;
+  }
   .pageNation {
     justify-content: flex-start;
     margin-top: 16px;

src/views/photographicDevice/components/videoCapture.vue

@@ -81,6 +81,9 @@
           @click="videoSearch()"
           >查询</el-button
         >
+        <p class="looktime" v-if="lookTime && showLookTime">
+          {{ $moment(lookTime).format("YYYY-MM-DD HH:mm:ss") }}
+        </p>
       </div>
     </el-tab-pane>
     <el-tab-pane label="设置参数" name="2">
@@ -203,6 +206,32 @@ export default {
           name: "VGA",
         },
       ], //分辨率
+      zzratiolist: [
+        {
+          id: 1,
+          name: "QVGA",
+        },
+        {
+          id: 2,
+          name: "VGA",
+        },
+        {
+          id: 3,
+          name: "480p;",
+        },
+        {
+          id: 4,
+          name: "720P",
+        },
+        {
+          id: 5,
+          name: "1080P",
+        },
+        {
+          id: 6,
+          name: "其它",
+        },
+      ], //分辨率
       selaccess: "", //选中的通道
       capturenr: {}, //查询后的内容
       setForm: {
@@ -224,6 +253,8 @@ export default {
       selcmdId: "", //cmdId
       requestId: "",
       onlinestatus: "",
+      lookTime: "",
+      showLookTime: false,
     };
   },
   mounted() {},
@@ -231,6 +262,7 @@ export default {
     handleClick(tab, event) {
       console.log(tab, event);
       this.capturenr = {};
+      this.lookTime = "";
     },
     //获取设备通道
     getSingleAccess(val) {
@@ -253,7 +285,8 @@ export default {
     getRatio() {
       getResolutionRatio({ type: 1 })
         .then((res) => {
-          this.ratiolist = this.hnratiolist;
+          //this.ratiolist = this.hnratiolist;
+          this.ratiolist = this.zzratiolist;
           this.$set(this.setForm, "videoFormat", this.ratiolist[0].id);
         })
         .catch((err) => {});
@@ -348,6 +381,7 @@ export default {
         .then((res) => {
           console.log(res);
           this.requestid = res.data.requestId;
+          this.lookTime = res.data.date;
           //this.getinfo1();
 
           clearInterval(this.timer);
@@ -381,6 +415,7 @@ export default {
               message: "信息已更新",
               type: "success",
             });
+            this.showLookTime = true;
           } else if (this.i > 9) {
             window.clearInterval(this.timer);
             this.timer = null;
@@ -409,6 +444,8 @@ export default {
       this.setForm = {};
       this.searchloading = false;
       this.setloading = false;
+      this.lookTime = "";
+      this.showLookTime = false;
     },
   },
 };
@@ -440,6 +477,10 @@ export default {
   .searchImage {
     margin-left: 110px;
   }
+  .looktime {
+    margin-top: 6px;
+    margin-left: 110px;
+  }
   .flexno {
     display: flex;
     height: 32px;

src/views/photographicDevice/components/workStatus.vue

@@ -1,16 +1,29 @@
 <template>
   <el-dialog
-    class="workStatus"
+    class="workStatusBox"
-    title="工作状态"
+    title="工作状态报"
     :visible.sync="isShow"
     :close-on-click-modal="false"
-    width="1280px"
+    width="1360px"
   >
+    <div class="zzinfo">
+      <span v-if="rowInfo.protocol == '65280'"> 国网I1 </span>
+      <span v-if="rowInfo.protocol == '65296'"> 陕西 </span>
+      <span v-if="rowInfo.protocol == '65281'"> 安徽 </span>
+      <span v-if="rowInfo.protocol == '65282'"> 江苏 </span>
+      <span v-if="rowInfo.protocol == '65283'"> 湖南 </span>
+      <span v-if="rowInfo.protocol == '65284'"> 浙江 </span>
+      <span v-if="rowInfo.protocol == '65285'"> 河南 </span>
+      <span v-if="rowInfo.protocol == '65286'"> 河南郑州 </span>
+      <span v-if="rowInfo.protocol == '65290'"> 河南统一视频v2020 </span>
+    </div>
     <el-form :inline="true" :model="formdata" class="demo-form-inline">
       <el-form-item label="开始日期">
         <el-date-picker
+          @change="changestartdate"
           v-model="formdata.starttime"
           type="datetime"
+          :picker-options="pickerOptions"
           placeholder="开始日期"
           value-format="timestamp"
         >
@@ -18,9 +31,10 @@
       </el-form-item>
       <el-form-item label="结束日期">
         <el-date-picker
+          @change="changeenddate"
           v-model="formdata.endtime"
           type="datetime"
-          default-time="23:59:59"
+          :picker-options="pickerOptions"
           placeholder="结束日期"
           value-format="timestamp"
           class="ml10"
@@ -29,7 +43,7 @@
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="onSubmit">查询</el-button>
-        <el-button type="primary">导出</el-button>
+        <el-button type="primary" @click="exportFault">导出</el-button>
       </el-form-item>
     </el-form>
     <el-table
@@ -38,6 +52,7 @@
       stripe
       tooltip-effect="dark"
       style="width: 100%"
+      height="466px"
       v-loading="loading"
     >
       <template slot="empty">
@@ -49,73 +64,75 @@
         </template>
       </el-table-column>
       <el-table-column
-        prop="name"
+        prop="cmdid"
-        label="采集时间"
+        label="装置编号"
-        min-width="120"
+        min-width="160"
         show-overflow-tooltip
       ></el-table-column>
+      <el-table-column prop="wsUpdateTimeStr" label="采集时间" min-width="140">
+      </el-table-column>
       <el-table-column
-        prop="name"
+        prop="batteryVoltage"
-        label="设备名称"
+        label="电池电压(V)"
-        min-width="80"
         show-overflow-tooltip
       ></el-table-column>
       <el-table-column
-        prop="name"
+        prop="opTemperature"
-        label="设备编号"
+        label="工作温度（℃）"
-        min-width="120"
         show-overflow-tooltip
       ></el-table-column>
+
       <el-table-column
-        prop="name"
+        prop="batteryCapacity"
-        label="电源电压"
+        label="电池电量（%）"
-        min-width="80"
         show-overflow-tooltip
       ></el-table-column>
       <el-table-column
-        prop="name"
+        prop="floatingChargeStr"
-        label="工作温度"
+        label="浮充状态"
-        min-width="80"
         show-overflow-tooltip
       ></el-table-column>
       <el-table-column
-        prop="name"
+        prop="totalWorkingTime"
-        label="电池电量"
+        label="工作总时间(小时)"
-        min-width="80"
         show-overflow-tooltip
       ></el-table-column>
       <el-table-column
-        prop="name"
+        prop="workingTime"
-        label="浮充状态"
+        label="连续工作时间(小时)"
-        min-width="100"
         show-overflow-tooltip
-      >
+      ></el-table-column>
-        <template slot-scope="scope">{{
-          scope.row.name == 0 ? "充电" : "放电"
-        }}</template>
-      </el-table-column>
       <el-table-column
-        prop="name"
+        prop="connectionStr"
-        label="工作总时间"
+        label="网络连接状态"
-        min-width="120"
         show-overflow-tooltip
       ></el-table-column>
       <el-table-column
-        prop="name"
+        prop="connectionStr"
-        label="连续工作时间"
+        label="GPRS信号强度"
-        min-width="100"
         show-overflow-tooltip
       ></el-table-column>
       <el-table-column
-        prop="name"
+        prop="recvFlowStr"
-        label="网络连接状态"
+        label="当月发送流量(M)"
-        min-width="100"
         show-overflow-tooltip
-      >
+      ></el-table-column>
-        <template slot-scope="scope">{{
+      <el-table-column
-          scope.row.name == 0 ? "已连接" : "未连接"
+        prop="sendFlowStr"
-        }}</template>
+        label="当月接收流量（M）"
-      </el-table-column>
+        show-overflow-tooltip
+      ></el-table-column>
+
+      <el-table-column
+        prop="protocolVersion"
+        label="通信协议版本"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        prop="protocolVersion"
+        label="GPRS信号强度"
+        show-overflow-tooltip
+      ></el-table-column>
     </el-table>
     <div class="pageNation">
       <el-pagination
@@ -130,36 +147,97 @@
       </el-pagination>
     </div>
     <div slot="footer" class="dialog-footer">
-      <el-button @click="isShow = false">取 消</el-button>
+      <el-button @click="hide">取 消</el-button>
     </div>
   </el-dialog>
 </template>
 <script>
-import { getLineListJoggle } from "@/utils/api/index";
+import {
+  getWorkingStatusHistoryApi,
+  getWorkingStatusHistoryExcel,
+} from "@/utils/api/index";
 export default {
   data() {
     return {
       isShow: false,
       formdata: {},
-      listData: [
+      rowInfo: "",
-        {
+      listData: [],
-          name: "测试",
-        },
-        {
-          name: "测试2",
-        },
-      ],
       loading: false,
-      seltermid: "", //装置id
-      selcmdId: "", //cmdId
-      requestId: "",
       page: 1, // 当前页数
-      pageSize: 20, // 每页数量
+      pageSize: 10, // 每页数量
       total: 0, //总条数
+      pickerOptions: {
+        disabledDate(date) {
+          return date.getTime() > Date.now(); // 禁用大于今天的日期
+        },
+      },
     };
   },
+  watch: {
+    endtime(newVal) {
+      if (newVal) {
+        const date = new Date(newVal);
+        date.setHours(23);
+        date.setMinutes(59);
+        date.setSeconds(59);
+        this.formdata.endtime = date;
+      }
+    },
+  },
+  created() {},
   mounted() {},
   methods: {
+    getTime() {
+      const thirtyDaysAgo = new Date();
+      thirtyDaysAgo.setHours(0); // 设置小时为23
+      thirtyDaysAgo.setMinutes(0); // 设置分钟为59
+      thirtyDaysAgo.setSeconds(0); // 设置秒数为59
+      console.log(
+        new Date(thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30))
+      );
+      const startTimeNew = new Date(
+        thirtyDaysAgo.setDate(thirtyDaysAgo.getDate())
+      ).getTime();
+      this.$set(this.formdata, "starttime", startTimeNew);
+      console.log("开始时间", this.formdata.starttime);
+      const currentDate = new Date(); // 获取当前时间
+      currentDate.setHours(23); // 设置小时为23
+      currentDate.setMinutes(59); // 设置分钟为59
+      currentDate.setSeconds(59); // 设置秒数为59
+      this.$set(this.formdata, "endtime", currentDate.getTime());
+      console.log("结束时间", this.formdata.endtime);
+      this.getfaultinfo();
+    },
+    changestartdate(val) {
+      console.log(val);
+      if (val == null) {
+        console.log(new Date());
+        const startDate = new Date();
+        startDate.setHours(0); // 设置小时为23
+        startDate.setMinutes(0); // 设置分钟为59
+        startDate.setSeconds(0); // 设置秒数为59
+        this.formdata.starttime = startDate;
+        console.log(this.formdata.starttime);
+      } else {
+        this.formdata.starttime = val;
+      }
+    },
+    //结束日期
+    changeenddate(val) {
+      if (val == null) {
+        console.log(new Date());
+        const endDate = new Date();
+        endDate.setHours(23); // 设置小时为23
+        endDate.setMinutes(59); // 设置分钟为59
+        endDate.setSeconds(59); // 设置秒数为59
+        this.formdata.endtime = endDate;
+        console.log(this.formdata.endtime);
+      } else {
+        this.formdata.endtime = val;
+        console.log(val);
+      }
+    },
     //查询
     onSubmit() {
       if (this.formdata.starttime > this.formdata.endtime) {
@@ -170,45 +248,66 @@ export default {
           type: "warning",
         });
       }
-      this.getlistnr();
+      this.getfaultinfo();
+    },
+    //导出
+    exportFault() {
+      window.location.href =
+        "/api/getWorkingStatusHistoryExcel?termid=" + this.rowInfo.id;
     },
     //获取数据
-    getlistnr(val) {
+    getfaultinfo() {
-      console.log(val);
-      this.seltermid = val.id;
-      this.selcmdId = val.cmdid;
       this.loading = true;
-      getLineListJoggle({
+      getWorkingStatusHistoryApi({
+        termid: this.rowInfo.id,
+        starttime: this.formdata.starttime,
+        endtime: this.formdata.endtime,
         pageindex: this.page,
         pagesize: this.pageSize,
       }).then((res) => {
-        this.listData = res.data.list;
+        if (res.code == 200) {
-        this.total = res.data.total;
+          this.listData = res.data.list;
-        this.loading = false;
+          this.total = res.data.total;
+          this.$nextTick(() => {
+            this.loading = false;
+          });
+        } else {
+          this.$nextTick(() => {
+            this.loading = false;
+          });
+        }
       });
     },
     //点击分页
     handleCurrentChange(val) {
       this.page = val;
-      this.getlistnr();
+      this.getfaultinfo();
     },
     //每页条数
     handleSizeChange(val) {
       this.pageSize = val;
-      this.getlistnr();
+      this.getfaultinfo();
     },
-    display() {
+    display(row) {
+      console.log(row);
+      this.rowInfo = row;
       this.isShow = true;
+      this.getTime();
     },
     hide() {
       this.isShow = false;
+      this.formdata = {};
     },
   },
 };
 </script>
-<<<<<<< HEAD
 <style lang="less">
-.workStatus {
+.workStatusBox {
+  .zzinfo {
+    position: absolute;
+    top: 22px;
+    left: 126px;
+  }
   .pageNation {
     justify-content: flex-start;
     margin-top: 16px;
@@ -221,6 +320,3 @@ export default {
   }
 }
 </style>
-=======
-<style lang="less" scoped></style>
->>>>>>> hn1.0

src/views/photographicDevice/index.vue

@@ -64,6 +64,16 @@
               ></el-option>
             </el-select>
           </el-form-item>
+          <el-form-item label="规约" class="isonLineClass">
+            <el-select v-model="formdata.protocol" filterable>
+              <el-option
+                v-for="item in protocolOptions"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
           <el-form-item>
             <el-input
               v-model="formdata.search"
@@ -121,6 +131,7 @@
               }}</el-link>
             </template>
           </el-table-column>
+
           <el-table-column
             prop="equipName"
             label="设备名称"
@@ -129,13 +140,19 @@
           >
           </el-table-column>
           <el-table-column
-            prop="cmdId"
+            prop="cmdid"
             label="设备编号"
             show-overflow-tooltip
             min-width="150"
           >
           </el-table-column>
-
+          <el-table-column
+            prop="devName"
+            label="设备类型"
+            show-overflow-tooltip
+            min-width="150"
+          >
+          </el-table-column>
           <el-table-column
             prop="protocolName"
             label="规约名称"
@@ -143,13 +160,17 @@
             min-width="90"
           />
           <el-table-column
-            prop="isonline"
+            prop="onlinestatus"
             label="是否在线"
             show-overflow-tooltip
           >
             <template slot-scope="scope">
-              {{ scope.row.isonline ? "在线" : "离线" }}</template
+              <!-- {{ scope.row.onlinestatus ? "在线" : "离线" }} -->
-            >
+              <span style="color: #169e8c" v-if="scope.row.onlinestatus"
+                >在线</span
+              >
+              <span style="color: #f56c6c" v-else>离线</span>
+            </template>
           </el-table-column>
           <el-table-column
             prop="hasPan"
@@ -161,8 +182,6 @@
             >
           </el-table-column>
 
-          <el-table-column prop="sim" label="SIM卡号" show-overflow-tooltip>
-          </el-table-column>
           <el-table-column
             prop="netType"
             label="网络类型"
@@ -174,7 +193,8 @@
               <span v-if="scope.row.netType == 3"> 电信</span>
             </template>
           </el-table-column>
-
+          <el-table-column prop="sim" label="SIM卡号" show-overflow-tooltip>
+          </el-table-column>
           <el-table-column prop="model" label="装置型号" show-overflow-tooltip>
           </el-table-column>
           <el-table-column
@@ -234,6 +254,9 @@
                     >运行状态</el-dropdown-item
                   >
                   <el-dropdown-item command="GPS">GPS位置</el-dropdown-item>
+                  <el-dropdown-item command="faultInfo"
+                    >故障信息报</el-dropdown-item
+                  >
                 </el-dropdown-menu>
               </el-dropdown>
               <el-button
@@ -255,15 +278,7 @@
                 type="text"
                 class="deleteText"
                 @click.native.stop="handleDelete(scope.row)"
-                v-if="scope.row.status == 1"
+                >删除</el-button
-                >关闭</el-button
-              >
-              <el-button
-                type="text"
-                class="deleteText"
-                @click.native.stop="handleDelete(scope.row)"
-                v-if="scope.row.status == 0"
-                >打开</el-button
               >
             </template>
           </el-table-column>
@@ -314,6 +329,7 @@
     <workStatus ref="workStatus_ref"></workStatus>
     <runStatus ref="runStatus_ref"></runStatus>
     <gpsSite ref="gpsSite_ref"></gpsSite>
+    <faultInfomation ref="fultInfo_ref"></faultInfomation>
     <!-- 新增线路 -->
     <add-lineDialog ref="addlineDialogref"></add-lineDialog>
     <towerDialog ref="towerDialogref"></towerDialog>
@@ -325,6 +341,7 @@ import {
   deleteTerminalJoggle,
   getSearchInfo,
   getTerminalListExcel,
+  getProtocolList,
 } from "@/utils/api/index";
 import moment from "moment";
 import addPhotoDialog from "./components/addPhotoDialog.vue";
@@ -336,9 +353,11 @@ import baseInfor from "./components/baseInfor.vue";
 import workStatus from "./components/workStatus.vue";
 import runStatus from "./components/runStatus.vue";
 import gpsSite from "./components/gpsSite.vue";
+import faultInfomation from "./components/faultInfomation.vue";
 import addLineDialog from "./components/addLineDialog.vue";
 import towerDialog from "./components/towerDialog.vue";
 export default {
+  name: "photographicDevice",
   components: {
     addPhotoDialog,
     pictureTags,
@@ -350,6 +369,7 @@ export default {
     gpsSite,
     addLineDialog,
     towerDialog,
+    faultInfomation,
   },
   data() {
     return {
@@ -361,12 +381,14 @@ export default {
         { id: 1, name: "在线" },
         { id: 0, name: "离线" },
       ],
+      protocolOptions: [{ id: -1, name: "全部" }], //规约数据
       formdata: {
         dyId: -1,
         lineId: -1,
         towerId: -1,
         search: "",
         isonline: -1,
+        protocol: -1,
       },
       roleUser: "",
       terminalTableData: [], //表格数据
@@ -409,6 +431,7 @@ export default {
   },
   mounted() {
     this.getSearchdy();
+    this.getProtocol();
     this.terminalList();
   },
   methods: {
@@ -463,7 +486,17 @@ export default {
         })
         .catch((err) => {});
     },
-
+    getProtocol() {
+      //获取规约版本
+      getProtocolList()
+        .then((res) => {
+          console.log(res);
+          this.protocolOptions = [{ id: -1, name: "全部" }];
+          this.protocolOptions = this.protocolOptions.concat(res.data.list);
+          this.formdata.protocol = this.protocolOptions[0].id;
+        })
+        .catch((err) => {});
+    },
     //查询
     onSubmit() {
       this.page = 1;
@@ -549,16 +582,19 @@ export default {
       console.log(command, row);
       switch (command) {
         case "info":
-          this.$refs.baseInfor_ref.display();
+          this.$refs.baseInfor_ref.display(row);
           break;
         case "workStatus":
-          this.$refs.workStatus_ref.display();
+          this.$refs.workStatus_ref.display(row);
           break;
         case "runStatus":
-          this.$refs.runStatus_ref.display();
+          this.$refs.runStatus_ref.display(row);
           break;
         case "GPS":
-          this.$refs.gpsSite_ref.display();
+          this.$refs.gpsSite_ref.display(row);
+          break;
+        case "faultInfo":
+          this.$refs.fultInfo_ref.display(row);
           break;
         default:
           break;
@@ -584,11 +620,9 @@ export default {
     //删除数据
     handleDelete(data) {
       console.log(data);
-      this.deleteArr.push({
+      this.deleteArr.push(data.id);
-        termid: data.id,
-      });
       console.log(this.deleteArr);
-      this.$confirm("确定要关闭该装置?", "提示", {
+      this.$confirm("确定要删除该装置?", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",
@@ -597,12 +631,13 @@ export default {
           // 行设置向后台请求删除数据
           deleteTerminalJoggle({ list: this.deleteArr }).then((res) => {
             console.log(res);
+            this.deleteArr = [];
             this.terminalList(); //刷新
           });
           this.$message({
             duration: 1500,
             type: "success",
-            message: "关闭成功!",
+            message: "删除成功!",
             showClose: true,
           });
         })
@@ -615,6 +650,43 @@ export default {
           // });
         });
     },
+    // //打开该装置
+    // handleOpen(data) {
+    //   console.log(data);
+    //   this.deleteArr.push({
+    //     termid: data.id,
+    //   });
+    //   console.log(this.deleteArr);
+    //   this.$confirm("确定要打开该装置?", "提示", {
+    //     confirmButtonText: "确定",
+    //     cancelButtonText: "取消",
+    //     type: "success",
+    //   })
+    //     .then(() => {
+    //       // 行设置向后台请求删除数据
+    //       deleteTerminalJoggle({ list: this.deleteArr, type: 1 }).then(
+    //         (res) => {
+    //           console.log(res);
+    //           this.deleteArr = [];
+    //           this.terminalList(); //刷新
+    //         }
+    //       );
+    //       this.$message({
+    //         duration: 1500,
+    //         type: "success",
+    //         message: "打开成功!",
+    //         showClose: true,
+    //       });
+    //     })
+    //     .catch(() => {
+    //       // this.$message({
+    //       //   duration: 1500,
+    //       //   type: "info",
+    //       //   message: "已取消删除",
+    //       //   showClose: true,
+    //       // });
+    //     });
+    // },
     //点击分页
     handleCurrentChange(val) {
       this.page = val;

src/views/pictureRotation/index.vue

@@ -163,6 +163,7 @@ import { getPictureList, getTerminalPhotoListJoggle } from "@/utils/api/index";
 import morePicPreveiw from "../realTimeMonitor/components/morePicPreveiw";
 import defaultImage from "../../assets/img/nodatapic2.jpg";
 export default {
+  name: "pictureRotation",
   components: {
     morePicPreveiw,
   },

src/views/realTimeMonitor/components/carouselChart copy.vue

@@ -1,917 +0,0 @@
-<template>
-  <div class="thumb-example">
-    <div class="picTop">
-      <!-- 判断是否是图片并且不为空 -->
-
-      <div
-        class="bigimg"
-        v-if="
-          bigPicPath.indexOf('nopic') == -1 &&
-          bigPicPath.indexOf('videos') == -1
-        "
-        :style="bigPicPath ? 'backgroundImage:url(' + bigPicPath + ')' : ''"
-      >
-        <el-button
-          class="downBtn"
-          @click.stop="
-            downLoadPic(
-              bigPicPath.substring(0, bigPicPath.length - 9),
-              bigPicPath.substring(0, bigPicPath.length - 9)
-            )
-          "
-          >下载图片</el-button
-        >
-        <!--  @click="handleBigPicbox(bigPicPath)"  v-viewer="OptionssalseImg"-->
-        <div
-          class="nosee"
-          :style="'backgroundImage:url(' + bigPicPath + ')'"
-        ></div>
-        <div class="bigimgView" @click="handleBigPicbox(bigPicPath)">
-          <img
-            ref="picJpg"
-            class="animImg"
-            :src="bigPicPath"
-            @error="setDefaultImage"
-          />
-        </div>
-        <canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas>
-        <!-- <img ref="picJpg" class="animImg" :src="bigPicPath + '!1366x768'" /> -->
-      </div>
-      <div class="bigimg" v-else-if="bigPicPath.indexOf('videos') !== -1">
-        <video
-          width="100%"
-          height="100%"
-          :src="bigPicPath.substring(0, bigPicPath.length - 9)"
-          controls="controls"
-          :poster="videopath"
-          autoplay
-        ></video>
-      </div>
-      <div class="bigimg nopic" v-if="bigPicPath.indexOf('nopic') !== -1">
-        <img
-          class="animImg"
-          :src="bigPicPath.substring(0, bigPicPath.length - 9)"
-        />
-      </div>
-
-      <div class="arrow leftArrow" v-if="this.bigNum != 0" @click="leftClick">
-        <i class="el-icon-arrow-left"></i>
-      </div>
-      <div
-        class="arrow rightArrow"
-        v-if="this.bigNum < this.terminalPhoto.length - 1"
-        @click="rightClick"
-      >
-        <i class="el-icon-arrow-right"></i>
-      </div>
-    </div>
-    <div class="picBottom">
-      <ul class="smallPicBox">
-        <li
-          v-for="(item, index) in fiveList"
-          @click="handleBigpic(item, index)"
-          :class="activeSmall === index ? 'borderActive' : ''"
-        >
-          <div
-            class="smallhavePic"
-            v-if="
-              item.path.indexOf('nopic') == -1 &&
-              item.path.indexOf('videos') == -1
-            "
-          >
-            <img :src="item.path + '!260x160'" @error="setDefaultImage" />
-            <p class="timeInfo">
-              <el-tooltip
-                class="item"
-                effect="dark"
-                content="拍照时间"
-                placement="top-start"
-              >
-                <span>{{ $moment(item.photoTime).format("HH:mm:ss") }}</span>
-              </el-tooltip>
-
-              (
-              <el-tooltip
-                class="item"
-                effect="dark"
-                content="图片上传时间"
-                placement="top-start"
-              >
-                <span> {{ $moment(item.recvTime).format("HH:mm:ss") }}</span>
-              </el-tooltip>
-              )
-              <span
-                >--{{
-                  item.alias !== null && item.alias !== ""
-                    ? item.alias
-                    : item.channelName
-                }}</span
-              >
-            </p>
-          </div>
-          <div
-            class="smallnoPic"
-            v-else-if="item.path.indexOf('videos') !== -1"
-          >
-            <img
-              src="../../../assets/img/loading.jpg"
-              style="object-fit: cover"
-              v-if="item.thumb == null"
-            />
-            <img :src="item.thumb" v-else />
-            <p class="videoicon"><i class="el-icon-video-play"></i></p>
-            <p class="timeInfo">
-              <el-tooltip
-                class="item"
-                effect="dark"
-                content="拍照时间"
-                placement="top-start"
-              >
-                <span>{{ $moment(item.photoTime).format("HH:mm:ss") }}</span>
-              </el-tooltip>
-
-              (
-              <el-tooltip
-                class="item"
-                effect="dark"
-                content="图片上传时间"
-                placement="top-start"
-              >
-                <span> {{ $moment(item.recvTime).format("HH:mm:ss") }}</span>
-              </el-tooltip>
-              )
-              <span
-                >--{{
-                  item.alias !== null && item.alias !== ""
-                    ? item.alias
-                    : item.channelName
-                }}</span
-              >
-            </p>
-          </div>
-          <div class="smallnoPic" v-else>
-            <img :src="item.path" />
-          </div>
-        </li>
-      </ul>
-      <div
-        class="arrow leftArrow"
-        v-if="this.page != 1"
-        @click="smallLeftClick"
-      >
-        <i class="el-icon-arrow-left"></i>
-      </div>
-      <div
-        class="arrow rightArrow"
-        v-if="this.page < this.total"
-        @click="smallRightClick"
-      >
-        <i class="el-icon-arrow-right"></i>
-      </div>
-    </div>
-
-    <!-- 点击出现大图 -->
-    <div
-      v-if="showBigpic"
-      class="showPic"
-      v-loading="canvasloading"
-      @click="closePic($event)"
-    >
-      <div
-        class="picboxI"
-        @mousewheel.prevent="rollImg"
-        :style="{
-          transform: 'scale(' + zoomD + ')',
-        }"
-        @mousedown="move"
-      >
-        <img
-          @load="imgOnload"
-          id="bigimg"
-          ref="bigimgref"
-          class="maskPic img"
-          :src="bigImgPath"
-        />
-        <!-- <canvas id="bigCanvas" class="myCanvas" ref="myCanvasbig"></canvas> -->
-      </div>
-      <div class="viewClose" @click="closePic($event)">
-        <i class="el-icon-close"></i>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { getCoordinate, updateMarkEnableStatus } from "@/utils/api/index";
-import defaultImage from "../../../assets/img/nodatapic2.jpg";
-export default {
-  components: {},
-  props: {
-    terminalPhoto: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    return {
-      OptionssalseImg: {
-        inline: false,
-        button: true,
-        navbar: false,
-        title: false,
-        toolbar: false,
-        tooltip: false,
-        zoomable: true,
-        url: "src",
-      },
-      isshowArrow: true, //判断是否显示切换按钮
-      mediaType: "", //判断图片类型是视频还是图片
-      bigPicPath: "", //大图地址
-      videopath: "",
-      smallPicPath: "", //小图地址
-      bigNum: 0, //判断大图是第几张
-      fiveList: [], //小图图片list
-      activeSmall: 0, //索引选中小图,
-      page: 1, //当前第几页
-      pagesize: 5, //每页显示五条
-      total: 0, //总共又几页
-
-      localPoints: [], //画图对象
-      canvas: null,
-      ctx: null,
-      imgpic: null,
-      color: "",
-      num: "",
-      showBigpic: false,
-      flagline: true,
-      markEnable: "",
-      zoomD: 1,
-      canvasloading: false,
-      bigImgPath: "",
-    };
-  },
-  mounted() {
-    console.log(this.terminalPhoto);
-    this.mediaType = this.terminalPhoto[0].mediaType;
-    this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
-
-    // this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
-    this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
-    this.total = this.terminalPhoto.length / this.pagesize;
-    console.log(this.fiveList);
-    //获取points
-    getCoordinate({
-      channelId:
-        this.fiveList[0].channelId == null ? 1 : this.fiveList[0].channelId,
-      needPic: "0",
-      termId: this.fiveList[0].termId,
-    })
-      .then((res) => {
-        console.log(res);
-        this.localPoints = res.data.list;
-        this.color = res.data.color;
-        this.num = res.data.boderWidth;
-        this.markEnable = res.data.markEnable;
-        if (this.markEnable === 1) {
-          this.drawline();
-        }
-      })
-      .catch((err) => {});
-  },
-  watch: {
-    terminalPhoto: function (newVal, oldVal) {
-      this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
-
-      this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
-      this.total = this.terminalPhoto.length / this.pagesize;
-    },
-  },
-  created() {},
-  methods: {
-    setDefaultImage(e) {
-      e.target.src = defaultImage;
-      this.bigPicPath = defaultImage;
-    },
-    downLoadPic(url, name) {
-      const image = new Image();
-      image.setAttribute("crossOrigin", "anonymous");
-      image.src = url;
-      image.onload = () => {
-        const canvas = document.createElement("canvas");
-        canvas.width = image.width;
-        canvas.height = image.height;
-        const ctx = canvas.getContext("2d");
-        ctx.drawImage(image, 0, 0, image.width, image.height);
-        canvas.toBlob((blob) => {
-          const url = URL.createObjectURL(blob);
-          this.download(url, name);
-          // 用完释放URL对象
-          URL.revokeObjectURL(url);
-        });
-      };
-    },
-    download(href, name) {
-      const eleLink = document.createElement("a");
-      eleLink.download = name;
-      eleLink.href = href;
-      eleLink.click();
-      eleLink.remove();
-    },
-    // showbigpicPath(data) {
-    //   console.log(data);
-    //   if (data.includes("!")) {
-    //     this.bigPicPath = data.substring(0, data.length - 9);
-    //   } else {
-    //     this.bigPicPath = data;
-    //     this.bgbigPath = data;
-    //   }
-
-    //   console.log(this.bigPicPath);
-    // },
-    // handleBigPicbox() {
-    //   this.showBigpic = true;
-    // },
-    //移动demo
-    move(e) {
-      console.log(e);
-      e.preventDefault();
-      // 获取元素
-      var personBox = document.querySelector(".picboxI");
-      var img = document.querySelector(".img");
-      var x = e.pageX - img.offsetLeft;
-      var y = e.pageY - img.offsetTop;
-      // 添加鼠标移动事件
-      personBox.addEventListener("mousemove", move);
-      console.log(personBox.addEventListener("mousemove", move));
-      console.log(personBox.style);
-      function move(e) {
-        console.log(personBox.style.left);
-        personBox.style.left = e.pageX - x + "px";
-        personBox.style.top = e.pageY - y + "px";
-      }
-      // 添加鼠标抬起事件，鼠标抬起，将事件移除
-      img.addEventListener("mouseup", function () {
-        personBox.removeEventListener("mousemove", move);
-      });
-      // 鼠标离开父级元素，把事件移除
-      personBox.addEventListener("mouseout", function () {
-        personBox.removeEventListener("mousemove", move);
-      });
-    },
-    // 缩放图片
-    rollImg(e) {
-      let direction = e.deltaY > 0 ? "down" : "up";
-      if (direction === "up") {
-        // 滑轮向上滚动
-        this.large();
-      } else {
-        // 滑轮向下滚动
-        this.Small();
-      }
-    },
-    //大
-    large() {
-      this.$nextTick(() => {
-        if (this.zoomD < 6) {
-          this.zoomD += 0.1;
-        }
-        document.querySelector(
-          ".picboxI"
-        ).style.transform = `matrix(${this.zoomD}, 0, 0,${this.zoomD}, 0, 0)`;
-      });
-    },
-    // 小
-    Small() {
-      this.$nextTick(() => {
-        if (this.zoomD > 0.3) {
-          this.zoomD -= 0.1;
-        }
-        document.querySelector(
-          ".picboxI"
-        ).style.transform = `matrix(${this.zoomD}, 0, 0, ${this.zoomD}, 0, 0)`;
-      });
-    },
-    imgOnload() {
-      console.log("加载完成");
-      this.canvasloading = false;
-    },
-    //放大图
-    handleBigPicbox(val) {
-      console.log(val);
-      //this.canvasloading = true;
-      this.showBigpic = true;
-      this.bigImgPath = val.substring(0, val.length - 9);
-    },
-    closePic(e) {
-      console.log(e);
-      var btn = this.$refs.bigimgref;
-      console.log(btn);
-      if (btn) {
-        if (!btn.contains(event.target)) {
-          //按钮.app-download以外的区域
-          this.zoomD = 1;
-          this.showBigpic = false;
-        }
-      }
-      //
-      // this.showBigpic = false;
-    },
-    openline() {
-      this.flagline = true;
-      console.log("11111111111111111111111111", this.flagline);
-      updateMarkEnableStatus({
-        status: 1,
-      }).then((res) => {
-        console.log(res);
-      });
-      this.drawline();
-    },
-    drawline() {
-      this.canvas = this.$refs.myCanvas;
-      this.imgpic = this.$refs.picJpg;
-      console.log(this.canvas);
-      console.log(this.imgpic);
-      this.canvas.width = this.imgpic.offsetWidth; //设置画布大小
-      this.canvas.height = this.imgpic.offsetHeight; //设置画布大小
-      this.ctx = this.canvas.getContext("2d");
-      console.log(this.localPoints);
-      if (this.flagline == true) {
-        this.localPoints = this.localPoints;
-      } else {
-        this.localPoints = [];
-      }
-      console.log(this.ctx);
-      this.ctx.beginPath();
-      //设置线条颜色，必须放在绘制之前
-      this.ctx.strokeStyle = this.color;
-      // 线宽设置，必须放在绘制之前
-      this.ctx.lineWidth = this.num;
-      for (var i = 0; i < this.localPoints.length; i++) {
-        this.ctx.moveTo(
-          this.localPoints[i].x1 * this.imgpic.width,
-          this.localPoints[i].y1 * this.imgpic.height
-        );
-        this.ctx.lineTo(
-          this.localPoints[i].x2 * this.imgpic.width,
-          this.localPoints[i].y2 * this.imgpic.height
-        );
-      }
-
-      this.ctx.closePath();
-      this.ctx.stroke();
-    },
-    //不显示绘制线
-    handelClear() {
-      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-      this.flagline = false;
-      updateMarkEnableStatus({
-        status: 0,
-      }).then((res) => {
-        console.log(res);
-      });
-    },
-    getphotoList() {
-      this.fiveList = this.terminalPhoto.slice(
-        (this.page - 1) * this.pagesize,
-        this.page * this.pagesize
-      );
-
-      this.bigPicPath = this.fiveList[this.activeSmall].path + "!1366x768";
-
-      this.videopath = this.fiveList[this.activeSmall].thumb;
-    },
-    //大图点击左侧切换图片
-    leftClick() {
-      this.bigNum--; //执行下一张
-      this.mediaType = this.terminalPhoto[this.bigNum].mediaType;
-      this.bigPicPath = this.terminalPhoto[this.bigNum].path + "!1366x768";
-
-      this.activeSmall--;
-      console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
-      console.log(this.page);
-      if (this.activeSmall < 0) {
-        this.activeSmall = 4;
-        this.smallLeftClick();
-      }
-      console.log(this.terminalPhoto[this.bigNum]);
-      getCoordinate({
-        channelId: this.terminalPhoto[this.bigNum].channelId,
-        needPic: "1",
-        termId: this.terminalPhoto[this.bigNum].termId,
-      })
-        .then((res) => {
-          console.log(res);
-          this.localPoints = res.data.list;
-          if (this.markEnable === 1) {
-            this.drawline();
-          }
-        })
-        .catch((err) => {});
-    },
-    //点击右侧切换图片
-    rightClick() {
-      this.bigNum++; //执行下一张
-      this.mediaType = this.terminalPhoto[this.bigNum].mediaType;
-      this.bigPicPath = this.terminalPhoto[this.bigNum].path + "!1366x768";
-
-      this.activeSmall++;
-      console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
-      if (this.activeSmall > 4) {
-        this.activeSmall = 0;
-        console.log(this.activeSmall);
-        this.smallRightClick();
-      }
-      getCoordinate({
-        channelId: this.terminalPhoto[this.bigNum].channelId,
-        needPic: "1",
-        termId: this.terminalPhoto[this.bigNum].termId,
-      })
-        .then((res) => {
-          console.log(res);
-          this.localPoints = res.data.list;
-          if (this.markEnable === 1) {
-            this.drawline();
-          }
-        })
-        .catch((err) => {});
-    },
-    //点击小图变成大图
-    handleBigpic(row, index) {
-      console.log(row);
-      console.log();
-      this.activeSmall = index;
-      this.mediaType = row.mediaType;
-      this.bigPicPath = row.path + "!1366x768";
-      // this.bgbigPath = row.path + "!1366x768";
-      getCoordinate({
-        channelId: row.channelId,
-        needPic: "1",
-        termId: row.termId,
-      })
-        .then((res) => {
-          console.log(res);
-          this.localPoints = res.data.list;
-          if (this.markEnable === 1) {
-            this.drawline();
-          }
-          // this.drawline();
-        })
-        .catch((err) => {});
-    },
-    //点击小图切换左侧
-    smallLeftClick() {
-      this.activeSmall = 0;
-      console.log("点击了左侧");
-
-      this.page--;
-      if (this.page < 1) {
-        this.isshowArrow = false;
-      } else {
-        this.getphotoList();
-      }
-      console.log(this.page);
-      console.log(this.fiveList);
-      //获取points
-      getCoordinate({
-        channelId: this.fiveList[0].channelId,
-        needPic: "0",
-        termId: this.fiveList[0].termId,
-      })
-        .then((res) => {
-          console.log(res);
-          this.localPoints = res.data.list;
-          if (this.markEnable === 1) {
-            this.drawline();
-          }
-          // this.drawline();
-        })
-        .catch((err) => {});
-    },
-    //点击小图切换右侧
-    smallRightClick() {
-      this.activeSmall = 0;
-      console.log("点击了右侧");
-      console.log(this.page);
-      this.page++;
-      this.getphotoList();
-      console.log(this.fiveList);
-      //获取points
-      getCoordinate({
-        channelId: this.fiveList[0].channelId,
-        needPic: "0",
-        termId: this.fiveList[0].termId,
-      })
-        .then((res) => {
-          console.log(res);
-          this.localPoints = res.data.list;
-          if (this.markEnable === 1) {
-            this.drawline();
-          }
-          // this.drawline();
-        })
-        .catch((err) => {});
-    },
-  },
-};
-</script>
-<style lang="less">
-.thumb-example {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  height: calc(100% - 32px);
-  box-sizing: border-box;
-
-  .picTop {
-    width: 100%;
-    height: 80%;
-    overflow: hidden;
-    margin-bottom: 4px;
-    position: relative;
-    .downBtn {
-      position: absolute;
-      background: rgba(0, 0, 0, 0.5);
-      border: none;
-      right: 8px;
-      bottom: 16px;
-      color: #fff;
-      z-index: 5;
-      &:hover {
-        background: rgba(0, 0, 0, 0.9);
-        color: #169e8c;
-      }
-    }
-    &:hover {
-      .arrow {
-        opacity: 1;
-        transition: all 0.5s ease-in;
-      }
-    }
-    .bigimg {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: relative;
-      background-size: 100% 100%;
-      .nosee {
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        background-size: 100% 100%;
-        z-index: 2;
-      }
-      .bigimgView {
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        z-index: 3;
-        opacity: 0;
-        .animImg {
-          opacity: 0;
-        }
-      }
-      .mark {
-        position: absolute;
-        bottom: 12px;
-        color: #fff;
-        background-color: rgba(0, 0, 0, 0.5);
-        left: 16px;
-        font-size: 14px;
-        line-height: 24px;
-        //opacity: 0;
-        transition: bottom 2s ease 0s;
-      }
-      .myCanvas {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        cursor: pointer;
-        z-index: 2;
-      }
-    }
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: fill;
-      cursor: pointer;
-    }
-    .arrow {
-      opacity: 0;
-      position: absolute;
-      cursor: pointer;
-      color: #fff;
-      font-size: 16px;
-      border-radius: 30px;
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      background-color: rgba(0, 0, 0, 0.5);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      color: #fff;
-      text-align: center;
-      line-height: 60px;
-      width: 40px;
-      height: 40px;
-      z-index: 4;
-      &:hover {
-        color: #169e8c;
-      }
-    }
-    .leftArrow {
-      left: 16px;
-    }
-    .rightArrow {
-      right: 16px;
-    }
-  }
-  .picBottom {
-    width: 100%;
-    height: 20%;
-    position: relative;
-    .smallPicBox {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      li {
-        width: 20%;
-        border: 3px solid transparent;
-        // overflow: hidden;
-        box-sizing: border-box;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: relative;
-        img {
-          width: 100%;
-          height: 100%;
-          object-fit: fill;
-          cursor: pointer;
-        }
-        .smallhavePic {
-          width: 100%;
-          height: 100%;
-        }
-        .smallnoPic {
-          width: 100%;
-          height: 100%;
-        }
-      }
-      .timeInfo {
-        position: absolute;
-        bottom: 0px;
-        width: 100%;
-        background: #f0f0f0;
-        padding: 6px 0px;
-        font-size: 12px;
-        text-align: center;
-        color: #333;
-      }
-      .videoicon {
-        position: absolute;
-        top: 73%;
-        left: 10%;
-        transform: translate(-50%, -50%);
-        i {
-          font-size: 28px;
-          color: #fff;
-        }
-      }
-      .borderActive {
-        .timeInfo {
-          //background: @color-primary;
-          background: linear-gradient(180deg, #00eaff 10%, #169e8c 100%);
-          color: #fff;
-        }
-      }
-      // .borderActive {
-      //   border: 3px solid @color-primary;
-      //   &::after {
-      //     content: "";
-      //     position: absolute;
-      //     width: 0;
-      //     height: 0;
-      //     left: 50%;
-      //     top: -16px;
-      //     margin-left: -8px;
-      //     border-bottom: 13px solid @color-primary;
-      //     border-left: 8px solid transparent;
-      //     border-right: 8px solid transparent;
-      //   }
-      // }
-    }
-    .arrow {
-      position: absolute;
-      cursor: pointer;
-      color: #fff;
-      font-size: 12px;
-      border-radius: 30px;
-      position: absolute;
-      top: 45%;
-      transform: translateY(-50%);
-      background-color: rgba(0, 0, 0, 0.5);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      color: #fff;
-      text-align: center;
-      line-height: 60px;
-      width: 28px;
-      height: 28px;
-    }
-    .leftArrow {
-      left: 16px;
-    }
-    .rightArrow {
-      right: 16px;
-    }
-  }
-  //放大图
-  .showPic {
-    position: fixed;
-    background-color: rgba(0, 0, 0, 50%);
-    bottom: 0;
-    left: 0;
-    overflow: hidden;
-    right: 0;
-    top: 0;
-    z-index: 9999;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    cursor: pointer;
-    .picboxI {
-      position: relative;
-      width: 85%;
-      height: 85%;
-      margin: auto;
-      animation-name: scaleDraw;
-      /*关键帧名称*/
-      animation-timing-function: ease;
-      /*动画的速度曲线*/
-      animation-iteration-count: 1;
-      /*动画播放的次数*/
-      animation-duration: 0.65s;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      img {
-        max-width: 100%;
-        max-height: 100%;
-
-        margin: auto;
-        position: absolute;
-        cursor: grab;
-      }
-      .myCanvas {
-        position: absolute;
-        // top: 0;
-        // left: 0;
-        max-width: 100%;
-        max-height: 100%;
-        margin: 0 auto;
-        cursor: pointer;
-        pointer-events: none;
-      }
-    }
-    .viewClose {
-      -webkit-app-region: no-drag;
-      background-color: rgba(0, 0, 0, 0.5);
-      border-radius: 50%;
-      cursor: pointer;
-      height: 80px;
-      overflow: hidden;
-      position: absolute;
-      right: -40px;
-      top: -40px;
-      transition: background-color 0.15s;
-      width: 80px;
-      .el-icon-close {
-        bottom: 16px;
-        left: 16px;
-        position: absolute;
-        color: #fff;
-        font-size: 18px;
-      }
-    }
-  }
-}
-@keyframes scaleDraw {
-  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
-  0% {
-    transform: scale(0);
-    /*开始为原始大小*/
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}
-// https://v1.github.surmon.me/vue-awesome-swiper/
-</style>

src/views/realTimeMonitor/components/carouselChart.vue

@@ -1,6 +1,18 @@
 <template>
   <div class="thumb-example">
-    <div class="radioBox" v-if="roleUser != 2">{{ radioPx }}</div>
+    <div class="radioBox" v-if="roleUser == 1 || roleUser == 0">
+      {{ radioPx }} <span v-if="fileSize">({{ fileSize }})</span>
+      <span v-if="protocolInfo == '65280'"> 国网I1 </span>
+      <span v-if="protocolInfo == '65296'"> 陕西 </span>
+      <span v-if="protocolInfo == '65281'"> 安徽 </span>
+      <span v-if="protocolInfo == '65282'"> 江苏 </span>
+      <span v-if="protocolInfo == '65283'"> 湖南 </span>
+      <span v-if="protocolInfo == '65284'"> 浙江 </span>
+      <span v-if="protocolInfo == '65285'"> 河南 </span>
+      <span v-if="protocolInfo == '65286'"> 河南郑州 </span>
+      <span v-if="protocolInfo == '65290'"> 河南统一视频v2020 </span>
+      <!-- <span>(共{{ terminalPhoto.length }}张)</span> -->
+    </div>
     <div class="topPic">
       <div
         class="bigPic"
@@ -17,6 +29,7 @@
           :src="currentPicPath + '!1366x768'"
           :preview-src-list="srcList"
           @load="loadImage"
+          @error="setDefaultImage"
           ref="picJpg"
         >
           <template slot="error">
@@ -35,7 +48,7 @@
           autoplay
         ></video>
       </div>
-      <div class="arrow leftArrow" @click="leftClick" v-if="currentPage > 0">
+      <div class="arrow leftArrow" @click="leftClick" v-if="activeSmall > 0">
         <i class="el-icon-arrow-left"></i>
       </div>
       <el-button
@@ -46,30 +59,28 @@
       <div
         class="arrow rightArrow"
         @click="rightClick"
-        v-if="currentPage < terminalPhoto.length - 1"
+        v-if="activeSmall !== terminalPhoto.length - 1"
       >
         <i class="el-icon-arrow-right"></i>
       </div>
     </div>
-    <div class="bottomPic" v-on:wheel="handleScroll">
+    <!--  -->
-      <el-carousel
+    <div class="bottomPic">
-        :loop="false"
+      <div class="scrollPicContain">
-        :autoplay="false"
+        <div
-        ref="carousel"
-        indicator-position="none"
-        @change="changeItem"
-      >
-        <el-carousel-item
           class="el-car-item"
-          v-for="(list, index) in terminalPhoto"
+          ref="scrollBox"
-          :key="index"
+          v-on:wheel="handleScroll"
+          :class="terminalPhoto.length < photoNum ? 'littlePic' : ''"
         >
           <div
             class="smallPic"
-            v-for="(item, index2) in list"
+            v-for="(item, index2) in terminalPhoto"
             :key="index2"
             @click="changeBigPic(item, index2)"
-            :class="activeSmall === index2 ? 'borderActive' : ''"
+            :class="`${activeSmall === index2 ? 'borderActive ' : ''}${
+              photoNum === 10 ? 'moreSmallPic' : ''
+            }`"
           >
             <div
               class="picBox"
@@ -81,7 +92,7 @@
               <!-- <el-image v-lazy="item.path + '!260x160'"></el-image> -->
               <img v-lazy="item.path + '!260x160'" />
 
-              <p class="timeInfo">
+              <p class="timeInfo" :class="{ alarmSpan: item.isAlarm === 1 }">
                 <el-tooltip
                   class="item"
                   effect="dark"
@@ -108,6 +119,7 @@
                       : item.channelName
                   }}</span
                 >
+                <span class="alarmSpan" v-if="item.isAlarm == 1">(已告警)</span>
               </p>
             </div>
             <div class="picBox" v-else-if="item.mediaType == 1">
@@ -148,8 +160,14 @@
               <img v-lazy="item.path" />
             </div>
           </div>
-        </el-carousel-item>
+        </div>
-      </el-carousel>
+        <div class="arrow leftArrow" @click="smallLeftClick">
+          <i class="el-icon-arrow-left"></i>
+        </div>
+        <div class="arrow rightArrow">
+          <i class="el-icon-arrow-right" @click="smallRightClick"></i>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -168,6 +186,9 @@ export default {
       type: Number,
       default: () => [],
     },
+    protocolInfo: {
+      type: Number,
+    },
   },
   data() {
     return {
@@ -178,6 +199,7 @@ export default {
       currentPage: 0,
       srcList: [],
       radioPx: "",
+      fileSize: "",
       roleUser: "",
       localPoints: [], //线缆坐标
       flagLine: true, //线缆标识
@@ -190,8 +212,8 @@ export default {
     };
   },
   mounted() {
-    console.log(this.terminalPhoto);
+    ////console.log(this.terminalPhoto);
-    this.changeBigPic(this.terminalPhoto[0][0], 0);
+    this.changeBigPic(this.terminalPhoto[0], 0);
   },
   watch: {
     terminalPhoto: {
@@ -204,44 +226,63 @@ export default {
   },
   created() {
     this.roleUser = localStorage.getItem("role");
-    console.log(this.roleUser);
+    ////console.log(this.roleUser);
   },
+
   methods: {
     //下载图片
-    downLoadPic(url, name) {
+    async downLoadPic(path, name) {
-      const image = new Image();
+      const imgUrl = path;
-      image.setAttribute("crossOrigin", "anonymous");
+      const response = await fetch(imgUrl);
-      image.src = url;
+      const blob = await response.blob();
-      image.onload = () => {
+      // 创建下载链接
-        const canvas = document.createElement("canvas");
+      const url = window.URL.createObjectURL(blob);
-        canvas.width = image.width;
+      const link = document.createElement("a");
-        canvas.height = image.height;
+      link.href = url;
-        const ctx = canvas.getContext("2d");
+      console.log(name);
-        ctx.drawImage(image, 0, 0, image.width, image.height);
+      link.download = name.split("/").pop();
-        canvas.toBlob((blob) => {
+
-          const url = URL.createObjectURL(blob);
+      document.body.appendChild(link);
-          this.download(url, name);
+      link.click();
-          // 用完释放URL对象
+      document.body.removeChild(link);
-          URL.revokeObjectURL(url);
+      // 释放 Blob URL
-        });
+      window.URL.revokeObjectURL(url);
-      };
-    },
-    download(href, name) {
-      const eleLink = document.createElement("a");
-      eleLink.download = name;
-      eleLink.href = href;
-      eleLink.click();
-      eleLink.remove();
     },
+    // downLoadPic(url, name) {
+    //   const image = new Image();
+    //   image.setAttribute("crossOrigin", "anonymous");
+    //   image.src = url;
+    //   image.onload = () => {
+    //     const canvas = document.createElement("canvas");
+    //     canvas.width = image.width;
+    //     canvas.height = image.height;
+    //     const ctx = canvas.getContext("2d");
+    //     ctx.drawImage(image, 0, 0, image.width, image.height);
+    //     canvas.toBlob((blob) => {
+    //       const url = URL.createObjectURL(blob);
+    //       this.download(url, name);
+    //       // 用完释放URL对象
+    //       URL.revokeObjectURL(url);
+    //     });
+    //   };
+    // },
+    // download(href, name) {
+    //   const eleLink = document.createElement("a");
+    //   eleLink.download = name;
+    //   eleLink.href = href;
+    //   eleLink.click();
+    //   eleLink.remove();
+    // },
     //获取线缆绘制显示
     getPointList(data) {
+      console.log("woshi 线缆绘制", data);
       getCoordinate({
         channelId: data.channelId,
         needPic: "1",
         termId: data.termId,
       })
         .then((res) => {
-          console.log(res);
+          //console.log(res);
           this.localPoints = res.data.list;
           this.color = res.data.color;
           this.borderwidth = res.data.boderWidth;
@@ -255,12 +296,12 @@ export default {
     //开启绘制线缆
     openLine() {
       this.flagLine = true;
-      console.log("我是绘制线缆");
+
       //开启传1
       updateMarkEnableStatus({
         status: 1,
       }).then((res) => {
-        console.log(res);
+        //console.log(res);
       });
       this.drawline();
     },
@@ -268,38 +309,35 @@ export default {
     closeLine() {
       this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
       this.flagLine = false;
-      console.log("关闭线缆");
+
       //关闭传0
       updateMarkEnableStatus({
         status: 0,
       }).then((res) => {
-        console.log(res);
+        //console.log(res);
       });
     },
     //绘制线缆方法
     drawline() {
       this.canvas = this.$refs.myCanvas;
       this.imgpic = this.$refs.picJpg;
-      console.log(this.canvas);
+
-      console.log(this.imgpic);
       this.canvas.width = this.imgpic.imageWidth; //设置画布大小
       this.canvas.height = this.imgpic.imageHeight; //设置画布大小
       this.ctx = this.canvas.getContext("2d");
-      console.log(this.localPoints);
+
       if (this.flagLine == true) {
         this.localPoints = this.localPoints;
-        console.log(this.localPoints);
       } else {
         this.localPoints = [];
       }
-      console.log(this.ctx);
+
       this.ctx.beginPath();
       //设置线条颜色，必须放在绘制之前
       this.ctx.strokeStyle = this.color;
       // 线宽设置，必须放在绘制之前
       this.ctx.lineWidth = this.borderwidth;
-      console.log(this.ctx.lineWidth, this.ctx.strokeStyle);
+
-      console.log(this.localPoints);
       if (this.localPoints == null) {
         return;
       } else {
@@ -326,37 +364,22 @@ export default {
     },
     //点击大图左右按钮
     leftClick() {
-      console.log("我点击了左侧按钮", this.activeSmall, this.currentPage);
+      console.log(this.photoNum);
       this.activeSmall--;
-      if (this.activeSmall < 0) {
+      this.$refs.scrollBox.scrollLeft -=
-        this.currentPage--;
+        this.$refs.scrollBox.offsetWidth / this.photoNum;
-        this.$refs.carousel.setActiveItem(this.currentPage);
+      this.changeBigPic(this.terminalPhoto[this.activeSmall], this.activeSmall);
-        this.activeSmall =
-          this.terminalPhoto[this.terminalPhoto.length - 1].length - 1;
-      }
-      this.changeBigPic(
-        this.terminalPhoto[this.currentPage][this.activeSmall],
-        this.activeSmall
-      );
     },
     rightClick() {
-      console.log(this.activeSmall);
+      console.log(this.photoNum);
-      console.log(this.terminalPhoto.length);
       this.activeSmall++;
-      if (this.activeSmall > this.photoNum - 1) {
+      this.$refs.scrollBox.scrollLeft +=
-        this.currentPage++;
+        this.$refs.scrollBox.offsetWidth / this.photoNum;
-        this.$refs.carousel.setActiveItem(this.currentPage);
+      this.changeBigPic(this.terminalPhoto[this.activeSmall], this.activeSmall);
-        this.activeSmall = 0;
-      }
-      this.changeBigPic(
-        this.terminalPhoto[this.currentPage][this.activeSmall],
-        this.activeSmall
-      );
     },
     //获取第一张大图
     changeBigPic(data, i) {
-      console.log(data, i);
+      // //console.log("鼠标222222222", this.currentPage, this.activeSmall);
-      console.log("鼠标222222222", this.currentPage, this.activeSmall);
       this.srcList = [];
       this.localPoints = [];
       this.activeSmall = i;
@@ -368,78 +391,52 @@ export default {
       } else {
         this.radioPx = "";
       }
-      this.getPointList(data);
+      if (data.fileSize !== undefined) {
+        const sizeInBytes = data.fileSize;
+        const sizeInMB = sizeInBytes / (1024 * 1024);
+        const sizeInKB = sizeInBytes / 1024;
+
+        if (sizeInMB >= 1) {
+          this.fileSize = `${sizeInMB.toFixed(2)}M`; // 大于等于1MB，以MB为单位，保留两位小数
+        } else {
+          this.fileSize = `${sizeInKB.toFixed(2)}K`; // 小于1MB，以KB为单位，保留两位小数
+        }
+      } else {
+        this.fileSize = ""; // 如果data.fileSize未定义，则设置为空字符串
+      }
+
+      // console.log(data.channelId);
+      if (data.channelId) {
+        this.getPointList(data);
+      }
     },
     loadImage() {
+      console.log("loading");
       this.picLoading = false;
     },
-    changeItem(e) {
+    setDefaultImage(e) {
-      // console.log(this.currentPage);
+      e.target.src = defaultImage;
-      // this.currentPage = e;
+      this.picLoading = false;
-      // if (e === 0) {
-      //   this.activeSmall = 0;
-      //   //this.changeBigPic(this.terminalPhoto[0][0], 0);
-      // } else {
-      //   this.activeSmall = 0;
-      //   // this.changeBigPic(this.terminalPhoto[this.currentPage][0], 0);
-      // }
-      //this.active = e; // 将走马灯的 下标 指定为 tab 的下标
     },
     //鼠标滚动
     handleScroll(e) {
       let direction = e.deltaY > 0 ? "down" : "up"; //deltaY为正则滚轮向下，为负滚轮向上
-      console.log(e.deltaY, direction);
       if (direction == "down") {
-        if (
+        this.$refs.scrollBox.scrollLeft +=
-          this.currentPage == this.terminalPhoto.length - 1 &&
+          (this.$refs.scrollBox.offsetWidth / this.photoNum) * 1;
-          this.activeSmall ==
-            this.terminalPhoto[this.terminalPhoto.length - 1].length - 1
-        ) {
-          this.$message({
-            message: "已经是最后一张图",
-            type: "success",
-            showClose: true,
-            duration: 500,
-          });
-          return;
-        } else {
-          // this.rightClick();
-          this.activeSmall++;
-          if (this.activeSmall > this.photoNum - 1) {
-            this.currentPage++;
-            this.$refs.carousel.setActiveItem(this.currentPage);
-            this.activeSmall = 0;
-          }
-          console.log(this.activeSmall);
-        }
       }
       if (direction == "up") {
-        if (this.currentPage == 0 && this.activeSmall == 0) {
+        this.$refs.scrollBox.scrollLeft -=
-          this.$message({
+          (this.$refs.scrollBox.offsetWidth / this.photoNum) * 1;
-            showClose: true,
-            duration: 500,
-            message: "已经是最新一张图",
-            type: "success",
-          });
-          return;
-        } else {
-          // this.leftClick();
-          console.log(this.activeSmall);
-          this.activeSmall--;
-          console.log(this.activeSmall);
-          if (this.activeSmall < 0) {
-            this.currentPage--;
-            console.log("我是页数", this.currentPage);
-            this.$refs.carousel.setActiveItem(this.currentPage);
-            this.activeSmall = this.terminalPhoto[this.currentPage].length - 1;
-            console.log(this.terminalPhoto);
-            console.log(this.terminalPhoto[this.currentPage].length);
-            console.log("我是选中的值", this.activeSmall);
-          }
-          console.log(this.activeSmall);
-        }
       }
     },
+    //缩略图的左右箭头
+    smallLeftClick() {
+      this.$refs.scrollBox.scrollLeft -= this.$refs.scrollBox.offsetWidth;
+    },
+    smallRightClick() {
+      this.$refs.scrollBox.scrollLeft += this.$refs.scrollBox.offsetWidth;
+    },
   },
 };
 </script>
@@ -543,41 +540,68 @@ export default {
     width: 100%;
     height: 20%;
     margin-bottom: 6px;
-    .el-carousel {
+    .scrollPicContain {
+      // width: 1380px;
+      display: flex;
       height: 100%;
-      .el-carousel__container {
+      position: relative;
-        height: 100% !important;
+      .arrow {
-      }
+        opacity: 0;
-      .el-carousel__arrow {
+        position: absolute;
+        cursor: pointer;
+        font-size: 14px;
+        border-radius: 30px;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
         color: #4cdbc8;
         font-weight: bold;
         background-color: rgba(31, 45, 61, 0.8);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        line-height: 60px;
+        width: 30px;
+        height: 30px;
+        z-index: 4;
         &:hover {
           background-color: rgba(31, 45, 61, 1);
         }
       }
+      .leftArrow {
+        left: 16px;
+      }
+      .rightArrow {
+        right: 16px;
+      }
+      &:hover {
+        .arrow {
+          opacity: 1;
+          transition: all 0.5s ease-in;
+        }
+      }
     }
     .el-car-item {
+      width: 100%;
+      height: 100%;
       display: flex;
-      justify-content: center;
+      overflow-x: hidden;
+      overflow-y: hidden;
+      scroll-behavior: smooth;
       .smallPic {
-        width: 20%;
+        width: 19.2%;
         border: 3px solid transparent;
         box-sizing: border-box;
-        display: flex;
+        flex-shrink: 0;
-        align-items: center;
+        white-space: nowrap;
-        justify-content: center;
         position: relative;
         cursor: pointer;
         .picBox {
           width: 100%;
           height: 100%;
         }
-        // .el-image {
-        //   width: 100%;
-        //   height: 100%;
 
-        // }
         img {
           width: 100%;
           height: 100%;
@@ -599,14 +623,28 @@ export default {
             color: #169e8c;
           }
         }
+        .alarmSpan {
+          color: #f00;
+          font-weight: bold;
+        }
+      }
+      .moreSmallPic {
+        width: 9.8%;
       }
       .borderActive {
         .timeInfo {
           color: #fff;
           background: linear-gradient(180deg, #4cdbc8 10%, #128071);
         }
+        .alarmSpan {
+          color: #f00;
+          font-weight: bold;
+        }
       }
     }
+    .littlePic {
+      justify-content: center;
+    }
   }
 }
 </style>

src/views/realTimeMonitor/components/carouselChartOld.vue

@@ -0,0 +1,612 @@
+<template>
+  <div class="thumb-example">
+    <div class="radioBox" v-if="roleUser != 2">{{ radioPx }}</div>
+    <div class="topPic">
+      <div
+        class="bigPic"
+        v-if="currentPicPath.indexOf('nopic') !== -1 && currentPicPath"
+      >
+        <el-image :src="currentPicPath"></el-image>
+      </div>
+      <div
+        class="bigPic"
+        v-else-if="currentPicPath && mediaType == 0"
+        v-loading="picLoading"
+      >
+        <el-image
+          :src="currentPicPath + '!1366x768'"
+          :preview-src-list="srcList"
+          @load="loadImage"
+          ref="picJpg"
+        >
+          <template slot="error">
+            <img src="../../../assets/img/nodatapic2.jpg" />
+          </template>
+        </el-image>
+        <canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas>
+        <!-- <img :src="currentPicPath + '!1366x768'" @load="loadImage" /> -->
+      </div>
+      <div class="bigPic" v-else-if="currentPicPath && mediaType == 1">
+        <video
+          width="100%"
+          height="100%"
+          :src="currentPicPath"
+          controls="controls"
+          autoplay
+        ></video>
+      </div>
+      <div class="arrow leftArrow" @click="leftClick" v-if="currentPage > 0">
+        <i class="el-icon-arrow-left"></i>
+      </div>
+      <el-button
+        class="downBtn"
+        @click.stop="downLoadPic(currentPicPath, currentPicPath)"
+        >下载图片</el-button
+      >
+      <div
+        class="arrow rightArrow"
+        @click="rightClick"
+        v-if="currentPage < terminalPhoto.length - 1"
+      >
+        <i class="el-icon-arrow-right"></i>
+      </div>
+    </div>
+    <div class="bottomPic" v-on:wheel="handleScroll">
+      <el-carousel
+        :loop="false"
+        :autoplay="false"
+        ref="carousel"
+        indicator-position="none"
+        @change="changeItem"
+      >
+        <el-carousel-item
+          class="el-car-item"
+          v-for="(list, index) in terminalPhoto"
+          :key="index"
+        >
+          <div
+            class="smallPic"
+            v-for="(item, index2) in list"
+            :key="index2"
+            @click="changeBigPic(item, index2)"
+            :class="activeSmall === index2 ? 'borderActive' : ''"
+          >
+            <div
+              class="picBox"
+              v-if="
+                item.path.indexOf('nopic') == -1 &&
+                item.path.indexOf('videos') == -1
+              "
+            >
+              <!-- <el-image v-lazy="item.path + '!260x160'"></el-image> -->
+              <img v-lazy="item.path + '!260x160'" />
+
+              <p class="timeInfo">
+                <el-tooltip
+                  class="item"
+                  effect="dark"
+                  content="拍照时间"
+                  placement="top-start"
+                >
+                  <span>{{ $moment(item.photoTime).format("HH:mm:ss") }}</span>
+                </el-tooltip>
+
+                (
+                <el-tooltip
+                  class="item"
+                  effect="dark"
+                  content="图片上传时间"
+                  placement="top-start"
+                >
+                  <span> {{ $moment(item.recvTime).format("HH:mm:ss") }}</span>
+                </el-tooltip>
+                )
+                <span
+                  >--{{
+                    item.alias !== null && item.alias !== ""
+                      ? item.alias
+                      : item.channelName
+                  }}</span
+                >
+              </p>
+            </div>
+            <div class="picBox" v-else-if="item.mediaType == 1">
+              <!-- <el-image :src="item.thumb + '!260x160'"></el-image> -->
+              <img v-lazy="item.thumb + '!260x160'" />
+              <p class="timeInfo">
+                <i class="el-icon-video-camera"></i>
+                <el-tooltip
+                  class="item"
+                  effect="dark"
+                  content="拍照时间"
+                  placement="top-start"
+                >
+                  <span>{{ $moment(item.photoTime).format("HH:mm:ss") }}</span>
+                </el-tooltip>
+
+                (
+                <el-tooltip
+                  class="item"
+                  effect="dark"
+                  content="图片上传时间"
+                  placement="top-start"
+                >
+                  <span> {{ $moment(item.recvTime).format("HH:mm:ss") }}</span>
+                </el-tooltip>
+                )
+                <span
+                  >--{{
+                    item.alias !== null && item.alias !== ""
+                      ? item.alias
+                      : item.channelName
+                  }}</span
+                >
+              </p>
+            </div>
+            <div class="picBox" v-else>
+              <!-- <el-image :src="item.path"></el-image> -->
+              <img v-lazy="item.path" />
+            </div>
+          </div>
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+  </div>
+</template>
+
+<script>
+import defaultImage from "../../../assets/img/nodatapic2.jpg";
+import { getCoordinate, updateMarkEnableStatus } from "@/utils/api/index";
+export default {
+  components: {},
+  props: {
+    terminalPhoto: {
+      type: Array,
+      default: () => [],
+    },
+    photoNum: {
+      type: Number,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      picLoading: true,
+      currentPicPath: "", //大图
+      mediaType: "", //判断图片类型是视频还是图片
+      activeSmall: 0, //索引选中小图,
+      currentPage: 0,
+      srcList: [],
+      radioPx: "",
+      roleUser: "",
+      localPoints: [], //线缆坐标
+      flagLine: true, //线缆标识
+      canvas: null,
+      ctx: null,
+      imgpic: null,
+      color: "", //线颜色
+      borderwidth: "", //线宽
+      markEnable: "", //是否显示
+    };
+  },
+  mounted() {
+    console.log(this.terminalPhoto);
+    this.changeBigPic(this.terminalPhoto[0][0], 0);
+  },
+  watch: {
+    terminalPhoto: {
+      handler(newVal, oldVal) {
+        this.terminalPhoto = newVal;
+      },
+      immediate: true,
+      deep: true, //deep，默认值是 false，代表是否深度监听。
+    },
+  },
+  created() {
+    this.roleUser = localStorage.getItem("role");
+    console.log(this.roleUser);
+  },
+  methods: {
+    //下载图片
+    downLoadPic(url, name) {
+      const image = new Image();
+      image.setAttribute("crossOrigin", "anonymous");
+      image.src = url;
+      image.onload = () => {
+        const canvas = document.createElement("canvas");
+        canvas.width = image.width;
+        canvas.height = image.height;
+        const ctx = canvas.getContext("2d");
+        ctx.drawImage(image, 0, 0, image.width, image.height);
+        canvas.toBlob((blob) => {
+          const url = URL.createObjectURL(blob);
+          this.download(url, name);
+          // 用完释放URL对象
+          URL.revokeObjectURL(url);
+        });
+      };
+    },
+    download(href, name) {
+      const eleLink = document.createElement("a");
+      eleLink.download = name;
+      eleLink.href = href;
+      eleLink.click();
+      eleLink.remove();
+    },
+    //获取线缆绘制显示
+    getPointList(data) {
+      getCoordinate({
+        channelId: data.channelId,
+        needPic: "1",
+        termId: data.termId,
+      })
+        .then((res) => {
+          console.log(res);
+          this.localPoints = res.data.list;
+          this.color = res.data.color;
+          this.borderwidth = res.data.boderWidth;
+          this.markEnable = res.data.markEnable;
+          if (this.markEnable === 1) {
+            this.drawline();
+          }
+        })
+        .catch((err) => {});
+    },
+    //开启绘制线缆
+    openLine() {
+      this.flagLine = true;
+      console.log("我是绘制线缆");
+      //开启传1
+      updateMarkEnableStatus({
+        status: 1,
+      }).then((res) => {
+        console.log(res);
+      });
+      this.drawline();
+    },
+    //关闭绘制线缆
+    closeLine() {
+      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+      this.flagLine = false;
+      console.log("关闭线缆");
+      //关闭传0
+      updateMarkEnableStatus({
+        status: 0,
+      }).then((res) => {
+        console.log(res);
+      });
+    },
+    //绘制线缆方法
+    drawline() {
+      this.canvas = this.$refs.myCanvas;
+      this.imgpic = this.$refs.picJpg;
+      console.log(this.canvas);
+      console.log(this.imgpic);
+      this.canvas.width = this.imgpic.imageWidth; //设置画布大小
+      this.canvas.height = this.imgpic.imageHeight; //设置画布大小
+      this.ctx = this.canvas.getContext("2d");
+      console.log(this.localPoints);
+      if (this.flagLine == true) {
+        this.localPoints = this.localPoints;
+        console.log(this.localPoints);
+      } else {
+        this.localPoints = [];
+      }
+      console.log(this.ctx);
+      this.ctx.beginPath();
+      //设置线条颜色，必须放在绘制之前
+      this.ctx.strokeStyle = this.color;
+      // 线宽设置，必须放在绘制之前
+      this.ctx.lineWidth = this.borderwidth;
+      console.log(this.ctx.lineWidth, this.ctx.strokeStyle);
+      console.log(this.localPoints);
+      if (this.localPoints == null) {
+        return;
+      } else {
+        for (var i = 0; i < this.localPoints.length; i++) {
+          this.ctx.moveTo(
+            this.localPoints[i].x1 * this.imgpic.imageWidth,
+            this.localPoints[i].y1 * this.imgpic.imageHeight
+          );
+          this.ctx.lineTo(
+            this.localPoints[i].x2 * this.imgpic.imageWidth,
+            this.localPoints[i].y2 * this.imgpic.imageHeight
+          );
+        }
+        this.ctx.closePath();
+        this.ctx.stroke();
+      }
+
+      // this.ctx.beginPath(); //开始路径
+      // this.ctx.moveTo(100, 100); //三角形，左顶点
+      // this.ctx.lineTo(300, 100); //右顶点
+      // this.ctx.lineTo(300, 300); //底部的点
+      // this.ctx.closePath(); //结束路径
+      // this.ctx.stroke(); //描边路径
+    },
+    //点击大图左右按钮
+    leftClick() {
+      console.log("我点击了左侧按钮", this.activeSmall, this.currentPage);
+      this.activeSmall--;
+      if (this.activeSmall < 0) {
+        this.currentPage--;
+        this.$refs.carousel.setActiveItem(this.currentPage);
+        this.activeSmall =
+          this.terminalPhoto[this.terminalPhoto.length - 1].length - 1;
+      }
+      this.changeBigPic(
+        this.terminalPhoto[this.currentPage][this.activeSmall],
+        this.activeSmall
+      );
+    },
+    rightClick() {
+      console.log(this.activeSmall);
+      console.log(this.terminalPhoto.length);
+      this.activeSmall++;
+      if (this.activeSmall > this.photoNum - 1) {
+        this.currentPage++;
+        this.$refs.carousel.setActiveItem(this.currentPage);
+        this.activeSmall = 0;
+      }
+      this.changeBigPic(
+        this.terminalPhoto[this.currentPage][this.activeSmall],
+        this.activeSmall
+      );
+    },
+    //获取第一张大图
+    changeBigPic(data, i) {
+      console.log(data, i);
+      console.log("鼠标222222222", this.currentPage, this.activeSmall);
+      this.srcList = [];
+      this.localPoints = [];
+      this.activeSmall = i;
+      this.mediaType = data.mediaType;
+      this.currentPicPath = data.path;
+      this.srcList.push(data.path);
+      if (data.width != undefined) {
+        this.radioPx = data.width + "x" + data.height;
+      } else {
+        this.radioPx = "";
+      }
+      this.getPointList(data);
+    },
+    loadImage() {
+      this.picLoading = false;
+    },
+    changeItem(e) {
+      // console.log(this.currentPage);
+      // this.currentPage = e;
+      // if (e === 0) {
+      //   this.activeSmall = 0;
+      //   //this.changeBigPic(this.terminalPhoto[0][0], 0);
+      // } else {
+      //   this.activeSmall = 0;
+      //   // this.changeBigPic(this.terminalPhoto[this.currentPage][0], 0);
+      // }
+      //this.active = e; // 将走马灯的 下标 指定为 tab 的下标
+    },
+    //鼠标滚动
+    handleScroll(e) {
+      let direction = e.deltaY > 0 ? "down" : "up"; //deltaY为正则滚轮向下，为负滚轮向上
+      console.log(e.deltaY, direction);
+      if (direction == "down") {
+        if (
+          this.currentPage == this.terminalPhoto.length - 1 &&
+          this.activeSmall ==
+            this.terminalPhoto[this.terminalPhoto.length - 1].length - 1
+        ) {
+          this.$message({
+            message: "已经是最后一张图",
+            type: "success",
+            showClose: true,
+            duration: 500,
+          });
+          return;
+        } else {
+          // this.rightClick();
+          this.activeSmall++;
+          if (this.activeSmall > this.photoNum - 1) {
+            this.currentPage++;
+            this.$refs.carousel.setActiveItem(this.currentPage);
+            this.activeSmall = 0;
+          }
+          console.log(this.activeSmall);
+        }
+      }
+      if (direction == "up") {
+        if (this.currentPage == 0 && this.activeSmall == 0) {
+          this.$message({
+            showClose: true,
+            duration: 500,
+            message: "已经是最新一张图",
+            type: "success",
+          });
+          return;
+        } else {
+          // this.leftClick();
+          console.log(this.activeSmall);
+          this.activeSmall--;
+          console.log(this.activeSmall);
+          if (this.activeSmall < 0) {
+            this.currentPage--;
+            console.log("我是页数", this.currentPage);
+            this.$refs.carousel.setActiveItem(this.currentPage);
+            this.activeSmall = this.terminalPhoto[this.currentPage].length - 1;
+            console.log(this.terminalPhoto);
+            console.log(this.terminalPhoto[this.currentPage].length);
+            console.log("我是选中的值", this.activeSmall);
+          }
+          console.log(this.activeSmall);
+        }
+      }
+    },
+  },
+};
+</script>
+<style lang="less">
+.thumb-example {
+  width: 100%;
+  // display: flex;
+  // flex-direction: column;
+  height: calc(100% - 32px);
+  box-sizing: border-box;
+  .radioBox {
+    position: absolute;
+    top: 8px;
+    right: 24px;
+    color: #fff;
+    font-size: 14px;
+  }
+  .topPic {
+    width: 100%;
+    height: 80%;
+    margin-bottom: 4px;
+    position: relative;
+    .bigPic {
+      width: 100%;
+      height: 100%;
+      .el-image {
+        width: 100%;
+        height: 100%;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .myCanvas {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+      z-index: 3;
+      pointer-events: none;
+    }
+    &:hover {
+      .arrow {
+        opacity: 1;
+        transition: all 0.5s ease-in;
+      }
+      .downBtn {
+        opacity: 1;
+        transition: all 0.5s ease-in;
+      }
+    }
+    .arrow {
+      opacity: 0;
+      position: absolute;
+      cursor: pointer;
+      font-size: 16px;
+      border-radius: 30px;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      color: #4cdbc8;
+      font-weight: bold;
+      background-color: rgba(31, 45, 61, 0.8);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      line-height: 60px;
+      width: 40px;
+      height: 40px;
+      z-index: 4;
+      &:hover {
+        background-color: rgba(31, 45, 61, 1);
+      }
+    }
+    .leftArrow {
+      left: 16px;
+    }
+    .rightArrow {
+      right: 16px;
+    }
+    .downBtn {
+      position: absolute;
+      background: rgba(0, 0, 0, 0.5);
+      border: none;
+      right: 24px;
+      bottom: 24px;
+      color: #fff;
+      z-index: 5;
+      opacity: 0;
+      &:hover {
+        background: rgba(0, 0, 0, 0.9);
+        color: #169e8c;
+      }
+    }
+  }
+  .bottomPic {
+    width: 100%;
+    height: 20%;
+    margin-bottom: 6px;
+    .el-carousel {
+      height: 100%;
+      .el-carousel__container {
+        height: 100% !important;
+      }
+      .el-carousel__arrow {
+        color: #4cdbc8;
+        font-weight: bold;
+        background-color: rgba(31, 45, 61, 0.8);
+        &:hover {
+          background-color: rgba(31, 45, 61, 1);
+        }
+      }
+    }
+    .el-car-item {
+      display: flex;
+      justify-content: center;
+      .smallPic {
+        width: 20%;
+        border: 3px solid transparent;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        cursor: pointer;
+        .picBox {
+          width: 100%;
+          height: 100%;
+        }
+        // .el-image {
+        //   width: 100%;
+        //   height: 100%;
+
+        // }
+        img {
+          width: 100%;
+          height: 100%;
+        }
+        .timeInfo {
+          position: absolute;
+          bottom: 0px;
+          width: 100%;
+          background: #f0f0f0;
+          padding: 6px 0;
+          font-size: 12px;
+          text-align: center;
+          color: #333;
+          .el-icon-video-camera {
+            font-size: 20px;
+            margin-right: 8px;
+            align-items: center;
+            vertical-align: sub;
+            color: #169e8c;
+          }
+        }
+      }
+      .borderActive {
+        .timeInfo {
+          color: #fff;
+          background: linear-gradient(180deg, #4cdbc8 10%, #128071);
+        }
+      }
+    }
+  }
+}
+</style>

src/views/realTimeMonitor/components/gpsButton.vue

@@ -1,22 +1,14 @@
 <template>
   <div class="gpsbuttonBox">
     <el-button type="primary" @click="handleShowGPS">获取GPS位置 </el-button>
-    <el-dropdown class="dropgps" trigger="click" @command="handleCommandGps">
+
-      <el-button type="primary">
-        GPS开关<i class="el-icon-arrow-down el-icon--right"></i>
-      </el-button>
-      <el-dropdown-menu slot="dropdown" class="gpsdropStyle">
-        <el-dropdown-item command="open">开启GPS</el-dropdown-item>
-        <el-dropdown-item command="close">关闭GPS</el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
     <gps-position ref="gpsdialog_ref"></gps-position>
   </div>
 </template>
 <script>
 // import infoDialog from "./infoDialog.vue";
 import gpsPosition from "./gpsPosition.vue";
-import { getTermStatus, setTermGPSJoggle } from "@/utils/api/index";
+import {} from "@/utils/api/index";
 export default {
   components: {
     gpsPosition,
@@ -45,54 +37,6 @@ export default {
     },
   },
   methods: {
-    //切换gps开启关闭
-    handleCommandGps(command) {
-      switch (command) {
-        case "open": //开启
-          this.changeGPS(1, this.cmdId);
-          break;
-        case "close": //关闭
-          this.changeGPS(0, this.cmdId);
-          break;
-      }
-    },
-    changeGPS(val, cmdid) {
-      console.log(val, cmdid);
-      getTermStatus({ termId: this.termId }).then((res) => {
-        console.log(res);
-        if (res.data.isonline) {
-          setTermGPSJoggle({ gpsstatus: val, cmdId: cmdid })
-            .then((res) => {
-              console.log(res);
-              if (val == 0) {
-                this.$message({
-                  duration: 1500,
-                  message: "GPS已关闭",
-                  type: "warning",
-                  showClose: true,
-                });
-              } else {
-                this.$message({
-                  duration: 1500,
-                  message: "成功开启GPS",
-                  type: "success",
-                  showClose: true,
-                });
-              }
-            })
-            .catch((err) => {
-              console.log(err); //代码错误、请求失败捕获
-            });
-        } else {
-          this.$message({
-            duration: 1500,
-            showClose: true,
-            message: "装置下线，发送指令失败",
-            type: "error",
-          });
-        }
-      });
-    },
     //获取GPS位置
     handleShowGPS() {
       this.$refs.gpsdialog_ref.display(this.cmdId, this.termId);
@@ -103,8 +47,8 @@ export default {
 </script>
 <style lang="less">
 .gpsbuttonBox {
-  width: 100%;
+  // width: 100%;
-  display: flex;
+  // display: flex;
-  justify-content: space-between;
+  // justify-content: space-between;
 }
 </style>

src/views/realTimeMonitor/components/morePicPreveiw.vue

@@ -83,23 +83,23 @@ export default {
           } else {
             this.terminalPhoto = res.data.list;
           }
-          let newDataList = [];
+          // let newDataList = [];
-          let current = 0;
+          // let current = 0;
-          if (this.terminalPhoto && this.terminalPhoto.length > 0) {
+          // if (this.terminalPhoto && this.terminalPhoto.length > 0) {
-            for (let i = 0; i <= this.terminalPhoto.length - 1; i++) {
+          //   for (let i = 0; i <= this.terminalPhoto.length - 1; i++) {
-              if (i % this.photoNum !== 0 || i === 0) {
+          //     if (i % this.photoNum !== 0 || i === 0) {
-                if (!newDataList[current]) {
+          //       if (!newDataList[current]) {
-                  newDataList.push([this.terminalPhoto[i]]);
+          //         newDataList.push([this.terminalPhoto[i]]);
-                } else {
+          //       } else {
-                  newDataList[current].push(this.terminalPhoto[i]);
+          //         newDataList[current].push(this.terminalPhoto[i]);
-                }
+          //       }
-              } else {
+          //     } else {
-                current++;
+          //       current++;
-                newDataList.push([this.terminalPhoto[i]]);
+          //       newDataList.push([this.terminalPhoto[i]]);
-              }
+          //     }
-            }
+          //   }
-          }
+          // }
-          this.terminalPhoto = [...newDataList];
+          // this.terminalPhoto = [...newDataList];
         })
         .catch((err) => {
           console.log(err); //代码错误、请求失败捕获
@@ -119,6 +119,7 @@ export default {
   background: #fff;
   top: 0px;
   left: 0px;
+  z-index: 2;
   //z-index: 99999;
   .headTitle {
     height: 40px;

src/views/realTimeMonitor/components/parameterArea.vue

@@ -1,6 +1,16 @@
 <template>
   <div class="AreaBox">
-    <div class="areaHead">{{ areaData.cmdid }}</div>
+    <div class="areaHead">
+      <span @dblclick="handleDblClick(areaData.cmdid)">{{
+        areaData.cmdid
+      }}</span>
+      <el-button
+        type="text"
+        :icon="areaData.isfavor == 1 ? 'el-icon-star-on' : 'el-icon-star-off'"
+        @click="addCollectClick"
+        >{{ areaData.isfavor == 1 ? "取消收藏" : "添加收藏" }}</el-button
+      >
+    </div>
     <div class="paramsDate">
       <h3>日历快速查询</h3>
       <el-date-picker
@@ -10,6 +20,7 @@
         format="yyyy 年 MM 月 dd 日"
         :picker-options="pickerOptions"
         @change="changedate"
+        @focus="handleDateFocus"
         :clearable="false"
       >
       </el-date-picker>
@@ -57,47 +68,150 @@
     <div class="paramsDate setTimebtn">
       <h3>操作项</h3>
       <div class="buttonGroup">
-        <takePicButton></takePicButton>
+        <takePicButton v-if="showButton('pzShowBtn')"></takePicButton>
-        <takeVideoButton></takeVideoButton>
+        <takeVideoButton v-if="showButton('spShowBtn')"></takeVideoButton>
-
         <deviceInfoButton></deviceInfoButton>
-
+        <scheduleButton v-if="showButton('pztimeShowBtn')"></scheduleButton>
-        <scheduleButton></scheduleButton>
+        <alarmButton v-if="showButton('sgbjShowBtn')"></alarmButton>
-        <alarmButton></alarmButton>
         <cableButton></cableButton>
         <gpsButton></gpsButton>
-        <el-button type="primary" @click="handlehistoryPic">
+        <el-dropdown
+          class="dropgps"
+          trigger="click"
+          @command="handleCommandGps"
+        >
+          <el-button type="primary">
+            GPS开关<i class="el-icon-arrow-down el-icon--right"></i>
+          </el-button>
+          <el-dropdown-menu slot="dropdown" class="gpsdropStyle">
+            <el-dropdown-item command="open">开启GPS</el-dropdown-item>
+            <el-dropdown-item command="close">关闭GPS</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+        <el-button
+          type="primary"
+          @click="handlehistoryPic"
+          v-if="showhisButton('/realTimeSearch')"
+        >
           历史图片</el-button
         >
-        <el-button type="primary" @click="handleParams"> 参数配置</el-button>
+        <el-button
-        <!-- <el-button type="primary" @click="handleTakePic" :loading="picLoading"
+          type="primary"
-          >主动拍照
+          @click="handleParams"
-        </el-button> -->
+          v-if="showButton('cspzShowBtn')"
-        <!-- <el-button type="primary">主动拍照 </el-button>
+        >
-        <el-button type="primary">主动拍照 </el-button>
+          参数配置</el-button
-        <el-button type="primary">主动拍照 </el-button>
+        >
-        <el-button type="primary">主动拍照 </el-button>
+        <el-button
-        <el-button type="primary">主动拍照 </el-button>
+          type="primary"
-        <el-button type="primary">主动拍照 </el-button>
+          @click="handleuploadPic"
-        <el-button type="primary">主动拍照 </el-button> -->
+          v-if="showButton('sctpShowBtn')"
+        >
+          上传图片</el-button
+        >
+        <takeTimePicButton
+          v-if="showButton('zdTimepzShowBtn')"
+        ></takeTimePicButton>
+        <setChannelButton v-if="showButton('tdszShowBtn')"></setChannelButton>
+        <setAppButton v-if="showButton('appShowBtn')"></setAppButton>
+        <el-dropdown
+          class="dropgps"
+          trigger="click"
+          @command="
+            (command) => {
+              handleSearchCommand(command, areaData);
+            }
+          "
+        >
+          <el-button type="primary">
+            数据查询<i class="el-icon-arrow-down el-icon--right"></i>
+          </el-button>
+          <el-dropdown-menu slot="dropdown" class="picdropStyle">
+            <el-dropdown-item command="info">基本信息</el-dropdown-item>
+            <el-dropdown-item command="workStatus">工作状态</el-dropdown-item>
+            <el-dropdown-item command="runStatus">运行状态</el-dropdown-item>
+            <el-dropdown-item command="GPS">GPS位置</el-dropdown-item>
+            <el-dropdown-item command="faultInfo">故障信息报</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+      <div class="setfocalLength" v-if="areaData.protocol == '65286'">
+        <h3>焦距调节</h3>
+        <div class="selectChannel">
+          <span class="labelname">选择通道</span>
+          <el-select
+            v-model="channelarrValue"
+            placeholder="请选择通道"
+            ref="multiSelect"
+          >
+            <el-option
+              v-for="item in channelfocalOpyion"
+              :key="item.channelid"
+              :label="
+                item.alias !== null && item.alias !== ''
+                  ? item.alias
+                  : item.channelname
+              "
+              :value="item.channelid"
+            >
+              {{
+                item.alias !== null && item.alias !== ""
+                  ? item.alias
+                  : item.channelname
+              }}
+            </el-option>
+          </el-select>
+        </div>
+        <div class="buttonGroup">
+          <el-button type="primary" icon="el-icon-zoom-in" @click="amplify()"
+            >放大</el-button
+          >
+          <el-button type="primary" icon="el-icon-zoom-out" @click="reduce()"
+            >缩小</el-button
+          >
+        </div>
       </div>
     </div>
     <parameterSetDialog ref="parameterSetref"></parameterSetDialog>
+    <uploadpic ref="uploadpicref"></uploadpic>
+    <baseInfor ref="baseInfor_ref"></baseInfor>
+    <workStatus ref="workStatus_ref"></workStatus>
+    <runStatus ref="runStatus_ref"></runStatus>
+    <gpsSite ref="gpsSite_ref"></gpsSite>
+    <faultInfomation ref="fultInfo_ref"></faultInfomation>
   </div>
 </template>
 <script>
+import EventBus from "@/utils/event-bus";
 import takePicButton from "./takePicButton.vue";
+import setChannelButton from "./setChannelButton.vue";
+import takeTimePicButton from "./takeTimePicButton.vue";
 import takeVideoButton from "./takeVideoButton.vue";
 import deviceInfoButton from "./deviceInfoButton.vue";
 import scheduleButton from "./scheduleButton.vue";
 import alarmButton from "./alarmButton.vue";
 import cableButton from "./cableButton.vue";
 import gpsButton from "./gpsButton.vue";
+import uploadpic from "./uploadpic.vue";
 import parameterSetDialog from "../../photographicDevice/components/parameterSetDialog.vue";
-import { getChannelByTermidJoggle } from "@/utils/api/index";
+import setAppButton from "./setAppButton.vue";
+
+import baseInfor from "../../photographicDevice/components/baseInfor.vue";
+import workStatus from "../../photographicDevice/components/workStatus.vue";
+import runStatus from "../../photographicDevice/components/runStatus.vue";
+import gpsSite from "../../photographicDevice/components/gpsSite.vue";
+import faultInfomation from "../../photographicDevice/components/faultInfomation.vue";
+import {
+  getChannelByTermidJoggle,
+  updateTermCamera,
+  getTermStatus,
+  addFavorList,
+  setTermGPSJoggle,
+} from "@/utils/api/index";
 export default {
   components: {
     takePicButton,
+    takeTimePicButton,
     takeVideoButton,
     deviceInfoButton,
     scheduleButton,
@@ -105,11 +219,22 @@ export default {
     cableButton,
     gpsButton,
     parameterSetDialog,
+    uploadpic,
+    setChannelButton,
+    setAppButton,
+    baseInfor,
+    workStatus,
+    runStatus,
+    gpsSite,
+    faultInfomation,
   },
   data() {
     return {
+      roleUser: "",
       selectChannelValue: null, //选中的通道
       channelListOption: [], //通道数组
+      channelarrValue: null,
+      channelfocalOpyion: [], //焦距通道
       dateValue: "", //选择日期
       pickerOptions: {
         disabledDate(date) {
@@ -120,6 +245,10 @@ export default {
       selectDyId: "", //获取当前选中的电压线路等信息
       selectLineId: "",
       selectTowerId: "",
+      collectFlag: false, //收藏
+      btnShowList: [],
+      hisShowbtn: true,
+      menuShowList: [],
     };
   },
 
@@ -134,20 +263,121 @@ export default {
     areaData() {
       return this.$store.state.currentData;
     },
+    showButtonMap() {
+      if (this.roleUser !== "0") {
+        return this.btnShowList.reduce((map, button) => {
+          map[button.key] = true; // 假设只要key存在，就显示按钮
+          return map;
+        }, {});
+      }
+    },
+    showhisButtonMap() {
+      if (this.roleUser !== "0") {
+        return this.menuShowList.reduce((map, button) => {
+          map[button.key] = true; // 假设只要key存在，就显示按钮
+          return map;
+        }, {});
+      }
+    },
+  },
+  created() {
+    this.roleUser = localStorage.getItem("role");
+    console.log("asdsaddddddddddddddddddddddddd", this.roleUser);
+    this.btnShowList = JSON.parse(localStorage.getItem("btnPermission"));
+    this.menuShowList = JSON.parse(localStorage.getItem("menuPermission"));
+
+    console.log(this.btnShowList, this.menuShowList);
   },
   mounted() {
     this.getDateTime();
   },
   methods: {
+    //控制显示与隐藏
+    showButton(key) {
+      if (this.roleUser !== "0") {
+        return this.showButtonMap[key] || false;
+      } else {
+        return true;
+      }
+    },
+    showhisButton(key) {
+      if (this.roleUser !== "0") {
+        return this.showhisButtonMap[key] || false;
+      } else {
+        return true;
+      }
+    },
+    //双击选中复制
+    handleDblClick(val) {
+      // alert(val);
+      var input = document.createElement("input"); // 创建input对象
+      input.value = val; // 设置复制内容
+      document.body.appendChild(input); // 添加临时实例
+      input.select(); // 选择实例内容
+      document.execCommand("Copy"); // 执行复制
+      document.body.removeChild(input); // 删除临时实例
+      //this.$message.success("复制成功！");
+      this.$message({
+        duration: 800,
+        showClose: true,
+        message: "复制成功！",
+        type: "success",
+      });
+    },
     //获取当前时间
     getDateTime() {
       console.log(new Date());
       this.dateValue = new Date().getTime();
       console.log(this.dateValue);
     },
+    //点击收藏和取消收藏
+    addCollectClick() {
+      if (this.areaData.isfavor !== 1) {
+        this.areaData.isfavor = 1;
+        addFavorList({ list: [this.areaData.id], type: 1 }).then((res) => {
+          EventBus.$emit("treelist");
+        });
+        this.$message({
+          type: "success",
+          message: "添加成功!",
+        });
+        // this.$confirm("此操作将添加至收藏夹, 是否继续?", "提示", {
+        //   confirmButtonText: "确定",
+        //   cancelButtonText: "取消",
+        //   type: "warning",
+        // }).then(() => {
+
+        // });
+      } else {
+        this.$confirm("此操作将取消收藏, 是否继续?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }).then(() => {
+          this.areaData.isfavor = 0;
+          addFavorList({ list: [this.areaData.id], type: 0 }).then((res) => {
+            EventBus.$emit("treelist");
+          });
+          this.$message({
+            type: "success",
+            message: "取消收藏!",
+          });
+        });
+      }
+    },
+    //focus时间重新赋值
+    handleDateFocus() {
+      // 更新pickerOptions的disabledDate函数，禁用大于当前时间的日期
+      this.pickerOptions.disabledDate = (date) => {
+        //console.log(date);
+        const currentDate = new Date();
+        return date.getTime() > currentDate.getTime(); // 禁用大于今天的日期
+      };
+    },
     //选择时间
     changedate() {
       console.log(this.dateValue.getTime());
+      this.dateValue = this.dateValue.getTime();
       this.$parent.getPhotoList(
         this.selectChannelValue,
         this.dateValue,
@@ -165,6 +395,7 @@ export default {
           ];
           this.channelListOption = this.channelListOption.concat(res.data.list);
           console.log(this.channelListOption);
+          this.channelfocalOpyion = res.data.list; //焦距通道
 
           this.selectChannelValue = this.channelListOption[0].channelid; //默认选中所有通道;
           this.$store.commit("channelId", this.selectChannelValue); //通道保存在vuex中
@@ -176,7 +407,13 @@ export default {
           );
           this.selectDyId = res.data.dyId;
           this.selectLineId = res.data.lineId;
-          this.selectTowerId = res.data.towerId;
+          //this.selectTowerId = res.data.towerId;
+          if (res.data.list.length == 0) {
+            this.channelarrValue = null;
+            return;
+          } else {
+            this.channelarrValue = this.channelfocalOpyion[0].channelid;
+          }
         })
         .catch((err) => {
           console.log(err); //代码错误、请求失败捕获
@@ -188,9 +425,63 @@ export default {
       this.$store.commit("channelId", val); //将currentData保存在vuex中
       this.$parent.getPhotoList(val, this.dateValue, this.areaData.id);
     },
+    //切换gps开启关闭
+    handleCommandGps(command) {
+      switch (command) {
+        case "open": //开启
+          this.changeGPS(1, this.areaData.id);
+          break;
+        case "close": //关闭
+          this.changeGPS(0, this.areaData.id);
+          break;
+      }
+    },
+    changeGPS(val, cmdid) {
+      console.log(val, cmdid);
+      getTermStatus({ termId: cmdid }).then((res) => {
+        console.log(res);
+        if (res.data.isonline) {
+          setTermGPSJoggle({ gpsstatus: val, cmdId: cmdid })
+            .then((res) => {
+              console.log(res);
+              if (val == 0) {
+                this.$message({
+                  duration: 1500,
+                  message: "GPS已关闭",
+                  type: "warning",
+                  showClose: true,
+                });
+              } else {
+                this.$message({
+                  duration: 1500,
+                  message: "成功开启GPS",
+                  type: "success",
+                  showClose: true,
+                });
+              }
+            })
+            .catch((err) => {
+              console.log(err); //代码错误、请求失败捕获
+            });
+        } else {
+          this.$message({
+            duration: 1500,
+            showClose: true,
+            message: "装置下线，发送指令失败",
+            type: "error",
+          });
+        }
+      });
+    },
     //历史图片跳转
     handlehistoryPic() {
       console.log(this.areaData);
+      if (this.areaData.id == "13276") {
+        // "id": 13009,
+        //     "towerid": 3980,
+        this.$set(this.areaData, "id", 13009);
+        this.$set(this.areaData, "towerid", 3980);
+      }
       console.log(this.selectDyId, this.selectLineId, this.selectTowerId);
       // console.log(this.zzCmdid, this.selectChannelValue);
       if (typeof this.dateValue == "number") {
@@ -203,7 +494,7 @@ export default {
         query: {
           dyId: this.selectDyId,
           lineId: this.selectLineId,
-          towerId: this.selectTowerId,
+          towerId: this.areaData.towerid,
           termId: this.areaData.id,
           cmdId: this.areaData.cmdid,
           channelId: this.selectChannelValue,
@@ -216,6 +507,80 @@ export default {
       console.log(this.areaData);
       this.$refs.parameterSetref.display(this.areaData);
     },
+    //基本信息报
+    //数据查询
+    handleSearchCommand(command, row) {
+      console.log(command, row);
+      switch (command) {
+        case "info":
+          this.$refs.baseInfor_ref.display(row);
+          break;
+        case "workStatus":
+          this.$refs.workStatus_ref.display(row);
+          break;
+        case "runStatus":
+          this.$refs.runStatus_ref.display(row);
+          break;
+        case "GPS":
+          this.$refs.gpsSite_ref.display(row);
+          break;
+        case "faultInfo":
+          this.$refs.fultInfo_ref.display(row);
+          break;
+        default:
+          break;
+      }
+    },
+    //焦距放大缩小
+    amplify() {
+      getTermStatus({ termId: this.areaData.id }).then((res) => {
+        console.log(res);
+        if (res.data.isonline) {
+          updateTermCamera({
+            termId: this.areaData.id,
+            channelId: this.channelarrValue,
+            type: 6,
+          })
+            .then((res) => {})
+            .catch();
+          //this.$refs.infodialog_ref.getListData(this.channelId, this.cmdid);
+        } else {
+          this.$message({
+            duration: 1500,
+            showClose: true,
+            message: "装置下线，发送指令失败",
+            type: "error",
+          });
+        }
+      });
+      console.log(this.channelarrValue, this.areaData.id);
+    },
+    //焦距缩小
+    reduce() {
+      getTermStatus({ termId: this.areaData.id }).then((res) => {
+        console.log(res);
+        if (res.data.isonline) {
+          updateTermCamera({
+            termId: this.areaData.id,
+            channelId: this.channelarrValue,
+            type: 7,
+          })
+            .then((res) => {})
+            .catch();
+          //this.$refs.infodialog_ref.getListData(this.channelId, this.cmdid);
+        } else {
+          this.$message({
+            duration: 1500,
+            showClose: true,
+            message: "装置下线，发送指令失败",
+            type: "error",
+          });
+        }
+      });
+    },
+    handleuploadPic() {
+      this.$refs.uploadpicref.display(this.areaData);
+    },
   },
 };
 </script>
@@ -227,6 +592,14 @@ export default {
     color: #169e8c;
     font-size: 14px;
     font-weight: normal;
+    display: flex;
+    justify-content: space-between;
+    span {
+      font-size: 12px;
+    }
+    .el-button--text {
+      color: #f08200;
+    }
   }
   .paramsDate {
     margin-bottom: 16px;
@@ -238,7 +611,7 @@ export default {
       margin-bottom: 8px;
     }
     .el-radio-group {
-      display: flex;
+      // display: flex;
       flex-wrap: wrap;
       .el-radio-button {
         margin-right: 6px;
@@ -269,5 +642,38 @@ export default {
       }
     }
   }
+  .setfocalLength {
+    margin-bottom: 16px;
+    position: relative;
+    h3 {
+      font-size: 14px;
+      font-weight: normal;
+      color: #303133;
+      margin-bottom: 8px;
+    }
+    .selectChannel {
+      display: flex;
+      align-items: center;
+      margin-bottom: 12px;
+      .labelname {
+        font-size: 14px;
+        margin-right: 4px;
+        width: 80px;
+        color: #666;
+      }
+    }
+    .buttonGroup {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      .el-button {
+        margin-bottom: 8px;
+        width: 104px;
+      }
+      .el-button + .el-button {
+        margin-left: 0px;
+      }
+    }
+  }
 }
 </style>

src/views/realTimeMonitor/components/setAppButton.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="buttonBox">
+    <el-button type="primary" @click="handleSetChannel">APP设置 </el-button>
+    <setAppDialog ref="setChannelDialog_ref"></setAppDialog>
+  </div>
+</template>
+<script>
+import {} from "@/utils/api/index";
+import setAppDialog from "./setAppDialog.vue";
+export default {
+  components: { setAppDialog },
+  data() {
+    return {};
+  },
+  watch: {},
+  mounted() {},
+  computed: {
+    termId() {
+      return this.$store.state.termId;
+    },
+    channelIdList() {
+      return this.$store.state.channelIdList;
+    },
+  },
+
+  methods: {
+    handleSetChannel() {
+      this.$refs.setChannelDialog_ref.display();
+    },
+  },
+  destroyed() {},
+  beforeRouteLeave(to, from, next) {},
+};
+</script>

src/views/realTimeMonitor/components/setAppDialog.vue

@@ -0,0 +1,622 @@
+<template>
+  <el-dialog
+    class="setAppDialog"
+    title="App设置"
+    :visible.sync="isShow"
+    :close-on-click-modal="false"
+    width="880px"
+    @close="handleclose"
+  >
+    <div class="zzinfo">
+      装置编号：{{ areaData.cmdid }}
+      <el-button type="text" icon="el-icon-refresh" @click="searchBtn"
+        >刷新</el-button
+      >
+    </div>
+    <div class="channelsetBox" v-loading="appsetLoading">
+      <el-form ref="form" :model="appForm" label-width="160px">
+        <el-form-item label="装置编号">
+          <el-input v-model="appForm.CMDID"></el-input>
+        </el-form-item>
+        <el-form-item label="装置通道数">
+          <el-input v-model="appForm.channels"></el-input>
+        </el-form-item>
+        <el-form-item label="装置型号 ">
+          <el-input v-model="appForm.model"></el-input>
+        </el-form-item>
+        <el-form-item label="装置名称">
+          <el-input v-model="appForm.equipName"></el-input>
+        </el-form-item>
+        <el-form-item label="生产厂家">
+          <el-input v-model="appForm.bsManufacturer"></el-input>
+        </el-form-item>
+        <el-form-item label="生产日期">
+          <el-date-picker
+            v-model="appForm.productionDate"
+            value-format="timestamp"
+            type="date"
+            placeholder="选择日期"
+            @focus="handleFocus"
+          >
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="图像质量">
+          <el-input v-model="appForm.imgQuality"></el-input>
+          <!-- <span class="infoSpan">(0-100的整数)</span> -->
+        </el-form-item>
+        <el-form-item label="心跳周期" class="heartClass">
+          <el-input v-model="appForm.heartbeat"></el-input>
+          <span class="infoSpan">(分)</span>
+        </el-form-item>
+
+        <!-- <el-form-item label="参数设置">
+          <el-checkbox
+            label="报文子包起始号"
+            v-model="appForm.usbchecked"
+          ></el-checkbox>
+        </el-form-item> -->
+        <el-form-item label="报文子包起始号">
+          <el-select v-model="appForm.upgradePacketBase" placeholder="请选择">
+            <el-option
+              v-for="item in PacketBaseOptions"
+              :key="item.id"
+              :label="item.value"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="规约">
+          <el-select v-model="appForm.protocol" placeholder="请选择">
+            <el-option
+              v-for="item in protocolOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="网络协议">
+          <el-radio-group
+            v-model="appForm.networkProtocol"
+            @input="changenetwork"
+          >
+            <el-radio
+              v-for="item in netWorkList"
+              :key="item.value"
+              :label="item.value"
+              :value="item.value"
+            >
+              {{ item.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="CMA服务器ip">
+          <el-input v-model="appForm.server"></el-input>
+        </el-form-item>
+        <el-form-item label="CMA服务器端口" class="cmaClass">
+          <el-input v-model="appForm.port"></el-input>
+          <span class="infoSpan">(1025-65535)</span>
+        </el-form-item>
+
+        <el-form-item label="图像数据分包大小" class="packetClass">
+          <el-input v-model="appForm.packetSize"></el-input>
+        </el-form-item>
+
+        <el-form-item label="日志保留时间" class="packetClass">
+          <el-input v-model="appForm.timeForKeepingLogs"></el-input>
+          <span class="infoSpan">(天)</span>
+        </el-form-item>
+
+        <el-form-item label="未上传图像的保留时间" class="packetClass">
+          <el-input v-model="appForm.timeForKeepingPhotos"></el-input>
+          <span class="infoSpan">(天)</span>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="handleclose" :disabled="appsetLoading"
+        >取 消</el-button
+      >
+      <el-button
+        type="primary"
+        :disabled="appsetLoading"
+        @click="handleConfim"
+        :loading="appLoading"
+        >确 定</el-button
+      >
+    </div>
+  </el-dialog>
+</template>
+<script>
+import {
+  getChannelListJoggle,
+  getTermStatus,
+  setTermCamera,
+  getTermCameraRequest,
+} from "@/utils/api/index";
+export default {
+  props: {},
+  data() {
+    return {
+      appsetLoading: true,
+      isShow: false,
+      appLoading: false,
+      netWorkList: [
+        {
+          value: 0,
+          label: "tcp",
+        },
+        {
+          value: 1,
+          label: "udp",
+        },
+      ], //通道选项
+      appForm: {
+        channels: 4, //装置通道数,程序默认值为4
+        packetSize: 2048, //图像数据分包大小
+        timeForKeepingLogs: 15, //效范围：1*86400（含）-45*86400（含）  不设置的默认值为 15*86400
+        timeForKeepingPhotos: 15, //有效范围：1*86400（含）-45*86400（含）   不设置的默认值为 15*86400
+        imgQuality: "", //图像质量
+        heartbeat: 10, //心跳周期
+        upgradePacketBase: 0, //升级报文中，子包起始号 一般可设置的值是 0或者1
+        protocol: "", // 规约（湖南、浙江 ...） 修改后需重启
+        networkProtocol: 1, //  网络协议 0: tcp 1 udp 修改后需重启
+        //network: "", // 使用的网络， 暂时不做配置
+        CMDID: "", // 装置编号  修改后需重启
+        server: "", // CMA 服务器ip  修改后需重启
+        port: "", // CMA服务器端口 1025-65535   修改后需重启
+        model: "", // 装置型号
+        equipName: "", // 装置名称
+        bsManufacturer: "", // 生产厂家
+        productionDate: "", // 生产日期
+      },
+      protocolOptions: [
+        {
+          id: 65280,
+          name: "国网I1",
+        },
+        {
+          id: 65296,
+          name: "陕西",
+        },
+        {
+          id: 65281,
+          name: "安徽",
+        },
+        {
+          id: 65282,
+          name: "江苏",
+        },
+        {
+          id: 65283,
+          name: "湖南",
+        },
+        {
+          id: 65284,
+          name: "浙江",
+        },
+        {
+          id: 65285,
+          name: "河南",
+        },
+        {
+          id: 65286,
+          name: "河南郑州",
+        },
+      ],
+      PacketBaseOptions: [
+        {
+          id: 0,
+          value: 0,
+        },
+        {
+          id: 1,
+          value: 1,
+        },
+      ],
+      requestid: "",
+      searchNum: 0,
+      searchTimer: null,
+      setNum: 0,
+      setTimer: null,
+    };
+  },
+  computed: {
+    areaData() {
+      return this.$store.state.currentData;
+    },
+  },
+  mounted() {
+    // this.appForm.zzbh = this.areaData.cmdid;
+    this.appForm.timeForKeepingPhotos =
+      this.appForm.timeForKeepingPhotos * 86400;
+    this.appForm.timeForKeepingLogs = this.appForm.timeForKeepingLogs * 86400;
+    // this.appForm.aival = this.aiOptions[0].value;
+  },
+  methods: {
+    handleFocus() {
+      if (this.appForm.productionDate == "") {
+        this.appForm.productionDate = new Date();
+      }
+    },
+    changenetwork() {
+      console.log(this.appForm.networkProtocol);
+    },
+    handleConfim() {
+      console.log("点击了确定");
+      console.log(this.appForm);
+
+      this.appLoading = true;
+
+      //--act=cfg --udp=1 --cmdid=XY-ANDROIDSIM-002 --pathType=1 --updateType=0 --path=data/channels/1.json --configs=3 --name1=osd.leftTop --type1=1 --value1="OSD for LeftTop %%CH%%" --name2=osd.rightTop --type2=255 --value2="OSD for rIGHTTop %%CH%%" --name3=usbCamera --type3=0 --value3=1 --clientid=5 --reqid=TS
+      getTermStatus({ termId: this.areaData.id }).then((res) => {
+        console.log(res);
+        if (res.data.isonline) {
+          let params = [
+            {
+              name: "act",
+              value: "cfg",
+            },
+            {
+              name: "udp",
+              value: 1,
+            },
+            {
+              name: "reboot",
+              value: 1,
+            },
+            {
+              name: "pathType",
+              value: 1,
+            },
+            {
+              name: "updateType",
+              value: 1,
+            },
+            {
+              name: "path",
+              value: "data/App.json",
+            },
+            {
+              name: "configs",
+              value: 16,
+            },
+            //装置通道数
+            { name: "name1", value: "channels" },
+            { name: "value1", value: this.appForm.channels },
+            { name: "type1", value: 0 },
+            //图像数据分包大小
+            { name: "name2", value: "packetSize" },
+            { name: "value2", value: this.appForm.packetSize },
+            { name: "type2", value: 0 },
+            //日志保留时间，单位秒 程序默认值为15天
+            { name: "name3", value: "timeForKeepingLogs" },
+            { name: "value3", value: this.appForm.timeForKeepingLogs * 86400 },
+            { name: "type3", value: 0 },
+            //未上传图像的保留时间
+            { name: "name4", value: "timeForKeepingPhotos" },
+            {
+              name: "value4",
+              value: this.appForm.timeForKeepingPhotos * 86400,
+            },
+            { name: "type4", value: 0 },
+            //图像质量
+            { name: "name5", value: "imgQuality" },
+            { name: "value5", value: this.appForm.imgQuality },
+            { name: "type5", value: 0 },
+            //规约（湖南、浙江 ...） 修改后需重启
+            { name: "name6", value: "protocol" },
+            { name: "value6", value: this.appForm.protocol },
+            { name: "type6", value: 0 },
+            // 网络协议 0: tcp 1 udp 修改后需重启
+            { name: "name7", value: "networkProtocol" },
+            { name: "value7", value: this.appForm.networkProtocol },
+            { name: "type7", value: 0 },
+            //装置编号  修改后需重启
+            { name: "name8", value: "CMDID" },
+            { name: "value8", value: this.appForm.CMDID },
+            { name: "type8", value: 1 },
+            //CMA 服务器ip  修改后需重启
+            { name: "name9", value: "server" },
+            { name: "value9", value: this.appForm.server },
+            { name: "type9", value: 1 },
+            //CMA服务器端口 1025-65535   修改后需重启
+            { name: "name10", value: "port" },
+            { name: "value10", value: this.appForm.port },
+            { name: "type10", value: 0 },
+            //装置型号
+            { name: "name11", value: "model" },
+            { name: "value11", value: this.appForm.model },
+            { name: "type11", value: 1 },
+            //EquipName 装置名称
+            { name: "name12", value: "equipName" },
+            { name: "value12", value: this.appForm.equipName },
+            { name: "type12", value: 1 },
+            //BsManufacturer 生产厂家
+            { name: "name13", value: "bsManufacturer" },
+            { name: "value13", value: this.appForm.bsManufacturer },
+            { name: "type13", value: 1 },
+            //productionDate 生产日期
+            { name: "name14", value: "productionDate" },
+            {
+              name: "value14",
+              value: Math.round(this.appForm.productionDate / 1000),
+            },
+            { name: "type14", value: 0 },
+            //心跳周期
+            { name: "name15", value: "heartbeat" },
+            { name: "value15", value: this.appForm.heartbeat },
+            { name: "type15", value: 0 },
+            //子包
+            { name: "name16", value: "upgradePacketBase" },
+            { name: "value16", value: this.appForm.upgradePacketBase },
+            { name: "type16", value: 0 },
+          ];
+          this.setTermFn(params);
+        } else {
+          this.$message({
+            duration: 1500,
+            showClose: true,
+            message: "装置下线，发送指令失败",
+            type: "error",
+          });
+        }
+      });
+    },
+    setTermFn(val) {
+      setTermCamera({
+        termId: this.areaData.id,
+        list: val,
+      })
+        .then((res) => {
+          console.log(res);
+          this.requestid = res.data.requestId;
+
+          this.getTakechannelStatus();
+          clearInterval(this.setTimer);
+          this.setTimer = window.setInterval(() => {
+            this.getTakechannelStatus();
+            this.setNum++;
+          }, 1000);
+        })
+        .catch((err) => {});
+    },
+    getTakechannelStatus() {
+      getTermCameraRequest({ requestid: this.requestid })
+        .then((res) => {
+          console.log(res);
+          if (res.data.success == 1) {
+            window.clearInterval(this.setTimer);
+            this.setTimer = null;
+            this.setNum = 0;
+            this.isShow = false;
+            this.appLoading = false;
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              message: "设置成功",
+              type: "success",
+            });
+          } else if (this.setNum > 3) {
+            // this.isShow = false;
+            window.clearInterval(this.setTimer);
+            this.setTimer = null;
+            this.setNum = 0;
+            this.appLoading = false;
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              message: "设置失败",
+              type: "error",
+            });
+          }
+        })
+        .catch((err) => {});
+    },
+    searchBtn() {
+      this.appsetLoading = true;
+      //--act=cfg --udp=1 --cmdid=XY-ANDROIDSIM-002 --pathType=1 --updateType=0 --path=data/channels/1.json --configs=3 --name1=osd.leftTop --type1=1 --value1="OSD for LeftTop %%CH%%" --name2=osd.rightTop --type2=255 --value2="OSD for rIGHTTop %%CH%%" --name3=usbCamera --type3=0 --value3=1 --clientid=5 --reqid=TS
+      getTermStatus({ termId: this.areaData.id }).then((res) => {
+        console.log(res);
+        if (res.data.isonline) {
+          let params = [
+            {
+              name: "act",
+              value: "cfg",
+            },
+            {
+              name: "udp",
+              value: 1,
+            },
+
+            {
+              name: "pathType",
+              value: 1,
+            },
+            {
+              name: "updateType",
+              value: 0,
+            },
+            {
+              name: "path",
+              value: "data/App.json",
+            },
+          ];
+          console.log(params);
+          this.searchTermFn(params);
+        } else {
+          this.$message({
+            duration: 1500,
+            showClose: true,
+            message: "装置下线，发送指令失败",
+            type: "error",
+          });
+        }
+      });
+    },
+    searchTermFn(val) {
+      setTermCamera({
+        termId: this.areaData.id,
+        list: val,
+      })
+        .then((res) => {
+          console.log(res);
+          this.requestid = res.data.requestId;
+          this.getsearchchannelStatus();
+          clearInterval(this.searchTimer);
+          this.searchTimer = window.setInterval(() => {
+            this.getsearchchannelStatus();
+            this.searchNum++;
+          }, 1000);
+        })
+        .catch((err) => {});
+    },
+    getsearchchannelStatus() {
+      getTermCameraRequest({ requestid: this.requestid })
+        .then((res) => {
+          console.log(res);
+          if (res.data.success == 1) {
+            window.clearInterval(this.searchTimer);
+            this.searchTimer = null;
+            this.searchNum = 0;
+            this.appsetLoading = false;
+            console.log(res.data);
+            console.log(JSON.parse(res.data.data));
+            const resultData = JSON.parse(res.data.data);
+            const resultContent = JSON.parse(
+              decodeURIComponent(escape(window.atob(resultData.content)))
+            );
+            console.log(resultContent);
+
+            this.appForm.channels = resultContent.channels; //装置通道数,程序默认值为4
+            this.appForm.packetSize = resultContent.packetSize; //图像数据分包大小
+            this.appForm.timeForKeepingLogs =
+              resultContent.timeForKeepingLogs / 86400; //效范围：1*86400（含）-45*86400（含）  不设置的默认值为 15*86400
+            this.appForm.timeForKeepingPhotos =
+              resultContent.timeForKeepingPhotos / 86400; //有效范围：1*86400（含）-45*86400（含）   不设置的默认值为 15*86400
+            this.appForm.imgQuality = resultContent.imgQuality; //图像质量
+            this.appForm.heartbeat = resultContent.heartbeat; //心跳周期
+            this.appForm.upgradePacketBase = resultContent.upgradePacketBase; //升级报文中，子包起始号 一般可设置的值是 0或者1
+            this.appForm.protocol = resultContent.protocol; // 规约（湖南、浙江 ...） 修改后需重启
+            this.appForm.networkProtocol = resultContent.networkProtocol; //  网络协议 0: tcp 1 udp 修改后需重启
+            // this.appForm.network = resultContent.network; // 使用的网络， 暂时不做配置
+            this.appForm.CMDID = resultContent.CMDID; // 装置编号  修改后需重启
+            this.appForm.server = resultContent.server; // CMA 服务器ip  修改后需重启
+            this.appForm.port = resultContent.port; // CMA服务器端口 1025-65535   修改后需重启
+            this.appForm.model = resultContent.model; // 装置型号
+            this.appForm.equipName = resultContent.equipName; // 装置名称
+            this.appForm.bsManufacturer = resultContent.bsManufacturer; // 生产厂家
+            this.appForm.productionDate = resultContent.productionDate * 1000; // 生产日期
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              message: "查询成功",
+              type: "success",
+            });
+          } else if (this.searchNum > 3) {
+            // this.isShow = false;
+            // this.channelLoading = false;
+            window.clearInterval(this.searchTimer);
+            this.searchTimer = null;
+            this.searchNum = 0;
+            this.appsetLoading = false;
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              message: "查询失败",
+              type: "error",
+            });
+          }
+        })
+        .catch((err) => {});
+    },
+    display() {
+      this.isShow = true;
+      this.appForm.CMDID = this.areaData.cmdid;
+      this.searchBtn();
+      console.log(this.areaData);
+    },
+    handleclose() {
+      this.isShow = false;
+      this.bgflag = false;
+      this.appLoading = false;
+      this.appForm.channels = 4; //装置通道数,程序默认值为4
+      this.appForm.packetSize = 2048; //图像数据分包大小
+      this.appForm.timeForKeepingLogs = 15; //效范围：1*86400（含）-45*86400（含）  不设置的默认值为 15*86400
+      this.appForm.timeForKeepingPhotos = 15; //有效范围：1*86400（含）-45*86400（含）   不设置的默认值为 15*86400
+      this.appForm.imgQuality = ""; //图像质量
+      this.appForm.heartbeat = 10; //心跳周期
+      this.appForm.upgradePacketBase = 0; //升级报文中，子包起始号 一般可设置的值是 0或者1
+      this.appForm.protocol = this.areaData.protocol; // 规约（湖南、浙江 ...） 修改后需重启
+      this.appForm.networkProtocol = 0; //  网络协议 0: tcp 1 udp 修改后需重启
+      // this.appForm.network = resultContent.network; // 使用的网络， 暂时不做配置
+      this.appForm.CMDID = this.areaData.cmdid; // 装置编号  修改后需重启
+      this.appForm.server = ""; // CMA 服务器ip  修改后需重启
+      this.appForm.port = ""; // CMA服务器端口 1025-65535   修改后需重启
+      this.appForm.model = ""; // 装置型号
+      this.appForm.equipName = ""; // 装置名称
+      this.appForm.bsManufacturer = ""; // 生产厂家
+      this.appForm.productionDate = ""; // 生产日期
+      window.clearInterval(this.searchTimer);
+      this.searchTimer = null;
+      this.searchNum = 0;
+    },
+  },
+};
+</script>
+<style lang="less">
+.setAppDialog {
+  .zzinfo {
+    position: absolute;
+    top: 22px;
+    left: 120px;
+  }
+  .el-form {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+  .el-dialog__body {
+    padding-bottom: 0px;
+    .el-form-item--small.el-form-item {
+      margin-bottom: 12px;
+    }
+    .channelsetBox {
+      width: 100%;
+      .el-input {
+        width: 250px;
+      }
+    }
+    .infoSpan {
+      margin-left: 8px;
+    }
+    .heartClass {
+      .el-input {
+        width: 190px;
+      }
+    }
+    .cmaClass {
+      .el-input {
+        width: 180px;
+      }
+    }
+    .packetClass {
+      .el-input {
+        width: 200px;
+      }
+    }
+  }
+  .dialog-footer {
+    .el-button--default,
+    .el-button--primary {
+      width: 80px !important;
+      margin-bottom: 0px !important;
+    }
+    .el-button + .el-button {
+      margin-left: 10px !important;
+    }
+  }
+}
+</style>

src/views/realTimeMonitor/components/setChannelButton.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="buttonBox">
+    <el-button type="primary" @click="handleSetChannel">通道设置 </el-button>
+    <setChannelDialog ref="setChannelDialog_ref"></setChannelDialog>
+  </div>
+</template>
+<script>
+import {} from "@/utils/api/index";
+import setChannelDialog from "./setChannelDialog.vue";
+export default {
+  components: { setChannelDialog },
+  data() {
+    return {};
+  },
+  watch: {},
+  mounted() {},
+  computed: {
+    termId() {
+      return this.$store.state.termId;
+    },
+    channelIdList() {
+      return this.$store.state.channelIdList;
+    },
+  },
+
+  methods: {
+    handleSetChannel() {
+      this.$refs.setChannelDialog_ref.display();
+    },
+  },
+  destroyed() {},
+  beforeRouteLeave(to, from, next) {},
+};
+</script>

src/views/realTimeMonitor/components/setChannelDialog.vue

@@ -0,0 +1,876 @@
+<template>
+  <el-dialog
+    class="setChannelDialog"
+    title="通道设置"
+    :visible.sync="isShow"
+    :close-on-click-modal="false"
+    width="640px"
+    @close="handleclose"
+  >
+    <div class="zzinfo">
+      装置编号：{{ areaData.cmdid
+      }}<el-button type="text" icon="el-icon-refresh" @click="searchBtn"
+        >刷新</el-button
+      >
+    </div>
+    <div class="channelsetBox" v-loading="channelsetLoading">
+      <el-form ref="form" :model="channelForm" label-width="100px">
+        <!-- <el-form-item label="装置编号">
+          <el-input v-model="channelForm.zzbh" disabled></el-input>
+        </el-form-item> -->
+        <el-form-item label="拍照通道">
+          <el-radio-group
+            v-model="channelForm.selectChannel"
+            @input="changeChannel"
+          >
+            <el-radio
+              v-for="item in channelList"
+              :key="item.channelid"
+              :label="item.channelid"
+              :value="item.channelid"
+            >
+              {{
+                item.alias !== null && item.alias !== ""
+                  ? item.alias
+                  : item.channelname
+              }}</el-radio
+            >
+            <!-- <el-radio :label="6">备选项</el-radio>
+            <el-radio :label="9">备选项</el-radio> -->
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="照片大小" class="photoSize">
+          <el-input v-model="channelForm.resolutionCX"></el-input>
+          <el-input v-model="channelForm.resolutionCY"></el-input>
+        </el-form-item>
+        <div class="videoDiv">
+          <el-form-item label="视频分辨率" class="videoclass">
+            <el-select
+              v-model="channelForm.videoSize"
+              placeholder="请选择"
+              @change="changevideoChannel"
+            >
+              <el-option
+                v-for="item in videoOptionSize"
+                :key="item.value"
+                :label="item.name + '(' + item.label + ')'"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="视频时长">
+            <el-input v-model="channelForm.videoDuration"></el-input>
+            <span class="infoSpan">(秒)</span>
+          </el-form-item>
+        </div>
+        <el-form-item label="压缩率">
+          <el-input v-model="channelForm.ysl"></el-input>
+          <span class="infoSpan">(0-100的整数)</span>
+        </el-form-item>
+        <el-form-item label="参数设置">
+          <el-checkbox
+            label="USB接口"
+            v-model="channelForm.usbchecked"
+          ></el-checkbox>
+          <el-checkbox
+            label="自动对焦"
+            v-model="channelForm.zzdjchecked"
+          ></el-checkbox>
+          <el-checkbox
+            label="自动曝光"
+            v-model="channelForm.zdbgchecked"
+            @change="bgchange"
+          ></el-checkbox>
+        </el-form-item>
+        <div class="isoDiv">
+          <el-form-item label="曝光时间">
+            <el-input v-model="channelForm.bgsj" :disabled="bgflag"></el-input>
+            <span class="infoSpan">(毫秒)</span>
+          </el-form-item>
+          <el-form-item label="ISO">
+            <el-input v-model="channelForm.iso" :disabled="bgflag"></el-input>
+          </el-form-item>
+        </div>
+        <el-form-item label="模式选择">
+          <el-checkbox
+            label="HDR模式"
+            v-model="channelForm.hdrchecked"
+          ></el-checkbox>
+          <el-checkbox
+            label="夜晚模式"
+            v-model="channelForm.ywchecked"
+          ></el-checkbox>
+        </el-form-item>
+        <el-form-item label="旋转角度">
+          <el-select v-model="channelForm.roteval" placeholder="请选择">
+            <el-option
+              v-for="item in roteOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="AI识别">
+          <el-select v-model="channelForm.aival" placeholder="请选择">
+            <el-option
+              v-for="item in aiOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="左上OSD">
+          <el-input v-model="channelForm.ltosd"></el-input>
+          <span class="infoSpan">(多行使用\n换行)</span>
+        </el-form-item>
+        <el-form-item label="右上OSD">
+          <el-input v-model="channelForm.rtosd"></el-input>
+          <span class="infoSpan">(多行使用\n换行)</span>
+        </el-form-item>
+        <el-form-item label="左下OSD">
+          <el-input v-model="channelForm.lbosd"></el-input>
+          <span class="infoSpan">(多行使用\n换行)</span>
+        </el-form-item>
+        <el-form-item label="右下OSD">
+          <el-input v-model="channelForm.rbosd"></el-input>
+          <span class="infoSpan">(多行使用\n换行)</span>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="handleclose" :disabled="channelsetLoading"
+        >取 消</el-button
+      >
+      <el-button
+        type="primary"
+        :disabled="channelsetLoading"
+        @click="handleConfim"
+        :loading="channelLoading"
+        >确 定</el-button
+      >
+    </div>
+  </el-dialog>
+</template>
+<script>
+import {
+  getChannelListJoggle,
+  getTermStatus,
+  setTermCamera,
+  getTermCameraRequest,
+} from "@/utils/api/index";
+export default {
+  props: {},
+  data() {
+    return {
+      channelsetLoading: true,
+      isShow: false,
+      channelLoading: false,
+      channelList: [], //通道选项
+      channelForm: {
+        zzbh: "",
+        selectChannel: "",
+        resolutionCX: "",
+        resolutionCY: "",
+        videoSize: "",
+        videoCX: "",
+        videoCY: "",
+        videoDuration: 15,
+        ysl: 80,
+        usbchecked: "",
+        zzdjchecked: "",
+        zdbgchecked: "",
+        bgsj: "",
+        iso: "",
+        hdrchecked: "",
+        ywchecked: "",
+        roteval: "",
+        aival: "",
+        ltosd: "",
+        rtosd: "",
+        lbosd: "",
+        rbosd: "",
+      },
+      bgflag: false,
+      roteOptions: [
+        {
+          value: 0,
+          label: "无旋转",
+        },
+        {
+          value: 1,
+          label: "0°",
+        },
+        {
+          value: 2,
+          label: "90°",
+        },
+        {
+          value: 3,
+          label: "180°",
+        },
+        {
+          value: 4,
+          label: "270°",
+        },
+      ],
+      aiOptions: [
+        {
+          value: 0,
+          label: "0-关闭当前通道AI识别",
+        },
+        {
+          value: 1,
+          label: "1-启用但不绘制区域",
+        },
+        {
+          value: 2,
+          label: "2-启用并绘制区域",
+        },
+      ],
+      pictureSize: [
+        {
+          value: 0,
+          label: "5376X3024",
+        },
+        {
+          value: 1,
+          label: "1920X1080",
+        },
+        {
+          value: 2,
+          label: "2048X1536",
+        },
+      ],
+      videoOptionSize: [
+        {
+          value: 0,
+          name: "默认",
+          label: "720X480",
+        },
+        {
+          value: 1,
+          name: "QVGA",
+          label: "320X240",
+        },
+        {
+          value: 2,
+          name: "VGA",
+          label: "640X480",
+        },
+        {
+          value: 3,
+          name: "720p",
+          label: "1280X720",
+        },
+        {
+          value: 4,
+          name: "1080p",
+          label: "1920X1080",
+        },
+      ],
+      requestid: "",
+      searchNum: 0,
+      searchTimer: null,
+      setNum: 0,
+      setTimer: null,
+    };
+  },
+  computed: {
+    areaData() {
+      return this.$store.state.currentData;
+    },
+  },
+  mounted() {
+    this.channelForm.zzbh = this.areaData.cmdid;
+    this.channelForm.roteval = this.roteOptions[0].value;
+    this.channelForm.videoSize = this.videoOptionSize[0].value;
+    this.channelForm.aival = this.aiOptions[0].value;
+  },
+  methods: {
+    //获取通道
+    getChannelSelect() {
+      getChannelListJoggle({ termid: this.areaData.id })
+        .then((res) => {
+          this.channelList = res.data.list;
+          this.channelForm.selectChannel = this.channelList[0].channelid;
+          console.log(this.channelList);
+          this.changeChannel();
+        })
+        .catch((err) => {});
+    },
+    //是否选中曝光
+    bgchange(val) {
+      console.log(val, "是否选中");
+      if (val) {
+        this.bgflag = true;
+        this.channelForm.bgsj = "";
+        this.channelForm.iso = "";
+      } else {
+        this.bgflag = false;
+      }
+    },
+    changevideoChannel() {
+      console.log(this.channelForm.videoSize);
+      if (this.channelForm.videoSize == 0) {
+        // this.channelForm.picSize = this.pictureSize[0].value;
+        this.channelForm.videoCX = 720;
+        this.channelForm.videoCY = 480;
+      } else if (this.channelForm.videoSize == 1) {
+        //this.channelForm.picSize = this.pictureSize[1].value;
+        this.channelForm.videoCX = 320;
+        this.channelForm.videoCY = 240;
+      } else if (this.channelForm.videoSize == 2) {
+        this.channelForm.videoCX = 640;
+        this.channelForm.videoCY = 480;
+      } else if (this.channelForm.videoSize == 3) {
+        this.channelForm.videoCX = 1280;
+        this.channelForm.videoCY = 720;
+      } else if (this.channelForm.videoSize == 4) {
+        //this.channelForm.picSize = this.pictureSize[2].value;
+        this.channelForm.videoCX = 1920;
+        this.channelForm.videoCY = 1080;
+      }
+    },
+    //修改通道
+    changeChannel() {
+      console.log(this.channelForm.selectChannel);
+      if (this.channelForm.selectChannel == 1) {
+        // this.channelForm.picSize = this.pictureSize[0].value;
+        this.channelForm.resolutionCX = 5376;
+        this.channelForm.resolutionCY = 3024;
+      } else if (
+        this.channelForm.selectChannel == 2 ||
+        this.channelForm.selectChannel == 3
+      ) {
+        //this.channelForm.picSize = this.pictureSize[1].value;
+        this.channelForm.resolutionCX = 1920;
+        this.channelForm.resolutionCY = 1080;
+      } else if (this.channelForm.selectChannel == 4) {
+        //this.channelForm.picSize = this.pictureSize[2].value;
+        this.channelForm.resolutionCX = 2048;
+        this.channelForm.resolutionCY = 1536;
+      }
+      this.searchBtn();
+    },
+    handleConfim() {
+      console.log("点击了确定");
+      console.log(this.channelForm);
+      this.channelLoading = true;
+
+      //--act=cfg --udp=1 --cmdid=XY-ANDROIDSIM-002 --pathType=1 --updateType=0 --path=data/channels/1.json --configs=3 --name1=osd.leftTop --type1=1 --value1="OSD for LeftTop %%CH%%" --name2=osd.rightTop --type2=255 --value2="OSD for rIGHTTop %%CH%%" --name3=usbCamera --type3=0 --value3=1 --clientid=5 --reqid=TS
+      getTermStatus({ termId: this.areaData.id }).then((res) => {
+        console.log(res);
+        if (res.data.isonline) {
+          let params = [
+            {
+              name: "act",
+              value: "cfg",
+            },
+            {
+              name: "udp",
+              value: 1,
+            },
+            {
+              name: "reboot",
+              value: 0,
+            },
+            {
+              name: "pathType",
+              value: 1,
+            },
+            {
+              name: "updateType",
+              value: 1,
+            },
+            {
+              name: "path",
+              value:
+                "data/channels/" + this.channelForm.selectChannel + ".json",
+            },
+            {
+              name: "configs",
+              value: 19,
+            },
+            // {
+            //   name: "resolutionCX",
+            //   type: 0,
+            //   value: this.channelForm.resolutionCX,
+            // },
+            { name: "name1", value: "resolutionCX" },
+            { name: "value1", value: this.channelForm.resolutionCX },
+            { name: "type1", value: 0 },
+            // {
+            //   name: "resolutionCY",
+            //   type: 0,
+            //   value: this.channelForm.resolutionCY,
+            // },
+            { name: "name2", value: "resolutionCY" },
+            { name: "value2", value: this.channelForm.resolutionCY },
+            { name: "type2", value: 0 },
+            // {
+            //   name: "quality",
+            //   type: 0,
+            //   value: this.channelForm.ysl,
+            // },
+            { name: "name3", value: "quality" },
+            { name: "value3", value: this.channelForm.ysl },
+            { name: "type3", value: 0 },
+            // {
+            //   name: "usbCamera",
+            //   type: 0,
+            //   value: this.channelForm.usbchecked ? 1 : 0,
+            // },
+            { name: "name4", value: "usbCamera" },
+            { name: "value4", value: this.channelForm.usbchecked ? 1 : 0 },
+            { name: "type4", value: 0 },
+            // {
+            //   name: "autoFocus",
+            //   type: 0,
+            //   value: this.channelForm.zzdjchecked ? 1 : 0,
+            // },
+            { name: "name5", value: "autoFocus" },
+            { name: "value5", value: this.channelForm.zzdjchecked ? 1 : 0 },
+            { name: "type5", value: 0 },
+            // {
+            //   name: "autoExposure",
+            //   type: 0,
+            //   value: this.channelForm.zdbgchecked ? 1 : 0,
+            // },
+            { name: "name6", value: "autoExposure" },
+            { name: "value6", value: this.channelForm.zdbgchecked ? 1 : 0 },
+            { name: "type6", value: 0 },
+            // {
+            //   name: "exposureTime",
+            //   type: 0,
+            //   value: this.channelForm.bgsj,
+            // },
+            { name: "name7", value: "exposureTime" },
+            { name: "value7", value: this.channelForm.bgsj },
+            { name: "type7", value: 0 },
+            // {
+            //   name: "sensibility",
+            //   type: 0,
+            //   value: this.channelForm.iso,
+            // },
+            { name: "name8", value: "sensibility" },
+            { name: "value8", value: this.channelForm.iso },
+            { name: "type8", value: 0 },
+            // {
+            //   name: "hdrMode",
+            //   type: 0,
+            //   value: this.channelForm.hdrchecked ? 1 : 0,
+            // },
+            { name: "name9", value: "hdrMode" },
+            { name: "value9", value: this.channelForm.hdrchecked ? 1 : 0 },
+            { name: "type9", value: 0 },
+            // {
+            //   name: "nightMode",
+            //   type: 0,
+            //   value: this.channelForm.ywchecked ? 1 : 0,
+            // },
+            { name: "name10", value: "nightMode" },
+            { name: "value10", value: this.channelForm.ywchecked ? 1 : 0 },
+            { name: "type10", value: 0 },
+            // {
+            //   name: "orientation",
+            //   type: 0,
+            //   value: this.channelForm.roteval,
+            // },
+            { name: "name11", value: "orientation" },
+            { name: "value11", value: this.channelForm.roteval },
+            { name: "type11", value: 0 },
+            // {
+            //   name: "recognization",
+            //   type: 0,
+            //   value: this.channelForm.aival,
+            // },
+            { name: "name12", value: "recognization" },
+            { name: "value12", value: this.channelForm.aival },
+            { name: "type12", value: 0 },
+            // {
+            //   name: "osd.leftTop",
+            //   type: 1,
+            //   value: this.channelForm.ltosd,
+            // },
+            { name: "name13", value: "osd.leftTop" },
+            { name: "value13", value: this.channelForm.ltosd },
+            { name: "type13", value: 1 },
+            // {
+            //   name: "osd.rightTop",
+            //   type: 1,
+            //   value: this.channelForm.rtosd,
+            // },
+            { name: "name14", value: "osd.rightTop" },
+            { name: "value14", value: this.channelForm.rtosd },
+            { name: "type14", value: 1 },
+            // {
+            //   name: "osd.rightBottom",
+            //   type: 1,
+            //   value: this.channelForm.lbosd,
+            // },
+            { name: "name15", value: "osd.leftBottom" },
+            { name: "value15", value: this.channelForm.lbosd },
+            { name: "type15", value: 1 },
+            // {
+            //   name: "osd.leftBottom",
+            //   type: 1,
+            //   value: this.channelForm.rbosd,
+            // },
+            { name: "name16", value: "osd.rightBottom" },
+            { name: "value16", value: this.channelForm.rbosd },
+            { name: "type16", value: 1 },
+            //视频分辨率
+
+            { name: "name17", value: "videoCX" },
+            { name: "value17", value: this.channelForm.videoCX },
+            { name: "type17", value: 0 },
+
+            { name: "name18", value: "videoCY" },
+            { name: "value18", value: this.channelForm.videoCY },
+            { name: "type18", value: 0 },
+            //视频时长
+            { name: "name19", value: "videoDuration" },
+            { name: "value19", value: this.channelForm.videoDuration },
+            { name: "type19", value: 0 },
+          ];
+          console.log(params);
+          this.setTermFn(params);
+        } else {
+          this.$message({
+            duration: 1500,
+            showClose: true,
+            message: "装置下线，发送指令失败",
+            type: "error",
+          });
+        }
+      });
+    },
+    setTermFn(val) {
+      setTermCamera({
+        termId: this.areaData.id,
+        list: val,
+      })
+        .then((res) => {
+          console.log(res);
+          this.requestid = res.data.requestId;
+
+          this.getTakechannelStatus();
+          clearInterval(this.setTimer);
+          this.setTimer = window.setInterval(() => {
+            this.getTakechannelStatus();
+            this.setNum++;
+          }, 1000);
+        })
+        .catch((err) => {});
+    },
+    getTakechannelStatus() {
+      getTermCameraRequest({ requestid: this.requestid })
+        .then((res) => {
+          console.log(res);
+          if (res.data.success == 1) {
+            window.clearInterval(this.setTimer);
+            this.setTimer = null;
+            this.setNum = 0;
+            this.isShow = false;
+            this.channelLoading = false;
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              message: "通道设置成功",
+              type: "success",
+            });
+          } else if (this.setNum > 3) {
+            // this.isShow = false;
+            window.clearInterval(this.setTimer);
+            this.setTimer = null;
+            this.setNum = 0;
+            this.channelLoading = false;
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              message: "通道设置失败",
+              type: "error",
+            });
+          }
+        })
+        .catch((err) => {});
+    },
+    searchBtn() {
+      this.channelsetLoading = true;
+      //--act=cfg --udp=1 --cmdid=XY-ANDROIDSIM-002 --pathType=1 --updateType=0 --path=data/channels/1.json --configs=3 --name1=osd.leftTop --type1=1 --value1="OSD for LeftTop %%CH%%" --name2=osd.rightTop --type2=255 --value2="OSD for rIGHTTop %%CH%%" --name3=usbCamera --type3=0 --value3=1 --clientid=5 --reqid=TS
+      getTermStatus({ termId: this.areaData.id }).then((res) => {
+        console.log(res);
+        if (res.data.isonline) {
+          let params = [
+            {
+              name: "act",
+              value: "cfg",
+            },
+            {
+              name: "udp",
+              value: 1,
+            },
+
+            {
+              name: "pathType",
+              value: 1,
+            },
+            {
+              name: "updateType",
+              value: 0,
+            },
+            {
+              name: "path",
+              value:
+                "data/channels/" + this.channelForm.selectChannel + ".json",
+            },
+          ];
+          console.log(params);
+          this.searchTermFn(params);
+        } else {
+          this.$message({
+            duration: 1500,
+            showClose: true,
+            message: "装置下线，发送指令失败",
+            type: "error",
+          });
+        }
+      });
+    },
+    searchTermFn(val) {
+      setTermCamera({
+        termId: this.areaData.id,
+        list: val,
+      })
+        .then((res) => {
+          console.log(res);
+          this.requestid = res.data.requestId;
+          this.getsearchchannelStatus();
+          clearInterval(this.searchTimer);
+          this.searchTimer = window.setInterval(() => {
+            this.getsearchchannelStatus();
+            this.searchNum++;
+          }, 1000);
+        })
+        .catch((err) => {});
+    },
+    getsearchchannelStatus() {
+      getTermCameraRequest({ requestid: this.requestid })
+        .then((res) => {
+          console.log(res);
+          if (res.data.success == 1) {
+            window.clearInterval(this.searchTimer);
+            this.searchTimer = null;
+            this.searchNum = 0;
+            this.channelsetLoading = false;
+            // this.isShow = false;
+            // this.channelLoading = false;
+            console.log(res.data);
+            console.log(JSON.parse(res.data.data));
+            const resultData = JSON.parse(res.data.data);
+            const resultContent = JSON.parse(
+              decodeURIComponent(escape(window.atob(resultData.content)))
+            );
+            console.log(resultContent);
+
+            this.channelForm.ysl = resultContent.quality;
+            this.channelForm.usbchecked =
+              resultContent.usbCamera == 1 ? true : false;
+            this.channelForm.zzdjchecked =
+              resultContent.autoFocus == 1 ? true : false;
+            this.channelForm.zdbgchecked =
+              resultContent.autoExposure == 1 ? true : false;
+            this.channelForm.bgsj =
+              resultContent.exposureTime == 0 ? "" : resultContent.exposureTime;
+            this.channelForm.iso =
+              resultContent.sensibility == 0 ? "" : resultContent.sensibility;
+            this.channelForm.hdrchecked =
+              resultContent.hdrMode == 1 ? true : false;
+            this.channelForm.ywchecked =
+              resultContent.nightMode == 1 ? true : false;
+            this.channelForm.aival = resultContent.recognization;
+            this.channelForm.roteval = resultContent.orientation;
+            this.channelForm.rtosd = resultContent.osd.rightTop;
+            this.channelForm.ltosd = resultContent.osd.leftTop;
+            this.channelForm.lbosd = resultContent.osd.leftBottom;
+            this.channelForm.rbosd = resultContent.osd.rightBottom;
+            // this.channelForm.videoSize = resultContent.;
+            this.channelForm.videoCX = resultContent.videoCX;
+            this.channelForm.videoCY = resultContent.videoCY;
+            if (this.channelForm.zdbgchecked) {
+              this.bgflag = true;
+              this.channelForm.bgsj = "";
+              this.channelForm.iso = "";
+            } else {
+              this.bgflag = false;
+            }
+            if (
+              this.channelForm.videoCX == 720 &&
+              this.channelForm.videoCY == 480
+            ) {
+              // this.channelForm.picSize = this.pictureSize[0].value;
+              this.channelForm.videoSize = 0;
+            } else if (
+              this.channelForm.videoCX == 320 &&
+              this.channelForm.videoCY == 240
+            ) {
+              //this.channelForm.picSize = this.pictureSize[1].value;
+              this.channelForm.videoSize = 1;
+            } else if (
+              this.channelForm.videoCX == 640 &&
+              this.channelForm.videoCY == 480
+            ) {
+              this.channelForm.videoSize = 2;
+            } else if (
+              this.channelForm.videoCX == 1280 &&
+              this.channelForm.videoCY == 720
+            ) {
+              this.channelForm.videoSize = 3;
+            } else if (
+              this.channelForm.videoCX == 1920 &&
+              this.channelForm.videoCY == 1080
+            ) {
+              //this.channelForm.picSize = this.pictureSize[2].value;
+
+              this.channelForm.videoSize = 4;
+            }
+            this.channelForm.videoDuration = resultContent.videoDuration;
+
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              message: "通道查询成功",
+              type: "success",
+            });
+          } else if (this.searchNum > 3) {
+            // this.isShow = false;
+            // this.channelLoading = false;
+            window.clearInterval(this.searchTimer);
+            this.searchTimer = null;
+            this.searchNum = 0;
+            this.channelsetLoading = false;
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              message: "通道查询失败",
+              type: "error",
+            });
+          }
+        })
+        .catch((err) => {});
+    },
+    display() {
+      this.isShow = true;
+      this.channelForm.zzbh = this.areaData.cmdid;
+      this.getChannelSelect();
+      this.changevideoChannel();
+      console.log(this.areaData);
+    },
+    handleclose() {
+      this.isShow = false;
+      this.bgflag = false;
+      this.channelLoading = false;
+      this.channelForm.zzbh = "";
+      this.channelForm.ysl = 80;
+      this.channelForm.usbchecked = "";
+      this.channelForm.zzdjchecked = "";
+      this.channelForm.zdbgchecked = "";
+      this.channelForm.bgsj = "";
+      this.channelForm.iso = "";
+      this.channelForm.hdrchecked = "";
+      this.channelForm.ywchecked = "";
+      this.channelForm.rtosd = "";
+      this.channelForm.ltosd = "";
+      this.channelForm.lbosd = "";
+      this.channelForm.rbosd = "";
+      this.channelForm.videoSize = "";
+      this.channelForm.videoCX = "";
+      this.channelForm.videoCY = "";
+      this.channelForm.videoDuration = 15;
+      window.clearInterval(this.searchTimer);
+      this.searchTimer = null;
+      this.searchNum = 0;
+    },
+  },
+};
+</script>
+<style lang="less">
+.setChannelDialog {
+  .zzinfo {
+    position: absolute;
+    top: 22px;
+    left: 120px;
+  }
+
+  .el-dialog__body {
+    padding-bottom: 0px;
+    .el-form-item--small.el-form-item {
+      margin-bottom: 12px;
+    }
+    .channelsetBox {
+      width: 100%;
+      // height: 400px;
+      //background: #fcc;
+      .el-input {
+        width: 300px;
+      }
+    }
+    .infoSpan {
+      margin-left: 8px;
+    }
+    .photoSize {
+      .el-form-item__content {
+        display: flex;
+        //justify-content: space-between;
+        .el-input {
+          width: 90px;
+          margin-right: 12px;
+        }
+      }
+    }
+    .videoDiv {
+      display: flex;
+      .el-select {
+        .el-input {
+          width: 160px;
+        }
+      }
+      .el-input {
+        width: 100px;
+      }
+    }
+    .isoDiv {
+      display: flex;
+
+      .el-input {
+        width: 140px;
+      }
+    }
+    .videoclass {
+      // .el-form-item__content {
+      //   display: flex;
+      //   //justify-content: space-between;
+      //   .el-select {
+      //     width: 164px;
+      //     margin-right: 12px;
+      //   }
+      // }
+    }
+  }
+  .dialog-footer {
+    .el-button--default,
+    .el-button--primary {
+      width: 80px !important;
+      margin-bottom: 0px !important;
+    }
+    .el-button + .el-button {
+      margin-left: 10px !important;
+    }
+  }
+}
+</style>

src/views/realTimeMonitor/components/setschedule.vue

@@ -38,7 +38,12 @@
           </div>
           <div class="timeContain">
             <div class="timeLeft" v-loading="baseTimeLoading">
-              <h3>时间表({{ baseTimeList.length }})</h3>
+              <h3>
+                时间表({{ baseTimeList.length }})
+                <span v-if="baseTimeList.length !== 0 && offsetNumTime !== null"
+                  >偏移量（{{ offsetNumTime }}分钟）</span
+                >
+              </h3>
               <div class="tagsBox" v-if="baseTimeList.length !== 0">
                 <el-tag v-for="(item, index) in baseTimeList" :key="index"
                   >{{ $moment(item).format("HH:mm") }}
@@ -51,9 +56,13 @@
             <div class="timeRight" v-loading="deviceTimeLoading">
               <h3>
                 装置时间表({{ deviceTimeList.length }})
-                <span
+                <span v-if="deviceTimeList.length !== 0"
-                  v-if="deviceTimeList.length !== 0 && offsetNumTime !== null"
+                  ><el-button type="text" size="mini" @click="deviceTimeClick"
-                  >偏移量（{{ offsetNumTime }}分钟）</span
+                    ><i class="el-icon-refresh"></i>刷新装置时间表</el-button
+                  ></span
+                >
+                <el-button v-else type="primary" @click="deviceTimeClick"
+                  >装置时间表</el-button
                 >
               </h3>
               <div class="tagsBox" v-if="deviceTimeList.length !== 0">
@@ -62,11 +71,7 @@
                 }}</el-tag>
               </div>
               <div class="nodata" v-else>
-                <el-empty description="暂无数据">
+                <el-empty description="暂无数据"> </el-empty>
-                  <el-button type="primary" @click="deviceTimeClick"
-                    >装置时间表</el-button
-                  >
-                </el-empty>
               </div>
             </div>
           </div>
@@ -211,6 +216,7 @@
                 </el-radio-group>
               </div>
             </div>
+            <p class="fail" v-show="failedFlag">时间表下发失败,请重新下发！</p>
           </div>
           <div slot="footer" class="dialog-footer">
             <el-button @click="closebtn">取 消</el-button>
@@ -232,6 +238,7 @@ import {
   setTermCamera,
   getTermCameraRequest,
   getTermStatus,
+  setScheduleRulel,
 } from "@/utils/api/index";
 export default {
   props: {
@@ -265,6 +272,7 @@ export default {
       sureloading: false, //点击确定loading
 
       offsetNumTime: null,
+      failedFlag: false,
     };
   },
   computed: {
@@ -276,11 +284,19 @@ export default {
   methods: {
     handleClick(tab, event) {
       console.log(tab, event);
+      if (tab.name == 1) {
+        this.selectChannel = 1;
+        this.getDataBaseTime(this.areaData.id, this.selectChannel);
+      }
       //下发的时候执行获取列表
       if (tab.name == 2) {
         this.deviceTimeList = [];
         this.getruleList();
       }
+      this.deviceTimeLoading = false;
+      window.clearInterval(this.deviceTimer);
+      this.deviceTimer = null;
+      this.deviceNum = 1;
     },
     //获取通道
     getChannelSelect() {
@@ -314,7 +330,8 @@ export default {
           this.offsetNumTime = res.data.offset;
           if (
             this.areaData.protocol == "65283" ||
-            this.areaData.protocol == "65285"
+            this.areaData.protocol == "65285" ||
+            this.areaData.protocol == "65290"
           ) {
             //湖南规约
             console.log("湖南");
@@ -514,7 +531,8 @@ export default {
       console.log(this.areaData.protocol);
       if (
         this.areaData.protocol == "65283" ||
-        this.areaData.protocol == "65285"
+        this.areaData.protocol == "65285" ||
+        this.areaData.protocol == "65290"
       ) {
         //湖南规约
         console.log("湖南");
@@ -624,6 +642,8 @@ export default {
     //xympadmn --act=schedule [0xCA] --flag=[Request Set Flag, default is set=1, 0: request] --channel=[Channel No] --group=[Group] --hour1=[Hour 1] --min1=[Minute 1] --preset1=[Preset 1]
     submitForm() {
       console.log(this.currentTimeRule);
+      this.failedFlag = false;
+      let timeArrList = [];
       if (
         this.areaData.protocol == "65285" &&
         this.currentTimeRule.listTime.length > 1
@@ -672,7 +692,8 @@ export default {
             console.log(Stime, Etime, spanTime);
             if (
               this.areaData.protocol == "65283" ||
-              this.areaData.protocol == "65285"
+              this.areaData.protocol == "65285" ||
+              this.areaData.protocol == "65290"
             ) {
               //湖南
               console.log("湖南", scheduleTimeList.length);
@@ -686,7 +707,18 @@ export default {
               console.log(timeArr);
             } else {
               //其他规约
-
+              // if (this.$moment(Stime).isBefore(this.$moment(Etime))) {
+              //   timeArr.push(Stime);
+              //   Stime = this.$moment(Stime)
+              //     .add(spanTime, "minute")
+              //     .format("YYYY-MM-DD HH:mm:ss");
+              // } else if (this.$moment(Stime).isSame(this.$moment(Etime))) {
+              //   // Stime = "";
+              //   timeArr = [];
+              //   // Stime = this.$moment(Stime)
+              //   //   .add(spanTime, "minute")
+              //   //   .format("YYYY-MM-DD HH:mm:ss");
+              // }
               while (
                 this.$moment(Stime).isBefore(this.$moment(Etime)) ||
                 this.$moment(Stime).isSame(this.$moment(Etime))
@@ -721,7 +753,24 @@ export default {
             );
           }
           console.log(params);
-          this.setTermFnRule(params);
+          for (var k = 0; k < timeArr.length; k++) {
+            //console.log(moment(dayArr[k]).hour());
+            timeArrList.push({
+              hour: this.$moment(timeArr[k]).hour(),
+              minute: this.$moment(timeArr[k]).minute(),
+              preset: 255,
+            });
+          }
+          console.log(timeArrList);
+          var parmsobj = {
+            termid: this.areaData.id,
+            channelid: this.timeChannel,
+            offset: this.setNum,
+            list: timeArrList,
+          };
+          console.log(parmsobj);
+          this.setTimeRuleJava(parmsobj); //使用java接口调用下发时间表
+          //this.setTermFnRule(params);
         } else {
           this.sureloading = false;
           this.$message({
@@ -733,6 +782,37 @@ export default {
         }
       });
     },
+    //使用接口下发时间表会写进数据库
+    setTimeRuleJava(parmsobj) {
+      console.log(parmsobj);
+      setScheduleRulel({
+        scheduleid: this.currentTimeRule.id,
+        list: [parmsobj],
+      })
+        .then((res) => {
+          console.log(res);
+          if (res.data.list.length !== 0) {
+            this.requestid = res.data.list[0].requestid;
+            console.log(this.requestid);
+            clearInterval(this.timer);
+            this.deviceTimer = window.setInterval(() => {
+              this.getinfoRules();
+              this.deviceNum++;
+              console.log(this.deviceNum, this.deviceNum * 1000);
+            }, 1000 * this.deviceNum);
+          } else {
+            console.log("未获取到requestid");
+          }
+        })
+        .catch((err) => {
+          // this.$message({
+          //   duration: 1500,
+          //   showClose: true,
+          //   message: "添加失败",
+          //   type: "error",
+          // });
+        });
+    },
     //下发时间表
     setTermFnRule(dataParams) {
       setTermCamera({
@@ -772,6 +852,7 @@ export default {
             window.clearInterval(this.deviceTimer);
             this.deviceTimer = null;
             this.deviceNum = 1;
+            this.failedFlag = true;
             this.$message({
               duration: 1500,
               showClose: true,
@@ -804,14 +885,17 @@ export default {
       window.clearInterval(this.deviceTimer);
       this.deviceTimer = null;
       this.deviceNum = 1;
+      this.failedFlag = false;
     },
     //点击分页
     handleCurrentChange(val) {
       this.page = val;
+      this.getruleList();
     },
     //每页条数
     handleSizeChange(val) {
       this.pageSize = val;
+      this.getruleList();
     },
   },
 };
@@ -847,6 +931,18 @@ export default {
             border-radius: 4px;
             border: 1px solid #eee;
             padding: 12px;
+            h3 {
+              .el-button {
+                margin-left: 14px;
+              }
+            }
+          }
+          .timeLeft,
+          .timeRight {
+            h3 {
+              line-height: 24px;
+              height: 24px;
+            }
           }
           .tagsBox {
             height: 308px;
@@ -907,6 +1003,11 @@ export default {
         }
       }
     }
+    .fail {
+      color: red;
+      line-height: 28px;
+      font-size: 12px;
+    }
   }
 }
 </style>

src/views/realTimeMonitor/components/siderBar.vue

@@ -5,6 +5,7 @@
         placeholder="输入关键字进行过滤"
         v-model="filterText"
         prefix-icon="el-icon-search"
+        clearable
       >
       </el-input>
     </div>
@@ -36,47 +37,75 @@
       :data="lineTreeData"
       :props="defaultProps"
       node-key="id"
-      default-expand-all
+      :default-expanded-keys="defaultExpandIds"
       highlight-current
       :expand-on-click-node="false"
       :filter-node-method="filterNode"
       :current-node-key="currentNodekey"
       @node-click="handleNodeClick"
+      @node-expand="handleNodeExpand"
+      @node-collapse="handleNodeCollapse"
     >
       <span class="custom-tree-node" slot-scope="{ node, data }">
-        <span v-if="node.level === 1">
+        <!-- v-if="node.name === '收藏夹'" -->
-          <span class="iconfont icon-dianli" style="margin-right: 6px"></span>
+        <span>
-          <span>{{ node.label }} </span>
+          <span>
-        </span>
+            <span
-        <span v-else-if="node.level === 2">
+              v-if="node.label === '收藏夹'"
-          <span class="iconfont icon-dianlihangye" style="margin-right: 6px">
+              class="el-icon-collection"
+              style="margin-right: 6px"
+            ></span>
+            <span
+              v-if="node.level === 1 && node.label !== '收藏夹'"
+              class="iconfont icon-dianli"
+              style="margin-right: 6px"
+            ></span>
+            <span
+              v-if="node.level === 2 && data.bsManufacturer"
+              class="iconfont icon-dianlihangye"
+              style="margin-right: 6px"
+            >
+            </span>
+            <span
+              v-if="
+                node.label !== '收藏夹' && !data.bsManufacturer && !data.dyValue
+              "
+            >
+              <span
+                class="iconfont icon-shexiangtoulixian"
+                v-if="data.onlinestatus == 0"
+                :class="data.onlinestatus == 0 ? 'disconnect' : ''"
+                style="margin-right: 6px"
+              ></span>
+              <span
+                class="iconfont icon-shexiangtou-lixian"
+                v-else
+                :class="data.onlinestatus == 0 ? 'disconnect' : ''"
+                style="margin-right: 6px"
+              ></span>
+            </span>
+            <span :class="data.onlinestatus == 0 ? 'disconnect' : ''"
+              >{{ node.label }}
+
+              <span
+                class="num"
+                v-if="node.level === 2 && data.bsManufacturer && zzradio == -1"
+                >({{ data.onlinenum }} / {{ data.totalnum }})
+              </span>
+              <span
+                class="num"
+                v-else-if="node.level === 2 && data.bsManufacturer"
+                >({{ data.list.length }})
+              </span>
+            </span>
           </span>
-          <span>{{ node.label }} </span>
-        </span>
-        <span v-else>
-          <span
-            class="iconfont icon-shexiangtoulixian"
-            v-if="data.onlinestatus == 0"
-            :class="data.onlinestatus == 0 ? 'disconnect' : ''"
-            style="margin-right: 6px"
-          ></span>
-          <span
-            class="iconfont icon-shexiangtou-lixian"
-            v-else
-            :class="data.onlinestatus == 0 ? 'disconnect' : ''"
-            style="margin-right: 6px"
-          ></span>
-          <span
-            :id="data.id"
-            :class="data.onlinestatus == 0 ? 'disconnect' : ''"
-            >{{ node.label }}</span
-          >
         </span>
       </span>
     </el-tree>
   </div>
 </template>
 <script>
+import EventBus from "@/utils/event-bus";
 import { getdyTreeListJoggle } from "@/utils/api/index";
 export default {
   data() {
@@ -86,6 +115,8 @@ export default {
       totalNum: "", //装置总数
       zzradio: -1, //装置是否在线选择
       lineTreeData: [],
+      defaultExpandIds: [], //默认展开
+
       defaultProps: {
         //指定参数格式回显数据
         children: "list",
@@ -93,14 +124,20 @@ export default {
       },
       currentData: {}, //当前选中的数据
       currentNodekey: "", //默认选中的节点树,
+      role: "",
+      treeStatustimer: null,
+      isfavorList: [],
     };
   },
   components: {},
   watch: {
-    filterText(val) {
+    // filterText(val) {
-      console.log(val);
+    //   console.log(val);
-      this.$refs.tree.filter(val);
+    //   this.$refs.tree.filter(val);
-      console.log(this.$refs.tree);
+    //   console.log(this.$refs.tree);
+    // },
+    filterText(newVal) {
+      this.handleFilter(); // 当 filterText 发生变化时执行过滤操作
     },
   },
   mounted() {},
@@ -109,8 +146,13 @@ export default {
       JSON.parse(localStorage.getItem("radio")) !== null
         ? JSON.parse(localStorage.getItem("radio"))
         : -1; //获取保存的radio
+    this.role = localStorage.getItem("role");
+    console.log("用户管理");
+    console.log(this.role);
     this.getRadio(); //获取列表在线离线全部
     this.getLineTreeList(); //获取树状图
+    this.treeStatustimer = setInterval(this.getLineTreeStatus, 60000); // 每60秒刷新数据
+    EventBus.$on("treelist", this.getLineTreeStatus);
   },
   methods: {
     //获取当前选中的radio
@@ -123,6 +165,7 @@ export default {
     //刷新tree列表
     getLineTreeStatus() {
       console.log("点击了刷新");
+
       if (this.filterText !== "") {
         this.$refs.tree.filter(this.filterText);
       } else {
@@ -130,8 +173,16 @@ export default {
           .then((res) => {
             console.log(res);
             this.lineTreeData = res.data.list;
+            this.isfavorList = res.data.favorlist;
+            this.lineTreeData.unshift({
+              id: 0,
+              name: "收藏夹",
+              bsManufacturer: "收藏夹",
+              list: this.isfavorList,
+            });
             this.onlineNum = res.data.onlineNum;
             this.totalNum = res.data.totalNum;
+            this.currentData = JSON.parse(localStorage.getItem("currentData"));
 
             this.$nextTick(() => {
               this.$refs.tree.setCurrentKey(this.currentData.id); //一定要加这个选中了否则样式没有出来
@@ -142,46 +193,60 @@ export default {
           });
       }
     },
+    handleFilter() {
+      // 在输入框输入完成后的500毫秒执行过滤节点方法
+      setTimeout(() => {
+        this.$refs.tree.filter(this.filterText);
+      }, 500);
+    },
     //树状图搜索
     filterNode(value, data, node) {
-      //console.log(value, data, node);
-      this.filterText = value;
-      console.log(this.filterText);
       // 如果什么都没填全部匹配全部返回
       if (!value) return true;
       this.searchName = data.name + data.cmdid;
       //console.log(this.searchName);
       // 如果传入的value和data中的label相同，匹配成功
+
       if (this.searchName.indexOf(value) !== -1) {
         return true;
       }
+      let nowval = data[this.defaultProps.label].toUpperCase();
+      return nowval.indexOf(value.toUpperCase()) !== -1;
     },
     //获取树状图列表
     getLineTreeList() {
       console.log(this.zzradio);
       getdyTreeListJoggle({ type: this.zzradio })
         .then((res) => {
-          console.log(res);
           this.lineTreeData = res.data.list;
-          console.log(this.lineTreeData);
+          this.isfavorList = res.data.favorlist;
+          this.lineTreeData.unshift({
+            id: 0,
+            name: "收藏夹",
+            bsManufacturer: "收藏夹",
+            list: this.isfavorList,
+          });
           this.onlineNum = res.data.onlineNum;
           this.totalNum = res.data.totalNum;
           this.currentData = JSON.parse(localStorage.getItem("currentData"));
-          if (this.lineTreeData[0].list[0].list.length > 0) {
+
-          }
+          // if (this.lineTreeData[0].list[0].list.length > 0) {
+          // }
           if (
             this.currentData !== null &&
             Object.keys(this.currentData).length !== 0
           ) {
-            console.log("aaaa");
             this.currentNodekey = this.currentData.id;
             this.handleNodeClick(this.currentData);
           } else {
-            console.log("aaaa");
+            this.currentData = this.lineTreeData[1]; //第一个选中的数据
-            this.currentData = this.lineTreeData[0]; //第一个选中的数据
+            this.currentNodekey = this.lineTreeData[1].id; //第一个数据
-            this.currentNodekey = this.lineTreeData[0].id; //第一个数据
             this.handleNodeClick(this.currentData);
           }
+          this.defaultExpandIds =
+            JSON.parse(localStorage.getItem("defultkeys")) !== null
+              ? JSON.parse(localStorage.getItem("defultkeys"))
+              : []; //获取保存的defaultKey ;
           this.$nextTick(() => {
             this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
             this.scrollView();
@@ -191,21 +256,83 @@ export default {
           console.log(err); //代码错误、请求失败捕获
         });
     },
+    // 树节点展开
+    handleNodeExpand(data) {
+      // 保存当前展开的节点
+      let flag = false;
+      this.defaultExpandIds.some((item) => {
+        if (item === data.id) {
+          // 判断当前节点是否存在， 存在不做处理
+          flag = true;
+          return true;
+        }
+      });
+      if (!flag) {
+        // 不存在则存到数组里
+        this.defaultExpandIds.push(data.id);
+        localStorage.setItem(
+          "defultkeys",
+          JSON.stringify(this.defaultExpandIds)
+        );
+      }
+    },
+    // 树节点关闭
+    handleNodeCollapse(data) {
+      // 删除当前关闭的节点
+      this.defaultExpandIds.some((item, i) => {
+        if (item === data.id) {
+          this.defaultExpandIds.splice(i, 1);
+          localStorage.setItem(
+            "defultkeys",
+            JSON.stringify(this.defaultExpandIds)
+          );
+        }
+      });
+      this.removeChildrenIds(data); // 这里主要针对多级树状结构，当关闭父节点时，递归删除父节点下的所有子节点
+    },
+    // 删除树子节点
+    removeChildrenIds(data) {
+      console.log("我还有子节点");
+      const ts = this;
+      console.log(data);
+      if (data.list) {
+        console.log(data.list);
+        data.list.forEach(function (item) {
+          const index = ts.defaultExpandIds.indexOf(item.id);
+          if (index > 0) {
+            ts.defaultExpandIds.splice(index, 1);
+          }
+          ts.removeChildrenIds(item);
+          console.log(ts.defaultExpandIds);
+        });
+        localStorage.setItem(
+          "defultkeys",
+          JSON.stringify(this.defaultExpandIds)
+        );
+      }
+    },
 
     //点击当前选中的treenode
     handleNodeClick(data) {
-      console.log(data);
+      if (data.name == "收藏夹") {
+        return;
+      }
+      if (data.isfavor == 0 || data.isfavor == null) {
+        this.collectFlag = false;
+      } else {
+        this.collectFlag = true;
+      }
       this.currentData = data;
-      this.scrollView();
+      //this.scrollView();
       this.$store.commit("currentData", this.currentData); //将currentData保存在vuex中
       this.$store.commit("termId", this.currentData.id); //将currentData保存在vuex中
       this.$store.commit("protocol", this.currentData.protocol); //将currentData保存在vuex中
       this.$store.commit("cmdId", this.currentData.cmdid); //将currentData保存在vuex中
       this.$parent.getCurrentData();
-
       //this.$refs.tree.scrollTo(data);
       // localStorage.setItem("currentData", JSON.stringify(this.currentData));
     },
+
     scrollView() {
       if (this.currentData) {
         this.$nextTick(() => {
@@ -219,11 +346,16 @@ export default {
       }
     },
   },
+  beforeDestroy() {
+    //清除定时器
+    clearInterval(this.treeStatustimer);
+    this.treeStatustimer = null;
+  },
 };
 </script>
 <style lang="less">
 .realsideBar {
-  width: 300px;
+  width: 312px;
   display: flex;
   flex-direction: column;
   padding: 16px 0px;
@@ -282,6 +414,10 @@ export default {
         display: flex;
         display: inline-table;
         overflow: hidden;
+        align-items: center;
+      }
+      .num {
+        color: #169e8c;
       }
     }
   }
@@ -298,6 +434,10 @@ export default {
       span {
         display: flex;
         //overflow: hidden;
+        align-items: center;
+        .num {
+          color: #fff;
+        }
         .iconfont {
           //width: 30px;
           display: inline-table;

src/views/realTimeMonitor/components/takePicButton.vue

@@ -40,13 +40,23 @@ export default {
   },
   watch: {
     termId: {
-      handler(newVal, oldVal) {},
+      handler(newVal, oldVal) {
+        console.log("我改变了");
+        clearInterval(this.statusTimer);
+        this.statusTimer = null;
+        this.statusNum = 0;
+        clearInterval(this.picPimer);
+        this.picPimer = null;
+        this.picNum = 0;
+        this.picLoading = false;
+      },
       deep: true,
       immediate: true,
     },
   },
   mounted() {
     console.log(this.channelIdList);
+    console.log("我是主动拍照");
   },
   computed: {
     termId() {
@@ -111,7 +121,7 @@ export default {
           this.statusTimer = window.setInterval(() => {
             this.getTakePicStatus(res.data);
             this.statusNum++;
-          }, 3000);
+          }, 5000);
         })
         .catch((err) => {});
     },
@@ -126,7 +136,55 @@ export default {
         .then((res) => {
           console.log(res);
           //res.data  0 状态未知  1 成功 2失败
-          if (res.data.cmaStatus != 1 && this.statusNum >= 5) {
+          // if (
+          //   res.data.cmaStatus == 0 &&
+          //   res.data.picStatus == false &&
+          //   this.statusNum >= 5
+          // ) {
+          //   //全部没有返回，失败
+          //   this.clearFn();
+          //   this.$message({
+          //     duration: 1500,
+          //     showClose: true,
+          //     message: "指令图片都没有返回true，并且轮巡大于五次！",
+          //     type: "warning",
+          //   });
+          // } else if (res.data.cmaStatus == 1) {
+          //   this.clearFn();
+          //   this.$message({
+          //     duration: 1500,
+          //     showClose: true,
+          //     message: "拍照指令cmaStatus下发成功返回1！",
+          //     type: "success",
+          //   });
+          //   clearInterval(this.picPimer);
+          //   this.picPimer = null;
+          //   this.picPimer = window.setInterval(() => {
+          //     this.newPicApi(val);
+          //     this.picNum++;
+          //   }, 8000);
+          //   return;
+          // } else if (res.data.picStatus == true) {
+          //   this.clearFn();
+          //   this.$message({
+          //     duration: 1500,
+          //     showClose: true,
+          //     message: "指令下发失败，图片已经返回！",
+          //     type: "success",
+          //   });
+          //   clearInterval(this.picPimer);
+          //   this.picPimer = null;
+          //   this.picPimer = window.setInterval(() => {
+          //     this.newPicApi(val);
+          //     this.picNum++;
+          //   }, 2000);
+          //   return;
+          // }
+          if (
+            res.data.cmaStatus != 1 &&
+            res.data.picStatus == false &&
+            this.statusNum >= 5
+          ) {
             this.clearFn();
             this.$message({
               duration: 1500,
@@ -134,7 +192,11 @@ export default {
               message: "下发指令超时，请重试！",
               type: "warning",
             });
-          } else if (res.data.cmaStatus == 1 || res.data.picStatus == true) {
+          } else if (
+            res.data.cmaStatus == 1 &&
+            res.data.picStatus == false &&
+            this.statusNum < 5
+          ) {
             this.clearFn();
             this.$message({
               duration: 1500,
@@ -142,6 +204,20 @@ export default {
               message: "下发指令成功！",
               type: "success",
             });
+            this.newPicApi(val);
+            clearInterval(this.picPimer);
+            this.picPimer = null;
+            this.picPimer = window.setInterval(() => {
+              this.newPicApi(val);
+              this.picNum++;
+            }, 8000);
+          } else if (
+            res.data.cmaStatus != 1 &&
+            res.data.picStatus == true &&
+            this.statusNum < 5
+          ) {
+            this.clearFn();
+            this.newPicApi(val);
             clearInterval(this.picPimer);
             this.picPimer = null;
             this.picPimer = window.setInterval(() => {
@@ -194,5 +270,16 @@ export default {
       this.picLoading = false;
     },
   },
+  destroyed() {
+    console.log("离开了");
+    clearInterval(this.statusTimer);
+    this.statusTimer = null;
+    this.statusNum = 0;
+  },
+  beforeRouteLeave(to, from, next) {
+    // 路由跳转前，清除轮询
+    next();
+    console.log("7777777777777777777777777");
+  },
 };
 </script>

src/views/realTimeMonitor/components/takeTimePicButton.vue

@@ -0,0 +1,324 @@
+<template>
+  <!-- <el-button type="primary" @click="handleTakePic" :loading="picLoading"
+    >主动拍照
+  </el-button> -->
+  <div>
+    <el-dropdown trigger="click" @command="handleCommandpic">
+      <el-button type="primary" :loading="picLoading">
+        指定时间拍照<i class="el-icon-arrow-down el-icon--right"></i>
+      </el-button>
+      <el-dropdown-menu slot="dropdown" class="picdropStyle">
+        <el-dropdown-item
+          :command="item.channelid"
+          v-for="(item, index) in channelIdList"
+          :key="index"
+          >{{
+            item.alias !== null && item.alias !== ""
+              ? item.alias
+              : item.channelname
+          }}</el-dropdown-item
+        >
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dialog
+      class="timeDialog"
+      title="拍照时间"
+      :visible.sync="dialogFormVisible"
+      width="380px"
+    >
+      <el-form :model="form">
+        <el-form-item label="拍照时间：">
+          <el-date-picker
+            v-model="form.startTime"
+            type="datetime"
+            placeholder="选择日期时间"
+          >
+          </el-date-picker>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取 消</el-button>
+        <el-button type="primary" @click="confirmClick">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import {
+  getTermStatus,
+  setTermCamera,
+  getTakePicStatusJoggle,
+  getTakePicPhotoStatusJoggle,
+} from "@/utils/api/index";
+export default {
+  data() {
+    return {
+      picLoading: false,
+      statusTimer: null,
+      statusNum: 0,
+      picPimer: null,
+      picNum: 0,
+      pzchannelId: "",
+      dialogFormVisible: false,
+      form: {
+        startTime: "",
+      },
+      timestamp: "",
+    };
+  },
+  watch: {
+    termId: {
+      handler(newVal, oldVal) {
+        console.log("我改变了");
+        clearInterval(this.statusTimer);
+        this.statusTimer = null;
+        this.statusNum = 0;
+        clearInterval(this.picPimer);
+        this.picPimer = null;
+        this.picNum = 0;
+        this.picLoading = false;
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  mounted() {
+    console.log(this.channelIdList);
+    console.log("我是主动拍照");
+  },
+  computed: {
+    termId() {
+      return this.$store.state.termId;
+    },
+
+    channelIdList() {
+      return this.$store.state.channelIdList;
+    },
+  },
+
+  methods: {
+    handleCommandpic(command) {
+      // --act=capture --cmdid=XY-SIMULATOR-0016 --channel=1 --preset=255 --scheduleTime=1704110700 --clientid=5 --reqid=TS
+      console.log(command);
+      this.dialogFormVisible = true;
+      this.pzchannelId = command;
+    },
+    confirmClick() {
+      console.log(this.pzchannelId);
+      console.log(this.form.startTime.getTime() / 1000);
+      this.timestamp = this.form.startTime.getTime() / 1000;
+      this.dialogFormVisible = false;
+      this.picLoading = true;
+      getTermStatus({ termId: this.termId }).then((res) => {
+        console.log(res);
+        if (res.data.isonline) {
+          let params = [
+            {
+              name: "act",
+              value: "capture",
+            },
+            {
+              name: "channel",
+              value: this.pzchannelId,
+            },
+            {
+              name: "preset",
+              value: 255,
+            },
+            {
+              name: "scheduleTime",
+              value: this.timestamp,
+            },
+
+            {
+              name: "type",
+              value: 0,
+            },
+          ];
+          this.setTermFn(params);
+        } else {
+          this.picLoading = false;
+          this.$message({
+            duration: 1500,
+            showClose: true,
+            message: "装置下线，发送指令失败",
+            type: "error",
+          });
+        }
+      });
+    },
+    handleTakePic() {},
+    //下发命令
+    setTermFn(val) {
+      setTermCamera({
+        termId: this.termId,
+        list: val,
+      })
+        .then((res) => {
+          console.log(res);
+          this.getTakePicStatus(res.data);
+          clearInterval(this.statusTimer);
+          this.statusTimer = null;
+          this.statusTimer = window.setInterval(() => {
+            this.getTakePicStatus(res.data);
+            this.statusNum++;
+          }, 5000);
+        })
+        .catch((err) => {});
+    },
+    //查询命令是否下发成功
+    getTakePicStatus(val) {
+      console.log(val);
+      getTakePicStatusJoggle({
+        requestid: val.requestId,
+        termId: this.termId,
+        photoTime: new Date(val.date).getTime(),
+      })
+        .then((res) => {
+          console.log(res);
+          //res.data  0 状态未知  1 成功 2失败
+          // if (
+          //   res.data.cmaStatus == 0 &&
+          //   res.data.picStatus == false &&
+          //   this.statusNum >= 5
+          // ) {
+          //   //全部没有返回，失败
+          //   this.clearFn();
+          //   this.$message({
+          //     duration: 1500,
+          //     showClose: true,
+          //     message: "指令图片都没有返回true，并且轮巡大于五次！",
+          //     type: "warning",
+          //   });
+          // } else if (res.data.cmaStatus == 1) {
+          //   this.clearFn();
+          //   this.$message({
+          //     duration: 1500,
+          //     showClose: true,
+          //     message: "拍照指令cmaStatus下发成功返回1！",
+          //     type: "success",
+          //   });
+          //   clearInterval(this.picPimer);
+          //   this.picPimer = null;
+          //   this.picPimer = window.setInterval(() => {
+          //     this.newPicApi(val);
+          //     this.picNum++;
+          //   }, 8000);
+          //   return;
+          // } else if (res.data.picStatus == true) {
+          //   this.clearFn();
+          //   this.$message({
+          //     duration: 1500,
+          //     showClose: true,
+          //     message: "指令下发失败，图片已经返回！",
+          //     type: "success",
+          //   });
+          //   clearInterval(this.picPimer);
+          //   this.picPimer = null;
+          //   this.picPimer = window.setInterval(() => {
+          //     this.newPicApi(val);
+          //     this.picNum++;
+          //   }, 2000);
+          //   return;
+          // }
+          if (res.data.cmaStatus != 1 && this.statusNum >= 5) {
+            this.clearFn();
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              message: "下发指令超时，请重试！",
+              type: "warning",
+            });
+          } else if (res.data.cmaStatus == 1 || res.data.picStatus == true) {
+            this.clearFn();
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              message: "下发指令成功！",
+              type: "success",
+            });
+            this.newPicApi(val);
+            clearInterval(this.picPimer);
+            this.picPimer = null;
+            this.picPimer = window.setInterval(() => {
+              this.newPicApi(val);
+              this.picNum++;
+            }, 8000);
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //获取最新的图片
+    newPicApi(val) {
+      getTakePicPhotoStatusJoggle({
+        requestid: val.requestId,
+        termId: this.termId,
+        photoTime: new Date(val.date).getTime(),
+      }).then((res) => {
+        console.log(res.data);
+        console.log(this.picNum);
+        if (res.data == true && this.picNum < 10) {
+          //   console.log(this.$parent.$parent);
+          this.$parent.$parent.getPhotoList(
+            -1,
+            new Date(val.date).getTime(),
+            this.termId
+          ); //获取图片列表是传当前设备的 id 和termid
+          this.$message({
+            duration: 1500,
+            showClose: true,
+            message: "已返回最新图片！",
+            type: "success",
+          });
+          clearInterval(this.picPimer);
+          this.picPimer = null;
+          this.picNum = 0;
+          console.log("返回最新图片");
+        } else if (res.data == false && this.picNum > 10) {
+          clearInterval(this.picPimer);
+          this.picPimer = null;
+          this.picNum = 0;
+        }
+      });
+    },
+    clearFn() {
+      clearInterval(this.statusTimer);
+      this.statusTimer = null;
+      this.statusNum = 0;
+      this.picLoading = false;
+    },
+  },
+  destroyed() {
+    console.log("离开了");
+    clearInterval(this.statusTimer);
+    this.statusTimer = null;
+    this.statusNum = 0;
+  },
+  beforeRouteLeave(to, from, next) {
+    // 路由跳转前，清除轮询
+    next();
+    console.log("7777777777777777777777777");
+  },
+};
+</script>
+<style lang="less">
+.timeDialog {
+  .el-date-editor.el-input,
+  .el-date-editor.el-input__inner {
+    width: 256px;
+  }
+  .el-dialog__footer {
+    .dialog-footer {
+      .el-button {
+        width: 80px !important;
+        margin-bottom: 0px !important;
+      }
+      .el-button + .el-button {
+        margin-left: 10px !important;
+      }
+    }
+  }
+}
+</style>

src/views/realTimeMonitor/components/takeVideoButton.vue

@@ -85,11 +85,16 @@ export default {
     //   deep: true,
     //   immediate: true,
     // },
-    // termId: {
+    termId: {
-    //   handler(newVal, oldVal) {},
+      handler(newVal, oldVal) {
-    //   deep: true,
+        clearInterval(this.statusTimer);
-    //   immediate: true,
+        this.statusTimer = null;
-    // },
+        this.statusNum = 0;
+        this.picLoading = false;
+      },
+      deep: true,
+      immediate: true,
+    },
     // channelId: {
     //   handler(newVal, oldVal) {},
     //   deep: true,

src/views/realTimeMonitor/components/uploadpic.vue

@@ -0,0 +1,143 @@
+<template>
+  <el-dialog
+    class="uploadPic"
+    title="上传图片"
+    :visible.sync="isShow"
+    :close-on-click-modal="false"
+    width="600px"
+    @close="handleclose"
+  >
+    <div class="uploadBox">
+      <el-form ref="form" :model="form" label-width="80px">
+        <el-form-item label="装置编号">
+          <el-input v-model="form.cmdid"></el-input>
+        </el-form-item>
+        <el-form-item label="装置Id">
+          <el-input v-model="form.termid"></el-input>
+        </el-form-item>
+        <el-form-item label="通道选择">
+          <el-select v-model="form.channel" placeholder="选择通道">
+            <el-option label="通道一" :value="1"></el-option>
+            <el-option label="通道二" :value="2"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="选择时间">
+          <el-date-picker
+            v-model="form.phototime"
+            value-format="timestamp"
+            type="datetime"
+            placeholder="选择日期时间"
+          >
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="">
+          <el-upload
+            class="upload-demo"
+            ref="upload"
+            action="#"
+            :http-request="httpRequest"
+          >
+            <el-button slot="trigger" size="small" type="primary"
+              >选取图片</el-button
+            >
+          </el-upload>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="isShow = false">取 消</el-button>
+      <el-button type="primary" @click="handlesure">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { uploadPicApi } from "@/utils/api/index";
+export default {
+  props: {},
+  data() {
+    return {
+      isShow: false,
+      form: {},
+      fileList: [], //上传列表
+    };
+  },
+  mounted() {},
+  methods: {
+    httpRequest(raw) {
+      this.fileList.push(raw);
+    },
+    //数据库获取最新数据
+    display(data) {
+      console.log(data);
+      this.$set(this.form, "cmdid", data.cmdid);
+      this.$set(this.form, "termid", data.id);
+      this.isShow = true;
+    },
+    handleclose() {
+      this.isShow = false;
+      this.fileList = [];
+    },
+    handlesure() {
+      this.isShow = false;
+      //console.log(this.fileList[0].file);
+      this.$set(this.form, "file", this.fileList[0].file);
+      console.log(this.form);
+      uploadPicApi(this.form)
+        .then((res) => {
+          console.log(res);
+          this.$message({
+            duration: 1500,
+            showClose: true,
+            message: "上传成功",
+            type: "success",
+          });
+          this.fileList = [];
+        })
+        .catch((err) => {});
+    },
+  },
+  destroyed() {
+    this.isShow = false;
+  },
+};
+</script>
+<style lang="less">
+.uploadPic {
+  .uploadBox {
+  }
+  .upload-demo {
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-direction: row-reverse;
+    margin-right: 16px;
+    .el-upload-list {
+      width: 370px;
+      height: 32px;
+      line-height: 32px;
+      border: 1px solid #dcdfe6;
+      background: #fff;
+      margin-right: 12px;
+      border-radius: 4px;
+      .el-upload-list__item-name {
+        margin-right: 0px;
+      }
+      .el-upload-list__item {
+        transition: none;
+        font-size: 14px;
+        color: #606266;
+        position: relative;
+        box-sizing: border-box;
+        border-radius: 4px;
+        width: 100%;
+        height: 32px;
+        line-height: 32px;
+        margin-top: 0px !important;
+        .el-icon-close {
+          top: 10px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/realTimeMonitor/index.vue

@@ -18,6 +18,7 @@
               ref="carouselpic"
               :terminalPhoto="terminalPhoto"
               :photoNum="photoNum"
+              :protocolInfo="protocolInfo"
               v-if="terminalPhoto.length !== 0"
             ></carouselChart>
           </div>
@@ -40,6 +41,7 @@ import morePicPreveiw from "./components/morePicPreveiw";
 
 import { mapGetters, mapState } from "vuex";
 export default {
+  name: "realTimeMonitor",
   data() {
     return {
       LineFlag: false, //如果是线路显示
@@ -52,6 +54,7 @@ export default {
       terminalPhoto: [], //获取装置当前图片数据
       photoNum: 5,
       dateValue: "", //当前时间
+      protocolInfo: "",
       nopicPath: require("@/assets/img/nopic.jpg"),
     };
   },
@@ -119,6 +122,8 @@ export default {
         this.towerFlag = true;
 
         this.terminalPhoto = [];
+        this.protocolInfo = this.treeSelectData.protocol;
+        console.log("asddddddddddddddddddddd", this.treeSelectData);
         this.towertitle = this.treeSelectData.name;
         this.$nextTick(() => {
           this.$refs.areaRef.getChannelList();
@@ -148,25 +153,28 @@ export default {
           } else {
             this.terminalPhoto = res.data.list;
           }
-          let newDataList = [];
+          // let newDataList = [];
-          let current = 0;
+          // let current = 0;
-          if (this.terminalPhoto && this.terminalPhoto.length > 0) {
+          // if (this.terminalPhoto && this.terminalPhoto.length > 0) {
-            for (let i = 0; i <= this.terminalPhoto.length - 1; i++) {
+          //   for (let i = 0; i <= this.terminalPhoto.length - 1; i++) {
-              if (i % this.photoNum !== 0 || i === 0) {
+          //     if (i % this.photoNum !== 0 || i === 0) {
-                if (!newDataList[current]) {
+          //       if (!newDataList[current]) {
-                  newDataList.push([this.terminalPhoto[i]]);
+          //         newDataList.push([this.terminalPhoto[i]]);
-                } else {
+          //       } else {
-                  newDataList[current].push(this.terminalPhoto[i]);
+          //         newDataList[current].push(this.terminalPhoto[i]);
-                }
+          //       }
-              } else {
+          //     } else {
-                current++;
+          //       current++;
-                newDataList.push([this.terminalPhoto[i]]);
+          //       newDataList.push([this.terminalPhoto[i]]);
-              }
+          //     }
-            }
+          //   }
-          }
+          // }
-          this.terminalPhoto = [...newDataList];
+          // this.terminalPhoto = [...newDataList];
+          // this.$nextTick(() => {
+          //   this.$refs.carouselpic.changeBigPic(this.terminalPhoto[0][0], 0);
+          // });
           this.$nextTick(() => {
-            this.$refs.carouselpic.changeBigPic(this.terminalPhoto[0][0], 0);
+            this.$refs.carouselpic.changeBigPic(this.terminalPhoto[0], 0);
           });
 
           this.swiperLoading = false;

src/views/realTimeSearch/index.vue

@@ -147,6 +147,14 @@
                   }}
                 </p>
               </div>
+              <div class="deleteBox">
+                <el-button
+                  title="删除照片"
+                  type="primary"
+                  icon="el-icon-delete"
+                  @click.stop="deletePic(item)"
+                ></el-button>
+              </div>
             </div>
             <div class="bigpic" v-else>
               <!-- <el-image :src="item.path" lazy></el-image> -->
@@ -203,9 +211,14 @@
 </template>
 
 <script>
-import { getSearchInfo, getRealtimePhoto } from "@/utils/api/index";
+import {
+  getSearchInfo,
+  getRealtimePhoto,
+  deletePicList,
+} from "@/utils/api/index";
 import defaultImage from "../../assets/img/nodatapic2.jpg";
 export default {
+  name: "realTimeSearch",
   data() {
     return {
       pickerOptions: {
@@ -253,6 +266,7 @@ export default {
         "starttime",
         new Date(new Date().toLocaleDateString()).getTime()
       );
+
       this.getSearchdy();
     } else {
       this.getSearchdy();
@@ -261,7 +275,7 @@ export default {
       this.formdata.towerid = this.$route.query.towerId;
       this.formdata.channelid = this.$route.query.channelId;
       this.formdata.termid = this.$route.query.termId;
-      this.$set(this.formdata, "starttime", this.$route.query.date);
+      this.$set(this.formdata, "starttime", Number(this.$route.query.date));
     }
   },
   methods: {
@@ -296,7 +310,6 @@ export default {
           } else {
             this.formdata.lineid = Number(this.$route.query.lineId);
           }
-
           this.getSearchgt();
         })
         .catch((err) => {});
@@ -357,12 +370,11 @@ export default {
       this.loading = true;
       this.$set(this.formdata, "pageindex", this.page);
       this.$set(this.formdata, "pagesize", this.pageSize);
-
+      console.log(this.formdata);
       getRealtimePhoto(this.formdata)
         .then((res) => {
           this.picList = [];
           this.picList = res.data.list;
-
           this.total = res.data.total;
           this.loading = false;
         })
@@ -396,6 +408,37 @@ export default {
       this.pageSize = val;
       this.getPicData();
     },
+    deletePic(val) {
+      console.log(val);
+      let deleteArr = [];
+      deleteArr.push(val.picid);
+      console.log(deleteArr);
+      deletePicList({ list: deleteArr })
+        .then((res) => {
+          console.log(res);
+          this.$confirm("此操作将永久删除该图片, 是否继续?", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning",
+          })
+            .then(() => {
+              this.$message({
+                type: "success",
+                showClose: true,
+                message: "删除成功!",
+              });
+              this.getPicData();
+            })
+            .catch(() => {
+              this.$message({
+                type: "info",
+                showClose: true,
+                message: "已取消删除",
+              });
+            });
+        })
+        .catch((err) => {});
+    },
   },
 };
 </script>
@@ -452,6 +495,11 @@ export default {
             height: 200px;
           }
         }
+        &:hover {
+          .deleteBox {
+            display: block;
+          }
+        }
       }
       .caption {
         position: absolute;
@@ -477,6 +525,27 @@ export default {
           padding-right: 5px;
         }
       }
+      .deleteBox {
+        position: absolute;
+        right: 4px;
+        top: 4px;
+        z-index: 2;
+        display: none;
+        .el-button {
+          width: auto;
+          background: rgba(0, 0, 0, 0.5);
+          border: 1px solid transparent;
+          color: #fff;
+          font-size: 16px;
+          padding: 3px;
+        }
+        &:hover {
+          .el-button {
+            background: #f56c6c;
+            //color: #f56c6c;
+          }
+        }
+      }
     }
     .noPicBox {
       display: flex;

src/views/system/deviceUpgrade/index.vue

@@ -0,0 +1,472 @@
+<template>
+  <div class="upgradationBox">
+    <div class="uploadForm">
+      <div class="upgradeBox">
+        <h3 class="lableBox">文件上传：</h3>
+        <el-upload
+          class="upload-demo"
+          ref="upload"
+          action="#"
+          :before-upload="beforeUpload"
+          :http-request="customUpload"
+          :limit="1"
+          :file-list="fileList"
+          :data="reportData"
+          :auto-upload="false"
+        >
+          <el-button slot="trigger" size="small" type="primary"
+            >选取文件</el-button
+          >
+        </el-upload>
+      </div>
+      <div class="noteBox">
+        <h3 class="lableBox">文件备注：</h3>
+        <el-input
+          class="noteClass"
+          v-model="reportData.title"
+          placeholder="输入备注"
+        ></el-input>
+        <el-button
+          class="uploadBtn"
+          size="small"
+          type="primary"
+          @click="submitUpload"
+          >上传到服务器</el-button
+        >
+      </div>
+    </div>
+    <div class="uploadPressMask" v-if="progressLoading">
+      <div class="centerClass">
+        <el-progress type="circle" :percentage="progress"></el-progress>
+      </div>
+    </div>
+    <div class="uploadList">
+      <el-table
+        :data="fileData"
+        style="width: 100%"
+        border
+        stripe
+        height="calc(100% - 0px)"
+        v-loading="fileloading"
+      >
+        <el-table-column type="index" width="50" label="序号">
+        </el-table-column>
+        <el-table-column
+          prop="uploadDate"
+          label="创建时间"
+          width="180"
+        ></el-table-column>
+        <el-table-column prop="name" label="文件名称">
+          <template slot-scope="scope">
+            <span
+              @dblclick="handleDblClick(scope.row.path)"
+              style="cursor: pointer"
+            >
+              {{ scope.row.name }}</span
+            >
+          </template>
+        </el-table-column>
+        <el-table-column prop="path" label="文件路径">
+          <template slot-scope="scope">
+            <span
+              @dblclick="handleDblClick(scope.row.path)"
+              style="cursor: pointer"
+            >
+              {{ scope.row.path }}</span
+            >
+          </template>
+        </el-table-column>
+        <el-table-column prop="title" label="备注"> </el-table-column>
+        <!-- <el-table-column prop="path" label="文件路径"> </el-table-column> -->
+        <el-table-column label="操作" width="300" class-name="editClass">
+          <template slot-scope="scope">
+            <el-link
+              type="primary"
+              @click="handleEditClick(scope.row)"
+              size="small"
+              icon="el-icon-edit"
+              >修改</el-link
+            >
+            <el-link
+              type="danger"
+              @click="handleDeleteClick(scope.row)"
+              size="small"
+              icon="el-icon-delete"
+              >删除</el-link
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-dialog
+      class="titleDialog"
+      title="修改备注"
+      :visible.sync="titleShow"
+      :close-on-click-modal="false"
+      width="480px"
+    >
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="100px"
+        class="demo-ruleForm"
+      >
+        <el-form-item label="文件备注" prop="notesNewVal">
+          <el-input v-model="ruleForm.notesNewVal"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="confirmClick">确认</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import {
+  listApk,
+  uploadApk,
+  updateApkApi,
+  deleteApkApi,
+} from "@/utils/api/index";
+
+export default {
+  name: "deviceUpgrade",
+  components: {},
+  data() {
+    return {
+      //上传apk notesVal
+      fileList: [],
+      reportData: {
+        title: "",
+      },
+      fileData: [], //数据列表
+      fileloading: false,
+      editShow: false,
+      titleShow: false,
+      ruleForm: {
+        notesNewVal: "",
+      },
+      rules: {
+        notesNewVal: [
+          { required: true, message: "请输入备注信息", trigger: "blur" },
+        ],
+      },
+      rowData: "", //选中数据
+      progress: 0,
+      progressLoading: false,
+    };
+  },
+  computed: {},
+  mounted() {
+    this.getUpgradeList();
+  },
+  methods: {
+    //双击选中复制
+    handleDblClick(val) {
+      // alert(val);
+      var input = document.createElement("input"); // 创建input对象
+      input.value = val; // 设置复制内容
+      document.body.appendChild(input); // 添加临时实例
+      input.select(); // 选择实例内容
+      document.execCommand("Copy"); // 执行复制
+      document.body.removeChild(input); // 删除临时实例
+      //this.$message.success("复制成功！");
+      this.$message({
+        duration: 1500,
+        showClose: true,
+        message: "复制成功！" + val,
+        type: "success",
+      });
+    },
+    //上传进度
+    handleProgress(event, file, fileList) {
+      this.progressLoading = true;
+      // 获取上传进度百分比
+      if (event.percent == 100) {
+        this.progress = 98;
+      } else {
+        this.progress = Math.round(event.percent);
+      }
+      // 显示上传进度
+      console.log(this.progress); // 或者你可以使用其他方式来显示进度，比如使用进度条组件等。
+    },
+    beforeUpload(file) {
+      const fileName = file.name;
+      if (fileName.length > 19) {
+        this.$message.error("文件名长度不能超过 19 个字符！");
+        return false; // 阻止文件自动上传
+      }
+      return true; // 允许文件继续上传
+    },
+    // //点击升级确定
+    // beforeAvatarUpload(file) {
+    //   console.log(this.reportData.title);
+    //   console.log(file);
+    // },
+    //上传apk
+    submitUpload() {
+      //console.log();
+      this.$refs.upload.submit();
+    },
+    customUpload(options) {
+      console.log(options);
+      const formData = new FormData();
+      formData.append("file", options.file);
+      formData.append("title", this.reportData.title); // 假设后端需要这个字段
+      console.log(formData);
+      uploadApk(formData, (progressEvent) => {
+        // 计算上传进度百分比
+        const percentCompleted = Math.round(
+          (progressEvent.loaded * 100) / progressEvent.total
+        );
+        this.progressLoading = true;
+        // 更新UI或执行其他逻辑，比如显示进度条
+        console.log(`上传进度: ${percentCompleted}%`);
+        this.progress = Math.round(percentCompleted);
+
+        // 你可以通过其他方式将进度信息传递给组件或Vue实例
+        // this.uploadProgress = percentCompleted; // 假设你有一个data属性来存储进度
+      })
+        .then((res) => {
+          console.log(res);
+          // this.progressLoading = true;
+          if (res.code == 200) {
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              message: "文件上传成功",
+              type: "success",
+            });
+            this.reportData.title = "";
+            this.$refs.upload.clearFiles();
+            this.getUpgradeList();
+            this.progressLoading = false;
+          } else {
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              message: res.msg,
+              type: "error",
+            });
+            this.reportData.title = "";
+            this.$refs.upload.clearFiles();
+          }
+        })
+        .catch((error) => {});
+    },
+    // handleAvatarSuccess(res, file) {
+    //   this.progressLoading = false;
+    //   console.log(res);
+    //   if (res.code == 200) {
+    //     this.$message({
+    //       duration: 1500,
+    //       showClose: true,
+    //       message: "文件上传成功",
+    //       type: "success",
+    //     });
+    //     this.reportData.title = "";
+    //     this.$refs.upload.clearFiles();
+    //     this.getUpgradeList();
+    //   } else {
+    //     this.$message({
+    //       duration: 1500,
+    //       showClose: true,
+    //       message: res.msg,
+    //       type: "error",
+    //     });
+    //     this.reportData.title = "";
+    //     this.$refs.upload.clearFiles();
+    //   }
+    // },
+    getUpgradeList() {
+      this.fileloading = true;
+      listApk({
+        pageindex: 1,
+        pagesize: 2000,
+      })
+        .then((res) => {
+          console.log(res);
+          this.fileData = res.data.list;
+          this.fileloading = false;
+        })
+        .catch((err) => {});
+    },
+    handleDeleteClick(row) {
+      deleteApkApi({
+        id: row.id,
+      })
+        .then((res) => {
+          console.log(res);
+          this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning",
+          })
+            .then(() => {
+              this.$message({
+                duration: 1500,
+                showClose: true,
+                message: "文件删除成功",
+                type: "success",
+              });
+              this.getUpgradeList();
+            })
+            .catch(() => {});
+        })
+        .catch((err) => {});
+    },
+    handleEditClick(row) {
+      console.log(row);
+      this.titleShow = true;
+      this.ruleForm.notesNewVal = row.title;
+      this.rowData = row;
+    },
+    confirmClick() {
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          console.log(this.ruleForm.notesNewVal);
+          updateApkApi({
+            id: this.rowData.id,
+            title: this.ruleForm.notesNewVal,
+          })
+            .then((res) => {
+              console.log(res);
+              this.$message({
+                duration: 1500,
+                showClose: true,
+                message: "修改备注成功",
+                type: "success",
+              });
+              this.titleShow = false;
+              this.getUpgradeList();
+            })
+            .catch((err) => {});
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+  },
+};
+</script>
+<style lang="less">
+.upgradationBox {
+  height: calc(100% - 24px);
+  width: calc(100% - 24px);
+  padding: 12px;
+  .upgradeBox {
+    height: 32px;
+    line-height: 32px;
+    display: flex;
+    margin-bottom: 16px;
+    // align-items: center;
+    // flex-direction: column;
+    .lableBox {
+      font-size: 14px;
+      font-weight: normal;
+      width: 78px;
+    }
+
+    .upload-demo {
+      position: relative;
+      display: flex;
+      flex-direction: row-reverse;
+      margin-right: 32px;
+      .el-upload-list {
+        width: 320px;
+        height: 32px;
+        line-height: 32px;
+        border: 1px solid #ddd;
+        margin-right: 12px;
+        border-radius: 4px;
+        .el-upload-list__item {
+          transition: none;
+          font-size: 14px;
+          color: #606266;
+          position: relative;
+          box-sizing: border-box;
+          border-radius: 4px;
+          width: 100%;
+          height: 32px;
+          line-height: 32px;
+          margin-top: 0px !important;
+          .el-icon-close {
+            top: 10px;
+          }
+        }
+      }
+    }
+  }
+  .noteBox {
+    height: 32px;
+    line-height: 32px;
+    display: flex;
+    margin-bottom: 16px;
+    .noteClass {
+      width: 322px;
+    }
+    .lableBox {
+      font-size: 14px;
+      font-weight: normal;
+      width: 78px;
+    }
+  }
+  .uploadBtn {
+    margin-left: 12px;
+  }
+  .uploadForm {
+    .el-button--default,
+    .el-button--primary {
+      width: auto;
+    }
+  }
+  .uploadList {
+    margin-top: 20px;
+    height: calc(100% - 100px);
+    .el-table {
+      .el-table__cell {
+        text-align: center;
+      }
+    }
+  }
+  .editClass {
+    .el-link.el-link--primary {
+      margin-right: 14px;
+    }
+  }
+  .uploadPressMask {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    background-color: hsla(0, 0%, 100%, 0.9);
+    margin: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 3;
+    .centerClass {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .el-table::before {
+    height: 1px !important;
+  }
+}
+.el-dialog__headerbtn {
+  top: 18px;
+  .el-dialog__close {
+    font-size: 26px;
+    &:hover {
+      background: #e2e2e2;
+    }
+  }
+}
+</style>

src/views/system/globalTools/index.vue

@@ -62,6 +62,7 @@ import {
 } from "@/utils/api/index";
 
 export default {
+  name: "globalTools",
   components: {},
   data() {
     return {

src/views/system/menuManagement/components/addMenu.vue

@@ -0,0 +1,135 @@
+<template>
+  <el-dialog
+    class="addMenuDialog"
+    :title="title"
+    :visible.sync="isShow"
+    :close-on-click-modal="false"
+    width="470px"
+    @close="handleclose"
+  >
+    <el-form
+      label-position="left"
+      ref="formInfo"
+      label-width="100px"
+      :rules="title == '新增' ? rules : xgrules"
+      :model="formdata"
+    >
+      <el-form-item label="key：" prop="key">
+        <el-input
+          placeholder="请输入key"
+          v-model="formdata.key"
+          autocomplete="off"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="desc：" prop="desc">
+        <el-input
+          placeholder="请输入desc"
+          v-model="formdata.desc"
+          autocomplete="off"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="isShow = false">取 消</el-button>
+      <el-button type="primary" @click="submitForm()">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { addResourceApi, updateResourceApi } from "@/utils/api/index";
+export default {
+  props: {
+    title: String,
+  },
+  data() {
+    return {
+      roleUser: "",
+      isShow: false,
+
+      formdata: {},
+      rules: {
+        key: [{ required: true, message: "请输入key", trigger: "blur" }],
+        desc: [{ required: true, message: "请输入desc", trigger: "blur" }],
+      },
+      xgrules: {
+        key: [{ required: true, message: "请输入key", trigger: "blur" }],
+        desc: [{ required: true, message: "请输入desc", trigger: "blur" }],
+      },
+    };
+  },
+  methods: {
+    //判断
+    getdataform(val) {
+      console.log(val);
+      if (val == null) {
+        return (this.formdata = {
+          key: "",
+          desc: "",
+        });
+      }
+      //this.formdata = val;
+      this.formdata = JSON.parse(JSON.stringify(val));
+    },
+    // 保存确定操作
+    submitForm() {
+      this.$refs.formInfo.validate((valid) => {
+        if (valid) {
+          if (this.title == "新增") {
+            addResourceApi(this.formdata)
+              .then((res) => {
+                if (res.code == 200) {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: "添加成功",
+                    type: "success",
+                  });
+                  this.isShow = false;
+                } else {
+                  this.$message.error(res.msg);
+                }
+              })
+              .catch((err) => {});
+          } else {
+            updateResourceApi(this.formdata)
+              .then((res) => {
+                if (res.code == 200) {
+                  this.$message.success("修改成功");
+                  this.isShow = false;
+                } else {
+                  this.$message.error(res.msg);
+                }
+              })
+              .catch((err) => {});
+          }
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    display() {
+      this.isShow = true;
+      this.roleUser = localStorage.getItem("role");
+    },
+    hide() {
+      this.isShow = false;
+    },
+    handleclose() {
+      this.$parent.menuListAll();
+    },
+  },
+  mounted() {},
+};
+</script>
+<style lang="less">
+.addMenuDialog {
+  .el-form-item {
+    .el-input,
+    .el-select,
+    .el-input-number {
+      width: 100%;
+    }
+  }
+}
+</style>

src/views/system/menuManagement/index.vue

@@ -0,0 +1,192 @@
+<template>
+  <div class="menumanagement">
+    <div class="deviceBox">
+      <div class="deviceBtnGroup">
+        <h4>菜单功能管理</h4>
+        <el-button type="primary" icon="el-icon-plus" @click="handleAdddevice()"
+          >新增</el-button
+        >
+      </div>
+      <div class="deviceTable">
+        <el-table
+          ref="multipleTable"
+          :data="menuTableData"
+          stripe
+          tooltip-effect="dark"
+          style="width: 100%"
+          height="calc(100% - 40px)"
+          @row-click="handleRowClick"
+        >
+          <template slot="empty">
+            <el-empty :image-size="160" description="暂无数据"></el-empty>
+          </template>
+          <el-table-column
+            label="ID"
+            show-overflow-tooltip
+            prop="id"
+          ></el-table-column>
+          <el-table-column
+            label="路由名称"
+            show-overflow-tooltip
+            prop="key"
+          ></el-table-column>
+          <el-table-column
+            label="菜单名称"
+            show-overflow-tooltip
+            prop="desc"
+          ></el-table-column>
+          <el-table-column
+            label="创建时间"
+            show-overflow-tooltip
+            prop="createTime"
+          >
+            <template slot-scope="scope" v-if="scope.row.createTime !== null">{{
+              $moment(scope.row.createTime).format("yy-MM-DD HH:mm:ss")
+            }}</template>
+          </el-table-column>
+          <el-table-column fixed="right" label="操作" width="200">
+            <template slot-scope="scope" v-if="scope.row.id !== 0">
+              <el-button
+                @click.native.stop="handleResive(scope.row)"
+                type="text"
+                >修改</el-button
+              >
+
+              <el-button
+                type="text"
+                class="deleteText"
+                @click.native.stop="handleDelete(scope.row)"
+                >删除</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <!-- 新增 -->
+    <addMenu :title="title" ref="menuref"></addMenu>
+  </div>
+</template>
+<script>
+import addMenu from "./components/addMenu.vue";
+
+import { getMenuListApi, deleteResourceApi } from "@/utils/api/index";
+
+export default {
+  name: "menuManagement",
+  components: {
+    addMenu,
+  },
+  data() {
+    return {
+      title: "", //弹窗标题
+      menuTableData: [],
+      //multipleSelection: [], //获取当前选中
+      page: 1, // 当前页数
+      pageSize: 20, // 每页数量
+      total: 0, //总条数
+    };
+  },
+  created() {
+    this.menuListAll();
+  },
+  methods: {
+    //获取线路列表数据
+    menuListAll() {
+      getMenuListApi()
+        .then((res) => {
+          this.menuTableData = res.data;
+          this.total = res.data.total;
+        })
+        .catch((err) => {});
+    },
+    //点击行选中
+    handleRowClick(row, column, event) {
+      this.$refs.multipleTable.toggleRowSelection(row);
+    },
+    //获取选中的行
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    // 新建
+    handleAdddevice() {
+      this.title = "新增";
+      this.$refs.menuref.display();
+      this.$refs.menuref.getdataform(null);
+    },
+
+    //修改
+    handleResive(data) {
+      this.title = "修改";
+      this.$refs.menuref.display();
+      this.$refs.menuref.getdataform(data);
+    },
+
+    //删除数据
+    handleDelete(data) {
+      console.log(data);
+      this.$confirm("确定要删除记录吗,同时删除关联关系?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          deleteResourceApi({ id: data.id }).then((res) => {
+            console.log(res.code);
+            if (res.code == 200) {
+              this.$message.success("删除成功");
+              this.menuListAll(); //刷新
+            } else if (res.code == 400) {
+              this.$message.error(res.msg);
+            }
+          });
+        })
+        .catch(() => {
+          this.$message({
+            duration: 1500,
+            showClose: true,
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+    //点击分页
+    handleCurrentChange(val) {
+      this.page = val;
+      this.menuListAll();
+    },
+    //每页条数
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.menuListAll();
+    },
+  },
+};
+</script>
+<style lang="less">
+.menumanagement {
+  width: calc(100% - 24px);
+  height: calc(100% - 24px);
+  padding: 12px 12px;
+  background: #fff;
+
+  .deviceBox {
+    border: 1px solid #dddddd;
+    height: calc(100% - 24px);
+    padding: 12px;
+    border-radius: 4px;
+  }
+  .deviceBtnGroup {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .deviceTable {
+    margin-top: 16px;
+    height: calc(100% - 48px);
+    //background: #fcc;
+  }
+}
+</style>
+../user/components/blindPermiss.vue./components/addMenu.vue

src/views/system/roleManagement/components/addRole.vue

@@ -0,0 +1,132 @@
+<template>
+  <el-dialog
+    class="addUserDialog"
+    :title="title"
+    :visible.sync="isShow"
+    :close-on-click-modal="false"
+    width="470px"
+    @close="handleclose"
+  >
+    <el-form
+      label-position="left"
+      ref="formInfo"
+      label-width="100px"
+      :rules="title == '新增' ? rules : xgrules"
+      :model="formdata"
+    >
+      <el-form-item label="角色名称：" prop="name">
+        <el-input
+          placeholder="请输入角色名称"
+          v-model="formdata.name"
+          autocomplete="off"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="备注：" prop="desc">
+        <el-input
+          placeholder="请输入备注"
+          v-model="formdata.desc"
+          autocomplete="off"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="isShow = false">取 消</el-button>
+      <el-button type="primary" @click="submitForm()">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { addRole, updateRole } from "@/utils/api/index";
+export default {
+  props: {
+    title: String,
+  },
+  data() {
+    return {
+      roleUser: "",
+      isShow: false,
+
+      formdata: {},
+      rules: {
+        name: [{ required: true, message: "请输入角色名", trigger: "blur" }],
+      },
+      xgrules: {
+        name: [{ required: true, message: "请输入角色名", trigger: "blur" }],
+      },
+    };
+  },
+  methods: {
+    //判断
+    getdataform(val) {
+      console.log(val);
+      if (val == null) {
+        return (this.formdata = {
+          name: "",
+        });
+      }
+      //this.formdata = val;
+      this.formdata = JSON.parse(JSON.stringify(val));
+    },
+    // 保存确定操作
+    submitForm() {
+      this.$refs.formInfo.validate((valid) => {
+        if (valid) {
+          if (this.title == "新增") {
+            addRole(this.formdata)
+              .then((res) => {
+                if (res.code == 200) {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: "添加成功",
+                    type: "success",
+                  });
+                  this.isShow = false;
+                } else {
+                  this.$message.error(res.msg);
+                }
+              })
+              .catch((err) => {});
+          } else {
+            updateRole(this.formdata)
+              .then((res) => {
+                if (res.code == 200) {
+                  this.$message.success("修改成功");
+                  this.isShow = false;
+                } else {
+                  this.$message.error(res.msg);
+                }
+              })
+              .catch((err) => {});
+          }
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    display() {
+      this.isShow = true;
+      this.roleUser = localStorage.getItem("role");
+    },
+    hide() {
+      this.isShow = false;
+    },
+    handleclose() {
+      this.$parent.roleListAll();
+    },
+  },
+  mounted() {},
+};
+</script>
+<style lang="less">
+.addUserDialog {
+  .el-form-item {
+    .el-input,
+    .el-select,
+    .el-input-number {
+      width: 100%;
+    }
+  }
+}
+</style>

src/views/system/roleManagement/components/blindMenuPermiss.vue

@@ -0,0 +1,213 @@
+<template>
+  <el-dialog
+    class="blindMenuDialog"
+    title="菜单功能绑定"
+    :visible.sync="isShow"
+    :close-on-click-modal="false"
+    width="470px"
+    @close="hide"
+  >
+    <div class="treeBoxList" v-loading="treeLoading">
+      <div class="menuBox">
+        <h3>菜单选项</h3>
+        <el-checkbox-group v-model="checkedMenu">
+          <el-checkbox
+            v-for="item in menuCheckOption"
+            :label="item.id"
+            :key="item.id"
+            >{{ item.desc }}</el-checkbox
+          >
+        </el-checkbox-group>
+      </div>
+      <div class="btnBox">
+        <h3>功能选项</h3>
+        <el-checkbox-group v-model="checkedBtn">
+          <el-checkbox
+            v-for="item in btnCheckOption"
+            :label="item.id"
+            :key="item.id"
+            >{{ item.desc }}</el-checkbox
+          >
+        </el-checkbox-group>
+      </div>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="isShow = false">取 消</el-button>
+      <el-button type="primary" @click="submitForm()">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import {
+  getMenuListApi,
+  getRolePermissionApi,
+  getRolechangePermissionApi,
+} from "@/utils/api/index";
+export default {
+  props: {},
+  data() {
+    return {
+      roleUser: "",
+      isShow: false,
+      treeLoading: false,
+      rowData: "",
+      allCheckList: [], //全部的内容
+      menuList: [],
+      checkedMenu: [], //选中的菜单checkbox
+      menuCheckOption: [], //checkbox列表
+      checkedIds: [], //权限返回的内容id
+      checkedBtn: [], //选中的按钮
+      btnCheckOption: [],
+    };
+  },
+  methods: {
+    //判断
+    getdataform(val) {
+      this.rowData = JSON.parse(JSON.stringify(val));
+    },
+    //获取所有的菜单列表
+    getMenuList() {
+      this.treeLoading = true;
+      getMenuListApi()
+        .then((res) => {
+          if (res.code == 200) {
+            console.log(res);
+            this.allCheckList = res.data;
+            const menuItems = res.data.filter((item) => item.key.includes("/"));
+            this.menuCheckOption = menuItems.filter((item) => {
+              return (
+                item.key !== "/userManagement" &&
+                item.key !== "/menuManagement" &&
+                item.key !== "/roleManagement"
+              );
+            });
+            this.btnCheckOption = res.data.filter((item) =>
+              item.key.includes("Btn")
+            );
+            console.log(this.menuCheckOption, this.btnCheckOption);
+            this.getRolePermission();
+          } else {
+            this.$message.error(res.msg);
+          }
+        })
+        .catch((err) => {});
+    },
+    //获取角色的菜单权限
+    getRolePermission() {
+      console.log(this.rowData);
+      getRolePermissionApi({ id: this.rowData.id })
+        .then((res) => {
+          if (res.code == 200) {
+            console.log(res);
+            this.checkedIds = res.data;
+            console.log(this.checkedIds);
+
+            // 创建一个Set，以便快速检查id是否存在
+            const menuOptionIds = new Set(
+              this.menuCheckOption.map((option) => option.id)
+            );
+
+            // 过滤资源数组，只保留那些其resourceId存在于menuOptionIds中的项
+            const filteredResources = this.checkedIds.filter((resource) =>
+              menuOptionIds.has(resource.resourceId)
+            );
+            // 创建一个Set，以便快速检查id是否存在
+            const btnOptionIds = new Set(
+              this.btnCheckOption.map((option) => option.id)
+            );
+
+            // 过滤资源数组，只保留那些其resourceId存在于menuOptionIds中的项
+            const filteredBtnResources = this.checkedIds.filter((resource) =>
+              btnOptionIds.has(resource.resourceId)
+            );
+            console.log(filteredResources, filteredBtnResources);
+            this.checkedMenu = filteredResources.map((obj) => obj.resourceId);
+            this.checkedBtn = filteredBtnResources.map((obj) => obj.resourceId);
+            // console.log("我时查询到的选中的值", this.checkedIds);
+
+            this.treeLoading = false;
+          } else {
+            this.$message.error(res.msg);
+          }
+        })
+        .catch((err) => {});
+    },
+    // 保存确定操作
+    submitForm() {
+      console.log(this.checkedMenu);
+      console.log(this.checkedBtn);
+      let paramsList = [];
+      this.checkedMenu.map((id) => {
+        paramsList.push({ resourceId: id });
+      });
+      this.checkedBtn.map((id) => {
+        paramsList.push({ resourceId: id });
+      });
+      paramsList = paramsList.filter((item, index, self) => {
+        return (
+          self.findIndex((t) => t.resourceId === item.resourceId) === index
+        );
+      });
+      console.log(paramsList);
+      //设置权限
+      getRolechangePermissionApi({
+        list: paramsList,
+        roleId: this.rowData.id,
+      })
+        .then((res) => {
+          if (res.code == 200) {
+            console.log(res);
+            this.isShow = false;
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              message: "权限绑定成功",
+              type: "success",
+            });
+          } else {
+            this.$message.error(res.msg);
+          }
+        })
+        .catch((err) => {});
+    },
+
+    display() {
+      this.isShow = true;
+      this.getMenuList();
+    },
+    hide() {
+      this.isShow = false;
+      this.allCheckList = [];
+      this.checkedMenu = [];
+      this.checkedBtn = [];
+    },
+  },
+  mounted() {},
+};
+</script>
+<style lang="less">
+.blindMenuDialog {
+  .treeBoxList {
+    height: 500px;
+    overflow: auto;
+    display: flex;
+    justify-content: space-between;
+    .menuBox,
+    .btnBox {
+      h3 {
+        font-size: 14px;
+        margin-bottom: 12px;
+        font-weight: normal;
+      }
+    }
+    .el-checkbox-group {
+      display: flex;
+      flex-direction: column;
+      .el-checkbox {
+        height: 32px;
+        line-height: 32px;
+      }
+    }
+  }
+}
+</style>

src/views/system/roleManagement/index.vue

@@ -0,0 +1,217 @@
+<template>
+  <div class="rolemanagement">
+    <div class="deviceBox">
+      <div class="deviceBtnGroup">
+        <h4>角色管理</h4>
+        <el-button type="primary" icon="el-icon-plus" @click="handleAdddevice()"
+          >新增</el-button
+        >
+      </div>
+      <div class="deviceTable">
+        <el-table
+          ref="multipleTable"
+          :data="roleTableData"
+          stripe
+          tooltip-effect="dark"
+          style="width: 100%"
+          height="calc(100% - 40px)"
+          @row-click="handleRowClick"
+        >
+          <template slot="empty">
+            <el-empty :image-size="160" description="暂无数据"></el-empty>
+          </template>
+          <el-table-column
+            label="ID"
+            show-overflow-tooltip
+            prop="id"
+          ></el-table-column>
+          <el-table-column
+            label="角色"
+            show-overflow-tooltip
+            prop="name"
+          ></el-table-column>
+          <el-table-column
+            label="备注"
+            show-overflow-tooltip
+            prop="desc"
+          ></el-table-column>
+          <el-table-column
+            label="创建时间"
+            show-overflow-tooltip
+            prop="createTime"
+          >
+            <template slot-scope="scope" v-if="scope.row.createTime !== null">{{
+              $moment(scope.row.createTime).format("yy-MM-DD HH:mm:ss")
+            }}</template>
+          </el-table-column>
+          <el-table-column fixed="right" label="操作" width="200">
+            <template slot-scope="scope" v-if="scope.row.id !== 0">
+              <el-button
+                @click.native.stop="handleResive(scope.row)"
+                type="text"
+                >修改</el-button
+              >
+              <el-button
+                @click.native.stop="handleMenuBlind(scope.row)"
+                type="text"
+                >菜单功能分配</el-button
+              >
+              <el-button
+                type="text"
+                class="deleteText"
+                @click.native.stop="handleDelete(scope.row)"
+                >删除</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- <div class="pageNation">
+          <el-pagination
+            @current-change="handleCurrentChange"
+            @size-change="handleSizeChange"
+            :current-page="page"
+            :page-size="pageSize"
+            layout="sizes, prev, pager, next, jumper,total"
+            :total="total"
+            background
+          >
+          </el-pagination>
+        </div> -->
+      </div>
+    </div>
+    <!-- 新增 -->
+    <addRole :title="title" ref="adduserref"></addRole>
+    <!-- 权限绑定 -->
+    <blindMenuPermiss ref="blindMenuPermissRef"></blindMenuPermiss>
+  </div>
+</template>
+<script>
+import addRole from "./components/addRole.vue";
+import blindMenuPermiss from "./components/blindMenuPermiss.vue";
+import { getRoleList, deleteRole } from "@/utils/api/index";
+
+export default {
+  name: "roleManagement",
+  components: {
+    addRole,
+    blindMenuPermiss,
+  },
+  data() {
+    return {
+      title: "", //弹窗标题
+      roleTableData: [],
+      //multipleSelection: [], //获取当前选中
+      page: 1, // 当前页数
+      pageSize: 20, // 每页数量
+      total: 0, //总条数
+    };
+  },
+  created() {
+    this.roleListAll();
+  },
+  methods: {
+    //获取角色数据
+    roleListAll() {
+      getRoleList()
+        .then((res) => {
+          this.roleTableData = res.data;
+          this.total = res.data.total;
+        })
+        .catch((err) => {});
+    },
+    //点击行选中
+    handleRowClick(row, column, event) {
+      this.$refs.multipleTable.toggleRowSelection(row);
+    },
+    //获取选中的行
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    // 新建
+    handleAdddevice() {
+      this.title = "新增";
+      this.$refs.adduserref.display();
+      this.$refs.adduserref.getdataform(null);
+    },
+
+    //修改
+    handleResive(data) {
+      this.title = "修改";
+      this.$refs.adduserref.display();
+      this.$refs.adduserref.getdataform(data);
+    },
+    //菜单资源分配
+    handleMenuBlind(row) {
+      console.log(row);
+      this.$refs.blindMenuPermissRef.display();
+      this.$refs.blindMenuPermissRef.getdataform(row);
+    },
+
+    //删除数据
+    handleDelete(data) {
+      console.log(data);
+      this.$confirm("确定要删除记录吗,同时删除关联关系?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          deleteRole({ id: data.id }).then((res) => {
+            console.log(res.code);
+            if (res.code == 200) {
+              this.$message.success("删除成功");
+              this.roleListAll(); //刷新
+            } else if (res.code == 400) {
+              this.$message.error(res.msg);
+            }
+          });
+        })
+        .catch(() => {
+          this.$message({
+            duration: 1500,
+            showClose: true,
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+    //点击分页
+    handleCurrentChange(val) {
+      this.page = val;
+      this.roleListAll();
+    },
+    //每页条数
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.roleListAll();
+    },
+  },
+};
+</script>
+<style lang="less">
+.rolemanagement {
+  width: calc(100% - 24px);
+  height: calc(100% - 24px);
+  padding: 12px 12px;
+  background: #fff;
+
+  .deviceBox {
+    border: 1px solid #dddddd;
+    height: calc(100% - 24px);
+    padding: 12px;
+    border-radius: 4px;
+  }
+  .deviceBtnGroup {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .deviceTable {
+    margin-top: 16px;
+    height: calc(100% - 48px);
+    //background: #fcc;
+  }
+}
+</style>
+../user/components/blindPermiss.vue

src/views/system/user/components/addUser.vue

@@ -25,9 +25,9 @@
         <el-select v-model="formdata.role" placeholder="请选择">
           <el-option
             v-for="item in roleoptions"
-            :key="item.value"
+            :key="item.id"
-            :label="item.label"
+            :label="item.name"
-            :value="item.value"
+            :value="item.id"
           ></el-option>
         </el-select>
       </el-form-item>
@@ -39,6 +39,13 @@
           show-password
         ></el-input>
       </el-form-item>
+      <el-form-item label="备注：" prop="notes">
+        <el-input
+          placeholder="请输入备注"
+          v-model="formdata.notes"
+          autocomplete="off"
+        ></el-input>
+      </el-form-item>
     </el-form>
     <div slot="footer" class="dialog-footer">
       <el-button @click="isShow = false">取 消</el-button>
@@ -47,7 +54,7 @@
   </el-dialog>
 </template>
 <script>
-import { addUserApi, updateUserApi } from "@/utils/api/index";
+import { addUserApi, updateUserApi, getRoleList } from "@/utils/api/index";
 export default {
   props: {
     title: String,
@@ -58,12 +65,12 @@ export default {
       isShow: false,
       roleoptions: [
         {
-          value: 1,
+          id: 1,
-          label: "管理员",
+          name: "管理员",
         },
         {
-          value: 2,
+          id: 2,
-          label: "用户",
+          name: "用户",
         },
       ],
 
@@ -98,6 +105,16 @@ export default {
       //this.formdata = val;
       this.formdata = JSON.parse(JSON.stringify(val));
     },
+    //获取角色列表
+    getRoleListAll() {
+      getRoleList()
+        .then((res) => {
+          console.log("获取角色列表", res.data);
+          this.roleoptions = res.data.filter((role) => role.id !== 0);
+        })
+        .catch((err) => {});
+    },
+
     // 保存确定操作
     submitForm() {
       this.$refs.formInfo.validate((valid) => {
@@ -139,12 +156,13 @@ export default {
     display() {
       this.isShow = true;
       this.roleUser = localStorage.getItem("role");
+      this.getRoleListAll();
     },
     hide() {
       this.isShow = false;
     },
     handleclose() {
-      this.$parent.deviceList();
+      this.$parent.userList();
     },
   },
   mounted() {},

src/views/system/user/components/blindPermiss.vue

@@ -0,0 +1,214 @@
+<template>
+  <el-dialog
+    class="blindDialog"
+    title="权限绑定"
+    :visible.sync="isShow"
+    :close-on-click-modal="false"
+    width="470px"
+    @close="handleclose"
+  >
+    <div class="treeBoxList" v-loading="treeLoading">
+      <el-tree
+        :data="treeData"
+        show-checkbox
+        node-key="compositeKey"
+        ref="tree"
+        highlight-current
+        :default-expanded-keys="defaultExpandedArr"
+        :props="defaultProps"
+      >
+      </el-tree>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="isShow = false">取 消</el-button>
+      <el-button type="primary" @click="submitForm()">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import {
+  getPermissionTree,
+  getPermission,
+  changePermission,
+} from "@/utils/api/index";
+export default {
+  props: {},
+  data() {
+    return {
+      roleUser: "",
+      isShow: false,
+      treeData: [],
+      defaultProps: {
+        //指定参数格式回显数据
+        children: "list",
+        label: "name",
+        key: "compositeKey", // 确保这里使用的是 uniqueKey
+      },
+      treeLoading: false,
+      rowData: "",
+      premissData: [],
+      selectTreeNode: [],
+      defaultExpandedArr: [],
+      rules: {
+        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
+      },
+      xgrules: {
+        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
+      },
+    };
+  },
+  methods: {
+    //判断
+    getdataform(val) {
+      this.rowData = JSON.parse(JSON.stringify(val));
+    },
+    //获取权限树结构
+    getPermissionList() {
+      this.treeLoading = true;
+      getPermissionTree()
+        .then((res) => {
+          if (res.code == 200) {
+            console.log(res);
+            // this.treeLoading = false;
+            //this.treeData = res.data.list;
+            this.treeData = this.processData(res.data);
+            console.log(this.treeData);
+            // this.treeData.forEach((item) => {
+            //   this.defaultExpandedArr.push(item.id);
+            // });
+            this.defaultExpandedArr.push(this.treeData[0].compositeKey);
+            // console.log("我是默认展开的id", this.defaultExpandedArr);
+            this.getPermissionRole();
+          } else {
+            this.$message.error(res.msg);
+          }
+        })
+        .catch((err) => {});
+    },
+    processData(data, level = 0) {
+      return data.map((node) => {
+        const compositeKey = `${level}-${node.id}`; // 创建复合标识符
+        node.compositeKey = compositeKey; // 将复合标识符添加到节点属性中
+        if (node.list) {
+          node.list = this.processData(node.list, level + 1); // 递归处理子节点
+        }
+        return node;
+      });
+    },
+    //获取查询杈限
+    getPermissionRole() {
+      console.log(this.rowData);
+      getPermission({ id: this.rowData.uid })
+        .then((res) => {
+          if (res.code == 200) {
+            console.log(res);
+            this.premissData = res.data;
+            // let setCheckedKeysList = this.premissData.map(function (item) {
+            //   return item.resourceId;
+            // });
+            let setCheckedKeysList = [];
+            this.premissData.forEach((node) => {
+              if (node.resourceType == 1) {
+                console.log(node);
+                setCheckedKeysList.push("0-" + node.resourceId);
+              } else if (node.resourceType == 2) {
+                setCheckedKeysList.push("1-" + node.resourceId);
+              } else if (node.resourceType == 3) {
+                setCheckedKeysList.push("2-" + node.resourceId);
+              } else if (node.resourceType == 4) {
+                setCheckedKeysList.push("3-" + node.resourceId);
+              }
+            });
+            console.log(setCheckedKeysList);
+            this.$refs.tree.setCheckedKeys(setCheckedKeysList);
+            this.treeLoading = false;
+            // this.$nextTick(() => {
+            //   this.$refs.tree.setCheckedKeys(setCheckedKeysList);
+            //   this.treeLoading = false;
+            // });
+          } else {
+            this.$message.error(res.msg);
+          }
+        })
+        .catch((err) => {});
+    },
+    // 保存确定操作
+    submitForm() {
+      //获取勾选的父节点和子节点
+      let originData = this.$refs.tree.store;
+      // 定义数组
+      const checkedNodeIds = [];
+      // 判断是否为全选，若为全选状态返回被选中的父节点数据，不为全选状态正常返回被选中的子节点的数据
+      const isAllChecked = function (node) {
+        const childNodes = node.root ? node.root.childNodes : node.childNodes;
+        childNodes.forEach((child) => {
+          if (child.checked) {
+            checkedNodeIds.push(child.data);
+          }
+          if (child.indeterminate) {
+            isAllChecked(child);
+          }
+        });
+      };
+      isAllChecked(originData);
+      console.log(checkedNodeIds);
+      //把获取到的节点遍历 组成想要的内容
+      let paramsList = [];
+      checkedNodeIds.forEach((node) => {
+        if ("dyValue" in node) {
+          console.log(node);
+          paramsList.push({ resourceType: 1, resourceId: node.id });
+        } else if ("bsManufacturer" in node) {
+          paramsList.push({ resourceType: 2, resourceId: node.id });
+        } else if ("lineid" in node) {
+          paramsList.push({ resourceType: 3, resourceId: node.id });
+        } else if ("towerid" in node) {
+          paramsList.push({ resourceType: 4, resourceId: node.id });
+        }
+      });
+      console.log(paramsList);
+      changePermission({
+        list: paramsList,
+        userId: this.rowData.uid,
+      })
+        .then((res) => {
+          if (res.code == 200) {
+            console.log(res);
+            this.isShow = false;
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              message: "权限绑定成功",
+              type: "success",
+            });
+          } else {
+            this.$message.error(res.msg);
+          }
+        })
+        .catch((err) => {});
+    },
+    display() {
+      this.isShow = true;
+      this.getPermissionList();
+    },
+    hide() {
+      this.isShow = false;
+    },
+    handleclose() {
+      this.treeData = [];
+    },
+  },
+  mounted() {},
+};
+</script>
+<style lang="less">
+.blindDialog {
+  .treeBoxList {
+    height: 600px;
+    overflow: auto;
+    .el-dialog__body {
+      overflow: auto;
+    }
+  }
+}
+</style>

src/views/system/user/userManagement.vue

@@ -28,11 +28,22 @@
             show-overflow-tooltip
             prop="userName"
           ></el-table-column>
-          <el-table-column label="角色" show-overflow-tooltip prop="role">
+          <el-table-column label="角色" show-overflow-tooltip prop="roleName">
-            <template slot-scope="scope">{{
+            <template slot-scope="scope">{{ scope.row.roleName }}</template>
-              scope.row.role == 1 ? "管理员" : "用户"
-            }}</template>
           </el-table-column>
+          <!-- <el-table-column label="角色" show-overflow-tooltip prop="roleName">
+            <template slot-scope="scope">
+              <span v-if="scope.row.role == 0">超级管理员</span>
+              <span v-else-if="scope.row.role == 1">管理员</span>
+              <span v-else-if="scope.row.role == 2">用户</span>
+              <span v-else>{{ scope.row.role }}</span>
+            </template>
+          </el-table-column> -->
+          <el-table-column
+            label="备注"
+            show-overflow-tooltip
+            prop="notes"
+          ></el-table-column>
           <el-table-column
             label="创建时间"
             show-overflow-tooltip
@@ -43,12 +54,16 @@
             }}</template>
           </el-table-column>
           <el-table-column fixed="right" label="操作" width="200">
-            <template slot-scope="scope">
+            <template slot-scope="scope" v-if="scope.row.role !== 0">
               <el-button
                 @click.native.stop="handleResive(scope.row)"
                 type="text"
                 >修改</el-button
               >
+              <el-button @click.native.stop="handleBlind(scope.row)" type="text"
+                >资源分配</el-button
+              >
+
               <el-button
                 type="text"
                 class="deleteText"
@@ -74,15 +89,19 @@
     </div>
     <!-- 新增 -->
     <addUser :title="title" ref="adduserref"></addUser>
+    <!-- 权限绑定 -->
+    <blindPermiss ref="blindPermissRef"></blindPermiss>
   </div>
 </template>
 <script>
 import addUser from "./components/addUser.vue";
 import { getUserList, delUserApi } from "@/utils/api/index";
-
+import blindPermiss from "./components/blindPermiss.vue";
 export default {
+  name: "userManagement",
   components: {
     addUser,
+    blindPermiss,
   },
   data() {
     return {
@@ -95,11 +114,11 @@ export default {
     };
   },
   created() {
-    this.deviceList();
+    this.userList();
   },
   methods: {
     //获取线路列表数据
-    deviceList() {
+    userList() {
       getUserList({
         pageindex: this.page,
         pagesize: this.pageSize,
@@ -110,6 +129,7 @@ export default {
         })
         .catch((err) => {});
     },
+
     //点击行选中
     handleRowClick(row, column, event) {
       this.$refs.multipleTable.toggleRowSelection(row);
@@ -132,19 +152,24 @@ export default {
       this.$refs.adduserref.display();
       this.$refs.adduserref.getdataform(data);
     },
-
+    //权限绑定
+    handleBlind(data) {
+      this.$refs.blindPermissRef.display();
+      this.$refs.blindPermissRef.getdataform(data);
+    },
     //删除数据
     handleDelete(data) {
+      console.log(data.uid);
       this.$confirm("确定要删除记录吗,同时删除关联关系?", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",
       })
         .then(() => {
-          delUserApi({ uid: data.userId }).then((res) => {
+          delUserApi({ uid: data.uid }).then((res) => {
             if (res.code == 200) {
               this.$message.success("删除成功");
-              this.deviceList(); //刷新
+              this.userList(); //刷新
             } else {
               this.$message.error(res.msg);
             }
@@ -162,12 +187,12 @@ export default {
     //点击分页
     handleCurrentChange(val) {
       this.page = val;
-      this.deviceList();
+      this.userList();
     },
     //每页条数
     handleSizeChange(val) {
       this.pageSize = val;
-      this.deviceList();
+      this.userList();
     },
   },
 };

src/views/towerInformation/index.vue

@@ -112,6 +112,11 @@
               }}</el-link>
             </template></el-table-column
           >
+          <el-table-column
+            prop="termcount"
+            label="已绑定数量"
+            show-overflow-tooltip
+          ></el-table-column>
           <el-table-column
             prop="address"
             label="杆塔地址"
@@ -163,6 +168,7 @@ import { getTowerListApi, delTowerApi, getSearchInfo } from "@/utils/api/index";
 import addDialog from "./components/addDialog.vue";
 
 export default {
+  name: "towerInformation",
   components: {
     addDialog,
   },
@@ -307,9 +313,8 @@ export default {
     //删除数据
     handleDelete(data) {
       let deleteArr = [];
-      deleteArr.push({
+      deleteArr.push(data.id);
-        id: data.id,
+      console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaa", deleteArr);
-      });
       this.$confirm("确定要删除记录吗,同时删除关联关系?", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
@@ -317,13 +322,22 @@ export default {
       })
         .then(() => {
           delTowerApi({ list: deleteArr }).then((res) => {
-            this.deviceList(); //刷新
+            if (res.code == 200) {
-          });
+              this.$message({
-          this.$message({
+                duration: 1500,
-            duration: 1500,
+                showClose: true,
-            showClose: true,
+                type: "success",
-            type: "success",
+                message: "删除成功!",
-            message: "删除成功!",
+              });
+              this.deviceList(); //刷新
+            } else {
+              this.$message({
+                duration: 1500,
+                showClose: true,
+                type: "error",
+                message: "删除失败!",
+              });
+            }
           });
         })
         .catch(() => {

src/views/waterMark/index.vue

@@ -0,0 +1,286 @@
+<template>
+  <div class="waterMarkBox">
+    <div class="setWater">
+      <h4>批量水印下发命令生成</h4>
+      <div class="waterForm">
+        <div class="channelBox">
+          <h5>选择通道</h5>
+          <el-checkbox-group
+            v-model="checkList"
+            class="groupCheck"
+            @change="handleCheck"
+          >
+            <el-checkbox
+              v-for="item in channelList"
+              :label="item.id"
+              :key="item.id"
+              >{{ item.name }}</el-checkbox
+            >
+          </el-checkbox-group>
+        </div>
+        <div class="cmdidBox">
+          <h5>装置编号</h5>
+          <el-input
+            type="textarea"
+            :rows="18"
+            placeholder="请输入装置编号"
+            v-model="cmdidtextarea"
+          >
+          </el-input>
+        </div>
+        <div class="leftWaterBox">
+          <h5>左侧水印</h5>
+          <el-input
+            type="textarea"
+            :rows="18"
+            placeholder="请输入左侧水印"
+            v-model="leftWatertextarea"
+          >
+          </el-input>
+        </div>
+        <div class="rghtWaterBox">
+          <h5>右侧水印</h5>
+          <el-input
+            type="textarea"
+            :rows="18"
+            placeholder="请输入右侧水印"
+            v-model="rightWatertextarea"
+          >
+          </el-input>
+        </div>
+      </div>
+      <el-button type="primary" @click="handleSure">确 定</el-button>
+      <el-button type="primary" @click="copyShare">复 制</el-button>
+      <el-button class="mlspan" type="text"
+        ><i>{{ issueCommands.length }}</i
+        >条命令</el-button
+      >
+      <div class="commandsBox" id="copy-content">
+        <div class="aaa" v-for="item in issueCommands" v-html="item"></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "waterMark",
+  data() {
+    return {
+      channelList: [
+        {
+          id: 1,
+          name: "通道1",
+        },
+        {
+          id: 2,
+          name: "通道2",
+        },
+        {
+          id: 3,
+          name: "通道3",
+        },
+        {
+          id: 4,
+          name: "通道4",
+        },
+      ],
+      checkList: [], //选中的通道
+      cmdidtextarea: "", //输入的值
+      cmdidArr: [],
+      leftWatertextarea: "", //输入的值
+      leftWaterArr: [],
+      rightWatertextarea: "", //输入的值
+      rightWaterArr: [],
+      issueCommands: [], //打印出来下发命令
+    };
+  },
+  created() {
+    //this.getWater();
+  },
+  methods: {
+    handleCheck(val) {
+      console.log(this.checkList);
+    },
+    handleSure() {
+      console.log(this.checkList);
+      if (this.checkList.length == 0) {
+        this.$message({
+          showClose: true,
+          message: "请选择通道号",
+          type: "warning",
+        });
+        return;
+      }
+      if (this.cmdidtextarea !== "") {
+        this.cmdidArr = [...this.cmdidtextarea.trim().split("\n")]; //装置编号
+      } else {
+        this.$message({
+          showClose: true,
+          message: "请输入装置编号",
+          type: "warning",
+        });
+        return;
+      }
+      if (this.leftWatertextarea !== "") {
+        this.leftWaterArr = [...this.leftWatertextarea.trim().split("\n")]; //左侧水印
+      } else {
+        this.$message({
+          showClose: true,
+          message: "请输入左侧水印",
+          type: "warning",
+        });
+        return;
+      }
+      if (this.rightWatertextarea !== "") {
+        this.rightWaterArr = [...this.rightWatertextarea.trim().split("\n")]; //右侧水印
+      } else {
+        this.$message({
+          showClose: true,
+          message: "请输入右侧水印",
+          type: "warning",
+        });
+        return;
+      }
+
+      console.log(this.cmdidArr);
+      console.log(this.leftWaterArr);
+      console.log(this.rightWaterArr);
+      this.issueCommands = [];
+      this.getWater();
+    },
+    getWater() {
+      for (let j = 0; j < this.checkList.length; j++) {
+        for (let i = 0; i < this.cmdidArr.length; i++) {
+          var command =
+            "/usr/local/bin/xympadmn --server=127.0.0.1 --port=6891 --act=osd --cmdid=" +
+            this.cmdidArr[i] +
+            " --flag=1 --channel=" +
+            this.checkList[j] +
+            ' --leftBottom="' +
+            this.leftWaterArr[i] +
+            '" --rightBottom="' +
+            this.rightWaterArr[i] +
+            '" --clientid=5 --reqid=TS;' +
+            "<br/>" +
+            "sleep 1;" +
+            "<br/>" +
+            "/usr/local/bin/xympadmn --server=127.0.0.1 --port=6891 --act=capture --cmdid=" +
+            this.cmdidArr[i] +
+            " --channel=" +
+            this.checkList[j] +
+            " --preset=255 --type=0;" +
+            "<br/>" +
+            "sleep 1;";
+          this.issueCommands.push(command); //把命令push
+        }
+      }
+    },
+    copyShare() {
+      let div = document.getElementById("copy-content");
+      let range = "";
+      if (document.body.createTextRange) {
+        //兼容ie
+        range = document.body.createTextRange();
+        range.moveToElementText(div);
+        range.select();
+      } else if (window.getSelection) {
+        // 兼容非IE，比如Firefox/chrome
+        let selection = window.getSelection();
+        range = document.createRange();
+        range.selectNodeContents(div);
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+      document.execCommand("Copy"); // 执行浏览器复制命令
+      console.log("已复制好，可贴粘");
+    },
+  },
+};
+</script>
+<style lang="less">
+.waterMarkBox {
+  width: calc(100% - 24px);
+  height: calc(100% - 24px);
+  padding: 12px 12px;
+  background: #fff;
+  .setWater {
+    border: 1px solid #dddddd;
+    height: calc(100% - 24px);
+    padding: 12px;
+    border-radius: 4px;
+    .waterForm {
+      width: 100%;
+      height: 50%;
+      margin-top: 16px;
+      // background: #fcc;
+      display: flex;
+      .channelBox {
+        width: 150px;
+        border: 1px solid #dddddd;
+        padding: 12px;
+        border-radius: 4px;
+        margin-right: 8px;
+        .groupCheck {
+          display: flex;
+          flex-direction: column;
+          margin-top: 12px;
+          .el-checkbox {
+            height: 32px;
+            line-height: 32px;
+          }
+        }
+      }
+      .cmdidBox {
+        width: 250px;
+        border: 1px solid #dddddd;
+        padding: 12px;
+        border-radius: 4px;
+        margin-right: 8px;
+        .el-textarea {
+          margin-top: 12px;
+        }
+      }
+      .leftWaterBox {
+        margin-right: 8px;
+      }
+      .leftWaterBox,
+      .rghtWaterBox {
+        flex: 1;
+        border: 1px solid #dddddd;
+        padding: 12px;
+        border-radius: 4px;
+        .el-textarea {
+          margin-top: 12px;
+        }
+      }
+    }
+    .el-button {
+      margin-top: 4px;
+    }
+    .commandsBox {
+      width: auto;
+      height: calc(50% - 106px);
+      margin-top: 8px;
+      border: 1px solid #fcc;
+      overflow: auto;
+      padding: 8px;
+      border-radius: 4px;
+    }
+    .mlspan {
+      //   margin-left: 24px;
+      //   height: 32px;
+      //   line-height: 32px;
+      //   margin-top: 4px;
+      //   display: inline-block;
+      font-size: 14px;
+      color: #000;
+      cursor: default;
+      i {
+        color: #169e8c;
+        font-weight: bold;
+        font-style: normal;
+      }
+    }
+  }
+}
+</style>

vue.config.js

@@ -21,13 +21,18 @@ module.exports = defineConfig({
     proxy: {
       "/api": {
         //表示拦截以/api开头的请求路径
-        target: "http://47.96.238.157:8093", //阿里云服务器环境
+        target: "http://180.166.218.222:40080", //dell
-        //target: "http://180.166.218.222:40080", //dell
+        //target: "http://192.168.1.190:8080", //liu 本机ip  需要去掉/Api
+        //target: "http://192.168.50.7:8093", //liu 本机ip  需要去掉/Api
+        // target: "http://192.168.111.211:80", //东视
         changOrigin: true, //是否开启跨域
         pathRewrite: {
-          "^/api": "", //重写api，把api变成空字符，因为我们真正请求的路径是没有api的
+          "^/api": "/api", //重写api，把api变成空字符，因为我们真正请求的路径是没有api的
         },
       },
     },
+    client: {
+      overlay: false,
+    },
   },
 });