zc

src/App.vue

@@ -1,6 +1,5 @@
 <template>
-    <div id="app" :class="$route.path == '/codeHtml'?'codeHtmlPage':''"
-         :style="$route.path == '/codeHtml'?'width:'+innerWidth+'px!important;height:'+innerHeight+'px!important;':''">
+    <div id="app">
       <router-view/>
     </div>
 </template>
@@ -26,56 +25,21 @@
       }
     },
     mounted(){
-      this.banZoom();
-      //根据当前浏览器宽度与额定尺寸计算transform缩放值
-      document.getElementById('app').style.transform = `scale(${document.documentElement.clientWidth / 1920})`;
-      //根据当前浏览器宽度与额定尺寸计算当前浏览器可观看尺寸高度
-      document.getElementById('app').style.height = (window.innerHeight/(document.documentElement.clientWidth / 1920*100))*100+'px';
-      //当尺寸改变后从新计算
-      window.onresize = () => {
-        return (() => {
-          document.getElementById('app').style.transform = `scale(${document.documentElement.clientWidth / 1920})`;
-          document.getElementById('app').style.height = (window.innerHeight/(document.documentElement.clientWidth / 1920*100))*100+'px';
-        })();
-      };
-      // this.inspectRenewal();
+
     },
     methods:{
-      banZoom(){
-        // 禁止通过 ctrl + +/- 和  ctrl + 滚轮 对页面进行缩放
-        document.addEventListener('keydown', function (event) {
-          if ((event.ctrlKey === true || event.metaKey === true) &&
-            (event.which === 61 || event.which === 107 ||
-              event.which === 173 || event.which === 109 ||
-              event.which === 187 || event.which === 189)) {
-            event.preventDefault()
-          }
-        }, false)
-        // Chrome IE 360
-        window.addEventListener('mousewheel', function (event) {
-          if (event.ctrlKey === true || event.metaKey) {
-            event.preventDefault()
-          }
-        }, {
-          passive: false
-        })
-        // firefox
-        window.addEventListener('DOMMouseScroll', function (event) {
-          if (event.ctrlKey === true || event.metaKey) {
-            event.preventDefault()
-          }
-        }, {
-          passive: false
-        })
-      },
-    },
-    beforeDestroy() {
-      //清除定时器
-      clearInterval(this.timer);
+
     },
   }
 </script>
 <style>
+  #app{
+    width: 3072px;
+    height: 1660px;
+    display: flex;
+    flex:1;
+    overflow: hidden;
+  }
   .el-drawer__container,.el-dialog__wrapper,.el-message-box__wrapper{
     background: rgba(0,0,0,0.4);
   }
@@ -95,7 +59,7 @@
     font-style: normal;
   }
   @font-face {
-    font-family: 'AlimamaShuHeiTi';
+    font-family: 'Alimama ShuHeiTi';
     src: url('./assets/fonts/AlimamaShuHeiTi-Bold.ttf') format('truetype'); /* 标题 */
     font-weight: normal;
     font-style: normal;
@@ -113,7 +77,7 @@
     */
   }
   @font-face {
-    font-family: 'SOURCEHANSANSCN';
+    font-family: 'Source Han Sans CN';
     src: url('./assets/fonts/SOURCEHANSANSCN.OTF') format('truetype'); /* 正文 */
     font-weight: normal;
     font-style: normal;

src/api/index.js

@@ -51,7 +51,7 @@ export function iotSensorFindBySubId(query) {
 //获取时间
 export function laboratoryWsBigViewGetTimeData(query) {
   return request({
-    url: '/laboratory/wsBigView/getTimeData?type=1',
+    url: '/laboratory/wsBigView/getTimeData?type=2',
     method: 'get',
     params: query
   })
@@ -65,3 +65,21 @@ export function laboratoryWsBigViewGetUsePerson(query) {
     params: query
   })
 }
+
+//实验室今日人次
+export function laboratoryWsBigViewGetWeatherData(query) {
+  return request({
+    url: '/laboratory/wsBigView/getWeatherData',
+    method: 'get',
+    params: query
+  })
+}
+
+//进入记录
+export function laboratoryWsBigViewGetSafeAccessData(data) {
+  return request({
+    url: '/laboratory/wsBigView/getSafeAccessData',
+    method: 'post',
+    data: data
+  })
+}

src/assets/styles/index.scss

@@ -1,5 +1,4 @@
 @import './element/element-ui';
-@import './mapCss';
 
 //loding加载隐藏
 .circular{
@@ -8,9 +7,9 @@
 *{
   margin:0;
   padding:0;
-  color:#fff;
+  font-family: Source Han Sans CN;
   div,p,i{
-    font-weight:400;
+    font-weight:500;
   }
 }
 .v-modal{
@@ -31,327 +30,117 @@
 *:after {
   box-sizing: inherit;
 }
-html,body{
-  margin:0;
-  padding:0;
-  height:100%;
-  width:100%;
-  overflow: hidden;
-}
-
-html {
-  height: 100%;
-  box-sizing: border-box;
-}
-body {
-  height: 100%;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
-}
-#app{
-  background: #e0e0e0;
-  height: 100%;
-  transform-origin: left top;
-  width:1920px;
-  display: flex;
-  flex-direction: column;
-  flex:1;
-}
-.app-main{
-  flex:1;
-  display: flex;
-  font-family: Microsoft YaHei;
-  font-weight: bold;
-}
-.home{
-
-  .form-box{
-    padding:34px 35px;
-  }
-  .el-form{
-    padding:35px;
-    display: flex;
-    .el-form-item__label{
-      line-height:50px;
-      font-size:22px;
-      color:#fff;
-    }
-    .el-input__inner{
-      background-color: #032F33;
-      border: 1px solid #15827C;
-      color:#fff;
-      height:50px;
-      line-height:48px;
-      font-size:22px;
-    }
-    input:focus{
-      outline:1px solid #15827C
-    }
-    .el-select .el-input .el-select__caret{
-      color:#15827C;
-    }
-    .el-input__inner::placeholder{
-      font-size:18px;
-      color:#999;
-    }
-  }
-  .el-select-dropdown{
-    background-color: #032F33;
-    border: 1px solid #032F33;
-  }
-  .el-select-dropdown__item.selected{
-    color: #fff;
-  }
-  .el-select-dropdown__item{
-    color: #fff;
-  }
-  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
-    background-color: #15827C;
-    color: #fff;
-  }
-  .el-form-item{
-    margin:0!important;
-  }
-  .form-inquire-common-style-button{
-    border:1px solid #07B4C7;
-    color:#00E6FF;
-    background-color: #02333C;
-    width:100px;
-    height:50px;
-    line-height:50px;
-    text-align: center;
-    font-size:22px;
-    border-radius:4px;
-    margin:0 20px;
-    cursor: pointer;
-  }
-  .form-reset-common-style-button{
-    border:1px solid #15827C;
-    color:#FFFFFF;
-    background-color: #02333C;
-    width:100px;
-    height:50px;
-    line-height:50px;
-    text-align: center;
-    font-size:22px;
-    border-radius:4px;
-    cursor: pointer;
-
-  }
-  .el-table::before, .el-table--group::after, .el-table--border::after{
-    background-color:rgba(0,34,40,0)!important;
-  }
-  .el-table{
-    background-color:rgba(0,34,40,0)!important;
-    tr{
-      background-color:rgba(0,34,40,0)!important;
-    }
-    .warning-row {
-      background: #002228!important;
-      color: #ffffff!important;
-    }
-    .success-row {
-      background: #002D32!important;
-      color: #ffffff!important;
-    }
-    tbody tr:hover > td {
-      background-color: #002D32 !important;
-      color: #ffffff!important;
-    }
-    th{
-      background: #002D32!important;
-      .cell{
-        height:40px!important;
-        line-height:40px!important;
-        color:#00FFFF!important;
-        font-size:24px!important;
-      }
-      .ascending{
-        width:12px!important;
-        height:12px!important;
-        top:2px!important;;
-      }
-      .descending{
-        width:12px!important;
-        height:12px!important;
-        bottom:2px!important;
-      }
-    }
-    td{
-      .cell{
-        height:40px!important;
-        line-height:40px!important;
-        color:#fff!important;
-        font-size:22px!important;
-      }
-    }
-  }
 
-  .el-table th.is-leaf, .el-table td{
-    border:none!important;
-  }
-
-  .el-table--fit{
-    flex:1;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-  .table-box .el-table__body-wrapper{
-    flex: 1;
-    overflow-y: scroll !important;
-
-  }
-  //表格滚动条样式
-  .table-box .el-table__body-wrapper::-webkit-scrollbar{
-    width: 8px!important;     /*高宽分别对应横竖滚动条的尺寸*/
-    height: 8px!important;
-  }
-  .table-box .el-table__body-wrapper::-webkit-scrollbar-thumb{
-    border-radius: 5px!important;
-    -webkit-box-shadow: inset 0 0 5px #07B4C7!important;
-    background: #07B4C7!important;
-  }
-  .table-box .el-table__body-wrapper::-webkit-scrollbar-track{
-    -webkit-box-shadow: inset 0 0 5px #013138!important;
-    border-radius: 0!important;
-    background: #013138!important;
-  }
-  .pagination-container{
-    margin:20px 0 12px 0;
-    height:50px;
-    display: flex;
-    .el-pagination{
-      height:50px;
-      flex:1;
-      display: flex;
-      padding: 0 30px;
-      .el-pagination__total{
-        flex:1;
-        text-align: right;
-        font-size:22px;
-        line-height:50px;
-        color:#fff;
-      }
-      .el-pagination__sizes{
-        height:50px;
-        .el-input__inner{
-          width:160px;
-          font-size:22px;
-          height:48px;
-          border:1px solid #15827C;
-          color:#FFFFFF;
-          background-color: #02333C;
-        }
-      }
-    }
-    .el-pagination .el-select .el-input{
-      width:160px;
-    }
-    .btn-prev{
-      margin-top:12px!important;
-      width:28px;
-      height:28px;
-      overflow: hidden!important;
-      border-radius:4px!important;
-      border:1px solid #15827C!important;
-      color:#00E6FF!important;
-      background-color:rgba(0,34,40,0)!important;
-    }
-    .btn-next{
-      margin-top:12px!important;
-      width:28px;
-      height:28px;
-      overflow: hidden!important;
-      border-radius:4px!important;
-      border:1px solid #15827C!important;
-      color:#00E6FF!important;
-      background-color:rgba(0,34,40,0)!important;
-    }
-    .el-pagination .btn-prev .el-icon, .el-pagination .btn-next .el-icon{
-      font-size:16px;
-    }
-    .number{
-      background-color:rgba(0,34,40,0)!important;
-      margin-top:14px!important;
-      height: 28px;
-      width:28px;
-      font-size:22px;
-    }
-    .btn-quicknext{
-      font-size:18px;
-      margin-top:11px!important;
-      border:none;
-      color: #00E6FF !important;
-      background-color: rgba(0, 34, 40, 0) !important;
-    }
-    .btn-quickprev{
-      font-size:18px;
-      margin-top:11px!important;
-      border:none;
-      color: #00E6FF !important;
-      background-color: rgba(0, 34, 40, 0) !important;
-    }
-    .pagination-container .el-pagination.is-background .btn-prev, .pagination-container .el-pagination.is-background .btn-next, .pagination-container .el-pagination.is-background .el-pager li{
-      background-color:rgba(0,34,40,0)!important;
-    }
-    .el-pagination.is-background .el-pager li:not(.disabled).active{
-      color:#00E6FF!important;
-    }
-    .pagination-container .number{
-      color:#fff!important;
-    }
-    .pagination-container .el-pagination .btn-prev .el-icon, .pagination-container .el-pagination .btn-next .el-icon{
-      color:#00E6FF!important;
-    }
-  }
-  .el-table__empty-text{
-    font-size:24px;
-  }
+/*************************公共滚动条样式*************************/
 
+html{
+  overflow: scroll;
+}
+html::-webkit-scrollbar{
+  width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
+  height: 6px;
+}
+html::-webkit-scrollbar-thumb{
+  border-radius: 5px;
+  -webkit-box-shadow: inset 0 0 5px #D3D7D4;
+  background: #D3D7D4;
+}
+html::-webkit-scrollbar-track{
+  -webkit-box-shadow: inset 0 0 5px #FFFFFF;
+  border-radius: 0;
+  background: #FFFFFF;
+}
+//横竖
+.scrollbar-box{
+  overflow: scroll;
+}
+.scrollbar-box::-webkit-scrollbar{
+  width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
+  height: 6px;
+}
+.scrollbar-box::-webkit-scrollbar-thumb{
+  border-radius: 5px;
+  -webkit-box-shadow: inset 0 0 5px #D3D7D4;
+  background: #D3D7D4;
+}
+.scrollbar-box::-webkit-scrollbar-track{
+  -webkit-box-shadow: inset 0 0 5px #FFFFFF;
+  border-radius: 0;
+  background: #FFFFFF;
+}
+//竖向
+.scrollbar-y-box{
+  overflow-y: scroll;
+  overflow-x: hidden;
+  white-space: nowrap;
+}
+.scrollbar-y-box::-webkit-scrollbar{
+  width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
+  height: 6px;
+}
+.scrollbar-y-box::-webkit-scrollbar-thumb{
+  border-radius: 5px;
+  -webkit-box-shadow: inset 0 0 5px #D3D7D4;
+  background: #D3D7D4;
+}
+.scrollbar-y-box::-webkit-scrollbar-track{
+  -webkit-box-shadow: inset 0 0 5px #FFFFFF;
+  border-radius: 0;
+  background: #FFFFFF;
+}
+//横向
+.scrollbar-x-box{
+  overflow-x: scroll;
+  overflow-y: hidden;
+  white-space: nowrap;
+}
+.scrollbar-x-box::-webkit-scrollbar{
+  width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
+  height: 6px;
+}
+.scrollbar-x-box::-webkit-scrollbar-thumb{
+  border-radius: 5px;
+  -webkit-box-shadow: inset 0 0 5px #D3D7D4;
+  background: #D3D7D4;
+}
+.scrollbar-x-box::-webkit-scrollbar-track{
+  -webkit-box-shadow: inset 0 0 5px #FFFFFF;
+  border-radius: 0;
+  background: #FFFFFF;
 }
 
-/*弹窗按钮*/
-.el-message-box{
-  .el-message-box__header{
-    .el-message-box__title{
-      text-align: center;
-    }
-    .el-message-box__headerbtn{
-      display: none;
-    }
-  }
-  .el-message-box__content{
-    .el-message-box__status.el-icon-warning{
-      display: none;
-    }
-    .el-message-box__message{
-      padding:0 12px;
-      text-align: center;
-    }
-  }
-  .el-message-box__btns{
-    text-align: center;
-    .el-button--primary:hover, .el-button--primary:focus{
-      background: #0045AF;
-      border-color:#0045AF;
-    }
-  }
-}
+//下拉菜单
 
 .el-select-dropdown{
-  background-color: #032F33;
-  border: 1px solid #15827C;
+  //background-color:rgba(0,114,221,0.6)!important;
+  background-color:rgba(2,18,42,1)!important;
+  border: 1px solid #0591F3;
 }
 .el-select-dropdown__item.selected{
-  color: #fff;
+  color: #0591F3;
 }
 .el-select-dropdown__item{
   color: #fff;
+  font-size:34px;
+  line-height: 60px;
+  height:60px;
 }
 .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
-  background-color: #15827C;
+  background-color:rgba(5,145,243,0.6)!important;
   color: #fff;
 }
+
+*::-webkit-scrollbar {
+  width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 6px;
+}
+*::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  -webkit-box-shadow: inset 0 0 5px #0591F3;
+  background: #0591F3;
+}
+*::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 5px #101F38;
+  border-radius: 0;
+  background: #101F38;
+}

src/assets/styles/mapCss.scss

