自动化立库仓库-WCS系统
blame | 历史 | 补丁 | 提交 | 提交对比 | ignore whitespace
#
Junjie
4 天以前 e1e1a2d934f6bd630abb67784ba18d38f6bea28e 
 src/main/webapp/views/watch/console.html


@@ -1,22 +1,24 @@


<!DOCTYPE html>


<html lang="en">


   <head>


      <meta charset="UTF-8">


      <title>WCS控制中心</title>


      <link rel="stylesheet" href="../../static/css/animate.min.css">


      <link rel="stylesheet" href="../../static/vue/element/element.css">


      <link rel="stylesheet" href="../../static/css/watch/console_vue.css">


      <script type="text/javascript" src="../../static/js/jquery/jquery-3.3.1.min.js"></script>


      <script type="text/javascript" src="../../static/layui/layui.js"></script>


      <script type="text/javascript" src="../../static/js/handlebars/handlebars-v4.5.3.js"></script>


      <script type="text/javascript" src="../../static/js/common.js"></script>


      <script type="text/javascript" src="../../static/vue/js/vue.min.js"></script>


      <script type="text/javascript" src="../../static/vue/element/element.js"></script>


   </head>


      <head>


         <meta charset="UTF-8">


         <title>WCS控制中心</title>


         <link rel="stylesheet" href="../../static/css/animate.min.css">


         <link rel="stylesheet" href="../../static/vue/element/element.css">


         <link rel="stylesheet" href="../../static/css/watch/console_vue.css">


         <script type="text/javascript" src="../../static/js/jquery/jquery-3.3.1.min.js"></script>


         <script type="text/javascript" src="../../static/layui/layui.js"></script>


         <script type="text/javascript" src="../../static/js/handlebars/handlebars-v4.5.3.js"></script>


         <script type="text/javascript" src="../../static/js/common.js"></script>


         <script type="text/javascript" src="../../static/vue/js/vue.min.js"></script>


         <script type="text/javascript" src="../../static/vue/element/element.js"></script>


         <script src="../../static/js/gsap.min.js"></script>


         <script src="../../static/js/pixi-legacy.min.js"></script>


      </head>


   <body>


      <div id="app">


         <div style="display: flex;margin-top: 30px;margin-left: 20px;">


            <div style="width: 20%;height: 60vh;margin-right: 20px;">


         <div style="display: flex;margin-left: 20px;">


            <div style="width: 20%;height: 60vh;margin-right: 20px;margin-top: 30px;">


               <el-tabs type="border-card" v-model="activateCard" @tab-click="handleCardClick">


                  <el-tab-pane label="堆垛机" name="crn">


                     <watch-crn-card :param="crnParam"></watch-crn-card>


