gasInjection-project/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>
      <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" :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 maxY = ref(2000);
  let echartDw = ref('(­°C)');
  //光钎测温-图表数据
  let echartDataGq = reactive({
    maxData: {
      lengedData: '当前温度',
      data: [],
    },
    xData: [],
  });
  //束管监测-图表数据
  let echartDataSg = reactive({
    xData: [],
    yData: [],
    lengedData: 'O₂',
    lengedDataName: '(%)',
  });
  let echartDataSgList = reactive<any[]>([]);
  //束管实时数据选项点击
  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);
        });
        break;
      case 'C₂H₄':
        echartDataSgList.forEach((el) => {
          echartDataSg.xData.push(el.time);
          echartDataSg.yData.push(el.ch2val);
        });
        break;
      case 'CO':
        echartDataSgList.forEach((el) => {
          echartDataSg.xData.push(el.time);
          echartDataSg.yData.push(el.coval);
        });
        break;
      case 'CH₄':
        echartDataSgList.forEach((el) => {
          echartDataSg.xData.push(el.time);
          echartDataSg.yData.push(el.chval);
        });
        break;
      case 'CO₂':
        echartDataSgList.forEach((el) => {
          echartDataSg.xData.push(el.time);
          echartDataSg.yData.push(el.co2val);
        });
        break;
      case 'C₂H₂':
        echartDataSgList.forEach((el) => {
          echartDataSg.xData.push(el.time);
          echartDataSg.yData.push(el.gasval);
        });
        break;
    }
  }

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

          val.bundletube[0].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);
          });
        } 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: 24px;
              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: 30px;
        display: flex;
        justify-content: space-between;

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

      .content {
        height: calc(100% - 30px);
        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);
      }
    }
  }
</style>