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

wuyouming666

2023-09-13 eb967d7573a8297e493d455dfce2c77319215990

 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">
@@ -20,7 +18,8 @@
      <el-date-picker v-model="shijian2" type="datetime" placeholder="选择日期时间" align="right"
        :picker-options="pickerOptions">
      </el-date-picker>
      <el-button type="primary" @click="selectTime()">查询</el-button>
      &nbsp;&nbsp;
      <el-button type="primary" @click="selectTime()">{{ $t('Search') }}</el-button>
    </div>

    <el-table :data="localizedRoles" style="width: 100%;" height="550">
@@ -48,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],

@@ -99,14 +99,22 @@


    if (this.shijian1 == "" || this.shijian2 == "") {
      //查询当天报警信息
      this.load();
    }
    else {
      //根据时间查询报警信息
      this.selectTime();
    }

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

    load () {
      setAll().then(res => {
@@ -122,11 +130,13 @@

    },
    selectTime () {
      //moment需要单独安转依赖，npm install moment
      let sj1 = moment(this.shijian1).format('YYYY-MM-DD%20HH:mm');
      let sj2 = moment(this.shijian2).format('YYYY-MM-DD%20HH:mm')

      //调用setTime方法给roles赋值
      setTime(sj1, sj2).then(res => {
        this.roles = res.data.list;
        //table中的内容进行语言转换
        const language = this.$i18n.locale;
        if (language === 'zh-CN') {
          this.replaceChineseWithEnglish();
@@ -135,7 +145,7 @@
        }
      });
    },

    //语言转换
    replaceChineseWithEnglish () {
      const translation = this.$t('translation');
      this.localizedRoles = this.roles.map(role => ({
@@ -165,8 +175,6 @@
        };
        //  浏览器端收消息，获得从服务端发送过来的文本消息
        socket.onmessage = function (msg) {

          //console.log("收到数据====" + msg.data);
          let obj = JSON.parse(msg.data);

          this.record.params[0] = obj.arm;
@@ -190,10 +198,6 @@
      }

    },
    send () {
      this.messagepack.data = { taskname: "前端到后台" };
      socket?.send(JSON.stringify(this.messagepack));  // 将组装好的json发送给服务端，由服务端进行转发
    }

  }

@@ -233,4 +237,7 @@
th div {
  text-align: center;
}
.blue-button {
  background-color: skyblue;
}
</style>