拼图

src/components/zdh/plcdata.vue

@@ -1,121 +0,0 @@
-<template>
-  <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>
-      <div class="data">
-        <ul>
-          <li v-for="list in item.list">
-            <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>
-</template>
-
-<script>
-export default {
-  name: "plcdata",
-  data() {
-    return {
-      data: "",
-    };
-  },
-  methods: {
-    async getData() {
-      const { data: res } = await this.$http.post(
-        "http://nmjt.nxjiewei.com:8011/api/automate/mine_ventilate/get_list",
-        { mine_id: "zaoquan" }
-      );
-      console.log(res.content.data);
-      this.data = res.content.data;
-    },
-  },
-  mounted() {
-    this.getData();
-    this.infos = setInterval(this.getData, 5000);
-  },
-  beforeDestroy() {
-    clearInterval(this.infos);
-  },
-};
-</script>
-
-<style scoped>
-.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;
-  background-color: #27ae60;
-  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 {
-  width: 80px;
-  text-align: center;
-  background-color: #2873ff;
-  color: #fff;
-}
-</style>

src/main.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import './assets/css/global.css'
 import "./plugins/axios.js"
 // import axios from "axios"
 //区别开发环境和测试环境

src/router/index.js

@@ -41,6 +41,32 @@ const routes = [
     name:'leader-mailbox-reply',
     component:()=>import('../views/xixuanzhongxin/leader-mailbox/leader-mailbox-reply.vue')
   },
+
+
+
+
+  //枣泉西井tongfeng
+  {
+    path:'/tongfeng/zaoquan/tongfeng_xijin',
+    name:'tongfeng_xijin',
+    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'),
+    meta:{
+      title:'东井通风'
+    }
+    },
+
+
+
   //枣泉矿井水系统
   {
     path:'/zaoquan/kuangjingshui/kuangjingshui',

src/views/tongfeng/zaoquan/tongfeng_dongjin.vue

@@ -0,0 +1,251 @@
+<template>
+  <div>
+
+    <!-- <div class="top_title">
+        <div class="topleft" @click-left="onClickLeft" ><</div>
+        <div class="toptitle">东井通风系统</div>
+    </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;
+    },
+    // onClickLeft() {
+    //   // api.sendEvent({name:"closeWindow"})
+    //   window.close()
+    // },
+     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>
+.van-nav-bar {
+  background: #39f;
+  color: #FFFFFF;
+}
+ /* .van-nav-bar__title {
+  color: #fff;
+} */
+ .van-nav-bar .van-icon {
+  color: #fff;
+}
+.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: 63px;
+  height: 20px;
+  border-radius: 2px;
+  color: #ffffff;
+  text-align: center;
+  font-size: 14px;
+  line-height: 14px;
+  font-weight: 400;
+  padding-top: 6px;
+}
+.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; */
+ 
+}
+.top_title{
+  padding-top: 25px;
+  background-color: #009fe8;
+  display: flex;
+}
+.toptitle{
+  width: 100%;
+  height: 50px;
+  line-height: 50px;
+  text-align: center;
+  color: #FFFFFF;
+  font-weight: bolder;
+  font-size: 20px;
+}
+.topleft{
+  position: relative;
+  left: 15px;
+  color: #FFFFFF;
+  line-height: 50px;
+  font-size: 24px;
+  
+}
+</style>

src/views/tongfeng/zaoquan/tongfeng_xijin.vue

@@ -1,22 +1,253 @@
 <template>
+  <div>
+    <!-- <topimg></topimg> -->
+    <!-- <div v-if="show">
+      <van-nav-bar title="西井通风系统" left-arrow @click-left="onClickLeft" />
+    </div> -->
+    <!-- <div class="top_title">
+        <div class="topleft" @click="onClickLeft" ><</div>
+        <div class="toptitle">西井通风系统</div>
+    </div> -->
+    
+    <div class="img">
+    <img src="../../../assets/images/tongfeng.png" alt="">
+    <h1>西井通风系统</h1>
+    <p>{{   nowTime }}</p>
+  </div>
+    <!-- <plcdata></plcdata> -->
     <div>
-            <topimg></topimg>
-            <plcdata></plcdata>
-             
+      <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 plcdata from '@/components/zdh/plcdata.vue';
-import topimg from '@/components/zdh/topimg.vue'
-    export default {
-         name:'tongfeng_xijin',
-  components: { topimg,plcdata },
-        
-         
-    }
+// import topimg from "@/components/zdh/topimg.vue";
+export default {
+  name: "tongfeng_xijin",
+  // 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: 2 }
+      );
+      console.log(res.content.data);
+      this.data = res.content.data;
+    },
+    // onClickLeft() {
+    //   // console.log('sssssssss');
+    //   //  api.sendEvent({name:"closeWindow"});
+    //    window.close()
+    // },
+     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>
 
+
+.van-nav-bar {
+  background: #39f;
+}
+ .van-nav-bar__title {
+  color: #fff;
+}
+ .van-nav-bar .van-icon {
+  color: #fff;
+}
+.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: 63px;
+  height: 20px;
+  /* background-color: #27ae60; */
+  border-radius: 2px;
+  color: #ffffff;
+  text-align: center;
+  font-size: 14px;
+  line-height: 14px;
+  font-weight: 400;
+  padding-top: 6px;
+}
+.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;
+}
+.top_title{
+  padding-top: 25px;
+  background-color: #009fe8;
+  display: flex;
+}
+.toptitle{
+  width: 100%;
+  height: 50px;
+  line-height: 50px;
+  text-align: center;
+  color: #FFFFFF;
+  font-weight: bolder;
+  font-size: 20px;
+}
+.topleft{
+  position: relative;
+  left: 15px;
+  color: #FFFFFF;
+  line-height: 50px;
+  font-size: 24px;
+}
 </style>

src/views/zaoquan/kuangjingshui/kuangjingshui.vue

@@ -211,10 +211,10 @@ export default {
 .van-nav-bar {
   background: #39f;
 }
->>> .van-nav-bar__title {
+ .van-nav-bar__title {
   color: #fff;
 }
->>> .van-nav-bar .van-icon {
+ .van-nav-bar .van-icon {
   color: #fff;
 }
 [class*="van-hairline"]:after {