| | |
| | | <!DOCTYPE html> |
| | | <html> |
| | | <html lang="en"> |
| | | <head> |
| | | <meta charset="utf-8"> |
| | | <title>自动仓库WCS系统</title> |
| | | <link rel="stylesheet" href="../static/css/index.css"> |
| | | <script src="../static/js/jquery/jquery-3.3.1.min.js"></script> |
| | | <title>环形穿梭车智能系统</title> |
| | | <link rel="stylesheet" href="../static/css/element.css"> |
| | | <link rel="stylesheet" href="../static/css/element-ui.css"> |
| | | <link rel="icon" href="../static/images/favicon.ico" type="image/x-icon"> |
| | | <script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script> |
| | | <script type="text/javascript" src="../static/js/common.js"></script> |
| | | <script type="text/javascript" src="../static/js/vue.min.js"></script> |
| | | <script type="text/javascript" src="../static/js/element.js"></script> |
| | | <script type="text/javascript" src="testPosition.js"></script> |
| | | <style> |
| | | body { |
| | | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| | | margin: 0; |
| | | padding: 0; |
| | | background-color: #a0d2eb; |
| | | color: #ffffff; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | height: 100vh; |
| | | |
| | | background: linear-gradient(135deg, #e6f7ff 0%, #f0f8ff 100%); |
| | | overflow: hidden; |
| | | position: relative; |
| | | } |
| | | .tech-background { |
| | | position: fixed; |
| | | top: 0; |
| | | left: 0; |
| | | width: 100%; |
| | | height: 100%; |
| | | z-index: -1; |
| | | pointer-events: none; |
| | | opacity: 0.6; |
| | | } |
| | | |
| | | .grid-overlay { |
| | | position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | width: 100%; |
| | | height: 100%; |
| | | background-image: |
| | | linear-gradient(rgba(66, 134, 244, 0.08) 1px, transparent 1px), |
| | | linear-gradient(90deg, rgba(66, 134, 244, 0.08) 1px, transparent 1px); |
| | | background-size: 40px 40px; |
| | | perspective: 1000px; |
| | | transform-style: preserve-3d; |
| | | transform: perspective(500px) rotateX(60deg); |
| | | } |
| | | |
| | | .glow-effect { |
| | | position: absolute; |
| | | width: 100%; |
| | | height: 100%; |
| | | top: 0; |
| | | left: 0; |
| | | background: |
| | | radial-gradient(circle at 20% 30%, rgba(41, 128, 185, 0.3) 0%, transparent 40%), |
| | | radial-gradient(circle at 80% 70%, rgba(46, 204, 113, 0.3) 0%, transparent 40%); |
| | | filter: blur(10px); |
| | | } |
| | | |
| | | .particles-container { |
| | | position: absolute; |
| | | width: 100%; |
| | | height: 100%; |
| | | top: 0; |
| | | left: 0; |
| | | } |
| | | |
| | | .particle { |
| | | position: absolute; |
| | | background-color: rgba(255, 255, 255, 0.5); |
| | | border-radius: 50%; |
| | | animation: float 15s infinite ease-in-out; |
| | | } |
| | | |
| | | @keyframes float { |
| | | 0%, 100% { |
| | | transform: translateY(0) translateX(0); |
| | | opacity: 0.2; |
| | | } |
| | | 50% { |
| | | transform: translateY(-20px) translateX(20px); |
| | | opacity: 0.6; |
| | | } |
| | | } |
| | | |
| | | header { |
| | | background-color: #2196F3; |
| | | color: white; |
| | | padding: 15px 20px; |
| | | text-align: center; |
| | | font-size: 24px; |
| | | letter-spacing: 1px; |
| | | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); |
| | | } |
| | | .map { |
| | | position: relative; |
| | | width: 52vw; |
| | | height: 72vh; |
| | | border-radius: 50%; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | } |
| | | .inner-ring, .outer-ring { |
| | | position: absolute; |
| | | border-radius: 50%; |
| | | } |
| | | .inner-ring { |
| | | width: 72vh; |
| | | height: 72vh; |
| | | border: 4px solid #00E676; |
| | | box-shadow: inset 0 0 30px rgba(0, 230, 118, 0.5), 0 0 20px rgba(0, 230, 118, 0.5); |
| | | } |
| | | .outer-ring { |
| | | width: 80vh; |
| | | height: 80vh; |
| | | border: 4px solid #00E676; |
| | | box-shadow: inset 0 0 30px rgba(0, 230, 118, 0.5), 0 0 20px rgba(0, 230, 118, 0.5); |
| | | } |
| | | .station { |
| | | position: absolute; |
| | | width: 20px; |
| | | height: 14px; |
| | | text-align: center; |
| | | line-height: 1.5; /* 调整行高与字体大小的比值 */ |
| | | font-size: 10px; /* 设置更小的字体 */ |
| | | font-weight: bold; |
| | | transition: transform 0.3s ease; |
| | | background-color: #ab1839; |
| | | transform: scale(1); /* 可选:如果不需要放大效果 */ |
| | | } |
| | | .bus { |
| | | font-size: 10px; |
| | | background-color: #2196F3; |
| | | /*border: 10px solid #ffffff;*/ |
| | | position: absolute; |
| | | width: 15px; |
| | | height: 15px; |
| | | border-radius: 50%; |
| | | text-align: center; |
| | | line-height: 15px; |
| | | font-weight: bold; |
| | | transition: transform 0.3s ease; |
| | | /* 3D效果 */ |
| | | transform: translateZ(0); |
| | | border: 10px solid rgba(255, 255, 255, 0.8); |
| | | } |
| | | |
| | | @keyframes pulse { |
| | | 0% { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.7); } |
| | | 70% { box-shadow: 0 0 0 10px rgba(33, 150, 243, 0); } |
| | | 100% { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0); } |
| | | } |
| | | .station:hover, .bus:hover { |
| | | transform: scale(1.4); |
| | | z-index: 999; |
| | | } |
| | | |
| | | .task-bar-left { |
| | | position: fixed; |
| | | top: 1%; |
| | | /*transform: translateY(-50%);*/ |
| | | width: 25%; /* 设置宽度 */ |
| | | background-color: rgba(255, 255, 255, 0); /* 半透明背景 */ |
| | | |
| | | border-radius: 5px; |
| | | padding: 10px; |
| | | box-shadow: 0 0 10px rgba(0, 0, 0, 0); |
| | | z-index: 1000; /* 确保在其他元素之上 */ |
| | | } |
| | | |
| | | .task-bar-left1 { |
| | | position: fixed; |
| | | top: 8%; |
| | | /*transform: translateY(-50%);*/ |
| | | width: 25%; /* 设置宽度 */ |
| | | background-color: rgba(255, 255, 255, 0); /* 半透明背景 */ |
| | | |
| | | border-radius: 5px; |
| | | padding: 10px; |
| | | box-shadow: 0 0 10px rgba(0, 0, 0, 0); |
| | | z-index: 1000; /* 确保在其他元素之上 */ |
| | | } |
| | | |
| | | .task-bar-right { |
| | | position: fixed; |
| | | top: 1%; |
| | | /*transform: translateY(-50%);*/ |
| | | width: 25%; /* 设置宽度 */ |
| | | background-color: rgba(255, 255, 255, 0); /* 半透明背景 */ |
| | | |
| | | border-radius: 5px; |
| | | padding: 10px; |
| | | box-shadow: 0 0 10px rgba(0, 0, 0, 0); |
| | | z-index: 1000; /* 确保在其他元素之上 */ |
| | | } |
| | | |
| | | .task-bar-right1 { |
| | | position: fixed; |
| | | top: 5%; |
| | | /*transform: translateY(-50%);*/ |
| | | width: 25%; /* 设置宽度 */ |
| | | background-color: rgba(255, 255, 255, 0); /* 半透明背景 */ |
| | | |
| | | border-radius: 5px; |
| | | padding: 10px; |
| | | box-shadow: 0 0 10px rgba(0, 0, 0, 0); |
| | | z-index: 1000; /* 确保在其他元素之上 */ |
| | | } |
| | | |
| | | .task-bar-div1 { |
| | | /*width: 100%; !* 设置宽度 *!*/ |
| | | background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */ |
| | | box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); |
| | | } |
| | | |
| | | .left-task-bar { |
| | | left: 20px; /* 距离左边的距离 */ |
| | | /*bottom: 100px;*/ |
| | | } |
| | | |
| | | .right-task-bar { |
| | | /*bottom: 100px;*/ |
| | | right: 20px; /* 距离右边的距离 */ |
| | | } |
| | | |
| | | .el-table .warning-row { |
| | | background: oldlace; |
| | | } |
| | | |
| | | .el-table .success-row { |
| | | background: #f0f9eb; |
| | | } |
| | | .container { |
| | | width: 52vw; |
| | | height: 72vh; |
| | | position: absolute; |
| | | /*background: #8c939d;*/ |
| | | } |
| | | .bus-station { |
| | | width: 100vh; |
| | | height: 72vh; |
| | | position: absolute; |
| | | display: flex; |
| | | /*background: #8c939d;*/ |
| | | } |
| | | .bus-item-top { |
| | | background: red; |
| | | position: relative; |
| | | width: 40px; |
| | | height: 60px; |
| | | line-height: 60px; |
| | | top: 880px; |
| | | text-align: center; |
| | | } |
| | | .bus-item-left { |
| | | background: red; |
| | | position: relative; |
| | | width: 60px; |
| | | height: 40px; |
| | | line-height: 40px; |
| | | left: 1230px; |
| | | text-align: center; |
| | | } |
| | | .bus-item-left2 { |
| | | background: red; |
| | | position: relative; |
| | | width: 60px; |
| | | height: 40px; |
| | | line-height: 40px; |
| | | left: 1000px; |
| | | text-align: center; |
| | | } |
| | | |
| | | /* 新设计的站点样式 - 基于第二张图片 */ |
| | | .station { |
| | | position: absolute; |
| | | width: 24px; |
| | | height: 24px; |
| | | text-align: center; |
| | | line-height: 24px; |
| | | font-size: 10px; |
| | | font-weight: bold; |
| | | transition: all 0.3s ease; |
| | | background-color: #ab1839; |
| | | border-radius: 4px; |
| | | color: white; |
| | | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); |
| | | transform: scale(1); |
| | | z-index: 10; |
| | | /* 嵌套效果 */ |
| | | border: 2px solid white; |
| | | } |
| | | |
| | | .station::before { |
| | | content: ''; |
| | | position: absolute; |
| | | top: 3px; |
| | | left: 3px; |
| | | right: 3px; |
| | | bottom: 3px; |
| | | border: 1px solid rgba(255, 255, 255, 0.8); |
| | | border-radius: 2px; |
| | | pointer-events: none; |
| | | } |
| | | |
| | | /* 四个角的三角形指示器 */ |
| | | .station::after { |
| | | content: ''; |
| | | position: absolute; |
| | | width: 100%; |
| | | height: 100%; |
| | | top: 0; |
| | | left: 0; |
| | | pointer-events: none; |
| | | } |
| | | |
| | | .station .corner { |
| | | position: absolute; |
| | | width: 0; |
| | | height: 0; |
| | | border-style: solid; |
| | | border-width: 0 4px 4px 0; |
| | | border-color: transparent #ffffff transparent transparent; |
| | | } |
| | | |
| | | .station .corner-tl { |
| | | top: -2px; |
| | | left: -2px; |
| | | transform: rotate(0deg); |
| | | } |
| | | |
| | | .station .corner-tr { |
| | | top: -2px; |
| | | right: -2px; |
| | | transform: rotate(90deg); |
| | | } |
| | | |
| | | .station .corner-bl { |
| | | bottom: -2px; |
| | | left: -2px; |
| | | transform: rotate(270deg); |
| | | } |
| | | |
| | | .station .corner-br { |
| | | bottom: -2px; |
| | | right: -2px; |
| | | transform: rotate(180deg); |
| | | } |
| | | |
| | | /* 站点悬停效果 */ |
| | | .station:hover { |
| | | transform: scale(1.6); |
| | | z-index: 999; |
| | | box-shadow: 0 0 15px rgba(171, 24, 57, 0.8); |
| | | } |
| | | </style> |
| | | </head> |
| | | <body> |
| | | <!-- 导航栏 --> |
| | | <!-- <div class="nav">--> |
| | | <!-- <li class="right">注销<a id="about" class="nav-unselect" onclick="logout()" href="#"></a></li>--> |
| | | <!-- </div>--> |
| | | <div class="sidebar"> |
| | | <div class="nav"> |
| | | <ul class="cl-effect-4"> |
| | | <li><a id="console" onclick="nav(this.id)" class="nav-select" href="#">主控图</a></li> |
| | | <li><a id="pipeline" onclick="nav(this.id)" class="nav-unselect" href="#">输送设备</a></li> |
| | | <li><a id="crn" onclick="nav(this.id)" class="nav-unselect" href="#">堆垛机</a></li> |
| | | <li><a id="rgv" onclick="nav(this.id)" class="nav-unselect" href="#">RGV</a></li> |
| | | </ul> |
| | | </div> |
| | | <body > |
| | | |
| | | <!-- 科技感背景元素 --> |
| | | <div class="tech-background"> |
| | | <div class="grid-overlay"></div> |
| | | <div class="glow-effect"></div> |
| | | <div class="particles-container" id="particles-container"></div> |
| | | </div> |
| | | <!--<div style="z-index: 999; position: absolute; top: 250px; left: 900px; width: 200px; height: 200px; opacity: 0.5;background-color: #0000FF">--> |
| | | <!--<header>--> |
| | | <!-- 环形穿梭车智能系统--> |
| | | <!--</header>--> |
| | | <div id="app"> |
| | | <div class="map"> |
| | | <div v-if="licenseDayI <=30 "> |
| | | <div style="color: red">{{licenseDay}}</div> |
| | | </div> |
| | | <!-- <div class="inner-ring"></div>--> |
| | | <!-- <div class="outer-ring"></div>--> |
| | | <!-- <div v-for="track in energyGatheringRing" class="inner-ring" :style="{ borderColor: track.trackColor , boxShadow : 'inset 0 0 30px '+track.radiationColor+', 0 0 20px '+track.radiationColor}"></div>--> |
| | | <!-- <div v-for="track in energyGatheringRing" class="outer-ring" :style="{ borderColor: track.trackColor , boxShadow : 'inset 0 0 30px '+track.radiationColor+', 0 0 20px '+track.radiationColor}"></div>--> |
| | | <svg class="container" |
| | | viewBox="0 0 1200 850" |
| | | preserveAspectRatio="xMidYMid meet"> |
| | | <path d="M 1200,750 |
| | | L 1200,100 |
| | | C 1200,100 1200,50 1150,50 |
| | | C 1150,50 1100,50 1100,100 |
| | | L 1100,700 |
| | | C 1100,700 1100,750 1050,750 |
| | | L 60,750 |
| | | C 60,750 10,750 10,800 |
| | | C 10,800 10,850 60,850 |
| | | L 1100,850 |
| | | C 1100,850 1200,850 1200,750" |
| | | style="fill:none; stroke:blue; stroke-width:3; stroke-dasharray:10,1;"/> |
| | | </svg> |
| | | |
| | | <!--</div>--> |
| | | <!-- 主体内容 --> |
| | | <iframe id="content" src="console.html"></iframe> |
| | | <footer class="footer"> |
| | | Copyright © 2023 All Rights Reserved. <a href="https://www.zoneyung.com" target="_blank">徐工汉云</a> 保留所有权利 |
| | | </footer> |
| | | <div v-for="station in tableDataDev" class="station" :style="{ |
| | | top: convertToCSSPosition(station.valueX, station.valueY).y + 'px', |
| | | left: convertToCSSPosition(station.valueX, station.valueY).x + 'px', |
| | | backgroundColor: station.modeColor}"> |
| | | <div class="corner corner-tl"></div> |
| | | <div class="corner corner-tr"></div> |
| | | <div class="corner corner-bl"></div> |
| | | <div class="corner corner-br"></div> |
| | | {{ station.index }} |
| | | </div> |
| | | |
| | | <div> |
| | | <el-switch |
| | | style="display: block" |
| | | v-model="valueSystem" |
| | | active-color="#13ce66" |
| | | inactive-color="#A64036" |
| | | active-text="系统运行中..." |
| | | inactive-text="系统已停止!" |
| | | @change='upDateValueSystem'> |
| | | </el-switch> |
| | | </div> |
| | | |
| | | <!-- Buses --> |
| | | <div v-for="bus in tableDataRgv" class="bus" :style="{ |
| | | top: convertToCSSPositionWithOffset(bus.valueX, bus.valueY).y + 'px', |
| | | left: convertToCSSPositionWithOffset(bus.valueX, bus.valueY).x + 'px', |
| | | animation: 'pulse ' + bus.animation + 's infinite', |
| | | borderColor: bus.modeColor, backgroundColor: bus.statusColor}">{{ bus.index }} |
| | | </div> |
| | | |
| | | </div> |
| | | |
| | | <!-- Left Task Bar --> |
| | | <div class="task-bar-left left-task-bar" > |
| | | <div> |
| | | <el-tooltip :content="'Switch value: ' + valueLeft" placement="top"> |
| | | <el-switch |
| | | v-model="valueLeft" |
| | | active-color="#13ce66" |
| | | inactive-color="#ff4949" |
| | | active-value="100" |
| | | inactive-value="0"> |
| | | </el-switch> |
| | | </el-tooltip> |
| | | </div> |
| | | <div v-if="valueLeft === '100' " class="task-bar-div1"> |
| | | <el-table |
| | | :data="tableDataLeft" |
| | | style="width: 100%" |
| | | :row-class-name="tableRowClassName"> |
| | | <el-table-column |
| | | prop="wrkNo" |
| | | label="工作号"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="rgvNo" |
| | | label="RGV号"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="wrkSts$" |
| | | label="工作状态"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="sourceStaNo" |
| | | label="源站"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="staNo" |
| | | label="目标站"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="modiTime" |
| | | label="下发时间"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="crnStrTime" |
| | | label="开始执行时间"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="crnEndTime" |
| | | label="执行结束时间"> |
| | | </el-table-column> |
| | | <!-- <el-table-column--> |
| | | <!-- prop="modiTime"--> |
| | | <!-- label="更新时间">--> |
| | | <!-- </el-table-column>--> |
| | | <el-table-column |
| | | prop="rgvSts" |
| | | label="RGV状态"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="操作" |
| | | type="template"> |
| | | <template slot-scope="scope"> |
| | | <el-button |
| | | type="danger" |
| | | size="small" |
| | | @click="taskDelete(scope.row)"> |
| | | 删除 |
| | | </el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | </div> |
| | | <div class="task-bar-left1 left-task-bar" > |
| | | <div> |
| | | <el-tooltip :content="'Switch value: ' + valueLeft1" placement="top"> |
| | | <el-switch |
| | | v-model="valueLeft1" |
| | | active-color="#13ce66" |
| | | inactive-color="#ff4949" |
| | | active-value="100" |
| | | inactive-value="0"> |
| | | </el-switch> |
| | | </el-tooltip> |
| | | </div> |
| | | <div v-if="valueLeft1 === '100' " class="task-bar-div1"> |
| | | <el-table |
| | | :data="tableDataLeft1" |
| | | style="width: 100%" |
| | | :row-class-name="tableRowClassName"> |
| | | <el-table-column |
| | | prop="wrkNo1" |
| | | label="工作号"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="rgvNo" |
| | | label="RGV号"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="sendTime" |
| | | label="下发时间"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="mode" |
| | | label="类型"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="sourceSta" |
| | | label="起点"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="posSta" |
| | | label="终点"> |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- Right Task Bar --> |
| | | <div class="task-bar-right right-task-bar"> |
| | | <div> |
| | | <el-tooltip :content="'Switch value: ' + valueRight" placement="top"> |
| | | <el-switch |
| | | v-model="valueRight" |
| | | active-color="#13ce66" |
| | | inactive-color="#ff4949" |
| | | active-value="100" |
| | | inactive-value="0"> |
| | | </el-switch> |
| | | </el-tooltip> |
| | | </div> |
| | | <div v-if="valueRight === '100' " class="task-bar-div1"> |
| | | <el-table |
| | | :data="tableDataRight" |
| | | style="width: 100%" |
| | | :row-class-name="tableRowClassName"> |
| | | <el-table-column |
| | | prop="rgvId" |
| | | label="编号" |
| | | width="80"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="rgvNo" |
| | | label="小车号"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="position" |
| | | label="位置"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="status$" |
| | | label="状态"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="error$" |
| | | label="异常"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="操作" |
| | | type="template"> |
| | | <template slot-scope="scope"> |
| | | <el-button |
| | | :type="scope.row.status === 0 ? 'primary' : 'danger'" |
| | | size="small" |
| | | @click="toggleStatus(scope.$index, scope.row)"> |
| | | {{ scope.row.status === 0 ? '禁用' : '解除禁用' }} |
| | | </el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | </div> |
| | | <div class="task-bar-right1 right-task-bar"> |
| | | <div> |
| | | <el-tooltip :content="'Switch value: ' + valueRight1" placement="top"> |
| | | <el-switch |
| | | v-model="valueRight1" |
| | | active-color="#13ce66" |
| | | inactive-color="#ff4949" |
| | | active-value="100" |
| | | inactive-value="0"> |
| | | </el-switch> |
| | | </el-tooltip> |
| | | </div> |
| | | <div v-if="valueRight1 === '100' " class="task-bar-div1"> |
| | | <el-table |
| | | :data="tableDataRight1" |
| | | style="width: 100%" |
| | | :row-class-name="tableRowClassName"> |
| | | <el-table-column |
| | | prop="rgvNo" |
| | | label="小车号"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="error" |
| | | label="异常"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="createTime$" |
| | | label="记录日期"> |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <script> |
| | | // 在Vue实例外添加粒子生成函数 |
| | | function createParticles() { |
| | | const container = document.getElementById('particles-container'); |
| | | const particleCount = 30; |
| | | |
| | | for (let i = 0; i < particleCount; i++) { |
| | | const particle = document.createElement('div'); |
| | | particle.classList.add('particle'); |
| | | |
| | | // 随机大小和位置 |
| | | const size = Math.random() * 3 + 1; |
| | | const posX = Math.random() * 100; |
| | | const posY = Math.random() * 100; |
| | | const delay = Math.random() * 15; |
| | | |
| | | particle.style.width = `${size}px`; |
| | | particle.style.height = `${size}px`; |
| | | particle.style.left = `${posX}vw`; |
| | | particle.style.top = `${posY}vh`; |
| | | particle.style.animationDelay = `${delay}s`; |
| | | |
| | | container.appendChild(particle); |
| | | } |
| | | } |
| | | |
| | | // 页面加载完成后创建粒子 |
| | | document.addEventListener('DOMContentLoaded', createParticles); |
| | | // 在Vue实例外获取body尺寸 |
| | | function getBodySize() { |
| | | return { |
| | | width: document.body.clientWidth, |
| | | height: document.body.clientHeight |
| | | }; |
| | | } |
| | | var app = new Vue({ |
| | | el: '#app', |
| | | data: { |
| | | containerSize: { width: 0, height: 0}, |
| | | bodySize: { width: 0, height: 0 }, |
| | | activeNames: ['1'], |
| | | valueLeft: '0', |
| | | valueLeft1: '0', |
| | | valueRight: '0', |
| | | valueRight1: '0', |
| | | licenseDay: '已过期', |
| | | licenseDayI: 100, |
| | | valueSystem: false, |
| | | tableDataRgv: [], |
| | | tableDataDev: [], |
| | | energyGatheringRing: [], |
| | | tableDataLeft: [], |
| | | tableDataLeft1: [], |
| | | tableDataRight: [], |
| | | tableDataRight1: [] |
| | | }, |
| | | created(){ |
| | | this.init(); |
| | | }, |
| | | watch: { |
| | | |
| | | }, |
| | | |
| | | // 在 mounted 中初始化尺寸和监听 |
| | | mounted() { |
| | | this.updateContainerSize(); |
| | | this.updateBodySize(); |
| | | window.addEventListener('resize', this.handleResize); |
| | | }, |
| | | beforeDestroy() { |
| | | window.removeEventListener('resize', this.handleResize); |
| | | }, |
| | | computed: { |
| | | mappedStations() { |
| | | return this.tableDataDev.map(station => ({ |
| | | ...station, |
| | | position: this.convertToCSSPosition(station.valueX, station.valueY) |
| | | })); |
| | | } |
| | | }, |
| | | methods: { |
| | | init(){ |
| | | this.getTableDataRgv() |
| | | this.getTableDataDev() |
| | | this.getTableDataTrack() |
| | | this.getTableDataLeft() |
| | | this.getTableDataLeft1() |
| | | this.getTableDataRight() |
| | | this.getTableDataRight1() |
| | | this.getValueSystem() |
| | | this.getLicenseDays() |
| | | |
| | | setInterval(() => { |
| | | this.getTableDataRgv() |
| | | this.getTableDataDev() |
| | | this.getTableDataTrack() |
| | | this.getTableDataLeft() |
| | | this.getTableDataLeft1() |
| | | this.getTableDataRight() |
| | | this.getTableDataRight1() |
| | | this.getValueSystem() |
| | | this.getLicenseDays() |
| | | |
| | | }, 1000) |
| | | }, |
| | | |
| | | // 获取容器实际尺寸 |
| | | updateContainerSize() { |
| | | const mapEl = this.$el.querySelector('.map'); |
| | | this.containerSize = { |
| | | width: mapEl.clientWidth, |
| | | height: mapEl.clientHeight |
| | | }; |
| | | }, |
| | | convertToCSSPositionWithOffset(svgX, svgY, radius) { |
| | | const basePos = this.convertToCSSPosition(svgX, svgY); |
| | | // 示例:向右偏移半径的距离(可根据需求调整偏移方向) |
| | | return { |
| | | x: basePos.x -16.5, |
| | | y: basePos.y -16.5 |
| | | }; |
| | | }, |
| | | // 更新body尺寸 |
| | | updateBodySize() { |
| | | this.bodySize = getBodySize(); |
| | | }, |
| | | |
| | | // 坐标转换函数 |
| | | convertToCSSPosition(svgX, svgY) { |
| | | const svgWidth = 1200; // SVG 原始宽度 |
| | | let svgWidthR = 0; // |
| | | const svgHeight = 850; // SVG 原始高度 |
| | | let svgHeightR = 0; // |
| | | if (svgX>svgWidth/2){ |
| | | svgWidthR = (((svgX-svgWidth/2)/svgWidth) * this.containerSize.width) + this.bodySize.width/2 - this.bodySize.width*((1-0.52)/2); |
| | | } else { |
| | | svgWidthR = this.bodySize.width/2 - (((svgWidth/2 - svgX)/svgWidth) * this.containerSize.width) - this.bodySize.width*((1-0.52)/2); |
| | | } |
| | | if (svgY>svgHeight/2){ |
| | | svgHeightR = (((svgY-svgHeight/2)/svgHeight) * this.containerSize.height) + this.bodySize.height/2 - this.bodySize.height*((1-0.72)/2); |
| | | } else { |
| | | svgHeightR = this.bodySize.height/2 - (((svgHeight/2 - svgY)/svgHeight) * this.containerSize.height) - this.bodySize.height*((1-0.72)/2); |
| | | } |
| | | return { |
| | | x: svgWidthR, |
| | | y: svgHeightR |
| | | }; |
| | | }, |
| | | |
| | | handleZoom(e) { |
| | | const scaleDelta = e.deltaY > 0 ? 0.9 : 1.1; |
| | | const currentScale = this.scale || 1; |
| | | const newScale = Math.max(0.5, Math.min(2, currentScale * scaleDelta)); |
| | | |
| | | // 应用缩放 |
| | | const svgEl = this.$el.querySelector('.container'); |
| | | svgEl.style.transform = `scale(${newScale})`; |
| | | this.scale = newScale; |
| | | }, |
| | | verifyPassword(callback) { |
| | | this.$prompt('请输入管理员密码: root', '验证', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | inputType: 'password', |
| | | inputPattern: /^root$/, |
| | | inputErrorMessage: '密码错误' |
| | | }).then(({ value }) => { |
| | | if (value === 'root') { |
| | | callback(); |
| | | } |
| | | }).catch(() => { |
| | | this.$message.info('已取消操作'); |
| | | }); |
| | | }, |
| | | handleChange(val) { |
| | | if (val.length === 0){ |
| | | valueRight = '0'; |
| | | } else { |
| | | |
| | | if (val.length >= 1){ |
| | | this.handleChangeValueRight(1) |
| | | } |
| | | } |
| | | }, |
| | | handleChange1(val) { |
| | | if (val.length === 0){ |
| | | valueRight1 = '0'; |
| | | } else { |
| | | if (val.length >= 1){ |
| | | this.handleChangeValueRight1(1) |
| | | } |
| | | } |
| | | }, |
| | | taskDelete(row) { |
| | | let that = this; |
| | | that.$confirm('确认要删除该设备吗?', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning' |
| | | }).then(() => { |
| | | $.ajax({ |
| | | url: baseUrl + "/rgv/disable/task/delete", |
| | | headers: {'token': localStorage.getItem('token')}, |
| | | method: 'POST', |
| | | data: { |
| | | wrkNo: row.wrkNo |
| | | }, |
| | | success: function (res) { |
| | | if (res.code === 200) { |
| | | that.$message.success('删除成功'); |
| | | // 删除当前行 |
| | | that.tableDataRight.splice(that.tableDataRight.indexOf(row), 1); |
| | | } else { |
| | | that.$message.error('删除失败'); |
| | | } |
| | | } |
| | | }); |
| | | }); |
| | | }, |
| | | toggleStatus(index, row) { |
| | | let that = this; |
| | | const currentStatus = row.status; |
| | | const targetStatus = currentStatus === 0 ? 1 : 0; |
| | | |
| | | that.$confirm(`确认要${currentStatus === 0 ? '禁用' : '启用'}该设备吗?`, '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning' |
| | | }).then(() => { |
| | | $.ajax({ |
| | | url: baseUrl + "/rgv/disable/rgv/status", |
| | | headers: {'token': localStorage.getItem('token')}, |
| | | method: 'POST', |
| | | data: { |
| | | rgvNo: row.rgvNo, |
| | | status: targetStatus |
| | | }, |
| | | success: function (res) { |
| | | if (res.code === 200) { |
| | | that.$message.success(`状态更新成功`); |
| | | row.status$ = targetStatus; // 更新前端状态 |
| | | } else { |
| | | that.$message.error('状态更新失败'); |
| | | } |
| | | } |
| | | }); |
| | | }); |
| | | }, |
| | | handleChangeValueRight(val) { |
| | | switch (val){ |
| | | case 1: |
| | | valueRight = '100'; |
| | | case 2: |
| | | valueRight = '100'; |
| | | case 3: |
| | | valueRight = '100'; |
| | | case 4: |
| | | valueRight = '100'; |
| | | default: |
| | | valueRight = '0'; |
| | | } |
| | | }, |
| | | handleChangeValueRight1(val) { |
| | | switch (val){ |
| | | case 1: |
| | | valueRight1 = '100'; |
| | | case 2: |
| | | valueRight1 = '100'; |
| | | case 3: |
| | | valueRight1 = '100'; |
| | | case 4: |
| | | valueRight1 = '100'; |
| | | default: |
| | | valueRight1 = '0'; |
| | | } |
| | | }, |
| | | tableRowClassName({row, rowIndex}) { |
| | | if (rowIndex === 1) { |
| | | return 'warning-row'; |
| | | } else if (rowIndex === 3) { |
| | | return 'success-row'; |
| | | } |
| | | return ''; |
| | | }, |
| | | getLicenseDays(){ |
| | | let that = this; |
| | | $.ajax({ |
| | | url: baseUrl + "/license/getLicenseDays", |
| | | headers: {'token': localStorage.getItem('token')}, |
| | | method: 'POST', |
| | | success: function (res) { |
| | | if (res.code == 200) { |
| | | if (res.data.day<0){ |
| | | that.licenseDay = "已过期"+res.data.day+"天"; |
| | | that.licenseDayI = -1; |
| | | } else { |
| | | that.licenseDay = "许可证有效期"+res.data.day+"天"; |
| | | that.licenseDayI = res.data.day; |
| | | } |
| | | }else { |
| | | that.licenseDay = "已过期"; |
| | | that.licenseDayI = -1; |
| | | } |
| | | } |
| | | }); |
| | | // setTimeout(function() { |
| | | // |
| | | // }, 1000); |
| | | }, |
| | | getValueSystem() { |
| | | let that = this; |
| | | $.ajax({ |
| | | url: baseUrl + "/console/system/running/status", |
| | | headers: { |
| | | 'token': localStorage.getItem('token') |
| | | }, |
| | | data: {}, |
| | | dataType: 'json', |
| | | contentType: 'application/json;charset=UTF-8', |
| | | method: 'post', |
| | | success: function (res) { |
| | | that.valueSystem = res.data.status |
| | | } |
| | | }); |
| | | }, |
| | | upDateValueSystem(){ |
| | | let that = this; |
| | | let operatorTypeI = 0; |
| | | if (that.valueSystem){ |
| | | operatorTypeI = 1; |
| | | } |
| | | this.verifyPassword(() => { |
| | | $.ajax({ |
| | | url: baseUrl + "/console/system/switch", |
| | | headers: {'token': localStorage.getItem('token')}, |
| | | data: {operatorType : operatorTypeI}, |
| | | method: 'POST', |
| | | success: function (res) { |
| | | if (res.code === 200) { |
| | | that.valueSystem = res.data.status; |
| | | } |
| | | } |
| | | }); |
| | | }); |
| | | }, |
| | | getTableDataLeft() { |
| | | let that = this; |
| | | $.ajax({ |
| | | url: baseUrl + "/rgv/ring/through/task/wrk/mast/position/data", |
| | | headers: { |
| | | 'token': localStorage.getItem('token') |
| | | }, |
| | | data: {}, |
| | | dataType: 'json', |
| | | contentType: 'application/json;charset=UTF-8', |
| | | method: 'post', |
| | | success: function (res) { |
| | | that.tableDataLeft = res.data |
| | | } |
| | | }); |
| | | }, |
| | | getTableDataLeft1() { |
| | | let that = this; |
| | | $.ajax({ |
| | | url: baseUrl + "/rgv/ring/through/task/wrk/mast/position/data/v1", |
| | | headers: { |
| | | 'token': localStorage.getItem('token') |
| | | }, |
| | | data: {}, |
| | | dataType: 'json', |
| | | contentType: 'application/json;charset=UTF-8', |
| | | method: 'post', |
| | | success: function (res) { |
| | | that.tableDataLeft1 = res.data |
| | | } |
| | | }); |
| | | }, |
| | | getTableDataRight() { |
| | | let that = this; |
| | | $.ajax({ |
| | | url: baseUrl + "/rgv/task/rgv/circular/shuttle/mast/position/data", |
| | | headers: { |
| | | 'token': localStorage.getItem('token') |
| | | }, |
| | | data: {}, |
| | | dataType: 'json', |
| | | contentType: 'application/json;charset=UTF-8', |
| | | method: 'post', |
| | | success: function (res) { |
| | | that.tableDataRight = res.data |
| | | } |
| | | }); |
| | | }, |
| | | getTableDataRight1() { |
| | | let that = this; |
| | | $.ajax({ |
| | | url: baseUrl + "/rgv/task/rgv/circular/shuttle/mast/position/data/v1", |
| | | headers: { |
| | | 'token': localStorage.getItem('token') |
| | | }, |
| | | data: {}, |
| | | dataType: 'json', |
| | | contentType: 'application/json;charset=UTF-8', |
| | | method: 'post', |
| | | success: function (res) { |
| | | that.tableDataRight1 = res.data |
| | | } |
| | | }); |
| | | }, |
| | | getTableDataRgv() { |
| | | let that = this; |
| | | $.ajax({ |
| | | url: baseUrl + "/rgv/ring/through/rgv/position/data", |
| | | headers: { |
| | | 'token': localStorage.getItem('token') |
| | | }, |
| | | data: {}, |
| | | dataType: 'json', |
| | | contentType: 'application/json;charset=UTF-8', |
| | | method: 'post', |
| | | success: function (res) { |
| | | that.tableDataRgv = res.data |
| | | } |
| | | }); |
| | | }, |
| | | getTableDataDev() { |
| | | let that = this; |
| | | $.ajax({ |
| | | url: baseUrl + "/rgv/ring/through/dev/position/data", |
| | | headers: { |
| | | 'token': localStorage.getItem('token') |
| | | }, |
| | | data: {}, |
| | | dataType: 'json', |
| | | contentType: 'application/json;charset=UTF-8', |
| | | method: 'post', |
| | | success: function (res) { |
| | | that.tableDataDev = res.data |
| | | } |
| | | }); |
| | | }, |
| | | getTableDataTrack() { |
| | | let that = this; |
| | | $.ajax({ |
| | | url: baseUrl + "/rgv/ring/through/track/position/data", |
| | | headers: { |
| | | 'token': localStorage.getItem('token') |
| | | }, |
| | | data: {}, |
| | | dataType: 'json', |
| | | contentType: 'application/json;charset=UTF-8', |
| | | method: 'post', |
| | | success: function (res) { |
| | | that.energyGatheringRing = res.data |
| | | } |
| | | }); |
| | | }, |
| | | // 处理窗口大小变化 |
| | | handleResize: _.debounce(function() { |
| | | this.updateContainerSize(); |
| | | this.updateBodySize(); |
| | | }, 100) |
| | | } |
| | | }) |
| | | |
| | | </script> |
| | | </body> |
| | | <script> |
| | | // 导航栏 |
| | | function nav(id) { |
| | | $('.nav-select').attr("class", "nav-unselect"); |
| | | $('#'+id).attr("class", "nav-select"); |
| | | $('#content').attr("src", id+".html"); |
| | | } |
| | | |
| | | function logout() { |
| | | localStorage.removeItem("token"); |
| | | window.location.href = baseUrl + "/login"; |
| | | } |
| | | |
| | | // 系统运行状态 |
| | | var systemRunning = true; |
| | | </script> |
| | | </html> |