矿井水系统

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
+    "dayjs": "^1.10.6",
     "vant": "^2.12.22",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",

src/components/Header/Header.vue

@@ -4,36 +4,13 @@
         <!-- 例如当前模块多个页面需要，我们可以把这个模块封装出来，达到组件复用的效果
              可以按需载入，也可以全局载入，按照项目需求来完成
          -->
-        <div v-for="(item,index) in header" :key="index" @click="gethome">
-            <h1 class="h1">{{item.value}}</h1>
-        </div>
+        <h1>123</h1>
     </div>
 </template>
 
 <script>
     export default {
-        data(){
-            return{
-                header:[]
-            }
-        },
-        methods:{
-            //获取头部标题
-            getheader(){
-                this.$http.get("/config/values?keys=mallName").then(res=>{
-                    // console.log(res.data.data);
-                    this.header=res.data.data
-                })
-            },
-            //点击事件，当处于其他页面时返回首页
-            gethome(){
-                this.$router.push("/home/homepage" ?"/home/homepage" : "");
-            }
-            
-        },
-        mounted(){
-            this.getheader()
-        }
+        
     }
 </script>
 

src/router/index.js

@@ -41,10 +41,16 @@ const routes = [
     name:'leader-mailbox-reply',
     component:()=>import('../views/xixuanzhongxin/leader-mailbox/leader-mailbox-reply.vue')
   },
+  //洗选中心领导信箱领导回复
+  {
+    path:'/zaoquan/kuangjingshui/kuangjingshui',
+    name:'kuangjingshui',
+    component:()=>import('../views/zaoquan/kuangjingshui/kuangjingshui.vue'),
+  },
   //路由重定向
   {
     path:'/',
-    redirect:{"name":"leader-home"}
+    redirect:{"name":"kuangjingshui"}
   }
 ]
 

src/views/xixuanzhongxin/leader-mailbox/leader-home.vue

@@ -74,6 +74,7 @@ export default {
           }
         });
     },
