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

<template>
  <div class="closeWall">
    <div class="title">
      <div class="box-container">
        <div class="contents">
          <div class="text">
            <div class="text-label">位置: </div>
            <!-- <div class="text-value">{{ topContent.position }}</div> -->
            <div class="text-value">
              <a-select v-model:value="selectData" style="width: 360px" @change="changeSelect">
                <a-select-option v-for="file in selectList" :key="file.label" :value="file.value">{{ file.label
                  }}</a-select-option>
              </a-select>
            </div>
          </div>
          <div class="text">
            <span class="text-label">时间 : </span>
            <span class="text-value">{{ topContent.time }}</span>
          </div>
        </div>
        <div class="contents">
          <img src="../../../../../assets/images/fire/pie.png" alt="" />
          <span class="text">{{ topContent.temperature }}</span>
          <span class="dw">°C</span>
        </div>
      </div>
      <div class="box-container">
        <div class="text1">
          <span>预警等级 : </span>
          <span :class="{
            value1: topContent.warnLevel == '绿色预警',
            value2: topContent.warnLevel == '黄色预警',
            value3: topContent.warnLevel == '红色预警',
          }">{{ topContent.warnLevel || '-' }}</span>
        </div>
        <div class="text1">
          <span>煤自燃阶段 : </span>
          <span>{{ topContent.smokeJd || '-' }}</span>
        </div>

      </div>
    </div>
    <div class="content">
      <div class="title-b">采空区密闭参数</div>
      <div class="card-btn">
        <div :class="activeIndex == index ? 'box-container1' : 'box-container'" v-for="(item, index) in mbList"
          :key="index" @click="btnClick(item, index)">
          <div class="box-label">
            <span> {{ item.label }}</span>
            <span>{{ item.dw }}</span>
          </div>
          <div class="box-item box-item1">
            <span class="text-t">{{ `${item.label1}:` }}</span>
            <span class="text-v">{{ item.nd }}</span>
          </div>
          <div class="box-item box-item2">
            <span class="text-t">{{ `${item.label2}:` }}</span>
            <span class="text-v">{{ item.time1 }}</span>
          </div>
          <div class="box-item box-item3">
            <span class="text-t">{{ `${item.label3}:` }}</span>
            <span class="text-v">{{ item.address }}</span>
          </div>
        </div>
      </div>
      <div class="echart-box">
        <div class="left-echartbox">
          <div class="title-f">
            <div class="title-text">{{ `${type}趋势` }}&nbsp; <span style="color: red">{{ netStatus != 1 ?
              '(设备未连接)' :
              '' }}</span></div>
          </div>
          <div class="echarts-box">
            <echartLine1 :echartDataSg="echartDataSg1" :lengedDataName="echartDataSg1.lengedDataName" />
          </div>
        </div>
        <div class="right-echartbox">
          <warnZb :widthV="widthV" :heightV="heightV" :coordDw="coordDw" :widthCanvas="widthCanvas"
            :heightCanvas="heightCanvas" :warnLevel="topContent.warnLevel"></warnZb>
        </div>

      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, reactive, watch, defineProps } from 'vue';
import echartLine1 from './echartLine1.vue';
import warnZb from './warnZb.vue'

let props = defineProps({
  listData: Object,
});

