✨ feat<数据中心>: 图表卡片修改

src/views/reportManage/dataCenter/combinedDisplay/components/MetricsCards/index.vue

@@ -1,149 +0,0 @@
-<template>
-  <div class="metrics-cards">
-    <MCard
-     v-model="info.metric"
-     :metric-items="props.metricItems"
-     :color="info.color"
-     v-for="info in displayMetrics"
-     @change-metric="changedMetric"
-     @click="clickCard(info.metric)"/>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, Ref, onBeforeMount, watch, onMounted, computed } from 'vue'
-import MCard from './mCard.vue'
-import XEUtils from 'xe-utils';
-
-interface Props {
-  modelValue: ShowMetric[],
-  metricItems: MetricData[],
-}
-const colorsMap: { [key: string]: boolean } = {}
-const props = defineProps<Props>()
-const emits = defineEmits(['change', 'update:modelValue'])
-// const allMetricItems = ref(props.metricItems)
-const selectedMetric = ref(props.modelValue)
-const displayMetrics: Ref<{metric:string, color?: string}[]> = ref([])
-
-const metricMap = computed(():{[key: string]: string} => {
-  const tmp:{[key: string]: string} = {}
-  for (const info of props.metricItems) {
-    tmp[info.value] = info.label
-  }
-  return tmp
-})
-onBeforeMount(()=> {
-  const dup:{[key: string]: boolean} = {}
-  // 初始显示图线的三个维度
-  for (const info of selectedMetric.value) {
-    displayMetrics.value.push({ metric: info.metric, color: info.color })
-    dup[info.metric] = true
-    if (info.color) { colorsMap[info.color] = true }
-  }
-})
-
-const getColor = () => {
-  for (const [k,v] of Object.entries(colorsMap)) {
-    if (!v) {
-      colorsMap[k] = true
-      return k
-    }
-  }
-  return ""
-}
-const unsetColor = (color: string ) => {
-  if (XEUtils.has(colorsMap, color)) {
-    colorsMap[color] = false
-  }
-}
-const changedMetric = (newVal: string, oldVal: string) => {
-  for (const info of props.metricItems) {
-    if (info.value === newVal) {
-      info.disabled = true 
-    } else if (info.value === oldVal) {
-      info.disabled = false
-    }
-  }
-  const index = selectedMetric.value.findIndex( info => info.metric === oldVal)
-  if (index > -1) {
-    selectedMetric.value[index].metric = newVal
-    selectedMetric.value[index].label = metricMap.value[newVal]
-    emits('update:modelValue', selectedMetric.value)
-    emits('change', selectedMetric.value)
-  }
-}
-const clickCard = (metric: string) => {
-  const index = selectedMetric.value.findIndex( info => info.metric === metric)
-  if (index > -1) {  // 已存在则删除
-    if (selectedMetric.value.length <= 1 ) return
-    const tmp = selectedMetric.value[index]
-    selectedMetric.value.splice(index, 1)
-    unsetColor(tmp.color)
-    emits('update:modelValue', selectedMetric.value)
-    emits('change', selectedMetric.value)
-  } else {  // 不存在则添加
-    if (selectedMetric.value.length === 3) { 
-      selectedMetric.value[2].metric = metric
-      selectedMetric.value[2].label = metricMap.value[metric]
-    } else {
-      const color = getColor()
-      selectedMetric.value.push({ metric: metric, color: color, label: metricMap.value[metric]})
-    }
-    emits('update:modelValue', selectedMetric.value)
-    emits('change', selectedMetric.value)
-  }
-}
-watch(selectedMetric.value, () => {
-  const cache:{ [key: string]: string } = {}
-  for (const info of selectedMetric.value) {
-    cache[info.metric] = info.color
-  }
-  for (const info of displayMetrics.value) {
-    const color = cache[info.metric]
-    if (color) {
-      info.color = color
-    } else {
-      info.color = undefined
-    }
-  }
-})
-
-watch(
-  props.metricItems,
-  () => {
-    const dup:{[key: string]: boolean} = {}
-    for (const info of displayMetrics.value) { dup[info.metric] = true }
-    let needNum = 6 - displayMetrics.value.length
-    if (needNum > 0) {  
-      // 从所有维度中选择剩余
-      for (const info of props.metricItems) {
-        if (!dup[info.value]) {
-          displayMetrics.value.push({ metric: info.value })
-          dup[info.value] = true
-          needNum --
-          if (needNum === 0) break
-        }
-      }
-    }
-    for (const info of props.metricItems) {
-      if (dup[info.value]) {
-        info.disabled = true
-      } else {
-        info.disabled = false
-      }  
-    }
-  }
-)
-
-</script>
-
-<style scoped>
-.metrics-cards {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 12px;
-  width: 100%;
-}
-</style>

