zc

src/api/index.js

@@ -83,3 +83,56 @@ export function laboratoryWsBigViewGetSafeAccessData(data) {
     data: data
   })
 }
+
+/**************************** 新版 ****************************/
+
+//科研人员统计
+export function laboratoryGreenhouseGetSafeUserCount(query) {
+  return request({
+    url: '/laboratory/greenhouse/getSafeUserCount',
+    method: 'get',
+    params: query
+  })
+}
+
+//实时数据统计
+export function iotIotdbSensorDailyStats(query) {
+  return request({
+    url: '/iot/iotdb/sensor/dailyStats',
+    method: 'get',
+    params: query
+  })
+}
+
+//实时数据统-趋势图
+export function iotIotdbSensorRealDataCombined(query) {
+  return request({
+    url: '/iot/iotdb/sensor/realDataCombined',
+    method: 'get',
+    params: query
+  })
+}
+//使用单位及用户统计
+export function laboratoryWsBigViewGetDeptUserStat(data) {
+  return request({
+    url: '/laboratory/wsBigView/getDeptUserStat',
+    method: 'post',
+    data: data
+  })
+}
+//资源设施使用频率排行
+export function laboratoryWsBigViewGetResourceRank(data) {
+  return request({
+    url: '/laboratory/wsBigView/getResourceRank',
+    method: 'post',
+    data: data
+  })
+}
+//进入人数统计及走势
+export function laboratoryWsBigViewGetVisitorFlowStatistics(data) {
+  return request({
+    url: '/laboratory/wsBigView/getVisitorFlowStatistics',
+    method: 'post',
+    data: data
+  })
+}

src/api/yiLi.js

@@ -71,3 +71,29 @@ export function dashboardsResearchProjects(query) {
     params: query
   })
 }
+
+// 资源总览
+export function dashboardsFacilitiesResourceOverview(query) {
+  return request({
+    url: "/dashboards/facilities/resource-overview",
+    method: 'get',
+    params: query
+  })
+}
+
+// 科研人员统计
+export function dashboardsUserStats(query) {
+  return request({
+    url: "/dashboards/userStats",
+    method: 'get',
+    params: query
+  })
+}
+// 通知公告
+export function dashboardsNotice(query) {
+  return request({
+    url: "/dashboards/notice",
+    method: 'get',
+    params: query
+  })
+}

src/views/components/center-bottom-left.vue

@@ -9,14 +9,14 @@
           <div class="right-big-box">
             <p class="right-big-title-p">今日总进入</p>
             <div class="num-box">
-              <p>999</p>
+              <p>{{newData.todayTotalInNumber}}</p>
               <p>人次</p>
             </div>
             <div class="text-box">
               <p>环比</p>
               <p class="el-icon-caret-top colorA"></p>
               <!--<p class="el-icon-caret-bottom"></p>-->
-              <p class="colorA">12%</p>
+              <p class="colorA">{{newData.chainRatio}}%</p>
             </div>
             <p class="position-black-p"></p>
           </div>
@@ -27,14 +27,14 @@
           <div class="right-big-box">
             <p class="right-big-title-p">正在试验人数</p>
             <div class="num-box">
-              <p>99</p>
+              <p>{{newData.experimentingNumber}}</p>
               <p>人次</p>
             </div>
             <div class="text-box">
               <p class="text-left">教师</p>
-              <p class="text-right">2人</p>
+              <p class="text-right">{{newData.teacherNumber}}人</p>
               <p class="text-left">学生</p>
-              <p class="text-right">53人</p>
+              <p class="text-right">{{newData.studentNumber}}人</p>
             </div>
             <p class="position-black-p"></p>
           </div>
@@ -45,6 +45,7 @@
   </div>
 </template>
 <script>
+  import { laboratoryWsBigViewGetVisitorFlowStatistics } from '@/api/index'
   import titleComponent from './subcomponent/titleComponent.vue'
   export default {
     name: 'center-bottom-left',
@@ -59,16 +60,57 @@
           num:'5',
         },
         eChartsData:null,
+        //定时拉取数据
+        getDataTimer:null,
+        // getDataSwitchTime:300000,
+        getDataSwitchTime:30000,
+        newData:{
+          // 今日总进入
+          todayTotalInNumber:0,
+          //环比
+          chainRatio:0,
+          //上升true//下降false
+          isRise:true,
+          //正在实验
+          experimentingNumber:0,
+          //教师人数
+          teacherNumber:0,
+          //学生人数
+          studentNumber:0,
+        }
       }
     },
     created(){
 
     },
     mounted(){
-      this.eChartsleft();
+      this.getDataTimerFunction();
     },
     methods:{
-      eChartsleft() {
+      getDataTimerFunction(){
+        clearInterval(this.getDataTimer)
+        this.laboratoryWsBigViewGetVisitorFlowStatistics();
+        this.getDataTimer = window.setInterval(() => {
+          this.laboratoryWsBigViewGetVisitorFlowStatistics();
+        }, this.getDataSwitchTime);
+      },
+      laboratoryWsBigViewGetVisitorFlowStatistics(){
+        laboratoryWsBigViewGetVisitorFlowStatistics().then(res => {
+          this.$set(this,'newData',res.data);
+          let teacherNumber = [];
+          let studentNumber = [];
+          let inNumber = [];
+          let time = [];
+          for(let i=0;i<res.data.visitorFlowDataVoList.length;i++){
+            teacherNumber.push(res.data.visitorFlowDataVoList[i].teacherNumber)
+            studentNumber.push(res.data.visitorFlowDataVoList[i].studentNumber)
+            inNumber.push(res.data.visitorFlowDataVoList[i].inNumber)
+            time.push(res.data.visitorFlowDataVoList[i].time)
+          }
+          this.eChartsleft(teacherNumber,studentNumber,inNumber,time);
+        })
+      },
+      eChartsleft(teacherNumber,studentNumber,inNumber,time) {
         let option = {
           grid: {
             top: '20%',
@@ -118,20 +160,7 @@
               color: '#fff',
               fontSize: 20,
             },
-            data: [
-              "8:00",
-              "9:00",
-              "10:00",
-              "11:00",
-              "12:00",
-              "13:00",
-              "14:00",
-              "15:00",
-              "16:00",
-              "17:00",
-              "18:00",
-              "19:00",
-            ]
+            data: time
           },
           yAxis: {
             name: '',
@@ -156,23 +185,23 @@
           },
           series: [
             {
-              name: '总数',
+              name: '教师',
               type: 'line',
               showSymbol: true,
               smooth: true,
               // symbol: 'rect',
               symbolSize: 0,
               itemStyle: {
-                color: '#0576FF',
+                color: '#FF8400',
                 borderWidth: 5,
-                borderColor: '#0576FF',
+                borderColor: '#FF8400',
               },
               lineStyle: {
                 width: 3,
-                shadowColor: '#0576FF',//设置折线阴影
+                shadowColor: '#FF8400',//设置折线阴影
                 shadowBlur: 15,
               },
-              data: [20, 22, 31, 28, 44, 55, 42, 44, 62, 51, 20, 31],
+              data: teacherNumber,
               endLabel: {
                 show: false,
               },
@@ -194,35 +223,38 @@
                 shadowColor: '#00FFFF',//设置折线阴影
                 shadowBlur: 15,
               },
-              data: [10, 12, 21, 18, 34, 45, 32, 34, 52, 41, 35, 25],
+              data: studentNumber,
               endLabel: {
                 show: false,
               },
             },
             {
-              name: '教师',
+              name: '总数',
               type: 'line',
               showSymbol: true,
               smooth: true,
               // symbol: 'rect',
               symbolSize: 0,
               itemStyle: {
-                color: '#FF8400',
+                color: '#0576FF',
                 borderWidth: 5,
-                borderColor: '#FF8400',
+                borderColor: '#0576FF',
               },
               lineStyle: {
                 width: 3,
-                shadowColor: '#FF8400',//设置折线阴影
+                shadowColor: '#0576FF',//设置折线阴影
                 shadowBlur: 15,
               },
-              data: [8, 18, 11, 23, 15, 32, 45, 24, 47, 15, 20, 24],
+              data: inNumber,
               endLabel: {
                 show: false,
               },
             },
           ],
         }
+        if (this.$echarts.getInstanceByDom(document.getElementById('center-bottom-left-eCharts-left'))) {
+          this.$echarts.dispose(document.getElementById('center-bottom-left-eCharts-left'));
+        }
         this.eChartsData = this.$echarts.init(document.getElementById('center-bottom-left-eCharts-left'))
         this.eChartsData.clear()
         this.eChartsData.setOption(option)

src/views/components/center-bottom-right.vue

@@ -19,6 +19,7 @@
   </div>
 </template>
 <script>
+  import { laboratoryWsBigViewGetResourceRank } from '@/api/index'
   import titleComponent from './subcomponent/titleComponent.vue'
   export default {
     name: 'center-bottom-right',
@@ -38,29 +39,38 @@
           align:['center','center','center','center','center'],
           oddRowBGC: 'rgba(0,71,152,0.1)',
           evenRowBGC: 'rgba(0,0,0,0.1)',
-          data: [
-            ['A01','植保学院','4','96','9',],
-            ['A02','植保学院','4','96','9',],
-            ['A03','植保学院','4','96','9',],
-            ['A04','植保学院','4','96','9',],
-            ['A05','植保学院','4','96','9',],
-            ['A06','植保学院','4','96','9',],
-            ['A07','植保学院','4','96','9',],
-            ['A08','植保学院','4','96','9',],
-            ['A09','植保学院','4','96','9',],
-            ['A010','植保学院','4','96','9',],
-          ]
+          data: []
         },
+        //定时拉取数据
+        getDataTimer:null,
+        // getDataSwitchTime:300000,
+        getDataSwitchTime:30000,
       }
     },
     created(){
 
     },
     mounted(){
-
+      this.getDataTimerFunction();
     },
     methods:{
-
+      getDataTimerFunction(){
+        clearInterval(this.getDataTimer)
+        this.laboratoryWsBigViewGetResourceRank();
+        this.getDataTimer = window.setInterval(() => {
+          this.laboratoryWsBigViewGetResourceRank();
+        }, this.getDataSwitchTime);
+      },
+      laboratoryWsBigViewGetResourceRank(){
+        this.$set(this.config,'data',[]);
+        laboratoryWsBigViewGetResourceRank().then(res => {
+          let list = [];
+          for(let i=0;i<res.data.length;i++){
+            list.push([res.data[i].roomNo,res.data[i].deptName,res.data[i].authorizedUserCount,res.data[i].recentThirtyDays,res.data[i].recentSevenDays,])
+          }
+          this.$set(this.config,'data',list);
+        })
+      },
     },
   }
 </script>

src/views/components/center-center.vue

@@ -6,7 +6,7 @@
         <p class="center-center-left-title">使用二级单位数量</p>
         <div class="center-center-left-black-box">
           <div>
-            <p>20</p>
+            <p>{{total}}</p>
             <p>个</p>
           </div>
         </div>
@@ -16,6 +16,7 @@
   </div>
 </template>
 <script>
+  import { laboratoryWsBigViewGetDeptUserStat } from '@/api/index'
   import titleComponent from './subcomponent/titleComponent.vue'
   export default {
     name: 'center-center',
@@ -30,23 +31,42 @@
           num:'4',
         },
         eChartsData:null,
+        //定时拉取数据
+        getDataTimer:null,
+        // getDataSwitchTime:300000,
+        getDataSwitchTime:30000,
+        total: 0,
       }
     },
     created(){
 
     },
     mounted(){
-      this.eChartsCenter();
+      this.getDataTimerFunction();
     },
     methods:{
-      eChartsCenter(){
-        let listA = ['零零零一学院', '零零零二学院', '零零零三学院', '零零零四学院', '零零零五学院',
-                     '零零零六学院', '零零零七学院', '零零零八学院', '零零零九学院', '零零零十学院',
-                     '零零一一学院', '零零一二学院', '零零一三学院', '零零一四学院', '零零一五学院',
-                     '零零一六学院', '零零一七学院', '零零一八学院', '零零一九学院', '零零一十学院',
-        ];
-        let listB = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,200];
-        let listC = [20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1];
+      getDataTimerFunction(){
+        clearInterval(this.getDataTimer)
+        this.laboratoryWsBigViewGetDeptUserStat();
+        this.getDataTimer = window.setInterval(() => {
+          this.laboratoryWsBigViewGetDeptUserStat();
+        }, this.getDataSwitchTime);
+      },
+      laboratoryWsBigViewGetDeptUserStat(){
+        laboratoryWsBigViewGetDeptUserStat().then(res => {
+          this.$set(this,'total',res.data.deptNumber);
+          let deptName = [];
+          let deptNum = [];
+          let userNum = [];
+          for(let i=0;i<res.data.deptUserStatDataVoList.length;i++){
+            deptName.push(res.data.deptUserStatDataVoList[i].deptName)
+            deptNum.push(res.data.deptUserStatDataVoList[i].useNumber)
+            userNum.push(res.data.deptUserStatDataVoList[i].totalUserNumber)
+          }
+          this.eChartsCenter(deptName,deptNum,userNum);
+        })
+      },
+      eChartsCenter(deptName,deptNum,userNum){
         let option = {
           grid: {
             top: '14%',
@@ -91,7 +111,7 @@
                   color: '#007380',
                 }
               },
-              data: listA,
+              data: deptName,
             }
           ],
           yAxis: [
@@ -165,7 +185,7 @@
                   { offset: 1, color: '#0178FF' }
                 ], false),
               },
-              data: listB
+              data: deptNum
             },
             {
               name: '使用人数量',
@@ -188,15 +208,27 @@
                 fontSize: 22,
                 formatter: `{c}人`
               },
-              data: listC
+              data: userNum
             }
           ]
         }
+        if (this.$echarts.getInstanceByDom(document.getElementById('center-center-eCharts-center'))) {
+          this.$echarts.dispose(document.getElementById('center-center-eCharts-center'));
+        }
         this.eChartsData = this.$echarts.init(document.getElementById('center-center-eCharts-center'))
         this.eChartsData.clear()
         this.eChartsData.setOption(option)
       },
     },
+    beforeDestroy() {
+      //清除定时器
+      clearInterval(this.getDataTimer);
+    }
+    ,
+    destroyed() {
+      //清除定时器
+      clearInterval(this.getDataTimer);
+    }
   }
 </script>
 <style scoped lang="scss">

src/views/components/center-top.vue

@@ -13,17 +13,17 @@
             <div>
               <p></p>
               <p>使用</p>
-              <p>17间</p>
+              <p>{{rentCount}}间</p>
             </div>
             <div>
               <p></p>
               <p>空闲</p>
-              <p>17间</p>
+              <p>{{freeCount}}间</p>
             </div>
             <div>
               <p></p>
               <p>维修</p>
-              <p>17间</p>
+              <p>{{repairCount}}间</p>
             </div>
           </div>
         </div>
@@ -35,12 +35,12 @@
           <div class="min-center-box">
             <div class="min-center-box-top">
               <div class="min-center-box-left">
-                <p>188</p>
+                <p>{{data1.count}}</p>
                 <p>间</p>
               </div>
               <div class="min-center-box-right">
                 <p>使用率</p>
-                <p>55%</p>
+                <p>{{data1.rate}}%</p>
               </div>
             </div>
             <p class="min-center-box-bottom">科研温室</p>
@@ -51,12 +51,12 @@
           <div class="min-center-box">
             <div class="min-center-box-top">
               <div class="min-center-box-left">
-                <p>188</p>
+                <p>{{data2.count}}</p>
                 <p>间</p>
               </div>
               <div class="min-center-box-right">
                 <p>使用率</p>
-                <p>55%</p>
+                <p>{{data2.rate}}%</p>
               </div>
             </div>
             <p class="min-center-box-bottom">种质资源库</p>
@@ -69,12 +69,12 @@
           <div class="min-center-box">
             <div class="min-center-box-top">
               <div class="min-center-box-left">
-                <p>188</p>
+                <p>{{data3.count}}</p>
                 <p>间</p>
               </div>
               <div class="min-center-box-right">
                 <p>使用率</p>
-                <p>55%</p>
+                <p>{{data3.rate}}%</p>
               </div>
             </div>
             <p class="min-center-box-bottom">温室附属房</p>
@@ -85,12 +85,12 @@
           <div class="min-center-box">
             <div class="min-center-box-top">
               <div class="min-center-box-left">
-                <p>188</p>
+                <p>{{data4.count}}</p>
                 <p>间</p>
               </div>
               <div class="min-center-box-right">
                 <p>使用率</p>
-                <p>55%</p>
+                <p>{{data4.rate}}%</p>
               </div>
             </div>
             <p class="min-center-box-bottom">冷库</p>
@@ -103,12 +103,12 @@
           <div class="min-center-box">
             <div class="min-center-box-top">
               <div class="min-center-box-left">
-                <p>188</p>
+                <p>{{data5.count}}</p>
                 <p>间</p>
               </div>
               <div class="min-center-box-right">
                 <p>使用率</p>
