mky-vent-base/src/views/vent/monitorManager/mainFanMonitor/index.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">
          <div class="elementContent elementContent-r" v-if="selectData.DataPa && backMonitorIsShow">
            <!-- <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">
          <div class="elementContent elementContent-r" v-if="selectData.DataPa && frontMonitorIsShow">
            <!-- <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>
        <!-- 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>
  <!-- 控制模式 -->
  <div v-if="hasPermission('fan:remote')" class="top-right">
    <div class="control-title">控制模式：</div>
    <a-radio-group v-model:value="selectData.autoRoManual">
      <template v-for="(item, index) in modelList" :key="index">
        <a-radio :value="item.value" :disabled="true">{{ item.text }}</a-radio>
      </template>
    </a-radio-group>
    <div
      class="button-box"
      v-for="(item, index) in modelList"
      @click="showModal({ key: 'remote', value: '控制模式', ctrlValue: item.value })"
      :key="index"
      >{{ item.text }}</div
    >
  </div>

  <div class="scene-box" style="z-index: 999">
    <div class="title-text" style="position: absolute; z-index: 9999; width: 100%; text-align: center">{{
      selectData.supplyAirAddr || selectData.strinstallpos || selectData.stationname
    }}</div>

    <div v-if="hasPermission('btn:show')" class="top-box control-group">
      <div style="width: 100%; display: flex; justify-content: center">
        <template v-for="(item, index) in modalTypeArr.centerBtnArr" :key="index">
          <div v-if="hasPermission(item.permission)" class="button-box" @click="showModal(item)">{{ item.value }}</div>
        </template>
      </div>

      <!-- <div class="button-box" v-for="(item, index) in modalTypeArr.centerBtnArr" :key="index" @click="showModal(item)">{{ item.value }}</div> -->
    </div>

    <div v-if="!faultShow" class="data-show-box">
      <div class="data-item">
        <div class="item-header">设备监测</div>
        <div class="item-container">
          <div class="tab">
            <div class="tab-item" :class="{ 'tab-item-active-r': dataMonitorRowIndex == 0 }" @click="selectDevice('dataMonitorRowIndex', 0)"
              >1#风机</div
            >
            <div class="tab-item" :class="{ 'tab-item-active-r': dataMonitorRowIndex == 1 }" @click="selectDevice('dataMonitorRowIndex', 1)"
              >2#风机</div
            >
          </div>
          <div class="container-group container-group-l">
            <template v-if="deviceType">
              <div class="container-item" v-for="(data, index) in leftColumns" :key="index">
                <div class="item-icon">
                  <SvgIcon class="icon-style" size="18" name="temperature" />
                </div>
                <div class="item-name">{{ data.title }}</div>
                <div v-if="data.dataIndex.startsWith('Fan')">
                  <div class="item-value" v-if="dataMonitorRowIndex == 0">{{
                    selectData['Fan1StartStatus'] == '0' && globalConfig?.simulatedPassword
                      ? '-'
                      : selectData[data.dataIndex.replace('Fan', 'Fan1')]
                      ? selectData[data.dataIndex.replace('Fan', 'Fan1')]
                      : '-'
                  }}</div>
                  <div class="item-value" v-if="dataMonitorRowIndex == 1">{{
                    selectData['Fan2StartStatus'] == '0' && globalConfig?.simulatedPassword
                      ? '-'
                      : selectData[data.dataIndex.replace('Fan', 'Fan2')]
                      ? selectData[data.dataIndex.replace('Fan', 'Fan2')]
                      : '-'
                  }}</div>
                </div>
                <div v-else>
                  <div class="item-value">{{ selectData[data.dataIndex] ? selectData[data.dataIndex] : '-' }}</div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
      <div class="data-item" style="margin-top: 8px">
        <div class="item-header">设备故障诊断与分析预警</div>
        <div class="item-container">
          <div class="tab">
            <div class="tab-item" :class="{ 'tab-item-active-r': warningMonitorRowIndex === 0 }" @click="selectDevice('warningMonitorRowIndex', 0)"
              >1#风机</div
            >
            <div class="tab-item" :class="{ 'tab-item-active-r': warningMonitorRowIndex === 1 }" @click="selectDevice('warningMonitorRowIndex', 1)"
              >2#风机</div
            >
          </div>
          <div class="container-group">
            <div class="warning-group">
              <template v-if="deviceType">
                <div class="warning-item" v-for="(state, index) in rightColumns" :key="index">
                  <div class="item-name"> <div class="icon"></div> {{ state.title }} </div>
                  <div v-if="state.dataIndex.startsWith('Fan')">
                    <div class="signal-item" v-if="warningMonitorRowIndex == 0">
                      <template v-if="selectData['Fan1StartStatus'] == '0' && globalConfig?.simulatedPassword">
                        <div class="signal-round signal-round-gry"></div>
                        <div class="vent-margin-l-8">无状态</div>
                      </template>
                      <template v-else>
                        <div
                          class="signal-round"
                          :class="{
                            'signal-round-run': selectData[state.dataIndex.replace('Fan', 'Fan1')] == '0',
                            'signal-round-warning':
                              selectData[state.dataIndex.replace('Fan', 'Fan1')] !== undefined &&
                              selectData[state.dataIndex.replace('Fan', 'Fan1')] == '1',
                            'signal-round-gry': selectData[state.dataIndex.replace('Fan', 'Fan1')] === undefined,
                          }"
                        ></div>
                        <div class="vent-margin-l-8">{{
                          selectData[state.dataIndex.replace('Fan', 'Fan1')] === undefined
                            ? '无状态'
                            : selectData[state.dataIndex.replace('Fan', 'Fan1')] == '0'
                            ? '正常'
                            : '异常'
                        }}</div>
                      </template>
                    </div>
                    <div class="signal-item" v-if="warningMonitorRowIndex == 1">
                      <template v-if="selectData['Fan2StartStatus'] == '0' && globalConfig?.simulatedPassword">
                        <div class="signal-round signal-round-gry"></div>
                        <div class="vent-margin-l-8">无状态</div>
                      </template>
                      <template v-else>
                        <div
                          class="signal-round"
                          :class="{
                            'signal-round-run': selectData[state.dataIndex.replace('Fan', 'Fan2')] == '0',
                            'signal-round-warning':
                              selectData[state.dataIndex.replace('Fan', 'Fan2')] != undefined &&
                              selectData[state.dataIndex.replace('Fan', 'Fan2')] == '1',
                            'signal-round-gry': selectData[state.dataIndex.replace('Fan', 'Fan2')] == undefined,
                          }"
                        ></div>
                        <div class="vent-margin-l-8">{{
                          selectData[state.dataIndex.replace('Fan', 'Fan2')] == undefined
                            ? '无状态'
                            : selectData[state.dataIndex.replace('Fan', 'Fan2')] == '0'
                            ? '正常'
                            : '异常'
                        }}</div>
                      </template>
                    </div>
                  </div>
                  <div v-else>
                    <div class="signal-item">
                      <div
                        class="signal-round vent-margin-l-8"
                        :class="{
                          'signal-round-run': selectData[state.dataIndex] == '0',
                          'signal-round-warning': selectData[state.dataIndex] !== undefined && selectData[state.dataIndex] == '1',
                          'signal-round-gry': selectData[state.dataIndex] === undefined,
                        }"
                      ></div>
                      <div class="vent-margin-l-8">{{
                        selectData[state.dataIndex] === undefined ? '无状态' : selectData[state.dataIndex] == '0' ? '正常' : '异常'
                      }}</div>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-else class="data-show-box fault-box">
      <div class="data-item">
        <div class="item-header">一级电机监测</div>
        <div class="item-container">
          <div class="tab">
            <div class="tab-item" :class="{ 'tab-item-active-r': dataMonitorRowIndex == 0 }" @click="selectDevice('dataMonitorRowIndex', 0)"
              >1#风机</div
            >
            <div class="tab-item" :class="{ 'tab-item-active-r': dataMonitorRowIndex == 1 }" @click="selectDevice('dataMonitorRowIndex', 1)"
              >2#风机</div
            >
          </div>
          <div class="container-group fault-container-group">
            <div class="electric-box">
              <div class="item" v-for="(item, index) in faultDeviceHeader" :key="index" :style="{ width: item.width }"> {{ item.title }}</div>
            </div>
            <div class="fault-group">
              <template v-if="deviceType">
                <template v-for="(faultItem, faultIndex) in faultData" :key="faultIndex">
                  <div
                    class="fault-item"
                    v-if="faultItem['valueCode'].startsWith(dataMonitorRowIndex === 0 ? 'faultEqu1_electric1' : 'faultEqu2_electric1')"
                    :class="{ 'fault-warning': faultItem['warnLevel'] == 104, 'fault-error': faultItem['warnLevel'] == 201 }"
                  >
                    <div class="item" v-for="(item, index) in faultDeviceHeader" :key="index" :style="{ width: item.width }">{{
                      faultItem[item.code]
                    }}</div>
                  </div>
                </template>
              </template>
            </div>
          </div>
        </div>
      </div>
      <div class="data-item" style="margin-top: 8px">
        <div class="item-header">二级电机监测</div>
        <div class="item-container">
          <div class="tab">
            <div class="tab-item" :class="{ 'tab-item-active-r': warningMonitorRowIndex === 0 }" @click="selectDevice('warningMonitorRowIndex', 0)"
              >1#风机</div
            >
            <div class="tab-item" :class="{ 'tab-item-active-r': warningMonitorRowIndex === 1 }" @click="selectDevice('warningMonitorRowIndex', 1)"
              >2#风机</div
            >
          </div>
          <div class="container-group fault-container-group">
            <div class="electric-box">
              <div class="item" v-for="(item, index) in faultDeviceHeader" :key="index" :style="{ width: item.width }"> {{ item.title }}</div>
            </div>
            <div class="fault-group">
              <template v-if="deviceType">
                <template v-for="(faultItem, faultIndex) in faultData" :key="faultIndex">
                  <div
                    class="fault-item"
                    v-if="faultItem['valueCode'].startsWith(warningMonitorRowIndex === 0 ? 'faultEqu1_electric2' : 'faultEqu2_electric2')"
                    :class="{ 'fault-warning': faultItem['warnLevel'] == 104, 'fault-error': faultItem['warnLevel'] == 201 }"
                  >
                    <div class="item" v-for="(item, index) in faultDeviceHeader" :key="index" :style="{ width: item.width }">{{
                      faultItem[item.code]
                    }}</div>
                  </div>
                </template>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="bottom-tabs-box" @mousedown="setDivHeight($event, 250, scroll, 0)">
      <!-- 保德视频及系统外界，保德特有 -->
      <div v-if="sysOrgCode === 'sdmtjtbdmk'" class="bd-control">
        <div class="button-box" @click="goOutLink('1')">视频查看</div>
        <div class="button-box" @click="goOutLink('2')">主风机故障智能诊断预警系统</div>
      </div>
      <dv-border-box8 :dur="5" :style="`padding: 5px; height: ${scroll.y + 128}px`">
        <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
          <a-tab-pane key="1" tab="实时监测">
            <GroupMonitorTable
              ref="MonitorDataTable"
              :dataSource="dataSource"
              columnsType="fanmain_monitor"
              @selectRow="getSelectRow"
              :scroll="{ y: scroll.y - (headElHeight - 56) }"
              :is-action="true"
            >
              <template #bodyCell="{ column, record }">
                <!-- <a-tag :color="record.netStatus == '0' ? '#f00' : 'green'">{{ record.netStatus == '1' ? '报警' : '正常' }}</a-tag> -->
              </template>
              <template #action="{ record }">
                <a
                  v-if="globalConfig?.showReport || (!globalConfig?.showReport && hasPermission('fan:kkjc'))"
                  class="table-action-link"
                  @click="deviceEdit($event, 'reportInfo', record)"
                  >报表录入</a
                >
                <a class="table-action-link" @click="deviceEdit($event, 'deviceInfo', record)">设备编辑</a>
              </template>
            </GroupMonitorTable>
          </a-tab-pane>
          <!-- <a-tab-pane key="2" tab="实时曲线图" force-render>
            <div class="tab-item" v-if="activeKey === '2'">
              <Bar :chartData="dataSource" xAxisPropType="strname" :propTypeArr="propTypeArr" height="40vh" width="100%" />
            </div>
          </a-tab-pane> -->
          <a-tab-pane key="3" tab="历史数据">
            <div class="tab-item" v-if="activeKey === '3'">
              <template v-if="globalConfig?.History_Type == 'remote'">
                <HistoryTable device-type="fanmain" designScope="fanmain-history" :scroll="scroll" />
              </template>
              <template v-else>
                <HistoryTable :device-code="deviceType" :scroll="{ y: scroll.y - 70 }" dict-code="fan_dict" />
              </template>
            </div>
          </a-tab-pane>
          <a-tab-pane key="7" v-if="hasPermission('show:deviceEcharts') && sysOrgCode != 'hnjtymhmk'" tab="监测曲线图" force-render>
            <div class="tab-item" v-if="activeKey === '7'" style="padding-bottom: 20px">
              <FanDeviceEcharts
                chartsColumnsType="fanmain_chart"
                xAxisPropType="strname"
                :dataSource="dataSource"
                height="100%"
                width="100%"
                :fan1ChartsColumns="chartsColumnsFan1"
                :fan2ChartsColumns="chartsColumnsFan2"
                :device-list-api="list.bind(null, { devicetype: 'fanmain', pagetype: 'normal' })"
                device-type="fanmain"
              />
            </div>
          </a-tab-pane>
          <a-tab-pane key="4" :tab="sysOrgCode === 'hnjtymhmk' ? '故障诊断分析' : '报警历史'">
            <div class="tab-item" v-if="activeKey === '4'">
              <AlarmHistoryTable columns-type="alarm" :device-type="deviceType" designScope="alarm-history" :scroll="scroll" />
            </div>
          </a-tab-pane>
          <a-tab-pane key="5" tab="曲线配置" v-if="hasPermission('show:fanEcharts')">
            <div v-if="activeKey == '5'" class="tab-item" style="display: flex">
              <div style="width: 50%; height: 100%">
                <div style="color: var(--vent-font-color); width: 100%; text-align: center; margin: 5px 0px">主机</div>
                <BarAndLine
                  class="echarts-line"
                  xAxisPropType="readTime"
                  :dataSource="echartsDataList"
                  height="90%"
                  width="100%"
                  :chartsColumns="chartsColumnsFan1"
                  :option="echatsOption"
                  chartsType="detail"
                />
              </div>
              <div style="width: 50%; height: 100%">
                <div style="color: var(--vent-font-color); width: 100%; text-align: center; margin: 5px 0px">备机</div>
                <BarAndLine
                  class="echarts-line"
                  xAxisPropType="readTime"
                  :dataSource="echartsDataList"
                  height="90%"
                  width="100%"
                  :chartsColumns="chartsColumnsFan2"
                  :option="echatsOption"
                  chartsType="detail"
                />
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="6" tab="操作历史" v-if="hasPermission('show:handlerHistory')">
            <div v-if="activeKey == '6' && deviceType" class="tab-item">
              <HandlerHistoryTable
                columns-type="operator_history"
                :device-type="deviceType"
                :device-list-api="baseList.bind(null, { devicekind: deviceType })"
                designScope="alarm-history"
                :scroll="scroll"
              />
            </div>
          </a-tab-pane>
          <!-- <a-tab-pane v-if="sysOrgCode === 'hnjtymhmk'" key="8" tab="故障诊断分析">
            <div v-if="activeKey == '8'" class="tab-item">
              <a-table :dataSource="rightColumns" :columns="Warncolumns" :scroll="{ y: 150 }">
                <template #faultType="{ record }">
                  {{ record.state.title }}
                </template>
              </a-table>
            </div>
          </a-tab-pane> -->
        </a-tabs>
      </dv-border-box8>
    </div>
  </div>
  <div style="z-index: -1; position: absolute; top: -100px; right: 10px; width: 300px; height: 280px; margin: auto" class="palyer">
    <LivePlayer id="main-player1" ref="player1" :videoUrl="flvURL1()" muted loop loading controls />
  </div>
  <div
    v-show="showPlay"
    ref="playerRef"
    style="z-index: 999; position: absolute; right: 15px; width: 100%; height: 100%; margin: auto; pointer-events: none"
    :style="{ top: hasPermission('btn:show') ? '155px' : '100px' }"
  >
  </div>
  <a-modal
    v-model:visible="modalIsShow"
    :centered="true"
    :maskClosable="false"
    :title="modalTitle"
    @ok="handleOk"
    @cancel="handleCancel"
    :destroyOnClose="true"
  >
    <template #footer v-if="modalType == 'fbm'">
      <a-button key="back" @click="handleCancel">取消</a-button>
    </template>
    <div class="modal-container">
      <div class="vent-flex-row">
        <ExclamationCircleFilled style="color: #ffb700; font-size: 30px" />
        <div class="warning-text">您是否要进行{{ modalTitle }}操作？</div>
      </div>
      <div class="vent-flex-row input-box" v-if="!globalConfig?.simulatedPassword">
        <div class="label">操作密码：</div>
        <a-input size="small" type="password" v-model:value="passWord" />
      </div>
      <!-- 调频 -->
      <div class="vent-flex-row input-box" v-if="modalType == 'frequency'">
        <div class="label">运行频率（Hz）：</div>
        <a-input-number v-model:value="frequencyVal" :min="0" :max="50" :step="0.1" />
      </div>
      <!-- 启动或停止 -->
      <div class="" v-if="modalType == 'startSmoke'">
        <div class="startSmoke-select">
          <div class="label">1#风机：</div>
          <a-radio-group v-model:value="mainWindIsShow1" @change="changeMotor" name="mainWind1">
            <a-radio value="open">开启</a-radio>
            <a-radio value="stop">停止</a-radio>
          </a-radio-group>
        </div>
        <div class="startSmoke-select">
          <div class="label">2#风机：</div>
          <a-radio-group v-model:value="mainWindIsShow2" @change="changeMotor" name="mainWind2">
            <a-radio value="open">开启</a-radio>
            <a-radio value="stop">停止</a-radio>
          </a-radio-group>
        </div>
      </div>
      <div class="" v-if="modalType == 'startFan' && hasPermission('fan:startAndResetFan')">
        <!-- 不互斥控制 -->
        <div class="startSmoke-select">
          <div class="label">主机：</div>
          <div :class="{ 'button-box': true, 'button-disable': false }" @click="handleOk('Fan1Open')">开启</div>
          <div :class="{ 'button-box': true, 'button-disable': false }" @click="handleOk('Fan1Stop')">停止</div>
          <div :class="{ 'button-box': true, 'button-disable': false }" @click="handleOk('Fan1Reset')">复位</div>
        </div>
        <div class="startSmoke-select">
          <div class="label">备机：</div>
          <div :class="{ 'button-box': true, 'button-disable': false }" @click="handleOk('Fan2Open')">开启</div>
          <div :class="{ 'button-box': true, 'button-disable': false }" @click="handleOk('Fan2Stop')">停止</div>
          <div :class="{ 'button-box': true, 'button-disable': false }" @click="handleOk('Fan2Reset')">复位</div>
        </div>
      </div>
      <div class="" v-if="modalType == 'startFan' && hasPermission('fan:startFan')">
        <!-- 不互斥控制 -->
        <div class="startSmoke-select">
          <div class="label">主机：</div>
          <div :class="{ 'button-box': true, 'button-disable': false }" @click="handleOk('Fan1Open')">开启</div>
          <div :class="{ 'button-box': true, 'button-disable': false }" @click="handleOk('Fan1Stop')">停止</div>
        </div>
        <div class="startSmoke-select">
          <div class="label">备机：</div>
          <div :class="{ 'button-box': true, 'button-disable': false }" @click="handleOk('Fan2Open')">开启</div>
          <div :class="{ 'button-box': true, 'button-disable': false }" @click="handleOk('Fan2Stop')">停止</div>
        </div>
      </div>
      <!-- 防爆门控制 -->
      <!-- <div class="" v-if="modalType == 'fbm'">
        <div class="vent-margin-t-20">
          <span class="data-title vent-margin-r-8">反风锁紧状态：</span>
          <template
            v-if="selectData['Lock1Open'] == 1 && selectData['Lock1Close'] == 0 && selectData['Lock2Open'] == 1 && selectData['Lock2Close'] == 0"
          >
            <span class="data-title vent-margin-l-10"><span class="signal-round signal-round-blue vent-margin-r-8"></span>锁1开到位</span>
            <span class="data-title vent-margin-l-20"><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['  '] == 1"
          >
            <span class="data-title vent-margin-l-10"><span class="signal-round signal-round-gry vent-margin-r-8"></span>锁1关到位</span>
            <span class="data-title vent-margin-l-20"><span class="signal-round signal-round-gry vent-margin-r-8"></span>锁2关到位</span>
          </template>
          <template v-else>
            <span class="data-title vent-margin-l-10"><span class="signal-round signal-round-gry vent-margin-r-8"></span>锁1-</span>
            <span class="data-title vent-margin-l-20"><span class="signal-round signal-round-gry vent-margin-r-8"></span>锁2-</span>
          </template>
        </div>
        <div class="vent-flex-row btn-box vent-margin-t-20">
          <span class="data-title vent-margin-r-8">反风锁紧控制：</span>
          <div v-if="fbmControlData.CtrlLockOpen !== undefined">
            <span class="btn btn1" @click="handleOk('openLock')">开锁</span>
            <span class="btn btn2" @click="handleOk('closeLock')">关锁</span>
          </div>
          <div v-else class="vent-margin-l-10"
            ><span class="signal-round signal-round-warning vent-margin-r-8"></span>反风锁紧正在运行 或 数据异常</div
          >
        </div>
        <div class="vent-flex-row btn-box vent-margin-t-20">
          <span class="data-title vent-margin-r-8">防爆门扇控制：</span>
          <div v-if="fbmControlData.CtrlExplosionVentOpen !== undefined">
            <span class="btn btn1" @click="handleOk('openGate')">开门</span>
            <span class="btn btn2" @click="handleOk('closeGate')">关门</span>
          </div>
          <div class="vent-margin-l-10" v-else><span class="signal-round signal-round-warning vent-margin-r-8"></span>防爆门正在运行 或 数据异常</div>
        </div>
      </div> -->
      <div class="" v-if="modalType == 'fbm'">
        <div class="vent-flex-row btn-box vent-margin-t-20">
          <span class="data-title vent-margin-r-8">反风锁紧控制：</span>
          <div>
            <span class="btn btn1" @click="handleOk('openLock')">锁1开</span>
            <span class="btn btn2" @click="handleOk('closeLock')">锁1关</span>
          </div>
          <div>
            <span class="btn btn1" @click="handleOk('openLock')">锁2开</span>
            <span class="btn btn2" @click="handleOk('closeLock')">锁2关</span>
          </div>
          <!-- <div v-else class="vent-margin-l-10"
            ><span class="signal-round signal-round-warning vent-margin-r-8"></span>反风锁紧正在运行 或 数据异常</div
          > -->
        </div>
      </div>
    </div>
  </a-modal>
  <!-- 保德在线监测和故障诊断 -->
  <div v-if="sysOrgCode === 'sdmtjtbdmk' && faultData.length > 0" class="monitor-tab" @click="showFault">
    <div class="item" :class="{ 'item-active': !faultShow }">风机监测</div>
    <div class="item" :class="{ 'item-active': faultShow }">在线故障诊断监测</div>
  </div>

  <!-- 摄像头显示隐藏图标 -->
  <VideoCameraOutlined class="video-icon" :class="{ 'no-play': !showPlay }" @click="changePlay" />
  <!-- 工况辅助决策 -->
  <ConditionAssistance @register="registerModal" :deviceType="deviceType" :selectData="currentData" />
  <DeviceBaseInfo @register="registerModalDeviceEdit" :device-type="selectData['deviceType']" />
