Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev

This commit is contained in:
easy 2023-01-12 18:30:25 +08:00
commit 18c6c95ccf
17 changed files with 5244 additions and 4251 deletions

315
package-lock.json generated
View File

@ -43,6 +43,7 @@
"typescript": "^4.9.3",
"vite": "^4.0.0",
"vite-plugin-html": "^3.2.0",
"vite-plugin-style-import": "^2.0.0",
"vite-plugin-vue-setup-extend": "^0.4.0",
"vue-tsc": "^1.0.11"
}
@ -2399,6 +2400,17 @@
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001441.tgz",
"integrity": "sha512-OyxRR4Vof59I3yGWXws6i908EtGbMzVUi3ganaZQHmydk1iwDhRnvaPG2WaR0KcqrDFKrxVZHULT396LEPhXfg=="
},
"node_modules/capital-case": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz",
"integrity": "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==",
"dev": true,
"dependencies": {
"no-case": "^3.0.4",
"tslib": "^2.0.3",
"upper-case-first": "^2.0.2"
}
},
"node_modules/capture-stack-trace": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/capture-stack-trace/-/capture-stack-trace-1.0.2.tgz",
@ -2421,6 +2433,26 @@
"node": ">=10"
}
},
"node_modules/change-case": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz",
"integrity": "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==",
"dev": true,
"dependencies": {
"camel-case": "^4.1.2",
"capital-case": "^1.0.4",
"constant-case": "^3.0.4",
"dot-case": "^3.0.4",
"header-case": "^2.0.4",
"no-case": "^3.0.4",
"param-case": "^3.0.4",
"pascal-case": "^3.1.2",
"path-case": "^3.0.4",
"sentence-case": "^3.0.4",
"snake-case": "^3.0.4",
"tslib": "^2.0.3"
}
},
"node_modules/chardet": {
"version": "0.7.0",
"resolved": "https://registry.npmmirror.com/chardet/-/chardet-0.7.0.tgz",
@ -2737,6 +2769,23 @@
"integrity": "sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw==",
"dev": true
},
"node_modules/console": {
"version": "0.7.2",
"resolved": "https://registry.npmjs.org/console/-/console-0.7.2.tgz",
"integrity": "sha512-+JSDwGunA4MTEgAV/4VBKwUHonP8CzJ/6GIuwPi6acKFqFfHUdSGCm89ZxZ5FfGWdZfkdgAroy5bJ5FSeN/t4g==",
"dev": true
},
"node_modules/constant-case": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz",
"integrity": "sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==",
"dev": true,
"dependencies": {
"no-case": "^3.0.4",
"tslib": "^2.0.3",
"upper-case": "^2.0.2"
}
},
"node_modules/conventional-changelog-angular": {
"version": "5.0.13",
"resolved": "https://registry.npmmirror.com/conventional-changelog-angular/-/conventional-changelog-angular-5.0.13.tgz",
@ -3242,6 +3291,12 @@
"integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
"dev": true
},
"node_modules/es-module-lexer": {
"version": "0.9.3",
"resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
"integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==",
"dev": true
},
"node_modules/esbuild": {
"version": "0.16.12",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.16.12.tgz",
@ -3818,6 +3873,16 @@
"he": "bin/he"
}
},
"node_modules/header-case": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz",
"integrity": "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==",
"dev": true,
"dependencies": {
"capital-case": "^1.0.4",
"tslib": "^2.0.3"
}
},
"node_modules/homedir-polyfill": {
"version": "1.0.3",
"resolved": "https://registry.npmmirror.com/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
@ -6640,6 +6705,16 @@
"tslib": "^2.0.3"
}
},
"node_modules/path-case": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz",
"integrity": "sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==",
"dev": true,
"dependencies": {
"dot-case": "^3.0.4",
"tslib": "^2.0.3"
}
},
"node_modules/path-exists": {
"version": "4.0.0",
"resolved": "https://registry.npmmirror.com/path-exists/-/path-exists-4.0.0.tgz",
@ -7334,6 +7409,17 @@
"integrity": "sha512-EjnoLE5OGmDAVV/8YDoN5KiajNadjzIp9BAHOhYeQHt7j0UWxjmgsx4YD48wp4Ue1Qogq38F1GNUJNqF1kKKxA==",
"dev": true
},
"node_modules/sentence-case": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz",
"integrity": "sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==",
"dev": true,
"dependencies": {
"no-case": "^3.0.4",
"tslib": "^2.0.3",
"upper-case-first": "^2.0.2"
}
},
"node_modules/set-blocking": {
"version": "2.0.0",
"resolved": "https://registry.npmmirror.com/set-blocking/-/set-blocking-2.0.0.tgz",
@ -7420,6 +7506,16 @@
"node": ">=4"
}
},
"node_modules/snake-case": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
"integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==",
"dev": true,
"dependencies": {
"dot-case": "^3.0.4",
"tslib": "^2.0.3"
}
},
"node_modules/source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@ -8058,6 +8154,24 @@
"node": ">=8"
}
},
"node_modules/upper-case": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz",
"integrity": "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==",
"dev": true,
"dependencies": {
"tslib": "^2.0.3"
}
},
"node_modules/upper-case-first": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz",
"integrity": "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==",
"dev": true,
"dependencies": {
"tslib": "^2.0.3"
}
},
"node_modules/uppercamelcase": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/uppercamelcase/-/uppercamelcase-1.1.0.tgz",
@ -8232,6 +8346,52 @@
"integrity": "sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==",
"dev": true
},
"node_modules/vite-plugin-style-import": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/vite-plugin-style-import/-/vite-plugin-style-import-2.0.0.tgz",
"integrity": "sha512-qtoHQae5dSUQPo/rYz/8p190VU5y19rtBaeV7ryLa/AYAU/e9CG89NrN/3+k7MR8mJy/GPIu91iJ3zk9foUOSA==",
"dev": true,
"dependencies": {
"@rollup/pluginutils": "^4.1.2",
"change-case": "^4.1.2",
"console": "^0.7.2",
"es-module-lexer": "^0.9.3",
"fs-extra": "^10.0.0",
"magic-string": "^0.25.7",
"pathe": "^0.2.0"
},
"peerDependencies": {
"vite": ">=2.0.0"
}
},
"node_modules/vite-plugin-style-import/node_modules/@rollup/pluginutils": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
"integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==",
"dev": true,
"dependencies": {
"estree-walker": "^2.0.1",
"picomatch": "^2.2.2"
},
"engines": {
"node": ">= 8.0.0"
}
},
"node_modules/vite-plugin-style-import/node_modules/magic-string": {
"version": "0.25.9",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
"integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
"dev": true,
"dependencies": {
"sourcemap-codec": "^1.4.8"
}
},
"node_modules/vite-plugin-style-import/node_modules/pathe": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/pathe/-/pathe-0.2.0.tgz",
"integrity": "sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==",
"dev": true
},
"node_modules/vite-plugin-vue-setup-extend": {
"version": "0.4.0",
"resolved": "https://registry.npmmirror.com/vite-plugin-vue-setup-extend/-/vite-plugin-vue-setup-extend-0.4.0.tgz",
@ -10382,6 +10542,17 @@
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001441.tgz",
"integrity": "sha512-OyxRR4Vof59I3yGWXws6i908EtGbMzVUi3ganaZQHmydk1iwDhRnvaPG2WaR0KcqrDFKrxVZHULT396LEPhXfg=="
},
"capital-case": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz",
"integrity": "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==",
"dev": true,
"requires": {
"no-case": "^3.0.4",
"tslib": "^2.0.3",
"upper-case-first": "^2.0.2"
}
},
"capture-stack-trace": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/capture-stack-trace/-/capture-stack-trace-1.0.2.tgz",
@ -10398,6 +10569,26 @@
"supports-color": "^7.1.0"
}
},
"change-case": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz",
"integrity": "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==",
"dev": true,
"requires": {
"camel-case": "^4.1.2",
"capital-case": "^1.0.4",
"constant-case": "^3.0.4",
"dot-case": "^3.0.4",
"header-case": "^2.0.4",
"no-case": "^3.0.4",
"param-case": "^3.0.4",
"pascal-case": "^3.1.2",
"path-case": "^3.0.4",
"sentence-case": "^3.0.4",
"snake-case": "^3.0.4",
"tslib": "^2.0.3"
}
},
"chardet": {
"version": "0.7.0",
"resolved": "https://registry.npmmirror.com/chardet/-/chardet-0.7.0.tgz",
@ -10653,6 +10844,23 @@
"integrity": "sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw==",
"dev": true
},
"console": {
"version": "0.7.2",
"resolved": "https://registry.npmjs.org/console/-/console-0.7.2.tgz",
"integrity": "sha512-+JSDwGunA4MTEgAV/4VBKwUHonP8CzJ/6GIuwPi6acKFqFfHUdSGCm89ZxZ5FfGWdZfkdgAroy5bJ5FSeN/t4g==",
"dev": true
},
"constant-case": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz",
"integrity": "sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==",
"dev": true,
"requires": {
"no-case": "^3.0.4",
"tslib": "^2.0.3",
"upper-case": "^2.0.2"
}
},
"conventional-changelog-angular": {
"version": "5.0.13",
"resolved": "https://registry.npmmirror.com/conventional-changelog-angular/-/conventional-changelog-angular-5.0.13.tgz",
@ -11078,6 +11286,12 @@
}
}
},
"es-module-lexer": {
"version": "0.9.3",
"resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
"integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==",
"dev": true
},
"esbuild": {
"version": "0.16.12",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.16.12.tgz",
@ -11518,6 +11732,16 @@
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
"dev": true
},
"header-case": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz",
"integrity": "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==",
"dev": true,
"requires": {
"capital-case": "^1.0.4",
"tslib": "^2.0.3"
}
},
"homedir-polyfill": {
"version": "1.0.3",
"resolved": "https://registry.npmmirror.com/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
@ -13740,6 +13964,16 @@
"tslib": "^2.0.3"
}
},
"path-case": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz",
"integrity": "sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==",
"dev": true,
"requires": {
"dot-case": "^3.0.4",
"tslib": "^2.0.3"
}
},
"path-exists": {
"version": "4.0.0",
"resolved": "https://registry.npmmirror.com/path-exists/-/path-exists-4.0.0.tgz",
@ -14283,6 +14517,17 @@
"integrity": "sha512-EjnoLE5OGmDAVV/8YDoN5KiajNadjzIp9BAHOhYeQHt7j0UWxjmgsx4YD48wp4Ue1Qogq38F1GNUJNqF1kKKxA==",
"dev": true
},
"sentence-case": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz",
"integrity": "sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==",
"dev": true,
"requires": {
"no-case": "^3.0.4",
"tslib": "^2.0.3",
"upper-case-first": "^2.0.2"
}
},
"set-blocking": {
"version": "2.0.0",
"resolved": "https://registry.npmmirror.com/set-blocking/-/set-blocking-2.0.0.tgz",
@ -14356,6 +14601,16 @@
"babel-code-frame": "^6.26.0"
}
},
"snake-case": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
"integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==",
"dev": true,
"requires": {
"dot-case": "^3.0.4",
"tslib": "^2.0.3"
}
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@ -14836,6 +15091,24 @@
}
}
},
"upper-case": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz",
"integrity": "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==",
"dev": true,
"requires": {
"tslib": "^2.0.3"
}
},
"upper-case-first": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz",
"integrity": "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==",
"dev": true,
"requires": {
"tslib": "^2.0.3"
}
},
"uppercamelcase": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/uppercamelcase/-/uppercamelcase-1.1.0.tgz",
@ -14961,6 +15234,48 @@
}
}
},
"vite-plugin-style-import": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/vite-plugin-style-import/-/vite-plugin-style-import-2.0.0.tgz",
"integrity": "sha512-qtoHQae5dSUQPo/rYz/8p190VU5y19rtBaeV7ryLa/AYAU/e9CG89NrN/3+k7MR8mJy/GPIu91iJ3zk9foUOSA==",
"dev": true,
"requires": {
"@rollup/pluginutils": "^4.1.2",
"change-case": "^4.1.2",
"console": "^0.7.2",
"es-module-lexer": "^0.9.3",
"fs-extra": "^10.0.0",
"magic-string": "^0.25.7",
"pathe": "^0.2.0"
},
"dependencies": {
"@rollup/pluginutils": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
"integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==",
"dev": true,
"requires": {
"estree-walker": "^2.0.1",
"picomatch": "^2.2.2"
}
},
"magic-string": {
"version": "0.25.9",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
"integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
"dev": true,
"requires": {
"sourcemap-codec": "^1.4.8"
}
},
"pathe": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/pathe/-/pathe-0.2.0.tgz",
"integrity": "sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==",
"dev": true
}
}
},
"vite-plugin-vue-setup-extend": {
"version": "0.4.0",
"resolved": "https://registry.npmmirror.com/vite-plugin-vue-setup-extend/-/vite-plugin-vue-setup-extend-0.4.0.tgz",

View File

@ -1,3 +1,16 @@
import server from '@/utils/request'
export const deleteMetadata = (deviceId: string) => server.remove(`/device-instance/${deviceId}/metadata`)
/**
*
* @param deviceId ID
* @returns
*/
export const deleteMetadata = (deviceId: string) => server.remove(`/device-instance/${deviceId}/metadata`)
/**
*
* @param id ID
* @param data
* @returns
*/
export const saveMetadata = (id: string, data: string) => server.put(`/device/instance/${id}/metadata`, data)

View File

@ -1,3 +1,26 @@
import server from '@/utils/request'
import type { DeviceMetadata } from '@/views/device/Product/typings'
export const queryNoPagingPost = (data: any) => server.post(`/device-product/_query/no-paging?paging=false`, data)
/**
*
* @param data
* @returns
*/
export const queryNoPagingPost = (data: any) => server.post(`/device-product/_query/no-paging?paging=false`, data)
/**
*
* @param direction from|to
* @param type
* @param data
* @returns
*/
export const convertMetadata = (direction: 'from' | 'to', type: string, data: any) => server.post<DeviceMetadata>(`/device/product/metadata/convert-${direction}/${type}`, data)
/**
*
* @param id ID
* @param data
* @returns
*/
export const modify = (id: string, data: any) => server.put(`/device-product/${id}`, data)

View File

@ -54,31 +54,24 @@
delete: item.key === 'delete',
}"
>
<!-- <slot name="actions" v-bind="item"></slot> -->
<a-popconfirm v-if="item.popConfirm" v-bind="item.popConfirm">
<template v-if="item.key === 'delete'">
<a-button :disabled="item.disabled">
<DeleteOutlined />
</a-button>
</template>
<template v-else>
<a-button :disabled="item.disabled">
<a-button :disabled="item.disabled">
<DeleteOutlined v-if="item.key === 'delete'" />
<template v-else>
<AIcon :type="item.icon" />
<span>{{ item.text }}</span>
</a-button>
</template>
</template>
</a-button>
</a-popconfirm>
<template v-else>
<template v-if="item.key === 'delete'">
<a-button :disabled="item.disabled">
<DeleteOutlined />
</a-button>
</template>
<template v-else>
<a-button :disabled="item.disabled">
<a-button :disabled="item.disabled">
<DeleteOutlined v-if="item.key === 'delete'" />
<template v-else>
<AIcon :type="item.icon" />
<span>{{ item.text }}</span>
</a-button>
</template>
</template>
</a-button>
</template>
</div>
</div>
@ -291,10 +284,10 @@ const handleClick = () => {
display: flex;
flex-grow: 1;
> span,
& button {
width: 100%;
border-radius: 0;
& > span,
button {
width: 100% !important;
border-radius: 0 !important;
}
button {
@ -372,9 +365,9 @@ const handleClick = () => {
}
}
:deep(.ant-tooltip-disabled-compatible-wrapper) {
width: 100%;
}
// :deep(.ant-tooltip-disabled-compatible-wrapper) {
// width: 100%;
// }
}
}
}

