Merge branch 'master' of http://10.153.19.25:10101/r/CanadaMes

wu

2023-11-30 0ece3ba8c92df0438af52b8de6b9225d8ada4103

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

@@ -1,39 +1,197 @@
<template>

  <div class="app">

    <!--面包屑导航区域-->

    <el-breadcrumb separator-class="el-icon-arrow-right" class="el-breadcrumb">

      <el-breadcrumb-item :to="{ path: '/home' }">{{ $t('langHome') }}</el-breadcrumb-item>

      <el-breadcrumb-item>设备管理</el-breadcrumb-item>

      <el-breadcrumb-item :to="{ path: '/Electrical/Parameter' }">参数</el-breadcrumb-item>

      <el-breadcrumb-item :to="{ path: '/Electrical/Action' }">开关控制</el-breadcrumb-item>

      <el-breadcrumb-item :to="{ path: '/Electrical/Sign' }">IO状态</el-breadcrumb-item>

      <el-breadcrumb-item :to="{ path: '/Electrical/State' }">报警信息</el-breadcrumb-item>

    </el-breadcrumb>

    <div>开关控制</div>

  </div>

</template>



<script>





export default {

  name: "Action",



}



</script>



<style lang="less" scoped>

.el-table {

  margin-top: 15px;

  font-size: 12px;

}



.el-pagination {

  margin-top: 15px;

}



.app .el-card {

  width: 99%;

}

</style>

<template>
  <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/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">
        <el-input v-model="item.name" style="width: 240px;" class="in_mc"></el-input>
        <el-switch v-model="item.value" active-value="0" inactive-value="1"></el-switch>
      </div> -->

      <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>
      </div>


    </el-form>


  </div>
</template>
 
<script >
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: [],

        xyData: [

        ]
        ,
      },


      messagepack: {
        data: { taskname: "" }
      },
      queryInfo: {
        data: "1",
        pageSize: 10
      },

    }
  },
  created () {
    this.init();
  },
  methods: {

    setActiveButton (buttonName) {
      this.activeButton = buttonName;
    },
    init () {
      let viewname = "action";

      if (typeof (WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
      } else {
        //console.log("您的浏览器支持WebSocket");

        let socketUrl = "ws://" + "localhost:8888" + "/springboot-vue3/api/talk/" + viewname;
        if (socket != null) {
          socket.close();
          socket = null;
        }
        // 开启一个websocket服务
        socket = new WebSocket(socketUrl);
        //打开事件
        socket.onopen = function () {
          console.log("websocket已打开");
        };
        //  浏览器端收消息，获得从服务端发送过来的文本消息
        socket.onmessage = (msg) => {
          //console.log("收到数据====" + msg.data);
          if (!msg.data) {
            return; // 如果收到空数据，则直接返回，不执行后续逻辑
          }

          let obj = JSON.parse(msg.data);
          this.record.params[0] = obj.params[0];
          // console.log(obj.params);
          if (obj.params) {

            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.localizedRoles = [...this.record.xyData];
            }
          }
          this.$forceUpdate();
          this.replaceChineseWithEnglish();
        };

        //关闭事件
        socket.onclose = function () {
          console.log("websocket已关闭");
        };
        //发生了错误事件
        socket.onerror = function () {
          console.log("websocket发生了错误");
        }
      }

    },
    send () {
      this.messagepack.data = this.record.xyData.map(item => parseInt(item.value)); // 转换为整数数组
      console.log(this.messagepack);
      socket?.send(JSON.stringify(this.messagepack));
    },
    //语言转换
    replaceChineseWithEnglish () {
      const translation = this.$t('langActions');
      this.record.xyData = this.record.xyData.map(item => { return { name: translation[item.name] || item.name, value: item.value }; });

    },

  }

}





</script>
 
 
<style scoped>
.kuai_div {
  /* width: 30%; */
  margin-bottom: 30px;
}

.el-input {
  border: none;





}

.el-input__inner {
  border: 1 solid black;
}

.in_mc {}

.el-input__inner {
  border: none;
}

.blue-button {
  background-color: skyblue;
}
</style>