wu
2023-11-30 0ece3ba8c92df0438af52b8de6b9225d8ada4103
CanadaMes-ui/src/views/Electrical/Action.vue
@@ -2,12 +2,21 @@
  <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/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/Servomanual" tag="el-button" type="text" active-class="blue-button">{{
        $t('ServoManual')
      }}</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 +26,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,73 +37,21 @@
</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: [
          'D01 VFD conveyor',
          'D02 VFD conveyor',
          'D03 VFD conveyor',
          'D04 VFD conveyor',
          'D05 VFD conveyor',
          'D06 VFD conveyor',
          'A01 VFD conveyor',
          'A02 VFD conveyor',
          'B01 VFD conveyor',
          'B02 VFD conveyor',
          'A01 SERVE TURN JOG+',
          'A02 SERVE TURN JOG-',
          'A01 SERVE TRAVEL JOG+',
          'A02 SERVE TRAVEL JOG-',
          'B01 SERVE TRAVEL JOG+',
          'B02 SERVE TRAVEL JOG-',
          'A01 SERVE TURN POS',
          'A02 SERVE TURN POS',
          'A01 SERVE TRAVEL POS',
          'A02 SERVE TRAVEL POS',
          'B01 SERVE TRAVEL POS',
          'B02 SERVE TRAVEL POS',
          'B01 YV TURN',
          'B01 YV UP DOWN',
          'B02 YV TURN',
          'B02 YV UP DOWN',
        ],
        params: [],
        xyData: [
          { name: 'D01 VFD conveyor', value: "0" },
          { name: 'D02 VFD conveyor', value: "0" },
          { name: 'D03 VFD conveyor', value: "0" },
          { name: 'D04 VFD conveyor', value: "0" },
          { name: 'D05 VFD conveyor', value: "0" },
          { name: 'D06 VFD conveyor', value: "0" },
          { name: 'A01 VFD conveyor', value: "0" },
          { name: 'A02 VFD conveyor', value: "0" },
          { name: 'B01 VFD conveyor', value: "0" },
          { name: 'B02 VFD conveyor', value: "0" },
          { name: 'A01 SERVE TURN JOG+', value: "0" },
          { name: 'A02 SERVE TURN JOG-', value: "0" },
          { name: 'A01 SERVE TRAVEL JOG+', value: "0" },
          { name: 'A02 SERVE TRAVEL JOG-', value: "0" },
          { name: 'B01 SERVE TRAVEL JOG+', value: "0" },
          { name: 'B02 SERVE TRAVEL JOG-', value: "0" },
          { name: 'A01 SERVE TURN POS', value: "0" },
          { name: 'A02 SERVE TURN POS', value: "0" },
          { name: 'A01 SERVE TRAVEL POS', value: "0" },
          { name: 'A02 SERVE TRAVEL POS', value: "0" },
          { name: 'B01 SERVE TRAVEL POS', value: "0" },
          { name: 'B02 SERVE TRAVEL POS', value: "0" },
          { name: 'B01 YV TURN', value: "0" },
          { name: 'B01 YV UP DOWN', value: "0" },
          { name: 'B02 YV TURN', value: "0" },
          { name: 'B02 YV UP DOWN', value: "0" },
        ]
        ,
      },
@@ -110,13 +69,12 @@
  },
  created () {
    this.init();
    this.isClickable = false;
  },
  methods: {
    setActiveButton(buttonName) {
    this.activeButton = buttonName;
  },
    setActiveButton (buttonName) {
      this.activeButton = buttonName;
    },
    init () {
      let viewname = "action";
@@ -138,24 +96,40 @@
        };
        //  浏览器端收消息,获得从服务端发送过来的文本消息
        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];
          // console.log(obj.params);
          if (obj.params) {
          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() };
            this.record.xyData = this.jsonData.action;
            for (let a = 0; a < this.record.xyData.length; a++) {
              if (this.record.params[0][a]) {
                this.record.xyData[a].value = this.record.params[0][a].toString();
              }
            }
            this.record.xyData = this.jsonData.action.filter(item => {
              return item.state != 0;
            }
            );
            const language = this.$i18n.locale;
            if (language === 'en-US') {
              this.replaceChineseWithEnglish();
            } else {
              this.record.xyData[a].value = this.record.params[0][a].toString();
              this.localizedRoles = [...this.record.xyData];
            }
          }
        }
          // console.log(this.record.xyData);
          this.$forceUpdate();
          this.replaceChineseWithEnglish();
        };
        //关闭事件
@@ -170,37 +144,16 @@
    },
    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);
      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 }; });
    },
  }
@@ -237,6 +190,7 @@
.el-input__inner {
  border: none;
}
.blue-button {
  background-color: skyblue;
}