1、添加中英文json 2、layout/index.vue 调整布局样式 3、修改 PlcParameter.java

wuyouming666

2023-09-07 f193e7058f32f759d5a5e8c4a6b1f71c7fb2f3a8

1、添加中英文json  2、layout/index.vue  调整布局样式  3、修改 PlcParameter.java

 CanadaMes-ui/src/lang/locales/en-US.json

@@ -121,5 +121,9 @@
    "添加角色成功": "Successfully added role",

    "更新状态成功": "Successfully updated status",

    "修改角色成功": "Successfully modified role",

    "删除角色成功": "Successfully deleted role"

    "删除角色成功": "Successfully deleted role",

    "修改用户成功":"Successfully modified user",

    "translation": {

     
    }

  }

 CanadaMes-ui/src/lang/locales/zh-CN.json

@@ -124,6 +124,10 @@
    "添加角色成功": "添加角色成功",

    "更新状态成功": "更新状态成功",

    "修改角色成功": "修改角色成功",

    "删除角色成功": "删除角色成功"

    "删除角色成功": "删除角色成功",

    "修改用户成功":"修改用户成功",

    "translation": {

      
    }

  }

  

 CanadaMes-ui/src/layout/index.vue

@@ -31,6 +31,7 @@
                  <span>{{ item.name }}</span>
                </template>
                <!--二级菜单-->
              
                <el-menu-item :index="'/'+menu.router"
                              v-for="menu in item.menuLists" :key="menu.id"
                              @click="addTag(menu.router)">
@@ -53,16 +54,15 @@
        <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">
            <tag v-for="(tag, index) in tags" :key="index" :tag="tag" @removeTag="removeTag(index)" @switchTag="switchTag(index)"></tag>
            <!-- <el-button icon="el-icon-circle-close" class="close-all-btn" @click="removeAllTags"></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:30px;height:30px;margin-top:2px;"></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>
