Commit 34e5e476c228bee715a282a508bea8204567d908
Committed by
xp.Huang
1 parent
c0a4a0fb
perf(src/views): 优化公共接口选择其他接口,表单数据还缓存上一次的数据
Showing
5 changed files
with
57 additions
and
7 deletions
| ... | ... | @@ -62,6 +62,8 @@ const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSe |
| 62 | 62 | |
| 63 | 63 | const { queryCondition } = toRefs(props.chartConfig.option) |
| 64 | 64 | |
| 65 | +const { limit, startTs, endTs, interval, agg } = toRefs(props.chartConfig.request.requestParams.Params) | |
| 66 | + | |
| 65 | 67 | use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent]) |
| 66 | 68 | |
| 67 | 69 | const chartEditStore = useChartEditStore() |
| ... | ... | @@ -286,6 +288,23 @@ const handleAggChange = (value: string) => { |
| 286 | 288 | } |
| 287 | 289 | |
| 288 | 290 | onMounted(() => { |
| 291 | + if (Reflect.get(props.chartConfig.request.requestParams.Params, 'startTs')) { | |
| 292 | + queryCondition.value.timeRange[0] = startTs.value | |
| 293 | + getPacketIntervalByRange(queryCondition.value.timeRange) | |
| 294 | + } | |
| 295 | + if (Reflect.get(props.chartConfig.request.requestParams.Params, 'endTs')) { | |
| 296 | + queryCondition.value.timeRange[1] = endTs.value | |
| 297 | + getPacketIntervalByRange(queryCondition.value.timeRange) | |
| 298 | + } | |
| 299 | + if (Reflect.get(props.chartConfig.request.requestParams.Params, 'agg')) { | |
| 300 | + queryCondition.value.agg = agg.value | |
| 301 | + } | |
| 302 | + if (Reflect.get(props.chartConfig.request.requestParams.Params, 'interval')) { | |
| 303 | + queryCondition.value.interval = interval.value | |
| 304 | + } | |
| 305 | + if (Reflect.get(props.chartConfig.request.requestParams.Params, 'limit')) { | |
| 306 | + queryCondition.value.limit = limit.value | |
| 307 | + } | |
| 289 | 308 | seriesDataMaxLength = dataJson.source.length |
| 290 | 309 | if (props.chartConfig.option.isCarousel) { |
| 291 | 310 | addPieInterval(undefined, true) | ... | ... |
| ... | ... | @@ -12,6 +12,12 @@ |
| 12 | 12 | <n-input-number :min="0.1" step="0.5" v-model:value="optionData.duration"></n-input-number> |
| 13 | 13 | </SettingItem> |
| 14 | 14 | </SettingItemBox> |
| 15 | + <setting-item-box name="范围"> | |
| 16 | + <setting-item name="范围"> | |
| 17 | + <n-input-number :min="0" :max="99" v-model:value="optionData.valueRange[0]" /> | |
| 18 | + <n-input-number :min="1" :max="100" v-model:value="optionData.valueRange[1]" /> | |
| 19 | + </setting-item> | |
| 20 | + </setting-item-box> | |
| 15 | 21 | <setting-item-box name="数据源"> |
| 16 | 22 | <setting-item name="数据"> |
| 17 | 23 | <n-input-number :min="0" :max="100" v-model:value="optionData.dataset" /> | ... | ... |
| ... | ... | @@ -260,7 +260,7 @@ |
| 260 | 260 | d="M202.38 399.21C205.97 399.21 208.88 402.12 208.88 405.71C208.88 409.3 205.97 412.21 202.38 412.21C198.79 412.21 195.88 409.3 195.88 405.71C195.88 402.12 198.79 399.21 202.38 399.21L202.38 399.21Z" |
| 261 | 261 | /> |
| 262 | 262 | <animateMotion |
| 263 | - path="M0,0 L0 -5 L0 -13 L0 -15 L0 -17 L0 -19 L0 -22 L0 -26 L0 -36 | |
| 263 | + path="M0,0 L0 -5 L0 -13 L0 -15 L0 -17 L0 -19 L0 -22 L0 -26 L0 -36 | |
| 264 | 264 | L0 -46 L0 -50 L0 -59 L0 -60 L0 -69 L0 -71 L0 -79 L0 -89 L0 -91 L0 -122 L0 -132 L0 -142 L0 -162 L0 -172 L0 -182 L0 -192 |
| 265 | 265 | " |
| 266 | 266 | begin="1.5s" |
| ... | ... | @@ -278,7 +278,7 @@ |
| 278 | 278 | d="M231.69 443.18C235.28 443.18 238.19 446.09 238.19 449.68C238.19 453.27 235.28 456.18 231.69 456.18C228.1 456.18 225.19 453.27 225.19 449.68C225.19 446.09 228.1 443.18 231.69 443.18L231.69 443.18Z" |
| 279 | 279 | /> |
| 280 | 280 | <animateMotion |
| 281 | - path="M0,0 L0 -5 L0 -13 L0 -15 L0 -17 L0 -19 L0 -22 L0 -26 L0 -36 | |
| 281 | + path="M0,0 L0 -5 L0 -13 L0 -15 L0 -17 L0 -19 L0 -22 L0 -26 L0 -36 | |
| 282 | 282 | L0 -46 L0 -50 L0 -59 L0 -60 L0 -69 L0 -71 L0 -79 L0 -89 L0 -91 L0 -122 L0 -132 L0 -142 L0 -162 L0 -172 L0 -182 L0 -192 |
| 283 | 283 | " |
| 284 | 284 | begin="1.5s" |
| ... | ... | @@ -296,7 +296,7 @@ |
| 296 | 296 | d="M231.69 443.18C235.28 443.18 238.19 446.09 238.19 449.68C238.19 453.27 235.28 456.18 231.69 456.18C228.1 456.18 225.19 453.27 225.19 449.68C225.19 446.09 228.1 443.18 231.69 443.18L231.69 443.18Z" |
| 297 | 297 | /> |
| 298 | 298 | <animateMotion |
| 299 | - path="M0,0 L0 -5 L0 -13 L0 -15 L0 -17 L0 -19 L0 -22 L0 -26 L0 -36 | |
| 299 | + path="M0,0 L0 -5 L0 -13 L0 -15 L0 -17 L0 -19 L0 -22 L0 -26 L0 -36 | |
| 300 | 300 | L0 -46 L0 -50 L0 -59 L0 -60 L0 -69 L0 -71 L0 -79 L0 -89 L0 -91 L0 -122 L0 -132 L0 -142 L0 -162 L0 -172 L0 -182 L0 -192 |
| 301 | 301 | " |
| 302 | 302 | begin="1.5s" |
| ... | ... | @@ -656,7 +656,7 @@ |
| 656 | 656 | </div> |
| 657 | 657 | </template> |
| 658 | 658 | <script setup lang="ts"> |
| 659 | -import { PropType, toRefs } from 'vue' | |
| 659 | +import { PropType, toRefs, watch } from 'vue' | |
| 660 | 660 | import { CreateComponentType } from '@/packages/index.d' |
| 661 | 661 | import { option } from './config' |
| 662 | 662 | import { useChartDataFetch } from '@/hooks' |
| ... | ... | @@ -671,13 +671,29 @@ const props = defineProps({ |
| 671 | 671 | |
| 672 | 672 | const { w, h } = toRefs(props.chartConfig.attr) |
| 673 | 673 | |
| 674 | -const { dataset, unitStr, colorConfig, openAnim, duration, fontConfig } = toRefs( | |
| 674 | +const { dataset, unitStr, colorConfig, openAnim, duration, fontConfig, valueRange } = toRefs( | |
| 675 | 675 | props.chartConfig.option as typeof option |
| 676 | 676 | ) |
| 677 | 677 | |
| 678 | +watch(()=>dataset.value,(newData)=>{ | |
| 679 | + if((Number(newData)) >= valueRange.value[1]){ | |
| 680 | + newData = valueRange.value[1] | |
| 681 | + } | |
| 682 | + if((Number(newData)) <= valueRange.value[0]){ | |
| 683 | + newData = valueRange.value[0] | |
| 684 | + } | |
| 685 | + dataset.value = newData as number | |
| 686 | +}) | |
| 687 | + | |
| 678 | 688 | // 预览更新 |
| 679 | -useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number) => { | |
| 680 | - dataset.value = newData | |
| 689 | +useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number | string) => { | |
| 690 | + if((Number(newData)) >= valueRange.value[1]){ | |
| 691 | + newData = valueRange.value[1] | |
| 692 | + } | |
| 693 | + if((Number(newData)) <= valueRange.value[0]){ | |
| 694 | + newData = valueRange.value[0] | |
| 695 | + } | |
| 696 | + dataset.value = newData as number | |
| 681 | 697 | }) |
| 682 | 698 | </script> |
| 683 | 699 | ... | ... |
| ... | ... | @@ -448,9 +448,17 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { |
| 448 | 448 | Reflect.deleteProperty(params, key) |
| 449 | 449 | }) |
| 450 | 450 | params[BuiltInVariable.SELECT_TIME_AGGREGATION] = {} |
| 451 | + params[BuiltInVariable.SELECT_TIME_AGGREGATION].agg = null | |
| 452 | + params[BuiltInVariable.SELECT_TIME_AGGREGATION].limit = 7 | |
| 453 | + params[BuiltInVariable.SELECT_TIME_AGGREGATION].interval = null | |
| 454 | + getSelectDeviceAttr.value.value = null | |
| 455 | + getSelectOrgTree.value.value = null | |
| 456 | + getSelectDeviceProfile.value.value = null | |
| 457 | + getSelectDevice.value.value = null | |
| 451 | 458 | } |
| 452 | 459 | |
| 453 | 460 | const setDynamicFormValue = (params: Recordable) => { |
| 461 | + clearParams() | |
| 454 | 462 | setParams(params) |
| 455 | 463 | getOrgOption() |
| 456 | 464 | getDeviceProfileOption() | ... | ... |