修改交互状态页面

wuyouming666

2024-01-17 0613a5b982c6521560ea17eda7c07bb97e6ec5e9

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

@@ -2,24 +2,32 @@
  <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">设备管理</el-button>

      <router-link to="/Electrical/Parameter" tag="el-button" type="text">Parameter</router-link>

      <router-link to="/Electrical/Action" tag="el-button" type="text">Action</router-link>

      <router-link to="/Electrical/Sign" tag="el-button" type="text">Sign</router-link>

      <router-link to="/Electrical/State" tag="el-button" type="text">State</router-link>

      <router-link to="/Electrical/alarm" tag="el-button" type="text">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>

 <router-link to="/Electrical/Servomanual" tag="el-button" type="text" active-class="blue-button">{{ $t('Parameter')

        }}</router-link>



    </el-breadcrumb>

    <div>Sign</div>

    <div>{{ $t('Sign') }}</div>

    <div style="padding-right: 30px;display: flex;flex-wrap: wrap;" class="neir">

      <div class="kuai_sb" v-for="item in record.xyData" :key="item.name">

        <el-col class="deng" :class="getStatusClass(item.value, item.name)">

          <!-- <el-input v-model="item.zhuangtai" style="width: 280px;display: none;"

            class="in_mc"></el-input>-->

        </el-col>

        <el-input v-model="item.name" style="width: 280px;" class="in_mc"></el-input>

        <el-col class="deng" :class="getStatusClass(item.value)"></el-col>

        <span  style="width: 100%;" class="in_mc">{{

                item.unit

              }}</span>

        <span  style="width: 100%;" class="in_mc">{{

                item.name

              }}</span>



        <!-- <el-switch v-model="item.zhuangtai" active-color="#13ce66" active-value="1" inactive-value="2"></el-switch> -->

      </div>



    </div>

@@ -28,56 +36,20 @@
</template>



<script >

import LanguageMixin from '../../lang/LanguageMixin'

import data from '../../configuration/Sign'

let socket;

export default {

  name: "Sign",

  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, 0, 0, 0, 0, 0, 0,],

        xyData: [

          { name: 'D01.SR dec', value: 0 },

          { name: "D01.SR in pos", value: 0 },

          { name: "D02.SR dec", value: 0 },

          { name: "D02.SR in pos", value: 0 },

          { name: "D03.SR dec", value: 0 },

          { name: "D03.SR in pos", value: 0 },

        ],

        canshu: [

          'D01.SR dec',

          'D01.SR in pos',

          'D02.SR dec',

          'D02.SR in pos',

          'D03.SR into',

          'D03.SR dec',

          'D03.SR in pos',

          'D04.SR dec',

          'D04.SR in pos',

          'D05.SR dec',

          'D05.SR in pos',

          'D06.SR dec',

          'D06.SR in pos',

          'B01.SR out dec',

          'B01.SR out in pos',

          'B01.SR in dec',

          'B01.SR in in pos',

          'B01.SR turn on',

          'B01.SR turn off',

          'B01.SR up',

          'B01.SR down',

          'B02.SR out dec',

          'B02.SR out in pos',

          'B02.SR in dec',

          'B02.SR in in pos',

          'B02.SR turn on',

          'B02.SR turn off',

          'B02.SR up',

          'B02.SR down',

          'LED.red',

          'LED.green',

          'LED.yellow',

        ],



        //定义数组

        params: [],

        xyData: [],

      },





