riku
2025-07-29 fa9d2b5117227f263ad9aa15b71bddb3fe64ac81
src/components/monitor/FactorTrend.vue
@@ -1,28 +1,19 @@
<template>
  <BaseCard size="medium" direction="left">
    <template #content>
      <el-scrollbar height="calc(98vh - var(--bevel-length-2))">
        <!-- <div v-for="item in factorTypes" :key="item">
          <el-row>
            <div>{{ allSeries.get(item.value).name }}</div>
            <div>{{ allSeries.get(item.value).currentData }}</div>
            <div>{{ allSeries.get(item.value).min }}</div>
            <div>{{ allSeries.get(item.value).max }}</div>
            <RealTimeLineChart
              v-show="selectFactorType.includes(item.value)"
              :model-value="series(item.value)"
            ></RealTimeLineChart>
          </el-row>
        </div> -->
      <DashBoard ref="dashBoardRef" :factor-datas="factorDatas"></DashBoard>
      <el-scrollbar :height="height" always>
        <div v-for="item in seriesList" :key="item.key">
          <el-row
            v-show="selectFactorType.includes(item.series.key)"
            justify="space-between"
            class="wrap"
          >
            <div class="flex-col">
            <div class="flex-col m-r-4">
              <div class="factor-name">{{ item.series.name }}</div>
              <div class="factor-value">{{ item.series.currentData }}</div>
              <div class="factor-value">
                {{ item.series.currentData }}
              </div>
              <div class="factor-unit">
                {{ getUnit(item.series.label) }}
              </div>
@@ -44,8 +35,10 @@
import { checkboxOptions } from '@/constant/checkbox-options';
import { factorName } from '@/constant/factor-name';
import { factorUnit } from '@/constant/factor-unit';
import DashBoard from '@/views/realtimemode/component/DashBoard.vue';
export default {
  components: { DashBoard },
  props: {
    loading: Boolean,
    factorDatas: FactorDatas,
@@ -66,26 +59,13 @@
  },
  data() {
    return {
      height: 'calc(99vh - var(--bevel-length-2))',
      xAxis: [],
      allSeries: new Map(),
      seriesList: []
    };
  },
  computed: {
    factorTypes() {
      return checkboxOptions(this.deviceType);
    }
    // seriesList() {
    //   const list = [];
    //   for (const iterator of this.allSeries) {
    //     list.push({
    //       xAxis: this.xAxis,
    //       series: iterator[1]
    //     });
    //   }
    //   return list;
    // }
  },
  computed: {},
  watch: {
    factorDatas: {
      handler() {
@@ -163,17 +143,38 @@
    },
    toList() {
      const list = [];
      for (const iterator of this.allSeries) {
        list.push({
          xAxis: this.xAxis,
          series: iterator[1]
        });
      }
      // for (const iterator of this.allSeries) {
      //   list.push({
      //     xAxis: this.xAxis,
      //     series: iterator[1]
      //   });
      // }
      checkboxOptions(this.deviceType).forEach((t) => {
        if (this.allSeries.has(t.value)) {
          list.push({
            xAxis: this.xAxis,
            series: this.allSeries.get(t.value)
          });
        }
      });
      this.seriesList = list;
    },
    // getScaleValue(label, value) {
    //   return (factorUnit[label].scale * value).toFixed();
    // },
    getUnit(label) {
      return factorUnit[label];
      // fixeme 2024.5.15 修复CO展示单位和原始数据不一致问题
      return label == 'CO' ? 'μg/m³' : factorUnit[label].unit;
    },
    calcHeight() {
      const h1 = this.$refs.dashBoardRef
        ? this.$refs.dashBoardRef.$el.offsetHeight
        : 0;
      this.height = `calc(98vh - var(--bevel-length-2) - ${h1}px)`;
    }
  },
  mounted() {
    this.calcHeight();
  }
};
</script>
@@ -193,7 +194,7 @@
}
.factor-name {
  color: var(--el-color-warning);
  color: #23dad1;
}
.factor-unit {