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

<template>
  <div class="gas-ccb">
    <div class="top-box" v-if="typeData.includes('pump_under')">
      <div class="box-label">{{ pumpUnder.label }}</div>
      <div class="box-values">
        <div class="value-b" v-for="(items, ind) in pumpUnder.data" :key="ind">
          <span>{{ `${items.name} : ` }}</span>
          <span
            :class="{
              'box-value': items.val == 0 && items.name == '报警状态',
              'box-value1': items.val == 101 && items.name == '报警状态',
              'box-value2': items.val == 102 && items.name == '报警状态',
              'box-value3': items.val == 103 && items.name == '报警状态',
              'box-value4': items.val == 104 && items.name == '报警状态',
              'box-value5': items.val == 201 && items.name == '报警状态',
            }"
            >{{
              items.val == 0 && items.name == '报警状态'
                ? '正常'
                : items.val == 101 && items.name == '报警状态'
                  ? '较低风险'
                  : items.val == 102 && items.name == '报警状态'
                    ? '低风险'
                    : items.val == 103 && items.name == '报警状态'
                      ? '中风险'
                      : items.val == 104 && items.name == '报警状态'
                        ? '高风险'
                        : items.val == 201 && items.name == '报警状态'
                          ? '报警'
                          : items.val == 1001 && items.name == '报警状态'
                            ? '网络断开'
                            : items.val
            }}</span
          >
        </div>
      </div>
    </div>

    <div class="top-box" v-if="typeData.includes('pump_under_31')">
      <div class="box-label">{{ pumpOver.label }}</div>
      <div class="box-values">
        <div class="value-b" v-for="(items, ind) in pumpOver.data" :key="ind">
          <span>{{ `${items.name} : ` }}</span>
          <span
            :class="{
              'box-value': items.val == 0 && items.name == '报警状态',
              'box-value1': items.val == 101 && items.name == '报警状态',
              'box-value2': items.val == 102 && items.name == '报警状态',
              'box-value3': items.val == 103 && items.name == '报警状态',
              'box-value4': items.val == 104 && items.name == '报警状态',
              'box-value5': items.val == 201 && items.name == '报警状态',
            }"
            >{{
              items.val == 0 && items.name == '报警状态'
                ? '正常'
                : items.val == 101 && items.name == '报警状态'
                  ? '较低风险'
                  : items.val == 102 && items.name == '报警状态'
                    ? '低风险'
                    : items.val == 103 && items.name == '报警状态'
                      ? '中风险'
                      : items.val == 104 && items.name == '报警状态'
                        ? '高风险'
                        : items.val == 201 && items.name == '报警状态'
                          ? '报警'
                          : items.val == 1001 && items.name == '报警状态'
                            ? '网络断开'
                            : items.val
            }}</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref, watch, reactive } from 'vue';
  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';

  let props = defineProps({
    gasData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });
  let typeData = ref<any[]>(['pump_under']);
  let pumpUnder = reactive({});
  let pumpOver = reactive({});

  watch(
    () => props.gasData,
    (newV, oldV) => {
      console.log(newV, 'ccc---');
      let data = newV.pump;

      if (data && data.length != 0) {
        typeData.value = data.map((v) => v.deviceType);

        let list = {
          label: '',
          data: [],
        };
        if (typeData.value.includes('pump_under')) {
          let labelData = getTableHeaderColumns('pump_under_monitor');
          let param = labelData.map((el: any) => {
            return {
              name: el.title,
              val: el.dataIndex,
            };
          });
          let filterData = data.filter((v) => v.deviceType == 'pump_under')[0];
          list.label = filterData.strinstallpos;
          list.data = param.map((item) => {
            return {
              name: item.name,
              val: filterData.readData[item.val] && filterData.readData[item.val] != '0' ? filterData.readData[item.val] : '-',
            };
          });
          pumpUnder = Object.assign({}, list);
        } else if (typeData.value.includes('pump_under_31')) {
          let labelData = getTableHeaderColumns('pump_under_31_monitor');
          let param = labelData.map((el: any) => {
            return {
              name: el.title,
              val: el.dataIndex,
            };
          });
          let filterData = data.filter((v) => v.deviceType == 'pump_under_31')[0];
          list.label = filterData.strinstallpos;
          list.data = param.map((item) => {
            return {
              name: item.name,
              val: filterData.readData[item.val] && filterData.readData[item.val] != '0' ? filterData.readData[item.val] : '-',
            };
          });
          pumpOver = Object.assign({}, list);
        }
      }
    },
    { immediate: true }
  );

  onMounted(() => {});
</script>

<style lang="less" scoped>
  @import '/@/design/theme.less';

  @{theme-deepblue} {
    .gas-ccb {
      --image-no-choice: url('/@/assets/images/themify/deepblue/fire/no-choice.png');
      --image-choice: url('/@/assets/images/themify/deepblue/fire/choice.png');
      --image-border: url('/@/assets/images/themify/deepblue/fire/border.png');
      --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
      --image-top-area: url('/@/assets/images/themify/deepblue/fire/gas-top.png');
    }
  }

  .gas-ccb {
    --image-no-choice: url('/@/assets/images/fire/no-choice.png');
    --image-choice: url('/@/assets/images/fire/choice.png');
    --image-border: url('/@/assets/images/fire/border.png');
    --image-bj1: url('/@/assets/images/fire/bj1.png');
    --image-top-area: url('/@/assets/images/fire/gas-top.png');

    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 10px;
    box-sizing: border-box;

    .top-box {
      position: relative;
      width: 724px;
      height: 100%;
      background: var(--image-top-area) no-repeat center;
      background-size: 100% 100%;
overflow:hidden;

      .box-label {
        position: absolute;
        left: 50%;
        top: 28px;
        transform: translate(-50%, 0);
        width: 80%;
        font-family: 'douyuFont';
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        word-wrap: break-word;
        color: #fff;
      }

      .box-values {
        position: absolute;
        left: 50%;
        top: 70px;
        transform: translate(-50%, 0);
        width: 84%;
        height:185px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        overflow-y:auto;

        .value-b {
          width: calc(50% - 10px);
          height: 25px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: #fff;
          font-size: 14px;

          span {
            font-size: 14px;

            &:last-child {
              font-family: 'douyuFont';
              color: var(--vent-table-action-link);
            }
          }

          .box-value {
            color: rgb(145, 230, 9) !important;
          }

          .box-value1 {
            color: var(--vent-table-action-link) !important;
          }

          .box-value2 {
            color: #ffff35 !important;
          }

          .box-value3 {
            color: #ffbe69 !important;
          }

          .box-value4 {
            color: #ff6f00 !important;
          }

          .box-value5 {
            color: #ff0000 !important;
          }
        }
      }
    }
  }
</style>