Compare commits
2 Commits
159b1a6a4e
...
ef2f204b0d
| Author | SHA1 | Date |
|---|---|---|
 TimSpan
|
ef2f204b0d | |
|
TimSpan
|
416588ef60 |
|
|
@ -8,10 +8,12 @@
|
||||||
"name": "management",
|
"name": "management",
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@kjgl77/datav-vue3": "^1.7.4",
|
||||||
"@vueuse/core": "^13.1.0",
|
"@vueuse/core": "^13.1.0",
|
||||||
"animate.css": "^4.1.1",
|
"animate.css": "^4.1.1",
|
||||||
"axios": "^1.8.1",
|
"axios": "^1.8.1",
|
||||||
"dayjs": "^1.11.13",
|
"dayjs": "^1.11.13",
|
||||||
|
"echarts": "^5.6.0",
|
||||||
"event-source-polyfill": "^1.0.31",
|
"event-source-polyfill": "^1.0.31",
|
||||||
"js-base64": "^3.7.7",
|
"js-base64": "^3.7.7",
|
||||||
"jsencrypt": "^3.3.2",
|
"jsencrypt": "^3.3.2",
|
||||||
|
|
@ -435,6 +437,15 @@
|
||||||
"@babel/core": "^7.0.0-0"
|
"@babel/core": "^7.0.0-0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@babel/runtime": {
|
||||||
|
"version": "7.27.1",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.27.1.tgz",
|
||||||
|
"integrity": "sha512-1x3D2xEk2fRo3PAhwQwu5UubzgiVWSXTBfWpVd2Mx2AzRqJuDJCsgaDVZ7HB5iGzDW1Hl1sWN2mFyKjmR9uAog==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=6.9.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@babel/template": {
|
"node_modules/@babel/template": {
|
||||||
"version": "7.27.0",
|
"version": "7.27.0",
|
||||||
"resolved": "https://registry.npmmirror.com/@babel/template/-/template-7.27.0.tgz",
|
"resolved": "https://registry.npmmirror.com/@babel/template/-/template-7.27.0.tgz",
|
||||||
|
|
@ -900,6 +911,52 @@
|
||||||
"node": ">=18"
|
"node": ">=18"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@jiaminghi/bezier-curve": {
|
||||||
|
"version": "0.0.9",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@jiaminghi/bezier-curve/-/bezier-curve-0.0.9.tgz",
|
||||||
|
"integrity": "sha512-u9xJPOEl6Dri2E9FfmJoGxYQY7vYJkURNX04Vj64tdi535tPrpkuf9Sm0lNr3QTKdHQh0DdNRsaa62FLQNQEEw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/runtime": "^7.5.5"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@jiaminghi/c-render": {
|
||||||
|
"version": "0.4.3",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@jiaminghi/c-render/-/c-render-0.4.3.tgz",
|
||||||
|
"integrity": "sha512-FJfzj5hGj7MLqqqI2D7vEzHKbQ1Ynnn7PJKgzsjXaZpJzTqs2Yw5OSeZnm6l7Qj7jyPAP53lFvEQNH4o4j6s+Q==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/runtime": "^7.5.5",
|
||||||
|
"@jiaminghi/bezier-curve": "*",
|
||||||
|
"@jiaminghi/color": "*",
|
||||||
|
"@jiaminghi/transition": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@jiaminghi/charts": {
|
||||||
|
"version": "0.2.18",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@jiaminghi/charts/-/charts-0.2.18.tgz",
|
||||||
|
"integrity": "sha512-K+HXaOOeWG9OOY1VG6M4mBreeeIAPhb9X+khG651AbnwEwL6G2UtcAQ8GWCq6GzhczcLwwhIhuaHqRygwHC0sA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/runtime": "^7.5.5",
|
||||||
|
"@jiaminghi/c-render": "^0.4.3"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@jiaminghi/color": {
|
||||||
|
"version": "1.1.3",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-1.1.3.tgz",
|
||||||
|
"integrity": "sha512-ZY3hdorgODk4OSTbxyXBPxAxHPIVf9rPlKJyK1C1db46a50J0reFKpAvfZG8zMG3lvM60IR7Qawgcu4ZDO3+Hg==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/@jiaminghi/transition": {
|
||||||
|
"version": "1.1.11",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@jiaminghi/transition/-/transition-1.1.11.tgz",
|
||||||
|
"integrity": "sha512-owBggipoHMikDHHDW5Gc7RZYlVuvxHADiU4bxfjBVkHDAmmck+fCkm46n2JzC3j33hWvP9nSCAeh37t6stgWeg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/runtime": "^7.5.5"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@jridgewell/gen-mapping": {
|
"node_modules/@jridgewell/gen-mapping": {
|
||||||
"version": "0.3.8",
|
"version": "0.3.8",
|
||||||
"resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
|
"resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
|
||||||
|
|
@ -957,6 +1014,86 @@
|
||||||
"resolved": "https://registry.npmmirror.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
|
"resolved": "https://registry.npmmirror.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
|
||||||
"integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
|
"integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
|
||||||
},
|
},
|
||||||
|
"node_modules/@kjgl77/datav-vue3": {
|
||||||
|
"version": "1.7.4",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@kjgl77/datav-vue3/-/datav-vue3-1.7.4.tgz",
|
||||||
|
"integrity": "sha512-zYVTVKkklUxwtiNKS1qPBilm4rTW+WItfp0zVpaRAI8wgXkLSPbDR9xPq2+UcU/Jft7/DVdMfBp709E2ResuPQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@jiaminghi/c-render": "^0.4.3",
|
||||||
|
"@jiaminghi/charts": "^0.2.18",
|
||||||
|
"@jiaminghi/color": "^1.1.3",
|
||||||
|
"@vueuse/core": "^10.11.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@kjgl77/datav-vue3/node_modules/@types/web-bluetooth": {
|
||||||
|
"version": "0.0.20",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
|
||||||
|
"integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/@kjgl77/datav-vue3/node_modules/@vueuse/core": {
|
||||||
|
"version": "10.11.1",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-10.11.1.tgz",
|
||||||
|
"integrity": "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@types/web-bluetooth": "^0.0.20",
|
||||||
|
"@vueuse/metadata": "10.11.1",
|
||||||
|
"@vueuse/shared": "10.11.1",
|
||||||
|
"vue-demi": ">=0.14.8"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/antfu"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@kjgl77/datav-vue3/node_modules/@vueuse/metadata": {
|
||||||
|
"version": "10.11.1",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-10.11.1.tgz",
|
||||||
|
"integrity": "sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/antfu"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@kjgl77/datav-vue3/node_modules/@vueuse/shared": {
|
||||||
|
"version": "10.11.1",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-10.11.1.tgz",
|
||||||
|
"integrity": "sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"vue-demi": ">=0.14.8"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/antfu"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@kjgl77/datav-vue3/node_modules/vue-demi": {
|
||||||
|
"version": "0.14.10",
|
||||||
|
"resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.10.tgz",
|
||||||
|
"integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
|
||||||
|
"hasInstallScript": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"bin": {
|
||||||
|
"vue-demi-fix": "bin/vue-demi-fix.js",
|
||||||
|
"vue-demi-switch": "bin/vue-demi-switch.js"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/antfu"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@vue/composition-api": "^1.0.0-rc.1",
|
||||||
|
"vue": "^3.0.0-0 || ^2.6.0"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@vue/composition-api": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@nodelib/fs.scandir": {
|
"node_modules/@nodelib/fs.scandir": {
|
||||||
"version": "2.1.5",
|
"version": "2.1.5",
|
||||||
"resolved": "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
|
"resolved": "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
|
||||||
|
|
@ -2561,6 +2698,16 @@
|
||||||
"node": ">= 0.4"
|
"node": ">= 0.4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/echarts": {
|
||||||
|
"version": "5.6.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.6.0.tgz",
|
||||||
|
"integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"dependencies": {
|
||||||
|
"tslib": "2.3.0",
|
||||||
|
"zrender": "5.6.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/electron-to-chromium": {
|
"node_modules/electron-to-chromium": {
|
||||||
"version": "1.5.125",
|
"version": "1.5.125",
|
||||||
"resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.125.tgz",
|
"resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.125.tgz",
|
||||||
|
|
@ -4415,6 +4562,12 @@
|
||||||
"resolved": "https://registry.npmmirror.com/treemate/-/treemate-0.3.11.tgz",
|
"resolved": "https://registry.npmmirror.com/treemate/-/treemate-0.3.11.tgz",
|
||||||
"integrity": "sha512-M8RGFoKtZ8dF+iwJfAJTOH/SM4KluKOKRJpjCMhI8bG3qB74zrFoArKZ62ll0Fr3mqkMJiQOmWYkdYgDeITYQg=="
|
"integrity": "sha512-M8RGFoKtZ8dF+iwJfAJTOH/SM4KluKOKRJpjCMhI8bG3qB74zrFoArKZ62ll0Fr3mqkMJiQOmWYkdYgDeITYQg=="
|
||||||
},
|
},
|
||||||
|
"node_modules/tslib": {
|
||||||
|
"version": "2.3.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
|
||||||
|
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
|
||||||
|
"license": "0BSD"
|
||||||
|
},
|
||||||
"node_modules/typescript": {
|
"node_modules/typescript": {
|
||||||
"version": "5.7.3",
|
"version": "5.7.3",
|
||||||
"resolved": "https://registry.npmmirror.com/typescript/-/typescript-5.7.3.tgz",
|
"resolved": "https://registry.npmmirror.com/typescript/-/typescript-5.7.3.tgz",
|
||||||
|
|
@ -5084,6 +5237,15 @@
|
||||||
"funding": {
|
"funding": {
|
||||||
"url": "https://github.com/sponsors/sindresorhus"
|
"url": "https://github.com/sponsors/sindresorhus"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"node_modules/zrender": {
|
||||||
|
"version": "5.6.1",
|
||||||
|
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.1.tgz",
|
||||||
|
"integrity": "sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==",
|
||||||
|
"license": "BSD-3-Clause",
|
||||||
|
"dependencies": {
|
||||||
|
"tslib": "2.3.0"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -12,14 +12,17 @@
|
||||||
"type-check": "vue-tsc --build"
|
"type-check": "vue-tsc --build"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@kjgl77/datav-vue3": "^1.7.4",
|
||||||
"@vueuse/core": "^13.1.0",
|
"@vueuse/core": "^13.1.0",
|
||||||
"animate.css": "^4.1.1",
|
"animate.css": "^4.1.1",
|
||||||
"axios": "^1.8.1",
|
"axios": "^1.8.1",
|
||||||
"dayjs": "^1.11.13",
|
"dayjs": "^1.11.13",
|
||||||
|
"echarts": "^5.6.0",
|
||||||
"event-source-polyfill": "^1.0.31",
|
"event-source-polyfill": "^1.0.31",
|
||||||
"js-base64": "^3.7.7",
|
"js-base64": "^3.7.7",
|
||||||
"jsencrypt": "^3.3.2",
|
"jsencrypt": "^3.3.2",
|
||||||
"lodash-es": "^4.17.21",
|
"lodash-es": "^4.17.21",
|
||||||
|
"naive-ui": "^2.41.0",
|
||||||
"pinia": "^3.0.1",
|
"pinia": "^3.0.1",
|
||||||
"pinia-plugin-persistedstate": "^4.2.0",
|
"pinia-plugin-persistedstate": "^4.2.0",
|
||||||
"sass": "^1.85.1",
|
"sass": "^1.85.1",
|
||||||
|
|
@ -27,8 +30,7 @@
|
||||||
"unplugin-auto-import": "^19.1.1",
|
"unplugin-auto-import": "^19.1.1",
|
||||||
"unplugin-vue-components": "^28.4.1",
|
"unplugin-vue-components": "^28.4.1",
|
||||||
"vue": "^3.5.13",
|
"vue": "^3.5.13",
|
||||||
"vue-router": "^4.5.0",
|
"vue-router": "^4.5.0"
|
||||||
"naive-ui": "^2.41.0"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@tsconfig/node22": "^22.0.0",
|
"@tsconfig/node22": "^22.0.0",
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,102 @@
|
||||||
|
// 颜色
|
||||||
|
$colors: (
|
||||||
|
"primary": #db9e3f,
|
||||||
|
"info-1": #4394e4,
|
||||||
|
"info": #4b67af,
|
||||||
|
"white": #ffffff,
|
||||||
|
"light": #f9f9f9,
|
||||||
|
"grey-1": #999999,
|
||||||
|
"grey": #666666,
|
||||||
|
"dark-1": #5f5f5f,
|
||||||
|
"dark": #222222,
|
||||||
|
"black-1": #171823,
|
||||||
|
"black": #000000,
|
||||||
|
);
|
||||||
|
|
||||||
|
// 字体大小
|
||||||
|
$base-font-size: 16px;
|
||||||
|
$font-sizes: (
|
||||||
|
xxs: 0.1,
|
||||||
|
//8px
|
||||||
|
xs: 0.125,
|
||||||
|
//10px
|
||||||
|
sm: 0.2875,
|
||||||
|
//12px
|
||||||
|
md: 0.1625,
|
||||||
|
//13px
|
||||||
|
lg: 0.175,
|
||||||
|
//14px
|
||||||
|
xl: 0.2,
|
||||||
|
//16px
|
||||||
|
xxl: 0.225,
|
||||||
|
//18px
|
||||||
|
xxxl: 0.25 //20px,,,,
|
||||||
|
);
|
||||||
|
|
||||||
|
// 宽高
|
||||||
|
.w-100 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-100 {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
//flex
|
||||||
|
.d-flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-column {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-wrap {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-nowrap {
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
$flex-jc: (
|
||||||
|
start: flex-start,
|
||||||
|
end: flex-end,
|
||||||
|
center: center,
|
||||||
|
between: space-between,
|
||||||
|
around: space-around,
|
||||||
|
evenly: space-evenly,
|
||||||
|
);
|
||||||
|
|
||||||
|
$flex-ai: (
|
||||||
|
start: flex-start,
|
||||||
|
end: flex-end,
|
||||||
|
center: center,
|
||||||
|
stretch: stretch,
|
||||||
|
);
|
||||||
|
|
||||||
|
.flex-1 {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
//.mt-1 => margin top
|
||||||
|
//spacing
|
||||||
|
$spacing-types: (
|
||||||
|
m: margin,
|
||||||
|
p: padding,
|
||||||
|
);
|
||||||
|
$spacing-directions: (
|
||||||
|
t: top,
|
||||||
|
r: right,
|
||||||
|
b: bottom,
|
||||||
|
l: left,
|
||||||
|
);
|
||||||
|
$spacing-base-size: 16px;
|
||||||
|
$spacing-sizes: (
|
||||||
|
0: 0,
|
||||||
|
1: 0.25,
|
||||||
|
2: 0.5,
|
||||||
|
3: 1,
|
||||||
|
4: 1.5,
|
||||||
|
5: 3,
|
||||||
|
);
|
||||||
|
|
@ -110,24 +110,31 @@
|
||||||
.mt#{$i} {
|
.mt#{$i} {
|
||||||
margin-top: #{$i}px !important;
|
margin-top: #{$i}px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mr#{$i} {
|
.mr#{$i} {
|
||||||
margin-right: #{$i}px !important;
|
margin-right: #{$i}px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mb#{$i} {
|
.mb#{$i} {
|
||||||
margin-bottom: #{$i}px !important;
|
margin-bottom: #{$i}px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ml#{$i} {
|
.ml#{$i} {
|
||||||
margin-left: #{$i}px !important;
|
margin-left: #{$i}px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pt#{$i} {
|
.pt#{$i} {
|
||||||
padding-top: #{$i}px !important;
|
padding-top: #{$i}px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pr#{$i} {
|
.pr#{$i} {
|
||||||
padding-right: #{$i}px !important;
|
padding-right: #{$i}px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pb#{$i} {
|
.pb#{$i} {
|
||||||
padding-bottom: #{$i}px !important;
|
padding-bottom: #{$i}px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pl#{$i} {
|
.pl#{$i} {
|
||||||
padding-left: #{$i}px !important;
|
padding-left: #{$i}px !important;
|
||||||
}
|
}
|
||||||
|
|
@ -484,4 +491,4 @@
|
||||||
/* 鼠标悬浮手指 */
|
/* 鼠标悬浮手指 */
|
||||||
.pointer {
|
.pointer {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
@ -0,0 +1,194 @@
|
||||||
|
@import "./variables";
|
||||||
|
|
||||||
|
// 全局样式
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style-type: none;
|
||||||
|
box-sizing: border-box;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
// font-family: Arial, Helvetica, sans-serif;
|
||||||
|
// line-height: 1.2em;
|
||||||
|
// background-color: #f1f1f1;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #343440;
|
||||||
|
text-decoration: none;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clearfix {
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
display: table;
|
||||||
|
height: 0;
|
||||||
|
line-height: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 图标
|
||||||
|
.iconfont {
|
||||||
|
font-size: 20px !important;
|
||||||
|
color: #5cd9e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
//浮动
|
||||||
|
.float-r {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
//浮动
|
||||||
|
.float-l {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 字体加粗
|
||||||
|
.fw-b {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
//文章一行显示，多余省略号显示
|
||||||
|
.title-item {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-color-black {
|
||||||
|
background-color: rgba(19, 25, 47, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-color-blue {
|
||||||
|
background-color: #1a5cd7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.colorBlack {
|
||||||
|
color: #272727 !important;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #272727 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.colorGrass {
|
||||||
|
color: #33cea0;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #33cea0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.colorRed {
|
||||||
|
color: #ff5722;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #ff5722 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.colorText {
|
||||||
|
color: #d3d6dd !important;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #d3d6dd !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.colorBlue {
|
||||||
|
color: #257dff !important;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #257dff !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//颜色
|
||||||
|
@each $colorkey, $color in $colors {
|
||||||
|
.text-#{$colorkey} {
|
||||||
|
color: $color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-#{$colorkey} {
|
||||||
|
background-color: $color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//对齐
|
||||||
|
@each $var in (left, center, right) {
|
||||||
|
.text-#{$var} {
|
||||||
|
text-align: $var !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//flex
|
||||||
|
@each $key, $value in $flex-jc {
|
||||||
|
.jc-#{$key} {
|
||||||
|
justify-content: $value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $key, $value in $flex-ai {
|
||||||
|
.ai-#{$key} {
|
||||||
|
align-items: $value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//字体
|
||||||
|
@each $fontkey, $fontvalue in $font-sizes {
|
||||||
|
.fs-#{$fontkey} {
|
||||||
|
font-size: $fontvalue * $base-font-size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//.mt-1 => margin top
|
||||||
|
//spacing
|
||||||
|
|
||||||
|
@each $typekey, $type in $spacing-types {
|
||||||
|
|
||||||
|
//.m-1
|
||||||
|
@each $sizekey, $size in $spacing-sizes {
|
||||||
|
.#{$typekey}-#{$sizekey} {
|
||||||
|
#{$type}: $size * $spacing-base-size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//.mx-1
|
||||||
|
@each $sizekey, $size in $spacing-sizes {
|
||||||
|
.#{$typekey}x-#{$sizekey} {
|
||||||
|
#{$type}-left: $size * $spacing-base-size;
|
||||||
|
#{$type}-right: $size * $spacing-base-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.#{$typekey}y-#{$sizekey} {
|
||||||
|
#{$type}-top: $size * $spacing-base-size;
|
||||||
|
#{$type}-bottom: $size * $spacing-base-size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//.mt-1
|
||||||
|
@each $directionkey, $direction in $spacing-directions {
|
||||||
|
@each $sizekey, $size in $spacing-sizes {
|
||||||
|
.#{$typekey}#{$directionkey}-#{$sizekey} {
|
||||||
|
#{$type}-#{$direction}: $size * $spacing-base-size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.#{$typekey} {
|
||||||
|
#{$type}: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -8,9 +8,9 @@ interface OBJ {
|
||||||
objectUrl: string;
|
objectUrl: string;
|
||||||
preSignedUrl: string;
|
preSignedUrl: string;
|
||||||
}
|
}
|
||||||
// export const getPreSignedUrl = async (fileName: string) => {
|
export const getPreSignedUrl = async (fileName: string) => {
|
||||||
// const resp = await api.get<OBJ>("/file/getPreSignedUrl", {
|
const resp = await api.get<OBJ>("/file/getPreSignedUrl", {
|
||||||
// fileName,
|
fileName,
|
||||||
// });
|
});
|
||||||
// return resp.data as OBJ;
|
return resp.data as OBJ;
|
||||||
// };
|
};
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
>
|
>
|
||||||
<n-button
|
<n-button
|
||||||
dashed
|
dashed
|
||||||
style="margin-right: 5px;"
|
style="margin-right: 5px"
|
||||||
>
|
>
|
||||||
<Icon name="LineMdUpload" />
|
<Icon name="LineMdUpload" />
|
||||||
<span>选择照片上传</span>
|
<span>选择照片上传</span>
|
||||||
|
|
|
||||||
15
src/main.ts
15
src/main.ts
|
|
@ -1,19 +1,16 @@
|
||||||
import { createApp } from "vue";
|
import { createApp } from "vue";
|
||||||
|
|
||||||
// pinia store
|
|
||||||
import pinia from "@/stores";
|
import pinia from "@/stores";
|
||||||
import "animate.css";
|
import "animate.css";
|
||||||
import App from "./App.vue";
|
import App from "./App.vue";
|
||||||
import router from "./router";
|
import router from "./router";
|
||||||
import "./assets/scss/common.scss";
|
import "./assets/scss/common.scss";
|
||||||
import './assets/main.scss'
|
import "./assets/main.scss";
|
||||||
// import { initEnums, } from "@/utils/emnus";
|
// import "./assets/scss/_variables.scss";
|
||||||
|
import './assets/scss/style.scss';
|
||||||
// initEnums();
|
// @ts-ignore
|
||||||
|
import DataVVue3 from "@kjgl77/datav-vue3";
|
||||||
const app = createApp(App);
|
const app = createApp(App);
|
||||||
|
|
||||||
app.use(router);
|
app.use(router);
|
||||||
app.use(pinia);
|
app.use(pinia);
|
||||||
|
app.use(DataVVue3);
|
||||||
app.mount("#app");
|
app.mount("#app");
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 289 KiB |
|
|
@ -0,0 +1,146 @@
|
||||||
|
<script setup lang="tsx">
|
||||||
|
import { ref, watch, defineProps, onMounted } from "vue";
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
|
||||||
|
// 接收 props
|
||||||
|
const props = defineProps<{
|
||||||
|
cdata: {
|
||||||
|
category: string[];
|
||||||
|
rateData: number[];
|
||||||
|
barData: number[];
|
||||||
|
lineData: number[];
|
||||||
|
};
|
||||||
|
}>();
|
||||||
|
|
||||||
|
// 图表容器 DOM 引用
|
||||||
|
const chartContainerRef = ref<HTMLDivElement | null>(null);
|
||||||
|
// echarts 实例
|
||||||
|
let chartInstance: echarts.ECharts | null = null;
|
||||||
|
|
||||||
|
// 初始化图表
|
||||||
|
const initChart = (options: echarts.EChartsOption) => {
|
||||||
|
if (chartContainerRef.value) {
|
||||||
|
if (!chartInstance) {
|
||||||
|
chartInstance = echarts.init(chartContainerRef.value);
|
||||||
|
}
|
||||||
|
chartInstance.setOption(options);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 构建图表配置项
|
||||||
|
const getOptions = (val: typeof props.cdata): echarts.EChartsOption => {
|
||||||
|
return {
|
||||||
|
tooltip: {
|
||||||
|
show: true,
|
||||||
|
trigger: "item",
|
||||||
|
axisPointer: {
|
||||||
|
type: "shadow",
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
backgroundColor: "#7B7DDC",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: { show: true },
|
||||||
|
grid: {
|
||||||
|
// @ts-ignore
|
||||||
|
x: "8%",
|
||||||
|
width: "88%",
|
||||||
|
top: "5%",
|
||||||
|
bottom: "7%",
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
data: val.category,
|
||||||
|
axisLine: { lineStyle: { color: "#B4B4B4" } },
|
||||||
|
axisTick: { show: false },
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
splitLine: { show: false },
|
||||||
|
axisLine: { lineStyle: { color: "#B4B4B4" } },
|
||||||
|
axisLabel: { formatter: "{value} " },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
splitLine: { show: false },
|
||||||
|
axisLine: { lineStyle: { color: "#B4B4B4" } },
|
||||||
|
axisLabel: { formatter: "{value} " },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "贯通率",
|
||||||
|
type: "line",
|
||||||
|
smooth: true,
|
||||||
|
showAllSymbol: true,
|
||||||
|
symbol: "emptyCircle",
|
||||||
|
symbolSize: 8,
|
||||||
|
yAxisIndex: 1,
|
||||||
|
itemStyle: {
|
||||||
|
// @ts-ignore
|
||||||
|
normal: {
|
||||||
|
color: "#F02FC2",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: val.rateData,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "已贯通",
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 10,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
barBorderRadius: 5,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: "#956FD4" },
|
||||||
|
{ offset: 1, color: "#3EACE5" },
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: val.barData,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "计划贯通",
|
||||||
|
type: "bar",
|
||||||
|
barGap: "-100%",
|
||||||
|
barWidth: 10,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
barBorderRadius: 5,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: "rgba(156,107,211,0.8)" },
|
||||||
|
{ offset: 0.2, color: "rgba(156,107,211,0.5)" },
|
||||||
|
{ offset: 1, color: "rgba(156,107,211,0.2)" },
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
z: -12,
|
||||||
|
data: val.lineData,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// 监听 props 数据变化，更新图表
|
||||||
|
watch(
|
||||||
|
() => props.cdata,
|
||||||
|
(val) => {
|
||||||
|
initChart(getOptions(val));
|
||||||
|
},
|
||||||
|
{ immediate: true, deep: true }
|
||||||
|
);
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
initChart(getOptions(props.cdata));
|
||||||
|
});
|
||||||
|
|
||||||
|
// 渲染
|
||||||
|
const height = "450px";
|
||||||
|
const width = "100%";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
ref="chartContainerRef"
|
||||||
|
:style="{ height, width }"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,71 @@
|
||||||
|
<script setup lang="tsx">
|
||||||
|
import { reactive, onMounted } from "vue";
|
||||||
|
import Draw from "./draw.vue";
|
||||||
|
|
||||||
|
const cdata = reactive({
|
||||||
|
category: [
|
||||||
|
"市区",
|
||||||
|
"万州",
|
||||||
|
"江北",
|
||||||
|
"南岸",
|
||||||
|
"北碚",
|
||||||
|
"綦南",
|
||||||
|
"长寿",
|
||||||
|
"永川",
|
||||||
|
"璧山",
|
||||||
|
"江津",
|
||||||
|
"城口",
|
||||||
|
"大足",
|
||||||
|
"垫江",
|
||||||
|
"丰都",
|
||||||
|
"奉节",
|
||||||
|
"合川",
|
||||||
|
"江津区",
|
||||||
|
"开州",
|
||||||
|
"南川",
|
||||||
|
"彭水",
|
||||||
|
"黔江",
|
||||||
|
"石柱",
|
||||||
|
"铜梁",
|
||||||
|
"潼南",
|
||||||
|
"巫山",
|
||||||
|
"巫溪",
|
||||||
|
"武隆",
|
||||||
|
"秀山",
|
||||||
|
"酉阳",
|
||||||
|
"云阳",
|
||||||
|
"忠县",
|
||||||
|
"川东",
|
||||||
|
"检修",
|
||||||
|
],
|
||||||
|
lineData: [
|
||||||
|
18092, 20728, 24045, 28348, 32808, 36097, 39867, 44715, 48444, 50415,
|
||||||
|
56061, 62677, 59521, 67560, 18092, 20728, 24045, 28348, 32808, 36097,
|
||||||
|
39867, 44715, 48444, 50415, 36097, 39867, 44715, 48444, 50415, 50061,
|
||||||
|
32677, 49521, 32808,
|
||||||
|
],
|
||||||
|
barData: [
|
||||||
|
4600, 5000, 5500, 6500, 7500, 8500, 9900, 12500, 14000, 21500, 23200,
|
||||||
|
24450, 25250, 33300, 4600, 5000, 5500, 6500, 7500, 8500, 9900, 22500,
|
||||||
|
14000, 21500, 8500, 9900, 12500, 14000, 21500, 23200, 24450, 25250, 7500,
|
||||||
|
],
|
||||||
|
rateData: [] as string[],
|
||||||
|
});
|
||||||
|
|
||||||
|
// 自动生成贯通率数据
|
||||||
|
const setData = () => {
|
||||||
|
cdata.rateData = cdata.barData.map((val, i) => {
|
||||||
|
const rate = val / cdata.lineData[i];
|
||||||
|
return rate.toFixed(2);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
setData();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<!-- @vue-ignore -->
|
||||||
|
<Draw :cdata="cdata" />
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
<template>
|
||||||
|
<div class="bottomLeft">
|
||||||
|
<div class="bg-color-black">
|
||||||
|
<div class="d-flex pt-2 pl-2">
|
||||||
|
<span>
|
||||||
|
<i class="iconfont icon-chart-line" />
|
||||||
|
</span>
|
||||||
|
<div class="d-flex">
|
||||||
|
<span class="fs-xl text mx-2 mt-1">数据统计图</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<chart />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import Chart from "./chart/index.vue";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
$box-height: 520px;
|
||||||
|
$box-width: 100%;
|
||||||
|
.bottomLeft {
|
||||||
|
padding: 20px 16px;
|
||||||
|
height: $box-height;
|
||||||
|
width: $box-width;
|
||||||
|
border-radius: 5px;
|
||||||
|
.bg-color-black {
|
||||||
|
height: $box-height - 35px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
color: #c3cbde;
|
||||||
|
}
|
||||||
|
.chart-box {
|
||||||
|
margin-top: 16px;
|
||||||
|
width: 170px;
|
||||||
|
height: 170px;
|
||||||
|
.active-ring-name {
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,365 @@
|
||||||
|
import { defineComponent, watch, ref } from 'vue';
|
||||||
|
// 声明类型
|
||||||
|
const PropsType = {
|
||||||
|
cdata: {
|
||||||
|
type: Object,
|
||||||
|
require: true
|
||||||
|
}
|
||||||
|
} as const
|
||||||
|
|
||||||
|
// 定义主体
|
||||||
|
export default defineComponent({
|
||||||
|
props: PropsType,
|
||||||
|
setup(props) {
|
||||||
|
// 定义 ref
|
||||||
|
const chartRef = ref()
|
||||||
|
// 定义颜色
|
||||||
|
const colorList = {
|
||||||
|
linearYtoG: {
|
||||||
|
type: "linear",
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 1,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "#f5b44d"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#28f8de"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
linearGtoB: {
|
||||||
|
type: "linear",
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 1,
|
||||||
|
y2: 0,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "#43dfa2"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#28f8de"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
linearBtoG: {
|
||||||
|
type: "linear",
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 1,
|
||||||
|
y2: 0,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "#1c98e8"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#28f8de"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
areaBtoG: {
|
||||||
|
type: "linear",
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(35,184,210,.2)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "rgba(35,184,210,0)"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 配置项
|
||||||
|
let options ={}
|
||||||
|
|
||||||
|
// 监听
|
||||||
|
watch(
|
||||||
|
() => props.cdata,
|
||||||
|
(val: any) => {
|
||||||
|
options = {
|
||||||
|
title: {
|
||||||
|
text: "",
|
||||||
|
textStyle: {
|
||||||
|
color: "#D3D6DD",
|
||||||
|
fontSize: 24,
|
||||||
|
fontWeight: "normal"
|
||||||
|
},
|
||||||
|
subtext: val.year + "/" + val.weekCategory[6],
|
||||||
|
subtextStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 16
|
||||||
|
},
|
||||||
|
top: 50,
|
||||||
|
left: 80
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
top: 120,
|
||||||
|
left: 80,
|
||||||
|
orient: "vertical",
|
||||||
|
itemGap: 15,
|
||||||
|
itemWidth: 12,
|
||||||
|
itemHeight: 12,
|
||||||
|
data: ["平均指标", "我的指标"],
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "item"
|
||||||
|
},
|
||||||
|
radar: {
|
||||||
|
center: ["68%", "27%"],
|
||||||
|
radius: "40%",
|
||||||
|
name: {
|
||||||
|
color: "#fff"
|
||||||
|
},
|
||||||
|
splitNumber: 8,
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: colorList.linearYtoG,
|
||||||
|
opacity: 0.6
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: colorList.linearYtoG,
|
||||||
|
opacity: 0.6
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitArea: {
|
||||||
|
areaStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
opacity: 0.1,
|
||||||
|
shadowBlur: 25,
|
||||||
|
shadowColor: "#000",
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowOffsetY: 5
|
||||||
|
}
|
||||||
|
},
|
||||||
|
indicator: [
|
||||||
|
{
|
||||||
|
name: "服务态度",
|
||||||
|
max: val.maxData
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "产品质量",
|
||||||
|
max: 10
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "任务效率",
|
||||||
|
max: 12
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "售后保障",
|
||||||
|
max: 3.5
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: 90,
|
||||||
|
right: 80,
|
||||||
|
bottom: '15%',
|
||||||
|
top: "50%"
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
position: "bottom",
|
||||||
|
axisLine: true,
|
||||||
|
axisLabel: {
|
||||||
|
color: "rgba(255,255,255,.8)",
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
data: val.weekCategory
|
||||||
|
},
|
||||||
|
// 下方Y轴
|
||||||
|
yAxis: {
|
||||||
|
name: "工单",
|
||||||
|
nameLocation: "end",
|
||||||
|
nameGap: 24,
|
||||||
|
nameTextStyle: {
|
||||||
|
color: "rgba(255,255,255,.5)",
|
||||||
|
fontSize: 14
|
||||||
|
},
|
||||||
|
max: val.maxData,
|
||||||
|
splitNumber: 4,
|
||||||
|
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
opacity: 0.1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: "rgba(255,255,255,.8)",
|
||||||
|
fontSize: 12
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "",
|
||||||
|
type: "radar",
|
||||||
|
symbolSize: 0,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: val.radarDataAvg[6],
|
||||||
|
name: "平均指标",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#f8d351"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#f8d351",
|
||||||
|
shadowBlur: 25,
|
||||||
|
shadowColor: "rgba(248,211,81,.3)",
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowOffsetY: -10,
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: val.radarData[6],
|
||||||
|
name: "我的指标",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#43dfa2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
color: colorList.linearGtoB,
|
||||||
|
shadowBlur: 15,
|
||||||
|
shadowColor: "rgba(0,0,0,.2)",
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowOffsetY: 5,
|
||||||
|
opacity: 0.8
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "",
|
||||||
|
type: "line",
|
||||||
|
smooth: true,
|
||||||
|
symbol: "emptyCircle",
|
||||||
|
symbolSize: 8,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#fff"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
color: colorList.linearBtoG,
|
||||||
|
width: 3
|
||||||
|
}
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
color: colorList.areaBtoG
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: val.weekLineData,
|
||||||
|
lineSmooth: true,
|
||||||
|
markLine: {
|
||||||
|
silent: true,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
type: "average",
|
||||||
|
name: "平均值"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
precision: 0,
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
formatter: "平均值: \n {c}"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "rgba(248,211,81,.7)"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
position: "top",
|
||||||
|
formatter: "{c} m",
|
||||||
|
backgroundColor: "rgba(28,152,232,.2)",
|
||||||
|
padding: 6
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "占位背景",
|
||||||
|
type: "bar",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
show: true,
|
||||||
|
color: "#000",
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
silent: true,
|
||||||
|
barWidth: "50%",
|
||||||
|
data: val.weekMaxData,
|
||||||
|
animation: false
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
// 手动触发更新
|
||||||
|
if (chartRef.value) {
|
||||||
|
// 通过初始化参数打入数据
|
||||||
|
chartRef.value.initChart(options)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true,
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
const height = "480px"
|
||||||
|
const width = "100%"
|
||||||
|
|
||||||
|
return <div>
|
||||||
|
<echart ref={chartRef} height={height} width={width} />
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
@ -0,0 +1,92 @@
|
||||||
|
import { defineComponent, reactive, onMounted, ref, onUnmounted } from "vue";
|
||||||
|
import Draw from "./draw";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
components: {
|
||||||
|
Draw,
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const drawTiming = ref(0);
|
||||||
|
const cdata = reactive({
|
||||||
|
year: null,
|
||||||
|
weekCategory: [],
|
||||||
|
radarData: [],
|
||||||
|
radarDataAvg: [],
|
||||||
|
maxData: 12000,
|
||||||
|
weekMaxData: [],
|
||||||
|
weekLineData: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
// methods
|
||||||
|
const setData = () => {
|
||||||
|
// 清空轮询数据
|
||||||
|
cdata.weekCategory = [];
|
||||||
|
cdata.weekMaxData = [];
|
||||||
|
cdata.weekLineData = [];
|
||||||
|
cdata.radarData = [];
|
||||||
|
cdata.radarDataAvg = [];
|
||||||
|
|
||||||
|
const dateBase = new Date();
|
||||||
|
cdata.year = dateBase.getFullYear();
|
||||||
|
// 周数据
|
||||||
|
for (let i = 0; i < 7; i++) {
|
||||||
|
// 日期
|
||||||
|
const date = new Date();
|
||||||
|
cdata.weekCategory.unshift(
|
||||||
|
[date.getMonth() + 1, date.getDate() - i].join("/")
|
||||||
|
);
|
||||||
|
|
||||||
|
// 折线图数据
|
||||||
|
cdata.weekMaxData.push(cdata.maxData);
|
||||||
|
const distance = Math.round(Math.random() * 11000 + 500);
|
||||||
|
cdata.weekLineData.push(distance);
|
||||||
|
|
||||||
|
// 雷达图数据
|
||||||
|
// 我的指标
|
||||||
|
const averageSpeed = +(Math.random() * 5 + 3).toFixed(3);
|
||||||
|
const maxSpeed = averageSpeed + +(Math.random() * 3).toFixed(2);
|
||||||
|
const hour = +(distance / 1000 / averageSpeed).toFixed(1);
|
||||||
|
const radarDayData = [distance, averageSpeed, maxSpeed, hour];
|
||||||
|
cdata.radarData.unshift(radarDayData);
|
||||||
|
|
||||||
|
// 平均指标
|
||||||
|
const distanceAvg = Math.round(Math.random() * 8000 + 4000);
|
||||||
|
const averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3);
|
||||||
|
const maxSpeedAvg = averageSpeedAvg + +(Math.random() * 2).toFixed(2);
|
||||||
|
const hourAvg = +(distance / 1000 / averageSpeed).toFixed(1);
|
||||||
|
const radarDayDataAvg = [
|
||||||
|
distanceAvg,
|
||||||
|
averageSpeedAvg,
|
||||||
|
maxSpeedAvg,
|
||||||
|
hourAvg,
|
||||||
|
];
|
||||||
|
cdata.radarDataAvg.unshift(radarDayDataAvg);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 定时函数
|
||||||
|
const drawTimingFn = () => {
|
||||||
|
setData();
|
||||||
|
drawTiming.value = setInterval(() => {
|
||||||
|
setData();
|
||||||
|
}, 6000);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 生命周期
|
||||||
|
onMounted(() => {
|
||||||
|
drawTimingFn();
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
clearInterval(drawTiming.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Draw cdata={cdata} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
<template>
|
||||||
|
<div class="bottomRight">
|
||||||
|
<div class="bg-color-black">
|
||||||
|
<div class="d-flex pt-2 pl-2">
|
||||||
|
<span>
|
||||||
|
<i class="iconfont icon-chart-area" />
|
||||||
|
</span>
|
||||||
|
<div class="d-flex">
|
||||||
|
<span class="fs-xl text mx-2 mt-1">数据统计图</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<chart />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import Chart from "./chart/index";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" class>
|
||||||
|
$box-height: 520px;
|
||||||
|
$box-width: 100%;
|
||||||
|
.bottomRight {
|
||||||
|
padding: 14px 16px;
|
||||||
|
height: $box-height;
|
||||||
|
width: $box-width;
|
||||||
|
border-radius: 5px;
|
||||||
|
.bg-color-black {
|
||||||
|
height: $box-height - 30px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
color: #c3cbde;
|
||||||
|
}
|
||||||
|
.chart-box {
|
||||||
|
margin-top: 16px;
|
||||||
|
width: 170px;
|
||||||
|
height: 170px;
|
||||||
|
.active-ring-name {
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,92 @@
|
||||||
|
import { defineComponent, watch, shallowReactive } from 'vue'
|
||||||
|
|
||||||
|
// 声明类型
|
||||||
|
const PropsType = {
|
||||||
|
tips: {
|
||||||
|
type: Number,
|
||||||
|
default: 50,
|
||||||
|
require: true
|
||||||
|
},
|
||||||
|
colorObj: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({
|
||||||
|
textStyle: "#3fc0fb",
|
||||||
|
series: {
|
||||||
|
color: ["#00bcd44a", "transparent"],
|
||||||
|
dataColor: {
|
||||||
|
normal: "#03a9f4",
|
||||||
|
shadowColor: "#97e2f5"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} as const
|
||||||
|
|
||||||
|
// 定义主体
|
||||||
|
export default defineComponent({
|
||||||
|
props: PropsType,
|
||||||
|
setup(props) {
|
||||||
|
// 配置项
|
||||||
|
let options = shallowReactive({title:null,series:null})
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.tips,
|
||||||
|
(val: any) => {
|
||||||
|
options = {
|
||||||
|
title: {
|
||||||
|
text: val * 1 + "%",
|
||||||
|
x: "center",
|
||||||
|
y: "center",
|
||||||
|
textStyle: {
|
||||||
|
color: props.colorObj.textStyle,
|
||||||
|
fontSize: 16
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: "pie",
|
||||||
|
radius: ["75%", "80%"],
|
||||||
|
center: ["50%", "50%"],
|
||||||
|
hoverAnimation: false,
|
||||||
|
color: props.colorObj.series.color,
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: val,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: props.colorObj.series.dataColor.normal,
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowColor: props.colorObj.series.dataColor.shadowColor
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 100 - val
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true,
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
const height = "100px"
|
||||||
|
const width = "120px"
|
||||||
|
|
||||||
|
return <div>
|
||||||
|
<echart options={options} height={height} width={width} />
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
@ -0,0 +1,232 @@
|
||||||
|
<template>
|
||||||
|
<div class="center">
|
||||||
|
<div class="up">
|
||||||
|
<div
|
||||||
|
class="bg-color-black item"
|
||||||
|
v-for="item in titleItem"
|
||||||
|
:key="item.title"
|
||||||
|
>
|
||||||
|
<p class="ml-3 colorBlue fw-b">{{ item.title }}</p>
|
||||||
|
<div>
|
||||||
|
<dv-digital-flop
|
||||||
|
class="dv-dig-flop ml-1 mt-1 pl-3"
|
||||||
|
:config="item.config"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="down">
|
||||||
|
<div class="ranking bg-color-black">
|
||||||
|
<span>
|
||||||
|
<i class="iconfont icon-tongji2"></i>
|
||||||
|
</span>
|
||||||
|
<span class="fs-xl text mx-2 mb-1">年度负责人组件达标榜</span>
|
||||||
|
<dv-scroll-ranking-board
|
||||||
|
class="dv-scr-rank-board"
|
||||||
|
:config="ranking"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="percent">
|
||||||
|
<div class="item bg-color-black">
|
||||||
|
<span>今日任务通过率</span>
|
||||||
|
<chart
|
||||||
|
:tips="rate[0].tips"
|
||||||
|
:colorObj="rate[0].colorData"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="item bg-color-black">
|
||||||
|
<span>今日任务达标率</span>
|
||||||
|
<chart
|
||||||
|
:tips="rate[1].tips"
|
||||||
|
:colorObj="rate[1].colorData"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="water">
|
||||||
|
<dv-water-level-pond
|
||||||
|
class="dv-wa-le-po"
|
||||||
|
:config="water"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { reactive, onMounted } from "vue";
|
||||||
|
import Chart from "../center/chart/draw";
|
||||||
|
|
||||||
|
// 下层数据
|
||||||
|
const titleDate = [
|
||||||
|
{
|
||||||
|
number: 1020,
|
||||||
|
text: "今年累计任务建次数",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
number: 18,
|
||||||
|
text: "本月累计任务次数",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
number: 4,
|
||||||
|
text: "今日累计任务次数",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
number: 71,
|
||||||
|
text: "今年失败任务次数",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
number: 949,
|
||||||
|
text: "今年失败成功次数",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
number: 811,
|
||||||
|
text: "今年达标任务个数",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const titleItem = reactive<any[]>([]);
|
||||||
|
|
||||||
|
// 初始化数据
|
||||||
|
onMounted(() => {
|
||||||
|
setData();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 设置数据
|
||||||
|
const setData = () => {
|
||||||
|
titleDate.forEach((e) => {
|
||||||
|
titleItem.push({
|
||||||
|
title: e.text,
|
||||||
|
config: {
|
||||||
|
number: [e.number],
|
||||||
|
toFixed: 1,
|
||||||
|
textAlign: "left",
|
||||||
|
content: "{nt}",
|
||||||
|
style: {
|
||||||
|
fontSize: 26,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 排名数据
|
||||||
|
const ranking = reactive({
|
||||||
|
data: [
|
||||||
|
{ name: "周口", value: 55 },
|
||||||
|
{ name: "南阳", value: 120 },
|
||||||
|
{ name: "西峡", value: 78 },
|
||||||
|
{ name: "驻马店", value: 66 },
|
||||||
|
{ name: "新乡", value: 80 },
|
||||||
|
{ name: "新乡2", value: 80 },
|
||||||
|
{ name: "新乡3", value: 80 },
|
||||||
|
{ name: "新乡4", value: 80 },
|
||||||
|
{ name: "新乡5", value: 80 },
|
||||||
|
{ name: "新乡6", value: 80 },
|
||||||
|
],
|
||||||
|
carousel: "single",
|
||||||
|
unit: "人",
|
||||||
|
});
|
||||||
|
|
||||||
|
// 水球图数据
|
||||||
|
const water = reactive({
|
||||||
|
data: [24, 45],
|
||||||
|
shape: "roundRect",
|
||||||
|
formatter: "{value}%",
|
||||||
|
waveNum: 3,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 仪表盘数据
|
||||||
|
const rate = reactive([
|
||||||
|
{
|
||||||
|
id: "centerRate1",
|
||||||
|
tips: 60,
|
||||||
|
colorData: {
|
||||||
|
textStyle: "#3fc0fb",
|
||||||
|
series: {
|
||||||
|
color: ["#00bcd44a", "transparent"],
|
||||||
|
dataColor: {
|
||||||
|
normal: "#03a9f4",
|
||||||
|
shadowColor: "#97e2f5",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "centerRate2",
|
||||||
|
tips: 40,
|
||||||
|
colorData: {
|
||||||
|
textStyle: "#67e0e3",
|
||||||
|
series: {
|
||||||
|
color: ["#faf3a378", "transparent"],
|
||||||
|
dataColor: {
|
||||||
|
normal: "#ff9800",
|
||||||
|
shadowColor: "#fcebad",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.center {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.up {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-around;
|
||||||
|
.item {
|
||||||
|
border-radius: 6px;
|
||||||
|
padding-top: 8px;
|
||||||
|
margin-top: 8px;
|
||||||
|
width: 32%;
|
||||||
|
height: 70px;
|
||||||
|
.dv-dig-flop {
|
||||||
|
width: 150px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.down {
|
||||||
|
padding: 6px 4px;
|
||||||
|
padding-bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
height: 255px;
|
||||||
|
justify-content: space-between;
|
||||||
|
.bg-color-black {
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
.ranking {
|
||||||
|
padding: 10px;
|
||||||
|
width: 59%;
|
||||||
|
.dv-scr-rank-board {
|
||||||
|
height: 220px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.percent {
|
||||||
|
width: 40%;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.item {
|
||||||
|
width: 50%;
|
||||||
|
height: 120px;
|
||||||
|
span {
|
||||||
|
margin-top: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.water {
|
||||||
|
width: 100%;
|
||||||
|
.dv-wa-le-po {
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,97 @@
|
||||||
|
import { defineComponent, ref, watch, shallowReactive } from 'vue'
|
||||||
|
|
||||||
|
// 声明类型
|
||||||
|
const PropsType = {
|
||||||
|
cdata: {
|
||||||
|
type: Object,
|
||||||
|
require: true
|
||||||
|
}
|
||||||
|
} as const
|
||||||
|
|
||||||
|
// 定义主体
|
||||||
|
export default defineComponent({
|
||||||
|
props: PropsType,
|
||||||
|
setup(props) {
|
||||||
|
// 定义 ref
|
||||||
|
const chartRef = ref()
|
||||||
|
// 配置项
|
||||||
|
let options = shallowReactive({color:null,tooltip:null,toolbox:null,calculable:null,legend:null,series:null})
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.cdata,
|
||||||
|
(val: any) => {
|
||||||
|
options = {
|
||||||
|
color: [
|
||||||
|
'#37a2da',
|
||||||
|
'#32c5e9',
|
||||||
|
'#9fe6b8',
|
||||||
|
'#ffdb5c',
|
||||||
|
'#ff9f7f',
|
||||||
|
'#fb7293',
|
||||||
|
'#e7bcf3',
|
||||||
|
'#8378ea'
|
||||||
|
],
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
calculable: true,
|
||||||
|
legend: {
|
||||||
|
orient: 'horizontal',
|
||||||
|
icon: 'circle',
|
||||||
|
bottom: 0,
|
||||||
|
x: 'center',
|
||||||
|
data: val.xData,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '通过率统计',
|
||||||
|
type: 'pie',
|
||||||
|
radius: [10, 50],
|
||||||
|
roseType: 'area',
|
||||||
|
center: ['50%', '40%'],
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 5
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: val.seriesData
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
// 手动触发更新
|
||||||
|
if (chartRef.value) {
|
||||||
|
// 通过初始化参数打入数据
|
||||||
|
chartRef.value.initChart(options)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true,
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
const height = "220px"
|
||||||
|
const width = "260px"
|
||||||
|
|
||||||
|
return <div>
|
||||||
|
<echart ref={chartRef} options={options} height={height} width={width} />
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
import { defineComponent, onUnmounted, reactive } from 'vue'
|
||||||
|
import Draw from './draw'
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
components: {
|
||||||
|
Draw,
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
let intervalInstance = null
|
||||||
|
const cdata = reactive({
|
||||||
|
xData: ['数据1', '数据2', '数据3', '数据4', '数据5', '数据6'],
|
||||||
|
seriesData: [
|
||||||
|
{ value: 10, name: '数据1' },
|
||||||
|
{ value: 5, name: '数据2' },
|
||||||
|
{ value: 15, name: '数据3' },
|
||||||
|
{ value: 25, name: '数据4' },
|
||||||
|
{ value: 20, name: '数据5' },
|
||||||
|
{ value: 35, name: '数据6' },
|
||||||
|
],
|
||||||
|
})
|
||||||
|
intervalInstance = setInterval(() => {
|
||||||
|
const data = cdata.seriesData
|
||||||
|
cdata.seriesData = data.map((e) => {
|
||||||
|
return { value: e.value + 10, name: e.name }
|
||||||
|
})
|
||||||
|
}, 1000)
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
clearInterval(intervalInstance)
|
||||||
|
})
|
||||||
|
return () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Draw cdata={cdata} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,171 @@
|
||||||
|
<template>
|
||||||
|
<div class="centreLeft1">
|
||||||
|
<div class="bg-color-black">
|
||||||
|
<div class="d-flex pt-2 pl-2">
|
||||||
|
<span>
|
||||||
|
<i class="iconfont icon-tongji4" />
|
||||||
|
</span>
|
||||||
|
<div class="d-flex">
|
||||||
|
<span class="fs-xl text mx-2">任务通过率</span>
|
||||||
|
<dv-decoration-3 class="dv-dec-3" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex jc-center">
|
||||||
|
<chart />
|
||||||
|
</div>
|
||||||
|
<!-- 4个主要的数据 -->
|
||||||
|
<div class="bottom-data">
|
||||||
|
<div
|
||||||
|
class="item-box mt-2"
|
||||||
|
v-for="(item, index) in numberData"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<div class="d-flex jc-end">
|
||||||
|
<i
|
||||||
|
class="iconfont"
|
||||||
|
:class="[iconFont[index]]"
|
||||||
|
/>
|
||||||
|
<dv-digital-flop
|
||||||
|
class="dv-digital-flop"
|
||||||
|
:config="item.config"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
<span>{{ item.text }}</span>
|
||||||
|
<span class="colorYellow">(件)</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, onMounted, onUnmounted, reactive } from "vue";
|
||||||
|
import Chart from "./chart/index";
|
||||||
|
export default defineComponent({
|
||||||
|
components: {
|
||||||
|
Chart,
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
// 下层数据
|
||||||
|
const dataArr = [
|
||||||
|
{
|
||||||
|
number: 150,
|
||||||
|
text: "今日构建总量",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
number: 144,
|
||||||
|
text: "总共完成数量",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
number: 361,
|
||||||
|
text: "正在编译数量",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
number: 571,
|
||||||
|
text: "未通过数量",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
// 对应图标
|
||||||
|
const iconFont = [
|
||||||
|
"icon-diagnose",
|
||||||
|
"icon-monitoring",
|
||||||
|
"icon-cloudupload",
|
||||||
|
"icon-clouddownload",
|
||||||
|
];
|
||||||
|
const numberData = reactive([]);
|
||||||
|
let intervalInstance = null;
|
||||||
|
onMounted(() => {
|
||||||
|
setData();
|
||||||
|
changeTiming();
|
||||||
|
});
|
||||||
|
|
||||||
|
const setData = () => {
|
||||||
|
dataArr.forEach((e) => {
|
||||||
|
numberData.push({
|
||||||
|
config: {
|
||||||
|
number: [e.number],
|
||||||
|
toFixed: 1,
|
||||||
|
content: "{nt}",
|
||||||
|
style: {
|
||||||
|
fontSize: 24,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
text: e.text,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const changeTiming = () => {
|
||||||
|
intervalInstance = setInterval(() => {
|
||||||
|
changeNumber();
|
||||||
|
}, 2000);
|
||||||
|
};
|
||||||
|
const changeNumber = () => {
|
||||||
|
numberData.forEach((item, index) => {
|
||||||
|
item.config.number[0] += ++index;
|
||||||
|
item.config = { ...item.config };
|
||||||
|
});
|
||||||
|
};
|
||||||
|
onUnmounted(() => {
|
||||||
|
clearInterval(intervalInstance);
|
||||||
|
});
|
||||||
|
|
||||||
|
return { numberData, iconFont };
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
$box-width: 300px;
|
||||||
|
$box-height: 410px;
|
||||||
|
|
||||||
|
.centreLeft1 {
|
||||||
|
padding: 16px;
|
||||||
|
height: $box-height;
|
||||||
|
width: $box-width;
|
||||||
|
border-radius: 10px;
|
||||||
|
.bg-color-black {
|
||||||
|
height: $box-height - 30px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
color: #c3cbde;
|
||||||
|
}
|
||||||
|
.dv-dec-3 {
|
||||||
|
position: relative;
|
||||||
|
width: 100px;
|
||||||
|
height: 20px;
|
||||||
|
top: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-data {
|
||||||
|
.item-box {
|
||||||
|
& > div {
|
||||||
|
padding-right: 5px;
|
||||||
|
}
|
||||||
|
font-size: 14px;
|
||||||
|
float: right;
|
||||||
|
position: relative;
|
||||||
|
width: 50%;
|
||||||
|
color: #d3d6dd;
|
||||||
|
.dv-digital-flop {
|
||||||
|
width: 120px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
i {
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 30px;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
.colorYellow {
|
||||||
|
color: yellowgreen;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,217 @@
|
||||||
|
import { defineComponent, watch, shallowReactive, nextTick, ref, onUnmounted } from 'vue';
|
||||||
|
|
||||||
|
// 声明类型
|
||||||
|
const PropsType = {
|
||||||
|
cdata: {
|
||||||
|
type: Array,
|
||||||
|
require: true
|
||||||
|
}
|
||||||
|
} as const
|
||||||
|
|
||||||
|
// 定义主体
|
||||||
|
export default defineComponent({
|
||||||
|
props: PropsType,
|
||||||
|
setup(props) {
|
||||||
|
// 配置项
|
||||||
|
let options = shallowReactive({showLegendSymbol:null,tooltip:null,geo:null,series:null})
|
||||||
|
// 设置点的位置(经纬度)
|
||||||
|
const geoCoordMap = {
|
||||||
|
厦门市: [118.11022, 24.490474, 20],
|
||||||
|
福州市: [119.206239, 26.275302, 20],
|
||||||
|
泉州市: [118.589421, 24.908853, 20],
|
||||||
|
漳州市: [117.561801, 24.510897, 20],
|
||||||
|
龙岩市: [116.82978, 25.391603, 20],
|
||||||
|
莆田市: [119.007558, 25.591011, 20],
|
||||||
|
三明市: [117.435001, 26.465444, 20],
|
||||||
|
南平市: [118.178459, 27.535627, 20],
|
||||||
|
宁德市: [119.527082, 27.15924, 20],
|
||||||
|
}
|
||||||
|
const seriesData = [
|
||||||
|
{
|
||||||
|
name: '厦门市',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '福州市',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '泉州市',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '漳州市',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '龙岩市',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '莆田市',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '三明市',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '南平市',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '宁德市',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
const convertData = function (data) {
|
||||||
|
const scatterData = [];
|
||||||
|
for (let i = 0; i < data.length; i++) {
|
||||||
|
const geoCoord = geoCoordMap[data[i].name];
|
||||||
|
if (geoCoord) {
|
||||||
|
scatterData.push({
|
||||||
|
name: data[i].name,
|
||||||
|
value: geoCoord.concat(data[i].value),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return scatterData;
|
||||||
|
}
|
||||||
|
// 监听
|
||||||
|
watch(
|
||||||
|
() => props.cdata,
|
||||||
|
(val: any) => {
|
||||||
|
options = {
|
||||||
|
showLegendSymbol: true,
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 14,
|
||||||
|
lineHeight: 22,
|
||||||
|
},
|
||||||
|
position: point => {
|
||||||
|
// 固定在顶部
|
||||||
|
return [point[0] + 50, point[1] - 20];
|
||||||
|
},
|
||||||
|
// 如果需要自定义 tooltip样式，需要使用formatter
|
||||||
|
/*
|
||||||
|
formatter: params => {
|
||||||
|
return `<div style=""> ... </div>`
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
},
|
||||||
|
// 如果需要根据不同的数据展示深浅不一的颜色，则把这里打开
|
||||||
|
// visualMap: {
|
||||||
|
// min: 0,
|
||||||
|
// max: 10,
|
||||||
|
// show: false,
|
||||||
|
// seriesIndex: 0,
|
||||||
|
// // 颜色
|
||||||
|
// inRange: {
|
||||||
|
// color: ['rgba(41,166,206, .5)', 'rgba(69,117,245, .9)'],
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// 底部背景
|
||||||
|
geo: [{
|
||||||
|
show: true,
|
||||||
|
aspectScale: 0.85, //长宽比
|
||||||
|
zoom: 1.16,
|
||||||
|
top: '10%',
|
||||||
|
left: '17%',
|
||||||
|
map: '福建',
|
||||||
|
roam: false,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
borderColor: '#7ad5ff7f',
|
||||||
|
shadowOffsetY: 5,
|
||||||
|
shadowBlur: 15,
|
||||||
|
areaColor: 'rgba(5,21,35,0.1)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '相关指数',
|
||||||
|
type: 'map',
|
||||||
|
aspectScale: 0.85, //长宽比
|
||||||
|
zoom: 1.16, //缩放
|
||||||
|
mapType: '福建', // 自定义扩展图表类型
|
||||||
|
top: '9%',
|
||||||
|
left: '16%',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
// 背景渐变色
|
||||||
|
areaColor: {
|
||||||
|
type: 'linear-gradient',
|
||||||
|
x: 0,
|
||||||
|
y: 300,
|
||||||
|
x2: 0,
|
||||||
|
y2: 0,
|
||||||
|
colorStops: [{
|
||||||
|
offset: 0,
|
||||||
|
color: 'RGBA(19,96,187,1)' // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: 'RGBA(7,193,223,1)' // 50% 处的颜色
|
||||||
|
}],
|
||||||
|
global: true // 缺省为 false
|
||||||
|
},
|
||||||
|
borderColor: '#4ECEE6',
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
areaColor: '#4f7fff',
|
||||||
|
borderColor: 'rgba(0,242,252,.6)',
|
||||||
|
borderWidth: 2,
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowColor: '#00f2fc',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
formatter: params => `${params.name}`,
|
||||||
|
show: true,
|
||||||
|
position: 'insideRight',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 14,
|
||||||
|
color: '#efefef',
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: val,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'effectScatter',
|
||||||
|
coordinateSystem: 'geo',
|
||||||
|
symbolSize: 7,
|
||||||
|
effectType: 'ripple',
|
||||||
|
legendHoverLink: false,
|
||||||
|
showEffectOn: 'render',
|
||||||
|
rippleEffect: {
|
||||||
|
period: 4,
|
||||||
|
scale: 2.5,
|
||||||
|
brushType: 'stroke',
|
||||||
|
},
|
||||||
|
zlevel: 1,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#99FBFE',
|
||||||
|
shadowBlur: 5,
|
||||||
|
shadowColor: '#fff',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: convertData(seriesData),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true,
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
)
|
||||||
|
return () => {
|
||||||
|
const height = "360px"
|
||||||
|
const width = "330px"
|
||||||
|
|
||||||
|
return <div>
|
||||||
|
<echart options={options} height={height} width={width} />
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
@ -0,0 +1,58 @@
|
||||||
|
import { defineComponent, reactive } from 'vue'
|
||||||
|
import Draw from './draw'
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
components: {
|
||||||
|
Draw
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const cdata = reactive([
|
||||||
|
{
|
||||||
|
// 名字需要与 “common/map/fujian.js” 地图数据文件里面定义的一一对应，不能是 “福州” 或者 “闽” 之类的缩写
|
||||||
|
name: '福州市',
|
||||||
|
value: 10,
|
||||||
|
elseData: {
|
||||||
|
// 这里放置地图 tooltip 里想显示的数据
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '厦门市',
|
||||||
|
value: 9,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '漳州市',
|
||||||
|
value: 8,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '泉州市',
|
||||||
|
value: 7,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '三明市',
|
||||||
|
value: 6,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '莆田市',
|
||||||
|
value: 5,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '南平市',
|
||||||
|
value: 4,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '龙岩市',
|
||||||
|
value: 3,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '宁德市',
|
||||||
|
value: 2,
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
return <div>
|
||||||
|
<Draw cdata={cdata} />
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
<template>
|
||||||
|
<div class="centreLeft1">
|
||||||
|
<div class="bg-color-black">
|
||||||
|
<div class="d-flex pt-2 pl-2">
|
||||||
|
<span>
|
||||||
|
<i class="iconfont icon-layer-group" />
|
||||||
|
</span>
|
||||||
|
<div class="d-flex">
|
||||||
|
<span class="fs-xl text mx-2">地图数据</span>
|
||||||
|
<dv-decoration-1 class="dv-dec-1" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex jc-center">
|
||||||
|
<chart />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import Chart from "./chart/index";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.centreLeft1 {
|
||||||
|
$box-width: 300px;
|
||||||
|
$box-height: 410px;
|
||||||
|
padding: 16px;
|
||||||
|
height: $box-height;
|
||||||
|
min-width: $box-width;
|
||||||
|
border-radius: 5px;
|
||||||
|
.bg-color-black {
|
||||||
|
height: $box-height - 30px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
color: #c3cbde;
|
||||||
|
}
|
||||||
|
.dv-dec-1 {
|
||||||
|
position: relative;
|
||||||
|
width: 100px;
|
||||||
|
height: 20px;
|
||||||
|
top: -3px;
|
||||||
|
}
|
||||||
|
.chart-box {
|
||||||
|
margin-top: 16px;
|
||||||
|
width: 170px;
|
||||||
|
height: 170px;
|
||||||
|
.active-ring-name {
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,131 @@
|
||||||
|
import { defineComponent, watch, shallowReactive } from 'vue'
|
||||||
|
|
||||||
|
// 声明类型
|
||||||
|
const PropsType = {
|
||||||
|
cdata: {
|
||||||
|
type: Object,
|
||||||
|
require: true
|
||||||
|
}
|
||||||
|
} as const
|
||||||
|
|
||||||
|
// 定义主体
|
||||||
|
export default defineComponent({
|
||||||
|
props: PropsType,
|
||||||
|
setup(props) {
|
||||||
|
// 定义固定配置项
|
||||||
|
const lineStyle = {
|
||||||
|
normal: {
|
||||||
|
width: 1,
|
||||||
|
opacity: 0.5
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 配置项
|
||||||
|
let options = shallowReactive({radar:null,series:null})
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.cdata,
|
||||||
|
(val: any) => {
|
||||||
|
options = {
|
||||||
|
radar: {
|
||||||
|
indicator: val.indicatorData,
|
||||||
|
shape: "circle",
|
||||||
|
splitNumber: 5,
|
||||||
|
radius: ["0%", "65%"],
|
||||||
|
name: {
|
||||||
|
textStyle: {
|
||||||
|
color: "rgb(238, 197, 102)"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: [
|
||||||
|
"rgba(238, 197, 102, 0.1)",
|
||||||
|
"rgba(238, 197, 102, 0.2)",
|
||||||
|
"rgba(238, 197, 102, 0.4)",
|
||||||
|
"rgba(238, 197, 102, 0.6)",
|
||||||
|
"rgba(238, 197, 102, 0.8)",
|
||||||
|
"rgba(238, 197, 102, 1)"
|
||||||
|
].reverse()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitArea: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "rgba(238, 197, 102, 0.5)"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "北京",
|
||||||
|
type: "radar",
|
||||||
|
lineStyle: lineStyle,
|
||||||
|
data: val.dataBJ,
|
||||||
|
symbol: "none",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#F9713C"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
opacity: 0.1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "上海",
|
||||||
|
type: "radar",
|
||||||
|
lineStyle: lineStyle,
|
||||||
|
data: val.dataSH,
|
||||||
|
symbol: "none",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#B3E4A1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
opacity: 0.05
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "广州",
|
||||||
|
type: "radar",
|
||||||
|
lineStyle: lineStyle,
|
||||||
|
data: val.dataGZ,
|
||||||
|
symbol: "none",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "rgb(238, 197, 102)"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
opacity: 0.05
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true,
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
const height = "200px"
|
||||||
|
const width = "260px"
|
||||||
|
|
||||||
|
return <div>
|
||||||
|
<echart options={options} height={height} width={width} />
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
import { defineComponent, reactive } from 'vue'
|
||||||
|
import Draw from './draw'
|
||||||
|
export default defineComponent({
|
||||||
|
components: {
|
||||||
|
Draw
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const cdata = reactive({
|
||||||
|
indicatorData: [
|
||||||
|
{ name: "数据1", max: 300 },
|
||||||
|
{ name: "数据2", max: 250 },
|
||||||
|
{ name: "数据3", max: 300 },
|
||||||
|
{ name: "数据4", max: 5 },
|
||||||
|
{ name: "数据5", max: 200 },
|
||||||
|
{ name: "数据6", max: 100 }
|
||||||
|
],
|
||||||
|
dataBJ: [
|
||||||
|
[94, 69, 114, 2.08, 73, 39, 22],
|
||||||
|
[99, 73, 110, 2.43, 76, 48, 23],
|
||||||
|
[31, 12, 30, 0.5, 32, 16, 24],
|
||||||
|
[42, 27, 43, 1, 53, 22, 25],
|
||||||
|
[154, 117, 157, 3.05, 92, 58, 26],
|
||||||
|
[234, 185, 230, 4.09, 123, 69, 27],
|
||||||
|
[160, 120, 186, 2.77, 91, 50, 28]
|
||||||
|
],
|
||||||
|
dataGZ: [
|
||||||
|
[84, 94, 140, 2.238, 68, 18, 22],
|
||||||
|
[93, 77, 104, 1.165, 53, 7, 23],
|
||||||
|
[99, 130, 227, 3.97, 55, 15, 24],
|
||||||
|
[146, 84, 139, 1.094, 40, 17, 25],
|
||||||
|
[113, 108, 137, 1.481, 48, 15, 26],
|
||||||
|
[81, 48, 62, 1.619, 26, 3, 27],
|
||||||
|
[56, 48, 68, 1.336, 37, 9, 28]
|
||||||
|
],
|
||||||
|
dataSH: [
|
||||||
|
[91, 45, 125, 0.82, 34, 23, 1],
|
||||||
|
[65, 27, 78, 0.86, 45, 29, 2],
|
||||||
|
[83, 60, 84, 1.09, 73, 27, 3],
|
||||||
|
[109, 81, 121, 1.28, 68, 51, 4],
|
||||||
|
[106, 77, 114, 1.07, 55, 51, 5],
|
||||||
|
[109, 81, 121, 1.28, 68, 51, 6],
|
||||||
|
[106, 77, 114, 1.07, 55, 51, 7]
|
||||||
|
]
|
||||||
|
})
|
||||||
|
return () => {
|
||||||
|
return <div>
|
||||||
|
<draw cdata={cdata} />
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,67 @@
|
||||||
|
<template>
|
||||||
|
<div class="centerRight1">
|
||||||
|
<div class="bg-color-black">
|
||||||
|
<div class="d-flex pt-2 pl-2">
|
||||||
|
<span>
|
||||||
|
<i class="iconfont icon-align-left" />
|
||||||
|
</span>
|
||||||
|
<span class="fs-xl text mx-2">产品销售渠道分析</span>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex ai-center flex-column body-box">
|
||||||
|
<dv-capsule-chart
|
||||||
|
class="dv-cap-chart"
|
||||||
|
:config="config"
|
||||||
|
/>
|
||||||
|
<Chart />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { reactive } from "vue";
|
||||||
|
import Chart from "./chart/index.tsx";
|
||||||
|
|
||||||
|
const config = reactive({
|
||||||
|
data: [
|
||||||
|
{ name: "南阳", value: 167 },
|
||||||
|
{ name: "周口", value: 67 },
|
||||||
|
{ name: "漯河", value: 123 },
|
||||||
|
{ name: "郑州", value: 55 },
|
||||||
|
{ name: "西峡", value: 98 },
|
||||||
|
],
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
$box-height: 400px;
|
||||||
|
$box-width: 340px;
|
||||||
|
|
||||||
|
.centerRight1 {
|
||||||
|
padding: 5px;
|
||||||
|
height: $box-height;
|
||||||
|
width: $box-width;
|
||||||
|
border-radius: 5px;
|
||||||
|
|
||||||
|
.bg-color-black {
|
||||||
|
padding: 5px;
|
||||||
|
height: $box-height;
|
||||||
|
width: $box-width;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
color: #c3cbde;
|
||||||
|
}
|
||||||
|
|
||||||
|
.body-box {
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.dv-cap-chart {
|
||||||
|
width: 100%;
|
||||||
|
height: 160px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,75 @@
|
||||||
|
<template>
|
||||||
|
<div class="centerRight2">
|
||||||
|
<div class="bg-color-black">
|
||||||
|
<div class="d-flex pt-2 pl-2">
|
||||||
|
<span>
|
||||||
|
<i class="iconfont icon-vector" />
|
||||||
|
</span>
|
||||||
|
<div class="d-flex">
|
||||||
|
<span class="fs-xl text mx-2">任务完成排行榜</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex mt-1 jc-center body-box">
|
||||||
|
<dv-scroll-board
|
||||||
|
class="dv-scr-board"
|
||||||
|
:config="config"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { reactive } from "vue";
|
||||||
|
|
||||||
|
const config = reactive({
|
||||||
|
header: ["组件", "分支", "覆盖率"],
|
||||||
|
data: [
|
||||||
|
["组件1", "dev-1", "<span class='colorGrass'>↑75%</span>"],
|
||||||
|
["组件2", "dev-2", "<span class='colorRed'>↓33%</span>"],
|
||||||
|
["组件3", "dev-3", "<span class='colorGrass'>↑100%</span>"],
|
||||||
|
["组件4", "rea-1", "<span class='colorGrass'>↑94%</span>"],
|
||||||
|
["组件5", "rea-2", "<span class='colorGrass'>↑95%</span>"],
|
||||||
|
["组件6", "fix-2", "<span class='colorGrass'>↑63%</span>"],
|
||||||
|
["组件7", "fix-4", "<span class='colorGrass'>↑84%</span>"],
|
||||||
|
["组件8", "fix-7", "<span class='colorRed'>↓46%</span>"],
|
||||||
|
["组件9", "dev-2", "<span class='colorRed'>↓13%</span>"],
|
||||||
|
["组件10", "dev-9", "<span class='colorGrass'>↑76%</span>"],
|
||||||
|
],
|
||||||
|
rowNum: 7, // 表格行数
|
||||||
|
headerHeight: 35,
|
||||||
|
headerBGC: "#0f1325", // 表头
|
||||||
|
oddRowBGC: "#0f1325", // 奇数行
|
||||||
|
evenRowBGC: "#171c33", // 偶数行
|
||||||
|
index: true,
|
||||||
|
columnWidth: [50],
|
||||||
|
align: ["center"],
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
$box-height: 410px;
|
||||||
|
$box-width: 300px;
|
||||||
|
.centerRight2 {
|
||||||
|
padding: 16px;
|
||||||
|
padding-top: 20px;
|
||||||
|
height: $box-height;
|
||||||
|
width: $box-width;
|
||||||
|
border-radius: 5px;
|
||||||
|
.bg-color-black {
|
||||||
|
height: $box-height - 30px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
color: #c3cbde;
|
||||||
|
}
|
||||||
|
.body-box {
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
.dv-scr-board {
|
||||||
|
width: 270px;
|
||||||
|
height: 340px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
type ModuleInfo = {
|
||||||
|
name: string;
|
||||||
|
icon: string;
|
||||||
|
}[];
|
||||||
|
// 星期
|
||||||
|
export const WEEK = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
|
||||||
|
|
||||||
|
// 主题名称与副标题名称
|
||||||
|
export const title = "大数据可视化平台";
|
||||||
|
export const subtitle = ["数据分析1", "数据分析2", "vue-big-screen"];
|
||||||
|
|
||||||
|
export const moduleInfo: ModuleInfo = [
|
||||||
|
// 中间的几个模块
|
||||||
|
{
|
||||||
|
name: "任务通过率",
|
||||||
|
icon: "icon-chart-bar",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "地图数据",
|
||||||
|
icon: "icon-tongji4",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "产品销售渠道分析",
|
||||||
|
icon: "icon-align-left",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "任务完成排行榜",
|
||||||
|
icon: "icon-zhibiao2",
|
||||||
|
},
|
||||||
|
// 底部两个模块
|
||||||
|
{
|
||||||
|
name: "数据统计图",
|
||||||
|
icon: "icon-vector",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "工单修复以及满意度统计图",
|
||||||
|
icon: "icon-fenxi7",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
@ -1,9 +1,323 @@
|
||||||
<template>
|
<template>
|
||||||
<div>总览大屏</div>
|
<div class="app">
|
||||||
|
<div
|
||||||
|
id="index"
|
||||||
|
ref="appRef"
|
||||||
|
>
|
||||||
|
<div class="bg">
|
||||||
|
<dv-loading v-if="loading">Loading ...</dv-loading>
|
||||||
|
<div
|
||||||
|
v-else
|
||||||
|
class="host-body"
|
||||||
|
>
|
||||||
|
<div class="d-flex jc-center">
|
||||||
|
<dv-decoration-10 class="dv-dec-10" />
|
||||||
|
<div class="d-flex jc-center">
|
||||||
|
<dv-decoration-8
|
||||||
|
class="dv-dec-8"
|
||||||
|
:color="decorationColors"
|
||||||
|
/>
|
||||||
|
<div class="title">
|
||||||
|
<span class="title-text">{{ title }}</span>
|
||||||
|
<dv-decoration-6
|
||||||
|
class="dv-dec-6"
|
||||||
|
:reverse="true"
|
||||||
|
:color="['#50e3c2', '#67a1e5']"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<dv-decoration-8
|
||||||
|
class="dv-dec-8"
|
||||||
|
:reverse="true"
|
||||||
|
:color="decorationColors"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<dv-decoration-10 class="dv-dec-10-s" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 第二行 -->
|
||||||
|
<div class="d-flex jc-between px-2">
|
||||||
|
<div class="d-flex aside-width">
|
||||||
|
<div class="react-left ml-4 react-l-s">
|
||||||
|
<span class="react-before"></span>
|
||||||
|
<span class="text">{{ subtitle[0] }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="react-left ml-3">
|
||||||
|
<span class="text">{{ subtitle[1] }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex aside-width">
|
||||||
|
<div class="react-right bg-color-blue mr-3">
|
||||||
|
<span class="text fw-b">{{ subtitle[2] }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="react-right mr-4 react-l-s">
|
||||||
|
<span class="react-after"></span>
|
||||||
|
<span class="text">
|
||||||
|
{{ timeInfo.dateYear }} {{ timeInfo.dateWeek }}
|
||||||
|
{{ timeInfo.dateDay }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="body-box">
|
||||||
|
<!-- 第三行数据 -->
|
||||||
|
<div class="content-box">
|
||||||
|
<div>
|
||||||
|
<dv-border-box-12>
|
||||||
|
<!-- <CenterLeft1 /> -->
|
||||||
|
</dv-border-box-12>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dv-border-box-12>
|
||||||
|
<!-- <CenterLeft2 /> -->
|
||||||
|
</dv-border-box-12>
|
||||||
|
</div>
|
||||||
|
<!-- 中间 -->
|
||||||
|
<div>
|
||||||
|
<!-- <Center /> -->
|
||||||
|
</div>
|
||||||
|
<!-- 中间 -->
|
||||||
|
<div>
|
||||||
|
<!-- <CenterRight1 /> -->
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dv-border-box-13>
|
||||||
|
<CenterRight2 />
|
||||||
|
</dv-border-box-13>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 第四行数据 -->
|
||||||
|
<div class="bototm-box">
|
||||||
|
<dv-border-box-13>
|
||||||
|
<BottomLeft />
|
||||||
|
</dv-border-box-13>
|
||||||
|
<dv-border-box-12>
|
||||||
|
<!-- <BottomRight /> -->
|
||||||
|
</dv-border-box-12>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, onMounted, onUnmounted } from "vue";
|
||||||
|
import { formatTime } from "./utils/index";
|
||||||
|
import { WEEK } from "./constant/index";
|
||||||
|
import useDraw from "./utils/useDraw.ts";
|
||||||
|
import { title, subtitle, moduleInfo } from "./constant/index";
|
||||||
|
|
||||||
|
// 有用的 已修改的组件
|
||||||
|
import BottomLeft from "./components/bottomLeft/index.vue";
|
||||||
|
import CenterRight2 from "./components/centerRight2/index.vue";
|
||||||
|
|
||||||
|
// 未修改的组件
|
||||||
|
import CenterLeft1 from "./components/centerLeft1/index.vue";
|
||||||
|
import CenterLeft2 from "./components/centerLeft2/index.vue";
|
||||||
|
import Center from "./components/center/index.vue";
|
||||||
|
import CenterRight1 from "./components/centerRight1/index.vue";
|
||||||
|
import BottomRight from "./components/bottomRight/index.vue";
|
||||||
|
|
||||||
|
// * 颜色
|
||||||
|
const decorationColors = ["#568aea", "#000000"];
|
||||||
|
|
||||||
|
// * 加载标识
|
||||||
|
const loading = ref<boolean>(true);
|
||||||
|
|
||||||
|
// * 时间内容
|
||||||
|
const timeInfo = reactive({
|
||||||
|
setInterval: 0,
|
||||||
|
dateDay: "",
|
||||||
|
dateYear: "",
|
||||||
|
dateWeek: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
// * 适配处理
|
||||||
|
const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw();
|
||||||
|
|
||||||
|
// 生命周期
|
||||||
|
onMounted(() => {
|
||||||
|
cancelLoading();
|
||||||
|
handleTime();
|
||||||
|
windowDraw();
|
||||||
|
calcRate();
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
unWindowDraw();
|
||||||
|
clearInterval(timeInfo.setInterval);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 处理 loading 展示
|
||||||
|
const cancelLoading = () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
loading.value = false;
|
||||||
|
}, 500);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理时间监听
|
||||||
|
const handleTime = () => {
|
||||||
|
timeInfo.setInterval = setInterval(() => {
|
||||||
|
const date = new Date();
|
||||||
|
timeInfo.dateDay = formatTime(date, "HH: mm: ss");
|
||||||
|
timeInfo.dateYear = formatTime(date, "yyyy-MM-dd");
|
||||||
|
timeInfo.dateWeek = WEEK[date.getDay()];
|
||||||
|
}, 1000);
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
|
||||||
|
|
||||||
</style>
|
<style lang="scss" scoped>
|
||||||
|
.app {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: #020308;
|
||||||
|
overflow: hidden;
|
||||||
|
#index {
|
||||||
|
color: #d3d6dd;
|
||||||
|
width: 1920px;
|
||||||
|
height: 1080px;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
transform-origin: left top;
|
||||||
|
/* transform-origin: center center; */
|
||||||
|
.bg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 16px 16px 0 16px;
|
||||||
|
background-image: url("./assets/pageBg.png");
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.host-body {
|
||||||
|
.dv-dec-10,
|
||||||
|
.dv-dec-10-s {
|
||||||
|
width: 33.3%;
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
.dv-dec-10-s {
|
||||||
|
transform: rotateY(180deg);
|
||||||
|
}
|
||||||
|
.dv-dec-8 {
|
||||||
|
width: 200px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
position: relative;
|
||||||
|
width: 500px;
|
||||||
|
text-align: center;
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
|
.title-text {
|
||||||
|
font-size: 24px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dv-dec-6 {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -30px;
|
||||||
|
left: 50%;
|
||||||
|
width: 250px;
|
||||||
|
height: 8px;
|
||||||
|
transform: translate(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 第二行
|
||||||
|
.aside-width {
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
.react-r-s,
|
||||||
|
.react-l-s {
|
||||||
|
background-color: #0f1325;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 平行四边形
|
||||||
|
.react-right {
|
||||||
|
&.react-l-s {
|
||||||
|
text-align: right;
|
||||||
|
width: 500px;
|
||||||
|
}
|
||||||
|
font-size: 18px;
|
||||||
|
width: 300px;
|
||||||
|
line-height: 50px;
|
||||||
|
text-align: center;
|
||||||
|
transform: skewX(-45deg);
|
||||||
|
|
||||||
|
.react-after {
|
||||||
|
position: absolute;
|
||||||
|
right: -25px;
|
||||||
|
top: 0;
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
background-color: #0f1325;
|
||||||
|
transform: skewX(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
display: inline-block;
|
||||||
|
transform: skewX(45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-left {
|
||||||
|
&.react-l-s {
|
||||||
|
width: 500px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
font-size: 18px;
|
||||||
|
width: 300px;
|
||||||
|
height: 50px;
|
||||||
|
line-height: 50px;
|
||||||
|
text-align: center;
|
||||||
|
transform: skewX(45deg);
|
||||||
|
background-color: #0f1325;
|
||||||
|
|
||||||
|
.react-before {
|
||||||
|
position: absolute;
|
||||||
|
left: -25px;
|
||||||
|
top: 0;
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
background-color: #0f1325;
|
||||||
|
transform: skewX(-45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
display: inline-block;
|
||||||
|
transform: skewX(-45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.body-box {
|
||||||
|
margin-top: 16px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
//下方区域的布局
|
||||||
|
.content-box {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 底部数据
|
||||||
|
.bototm-box {
|
||||||
|
margin-top: 10px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
/**
|
||||||
|
* @param {date} time 需要转换的时间
|
||||||
|
* @param {String} fmt 需要转换的格式 如 yyyy-MM-dd、yyyy-MM-dd HH:mm:ss
|
||||||
|
* @returns {String}
|
||||||
|
*/
|
||||||
|
export const formatTime = (
|
||||||
|
time: string | number | Date,
|
||||||
|
fmt: string
|
||||||
|
): string => {
|
||||||
|
if (!time) return ''
|
||||||
|
const date = new Date(time)
|
||||||
|
const o = {
|
||||||
|
'M+': date.getMonth() + 1,
|
||||||
|
'd+': date.getDate(),
|
||||||
|
'H+': date.getHours(),
|
||||||
|
'm+': date.getMinutes(),
|
||||||
|
's+': date.getSeconds(),
|
||||||
|
'q+': Math.floor((date.getMonth() + 3) / 3),
|
||||||
|
S: date.getMilliseconds(),
|
||||||
|
}
|
||||||
|
if (/(y+)/.test(fmt))
|
||||||
|
fmt = fmt.replace(
|
||||||
|
RegExp.$1,
|
||||||
|
(date.getFullYear() + '').substr(4 - RegExp.$1.length)
|
||||||
|
)
|
||||||
|
for (const k in o) {
|
||||||
|
if (new RegExp('(' + k + ')').test(fmt)) {
|
||||||
|
fmt = fmt.replace(
|
||||||
|
RegExp.$1,
|
||||||
|
// @ts-ignore: Unreachable code error
|
||||||
|
RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return fmt
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,69 @@
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
export default function useDraw() {
|
||||||
|
// * 指向最外层容器
|
||||||
|
const appRef = ref();
|
||||||
|
// * 定时函数
|
||||||
|
const timer = ref(0);
|
||||||
|
// * 默认缩放值
|
||||||
|
const scale = {
|
||||||
|
width: "1",
|
||||||
|
height: "1",
|
||||||
|
};
|
||||||
|
// * 设计稿尺寸（px）
|
||||||
|
const baseWidth = 1920;
|
||||||
|
const baseHeight = 1080;
|
||||||
|
|
||||||
|
// * 需保持的比例（默认1.77778）
|
||||||
|
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));
|
||||||
|
const calcRate = () => {
|
||||||
|
// 当前宽高比
|
||||||
|
const currentRate = parseFloat(
|
||||||
|
(window.innerWidth / window.innerHeight).toFixed(5)
|
||||||
|
);
|
||||||
|
if (appRef.value) {
|
||||||
|
if (currentRate > baseProportion) {
|
||||||
|
// 表示更宽
|
||||||
|
scale.width = (
|
||||||
|
(window.innerHeight * baseProportion) /
|
||||||
|
baseWidth
|
||||||
|
).toFixed(5);
|
||||||
|
scale.height = (window.innerHeight / baseHeight).toFixed(5);
|
||||||
|
appRef.value.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;
|
||||||
|
} else {
|
||||||
|
// 表示更高
|
||||||
|
scale.height = (
|
||||||
|
window.innerWidth /
|
||||||
|
baseProportion /
|
||||||
|
baseHeight
|
||||||
|
).toFixed(5);
|
||||||
|
scale.width = (window.innerWidth / baseWidth).toFixed(5);
|
||||||
|
appRef.value.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const resize = () => {
|
||||||
|
clearTimeout(timer.value);
|
||||||
|
timer.value = setTimeout(() => {
|
||||||
|
calcRate();
|
||||||
|
}, 200);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 改变窗口大小重新绘制
|
||||||
|
const windowDraw = () => {
|
||||||
|
window.addEventListener("resize", resize);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 改变窗口大小重新绘制
|
||||||
|
const unWindowDraw = () => {
|
||||||
|
window.removeEventListener("resize", resize);
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
appRef,
|
||||||
|
calcRate,
|
||||||
|
windowDraw,
|
||||||
|
unWindowDraw,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -1,15 +1,28 @@
|
||||||
{
|
{
|
||||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||||
"include": ["src/**/*", "src/**/*.vue", "src/**/*.d.ts"],
|
"include": [
|
||||||
"exclude": ["src/**/__tests__/*", "node_modules", "dist", "management"],
|
"src/**/*",
|
||||||
|
"src/**/*.vue",
|
||||||
|
"src/**/*.d.ts"
|
||||||
|
],
|
||||||
|
"exclude": [
|
||||||
|
"src/**/__tests__/*",
|
||||||
|
"node_modules",
|
||||||
|
"dist",
|
||||||
|
"management"
|
||||||
|
],
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
"paths": {
|
"paths": {
|
||||||
"@/*": ["./src/*"]
|
"@/*": [
|
||||||
|
"./src/*"
|
||||||
|
]
|
||||||
},
|
},
|
||||||
"jsx": "preserve",
|
"jsx": "preserve",
|
||||||
"jsxImportSource": "vue",
|
"jsxImportSource": "vue",
|
||||||
"verbatimModuleSyntax": true,
|
"verbatimModuleSyntax": true,
|
||||||
"types": ["naive-ui/volar.d.ts"]
|
"types": [
|
||||||
|
"naive-ui/volar.d.ts"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue