<!DOCTYPE html>
|
<html lang="en">
|
|
<head>
|
<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>
|
<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>
|
|
<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>
|
|
<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>
|
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>
|
