mky-vent-base/src/views/vent/monitorManager/mainFanMonitor/components/entryThree.vue

<template>
  <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
    <!-- <a-spin :spinning="loading" /> -->
    <div
      id="main3DCSS"
      class="threejs-Object-CSS"
      style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 1; top: 0"
    >
      <div style="position: relative" v-if="selectData['modalTyoe']">
        <div class="elementTag" id="inputBox1" v-if="backMonitorIsShow && false">
          <div class="elementContent elementContent-r">
            <!-- <div class="element-item"><span class="data-title">风机气压(Pa)：</span><span>{{ selectData.DataPa ? selectData.DataPa : '-' }}</span></div> -->
            <div class="element-item"
              ><span class="data-title">风机负压(Pa)：</span><span>{{ selectData.Fan2FanPre ? selectData.Fan2FanPre : '-' }}</span></div
            >
            <div class="element-item"
              ><span class="data-title">风机风量(m³/s)：</span><span>{{ selectData.Fan2m3 ? selectData.Fan2m3 : '-' }}</span></div
            >
          </div>
        </div>
        <div class="elementTag" id="inputBox" v-if="frontMonitorIsShow && false">
          <div class="elementContent elementContent-r">
            <!-- <div class="element-item"><span class="data-title">风机全压(Pa)：</span><span>{{ selectData.DataPa ? selectData.DataPa : '-' }}</span></div> -->
            <div class="element-item"
              ><span class="data-title">风机负压(Pa)：</span><span>{{ selectData.Fan1FanPre ? selectData.Fan1FanPre : '-' }}</span></div
            >
            <div class="element-item"
              ><span class="data-title">风机风量(m³/s)：</span><span>{{ selectData.Fan1m3 ? selectData.Fan1m3 : '-' }}</span></div
            >
          </div>
        </div>
        <div class="elementTag" id="inputBox2" v-if="centerMonitorIsShow && false">
          <div class="elementContent elementContent-r">
            <!-- <div class="element-item"><span class="data-title">风机气压(Pa)：</span><span>{{ selectData.DataPa ? selectData.DataPa : '-' }}</span></div> -->
            <div class="element-item"
              ><span class="data-title">风机负压(Pa)：</span><span>{{ selectData.Fan3FanPre ? selectData.Fan3FanPre : '-' }}</span></div
            >
            <div class="element-item"
              ><span class="data-title">风机风量(m³/s)：</span><span>{{ selectData.Fan3m3 ? selectData.Fan3m3 : '-' }}</span></div
            >
          </div>
        </div>
        <!-- 18模拟反风锁井 -->
        <!-- <div v-if="hasPermission('mainFan:ffsjMonitor')" class="elementTag" id="fbm">
          <div class="elementContent elementContent-r fbm-box">
            <div class="fbm-video">
              <LivePlayer id="main-player2" ref="player2" :videoUrl="flvURL2()" muted live />
              <div class="vent-flex-row-between vent-margin-t-20">
                <span class="data-title">风门开启状态：</span>
                <template v-if="selectData['ExplosionVentOpen'] == 1 && selectData['ExplosionVentClose'] == 0">
                  <span class="data-title"><span class="signal-round signal-round-blue vent-margin-r-8"></span>开启</span>
                </template>
                <template v-else-if="selectData['ExplosionVentOpen'] == 0 && selectData['ExplosionVentClose'] == 1">
                  <span class="data-title"><span class="signal-round signal-round-gry vent-margin-r-8"></span>关闭</span>
                </template>
                <template v-else>
                  <div class="vent-margin-l-10"
                    ><span class="signal-round signal-round-warning vent-margin-r-8"></span>防爆门正在运行 或 数据异常</div
                  >
                </template>
              </div>
              <div class="vent-flex-row-between vent-margin-t-10">
                <span class="data-title">反风锁紧状态：</span>
                <template
                  v-if="
                    selectData['Lock1Open'] == 1 && selectData['Lock1Close'] == 0 && selectData['Lock2Open'] == 1 && selectData['Lock2Close'] == '0'
                  "
                >
                  <span class="data-title"><span class="signal-round signal-round-blue vent-margin-r-8"></span>锁1开</span>
                  <span class="data-title"><span class="signal-round signal-round-blue vent-margin-r-8"></span>锁2开</span>
                </template>
                <template
                  v-else-if="
                    selectData['Lock1Open'] == '0' && selectData['Lock1Close'] == 1 && selectData['Lock2Open'] == '0' && selectData['Lock2Close'] == 1
                  "
                >
                  <span class="data-title"><span class="signal-round signal-round-gry vent-margin-r-8"></span>锁1关</span>
                  <span class="data-title"><span class="signal-round signal-round-gry vent-margin-r-8"></span>锁2关</span>
                </template>
                <template v-else>
                  <div class="vent-margin-l-10"
                    ><span class="signal-round signal-round-warning vent-margin-r-8"></span>反风锁紧正在运行 或 数据异常</div
                  >
                </template>
              </div>
            </div>
            <div class="fbm-data">
              <div class="element-item"
                ><span class="data-title">井口负压(kPa)：</span
                ><span>{{ selectData.Fan1FanPre ? selectData.Fan1FanPre : selectData.Fan2FanPre ? selectData.Fan2FanPre : '-' }}</span></div
              >
              <div class="element-item"><span class="data-title">井口正压(kPa)：</span><span>0</span></div>
              <div class="element-item"><span class="data-title">井口温度(℃)：</span><span>19.132</span></div>
              <div class="element-item"><span class="data-title">甲烷浓度(%)：</span><span>0.36</span></div>
              <div class="element-item"><span class="data-title">CO浓度(%)：</span><span>0</span></div>
              <div class="vent-flex-row-between">
                <span class="data-title">操作方式：</span>
                <span class="data-title"><span class="signal-round signal-round-blue vent-margin-r-8"></span>远程</span>
                <span class="data-title"><span class="signal-round signal-round-gry vent-margin-r-8"></span>就地</span>
              </div>
            </div>
          </div>
        </div> -->
        <div v-if="hasPermission('mainFan:ffsjMonitor')">
          <div class="elementContent elementContent-r fbm-box">
            <div class="fbm-video">
              <div class="vent-flex-row-between vent-margin-t-20">
                <span class="data-title">风门开启状态：</span>
                <template v-if="explosionDoorData['gate_1_kai'] == 1">
                  <span class="data-title"
                    ><span
                      class="signal-round vent-margin-r-8"
                      :class="{ 'signal-round-blue': explosionDoorData['gate_1_kai'] == 1, 'signal-round-gry': explosionDoorData['gate_1_kai'] == 0 }"
                    ></span
                    >门1开启</span
                  >
                </template>
                <template v-else-if="explosionDoorData['gate_2_kai'] == 1">
                  <span class="data-title"
                    ><span
                      class="signal-round vent-margin-r-8"
                      :class="{ 'signal-round-blue': explosionDoorData['gate_1_kai'] == 1, 'signal-round-gry': explosionDoorData['gate_1_kai'] == 0 }"
                    ></span
                    >门2开启</span
                  >
                </template>
                <template v-else>
                  <div class="vent-margin-l-10"
                    ><span class="signal-round signal-round-warning vent-margin-r-8"></span>防爆门正在运行 或 数据异常</div
                  >
                </template>
              </div>
              <div class="vent-flex-row-between vent-margin-t-10">
                <span class="data-title">反风锁紧状态：</span>
                <div>
                  <span class="data-title"
                    ><span
                      class="signal-round vent-margin-r-8"
                      :class="{ 'signal-round-blue': explosionDoorData['suo1_kai'] == 1, 'signal-round-gry': explosionDoorData['suo1_kai'] == 0 }"
                    ></span
                    >锁1开</span
                  >
                  <span class="data-title"
                    ><span
                      class="signal-round vent-margin-r-8"
                      :class="{ 'signal-round-blue': explosionDoorData['suo1_guan'] == 1, 'signal-round-gry': explosionDoorData['suo1_guan'] == 0 }"
                    ></span
                    >锁1关</span
                  >
                </div>
                <div>
                  <span class="data-title"
                    ><span
                      class="signal-round vent-margin-r-8"
                      :class="{ 'signal-round-blue': explosionDoorData['suo2_kai'] == 1, 'signal-round-gry': explosionDoorData['suo2_kai'] == 0 }"
                    ></span
                    >锁1开</span
                  >
                  <span class="data-title"
                    ><span
                      class="signal-round vent-margin-r-8"
                      :class="{ 'signal-round-blue': explosionDoorData['suo2_guan'] == 1, 'signal-round-gry': explosionDoorData['suo2_guan'] == 0 }"
                    ></span
                    >锁2关</span
                  >
                </div>
                <div>
                  <span class="data-title"
                    ><span
                      class="signal-round vent-margin-r-8"
                      :class="{ 'signal-round-blue': explosionDoorData['suo3_kai'] == 1, 'signal-round-gry': explosionDoorData['suo3_kai'] == 0 }"
                    ></span
                    >锁3开</span
                  >
                  <span class="data-title"
                    ><span
                      class="signal-round vent-margin-r-8"
                      :class="{ 'signal-round-blue': explosionDoorData['suo3_guan'] == 1, 'signal-round-gry': explosionDoorData['suo3_guan'] == 0 }"
                    ></span
                    >锁3关</span
                  >
                </div>
                <div>
                  <span class="data-title"
                    ><span
                      class="signal-round vent-margin-r-8"
                      :class="{ 'signal-round-blue': explosionDoorData['suo4_kai'] == 1, 'signal-round-gry': explosionDoorData['suo4_kai'] == 0 }"
                    ></span
                    >锁4开</span
                  >
                  <span class="data-title"
                    ><span
                      class="signal-round vent-margin-r-8"
                      :class="{ 'signal-round-blue': explosionDoorData['suo4_guan'] == 1, 'signal-round-gry': explosionDoorData['suo4_guan'] == 0 }"
                    ></span
                    >锁4关</span
                  >
                </div>
              </div>
            </div>
            <div class="fbm-data">
              <div class="vent-flex-row-between">
                <span class="data-title">操作方式：</span>
                <span class="data-title"
                  ><span
                    class="signal-round signal-round-blue vent-margin-r-8"
                    :class="{ 'signal-round-blue': explosionDoorData['jd_yc'] == 1 }"
                  ></span
                  >远程</span
                >
                <span class="data-title"
                  ><span class="signal-round vent-margin-r-8" :class="{ 'signal-round-blue': explosionDoorData['jd_yc'] == 0 }"></span>就地</span
                >
              </div>
              <div class="vent-flex-row-between">
                <span class="data-title">是否检修：</span>
                <span class="data-title"
                  ><span
                    class="signal-round signal-round-blue vent-margin-r-8"
                    :class="{ 'signal-round-blue': explosionDoorData['zc_jx'] == 1 }"
                  ></span
                  >正常</span
                >
                <span class="data-title"
                  ><span class="signal-round vent-margin-r-8" :class="{ 'signal-round-blue': explosionDoorData['zc_jx'] == 0 }"></span>检修</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="main3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
    <FanEchrats id="fan-echarts" :chartData="selectData" style="position: absolute; z-index: -1" />
  </div>
</template>
<script lang="ts" setup>
  import { usePermission } from '/@/hooks/web/usePermission';

  defineProps<{
    loading: boolean;
    selectData: Record<string, any>;
    explosionDoorData: Record<string, any>;
    centerMonitorIsShow: boolean;
    frontMonitorIsShow: boolean;
    backMonitorIsShow: boolean;
  }>();
  const { hasPermission } = usePermission();
</script>
<style scoped lang="less">
  @import '/@/design/vent/modal.less';
</style>