vent-template/src/views/vent/monitorManager/gateMonitor/index.vue

<template>
  <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
    <a-spin :spinning="loading" />
    <div id="deviceDetail" class="device-detail">
      <div id="deviceCard" class="device-card" style="z-index: -1; position: absolute">
        <div class="title">KJ-980-F矿用本安型监控分站</div>
        <div class="detail-box">
          <div class="left-box"></div>
          <div class="right-box">
            <div><span class="detail-title">规格型号：</span> <span>KJ-980-F</span></div>
            <div
              ><span class="detail-title">技术参数：</span>
              <span
                >380V，电机功率22kW,50Hz，B级绝缘，额定电流42.2A，效率90.5%，能效等级3，接法角型，2940r/min，轴承6311/CM 6211/CM，功率因数0.89</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="damper3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
  </div>
  <div class="scene-box">
    <div class="top-box">
      <div class="top-center row">
        <div v-if="hasPermission('btn:control')" class="button-box" @click="playAnimation(1)">打开前门</div>
        <div v-if="hasPermission('btn:control')" class="button-box" @click="playAnimation(2)">关闭前门</div>
        <div v-if="hasPermission('btn:control') && selectData.ndoorcount == '3'" class="button-box" @click="playAnimation(8)">打开中间门</div>
        <div v-if="hasPermission('btn:control') && selectData.ndoorcount == '3'" class="button-box" @click="playAnimation(9)">关闭中间门</div>
        <div v-if="hasPermission('btn:control')" class="button-box" @click="playAnimation(3)">打开后门</div>
        <div v-if="hasPermission('btn:control')" class="button-box" @click="playAnimation(4)">关闭后门</div>
        <div v-if="hasPermission('btn:totalControl') || selectData['isShowGatesContrl'] == 1" class="button-box" @click="playAnimation(5)"
          >同时打开</div
        >
        <div v-if="hasPermission('btn:totalControl') || selectData['isShowGatesContrl'] == 1" class="button-box" @click="playAnimation(6)"
          >同时关闭</div
        >
        <template v-if="selectData['gateStyle'] && selectData['gateStyle'].includes('fm_fc')">
          <div v-if="hasPermission('btn:controlWindow')" class="button-box" @click="playAnimation(10)">A窗控制</div>
          <div v-if="hasPermission('btn:controlWindow')" class="button-box" @click="playAnimation(11)">B窗控制</div>
          <div v-if="hasPermission('btn:controlWindow')" class="button-box" @click="playAnimation(12)">C窗控制</div>
          <div v-if="hasPermission('btn:controlWindow')" class="button-box" @click="playAnimation(13)">D窗控制</div>
        </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="playAnimation(7)">切换模式</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="playAnimation(7, 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="playAnimation(7)">模式切换</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="playAnimation(7, item.value)" :key="index">{{ item.text }}</div>
        </div>

        <!-- <div class="run-type row">
          <div class="control-title">运行状态：</div>
          <a-radio-group v-model:value="selectData.runRoRecondition">
            <a-radio :value="`0`">检修</a-radio>
            <a-radio :value="`1`">运行</a-radio>
          </a-radio-group>
        </div> -->
      </div>
    </div>
    <div class="title-text">
      {{ selectData.supplyAirAddr || selectData.strinstallpos || selectData.strname }}
    </div>
    <div class="bottom-tabs-box" @mousedown="setDivHeight($event, 350, 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"
              @selectRow="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 === '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>
          <!-- 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"
              >
              </HistoryTableChart>
            </div>
          </a-tab-pane>
        </a-tabs>
      </dv-border-box8>
    </div>
  </div>
  <div ref="playerRef" style="z-index: 999; position: absolute; top: 100px; right: 15px; width: 300px; height: 280px; margin: auto"> </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 } 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 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 } from './gate.api';
import { chartsColumns } from './gate.data';
import lodash from 'lodash';
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 { defHttp } from '/@/utils/http/axios';
import BarAndLine from '/@/components/chart/BarAndLine.vue';
import HistoryTableChart from '../comment/HistoryTableChart.vue';
const { hasPermission } = usePermission();
const { sysOrgCode } = useGlobSetting();
const globalConfig = inject('globalConfig');