</template>

<script setup lang="ts">
import { ExclamationCircleFilled, VideoCameraOutlined } from '@ant-design/icons-vue';
import FanDeviceEcharts from '../comment/FanDeviceEcharts.vue';
import BarAndLine from '../../../../components/chart/BarAndLine.vue';
import FanEchrats from '/@/views/vent/monitorManager/mainFanMonitor/fanEchrats.vue';
import { onBeforeMount, unref, ref, onMounted, inject, onUnmounted, reactive, toRaw, watch, nextTick, defineAsyncComponent } from 'vue';
import GroupMonitorTable from '../comment/GroupMonitorTable.vue';
// // import HistoryTable from '../comment/HistoryTable.vue';
// import HistoryTable from '../../../vent/comment/history/HistoryTable.vue';
import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
import { modalTypeArr, fbmControlData, faultDeviceHeader, PointMonitorType } from './main.data';
import { deviceControlApi } from '/@/api/vent/index';
import { mountedThree, destroy, addText, setModelType, playAnimate, resetEcharts } from './main.threejs';
import LivePlayer from '@liveqing/liveplayer-v3';
import { SvgIcon } from '/@/components/Icon';
import { list, pointMonitor } from './main.api';
import { list as baseList } from '../../deviceManager/fanTabel/fan.api';
import { getTableList } from '/@/views/vent/monitorManager/fanLocalMonitor/fanLocal.api';
import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
import { setDivHeight } from '/@/utils/event';
import { useMessage } from '/@/hooks/web/useMessage';
import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
import { useRouter } from 'vue-router';
import ConditionAssistance from './components/conditionAssistance.vue';
import { useModal } from '/@/components/Modal';
import type { BasicColumn } from '/@/components/Table/src/types/table';
import { useCamera } from '/@/hooks/system/useCamera';
import DeviceBaseInfo from '../comment/components/DeviceBaseInfo.vue';
import { useGlobSetting } from '/@/hooks/setting';
import { usePermission } from '/@/hooks/web/usePermission';
import { cloneDeep } from 'lodash-es';
import { getDictItems } from '/@/api/common/api';

