Commit a37815a1553185909a1dc3341be98f4e3902f43e

Authored by fengwotao
1 parent 03d49b29

fix(src/packages): 修复仪表盘,ws推送数据,有时候变回0了

  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' //日期选择器
... ...