11

src/apps/home/components/screen-tem2.vue

@@ -4,7 +4,7 @@
             <div class="header-box">
                 <img class="header-img" src="../images/screen-tem2/logo.png" alt="">
                 <img class="header-line" src="../images/screen-tem2/line.png" alt="">
-                <span>{{data.title}}</span>
+                <!-- <span>{{data.title}}</span> -->
 
                 <div class="header-right">
                     <img class="header-line" src="../images/screen-tem2/line.png" alt="">
@@ -14,6 +14,7 @@
                     <img class="header-line" src="../images/screen-tem2/line.png" alt="">
                     <span>{{week}}</span>
                 </div>
+                <div class="header-title">{{data.title}}</div>
                 <img class="header-blue-line" src="../images/screen-tem2/blue-line.png" alt="">
             </div>
 
@@ -138,7 +139,7 @@ export default class Echarts extends Vue {
         margin: 0 10px;
     }
     .header-right{
-        width: 40vw;
+        width: 28vw;
         text-align: right;
         height: 100%;
         float: right;
@@ -186,4 +187,13 @@ export default class Echarts extends Vue {
     //     height: 40.7vh;
     //     background-image: url(../images/screen-tem1/middle.png);
     // }
+    .header-box .header-title{
+        width: 43vw;
+        text-align: center;
+        height: 100%;
+        float: right;
+        display: inline-block;
+        font-weight: 600;
+        // font-size: 18px;
+    }
 </style>

src/apps/home/components/screen-tem4.vue

@@ -2,15 +2,31 @@
     <div class="page">
         <div class="header">
             <!-- <div class="header-box"> -->
-            <img class="header-logo" src="../images/screen-tem2/logo.png" alt="">
+            <!-- <img class="header-logo" src="../images/screen-tem2/logo.png" alt="">
             <div class="title">{{data.title}}</div>
             <div class="header-img">
                 <img src="../images/screen-tem4/header.png" alt="">
             </div>
-            <div class="subhead">Medical waste management module visualization data</div>
+            <div class="subhead">Medical waste management module visualization data</div> -->
 
             <!-- </div> -->
 
+            <div class="header-box">
+                <img class="header-img" src="../images/screen-tem2/logo.png" alt="">
+                <img class="header-line" src="../images/screen-tem2/line.png" alt="">
+
+                <div class="header-right">
+                    <img class="header-line" src="../images/screen-tem2/line.png" alt="">
+                    <span>{{time}}</span>
+                    <img class="header-line" src="../images/screen-tem2/line.png" alt="">
+                    <span>{{day}}</span>
+                    <img class="header-line" src="../images/screen-tem2/line.png" alt="">
+                    <span>{{week}}</span>
+                </div>
+                <div class="header-title">{{data.title}}</div>
+                <img class="header-blue-line" src="../images/screen-tem2/blue-line.png" alt="">
+            </div>
+
         </div>
         <div class="main">
             <div class="main-box1">
@@ -53,7 +69,49 @@ import ScreenModule from '@/apps/home/components/screen-module.vue';
     },
 })
 export default class Echarts extends Vue {
+    week = '';
+
+    day = '';
+
+    time = '';
+
+    created() {
+        this.realSysTime();
+        setInterval(() => {
+            this.realSysTime();
+        }, 1000);
+    }
 
+    realSysTime() {
+        const now = new Date();
+        const year = now.getFullYear(); // 获取年份
+        let month = now.getMonth(); // 获取月份
+        let date = now.getDate(); // 获取日期
+        const day = now.getDay(); // 获取星期
+        let hour = now.getHours(); // 获取小时
+        let minute = now.getMinutes(); // 获取分钟
+        let seconds = now.getSeconds(); // 获取秒
+        month += 1;
+        const arrWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+        this.week = arrWeek[day];
+        if (month < 10) {
+            month = `0${month}`;
+        }
+        if (date < 10) {
+            date = `0${date}`;
+        }
+        if (hour < 10) {
+            hour = `0${hour}`;
+        }
+        if (minute < 10) {
+            minute = `0${minute}`;
+        }
+        if (seconds < 10) {
+            seconds = `0${seconds}`;
+        }
+        this.day = `${year}.${month}.${date}`;
+        this.time = `${hour}:${minute}:${seconds}`;
+    }
 }
 </script>
 
