Commit a898ecba5b2582a71a1eccbbad6298fc326bacfe

Authored by loveumiko
1 parent 0b3b21b7

fix: 修改设备详情视频通道的显示问题

@@ -116,8 +116,9 @@ @@ -116,8 +116,9 @@
116 const isTransportType = ref<Boolean>(false); //获取产品是不是GB/T 28181 116 const isTransportType = ref<Boolean>(false); //获取产品是不是GB/T 28181
117 // 详情回显 117 // 详情回显
118 const [register] = useDrawerInner(async (data) => { 118 const [register] = useDrawerInner(async (data) => {
119 - const { id, transportType } = data;  
120 - isTransportType.value = transportType == 'GB/T28181' ? true : false; 119 + const { id, transportType, deviceType } = data;
  120 + isTransportType.value =
  121 + transportType == 'GB/T28181' && deviceType == 'DIRECT_CONNECTION' ? true : false;
121 // 设备详情 122 // 设备详情
122 const res = await getDeviceDetail(id); 123 const res = await getDeviceDetail(id);
123 deviceDetail.value = res; 124 deviceDetail.value = res;
@@ -79,24 +79,32 @@ @@ -79,24 +79,32 @@
79 }); 79 });
80 }; 80 };
81 81
82 - //type 1:上 2:右 3:下 4:左 5:播放/暂停  
83 - const handleClick = (type: number) => {  
84 - console.log(type, 'type');  
85 - if (type == 5) {  
86 - // if (unref(isPlay)) {  
87 - // unref(videoPlayInstance)?.play();  
88 - // } else {  
89 - // unref(videoPlayInstance)?.pause();  
90 - // }  
91 - isPlay.value = !isPlay.value;  
92 - } 82 + //播放/暂停
  83 + const handleClick = () => {
  84 + console.log('播放/暂停');
  85 + unref(isPlay) && unref(videoPlayInstance)?.pause();
  86 + !unref(isPlay) && unref(videoPlayInstance)?.play();
  87 + };
  88 +
  89 + const handleTopClick = () => {
  90 + console.log('上');
  91 + };
  92 +
  93 + const handleRightClick = () => {
  94 + console.log('右');
  95 + };
  96 +
  97 + const handleBottomClick = () => {
  98 + console.log('下');
  99 + };
  100 +
  101 + const handleLeftClick = () => {
  102 + console.log('左');
93 }; 103 };
94 104
95 // type 1:放大 2:缩小 105 // type 1:放大 2:缩小
96 const handleScale = (type: number) => { 106 const handleScale = (type: number) => {
97 - if (type == 1) {  
98 - } else {  
99 - } 107 + console, log(type);
100 }; 108 };
101 109
102 const isPlay = ref<Boolean | null | undefined>(true); 110 const isPlay = ref<Boolean | null | undefined>(true);
@@ -104,7 +112,30 @@ @@ -104,7 +112,30 @@
104 onMounted(async () => { 112 onMounted(async () => {
105 init(); 113 init();
106 await nextTick(); 114 await nextTick();
107 - isPlay.value = unref(videoPlayInstance)?.paused(); 115 + // isPlay.value = unref(videoPlayInstance)?.paused();
  116 + videoPlayInstance.value.on('loadedmetadata', () => {
  117 + console.log('视频长度');
  118 + });
  119 + videoPlayInstance.value.on('waiting', () => {
  120 + isPlay.value = false;
  121 + console.log('视频加载中');
  122 + });
  123 + videoPlayInstance.value.on('play', () => {
  124 + isPlay.value = true;
  125 + console.log('视频开始播放');
  126 + });
  127 + videoPlayInstance.value.on('playing', () => {
  128 + isPlay.value = true;
  129 + console.log('正在播放');
  130 + });
  131 + videoPlayInstance.value.on('pause', () => {
  132 + isPlay.value = false;
  133 + console.log('暂停播放');
  134 + });
  135 + videoPlayInstance.value.on('ended', () => {
  136 + isPlay.value = false;
  137 + console.log('结束播放');
  138 + });
108 }); 139 });
109 140
110 onUnmounted(() => { 141 onUnmounted(() => {
@@ -132,31 +163,29 @@ @@ -132,31 +163,29 @@
132 163
133 <div class="home mt-5"> 164 <div class="home mt-5">
134 <Button class="front-sty-center child center" shape="circle" @click="handleClick(5)"> 165 <Button class="front-sty-center child center" shape="circle" @click="handleClick(5)">
135 - <!-- 暂停 -->  
136 - <PauseOutlined v-if="!isPlay" class="child-icon" style="color: #fffbfb" />  
137 - <!-- 播放 --> 166 + <PauseOutlined v-if="isPlay" class="child-icon" style="color: #fffbfb" />
138 <CaretRightOutlined v-else class="child-icon" style="color: #fffbfb" /> 167 <CaretRightOutlined v-else class="child-icon" style="color: #fffbfb" />
139 </Button> 168 </Button>
140 169
141 <div class="box"> 170 <div class="box">
142 <div> 171 <div>
143 - <Button class="left-top in-block" @click="handleClick(1)">  
144 - <CaretUpOutlined class="icon-rotate child-icon" @click="handleClick(1)" /> 172 + <Button class="left-top in-block" @click="handleTopClick">
  173 + <CaretUpOutlined class="icon-rotate child-icon" />
145 </Button> 174 </Button>
146 - <Button class="right-top in-block" @click="handleClick(2)">  
147 - <CaretRightOutlined class="icon-rotate child-icon" @click="handleClick(2)" /> 175 + <Button class="right-top in-block" @click="handleRightClick">
  176 + <CaretRightOutlined class="icon-rotate child-icon" />
148 </Button> 177 </Button>
149 </div> 178 </div>
150 <div> 179 <div>
151 - <Button class="left-bottom in-block" @click="handleClick(3)">  
152 - <CaretLeftOutlined class="icon-rotate child-icon" @click="handleClick(3)" /> 180 + <Button class="left-bottom in-block" @click="handleBottomClick">
  181 + <CaretLeftOutlined class="icon-rotate child-icon" />
153 </Button> 182 </Button>
154 - <Button class="right-bottom in-block" @click="handleClick(4)">  
155 - <CaretDownOutlined class="icon-rotate child-icon" @click="handleClick(4)" /> 183 + <Button class="right-bottom in-block" @click="handleLeftClick">
  184 + <CaretDownOutlined class="icon-rotate child-icon" />
156 </Button> 185 </Button>
157 </div> 186 </div>
158 187
159 - <Button class="circle" @click="handleClick(5)" /> 188 + <Button class="circle" @click="handleClick" />
160 </div> 189 </div>
161 </div> 190 </div>
162 <div class="flex justify-center mt-8"> 191 <div class="flex justify-center mt-8">
@@ -339,12 +339,13 @@ @@ -339,12 +339,13 @@
339 } 339 }
340 340
341 function handleDetail(record: Recordable) { 341 function handleDetail(record: Recordable) {
342 - const { id, tbDeviceId, deviceProfile } = record; 342 + const { id, tbDeviceId, deviceProfile, deviceType } = record;
343 const { transportType } = deviceProfile || {}; 343 const { transportType } = deviceProfile || {};
344 openDrawer(true, { 344 openDrawer(true, {
345 id, 345 id,
346 tbDeviceId, 346 tbDeviceId,
347 transportType, 347 transportType,
  348 + deviceType,
348 }); 349 });
349 } 350 }
350 351