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>

            <!-- <BaseTab
              style="width: 180px; color: var(--vent-font-color)"
              :tabs="[
                { name: '实时监测', id: 'default' },
                { name: '预测曲线', id: 'predict' },
              ]"
              v-model:id="shownChart"
            /> -->
          </div>
          <div class="echarts-box">
            <PredictionCurve v-if="shownChart === 'default'" :chart="curveConfig" />
            <echartLine1 v-if="shownChart === 'predict'" :echartDataSg="echartDataSg1" :lengedDataName="echartDataSg1.lengedDataName" :maxY="maxY" />
          </div>
        </div>
        <div class="right-echartbox">
          <warnZb
            :widthV="widthV"
            :heightV="heightV"
            :coordDw="coordDw"
            :widthCanvas="widthCanvas"
            :heightCanvas="heightCanvas"
            :warnLevel="topContent.warnLevel"
          />
        </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';
  import PredictionCurve from './predictionCurve.vue';
  import BaseTab from '../../../gas/components/tab/baseTab.vue';

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

  const shownChart = ref('default');
  let maxY = ref<any>(0);
  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 getmaxY() {
    maxY.value = echartDataSg1.yData.reduce((acr, cur) => {
      return acr > cur ? acr : cur;
    });
    maxY.value =
      maxY.value.toString().indexOf('.') == -1 ? maxY.value.toString() : maxY.value.toString().substring(0, maxY.value.toString().indexOf('.'));
    if (maxY.value.length < 2 && Number(maxY.value) < 1) {
      maxY.value = 1;
    } else if (maxY.value.length < 2 && Number(maxY.value) >= 1) {
      maxY.value = 10;
    } else if (maxY.value.length < 3) {
      maxY.value = (Number(maxY.value[0]) + 1) * 10;
    } else if (maxY.value.length < 4) {
      maxY.value = (Number(maxY.value[0]) + 1) * 100;
    } else if (maxY.value.length < 5) {
      maxY.value = (Number(maxY.value[0]) + 1) * 1000;
    } else if (maxY.value.length < 6) {
      maxY.value = (Number(maxY.value[0]) + 1) * 10000;
    }
  }
  //密闭参数选项切换
  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;

    const data = selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0];
    switch (type.value) {
      case 'O₂':
        echartDataSgList.forEach((el) => {
          echartDataSg1.xData.push(el.time);
          echartDataSg1.yData.push(el.o2val);
        });

        curveConfig.value = {
          id: 'o2',
          label: 'O₂',
          time: echartDataSg1.xData,
          data: [
            // 氧气预测曲线
            data.avgParams?.avg_o2_value || 0,
            data.avgParams?.max_o2_value || 0,
            data.avgParams?.min_o2_value || 0,
            // data.readData?.o2val,
          ],
          monitorData: echartDataSg1.yData,
        };
        getmaxY();
        break;
      case 'C₂H₄':
        echartDataSgList.forEach((el) => {
          echartDataSg1.xData.push(el.time);
          echartDataSg1.yData.push(el.ch2val);
        });
        curveConfig.value = {
          id: 'ch2',
          label: 'C₂H₄',
          time: echartDataSg1.xData,
          data: [
            // 预测曲线
            data.avgParams?.avg_ch2_value || 0,
            data.avgParams?.max_ch2_value || 0,
            data.avgParams?.min_ch2_value || 0,
            // data.readData?.ch2val,
          ],
          monitorData: echartDataSg1.yData,
        };
        getmaxY();
        break;
      case 'CO':
        echartDataSgList.forEach((el) => {
          echartDataSg1.xData.push(el.time);
          echartDataSg1.yData.push(el.coval);
        });
        curveConfig.value = {
          id: 'co',
          label: 'CO',
          time: echartDataSg1.xData,
          data: [
            // 预测曲线
            data.avgParams?.avg_co_value || 0,
            data.avgParams?.max_co_value || 0,
            data.avgParams?.min_co_value || 0,
            // data.readData?.coval,
          ],
          monitorData: echartDataSg1.yData,
        };
        getmaxY();
        break;
      case 'CH₄':
        echartDataSgList.forEach((el) => {
          echartDataSg1.xData.push(el.time);
          echartDataSg1.yData.push(el.chval);
        });
        curveConfig.value = {
          id: 'ch',
          label: 'CH₄',
          time: new Date(),
          data: [
            // 预测曲线
            data.avgParams?.avg_ch_value || 0,
            data.avgParams?.max_ch_value || 0,
            data.avgParams?.min_ch_value || 0,
            // data.readData?.chval,
          ],
          monitorData: echartDataSg1.yData,
        };
        getmaxY();
        break;
      case 'CO₂':
        echartDataSgList.forEach((el) => {
          echartDataSg1.xData.push(el.time);
          echartDataSg1.yData.push(el.co2val);
        });
        curveConfig.value = {
          id: 'co2',
          label: 'CO₂',
          time: echartDataSg1.xData,
          data: [
            // 预测曲线
            data.avgParams?.avg_co2_value || 0,
            data.avgParams?.max_co2_value || 0,
            data.avgParams?.min_co2_value || 0,
            // data.readData?.co2val,
          ],
          monitorData: echartDataSg1.yData,
        };
        getmaxY();
        break;
      case 'C₂H₂':
        echartDataSgList.forEach((el) => {
          echartDataSg1.xData.push(el.time);
          echartDataSg1.yData.push(el.gasval);
        });
        curveConfig.value = {
          id: 'gas',
          label: '',
          time: echartDataSg1.xData,
          data: [
            // 预测曲线
            data.avgParams?.avg_gas_value || 0,
            data.avgParams?.max_gas_value || 0,
            data.avgParams?.min_gas_value || 0,
            // data.readData?.gasval,
          ],
          monitorData: echartDataSg1.yData,
        };
        getmaxY();
        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'];
  }

  /** 预测曲线的配置，数据分别为平均、最大、最小、当前值 */
  const curveConfig = ref<any>({ id: '0', label: '', time: new Date(), data: [0, 0, 0, 0] });

  watch(
    () => props.listData,
    (val: any) => {
      echartDataSg1.xData.length = 0;
      echartDataSg1.yData.length = 0;
      echartDataSgList.length = 0;
      selectList.length = 0;
      if (JSON.stringify(val) === '{}') return;
      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'];
        echartDataSgList = dataVal.history;
        btnClick(
          {
            label: type.value,
            dw: echartDataSg1.lengedDataName,
          },
          activeIndex.value
        );
        // 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);
        // });
        getmaxY();
      } 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>
  @import '/@/design/theme.less';

  @{theme-deepblue} {
    .closeWall {
      --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
      --image-pj: url('/@/assets/images/themify/deepblue/fire/pj.svg');
      --image-1: url('/@/assets/images/themify/deepblue/fire/1.png');
      --image-contetn: url('/@/assets/images/themify/deepblue/fire/contetn.png');
      --image-2: url('/@/assets/images/themify/deepblue/fire/2.png');
    }
  }

  .closeWall {
    --image-bj1: url('/@/assets/images/fire/bj1.png');
    --image-pj: url('/@/assets/images/fire/pj.svg');
    --image-1: url('/@/assets/images/fire/1.png');
    --image-contetn: url('/@/assets/images/fire/contetn.png');
    --image-2: url('/@/assets/images/fire/2.png');
    --border-image-2: linear-gradient(to bottom, transparent, #024688, transparent);
    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: var(--image-bj1) 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: var(--border-image-2) 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: var(--vent-table-action-link);
                margin-left: 10px;
              }
            }
          }

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

            img {
              position: relative;
              width: 23%;
              height: 100%;
              background: var(--image-pj) no-repeat center;
              background-size: 50% 50%;
            }

            .text {
              font-family: 'douyuFont';
              font-size: 28px;
              margin: 0px 15px;
              color: var(--vent-table-action-link);
            }

            .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: var(--vent-table-action-link);
              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: var(--image-bj1) 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: var(--vent-table-action-link);
      }

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

        .box-container {
          position: relative;
          width: 16%;
          height: 100%;
          background: var(--image-1) 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: var(--image-contetn) 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: var(--vent-table-action-link);
              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: var(--image-2) 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: var(--image-contetn) 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: var(--vent-table-action-link);
              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: var(--vent-table-action-link);
            }
          }

          .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;
  }

  :deep(.zxm-select-arrow) {
    color: #fff;
  }
</style>