添加debuggtool

zhangzengfei

2023-10-08 f36337a2fb5442241cca477f6b994948dd4d123f

添加debuggtool

 src/pages/debuggTool/index/App.vue

New file
@@ -0,0 +1,190 @@
<template>
  <div class="container">
    <div class="device-form">
      <el-form :inline="true" :model="deviceForm" class="demo-form-inline">
        <el-form-item label="PLC品牌">
          <el-select v-model="deviceForm.brand" placeholder="品牌厂商" size="mini">
            <el-option label="全部" value="all"></el-option>
            <el-option label="三菱" value="mitsubishi"></el-option>
            <el-option label="西门子" value="siemens"></el-option>
            <el-option label="欧姆龙" value="omron"></el-option>
            <el-option label="汇川" value="inovance"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="接口类型">
          <el-select v-model="deviceForm.type" placeholder="接口类型" size="mini">
            <el-option label="modbus" value="modbusTCP"></el-option>
            <el-option label="串口" value="serial"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="通讯地址">
          <el-input v-model="deviceForm.ipaddr" placeholder="设备ip地址" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="端口">
          <el-input v-model="deviceForm.port" placeholder="modbus端口" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="数据地址">
          <el-input v-model.number="deviceForm.startAddr" placeholder="起始地址" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="-">
          <el-input v-model.number="deviceForm.endAddr" placeholder="目标地址" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-checkbox v-model="enableLoop">启用定时读取</el-checkbox>
        </el-form-item>
        <el-form-item label="">
          <el-input
            v-model.number="deviceForm.interval"
            placeholder="目标地址"
            size="mini"
            style="width:50px"
          ></el-input>
          <span style="margin-left:5px">秒/次</span>
        </el-form-item>
      </el-form>

      <el-button type="primary" size="mini" @click="connectPlc">连接</el-button>
      <el-button type="danger" size="mini" @click="disconnectPlc">断开</el-button>
      <el-button type="success" size="mini" @click="readData">开始读取</el-button>
      <el-button type="warning" size="mini" @click="disconnectPlc">结束读取</el-button>
      <el-button type="info" size="mini" @click="disconnectPlc">清空数据</el-button>
    </div>

    <div class="data-filter"></div>
    <div class="data-list"></div>
  </div>
</template>

<script>
import Event from "./event"
export default {
  name: "plcDebuggTool",
  computed: {},
  data() {
    return {
      //wsServer: `ws://${location.host}/ws/connect`,
      wsServer: `ws://${location.host}/ws/connect`,
      // wsServer: `/ws/connect`,
      wsClient: null,
      wsConnected: false,
      loading: false, // 加载
      deviceForm: {
        brand: "all",
        type: "modbusTCP",
        ipaddr: "",
        port: "502",
        dataType: "int",
        startAddr: "",
        endAddr: "",
        interval: 0
      },
      enableLoop: false
    }
  },
  created() {},
  mounted() {
    this.connectWs()
    console.log("websocketCheckConn")
    this.websocketCheckConn()
  },
  beforeDestroy() {
    if (this.wsClient) {
      this.wsClient.close()
    }
  },
  methods: {
    connectPlc() {
      if (this.deviceForm.type == "modbusTCP" && this.deviceForm.ipaddr == "") {
        this.$message.warning("请输入设备ip地址")
        return
      }
      let msg = {
        msgType: Event.CONNECT_DEVICE,
        data: this.deviceForm
      }

      this.websocketSendMsg(msg)
    },
    disconnectPlc() {
      let msg = {
        msgType: Event.DISCONNECT_DEVICE,
        data: ""
      }
      this.websocketSendMsg(msg)
    },
    readData() {
      let msg = {
        msgType: Event.START_READ,
        data: {
          startAddr: this.deviceForm.startAddr,
          endAddr: this.deviceForm.endAddr,
          interval: 0
        }
      }

      this.websocketSendMsg(msg)
    },
    connectWs() {
      this.wsClient == null
      this.initWebsocket()
    },
    initWebsocket() {
      if (typeof WebSocket === "undefined") {
        alert("您的浏览器不支持socket")
      } else {
        // 实例化socket
        this.wsClient = new WebSocket(this.wsServer)

        // 监听socket消息
        this.wsClient.onerror = this.websocketOnError
        this.wsClient.onopen = this.websocketOnOpen
        this.wsClient.onmessage = this.websocketOnMessage
        this.wsClient.onclose = this.websocketOnClose
      }
    },
    websocketOnClose() {
      this.wsConnected = false
      this.initWebsocket()
    },
    websocketOnError(e) {
      this.$message.warning("服务端连接失败")

      this.wsConnected = false
    },
    websocketOnOpen() {
      this.wsConnected = true
      console.log("ws open")
    },
    websocketOnMessage(e) {
      console.log(e)
      // let data = JSON.parse(e.data)
    },
    websocketSendMsg(msg) {
      if (this.wsClient && this.wsClient.readyState == 1) {
        this.wsClient.send(JSON.stringify(msg))
      } else {
        this.$message("请求数据失败, 服务端未连接")
      }
    },
    websocketCheckConn() {
      setInterval(() => {
        if (this.wsClient == null || this.wsClient.readyState != 1) {
          this.initWebsocket()
        }
      }, 5000)
    }
  }
}
</script>

<style lang="scss">
.container {
  height: 100%;
  display: flex;
  flex-direction: row;
  flex: 1;
  flex-basis: auto;
  box-sizing: border-box;
  background-color: #fff;
}
</style>

 src/pages/debuggTool/index/event.ts

New file
@@ -0,0 +1,12 @@
/* eslint-disable */

module.exports = {
  CONNECT_DEVICE: "connect_plc_device", // 连接设备
  DISCONNECT_DEVICE: "disconnect_plc_device", // 断开连接
  CONNECTION_STAT_DEVICE: "connection_stat_device", // 设备连接状态
  START_READ: "start_read", // 开启定时读取
  STOP_READ: "stop_read", // 开启定时读取
  ENABLE_LOOP_READ: "enable_loop_read", // 开启定时读取
  STOP_LOOP_READ: "stop_loop_read", // 开启定时读取
  SET_INTERVAL: "set_interval"
}

 src/pages/debuggTool/index/main.ts

New file
@@ -0,0 +1,13 @@
import Vue from 'vue';
import App from './App.vue';

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// import "@/assets/css/element-variables.scss";

Vue.use(ElementUI)

new Vue({
  el: '#app',
  render: h => h(App)
})

 src/pages/desktop/index/components/ToolsEntry.vue

@@ -185,7 +185,7 @@
      if (dock.type === "1") {

        window.open(dock.url)

      } else if (dock.type === "2" && !dock.isOpen) {

        if ((dock.url).indexOf('/view/debuggTool')>=0||(dock.url).indexOf('/view/knowledge')>=0) {

        if (dock.url.indexOf("/view/knowledge") >= 0) {

          return true

        }

        this.$store.dispatch("desktop/addFrame", {


 src/pages/index/App.vue

@@ -43,7 +43,7 @@
import { getMenuListData } from "@/api/utils"



export default {

  name: "smartai init",

  name: "smartaiInit",

  components: {

    formAccount,

    formNet,