zhangyong
2023-09-17 cc24badd0e407574ced84850dfd1feba53982bf5
CanadaMes-ui/src/views/Electrical/State.vue
@@ -2,22 +2,27 @@
  <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/alarm" tag="el-button" type="text" active-class="blue-button">{{ $t('Alarm')
      }}</router-link>
      <router-link to="/Electrical/State" tag="el-button" type="text" active-class="blue-button">{{ $t('State')
      }}</router-link>
      <router-link to="/Electrical/Action" tag="el-button" type="text" active-class="blue-button">{{ $t('Action')
      }}</router-link>
      <router-link to="/Electrical/Parameter" tag="el-button" type="text" active-class="blue-button">{{ $t('Parameter')
      }}</router-link>
      <router-link to="/Electrical/Sign" tag="el-button" type="text" active-class="blue-button">{{ $t('Sign')
      }}</router-link>
    </el-breadcrumb>
    <div>State</div>
    <div>{{ $t('State') }}</div>
    <el-form label-width="100px" style="display: flex;flex-wrap: wrap;" :model="messagepack.data">
      <div class="kuai_div" v-for="item in this.record.xyData" :key="item.name">
        <el-input style="width: 280px;" class="in_mc" v-model="item.name"></el-input>
        <el-input v-model="item.value" readonly="readonly" style="width: 80px;"></el-input>
        <el-input style="width: 60%;" class="in_mc" v-model="item.name" readonly></el-input>
        <el-input v-model="item.value" readonly="readonly" style="width: 90px;"></el-input>
      </div>
@@ -38,6 +43,7 @@
  mixins: [LanguageMixin],
  data () {
    return {
      activeButton: '',
      record: {
        params: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
        xyData: [
@@ -52,18 +58,7 @@
          { name: 'D05.State', value: "自动" },
          { name: 'D06.State', value: "自动" },
        ],
        // canshu: [
        //   'D01.State',
        //   'D02.State',
        //   'B01.State',
        //   'B02.State',
        //   'A01.State',
        //   'A02.State',
        //   'D03.State',
        //   'D04.State',
        //   'D05.State',
        //   'D06.State',
        // ],
      },
@@ -80,8 +75,15 @@
  },
  created () {
    this.init();
    this.replaceChineseWithEnglish();
  },
  methods: {
    onButtonClick () {
      this.isButtonClicked = true; // 将按钮颜色设置为蓝色
      setTimeout(() => {
        this.isButtonClicked = false; // 重置按钮颜色
      }, 500); // 这里的500毫秒是根据您希望按钮颜色持续多长时间来定的,可以根据需求进行调整
    },
    init () {
      let viewname = "State";
@@ -139,11 +141,8 @@
    //语言转换
    replaceChineseWithEnglish () {
      const translation = this.$t('dvstate');
      this.localizedRoles = this.record.xyData.map(role => ({
        ...role,
        content: translation[role.content] || role.content
      }));
      console.log(this.localizedRoles);
      this.record.xyData = this.record.xyData.map(item => { return { name: item.name, value: translation[item.value] || item.value }; });
      console.log(translation);
    },
@@ -157,18 +156,26 @@
</script>
<style>
<style scoped>
/* * {
  margin: 0px;
  padding: 0px;
} */
.kuai_div {
  width: 30%;
  margin-bottom: 15px;
}
.el-input {
  border: none;
  .el-input__inner {
    text-align: center;
    border: 1 solid black;
    padding: 0 10px;
  }
@@ -188,4 +195,8 @@
#btn_div .el-button {
  float: right;
}
.blue-button {
  background-color: skyblue;
}
</style>