zy-wcs.git - Gitblit

			@@ -1,43 +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">
			<style>
			/* 统一处理 */
			, ::before, *::after {
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			margin: 0;
			padding: 0;
			}
			html {
			line-height: 1.5;
			font-size: 15px;
			}

			.nav {
			background-color: #fd5830;
			}
			.nav ul li {
			list-style-type: none;
			}
			</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>
			<div class="nav">
			<ul>
			<li>导航一</li>
			<li>导航二</li>
			<li>导航三</li>
			<li>导航四</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>
			<script>
			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>