Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev
This commit is contained in:
wangshuaiswim
commit
5a47580ab7
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
import server from '@/utils/request';
|
||||
|
||||
// 更新全部菜单
|
||||
export const updateMenus = (data: any) => server
|
||||
export const updateMenus = (data: any) => server.path(`/menu/iot/_all`, data)
|
||||
// 添加角色
|
||||
export const addRole = (data: any) => server.post(`/role`)
|
||||
export const addRole = (data: any) => server.post(`/role`, data)
|
||||
|
||||
//更新权限菜单
|
||||
export const getRoleMenu = (id: string) => server.get(`/menu/role/${id}/_grant/tree`)
|
||||
|
||||
//更新权限菜单
|
||||
export const updateRoleMenu = (id: string, data: any) => server.put(`/menu/role/${id}/_grant`)
|
||||
export const updateRoleMenu = (id: string, data: any) => server.put(`/menu/role/${id}/_grant`, data)
|
||||
|
||||
// 记录初始化
|
||||
export const saveInit = () => server.post(`/user/settings/init`,{ init: true },)
|
||||
|
|
@ -22,4 +22,34 @@ export const getInit = () => server.get(`/user/settings/init`)
|
|||
export const getSystemPermission = () =>server.get(`/system/resources/permission`)
|
||||
|
||||
// 保存基础信息
|
||||
export const save = (data?: any) => server.post('/system/config/scope/_save')
|
||||
export const save = (data?: any) => server.post('/system/config/scope/_save',data)
|
||||
|
||||
// 查询对应协议下的本地端口数据
|
||||
export const getResourcesCurrent = () => server.get('/network/resources/alive/_current')
|
||||
|
||||
// 保存网络组件
|
||||
export const saveNetwork = (data: any) => server.post(`/network/config`, data)
|
||||
|
||||
// 保存协议
|
||||
export const saveProtocol = () => server.post(`/protocol/default-protocol/_save`,)
|
||||
|
||||
// 新增设备接入网关
|
||||
export const saveAccessConfig = (data: any) => server.post(`/gateway/device`, data)
|
||||
|
||||
// 新增产品
|
||||
export const saveProduct = (data: any) => server.post(`/device/product`,data)
|
||||
|
||||
// 新增设备
|
||||
export const saveDevice = (data: any) => server.post(`/device/instance`,data)
|
||||
|
||||
// 启用设备
|
||||
export const deployDevice = (deviceId: string, params?: any) => server.post(`/device-instance/${deviceId}/deploy`,params,)
|
||||
export const changeDeploy= (id: string) => server.post(`/device-product/${id}/deploy`)
|
||||
|
||||
// 查询保存后的数据
|
||||
export const detail = (data?: any) => server.post(`/system/config/scopes`, data)
|
||||
|
||||
// 获取协议
|
||||
export const getProtocol = () =>server.get(`/protocol/_query/no-paging?paging=false`)
|
||||
|
||||
// 上传文件
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
import server from '@/utils/request'
|
||||
|
||||
// 查询特定天数流量数据
|
||||
export const queryFlow = (beginTime: any, endTime: any, data: any) => server.post(`/network/flow/_query/${beginTime}/${endTime}`, data)
|
||||
|
||||
export const list = (data: any) => server.post(`/network/card/_query`, data)
|
||||
|
|
@ -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%;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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] || ''
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="jtable-content">
|
||||
<div class="jtable-alert" v-if="rowSelection.selectedRowKeys && rowSelection.selectedRowKeys.length">
|
||||
<div class="jtable-alert" v-if="rowSelection && rowSelection.selectedRowKeys && rowSelection.selectedRowKeys.length">
|
||||
<a-alert :message="'已选择' + rowSelection.selectedRowKeys.length + '项'" type="info" :afterClose="handleAlertClose">
|
||||
<template #closeText>
|
||||
<a>取消选择</a>
|
||||
|
|
|
|||
|
|
@ -9,4 +9,5 @@ declare module '*.jpeg';
|
|||
declare module '*.gif';
|
||||
declare module '*.bmp';
|
||||
declare module '*.js';
|
||||
declare module '*.ts';
|
||||
declare module '*.ts';
|
||||
declare module 'js-cookie';
|
||||
|
|
@ -87,9 +87,19 @@ export default [
|
|||
path: '/link/accessConfig/detail/add',
|
||||
component: () => import('@/views/link/AccessConfig/Detail/index.vue')
|
||||
},
|
||||
// system 系统管理
|
||||
{
|
||||
path:'/system/api',
|
||||
components: ()=>import('@/views/system/apiPage/index')
|
||||
},
|
||||
// 初始化
|
||||
{
|
||||
path: '/init-home',
|
||||
component: () => import('@/views/init-home/index.vue')
|
||||
path: '/init-home',
|
||||
component: () => import('@/views/init-home/index.vue')
|
||||
},
|
||||
// 物联卡 iot-card
|
||||
{
|
||||
path: '/iot-card/home',
|
||||
component: () => import('@/views/iot-card/Home/index.vue')
|
||||
},
|
||||
]
|
||||
|
|
@ -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>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -25,6 +25,10 @@
|
|||
:open-number="openAccess"
|
||||
@confirm="againJumpPage"
|
||||
/>
|
||||
<FuncTestDialog
|
||||
:open-number="openFunc"
|
||||
@confirm="againJumpPage"
|
||||
/>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
|
@ -35,6 +39,7 @@ import { QuestionCircleOutlined } from '@ant-design/icons-vue';
|
|||
import { message } from 'ant-design-vue';
|
||||
|
||||
import AccessMethodDialog from './dialogs/AccessMethodDialog.vue';
|
||||
import FuncTestDialog from './dialogs/FuncTestDialog.vue';
|
||||
|
||||
import { recommendList } from '../index';
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<a-modal
|
||||
v-model:visible="visible"
|
||||
title="选择产品"
|
||||
style="width: 700px"
|
||||
style="width: 1000px"
|
||||
@ok="handleOk"
|
||||
:getContainer="getContainer"
|
||||
:maskClosable="false"
|
||||
|
|
@ -11,34 +11,31 @@
|
|||
<div class="search">
|
||||
<a-select
|
||||
v-model:value="form.key"
|
||||
style="width: 100%"
|
||||
style="width: 100px;margin-right: 20px;"
|
||||
:options="productList"
|
||||
/>
|
||||
<a-select
|
||||
v-model:value="form.relation"
|
||||
style="width: 100%"
|
||||
style="width: 100px;margin-right: 20px;"
|
||||
:options="productList"
|
||||
/>
|
||||
<a-input v-model:value="form.keyValue" allow-clear />
|
||||
<a-input v-model:value="form.keyValue" allow-clear style="width: 230px;margin-right: 50px;" />
|
||||
|
||||
<a-button type="primary" @click="clickSearch">
|
||||
<a-button type="primary" @click="clickSearch" style="margin-right: 10px;">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
搜索
|
||||
</a-button>
|
||||
<a-button type="primary" @click="clickReset">
|
||||
<a-button @click="clickReset">
|
||||
<template #icon><reload-outlined /></template>
|
||||
重置
|
||||
</a-button>
|
||||
</div>
|
||||
<JTable :columns="columns">
|
||||
|
||||
</JTable>
|
||||
<JTable :columns="columns" model="TABLE"> </JTable>
|
||||
|
||||
<template #footer>
|
||||
<a-button key="back" @click="visible = false">取消</a-button>
|
||||
<a-button key="submit" type="primary" @click="handleOk"
|
||||
>确认</a-button
|
||||
>
|
||||
<a-button key="back" @click="visible = false
|
||||
">取消</a-button>
|
||||
<a-button key="submit" type="primary" @click="handleOk">确认</a-button>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
|
@ -65,10 +62,10 @@ const handleOk = () => {
|
|||
watch(
|
||||
() => props.openNumber,
|
||||
() => {
|
||||
visible.value = true;
|
||||
clickReset();
|
||||
getOptions();
|
||||
clickSearch();
|
||||
visible.value = true;
|
||||
},
|
||||
);
|
||||
|
||||
|
|
@ -122,4 +119,11 @@ const selectItem: deviceInfo | {} = {};
|
|||
const getList = () => {};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="less" scoped>
|
||||
.func-test-dialog-container {
|
||||
.search {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,8 +6,7 @@
|
|||
<!-- <InitHome /> -->
|
||||
<!-- <DeviceHome /> -->
|
||||
<!-- <DevOpsHome /> -->
|
||||
<!-- <ComprehensiveHome /> -->
|
||||
<ApiPage />
|
||||
<ComprehensiveHome />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -17,7 +16,6 @@ import InitHome from './components/InitHome/index.vue';
|
|||
import DeviceHome from './components/DeviceHome/index.vue';
|
||||
import DevOpsHome from './components/DevOpsHome/index.vue';
|
||||
import ComprehensiveHome from './components/ComprehensiveHome/index.vue';
|
||||
import ApiPage from '@/views/system/apiPage/index.vue'
|
||||
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ export interface modalState {
|
|||
port: string; // 本地端口
|
||||
publicHost: string; // 公网地址
|
||||
publicPort: number | null; // 公网端口
|
||||
rules: Record<string, Rule[]>;
|
||||
|
||||
}
|
||||
|
||||
/**基本信息表单 */
|
||||
|
|
@ -21,17 +21,26 @@ export interface formState {
|
|||
}
|
||||
|
||||
/**
|
||||
* logo上传表单
|
||||
* 图片上传表单
|
||||
*/
|
||||
export interface logoState {
|
||||
logoValue: string;
|
||||
logoLoading: boolean;
|
||||
backLoading: boolean;
|
||||
iconLoading: boolean;
|
||||
inLogo: boolean;
|
||||
inIcon: boolean;
|
||||
inBackground: boolean;
|
||||
iconValue: string;
|
||||
backValue: string;
|
||||
backSize: number;
|
||||
logoSize: number;
|
||||
imageTypes:Array<string>;
|
||||
iconTypes: Array<string>,
|
||||
beforeLogoUpload:(file: UploadProps['beforeUpload']) => void
|
||||
handleChangeLogo:(info: UploadChangeParam ) => void
|
||||
beforeBackUpload:(file: UploadProps['beforeUpload']) => void
|
||||
changeBackUpload:(info: UploadChangeParam ) => void
|
||||
beforeIconUpload:(file: UploadProps['beforeUpload']) => void
|
||||
changeIconUpload:(info: UploadChangeParam ) => void
|
||||
}
|
||||
|
|
|
|||
|
|
@ -109,16 +109,44 @@
|
|||
class="upload-image-border-logo"
|
||||
>
|
||||
<a-upload
|
||||
name="file"
|
||||
:action="
|
||||
action
|
||||
"
|
||||
:headers="
|
||||
headers
|
||||
"
|
||||
:showUploadList="
|
||||
false
|
||||
"
|
||||
:beforeUpload="
|
||||
beforeLogoUpload
|
||||
"
|
||||
@change="
|
||||
handleChangeLogo
|
||||
"
|
||||
:accept="
|
||||
imageTypes &&
|
||||
imageTypes.length
|
||||
? imageTypes.toString()
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="upload-image-content-logo"
|
||||
>
|
||||
<div
|
||||
class="loading-logo"
|
||||
v-if="
|
||||
logoLoading
|
||||
"
|
||||
>
|
||||
<LoadingOutlined
|
||||
style="
|
||||
font-size: 28px;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="upload-image"
|
||||
v-if="
|
||||
|
|
@ -166,7 +194,6 @@
|
|||
</a-upload>
|
||||
<div
|
||||
v-if="
|
||||
logoValue &&
|
||||
logoLoading
|
||||
"
|
||||
>
|
||||
|
|
@ -223,10 +250,45 @@
|
|||
<div
|
||||
class="upload-image-border-logo"
|
||||
>
|
||||
<a-upload>
|
||||
<a-upload
|
||||
name="file"
|
||||
:action="
|
||||
action
|
||||
"
|
||||
:headers="
|
||||
headers
|
||||
"
|
||||
:showUploadList="
|
||||
false
|
||||
"
|
||||
:beforeUpload="
|
||||
beforeIconUpload
|
||||
"
|
||||
@change="
|
||||
changeIconUpload
|
||||
"
|
||||
:accept="
|
||||
iconTypes &&
|
||||
iconTypes.length
|
||||
? iconTypes.toString()
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="upload-image-content-logo"
|
||||
>
|
||||
<div
|
||||
v-if="
|
||||
iconLoading
|
||||
"
|
||||
class="loading-icon"
|
||||
>
|
||||
<LoadingOutlined
|
||||
style="
|
||||
font-size: 28px;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="upload-image-icon"
|
||||
v-if="
|
||||
|
|
@ -249,20 +311,7 @@
|
|||
<div
|
||||
v-else
|
||||
>
|
||||
<div
|
||||
v-if="
|
||||
logoLoading
|
||||
"
|
||||
>
|
||||
<LoadingOutlined
|
||||
style="
|
||||
font-size: 28px;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
>
|
||||
<div>
|
||||
<PlusOutlined
|
||||
style="
|
||||
font-size: 28px;
|
||||
|
|
@ -298,16 +347,40 @@
|
|||
class="upload-image-border-back"
|
||||
>
|
||||
<a-upload
|
||||
@beforeUpload="
|
||||
name="file"
|
||||
:action="action"
|
||||
:headers="headers"
|
||||
:beforeUpload="
|
||||
beforeBackUpload
|
||||
"
|
||||
:showUploadList="
|
||||
false
|
||||
"
|
||||
@change="
|
||||
changeBackUpload
|
||||
"
|
||||
:accept="
|
||||
imageTypes &&
|
||||
imageTypes.length
|
||||
? imageTypes.toString()
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="upload-image-content-back"
|
||||
>
|
||||
<div
|
||||
v-if="
|
||||
backLoading
|
||||
"
|
||||
class="loading-back"
|
||||
>
|
||||
<LoadingOutlined
|
||||
style="
|
||||
font-size: 28px;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="upload-image"
|
||||
v-if="
|
||||
|
|
@ -328,18 +401,7 @@
|
|||
点击修改
|
||||
</div>
|
||||
<div v-else>
|
||||
<div
|
||||
v-if="
|
||||
logoLoading
|
||||
"
|
||||
>
|
||||
<LoadingOutlined
|
||||
style="
|
||||
font-size: 28px;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div>
|
||||
<PlusOutlined
|
||||
style="
|
||||
font-size: 28px;
|
||||
|
|
@ -349,6 +411,11 @@
|
|||
</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
<!-- <div v-if="logoValue">
|
||||
<div v-if="logoLoading">
|
||||
<div class="upload-loading-mask"></div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload-tips">
|
||||
|
|
@ -499,7 +566,7 @@
|
|||
width="52vw"
|
||||
:maskClosable="false"
|
||||
@cancel="cancel"
|
||||
@ok="handleOk"
|
||||
@ok="saveCurrentData"
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
class="modal-style"
|
||||
|
|
@ -516,10 +583,10 @@
|
|||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<a-form
|
||||
:model="ModalForm"
|
||||
:validate-messages="message"
|
||||
layout="vertical"
|
||||
:model="modalForm"
|
||||
ref="formRef"
|
||||
:rules="rules"
|
||||
:rules="rulesModle"
|
||||
>
|
||||
<a-row :span="24" :gutter="24">
|
||||
<a-col :span="12">
|
||||
|
|
@ -543,7 +610,7 @@
|
|||
</template>
|
||||
<a-input
|
||||
v-model:value="
|
||||
ModalForm.host
|
||||
modalForm.host
|
||||
"
|
||||
:disabled="true"
|
||||
/>
|
||||
|
|
@ -570,7 +637,7 @@
|
|||
</template>
|
||||
<a-input
|
||||
v-model:value="
|
||||
ModalForm.publicHost
|
||||
modalForm.publicHost
|
||||
"
|
||||
>
|
||||
</a-input>
|
||||
|
|
@ -597,9 +664,23 @@
|
|||
</template>
|
||||
<a-select
|
||||
v-model:value="
|
||||
ModalForm.port
|
||||
modalForm.port
|
||||
"
|
||||
></a-select>
|
||||
>
|
||||
<a-select-option
|
||||
v-for="item in optionPorts"
|
||||
:key="item"
|
||||
:value="
|
||||
item.value
|
||||
"
|
||||
:label="
|
||||
item.label
|
||||
"
|
||||
>{{
|
||||
item.label
|
||||
}}</a-select-option
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
name="publicPort"
|
||||
|
|
@ -623,7 +704,7 @@
|
|||
</template>
|
||||
<a-input-number
|
||||
v-model:value="
|
||||
ModalForm.publicPort
|
||||
modalForm.publicPort
|
||||
"
|
||||
style="width: 100%"
|
||||
/>
|
||||
|
|
@ -640,6 +721,7 @@
|
|||
type="primary"
|
||||
class="btn-style"
|
||||
@click="submitData"
|
||||
:loading="isSucessBasic || isSucessInit || isSucessRole"
|
||||
>确定</a-button
|
||||
>
|
||||
</div>
|
||||
|
|
@ -654,19 +736,38 @@ import {
|
|||
ExclamationCircleOutlined,
|
||||
LoadingOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import { ROLEKEYS, RoleData } from './data/RoleData';
|
||||
import RoleMenuData, { ROLEKEYS, RoleData } from './data/RoleData';
|
||||
import type { Rule } from 'ant-design-vue/es/form';
|
||||
import type {
|
||||
FormInstance,
|
||||
UploadChangeParam,
|
||||
UploadProps,
|
||||
Form,
|
||||
} from 'ant-design-vue';
|
||||
import { modalState, formState, logoState } from './data/interface';
|
||||
import BaseMenu from './data/baseMenu';
|
||||
import { getSystemPermission, save } from '@/api/initHome';
|
||||
import {
|
||||
getSystemPermission,
|
||||
save,
|
||||
addRole,
|
||||
getRoleMenu,
|
||||
updateRoleMenu,
|
||||
getResourcesCurrent,
|
||||
saveNetwork,
|
||||
saveProtocol,
|
||||
getProtocol,
|
||||
saveAccessConfig,
|
||||
saveProduct,
|
||||
saveDevice,
|
||||
changeDeploy,
|
||||
deployDevice,
|
||||
} from '@/api/initHome';
|
||||
import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable';
|
||||
import { LocalStore } from '@/utils/comm';
|
||||
import { message } from 'ant-design-vue';
|
||||
const formRef = ref();
|
||||
const menuRef = ref();
|
||||
const formBasicRef = ref<FormInstance>();
|
||||
const formBasicRef = ref();
|
||||
/**
|
||||
* 表单数据
|
||||
*/
|
||||
|
|
@ -710,7 +811,7 @@ const validateUrl = async (_rule: Rule, value: string) => {
|
|||
return Promise.reject('请输入公网地址');
|
||||
} else {
|
||||
var reg = new RegExp(
|
||||
/^(((?!(127\\.0\\.0\\.1)|(localhost)|(10\\.\\d{1,3}\\.\\d{1,3}\\.\\d{1,3})|(172\\.((1[6-9])|(2\\d)|(3[01]))\\.\\d{1,3}\\.\\d{1,3})|(192\\.168\\.\\d{1,3}\\.\\d{1,3})).)*)(?:(?:\\d|[1-9]\\d|1\\d\\d|2[0-4]\\d|25[0-5])\\.){3}(?:\\d|[1-9]\\d|1\\d\\d|2[0-4]\\d|25[0-5])$/,
|
||||
/^(25[0-5]|2[0-4]\d|[0-1]?\d?\d)(\.(25[0-5]|2[0-4]\d|[0-1]?\d?\d)){3}$/,
|
||||
);
|
||||
if (!reg.test(value)) {
|
||||
return Promise.reject('请输入正确的公网地址');
|
||||
|
|
@ -731,44 +832,44 @@ const validateNumber = async (_rule: Rule, value: string) => {
|
|||
return Promise.resolve();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 初始化弹窗表单数据
|
||||
*/
|
||||
const ModalForm = reactive<modalState>({
|
||||
const modalForm = reactive<modalState>({
|
||||
host: '0.0.0.0',
|
||||
port: '',
|
||||
publicHost: '',
|
||||
publicPort: null,
|
||||
rules: {
|
||||
host: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择本地地址',
|
||||
},
|
||||
],
|
||||
port: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择本地端口',
|
||||
},
|
||||
],
|
||||
publicHost: [
|
||||
{
|
||||
required: true,
|
||||
validator: validateUrl,
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
publicPort: [
|
||||
{
|
||||
required: true,
|
||||
validator: validateNumber,
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
const { rules } = toRefs(ModalForm);
|
||||
const rulesModle = ref({
|
||||
host: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择本地地址',
|
||||
},
|
||||
],
|
||||
port: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择本地端口',
|
||||
},
|
||||
],
|
||||
publicHost: [
|
||||
{
|
||||
required: true,
|
||||
validator: validateUrl,
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
publicPort: [
|
||||
{
|
||||
required: true,
|
||||
validator: validateNumber,
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
/**
|
||||
* 默认打开第一个初始菜单
|
||||
|
|
@ -777,6 +878,8 @@ const activeKey = ref<string>('1');
|
|||
const spinning = ref<boolean>(false);
|
||||
const visible = ref<boolean>(false);
|
||||
const flag = ref<boolean>(false);
|
||||
const action = ref<string>(`${BASE_API_PATH}/file/static`);
|
||||
const headers = ref({ [TOKEN_KEY]: LocalStore.get(TOKEN_KEY) });
|
||||
/**
|
||||
* 角色勾选数据
|
||||
*/
|
||||
|
|
@ -797,13 +900,6 @@ const showModal = () => {
|
|||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 提交初始数据表单
|
||||
*/
|
||||
const handleOk = async () => {
|
||||
const valid = await formRef.value.validate();
|
||||
};
|
||||
|
||||
/**
|
||||
* 表单取消事件
|
||||
*/
|
||||
|
|
@ -817,13 +913,34 @@ const cancel = () => {
|
|||
const logoData = reactive<logoState>({
|
||||
logoValue: '/public/logo.png',
|
||||
logoLoading: false,
|
||||
backLoading: false,
|
||||
iconLoading: false,
|
||||
inLogo: false,
|
||||
inIcon: false,
|
||||
inBackground: false,
|
||||
backSize: 4,
|
||||
logoSize: 1,
|
||||
iconValue: '/public/favicon.ico',
|
||||
backValue: '/public/images/login.png',
|
||||
imageTypes: ['image/jpeg', 'image/png'],
|
||||
iconTypes: ['image/x-icon'],
|
||||
/**
|
||||
* 图片上传改变事件
|
||||
* logo格式校验
|
||||
*/
|
||||
beforeLogoUpload: (file) => {
|
||||
const isType = logoData.imageTypes.includes(file.type);
|
||||
if (!isType) {
|
||||
message.error(`请上传.jpg.png.jfif.pjp.pjpeg.jpeg格式的图片`);
|
||||
return false;
|
||||
}
|
||||
const isSize = file.size / 1024 / 1024 < 4;
|
||||
if (!isSize) {
|
||||
message.error(`图片大小必须小于${4}M`);
|
||||
}
|
||||
return isType && isSize;
|
||||
},
|
||||
/*
|
||||
* logo上传改变事件
|
||||
*/
|
||||
handleChangeLogo: (info) => {
|
||||
if (info.file.status === 'uploading') {
|
||||
|
|
@ -838,33 +955,216 @@ const logoData = reactive<logoState>({
|
|||
/**
|
||||
* 背景图片上传之前
|
||||
*/
|
||||
beforeBackUpload: (file) => {},
|
||||
beforeBackUpload: (file) => {
|
||||
const isType = logoData.imageTypes.includes(file.type);
|
||||
if (!isType) {
|
||||
message.error(`请上传.jpg.png.jfif.pjp.pjpeg.jpeg格式的图片`);
|
||||
return false;
|
||||
}
|
||||
const isSize = file.size / 1024 / 1024 < 4;
|
||||
if (!isSize) {
|
||||
message.error(`图片大小必须小于${4}M`);
|
||||
}
|
||||
return isType && isSize;
|
||||
},
|
||||
/**
|
||||
* 背景图片发生改变
|
||||
*/
|
||||
changeBackUpload: (info) => {},
|
||||
changeBackUpload: (info) => {
|
||||
if (info.file.status === 'uploading') {
|
||||
logoData.backLoading = true;
|
||||
}
|
||||
if (info.file.status === 'done') {
|
||||
info.file.url = info.file.response?.result;
|
||||
logoData.backLoading = false;
|
||||
logoData.backValue = info.file.response?.result;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 上传之前
|
||||
*/
|
||||
beforeIconUpload: (file) => {
|
||||
const isType = logoData.iconTypes.includes(file.type);
|
||||
if (!isType) {
|
||||
message.error(`请上传ico格式的图片`);
|
||||
return false;
|
||||
}
|
||||
const isSize = file.size / 1024 / 1024 < 1;
|
||||
if (!isSize) {
|
||||
message.error(`图片大小必须小于${1}M`);
|
||||
}
|
||||
return isType && isSize;
|
||||
},
|
||||
/**
|
||||
* 图标发生改变
|
||||
*/
|
||||
changeIconUpload: (info) => {
|
||||
if (info.file.status === 'uploading') {
|
||||
logoData.iconLoading = true;
|
||||
}
|
||||
if (info.file.status === 'done') {
|
||||
info.file.url = info.file.response?.result;
|
||||
logoData.iconLoading = true;
|
||||
logoData.iconValue = info.file.response?.result;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const {
|
||||
logoValue,
|
||||
logoLoading,
|
||||
iconLoading,
|
||||
backLoading,
|
||||
inLogo,
|
||||
iconValue,
|
||||
inIcon,
|
||||
inBackground,
|
||||
backValue,
|
||||
handleChangeLogo,
|
||||
beforeBackUpload,
|
||||
changeBackUpload,
|
||||
beforeLogoUpload,
|
||||
beforeIconUpload,
|
||||
changeIconUpload,
|
||||
imageTypes,
|
||||
iconTypes,
|
||||
} = toRefs(logoData);
|
||||
/**
|
||||
* 提交基础表单
|
||||
*/
|
||||
const basicData = reactive({
|
||||
isSucessBasic: false,
|
||||
/**
|
||||
* 提交基础表单数据
|
||||
*/
|
||||
saveBasicInfo: async () => {},
|
||||
saveBasicInfo: async () => {
|
||||
// return new Promise(async (resolve) => {
|
||||
const vaild = await formBasicRef.value.validate();
|
||||
console.log(vaild, 'vaild ');
|
||||
if (vaild) {
|
||||
const item = [
|
||||
{
|
||||
scope: 'front',
|
||||
properties: {
|
||||
...form,
|
||||
apikey: '',
|
||||
'base-path': '',
|
||||
},
|
||||
},
|
||||
{
|
||||
scope: 'amap',
|
||||
properties: {
|
||||
api: form.apikey,
|
||||
},
|
||||
},
|
||||
{
|
||||
scope: 'paths',
|
||||
properties: {
|
||||
'base-path': form.basePath,
|
||||
},
|
||||
},
|
||||
];
|
||||
const res = await save(item);
|
||||
if (res.status === 200) {
|
||||
const ico: any = document.querySelector('link[rel="icon"]');
|
||||
if (ico !== null) {
|
||||
ico.href = form.icon;
|
||||
}
|
||||
} else {
|
||||
basicData.isSucessBasic = true;
|
||||
}
|
||||
} else {
|
||||
basicData.isSucessBasic = true;
|
||||
}
|
||||
// });
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* 提交角色数据
|
||||
*/
|
||||
const roleData = reactive({
|
||||
isSucessRole: false,
|
||||
/**
|
||||
* 根据菜单找角色
|
||||
*/
|
||||
findMenuByRole: (menu: any[], code: string): any => {
|
||||
let _item = null;
|
||||
menu.some((item) => {
|
||||
if (item.code === code) {
|
||||
_item = item;
|
||||
return true;
|
||||
}
|
||||
|
||||
if (item.children) {
|
||||
const childrenItem = roleData.findMenuByRole(
|
||||
item.children,
|
||||
code,
|
||||
);
|
||||
if (childrenItem) {
|
||||
_item = childrenItem;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
return null;
|
||||
});
|
||||
return _item;
|
||||
},
|
||||
/**
|
||||
* 保存角色
|
||||
*/
|
||||
addRoleData: async () => {
|
||||
return new Promise((resolve) => {
|
||||
if (!keys.value.length) {
|
||||
return resolve(true);
|
||||
}
|
||||
let Count = 0;
|
||||
keys.value.forEach(async (item, index) => {
|
||||
const _itemData = RoleData[item];
|
||||
// 添加该角色
|
||||
const res = await addRole(_itemData);
|
||||
if (res.status === 200) {
|
||||
const menuTree = await getRoleMenu(res.result.id);
|
||||
if (menuTree.status === 200) {
|
||||
const _roleData = (RoleMenuData[item] as []).filter(
|
||||
(roleItem: any) => {
|
||||
const _menu = roleData.findMenuByRole(
|
||||
menuTree.result,
|
||||
roleItem.code,
|
||||
);
|
||||
if (_menu) {
|
||||
roleItem.id = _menu.id;
|
||||
roleItem.parentId = _menu.parentId;
|
||||
roleItem.createTime = _menu.createTime;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
);
|
||||
//更新权限
|
||||
const roleRes = await updateRoleMenu(res.result.id, {
|
||||
menus: _roleData,
|
||||
});
|
||||
if (roleRes.status === 200) {
|
||||
Count += 1;
|
||||
}
|
||||
if (index === keys.value.length - 1) {
|
||||
resolve(Count === keys.value.length);
|
||||
}
|
||||
} else if (index === keys.value.length - 1) {
|
||||
resolve(Count === keys.value.length);
|
||||
}
|
||||
} else if (index === keys.value.length - 1) {
|
||||
resolve(Count === keys.value.length);
|
||||
roleData.isSucessRole = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
});
|
||||
const { isSucessRole } = toRefs(roleData);
|
||||
/**
|
||||
* 获取菜单数据
|
||||
*/
|
||||
|
|
@ -882,7 +1182,6 @@ const menuDatas = reactive({
|
|||
);
|
||||
const _count = menuDatas.menuCount(newTree);
|
||||
menuDatas.count = _count;
|
||||
console.log(menuDatas.count, 'menuDatas.count');
|
||||
}
|
||||
},
|
||||
/**
|
||||
|
|
@ -918,16 +1217,118 @@ const menuDatas = reactive({
|
|||
}, 0);
|
||||
},
|
||||
});
|
||||
|
||||
const { count } = toRefs(menuDatas);
|
||||
/**
|
||||
* 提交初始化数据
|
||||
*/
|
||||
const initialization = reactive({
|
||||
isSucessInit: false,
|
||||
optionPorts: [],
|
||||
/**
|
||||
* 查询端口数据
|
||||
*/
|
||||
getCurrentPort: async () => {
|
||||
const resp = await getResourcesCurrent();
|
||||
const current = resp?.result;
|
||||
const _host =
|
||||
current.find((item: any) => item.host === '0.0.0.0')?.ports[
|
||||
'TCP'
|
||||
] || [];
|
||||
initialization.optionPorts = _host?.map((p: any) => ({
|
||||
label: p,
|
||||
value: p,
|
||||
}));
|
||||
},
|
||||
/**
|
||||
* 提交初始数据表单
|
||||
*/
|
||||
|
||||
saveCurrentData: async () => {
|
||||
// return new Promise(async (resolve) => {
|
||||
const valid = await formRef.value.validate();
|
||||
console.log(valid, 'valid');
|
||||
// if (valid) {
|
||||
// try {
|
||||
// // 新增网络组件
|
||||
// const network = await saveNetwork({
|
||||
// type: 'MQTT_SERVER',
|
||||
// shareCluster: true,
|
||||
// name: 'MQTT网络组件',
|
||||
// configuration: {
|
||||
// host: '0.0.0.0',
|
||||
// secure: false,
|
||||
// port: modalForm.port,
|
||||
// publicHost: modalForm.publicHost,
|
||||
// publicPort: modalForm.publicPort,
|
||||
// },
|
||||
// });
|
||||
// // 保存协议
|
||||
// const protocol = await saveProtocol();
|
||||
// let protocolItem: any = undefined;
|
||||
// if (protocol.status === 200) {
|
||||
// const proid = await getProtocol();
|
||||
// if (proid.status === 200) {
|
||||
// protocolItem = (proid?.result || []).find(
|
||||
// (it: any) => it.name === 'JetLinks官方协议',
|
||||
// );
|
||||
// }
|
||||
// }
|
||||
// // 新增设备接入网关
|
||||
// const accessConfig = await saveAccessConfig({
|
||||
// name: 'MQTT类型设备接入网关',
|
||||
// provider: 'mqtt-server-gateway',
|
||||
// protocol: protocolItem?.id,
|
||||
// transport: 'MQTT',
|
||||
// channel: 'network',
|
||||
// channelId: network?.result?.id,
|
||||
// });
|
||||
// // 新增产品
|
||||
// const product = await saveProduct({
|
||||
// name: 'MQTT产品',
|
||||
// messageProtocol: protocolItem?.id,
|
||||
// protocolName: protocolItem?.name,
|
||||
// transportProtocol: 'MQTT',
|
||||
// deviceType: 'device',
|
||||
// accessId: accessConfig.result?.id,
|
||||
// accessName: accessConfig.result?.name,
|
||||
// accessProvider: 'mqtt-server-gateway',
|
||||
// });
|
||||
// // 新增设备
|
||||
// const device = await saveDevice({
|
||||
// name: 'MQTT设备',
|
||||
// productId: product?.result?.id,
|
||||
// productName: product?.result?.name,
|
||||
// });
|
||||
// if (device.status === 200) {
|
||||
// changeDeploy(product.result.id);
|
||||
// deployDevice(device.result.id);
|
||||
// }
|
||||
|
||||
// flag.value = true;
|
||||
// visible.value = false;
|
||||
// } catch (e) {
|
||||
// initialization.isSucessInit = true;
|
||||
// // resolve(false);
|
||||
// }
|
||||
// }
|
||||
initialization.isSucessInit = true;
|
||||
},
|
||||
});
|
||||
const { optionPorts, saveCurrentData, isSucessInit } = toRefs(initialization);
|
||||
|
||||
/**
|
||||
* 初始化
|
||||
*/
|
||||
menuDatas.getSystemPermissionData();
|
||||
initialization.getCurrentPort();
|
||||
/**
|
||||
* 提交所有数据
|
||||
*/
|
||||
const submit = () => {};
|
||||
const submitData = () => {
|
||||
initialization.saveCurrentData();
|
||||
roleData.addRoleData();
|
||||
basicData.saveBasicInfo();
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.page-container {
|
||||
|
|
@ -1073,6 +1474,13 @@ const submit = () => {};
|
|||
padding: 8px;
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
cursor: pointer;
|
||||
.loading-logo {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
}
|
||||
.loading-icon {
|
||||
position: absolute;
|
||||
}
|
||||
.upload-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -1132,6 +1540,9 @@ const submit = () => {};
|
|||
padding: 8px;
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
cursor: pointer;
|
||||
.loading-back {
|
||||
position: absolute;
|
||||
}
|
||||
.upload-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,541 @@
|
|||
<!-- 物联卡-首页 -->
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="14">
|
||||
<div class="home-guide">
|
||||
<Guide title="物联卡引导"></Guide>
|
||||
<div
|
||||
class="home-guide-items"
|
||||
:style="`grid-template-columns: repeat(${
|
||||
guideList ? guideList.length : 1
|
||||
}, 1fr);`"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in guideList"
|
||||
:key="index"
|
||||
class="home-guide-item step-bar arrow-2 pointer"
|
||||
@click="jumpPage(item)"
|
||||
>
|
||||
<div class="item-english">{{ item.english }}</div>
|
||||
<div class="item-title">{{ item.name }}</div>
|
||||
<div class="item-index">
|
||||
<img :src="Image[index + 1]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="10">
|
||||
<div class="home-statistics">
|
||||
<Guide title="基础统计">
|
||||
<template #extra>
|
||||
<span class="extra-text">详情</span>
|
||||
</template>
|
||||
</Guide>
|
||||
<div class="home-statistics-body">
|
||||
<div class="home-guide-item">
|
||||
<div class="item-english">昨日流量统计</div>
|
||||
<div class="item-title">{{ currentSource }} M</div>
|
||||
<div
|
||||
class="item-index-echarts"
|
||||
style="height: 75px; width: 110px"
|
||||
>
|
||||
<div class="chart" ref="todayFlowChart"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-guide-item">
|
||||
<div class="item-english">物联卡</div>
|
||||
<div class="item-content">
|
||||
<div
|
||||
v-for="iten in pieChartData"
|
||||
:key="iten.key"
|
||||
class="item-node"
|
||||
>
|
||||
<div class="item-node-text">
|
||||
{{ iten.value }}
|
||||
</div>
|
||||
<div :class="`state ${iten.className}`">
|
||||
{{ iten.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="item-index-echarts"
|
||||
style="height: 75px; width: 110px"
|
||||
>
|
||||
<div class="chart" ref="iotCardChart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="24" style="min-height: 580px">
|
||||
<div class="home-body">
|
||||
<Guide title="平台架构图" english="PLATFORM ARCHITECTURE DIAGRAM" />
|
||||
<div class="home-body-img">
|
||||
<img :src="getImage('/iot-card/iotcard-home.png')" />
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getImage } from '@/utils/comm';
|
||||
import Guide from '../components/Guide.vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import moment from 'moment';
|
||||
import { queryFlow, list } from '@/api/iot-card/home';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
const router = useRouter();
|
||||
const { proxy } = <any>getCurrentInstance();
|
||||
|
||||
interface GuideItemProps {
|
||||
key: string;
|
||||
name: string;
|
||||
english: string;
|
||||
url: string;
|
||||
param?: Record<string, any>;
|
||||
index?: number;
|
||||
auth: boolean;
|
||||
}
|
||||
|
||||
const Image = {
|
||||
1: getImage('/home/1.png'),
|
||||
2: getImage('/home/2.png'),
|
||||
3: getImage('/home/3.png'),
|
||||
};
|
||||
const guideList = [
|
||||
{
|
||||
key: 'EQUIPMENT',
|
||||
name: '平台对接',
|
||||
english: 'STEP1',
|
||||
auth: '',
|
||||
url: '',
|
||||
},
|
||||
{
|
||||
key: 'SCREEN',
|
||||
name: '物联卡管理',
|
||||
english: 'STEP2',
|
||||
auth: '',
|
||||
url: '',
|
||||
param: { save: true },
|
||||
},
|
||||
{
|
||||
key: 'CASCADE',
|
||||
name: '操作记录',
|
||||
english: 'STEP3',
|
||||
auth: '',
|
||||
url: '',
|
||||
},
|
||||
];
|
||||
|
||||
const currentSource = ref<number>(0);
|
||||
const barChartData = ref<any[]>([]);
|
||||
const pieChartData = ref<any[]>([
|
||||
{
|
||||
key: 'using',
|
||||
name: '正常',
|
||||
value: 0,
|
||||
className: 'normal',
|
||||
},
|
||||
{
|
||||
key: 'toBeActivated',
|
||||
name: '未激活',
|
||||
value: 0,
|
||||
className: 'notActive',
|
||||
},
|
||||
{
|
||||
key: 'deactivate',
|
||||
name: '停用',
|
||||
value: 0,
|
||||
className: 'stopped',
|
||||
},
|
||||
]);
|
||||
|
||||
const jumpPage = (data: GuideItemProps) => {
|
||||
if (data.url && data.auth) {
|
||||
router.push(`${data.url}`, data.param);
|
||||
} else {
|
||||
message.warning('暂无权限，请联系管理员');
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取昨日流量消耗
|
||||
*/
|
||||
const getTodayFlow = async () => {
|
||||
const beginTime = moment().subtract(1, 'days').startOf('day').valueOf();
|
||||
const endTime = moment().subtract(1, 'days').endOf('day').valueOf();
|
||||
const resp: any = await queryFlow(beginTime, endTime, { orderBy: 'date' });
|
||||
resp.result.map((item: any) => {
|
||||
currentSource.value += parseFloat(item.value.toFixed(2));
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取最近15天流量消耗统计图数据
|
||||
*/
|
||||
const get15DaysTrafficConsumption = async () => {
|
||||
const beginTime = moment().subtract(15, 'days').startOf('day').valueOf();
|
||||
const endTime = moment().subtract(1, 'days').endOf('day').valueOf();
|
||||
const resp: any = await queryFlow(beginTime, endTime, { orderBy: 'date' });
|
||||
barChartData.value = resp.result
|
||||
.map((item: any) => ({
|
||||
...item,
|
||||
}))
|
||||
.reverse();
|
||||
createBarChart();
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取物联卡状态数据
|
||||
*/
|
||||
const getStateCard = async () => {
|
||||
Promise.all(
|
||||
pieChartData.value.map((item) => {
|
||||
const params = {
|
||||
terms: [
|
||||
{
|
||||
terms: [
|
||||
{
|
||||
column: 'cardStateType',
|
||||
termType: 'eq',
|
||||
value: item.key,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
return list(params);
|
||||
}),
|
||||
)
|
||||
.then((resp) => {
|
||||
resp.forEach((i: any, index) => {
|
||||
if (i.success) {
|
||||
pieChartData.value[index].value = i.result.total;
|
||||
}
|
||||
});
|
||||
createPieChart();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 最近15天流量消耗统计图
|
||||
*/
|
||||
const createBarChart = () => {
|
||||
const myChart = echarts.init(proxy.$refs.todayFlowChart);
|
||||
|
||||
const options = {
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
show: false,
|
||||
data: barChartData.value.map((m) => m.date),
|
||||
},
|
||||
yAxis: {
|
||||
show: false,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '流量消耗',
|
||||
type: 'bar',
|
||||
color: '#FACD89',
|
||||
// barWidth: '5%', // 设单柱状置宽度
|
||||
showBackground: true, //设置柱状的背景虚拟
|
||||
data: barChartData.value.map((m) => parseFloat(m.value.toFixed(2))),
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(options);
|
||||
window.addEventListener('resize', function () {
|
||||
myChart.resize();
|
||||
});
|
||||
};
|
||||
/**
|
||||
* 物联卡饼图
|
||||
*/
|
||||
const createPieChart = () => {
|
||||
nextTick(() => {
|
||||
const myChart = echarts.init(proxy.$refs.iotCardChart);
|
||||
|
||||
const options = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}: {c} ({d}%)',
|
||||
},
|
||||
color: ['#85a5ff', '#f29b55', '#c4c4c4'],
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'pie',
|
||||
avoidLabelOverlap: true, //是否启用防止标签重叠策略
|
||||
radius: ['50%', '90%'],
|
||||
center: ['50%', '50%'],
|
||||
itemStyle: {
|
||||
borderColor: 'rgba(255,255,255,1)',
|
||||
borderWidth: 2,
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
data: pieChartData.value,
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(options);
|
||||
window.addEventListener('resize', function () {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
barChartData.value,
|
||||
() => {
|
||||
createBarChart();
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
getTodayFlow();
|
||||
get15DaysTrafficConsumption();
|
||||
getStateCard();
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.home-base {
|
||||
position: relative;
|
||||
padding: 24px 16px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.home-guide {
|
||||
margin-bottom: 24px;
|
||||
padding: 24px 16px;
|
||||
background-color: #fff;
|
||||
|
||||
.home-guide-items {
|
||||
display: grid;
|
||||
grid-column-gap: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
.home-guide-item {
|
||||
position: relative;
|
||||
padding: 16px;
|
||||
background: linear-gradient(
|
||||
135.62deg,
|
||||
#f6f7fd 22.27%,
|
||||
rgba(255, 255, 255, 0.86) 91.82%
|
||||
);
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 4px 18px #efefef;
|
||||
.state {
|
||||
position: relative;
|
||||
padding-left: 8px;
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-right: 2px;
|
||||
content: '';
|
||||
}
|
||||
&.normal::before {
|
||||
background: #85a5ff;
|
||||
}
|
||||
&.notActive::before {
|
||||
background: #f29b55;
|
||||
}
|
||||
&.stopped::before {
|
||||
background: #c4c4c4;
|
||||
}
|
||||
}
|
||||
|
||||
&.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.item-english {
|
||||
color: #4f4f4f;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
display: flex;
|
||||
margin-top: 15px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.item-node {
|
||||
min-width: 58px;
|
||||
margin-right: 8px;
|
||||
z-index: 1;
|
||||
|
||||
.item-node-text {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.item-title {
|
||||
margin: 20px 0;
|
||||
color: @text-color;
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.item-index {
|
||||
position: absolute;
|
||||
right: 10%;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.item-index-echarts {
|
||||
.item-index;
|
||||
|
||||
right: 12px;
|
||||
bottom: 5%;
|
||||
z-index: 0;
|
||||
width: 50%;
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-body {
|
||||
.home-base;
|
||||
|
||||
min-height: 444px;
|
||||
margin-bottom: 24px;
|
||||
// padding-bottom: 26.5%;
|
||||
padding-bottom: 30%;
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid #2f54eb;
|
||||
|
||||
.home-body-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
> img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-statistics {
|
||||
.home-base;
|
||||
|
||||
.extra-text {
|
||||
cursor: pointer;
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
.home-statistics-body {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.step-item-after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -60px;
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
transform: translateY(-50%);
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
.home-step {
|
||||
.home-base;
|
||||
|
||||
.home-step-items {
|
||||
display: grid;
|
||||
grid-column-gap: 66px;
|
||||
|
||||
.step-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.step-item-title {
|
||||
position: relative;
|
||||
padding: 16px 24px;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
background-color: #f8f9fd;
|
||||
cursor: pointer;
|
||||
|
||||
.step-item-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
height: 100%;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
> span {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.step-item-content {
|
||||
flex-grow: 1;
|
||||
height: auto;
|
||||
padding: 24px;
|
||||
border-right: 1px solid #e5edf4;
|
||||
border-bottom: 1px solid #e5edf4;
|
||||
border-left: 1px solid #e5edf4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.step-bar {
|
||||
position: relative;
|
||||
|
||||
&.arrow-1 {
|
||||
&:not(:last-child) {
|
||||
&::after {
|
||||
.step-item-after;
|
||||
|
||||
background: url('/images/home/arrow-1.png') no-repeat center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.arrow-2 {
|
||||
&:not(:last-child) {
|
||||
&::after {
|
||||
.step-item-after;
|
||||
|
||||
background: url('/images/home/arrow-2.png') no-repeat center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<template>
|
||||
<div class="home-title">
|
||||
<div>{{ title }}</div>
|
||||
<div class="extra-text">
|
||||
<slot name="extra"></slot>
|
||||
</div>
|
||||
<div class="home-title-english">{{ english }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="Guide">
|
||||
interface guideProps {
|
||||
title: string;
|
||||
english?: string;
|
||||
}
|
||||
|
||||
const props = defineProps<guideProps>();
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.home-title {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
padding-left: 18px;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: @primary-color;
|
||||
border: 1px solid #b4c0da;
|
||||
transform: translateY(-50%);
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
.extra-text {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.home-title-english {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -8,27 +8,27 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<p style="display: flex; justify-content: space-between">
|
||||
<p>
|
||||
<span class="label">请求数据类型</span>
|
||||
<span class="value">{{
|
||||
<span>{{
|
||||
getContent(selectApi.requestBody) ||
|
||||
'application/x-www-form-urlencoded'
|
||||
}}</span>
|
||||
<span class="label">响应数据类型</span>
|
||||
<span class="value">{{ `["/"]` }}</span>
|
||||
<span>{{ `["/"]` }}</span>
|
||||
</p>
|
||||
|
||||
<div class="api-card">
|
||||
<h5>请求参数</h5>
|
||||
<div class="content">
|
||||
<JTable
|
||||
:columns="columns.request"
|
||||
:dataSource="selectApi.parameters"
|
||||
:columns="requestCard.columns"
|
||||
:dataSource="requestCard.tableData"
|
||||
noPagination
|
||||
model="TABLE"
|
||||
>
|
||||
<template #required="slotProps">
|
||||
<span>{{ slotProps.row.required + '' }}</span>
|
||||
<span>{{ Boolean(slotProps.row.required) + '' }}</span>
|
||||
</template>
|
||||
<template #type="slotProps">
|
||||
<span>{{ slotProps.row.schema.type }}</span>
|
||||
|
|
@ -36,6 +36,39 @@
|
|||
</JTable>
|
||||
</div>
|
||||
</div>
|
||||
<div class="api-card">
|
||||
<h5>响应状态</h5>
|
||||
<div class="content">
|
||||
<JTable
|
||||
:columns="responseStatusCard.columns"
|
||||
:dataSource="responseStatusCard.tableData"
|
||||
noPagination
|
||||
model="TABLE"
|
||||
>
|
||||
</JTable>
|
||||
|
||||
<a-tabs v-model:activeKey="responseStatusCard.activeKey">
|
||||
<a-tab-pane
|
||||
:key="key"
|
||||
:tab="key"
|
||||
v-for="key in tabs"
|
||||
></a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="api-card">
|
||||
<h5>响应参数</h5>
|
||||
<div class="content">
|
||||
<JTable
|
||||
:columns="respParamsCard.columns"
|
||||
:dataSource="respParamsCard.tableData"
|
||||
noPagination
|
||||
model="TABLE"
|
||||
>
|
||||
</JTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -49,11 +82,21 @@ const props = defineProps({
|
|||
type: Object as PropType<apiDetailsType>,
|
||||
required: true,
|
||||
},
|
||||
schemas: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
const { selectApi } = toRefs(props);
|
||||
|
||||
const columns = {
|
||||
request: [
|
||||
type tableCardType = {
|
||||
columns: object[];
|
||||
tableData: object[];
|
||||
activeKey?: any;
|
||||
getData?: any;
|
||||
};
|
||||
const requestCard = reactive<tableCardType>({
|
||||
columns: [
|
||||
{
|
||||
title: '参数名',
|
||||
dataIndex: 'name',
|
||||
|
|
@ -82,13 +125,136 @@ const columns = {
|
|||
scopedSlots: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
tableData: [],
|
||||
getData: () => {
|
||||
requestCard.tableData = props.selectApi.parameters;
|
||||
},
|
||||
});
|
||||
const responseStatusCard = reactive<tableCardType>({
|
||||
activeKey: '',
|
||||
columns: [
|
||||
{
|
||||
title: '状态码',
|
||||
dataIndex: 'code',
|
||||
key: 'code',
|
||||
},
|
||||
{
|
||||
title: '说明',
|
||||
dataIndex: 'desc',
|
||||
key: 'desc',
|
||||
},
|
||||
{
|
||||
title: 'schema',
|
||||
dataIndex: 'schema',
|
||||
key: 'schema',
|
||||
},
|
||||
],
|
||||
tableData: [],
|
||||
getData: () => {
|
||||
if (!Object.keys(props.selectApi.responses).length)
|
||||
return (responseStatusCard.tableData = []);
|
||||
|
||||
const tableData = <any>[];
|
||||
Object.entries(props.selectApi.responses || {}).forEach((item: any) => {
|
||||
const desc = item[1].description;
|
||||
const schema = item[1].content['*/*'].schema.$ref?.split('/') || '';
|
||||
|
||||
tableData.push({
|
||||
code: item[0],
|
||||
desc,
|
||||
schema: schema && schema.pop(),
|
||||
});
|
||||
});
|
||||
responseStatusCard.activeKey = tableData[0]?.code;
|
||||
responseStatusCard.tableData = tableData;
|
||||
},
|
||||
});
|
||||
const tabs = computed(() =>
|
||||
responseStatusCard.tableData
|
||||
.map((item: any) => item.code + '')
|
||||
.filter((code: string) => code !== '400'),
|
||||
);
|
||||
const respParamsCard = reactive<tableCardType>({
|
||||
columns: [
|
||||
{
|
||||
title: '参数名称',
|
||||
dataIndex: 'paramsName',
|
||||
},
|
||||
{
|
||||
title: '参数说明',
|
||||
dataIndex: 'desc',
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'paramsType',
|
||||
},
|
||||
],
|
||||
tableData: [],
|
||||
getData: (code: string) => {
|
||||
type schemaObjType = {
|
||||
paramsName: string;
|
||||
paramsType: string;
|
||||
desc: string;
|
||||
children?: schemaObjType[];
|
||||
};
|
||||
|
||||
const schemaName = responseStatusCard.tableData.find(
|
||||
(item: any) => item.code === code,
|
||||
).schema;
|
||||
const schemas = toRaw(props.schemas);
|
||||
function findData(schemaName: string) {
|
||||
if (!schemaName || !schemas[schemaName]) {
|
||||
return [];
|
||||
}
|
||||
const result: schemaObjType[] = [];
|
||||
const schema = schemas[schemaName];
|
||||
const basicType = ['string', 'integer', 'boolean'];
|
||||
Object.entries(schema.properties).forEach((item: [string, any]) => {
|
||||
const paramsType =
|
||||
item[1].type ||
|
||||
(item[1].$ref && item[1].$ref.split('/').pop()) ||
|
||||
(item[1].items && item[1].items.$ref.split('/').pop()) ||
|
||||
'';
|
||||
const schemaObj: schemaObjType = {
|
||||
paramsName: item[0],
|
||||
paramsType,
|
||||
desc: item[1].description || '',
|
||||
};
|
||||
if (!basicType.includes(paramsType))
|
||||
schemaObj.children = findData(paramsType);
|
||||
result.push(schemaObj);
|
||||
});
|
||||
console.log(result);
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
respParamsCard.tableData = findData(schemaName);
|
||||
// console.log(respParamsCard.tableData);
|
||||
},
|
||||
});
|
||||
|
||||
console.log(selectApi.value);
|
||||
const getContent = (data: any) => {
|
||||
if (!data) return '';
|
||||
return Object.keys(data.content)[0];
|
||||
if (data && data.content) {
|
||||
return Object.keys(data.content || {})[0];
|
||||
}
|
||||
return '';
|
||||
};
|
||||
onMounted(() => {
|
||||
requestCard.getData();
|
||||
responseStatusCard.getData();
|
||||
});
|
||||
watch(
|
||||
() => props.selectApi,
|
||||
() => {
|
||||
requestCard.getData();
|
||||
responseStatusCard.getData();
|
||||
},
|
||||
);
|
||||
|
||||
watch([() => responseStatusCard.activeKey, () => props.selectApi], (n) => {
|
||||
n[0] && respParamsCard.getData(n[0]);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
@ -103,13 +269,25 @@ const getContent = (data: any) => {
|
|||
|
||||
.input {
|
||||
display: flex;
|
||||
margin: 24px 0;
|
||||
}
|
||||
}
|
||||
p {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
|
||||
.label {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.api-card {
|
||||
margin-top: 24px;
|
||||
h5 {
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
|
|
@ -125,7 +303,6 @@ const getContent = (data: any) => {
|
|||
.content {
|
||||
padding-left: 10px;
|
||||
|
||||
|
||||
:deep(.jtable-body) {
|
||||
padding: 0;
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<div class="input">
|
||||
<InputCard :value="selectApi.method" />
|
||||
<a-input :value="selectApi?.url" disabled />
|
||||
<span class="send">发送</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -36,7 +37,15 @@ const { selectApi } = toRefs(props);
|
|||
|
||||
.input {
|
||||
display: flex;
|
||||
|
||||
.send {
|
||||
width: 65px;
|
||||
padding: 4px 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
background-color: #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -43,9 +43,9 @@ const columns = [
|
|||
},
|
||||
];
|
||||
const rowSelection: TableProps['rowSelection'] = {
|
||||
// onChange: (selectedRowKeys, selectedRows) => {
|
||||
// console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
|
||||
// },
|
||||
onChange: (selectedRowKeys, selectedRows) => {
|
||||
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
|
||||
},
|
||||
};
|
||||
|
||||
const jump = (row:object) => {
|
||||
|
|
|
|||
|
|
@ -32,13 +32,14 @@ const getTreeData = () => {
|
|||
Promise.all(allPromise).then((values) => {
|
||||
values.forEach((item: any, i) => {
|
||||
tree[i].children = combData(item?.paths);
|
||||
tree[i].schemas = item.components.schemas
|
||||
});
|
||||
treeData.value = tree;
|
||||
});
|
||||
});
|
||||
};
|
||||
const clickSelectItem: TreeProps['onSelect'] = (key, node: any) => {
|
||||
emits('select', node.node.dataRef);
|
||||
emits('select', node.node.dataRef, node.node?.parent.node.schemas);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
export type treeNodeTpye = {
|
||||
name: string;
|
||||
key: string;
|
||||
schemas?:object;
|
||||
link?: string;
|
||||
apiList?: object[];
|
||||
children?: treeNodeTpye[];
|
||||
|
||||
};
|
||||
export type methodType = {
|
||||
[key: string]: object
|
||||
|
|
@ -17,6 +19,7 @@ export type apiDetailsType = {
|
|||
url: string;
|
||||
method: string;
|
||||
summary: string;
|
||||
parameters: [];
|
||||
parameters: any[];
|
||||
requestBody?: any;
|
||||
responses:object;
|
||||
}
|
||||
|
|
@ -15,12 +15,12 @@
|
|||
class="api-details"
|
||||
v-show="selectedApi.url && tableData.length > 0"
|
||||
>
|
||||
<a-button @click="selectedApi = initSelectedApi"
|
||||
<a-button @click="selectedApi = initSelectedApi" style="margin-bottom: 24px;"
|
||||
>返回</a-button
|
||||
>
|
||||
<a-tabs v-model:activeKey="activeKey" type="card">
|
||||
<a-tab-pane key="does" tab="文档">
|
||||
<ApiDoes :select-api="selectedApi" />
|
||||
<ApiDoes :select-api="selectedApi" :schemas="schemas" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="test" tab="调试">
|
||||
<ApiTest :select-api="selectedApi" />
|
||||
|
|
@ -40,7 +40,8 @@ import ApiDoes from './components/ApiDoes.vue';
|
|||
import ApiTest from './components/ApiTest.vue';
|
||||
|
||||
const tableData = ref([]);
|
||||
const treeSelect = (node: treeNodeTpye) => {
|
||||
const treeSelect = (node: treeNodeTpye, nodeSchemas:object = {}) => {
|
||||
schemas.value = nodeSchemas
|
||||
if (!node.apiList) return;
|
||||
const apiList: apiObjType[] = node.apiList as apiObjType[];
|
||||
const table: any = [];
|
||||
|
|
@ -61,10 +62,14 @@ const treeSelect = (node: treeNodeTpye) => {
|
|||
};
|
||||
|
||||
const activeKey = ref('does');
|
||||
const initSelectedApi = {
|
||||
const schemas = ref({});
|
||||
const initSelectedApi:apiDetailsType = {
|
||||
url: '',
|
||||
method: '',
|
||||
summary: '',
|
||||
parameters: [],
|
||||
responses: {},
|
||||
requestBody: {}
|
||||
};
|
||||
const selectedApi = ref<apiDetailsType>(initSelectedApi);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue