| | |
|---|
| | | <template>
|
|---|
| | | <div class="app">
|
|---|
| | |
|
|---|
| | |
|
|---|
| | | <el-breadcrumb separator-class="el-icon-arrow-right" class="el-breadcrumb">
|
|---|
| | | <router-link to="/home" tag="el-button" type="text">{{ $t('langHome') }}</router-link>
|
|---|
| | | <el-button type="text">设备管理</el-button>
|
|---|
| | | <router-link to="/device/iostate" tag="el-button" type="text">IO状态</router-link>
|
|---|
| | | <router-link to="/device/alarm" tag="el-button" type="text">报警信息</router-link>
|
|---|
| | | <router-link to="/device/parameter" tag="el-button" type="text">参数下发</router-link>
|
|---|
| | | <router-link to="/device/control" tag="el-button" type="text">开关控制</router-link>
|
|---|
| | | </el-breadcrumb>
|
|---|
| | | <div>报警信息</div>
|
|---|
| | | <div>
|
|---|
| | | <p>{{ receivedMessage }}</p>
|
|---|
| | | <button @click="sendMessage">Send Message</button>
|
|---|
| | | </div>
|
|---|
| | | </template>
|
|---|
| | |
|
|---|
| | | <script>
|
|---|
| | |
|
|---|
| | | |
|---|
| | | export default {
|
|---|
| | | name: "alarm",
|
|---|
| | | name:'alarm',
|
|---|
| | | data() {
|
|---|
| | | return {
|
|---|
| | | websocket: null,
|
|---|
| | | receivedMessage: ''
|
|---|
| | | };
|
|---|
| | | },
|
|---|
| | | mounted() {
|
|---|
| | | this.websocket = new WebSocket('ws://localhost:8080');
|
|---|
| | |
|
|---|
| | | this.websocket.onopen = () => {
|
|---|
| | | console.log('WebSocket connection opened');
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | this.websocket.onmessage = (event) => {
|
|---|
| | | this.receivedMessage = event.data;
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | this.websocket.onclose = () => {
|
|---|
| | | console.log('WebSocket connection closed');
|
|---|
| | | };
|
|---|
| | | },
|
|---|
| | | methods: {
|
|---|
| | | sendMessage() {
|
|---|
| | | if (this.websocket.readyState === WebSocket.OPEN) {
|
|---|
| | | this.websocket.send('Hello WebSocket!');
|
|---|
| | | } else {
|
|---|
| | | console.log('WebSocket connection is not open');
|
|---|
| | | }
|
|---|
| | | |
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | };
|
|---|
| | | </script>
|
|---|
| | | |
|---|
| | | <style lang="less" scoped>
|
|---|
| | | .el-table {
|
|---|
| | | margin-top: 15px;
|
|---|
| | | font-size: 12px;
|
|---|
| | | }
|
|---|
| | | |
|---|
| | | .el-pagination {
|
|---|
| | | margin-top: 15px;
|
|---|
| | | }
|
|---|
| | | |
|---|
| | | .app .el-card {
|
|---|
| | | width: 99%;
|
|---|
| | | }
|
|---|
| | | </style>
|
|---|
| | | |
|---|