let selectSj = ref<any[]>([])
let selectData = ref('')
let selectList = reactive<any[]>([])
let widthV = ref('75%')
let heightV = ref('80%')
let coordDw = ref<any[]>([47, 95])
let widthCanvas = ref(562)
let heightCanvas = ref(316)
//设备连接状态
let netStatus = ref(0)
//密闭-顶部区域数据
let topContent = reactive({
  temperature: 0,
  position: '',
  time: '',
  warnLevel: '',
  smokeJd: '',
});
//密闭参数列表
let mbList = reactive([
  {
    label: 'O₂',
    dw: '(%)',
    label1: '浓度',
    label2: '时间',
    label3: '位置',
    nd: '0',
    time1: '',
    address: '',
  },
  {
    label: 'CO',
    dw: '(ppm)',
    label1: '浓度',
    label2: '时间',
    label3: '位置',
    nd: '0',
    time1: '',
    address: '',
  },
  {
    label: 'CO₂',
    dw: '(%)',
    label1: '浓度',
    label2: '时间',
    label3: '位置',
    nd: '0',
    time1: '',
    address: '',
  },
  {
    label: 'CH₄',
    dw: '(%)',
    label1: '浓度',
    label2: '时间',
    label3: '位置',
    nd: '0',
    time1: '',
    address: '',
  },
  {
    label: 'C₂H₂',
    dw: '(ppm)',
    label1: '浓度',
    label2: '时间',
    label3: '位置',
    nd: '0',
    time1: '',
    address: '',
  },
  {
    label: 'C₂H₄',
    dw: '(ppm)',
    label1: '浓度',
    label2: '时间',
    label3: '位置',
    nd: '0',
    time1: '',
    address: '',
  },
]);

//当前密闭参数激活选项
let activeIndex = ref(0);
//当前激活密闭参数类型
let type = ref('O₂');

let echartDataSg1 = reactive({
  xData: [],
  yData: [],
  lengedData: 'O₂',
  lengedDataName: '(%)',
});
let echartDataSgList = reactive<any[]>([]);

//密闭参数选项切换
function btnClick(item, ind) {
  activeIndex.value = ind;
  type.value = item.label;
  echartDataSg1.xData.length = 0;
  echartDataSg1.yData.length = 0;
  echartDataSg1.lengedData = type.value;
  echartDataSg1.lengedDataName = item.dw;

  switch (type.value) {
    case 'O₂':
      echartDataSgList.forEach((el) => {
        echartDataSg1.xData.push(el.time);
        echartDataSg1.yData.push(el.o2val);
      });
      break;
    case 'C₂H₄':
      echartDataSgList.forEach((el) => {
        echartDataSg1.xData.push(el.time);
        echartDataSg1.yData.push(el.ch2val);
      });
      break;
    case 'CO':
      echartDataSgList.forEach((el) => {
        echartDataSg1.xData.push(el.time);
        echartDataSg1.yData.push(el.coval);
      });
      break;
    case 'CH₄':
      echartDataSgList.forEach((el) => {
        echartDataSg1.xData.push(el.time);
        echartDataSg1.yData.push(el.chval);
      });
      break;
    case 'CO₂':
      echartDataSgList.forEach((el) => {
        echartDataSg1.xData.push(el.time);
        echartDataSg1.yData.push(el.co2val);
      });
      break;
    case 'C₂H₂':
      echartDataSgList.forEach((el) => {
        echartDataSg1.xData.push(el.time);
        echartDataSg1.yData.push(el.gasval);
      });
      break;
  }
}

function changeSelect(val) {
  selectData.value = val
  let data = selectSj.value.filter(v => v.strinstallpos == selectData.value)[0]
  topContent.time = data.readTime || '--';
  topContent.warnLevel = data.syswarnLevel_str
  topContent.smokeJd = data.syswarnLevel_des

  mbList[0].nd = data.readData.o2val || '--';
  mbList[1].nd = data.readData.coval || '--';
  mbList[2].nd = data.readData.co2val || '--';
  mbList[3].nd = data.readData.chval || '--';
  mbList[4].nd = data.readData.ch2val || '--';
  mbList[5].nd = data.readData.gasval || '--';
  mbList.forEach((el) => {
    el.time1 = data ? data.readTime.substring(0, data.readTime.lastIndexOf(':')) : '--';
    el.address = data ? data.strinstallpos : '--';
  });
  netStatus.value = data['netStatus']
}

