From 43cf710a3dcb3b5d8f0e98313e24e306ba03e43b Mon Sep 17 00:00:00 2001
From: zuojincheng <lf_zuo@163.com>
Date: 星期三, 23 十月 2024 16:55:17 +0800
Subject: [PATCH] 自动化测试模块：完成了指令管理的后端对接。实现了网串中间件的连接、断开、实时连接状态、消息推送、指令的发送和接收、清空通信记录、预置指令的快捷输入及一键发送、断卡连接禁用发送功能。
---
src/views/autoTest.vue | 235 +++++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 215 insertions(+), 20 deletions(-)
diff --git a/src/views/autoTest.vue b/src/views/autoTest.vue
index 447b8fa..32920e0 100644
--- a/src/views/autoTest.vue
+++ b/src/views/autoTest.vue
@@ -31,21 +31,28 @@
<el-tab-pane label="璁剧疆鎸囦护" name="2"></el-tab-pane>
</el-tabs>
<div class="tabsBtn">
- <el-button size="mini" @click="handleFormDataAdd"><i class="iconfont icon-zidonghuaceshi" style="font-size: 12px;"></i>
- 娣诲姞鎸囦护</el-button>
- <el-button size="mini"><i class="iconfont icon-duilie" style="font-size: 12px;"></i> 鍔犲叆闃熷垪</el-button>
+ <el-button size="mini" @click="handleFormDataAdd"><i class="iconfont icon-zidonghuaceshi"
+ style="font-size: 12px;"></i>
+ 鏂板缓鎸囦护</el-button>
+ <el-button size="mini"><i class="iconfont icon-duilie" style="font-size: 12px;"></i> 鍏ㄩ儴娣诲姞鍒伴槦鍒�</el-button>
</div>
</div>
<!-- 鏁版嵁琛ㄦ牸鍖� -->
<el-table stripe :data="tableData" height="0">
<el-table-column type="index" label="搴忓彿"> </el-table-column>
- <el-table-column prop="name" label="鍚嶇О" width="120px" show-overflow-tooltip > </el-table-column>
- <el-table-column prop="value" label="鎸囦护" show-overflow-tooltip > </el-table-column>
- <el-table-column prop="item" label="鎿嶄綔" width="230px">
+ <el-table-column prop="name" label="鍚嶇О" width="120px" show-overflow-tooltip> </el-table-column>
+ <el-table-column prop="value" label="鎸囦护" show-overflow-tooltip> </el-table-column>
+ <el-table-column prop="item" label="鎿嶄綔" width="271px">
<template slot-scope="scope">
- <el-button icon="el-icon-edit" type="text" size="mini" @click.native.prevent="handleFormDataEdit(scope.row)">缂栬緫</el-button>
- <el-button icon="el-icon-delete" type="text" size="mini" @click.native.prevent="handleFormDataDel(scope.row)">鍒犻櫎</el-button>
- <el-button type="text" size="mini"><i class="iconfont icon-fasong" style="font-size: 12px;"></i>
+ <el-button icon="el-icon-edit" type="text" size="mini"
+ @click.native.prevent="handleFormDataEdit(scope.row)">缂栬緫</el-button>
+ <el-button icon="el-icon-delete" type="text" size="mini"
+ @click.native.prevent="handleFormDataDel(scope.row)">鍒犻櫎</el-button>
+ <el-button type="text" size="mini" @click="inputValue = scope.row.value"><i class="iconfont icon-shuru"
+ style="font-size: 12px;"></i>
+ 杈撳叆</el-button>
+ <el-button type="text" size="mini" :disabled="!connStatus" @click="sendMessage(scope.row.value)"><i
+ class="iconfont icon-fasong" style="font-size: 12px;"></i>
鍙戦��</el-button>
<el-button type="text" size="mini"><i class="iconfont icon-duilie" style="font-size: 12px;"></i>
闃熷垪</el-button>
@@ -64,8 +71,10 @@
<el-input style="width:320px" v-model="formData.id" disabled></el-input>
</el-form-item>
<el-form-item label="浜у搧" prop="proId">
- <el-select v-model="formData.proId" @focus="onShowProductList2" placeholder="璇烽�夋嫨" style="width:320px;" clearable ref="productList2">
- <el-option v-for="(item, index) in selectData" :key="index" :label="`${item.name} / ${item.type}`" :value="item.id">
+ <el-select v-model="formData.proId" @focus="onShowProductList2" placeholder="璇烽�夋嫨" style="width:320px;"
+ clearable ref="productList2">
+ <el-option v-for="(item, index) in selectData" :key="index" :label="`${item.name} / ${item.type}`"
+ :value="item.id">
</el-option>
</el-select>
</el-form-item>
@@ -93,15 +102,30 @@
<div class="title">
<span class="titleName">涓插彛閫氫俊鏃ュ織</span>
<div style="margin-bottom: 10px;">
- <el-button size="mini"><i class="iconfont icon-qingkong" style="font-size: 12px;"></i> 娓呯┖鍘嗗彶璁板綍</el-button>
+ <el-button size="mini" plain type="success" v-if="!connStatus" @click="setWebSocketConn"><i
+ class="iconfont icon-lianjie" style="font-size: 12px;"></i> 杩炴帴涓插彛閫氫俊</el-button>
+ <el-button size="mini" plain type="danger" v-if="connStatus" @click="closeWebSocketConn"><i
+ class="iconfont icon-duankai" style="font-size: 12px;"></i> 鏂紑涓插彛閫氫俊</el-button>
+ <el-button size="mini" @click="clearMessageList"><i class="iconfont icon-qingkong"
+ style="font-size: 12px;"></i>
+ 娓呯┖閫氫俊璁板綍</el-button>
</div>
</div>
<!-- 娑堟伅鍒楄〃 -->
- <div class="messages"></div>
+ <div class="messages">
+ <div v-for="item, index in messageList" :key="index" :class="`messageItem ${item.type}`">
+ <span class="name" v-if="item.type == 'receive'">鎺ユ敹</span>
+ <span :class="`content ${item.type}`">{{ item.content }}</span>
+ <span class="name" v-if="item.type == 'send'">鍙戦��</span>
+ </div>
+ </div>
<!-- 杈撳叆鍖哄煙 -->
<div class="input">
<input v-model="inputValue" placeholder="璇疯緭鍏ユ寚浠�"></input>
- <button><i class="iconfont icon-fasong" style="font-size: 12px;"></i> 鍙戦��</button>
+ <button @click="sendInputMessage" :disabled="!connStatus"><i class="iconfont icon-fasong"
+ style="font-size: 12px;"></i> 鍙戦��</button>
+ <button @click="inputValue = null" class="clearButton"><i class="iconfont icon-qingkong"
+ style="font-size: 12px;"></i> 娓呴櫎</button>
</div>
<!-- 妯″潡鏍囬鍙婂姛鑳芥寜閽� -->
<div class="title" style="padding-top: 20px;">
@@ -110,7 +134,8 @@
<span style="font-size: 12px; font-weight: normal; margin-right: 5px;">鎸囦护闂撮殧</span>
<el-input-number size="mini" v-model="timeOutNum" style="margin-right: 5px;"></el-input-number>
<span style="font-size: 12px; font-weight: normal; margin-right: 20px;">绉�</span>
- <el-button size="mini"><i class="iconfont icon-kaishi" style="font-size: 12px;"></i> 寮�濮嬪彂閫�</el-button>
+ <el-button size="mini" :disabled="!connStatus"><i class="iconfont icon-kaishi" style="font-size: 12px;"></i>
+ 寮�濮嬪彂閫�</el-button>
<el-button size="mini"><i class="iconfont icon-qingkong" style="font-size: 12px;"></i> 娓呯┖闃熷垪</el-button>
<el-button size="mini" v-if="showSendList" @click="showSendList = false"><i class="iconfont icon-zuixiaohua"
style="font-size: 12px;"></i> 鍒楄〃缂╁皬</el-button>
@@ -128,26 +153,33 @@
<style lang="less" scoped>
.autoTest {
padding: 20px;
+
.mainWrap {
height: 100%;
display: flex;
+
.leftWrap {
width: 600px;
height: calc(100vh - 187px);
display: flex;
flex-direction: column;
+
.conn {
margin-left: 20px;
font-weight: 700;
}
+
.connected {
color: #67c23a;
}
+
.closed {
color: #f56c6c;
}
+
.tabs {
position: relative;
+
.tabsBtn {
position: absolute;
right: 0;
@@ -157,6 +189,7 @@
}
}
}
+
.rightWrap {
margin-left: 20px;
flex-grow: 1;
@@ -164,6 +197,7 @@
height: calc(100vh - 187px);
display: flex;
flex-direction: column;
+
.title {
height: 32px;
line-height: 32px;
@@ -174,22 +208,87 @@
display: flex;
justify-content: space-between;
align-items: center;
+
.titleName {
background-color: #fff;
padding: 0 20px;
}
}
+
.messages {
flex-grow: 1;
+ height: 0;
+ overflow: auto;
+
+ .messageItem:first-child {
+ margin-top: 10px;
+ }
+
+ .messageItem {
+ display: flex;
+ align-items: flex-start;
+ margin-bottom: 10px;
+
+ .content {
+ min-height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 5px;
+ max-width: 400px;
+ word-break: break-all;
+ overflow: hidden;
+ padding: 10px;
+ box-sizing: border-box;
+ }
+
+ .name {
+ display: inline-block;
+ width: 40px;
+ height: 40px;
+ line-height: 40px;
+ text-align: center;
+ margin: 0 10px;
+ font-size: 12px;
+ color: #fff;
+ border-radius: 5px;
+ background-color: #409eff;
+ }
+
+ .send {
+ background-color: #d0e7ff;
+ }
+
+ .receive {
+ background-color: #eeeeee;
+ }
+ }
+
+ .system {
+ justify-content: center;
+ color: #aaaaaa;
+ font-size: 12px;
+ }
+
+ .send {
+ justify-content: flex-end;
+ }
+
+ .receive {
+ justify-content: flex-start;
+ }
}
+
.sendList {
height: 220px;
}
+
.input {
border-top: 2px solid #f5f5f5;
border-bottom: 2px solid #f5f5f5;
height: 40px;
display: flex;
+
input {
padding-left: 10px;
border: none;
@@ -197,6 +296,7 @@
border-right: 2px solid #f5f5f5;
flex-grow: 1;
}
+
button {
width: 80px;
border: none;
@@ -204,16 +304,23 @@
background-color: #fff;
cursor: pointer;
}
+
+ .clearButton {
+ border-left: 2px solid #f5f5f5;
+ }
}
}
}
}
+
::v-deep .el-tabs__header {
margin: 0;
}
+
::v-deep .el-tabs__nav {
border: 0 !important;
}
+
::v-deep .el-tabs__item.is-active {
background-color: #fff !important;
border-color: #fff !important;
@@ -231,12 +338,13 @@
pageSize: 10,
pageCurr: 1,
total: 0,
- connStatus: false,
+ webSocketConn: null, // 杩炴帴瀵硅薄
+ connStatus: false, // 杩炴帴鐘舵��
tableData: [],
showFromData: false,
selectData: [],
activeListIndex: '1',
- timeOutNum: 1,
+ timeOutNum: 1, // 鏃堕棿闂撮殧
showSendList: true,
inputValue: null,
showFromData: false,
@@ -253,7 +361,20 @@
name: [{ required: true, message: "蹇呭～椤�", trigger: "blur" }],
value: [{ required: true, message: "蹇呭～椤�", trigger: "blur" }],
},
-
+ messageList: [
+ {
+ type: 'system',
+ content: '1234567890'
+ },
+ {
+ type: 'send',
+ content: '1234567890'
+ },
+ {
+ type: 'receive',
+ content: '1234567890'
+ },
+ ],
};
},
computed: {},
@@ -268,8 +389,10 @@
mounted() {
this.onGetSelectData()
this.onGetTableData()
+ this.setWebSocketConn()
},
methods: {
+ // 鏄剧ず浜у搧鍒楄〃
onShowProductList1: function () {
this.$refs.productList1.blur()
this.$refs.productList.show((res) => {
@@ -314,7 +437,7 @@
var that = this;
this.tableData = [];
this.total = 0;
- if (!this.proId) return;
+ // if (!this.proId) return;
var data = {
type: this.activeListIndex,
proId: this.proId,
@@ -373,7 +496,7 @@
this.onGetSelectData();
this.formData.id = row.id;
this.formData.proId = row.proId;
- this.formData.type = row.type+"";
+ this.formData.type = row.type + "";
this.formData.name = row.name;
this.formData.value = row.value;
this.showFromData = true;
@@ -484,6 +607,78 @@
});
},
// 鍒涘缓缃戜覆涓棿浠惰繛鎺�
+ setWebSocketConn: function () {
+ var that = this;
+ if ('WebSocket' in window) {
+ this.webSocketConn = new WebSocket('ws://localhost:65532')
+ this.webSocketConn.onopen = function () {
+ that.connStatus = true
+ that.messageList.push({
+ type: 'system',
+ content: '缃戜覆涓棿浠跺凡杩炴帴'
+ },)
+ }
+ this.webSocketConn.onmessage = function (evt) {
+ that.messageList.push({
+ type: 'receive',
+ content: evt.data
+ },)
+ }
+ this.webSocketConn.onclose = function () {
+ that.connStatus = false
+ that.messageList.push({
+ type: 'system',
+ content: '缃戜覆涓棿浠跺凡鏂紑'
+ },)
+ }
+ this.webSocketConn.onerror = function () {
+ that.messageList.push({
+ type: 'system',
+ content: '涓棿浠惰繛鎺ュ紓甯�'
+ },)
+ }
+ } else {
+ this.$alert('褰撳墠娴忚鍣ㄤ笉鏀寔websocket杩炴帴', "鎻愮ず", {
+ confirmButtonText: "纭畾",
+ });
+ }
+ },
+ // 鏂紑缃戜覆涓棿浠惰繛鎺�
+ closeWebSocketConn: function () {
+ this.webSocketConn.close()
+ },
+ // 娓呯┖閫氫俊璁板綍
+ clearMessageList: function () {
+ this.messageList.splice(0, this.messageList.length)
+ },
+ // 鍙戦�佹寚浠よ緭鍏ユ鍐呭骞舵竻绌�
+ sendInputMessage: function () {
+ var that = this;
+ if (this.inputValue) {
+ this.webSocketConn.send(this.inputValue)
+ this.messageList.push({
+ type: 'send',
+ content: this.inputValue
+ },)
+ this.inputValue = null
+ } else {
+ this.$alert('璇疯緭鍏ユ寚浠ゅ唴瀹�', "鎻愮ず", {
+ confirmButtonText: "纭畾",
+ })
+ }
+ },
+ // 鍙戦�佹寚浠�
+ sendMessage: function (message) {
+ var that = this;
+ this.webSocketConn.send(message)
+ this.messageList.push({
+ type: 'send',
+ content: message
+ },)
+ },
},
+ destroyed() {
+ this.closeWebSocketConn()
+ }
};
</script>
--
Gitblit v1.8.0