@@ -92,30 +64,42 @@
    }

  },

  created () {

    this.init();

    
    //this.showdata();

  },

  activated(){

    this.init();

    this.record.xyData = this.jsonData.sign;

    const language = this.$i18n.locale;

    if (language === 'zh-CN') {

            this.replaceChineseWithEnglish();

          } else {

            this.localizedRoles = [...this.record.xyData];

          }

 },

  methods: {

    getStatusClass (zhuangtai, mc) {

    showdata () {

      console.log(1111);

      console.log(this.jsonData.sign[0].name);

      // console.log(this.record.xyData);



      if (mc === "LED.red" && zhuangtai === 0) {

        return "red";

      }

      if (mc === "LED.green" && zhuangtai === 0) {

        return "green";

      }

      if (mc === "LED.yellow" && zhuangtai === 0) {

        return "yellow"

      }

    },



    onButtonClick () {

      this.isButtonClicked = true; // 将按钮颜色设置为蓝色

      setTimeout(() => {

        this.isButtonClicked = false; // 重置按钮颜色

      }, 500); // 这里的500毫秒是根据您希望按钮颜色持续多长时间来定的，可以根据需求进行调整

    },

    //根据读取PLC的值，根据名称改变颜色

    getStatusClass (zhuangtai) {

      // console.log(this.record.xyData);

      if (zhuangtai === 0) {

        return "op";

      }

      else {

        return "dow";

      }











    },

    init () {

@@ -126,7 +110,7 @@
      } else {

        //console.log("您的浏览器支持WebSocket");



        let socketUrl = "ws://" + "localhost:8888" + "/springboot-vue3/api/talk/" + viewname;

        let socketUrl = "ws://" + this.$t('ip')+":8888" + "/springboot-vue3/api/talk/" + viewname;

        if (socket != null) {

          socket.close();

          socket = null;

@@ -142,14 +126,30 @@


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

          let obj = JSON.parse(msg.data);

          //this.$set(this.record.params, 0, obj.params[0]);

          this.record.params[0] = obj.sig[0];

          for (let a = 0; a <= this.record.params.length - 1; a++) {

            //this.record.xyData[a] = [this.record.params[0][a], this.record.canshu[a]];

            this.record.xyData[a] = { name: this.record.canshu[a], value: this.record.params[0][a] };



          this.record.xyData = this.jsonData.sign;

          console.log(this.jsonData.sign)

          for (let a = 0; a < this.record.xyData.length; a++) {

            this.record.xyData[a].value = this.record.params[0][a];



          }



          this.record.xyData = this.jsonData.sign.filter(item => {

            return item.state != 0;

          }



          );





          const language = this.$i18n.locale;

          if (language === 'zh-CN') {

            this.replaceChineseWithEnglish();

          } else {

            this.localizedRoles = [...this.record.xyData];

          }

          this.$forceUpdate();

          this.replaceChineseWithEnglish();



        }.bind(this);

        //关闭事件

@@ -162,9 +162,16 @@
        }

      }

    },

    send () {

      this.messagepack.data = { taskname: "前端到后台" };

      socket?.send(JSON.stringify(this.messagepack));  // 将组装好的json发送给服务端，由服务端进行转发

    //语言转换

    replaceChineseWithEnglish () {



      const translation = this.$t('Signlang');



      if (translation != null) {

        this.record.xyData = this.record.xyData.map(item => { return { name: translation[item.name] || item.name, value: item.value,unit:item.unit }; });

        //console.log(translation);

      }



    }

  }



@@ -176,16 +183,21 @@


</script>



<style>

<style >

* {

  margin: 0;

  padding: 0;

}



/* .neir {

.app {

  height: 100%;

}



.neir {

  /* height: 580px; */

  height: 90%;

  overflow-y: auto;

} */

}



.el-input__inner {

  text-align: center;

@@ -193,9 +205,9 @@
}



.kuai_sb {

  text-align: center;

  width: 25%;

  margin-bottom: 15px;

  text-align: left;

  width:18%;

  margin-bottom: 5px;

}



.el-input {

@@ -208,19 +220,17 @@
}



.in_mc {

  .el-input__inner {

    border: none;

  }

  font-size: 13px;

}



.deng {

  margin-left: 40%;

  margin-left: 1%;

  display: inline-block;

  background: #A0A0A0;

  border: 0.1875em solid white;

  border-radius: 50%;

  height: 5em;

  width: 5em;

  height: 2em;

  width: 2em;

  box-shadow: 0.375em 0.375em 0 0 rgba(214, 214, 214, 0.125);

}



@@ -236,11 +246,19 @@
  background-color: red;

}



.geeen {

.green {

  background-color: #00ff22;

}



.yellow {

  background-color: yellow;

}



.blue-button {

  background-color: skyblue;

}



.dark-theme {

  display: none;

}

</style>