From 92dab966727b26c69a8a1d5839b064f7942895e8 Mon Sep 17 00:00:00 2001
From: wuyouming666 <2265557248@qq.com>
Date: 星期四, 09 五月 2024 09:20:33 +0800
Subject: [PATCH] Merge branch 'master' of http://10.153.19.25:10101/r/CanadaMes
---
CanadaMes-ui/src/layout/index.vue | 475 ++++++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 339 insertions(+), 136 deletions(-)
diff --git a/CanadaMes-ui/src/layout/index.vue b/CanadaMes-ui/src/layout/index.vue
index f18018f..c16840b 100644
--- a/CanadaMes-ui/src/layout/index.vue
+++ b/CanadaMes-ui/src/layout/index.vue
@@ -1,29 +1,26 @@
<template>
- <el-container style="flex: 1;">
-
- <div style="width: 200px;background-color: #222f3e" :style="{width: isCollapse?'70px':'250px'}">
- <el-aside :width="isCollapse?'70px':'250px'">
+ <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>
+ <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="goToHome">
- <template slot="title">
- <!--鍥炬爣-->
- <i class="el-icon-menu"></i>
- <!--鏂囨湰-->
- <span>{{ $t('home') }}</span>
- </template>
-</el-menu-item>
-
- <!--涓�绾ц彍鍗�-->
+ <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">
@@ -33,9 +30,8 @@
<span>{{ item.name }}</span>
</template>
<!--浜岀骇鑿滃崟-->
- <el-menu-item :index="'/'+menu.router"
- v-for="menu in item.menuLists" :key="menu.id"
- @click="saveNavState('/'+menu.router)" @select="saveNavState" :default-active="$route.path">
+
+ <el-menu-item :index="'/' + menu.router" v-for="menu in item.menuLists" :key="menu.id">
<template slot="title">
<!--鍥炬爣-->
<i :class="menu.icon"></i>
@@ -43,95 +39,113 @@
<span>{{ menu.name }}</span>
</template>
</el-menu-item>
-
</el-submenu>
-
</el-menu>
</el-row>
</el-col>
</el-aside>
</div>
<el-container>
- <div>
-
- </div>
<el-header class="header-container">
- <!-- <div class="tagContainer">
- <tag></tag>
- </div> -->
-
- <div class="tagContainer">
- <tag v-for="(tag, index) in tags" :key="index" :tag="tag" @removeTag="removeTag"></tag>
- </div>
- <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"></el-button>
- </div>
- <el-submenu index="1" class="user-icon">
-
- <template slot="title">
- <el-avatar src="../assets/emi.png">
- </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>
+ <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-dialog title="淇敼瀵嗙爜" :visible.sync="dialogVisible" width="30%">
- <el-form ref="form" :model="formData" label-width="100px">
- <el-form-item label="鏃у瘑鐮�">
- <el-input v-model="formData.oldPassword" type="password" show-password></el-input>
- </el-form-item>
- <el-form-item label="鏂板瘑鐮�">
- <el-input v-model="formData.newPassword" type="password" show-password></el-input>
- </el-form-item>
- <el-form-item label="纭鏂板瘑鐮�">
- <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">鍙栨秷</el-button>
- <el-button type="primary" @click="savePassword">淇濆瓨</el-button>
- </div>
- </el-dialog>
-</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>
- <router-view/>
+ <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 { selectList } from '../api/menuList'
+import { changePassword } from '../api/user'
+import { removeToken } from "../utils/auth";
import LanguageMixin from '../lang/LanguageMixin'
-import { mapState, mapMutations } from 'vuex';
- import Tag from '../layout/tag.vue';
- import store from '../store';
-
+import { MessageBox } from 'element-ui';
+// import { mapState, mapMutations } from 'vuex';
+// import Tag from '../layout/tag.vue';
+// import store from '../store';
+let socket;
+let timer;
export default {
name: "Layout",
- store,
+ // store,
mixins: [LanguageMixin],
data() {
return {
-
activeTag: '', // 褰撳墠婵�娲荤殑鏍囩
dialogVisible: false,
+ receivedData: 0,
+ receivedData2: 0,
formData: {
oldPassword: '',
newPassword: '',
confirmPassword: ''
},
-
menuList: [],
isCollapse: false,
activePath: '',
@@ -139,56 +153,223 @@
menuListForm: {
pageSize: 1,
pageNum: -1
- }
+ },
+ dialogFormVisible2: false,
+ dialogFormVisible3: false,
+ alarm: [],
+ alarm2: [],
+ CountDowns: "0",
+ EmergencyStop: false,
+ PromptSize: 250,
+ dialogFormCountDown: false
+
}
},
- components: {
- Tag
- },
+ // 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.activePath = window.sessionStorage.getItem('activePath')
});
+ this.init();
},
computed: {
- ...mapState('tags', ['tags'])
+ // ...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 = "Layout";
+ if (typeof (WebSocket) == "undefined") {
+ console.log("鎮ㄧ殑娴忚鍣ㄤ笉鏀寔WebSocket");
+ } else {
+ //console.log("鎮ㄧ殑娴忚鍣ㄦ敮鎸乄ebSocket");
+ let socketUrl = "ws://" + this.$t('ip') + ":8888" + "/springboot-vue3/api/talk/" + viewname;
+ if (socket != null) {
+ socket.close();
+ socket = null;
+ }
+ // 寮�鍚竴涓獁ebsocket鏈嶅姟
+ 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!=null){
+ this.alarm = obj.alarmmg[0];
+ }
+
+ // 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鍙戠敓浜嗛敊璇�");
+ }
+ }
+ },
+ //60绉掑浣嶅�掓暟璁℃椂
+ CountDown() {
+ clearInterval(timer);
+ let count = 60;
+ 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 杈呭姪鍑芥暟璋冪敤 Store 涓殑 mutations
- ...mapMutations('tags', ['addTag', 'removeTag']),
- // 鍒囨崲鏍囩鏃惰Е鍙戠殑鏂规硶
- saveNavState(activePath) {
- window.sessionStorage.setItem('activePath', activePath);
-
- const menuItem = this.menuList.find(item => item.menuLists.some(menu => menu.router === activePath));
- if (menuItem) {
- const submenuItem = menuItem.menuLists.find(menu => menu.router === activePath);
- if (submenuItem) {
- const tag = submenuItem.name;
- this.$store.commit('tags/addTag', tag); // 璋冪敤 Vuex Store 涓殑 addTag mutation
- }
- }
+ this.$router.push('/home');
},
- // 鍏抽棴鏍囩鏃惰Е鍙戠殑鏂规硶
- removeTag(tag) {
- this.removeTag(tag); // 浠� Vuex Store 涓Щ闄ゆ爣绛�
- },
-
+ // ...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;
},
@@ -199,43 +380,38 @@
this.$message.error('鏂板瘑鐮佷笌纭瀵嗙爜涓嶄竴鑷�');
return;
}
- changePassword({oldPassword, newPassword}).then(res => {
+ changePassword({ oldPassword, newPassword }).then(res => {
console.log(res.data);
this.$message.success('瀵嗙爜淇敼鎴愬姛');
removeToken()
- this.$router.push('/login')
-
+ this.$router.push('/login')
}).catch(() => {
-
+
});
this.dialogVisible = false;
},
-
-
-
-
-
toggleCollapse: function () {
this.isCollapse = !this.isCollapse;
},
- // saveNavState: function (activePath) {
- // window.sessionStorage.setItem('activePath', activePath)
- // },
replaceChineseWithEnglish(menuData) {
// 瀹氫箟涓嫳鏂囧鐓у叧绯诲璞�
const translation = {
'鐢ㄦ埛绠＄悊': 'UserManagement',
'鐢ㄦ埛鍒楄〃': 'UserList',
'璁惧绠＄悊': 'DeviceManagement',
- '鎶ヨ淇℃伅': 'AlarmInformation',
- '鍙傛暟涓嬪彂': 'ParameterSetting',
- '寮�鍏虫帶鍒�': 'SwitchControl',
- 'I/O鐘舵��': 'I/O Status',
+ '鎶ヨ淇℃伅': 'Alarm',
+ '鎵嬪姩/鑷姩': 'Manual/Automatic',
+ '寮�鍏虫帶鍒�': 'Action',
+ 'IO鐘舵��': 'Sign',
'鏉冮檺绠＄悊': 'PermissionManagement',
'鏉冮檺鍒楄〃': 'PermissionList',
'瑙掕壊绠＄悊': 'RoleManagement',
- '瑙掕壊鍒楄〃': 'RoleList'
+ '瑙掕壊鍒楄〃': 'RoleList',
+ '鐢垫皵绠＄悊': 'Electrical management',
+ '璁惧鐘舵��': 'State',
+
+ '涓婚〉': 'Home'
// 鏍规嵁瀹為檯闇�姹傜户缁坊鍔犲鐓у叧绯�
};
@@ -245,24 +421,46 @@
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">
-.header-container {
- display: flex;
- justify-content: flex-start;
+.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;
@@ -301,8 +499,13 @@
}
}
+.blue-button {
+ background-color: green;
+ color: white;
+}
+
.el-header {
- padding: 0;
+
background-color: #576574;
}
-</style>
+</style>
\ No newline at end of file
--
Gitblit v1.8.0