图表查询

wujingjing

2025-03-05 4e394d1f4ed0928d5498083621966aba390a7642

 src/components/chat/chatComponents/summaryCom/components/recordSet/components/List.vue

@@ -1,16 +1,25 @@
<template>
   <el-select class="w-32" v-model="selectValue" @change="changeValue" :disabled="disabled">
      <el-option v-for="item in data.list" :key="item.value" :value="item.value" :label="item.title"></el-option>
   <el-select
      class="w-32"
      :style="{ width: selectWidth }"
      v-model="selectValue"
      @change="changeValue"
      :disabled="disabled"
      :placeholder="data.title"
   >
      <el-option v-for="item in selectList" :key="item.value" :value="item.value" :label="item.title"></el-option>
   </el-select>
</template>

<script setup lang="ts">
import type { PropType } from 'vue';
import type { ListParam } from '../types';
import { ref, type PropType, computed } from 'vue';
import { getTextWidth } from '/@/utils/util';
import { StepParam } from '../types';
import { DAY_STEP_LIST, HOUR_STEP_LIST, IS_DAY_LIST } from './constants';

const props = defineProps({
   data: {
      type: Object as PropType<ListParam>,
      type: Object as PropType<StepParam>,
   },
   disabled: {
      type: Boolean,
@@ -18,7 +27,34 @@
   },
});

const getSelectList = (defaultStepValue: string) => {
   if (IS_DAY_LIST.includes(defaultStepValue)) {
      return DAY_STEP_LIST;
   } else {
      return HOUR_STEP_LIST;
   }
};

const selectList = getSelectList(props.data?.origin?.step_value);
// const fontSize = ref('14px');

const emit = defineEmits(['change']);
const SELECT_OFFSET = 47;
const selectWidth = computed(() => {
   if (props.data?.list?.length > 0) {
      // 以最大字长为宽度
      const widthList = props.data.list.map((item) =>
         getTextWidth(item.title, {
            size:'14px',
         })
      );
      const maxWidth = Math.max(...widthList);
      const realWidth = maxWidth + SELECT_OFFSET;
      return realWidth + 'px';
   } else {
      return 0;
   }
});

const selectValue = defineModel({
   type: String,
@@ -28,4 +64,8 @@
   emit('change', val);
};
</script>
<style scoped lang="scss"></style>
<style scoped lang="scss">
:deep(.el-input) {
   font-size: 14px;
}
</style>