| | |
| | | <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> |
| | |
| | | <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> |
| | |
| | | <script lang="ts"> |
| | | import screenfull from 'screenfull'; |
| | | import { lineApi } from '/@/api/intelligentLine'; |
| | | import {toRefs, reactive, ref, onMounted, onUnmounted, computed, nextTick} from 'vue'; |
| | | import {toRefs, reactive, ref, onMounted, onUnmounted, computed, nextTick, onActivated} from 'vue'; |
| | | import {useRoute} from 'vue-router'; |
| | | import { storeToRefs } from 'pinia'; |
| | | import { initBackEndControlRoutes } from '/@/router/backEnd'; |
| | |
| | | // 定义接口来定义对象的类型 |
| | | interface stateType { |
| | | present: string; |
| | | isScreenfull: boolean; |
| | | path: string; |
| | | socket: any; |
| | | socketData: string; |
| | |
| | | const route = useRoute(); |
| | | const state = reactive<stateType>({ |
| | | present: '', |
| | | isScreenfull: false, |
| | | path: '', |
| | | socketData: '', |
| | | socket: null, |
| | |
| | | getLine(state.id) |
| | | getUrl(state.id) |
| | | }); |
| | | onActivated(()=>{ |
| | | onScreenfullClick(); |
| | | }) |
| | | |
| | | const dataList = computed(() => { |
| | | return userInfos.value.dataList; |
| | |
| | | const getLine = async (id:string) => { |
| | | let res = await lineApi().getLine({ id: id }); |
| | | if (res.data.code === '200') { |
| | | userInfos.value.dataList = res.data.data; |
| | | userInfos.value.dataList = res.data.data |
| | | } else { |
| | | ElMessage({ |
| | | type: 'warning', |
| | |
| | | |
| | | // 全屏 |
| | | 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); |
| | | }; |
| | | |
| | | // 返回 |
| | |
| | | width: 100%; |
| | | height: 100%; |
| | | display: flex; |
| | | justify-content: center; |
| | | justify-content: left; |
| | | align-items: flex-start; |
| | | overflow: hidden; |
| | | overflow-x: auto; |
| | | overflow-y: auto; |
| | | overflow-y: hidden; |
| | | overflow-x: hidden; |
| | | overflow: auto; |
| | | } |
| | | |
| | | .line-map { |
| | |
| | | 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 { |
| | |
| | | animation: circle 30s linear infinite; |
| | | } |
| | | } |
| | | |
| | | .star { |
| | | position: inherit; |
| | | width: 100%; |
| | | height: 100%; |
| | | z-index: 99999; |
| | | left: 0; |
| | | top: 0; |
| | | img { |