const { currentRoute } = useRouter();
const MonitorDataTable = ref();
let contrlValue = '';
const playerRef = ref();
const deviceType = ref('gate');
const activeKey = ref('1'); // tab
const loading = ref(false);
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,
  },
};
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(lodash.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;

  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;
    }
  } 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';
        // type = 'fmWindow';
      } 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'; // 液压
      }
    }
  }
  debugger;
  setModelType(type).then(async () => {
    addMonitorText(selectData);
    loading.value = false;
  });
  await getCamera(selectRow.deviceID, playerRef.value);
}

// 播放动画
function playAnimation(handlerState, data: any = null) {
  const value = data;
  switch (handlerState) {
    case 1: // 打开前门
      if (selectData.frontGateOpen == '0' && selectData.frontGateClose == '1') {
        modalTitle.value = '打开前门';
        modalType.value = '1';
        modalIsShow.value = true;
      } else {
        // message.warning('前门已经打开或正在打开,请勿重新操作');
        message.warning('没有监测到前门关到位,无法进行指令下发操作');
      }
      break;
    case 2: // 关闭前门
      if (selectData.frontGateOpen == '1' && selectData.frontGateClose == '0') {
        modalTitle.value = '关闭前门';
        modalType.value = '2';
        modalIsShow.value = true;
      } else {
        // message.warning('前门已经关闭或正在关闭,请勿重新操作');
        message.warning('没有监测到前门开到位,无法进行指令下发操作');
      }
      break;
    case 3: // 打开后门
      if (selectData.rearGateOpen == '0' && selectData.rearGateClose == '1') {
        modalTitle.value = '打开后门';
        modalType.value = '3';
        modalIsShow.value = true;
      } else {
        // message.warning('后门已经打开或正在打开,请勿重新操作');
        message.warning('没有监测到后门关到位,无法进行指令下发操作');
      }
      break;
    case 4: // 关闭后门
      if (selectData.rearGateOpen == '1' && selectData.rearGateClose == '0') {
        modalTitle.value = '关闭后门';
        modalType.value = '4';
        modalIsShow.value = true;
      } else {
        // message.warning('后门已经关闭或正在关闭,请勿重新操作');
        message.warning('没有监测到后门开到位,无法进行指令下发操作');
      }
      break;
    case 8: // 打开中间门
      if (selectData.midGateOpen == '0' && selectData.midGateClose == '1') {
        modalTitle.value = '打开中间门';
        modalType.value = '8';
        modalIsShow.value = true;
      } else {
        // message.warning('后门已经打开或正在打开,请勿重新操作');
        message.warning('没有监测到中间门关到位,无法进行指令下发操作');
      }
      break;
    case 9: // 关闭中间门
      if (selectData.midGateOpen == '1' && selectData.midGateClose == '0') {
        modalTitle.value = '关闭中间门';
        modalType.value = '9';
        modalIsShow.value = true;
      } else {
        // message.warning('后门已经关闭或正在关闭,请勿重新操作');
        message.warning('没有监测到中间门开到位,无法进行指令下发操作');
      }
      break;
    case 5: // 打开前后门
      if (selectData.frontGateOpen == '0' && selectData.frontGateClose == '1' && selectData.rearGateOpen == '0' && selectData.rearGateClose == '1') {
        modalTitle.value = '打开前后门';
        modalType.value = '5';
        modalIsShow.value = true;
      } else {
        // message.warning('前后门已经打开或正在打开,请勿重新操作');
        message.warning('没有监测到前门、后门关到位,无法进行指令下发操作');
      }
      break;
    case 6: // 关闭前后门
      if (selectData.frontGateOpen == '1' && selectData.frontGateClose == '0' && selectData.rearGateOpen == '1' && selectData.rearGateClose == '0') {
        modalTitle.value = '关闭前后门';
        modalType.value = '6';
        modalIsShow.value = true;
      } else {
        // message.warning('前后门已经关闭或正在关闭,请勿重新操作');
        message.warning('没有监测到前门、后门开到位,无法进行指令下发操作');
      }
      break;

    case 7: // 控制模式切换
      modalTitle.value = '控制模式切换';
      modalType.value = '7';
      modalIsShow.value = true;
      break;

    case 10: // 风窗控制
      modalTitle.value = 'A窗控制';
      modalType.value = '10';
      modalIsShow.value = true;
      break;

    case 11: // 风窗控制
      modalTitle.value = 'B窗控制';
      modalType.value = '11';
      modalIsShow.value = true;
      break;
    case 12: // 风窗控制
      modalTitle.value = 'C窗控制';
      modalType.value = '12';
      modalIsShow.value = true;
      break;
    case 13: // 风窗控制
      modalTitle.value = 'D窗控制';
      modalType.value = '13';
      modalIsShow.value = true;
      break;
  }

  if (globalConfig?.simulatedPassword) {
    handleOK('', handlerState + '');
  }
  contrlValue = value;
}
// 保德缺打开状态