const globalConfig = inject('globalConfig');
const HistoryTable =
  globalConfig.History_Type == 'remote'
    ? defineAsyncComponent(() => import('../comment/HistoryTable.vue'))
    : defineAsyncComponent(() => import('../../../vent/comment/history/HistoryTable.vue'));
// const HistoryTable = defineAsyncComponent(() => import('../comment/HistoryTable.vue'))
const { hasPermission } = usePermission();

const [registerModal, { openModal, closeModal }] = useModal();
const [registerModalDeviceEdit, { openModal: openModalDeviceEdit }] = useModal();
const { currentRoute } = useRouter();
const { createMessage, createConfirm } = useMessage();
const { sysOrgCode } = useGlobSetting();
// const sysOrgCode = 'sdmtjtbdmk';
const scroll = reactive({
  y: 180,
});
const modelList = ref<{ text: string; value: string }[]>([]);
let modeValue: null | string | number = null;
const playerRef = ref();
const isSimulation = true; // 是否模拟状态
const MonitorDataTable = ref();
const showPlay = ref(hasPermission('mainFan:showCamera') ? true : false);
const player1 = ref(null);
const player2 = ref(null);
const activeKey = ref('1');
const loading = ref(false);
const modalIsShow = ref<boolean>(false); // 是否显示模态框
const modalTitle = ref(''); // 模态框标题显示内容，根据设备操作类型决定
const modalType = ref(''); // 模态框内容显示类型，设备操作类型
const frequencyVal = ref(40); //频率
const mainWindIsShow1 = ref('stop'); // 1#风机默认启动
const mainWindIsShow2 = ref('stop'); // 2#风机默认不启动
const frontMonitorIsShow = ref(false); // 存放1#风机临时状态，保存模态框取消时，还需要返回之前的值
const backMonitorIsShow = ref(false); // 存放2#风机临时状态，保存模态框取消时，还需要返回之前的值
const passWord = ref('');
// 默认初始是第一行 (默认n%2==0时是主机，n%2==1时是备机)
const selectRowIndex = ref(-1);
// 默认数据左边监测的是1#风机
const dataMonitorRowIndex = ref(0);
// 默认数据右边监测的是1#风机
const warningMonitorRowIndex = ref(0);
const faultData = ref<PointMonitorType[]>([]); // 存放故障点位监测数据（查的点表）
const explosionDoorData = ref<PointMonitorType[]>([]); // 存放防爆门点位监测数据（查的点表）
const faultShow = ref(false);

