同步后台管理组件

wujingjing

2024-10-22 9c81ad77ea847ab2f6fcc5a6257dda9abb200a1e

同步后台管理组件

 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"
@@ -80,6 +80,7 @@
//         type: Object as PropType<RecordSet>,
//     },
// });

const emits = defineEmits<{
    (event: 'updateQuery', res: any): void;
}>();
@@ -98,10 +99,15 @@
        type: String,
        required: false,
    },
    showFilter: {
        type: Boolean,
        default: true,
    },
}) as {
    data: any;
    summaryIndex: number;
};

const tableLimitHeight = props.chartHeight == undefined ? undefined : document.body.clientHeight * 0.7;

const chartLoading = ref(false);
@@ -393,32 +399,36 @@
};
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]);
    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,
                });
        }
    }
};

@@ -698,12 +708,18 @@
    updateCurrent(newSummary);
};

const updateIndexSummary = (summary) => {
    updateCurrent(summary?.[props.summaryIndex],true);
};

defineExpose({
    drawChart,
    isMultiCompare,
    handleMultiCompare,
    handleData,
    updateAll,

    updateIndexSummary,
});
</script>
<style scoped lang="scss"></style>

 src/components/chat/chatComponents/summaryCom/components/recordSet/types.ts

@@ -2,12 +2,13 @@
import Timestamp from './components/Timestamp.vue';
import TimeRange from './components/TimeRange.vue';
import { ChartTypeEnum } from '../../../types';

import StringInput from '../recordSetTable/components/StringInput.vue'
export const enum RecordSetParamsType {
    Step = 'time_step',

    /** @description start å’Œ end åˆå¹¶ä¸ºä¸€ä¸ª range */
    TimeRange = 'time_range',
    StringInput='string',

}

