| | |
| | | <!DOCTYPE html> |
| | | <html lang="en"> |
| | | |
| | | <head> |
| | | <meta charset="utf-8"> |
| | | <title>自动仓库RCS系统</title> |
| | | <link rel="stylesheet" href="../static/css/index.css"> |
| | | <link rel="stylesheet" href="../static/css/layx.min.css" type="text/css" /> |
| | | <script src="../static/js/jquery/jquery-3.3.1.min.js"></script> |
| | | <script src="../static/js/tools/layx.min.js"></script> |
| | | <meta charset="UTF-8"> |
| | | <title>任务管理</title> |
| | | <link rel="stylesheet" href="../static/vue/element/element.css"> |
| | | <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/vue/js/vue.min.js"></script> |
| | | <script type="text/javascript" src="../static/vue/element/element.js"></script> |
| | | <style> |
| | | .layx-window.layx-skin-news .layx-control-bar { |
| | | background-color: #333333; |
| | | .el-table .success-row { |
| | | background: #b6ff8e; |
| | | } |
| | | </style> |
| | | </head> |
| | | |
| | | <body> |
| | | <!-- 导航栏 --> |
| | | <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="forklift" onclick="nav(this.id)" class="nav-unselect" href="#">提升机</a></li> |
| | | <li><a id="shuttle" onclick="nav(this.id)" class="nav-unselect" href="#">四向穿梭车</a></li> |
| | | <li><a id="admin" onclick="nav(this.id)" class="nav-unselect" href="#">管理后台</a></li> |
| | | </ul> |
| | | <div id="app" style="display: flex;justify-content: center;flex-wrap: wrap;"> |
| | | <div style="width: 50%;"> |
| | | <el-card class="box-card"> |
| | | <div slot="header" class="clearfix"> |
| | | <span>模拟设备</span> |
| | | <el-button style="float: right; padding: 3px 0" type="text" @click="addDeviceVisible = true">添加设备</el-button> |
| | | </div> |
| | | |
| | | <div style="display: flex;flex-wrap: wrap;justify-content: space-between;"> |
| | | <div v-for="item in deviceList" style="width: 49%;margin-top: 20px"> |
| | | <el-card class="box-card"> |
| | | <div slot="header" class="clearfix"> |
| | | <span>{{ item.deviceType }} - {{ item.deviceNo }}</span> |
| | | <el-button style="float: right; padding: 3px 0" type="text" @click="delDevice(item)">删除设备</el-button> |
| | | </div> |
| | | |
| | | <div> |
| | | <div>IP: {{ item.ip }}</div> |
| | | <div>端口: {{ item.port }}</div> |
| | | <div>虚拟: {{ item.fake }}</div> |
| | | <div>实现类: {{ item.threadImpl }}</div> |
| | | </div> |
| | | </el-card> |
| | | </div> |
| | | </div> |
| | | </el-card> |
| | | </div> |
| | | |
| | | |
| | | <el-dialog title="添加模拟设备" :visible.sync="addDeviceVisible"> |
| | | <el-form :model="addDeviceParam"> |
| | | <el-form-item label="设备编号" :label-width="formLabelWidth"> |
| | | <el-input v-model="addDeviceParam.deviceNo"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="IP" :label-width="formLabelWidth"> |
| | | <el-input v-model="addDeviceParam.ip"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="端口" :label-width="formLabelWidth"> |
| | | <el-input v-model="addDeviceParam.port"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="实现类" :label-width="formLabelWidth"> |
| | | <el-input v-model="addDeviceParam.threadImpl"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="设备类型" :label-width="formLabelWidth"> |
| | | <el-input v-model="addDeviceParam.deviceType"></el-input> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div slot="footer" class="dialog-footer"> |
| | | <el-button @click="addDeviceVisible = false">取 消</el-button> |
| | | <el-button type="primary" @click="addDevice">确 定</el-button> |
| | | </div> |
| | | </el-dialog> |
| | | |
| | | </div> |
| | | <!-- 主体内容 --> |
| | | <iframe id="content" src="console.html"></iframe> |
| | | <!-- 尾部 --> |
| | | <footer class="footer"> |
| | | Copyright © 2015~2025 All Rights Reserved. 浙江中扬立库技术有限公司 保留所有权利 |
| | | </footer> |
| | | </body> |
| | | <script> |
| | | // 导航栏 |
| | | function nav(id) { |
| | | if(id == 'admin') { |
| | | window.open('./admin/index.html') |
| | | return |
| | | } |
| | | $('.nav-select').attr("class", "nav-unselect"); |
| | | $('#'+id).attr("class", "nav-select"); |
| | | $('#content').attr("src", id+".html"); |
| | | } |
| | | |
| | | // 系统运行状态 |
| | | var systemRunning = true; |
| | | |
| | | // news by http://chuange.gitee.io/vue-layx/ |
| | | news();layx.min('wcs-news'); |
| | | function news() { |
| | | layx.iframe( |
| | | 'wcs-news' // id |
| | | , '系统分析报告' |
| | | , "news.html" |
| | | , { |
| | | shadow:false |
| | | , storeStatus:false |
| | | // , skin: 'news' |
| | | , width:800 |
| | | , height:600 |
| | | , position:'rb' |
| | | // , control:false |
| | | , opacity:0.9 |
| | | , border:false |
| | | , icon:'<img src="../static/images/favicon.ico" style="height:22px;display:block;" alt=""/>' |
| | | , stickMenu:true |
| | | , maxMenu:false |
| | | , closeMenu:false |
| | | , moveLimit:{ |
| | | leftOut: false, |
| | | rightOut: false, |
| | | topOut: false, |
| | | bottomOut: false, |
| | | } |
| | | , minWidth:300 |
| | | , minHeight:300 |
| | | , borderRadius: '8px' |
| | | , shadeDestroy:true |
| | | , escKey: false |
| | | , event:{ |
| | | onmin: { |
| | | after: function () { |
| | | $('.layx-min-statu').css("left", "inherit").css("right", "10px") |
| | | var app = new Vue({ |
| | | el: '#app', |
| | | data: { |
| | | addDeviceVisible: false, |
| | | addDeviceParam: { |
| | | deviceNo: '', |
| | | ip: '', |
| | | port: '', |
| | | threadImpl: '', |
| | | deviceType: '' |
| | | }, |
| | | formLabelWidth: '120px', |
| | | deviceList: [] |
| | | }, |
| | | created() { |
| | | this.init() |
| | | }, |
| | | methods: { |
| | | init() { |
| | | setInterval(() => { |
| | | this.getDeviceList() |
| | | }, 100); |
| | | }, |
| | | addDevice() { |
| | | //添加设备 |
| | | let that = this; |
| | | $.ajax({ |
| | | url: baseUrl + "/open/addFakeDevice", |
| | | headers: { |
| | | 'token': localStorage.getItem('token') |
| | | }, |
| | | data: JSON.stringify(this.addDeviceParam), |
| | | dataType: 'json', |
| | | contentType: 'application/json;charset=UTF-8', |
| | | method: 'POST', |
| | | success: function(res) { |
| | | if (res.code == 200) { |
| | | console.log(res) |
| | | } else { |
| | | that.$message({ |
| | | message: res.msg, |
| | | type: 'error' |
| | | }); |
| | | } |
| | | } |
| | | , onrestore:{ |
| | | after: function () { |
| | | let win = layx.getFrameContext('wcs-news'); |
| | | win.autoScroll = true |
| | | }); |
| | | }, |
| | | getDeviceList() { |
| | | let that = this; |
| | | $.ajax({ |
| | | url: baseUrl + "/open/getDeviceList", |
| | | headers: { |
| | | 'token': localStorage.getItem('token') |
| | | }, |
| | | data: {}, |
| | | dataType: 'json', |
| | | contentType: 'application/json;charset=UTF-8', |
| | | method: 'GET', |
| | | success: function(res) { |
| | | if (res.code == 200) { |
| | | let data = res.data; |
| | | that.deviceList = data |
| | | } else { |
| | | that.$message({ |
| | | message: res.msg, |
| | | type: 'error' |
| | | }); |
| | | } |
| | | } |
| | | } |
| | | }); |
| | | }, |
| | | delDevice(config) { |
| | | let that = this; |
| | | $.ajax({ |
| | | url: baseUrl + "/open/deleteFakeDevice", |
| | | headers: { |
| | | 'token': localStorage.getItem('token') |
| | | }, |
| | | data: JSON.stringify({ |
| | | deviceNo: config.deviceNo, |
| | | deviceType: config.deviceType |
| | | }), |
| | | dataType: 'json', |
| | | contentType: 'application/json;charset=UTF-8', |
| | | method: 'POST', |
| | | success: function(res) { |
| | | if (res.code == 200) { |
| | | let data = res.data; |
| | | that.deviceList = data |
| | | } else { |
| | | that.$message({ |
| | | message: res.msg, |
| | | type: 'error' |
| | | }); |
| | | } |
| | | } |
| | | }); |
| | | } |
| | | ); |
| | | } |
| | | |
| | | }, |
| | | }) |
| | | </script> |
| | | </body> |
| | | |
| | | </html> |