let headElHeight = ref(0);
const Warncolumns = ref([
  {
    title: '序号',
    align: 'center',
    key: 'index',
    customRender: ({ index }) => {
      return index + 1;
    },
  },
  {
    title: '名称',
    align: 'center',
    customRender: () => '羊马河主通风机',
  },
  {
    title: '故障类型',
    align: 'center',
    customRender: ({ record }) => {
      const activeFaults = record.title;
      return activeFaults;
    },
  },
  {
    title: '故障状态',
    align: 'center',
    key: 'faultStatus',
    customRender: () => '正常',
  },
  {
    title: '故障原因',
    align: 'center',
    key: 'faultReason',
    customRender: () => '暂无', // 固定默认值
  },
  {
    title: '通信状态',
    align: 'center',
    key: 'netStatus',
    customRender: () => {
      const netStatus = '连接'; // 固定默认值
      return netStatus;
    },
  },
  {
    title: '时间',
    align: 'center',
    key: 'readTime',
    customRender: () => {
      const now = new Date();
      return now.toLocaleString(); // 格式化为本地时间字符串
    },
  },
]);
// 监测数据
const selectData = reactive({
  deviceID: '',
  Fan1Negative: '-', // 静压
  Fan2Negative: '-', // 静压
  DataPa: '-', //全压
  Fan1m3: '-', //电机流量
  Fan2m3: '-', //电机流量
  deviceType: '',
  Fan2FanPre: '-',
  Fan1FanPre: '-',
  otherInfo: '',
  autoRoManual: null,
});
const currentData = ref({});

const deviceType = ref(selectData.deviceType);
const rightColumns = ref<BasicColumn[]>([]);
const leftColumns = ref<BasicColumn[]>([]);

const echartsDataList = ref<any[]>([]);

const remoteChartsColumns = getTableHeaderColumns('fanmain_chart');
const chartsColumns = remoteChartsColumns && remoteChartsColumns.length > 0 ? remoteChartsColumns : [];
let chartsColumnsFan1 = [],
  chartsColumnsFan2 = [];

// 这里需要处理主备
if (chartsColumns.length > 0) {
  for (let i = 0; i < chartsColumns.length; i++) {
    let itemColumn = chartsColumns[i];
    let dataIndexFan1, dataIndexFan2;

    if (itemColumn['dataIndex']) {
      const dataIndex = itemColumn['dataIndex'] as string;

      dataIndexFan1 = dataIndex.startsWith('Fan') ? dataIndex.replace('Fan', 'Fan1') : dataIndex.replace('fan', 'fan1');
      dataIndexFan2 = dataIndex.startsWith('Fan') ? dataIndex.replace('Fan', 'Fan2') : dataIndex.replace('fan', 'fan2');
      chartsColumnsFan1.push({ ...itemColumn, dataIndex: dataIndexFan1, legend: '主机' + itemColumn['legend'] });
      chartsColumnsFan2.push({ ...itemColumn, dataIndex: dataIndexFan2, legend: '备机' + itemColumn['legend'] });
    }
  }
}
const echatsOption = {
  legend: {
    top: 8,
  },
  grid: {
    top: '13%',
    left: '20',
    right: '25',
    bottom: '10%',
    containLabel: true,
  },
  toolbox: {
    feature: {
      saveAsImage: {
        show: false,
      },
    },
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      margin: 10,
      color: '#f1f1f199',
    },
    name: '',
  },
  yAxis: {
    axisLabel: {
      color: '#0071A5',
    },
  },
};

watch(deviceType, (type) => {
  rightColumns.value = getTableHeaderColumns(type + '_monitor_right') as [];
  console.log('rightColumns', rightColumns.value);

  if (rightColumns.value && rightColumns.value.length < 1) {
    rightColumns.value = getTableHeaderColumns(type.split('_')[0] + '_monitor_right') as [];
  }
  leftColumns.value = getTableHeaderColumns(type + '_monitor_left') as [];
  if (leftColumns.value && leftColumns.value.length < 1) {
    leftColumns.value = getTableHeaderColumns(type.split('_')[0] + '_monitor_left') as [];
  }
});

const flvURL1 = () => {
  // return `https://muiplayer.js.org/media/media.m3u8`;
  return `/video/mainWind.mp4`;
};
const flvURL2 = () => {
  return `/video/mainWind.mp4`;
  // return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
};

const dataSource = ref([]);

const propTypeArr = new Map([
  ['incipientWindSpeed1', 'V1风速'],
  ['incipientWindSpeed2', 'V2风速'],
  ['incipientWindSpeed3', 'V3风速'],
  ['sourcePressure', '气源压力'],
]);

const { getCamera, removeCamera } = useCamera();

const showFault = () => {
  faultShow.value = !faultShow.value;
};
const tabChange = (activeKeyVal) => {
  activeKey.value = activeKeyVal;
  // MonitorDataTable.value.setSelectedRowKeys(selectData.deviceID);
};

// 设备数据
const controlType = ref(1);

const getDataSource = async () => {
  const res = await list({ devicetype: 'fanmain', pagetype: 'normal' });
  const dataArr = res.msgTxt[0].datalist || [];
  dataSource.value = [];

  dataArr.forEach((data) => {
    const readData = data.readData;
    data = Object.assign(data, readData);
    dataSource.value.push(data);
  });
  const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
  Object.assign(selectData, data);
  currentData.value = data;
  // 存放echarts数据
  if (data && data['readTime']) {
    const dataList = cloneDeep(echartsDataList.value);
    if (dataList.length == 0 || dataList[dataList.length - 1]['readTime'] !== data['readTime']) {
      if (dataList.length < 15) {
        dataList.push({ ...data });
      } else {
        dataList.shift();
        dataList.push({ ...data });
      }
      echartsDataList.value = dataList;
    }
  }
  await getPointData();
  return selectData;
};

const getPointData = async () => {
  const otherInfo = selectData.otherInfo;
  let faultDevice, doorDevice;
  if (otherInfo) {
    const linkDevices: { deviceType: string; deviceId: string }[] = JSON.parse(otherInfo);
    if (linkDevices instanceof Array) {
      linkDevices.filter((item) => {
        if (item.deviceType == 'faultEqu') {
          faultDevice = item;
        } else if (item.deviceType == 'antiwindLock') {
          // 反风锁井
          doorDevice = item;
        }
      });
      // const result = await pointMonitor({ ids: '1657545388451663006' });
      // faultData.value = result['valueList'] || [];
      if (faultDevice) {
        const result = await pointMonitor({ ids: faultDevice.deviceId });
        faultData.value = result['valueList'] || [];
      }
      if (doorDevice) {
        const result = await pointMonitor({ ids: doorDevice.deviceId });
        explosionDoorData.value = result['valueList'] || [];
      }
    } else {
      // 这里处理绑定单设备id
    }
  }
};

