mky-vent-base/src/views/vent/monitorManager/alarmMonitor/common/measurePoint.vue

<template>
  <div class="content">
    <div class="title">
      <div class="text">{{ title }}</div>
      <!-- <a-radio-group v-model:value="shown" button-style="solid">
        <a-radio-button value="default">测点信息</a-radio-button>
        <a-radio-button value="chart">预测曲线</a-radio-button>
      </a-radio-group> -->
      <BaseTab
        style="width: 200px"
        :tabs="[
          { name: '测点信息', id: 'default' },
          { name: '预测曲线', id: 'chart' },
        ]"
        v-model:id="shown"
      />
    </div>
    <div v-if="shown === 'default'" class="content-item">
      <template v-for="(item, index) in cards" :key="`vmac${index}`">
        <div class="card-content">
          <div class="item-l">
            <div class="label-l">{{ item.label }}</div>
            <div class="value-l">{{ item.value }}</div>
          </div>
          <div class="item-r">
            <div class="content-r" v-for="el in item.listR" :key="el.id">
              <span>{{ `${el.label} : ` }}</span>
              <span
                :class="{
                  'status-f': el.label.includes('状态') && el.value == 1,
                  'status-l': el.label.includes('状态') && el.value == 0,
                }"
              >
                {{ el.label.includes('状态') ? (el.value == 1 ? '异常' : el.value == 0 ? '正常' : el.value) : el.value }}
              </span>
            </div>
          </div>
        </div>
      </template>
    </div>
    <div v-if="shown === 'chart'" class="chart-item">
      <div v-for="(item, index) in charts" :key="`acmt${index}`" class="chart-content">
        <div class="text-center">
          {{ item.label }}
        </div>
        <PredictionCurve :style="{ width: chartWidth || '470px' }" style="height: 300px; margin: 15px" :chart="item" />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  import BaseTab from '../../../gas/components/tab/baseTab.vue';
  import PredictionCurve from './predictionCurve.vue';

  // well i know this is trash but the time is reaching
  defineProps<{
    cards: { label: string; value: any; listR: { id: number; label: string; dw: string; value: any }[] }[];
    charts: {
      label: string;
      time: Date;
      data: [number, number, number, number];
    }[];
    title: string;
    timeout?: number;
    chartWidth?: string;
  }>();

  const shown = ref('default');
  // const chartsConfig = ref<
  //   {
  //     label: string;
  //     /** 下一项数据更新后应该替换配置中的哪项数据的标志 */
  //     indexMark: number;
  //     x: string[];
  //     y1: number[];
  //     y2: number[];
  //     y3: number[];
  //     y4: number[];
  //   }[]
  // >([]);

  // watch(
  //   () => props.charts,
  //   () => {
  //     const arr = new Array(20).fill(0);
  //     props.charts.forEach((el, i) => {
  //       if (chartsConfig.value[i]) {
  //         // 由于上面这些数据都是 20 项组成的，当指针移动到 20 时说明上次更新了最后一项
  //         // 那么应该按先进后出的队列模式更新数据了
  //         const val = chartsConfig.value[i];
  //         if (val.indexMark === 20) {
  //           val.x.shift();
  //           val.y1.shift();
  //           val.y2.shift();
  //           val.y3.shift();
  //           val.y4.shift();
  //           val.indexMark = 19;
  //         }
  //         val.x[val.indexMark] = moment(el.time).format('HH:mm:ss');
  //         val.y1[val.indexMark] = el.data[0];
  //         val.y2[val.indexMark] = el.data[1];
  //         val.y3[val.indexMark] = el.data[2];
  //         val.y4[val.indexMark] = el.data[3];
  //         // 指针向后移动1
  //         val.indexMark += 1;
  //       } else {
  //         // 更新配置
  //         // 初始化配置数据，按照一项数据，生成一个由 20 项数据组成的数组，该数组由此项数据衍生
  //         const startFrom = moment(el.time);
  //         chartsConfig.value[i] = {
  //           label: el.label,
  //           indexMark: 1,
  //           x: arr.map(() => {
  //             const str = startFrom.format('HH:mm:ss');
  //             startFrom.add(props.timeout || 3000);
  //             return str;
  //           }),
  //           y1: arr.map(() => {
  //             return el.data[0];
  //           }),
  //           y2: arr.map(() => {
  //             return el.data[1];
  //           }),
  //           y3: arr.map(() => {
  //             return el.data[2];
  //           }),
  //           y4: arr.map(() => {
  //             return el.data[3];
  //           }),
  //         };
  //       }
  //     });
  //   },
  //   { immediate: true, deep: true }
  // );
</script>
<style lang="less">
  @import '/@/design/theme.less';

  @{theme-deepblue} {
    .content {
      --image-bot-area: url('/@/assets/images/themify/deepblue/fire/bot-area.png');
      --image-bot-area1: url('/@/assets/images/themify/deepblue/fire/bot-area1.png');
    }
  }
  .content {
    --image-bot-area: url('/@/assets/images/fire/bot-area.png');
    --image-bot-area1: url('/@/assets/images/fire/bot-area1.png');
    height: 100%;
    color: var(--vent-font-color);

    .title {
      height: 30px;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .text {
        font-family: 'douyuFont';
        font-size: 14px;
      }
    }

    .content-item {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      max-height: calc(100% - 50px);
      overflow-y: auto;

      .card-content {
        position: relative;
        width: 30%;
        height: 128px;
        margin: 0px 15px 15px 15px;
        background: var(--image-bot-area) no-repeat center;
        background-size: 100% 100%;

        .item-l {
          position: absolute;
          left: 32px;
          top: 50%;
          transform: translate(0, -50%);
          width: 89px;
          height: 98px;
          background: var(--image-bot-area1) no-repeat center;

          .label-l {
            position: absolute;
            left: 50%;
            top: 7px;
            color: var(--vent-font-color);
            font-size: 14px;
            transform: translate(-50%, 0);
          }

          .value-l {
            position: absolute;
            left: 50%;
            top: 50px;
            transform: translate(-50%, 0);
            font-family: 'douyuFont';
            font-size: 14px;
            color: var(--vent-table-action-link);
          }
        }

        .item-r {
          position: absolute;
          left: 132px;
          top: 50%;
          transform: translate(0, -50%);
          height: 128px;
          padding: 5px 0px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          box-sizing: border-box;

          .content-r {
            display: flex;

            span {
              font-size: 14px;
              color: var(--vent-font-color);

              &:first-child {
                display: inline-block;
                width: 68px;
              }

              &:last-child {
                display: inline-block;
                width: calc(100% - 68px);
              }
            }

            .status-f {
              color: #ff0000;
            }

            .status-l {
              color: var(--vent-table-action-link);
            }
          }
        }
      }
    }

    .chart-item {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;
      height: calc(100% - 50px);
      overflow-y: auto;

      .chart-content {
        // border: 1px solid var(--vent-base-border);
        box-shadow: inset 0px 0px 10px 1px var(--vent-modal-box-shadow);
        padding: 10px 0;
        margin: 0 5px 5px 5px;
      }
    }
  }
</style>