From 6de8d274d3cf495a7d11ce67b8ebb0a11defe0a6 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期三, 09 十月 2024 13:33:47 +0800
Subject: [PATCH] 更新至最新 chatComponents
---
src/components/chat/chatComponents/summaryCom/components/recordSet/RecordSet.vue | 212 +++++++++++++++++++++++++-----------------
src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue | 65 +++++++-----
src/components/chat/chatComponents/types.ts | 15 +-
src/components/chat/chatComponents/summaryCom/components/recordSet/types.ts | 7 +
4 files changed, 176 insertions(+), 123 deletions(-)
diff --git a/src/components/chat/chatComponents/summaryCom/components/recordSet/RecordSet.vue b/src/components/chat/chatComponents/summaryCom/components/recordSet/RecordSet.vue
index ef8f0b4..ef7084f 100644
--- a/src/components/chat/chatComponents/summaryCom/components/recordSet/RecordSet.vue
+++ b/src/components/chat/chatComponents/summaryCom/components/recordSet/RecordSet.vue
@@ -36,16 +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 { ChartTypeEnum } from '../../../types';
+import { axisLabelFormatter } from '/@/utils/chart';
const chartRef = ref<HTMLDivElement>(null);
-const defaultDisplayType = 'line';
const yRange = ref({
min: null as number,
max: null as number,
@@ -117,6 +117,8 @@
let preData = null;
+
+const originChartType = props.data.chart_type;
let activeChartType: ChartTypeEnum = props.data?.chart_type ?? ChartTypeEnum.Line;
const getChartTypeSeriesOption = (type: ChartTypeEnum) => {
@@ -146,6 +148,14 @@
};
break;
+ case ChartTypeEnum.Score:
+ result = {
+ type: 'bar',
+ symbol: 'none',
+ };
+
+ break;
+
default:
break;
}
@@ -161,74 +171,103 @@
return {
name: item === 'default' ? '' : item,
data: values.map((item) => [item[timeIndex], item[valueIndex]]),
- ...getChartTypeSeriesOption(activeChartType)
-
+ ...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: () => {
- activeChartType = ChartTypeEnum.Bar;
- chartInstance.value.setOption({
- series: series.map((item) => ({
- ...item,
- ...getChartTypeSeriesOption(activeChartType),
- })),
- });
- },
- },
+ const yAxisFormatter =
+ originChartType === ChartTypeEnum.Score
+ ? (value) => {
+ return scoreMap[value];
+ }
+ : axisLabelFormatter;
- myScatter: {
- onclick: () => {
- activeChartType = ChartTypeEnum.Scatter;
+ const tooltipValueFormatter =
+ originChartType === ChartTypeEnum.Score
+ ? (value) => {
+ return scoreMap[value];
+ }
+ : undefined;
- chartInstance.value.setOption({
- series: series.map((item) => ({
- ...item,
- ...getChartTypeSeriesOption(activeChartType),
- })),
- });
+ 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: () => {
- activeChartType = ChartTypeEnum.Line;
- chartInstance.value.setOption({
- series: series.map((item) => ({
- ...item,
- ...getChartTypeSeriesOption(activeChartType),
- })),
- });
+
+ 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,
});
@@ -341,24 +380,27 @@
}
};
-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">
+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">${item.data[1]}</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">
+ 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">
@@ -369,22 +411,22 @@
</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;
+ return result;
},
- showMaxLabel: true,
},
- },
-} as echarts.EChartsOption);
+ 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({
diff --git a/src/components/chat/chatComponents/summaryCom/components/recordSet/types.ts b/src/components/chat/chatComponents/summaryCom/components/recordSet/types.ts
index 7bf7638..fe658b8 100644
--- a/src/components/chat/chatComponents/summaryCom/components/recordSet/types.ts
+++ b/src/components/chat/chatComponents/summaryCom/components/recordSet/types.ts
@@ -62,3 +62,10 @@
[RecordSetParamsType.StartTime]:Timestamp,
[RecordSetParamsType.EndTime]:Timestamp
};
+export const scoreMap = {
+ '0': '鏈瘎浼�',
+ '1': '鍧�',
+ '2': '涓�',
+ '3': '鑹�',
+ '4': '浼�',
+};
diff --git a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue
index 2cccabb..4dd1dd7 100644
--- a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue
+++ b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue
@@ -1,30 +1,45 @@
<!-- 鏌ヨ鏈�鏂拌鍛婁俊鎭� -->
<template>
<div>
- <span v-if="data?.title" class="text-base font-bold flex-center mb-5">{{ data?.title }}</span>
- <div class="w-full" style="height: 70vh" ref="containerRef" v-resize="resizeHandler">
+ <!-- <span v-if="data?.title" class="text-base font-bold flex-center mb-5">{{ data?.title }}</span> -->
+ <div class="w-full" ref="containerRef" v-resize="resizeHandler">
<el-table
ref="tableRef"
+ maxHeight="70vh"
border
:cell-style="tableCellStyle"
:header-cell-style="tableHeaderCellStyle"
:data="data?.values"
:spanMethod="objectSpanMethod"
-
class="w-full h-full"
cellClassName="text-sm"
headerCellClassName="text-sm"
>
- <template v-if="data?.cols?.length > 0">
- <el-table-column
- v-for="(item, index) in colList"
- :label="item.title"
- :width="item.width"
- :sortable="item.type === 'time'"
- :key="index"
- :prop="index + ''"
- show-overflow-tooltip
- />
+ <el-table-column v-if="data?.title" :label="data?.title" show-overflow-tooltip>
+ <template v-if="data?.cols?.length > 0">
+ <el-table-column
+ v-for="(item, index) in colList"
+ :label="item.title"
+ :width="item.width"
+ :sortable="item.type === 'time'"
+ :key="index"
+ :prop="index + ''"
+ show-overflow-tooltip
+ />
+ </template>
+ </el-table-column>
+ <template v-else>
+ <template v-if="data?.cols?.length > 0">
+ <el-table-column
+ v-for="(item, index) in colList"
+ :label="item.title"
+ :width="item.width"
+ :sortable="item.type === 'time'"
+ :key="index"
+ :prop="index + ''"
+ show-overflow-tooltip
+ />
+ </template>
</template>
</el-table>
</div>
@@ -47,7 +62,6 @@
const containerRef = ref<HTMLDivElement>(null);
const tableRef = ref<TableInstance>(null);
const measureWidthOffset = 28;
-
const groupColIndex = [];
(props.data?.cols ?? []).map((item, index) => {
if (item.group) {
@@ -165,14 +179,10 @@
const resizeHandler = debounce(resizeEvent);
//#region ====================== 鏍峰紡 ======================
const tableCellStyle = ({ row, rowIndex, column, columnIndex }): CSSProperties => {
- const extraStyle =
- columnIndex === 0
- ? {
- borderLeft: `${THICK_BORDER_WIDTH}px solid ${BORDER_COLOR}`,
- }
- : {};
- if (columnIndex === 0) {
- }
+ const extraStyle = {
+ ...(columnIndex === 0 ? { borderLeft: `${THICK_BORDER_WIDTH}px solid ${BORDER_COLOR}` } : {}),
+ };
+
return {
textAlign: 'center',
borderColor: BORDER_COLOR,
@@ -184,12 +194,10 @@
};
const tableHeaderCellStyle = ({ row, rowIndex, column, columnIndex }): CSSProperties => {
- const extraStyle =
- columnIndex === 0
- ? {
- borderLeft: `${THICK_BORDER_WIDTH}px solid ${BORDER_COLOR}`,
- }
- : {};
+ const extraStyle = {
+ ...(columnIndex === 0 ? { borderLeft: `${THICK_BORDER_WIDTH}px solid ${BORDER_COLOR}` } : {}),
+ ...(rowIndex === 0 ? { borderTop: `${THICK_BORDER_WIDTH}px solid ${BORDER_COLOR}`, backgroundColor: '#8db4e2',fontSize: '1rem'} : {}),
+ };
return {
textAlign: 'center',
@@ -211,7 +219,6 @@
});
</script>
<style scoped lang="scss">
-
// :deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell){
// background-color: v-bind(stripedBgColor);
// }
diff --git a/src/components/chat/chatComponents/types.ts b/src/components/chat/chatComponents/types.ts
index a98a373..a16fc65 100644
--- a/src/components/chat/chatComponents/types.ts
+++ b/src/components/chat/chatComponents/types.ts
@@ -1,18 +1,15 @@
-
export const enum ChartTypeEnum {
- Scatter,
- Line,
- Bar,
+ Scatter = 'scatter',
+ Line = 'line',
+ Bar = 'bar',
+ Score = 'score'
}
export const chartTypeMapName = {
[ChartTypeEnum.Line]: '鎶樼嚎鍥�',
[ChartTypeEnum.Scatter]: '鏁ｇ偣鍥�',
[ChartTypeEnum.Bar]: '鏌辩姸鍥�',
+ [ChartTypeEnum.Score]: '',
+
};
-export const chartTypeMapEchart = {
- [ChartTypeEnum.Scatter]: 'scatter',
- [ChartTypeEnum.Line]: 'line',
- [ChartTypeEnum.Bar]: 'bar',
-};
--
Gitblit v1.9.3