mky-vent-base/src/views/vent/monitorManager/beltTunMonitor/components/beltTunDustHome.vue

<template>
  <a-spin tip="Loading..." :spinning="loading">
    <div class="monitor-container">
      <div class="lr left-box vent-margin-t-10">
        <div class="fire-analysis1">
          <div class="analysis-item warning3">
            <div class="title">粉尘风险预警</div>
            <div class="value">高风险</div>
          </div>
        </div>
        <div class="base-info">
          <div class="base-item">
            <div class="title">喷雾总数</div>
            <div class="value len">20个</div>
          </div>
          <div class="base-item">
            <div class="title">当日粉尘最大值</div>
            <div class="value">3.2mg/m³</div>
          </div>
        </div>
        <ventBox1 class="vent-margin-t-20">
          <template #title>
            <div>粉尘监测与分析<a class="a-detail">(详情)</a></div>
          </template>
          <template #container>
            <div class="">
              <div class="vent-flex-row vent-margin-l-5">
                <div class="vent-flex-row">
                  <SvgIcon class="icon vent-margin-r-5" size="13" name="alarm-temperature" />
                  <span>是否报警：</span>
                </div>
                <div class="vent-flex-row vent-margin-l-10">
                  <div class="vent-breathe-yc vent-margin-r-8"></div>
                  <div>正常</div>
                </div>
              </div>
              <div class="warning-state-detail">
                报警产生于 <span class="state-color">2013-05-24 15:52:42</span> 时刻 <span class="state-color">皮带巷转载点粉尘监测1</span>
              </div>
            </div>
          </template>
        </ventBox1>
        <div class="item-box vent-margin-t-10">
          <LivePlayer id="fm-player1" style="height: 220px" ref="player1" :videoUrl="flvURL1()" muted live loading controls />
        </div>
      </div>
      <div class="lr right-box">
        <ventBox1 class="vent-margin-t-10">
          <template #title>
            <div>通风参数监测</div>
          </template>
          <template #container>
            <div class="input-item vent-flex-row">
              <div>设备控制：</div>
              <div class="vent-flex-row btn-box">
                <div class="btn btn1">一键启动</div>
                <div class="btn btn2">一键停止</div>
              </div>
            </div>
            <a-table
              :columns="dustColumns"
              :data-source="dustDataSource"
              :pagination="false"
              size="small"
              maxWidth="340"
              :scroll="{ x: 'max-content', y: 200 }"
            >
              <template #bodyCell="{ column, record }">
                <template v-if="column.dataIndex === 'warnFlag'">
                  <span v-if="record['warnFlag'] == 0" style="color: #00ff00">链接</span>
                  <span v-else style="color: #ff0000"> {{ record.warnDes }}</span>
                </template>
                <template v-if="column.dataIndex === 'action'">
                  <a-switch v-model:checked="openDust" @change="handleDust(record)" />
                </template>
              </template>
            </a-table>
          </template>
        </ventBox1>
      </div>
    </div>
  </a-spin>
</template>

