<template>
  <div class="proddev proddev1">
    <div class="dev"></div>
    <div v-for="(item, i) in dl" class="key-list" :class="item.name" :key="i">
      <span> {{ item.value | numFilter }} (A)</span>
    </div>
    <div v-for="(item, i) in pl" class="key-list" :class="item.name" :key="i">
      <span> {{ item.value | numFilter }} (Hz)</span>
    </div>
  </div>
</template>
<script>
import { devdata } from "@/api/bigscreen/index.js";
export default {
  name: "proddev",
  components: {},
  props: ["air"],
  filters: {
    numFilter(value) {
      let realVal = "";
      if (!isNaN(value) && value !== "") {
        // 截取当前数据到小数点后两位,改变toFixed的值即可截取你想要的数值
        realVal = parseFloat(value).toFixed(2);
      } else {
        realVal = "--";
      }
      return realVal;
    },
  },

  data() {
    return {
      dl: [{ name: "aaa", value: 333 }],
      pl: [{ name: "aaa", value: 333 }],
      settime: 5000, //定时器时间
      hjjcList: { aaa: 0 },
    };
  },
  watch: {
    air(newValue, oldValue) {
      // console.log(newValue, "newValue");
      if (newValue !== 2) {
        this.destroytime();
      } else {
        this.settime = 5000;
        this.getProdDev();
      }
    },
  },
  created() {
    this.$nextTick(function () {});
  },
  mounted() {
    this.$nextTick(function () {
      // console.log(this.air, "air");
      this.getProdDev();
    });
  },
  methods: {
    //生产管理
    getProdDev() {
      let that = this;
      this.hjjcList = {};
      that.dl = [];
      that.pl = [];
      let tempTimer = this.settime;
      (function reqData() {
        clearTimeout(this.timeoutFalg);
        devdata()
          .then((res) => {
            // console.log(res.data, "我是生产管理");
            that.hjjcList = res.data;
            // console.log()
            for (let key in res.data) {
              console.log(key.substring(key.length - 2).toUpperCase());
              if (key.substring(key.length - 2).toUpperCase() == "DL") {
                that.dl.push({ name: key, value: res.data[key] });
              } else if (key.substring(key.length - 2).toUpperCase() == "PL") {
                that.pl.push({ name: key, value: res.data[key] });
              }
            }
            //   for(let i=1;i<res.data.length;i++){

            //  if(key.substring(key.length - 2).toUpperCase() == 'dl'){
            //   console.log()
            //  }
            //  }
          })
          .then(() => {
            this.timeoutFalg = setTimeout(reqData.bind(this), tempTimer);
          });
      }.bind(this)());
    },
    destroytime() {
      clearTimeout(this.timeoutFalg);
      this.settime = null;
    },
  },
  // beforeRouteLeave(to, form, next) {
  //   clearTimeout(this.timeoutFalg);
  //   next();
  // },
  destroyed() {
    clearTimeout(this.timeoutFalg);
  },
};
</script>
<style scoped lang="scss">
.proddev1 {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100vh;
  background: #00164d;
  .dev {
    width: 1725px;
    height: 893px;
    margin: 130px auto 0;

    background-image: url("~@/assets/images/proddev.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
  }
  .key-list {
    position: absolute;
    z-index: 1;
    color: #fff;
    font-size: 14px;
    display: none;
    span {
      color: #f8f010;
    }
  }

  .yjzcp1Cp1624Dl {
    left: 124px;
    top: 434px;
    display: block;
  }
  .yjzcp2Cp1624Dl {
    left: 501px;
    top: 434px;
    display: block;
  }

  // .zjhclp12Dl {
  //   left: 400px;
  //   top: 512px;
  //   display: block;
  // }
  // .zjhclp12Pl {
  //   left: 560px;
  //   top: 512px;
  //   display: block;
  // }

  // .zjhclp34Dl {
  //   left: 400px;
  //   top: 585px;
  //   display: block;
  // }
  // .zjhclp34Pl {
  //   left: 560px;
  //   top: 585px;
  //   display: block;
  // }
  // .zjhclp56Dl {
  //   left: 400px;
  //   top: 658px;
  //   display: block;
  // }
  // .zjhclp56Pl {
  //   left: 560px;
  //   top: 658px;
  //   display: block;
  // }
  // .zjhclp78Dl {
  //   left: 400px;
  //   top: 736px;
  //   display: block;
  // }
  // .zjhclp78Pl {
  //   left: 560px;
  //   top: 736px;
  //   display: block;
  // }

  .yjzdsYjsflcfjDl {
    left: 160px;
    top: 1024px;
    display: block;
  }
  .yjzdsYjsf1Dl {
    left: 228px;
    top: 1024px;
    display: block;
  }
  .yjzdsYjsf2Dl {
    left: 300px;
    top: 1024px;
    display: block;
  }

  .ejsfEjsflcfjDl {
    left: 818px;
    top: 1015px;
    display: block;
  }
  .ejsf1Dl {
    left: 894px;
    top: 1015px;
    display: block;
  }
  .ejsf2Dl {
    left: 964px;
    top: 1015px;
    display: block;
  }

  .yjzcp1Cp2226Dl {
    left: 410px;
    top: 777px;
    display: block;
  }
  .yjzcp2Cp2226Dl {
    left: 784px;
    top: 777px;
    display: block;
  }

  // .zsj11dl {
  //   left: 985px;
  //   top: 882px;
  //   display: block;
  // }
  // .zsj12dl {
  //   left: 985px;
  //   top: 968px;
  //   display: block;
  // }

  .mks1Dl {
    left: 1550px;
    top: 1015px;
    display: block;
  }
  .mks1Pl {
    left: 1624px;
    top: 1015px;
    display: block;
  }
}
</style>