From 022a757742c70b3106d817461464e821b537e794 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期二, 05 十一月 2024 13:20:40 +0800
Subject: [PATCH] process loading bug；报告
---
src/components/chat/chatComponents/summaryCom/components/recordSet/RecordSet.vue | 229 +++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 159 insertions(+), 70 deletions(-)
diff --git a/src/components/chat/chatComponents/summaryCom/components/recordSet/RecordSet.vue b/src/components/chat/chatComponents/summaryCom/components/recordSet/RecordSet.vue
index e9a7bd2..e16eb87 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"
@@ -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,20 @@
},
chartHeight: {
type: String,
- default: '20rem',
+ required: false,
+ },
+ showFilter: {
+ type: Boolean,
+ default: true,
},
}) 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 = [
@@ -104,10 +125,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 +149,7 @@
id: current.id,
type: RecordSetParamsType.Step,
origin: current,
- value: current.value,
+ value: current.step_value,
list: stepOptions,
title: current.title,
});
@@ -140,8 +163,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;
@@ -151,7 +200,6 @@
let valueCol = null;
let preData = null;
-
let activeChartType: ChartTypeEnum = props.data?.chart_type ?? ChartTypeEnum.Line;
let originChartType = activeChartType;
@@ -363,72 +411,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) => {
- 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;
@@ -436,11 +505,9 @@
chartLoading.value = false;
}
- emits('updateQuery',res)
+ emits('updateQuery', res);
return;
-
-
};
let realRange = {
@@ -624,17 +691,37 @@
}
);
-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({
@@ -643,6 +730,8 @@
handleMultiCompare,
handleData,
updateAll,
+
+ updateIndexSummary,
});
</script>
<style scoped lang="scss"></style>
--
Gitblit v1.9.3