From abdc7313b9e2c5a3e09d42cbaee48c6f131d7173 Mon Sep 17 00:00:00 2001 From: Your Name <123456> Date: 星期三, 17 八月 2022 09:14:43 +0800 Subject: [PATCH] lct --- src/views/intellectInspect/intelligentLine/index.vue | 899 +++++++++++++++++++++++++++++++++++++++-------------------- 1 files changed, 597 insertions(+), 302 deletions(-) diff --git a/src/views/intellectInspect/intelligentLine/index.vue b/src/views/intellectInspect/intelligentLine/index.vue index 50d8ed4..da39b51 100644 --- a/src/views/intellectInspect/intelligentLine/index.vue +++ b/src/views/intellectInspect/intelligentLine/index.vue @@ -142,7 +142,7 @@ const res = await lineApi().getUrl(); if (res.data.code === '200') { state.path = 'http://' + res.data.data.ip + ':' + res.data.data.port + '/ws/test/' - if (typeof window.WebSocket === 'undefined') { + if (typeof WebSocket === 'undefined') { alert('您的浏览器不支持socket'); } else { // 实例化socket @@ -152,7 +152,7 @@ console.log(url,'url',uid,'uid') url = url.replace('https', 'ws').replace('http', 'ws'); console.log(url, '获取地址'); - state.socket = new window.WebSocket(url); + state.socket = new WebSocket(url); // 监听socket连接 state.socket.onopen = () => { console.log('socket连接成功'); @@ -231,120 +231,605 @@ }; } }; -// export default { -// name: 'NewForm', -// props: { -// -// }, -// data(){ -// return{ -// present: '', -// isScreenfull: false, -// path: "http://192.168.0.29:8008/ws/test/", -// socket: null, -// socketData: '', -// data: [] -// } -// }, -// created() { -// setInterval(() => { -// this.present = new Date().toLocaleString() -// }, 1000) -// }, -// mounted () { -// // 初始化 -// this.init() -// // this.getLine() -// }, -// methods:{ -// goBack(){ -// window.history.go(-1) -// }, -// -// async getLine (){ -// let res = await lineApi().getLine({ id: '80647416891768832' }); -// if (res.data.code === '200') { -// console.log(res.data.data,'获取巡检点') -// this.data = res.data.data -// console.log(this.data,'---') -// } else { -// ElMessage({ -// type: 'warning', -// message: res.data.msg -// }); -// } -// }, -// -// // 全屏点击时 -// onScreenfullClick(){ -// const t = this -// if (!screenfull.isEnabled) { -// ElMessage.warning('暂不不支持全屏'); -// return false; -// } -// screenfull.toggle(); -// screenfull.on('change', () => { -// if (screenfull.isFullscreen) { -// t.isScreenfull = true -// } -// else{ -// t.isScreenfull = false -// } -// }); -// }, -// -// // socket获取数据 -// init: function () { -// if(typeof(window.WebSocket) === "undefined"){ -// alert("您的浏览器不支持socket") -// }else{ -// // 实例化socket -// var url = this.path + '80938081556545536' -// url = url.replace("https","ws").replace("http","ws"); -// console.log(url,'获取地址') -// this.socket = new window.WebSocket(url) -// // 监听socket连接 -// this.socket.onopen = this.open -// // 监听socket错误信息 -// this.socket.onerror = this.error -// // 监听socket消息 -// this.socket.onmessage = this.getMessage -// } -// }, -// open: function () { -// console.log("socket连接成功") -// }, -// error: function () { -// console.log("连接错误") -// }, -// getMessage: function (msg) { -// console.log(typeof msg.data,'type') -// if(msg.data =='连接成功') return -// this.socketData = msg.data -// console.log(JSON.parse(this.socketData),'------------------',) -// if(typeof JSON.parse(this.socketData) == Array){ -// this.data = JSON.parse(this.socketData) -// console.log(this.data) -// } -// // console.log(msg,'msg') -// // console.log(this.data,'data-------') -// }, -// send: function () { -// this.socket.send(params) -// }, -// close: function () { -// console.log("socket已经关闭") -// } -// }, -// destroyed () { -// // 销毁监听 -// this.socket.onclose = this.close -// } -// } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped lang="scss"> + @media screen and (min-width: 1366px) { + .big-title { + font-size: 28px; + margin: 10px 0 20px; + } + .btns { + position: absolute; + z-index: 99999; + right: 60px; + top: 40px; + div { + font-size: 16px; + color: #00ffff; + } + } + .line-item { + width: calc((100vw - 40px) / 6); + padding-left: 20px; + display: flex; + flex-direction: column; + align-items: flex-start; + margin-right: 20px; + flex-wrap: nowrap; + + .picbox { + width: 100%; + height: 180px; + padding: 10px; + margin-bottom: 40px; + box-sizing: border-box; + + img { + display: block; + width: 100%; + height: 100px; + margin-bottom: 8px; + border-radius: 4px; + } + p { + font-size: 14px; + white-space: nowrap; + color: rgba(255, 255, 255, 0.8); + margin-top: 10px; + span { + color: #fff; + } + } + } + } + .item { + width: calc((100vw - 40px) / 6); + height: calc((100vh - 130px) / 5); + padding: 0 20px 20px 50px; + position: relative; + box-sizing: border-box; + border-left: 1px solid #36fcfc; + + &:last-of-type { + border: none; + } + + section { + width: 24px; + height: 24px; + border-radius: 50%; + position: absolute; + border: 1px solid rgba(0, 225, 255, 0.6); + top: -12px; + left: 10px; + + .dot { + position: absolute; + width: 12px; + height: 12px; + left: 5px; + top: 5px; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border: 1px solid #0072ff; + border-radius: 50%; + background-color: #00e1ff; + z-index: 2; + } + .pulse { + position: absolute; + width: 48px; + height: 48px; + left: -13px; + top: -13px; + border: 1px solid #00e1ff; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; + z-index: 1; + opacity: 0; + -webkit-animation: warn 2s ease-out; + -moz-animation: warn 2s ease-out; + animation: warn 2s ease-out; + -webkit-animation-iteration-count: infinite; + -moz-animation-iteration-count: infinite; + animation-iteration-count: infinite; + box-shadow: 1px 1px 30px #00e1ff; + } + .pulse1 { + position: absolute; + width: 48px; + height: 48px; + left: -13px; + top: -13px; + border: 1px solid #00e1ff; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; + z-index: 1; + opacity: 0; + -webkit-animation: warn1 2s ease-out; + -moz-animation: warn1 2s ease-out; + animation: warn1 2s ease-out; + -webkit-animation-iteration-count: infinite; + -moz-animation-iteration-count: infinite; + animation-iteration-count: infinite; + box-shadow: 1px 1px 30px #00e1ff; + } + } + & > div { + padding: 10px 0; + transform: translateY(-14px); + border-radius: 8px; + background-image: linear-gradient(to right, rgba(8, 109, 209, 0.4), rgba(11, 255, 255, 0.2)); + border: 1px solid rgba(54, 252, 252, 1); + display: flex; + flex-direction: column; + justify-content: center; + + div { + margin-bottom: 5px; + &:last-of-type { + margin-bottom: 0; + } + span { + display: inline-block; + white-space: nowrap; + width: 50%; + font-size: 13px; + color: #fff; + text-align: left; + + &:first-of-type { + text-align: right; + color: rgba(255, 255, 255, 0.8); + } + } + } + } + .noBorder{ + border: 1px solid rgba(54, 252, 252, 0.1); + } + .redBorder{ + border: 1px solid #ff0000; + } + p { + width: 140px; + height: 50px; + font-size: 18px; + line-height: 48px; + text-align: center; + color: #fff; + border-radius: 8px; + background-image: linear-gradient(to right, rgba(11, 255, 255, 0.2), rgba(8, 109, 209, 0.4)); + border: 1px solid rgba(54, 252, 252, 0.6); + } + } + .finish-point { + position: absolute; + width: 90px; + height: 90px; + border: 2px solid #0072ff; + left: -30px; + top: -45px; + border-radius: 50%; + + & > div { + width: 80px; + height: 80px; + position: absolute; + left: 3px; + top: 3px; + background: #0072ff; + border-radius: 50%; + color: #fff; + font-size: 16px; + line-height: 80px; + text-align: center; + font-weight: bolder; + } + } + } + + @media screen and (min-width: 1200px) and (max-width: 1366px){ + .big-title { + font-size: 28px; + margin: 10px 0 20px; + } + .btns { + position: absolute; + z-index: 99999; + right: 40px; + top: 40px; + div { + font-size: 14px; + color: #00ffff; + } + } + .line-item { + width: calc((100vw - 40px) / 5); + padding-left: 20px; + display: flex; + flex-direction: column; + align-items: flex-start; + margin-right: 20px; + flex-wrap: nowrap; + .picbox { + width: 100%; + height: 180px; + padding: 10px; + margin-bottom: 40px; + box-sizing: border-box; + + img { + display: block; + width: 100%; + height: 100px; + margin-bottom: 6px; + border-radius: 4px; + } + p { + font-size: 14px; + white-space: nowrap; + color: rgba(255, 255, 255, 0.8); + margin-top: 10px; + span { + color: #fff; + } + } + } + } + .item { + width: calc((100vw - 40px) / 5); + height: calc((100vh - 130px) / 5); + padding: 0 20px 20px 40px; + position: relative; + box-sizing: border-box; + border-left: 1px solid #36fcfc; + + &:last-of-type { + border: none; + } + + section { + width: 24px; + height: 24px; + border-radius: 50%; + position: absolute; + border: 1px solid rgba(0, 225, 255, 0.6); + top: -12px; + left: 10px; + + .dot { + position: absolute; + width: 12px; + height: 12px; + left: 5px; + top: 5px; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border: 1px solid #0072ff; + border-radius: 50%; + background-color: #00e1ff; + z-index: 2; + } + .pulse { + position: absolute; + width: 48px; + height: 48px; + left: -13px; + top: -13px; + border: 1px solid #00e1ff; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; + z-index: 1; + opacity: 0; + -webkit-animation: warn 2s ease-out; + -moz-animation: warn 2s ease-out; + animation: warn 2s ease-out; + -webkit-animation-iteration-count: infinite; + -moz-animation-iteration-count: infinite; + animation-iteration-count: infinite; + box-shadow: 1px 1px 30px #00e1ff; + } + .pulse1 { + position: absolute; + width: 48px; + height: 48px; + left: -13px; + top: -13px; + border: 1px solid #00e1ff; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; + z-index: 1; + opacity: 0; + -webkit-animation: warn1 2s ease-out; + -moz-animation: warn1 2s ease-out; + animation: warn1 2s ease-out; + -webkit-animation-iteration-count: infinite; + -moz-animation-iteration-count: infinite; + animation-iteration-count: infinite; + box-shadow: 1px 1px 30px #00e1ff; + } + } + & > div { + width: 90%; + padding: 10px 0; + transform: translateY(-14px); + border-radius: 8px; + background-image: linear-gradient(to right, rgba(8, 109, 209, 0.4), rgba(11, 255, 255, 0.2)); + border: 1px solid rgba(54, 252, 252, 1); + display: flex; + flex-direction: column; + justify-content: center; + + div { + width: 100%; + margin-bottom: 5px; + &:last-of-type { + margin-bottom: 0; + } + span { + display: inline-block; + white-space: nowrap; + width: 50%; + font-size: 13px; + color: #fff; + text-align: left; + + &:first-of-type { + text-align: right; + color: rgba(255, 255, 255, 0.8); + } + } + } + } + .noBorder{ + border: 1px solid rgba(54, 252, 252, 0.1); + } + .redBorder{ + border: 1px solid #ff0000; + } + p { + width: 140px; + height: 50px; + font-size: 18px; + line-height: 48px; + text-align: center; + color: #fff; + border-radius: 8px; + background-image: linear-gradient(to right, rgba(11, 255, 255, 0.2), rgba(8, 109, 209, 0.4)); + border: 1px solid rgba(54, 252, 252, 0.6); + } + } + .finish-point { + position: absolute; + width: 80px; + height: 80px; + border: 1px solid #0072ff; + left: -20px; + top: -40px; + border-radius: 50%; + + & > div { + width: 70px; + height: 70px; + position: absolute; + left: 4px; + top: 4px; + background: #0072ff; + border-radius: 50%; + color: #fff; + font-size: 14px; + line-height: 70px; + text-align: center; + font-weight: bolder; + } + } + } + + @media screen and (max-width: 1200px){ + .big-title { + font-size: 20px; + margin: 5px 0 10px; + } + .btns { + position: absolute; + z-index: 99999; + right: 20px; + top: 40px; + div { + font-size: 12px; + color: #00ffff; + } + } + .line-item { + width: 20vw; + padding-left: 10px; + display: flex; + flex-direction: column; + align-items: flex-start; + margin-right: 20px; + flex-wrap: nowrap; + .picbox { + width: 100%; + height: 160px; + padding: 10px; + margin-bottom: 30px; + box-sizing: border-box; + + img { + display: block; + width: 100%; + height: 80px; + margin-bottom: 10px; + border-radius: 4px; + } + p { + font-size: 12px; + color: rgba(255, 255, 255, 0.8); + margin-top: 6px; + span { + color: #fff; + } + } + } + } + .item { + width: 20vw; + height: calc((100vh - 130px) / 5); + padding: 0 0 20px 30px; + position: relative; + box-sizing: border-box; + border-left: 1px solid #36fcfc; + + &:last-of-type { + border: none; + } + + section { + width: 24px; + height: 24px; + border-radius: 50%; + position: absolute; + border: 1px solid rgba(0, 225, 255, 0.6); + top: -12px; + left: 2px; + + .dot { + position: absolute; + width: 12px; + height: 12px; + left: 5px; + top: 5px; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border: 1px solid #0072ff; + border-radius: 50%; + background-color: #00e1ff; + z-index: 2; + } + .pulse { + position: absolute; + width: 48px; + height: 48px; + left: -13px; + top: -13px; + border: 1px solid #00e1ff; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; + z-index: 1; + opacity: 0; + -webkit-animation: warn 2s ease-out; + -moz-animation: warn 2s ease-out; + animation: warn 2s ease-out; + -webkit-animation-iteration-count: infinite; + -moz-animation-iteration-count: infinite; + animation-iteration-count: infinite; + box-shadow: 1px 1px 30px #00e1ff; + } + .pulse1 { + position: absolute; + width: 48px; + height: 48px; + left: -13px; + top: -13px; + border: 1px solid #00e1ff; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; + z-index: 1; + opacity: 0; + -webkit-animation: warn1 2s ease-out; + -moz-animation: warn1 2s ease-out; + animation: warn1 2s ease-out; + -webkit-animation-iteration-count: infinite; + -moz-animation-iteration-count: infinite; + animation-iteration-count: infinite; + box-shadow: 1px 1px 30px #00e1ff; + } + } + & > div { + width: 80%; + padding: 4px 0; + transform: translateY(-14px); + border-radius: 8px; + background-image: linear-gradient(to right, rgba(8, 109, 209, 0.4), rgba(11, 255, 255, 0.2)); + border: 1px solid rgba(54, 252, 252, 1); + display: flex; + flex-direction: column; + justify-content: center; + + div { + width: 100%; + margin-bottom: 2px; + &:last-of-type { + margin-bottom: 0; + } + span { + width: 50%; + display: inline-block; + white-space: nowrap; + font-size: 12px; + color: #fff; + text-align: left; + + &:first-of-type { + text-align: right; + color: rgba(255, 255, 255, 0.8); + } + } + } + } + .noBorder{ + border: 1px solid rgba(54, 252, 252, 0.1); + } + .redBorder{ + border: 1px solid #ff0000; + } + p { + width: 140px; + height: 50px; + font-size: 18px; + line-height: 48px; + text-align: center; + color: #fff; + border-radius: 8px; + background-image: linear-gradient(to right, rgba(11, 255, 255, 0.2), rgba(8, 109, 209, 0.4)); + border: 1px solid rgba(54, 252, 252, 0.6); + } + } + .finish-point { + position: absolute; + width: 70px; + height: 70px; + border: 1px solid #0072ff; + left: -10px; + top: -35px; + border-radius: 50%; + + & > div { + width: 60px; + height: 60px; + position: absolute; + left: 4px; + top: 4px; + background: #0072ff; + border-radius: 50%; + color: #fff; + font-size: 12px; + line-height: 60px; + text-align: center; + font-weight: bolder; + } + } + } + @keyframes warn { 0% { transform: scale(0.3); @@ -436,9 +921,7 @@ .big-title { height: 40px; line-height: 40px; - font-size: 28px; font-weight: bold; - margin: 10px 0 20px; text-align: center; color: #fff; display: flex; @@ -446,10 +929,6 @@ justify-content: center; } .btns { - position: absolute; - z-index: 99999; - right: 60px; - top: 40px; display: flex; align-items: center; .fullbtn { @@ -462,10 +941,6 @@ color: #00ffff; margin-right: 10px; } - div { - font-size: 16px; - color: #00ffff; - } } .backBtn { @@ -476,10 +951,6 @@ width: 14px; height: 14px; margin-right: 10px; - } - div { - font-size: 16px; - color: #00ffff; } } } @@ -506,37 +977,7 @@ align-items: flex-start; .line-item { - width: calc((100vw - 180px) / 6); - padding-left: 20px; - display: flex; - flex-direction: column; - align-items: flex-start; - margin-right: 20px; - flex-wrap: nowrap; - .picbox { - width: 100%; - height: calc((100vh - 130px) / 5); - padding: 10px; - margin-bottom: 40px; - box-sizing: border-box; - - img { - display: block; - width: 100%; - height: 100px; - margin-bottom: 10px; - border-radius: 4px; - } - p { - font-size: 14px; - color: rgba(255, 255, 255, 0.8); - margin-top: 10px; - span { - color: #fff; - } - } - } .area-head { position: relative; width: 100%; @@ -677,128 +1118,6 @@ .more-info { width: 100%; - .item { - width: calc((100vw - 120px) / 6); - height: calc((100vh - 130px) / 5); - padding: 0 50px 20px; - position: relative; - box-sizing: border-box; - border-left: 1px solid #36fcfc; - - &:last-of-type { - border: none; - } - - section { - width: 24px; - height: 24px; - border-radius: 50%; - position: absolute; - border: 1px solid rgba(0, 225, 255, 0.6); - top: -12px; - left: 10px; - - .dot { - position: absolute; - width: 12px; - height: 12px; - left: 5px; - top: 5px; - -webkit-border-radius: 50%; - -moz-border-radius: 50%; - border: 1px solid #0072ff; - border-radius: 50%; - background-color: #00e1ff; - z-index: 2; - } - .pulse { - position: absolute; - width: 48px; - height: 48px; - left: -13px; - top: -13px; - border: 1px solid #00e1ff; - -webkit-border-radius: 50%; - -moz-border-radius: 50%; - border-radius: 50%; - z-index: 1; - opacity: 0; - -webkit-animation: warn 2s ease-out; - -moz-animation: warn 2s ease-out; - animation: warn 2s ease-out; - -webkit-animation-iteration-count: infinite; - -moz-animation-iteration-count: infinite; - animation-iteration-count: infinite; - box-shadow: 1px 1px 30px #00e1ff; - } - .pulse1 { - position: absolute; - width: 48px; - height: 48px; - left: -13px; - top: -13px; - border: 1px solid #00e1ff; - -webkit-border-radius: 50%; - -moz-border-radius: 50%; - border-radius: 50%; - z-index: 1; - opacity: 0; - -webkit-animation: warn1 2s ease-out; - -moz-animation: warn1 2s ease-out; - animation: warn1 2s ease-out; - -webkit-animation-iteration-count: infinite; - -moz-animation-iteration-count: infinite; - animation-iteration-count: infinite; - box-shadow: 1px 1px 30px #00e1ff; - } - } - & > div { - padding: 10px 0; - transform: translateY(-14px); - border-radius: 8px; - background-image: linear-gradient(to right, rgba(8, 109, 209, 0.4), rgba(11, 255, 255, 0.2)); - border: 1px solid rgba(54, 252, 252, 1); - display: flex; - flex-direction: column; - justify-content: center; - - div { - margin-bottom: 5px; - &:last-of-type { - margin-bottom: none; - } - span { - display: inline-block; - width: 50%; - font-size: 13px; - color: #fff; - text-align: left; - - &:first-of-type { - text-align: right; - color: rgba(255, 255, 255, 0.8); - } - } - } - } - .noBorder{ - border: 1px solid rgba(54, 252, 252, 0.1); - } - .redBorder{ - border: 1px solid #ff0000; - } - p { - width: 140px; - height: 50px; - font-size: 18px; - line-height: 48px; - text-align: center; - color: #fff; - border-radius: 8px; - background-image: linear-gradient(to right, rgba(11, 255, 255, 0.2), rgba(8, 109, 209, 0.4)); - border: 1px solid rgba(54, 252, 252, 0.6); - } - } .warning { & > section { border: 1px solid #ff0000; @@ -850,30 +1169,6 @@ width: 100%; height: 80px; border-left: none; - .finish-point { - position: absolute; - width: 90px; - height: 90px; - border: 2px solid #0072ff; - left: -30px; - top: -45px; - border-radius: 50%; - - & > div { - width: 80px; - height: 80px; - position: absolute; - left: 3px; - top: 3px; - background: #0072ff; - border-radius: 50%; - color: #fff; - font-size: 16px; - line-height: 80px; - text-align: center; - font-weight: bolder; - } - } } } .pic-tit { -- Gitblit v1.9.2