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

<template>
  <a-spin tip="Loading..." :spinning="loading">
    <div class="monitor-container">
      <div class="lr left-box vent-margin-t-10">
        <div class="monitor-info item-box">
          <div class="fire-analysis">
            <!-- <div class="analysis-item ">
              <div class="title">内因火灾风险</div>
              <div class="value">低风险</div>
            </div> -->
            <div class="analysis-item warning3">
              <div class="title">外因火灾风险</div>
              <div class="value">高风险</div>
            </div>
          </div>
          <ventBox1 class="vent-margin-t-20">
            <template #title>
              <div>掘进工作面火灾信息监测</div>
            </template>
            <template #container>
              <div class="temperature-box">
                <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="14" name="CO-title" /><span>O2监测</span></div>
                <div class="co-param">
                  <div class="light-group">
                    <div class="param-item">
                      <div class="param">
                        <div class="param-icon">
                          <SvgIcon class="icon" size="30" name="O2-aveg" />
                          <div class="param-unit">平均(%)</div>
                        </div>

                        <div class="param-val-box">
                          <div class="param-val-icon"></div>
                          <div class="param-val">56.99</div>
                        </div>
                      </div>
                    </div>
                    <div class="param-item">
                      <div class="param">
                        <div class="param-icon">
                          <SvgIcon class="icon" size="30" name="O2-top" />
                          <div class="param-unit">最大(%)</div>
                        </div>
                        <div class="param-val-box">
                          <div class="param-val-icon"></div>
                          <div class="param-val">56.99</div>
                        </div>
                      </div>
                    </div>
                    <div class="param-item">
                      <div class="param">
                        <div class="param-icon">
                          <SvgIcon class="icon" size="30" name="O2-low" />
                          <div class="param-unit">最小(%)</div>
                        </div>
                        <div class="param-val-box">
                          <div class="param-val-icon"></div>
                          <div class="param-val">56.99</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- <div class="state">
                  最大值产生于 <span class="state-color">2013-05-24 15:52:42</span> 时刻 <span class="state-color">15212胶运顺槽600m</span> 处
                </div> -->
              </div>
              <div class="CO-box">
                <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="14" name="CO-title" /><span>CO监测</span></div>
                <div class="co-param">
                  <div class="light-group">
                    <div class="param-item">
                      <div class="param">
                        <div class="param-icon">
                          <SvgIcon class="icon" size="30" name="CO-aveg" />
                          <div class="param-unit">平均(%)</div>
                        </div>

                        <div class="param-val-box">
                          <div class="param-val-icon"></div>
                          <div class="param-val">56.99</div>
                        </div>
                      </div>
                    </div>
                    <div class="param-item">
                      <div class="param">
                        <div class="param-icon">
                          <SvgIcon class="icon" size="30" name="CO-top" />
                          <div class="param-unit">最大(%)</div>
                        </div>
                        <div class="param-val-box">
                          <div class="param-val-icon"></div>
                          <div class="param-val">56.99</div>
                        </div>
                      </div>
                    </div>
                    <div class="param-item">
                      <div class="param">
                        <div class="param-icon">
                          <SvgIcon class="icon" size="30" name="CO-low" />
                          <div class="param-unit">最小(%)</div>
                        </div>
                        <div class="param-val-box">
                          <div class="param-val-icon"></div>
                          <div class="param-val">56.99</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- <div class="state">
                  最大值产生于 <span class="state-color">2013-05-24 15:52:42</span> 时刻 <span class="state-color">15212胶运顺槽600m</span> 处
                </div> -->
              </div>
              <div class="">
                <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="14" name="smoke-title" /><span>烟雾传感器</span></div>
                <div class="warning-container">
                  <div class="warning-item">
                    <SvgIcon class="icon" size="24" name="alarm-smoke" />报警
                    <div class="num">0个</div>
                  </div>
                  <div class="warning-item">
                    <SvgIcon class="icon" size="20" name="warning-smoke" />预警
                    <div class="num">5个</div>
                  </div>
                  <div class="detail"><bars-outlined />查看详情</div>
                </div>
              </div>
              <div class="">
                <div class="parameter-title group-parameter-title"
                  ><SvgIcon class="icon" size="14" name="temperature-title" /><span>温度传感器</span></div
                >
                <div class="warning-container">
                  <div class="warning-item">
                    <SvgIcon class="icon" size="24" name="alarm-smoke" />报警
                    <div class="num">0个</div>
                  </div>
                  <div class="warning-item">
                    <SvgIcon class="icon" size="20" name="warning-smoke" />预警
                    <div class="num">5个</div>
                  </div>
                  <div class="detail"><bars-outlined />查看详情</div>
                </div>
              </div>
            </template>
          </ventBox1>
        </div>
      </div>
      <div class="lr right-box"> </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 { BarsOutlined } from '@ant-design/icons-vue';
  import { beamTubeColumns, groutColumns, nitrogenColumns, sprayColumns } from '../tunFace.data';
  import { SvgIcon } from '/@/components/Icon';

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

  const loading = ref(false);

  // 默认初始是第一行
  const openDust = ref(false);
  const workFaceSource = ref({});
  const workFaceHistorySource = ref([]);
  const sprayDataSource = ref([]);
  const bundleTubeDataSource = ref({});
  const pulpingDataSource = ref([]);
  const nitrogenDataSource = 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, type: 'fireS' });
    const result = res.deviceInfo;
    for (const key in result) {
      const item = result[key];
      if (item.type.startsWith('spray_auto')) {
        // 喷淋
        sprayDataSource.value = item['datalist'].filter((data: any) => {
          const readData = data.readData;
          return Object.assign(data, readData);
        });
      }
      if (item.type.startsWith('bundletube')) {
        // 束管
        bundleTubeDataSource.value = Object.assign(item['datalist'][0], item['datalist'][0]['readData']);
      }
      if (item.type === 'pulping_auto') {
        // 注浆
        pulpingDataSource.value = Object.assign(item['datalist'][0], item['datalist'][0]['readData']);
      }
      if (item.type === 'nitrogen_auto') {
        // 注氮
        nitrogenDataSource.value = Object.assign(item['datalist'][0], item['datalist'][0]['readData']);
      }
    }
    loading.value = false;
    workFaceHistorySource.value = res['sysInfo']['history'];
    workFaceSource.value = Object.assign(res['sysInfo'], res['sysInfo']['readData']);
  }

  function toDetail() {}

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

  function handlerDevice(param: string | Object) {}

  // 喷粉操作
  function handleSpray() {
    //
  }

  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;

  .fire-analysis {
    display: flex;
    justify-content: center;
    .analysis-item {
      width: 321px;
      height: 104px;
      text-align: center;
      background: url('/@/assets/images/vent/alarm/1.png');
      color: #ffffffdd;
      margin: 0 4px;

      .title {
        margin-top: 46px;
      }

      .value {
        margin-top: 7px;
      }
    }

    .warning1 {
      background: url('/@/assets/images/vent/alarm/21.png');
    }

    .warning2 {
      background: url('/@/assets/images/vent/alarm/31.png');
    }

    .warning3 {
      background: url('/@/assets/images/vent/alarm/41.png');
    }
  }
  .warning-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    .warning-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .icon {
        margin-right: 5px;
      }
      .num {
        margin-left: 14px;
      }
    }
    .detail {
      align-self: flex-end;
      color: #1bf5fd;
      cursor: pointer;
      &:hover {
        color: #1bf5fddd;
      }
    }
  }
</style>