// https获取监测数据
let timer: null | NodeJS.Timeout = null;
const getMonitor = (flag?) => {
  if (Object.prototype.toString.call(timer) === '[object Null]') {
    timer = setTimeout(
      async () => {
        await getDataSource();
        if (dataSource.value.length > 0 && selectRowIndex.value == -1) {
          // 初始打开页面
          if (currentRoute.value && currentRoute.value['query'] && currentRoute.value['query']['id']) {
            MonitorDataTable.value.setSelectedRowKeys(currentRoute.value['query']['id']);
          } else {
            MonitorDataTable.value.setSelectedRowKeys(dataSource.value[0]['deviceID']);
          }
        }

        if (selectData['Fan1StartStatus'] == 1 && selectData['Fan2StartStatus'] == 0) {
          frontMonitorIsShow.value = true;
          backMonitorIsShow.value = false;
        } else if (selectData['Fan2StartStatus'] == 1 && selectData['Fan1StartStatus'] == 0) {
          backMonitorIsShow.value = true;
          frontMonitorIsShow.value = false;
        }

        if (dataSource.value.length > 0 && dataSource.value[selectRowIndex.value]) {
          deviceType.value = dataSource.value[selectRowIndex.value]['deviceType'];
          if (dataSource.value.length > 0 && dataSource.value[selectRowIndex.value]) {
            Object.assign(selectData, dataSource.value[selectRowIndex.value]);
          }
          addText();
          playAnimate(selectData);
        }

        if (timer) {
          timer = null;
        }
        getMonitor();
      },
      flag ? 0 : 1000
    );
  }
};

const deviceBaseList = ref([]);
const getDeviceBaseList = () => {
  getTableList({ pageSize: 1000 }).then((res) => {
    deviceBaseList.value = res.records;
  });
};
// 切换检测数据
const getSelectRow = async (id) => {
  removeCamera();
  if (!id) return;
  loading.value = true;
  const baseDataIndex: any = dataSource.value.findIndex((baseData: any) => baseData.deviceID === id);
  selectRowIndex.value = baseDataIndex;

  for (const key in selectData) {
    selectData[key] = '';
  }
  nextTick(async () => {
    loading.value = false;
    if (!headElHeight.value) {
      const headEl = document.querySelector(`.zxm-table-thead`);
      if (headEl) {
        headElHeight.value = headEl.clientHeight;
      }
    }
    const data = dataSource.value[selectRowIndex.value];
    if (data['Fan1StartStatus'] == 1) {
      selectDevice('warningMonitorRowIndex', 0);
      selectDevice('dataMonitorRowIndex', 0);
    } else if (data['Fan2StartStatus'] == 1) {
      selectDevice('warningMonitorRowIndex', 1);
      selectDevice('dataMonitorRowIndex', 1);
    }
    Object.assign(selectData, data);
    const type = selectData['modalTyoe'] === 'xiejing' ? 'mainXjWindRect' : selectData['modalTyoe'] === 'lijing1' ? 'mainLjWindRect' : 'mainWindRect'; //mainWindRect

    await setModelType(type);
  });
  await getCamera(id, playerRef.value);
  return;
};

const start = (paramcode, value?, isTest?) => {
  return new Promise((reolve, reject) => {
    let data;
    if (isTest) {
      data = {
        deviceid: selectData.deviceID,
        devicetype: selectData.deviceType,
        paramcode: paramcode,
        password: passWord.value || globalConfig?.simulatedPassword,
        testvalue: value,
      };
    } else {
      data = {
        deviceid: selectData.deviceID,
        devicetype: selectData.deviceType,
        paramcode: paramcode,
        password: passWord.value || globalConfig?.simulatedPassword,
        value: value,
      };
    }
    deviceControlApi(data)
      .then((res) => {
        if (res.success) {
          reolve(res);
        } else {
          reject(res);
        }
      })
      .catch(() => {
        reject(res);
      });
  });
};

// 切换左右两边1#、2#风机的监测数据
const selectDevice = (key, val) => {
  if (key === 'dataMonitorRowIndex') {
    dataMonitorRowIndex.value = val;
  } else {
    warningMonitorRowIndex.value = val;
  }
};

const changePlay = () => {
  showPlay.value = !showPlay.value;
};
// 打开并设置modal的标题
const showModal = (obj) => {
  // 神东要求主扇的控制功能改回跳转至生产管控平台
  if (obj.key != 'kkjc' && VENT_PARAM['productionCrlPlatformUrl']) {
    window.open(VENT_PARAM['productionCrlPlatformUrl'], '_blank');
    return;
  }

  if (obj.key == 'kkjc') {
    // 工况辅助决策
    openModal(true, {});
    return;
  }
  modalType.value = obj.key;
  modalTitle.value = obj.value;
  modalIsShow.value = true;
  if (modalType.value == 'startSmoke') {
    if (selectData['Fan1StartStatus'] == 1 && selectData['Fan2StartStatus'] == 0) {
      mainWindIsShow1.value = 'open';
      mainWindIsShow2.value = 'stop';
      frontMonitorIsShow.value = true;
      backMonitorIsShow.value = false;
    } else if (selectData['Fan2StartStatus'] == 1 && selectData['Fan1StartStatus'] == 0) {
      mainWindIsShow2.value = 'open';
      mainWindIsShow1.value = 'stop';
      backMonitorIsShow.value = true;
      frontMonitorIsShow.value = false;
    }
  } else if (modalType.value == 'frequency') {
    if (selectData['Fan1StartStatus'] == 1 && selectData['Fan2StartStatus'] == 0) {
      frequencyVal.value = selectData['Fan1FreqHz'];
    }
    if (selectData['Fan2StartStatus'] == 1 && selectData['Fan1StartStatus'] == 0) {
      frequencyVal.value = selectData['Fan2FreqHz'];
    }
  } else if (modalType.value == 'remote') {
    // 控制模式
    if (obj['ctrlValue']) {
      modeValue = obj['ctrlValue'];
    }
  }
};

const changeMotor = (e) => {
  const target = e.target;
  if (target.name === 'mainWind1') {
    if (target.value === 'open') {
      mainWindIsShow2.value = 'stop';
    }
  } else if (target.name === 'mainWind2') {
    if (target.value === 'open') {
      mainWindIsShow1.value = 'stop';
    }
  }
};

