From 4ce5035f95161fe3c0b56ccbcac96ba524e052b1 Mon Sep 17 00:00:00 2001
From: zuojincheng <lf_zuo@163.com>
Date: 星期四, 24 十月 2024 11:55:43 +0800
Subject: [PATCH] 更新 .gitignore
---
src/views/autoTest.vue | 357 +++++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 334 insertions(+), 23 deletions(-)
diff --git a/src/views/autoTest.vue b/src/views/autoTest.vue
index 1521365..ded6e07 100644
--- a/src/views/autoTest.vue
+++ b/src/views/autoTest.vue
@@ -31,23 +31,32 @@
<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" @click="allAddSendList"><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 type="text" size="mini" @click="addSendList(scope.row)"><i class="iconfont icon-duilie"
+ style="font-size: 12px;"></i>
闃熷垪</el-button>
</template>
</el-table-column>
@@ -64,8 +73,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 +104,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" id="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,8 +136,15 @@
<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"><i class="iconfont icon-qingkong" style="font-size: 12px;"></i> 娓呯┖闃熷垪</el-button>
+ <el-button size="mini" :disabled="!connStatus || !sendList.length" v-if="!sending" @click="sending = true"><i
+ class="iconfont icon-kaishi" style="font-size: 12px;"></i>
+ 寮�濮嬪彂閫�</el-button>
+ <el-button size="mini" v-if="sending" @click="sending = false"><i class="iconfont icon-jieshu"
+ style="font-size: 12px;"></i>
+ 鍋滄鍙戦��</el-button>
+ <el-button size="mini" @click="clearSendList"><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>
<el-button size="mini" v-if="!showSendList" @click="showSendList = true"><i class="iconfont icon-zuidahua"
@@ -119,7 +152,25 @@
</div>
</div>
<!-- 闃熷垪 -->
- <div class="sendList" v-show="showSendList"></div>
+ <div class="sendList" v-show="showSendList">
+ <div class="sendListItem" v-for="item, index in sendList">
+ <div class="index">{{ index+1 }}</div>
+ <div class="name">{{ item.name }}</div>
+ <div class="value">{{ item.value }}</div>
+ <div class="sendStatus">
+ <el-tag size="mini" type="warning" v-if="!item.sendStatus">寰呭彂閫�</el-tag>
+ <el-tag size="mini" type="success" v-if="item.sendStatus">宸插彂閫�</el-tag>
+ </div>
+ <div class="function">
+ <el-button size="mini" @click.native.prevent="sendList.splice(index, 1)">
+ <i class="iconfont icon-quxiao" style="font-size: 12px;"></i> 鍙栨秷
+ </el-button>
+ <!-- <el-button size="mini" @click.native.prevent="item.sendStatus = false" :disabled="!item.sendStatus">
+ <i class="iconfont icon-chongshi" style="font-size: 12px;"></i> 閲嶈瘯
+ </el-button> -->
+ </div>
+ </div>
+ </div>
</div>
</div>
</div>
@@ -128,26 +179,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 +215,7 @@
}
}
}
+
.rightWrap {
margin-left: 20px;
flex-grow: 1;
@@ -164,6 +223,7 @@
height: calc(100vh - 187px);
display: flex;
flex-direction: column;
+
.title {
height: 32px;
line-height: 32px;
@@ -174,22 +234,118 @@
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;
+ overflow: auto;
+
+ .sendListItem {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 10px 10px;
+ box-sizing: border-box;
+ border-bottom: 1px solid #EBEEF5;
+
+ .index {
+ width: 50px;
+ }
+
+ .name {
+ width: 200px;
+ }
+
+ .value {
+ flex-grow: 1;
+ }
+
+ .sendStatus {
+ width: 100px;
+ }
+ }
+
+ .sendListItem:nth-child(even) {
+ background-color: #FAFAFA;
+ }
+
}
+
.input {
border-top: 2px solid #f5f5f5;
border-bottom: 2px solid #f5f5f5;
height: 40px;
display: flex;
+
input {
padding-left: 10px;
border: none;
@@ -197,6 +353,7 @@
border-right: 2px solid #f5f5f5;
flex-grow: 1;
}
+
button {
width: 80px;
border: none;
@@ -204,16 +361,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 +395,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 +418,10 @@
name: [{ required: true, message: "蹇呭～椤�", trigger: "blur" }],
value: [{ required: true, message: "蹇呭～椤�", trigger: "blur" }],
},
-
+ messageList: [],
+ sendList: [],
+ timer: null,
+ sending: false,
};
},
computed: {},
@@ -264,12 +432,27 @@
activeListIndex: function () {
this.onGetTableData();
},
+ timeOutNum: function () {
+ this.setTimer()
+ },
+ messageList: {
+ deep: true,
+ handler: function (newVal, oldVal) {
+ setTimeout(() => {
+ var div = document.getElementById('messages')
+ div.scrollTop = div.scrollHeight
+ },100)
+ }
+ }
},
mounted() {
this.onGetSelectData()
this.onGetTableData()
+ this.setWebSocketConn()
+ this.setTimer()
},
methods: {
+ // 鏄剧ず浜у搧鍒楄〃
onShowProductList1: function () {
this.$refs.productList1.blur()
this.$refs.productList.show((res) => {
@@ -314,7 +497,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 +556,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;
@@ -483,6 +666,134 @@
console.log(err);
});
},
+ // 鍒涘缓缃戜覆涓棿浠惰繛鎺�
+ 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: '缃戜覆涓棿浠跺凡鏂紑'
+ },)
+ if (that.sending) {
+ that.sending = 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
+ },)
+ },
+ // 鍔犲叆闃熷垪
+ addSendList: function (row) {
+ var obj = JSON.parse(JSON.stringify(row))
+ obj.sendStatus = false
+ this.sendList.push(obj)
+ },
+ // 娓呯┖闃熷垪
+ clearSendList: function () {
+ this.sendList.splice(0, this.sendList.length)
+ },
+ // 鍏ㄩ儴鍔犲叆闃熷垪
+ allAddSendList: function () {
+ this.tableData.forEach(item => {
+ var obj = JSON.parse(JSON.stringify(item))
+ obj.sendStatus = false
+ this.sendList.push(obj)
+ })
+ },
+ // 璁剧疆鑷姩鍙戦�佷换鍔�
+ setTimer: function () {
+ if (this.timer) {
+ clearInterval(this.timer)
+ }
+ this.timer = setInterval(() => {
+
+ if (!this.sending) {
+ return
+ }
+ if (this.sendList.length > 0) {
+ this.sendMessage(this.sendList[0].value)
+ this.sendList[0].sendStatus = true
+ this.sendList.shift()
+ if (this.sendList.length == 0) {
+ this.sending = false
+ this.messageList.push({
+ type:'system',
+ content: '宸插仠姝㈤槦鍒楀彂閫�'
+ },)
+ }
+ } else {
+ this.sending = false
+ this.messageList.push({
+ type:'system',
+ content: '宸插仠姝㈤槦鍒楀彂閫�'
+ },)
+ }
+ }, this.timeOutNum * 1000)
+ },
},
+ destroyed() {
+ this.closeWebSocketConn()
+ }
};
</script>
--
Gitblit v1.8.0