| | |
| | | <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> |
| | | <div class="blocks"> |
| | | <div> |
| | | <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"> |
| | | <div class="i-tit"> |
| | | 编号{{item.pointCode}} 巡检异常! |
| | | </div> |
| | | <div v-if="item.dataReportType == 2 || item.dataReportType == 3"> |
| | | 正常值:<span>{{(item.secondReferenceSign==1?'>':'>=') + item.secondReferenceValue + ',' + (item.thirdReferenceSign==3?'<':'<=') + item.thirdReferenceValue}}</span> |
| | | </div> |
| | | <div> |
| | | 巡检值: |
| | | <span v-if="item.dataReportType == 1">{{ item.firstReferenceResult==1?'正常':item.firstReferenceResult==2?'异常':'备'}}</span> |
| | | <span v-if="item.dataReportType == 2">{{ item.secondReferenceResult}}</span> |
| | | </div> |
| | | <div> |
| | | 已通知负责人:<span>{{item.hiddenDangerHandlerName}}</span> |
| | | </div> |
| | | <div> |
| | | 负责人电话:<span>{{item.hiddenDangerHandlerPhone}}</span> |
| | | </div> |
| | | <div> |
| | | 工单回执状态:<span>{{item.handlerStatus==1?'待响应':item.handlerStatus==2?'标记误报':item.handlerStatus==3?'自查处理中':item.handlerStatus==4?'已移交上报':item.handlerStatus==5?'待验收':'已完成'}}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div v-else> |
| | | 暂无异常警报 |
| | | </div> |
| | | </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> |
| | |
| | | <span>参数:</span><span class="target">{{ t.secondReferenceResult + t.quotaUnit }}</span> |
| | | </div> |
| | | <div> |
| | | <span>巡检结果:</span><span class="target">{{ t.reportResult == null ? '--' : t.reportResult == 0 ? '正常' : '异常' }}</span> |
| | | <span>巡检结果:</span><span class="target">{{ t.reportResult == null ? '--' : t.reportResult == 0 ? '正常' : t.reportResult == 1 ? '异常' : '备' }}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | socket: any; |
| | | socketData: string; |
| | | 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', |
| | |
| | | socketData: '', |
| | | socket: null, |
| | | 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) |
| | | 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 |
| | | let uid = userInfos.value.uid.toString() |
| | | var url = state.path + uid + '*' + id; |
| | | console.log(url,'url',uid,'uid') |
| | | url = url.replace('https', 'ws').replace('http', 'ws'); |
| | | console.log(url, '获取地址'); |
| | | state.socket = new WebSocket(url); |
| | | // 监听socket连接 |
| | | state.socket.onopen = () => { |
| | |
| | | }; |
| | | // 监听socket消息 |
| | | state.socket.onmessage = (msg) => { |
| | | console.log(msg.data,'msg.data') |
| | | console.log(msg.data.rfidInfos,'rfidInfos') |
| | | if (msg.data === '连接成功') return; |
| | | console.log(msg.data,'data') |
| | | userInfos.value.dataList = JSON.parse(msg.data); |
| | | userInfos.value.dataList = JSON.parse(msg.data).rfidInfos; |
| | | state.excepOrder = JSON.parse(msg.data).excepOrder; |
| | | }; |
| | | } |
| | | } else { |
| | |
| | | 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.rfidInfos |
| | | if(res.data.data.excepOrder){ |
| | | state.excepOrder = res.data.data.excepOrder |
| | | }else{ |
| | | state.excepOrder = [] |
| | | } |
| | | } else { |
| | | ElMessage({ |
| | | type: 'warning', |
| | |
| | | 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; |
| | |
| | | } |
| | | } |
| | | } |
| | | .warning-part{ |
| | | position: absolute; |
| | | width: calc((100vw - 120px) / 7); |
| | | height: calc((100vw - 120px) / 7); |
| | | background-image: linear-gradient(to right, rgba(8, 109, 209, 0.4), rgba(11, 255, 255, 0.2)); |
| | | border: 1px solid #36fcfc; |
| | | z-index: 99999; |
| | | top: 100px; |
| | | right: 60px; |
| | | padding: 10px; |
| | | color: rgb(0, 255, 255); |
| | | backdrop-filter: blur(5px); |
| | | |
| | | .warn-tit{ |
| | | height: 26px; |
| | | padding-bottom: 5px; |
| | | font-weight: bolder; |
| | | border-bottom: 1px solid rgb(0, 255, 255); |
| | | } |
| | | .warn-msg{ |
| | | width: 100%; |
| | | margin-top: 10px; |
| | | height: calc(100% - 36px); |
| | | overflow: hidden; |
| | | overflow-y: scroll; |
| | | scrollbar-width: none; /* firefox */ |
| | | -ms-overflow-style: none; /* IE 10+ */ |
| | | |
| | | &::-webkit-scrollbar { |
| | | display: none; /* Chrome Safari */ |
| | | } |
| | | .warn-item{ |
| | | padding: 0 0 10px; |
| | | margin-bottom: 10px; |
| | | border-bottom: 1px solid rgb(0, 255, 255); |
| | | |
| | | &:last-of-type{ |
| | | border-bottom: none; |
| | | margin-bottom: 0; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .star-pic { |
| | | position: absolute; |
| | | width: calc((100vw - 120px) / 7); |