+    
     //我的提交
     leader_home_list3() {
       this.$router.push(
@@ -90,7 +91,7 @@ export default {
     this.gettoken =getAllUrlParams(window.location.href).token;
     this.token = `Bearer ${this.gettoken}`; //获取token值
     sessionStorage.setItem("mytoken", this.token); //存入token值
-    this.show = Boolean(getAllUrlParams(window.location.href).tabber); //获取tabber
+    this.show = Boolean(getAllUrlParams(window.location.href).tabbar); //获取tabber
   },
 };
 </script>

src/views/zaoquan/kuangjingshui/kuangjingshui.vue

@@ -0,0 +1,292 @@
+<template>
+  <div>
+    <div v-if="show">
+      <van-nav-bar title="矿井水处理" left-arrow @click-left="onClickLeft" />
+    </div>
+    <div class="kjs">
+      <div class="kjs-header">
+        <img
+          src="../../../assets/images/zaoquan/kuangjingshui/头部.png"
+          alt=""
+        />
+      </div>
+      <div class="kjs-header-item">
+        <h2>矿井水处理系统</h2>
+      </div>
+      <div class="kjs-header-item1">
+        <p>{{ time | parsetime }}</p>
+      </div>
+    </div>
+    <div class="content">
+      <div class="kjs-content1">
+        <div class="kjs-content1-header">
+          <img
+            src="../../../assets/images/zaoquan/kuangjingshui/高密沉淀.png"
+          />
+          <p>高密沉淀</p>
+        </div>
+        <div>
+          <div>
+            <div class="kjs-content1-content">
+              <div class="kjs-content1-color"></div>
+              <p>矸石山调节池液位</p>
+            </div>
+            <div class="kjs-content1-content1">
+              <p>矸石山调节池A</p>
+              <p class="kjs-content1-content1-p">0.74</p>
+              <span>m</span>
+            </div>
+            <div class="kjs-content1-content1">
+              <p>矸石山调节池B</p>
+              <p class="kjs-content1-content1-p">0.74</p>
+              <span>m</span>
+            </div>
+          </div>
+          <div>
+            <div class="kjs-content1-content">
+              <div class="kjs-content1-color"></div>
+              <p>外排水池液位</p>
+            </div>
+            <div class="kjs-content1-content1">
+              <p>外排水池A液位</p>
+              <p class="kjs-content1-content1-p">1.98</p>
+              <span>m</span>
+            </div>
+            <div class="kjs-content1-content1">
+              <p>外排水池B液位</p>
+              <p class="kjs-content1-content1-p">1.98</p>
+              <span>m</span>
+            </div>
+          </div>
+        </div>
+        <div class="kjs-footer"></div>
+      </div>
+      <div class="kjs-content1">
+        <div class="kjs-content1-header">
+          <img src="../../../assets/images/zaoquan/kuangjingshui/快滤池.png" />
+          <p>快滤池</p>
+        </div>
+        <div>
+          <div class="kjs-content1-content2">
+            <p>滤池出水流量</p>
+            <div>
+              <p class="kjs-content1-content1-p">0.8333</p>
+            </div>
+            <span>m3/h</span>
+          </div>
+          <div class="kjs-content1-content2">
+            <p>滤池出水流量累积</p>
+            <div>
+              <p class="kjs-content1-content1-p">933759</p>
+            </div>
+            <span>m3</span>
+          </div>
+          <div class="kjs-content1-content2">
+            <p>矿井水进水瞬时流量</p>
+            <div>
+              <p class="kjs-content1-content1-p">548.901</p>
+            </div>
+            <span>m3/h</span>
+          </div>
+          <div class="kjs-content1-content2">
+            <p>矿井水进水流量累积</p>
+            <div>
+              <p class="kjs-content1-content1-p">3274888</p>
+            </div>
+            <span>m3</span>
+          </div>
+        </div>
+        <div class="kjs-footer"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+//时间戳
+var getTime = function () {
+  var date = new Date();
+  var year = date.getFullYear();
+  var month =
+    date.getMonth() + 1 < 10
+      ? "0" + (date.getMonth() + 1)
+      : date.getMonth() + 1;
+  var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
+  var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
+  var minutes =
+    date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
+  var seconds =
+    date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
+  var week = date.getDay();
+  var weeks = ["日", "一", "二", "三", "四", "五", "六"];
+  var getWeek = "星期" + weeks[week];
+  return (
+    year +
+    "年" +
+    month +
+    "月" +
+    day +
+    "日" +
+    hour +
+    ":" +
+    minutes +
+    ":" +
+    seconds +
+    getWeek
+  );
+};
+import { getAllUrlParams } from "../../xixuanzhongxin/plugins/admin/url-encapsulation.js"; //获取url上的token和tabber
+export default {
+  data() {
+    return {
+      time: "", //时间戳时间
+      token: sessionStorage.getItem("mytoken")
+        ? sessionStorage.getItem("mytoken")
+        : "", //token值保存在本地，有的话取值，没有为空
+      show: false, //tabber是否显示
+    };
+  },
+  filters: {
+    parsetime: getTime, //过滤动态显示时间
+  },
+  methods: {
+    refreshTime() {
+      var newtime = getTime();
+      this.time = newtime;
+    },
+    //tabber返回按钮
+    onClickLeft() {
+      window.history.back();
+    },
+  },
+  mounted() {
+    document.body.style.backgroundColor = "#39f"; //背景色
+    this.timer = setInterval(this.refreshTime, 1000); //每隔一秒更新时间
+    this.gettoken = getAllUrlParams(window.location.href).token; //获取到url上的token
+    this.token = `Bearer ${this.gettoken}`; //获取token值
+    sessionStorage.setItem("mytoken", this.token); //存入token值
+    this.show = Boolean(getAllUrlParams(window.location.href).tabbar); //获取tabber
+  },
+  beforeDestroy() {
+    clearInterval(this.timer); //销毁阶段清除定时器
+  },
+};
+</script>
+
+<style scoped>
+.van-nav-bar {
+  background: #39f;
+}
+>>> .van-nav-bar__title {
+  color: #fff;
+}
+>>> .van-nav-bar .van-icon {
+  color: #fff;
+}
+[class*="van-hairline"]:after {
+  border: none;
+}
+.kjs {
+  width: 100%;
+  height: 180px;
+}
+.kjs-header {
+  width: 100%;
+  height: 80px;
+  z-index: -1;
+}
+.kjs-header > img {
+  width: 100%;
+  height: 180px;
+}
+.kjs-header-item {
+  text-align: center;
+}
+.kjs-header-item > h2 {
+  color: #fff;
+}
+.kjs-header-item1 > p {
+  padding-left: 35%;
+  padding-top: 8%;
+  color: #fff;
+}
+.kjs-content1 {
+  width: 95%;
+  margin: 3% auto;
+  background: #fff;
+  border-radius: 10px;
+}
+.kjs-content1-header {
+  text-align: center;
+  border-bottom: 1px solid #f0f0f0;
+  width: 95%;
+  padding-bottom: 5px;
+  margin: 0 auto;
+  position: relative;
+}
+.kjs-content1-header > img {
+  width: 40px;
+  height: 40px;
+  position: absolute;
+  top: 9%;
+  left: 27%;
+}
+.kjs-content1-header > p {
+  line-height: 48px;
+  margin-left: 5%;
+}
+.kjs-content1-content {
+  display: flex;
+  justify-content: left;
+  margin-top: 4%;
+}
+.kjs-content1-color {
+  width: 4px;
+  height: 30px;
+  background: #39f;
+  margin-left: 2%;
+}
+.kjs-content1-content > p {
+  line-height: 30px;
+  margin-left: 2%;
+}
+.kjs-content1-content1 {
+  display: flex;
+  justify-content: space-around;
+  border-bottom: 1px solid #f0f0f0;
+  width: 95%;
+  padding-bottom: 4%;
+  margin: 5% auto 0;
+}
+.kjs-content1-content1-p {
+  width: 90px;
+  background: #8adaff;
+  text-align: center;
+  line-height: 21px;
+}
+.kjs-content1-content2 {
+  display: flex;
+  justify-content: space-around;
+  border-bottom: 1px solid #f0f0f0;
+  width: 95%;
+  padding-bottom: 4%;
+  margin: 5% auto 0;
+}
+.kjs-content1-content2 > p {
+  width: 48%;
+  text-align: center;
+}
+.kjs-content1-content2 > div {
+  width: 32%;
+}
+.kjs-content1-content2 > div > p {
+  margin: 0 auto;
+}
+.kjs-content1-content2 > span {
+  width: 20%;
+  text-align: center;
+}
+.kjs-footer {
+  height: 20px;
+}
+</style>

src/views/zaoquan/tongfen/tongfen.vue

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        <Header></Header>
+        <h1>通风</h1>
+    </div>
+</template>
+
+<script>
+    import Header from "../../../components/Header/Header.vue"
+    export default {
+        components:{
+            Header
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

yarn.lock

@@ -2910,6 +2910,11 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+dayjs@^1.10.6:
+  version "1.10.6"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.6.tgz#288b2aa82f2d8418a6c9d4df5898c0737ad02a63"
+  integrity sha512-AztC/IOW4L1Q41A86phW5Thhcrco3xuAA+YX/BLpLWWjRcTj5TOt/QImBLmCKlrF7u7k47arTnOyL6GnbG8Hvw==
+
 de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npm.taobao.org/de-indent/download/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"