@@ -1,256 +0,0 @@
-.mapComponent-map-1-3{
-  .map-for-room-box:nth-child(-n+10){
-    width:119px;
-    height:172px;
-    border-bottom:2px solid #fff;
-    border-right:2px solid #fff;
-  }
-  .map-for-room-box:nth-child(11){
-    width:116px;
-    height:172px;
-    border-bottom:2px solid #fff;
-  }
-  .map-for-room-box:nth-child(n+12):nth-child(-n+16){
-    width:119px;
-    height:172px;
-    border-top:2px solid #fff;
-    border-right:2px solid #fff;
-    margin-top:87px;
-  }
-  .map-for-room-box:nth-child(n+17):nth-child(-n+18){
-    width:238px;
-    height:172px;
-    border-top:2px solid #fff;
-    border-right:2px solid #fff;
-    margin-top:87px;
-  }
-  .map-for-room-box:nth-child(19){
-    width:235px;
-    height:172px;
-    border-top:2px solid #fff;
-    margin-top:87px;
-  }
-  .corridor-background{
-    top:172px;
-  }
-  .map-for-room-box:nth-child(-n+11){
-    .map-room-box{
-      top:0;
-      left:0;
-    }
-    .map-build-user-box{
-      bottom:30px;
-      left:0;
-    }
-    .door-img{
-      bottom:-2px;
-      right:15px;
-    }
-  }
-  .map-for-room-box:nth-child(n+12):nth-child(-n+19){
-    .map-room-box{
-      bottom:0;
-      left:0;
-    }
-    .map-build-user-box{
-      top:30px;
-      left:0;
-    }
-    .door-img{
-      top:-2px;
-      right:15px;
-      transform: scaleX(-1) rotate(180deg);
-    }
-  }
-}
-.mapComponent-map-4-5{
-  .map-for-room-box:nth-child(-n+8){
-    width:145px;
-    height:172px;
-    border-bottom:2px solid #fff;
-    border-right:2px solid #fff;
-  }
-  .map-for-room-box:nth-child(9){
-    width:146px;
-    height:172px;
-    border-bottom:2px solid #fff;
-  }
-  .map-for-room-box:nth-child(n+10):nth-child(-n+17){
-    width:145px;
-    height:172px;
-    border-top:2px solid #fff;
-    border-right:2px solid #fff;
-    margin-top:87px;
-  }
-  .map-for-room-box:nth-child(18){
-    width:146px;
-    height:172px;
-    border-top:2px solid #fff;
-    margin-top:87px;
-  }
-  .corridor-background{
-    top:172px;
-  }
-  .map-for-room-box:nth-child(-n+9){
-    .map-room-box{
-      top:0;
-      left:0;
-    }
-    .map-build-user-box{
-      bottom:30px;
-      left:0;
-    }
-    .door-img{
-      bottom:-2px;
-      right:15px;
-    }
-  }
-  .map-for-room-box:nth-child(n+10):nth-child(-n+19){
-    .map-room-box{
-      bottom:0;
-      left:0;
-    }
-    .map-build-user-box{
-      top:30px;
-      left:0;
-    }
-    .door-img{
-      top:-2px;
-      right:15px;
-      transform: scaleX(-1) rotate(180deg);
-    }
-  }
-}
-.mapComponent-map-6-7{
-  width:1164px!important;
-  margin:10px 73px 0 103px!important;
-  .map-for-room-box:nth-child(-n+8){
-    width:129px;
-    height:172px;
-    border-bottom:2px solid #fff;
-    border-right:2px solid #fff;
-  }
-  .map-for-room-box:nth-child(9){
-    width:128px;
-    height:172px;
-    border-bottom:2px solid #fff;
-  }
-  .map-for-room-box:nth-child(10){
-    width:387px;
-    height:172px;
-    border-top:2px solid #fff;
-    border-right:2px solid #fff;
-    margin-top:87px;
-  }
-  .map-for-room-box:nth-child(n+11):nth-child(-n+15){
-    width:129px;
-    height:172px;
-    border-top:2px solid #fff;
-    border-right:2px solid #fff;
-    margin-top:87px;
-  }
-  .map-for-room-box:nth-child(16){
-    width:128px;
-    height:172px;
-    border-top:2px solid #fff;
-    margin-top:87px;
-  }
-  .corridor-background{
-    top:172px;
-    width:1160px!important;
-  }
-  .map-for-room-box:nth-child(-n+9){
-    .map-room-box{
-      top:0;
-      left:0;
-    }
-    .map-build-user-box{
-      bottom:30px;
-      left:0;
-    }
-    .door-img{
-      bottom:-2px;
-      right:15px;
-    }
-  }
-  .map-for-room-box:nth-child(n+10):nth-child(-n+16){
-    .map-room-box{
-      bottom:0;
-      left:0;
-    }
-    .map-build-user-box{
-      top:30px;
-      left:0;
-    }
-    .door-img{
-      top:-2px;
-      right:15px;
-      transform: scaleX(-1) rotate(180deg);
-    }
-  }
-}
-.mapComponent-map-8-10{
-  .map-for-room-box:nth-child(-n+9){
-    width:130px;
-    height:172px;
-    border-bottom:2px solid #fff;
-    border-right:2px solid #fff;
-  }
-  .map-for-room-box:nth-child(10){
-    width:136px;
-    height:172px;
-    border-bottom:2px solid #fff;
-  }
-  .map-for-room-box:nth-child(11){
-    width:396px;
-    height:172px;
-    border-top:2px solid #fff;
-    border-right:2px solid #fff;
-    margin-top:87px;
-  }
-  .map-for-room-box:nth-child(n+12):nth-child(-n+17){
-    width:130px;
-    height:172px;
-    border-top:2px solid #fff;
-    border-right:2px solid #fff;
-    margin-top:87px;
-  }
-  .map-for-room-box:nth-child(18){
-    width:130px;
-    height:172px;
-    border-top:2px solid #fff;
-    margin-top:87px;
-  }
-  .corridor-background{
-    top:172px;
-  }
-  .map-for-room-box:nth-child(-n+10){
-    .map-room-box{
-      top:0;
-      left:0;
-    }
-    .map-build-user-box{
-      bottom:30px;
-      left:0;
-    }
-    .door-img{
-      bottom:-2px;
-      right:15px;
-    }
-  }
-  .map-for-room-box:nth-child(n+11):nth-child(-n+18){
-    .map-room-box{
-      bottom:0;
-      left:0;
-    }
-    .map-build-user-box{
-      top:30px;
-      left:0;
-    }
-    .door-img{
-      top:-2px;
-      right:15px;
-      transform: scaleX(-1) rotate(180deg);
-    }
-  }
-}

src/utils/mapList.js

@@ -1,623 +0,0 @@
-let mapList = [
-  //1-3区mapComponent-map-1-3
-  //1区
-  {
-    floorId:process.env.VUE_APP_FLOOR_ID_1,
-    floorName:'1区',
-    list:[
-      {
-        roomNumName:'A01',
-      },
-      {
-        roomNumName:'A02',
-      },
-      {
-        roomNumName:'A03',
-      },
-      {
-        roomNumName:'A04',
-      },
-      {
-        roomNumName:'A05',
-      },
-      {
-        roomNumName:'A06',
-      },
-      {
-        roomNumName:'A07',
-      },
-      {
-        roomNumName:'A08',
-      },
-      {
-        roomNumName:'A09',
-      },
-      {
-        roomNumName:'A10',
-      },
-      {
-        roomNumName:'A11',
-      },
-      {
-        roomNumName:'B01',
-      },
-      {
-        roomNumName:'B02',
-      },
-      {
-        roomNumName:'B03',
-      },
-      {
-        roomNumName:'B04',
-      },
-      {
-        roomNumName:'B05',
-      },
-      {
-        roomNumName:'B06',
-      },
-      {
-        roomNumName:'B07',
-      },
-      {
-        roomNumName:'B08',
-      },
-    ],
-  },
-  //2区
-  {
-    floorId:process.env.VUE_APP_FLOOR_ID_2,
-    floorName:'2区',
-    list:[
-      {
-        roomNumName:'C01',
-      },
-      {
-        roomNumName:'C02',
-      },
-      {
-        roomNumName:'C03',
-      },
-      {
-        roomNumName:'C04',
-      },
-      {
-        roomNumName:'C05',
-      },
-      {
-        roomNumName:'C06',
-      },
-      {
-        roomNumName:'C07',
-      },
-      {
-        roomNumName:'C08',
-      },
-      {
-        roomNumName:'C09',
-      },
-      {
-        roomNumName:'C10',
-      },
-      {
-        roomNumName:'C11',
-      },
-      {
-        roomNumName:'D01',
-      },
-      {
-        roomNumName:'D02',
-      },
-      {
-        roomNumName:'D03',
-      },
-      {
-        roomNumName:'D04',
-      },
-      {
-        roomNumName:'D05',
-      },
-      {
-        roomNumName:'D06',
-      },
-      {
-        roomNumName:'D07',
-      },
-      {
-        roomNumName:'D08',
-      },
-    ],
-  },
-  //3区
-  {
-    floorId:process.env.VUE_APP_FLOOR_ID_3,
-    floorName:'3区',
-    list:[
-      {
-        roomNumName:'E01',
-      },
-      {
-        roomNumName:'E02',
-      },
-      {
-        roomNumName:'E03',
-      },
-      {
-        roomNumName:'E04',
-      },
-      {
-        roomNumName:'E05',
-      },
-      {
-        roomNumName:'E06',
-      },
-      {
-        roomNumName:'E07',
-      },
-      {
-        roomNumName:'E08',
-      },
-      {
-        roomNumName:'E09',
-      },
-      {
-        roomNumName:'E10',
-      },
-      {
-        roomNumName:'E11',
-      },
-      {
-        roomNumName:'F01',
-      },
-      {
-        roomNumName:'F02',
-      },
-      {
-        roomNumName:'F03',
-      },
-      {
-        roomNumName:'F04',
-      },
-      {
-        roomNumName:'F05',
-      },
-      {
-        roomNumName:'F06',
-      },
-      {
-        roomNumName:'F07',
-      },
-      {
-        roomNumName:'F08',
-      },
-    ],
-  },
-  //4-5区mapComponent-map-4-5
-  //4区
-  {
-    floorId:process.env.VUE_APP_FLOOR_ID_4,
-    floorName:'4区',
-    list:[
-      {
-        roomNumName:'G01',
-      },
-      {
-        roomNumName:'G02',
-      },
-      {
-        roomNumName:'G03',
-      },
-      {
-        roomNumName:'G04',
-      },
-      {
-        roomNumName:'G05',
-      },
-      {
-        roomNumName:'G06',
-      },
-      {
-        roomNumName:'G07',
-      },
-      {
-        roomNumName:'G08',
-      },
-      {
-        roomNumName:'G09',
-      },
-      {
-        roomNumName:'H01',
-      },
-      {
-        roomNumName:'H02',
-      },
-      {
-        roomNumName:'H03',
-      },
-      {
-        roomNumName:'H04',
-      },
-      {
-        roomNumName:'H05',
-      },
-      {
-        roomNumName:'H06',
-      },
-      {
-        roomNumName:'H07',
-      },
-      {
-        roomNumName:'H08',
-      },
-      {
-        roomNumName:'H09',
-      },
-    ],
-  },
-  //5区
-  {
-    floorId:process.env.VUE_APP_FLOOR_ID_5,
-    floorName:'5区',
-    list:[
-      {
-        roomNumName:'I01',
-      },
-      {
-        roomNumName:'I02',
-      },
-      {
-        roomNumName:'I03',
-      },
-      {
-        roomNumName:'I04',
-      },
-      {
-        roomNumName:'I05',
-      },
-      {
-        roomNumName:'I06',
-      },
-      {
-        roomNumName:'I07',
-      },
-      {
-        roomNumName:'I08',
-      },
-      {
-        roomNumName:'I09',
-      },
-      {
-        roomNumName:'J01',
-      },
-      {
-        roomNumName:'J02',
-      },
-      {
-        roomNumName:'J03',
-      },
-      {
-        roomNumName:'J04',
-      },
-      {
-        roomNumName:'J05',
-      },
-      {
-        roomNumName:'J06',
-      },
-      {
-        roomNumName:'J07',
-      },
-      {
-        roomNumName:'J08',
-      },
-      {
-        roomNumName:'J09',
-      },
-    ],
-  },
-  //6-7区mapComponent-map-6-7
-  //6区
-  {
-    floorId:process.env.VUE_APP_FLOOR_ID_6,
-    floorName:'6区',
-    list:[
-      {
-        roomNumName:'K01',
-      },
-      {
-        roomNumName:'K02',
-      },
-      {
-        roomNumName:'K03',
-      },
-      {
-        roomNumName:'K04',
-      },
-      {
-        roomNumName:'K05',
-      },
-      {
-        roomNumName:'K06',
-      },
-      {
-        roomNumName:'K07',
-      },
-      {
-        roomNumName:'K08',
-      },
-      {
-        roomNumName:'K09',
-      },
-      {
-        roomNumName:'L01',
-      },
-      {
-        roomNumName:'L02',
-      },
-      {
-        roomNumName:'L03',
-      },
-      {
-        roomNumName:'L04',
-      },
-      {
-        roomNumName:'L05',
-      },
-      {
-        roomNumName:'L06',
-      },
-      {
-        roomNumName:'L07',
-      },
-    ],
-  },
-  //7区
-  {
-    floorId:process.env.VUE_APP_FLOOR_ID_7,
-    floorName:'7区',
-    list:[
-      {
-        roomNumName:'M01',
-      },
-      {
-        roomNumName:'M02',
-      },
-      {
-        roomNumName:'M03',
-      },
-      {
-        roomNumName:'M04',
-      },
-      {
-        roomNumName:'M05',
-      },
-      {
-        roomNumName:'M06',
-      },
-      {
-        roomNumName:'M07',
-      },
-      {
-        roomNumName:'M08',
-      },
-      {
-        roomNumName:'M09',
-      },
-      {
-        roomNumName:'N01',
-      },
-      {
-        roomNumName:'N02',
-      },
-      {
-        roomNumName:'N03',
-      },
-      {
-        roomNumName:'N04',
-      },
-      {
-        roomNumName:'N05',
-      },
-      {
-        roomNumName:'N06',
-      },
-      {
-        roomNumName:'N07',
-      },
-    ],
-  },
-  //8-10区mapComponent-map-8-10
-  //8区
-  {
-    floorId:process.env.VUE_APP_FLOOR_ID_8,
-    floorName:'8区',
-    list:[
-      {
-        roomNumName:'O01',
-      },
-      {
-        roomNumName:'O02',
-      },
-      {
-        roomNumName:'O03',
-      },
-      {
-        roomNumName:'O04',
-      },
-      {
-        roomNumName:'O05',
-      },
-      {
-        roomNumName:'O06',
-      },
-      {
-        roomNumName:'O07',
-      },
-      {
-        roomNumName:'O08',
-      },
-      {
-        roomNumName:'O09',
-      },
-      {
-        roomNumName:'O10',
-      },
-      {
-        roomNumName:'P01',
-      },
-      {
-        roomNumName:'P02',
-      },
-      {
-        roomNumName:'P03',
-      },
-      {
-        roomNumName:'P04',
-      },
-      {
-        roomNumName:'P05',
-      },
-      {
-        roomNumName:'P06',
-      },
-      {
-        roomNumName:'P07',
-      },
-      {
-        roomNumName:'P08',
-      },
-    ],
-  },
-  //9区
-  {
-    floorId:process.env.VUE_APP_FLOOR_ID_9,
-    floorName:'9区',
-    list:[
-      {
-        roomNumName:'Q01',
-      },
-      {
-        roomNumName:'Q02',
-      },
-      {
-        roomNumName:'Q03',
-      },
-      {
-        roomNumName:'Q04',
-      },
-      {
-        roomNumName:'Q05',
-      },
-      {
-        roomNumName:'Q06',
-      },
-      {
-        roomNumName:'Q07',
-      },
-      {
-        roomNumName:'Q08',
-      },
-      {
-        roomNumName:'Q09',
-      },
-      {
-        roomNumName:'Q10',
-      },
-      {
-        roomNumName:'R01',
-      },
-      {
-        roomNumName:'R02',
-      },
-      {
-        roomNumName:'R03',
-      },
-      {
-        roomNumName:'R04',
-      },
-      {
-        roomNumName:'R05',
-      },
-      {
-        roomNumName:'R06',
-      },
-      {
-        roomNumName:'R07',
-      },
-      {
-        roomNumName:'R08',
-      },
-    ],
-  },
-  //10区
-  {
-    floorId:process.env.VUE_APP_FLOOR_ID_10,
-    floorName:'10区',
-    list:[
-      {
-        roomNumName:'S01',
-      },
-      {
-        roomNumName:'S02',
-      },
-      {
-        roomNumName:'S03',
-      },
-      {
-        roomNumName:'S04',
-      },
-      {
-        roomNumName:'S05',
-      },
-      {
-        roomNumName:'S06',
-      },
-      {
-        roomNumName:'S07',
-      },
-      {
-        roomNumName:'S08',
-      },
-      {
-        roomNumName:'S09',
-      },
-      {
-        roomNumName:'S10',
-      },
-      {
-        roomNumName:'T01',
-      },
-      {
-        roomNumName:'T02',
-      },
-      {
-        roomNumName:'T03',
-      },
-      {
-        roomNumName:'T04',
-      },
-      {
-        roomNumName:'T05',
-      },
-      {
-        roomNumName:'T06',
-      },
-      {
-        roomNumName:'T07',
-      },
-      {
-        roomNumName:'T08',
-      },
-    ],
-  },
-]
-
-export function getFloorMap(floorId) {
-  let mapData = {};
-  mapList.forEach((item)=>{
-    if(item.floorId == floorId){
-      mapData = JSON.parse(JSON.stringify(item))
-    }
-  })
-  return mapData
-}

src/views/components/centerNotice.vue

@@ -0,0 +1,34 @@
+<!--通知组件-->
+<template>
+  <div class="centerNotice">
+
+  </div>
+</template>
+<script>
+  export default {
+    name: 'centerNotice',
+    data () {
+      return {
+
+      }
+    },
+    created(){
+
+    },
+    mounted(){
+
+    },
+    methods:{
+
+    },
+  }
+</script>
+<style scoped lang="scss">
+  .centerNotice{
+    width:1314px;
+    height:753px;
+    overflow: hidden;
+    background-image: url("../../assets/ZDimages/img_sptz_bg@1x.png");
+    background-size: 100% 100%;
+  }
+</style>

