枣泉通风

src/router/index.js

@@ -49,14 +49,20 @@ const routes = [
   {
     path:'/tongfeng/zaoquan/tongfeng_xijin',
     name:'tongfeng_xijin',
-    component:()=>import('../views/tongfeng/zaoquan/tongfeng_xijin.vue')
+    component:()=>import('../views/tongfeng/zaoquan/tongfeng_xijin.vue'),
+    meta:{
+      title:'西井通风'
+    }
     },
 
     //枣泉东井tongfeng
   {
     path:'/tongfeng/zaoquan/tongfeng_dongjin',
     name:'tongfeng_dongjin',
-    component:()=>import('../views/tongfeng/zaoquan/tongfeng_dongjin.vue')
+    component:()=>import('../views/tongfeng/zaoquan/tongfeng_dongjin.vue'),
+    meta:{
+      title:'东井通风'
+    }
     },
 
 

src/views/tongfeng/zaoquan/tongfeng_dongjin.vue

@@ -1,16 +1,23 @@
 <template>
   <div>
-    <topimg></topimg>
+    <!-- <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.run.tag_name }}</div>
-          <div class="right">运行</div>
+          <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">
+            <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">
                 {{
@@ -26,13 +33,15 @@
 </template>
 
 <script>
-import topimg from "@/components/zdh/topimg.vue";
+// import topimg from "@/components/zdh/topimg.vue";
 export default {
-  name: "tongfeng_xijin",
-  components: { topimg },
+  name: "tongfeng_dongjin",
+  // components: { topimg },
   data() {
     return {
       data: "",
+      show:true,
+       nowTime:''
     };
   },
   methods: {
@@ -44,18 +53,87 @@ export default {
       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;
@@ -89,7 +167,6 @@ export default {
 .right {
   width: 33px;
   height: 20px;
-  background-color: #27ae60;
   border-radius: 2px;
   color: #ffffff;
   text-align: center;
@@ -121,9 +198,12 @@ li div {
   padding-bottom: 3px;
 }
 .num {
+   padding-top: 3px;
   width: 80px;
   text-align: center;
   background-color: #2873ff;
   color: #fff;
+  /* padding-bottom: 3px; */
+ 
 }
 </style>

src/views/tongfeng/zaoquan/tongfeng_xijin.vue

@@ -1,16 +1,23 @@
 <template>
   <div>
-    <topimg></topimg>
+    <!-- <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.run.tag_name }}</div>
-          <div class="right">运行</div>
+          <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">
+            <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">
                 {{
@@ -26,13 +33,15 @@
 </template>
 
 <script>
-import topimg from "@/components/zdh/topimg.vue";
+// import topimg from "@/components/zdh/topimg.vue";
 export default {
   name: "tongfeng_xijin",
-  components: { topimg },
+  // components: { topimg },
   data() {
     return {
       data: "",
+      show:true,
+       nowTime:''
     };
   },
   methods: {
@@ -44,18 +53,87 @@ export default {
       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;
@@ -89,7 +167,7 @@ export default {
 .right {
   width: 33px;
   height: 20px;
-  background-color: #27ae60;
+  /* background-color: #27ae60; */
   border-radius: 2px;
   color: #ffffff;
   text-align: center;
@@ -121,6 +199,7 @@ li div {
   padding-bottom: 3px;
 }
 .num {
+   padding-top: 3px;
   width: 80px;
   text-align: center;
   background-color: #2873ff;