#读取地图文件优化

Junjie

2024-11-22 d13a01d1769f29b336e5b9f8612c6d41aaabbbb1

 src/main/webapp/views/console.html

@@ -31,19 +31,19 @@
                     </div>
                     <div v-else-if="col.value == 4">
                        <!-- 站点 -->
                        <div class="site" @click="openSite(col.data)">{{col.data}}</div>
                        <div class="site" :id="'site-' + col.data" @click="openSite(col.data)">{{col.data}}</div>
                     </div>
                     <div v-else-if="col.value == 5">
                        <!-- 充电桩 -->
                        <div class="item" style="font-size: 24px">&#9889;</div>
                     </div>
                     <div v-else-if="col.value < 0">
                        <!-- 禁止显示区域 -->
                        <div class="item" style="visibility: hidden">{{idx}}</div>
                     </div>
                     <div v-else-if="col.value == -999">
                        <!-- 路径占用区域 -->
                        <div class="item" style="background:#f83333;color: #fff;">{{idx}}</div>
                     </div>
                     <div v-else-if="col.value < 0">
                        <!-- 禁止显示区域 -->
                        <div class="item" style="visibility: hidden">{{idx}}</div>
                     </div>
                     <div v-else>
                        <div class="item" v-if="col.data.length > 0">{{col.data}}</div>
@@ -73,10 +73,11 @@
            <!--输出楼层-->
            <div style="height: 100%;">
               <div class="floorBtnBox" v-for="(lev,idx) in floorList">
                  <el-button @click="changFloor(lev)">{{lev}}F</el-button>
                  <el-button :style="{background:currentLev === lev ? '#7DCDFF':''}" @click="changFloor(lev)">{{lev}}F</el-button>
               </div>
               <div>
                  <el-button @click="testMove()">测试移动车</el-button>
<!--                  <el-button @click="testMove()">测试移动车</el-button>-->
<!--                  <el-button @click="resetMap()">重置地图</el-button>-->
               </div>
            </div>
         </div>
@@ -186,7 +187,7 @@
                     <li><span>条码名称</span><span class="right">扫码时间</span></li>
                  </div>
                  <div id="barcode1" class="table-body">

                     <li v-for="(item,index) in codeList1" :key="index"><span>{{item.barcode}}</span><span class="right">{{item.time}}</span></li>
                  </div>
               </div>
               <div class="tablebox">
@@ -194,7 +195,7 @@
                     <li><span>条码名称</span><span class="right">扫码时间</span></li>
                  </div>
                  <div id="barcode2" class="table-body">

                     <li v-for="(item,index) in codeList2" :key="index"><span>{{item.barcode}}</span><span class="right">{{item.time}}</span></li>
                  </div>
               </div>
            </div>
