zy-wcs.git - Gitblit

			@@ -1,49 +1,345 @@
			<!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>Gateway</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: 40%;">
			<el-card class="box-card">
			<div slot="header" class="clearfix">
			<span>模拟设备 - {{ systemInfo.gatewayId }}号网关</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>-->
			<el-button style="float: right; padding: 3px 0" type="text" @click="setCurrentDeviceConfig(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>

			<div v-if="currentDeviceConfig != null" style="width: 30%;margin-left: 30px;">
			<el-card class="box-card">
			<div slot="header" class="clearfix">
			<span>模拟设备状态</span>
			</div>

			<div style="display: flex;flex-wrap: wrap;justify-content: space-between;">
			<div v-if="currentDeviceData != null" style="width: 100%;margin-top: 20px">
			<el-card class="box-card" >
			<div slot="header" class="clearfix">
			<span>{{ currentDeviceData.deviceType }} - {{ currentDeviceData.deviceNo }}</span>
			<el-button v-if="currentDeviceDataForm == null" style="float: right; padding: 3px 0" type="text" @click="updateCurrentDeviceStatus(currentDeviceData)">更新状态</el-button>
			<el-button v-else style="float: right; padding: 3px 0" type="text" @click="submitUpdateCurrentDeviceStatus(currentDeviceDataForm)">提交更新</el-button>
			</div>

			<div v-if="currentDeviceDataForm == null">
			<div>模式: {{ currentDeviceData.data.mode }}</div>
			<div>状态: {{ currentDeviceData.data.deviceStatus }}</div>
			<div>顶升: {{ currentDeviceData.data.hasLift }}</div>
			<div>托盘: {{ currentDeviceData.data.hasPallet }}</div>
			<div>坐标: {{ currentDeviceData.data.currentCode }}</div>
			<div>异常: {{ currentDeviceData.data.errorCode }}</div>
			<div>充电: {{ currentDeviceData.data.hasCharge }}</div>
			<div>电量: {{ currentDeviceData.data.batteryPower }}</div>
			<div>电压: {{ currentDeviceData.data.batteryVoltage }}</div>
			<div>运行方向: {{ currentDeviceData.data.runDirection }}</div>
			<div>速度: {{ currentDeviceData.data.speed }}</div>
			</div>

			<div v-else>
			<div>模式: <el-input v-model="currentDeviceDataForm.data.mode"></el-input></div>
			<div>状态: <el-input v-model="currentDeviceDataForm.data.deviceStatus"></el-input></div>
			<div>顶升: <el-input v-model="currentDeviceDataForm.data.hasLift"></el-input></div>
			<div>托盘: <el-input v-model="currentDeviceDataForm.data.hasPallet"></el-input></div>
			<div>坐标: <el-input v-model="currentDeviceDataForm.data.currentCode"></el-input></div>
			<div>异常: <el-input v-model="currentDeviceDataForm.data.errorCode"></el-input></div>
			<div>充电: <el-input v-model="currentDeviceDataForm.data.hasCharge"></el-input></div>
			<div>电量: <el-input v-model="currentDeviceDataForm.data.batteryPower"></el-input></div>
			<div>电压: <el-input v-model="currentDeviceDataForm.data.batteryVoltage"></el-input></div>
			<div>运行方向: <el-input v-model="currentDeviceDataForm.data.runDirection"></el-input></div>
			<div>速度: <el-input v-model="currentDeviceDataForm.data.speed"></el-input></div>
			</div>

			<div>
			原始数据：
			{{ currentDeviceData }}
			</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: ''
			},
			systemInfo: {
			gatewayId: 0,
			gatewayPort: 0
			},
			formLabelWidth: '120px',
			deviceList: [],
			currentDeviceConfig: null,
			currentDeviceData: null,
			currentDeviceDataForm: null
			},
			created() {
			this.init()
			},
			methods: {
			init() {
			this.getSystemInfo();

			setInterval(() => {
			this.getDeviceList()
			this.getFakeThreadStatus()
			}, 1000);
			},
			getSystemInfo() {
			let that = this;
			$.ajax({
			url: baseUrl + "/open/getSystemInfo",
			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.systemInfo = data
			} else {
			that.$message({
			message: res.msg,
			type: 'error'
			});
			}
			}
			});
			},
			setCurrentDeviceConfig(deviceConfig) {
			this.currentDeviceConfig = deviceConfig
			this.currentDeviceDataForm = null;
			},
			updateCurrentDeviceStatus(currentDeviceData) {
			if (this.currentDeviceDataForm == null) {
			this.currentDeviceDataForm = currentDeviceData;
			}else {
			this.currentDeviceDataForm = null;
			}
			},
			submitUpdateCurrentDeviceStatus(currentDeviceDataForm) {
			let that = this;
			$.ajax({
			url: baseUrl + "/open/updateFakeThreadStatus",
			headers: {
			'token': localStorage.getItem('token')
			},
			data: JSON.stringify({
			deviceType: currentDeviceDataForm.deviceType,
			deviceNo: currentDeviceDataForm.deviceNo,
			data: JSON.stringify(currentDeviceDataForm.data)
			}),
			dataType: 'json',
			contentType: 'application/json;charset=UTF-8',
			method: 'POST',
			success: function (res) {
			if (res.code == 200) {
			that.currentDeviceDataForm = null;
			that.$message({
			message: res.msg,
			type: 'success'
			});
			} else {
			that.$message({
			message: res.msg,
			type: 'error'
			});
			}
			}
			});
			},
			getFakeThreadStatus() {
			let that = this;
			if (this.currentDeviceConfig == null) {
			return;
			}

			$.ajax({
			url: baseUrl + "/open/getFakeThreadStatus",
			headers: {
			'token': localStorage.getItem('token')
			},
			data: JSON.stringify({
			deviceType: this.currentDeviceConfig.deviceType,
			deviceNo: this.currentDeviceConfig.deviceNo
			}),
			dataType: 'json',
			contentType: 'application/json;charset=UTF-8',
			method: 'POST',
			success: function (res) {
			if (res.code == 200) {
			let data = res.data;
			let result = {
			deviceType: that.currentDeviceConfig.deviceType,
			deviceNo: that.currentDeviceConfig.deviceNo,
			data: data
			}

			that.currentDeviceData = result
			} else {
			that.currentDeviceConfig = null;
			that.$message({
			message: res.msg,
			type: 'error'
			});
			}
			}
			});
			},
			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>