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

<template>
  <component ref="modelRef" :loading="loading" :is="modelComponent" />
  <div class="scene-box">
    <div class="top-box">
      <div class="top-center" style="display: flex">
        <div class="row" v-if="Number(selectData.nwindownum) == 2">
          <div v-if="hasPermission('window:AreaControl')" class="button-box" @click="setArea(1)">设定前窗面积</div>
          <div v-if="hasPermission('window:AreaControl')" class="button-box" @click="setArea(2)">设定后窗面积</div>
          <div v-if="hasPermission('window:showAngle')" class="button-box" @click="setAngle(1)">设定前窗角度</div>
          <div v-if="hasPermission('window:showAngle')" class="button-box" @click="setAngle(2)">设定后窗角度</div>
          <div v-if="hasPermission('window:twoAreaControl')" class="button-box" @click="setControl('1', '窗1面积设定')">窗1面积设定</div>
          <div v-if="hasPermission('window:twoAreaControl')" class="button-box" @click="setControl('2', '窗2面积设定')">窗2面积设定</div>
          <div v-if="hasPermission('window:twoAngleControl')" class="button-box" @click="setControl('1', '窗1角度设定')">窗1角度设定</div>
          <div v-if="hasPermission('window:twoAngleControl')" class="button-box" @click="setControl('2', '窗2角度设定')">窗2角度设定</div>
          <!-- 展会功能 -->
          <!-- <div v-if="hasPermission('window:ldkz')" class="button-box" @click="setArea(3)">自主联动控制开启</div>
          <div v-if="hasPermission('window:ldkz')" class="button-box" @click="setArea(4)">自主联动控制停止</div> -->
        </div>
        <div class="row" v-if="hasPermission('window:fourAreaControl') && Number(selectData.nwindownum) == 4">
          <div class="button-box" @click="setControl('frontSetValue1', '前窗1面积设置')">前窗1面积</div>
          <div class="button-box" @click="setControl('frontSetValue2', '前窗2面积设置')">前窗2面积</div>
          <div class="button-box" @click="setControl('frontSetValue3', '后窗1面积设置')">后窗1面积</div>
          <div class="button-box" @click="setControl('frontSetValue4', '后窗2面积设置')">后窗2面积</div>
        </div>
        <div class="row" v-if="hasPermission('window:threeAreaControl') && Number(selectData.nwindownum) == 3">
          <div class="button-box" @click="setControl('frontSetValue', '前窗面积设置')">前窗面积设定</div>
          <div class="button-box" @click="setControl('middleSetValue', '中间窗面积设置')">中间窗面积设定</div>
          <div class="button-box" @click="setControl('rearSetValue', '后窗面积设置')">后窗面积设定</div>
        </div>
        <div class="row" v-if="Number(selectData.nwindownum) == 1">
          <div v-if="hasPermission('window:AreaControl')" class="button-box" @click="setArea(1)">设定风窗面积</div>
          <div v-if="hasPermission('window:showAngle')" class="button-box" @click="setAngle(1)">设定风窗角度</div>
          <div v-if="hasPermission('window:showAngleArea')" class="button-box" @click="setAngle(1)">设定风窗面积</div>
          <div v-if="hasPermission('window:showAddArea')" class="button-box" @click="setControl('addSetValue', '增加面积设置')">增加面积</div>
          <div v-if="hasPermission('window:showAddArea')" class="button-box" @click="setControl('deSetValue', '减少面积设置')">减少面积</div>
        </div>
        <div class="row" v-if="hasPermission('window:gateControl') && Number(selectData.ndoorcount) == 2">
          <div class="button-box" @click="setControl('frontGateOpen_S', '打开前门')">打开前门</div>
          <div class="button-box" @click="setControl('frontGateClose_S', '关闭前门')">关闭前门</div>
          <div class="button-box" @click="setControl('rearGateOpen_S', '打开后门')">打开前门</div>
          <div class="button-box" @click="setControl('rearGateClose_S', '关闭后门')">关闭前门</div>
        </div>
        <div class="row" v-if="hasPermission('window:gateControl') && Number(selectData.ndoorcount) == 1">
          <div class="button-box" @click="setControl('frontGateOpen_S', '打开门')">打开门</div>
          <div class="button-box" @click="setControl('frontGateClose_S', '关闭门')">关闭门</div>
        </div>
        <div v-if="hasPermission('window:sameSet')" class="button-box" @click="setControl('sameSetValue', '风窗面积设置')">设定风窗面积</div>
        <div v-if="hasPermission('window:COTest')" class="button-box" @click="setControl('COTest', 'CO调控预测')">CO调控预测</div>
      </div>
      <div class="top-right row">
        <div v-if="hasPermission('window:zhldkz')" class="button-box" @click="setControl('autoRun', '开启自主调控')">开启自主调控</div>
        <div v-if="hasPermission('window:zhldkz')" class="button-box" @click="setControl('autoStop', '关闭自主调控')">关闭自主调控</div>
        <div v-if="hasPermission('window:ldkz')" class="button-box" @click="setArea(7)">风窗自主调控</div>
        <div v-if="hasPermission('window:gasldkz')" class="button-box" @click="setArea('ldkzStart')">瓦斯超限调控开启</div>
        <div v-if="hasPermission('window:controlFull')" class="button-box" @click="setArea(5)">一键全开</div>
        <div v-if="hasPermission('window:controlFull')" class="button-box" @click="setArea(6)">一键全关</div>
        <div class="row" v-if="hasPermission('window:fourFlControl') && Number(selectData.nwindownum) == 4">
          <div class="button-box" @click="setControl('air1', '前窗1风量设置')">设定前窗1风量</div>
          <div class="button-box" @click="setControl('air2', '前窗2风量设置')">设定前窗2风量</div>
          <div class="button-box" @click="setControl('air3', '后窗1风量设置')">设定后窗1风量</div>
          <div class="button-box" @click="setControl('air4', '后窗2风量设置')">设定后窗2风量</div>
        </div>
        <!-- 展会功能 -->
        <!-- <div v-if="hasPermission('window:ldkz')" class="button-box" @click="setArea('ldkzStart')">自主联动控制开启</div>
        <div v-if="hasPermission('window:ldkz')" class="button-box" @click="setArea('ldkzStop')">自主联动控制停止</div> -->
        <!-- <div class="button-box" @click="() => (linkAlarmShow = true)">预警指标</div> -->
        <!-- <div class="control-type row">
          <div class="control-title">控制模式：</div>
          <a-radio-group v-model:value="controlType">
            <a-radio :value="1">就地</a-radio>
            <a-radio :value="2">远程</a-radio>
          </a-radio-group>
        </div> -->
        <!-- <div class="run-type row">
          <div class="control-title">运行状态：</div>
          <a-radio-group v-model:value="controlType">
            <a-radio :value="1">检修</a-radio>
          </a-radio-group>
        </div>
        <div class="run-state row">
          <div class="control-title">网络状态：</div>
          <a-radio-group v-model:value="controlType">
            <a-radio :value="1">运行</a-radio>
          </a-radio-group>
        </div> -->
      </div>
    </div>
    <div class="title-text">
      {{ 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 key="1" tab="实时监测">
            <MonitorTable
              v-if="activeKey === '1'"
              ref="MonitorDataTable"
              :columnsType="deviceType"
              :dataSource="dataSource"
              @select-row="getSelectRow"
              design-scope="window-monitor"
              :scroll="{ y: scroll.y - 40 }"
              title="风窗监测"
              :isShowPagination="true"
              :isShowActionColumn="true"
            >
              <template #filterCell="{ column, record }">
                <a-tag v-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' ? 'default' : 'green'">{{
                  record.netStatus == '0' ? '断开' : '连接'
                }}</a-tag>
                <div v-if="record.nwindownum == 1 && column.dataIndex === 'rearArea'">/</div>
              </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="window_chart"
                xAxisPropType="strname"
                :dataSource="dataSource"
                height="100%"
                :chartsColumns="chartsColumns"
                :device-list-api="baseList"
                device-type="window"
              />
            </div>
          </a-tab-pane> -->
          <a-tab-pane key="3" tab="历史数据">
            <div class="tab-item" v-if="activeKey === '3'">
              <HistoryTable :columns-type="deviceType" :device-type="deviceType" designScope="window-history" :scroll="scroll">
                <template #filterCell="{ column, record }">
                  <!-- <a-tag v-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' ? 'default' : 'green'">{{
                    record.netStatus == '0' ? '断开' : '连接'
                  }}</a-tag> -->
                  <div v-if="record.nwindownum == 1 && column.dataIndex === 'rearArea'">/</div>
                </template>
              </HistoryTable>
            </div>
          </a-tab-pane>
          <a-tab-pane key="4" tab="报警历史">
            <div class="tab-item" v-if="activeKey === '4'">
              <AlarmHistoryTable
                columns-type="alarm"
                :device-type="deviceType"
                :device-list-api="baseList"
                designScope="alarm-history"
                :scroll="scroll"
              />
            </div>
          </a-tab-pane>
          <a-tab-pane key="5" tab="操作历史">
            <div class="tab-item" v-if="activeKey === '5'">
              <HandlerHistoryTable
                columns-type="operator_history"
                :device-type="deviceType"
                :device-list-api="baseList"
                designScope="alarm-history"
                :scroll="scroll"
              />
            </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="fc-player1"
    style="height: 220px; width: 300px; position: absolute; top: 0px; z-index: -1"
    ref="player1"
    :videoUrl="flvURL1()"
    muted
    loading
    autoplay
    controls
    loop
    fluent
  />
  <HandleModal :modal-is-show="modalIsShow" :modal-title="modalTitle" :modal-type="modalType" @handle-ok="handleOK" @handle-cancel="handleCancel" />
  <DeviceBaseInfo @register="regModal" :device-type="deviceType" />
  <LinkControlDesModal
    :modal-is-show="linkAlarmShow"
    :modal-title="modalTitle"
    :device-id="selectData.deviceID"
    @close="() => (linkAlarmShow = false)"
  />
  <SupplyAir
    :data="currentData"
    :targetVolume="targetVolume"
    :modal-is-show="showTargetModal"
    :modalType="modalType"
    @handle-cancel="() => (showTargetModal = false)"
  />

  <GasSupplyAir
    :data="currentData"
    :gasVal="ch4"
    :modal-is-show="showGasModal"
    :modalType="modalType"
    :isMock="isMock"
    @handle-cancel="() => (showGasModal = false)"
  />
