From ce511a3d55e5f349b1647172e562c1659bbc8172 Mon Sep 17 00:00:00 2001
From: Junjie <DELL@qq.com>
Date: 星期五, 09 一月 2026 15:27:27 +0800
Subject: [PATCH] #
---
src/main/webapp/views/index.html | 376 ++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 336 insertions(+), 40 deletions(-)
diff --git a/src/main/webapp/views/index.html b/src/main/webapp/views/index.html
index 8fbdc8e..6402c85 100644
--- a/src/main/webapp/views/index.html
+++ b/src/main/webapp/views/index.html
@@ -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>
-
-
--
Gitblit v1.9.1