@@ -339,6 +340,9 @@
               liftList: [], //提升机集合
               systemStatus: true,//系统运行状态
               consoleInterval: null,//定时器存储变量
               codeList1: [],//条码List
               codeList2: [],//条码List
               ws: null,
            },
            created() {
               this.init()
@@ -348,31 +352,39 @@
            },
            methods: {
               init() {
                  this.ws = new WebSocket("ws://" + window.location.host + baseUrl + "/console/websocket");
                  this.ws.onopen = this.webSocketOnOpen
                  this.ws.onerror = this.webSocketOnError
                  this.ws.onmessage = this.webSocketOnMessage
                  this.ws.onclose = this.webSocketClose

                  this.getMap(this.currentLev)
                  this.getSystemRunningStatus() //获取系统运行状态

                  this.consoleInterval = setInterval(() => {
                     this.getShuttleStateInfo() //获取四向穿梭车信息
                     this.getLiftStateInfo() //获取提升机信息
                     this.getSiteInfo() //获取输送站点数据
                     this.getMap(this.currentLev) //获取实时地图数据
                     this.getCodeData()//获取条码
                  }, 1000)
               },
               //获取地图数据
               getMap(lev) {
                  $.ajax({
                     type: "get",
                     url: baseUrl + "/console/map/" + lev + "/auth",
                     headers: {
                        'token': localStorage.getItem('token')
                     },
                     success: (res) => {
                        let data = res.data
                        let tmp = []
                        for (let i = 1; i < data.length - 1; i++) {
                           tmp.push(data[i])
                        }
                        this.map = tmp
                     }
                  })
                  this.sendWs(JSON.stringify({
                     "url": "/console/map/auth",
                     "data": lev
                  }))
               },
               setMap(res) {
                  //获取地图数据
                  let data = res.data
                  let tmp = []
                  for (let i = 1; i < data.length - 1; i++) {
                     tmp.push(data[i])
                  }
                  // console.log(tmp)
                  this.map = tmp
               },
               openSite(id) {
                  this.siteWindow = true; //打开站点信息弹窗
@@ -400,59 +412,79 @@

                  })
               },
               getSiteInfo() {
                  //获取输送站点数据
                  this.sendWs(JSON.stringify({
                     "url": "/console/latest/data/site",
                     "data": {}
                  }))
               },
               setSiteInfo(res) {
                  //获取输送站点数据
                  if (res.code === 200){
                     var sites = res.data;
                     for (var i = 0; i < sites.length; i++){
                        var siteEl = $("#site-"+sites[i].siteId);
                        siteEl.attr("class", "site " + sites[i].siteStatus);
                        if (sites[i].workNo != null && sites[i].workNo>0) {
                           siteEl.html(sites[i].siteId + "[" + sites[i].workNo + "]");
                        } else {
                           siteEl.html(sites[i].siteId);
                        }
                     }
                  } else if (res.code === 403){
                     parent.location.href = baseUrl+"/login";
                  }  else {
                     console.log(res.msg);
                  }
               },
               changFloor(lev) {
                  this.currentLev = lev
                  this.currentLevShuttleList = []
                  this.getMap(lev)
               },
               getShuttleStateInfo() {
                  this.sendWs(JSON.stringify({
                     "url": "/shuttle/table/shuttle/state",
                     "data": {}
                  }))
               },
               setShuttleStateInfo(res) {
                  // 四向穿梭车信息表获取
                  let that = this
                  $.ajax({
                     url: baseUrl + "/shuttle/table/shuttle/state",
                     headers: {
                        'token': localStorage.getItem('token')
                     },
                     method: 'POST',
                     success: function(res) {
                        if (res.code == 200) {
                           let currentLevShuttle = []//当前楼层小车集合
                           res.data.forEach((item,idx) => {
                              if (item.point != undefined && item.point != null) {
                                 if (item.point.z == that.currentLev) {
                                    currentLevShuttle.push(item);
                                 }
                              }
                           })
                           that.currentLevShuttleList = currentLevShuttle
                           that.shuttleList = res.data

                           if (that.shuttleColorList.length == 0) {
                              let colorList = []//随机小车颜色
                              res.data.forEach((item,idx) => {
                                 colorList[item.shuttleNo] = that.colorRGB()
                              })
                              that.shuttleColorList = colorList
                  if (res.code == 200) {
                     let currentLevShuttle = []//当前楼层小车集合
                     res.data.forEach((item,idx) => {
                        if (item != null && item.point != undefined && item.point != null) {
                           if (item.point.z == that.currentLev) {
                              currentLevShuttle.push(item);
                           }
                        }
                     })
                     that.currentLevShuttleList = currentLevShuttle
                     that.shuttleList = res.data

                     if (that.shuttleColorList.length == 0) {
                        let colorList = []//随机小车颜色
                        res.data.forEach((item,idx) => {
                           colorList[item.shuttleNo] = that.colorRGB()
                        })
                        that.shuttleColorList = colorList
                     }
                  });
                  }
               },
               getLiftStateInfo() {
                  // 提升机信息表获取
                  let that = this
                  $.ajax({
                     url: baseUrl + "/lift/table/lift/state",
                     headers: {
                        'token': localStorage.getItem('token')
                     },
                     method: 'POST',
                     success: function(res) {
                        if (res.code == 200) {
                           that.liftList = res.data
                        }
                     }
                  });
                  this.sendWs(JSON.stringify({
                     "url": "/lift/table/lift/state",
                     "data": {}
                  }))
               },
               setLiftStateInfo(res) {
                  // 提升机信息表获取
                  if (res.code == 200) {
                     this.liftList = res.data
                  }
               },
               systemSwitch() {
                  // 系统开关
@@ -611,6 +643,69 @@
                     }
                  }
                  return data;//返回小车号集合
               },
               resetMap() {
                  //重置地图
                  let that = this
                  $.ajax({
                     url:baseUrl+"/console/map/resetMap/" + this.currentLev,
                     headers:{
                        'token': localStorage.getItem('token')
                     },
                     data:{},
                     method:'get',
                     success:function (res) {
                        that.$message({
                           message: that.currentLev + '层地图重置完成',
                           type: 'success'
                        });
                     }
                  })
               },
               getCodeData(){
                  this.sendWs(JSON.stringify({
                     "url": "/console/barcode/output/site",
                     "data": {}
                  }))
               },
               setCodeData(res) {
                  if(res.code === 200){
                     let data = JSON.parse(res.data)
                     if (data.length <= 5) {
                        this.codeList1 = data;
                     } else {
                        this.codeList1 = data.slice(0, 5);
                        this.codeList2 = data.splice(5, 10);
                     }
                  }
               },
               webSocketOnOpen(e) {
                  console.log("open");
               },
               webSocketOnError(e) {
                  console.log(e);
               },
               webSocketOnMessage(e) {
                  const result = JSON.parse(e.data);
                  if (result.url == "/shuttle/table/shuttle/state") {
                     this.setShuttleStateInfo(JSON.parse(result.data))
                  }else if (result.url == "/lift/table/lift/state") {
                     this.setLiftStateInfo(JSON.parse(result.data))
                  }else if (result.url == "/console/latest/data/site") {
                     this.setSiteInfo(JSON.parse(result.data))
                  }else if (result.url == "/console/map/auth") {
                     this.setMap(JSON.parse(result.data))
                  }else if (result.url == "/console/barcode/output/site") {
                     this.setCodeData(JSON.parse(result.data))
                  }
               },
               webSocketClose(e) {
                  console.log("close");
               },
               sendWs(message) {
                  if (this.ws.readyState == WebSocket.OPEN) {
                     this.ws.send(message)
                  }
               }
            }
         })