From 8b4f5b2b23023986db813242cd04f4650537decd Mon Sep 17 00:00:00 2001
From: Junjie <540245094@qq.com>
Date: 星期三, 05 十一月 2025 16:51:26 +0800
Subject: [PATCH] #

---
 src/main/webapp/views/console.html | 1635 ++++++++++++++++++++++++++++++++++-----------------------
 1 files changed, 969 insertions(+), 666 deletions(-)

diff --git a/src/main/webapp/views/console.html b/src/main/webapp/views/console.html
index e763ea9..6a06b46 100644
--- a/src/main/webapp/views/console.html
+++ b/src/main/webapp/views/console.html
@@ -1,703 +1,1006 @@
 <!DOCTYPE html>
 <html lang="en">
-<!--5灞� 28鍒� 1120搴撲綅-->
-<head>
-    <meta charset="UTF-8">
-    <title>WCS鎺у埗涓績</title>
-    <meta name="renderer" content="webkit">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
-    <link rel="stylesheet" type="text/css" href="../static/css/normalize.css">
-    <link rel="stylesheet" type="text/css" href="../static/css/common.css">
-    <link rel="stylesheet" type="text/css" href="../static/css/console.css">
-    <script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script>
-    <script type="text/javascript" src="../static/js/layer/layer.js"></script>
-    <script type="text/javascript" src="../static/js/common.js"></script>
-    <style>
-        /* layer 娣辫摑鑹叉寜閽慨鏀� */
-        /*.layui-layer-lan .layui-layer-btn {*/
-        /*border-top: none;*/
-        /*}*/
-        .layui-layer-lan .layui-layer-btn a {
-            background: #4476A7;
-            border-color: #4476A7;
-            color: #fff;
-        }
-        .layui-layer-lan .layui-layer-btn .layui-layer-btn1 {
-            background: #fff;
-            color: #333;
-            border-color: #E9E7E7;
-        }
-        .layui-layer-lan .layui-layer-btn .layui-layer-btn1:hover {
-            background-color: #f7f7f7;
-        }
-    </style>
-</head>
-<body>
-<header>
-    <!-- 绯荤粺杩愯鐘舵�� -->
-    <div class="system-state">
-        <div id="system-icon" class="system-icon-open" onclick="systemSwitch()"></div>
-        <span id="system-run-desc">绯荤粺杩愯涓�...</span>
-    </div>
+	<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/console_vue.css">
+		<link rel="stylesheet" href="../static/css/toggle-switch.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>
+		<style>
 
-    <!-- 淇℃伅灞曠ず -->
-    <div class="data-window">
-        <!-- 鏍囬 -->
-        <h1>鑷姩浠撳簱&nbsp;WCS&nbsp;鐩戞帶鍥�</h1>
+		</style>
+	</head>
+	<body>
+		<div id="app">
+			<div style="display: flex;justify-content: center;align-items: center;width: 100%;margin-top: 30px;">
+				<div id="mapDataId" style="zoom: 0.6;position: relative;">
+					<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-' + col.value" @click="openSite(col.value)">{{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" v-if="getTrackSiteNo(col.value) == -1"></div>
+									<div class="track-item" v-else :id="'crnTrackSiteNo-' + getTrackSiteNo(col.value)"></div>
+								</div>
+							</td>
 
-        <!-- 棰滆壊鎻愮ず -->
-        <div class="tips">
-            <div class="tips-item">
-                <label>鍫嗗灈鏈虹姸鎬侀鑹�:&nbsp;</label>
-                <div class="item-group">
-                    <span class="machine-put-flag">鍏ュ簱</span>
-                    <span class="machine-take-flag">鍑哄簱</span>
-                    <span class="machine-stock-move-flag">搴撳埌搴�</span>
-                    <span class="machine-site-move-flag">绔欏埌绔�</span>
-                    <span class="machine-p-move-flag">PToP</span>
-                    <span class="machine-error-flag">寮傚父</span>
-                    <span class="machine-auto-flag">鑷姩</span>
-                    <span class="machine-unauto-flag">闈炶嚜鍔�/鎵嬪姩</span>
-                </div>
-            </div>
-            <div class="tips-item">
-                <label>杈撻�佽澶囩姸鎬侀鑹�:&nbsp;</label>
-                <div class="item-group">
-                    <span class="site-auto-run-id">鑷姩+鏈夌墿+ID</span>
-                    <span class="site-auto-run">鑷姩+鏈夌墿</span>
-                    <span class="site-auto-id">鑷姩+ID</span>
-                    <span class="site-auto">鑷姩</span>
-                    <span class="site-unauto">闈炶嚜鍔�/鎵嬪姩</span>
-                </div>
-            </div>
-        </div>
-    </div>
-</header>
-<main>
+							<td>
+								<!-- 鏄剧ず琛屽彿 -->
+								<div class="item" style="background: none;color: #000;">#{{index+1}}</div>
+							</td>
+						</tr>
+					</table>
+				</div>
 
-    <!----------- 宸ュ叿鏍� ---------->
-    <!-- 鍏ュ簱鍙� -->
-    <div class="cargo-put"></div>
-    <!-- 鎵爜鍣� -->
-    <div id="code-decoder-1" class="code-decoder">
-        <span id="code-decoder-data-1" class="code-decoder-data">0</span>
-    </div>
+			</div>
 
+			<div class="footer">
+				<!-- 鎬诲紑鍏� -->
+				<div class="line-status">
+					<div class="body-head">鎬诲紑鍏�</div>
+					<div class="switch" @click="systemSwitch">
+						<label id="system-toggle" class="toggle-switch" style="margin-left: 20px;">
+							<input id="system-toggle-checked" disabled type="checkbox">
+							<div class="button">
+								<div class="light"></div>
+								<div class="dots"></div>
+								<div class="characters"></div>
+								<div class="shine"></div>
+								<div class="shadow"></div>
+							</div>
+						</label>
 