export type BaseParam = {
@@ -45,6 +46,7 @@
export const recordSetMapCom = {
    [RecordSetParamsType.Step]: List,
    [RecordSetParamsType.TimeRange]: TimeRange,
    [RecordSetParamsType.StringInput]:StringInput
};

export const scoreMap = {

 src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue

@@ -2,14 +2,14 @@
<template>
    <div class="w-full flex-column">
        <div class="flex-0 flex-items-center mb-1 h-[38px]">
            <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"
                    v-for="(item, index) in visibleParams as any"
                    :key="item.id"
                    :id="item.id"
                    :is="recordSetTableMap[item.type]"
                    :is="recordSetMapCom[item.type]"
                    :data="item"
                    @change="(val) => handleQueryChange(val, item)"
                    :originData="originData"
@@ -97,9 +97,9 @@
import { TableCol } from '/@/components/table/colFilter/types';
import { debounce, getTextWidth } from '/@/utils/util';
import InfoDetail from './infoDetail/InfoDetail.vue';
import { RecordSetTableType, recordSetTableMap } from './types';
import StringInput from './components/StringInput.vue';
import { curveQuery } from '/@/api/ai/chat';
import { RecordSetParamsType, recordSetMapCom } from '../recordSet/types';

const props = defineProps({
    data: {
@@ -111,9 +111,13 @@
    summaryIndex: {
        type: Number,
    },
    tableLimitHeight:{
        type:Number,
        required:false
    tableLimitHeight: {
        type: Number,
        required: false,
    },
    showFilter:{
        type:Boolean,
        default:true
    }
});

@@ -394,7 +398,7 @@
    const headerHeight = tableRef.value.$el.querySelector('.el-table__header-wrapper').clientHeight;

    // é™åˆ¶é«˜åº¦
    const limitHeight =props.tableLimitHeight ??containerRef.value.clientHeight;
    const limitHeight = props.tableLimitHeight ?? containerRef.value.clientHeight;

    // æ±‚ size
    // size*cellHeight + size*THICK_BORDER_WIDTH + headerHeight <= limitHeight;
@@ -453,8 +457,13 @@
    let res = null;

    // æ”¹å˜åŽŸå§‹å€¼
    if (item.type === RecordSetTableType.StringInput) {
    if (item.type === RecordSetParamsType.StringInput) {
        item.origin.value = val;
    } else if (item.type === RecordSetParamsType.TimeRange) {
        item.origin.start_value = val[0];
        item.origin.end_value = val[1];
    } else if (item.type === RecordSetParamsType.Step) {
        item.origin.step_value = val;
    }
    try {
        // ç›¸åŒ agent_key ä¸‹æ‰€æœ‰ filter è¯·æ±‚参数
@@ -462,11 +471,32 @@
            if (curVal.agent_key !== curAgentKey) return preVal;

            const filter = (curVal.filter ?? []).reduce((subPreVal, subCurVal) => {
                if (subCurVal.type === RecordSetTableType.StringInput) {
                if (subCurVal.type === RecordSetParamsType.StringInput) {
                    subPreVal.push({
                        update: subCurVal.update,
                        value: subCurVal.value,
                        path: subCurVal.path,
                    });
                } else 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 if (subCurVal.type === RecordSetParamsType.Step) {
                    subPreVal.push({
                        update: subCurVal.update,
                        value: subCurVal.step_value,
                        path: subCurVal.step_path,
                    });
                }

@@ -495,17 +525,21 @@
const debounceQueryUpdate = debounce(queryUpdate, 600);

const handleQueryChange = async (val: any, item: any) => {
    if (item.type === RecordSetTableType.StringInput) {
    if (item.type === RecordSetParamsType.StringInput) {
        debounceQueryUpdate(val, item);
    }else{
        queryUpdate(val, item);
    }

    // queryUpdate(val,item)

    return;
};

//#endregion

const stepOptions = [
    { title: '5分钟', value: '5 minutes' },
    { title: '10分钟', value: '10 minutes' },
    { title: '半小时', value: '30 minutes' },
    { title: '1小时', value: '1 hours' },
    { title: '1天', value: '1 days' },
];
const getVisibleParams = (data) => {
    // const visibleList = props.data?.params?.filter((item) => !item?.hide) ?? [];
    // index ä½œä¸º id
@@ -516,13 +550,33 @@
        return item;
    });
    const newList: any[] = [];

    for (let index = 0; index < visibleList.length; index++) {
        const current = visibleList[index];
        switch (current.type) {
            case RecordSetTableType.StringInput:
            case RecordSetParamsType.TimeRange:
                newList.push({
                    id: current.id,
                    type: RecordSetTableType.StringInput,
                    type: RecordSetParamsType.TimeRange,
                    origin: current,
                    value: [current.start_value, current.end_value],
                    title: current.title,
                });
                break;
            case RecordSetParamsType.Step:
                newList.push({
                    id: current.id,
                    type: RecordSetParamsType.Step,
                    origin: current,
                    value: current.step_value,
                    list: stepOptions,
                    title: current.title,
                });
                break;
            case RecordSetParamsType.StringInput:
                newList.push({
                    id: current.id,
                    type: RecordSetParamsType.StringInput,
                    origin: current,
                    value: current?.value ?? '',
                    title: current.title,
@@ -546,7 +600,7 @@
        const currentItem = visibleParams.value.find((item) => item.id === index + '');

        if (currentItem) {
            if (newItem.type === RecordSetTableType.StringInput) {
            if (newItem.type === RecordSetParamsType.StringInput) {
                currentItem.value = newItem.value;
            }
        }
@@ -599,9 +653,14 @@

    updateCurrent(newSummary);
};
const updateIndexSummary = (summary)=>{
    updateCurrent(summary?.[props.summaryIndex])
}

defineExpose({
    updateAll,
    updateCurrent,
    updateIndexSummary
});
</script>
<style scoped lang="scss">

 src/components/chat/chatComponents/summaryCom/components/recordSetTable/types.ts

ÎļþÒÑɾ³ý