vent-template/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">
      <div class="card-content" v-for="(item, index) in cards" :key="index">
        <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="(items, ind) in item.listR" :key="ind">
            <span>{{ `${items.label} : ` }}</span>
            <span
              :class="{
                'status-f': items.value == 1,
                'status-l': items.value == 0,
              }"
              >{{ items.value == 1 ? '异常' : items.value == 0 ? '正常' : items.value }}</span
            >
          </div>
        </div>
      </div>
    </div>
    <div v-if="shown === 'chart'" class="chart-item">
      <div v-for="(item, index) in charts" :key="`acmt${index}`">
        <EchartLine3 style="height: 270px; width: 350px; margin: 0 5px" />
        <div class="text-center">
          {{ item.label }}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  import EchartLine3 from './echartLine3.vue';
  import BaseTab from '../../../gas/components/tab/baseTab.vue';

  defineProps<{
    cards: { label: string; value: any; listR: { id: number; label: string; dw: string; value: any }[] }[];
    charts: { label: string; data: { x: string; y: number }[] }[];
    title: string;
  }>();

  const shown = ref('default');
</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;
      align-items: flex-start;
      flex-wrap: wrap;
      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;
    }
  }
</style>