Compare commits

...

126 Commits

Author SHA1 Message Date
fanluyan 6a6cc213e5 优化 1 year ago
fanluyan e3b7b79e74 优化 1 year ago
fanluyan 18ce1d2a85 优化 1 year ago
fanluyan 63bd189786 优化 1 year ago
fanluyan b6ee182149 Merge branch 'role1.0' into menu1.0 1 year ago
fanluyan 2fb20f00ea 优化 1 year ago
fanluyan 273a9509b3 优化 1 year ago
fanluyan 092698f720 a 1 year ago
fanluyan ad9811ab72 取消设置适配器 1 year ago
fanluyan 24b38ab2eb 优化 1 year ago
fanluyan e8074e74f1 在线离线 1 year ago
fanluyan c15df590bd 优化网络适配器查询 1 year ago
fanluyan 95bc9d09a4 优化视频参数 1 year ago
fanluyan 1127c752e1 覆冰接口 1 year ago
fanluyan 17e5e4605c 优化 1 year ago
fanluyan bd3e4b481f youhua 1 year ago
fanluyan 932f0e968a 优化 1 year ago
fanluyan a35c1912f2 优化 1 year ago
fanluyan 8365e5bfea 优化 1 year ago
fanluyan ea73cb1a24 优化 1 year ago
fanluyan 9e2ad20c0b 优化权限 1 year ago
fanluyan 3c869485ab 优化权限 1 year ago
fanluyan b105c7b200 控制资源权限 1 year ago
fanluyan 5d37873db3 优化 1 year ago
fanluyan 6533731144 优化 1 year ago
fanluyan e458251052 菜单权限修改 1 year ago
fanluyan ecddc99dea 优化 1 year ago
fanluyan 23b397081b 用户菜单功能分配隐藏 1 year ago
fanluyan 7b85da722b “优化” 1 year ago
fanluyan 221be28fff 优化 1 year ago
fanluyan 2f54c610a0 youhua 1 year ago
fanluyan b57c0847de 优化 1 year ago
fanluyan 4392ef299b youhua 1 year ago
fanluyan 205574e9b6 hebing 1 year ago
fanluyan 01b008bfec 添加角色管理 1 year ago
fanluyan 45b1aacc7e youhua 1 year ago
fanluyan 90acfc0a27 优化 1 year ago
fanluyan 67b2706c4b 告警 1 year ago
fanluyan ee82d0fc81 升级 1 year ago
fanluyan 8c5ce46d94 各种信息报 1 year ago
fanluyan 283df218bb 优化 1 year ago
fanluyan e1dcadd102 工作状态报 1 year ago
fanluyan 2ab38f7a9f youhua 1 year ago
fanluyan 5f69fddaa5 添加filesize 1 year ago
fanluyan 38b708b4a3 故障报 1 year ago
fanluyan ceb665d724 优化ip显示 1 year ago
fanluyan 656a3daa8d 装置故障报 1 year ago
fanluyan 2326f8d7c7 youhua 1 year ago
fanluyan 3a527fbb18 优化 1 year ago
fanluyan b3a60b2240 优化 1 year ago
fanluyan f18923ebf1 优化 1 year ago
fanluyan 63d72d78dc 优化 1 year ago
fanluyan a642779d14 优化 1 year ago
fanluyan d96eb977eb 优化 1 year ago
fanluyan 71991fe073 权限优化 1 year ago
fanluyan 572dd7a30b 权限 1 year ago
fanluyan 3c55c84392 优化绑定权限 1 year ago
fanluyan 8ffb77634f youhua 1 year ago
fanluyan 414554c0e5 权限设置 1 year ago
fanluyan 4e98177836 权限问题 1 year ago
fanluyan c2797030dc 添加图片视频文件大小 1 year ago
fanluyan b6d67b038e 权限 1 year ago
fanluyan c9a84a7eb3 修改日期 1 year ago
fanluyan 2c2d771878 权限 1 year ago
fanluyan c71cfda1d8 角色增删改查 1 year ago
fanluyan 5c3ce1f285 时间 1 year ago
fanluyan dc83c28dc5 权限 1 year ago
fanluyan e3b3e08682 修改api地址 1 year ago
fanluyan 2dc62f2d57 添加通道设置,app设置 1 year ago
fanluyan c30be6e10c 添加通道查询 1 year ago
fanluyan dd7fc8b9e4 通达设置 1 year ago
fanluyan 6197c53804 优化通道设置 1 year ago
fanluyan 4f7c960e6b 优化通道设置 1 year ago
fanluyan c9f58fb9ce 优化 1 year ago
fanluyan e58d1c07cb 通道设置 1 year ago
fanluyan fcdde8aa33 添加通道设置功能 1 year ago
fanluyan fa46e54a1d 指定时间拍照 1 year ago
fanluyan 818214d10d 优化收起列表树的bug 1 year ago
fanluyan d3ea703444 wp优化 1 year ago
fanluyan e5bf15f4a2 使用008假数据 1 year ago
fanluyan bbed91b05e 上传图片 1 year ago
fanluyan 8ff60d0a52 添加上传图片 1 year ago
fanluyan 4e4cfc26e0 优化在线离线 1 year ago
fanluyan c6c82dc570 添加收藏夹功能 1 year ago
fanluyan ce1b533423 添加收藏夹功能 1 year ago
fanluyan bd9b11294c 更新左侧树状图60s更新状态 1 year ago
fanluyan 88edc135a9 优化 1 year ago
fanluyan fa1d3650dd 优化下载图片名称 1 year ago
fanluyan 92994a3ef0 优化 2 years ago
fanluyan 7970f3e4b3 修改历史图片缓存 2 years ago
fanluyan 733715a903 添加删除图片 2 years ago
fanluyan ff7556dabe 添加复制 2 years ago
fanluyan be998f5ced 删除覆冰 2 years ago
fanluyan 5bc7261752 覆冰 2 years ago
fanluyan ba823ee505 删除图片功能缺少接口 2 years ago
fanluyan 25ca61b79e 添加tags 2 years ago
fanluyan d2249ca1d0 添加tags缓存 2 years ago
fanluyan 0806ead733 优化 2 years ago
fanluyan 70df922e2a 优化时间选择 2 years ago
fanluyan 4b33b2fb93 优化下载图片 2 years ago
fanluyan a2d0bde682 样式优化 2 years ago
fanluyan 9f6463bfd6 拍照时间表提示 2 years ago
fanluyan f734489a79 左侧树搜索给个时间 2 years ago
fanluyan aa9b6a4f09 ss 2 years ago
fanluyan 05037ccc6d 参数配置添加查询的时间 2 years ago
fanluyan df63fb7b81 参数配置添加查询的时间 2 years ago
fanluyan 83a531be52 图片不能被选中 2 years ago
fanluyan 4aa18787c3 样式优化 2 years ago
fanluyan a7a0b600f2 点击展示多图 2 years ago
fanluyan b17f4424a6 优化装置列表 2 years ago
fanluyan 25342a89e9 修改左侧树状结构 2 years ago
fanluyan f606b9003e 修改左侧树状结构 2 years ago
fanluyan 96a75a4e6b 采样参数,图像,id查询添加rf参数 2 years ago
fanluyan 56e425f513 告警 2 years ago
fanluyan a8c6a339c5 样式优化添加echarts 2 years ago
fanluyan c50d9597a0 优化页面 2 years ago
fanluyan 08bb06f78c 优化 2 years ago
fanluyan 1e63720f56 anhuiosd 2 years ago
fanluyan e9cb3bcbbf osd 2 years ago
fanluyan 3fe5f93838 osd河南处理 2 years ago
fanluyan 82f60a0fa9 添加osd 2 years ago
fanluyan c46203b0c1 osd 2 years ago
fanluyan d8bb891ba2 样式优化 2 years ago
fanluyan 42a7c92543 样式优化 2 years ago
fanluyan 1f9476a5c3 优化图片轮播以及左侧树状结构 2 years ago
fanluyan bca647a736 ip添加验证 2 years ago

