注册页面中英文替换 修改电气管理顶部导航栏布局

wuyouming666

2023-09-13 eb967d7573a8297e493d455dfce2c77319215990

注册页面中英文替换  修改电气管理顶部导航栏布局

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

@@ -171,5 +171,31 @@
  "State": "State",

  "Alarm": "Alarm",

  "Distribute": "Distribute",

  "Search": "Search"

  "Search": "Search",

 
 
  "langUsernameLabel": "Username",



  "langPasswordLabel": "Password",

  "langPasswordPlaceholder": "Please enter your password",

  "langConfirmPasswordLabel": "Confirm Password",

  "langConfirmPasswordPlaceholder": "Please confirm your password",

  "langEmailLabel": "Email",



  "langQQLabel": "QQ",

  "langQQPlaceholder": "Please enter your QQ number",

  "langPhoneNumberLabel": "Phone Number",

  "langPhoneNumberPlaceholder": "Please enter your phone number",

  "langUsernameRequiredMessage": "Please enter your username",

  "langUsernameLengthMessage": "Username length should be between 5 and 15 characters",

  "langPasswordRequiredMessage": "Please enter your password",

  "langPasswordLengthMessage": "Password length should be between 5 and 15 characters",

  "langEmailRequiredMessage": "Please enter your email",

  "langEmailFormatMessage": "Invalid email format",

  "langRegisterButton": "Register",

  "langResetButton": "Reset",

  "langCancelButton": "Cancel",

  "langRegisterSuccessMessage": "Registration successful"





}

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

@@ -171,5 +171,26 @@
  "State": "State",

  "Alarm": "报警信息",

  "Distribute": "下发",

  "Search": "搜索"

  "Search": "搜索",

  "langUsernameLabel": "用户名",

  "langPasswordLabel": "密码",

  "langPasswordPlaceholder": "请输入密码",

  "langConfirmPasswordLabel": "确认密码",

  "langConfirmPasswordPlaceholder": "请确认密码",

  "langEmailLabel": "邮箱",

  
  "langQQLabel": "QQ",

  "langQQPlaceholder": "请输入QQ号码",

  "langPhoneNumberLabel": "手机号码",

  "langPhoneNumberPlaceholder": "请输入手机号码",

  "langUsernameRequiredMessage": "请输入用户名",

  "langUsernameLengthMessage": "用户名长度在5到15个字符之间",

  "langPasswordRequiredMessage": "请输入密码",

  "langPasswordLengthMessage": "密码长度在5到15个字符之间",

  "langEmailRequiredMessage": "请输入邮箱",

  "langEmailFormatMessage": "邮箱格式不正确",

  "langRegisterButton": "注册",

  "langResetButton": "重置",

  "langCancelButton": "取消",

  "langRegisterSuccessMessage": "注册成功"

}

 CanadaMes-ui/src/layout/index.vue

@@ -1,5 +1,5 @@
<template>
  <el-container style="flex: 1;">
  <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">

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

@@ -2,13 +2,12 @@
  <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">Electrical</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>
     
      <router-link to="/Electrical/Parameter" tag="el-button" type="text" active-class="blue-button">{{ $t('Parameter') }}</router-link>
    <router-link to="/Electrical/Action" tag="el-button" type="text" active-class="blue-button">{{ $t('Action') }}</router-link>
    <router-link to="/Electrical/Sign" tag="el-button" type="text" active-class="blue-button">{{ $t('Sign') }}</router-link>
    <router-link to="/Electrical/State" tag="el-button" type="text" active-class="blue-button">{{ $t('State') }}</router-link>
    <router-link to="/Electrical/alarm" tag="el-button" type="text" active-class="blue-button">{{ $t('Alarm') }}</router-link>
    </el-breadcrumb>
    <div>Action</div>
    <el-form label-width="100px" style="display: flex;flex-wrap: wrap;" :model="{ messagepack }">
