From 8703f7ddda1cbdbee1cefc4c8f9a31ea97272494 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期一, 18 十一月 2024 14:24:50 +0800
Subject: [PATCH] 打包优化： 1）使用 lodash-es 2）element-plus按需导入
---
src/components/chat/chatComponents/summaryCom/components/recordSet/RecordSet.vue | 162 +++++++++++++++++++++++++++++++++--------------------
1 files changed, 100 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 e2c5822..36da3b4 100644
--- a/src/components/chat/chatComponents/summaryCom/components/recordSet/RecordSet.vue
+++ b/src/components/chat/chatComponents/summaryCom/components/recordSet/RecordSet.vue
@@ -3,7 +3,7 @@
<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"
@@ -14,7 +14,7 @@
:data="item"
:originData="originData"
@change="(val) => handleQueryChange(val, item)"
- :disabled="chartLoading"
+ :disabled="chartLoading || disabled"
></component>
</template>
<slot> </slot>
@@ -55,7 +55,6 @@
<script setup lang="ts">
import type * as echarts from 'echarts';
-import _ from 'lodash';
import moment from 'moment';
import type { PropType } from 'vue';
import { computed, ref, shallowRef, watch } from 'vue';
@@ -65,6 +64,7 @@
import RecordSetTable from '../recordSetTable/RecordSetTable.vue';
import DisplayMode from './components/DisplayMode.vue';
import YRange from './components/YRange.vue';
+import { IS_DAY_LIST } from './components/constants';
import { DisplayModeType } from './components/types';
import type { RecordSetParamsItem } from './types';
import { RecordSetParamsType, recordSetMapCom, scoreMap } from './types';
@@ -72,6 +72,7 @@
import { axisLabelFormatter } from '/@/utils/chart';
import { deepClone } from '/@/utils/other';
import { debounce } from '/@/utils/util';
+import { defaultsDeep, groupBy, random } from 'lodash-es';
const chartRef = ref<HTMLDivElement>(null);
const showMode = ref(DisplayModeType.Chart);
@@ -80,6 +81,7 @@
// type: Object as PropType<RecordSet>,
// },
// });
+
const emits = defineEmits<{
(event: 'updateQuery', res: any): void;
}>();
@@ -98,10 +100,20 @@
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);
@@ -173,6 +185,16 @@
};
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;
@@ -266,7 +288,7 @@
formatter: yAxisFormatter,
},
};
- const combineOption = _.defaultsDeep(
+ const combineOption = defaultsDeep(
{
grid: {
bottom: 20,
@@ -368,7 +390,7 @@
nameIndex = 1;
}
nameCol = data.cols[nameIndex];
- groupedValues = _.groupBy(data.values, (item) => item[nameIndex]);
+ groupedValues = groupBy(data.values, (item) => item[nameIndex]);
} else if (data.chart === 'single_line') {
groupedValues = {
default: data.values,
@@ -380,7 +402,7 @@
nameIndex = 1;
}
nameCol = data.cols[nameIndex];
- groupedValues = _.groupBy(data.values, (item) => item[nameIndex]);
+ groupedValues = groupBy(data.values, (item) => item[nameIndex]);
}
};
@@ -393,39 +415,82 @@
};
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]);
+ 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 getFilterList = () => {
+ const curAgentKey = props.data.agent_key;
+
+ // 鐩稿悓 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;
+ }, []);
+ return filterList;
+};
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;
// 鏀瑰彉鍘熷鍊�
@@ -435,42 +500,9 @@
} else {
item.origin.step_value = val;
}
+
+ const filterList = getFilterList();
try {
- // 鐩稿悓 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 涓嶄細鍙�
@@ -567,7 +599,7 @@
const seriesData = Object.keys(cloneData).reduce((preVal, curVal, curIndex, arr) => {
const values = cloneData[curVal];
const isMulti = arr.length > 1;
- const groupByDateValues = _.groupBy(values, (item) => moment(item[timeIndex]).format('YYYY-MM-DD'));
+ const groupByDateValues = groupBy(values, (item) => moment(item[timeIndex]).format('YYYY-MM-DD'));
for (const key in groupByDateValues) {
if (Object.prototype.hasOwnProperty.call(groupByDateValues, key)) {
const val = groupByDateValues[key];
@@ -665,7 +697,7 @@
watch(
() => currentSeries.value,
(val) => {
- tableKey.value = _.random(0, 100000) + '';
+ tableKey.value = random(0, 100000) + '';
}
);
@@ -698,12 +730,18 @@
updateCurrent(newSummary);
};
+const updateIndexSummary = (summary) => {
+ updateCurrent(summary?.[props.summaryIndex], true);
+};
+
defineExpose({
drawChart,
isMultiCompare,
handleMultiCompare,
handleData,
updateAll,
+
+ updateIndexSummary,
});
</script>
<style scoped lang="scss"></style>
--
Gitblit v1.9.3