@@ -149,6 +149,7 @@
    ...mapState('tags', ['tags'])
  },
  methods: {
    
    logout: function () {
      removeToken()
      this.$router.push('/login')
@@ -168,6 +169,7 @@
    this.$store.commit('tags/addTag', tag);
  }
},


    removeTag(index) {
      this.$store.commit('tags/removeTag', index); // 从 Vuex Store 中移除标签
@@ -235,11 +237,16 @@
</script>

<style scoped lang="less">

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


.header-container {

@@ -250,6 +257,7 @@

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

 CanadaMes-ui/src/views/Electrical/Parameter.vue

@@ -1,155 +1,166 @@
<template>

  <div class="app">

  <!--面包屑导航区域-->

  <el-breadcrumb separator-class="el-icon-arrow-right" class="el-breadcrumb">

  <router-link to="/home" tag="el-button" type="text">{{ $t('langHome') }}</router-link>

  <el-button type="text">设备管理</el-button>

  <router-link to="/Electrical/Parameter" tag="el-button" type="text">Parameter</router-link>

  <router-link to="/Electrical/Action" tag="el-button" type="text">Action</router-link>

  <router-link to="/Electrical/Sign" tag="el-button" type="text">Sign</router-link>

  <router-link to="/Electrical/State" tag="el-button" type="text">State</router-link>

  <router-link to="/Electrical/alarm" tag="el-button" type="text">Alarm</router-link>

  </el-breadcrumb>

  <div>Parameter</div>

    <!-- 面包屑导航区域 -->

    <el-breadcrumb separator-class="el-icon-arrow-right" class="el-breadcrumb">

      <router-link to="/home" tag="el-button" type="text">{{ $t('langHome') }}</router-link>

      <el-button type="text">设备管理</el-button>

      <router-link to="/Electrical/Parameter" tag="el-button" type="text">Parameter</router-link>

      <router-link to="/Electrical/Action" tag="el-button" type="text">Action</router-link>

      <router-link to="/Electrical/Sign" tag="el-button" type="text">Sign</router-link>

      <router-link to="/Electrical/State" tag="el-button" type="text">State</router-link>

      <router-link to="/Electrical/alarm" tag="el-button" type="text">Alarm</router-link>

    </el-breadcrumb>

    
    <div>Parameter</div>

  

  <el-form label-width="100px" style="display: flex;flex-wrap: wrap;" :model="messagepack.data">

    <div id="btn_div">

      <el-button type="primary" @click="send()">下发参数</el-button>

    </div>

    <div class="kuai_div" v-for="(item, index) in record.xyData" :key="index">

      <el-input style="width: 280px;" class="in_mc" v-model="item.name" readonly></el-input>

      <el-input v-model.number="item.value" style="width: 80px;" @input="handleChange(index, $event.target.value)"></el-input>

    </div>

  </el-form>

    <el-form label-width="100px" style="display: flex; flex-wrap: wrap;" :model="messagepack.data">

      <div id="btn_div">

        <el-button type="primary" @click="send()">下发参数</el-button>

      </div>

      <div class="kuai_div" v-for="(item, index) in record.xyData" :key="index">

  <el-input style="width: 280px; border:none;" class="in_mc" v-model="item.name" readonly></el-input> 
  <span style="margin-right: 5px; width: 50px;">{{ item.value }}</span>

  <span style="margin-right: 5px; font-size: 14px;">|</span>

  <input v-model="item.value2" type="number" style="width: 30px; margin-right: 5px; margin-top: 5px; font-size: 16px;">

</div>

    </el-form>

  </div>

  </template>

  
  <script>

  let socket;

  
  export default {

</template>



<script>

let socket;



export default {

  name: "Parameter",

  data() {

  return {

  record: {

  params: [100, 200, 10, 10, 10, 10],

  xyData: [

  { name: "conveyor Velocity(Auto FAST)", value: 0 },

  { name: "conveyor Velocity(Auto SLOW)", value: 0 },

  { name: "conveyor Velocity(Manual)", value: 0 },

  { name: "A01 A02 TURN JOG Velocity", value: 0 },

  { name: "A01 A02 TRAVEL JOG Velocity", value: 0 },

  { name: "B01 B02 TRAVEL JOG Velocity", value: 0 },

  { name: "A01 A02 TURN POS Velocity AUTO", value: 0 },

  { name: "A01 A02 TURN POS Velocity manual", value: 0 },

  { name: "A01 A02 TRAVEL POS Velocity AUTO", value: 0 },

  { name: "A01 A02 TRAVEL POS Velocity manual", value: 0 },

  { name: "B01 B02 TRAVEL POS Velocity AUTO", value: 0 },

  { name: "B01 B02 TRAVEL POS Velocity manual", value: 0 }

  ],

  canshu: []

    return {

      record: {

        params: [100, 200, 10, 10, 10, 10],

        xyData: [

          { name: "conveyor Velocity(Auto FAST)", value: 0, value2: 0 },

          { name: "conveyor Velocity(Auto SLOW)", value: 0, value2: 0 },

          { name: "conveyor Velocity(Manual)", value: 0 ,value2: 0 },

          { name: "A01 A02 TURN JOG Velocity", value: 0, value2: 0 },

          { name: "A01 A02 TRAVEL JOG Velocity", value: 0, value2: 0 },

          { name: "B01 B02 TRAVEL JOG Velocity", value: 0, value2: 0 },

          { name: "A01 A02 TURN POS Velocity AUTO", value: 0, value2: 0 },

          { name: "A01 A02 TURN POS Velocity manual", value: 0, value2: 0 },

          { name: "A01 A02 TRAVEL POS Velocity AUTO", value: 0, value2: 0 },

          { name: "A01 A02 TRAVEL POS Velocity manual", value: 0, value2: 0 },

          { name: "B01 B02 TRAVEL POS Velocity AUTO", value: 0, value2: 0 },

          { name: "B01 B02 TRAVEL POS Velocity manual", value: 0, value2: 0 }

        ],

        canshu: []

      },

      messagepack: {

        data: { taskname: "" }

      },

      queryInfo: {

        data: "1",

        pageSize: 10

      }

    };

  },

  messagepack: {

  data: { taskname: "" }

  },

  queryInfo: {

  data: "1",

  pageSize: 10

  }

  };

  },

  
 
  created() {

  this.initWebSocket();

    this.initWebSocket();

  },

  methods: {

  initWebSocket() {

  let viewname = "Parameter";

    initWebSocket() {

      let viewname = "Parameter";

  

    if (typeof WebSocket === "undefined") {

      console.log("您的浏览器不支持WebSocket");

    } else {

      let socketUrl = "ws://" + "localhost:8888" + "/springboot-vue3/api/talk/" + viewname;

      if (typeof WebSocket === "undefined") {

        console.log("您的浏览器不支持WebSocket");

      } else {

        let socketUrl = "ws://" + "localhost: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 = (msg) => {

        if (!msg.data) {

          return; // 如果收到空数据，则直接返回，不执行后续逻辑

        if (socket != null) {

          socket.close();

          socket = null;

        }

  

        let obj = JSON.parse(msg.data);

        this.record.params[0] = obj.params[0];

        // 开启一个websocket服务

        socket = new WebSocket(socketUrl);

  

        for (let a = 0; a <= this.record.params[0].length - 1; a++) {

          if (!this.record.xyData[a]) {

            this.record.xyData[a] = { name: this.record.canshu[a], value: this.record.params[0][a] };

          } else {

            this.record.xyData[a].value = this.record.params[0][a];

        // 打开事件

        socket.onopen = function () {

          console.log("websocket已打开");

        };

  
        // 收到消息

        socket.onmessage = (msg) => {

          if (!msg.data) {

            return; // 如果收到空数据，则直接返回，不执行后续逻辑

          }

        }

  

        console.log(this.record.xyData);

        this.$forceUpdate();

      };

          let obj = JSON.parse(msg.data);

          this.record.params[0] = obj.params[0];

  

      // 关闭事件

      socket.onclose = function () {

        console.log("websocket已关闭");

      };

          for (let a = 0; a <= this.record.params[0].length - 1; a++) {

            if (!this.record.xyData[a]) {

              this.record.xyData[a] = { name: this.record.canshu[a], value: this.record.params[0][a] };

            } else {

              this.record.xyData[a].value = this.record.params[0][a];

            }

          }

  

      // 发生错误事件

      socket.onerror = function () {

        console.log("websocket发生了错误");

      };

          console.log(this.record.xyData);

          this.$forceUpdate();

        };

  
        // 关闭事件

        socket.onclose = function () {

          console.log("websocket已关闭");

        };

  
        // 发生错误事件

        socket.onerror = function () {

          console.log("websocket发生了错误");

        };

      }

    },

    send() {

      this.messagepack.data = this.record.xyData.map((item) => parseInt(item.value2)); // 转换为整数数组

      console.log(this.messagepack);

      socket?.send(JSON.stringify(this.messagepack));

    },

    handleChange(index, value) {

      this.record.xyData[index].value = value;

    }

  },

  send() {

    this.messagepack.data = this.record.xyData.map((item) => parseInt(item.value)); // 转换为整数数组

    console.log(this.messagepack);

    socket?.send(JSON.stringify(this.messagepack));

  },

  handleChange(index, value) {

    this.record.xyData[index].value = value;

  }

  }

  };

  </script>

  
  <style>

  .kuai_div {

  width: 30%;

};

</script>



<style>

.kuai_div {

  width: calc(100% / 3);

  margin-bottom: 15px;

  }

  
  .el-input {

  border: none;

  }

  
  .el-input__inner {

}



.el-input__inner {

  border: 1px solid black;

  }

  
  .in_mc .el-input__inner {

  border: none;

  }

  
  #btn_div {

}

.in_mc{



  border:none;

}





#btn_div {

  width: 100%;

  }

  
  #btn_div .el-button {

}



#btn_div .el-button {

  float: right;

}

input[type="number"]::-webkit-inner-spin-button,

  input[type="number"]::-webkit-outer-spin-button {

    -webkit-appearance: none;

    margin: 0;

  }

  </style>


  input[type="number"] {

    -moz-appearance: textfield; /* Firefox中禁用上下箭头 */

  }

</style>


 CanadaMes-ui/src/views/Electrical/alarm.vue

@@ -18,7 +18,7 @@
        </div>
      </el-form> -->

    <el-table :data="tableData" style="width: 100%;" height="590">
    <el-table :data="localizedRoles" style="width: 100%;" height="590">
      <el-table-column prop="id" label="id" width="80">
      </el-table-column>
      <el-table-column prop="content" label="content">
@@ -33,9 +33,11 @@

<script >
import { setAll } from "../../api/alarm";
import LanguageMixin from '../../lang/LanguageMixin'
let socket;
export default {
  name: "alarm",
  mixins: [LanguageMixin],
  data () {
    return {
      record: {
@@ -44,8 +46,8 @@
        // xyData: [],

      },
      tableData: [],

      roles: [],
      localizedRoles:[],
      messagepack: {
        data: { taskname: "" }
      },
@@ -59,15 +61,28 @@
  created () {
    this.init();
    this.load();

  },
  methods: {
    load () {
      setAll().then(res => {
        this.tableData = res.data.list;
        //console.log(this.tableData);

      });
    },
    load() {
  setAll().then(res => {
    this.roles = res.data.list;
    const language = this.$i18n.locale;
    if (language === 'zh-CN') {
      this.replaceChineseWithEnglish();
    } else {
      this.localizedRoles = [...this.roles];
    }
    console.log(this.localizedRoles);
  });
},
replaceChineseWithEnglish() {
  const translation = this.$t('translation');
  this.localizedRoles = this.roles.map(role => ({
    ...role,
    content: translation[role.content] || role.content
  }));
},
    init () {
      let viewname = "alarm";


 CanadaMes-ui/src/views/user/index.vue

@@ -109,8 +109,8 @@
          </el-select>
        </el-form-item>

        <el-form-item label="角色" prop="roleId">
          <el-select filterable v-model="addUserForm.roleId" placeholder="请选择">
        <el-form-item :label="$t('role')" prop="roleId">
          <el-select filterable v-model="addUserForm.roleId" :placeholder="$t('langSelect')"  >
            <el-option v-for="item in roleList"
                       :key="item.id"
                       :value="item.id"
@@ -135,7 +135,7 @@
          <el-input v-model="editUserForm.username" disabled></el-input>
        </el-form-item>
        <el-form-item :label="$t('role')" prop="roleId">
          <el-select filterable v-model="editUserForm.roleId" placeholder="请选择">
          <el-select filterable v-model="editUserForm.roleId" :placeholder="$t('langSelect')" >
            <el-option v-for="item in roleList"
                       :key="item.id"
                       :value="item.id"
@@ -342,7 +342,8 @@
        if (!valid) return;
       
        saveOrUpdate(this.editUserForm).then(() => {
          this.$message.success("修改用户成功");
          const 修改用户成功 = this.$t('修改用户成功');
          this.$message.success(修改用户成功);
          // 隐藏添加分类对话框
          this.editDialogVisible = false;
          // 重新获取分类列表

 springboot-vue3/src/main/java/com/example/springboot/component/PlcParameter.java

@@ -1,23 +1,29 @@
package com.example.springboot.component;

import cn.hutool.json.JSONObject;
import org.apache.shiro.authz.annotation.RequiresPermissions;

import java.util.ArrayList;
import java.util.List;

public class PlcParameter extends Thread {
    private static final int SEND_INTERVAL = 10000;
    private static final int SEND_INTERVAL = 1000;
    private static final int WRITE_INTERVAL = 100;

    @Override
    private short[] params = new short[]{1111, 121, 3232, 0, 1, 0, 1, 0, 1, 0, 1, 0};
    List<Short> paramList = S7control.getinstance().ReadWord("DB100.DBW", 12);

// 将列表中的值复制到 params 数组中


    @Override
    public void run() {
        try {
            // 发送一次消息
            sendMessages();
//            sendMessages();

            // 延迟一段时间
            Thread.sleep(SEND_INTERVAL);


            while (true) {
                // 写入PLC
@@ -37,10 +43,8 @@
    private void sendMessages() {
        WebSocketServer sendwServer = WebSocketServer.sessionMap.get("Parameter");
        if (sendwServer != null) {
            List<Short> paramlist = S7control.getinstance().ReadWord("DB100.DBW", 12);
            JSONObject jsonObject = new JSONObject();
//            new short[]{1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0}
            jsonObject.append("params", new short[]{1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0});
            jsonObject.append("params", params);
            sendwServer.sendMessage(jsonObject.toString());
        }
    }
@@ -70,6 +74,13 @@
                    }
                }

                // 替换初始变量的值
                for (int i = 0; i < messageValues.size(); i++) {
                    if (i < params.length) {
                        params[i] = messageValues.get(i);
                    }
                }

                // 将消息值写入 PLC
                S7control.getinstance().WriteWord(addressList, messageValues);
                System.out.println("messageValues：" + messageValues);

 springboot-vue3/src/main/java/com/example/springboot/component/Plcaction.java

@@ -3,7 +3,9 @@
import cn.hutool.json.JSONObject;



import java.util.ArrayList;

import java.util.Arrays;

import java.util.List;





public class Plcaction extends Thread {

    private static final long SEND_INTERVAL = 2000; // 发送消息的时间间隔

@@ -39,9 +41,18 @@
        if (sendwServer != null) {



            List<Boolean> paramlist = S7control.getinstance().ReadBits("DB100.DBW", 12);

            List<Boolean> paramlist2 = new ArrayList<>(Arrays.asList(true, false, true, false, true, false, true, false, true, false, true, false, true, false, true, false, true, false, true, false, true, false, true, false));





            List<Integer> binaryList = new ArrayList<>();



            for (Boolean value : paramlist2) {

                int binaryValue = value ? 1 : 0;

                binaryList.add(binaryValue);

            }

            //        new short[]{1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0}

            JSONObject jsonObject = new JSONObject();

            jsonObject.append("params", new short[]{1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0});

            jsonObject.append("params", binaryList);



            sendwServer.sendMessage(jsonObject.toString());

        }


 springboot-vue3/src/main/java/com/example/springboot/component/Plcalarm.java

@@ -98,7 +98,7 @@
      }

      // 写
      WebSocketServer webSocketServer = WebSocketServer.sessionMap.get("Parameter");
      WebSocketServer webSocketServer = WebSocketServer.sessionMap.get("alarm");
      if (webSocketServer != null) {
        List<String> messages = webSocketServer.getMessages();


 springboot-vue3/src/main/java/com/example/springboot/config/AppRunnerConfig.java

@@ -28,15 +28,9 @@
    new PlcHold().start();
    new Plcaction().start();
    new PlcParameter().start();

    new Plchome().start();

    new PlcParameter().start();

    new Plcalarm().start();

    new Plcsign().start();

    new Plcstate().start();
  }
}