| | |
| | | <meta charset="utf-8"> |
| | | <title>环形穿梭车智能系统</title> |
| | | <link rel="stylesheet" href="../static/css/element.css"> |
| | | <link rel="stylesheet" href="../static/css/indexHCDD.css"> |
| | | <link rel="stylesheet" href="../static/css/indexHCDDXKD.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> |
| | | <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; |
| | | } |
| | | 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: 80vh; |
| | | height: 80vh; |
| | | 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: 40px; |
| | | height: 24px; |
| | | /*border-radius: 50%;*/ |
| | | text-align: center; |
| | | line-height: 24px; |
| | | font-weight: bold; |
| | | transition: transform 0.3s ease; |
| | | background-color: #ab1839; |
| | | transform: scale(1.2); |
| | | } |
| | | .bus { |
| | | background-color: #2196F3; |
| | | border: 20px solid #ffffff; |
| | | position: absolute; |
| | | width: 24px; |
| | | height: 24px; |
| | | border-radius: 50%; |
| | | text-align: center; |
| | | line-height: 24px; |
| | | font-weight: bold; |
| | | transition: transform 0.3s ease; |
| | | } |
| | | .station:hover, .bus:hover { |
| | | transform: scale(1.4); |
| | | } |
| | | |
| | | .task-bar-left { |
| | | position: fixed; |
| | | top: 10%; |
| | | 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: 20%; |
| | | 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; /* 距离左边的距离 */ |
| | | } |
| | | |
| | | .right-task-bar { |
| | | right: 20px; /* 距离右边的距离 */ |
| | | } |
| | | |
| | | .el-table .warning-row { |
| | | background: oldlace; |
| | | } |
| | | |
| | | .el-table .success-row { |
| | | background: #f0f9eb; |
| | | } |
| | | </style> |
| | | <script type="text/javascript" src="testPosition.js"></script> |
| | | </head> |
| | | <body> |
| | | <!--<header>--> |
| | | <!-- 环形穿梭车智能系统--> |
| | | <!--</header>--> |
| | | <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 id="app"> |
| | | |
| | | <!-- 新增的许可证横幅,放在 header 之后,app 之前 --> |
| | | <div v-if="licenseDayI <= 30" |
| | | :class="['license-banner', licenseDayI <= 0 ? 'expired' : licenseDayI <= 7 ? 'urgent' : 'warning']" |
| | | style="z-index: 9999;"> |
| | | <div class="license-content"> |
| | | <i :class="licenseDayI <= 0 ? 'el-icon-error' : licenseDayI <= 7 ? 'el-icon-warning' : 'el-icon-info'"></i> |
| | | <span class="license-text">{{ licenseDay }}</span> |
| | | <span v-if="licenseDayI > 0" class="license-days">{{ licenseDayI }} 天</span> |
| | | </div> |
| | | </div> |
| | | <div class="map"> |
| | | <div class="system-control-panel"> |
| | | <div class="system-status"> |
| | | <div class="status-indicator" :class="valueSystem ? 'status-running' : 'status-stopped'"></div> |
| | | <span class="status-text">{{ valueSystem ? '系统运行中' : '系统已停止' }}</span> |
| | | </div> |
| | | <div class="custom-switch"> |
| | | <el-switch |
| | | v-model="valueSystem" |
| | | active-color="#13ce66" |
| | | inactive-color="#A64036" |
| | | @change='upDateValueSystem'> |
| | | </el-switch> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="license-info" :class="getLicenseClass()" v-if="licenseDayI <=30"> |
| | | <span class="license-icon">📄</span> |
| | | {{ licenseDay }} |
| | | </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> |
| | | <!-- <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> |
| | | |
| | | <!-- Stations on outer ring --> |
| | | <div v-for="station in tableDataDev" class="station" :style="{ top: station.valueX + '%', left: station.valueY + '%' }">{{ station.index }}</div> |
| | | <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> |
| | | |
| | | <!-- Buses --> |
| | | <div v-for="bus in tableDataRgv" class="bus" :style="{ top: bus.valueX + '%', left: bus.valueY + '%' , borderColor: bus.modeColor, backgroundColor: bus.statusColor}">{{ bus.index }}</div> |
| | | <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 v-if="valueLeft === '100' " class="task-bar-div1" style="margin-top: 200px"> |
| | | <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%" |
| | |
| | | label="工作状态"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="staNo" |
| | | 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="RGV状态"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="" |
| | | label="操作"> |
| | | <el-button type="primary" icon="el-icon-edit" circle></el-button> |
| | | label="操作" |
| | | type="template"> |
| | | <template slot-scope="scope"> |
| | | <el-button |
| | | type="danger" |
| | | size="small" |
| | | @click.native="taskDelete(scope.row)"> |
| | | 删除 |
| | | </el-button> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="操作" |
| | | type="template"> |
| | | <template slot-scope="scope"> |
| | | <el-button |
| | | type="danger" |
| | | size="small" |
| | | @click.native="taskDelete1(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: ' + valueLeft" placement="top"> |
| | | <el-tooltip :content="'Switch value: ' + valueLeft1" placement="top"> |
| | | <el-switch |
| | | v-model="valueLeft" |
| | | v-model="valueLeft1" |
| | | active-color="#13ce66" |
| | | inactive-color="#ff4949" |
| | | active-value="100" |
| | |
| | | </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 v-if="valueRight === '100' " class="task-bar-div1" style="margin-top: 200px"> |
| | | <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%" |
| | |
| | | label="状态"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="" |
| | | label="操作"> |
| | | <el-button type="primary" icon="el-icon-edit" circle></el-button> |
| | | 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: ' + valueRight" placement="top"> |
| | | <el-tooltip :content="'Switch value: ' + valueRight1" placement="top"> |
| | | <el-switch |
| | | v-model="valueRight" |
| | | v-model="valueRight1" |
| | | active-color="#13ce66" |
| | | inactive-color="#ff4949" |
| | | active-value="100" |
| | |
| | | </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: [], |
| | | tableDataRight: [] |
| | | 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() |
| | | |
| | | // 高频更新:小车和设备位置(1.5秒) |
| | | setInterval(() => { |
| | | this.getTableDataRgv() |
| | | this.getTableDataDev() |
| | | this.getTableDataTrack() |
| | | }, 1000) |
| | | |
| | | // 高频更新:实时任务列表等(2秒) |
| | | setInterval(() => { |
| | | this.getTableDataLeft() |
| | | this.getTableDataRight() |
| | | }, 1000) |
| | | }, 2000) |
| | | |
| | | // 高频更新:实时站点信息等(3秒) |
| | | setInterval(() => { |
| | | this.getTableDataDev() |
| | | }, 3000) |
| | | |
| | | // 低频更新:任务列表等(10秒) |
| | | setInterval(() => { |
| | | this.getTableDataLeft1() |
| | | this.getTableDataRight1() |
| | | this.getValueSystem() |
| | | }, 10*1000) |
| | | |
| | | // 低频更新:许可证信息(30秒) |
| | | setInterval(() => { |
| | | this.getLicenseDays() |
| | | }, 30000) |
| | | |
| | | // 静态低频更新:PLC(1小时) |
| | | setInterval(() => { |
| | | this.getTableDataTrack() |
| | | }, 60*60*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) { |
| | | console.log(val); |
| | | if (val.length === 0){ |
| | | valueRight = '0'; |
| | | } else { |
| | | console.log("2222"+val); |
| | | |
| | | if (val.length >= 1){ |
| | | this.handleChangeValueRight(1) |
| | | } |
| | | } |
| | | }, |
| | | handleChangeValueRight(val) { |
| | | console.log("33333"+val); |
| | | 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('删除失败'); |
| | | } |
| | | } |
| | | }); |
| | | }); |
| | | }, |
| | | taskDelete1(row) { |
| | | let that = this; |
| | | that.$confirm('确认要初始化该任务吗?', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning' |
| | | }).then(() => { |
| | | $.ajax({ |
| | | url: baseUrl + "/rgv/disable/task/delete1", |
| | | 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'; |
| | |
| | | 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'; |
| | |
| | | return 'success-row'; |
| | | } |
| | | return ''; |
| | | }, |
| | | |
| | | // 获取许可证样式类 |
| | | getLicenseClass() { |
| | | if (this.licenseDayI > 30) { |
| | | return 'normal'; |
| | | } else if (this.licenseDayI > 0) { |
| | | return 'warning'; |
| | | } else { |
| | | return 'expired'; |
| | | } |
| | | }, |
| | | 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.$message.success(`状态更新成功`); |
| | | } else { |
| | | that.$message.error('状态更新失败'); |
| | | } |
| | | } |
| | | }); |
| | | }); |
| | | }, |
| | | getTableDataLeft() { |
| | | let that = this; |
| | |
| | | } |
| | | }); |
| | | }, |
| | | 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({ |
| | |
| | | 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 |
| | | } |
| | | }); |
| | | }, |
| | |
| | | that.energyGatheringRing = res.data |
| | | } |
| | | }); |
| | | } |
| | | }, |
| | | // 处理窗口大小变化 |
| | | handleResize: _.debounce(function() { |
| | | this.updateContainerSize(); |
| | | this.updateBodySize(); |
| | | }, 100) |
| | | } |
| | | }) |
| | | |