| | |
| | | </div> |
| | | </div> |
| | | <div class="blocks"> |
| | | <div> |
| | | <div class="star-pic"> |
| | | <div class="star-bg"><img src="../../../assets/loginPage/star-bg.png" /></div> |
| | | <div class="star"><img src="../../../assets/loginPage/device-pic.png" /></div> |
| | |
| | | <div class="tip" v-else>抱歉,暂时查询不到巡检路线...</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script lang="ts"> |
| | |
| | | const state = reactive<stateType>({ |
| | | present: '', |
| | | isScreenfull: false, |
| | | path: 'http://192.168.0.29:8008/ws/test/', |
| | | path: '', |
| | | socketData: '', |
| | | socket: null, |
| | | data: [], |
| | |
| | | }, 1000); |
| | | let curId = route.query.id |
| | | state.id = curId.toString() |
| | | console.log(state.id) |
| | | getLine(state.id) |
| | | init(state.id); |
| | | getUrl(state.id) |
| | | }); |
| | | |
| | | const dataList = computed(() => { |
| | | return userInfos.value.dataList; |
| | | }); |
| | | |
| | | // socket获取数据 |
| | | const init = (id:string) => { |
| | | // 获取url |
| | | |
| | | const getUrl =async (id:string)=>{ |
| | | 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') { |
| | | alert('您的浏览器不支持socket'); |
| | | } else { |
| | | // 实例化socket |
| | | // debugger |
| | | let uid = userInfos.value.uid.toString() |
| | | var url = state.path + uid + '*' + id; |
| | | console.log(url,'url') |
| | | console.log(url,'url',uid,'uid') |
| | | url = url.replace('https', 'ws').replace('http', 'ws'); |
| | | console.log(url, '获取地址'); |
| | | state.socket = new window.WebSocket(url); |
| | |
| | | // 监听socket消息 |
| | | state.socket.onmessage = (msg) => { |
| | | if (msg.data === '连接成功') return; |
| | | console.log(msg.data,'data') |
| | | userInfos.value.dataList = JSON.parse(msg.data); |
| | | }; |
| | | } |
| | | }; |
| | | } else { |
| | | ElMessage({ |
| | | type: 'warning', |
| | | message: res.data.msg |
| | | }); |
| | | } |
| | | } |
| | | |
| | | const send = () => { |
| | | state.socket.send(params); |
| | | }; |
| | | // const send = () => { |
| | | // state.socket.send(params); |
| | | // }; |
| | | |
| | | // 接口获取数据 |
| | | const getLine = async (id:string) => { |
| | |
| | | .blocks { |
| | | width: 100%; |
| | | height: calc(100% - 90px); |
| | | padding: 20px 40px 30px; |
| | | padding: 10px 40px 35px; |
| | | box-sizing: border-box; |
| | | |
| | | &>div{ |
| | | width: 100%; |
| | | height: 100%; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: flex-start; |
| | | overflow: hidden; |
| | | overflow-x: auto; |
| | | overflow-y: auto; |
| | | } |
| | | |
| | | .line-map { |
| | | display: flex; |