| | |
| | | <div class="w-full flex-column"> |
| | | <div class="flex mb-4 flex-wrap flex-0"> |
| | | <!-- TimeRange v-model 跟 @change 中的值会不一样,以@change 中为准 --> |
| | | <template v-if="visibleParams && visibleParams.length > 0"> |
| | | <template v-if="visibleParams && visibleParams.length > 0 && showFilter"> |
| | | <component |
| | | class="flex-0 m-2" |
| | | v-model="visibleParams[index].value" |
| | |
| | | :data="item" |
| | | :originData="originData" |
| | | @change="(val) => handleQueryChange(val, item)" |
| | | :disabled="chartLoading" |
| | | :disabled="chartLoading ||disabled" |
| | | ></component> |
| | | </template> |
| | | <slot> </slot> |
| | |
| | | import { axisLabelFormatter } from '/@/utils/chart'; |
| | | import { deepClone } from '/@/utils/other'; |
| | | import { debounce } from '/@/utils/util'; |
| | | import { IS_DAY_LIST } from './components/constants'; |
| | | const chartRef = ref<HTMLDivElement>(null); |
| | | |
| | | const showMode = ref(DisplayModeType.Chart); |
| | |
| | | // type: Object as PropType<RecordSet>, |
| | | // }, |
| | | // }); |
| | | |
| | | const emits = defineEmits<{ |
| | | (event: 'updateQuery', res: any): void; |
| | | }>(); |
| | |
| | | type: String, |
| | | required: false, |
| | | }, |
| | | showFilter: { |
| | | type: Boolean, |
| | | default: true, |
| | | }, |
| | | disabled:{ |
| | | type:Boolean, |
| | | default:false, |
| | | } |
| | | }) as { |
| | | data: any; |
| | | summaryIndex: number; |
| | | showFilter: Boolean; |
| | | }; |
| | | |
| | | const tableLimitHeight = props.chartHeight == undefined ? undefined : document.body.clientHeight * 0.7; |
| | | |
| | | const chartLoading = ref(false); |
| | |
| | | }; |
| | | |
| | | const visibleParams = ref(getVisibleParams(props.data)); |
| | | |
| | | const checkIsDayTime = () => { |
| | | if (!props.showFilter) return false; |
| | | const stepFilter = visibleParams.value.find((item) => item.type === RecordSetParamsType.Step); |
| | | if (!stepFilter.origin.step_value) return false; |
| | | |
| | | return IS_DAY_LIST.includes(stepFilter.origin.step_value); |
| | | }; |
| | | // 跨度是否是日期形式 |
| | | // const isDayTime = checkIsDayTime(); |
| | | let groupedValues = null; |
| | | let timeIndex = undefined; |
| | | let valueIndex = undefined; |
| | |
| | | }; |
| | | const { chartContainerResize, chartInstance } = useDrawChatChart({ chartRef, drawChart }); |
| | | |
| | | const updateCurrent = (res) => { |
| | | const updateCurrent = (res, isNew = false) => { |
| | | const title = res?.title; |
| | | const values = res?.values ?? []; |
| | | //#region ====================== 刷新当前 filter ====================== |
| | | // 只更新 value,不直接覆盖,防止丢失响应性 |
| | | updateVisibleParams(res); |
| | | // updateVisibleParams(res); |
| | | //#endregion |
| | | groupedValues = _.groupBy(values, (item) => item[nameIndex]); |
| | | if (isMultiCompare.value) { |
| | | handleMultiCompare(); |
| | | } else { |
| | | (currentSeries.value = |
| | | groupedValues && |
| | | Object.keys(groupedValues).map((item, index) => { |
| | | const values = groupedValues[item]; |
| | | return { |
| | | name: currentSeries.value[index].name, |
| | | data: values.map((item) => [item[timeIndex], item[valueIndex]]), |
| | | }; |
| | | })), |
| | | chartInstance.value.setOption({ |
| | | title: { |
| | | text: title, |
| | | }, |
| | | series: currentSeries.value, |
| | | }); |
| | | if (isNew) { |
| | | setNewOption(); |
| | | } else { |
| | | (currentSeries.value = |
| | | groupedValues && |
| | | Object.keys(groupedValues).map((item, index) => { |
| | | const values = groupedValues[item]; |
| | | return { |
| | | name: item === 'default' ? '' : item, |
| | | data: values.map((item) => [item[timeIndex], item[valueIndex]]), |
| | | }; |
| | | })), |
| | | chartInstance.value?.setOption({ |
| | | title: { |
| | | text: title, |
| | | }, |
| | | series: currentSeries.value, |
| | | }); |
| | | } |
| | | } |
| | | }; |
| | | |
| | |
| | | updateCurrent(newSummary); |
| | | }; |
| | | |
| | | const updateIndexSummary = (summary) => { |
| | | updateCurrent(summary?.[props.summaryIndex], true); |
| | | }; |
| | | |
| | | defineExpose({ |
| | | drawChart, |
| | | isMultiCompare, |
| | | handleMultiCompare, |
| | | handleData, |
| | | updateAll, |
| | | |
| | | updateIndexSummary, |
| | | }); |
| | | </script> |
| | | <style scoped lang="scss"></style> |