mky-vent-base/src/views/vent/monitorManager/fanlocalPage/index.vue

<template>
  <div class="fanlocalPage">
    <customHeader>局部风机监测</customHeader>
    <div class="left-icon">
      <img src="../../../../assets/images/vent/fanlocal-page/arrow-button.png" alt="" />
    </div>
    <div class="right-icon">
      <img class="img1" src="../../../../assets/images/vent/fanlocal-page/arrow-button.png" alt="" />
    </div>
    <div class="fanlocal-container">
      <div class="card-box" v-for="(item, index) in cardList" :key="index">
        <div class="card-title" @click="getClick(item)">{{ item.label }}</div>
        <div class="card-box-item">
          <div class="left-box-item">
            <div class="item-icon">
              <img src="../../../../assets/images/vent/fanlocal-page/is-txzt1.png" alt="" />
            </div>
            <div class="item-content">
              <div class="item-content-value">{{ item.txVal }}</div>
              <div class="item-content-text">{{ item.txLable }}</div>
            </div>
          </div>
          <div class="right-box-item">
            <div class="item-icon">
              <img src="../../../../assets/images/vent/fanlocal-page/is-warn1.png" alt="" />
            </div>
            <div class="item-content">
              <div class="item-content-value">{{ item.warnVal }}</div>
              <div class="item-content-text">{{ item.warnLabel }}</div>
            </div>
          </div>
        </div>
        <div class="card-box-list">
          <div class="list-item" v-for="(ite, ind) in item.listData" :key="ind">
            <div class="list-item-label">{{ ite.label }}</div>
            <div class="list-item-value">{{ `${ite.value}${ite.dw}` }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { onBeforeMount, ref, watch, onMounted, nextTick, defineAsyncComponent, reactive, onUnmounted, inject, unref } from 'vue';
  import customHeader from '/@/components/vent/customHeader.vue';
  import { device } from './fanlocal.api';
  import { useRouter } from 'vue-router';

  const props = defineProps({});

  let router = useRouter();
  let cardList = reactive<any[]>([]);
  const deviceType = ref('');

  // https获取监测数据
  let timer: null | NodeJS.Timeout = null;
  function getMonitor(flag?) {
    timer = setTimeout(
      async () => {
        await getList();
        if (timer) {
          timer = null;
        }
        getMonitor();
      },
      flag ? 0 : 3000
    );
  }
  //点击标题页面跳转
  function getClick(item) {
    router.push('/monitorChannel/monitor-fanlocal1?id=' + item.deviceID + '&deviceType=' + item.deviceType);
  }
  //获取列表数据
  async function getList() {
    let res = await device({ devicetype: 'fanlocal', pagetype: 'normal' });
    let res1 = await device({ devicetype: 'fanlocaldp', pagetype: 'normal' });
    let data = [...res.msgTxt[0].datalist, ...(res1.msgTxt[0] ? res1.msgTxt[0].datalist : [])];
    cardList.length = 0;
    if (data.length != 0) {
      data.forEach((el) => {
        cardList.push({
          deviceID: el.deviceID,
          deviceType: el.deviceType,
          label: el.strinstallpos,
          txVal: el.netStatus == 1 ? '连接' : '未连接',
          txLable: '通讯状态',
          warnVal: el.warnLevel_str ? el.warnLevel_str : '-',
          warnLabel: '是否报警',
          listData: [
            {
              label: '运行风机',
              value: el.readData.Fan1StartStatus == '1' ? '1#风机' : el.readData.Fan2StartStatus == '1' ? '2#风机' : '--',
              dw: '',
            },
            {
              label: '风量',
              value: el.readData.windQuantity2 ? el.readData.windQuantity2 : '-',
              dw: 'm³/min',
            },
            {
              label: '风速',
              value: el.readData.windSpeed2 ? el.readData.windSpeed2 : '-',
              dw: 'm/s',
            },

            { label: '时间', value: el.readTime, dw: '' },
          ],
        });
      });
    }
  }

  onMounted(() => {
    getList();
    getMonitor(true);
  });
  onUnmounted(() => {
    if (timer) {
      clearTimeout(timer);
      timer = undefined;
    }
  });
</script>
<style lang="less" scoped>
  .fanlocalPage {
    width: 100%;
    height: 100%;
    padding: 100px 60px 20px 60px;
    box-sizing: border-box;
    position: relative;

    .left-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: calc(100% - 100px);
      position: absolute;
      left: 0;
      top: 100px;
    }

    .right-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: calc(100% - 100px);
      position: absolute;
      right: 0;
      top: 100px;
    }

    img {
      width: 60px;
      height: 60px;
    }

    .img1 {
      transform: rotate(180deg);
    }

    .fanlocal-container {
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      overflow-y: auto;

      .card-box {
        position: relative;
        width: 417px;
        height: 380px;
        margin: 0px 15px 15px 0px;
        background: url(/src/assets/images/vent/fanlocal-page/card.png) no-repeat center;
        background-size: 100% 100%;

        .card-title {
          position: absolute;
          left: 50%;
          top: 6px;
          transform: translate(-50%, 0);
          font-size: 14px;
          font-family: 'douyuFont';
          color: #fff;
          cursor: pointer;
        }

        .card-box-item {
          width: 100%;
          height: 64px;
          position: absolute;
          left: 0;
          top: 55px;
          display: flex;
          justify-content: space-around;

          .left-box-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 45%;
            height: 100%;
            padding: 5px 10px;
            background: url('../../../../assets/images/vent/fanlocal-page/is-txzt.png') no-repeat center;
            background-size: 100% 100%;
            box-sizing: border-box;
          }

          .right-box-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 45%;
            height: 100%;
            padding: 5px 10px;
            background: url('../../../../assets/images/vent/fanlocal-page/is-warn.png') no-repeat center;
            background-size: 100% 100%;
            box-sizing: border-box;
          }

          .item-icon {
            width: 60px;
            height: 100%;
            margin-right: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          .item-content {
            width: calc(100% - 60px);
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            color: #fff;
            font-size: 14px;
            padding-top: 10px;
            box-sizing: border-box;

            .item-content-value {
              font-family: 'douyuFont';
              color: #01fefc;
            }
          }
        }

        .card-box-list {
          width: 100%;
          height: 245px;
          padding: 0px 15px;
          box-sizing: border-box;
          position: absolute;
          left: 0;
          top: 130px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          overflow-y: auto;

          .list-item {
            height: 30px;
            padding: 0px 25px;
            box-sizing: border-box;
            color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: url('../../../../assets/images/vent/fanlocal-page/one-bg.png') no-repeat center;
            background-size: 100% 100%;

            .list-item-value {
              color: #01fefc;
            }
          }
        }
      }
    }
  }
</style>