<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>
|
