Merge branch 'master' of http://10.153.19.25:10101/r/CanadaMes

wuyouming666

2023-12-25 c49dc2f40279bcc360948cea68dec69cf213b85f

 CanadaMes-ui/src/layout/index.vue

@@ -1,7 +1,7 @@
<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'">
    <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">
@@ -9,11 +9,10 @@
            </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">
            <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>
@@ -31,10 +30,8 @@
                  <span>{{ item.name }}</span>
                </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>
@@ -50,19 +47,21 @@
    </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">

        <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>
</div> -->
          <template>
            <el-submenu index="1" class="custom-submenu"  >
            <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>
@@ -92,10 +91,24 @@
      </el-header>
      <el-main>
        <keep-alive>
          <router-view/>
          <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>

@@ -107,6 +120,7 @@
// import { mapState, mapMutations } from 'vuex';
// import Tag from '../layout/tag.vue';
// import store from '../store';
let socket;

export default {
  name: "Layout",
@@ -116,6 +130,8 @@
    return {
      activeTag: '', // 当前激活的标签
      dialogVisible: false,
      receivedData:0,
      receivedData2:0,
      formData: {
        oldPassword: '',
        newPassword: '',
@@ -128,7 +144,11 @@
      menuListForm: {
        pageSize: 1,
        pageNum: -1
      }
      },
      dialogFormVisible2: false,
      dialogFormVisible3: true,
      alarm: [],
      alarm2: []
    }
  },
  // components: {
@@ -148,12 +168,104 @@
      // 记录上一次激活的菜单
      // 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')
@@ -161,19 +273,19 @@
    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);
  // }
},
      // 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 中移除标签
@@ -188,13 +300,13 @@
        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')
      }).catch(() => {
       

      });

      this.dialogVisible = false;
@@ -217,7 +329,7 @@
        '角色管理': 'RoleManagement',
        '角色列表': 'RoleList',
        '电气管理': 'Electrical management',
        '设备状态':'State',
        '设备状态': 'State',

        '主页': 'Home'
        // 根据实际需求继续添加对照关系
@@ -244,69 +356,74 @@
</script>

<style scoped lang="less">

.el-menu--horizontal > .el-submenu .el-submenu__title {
.el-menu--horizontal>.el-submenu .el-submenu__title {
  height: 45px !important;
}
.custom-submenu  {
 
 
 height: 90px   !important;

.custom-submenu {


  height: 90px !important;
}


.header-container {

 height: 30px   !important; /* 设置较小的高度 */
  height: 30px !important;
  /* 设置较小的高度 */
}



.header-left {
 margin-right: auto;
width:30px;
 
  margin-right: auto;
  width: 30px;

}

.el-aside {
 height: 100vh;
 background-color: #222f3e;
 line-height: 200px;
  height: 100vh;
  background-color: #222f3e;
  line-height: 200px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
 width: 200px;
 min-height: 400px;
  width: 200px;
  min-height: 400px;
}

.el-menu-demo {
 display: flex;
 width: 100%;
 height: 100%;
 justify-content: flex-end;
 align-items: center;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: flex-end;
  align-items: center;

}

.el-menu-vertical-demo {
 border: 0;
  border: 0;
}

.logo {
 background-color: #222f3e;
 display: flex;
 justify-content: center;
 align-items: center;
 height: 60px;
  background-color: #222f3e;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;

 .sys-name {
   font-size: 20px;
   color: #ffffff;
   margin-left: 10px;
 }
  .sys-name {
    font-size: 20px;
    color: #ffffff;
    margin-left: 10px;
  }
}

.blue-button {
  background-color: green;
  color: white;
}
.el-header {

 background-color: #576574;
  background-color: #576574;
}
</style>