0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
xiongqian 2023-01-12 19:17:35 +08:00
parent 2094994890 f6fd6b38ef
commit 5f6aa6ce65
62 changed files with 3779 additions and 565 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
.commitlintrc.cjs
View File

@ -17,12 +17,18 @@ module.exports = {
'perf', // 性能优化
]
],
'type-case': [0],
'type-empty': [0],
'scope-empty': [0],
'scope-case': [0],
'subject-full-stop': [0, 'never'],
'subject-case': [0, 'never'],
'header-max-length': [0, 'always', 72]
}
},
plugins: [
{
rules: {
"commit-rule": ({ raw }) => {
return [
/^\[(build|feat|fix|update|refactor|docs|chore|style|revert|perf)].+/g.test(raw),
`commit备注信息格式错误，格式为 <[type] 修改内容>，type支持${types.join(",")}`
]
}
}
}
]
}

52
components.d.ts vendored
View File

@ -1,52 +0,0 @@
// generated by unplugin-vue-components
// We suggest you to commit this file into source control
// Read more: https://github.com/vuejs/core/pull/3399
import '@vue/runtime-core'
export {}
declare module '@vue/runtime-core' {
export interface GlobalComponents {
AAlert: typeof import('ant-design-vue/es')['Alert']
ABadge: typeof import('ant-design-vue/es')['Badge']
AButton: typeof import('ant-design-vue/es')['Button']
ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
ACheckboxGroup: typeof import('ant-design-vue/es')['CheckboxGroup']
ACol: typeof import('ant-design-vue/es')['Col']
ACollapse: typeof import('ant-design-vue/es')['Collapse']
ACollapsePanel: typeof import('ant-design-vue/es')['CollapsePanel']
ADatePicker: typeof import('ant-design-vue/es')['DatePicker']
ADivider: typeof import('ant-design-vue/es')['Divider']
AEmpty: typeof import('ant-design-vue/es')['Empty']
AForm: typeof import('ant-design-vue/es')['Form']
AFormItem: typeof import('ant-design-vue/es')['FormItem']
AInput: typeof import('ant-design-vue/es')['Input']
AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
AModal: typeof import('ant-design-vue/es')['Modal']
APagination: typeof import('ant-design-vue/es')['Pagination']
APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
ARow: typeof import('ant-design-vue/es')['Row']
ASelect: typeof import('ant-design-vue/es')['Select']
ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
ASpin: typeof import('ant-design-vue/es')['Spin']
ASwitch: typeof import('ant-design-vue/es')['Switch']
ATable: typeof import('ant-design-vue/es')['Table']
ATimePicker: typeof import('ant-design-vue/es')['TimePicker']
ATooltip: typeof import('ant-design-vue/es')['Tooltip']
ATreeSelect: typeof import('ant-design-vue/es')['TreeSelect']
AUpload: typeof import('ant-design-vue/es')['Upload']
BadgeStatus: typeof import('./src/components/BadgeStatus/index.vue')['default']
CardBox: typeof import('./src/components/CardBox/index.vue')['default']
FormFormBuilder: typeof import('./src/components/Form/FormBuilder.vue')['default']
GeoComponent: typeof import('./src/components/GeoComponent/index.vue')['default']
MonacoEditor: typeof import('./src/components/MonacoEditor/index.vue')['default']
PermissionButton: typeof import('./src/components/PermissionButton/index.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
Table: typeof import('./src/components/Table/index.vue')['default']
TitleComponent: typeof import('./src/components/TitleComponent/index.vue')['default']
ValueItem: typeof import('./src/components/ValueItem/index.vue')['default']
}
}

2
config/config.ts
View File

@ -1,6 +1,6 @@
export default {
theme: {
'primary-color': '#00A4FF',
'primary-color': '#1d39c4',
},
logo: '/favicon.ico',
title: 'Jetlinks'

315
package-lock.json generated
View File

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

1
package.json
View File

@ -48,6 +48,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"
},

3
src/api/device.ts
View File

@ -1,3 +0,0 @@
import server from '@/utils/request'
export const deleteMetadata = (deviceId: string) => server.remove(`/device-instance/${deviceId}/metadata`)

16
src/api/device/instance.ts Normal file
View File

@ -0,0 +1,16 @@
import server from '@/utils/request'
/**
* 删除设备物模型
* @param deviceId 设备ID
* @returns
*/
export const deleteMetadata = (deviceId: string) => server.remove(`/device-instance/${deviceId}/metadata`)
/**
* 保存设备物模型
* @param id 设备ID
* @param data 物模型
* @returns
*/
export const saveMetadata = (id: string, data: string) => server.put(`/device/instance/${id}/metadata`, data)

26
src/api/device/product.ts Normal file
View File

@ -0,0 +1,26 @@
import server from '@/utils/request'
import type { DeviceMetadata } from '@/views/device/Product/typings'
/**
* 根据条件查询产品（不带翻页）
* @param data 查询条件
* @returns
*/
export const queryNoPagingPost = (data: any) => server.post(`/device-product/_query/no-paging?paging=false`, data)
/**
* 导入第三方物模型
* @param direction from|to
* @param type 物模型类型
* @param data 物模型数据
* @returns
*/
export const convertMetadata = (direction: 'from' | 'to', type: string, data: any) => server.post<DeviceMetadata>(`/device/product/metadata/convert-${direction}/${type}`, data)
/**
* 修改产品
* @param id 产品ID
* @param data 产品数据
* @returns
*/
export const modify = (id: string, data: any) => server.put(`/device-product/${id}`, data)

6
src/api/iot-card/home.ts Normal file
View File

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

43
src/components/CardBox/index.vue
View File

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

2
src/components/Form/FormBuilder.vue
View File

@ -241,7 +241,7 @@ watch(props.initValue, (newValue: any) => {
})
defineExpose({
resetModel,
reset: resetModel,
formValidate,
setItemValue,
setData

2
src/components/PermissionButton/index.vue
View File

@ -25,7 +25,7 @@
<a-button v-else v-bind="buttonProps" :disabled="_isPermission"></a-button>
</a-tooltip>
</template>
<script setup lang="ts">
<script setup lang="ts" name="PermissionButton">
import type { ButtonProps, TooltipProps, PopconfirmProps } from 'ant-design-vue'
import { usePermissionStore } from '@/store/permission';

71
src/components/RadioCard/index.vue Normal file
View File

@ -0,0 +1,71 @@
<!-- 单选卡片 -->
<template>
<div class="m-radio">
<div
class="m-radio-item"
:class="{ active: myValue === item.value }"
v-for="(item, index) in options"
:key="index"
@click="myValue = item.value"
>
<img class="img" :src="item.logo" alt="" />
<span>{{ item.label }}</span>
</div>
</div>
</template>
<script setup lang="ts">
import { PropType } from 'vue';
interface IOption {
label: string;
value: string;
logo: string;
}
type Emits = {
(e: 'update:modelValue', data: string): void;
};
const emit = defineEmits<Emits>();
const props = defineProps({
options: {
type: Array as PropType<IOption[]>,
default: () => [],
},
modelValue: {
type: String,
default: '',
},
});
const myValue = computed({
get: () => props.modelValue,
set: (val) => emit('update:modelValue', val),
});
</script>
<style lang="less" scoped>
.m-radio {
display: flex;
&-item {
padding: 10px 15px;
margin-right: 15px;
border: 1px solid #d9d9d9;
border-radius: 2px;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
cursor: pointer;
.img {
width: 100px;
height: 100px;
}
&.active {
color: #1d39c4;
border-color: #1d39c4;
}
}
}
</style>

125
src/components/Search/Item.vue Normal file
View File

@ -0,0 +1,125 @@
<template>
<div class='JSearch-item'>
<div class='JSearch-item--type'>
<a-select
v-if='index !== 1 && index !== 4'
:options='typeOptions'
v-model:value='termsModel.type'
style='width: 100%;'
/>
<span v-else>
{{
index === 1 ? '第一组' : '第二组'
}}
</span>
</div>
<a-select
class='JSearch-item--column'
:options='columnOptions'
v-model:value='termsModel.column'
/>
<a-select
class='JSearch-item--termType'
:options='termTypeOptions'
v-model:value='termsModel.termType'
/>
<div class='JSearch-item--value'>
<a-input
v-if='component === componentType.input'
v-model:value='termsModel.value'
/>
<a-select
v-else-if='component === componentType.select'
v-model:value='termsModel.value'
:options='options'
/>
<a-inputnumber
v-else-if='component === componentType.inputNumber'
v-model:value='termsModel.value'
/>
<a-input-password
v-else-if='component === componentType.password'
v-model:value='termsModel.value'
/>
<a-switch
v-else-if='component === componentType.switch'
v-model:checked='termsModel.value'
/>
<a-radio-group
v-else-if='component === componentType.radio'
v-model:value='termsModel.value'
/>
<a-checkbox-group
v-else-if='component === componentType.checkbox'
v-model:value='termsModel.value'
:options='options'
/>
<a-time-picker
v-else-if='component === componentType.time'
v-model:value='termsModel.value'
/>
<a-date-picker
v-else-if='component === componentType.date'
v-model:value='termsModel.value'
/>
<a-tree-select
v-else-if='component === componentType.tree'
v-model:value='termsModel.value'
:tree-data='options'
/>
</div>
</div>
</template>
<script setup lang='ts' name='SearchItem'>
import { componentType } from 'components/Form'
import { typeOptions } from './util'
const props = defineProps({
component: {
type: String,
default: componentType.input
},
index: {
type: Number,
default: 1
}
})
const termsModel = reactive({})
const options = ref([])
const columnOptions = reactive([])
const termTypeOptions = reactive([])
</script>
<style scoped lang='less'>
.JSearch-item {
display: flex;
gap: 16px;
.JSearch-item--type {
min-width: 120px;
> span {
line-height: 34px;
font-weight: bold;
}
}
.JSearch-item--column {
min-width: 120px;
}
.JSearch-item--termType {
min-width: 120px;
}
.JSearch-item--value {
flex: 1 1 auto;
}
}
</style>

72
src/components/Search/Search.vue Normal file
View File

@ -0,0 +1,72 @@
<template>
<div class='JSearch-content'>
<div class='left'>
<SearchItem :index='1' />
<SearchItem :index='2' />
<SearchItem :index='3' />
</div>
<div class='center'>
<a-select
:options='typeOptions'
/>
</div>
<div class='right'>
<SearchItem :index='4' />
<SearchItem :index='5' />
<SearchItem :index='6' />
</div>
</div>
</template>
<script setup lang='ts' name='Search'>
import SearchItem from './Item.vue'
import { typeOptions } from './util'
const props = defineProps({
defaultParams: {
type: Object,
default: () => ({})
},
columns: {
type: Array,
default: () => []
},
type: {
type: String,
default: 'advanced'
},
key: {
type: String,
default: '',
required: true
}
})
const searchParams = reactive({
data: {}
})
</script>
<style scoped lang='less'>
.JSearch-content {
display: flex;
gap: 16px;
.left, & .right {
display: flex;
gap: 16px;
flex-direction: column;
width: 0;
flex-grow: 1;
min-width: 0;
}
.center {
display: flex;
flex-direction: column;
justify-content: center;
flex-basis: 120px;
}
}
</style>

3
src/components/Search/index.ts Normal file
View File

@ -0,0 +1,3 @@
import Search from './Search.vue'
export default Search

4
src/components/Search/util.ts Normal file
View File

@ -0,0 +1,4 @@
export const typeOptions = [
{ label: '或者', value: 'or' },
{ label: '并且', value: 'and' },
]

52
src/components/Table/index.module.less Normal file
View File

@ -0,0 +1,52 @@
.jtable-body {
width: 100%;
padding: 0 24px 24px;
background-color: white;
.jtable-body-header {
padding: 16px 0;
display: flex;
justify-content: space-between;
align-items: center;
.jtable-body-header-right {
display: flex;
gap: 8px;
.jtable-setting-item {
color: rgba(0, 0, 0, 0.75);
font-size: 16px;
cursor: pointer;
&:hover {
color: @primary-color-hover;
}
&.active {
color: @primary-color-active;
}
}
}
}
.jtable-content {
.jtable-alert {
margin-bottom: 16px;
}
.jtable-card {
.jtable-card-items {
display: grid;
grid-gap: 26px;
.jtable-card-item {
display: flex;
}
}
}
}
.jtable-pagination {
margin-top: 20px;
display: flex;
justify-content: flex-end;
:global {
.ant-pagination-item {
display: none !important;
}
}
}
}

313
src/components/Table/index.tsx Normal file
View File

@ -0,0 +1,313 @@
import { UnorderedListOutlined, AppstoreOutlined } from '@ant-design/icons-vue'
import styles from './index.module.less'
import { Pagination, Table, Empty, Spin, Alert } from 'ant-design-vue'
import type { TableProps, ColumnProps } from 'ant-design-vue/es/table'
import type { TooltipProps } from 'ant-design-vue/es/tooltip'
import type { PopconfirmProps } from 'ant-design-vue/es/popconfirm'
import { CSSProperties, PropType } from 'vue';
enum ModelEnum {
TABLE = 'TABLE',
CARD = 'CARD',
}
type RequestData = {
code: string;
result: {
data: Record<string, any>[] | undefined;
pageIndex: number;
pageSize: number;
total: number;
};
status: number;
} & Record<string, any>;
export interface ActionsType {
key: string;
text?: string;
disabled?: boolean;
permission?: boolean;
onClick?: (data: any) => void;
style?: CSSProperties;
tooltip?: TooltipProps;
popConfirm?: PopconfirmProps;
icon?: string;
}
export interface JColumnProps extends ColumnProps{
scopedSlots?: boolean; // 是否为插槽 true: 是 false: 否
}
export interface JTableProps extends TableProps{
request?: (params: Record<string, any> & {
pageSize: number;
pageIndex: number;
}) => Promise<Partial<RequestData>>;
cardBodyClass?: string;
columns: JColumnProps[];
params?: Record<string, any> & {
pageSize: number;
pageIndex: number;
};
model?: keyof typeof ModelEnum | undefined; // 显示table还是card
// 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>({
name: 'JTable',
slots: [
'headerTitle', // 顶部左边插槽
'card', // 卡片内容
],
emits: [
'modelChange', // 切换卡片和表格
],
props: {
request: {
type: Function,
default: undefined
},
cardBodyClass: {
type: String,
default: ''
},
columns: {
type: Array,
default: () => []
},
params: {
type: Object,
default: () => {}
},
model: {
type: [String, undefined],
default: undefined
},
// actions: {
// type: Array as PropType<ActionsType[]>,
// default: () => []
// },
noPagination: {
type: Boolean,
default: false
},
rowSelection: {
type: Object as PropType<TableProps['rowSelection']>,
default: () => undefined
},
cardProps: {
type: Object,
default: undefined
},
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>(props.gridColumn || 4);
const _dataSource = ref<Record<string, any>[]>([])
const pageIndex = ref<number>(0)
const pageSize = ref<number>(6)
const total = ref<number>(0)
const _columns = ref<JColumnProps[]>(props?.columns || [])
const loading = ref<boolean>(true)
/**
* 监听宽度，计算显示卡片个数
*/
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
}
}
/**
* 请求数据
*/
const handleSearch = async (_params?: Record<string, any>) => {
loading.value = true
if(props.request) {
const resp = await props.request({
pageSize: 12,
pageIndex: 1,
..._params
})
if(resp.status === 200){
// 判断如果是最后一页且最后一页为空，就跳转到前一页
if(resp.result?.data?.length === 0 && resp.result.total && resp.result.pageSize && resp.result.pageIndex) {
handleSearch({
..._params,
pageSize: pageSize.value,
pageIndex: pageIndex.value - 1,
})
} else {
_dataSource.value = resp.result?.data || []
pageIndex.value = resp.result?.pageIndex || 0
pageSize.value = resp.result?.pageSize || 6
total.value = resp.result?.total || 0
}
}
} 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"]}>
<div class={styles["jtable-body-header"]}>
<div class={styles["jtable-body-header-left"]}>
{/* 顶部左边插槽 */}
{slots.headerTitle && slots.headerTitle()}
</div>
<div class={styles["jtable-body-header-right"]}>
<div class={[styles["jtable-setting-item"], ModelEnum.CARD === _model.value ? styles['active'] : '']} onClick={() => {
_model.value = ModelEnum.CARD
}}>
<AppstoreOutlined />
</div>
<div class={[styles["jtable-setting-item"], ModelEnum.TABLE === _model.value ? styles['active'] : '']} onClick={() => {
_model.value = ModelEnum.TABLE
}}>
<UnorderedListOutlined />
</div>
</div>
</div>
{/* content */}
<div class={styles['jtable-content']}>
{
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={() => {
emit('cancelSelect')
}}
closeText={<a>取消选择</a>}
/>
</div> : null
}
{
_model.value === ModelEnum.CARD ?
<div class={styles['jtable-card']}>
{
_dataSource.value.length ?
<div
class={styles['jtable-card-items']}
style={{gridTemplateColumns: `repeat(${column.value}, 1fr)`}}
>
{
_dataSource.value.map(item => slots.card ?
<div class={[styles['jtable-card-item'], props.cardBodyClass]}>
{slots.card(item)}
</div> : null
)
}
</div> :
<div><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /></div>
}
</div> :
<div>
<Table
dataSource={_dataSource.value}
columns={_columns.value}
pagination={false}
rowKey="id"
rowSelection={props.rowSelection}
scroll={{x: 1366}}
v-slots={{
bodyCell: (dt: Record<string, any>) => {
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]!(record)
} else {
return record?.[column?.dataIndex] || ''
}
}
}}
/>
</div>
}
</div>
{/* 分页 */}
{
_dataSource.value.length && !props.noPagination &&
<div class={styles['jtable-pagination']}>
<Pagination
size="small"
total={total.value}
showQuickJumper={false}
showSizeChanger={true}
current={pageIndex.value}
pageSize={pageSize.value}
pageSizeOptions={['12', '24', '48', '60', '100']}
showTotal={(total, range) => {
return `第 ${range[0]} - ${range[1]} 条/总共 ${total} 条`
}}
onChange={(page, size) => {
handleSearch({
...props.params,
pageSize: size,
pageIndex: pageSize.value === size ? page : 1,
})
}}
/>
</div>
}
</div>
</Spin>
}
})
export default JTable