-    <!----------- 宸﹁緭閫佺嚎 ---------->
+						<div class="switch_r">
+							<p>绯荤粺鐘舵��</p>
+							<p id="system-run-desc">绯荤粺杩愯涓�</p>
+						</div>
+					</div>
+				</div>
+				<!-- 鍫嗗灈鏈虹姸鎬� -->
+				<div class="line-status">
+					<div class="body-head">鍫嗗灈鏈虹姸鎬�</div>
+					<div class="shuttle-status-box">
+						<div v-for="(item,idx) in crnList" class="state">
+							<span>鍫嗗灈鏈� {{item.crnNo}}</span>
+							<span v-if="item.crnStatus == 'machine-auto'"
+								class="state-ss machine-auto-flag">鑷姩</span>
+							<span v-else-if="item.crnStatus == 'machine-un-auto'"
+								class="state-ss machine-unauto-flag">闈炶嚜鍔�/鎵嬪姩</span>
+							<span v-else-if="item.crnStatus == 'machine-error'"
+								class="state-ss machine-error-flag">寮傚父</span>
+							<span v-else-if="item.crnStatus == 'machine-p-move'"
+								class="state-ss machine-p-move-flag">PToP</span>
+							<span v-else-if="item.crnStatus == 'machine-site-move'"
+								class="state-ss machine-site-move-flag">绔欏埌绔�</span>
+							<span v-else-if="item.crnStatus == 'machine-stock-move'"
+								class="state-ss machine-stock-move-flag">搴撳埌搴�</span>
+							<span v-else-if="item.crnStatus == 'machine-pakout'"
+								class="state-ss machine-take-flag">鍑哄簱</span>
+							<span v-else-if="item.crnStatus == 'machine-pakin'"
+								  class="state-ss machine-put-flag">鍏ュ簱</span>
+							<span v-else class="state-ss">{{item.crnStatus}}</span>
+						</div>
+					</div>
+					<div class="allStatus"><span>鎵�鏈夌姸鎬�</span></div>
+					<div class="allStatus item-group">
+						<span class="machine-put-flag">鍏ュ簱</span>
+						<span class="machine-take-flag">鍑哄簱</span>
+						<span class="machine-stock-move-flag">搴撳埌搴�</span>
+						<span class="machine-site-move-flag">绔欏埌绔�</span>
+						<span class="machine-p-move-flag">PToP</span>
+						<span class="machine-error-flag">寮傚父</span>
+						<span class="machine-auto-flag">鑷姩</span>
+						<span class="machine-unauto-flag">闈炶嚜鍔�/鎵嬪姩</span>
+					</div>
+				</div>
+				<!-- 杈撻�佺嚎鐘舵�� -->
+				<div class="line-status">
+					<div class="body-head">杈撻�佺嚎鐘舵��</div>
+					<div class="state states">
+						<span>杩愯緭绾挎�绘暟</span>
+						<span class="line-ss">9</span>
+					</div>
+					<div class="allStatus"><span>鎵�鏈夌姸鎬�</span></div>
+					<div class="allStatus item-group">
+						<span class="site-auto-run-id">鑷姩+鏈夌墿+ID</span>
+						<span class="site-auto-run">鑷姩+鏈夌墿</span>
+						<span class="site-auto-id">鑷姩+ID</span>
+						<span class="site-auto">鑷姩</span>
+						<span class="site-unauto">闈炶嚜鍔�/鎵嬪姩</span>
+					</div>
+				</div>
+				<!-- 鏉$爜琛ㄦ牸 -->
+				<div class="bar-code">
+					<div class="body-head" id="code">鏉$爜鎵弿鍣�</div>
+					<div class="tablebox">
+						<div class="table-head">
+							<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">
+						<div class="table-head">
+							<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>
+			</div>
 
-    <!-- 鍙拌溅杞ㄩ亾 -->
-    <div id="car-track-1" class="car-track">
-        <div></div>
-    </div>
+			<!-- 杈撻�佽澶囧脊绐� -->
+			<div id="siteWindow" :style="{display:siteWindow?'block':'none',zIndex: 999}" class="animate__animated animate__fadeIn">
+				<!-- 琛ㄥご -->
+				<div id="siteWindow-head">
+					<div class="detailed"></div>
+					<button @click="siteWindow = false"></button>
+				</div>
+				<!-- 琛ㄥ唴瀹� -->
+				<div class="siteWindow-body">
+					<form>
+						<!-- 璁惧鍙� -->
+						<div class="form-item">
+							<div class="form-item-label">
+								<span>璁惧鍙凤細</span>
+							</div>
+							<div class="form-item-input">
+								<input type="text" name="siteId" value="">
+							</div>
+						</div>
+						<!-- 宸ヤ綔鍙� -->
+						<div class="form-item">
+							<div class="form-item-label">
+								<span>宸ヤ綔鍙凤細</span>
+							</div>
+							<div class="form-item-input">
+								<input type="text" name="workNo" value="">
+							</div>
+						</div>
+						<!-- 宸ヤ綔鐘舵�� -->
+						<div class="form-item">
+							<div class="form-item-label">
+								<span>宸ヤ綔鐘舵�侊細</span>
+							</div>
+							<div class="form-item-input">
+								<input type="text" name="wrkSts" value="">
+							</div>
+						</div>
+						<div class="form-item">
+							<!-- 鑷姩 -->
+							<div class="form-item-checkbox">
+								<div class="form-item-label-checkbox">
+									<span>鑷姩</span>
+								</div>
+								<div class="form-item-input-checkbox">
+									<input type="checkbox" name="autoing">
+								</div>
+							</div>
+							<!-- 鏈夌墿 -->
+							<div class="form-item-checkbox">
+								<div class="form-item-label-checkbox">
+									<span>鏈夌墿</span>
+								</div>
+								<div class="form-item-input-checkbox">
+									<input type="checkbox" name="loading">
+								</div>
+							</div>
+							<!-- 鑳藉叆 -->
+							<div class="form-item-checkbox">
+								<div class="form-item-label-checkbox">
+									<span>鑳藉叆</span>
+								</div>
+								<div class="form-item-input-checkbox">
+									<input type="checkbox" name="canining">
+								</div>
+							</div>
+							<!-- 鑳藉嚭 -->
+							<div class="form-item-checkbox">
+								<div class="form-item-label-checkbox">
+									<span>鑳藉嚭</span>
+								</div>
+								<div class="form-item-input-checkbox">
+									<input type="checkbox" name="canouting">
+								</div>
+							</div>
+						</div>
+						<!-- 鍑哄叆绫诲瀷 -->
+						<div class="form-item">
+							<div class="form-item-label">
+								<span>鍑哄叆绫诲瀷锛�</span>
+							</div>
+							<div class="form-item-input">
+								<input type="text" name="ioType" value="">
+							</div>
+						</div>
+						<!-- 婧愮珯 -->
+						<div class="form-item">
+							<div class="form-item-label">
+								<span>婧愮珯锛�</span>
+							</div>
+							<div class="form-item-input">
+								<input type="text" name="sourceStaNo" value="">
+							</div>
+						</div>
+						<!-- 鐩爣绔� -->
+						<div class="form-item">
+							<div class="form-item-label">
+								<span>鐩爣绔欙細</span>
+							</div>
+							<div class="form-item-input">
+								<input type="text" name="staNo" value="">
+							</div>
+						</div>
+						<!-- 婧愬簱浣� -->
+						<div class="form-item">
+							<div class="form-item-label">
+								<span>婧愬簱浣嶏細</span>
+							</div>
+							<div class="form-item-input">
+								<input type="text" name="sourceLocNo" value="">
+							</div>
+						</div>
+						<!-- 鐩爣搴撲綅 -->
+						<div class="form-item">
+							<div class="form-item-label">
+								<span>鐩爣搴撲綅锛�</span>
+							</div>
+							<div class="form-item-input">
+								<input type="text" name="locNo" value="">
+							</div>
+						</div>
+					</form>
+				</div>
+			</div>
 
