From 44ca77b3057dd7f5cd67b7a6ee89b164e3b0749b Mon Sep 17 00:00:00 2001 From: Admin <978517621@qq.com> Date: 星期四, 01 十二月 2022 13:24:43 +0800 Subject: [PATCH] Default Changelist --- src/views/intellectInspect/intelligentLine/index.vue | 59 +++++++++++++++++++++++++++++++++++------------------------ 1 files changed, 35 insertions(+), 24 deletions(-) diff --git a/src/views/intellectInspect/intelligentLine/index.vue b/src/views/intellectInspect/intelligentLine/index.vue index bfb9b95..f1d8fe8 100644 --- a/src/views/intellectInspect/intelligentLine/index.vue +++ b/src/views/intellectInspect/intelligentLine/index.vue @@ -1,14 +1,18 @@ <template> - <div class="container"> + <div class="container" id="screenFull"> <div class="big-title" @click="goBack()">国泰新华智能巡检系统</div> <div style="height: 20px;font-size: 14px;line-height: 20px; color: #00ffff; margin-top: 4px">{{ present }}</div> <div class="btns"> - <div class="fullbtn" @click="onScreenfullClick"> - <div class="toFull"> - <i class="iconfont" :title="isScreenfull ? $t('message.user.title6') : $t('message.user.title5')" :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i> - </div> - <div>全屏</div> - </div> +<!-- <div class="fullbtn" @click="onScreenfullClick">--> +<!-- <div class="toFull">--> +<!-- <i class="iconfont" :title="全屏" :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>--> +<!-- <el-icon>--> +<!-- <FullScreen v-if="isScreenfull"/>--> +<!-- <Close v-else/>--> +<!-- </el-icon>--> +<!-- </div>--> +<!-- <div>全屏</div>--> +<!-- </div>--> <div class="backBtn" @click="goBack()"> <img src="../../../assets/loginPage/back-icon.png"/> <div>退出</div> @@ -17,6 +21,7 @@ <div class="blocks"> <div> <div class="star-pic"> + <dv-decoration-12 scanDur="5" haloDur="4" class="scan"/> <div class="star-bg"><img src="../../../assets/loginPage/star-bg.png" /></div> <div class="star"><img src="../../../assets/loginPage/device-pic.png" /></div> </div> @@ -100,7 +105,6 @@ // 定义接口来定义对象的类型 interface stateType { present: string; - isScreenfull: boolean; path: string; socket: any; socketData: string; @@ -117,7 +121,6 @@ const route = useRoute(); const state = reactive<stateType>({ present: '', - isScreenfull: false, path: '', socketData: '', socket: null, @@ -134,6 +137,7 @@ state.id = curId.toString() getLine(state.id) getUrl(state.id) + onScreenfullClick(); }); const dataList = computed(() => { @@ -150,7 +154,6 @@ alert('您的浏览器不支持socket'); } else { // 实例化socket - // debugger let uid = userInfos.value.uid.toString() var url = state.path + uid + '*' + id; console.log(url,'url',uid,'uid') @@ -199,18 +202,13 @@ // 全屏 const onScreenfullClick = () => { + const element = document.getElementById('screenFull') if (!screenfull.isEnabled) { ElMessage.warning('暂不不支持全屏'); return false; } - screenfull.toggle(); - screenfull.on('change', () => { - if (screenfull.isFullscreen) { - state.isScreenfull = true; - } else { - state.isScreenfull = false; - } - }); + screenfull.toggle(element); + console.log(111111111111111) }; // 返回 @@ -237,7 +235,7 @@ }; </script> -<!-- Add "scoped" attribute to limit CSS to this component only --> +<!-- Add "scoped" attribute to limit CSS to this components only --> <style scoped lang="scss"> @media screen and (min-width: 1366px) { .big-title { @@ -1004,9 +1002,9 @@ display: flex; justify-content: center; align-items: flex-start; - overflow: hidden; - overflow-x: auto; - overflow-y: auto; + overflow: auto; + &::-webkit-scrollbar { width: 0; height: 0; color: transparent; } + &::scrollbar { width: 0; height: 0; color: transparent; } } .line-map { @@ -1365,15 +1363,28 @@ position: absolute; width: calc((100vw - 120px) / 7); height: calc((100vw - 120px) / 7); - z-index: 999999999; + z-index: 9999; bottom: 40px; right: 40px; padding: 20px; + + .scan{ + position: inherit; + width: 65%; + height: 65%; + z-index: 99997; + left: 0; + top: 0; + right: 0; + bottom: 0; + margin: auto; + } .star-bg { position: inherit; width: 100%; height: 100%; + z-index: 99998; left: 0; top: 0; img { @@ -1382,11 +1393,11 @@ animation: circle 30s linear infinite; } } - .star { position: inherit; width: 100%; height: 100%; + z-index: 99999; left: 0; top: 0; img { -- Gitblit v1.9.2