vent-template/src/views/vent/monitorManager/alarmMonitor/common/fireWork.vue

<template>
  <div class="fireWork">
    <!-- 顶部区域 -->
    <div class="work-nav">
      <div class="nav" v-for="(item, index) in topList" :key="index">
        <div class="pic" v-if="item.imgSrc">
          <img :src="imgUrl" alt="" />
        </div>
        <div class="content" v-if="item.label && item.value">
          <span>{{ item.label }}</span>
          <span>{{ item.value }}</span>
        </div>
        <div class="text" v-if="item.text">{{ item.text }}</div>
        <div class="percent" v-if="item.list.length != 0">
          <div class="title">{{ item.label }}</div>
          <div class="value">
            <div class="content-box" v-for="(items, ind) in item.list" :key="ind">
              <span style="color: #b3b8cc">{{ `${items.label} :` }}</span>
              <span style="color: #3df6ff; margin-left: 10px">{{ `${items.value}%` }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 中间区域 -->
    <div class="center-echart">
      <div class="nav-title">
        <div class="title">光纤测温系统温度实时监测</div>
      </div>
      <div class="echart-box">
        <echartLine :echartDataGq="echartDataGq" :maxY="maxY" :echartDw="echartDw" />
      </div>
    </div>
    <!-- 底部区域 -->
    <div class="bot-content">
      <div class="title">
        <div class="text">束管系统监测</div>
        <div class="select-box">
          <a-select v-model:value="selectData" style="width: 250px" @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="content">
        <div class="content-box" v-for="(item, index) in contentList" :key="index">
          <div class="box-item" v-for="(items, ind) in item.list" :key="ind" @click="getSgClick(items)">
            <div class="content-title">
              <span> {{ items.title }}</span>
              <span> {{ items.dw }}</span>
            </div>
            <div class="content-item">
              <span>{{ items.label }}</span>
              <span class="bolds">{{ items.value }}</span>
            </div>
            <div class="content-item">
              <span>{{ items.label1 }}</span>
              <span class="bolds">{{ items.time }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="echart-box">
        <echartLine1 :echartDataSg="echartDataSg" :maxY="maxY1" :lengedDataName="echartDataSg.lengedDataName" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, reactive, watch, defineProps } from 'vue';
import imgUrl from '../../../../../assets/images/fire/pie.png';
import echartLine from './echartLine.vue';
import echartLine1 from './echartLine1.vue';
import { topList, contentList } from '../common.data';

let props = defineProps({
  listData: Object,
});
let selectSj = ref<any[]>([]);
let selectData = ref('');
let selectList = reactive<any[]>([]);
let maxY1 = ref<any>(0);
let maxY = ref(100);
let echartDw = ref('(­°C)');
//光钎测温-图表数据
let echartDataGq = reactive({
  maxData: {
    lengedData: '当前温度',
    data: [],
  },
  xData: [],
});
//束管监测-图表数据
let echartDataSg = reactive({
  xData: [],
  yData: [],
  lengedData: 'O₂',
  lengedDataName: '(%)',
});
let echartDataSgList = reactive<any[]>([]);

function getmaxY() {
  maxY1.value = echartDataSg.yData.reduce((acr, cur) => {
    return acr > cur ? acr : cur;
  });
  maxY1.value =
    maxY1.value.toString().indexOf('.') == -1 ? maxY1.value.toString() : maxY1.value.toString().substring(0, maxY1.value.toString().indexOf('.'));
  if (maxY1.value.length < 2 && Number(maxY1.value) < 1) {
    maxY1.value = 1
  } else if (maxY1.value.length < 2 && Number(maxY1.value) >= 1) {
    maxY1.value = 10
  } else if (maxY1.value.length < 3) {
    maxY1.value = (Number(maxY1.value[0]) + 1) * 10
  } else if (maxY1.value.length < 4) {
    maxY1.value = (Number(maxY1.value[0]) + 1) * 100
  } else if (maxY1.value.length < 5) {
    maxY1.value = (Number(maxY1.value[0]) + 1) * 1000
  } else if (maxY1.value.length < 6) {
    maxY1.value = (Number(maxY1.value[0]) + 1) * 10000
  }
}
//束管实时数据选项点击
function getSgClick(items) {
  echartDataSg.xData.length = 0;
  echartDataSg.yData.length = 0;
  echartDataSg.lengedData = items.title;
  echartDataSg.lengedDataName = items.dw;

  switch (items.title) {
    case 'O₂':
      echartDataSgList.forEach((el) => {
        echartDataSg.xData.push(el.time);
        echartDataSg.yData.push(el.o2val);
      });
      getmaxY();
      break;
    case 'C₂H₄':
      echartDataSgList.forEach((el) => {
        echartDataSg.xData.push(el.time);
        echartDataSg.yData.push(el.ch2val);
      });
      getmaxY();
      break;
    case 'CO':
      echartDataSgList.forEach((el) => {
        echartDataSg.xData.push(el.time);
        echartDataSg.yData.push(el.coval);
      });
      getmaxY();
      break;
    case 'CH₄':
      echartDataSgList.forEach((el) => {
        echartDataSg.xData.push(el.time);
        echartDataSg.yData.push(el.chval);
      });
      getmaxY();
      break;
    case 'CO₂':
      echartDataSgList.forEach((el) => {
        echartDataSg.xData.push(el.time);
        echartDataSg.yData.push(el.co2val);
      });
      getmaxY();
      break;
    case 'C₂H₂':
      echartDataSgList.forEach((el) => {
        echartDataSg.xData.push(el.time);
        echartDataSg.yData.push(el.gasval);
      });
      getmaxY();
      break;
  }
}
function changeSelect(val) {
  selectData.value = val;
  let data = selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0];
  contentList[0].list[0].value = data.readData.o2val;
  contentList[0].list[1].value = data.readData.ch2val;
  contentList[1].list[0].value = data.readData.coval;
  contentList[1].list[1].value = data.readData.chval;
  contentList[2].list[0].value = data.readData.co2val;
  contentList[2].list[1].value = data.readData.gasval;
  contentList.forEach((el) => {
    el.list.forEach((v) => {
      v.time = data.readTime.substring(0, data.readTime.lastIndexOf(':'));
    });
  });
}

