vent-template/src/views/vent/monitorManager/tunFaceMonitor/components/tunFaceVentHome.vue

<template>
  <a-spin tip="Loading..." :spinning="loading">
    <div class="monitor-container">
      <div class="lr left-box vent-margin-t-10">
        <ventBox1>
          <template #title>
            <div>掘进工作面通风状态监测</div>
          </template>
          <template #container>
            <div class="warning-monitor">
              <div class="warning-item">
                <div class="title">瓦斯超限报警</div>
                <div class="state-box">
                  <span class="signal-round signal-round-blue"></span><span class="state vent-margin-l-8">正常</span>
                </div>
              </div>
              <div class="warning-item">
                <div class="title">风量报警</div>
                <div class="state-box">
                  <span class="signal-round signal-round-blue"></span><span class="state vent-margin-l-8">正常</span>
                </div>
              </div>
              <div class="warning-item">
                <div class="title">漏风超限报警</div>
                <div class="state-box">
                  <span class="signal-round signal-round-blue"></span><span class="state vent-margin-l-8">正常</span>
                </div>
              </div>
              <div class="warning-item">
                <div class="title">风机报警</div>
                <div class="state-box">
                  <span class="signal-round signal-round-blue"></span><span class="state vent-margin-l-8">正常</span>
                </div>
              </div>
            </div>
            <div class="data-group">
              <div class="data-item" v-for="(item, index) in ventMonitor" :key="index">
                <div class="title">{{ item.title }}</div>
                <div class="value">-</div>
              </div>
            </div>     
          </template>
        </ventBox1>
        <ventBox1 class="vent-margin-t-10">
          <template #title>
            <div>风门监测与控制</div>
          </template>
          <template #container>
            <a-table :columns="gateColumns" :data-source="gateDataSource" :pagination="false" size="small"
              maxWidth="340" :scroll="{ x: 'max-content', y: 85 }">
              <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 class="action-link" @click="toDetail">详情</a>
                </template>
              </template>
            </a-table>
          </template>
        </ventBox1>
        <ventBox1 class="vent-margin-t-10">
          <template #title>
            <div>风窗监测与控制</div>
          </template>
          <template #container>
            <a-table :columns="windowColumns" :data-source="windowDataSource" :pagination="false" size="small"
              maxWidth="340" :scroll="{ x: 'max-content', y: 85 }">
              <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 class="action-link" @click="toDetail">详情</a>
                </template>
              </template>

            </a-table>
          </template>
        </ventBox1>
        <ventBox1 class="vent-margin-t-10">
          <template #title>
            <div>风速传感器监测</div>
          </template>
          <template #container>
            <a-table :columns="windowColumns" :data-source="windowDataSource" :pagination="false" size="small"
              maxWidth="340" :scroll="{ x: 'max-content', y: 85 }">
              <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 class="action-link" @click="toDetail">详情</a>
                </template>
              </template>

            </a-table>
          </template>
        </ventBox1>
      </div>
      <div class="lr right-box">
        <div class="item-box sensor-container">
          <ventBox1 class="vent-margin-t-10">
            <template #title>
              <div>局部风机监测与管控</div>
            </template>
            <template #container>
              <div class="data-group">
                <div class="data-item" v-for="(item, index) in fanMonitor" :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="18" name="shandian"/><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>
              </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 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 class="parameter-title group-parameter-title"><SvgIcon class="icon" size="18" name="plsz"/><span>频率设置</span></div>
              <!-- 频率设置 -->
              <div class="input-item">
                <div class="title-auto">频率设置：</div>
                <div>
                  <a-input class="input-value" v-model="frequencyVal" />
                  <span class="btn btn1 vent-margin-l-8">保存</span>
                </div>
              </div>
              <!-- 风电闭锁 -->
              <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="18" name="fdbs"/><span>风电闭锁</span></div>
              <div class="input-item">
                <div class="title-auto">值设置(m³/min)：</div>
                <div>
                  <a-input class="input-value" v-model="windLockVal" />
                  <span class="btn btn1 vent-margin-l-8">保存</span>
                </div>
              </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 class="parameter-title group-parameter-title"><SvgIcon class="icon" size="18" name="fdbs"/><span>瓦斯电闭锁</span></div>
              <div class="input-item">
                <div class="title-auto">值设置(m³/min)：</div>
                <div>
                  <a-input class="input-value" v-model="gasLockVal" />
                  <span class="btn btn1 vent-margin-l-8">保存</span>
                </div>
              </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 class="parameter-title group-parameter-title"><SvgIcon class="icon" size="18" name="param-setting"/><span>风筒参数设置</span></div>
              <div class="input-item">
                <div class="title-auto">风筒长度(m)：</div>
                <div>
                  <a-input class="input-value" v-model="fanBaseInfo.len" />
                  <span class="btn btn1 vent-margin-l-8">保存</span>
                </div>
              </div>
              <div class="input-item">
                <div class="title-auto">风筒直径(cm)：</div>
                <div>
                  <a-input class="input-value" v-model="fanBaseInfo.len" />
                  <span class="btn btn1 vent-margin-l-8">保存</span>
                </div>
              </div>
            </template>
          </ventBox1>

        </div>
      </div>
    </div>
  </a-spin>
</template>

<script setup lang="ts">

import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps } from 'vue';
import { list } from '../tunFace.api';
import ventBox1 from '/@/components/vent/ventBox1.vue'
import { SvgIcon } from '/@/components/Icon';
import { gateColumns, windowColumns, fanMonitor, ventMonitor, disasterParam, compressorParam, compressorDeviceParam } from '../tunFace.data'

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

const loading = ref(false)
const compressorMode = ref(1)

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

const frequencyVal = ref(0)
const windLockVal = ref(0)
const gasLockVal = ref(0)
const fanBaseInfo = reactive({
  len: 0,
  diameter: 0
})

// 监测数据
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, type: 'ventS' });
  const result = res.deviceInfo;
  for (const key in result) {
    const item = result[key]
    // ''.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);
      })
    }
    workFaceSource.value = Object.assign(res['sysInfo'], res['sysInfo']['readData']);
    workFaceHistorySource.value = res['sysInfo']['history']
    loading.value = false;
  }
}

function toDetail() {

}


onBeforeMount(() => {

});

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

:deep(.@{ventSpace}-tabs-tabpane-active) {
  height: 100%;
}

</style>