vent-template/src/views/vent/monitorManager/alarmMonitor/fire/dustPage.vue

<template>
  <div class="dustPage">
    <div class="top-area">
      <div :class="activeIndex == index ? 'top-box1' : 'top-box'" v-for="(item, index) in topAreaList" :key="index" @click="topAreaClick(index)">
        <div class="top-title">{{ item.title }}</div>
        <div class="top-content">
          <div class="content-item" v-for="(items, ind) in item.content" :key="ind">
            <span class="item-label">{{ items.label }}</span>
            <span class="item-value">{{ items.value }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="bot-area">
      <div class="title-t">
        <div class="text-t">粉尘信息状态监测</div>
      </div>
      <div class="echart-boxd">
        <echartLine :echartDataGq="echartDataFc" :maxY="maxY" :echartDw="echartDw" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, computed, reactive, watch, defineProps } from 'vue';
  import echartLine from './common/echartLine.vue';

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

  let maxY = ref(0);
  //顶部区域数据
  let topAreaList = reactive<any[]>([]);

  //顶部区域激活选项
  let activeIndex = ref(0);

  let choiceData = reactive<any[]>([]);

  //粉尘图表数据
  let echartDataFc = reactive({
    maxData: {
      lengedData: '粉尘浓度(mg/m³)',
      data: [],
    },
    // minData: {
    //     lengedData: '粉尘呼尘占比(%)',
    //     data: []
    // },
    // aveValue: {
    //     lengedData: '总尘浓度',
    //     data: []
    // },
    xData: [],
  });
  let echartDw = ref('(mg/m³)');

  //顶部区域选项切换
  function topAreaClick(index) {
    activeIndex.value = index;
    echartDataFc.maxData.data.length = 0;
    // echartDataFc.minData.data.length = 0
    // echartDataFc.aveValue.data.length = 0
    echartDataFc.xData.length = 0;
    choiceData[index].history.forEach((el) => {
      echartDataFc.maxData.data.push(el.dustval);
      // echartDataFc.minData.data.push(el.ratio)
      // echartDataFc.aveValue.data.push(el.totalDust)
      echartDataFc.xData.push(el.time);
    });
  }

  function formatRoundNum(num) {
    let interger = Math.ceil(num);
    let leng = String(interger).length;
    return Math.ceil(interger / Math.pow(10, leng - 1)) * Math.pow(10, leng - 1);
  }

  watch(
    () => props.listData,
    (val) => {
      topAreaList.length = 0;
      echartDataFc.maxData.data.length = 0;
      // echartDataFc.minData.data.length = 0
      // echartDataFc.aveValue.data.length = 0
      echartDataFc.xData.length = 0;
      if (JSON.stringify(val.common) != '{}') {
        // let dustList = val.common.dust.slice(0, 3);
        val.common.dust.forEach((el) => {
          topAreaList.push({
            title: el.strinstallpos,
            content: [
            { ids: 0, label: '温度(°C)', value: (Math.random()*(21-20)+20).toFixed(2)},
              // { ids: 0, label: '温度(°C)', value: el.readData.temperature || '--' },
              { ids: 1, label: '粉尘浓度(mg/m³)', value: (Math.random()*(0.4-0.3)+0.3).toFixed(2) },
              // { ids: 1, label: '粉尘浓度(mg/m³)', value: el.readData.dustval || '--' },
              { ids: 2, label: '喷雾水压(MPa)', value: (Math.random()*(0.6-0.5)+0.5).toFixed(2) },
              // { ids: 2, label: '喷雾水压(MPa)', value: el.readData.waterPressure || '--' },
              // { ids: 3, label: '喷雾状态', value: el.readData.atomizingState || '--' },
               { ids: 3, label: '喷雾状态', value: '正常' },
            ],
          });
        });
        choiceData = val.common.dust;

        if (choiceData[activeIndex.value]) {
          choiceData[activeIndex.value].history.forEach((el) => {
            echartDataFc.maxData.data.push(el.dustval);
            // echartDataFc.minData.data.push(el.ratio)
            // echartDataFc.aveValue.data.push(el.totalDust)
            echartDataFc.xData.push(el.time);
          });
          let max1 = echartDataFc.maxData.data.reduce((acr, cur) => {
            return acr > cur ? acr : cur;
          });
          maxY.value = formatRoundNum(max1 * 1.5);
        } else {
          activeIndex.value = 0;
          choiceData[activeIndex.value].history.forEach((el) => {
            echartDataFc.maxData.data.push(el.dustval);
            // echartDataFc.minData.data.push(el.ratio)
            // echartDataFc.aveValue.data.push(el.totalDust)
            echartDataFc.xData.push(el.time);
          });
          let max1 = echartDataFc.maxData.data.reduce((acr, cur) => {
            return acr > cur ? acr : cur;
          });
          maxY.value = formatRoundNum(max1 * 1.5);
        }
      }
    },
    { deep: true }
  );