src/views/components/components/titleComponent.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="titleComponent">
+    <p class="title-left">{{titleData.name}}</p>
+    <img src="@/assets/ZDimages/icon_jg@1x.png">
+    <p class="title-right">{{titleData.text}}</p>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'titleComponent',
+    props: {
+      titleData: {
+        name:'',
+        text:'',
+      }
+    },
+    data () {
+      return {
+
+      }
+    },
+    created(){
+
+    },
+    mounted(){
+
+    },
+    methods:{
+
+    },
+  }
+</script>
+<style scoped lang="scss">
+  .titleComponent{
+    display: flex;
+    .title-left{
+      margin-left:65px;
+      height:60px;
+      line-height:60px;
+      font-size:24px;
+      font-family: Alimama ShuHeiTi;
+      color:#fff;
+    }
+    img{
+      width:9px;
+      height:9px;
+      margin:25px 18px 0;
+    }
+    .title-right{
+      height:60px;
+      line-height:60px;
+      font-size:16px;
+      font-weight: bold;
+      background: -webkit-linear-gradient(#FFFFFF, #0095FF);
+      -webkit-background-clip: text;
+      color: transparent;
+    }
+  }
+</style>

src/views/components/facilityUtilizationRate.vue

@@ -0,0 +1,484 @@
+<!--设施使用率及状态统计-->
+<template>
+  <div class="facilityUtilizationRate">
+    <titleComponent :titleData="titleData"></titleComponent>
+    <div class="eCharts-max-big-top-box">
+      <div class="eCharts-box" id="facilityUtilizationRate-eCharts-1">
+
+      </div>
+      <div class="eCharts-box" id="facilityUtilizationRate-eCharts-2">
+
+      </div>
+      <div class="eCharts-box" id="facilityUtilizationRate-eCharts-3">
+
+      </div>
+      <div class="eCharts-box" id="facilityUtilizationRate-eCharts-4">
+
+      </div>
+      <div class="eCharts-box" id="facilityUtilizationRate-eCharts-5">
+
+      </div>
+      <div class="eCharts-box" id="facilityUtilizationRate-eCharts-6">
+
+      </div>
+    </div>
+    <div class="eCharts-max-big-bottom-box" id="facilityUtilizationRate-eCharts-7">
+
+    </div>
+  </div>
+</template>
+<script>
+  import titleComponent from './components/titleComponent.vue'
+  export default {
+    name: 'facilityUtilizationRate',
+    components: {
+      titleComponent,
+    },
+    data() {
+      return {
+        titleData:{
+          name:'设施使用率及状态统计',
+          text:'Facility utilization rate and status statistics',
+        },
+        //eCharts数据
+        eChartsData1:null,
+        eChartsData2:null,
+        eChartsData3:null,
+        eChartsData4:null,
+        eChartsData5:null,
+        eChartsData6:null,
+        eChartsData7:null,
+        //学院统计数据
+        newData:{
+          deptName:['学院1','学院2','学院3','学院4','学院5'],
+          list1:[1,2,3,4,5],
+          list2:[2,3,4,5,6],
+          list3:[3,4,5,6,7],
+          list4:[4,5,6,7,8],
+          list5:[5,6,7,8,9],
+          list6:[6,7,8,9,10],
+        },
+        //图标轮播
+        eChartsTimerData:null,
+        eChartsCarouselTime:2000,
+        eChartsCarouselIndex:0,
+      }
+    },
+    created() {
+
+    },
+    mounted() {
+      this.demo1();
+      this.eChartsListMethod();
+    },
+    methods: {
+      demo1(){
+        this.eChartsMethod(this.eChartsData1,{ name:'温室',value:10,color1:'#FF3131',color2:'rgba(221, 111, 114, 1)',color3:'rgba(221, 111, 114, 0.2)' },'facilityUtilizationRate-eCharts-1')
+        this.eChartsMethod(this.eChartsData2,{ name:'温室附属房',value:25,color1:'#FF8D12',color2:'rgba(255, 132, 0, 1)',color3:'rgba(255, 132, 0, 0.2)' },'facilityUtilizationRate-eCharts-2')
+        this.eChartsMethod(this.eChartsData3,{ name:'顶置光型人工气候室',value:40,color1:'#17C700',color2:'rgba(104, 231, 88, 1)',color3:'rgba(104, 231, 88, 0.2)' },'facilityUtilizationRate-eCharts-3')
+        this.eChartsMethod(this.eChartsData4,{ name:'冷库',value:55,color1:'#0B94F4',color2:'rgba(65, 177, 255, 1)',color3:'rgba(65, 177, 255, 0.2)' },'facilityUtilizationRate-eCharts-4')
+        this.eChartsMethod(this.eChartsData5,{ name:'种质资源库',value:70,color1:'#AE7CF9',color2:'rgba(180, 130, 255, 1)',color3:'rgba(180, 130, 255, 0.2)' },'facilityUtilizationRate-eCharts-5')
+        this.eChartsMethod(this.eChartsData6,{ name:'培养架型人工气候室',value:85,color1:'#00FFFF',color2:'rgba(68, 255, 255, 1)',color3:'rgba(68, 255, 255, 0.2)' },'facilityUtilizationRate-eCharts-6')
+      },
+      eChartsMethod(eChartsData,item,boxId) {
+        var maxValue = 100
+        let option = {
+          title: [{
+            text: item.name,
+            x: 'center',
+            bottom: '0',
+            textStyle: {
+              color: '#ffffff',
+              fontSize: '18',
+              fontWeight: '100'
+            }
+          }, {
+            text: item.value + '%',
+            x: 'center',
+            top: '37%',
+            textStyle: {
+              fontSize: '28',
+              color: item.color1,
+              fontWeight: '400',
+            }
+          }],
+          angleAxis: {
+            show: false,
+            max: maxValue * 360 / 360, //-45度到225度，二者偏移值是270度除360度
+            type: 'value',
+            startAngle: 90, //极坐标初始角度
+            splitLine: {
+              show: false
+            }
+          },
+          barMaxWidth: 16, //圆环宽度
+          radiusAxis: {
+            show: false,
+            type: 'category'
+          },
+          //圆环位置和大小
+          polar: {
+            center: ['50%', '43%'],
+            radius: '130%'
+          },
+          series: [{
+            type: 'bar',
+            data: [{ //上层圆环，显示数据
+              value: item.value,
+              itemStyle: {
+                normal: {
+                  color: this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                    offset: 0,
+                    color: item.color2
+                  }, {
+                    offset: 1,
+                    color: item.color3
+                  }])
+                }
+              }
+            }],
+            barGap: '-100%', //柱间距离,上下两层圆环重合
+            coordinateSystem: 'polar',
+            roundCap: true, //顶端圆角
+            z: 3 //圆环层级，同zindex
+          }, { //下层圆环，显示最大值
+            type: 'bar',
+            data: [{
+              value: maxValue,
+              itemStyle: {
+                color: '#02152e',
+                opacity: 0.2,
+                borderWidth: 0
+              }
+            }],
+            barGap: '-100%',
+            coordinateSystem: 'polar',
+            roundCap: true,
+            z: 1
+          }]
+        };
+        eChartsData = this.$echarts.init(document.getElementById(boxId))
+        eChartsData.clear()
+        eChartsData.setOption(option)
+      },
+      eChartsListMethod(){
+        let option = {
+          legend: {
+            show:false,
+          },
+          color: [
+            {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [{
+              offset: 0,
+              color: 'rgba(221, 111, 114, 1)'
+            }, {
+              offset: 1,
+              color: 'rgba(221, 111, 114, 0.2)'
+            }]
+          },
+            {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [{
+              offset: 0,
+              color: 'rgba(255, 132, 0, 1)'
+            }, {
+              offset: 1,
+              color: 'rgba(255, 132, 0, 0.2)'
+            }]
+          },
+            {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [{
+              offset: 0,
+              color: 'rgba(104, 231, 88, 1)'
+            }, {
+              offset: 1,
+              color: 'rgba(104, 231, 88, 0.2)'
+            }]
+          },
+            {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [{
+              offset: 0,
+              color: 'rgba(65, 177, 255, 1)'
+            }, {
+              offset: 1,
+              color: 'rgba(65, 177, 255, 0.2)'
+            }]
+          },
+            {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [{
+              offset: 0,
+              color: 'rgba(180, 130, 255, 1)'
+            }, {
+              offset: 1,
+              color: 'rgba(180, 130, 255, 0.2)'
+            }]
+          },
+            {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [{
+              offset: 0,
+              color: 'rgba(68, 255, 255, 1)'
+            }, {
+              offset: 1,
+              color: 'rgba(68, 255, 255, 0.2)'
+            }]
+          },
+          ],
+          //浮窗
+          tooltip: {
+            trigger: "axis",
+            axisPointer: {
+              type: "shadow"
+            },
+            // 自定义提示框内容
+            formatter: (data) => {
+              let str = '<div style="color:#ffffff;font-size: 18px;margin-bottom: 5px;">' + data[0].axisValue + '</br></div>'
+              data.reverse().forEach(item => {
+                str = str +
+                  '<div style="line-height:30px;font-size: 16px;padding: 4px 8px 4px 0">' +
+                  '<div style="display:inline-block;border-radius:2px;margin:3px 10px 0 6px;width:12px;height:12px;background-color:' + item.color.colorStops[0].color + ';"></div>' +
+                  item.seriesName + ' : ' + item.data +
+                  '</br></div>'
+              })
+              return str
+            },
+            textStyle: {
+              color: "#ffffff",
+              fontSize: 16,
+            },
+            backgroundColor: "rgba(0,0,0,0.7)",
+            borderColor: "rgba(0,0,0,0.7)",
+          },
+          grid: {
+            left: '10%',
+            right: '10%',
+            top: '10%',
+            bottom: '10%',
+            containLabel: true,
+          },
+          xAxis: {
+            //学院名称
+            data: this.newData.deptName,
+            axisLabel: {
+              color: "#fff",
+              fontSize: 16,
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#fff',
+                type: 'solid'
+              }
+            },
+            axisTick: {
+              show: false
+            },
+          },
+          yAxis: {
+            name: '',
+            axisLabel: {
+              color: "#ffffff",
+              fontSize: 14,
+            },
+            axisLine: {
+              show:true,
+              lineStyle: {
+                color: '#fff',
+                type: 'solid',
+              }
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: ['rgba(65,164,255,0.3)'],
+                width: 1,
+                type: 'dashed'
+              },
+            },
+          },
+          series: [
+            //温室
+            {
+              name: "温室",
+              type: "bar",
+              stack: "total",
+              label: {
+                show: false,
+                color: "#FFFFFF",
+                formatter: "{a}",
+              },
+              emphasis: {
+                focus: "series",
+              },
+              barWidth: 16,
+              data: this.newData.list1,
+            },
+            //温室附属房
+            {
+              name: "温室附属房",
+              type: "bar",
+              stack: "total",
+              label: {
+                show: false,
+                color: "#FFFFFF",
+                formatter: "{a}",
+              },
+              emphasis: {
+                focus: "series",
+              },
+              barWidth: 16,
+              data: this.newData.list2,
+            },
+            //顶置光型人工气候室
+            {
+              name: "顶置光型人工气候室",
+              type: "bar",
+              stack: "total",
+              label: {
+                show: false,
+                color: "#FFFFFF",
+                formatter: "{a}",
+              },
+              emphasis: {
+                focus: "series",
+              },
+              barWidth: 16,
+              data: this.newData.list3,
+            },
+            //冷库
+            {
+              name: "冷库",
+              type: "bar",
+              stack: "total",
+              label: {
+                show: false,
+                color: "#FFFFFF",
+                formatter: "{a}",
+              },
+              emphasis: {
+                focus: "series",
+              },
+              barWidth: 16,
+              data: this.newData.list4,
+            },
+            //种质资源库
+            {
+              name: "种质资源库",
+              type: "bar",
+              stack: "total",
+              label: {
+                show: false,
+                color: "#FFFFFF",
+                formatter: "{a}",
+              },
+              emphasis: {
+                focus: "series",
+              },
+              barWidth: 16,
+              data: this.newData.list5,
+            },
+            //培养架型人工气候室
+            {
+              name: "培养架型人工气候室",
+              type: "bar",
+              stack: "total",
+              label: {
+                show: false,
+                color: "#FFFFFF",
+                formatter: "{a}",
+              },
+              emphasis: {
+                focus: "series",
+              },
+              barWidth: 16,
+              data: this.newData.list6,
+            },
+          ],
+        };
+        this.eChartsData7 = this.$echarts.init(document.getElementById('facilityUtilizationRate-eCharts-7'))
+        this.eChartsData7.clear()
+        this.eChartsData7.setOption(option)
+        this.eChartsTimer();
+      },
+      eChartsTimer(){
+        let self = this;
+        self.eChartsTimerData = window.setInterval(eChartsCarousel, this.eChartsCarouselTime);
+        async function eChartsCarousel() {
+          self.eChartsData7.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: self.eChartsCarouselIndex
+          });
+          if(self.eChartsCarouselIndex<self.newData.deptName.length-1){
+            self.eChartsCarouselIndex++
+          }else{
+            self.$set(self,'eChartsCarouselIndex',0);
+          }
+        }
+      },
+    },
+    beforeDestroy() {
+      //清除定时器
+      clearInterval(this.eChartsTimerData);
+    },
+    destroyed() {
+      //清除定时器
+      clearInterval(this.eChartsTimerData);
+    }
+  }
+</script>
+<style scoped lang="scss">
+  .facilityUtilizationRate {
+    width:826px;
+    height:937px;
+    margin-top:21px;
+    background-image: url("../../assets/ZDimages/img_sssyljzttj_bg@1x.png");
+    background-size: 100% 100%;
+    position: relative;
+    overflow: hidden;
+    .eCharts-max-big-top-box{;
+      width:801px;
+      height:432px;
+      margin:42px 12px 0;
+      overflow: hidden;
+      .eCharts-box{
+        display: inline-block;
+        width:267px;
+        height:216px;
+        overflow: hidden;
+      }
+    }
+    .eCharts-max-big-bottom-box{
+      width:826px;
+      height:402px;
+      overflow: hidden;
+    }
+  }
+</style>

src/views/components/headComponent.vue

@@ -1,24 +1,34 @@
 <!--title-->
 <template>
   <div class="headComponent">
-    <img class="logo-img" src="@/assets/ZDimages/logo.png">
-    <p class="title-p">西北农林科技大学科研温室{{title}}</p>
+    <div class="center-title-box">
+      <img class="logo-img" src="@/assets/ZDimages/logo.png">
+      <p class="title-p">公共科教条件设施数据一张图</p>
+    </div>
     <p class="time-p">{{timeData}}</p>