@ -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"],
};

199
package-lock.json generated

@ -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",
"resolved": "https://registry.npmmirror.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.22.10.tgz",
"integrity": "sha512-MMkQqZAZ+MGj+jGTG3OTuhKeBpNcO+0oCEbrGNEaOmiEn+1MzRyQlYsruGiU8RTK3zV6XwrVJTmwiDOyYK6J9g==",
"version": "7.24.1",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.24.1.tgz",
"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",

@ -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",

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 7.9 KiB

@ -1,15 +1,18 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title>视频监控可视化平台</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 -->

@ -1,10 +1,61 @@
<template>
<div id="app">
<router-view />
<router-view></router-view>
</div>
</template>
<style lang="less">
#app {
}
</style>
<script>
import { mapActions } from "vuex";
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>

@ -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>

@ -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

@ -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,

@ -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";
}

@ -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";
}

Binary file not shown.

@ -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">
<router-view></router-view>
</transition>
<!-- <transition name="move" mode="out-in"> -->
<keep-alive :include="caches">
<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;

@ -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,
},
// tabkeyroutekeytab
// matchRoute.path
getTabKey: {
type: Function,
default: function (routeMatch /* , route */) {
return routeMatch.path;
},
},
// tabmeta.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;
// tabmetacomponentName
const routeMatch = matched[this.tabRouteViewDepth - 1];
const meta = routeMatch.meta;
const componentName = routeMatch.components?.default?.name;
// tabtabKeykeytitle-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) {
// tabKeyname
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);
// tabtab
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>