<script setup lang="ts">
  import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps } from 'vue';
  import { list } from '../beltTun.api';
  import ventBox1 from '/@/components/vent/ventBox1.vue';
  import { SvgIcon } from '/@/components/Icon';
  import { dustColumns, dustMonitorColumns } from '../beltTun.data';
  import LivePlayer from '@liveqing/liveplayer-v3';

  const props = defineProps({
    deviceId: {
      type: String,
      require: true,
    },
  });
  const player1 = ref(null);
  const loading = ref(false);
  const flvURL1 = () => {
    return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
  };

  // 默认初始是第一行
  const openDust = ref(false);
  const beltTunSource = ref({});
  const beltTunHistorySource = ref([]);
  const dustDataSource = ref([]);

  // 监测数据
  const selectData = reactive({});

  function handleDust(record) {
    //
  }

  // https获取监测数据
  let timer: null | NodeJS.Timeout = null;
  function getMonitor(flag?) {
    if (Object.prototype.toString.call(timer) === '[object Null]') {
      timer = setTimeout(
        async () => {
          if (props.deviceId) {
            const data = await getDataSource(props.deviceId);
            Object.assign(selectData, data);
          }
          if (timer) {
            timer = null;
          }
          await getMonitor();
          loading.value = false;
        },
        flag ? 0 : 1000
      );
    }
  }

  async function getDataSource(systemID) {
    const res = await list({ devicetype: 'sys', systemID, type: 'dustS' });
    const result = res.deviceInfo;
    for (const key in result) {
      const item = result[key];
      // ''.startsWith
      if (item.type.startsWith('dust')) {
        // 风门
        dustDataSource.value = item['datalist'].filter((data: any) => {
          const readData = data.readData;
          return Object.assign(data, readData);
        });
      }
    }
    loading.value = false;
    beltTunHistorySource.value = res['sysInfo']['history'];
    beltTunSource.value = Object.assign(res['sysInfo'], res['sysInfo']['readData']);
  }

  function toDetail() {}

  function changeType(e: Event, item) {
    item.value = e.target?.value;
  }

  onBeforeMount(() => {});

  onMounted(async () => {
    loading.value = true;
    timer = null;
    await getMonitor(true);
  });
  onUnmounted(() => {
    if (timer) {
      clearTimeout(timer);
      timer = undefined;
    }
  });
</script>
<style lang="less" scoped>
  @import '/@/design/vent/modal.less';
  @import '../../comment/less/workFace.less';
  @ventSpace: zxm;

  .base-info {
    display: flex;
    justify-content: space-between;
    color: #fff;
    padding: 0 5px;
    margin-top: 20px;
    .base-item {
      width: calc(50% - 8px);
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 17px;
      border: 1px solid;
      border-image: linear-gradient(45deg, #00e5ff92, #006fa684, #00e5ff22, #006fa614) 1;
      .title {
        width: 100%;
        background: #00e5ff52;
        background: linear-gradient(45deg, #006ea652, #00f2ff42);
        text-align: center;
        line-height: 45px;
      }
      .value {
        width: 100%;
        background: #006ea622;
        text-align: center;
        line-height: 45px;
        font-family: 'douyuFont';
        color: #1bf5fd;
        padding-top: 5px;
      }
    }
  }

  .dust-fan-monitor {
    display: flex;
    flex-wrap: wrap;
  }
  .dust-max {
    flex: 1;
    display: flex;
    align-items: center;
    background-image: linear-gradient(to right, #00f2ff42, #006ea600);
    border-left: 4px solid #5df7ff88;
    margin-top: 10px;
    margin-left: 8px;
    .icon-style {
      background: #25536f;
      padding-left: 6px;
      margin-right: 10px;
      padding-right: 6px;
    }
    .value {
      font-family: 'douyuFont';
      font-weight: 600;
      font-size: 14px;
      color: #28dce4;
      margin-right: 10px;
      margin-left: 30px;
    }
    .max-data {
      width: calc(100% - 85px);
      display: flex;
      margin-left: 5px;
      margin-right: 30px;
      .title {
        font-size: 16px;
      }
    }
  }

  .dust-fan-monitor-item {
    width: 152px;
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(25, 251, 255, 0.4);
    box-shadow: inset 0 0 20px rgba(0, 197, 255, 0.4);
    background: rgba(0, 0, 0, 0.06666667);
    margin-bottom: 5px;
    padding: 8px 0;

    &:nth-child(2n) {
      margin-left: 12px;
    }

    .title {
      color: #5dfaff;
    }

    .unit {
      font-size: 13px;
      color: #ffffffaa;
    }

    .value {
      color: #ffb212;
    }
  }

  .fault {
    .title {
      color: #c4fdff;
    }

    .value {
      // color: #FFB212;
      color: #61ddb1;
    }
  }
</style>