+    <div class="weather-box">
+      <img class="weather-img" src="@/assets/ZDimages/icon_bjsj_tk@1x.png">
+      <p class="weather-p-1">{{weatherData.cityName}}</p>
+      <svg-icon class="weather-svg" :icon-class="weatherData.iconUrl" v-if="weatherData.iconUrl"/>
+      <p class="weather-p-2">{{weatherData.textDay}}</p>
+      <p class="weather-p-3">{{weatherData.tempMin}}~{{weatherData.tempMax}}℃</p>
+    </div>
   </div>
 </template>
 <script>
   import {
-    laboratoryWsBigViewGetTimeData
+    laboratoryWsBigViewGetTimeData,
+    laboratoryWsBigViewGetWeatherData
   } from "@/api/index";
   export default {
     name: 'headComponent',
     data () {
       return {
         title:'1区环境感知监测中心',
-        dateData:'',
-        weekData:'',
         timeData:'',
         timer:null,
+        weatherData:'',
+        weatherTimer:null,
       }
     },
     created(){
@@ -26,6 +36,7 @@
     },
     mounted(){
       this.timeFunction();
+      this.weatherFunction();
     },
     methods:{
       //时间定时器
@@ -38,42 +49,97 @@
         laboratoryWsBigViewGetTimeData().then(res => {
           this.$set(this,'timeData',res.data)
         })
-      }
+      },
+      //天气定时器
+      weatherFunction(){
+        let self = this;
+        this.laboratoryWsBigViewGetWeatherData();
+        this.weatherTimer = window.setInterval(self.laboratoryWsBigViewGetWeatherData, 360000);
+      },
+      laboratoryWsBigViewGetWeatherData(){
+        laboratoryWsBigViewGetWeatherData().then(res => {
+          let data = JSON.parse(res.data);
+          this.$set(this,'weatherData',data);
+        })
+      },
     },
     beforeDestroy() {
       //清除定时器
       window.clearInterval(this.timer);
+      window.clearInterval(this.weatherTimer);
     },
     destroyed() {
       //清除定时器
       window.clearInterval(this.timer);
+      window.clearInterval(this.weatherTimer);
     }
   }
 </script>
 <style scoped lang="scss">
   .headComponent{
-    height:70px;
+    height:173px;
     display: flex;
-    background: linear-gradient( 180deg, #002055 0%, #013D90 100%);
-    .logo-img{
-      margin:10px 10px 10px 630px;
-      width:50px;
-      height:50px;
+    position: relative;
+    background-image: url("../../assets/ZDimages/img_db@1x.png");
+    background-size: 100% 100%;
+    .center-title-box{
+      display: flex;
+      .logo-img{
+        margin:35px 16px 0 1245px;
+        width:64px;
+        height:64px;
+      }
+      .title-p{
+        flex:1;
+        line-height:48px;
+        height:48px;
+        margin-top:40px;
+        font-family: Alimama ShuHeiTi;
+        font-size: 40px;
+        font-weight: bold;
+        background: -webkit-linear-gradient(#FFFFFF, #0095FF);
+        -webkit-background-clip: text;
+        color: transparent;
+      }
     }
-    .title-p{
-      flex:1;
+    .time-p{
+      position: absolute;
+      top:99px;
+      left:44px;
+      height:30px;
+      line-height:30px;
       color:#fff;
-      line-height:70px;
-      font-family: Source Han Sans, Source Han Sans;
-      font-weight: 700;
-      font-size: 28px;
+      font-size:20px;
     }
-    .time-p{
-      width:240px;
-      line-height: 70px;
-      text-align: center;
+    .weather-box{
+      display: flex;
+      position: absolute;
+      top:99px;
+      right:33px;
+      height:30px;
+      line-height:30px;
       color:#fff;
-      font-size:16px;
+      font-size:20px;
+      .weather-img{
+        width:24px;
+        height:24px;
+        margin:3px 13px 0 0 ;
+      }
+      .weather-p-1{
+
+      }
+      .weather-svg{
+        width:24px;
+        height:24px;
+        color:#fff;
+        margin:3px 10px 0 40px;
+      }
+      .weather-p-2{
+        margin-right:20px;
+      }
+      .weather-p-3{
+
+      }
     }
   }
 </style>

src/views/components/mediaAnnouncementComponent.vue

@@ -1,347 +0,0 @@
-<!--通知公告-->
-<template>
-  <div class="mediaAnnouncementComponent">
-    <div class="content-box" id="scrollTextBox" v-if="pageType == 0" v-html="content"></div>
-    <vue-office-pdf
-      id="scrollPdfBox"
-      :options="{width:1190}"
-      v-if="pageType == 1"
-      :src="lookUrl"
-      @rendered="renderedHandler"
-      @error="errorHandler"
-    />
-    <vue-office-docx
-      id="scrollDocxBox"
-      style="width:1190px;margin:0 auto;"
-      v-if="pageType == 2"
-      :src="lookUrl"
-      @rendered="renderedHandler"
-      @error="errorHandler"
-    />
-    <div class="img-max-big-box" ref="viewBox" v-if="pageType == 3">
-      <img :src="lookImg" ref="viewImg"
-           v-if="imgShowType"
-           :style="'top:'+top+'px;left:'+left+'px;height:'+(height+(heightRatio*ratio))+'px;width:'+(width+(widthRatio*ratio))+'px;'">
-    </div>
-    <div class="mp4-max-big-box" ref="mp4Box" v-if="pageType == 4">
-      <video class="video-player vjs-custom-skin"
-             ref="videoBox"
-             style="display:block;width:1300px;height:731px;margin:140px auto;"
-             autoplay="autoplay"
-             v-if="mp4Url">
-        <source :src="mp4Url" type="video/mp4">
-      </video>
-    </div>
-  </div>
-</template>
-<script>
-  //引入VueOfficeDocx组件
-  import VueOfficeDocx from '@vue-office/docx'
-  import '@vue-office/docx/lib/index.css'
-  //引入VueOfficePdf组件
-  import VueOfficePdf from '@vue-office/pdf'
-  export default {
-    name: 'mediaAnnouncementComponent',
-    props: {
-      mediaAnnouncementComponentData: {}
-    },
-    components: {
-      VueOfficeDocx,
-      VueOfficePdf
-    },
-    data () {
-      return {
-        pageType:null,
-        //文本/文件地址
-        content:null,
-        //img地址
-        lookUrl:null,
-        //MP4地址
-        mp4Url:null,
-        //定时器
-        scrollInterval:null,
-        scrollIntervalTime:16,
-        //图片数据
-        //定位
-        top: 0,
-        left: 0,
-        //尺寸
-        width: 0,
-        height: 0,
-        //最大画布尺寸
-        maxWidth: 0,
-        maxHeight: 0,
-        lookImg: '',
-        imgShowType: false,
-        imgNullType: false,
-        ratio: 1,
-        widthRatio: null,
-        heightRatio: null,
-      }
-    },
-    created(){
-
-    },
-    mounted(){
-      this.initialize();
-    },
-    methods:{
-      initialize(){
-        let self = this;
-        if(this.mediaAnnouncementComponentData.type == 0){
-          this.$set(this,'pageType',0);
-          this.$set(this,'content',this.mediaAnnouncementComponentData.content);
-          setTimeout(function() {
-            self.startScrolling()
-          },500)
-        }else{
-          if(this.mediaAnnouncementComponentData.content.indexOf('.pdf') != -1){
-            this.$set(this,'pageType',1);
-            this.$set(this,'lookUrl',this.mediaAnnouncementComponentData.content);
-          }else if(this.mediaAnnouncementComponentData.content.indexOf('.docx') != -1){
-            this.$set(this,'pageType',2);
-            this.$set(this,'lookUrl',this.mediaAnnouncementComponentData.content);
-          }else if(this.mediaAnnouncementComponentData.content.indexOf('.png') != -1){
-            this.$set(this,'pageType',3);
-            this.getImgData(this.mediaAnnouncementComponentData.content);
-          }else if(this.mediaAnnouncementComponentData.content.indexOf('.jpg') != -1){
-            this.$set(this,'pageType',3);
-            this.getImgData(this.mediaAnnouncementComponentData.content);
-          }else if(this.mediaAnnouncementComponentData.content.indexOf('.mp4') != -1){
-            this.$set(this,'mp4Url',this.mediaAnnouncementComponentData.content);
-            this.$set(this,'pageType',4);
-            this.playVideo();
-          }
-        }
-      },
-      //文件滚动
-      startScrolling() {
-        let scrollBox = null;
-        if(this.pageType == 0){
-          scrollBox = document.getElementById('scrollTextBox');
-        }else if(this.pageType == 1){
-          scrollBox = document.getElementById('scrollPdfBox');
-        }else if(this.pageType == 2){
-          scrollBox = document.getElementById('scrollDocxBox');
-        }
-        const maxScroll = scrollBox.scrollHeight - scrollBox.clientHeight;
-        let currentPos = scrollBox.scrollTop;
-        const speed = 1;
-        this.scrollInterval = setInterval(() => {
-          currentPos += speed;
-          scrollBox.scrollTop = currentPos;
-          // 到达底部时重置到顶部
-          if (currentPos >= maxScroll) {
-            currentPos = 0;
-            scrollBox.scrollTop = 0;
-            // 可选：这里可以重新获取maxScroll，防止内容动态变化
-            // maxScroll = scrollBox.scrollHeight - scrollBox.clientHeight;
-          }
-        }, this.scrollIntervalTime);
-      },
-      //图片数据
-      getImgData(newImg){
-        let self = this;
-        this.$set(this, 'maxWidth', this.$refs['viewBox'].offsetWidth)
-        this.$set(this, 'maxHeight', this.$refs['viewBox'].offsetHeight)
-        // 图片地址
-        let img = new Image()
-        let res = {}
-        img.src = newImg
-        img.onload = function() {
-          res = {
-            width: img.width,
-            height: img.height
-          }
-          if (self.maxWidth >= res.width && self.maxHeight >= res.height) {
-            let w = self.cal.accSub(self.maxWidth, res.width)
-            let h = self.cal.accSub(self.maxHeight, res.height)
-            self.$set(self, 'width', res.width)
-            self.$set(self, 'height', res.height)
-            self.$set(self, 'top', h > 2 ? self.cal.accDiv(h, 2) : 0)
-            self.$set(self, 'left', w > 2 ? self.cal.accDiv(w, 2) : 0)
-            self.$set(self, 'lookImg', newImg)
-            self.$set(self, 'imgShowType', true)
-            self.initializeRation(res.width, res.height)
-          } else if (self.maxWidth >= res.width && self.maxHeight < res.height) {
-            let a = self.cal.accDiv(res.width, res.height)
-            let b = self.cal.accSub(res.height, (self.maxHeight - 100))
-            let c = self.cal.accMul(a, b)
-            let width = self.cal.accSub(res.width, c)
-            let height = self.cal.accSub(res.height, b)
-            let w = self.cal.accSub(self.maxWidth, width)
-            let h = self.cal.accSub(self.maxHeight, height)
-            self.$set(self, 'width', width)
-            self.$set(self, 'height', height)
-            self.$set(self, 'top', h > 2 ? self.cal.accDiv(h, 2) : 0)
-            self.$set(self, 'left', w > 2 ? self.cal.accDiv(w, 2) : 0)
-            self.$set(self, 'lookImg', newImg)
-            self.$set(self, 'imgShowType', true)
-            self.initializeRation(width, height)
-          } else if (self.maxWidth < res.width && self.maxHeight >= res.height) {
-            let a = self.cal.accDiv(res.height, res.width)
-            let b = self.cal.accSub(res.width, (self.maxWidth - 100))
-            let c = self.cal.accMul(a, b)
-            let width = self.cal.accSub(res.width, b)
-            let height = self.cal.accSub(res.height, c)
-            let w = self.cal.accSub(self.maxWidth, width)
-            let h = self.cal.accSub(self.maxHeight, height)
-            self.$set(self, 'width', width)
-            self.$set(self, 'height', height)
-            self.$set(self, 'top', h > 2 ? self.cal.accDiv(h, 2) : 0)
-            self.$set(self, 'left', w > 2 ? self.cal.accDiv(w, 2) : 0)
-            self.$set(self, 'lookImg', newImg)
-            self.$set(self, 'imgShowType', true)
-            self.initializeRation(width, height)
-          } else {
-            let x = self.cal.accSub(res.width, self.maxWidth)
-            let y = self.cal.accSub(res.height, self.maxHeight)
-            if (x >= y) {
-              let a = self.cal.accDiv(res.height, res.width)
-              let b = self.cal.accSub(res.width, (self.maxWidth - 100))
-              let c = self.cal.accMul(a, b)
-              let width = self.cal.accSub(res.width, b)
-              let height = self.cal.accSub(res.height, c)
-              let w = self.cal.accSub(self.maxWidth, width)
-              let h = self.cal.accSub(self.maxHeight, height)
-              self.$set(self, 'width', width)
-              self.$set(self, 'height', height)
-              self.$set(self, 'left', w > 2 ? self.cal.accDiv(w, 2) : 0)
-              self.$set(self, 'top', h > 2 ? self.cal.accDiv(h, 2) : 0)
-              self.$set(self, 'lookImg', newImg)
-              self.$set(self, 'imgShowType', true)
-              self.initializeRation(width, height)
-            } else {
-              let a = self.cal.accDiv(res.width, res.height)
-              let b = self.cal.accSub(res.height, (self.maxHeight - 100))
-              let c = self.cal.accMul(a, b)
-              let width = self.cal.accSub(res.width, c)
-              let height = self.cal.accSub(res.height, b)
-              let w = self.cal.accSub(self.maxWidth, width)
-              let h = self.cal.accSub(self.maxHeight, height)
-              self.$set(self, 'width', width)
-              self.$set(self, 'height', height)
-              self.$set(self, 'left', w > 2 ? self.cal.accDiv(w, 2) : 0)
-              self.$set(self, 'top', h > 2 ? self.cal.accDiv(h, 2) : 0)
-              self.$set(self, 'lookImg', newImg)
-              self.$set(self, 'imgShowType', true)
-              self.initializeRation(width, height)
-            }
-          }
-        }
-        img.onerror = function() {
-          self.$set(self, 'imgNullType', true)
-        }
-      },
-      //播放视频
-      playVideo(){
-        var video = this.$refs.videoBox;
-        video.autoplay = true;
-        video.play()
-      },
-      //初始化缩放倍率
-      initializeRation(w, h) {
-        this.$set(this, 'ratio', 0)
-        this.$set(this, 'widthRatio', this.cal.accDiv(w, 10))
-        this.$set(this, 'heightRatio', this.cal.accDiv(h, 10))
-      },
-      //文件加载成功
-      renderedHandler() {
-        console.log("渲染完成")
-        this.startScrolling()
-      },
-      //文件加载失败
-      errorHandler() {
-        console.log("渲染失败")
-      },
-    },
-    beforeDestroy() {
-      clearInterval(this.scrollInterval);
-    },
-    destroyed() {
-      clearInterval(this.scrollInterval);
-    }
-  }
-</script>
-<style scoped lang="scss">
-  .mediaAnnouncementComponent{
-    height:1020px;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    //富文本
-    .content-box{
-      flex:1;
-      width:1300px;
-      margin:20px auto;
-      overflow-y: scroll;
-    }
-    .content-box::-webkit-scrollbar{
-      width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
-      height: 6px;
-    }
-    .content-box::-webkit-scrollbar-thumb{
-      border-radius: 5px;
-      background: #003988;
-    }
-    .content-box::-webkit-scrollbar-track{
-      -webkit-box-shadow: inset 0 0 5px #FFFFFF;
-      border-radius: 0;
-      background: #FFFFFF;
-      display: none;
-    }
-    //PDF
-    ::v-deep .vue-office-pdf{
-      margin:20px auto!important;
-      width:1190px!important;
-    }
-    ::v-deep .vue-office-pdf-wrapper{
-      background-color: rgba(0,0,0,0)!important;
-    }
-    ::v-deep .vue-office-pdf::-webkit-scrollbar{
-      width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
-      height: 6px;
-    }
-    ::v-deep .vue-office-pdf::-webkit-scrollbar-thumb{
-      border-radius: 5px;
-      background: #003988;
-    }
-    ::v-deep .vue-office-pdf::-webkit-scrollbar-track{
-      -webkit-box-shadow: inset 0 0 5px #FFFFFF;
-      border-radius: 0;
-      background: #FFFFFF;
-      display: none;
-    }
-    //docx
-    ::v-deep .vue-office-docx{
-      margin:20px auto!important;
-      width:1190px!important;
-    }
-    ::v-deep .docx-wrapper{
-      background-color: rgba(0,0,0,0)!important;
-    }
-    ::v-deep .vue-office-docx::-webkit-scrollbar{
-      width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
-      height: 6px;
-    }
-    ::v-deep .vue-office-docx::-webkit-scrollbar-thumb{
-      border-radius: 5px;
-      background: #003988;
-    }
-    ::v-deep .vue-office-docx::-webkit-scrollbar-track{
-      -webkit-box-shadow: inset 0 0 5px #FFFFFF;
-      border-radius: 0;
-      background: #FFFFFF;
-      display: none;
-    }
-    .img-max-big-box{
-      flex: 1;
-      overflow: hidden;
-      position: relative;
-      img {
-        position: absolute;
-        -webkit-user-drag: none;
-      }
-    }
-  }
-</style>

src/views/components/overviewComponent.vue

@@ -1,204 +0,0 @@
-<!--资源设施概览-->
-<template>
-  <div class="overviewComponent">
-    <p class="title-p">资源设施概览</p>
-    <div class="for-max-big-box back-1" style="margin-top:98px;">
-      <img src="@/assets/ZDimages/icon_kxs@1x.png">
-      <div>
-        <p>空闲</p>
-        <p>{{data1}}</p>
-        <p>间</p>
-      </div>
-    </div>
-    <div class="for-max-big-box back-2">
-      <img src="@/assets/ZDimages/icon_shiyong@1x.png">
-      <div>
-        <p>使用</p>
-        <p>{{data1}}</p>
-        <p>间</p>
-      </div>
-    </div>
-    <div class="for-max-big-box back-3">
-      <img src="@/assets/ZDimages/icon_weixiu@1x.png">
-      <div>
-        <p>维修</p>
-        <p>{{data1}}</p>
-        <p>间</p>
-      </div>
-    </div>
-    <img class="position-left-top" src="@/assets/ZDimages/img_min_icon.png">
-    <img class="position-right-top" src="@/assets/ZDimages/img_min_icon.png">
-    <img class="position-left-bottom" src="@/assets/ZDimages/img_min_icon.png">
-    <img class="position-right-bottom" src="@/assets/ZDimages/img_min_icon.png">
-  </div>
-</template>
-<script>
-  import { dashboardsFacilitiesStatusOverview } from "@/api/yiLi";
-  export default {
-    name: 'overviewComponent',
-    data () {
-      return {
-        data1:'0',
-        data2:'0',
-        data3:'0',
-      }
-    },
-    created(){
-
-    },
-    mounted(){
-      this.dashboardsFacilitiesStatusOverview();
-    },
-    methods:{
-      //设施状态概览
-      dashboardsFacilitiesStatusOverview(){
-        let self = this;
-        dashboardsFacilitiesStatusOverview().then(res => {
-          for(let i=0;i<res.data.types.length;i++){
-            if( res.data.types[i].type == '空闲'){
-              self.$set(self,'data1',res.data.types[i].count);
-            }else if( res.data.types[i].type == '使用中'){
-              self.$set(self,'data2',res.data.types[i].count);
-            }else if( res.data.types[i].type == '维修中'){
-              self.$set(self,'data3',res.data.types[i].count);
-            }
-          }
-        });
-      },
-    },
-  }
-</script>
-<style scoped lang="scss">
-  .overviewComponent{
-    width:400px;
-    height:512px;
-    margin:20px 0 0 20px;
-    background-image: url("../../assets/ZDimages/img_zyssgl_bg@1x.png");
-    background-size: 100% 100%;
-    position: relative;
-    .title-p{
-      position: absolute;
-      width:282px;
-      height:36px;
-      line-height: 36px;
-      color:#fff;
-      font-size:18px;
-      font-weight: 700;
-      font-family: Source Han Sans, Source Han Sans;
-      padding-left:24px;
-    }
-    .for-max-big-box{
-      width: 358px;
-      height: 100px;
-      margin:0 20px 32px 20px;
-      display: flex;
-      img{
-        width:70px;
-        height:70px;
-        margin:15px 56px 15px 31px;
-      }
-      div{
-        flex:1;
-        display: flex;
-        margin-right:62px;
-        p{
-          color:#fff;
-          font-size:16px;
-          line-height:100px;
-        }
-      }
-    }
-    .back-1{
-      border: 1px solid transparent;
-      border-radius: 10px;
-      background-clip: padding-box, border-box;
-      background-origin: padding-box, border-box;
-      background-image: linear-gradient(to right, #002B5E, #002B5E), linear-gradient(180deg, #FFFFFF, #83E8AB);
-      div{
-        p:nth-child(2){
-          flex:1;
-          text-align: right;
-          margin-right:20px;
-          font-size: 30px;
-          font-weight: bold;
-          background: -webkit-linear-gradient(#FFFFFF, #00AC45);
-          -webkit-background-clip: text;
-          color: transparent;
-        }
-      }
-    }
-    .back-2{
-      border: 1px solid transparent;
-      border-radius: 10px;
-      background-clip: padding-box, border-box;
-      background-origin: padding-box, border-box;
-      background-image: linear-gradient(to right, #002B5E, #002B5E), linear-gradient(180deg, #FFFFFF, #84FFFB);
-      div{
-        p:nth-child(2){
-          flex:1;
-          text-align: right;
-          margin-right:20px;
-          font-size: 30px;
-          font-weight: bold;
-          background: -webkit-linear-gradient(#FFFFFF, #00FFF6);
-          -webkit-background-clip: text;
-          color: transparent;
-        }
-      }
-    }
-    .back-3{
-      border: 1px solid transparent;
-      border-radius: 10px;
-      background-clip: padding-box, border-box;
-      background-origin: padding-box, border-box;
-      background-image: linear-gradient(to right, #002B5E, #002B5E), linear-gradient(180deg, #FFFFFF, #FFC792);
-      div{
-        p:nth-child(2){
-          flex:1;
-          text-align: right;
-          margin-right:20px;
-          font-size: 30px;
-          font-weight: bold;
-          background: -webkit-linear-gradient(#FFFFFF, #FFA148);
-          -webkit-background-clip: text;
-          color: transparent;
-        }
-      }
-    }
-    .position-left-top{
-      position: absolute;
-      left:-15px;
-      top:29px;
-      width:42px;
-      height:42px;
-      z-index:1;
-    }
-    .position-right-top{
-      position: absolute;
-      right:-15px;
-      top:-15px;
-      width:42px;
-      height:42px;
-      z-index:1;
-      transform: rotate(90deg);
-    }
-    .position-left-bottom{
-      position: absolute;
-      left:-15px;
-      bottom:-15px;
-      width:42px;
-      height:42px;
-      z-index:1;
-      transform: rotate(270deg);
-    }
-    .position-right-bottom{
-      position: absolute;
-      right:-14px;
-      bottom:-15px;
-      width:42px;
-      height:42px;
-      z-index:1;
-      transform: rotate(180deg);
-    }
-  }
-</style>

src/views/components/overviewOfFacilityData.vue

@@ -0,0 +1,529 @@
+<!--设施数据概览-->
+<template>
+  <div class="overviewOfFacilityData">
+    <titleComponent :titleData="titleData"></titleComponent>
+    <div id="overviewOfFacilityData-eCharts">
+
+    </div>
+    <div class="position-right-list-box">
+      <div class="for-box" v-for="(item,index) in optionsData" :key="index">
+        <p :style="'background-color:'+item.itemStyle.color"></p>
+        <p>{{item.name}}</p>
+        <p :style="'color:'+item.itemStyle.color">{{item.value}}间</p>
+      </div>
+    </div>
+    <div class="position-left-list-box">
+      <p>总计</p>
+      <p>{{maxNum}}</p>
+    </div>
+  </div>
+</template>
+<script>
+  import titleComponent from './components/titleComponent.vue'
+  export default {
+    name: 'overviewOfFacilityData',
+    components: {
+      titleComponent,
+    },
+    data() {
+      return {
+        titleData:{
+          name:'设施数据概览',
+          text:'Overview of facility data',
+        },
+        optionsData:[
+          {
+            name: '温室',
+            value: 110,
+            itemStyle: {
+              color: 'rgba(221, 111, 114, 1)'
+            }
+          },
+          {
+            name: '温室附属房',
+            value: 200,
+            itemStyle: {
+              color: 'rgba(255, 132, 0, 1)'
+            }
+          },
+          {
+            name: '顶置光型人工气候室',
+            value: 190,
+            itemStyle: {
+              color: 'rgba(104, 231, 88, 1)'
+            }
+          },
+          {
+            name: '冷库',
+            value: 190,
+            itemStyle: {
+              color: 'rgba(65, 177, 255, 1)'
+            }
+          },
+          {
+            name: '种质资源库',
+            value: 190,
+            itemStyle: {
+              color: 'rgba(180, 130, 255, 1)'
+            }
+          },
+          {
+            name: '培养架型人工气候室',
+            value: 190,
+            itemStyle: {
+              color: 'rgba(68, 255, 255, 1)'
+            }
+          }
+        ],
+        maxNum:900,
+        echartsBox1: null
+      }
+    },
+    created() {
+
+    },
+    mounted() {
+      this.eChartsMethod();
+    },
+    methods: {
+      eChartsMethod() {
+        let self = this;
+        // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+        function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+          // 计算
+          let midRatio = (startRatio + endRatio) / 2
+
+          let startRadian = startRatio * Math.PI * 2
+          let endRadian = endRatio * Math.PI * 2
+          let midRadian = midRatio * Math.PI * 2
+          isSelected = false
+          // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+          k = typeof k !== 'undefined' ? k : 1 / 3
+
+          // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+          let offsetX = isSelected ? Math.sin(midRadian) * 0.1 : 0
+          let offsetY = isSelected ? Math.cos(midRadian) * 0.1 : 0
+
+          // 计算高亮效果的放大比例（未高亮，则比例为 1）
+          let hoverRate = isHovered ? 1.05 : 1
+
+          // 返回曲面参数方程
+          return {
+            u: {
+              min: -Math.PI,
+              max: Math.PI * 3,
+              step: Math.PI / 32
+            },
+
+            v: {
+              min: 0,
+              max: Math.PI * 2,
+              step: Math.PI / 20
+            },
+
+            x: function(u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetX +
+                  Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                )
+              }
+              if (u > endRadian) {
+                return (
+                  offsetX +
+                  Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                )
+              }
+              return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate
+            },
+
+            y: function(u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetY +
+                  Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                )
+              }
+              if (u > endRadian) {
+                return (
+                  offsetY +
+                  Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                )
+              }
+              return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate
+            },
+
+            z: function(u, v) {
+              if (u < -Math.PI * 0.5) {
+                return Math.sin(u)
+              }
+              if (u > Math.PI * 2.5) {
+                return Math.sin(u) * h * 0.1
+              }
+              return Math.sin(v) > 0 ? 1 * h * 0.1 : -1
+            }
+          }
+        }
+        // 生成模拟 3D 饼图的配置项
+        function getPie3D(pieData, internalDiameterRatio) {
+          let series = []
+          let sumValue = 0
+          let startValue = 0
+          let endValue = 0
+          let legendData = []
+          let k =
+            typeof internalDiameterRatio !== 'undefined'
+              ? (0.8 - internalDiameterRatio) / (0.8 + internalDiameterRatio)
+              : 0.8 / 3
+
+          // 为每一个饼图数据，生成一个 series-surface 配置
+          for (let i = 0; i < pieData.length; i++) {
+            sumValue += pieData[i].value
+
+            let seriesItem = {
+              name:
+                typeof pieData[i].name === 'undefined'
+                  ? `series${i}`
+                  : pieData[i].name,
+              type: 'surface',
+              parametric: true,
+              wireframe: {
+                show: false
+              },
+              pieData: pieData[i],
+              pieStatus: {
+                selected: false,
+                hovered: false,
+                k: 1 / 10
+              }
+            }
+
+            if (typeof pieData[i].itemStyle != 'undefined') {
+              let itemStyle = {}
+
+              typeof pieData[i].itemStyle.color != 'undefined'
+                ? (itemStyle.color = pieData[i].itemStyle.color)
+                : null
+              typeof pieData[i].itemStyle.opacity != 'undefined'
+                ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                : null
+
+              seriesItem.itemStyle = itemStyle
+            }
+            series.push(seriesItem)
+          }
+
+          // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+          // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+          for (let i = 0; i < series.length; i++) {
+            endValue = startValue + series[i].pieData.value
+
+            series[i].pieData.startRatio = startValue / sumValue
+            series[i].pieData.endRatio = endValue / sumValue
+            series[i].parametricEquation = getParametricEquation(
+              series[i].pieData.startRatio,
+              series[i].pieData.endRatio,
+              false,
+              false,
+              k,
+              series[i].pieData.value
+            )
+
+            startValue = endValue
+
+            legendData.push(series[i].name)
+          }
+          return series
+        }
+        const series = getPie3D(self.optionsData, 0.6)
+        series.push({
+          name: 'pie2d',
+          type: 'pie',
+          startAngle: 2, //起始角度，支持范围[0, 360]。
+          clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+          radius: ['50%', '60%'],
+          center: ['62%', '50%'],
+          data: self.optionsData,
+          itemStyle: {
+            opacity: 0
+          },
+          labelLine: {
+            show: false
+          },
+          label: {
+            show: false,
+            position: 'center'
+          }
+        })
+        // 最底下圆盘
+        series.push({
+          name: 'mouseoutSeries',
+          type: 'surface',
+          parametric: true,
+          wireframe: {
+            show: false
+          },
+          itemStyle: {
+            opacity: 1,
+            color: '#011b42'
+          },
+          parametricEquation: {
+            u: {
+              min: 0,
+              max: Math.PI * 2,
+              step: Math.PI / 20
+            },
+            v: {
+              min: 0,
+              max: Math.PI * 2,
+              step: Math.PI / 20
+            },
+            x: function(u, v) {
+              return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2
+            },
+            y: function(u, v) {
+              return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2
+            },
+            z: function(u, v) {
+              return Math.cos(v) > 0 ? -0 : -1.5
+            }
+          }
+        })
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        let option = {
+          legend: {
+            show: false
+            // tooltip: {
+            //   show: true,
+            // },
+            // orient: "vertical",
+            // data: nameList,
+            // top: "center",
+            // itemGap: 30,
+            // itemHeight: 14,
+            // itemWidth: 24,
+            // right: "4%",
+            // textStyle: {
+            //   color: "#fff",
+            //   fontSize: 12,
+            //   rich: {
+            //     name: {
+            //       width: 60,
+            //       fontSize: 24,
+            //       color: "#B0D8DF",
+            //       fontFamily: "Source Han Sans CN",
+            //     },
+            //     value: {
+            //       width: 50,
+            //       fontSize: 24,
+            //       padding: [0, 5, 0, 5],
+            //       color: "#fff",
+            //       fontFamily: "Source Han Sans CN",
+            //     },
+            //     A: {
+            //       fontSize: 20,
+            //       color: "#B0D8DF",
+            //       fontFamily: "Source Han Sans CN",
+            //     },
+            //     rate: {
+            //       width: 60,
+            //       fontSize: 24,
+            //       padding: [0, 5, 0, 10],
+            //       color: "#10DD24",
+            //       fontFamily: "Source Han Sans CN",
+            //     },
+            //     B: {
+            //       fontSize: 20,
+            //       color: "#B0D8DF",
+            //       fontFamily: "Source Han Sans CN",
+            //     },
+            //   },
+            // },
+            // formatter: function (name) {
+            //   let total = 0;
+            //   let target;
+            //   for (let i = 0; i < self.optionsData.length; i++) {
+            //     total += self.optionsData[i].value;
+            //     if (self.optionsData[i].name === name) {
+            //       target = self.optionsData[i].value;
+            //     }
+            //   }
+            //   let arr = [
+            //     "{name|" + name + "}",
+            //     "{value|" + target + "}{A|间}",
+            //   ];
+            //   return arr.join("  ");
+            // },
+          },
+
+          // title: [
+          //   {
+          //     x: 'center',
+          //     top: '48%',
+          //     text: maxNum,
+          //     textStyle: {
+          //       color: '#fff',
+          //       fontSize: 42,
+          //       fontWeight: 'bold'
+          //     },
+          //   },
+          //   {
+          //     x: 'center',
+          //     top: '40%',
+          //     text: '总计',
+          //     textStyle: {
+          //       color: '#fff',
+          //       fontSize: 22,
+          //       fontWeight: 400
+          //     },
+          //   },
+          // ],
+          animation: true,
+          tooltip: {
+            backgroundColor: 'rgba(64, 180, 176, 0.6)',
+            borderColor: 'rgba(64, 180, 176, 0.6)',
+            textStyle: {
+              color: '#fff',
+              fontSize: 24
+            },
+            formatter: (params) => {
+              if (
+                params.seriesName !== 'mouseoutSeries' &&
+                params.seriesName !== 'pie2d'
+              ) {
+                return `${
+                  params.seriesName
+                  }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
+                  params.color
+                  };"></span>${
+                option.series[params.seriesIndex].pieData.value + '间'
+                  }`
+              }
+            }
+          },
+          backgroundColor: 'rgba(0,0,0,0)',
+          labelLine: {
+            show: true,
+            lineStyle: {
+              color: '#7BC0CB'
+            },
+            normal: {
+              show: true,
+              length: 10,
+              length2: 10
+            }
+          },
+          label: {
+            show: true,
+            position: 'outside',
+            formatter: '{b} \n{c}\n{d}%',
+            textStyle: {
+              color: 'rgba(176, 216, 223, 1)',
+              fontSize: 24
+            }
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1
+          },
+          grid3D: {
+            show: false,
+            boxHeight: 1,
+            left: '0',
+            top: '-90',
+            viewControl: {
+              distance: 220,
+              alpha: 30,
+              beta: 15,
+              autoRotate: false, // 自动旋转
+              rotateSensitivity: 1,
+              zoomSensitivity: 0,
+              panSensitivity: 0
+            }
+          },
+          series: series
+        }
+        this.echartsBox1 = this.$echarts.init(document.getElementById('overviewOfFacilityData-eCharts'))
+        this.echartsBox1.clear()
+        this.echartsBox1.setOption(option)
+      },
+    }
+  }
+</script>
+<style scoped lang="scss">
+  .overviewOfFacilityData {
+    width:826px;
+    height:423px;
+    background-image: url("../../assets/ZDimages/img_sssjgl_bg@1x.png");
+    background-size: 100% 100%;
+    overflow: hidden;
+    position: relative;
+    #overviewOfFacilityData-eCharts{
+      height:500px;
+      width:500px;
+    }
+    .position-right-list-box{
+      position: absolute;
+      left:480px;
+      top:90px;
+      .for-box{
+        display: flex;
+        p:nth-child(1){
+          width:10px;
+          height:10px;
+          border-radius:2px;
+          margin:20px 10px 0 0;
+        }
+        p:nth-child(2){
+          width:170px;
+          height:50px;
+          line-height:50px;
+          font-size:16px;
+          color:#fff;
+        }
+        p:nth-child(3){
+          width:80px;
+          text-align: right;
+          height:50px;
+          line-height:50px;
+          font-size:20px;
+          color:#fff;
+          font-family: YouSheBiaoTiHei;
+        }
+      }
+    }
+    .position-left-list-box{
+      position: absolute;
+      left:150px;
+      top:180px;
+      p:nth-child(1){
+        font-size:30px;
+        color:#fff;
+        height:30px;
+        line-height:30px;
+        text-align: center;
+        width:200px;
+      }
+      p:nth-child(2){
+        font-size:40px;
+        height:50px;
+        line-height:50px;
+        text-align: center;
+        width:200px;
+        font-family: Alimama ShuHeiTi;
+        font-weight: bold;
+        background: -webkit-linear-gradient(#FFFFFF, #0095FF);
+        -webkit-background-clip: text;
+        color: transparent;
+      }
+    }
+  }
+</style>

src/views/components/personnelEntryRecord.vue

@@ -0,0 +1,174 @@
+<!--人员进入记录-->
+<template>
+  <div class="personnelEntryRecord">
+    <titleComponent :titleData="titleData"></titleComponent>
+    <div class="top-num-max-big-box">
+      <div class="left-num-box">
+        <p>安全准入</p>
+        <p>{{todayTotal}}</p>
+      </div>
+      <div class="right-num-box">
+        <p>今日进入</p>
+        <p>{{totalNumber}}</p>
+      </div>
+    </div>
+    <div class="bottom-list-max-big-box">
+      <dv-scroll-board :config="config" style="width:740px;height:418px;margin:15px 0 0 43px;" v-if="config.data[0]"/>
+    </div>
+  </div>
+</template>
+<script>
+  import { laboratoryWsBigViewGetSafeAccessData  } from "@/api/index";
+  import titleComponent from './components/titleComponent.vue'
+  export default {
+    name: 'personnelEntryRecord',
+    components: {
+      titleComponent,
+    },
+    data () {
+      return {
+        titleData:{
+          name:'人员进入记录',
+          text:'Personnel enter the record',
+        },
+        todayTotal:'',
+        totalNumber:'',
+        config: {
+          rowNum: 7,
+          oddRowBGC: 'rgba(0,71,152,0.1)',
+          evenRowBGC: 'rgba(0,0,0,0.1)',
+          data: []
+        },
+      }
+    },
+    created(){
+
+    },
+    mounted(){
+      this.laboratoryWsBigViewGetSafeAccessData();
+    },
+    methods:{
+      laboratoryWsBigViewGetSafeAccessData(){
+        this.$set(this.config,'data',[]);
+        laboratoryWsBigViewGetSafeAccessData({page:1,pageSize:50}).then(res => {
+          this.$set(this,'todayTotal',res.data.todayTotal);
+          this.$set(this,'totalNumber',res.data.totalNumber);
+          let list = [];
+          for(let i=0;i<res.data.labSafeApplyRelations.length;i++){
+            let name = res.data.labSafeApplyRelations[i].account?res.data.labSafeApplyRelations[i].userName+'('+res.data.labSafeApplyRelations[i].account+')':res.data.labSafeApplyRelations[i].userName;
+            let type = res.data.labSafeApplyRelations[i].userType==1?'学生':'老师';
+            let time = res.data.labSafeApplyRelations[i].entryTime;
+            let action = res.data.labSafeApplyRelations[i].action;
+            let roomNumber = res.data.labSafeApplyRelations[i].roomNumber;
+            list.push([name,type,time,action,roomNumber,])
+          }
+          this.$set(this.config,'data',list);
+        })
+      },
+    },
+  }
+</script>
+<style scoped lang="scss">
+  .personnelEntryRecord{
+    width:826px;
+    height:657px;
+    margin-top:17px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    background-image: url("../../assets/ZDimages/img_ryjrjl_bg@1x.png");
+    background-size: 100% 100%;
+    .top-num-max-big-box{
+      height:120px;
+      width:826px;
+      display: flex;
+      .left-num-box{
+        width:303px;
+        height:115px;
+        background-image: url("../../assets/ZDimages/img_aqzr_bg@1x.png");
+        background-size: 100% 100%;
+        margin:13px 21px 0 89px;
+        display: flex;
+        p:nth-child(1){
+          width:60px;
+          margin-left:104px;
+          line-height:115px;
+          font-size: 14px;
+          color: #FFFFFF;
+          text-shadow: 0 0 4px #00FFFF;
+          text-align: left;
+          font-style: normal;
+          text-transform: none;
+        }
+        p:nth-child(2){
+          width:130px;
+          line-height:115px;
+          height: 17px;
+          font-family: YouSheBiaoTiHei;
+          font-weight: 400;
+          font-size: 24px;
+          color: #FFFFFF;
+          text-shadow: 0px 1px 3px #00FFFF;
+          text-align: center;
+          font-style: normal;
+          text-transform: none;
+        }
+      }
+      .right-num-box{
+        width:303px;
+        height:115px;
+        background-image: url("../../assets/ZDimages/img_jrjr_bg@1x.png");
+        background-size: 100% 100%;
+        margin:13px 0 0 0;
+        display: flex;
+        p:nth-child(1){
+          width:60px;
+          margin-left:104px;
+          line-height:115px;
+          font-size: 14px;
+          color: #FFFFFF;
+          text-shadow: 0px 0px 4px #0576FF;
+          text-align: left;
+          font-style: normal;
+          text-transform: none;
+        }
+        p:nth-child(2){
+          width:130px;
+          line-height:115px;
+          height: 17px;
+          font-family: YouSheBiaoTiHei;
+          font-weight: 400;
+          font-size: 24px;
+          color: #FFFFFF;
+          text-shadow: 0px 1px 3px #0183FA;
+          text-align: center;
+          font-style: normal;
+          text-transform: none;
+        }
+      }
+    }
+    .bottom-list-max-big-box{
+      height:470px;
+      width:826px;
+      ::v-deep .dv-scroll-board {
+        .row-item {
+          .ceil:nth-child(1) {
+            padding-left:20px;
+          }
+          .ceil:nth-child(2) {
+            text-align: center;
+          }
+          .ceil:nth-child(3) {
+            text-align: center;
+          }
+          .ceil:nth-child(4) {
+            text-align: center;
+          }
+          .ceil:nth-child(5) {
+            text-align: center;
+          }
+        }
+      }
+    }
+  }
+</style>

src/views/components/subComponent.vue

@@ -1,875 +0,0 @@
-<!--实验室信息-->
-<template>
-  <div class="subComponent">
-    <transition name="slide-fade">
-      <div v-if="newDataShow" @click="showInfo"
-           class="subComponent-box" :class="newData.alarmType?'subComponent-box-alarm':''">
-        <!--实验室-->
-        <div class="max-big-box-1" v-show="newData.equTypeValue">
-          <div class="type-p"
-               :class="newData.status==1?'idle-color':(newData.status==2?'use-color':(newData.status==3?'maintenance-color':''))">
-            <p>{{newData.status==1?'空闲':(newData.status==2?'使用':(newData.status==3?'维修':''))}}</p>
-          </div>
-          <p class="room-p">{{newData.roomNumName}}</p>
-          <div class="num-box">
-            <img src="@/assets/ZDimages/icon_syl@1x.png">
-            <p class="text-p">使用率：</p>
-            <p class="for-p"><span v-for="(item,index) in newData.usageRate" :key="index">{{item}}</span>%</p>
-          </div>
-        </div>
-        <!--类型-->
-        <div class="max-big-box-2" v-show="newData.equTypeValue">
-          <p class="text-p-1">{{newData.equTypeValue}}</p>
-          <p class="text-p-2">{{newData.areaValue}}㎡</p>
-          <p class="text-p-3">今日进入人次{{newData.userNum?newData.userNum:0}}人</p>
-        </div>
-        <!--负责人-->
-        <div class="max-big-box-3" v-show="newData.equTypeValue">
-          <img src="@/assets/ZDimages/icon_fzr@1x.png">
-          <p v-if="newData.status==2">使用人：{{newData.userName}}</p>
-          <p v-if="newData.status!=2">负责人：{{newData.headName}}</p>
-        </div>
-        <!--插座-->
-        <div v-if="newData.electricitySensor[0]" class="max-big-box-4" :class="newData.alarmType?'max-big-box-4-alarm':''">
-          <img src="@/assets/ZDimages/icon_czyd@1x.png">
-          <p class="title-p">插座用电：</p>
-          <p class="for-text-p" :class="item.sensorAlarm?'for-text-p-alarm':''"
-             v-for="(item,index) in newData.electricitySensor" :key="index">
-            {{item.deviceName}}：{{item.deviceValue}}{{item.unit}}
-          </p>
-        </div>
-        <!--传感器-->
-        <div class="max-big-box-5" v-if="newData.sensor[0]">
-          <div class="for-box" :class="item.sensorAlarm?'alarm-box':''"
-               v-for="(item,index) in newData.sensor" :key="index">
-            <div class="img-box">
-              <svg-icon v-if="item.icon" class="svg-img" :class="item.type?'svg-img-yc':'svg-img-zc'"
-                        :icon-class="item.icon"/>
-            </div>
-            <p class="text-p">
-              <span class="span-1" v-if="item.code != 'yg'">{{item.deviceValue}}</span>
-              <span class="span-2" v-if="item.code != 'yg'">{{item.unit}}</span>
-              <span class="span-3" v-if="item.code == 'yg'">{{item.sensorAlarm?'异常':'正常'}}</span>
-            </p>
-            <p class="name-p">{{item.deviceName}}</p>
-          </div>
-        </div>
-      </div>
-    </transition>
-    <!--全屏详情-->
-    <div class="sub-max-big-shade-box" v-if="showType">
-      <div class="sub-big-shade-box">
-        <p class="sub-big-title-p">设施详情</p>
-        <div class="sub-big-video-box">
-          <H5PlayerVideo class="video-max-big-box"
-                         :videoProps="videoData" v-if="videoShow"></H5PlayerVideo>
-          <img v-if="!videoList[0]" style="width:618px;height:348px;" src="@/assets/ZDimages/video_img.png">
-          <div class="video-for-index-box">
-            <p class="null-p"></p>
-            <p v-for="(item,index) in videoList" :key="index"
-               @click="checkVideo(index)"
-               class="for-button-p" :class="index==checkVideoIndex?'check-index-P':''"></p>
-            <p class="null-p"></p>
-          </div>
-        </div>
-        <p class="text-p-1">设施名称：{{newData.equTypeValue}}</p>
-        <div class="text-box">
-          <p>设施区域：{{newData.regionValue}}</p>
-          <p>所在过道：{{newData.floorName}}</p>
-        </div>
-        <div class="text-box">
-          <p>房 间 号：{{newData.roomNumValue}}</p>
-          <p>运行状态：<span :class="newData.status == 3?'span1':'span2'">{{newData.status == 3?'维护':'正常'}}</span></p>
-        </div>
-        <div class="text-box">
-          <p>设施编号：{{newData.equCodeValue}}</p>
-          <p>设施类型：温室</p>
-        </div>
-        <div class="text-box">
-          <p>设施面积：{{newData.areaValue}}m²</p>
-          <p>收费标准：{{newData.chargeValue}}元/m²·月</p>
-        </div>
-        <div class="text-box">
-          <p>温度范围：{{newData.temperatureValue}}℃</p>
-          <p>湿度范围：{{newData.humidityValue}}%RH</p>
-        </div>
-        <p class="off-button" @click="showInfo">关闭</p>
-      </div>
-    </div>
-    <div class="alarm-max-big-shade-box" v-if="alarmType">
-      <div class="alarm-big-shade-box">
-        <img class="alarm-title-img blink" src="@/assets/ZDimages/img_title.png">
-        <div class="off-button" @click="offAlarm">
-          <p>关闭报警</p>
-        </div>
-        <div class="alarm-big-box">
-          <div class="alarm-left-big-box">
-            <div class="text-box">
-              <p class="colorType" :class="newData.status==1?'idle-color':(newData.status==2?'use-color':(newData.status==3?'maintenance-color':''))">{{newData.status==1?'空闲':(newData.status==2?'使用':(newData.status==3?'维修':''))}}</p>
-              <p class="roomName">{{newData.roomNumName}}</p>
-            </div>
-            <div class="text-box">
-              <img src="">
-              <p class="right-text">报警时间：{{parseTime(newData.alarmData.eventStartTime,"{y}-{m}-{d} {h}:{i}")}}</p>
-            </div>
-            <div class="text-box">
-              <img src="">
-              <p class="right-text">设施类型：{{newData.equTypeValue}}</p>
-            </div>
-            <div class="text-box">
-              <img src="">
-              <p class="right-text" v-if="newData.status==2">使用人：{{newData.userName}}</p>
-              <p class="right-text" v-if="newData.status!=2">负责人：{{newData.headName}}</p>
-            </div>
-            <div class="text-box">
-              <img src="">
-              <p class="right-text">报警内容：</p>
-            </div>
-            <div class="alarm-sensor-box">
-              <div class="alarm-sensor-box-for" v-if="newData.alarmSensor[0]">
-                <div class="for-box" :class="item.sensorAlarm?'alarm-box':''"
-                     v-for="(item,index) in newData.alarmSensor" :key="index">
-                  <div class="img-box">
-                    <svg-icon v-if="item.icon" class="svg-img" :class="item.type?'svg-img-yc':'svg-img-zc'"
-                              :icon-class="item.icon"/>
-                  </div>
-                  <p class="text-p">
-                    <span class="span-1" v-if="item.code != 'yg'">{{item.deviceValue}}</span>
-                    <span class="span-2" v-if="item.code != 'yg'">{{item.unit}}</span>
-                    <span class="span-3" v-if="item.code == 'yg'">{{item.sensorAlarm?'异常':'正常'}}</span>
-                  </p>
-                  <p class="name-p">{{item.deviceName}}</p>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="alarm-right-big-box">
-            <H5PlayerVideo class="alarm-video-max-big-box"
-                           :videoProps="alarmVideoData" v-if="videoList[0]"></H5PlayerVideo>
-            <img v-if="!videoList[0]" style="width:664px;height:423px;" src="@/assets/ZDimages/video_img.png">
-          </div>
-        </div>
-        <audio class="waring_mp3" ref="audioPlayer" playsinline loop muted autoplay>
-          <source src="@/assets/video/waringVoice1.mp3" type="audio/mpeg">
-        </audio>
-      </div>
-    </div>
-    <img class="position-left-top" src="@/assets/ZDimages/img_min_icon.png">
-    <img class="position-right-top" src="@/assets/ZDimages/img_min_icon.png">
-    <img class="position-left-bottom" src="@/assets/ZDimages/img_min_icon.png">
-    <img class="position-right-bottom" src="@/assets/ZDimages/img_min_icon.png">
-  </div>
-</template>
-<script>
-  import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue'
-
-  export default {
-    name: 'subComponent',
-    components: {
-      H5PlayerVideo
-    },
-    data() {
-      return {
-        newDataShow: true,
-        newData: {
-          status: '',
-          roomNumName: '',
-          usageRate: '',
-          equTypeValue: '',
-          areaValue: '',
-          userNum: '',
-          headName: '',
-          electricitySensor: [],
-          sensor: [],
-          alarmType: false
-        },
-        showType: false,
-        videoList: [],
-        videoData: {},
-        videoShow:false,
-        alarmVideoData:{},
-        checkVideoIndex: 0,
-        alarmType:false,
-      }
-    },
-    created() {
-
-    },
-    mounted() {
-
-    },
-    methods: {
-      getSubData(item) {
-        this.switchBox(item)
-      },
-      switchBox(obj) {
-        // console.log('subObj', obj)
-        let self = this
-        self.$set(self, 'newDataShow', !self.newDataShow)
-        setTimeout(function() {
-          obj.alarmSensor = [];
-          for(let i=0;i<obj.sensor.length;i++){
-            if(obj.sensor[i].sensorAlarm){
-              obj.alarmSensor.push(obj.sensor[i])
-            }
-          }
-          for(let i=0;i<obj.electricitySensor.length;i++){
-            if(obj.electricitySensor[i].sensorAlarm){
-              obj.alarmSensor.push(obj.electricitySensor[i])
-            }
-          }
-          self.$set(self, 'newData', obj)
-          if(obj.videoList[0]){
-            self.$set(self, 'videoList', obj.videoList)
-            let minObj = JSON.parse(JSON.stringify(obj.videoList[0]));
-            minObj.fullShow = true;
-            minObj.width = 618;
-            minObj.height = 348;
-            let videoObj = JSON.parse(JSON.stringify(obj.videoList[0]));
-            videoObj.fullShow = true;
-            videoObj.width = 664;
-            videoObj.height = 423;
-            self.$set(self, 'videoData', minObj)
-            self.$set(self, 'videoShow', true)
-            self.$set(self, 'alarmVideoData', videoObj)
-            self.$set(self, 'checkVideoIndex', 0)
-          }
-          self.$set(self, 'newDataShow', !self.newDataShow)
-          if(obj.alarmType){
-            self.openAlarm();
-          }
-          self.$forceUpdate()
-        }, 200)
-      },
-      //显示详情
-      showInfo() {
-        this.$set(this,'checkVideoIndex',0);
-        this.$set(this, 'showType', !this.showType)
-        this.$parent.setSubInfoType()
-      },
-      //切换视频
-      checkVideo(index){
-        let self = this;
-        this.$set(this, 'videoShow', false)
-        setTimeout(function() {
-          let minObj = JSON.parse(JSON.stringify(self.videoList[index]));
-          minObj.fullShow = true;
-          minObj.width = 618;
-          minObj.height = 348;
-          self.$set(self,'videoData',minObj);
-          self.$set(self,'checkVideoIndex',index);
-          self.$set(self, 'videoShow', true)
-        }, 200)
-      },
-      //开启报警界面
-      openAlarm(){
-        let self = this;
-        this.$set(this,'showType',false)
-        this.$set(this,'alarmType',true);
-        setTimeout(() => {
-          /* 报警音频播放 */
-          var audio = self.$refs.audioPlayer;
-          // 尝试静音自动播放
-          audio.play().catch(() => {
-            // 如果失败，延迟 2 秒再次尝试（趁浏览器未完全冻结）
-            setTimeout(() => audio.play(), 1000);
-          });
-          // 延迟 3 秒后尝试取消静音（需浏览器允许）
-          setTimeout(() => {
-            audio.muted = false;
-          }, 1500);
-        }, 500);
-      },
-      offAlarm(){
-        this.$set(this,'alarmType',false);
-        this.$parent.setOffAlarm();
-      },
-      setOffAlarm(){
-        this.$set(this,'alarmType',false);
-      },
-    }
-  }
-</script>
-<style scoped lang="scss">
-  .subComponent {
-    overflow: hidden;
-    width: 530px;
-    height: 439px;
-    margin: 10px 0 0 20px;
-    border: 1px solid #114a9a;
-    /*background-image: url("../../assets/ZDimages/img_right-bottom.png");*/
-    /*background-size: 100% 100%;*/
-    position: relative;
-    .sub-max-big-shade-box {
-      width: 100%;
-      height: 100%;
-      position: fixed;
-      top: 0;
-      left: 0;
-      background-color: rgba(0, 0, 0, 0.7);
-      z-index: 5;
-      .sub-big-shade-box {
-        margin: 115px 608px 0;
-        width: 704px;
-        height: 884px;
-        background: #013167;
-        border-radius: 10px 10px 10px 10px;
-        .sub-big-title-p {
-          font-size: 22px;
-          color: #fff;
-          border-bottom: 1px solid #fff;
-          height: 60px;
-          line-height: 60px;
-          padding-left: 28px;
-          font-family: Source Han Sans, Source Han Sans;
-          font-weight: 700;
-        }
-        .sub-big-video-box {
-          width: 618px;
-          height: 378px;
-          margin: 19px 43px 0;
-          .video-for-index-box {
-            height: 30px;
-            display: flex;
-            .null-p {
-              flex: 1;
-            }
-            .for-button-p {
-              cursor: pointer;
-              width: 10px;
-              height: 10px;
-              border-radius: 50%;
-              background: rgba(13, 100, 197, 0.4);
-              margin: 10px 5px;
-            }
-            .check-index-P {
-              background: #0D64C5!important;
-            }
-          }
-        }
-        .text-p-1{
-          font-size:20px;
-          color:#fff;
-          height:54px;
-          line-height:54px;
-          border-bottom:1px solid #214a78;
-          margin:0 43px;
-        }
-        .text-box{
-          margin:0 42px;
-          display: flex;
-          p{
-            width:280px;
-            font-size:20px;
-            color:#fff;
-            height:54px;
-            line-height:54px;
-            border-bottom:1px solid #214a78;
-          }
-          p:nth-child(1){
-            margin-right:59px;
-          }
-          span{
-            display: inline-block;
-            text-align: center;
-            border-radius:15px;
-            height:30px;
-            line-height:30px;
-            width:70px;
-            color:#fff;
-          }
-          .span1{
-            background-color: #FF9900;
-          }
-          .span2{
-            background-color: #00AC45;
-          }
-        }
-        .off-button{
-          width: 180px;
-          height: 46px;
-          line-height:46px;
-          background: #00499B;
-          border-radius: 10px 10px 10px 10px;
-          font-size:20px;
-          text-align: center;
-          cursor: pointer;
-          margin:29px auto;
-        }
-      }
-    }
-    .alarm-max-big-shade-box{
-      width: 100%;
-      height: 100%;
-      position: fixed;
-      top: 0;
-      left: 0;
-      background-color: rgba(0, 0, 0, 0.7);
-      z-index: 5;
-      box-shadow: inset 0 6px 32px 0 #BD0000;
-      .alarm-big-shade-box{
-        width:1280px;
-        height:704px;
-        margin:187px auto 0;
-        background-image: url("../../assets/ZDimages/img_bjtcbg.png");
-        background-size: 100% 100%;
-        overflow: hidden;
-        position: relative;
-        .alarm-title-img{
-          position: absolute;
-          left:360px;
-          top:25px;
-          height:146px;
-          width:568px;
-        }
-        .blink {
-          animation: blink 0.8s ease-in-out infinite;
-        }
-        @keyframes blink {
-          0%, 100% { opacity: 0; } /* 最低可见度 */
-          50% { opacity: 1; }        /* 最高可见度 */
-        }
-        .off-button{
-          height:50px;
-          line-height:50px;
-          width:150px;
-          background-color: #E80101;
-          cursor: pointer;
-          overflow: hidden;
-          position: absolute;
-          bottom: 59px;
-          left: 565px;
-          p{
-            width:140px;
-            height:40px;
-            line-height:40px;
-            text-align: center;
-            font-size:22px;
-            color:#fff;
-            border:1px solid #fff;
-            margin:5px;
-          }
-        }
-        .alarm-big-box{
-          margin:156px 0 0 90px;
-          display: flex;
-          .alarm-left-big-box{
-            width:440px;
-            height:421px;
-            .text-box{
-              display: flex;
-              margin-bottom:25px;
-              .colorType{
-                text-align: center;
-                width:55px;
-                height:25px;
-                line-height:25px;
-                color:#fff;
-                font-size:14px;
-                border-radius:15px;
-                margin-right:10px;
-              }
-              .roomName{
-                color:#fff;
-                font-size:24px;
-                height:25px;
-                line-height:25px;
-              }
-              img{
-
-              }
-              .right-text{
-                color:#fff;
-                font-size:18px;
-                height:25px;
-                line-height:25px;
-              }
-              .idle-color {
-                background-color: #00AC45;
-              }
-              .use-color {
-                background-color: #00FFF6;
-              }
-              .maintenance-color {
-                background-color: #FFA148;
-              }
-            }
-            .alarm-sensor-box{
-              /*传感器*/
-              .alarm-sensor-box-for {
-                height: 200px;
-                display: flex;
-                margin: 22px 22px 0;
-                .for-box {
-                  width: 154px;
-                  height: 180px;
-                  margin-right: 12px;
-                  border: 1px solid #FF2105 !important;
-                  background-color: rgba(255,255,255,0.1);
-                  border-radius: 10px;
-                  .img-box {
-                    margin-left: 20px;
-                    margin-top: 6px;
-                    width: 114px;
-                    height: 102px;
-                    background-image: url("../../assets/ZDimages/img_bjtk_cgq@1x.png");
-                    background-size: 100% 100%;
-                    .svg-img {
-                      margin: 44px 44px 0;
-                      width: 25px;
-                      height: 25px;
-                      color: #FF2105;
-                    }
-                  }
-                  .text-p {
-                    height: 22px;
-                    line-height: 22px;
-                    text-align: center;
-                    .span-1 {
-                      font-size: 20px;
-                      color: #FF2105;
-                    }
-                    .span-2 {
-                      font-size: 14px;
-                      color: #FF2105;
-                    }
-                    .span-3 {
-                      font-size: 20px;
-                      color: #FF2105;
-                    }
-                  }
-                  .name-p {
-                    height: 46px;
-                    line-height: 46px;
-                    text-align: center;
-                    font-size: 16px;
-                    color: #FF2105;
-                  }
-                }
-                .for-box:nth-child(3) {
-                  margin: 0 !important;
-                }
-              }
-            }
-          }
-          .alarm-right-big-box{
-            width:662px;
-            height:421px;
-            background-color: red;
-            border-radius:10px;
-            overflow: hidden;
-          }
-        }
-        .waring_mp3{
-          z-index: -1000;
-          width:1px;
-          height:1px;
-          overflow: hidden;
-        }
-      }
-    }
-    .subComponent-box {
-      cursor: pointer;
-      height: 439px;
-      /*实验室*/
-      .max-big-box-1 {
-        height: 60px;
-        display: flex;
-        margin: 0 22px;
-        .type-p {
-          width: 54px;
-          height: 28px;
-          margin: 21px 10px 0 0;
-          border-radius: 50px;
-          p {
-            margin: 3px;
-            width: 48px;
-            height: 22px;
-            text-align: center;
-            line-height: 22px;
-            color: #fff;
-            border-radius: 50px;
-            border: 1px solid #fff;
-            font-size: 16px;
-          }
-        }
-        .room-p {
-          height: 28px;
-          line-height: 28px;
-          margin: 21px 10px 0 0;
-          font-family: Source Han Sans, Source Han Sans;
-          font-weight: 700;
-          font-size: 24px;
-          color: #FFFFFF;
-          flex: 1;
-        }
-        .num-box {
-          display: flex;
-          img {
-            height: 24px;
-            width: 24px;
-            margin: 23px 7px 0 0;
-          }
-          .text-p {
-            height: 28px;
-            line-height: 28px;
-            margin: 21px 10px 0 0;
-            color: #fff;
-            font-size: 16px;
-          }
-          .for-p {
-            margin-left: -10px;
-            span {
-              display: inline-block;
-              width: 18px;
-              height: 20px;
-              line-height: 20px;
-              text-align: center;
-              border: 1px solid rgba(255, 255, 255, 0.2);
-              margin: 25px 3px 0 0;
-            }
-          }
-        }
-        .idle-color {
-          background-color: #00AC45;
-        }
-        .use-color {
-          background-color: #00FFF6;
-        }
-        .maintenance-color {
-          background-color: #FFA148;
-        }
-      }
-      /*类型*/
-      .max-big-box-2 {
-        height: 54px;
-        display: flex;
-        margin: 0 22px;
-        .text-p-1 {
-          padding: 0 15px;
-          height: 30px;
-          line-height: 30px;
-          background: rgba(5, 118, 255, 0.3);
-          border-radius: 6px 6px 6px 6px;
-          margin: 12px 10px 0 0;
-          color: #AED0FF;
-          font-size: 14px;
-        }
-        .text-p-2 {
-          padding: 0 15px;
-          height: 30px;
-          line-height: 30px;
-          background: rgba(255, 163, 24, 0.3);
-          border-radius: 6px 6px 6px 6px;
-          margin: 12px 10px 0 0;
-          color: #FFA318;
-          font-size: 14px;
-        }
-        .text-p-3 {
-          padding: 0 15px;
-          height: 30px;
-          line-height: 30px;
-          background: rgba(0, 255, 246, 0.3);
-          border-radius: 6px 6px 6px 6px;
-          margin: 12px 10px 0 0;
-          color: #00FFF6;
-          font-size: 14px;
-        }
-      }
-      /*负责人*/
-      .max-big-box-3 {
-        height: 38px;
-        display: flex;
-        margin: 0 22px;
-        img {
-          width: 20px;
-          height: 20px;
-          margin: 9px 6px 0 0;
-        }
-        p {
-          height: 38px;
-          line-height: 38px;
-          color: #fff;
-          font-size: 18px;
-        }
-      }
-      /*插座*/
-      .max-big-box-4 {
-        height: 36px;
-        display: flex;
-        margin: 9px 22px 0;
-        background: rgba(5, 118, 255, 0.2);
-        border-radius: 8px;
-        img {
-          width: 20px;
-          height: 20px;
-          margin: 8px 6px 0 11px;
-        }
-        .title-p {
-          height: 36px;
-          line-height: 38px;
-          font-size: 16px;
-          color: #fff;
-          margin-right: 10px;
-        }
-        .for-text-p {
-          height: 36px;
-          line-height: 38px;
-          font-size: 16px;
-          color: #fff;
-          margin-right: 20px;
-        }
-        .for-text-p-alarm {
-          color: #FF0000 !important;
-        }
-      }
-      .max-big-box-4-alarm {
-        background: rgba(141, 0, 0, 0.2) !important;
-      }
-      /*传感器*/
-      .max-big-box-5 {
-        height: 200px;
-        display: flex;
-        margin: 22px 22px 0;
-        .for-box {
-          width: 154px;
-          height: 180px;
-          margin-right: 12px;
-          border: 1px solid transparent;
-          border-radius: 10px;
-          background-clip: padding-box, border-box;
-          background-origin: padding-box, border-box;
-          background-image: linear-gradient(to right, #1b4474, #1b4474), linear-gradient(180deg, #FFFFFF, #3FA3FF);
-          .img-box {
-            margin-left: 20px;
-            margin-top: 6px;
-            width: 114px;
-            height: 102px;
-            background-image: url("../../assets/ZDimages/img_cgq_zc@1x.png");
-            background-size: 100% 100%;
-            .svg-img {
-              margin: 44px 44px 0;
-              width: 25px;
-              height: 25px;
-              color: #fff;
-            }
-          }
-          .text-p {
-            height: 22px;
-            line-height: 22px;
-            text-align: center;
-            .span-1 {
-              font-size: 20px;
-              color: #00AC45;
-            }
-            .span-2 {
-              font-size: 14px;
-              color: #fff;
-            }
-            .span-3 {
-              font-size: 20px;
-              color: #00AC45;
-            }
-          }
-          .name-p {
-            height: 46px;
-            line-height: 46px;
-            text-align: center;
-            color: #fff;
-            font-size: 16px;
-          }
-        }
-        .for-box:nth-child(3) {
-          margin: 0 !important;
-        }
-      }
-    }
-    .subComponent-box-alarm {
-      background: #331a44;
-      .max-big-box-5 {
-        .for-box {
-          background-image: linear-gradient(to right, #483157, #483157), linear-gradient(180deg, #FFFFFF, #3FA3FF);
-        }
-        .alarm-box {
-          border: 1px solid #FF2105 !important;
-          background-image: linear-gradient(to right, #481a3e, #481a3e), linear-gradient(180deg, #FF2105, #FF2105);
-          .img-box {
-            background-image: url("../../assets/ZDimages/img_bjtk_cgq@1x.png");
-            .svg-img {
-              color: #FF2105;
-            }
-          }
-          .text-p {
-            .span-1 {
-              font-size: 20px;
-              color: #FF2105;
-            }
-            .span-2 {
-              font-size: 14px;
-              color: #FF2105;
-            }
-            .span-3 {
-              font-size: 20px;
-              color: #FF2105;
-            }
-          }
-          .name-p {
-            color: #FF2105;
-          }
-        }
-      }
-    }
-    .position-left-top {
-      position: absolute;
-      left: -15px;
-      top: -15px;
-      width: 42px;
-      height: 42px;
-      z-index: 1;
-    }
-    .position-right-top {
-      position: absolute;
-      right: -15px;
-      top: -15px;
-      width: 42px;
-      height: 42px;
-      z-index: 1;
-      transform: rotate(90deg);
-    }
-    .position-left-bottom {
-      position: absolute;
-      left: -15px;
-      bottom: -15px;
-      width: 42px;
-      height: 42px;
-      z-index: 1;
-      transform: rotate(270deg);
-    }
-    .position-right-bottom {
-      position: absolute;
-      right: -14px;
-      bottom: -15px;
-      width: 42px;
-      height: 42px;
-      z-index: 1;
-      transform: rotate(180deg);
-    }
-    .slide-fade-enter-active {
-      transition: all 1s ease;
-    }
-    .slide-fade-leave-to
-      /* .slide-fade-leave-active for below version 2.1.8 */
-    {
-      transform: translateX(-530px);
-      opacity: 0;
-    }
-    //进场
-    .slide-fade-leave-active {
-      transition: all 0.2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
-    }
-    .slide-fade-enter {
-      transform: translateX(530px);
-      opacity: 0;
-    }
-  }
-</style>

src/views/components/usageRateComponent.vue

@@ -1,236 +0,0 @@
-<!--使用率排行-->
-<template>
-  <div class="usageRateComponent">
-    <p class="title-p">设施使用率排行</p>
-    <dv-scroll-board :config="config" style="width:470px;height:435px" v-if="config.data[0]"/>
-    <p class="position-null-p" v-if="!config.data[0]">暂无数据</p>
-    <img class="position-left-top" src="@/assets/ZDimages/img_min_icon.png">
-    <img class="position-right-top" src="@/assets/ZDimages/img_min_icon.png">
-    <img class="position-left-bottom" src="@/assets/ZDimages/img_min_icon.png">
-    <img class="position-right-bottom" src="@/assets/ZDimages/img_min_icon.png">
-  </div>
-</template>
-<script>
-  import { dashboardsFacilitiesUsageStats } from '@/api/yiLi'
-
-  export default {
-    name: 'usageRateComponent',
-    data() {
-      return {
-        wendu_zc: require('@/assets/ZDimages/img_cgq_zc@1x.png'),
-        config: {
-          rowNum: 7,
-          headerBGC: 'rgba(0,66,138,0.5)',
-          oddRowBGC: 'rgba(0,66,138,0.0)',
-          evenRowBGC: 'rgba(0,66,138,0.0)',
-          header: ['', '设施房间', '使用人次', '使用率'],
-          data: [
-            // ['<span class="span_1"><span></span></span>','行1列1', '行1列2', '行1列3'],
-            // ['<span class="span_2"><span></span></span>','行2列1', '行2列2', '行2列3'],
-            // ['<span class="span_3"><span></span></span>','行3列1', '行3列2', '行3列3'],
-            // ['<span class="span_num"><span>4</span></span>','行4列1', '行4列2', '行4列3'],
-            // ['<span class="span_num"><span>5</span></span>','行4列1', '行4列2', '行4列3'],
-            // ['<span class="span_num"><span>6</span></span>','行4列1', '行4列2', '行4列3'],
-            // ['<span class="span_num"><span>7</span></span>','行4列1', '行4列2', '行4列3'],
-            // ['<span class="span_num"><span>8</span></span>','行4列1', '行4列2', '行4列3'],
-            // ['<span class="span_num"><span>9</span></span>','行4列1', '行4列2', '行4列3'],
-          ]
-        }
-      }
-    },
-    created() {
-
-    },
-    mounted() {
-      this.dashboardsFacilitiesUsageStats()
-    },
-    methods: {
-      dashboardsFacilitiesUsageStats() {
-        let self = this
-        dashboardsFacilitiesUsageStats().then(res => {
-          let list = []
-          for (let i = 0; i < res.data.monthlyUsage.length; i++) {
-            let obj = {
-              name: res.data.monthlyUsage[i].equTypeName,
-              num: res.data.monthlyUsage[i].equRentingCount,
-              value: res.data.monthlyUsage[i].equRentingCount == 0 ? res.data.monthlyUsage[i].equRentingCount + '%' : self.calculatePercentage(res.data.monthlyUsage[i].equRentingCount, res.data.monthlyUsage[i].equCount, { decimal: 0 })
-            }
-            list.push(obj)
-          }
-          list = this.sortByPercentageDesc(list)
-          let newList = [];
-          for(let i=0;i<list.length;i++){
-            if(i==0){
-              newList.push(['<span class="span_1"><span></span></span>',list[i].name, list[i].num+'', list[i].value])
-            }else if(i==1){
-              newList.push(['<span class="span_2"><span></span></span>',list[i].name, list[i].num+'', list[i].value])
-            }else if(i==1){
-              newList.push(['<span class="span_3"><span></span></span>',list[i].name, list[i].num+'', list[i].value])
-            }else{
-              newList.push(['<span class="span_num"><span>'+(i+1)+'</span></span>',list[i].name, list[i].num+'', list[i].value])
-            }
-          }
-          this.$set(this.config,'data',newList)
-        })
-      },
-      calculatePercentage(numerator, denominator, options = {}) {
-        if (typeof numerator !== 'number' || typeof denominator !== 'number') {
-          throw new TypeError('分子和分母必须是数字')
-        }
-        if (denominator === 0) {
-          throw new Error('分母不能为零')
-        }
-        const { decimal = 2, returnString = true } = options
-        const percentage = (numerator / denominator) * 100
-        const rounded = Math.round(percentage * Math.pow(10, decimal)) / Math.pow(10, decimal)
-        return returnString ? `${rounded}%` : rounded
-      },
-      parsePercentage(percentStr) {
-        return parseFloat(percentStr.replace('%', ''))
-      },
-      sortByPercentageDesc(arr, prop = 'value') {
-        return [...arr].sort((a, b) => {
-          const valA = this.parsePercentage(a[prop])
-          const valB = this.parsePercentage(b[prop])
-          return valB - valA // 降序排序
-        })
-      },
-    }
-  }
-</script>
-<style scoped lang="scss">
-  .usageRateComponent {
-    width: 530px;
-    height: 512px;
-    margin: 20px 0 0 20px;
-    background-image: url("../../assets/ZDimages/img_sssylph@1x.png");
-    background-size: 100% 100%;
-    position: relative;
-    .title-p {
-      position: absolute;
-      width: 282px;
-      height: 36px;
-      line-height: 36px;
-      color: #fff;
-      font-size: 18px;
-      font-weight: 700;
-      font-family: Source Han Sans, Source Han Sans;
-      padding-left: 24px;
-    }
-    .position-null-p {
-      position: absolute;
-      left: 230px;
-      top: 240px;
-      color: #dedede;
-      font-size: 16px;
-    }
-    .position-left-top {
-      position: absolute;
-      left: -15px;
-      top: 28px;
-      width: 42px;
-      height: 42px;
-      z-index: 1;
-    }
-    .position-right-top {
-      position: absolute;
-      right: -15px;
-      top: -15px;
-      width: 42px;
-      height: 42px;
-      z-index: 1;
-      transform: rotate(90deg);
-    }
-    .position-left-bottom {
-      position: absolute;
-      left: -15px;
-      bottom: -15px;
-      width: 42px;
-      height: 42px;
-      z-index: 1;
-      transform: rotate(270deg);
-    }
-    .position-right-bottom {
-      position: absolute;
-      right: -14px;
-      bottom: -15px;
-      width: 42px;
-      height: 42px;
-      z-index: 1;
-      transform: rotate(180deg);
-    }
-    ::v-deep .dv-scroll-board {
-      margin: 54px 0 0 30px;
-      .header {
-        .header-item {
-          width: 137px !important;
-        }
-        .header-item:nth-child(1) {
-          width: 50px !important;
-        }
-        .header-item:nth-child(3) {
-          text-align: center;
-        }
-        .header-item:nth-child(4) {
-          text-align: right;
-        }
-      }
-      .row-item {
-        height: 50px !important;
-        line-height: 50px !important;
-        border-bottom: 1px dashed rgba(216, 216, 216, 0.1);
-        .ceil {
-          width: 137px !important;
-        }
-        .ceil:nth-child(1) {
-          width: 50px !important;
-        }
-        .ceil:nth-child(3) {
-          text-align: center;
-        }
-        .ceil:nth-child(4) {
-          text-align: right;
-        }
-      }
-      .span_1 {
-        display: inline-block;
-        width: 24px;
-        height: 30px;
-        margin: 10px 0 0 0;
-        background-image: url("../../assets/ZDimages/img_pm_a@1x.png");
-        background-size: 100% 100%;
-      }
-      .span_2 {
-        display: inline-block;
-        width: 24px;
-        height: 30px;
-        margin: 10px 0 0 0;
-        background-image: url("../../assets/ZDimages/img_pm_b.png");
-        background-size: 100% 100%;
-      }
-      .span_3 {
-        display: inline-block;
-        width: 24px;
-        height: 30px;
-        margin: 10px 0 0 0;
-        background-image: url("../../assets/ZDimages/img_pm_c@1x.png");
-        background-size: 100% 100%;
-      }
-      .span_num {
-        display: inline-block;
-        width: 24px;
-        height: 30px;
-        span {
-          display: inline-block;
-          width: 20px;
-          height: 20px;
-          line-height: 20px;
-          background-color: #0E52C3;
-          border: 1px solid #0576FF;
-          border-radius: 50%;
-          text-align: center;
-        }
-      }
-    }
-  }
-</style>

src/views/components/videoComponent.vue

@@ -1,118 +0,0 @@
-<!--视频监控-->
-<template>
-  <div class="videoComponent">
-    <p class="title-p">视频监控</p>
-    <img v-if="!videoType" class="video-max-big-box" src="@/assets/ZDimages/video_img.png">
-    <H5PlayerVideo class="video-max-big-box" :videoProps="videoData" v-if="videoType"></H5PlayerVideo>
-    <img class="position-left-bottom" src="@/assets/ZDimages/img_min_icon.png">
-    <img class="position-right-bottom" src="@/assets/ZDimages/img_min_icon.png">
-    <fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>
-  </div>
-</template>
-<script>
-  import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue';
-  import fullH5PlayerVideo from '@/components/fullH5PlayerVideo/fullH5PlayerVideo.vue'
-  export default {
-    name: 'videoComponent',
-    components: {
-      H5PlayerVideo,
-      fullH5PlayerVideo
-    },
-    data () {
-      return {
-        videoType:false,
-        videoData:null,
-        //全屏视频参数
-        fullVideoProps:{},
-        fullVideoType:false,
-      }
-    },
-    created(){
-
-    },
-    mounted(){
-
-    },
-    methods:{
-      initialize(obj){
-        // console.log('videoObj',obj);
-        let self = this;
-        this.$set(this,'videoType',false);
-        setTimeout(function() {
-          if(obj.monitorVisable){
-            if(obj.videoList[0]){
-              //开启
-              self.$set(self,'videoData',{
-                width: 737, //(宽度:非必传-默认600)
-                height: 417, //(高度:非必传-默认338)
-                url: obj.videoList[0].url,
-                cameraIndexCode: obj.videoList[0].cameraIndexCode,
-              });
-              self.$set(self,'videoType',true);
-            }else{
-              //关闭
-              self.$set(self,'videoType',false);
-            }
-          }else{
-            //关闭
-            self.$set(self,'videoType',false);
-          }
-        }, 200)
-      },
-      //全屏开启-关闭轮播
-      stopTime(cameraIndexCode){
-        this.$set(this,'fullVideoProps',{cameraIndexCode:cameraIndexCode});
-        this.$set(this,'fullVideoType',true);
-      },
-      //全屏关闭-开启轮播
-      outFullScreen(){
-        this.$set(this,'fullVideoType',false);
-        this.$set(this,'fullVideoProps',{});
-      },
-    },
-  }
-</script>
-<style scoped lang="scss">
-  .videoComponent{
-    width:890px;
-    height:512px;
-    margin:20px 0 0 30px;
-    background-image: url("../../assets/ZDimages/img_spjk_bg@1x.png");
-    background-size: 100% 100%;
-    position: relative;
-    .title-p{
-      height:47px;
-      line-height: 47px;
-      color:#fff;
-      font-size:20px;
-      font-weight: 700;
-      font-family: Source Han Sans, Source Han Sans;
-      padding-left:24px;
-      text-align: center;
-    }
-    .video-max-big-box{
-      width:739px;
-      height:419px;
-      margin: 24px 0 0 76px;
-      border: 1px solid #0183FA;
-    }
-    .position-left-bottom{
-      position: absolute;
-      left:-15px;
-      bottom:-15px;
-      width:42px;
-      height:42px;
-      z-index:1;
-      transform: rotate(270deg);
-    }
-    .position-right-bottom{
-      position: absolute;
-      right:-15px;
-      bottom:-15px;
-      width:42px;
-      height:42px;
-      z-index:1;
-      transform: rotate(180deg);
-    }
-  }
-</style>

src/views/components/videoSurveillance.vue

@@ -0,0 +1,42 @@
+<!--实时视频监控-->
+<template>
+  <div class="videoSurveillance">
+    <titleComponent :titleData="titleData"></titleComponent>
+  </div>
+</template>
+<script>
+  import titleComponent from './components/titleComponent.vue'
+  export default {
+    name: 'videoSurveillance',
+    components: {
+      titleComponent,
+    },
+    data () {
+      return {
+        titleData:{
+          name:'实时视频监控',
+          text:'Real-time video surveillance',
+        },
+      }
+    },
+    created(){
+
+    },
+    mounted(){
+
+    },
+    methods:{
+
+    },
+  }
+</script>
+<style scoped lang="scss">
+  .videoSurveillance{
+    width:1314px;
+    height:538px;
+    margin-top:31px;
+    background-image: url("../../assets/ZDimages/img_ssspjk_bg@1x.png");
+    background-size: 100% 100%;
+
+  }
+</style>

src/views/home.vue

@@ -1,21 +1,21 @@
 <template>
-  <div class="home">
+  <div class="home" v-if="showPage">
     <headComponent></headComponent>
-    <div class="home-page" v-if="showPage" v-show="pageType == 1">
-      <div class="top-max-big-box">
-        <videoComponent ref="videoComponent"></videoComponent>
-        <overviewComponent></overviewComponent>
-        <usageRateComponent></usageRateComponent>
+    <div class="home-page">
+      <div class="home-left-box">
+        <overviewOfFacilityData></overviewOfFacilityData>
+        <facilityUtilizationRate></facilityUtilizationRate>
       </div>
-      <div class="bottom-max-big-box">
-        <mapComponent ref="mapComponent"></mapComponent>
-        <subComponent ref="subComponent"></subComponent>
+      <div class="home-center-box">
+        <centerNotice></centerNotice>
+        <videoSurveillance></videoSurveillance>
+      </div>
+      <div class="home-right-box">
+        <scientificResearchProject></scientificResearchProject>
+        <personnelEntryRecord></personnelEntryRecord>
       </div>
     </div>
-    <mediaAnnouncementComponent v-if="pageType == 2"
-      :mediaAnnouncementComponentData="mediaAnnouncementComponentData"
-      ref="mediaAnnouncementComponent">
-    </mediaAnnouncementComponent>
+    <div class="button-img-box"></div>
   </div>
 </template>
 <script>
@@ -24,118 +24,96 @@
   import { getConfigByType  } from "@/api/index";
   import { setToken,setTokenYiLi } from '@/utils/auth'
   import { Encrypt,Decrypt} from '@/utils/secret'
-  //首页组件
+  //head组件
   import headComponent from './components/headComponent.vue'
-  import videoComponent from './components/videoComponent.vue'
-  import overviewComponent from './components/overviewComponent.vue'
-  import usageRateComponent from './components/usageRateComponent.vue'
-  import mapComponent from './components/mapComponent.vue'
-  import subComponent from './components/subComponent.vue'
-  //通知公告
-  import mediaAnnouncementComponent from './components/mediaAnnouncementComponent.vue'
+  //设施数据概览
+  import overviewOfFacilityData from './components/overviewOfFacilityData.vue'
+  //设施使用率及状态统计
+  import facilityUtilizationRate from './components/facilityUtilizationRate.vue'
+  //通知组件
+  import centerNotice from './components/centerNotice.vue'
+  //实时视频监控
+  import videoSurveillance from './components/videoSurveillance.vue'
+  //科研项目情况概览
+  import scientificResearchProject from './components/scientificResearchProject.vue'
+  //人员进入记录
+  import personnelEntryRecord from './components/personnelEntryRecord.vue'
+
   export default {
     name: 'home',
     components: {
       headComponent,
-      videoComponent,
-      overviewComponent,
-      usageRateComponent,
-      mapComponent,
-      subComponent,
-      mediaAnnouncementComponent,
+      overviewOfFacilityData,
+      facilityUtilizationRate,
+      centerNotice,
+      videoSurveillance,
+      scientificResearchProject,
+      personnelEntryRecord,
     },
     data () {
       return {
-        //页面开关
         showPage:false,
-        //展示状态
-        pageType:1,
-        mediaAnnouncementComponentData:null,
       }
     },
     created(){
 
     },
     mounted(){
-      this.getToken();
+      this.login();
     },
     methods:{
+      login() {
+        let self = this
+        Promise.all([
+          this.getToken(),
+          this.getTokenYiLi()
+        ]).then((result) => {
+          setTimeout(function() {
+            self.getExploitConfig()
+          },500)
+        }).catch((error) => {
+        })
+      },
       //获取token
-      getToken(){
+      getToken() {
         login().then(res1 => {
           setToken(res1.data.token)
-          this.getExploitConfig();
-          this.getTokenYiLi();
-        });
+        })
       },
       //获取YiLi-token
-      getTokenYiLi(){
+      getTokenYiLi() {
         loginYiLi().then(res2 => {
-          setTokenYiLi(res2.access_token);
-          this.$set(this,'showPage',true);
-        });
+          setTokenYiLi(res2.access_token)
+        })
       },
       //获取开发配置
-      getExploitConfig(){
+      getExploitConfig() {
         getConfigByType({ category: 2, configType: 5 }).then(response => {
           let obj = JSON.parse(response.data.configValue)
           //判定http或者https
-          let urlText = window.location.href.split('://')[0]+'://';
+          let urlText = window.location.href.split('://')[0] + '://'
           let outerNet = window.location.href.indexOf(obj.ipIdentify) == -1//true外网 false 内网
-          if(outerNet){//外网
+          if (outerNet) {//外网
             //MQTT地址
-            localStorage.setItem('mqttUrl','wss://'+Decrypt(obj.mqttExtranetUrl))
+            localStorage.setItem('mqttUrl', 'wss://' + Decrypt(obj.mqttExtranetUrl))
             //MQTT账号
-            localStorage.setItem('mqttUser',Decrypt(obj.mqttExtranetUser))
+            localStorage.setItem('mqttUser', Decrypt(obj.mqttExtranetUser))
             //MQTT密码
-            localStorage.setItem('mqttPassword',Decrypt(obj.mqttExtranetPassword))
+            localStorage.setItem('mqttPassword', Decrypt(obj.mqttExtranetPassword))
             //文件浏览环境
-            localStorage.setItem('fileBrowseEnvironment',window.location.href.split('://')[0]+'://'+Decrypt(obj.fileBrowseEnvironmentExtranet))
-          }else{
+            localStorage.setItem('fileBrowseEnvironment', window.location.href.split('://')[0] + '://' + Decrypt(obj.fileBrowseEnvironmentExtranet))
+          } else {
             //MQTT地址
-            localStorage.setItem('mqttUrl','ws://'+Decrypt(obj.mqttIntranetUrl))
+            localStorage.setItem('mqttUrl', 'ws://' + Decrypt(obj.mqttIntranetUrl))
             //MQTT账号
-            localStorage.setItem('mqttUser',Decrypt(obj.mqttIntranetUser))
+            localStorage.setItem('mqttUser', Decrypt(obj.mqttIntranetUser))
             //MQTT密码
-            localStorage.setItem('mqttPassword',Decrypt(obj.mqttIntranetPassword))
+            localStorage.setItem('mqttPassword', Decrypt(obj.mqttIntranetPassword))
             //文件浏览环境
-            localStorage.setItem('fileBrowseEnvironment',window.location.href.split('://')[0]+'://'+Decrypt(obj.fileBrowseEnvironment))
+            localStorage.setItem('fileBrowseEnvironment', window.location.href.split('://')[0] + '://' + Decrypt(obj.fileBrowseEnvironment))
           }
-        });
-      },
-      //通知组件数据给予
-      setNoticeData(item,type){
-        let self = this;
-        if(type == 1){
-          this.$set(this,'pageType',1);
-        }if(type == 2){
-          this.$set(this,'mediaAnnouncementComponentData',item);
-          setTimeout(function() {
-            //获取报警信息
-            self.$set(self,'pageType',2);
-          },500)
-        }if(type == 3){
-          this.$set(this,'pageType',2);
-        }
-      },
-      //房间组件数据给予
-      setRoomData(item){
-        this.$refs.subComponent.getSubData(item);
-      },
-      //视频组件数据给予
-      setVideoData(item){
-        this.$refs.videoComponent.initialize(item);
-      },
-      //实验室详情开启
-      setSubInfoType(){
-        this.$refs.mapComponent.subInfoTypeFunction();
-      },
-      // 关闭map组件报警
-      setOffAlarm(){
-        this.$refs.mapComponent.offAlarm();
-      },
-      setOffSubAlarm(){
-        this.$refs.subComponent.setOffAlarm();
+          this.$set(this, 'showPage', true)
+        })
       },
     },
     beforeDestroy() {
@@ -148,19 +126,48 @@
 </script>
 <style scoped lang="scss">
   .home{
-    height:100%;
-    background: no-repeat;
-    background-color: #002055;
+    width: 3072px;
+    height: 1660px;
+    flex:1;
+    display: flex;
+    flex-direction: column;
+    background-color: #020B15;
+    position: relative;
     .home-page{
-      height:100%;
-      .top-max-big-box{
-        height:543px;
+      flex:1;
+      overflow: hidden;
+      display: flex;
+      overflow: hidden;
+      .home-left-box{
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        width:826px;
+        margin:0 0 0 32px;
+      }
+      .home-center-box{
         display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        width:1314px;
+        margin:0 21px;
+        padding-top:38px;
       }
-      .bottom-max-big-box{
-        height:467px;
+      .home-right-box{
         display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        width:826px;
+        margin:0 32px 0 0;
       }
     }
+    .button-img-box{
+      width:3072px;
+      height:54px;
+      margin-top:17px;
+      overflow: hidden;
+      background-image: url("../assets/ZDimages/img_db_bg@1x.png");
+      background-size: 100% 100%;
+    }
   }
 </style>