src/views/reportManage/dataCenter/combinedDisplay/components/MetricsCards/mCard.vue

@@ -1,100 +0,0 @@
-<template>
-  <el-card class="metric-card">
-    <div class="metric-card__color" :style="boardTopStyle"></div>
-    <TextSelector v-model="metric" :options="props.metricItems" @change="changeMetric"></TextSelector>
-    <div class="metric-value">{{ selectedData?.metricVal }}</div>
-    <div class="metric-pre">
-      <span>{{ selectedData?.preVal }}&nbsp;&nbsp;</span>
-      <el-icon v-show="selectedData?.gapVal" style="display: inline-block; padding-top: 2px">
-        <Top :class="colorClass" v-if="isBoost"/>
-        <Bottom :class="colorClass" v-else/>
-      </el-icon>
-      <span :class="colorClass">{{ selectedData?.gapVal ? selectedData?.gapVal + '%' : '' }}</span>
-    </div>
-  </el-card>
-</template>
-
-<script lang="ts" setup>
-import { ref, computed } from 'vue'
-import TextSelector from '/src/components/TextSelector/index.vue'
-
-defineOptions({
-  name: 'MCard'
-})
-
-interface Props {
-  modelValue: string,
-  metricItems: MetricData[],
-  color?: string,
-}
-const props = defineProps<Props>()
-const emits = defineEmits(["update:modelValue", "change-metric"])
-const metric = ref(props.modelValue)
-const changeMetric = ( newVal: string, oldVal: string) => {
-  emits('update:modelValue', newVal)
-  emits('change-metric', newVal, oldVal)
-}
-const selectedData = computed(():MetricData|null => {
-  const info = props.metricItems.find(item => item.value === metric.value)
-  if(!info) return null
-  return info
-})
-const boardTopStyle = computed(() => {
-  const style_ = { "border-top-color": "rgb(232, 244, 255)" }
-  if (props.color) { style_["border-top-color"] = props.color }
-  return style_
-})
-const isBoost = computed(():boolean => {
-  return (selectedData.value?.gapVal ?? -1) > 0
-})
-const colorClass = computed((): "green"|"red" => isBoost.value ? "green": "red")
-
-</script>
-
-<style scoped>
-:deep(.el-card__body) {
-  padding: 0;
-}
-.metric-card {
-  padding: 12px 8px;
-  height: 100px;
-
-  position: relative;
-  min-width: 150px;
-  overflow-y: hidden;
-  line-height: 1.4;
-  background-color: #fff;
-  border-radius: 10px;
-  box-shadow: 0 0 12px rgba(51,89,181,.1607843137254902);
-  cursor: pointer;
-  flex-grow: 1;
-}
-.metric-card__color {
-  position: absolute;
-  top: 0;
-  left: 8px;
-  width: calc(100% - 16px);
-  height: 0;
-  border-top: 4px solid #86909c;
-  border-left: 2px solid transparent;
-  border-right: 2px solid transparent;
-}
-.metric-value {
-  padding: 8px 0;
-  font-size: 18px;
-  font-weight: 700;
-  line-height: 25px;
-}
-
-.metric-pre {
-  color: #6b7785;
-  font-size: 12px;
-  white-space: nowrap;
-}
-.red {
-  color: red;
-}
-.green {
-  color: #1cbc0e;
-}
-</style>