-                <p>55%</p>
+                <p>{{data5.rate}}%</p>
               </div>
             </div>
             <p class="min-center-box-bottom">顶置光型人工气候室</p>
@@ -119,12 +119,12 @@
           <div class="min-center-box">
             <div class="min-center-box-top">
               <div class="min-center-box-left">
-                <p>188</p>
+                <p>{{data6.count}}</p>
                 <p>间</p>
               </div>
               <div class="min-center-box-right">
                 <p>使用率</p>
-                <p>55%</p>
+                <p>{{data6.rate}}%</p>
               </div>
             </div>
             <p class="min-center-box-bottom">培养架型人工气候室</p>
@@ -135,6 +135,7 @@
   </div>
 </template>
 <script>
+  import { dashboardsFacilitiesResourceOverview } from '@/api/yiLi'
   import titleComponent from './subcomponent/titleComponent.vue'
   export default {
     name: 'center-top',
@@ -144,20 +145,105 @@
     data () {
       return {
         titleData:{
-          name:'科研人员统计',
+          name:'资源设施总览',
           type:'top',
           num:'3',
         },
+        //定时拉取数据
+        getDataTimer:null,
+        // getDataSwitchTime:300000,
+        getDataSwitchTime:30000,
+        total:0,
+        rentCount:0,
+        repairCount:0,
+        freeCount:0,
+        data1:{
+          rate:0,
+          count:0,
+        },
+        data2:{
+          rate:0,
+          count:0,
+        },
+        data3:{
+          rate:0,
+          count:0,
+        },
+        data4:{
+          rate:0,
+          count:0,
+        },
+        data5:{
+          rate:0,
+          count:0,
+        },
+        data6:{
+          rate:0,
+          count:0,
+        },
       }
     },
     created(){
 
     },
     mounted(){
-
+      this.getDataTimerFunction();
     },
     methods:{
-
+      getDataTimerFunction(){
+        clearInterval(this.getDataTimer)
+        this.dashboardsFacilitiesResourceOverview();
+        this.getDataTimer = window.setInterval(() => {
+          this.dashboardsFacilitiesResourceOverview();
+        }, this.getDataSwitchTime);
+      },
+      dashboardsFacilitiesResourceOverview(){
+        let self = this;
+        dashboardsFacilitiesResourceOverview().then(res => {
+          this.$set(this,'total',res.data.total);
+          this.$set(this,'rentCount',res.data.rentCount);
+          this.$set(this,'repairCount',res.data.repairCount);
+          this.$set(this,'freeCount',res.data.freeCount);
+          for(let i=0;i<res.data.types.length;i++){
+            if(res.data.types[i].type == '温室'){
+              self.$set(self,'data1',{
+                count:res.data.types[i].count,
+                rate:self.accMul(res.data.types[i].rate,100).toFixed(0),
+              });
+            }
+            if(res.data.types[i].type == '种质资源库'){
+              self.$set(self,'data2',{
+                count:res.data.types[i].count,
+                rate:self.accMul(res.data.types[i].rate,100).toFixed(0),
+              });
+            }
+            if(res.data.types[i].type == '温室附属房'){
+              self.$set(self,'data3',{
+                count:res.data.types[i].count,
+                rate:self.accMul(res.data.types[i].rate,100).toFixed(0),
+              });
+            }
+            if(res.data.types[i].type == '冷库'){
+              self.$set(self,'data4',{
+                count:res.data.types[i].count,
+                rate:self.accMul(res.data.types[i].rate,100).toFixed(0),
+              });
+            }
+            if(res.data.types[i].type == '顶置光型人工气候室'){
+              self.$set(self,'data5',{
+                count:res.data.types[i].count,
+                rate:self.accMul(res.data.types[i].rate,100).toFixed(0),
+              });
+            }
+            if(res.data.types[i].type == '培养架型人工气候室'){
+              self.$set(self,'data6',{
+                count:res.data.types[i].count,
+                rate:self.accMul(res.data.types[i].rate,100).toFixed(0),
+              });
+            }
+          }
+        })
+      },
     },
   }
 </script>
@@ -379,6 +465,7 @@
                   font-weight: 400;
                   font-size: 50px;
                   line-height: 50px;
