zc

src/App.vue

@@ -120,4 +120,8 @@
     .el-loading-spinner{
         display: none;
     }
+    .main{
+        background-image: url("./assets/ZDimages/yjdpbg@1x.png")!important;
+        background-size: 100% 100%!important;
+    }
 </style>

src/components/header.vue

@@ -1,11 +1,16 @@
 <template>
-  <div class="header">
-    <div class="header_l"></div>
-    <div class="header_c">
-      <img class="header_l-position" :src="circularLogo"/>
-      <p class="header_c-p">山西农业大学实验室安全管理系统</p>
+  <div class="headerComponent">
+    <div class="top-max-box">
+      <img class="logo-img" :src="circularLogo"/>
+      <p class="title-p">中国矿业大学学校级管控显示系统</p>
+      <img class="right-img" src="@/assets/ZDimages/icon_yjdp_jt@1x.png"/>
+      <p class="time-p">
+        <span>{{timeData1}}</span>
+        <span>{{timeData2}}</span>
+        <span>{{timeData3}}</span>
+      </p>
+      <img class="header_r" src="@/assets/image/index_icon16.png" @click="back"/>
     </div>
-    <img class="header_r" src="@/assets/image/index_icon16.png" @click="back"/>
   </div>
 </template>
 
@@ -14,12 +19,40 @@
 
   export default {
     name: 'heaDer',
-    setup() {
+    data () {
       return {
-        circularLogo: localStorage.getItem('circularLogo')
+        circularLogo: localStorage.getItem('circularLogo'),
+        timer: null,
+        timeData1:'',
+        timeData2:'',
+        timeData3:'',
       }
     },
+    mounted() {
+      this.updateTime();
+      this.timer = setInterval(this.updateTime, 1000)
+    },
     methods: {
+      updateTime() {
+        const now = new Date()
+        // 格式化时间 HH:MM:SS
+        const hours = now.getHours().toString().padStart(2, '0')
+        const minutes = now.getMinutes().toString().padStart(2, '0')
+        const seconds = now.getSeconds().toString().padStart(2, '0')
+        const timeString = `${hours}:${minutes}:${seconds}`
+        // 格式化日期 YYYY年M月D日
+        const year = now.getFullYear()
+        const month = now.getMonth() + 1
+        const day = now.getDate()
+        const dateString = `${year}年${month}月${day}日`
+        // 获取星期几
+        const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+        const weekDay = weekDays[now.getDay()]
+        // 组合完整字符串
+        this.timeData1 = `${timeString}`;
+        this.timeData2 = `${dateString}`;
+        this.timeData3 = `${weekDay}`;
+      },
       //跳转视频/应急页面
       topButtonGoPage(type) {
         if (type == 'video') {
@@ -33,108 +66,71 @@
         // this.$router.go(-1)
       }
     },
-    mounted() {
-
+    beforeDestroy() {
+      //清除定时器
+      clearInterval(this.timer);
+    }
+    ,
+    destroyed() {
+      //清除定时器
+      clearInterval(this.timer);
     }
   }
 </script>
 
 <style lang="scss" scoped>
-  * {
-    padding: 0;
-    margin: 0;
-    box-sizing: border-box;
+  *{
+    margin:0;
+    padding:0;
   }
-
-  .header {
-    width: 100%;
+  .headerComponent{
     position: absolute;
-    left: 0;
-    top: 0;
-    z-index: 100;
-    display: flex;
-    justify-content: flex-start;
-    .position-img-button-left-box {
-      cursor: pointer;
-      position: absolute;
-      top: 4px;
-      left: 410px;
+    top:0;
+    left:0;
+    z-index: 51;
+    .top-max-box{
       display: flex;
-      width: 190px;
-      height: 24px;
-      img {
-        width: 24px;
-        height: 18px;
-        display: inline-block;
-        margin: 4px 0;
+      .logo-img{
+        width:60px;
+        height:60px;
+        margin:13px 18px 0 16px;
       }
-      p {
-        color: #24D1F9;
-        font-size: 16px;
-        line-height: 24px;
-        margin-left: 14px;
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-      }
-    }
-    .position-img-button-right-box {
-      cursor: pointer;
-      position: absolute;
-      top: 4px;
-      right: 385px;
-      display: flex;
-      width: 190px;
-      height: 24px;
-      img {
-        width: 24px;
-        height: 24px;
-        display: inline-block;
+      .title-p{
+        height: 58px;
+        font-weight: 700;
+        font-size: 40px;
+        color: #FFFFFF;
+        line-height: 58px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+        margin-top:14px;
       }
-      p {
-        color: #24D1F9;
-        font-size: 16px;
-        line-height: 24px;
-        margin-left: 14px;
-        font-family: Source Han Sans CN;
-        font-weight: 400;
+      .right-img{
+        width:45px;
+        height:33px;
+        margin:28px 0 0 8px;
       }
-    }
-    .header_l {
-      width: 250px;
-      height: 55px;
-    }
-    .header_c {
-      width: 1180px;
-      height: 152px;
-      margin-left: 136px;
-      background: url("~@/assets/image/index_icon2.png") no-repeat;
-      background-size: 100% 100%;
-      padding-top: 26px;
-      position: relative;
-      .header_c-p {
-        font-size: 30px;
-        font-family: Microsoft YaHei;
-        font-weight: bold;
+      .time-p{
+        margin-left:120px;
+        height: 50px;
+        font-size: 26px;
         color: #FFFFFF;
-        line-height: 30px;
-        text-align: center;
-        padding-left: 70px;
+        line-height: 50px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+        span:nth-child(2){
+          margin:0 20px 0 25px;
+        }
       }
-      .header_l-position {
-        z-index: 10;
-        position: absolute;
-        top: 17px;
-        left: 330px;
-        width: 50px;
-        height: 50px;
+      .header_r {
+        cursor: pointer;
+        margin-left: 264px;
+        width: 82px;
+        height: 32px;
+        margin-top: 18px;
       }
     }
-    .header_r {
-      cursor: pointer;
-      margin-left: 264px;
-      width: 82px;
-      height: 32px;
-      margin-top: 18px;
-    }
   }
 </style>

src/components/personnelAdmittanceECharts/personnelAdmittanceECharts.vue

@@ -162,7 +162,7 @@
           if (res.code == 200) {
             let illegalX = []
             let illegalData = []
-            let data = res.data.listTg
+            let data = res.data.listTg;
             self.listcount = res.data.listcount//总数
             if (data.length <= 0) {
               for (let i = 0; i < 4; i++) {
@@ -194,26 +194,26 @@
             containLabel: true
           },
 
-          'xAxis': [{
-            'type': 'category',
-            'data': dataX,
+          xAxis: [{
+            type: 'category',
+            data: dataX,
             axisTick: {
               show: false
 
             },
-            'nameTextStyle': {
-              'color': '#82b0ec'
+            nameTextStyle: {
+              color: '#82b0ec'
             },
-            'axisLine': {
+            axisLine: {
               show: true,
-              'lineStyle': {
-                'color': '#486CC2',
+              lineStyle: {
+                color: '#486CC2',
                 width: 2
               }
             },
-            'axisLabel': {
-              'textStyle': {
-                'color': '#fff',
+            axisLabel: {
+              textStyle: {
+                color: '#fff',
                 fontSize: 12
               },
               //设置一行显示几个字,自己设置
@@ -241,18 +241,19 @@
               }
             }
           }],
-          'yAxis': [
+          yAxis: [
             {
-              interval: 1,
+              min:0,
+              minInterval:1,
               axisTick: {
                 show: false
 
               },
               //坐标轴
-              'axisLine': {
+              axisLine: {
                 show: true,
-                'lineStyle': {
-                  'color': '#486CC2',
+                lineStyle: {
+                  color: '#486CC2',
                   width: 2
                 }
               },

src/views/courtyardManage/courtyardHome.vue

@@ -1,20 +1,6 @@
 <template>
-  <div class="main">
-    <img class="bg_img" src="@/assets/image/bg.png"/>
-    <div class="header">
-      <p class="header_l"></p>
-      <div class="header_c">
-        <img class="header_l-position" :src="circularLogo"/>
-        <p class="header_c-p">山西农业大学实验室安全管理系统</p>
-      </div>
-      <div class="header_r1">
-        <img class="header_r1_l" src="@/assets/image/index_icon3.png"/>
-        <i class="schoolName">{{deptName?deptName:'****'}}</i>
-        <img class="header_r1_r" src="@/assets/image/index_icon4.png" @click="openBackManageUrl()"/>
-      </div>
-      <p class="position-button-right-bottom-1" @click="topButtonGoPage('video')">视频监控</p>
-      <p class="position-button-right-bottom-2" @click="topButtonGoPage('alarm')">智能预警</p>
-    </div>
+  <div class="home-page">
+    <headerComponent></headerComponent>
     <div class="left">
       <div class="left_t">
         <img class="left_t_l" src="@/assets/image/index_icon5.png"/>
@@ -77,9 +63,6 @@
               <div class="swiper-slide">
                 <!--工作计划-->
                 <div class="left_t_r3" v-if="workList">
-                  <!--<div class="left_t_r2_t">
-                    <i>{{planTitle}}</i>
-                  </div>-->
                   <div class="left_t_r2_m">
                     <i>工作内容</i>
                     <i>执行单位</i>
@@ -139,35 +122,26 @@
 
 <script>
   import {
-    getLogoInfo,
-    indexListRelease,
-    mySub,
-    onlineSumByBigView,
-    getUrlConfig,
-    requestUrl, getTypeCount, getFiedCount
-  } from '../../api/http'
-  import {
     systemNotifyList,
     laboratoryBigViewSelectTriggerInfo,
     laboratoryBigViewCollegeEventStatistics,
     laboratoryBigViewListCollegeApplyColumn,
     examBigViewNewStatistics,
-    systemWarningNoticeNoMenuList
-  } from '@/api/index'
-  import {
+    systemWarningNoticeNoMenuList,
     laboratoryClassTypeGetList
   } from '@/api/index'
   import Swiper from 'swiper'
-  import $ from 'jquery'
   import mqtt from 'mqtt/dist/mqtt'
   import { getToken, removeToken } from '@/utils/auth'
   import { Encrypt, Decrypt } from '@/utils/secret'
+  import headerComponent from '../headerComponent.vue'
   import planAlarm from '@/components/planAlarm/planAlarm.vue'
   import newSubVideoComponent from '@/components/newSubVideoComponent.vue'
   import personnelAdmittanceECharts from '@/components/personnelAdmittanceECharts/personnelAdmittanceECharts.vue'
 
   export default {
     components: {
+      headerComponent,
       planAlarm,
       personnelAdmittanceECharts,
       newSubVideoComponent
@@ -236,14 +210,6 @@
       this.timerPlay()
     },
     methods: {
-      //跳转视频/应急页面
-      topButtonGoPage(type) {
-        if (type == 'video') {
-          this.$router.push('/videoSurveillance')
-        } else if (type == 'alarm') {
-          this.$router.push('/emergencyManagement')
-        }
-      },
       // 定时器
       timerPlay() {
         let self = this
@@ -578,11 +544,11 @@
     -webkit-box-orient: vertical;
   }
 
-  .main {
+  .home-page {
     width: 1920px;
     height: 1080px;
-    /* background: url("../img/index_bg.png") no-repeat;
- background-size: 100% 100%;*/
+    background-image: url("../../assets/ZDimages/yjdpbg@1x.png");
+    background-size: 100% 100%;
     position: relative;
     left: 0;
     top: 0;
@@ -717,8 +683,8 @@
         width: 1180px;
         height: 152px;
         margin-left: 136px;
-        background: url("~@/assets/image/index_icon2.png") no-repeat;
-        background-size: 100% 100%;
+        /*background: url("~@/assets/image/index_icon2.png") no-repeat;*/
+        /*background-size: 100% 100%;*/
         padding-top: 26px;
         position: relative;
         .header_c-p{
@@ -809,17 +775,18 @@
         .left_t_l {
           width: 18px;
           height: 166px;
-          margin-top: 40px;
+          margin-top: 80px;
         }
         .left_t_l1 {
           width: 4px;
-          height: 446px;
+          height: 400px;
           background: #004C95;
           margin-left: 4px;
+          margin-top:80px;
         }
 
         .left_t_c {
-          margin-top: 145px;
+          margin-top: 82px;
           > li {
             width: 308px;
             height: 74px;
@@ -1571,7 +1538,6 @@
 
       }
     }
-
   }
 
   /*滚动动画*/

src/views/courtyardManage/workInfoDetail.vue

@@ -6,7 +6,7 @@
         <i class="main_t_t_l">当前位置：首页 &gt;</i>
         <i>{{type==1?'校院通知':(type==2?'预警事件':(type==3?'工作通知':''))}}</i>
       </div>
-      <div style="background: rgba(9, 55, 81, 0.6);margin-top:30px;height:900px;padding-top:20px;">
+      <div style="margin-top:30px;height:900px;padding-top:20px;">
         <div class="title" v-if="type == 1||type == 3">{{codeData.title}}</div>
         <div class="main_t_b" v-if="type == 1||type == 3">
           <p v-html="codeData.content"></p>
@@ -405,41 +405,7 @@
     top: 0;
     z-index: 50;
     background: #062338;
-    .header {
-      width: 100%;
-      position: absolute;
-      left: 0px;
-      top: 0px;
-      z-index: 100;
-      display: flex;
-      justify-content: flex-start;
-
-      .header_l {
-        width: 182px;
-        height: 44px;
-        margin: 10px 0 0 40px;
-      }
-      .header_c {
-        width: 1180px;
-        height: 152px;
-        margin-left: 136px;
-        background: url("~@/assets/image/index_icon2.png") no-repeat;
-        background-size: 100% 100%;
-        font-size: 30px;
-        font-family: Microsoft YaHei;
-        font-weight: bold;
-        color: #FFFFFF;
-        line-height: 30px;
-        text-align: center;
-        padding-top: 26px;
-      }
-      .header_r {
-        margin-left: 264px;
-        width: 82px;
-        height: 32px;
-        margin-top: 18px;
-      }
-    }
+    overflow: hidden;
     .main_t {
       width: 1852px;
       height: 975px;

src/views/headerComponent.vue

@@ -0,0 +1,216 @@
+<template>
+  <div class="headerComponent">
+    <div class="top-max-box">
+      <img class="logo-img" :src="circularLogo"/>
+      <p class="title-p">中国矿业大学学校级管控显示系统</p>
+      <img class="right-img" src="@/assets/ZDimages/icon_yjdp_jt@1x.png"/>
+      <div class="top-button-box-1">
+        <img src="@/assets/ZDimages/icon_yjdp_spjk@1x.png"/>
+        <p @click="topButtonGoPage('video')">视频监控</p>
+      </div>
+      <div class="top-button-box-2">
+        <img src="@/assets/ZDimages/icon_yjdp_znyj@1x.png"/>
+        <p @click="topButtonGoPage('alarm')">智能预警</p>
+      </div>
+      <p class="time-p">
+        <span>{{timeData1}}</span>
+        <span>{{timeData2}}</span>
+        <span>{{timeData3}}</span>
+      </p>
+    </div>
+    <div class="bottom-max-box">
+      <div :class="index == checkDept?'checkP':'noCheckP'" v-for="(item,index) in deptList" :key="index">
+        <p >{{item.deptName}}</p>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'headerComponent',
+    data () {
+      return {
+        circularLogo: localStorage.getItem('circularLogo'),
+        timer: null,
+        timeData1:'',
+        timeData2:'',
+        timeData3:'',
+        deptList:[
+          {deptName:"汇总数据",deptId:'9999999'},
+          {deptName:"材料与物理学院",deptId:'9999999'},
+          {deptName:"化工学院",deptId:'9999999'},
+          {deptName:"低碳能源与动学院学院学院",deptId:'9999999'},
+        ],
+        checkDept:0,
+      }
+    },
+    created(){
+
+    },
+    mounted(){
+      this.updateTime();
+      this.timer = setInterval(this.updateTime, 1000)
+    },
+    methods:{
+      updateTime() {
+        const now = new Date()
+        // 格式化时间 HH:MM:SS
+        const hours = now.getHours().toString().padStart(2, '0')
+        const minutes = now.getMinutes().toString().padStart(2, '0')
+        const seconds = now.getSeconds().toString().padStart(2, '0')
+        const timeString = `${hours}:${minutes}:${seconds}`
+        // 格式化日期 YYYY年M月D日
+        const year = now.getFullYear()
+        const month = now.getMonth() + 1
+        const day = now.getDate()
+        const dateString = `${year}年${month}月${day}日`
+        // 获取星期几
+        const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+        const weekDay = weekDays[now.getDay()]
+        // 组合完整字符串
+        this.timeData1 = `${timeString}`;
+        this.timeData2 = `${dateString}`;
+        this.timeData3 = `${weekDay}`;
+      },
+      //跳转视频/应急页面
+      topButtonGoPage(type) {
+        if (type == 'video') {
+          this.$router.push('/videoSurveillance')
+        } else if (type == 'alarm') {
+          this.$router.push('/emergencyManagement')
+        }
+      },
+    },
+    beforeDestroy() {
+      //清除定时器
+      clearInterval(this.timer);
+    }
+    ,
+    destroyed() {
+      //清除定时器
+      clearInterval(this.timer);
+    }
+  }
+</script>
+<style scoped lang="scss">
+  *{
+    margin:0;
+    padding:0;
+  }
+  .headerComponent{
+    position: absolute;
+    top:0;
+    left:0;
+    z-index: 51;
+    .top-max-box{
+      display: flex;
+      .logo-img{
+        width:60px;
+        height:60px;
+        margin:13px 18px 0 16px;
+      }
+      .title-p{
+        height: 58px;
+        font-weight: 700;
+        font-size: 40px;
+        color: #FFFFFF;
+        line-height: 58px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+        margin-top:14px;
+      }
+      .right-img{
+        width:45px;
+        height:33px;
+        margin:28px 0 0 8px;
+      }
+      .top-button-box-1{
+        height: 50px;
+        display: flex;
+        cursor: pointer;
+        margin:0 97px 0 209px;
+        img{
+          width:26px;
+          height:20px;
+          margin:16px 11px 0 0;
+        }
+        p{
+          height: 50px;
+          font-size: 26px;
+          color: #00F7FF;
+          line-height: 50px;
+          text-align: left;
+          font-style: normal;
+          text-transform: none;
+        }
+      }
+      .top-button-box-2{
+        height: 50px;
+        display: flex;
+        cursor: pointer;
+        img{
+          width:26px;
+          height:22px;
+          margin:14px 10px 0 0;
+        }
+        p{
+          height: 50px;
+          font-size: 26px;
+          color: #00F7FF;
+          line-height: 50px;
+          text-align: left;
+          font-style: normal;
+          text-transform: none;
+        }
+      }
+      .time-p{
+        margin-left:120px;
+        height: 50px;
+        font-size: 26px;
+        color: #FFFFFF;
+        line-height: 50px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+        span:nth-child(2){
+          margin:0 20px 0 25px;
+        }
+      }
+    }
+    .bottom-max-box{
+      margin-left: 800px;
+      margin-top: 6px;
+      div{
+        display: inline-block;
+        width:267px;
+        height: 52px;
+        margin-left:-18px;
+        cursor: pointer;
+        p{
+          margin: 0 40px;
+          width: 187px;
+          height: 52px;
+          font-size: 26px;
+          color: #FFFFFF;
+          line-height: 52px;
+          text-align: center;
+          font-style: normal;
+          text-transform: none;
+          display:block;
+          overflow:hidden;
+          text-overflow:ellipsis;
+          white-space:nowrap;
+        }
+      }
+      .checkP{
+        background-image: url("../assets/ZDimages/bg_bt_xzhzsj@1x.png");
+        background-size: 100% 100%;
+      }
+      .noCheckP{
+        background-image: url("../assets/ZDimages/bg_bt_hzsj@1x.png");
+        background-size: 100% 100%;
+      }
+    }
+  }
+</style>