src/views/reportManage/dataCenter/combinedDisplay/components/chartDateTendency/index.vue

@@ -6,46 +6,43 @@
     <!--  <el-radio-button label="week" :disabled="!props.fetchLineWeek">周</el-radio按钮>-->
     <!--  <el-radio-button label="month" :disabled="!props.fetchLineWeek">月</el-radio按钮>-->
     <!--</el-radio-group>-->
-    <div style="height: 350px" ref="chartRef"></div>
+    <div ref="chartRef" style="height: 350px"></div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import * as echarts from 'echarts'
-import { Ref, computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { monthCompareMetricsEnum } from '/src/views/reportManage/dataCenter/utils/enum'
+import * as echarts from 'echarts';
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { monthCompareMetricsEnum } from '/src/views/reportManage/dataCenter/utils/enum';
 // import MetricsCards from '/@/components/MetricsCards/index.vue'
-import XEUtils from 'xe-utils'
-import MetricsCards from '../MetricsCards/index.vue'
-import emitter from '/src/utils/emitter'
-import { buildChartOpt, monthlyQueryParams } from '/src/views/reportManage/dataCenter/utils/tools'
-import { getLineData } from '/@/views/reportManage/dataCenter/api'
+import XEUtils from 'xe-utils';
+import { monthlyQueryParams } from '/src/views/reportManage/dataCenter/utils/tools';
 
 defineOptions({
   name: 'DataTendencyChart',
-})
+});
 
 interface Props {
-  fetchLine: Function
-  query: { [key: string]: any }
-  initMetric?: ShowMetric[]
-  metricEnum?: { [key: string]: string }[]
+  fetchLine: Function;
+  query: { [key: string]: any };
+  initMetric?: ShowMetric[];
+  metricEnum?: { [key: string]: string }[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
   initMetric: () => [
-    { metric: 'sales', color: '#0085ff', label: '销售额' },
-    { metric: 'planSales', color: '#3fd4cf', label: '计划销售额' },
-    { metric: 'planSales', color: '#3fd4cf', label: '计划销售额' },
+    {metric: 'sales', color: '#0085ff', label: '销售额'},
+    {metric: 'planSales', color: '#3fd4cf', label: '计划销售额'},
+    {metric: 'planSales', color: '#3fd4cf', label: '计划销售额'},
   ],
   metricEnum: () => monthCompareMetricsEnum,
-})
+});
 
-const metrics = ref(props.initMetric)
+const metrics = ref(props.initMetric);
 
 // const metricsItems: Ref<MetricData[]> = ref([])
-let chartObj: any
-const chartRef = ref()
+let chartObj: any;
+const chartRef = ref();
 // const statDim = ref('day')
 const option: any = {
   dataset: {
@@ -136,58 +133,58 @@ const option: any = {
     },
   ],
 };