4
src/components/Table/index.vue
View File

@ -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>
@ -79,7 +79,7 @@
</a-spin>
</template>
<script setup lang="ts">
<script setup lang="ts" name="JTable">
import { UnorderedListOutlined, AppstoreOutlined } from '@ant-design/icons-vue'
import type { TableProps, ColumnsType } from 'ant-design-vue/es/table'
import type { TooltipProps } from 'ant-design-vue/es/tooltip'

4
src/components/index.ts
View File

@ -1,10 +1,11 @@
import type { App } from 'vue'
import AIcon from './AIcon'
import PermissionButton from './PermissionButton/index.vue'
import JTable from './Table/index.vue'
import JTable from './Table/index'
import TitleComponent from "./TitleComponent/index.vue";
import Form from './Form';
import CardBox from './CardBox/index.vue';
import Search from './Search'
export default {
install(app: App) {
@ -14,5 +15,6 @@ export default {
.component('TitleComponent', TitleComponent)
.component('Form', Form)
.component('CardBox', CardBox)
.component('Search', Search)
}
}

3
src/global.d.ts vendored
View File

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

2
src/main.ts
View File

@ -3,7 +3,7 @@ import App from './App.vue'
import store from './store'
import router from './router'
import components from './components'
import './style.css'
import './style.less'
import 'ant-design-vue/es/notification/style/css';
import Antd from 'ant-design-vue/es'

8
src/router/index.ts
View File

@ -8,9 +8,15 @@ const router = createRouter({
routes: menus
})
const filterPath = [
'/form',
'/search'
]
router.beforeEach((to, from, next) => {
const token = LocalStore.get(TOKEN_KEY)
if (token) {
if (token || filterPath.includes(to.path)) {
next()
} else {
if (to.path === LoginPath) {

32
src/router/menu.ts
View File

@ -44,6 +44,26 @@ export default [
path: '/form',
component: () => import('@/views/demo/Form.vue')
},
{
path: '/search',
component: () => import('@/views/demo/Search.vue')
},
{
path: '/notice/Config',
component: () => import('@/views/notice/Config/index.vue')
},
{
path: '/notice/Config/detail/:id',
component: () => import('@/views/notice/Config/Detail/index.vue')
},
{
path: '/notice/Template',
component: () => import('@/views/notice/Template/index.vue')
},
{
path: '/notice/Template/detail/:id',
component: () => import('@/views/notice/Template/Detail/index.vue')
},
// end: 测试用, 可删除
// link 运维管理
@ -67,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')
},
},
// 物联卡 iot-card
{
path: '/iot-card/home',
component: () => import('@/views/iot-card/Home/index.vue')
},
]

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

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

0
src/style.css → src/style.less
View File

23
src/utils/request.ts
View File

@ -26,23 +26,24 @@ export const request = axios.create({
* @param {String} responseType 如果接口是需要导出文件流，那么responseType = 'blob'
* @returns {AxiosInstance}
*/
export const post = function(url: string, data = {}, params = {}) {
export const post = function<T>(url: string, data = {}, params = {}) {
params = typeof params === 'string' ? { responseType: params } : params
return request({
return request<any, AxiosResponseRewrite<T>>({
...params,
method: 'POST',
url,
data
})
}
/**
* put method request
* @param {String} url
* @param {Object} [data]
* @returns {AxiosInstance}
*/
export const put = function(url: string, data = {},) {
return request({
export const put = function<T>(url: string, data = {},) {
return request<any, AxiosResponseRewrite<T>>({
method: 'PUT',
url,
data
@ -55,8 +56,8 @@ export const put = function(url: string, data = {},) {
* @param {Object} [data]
* @returns {AxiosInstance}
*/
export const patch = function(url: string, data = {}) {
return request({
export const patch = function<T>(url: string, data = {}) {
return request<any, AxiosResponseRewrite<T>>({
method: 'PATCH',
url,
data
@ -69,8 +70,8 @@ export const patch = function(url: string, data = {}) {
* @param {Object} [ext] 扩展参数
* @returns {AxiosInstance}
*/
export const get = function(url: string, params = {}, ext?: any) {
return request({
export const get = function<T>(url: string, params = {}, ext?: any) {
return request<any, AxiosResponseRewrite<T>>({
method: 'GET',
url,
params,
@ -85,8 +86,8 @@ export const get = function(url: string, params = {}, ext?: any) {
* @param {Object} [ext] 扩展参数
* @returns {AxiosInstance}
*/
export const remove = function(url: string, params = {}, ext?: any) {
return request({
export const remove = function<T>(url: string, params = {}, ext?: any) {
return request<any, AxiosResponseRewrite<T>>({
method: 'DELETE',
url,
params,
@ -101,7 +102,7 @@ export const remove = function(url: string, params = {}, ext?: any) {
* @return {*}
*/
export const getStream = function(url: string, params = {}) {
return get(url, params, {
return get<any>(url, params, {
responseType: 'arraybuffer' // 设置请求数据类型，返回blob可解析类型
})
}

2
src/views/demo/Form.vue
View File

@ -21,7 +21,7 @@ const submit = () => {
}
const reset = () => {
form.value.reset()
}
const setValue =() => {

15
src/views/demo/Search.vue Normal file
View File

@ -0,0 +1,15 @@
<template>
<div class='search'>
<Search />
</div>
</template>
<script>
</script>
<style scoped>
.search {
width: calc(100% - 330px);
}
</style>

156
src/views/demo/table/index.vue
View File

@ -1,32 +1,7 @@
<template>
<div class="box">
<JTable
:columns="[
{
title: '名称',
dataIndex: 'name',
key: 'name',
},
{
title: 'ID',
dataIndex: 'id',
key: 'id',
scopedSlots: true
},
{
title: '分类',
dataIndex: 'classifiedName',
key: 'classifiedName',
},
{
title: '操作',
key: 'action',
fixed: 'right',
width: 250,
scopedSlots: true
}
]"
:actions="actions"
:columns="columns"
:request="request"
:rowSelection="{
selectedRowKeys: _selectedRowKeys,
@ -38,7 +13,14 @@
<a-button type="primary">新增</a-button>
</template>
<template #card="slotProps">
<CardBox :value="slotProps" @click="handleClick" :actions="actions" v-bind="slotProps" :active="_selectedRowKeys.includes(slotProps.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')" />
@ -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 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)">
<AIcon :type="i.icon" />
<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>

9
src/views/demo/test.tsx Normal file
View File

@ -0,0 +1,9 @@
import { Button } from 'ant-design-vue'
export default defineComponent({
setup(){
return () => <div>
<Button type='primary'>新增</Button>
</div>
}
})

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

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

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

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

5
src/views/home/components/StepCard.vue
View File

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

34
src/views/home/components/dialogs/FuncTestDialog.vue
View File

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

4
src/views/home/index.vue
View File

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

541
src/views/iot-card/Home/index.vue Normal file
View File

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

55
src/views/iot-card/components/Guide.vue Normal file
View File

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

79
src/views/link/AccessConfig/Detail/index.vue
View File

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

162
src/views/link/AccessConfig/components/AccessCard/index.vue
View File

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

30
src/views/link/AccessConfig/components/Media/index.vue Normal file
View File

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

485
src/views/link/AccessConfig/components/Network.vue
View File

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

60
src/views/link/AccessConfig/components/Provider/index.vue
View File

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

87
src/views/notice/Config/Detail/components/EditTable.vue Normal file
View File

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

413
src/views/notice/Config/Detail/index.vue Normal file
View File

@ -0,0 +1,413 @@
<!-- 通知配置详情 -->
<template>
<div class="page-container">
<a-card>
<a-row>
<a-col :span="10">
<a-form layout="vertical">
<a-form-item
label="通知方式"
v-bind="validateInfos.type"
>
<a-select
v-model:value="formData.type"
placeholder="请选择通知方式"
>
<a-select-option
v-for="(item, index) in NOTICE_METHOD"
:key="index"
:value="item.value"
>
{{ item.label }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="名称" v-bind="validateInfos.name">
<a-input
v-model:value="formData.name"
placeholder="请输入名称"
/>
</a-form-item>
<a-form-item
label="类型"
v-bind="validateInfos.provider"
v-if="formData.type !== 'email'"
>
<RadioCard
:options="msgType"
v-model="formData.provider"
/>
</a-form-item>
<!-- 钉钉 -->
<template v-if="formData.type === 'dingTalk'">
<template
v-if="formData.provider === 'dingTalkMessage'"
>
<a-form-item
label="AppKey"
v-bind="
validateInfos['configuration.appKey']
"
>
<a-input
v-model:value="
formData.configuration.appKey
"
placeholder="请输入AppKey"
/>
</a-form-item>
<a-form-item
label="AppSecret"
v-bind="
validateInfos['configuration.appSecret']
"
>
<a-input
v-model:value="
formData.configuration.appSecret
"
placeholder="请输入AppSecret"
/>
</a-form-item>
</template>
<template
v-if="
formData.provider === 'dingTalkRobotWebHook'
"
>
<a-form-item
label="webHook"
v-bind="validateInfos['configuration.url']"
>
<a-input
v-model:value="
formData.configuration.url
"
placeholder="请输入webHook"
/>
</a-form-item>
</template>
</template>
<!-- 微信 -->
<template v-if="formData.type === 'weixin'">
<a-form-item
label="corpId"
v-bind="validateInfos['configuration.corpId']"
>
<a-input
v-model:value="
formData.configuration.corpId
"
placeholder="请输入corpId"
/>
</a-form-item>
<a-form-item
label="corpSecret"
v-bind="
validateInfos['configuration.corpSecret']
"
>
<a-input
v-model:value="
formData.configuration.corpSecret
"
placeholder="请输入corpSecret"
/>
</a-form-item>
</template>
<!-- 邮件 -->
<template v-if="formData.type === 'email'">
<a-form-item
label="服务器地址"
v-bind="validateInfos['configuration.host']"
>
<a-space>
<a-input
v-model:value="
formData.configuration.host
"
placeholder="请输入服务器地址"
/>
<a-input-number
v-model:value="
formData.configuration.port
"
/>
<a-checkbox
v-model:value="
formData.configuration.ssl
"
>
开启SSL
</a-checkbox>
</a-space>
</a-form-item>
<a-form-item
label="发件人"
v-bind="validateInfos['configuration.sender']"
>
<a-input
v-model:value="
formData.configuration.sender
"
placeholder="请输入发件人"
/>
</a-form-item>
<a-form-item
label="用户名"
v-bind="validateInfos['configuration.username']"
>
<a-input
v-model:value="
formData.configuration.username
"
placeholder="请输入用户名"
/>
</a-form-item>
<a-form-item
label="密码"
v-bind="validateInfos['configuration.password']"
>
<a-input
v-model:value="
formData.configuration.password
"
placeholder="请输入密码"
/>
</a-form-item>
</template>
<!-- 语音/短信 -->
<template
v-if="
formData.type === 'voice' ||
formData.type === 'sms'
"
>
<a-form-item
label="RegionId"
v-bind="validateInfos['configuration.regionId']"
>
<a-select
v-model:value="
formData.configuration.regionId
"
placeholder="请选择RegionId"
>
<a-select-option
v-for="(item, index) in regionList"
:key="index"
:value="item.value"
>
{{ item.label }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item
label="AccessKeyId"
v-bind="
validateInfos['configuration.accessKeyId']
"
>
<a-input
v-model:value="
formData.configuration.accessKeyId
"
placeholder="请输入AccessKeyId"
/>
</a-form-item>
<a-form-item
label="Secret"
v-bind="validateInfos['configuration.secret']"
>
<a-input
v-model:value="
formData.configuration.secret
"
placeholder="Secret"
/>
</a-form-item>
</template>
<!-- webhook -->
<template v-if="formData.type === 'webhook'">
<a-form-item
label="Webhook"
v-bind="validateInfos['configuration.url']"
>
<a-input
v-model:value="formData.configuration.url"
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
v-model:value="formData.description"
show-count
:maxlength="200"
:rows="5"
placeholder="请输入说明"
/>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 3 }">
<a-button
type="primary"
@click="handleSubmit"
style="width: 100%"
>
保存
</a-button>
</a-form-item>
</a-form>
</a-col>
<a-col :span="12" :push="2"></a-col>
</a-row>
</a-card>
</div>
</template>
<script setup lang="ts">
import { getImage, LocalStore } from '@/utils/comm';
import { Form } from 'ant-design-vue';
import { message } from 'ant-design-vue';
import { ConfigFormData } from '../types';
import {
NOTICE_METHOD,
CONFIG_FIELD_MAP,
MSG_TYPE,
} from '@/views/notice/const';
import regionList from './regionId';
import EditTable from './components/EditTable.vue'
const useForm = Form.useForm;
// 消息类型
const msgType = ref([
{
label: '钉钉消息',
value: 'dingTalkMessage',
logo: getImage('/notice/dingtalk.png'),
},
{
label: '群机器人消息',
value: 'dingTalkRobotWebHook',
logo: getImage('/notice/dingTalk-rebot.png'),
},
]);
// 表单数据
const formData = ref<ConfigFormData>({
configuration: {
appKey: '',
appSecret: '',
url: '',
},
description: '',
name: '',
provider: 'dingTalkMessage',
type: NOTICE_METHOD[0].value,
});
// 根据通知方式展示对应的字段
watch(
() => formData.value.type,
(val) => {
formData.value.configuration = CONFIG_FIELD_MAP[val];
msgType.value = MSG_TYPE[val];
formData.value.provider = msgType.value[0].value;
},
);
// 验证规则
const formRules = ref({
type: [{ required: true, message: '请选择通知方式' }],
name: [
{ required: true, message: '请输入名称' },
{ max: 64, message: '最多可输入64个字符' },
],
provider: [{ required: true, message: '请选择类型' }],
// 钉钉
'configuration.appKey': [
{ required: true, message: '请输入AppKey' },
{ max: 64, message: '最多可输入64个字符' },
],
'configuration.appSecret': [
{ required: true, message: '请输入AppSecret' },
{ max: 64, message: '最多可输入64个字符' },
],
// 'configuration.url': [{ required: true, message: '请输入WebHook' }],
// 微信
'configuration.corpId': [
{ required: true, message: '请输入corpId' },
{ max: 64, message: '最多可输入64个字符' },
],
'configuration.corpSecret': [
{ required: true, message: '请输入corpSecret' },
{ max: 64, message: '最多可输入64个字符' },
],
// 阿里云语音/短信
'configuration.regionId': [
{ required: true, message: '请输入RegionId' },
{ max: 64, message: '最多可输入64个字符' },
],
'configuration.accessKeyId': [
{ required: true, message: '请输入AccessKeyId' },
{ max: 64, message: '最多可输入64个字符' },
],
'configuration.secret': [
{ required: true, message: '请输入Secret' },
{ max: 64, message: '最多可输入64个字符' },
],
// 邮件
'configuration.host': [{ required: true, message: '请输入服务器地址' }],
'configuration.sender': [{ required: true, message: '请输入发件人' }],
'configuration.username': [
{ required: true, message: '请输入用户名' },
{ max: 64, message: '最多可输入64个字符' },
],
'configuration.password': [
{ required: true, message: '请输入密码' },
{ max: 64, message: '最多可输入64个字符' },
],
// webhook
'configuration.url': [
{ required: true, message: '请输入Webhook' },
{
pattern:
/^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/,
message: 'Webhook需要是一个合法的URL',
trigger: 'blur',
},
],
description: [{ max: 200, message: '最多可输入200个字符' }],
});
const { resetFields, validate, validateInfos } = useForm(
formData.value,
formRules.value,
);
console.log('validateInfos: ', validateInfos);
/**
* 表单提交
*/
const handleSubmit = () => {
validate()
.then(async () => {})
.catch((err) => {});
};
</script>
<style lang="less" scoped>
.page-container {
background: #f0f2f5;
padding: 24px;
}
</style>

119
src/views/notice/Config/Detail/regionId.ts Normal file
View File

@ -0,0 +1,119 @@
// 数据来源 https://help.aliyun.com/document_detail/188196.html
export default [
/** 公共云 */
//中国地区（包含中国香港、中国澳门，不包含中国台湾）
{
value: 'cn-qingdao',
label: '华北1（青岛）',
},
{
value: 'cn-beijing',
label: '华北2（北京）',
},
{
value: 'cn-zhangjiakou',
label: '华北3（张家口）',
},
{
value: 'cn-huhehaote',
label: '华北5（呼和浩特）',
},
{
value: 'cn-wulanchabu',
label: '华北6（乌兰察布）',
},
{
value: 'cn-hangzhou',
label: '华东1（杭州）',
},
{
value: 'cn-shanghai',
label: '华东2（上海）',
},
{
value: 'cn-nanjing',
label: '华东5 （南京-本地地域）',
},
{
value: 'cn-fuzhou',
label: '华东6（福州-本地地域）',
},
{
value: 'cn-shenzhen',
label: '华南1（深圳）',
},
{
value: 'cn-heyuan',
label: '华南2（河源）',
},
{
value: 'cn-guangzhou',
label: '华南3（广州）',
},
{
value: 'cn-chengdu',
label: '西南1（成都）',
},
{
value: 'cn-hongkong',
label: '中国香港',
},
//其他国家和地区
{
value: 'ap-southeast-1',
label: '新加坡',
},
{
value: 'ap-southeast-2',
label: '澳大利亚（悉尼）',
},
{
value: 'ap-southeast-3',
label: '马来西亚（吉隆坡）',
},
{
value: 'ap-southeast-5',
label: '印度尼西亚（雅加达）',
},
{
value: 'ap-southeast-6',
label: '菲律宾（马尼拉）',
},
{
value: 'ap-southeast-7',
label: '泰国（曼谷）',
},
{
value: 'ap-south-1',
label: '印度（孟买）',
},
{
value: 'ap-northeast-1',
label: '日本（东京）',
},
{
value: 'ap-northeast-2',
label: '韩国（首尔）',
},
{
value: 'us-west-1',
label: '美国（硅谷）',
},
{
value: 'us-east-1',
label: '美国（弗吉尼亚）',
},
{
value: 'eu-central-1',
label: '德国（法兰克福）',
},
{
value: 'eu-west-1',
label: '英国（伦敦）',
},
{
value: 'me-east-1',
label: '阿联酋（迪拜）',
},
];

8
src/views/notice/Config/index.vue Normal file
View File

@ -0,0 +1,8 @@
<!-- 通知配置 -->
<template>
<div class="page-container">通知配置</div>
</template>
<script setup lang="ts"></script>
<style lang="less" scoped></style>

37
src/views/notice/Config/types.d.ts vendored Normal file
View File

@ -0,0 +1,37 @@
interface IHeaders {
key: string;
value: string;
}
export type ConfigFormData = {
configuration: {
// 钉钉
appKey?: string;
appSecret?: string;
url?: string;
// 微信
corpId?: string;
corpSecret?: string;
// 邮件
host?: string;
port?: number;
ssl?: boolean;
sender?: string;
username?: string;
password?: string;
// 语音
regionId?: string;
accessKeyId?: string;
secret?: string;
// 短信
regionId?: string;
accessKeyId?: string;
secret?: string;
// webhook
// url?: string;
headers?: IHeaders[];
};
description: string;
name: string;
provider: string;
type: string;
};

8
src/views/notice/Template/Detail/index.vue Normal file
View File

@ -0,0 +1,8 @@
<!-- 通知模板详情 -->
<template>
<div class="page-container">通知模板详情</div>
</template>
<script setup lang="ts"></script>
<style lang="less" scoped></style>

8
src/views/notice/Template/index.vue Normal file
View File

@ -0,0 +1,8 @@
<!-- 通知模板 -->
<template>
<div class="page-container">通知模板</div>
</template>
<script setup lang="ts"></script>
<style lang="less" scoped></style>

126
src/views/notice/const.ts Normal file
View File

@ -0,0 +1,126 @@
import { getImage } from '@/utils/comm';
interface INoticeMethod {
label: string;
value: string;
}
// 通知方式
export const NOTICE_METHOD: INoticeMethod[] = [
{
label: '钉钉',
value: 'dingTalk',
},
{
label: '微信',
value: 'weixin',
},
{
label: '邮件',
value: 'email',
},
{
label: '语音',
value: 'voice',
},
{
label: '短信',
value: 'sms',
},
{
label: 'webhook',
value: 'webhook',
},
];
// 消息类型
export const MSG_TYPE = {
dingTalk: [
{
label: '钉钉消息',
value: 'dingTalkMessage',
logo: getImage('/notice/dingtalk.png'),
},
{
label: '群机器人消息',
value: 'dingTalkRobotWebHook',
logo: getImage('/notice/dingTalk-rebot.png'),
},
],
weixin: [
{
label: '企业消息',
value: 'corpMessage',
logo: getImage('/notice/weixin-corp.png'),
},
// {
// label: '服务号消息',
// value: 'officialMessage'
// logo: getImage('/notice/weixin-official.png'),
// }
],
voice: [
{
label: '阿里云语音',
value: 'aliyun',
logo: getImage('/notice/voice.png'),
},
],
sms: [
{
label: '阿里云短信',
value: 'aliyunSms',
logo: getImage('/notice/sms.png'),
},
],
webhook: [
{
label: 'webhook',
value: 'http',
logo: getImage('/notice/webhook.png'),
},
],
email: [
{
label: 'email',
value: 'embedded',
logo: getImage('/notice/email.png'),
},
],
}
// 字段关系映射
// 配置
export const CONFIG_FIELD_MAP = {
dingTalk: {
appKey: undefined,
appSecret: undefined,
url: undefined,
},
weixin: {
corpId: undefined,
corpSecret: undefined,
},
email: {
host: undefined,
port: 25,
ssl: false,
sender: undefined,
username: undefined,
password: undefined,
},
voice: {
regionId: undefined,
accessKeyId: undefined,
secret: undefined,
},
sms: {
regionId: undefined,
accessKeyId: undefined,
secret: undefined,
},
webhook: {
url: undefined,
headers: [],
},
};

203
src/views/system/apiPage/components/ApiDoes.vue
View File

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

11
src/views/system/apiPage/components/ApiTest.vue
View File

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

6
src/views/system/apiPage/components/ChooseApi.vue
View File

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

3
src/views/system/apiPage/components/LeftTree.vue
View File

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

5
src/views/system/apiPage/index.d.ts vendored
View File

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

13
src/views/system/apiPage/index.vue
View File

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

53
src/views/user/Login/index.vue
View File

@ -9,7 +9,6 @@
/>
</div>
<div class="right">
<div class="lang" data-lang=""></div>
<div class="content">
<div class="top">
<div class="header">
@ -109,17 +108,13 @@
</a-button>
</a-form-item>
</a-form>
<div style="margin-top: 20px">
<a-divider plain style="height: 12px">
<div
style="color: #807676d9, font-size: 12px"
>
<div class="other">
<a-divider plain>
<div class="other-text">
其他方式登录
</div>
</a-divider>
<div
style="position: relative, bottom: 10px; text-align: center"
>
<div class="other-button">
<a-button
v-for="(item, index) in bindings"
:key="index"
@ -312,8 +307,6 @@ screenRotation(screenWidth.value, screenHeight.value);
</script>
<style scoped lang="less">
@import 'ant-design-vue/es/style/themes/default.less';
.container {
display: flex;
height: 100vh;
@ -336,22 +329,12 @@ screenRotation(screenWidth.value, screenHeight.value);
background: #fff;
}
.lang {
width: 100%;
height: 40px;
line-height: 44px;
text-align: right;
:global(.ant-dropdown-trigger) {
margin-right: 24px;
}
}
.content {
display: flex;
flex-direction: row-reverse;
justify-content: center;
padding: 0 0 15% 0;
margin-top: 20%;
.top {
width: 100%;
@ -404,17 +387,6 @@ screenRotation(screenWidth.value, screenHeight.value);
max-width: 328px;
}
// ::v-deep {
// .@{ant-prefix}-tabs-nav-list {
// margin: auto;
// font-size: 16px;
// }
// // .ant-formily-item-size-large .ant-formily-item-help {
// // text-align: left;
// // }
// }
.icon {
margin-left: 16px;
color: rgba(0, 0, 0, 0.2);
@ -429,12 +401,17 @@ screenRotation(screenWidth.value, screenHeight.value);
}
.other {
margin-top: 24px;
line-height: 22px;
text-align: left;
margin-top: 20px;
.register {
float: right;
.other-text {
color: #807676d9;
font-size: 12px;
}
.other-button {
position: relative;
bottom: 10px;
text-align: center;
}
}

6
tsconfig.json
View File

@ -16,7 +16,11 @@
"allowJs": true,
"baseUrl": "./",
"paths": {
"@/*": ["./src/*"]
"@/*": ["./src/*"],
"components/*": ["./src/components/*"],
"layouts/*": ["./src/layouts/*"],
"store/*": ["./src/store/*"],
"style/*": ["./src/style/*"],
},
"types": ["ant-design-vue/typings/global"],
"suppressImplicitAnyIndexErrors": true

11
vite.config.ts
View File

@ -8,7 +8,7 @@ import { createHtmlPlugin } from 'vite-plugin-html'
import Config from './config/config'
import {VueAmapResolver} from '@vuemap/unplugin-resolver'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
import { createStyleImportPlugin, AndDesignVueResolve } from 'vite-plugin-style-import'
import * as path from 'path'
@ -20,7 +20,7 @@ export default defineConfig(({ mode}) => {
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
'styles': path.resolve(__dirname, 'src/style'),
'style': path.resolve(__dirname, 'src/style'),
'layouts': path.resolve(__dirname, 'src/layouts'),
'components': path.resolve(__dirname, 'src/components'),
'store': path.resolve(__dirname, 'src/store'),
@ -69,7 +69,10 @@ export default defineConfig(({ mode}) => {
}
}
}),
VueSetupExtend()
VueSetupExtend(),
createStyleImportPlugin({
resolves: [AndDesignVueResolve()]
})
],
server: {
host:'0.0.0.0',
@ -89,8 +92,8 @@ export default defineConfig(({ mode}) => {
preprocessorOptions: {
less: {
modifyVars: {
hack: `true; @import (reference) "${path.resolve('src/style/variable.less')}";`,
...Config.theme,
hack: `true; @import (reference) "${path.resolve('src/style/variable.less')}";`
},
javascriptEnabled: true,
}

116
yarn.lock
View File

@ -578,6 +578,14 @@
"@nodelib/fs.scandir" "2.1.5"
"fastq" "^1.6.0"
"@rollup/pluginutils@^4.1.2":
"integrity" "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ=="
"resolved" "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz"
"version" "4.2.1"
dependencies:
"estree-walker" "^2.0.1"
"picomatch" "^2.2.2"
"@rollup/pluginutils@^4.2.0":
"integrity" "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ=="
"resolved" "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz"
@ -1251,6 +1259,15 @@
"resolved" "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001441.tgz"
"version" "1.0.30001441"
"capital-case@^1.0.4":
"integrity" "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A=="
"resolved" "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz"
"version" "1.0.4"
dependencies:
"no-case" "^3.0.4"
"tslib" "^2.0.3"
"upper-case-first" "^2.0.2"
"capture-stack-trace@^1.0.0":
"integrity" "sha512-X/WM2UQs6VMHUtjUDnZTRI+i1crWteJySFzr9UpGoQa4WQffXVTTXuekjl7TjZRlcF2XfjgITT0HxZ9RnxeT0w=="
"resolved" "https://registry.npmmirror.com/capture-stack-trace/-/capture-stack-trace-1.0.2.tgz"
@ -1301,6 +1318,24 @@
"ansi-styles" "^4.1.0"
"supports-color" "^7.1.0"
"change-case@^4.1.2":
"integrity" "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A=="
"resolved" "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz"
"version" "4.1.2"
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"
"chardet@^0.7.0":
"integrity" "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA=="
"resolved" "https://registry.npmmirror.com/chardet/-/chardet-0.7.0.tgz"
@ -1548,6 +1583,20 @@
"resolved" "https://registry.npmjs.org/consola/-/consola-2.15.3.tgz"
"version" "2.15.3"
"console@^0.7.2":
"integrity" "sha512-+JSDwGunA4MTEgAV/4VBKwUHonP8CzJ/6GIuwPi6acKFqFfHUdSGCm89ZxZ5FfGWdZfkdgAroy5bJ5FSeN/t4g=="
"resolved" "https://registry.npmjs.org/console/-/console-0.7.2.tgz"
"version" "0.7.2"
"constant-case@^3.0.4":
"integrity" "sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ=="
"resolved" "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz"
"version" "3.0.4"
dependencies:
"no-case" "^3.0.4"
"tslib" "^2.0.3"
"upper-case" "^2.0.2"
"conventional-changelog-angular@^5.0.11":
"integrity" "sha512-i/gipMxs7s8L/QeuavPF2hLnJgH6pEZAttySB6aiQLWcX3puWDL3ACVmvBhJGxnAy52Qc15ua26BufY6KpmrVA=="
"resolved" "https://registry.npmmirror.com/conventional-changelog-angular/-/conventional-changelog-angular-5.0.13.tgz"
@ -1914,6 +1963,11 @@
dependencies:
"is-arrayish" "^0.2.1"
"es-module-lexer@^0.9.3":
"integrity" "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ=="
"resolved" "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz"
"version" "0.9.3"
"esbuild@^0.16.3":
"integrity" "sha512-eq5KcuXajf2OmivCl4e89AD3j8fbV+UTE9vczEzq5haA07U9oOTzBWlh3+6ZdjJR7Rz2QfWZ2uxZyhZxBgJ4+g=="
"resolved" "https://registry.npmjs.org/esbuild/-/esbuild-0.16.12.tgz"
@ -2137,7 +2191,7 @@
"resolved" "https://registry.npmmirror.com/fs-exists-sync/-/fs-exists-sync-0.1.0.tgz"
"version" "0.1.0"
"fs-extra@^10.0.1":
"fs-extra@^10.0.0", "fs-extra@^10.0.1":
"integrity" "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ=="
"resolved" "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz"
"version" "10.1.0"
@ -2357,6 +2411,14 @@
"resolved" "https://registry.npmjs.org/he/-/he-1.2.0.tgz"
"version" "1.2.0"
"header-case@^2.0.4":
"integrity" "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q=="
"resolved" "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz"
"version" "2.0.4"
dependencies:
"capital-case" "^1.0.4"
"tslib" "^2.0.3"
"homedir-polyfill@^1.0.0":
"integrity" "sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA=="
"resolved" "https://registry.npmmirror.com/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz"
@ -3620,6 +3682,14 @@
"no-case" "^3.0.4"
"tslib" "^2.0.3"
"path-case@^3.0.4":
"integrity" "sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg=="
"resolved" "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz"
"version" "3.0.4"
dependencies:
"dot-case" "^3.0.4"
"tslib" "^2.0.3"
"path-exists@^3.0.0":
"integrity" "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ=="
"resolved" "https://registry.npmmirror.com/path-exists/-/path-exists-3.0.0.tgz"
@ -4105,6 +4175,15 @@
dependencies:
"lru-cache" "^6.0.0"
"sentence-case@^3.0.4":
"integrity" "sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg=="
"resolved" "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz"
"version" "3.0.4"
dependencies:
"no-case" "^3.0.4"
"tslib" "^2.0.3"
"upper-case-first" "^2.0.2"
"set-blocking@^2.0.0":
"integrity" "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="
"resolved" "https://registry.npmmirror.com/set-blocking/-/set-blocking-2.0.0.tgz"
@ -4189,6 +4268,14 @@
dependencies:
"babel-code-frame" "^6.26.0"
"snake-case@^3.0.4":
"integrity" "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg=="
"resolved" "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz"
"version" "3.0.4"
dependencies:
"dot-case" "^3.0.4"
"tslib" "^2.0.3"
"source-map-js@^1.0.2":
"integrity" "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
"resolved" "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
@ -4724,6 +4811,20 @@
"semver-diff" "^3.1.1"
"xdg-basedir" "^4.0.0"
"upper-case-first@^2.0.2":
"integrity" "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg=="
"resolved" "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz"
"version" "2.0.2"
dependencies:
"tslib" "^2.0.3"
"upper-case@^2.0.2":
"integrity" "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg=="
"resolved" "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz"
"version" "2.0.2"
dependencies:
"tslib" "^2.0.3"
"uppercamelcase@^1.1.0":
"integrity" "sha512-C7YEMvhgrvTEKEEVqA7LXNID/1TvvIwYZqNIKLquS6y/MGSkRQAav9LnTTILlC1RqUM8eTVBOe1U/fnB652PRA=="
"resolved" "https://registry.npmjs.org/uppercamelcase/-/uppercamelcase-1.1.0.tgz"
@ -4809,6 +4910,19 @@
"node-html-parser" "^5.3.3"
"pathe" "^0.2.0"
"vite-plugin-style-import@^2.0.0":
"integrity" "sha512-qtoHQae5dSUQPo/rYz/8p190VU5y19rtBaeV7ryLa/AYAU/e9CG89NrN/3+k7MR8mJy/GPIu91iJ3zk9foUOSA=="
"resolved" "https://registry.npmjs.org/vite-plugin-style-import/-/vite-plugin-style-import-2.0.0.tgz"
"version" "2.0.0"
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"
"vite-plugin-vue-setup-extend@^0.4.0":
"integrity" "sha512-WMbjPCui75fboFoUTHhdbXzu4Y/bJMv5N9QT9a7do3wNMNHHqrk+Tn2jrSJU0LS5fGl/EG+FEDBYVUeWIkDqXQ=="
"resolved" "https://registry.npmmirror.com/vite-plugin-vue-setup-extend/-/vite-plugin-vue-setup-extend-0.4.0.tgz"