wuyouming666
2023-12-25 c49dc2f40279bcc360948cea68dec69cf213b85f
CanadaMes-ui/src/layout/index.vue
@@ -9,9 +9,8 @@
            </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">
@@ -32,9 +31,7 @@
                </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>
@@ -51,10 +48,11 @@
    <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>
@@ -62,7 +60,8 @@
          <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>
@@ -96,6 +95,20 @@
        </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')
@@ -244,10 +356,10 @@
</script>
<style scoped lang="less">
.el-menu--horizontal > .el-submenu .el-submenu__title {
  height: 45px !important;
}
.custom-submenu  {
 
 
@@ -257,7 +369,8 @@
.header-container {
 height: 30px   !important; /* 设置较小的高度 */
  height: 30px !important;
  /* 设置较小的高度 */
}
@@ -267,6 +380,7 @@
width:30px;
 
}
.el-aside {
 height: 100vh;
 background-color: #222f3e;
@@ -304,7 +418,10 @@
   margin-left: 10px;
 }
}
.blue-button {
  background-color: green;
  color: white;
}
.el-header {
 background-color: #576574;