From 345370831431a07d4680d0109cd1761e1e913ae9 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期三, 09 十月 2024 13:43:13 +0800
Subject: [PATCH] bug;remove log
---
src/components/chat/chatComponents/summaryCom/components/recordSet/RecordSet.vue | 361 +++++++++++++++++++++++++++++++++------------------
1 files changed, 231 insertions(+), 130 deletions(-)
diff --git a/src/components/chat/chatComponents/summaryCom/components/recordSet/RecordSet.vue b/src/components/chat/chatComponents/summaryCom/components/recordSet/RecordSet.vue
index 11067e0..022707c 100644
--- a/src/components/chat/chatComponents/summaryCom/components/recordSet/RecordSet.vue
+++ b/src/components/chat/chatComponents/summaryCom/components/recordSet/RecordSet.vue
@@ -1,23 +1,28 @@
+<!-- 鏄ㄦ棩渚涙按绠＄綉姒傚喌 -->
<template>
<div class="w-full">
- <div class="flex mb-4 flex-wrap" v-if="visibleParams && visibleParams.length > 0">
+ <div class="flex mb-4 flex-wrap">
<!-- TimeRange v-model 璺� @change 涓殑鍊间細涓嶄竴鏍凤紝浠change 涓负鍑� -->
- <component
- class="flex-0 m-1"
- v-model="paramsValueList[index].value"
- v-for="(item, index) in visibleParams as any"
- :key="item.id"
- :id="item.id"
- :is="recordSetMapCom[item.type]"
- :data="item"
- :originData="originData"
- @change="(val) => handleQueryChange(val, item)"
- :disabled="chartLoading"
- ></component>
+ <template v-if="visibleParams && visibleParams.length > 0">
+ <component
+ class="flex-0 m-1"
+ v-model="paramsValueList[index].value"
+ v-for="(item, index) in visibleParams as any"
+ :key="item.id"
+ :id="item.id"
+ :is="recordSetMapCom[item.type]"
+ :data="item"
+ :originData="originData"
+ @change="(val) => handleQueryChange(val, item)"
+ :disabled="chartLoading"
+ ></component>
+ </template>
+ <slot> </slot>
+
<YRange v-model="yRange" @input="yRangeInput" />
<el-checkbox class="m-1" v-model="isMultiCompare" label="澶氭棩瀵规瘮" @change="multiCompareChange"></el-checkbox>
</div>
- <div class="h-[20rem]" v-resize="chartContainerResize" v-loading="chartLoading">
+ <div :style="{ height: chartHeight }" v-resize="chartContainerResize" v-loading="chartLoading">
<div ref="chartRef"></div>
</div>
</div>
@@ -31,15 +36,16 @@
import { computed, ref } from 'vue';
import { SCATTER_SYMBOL_SIZE, getChatChartOption } from '../../../common';
import { useDrawChatChart } from '../../../hooks/useDrawChatChart';
+import { ChartTypeEnum } from '../../../types';
import YRange from './components/YRange.vue';
import type { RecordSet, RecordSetParamsItem } from './types';
-import { RecordSetParamsType, recordSetMapCom } from './types';
+import { RecordSetParamsType, recordSetMapCom, scoreMap } from './types';
import { filterQuery } from '/@/api/ai/chat';
import { deepClone } from '/@/utils/other';
import { debounce } from '/@/utils/util';
+import { axisLabelFormatter } from '/@/utils/chart';
const chartRef = ref<HTMLDivElement>(null);
-const defaultDisplayType = 'line';
const yRange = ref({
min: null as number,
max: null as number,
@@ -59,6 +65,10 @@
},
summaryIndex: {
type: Number,
+ },
+ chartHeight: {
+ type: String,
+ default: '20rem',
},
}) as {
data: RecordSet;
@@ -89,7 +99,7 @@
} else {
newList.push(current);
}
- }else{
+ } else {
newList.push(current);
}
}
@@ -107,6 +117,52 @@
let preData = null;
+
+let activeChartType: ChartTypeEnum = props.data?.chart_type ?? ChartTypeEnum.Line;
+const originChartType = activeChartType;
+
+const getChartTypeSeriesOption = (type: ChartTypeEnum) => {
+ let result = {};
+ switch (type) {
+ case ChartTypeEnum.Bar:
+ result = {
+ type: 'bar',
+ symbol: 'none',
+ };
+
+ break;
+ case ChartTypeEnum.Line:
+ result = {
+ type: 'line',
+ symbol: 'none',
+ smooth: true,
+ };
+
+ break;
+
+ case ChartTypeEnum.Scatter:
+ result = {
+ type: 'scatter',
+ symbol: 'circle',
+ symbolSize: SCATTER_SYMBOL_SIZE,
+ };
+
+ break;
+ case ChartTypeEnum.Score:
+ result = {
+ type: 'bar',
+ symbol: 'none',
+ };
+
+ break;
+
+ default:
+ break;
+ }
+
+ return result;
+};
+
const setNewOption = (series?: any[], extraOption: echarts.EChartsOption = {}) => {
const isEmpty = !series || series.length === 0;
if (isEmpty) {
@@ -115,83 +171,113 @@
return {
name: item === 'default' ? '' : item,
data: values.map((item) => [item[timeIndex], item[valueIndex]]),
- type: defaultDisplayType,
- symbol: 'none',
- smooth: true,
+ ...getChartTypeSeriesOption(activeChartType),
};
});
}
- const combineOption = _.defaultsDeep(extraOption, getChatChartOption(), {
- grid: {
- bottom: 20,
- },
- legend: {
- top: 19,
- show: series?.length > 1,
- type: 'scroll',
- },
- toolbox: {
- show: true,
- feature: {
- myBar: {
- onclick: () => {
- chartInstance.value.setOption({
- series: series.map((item) => ({
- ...item,
- type: 'bar',
- symbol: 'none',
- })),
- });
- },
- },
+ const yAxisFormatter =
+ originChartType === ChartTypeEnum.Score
+ ? (value) => {
+ return scoreMap[value];
+ }
+ : axisLabelFormatter;
- myScatter: {
- onclick: () => {
- chartInstance.value.setOption({
- series: series.map((item) => ({
- ...item,
- type: 'scatter',
- symbol: 'circle',
- symbolSize: SCATTER_SYMBOL_SIZE,
- })),
- });
+ const tooltipValueFormatter =
+ originChartType === ChartTypeEnum.Score
+ ? (value) => {
+ return scoreMap[value];
+ }
+ : undefined;
+
+ const scoreYAxisOption: echarts.YAXisComponentOption = {
+ min: 0,
+ max: 4,
+ interval: 1,
+ axisLabel: {
+ formatter: yAxisFormatter,
+ },
+ };
+ const combineOption = _.defaultsDeep(
+ {
+ grid: {
+ bottom: 20,
+ },
+ legend: {
+ top: 19,
+ show: true,
+ type: 'scroll',
+ },
+ tooltip: {
+ valueFormatter: tooltipValueFormatter,
+ },
+ toolbox: {
+ show: true,
+ feature: {
+ myBar: {
+ onclick: () => {
+ activeChartType = originChartType === ChartTypeEnum.Score ? ChartTypeEnum.Score : ChartTypeEnum.Bar;
+ chartInstance.value.setOption({
+ series: series.map((item) => ({
+ ...item,
+ ...getChartTypeSeriesOption(activeChartType),
+ })),
+ });
+ },
},
- },
- myLine: {
- onclick: () => {
- chartInstance.value.setOption({
- series: series.map((item) => ({
- ...item,
- type: 'line',
- symbol: 'none',
- smooth: true,
- })),
- });
+
+ myScatter: {
+ onclick: () => {
+ activeChartType = ChartTypeEnum.Scatter;
+
+ chartInstance.value.setOption({
+ series: series.map((item) => ({
+ ...item,
+ ...getChartTypeSeriesOption(activeChartType),
+ })),
+ });
+ },
+ },
+ myLine: {
+ onclick: () => {
+ activeChartType = ChartTypeEnum.Line;
+ chartInstance.value.setOption({
+ series: series.map((item) => ({
+ ...item,
+ ...getChartTypeSeriesOption(activeChartType),
+ })),
+ });
+ },
},
},
},
- },
- title: {
- text: preData?.title,
- },
- xAxis: {
- name: timeCol?.title,
- },
- yAxis: {
- name: valueCol?.title,
- /** @description 涓嶅己鍒朵繚鐣�0 */
- scale: true,
- },
- series: series,
- } as echarts.EChartsOption);
+ title: {
+ text: preData?.title,
+ },
+ xAxis: {
+ name: timeCol?.title,
+ },
+ yAxis: {
+ name: valueCol?.title,
+ /** @description 涓嶅己鍒朵繚鐣� */
+ scale: true,
+ ...(originChartType === ChartTypeEnum.Score ? scoreYAxisOption : {}),
+ },
+ series: series,
+ } as echarts.EChartsOption,
+ extraOption,
+ getChatChartOption()
+ );
chartInstance.value.setOption(combineOption, {
notMerge: true,
});
};
-const drawChart = () => {
+const handleData = () => {
const data = props.data;
+ if (!data || !data.cols || !data.values) {
+ return;
+ }
preData = data;
const xType = 'time';
timeIndex = data.cols.findIndex((item) => item.type === 'time');
@@ -228,7 +314,14 @@
nameCol = data.cols[nameIndex];
groupedValues = _.groupBy(data.values, (item) => item[nameIndex]);
}
+};
+const drawChart = () => {
+ const data = props.data;
+ if (!data || !data.cols || !data.values) {
+ return;
+ }
+ handleData();
setNewOption();
};
const { chartContainerResize, chartInstance } = useDrawChatChart({ chartRef, drawChart });
@@ -244,10 +337,9 @@
let res = null;
try {
- if(item.type===RecordSetParamsType.TimeRange){
- changeMap.set(item.range[0].id,val[0]),
- changeMap.set(item.range[1].id,val[1])
- }else{
+ if (item.type === RecordSetParamsType.TimeRange) {
+ changeMap.set(item.range[0].id, val[0]), changeMap.set(item.range[1].id, val[1]);
+ } else {
changeMap.set(item.id, val);
}
const paramsObj = {};
@@ -288,6 +380,53 @@
}
};
+const getSingleDayOption = (day = COMMON_DAY) =>
+ ({
+ tooltip: {
+ show: true,
+ trigger: 'axis',
+ formatter(params) {
+ const itemList = params.map((item, index) => {
+ return `<div style="margin: ${index === 0 ? 0 : 10}px 0 0; line-height: 1">
+ <div style="margin: 0px 0 0; line-height: 1">
+ ${item.marker}<span style="font-size: 14px; color: #666; font-weight: 400; margin-left: 2px"
+ >${item.seriesName}</span
+ ><span style="float: right; margin-left: 20px; font-size: 14px; color: #666; font-weight: 900">${
+ originChartType === ChartTypeEnum.Score ? scoreMap[item.data[1]] : item.data[1]
+ }</span>
+ <div style="clear: both"></div>
+ </div>
+ <div style="clear: both"></div>
+ </div>`;
+ });
+
+ const result = `<div style="margin: 0px 0 0; line-height: 1">
+ <div style="margin: 0px 0 0; line-height: 1">
+ <div style="font-size: 14px; color: #666; font-weight: 400; line-height: 1">${params?.[0]?.data[0]?.slice(10, 16)}</div>
+ <div style="margin: 10px 0 0; line-height: 1">
+ ${itemList.join('')}
+ <div style="clear: both"></div>
+ </div>
+ <div style="clear: both"></div>
+ </div>
+ <div style="clear: both"></div>
+ </div>`;
+ return result;
+ },
+ },
+ xAxis: {
+ min: day + ' 00:00:00',
+ max: day + ' 23:59:59',
+ splitNumber: 10,
+ axisLabel: {
+ formatter: (val) => {
+ const newVal = moment(val).format('HH:mm');
+ return newVal;
+ },
+ showMaxLabel: true,
+ },
+ },
+ } as echarts.EChartsOption);
//#region ====================== 璁剧疆Y鑼冨洿 ======================
const debounceSetYRange = debounce((val) => {
chartInstance.value.setOption({
@@ -335,54 +474,9 @@
const series = seriesData.map<echarts.SeriesOption>((item) => ({
name: item[0]?.[nameIndex],
data: item.map((item) => [item[timeIndex], item[valueIndex]]),
- type: defaultDisplayType,
- symbol: 'none',
- smooth: true,
+ ...getChartTypeSeriesOption(activeChartType),
}));
- setNewOption(series, {
- tooltip: {
- show: true,
- trigger: 'axis',
- formatter(params) {
- const itemList = params.map((item, index) => {
- return `<div style="margin: ${index === 0 ? 0 : 10}px 0 0; line-height: 1">
- <div style="margin: 0px 0 0; line-height: 1">
- ${item.marker}<span style="font-size: 14px; color: #666; font-weight: 400; margin-left: 2px"
- >${item.seriesName}</span
- ><span style="float: right; margin-left: 20px; font-size: 14px; color: #666; font-weight: 900">${item.data[1]}</span>
- <div style="clear: both"></div>
- </div>
- <div style="clear: both"></div>
- </div>`;
- });
-
- const result = `<div style="margin: 0px 0 0; line-height: 1">
- <div style="margin: 0px 0 0; line-height: 1">
- <div style="font-size: 14px; color: #666; font-weight: 400; line-height: 1">${params?.[0]?.data[0]?.slice(10, 16)}</div>
- <div style="margin: 10px 0 0; line-height: 1">
- ${itemList.join('')}
- <div style="clear: both"></div>
- </div>
- <div style="clear: both"></div>
- </div>
- <div style="clear: both"></div>
- </div>`;
- return result;
- },
- },
- xAxis: {
- min: COMMON_DAY + ' 00:00:00',
- max: COMMON_DAY + ' 23:59:59',
- splitNumber: 10,
- axisLabel: {
- formatter: (val) => {
- const newVal = moment(val).format('HH:mm');
- return newVal;
- },
- showMaxLabel: true,
- },
- },
- });
+ setNewOption(series, getSingleDayOption());
};
const multiCompareChange = (val) => {
if (!groupedValues) return;
@@ -393,5 +487,12 @@
}
};
//#endregion
+
+defineExpose({
+ drawChart,
+ isMultiCompare,
+ handleMultiCompare,
+ handleData,
+});
</script>
<style scoped lang="scss"></style>
--
Gitblit v1.9.3