watch(
  () => props.listData,
  (val, val1) => {
    echartDataGq.xData.length = 0;
    echartDataGq.maxData.data.length = 0;
    echartDataSgList.length = 0;
    echartDataSg.xData.length = 0;
    echartDataSg.yData.length = 0;
    selectList.length = 0;
    if (JSON.stringify(val) != '{}') {
      if (val.fiber.length != 0) {
        topList[0].value = val.fiber[0].readData.fmax;
        topList[1].value = val.fiber[0].readData.fmin;
        topList[2].value = val.fiber[0].readData.favg;
        topList[3].text = val.fiber[0].warnFlag ? '报警' : '正常';
        JSON.parse(val.fiber[0].readData.fibreTemperature).forEach((el) => {
          echartDataGq.xData.push(el.pos);
          echartDataGq.maxData.data.push(el.value);
        });
      } else {
        topList[0].value = '--';
        topList[1].value = '--';
        topList[2].value = '--';
        topList[3].text = '正常';
      }

      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];
        contentList[0].list[0].value = dataVal.readData.o2val;
        contentList[0].list[1].value = dataVal.readData.ch2val;
        contentList[1].list[0].value = dataVal.readData.coval;
        contentList[1].list[1].value = dataVal.readData.chval;
        contentList[2].list[0].value = dataVal.readData.co2val;
        contentList[2].list[1].value = dataVal.readData.gasval;
        contentList.forEach((el) => {
          el.list.forEach((v) => {
            v.time = dataVal.readTime.substring(0, dataVal.readTime.lastIndexOf(':'));
          });
        });

        dataVal.history.forEach((el) => {
          echartDataSg.xData.push(el.time);
          if (echartDataSg.lengedData == 'O₂') {
            echartDataSg.yData.push(el.o2val);
          } else if (echartDataSg.lengedData == 'C₂H₄') {
            echartDataSg.yData.push(el.ch2val);
          } else if (echartDataSg.lengedData == 'C₂H₂') {
            echartDataSg.yData.push(el.gasval);
          } else if (echartDataSg.lengedData == 'CH₄') {
            echartDataSg.yData.push(el.chval);
          } else if (echartDataSg.lengedData == 'CO') {
            echartDataSg.yData.push(el.coval);
          } else if (echartDataSg.lengedData == 'CO₂') {
            echartDataSg.yData.push(el.co2val);
          }
          echartDataSgList.push(el);
        });
        getmaxY();
      } else {
        contentList[0].list[0].value = '--';
        contentList[0].list[1].value = '--';
        contentList[1].list[0].value = '--';
        contentList[1].list[1].value = '--';
        contentList[2].list[0].value = '--';
        contentList[2].list[1].value = '--';
        contentList.forEach((el) => {
          el.list.forEach((v) => {
            v.time = '--';
          });
        });
      }
    }
  },
  { deep: true }
);
</script>

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

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

    .nav {
      display: flex;
      justify-content: center;
      align-items: center;

      &:nth-child(1) {
        flex: 1;
        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: 1;
        height: 100%;
        border-right: 2px solid;
        border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
      }

      &:nth-child(3) {
        flex: 1;
        height: 100%;
        border-right: 2px solid;
        border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
      }

      &:nth-child(4) {
        flex: 0.6;
        color: #b3b8cc;
        font-size: 16px;
        height: 100%;
        border-right: 2px solid;
        border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
      }

      &:nth-child(5) {
        flex: 1.4;
        height: 100%;

        .percent {
          width: 100%;
          height: 82%;
          padding: 0px 20px;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          justify-content: space-around;

          .title {
            font-size: 14px;
            padding: 5px 0px;
            color: #b3b8cc;
            text-align: center;
          }

          .value {
            display: flex;
            justify-content: space-between;

            span {
              font-family: 'douyuFont';
              font-size: 18px;
            }
          }
        }
      }

      .pic {
        width: 30%;
        height: 82%;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .content {
        height: 82%;
        margin-left: 15px;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        span {
          font-size: 14px;

          &:nth-child(1) {
            padding: 5px 0px;
            color: #b3b8cc;
          }

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

    .nav:nth-child(1) .pic {
      background: url('../../../../../assets/images/fire/max.svg') no-repeat center;
      background-size: 50% 50%;
    }

    .nav:nth-child(2) .pic {
      background: url('../../../../../assets/images/fire/min.svg') no-repeat center;
      background-size: 50% 50%;
    }

    .nav:nth-child(3) .pic {
      background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
      background-size: 50% 50%;
    }
  }

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

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

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

    .echart-box {
      width: 100%;
      height: calc(100% - 30px);
    }
  }

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

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

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

    .content {
      height: calc(100% - 45px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .content-box {
        width: 100%;
        height: 29%;
        display: flex;
        justify-content: space-between;
        margin-top: 0px !important;

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

          .content-title {
            position: absolute;
            left: 50%;
            top: 0;
            transform: translate(-50%);
            color: #fff;
            font-size: 14px;
          }

          .content-item {
            position: absolute;
            width: 93%;
            height: 27%;
            display: flex;
            align-items: center;
            padding: 0px 10px;
            box-sizing: border-box;
            background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
            background-size: 100% 100%;
            color: #fff;
            font-size: 14px;

            &:nth-child(2) {
              left: 50%;
              top: 28%;
              transform: translate(-50%);
              display: flex;
              justify-content: space-between;
            }

            &:nth-child(3) {
              left: 50%;
              top: 62%;
              transform: translate(-50%);
              display: flex;
              justify-content: space-between;
            }

            .bolds {
              font-family: 'douyuFont';
              color: #3df6ff;
              font-size: 12px;
            }
          }
        }
      }
    }

    .echart-box {
      position: absolute;
      left: 50%;
      top: 50px;
      transform: translate(-50%, 0);
      width: 66%;
      height: calc(100% - 50px);
    }
  }
}

: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>