const handleOk = (flag?) => {
  if (passWord.value == '') {
    createMessage.warning('请输入密码！');
    return;
  }
  createConfirm({
    iconType: 'warning',
    title: '控制',
    content: '您确定要控制吗？',
    onOk: () => handerFn(flag),
  });

  const handerFn = (flag?) => {
    if (modalType.value == 'startSmoke') {
      if (
        selectData['Fan1StartStatus'] == 1 &&
        selectData['Fan2StartStatus'] == 0 &&
        (selectData['Fan2OneStartCon'] === undefined || (selectData['Fan2OneStartCon'] !== undefined && selectData['Fan2OneStartCon'] == 1))
      ) {
        start('CtrlFan2Start')
          .then(() => {
            frontMonitorIsShow.value = false;
            backMonitorIsShow.value = true;
          })
          .catch((err) => {
            createMessage.error(err.message);
          });
      } else if (
        selectData['Fan1StartStatus'] == 0 &&
        selectData['Fan2StartStatus'] == 1 &&
        (selectData['Fan1OneStartCon'] === undefined || (selectData['Fan1OneStartCon'] !== undefined && selectData['Fan1OneStartCon'] == 1))
      ) {
        start('CtrlFan1Start')
          .then(() => {
            frontMonitorIsShow.value = true;
            backMonitorIsShow.value = false;
          })
          .catch((err) => {
            createMessage.error(err.message);
          });
      } else if (mainWindIsShow1.value === 'stop' && mainWindIsShow2.value === 'stop') {
        frontMonitorIsShow.value = false;
        backMonitorIsShow.value = false;
      }
    } else if (modalType.value == 'changeDirection') {
      // 红柳林矿一键反风操作是倒机+反风，如主机运行，一件反风后，备机启动并风向与原来相反
      // 先判断启动风机的风流方向
      if (selectData['Fan1Reversal'] !== undefined) {
        if (selectData['Fan1StartStatus'] == 1 && selectData['Fan2StartStatus'] == 0) {
          //1号风机机正在运行
          // 判断2号风机是否具备反风条件
          if (selectData['Fan2OneFfCon'] == 1) {
            // 2号风机下发反风指令
            start('CtrlFan2Reverse').catch((err) => {
              createMessage.error(err.message);
            });
          } else {
            createMessage.error('2号风机不具备一键反风条件！');
          }
        } else if (selectData['Fan2StartStatus'] == 1 && selectData['Fan1StartStatus'] == 0) {
          // 备机正在运行
          if (selectData['Fan1OneFfCon'] == 1) {
            // 备风机反转，主机即将正转启动
            start('CtrlFan1Reverse')
              .then(() => {
                frontMonitorIsShow.value = true;
                backMonitorIsShow.value = false;
              })
              .catch((err) => {
                createMessage.error(err.message);
              });
          } else {
            createMessage.error('1号风机不具备一键反风条件！');
          }
        }
      } else {
        if (selectData['Fan1StartStatus'] == 1 && selectData['Fan2StartStatus'] == 0) {
          // 主机一键反风
          if (isSimulation) {
            const fan1Forward = selectData['Fan1FreqForwardRun'] == 1 ? 0 : 1;
            const fan1Reverse = fan1Forward == 0 ? 1 : 0;
            // 模拟
            start('CtrlFan1Reverse', { Fan1FreqForwardRun: fan1Forward, Fan1FreqReverseRun: fan1Reverse }, true).catch((err) => {
              createMessage.error(err.message);
            });
          } else {
            // 实际
            start('CtrlFan1Reverse').catch((err) => {
              createMessage.error(err.message);
            });
          }
        } else if (selectData['Fan2StartStatus'] == 1 && selectData['Fan1StartStatus'] == 0) {
          if (isSimulation) {
            const fan2Forward = selectData['Fan2FreqForwardRun'] == 1 ? 0 : 1;
            const fan2Reverse = fan2Forward == 0 ? 1 : 0;
            // 模拟
            start('CtrlFan2Reverse', { Fan2FreqForwardRun: fan2Forward, Fan2FreqReverseRun: fan2Reverse }, true).catch((err) => {
              createMessage.error(err.message);
            });
          } else {
            // 实际
            start('CtrlFan2Reverse').catch((err) => {
              createMessage.error(err.message);
            });
          }
        }
      }
    } else if (modalType.value == 'changeSmoke') {
      //182模拟
      // 红柳林实际在倒机时有倒机条件，只有倒机条件具备时才可以倒机
      // 不听风倒机
      if (selectData['Fan1OneDjCon'] === undefined && selectData['Fan2OneDjCon'] === undefined) {
        if (selectData['Fan1StartStatus'] == 1 && selectData['Fan2StartStatus'] == 0) {
          // 由主到备
          // 正启动
          if (selectData['Fan1FreqForwardRun'] && selectData['Fan1FreqForwardRun'] == 1) {
            console.log('一键1倒2正启动控制  ');
            start('CtrlFan1ToFan2Forward')
              .then(() => {
                frontMonitorIsShow.value = false;
                backMonitorIsShow.value = true;
              })
              .catch((err) => {
                createMessage.error(err.message);
              });
          }
          // 反启动
          if (selectData['Fan1FreqReverseRun'] && selectData['Fan1FreqReverseRun'] == 1) {
            console.log('一键1倒2反启动控制');
            start('CtrlFan1ToFan2Reverse')
              .then(() => {
                frontMonitorIsShow.value = false;
                backMonitorIsShow.value = true;
              })
              .catch((err) => {
                createMessage.error(err.message);
              });
          }
        } else if (selectData['Fan2StartStatus'] == 1 && selectData['Fan1StartStatus'] == 0) {
          // 由备到主
          // 正启动
          if (selectData['Fan2FreqForwardRun'] && selectData['Fan2FreqForwardRun'] == 1) {
            console.log('一键2倒1正启动控制');
            start('CtrlFan2ToFan1Forward')
              .then(() => {
                frontMonitorIsShow.value = true;
                backMonitorIsShow.value = false;
              })
              .catch((err) => {
                createMessage.error(err.message);
              });
          }
          // 反启动
          if (selectData['Fan2FreqReverseRun'] && selectData['Fan2FreqReverseRun'] == 1) {
            console.log('一键2倒1反启动控制');
            start('CtrlFan2ToFan1Reverse')
              .then(() => {
                frontMonitorIsShow.value = true;
                backMonitorIsShow.value = false;
              })
              .catch((err) => {
                createMessage.error(err.message);
              });
          }
        }
      } else {
        // 红柳林倒机
        if (selectData['Fan1StartStatus'] == 1 && selectData['Fan2StartStatus'] == 0) {
          if (selectData['Fan1OneDjCon'] == 1) {
            start('CtrlFan1ToFan2')
              .then(() => {
                if (globalConfig.History_Type == 'remote') {
                  createMessage.success('指令已下发至生产管控平台成功！');
                } else {
                  createMessage.success('指令已下发成功！');
                }
              })
              .catch((err) => {
                createMessage.error(err.message);
              });
          } else {
            createMessage.error('1号风机不具备倒机条件！');
          }
        } else if (selectData['Fan1StartStatus'] == 0 && selectData['Fan2StartStatus'] == 1) {
          if (selectData['Fan2OneDjCon'] == 1) {
            start('CtrlFan2ToFan1')
              .then(() => {
                if (globalConfig.History_Type == 'remote') {
                  createMessage.success('指令已下发至生产管控平台成功！');
                } else {
                  createMessage.success('指令已下发成功！');
                }
              })
              .catch((err) => {
                createMessage.error(err.message);
              });
          } else {
            createMessage.error('1号风机不具备倒机条件！');
          }
        }
      }
    } else if (modalType.value == 'changeSmoke1') {
      // 矿上实际
      if (selectData['Fan1StartStatus'] == 1 && selectData['Fan2StartStatus'] == 0) {
        // 由主到备
        // 正启动
        if (selectData['Fan1FreqForwardRun'] && selectData['Fan1FreqForwardRun'] == 1) {
          console.log('一键1倒2正启动控制  ');
          start('CtrlFan1ToFan2')
            .then(() => {
              frontMonitorIsShow.value = false;
              backMonitorIsShow.value = true;
            })
            .catch((err) => {
              createMessage.error(err.message);
            });
        }
        // 反启动
        if (selectData['Fan1FreqReverseRun'] && selectData['Fan1FreqReverseRun'] == 1) {
          console.log('一键1倒2反启动控制');
          start('CtrlFan1ToFan2')
            .then(() => {
              frontMonitorIsShow.value = false;
              backMonitorIsShow.value = true;
            })
            .catch((err) => {
              createMessage.error(err.message);
            });
        }
      } else if (selectData['Fan2StartStatus'] == 1 && selectData['Fan1StartStatus'] == 0) {
        // 由备到主
        // 正启动
        if (selectData['Fan2FreqForwardRun'] && selectData['Fan2FreqForwardRun'] == 1) {
          console.log('一键2倒1正启动控制');
          start('CtrlFan2ToFan1')
            .then(() => {
              frontMonitorIsShow.value = true;
              backMonitorIsShow.value = false;
            })
            .catch((err) => {
              createMessage.error(err.message);
            });
        }
        // 反启动
        if (selectData['Fan2FreqReverseRun'] && selectData['Fan2FreqReverseRun'] == 1) {
          console.log('一键2倒1反启动控制');
          start('CtrlFan2ToFan1')
            .then(() => {
              frontMonitorIsShow.value = true;
              backMonitorIsShow.value = false;
            })
            .catch((err) => {
              createMessage.error(err.message);
            });
        }
      }
    } else if (modalType.value == 'frequency') {
      if (selectData['Fan1StartStatus'] == 1 && selectData['Fan2StartStatus'] == 0) {
        start('CtrlFan1FreqSet', frequencyVal.value).catch((err) => {
          createMessage.error(err.message);
        });
      } else if (selectData['Fan2StartStatus'] == 1 && selectData['Fan1StartStatus'] == 0) {
        start('CtrlFan2FreqSet', frequencyVal.value).catch((err) => {
          createMessage.error(err.message);
        });
      }
    } else if (modalType.value == 'fbm') {
      // 门扇处于打开状态时，反风锁紧装置无法操作
      if (selectData['ExplosionVentOpen'] == 1 && (flag === 'openLock' || flag === 'closeLock')) {
        createMessage.warning('门扇处于打开状态时，反风锁紧装置无法操作');
        return;
      }
      // 当反风装置关锁时，无法控制门体打开或关闭
      if ((selectData['Lock1Close'] == 1 || selectData['Lock2Close'] == 1) && (flag === 'openGate' || flag === 'closeGate')) {
        createMessage.warning('当反风装置关锁时，无法控制门体打开或关闭');
        return;
      }
      // 开锁 // 关锁
      if (flag === 'openLock') {
        start('CtrlLockOpen').then(() => {
          createMessage.success('开锁成功');
        });
      } else if (flag === 'closeLock') {
        start('CtrlLockClose').then(() => {
          createMessage.success('关锁成功');
        });
      }
      // 开门  关门
      if (flag === 'openGate') {
        start('CtrlExplosionVentOpen').then(() => {
          createMessage.success('开门成功');
        });
      } else if (flag === 'closeGate') {
        start('CtrlExplosionVentClose').then(() => {
          createMessage.success('关门成功');
        });
      }
    } else if (modalType.value === 'startFan') {
      let paramcode = '';
      if (flag === 'Fan1Open') {
        if (selectData['Fan1OneStartCon'] === undefined) {
          paramcode = 'CtrlFan1Start';
        } else {
          // 风机有控制条件时
          if (selectData['Fan1OneStartCon'] == 1) {
            paramcode = 'CtrlFan1Start';
          } else {
            createMessage.error('1号风机不具备启动条件！');
            return;
          }
        }
      } else if (flag === 'Fan2Open') {
        if (selectData['Fan2OneStartCon'] === undefined) {
          paramcode = 'CtrlFan2Start';
        } else {
          // 风机有控制条件时
          if (selectData['Fan2OneStartCon'] == 1) {
            paramcode = 'CtrlFan2Start';
          } else {
            createMessage.error('2号风机不具备启动条件！');
            return;
          }
        }
      } else if (flag === 'Fan1Stop') {
        if (selectData['Fan1OneShutdownCon'] === undefined) {
          paramcode = 'CtrlFan1Stop';
        } else {
          // 风机有控制条件时
          if (selectData['Fan1OneShutdownCon'] == 1) {
            paramcode = 'CtrlFan1Stop';
          } else {
            createMessage.error('1号风机不具备停机条件！');
            return;
          }
        }
      } else if (flag === 'Fan2Stop') {
        if (selectData['Fan2OneShutdownCon'] === undefined) {
          paramcode = 'CtrlFan2Stop';
        } else {
          // 风机有控制条件时
          if (selectData['Fan2OneShutdownCon'] == 1) {
            paramcode = 'CtrlFan2Stop';
          } else {
            createMessage.error('2号风机不具备停机条件！');
            return;
          }
        }
      } else if (flag === 'Fan1Reset') {
        paramcode = 'CtrlFan1Reset';
      } else if (flag === 'Fan2Reset') {
        paramcode = 'CtrlFan2Reset';
      }

      start(paramcode)
        .then(() => {
          if (globalConfig.History_Type == 'remote') {
            createMessage.success('指令已下发至生产管控平台成功！');
          } else {
            createMessage.success('指令已下发成功！');
          }
        })
        .catch((err) => {
          createMessage.error(err.message);
        });
    } else if (modalType.value == 'resetFan') {
      // 一键复位
      start('CtrlFanReset').catch((err) => {
        createMessage.error(err.message);
      });
    } else if (modalType.value == 'remote') {
      // 远程就地控制
      start('autoRoManualControl', modeValue)
        .then(() => {
          createMessage.success('指令下发成功');
        })
        .catch((err) => {
          createMessage.error(err.message);
        });
    }
    modalIsShow.value = false;
  };
};

