自动化测试模块新增功能：预置指令添加到队列、全部添加到队列、任意状态下调整指令间隔参数、开始和停止发送队列、清空队列、任意状态下删除队列项、自动监听通...

zuojincheng

2024-10-24 c91fc12c8d24830ab083e9fd6ac8e79c2bf24f51

 src/views/autoTest.vue

@@ -34,7 +34,8 @@
            <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="allAddSendList"><i class="iconfont icon-duilie" style="font-size: 12px;"></i>
              全部添加到队列</el-button>
          </div>
        </div>
        <!-- 数据表格区 -->
@@ -54,7 +55,8 @@
              <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>
@@ -112,7 +114,7 @@
          </div>
        </div>
        <!-- 消息列表 -->
        <div class="messages">
        <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>
@@ -125,7 +127,7 @@
          <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>
              style="font-size: 12px;"></i> 清空</button>
        </div>
        <!-- 模块标题及功能按钮 -->
        <div class="title" style="padding-top: 20px;">
@@ -134,9 +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" :disabled="!connStatus"><i class="iconfont icon-kaishi" style="font-size: 12px;"></i>
            <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"><i class="iconfont icon-qingkong" 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"
@@ -144,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>
@@ -281,6 +307,37 @@

      .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 {
@@ -361,20 +418,10 @@
        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'
        },
      ],
      messageList: [],
      sendList: [],
      timer: null,
      sending: false,
    };
  },
  computed: {},
@@ -385,11 +432,24 @@
    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: {
    // 显示产品列表
@@ -630,11 +690,18 @@
            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: '中间件连接异常'
            content: '网串中间件连接异常'
          },)
        }
      } else {
@@ -676,6 +743,54 @@
        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()