Commit 7b32138c1cc1375b08de27f05ec2dabb7afcc061
1 parent
f3886823
fix(src/packages): 修复请求属性的时候,属性名称没显示,预览显示正常
Showing
1 changed file
with
44 additions
and
2 deletions
| @@ -16,13 +16,13 @@ | @@ -16,13 +16,13 @@ | ||
| 16 | </template> | 16 | </template> |
| 17 | 17 | ||
| 18 | <script setup lang="ts"> | 18 | <script setup lang="ts"> |
| 19 | -import { PropType, computed, watch, ref, onMounted, unref, toRaw, toRefs } from 'vue' | 19 | +import { PropType, computed, watch, ref, onMounted, unref, toRaw, toRefs,nextTick } from 'vue' |
| 20 | import VChart from 'vue-echarts' | 20 | import VChart from 'vue-echarts' |
| 21 | import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook' | 21 | import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook' |
| 22 | import { use } from 'echarts/core' | 22 | import { use } from 'echarts/core' |
| 23 | import { CanvasRenderer } from 'echarts/renderers' | 23 | import { CanvasRenderer } from 'echarts/renderers' |
| 24 | import { LineChart } from 'echarts/charts' | 24 | import { LineChart } from 'echarts/charts' |
| 25 | -import config, { includes } from './config' | 25 | +import config, { includes,seriesItem } from './config' |
| 26 | import { mergeTheme } from '@/packages/public/chart' | 26 | import { mergeTheme } from '@/packages/public/chart' |
| 27 | import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' | 27 | import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' |
| 28 | import { useChartDataFetch } from '@/hooks' | 28 | import { useChartDataFetch } from '@/hooks' |
| @@ -32,6 +32,8 @@ import dataJson from './data.json' | @@ -32,6 +32,8 @@ import dataJson from './data.json' | ||
| 32 | import { useFullScreen } from '../../utls/fullScreen' | 32 | import { useFullScreen } from '../../utls/fullScreen' |
| 33 | import { SocketReceiveMessageType } from '@/store/external/modules/socketStore.d' | 33 | import { SocketReceiveMessageType } from '@/store/external/modules/socketStore.d' |
| 34 | import { useAssembleDataHooks } from '@/hooks/external/useAssembleData.hook' | 34 | import { useAssembleDataHooks } from '@/hooks/external/useAssembleData.hook' |
| 35 | +import isObject from 'lodash/isObject' | ||
| 36 | +import cloneDeep from 'lodash/cloneDeep' | ||
| 35 | 37 | ||
| 36 | const props = defineProps({ | 38 | const props = defineProps({ |
| 37 | themeSetting: { | 39 | themeSetting: { |
| @@ -161,6 +163,45 @@ watch( | @@ -161,6 +163,45 @@ watch( | ||
| 161 | } | 163 | } |
| 162 | ) | 164 | ) |
| 163 | 165 | ||
| 166 | +// dataset 无法变更条数的补丁 | ||
| 167 | +watch( | ||
| 168 | + () => props.chartConfig.option.dataset, | ||
| 169 | + (newData: { dimensions: any }, oldData) => { | ||
| 170 | + try { | ||
| 171 | + if (!isObject(newData) || !('dimensions' in newData)) return | ||
| 172 | + if (Array.isArray(newData?.dimensions)) { | ||
| 173 | + const seriesArr = [] | ||
| 174 | + // 对oldData进行判断,防止传入错误数据之后对旧维度判断产生干扰 | ||
| 175 | + // 此处计算的是dimensions的Y轴维度,若是dimensions.length为0或1,则默认为1,排除X轴维度干扰 | ||
| 176 | + const oldDimensions = | ||
| 177 | + Array.isArray(oldData?.dimensions) && oldData.dimensions.length >= 1 ? oldData.dimensions.length : 1 | ||
| 178 | + const newDimensions = newData.dimensions.length >= 1 ? newData.dimensions.length : 1 | ||
| 179 | + const dimensionsGap = newDimensions - oldDimensions | ||
| 180 | + if (dimensionsGap < 0) { | ||
| 181 | + props.chartConfig.option.series.splice(newDimensions - 1) | ||
| 182 | + } else if (dimensionsGap > 0) { | ||
| 183 | + if (!oldData || !oldData?.dimensions || !Array.isArray(oldData?.dimensions) || !oldData?.dimensions.length) { | ||
| 184 | + props.chartConfig.option.series = [] | ||
| 185 | + } | ||
| 186 | + for (let i = 0; i < dimensionsGap; i++) { | ||
| 187 | + seriesArr.push(cloneDeep(seriesItem)) | ||
| 188 | + } | ||
| 189 | + props.chartConfig.option.series.push(...seriesArr) | ||
| 190 | + } | ||
| 191 | + replaceMergeArr.value = ['series'] | ||
| 192 | + nextTick(() => { | ||
| 193 | + replaceMergeArr.value = [] | ||
| 194 | + }) | ||
| 195 | + } | ||
| 196 | + } catch (error) { | ||
| 197 | + console.log(error) | ||
| 198 | + } | ||
| 199 | + }, | ||
| 200 | + { | ||
| 201 | + deep: false | ||
| 202 | + } | ||
| 203 | +) | ||
| 204 | + | ||
| 164 | //fix 修复v-chart图表绑定联动组件视图不更新问题 | 205 | //fix 修复v-chart图表绑定联动组件视图不更新问题 |
| 165 | const updateVChart = (newData: SocketReceiveMessageType) => { | 206 | const updateVChart = (newData: SocketReceiveMessageType) => { |
| 166 | if (!newData) return | 207 | if (!newData) return |
| @@ -170,6 +211,7 @@ const updateVChart = (newData: SocketReceiveMessageType) => { | @@ -170,6 +211,7 @@ const updateVChart = (newData: SocketReceiveMessageType) => { | ||
| 170 | unref(realTimeList).splice(0, 1) | 211 | unref(realTimeList).splice(0, 1) |
| 171 | } | 212 | } |
| 172 | realTimeList.value.push(record) | 213 | realTimeList.value.push(record) |
| 214 | + console.log(toRaw(unref(realTimeList))) | ||
| 173 | vChartRef.value?.setOption({ | 215 | vChartRef.value?.setOption({ |
| 174 | dataset: { | 216 | dataset: { |
| 175 | dimensions: ['ts', ...keys], | 217 | dimensions: ['ts', ...keys], |