View File

@ -50,11 +50,20 @@ export interface JTableProps extends TableProps{
pageIndex: number;
};
model?: keyof typeof ModelEnum | undefined; // 显示table还是card
actions?: ActionsType[];
// actions?: ActionsType[];
noPagination?: boolean;
rowSelection?: TableProps['rowSelection'];
cardProps?: Record<string, any>;
dataSource?: Record<string, any>[];
gridColumn: number;
/**
*
* gridColumns[0] 1366 ~ 1440
* gridColumns[1] 1440 ~ 1600
* gridColumns[2] > 1600
*/
gridColumns?: number[];
alertRender?: boolean;
}
const JTable = defineComponent<JTableProps>({
@ -87,10 +96,10 @@ const JTable = defineComponent<JTableProps>({
type: [String, undefined],
default: undefined
},
actions: {
type: Array as PropType<ActionsType[]>,
default: () => []
},
// actions: {
// type: Array as PropType<ActionsType[]>,
// default: () => []
// },
noPagination: {
type: Boolean,
default: false
@ -106,12 +115,24 @@ const JTable = defineComponent<JTableProps>({
dataSource: {
type: Array,
default: () => []
},
gridColumns: {
type: Array as PropType<Number[]>,
default: [2, 3, 4]
},
gridColumn: {
type: Number,
default: 4
},
alertRender: {
type: Boolean,
default: true
}
} as any,
setup(props: JTableProps ,{ slots, emit }){
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
const _model = ref<keyof typeof ModelEnum>(props.model ? props.model : ModelEnum.CARD); // 模式切换
const column = ref<number>(4);
const column = ref<number>(props.gridColumn || 4);
const _dataSource = ref<Record<string, any>[]>([])
const pageIndex = ref<number>(0)
const pageSize = ref<number>(6)
@ -119,9 +140,20 @@ const JTable = defineComponent<JTableProps>({
const _columns = ref<JColumnProps[]>(props?.columns || [])
const loading = ref<boolean>(true)
// alert关闭取消选择
const handleAlertClose = () => {
emit('cancelSelect')
/**
*
*/
const windowChange = () => {
if (window.innerWidth <= 1440) {
const _column = props.gridColumn && props.gridColumn < 2 ? props.gridColumn : 2;
column.value = props.gridColumns ? props.gridColumns[0] : _column
} else if (window.innerWidth > 1440 && window.innerWidth <= 1600) {
const _column = props.gridColumn && props.gridColumn < 3 ? props.gridColumn : 3;
column.value = props.gridColumns ? props.gridColumns[1] : _column
} else if (window.innerWidth > 1600) {
const _column = props.gridColumn && props.gridColumn < 4 ? props.gridColumn : 4;
column.value = props.gridColumns ? props.gridColumns[2] : _column
}
}
/**
@ -153,13 +185,22 @@ const JTable = defineComponent<JTableProps>({
} else {
_dataSource.value = props?.dataSource || []
}
loading.value = false
}
watchEffect(() => {
handleSearch(props.params)
})
onMounted(() => {
window.onresize = () => {
windowChange()
}
})
onUnmounted(() => {
window.onresize = null
})
return () => <Spin spinning={loading.value}>
<div class={styles["jtable-body"]}>
@ -184,12 +225,14 @@ const JTable = defineComponent<JTableProps>({
{/* content */}
<div class={styles['jtable-content']}>
{
props?.rowSelection && props?.rowSelection?.selectedRowKeys && props.rowSelection.selectedRowKeys?.length ?
props.alertRender && props?.rowSelection && props?.rowSelection?.selectedRowKeys && props.rowSelection.selectedRowKeys?.length ?
<div class={styles['jtable-alert']}>
<Alert
message={'已选择' + props?.rowSelection?.selectedRowKeys?.length + '项'}
type="info"
onClose={handleAlertClose}
onClose={() => {
emit('cancelSelect')
}}
closeText={<a></a>}
/>
</div> : null
@ -205,8 +248,10 @@ const JTable = defineComponent<JTableProps>({
>
{
_dataSource.value.map(item => slots.card ?
<div class={[styles['jtable-card-item'], props.cardBodyClass]}>{slots.card({row: item, actions: props?.actions || []})}</div>
: null)
<div class={[styles['jtable-card-item'], props.cardBodyClass]}>
{slots.card(item)}
</div> : null
)
}
</div> :
<div><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /></div>
@ -225,7 +270,7 @@ const JTable = defineComponent<JTableProps>({
const {column, record} = dt;
if((column?.key || column?.dataIndex) && column?.scopedSlots && (slots?.[column?.dataIndex] || slots?.[column?.key])) {
const _key = column?.key || column?.dataIndex
return slots?.[_key]!({row: record, actions: props.actions})
return slots?.[_key]!(record)
} else {
return record?.[column?.dataIndex] || ''
}

7
src/store/instance.ts Normal file
View File

@ -0,0 +1,7 @@
import { InstanceModel } from "@/views/device/instance/typings";
import { defineStore } from "pinia";
export const useInstanceStore = defineStore({
id: 'device',
state: () => ({} as InstanceModel),
});

View File

@ -1,32 +1,7 @@
<template>
<div class="box">
<JTable
:columns="[
{
title: '名称',
dataIndex: 'name',
key: 'name',
},
{
title: 'ID',
dataIndex: 'id',
key: 'id',
scopedSlots: true
},
{
title: '分类',
dataIndex: 'classifiedName',
key: 'classifiedName',
},
{
title: '操作',
key: 'action',
fixed: 'right',
width: 250,
scopedSlots: true
}
]"
:actions="actions"
:columns="columns"
:request="request"
:rowSelection="{
selectedRowKeys: _selectedRowKeys,
@ -38,14 +13,21 @@
<a-button type="primary">新增</a-button>
</template>
<template #card="slotProps">
<CardBox :value="slotProps" @click="handleClick" :actions="slotProps.actions" v-bind="slotProps.row" :active="_selectedRowKeys.includes(slotProps.row.id)">
<CardBox
:value="slotProps"
@click="handleClick"
:actions="getActions(slotProps)"
v-bind="slotProps"
:active="_selectedRowKeys.includes(slotProps.id)"
:status="slotProps.state ? 'success' : 'error'"
>
<template #img>
<slot name="img">
<img :src="getImage('/device-product.png')" />
</slot>
</template>
<template #content>
<h3>{{slotProps.row.name}}</h3>
<h3>{{slotProps.name}}</h3>
<a-row>
<a-col :span="12">
<div class="card-item-content-text">
@ -53,27 +35,41 @@
</div>
<div>直连设备</div>
</a-col>
<a-col :span="12">
<div class="card-item-content-text">
产品名称
</div>
<div>测试固定地址</div>
</a-col>
</a-row>
</template>
<!-- <template #actions="item">
<a-popconfirm v-if="item.popConfirm" v-bind="item.popConfirm">
<a-button :disabled="item.disabled">
<DeleteOutlined v-if="item.key === 'delete'" />
<template v-else>
<AIcon :type="item.icon" />
<span>{{ item.text }}</span>
</template>
</a-button>
</a-popconfirm>
<template v-else>
<a-button :disabled="item.disabled">
<DeleteOutlined v-if="item.key === 'delete'" />
<template v-else>
<AIcon :type="item.icon" />
<span>{{ item.text }}</span>
</template>
</a-button>
</template>
</template> -->
</CardBox>
</template>
<template #id="slotProps">
<a>{{slotProps.row.id}}</a>
<a>{{slotProps.id}}</a>
</template>
<template #action="slotProps">
<a-space :size="16">
<a-tooltip v-for="i in slotProps.actions" :key="i.key" v-bind="i.tooltip">
<a-tooltip v-for="i in getActions(slotProps)" :key="i.key" v-bind="i.tooltip">
<a-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm">
<a-button style="padding: 0" type="link"><AIcon :type="i.icon" /></a-button>
<a-button :disabled="i.disabled" style="padding: 0" type="link"><AIcon :type="i.icon" /></a-button>
</a-popconfirm>
<a-button style="padding: 0" type="link" v-else @click="i.onClick && i.onClick(slotProps.row)">
<AIcon :type="i.icon" />
<a-button style="padding: 0" type="link" v-else @click="i.onClick && i.onClick(slotProps)">
<a-button :disabled="i.disabled" style="padding: 0" type="link"><AIcon :type="i.icon" /></a-button>
</a-button>
</a-tooltip>
</a-space>
@ -86,38 +82,34 @@
import server from "@/utils/request";
import type { ActionsType } from '@/components/Table/index.vue'
import { getImage } from '@/utils/comm';
import { DeleteOutlined } from '@ant-design/icons-vue'
const request = (data: any) => server.post(`/device-product/_query`, data)
const actions: ActionsType[] = [
const columns = [
{
key: 'edit',
// disabled: true,
text: "编辑",
tooltip: {
title: '编辑'
},
icon: 'icon-rizhifuwu'
title: '名称',
dataIndex: 'name',
key: 'name',
},
{
key: 'import',
// disabled: true,
text: "导入",
tooltip: {
title: '导入'
},
icon: 'icon-xiazai'
title: 'ID',
dataIndex: 'id',
key: 'id',
scopedSlots: true
},
{
key: 'delete',
// disabled: true,
text: "删除",
tooltip: {
title: '删除'
},
popConfirm: {
title: '确认删除?'
},
}
title: '分类',
dataIndex: 'classifiedName',
key: 'classifiedName',
},
{
title: '操作',
key: 'action',
fixed: 'right',
width: 250,
scopedSlots: true
}
]
const _selectedRowKeys = ref<string[]>([])
@ -141,6 +133,46 @@ const handleClick = (dt: any) => {
}
}
const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
if(!data){
return []
}
return [
{
key: 'edit',
text: "编辑",
tooltip: {
title: '编辑'
},
icon: 'icon-rizhifuwu'
},
{
key: 'import',
text: "导入",
tooltip: {
title: '导入'
},
icon: 'icon-xiazai'
},
{
key: 'delete',
// disabled: true,
text: "删除",
disabled: !!data?.state,
tooltip: {
title: !!data?.state ? '正常的产品不能删除' : '删除'
},
// popConfirm: {
// title: '?'
// },
icon: 'icon-huishouzhan'
}
]
}
const p = h('p', 'hi')
</script>

84
src/views/device/Instance/typings.d.ts vendored Normal file
View File

@ -0,0 +1,84 @@
export type DeviceInstance = {
id: string;
name: string;
describe: string;
description: string;
productId: string;
productName: string;
protocolName: string;
security: any;
deriveMetadata: string;
metadata: string;
binds: any;
state: {
value: string;
text: string;
};
creatorId: string;
creatorName: string;
createTime: number;
registryTime: string;
disabled?: boolean;
aloneConfiguration?: boolean;
deviceType: {
value: string;
text: string;
};
transportProtocol: string;
messageProtocol: string;
orgId: string;
orgName: string;
configuration: Record<string, any>;
relations?: any[];
cachedConfiguration: any;
transport: string;
protocol: string;
address: string;
registerTime: number;
onlineTime: string | number;
offlineTime: string | number;
tags: any;
photoUrl: string;
independentMetadata?: boolean;
accessProvider?: string;
accessId?: string;
features?: any[];
parentId?: string;
classifiedName?: string;
};
type Unit = {
id: string;
name: string;
symbol: string;
text: string;
type: string;
value: string;
description: string;
};
type PropertyData = {
data: {
value?:
| {
formatValue: string;
property: string;
value: any;
}
| any;
timeString: string;
timestamp: number;
formatValue: string;
property: string;
};
};
type InstanceModel = {
current: Partial<DeviceInstance>;
detail: Partial<DeviceInstance>;
config: any;
metadataItem: MetadataItem;
params: Set<string>; // 处理无限循环Card
active?: string; // 当前编辑的Card
selectedRows: Map<string, any>;
}

179
src/views/device/Product/typings.d.ts vendored Normal file
View File

@ -0,0 +1,179 @@
import type { BaseItem, State } from '@/utils/typings';
type DeviceType = {
text: string;
value: string;
};
export type ProductItem = {
id: string;
name: string;
classifiedId: string | string[];
classifiedName: string;
configuration: Record<string, any>;
createTime: number;
updateTime: number;
creatorId: string;
deviceType: DeviceType;
deviceTypeId?: string;
count?: number;
messageProtocol: string;
metadata: string;
orgId: string;
protocolName: string;
state: number;
transportProtocol: string;
describe?: string;
accessId?: string;
accessName?: string;
photoUrl?: string;
storePolicy?: string;
accessProvider?: string;
modifyTime?: string;
};
export type ConfigProperty = {
property: string;
name: string;
description: string;
type: {
name: string;
id: string;
type: string;
elements?: any[];
expands?: any;
};
scopes: any[];
};
export type ConfigMetadata = {
name: string;
description: string;
scopes: any[];
properties: ConfigProperty[];
};
export type MetadataType = 'events' | 'functions' | 'properties' | 'tags';
export type DeviceMetadata = {
events: Partial<EventMetadata>[];
properties: Partial<PropertyMetadata>[];
functions: Partial<FunctionMetadata>[];
tags: Partial<TagMetadata>[];
};
export type MetadataItem = Partial<EventMetadata | PropertyMetadata | FunctionMetadata> &
Record<string, any>;
type EventMetadata = {
id: string;
name: string;
expands?: {
eventType?: string;
level?: string;
} & Record<string, any>;
valueType: {
type: string;
properties: {
id: string;
name: string;
dataType: string;
valueType: {
type: string;
} & Record<any, any>;
}[];
};
description: string;
};
type FunctionMetadata = {
id: string;
name: string;
async: boolean;
output: Record<string, unknown>;
inputs: ({
id: string;
name: string;
valueType: {
type: string;
} & Record<any, any>;
} & Record<string, any>)[];
};
type PropertyMetadata = {
id: string;
name: string;
dataType?: string;
valueType: {
type: string;
} & Record<any, any>;
expands: Record<string, any>;
description?: string;
// 运行状态处需要数据
list?: Record<string, unknown>[];
};
type TagMetadata = {
id: string;
name: string;
valueType: {
type: string;
} & Record<string, any>;
expands: Record<string, any>;
};
type AlarmRule = {
actions: {
configuration: Record<string, unknown>;
executor: string;
}[];
productId: string;
productName: string;
properties: Record<string, unknown>[];
shakeLimit: Record<string, unknown>;
triggers: Record<string, unknown>[];
} & BaseItem;
type AlarmSetting = {
state: State;
createTime: number;
target: string;
targetId: string;
alarmRule: AlarmRule[];
} & BaseItem;
type AlarmRecord = {
id: string;
alarmId: string;
alarmName: string;
alarmTime: number;
description: string;
deviceId: string;
deviceName: string;
productId: string;
productName: string;
state: string;
updateTime: number;
alarmData: {
alarmId: string;
alarmName: string;
deviceId: string;
deviceName: string;
id: string;
productId: string;
productName: string;
timestamp: number;
} & Record<string, unknown>;
};
type UnitType = {
id: string;
name: string;
description: string;
symbol: string;
text: string;
type: string;
value: string;
};
type ObserverMetadata = {
type: unknown[];
subscribe: (data: any) => void;
next: (data: any) => void;
};

View File

@ -9,7 +9,8 @@
</div>
<div v-else>
<div v-if="!id"><a @click="goBack">返回</a></div>
<AccessNetwork :provider="provider" :data="data" />
<AccessNetwork v-if="showType==='network'" :provider="provider" :data="data" />
<Media v-if="showType==='media'" :provider="provider" :data="data" />
</div>
</a-card>
</a-spin>
@ -17,10 +18,11 @@
<script lang="ts" setup name="AccessConfigDetail">
import { getImage } from '@/utils/comm';
import TitleComponent from '@/components/TitleComponent/index.vue';
import AccessNetwork from '../components/Network.vue';
import Provider from '../components/Provider/index.vue';
import { getProviders, detail } from '@/api/link/accessConfig';
import Media from '../components/Media/index.vue';
// const router = useRouter();
const route = useRoute();
@ -32,10 +34,14 @@ const type = ref(false);
const loading = ref(true);
const provider = ref({});
const data = ref({});
const showType = ref('')
const goProviders = (param: object) => {
const goProviders = (param: object) => {
showType.value = param.type
provider.value = param;
type.value = false;
console.log(1123,showType.value,param);
};
const goBack = () => {
@ -46,10 +52,69 @@ const goBack = () => {
const queryProviders = async () => {
const resp = await getProviders();
if (resp.status === 200) {
dataSource.value = resp.result.filter(
(item) =>
item.channel === 'network' || item.channel === 'child-device',
);
const media: any[] = [];
const network: any[] = [];
const cloud: any[] = [];
const channel: any[] = [];
const edge: any[] = [];
resp.result.map((item) => {
if (item.id === 'fixed-media' || item.id === 'gb28181-2016') {
item.type='media'
media.push(item);
} else if (item.id === 'OneNet' || item.id === 'Ctwing') {
item.type='cloud'
cloud.push(item);
} else if (item.id === 'modbus-tcp' || item.id === 'opc-ua') {
item.type='channel'
channel.push(item);
} else if (
item.id === 'official-edge-gateway' ||
item.id === 'edge-child-device'
) {
item.type='edge'
edge.push(item);
} else {
item.type='network'
network.push(item);
}
});
const list = [];
if (network.length) {
list.push({
// type: 'network',
list: [...network],
title: '自定义设备接入',
});
}
if (media.length) {
list.push({
// type: 'media',
list: [...media],
title: '视频类设备接入',
});
}
if (cloud.length) {
list.push({
// type: 'cloud',
list: [...cloud],
title: '云平台接入',
});
}
if (channel.length) {
list.push({
// type: 'channel',
list: [...channel],
title: '通道类设备接入',
});
}
if (edge.length) {
list.push({
// type: 'edge',
list: [...edge],
title: '官方接入',
});
}
dataSource.value = list
}
};

View File

@ -1,86 +1,106 @@
<template>
<a-card hoverable :class="['card-render', checked === data.id ? 'checked' : '']" @click="checkedChange(data.id)">
<div class="title">
<a-tooltip placement="topLeft" :title="data.name">{{ data.name }}</a-tooltip>
</div>
<slot name="other"></slot>
<div class="desc">
<a-tooltip placement="topLeft" :title="data.description">{{ data.description }}</a-tooltip>
</div>
<div class="checked-icon">
<div><a-icon type="check" /></div>
</div>
</a-card>
<a-card
hoverable
:class="['card-render', checked === data.id ? 'checked' : '']"
@click="checkedChange(data.id)"
>
<div class="title">
<a-tooltip placement="topLeft" :title="data.name">{{
data.name
}}</a-tooltip>
</div>
<slot name="other"></slot>
<div class="desc">
<a-tooltip placement="topLeft" :title="data.description">{{
data.description
}}</a-tooltip>
</div>
<div class="checked-icon">
<div><a-icon type="check" /></div>
</div>
</a-card>
</template>
<script>
export default {
name: "AccessCard",
props: ['data', 'checked'],
methods: {
checkedChange(id){
this.$emit('checkedChange', id)
}
}
};
<script lang="ts" setup name="AccessCard">
const emit = defineEmits(['checkedChange']);
const props = defineProps({
checked: {
type: Array,
default: () => [],
},
data: {
type: Object,
default: () => {},
},
});
console.log(1112,props);
const checkedChange=(id:string)=>{
emit('checkedChange', id);
}
</script>
<style lang="less" scoped>
.card-render {
width: 100%;
overflow: hidden;
background: url("/public/images/access/access.png") no-repeat;
background-size: 100% 100%;
min-height: 105px;
.title {
width: calc(100% - 88px);
overflow: hidden;
font-weight: 800;
white-space: nowrap;
text-overflow: ellipsis;
}
.desc {
width: 100%;
margin-top: 10px;
color: rgba(0, 0, 0, 0.55);
font-weight: 400;
font-size: 13px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
background: url('/public/images/access.png') no-repeat;
background-size: 100% 100%;
min-height: 105px;
.checked-icon {
position: absolute;
right: -22px;
bottom: -22px;
z-index: 2;
display: none;
width: 44px;
height: 44px;
color: #fff;
background-color: red;
background-color: #2f54eb;
transform: rotate(-45deg);
> div {
position: relative;
height: 100%;
transform: rotate(45deg);
font-size: 12px;
padding: 4px 0 0 6px;
.title {
width: calc(100% - 88px);
overflow: hidden;
font-weight: 800;
white-space: nowrap;
text-overflow: ellipsis;
}
.desc {
width: 100%;
margin-top: 10px;
color: rgba(0, 0, 0, 0.55);
font-weight: 400;
font-size: 13px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
&.checked {
position: relative;
color: #2f54eb;
border-color: #2f54eb;
.checked-icon {
display: block;
position: absolute;
right: -22px;
bottom: -22px;
z-index: 2;
display: none;
width: 44px;
height: 44px;
color: #fff;
background-color: red;
background-color: #2f54eb;
transform: rotate(-45deg);
> div {
position: relative;
height: 100%;
transform: rotate(45deg);
font-size: 12px;
padding: 4px 0 0 6px;
}
}
&.checked {
position: relative;
color: #2f54eb;
border-color: #2f54eb;
.checked-icon {
display: block;
}
}
}
}
</style>
</style>

View File

@ -0,0 +1,30 @@
<template>
<div style="margin-top: 10px">
111
</div>
</template>
<script lang="ts" setup name="AccessMedia">
const props = defineProps({
provider: {
type: Object,
default: () => {},
},
data: {
type: Object,
default: () => {},
},
});
const channel = ref(props.provider.channel)
console.log(211,props);
</script>
<style lang="less" scoped>
</style>

View File

@ -35,18 +35,34 @@
: descriptionList[provider.id],
}"
>
<div slot="other" class="other">
<a-tooltip placement="topLeft">
<div
slot="title"
v-if="
(item.addresses || []).length >
1
"
>
<template #other>
<div class="other">
<a-tooltip placement="topLeft">
<div
v-for="i in item.addresses ||
[]"
v-if="
(item.addresses || [])
.length > 1
"
>
<div
v-for="i in item.addresses ||
[]"
:key="i.address"
class="item"
>
<a-badge
:color="
i.health === -1
? 'red'
: 'green'
"
/>{{ i.address }}
</div>
</div>
<div
v-for="i in (
item.addresses || []
).slice(0, 1)"
:key="i.address"
class="item"
>
@ -56,34 +72,19 @@
? 'red'
: 'green'
"
/>{{ i.address }}
:text="i.address"
/>
<span
v-if="
(item.addresses || [])
.length > 1
"
>...</span
>
</div>
</div>
<div
v-for="i in (
item.addresses || []
).slice(0, 1)"
:key="i.address"
class="item"
>
<a-badge
:color="
i.health === -1
? 'red'
: 'green'
"
:text="i.address"
/>
<span
v-if="
(item.addresses || [])
.length > 1
"
>...</span
>
</div>
</a-tooltip>
</div>
</a-tooltip>
</div>
</template>
</access-card>
</a-col>
</a-row>
@ -130,37 +131,31 @@
<a-col :span="12">
<title-component data="基本信息" />
<div>
<a-form :form="form" layout="vertical">
<a-form-item label="名称">
<a-form
ref="formRef"
:model="form"
layout="vertical"
>
<a-form-item
label="名称"
v-bind="validateInfos.name"
>
<a-input
v-model:value="form.name"
allowClear
placeholder="请输入名称"
v-decorator="[
'name',
{
initialValue: data.name,
rules: [
{
required: true,
message:
'请输入名称!',
},
],
},
]"
/>
</a-form-item>
<a-form-item label="说明">
<a-form-item
label="说明"
v-bind="validateInfos.description"
>
<a-textarea
placeholder="请输入说明"
:rows="4"
v-decorator="[
'description',
{
initialValue:
data.description,
},
]"
v-model:value="form.description"
show-count
:maxlength="200"
/>
</a-form-item>
</a-form>
@ -259,7 +254,7 @@
:scroll="{ y: 300 }"
>
<template
slot="stream"
#stream
slot-scope="text, record"
>
<span
@ -292,7 +287,7 @@
>
下一步
</a-button>
<a-button v-if="current === 2" type="primary" @click="save">
<a-button v-if="current === 2" type="primary" @click="saveData">
保存
</a-button>
<a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
@ -317,8 +312,61 @@ import {
ProtocolMapping,
} from '../Detail/data';
import AccessCard from './AccessCard/index.vue';
import TitleComponent from '@/components/TitleComponent/index.vue';
import { message, Form } from 'ant-design-vue';
import type { FormInstance } from 'ant-design-vue';
//1
const resultList1 = [
{
id: '1610466717670780928',
name: '官方协议',
},
{
id: '1610205217785524224',
name: 'demo协议',
},
{
id: '1610204985806958592',
name: '水压协议',
},
{
id: '1605459961693745152',
name: '测试设备诊断日志显示',
},
{
id: '1582302200020783104',
name: 'demo',
},
{
id: '1581839391887794176',
name: '海康闸机协议',
},
{
id: '1567062365030637568',
name: '协议20220906160914',
},
{
id: '1561650927208628224',
name: 'local',
},
];
//2
// const result2 = {
// id: 'UDP',
// name: 'UDP',
// features: [],
// routes: [],
// metadata: '',
// };
const result2 = {
"id": "MQTT",
"name": "MQTT",
"features": [],
"routes": [],
"document": "# MQTT认证说明\r\nCONNECT报文:\r\n```text\r\nclientId: 设备ID\r\nusername: secureId+\"|\"+timestamp\r\npassword: md5(secureId+\"|\"+timestamp+\"|\"+secureKey)\r\n ```\r\n\r\n说明: secureId以及secureKey在创建设备产品或设备实例时进行配置. \r\ntimestamp为当前系统时间戳(毫秒),与系统时间不能相差5分钟.\r\nmd5为32位,不区分大小写.",
"metadata": "{\"functions\":[],\"name\":\"test\",\"description\":\"测试用\",\"id\":\"test\",\"properties\":[{\"valueType\":{\"round\":\"HALF_UP\",\"type\":\"double\"},\"name\":\"温度\",\"id\":\"t\"},{\"valueType\":{\"round\":\"HALF_UP\",\"type\":\"int\"},\"name\":\"状态\",\"id\":\"state\"}],\"events\":[],\"tags\":[]}"
}
function generateUUID() {
var d = new Date().getTime();
@ -349,7 +397,8 @@ const props = defineProps({
},
});
const formRef = ref<FormInstance>();
const useForm = Form.useForm;
const current = ref(0);
const stepCurrent = ref(0);
@ -362,13 +411,21 @@ const procotolCurrent = ref('');
let config = ref({});
let columnsMQTT = ref([]);
const form = reactive({
name: 'access',
name: '',
description: '',
});
const { resetFields, validate, validateInfos } = useForm(
form,
reactive({
name: [
{ required: true, message: '请输入证书名称', trigger: 'blur' },
{ max: 64, message: '最多可输入64个字符' },
],
}),
);
const queryNetworkList = async (id: string, params: object, data = {}) => {
console.log('queryNetworkList',NetworkTypeMapping.get(id), data, params);
const resp = await getNetworkList(NetworkTypeMapping.get(id), data, params);
if (resp.status === 200) {
networkList.value = resp.result;
@ -377,15 +434,19 @@ const queryNetworkList = async (id: string, params: object, data = {}) => {
// const queryProcotolList=async(id:string, params:object) =>{
const queryProcotolList = async (id: string, params = {}) => {
const resp = await getProtocolList(ProtocolMapping.get(id), {
...params,
'sorts[0].name': 'createTime',
'sorts[0].order': 'desc',
});
if (resp.status === 200) {
procotolList.value = resp.result;
allProcotolList.value = resp.result;
}
// const resp = await getProtocolList(ProtocolMapping.get(id), {
// ...params,
// 'sorts[0].name': 'createTime',
// 'sorts[0].order': 'desc',
// });
// if (resp.status === 200) {
// procotolList.value = resp.result;
// allProcotolList.value = resp.result;
// }
//使1
procotolList.value = resultList1;
allProcotolList.value = resultList1;
};
const addNetwork = () => {
@ -424,21 +485,6 @@ const checkedChange = (id: string) => {
};
const networkSearch = (value: string) => {
console.log('networkSearch',
props.provider.id,
{
include: networkCurrent.value || '',
},
{
terms: [
{
column: 'name$LIKE',
value: `%${value}%`,
},
],
},
);
queryNetworkList(
props.provider.id,
{
@ -475,31 +521,28 @@ const procotolSearch = (value: string) => {
};
const saveData = () => {
form.validateFields(async (err, values) => {
if (!err) {
validate()
.then(async (values) => {
let resp = undefined;
let params = {
...props.data,
...values,
protocol: procotolCurrent.value,
channel: 'network', //
channelId: networkCurrent.value,
};
if (props.data && props.data.id) {
resp = await update({
...props.data,
name: values.name,
description: values.description,
protocol: procotolCurrent.value,
channel: 'network', //
channelId: networkCurrent.value,
});
resp = await update(params);
} else {
resp = await save({
name: values.name,
description: values.description,
params = {
...params,
provider: props.provider.id,
protocol: procotolCurrent.value,
transport:
props.provider?.id === 'child-device'
? 'Gateway'
: ProtocolMapping.get(props.provider.id),
channel: 'network', //
channelId: networkCurrent.value,
});
};
resp = await save(params);
}
if (resp.status === 200) {
message.success('操作成功!');
@ -511,88 +554,139 @@ const saveData = () => {
// this.$store.dispatch('jumpPathByKey', { key: MenuKeys['Link/AccessConfig'] })
}
}
}
});
})
.catch((err) => {});
};
const next = async () => {
if (current.value === 0) {
if (!networkCurrent.value) {
message.error('请选择网络组件!');
} else {
queryProcotolList(props.provider.id);
current.value -= current.value;
current.value = current.value + 1;
}
} else if (current.value === 1) {
if (!procotolCurrent.value) {
message.error('请选择消息协议!');
} else {
const resp =
props.provider.channel !== 'child-device'
? await getConfigView(
procotolCurrent.value,
ProtocolMapping.get(props.provider.id),
)
: await getChildConfigView(procotolCurrent.value);
if (resp.status === 200) {
config.value = resp.result;
current.value += current.value;
columnsMQTT = [
{
title: '分组',
dataIndex: 'group',
key: 'group',
ellipsis: true,
align: 'center',
width: 100,
customRender: (value, row, index) => {
const obj = {
children: value,
attrs: {},
};
const list = (config && config.routes) || [];
const arr = list.filter((res) => {
return res.group == row.group;
});
if (
index == 0 ||
list[index - 1].group !== row.group
) {
obj.attrs.rowSpan = arr.length;
} else {
obj.attrs.rowSpan = 0;
}
return obj;
},
//使2
config.value = result2;
current.value = current.value + 1;
columnsMQTT = [
{
title: '分组',
dataIndex: 'group',
key: 'group',
ellipsis: true,
align: 'center',
width: 100,
customRender: (value, row, index) => {
const obj = {
children: value,
attrs: {},
};
const list = (config && config.routes) || [];
const arr = list.filter((res) => {
return res.group == row.group;
});
if (index == 0 || list[index - 1].group !== row.group) {
obj.attrs.rowSpan = arr.length;
} else {
obj.attrs.rowSpan = 0;
}
return obj;
},
{
title: 'topic',
dataIndex: 'topic',
key: 'topic',
ellipsis: true,
},
{
title: '上下行',
dataIndex: 'stream',
key: 'stream',
ellipsis: true,
align: 'center',
width: 100,
scopedSlots: { customRender: 'stream' },
},
{
title: '说明',
dataIndex: 'description',
key: 'description',
ellipsis: true,
},
];
}
},
{
title: 'topic',
dataIndex: 'topic',
key: 'topic',
ellipsis: true,
},
{
title: '上下行',
dataIndex: 'stream',
key: 'stream',
ellipsis: true,
align: 'center',
width: 100,
scopedSlots: { customRender: 'stream' },
},
{
title: '说明',
dataIndex: 'description',
key: 'description',
ellipsis: true,
},
];
// const resp =
// props.provider.channel !== 'child-device'
// ? await getConfigView(
// procotolCurrent.value,
// ProtocolMapping.get(props.provider.id),
// )
// : await getChildConfigView(procotolCurrent.value);
// if (resp.status === 200) {
// config.value = resp.result;
// current.value = current.value + 1;
// columnsMQTT = [
// {
// title: '',
// dataIndex: 'group',
// key: 'group',
// ellipsis: true,
// align: 'center',
// width: 100,
// customRender: (value, row, index) => {
// const obj = {
// children: value,
// attrs: {},
// };
// const list = (config && config.routes) || [];
// const arr = list.filter((res) => {
// return res.group == row.group;
// });
// if (
// index == 0 ||
// list[index - 1].group !== row.group
// ) {
// obj.attrs.rowSpan = arr.length;
// } else {
// obj.attrs.rowSpan = 0;
// }
// return obj;
// },
// },
// {
// title: 'topic',
// dataIndex: 'topic',
// key: 'topic',
// ellipsis: true,
// },
// {
// title: '',
// dataIndex: 'stream',
// key: 'stream',
// ellipsis: true,
// align: 'center',
// width: 100,
// scopedSlots: { customRender: 'stream' },
// },
// {
// title: '',
// dataIndex: 'description',
// key: 'description',
// ellipsis: true,
// },
// ];
// }
}
}
};
const prev = () => {
const currentValue = current.value;
current.value -= currentValue;
current.value = current.value - 1;
};
onMounted(() => {
@ -601,10 +695,6 @@ onMounted(() => {
procotolCurrent.value = props.data.protocol;
current.value = 0;
networkCurrent.value = props.data.channelId;
console.log(11111111,props.provider.id, {
include: networkCurrent.value,
});
queryNetworkList(props.provider.id, {
include: networkCurrent.value,
});
@ -618,18 +708,12 @@ onMounted(() => {
} else {
if (props.provider?.id) {
if (props.provider.channel !== 'child-device') {
console.log(3333333, props.provider.id, {
include: '',
});
queryNetworkList(props.provider.id, {
include: '',
});
steps.value = ['网络组件', '消息协议', '完成'];
current.value = 0;
} else {
console.log(444444,props.provider.id);
steps.value = ['消息协议', '完成'];
current.value = 1;
queryProcotolList(props.provider.id);
@ -638,25 +722,20 @@ onMounted(() => {
}
});
// watch(
// () => props.modelValue,
// (v) => {
// keystoreBase64.value = v;
// },
// {
// deep: true,
// immediate: true,
// },
// );
// watch: {
// current(val) {
// if (this.provider.channel !== 'child-device') {
// this.stepCurrent = val
// } else {
// this.stepCurrent = val - 1
// }
// },
// },
watch(
current,
(v) => {
if (props.provider.channel !== 'child-device') {
stepCurrent.value = v;
} else {
stepCurrent.value = v - 1;
}
},
{
deep: true,
immediate: true,
},
);
</script>
<style lang="less" scoped>

View File

@ -1,34 +1,36 @@
<template>
<TitleComponent data="自定义设备接入"></TitleComponent>
<div>
<a-row :gutter="[24, 24]">
<a-col :span="12" v-for="item in dataSource" :key="item.id">
<div class="provider">
<div class="box">
<div class="left">
<div class="images">
<img :src="backMap.get(item.id)" />
</div>
<div class="context">
<div class="title">
{{ item.name }}
<div v-for="items in dataSource" :key="items.type">
<a-card class="card-items">
<TitleComponent :data="items.title"></TitleComponent>
<a-row :gutter="[24, 24]">
<a-col :span="12" v-for="item in items.list" :key="item.id">
<div class="provider">
<div class="box">
<div class="left">
<div class="images">
<img :src="backMap.get(item.id)" />
</div>
<div class="desc">
<a-tooltip :title="item.description">
{{ item.description || '' }}
</a-tooltip>
<div class="context">
<div class="title">
{{ item.name }}
</div>
<div class="desc">
<a-tooltip :title="item.description">
{{ item.description || '' }}
</a-tooltip>
</div>
</div>
</div>
</div>
<div class="right">
<a-button type="primary" @click="click(item)"
>接入</a-button
>
<div class="right">
<a-button type="primary" @click="click(item)"
>接入</a-button
>
</div>
</div>
</div>
</div>
</a-col>
</a-row>
</a-col>
</a-row>
</a-card>
</div>
</template>
@ -38,8 +40,8 @@ import { getImage } from '@/utils/comm';
const props = defineProps({
dataSource: {
type: Array,
default: () => [],
type: Object,
default: () => {},
},
});
@ -66,10 +68,12 @@ backMap.set('official-edge-gateway', getImage('/access/edge.png'));
const click = (value: object) => {
emit('onClick', value);
};
</script>
<style lang="less" scoped>
.card-items{
margin-bottom: 24px;
}
.provider {
position: relative;
width: 100%;

View File

@ -0,0 +1,87 @@
<!-- webhook请求头可编辑表格 -->
<template>
<a-table
:columns="columns"
:data-source="dataSource"
bordered
:pagination="false"
>
<template #bodyCell="{ column, text, record }">
<template v-if="['KEY', 'VALUE'].includes(column.dataIndex)">
<a-input v-model="record[column.dataIndex]" />
</template>
<template v-else-if="column.dataIndex === 'operation'">
<a-button type="text">
<template #icon>
<delete-outlined @click="handleDelete(record.idx)" />
</template>
</a-button>
</template>
</template>
</a-table>
<a-button
type="dashed"
@click="handleAdd"
style="width: 100%; margin-top: 5px"
>
<template #icon>
<plus-outlined />
</template>
添加
</a-button>
</template>
<script setup lang="ts">
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
// import { cloneDeep } from 'lodash-es';
// import { defineComponent, reactive, ref } from 'vue';
// import type { UnwrapRef } from 'vue';
interface DataItem {
idx: number;
KEY: string;
VALUE: string;
}
const data: DataItem[] = [];
for (let i = 0; i < 2; i++) {
data.push({
idx: i,
KEY: `key ${i}`,
VALUE: `value${i}`,
});
}
const columns = [
{
title: 'KEY',
dataIndex: 'KEY',
},
{
title: 'VALUE',
dataIndex: 'VALUE',
},
{
title: '操作',
dataIndex: 'operation',
width: 80,
fixed: 'right',
},
];
const dataSource = ref(data);
console.log('dataSource: ', dataSource.value);
const handleDelete = (idx: number) => {
dataSource.value.splice(idx, 1);
};
const handleAdd = () => {
dataSource.value.push({
idx: dataSource.value.length + 1,
KEY: `key ${dataSource.value.length + 1}`,
VALUE: `value ${dataSource.value.length + 1}`,
});
};
</script>
<style lang="less" scoped></style>

View File

@ -238,6 +238,13 @@
placeholder="请输入Webhook"
/>
</a-form-item>
<a-form-item label="请求头">
<EditTable
v-model:headers="
formData.configuration.headers
"
/>
</a-form-item>
</template>
<a-form-item label="说明">
<a-textarea
@ -276,6 +283,7 @@ import {
MSG_TYPE,
} from '@/views/notice/const';
import regionList from './regionId';
import EditTable from './components/EditTable.vue'
const useForm = Form.useForm;

7681
yarn.lock

File diff suppressed because it is too large Load Diff