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">
          <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">
          <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">
          <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_ljh')" class="elementTag" id="fbm">
          <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['openGate'] == 1 && explosionDoorData['closeGate'] == 0">
                  <span class="data-title"><span class="signal-round signal-round-blue vent-margin-r-8"></span>开启</span>
                </template>
                <template v-else-if="explosionDoorData['openGate'] == 0 && explosionDoorData['closeGate'] == 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="
                    explosionDoorData['lock1Open'] == 1 &&
                    explosionDoorData['lock1Close'] == 0 &&
                    explosionDoorData['lock2Open'] == 1 &&
                    explosionDoorData['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="
                    explosionDoorData['lock1Open'] == 0 &&
                    explosionDoorData['lock1Close'] == 1 &&
                    explosionDoorData['lock2Open'] == 0 &&
                    explosionDoorData['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>{{ get(explosionDoorData, 'zhengya') }}</span></div
              >
              <div class="element-item"
                ><span class="data-title">井口温度(℃)：</span><span>{{ get(explosionDoorData, 'tempreture') }}</span></div
              >
              <div class="element-item"
                ><span class="data-title">甲烷浓度(%)：</span><span>{{ get(explosionDoorData, 'ch4') }}</span></div
              >
              <div class="element-item"
                ><span class="data-title">CO浓度(%)：</span><span>{{ get(explosionDoorData, 'co') }}</span></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': get(explosionDoorData, 'isRemote') == 1 }"
                    ></span
                    >远程</span
                  >
                  <span class="data-title"
                    ><span class="signal-round vent-margin-r-8" :class="{ 'signal-round-blue': get(explosionDoorData, 'isRemote') == 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': get(explosionDoorData, 'isrun') == 1 }"
                    ></span
                    >正常</span
                  >
                  <span class="data-title"
                    ><span class="signal-round vent-margin-r-8" :class="{ 'signal-round-blue': get(explosionDoorData, 'isrun') == 0 }"></span
                    >检修</span
                  >
                </div>
              </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';
  import { get } from '@/utils/ventutil';

  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';
  .threejs-Object-CSS {
    .elementTag {
      .elementContent {
        backdrop-filter: blur(2px);
        width: 220px;
        background-color: #00000099;
        box-shadow: 0px 0px 40px #005a838c inset;
        border: 2px solid #99b0c38c;
        padding: 15px 20px 15px 20px;
        font-size: 15px;

        .element-item {
          line-height: 38px;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        span {
          color: #f2a500;
        }

        .data-title {
          max-width: 190px;
          display: inline-block;
          color: var(--vent-font-color);
        }
      }

      .elementContent-r {
        &::before {
          right: 120px;
        }

        &::after {
          right: 270px;
          border: 4px solid #00ddff;
          background: #a7a7a766;
        }
      }

      .fbm-box {
        width: auto;
        display: flex;
        justify-content: space-between;

        .fbm-video {
          width: 240px;
          margin-right: 20px;
        }

        .fbm-data {
          width: 200px;
        }
      }
    }
  }
</style>