| | |
| | | </div> |
| | | </el-row> |
| | | <el-row :span="20"> |
| | | <el-menu :default-active="activePath" class="el-menu-vertical-demo" |
| | | background-color="#222f3e" text-color="#fff" active-text-color="#ffd04b" |
| | | :collapse="isCollapse" :unique-opened="true" |
| | | <el-menu :default-active="activePath" class="el-menu-vertical-demo" background-color="#222f3e" |
| | | text-color="#fff" active-text-color="#ffd04b" :collapse="isCollapse" :unique-opened="true" |
| | | :collapse-transition="false" :router="true"> |
| | | <!-- <el-menu-item index="/" @click="youhua"> |
| | | <template slot="title"> |
| | |
| | | </template> |
| | | <!--二级菜单--> |
| | | |
| | | <el-menu-item :index="'/'+menu.router" |
| | | v-for="menu in item.menuLists" :key="menu.id" |
| | | > |
| | | <el-menu-item :index="'/' + menu.router" v-for="menu in item.menuLists" :key="menu.id"> |
| | | <template slot="title"> |
| | | <!--图标--> |
| | | <i :class="menu.icon"></i> |
| | |
| | | <el-container> |
| | | <el-header class="header-container"> |
| | | |
| | | <el-menu :default-active="activePath1" class="el-menu-demo" mode="horizontal" |
| | | background-color="#576574" text-color="#fff" active-text-color="#ffd04b"> |
| | | <el-menu :default-active="activePath1" class="el-menu-demo" mode="horizontal" background-color="#576574" |
| | | text-color="#fff" active-text-color="#ffd04b"> |
| | | <div class="header-left"> |
| | | <el-button :icon="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'" @click="toggleCollapse" style="height:30px;"></el-button> |
| | | <el-button :icon="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'" @click="toggleCollapse" |
| | | style="height:30px;"></el-button> |
| | | </div> |
| | | <!-- <div class="tagContainer" style="display: flex;"> |
| | | <tag v-for="(tag, index) in tags" :key="index" :tag="tag" @removeTag="removeTag(index)" @switchTag="switchTag(index)"></tag> |
| | |
| | | <template> |
| | | <el-submenu index="1" class="custom-submenu" > |
| | | <template slot="title"> |
| | | <el-avatar src="../assets/emi.png" style="width:20px;height:20px;margin-top:30px;background-color: white;"></el-avatar> |
| | | <el-avatar src="../assets/emi.png" |
| | | style="width:20px;height:20px;margin-top:30px;background-color: white;"></el-avatar> |
| | | </template> |
| | | <el-menu-item index="1-1" @click="logout">{{ $t('exit') }}</el-menu-item> |
| | | <el-menu-item index="1-2" @click="showChangePasswordDialog">{{ $t('changePassword') }}</el-menu-item> |
| | |
| | | </keep-alive> |
| | | </el-main> |
| | | </el-container> |
| | | <el-dialog :visible.sync="dialogFormVisible2" :title="$t('Alarm Information')"> |
| | | <el-table :data="this.alarm" border style="width: 100%;font-size: 25px;"> |
| | | <el-table-column prop="id" :label="$t('id')"></el-table-column> |
| | | <el-table-column prop="content" :label="$t('content')"></el-table-column> |
| | | <el-table-column prop="timeons" :label="$t('timeon')"></el-table-column> |
| | | </el-table> |
| | | </el-dialog> |
| | | <el-dialog :visible.sync="dialogFormVisible3" > |
| | | |
| | | <el-button :class="{ 'blue-button': receivedData === 1 }" @click="toggleButtonValue(1)">{{ $t('A01Abort/ResumeTasks') }}</el-button> |
| | | <el-button :class="{ 'blue-button': receivedData2 === 1 }" @click="toggleButtonValue(2)">{{ $t('A02Abort/ResumeTasks') }}</el-button> |
| | | |
| | | </el-dialog> |
| | | |
| | | </el-container> |
| | | </template> |
| | | |
| | |
| | | // import { mapState, mapMutations } from 'vuex'; |
| | | // import Tag from '../layout/tag.vue'; |
| | | // import store from '../store'; |
| | | let socket; |
| | | |
| | | export default { |
| | | name: "Layout", |
| | |
| | | return { |
| | | activeTag: '', // 当前激活的标签 |
| | | dialogVisible: false, |
| | | receivedData:0, |
| | | receivedData2:0, |
| | | formData: { |
| | | oldPassword: '', |
| | | newPassword: '', |
| | |
| | | menuListForm: { |
| | | pageSize: 1, |
| | | pageNum: -1 |
| | | } |
| | | }, |
| | | dialogFormVisible2: false, |
| | | dialogFormVisible3: true, |
| | | alarm: [], |
| | | alarm2: [] |
| | | } |
| | | }, |
| | | // components: { |
| | |
| | | // 记录上一次激活的菜单 |
| | | // this.activePath = window.sessionStorage.getItem('activePath') |
| | | }); |
| | | this.init(); |
| | | }, |
| | | computed: { |
| | | // ...mapState('tags', ['tags']) |
| | | }, |
| | | methods: { |
| | | toggleButtonValue(buttonNumber) { |
| | | if (buttonNumber === 1) { |
| | | this.receivedData = this.receivedData === 0 ? 1 : 0; |
| | | } else if (buttonNumber === 2) { |
| | | this.receivedData2 = this.receivedData2 === 0 ? 1 : 0; |
| | | } |
| | | console.log(this.receivedData,this.receivedData2) |
| | | |
| | | |
| | | const data3 = []; |
| | | const resetButtonValues3 = [this.receivedData,this.receivedData2]; |
| | | |
| | | // 将得到的值添加到 data 数组中 |
| | | data3.push(resetButtonValues3.flat()); |
| | | |
| | | // 在 data3 数组前面添加两个空数组 |
| | | |
| | | // 创建 jsonObject3 对象,并添加 data3 属性 |
| | | const jsonObject3 = { data: data3 }; |
| | | |
| | | // 提交数据到后端 |
| | | const jsonString3 = JSON.stringify(jsonObject3); |
| | | console.log("急停后中止/继续选择:", jsonString3); |
| | | socket?.send(jsonString3); |
| | | // setTimeout(()=> |
| | | // window.location.reload(),2000 |
| | | // ) |
| | | |
| | | |
| | | |
| | | }, |
| | | init() { |
| | | let viewname = "Home"; |
| | | if (typeof (WebSocket) == "undefined") { |
| | | console.log("您的浏览器不支持WebSocket"); |
| | | } else { |
| | | //console.log("您的浏览器支持WebSocket"); |
| | | let socketUrl = "ws://" + this.$t('ip') + ":8888" + "/springboot-vue3/api/talk/" + viewname; |
| | | if (socket != null) { |
| | | socket.close(); |
| | | socket = null; |
| | | } |
| | | // 开启一个websocket服务 |
| | | socket = new WebSocket(socketUrl); |
| | | //打开事件 |
| | | socket.onopen = function () { |
| | | console.log("websocket已打开"); |
| | | }; |
| | | // 浏览器端收消息,获得从服务端发送过来的文本消息 |
| | | socket.onmessage = function (msg) { |
| | | //console.log("收到数据====" + msg.data); |
| | | let obj = JSON.parse(msg.data); |
| | | |
| | | if (obj.alarmmg[0].length > 0) { |
| | | if (this.alarm.length > 0) { |
| | | if (this.alarm[this.alarm.length - 1].id != obj.alarmmg[0][obj.alarmmg[0].length-1].id) { |
| | | this.alarm = obj.alarmmg[0]; |
| | | this.dialogFormVisible2 = true; |
| | | } |
| | | } else { |
| | | this.alarm = obj.alarmmg[0]; |
| | | this.dialogFormVisible2 = true; |
| | | } |
| | | } |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | this.$forceUpdate(); |
| | | |
| | | |
| | | |
| | | if (obj.Abort[0].length > 0) { |
| | | this.receivedData=obj.Abort[0][0]; |
| | | this.receivedData2=obj.Abort[0][1]; |
| | | this.dialogFormVisible3 = true; |
| | | } |
| | | |
| | | |
| | | }.bind(this); |
| | | //关闭事件 |
| | | socket.onclose = function () { |
| | | console.log("websocket已关闭"); |
| | | }; |
| | | //发生了错误事件 |
| | | socket.onerror = function () { |
| | | console.log("websocket发生了错误"); |
| | | } |
| | | } |
| | | }, |
| | | logout: function () { |
| | | removeToken() |
| | | this.$router.push('/login') |
| | |
| | | </script> |
| | | |
| | | <style scoped lang="less"> |
| | | |
| | | .el-menu--horizontal > .el-submenu .el-submenu__title { |
| | | height: 45px !important; |
| | | } |
| | | |
| | | .custom-submenu { |
| | | |
| | | |
| | |
| | | |
| | | .header-container { |
| | | |
| | | height: 30px !important; /* 设置较小的高度 */ |
| | | height: 30px !important; |
| | | /* 设置较小的高度 */ |
| | | } |
| | | |
| | | |
| | |
| | | width:30px; |
| | | |
| | | } |
| | | |
| | | .el-aside { |
| | | height: 100vh; |
| | | background-color: #222f3e; |
| | |
| | | margin-left: 10px; |
| | | } |
| | | } |
| | | |
| | | .blue-button { |
| | | background-color: green; |
| | | color: white; |
| | | } |
| | | .el-header { |
| | | |
| | | background-color: #576574; |