// function playAnimation(handlerState, data: any = null) {
//   const value = data;
//   switch (handlerState) {
//     case 1: // 打开前门
//       modalTitle.value = '打开前门';
//       modalType.value = '1';
//       modalIsShow.value = true;
//       break;
//     case 2: // 关闭前门
//       modalTitle.value = '关闭前门';
//       modalType.value = '2';
//       modalIsShow.value = true;
//       break;
//     case 3: // 打开后门
//       modalTitle.value = '打开后门';
//       modalType.value = '3';
//       modalIsShow.value = true;
//       break;
//     case 4: // 关闭后门
//       modalTitle.value = '关闭后门';
//       modalType.value = '4';
//       modalIsShow.value = true;
//       break;
//     case 8: // 打开中间门
//       modalTitle.value = '打开中间门';
//       modalType.value = '8';
//       modalIsShow.value = true;
//       break;
//     case 9: // 关闭中间门
//       modalTitle.value = '关闭中间门';
//       modalType.value = '9';
//       modalIsShow.value = true;
//       break;
//     case 5: // 打开前后门
//       modalTitle.value = '打开前后门';
//       modalType.value = '5';
//       modalIsShow.value = true;
//       break;
//     case 6: // 关闭前后门
//       modalTitle.value = '关闭前后门';
//       modalType.value = '6';
//       modalIsShow.value = true;
//       break;

//     case 7: // 控制模式切换
//       modalTitle.value = '控制模式切换';
//       modalType.value = '7';
//       modalIsShow.value = true;
//       break;
//     case 10: // 风窗控制
//       modalTitle.value = '风窗控制';
//       modalType.value = '10';
//       modalIsShow.value = true;
//       break;
//   }

//   if (globalConfig?.simulatedPassword) {
//     handleOK('', handlerState + '');
//   }
//   contrlValue = value;
// }

