gasInjection-project/src/views/vent/monitorManager/fanLocalMonitor1/index.vue

<template>
  <div
    v-show="activeBtn == 'fanLocal-ssjc'"
    class="bg"
    style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden"
  >
    <a-spin :spinning="loading" />
    <div id="fanLocal3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
    <div id="fanLocal3DCSS" class="threejs-Object-CSS" style="width: 100%; height: 100%; position: absolute; overflow: hidden; pointer-events: none">
      <div style="z-index: -1; position: relative" v-if="hasPermission('show:sensorMonitor')">
        <div class="elementTag" id="inputBox1">
          <div class="elementContent" v-if="selectData.windSpeed1 || selectData.gas3 || selectData.windSpeed_merge || selectData.windQuantity1">
            <p v-if="selectData.windSpeed1 || selectData.windSpeed_merge"
              >风筒入口风速：<span class="value">{{
                selectData.windSpeed1 ? selectData.windSpeed1 : selectData.windSpeed_merge ? selectData.windSpeed_merge : '-'
              }}</span>
              <span class="unit"> m/s</span>
            </p>
            <p v-if="selectData.windInputSpeed1 || selectData.windInputSpeed_merge"
              >风筒入口风速：<span class="value">{{
                selectData.windInputSpeed1 ? selectData.windInputSpeed1 : selectData.windInputSpeed_merge ? selectData.windInputSpeed_merge : '-'
              }}</span>
              <span class="unit"> m/s</span>
            </p>
            <p v-if="selectData.windQuantity1 || selectData.inletAirVolume_merge"
              >风筒入口风量：<span class="value">{{
                selectData.windQuantity1 ? selectData.windQuantity1 : selectData.inletAirVolume_merge ? selectData.inletAirVolume_merge : '-'
              }}</span>
              <span class="unit"> m³/min</span>
            </p>
            <p v-if="selectData.gas3"
              >风筒入口瓦斯浓度: <span class="value">{{ selectData.gas3 ? selectData.gas3 : '-' }}</span>
              <span class="unit"> %</span>
            </p>
          </div>
        </div>
        <div class="elementTag" id="outBox">
          <div
            class="elementContent elementContent-r"
            v-if="
              selectData.windQuantity2 ||
              selectData.gas1 ||
              (selectData.windOutSpeed1 && selectData.windOutSpeed_merge) ||
              selectData.ductOutletAirVolume_merge
            "
          >
            <p v-if="selectData.windQuantity2 || selectData.m3 || selectData.ductOutletAirVolume_merge || selectData.windOutSpeed_merge">
              迎头供风量：<span class="value">{{
                selectData.windQuantity2
                  ? selectData.windQuantity2
                  : selectData.m3
                    ? selectData.m3
                    : selectData.ductOutletAirVolume_merge
                      ? selectData.ductOutletAirVolume_merge
                      : '-'
              }}</span>
              <span class="unit"> m³/min</span>
            </p>
            <p v-if="selectData.gas1"
              >迎头瓦斯浓度：<span class="value">{{ selectData.gas1 ? selectData.gas1 : '-' }}</span>
              <span class="unit"> %</span>
            </p>
            <p v-if="selectData.windOutSpeed1 || selectData.windOutSpeed_merge"
              >风筒出口风速<span class="value">{{
                selectData.windOutSpeed1 ? selectData.windOutSpeed1 : selectData.windOutSpeed_merge ? selectData.windOutSpeed_merge : '-'
              }}</span>
              <span class="unit"> %</span>
            </p>
          </div>
        </div>
        <div class="elementTag" id="returnBox">
          <div class="elementContent elementContent-r" v-if="selectData.gas2">
            <p v-if="selectData.gas2"
              >回风流瓦斯浓度：<span class="value">{{ selectData.gas2 ? selectData.gas2 : '-' }}</span>
              <span class="unit"> %</span>
            </p>
          </div>
        </div>
        <div class="elementTag" id="gateBox">
          <div class="elementContent">
            <p>风门状态：关</p>
            <p>风门过风面积：{{ selectData.gas1 ? selectData.gas1 : '-' }}</p>
          </div>
        </div>
        <div class="elementTag" id="windownBox">
          <div class="elementContent" v-if="modalType == 'fc'">
            <p style="pointer-events: auto"
              ><a class="action-link" @click="goDetailDevice('window_fWindowM3')">风窗详情</a>
              <ArrowRightOutlined :style="{ color: '#157DC8' }" />
            </p>
            <p v-if="selectData.windSpeed"
              >风窗风流风速：<span class="value">{{ selectData.windSpeed ? selectData.windSpeed : '-' }}</span> <span class="unit"> m/s</span></p
            >
            <p v-if="selectData.fWindowM3"
              >风窗过风量：<span class="value">{{ selectData.fWindowM3 ? selectData.fWindowM3 : '-' }}</span> <span class="unit"> m³/min</span></p
            >
            <p v-if="selectData.OpenDegree"
              >风窗开度值：<span class="value">{{ selectData.OpenDegree ? selectData.OpenDegree : '-' }}</span> <span class="unit"> %</span></p
            >
            <p v-if="selectData.OpenDegree"
              >风窗过风面积：<span class="value">{{ selectData.frontArea ? selectData.frontArea : '-' }}</span> <span class="unit"> ㎡</span></p
            >
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="scene-box">
    <div class="top-box" v-if="!loading && activeBtn == 'fanLocal-ssjc'">
      <div class="top-center row">
        <!-- <div class="vent-flex-row" id="fanLocalSelectDom" v-if="!globalConfig?.simulatedPassword && getDictItemsByCode('fanlocaltype')">
          <span style="color: #00f5fe; margin-left: 5px">风机类型：</span>
          <JDictSelectTag
            style="width: 180px"
            v-model:value="devicekide"
            dictCode="fanlocaltype"
            :showChooseOption="false"
            :getPopupContainer="getPopupContainer"
            @change="changeDeviceKind"
          />
        </div> -->
        <!-- fanlocal_systeml_zj 模拟局部风机，不显示操作按钮 -->
        <template v-for="(item, index) in modalTypeArr.leftBtnArr" :key="index">
          <div
            v-if="!(selectData.fanFrequencyType == 'fandp' && item.permission.startsWith('btn:frequency')) && hasPermission(item.permission)"
            :class="{ 'button-box': btnClick, 'button-disable': !btnClick }"
            @click="showModal(item)"
            >{{ item.value }}
          </div>
        </template>
      </div>
      <div class="top-right row">
        <template v-for="(item, index) in modalTypeArr.rightBtnArr" :key="index">
          <div
            v-if="
              !(selectData.fanFrequencyType == 'fandp' && (item.permission === 'fanLocal:gasAlarmSet' || item.permission === 'fanLocal:kkjc')) &&
              hasPermission(item.permission)
            "
            :class="{ 'button-box': btnClick, 'button-disable': !btnClick }"
            @click="showModal(item)"
            >{{ item.value }}</div
          >
        </template>
      </div>
    </div>
    <div class="title-text">
      {{ selectData.supplyAirAddr || selectData.strinstallpos || selectData.stationname }}
    </div>
    <div class="data-show-box" v-if="!loading && activeBtn == 'fanLocal-ssjc'">
      <div class="data-item" v-if="leftColumns.length > 0">
        <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="selectData.deviceType">
                <div class="container-item" v-for="(data, index) in leftColumns" :key="index">
                  <div class="item-icon">
                    <CaretRightOutlined class="icon-style" />
                  </div>
                  <div class="item-name">{{ data.title }}</div>
                  <div v-if="data.dataIndex.startsWith('Fan')">
                    <div class="item-value" v-if="warningMonitorRowIndex == 0">{{
                      selectData[data.dataIndex.replace('Fan', 'Fan1')] ? selectData[data.dataIndex.replace('Fan', 'Fan1')] : '-'
                    }}</div>
                    <div class="item-value" v-if="warningMonitorRowIndex == 1">{{
                      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>
      <div>
        <div class="data-item" v-if="rightColumns.length > 0">
          <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">
              <div class="warning-group" style="max-height: 50%; overflow-y: auto">
                <template v-if="deviceType">
                  <div v-for="(state, index) in rightColumns" :key="index">
                    <template v-if="!state.dataIndex.endsWith('_w')">
                      <div class="container-item">
                        <div class="item-icon">
                          <CaretRightOutlined class="icon-style" />
                        </div>
                        <div class="item-name">{{ state.title }}</div>
                        <div v-if="state.dataIndex.startsWith('Fan')">
                          <div class="item-value" v-if="dataMonitorRowIndex == 0">{{
                            selectData[state.dataIndex.replace('Fan', 'Fan1')] ? selectData[state.dataIndex.replace('Fan', 'Fan1')] : '-'
                          }}</div>
                          <div class="item-value" v-if="dataMonitorRowIndex == 1">{{
                            selectData[state.dataIndex.replace('Fan', 'Fan2')] ? selectData[state.dataIndex.replace('Fan', 'Fan2')] : '-'
                          }}</div>
                        </div>
                        <div v-else>
                          <div class="item-value">{{ selectData[state.dataIndex] ? selectData[state.dataIndex] : '-' }} </div>
                        </div>
                      </div>
                    </template>
                  </div>
                </template>
              </div>
              <div class="warning-group" style="max-height: 50%; overflow-y: auto">
                <div class="warning-header">
                  <div class="header-item">
                    <div class="header-title">报警数量</div>
                    <div class="header-value">{{ selectData['warnLogNotOkCount'] }} </div>
                  </div>
                </div>
                <template v-if="deviceType">
                  <div v-for="(state, index) in leftColumns" :key="index">
                    <template v-if="state.dataIndex.endsWith('_w')">
                      <div class="warning-item">
                        <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">
                            <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>
                          </div>
                          <div class="signal-item" v-if="warningMonitorRowIndex == 1">
                            <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>
                          </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>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    v-if="renderPlayer"
    v-show="activeBtn == 'fanLocal-ssjc'"
    ref="playerRef"
    :class="{ 'to-right': rightColumns.length < 1 || leftColumns.length < 1, 'to-no-right': rightColumns.length > 0 && leftColumns.length > 0 }"
    style="z-index: 999; position: absolute; top: 100px; right: 15px; width: 100%; height: 100%; margin: auto; pointer-events: none"
  >
  </div>
  <a-modal v-model:visible="modalIsShow" :title="modalTitle" :maskStyle="{ backgroundColor: '#000000aa', backdropFilter: 'blur(3px)' }">
    <template #footer>
      <div v-if="controlType != 'startFan'">
        <a-button key="back" @click="cancel">返回</a-button>
        <a-button key="submit" type="primary" :loading="loading" @click="handleOk">确定</a-button>
      </div>
    </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="" v-if="controlType == 'startSmoke'">
        <!-- 互斥控制 -->
        <div class="startSmoke-select">
          <div class="label">1#风机</div>
          <a-radio-group v-model:value="mainWindIsShow1" @change="changeMotor" name="localWind1">
            <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="localWind2">
            <a-radio value="open">开启</a-radio>
            <a-radio value="stop">停止</a-radio>
          </a-radio-group>
        </div>
      </div>
      <div class="" v-if="controlType == 'startFan'">
        <!-- 不互斥控制 -->
        <div class="startSmoke-select">
          <div class="label">1#风机：</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">2#风机：</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="vent-flex-row input-box" v-if="controlType == 'Fan1Frequency'">
        <div class="label">1#机运行频率（Hz）：</div>
        <a-input-number size="small" v-model:value="fan1FrequencyVal" :min="20" :max="50" :step="0.1" />
      </div>
      <div class="vent-flex-row input-box" v-if="controlType == 'Fan2Frequency'">
        <div class="label">2#机运行频率（Hz）：</div>
        <a-input-number size="small" v-model:value="fan2FrequencyVal" :min="20" :max="50" :step="0.1" />
      </div>
      <div class="vent-flex-row input-box" v-if="controlType == 'FanFrequency'">
        <div class="label">风机运行频率（Hz）：</div>
        <a-input-number size="small" v-model:value="fan1FrequencyVal" :min="20" :max="50" :step="0.1" />
      </div>

      <div class="vent-flex-row input-box" v-if="controlType == 'disAirAlarm'">
        <div class="label">漏风率（%）：</div>
        <a-input-number size="small" v-model:value="frequencyVal" :min="0" :max="50" :step="0.1" />
      </div>
      <div class="vent-flex-row input-box" v-if="controlType == 'diameter'">
        <div class="label">风筒直径（m）：</div>
        <a-input-number size="small" v-model:value="frequencyVal" :min="0" :max="50" :step="0.1" />
      </div>
      <div class="vent-flex-row input-box" v-if="controlType == 'len'">
        <div class="label">风筒长度（m）：</div>
        <a-input-number size="small" v-model:value="frequencyVal" :min="0" :max="50" :step="0.1" />
      </div>
      <div class="vent-flex-row input-box" v-if="controlType == 'windPowerLimit'">
        <div class="label">风电闭锁限值（m³/min）：</div>
        <a-input-number size="small" v-model:value="frequencyVal" :min="0" :max="50" :step="0.1" />
      </div>
      <div class="vent-flex-row input-box" v-if="controlType == 'gasPowerLimit'">
        <div class="label">瓦斯电闭锁限值（m³/min）：</div>
        <a-input-number size="small" v-model:value="frequencyVal" :min="0" :max="50" :step="0.1" />
      </div>
      <div v-if="controlType == 'gasAlarmSet'">
        <div class="vent-flex-row input-box">
          <div class="label">设置瓦斯超限浓度：</div>
          <a-input-number size="small" v-model:value="gasWarningVal" :min="0" :max="1" :step="0.01" />
        </div>
      </div>
      <div v-if="controlType == 'gasAlarm'">
        <div class="vent-flex-row input-box">
          <div class="label">传感器名称：</div>
          <a-select placeholder="传感器" @change="handleChangeSensor" :options="sensorList" v-model:value="modalSensor" />
        </div>
        <div class="vent-flex-row input-box">
          <div class="label">传感器值：</div>
          <a-input-number size="small" v-model:value="frequencyVal" :min="0" :max="50" :step="0.1" />
        </div>
      </div>
      <div v-if="controlType == 'airVolumeAlarm'">
        <div class="vent-flex-row input-box">
          <div class="label">风量上限（m³/min）：</div>
          <a-input-number size="small" v-model:value="modalTypeArr.rightBtnArr[3].min" :min="0" :max="50" :step="0.1" />
        </div>
        <div class="vent-flex-row input-box">
          <div class="label">风量下限（m³/min）：</div>
          <a-input-number size="small" v-model:value="modalTypeArr.rightBtnArr[3].max" :min="0" :max="50" :step="0.1" />
        </div>
      </div>
      <div class="vent-flex-row input-box" v-if="controlType == 'zhlk'">
        <div class="label">目标风量（m³/min）：</div>
        <a-input-number size="small" v-model:value="targetVolume" />
      </div>
      <div v-if="controlType == 'gasOverSet'">
        <div class="vent-flex-row input-box">
          <div class="label">设置瓦斯超限浓度：</div>
          <a-input-number size="small" v-model:value="gasWarningVal" :min="0" :max="1" :step="0.01" />
        </div>
      </div>
      <!-- 启动或停止 -->
      <div class="" v-if="controlType == 'startSmoke'"> </div>
      <div v-if="!globalConfig?.simulatedPassword" class="vent-flex-row input-box">
        <div class="label">操作密码：</div>
        <a-input size="small" type="password" v-model:value="passWord" />
      </div>
    </div>
  </a-modal>

  <fanlocalHistory v-if="activeBtn == 'fanLocal-history'" :selectData="selectData" :devicekide="devicekide" :deviceId="deviceId" />
  <fanlocalWarnHistory v-if="activeBtn == 'fanLocal-warn'" :devicekide="devicekide" :deviceId="deviceId" />
  <fanlocalOperateHistory v-if="activeBtn == 'fanLocal-operate'" :devicekide="devicekide" :deviceId="deviceId" />
  <fanlocalEchartLine v-if="activeBtn == 'fanLocal-wind'" :historyList="historyList" :chartsColumns="chartsColumns" :deviceId="deviceId" />
  <BottomMenu :nav-list="navList" @change="changeActive" />
</template>

<script setup lang="ts">
  import { ExclamationCircleFilled, ArrowRightOutlined } from '@ant-design/icons-vue';
  import { onBeforeMount, ref, watch, onMounted, nextTick, defineAsyncComponent, reactive, onUnmounted, inject, unref, onBeforeUnmount } from 'vue';
  import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
  import fanlocalHistory from './components/fanlocal-history.vue';
  import fanlocalWarnHistory from './components/fanlocal-warn-history.vue';
  import fanlocalOperateHistory from './components/fanlocal-operate-history.vue';
  import fanlocalEchartLine from './components/fanlocal-echart-line.vue';
  import { mountedThree, setModelType, destroy, addCssText, addText, playSmoke } from './fanLocal.three';
  import lodash from 'lodash';
  import { getTableList, list, autoAdjust } from '/@/views/vent/monitorManager/fanLocalMonitor/fanLocal.api';
  import { chartsColumns1, navList } from './fanLocal.data';
  import { deviceControlApi } from '/@/api/vent/index';
  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
  import { useRouter } from 'vue-router';
  import type { BasicColumn } from '/@/components/Table/src/types/table';
  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
  import { getPopupContainer } from '/@/utils';
  import { getDictItemsByCode } from '/@/utils/dict';
  import { message } from 'ant-design-vue';
  import { useCamera } from '/@/hooks/system/useCamera';
  import { CaretRightOutlined } from '@ant-design/icons-vue';
  import { usePermission } from '/@/hooks/web/usePermission';
  import { useGlobSetting } from '/@/hooks/setting';
  import { useMessage } from '/@/hooks/web/useMessage';
  const globalConfig = inject('globalConfig');

  const { hasPermission } = usePermission();

  const { currentRoute } = useRouter();
  const router = useRouter();
  const { createConfirm } = useMessage();
  const globSetting = useGlobSetting();

  const modalTypeArr = reactive({
    leftBtnArr: [
      {
        key: 'startSmoke',
        value: '启停风机',
        permission: 'btn:openclose',
      },
      {
        key: 'startFan',
        value: '启停风机',
        permission: 'btn:openclose1',
      },
      {
        key: 'changeSmoke', // 主备两个点位
        value: '一键倒机',
        permission: 'btn:change',
      },
      {
        key: 'changeFan', // 主备一个点位
        value: '一键倒机',
        permission: 'btn:CtrlFanChange',
      },
      {
        key: 'fan1ToFan2',
        value: '1#倒2#',
        permission: 'btn:ctrlFan1ToFan2',
      },
      {
        key: 'fan2ToFan1',
        value: '2#倒1#',
        permission: 'btn:ctrlFan2ToFan1',
      },
      {
        key: 'Fan1Frequency',
        value: '1#调频',
        permission: 'btn:frequency',
      },
      {
        key: 'Fan2Frequency',
        value: '2#调频',
        permission: 'btn:frequency',
      },
      {
        key: 'FanFrequency',
        value: '风机调频',
        permission: 'btn:frequencyMerge',
      },
      {
        key: 'windPower',
        value: '风电闭锁',
        permission: 'fanLocal:fdbs',
      },
      {
        key: 'gasPower',
        value: '瓦斯电闭锁',
        permission: 'fanLocal:wsdbs',
      },
      {
        key: 'needAir',
        value: '需风量',
        permission: 'fanLocal:control',
      },
    ],
    rightBtnArr: [
      {
        key: 'gasAlarmSet',
        value: '瓦斯限值设定',
        permission: 'fanLocal:gasAlarmSet',
      },
      {
        key: 'gasOverSet', //
        value: '瓦斯限值设定',
        permission: 'fanLocal:gasOverSet',
      },
      {
        key: 'kkjc',
        value: '工况辅助决策',
        permission: 'fanLocal:kkjc',
      },
      {
        key: 'zhlk',
        value: '自主联控',
        permission: 'fanLocal:zhlk',
      },
      {
        key: 'diameter',
        value: '风筒直径',
        permission: 'fanLocal:control',
      },
      {
        key: 'diameter',
        value: '风筒直径',
        permission: 'fanLocal:control',
      },
      {
        key: 'len',
        value: '风筒长度',
        permission: 'fanLocal:control',
      },
      // {
      //   key: 'frequency',
      //   value: '调频',
      //   permission: 'fanLocal:control',
      // },
      {
        key: 'windPowerLimit',
        value: '风电闭锁限值',
        permission: 'fanLocal:control',
      },
      {
        key: 'gasPowerLimit',
        value: '瓦斯电闭锁限值',
        permission: 'fanLocal:control',
      },
      {
        key: 'airVolumeAlarm',
        value: '风量报警',
        permission: 'fanLocal:control',
        min: 0,
        max: 100,
      },
      {
        key: 'disAirAlarm',
        value: '漏风率报警',
        permission: 'fanLocal:control',
      },
      // {
      //   key: 'gasAlarm',
      //   value: '瓦斯报警',
      //   permission: 'fanLocal:control',
      // },
    ],
  });
  const sensorList = ref<any[]>([
    {
      value: '1',
      label: 'T1',
    },
    {
      value: '2',
      label: 'T2',
    },
    {
      value: '3',
      label: 'T3',
    },
  ]);

  const scroll = reactive({
    y: 180,
  });
  const deviceTypeDicts = getDictItemsByCode('fanlocaltype');
  const gasWarningVal = ref(0.6); // 瓦斯最大报警值
  const playerRef = ref();
  const renderPlayer = ref(true);
  const modalSensor = ref(null);
  const loading = ref(false);
  const player1 = ref();
  const modalIsShow = ref<boolean>(false); // 是否显示模态框
  const modalTitle = ref(''); // 模态框标题显示内容，根据设备操作类型决定
  const fan1FrequencyVal = ref(40); //主机频率
  const fan2FrequencyVal = ref(40); //备机频率
  const mainWindIsShow1 = ref('open'); // 主机默认启动leftColumns
  const mainWindIsShow2 = ref('stop'); // 备机默认不启动
  const fanControl = ref('');
  const targetVolume = ref(600);
  const historyList = ref([]);
  const remoteChartsColumns = getTableHeaderColumns('fanlocal_chart');
  const chartsColumns = remoteChartsColumns && remoteChartsColumns.length > 0 ? remoteChartsColumns : chartsColumns1;

  const passWord = ref('');
  // 默认初始是第一行
  const selectRowIndex = ref(0);
  const dataMonitorRowIndex = ref(0);
  // 默认数据右边监测的是主机
  const warningMonitorRowIndex = ref(0);

  const xAxisDataGas = ref([]);
  // 设备数据
  const controlType = ref('');
  const modalType = ref('');
  // 监测数据
  const initData = {
    deviceID: '',
    deviceType: '',
    strname: '',
    dataDh: '-', //压差
    dataDtestq: '-', //测试风量
    sourcePressure: '-', //气源压力
    dataDequivalarea: '-',
    netStatus: '0', //通信状态
    warnLevel_str: '',
    stationname: '',
    fanFrequencyType: '',
  };
  const frequencyVal = ref(0);
  const dataSource = ref([]);
  // const historySource = ref([]);
  // 关联设备信息
  const linkDeviceInfo = ref({});
  // 监测数据
  let selectData = reactive(lodash.cloneDeep(initData));
  const rightColumns = ref<BasicColumn[]>([]);
  const leftColumns = ref<BasicColumn[]>([]);
  const devicekide = ref('');
  const deviceType = ref(selectData.deviceType);
  const deviceId = ref('');
  const headElHeight = ref(0);
  let btnClick = ref(true); // 判断按钮是否可点

  //报表导出
  // let editID = ref<any>('');
  // let fileType = ref('');
  // https获取监测数据
  let timer: null | NodeJS.Timeout | undefined = null;
  const { getCamera, removeCamera } = useCamera();

  watch(deviceType, (type) => {
    rightColumns.value = getTableHeaderColumns(type + '_monitor_right') as [];
    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://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
    return '';
  };

  const activeBtn = ref('fanLocal-ssjc');
  async function changeActive(activeValue) {
    activeBtn.value = activeValue;
    if (activeBtn.value !== 'fanLocal-ssjc') {
      timer = undefined;
      clearTimeout(timer);
    } else {
      timer = null;
      await getMonitor(true);
    }
  }

  const selectDevice = (key, val) => {
    if (key === 'dataMonitorRowIndex') {
      dataMonitorRowIndex.value = val;
    } else {
      warningMonitorRowIndex.value = val;
    }
  };

  function goDetailDevice(linkDeviceCode) {
    let linkDeviceId = '';
    if (linkDeviceCode.startsWith('window')) {
      linkDeviceId = linkDeviceInfo.value[linkDeviceCode] ? linkDeviceInfo.value[linkDeviceCode]['id'] : '';
      router.push({ path: '/monitorChannel/monitor-window', query: { id: linkDeviceId } });
    }
  }

  //
  async function getDataSource() {
    if (devicekide.value) {
      const res = await list({ devicetype: devicekide.value, ids: deviceId.value, pagetype: 'normal' });
      // const res = await list({ devicetype: 'fanlocal', pagetype: 'normal' });
      if (res.msgTxt && res.msgTxt[0] && res.msgTxt[0].datalist && res.msgTxt[0].datalist.length > 0) {
        const dataArr = res.msgTxt[0].datalist || [];
        dataSource.value = [];
        selectRowIndex.value = dataArr.findIndex((item) => item.deviceID === deviceId.value);
        if (selectRowIndex.value > -1) {
          if (!deviceType.value) deviceType.value = dataArr[selectRowIndex.value]['deviceType'];
          let data = dataArr[selectRowIndex.value];
          const readData = data.readData;
          data = Object.assign(data, readData);
          if (data['Fan1StartStatus'] && data['Fan1StartStatus'] === '1.0') data['Fan1StartStatus'] = '1';
          if (data['Fan2StartStatus'] && data['Fan2StartStatus'] === '1.0') data['Fan2StartStatus'] = '1';
          if (data['Fan1StartStatus'] && data['Fan1StartStatus'] === '0.0') data['Fan1StartStatus'] = '0';
          if (data['Fan2StartStatus'] && data['Fan2StartStatus'] === '0.0') data['Fan2StartStatus'] = '0';
          data['windQuantity2'] =
            data['windQuantity2'] ||
            data['m3'] ||
            data['ductOutletAirVolume_merge'] ||
            data['windOutSpeed_merge'] ||
            data['windOutSpeed1'] ||
            data['windOutSpeed2'] ||
            data['windOutSpeed_merge'];
          // if (globSetting.sysOrgCode === 'sdmtjtbetmk') {
          //   if (data['m3']) data['ductOutletAirVolume_merge'] = data['m3'];
          //   if (data['m3']) data['inletAirVolume_merge'] = (Number(data['m3']) * 1.08).toFixed(2);
          // }
          Object.assign(selectData, data);
          if (selectRowIndex.value > -1) {
            let echartsData = dataArr[selectRowIndex.value]['history'] || [];
            echartsData = echartsData.filter((item) => {
              item['FanfHz'] = data['Fan1StartStatus'] == '1' ? item['Fan1fHz'] : data['Fan2StartStatus'] == '1' ? item['Fan2fHz'] : 0;
              item['windQuantity2'] =
                item['windQuantity2'] ||
                item['m3'] ||
                item['ductOutletAirVolume_merge'] ||
                item['windOutSpeed_merge'] ||
                item['windOutSpeed1'] ||
                item['windOutSpeed2'] ||
                item['windOutSpeed_merge'];
              return true;
            });
            historyList.value = echartsData;
          }
        }
      } else {
        return (dataSource.value = []);
      }
    } else {
      dataSource.value = [];
    }
  }

  async function getMonitor(flag?) {
    if (Object.prototype.toString.call(timer) === '[object Null]') {
      timer = await setTimeout(
        async () => {
          // debugger;
          // for (const key in selectData) {
          //   selectData[key] = '';
          // }
          await getDataSource();

          // 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]);
          //   }

          // }
          playSmoke(selectData);
          addText(selectData);
          // historySource.value = selectData.history;
          if (timer) {
            timer = null;
          }
          getMonitor();
        },
        flag ? 0 : 1000
      );
    }
  }

  // 获取设备基本信息列表
  const deviceBaseList = ref([]);
  function getDeviceBaseList() {
    getTableList({ pageSize: 1000 }).then((res) => {
      deviceBaseList.value = res.records;
    });
  }

  // 打开并设置modal的标题
  function showModal(obj) {
    if (!btnClick.value) return;
    if (obj.key == 'kkjc') {
      gasWarningVal.value = 0.6;
      // 工况辅助决策
      openAssistance(true, {});
      return;
    }
    controlType.value = obj.key;
    modalTitle.value = obj.value;
    passWord.value = '';
    modalIsShow.value = true;
  }

  function changeMotor(e) {
    const target = e.target;
    if (target.name === 'localWind1') {
      if (target.value === 'open') {
        mainWindIsShow2.value = 'stop';
      }
    } else if (target.name === 'localWind2') {
      if (target.value === 'open') {
        mainWindIsShow1.value = 'stop';
      }
    }
  }

  function handleOk(control?) {
    if (passWord.value == '') {
      message.warning('请输入密码！');
      return;
    }

    createConfirm({
      iconType: 'warning',
      title: '控制',
      content: '您确定要控制吗？',
      onOk: () => handerFn(),
    });
    const handerFn = () => {
      const handType = controlType.value;
      const data = {
        deviceid: selectData.deviceID,
        devicetype: selectData.deviceType,
        paramcode: '',
        password: passWord.value || globalConfig?.simulatedPassword,
        value: null,
      };
      if (handType === 'startSmoke') {
        // 启动风机
        // 以下是互斥
        if (mainWindIsShow1.value === 'open' && mainWindIsShow2.value === 'stop') {
          // playSmoke(handType, 'top', frequency, 'open');
          data.paramcode = 'CtrlFan1Start';
          deviceControlApi(data)
            .then((res) => {
              if (res.success) {
                if (globalConfig.History_Type == 'remote') {
                  message.success('指令已下发至生产管控平台成功！');
                } else {
                  message.success('指令已下发成功！');
                }
                modalTitle.value = '';
                modalIsShow.value = false;
              } else {
                message.error(res.message);
              }
            })
            .catch((err) => {
              // modalIsShow.value = true;
            });
        } else if (mainWindIsShow2.value === 'open' && mainWindIsShow1.value === 'stop') {
          // playSmoke(handType, 'down', frequency, 'open');
          data.paramcode = 'CtrlFan2Start';
          deviceControlApi(data)
            .then(() => {
              if (res.success) {
                if (globalConfig.History_Type == 'remote') {
                  message.success('指令已下发至生产管控平台成功！');
                } else {
                  message.success('指令已下发成功！');
                }
                modalTitle.value = '';
                modalIsShow.value = false;
              } else {
                message.error(res.message);
              }
            })
            .catch((err) => {});
        } else if (mainWindIsShow1.value === 'stop' && mainWindIsShow2.value === 'stop') {
          // playSmoke(handType, '', frequency, 'stop');
        }
      } else if (handType === 'startFan') {
        if (control === 'Fan1Open') {
          data.paramcode = 'CtrlFan1Start';
        } else if (control === 'Fan2Open') {
          data.paramcode = 'CtrlFan2Start';
        } else if (control === 'Fan1Stop') {
          data.paramcode = 'CtrlFan1Stop';
        } else if (control === 'Fan2Stop') {
          data.paramcode = 'CtrlFan2Stop';
        } else if (control === 'Fan1Reset') {
          data.paramcode = 'CtrlFan1Reset';
        } else if (control === 'Fan2Reset') {
          data.paramcode = 'CtrlFan2Reset';
        }
        deviceControlApi(data)
          .then((res) => {
            if (res.success) {
              if (globalConfig.History_Type == 'remote') {
                message.success('指令已下发至生产管控平台成功！');
              } else {
                message.success('指令已下发成功！');
              }
              modalTitle.value = '';
              modalIsShow.value = false;
            } else {
              message.error(res.message);
            }
          })
          .catch((err) => {
            btnClick.value = true;
          });
      } else if (handType === 'Fan1Frequency' || handType === 'Fan2Frequency' || handType === 'FanFrequency') {
        // 调频
        if (handType === 'Fan1Frequency') {
          data.paramcode = 'Fan1FreqHz';
          data.value = fan1FrequencyVal.value;
        } else if (handType === 'Fan2Frequency') {
          data.paramcode = 'Fan2FreqHz';
          data.value = fan2FrequencyVal.value;
        } else if (handType === 'FanFrequency') {
          data.paramcode = 'FreqHz_merge';
          data.value = fan1FrequencyVal.value;
        }

        deviceControlApi(data)
          .then((res) => {
            if (res.success) {
              if (globalConfig.History_Type == 'remote') {
                message.success('指令已下发至生产管控平台成功！');
              } else {
                message.success('指令已下发成功！');
              }
              modalTitle.value = '';
              modalIsShow.value = false;
            } else {
              message.error(res.message);
            }
          })
          .catch((err) => {});
      } else if (handType === 'changeSmoke') {
        if (selectData['Fan1StartStatus'] == '0' || !selectData['Fan1StartStatus']) {
          data.paramcode = 'CtrlFan1Start';
          deviceControlApi(data)
            .then((res) => {
              if (res.success) {
                if (globalConfig.History_Type == 'remote') {
                  message.success('指令已下发至生产管控平台成功！');
                } else {
                  message.success('指令已下发成功！');
                }
                modalTitle.value = '';
                modalIsShow.value = false;
              } else {
                message.error(res.message);
              }

              mainWindIsShow1.value = 'stop';
              mainWindIsShow2.value = 'open';
            })
            .catch((err) => {});
        } else if (selectData['Fan2StartStatus'] == '0' || !selectData['Fan2StartStatus']) {
          data.paramcode = 'CtrlFan2Start';
          deviceControlApi(data)
            .then((res) => {
              if (res.success) {
                if (globalConfig.History_Type == 'remote') {
                  message.success('指令已下发至生产管控平台成功！');
                } else {
                  message.success('指令已下发成功！');
                }
                modalTitle.value = '';
                modalIsShow.value = false;
              } else {
                message.error(res.message);
              }
              mainWindIsShow1.value = 'open';
              mainWindIsShow2.value = 'stop';
            })
            .catch((err) => {});
        }
        // // 一键倒机
        // if (mainWindIsShow1.value === 'open' && mainWindIsShow2.value === 'stop') {
        //   // playSmoke('startSmoke', 'down', frequency, 'open');
        //   data.paramcode = 'CtrlFan2Start';
        //   deviceControlApi(data).then((res) => {
        //     console.log('设备操作结果', res);
        //     modalTitle.value = '';
        //     modalIsShow.value = false;
        //   }).catch((err) => {

        //   });
        //   mainWindIsShow1.value = 'stop';
        //   mainWindIsShow2.value = 'open';
        // } else if (mainWindIsShow2.value === 'open' && mainWindIsShow1.value === 'stop') {
        //   // playSmoke('startSmoke', 'top', frequency, 'open');
        //   data.paramcode = 'CtrlFan1Start';
        //   deviceControlApi(data).then((res) => {
        //     console.log('设备操作结果', res);
        //     modalTitle.value = '';
        //     modalIsShow.value = false;
        //   }).catch((err) => {

        //   });
        //   mainWindIsShow1.value = 'open';
        //   mainWindIsShow2.value = 'stop';
        // } else if (mainWindIsShow1.value === 'stop' && mainWindIsShow2.value === 'stop') {
        //   // playSmoke(handType, '', frequency, 'stop');
        // }
      } else if (handType === 'changeFan') {
        data.paramcode = 'CtrlFanStart';
        deviceControlApi(data)
          .then((res) => {
            if (res.success) {
              if (globalConfig.History_Type == 'remote') {
                message.success('指令已下发至生产管控平台成功！');
              } else {
                message.success('指令已下发成功！');
              }
            } else {
              message.error(res.message);
            }
            modalTitle.value = '';
            modalIsShow.value = false;
          })
          .catch((err) => {});
      } else if (handType === 'fan1ToFan2') {
        data.paramcode = 'CtrlFan1ToFan2';
        deviceControlApi(data).then((res) => {
          if (res.success) {
            if (globalConfig.History_Type == 'remote') {
              message.success('指令已下发至生产管控平台成功！');
            } else {
              message.success('指令已下发成功！');
            }
            modalTitle.value = '';
            modalIsShow.value = false;
          } else {
            message.error(res.message);
          }
        });
      } else if (handType === 'fan2ToFan1') {
        data.paramcode = 'CtrlFan2ToFan1';
        deviceControlApi(data).then((res) => {
          if (res.success) {
            if (globalConfig.History_Type == 'remote') {
              message.success('指令已下发至生产管控平台成功！');
            } else {
              message.success('指令已下发成功！');
            }
            modalTitle.value = '';
            modalIsShow.value = false;
          } else {
            message.error(res.message);
          }
        });
      } else if (handType === 'gasAlarmSet') {
        if (passWord.value != '123456') {
          message.error('密码错误，请重新输入！');
          return;
        }
        if (gasWarningVal.value) {
          modalTitle.value = '';
          modalIsShow.value = false;
          setTimeout(() => {
            passWord.value = '';
            modalIsShow.value = true;
            controlType.value = 'toGkjc';
            modalTitle.value = '工况决策辅助';
          }, 500);
        } else {
          message.error('请核对瓦斯超限浓度值！');
        }
      } else if (handType === 'toGkjc') {
        if (passWord.value != '123456') {
          message.error('密码错误，请重新输入！');
          return;
        }
        //进行工况决策
        if (selectData.Fan1StartStatus == '1') {
          openAssistance(true, {
            // m3: selectData.m3 || 675.87,
            m3: 675.87,
            frequency: 30,
            // m3: 525.87,  //5.0测试数据
            // frequency: 35,
            // frequency: selectData.Fan1fHz || selectData.Fan1FreqHz || selectData.Fan1Loop_Frequency,
            gasWarningVal: gasWarningVal.value,
            isCompute: false,
          });
        } else if (selectData.Fan2StartStatus == '1') {
          openAssistance(true, {
            // m3: selectData.m3 || 675.87,
            m3: 675.87,
            frequency: 30,
            // frequency: selectData.Fan2fHz || selectData.Fan2FreqHz || selectData.Fan2Loop_Frequency,
            gasWarningVal: gasWarningVal.value,
            isCompute: false,
          });
        } else {
          // openAssistance(true, { m3: 635.04, dataDh: 5748 });
          openAssistance(true);
        }
        modalTitle.value = '';
        modalIsShow.value = false;
      } else if (handType === 'zhlk' || handType === 'gasOverSet') {
        if (targetVolume.value) {
          const params =
            handType === 'zhlk'
              ? { auto: 1, fanlocalId: selectData.deviceID, xufengliang: targetVolume.value }
              : { auto: 1, fanlocalId: selectData.deviceID, gasMax: gasWarningVal.value };
          autoAdjust(params).then(() => {
            if (res.success) {
              if (globalConfig.History_Type == 'remote') {
                message.success('指令已下发至生产管控平台成功！');
              } else {
                message.success('指令已下发成功！');
              }
              modalTitle.value = '';
              modalIsShow.value = false;
            } else {
              message.error(res.message);
            }
          });
        }
      }
    };
  }

  function cancel() {
    modalTitle.value = '';
    modalIsShow.value = false;
    gasWarningVal.value = 0;
  }

  function handleChangeSensor(value: string) {
    console.log(value);
  }

  function addPlayVideo() {
    if (player1.value && player1.value.play) {
      if (!player1.value.paused()) player1.value.play();
      document.body.removeEventListener('mousedown', addPlayVideo);
    }
  }

  onBeforeMount(() => {
    getDeviceBaseList();
  });

  onMounted(async () => {
    const { query } = unref(currentRoute);
    if (query['deviceType']) {
      devicekide.value = query['deviceType'] as string;
      deviceId.value = query['id'] as string;
    }

    mountedThree(player1.value).then(async () => {
      await getMonitor(true);
      nextTick(async () => {
        setModelType('fc');
        addCssText();
      });
    });
    await getCamera(deviceId.value, playerRef, renderPlayer);
    document.body.addEventListener('mousedown', addPlayVideo, false);
  });
  onBeforeUnmount(() => {
    removeCamera(playerRef);
  });
  onUnmounted(() => {
    destroy();
    if (timer) {
      clearTimeout(timer);
      timer = undefined;
    }
  });
</script>
<style scoped lang="less">
  @import '/@/design/theme.less';
  @import '/@/design/vent/modal.less';

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

  :deep(.zxm-tabs-content) {
    height: 100%;
  }

  @{theme-deepblue} {
    .scene-box {
      --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-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, #00deff22, #2081ff05);
    .title-text {
      height: 32px;
    }
  }

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

    .data-item {
      pointer-events: auto;

      .item-header {
        width: 374px;
        background: var(--image-lr-top-bg) no-repeat;
        background-size: auto;
        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: #00377c33;
        backdrop-filter: blur(2px);

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

          .tab-item {
            flex: 1;
            text-align: center;
            padding-top: 2px;
            color: #ffffff99;
            cursor: pointer;
          }

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

          .tab-item-active-r {
            color: var(--vent-font-action-link);
            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: 432px;
          background: var(--container-group-bg);
          max-height: 440px;
          overflow-y: auto;
        }

        .container-item {
          width: 100%;
          height: 60px;
          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 {
              font-size: 18px;
              margin: 10px 0 0 20px;
              color: #ffc800;
            }
          }

          .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;
            justify-content: center;
            align-items: center;

            .header-title {
              color: var(--vent-font-color);
              margin-top: 10px;
            }

            .header-value {
              // width: 133px;
              height: 36px;
              font-weight: 600;
              font-family: 'douyuFont';
              font-size: 16px;
              color: #ffa500;
              display: flex;
              justify-content: center;
              align-items: center;
              margin-top: 15px;
              margin-left: 8px;
            }
          }
        }

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

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

            .item-name {
              display: flex;
              align-items: center;

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

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

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

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

  .input-box {
    display: flex;
    align-items: center;

    .input-title {
      color: #73e8fe;
      width: auto;
    }

    margin-right: 10px;
  }

  .label {
    max-width: 220px;
  }

  #fanLocalSelectDom {
    :deep(.@{ventSpace}-select-dropdown) {
      left: 0px !important;
      top: 35px !important;
    }
  }

  .@{ventSpace}-input {
    width: 150px;
  }

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

  .to-right {
    :deep(#LivePlayerBox) {
      padding-right: 0px;
    }
  }

  :deep(.button-box) {
    position: relative;
    padding: 5px;
    // border: 1px transparent solid;
    border-radius: 5px;
    margin-left: 8px;
    margin-right: 8px;
    width: auto;
    // height: 40px;
    // border: 1px solid #65dbea;
    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;
    }
  }
</style>