<template>
|
<el-container style="flex: 1;height:100%;">
|
<div style="width: 200px;background-color: #222f3e" :style="{ width: isCollapse ? '70px' : '250px' }">
|
<el-aside :width="isCollapse ? '70px' : '250px'">
|
<el-col :gutter="20">
|
<el-row :span="4">
|
<div class="logo" @click="goToHome">
|
<div class="sys-name" v-show="!isCollapse">{{ $t('northglassMESsystem') }}</div>
|
</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"
|
:collapse-transition="false" :router="true">
|
<!-- <el-menu-item index="/" @click="youhua">
|
<template slot="title">
|
|
<i class="el-icon-menu"></i>
|
|
<span>优化</span>
|
</template>
|
</el-menu-item> -->
|
<!--一级菜单-->
|
<el-submenu :index="item.id.toString()" v-for="item in menuList" :key="item.id">
|
<!--一级菜单模板区域-->
|
<template slot="title">
|
<!--图标-->
|
<i :class="item.icon"></i>
|
<!--文本-->
|
<span>{{ item.name }}</span>
|
</template>
|
<!--二级菜单-->
|
|
<el-menu-item :index="'/' + menu.router" v-for="menu in item.menuLists" :key="menu.id">
|
<template slot="title">
|
<!--图标-->
|
<i :class="menu.icon"></i>
|
<!--文本-->
|
<span>{{ menu.name }}</span>
|
</template>
|
</el-menu-item>
|
</el-submenu>
|
</el-menu>
|
</el-row>
|
</el-col>
|
</el-aside>
|
</div>
|
<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">
|
<div class="header-left">
|
<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>
|
</div> -->
|
<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>
|
</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>
|
</el-submenu>
|
|
</template>
|
<template>
|
<el-dialog :title="$t('changePassword')" :visible.sync="dialogVisible" width="30%">
|
<el-form ref="form" :model="formData" label-width="200px">
|
<el-form-item :label="$t('Old password')">
|
<el-input v-model="formData.oldPassword" type="password" show-password></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('New password')">
|
<el-input v-model="formData.newPassword" type="password" show-password></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('Confirm password')">
|
<el-input v-model="formData.confirmPassword" type="password" show-password></el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible = false">{{ $t('cancel') }}</el-button>
|
<el-button type="primary" @click="savePassword">{{ $t('confirm') }}</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
</el-menu>
|
</el-header>
|
<el-main>
|
<keep-alive>
|
<router-view />
|
</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>
|
|
<script>
|
import { selectList } from '../api/menuList'
|
import { changePassword } from '../api/user'
|
import { removeToken } from "../utils/auth";
|
import LanguageMixin from '../lang/LanguageMixin'
|
import { MessageBox } from 'element-ui';
|
// import { mapState, mapMutations } from 'vuex';
|
// import Tag from '../layout/tag.vue';
|
// import store from '../store';
|
let socket;
|
|
export default {
|
name: "Layout",
|
// store,
|
mixins: [LanguageMixin],
|
data() {
|
return {
|
activeTag: '', // 当前激活的标签
|
dialogVisible: false,
|
receivedData:0,
|
receivedData2:0,
|
formData: {
|
oldPassword: '',
|
newPassword: '',
|
confirmPassword: ''
|
},
|
menuList: [],
|
isCollapse: false,
|
activePath: '',
|
activePath1: '',
|
menuListForm: {
|
pageSize: 1,
|
pageNum: -1
|
},
|
dialogFormVisible2: false,
|
dialogFormVisible3: false,
|
alarm: [],
|
alarm2: []
|
}
|
},
|
// components: {
|
// Tag
|
// },
|
created() {
|
|
|
|
selectList(this.menuListForm).then(res => {
|
this.menuList = res.data
|
|
const language = this.$i18n.locale;
|
if (language === 'en-US') {
|
this.replaceChineseWithEnglish(this.menuList);
|
}
|
// 记录上一次激活的菜单
|
// this.activePath = window.sessionStorage.getItem('activePath')
|
});
|
this.init();
|
},
|
computed: {
|
// ...mapState('tags', ['tags'])
|
},
|
methods: {
|
toggleButtonValue(buttonNumber) {
|
|
MessageBox.confirm(this.$t('Are you sure to perform this operation?'), this.$t('prompt'), {
|
confirmButtonText: this.$t('confirm'),
|
cancelButtonText: this.$t('cancel'),
|
type: 'warning'
|
}).then(() => {
|
// 点击确认按钮后执行的操作
|
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(() => {
|
this.dialogFormVisible3 = false;
|
}, 1000); // 延迟时间为1秒（1000毫秒）
|
}).catch(() => {
|
// 点击取消按钮后执行的操作
|
});
|
|
|
|
|
},
|
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){
|
|
|
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){
|
|
|
|
|
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')
|
},
|
goToHome() {
|
this.$router.push('/home');
|
},
|
|
// ...mapMutations('tags', ['addTag', 'removeTag', 'switchTag']),
|
addTag() {
|
// let submenuItem;
|
// const menuItem = this.menuList.find(item => item.menuLists.some(menu => menu.router === router));
|
// if (menuItem) {
|
// submenuItem = menuItem.menuLists.find(menu => menu.router === router);
|
// }
|
// if (submenuItem) {
|
// const tag = submenuItem.router;
|
// this.$store.commit('tags/addTag', tag);
|
// }
|
},
|
|
removeTag() {
|
// this.$store.commit('tags/removeTag', index); // 从 Vuex Store 中移除标签
|
},
|
showChangePasswordDialog() {
|
this.dialogVisible = true;
|
},
|
savePassword() {
|
const { oldPassword, newPassword, confirmPassword } = this.formData;
|
|
if (newPassword !== confirmPassword) {
|
this.$message.error('新密码与确认密码不一致');
|
return;
|
}
|
changePassword({ oldPassword, newPassword }).then(res => {
|
console.log(res.data);
|
this.$message.success('密码修改成功');
|
removeToken()
|
this.$router.push('/login')
|
}).catch(() => {
|
|
});
|
|
this.dialogVisible = false;
|
},
|
toggleCollapse: function () {
|
this.isCollapse = !this.isCollapse;
|
},
|
replaceChineseWithEnglish(menuData) {
|
// 定义中英文对照关系对象
|
const translation = {
|
'用户管理': 'UserManagement',
|
'用户列表': 'UserList',
|
'设备管理': 'DeviceManagement',
|
'报警信息': 'Alarm',
|
'参数下发': 'Parameter',
|
'开关控制': 'Action',
|
'IO状态': 'Sign',
|
'权限管理': 'PermissionManagement',
|
'权限列表': 'PermissionList',
|
'角色管理': 'RoleManagement',
|
'角色列表': 'RoleList',
|
'电气管理': 'Electrical management',
|
'设备状态': 'State',
|
|
'主页': 'Home'
|
// 根据实际需求继续添加对照关系
|
};
|
|
menuData.forEach(menu => {
|
menu.name = translation[menu.name] || menu.name;
|
menu.menuLists && menu.menuLists.forEach(subMenu => {
|
subMenu.name = translation[subMenu.name] || subMenu.name;
|
});
|
});
|
}
|
},
|
// watch: {
|
// '$route'(to) {
|
// // 切换路由时更新激活的标签
|
// const tag = this.menuList.some(item => item.menuLists.some(menu => '/' + menu.router === to.path));
|
// if (tag) {
|
// this.activeTag = tag;
|
// }
|
// }
|
// }
|
}
|
</script>
|
|
<style scoped lang="less">
|
.el-menu--horizontal>.el-submenu .el-submenu__title {
|
height: 45px !important;
|
}
|
|
.custom-submenu {
|
|
|
height: 90px !important;
|
}
|
|
|
.header-container {
|
|
height: 30px !important;
|
/* 设置较小的高度 */
|
}
|
|
|
|
.header-left {
|
margin-right: auto;
|
width: 30px;
|
|
}
|
|
.el-aside {
|
height: 100vh;
|
background-color: #222f3e;
|
line-height: 200px;
|
}
|
|
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
width: 200px;
|
min-height: 400px;
|
}
|
|
.el-menu-demo {
|
display: flex;
|
width: 100%;
|
height: 100%;
|
justify-content: flex-end;
|
align-items: center;
|
|
}
|
|
.el-menu-vertical-demo {
|
border: 0;
|
}
|
|
.logo {
|
background-color: #222f3e;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: 60px;
|
|
.sys-name {
|
font-size: 20px;
|
color: #ffffff;
|
margin-left: 10px;
|
}
|
}
|
.blue-button {
|
background-color: green;
|
color: white;
|
}
|
.el-header {
|
|
background-color: #576574;
|
}
|
</style>
|