function handleOK(passWord, handlerState, value?) {
  if (!passWord && !globalConfig?.simulatedPassword) {
    message.warning('请输入密码');
    return;
  }
  if (isOpenRunning) {
    message.warning('风门正在运行。。。');
    modalIsShow.value = false;
    return;
  }
  const data = {
    deviceid: selectData.deviceID,
    devicetype: selectData.deviceType,
    paramcode: '',
    value: contrlValue,
    password: passWord || globalConfig?.simulatedPassword,
    masterComputer: selectData.masterComputer,
  };
  let handler = () => {};
  debugger;

  switch (handlerState) {
    case '1': // 打开前门
      if (selectData.frontGateOpen == '0' && selectData.frontGateClose == '1') {
        handler = () => {
          frontDoorIsOpen.value = true;
        };
        data.paramcode = 'frontGateOpen_S';
      } else {
        message.warning('前门已打开。。。');
        modalIsShow.value = false;
      }
      break;
    case '2': // 关闭前门
      if (selectData.frontGateOpen == '1' && selectData.frontGateClose == '0') {
        handler = () => {
          frontDoorIsOpen.value = false;
        };
        data.paramcode = 'frontGateClose_S';
      } else {
        message.warning('前门已关闭。。。');
        modalIsShow.value = false;
      }
      break;
    case '3': // 打开后门
      if (selectData.rearGateOpen == '0' && selectData.rearGateClose == '1') {
        handler = () => {
          backDoorIsOpen.value = true;
        };
        data.paramcode = 'rearGateOpen_S';
      } else {
        message.warning('后门已打开。。。');
        modalIsShow.value = false;
      }
      break;
    case '4': // 关闭后门
      if (selectData.rearGateOpen == '1' && selectData.rearGateClose == '0') {
        handler = () => {
          backDoorIsOpen.value = false;
        };
        data.paramcode = 'rearGateClose_S';
      } else {
        message.warning('后门已关闭。。。');
        modalIsShow.value = false;
      }
      break;
    case '8': // 打开中间门
      if (selectData.midGateOpen == '0' && selectData.midGateClose == '1') {
        handler = () => {
          midDoorIsOpen.value = true;
        };
        data.paramcode = 'midGateOpen_S';
      } else {
        message.warning('中间风门已打开。。。');
        modalIsShow.value = false;
      }
      break;
    case '9': // 关闭中间门
      if (selectData.midGateOpen == '1' && selectData.midGateClose == '0') {
        handler = () => {
          midDoorIsOpen.value = false;
        };
        data.paramcode = 'midGateClose_S';
      } else {
        message.warning('中间风门已关闭。。。');
        modalIsShow.value = false;
      }
      break;
    case '5': // 打开前后门
      if (selectData.frontGateOpen == '0' && selectData.frontGateClose == '1' && selectData.rearGateOpen == '0' && selectData.rearGateClose == '1') {
        handler = () => {
          frontDoorIsOpen.value = true;
          backDoorIsOpen.value = true;
        };
        data.paramcode = 'sameTimeOpen';
      }
      break;
    case '6': // 关闭前后门
      if (selectData.frontGateOpen == '1' && selectData.frontGateClose == '0' && selectData.rearGateOpen == '1' && selectData.rearGateClose == '0') {
        handler = () => {
          frontDoorIsOpen.value = false;
          backDoorIsOpen.value = false;
        };
        data.paramcode = 'sameTimeClose';
      }
      break;
    case '7': // 远程与就地
      if (selectData.contrlMod == 'codeCtrl') {
        if (contrlValue == '1') {
          data.paramcode = 'autoRoManualControl1';
        } else if (contrlValue == '0') {
          data.paramcode = 'autoRoManualControl2';
        } else {
          data.paramcode = 'autoRoManualControl0';
        }
        data.value = '';
        selectData.autoRoManual = null;
      } else if (selectData.contrlMod == 'loopCtrl' || selectData.contrlMod == 'jnjhCtrl') {
        data.paramcode = 'autoRoManualControl';
        data.value = '';
        selectData.autoRoManual = null;
      } else {
        data.paramcode = 'autoRoManualControl';
        data.value = contrlValue;
        selectData.autoRoManual = null;
      }
      break;
    case '10': // 前(A)窗控制
      data.paramcode = 'frontSetValue1';
      data.value = value;
      break;
    case '11': // 后(B)窗控制
      data.paramcode = 'frontSetValue2';
      data.value = value;
      break;
    case '12': // 后(B)窗控制
      data.paramcode = 'rearSetValue1';
      data.value = value;
      break;
    case '13': // 后(B)窗控制
      data.paramcode = 'rearSetValue2';
      data.value = value;
      break;
  }

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

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

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

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

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

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

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

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

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

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

// // 远程、就地切换
// function changeType() {
//   const data = {
//     deviceid: selectData.deviceID,
//     devicetype: selectData.deviceType,
//     paramcode: 'autoRoManualControl',
//     value: selectData.autoRoManual,
//   };
//   deviceControlApi(data).then(() => {
//     if (globalConfig.History_Type == 'remote') {
//       message.success('指令已下发至生产管控平台成功！');
//     } else {
//       message.success('指令已下发成功！');
//     }
//   });
// }

// async function getDataSource() {
//   dataSource.value = [];
//   const params = await resetFormParam();
//   if (stationType.value !== 'redis') {
//     const result = await defHttp.get({ url: '/safety/ventanalyMonitorData/listdays', params: params });
//     if (result['datalist']['records'].length > 0) {
//       dataSource.value = result['datalist']['records'].map((item: any) => {
//         return Object.assign(item, item['readData']);
//       });
//     } else {
//       dataSource.value = [];
//     }
//   } else {
//     const result = await defHttp.post({ url: '/monitor/history/getHistoryData', params: params });
//     dataSource.value = result['records'] || [];
//   }
// }
onMounted(async () => {
  const { query } = unref(currentRoute);
  if (query['deviceType']) deviceType.value = query['deviceType'] as string;
  modelList.value = await getDictItems('gateModel');
  loading.value = true;
  const playerDom = document.getElementById('fm-player1')?.getElementsByClassName('vjs-tech')[0];
  debugger;
  mountedThree(playerDom)
    .then(async () => {
      if (sysOrgCode != 'zmhjhzmy') {
        await getMonitor(true);
        loading.value = false;
      } else {
        // 韩咀无风门设备,只有报警历史数据,无其他数据
        setModelType('fm1').then(async () => {
          loading.value = false;
          dataSource.value = [];
          addMonitorText(selectData);
        });
      }
    })
    .catch(() => {
      debugger;
    });
});

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

onUnmounted(() => {
  removeCamera();
  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>