[Feat 0000]执行关联控制功能开发

src/views/vent/deviceManager/comment/warningTabel/ctrlTable.vue

@@ -7,7 +7,7 @@
       </div>
     </div>
     <div class="device-box">
-      <a-button class="vent-margin-b-5" type="primary" @click="handleOpen(true, {})"> 新增 </a-button>
+      <a-button class="vent-margin-b-5" type="primary" @click="handleOpen(true)"> 新增 </a-button>
       <a-table :columns="ctrlColumns" :data-source="dataSource" bordered :scroll="{ y: 500 }" :pagination="false">
         <template #bodyCell="{ column, record }">
           <template v-if="column.dataIndex === 'operation'">

src/views/vent/monitorManager/fireDoorMonitor/fireDoor.api.ts

@@ -12,6 +12,10 @@ enum Api {
   baseList = '/safety/ventanalyGate/list',
   cameraList = '/safety/ventanalyCamera/list',
   cameraAddrList = '/monitor/camera/info',
+  // 获取控制点位列表
+  getCtrlDevicePointList = '/safety/ventanalyMonitorParams/list',
+  // 执行联动控制
+  executeCtrlDevicePoint = '/safety/deviceLink/runDevLinkControl',
 }
 /**
  * 导出api
@@ -66,3 +70,8 @@ export const saveOrUpdate = (params, isUpdate) => {
 };
 
 export const getTableList = (params) => defHttp.get({ url: Api.baseList, params });
+
+// 控制点位关联
+export const getCtrlDevicePointList = (params) => defHttp.get({ url: Api.getCtrlDevicePointList, params });
+// 执行联动控制
+export const executeCtrlDevicePoint = (params) => defHttp.put({ url: Api.executeCtrlDevicePoint, params });

src/views/vent/monitorManager/fireDoorMonitor/index.vue

@@ -13,6 +13,9 @@
           <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:stopControl')" class="button-box" @click="setControl('frontGateStop_S', '停止')">停止</div>
+          <div v-for="(item, index) in ctrlList" :key="index" class="button-box" @click="setControl(item.valuecode, item.valuename, true, item)">
+            {{ item.valuename }}
+          </div>
         </template>
       </div>
       <!-- 控制模式 -->
@@ -224,335 +227,383 @@
 </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 HandleModal from './modal.vue';
-  import DeviceBaseInfo from '../comment/components/DeviceBaseInfo.vue';
-  import { mountedThree, play, destroy, setModelType } from './fireDoor.threejs';
-  import { deviceControlApi } from '/@/api/vent/index';
-  import { message, Button } from 'ant-design-vue';
-  import { list, getTableList } from './fireDoor.api';
-  import { cloneDeep } from 'lodash-es';
-  import { setDivHeight } from '/@/utils/event';
-  import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
-  import { useRouter } from 'vue-router';
-  import { useModal, BasicModal } from '/@/components/Modal';
-  import { useCamera } from '/@/hooks/system/useCamera';
-  import { usePermission } from '/@/hooks/web/usePermission';
-  import { getDictItems } from '/@/api/common/api';
-  import { useGlobSetting } from '/@/hooks/setting';
+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 HandleModal from './modal.vue';
+import DeviceBaseInfo from '../comment/components/DeviceBaseInfo.vue';
+import { mountedThree, play, destroy, setModelType } from './fireDoor.threejs';
+import { deviceControlApi } from '/@/api/vent/index';
+import { message, Button } from 'ant-design-vue';
+import { list, getTableList, getCtrlDevicePointList, executeCtrlDevicePoint } from './fireDoor.api';
+import { cloneDeep } from 'lodash-es';
+import { setDivHeight } from '/@/utils/event';
+import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
+import { useRouter } from 'vue-router';
+import { useModal, BasicModal } from '/@/components/Modal';
+import { useCamera } from '/@/hooks/system/useCamera';
+import { usePermission } from '/@/hooks/web/usePermission';
+import { getDictItems } from '/@/api/common/api';
+import { useGlobSetting } from '/@/hooks/setting';
+import { param } from '../compreMonitor/compre.data.js';
 
-  const { hasPermission } = usePermission();
+const { hasPermission } = usePermission();
 
-  const globalConfig = inject('globalConfig');
-  const { sysOrgCode } = useGlobSetting();
-  const { currentRoute } = useRouter();
-  const MonitorDataTable = ref();
-  let contrlValue = '';
-  const playerRef = ref();
-  const renderPlayer = ref(true);
-  const deviceType = ref('door');
-  // const deviceType = ref('gate');
-  // const deviceType = ref('firedoor');
-  const activeKey = ref('1'); // tab
-  const loading = ref(false);
+const globalConfig = inject('globalConfig');
+const { sysOrgCode } = useGlobSetting();
+const { currentRoute } = useRouter();
+const MonitorDataTable = ref();
+let contrlValue = '';
+const playerRef = ref();
+const renderPlayer = ref(true);
+const deviceType = ref('door');
+// const deviceType = ref('gate');
+// const deviceType = ref('firedoor');
+const activeKey = ref('1'); // tab
+const loading = ref(false);
 
-  const scroll = reactive({
-    y: 230,
-  });
-  const modelList = ref<{ text: string; value: string }[]>([]);
-  const doorIsOpen = ref(false); //前门是否开启
-  const modalIsShow = ref<boolean>(false); // 是否显示模态框
-  const modalTitle = ref(''); // 模态框标题显示内容，根据设备操作类型决定
-  const modalType = ref(''); // 模态框内容显示类型，设备操作类型
-
-  const selectRowIndex = ref(-1); // 选中行
-  const dataSource = ref([]);
+const scroll = reactive({
+  y: 230,
+});
+const modelList = ref<{ text: string; value: string }[]>([]);
+const doorIsOpen = ref(false); //前门是否开启
+const modalIsShow = ref<boolean>(false); // 是否显示模态框
+const modalTitle = ref(''); // 模态框标题显示内容，根据设备操作类型决定
+const modalType = ref(''); // 模态框内容显示类型，设备操作类型
 
-  const deviceBaseList = ref([]); // 设备基本信息
-  const [registerModal, { openModal, closeModal }] = useModal();
-  const [registerModal1, modalContext1] = useModal();
+const selectRowIndex = ref(-1); // 选中行
+const dataSource = ref([]);
 
-  const { getCamera, removeCamera } = useCamera();
+const deviceBaseList = ref([]); // 设备基本信息
+const [registerModal, { openModal, closeModal }] = useModal();
+const [registerModal1, modalContext1] = useModal();
 
-  const tabChange = (activeKeyVal) => {
-    activeKey.value = activeKeyVal;
-    if (activeKeyVal == 1) {
-      nextTick(() => {
-        if (MonitorDataTable.value) MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID]);
-      });
-    }
+const { getCamera, removeCamera } = useCamera();
+const ctrlList = ref<any[]>([]);
+const currentCtrlDevicePoint = ref<any>(null);
+const isLinkControl = ref(false);
+async function getControlDevicePointList(deviceTypeValue?: string) {
+  const currentDeviceType = deviceTypeValue || selectData.deviceType || deviceType.value;
+  const param = {
+    pageNo: 1,
+    pageSize: 1000,
+    devicetype: currentDeviceType,
+    valuetype: 10,
   };
+  const res = await getCtrlDevicePointList(param);
+  ctrlList.value = res.records || [];
+}
 
-  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));
-  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;
+const tabChange = (activeKeyVal) => {
+  activeKey.value = activeKeyVal;
+  if (activeKeyVal == 1) {
+    nextTick(() => {
+      if (MonitorDataTable.value) MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID]);
     });
   }
+};
 
-  // 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]);
-            monitorAnimation(selectData);
-            if (timer) {
-              timer = null;
+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));
+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']]);
             }
-            getMonitor();
           }
-        },
-        flag ? 0 : 1000
-      );
-    }
+          Object.assign(selectData, dataSource.value[selectRowIndex.value]);
+          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);
-    doorDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
-    isdoorOpenRunning = false; //开关门动作是否在进行
-    let type = 'fireDoorRed';
-    if (selectData.modelType == 'bd_qt') {
-      type = 'fireDoor';
-    } else if (selectData.modelType == 'bd_kj') {
-      type = 'fireDoorF';
-    } else if (selectData.modelType) {
-      type = selectData.modelType;
-    }
-    await setModelType(type);
-    loading.value = false;
+// 切换检测数据
+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);
+  await getControlDevicePointList(selectData.deviceType);
+  doorDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
+  isdoorOpenRunning = false; //开关门动作是否在进行
+  let type = 'fireDoorRed';
+  if (selectData.modelType == 'bd_qt') {
+    type = 'fireDoor';
+  } else if (selectData.modelType == 'bd_kj') {
+    type = 'fireDoorF';
+  } else if (selectData.modelType) {
+    type = selectData.modelType;
+  }
+  await setModelType(type);
+  loading.value = false;
 
-    await getCamera(selectRow.deviceID, playerRef, renderPlayer);
+  await getCamera(selectRow.deviceID, playerRef, renderPlayer);
+}
+
+const setControl = (flag, title, isLink = false, ctrlPoint?) => {
+  modalType.value = flag + '';
+  modalTitle.value = title;
+  modalIsShow.value = true;
+  isLinkControl.value = !!isLink;
+  currentCtrlDevicePoint.value = isLink ? ctrlPoint || null : null;
+  contrlValue = '';
+  if (globalConfig?.simulatedPassword) {
+    handleOK('', flag);
   }
+};
 
-  const setControl = (flag, title, value?) => {
-    modalType.value = flag + '';
-    modalTitle.value = title;
-    modalIsShow.value = true;
-    if (value) contrlValue = value;
-    if (globalConfig?.simulatedPassword) {
-      handleOK('', handlerState + '');
-    }
-  };
+function handleOK(passWord, handlerState) {
+  if (!passWord && !globalConfig?.simulatedPassword) {
+    message.warning('请输入密码');
+    return;
+  }
+  if (isOpenRunning) {
+    return;
+  }
 
-  function handleOK(passWord, handlerState) {
-    if (!passWord && !globalConfig?.simulatedPassword) {
-      message.warning('请输入密码');
-      return;
-    }
-    if (isOpenRunning) {
-      return;
-    }
-    const data = {
-      deviceid: selectData.deviceID,
+  if (isLinkControl.value && currentCtrlDevicePoint.value) {
+    const params = {
+      deviceid: currentCtrlDevicePoint.value.id,
       devicetype: selectData.deviceType,
-      paramcode: '',
-      value: contrlValue,
+      paramcode: currentCtrlDevicePoint.value.valuecode,
       password: passWord || globalConfig?.simulatedPassword,
-      masterComputer: selectData.masterComputer,
     };
-
-    data.paramcode = handlerState;
-    if (handlerState == 'autoRoManualControl') {
-      data.value = selectData.contrlMod != 'loopCtrl' ? contrlValue : '';
-      selectData.autoRoManual = null;
-    }
-
-    if (data.paramcode) {
-      deviceControlApi(data).then((res) => {
-        // 模拟时开启
+    executeCtrlDevicePoint(params)
+      .then((res) => {
+        modalIsShow.value = false;
+        currentCtrlDevicePoint.value = null;
+        isLinkControl.value = false;
         if (res.success) {
-          modalIsShow.value = false;
           if (globalConfig.History_Type == 'remote') {
             message.success('指令已下发至生产管控平台成功！');
           } else {
             message.success('指令已下发成功！');
           }
         } else {
-          message.error(res.message);
+          message.error(res.message || '指令下发失败');
         }
+      })
+      .catch((err) => {
+        message.error(err?.message || '指令下发失败');
       });
-    }
+    return;
   }
-  let isOpenRunning = false; //开关门动作是否在进行
-  /** 开关门动画调用 */
-  let isdoorOpenRunning = false; //开关门动作是否在进行
-  let isMBRunning = false; //密闭门动作是否在进行
-  // 0 关闭 1 正在打开 2 打开 3正在关闭
-  let doorDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
-  function monitorAnimation(selectData) {
-    const timeScale = 0.005;
-    // 打开（普通门或卷帘门）
-    if (selectData.frontGateOpen == '1' && !isdoorOpenRunning) {
-      isdoorOpenRunning = true;
-      if (doorDeviceState != 1) {
-        // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(1, timeScale) : play(1);
-        play(1, timeScale);
-        doorDeviceState = 1;
-        doorIsOpen.value = true;
-      }
-    }
-    // 关闭（普通门或卷帘门）
-    if (selectData.frontGateOpen == '0' && isdoorOpenRunning) {
-      isdoorOpenRunning = false;
-      if (doorDeviceState != 0) {
-        // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(1, timeScale) : play(1);
-        play(2, timeScale);
-        doorDeviceState = 0;
-        doorIsOpen.value = false;
+
+  const data = {
+    deviceid: selectData.deviceID,
+    devicetype: selectData.deviceType,
+    paramcode: handlerState,
+    value: '',
+    password: passWord || globalConfig?.simulatedPassword,
+    masterComputer: selectData.masterComputer,
+  };
+
+  if (handlerState == 'autoRoManualControl') {
+    data.value = '';
+    selectData.autoRoManual = null;
+  }
+
+  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 isdoorOpenRunning = false; //开关门动作是否在进行
+let isMBRunning = false; //密闭门动作是否在进行
+// 0 关闭 1 正在打开 2 打开 3正在关闭
+let doorDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
+function monitorAnimation(selectData) {
+  const timeScale = 0.005;
+  // 打开（普通门或卷帘门）
+  if (selectData.frontGateOpen == '1' && !isdoorOpenRunning) {
+    isdoorOpenRunning = true;
+    if (doorDeviceState != 1) {
+      // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(1, timeScale) : play(1);
+      play(1, timeScale);
+      doorDeviceState = 1;
+      doorIsOpen.value = true;
     }
-    // 皮带密闭开
-    if (selectData.MBOpen == '1' && !isMBRunning) {
-      isMBRunning = true;
-      play(3, timeScale);
-    }
-    // 皮带密闭关
-    if (selectData.MBOpen == '0' && isMBRunning) {
-      isMBRunning = false;
-      play(4, timeScale);
+  }
+  // 关闭（普通门或卷帘门）
+  if (selectData.frontGateOpen == '0' && isdoorOpenRunning) {
+    isdoorOpenRunning = false;
+    if (doorDeviceState != 0) {
+      // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(1, timeScale) : play(1);
+      play(2, timeScale);
+      doorDeviceState = 0;
+      doorIsOpen.value = false;
     }
   }
-
-  function handleCancel() {
-    modalIsShow.value = false;
-    modalTitle.value = '';
-    modalType.value = '';
-    selectData.autoRoManual = null;
+  // 皮带密闭开
+  if (selectData.MBOpen == '1' && !isMBRunning) {
+    isMBRunning = true;
+    play(3, timeScale);
   }
+  // 皮带密闭关
+  if (selectData.MBOpen == '0' && isMBRunning) {
+    isMBRunning = false;
+    play(4, timeScale);
+  }
+}
 
-  onMounted(async () => {
-    const { query } = unref(currentRoute);
-    if (query['deviceType']) deviceType.value = query['deviceType'] as string;
-    modelList.value = await getDictItems('fireDoorModel');
-    loading.value = true;
-    mountedThree().then(async () => {
-      await getMonitor(true);
-      loading.value = false;
-    });
-  });
+function handleCancel() {
+  modalIsShow.value = false;
+  modalTitle.value = '';
+  modalType.value = '';
+  currentCtrlDevicePoint.value = null;
+  isLinkControl.value = false;
+  selectData.autoRoManual = null;
+}
 
-  onBeforeUnmount(() => {
-    getDeviceBaseList();
-    removeCamera(playerRef);
+onMounted(async () => {
+  const { query } = unref(currentRoute);
+  if (query['deviceType']) deviceType.value = query['deviceType'] as string;
+  modelList.value = await getDictItems('fireDoorModel');
+  loading.value = true;
+  mountedThree().then(async () => {
+    await getMonitor(true);
+    loading.value = false;
   });
+});
 
-  onUnmounted(() => {
-    if (timer) {
-      clearTimeout(timer);
-      timer = undefined;
-    }
-    destroy();
-  });
+onBeforeUnmount(() => {
+  getDeviceBaseList();
+  removeCamera(playerRef);
+});
+
+onUnmounted(() => {
+  if (timer) {
+    clearTimeout(timer);
+    timer = undefined;
+  }
+  destroy();
+});
 </script>
 
 <style lang="less" scoped>
-  @import '/@/design/vent/modal.less';
-  .scene-box {
-    .bottom-tabs-box {
-      height: 300px;
-    }
+@import '/@/design/vent/modal.less';
+.scene-box {
+  .bottom-tabs-box {
+    height: 300px;
   }
-  .button-box {
-    border: none !important;
-    height: 34px !important;
+}
+.button-box {
+  border: none !important;
+  height: 34px !important;
 
-    &:hover {
-      background: linear-gradient(#2cd1ff55, #1eb0ff55) !important;
-    }
+  &:hover {
+    background: linear-gradient(#2cd1ff55, #1eb0ff55) !important;
+  }
 
-    &::before {
-      height: 27px !important;
-      background: linear-gradient(#1fa6cb, #127cb5) !important;
-    }
+  &::before {
+    height: 27px !important;
+    background: linear-gradient(#1fa6cb, #127cb5) !important;
+  }
 
-    &::after {
-      top: 35px !important;
-    }
+  &::after {
+    top: 35px !important;
   }
-  .dfc-box {
-    :deep(#LivePlayerBox .liveVideo) {
-      width: 800px !important;
-      height: 600px !important;
-      .xgplayer {
-        height: 100% !important;
-      }
+}
+.dfc-box {
+  :deep(#LivePlayerBox .liveVideo) {
+    width: 800px !important;
+    height: 600px !important;
+    .xgplayer {
+      height: 100% !important;
     }
   }
+}
 
-  :deep(.@{ventSpace}-tabs-tabpane-active) {
-    height: 100%;
-  }
+: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: #fff !important;
-  }
-  :deep(.zxm-radio-disabled .zxm-radio-inner::after) {
-    background-color: #127cb5 !important;
-  }
-  :deep(.live-player-box) {
-    display: flex;
-    justify-content: end;
-  }
+::-webkit-scrollbar-thumb {
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: #4288a444;
+}
+:deep(.zxm-radio-disabled + span) {
+  color: #fff !important;
+}
+:deep(.zxm-radio-disabled .zxm-radio-inner::after) {
+  background-color: #127cb5 !important;
+}
+:deep(.live-player-box) {
+  display: flex;
+  justify-content: end;
+}
 </style>