From 17b583422095aff6bb91bd8ddff5faeb41c8edb2 Mon Sep 17 00:00:00 2001
From: wuyouming666 <2265557248@qq.com>
Date: 星期六, 02 十二月 2023 09:06:24 +0800
Subject: [PATCH] 更新电气管理通讯逻辑
---
CanadaMes-ui/src/views/device/alarm.vue | 296 +++++-----------------------------------------------------
1 files changed, 29 insertions(+), 267 deletions(-)
diff --git a/CanadaMes-ui/src/views/device/alarm.vue b/CanadaMes-ui/src/views/device/alarm.vue
index 13cde4c..b9aa73a 100644
--- a/CanadaMes-ui/src/views/device/alarm.vue
+++ b/CanadaMes-ui/src/views/device/alarm.vue
@@ -1,280 +1,42 @@
<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>
-
-
-
- <!--鍗＄墖瑙嗗浘鍖哄煙-->
- <el-card class="el-card">
- <el-row :gutter="20">
- <!--鎼滅储涓庢坊鍔犲尯鍩�-->
- <el-col :span="6">
- <el-input v-model="queryInfo.username" clearable @clear="getUserList">
- </el-input>
- </el-col>
- <el-col :span="6">
- <el-input v-model="queryInfo.email" clearable @clear="getUserList">
- </el-input>
- </el-col>
- <!--鎼滅储鎸夐挳-->
- <el-col :span="4">
- <el-button type="primary" @click="getUserList">{{ $t('langSearch') }}</el-button>
- </el-col>
-
- <!--娣诲姞鍖哄煙-->
- <el-col :span="4">
- <el-button type="primary" @click="showAddDialog">{{ $t('langAddUser') }}</el-button>
- </el-col>
- </el-row>
- <!--鐢ㄦ埛鍒楄〃鍖哄煙-->
- <el-table :data="userList.records" border stripe>
- <el-table-column label="#" type="index"></el-table-column>
- <el-table-column :label="$t('langUsername')" prop="username"></el-table-column>
- <el-table-column :label="$t('langEmail')" prop="email"></el-table-column>
- <el-table-column :label="$t('langCreateTime')" prop="createTime"></el-table-column>
- <el-table-column :label="$t('langDisabled')">
- <template slot-scope="scope">
- <el-switch :active-value="0" :inactive-value="1" v-model="scope.row.state" @change="stateChange(scope.row)">
- </el-switch>
- </template>
- </el-table-column>
- <el-table-column :label="$t('langAction')">
- <template slot-scope="scope">
- <!--淇敼-->
- <el-tooltip effect="dark" :content="$t('langEdit')" placement="top" :enterable="false">
- <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
- </el-tooltip>
- <!--鍒犻櫎-->
- <el-tooltip effect="dark" :content="$t('langDelete')" placement="top" :enterable="false">
- <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row)"></el-button>
- </el-tooltip>
- </template>
- </el-table-column>
- </el-table>
- <!--鍒嗛〉鍖哄煙-->
- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
- :current-page="queryInfo.pageNum" :page-sizes="[10, 20, 30, 40]" :page-size="queryInfo.pageSize"
- layout="total, sizes, prev, pager, next, jumper" :total="userList.total">
- </el-pagination>
- </el-card>
- <!--娣诲姞鐢ㄦ埛鐨勫璇濇-->
- <el-dialog :title="$t('langAddUserTitle')" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
- <!--鍐呭涓讳綋鍖哄煙-->
- <el-form :model="addUserForm" :rules="addUserRules" ref="addUserRef" label-width="70px">
- <el-form-item :label="$t('langUsername')" prop="username">
- <el-input v-model="addUserForm.username"></el-input>
- </el-form-item>
- <el-form-item :label="$t('langPassword')" prop="password">
- <el-input v-model="addUserForm.password" type="password"></el-input>
- </el-form-item>
- <el-form-item :label="$t('langEmail')" prop="email">
- <el-input v-model="addUserForm.email"></el-input>
- </el-form-item>
- <el-form-item :label="$t('langState')" prop="state">
- <el-select v-model="addUserForm.state">
- <el-option v-for="(item, index) in options" :key="index" :value="item.value" :label="item.label">
- </el-option>
- </el-select>
- </el-form-item>
- </el-form>
- <span slot="footer" class="dialog-footer">
- <el-button @click="addDialogVisible = false">{{ $t('langCancel') }}</el-button>
- <el-button type="primary" @click="addUser">{{ $t('langConfirm') }}</el-button>
- </span>
- </el-dialog>
- <!--淇敼鐢ㄦ埛鐨勫璇濇-->
- <el-dialog :title="$t('langEditUserTitle')" :visible.sync="editDialogVisible" width="50%">
- <!--鍐呭涓讳綋鍖哄煙-->
- <el-form :model="editUserForm" :rules="addUserRules" ref="addCategoryRef" label-width="70px">
- <el-form-item :label="$t('langUsername')" prop="username">
- <el-input v-model="editUserForm.username" disabled></el-input>
- </el-form-item>
- <el-form-item label="瑙掕壊" prop="roleId">
- <el-select filterable v-model="editUserForm.roleId" placeholder="璇烽�夋嫨">
- <el-option v-for="item in roleList" :key="item.id" :value="item.id" :label="item.name">
- </el-option>
- </el-select>
- </el-form-item>
- <el-form-item :label="$t('langEmail')" prop="email">
- <el-input v-model="editUserForm.email"></el-input>
- </el-form-item>
- <el-form-item :label="$t('langDisabled')" prop="state">
- <el-select v-model="editUserForm.state">
- <el-option v-for="(item, index) in options" :key="index" :value="item.value" :label="item.label">
- </el-option>
- </el-select>
- </el-form-item>
- </el-form>
- <span slot="footer" class="dialog-footer">
- <el-button @click="editDialogVisible = false">{{ $t('langCancel') }}</el-button>
- <el-button type="primary" @click="editUserInfo">{{ $t('langConfirm') }}</el-button>
- </span>
- </el-dialog>
+ <div>
+ <p>{{ receivedMessage }}</p>
+ <button @click="sendMessage">Send Message</button>
</div>
</template>
-
<script>
-import { getById, removeById, saveOrUpdate, selectPage } from "../../api/user";
-import { select } from "../../api/role";
-
-import LanguageMixin from '../../lang/LanguageMixin'
export default {
- name: "alarm",
- mixins: [LanguageMixin],
- data () {
+ name:'alarm',
+ data() {
return {
- activeData: null,
- queryInfo: {
- pageNum: 1,
- pageSize: 10
- },
- userList: {
- records: [],
- total: 0,
- },
- // 娣诲姞鐨勭敤鎴峰璞�
- addUserForm: {
- state: 1
- },
- // 淇敼鐨勭敤鎴峰璞�
- editUserForm: {
-
- roleId: null,
- name: null,
- roleid: null,
- },
- // 娣诲姞鍒嗙被鐨勯獙璇佽鍒�
- addUserRules: {
- roleId: null,
- username: [
- { required: true, message: '璇疯緭鍏ョ敤鎴峰悕', trigger: 'blur' },
- { min: 5, max: 15, message: '闀垮害鍦� 5 鍒� 15 涓瓧绗�', trigger: 'blur' }
- ],
- password: [
- { required: true, message: '璇疯緭鍏ュ瘑鐮�', trigger: 'blur' },
- { min: 5, max: 15, message: '闀垮害鍦� 5 鍒� 15 涓瓧绗�', trigger: 'blur' }
- ],
- email: [
- { required: true, message: '璇疯緭鍏ラ偖绠�', trigger: 'blur' },
- { type: 'email', message: '璇疯緭鍏ユ纭牸寮忕殑閭鍦板潃', trigger: 'blur' }
- ]
- },
- // 鎺у埗娣诲姞鐢ㄦ埛寮规鐨勬樉绀哄拰闅愯棌
- addDialogVisible: false,
- // 鎺у埗淇敼鐢ㄦ埛寮规鐨勬樉绀哄拰闅愯棌
- editDialogVisible: false,
- options: [
- { label: '姝ｅ父', value: 1 },
- { label: '绂佺敤', value: 0 }
- ],
- roleList: [],
- }
+ websocket: null,
+ receivedMessage: ''
+ };
},
- created () {
- this.getUserList();
+ 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: {
- getUserList () {
- selectPage(this.queryInfo).then(res => {
- this.userList.records = res.data.records;
- this.userList.total = res.data.total
- });
- },
-
- showAddDialog () {
- this.addDialogVisible = true;
- },
- stateChange (info) {
- saveOrUpdate(info).then(() => {
- this.$message.success("鏇存柊鐘舵�佹垚鍔�")
- });
- },
- showEditDialog (id) {
- getById({ id: id }).then(res => {
- this.editUserForm = res.data;
- this.editDialogVisible = true;
- });
- select().then(res => {
- this.roleList = res.data;
- });
- },
- removeUserById (user) {
- // 寮规璇㈤棶鐢ㄦ埛鏄惁鍒犻櫎鍒嗙被
- this.$confirm('姝ゆ搷浣滃皢姘镐箙鍒犻櫎璇ュ垎绫�, 鏄惁缁х画?', '鎻愮ず', {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning'
- }).then(() => {
- removeById({ id: user.id }).then(() => {
- // 閲嶆柊鑾峰彇鍒嗙被鍒楄〃
- this.getUserList();
- this.$message.success("鍒犻櫎鐢ㄦ埛鎴愬姛");
- });
- }).catch(() => {
- this.$message.info('宸插彇娑堝垹闄�');
- });
- },
- handleSizeChange (newSize) {
- this.queryInfo.pageSize = newSize;
- this.getUserList()
- },
- handleCurrentChange (newPage) {
- this.queryInfo.pageNum = newPage;
- this.getUserList()
- },
- addDialogClosed () {
- this.$refs['addUserRef'].resetFields();
- },
- addUser () {
- this.$refs.addUserRef.validate(async valid => {
- if (!valid) return;
- saveOrUpdate(this.addUserForm).then(() => {
- this.$message.success("娣诲姞鐢ㄦ埛鎴愬姛");
- // 闅愯棌娣诲姞鍒嗙被瀵硅瘽妗�
- this.addDialogVisible = false;
- // 閲嶆柊鑾峰彇鍒嗙被鍒楄〃
- this.getUserList();
- });
- })
- },
- editUserInfo () {
- this.$refs.addCategoryRef.validate(async valid => {
- if (!valid) return;
-
- saveOrUpdate(this.editUserForm).then(() => {
- this.$message.success("淇敼鐢ㄦ埛鎴愬姛");
- // 闅愯棌娣诲姞鍒嗙被瀵硅瘽妗�
- this.editDialogVisible = false;
- // 閲嶆柊鑾峰彇鍒嗙被鍒楄〃
- this.getUserList();
- });
- })
+ 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>
--
Gitblit v1.8.0