-    <!-- 鍙拌溅瀹炰緥 -->
-    <div id="site-8" class="site car">8</div>
+			<!-- 鍫嗗灈鏈哄脊绐� -->
+			<div id="crnWindow" :style="{display:crnWindow?'block':'none',zIndex: 999}" class="animate__animated animate__fadeIn">
+				<div id="crnWindow-head">
+					<div class='detailed'></div>
+					<button @click="crnWindow = false"></button>
+				</div>
+				<form>
+					<!-- 鍫嗗灈鏈哄彿 -->
+					<div class="form-item">
+						<div class="form-item-label" style>
+							<span>鍫嗗灈鏈哄彿锛�</span>
+						</div>
+						<div class="form-item-input">
+							<input type="text" name="crnNo" value="">
+						</div>
+					</div>
+					<!-- 宸ヤ綔鍙� -->
+					<div class="form-item">
+						<div class="form-item-label">
+							<span>宸ヤ綔鍙凤細</span>
+						</div>
+						<div class="form-item-input">
+							<input type="text" name="workNo" value="">
+						</div>
+					</div>
+					<!-- 绔欐簮 -->
+					<div class="form-item">
+						<div class="form-item-label">
+							<span>绔欐簮锛�</span>
+						</div>
+						<div class="form-item-input">
+							<input type="text" name="sourceStaNo" value="">
+						</div>
+					</div>
+					<!-- 鐩爣绔� -->
+					<div class="form-item">
+						<div class="form-item-label">
+							<span>鐩爣绔欙細</span>
+						</div>
+						<div class="form-item-input">
+							<input type="text" name="staNo" value="">
+						</div>
+					</div>
+					<!-- 宸ヤ綔鐘舵�� -->
+					<div class="form-item">
+						<div class="form-item-label">
+							<span>宸ヤ綔鐘舵�侊細</span>
+						</div>
+						<div class="form-item-input">
+							<input type="text" name="wrkSts" value="">
+						</div>
+					</div>
+					<!-- 鍑哄叆绫诲瀷 -->
+					<div class="form-item">
+						<div class="form-item-label">
+							<span>鍑哄叆绫诲瀷锛�</span>
+						</div>
+						<div class="form-item-input">
+							<input type="text" name="ioType" value="">
+						</div>
+					</div>
+					<!-- 婧愬簱浣� -->
+					<div class="form-item">
+						<div class="form-item-label">
+							<span>婧愬簱浣嶏細</span>
+						</div>
+						<div class="form-item-input">
+							<input type="text" name="sourceLocNo" value="">
+						</div>
+					</div>
+					<!-- 鐩爣搴撲綅 -->
+					<div class="form-item">
+						<div class="form-item-label">
+							<span>鐩爣搴撲綅锛�</span>
+						</div>
+						<div class="form-item-input">
+							<input type="text" name="locNo" value="">
+						</div>
+					</div>
+					<!-- 鍫嗗灈鏈虹姸鎬� -->
+					<div class="form-item">
+						<div class="form-item-label">
+							<span>鍫嗗灈鏈虹姸鎬侊細</span>
+						</div>
+						<div class="form-item-input">
+							<input type="text" name="crnStatus" value="">
+						</div>
+					</div>
+					<!-- 寮傚父 -->
+					<div class="form-item">
+						<div class="form-item-label">
+							<span>寮傚父锛�</span>
+						</div>
+						<div class="form-item-input">
+							<input type="text" name="error" value="">
+						</div>
+					</div>
+				</form>
+			</div>
 
-    <!-- 绗竴鍒楋紙瀹藉害 100px锛� -->
-    <div class="site-row site-row-1">
-        <div id="site-7" class="site" style="height: 20px;line-height: 20px;margin-bottom: 20px">7</div>
-        <div id="site-4" class="site" style="height: 20px;line-height: 20px;margin-bottom: 20px">4</div>
-        <div id="site-3" class="site" style="height: 20px;line-height: 20px;margin-bottom: 40px">3</div>
-        <div id="site-2" class="site" style="height: 20px;line-height: 20px;margin-bottom: 0px">2</div>
-        <div id="site-1" class="site" style="height: 20px;line-height: 20px;margin-bottom: 20px">1</div>
-    </div>
+			<!-- RGV寮圭獥 -->
+			<div id="rgvWindow" :style="{display:rgvWindow?'block':'none',zIndex: 999}" class="animate__animated animate__fadeIn">
+				<div id="rgvWindow-head">
+					<div class='detailed'></div>
+					<button @click="rgvWindow = false"></button>
+				</div>
+				<form>
+					<!-- RGV鍙� -->
+					<div class="form-item">
+						<div class="form-item-label" style>
+							<span>RGV鍙凤細</span>
+						</div>
+						<div class="form-item-input">
+							<input type="text" name="rgvNo" value="">
+						</div>
+					</div>
+					<!-- 宸ヤ綔鍙� -->
+					<div class="form-item">
+						<div class="form-item-label">
+							<span>宸ヤ綔鍙凤細</span>
+						</div>
+						<div class="form-item-input">
+							<input type="text" name="workNo" value="">
+						</div>
+					</div>
+					<!-- 绔欐簮 -->
+					<div class="form-item">
+						<div class="form-item-label">
+							<span>绔欐簮锛�</span>
+						</div>
+						<div class="form-item-input">
+							<input type="text" name="sourceStaNo" value="">
+						</div>
+					</div>
+					<!-- 鐩爣绔� -->
+					<div class="form-item">
+						<div class="form-item-label">
+							<span>鐩爣绔欙細</span>
+						</div>
+						<div class="form-item-input">
+							<input type="text" name="staNo" value="">
+						</div>
+					</div>
+					<!-- 宸ヤ綔鐘舵�� -->
+					<div class="form-item">
+						<div class="form-item-label">
+							<span>宸ヤ綔鐘舵�侊細</span>
+						</div>
+						<div class="form-item-input">
+							<input type="text" name="wrkSts" value="">
+						</div>
+					</div>
+					<!-- 鍑哄叆绫诲瀷 -->
+					<div class="form-item">
+						<div class="form-item-label">
+							<span>鍑哄叆绫诲瀷锛�</span>
+						</div>
+						<div class="form-item-input">
+							<input type="text" name="ioType" value="">
+						</div>
+					</div>
+					<!-- 婧愬簱浣� -->
+					<div class="form-item">
+						<div class="form-item-label">
+							<span>婧愬簱浣嶏細</span>
+						</div>
+						<div class="form-item-input">
+							<input type="text" name="sourceLocNo" value="">
+						</div>
+					</div>
+					<!-- 鐩爣搴撲綅 -->
+					<div class="form-item">
+						<div class="form-item-label">
+							<span>鐩爣搴撲綅锛�</span>
+						</div>
+						<div class="form-item-input">
+							<input type="text" name="locNo" value="">
+						</div>
+					</div>
+					<!-- RGV鐘舵�� -->
+					<div class="form-item">
+						<div class="form-item-label">
+							<span>RGV鐘舵�侊細</span>
+						</div>
+						<div class="form-item-input">
+							<input type="text" name="rgvStatus" value="">
+						</div>
+					</div>
+					<!-- 寮傚父 -->
+					<div class="form-item">
+						<div class="form-item-label">
+							<span>寮傚父锛�</span>
+						</div>
+						<div class="form-item-input">
+							<input type="text" name="error" value="">
+						</div>
+					</div>
+				</form>
+			</div>
 
