mky-vent-base/src/views/vent/monitorManager/gateMonitor/index.vue

<template>
  <component ref="modelRef" :loading="loading" :is="modelComponent" />
  <div class="scene-box">
    <div class="top-box">
      <div class="top-center row">
        <div v-if="hasPermission('btn:control')" class="button-box" @click="setControl('frontGateOpen_S', '打开前门')">打开前门</div>
        <div v-if="hasPermission('btn:control')" class="button-box" @click="setControl('frontGateClose_S', '关闭前门')">关闭前门</div>
        <div v-if="hasPermission('btn:control_stop')" class="button-box" @click="setControl('frontGateStop_S', '暂停前门')">暂停前门</div>
        <div v-if="hasPermission('btn:control') && selectData.ndoorcount == '3'" class="button-box" @click="setControl('midGateOpen_S', '打开中间门')"
          >打开中间门
        </div>
        <div
          v-if="hasPermission('btn:control') && selectData.ndoorcount == '3'"
          class="button-box"
          @click="setControl('midGateClose_S', '关闭中间门')"
          >关闭中间门
        </div>
        <div
          v-if="hasPermission('btn:control') && (selectData.ndoorcount == '2' || selectData.ndoorcount == '3')"
          class="button-box"
          @click="setControl('rearGateOpen_S', '打开后门')"
          >打开后门
        </div>
        <div
          v-if="hasPermission('btn:control') && (selectData.ndoorcount == '2' || selectData.ndoorcount == '3')"
          class="button-box"
          @click="setControl('rearGateClose_S', '关闭后门')"
          >关闭后门
        </div>
        <div
          v-if="hasPermission('btn:control_stop') && (selectData.ndoorcount == '2' || selectData.ndoorcount == '3')"
          class="button-box"
          @click="setControl('rearGateStop_S', '暂停后门')"
          >暂停后门
        </div>
        <div
          v-if="
            hasPermission('btn:totalControl') ||
            (selectData['isShowGatesContrl'] == 1 && (selectData.ndoorcount == '2' || selectData.ndoorcount == '3'))
          "
          class="button-box"
          @click="setControl('sameTimeOpen', '同时打开')"
          >同时打开
        </div>
        <div
          v-if="
            hasPermission('btn:totalControl') ||
            (selectData['isShowGatesContrl'] == 1 && (selectData.ndoorcount == '2' || selectData.ndoorcount == '3'))
          "
          class="button-box"
          @click="setControl('sameTimeClose', '同时关闭')"
          >同时关闭
        </div>
        <template v-if="selectData['gateStyle'] && selectData['gateStyle'].includes('fm_fc')">
          <template v-if="selectData['nwindownum'] == 4">
            <div v-if="hasPermission('btn:controlWindow')" class="button-box" @click="setControl('frontSetValue1', 'A窗控制')">A窗控制</div>
            <div v-if="hasPermission('btn:controlWindow')" class="button-box" @click="setControl('frontSetValue2', 'B窗控制')">B窗控制</div>
            <div v-if="hasPermission('btn:controlWindow')" class="button-box" @click="setControl('rearSetValue1', 'C窗控制')">C窗控制</div>
            <div v-if="hasPermission('btn:controlWindow')" class="button-box" @click="setControl('rearSetValue2', 'D窗控制')">D窗控制</div>
          </template>
          <template v-if="selectData['nwindownum'] == 2">
            <div v-if="hasPermission('btn:controlWindow')" class="button-box" @click="setControl('frontSetValue', '前窗控制')">前窗控制</div>
            <div v-if="hasPermission('btn:controlWindow')" class="button-box" @click="setControl('rearSetValue', '后窗控制')">后窗控制</div>
          </template>
        </template>
      </div>
      <!-- 控制模式 -->
      <div class="top-right row" v-if="hasPermission('btn:remote')">
        <!--  -->
        <div class="vent-flex-m row" v-if="selectData.contrlMod == 'loopCtrl' && modelList.length > 0">
          <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" @click="setControlMode()">切换模式</div>
        </div>
        <!-- 控制指令是多个，每个状态需要下发单独的指令 -->
        <div class="vent-flex-m row" v-else-if="selectData.contrlMod == 'codeCtrl' && modelList.length > 0">
          <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="setControlMode(item.value)" :key="index"> {{ item.text }}</div>
        </div>
        <!-- 济南嘉鸿远程、就地、自动控制，自动切换，点位为true就是选中状态 -->
        <div class="vent-flex-m row" v-else-if="selectData.contrlMod == 'jnjhCtrl' && modelList.length > 0">
          <div class="control-title">控制模式：</div>
          <a-radio v-model:checked="selectData['autoRoManual']" :disabled="true">远程</a-radio>
          <a-radio v-model:checked="selectData['autoRoManual1']" :disabled="true">自动</a-radio>
          <a-radio v-model:checked="selectData['autoRoManual2']" :disabled="true">手动</a-radio>
          <div class="button-box" @click="setControlMode()">模式切换</div>
        </div>
        <div class="vent-flex-m row" v-else-if="modelList.length > 0">
          <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="setControlMode(item.value)" :key="index"> {{ item.text }}</div>
        </div>
      </div>
      <div v-if="hasPermission('gate:overhaul')" class="run-type row">
        <div class="control-title">是否检修：</div>
        <a-radio-group v-model:value="selectData.runRoRecondition" @change="changeOverhaul">
          <a-radio :value="`1`">是</a-radio>
          <a-radio :value="`0`">否</a-radio>
        </a-radio-group>
      </div>
      <div v-if="hasPermission('gata:manualAutoModeBtn')" class="vent-flex-m row">
        <div class="control-title"></div>
        <a-switch
          :checked="selectData.manualAutoMode_r"
          checked-children="手动"
          un-checked-children="自动"
          :checked-value="'1'"
          :un-checked-value="'0'"
          @change="handleSwitchChange"
        />
      </div>
    </div>
    <div class="title-text"> {{ selectData.supplyAirAddr || selectData.strinstallpos || selectData.strname }} </div>
    <div class="bottom-tabs-box" @mousedown="setDivHeight($event, 50, scroll)">
      <dv-border-box8 :dur="5" :style="`padding: 5px; height: ${scroll.y + 120}px`">
        <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
          <a-tab-pane v-if="!hasPermission('show:noMonitor')" key="1" tab="实时监测">
            <MonitorTable
              v-if="activeKey === '1'"
              ref="MonitorDataTable"
              class="monitor-table"
              :columnsType="deviceType"
              :isShowActionColumn="true"
              :dataSource="dataSource"
              design-scope="gate-monitor"
              @select-row="getSelectRow"
              :scroll="{ y: scroll.y - 40 }"
              title="风门监测"
              :isShowPagination="true"
            >
              <template #filterCell="{ column, record }">
                <a-tag v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == '0' && record.frontGateClose == '0'" color="red"
                  >正在运行
                </a-tag>
                <a-tag v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == '0' && record.frontGateClose == 1" color="default"
                  >关闭
                </a-tag>
                <a-tag v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == '1' && record.frontGateClose == '0'" color="#46C66F"
                  >打开
                </a-tag>
                <a-tag v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == '1' && record.frontGateClose == '1'" color="#FF0000"
                  >点位异常
                </a-tag>
                <a-tag v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == '0' && record.rearGateClose == '0'" color="red"
                  >正在运行
                </a-tag>
                <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == '0' && record.rearGateClose == '1'" color="default"
                  >关闭
                </a-tag>
                <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == '1' && record.rearGateClose == '0'" color="#46C66F"
                  >打开
                </a-tag>
                <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == '1' && record.rearGateClose == '1'" color="#FF0000"
                  >点位异常
                </a-tag>
                <a-tag v-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '0' && record.midGateClose == '0'" color="red"
                  >正在运行
                </a-tag>
                <a-tag v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '0' && record.midGateClose == 1" color="default"
                  >关闭
                </a-tag>
                <a-tag v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '1' && record.midGateClose == '0'" color="#46C66F"
                  >打开
                </a-tag>
                <a-tag v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '1' && record.midGateClose == '1'" color="#FF0000"
                  >点位异常
                </a-tag>
                <template v-if="column.dataIndex === 'ndoortype'">
                  <span>{{ render.renderDictText(record.ndoortype, 'ndoortype') }}</span>
                </template>
                <template v-if="column.dataIndex === 'doorUse'">
                  <span>{{ render.renderDictText(record.doorUse, 'doorUse') }}</span>
                </template>
                <template v-else-if="column.dataIndex === 'warnLevel'">
                  <a-tag v-if="record.warnLevel == '101'" color="green">低风险</a-tag>
                  <a-tag v-else-if="record.warnLevel == '102'" color="#FF5812">一般风险</a-tag>
                  <a-tag v-else-if="record.warnLevel == '103'" color="#FF5812">较大风险</a-tag>
                  <a-tag v-else-if="record.warnLevel == '104'" color="#FF5812">重大风险</a-tag>
                  <a-tag v-else-if="record.warnLevel == '201'" color="#FF0000">报警</a-tag>
                  <a-tag v-else-if="record.warnLevel == '10000'" color="#FF5812">数据超限</a-tag>
                  <a-tag v-else-if="record.warnLevel == '1001'" color="default">网络中断</a-tag>
                  <a-tag v-else color="green">正常</a-tag>
                </template>
                <a-tag v-else-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == '0' ? 'green' : 'red'">{{
                  record.warnFlag == '0' ? '正常' : '报警'
                }}</a-tag>
                <a-tag v-if="column.dataIndex === 'runRoRecondition'" :color="record.runRoRecondition == '1' ? '#f00' : 'green'">{{
                  record.runRoRecondition == '1' ? '检修' : '运行'
                }}</a-tag>
                <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
                  record.netStatus == '0' ? '断开' : '连接'
                }}</a-tag>
              </template>
              <template #action="{ record }">
                <a v-if="globalConfig?.showReport" class="table-action-link" @click="deviceEdit($event, 'reportInfo', record)">报表录入</a>
                <a class="table-action-link" @click="deviceEdit($event, 'deviceInfo', record)">设备编辑</a>
              </template>
            </MonitorTable>
          </a-tab-pane>
          <!-- <a-tab-pane key="2" tab="实时曲线图" force-render>
            <div class="tab-item" v-if="activeKey === '2'">
              <DeviceEcharts chartsColumnsType="gate_chart" xAxisPropType="strname" :dataSource="dataSource" height="100%"
                :chartsColumns="chartsColumns" :device-list-api="list" device-type="gate" />
            </div>
          </a-tab-pane> -->
          <a-tab-pane v-if="!hasPermission('show:noHistory')" key="3" tab="历史数据">
            <div class="tab-item" v-if="activeKey === '3'">
              <HistoryTable :columnsType="deviceType" :device-type="deviceType" designScope="gate-history" :scroll="scroll">
                <template #filterCell="{ column, record }">
                  <a-tag v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == '0' && record.frontGateClose == '0'" color="red"
                    >正在运行
                  </a-tag>
                  <a-tag v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == '0' && record.frontGateClose == 1" color="default"
                    >关闭
                  </a-tag>
                  <a-tag
                    v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == '1' && record.frontGateClose == '0'"
                    color="#46C66F"
                    >打开
                  </a-tag>
                  <a-tag
                    v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == '1' && record.frontGateClose == '1'"
                    color="#FF0000"
                    >点位异常
                  </a-tag>
                  <a-tag v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == '0' && record.rearGateClose == '0'" color="red"
                    >正在运行
                  </a-tag>
                  <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == '0' && record.rearGateClose == '1'" color="default"
                    >关闭
                  </a-tag>
                  <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == '1' && record.rearGateClose == '0'" color="#46C66F"
                    >打开
                  </a-tag>
                  <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == '1' && record.rearGateClose == '1'" color="#FF0000"
                    >点位异常
                  </a-tag>
                  <a-tag v-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '0' && record.midGateClose == '0'" color="red"
                    >正在运行
                  </a-tag>
                  <a-tag v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '0' && record.midGateClose == 1" color="default"
                    >关闭
                  </a-tag>
                  <a-tag v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '1' && record.midGateClose == '0'" color="#46C66F"
                    >打开
                  </a-tag>
                  <a-tag v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '1' && record.midGateClose == '1'" color="#FF0000"
                    >点位异常
                  </a-tag>
                  <template v-if="column.dataIndex === 'ndoortype'">
                    <span v-if="record.ndoortype == '0'">气动风门</span>
                    <span v-else color="default">液压风门</span>
                  </template>
                  <template v-if="column.dataIndex === 'doorUse'">
                    <span v-if="record.doorUse == 1" color="default">行车风门</span>
                    <span v-else-if="record.doorUse == 2">行人风门</span>
                    <span v-else-if="record.doorUse == 3">短路风门</span>
                    <span v-else-if="record.doorUse == 4">行车/短路风门</span>
                  </template>
                  <template v-else-if="column.dataIndex === 'warnLevel'">
                    <a-tag v-if="record.warnLevel == '101'" color="green">低风险</a-tag>
                    <a-tag v-else-if="record.warnLevel == '102'" color="#FF5812">一般风险</a-tag>
                    <a-tag v-else-if="record.warnLevel == '103'" color="#FF5812">较大风险</a-tag>
                    <a-tag v-else-if="record.warnLevel == '104'" color="#FF5812">重大风险</a-tag>
                    <a-tag v-else-if="record.warnLevel == '201'" color="#FF0000">报警</a-tag>
                    <a-tag v-else-if="record.warnLevel == '10000'" color="#FF5812">数据超限</a-tag>
                    <a-tag v-else-if="record.warnLevel == '1001'" color="default">网络中断</a-tag>
                    <a-tag v-else color="green">正常</a-tag>
                  </template>
                </template>
              </HistoryTable>
            </div>
          </a-tab-pane>
          <a-tab-pane v-if="!hasPermission('show:noAlarm')" key="4" tab="报警历史">
            <div class="tab-item" v-if="activeKey === '4'">
              <template v-if="sysOrgCode != 'zmhjhzmy'">
                <AlarmHistoryTable
                  columns-type="alarm"
                  :device-type="deviceType"
                  :device-list-api="getTableList"
                  designScope="alarm-history"
                  :scroll="scroll"
                >
                  <template #filterCell="{ column, record }">
                    <a-tag
                      v-if="column.dataIndex === 'warnFlag'"
                      :color="record.warnFlag == '0' ? 'green' : record.warnFlag == 1 ? '#FF5812' : 'gray'"
                    >
                      {{ record.warnFlag == '0' ? '正常' : record.warnFlag == 1 ? '报警' : record.warnFlag == 2 ? '断开' : '未监测' }}
                    </a-tag>
                    <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
                      record.netStatus == '0' ? '断开' : '连接'
                    }}</a-tag>
                  </template>
                </AlarmHistoryTable>
              </template>
              <template v-else>
                <AlarmHistoryTableHj :scroll="scroll" />
              </template>
            </div>
          </a-tab-pane>
          <a-tab-pane v-if="!hasPermission('show:noHandleHistory')" key="5" tab="操作历史">
            <div class="tab-item" v-if="activeKey === '5'">
              <HandlerHistoryTable
                columns-type="operator_history"
                :device-type="deviceType"
                :device-list-api="getTableList"
                designScope="operator_history"
                :scroll="scroll"
              />
            </div>
          </a-tab-pane>

          <a-tab-pane v-if="hasPermission('gate:list')" key="6" tab="风门故障统计分析">
            <div class="tab-item" v-if="activeKey === '6'">
              <WindDoorFaultTable :device-list-api="getOrderByCount" :device-type="deviceType" />
            </div>
          </a-tab-pane>

          <a-tab-pane v-if="hasPermission('gate:list')" key="7" tab="车辆损坏排查">
            <div class="tab-item" v-if="activeKey === '7'">
              <CarDamageTable :device-list-api="getCarList" :gateId="gateId" :device-type="deviceType" />
            </div>
          </a-tab-pane>

          <!-- v-if="sysOrgCode === 'sdmtjtswmk'" -->
          <a-tab-pane v-if="sysOrgCode === 'sdmtjtswmk'" key="2" tab="风门轴反馈推力曲线">
            <div class="tab-item" v-if="activeKey === '2'">
              <!-- <div class="history-chart">
                <BarAndLine
                  :charts-columns="chartsColumns"
                  chartsType="history"
                  :option="Option"
                  :data-source="sharedData"
                  height="290px"
                  :x-axis-prop-type="stationType !== 'redis' ? 'ttime' : 'time'"
                />
              </div> -->
              <HistoryTableChart
                chartsColumnsType="gate_chart"
                :dataSource="sharedData"
                height="100%"
                :chartsColumns="chartsColumns"
                device-type="gate"
                :is-show-child-type="true"
              />
            </div>
          </a-tab-pane>
        </a-tabs>
      </dv-border-box8>
    </div>
  </div>
  <div
    v-if="renderPlayer"
    ref="playerRef"
    style="
      z-index: 1;
      position: absolute;
      top: 100px;
      right: 0px;
      width: 100%;
      height: 800px;
      pointer-events: none;
      overflow-y: auto;
      flex-direction: column;
    "
  >
  </div>
  <LivePlayer
    id="fm-player1"
    style="height: 220px; width: 300px; position: absolute; top: 0px; z-index: -1"
    ref="player1"
    :videoUrl="flvURL1()"
    muted
    live
    loading
    controls
  />
  <HandleModal
    v-if="!globalConfig?.simulatedPassword"
    :modal-is-show="modalIsShow"
    :modal-title="modalTitle"
    :modal-type="modalType"
    @handle-ok="handleOK"
    @handle-cancel="handleCancel"
  />
  <DeviceBaseInfo @register="registerModal" :device-type="selectData['deviceType']" />