</template>

<script setup lang="ts">
  import { message } from 'ant-design-vue';
  import DeviceEcharts from '../comment/DeviceEcharts.vue';
  import { onBeforeMount, ref, onMounted, onUnmounted, reactive, toRaw, shallowRef, nextTick, inject, unref, onBeforeUnmount } 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 HandleModal from './components/modal.vue';
  import SupplyAir from './components/supplyAir.vue';
  import GasSupplyAir from './components/gasSupplyAir.vue';
  import DeviceBaseInfo from '../comment/components/DeviceBaseInfo.vue';
  import LinkControlDesModal from '../comment/components/LinkControlDesModal.vue';
  import { mountedThree, destroy, addMonitorText, computePlay, setModelType, initCameraCanvas } from './window.threejs';
  import { list, getTableList, updateWindowAutoAdjustStatus } from './window.api';
  import { list as baseList } from '../../deviceManager/windWindowTabel/ventanalyWindow.api';
  import { deviceControlApi } from '/@/api/vent/index';
  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 { useMessage } from '/@/hooks/web/useMessage';
  import { useGlobSetting } from '/@/hooks/setting';
  import { getModelComponent } from './window.data';

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

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

  const { currentRoute } = useRouter();

  const MonitorDataTable = ref();
  const { createConfirm } = useMessage();

  const playerRef = ref();
  const scroll = reactive({
    y: 230,
  });
  const isMock = ref(VENT_PARAM['gasControlMock']);
  const modalIsShow = ref<boolean>(false); // 是否显示模态框
  const linkAlarmShow = ref<boolean>(false); // 是否显示模态框
  const modalTitle = ref(''); // 模态框标题显示内容，根据设备操作类型决定
  const modalType = ref(''); // 模态框内容显示类型，设备操作类型
  const deviceType = ref('window');
  const deviceBaseList = ref([]);
  const activeKey = ref('1');
  const loading = ref(false);
  const renderPlayer = ref(true);
  const windowAngle = ref(0);
  const ch4 = ref(0.6);
  const targetVolume = ref(0);
  const showTargetModal = ref(false);
  const showGasModal = ref(false);
  // const rotationParam = {
  //   frontDeg0: 0, // 前门初始
  //   frontDeg1: windowAngle.value, // 前门目标
  //   backDeg0: 0, // 后门初始
  //   backDeg1: windowAngle.value, // 后门目标
  // };

  // 默认初始是第一行
  const selectRowIndex = ref(-1);
  const dataSource = ref([]);

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

  /** 控制类型枚举 */
  enum ControlType {
    FRONT_AREA = 1, // 前窗面积/角度
    REAR_AREA = 2, // 后窗面积/角度
    LDKZ_START = 'ldkzStart', // 自主联动控制开启
    LDKZ_STOP = 'ldkzStop', // 自主联动控制停止
    FULL_OPEN = 5, // 一键全开
    FULL_CLOSE = 6, // 一键全关
    AIR_VOLUME_AUTO = 7, // 风量自主调控
    AIR_VOLUME_AUTO_EXT = 8, // 风量自主调控扩展
    SAME_SET_VALUE = 'sameSetValue', // 前后窗同值设置
    CO_TEST = 'COTest', // 一氧化碳测试
    AUTO_RUN = 'autoRun', // 自动运行
    AUTO_STOP = 'autoStop', // 自动停止
  }

  /** 控制类型-标题映射配置 */
  const CONTROL_CONFIG_MAP = {
    [ControlType.FRONT_AREA]: (nwindownum: number, isAngle = false) =>
      nwindownum === 2 ? (isAngle ? '设定前窗角度' : '设定前窗面积') : isAngle ? '设定风窗角度' : '设定风窗面积',
    [ControlType.REAR_AREA]: (nwindownum: number, isAngle = false) =>
      nwindownum === 2 ? (isAngle ? '设定后窗角度' : '设定后窗面积') : isAngle ? '设定风窗角度' : '设定风窗面积',
    [ControlType.LDKZ_START]: '自主联动控制开启',
    [ControlType.LDKZ_STOP]: '自主联动控制停止',
    [ControlType.FULL_OPEN]: '一键全开',
    [ControlType.FULL_CLOSE]: '一键全关',
    [ControlType.AIR_VOLUME_AUTO]: '风量自主调控',
    [ControlType.AIR_VOLUME_AUTO_EXT]: '风量自主调控',
  } as const;

  const flvURL1 = () => {
    return `/video/window.mp4`;
  };
  const [regModal, { openModal }] = useModal();
  const { getCamera, removeCamera } = useCamera();

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

  const initData = {
    deviceID: '',
    deviceType: '',
    strname: '',
    dataDh: '-', //压差
    dataDtestq: '-', //测试风量
    sourcePressure: '-', //气源压力
    dataDequivalarea: '-',
    netStatus: '0', //通信状态
    fault: '气源压力超限',
    frontArea: '0',
    rearArea: '0',
    frontRearDifference: '-',
    rearPresentValue: '-',
    maxarea: 0,
    nwindownum: 0,
  };

  // 监测数据
  const selectData = ref(lodash.cloneDeep(initData));
  const currentData = ref(initData);
  // https获取监测数据
  let timer: null | NodeJS.Timeout = null;
  const getMonitor = (flag?) => {
    if (Object.prototype.toString.call(timer) === '[object Null]') {
      timer = setTimeout(
        async () => {
          const data = await getDataSource();
          if (data) {
            currentData.value = data;
            selectData.value = data;
            if (data.maxarea) {
              playAnimation(selectData.value, selectData.value.maxarea);
            }
            if (sysOrgCode != 'smjthllmk') {
              addMonitorText(selectData.value);
            }
          }
          if (timer) {
            timer = null;
          }
          getMonitor();
        },
        flag ? 0 : 2000
      );
    }
  };

  const getDataSource = async () => {
    const res = await list({ devicetype: deviceType.value, pagetype: 'normal' });
    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) {
      // 初始打开页面
      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']]);
      }
    }
    const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
    return data;
  };

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

  // 切换检测数据
  const getSelectRow = async (selectRow, index) => {
    if (!selectRow) return;
    selectRowIndex.value = index;
    loading.value = true;
    const baseData: any = deviceBaseList.value.find((baseData: any) => baseData.id === selectRow.deviceID);
    selectData.value = Object.assign(initData, selectRow, baseData);

    const type = selectData.value.windowModal ? selectData.value.windowModal : selectData.value.nwindownum == 1 ? 'ddFc5' : 'sdFc1';

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

  // 判断前后窗的面积是否发生改变，如果改变则开启动画
  const playAnimation = (data, maxarea = 90, isFirst = false) => {
    modelRef.value?.animate?.(data, maxarea);
    computePlay(data, maxarea, isFirst);
  };

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

  /** 封装通用的模态框打开方法 */
  const openControlModal = (
    controlType: ControlType | string | number,
    customTitle?: string, // 自定义标题
    nwindownum?: number, // 风窗数量
    isAngle = false // 是否是角度设置
  ) => {
    // 参数校验：风窗数量（动态标题必填）
    const needWindowNum = [ControlType.FRONT_AREA, ControlType.REAR_AREA].includes(controlType as ControlType);
    if (needWindowNum && nwindownum === undefined) {
      message.warning('打开模态框失败：缺少风窗数量参数');
      return;
    }

    // 优先使用自定义标题，无则从配置读取
    let finalTitle = customTitle;
    if (!finalTitle) {
      const configItem = CONTROL_CONFIG_MAP[controlType as keyof typeof CONTROL_CONFIG_MAP];
      if (typeof configItem === 'function') {
        finalTitle = configItem(nwindownum!, isAngle);
      } else if (configItem) {
        finalTitle = configItem;
      } else {
        message.warning(`未配置控制类型【${controlType}】的标题`);
        return;
      }
    }

    // 统一赋值逻辑
    modalType.value = String(controlType);
    modalTitle.value = finalTitle;
    modalIsShow.value = true;
  };

  // 设置风窗面积，调用封装的模态框方法
  const setArea = (flag: ControlType | number) => {
    modalType.value = flag + '';
    const nwindownum = selectData.value.nwindownum;

    // 面积设置（1/2为面积，其他为功能控制）
    if ([ControlType.FRONT_AREA, ControlType.REAR_AREA].includes(flag as ControlType)) {
      openControlModal(flag, undefined, nwindownum, false);
    } else {
      if (!globalConfig?.simulatedPassword) {
        openControlModal(flag, undefined, nwindownum);
      } else {
        handleOK('', modalType.value, selectData.value.nwindownum);
      }
    }
  };

  // 重构setAngle方法,调用封装的模态框方法
  const setAngle = (flag: ControlType | number) => {
    modalType.value = flag + '';
    const nwindownum = selectData.value.nwindownum;

    // 角度设置（1/2为角度，7为风量自主调控，其他为功能控制）
    if ([ControlType.FRONT_AREA, ControlType.REAR_AREA].includes(flag as ControlType)) {
      openControlModal(flag, undefined, nwindownum, true);
    } else if (flag === ControlType.AIR_VOLUME_AUTO) {
      openControlModal(flag);
    } else {
      if (!globalConfig?.simulatedPassword) {
        openControlModal(flag);
      } else {
        handleOK('', modalType.value, selectData.value.nwindownum);
      }
    }
  };

  // 重构setControl方法，调用封装的模态框方法
  const setControl = (flag: ControlType | string | number, title: string) => {
    openControlModal(flag, title);
  };

  const handleOK = async (passWord, handlerState, value) => {
    if (!passWord && !globalConfig?.simulatedPassword) {
      message.warning('请输入密码！');
      return;
    }
    let data = {
      deviceid: selectData.value.deviceID,
      devicetype: selectData.value.deviceType,
      paramcode: '',
      password: passWord || globalConfig?.simulatedPassword,
      value: null,
    };
    let params;
    // 风窗风量自主调控
    if (handlerState == ControlType.AIR_VOLUME_AUTO || handlerState == ControlType.AIR_VOLUME_AUTO_EXT) {
      if (handlerState == ControlType.AIR_VOLUME_AUTO) {
        // 单道风窗
        params = {
          windowId: selectData.value.deviceID,
          auto: 1,
          fengliangF: value,
        };
      }
      updateWindowAutoAdjustStatus(params).then((res) => {
        if (res.success) {
          if (globalConfig.History_Type == 'remote') {
            message.success('指令已下发至生产管控平台成功！');
          } else {
            message.success('指令已下发成功！');
          }
          handleCancel();
          targetVolume.value = value;
          showTargetModal.value = true;
        } else {
          message.error(res.message);
        }
      });
      return;
    } else if (handlerState == ControlType.LDKZ_START || handlerState == ControlType.LDKZ_STOP) {
      data.paramcode = ControlType.AUTO_RUN;
      data.value = handlerState == ControlType.LDKZ_START ? 1 : 0;
      if (handlerState == ControlType.LDKZ_START) {
        ch4.value = value;
        params = { auto: 1, windowId: selectData.value.deviceID, gasMax: ch4.value };
      } else {
        params = { auto: 0, windowId: selectData.value.deviceID };
      }
      if (isMock.value) {
        showGasModal.value = true;
      } else {
        updateWindowAutoAdjustStatus(params).then((res) => {
          if (res.success) {
            if (globalConfig.History_Type == 'remote') {
              message.success('指令已下发至生产管控平台成功！');
            } else {
              message.success('指令已下发成功！');
            }
            handleCancel();
            showGasModal.value = true;
          } else {
            message.error(res.message);
          }
        });
      }
    } else if (handlerState == ControlType.SAME_SET_VALUE) {
      const data1 = {
        deviceid: selectData.value.deviceID,
        devicetype: selectData.value.deviceType,
        paramcode: 'frontSetValue',
        password: passWord || globalConfig?.simulatedPassword,
        value: value ? value : null,
      };
      const data2 = {
        deviceid: selectData.value.deviceID,
        devicetype: selectData.value.deviceType,
        paramcode: 'rearSetValue',
        password: passWord || globalConfig?.simulatedPassword,
        value: value ? value : null,
      };
      const res1 = await deviceControlApi(data1);
      const res2 = await deviceControlApi(data2);
      if (res1.success && res2.success) {
        message.success('指令已下发成功！');
      } else {
        message.error(res1.message);
      }
      handleCancel();
    } else {
      if (handlerState == ControlType.FRONT_AREA || handlerState == ControlType.REAR_AREA) {
        windowAngle.value = value;
        data.paramcode = handlerState == ControlType.FRONT_AREA ? 'frontSetValue' : 'rearSetValue';
        data.value = windowAngle.value;
      } else if (handlerState == ControlType.FULL_OPEN || handlerState == ControlType.FULL_CLOSE) {
        data.paramcode = 'frontSetValue';
        data.value = handlerState == ControlType.FULL_OPEN ? selectData.value.maxarea : 0;
      } else if (handlerState.startsWith('frontSetValue')) {
        data.paramcode = handlerState;
        data.value = value;
      } else if (handlerState == ControlType.CO_TEST) {
        if (value > 50) {
          // message.warning(`一氧化碳超限，可能存在火灾隐患，是否开启${selectData.value.strinstallpos},使有毒烟气短路?`, 3000);
          createConfirm({
            iconType: 'warning',
            title: '控制',
            content: `一氧化碳超限，可能存在火灾隐患，是否开启${selectData.value.strinstallpos},使有毒烟气短路？`,
            onOk: () => {
              message.success('指令已下发成功！');
              handleCancel();
            },
            onCancel: () => handleCancel(),
          });
          return;
        } else {
          message.success('一氧化碳在正常范围内，无需操作！');
          handleCancel();
          return;
        }
      } else {
        data.paramcode = handlerState;
        if (handlerState == ControlType.AUTO_RUN || handlerState == ControlType.AUTO_STOP) {
          data.value = null;
        } else {
          data.value = value;
        }
      }
      deviceControlApi(handlerState == 3 ? params : data)
        .then((res) => {
          if (res.success) {
            if (globalConfig.History_Type == 'remote') {
              message.success('指令已下发至生产管控平台成功！');
            } else {
              message.success('指令已下发成功！');
            }
          } else {
            message.error(res.message);
          }
        })
        .finally(() => {
          handleCancel();
        });
    }
  };

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

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

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

  onMounted(() => {
    const { query } = unref(currentRoute);
    if (query['deviceType']) deviceType.value = query['deviceType'] as string;
    if (globalConfig.is2DModel) {
      getMonitor(true);
    } else {
      loading.value = true;
      mountedThree().then(async () => {
        getMonitor(true);
        loading.value = false;
        addMonitorText(selectData.value);
      });
    }
  });

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

  onUnmounted(() => {
    destroy();
    if (timer) {
      clearTimeout(timer);
      timer = undefined;
    }
  });
</script>
<style lang="less" scoped>
  @import '/@/design/theme.less';
  @import '/@/design/vent/modal.less';
  @ventSpace: zxm;

  // :deep(.@{ventSpace}-tabs-tabpane-active) {
  //   height: 100%;
  // }
  .input-box {
    display: flex;
    align-items: center;
    padding-left: 10px;
    .input-title {
      color: var(--vent-font-action-link);
      width: auto;
    }
    .@{ventSpace}-input-number {
      border-color: #ffffff88 !important;
    }
    margin-right: 10px;
  }
  .scene-box {
    .bottom-tabs-box {
      height: 350px;
    }
  }
  :deep(.@{ventSpace}-picker-datetime-panel) {
    height: 200px !important;
    overflow-y: auto !important;
  }
</style>