思山岭风门同控-更新

package.json

@@ -77,6 +77,7 @@
     "three.path": "^1.0.1",
     "tinymce": "^5.10.3",
     "vditor": "^3.9.5",
+    "video.js": "^8.23.4",
     "vue": "^3.2.0",
     "vue-cropper": "^0.6.2",
     "vue-cropperjs": "^5.0.0",

src/views/vent/monitorManager/airDoor/components/door-content-r.vue

@@ -23,10 +23,13 @@
         </div>
         <div class="box-content">
           <!-- 二三维信息 -->
-          <gateDualSVG v-if="item.deviceType == 'gate_qd'" :ref="`modelRef${index}`" :indexCode="index"></gateDualSVG>
-          <gateSVG v-if="item.deviceType == 'gate_ss'" :ref="`modelRef${index}`" :indexCode="index"></gateSVG>
+          <!-- <gateDualSVG v-if="item.ndoorcount == '2'" :ref="`modelRef${index}`" :indexCode="index"></gateDualSVG>
+          <gateSVG v-if="item.ndoorcount == '1'" :ref="`modelRef${index}`" :indexCode="index"></gateSVG> -->
           <!-- <component :ref="`modelRef${index}`" :indexCode="index"
             :is="getModelComponent(globalConfig.is2DModel, item.deviceType)" /> -->
+          <gateDualSVG v-if="item.ndoorcount == '2'" :ref="(el) => setChildRef(el, index)" :indexCode="index">
+          </gateDualSVG>
+          <gateSVG v-if="item.ndoorcount == '1'" :ref="(el) => setChildRef(el, index)" :indexCode="index"></gateSVG>
         </div>
         <img src="@/assets/images/camera.png" alt="" @click="handlerCamera(item, index)" />
       </div>
@@ -43,13 +46,13 @@
       <CameraModal :cameraData="cameraData"></CameraModal>
     </Modal>
     <!-- 操作日志 -->
-    <operationModal :visible="visibleOperation"  @handleCancel="handleCancelOperation" >
+    <operationModal :visible="visibleOperation" @handleCancel="handleCancelOperation">
     </operationModal>
   </div>
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, inject, watch, onMounted, h, shallowRef } from 'vue';
+import { reactive, ref, inject, watch, nextTick } from 'vue';
 import syncModal from './syncModal.vue';
 import timeSetModal from './timeSetModal.vue';
 import CameraModal from './cameraModal.vue';
@@ -86,18 +89,12 @@ let Ids = ref('')
 //摄像头-控制显示与隐藏
 let modalVisible = ref(false);
 let cameraData = reactive({})
-/** 模型对应的组件，根据实际情况分为二维三维 */
-const modelRef0 = ref(null);
-const modelRef1 = ref(null);
-const modelRef2 = ref(null);
-const modelRef3 = ref(null);
-const modelRef4 = ref(null);
-const modelRef5 = ref(null);
-const modelRef6 = ref(null);
-const modelRef7 = ref(null);
-const modelRef8 = ref(null);
 //操作日志弹窗显示/关闭
 let visibleOperation = ref(false)
+const childRefs = ref<any[]>([])
+const setChildRef = (el, index) => {
+  childRefs.value[index] = el
+}
 
 
 
@@ -162,8 +159,8 @@ function handleCancelCamera(param) {
   modalVisible.value = param;
 }
 //操作日志弹窗-打开
-function handlerOperation(){
-    visibleOperation.value = true
+function handlerOperation() {
+  visibleOperation.value = true
 }
 
 //操作日志弹窗-关闭
@@ -172,25 +169,7 @@ function handleCancelOperation(param) {
 }
 //模型动画
 function monitorAnimation(selectData, index) {
-  if (index == 0) {
-    modelRef0.value[0]?.animate?.(selectData.frontGateOpen == '1', selectData.midGateOpen == '1', selectData.rearGateOpen == '1');
-  }else if (index == 1) {
-    modelRef1.value[0]?.animate?.(selectData.frontGateOpen == '1', selectData.midGateOpen == '1', selectData.rearGateOpen == '1');
-  } else if (index == 2) {
-    modelRef2.value[0]?.animate?.(selectData.frontGateOpen == '1', selectData.midGateOpen == '1', selectData.rearGateOpen == '1');
-  } else if (index == 3) {
-    modelRef3.value[0]?.animate?.(selectData.frontGateOpen == '1', selectData.midGateOpen == '1', selectData.rearGateOpen == '1');
-  } else if (index == 4) {
-    modelRef4.value[0]?.animate?.(selectData.frontGateOpen == '1', selectData.midGateOpen == '1', selectData.rearGateOpen == '1');
-  } else if (index == 5) {
-    modelRef5.value[0]?.animate?.(selectData.frontGateOpen == '1', selectData.midGateOpen == '1', selectData.rearGateOpen == '1');
-  } else if (index == 6) {
-    modelRef6.value[0]?.animate?.(selectData.frontGateOpen == '1', selectData.midGateOpen == '1', selectData.rearGateOpen == '1');
-  } else if (index == 7) {
-    modelRef7.value[0]?.animate?.(selectData.frontGateOpen == '1', selectData.midGateOpen == '1', selectData.rearGateOpen == '1');
-  } else if (index == 8) {
-    modelRef8.value[0]?.animate?.(selectData.frontGateOpen == '1', selectData.midGateOpen == '1', selectData.rearGateOpen == '1');
-  }
+  childRefs.value[index]?.animate?.(selectData.frontGateOpen == '1', selectData.midGateOpen == '1', selectData.rearGateOpen == '1');
 }
 
 
@@ -198,13 +177,12 @@ watch(() => props.infoData, (newV, oldV) => {
   console.log(newV, 'new---')
   infoDatas.value = newV
   if (newV.length) {
-    setTimeout(() => {
+    nextTick(() => {
       newV.forEach((el: any, index: number) => {
         el = Object.assign(el, el.readData)
         monitorAnimation(el, index);
       })
-    }, 1000)
-
+    })
   }
 })
 

src/views/vent/monitorManager/airDoor/components/door-menu-l.vue

@@ -57,7 +57,7 @@ watch(() => props.menuData, (newV, oldV) => {
     justify-content: space-between;
     align-items: center;
     width: 100%;
-    height: 48px;
+    height: 60px;
     color: #fff;
     margin-bottom: 10px;
     padding: 0px 15px 0px 40px;

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

@@ -41,12 +41,6 @@ async function getMenuList() {
   let res = await getDevice({ devicetype: "gate", pagetype: "normal" })
   console.log(res, 'menuList')
   menuData.value = res.msgTxt[0].datalist || []
-  // menuData.value = [
-  //   { readData: { frontGateOpen: '1', midGateOpen: '0', rearGateOpen: '1' }, strinstallpos: '1020中段2#穿脉入口' },
-  //   { readData: { frontGateOpen: '1', midGateOpen: '0', rearGateOpen: '1' }, strinstallpos: '1020中段上盘沿脉巷' },
-  //   { readData: { frontGateOpen: '1', midGateOpen: '0', rearGateOpen: '1' }, strinstallpos: '1020中段上盘沿脉巷与0#穿交叉口中段上盘沿脉巷与0#穿交叉口' },
-  //   { readData: { frontGateOpen: '1', midGateOpen: '0', rearGateOpen: '1' }, strinstallpos: '1060到1020回风巷斜坡道入口' },
-  // ]
 }
 async function upcomingList() {
   let res = await upcoming({})