@ -63,7 +63,6 @@ export default {
index: "/realTimeMonitor",
title: "实时监控",
},
{
icon: "el-icon-film",
index: "/pictureRotation",
@ -74,101 +73,26 @@ export default {
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: "/deviceReport",
title: "装置报表",
},
{
index: "/waterMark",
title: "水印下发",
},
// {
// index: "/deviceUpgrade",
// title: "",
// icon: "iconfont icon-fubing",
// index: "/weatherIce",
// title: "",
// subs: [
// {
// index: "/weather",
// title: "",
// },
// {
// icon: "el-icon-picture-outline",
// index: "imageSettings",
// title: "",
// index: "/icing",
// title: "",
// },
// ],
// },
],
},
{
icon: "el-icon-monitor",
index: "/system",
title: "系统管理",
subs: [
{
index: "/userManagement",
title: "用户管理",
},
{
index: "/globalTools",
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",
@ -195,15 +119,6 @@ export default {
index: "/devicePhotoSchedule",
title: "拍照时间表设置",
},
// {
// index: "/deviceUpgrade",
// title: "",
// },
// {
// icon: "el-icon-picture-outline",
// index: "imageSettings",
// title: "",
// },
],
},
{
@ -215,82 +130,35 @@ export default {
index: "/userManagement",
title: "用户管理",
},
// {
// index: "/globalTools",
// 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",
title: "线路信息管理",
index: "/roleManagement",
title: "角色管理",
},
// {
// index: "/menuManagement",
// title: "",
// },
{
index: "/towerInformation",
title: "杆塔信息管理",
index: "/deviceUpgrade",
title: "升级管理",
},
// {
// index: "/cameraChannel",
// title: "",
// },
{
index: "/photographicDevice",
title: "拍照装置管理",
index: "/globalTools",
title: "全局设置",
},
{
index: "/devicePhotoSchedule",
title: "拍照时间表设置",
index: "/waterMark",
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() {
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>

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

@ -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 {

@ -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>

@ -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");
next({
path: "/login",
});
} else {
next();
return next({ path: "/login" });
}
// 如果用户是超级管理员role == 0则允许访问任何页面
if (role === "0") {
return 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,

@ -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: () =>
import(
/* webpackChunkName: "dashboard" */ "../views/homePage/index.vue"
),
component: () => import("../views/homePage/index.vue"),
name: "stritl",
meta: {
title: "首页",
icon: "el-icon-s-home",
keepAlive: true,
noAuth: true,
},
},
{
path: "/realTimeMonitor",
component: () =>
import(
/* webpackChunkName: "home" */ "../views/realTimeMonitor/index.vue"
),
component: () => import("../views/realTimeMonitor/index.vue"),
name: "realTimeMonitor",
meta: {
title: "实时监控",
permission: true,
icon: "el-icon-camera",
keepAlive: true,
requiresAuth: true,
},
},
{
path: "/pictureRotation",
component: () =>
import(
/* webpackChunkName: "home" */ "../views/pictureRotation/index.vue"
),
component: () => import("../views/pictureRotation/index.vue"),
name: "pictureRotation",
meta: {
title: "图片轮巡",
permission: true,
icon: "el-icon-camera",
keepAlive: true,
requiresAuth: true,
},
},
{
path: "/realTimeSearch",
component: () =>
import(
/* webpackChunkName: "home" */ "../views/realTimeSearch/index.vue"
),
component: () => import("../views/realTimeSearch/index.vue"),
name: "realTimeSearch",
meta: {
title: "历史图片",
permission: true,
icon: "el-icon-camera",
requiresAuth: true,
//keepAlive: true,
},
},
{
path: "/photoAlarm",
component: () =>
import(
/* webpackChunkName: "home" */ "../views/alarmHandling/index.vue"
),
component: () => import("../views/alarmHandling/index.vue"),
name: "alarmHandling",
meta: {
title: "告警处理",
permission: true,
icon: "el-icon-camera",
keepAlive: true,
requiresAuth: true,
},
},
{
path: "/userManagement",
component: () =>
import(
/* webpackChunkName: "tabs" */ "../views/system/userManagement.vue"
),
meta: { title: "用户管理", icon: "el-icon-monitor" },
component: () => import("../views/system/user/userManagement.vue"),
name: "userManagement",
meta: {
title: "用户管理",
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: () =>
import(
/* webpackChunkName: "tabs" */ "../views/system/globalTools/index.vue"
),
meta: { title: "全局设置" },
component: () => import("../views/system/globalTools/index.vue"),
name: "globalTools",
meta: { title: "全局设置", keepAlive: true, requiresAuth: true },
},
{
path: "/lineInformation",
component: () =>
import(
/* webpackChunkName: "tabs" */ "../views/lineInformation/index.vue"
),
meta: { title: "线路信息管理", icon: "" },
component: () => import("../views/lineInformation/index.vue"),
name: "lineInformation",
meta: {
title: "线路信息管理",
icon: "",
keepAlive: true,
requiresAuth: true,
},
},
{
path: "/towerInformation",
component: () =>
import(
/* webpackChunkName: "tabs" */ "../views/towerInformation/index.vue"
),
meta: { title: "杆塔信息管理", icon: "" },
component: () => import("../views/towerInformation/index.vue"),
name: "towerInformation",
meta: {
title: "杆塔信息管理",
icon: "",
keepAlive: true,
requiresAuth: true,
},
},
{
path: "/cameraChannel",
component: () =>
import(
/* webpackChunkName: "tabs" */ "../views/cameraChannel/index.vue"
),
meta: { title: "通道管理", icon: "" },
component: () => import("../views/cameraChannel/index.vue"),
name: "cameraChannel",
meta: {
title: "通道管理",
icon: "",
keepAlive: true,
requiresAuth: true,
},
},
{
path: "/photographicDevice",
component: () =>
import(
/* webpackChunkName: "tabs" */ "../views/photographicDevice/index.vue"
),
meta: { title: "拍照装置管理", icon: "" },
component: () => import("../views/photographicDevice/index.vue"),
name: "photographicDevice",
meta: {
title: "拍照装置管理",
icon: "",
keepAlive: true,
requiresAuth: true,
},
},
{
path: "/devicePhotoSchedule",
component: () =>
import(
/* webpackChunkName: "tabs" */ "../views/devicePhotoSchedule/index.vue"
),
meta: { title: "拍照时间表设置", icon: "" },
component: () => import("../views/devicePhotoSchedule/index.vue"),
name: "devicePhotoSchedule",
meta: {
title: "拍照时间表设置",
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: "权限测试" },
},
];

@ -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);
});
},
},
};