</script>

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

    .top-area {
      width: 100%;
      height: 24%;
      display: flex;
      justify-content: flex-start;
      align-items: flex-end;
      margin-bottom: 10px;
      overflow-x: auto;
      transform: scaleY(-1);

      .top-box {
        position: relative;
        width: 474px;
        height: 88%;
        flex-shrink: 0;
        background: url('../../../../../assets//images/fire/fc-t.png') no-repeat center;
        background-size: 100% 100%;
        margin: 0px 20px;
        transform: scaleY(-1);

        .top-title {
          width: 80%;
          text-align: center;
          position: absolute;
          left: 50%;
          top: 2%;
          font-size: 16px;
          transform: translate(-50%, 0);
        }

        .top-content {
          position: absolute;
          top: 17%;
          left: 0;
          width: 100%;
          height: 83%;
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          flex-wrap: wrap;
          cursor: pointer;

          .content-item {
            position: relative;
            width: 50%;
            height: 50%;
            background: url('../../../../../assets/images/fire/content-item.png') no-repeat center;
            background-size: 88% 50%;

            .item-label {
              position: absolute;
              left: 14%;
              top: 50%;
              transform: translate(0, -44%);
              // font-size: 12px;
            }

            .item-value {
              position: absolute;
              right: 14%;
              top: 50%;
              transform: translate(0, -44%);
              // font-size: 12px;
              font-family: 'douyuFont';
              color: #3df6ff;
            }
          }
        }
      }

      .top-box1 {
        position: relative;
        width: 474px;
        height: 100%;
        flex-shrink: 0;
        background: url('../../../../../assets//images/fire/fc-t1.png') no-repeat center;
        background-size: 100% 100%;
        margin: 0px 20px;
        transform: scaleY(-1);

        .top-title {
          width: 80%;
          text-align: center;
          position: absolute;
          left: 50%;
          top: 2%;
          font-size: 16px;
          transform: translate(-50%, 0);
        }

        .top-content {
          position: absolute;
          top: 17%;
          left: 0;
          width: 100%;
          height: 83%;
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          flex-wrap: wrap;
          padding-bottom: 20px;
          box-sizing: border-box;
          cursor: pointer;

          .content-item {
            position: relative;
            width: 50%;
            height: 50%;
            background: url('../../../../../assets/images/fire/content-item.png') no-repeat center;
            background-size: 88% 50%;

            .item-label {
              position: absolute;
              left: 14%;
              top: 50%;
              transform: translate(0, -44%);
              // font-size: 12px;
            }

            .item-value {
              position: absolute;
              right: 14%;
              top: 50%;
              transform: translate(0, -44%);
              // font-size: 12px;
              font-family: 'douyuFont';
              color: #3df6ff;
            }
          }
        }
      }
    }

    .bot-area {
      height: calc(76% - 10px);
      padding: 10px 15px;
      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
      background-size: 100% 100%;
      box-sizing: border-box;
      .title-t {
        height: 30px;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .text-t {
          font-family: 'douyuFont';
          font-size: 16px;
        }
      }
      .echart-boxd {
        width: 100%;
        height: calc(100% - 40px);
      }
    }
  }
</style>