wujingjing
2024-10-09 345370831431a07d4680d0109cd1761e1e913ae9
src/components/chat/chatComponents/summaryCom/components/recordSet/RecordSet.vue
@@ -36,13 +36,14 @@
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 yRange = ref({
@@ -116,7 +117,10 @@
let preData = null;
let activeChartType: ChartTypeEnum = props.data.chart_type ?? ChartTypeEnum.Line;
let activeChartType: ChartTypeEnum = props.data?.chart_type ?? ChartTypeEnum.Line;
const originChartType = activeChartType;
const getChartTypeSeriesOption = (type: ChartTypeEnum) => {
   let result = {};
   switch (type) {
@@ -144,6 +148,14 @@
         };
         break;
      case ChartTypeEnum.Score:
         result = {
            type: 'bar',
            symbol: 'none',
         };
         break;
      default:
         break;
   }
@@ -159,73 +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,
   });
@@ -338,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">
@@ -366,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({