wujingjing
2024-11-06 ccd7df4fbb147564004081980b394e60665349a2
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"
@@ -14,7 +14,7 @@
               :data="item"
               :originData="originData"
               @change="(val) => handleQueryChange(val, item)"
               :disabled="chartLoading"
               :disabled="chartLoading ||disabled"
            ></component>
         </template>
         <slot> </slot>
@@ -72,6 +72,7 @@
import { axisLabelFormatter } from '/@/utils/chart';
import { deepClone } from '/@/utils/other';
import { debounce } from '/@/utils/util';
import { IS_DAY_LIST } from './components/constants';
const chartRef = ref<HTMLDivElement>(null);
const showMode = ref(DisplayModeType.Chart);
@@ -80,6 +81,7 @@
//       type: Object as PropType<RecordSet>,
//    },
// });
const emits = defineEmits<{
   (event: 'updateQuery', res: any): void;
}>();
@@ -98,10 +100,20 @@
      type: String,
      required: false,
   },
   showFilter: {
      type: Boolean,
      default: true,
   },
   disabled:{
      type:Boolean,
      default:false,
   }
}) as {
   data: any;
   summaryIndex: number;
   showFilter: Boolean;
};
const tableLimitHeight = props.chartHeight == undefined ? undefined : document.body.clientHeight * 0.7;
const chartLoading = ref(false);
@@ -173,6 +185,16 @@
};
const visibleParams = ref(getVisibleParams(props.data));
const checkIsDayTime = () => {
   if (!props.showFilter) return false;
   const stepFilter = visibleParams.value.find((item) => item.type === RecordSetParamsType.Step);
   if (!stepFilter.origin.step_value) return false;
   return IS_DAY_LIST.includes(stepFilter.origin.step_value);
};
// 跨度是否是日期形式
// const isDayTime = checkIsDayTime();
let groupedValues = null;
let timeIndex = undefined;
let valueIndex = undefined;
@@ -393,32 +415,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 +724,18 @@
   updateCurrent(newSummary);
};
const updateIndexSummary = (summary) => {
   updateCurrent(summary?.[props.summaryIndex], true);
};
defineExpose({
   drawChart,
   isMultiCompare,
   handleMultiCompare,
   handleData,
   updateAll,
   updateIndexSummary,
});
</script>
<style scoped lang="scss"></style>