wuyouming666
2023-09-19 ccc3df0d565f52a4da17584a7ace4d43960e1ef3
CanadaMes-ui/src/views/Electrical/Sign.vue
@@ -2,15 +2,16 @@
  <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>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)">
@@ -32,6 +33,7 @@
  mixins: [LanguageMixin],
  data () {
    return {
      activeButton: '',
      record: {
        //定义数组,并添加默认值
        params: [1, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0,
@@ -148,6 +150,12 @@
    this.init();
  },
  methods: {
    onButtonClick () {
      this.isButtonClicked = true; // 将按钮颜色设置为蓝色
      setTimeout(() => {
        this.isButtonClicked = false; // 重置按钮颜色
      }, 500); // 这里的500毫秒是根据您希望按钮颜色持续多长时间来定的,可以根据需求进行调整
    },
    //根据读取PLC的值,根据名称改变颜色
    getStatusClass (zhuangtai) {
      if (zhuangtai === 0) {
@@ -217,7 +225,7 @@
</script>
<style>
<style >
* {
  margin: 0;
  padding: 0;
@@ -289,4 +297,8 @@
.yellow {
  background-color: yellow;
}
.blue-button {
  background-color: skyblue;
}
</style>