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

<template>
  <div class="scene-box">
    <customHeader>智能通风风排瓦斯监测</customHeader>
    <div class="center-container">
      <div class="top box">
        <div class="title top-title">枣林风排瓦斯</div>
        <div class="items-top items-box">
          <div v-for="(item, n) in param" :key=n class="item" :class="`item${n + 1}`">
            <template v-if="item.code != 'gas'">
              <div class="item-title">{{ item.title }}</div>
              <div class="item-value">{{ dataSource[0] ? formatNum(dataSource[0][item.code]) : '-' }}</div>
            </template>
            <div class="gas-item" v-else-if="dataSource[0] && dataSource[0][item.code]">
              <div class="gas" v-for="(gasItem, i) in dataSource[0][item.code]" :key="i">
                <div class="title1">{{ gasItem['title'] }}</div>
                <div class="title2">瓦斯浓度（%）</div>
                <div class="item-value">{{ gasItem['value'] ? formatNum(gasItem['value']) : '-' }}</div>
              </div>
            </div>

          </div>
        </div>
      </div>
      <div class="bottom box">
        <div class="title bottom-title">刘家堰风排瓦斯</div>
        <div class="items-bottom items-box">
          <div v-for="(item, n) in param" :key=n class="item" :class="`item${n + 1}`">
            <template v-if="item.code != 'gas'">
              <div class="item-title">{{ item.title }}</div>
              <div class="item-value">{{ dataSource[1] ? formatNum(dataSource[1][item.code]) : '-' }}</div>
            </template>
            <div class="gas-item" v-else-if="dataSource[0] && dataSource[0][item.code]">
              <div class="gas" v-for="(gasItem, i) in dataSource[1][item.code]" :key="i">
                <div class="title1">{{ gasItem['title'] }}</div>
                <div class="title2">瓦斯浓度（%）</div>
                <div class="item-value">{{ gasItem['value'] ? formatNum(gasItem['value']) : '-' }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import customHeader from '/@/components/vent/customHeader.vue';
import { param, httpParam, result1, result2 } from './compre.data'
import { list } from './compre.api'
import { formatNum } from '/@/utils/ventutil'

type DataSource = {
  fl: number,
  gas: Array<any[]>,
  fpGas: number,
}
const dataSource = ref<DataSource[]>([])

let timer = null as unknown as NodeJS.Timer;
async function getDataSource(t: NodeJS.Timer) {
  setTimeout(async () => {
    // const result1 = resultFn1()
    // const result2 = resultFn2()
    try {
      for (let i = 0; i < httpParam.length; i++) {
        const item = httpParam[i]
        const result = await list({ devcode: item.devcode })
        // console.log('综合监测返回数据------>', result, result1, result2)
        let res = result[0]
        if (res) {
          switch (item.code) {
            case '1_fs1':
              result1[0]['fs'] = res['realvalue'];
              break;
            case '1_fs2':
              result1[1]['fs'] = res['realvalue'];
              break;
            case '1_gas1':
              result1[0]['gas'] = res['realvalue'];
              break;
            case '1_gas2':
              result1[1]['gas'] = res['realvalue'];
              break;
            case '2_fs1':
              result2[0]['fs'] = res['realvalue'];
              break;
            case '2_fs2':
              result2[1]['fs'] = res['realvalue'];
              break;
            case '2_gas1':
              result2[0]['gas'] = res['realvalue'];
              break;
            case '2_gas2':
              result2[1]['gas'] = res['realvalue'];
              break;
          }
        }
      }

      // 计算
      const data = [
        {
          fl: 0,
          gas: <any[]>[],
          fpGas: 0,
        },
        {
          fl: 0,
          gas: <any[]>[],
          fpGas: 0,
        }
      ]

      result1[0]['fl'] = result1[0].fs * result1[0].faceArea * 60
      result1[1]['fl'] = result1[1].fs * result1[1].faceArea * 60

      result2[0]['fl'] = result2[0].fs * result2[0].faceArea * 60
      result2[1]['fl'] = result2[1].fs * result2[1].faceArea * 60

      data[0]['fl'] = result1[0]['fl'] + result1[1]['fl']
      data[1]['fl'] = result2[0]['fl'] + result2[1]['fl']

      data[0]['fpGas'] = (result1[0]['fl'] * result1[0]['gas'] / 100) + (result1[1]['fl'] * result1[1]['gas'] / 100)
      data[1]['fpGas'] = (result2[0]['fl'] * result2[0]['gas'] / 100) + (result2[1]['fl'] * result2[1]['gas'] / 100)

      data[0]['gas'] = [
        {
          title: '二盘区一号回风联巷',
          value: result1[0]['gas']
        },
        {
          title: '二盘区二号回风联巷',
          value: result1[1]['gas']
        },
      ]
      data[1]['gas'] = [
        {
          title: '五盘区一号回风巷',
          value: result2[0]['gas']
        },
        {
          title: '五盘区二号回风巷',
          value: result2[1]['gas']
        },
      ]

      dataSource.value = data
    } catch (error) {
      // clearInterval(t)
    }
  }, 0)
}


onMounted(async () => {
  await getDataSource(timer)
  timer = setInterval(async () => {
    await getDataSource(timer)
  }, 1000)
});

onUnmounted(() => {
  clearInterval(timer)
});

</script>
<style lang="less" scoped>
.center-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .top {
    background: url('/@/assets/images/vent/compre-top.png') no-repeat;
    margin-top: 60px;
  }

  .bottom {
    background: url('/@/assets/images/vent/compre-bottom.png') no-repeat;
    margin-top: 80px;
  }

  .box {
    width: 1500px;
    height: 320px;
    background-size: contain;
    position: relative;

    .title {
      width: 100%;
      position: absolute;
      color: #dddddd;
      text-align: center;
      font-size: 22px;
      font-weight: 600;
      text-shadow: 2px 2px 4px #00000088;
    }

    .top-title {
      top: 14px;
    }

    .bottom-title {
      bottom: 33px;
    }

  }

  .items-top {
    margin-top: 130px;
  }

  .items-bottom {
    margin-top: 45px;
  }

  .items-box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    padding: 0 40px;

    .item {
      width: 375px;
      height: 132px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      padding-left: 160px;
      position: relative;

      .item-title {
        color: #e8e8e8;
        margin-bottom: 10px;
        font-weight: 600;
      }

      .item-value {
        font-size: 22px;
        font-family: 'douyuFont';
      }

      .gas-item {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        left: 0px;
        padding: 0 60px;
        top: 20px;

        .gas {
          .title1 {
            color: #00d9ff;
            margin-bottom: 10px;
            font-size: 16px;
            font-weight: 600;
          }

          .title2 {
            color: #fff;
            margin-bottom: 10px;
            font-weight: 600;
          }
        }
      }
    }

    .item1 {
      background: url('/@/assets/images/vent/compre-3.png') no-repeat;
      color: #30B6FF;
    }

    .item2 {
      width: 507px;
      height: 135px;
      background: url('/@/assets/images/vent/compre-2-1.png') no-repeat;
      color: #A9B6FF;
    }

    .item3 {
      background: url('/@/assets/images/vent/compre-1.png') no-repeat;
      color: #27FDED;
    }
  }

}</style>