watch(
  () => props.listData,
  (val) => {
    console.log(val, 'val---');
    echartDataSg1.xData.length = 0;
    echartDataSg1.yData.length = 0;
    echartDataSgList.length = 0;
    selectList.length = 0
    if (JSON.stringify(val) != '{}') {
      if (val.bundletube.length != 0) {
        selectSj.value = val.bundletube
        selectSj.value.forEach(el => {
          selectList.push({ label: el.strinstallpos, value: el.strinstallpos })
        })
        selectData.value = selectData.value ? selectData.value : selectList[0].value
        let dataVal = selectData.value ? selectSj.value.filter(v => v.strinstallpos == selectData.value)[0] : selectSj.value[0];
        topContent.temperature = val.temperature[0] ? val.temperature[0].readData.temperature : '--';
        // topContent.position = dataVal.strinstallpos || '--';
        topContent.time = dataVal.readTime || '--';
        topContent.warnLevel = dataVal.syswarnLevel_str
        topContent.smokeJd = dataVal.syswarnLevel_des

        mbList[0].nd = dataVal.readData.o2val || '--';
        mbList[1].nd = dataVal.readData.coval || '--';
        mbList[2].nd = dataVal.readData.co2val || '--';
        mbList[3].nd = dataVal.readData.chval || '--';
        mbList[4].nd = dataVal.readData.ch2val || '--';
        mbList[5].nd = dataVal.readData.gasval || '--';
        mbList.forEach((el) => {
          el.time1 = dataVal ? dataVal.readTime.substring(0, dataVal.readTime.lastIndexOf(':')) : '--';
          el.address = dataVal ? dataVal.strinstallpos : '--';
        });
        netStatus.value = dataVal['netStatus']
        dataVal.history.forEach((v) => {
          echartDataSg1.xData.push(v.time);
          if (echartDataSg1.lengedData == 'O₂') {
            echartDataSg1.yData.push(v.o2val);
          } else if (echartDataSg1.lengedData == 'C₂H₄') {
            echartDataSg1.yData.push(v.ch2val);
          } else if (echartDataSg1.lengedData == 'CO') {
            echartDataSg1.yData.push(v.coval);
          } else if (echartDataSg1.lengedData == 'CH₄') {
            echartDataSg1.yData.push(v.chval);
          } else if (echartDataSg1.lengedData == 'CO₂') {
            echartDataSg1.yData.push(v.co2val);
          } else if (echartDataSg1.lengedData == 'C₂H₂') {
            echartDataSg1.yData.push(v.gasval);
          }
          echartDataSgList.push(v);
        });
      } else {
        topContent.temperature = 0;
        // topContent.position = '--';
        topContent.time = '--';
        topContent.warnLevel = '--';
        topContent.smokeJd = '--'
        mbList[0].nd = '--';
        mbList[1].nd = '--';
        mbList[2].nd = '--';
        mbList[3].nd = '--';
        mbList[4].nd = '--';
        mbList[5].nd = '--';
        mbList.forEach((el) => {
          el.time1 = '--';
          el.address = '--';
        });
      }
    }
  },
  { immediate: true, deep: true }
);
</script>

