CanadaMes.git - Gitblit

New file
			@@ -0,0 +1,509 @@
			<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="dialogFormCountDown" :title="$t('Approximately resettable time')" top="5vh">
			<div :style="'font-size: ' + PromptSize + 'px;text-align: center;'">
			<!-- {{ this.CountDowns }} -->
			{{ this.CountDowns }}
			</div>
			</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: [],
			CountDowns: "0",
			EmergencyStop: false,
			PromptSize: 250,
			dialogFormCountDown: false

			}
			},
			// 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;
			}
			} else {
			this.alarm = obj.alarmmg[0];
			this.dialogFormVisible2 = false;
			}
			//是否急停
			if (obj.emergencystop != null) {
			this.EmergencyStop = obj.emergencystop[0];
			}

			//复位倒计时
			if (obj.countdown != null) {
			if ((obj.countdown[0] == true && this.CountDowns == 0) \|\| this.EmergencyStop == true) {
			this.CountDown();
			}
			}

			//复位完成信号
			if (obj.reset != null) {
			this.reset = obj.reset[0];
			}
			}






			if (obj.Abort) {

			if (obj.Abort[0].length > 0) {
			this.receivedData = obj.Abort[0][0];
			this.receivedData2 = obj.Abort[0][1];
			// this.dialogFormVisible3 = true;
			}
			}
			this.$forceUpdate();

			}.bind(this);
			//关闭事件
			socket.onclose = function () {
			console.log("websocket已关闭");
			};
			//发生了错误事件
			socket.onerror = function () {
			console.log("websocket发生了错误");
			}
			}
			},
			//45秒复位倒数计时
			CountDown() {
			let count = 45;
			let timer = setInterval(
			() => {
			if (this.EmergencyStop == true) {
			this.dialogFormCountDown = false;
			clearInterval(timer);
			this.CountDowns = "0";
			} else {
			if (count > 0) {
			this.PromptSize = 500;
			this.CountDowns = count;
			count--;
			}
			else {
			this.PromptSize = 200;
			this.CountDowns = "Waiting for reset";
			if (this.reset == true) {
			clearInterval(timer);
			this.dialogFormCountDown = false;
			}
			}
			}

			},
			1000
			);
			if (this.reset == false&&this.EmergencyStop != true) {
			this.dialogFormCountDown = true;
			}
			},
			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>