kuangshan-project/src/views/tongfeng/zaoquan/tongfeng_dongjin.vue

<template>
  <div>
    <!-- <topimg></topimg> -->
    <div class="img">
    <img src="../../../assets/images/tongfeng.png" alt="">
    <h1>东井通风系统</h1>
    <p>{{   nowTime }}</p>
  </div>
    <!-- <plcdata></plcdata> -->
    <div>
      <div class="content" v-for="item in data">
        <div class="top">
          <div class="left">{{ item.name }}</div>
          <div class="right" v-if="item.run!=0" style="background-color: #27ae60;">运行</div>
          <div class="right" v-else style="background-color: red;">停止</div>
        </div>
        <div class="data">
          <ul>
            <li v-for="list in item.list" v-if="list.tag_value!=0" v-show="show">
              
              <div class="title">{{ list.tag_name }}</div>
              <div class="num">
                {{
                  list.tag_value.substring(0, list.tag_value.indexOf(".") + 3)
                }}
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import topimg from "@/components/zdh/topimg.vue";
export default {
  name: "tongfeng_dongjin",
  // components: { topimg },
  data() {
    return {
      data: "",
      show:true,
       nowTime:''
    };
  },
  methods: {
    async getData() {
      const { data: res } = await this.$http.post(
        "http://nmjt.nxjiewei.com:8011/api/automate/mine_ventilate/get_list",
        { mine_id: "zaoquan", type: 1 }
      );
      console.log(res.content.data);
      this.data = res.content.data;
    },
     getNowFormatDate() {
      var now = new Date();
      var year = now.getFullYear(); //获取年份
      var month = now.getMonth(); //获取月份
      var date = now.getDate(); //获取日期
      var day = now.getDay(); //获取星期
      var hour = now.getHours(); //获取小时
      var minute = now.getMinutes(); //获取分钟
      // if(minute.length<=1){
      //   minute="0"+minute;
      // }
      // console.log(minute.length);
      var seconds =
        now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds(); //获取秒
      month = month + 1;
      var arr_week = new Array(
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      );
      var week = arr_week[day];
      var time =
        year +
        "年" +
        month +
        "月" +
        date +
        "日 " +
        week +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        seconds;
      this.nowTime= time;
    },
  },
  mounted() {
    this.getData();
    this.infos = setInterval(this.getData, 5000);
    this.date=setInterval(this.getNowFormatDate, 1000);
  },
  beforeDestroy() {
    clearInterval(this.infos);
     clearInterval(this.date);
  },
};
</script>

<style  scoped>
.img{
    height: 180px;
    position: relative;
  }
  img{
    width: 100%;
    height: 100%;
  }
  h1{
    color: #FFFFFF;
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translate(-50%);
    text-shadow: 5px 5px 4px #0E0E0E;
    font-size: 30px;
    margin: 0;
  }
  p{
    position: absolute;
    right: 5px;
    /* left: 10px; */
    color: #FFFFFF;
    bottom: 0px;
    margin: 0px;
  }
.content {
  font-weight: 400;
  background-color: #ffffff;
  box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.14);
  border-radius: 5px;
  margin: 5px;
  background-color: #2873ff;
}
.top {
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* padding: 10px; */
  height: 33px;
  margin-left: 5px;
  border-bottom: 1px #f3f3f3 solid;
  padding: 10px;
}
/* span{
        background-color: #2873FF;
        width: 9px;
        height: 33px;

    } */
.left {
  height: 33px;
  line-height: 33px;
  /* margin-left: 10px; */
}
.right {
  width: 33px;
  height: 20px;
  border-radius: 2px;
  color: #ffffff;
  text-align: center;
  font-size: 10px;
  line-height: 14px;
  font-weight: 400;
  padding-top: 4px;
}
.data {
  background-color: #ffffff;
  padding: 0 10px;
}
/* ul{
        
    } */
li {
  /* margin-right: 5%; */
  /* float: left; */
  height: 39px;
  /* line-height: 39px; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0px;
  border-bottom: 1px #f3f3f3 solid;
}
li div {
  height: 17px;
  padding-bottom: 3px;
}
.num {
   padding-top: 3px;
  width: 80px;
  text-align: center;
  background-color: #2873ff;
  color: #fff;
  /* padding-bottom: 3px; */
 
}
</style>