#
Junjie
2025-07-05 a757961fc5b8f5ee5b79cc30615bd22d321d0d72
src/main/webapp/views/index.html
@@ -1,100 +1,178 @@
<!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>