-const loading = ref(true)
-const queryParams = computed(() => monthlyQueryParams(props.query))
+const loading = ref(true);
+const queryParams = computed(() => monthlyQueryParams(props.query));
 
 onMounted(() => {
-  addResize()
+  addResize();
   setTimeout(() => {
-    initLine()
-  }, 0)
-})
+    initLine();
+  }, 0);
+});
 onBeforeUnmount(() => {
   if (chartObj) {
-    chartObj.dispose()
-    chartObj = null
+    chartObj.dispose();
+    chartObj = null;
   }
-  removeResize()
-})
+  removeResize();
+});
 
 const initLine = async () => {
-  chartObj = echarts.init(chartRef.value)
-  const items = await getDataset()
-  option.dataset.source = items
+  chartObj = echarts.init(chartRef.value);
+  const items = await getDataset();
+  option.dataset.source = items;
 
   XEUtils.arrayEach(option.series, (info: any, index) => {
-    const color = metrics.value[index].color
-    info.name = metrics.value[index].label
-    info.encode.y = metrics.value[index].metric
+    const color = metrics.value[index].color;
+    info.name = metrics.value[index].label;
+    info.encode.y = metrics.value[index].metric;
     if (info.type === 'bar') {
-      info.itemStyle.color = color
+      info.itemStyle.color = color;
     }
-  })
+  });
   XEUtils.arrayEach(option.yAxis, (info: any, index) => {
-    info.name = metrics.value[index].label
-    info.axisLine.lineStyle.color = metrics.value[index].color
-  })
+    info.name = metrics.value[index].label;
+    info.axisLine.lineStyle.color = metrics.value[index].color;
+  });
 
   XEUtils.arrayEach(props.metricEnum, (info) => {
-    option.legend.selected[info.label] = false
-  })
+    option.legend.selected[info.label] = false;
+  });
   for (const info of metrics.value) {
-    option.legend.selected[info.label] = true
+    option.legend.selected[info.label] = true;
   }
 
-  chartObj.setOption(option)
-  loading.value = false
-}
+  chartObj.setOption(option);
+  loading.value = false;
+};
 
 const getDataset = async () => {
-  const resp = await props.fetchLine(queryParams.value)
-  return resp.data
-}
+  const resp = await props.fetchLine(queryParams.value);
+  return resp.data;
+};
 
-const emit = defineEmits(['changeStatDim'])
+const emit = defineEmits(['changeStatDim']);
 
 let initialized = false;
 watch(props.query, async () => {
@@ -196,23 +193,23 @@ watch(props.query, async () => {
     return;
   }
   // emitter.emit('chartDateTendency-changeStatDim') // 触发DataTable的loading
-  loading.value = true
-  const items = await getDataset()
+  loading.value = true;
+  const items = await getDataset();
   // emit('changeStatDim', items) // 向父组件传递数据后再传递给DataTable
-  const opt = { dataset: { source: items } }
-  chartObj.setOption(opt)
-  loading.value = false
-})
+  const opt = {dataset: {source: items}};
+  chartObj.setOption(opt);
+  loading.value = false;
+});
 
 const resizeChart = () => {
-  chartObj.resize()
-}
+  chartObj.resize();
+};
 const addResize = () => {
-  window.addEventListener('resize', resizeChart)
-}
+  window.addEventListener('resize', resizeChart);
+};
 const removeResize = () => {
-  window.removeEventListener('resize', resizeChart)
-}
+  window.removeEventListener('resize', resizeChart);
+};
 </script>
 
 <style scoped>

src/views/reportManage/dataCenter/normalDisplay/components/DateTendency/index.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import * as echarts from 'echarts';
-import { computed, onBeforeUnmount, onMounted, Ref, ref, watch } from 'vue';
-import { dayMetricsEnum, initData } from '/src/views/reportManage/dataCenter/utils/enum';
+import { computed, onBeforeUnmount, onMounted, provide, Ref, ref, watch } from 'vue';
+import { dayMetricsEnum, weekInitData } from '/src/views/reportManage/dataCenter/utils/enum';
 import XEUtils from 'xe-utils';
 import MetricsCards from '../MetricsCards/index.vue';
 import emitter from '/src/utils/emitter';
@@ -24,7 +24,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  initMetric: () => initData,
+  initMetric: () => weekInitData.value,
   metricEnum: () => dayMetricsEnum,
 });
 
@@ -115,11 +115,11 @@ const option: any = {
         x: 'data_datetime',
         y: '',
       },