</template>

<script setup lang="ts">
  import { onBeforeUnmount, onUnmounted, onMounted, ref, reactive, nextTick, inject, unref, defineAsyncComponent, provide } from 'vue';
  import MonitorTable from '../comment/MonitorTable.vue';
  import HistoryTable from '../comment/HistoryTable.vue';
  import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
  import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
  import WindDoorFaultTable from './components/WindDoorFaultTable.vue';
  import CarDamageTable from './components/CarDamageTable.vue';
  import AlarmHistoryTableHj from './components/AlarmHistoryTableHj.vue';
  import HandleModal from './modal.vue';
  import DeviceBaseInfo from '../comment/components/DeviceBaseInfo.vue';
  import { mountedThree, addMonitorText, play, destroy, setModelType, computePlay } from './gate.threejs';
  import { deviceControlApi } from '/@/api/vent/index';
  import { message } from 'ant-design-vue';
  import { list, getTableList, cameraList, cameraAddrList, getOrderByCount, getCarList } from './gate.api';
  import { chartsColumns, getModelComponent } from './gate.data';
  import { cloneDeep } from 'lodash-es';
  import { setDivHeight } from '/@/utils/event';
  import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
  import { useRouter } from 'vue-router';
  import LivePlayer from '@liveqing/liveplayer-v3';
  import { useModal } from '/@/components/Modal';
  import { useCamera } from '/@/hooks/system/useCamera';
  import { usePermission } from '/@/hooks/web/usePermission';
  import { getDictItems } from '/@/api/common/api';
  import { render } from '/@/utils/common/renderUtils';
  import { useGlobSetting } from '/@/hooks/setting';
  import { getDictItemsByCode } from '/@/utils/dict';
  import HistoryTableChart from '../comment/HistoryTableChart.vue';

  const { hasPermission } = usePermission();
  const { sysOrgCode } = useGlobSetting();
  const globalConfig = inject<any>('globalConfig');

  const modelRef = ref();
  /** 模型对应的组件，根据实际情况分为二维三维 */
  const modelComponent = getModelComponent(globalConfig.is2DModel);

  const { currentRoute } = useRouter();
  const gateId = ref(''); //风门ID
  const MonitorDataTable = ref();
  let contrlValue = '';
  const playerRef = ref();
  const deviceType = ref('gate');
  const activeKey = ref('1'); // tab
  const loading = ref(false);
  const renderPlayer = ref(true);
  // const stationType = ref('plc1');
  const scroll = reactive({
    y: 230,
  });
  const modelList = ref<{ text: string; value: string }[]>([]);
  const frontDoorIsOpen = ref(false); //前门是否开启
  const backDoorIsOpen = ref(false); //后门是否开启
  const midDoorIsOpen = ref(false); //中间门是否开启

  const modalIsShow = ref<boolean>(false); // 是否显示模态框
  const modalTitle = ref(''); // 模态框标题显示内容，根据设备操作类型决定
  const modalType = ref(''); // 模态框内容显示类型，设备操作类型

  const selectRowIndex = ref(-1); // 选中行
  const dataSource = ref([]);
  const sharedData = ref([]);
  const deviceBaseList = ref([]); // 设备基本信息
  const updateSharedData = (data) => {
    sharedData.value = data;
  };
  const Option = {
    grid: {
      top: '20%',
      left: '5%',
      right: '5%',
      bottom: '3%',
      containLabel: true,
    },
    toolbox: {
      feature: null,
    },
  };

  /** 封装通用的模态框打开方法（setControl 模式：点位code直接传参） */
  const openGateControlModal = (paramcode: string, title: string) => {
    modalType.value = paramcode;
    modalTitle.value = title;
    modalIsShow.value = true;

    // 模拟密码模式下直接执行操作
    if (globalConfig?.simulatedPassword) {
      handleOK('', paramcode);
    }
  };

  /** 统一控制入口：点位code + 标题 直接传参（与 windowMonitor 的 setControl 模式一致） */
  const setControl = (paramcode: string, title: string) => {
    openGateControlModal(paramcode, title);
  };

  /** 控制模式切换（paramcode 需根据 contrlMod + contrlValue 动态决定） */
  const setControlMode = (value?: string) => {
    contrlValue = value;
    openGateControlModal('modeSwitch', '控制模式切换');
  };

  const [registerModal, { openModal, closeModal }] = useModal();

  const { getCamera, removeCamera } = useCamera();

  const tabChange = (activeKeyVal) => {
    activeKey.value = activeKeyVal;
    if (activeKeyVal == 1) {
      nextTick(() => {
        if (MonitorDataTable.value) MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID]);
      });
    }
  };

  const initData = {
    deviceID: '',
    deviceType: '',
    strname: '',
    frontRearDP: '-', //压差
    // sourcePressure: '-', //气源压力
    runRoRecondition: null,
    autoRoManual: null,
    netStatus: '0', //通信状态
    frontGateOpen: '0',
    frontGateClose: '1',
    rearGateOpen: '0',
    rearGateClose: '1',
    midGateOpen: '0',
    midGateClose: '1',
    fault: '气源压力超限',
    masterComputer: 0,
    frontGateOpenCtrl: false,
    rearGateOpenCtrl: false,
    cameras: [],
  };

  // 监测数据
  const selectData = reactive(cloneDeep(initData));

  const flvURL1 = () => {
    // return ''
    return `/video/gate.mp4`;
  };

  function deviceEdit(e: Event, type: string, record) {
    e.stopPropagation();
    openModal(true, {
      type,
      deviceId: record['deviceID'],
    });
  }
  // 获取设备基本信息列表
  function getDeviceBaseList() {
    getTableList({ pageSize: 1000 }).then((res) => {
      deviceBaseList.value = res.records;
    });
  }

  // https获取监测数据
  let timer: null | NodeJS.Timeout = null;
  async function getMonitor(flag?) {
    if (Object.prototype.toString.call(timer) === '[object Null]') {
      timer = await setTimeout(
        async () => {
          const res = await list({ devicetype: deviceType.value, pagetype: 'normal' });
          if (res.msgTxt && res.msgTxt[0]) {
            dataSource.value = res.msgTxt[0].datalist || [];
            dataSource.value.forEach((data: any) => {
              const readData = data.readData;
              data = Object.assign(data, readData);
            });
            if (dataSource.value.length > 0 && selectRowIndex.value == -1 && MonitorDataTable.value) {
              // 初始打开页面
              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']]);
              }
            }
            Object.assign(selectData, dataSource.value[selectRowIndex.value]);
            if (selectData.contrlMod == 'jnjhCtrl') {
              selectData['autoRoManual'] = selectData['autoRoManual'] == 1 ? true : false;
              selectData['autoRoManual1'] = selectData['autoRoManual1'] == 1 ? true : false;
              selectData['autoRoManual2'] = selectData['autoRoManual2'] == 1 ? true : false;
            }
            addMonitorText(selectData);
            monitorAnimation(selectData);
            if (timer) {
              timer = null;
            }
            getMonitor();
          }
        },
        flag ? 0 : 1000
      );
    }
  }

  // 切换检测数据
  async function getSelectRow(selectRow, index) {
    if (!selectRow) return;
    loading.value = true;
    selectRowIndex.value = index;
    gateId.value = selectRow.deviceID;
    const baseData: any = deviceBaseList.value.find((baseData: any) => baseData.id === selectRow.deviceID);
    Object.assign(selectData, initData, selectRow, baseData);
    isFrontOpenRunning = false; //开关门动作是否在进行
    isRearOpenRunning = false; //开关门动作是否在进行
    isMidOpenRunning = false; //开关门动作是否在进行
    frontDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
    rearDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
    midDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较

    let type;
    const dictCodes = getDictItemsByCode('gateStyle');
    if (selectData && dictCodes && dictCodes.length > 0) {
      const gateStyle = selectData['gateStyle'];
      switch (gateStyle) {
        case 'gate_qd':
          type = 'fm3';
          break;
        case 'fmtl3':
          type = 'fmThreeTl';
          break;
        case 'fmSs':
          type = 'fmTwoSs';
          break;
        case 'fm_fc':
          type = 'fmWindow';
          break;
        case 'fmXr':
          type = 'fmXr';
          break;
        case 'fmYy':
          type = 'fm1';
          break;
        case 'fmSs3':
          type = 'fm2';
          break;
        case 'fm_fc_hjg':
          type = 'fmWindowHjg';
          break;
        case 'fm_fc_zhq':
          type = 'fmWindowZhq';
          break;
        default:
          type = gateStyle;
      }
    } else {
      type = selectData.nwindownum == 1 ? 'singleWindow' : 'doubleWindow';
      if (selectData['doorUse'] == 2) {
        type = 'fmXr';
      } else if (selectData.ndoorcount == '3' || selectData.deviceType == 'gate_nomal3') {
        type = 'fmThreeTl';
      } else {
        if (selectData.deviceType == 'gate_ss') {
          type = 'fm2';
        } else if (selectData.deviceType == 'gate_qd' || selectData.deviceType == 'gate_normal') {
          type = 'fm3';
        } else if (selectData.deviceType == 'gate_ss_two' || selectData.deviceType == 'gate_ss_two1') {
          type = 'fmTwoSs';
        } else if (selectData.deviceType == 'gate_tj') {
          type = 'fmWindow';
        } else {
          type = 'fm1'; // 液压
        }
      }
    }

    await setSVGModelType(type);
    await setModelType(type);
    addMonitorText(selectData);
    // playAnimation(selectRow, selectData.value.maxarea, true);
    loading.value = false;
    await getCamera(selectRow.deviceID, playerRef, renderPlayer);
  }

  /** 检修切换 */
  const changeOverhaul = (e) => {
    // 检修值需要在打开模态框前设置（handleOK 中按 toggle 逻辑计算下发值）
    openGateControlModal('overhaul', '检修控制');
    contrlValue = e;
  };

  /** 统一下发控制指令（仿 windowMonitor 模式：handlerState 即点位code，特殊情况单独判断） */
  function handleOK(passWord, handlerState, value?) {
    if (!passWord && !globalConfig?.simulatedPassword) {
      message.warning('请输入密码');
      return;
    }

    const data = {
      deviceid: selectData.deviceID,
      devicetype: selectData.deviceType,
      paramcode: '',
      value: value ?? null,
      password: passWord || globalConfig?.simulatedPassword,
      masterComputer: selectData.masterComputer,
    };

    // 特殊：控制模式切换（paramcode 根据 contrlMod + contrlValue 动态决定）
    if (handlerState === 'modeSwitch') {
      if (selectData.contrlMod == 'codeCtrl') {
        if (contrlValue == '1') {
          data.paramcode = 'autoRoManualControl1';
        } else if (contrlValue == '0') {
          data.paramcode = 'autoRoManualControl2';
        } else {
          data.paramcode = 'autoRoManualControl0';
        }
        data.value = '';
      } else if (selectData.contrlMod == 'loopCtrl' || selectData.contrlMod == 'jnjhCtrl') {
        data.paramcode = 'autoRoManualControl';
        data.value = '';
      } else {
        data.paramcode = 'autoRoManualControl';
        data.value = contrlValue;
      }
      selectData.autoRoManual = null;
    }
    // 特殊：检修控制（value 取反 toggle）
    else if (handlerState === 'overhaul') {
      data.paramcode = 'runRoRecondition_S';
      data.value = selectData['runRoRecondition'] == 0 ? '1' : '0';
    }
    // 默认：handlerState 即点位code（setControl 直接传参）
    else {
      data.paramcode = handlerState;
      data.value = value ?? contrlValue;
    }

    if (data.paramcode) {
      deviceControlApi(data)
        .then((res) => {
          if (res.success) {
            modalIsShow.value = false;
            if (globalConfig.History_Type == 'remote') {
              message.success('指令已下发至生产管控平台成功！');
            } else {
              message.success('指令已下发成功！');
            }
          } else {
            message.error(res.message);
          }
          contrlValue = '';
        })
        .catch(() => {
          message.error('控制异常，请排查问题。。。');
          contrlValue = '';
        });
    }
  }
  let isOpenRunning = false; //开关门动作是否在进行
  /** 开关门动画调用 */
  let isFrontOpenRunning = false; //开关门动作是否在进行
  // let isFrontCloseRunning = false; //开关门动作是否在进行
  let isRearOpenRunning = false; //开关门动作是否在进行
  // let isRearCloseRunning = false; //开关门动作是否在进行
  let isMidOpenRunning = false; //中间门动作是否在进行
  // let isMidCloseRunning = false; //中间门动作是否在进行
  // 0 关闭 1 正在打开 2 打开 3正在关闭
  let frontDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
  let rearDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
  let midDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较

  function monitorAnimation(selectData) {
    const timeScale = 0.005;
    // 带风窗 风窗动画
    if (selectData['gateStyle'] && selectData['gateStyle'].includes('fm_fc')) playWindowAnimation(selectData);

    if (selectData.frontGateOpen == '1' && selectData.frontGateClose == '0' && !isFrontOpenRunning) {
      isFrontOpenRunning = true;
      if (frontDeviceState != 1) {
        // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(1, timeScale) : play(1);
        play(1, timeScale);
        frontDeviceState = 1;
        frontDoorIsOpen.value = false;
        backDoorIsOpen.value = true;
      }
    }

    if (selectData.frontGateOpen == '0' && selectData.frontGateClose == '0' && !isFrontOpenRunning) {
      isFrontOpenRunning = true;
      if (frontDeviceState != 1) {
        // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(1, timeScale) : play(1);
        play(1, timeScale);
        frontDeviceState = 1;
        frontDoorIsOpen.value = false;
        backDoorIsOpen.value = true;
      }
    }

    if (selectData.frontGateClose == '1' && selectData.frontGateOpen == '0' && isFrontOpenRunning) {
      isFrontOpenRunning = false;
      if (frontDeviceState != 0) {
        // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(2, timeScale) : play(2);
        play(2, timeScale);
        frontDeviceState = 0;
        frontDoorIsOpen.value = false;
        // backDoorIsOpen.value = false
      }
    }
    if (selectData.rearGateOpen == '1' && selectData.rearGateClose == '0' && !isRearOpenRunning) {
      isRearOpenRunning = true;

      if (rearDeviceState != 1) {
        // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(3, timeScale) : play(3);
        play(3, timeScale);
        rearDeviceState = 1;
        backDoorIsOpen.value = false;
        frontDoorIsOpen.value = true;
      }
    }
    if (selectData.rearGateOpen == '0' && selectData.rearGateClose == '0' && !isRearOpenRunning) {
      isRearOpenRunning = true;

      if (rearDeviceState != 1) {
        // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(3, timeScale) : play(3);
        play(3, timeScale);
        rearDeviceState = 1;
        backDoorIsOpen.value = false;
        frontDoorIsOpen.value = true;
      }
    }

    if (selectData.rearGateClose == '1' && selectData.rearGateOpen == '0' && isRearOpenRunning) {
      isRearOpenRunning = false;
      if (rearDeviceState != 0) {
        // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(4, timeScale) : play(4);
        play(4, timeScale);
        rearDeviceState = 0;
        backDoorIsOpen.value = false;
      }
    }

    if (selectData.midGateOpen == '1' && selectData.midGateClose == '0' && !isMidOpenRunning) {
      isMidOpenRunning = true;

      if (midDeviceState != 1) {
        // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(3, timeScale) : play(3);
        play(8, timeScale);
        midDeviceState = 1;
        backDoorIsOpen.value = false;
        frontDoorIsOpen.value = true;
      }
    }

    if (selectData.midGateOpen == '0' && selectData.midGateClose == '0' && !isMidOpenRunning) {
      isMidOpenRunning = true;

      if (midDeviceState != 1) {
        // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(3, timeScale) : play(3);
        play(8, timeScale);
        midDeviceState = 1;
        backDoorIsOpen.value = false;
        frontDoorIsOpen.value = true;
      }
    }

    if (selectData.midGateClose == '1' && selectData.midGateOpen == '0' && isMidOpenRunning) {
      isMidOpenRunning = false;
      if (midDeviceState != 0) {
        // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(4, timeScale) : play(4);
        play(9, timeScale);
        midDeviceState = 0;
        backDoorIsOpen.value = false;
      }
    }

    modelRef.value?.animate?.(selectData.frontGateOpen == '1', selectData.midGateOpen == '1', selectData.rearGateOpen == '1');
  }

  function playWindowAnimation(data, maxarea = 90, isFirst = false) {
    computePlay(data, maxarea, isFirst);
  }

  function handleCancel() {
    modalIsShow.value = false;
    modalTitle.value = '';
    modalType.value = '';
  }

  const handleSwitchChange = (checked: boolean) => {
    contrlValue = checked;
    setControl('manualAutoMode_w', '手动/自动模式切换');
  };

  function setSVGModelType(type) {
    modelComponent.value = getModelComponent(globalConfig.is2DModel, type);
    return nextTick();
  }

  onMounted(async () => {
    const { query } = unref(currentRoute);
    if (query['deviceType']) deviceType.value = query['deviceType'] as string;
    modelList.value = await getDictItems('gateModel');
    if (globalConfig.is2DModel) {
      await getMonitor(true);
    } else {
      loading.value = true;
      // const playerDom = document.getElementById('fm-player1')?.getElementsByClassName('vjs-tech')[0];
      mountedThree()
        .then(async () => {
          if (sysOrgCode != 'zmhjhzmy') {
            await getMonitor(true);
            loading.value = false;
          } else {
            // 韩咀无风门设备,只有报警历史数据,无其他数据
            setModelType('fm1').then(async () => {
              loading.value = false;
              dataSource.value = [];
              addMonitorText(selectData);
            });
          }
        })
        .catch((e) => {
          console.log(e);
        });
    }
  });

  onBeforeUnmount(() => {
    removeCamera(playerRef);
    getDeviceBaseList();
  });

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

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

  .scene-box {
    .bottom-tabs-box {
      height: 350px;
    }
  }

  .button-box {
    border: none !important;
    height: 34px !important;

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

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

  ::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #4288a444;
  }

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

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

  :deep(.@{ventSpace}-picker-datetime-panel) {
    height: 200px !important;
    overflow-y: auto !important;
  }
</style>