@@ -27,51 +29,18 @@


                  <el-tab-pane label="RGV" name="rgv">


                     <watch-rgv-card :param="rgvParam"></watch-rgv-card>


                  </el-tab-pane>


                  <el-tab-pane label="地图配置" name="mapSetting">


                  <!-- <el-tab-pane label="地图配置" name="mapSetting">


                     <map-setting-card :param="mapSettingParam"></map-setting-card>


                  </el-tab-pane>


                  </el-tab-pane> -->


               </el-tabs>


            </div>




            <map-canvas :lev="currentLev" :crn-param="crnParam" :rgv-param="rgvParam" :devp-param="devpParam" @crn-click="openCrn" @station-click="openSite" style="width: 80%; height: 100vh;"></map-canvas>




            <div style="position: absolute;top: 15px;left: 50%;display: flex;">


               <div v-if="levList.length > 1" v-for="(lev,index) in levList" :key="index" style="margin-right: 10px;">


                  <el-button :type="currentLev == lev ? 'primary' : ''" @click="switchLev(lev)" size="mini">{{ lev }}F</el-button>


               </div>


            </div>




            <div id="mapDataId" style="position: relative;margin-top: 50px;" :style="{zoom: mapSettingParam.zoom / 100}">


               <table class="excel-table">


                  <tr v-for="(row,index) in map" :key="index">


                     <td


                           v-for="(col,idx) in row" :key="idx"


                           :rowspan="col.rowSpan"


                           :colspan="col.colSpan"


                           :style="{width: col.width}"


                           v-if="col.type != 'merge'"


                     >


                        <div v-if="col.type == 'none'">


                           <div class="item" style="visibility: hidden">{{idx}}</div>


                        </div>


                        <div v-else-if="col.type == 'shelf'">


                           <div class="shelf">{{col.shelfIdx}}</div>


                        </div>


                        <div v-else-if="col.type == 'devp'">


                           <div class="site" :style="{height: col.rowPx}" :id="'site-' + getStationId(col.value)" @click="openSite(getStationId(col.value))">{{getStationId(col.value)}}</div>


                        </div>


                        <div v-else-if="col.type == 'rgv'" style="position: relative;">


                           <div class="rgv-item" v-if="getDeviceNo(col.value) != -1" :style="{width: col.width}" :id="'rgv-' + getDeviceNo(col.value)" @click="openRgv(getDeviceNo(col.value))">{{getDeviceNo(col.value)}}</div>


                           <div class="track-item" v-if="getTrackSiteNo(col.value) == -1"></div>


                           <div class="track-item" v-else :id="'rgvTrackSiteNo-' + getTrackSiteNo(col.value)"></div>


                        </div>


                        <div v-else-if="col.type == 'crn'">


                           <div class="crn-item" v-if="getDeviceNo(col.value) != -1" :style="{width: col.width}" :id="'crn-' + getDeviceNo(col.value)" @click="openCrn(getDeviceNo(col.value))">{{getDeviceNo(col.value)}}</div>


                           <div class="track-item track-crn" v-if="getTrackSiteNo(col.value) == -1"></div>


                           <div class="track-item track-crn" v-else :id="'crnTrackSiteNo-' + getTrackSiteNo(col.value)"></div>


                        </div>


                     </td>




                  </tr>


               </table>


            </div>


         </div>




@@ -81,6 +50,7 @@


      <script src="../../components/DevpCard.js"></script>


      <script src="../../components/MapSettingCard.js"></script>


      <script src="../../components/WatchRgvCard.js"></script>


      <script src="../../components/MapCanvas.js"></script>


      <script>


         var app = new Vue({


            el: '#app',


@@ -103,10 +73,13 @@


               },


               rgvParam: {


                  rgvNo: 0


               }


               },


               locMastData: []//库位数据


            },


            created() {


               this.init()


            },


            mounted() {


            },


            watch: {




@@ -116,13 +89,9 @@


                  this.getMap()


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


                  this.getLevList() //获取地图层级列表




                  this.consoleInterval = setInterval(() => {


                     this.getCrnInfo() //获取堆垛机数据


                     this.getSiteInfo() //获取输送站点数据


                     this.getRgvInfo() //获取RGV数据


                  }, 1000)


                  this.getLocMastData() //获取库位数据


               },


					


               getLevList() {


                  let that = this;


                  $.ajax({


@@ -173,6 +142,7 @@


               switchLev(lev) {


                  this.currentLev = lev;


                  this.getMap()


                  this.getLocMastData()


               },


               openCrn(id) {


                  this.crnParam.crnNo = id;


@@ -502,9 +472,48 @@


               },


               handleCardClick(tab, event) {




               },


               //获取库位数据


               getLocMastData() {


                  let that = this;


                  $.ajax({


                     url: baseUrl + "/console/map/locList",


                     headers: {


                        'token': localStorage.getItem('token')


                     },


                     method: "get",


                     data: {},


                     success: (res) => {


                        if (res.code === 200) {


                           that.locMastData = res.data;


                        }


                     }


                  })


               },


               //根据地图坐标获取库位的排列信息


               getShelfLocInfo(rowIdx, colIdx) {


                  if (!this.locMastData || this.locMastData.length === 0) {


                     return '';


                  }


                  // 在locMastData中查找匹配的库位


                  // locType字段存储的是地图坐标信息


                  let locInfo = this.locMastData.find(loc => {


                     if (!loc.locType) return false;


                     // locType格式类似 "0-1-1" (mapX-mapY-lev)


                     let parts = loc.locType.split('-');


                     if (parts.length >= 2) {


                        return parseInt(parts[0]) === rowIdx && parseInt(parts[1]) === colIdx;


                     }


                     return false;


                  });




                  if (locInfo && locInfo.row1 && locInfo.bay1) {


                     return locInfo.row1 + '-' + locInfo.bay1;


                  }


                  return '';


               }


            }


         })


      </script>


   </body>


</html>


         </script>


      </body>


      </html>