wuyouming666
2023-12-04 82c2df0968b099bd589936adc5b28c1ac4827a05
CanadaMes-ui/src/views/Electrical/Action.vue
@@ -2,12 +2,20 @@
  <div class="app">
    <!--面包屑导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right" class="el-breadcrumb">
      <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>
      <router-link to="/Electrical/ServoManualone" 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>
       <router-link to="/Electrical/Servomanual" tag="el-button" type="text" active-class="blue-button">{{ $t('Servo Manual')
      }}</router-link>
    </el-breadcrumb>
    <div>Action</div>
    <el-form label-width="100px" style="display: flex;flex-wrap: wrap;" :model="{ messagepack }">
      <!-- <div class="kuai_div" v-for="item in record.xyData" :key="item.value">
@@ -17,8 +25,10 @@
      <div class="kuai_div" v-for="(item, index) in record.xyData" :key="index">
        <el-input v-model="item.name" style="width: 240px;" class="in_mc" readonly></el-input>
        <el-switch v-model="item.value" active-value="1" inactive-value="0"  @change="send()"></el-switch>
        <el-switch v-model="item.value" active-value="1" inactive-value="0" @change="send()"></el-switch>
      </div>
    </el-form>
@@ -26,16 +36,16 @@
</template>
 
<script >
import { SelectPassword } from "../../api/home";
import LanguageMixin from '../../lang/LanguageMixin'
import data from '../../configuration/Action'
let socket;
export default {
  name: "Action",
  mixins: [LanguageMixin],
  data () {
    return {
      jsonData: data,
      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],
        canshu: [
@@ -108,15 +118,18 @@
    }
  },
  created () {
    this.init();
    this.isClickable = false;
  // created () {
  //   this.init();
  // },
  activated(){
   
  },
    this.init();
 },
  methods: {
    setActiveButton(buttonName) {
    this.activeButton = buttonName;
  },
    setActiveButton (buttonName) {
      this.activeButton = buttonName;
    },
    init () {
      let viewname = "action";
@@ -138,24 +151,28 @@
        };
        //  浏览器端收消息,获得从服务端发送过来的文本消息
        socket.onmessage = (msg) => {
          //console.log("收到数据====" + msg.data);
          if (!msg.data) {
            return; // 如果收到空数据,则直接返回,不执行后续逻辑
          }
          let obj = JSON.parse(msg.data);
          if (obj.params ){
          this.record.params[0] = obj.params[0];
          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].toString() };
            } else {
          if (obj.params) {
            this.record.params[0] = obj.params[0];
            for (let a = 0; a <= this.record.params[0].length - 1; a++) {
              this.record.xyData[a].name = this.jsonData.action[a].name;
              this.record.xyData[a].value = this.record.params[0][a].toString();
            }
            const language = this.$i18n.locale;
            if (language === 'en-US') {
              this.replaceChineseWithEnglish();
            } else {
              this.localizedRoles = [...this.record.xyData];
            }
          }
        }
          // console.log(this.record.xyData);
          this.$forceUpdate();
          this.replaceChineseWithEnglish();
        };
        //关闭事件
@@ -166,41 +183,23 @@
        socket.onerror = function () {
          console.log("websocket发生了错误");
        }
        this.$router.afterEach(function(){
          socket.close();
        })
      }
    },
    send () {
      this.isClickable = true;
      SelectPassword().then(res => {
 this.password = res.data.password;
});
    this.$prompt(this.$t('Are you sure to perform this operation?'), this.$t('prompt'), {
    inputType: 'password',
    inputPlaceholder: this.$t('Please enter the password'),
    confirmButtonText: this.$t('Yes'),
    cancelButtonText: this.$t('No'),
    type: 'warning'
  }).then(({ value }) => {
    if (this.password === value) {
      // 密码正确,执行相应操作
      this.messagepack.data = this.record.xyData.map(item => parseInt(item.value)); // 转换为整数数组
      //console.log(this.messagepack);
      socket?.send(JSON.stringify(this.messagepack));
    } else {
      this.$message.success(this.$t('Password error')); // 密码错误
    }
  }).catch(() => {
    this.$message({
      type: 'info',
      message: this.$t('Operation canceled')
    });
  });
    }
    },
    //语言转换
    replaceChineseWithEnglish () {
      const translation = this.$t('langActions');
      this.record.xyData = this.record.xyData.map(item => { return { name: translation[item.name] || item.name, value: item.value }; });
      console.log(translation);
    },
  }
@@ -237,6 +236,7 @@
.el-input__inner {
  border: none;
}
.blue-button {
  background-color: skyblue;
}