#
Junjie
2025-07-14 471d7b5bc4c8cf7ffeb258f208a66cca202d64de
src/main/webapp/views/index.html
@@ -1,49 +1,178 @@
<!DOCTYPE html>
<html lang="">
<html lang="en">
<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/index.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>
  <style>
    #content {
      box-sizing: border-box;
      padding-top: 46px;
      width: 100%;
      height: 100%;
    }
  </style>
    <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>
        .el-table .success-row {
            background: #b6ff8e;
        }
    </style>
</head>
<body>
  <!-- 导航栏 -->
  <ul class="nav">
    <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 class="right"><a id="about" class="nav-unselect" onclick="nav(this.id)" 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>
  <!-- 主体内容 -->
  <iframe id="content" src="crn.html"></iframe>
            <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>
  <footer class="footer">
    Copyright © 2015 All Rights Reserved. <a href="http://www.zoneyung.com" target="_blank">浙江中扬物流装备有限公司</a>  保留所有权利
  </footer>
</body>
                        <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>
<script>
  // 导航栏
  function nav(id) {
      $('.nav-select').attr("class", "nav-unselect");
      $('#'+id).attr("class", "nav-select");
      $('#content').attr("src", id+".html");
  }
    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'
                            });
                        }
                    }
                });
            },
            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>