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">
        <ventBox1 class="vent-margin-t-10">
          <template #title>
            <div>煤机喷雾参数</div>
          </template>
          <template #container>
            <div v-for="(item, index) in coalMachineDustParam" class="input-item" style="padding: 4px 8px; margin: 6px 0;"
              :key="index">
              <div class="title">{{ item.title }}</div>
              <div class="value">-</div>
              <div class="unit">{{ item.unit }}</div>
            </div>
          </template>
        </ventBox1>
      </div>
      <div class="lr right-box">
        <ventBox1>
          <template #title>
            <div>除尘风机监测与控制</div>
          </template>
          <template #container>
            <div class="dust-fan-monitor">
              <div class="dust-fan-monitor-item" v-for="(item, index) in dustMonitor" :key="index">
                <div class="title">{{ item.title }}</div>
                <div class=""><span class="value">-</span> <span class="unit"> {{ item.unit }} </span></div>
              </div>
              <div class="dust-fan-monitor-item fault">
                <div class="title">风机故障诊断</div>
                <div class=""><span class="value">正常</span></div>
              </div>
            </div>

            <div class="parameter-title group-parameter-title vent-margin-t-10">
              <SvgIcon class="icon" size="20" name="control-setting" /><span>设备基础参数</span>
            </div>
            <div class="data-group">
              <div class="data-item" v-for="(item, index) in dustFanParam" :key="index">
                <div class="title">{{ item.title }}</div>
                <div class="value">-</div>
              </div>
            </div>
            <div class="parameter-title group-parameter-title">
              <SvgIcon class="icon" size="20" name="control-setting" /><span>控制设备</span>
            </div>
            <div class="input-item vent-flex-row-between">
              <div>除尘器控制：</div>
              <div class="vent-flex-row btn-box">
                <div class="btn btn1">启动</div>
                <div class="btn btn2">停机</div>
              </div>
            </div>
            <div v-for="(item, index) in dustFanSetting" :key="index" class="input-item vent-flex-row-between">
              <div class="title-auto">{{ item.title }}:</div>
              <div>
                <a-input class="input-value" v-model="item.inputNum" placeholder="" />
                <span class="btn btn1 vent-margin-l-8">保存</span>
              </div>
            </div>
          </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 { dustFanParam, coalMachineDustParam, dustMonitor, dustFanSetting } from '../beltTun.data'

const props = defineProps({
  deviceId: {
    type: String,
    require: true
  }
})

const loading = ref(false)

// 默认初始是第一行
const openDust = ref(false)
const workFaceSource = ref({});
const workFaceHistorySource = ref([])
const gateDataSource = ref([]);
const windowDataSource = ref([]);
const windDataSource = ref([]);
const temperatureDataSource = ref([]);
const fireDataSource = ref([]);

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

// 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 });
  const result = res.msgTxt;
  result.forEach(item => {
    // ''.startsWith
    if (item.type.startsWith('gate')) {
      // 风门
      gateDataSource.value = item['datalist'].filter((data: any) => {
        const readData = data.readData;
        return Object.assign(data, readData);
      })

    }
    if (item.type.startsWith('window')) {
      // 风窗
      windowDataSource.value = item['datalist'].filter((data: any) => {
        const readData = data.readData;
        return Object.assign(data, readData);
      })
    }
    if (item.type.startsWith('windrect')) {
      // 测风
      windDataSource.value = item['datalist'].filter((data: any) => {
        const readData = data.readData;
        return Object.assign(data, readData);
      })
    }
    if (item.type === 'modelsensor_temperature') {
      // 温度
      temperatureDataSource.value = item['datalist'].filter((data: any) => {
        const readData = data.readData;
        return Object.assign(data, readData);
      })
    }
    if (item.type === 'modelsensor_fire') {
      // 火焰
      fireDataSource.value = item['datalist'].filter((data: any) => {
        const readData = data.readData;
        return Object.assign(data, readData);
      })
    }
    if (item.type === 'sys') {
      workFaceSource.value = Object.assign(item['datalist'][0], item['datalist'][0].readData);
    }
    if (item.type === 'surface_history') {
      workFaceHistorySource.value = item['datalist'][0]
    }
    loading.value = false;
  })
}

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;

.dust-fan-monitor {
  display: flex;
  flex-wrap: wrap;
}

.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>