// 取消
const handleCancel = () => {
  if (modalType.value == 'startSmoke') {
    const data = dataSource.value[selectRowIndex.value];
    mainWindIsShow1.value = 'stop';
    mainWindIsShow2.value = 'stop';
    if (data['fanStart1'] == 1) {
      mainWindIsShow1.value = 'open';
    } else if (data['fanStart2'] == 1) {
      mainWindIsShow2.value = 'open';
    }
  }
  modalIsShow.value = false;
};

function deviceEdit(e: Event, type: string, record) {
  e.stopPropagation();
  openModalDeviceEdit(true, {
    type,
    deviceId: record['deviceID'],
  });
}

// 保德特有
function goOutLink(type: string) {
  if (type === '1') {
    // 视频
    if (deviceType.value == 'fanmain_zl') {
      window.open('http://10.248.204.121', '_blank');
    } else if (deviceType.value == 'fanmain_ljy') {
      window.open('http://10.248.204.234', '_blank');
    }
  } else {
    window.open('http://10.248.210.154/', '_blank');
  }
}

onBeforeMount(() => {
  // document.body.addEventListener('mousedown', addPlayVideo, true);
  getDeviceBaseList();
});

onMounted(async () => {
  const { query } = unref(currentRoute);
  if (query['deviceType']) deviceType.value = query['deviceType'] as string;
  loading.value = true;
  modelList.value = await getDictItems('mainFanModel');
  mountedThree(player1.value).then(async () => {
    // await setModelType('mainWindRect');
    getMonitor(true);
    addText();
    // addText();
    // play('initiatePlay', 'front', frequencyVal.value, 'open', 'tubPositivePath');
  });
});

onUnmounted(() => {
  removeCamera();
  destroy();
  if (timer) {
    clearTimeout(timer);
    timer = undefined;
  }
});
</script>

<style scoped lang="less">
@import '/@/design/theme.less';
@import '/@/design/vent/modal.less';