@ -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 },
});

@ -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",
},
});
}

@ -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",
method: "get",
params: data,
headers: {
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
},
url: "/xymanager/getdyTreeList",
method: "post",
data,
// params: data,
// 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,
});

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

@ -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,
});

@ -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;
}

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

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

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

@ -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);
padding: 16px;
height: calc(100% - 24px);
padding: 12px;
display: flex;
flex-direction: column;
justify-content: space-around;
justify-content: space-between;
.echart-top {
display: flex;
height: 48%;

@ -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);
// valuedatalabel
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>

@ -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)
// );
// forclassdom
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>

@ -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>

@ -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);
});
},

@ -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({
id: data.id,
});
deleteArr.push(data.id);
this.$confirm("确定要删除记录吗,同时删除关联关系?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
@ -231,7 +230,22 @@ export default {
})
.then(() => {
deleteLineJoggle({ list: deleteArr }).then((res) => {
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,

@ -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); //tokenvuex
console.log(res.data);
this.$store.commit("SET_TOKEN", res.data.token); //tokenvuex
this.$store.commit("SET_USERINFO", res.data); //vuex
this.$router.push("/stritl");
this.$message({

@ -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);
});
},

@ -39,8 +39,18 @@
</el-option>
</el-select>
</el-form-item>
<el-form-item label="装置ID" prop="cmdId">
<el-input v-model="formInfo.cmdId" autocomplete="on"></el-input>
<el-form-item label="装置ID" prop="cmdid">
<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: "",
bsManufacturer: "",
model: "MSRDT-1-WP",
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;

@ -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"
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"
label="设备编号"
min-width="120"
prop="cmdid"
label="装置编号"
min-width="160"
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"
label="装置名称"
min-width="80"
prop="bsId"
label="出厂编号"
show-overflow-tooltip
></el-table-column>
<el-table-column
prop="name"
label="装置型号"
min-width="80"
prop="version"
label="基本信息版本号"
show-overflow-tooltip
></el-table-column>
<el-table-column
prop="name"
label="装置版本号"
min-width="80"
prop="protocolVersion"
label="通信协议版本号"
show-overflow-tooltip
></el-table-column>
<el-table-column
prop="name"
label="生产厂家"
min-width="100"
<!-- <el-table-column
prop="protocolVersion"
label="规约版本号V1.3"
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
prop="name"
label="出厂编号"
min-width="100"
show-overflow-tooltip
></el-table-column>
>
<template slot-scope="scope">
{{ $moment(scope.row.productionDate).format("YYYY-MM-DD") }}
</template>
</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: [
{
name: "测试",
},
{
name: "测试2",
},
],
rowInfo: "",
listData: [],
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) {
console.log(val);
this.seltermid = val.id;
this.selcmdId = val.cmdid;
getfaultinfo() {
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.$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

@ -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>

@ -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>

@ -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"
label="采集时间"
min-width="120"
show-overflow-tooltip
></el-table-column>
<el-table-column
prop="name"
label="设备名称"
min-width="80"
prop="cmdid"
label="装置编号"
show-overflow-tooltip
></el-table-column>
<el-table-column
prop="name"
label="设备编号"
min-width="120"
prop="updateTimeStr"
label="采集时间"
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"
label="维度"
min-width="80"
prop="latitude"
label="纬度"
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: [
{
name: "测试",
},
{
name: "测试2",
},
],
rowInfo: "",
listData: [],
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) {
console.log(val);
this.seltermid = val.id;
this.selcmdId = val.cmdid;
getfaultinfo() {
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.$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

@ -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;

@ -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) {

@ -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"
label="采集时间"
min-width="120"
prop="cmdid"
label="装置编号"
min-width="160"
show-overflow-tooltip
></el-table-column>
<el-table-column
prop="name"
label="设备名称"
min-width="80"
show-overflow-tooltip
></el-table-column>
prop="rsUpdateTimeStr"
label="装置上次启动时间"
min-width="140"
>
</el-table-column>
<el-table-column
prop="name"
label="设备编号"
min-width="120"
prop="signalStrength2g"
label="2G信号强度"
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"
label="2G信号强度"
min-width="80"
show-overflow-tooltip
></el-table-column>
<el-table-column
prop="name"
label="剩余运行内存"
min-width="80"
prop="remainingRam"
label="剩余运行内存M"
show-overflow-tooltip
></el-table-column>
<el-table-column
prop="name"
label="剩余存储内存"
min-width="100"
prop="remainingRom"
label="剩余存储内存M"
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: [
{
name: "测试",
},
{
name: "测试2",
},
],
rowInfo: "",
listData: [],
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) {
console.log(val);
this.seltermid = val.id;
this.selcmdId = val.cmdid;
getfaultinfo() {
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.$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;

@ -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;

@ -1,16 +1,29 @@
<template>
<el-dialog
class="workStatus"
title="工作状态"
class="workStatusBox"
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"
label="采集时间"
min-width="120"
prop="cmdid"
label="装置编号"
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"
label="设备名称"
min-width="80"
prop="batteryVoltage"
label="电池电压(V)"
show-overflow-tooltip
></el-table-column>
<el-table-column
prop="name"
label="设备编号"
min-width="120"
prop="opTemperature"
label="工作温度(℃)"
show-overflow-tooltip
></el-table-column>
<el-table-column
prop="name"
label="电源电压"
min-width="80"
prop="batteryCapacity"
label="电池电量(%"
show-overflow-tooltip
></el-table-column>
<el-table-column
prop="name"
label="工作温度"
min-width="80"
prop="floatingChargeStr"
label="浮充状态"
show-overflow-tooltip
></el-table-column>
<el-table-column
prop="name"
label="电池电量"
min-width="80"
prop="totalWorkingTime"
label="工作总时间(小时)"
show-overflow-tooltip
></el-table-column>
<el-table-column
prop="name"
label="浮充状态"
min-width="100"
prop="workingTime"
label="连续工作时间(小时)"
show-overflow-tooltip
>
<template slot-scope="scope">{{
scope.row.name == 0 ? "充电" : "放电"
}}</template>
</el-table-column>
></el-table-column>
<el-table-column
prop="name"
label="工作总时间"
min-width="120"
prop="connectionStr"
label="网络连接状态"
show-overflow-tooltip
></el-table-column>
<el-table-column
prop="name"
label="连续工作时间"
min-width="100"
prop="connectionStr"
label="GPRS信号强度"
show-overflow-tooltip
></el-table-column>
<el-table-column
prop="name"
label="网络连接状态"
min-width="100"
prop="recvFlowStr"
label="当月发送流量(M)"
show-overflow-tooltip
>
<template slot-scope="scope">{{
scope.row.name == 0 ? "已连接" : "未连接"
}}</template>
</el-table-column>
></el-table-column>
<el-table-column
prop="sendFlowStr"
label="当月接收流量M"
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: [
{
name: "测试",
},
{
name: "测试2",
},
],
rowInfo: "",
listData: [],
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) {
console.log(val);
this.seltermid = val.id;
this.selcmdId = val.cmdid;
getfaultinfo() {
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) => {
if (res.code == 200) {
this.listData = res.data.list;
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

@ -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
type="text"
class="deleteText"
@click.native.stop="handleDelete(scope.row)"
v-if="scope.row.status == 0"
>打开</el-button
>删除</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({
termid: data.id,
});
this.deleteArr.push(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;

@ -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,
},

@ -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>

@ -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
:loop="false"
:autoplay="false"
ref="carousel"
indicator-position="none"
@change="changeItem"
>
<el-carousel-item
<!-- -->
<div class="bottomPic">
<div class="scrollPicContain">
<div
class="el-car-item"
v-for="(list, index) in terminalPhoto"
:key="index"
ref="scrollBox"
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>
</el-carousel>
</div>
<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);
this.changeBigPic(this.terminalPhoto[0][0], 0);
////console.log(this.terminalPhoto);
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) {
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();
async downLoadPic(path, name) {
const imgUrl = path;
const response = await fetch(imgUrl);
const blob = await response.blob();
//
const url = window.URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
console.log(name);
link.download = name.split("/").pop();
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
// Blob URL
window.URL.revokeObjectURL(url);
},
// 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.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
);
this.$refs.scrollBox.scrollLeft -=
this.$refs.scrollBox.offsetWidth / this.photoNum;
this.changeBigPic(this.terminalPhoto[this.activeSmall], this.activeSmall);
},
rightClick() {
console.log(this.activeSmall);
console.log(this.terminalPhoto.length);
console.log(this.photoNum);
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
);
this.$refs.scrollBox.scrollLeft +=
this.$refs.scrollBox.offsetWidth / this.photoNum;
this.changeBigPic(this.terminalPhoto[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 = "";
}
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`; // 1MBMB
} else {
this.fileSize = `${sizeInKB.toFixed(2)}K`; // 1MBKB
}
} else {
this.fileSize = ""; // data.fileSize
}
// console.log(data.channelId);
if (data.channelId) {
this.getPointList(data);
}
},
loadImage() {
console.log("loading");
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
setDefaultImage(e) {
e.target.src = defaultImage;
this.picLoading = false;
},
//
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);
}
this.$refs.scrollBox.scrollLeft +=
(this.$refs.scrollBox.offsetWidth / this.photoNum) * 1;
}
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);
}
this.$refs.scrollBox.scrollLeft -=
(this.$refs.scrollBox.offsetWidth / this.photoNum) * 1;
}
},
//
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 {
height: 100% !important;
}
.el-carousel__arrow {
position: relative;
.arrow {
opacity: 0;
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;
align-items: center;
justify-content: center;
flex-shrink: 0;
white-space: nowrap;
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>

@ -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>

@ -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%;
display: flex;
justify-content: space-between;
// width: 100%;
// display: flex;
// justify-content: space-between;
}
</style>

@ -83,23 +83,23 @@ export default {
} else {
this.terminalPhoto = res.data.list;
}
let newDataList = [];
let current = 0;
if (this.terminalPhoto && this.terminalPhoto.length > 0) {
for (let i = 0; i <= this.terminalPhoto.length - 1; i++) {
if (i % this.photoNum !== 0 || i === 0) {
if (!newDataList[current]) {
newDataList.push([this.terminalPhoto[i]]);
} else {
newDataList[current].push(this.terminalPhoto[i]);
}
} else {
current++;
newDataList.push([this.terminalPhoto[i]]);
}
}
}
this.terminalPhoto = [...newDataList];
// let newDataList = [];
// let current = 0;
// if (this.terminalPhoto && this.terminalPhoto.length > 0) {
// for (let i = 0; i <= this.terminalPhoto.length - 1; i++) {
// if (i % this.photoNum !== 0 || i === 0) {
// if (!newDataList[current]) {
// newDataList.push([this.terminalPhoto[i]]);
// } else {
// newDataList[current].push(this.terminalPhoto[i]);
// }
// } else {
// current++;
// newDataList.push([this.terminalPhoto[i]]);
// }
// }
// }
// 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;

@ -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>
<takeVideoButton></takeVideoButton>
<takePicButton v-if="showButton('pzShowBtn')"></takePicButton>
<takeVideoButton v-if="showButton('spShowBtn')"></takeVideoButton>
<deviceInfoButton></deviceInfoButton>
<scheduleButton></scheduleButton>
<alarmButton></alarmButton>
<scheduleButton v-if="showButton('pztimeShowBtn')"></scheduleButton>
<alarmButton v-if="showButton('sgbjShowBtn')"></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 type="primary" @click="handleTakePic" :loading="picLoading"
>主动拍照
</el-button> -->
<!-- <el-button type="primary">主动拍照 </el-button>
<el-button type="primary">主动拍照 </el-button>
<el-button type="primary">主动拍照 </el-button>
<el-button type="primary">主动拍照 </el-button>
<el-button type="primary">主动拍照 </el-button>
<el-button type="primary">主动拍照 </el-button>
<el-button type="primary">主动拍照 </el-button> -->
<el-button
type="primary"
@click="handleParams"
v-if="showButton('cspzShowBtn')"
>
参数配置</el-button
>
<el-button
type="primary"
@click="handleuploadPic"
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() {
// pickerOptionsdisabledDate
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); //currentDatavuex
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>

@ -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>

@ -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, // 01
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; // 01
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; // 01
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>

@ -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>

@ -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>

@ -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
v-if="deviceTimeList.length !== 0 && offsetNumTime !== null"
>偏移量{{ offsetNumTime }}分钟</span
<span v-if="deviceTimeList.length !== 0"
><el-button type="text" size="mini" @click="deviceTimeClick"
><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-button type="primary" @click="deviceTimeClick"
>装置时间表</el-button
>
</el-empty>
<el-empty description="暂无数据"> </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>

@ -5,6 +5,7 @@
placeholder="输入关键字进行过滤"
v-model="filterText"
prefix-icon="el-icon-search"
clearable
>
</el-input>
</div>
@ -36,24 +37,40 @@
: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">
<span class="iconfont icon-dianli" style="margin-right: 6px"></span>
<span>{{ node.label }} </span>
</span>
<span v-else-if="node.level === 2">
<span class="iconfont icon-dianlihangye" style="margin-right: 6px">
</span>
<span>{{ node.label }} </span>
<!-- v-if="node.name === '收藏夹'" -->
<span>
<span>
<span
v-if="node.label === '收藏夹'"
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-else>
<span
v-if="
node.label !== '收藏夹' && !data.bsManufacturer && !data.dyValue
"
>
<span
class="iconfont icon-shexiangtoulixian"
v-if="data.onlinestatus == 0"
@ -66,17 +83,29 @@
:class="data.onlinestatus == 0 ? 'disconnect' : ''"
style="margin-right: 6px"
></span>
</span>
<span :class="data.onlinestatus == 0 ? 'disconnect' : ''"
>{{ node.label }}
<span
:id="data.id"
: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>
</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) {
console.log(val);
this.$refs.tree.filter(val);
console.log(this.$refs.tree);
// filterText(val) {
// console.log(val);
// this.$refs.tree.filter(val);
// 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);
// valuedatalabel
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[0]; //
this.currentNodekey = this.lineTreeData[0].id; //
this.currentData = this.lineTreeData[1]; //
this.currentNodekey = this.lineTreeData[1].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); //currentDatavuex
this.$store.commit("termId", this.currentData.id); //currentDatavuex
this.$store.commit("protocol", this.currentData.protocol); //currentDatavuex
this.$store.commit("cmdId", this.currentData.cmdid); //currentDatavuex
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;

@ -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: "cmaStatus1",
// 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>

@ -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: "cmaStatus1",
// 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>

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

@ -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>

@ -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 current = 0;
if (this.terminalPhoto && this.terminalPhoto.length > 0) {
for (let i = 0; i <= this.terminalPhoto.length - 1; i++) {
if (i % this.photoNum !== 0 || i === 0) {
if (!newDataList[current]) {
newDataList.push([this.terminalPhoto[i]]);
} else {
newDataList[current].push(this.terminalPhoto[i]);
}
} else {
current++;
newDataList.push([this.terminalPhoto[i]]);
}
}
}
this.terminalPhoto = [...newDataList];
// let newDataList = [];
// let current = 0;
// if (this.terminalPhoto && this.terminalPhoto.length > 0) {
// for (let i = 0; i <= this.terminalPhoto.length - 1; i++) {
// if (i % this.photoNum !== 0 || i === 0) {
// if (!newDataList[current]) {
// newDataList.push([this.terminalPhoto[i]]);
// } else {
// newDataList[current].push(this.terminalPhoto[i]);
// }
// } else {
// current++;
// newDataList.push([this.terminalPhoto[i]]);
// }
// }
// }
// 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;

@ -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;

@ -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>

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

@ -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>

@ -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

@ -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>

@ -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)
);
// resourceIdmenuOptionIds
const filteredResources = this.checkedIds.filter((resource) =>
menuOptionIds.has(resource.resourceId)
);
// Set便id
const btnOptionIds = new Set(
this.btnCheckOption.map((option) => option.id)
);
// resourceIdmenuOptionIds
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>

@ -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

@ -25,9 +25,9 @@
<el-select v-model="formdata.role" placeholder="请选择">
<el-option
v-for="item in roleoptions"
:key="item.value"
:label="item.label"
:value="item.value"
:key="item.id"
:label="item.name"
: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,
label: "管理员",
id: 1,
name: "管理员",
},
{
value: 2,
label: "用户",
id: 2,
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() {},

@ -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>

@ -28,11 +28,22 @@
show-overflow-tooltip
prop="userName"
></el-table-column>
<el-table-column label="角色" show-overflow-tooltip prop="role">
<template slot-scope="scope">{{
scope.row.role == 1 ? "管理员" : "用户"
}}</template>
<el-table-column label="角色" show-overflow-tooltip prop="roleName">
<template slot-scope="scope">{{ scope.row.roleName }}</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();
},
},
};

@ -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({
id: data.id,
});
deleteArr.push(data.id);
console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaa", deleteArr);
this.$confirm("确定要删除记录吗,同时删除关联关系?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
@ -317,14 +322,23 @@ export default {
})
.then(() => {
delTowerApi({ list: deleteArr }).then((res) => {
this.deviceList(); //
});
if (res.code == 200) {
this.$message({
duration: 1500,
showClose: true,
type: "success",
message: "删除成功!",
});
this.deviceList(); //
} else {
this.$message({
duration: 1500,
showClose: true,
type: "error",
message: "删除失败!",
});
}
});
})
.catch(() => {
this.$message({

@ -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) {
// IEFirefox/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>

@ -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,
},
},
});

Loading…
Cancel
Save