<style lang="less" scoped>
.closeWall {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;

  .title {
    width: 100%;
    height: 17%;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
    background-size: 100% 100%;
    align-items: center;

    .box-container {
      display: flex;


      &:nth-child(1) {
        justify-content: space-around;
        align-items: center;
        flex: 2;
        height: 100%;
        border-right: 2px solid;
        border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
      }

      &:nth-child(2) {
        flex-direction: column;
        flex: 1;
        justify-content: space-around;
        align-items: center;
        height: 73%;
      }

      .contents {
        height: 73%;

        &:nth-child(1) {
          width: 40%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;

          .text {
            font-size: 14px;
            display: flex;
            align-items: center;

            .text-label {
              color: #b3b8cc;
              font-weight: bold;
            }

            .text-value {
              font-family: 'douyuFont';
              color: #3df6ff;
              margin-left: 10px;
            }
          }
        }

        &:nth-child(2) {
          width: 40%;
          display: flex;
          justify-content: center;
          align-items: center;

          img {
            position: relative;
            width: 23%;
            height: 100%;
            background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
            background-size: 50% 50%;
          }

          .text {
            font-family: 'douyuFont';
            font-size: 28px;
            margin: 0px 15px;
            color: #3df6ff;
          }

          .dw {
            font-size: 14px;
            color: #b3b8cc;
          }
        }
      }

      .text1 {
        width: 90%;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        color: #b3b8cc;
        font-weight: bold;

        span {
          display: inline-block;

          &:nth-child(1) {
            width: 160px;
            text-align: right;
          }

          &:nth-child(2) {
            font-family: 'douyuFont';
            color: #3df6ff;
            margin-left: 10px;
          }
        }

        .value1 {
          color: rgb(145, 230, 9) !important;
        }

        .value2 {
          // color: rgb(0, 242, 255) !important;
          color: #ffff35 !important;
        }

        .value3 {
          // color: #ffff35 !important;
          color: #ff0000 !important;
        }

        .value4 {
          color: #ffbe69 !important;
        }

        .value5 {
          color: #ff6f00 !important;
        }

        .value6 {
          color: #ff0000 !important;
        }
      }
    }
  }

  .content {
    width: 100%;
    height: calc(83% - 20px);
    padding: 10px;
    background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
    background-size: 100% 100%;
    box-sizing: border-box;

    .title-b {
      height: 30px;
      line-height: 30px;
      font-family: 'douyuFont';
      font-size: 14px;
      color: #fff;
      // color: #3df6ff;
    }

    .card-btn {
      height: 28%;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;

      .box-container {
        position: relative;
        width: 16%;
        height: 100%;
        background: url('../../../../../assets/images/fire/1.png') no-repeat center;
        background-size: 100% 100%;
        cursor: pointer;

        .box-label {
          position: absolute;
          left: 50%;
          top: 2px;
          transform: translate(-50%);
          color: #fff;
        }

        .box-item {
          position: absolute;
          left: 50%;
          transform: translate(-50%, 0);
          width: 89%;
          height: 16%;
          padding: 0px 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
          background-size: 100% 100%;

          .text-t {
            width: 17%;
            color: #fff;
            font-size: 12px;
          }

          .text-v {
            width: 83%;
            font-family: 'douyuFont';
            font-size: 10px;
            color: #3df6ff;
            display: flex;
            justify-content: flex-end;
          }
        }

        .box-item1 {
          top: 24%;
        }

        .box-item2 {
          top: 50%;
        }

        .box-item3 {
          top: 75%;
        }
      }

      .box-container1 {
        position: relative;
        width: 16%;
        height: 100%;
        background: url('../../../../../assets/images/fire/2.png') no-repeat center;
        background-size: 100% 100%;
        cursor: pointer;

        .box-label {
          position: absolute;
          left: 50%;
          top: 2px;
          transform: translate(-50%);
          color: #fff;
        }

        .box-item {
          position: absolute;
          left: 50%;
          transform: translate(-50%, 0);
          width: 89%;
          height: 16%;
          padding: 0px 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
          background-size: 100% 100%;

          .text-t {
            width: 17%;
            color: #fff;
            font-size: 12px;
          }

          .text-v {
            width: 83%;
            font-family: 'douyuFont';
            font-size: 10px;
            color: #3df6ff;
            display: flex;
            justify-content: flex-end;
          }
        }

        .box-item1 {
          top: 19%;
        }

        .box-item2 {
          top: 41%;
        }

        .box-item3 {
          top: 63%;
        }
      }
    }

    .echart-box {
      display: flex;
      height: calc(72% - 41px);


      .left-echartbox {
        width: calc(50% - 6px);
        margin-right: 6px;
        border: 1px solid #114aac;
        border-radius: 5px;

        .title-f {
          height: 40px;
          padding: 0px 10px;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .title-text {
            font-family: 'douyuFont';
            font-size: 14px;
            color: #fff;
            // color: #3df6ff;
          }
        }

        .echarts-box {
          height: calc(100% - 40px);
          padding: 0px 10px;
          box-sizing: border-box;
        }
      }

      .right-echartbox {
        width: calc(50% - 6px);
        margin-left: 6px;
        border: 1px solid #114aac;
        border-radius: 5px;
      }

    }
  }
}

:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
  border: 1px solid #3ad8ff77 !important;
  background-color: #ffffff00 !important;
}

:deep(.zxm-select-selection-item) {
  color: #fff !important;
}
</style>