summary 回复组件

gerson

2024-06-30 5010f52d22cf34660a338611fbb679d422901faa

summary 回复组件

 src/components/chat/Chat.vue

@@ -108,13 +108,7 @@
            });
            i++;
        });
        // messageContent.value = {
        //     type: AnswerType.Text,
        //     values: activeChatRoom.value.title,
        // };
        // sendChatMessage();

        console.log("🚀 ~ messageList.value:", messageList.value)
		
    },
    {
        immediate: true,
@@ -147,10 +141,16 @@
            };

            break;
        case AnswerType.Summary:
            content = {
                type: AnswerType.Summary,
                values: res.summary,
            };
            break;
        default:
            content = {
                type: AnswerType.Text,
                values: '其他',
                values: '发生错误！',
            };
            break;
    }
@@ -178,9 +178,7 @@
    //     },
    // };

    const content =  parseContent(res);
    console.log("🚀 ~ content:", content)

    const content = parseContent(res);
    return content;
};


 src/components/chat/chatComponents/recordSetCom/RecordSetCom.vue

@@ -29,7 +29,7 @@
import type { TabsPaneContext } from 'element-plus';
import type { PropType } from 'vue';
import { onMounted, ref } from 'vue';
import { ChartTypeEnum, chartTypeMapEchart, chartTypeMapName } from './types';
import { ChartTypeEnum, chartTypeMapEchart, chartTypeMapName } from '../types';
import type { RecordSetValues } from '/@/api/ai/chat';
import { dateRegex } from '/@/utils/toolsValidate';
const activeName = ref('first');
@@ -78,7 +78,9 @@
            show: true,
        },
        title: {
            // text: props.data.title,
            text: props.data.title,
            left: 'center',

        },
        xAxis: {
            name: props.data?.names[0],

 src/components/chat/chatComponents/summaryCom/SummaryCom.vue

@@ -1,6 +1,171 @@
<template>
    <div></div>
    <div class="min-w-[100ch]">
        <div class="ml-10" v-for="(item, idx) in summaryList" :key="idx">
            <h3>{{ item.title }}</h3>
            <el-table class="mt-2" :data="item.values" :style="{ width: `${columnsWidth * (item.values?.length ?? 1)}px` }">
                <el-table-column v-for="(col, index) in item.values" :label="col.title" :key="index">
                    <template #default="scope">
                        {{ col?.value }}
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="flex-column w-full">
            <el-select class="flex-0 w-36 ml-auto mr-16" v-model="selectChartType" @change="selectChartTypeChange">
                <el-option
                    v-for="item in Object.keys(chartTypeMapName)"
                    :key="item"
                    :value="parseInt(item)"
                    :label="chartTypeMapName[item]"
                ></el-option>
            </el-select>
            <div class="min-h-[48rem] flex-auto w-full" v-if="recordSetList && recordSetList.length > 0">
                <div ref="chartRefList" v-for="(item, index) in recordSetList" :key="index"></div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts"></script>
<script setup lang="ts">
import * as echarts from 'echarts';
import _ from 'lodash';
import { computed, onMounted, ref } from 'vue';
import { ChartTypeEnum, chartTypeMapEchart, chartTypeMapName } from '../types';
import { axisLabelFormatter } from '/@/utils/chart';

const props = defineProps(['data']);

const selectChartType = ref<ChartTypeEnum>(ChartTypeEnum.Line);

const columnsWidth = 120;

const chartRef = ref<HTMLDivElement[] | HTMLDivElement>(null);

const chartRefList = computed(() => {
    let refList: HTMLDivElement[] = [];
    if (!chartRef.value) {
        refList = [];
    } else {
        const first = chartRef.value?.[0];
        if (first) {
            refList = chartRef.value as unknown as HTMLDivElement[];
        } else {
            refList = [chartRef.value as unknown as HTMLDivElement];
        }
    }

    return refList;
});

const recordSetList = props.data.filter((item) => item.type === 'recordset');
const summaryList = props.data.filter((item) => item.type === 'summary');

const drawAllChart = () => {
    chartInstanceList.map((item, index) => {
        drawChart(item, recordSetList[index]);
    });
};

const selectChartTypeChange = () => {
    drawAllChart();
};

const drawChart = (instance, data) => {
    const xType = 'time';

    let timeIndex = data.cols.findIndex((item) => item.type === 'time');
    if (timeIndex === -1) {
        timeIndex = 0;
    }
    const timeCol = data.cols[timeIndex];

    let valueIndex = data.cols.findIndex((item) => item.type === 'value');
    if (valueIndex === -1) {
        valueIndex = 2;
    }
    const valueCol = data.cols[valueIndex];

    let nameCol = null;
    let groupedValues = null;
    if (data.chart === 'muli_line') {
        let nameIndex = data.cols.findIndex((item) => item.type === 'name');
        if (nameIndex === -1) {
            nameIndex = 1;
        }
        nameCol = data.cols[nameIndex];
        groupedValues = _.groupBy(data.values, (item) => item[nameIndex]);
    } else if (data.chart === 'single_line') {
        groupedValues = {
            default: data.values,
        };
    } else {
        // 默认都当muli_line
        let nameIndex = data.cols.findIndex((item) => item.type === 'name');
        if (nameIndex === -1) {
            nameIndex = 1;
        }
        nameCol = data.cols[nameIndex];
        groupedValues = _.groupBy(data.values, (item) => item[nameIndex]);
    }

    const seriesData = Object.keys(groupedValues).map((item) => {
        const values = groupedValues[item];
        return {
            name: item === 'default' ? '' : item,
            data: values.map((item) => [item[timeIndex], item[valueIndex]]),
            type: chartTypeMapEchart[selectChartType.value],
        };
    });

    instance.setOption({
        grid: {
            // bottom: 120,
            // right: '15%',
            bottom: '15%',
        },
        tooltip: {
            show: true,
        },
        title: {
            text: data.title,
            left: 'center',
        },
        xAxis: {
            name: timeCol.title,
            type: xType,
        },
        yAxis: {
            name: valueCol.title,
            type: 'value',
            axisLabel: {
                formatter: axisLabelFormatter,
            },
        },
        series: seriesData,
        dataZoom: {
            type: 'inside',
        },
    });
};
let chartInstanceList: echarts.ECharts[] = null;
onMounted(() => {
    setTimeout(() => {
        const parent = chartRefList.value[0].parentElement;

        const parentBound = parent.getBoundingClientRect();
        let divideCount = 1;
        // if(chartRefList.value.length>=2){
        //     divideCount = 2;
        // }
        const width = parentBound.width / divideCount;
        chartInstanceList = chartRefList.value.map((item) => {
            return echarts.init(item, undefined, {
                width: width,
                height: parentBound.height,
            });
        });
        drawAllChart();
    }, 300);
});
</script>
<style scoped lang="scss"></style>

 src/components/chat/chatComponents/types.ts

 src/components/chat/model/types.ts

@@ -1,19 +1,22 @@
import RecordSetCom from '../chatComponents/recordSetCom/RecordSetCom.vue';
import NormalTextCom from '../chatComponents/normalTextCom/NormalTextCom.vue';
import knowledgeCom from '../chatComponents/knowledgeCom/KnowledgeCom.vue';
import SummaryCom from '../chatComponents/summaryCom/SummaryCom.vue';

import assistantPic from '../images/assistant.jpg';
import userPic from '../images/user.svg';
export const enum AnswerType {
    Knowledge = 'knowledge',
    RecordSet = 'recordset',
    Text='text'
    Text='text',
    Summary='summary'
}

export const answerTypeMapCom = {
    [AnswerType.Knowledge]: knowledgeCom,
    [AnswerType.RecordSet]: RecordSetCom,
    [AnswerType.Text]:NormalTextCom
    [AnswerType.Text]:NormalTextCom,
    [AnswerType.Summary]:SummaryCom
};

export const enum RoleEnum {

 src/utils/chart.ts

@@ -115,3 +115,16 @@
    if (num == 1) return Math.round(v * 10) / 10.0;
    else return Math.round(v * 100) / 100.0;
};

export const axisLabelFormatter = (value, index) => {
    if (value >= 1000000) {
        return value / 1000000 + 'M';
    }
    if (value >= 10000) {
        return value / 10000 + 'W';
    }
    if (value >= 1000) {
        return value / 1000 + 'K';
    }
    return value + '';
};