mky-vent-base/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(2000)
let echartDw=ref('(m³/min)')

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




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: el.datalist[0].typeName },
              {
                ids: 1,
                label: '报警等级',
                value: el.datalist[0].warnLevel,
              },
              { 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);
      });

    }
  },
  { deep: true }
);
</script>

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

  .top-area {
    height: 183px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 0px 15px;
    box-sizing: border-box;

    .top-box {
      position: relative;
      width: 480px;
      height: 160px;
      background: url('../../../../../assets//images/fire/fc-t.png') no-repeat;

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

      .top-content {
        position: absolute;
        top: 33px;
        left: 0;
        width: 100%;
        height: calc(100% - 33px);
        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;

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

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

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

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

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

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

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

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

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

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

      .t-box {
        width: 218px;
        height: 97px;
        background: url('../../../../../assets/images/fire/dz1.png') no-repeat;

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

    .center-b {
      height: 50%;
      // padding: 0px 80px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      // box-sizing: border-box;

      .b-box {
        width: 218px;
        height: 97px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .box-label {
          width: 169px;
          height: 42px;
          line-height: 42px;
          text-align: center;
          margin-bottom: 5px;
          color: #3df6ff;
          font-family: 'douyuFont';
          background: url('../../../../../assets/images/fire/dz2.png') no-repeat;
        }
      }
    }
  }

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

  .bot-area1 {
    height: calc(100% - 278px);
    background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
    background-size: 100% 100%;
  }
}
</style>