+                  text-align: center;
                 }
                 p:nth-child(2){
                   width: 30px;
@@ -397,9 +484,10 @@
               .min-center-box-right{
                 margin-top:5px;
                 display: flex;
-                width:130px;
+                min-width:130px;
                 height: 40px;
                 border-radius: 20px 20px 20px 20px;
+                padding:0 10px;
                 p{
                   line-height:40px;
                   font-family: Source Han Sans CN;
@@ -411,7 +499,6 @@
                   text-transform: none;
                 }
                 p:nth-child(1){
-                  margin-left:6px;
                   color:#fff;
                   text-align: right;
                 }

src/views/components/headComponent.vue

@@ -35,8 +35,8 @@
 
     },
     mounted(){
-      // this.timeFunction();
-      // this.weatherFunction();
+      this.timeFunction();
+      this.weatherFunction();
     },
     methods:{
       //时间定时器
@@ -110,8 +110,8 @@
     }
     .time-p{
       position: absolute;
-      top:99px;
-      left:44px;
+      top:132px;
+      left:57px;
       height:30px;
       line-height:30px;
       color:#fff;
@@ -120,8 +120,8 @@
     .weather-box{
       display: flex;
       position: absolute;
-      top:99px;
-      right:33px;
+      top:132px;
+      right:120px;
       height:30px;
       line-height:30px;
       color:#fff;

src/views/components/left-bottom.vue

@@ -4,7 +4,7 @@
     <div class="left-bottom-page">
       <div class="position-num-box">
         <p>总计</p>
-        <p>199</p>
+        <p>{{total}}</p>
       </div>
       <div id="left-bottom-eCharts-top"></div>
       <div id="left-bottom-eCharts-bottom"></div>
@@ -12,6 +12,7 @@
   </div>
 </template>
 <script>
+  import { dashboardsResearchProjects } from '@/api/yiLi'
   import titleComponent from './subcomponent/titleComponent.vue'
   export default {
     name: 'left-bottom',
@@ -25,32 +26,87 @@
           type:'left',
           num:'2',
         },
+        //饼图数据
+        pieData: [],
+        total:0,
+        //柱状图数据
+        barMaxList:[],
+        barList:[],
         eChartsData1:null,
         eChartsData2:null,
+        //定时拉取数据
+        getDataTimer:null,
+        // getDataSwitchTime:300000,
+        getDataSwitchTime:30000,
+        //图标轮播
+        eChartsTimerData: null,
+        eChartsCarouselTime: 6000,
+        eChartsCarouselIndex: 0,
       }
     },
     created(){
 
     },
     mounted(){
-      this.initialize();
+      this.getDataTimerFunction();
     },
     methods:{
-      initialize(){
-        this.eChartsTop();
-        this.eChartsBottom();
+      getDataTimerFunction(){
+        clearInterval(this.getDataTimer)
+        this.dashboardsResearchProjects();
+        this.getDataTimer = window.setInterval(() => {
+          this.dashboardsResearchProjects();
+        }, this.getDataSwitchTime);
+      },
+      dashboardsResearchProjects(){
+        clearInterval(this.eChartsTimerData)
+        dashboardsResearchProjects().then(res => {
+          //饼图
+          let pieData = [];
+          for(let i=0;i<res.data.projectLevels.length;i++){
+            pieData.push({
+              name:res.data.projectLevels[i].type,
+              value:res.data.projectLevels[i].count,
+            });
+          }
+          this.$set(this,'pieData',pieData);
+          //柱状图
+          this.$set(this,'eChartsCarouselIndex',0);
+          const getFirstSix = (str) => str.slice(0, 6);
+          //柱状图
+          let maxList = []
+          let list = []
+          res.data.collages = res.data.collages.sort((a, b) => b.count - a.count);
+          for (let i = 0; i < res.data.collages.length; i++) {
+            if (list[7]) {
+              maxList.push(JSON.parse(JSON.stringify(list)))
+              list = []
+              list.push({
+                name: getFirstSix(res.data.collages[i].type),
+                value: res.data.collages[i].count
+              })
+            } else {
+              list.push({
+                name: getFirstSix(res.data.collages[i].type),
+                value: res.data.collages[i].count
+              })
+            }
+          }
+          if (!maxList[0]) {
+            maxList.push(JSON.parse(JSON.stringify(list)))
+          } else {
+            if (maxList[maxList.length - 1].name != list[list.length - 1].name) {
+              maxList.push(JSON.parse(JSON.stringify(list)))
+            }
+          }
+          this.$set(this, 'barMaxList', maxList)
+          this.$set(this, 'barList', maxList[0])
+          this.eChartsTop();
+          this.eChartsBottom();
+        })
       },
       eChartsTop(){
         let color = ['#DF994D', '#FFB2B2', '#004A8D', '#00FFFF', '#0183FA', '#F1C06A', '#4D8A2A', ];
-        let OptionData = [
-          { name: '国家级', value: 200 },
-          { name: '省部级', value: 250 },
-          { name: '厅局级', value: 300 },
-          { name: '县市区级', value: 350 },
-          { name: '校级', value: 400 },
-          { name: '横向', value: 400 },
-          { name: '其他', value: 400 },
-        ]
         let option = {
           color: color,
           polar: {
@@ -121,7 +177,7 @@
                   }
                 }
               },
-              data: OptionData.map((item, index) => {
+              data: this.pieData.map((item, index) => {
                 return {
                   label: {
                     color: color[index],
@@ -132,49 +188,16 @@
             },
           ],
         };
+        if (this.$echarts.getInstanceByDom(document.getElementById('left-bottom-eCharts-top'))) {
+          this.$echarts.dispose(document.getElementById('left-bottom-eCharts-top'));
+        }
         this.eChartsData1 = this.$echarts.init(document.getElementById('left-bottom-eCharts-top'))
         this.eChartsData1.clear()
         this.eChartsData1.setOption(option)
       },
       eChartsBottom(){
-        let echartData = [
-          {
-            value: 10,
-            name: '一号学院名称',
-          },
-          {
-            value: 9,
-            name: '二号学院名称',
-          },
-          {
-            value: 41,
-            name: '三号学院名称',
-          },
-          {
-            value: 40,
-            name: '四号学院名称',
-          },
-          {
-            value: 38,
-            name: '五号学院名称',
-          },
-          {
-            value: 33,
-            name: '六号学院名称',
-          },
-          {
-            value: 32,
-            name: '七号学院名称',
-          },
-          {
-            value: 31,
-            name: '八号学院名称',
-          },
-          {
-            value: 22,
-            name: '九号学院名称',
-          },
-        ];
+        clearInterval(this.eChartsTimerData)
+        let barList = this.barList;
         let option = {
           tooltip: {
             show:false,
@@ -211,19 +234,19 @@
           yAxis: [
             {
               type: 'category',
-              data: echartData.map(item => item.value),
+              data: barList.map(item => item.value),
               inverse: true,
               position: 'right',
               axisLabel: {
                 padding: [-3, 0, 0, 0],
                 margin: 10, //刻度标签与轴线之间的距离
                 formatter: function (value, index) {
-                  // return `{a|${echartData[index].value}}{b|宗}`;
-                  // return `{a|${echartData[index].value}}`;
+                  // return `{a|${barList[index].value}}{b|宗}`;
+                  return `{a|${barList[index].value}}`;
                 },
                 rich: {
                   a: {
-                    fontSize: 15,
+                    fontSize: 24,
                     color: '#fff',
                     padding: [4, 5, 0, 0],
                   },
@@ -252,7 +275,7 @@
               axisTick: {
                 show: false,
               },
-              data: echartData.map((item) => item.name),
+              data: barList.map((item) => item.name),
               axisLabel: {
                 show: true,
                 margin: -2,
@@ -266,7 +289,7 @@
           ],
           series: [
             {
-              data: echartData.map((item, i) => {
+              data: barList.map((item, i) => {
                 let itemStyle = {
                   color: this.$echarts.graphic.LinearGradient(0, 1, 1, 1, [
                     { offset: 0, color: 'rgba(1, 131, 250, 1)' },
@@ -306,11 +329,44 @@
             },
           ],
         };
+        if (this.$echarts.getInstanceByDom(document.getElementById('left-bottom-eCharts-bottom'))) {
+          this.$echarts.dispose(document.getElementById('left-bottom-eCharts-bottom'));
+        }
         this.eChartsData2 = this.$echarts.init(document.getElementById('left-bottom-eCharts-bottom'))
         this.eChartsData2.clear()
         this.eChartsData2.setOption(option)
+        this.eChartsTimer()
+      },
+
+      eChartsTimer() {
+        let self = this
+        self.eChartsTimerData = window.setInterval(() => {
+          eChartsCarousel()
+        }, this.eChartsCarouselTime)
+        function eChartsCarousel() {
+          if (self.eChartsCarouselIndex < self.barMaxList.length-1) {
+            self.eChartsCarouselIndex++
+          }else{
+            self.$set(self, 'eChartsCarouselIndex', 0)
+          }
+          if(self.barList[0]){
+            self.$set(self,'barList',self.barMaxList[self.eChartsCarouselIndex]);
+            self.eChartsBottom();
+          }
+        }
       },
     },
+    beforeDestroy() {
+      //清除定时器
+      clearInterval(this.getDataTimer);
+      clearInterval(this.eChartsTimerData);
+    }
+    ,
+    destroyed() {
+      //清除定时器
+      clearInterval(this.getDataTimer);
+      clearInterval(this.eChartsTimerData);
+    }
   }
 </script>
 <style scoped lang="scss">

src/views/components/left-top.vue

@@ -5,21 +5,20 @@
       <div class="top-max-big-box">
         <img src="@/assets/ZDimages/icon_kyrytj_zs@1x.png">
         <p>总数</p>
-        <p>183</p>
+        <p>{{newData.total}}</p>
         <p>人</p>
       </div>
       <div class="text-max-big-box">
         <div>
           <p>老师：</p>
-          <p>183</p>
+          <p>{{newData.teacher.teaTotal}}</p>
           <p>人</p>
         </div>
         <div>
           <p>学生：</p>
-          <p>183</p>
+          <p>{{newData.student.stuTotal}}</p>
           <p>人</p>
         </div>
-
       </div>
       <div class="eCharts-box">
         <div id="left-top-eCharts-left"></div>
@@ -29,6 +28,7 @@
   </div>
 </template>
 <script>
+  import { laboratoryGreenhouseGetSafeUserCount } from '@/api/index'
   import titleComponent from './subcomponent/titleComponent.vue'
   export default {
     name: 'left-top',
@@ -44,18 +44,47 @@
         },
         eChartsData1:null,
         eChartsData2:null,
+        //定时拉取数据
+        getDataTimer:null,
+        // getDataSwitchTime:300000,
+        getDataSwitchTime:30000,
+        newData:{
+          total:0,
+          teacher: {
+            professor: 0,
+            teaTotal: 0,
+            assProfessor: 0,
+            assistant: 0,
+            lecturer: 0
+          },
+          student: {
+            stuTotal: 0,
+            graduate: 0,
+            undergraduate: 0
+          }
+        },
       }
     },
     created() {
 
     },
     mounted() {
-      this.initialize();
+      this.getDataTimerFunction();
     },
     methods: {
-      initialize(){
-        this.eChartsLeft();
-        this.eChartsRight();
+      getDataTimerFunction(){
+        clearInterval(this.getDataTimer)
+        this.laboratoryGreenhouseGetSafeUserCount();
+        this.getDataTimer = window.setInterval(() => {
+          this.laboratoryGreenhouseGetSafeUserCount();
+        }, this.getDataSwitchTime);
+      },
+      laboratoryGreenhouseGetSafeUserCount() {
+        laboratoryGreenhouseGetSafeUserCount().then(res => {
+          this.$set(this,'newData',res.data);
+          this.eChartsLeft();
+          this.eChartsRight();
+        })
       },
       eChartsLeft() {
         let colorA = this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -152,7 +181,11 @@
         this.$echarts.graphic.registerShape("CubeRight", CubeRight);
         this.$echarts.graphic.registerShape("CubeTop", CubeTop);
         const VALUE = [
-          2012, 1230, 3790, 2349];
+          this.newData.teacher.professor,
+          this.newData.teacher.assProfessor,
+          this.newData.teacher.lecturer,
+          this.newData.teacher.assistant,
+        ];
         let option = {
           title: {
             text: "",
@@ -192,7 +225,7 @@
               margin: 25,
               align: "center",
               textStyle: {
-                fontSize: 26,
+                fontSize: 22,
                 color: "#ffffff",
                 rich: {
                   a: {
@@ -210,6 +243,9 @@
           },
           yAxis: {
             type: "value",
+            //最小值与最小刻度
+            min:0,
+            minInterval:1,
             axisLine: {
               show: true,
               lineStyle: {
@@ -286,11 +322,11 @@
               type: "bar",
               label: {
                 normal: {
-                  show: false,
+                  show: true,
                   position: "top",
-                  fontSize: 16,
+                  fontSize: 20,
                   color: "#fff",
-                  offset: [4, -25],
+                  offset: [4, -16],
                 },
               },
               itemStyle: {
@@ -300,6 +336,9 @@
             },
           ],
         };
+        if (this.$echarts.getInstanceByDom(document.getElementById('left-top-eCharts-left'))) {
+          this.$echarts.dispose(document.getElementById('left-top-eCharts-left'));
+        }
         this.eChartsData1 = this.$echarts.init(document.getElementById('left-top-eCharts-left'))
         this.eChartsData1.clear()
         this.eChartsData1.setOption(option)
@@ -307,16 +346,14 @@
       eChartsRight() {
         let data = [
           {
-            name: "常规",
-            value: 175.17,
-          },
-          {
-            name: "紧急",
-            value: 148.35,
+            name: "研究生",
+            // value: this.newData.student.graduate,
+            value: 88,
           },
           {
-            name: "疑难",
-            value: 95.36,
+            name: "本科生",
+            // value: this.newData.student.undergraduate,
+            value: 5,
           },
         ];
         let xAxisData = [];
@@ -361,7 +398,7 @@
               margin: 25,
               align: "center",
               textStyle: {
-                fontSize: 26,
+                fontSize: 22,
                 color: "#ffffff",
                 rich: {
                   a: {
@@ -380,6 +417,9 @@
           },
           yAxis: {
             type: "value",
+            //最小值与最小刻度
+            min:0,
+            minInterval:1,
             axisLine: {
               show: true,
               lineStyle: {
@@ -410,9 +450,11 @@
                 },
               },
               label: {
-                show: false,
+                show: true,
                 position: "top",
-                fontSize: 16,
+                fontSize: 20,
+                color: "#fff",
+                offset: [0, 0],
               },
               symbolPosition: "end",
               data: seriesData1,
@@ -421,7 +463,7 @@
               name: "柱底部",
               type: "pictorialBar",
               symbolSize: [26, 10],
-              symbolOffset: [0, 5],
+              symbolOffset: [0, 0],
               z: 12,
               itemStyle: {
                 normal: {
@@ -455,10 +497,22 @@
             },
           ],
         };
+        if (this.$echarts.getInstanceByDom(document.getElementById('left-top-eCharts-right'))) {
+          this.$echarts.dispose(document.getElementById('left-top-eCharts-right'));
+        }
         this.eChartsData2 = this.$echarts.init(document.getElementById('left-top-eCharts-right'))
         this.eChartsData2.clear()
         this.eChartsData2.setOption(option)
       }
+    },
+    beforeDestroy() {
+      //清除定时器
+      clearInterval(this.getDataTimer);
+    }
+    ,
+    destroyed() {
+      //清除定时器
+      clearInterval(this.getDataTimer);
     }
   }
 </script>

src/views/components/right.vue

@@ -4,8 +4,8 @@
     <div class="right-page">
       <div class="right-page-top-max-big-box">
         <div class="right-page-title-box">
-          <p>温室一期1区</p>
-          <p>使用人：王教授 资环学院</p>
+          <p>{{newData.buildName}}{{newData.floorName}}</p>
+          <p>使用人：{{newData.userName}} {{newData.deptName}}</p>
         </div>
         <div class="right-page-top-flex-box">
           <div class="left-max-big-box">
@@ -14,9 +14,9 @@
               <p>温度</p>
             </div>
             <div class="right-big-box">
-              <p>最高值：55.1℃</p>
-              <p>当前值：43.5℃</p>
-              <p>最低值：22.5℃</p>
+              <p>最高值：{{newData.temperature.max}}℃</p>
+              <p>当前值：{{newData.temperature.last}}℃</p>
+              <p>最低值：{{newData.temperature.min}}℃</p>
             </div>
           </div>
           <div class="right-max-big-box">
@@ -25,9 +25,9 @@
               <p>湿度</p>
             </div>
             <div class="right-big-box">
-              <p>最高值：71.2%RH</p>
-              <p>当前值：67.1%RH</p>
-              <p>最低值：45%RH</p>
+              <p>最高值：{{newData.temperature.max}}%RH</p>
+              <p>当前值：{{newData.temperature.last}}%RH</p>
+              <p>最低值：{{newData.temperature.min}}%RH</p>
             </div>
           </div>
         </div>
@@ -35,21 +35,17 @@
       <div id="right-eCharts-1"></div>
       <div id="right-eCharts-2"></div>
       <div id="right-eCharts-3"></div>
-      <div class="right-page-bottom-video-max-big-box">
-        <H5PlayerVideo class="for-video-box"
-                       :videoProps="videoProps"></H5PlayerVideo>
-      </div>
+      <div class="right-page-bottom-video-max-big-box" id="videoData" ref="videoData"></div>
     </div>
   </div>
 </template>
 <script>
-  import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue'
+  import { iotIotdbSensorDailyStats,iotIotdbSensorRealDataCombined,iotCameraFindByCondition } from '@/api/index'
   import titleComponent from './subcomponent/titleComponent.vue'
   export default {
     name: 'right',
     components: {
-      titleComponent,
-      H5PlayerVideo
+      titleComponent
     },
     data () {
       return {
@@ -58,6 +54,28 @@
           type:'right',
           num:'7',
         },
+        //定时拉取数据
+        getDataTimer:null,
+        // getDataSwitchTime:300000,
+        getDataSwitchTime:30000,
+        newData:{
+          subId: '',
+          deptName: "",
+          buildName: "",
+          subName: "",
+          temperature: {
+            min: 0,
+            last: 0,
+            max: 0
+          },
+          humidity: {
+            min: 0,
+            last: 0,
+            max: 0
+          },
+          floorName: "",
+          userName: ""
+        },
         videoProps:{
           fullShow:true,
           width: 876, //(宽度:非必传-默认600)
@@ -71,17 +89,180 @@
 
     },
     mounted(){
-      this.initialize();
+      this.getDataTimerFunction();
+      this.initH5Player(1);
     },
     methods:{
-      initialize(){
-        this.eCharts1();
-        this.eCharts2();
-        this.eCharts3();
+      getDataTimerFunction(){
+        clearInterval(this.getDataTimer)
+        this.iotIotdbSensorDailyStats();
+        this.iotIotdbSensorRealDataCombined();
+        this.getDataTimer = window.setInterval(() => {
+          this.iotIotdbSensorDailyStats();
+          this.iotIotdbSensorRealDataCombined();
+        }, this.getDataSwitchTime);
+      },
+      iotIotdbSensorDailyStats(){
+        iotIotdbSensorDailyStats().then(res => {
+          this.$set(this,'newData',res.data);
+          this.iotCameraFindByCondition(res.data);
+        })
+      },
+      iotIotdbSensorRealDataCombined(){
+        iotIotdbSensorRealDataCombined().then(res => {
+          let wdData = [];
+          let wdTime = [];
+          let wdBzData = [];
+          let sdData = [];
+          let sdTime = [];
+          let sdBzData = [];
+          let glData = [];
+          let glTime = [];
+          let glBzData = [];
+          //温度
+          for(let i=0;i<res.data.temperature.length;i++){
+            wdData.push(res.data.temperature[i].temperature)
+            wdTime.push(res.data.temperature[i].time)
+            wdBzData.push(res.data.wdMin)
+          }
+          //湿度
+          for(let i=0;i<res.data.humidity.length;i++){
+            sdData.push(res.data.humidity[i].humidity)
+            sdTime.push(res.data.humidity[i].time)
+            sdBzData.push(res.data.sdMin)
+          }
+          //功率
+          for(let i=0;i<res.data.power.length;i++){
+            glData.push(res.data.power[i].power)
+            glTime.push(res.data.power[i].time)
+            glBzData.push(res.data.powerMin)
+          }
+          this.eCharts1(wdData,wdTime,wdBzData);
+          this.eCharts2(sdData,sdTime,sdBzData);
+          this.eCharts3(glData,glTime,glBzData);
+        })
       },
-      eCharts1(){
-        let listA = ['00:00', '03:30', '07:00', '10:30', '14:00', '17:30', '21:00'];
-        let listB = [105, 272, 239, 150, 147, 319, 284,];
+      iotCameraFindByCondition(obj){
+        let videoObj = {
+          page:'1',
+          pageSize:'10',
+          buildId:'',
+          floorId:'',
+          passageway:'',
+          subIds:[obj.subId],
+          protocol:window.location.href.indexOf('https') !== -1?'wss':'ws',
+          streamType:1,
+          source:1,
+        };
+        iotCameraFindByCondition(videoObj).then(res => {
+          if(res.data.records[0]){
+            this.$set(this, 'videoData', {
+              id: 'videoData',
+              width: 876,
+              height: 419,
+              url: res.data.records[0].streamUrl
+            })
+            this.videoOff();
+          }
+        });
+      },
+      //视频组件初始化
+      initH5Player(split) {
+        this.myPlugin = new window.JSPlugin({
+          szId: 'videoData', //需要英文字母开头，唯一性，必填
+          // szId: this.videoData.id, //需要英文字母开头，唯一性，必填
+          szBasePath: '/h5player/', // 必填,与h5player.min.js的引用目录一致 填写的是pulblic下的路径！！！
+          mseWorkerEnable:true,
+          bSupporDoubleClickFull: false,//是否支持双击全屏，默认true
+          // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
+          iWidth: 876,
+          iHeight: 419,
+          // 分屏播放，默认最大分屏4*4
+          iMaxSplit: split,
+          iCurrentSplit: split,
+          openDebug: false,
+          oStyle: {
+            borderSelect: '#000'
+          },
+        })
+        let iWndNum = 1;
+        let InterruptTime = 5;
+        //设置断流时间回调
+        this.myPlugin.JS_SetInterruptTime(iWndNum, InterruptTime).then(
+          () => {
+            // console.info('JS_SetInterruptTime success');
+            // do you want...
+          },
+          (err) => {
+            // console.info('JS_SetInterruptTime failed');
+            // do you want...
+          }
+        );
+        // 事件回调绑定
+        this.myPlugin.JS_SetWindowControlCallback({
+          // windowEventSelect: function (iWndIndex) {  //插件选中窗口回调
+          //   // console.log('windowSelect callback: ', iWndIndex)
+          // },
+          // pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {  //插件错误回调
+          //   // console.log('pluginError callback: ', iWndIndex, iErrorCode, oError)
+          // },
+          // windowEventOver: function (iWndIndex) {  //鼠标移过回调
+          //   //console.log(iWndIndex);
+          // },
+          // windowEventOut: function (iWndIndex) {  //鼠标移出回调
+          //   //console.log(iWndIndex);
+          // },
+          // windowEventUp: function (iWndIndex) {  //鼠标mouseup事件回调
+          //   //console.log(iWndIndex);
+          // },
+          // windowFullCcreenChange: function (bFull) {  //全屏切换回调
+          //   // console.log('fullScreen callback: ', bFull)
+          // },
+          // firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {  //首帧显示回调
+          //   // console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight)
+          // },
+          performanceLack: function () {  //性能不足回调
+            console.log('performanceLack callback: 性能不足')
+          }
+        })
+      },
+      //调用播放
+      initPlayer(url, index,type) {
+        this.myPlugin.JS_Play(url,
+          {
+            playURL: url, // 流媒体播放时必传
+            mode: type?type:0 // 解码类型：0=普通模式; 1=高级模式 默认为0
+            // ...
+          },
+          index //当前窗口下标
+        ).then(
+          () => {
+            // this.$set(this,'playType',true);
+            console.info('JS_Play success')
+            // do you want...
+          },
+          (err) => {
+            // this.$set(this,'playType',false);
+            console.info('JS_Play failed', err)
+            // do you want...
+          }
+        )
+      },
+      videoOff() {
+        this.myPlugin.JS_StopRealPlayAll().then(
+          () => {
+            console.info('JS_StopRealPlayAll success')
+            // do you want...
+            let type = this.videoData.url.indexOf('wss') !== -1?1:0;
+            this.initPlayer(this.videoData.url, 0,type)
+          },
+          (err) => {
+            console.info('JS_StopRealPlayAll failed')
+            // do you want...
+          }
+        )
+      },
+      eCharts1(Data,Time,BzData){
         let option = {
           tooltip: {
             show: false,
@@ -102,7 +283,7 @@
             selectedMode: false,
           },
           xAxis: {
-            data: listA,
+            data: Time,
             type: 'category',
             boundaryGap: true,
             itemStyle: {
@@ -169,7 +350,7 @@
             containLabel: true
           },
           series: [{
-            data: listB,
+            data: Data,
             name: ' 24h温度走势图',
             type: 'line',
             symbol: 'circle',
@@ -206,15 +387,54 @@
                 ),
               }
             }
+          },{
+            data: BzData,
+            name: '',
+            type: 'line',
+            symbol: 'circle',
+            smooth: true,
+            symbolSize: 0,//不需要点就设置0
+            lineStyle: {
+              width: 2,
+              type: 'solid'
+            },
+            itemStyle: {
+              borderWidth: 5,
+              borderColor: 'rgba(255,86,86,1)',
+              color: 'rgba(255,86,86,1)'
+            },
+            areaStyle: {
+              color: 'rgba(255,86,86,1)',
+              normal: {
+                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);
+                color: this.$echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [{
+                    offset: 0,
+                    color: 'rgba(255,86,86,0.6)'
+                  },
+                    {
+                      offset: 1,
+                      color: 'rgba(255,86,86,.1)'
+                    }
+                  ],
+                  false
+                ),
+              }
+            }
           }]
         }
+        if (this.$echarts.getInstanceByDom(document.getElementById('right-eCharts-1'))) {
+          this.$echarts.dispose(document.getElementById('right-eCharts-1'));
+        }
         this.eChartsData1 = this.$echarts.init(document.getElementById('right-eCharts-1'))
         this.eChartsData1.clear()
         this.eChartsData1.setOption(option)
       },
-      eCharts2(){
-        let listA = ['00:00', '03:30', '07:00', '10:30', '14:00', '17:30', '21:00'];
-        let listB = [105, 272, 239, 150, 147, 319, 284,];
+      eCharts2(Data,Time,BzData){
         let option = {
           tooltip: {
             show: false,
@@ -234,7 +454,7 @@
             selectedMode: false,
           },
           xAxis: {
-            data: listA,
+            data: Time,
             type: 'category',
             boundaryGap: true,
             itemStyle: {
@@ -301,7 +521,7 @@
             containLabel: true
           },
           series: [{
-            data: listB,
+            data: Data,
             name: ' 24h湿度走势图',
             type: 'line',
             symbol: 'circle',
@@ -338,15 +558,54 @@
                 ),
               }
             }
+          },{
+            data: BzData,
+            name: '',
+            type: 'line',
+            symbol: 'circle',
+            smooth: true,
+            symbolSize: 0,//不需要点就设置0
+            lineStyle: {
+              width: 2,
+              type: 'solid'
+            },
+            itemStyle: {
+              borderWidth: 5,
+              borderColor: 'rgba(1,131,250,1)',
+              color: 'rgba(1,131,250,1)',
+            },
+            areaStyle: {
+              color: 'rgba(1,131,250,1)',
+              normal: {
+                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);
+                color: this.$echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [{
+                    offset: 0,
+                    color: 'rgba(1,131,250,0.6)',
+                  },
+                    {
+                      offset: 1,
+                      color: 'rgba(1,131,250,0)',
+                    }
+                  ],
+                  false
+                ),
+              }
+            }
           }]
         }
-        this.eChartsData1 = this.$echarts.init(document.getElementById('right-eCharts-2'))
-        this.eChartsData1.clear()
-        this.eChartsData1.setOption(option)
+        if (this.$echarts.getInstanceByDom(document.getElementById('right-eCharts-2'))) {
+          this.$echarts.dispose(document.getElementById('right-eCharts-2'));
+        }
+        this.eChartsData2 = this.$echarts.init(document.getElementById('right-eCharts-2'))
+        this.eChartsData2.clear()
+        this.eChartsData2.setOption(option)
       },
-      eCharts3(){
-        let listA = ['00:00', '03:30', '07:00', '10:30', '14:00', '17:30', '21:00'];
-        let listB = [105, 272, 239, 150, 147, 319, 284,];
+      eCharts3(Data,Time,BzData){
         let option = {
           tooltip: {
             show: false,
@@ -367,7 +626,7 @@
             selectedMode: false,
           },
           xAxis: {
-            data: listA,
+            data: Time,
             type: 'category',
             boundaryGap: true,
             itemStyle: {
@@ -434,7 +693,7 @@
             containLabel: true
           },
           series: [{
-            data: listB,
+            data: Data,
             name: ' 用电功率（w）',
             type: 'line',
             symbol: 'circle',
@@ -471,13 +730,63 @@
                 ),
               }
             }
+          },{
+            data: BzData,
+            name: '',
+            type: 'line',
+            symbol: 'circle',
+            smooth: true,
+            symbolSize: 0,//不需要点就设置0
+            lineStyle: {
+              width: 2,
+              type: 'solid'
+            },
+            itemStyle: {
+              borderWidth: 5,
+              borderColor: 'rgba(255,132,0,1)',
+              color: 'rgba(255,132,0,1)'
+            },
+            areaStyle: {
+              color: 'rgba(255,132,0,1)',
+              normal: {
+                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);
+                color: this.$echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [{
+                    offset: 0,
+                    color: 'rgba(255,132,0,0.6)'
+                  },
+                    {
+                      offset: 1,
+                      color: 'rgba(255,132,0,0)'
+                    }
+                  ],
+                  false
+                ),
+              }
+            }
           }]
         }
+        if (this.$echarts.getInstanceByDom(document.getElementById('right-eCharts-3'))) {
+          this.$echarts.dispose(document.getElementById('right-eCharts-3'));
+        }
         this.eChartsData3 = this.$echarts.init(document.getElementById('right-eCharts-3'))
         this.eChartsData3.clear()
         this.eChartsData3.setOption(option)
       },
     },
+    beforeDestroy() {
+      //清除定时器
+      clearInterval(this.getDataTimer);
+    }
+    ,
+    destroyed() {
+      //清除定时器
+      clearInterval(this.getDataTimer);
+    }
   }
 </script>
 <style scoped lang="scss">
@@ -554,6 +863,7 @@
             }
             .right-big-box{
               p{
+                overflow: hidden;
                 width: 240px;
                 height: 64px;
                 font-family: Source Han Sans CN, Source Han Sans CN;

src/views/components/subcomponent/alarmComponent.vue

@@ -0,0 +1,306 @@
+<!--报警弹窗-->
+<template>
+  <div class="alarmComponent">
+    <div class="alarm-max-big-box">
+      <div class="title-top-box blink">
+        <img src="@/assets/ZDimages/alarm-title.png">
+      </div>
+      <div class="alarm-big-box">
+        <div class="alarm-left-box">
+          <div class="alarm-text-box">
+            <div class="text-box">
+              <div class="colorType" :class="alarmData.status==1?'idle-color':(alarmData.status==2?'use-color':(alarmData.status==3?'maintenance-color':''))">
+                <p>{{alarmData.status==1?'空闲':(alarmData.status==2?'使用':(alarmData.status==3?'维修':''))}}</p>
+              </div>
+              <p class="roomName">{{alarmData.alarmData.buildName?alarmData.alarmData.buildName:''}} {{alarmData.alarmData.floorName?alarmData.alarmData.floorName:''}} {{alarmData.roomNumName}}</p>
+            </div>
+            <div class="img-box">
+              <img src="@/assets/ZDimages/icon_bjsj_tk@1x.png">
+              <p class="right-text">报警时间：{{parseTime(alarmData.alarmData.eventStartTime,"{y}-{m}-{d} {h}:{i}")}}</p>
+            </div>
+            <div class="img-box">
+              <img src="@/assets/ZDimages/icon_sslx_tk@1x.png">
+              <p class="right-text">设施类型：{{alarmData.equTypeValue}}</p>
+            </div>
+            <div class="img-box">
+              <img src="@/assets/ZDimages/icon_lxr_tk@1x.png">
+              <p class="right-text" v-if="alarmData.status==2">使用人：{{alarmData.userName}}</p>
+              <p class="right-text" v-if="alarmData.status!=2">负责人：{{alarmData.headName}}</p>
+            </div>
+            <div class="img-box">
+              <img src="@/assets/ZDimages/icon_bjnr_tk@1x.png">
+              <p class="right-text">报警内容：</p>
+            </div>
+          </div>
+          <div class="alarm-sensor-box">
+            <div class="for-sensor-box" v-for="(item,index) in alarmData.sensor" :key="index">
+              <div class="sensor-img-box">
+                <svg-icon v-if="item.icon" class="svg-img" :icon-class="item.icon"/>
+              </div>
+              <p class="sensor-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'">异常</span>
+              </p>
+              <p class="sensor-name-p">{{item.deviceName}}</p>
+            </div>
+          </div>
+        </div>
+        <div class="alarm-right-box">
+          <H5PlayerVideo class="alarm-video-max-big-box"
+                         :videoProps="alarmData.videoList[0]" v-if="alarmData.videoList[0]"></H5PlayerVideo>
+          <img v-if="!alarmData.videoList[0]" style="width:708px;height:450px;" 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 class="alarm-position-right-top-box" v-if="alarmData.list[1]">
+      <div class="for-alarm-box" v-for="(item,index) in alarmData.list" :key="index">
+        <p>{{item.alarmData.buildName}} {{item.alarmData.floorName}} {{item.alarmData.roomNum?item.alarmData.subName+'('+item.alarmData.roomNum+')':item.alarmData.subName}} {{item.alarmData.eventName}}</p>
+        <p>负责人：{{item.alarmData.adminPhone?item.alarmData.adminName+'('+item.alarmData.adminPhone+')':item.alarmData.adminName}}</p>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue'
+  export default {
+    name: 'alarmComponent',
+    components: {
+      H5PlayerVideo
+    },
+    props: {
+      alarmData: {}
+    },
+    data () {
+      return {
+
+      }
+    },
+    created(){
+
+    },
+    mounted(){
+      console.log('alarmData',this.alarmData.videoList[0]);
+      this.openAlarm();
+    },
+    methods:{
+      openAlarm(){
+        let self = this;
+        setTimeout(() => {
+          /* 报警音频播放 */
+          var audio = self.$refs.audioPlayer;
+          // 尝试静音自动播放
+          audio.play().catch(() => {
+            // 如果失败，延迟 2 秒再次尝试（趁浏览器未完全冻结）
+            setTimeout(() => audio.play(), 1000);
+          });
+          // 延迟 3 秒后尝试取消静音（需浏览器允许）
+          setTimeout(() => {
+            audio.muted = false;
+          }, 1500);
+        }, 500);
+      },
+    },
+  }
+</script>
+<style scoped lang="scss">
+  .alarmComponent{
+    z-index:100000000;
+    position: absolute;
+    width:100%;
+    height:100%;
+    background-color: rgba(0, 0, 0, 0.9);
+    box-shadow: inset 0 6px 32px 0 #BD0000;
+    .alarm-max-big-box{
+      position: absolute;
+      display: block;
+      width:1371px;
+      height:753px;
+      /*margin:454px 0 0 850px;*/
+      /*分辨率调整*/
+      margin:700px 0 0 1234px;
+      z-index:10;
+      background-image: url("../../../assets/ZDimages/img_bj_bg@1x.png");
+      background-size: 100% 100%;
+      .title-top-box{
+        width:770px;
+        height:80px;
+        margin:65px 300px 0;
+        background-color:rgba(232,1,1,0.4);
+        overflow: hidden;
+        img{
+          margin:-33px 90px 0;
+          width:588px;
+          height:146px;
+        }
+      }
+      .blink {
+        animation: blink 0.8s ease-in-out infinite;
+      }
+      @keyframes blink {
+        0%, 100% { opacity: 0; } /* 最低可见度 */
+        50% { opacity: 1; }        /* 最高可见度 */
+      }
+      .alarm-big-box{
+        display: flex;
+        width:1182px;
+        height:450px;
+        margin:38px 0 0 94px;
+        .alarm-left-box{
+          width:455px;
+          height:450px;
+          margin-right:20px;
+          .alarm-text-box{
+            overflow: hidden;
+            .text-box{
+              margin:5px 0 11px 0;
+              height:32px;
+              display: flex;
+              .colorType{
+                width:65px;
+                height:32px;
+                border-radius:50px;
+                margin-right:10px;
+                p{
+                  margin:3px;
+                  width:57px;
+                  height:25px;
+                  text-align: center;
+                  line-height: 25px;
+                  color: #fff;
+                  border-radius: 50px;
+                  border: 1px solid #fff;
+                  font-size: 20px;
+                }
+              }
+              .idle-color {
+                background-color: #00AC45;
+              }
+              .use-color {
+                background-color: #00FFF6;
+              }
+              .maintenance-color {
+                background-color: #FFA148;
+              }
+              .roomName{
+                height:32px;
+                line-height: 32px;
+                font-family: Source Han Sans CN;
+                font-weight: 700;
+                font-size: 28px;
+                color: #FFFFFF;
+                text-align: left;
+                font-style: normal;
+                text-transform: none;
+              }
+            }
+            .img-box{
+              height:46px;
+              display: flex;
+              img{
+                display: block;
+                width:22px;
+                height:22px;
+                margin:12px 10px 0 0;
+              }
+              p{
+                height:46px;
+                line-height:46px;
+                color:#fff;
+                width: 400px;
+                font-family: Source Han Sans CN;
+                font-weight: 400;
+                font-size: 22px;
+                overflow: hidden;
+              }
+            }
+          }
+          .alarm-sensor-box{
+            margin-top:14px;
+            display: flex;
+            .for-sensor-box:nth-child(2){
+              margin:0 11px;
+            }
+            .for-sensor-box{
+              width:140px;
+              height:172px;
+              border-radius: 10px 10px 10px 10px;
+              border: 2px solid #FF0000;
+              .sensor-img-box{
+                width:118px;
+                height:105px;
+                margin:0 11px;
+                background-image: url("../../../assets/ZDimages/icon_cgq_yc@1x.png");
+                .svg-img{
+                  width:32px;
+                  height:32px;
+                  margin:43px 0 0 43px;
+                  color: #FF2105;
+                }
+              }
+              .sensor-text-p {
+                height: 22px;
+                line-height: 22px;
+                text-align: center;
+                .span-1 {
+                  font-size: 28px;
+                  color: #FF2105;
+                }
+                .span-2 {
+                  font-size: 28px;
+                  color: #FF2105;
+                }
+                .span-3 {
+                  font-size: 24px;
+                  color: #FF2105;
+                }
+              }
+              .sensor-name-p {
+                height: 46px;
+                line-height: 46px;
+                text-align: center;
+                color: #FF2105;
+                font-size: 20px;
+              }
+            }
+          }
+        }
+        .alarm-right-box{
+          width:708px;
+          height:450px;
+          overflow: hidden;
+          border-radius:4px;
+          .alarm-video-max-big-box{
+
+          }
+        }
+      }
+      .waring_mp3{
+        z-index: -1000;
+        width:1px;
+        height:1px;
+        overflow: hidden;
+      }
+    }
+    .alarm-position-right-top-box{
+      position: absolute;
+      top:40px;
+      right:40px;
+      overflow: hidden;
+      .for-alarm-box{
+        background-color: rgba(232, 1, 1, 0.4);
+        padding:20px;
+        margin-bottom:30px;
+        p{
+          line-height:30px;
+          width:700px;
+          font-size:22px;
+          color:#FF2105;
+        }
+      }
+    }
+  }
+</style>

src/views/home.vue

@@ -19,9 +19,18 @@
       </div>
     </div>
     <baseComponent></baseComponent>
+    <alarmComponent v-if="alarmType" :alarmData="alarmData"></alarmComponent>
   </div>
 </template>
 <script>
+  import mqtt from 'mqtt'
+  import {
+    laboratoryBigViewSelectTriggerInfo,
+    iotSensorFindBySubId,
+    iotCameraFindByCondition
+  } from "@/api/index";
+  import { dashboardsResearchUsage } from "@/api/yiLi";
+  import { getFloorMaps } from '@/utils/mapList'
   //head组件
   import headComponent from './components/headComponent.vue'
   import baseComponent from './components/baseComponent.vue'
@@ -32,6 +41,8 @@
   import centerBottomLeft from './components/center-bottom-left.vue'
   import centerBottomRight from './components/center-bottom-right.vue'
   import right from './components/right.vue'
+  //报警弹窗
+  import alarmComponent from './components/subcomponent/alarmComponent.vue'
 
   export default {
     name: 'home',
@@ -44,27 +55,170 @@
       centerCenter,
       centerBottomLeft,
       centerBottomRight,
-      right
+      right,
+      alarmComponent
     },
     data () {
       return {
-
+        //预案MQTT
+        planOpic:'lab/risk/plan/change',
+        planClient:{},
+        roomList:[],
+        alarmType:false,
+        alarmData:null,
+        //预案查询定时器
+        alarmTimer:null,
+        //预案查询定时
+        alarmSwitchTime:60000,
       }
     },
     created(){
 
     },
     mounted(){
-
+      this.offPlanMQTT('on');
+      this.laboratoryBigViewSelectTriggerInfo();
+      //开启预案定时查询
+      this.alarmTimerFunction();
     },
     methods:{
-
+      /*************** 获取报警相关 ***************/
+      laboratoryBigViewSelectTriggerInfo(){
+        laboratoryBigViewSelectTriggerInfo().then(res => {
+          let alarmRoom = getFloorMaps(res.data);
+          if(alarmRoom[0]){
+            this.dashboardsResearchUsage(alarmRoom);
+          }else{
+            this.$set(this,'alarmType',false);
+            this.$set(this,'alarmData',null);
+          }
+        })
+      },
+      //获取房间数据
+      dashboardsResearchUsage(list){
+        dashboardsResearchUsage('roomNames='+list[0].roomNumName).then(res => {
+          let obj = list[0];
+          obj.list = JSON.parse(JSON.stringify(list));
+          if(res.data[0]){
+            obj = {...obj,...res.data[0]};
+            obj.status = obj.runningStateName == '维修' ? '3':(obj.stateName == '租用'?'2':'1')
+            //假数据
+            // obj.monitorVisable = true;
+            // obj.subId = '1955554621449019392';
+            this.iotSensorFindBySubId(obj);
+          }
+        });
+      },
+      //查询传感器
+      iotSensorFindBySubId(obj){
+        let self = this;
+        iotSensorFindBySubId({subId:obj.subId}).then(response => {
+          obj.sensor = [];
+          for(let i=0;i<obj.alarmData.triggerUploadData.length;i++){
+            for(let o=0;o<response.data.length;o++){
+              if(obj.alarmData.triggerUploadData[i].deviceNo == response.data[o].deviceNo){
+                response.data[i].icon = response.data[i].icon?localStorage.getItem('fileBrowseEnvironment')+response.data[i].icon:null;
+                // response.data[i].icon = 'http://192.168.1.8/statics/2025/08/25/9eec5108-2702-4ed0-942a-aced71fd1f57.svg';
+                obj.sensor.push(response.data[i])
+              }
+            }
+          }
+          obj.videoList = [];
+          //查询实验室监控
+          if(obj.monitorVisable){
+            let videoObj = {
+              page:'1',
+              pageSize:'10',
+              buildId:'',
+              floorId:'',
+              passageway:'',
+              subIds:[obj.subId],
+              protocol:window.location.href.indexOf('https') !== -1?'wss':'ws',
+              streamType:1,
+              source:1,
+            };
+            iotCameraFindByCondition(videoObj).then(response => {
+              for(let i=0;i<response.data.records.length;i++){
+                obj.videoList.push(
+                  {
+                    fullShow:true,
+                    width: 708, //(宽度:非必传-默认600)
+                    height: 450, //(高度:非必传-默认338)
+                    url: response.data.records[i].streamUrl,
+                    cameraIndexCode: response.data.records[i].deviceNo,
+                  }
+                )
+              }
+              self.$set(self,'alarmType',true);
+              self.$set(self,'alarmData',obj);
+            });
+          }else{
+            self.$set(self,'alarmType',true);
+            self.$set(self,'alarmData',obj);
+          }
+        });
+      },
+      //预案查询定时器
+      alarmTimerFunction(){
+        const self = this;
+        self.alarmTimer = window.setInterval(() => {
+          checkAlarmUpdates();
+        }, this.alarmSwitchTime);
+        async function checkAlarmUpdates() {
+          self.laboratoryBigViewSelectTriggerInfo();
+        }
+      },
+      //预案-MQTT连接
+      offPlanMQTT(type){
+        let self = this;
+        if(self.planClient.unsubscribe){
+          self.planClient.unsubscribe(self.planOpic, error => {
+            if (error) {
+              // console.log('mqtt关闭连接错误:', error)
+            }
+          })
+          self.planClient.end();
+          this.$set(this,'planClient',{});
+        }
+        //判断传入参数如果存在 发起一次新的连接
+        if(type){
+          this.planMQTT();
+        }
+      },
+      //预案-MQTT订阅
+      planMQTT(){
+        let self = this;
+        this.planClient = mqtt.connect(localStorage.getItem('mqttUrl'), {
+          username: localStorage.getItem('mqttUser'),
+          password:localStorage.getItem('mqttPassword')
+        });
+        this.planClient.on("connect", e =>{
+          this.planClient.subscribe(self.planOpic, (err) => {
+            if (!err) {
+              console.log("预案-订阅成功:" + self.planOpic);
+            }else{
+              // console.log("预案-连接错误:" + err);
+            }
+          });
+        });
+        this.planClient.on("message", (topic, message) => {
+          if (message){
+            console.log('MQTTmessage',message);
+            //获取预案数据
+            this.laboratoryBigViewSelectTriggerInfo();
+          }
+        });
+      },
     },
     beforeDestroy() {
-
+      clearInterval(this.alarmTimer);
+      //清除MQTT
+      this.offPlanMQTT();
     },
     destroyed() {
-
+      clearInterval(this.alarmTimer);
+      //清除MQTT
+      this.offPlanMQTT();
     }
   }
 </script>