gasInjection-project/src/views/vent/monitorManager/alarmMonitor/fire/ventilate.vue

<template>
  <div class="dustPage">
    <div class="top-area">
      <div class="top-box" v-for="(item, index) in topAreaList" :key="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-value1': items.value == 0,
              'item-value2': items.value == 101,
              'item-value3': items.value == 102,
              'item-value4': items.value == 103,
              'item-value5': items.value == 104,
              'item-value6': items.value == 201,
              'item-value': items.value != 0 && items.value != 101 && items.value != 102 && items.value != 103 && items.value != 104 && items.value != 201,

            }">{{ items.value == 0 ? '正常' : items.value == 101 ? '较低风险' : items.value == 102 ? '低风险' : items.value ==
  103 ?
  '中风险' : items.value == 104 ? '高风险' : items.value == 201 ? '报警' : items.value }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="center-area">
      <div class="center-t">
        <div class="t-box" v-for="(item, index) in centerAreaListT1" :key="index">
          <div class="box-label">{{ item.label }}</div>
        </div>
      </div>
      <div class="center-b">
        <div class="b-box" v-for="(item, index) in centerAreaListB1" :key="index">
          <div class="box-label">{{ item.content }}</div>
        </div>
      </div>
    </div>
    <div class="bot-area">
      <echartLine :echartDataGq="echartDataFc1" :maxY="maxY" :echartDw="echartDw" />
    </div>
  </div>
</template>

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

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

let maxY = ref(0)
let echartDw = ref('(m³/min)')

//报警区域数据
let topAreaList = reactive<any[]>([]);
//通风图表数据
const echartDataFc1 = reactive({
  maxData: {
    lengedData: '进风量',
    data: []
  },
  minData: {
    lengedData: '回风量',
    data: []
  },
  xData: [],
});


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) => {
    console.log(val, '详情数据');
    if (JSON.stringify(val.common) != '{}') {
      echartDataFc1.maxData.data.length = 0;
      echartDataFc1.minData.data.length = 0;
      echartDataFc1.xData.length = 0;
      topAreaList.length = 0;
      if (val.common.warnDevices.length != 0) {
        val.common.warnDevices.forEach((el) => {
          topAreaList.push({
            title: el.typeName,
            content: [
              { ids: 0, label: '设备类型', value: '工作面风量' },
              {
                ids: 1,
                label: '报警等级',
                value: el.datalist[0].warnLevel || 0,
              },
              { ids: 2, label: '报警描述', value: el.datalist[0].warnDes || '--' },
            ],
          });
        });
      } else {
        topAreaList.push({
          title: '工作面',
          content: [
            { ids: 0, label: '设备类型', value: '工作面风量' },
            {
              ids: 1,
              label: '报警等级',
              value: val.common.warnLevel || '正常',
            },
            { ids: 2, label: '报警描述', value: '--' },
          ],
        });

      }

      centerAreaListB1[0].content = val.common.jin || '--';
      centerAreaListB1[1].content = val.common.hui || '--';
      centerAreaListB1[2].content = val.common.xufengliang || '--';

      val.common.history.forEach((v) => {
        echartDataFc1.maxData.data.push(parseFloat(v.jin));
        echartDataFc1.minData.data.push(parseFloat(v.hui));
        echartDataFc1.xData.push(v.time);
      });
      let max1 = echartDataFc1.maxData.data.reduce((acr, cur) => {
        return acr > cur ? acr : cur
      })
      let max2 = echartDataFc1.minData.data.reduce((acr1, cur1) => {
        return acr1 > cur1 ? acr1 : cur1
      })
      maxY.value = max1 >= max2 ? formatRoundNum(max1 * 2) : formatRoundNum(max2 * 2)
    }
  },
  { deep: true }
);
</script>

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

  .top-area {
    height: 24%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
 

    .top-box {
      position: relative;
      width: 32%;
      height: 88%;
      background: url('../../../../../assets//images/fire/fc-t.png') no-repeat;
      background-size: 100% 100%;

      .top-title {
        position: absolute;
        left: 50%;
        top: 4%;
        transform: translate(-50%, 0);
      }

      .top-content {
        position: absolute;
        top: 20%;
        left: 0;
        width: 100%;
        height: 80%;
        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: 72% 54%;

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

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

          .item-value1 {
            position: absolute;
            right: 21%;
            top: 50%;
            transform: translate(0, -32%);
            font-size: 12px;
            font-family: 'douyuFont';
            color: rgb(145, 230, 9);
          }

          .item-value2 {
            position: absolute;
            right: 21%;
            top: 50%;
            transform: translate(0, -32%);
            font-size: 12px;
            font-family: 'douyuFont';
            color: rgb(0, 242, 255);
          }

          .item-value3 {
            position: absolute;
            right: 21%;
            top: 50%;
            transform: translate(0, -32%);
            font-size: 12px;
            font-family: 'douyuFont';
            color: #ffff35;
          }

          .item-value4 {
            position: absolute;
            right: 21%;
            top: 50%;
            transform: translate(0, -32%);
            font-size: 12px;
            font-family: 'douyuFont';
            color: #ffbe69;
          }

          .item-value5 {
            position: absolute;
            right: 21%;
            top: 50%;
            transform: translate(0, -32%);
            font-size: 12px;
            font-family: 'douyuFont';
            color: #ff6f00;
          }

          .item-value6 {
            position: absolute;
            right: 21%;
            top: 50%;
            transform: translate(0, -32%);
            font-size: 12px;
            font-family: 'douyuFont';
            color: #ff0000;
          }
        }
      }
    }
  }

  .center-area {
    height: 34%;
    margin-bottom: 20px;
    background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
    background-size: 100% 100%;

    .center-t {
      height: 50%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      background: url('../../../../../assets/images/fire/dz.png') no-repeat;
      background-size: 100% 100%;

      .t-box {
        width: 14%;
        height: 75%;
        background: url('../../../../../assets/images/fire/dz1.png') no-repeat;
        background-size: 100% 100%;

        .box-label {
          text-align: center;
        }
      }
    }

    .center-b {
      height: 50%;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .b-box {
        width: 14%;
        height: 75%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .box-label {
          width: 78%;
          height: 44%;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #3df6ff;
          font-family: 'douyuFont';
          background: url('../../../../../assets/images/fire/dz2.png') no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }

  .bot-area {
    height: calc(100% - 58% - 30px);
    background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
    background-size: 100% 100%;
  }

}
</style>