@@ -77,14 +135,15 @@ export default class Echarts extends Vue {
     }
     .header{
         width: 100%;
-        height: 14.3vh;
+        height: 12.8vh;
         position: relative;
         color: #ffffff;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        text-align: center;
+        // display: flex;
+        // justify-content: center;
+        // align-items: center;
+       // text-align: center;
         background-color: rgba(29, 81, 156, 0.2);
+        padding-top: 1.5vh;
     }
     .header .title{
         width: 100%;
@@ -189,4 +248,46 @@ export default class Echarts extends Vue {
         margin-top: -4px;
     }
 
+    .header-box{
+        height: 6.8vh;
+        line-height: 6.8vh;
+        padding: 0 1.5vw;
+        font-size: 22px;
+    }
+    .header-box .header-img{
+        display: inline-block;
+          /* width: 12.5vw; */
+        width: 7.7vw;
+        height: 2.8vh;
+        vertical-align: middle;
+        margin-top: -4px;
+    }
+    .header-line{
+        display: inline-block;
+        width: 0.6vw;
+        height: 3.7vh;
+        vertical-align: middle;
+        margin: 0 10px;
+    }
+    .header-right{
+        width: 28vw;
+        text-align: right;
+        height: 100%;
+        float: right;
+    }
+    .header-blue-line{
+        width: 100%;
+        float: left;
+       margin-top: 1vh;
+    }
+    .header-box .header-title{
+        width: 43vw;
+        text-align: center;
+        height: 100%;
+        float: right;
+        display: inline-block;
+        font-weight: 600;
+        // font-size: 18px;
+    }
+
 </style>

src/apps/home/components/screen-tem7.vue

@@ -4,7 +4,7 @@
             <div class="header-box">
                 <img class="header-img" src="../images/screen-tem2/logo.png" alt="">
                 <img class="header-line" src="../images/screen-tem2/line.png" alt="">
-                <span>{{data.title}}</span>
+                <!-- <span>{{data.title}}</span> -->
 
                 <div class="header-right">
                     <img class="header-line" src="../images/screen-tem2/line.png" alt="">
@@ -14,6 +14,7 @@
                     <img class="header-line" src="../images/screen-tem2/line.png" alt="">
                     <span>{{week}}</span>
                 </div>
+                <div class="header-title">{{data.title}}</div>
                 <img class="header-blue-line" src="../images/screen-tem2/blue-line.png" alt="">
             </div>
 
@@ -138,7 +139,7 @@ export default class Echarts extends Vue {
         margin: 0 10px;
     }
     .header-right{
-        width: 40vw;
+        width: 28vw;
         text-align: right;
         height: 100%;
         float: right;
@@ -186,4 +187,14 @@ export default class Echarts extends Vue {
     //     height: 40.7vh;
     //     background-image: url(../images/screen-tem1/middle.png);
     // }
+
+    .header-box .header-title{
+        width: 43vw;
+        text-align: center;
+        height: 100%;
+        float: right;
+        display: inline-block;
+        font-weight: 600;
+        // font-size: 18px;
+    }
 </style>

src/apps/home/components/screen-tem8.vue

@@ -4,7 +4,7 @@
             <div class="header-box">
                 <img class="header-img" src="../images/screen-tem2/logo.png" alt="">
                 <img class="header-line" src="../images/screen-tem2/line.png" alt="">
-                <span>{{data.title}}</span>
+                <!-- <span>{{data.title}}</span> -->
 
                 <div class="header-right">
                     <img class="header-line" src="../images/screen-tem2/line.png" alt="">
@@ -14,6 +14,7 @@
                     <img class="header-line" src="../images/screen-tem2/line.png" alt="">
                     <span>{{week}}</span>
                 </div>
+                <div class="header-title">{{data.title}}</div>
                 <img class="header-blue-line" src="../images/screen-tem2/blue-line.png" alt="">
             </div>
 
@@ -138,7 +139,7 @@ export default class Echarts extends Vue {
         margin: 0 10px;
     }
     .header-right{
-        width: 40vw;
+        width: 28vw;
         text-align: right;
         height: 100%;
         float: right;
@@ -186,4 +187,13 @@ export default class Echarts extends Vue {
     //     height: 40.7vh;
     //     background-image: url(../images/screen-tem1/middle.png);
     // }
+    .header-box .header-title{
+        width: 43vw;
+        text-align: center;
+        height: 100%;
+        float: right;
+        display: inline-block;
+        font-weight: 600;
+        // font-size: 18px;
+    }
 </style>

src/apps/home/components/screen-tem9.vue

@@ -4,7 +4,7 @@
             <div class="header-box">
                 <img class="header-img" src="../images/screen-tem2/logo.png" alt="">
                 <img class="header-line" src="../images/screen-tem2/line.png" alt="">
-                <span>{{data.title}}</span>
+                <!-- <span>{{data.title}}</span> -->
 
                 <div class="header-right">
                     <img class="header-line" src="../images/screen-tem2/line.png" alt="">
@@ -14,6 +14,7 @@
                     <img class="header-line" src="../images/screen-tem2/line.png" alt="">
                     <span>{{week}}</span>
                 </div>
+                <div class="header-title">{{data.title}}</div>
                 <img class="header-blue-line" src="../images/screen-tem2/blue-line.png" alt="">
             </div>
 
@@ -138,7 +139,7 @@ export default class Echarts extends Vue {
         margin: 0 10px;
     }
     .header-right{
-        width: 40vw;
+        width: 28vw;
         text-align: right;
         height: 100%;
         float: right;
@@ -186,4 +187,14 @@ export default class Echarts extends Vue {
     //     height: 40.7vh;
     //     background-image: url(../images/screen-tem1/middle.png);
     // }
+
+    .header-box .header-title{
+        width: 43vw;
+        text-align: center;
+        height: 100%;
+        float: right;
+        display: inline-block;
+        font-weight: 600;
+        // font-size: 18px;
+    }
 </style>

src/apps/home/components/smodule/smodule76.vue

@@ -91,7 +91,7 @@ export default class Echarts extends Vue {
                     '<span style="font-size:13px">开始时间</span>',
                     '<span style="font-size:13px">结束时间</span>',
                     '<span style="font-size:13px">状态</span>',
-                 //   '<span style="font-size:13px">备注</span>',
+                    //   '<span style="font-size:13px">备注</span>',
                 ],
                 headerBGC: '#163f85',
                 headerHeight: 30,