@@ -31,10 +30,11 @@
import LanguageMixin from '../../lang/LanguageMixin'
let socket;
export default {
  name: "action",
  name: "Action",
  mixins: [LanguageMixin],
  data () {
    return {
      activeButton: '',
      record: {
        params: [0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        canshu: [
@@ -111,6 +111,9 @@
    this.init();
  },
  methods: {
    setActiveButton(buttonName) {
    this.activeButton = buttonName;
  },
    init () {
      let viewname = "action";

@@ -203,4 +206,7 @@
.el-input__inner {
  border: none;
}
.blue-button {
  background-color: skyblue;
}
</style>

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

@@ -2,13 +2,11 @@
  <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">Electrical</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>

      <router-link to="/Electrical/Parameter" tag="el-button" type="text" active-class="blue-button">{{ $t('Parameter') }}</router-link>

    <router-link to="/Electrical/Action" tag="el-button" type="text" active-class="blue-button">{{ $t('Action') }}</router-link>

    <router-link to="/Electrical/Sign" tag="el-button" type="text" active-class="blue-button">{{ $t('Sign') }}</router-link>

    <router-link to="/Electrical/State" tag="el-button" type="text" active-class="blue-button">{{ $t('State') }}</router-link>

    <router-link to="/Electrical/alarm" tag="el-button" type="text" active-class="blue-button">{{ $t('Alarm') }}</router-link>

    </el-breadcrumb>



    <div>Parameter</div>

@@ -31,11 +29,13 @@


<script>

let socket;



import LanguageMixin from '../../lang/LanguageMixin'

export default {

  name: "Parameter",

  mixins: [LanguageMixin],

  data () {

    return {

      activeButton: '',

      record: {

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

        xyData: [

@@ -70,6 +70,9 @@
    this.isButtonDisabled = true;

  },

  methods: {

    setActiveButton(buttonName) {

      this.activeButton = buttonName;

    },

    initWebSocket () {

      let viewname = "Parameter";



@@ -156,7 +159,10 @@
  border: none;

}





.blue-button {

  background-color: skyblue;

  color: #fff;

}

#btn_div {

  width: 100%;

}


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

@@ -2,13 +2,11 @@
  <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">{{ $t('Electrical') }}</el-button>

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

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

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

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

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

      <router-link to="/Electrical/Parameter" tag="el-button" type="text" active-class="blue-button">{{ $t('Parameter') }}</router-link>

    <router-link to="/Electrical/Action" tag="el-button" type="text" active-class="blue-button">{{ $t('Action') }}</router-link>

    <router-link to="/Electrical/Sign" tag="el-button" type="text" active-class="blue-button">{{ $t('Sign') }}</router-link>

    <router-link to="/Electrical/State" tag="el-button" type="text" active-class="blue-button">{{ $t('State') }}</router-link>

    <router-link to="/Electrical/alarm" tag="el-button" type="text" active-class="blue-button">{{ $t('Alarm') }}</router-link>

    </el-breadcrumb>

    <div>Sign</div>

    <div style="padding-right: 30px;display: flex;flex-wrap: wrap;" class="neir">

@@ -32,6 +30,7 @@
  mixins: [LanguageMixin],

  data () {

    return {

      activeButton: '',

      record: {

        //定义数组，并添加默认值

        params: [1, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0,

@@ -148,6 +147,12 @@
    this.init();

  },

  methods: {

    onButtonClick() {

      this.isButtonClicked = true; // 将按钮颜色设置为蓝色

      setTimeout(() => {

        this.isButtonClicked = false; // 重置按钮颜色

      }, 500); // 这里的500毫秒是根据您希望按钮颜色持续多长时间来定的，可以根据需求进行调整

    },

    //根据读取PLC的值，根据名称改变颜色

    getStatusClass (zhuangtai) {

      // if (mc === "LED.green" && zhuangtai === 0) {

@@ -306,4 +311,7 @@
.yellow {

  background-color: yellow;

}

.blue-button {

  background-color: skyblue;

}

</style>

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

@@ -2,13 +2,11 @@
  <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">{{ $t('Electrical') }}</el-button>

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

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

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

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

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

      <router-link to="/Electrical/Parameter" tag="el-button" type="text" active-class="blue-button">{{ $t('Parameter') }}</router-link>

    <router-link to="/Electrical/Action" tag="el-button" type="text" active-class="blue-button">{{ $t('Action') }}</router-link>

    <router-link to="/Electrical/Sign" tag="el-button" type="text" active-class="blue-button">{{ $t('Sign') }}</router-link>

    <router-link to="/Electrical/State" tag="el-button" type="text" active-class="blue-button">{{ $t('State') }}</router-link>

    <router-link to="/Electrical/alarm" tag="el-button" type="text" active-class="blue-button">{{ $t('Alarm') }}</router-link>

    </el-breadcrumb>

    <div>State</div>



@@ -38,6 +36,7 @@
  mixins: [LanguageMixin],

  data () {

    return {

      activeButton: '',

      record: {

        params: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0,],

        xyData: [

@@ -82,6 +81,12 @@
    this.init();

  },

  methods: {

    onButtonClick() {

      this.isButtonClicked = true; // 将按钮颜色设置为蓝色

      setTimeout(() => {

        this.isButtonClicked = false; // 重置按钮颜色

      }, 500); // 这里的500毫秒是根据您希望按钮颜色持续多长时间来定的，可以根据需求进行调整

    },

    init () {

      let viewname = "State";



@@ -176,4 +181,7 @@
#btn_div .el-button {

  float: right;

}

.blue-button {

  background-color: skyblue;

}

</style>


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

@@ -2,13 +2,11 @@
  <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">{{ $t('Electrical') }}</el-button>
      <router-link to="/Electrical/Parameter" tag="el-button" type="text">{{ $t('Parameter') }}</router-link>
      <router-link to="/Electrical/Action" tag="el-button" type="text">{{ $t('Action') }}</router-link>
      <router-link to="/Electrical/Sign" tag="el-button" type="text">{{ $t('Sign') }}</router-link>
      <router-link to="/Electrical/State" tag="el-button" type="text">{{ $t('State') }}</router-link>
      <router-link to="/Electrical/alarm" tag="el-button" type="text">{{ $t('Alarm') }}</router-link>
      <router-link to="/Electrical/Parameter" tag="el-button" type="text" active-class="blue-button">{{ $t('Parameter') }}</router-link>
    <router-link to="/Electrical/Action" tag="el-button" type="text" active-class="blue-button">{{ $t('Action') }}</router-link>
    <router-link to="/Electrical/Sign" tag="el-button" type="text" active-class="blue-button">{{ $t('Sign') }}</router-link>
    <router-link to="/Electrical/State" tag="el-button" type="text" active-class="blue-button">{{ $t('State') }}</router-link>
    <router-link to="/Electrical/alarm" tag="el-button" type="text" active-class="blue-button">{{ $t('Alarm') }}</router-link>
    </el-breadcrumb>
    <div>Alarm</div>
    <div class="block">
@@ -49,6 +47,7 @@
  mixins: [LanguageMixin],
  data () {
    return {
      activeButton: '',
      record: {
        params: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],

@@ -110,6 +109,12 @@

  },
  methods: {
    onButtonClick() {
      this.isButtonClicked = true; // 将按钮颜色设置为蓝色
      setTimeout(() => {
        this.isButtonClicked = false; // 重置按钮颜色
      }, 500); // 这里的500毫秒是根据您希望按钮颜色持续多长时间来定的，可以根据需求进行调整
    },

    load () {
      setAll().then(res => {
@@ -232,4 +237,7 @@
th div {
  text-align: center;
}
.blue-button {
  background-color: skyblue;
}
</style>

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

@@ -1,58 +1,60 @@
<template>
  <div class="login_container">
    <div class="login_box">
      <!--头像区域-->
      <div class="avatar_box">
        <img src="../../assets/emi.png">
      </div>
      <el-form ref="registerRef" :model="registerForm" label-width="80px" :rules="registerRules"
               class="login_form">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="registerForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password1">
          <el-input v-model="registerForm.password1" placeholder="请输入密码" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="password">
          <el-input v-model="registerForm.password" placeholder="请再次输入用户名" type="password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="registerForm.email" placeholder="请输入邮箱" type="text"></el-input>
        </el-form-item>
        <el-form-item label="QQ" prop="qq">
          <el-input v-model="registerForm.qq" placeholder="请输入QQ" type="text"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="registerForm.phone" placeholder="请输入手机号码" type="text"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="register">注册</el-button>
          <el-button @click="reset">重设</el-button>
          <el-button @click="toLogin">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  <div class="login_box">
  <!--头像区域-->
  <div class="avatar_box">
  <img src="../../assets/emi.png">
  </div>
</template>

<script>
import {register} from '../../api/user'

export default {
  <el-form ref="registerRef" :model="registerForm" label-width="80px" :rules="registerRules"
  class="login_form">
  <el-form-item :label="$t('langUsernameLabel')" prop="username">
            <el-input v-model="registerForm.username" :placeholder="$t('langUsernamePlaceholder')"></el-input>
  </el-form-item>
  <el-form-item :label="$t('langPasswordLabel')" prop="password1">
            <el-input v-model="registerForm.password1" :placeholder="$t('langPasswordPlaceholder')" type="password"></el-input>
  </el-form-item>
  <el-form-item :label="$t('langConfirmPasswordLabel')" prop="password">
            <el-input v-model="registerForm.password" :placeholder="$t('langConfirmPasswordPlaceholder')" type="password"></el-input>
  </el-form-item>
  <el-form-item :label="$t('langEmailLabel')" prop="email">
            <el-input v-model="registerForm.email" :placeholder="$t('langEmailPlaceholder')" type="text"></el-input>
  </el-form-item>
  <el-form-item :label="$t('langQQLabel')" prop="qq">
            <el-input v-model="registerForm.qq" :placeholder="$t('langQQPlaceholder')" type="text"></el-input>
  </el-form-item>
  <el-form-item :label="$t('langPhoneNumberLabel')" prop="phone">
            <el-input v-model="registerForm.phone" :placeholder="$t('langPhoneNumberPlaceholder')" type="text"></el-input>
  </el-form-item>
  <el-form-item>
  <el-button type="primary" @click="register">{{$t('langRegisterButton')}}</el-button>
            <el-button @click="reset">{{$t('langResetButton')}}</el-button>
  <el-button @click="toLogin">{{$t('langCancelButton')}}</el-button>
  </el-form-item>
  </el-form>
  </div>
  </div>
  </template>
  
  <script>
  import {register} from '../../api/user'
  import LanguageMixin from '../../lang/LanguageMixin'
  
  export default {
  name: 'Register',
  mixins: [LanguageMixin],
  data() {
    // 自定义校验规则
    const validatePassword = (rule, value, callback) => {
      if (this.registerForm.password1 !== this.registerForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      registerForm: {},
      registerRules: {
        username: [
  // 自定义校验规则
  const validatePassword = (rule, value, callback) => {
  if (this.registerForm.password1 !== this.registerForm.password) {
  callback(new Error("两次输入密码不一致!"));
  } else {
  callback();
  }
  };
  return {
  registerForm: {},
  registerRules: {
    username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 5, max: 15, message: '长度在 5 到 5 个字符', trigger: 'blur'}
        ],
@@ -70,8 +72,8 @@
          {required: false, message: '请输入邮箱', trigger: 'blur'},
          {type: 'email', message: '请输入正确格式的邮箱地址', trigger: 'blur'}
        ]
      }
    }
  }
  }
  },
  methods: {
    register() {
@@ -83,23 +85,23 @@
        });
      })
    },
    reset() {
      this.$refs['registerRef'].resetFields();
    },
    toLogin() {
      this.$router.push('/login')
    }
  reset() {
  this.refs['registerRef'].resetFields();
      },
      toLogin() {
        this.router.push('/login')
  }
}
</script>

<style scoped lang="less">
.login_container {
  }
  }
  </script>
  
  <style scoped lang="less">
  .login_container {
  background-color: #2b4b6b;
  height: 100%;
}

.login_box {
  }
  
  .login_box {
  width: 450px;
  height: 550px;
  background-color: #fff;
@@ -108,38 +110,38 @@
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  
  .avatar_box {
    height: 130px;
    width: 130px;
    border: 1px solid #eee;
  height: 130px;
  width: 130px;
  border: 1px solid #eee;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 0 10px #ddd;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  
  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
    background-color: #eee;
  }
}

.btns {
  }
  }
  
  .btns {
  display: flex;
  justify-content: flex-end;
}

.login_form {
  }
  
  .login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
</style>
  }
  </style>

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

@@ -70,7 +70,7 @@
            // 将消息值转换为布尔列表

            List<Boolean> messageBooleans = new ArrayList<>();

            for (Integer value : messageValues) {

              messageBooleans.add(value == 0 ? true : false);

              messageBooleans.add(value == 1 ? true : false);

            }



            // 将布尔列表写入 PLC