From 146ec24afbeb8b11a991a299a5cd9e8d92a43f0e Mon Sep 17 00:00:00 2001 From: LCJ-MinYa <1049468118@qq.com> Date: Mon, 20 Jan 2025 10:18:19 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=BC=95=E5=85=A5v-chart=EF=BC=8C?= =?UTF-8?q?=E9=87=8D=E8=A6=81=E7=B3=BB=E7=BB=9F=E5=81=A5=E5=BA=B7=E7=8A=B6?= =?UTF-8?q?=E6=80=81=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + pnpm-lock.yaml | 38 ++++ src/main.ts | 4 +- src/plugins/echarts.ts | 67 ++++--- .../components/MajorSystemHealthStatus.vue | 177 ++++++++++++++++++ src/views/screen/config.ts | 55 ++++++ src/views/screen/index.vue | 19 +- 7 files changed, 327 insertions(+), 34 deletions(-) create mode 100644 src/views/screen/components/MajorSystemHealthStatus.vue create mode 100644 src/views/screen/config.ts diff --git a/package.json b/package.json index 75d20be..08482e0 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ "responsive-storage": "^2.2.0", "sortablejs": "^1.15.2", "vue": "^3.4.38", + "vue-echarts": "^7.0.3", "vue-router": "^4.4.3", "vue-tippy": "^6.4.4", "vue-types": "^5.1.3" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e208540..db7239f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -74,6 +74,9 @@ importers: vue: specifier: ^3.4.38 version: 3.4.38(typescript@5.5.4) + vue-echarts: + specifier: ^7.0.3 + version: 7.0.3(@vue/runtime-core@3.4.38)(echarts@5.5.1)(vue@3.4.38(typescript@5.5.4)) vue-router: specifier: ^4.4.3 version: 4.4.3(vue@3.4.38(typescript@5.5.4)) @@ -3459,6 +3462,17 @@ packages: vscode-uri@3.0.8: resolution: {integrity: sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==} + vue-demi@0.13.11: + resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==} + engines: {node: '>=12'} + hasBin: true + peerDependencies: + '@vue/composition-api': ^1.0.0-rc.1 + vue: ^3.0.0-0 || ^2.6.0 + peerDependenciesMeta: + '@vue/composition-api': + optional: true + vue-demi@0.14.10: resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==} engines: {node: '>=12'} @@ -3470,6 +3484,16 @@ packages: '@vue/composition-api': optional: true + vue-echarts@7.0.3: + resolution: {integrity: sha512-/jSxNwOsw5+dYAUcwSfkLwKPuzTQ0Cepz1LxCOpj2QcHrrmUa/Ql0eQqMmc1rTPQVrh2JQ29n2dhq75ZcHvRDw==} + peerDependencies: + '@vue/runtime-core': ^3.0.0 + echarts: ^5.5.1 + vue: ^2.7.0 || ^3.1.1 + peerDependenciesMeta: + '@vue/runtime-core': + optional: true + vue-eslint-parser@9.4.3: resolution: {integrity: sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==} engines: {node: ^14.17.0 || >=16.0.0} @@ -6950,10 +6974,24 @@ snapshots: vscode-uri@3.0.8: {} + vue-demi@0.13.11(vue@3.4.38(typescript@5.5.4)): + dependencies: + vue: 3.4.38(typescript@5.5.4) + vue-demi@0.14.10(vue@3.4.38(typescript@5.5.4)): dependencies: vue: 3.4.38(typescript@5.5.4) + vue-echarts@7.0.3(@vue/runtime-core@3.4.38)(echarts@5.5.1)(vue@3.4.38(typescript@5.5.4)): + dependencies: + echarts: 5.5.1 + vue: 3.4.38(typescript@5.5.4) + vue-demi: 0.13.11(vue@3.4.38(typescript@5.5.4)) + optionalDependencies: + '@vue/runtime-core': 3.4.38 + transitivePeerDependencies: + - '@vue/composition-api' + vue-eslint-parser@9.4.3(eslint@9.9.0(jiti@1.21.6)): dependencies: debug: 4.3.6 diff --git a/src/main.ts b/src/main.ts index e4edf22..0587e99 100644 --- a/src/main.ts +++ b/src/main.ts @@ -3,7 +3,7 @@ import router from './router'; import { setupStore } from '@/store'; import { getPlatformConfig } from './config'; import { MotionPlugin } from '@vueuse/motion'; -// import { useEcharts } from "@/plugins/echarts"; +import { registerVueEcharts } from '@/plugins/echarts'; import { createApp, type Directive } from 'vue'; import { useElementPlus } from '@/plugins/elementPlus'; import { injectResponsiveStorage } from '@/utils/responsive'; @@ -56,6 +56,6 @@ getPlatformConfig(app).then(async (config) => { injectResponsiveStorage(app, config); app.use(MotionPlugin).use(useElementPlus).use(useAutoImport).use(Table); // .use(PureDescriptions) - // .use(useEcharts); + registerVueEcharts(app); app.mount('#app'); }); diff --git a/src/plugins/echarts.ts b/src/plugins/echarts.ts index cb62d96..aeb3d72 100644 --- a/src/plugins/echarts.ts +++ b/src/plugins/echarts.ts @@ -1,36 +1,41 @@ -import type { App } from "vue"; -import * as echarts from "echarts/core"; -import { PieChart, BarChart, LineChart } from "echarts/charts"; -import { CanvasRenderer, SVGRenderer } from "echarts/renderers"; +import type { App } from 'vue'; +import * as echarts from 'echarts/core'; +import { PieChart, BarChart, LineChart, ScatterChart, GaugeChart } from 'echarts/charts'; +import { CanvasRenderer, SVGRenderer } from 'echarts/renderers'; import { - GridComponent, - TitleComponent, - PolarComponent, - LegendComponent, - GraphicComponent, - ToolboxComponent, - TooltipComponent, - DataZoomComponent, - VisualMapComponent -} from "echarts/components"; + GridComponent, + TitleComponent, + PolarComponent, + LegendComponent, + GraphicComponent, + ToolboxComponent, + TooltipComponent, + DataZoomComponent, + VisualMapComponent, + MarkPointComponent, +} from 'echarts/components'; +import VueEcharts from 'vue-echarts'; const { use } = echarts; use([ - PieChart, - BarChart, - LineChart, - CanvasRenderer, - SVGRenderer, - GridComponent, - TitleComponent, - PolarComponent, - LegendComponent, - GraphicComponent, - ToolboxComponent, - TooltipComponent, - DataZoomComponent, - VisualMapComponent + GaugeChart, + ScatterChart, + PieChart, + BarChart, + LineChart, + CanvasRenderer, + SVGRenderer, + GridComponent, + TitleComponent, + PolarComponent, + LegendComponent, + GraphicComponent, + ToolboxComponent, + TooltipComponent, + DataZoomComponent, + VisualMapComponent, + MarkPointComponent, ]); /** @@ -38,7 +43,11 @@ use([ * @see 温馨提示：必须将 `$echarts` 添加到全局 `globalProperties` ，具体看 https://pure-admin-utils.netlify.app/hooks/useECharts/useECharts#%E4%BD%BF%E7%94%A8%E5%89%8D%E6%8F%90 */ export function useEcharts(app: App) { - app.config.globalProperties.$echarts = echarts; + app.config.globalProperties.$echarts = echarts; } +export const registerVueEcharts = (app: App) => { + app.component('v-chart', VueEcharts); +}; + export default echarts; diff --git a/src/views/screen/components/MajorSystemHealthStatus.vue b/src/views/screen/components/MajorSystemHealthStatus.vue new file mode 100644 index 0000000..f52561c --- /dev/null +++ b/src/views/screen/components/MajorSystemHealthStatus.vue @@ -0,0 +1,177 @@ + + + + + diff --git a/src/views/screen/config.ts b/src/views/screen/config.ts new file mode 100644 index 0000000..5af868b --- /dev/null +++ b/src/views/screen/config.ts @@ -0,0 +1,55 @@ +const colorEnum = { + critical: { + R: 255, + G: 87, + B: 77, + A: 1, + }, + warning: { + R: 254, + G: 138, + B: 55, + A: 1, + }, + major: { + R: 67, + G: 128, + B: 229, + A: 1, + }, + info: { + R: 85, + G: 251, + B: 170, + A: 1, + }, +}; + +const getColor = (key: string = 'info', alpha: number = 1) => { + return `rgba(${colorEnum[key].R}, ${colorEnum[key].G}, ${colorEnum[key].B}, ${alpha || colorEnum[key].A})`; +}; + +const cptColor = (value: number, alpha: number = 1) => { + let color = ''; + switch (true) { + case value < 70: + color = getColor('critical', alpha); + break; + case value >= 70 && value < 80: + color = getColor('warning', alpha); + break; + case value >= 80 && value < 90: + color = getColor('major', alpha); + break; + case value >= 90: + color = getColor('info', alpha); + break; + } + return color; +}; + +const keyColor = (value, alpha = 1) => { + return getColor(value, alpha); +}; + +export { colorEnum, getColor, cptColor, keyColor }; diff --git a/src/views/screen/index.vue b/src/views/screen/index.vue index 1c4c22d..4ec9ec3 100644 --- a/src/views/screen/index.vue +++ b/src/views/screen/index.vue @@ -45,6 +45,7 @@ import ScaleScreen from './components/common/scale-screen'; import Headers from './components/Headers.vue'; import ItemWrap from './components/common/item-wrap'; import AccessStatus from './components/AccessStatus.vue'; +import MajorSystemHealthStatus from './components/MajorSystemHealthStatus.vue'; /** 机构切换配置 */ const orgList = ref([ @@ -82,6 +83,9 @@ const getComponent = (componentName) => { case 'AccessStatus': component = shallowRef(AccessStatus); break; + case 'MajorSystemHealthStatus': + component = shallowRef(MajorSystemHealthStatus); + break; } return component; }; @@ -91,6 +95,9 @@ const getComponentClass = computed(() => (componentName) => { case 'AccessStatus': className = 'content_kb-item'; break; + case 'MajorSystemHealthStatus': + className = 'content_lb-item'; + break; } return className; }); @@ -102,14 +109,20 @@ const getLayout = (id) => { switch (id) { case 'all': layoutDataValue = { - left: [{ title: '综合看板', componentName: 'AccessStatus' }], + left: [ + { title: '综合看板', componentName: 'AccessStatus' }, + { title: '重要系统健康状态', componentName: 'MajorSystemHealthStatus' }, + ], center: [], right: [], }; break; case 'org1': layoutDataValue = { - left: [{ title: '综合看板', componentName: 'AccessStatus' }], + left: [ + { title: '综合看板', componentName: 'AccessStatus' }, + { title: '重要系统健康状态', componentName: 'MajorSystemHealthStatus' }, + ], center: [], right: [], }; @@ -147,7 +160,7 @@ let timer = null; const setTimer = () => { timer = setInterval(() => { refreshRequest(); - }); + }, 60000); }; const clearTimer = () => { clearInterval(timer);