-      barWidth: '18px',
+      barWidth: '16px',
       yAxisIndex: 0,
       itemStyle: {
         color: '',
-        borderRadius: [4, 4, 4, 4],
+        borderRadius: 4,
       },
     },
     {
@@ -130,22 +130,11 @@ const option: any = {
         x: 'data_datetime',
         y: '',
       },
-      symbolSize: 6,
-      symbol: 'circle',
-      smooth: true,
-      yAxisIndex: 1,
+      barWidth: '16px',
+      yAxisIndex: 0,
       itemStyle: {
-        // color: '#ff9500',
-        // borderColor: '#ff9500'
-      },
-      areaStyle: {
-        // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-        //   { offset: 0, color: '#3fd4cf53' },
-        //   { offset: 1, color: '#3fd4cf03' },
-        // ]),
-      },
-      emphasis: {
-        focus: 'series',
+        color: '',
+        borderRadius: 4,
       },
     },
     {
@@ -170,6 +159,7 @@ const option: any = {
 };
 const loading = ref(true);
 const queryParams = computed(() => parseQueryParams(props.query));
+provide('statDim', statDim)
 
 onMounted(() => {
   getMetricsItems();
@@ -196,11 +186,11 @@ async function initLine() {
     id: index,
     name: metric.label,
     type: index === 0 ? 'bar' : 'line',
-    encode: {x: 'Name', y: metric.metric},
+    encode: {x: 'data_datetime', y: metric.metric},
     yAxisIndex: index,
     itemStyle: {color: option.series.type == 'bar' ? '#0085ff' : metric.color, borderRadius: [6, 6, 6, 6]},
     lineStyle: {color: metric.color},
-    barWidth: '10%',
+    barWidth: '16px',
     areaStyle:
         index !== 0
             ? {
@@ -226,7 +216,7 @@ async function initLine() {
   }));
 
   // 初始化图例
-  option.legend.selected = props.metricEnum.reduce((acc, metric) => {
+  option.legend.selected = props.metricEnum.reduce((acc: any, metric) => {
     acc[metric.label] = metrics.value.some((m) => m.metric === metric.value);
     return acc;
   }, {});
@@ -264,7 +254,7 @@ const getMetricsItems = async () => {
   const data = resp.data;
   metricsItems.value.length = 0;
   XEUtils.arrayEach(props.metricEnum, (info) => {
-    // console.log('info', info);
+     //console.log('info', info);
     const tmp: MetricData = {
       label: info.label,
       value: info.value,
@@ -279,25 +269,25 @@ const getMetricsItems = async () => {
 
 function changeMetric() {
   // 更新图例选中状态
-  option.legend.selected = props.metricEnum.reduce((acc, metric) => {
+  option.legend.selected = props.metricEnum.reduce((acc: any, metric) => {
     acc[metric.label] = metrics.value.some((m) => m.metric === metric.value);
     return acc;
   }, {});
 
   // 重新创建 series 数组，只包含选中的指标
   option.series = metrics.value.map((metric, index) => {
-    const baseConfig = {
+    const baseConfig: any = {
       id: index,
       name: metric.label,
       type: metric.color === '#0085ff' ? 'bar' : 'line',
-      encode: {x: 'Name', y: metric.metric},
+      encode: {x: 'data_datetime', y: metric.metric},
       yAxisIndex: index,
       itemStyle: {color: metric.color, borderRadius: [6, 6, 6, 6]},
       lineStyle: {color: metric.color},
-      barWidth: '10%',
+      barWidth: '16px',
     };
 
-    if (baseConfig != 'bar') {
+    if (baseConfig.type != 'bar') {
       baseConfig.areaStyle = {
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
           {offset: 0, color: metric.color + '53'},
@@ -335,6 +325,7 @@ function changeMetric() {
 
 const changeStatDim = async () => {
   emitter.emit('DateTendency-dateChange', statDim.value);
+
 };
 
 let initialized = false;
@@ -345,8 +336,7 @@ watch(props.query, async () => {
   }
   loading.value = true;
   await getMetricsItems();
-  option.dataset.source = await getDataset();
-  chartObj.setOption(option);
+  await initLine()
   loading.value = false;
 });
 
@@ -354,8 +344,8 @@ watch(
     () => props.initMetric,
     (newVal) => {
       metrics.value = newVal;
-      initLine(); // 重新初始化图表数据
-      //console.log('initMetric', props.initMetric);
+      //console.log('newVal', newVal);
+      //changeMetric();
     },
     { immediate: true }
 );
@@ -375,7 +365,7 @@ const removeResize = () => {
 
 <template>
   <div v-loading="loading">
-    <MetricsCards v-model="metrics" :metric-items="metricsItems" @change="changeMetric"></MetricsCards>
+    <MetricsCards v-model="metrics" :metric-items="metricsItems" @change="changeMetric" ></MetricsCards>
     <el-radio-group v-model="statDim" class="chart-button-group" @change="changeStatDim">
       <el-radio-button label="day">日</el-radio-button>
       <el-radio-button :disabled="!props.fetchLineWeek" label="week">周</el-radio-button>

src/views/reportManage/dataCenter/normalDisplay/components/MetricsCards/index.vue

@@ -1,141 +1,172 @@
 <template>
   <div class="metrics-cards">
     <MCard
-     v-model="info.metric"
-     :metric-items="props.metricItems"
-     :color="info.color"
-     v-for="info in displayMetrics"
-     @change-metric="changedMetric"
-     @click="clickCard(info.metric)"/>
+        v-for="info in displayMetrics"
+        :key="info.metric"
+        v-model="info.metric"
+        :color="info.color"
+        :metric-items="props.metricItems"
+        @click="clickCard(info.metric)"
+        @change-metric="changedMetric" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, Ref, onBeforeMount, watch, onMounted, computed } from 'vue'
-import MCard from './mCard.vue'
+import { computed, onBeforeMount, ref, Ref, watch } from 'vue';
+import MCard from './mCard.vue';
 import XEUtils from 'xe-utils';
+import { initData, weekInitData } from '/@/views/reportManage/dataCenter/utils/enum';
 
 interface Props {
   modelValue: ShowMetric[],
   metricItems: MetricData[],
 }
-const colorsMap: { [key: string]: boolean } = {}
-const props = defineProps<Props>()
-const emits = defineEmits(['change', 'update:modelValue'])
-// const allMetricItems = ref(props.metricItems)
-const selectedMetric = ref(props.modelValue)
-const displayMetrics: Ref<{metric:string, color?: string}[]> = ref([])
-
-const metricMap = computed(():{[key: string]: string} => {
-  const tmp:{[key: string]: string} = {}
+
+const dateType = inject<Ref>('statDim');
+const colorsMap: { [key: string]: boolean } = {};
+const props = defineProps<Props>();
+const emits = defineEmits(['change', 'update:modelValue']);
+const selectedMetric = ref(props.modelValue);
+const displayMetrics: Ref<{ metric: string, color?: string }[]> = ref([]);
+
+const metricMap = computed(() => {
+  const tmp: { [key: string]: string } = {};
   for (const info of props.metricItems) {
-    tmp[info.value] = info.label
+    tmp[info.value] = info.label;
+  }
+  return tmp;
+});
+
+const initializeMetrics = () => {
+  selectedMetric.value = [];
+  displayMetrics.value = [];
+  //console.log('初始化', selectedMetric.value);
+  Object.keys(colorsMap).forEach(key => delete colorsMap[key]);
+
+  if (dateType.value === 'day' || dateType.value === 'month') {
+    // 不要改成initData，不然会动态变化
+    selectedMetric.value = [{metric: 'sales', color: '#0085ff', label: '销售额'},
+      {metric: 'sales_last_year', color: '#ff9500', label: '上年销售额'},
+      {metric: 'sales_last_month', color: '#3fd4cf', label: '上月销售额'},];
+  } else if (dateType.value === 'week') {
+    selectedMetric.value = weekInitData.value;
   }
-  return tmp
-})
-onBeforeMount(()=> {
-  const dup:{[key: string]: boolean} = {}
-  // 初始显示图线的三个维度
+  console.log('initData.value', initData);
+  console.log('111', selectedMetric.value);
   for (const info of selectedMetric.value) {
-    displayMetrics.value.push({ metric: info.metric, color: info.color })
-    dup[info.metric] = true
-    if (info.color) { colorsMap[info.color] = true }
+    displayMetrics.value.push({metric: info.metric, color: info.color});
+    if (info.color) {
+      colorsMap[info.color] = true;
+    }
   }
-})
+  console.log('initializeMetrics', selectedMetric.value);
+  emits('update:modelValue', selectedMetric.value);
+};
+
+onBeforeMount(initializeMetrics);
+
+watch(dateType, initializeMetrics);
 
 const getColor = () => {
-  for (const [k,v] of Object.entries(colorsMap)) {
+  for (const [k, v] of Object.entries(colorsMap)) {
     if (!v) {
-      colorsMap[k] = true
-      return k
+      colorsMap[k] = true;
+      return k;
     }
   }
-  return ""
-}
-const unsetColor = (color: string ) => {
+  return '';
+};
+const unsetColor = (color: string) => {
   if (XEUtils.has(colorsMap, color)) {
-    colorsMap[color] = false
+    colorsMap[color] = false;
   }
-}
+};
+
 const changedMetric = (newVal: string, oldVal: string) => {
   for (const info of props.metricItems) {
     if (info.value === newVal) {
-      info.disabled = true 
+      info.disabled = true;
     } else if (info.value === oldVal) {
-      info.disabled = false
+      info.disabled = false;
     }
   }
-  const index = selectedMetric.value.findIndex( info => info.metric === oldVal)
+  const index = selectedMetric.value.findIndex(info => info.metric === oldVal);
   if (index > -1) {
-    selectedMetric.value[index].metric = newVal
-    selectedMetric.value[index].label = metricMap.value[newVal]
-    emits('update:modelValue', selectedMetric.value)
-    emits('change', selectedMetric.value)
+    selectedMetric.value[index].metric = newVal;
+    selectedMetric.value[index].label = metricMap.value[newVal];
+    emits('update:modelValue', selectedMetric.value);
+    emits('change', selectedMetric.value);
   }
-}
+};
+
 const clickCard = (metric: string) => {
-  const index = selectedMetric.value.findIndex( info => info.metric === metric)
+  const index = selectedMetric.value.findIndex(info => info.metric === metric);
   if (index > -1) {  // 已存在则删除
-    if (selectedMetric.value.length <= 1 ) return
-    const tmp = selectedMetric.value[index]
-    selectedMetric.value.splice(index, 1)
-    unsetColor(tmp.color)
-    emits('update:modelValue', selectedMetric.value)
-    emits('change', selectedMetric.value)
+    if (selectedMetric.value.length <= 1) return;
+    const tmp = selectedMetric.value[index];
+    selectedMetric.value.splice(index, 1);
+    unsetColor(tmp.color);
+    emits('update:modelValue', selectedMetric.value);
+    emits('change', selectedMetric.value);
   } else {  // 不存在则添加
-    if (selectedMetric.value.length === 3) { 
-      selectedMetric.value[2].metric = metric
-      selectedMetric.value[2].label = metricMap.value[metric]
+    if (selectedMetric.value.length === 3) {
+      selectedMetric.value[2].metric = metric;
+      selectedMetric.value[2].label = metricMap.value[metric];
     } else {
-      const color = getColor()
-      selectedMetric.value.push({ metric: metric, color: color, label: metricMap.value[metric]})
+      const color = getColor();
+      selectedMetric.value.push({metric: metric, color: color, label: metricMap.value[metric]});
     }
-    emits('update:modelValue', selectedMetric.value)
-    emits('change', selectedMetric.value)
   }
-}
-watch(selectedMetric.value, () => {
-  const cache:{ [key: string]: string } = {}
+
+  emits('update:modelValue', selectedMetric.value);
+  emits('change', selectedMetric.value);
+};
+
+watch(selectedMetric, () => {
+  const cache: { [key: string]: string } = {};
   for (const info of selectedMetric.value) {
-    cache[info.metric] = info.color
+    cache[info.metric] = info.color;
   }
   for (const info of displayMetrics.value) {
-    const color = cache[info.metric]
+    const color = cache[info.metric];
     if (color) {
-      info.color = color
+      info.color = color;
     } else {
-      info.color = undefined
+      info.color = undefined;
     }
   }
-})
+  console.log('watch', selectedMetric.value);
+}, {deep: true});
 
 watch(
-  props.metricItems,
-  () => {
-    const dup:{[key: string]: boolean} = {}
-    for (const info of displayMetrics.value) { dup[info.metric] = true }
-    let needNum = 6 - displayMetrics.value.length
-    if (needNum > 0) {  
-      // 从所有维度中选择剩余
+    props.metricItems,
+    () => {
+      const dup: { [key: string]: boolean } = {};
+      for (const info of displayMetrics.value) {
+        dup[info.metric] = true;
+      }
+
+      let needNum = 6 - displayMetrics.value.length;
+      if (needNum > 0) {
+        for (const info of props.metricItems) {
+          if (!dup[info.value]) {
+            displayMetrics.value.push({metric: info.value});
+            dup[info.value] = true;
+            needNum--;
+            if (needNum === 0) break;
+          }
+        }
+      }
+
       for (const info of props.metricItems) {
-        if (!dup[info.value]) {
-          displayMetrics.value.push({ metric: info.value })
-          dup[info.value] = true
-          needNum --
-          if (needNum === 0) break
+        if (dup[info.value]) {
+          info.disabled = true;
+        } else {
+          info.disabled = false;
         }
       }
     }
-    for (const info of props.metricItems) {
-      if (dup[info.value]) {
-        info.disabled = true
-      } else {
-        info.disabled = false
-      }  
-    }
-  }
-)
-
+);
 </script>
 
 <style scoped>
@@ -146,4 +177,4 @@ watch(
   gap: 12px;
   width: 100%;
 }
-</style>
+</style>

src/views/reportManage/dataCenter/normalDisplay/index.vue

@@ -63,11 +63,12 @@ const currentMetricEnum = computed(() => {
   }
 });
 
-const InitMetric = computed(() => {
-  if (dateDimension.value === 'week') {
-    return weekInitData;
+const initMetric = computed(() => {
+  if(dateDimension.value === 'day'|| dateDimension.value === 'month'){
+    return initData.value;
+  }else if (dateDimension.value === 'week') {
+    return weekInitData.value;
   }
-    return initData;
 });
 
 
@@ -91,7 +92,7 @@ onBeforeUnmount(() => {
           :fetchCardMonth="getCardMonthData"
           :fetchCardWeek="getCardWeekData"
           :fetchLine="getLineForDay"
-          :initMetric="InitMetric"
+          :initMetric="initMetric"
           :metricEnum="currentMetricEnum"
           :query="queryParams"
       >

src/views/reportManage/dataCenter/utils/enum.ts

@@ -50,15 +50,15 @@ export const monthCompareMetricsEnum = [
   { value: 'sales', label: '销售额'},
   { value: 'planSales', label: '计划销售额'},
 ]
+import { ref } from 'vue';
+export const weekInitData = ref([
+  {metric: 'sales', color: '#0085ff', label: '销售额'},
+  {metric: 'ad_sales', color: '#ff9500', label: '广告销售额'},
+  {metric: 'ad_cost', color: '#3fd4cf', label: '广告花费'},
+])
 
-export const weekInitData = [
-{metric: 'sales', color: '#0085ff', label: '销售额'},
-{metric: 'ad_sales', color: '#ff9500', label: '广告销售额'},
-{metric: 'ad_cost', color: '#3fd4cf', label: '广告花费'},
-]
-
-export const initData = [
+export const initData = ref([
   {metric: 'sales', color: '#0085ff', label: '销售额'},
   {metric: 'sales_last_year', color: '#ff9500', label: '上年销售额'},
   {metric: 'sales_last_month', color: '#3fd4cf', label: '上月销售额'},
-]
+])