-    <!-- 璐ф灦 + 鍫嗗灈鏈� + 鍏ュ簱绔欑偣 + 鍑哄簱绔欑偣 -->
-    <div class="main-part">
-        <!--绗竴鎺�-->
-        <div class="lane">
-            <span class="row-no">1#</span>
-            <!-- 璐ф灦 -->
-            <div class="stock-group">
-                <div id="site-6" class="site" style="">6</div>
-                <button class="item">1</button>
-                <button class="item">2</button>
-                <button class="item">3</button>
-                <button class="item">4</button>
-                <button class="item">5</button>
-                <button class="item">6</button>
-                <button class="item">7</button>
-                <button class="item">8</button>
-                <button class="item">9</button>
-                <button class="item">10</button>
-                <button class="item">11</button>
-                <button class="item">12</button>
-                <button class="item">13</button>
-                <button class="item">14</button>
-                <button class="item">15</button>
-                <button class="item">16</button>
-                <button class="item">17</button>
-                <button class="item">18</button>
-                <button class="item">19</button>
-                <button class="item">20</button>
-                <button class="item">21</button>
-                <button class="item">22</button>
-                <button class="item">23</button>
-                <button class="item">24</button>
-                <button class="item">25</button>
-                <button class="item">26</button>
-                <button class="item">27</button>
-                <button class="item">28</button>
-                <button class="item">29</button>
-                <button class="item">30</button>
-                <button class="item">31</button>
-                <button class="item">32</button>
-                <button class="item">33</button>
-                <button class="item">34</button>
-                <div class="site site-none">&nbsp;&nbsp;&nbsp;&nbsp;</div>
-            </div>
-            <!-- 鍫嗗灈鏈� -->
-            <div class="crn">
-                <hr class="pathway">
-                <div id="crn-1" class="machine"></div>
-            </div>
-            <!-- 璐ф灦 -->
-            <div class="stock-group">
-                <div id="site-5" class="site" style="">5</div>
-                <button class="item">1</button>
-                <button class="item">2</button>
-                <button class="item">3</button>
-                <button class="item">4</button>
-                <button class="item">5</button>
-                <button class="item">6</button>
-                <button class="item">7</button>
-                <button class="item">8</button>
-                <button class="item">9</button>
-                <button class="item">10</button>
-                <button class="item">11</button>
-                <button class="item">12</button>
-                <button class="item">13</button>
-                <button class="item">14</button>
-                <button class="item">15</button>
-                <button class="item">16</button>
-                <button class="item">17</button>
-                <button class="item">18</button>
-                <button class="item">19</button>
-                <button class="item">20</button>
-                <button class="item">21</button>
-                <button class="item">22</button>
-                <button class="item">23</button>
-                <button class="item">24</button>
-                <button class="item">25</button>
-                <button class="item">26</button>
-                <button class="item">27</button>
-                <button class="item">28</button>
-                <button class="item">29</button>
-                <button class="item">30</button>
-                <button class="item">31</button>
-                <button class="item">32</button>
-                <button class="item">33</button>
-                <button class="item">34</button>
-                <div class="site site-none">&nbsp;&nbsp;&nbsp;&nbsp;</div>
-            </div>
-            <span class="row-no">2#</span>
-        </div>
-    </div>
-</main>
+		</div>
+		<script>
+			var app = new Vue({
+				el: '#app',
+				data: {
+					map: [],//鍦板浘鏁版嵁
+					siteWindow: false, //绔欑偣寮圭獥鏄剧ず榛樿涓嶆樉绀�
+					crnWindow: false, //鍫嗗灈鏈哄脊绐楁樉绀洪粯璁や笉鏄剧ず
+					rgvWindow: false, //rgv寮圭獥鏄剧ず榛樿涓嶆樉绀�
+					crnList: [], //鍫嗗灈鏈洪泦鍚�
+					liftList: [], //鎻愬崌鏈洪泦鍚�
+					systemStatus: true,//绯荤粺杩愯鐘舵��
+					consoleInterval: null,//瀹氭椂鍣ㄥ瓨鍌ㄥ彉閲�
+					codeList1: [],//鏉$爜List
+					codeList2: [],//鏉$爜List
+					crnInitPosition: [],
+					rgvPosition: [],
+				},
+				created() {
+					this.init()
+				},
+				watch: {
 
-<!-- 寮圭獥 -->
-<!-- 杈撻�佽澶囧脊绐� -->
-<div id="siteWindow" style="display: none">
-    <form>
-        <!-- 绗竴琛� -->
-        <div class="form-item" style="width: 25%">
-            <div class="form-item-label">
-                <span>璁惧鍙�</span>
-            </div>
-            <div class="form-item-input">
-                <input type="text" name="siteId" value="" disabled="disabled" style="width: 4rem">
-            </div>
-        </div>
-        <div class="form-item" style="width: 25%">
-            <div class="form-item-label">
-                <span>宸ヤ綔鍙�</span>
-            </div>
-            <div class="form-item-input">
-                <input type="text" name="workNo" value="" disabled="disabled" style="width: 4rem">
-            </div>
-        </div>
-        <div class="form-item" style="width: 45%">
-            <div class="form-item-label">
-                <span>宸ヤ綔鐘舵��</span>
-            </div>
-            <div class="form-item-input">
-                <input type="text" name="wrkSts" value="" disabled="disabled" style="width: 10rem">
-            </div>
-        </div>
+				},
+				methods: {
+					init() {
+						this.getMap()
+						this.getSystemRunningStatus() //鑾峰彇绯荤粺杩愯鐘舵��
 
-        <!-- 绗簩琛� -->
-        <div class="form-item" style="width: 20%">
-            <div class="form-item-label">
-                <span>鑷姩</span>
-            </div>
-            <div class="form-item-input">
-                <input type="checkbox" name="autoing" disabled="disabled" style="width: 1rem">
-            </div>
-        </div>
-        <div class="form-item" style="width: 20%">
-            <div class="form-item-label">
-                <span>鏈夌墿</span>
-            </div>
-            <div class="form-item-input">
-                <input type="checkbox" name="loading" disabled="disabled" style="width: 1rem">
-            </div>
-        </div>
-        <div class="form-item" style="width: 20%">
-            <div class="form-item-label">
-                <span>鑳藉叆</span>
-            </div>
-            <div class="form-item-input">
-                <input type="checkbox" name="canining" disabled="disabled" style="width: 1rem">
-            </div>
-        </div>
-        <div class="form-item" style="width: 20%">
-            <div class="form-item-label">
-                <span>鑳藉嚭</span>
-            </div>
-            <div class="form-item-input">
-                <input type="checkbox" name="canouting" disabled="disabled" style="width: 1rem">
-            </div>
-        </div>
+						this.consoleInterval = setInterval(() => {
+							this.getCrnInfo() //鑾峰彇鍫嗗灈鏈烘暟鎹�
+							this.getSiteInfo() //鑾峰彇杈撻�佺珯鐐规暟鎹�
+							this.getRgvInfo() //鑾峰彇RGV鏁版嵁
+							// this.getCodeData()//鑾峰彇鏉$爜
+						}, 1000)
+					},
+					//鑾峰彇鍦板浘鏁版嵁
+					getMap() {
+						let rowPx = 35;
+						let colPx = 35;
 
-        <!-- 绗笁琛� -->
-        <div class="form-item" style="width: 40%">
-            <div class="form-item-label">
-                <span>鍑哄叆绫诲瀷</span>
-            </div>
-            <div class="form-item-input">
-                <input type="text" name="ioType" value="" disabled="disabled" style="width: 8rem">
-            </div>
-        </div>
-        <div class="form-item" style="width: 25%">
-            <div class="form-item-label">
-                <span>婧愮珯</span>
-            </div>
-            <div class="form-item-input">
-                <input type="text" name="sourceStaNo" value="" disabled="disabled" style="width: 4rem">
-            </div>
-        </div>
-        <div class="form-item" style="width: 25%">
-            <div class="form-item-label">
-                <span>鐩爣绔�</span>
-            </div>
-            <div class="form-item-input">
-                <input type="text" name="staNo" value="" disabled="disabled" style="width: 4rem">
-            </div>
-        </div>
+						$.ajax({
+							url: "./test.json",
+							method: "get",
+							success: (res) => {
+								let data = res.data;
+								let mapData = JSON.parse(data)
+								mapData.forEach((row) => {
+									let shelfIdx = 1;
+									row.forEach((col) => {
+										if (col.type == 'shelf') {
+											col.shelfIdx = shelfIdx;
+											shelfIdx++;
+										}
 
-        <!-- 绗洓琛� -->
-        <div class="form-item" style="width: 40%">
-            <div class="form-item-label">
-                <span>婧愬簱浣�</span>
-            </div>
-            <div class="form-item-input">
-                <input type="text" name="sourceLocNo" value="" disabled="disabled" style="width: 8rem">
-            </div>
-        </div>
-        <div class="form-item" style="width: 40%">
-            <div class="form-item-label">
-                <span>鐩爣搴撲綅</span>
-            </div>
-            <div class="form-item-input">
-                <input type="text" name="locNo" value="" disabled="disabled" style="width: 8rem">
-            </div>
-        </div>
-    </form>
-</div>
+										col.rowPx = (col.rowSpan * rowPx) + "px";
+										col.colPx = (col.colSpan * colPx) + "px";
 
-<!-- 鍫嗗灈鏈哄脊绐� -->
-<div id="crnWindow" style="display: none">
-    <form>
-        <!-- 绗竴琛� -->
-        <div class="form-item" style="width: 23%">
-            <div class="form-item-label"  style="width: 87px">
-                <span>鍫嗗灈鏈哄彿</span>
-            </div>
-            <div class="form-item-input">
-                <input type="text" name="crnNo" value="" disabled="disabled" style="width: 3rem">
-            </div>
-        </div>
-        <div class="form-item" style="width: 25%">
-            <div class="form-item-label">
-                <span>宸ヤ綔鍙�</span>
-            </div>
-            <div class="form-item-input">
-                <input type="text" name="workNo" value="" disabled="disabled" style="width: 5rem">
-            </div>
-        </div>
-        <div class="form-item" style="width: 23%">
-            <div class="form-item-label">
-                <span>婧愮珯</span>
-            </div>
-            <div class="form-item-input">
-                <input type="text" name="sourceStaNo" value="" disabled="disabled" style="width: 4rem">
-            </div>
-        </div>
-        <div class="form-item" style="width: 25%">
-            <div class="form-item-label">
-                <span>鐩爣绔�</span>
-            </div>
-            <div class="form-item-input">
-                <input type="text" name="staNo" value="" disabled="disabled" style="width: 4rem">
-            </div>
-        </div>
+										col.width = (col.cellWidth / 30) + "px";
+									})
+								})
+								this.map = mapData;
+							}
+						})
+					},
+					openCrn(id) {
+						this.crnWindow = true; //鎵撳紑绔欑偣淇℃伅寮圭獥
+						$(".detailed").empty();
+						$('.detailed').append(id + '鍙峰爢鍨涙満');
+						$.ajax({
+							url: baseUrl + "/console/crn/detail",
+							headers: {
+								'token': localStorage.getItem('token')
+							},
+							data: {
+								crnNo: id
+							},
+							method: 'post',
+							success: function(res) {
+								for (var val in res.data) {
+									var find = $("#crnWindow").find(":input[name='" + val + "']");
+									if (find[0].type === 'text') {
+										find.val(res.data[val]);
+									} else if (find[0].type === 'checkbox') {
+										find.attr("checked", res.data[val] === 'Y');
+									}
+								}
+							}
+						})
+					},
+					openRgv(id) {
+						this.rgvWindow = true; //鎵撳紑RGV淇℃伅寮圭獥
+						$(".detailed").empty();
+						$('.detailed').append(id + '鍙稲GV');
+						$.ajax({
+							url: baseUrl + "/console/rgv/detail",
+							headers: {
+								'token': localStorage.getItem('token')
+							},
+							data: {
+								rgvNo: id
+							},
+							method: 'post',
+							success: function(res) {
+								for (var val in res.data) {
+									var find = $("#rgvWindow").find(":input[name='" + val + "']");
+									if (find[0].type === 'text') {
+										find.val(res.data[val]);
+									} else if (find[0].type === 'checkbox') {
+										find.attr("checked", res.data[val] === 'Y');
+									}
+								}
+							}
 
-        <!-- 绗簩琛� -->
-        <div class="form-item" style="width: 45%">
-            <div class="form-item-label" style="width: 87px">
-                <span>宸ヤ綔鐘舵��</span>
-            </div>
-            <div class="form-item-input">
-                <input type="text" name="wrkSts" value="" disabled="disabled" style="width: 10rem">
-            </div>
-        </div>
-        <div class="form-item" style="width: 45%">
-            <div class="form-item-label">
-                <span>鍑哄叆绫诲瀷</span>
-            </div>
-            <div class="form-item-input">
-                <input type="text" name="ioType" value="" disabled="disabled" style="width: 10rem">
-            </div>
-        </div>
+						})
+					},
+					openSite(id) {
+						this.siteWindow = true; //鎵撳紑绔欑偣淇℃伅寮圭獥
+						$(".detailed").empty();
+						$('.detailed').append(id + '绔欑偣璇︾粏淇℃伅');
+						$.ajax({
+							url: baseUrl + "/console/site/detail",
+							headers: {
+								'token': localStorage.getItem('token')
+							},
+							data: {
+								siteId: id
+							},
+							method: 'post',
+							success: function(res) {
+								for (var val in res.data) {
+									var find = $("#siteWindow").find(":input[name='" + val + "']");
+									if (find[0].type === 'text') {
+										find.val(res.data[val]);
+									} else if (find[0].type === 'checkbox') {
+										find.attr("checked", res.data[val] === 'Y');
+									}
+								}
+							}
 
-        <!-- 绗笁琛� -->
-        <div class="form-item" style="width: 45%">
-            <div class="form-item-label" style="width: 87px">
-                <span>婧愬簱浣�</span>
-            </div>
-            <div class="form-item-input">
-                <input type="text" name="sourceLocNo" value="" disabled="disabled" style="width: 10rem">
-            </div>
-        </div>
-        <div class="form-item" style="width: 45%">
-            <div class="form-item-label">
-                <span>鐩爣搴撲綅</span>
-            </div>
-            <div class="form-item-input">
-                <input type="text" name="locNo" value="" disabled="disabled" style="width: 10rem">
-            </div>
-        </div>
+						})
+					},
+					getSiteInfo() {
+						//鑾峰彇杈撻�佺珯鐐规暟鎹�
+						$.ajax({
+							url: baseUrl + "/console/latest/data/site",
+							headers: {'token': localStorage.getItem('token')},
+							method: 'POST',
+							success: function (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);
+								}
+							}
+						});
+					},
+					getCrnInfo() {
+						let that = this
+						//鑾峰彇鍫嗗灈鏈烘暟鎹�
+						$.ajax({
+							url: baseUrl + "/console/latest/data/crn",
+							headers: {'token': localStorage.getItem('token')},
+							method: 'POST',
+							success: function (res) {
+								if (res.code === 200) {
+									var crns = res.data;
 
-        <!-- 绗洓琛� -->
-        <div class="form-item" style="width: 95%">
-            <div class="form-item-label">
-                <span>鍫嗗灈鏈虹姸鎬�</span>
-            </div>
-            <div class="form-item-input">
-                <input type="text" name="crnStatus" disabled="disabled" style="width: 25rem">
-            </div>
-        </div>
-        <div class="form-item" style="width: 95%">
-            <div class="form-item-label" style="width: 87px">
-                <span>寮傚父</span>
-            </div>
-            <div class="form-item-input">
-                <input type="text" name="error" disabled="disabled" style="width: 25rem">
-            </div>
-        </div>
-    </form>
-</div>
+									if (that.crnInitPosition.length == 0) {
+										let position = []
+										for (var i = 0; i < crns.length; i++) {
+											var crnEl = $("#crn-" + crns[i].crnId);
+											position.push({
+												id: crns[i].crnId,
+												left: crnEl.offset().left + crnEl.width()
+											})
+										}
+										that.crnInitPosition = position
+										return;
+									}
 
-</body>
-<script>
-    var crn1Position = 0;
-    var crn2Position = 0;
-    // 鍒濆鍖�
-    getSitesInfo();
-    getCrnInfo();
-    getSystemRunningStatus();
-    getBarcodeInfo();
-    // 瀹炴椂璁块棶
-    setInterval(function () {
-        getCrnInfo();
-        getSystemRunningStatus();
-        getBarcodeInfo()
-    }, 1000);
-    setInterval(function () {
-        getSitesInfo();
-    }, 3000);
+									let crnList = []
+									for (var i = 0; i < crns.length; i++) {
+										var crnEl = $("#crn-" + crns[i].crnId);
+										crnEl.attr("class", "crn-item " + crns[i].crnStatus);
 
-    // 绯荤粺杩愯寮�鍏�
-    function systemSwitch() {
-        if (parent.systemRunning){
-            layer.prompt({title: '璇疯緭鍏ュ彛浠わ紝骞跺仠姝� WCS 绯荤粺', formType: 1,   shadeClose: true}, function(pass, idx){
-                layer.close(idx);
-                doSwitch(0, pass); // 鍋滄wcs绯荤粺
-            });
-        } else {
-            doSwitch(1); // 鍚姩wcs绯荤粺
-        }
-    }
+										if (crns[i].bay < 0 || crns[i].bay === -2) {
+											crns[i].bay = 1
+										}
 
-    // 璇锋眰鏈嶅姟鍣ㄦ帶鍒秝cs绯荤粺杩愯鐘舵��
-    function doSwitch(operatorType, password) {
-        // 鍔犺浇tips
-        var index = layer.load(1, {
-            shade: [0.1,'#fff']
-        });
-        $.ajax({
-            url: baseUrl+ "/console/system/switch",
-            headers: {'token': localStorage.getItem('token')},
-            // async: false,
-            data: {
-                operatorType: operatorType,
-                password: password
-            },
-            method: 'POST',
-            success: function (res) {
-                layer.close(index);
-                if (res.code === 200){
-                    if (res.data.status) {
-                        $('#system-icon').attr("class", "system-icon-open");
-                        $('#system-run-desc').html("绯荤粺杩愯涓�...");
-                        parent.systemRunning = true;
-                    } else {
-                        $('#system-icon').attr("class", "system-icon-close");
-                        $('#system-run-desc').html("绯荤粺宸插仠姝�!");
-                        parent.systemRunning = false;
-                    }
-                } else if (res.code === 403){
-                    parent.location.href = baseUrl+"/login";
-                }  else {
-                    console.log(res.msg);
-                    
-                }
-            }
-        });
+										let basePosition = 0;
+										that.crnInitPosition.forEach((item) => {
+											if (item.id == crns[i].crnId) {
+												basePosition = item.left
+											}
+										})
 
-    }
+										var offSet = crns[i].offset;
+										let finalOffset = basePosition + offSet;
+										if (finalOffset < basePosition) {
+											finalOffset = basePosition;
+										}
+										crnEl.animate({left: finalOffset + 'px'}, 1000);
 
-    // 鑾峰彇wcs绯荤粺杩愯鐘舵��
-    function getSystemRunningStatus() {
-        $.ajax({
-            url: baseUrl+ "/console/system/running/status",
-            headers: {'token': localStorage.getItem('token')},
-            method: 'POST',
-            success: function (res) {
-                if (res.code === 200){
-                    if (res.data.status) {
-                        $('#system-icon').attr("class", "system-icon-open");
-                        $('#system-run-desc').html("绯荤粺杩愯涓�...");
-                        parent.systemRunning = true;
-                    } else {
-                        $('#system-icon').attr("class", "system-icon-close");
-                        $('#system-run-desc').html("绯荤粺宸插仠姝�!");
-                        parent.systemRunning = false;
-                    }
-                } else if (res.code === 403){
-                    parent.location.href = baseUrl+"/login";
-                }  else {
-                    console.log(res.msg);
-                }
-            }
-        });
-    }
+										crnList.push({
+											crnNo: crns[i].crnId,
+											crnStatus: crns[i].crnStatus
+										})
+									}
+									that.crnList = crnList;
 
-    // 杈撻�佽澶囧疄鏃舵暟鎹幏鍙�
-    function getSitesInfo(){
-        $.ajax({
-            url: baseUrl+ "/console/latest/data/site",
-            headers: {'token': localStorage.getItem('token')},
-            method: 'POST',
-            success: function (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);
-                        }
-                        if (i+1===8) {
-                            carAnimate(i+1, Number(sites[i].nearbySta));
-                        }
-                    }
-                } else if (res.code === 403){
-                    parent.location.href = baseUrl+"/login";
-                }  else {
-                    console.log(res.msg);
-                }
-            }
-        });
-    }
+								} else if (res.code === 403) {
+									parent.location.href = baseUrl + "/login";
+								} else {
+									console.log(res.msg);
+								}
+							}
+						});
+					},
+					getRgvInfo() {
+						let that = this
+						//鑾峰彇RGV鏁版嵁
+						$.ajax({
+							url: baseUrl + "/console/latest/data/rgv",
+							headers: {'token': localStorage.getItem('token')},
+							method: 'POST',
+							success: function (res) {
+								if (res.code === 200) {
+									var rgvs = res.data;
 
-    // 鍫嗗灈鏈哄疄鏃舵暟鎹幏鍙�
-    function getCrnInfo(){
-        $.ajax({
-            url: baseUrl+ "/console/latest/data/crn",
-            headers: {'token': localStorage.getItem('token')},
-            method: 'POST',
-            success: function (res) {
-                if (res.code === 200){
-                    var crns = res.data;
-                    for (var i = 0; i < crns.length; i++){
-                        var crnEl = $("#crn-"+crns[i].crnId);
-                        crnEl.attr("class", "machine " + crns[i].crnStatus);
+									if (that.rgvPosition.length == 0) {
+										let position = []
+										for (var i = 0; i < rgvs.length; i++) {
+											var rgvEl = $("#rgv-" + rgvs[i].rgvId);
+											position.push({
+												id: rgvs[i].rgvId,
+												trackSiteNo: rgvs[i].trackSiteNo,
+												initLeft: rgvEl.offset().left
+											})
+										}
+										that.rgvPosition = position
+										return;
+									}
 
-                        var unit = $('.item').eq(0).width()+4;
-                        crnEl.animate({left: (crns[i].bay * unit + 50) +'px'}, 1000);
-                        // crnEl.animate({left: (crns[i].bay * ($('.item').eq(0).width()+4)) +'px'}, 1000);
-                    }
-                } else if (res.code === 403){
-                    parent.location.href = baseUrl+"/login";
-                }  else {
-                    console.log(res.msg);
-                }
-            }
-        });
-    }
+									for (var i = 0; i < rgvs.length; i++) {
+										var rgvEl = $("#rgv-" + rgvs[i].rgvId);
+										if (rgvs[i].rgvStatus == 'IDLE') {
+											rgvEl.attr("class", "rgv-item");
+										}else if (rgvs[i].rgvStatus == 'WORKING') {
+											rgvEl.attr("class", "rgv-item machine-working");
+										}
 
-    // 鎵爜鍣ㄥ疄鏃舵暟鎹幏鍙�
-    function getBarcodeInfo(){
-        $.ajax({
-            url: baseUrl+ "/console/latest/data/barcode",
-            headers: {'token': localStorage.getItem('token')},
-            method: 'POST',
-            success: function (res) {
-                if (res.code === 200){
-                    var barcodes = res.data;
-                    for (var i = 0; i < barcodes.length; i++){
-                        $("#code-decoder-data-"+barcodes[i].barcodeId).html(barcodes[i].codeValue);
-                    }
-                } else if (res.code === 403){
-                    parent.location.href = baseUrl+"/login";
-                }  else {
-                    console.log(res.msg);
-                }
-            }
-        });
-    }
+										let trackSiteNo = rgvs[i].trackSiteNo;
+										let trackSiteEl = $("#rgvTrackSiteNo-" + trackSiteNo);
 
-    // 鍫嗗灈鏈哄亸绉诲姩鐢�
-    function crnAnimate(id, leftVal) {
-        switch (id) {
-            case 1:
-                $("#crn-1").animate({left: leftVal+'px'}, 1000);
-                crn1Position = leftVal;
-                break;
-            case 2:
-                $("#crn-2").animate({left: leftVal+'px'}, 1000);
-                crn2Position = leftVal;
-                break;
-            default:
-                break
-        }
-    }
+										let flag = false;
+										that.rgvPosition.forEach((item) => {
+											if (item.id == rgvs[i].rgvId) {
+												if (item.trackSiteNo != trackSiteNo) {
+													flag = true
+												}
+											}
+										})
 
-    // 椤甸潰鐐瑰嚮浜嬩欢鐩戝惉 ---------------------------------------------------------
+										if (flag) {
+											let finalOffset = 0;
+											let targetPosition = trackSiteEl.parent().parent().position().left;
+											let rgvPosition = rgvEl.position().left;
+											let calcResult = targetPosition - rgvPosition
+											if (calcResult > 0) {
+												finalOffset = targetPosition + trackSiteEl.width();
+											}else {
+												finalOffset = targetPosition;
+											}
 
-    // 杈撻�佽澶囩偣鍑讳簨浠�
-    $('.site').on('click', function () {
-        var id = this.id.split("-")[1];
-        if (id === undefined) {
-            return;
-        }
-        layer.open({
-            title: id + " 绔欑偣淇℃伅璇︽儏",
-            closeBtn: 0,
-            skin: 'layui-layer-lan',
-            offset: '180px',
-            type: 1,
-            shadeClose: true,
-            content: $('#siteWindow'),
-            area: ['35rem', '18rem'],
-            btn: ['纭畾', '鍏抽棴'],
-            success: function(layero, index){
-                http.post(baseUrl+"/console/site/detail", {siteId: id}, function (res) {
-                    for (var val in res.data) {
-                        var find = $("#siteWindow").find(":input[name='" + val + "']");
-                        if (find[0].type==='text') {
-                            find.val(res.data[val]);
-                        } else if (find[0].type === 'checkbox') {
-                            find.attr("checked", res.data[val] === 'Y');
-                        }
-                    }
-                })
-            },
-            end: function () {
-                $(':input', $("#siteWindow")).val('').removeAttr('checked').removeAttr('selected');
-            }
-        });
-    });
+											rgvEl.animate({left: finalOffset + "px"}, 500);
 
-    // 鍫嗗灈鏈虹偣鍑讳簨浠�
-    $('.machine').on('click', function () {
-        var id = this.id.split("-")[1];
-        layer.open({
-            title: id+"鍙峰爢鍨涙満",
-            skin: 'layui-layer-lan',
-            closeBtn: 0,
-            type: 1,
-            offset: '150px',
-            shadeClose: true,
-            content: $("#crnWindow"),
-            area: ['40rem', '20rem'],
-            btn: ['纭畾', '鍏抽棴'],
-            success: function(layero, index){
-                http.post(baseUrl+"/console/crn/detail", {crnNo: id}, function (res) {
-                    for (var val in res.data) {
-                        var find = $("#crnWindow").find(":input[name='" + val + "']");
-                        if (find[0].type==='text') {
-                            find.val(res.data[val]);
-                        } else if (find[0].type === 'checkbox') {
-                            find.attr("checked", res.data[val] === 'Y');
-                        }
-                    }
-                })
-            },
-            end: function () {
-                $(':input', $("#crnWindow")).val('').removeAttr('checked').removeAttr('selected');
-            }
-        });
-    });
+											let position = []
+											that.rgvPosition.forEach((item) => {
+												if (item.id == rgvs[i].rgvId) {
+													item.trackSiteNo = trackSiteNo
+												}
+												position.push(item)
+											})
+											that.rgvPosition = position
+										}
 
+									}
+								} else if (res.code === 403) {
+									parent.location.href = baseUrl + "/login";
+								} else {
+									console.log(res.msg);
+								}
+							}
+						});
+					},
+					systemSwitch() {
+						// 绯荤粺寮�鍏�
+						let that = this
+						if (this.systemStatus) {
+							this.$prompt('璇疯緭鍏ュ彛浠わ紝骞跺仠姝CS绯荤粺', '鎻愮ず', {
+								confirmButtonText: '纭畾',
+								cancelButtonText: '鍙栨秷',
+							}).then(({
+								value
+							}) => {
+								that.doSwitch(0, value)
+							}).catch(() => {
 
-    // 灏忚溅鍋忕Щ鍔ㄧ敾
-    function carAnimate(id, target) {
-        var targetTop = 122;
-        if (id === 8) {
-            switch (target) {
-                case 1:
-                    targetTop += 160;
-                    break;
-                case 2:
-                    targetTop += 140;
-                    break;
-                case 3:
-                    targetTop += 80;
-                    break;
-                case 4:
-                    targetTop += 40;
-                    break;
-                case 7:
-                    targetTop += 0;
-                    break;
-                default:
-                    return;
-            }
-        } else {
-            return;
-        }
-        $("#site-" + id).animate({top: targetTop+'px'}, 1000);
-    }
+							});
+						} else {
+							this.doSwitch(1)
+						}
+					},
+					doSwitch(operatorType, password) {
+						let that = this
+						$.ajax({
+							url: baseUrl + "/console/system/switch",
+							headers: {
+								'token': localStorage.getItem('token')
+							},
+							data: {
+								operatorType: operatorType,
+								password: password
+							},
+							method: 'POST',
+							success: function(res) {
+								if (res.code === 200) {
+									if (res.data.status) {
+										$('#system-toggle-checked').attr("checked", true);
+										$('#system-run-desc').html("绯荤粺杩愯涓�...");
+										that.systemStatus = true;
+										parent.systemRunning = true;
+									} else {
+										$('#system-toggle-checked').attr("checked", false);
+										$('#system-run-desc').html("绯荤粺宸插仠姝�!");
+										that.systemStatus = false;
+										parent.systemRunning = false;
+									}
+								} else if (res.code === 403) {
+									parent.location.href = baseUrl + "/login";
+								} else {
+									that.$message({
+										message: res.msg,
+										type: 'error'
+									});
+								}
+							}
+						});
+					},
+					getSystemRunningStatus() {
+						// 鑾峰彇wcs绯荤粺杩愯鐘舵��
+						let that = this
+						$.ajax({
+							url: baseUrl + "/console/system/running/status",
+							headers: {
+								'token': localStorage.getItem('token')
+							},
+							method: 'POST',
+							success: function(res) {
+								if (res.code === 200) {
+									if (res.data.status) {
+										$('#system-toggle-checked').attr("checked", true);
+										$('#system-run-desc').html("绯荤粺杩愯涓�...");
+										that.systemStatus = true;
+										parent.systemRunning = true;
+									} else {
+										$('#system-toggle-checked').attr("checked", false);
+										$('#system-run-desc').html("绯荤粺宸插仠姝�!");
+										that.systemStatus = false;
+										parent.systemRunning = false;
+									}
+								} else if (res.code === 403) {
+									parent.location.href = baseUrl + "/login";
+								} else {
+									that.$message({
+										message: res.msg,
+										type: 'error'
+									});
+								}
+							}
+						});
+					},
+					getCodeData(){
+						this.sendWs(JSON.stringify({
+							"url": "/console/barcode/output/site",
+							"data": {}
+						}))
 
+						let that = this
+						//鑾峰彇RGV鏁版嵁
+						$.ajax({
+							url: baseUrl + "/console/barcode/output/site",
+							headers: {'token': localStorage.getItem('token')},
+							method: 'POST',
+							success: function (res) {
+								if (res.code === 200) {
+									var rgvs = res.data;
 
-    // 鍙拌溅鐐瑰嚮浜嬩欢
-    $(document).on("click", ".item", function () {
-        var value = prompt('鐩爣绔欙細', "1");
-        if (value == null) {
-            alert('涓嶈兘涓虹┖锛�');
-        } else if (value === '') {
-            alert('涓嶈兘涓虹┖锛�');
-        } else {
-            carAnimate(8, Number(value));
-            // $("#site-" + 8).animate({top: (Number(value) + 122) +'px'}, 1000);
-        }
-    })
+									if (that.rgvPosition.length == 0) {
+										let position = []
+										for (var i = 0; i < rgvs.length; i++) {
+											var rgvEl = $("#rgv-" + rgvs[i].rgvId);
+											position.push({
+												id: rgvs[i].rgvId,
+												trackSiteNo: rgvs[i].trackSiteNo,
+												initLeft: rgvEl.offset().left
+											})
+										}
+										that.rgvPosition = position
+										return;
+									}
 
-</script>
-</html>
\ No newline at end of file
+									for (var i = 0; i < rgvs.length; i++) {
+										var rgvEl = $("#rgv-" + rgvs[i].rgvId);
+										if (rgvs[i].rgvStatus == 'IDLE') {
+											rgvEl.attr("class", "rgv-item");
+										}else if (rgvs[i].rgvStatus == 'WORKING') {
+											rgvEl.attr("class", "rgv-item machine-working");
+										}
+
+										let trackSiteNo = rgvs[i].trackSiteNo;
+										let trackSiteEl = $("#rgvTrackSiteNo-" + trackSiteNo);
+
+										let flag = false;
+										that.rgvPosition.forEach((item) => {
+											if (item.id == rgvs[i].rgvId) {
+												if (item.trackSiteNo != trackSiteNo) {
+													flag = true
+												}
+											}
+										})
+
+										if (flag) {
+											let finalOffset = 0;
+											let targetPosition = trackSiteEl.parent().parent().position().left;
+											let rgvPosition = rgvEl.position().left;
+											let calcResult = targetPosition - rgvPosition
+											if (calcResult > 0) {
+												finalOffset = targetPosition + trackSiteEl.width();
+											}else {
+												finalOffset = targetPosition;
+											}
+
+											rgvEl.animate({left: finalOffset + "px"}, 500);
+
+											let position = []
+											that.rgvPosition.forEach((item) => {
+												if (item.id == rgvs[i].rgvId) {
+													item.trackSiteNo = trackSiteNo
+												}
+												position.push(item)
+											})
+											that.rgvPosition = position
+										}
+
+									}
+								} else if (res.code === 403) {
+									parent.location.href = baseUrl + "/login";
+								} else {
+									console.log(res.msg);
+								}
+							}
+						});
+					},
+					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);
+							}
+						}
+					},
+					getDeviceNo(obj) {
+						if (this.isJson(obj)) {
+							let data = JSON.parse(obj)
+							if (data.deviceNo == null || data.deviceNo == undefined) {
+								return -1;
+							}
+							return data.deviceNo;
+						}else {
+							return -1;
+						}
+					},
+					getTrackSiteNo(obj) {
+						if (this.isJson(obj)) {
+							let data = JSON.parse(obj)
+							if (data.trackSiteNo == null || data.trackSiteNo == undefined) {
+								return -1;
+							}
+							return data.trackSiteNo;
+						}else {
+							return -1;
+						}
+					},
+					isJson(str) {
+						try {
+							JSON.parse(str);
+							return true;
+						} catch (e) {
+							return false;
+						}
+					}
+				}
+			})
+		</script>
+	</body>
+</html>

--
Gitblit v1.9.1