| | |
| | | <!-- 昨日供水管网概况 --> |
| | | <template> |
| | | <div class="w-full"> |
| | | <div class="flex mb-4 flex-wrap"> |
| | | <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="paramsValueList[index].value" |
| | | v-model="visibleParams[index].value" |
| | | v-for="(item, index) in visibleParams as any" |
| | | :key="item.id" |
| | | :id="item.id" |
| | |
| | | :data="item" |
| | | :originData="originData" |
| | | @change="(val) => handleQueryChange(val, item)" |
| | | :disabled="chartLoading" |
| | | :disabled="chartLoading ||disabled" |
| | | ></component> |
| | | </template> |
| | | <slot> </slot> |
| | |
| | | <DisplayMode class="ml-auto" v-model="showMode" @change="displayModeChange" /> |
| | | </div> |
| | | |
| | | <RecordSetTable :data="tableData" v-if="tableIsShow" :key="tableKey" /> |
| | | <div v-show="!tableIsShow" :style="{ height: chartHeight }" v-resize="chartContainerResize" v-loading="chartLoading"> |
| | | <RecordSetTable |
| | | :data="tableData" |
| | | v-if="tableIsShow" |
| | | :key="tableKey" |
| | | :tableLimitHeight="tableLimitHeight" |
| | | :class="{ 'flex-auto': chartHeight == undefined }" |
| | | /> |
| | | <div |
| | | v-show="!tableIsShow" |
| | | :style="{ height: chartHeight }" |
| | | :class="{ 'flex-auto': chartHeight == undefined }" |
| | | v-resize="chartContainerResize" |
| | | v-loading="chartLoading" |
| | | > |
| | | <div ref="chartRef"></div> |
| | | </div> |
| | | </div> |
| | |
| | | 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); |
| | |
| | | }, |
| | | chartHeight: { |
| | | type: String, |
| | | default: '20rem', |
| | | required: false, |
| | | }, |
| | | showFilter: { |
| | | type: Boolean, |
| | | default: true, |
| | | }, |
| | | disabled:{ |
| | | type:Boolean, |
| | | default:false, |
| | | } |
| | | }) as { |
| | | data: any; |
| | | summaryIndex:number |
| | | summaryIndex: number; |
| | | showFilter: Boolean; |
| | | }; |
| | | |
| | | const tableLimitHeight = props.chartHeight == undefined ? undefined : document.body.clientHeight * 0.7; |
| | | |
| | | const chartLoading = ref(false); |
| | | |
| | | const stepOptions = [ |
| | |
| | | const getVisibleParams = (data) => { |
| | | // const visibleList = props.data?.params?.filter((item) => !item?.hide) ?? []; |
| | | // index 作为 id |
| | | const visibleList = (data?.filter ?? []).map((item, index) => ({ |
| | | id: index + '', |
| | | ...item, |
| | | })); |
| | | const visibleList = (data?.filter ?? []).map((item, index) => { |
| | | // 不修改原始地址 |
| | | item.id = index + ''; |
| | | |
| | | return item; |
| | | }); |
| | | const newList: RecordSetParamsItem[] = []; |
| | | for (let index = 0; index < visibleList.length; index++) { |
| | | const current = visibleList[index]; |
| | |
| | | id: current.id, |
| | | type: RecordSetParamsType.Step, |
| | | origin: current, |
| | | value: current.value, |
| | | value: current.step_value, |
| | | list: stepOptions, |
| | | title: current.title, |
| | | }); |
| | |
| | | return newList; |
| | | }; |
| | | |
| | | // 更改 value 值,完全覆盖会丢失响应性,只修改 value |
| | | const updateVisibleParams = (data) => { |
| | | const filter = data?.filter ?? []; |
| | | |
| | | filter.map((newItem, index) => { |
| | | const currentItem = visibleParams.value.find((item) => item.id === index + ''); |
| | | |
| | | if (currentItem) { |
| | | if (newItem.type === RecordSetParamsType.TimeRange) { |
| | | currentItem.value = [newItem.start_value, newItem.end_value]; |
| | | } else { |
| | | currentItem.value = newItem.step_value; |
| | | } |
| | | } |
| | | }); |
| | | }; |
| | | |
| | | const visibleParams = ref(getVisibleParams(props.data)); |
| | | const paramsValueList = ref(deepClone(visibleParams.value)); |
| | | |
| | | 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; |
| | |
| | | let valueCol = null; |
| | | |
| | | let preData = null; |
| | | |
| | | |
| | | let activeChartType: ChartTypeEnum = props.data?.chart_type ?? ChartTypeEnum.Line; |
| | | let originChartType = activeChartType; |
| | |
| | | }; |
| | | 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); |
| | | //#endregion |
| | | groupedValues = _.groupBy(values, (item) => item[nameIndex]); |
| | | if (isMultiCompare.value) { |
| | | handleMultiCompare(); |
| | | } else { |
| | | (currentSeries.value = |
| | | groupedValues && |
| | | Object.keys(groupedValues).map((item) => { |
| | | const values = groupedValues[item]; |
| | | return { |
| | | 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, |
| | | }); |
| | | } |
| | | } |
| | | } |
| | | }; |
| | | |
| | | // 更换列表 |
| | | const changeMap = new Map<string, any>(null); |
| | | const handleQueryChange = async (val: any, item: RecordSetParamsItem) => { |
| | | if (!val) return; |
| | | const historyId = (props as any).originData.historyId; |
| | | const curAgentKey = props.data.agent_key; |
| | | let res = null; |
| | | |
| | | // 改变原始值 |
| | | if (item.type === RecordSetParamsType.TimeRange) { |
| | | item.origin.start_value = val[0]; |
| | | item.origin.end_value = val[1]; |
| | | } else { |
| | | item.origin.step_value = val; |
| | | } |
| | | try { |
| | | if (item.type === RecordSetParamsType.TimeRange) { |
| | | item.origin.start_value = val[0]; |
| | | item.origin.end_value = val[1]; |
| | | changeMap.set(item.id, [ |
| | | { |
| | | update: item.origin.update, |
| | | value: item.origin.start_value, |
| | | path: item.origin.start_path, |
| | | }, |
| | | { |
| | | update: item.origin.update, |
| | | value: item.origin.end_value, |
| | | path: item.origin.end_path, |
| | | }, |
| | | ]); |
| | | } else { |
| | | item.origin.value = val; |
| | | changeMap.set(item.id, [ |
| | | { |
| | | update: item.origin.update, |
| | | value: item.origin.value, |
| | | path: item.origin.path, |
| | | }, |
| | | ]); |
| | | } |
| | | const filterObj = Array.from(changeMap.values()).reduce((preVal, curVal) => { |
| | | preVal.push(...curVal); |
| | | // 相同 agent_key 下所有 filter 请求参数 |
| | | const filterList = ((props as any).originData?.content?.origin?.summary ?? []).reduce((preVal, curVal) => { |
| | | if (curVal.agent_key !== curAgentKey) return preVal; |
| | | |
| | | const filter = (curVal.filter ?? []).reduce((subPreVal, subCurVal) => { |
| | | if (subCurVal.type === RecordSetParamsType.TimeRange) { |
| | | subPreVal.push( |
| | | ...[ |
| | | { |
| | | update: subCurVal.update, |
| | | value: subCurVal.start_value, |
| | | path: subCurVal.start_path, |
| | | }, |
| | | { |
| | | update: subCurVal.update, |
| | | value: subCurVal.end_value, |
| | | path: subCurVal.end_path, |
| | | }, |
| | | ] |
| | | ); |
| | | } else { |
| | | subPreVal.push({ |
| | | update: subCurVal.update, |
| | | value: subCurVal.step_value, |
| | | path: subCurVal.step_path, |
| | | }); |
| | | } |
| | | |
| | | return subPreVal; |
| | | }, []); |
| | | |
| | | preVal = preVal.concat(filter); |
| | | |
| | | return preVal; |
| | | }, []); |
| | | const params = { |
| | | history_id: historyId, |
| | | // 查询前后 agent_key 不会变 |
| | | agent_key: props.data.agent_key, |
| | | filter_json: JSON.stringify(filterObj), |
| | | filter_json: JSON.stringify(filterList), |
| | | }; |
| | | res = await curveQuery(params); |
| | | chartLoading.value = true; |
| | |
| | | chartLoading.value = false; |
| | | } |
| | | |
| | | emits('updateQuery',res) |
| | | emits('updateQuery', res); |
| | | |
| | | return; |
| | | |
| | | |
| | | }; |
| | | |
| | | let realRange = { |
| | |
| | | } |
| | | ); |
| | | |
| | | const updateAll = (triggerIndex,res) => { |
| | | const updateAll = (triggerIndex, res) => { |
| | | // 当前 agent_key |
| | | const curAgentKey = props.data.agent_key; |
| | | const triggerAgentKey = res?.summary?.[triggerIndex]?.agent_key; |
| | | if(curAgentKey !==triggerAgentKey){ |
| | | const triggerAgentKey = (props as any).originData?.content?.origin?.summary?.[triggerIndex]?.agent_key; |
| | | if (curAgentKey !== triggerAgentKey) { |
| | | return; |
| | | } |
| | | const newSummary = res?.summary?.[props.summaryIndex] |
| | | if(!newSummary) return; |
| | | if (!curAgentKey) { |
| | | return; |
| | | } |
| | | |
| | | // 当前项所在索引 |
| | | let currentIndex = -1; |
| | | for (let index = 0; index < (props as any).originData.content.origin.summary.length; index++) { |
| | | const item = (props as any).originData.content.origin.summary[index]; |
| | | if (item.agent_key === curAgentKey) { |
| | | currentIndex++; |
| | | if (index === props.summaryIndex) { |
| | | break; |
| | | } |
| | | } |
| | | } |
| | | |
| | | const newSummary = res?.summary?.[currentIndex]; |
| | | if (!newSummary) return; |
| | | |
| | | updateCurrent(newSummary); |
| | | }; |
| | | |
| | | const updateIndexSummary = (summary) => { |
| | | updateCurrent(summary?.[props.summaryIndex], true); |
| | | }; |
| | | |
| | | defineExpose({ |
| | |
| | | handleMultiCompare, |
| | | handleData, |
| | | updateAll, |
| | | |
| | | updateIndexSummary, |
| | | }); |
| | | </script> |
| | | <style scoped lang="scss"></style> |