@{theme-deepblue} {
  .scene-box {
    --image-tab-group-bg: url('/@/assets/images/themify/deepblue/vent/tab-group-bg.png');
    --image-lr-top-bg: url('/@/assets/images/themify/deepblue/vent/lr-top-bg.png');
    --image-lr-tab-bg: url('/@/assets/images/themify/deepblue/vent/lr-tab-bg.png');
    --image-l-tab-active: url('/@/assets/images/themify/deepblue/vent/l-tab-active.png');
    --image-r-tab-active: url('/@/assets/images/themify/deepblue/vent/r-tab-active.png');
    --image-plane-bottom: url('/@/assets/images/themify/deepblue/vent/plane-bottom.png');
    --image-plane-icon-bg: url('/@/assets/images/themify/deepblue/vent/plane-icon-bg.png');
    --container-group-bg: linear-gradient(to right, #ffffff22, #53576305);
  }
}

.scene-box {
  --image-tab-group-bg: url('/@/assets/images/vent/tab-group-bg.png');
  --image-lr-top-bg: url('/@/assets/images/vent/lr-top-bg.png');
  --image-lr-tab-bg: url('/@/assets/images/vent/lr-tab-bg.png');
  --image-l-tab-active: url('/@/assets/images/vent/l-tab-active.png');
  --image-r-tab-active: url('/@/assets/images/vent/r-tab-active.png');
  --image-plane-bottom: url('/@/assets/images/vent/plane-bottom.png');
  --image-plane-icon-bg: url('/@/assets/images/vent/plane-icon-bg.png');
  --container-group-bg: linear-gradient(to right, #007bff22, #2081ff05);
}

.head-line {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .button-box {
    position: relative;
    padding: 5px;
    border: 1px transparent solid;
    border-radius: 5px;
    width: auto;
    height: 34px;
    border: 1px solid var(--vent-base-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vent-font-color);
    padding: 0 10px;
    cursor: pointer;

    &:hover {
      background: linear-gradient(#3eb2ff55, #00c3ff55);
    }

    &::before {
      width: calc(100% - 6px);
      height: 26px;
      content: '';
      position: absolute;
      top: 3px;
      right: 0;
      left: 3px;
      bottom: 0;
      z-index: -1;
      border-radius: inherit;
      /*important*/
      background: linear-gradient(#014978, #3bf3fc);
    }
  }
}

.control-group,
.top-box {
  display: flex !important;
  align-items: center !important;
  // justify-content: space-around !important;
  position: absolute !important;
  width: 1165px !important;
  height: 75px !important;
  left: 50% !important;
  top: 85px !important;
  transform: translateX(-50%) !important;
  background: var(--image-tab-group-bg) no-repeat !important;
  background-size: 100% 75px !important;
  padding: 0 30px !important;

  .button-box {
    height: 35px !important;
    min-width: 100px;
    padding-top: 3px !important;
    border: 1px transparent solid;
    border: 1px solid var(--vent-base-border);

    &:hover {
      background: var(--vent-device-manager-control-btn-hover) !important;
    }

    &::before {
      height: 27px !important;
      background: var(--vent-device-manager-control-btn) !important;
    }

    &::after {
      top: 35px !important;
    }
  }

  .button-box-disable {
    border: 1px solid var(--vent-base-border) !important;

    &:hover {
      background: none !important;
    }

    &:before {
      background: linear-gradient(#5897c299, #4a92a899) !important;
    }
  }
}

.top-right {
  position: absolute;
  display: flex;
  right: 0px;
  top: 55px;
  align-items: center;
  color: var(--vent-font-color);
  z-index: 1;
}

.data-show-box {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 10px;
  color: var(--vent-font-color);
  z-index: 999;
  top: 70px;

  .data-item {
    pointer-events: auto;

    .item-header {
      width: 374px;
      background: var(--image-lr-top-bg) no-repeat;
      background-size: cover;
      height: 32px;
      text-align: center;
      line-height: 34px;
      font-size: 15px;
      font-weight: 600;
      color: #fafafa;
    }

    .item-container {
      width: 346px;
      margin: 0 14px;
      padding: 10px;
      background: #004aac33;
      backdrop-filter: blur(2px);

      .tab {
        width: 323px;
        background: var(--image-lr-tab-bg) no-repeat;
        background-size: cover;
        display: flex;

        .tab-item {
          flex: 1;
          text-align: center;
          padding-top: 2px;
          color: #ffffff99;
          cursor: pointer;
          height: calc(100% - 10px);
          overflow-y: auto;

          &:hover {
            color: var(--vent-font-color);
          }
        }

        .tab-item-active-l {
          color: #aff3ff;
          background-image: var(--image-l-tab-active);
          background-repeat: no-repeat;
          background-size: auto;
          background-position: 6px 3px;
        }

        .tab-item-active-r {
          color: #aff3ff;
          background-image: var(--image-r-tab-active);
          background-repeat: no-repeat;
          background-position: 0 3px;
        }
      }

      .container-group {
        width: 314px;
        margin: 0px 4px;
        padding: 10px 0;
        min-height: 472px;
        background: var(--container-group-bg);
        max-height: 480px;
        overflow-y: auto;
      }

      .container-group-l {
        .container-item {
          width: 100%;
          height: 63px;
          display: flex;
          padding: 10px 0 0 20px;
          margin-bottom: 5px;
          position: relative;
          background: var(--image-plane-bottom) no-repeat;
          background-size: auto;
          background-position: bottom;

          &::before {
            content: '';
            display: block;
            width: 100%;
            height: 5px;
            position: absolute;
            top: 62px;
            left: 0;
            background-color: #73f4ff66;
            backdrop-filter: blur(5px);
          }

          .item-icon {
            width: 54px;
            height: 45px;
            background: var(--image-plane-icon-bg) no-repeat;
            background-size: cover;

            .icon-style {
              margin: 10px 0 0 18px;
            }
          }

          .item-name {
            width: 180px;
            line-height: 60px;
          }

          .item-value {
            position: relative;
            height: 26px;
            line-height: 24px;
            margin: 15px 0;
            text-align: center;
            width: 80px;
            border: 1px solid var(--vent-base-border);
            border-radius: 13px;
            background: linear-gradient(to right, #00f5fe44, #0090ff44);

            &::before {
              width: 6px;
              height: 6px;
              content: '';
              position: absolute;
              left: -3px;
              top: 8px;
              background: #ffa500;
              border-radius: 3px;
            }
          }
        }
      }

      .warning-header {
        display: flex;
        font-size: 14px;

        .header-item {
          flex: 1;
          display: flex;
          flex-direction: column;
          margin: 2px 10px;
          justify-content: space-between;
          align-items: center;

          .header-title {
            color: var(--vent-font-action-link);
          }

          .header-value {
            position: relative;
            height: 56px;
            padding-left: 5px;
            font-weight: 600;
            font-family: 'douyuFont';
            font-size: 16px;
            color: #ffa500;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }

      .fault-container-group {
        overflow: hidden;

        .fault-warning {
          color: #ff7b00;
          font-weight: 600px;
          font-size: 16px;
        }

        .fault-error {
          color: #ff3410;
          font-weight: 600px;
          font-size: 16px;
        }
      }

      .warning-group {
        padding: 0 10px;
        position: relative;

        &::before {
          content: '';
          display: block;
          width: 1px;
          height: 100%;
          position: absolute;
          left: 12px;
          background-color: var(--vent-base-border);
        }

        .warning-item {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          height: 38px;

          .item-name {
            .icon {
              width: 6px;
              height: 6px;
              display: inline-block;
              background-color: var(--vent-base-light-bg);
              border-radius: 3px;
              position: relative;
              margin-right: 5px;

              &::before {
                content: '';
                width: 10px;
                height: 10px;
                display: block;
                border: 1px solid #34edff99;
                border-radius: 5px;
                position: absolute;
                top: -2px;
                left: -2px;
              }
            }
          }
        }
      }

      .electric-box {
        display: flex;

        .item {
          text-align: center;
          color: #aff3ffee;
        }
      }

      .fault-group {
        height: 425px;
        margin-top: 5px;
        overflow-y: auto;

        .fault-item {
          display: flex;
          padding: 3px 0px;
          border-bottom: 1px solid #ffffff22;

          .item {
            padding: 0 2px;
            text-align: center;
          }

          &:nth-child(odd) {
            background-color: #c3fdff05;
          }
        }
      }
    }
  }
}

.fault-box {
  .item-header {
    width: 394px !important;
  }

  .item-container {
    width: 366px !important;

    .tab {
      width: 343px !important;
    }
  }

  .container-group {
    width: 334px !important;
  }
}
.scene-box .bottom-tabs-box {
  height: 280px;

  .tabs-box {
    position: relative !important;
  }

  .bd-control {
    position: absolute;
    z-index: 9999;
    display: flex;
    right: 0px;
    top: 10px;
  }
}

/** 保德在线监测和故障诊断切换组件 */
.monitor-tab {
  display: flex;
  position: absolute;
  top: 600px;
  left: 395px;
  align-items: center;

  .item {
    font-size: 15px;
    color: var(--vent-font-color);
    padding: 0 5px;
    cursor: pointer;
  }

  .item-active {
    transform: skew(-15deg, 0);
    color: var(--vent-font-action-link);
    border-bottom: 1px solid var(--vent-base-border);
  }
}

.video-icon {
  width: 30px;
  height: 38px;
  position: absolute;
  top: 600px;
  right: 395px;
  color: var(--vent-font-color);
  z-index: 1;
  font-size: 28px;
}

.no-play {
  &::after {
    position: absolute;
    width: 80%;
    height: 100%;
    content: '';
    left: 12%;
    top: -5px;
    background: linear-gradient(
      to bottom left,
      transparent 0%,
      transparent calc(50% - 2px),
      #ffffff 50%,
      transparent calc(50% + 2px),
      transparent 100%
    );
  }
}

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

      span {
        color: #f2a500;
      }

      .data-title {
        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;
      }
    }
  }
}

.btn {
  padding: 4px 12px;
  position: relative;
  border-radius: 2px;
  color: var(--vent-font-color);
  cursor: pointer;

  &::before {
    position: absolute;
    display: block;
    content: '';
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    top: 2px;
    left: 2px;
    border-radius: 2px;
    z-index: -1;
  }
}

.btn1 {
  border: 1px solid #5cfaff;

  &::before {
    background-image: linear-gradient(#2effee92, #0cb1d592);
  }

  &:hover {
    border: 1px solid #5cfaffaa;

    &::before {
      background-image: linear-gradient(#2effee72, #0cb1d572);
    }
  }
}

.btn2 {
  border: 1px solid var(--vent-base-border);
  margin-left: 10px;

  &::before {
    background-image: linear-gradient(#2584b0, #1f75a3);
  }

  &:hover {
    &::before {
      background-image: linear-gradient(#2584b0cc, #1f75a3cc);
    }
  }
}

:deep(.button-box) {
  position: relative;
  padding: 5px;
  border-radius: 5px;
  margin-left: 8px;
  margin-right: 8px;
  width: auto;
  height: 35px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vent-font-color);
  padding: 0 15px 5px 15px;
  cursor: pointer;

  &:hover {
    background: var(--vent-device-manager-control-btn-hover);
  }

  &::before {
    width: calc(100% - 6px);
    height: 27px;
    content: '';
    position: absolute;
    top: 3px;
    right: 0;
    left: 3px;
    bottom: 0;
    z-index: -1;
    border-radius: inherit;
    /*important*/
    background: var(--vent-device-manager-control-btn);
  }

  &::after {
    width: calc(100% + 32px);
    height: 10px;
    content: '';
    position: absolute;
    top: 28px;
    right: 0;
    left: -16px;
    bottom: 0;
    z-index: -1;
    border-radius: inherit;
    /*important*/
    background-position: center;
    background-size: 100%;
    z-index: 999;
  }
}

:deep(.zxm-radio-disabled + span) {
  color: var(--vent-font-color) !important;
}

:deep(.zxm-radio-disabled .zxm-radio-inner::after) {
  background-color: #127cb5 !important;
}

::v-deep(#LivePlayerBox) {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding-right: 380px;
  pointer-events: none;

  .video-parent {
    height: 208px;
    pointer-events: auto !important;
  }
}

::v-deep(.@{ventSpace}-table-wrapper) {
  height: 100% !important;
}

::v-deep(.@{ventSpace}-spin-container) {
  height: 100% !important;
  overflow-y: auto;
}

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

.label {
  max-width: 220px;
}

.@{ventSpace}-input {
  width: 150px;
}
</style>