| | |
| | | <template> |
| | | <div class="container" id="screenFull"> |
| | | <div class="big-title" @click="goBack()">国泰新华智能巡检系统</div> |
| | | <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="全屏" :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i> |
| | | <!-- <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>--> |
| | | <!-- <div>全屏</div>--> |
| | | <!-- </div>--> |
| | | <div class="backBtn" @click="goBack()"> |
| | | <img src="../../../assets/loginPage/back-icon.png"/> |
| | | <div>退出</div> |
| | |
| | | </div> |
| | | <div class="blocks"> |
| | | <div> |
| | | <div class="warning-part"> |
| | | <div class="warning-part" ref="draggableElement"> |
| | | <div class="warn-tit">异常警报:</div> |
| | | <div class="warn-msg" v-if="excepOrder && excepOrder.length>0"> |
| | | <div class="warn-item" v-for="(item,index) in excepOrder" :key="index"> |
| | |
| | | data: Array<any>; |
| | | excepOrder: Array<any>; |
| | | id: string; |
| | | defaultImg: string |
| | | defaultImg: string; |
| | | isDragging:boolean |
| | | initialX:number|null |
| | | initialY:number|null |
| | | xOffset:number|null |
| | | yOffset:number|null |
| | | timer: null | any |
| | | } |
| | | export default { |
| | | name: 'intelligentLine', |
| | |
| | | data: [], |
| | | excepOrder: [], |
| | | id: '', |
| | | defaultImg: new URL('../../../assets/default-img.jpg',import.meta.url).href |
| | | defaultImg: new URL('../../../assets/default-img.jpg',import.meta.url).href, |
| | | isDragging: false, |
| | | initialX: 0, |
| | | initialY: 0, |
| | | xOffset: 0, |
| | | yOffset: 0, |
| | | timer: null |
| | | }); |
| | | |
| | | onMounted(() => { |
| | | setInterval(() => { |
| | | state.timer = setInterval(() => { |
| | | state.present = new Date().toLocaleString(); |
| | | }, 1000); |
| | | let curId = route.query.id |
| | | state.id = curId.toString() |
| | | getLine(state.id) |
| | | // getUrl(state.id) |
| | | getUrl(state.id) |
| | | draggableElement.value.addEventListener('mousedown', handleMouseDown); |
| | | draggableElement.value.addEventListener('mousemove', handleMouseMove); |
| | | draggableElement.value.addEventListener('mouseup', handleMouseUp); |
| | | }); |
| | | onActivated(()=>{ |
| | | onScreenfullClick(); |
| | | }) |
| | | |
| | | const draggableElement = ref(null); |
| | | const dataList = computed(() => { |
| | | return userInfos.value.dataList; |
| | | }); |
| | |
| | | }; |
| | | // 监听socket消息 |
| | | state.socket.onmessage = (msg) => { |
| | | console.log(msg.data,'msg.data') |
| | | console.log(msg.data.rfidInfos,'rfidInfos') |
| | | if (msg.data === '连接成功') return; |
| | | userInfos.value.dataList = JSON.parse(msg.data); |
| | | userInfos.value.dataList = JSON.parse(msg.data).rfidInfos; |
| | | state.excepOrder = JSON.parse(msg.data).excepOrder; |
| | | }; |
| | | } |
| | | } else { |
| | |
| | | window.history.go(-1); |
| | | }; |
| | | |
| | | const handleMouseDown = (e) => { |
| | | state.initialX = e.clientX - state.xOffset; |
| | | state.initialY = e.clientY - state.yOffset; |
| | | state.isDragging = true; |
| | | }; |
| | | |
| | | const handleMouseMove = (e) => { |
| | | if (state.isDragging) { |
| | | state.xOffset = e.clientX - state.initialX; |
| | | state.yOffset = e.clientY - state.initialY; |
| | | |
| | | draggableElement.value.style.transform = `translate3d(${state.xOffset}px, ${state.yOffset}px, 0)`; |
| | | } |
| | | }; |
| | | |
| | | const handleMouseUp = () => { |
| | | state.isDragging = false; |
| | | }; |
| | | |
| | | // 页面关闭处理 |
| | | onUnmounted(() => { |
| | | // 销毁监听 |
| | |
| | | console.log('socket已经关闭'); |
| | | }; |
| | | }) |
| | | clearInterval(state.timer) |
| | | draggableElement.value.removeEventListener('mousedown', handleMouseDown); |
| | | draggableElement.value.removeEventListener('mousemove', handleMouseMove); |
| | | draggableElement.value.removeEventListener('mouseup', handleMouseUp); |
| | | }); |
| | | return { |
| | | dataList, |
| | | draggableElement, |
| | | goBack, |
| | | onScreenfullClick, |
| | | ...toRefs(state) |
| | |
| | | |
| | | div { |
| | | margin-bottom: 5px; |
| | | display: flex; |
| | | align-items: flex-start; |
| | | &:last-of-type { |
| | | margin-bottom: 0; |
| | | } |
| | | span { |
| | | display: inline-block; |
| | | white-space: nowrap; |
| | | width: 50%; |
| | | font-size: 13px; |
| | | color: #fff; |
| | | text-align: left; |
| | | word-break: break-all; |
| | | |
| | | &:first-of-type { |
| | | text-align: right; |
| | |
| | | div { |
| | | width: 100%; |
| | | margin-bottom: 5px; |
| | | display: flex; |
| | | align-items: flex-start; |
| | | &:last-of-type { |
| | | margin-bottom: 0; |
| | | } |
| | | span { |
| | | display: inline-block; |
| | | white-space: nowrap; |
| | | width: 50%; |
| | | font-size: 13px; |
| | | color: #fff; |
| | | text-align: left; |
| | | word-break: break-all; |
| | | |
| | | &:first-of-type { |
| | | text-align: right; |
| | |
| | | div { |
| | | width: 100%; |
| | | margin-bottom: 2px; |
| | | display: flex; |
| | | align-items: flex-start; |
| | | &:last-of-type { |
| | | margin-bottom: 0; |
| | | } |
| | | span { |
| | | width: 50%; |
| | | display: inline-block; |
| | | white-space: nowrap; |
| | | font-size: 12px; |
| | | color: #fff; |
| | | text-align: left; |
| | | word-break: break-all; |
| | | |
| | | &:first-of-type { |
| | | text-align: right; |
| | |
| | | right: 60px; |
| | | padding: 10px; |
| | | color: rgb(0, 255, 255); |
| | | backdrop-filter: blur(5px); |
| | | |
| | | .warn-tit{ |
| | | height: 26px; |