Commit a37815a1553185909a1dc3341be98f4e3902f43e
1 parent
03d49b29
fix(src/packages): 修复仪表盘,ws推送数据,有时候变回0了
Showing
6 changed files
with
273 additions
and
1 deletions
1 | +import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public' | |
2 | +import { OverrideDialConfig } from './index' | |
3 | +import { CreateComponentType } from '@/packages/index.d' | |
4 | +import cloneDeep from 'lodash/cloneDeep' | |
5 | + | |
6 | +export const includes = [] | |
7 | +const option = { | |
8 | + backgroundColor: '#0E1327', | |
9 | + dataset:70, | |
10 | + series: [{ | |
11 | + type: "gauge", | |
12 | + data: [{ | |
13 | + value: 70, | |
14 | + itemStyle: { // 指针样式 | |
15 | + color: '#2AF4FF' | |
16 | + } | |
17 | + }], | |
18 | + min: 0, //最小刻度 | |
19 | + max: 100, //最大刻度 | |
20 | + splitNumber: 10, //刻度数量 | |
21 | + center: ['50%', '55%'], | |
22 | + radius: '80%', | |
23 | + axisLine: { | |
24 | + lineStyle: { | |
25 | + color: [ | |
26 | + [0, 'rgba(0,212,230,0.5)'], | |
27 | + [1, 'rgba(28,128,245,0)'] | |
28 | + ], | |
29 | + width: 170 | |
30 | + } | |
31 | + }, | |
32 | + axisLabel: { // 文字样式 | |
33 | + color: '#eee', | |
34 | + fontSize: 14, | |
35 | + }, | |
36 | + axisTick: { | |
37 | + show: false, | |
38 | + }, | |
39 | + splitLine: { | |
40 | + show: false, | |
41 | + }, | |
42 | + detail: { | |
43 | + show: false, | |
44 | + }, | |
45 | + pointer: { | |
46 | + length: '80%', | |
47 | + width: 4 | |
48 | + }, | |
49 | + animationDuration: 2000, | |
50 | + }, | |
51 | + { | |
52 | + name: '外部刻度', | |
53 | + type: 'gauge', | |
54 | + center: ['50%', '55%'], | |
55 | + radius: '90%', | |
56 | + axisLine: { | |
57 | + show: true, | |
58 | + lineStyle: { | |
59 | + width: 25, | |
60 | + color: [ // 表盘外部颜色 | |
61 | + [0, '#1369E380'], | |
62 | + [1, '#1369E380'] | |
63 | + ], | |
64 | + } | |
65 | + }, | |
66 | + axisLabel: { | |
67 | + show:false, | |
68 | + }, | |
69 | + axisTick: { | |
70 | + splitNumber: 5, | |
71 | + lineStyle: { //刻度颜色 | |
72 | + color: '#42E5FB', | |
73 | + width: 2, | |
74 | + }, | |
75 | + }, | |
76 | + splitLine: { | |
77 | + length: 15, | |
78 | + lineStyle: { | |
79 | + color: '#42E5FB', | |
80 | + } | |
81 | + }, | |
82 | + }, | |
83 | + ] | |
84 | +}; | |
85 | + | |
86 | +export default class Config extends PublicConfigClass implements CreateComponentType { | |
87 | + public key: string = OverrideDialConfig.key | |
88 | + public chartConfig = cloneDeep(OverrideDialConfig) | |
89 | + // 图表配置项 | |
90 | + public option = echartOptionProfixHandle(option, includes) | |
91 | +} | ... | ... |
1 | +<template> | |
2 | + <!-- 遍历 seriesList --> | |
3 | + <CollapseItem :name="`圆环`" :expanded="true"> | |
4 | + <SettingItemBox name="数据"> | |
5 | + <SettingItem name="数值"> | |
6 | + <n-input-number v-model:value="config.dataset" :min="dialConfig.min" :max="dialConfig.max" :step="1" size="small" placeholder="数值"> | |
7 | + </n-input-number> | |
8 | + </SettingItem> | |
9 | + </SettingItemBox> | |
10 | + <!-- Echarts 全局设置 --> | |
11 | + <!-- 表盘刻度字体 --> | |
12 | + <SettingItemBox name="字体"> | |
13 | + <SettingItem name="颜色"> | |
14 | + <n-color-picker size="small" :modes="['hex']" v-model:value="dialConfig.axisLabel.color"></n-color-picker> | |
15 | + </SettingItem> | |
16 | + <SettingItem name="字体大小"> | |
17 | + <n-input-number | |
18 | + v-model:value="dialConfig.axisLabel.fontSize" | |
19 | + :min="0" | |
20 | + :step="1" | |
21 | + size="small" | |
22 | + placeholder="字体大小" | |
23 | + > | |
24 | + </n-input-number> | |
25 | + </SettingItem> | |
26 | + </SettingItemBox> | |
27 | + <!-- 表盘 --> | |
28 | + <SettingItemBox name="表盘外部"> | |
29 | + <SettingItem name="颜色" > | |
30 | + <n-color-picker size="small" :modes="['hex']" v-model:value="config.series[1].axisLine.lineStyle.color[1][1]"></n-color-picker> | |
31 | + </SettingItem> | |
32 | + </SettingItemBox> | |
33 | + <!-- 指针 --> | |
34 | + <SettingItemBox name="指针"> | |
35 | + <SettingItem name="颜色" > | |
36 | + <n-color-picker size="small" :modes="['hex']" v-model:value="dialConfig.data[0].itemStyle.color"></n-color-picker> | |
37 | + </SettingItem> | |
38 | + <SettingItem name="宽度"> | |
39 | + <n-input-number v-model:value="dialConfig.pointer.width" :min="0" :step="1" size="small" placeholder="数值"> | |
40 | + </n-input-number> | |
41 | + </SettingItem> | |
42 | + </SettingItemBox> | |
43 | + <SettingItemBox name="刻度"> | |
44 | + <SettingItem name="最小值"> | |
45 | + <n-input-number v-model:value="dialConfig.min" :min="0" :step="1" size="small" placeholder="数值"> | |
46 | + </n-input-number> | |
47 | + </SettingItem> | |
48 | + <SettingItem name="最大值"> | |
49 | + <n-input-number v-model:value="dialConfig.max" :min="0" :step="1" size="small" placeholder="数值"> | |
50 | + </n-input-number> | |
51 | + </SettingItem> | |
52 | + <SettingItem name="颜色" > | |
53 | + <n-color-picker size="small" :modes="['hex']" v-model:value="config.series[1].axisTick.lineStyle.color" @update:value="updateClick"></n-color-picker> | |
54 | + </SettingItem> | |
55 | + </SettingItemBox> | |
56 | + | |
57 | + </CollapseItem> | |
58 | + </template> | |
59 | + | |
60 | + <script setup lang="ts"> | |
61 | + import { PropType, computed } from 'vue' | |
62 | + import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting' | |
63 | + import { GlobalThemeJsonType } from '@/settings/chartThemes' | |
64 | + | |
65 | + const props = defineProps({ | |
66 | + optionData: { | |
67 | + type: Object as PropType<GlobalThemeJsonType>, | |
68 | + required: true | |
69 | + } | |
70 | + }) | |
71 | + | |
72 | + const config = computed(() => { | |
73 | + return props.optionData | |
74 | + }) | |
75 | + | |
76 | + const dialConfig = computed(() => { | |
77 | + return props.optionData.series[0] | |
78 | + }) | |
79 | + | |
80 | + const updateClick = (val: any) => { | |
81 | + props.optionData.series[1].splitLine.lineStyle.color=val | |
82 | + } | |
83 | + </script> | |
84 | + | |
\ No newline at end of file | ... | ... |
1 | +import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d' | |
2 | +import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Charts/index.d' | |
3 | +import { useWidgetKey } from '@/packages/external/useWidgetKey' | |
4 | + | |
5 | +const { key, conKey, chartKey } = useWidgetKey('OverrideDial', true) | |
6 | + | |
7 | +export const OverrideDialConfig: ConfigType = { | |
8 | + key, | |
9 | + chartKey, | |
10 | + conKey, | |
11 | + title: '自定义表盘', | |
12 | + category: ChatCategoryEnum.MORE, | |
13 | + categoryName: ChatCategoryEnumName.MORE, | |
14 | + package: PackagesCategoryEnum.CHARTS, | |
15 | + chartFrame: ChartFrameEnum.COMMON, | |
16 | + image: 'dial.png' | |
17 | +} | ... | ... |
1 | +<template> | |
2 | + <v-chart :theme="themeColor" :init-options="initOptions" :option="option.value" autoresize> </v-chart> | |
3 | +</template> | |
4 | + | |
5 | +<script setup lang="ts"> | |
6 | +import { PropType, reactive, watch } from 'vue' | |
7 | +import VChart from 'vue-echarts' | |
8 | +import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook' | |
9 | +import { use } from 'echarts/core' | |
10 | +import { CanvasRenderer } from 'echarts/renderers' | |
11 | +import { PieChart } from 'echarts/charts' | |
12 | +import { mergeTheme } from '@/packages/public/chart' | |
13 | +import config, { includes } from './config' | |
14 | +import { useChartDataFetch } from '@/hooks' | |
15 | +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' | |
16 | +import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components' | |
17 | + | |
18 | +const props = defineProps({ | |
19 | + themeSetting: { | |
20 | + type: Object, | |
21 | + required: true | |
22 | + }, | |
23 | + themeColor: { | |
24 | + type: Object, | |
25 | + required: true | |
26 | + }, | |
27 | + chartConfig: { | |
28 | + type: Object as PropType<config>, | |
29 | + required: true | |
30 | + } | |
31 | +}) | |
32 | + | |
33 | +const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting) | |
34 | + | |
35 | +use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent, TitleComponent]) | |
36 | + | |
37 | +const option = reactive({ | |
38 | + value: {} | |
39 | +}) | |
40 | + | |
41 | +const dataHandle = (newData: any) => { | |
42 | + let config = props.chartConfig.option | |
43 | + config.series[0].data[0].value = newData | |
44 | + option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes) | |
45 | + option.value = props.chartConfig.option | |
46 | +} | |
47 | + | |
48 | +// 配置时 | |
49 | +watch( | |
50 | + () => props.chartConfig.option.dataset, | |
51 | + newData => { | |
52 | + try { | |
53 | + dataHandle(newData) | |
54 | + } catch (error) { | |
55 | + console.log(error) | |
56 | + } | |
57 | + }, | |
58 | + { | |
59 | + immediate: true, | |
60 | + deep: false | |
61 | + } | |
62 | +) | |
63 | + | |
64 | +// 预览时 | |
65 | +useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any) => { | |
66 | + if (Object.prototype.toString.call(resData) === '[object Object]') { | |
67 | + const key = Object.keys(resData?.data) | |
68 | + const value = Object.fromEntries(resData?.data[key[0]]) | |
69 | + const singleKey = Object.keys(value) | |
70 | + const singleValue = value[singleKey[0]] | |
71 | + option.value.series[0].data[0].value = singleValue | |
72 | + } else { | |
73 | + option.value.series[0].data[0].value = resData | |
74 | + } | |
75 | +}) | |
76 | +</script> | ... | ... |
... | ... | @@ -23,6 +23,7 @@ import { OverridePieCircleConfig } from '@/packages/components/external/Charts/P |
23 | 23 | import { OverrideMapBaseConfig } from '@/packages/components/external/Charts/Maps/OverrideMapBase' |
24 | 24 | import { OverrideVideoConfig } from '@/packages/components/external/Informations/Mores/OverrideVideo' |
25 | 25 | import { OverrideWaterPoloConfig } from '@/packages/components/external/Charts/Mores/OverrideWaterPolo' |
26 | +import { OverrideDialConfig } from '@/packages/components/external/Charts/Mores/OverrideDial' | |
26 | 27 | import { OverrideLineRealTimeConfig } from '@/packages/components/external/Charts/Lines/OverrideLineRealTime' |
27 | 28 | import { ThreeDimensionalConfig } from '@/packages/components/external/Decorates/Three/ThreeDimensional' |
28 | 29 | import { Headline1Config } from '@/packages/components/external/Decorates/Headline/Headline1' |
... | ... | @@ -104,6 +105,7 @@ export function useInjectLib(packagesList: EPackagesType) { |
104 | 105 | addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverridePieCircleConfig)//重写图表下的饼图 |
105 | 106 | addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideMapBaseConfig)//重写图表下的地图 |
106 | 107 | addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideWaterPoloConfig)//重写图表下的水球图 |
108 | + addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideDialConfig)//重写图表下的表盘 | |
107 | 109 | // |
108 | 110 | } |
109 | 111 | ... | ... |
... | ... | @@ -24,7 +24,8 @@ export const hideAsideComponentsObj = { |
24 | 24 | 'VImageCarousel', //轮播图 |
25 | 25 | 'VVideo', //视频 |
26 | 26 | 'VIframe', //远程网页 |
27 | - 'VWaterPolo' //水球图 | |
27 | + 'VWaterPolo', //水球图 | |
28 | + 'VDial', //表盘 | |
28 | 29 | ], |
29 | 30 | Texts: [ |
30 | 31 | 'VTextGradient', //渐变文字 |
... | ... | @@ -52,6 +53,7 @@ export const hideAsideComponentsObj = { |
52 | 53 | 'VIframe', //远程网页 |
53 | 54 | 'VImageCarousel', //轮播图 |
54 | 55 | 'VWaterPolo', //水球图 |
56 | + 'VDial', //表盘 | |
55 | 57 | 'VInputsTab', //标签选择器 |
56 | 58 | 'VInputsSelect', //下拉选择器 |
57 | 59 | 'VInputsDate' //日期选择器 | ... | ... |