From f41e52e3debf30558d556dc0451776f5422fb9b8 Mon Sep 17 00:00:00 2001 From: yangyin <1850366751@qq.com> Date: 星期五, 08 十一月 2024 14:20:02 +0800 Subject: [PATCH] Merge branch 'test' of http://47.103.154.90:83/r/WI/Web.V1.0 into test --- src/components/chat/chatComponents/summaryCom/components/recordSet/RecordSet.vue | 220 +++++++++++++++++++++++++++++++++++++++--------------- 1 files changed, 158 insertions(+), 62 deletions(-) diff --git a/src/components/chat/chatComponents/summaryCom/components/recordSet/RecordSet.vue b/src/components/chat/chatComponents/summaryCom/components/recordSet/RecordSet.vue index 4c6a7de..0adb614 100644 --- a/src/components/chat/chatComponents/summaryCom/components/recordSet/RecordSet.vue +++ b/src/components/chat/chatComponents/summaryCom/components/recordSet/RecordSet.vue @@ -1,12 +1,12 @@ <!-- 鏄ㄦ棩渚涙按绠$綉姒傚喌 --> <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" @@ -14,7 +14,7 @@ :data="item" :originData="originData" @change="(val) => handleQueryChange(val, item)" - :disabled="chartLoading" + :disabled="chartLoading ||disabled" ></component> </template> <slot> </slot> @@ -34,8 +34,20 @@ <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> @@ -60,6 +72,7 @@ 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); @@ -85,12 +98,24 @@ }, chartHeight: { type: String, - default: '20rem', + 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 stepOptions = [ @@ -104,10 +129,12 @@ 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]; @@ -126,7 +153,7 @@ id: current.id, type: RecordSetParamsType.Step, origin: current, - value: current.value, + value: current.step_value, list: stepOptions, title: current.title, }); @@ -140,8 +167,34 @@ 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; @@ -362,72 +415,93 @@ }; 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, 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, + }); + } } }; -// 鏇存崲鍒楄〃 -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; @@ -624,14 +698,34 @@ const updateAll = (triggerIndex, res) => { // 褰撳墠 agent_key const curAgentKey = props.data.agent_key; - const triggerAgentKey = res?.summary?.[triggerIndex]?.agent_key; + const triggerAgentKey = (props as any).originData?.content?.origin?.summary?.[triggerIndex]?.agent_key; if (curAgentKey !== triggerAgentKey) { return; } - const newSummary = res?.summary?.[props.summaryIndex]; + 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({ @@ -640,6 +734,8 @@ handleMultiCompare, handleData, updateAll, + + updateIndexSummary, }); </script> <style scoped lang="scss"></style> -- Gitblit v1.9.3