停车总车位接口、摄像头nodes接口

src/components/SD-school/Spring-frame/ba.vue

@@ -0,0 +1,626 @@
+<template>
+    <div>
+        <el-row class="ba commonWidth" v-if="state"><!--ba设备信息弹框-->
+            <el-col class="top">
+                <el-col class="title">
+                    <img src="../../../assets/image/arrow.png" alt="" />
+                    <span>设备信息</span>
+                    <img src="../../../assets/image/icon1.png" alt="" class="equipment-icon"/>
+                </el-col>
+                <p class="close" @click="close"></p>
+            </el-col>
+            <el-col class="contain scroll">
+                <el-col class="title">
+                    <span class="type">设备名称：</span>
+                    <span class="data">{{Message.baMessage1.deviceName ? Message.baMessage1.deviceName : "--"}}</span>
+                    
+                </el-col>
+                <el-col class="title">
+                    <span class="type">设备类型：</span>
+                    <span class="data" v-if="Message.baMessage2">{{Message.baMessage1.deviceType ? Message.baMessage1.deviceType : "--"}}</span>
+                    <span class="data" v-else>--</span>
+                </el-col>
+                <el-col class="title">
+                    <span class="type">设备编号：</span>
+                    <span class="data" >{{Message.baMessage1.registerDeviceId ? Message.baMessage1.registerDeviceId : "--"}}</span>
+                    
+                </el-col>
+                <el-col class="title">
+                    <span class="type">楼层：</span>
+                    <span class="data" >{{Message.baMessage1.floorUuid ? Message.baMessage1.floorUuid : "--"}}</span>
+                    
+                </el-col>
+                <el-col class="title">
+                    <span class="type">绑定时间：</span>
+                    <span class="data" >{{Message.baMessage1.createTime ? Message.baMessage1.createTime : "--"}}</span>
+                    
+                </el-col>
+
+                <el-col class="title">
+                    <span class="type">冷阀反馈：</span>
+                    <span class="data" v-if="Message.baMessage2.length>1">{{Message.baMessage2.find(val=>val.m === '01LFFK') && (Message.baMessage2.find(val=>val.m === '01LFFK').v == "0"  ? "关闭" : Message.baMessage2.find(val=>val.m === '01LFFK').v == "1"  ? "开启" : '--')}}</span>
+                    <span class="data" v-else>--</span>
+                </el-col>
+                <el-col class="title">
+                    <span class="type">热阀反馈：</span>
+                    <span class="data" v-if="Message.baMessage2.length>1">{{Message.baMessage2.find(val=>val.m === '02RFFK') && (Message.baMessage2.find(val=>val.m === '02RFFK').v == "0"  ? "关闭" : Message.baMessage2.find(val=>val.m === '02RFFK').v == "1"  ? "开启" : '--')}}</span>
+                    <span class="data" v-else>--</span>
+                </el-col>
+                <el-col class="title">
+                    <span class="type">室内温度：</span>
+                    <span class="data" v-if="Message.baMessage2.length>1">{{Message.baMessage2.find(val=>val.m === '03SNWD') && (Message.baMessage2.find(val=>val.m === '03SNWD').v  ? Number(Message.baMessage2.find(val=>val.m === '03SNWD').v).toFixed(1) + "℃" : "--")}}</span>
+                    <span class="data" v-else>--</span>
+                </el-col>
+                <el-col class="title">
+                    <span class="type">风机速度：</span>
+                    <span class="data" v-if="Message.baMessage2.length>1"> {{Message.baMessage2.find(val=>val.m === '04FJSD') && (Message.baMessage2.find(val=>val.m === '04FJSD').v  ? Message.baMessage2.find(val=>val.m === '04FJSD').v + "%" : "--")}}</span>
+                    <span class="data" v-else>--</span>
+                </el-col>
+                <el-col class="title">
+                    <span class="type">风机启停：</span>
+                    <span class="data" v-if="Message.baMessage2.length>1">{{Message.baMessage2.find(val=>val.m === '05FJQT') && (Message.baMessage2.find(val=>val.m === '05FJQT').v == "0" ? "停止" : Message.baMessage2.find(val=>val.m === '05FJQT').v == "0" ? "启动" : '--')}}</span>
+                    <span class="data" v-else>--</span>
+                </el-col>
+                <el-col class="title">
+                    <span class="type">温度设定：</span>
+                    <span class="data" v-if="Message.baMessage2.length>1">
+                        {{Message.baMessage2.find(val=>val.m === '06WDSD') 
+                        && (Message.baMessage2.find(val=>val.m === '06WDSD').v  ? Number(Message.baMessage2.find(val=>val.m === '06WDSD').v).toFixed(1) + "℃（调整精度0.5℃）" : "--")}}
+                    </span>
+                    <span class="data" v-else>--</span>
+                </el-col>
+                <el-col class="title"><span class="type">模式选择：</span>
+                    <span class="data" v-if="Message.baMessage2.length>1">
+                        {{Message.baMessage2.find(val=>val.m === '07MSXZ') 
+                        && 
+                        Message.baMessage2.find(val=>val.m === '07MSXZ').v == "0" ? 
+                        "制冷" : Message.baMessage2.find(val=>val.m === '07MSXZ').v == "1" ? 
+                        "制热" : Message.baMessage2.find(val=>val.m === '07MSXZ').v == "2" ? 
+                        "除湿" : Message.baMessage2.find(val=>val.m === '07MSXZ').v == "3" ? 
+                        "通风" : "--" }}</span>
+                    <span class="data" v-else>--</span>
+                    </el-col>
+                <el-col class="title">
+                    <span class="type">风机模式：</span>
+                    <span class="data" v-if="Message.baMessage2.length>1">{{Message.baMessage2.find(val=>val.m === '08FJMS') && (Message.baMessage2.find(val=>val.m === '08FJMS').v == "0"  ? "自动" : Message.baMessage2.find(val=>val.m === '08FJMS').v == "1"  ? "手动" : '--')}}</span>
+                    <span class="data" v-else>--</span>
+                </el-col>
+                <el-col class="title">
+                    <span class="type">风速设定：</span>
+                    <span class="data" v-if="Message.baMessage2.length>1">{{Message.baMessage2.find(val=>val.m === '09FSSD') && (Message.baMessage2.find(val=>val.m === '09FSSD').v  ? Number(Message.baMessage2.find(val=>val.m === '09FSSD').v).toFixed(0) + "%" : "--")}}</span>
+                    <span class="data" v-else>--</span>
+                </el-col>
+            </el-col>
+        </el-row>
+  </div>
+</template>
+<script>
+import { ba } from "@/plugins/api"
+export default {
+    props:['resInfo'],
+    data() {
+        return {
+            state:false,
+            Message:{
+                "baMessage1":{},
+                "baMessage2":{},
+            },
+        }
+    },
+    mounted(){
+        this.getData()
+    },
+    methods: {
+        getData(){//获取数据赋值
+            this.Message.baMessage1 = this.resInfo.baMessage
+            ba({"deviceCode":this.Message.baMessage1.registerDeviceId}).then(res =>{ 
+                console.log("ba设备")
+                this.state = true
+                console.log(res.data)
+                if(res.data){
+                    let data = JSON.parse(res.data.devDetails)
+                    this.Message.baMessage2 = data
+                }
+                
+                console.log(this.Message.baMessage2)
+            })  
+        },
+        close(){//关闭
+            this.state = false
+            this.$emit("close",false)
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+/deep/ .el-table .success-row {
+    background: rgba(22, 55, 163, 0.5) !important;//这里可以修改颜色
+}
+.Spring-frame {
+    position: absolute;
+	width:50%;
+	top:20%;
+	left:25%;
+	margin:0 auto;
+    .warning{
+        width:389px;
+        height:126px;
+        margin:0 auto;
+        background: url('../../../assets/image/warning-bg.png') ;
+        background-size: 389px 126px;
+        .contain{
+            width:58%;
+            margin:6% 0 0 35%;
+            line-height: 22px;
+            color:#fff;
+            font-size: 12px;
+            .title{
+                font-size: 12px;
+            }
+            .content{
+                margin-top:0px;
+            }
+        }
+		// .close{
+		//     width:16px;
+		//     height:16px;
+		//     background: url('../../../assets/image/close2.png') no-repeat;
+		//     position: absolute;
+		// 	top:8px;right:6px;
+		// }
+    }
+    .commonWidth{
+        width:450px;
+        display: block;
+        margin:0 auto; 
+        .top{
+            height: 39px;
+            line-height: 35px;
+            background: rgba(28,82,216,.5);
+            border: 1px solid #1C52D8;
+            border-bottom:none;
+            border-radius: 4px 4px  0 0;
+            .title{
+                width:50%;
+                font-size: 16px;
+                margin-left:16px;
+                vertical-align: middle;
+                color:#38E7EE;
+                vertical-align: middle;
+                img{
+                    margin-right:4px;
+                    vertical-align: middle;
+                }
+                span{
+                    margin-left:16px;
+                    vertical-align: middle;
+                }
+                .equipment-icon{
+                    width:16px;
+                    position: absolute;
+                    top:16px;
+                    right:45%;
+                }
+            }
+            .close{
+                width:16px;
+                height:16px;
+                background: url('../../../assets/image/close.png') ;
+                float:right;
+                margin:12px 6px 0 0;
+            }
+        } 
+        .contain{
+            background-color:rgba(0,22,103,.85);
+            border-radius: 0 0 4px 4px;
+        }
+    }
+    .meeting,.music{
+        height:300px;
+        .contain{
+            height:300px;
+            overflow: hidden;
+            .section{
+                padding:10px;
+                font-size: 14px;
+                font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
+                font-weight: bold;
+                text-align: left;
+                color: #ffffff;
+                line-height: 30px;
+                
+            }
+            .title{
+                margin-bottom:4px;
+            }
+            .section2 .title{
+                width:auto;
+                display: inline-block;
+                margin-right:10px;
+                vertical-align: middle;
+                // margin-bottom:2px;
+            }
+        }
+        
+        /deep/ .el-table tr, /deep/ .el-table th, /deep/ .el-table td{
+            background-color: transparent;//这是设置透明背景色
+            font-size: 10px;
+            padding:0;
+        }
+    }
+    .meeting .title{
+        font-size: 12px;
+    }
+    .equipment,.ba{
+        .contain{
+            padding: 10px 10px 25px;
+            overflow: hidden;
+            .title{
+                margin-top:10px;
+                font-size: 14px;
+                letter-spacing: 1px;
+                .type{
+                    width:25%;
+                    text-align: right;
+                    display: inline-block;
+                }
+                .data{
+                    width:75%;
+                    text-align: left;
+                    display: inline-block;
+                    vertical-align: top;
+                }
+            }
+            
+        }
+    }
+    .ba {
+       .contain{
+           height:300px;
+           overflow-y:scroll;
+       } 
+    }
+    .video{
+        .contain{
+            overflow: hidden;
+            .videoPaly{
+                width:100%;
+            }
+            .videoNo{
+                margin: 10% auto;
+                img{
+                    height:97px;
+                    width:102px;
+                    display: block;
+                    margin: 0 auto;
+                }
+                p{
+                    text-align: center;
+                    font-size: 12px;
+                    color:#fff;
+                    margin-top:3%;
+                }
+                
+            }
+        }
+        
+    }
+    .xinfa{
+        width:290px !important;
+        .top{
+           
+            .title{
+                width:80% !important;
+            }
+        }
+        .contain{
+            height:140px;
+            padding:35px 10px;
+            overflow: hidden;
+            .module1{
+                .title{
+                    font-size: 14px;
+                    color:#fff;
+                    text-align: left;
+                    display: inline-block;
+                    vertical-align: middle;
+                }
+                .wrap{
+                    vertical-align: middle;
+                    display: inline-block;
+                    .span1{
+                        width:12px;
+                        height:12px;
+                        border-radius: 50%;
+                        background-color: red;
+                        display: inline-block;
+                        vertical-align: middle;
+                    }
+                    .span2{
+                        font-size: 14px;
+                        margin-left:5px;
+                        display: inline-block;
+                        vertical-align: middle;
+                    }
+                }
+
+            }
+            .module2{
+                margin-top:30px;
+                .title{
+                    font-size: 14px;
+                    color:#fff;
+                    text-align: left;
+                    display: inline-block;
+                    vertical-align: middle;
+                }
+                .wrap{
+                    .open,.off{
+                        width:60px;
+                        height:26px;
+                    }
+                    .off{
+                        margin-left:25px;
+                    }
+                    vertical-align: middle;
+                    display: inline-block;
+                    
+                }
+
+            }
+            .videoNo{
+                margin: 10% auto;
+                img{
+                    height:97px;
+                    width:102px;
+                    display: block;
+                    margin: 0 auto;
+                }
+                p{
+                    text-align: center;
+                    font-size: 12px;
+                    color:#fff;
+                    margin-top:3%;
+                }
+                
+            }
+        }
+    }
+    
+    .entranceGuard{
+        width:85%;
+        .contain{
+            height:350px;
+            padding:15px 10px;
+            overflow: hidden;
+            .day{
+                font-size: 14px;
+                color:#fff;
+                text-align: left;
+                margin-left:4px;
+            }
+            .wrap{
+                width:100%;
+                .section{
+                    width:45.5%;
+                    display: inline-block;
+                    background: url(../../../assets/image/entranceGuard.png) no-repeat;
+                    background-size: 100% 100%;
+                    align-items: center;
+                    justify-content: center;
+                    padding:20px 0;
+                    margin-top:6px;
+                    vertical-align: middle;
+                    .text{
+                        font-size: 16px;
+                        color:#fff;
+                        margin-left:40px;
+                        vertical-align: middle;
+
+                    }
+                    .num{
+                        font-size: 25px;
+                        margin-left:100px;
+                        vertical-align: middle;
+                    }
+                }
+                .section:nth-child(2){
+                    margin-left:9%;
+                }
+            }
+            .tableTitle{
+                width:96.2% !important;
+                margin:0 auto;
+                font-size: 16px;
+                padding:6px 0;
+                background-color: #1637A3;
+                padding-left:8px;
+                margin-top:14px;
+            }
+            .table2{
+                width:98% !important;
+                margin:0 auto;
+                margin-top:10px;
+                thead{
+                    tr{
+                        font-size: 30px !important;
+                    }
+                }
+                th{
+                    height:30px;
+                   
+                    border-bottom: none;
+                    
+                }
+                /deep/ tr{
+                    //background-color: transparent;//这是设置透明背景色
+                    padding:6px 0;
+                    border:none
+                }
+                /deep/ .cell{
+                    font-size: 14px;
+                }
+                /deep/ td{
+                    padding:4px 0;
+                }
+            }
+            /deep/ .el-table tr, /deep/ .el-table th, /deep/ .el-table td{
+                background-color: transparent;//这是设置透明背景色
+                
+            }
+        }
+    }
+}
+/deep/ .el-table__row>td {
+  border: none;
+}
+
+/deep/ .el-table::before {
+  height: 0px;
+}
+.scroll{
+    overflow-y: scroll;
+    overflow-x: hidden;
+}
+// ::-webkit-scrollbar {
+//   /*滚动条整体样式*/
+//   width : 0px;  /*高宽分别对应横竖滚动条的尺寸*/
+//   height: 1px;
+//   overflow: hidden;
+// }
+// ::-webkit-scrollbar-thumb {
+//   /*滚动条里面小方块*/
+//   border-radius: 1px;
+//   box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+//   background   : rgba(28,82,216,1);
+// }
+// ::-webkit-scrollbar-track {
+//   /*滚动条里面轨道*/
+//   box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+//   border-radius: 1px;
+//   background   : #ededed;
+// }
+
+// 对话框
+/deep/ .el-dialog{
+    background-color: transparent;
+    top:15%;
+}
+/deep/ .el-dialog__header{
+    padding:0;
+    padding-bottom:0;
+}
+/deep/ .el-dialog__body{
+    padding:0;
+}
+/deep/ .el-dialog__headerbtn .el-dialog__close{
+    display: none;
+}
+
+
+// table
+/deep/ .el-table--group, /deep/ .el-table--border{
+    border:none;
+}
+/deep/ .el-table thead{
+    color:#fff;
+    // background-color: rgba(28,82,216,.2);
+}
+
+/deep/ .el-table--border th{
+    border:1px solid #fff;
+    border-bottom:none;
+}
+
+/deep/ .el-table--border td{
+    border:1px solid #fff
+}
+ /deep/  .el-table, .el-table__expanded-cell {
+    background-color: transparent;//这是设置透明背景色
+    color:#fff;
+    border-collapse: collapse;
+    
+  }
+
+/deep/ .el-table__empty-text{
+    color:#fff;
+    font-size: 10px;
+    letter-spacing: 2px;
+}
+
+
+// data
+/deep/ .el-date-editor{
+    border:1px solid #ccc;
+    background-color: transparent;
+    height:25px;
+    line-height: 20px;
+    padding:0;
+    margin-top:2px;
+    box-sizing: border-box;
+}
+/deep/ .el-range-input, /deep/ .el-input__icon el-range__close-icon{
+    background-color: transparent;
+    color:#fff;
+    font-size: 12px;
+    text-align: top;
+    padding:0;
+    position: relative;
+    top:-4px
+}
+/deep/ .el-range__icon{
+    display: none;
+}
+/deep/ .el-date-editor--datetimerange.el-input__inner{
+    width:77%;
+    
+    display: inline-block;
+    
+}
+/deep/ ::placeholder{
+    color:#fff
+}
+/deep/ .el-range-separator{
+    color:#fff;
+    position: relative;
+    top:-4px
+}
+/deep/table,/deep/ tr,/deep/ td{
+    border-collapse: collapse !important;
+}
+/deep/ tr:hover, /deep/ td:hover, /deep/ table:hover{
+    background-color: none !important;
+}
+/deep/ .el-table__empty-block{
+    border:1px solid #fff;
+}
+/deep/ .el-table tbody tr:hover>td { 
+    background-color:transparent
+}
+
+::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width : 0px;  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 0px;
+  }
+::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 0px;
+  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background   : #535353;
+  }
+ ::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 0px;
+  background   : #ededed;
+  }
+
+::-webkit-scrollbar {
+	    display: none
+	  }
+      /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+  display: none;
+}
+</style>

src/components/SD-school/Spring-frame/entranceGuard.vue

@@ -0,0 +1,579 @@
+<template>
+    <div>
+        <el-row class="entranceGuard commonWidth" v-if="entranceGuard.state"><!--门禁设备信息弹框-->
+            <el-col class="top">
+                <el-col class="title">
+                    <img src="../../../assets/image/arrow.png" alt="" />
+                    <span>{{entranceGuard.entranceGuardMessage.name}}</span>
+                </el-col>
+                <p class="close" @click="close"></p>
+            </el-col>
+            <el-col class="contain">
+                <el-col class="day">今日累计：</el-col>
+                <div class="wrap">
+                    <div class="section">
+                        <span class="text">进</span>
+                        <span class="num" style="color:#FDC51A">{{entranceGuard.entranceGuardMessage.into || 0}}</span>
+                    </div>
+                    <div class="section">
+                        <span class="text">出</span>
+                        <span class="num" style="color:#1AF3FD">{{entranceGuard.entranceGuardMessage.out || 0}}</span>
+                    </div>
+                </div>
+                <!-- <p class="tableTitle">最新记录</p> -->
+                <el-table 
+                height="200"
+                :header-cell-style="{background:'rgba(22, 55, 163, 0.5)',color:'#fff',border:'none'}"
+                :row-class-name="tableRowClassName"
+                :data="entranceGuard.entranceGuardMessage.tableList"   style="width: 100%;height:110px" class="success-row table2 scroll" >
+                    <el-table-column prop="id" label="序号" width="80"></el-table-column>
+                    <el-table-column prop="opdt" label="刷卡时间" > </el-table-column>
+                    <el-table-column prop="outid" label="学工号" width="80"> </el-table-column>
+                    <el-table-column prop="name" label="姓名" width="80"> </el-table-column>
+                    <el-table-column prop="rectype" label="记录类型" width="120"> </el-table-column>
+                    <el-table-column prop="ioflag" label="进出状态" width="80"> </el-table-column>
+                    <el-table-column prop="termname" label="终端编号" > </el-table-column>
+                    <!-- <el-table-column prop="cardsnr" label="卡序列号" > </el-table-column> -->
+                    
+                </el-table>
+            </el-col>
+        </el-row>
+  </div>
+</template>
+<script>
+import axios from 'axios'
+export default {
+    props:['resInfo'],
+    data() {
+        return {
+            state:false,
+            Message:{
+                "tableList":[
+                    {"id":"1","outid":"11111", "name":"张三","termname":"154sdt", "cardsnr":"154sdtsadawee", "opdt":"2021-12-20 00:00:00", "rectype":"正常超时","ioflag":"进"},
+                    {"id":"1","outid":"11111", "name":"张三","termname":"154sdt", "cardsnr":"154sdtsadawee", "opdt":"2021-12-20 00:00:00", "rectype":"正常超时","ioflag":"进"},
+                    {"id":"1","outid":"11111", "name":"张三","termname":"154sdt", "cardsnr":"154sdtsadawee", "opdt":"2021-12-20 00:00:00", "rectype":"正常超时","ioflag":"进"},
+                    {"id":"1","outid":"11111", "name":"张三","termname":"154sdt", "cardsnr":"154sdtsadawee", "opdt":"2021-12-20 00:00:00", "rectype":"正常超时","ioflag":"进"},
+                    {"id":"1","outid":"11111", "name":"张三","termname":"154sdt", "cardsnr":"154sdtsadawee", "opdt":"2021-12-20 00:00:00", "rectype":"正常超时","ioflag":"进"},
+                    {"id":"1","outid":"11111", "name":"张三","termname":"154sdt", "cardsnr":"154sdtsadawee", "opdt":"2021-12-20 00:00:00", "rectype":"正常超时","ioflag":"进"},
+                    {"id":"1","outid":"11111", "name":"张三","termname":"154sdt", "cardsnr":"154sdtsadawee", "opdt":"2021-12-20 00:00:00", "rectype":"正常超时","ioflag":"进"},
+                    {"id":"1","outid":"11111", "name":"张三","termname":"154sdt", "cardsnr":"154sdtsadawee", "opdt":"2021-12-20 00:00:00", "rectype":"正常超时","ioflag":"进"},
+                    {"id":"1","outid":"11111", "name":"张三","termname":"154sdt", "cardsnr":"154sdtsadawee", "opdt":"2021-12-20 00:00:00", "rectype":"正常超时","ioflag":"进"},
+                    {"id":"1","outid":"11111", "name":"张三","termname":"154sdt", "cardsnr":"154sdtsadawee", "opdt":"2021-12-20 00:00:00", "rectype":"正常超时","ioflag":"进"},
+                    
+                ],
+                "Into":30,
+                "out":20,
+                "name":"一层大厅1#通道"
+            },
+        }
+    },
+    mounted(){
+        this.getData()
+    },
+    methods: {
+        getData(){//获取数据赋值
+            this.Message.baMessage1 = this.resInfo.baMessage
+            // accessControlListApi({"deviceCode":this.resInfo.baMessage.registerDeviceId}).then(res =>{ 
+            //     console.log("门禁设备")
+            //     console.log(res)
+            // }) 
+        },
+        close(){//关闭
+            this.state = false
+            this.$emit("close",false)
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+/deep/ .el-table .success-row {
+    background: rgba(22, 55, 163, 0.5) !important;//这里可以修改颜色
+}
+.Spring-frame {
+    position: absolute;
+	width:50%;
+	top:20%;
+	left:25%;
+	margin:0 auto;
+    .warning{
+        width:389px;
+        height:126px;
+        margin:0 auto;
+        background: url('../../../assets/image/warning-bg.png') ;
+        background-size: 389px 126px;
+        .contain{
+            width:58%;
+            margin:6% 0 0 35%;
+            line-height: 22px;
+            color:#fff;
+            font-size: 12px;
+            .title{
+                font-size: 12px;
+            }
+            .content{
+                margin-top:0px;
+            }
+        }
+		// .close{
+		//     width:16px;
+		//     height:16px;
+		//     background: url('../../../assets/image/close2.png') no-repeat;
+		//     position: absolute;
+		// 	top:8px;right:6px;
+		// }
+    }
+    .commonWidth{
+        width:450px;
+        display: block;
+        margin:0 auto; 
+        .top{
+            height: 39px;
+            line-height: 35px;
+            background: rgba(28,82,216,.5);
+            border: 1px solid #1C52D8;
+            border-bottom:none;
+            border-radius: 4px 4px  0 0;
+            .title{
+                width:50%;
+                font-size: 16px;
+                margin-left:16px;
+                vertical-align: middle;
+                color:#38E7EE;
+                vertical-align: middle;
+                img{
+                    margin-right:4px;
+                    vertical-align: middle;
+                }
+                span{
+                    margin-left:16px;
+                    vertical-align: middle;
+                }
+                .equipment-icon{
+                    width:16px;
+                    position: absolute;
+                    top:16px;
+                    right:45%;
+                }
+            }
+            .close{
+                width:16px;
+                height:16px;
+                background: url('../../../assets/image/close.png') ;
+                float:right;
+                margin:12px 6px 0 0;
+            }
+        } 
+        .contain{
+            background-color:rgba(0,22,103,.85);
+            border-radius: 0 0 4px 4px;
+        }
+    }
+    .meeting,.music{
+        height:300px;
+        .contain{
+            height:300px;
+            overflow: hidden;
+            .section{
+                padding:10px;
+                font-size: 14px;
+                font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
+                font-weight: bold;
+                text-align: left;
+                color: #ffffff;
+                line-height: 30px;
+                
+            }
+            .title{
+                margin-bottom:4px;
+            }
+            .section2 .title{
+                width:auto;
+                display: inline-block;
+                margin-right:10px;
+                vertical-align: middle;
+                // margin-bottom:2px;
+            }
+        }
+        
+        /deep/ .el-table tr, /deep/ .el-table th, /deep/ .el-table td{
+            background-color: transparent;//这是设置透明背景色
+            font-size: 10px;
+            padding:0;
+        }
+    }
+    .meeting .title{
+        font-size: 12px;
+    }
+    .equipment,.ba{
+        .contain{
+            padding: 10px 10px 25px;
+            overflow: hidden;
+            .title{
+                margin-top:10px;
+                font-size: 14px;
+                letter-spacing: 1px;
+                .type{
+                    width:25%;
+                    text-align: right;
+                    display: inline-block;
+                }
+                .data{
+                    width:75%;
+                    text-align: left;
+                    display: inline-block;
+                    vertical-align: top;
+                }
+            }
+            
+        }
+    }
+    .ba {
+       .contain{
+           height:300px;
+           overflow-y:scroll;
+       } 
+    }
+    .video{
+        .contain{
+            overflow: hidden;
+            .videoPaly{
+                width:100%;
+            }
+            .videoNo{
+                margin: 10% auto;
+                img{
+                    height:97px;
+                    width:102px;
+                    display: block;
+                    margin: 0 auto;
+                }
+                p{
+                    text-align: center;
+                    font-size: 12px;
+                    color:#fff;
+                    margin-top:3%;
+                }
+                
+            }
+        }
+        
+    }
+    .xinfa{
+        width:290px !important;
+        .top{
+           
+            .title{
+                width:80% !important;
+            }
+        }
+        .contain{
+            height:140px;
+            padding:35px 10px;
+            overflow: hidden;
+            .module1{
+                .title{
+                    font-size: 14px;
+                    color:#fff;
+                    text-align: left;
+                    display: inline-block;
+                    vertical-align: middle;
+                }
+                .wrap{
+                    vertical-align: middle;
+                    display: inline-block;
+                    .span1{
+                        width:12px;
+                        height:12px;
+                        border-radius: 50%;
+                        background-color: red;
+                        display: inline-block;
+                        vertical-align: middle;
+                    }
+                    .span2{
+                        font-size: 14px;
+                        margin-left:5px;
+                        display: inline-block;
+                        vertical-align: middle;
+                    }
+                }
+
+            }
+            .module2{
+                margin-top:30px;
+                .title{
+                    font-size: 14px;
+                    color:#fff;
+                    text-align: left;
+                    display: inline-block;
+                    vertical-align: middle;
+                }
+                .wrap{
+                    .open,.off{
+                        width:60px;
+                        height:26px;
+                    }
+                    .off{
+                        margin-left:25px;
+                    }
+                    vertical-align: middle;
+                    display: inline-block;
+                    
+                }
+
+            }
+            .videoNo{
+                margin: 10% auto;
+                img{
+                    height:97px;
+                    width:102px;
+                    display: block;
+                    margin: 0 auto;
+                }
+                p{
+                    text-align: center;
+                    font-size: 12px;
+                    color:#fff;
+                    margin-top:3%;
+                }
+                
+            }
+        }
+    }
+    
+    .entranceGuard{
+        width:85%;
+        .contain{
+            height:350px;
+            padding:15px 10px;
+            overflow: hidden;
+            .day{
+                font-size: 14px;
+                color:#fff;
+                text-align: left;
+                margin-left:4px;
+            }
+            .wrap{
+                width:100%;
+                .section{
+                    width:45.5%;
+                    display: inline-block;
+                    background: url(../../../assets/image/entranceGuard.png) no-repeat;
+                    background-size: 100% 100%;
+                    align-items: center;
+                    justify-content: center;
+                    padding:20px 0;
+                    margin-top:6px;
+                    vertical-align: middle;
+                    .text{
+                        font-size: 16px;
+                        color:#fff;
+                        margin-left:40px;
+                        vertical-align: middle;
+
+                    }
+                    .num{
+                        font-size: 25px;
+                        margin-left:100px;
+                        vertical-align: middle;
+                    }
+                }
+                .section:nth-child(2){
+                    margin-left:9%;
+                }
+            }
+            .tableTitle{
+                width:96.2% !important;
+                margin:0 auto;
+                font-size: 16px;
+                padding:6px 0;
+                background-color: #1637A3;
+                padding-left:8px;
+                margin-top:14px;
+            }
+            .table2{
+                width:98% !important;
+                margin:0 auto;
+                margin-top:10px;
+                thead{
+                    tr{
+                        font-size: 30px !important;
+                    }
+                }
+                th{
+                    height:30px;
+                   
+                    border-bottom: none;
+                    
+                }
+                /deep/ tr{
+                    //background-color: transparent;//这是设置透明背景色
+                    padding:6px 0;
+                    border:none
+                }
+                /deep/ .cell{
+                    font-size: 14px;
+                }
+                /deep/ td{
+                    padding:4px 0;
+                }
+            }
+            /deep/ .el-table tr, /deep/ .el-table th, /deep/ .el-table td{
+                background-color: transparent;//这是设置透明背景色
+                
+            }
+        }
+    }
+}
+/deep/ .el-table__row>td {
+  border: none;
+}
+
+/deep/ .el-table::before {
+  height: 0px;
+}
+.scroll{
+    overflow-y: scroll;
+    overflow-x: hidden;
+}
+// ::-webkit-scrollbar {
+//   /*滚动条整体样式*/
+//   width : 0px;  /*高宽分别对应横竖滚动条的尺寸*/
+//   height: 1px;
+//   overflow: hidden;
+// }
+// ::-webkit-scrollbar-thumb {
+//   /*滚动条里面小方块*/
+//   border-radius: 1px;
+//   box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+//   background   : rgba(28,82,216,1);
+// }
+// ::-webkit-scrollbar-track {
+//   /*滚动条里面轨道*/
+//   box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+//   border-radius: 1px;
+//   background   : #ededed;
+// }
+
+// 对话框
+/deep/ .el-dialog{
+    background-color: transparent;
+    top:15%;
+}
+/deep/ .el-dialog__header{
+    padding:0;
+    padding-bottom:0;
+}
+/deep/ .el-dialog__body{
+    padding:0;
+}
+/deep/ .el-dialog__headerbtn .el-dialog__close{
+    display: none;
+}
+
+
+// table
+/deep/ .el-table--group, /deep/ .el-table--border{
+    border:none;
+}
+/deep/ .el-table thead{
+    color:#fff;
+    // background-color: rgba(28,82,216,.2);
+}
+
+/deep/ .el-table--border th{
+    border:1px solid #fff;
+    border-bottom:none;
+}
+
+/deep/ .el-table--border td{
+    border:1px solid #fff
+}
+ /deep/  .el-table, .el-table__expanded-cell {
+    background-color: transparent;//这是设置透明背景色
+    color:#fff;
+    border-collapse: collapse;
+    
+  }
+
+/deep/ .el-table__empty-text{
+    color:#fff;
+    font-size: 10px;
+    letter-spacing: 2px;
+}
+
+
+// data
+/deep/ .el-date-editor{
+    border:1px solid #ccc;
+    background-color: transparent;
+    height:25px;
+    line-height: 20px;
+    padding:0;
+    margin-top:2px;
+    box-sizing: border-box;
+}
+/deep/ .el-range-input, /deep/ .el-input__icon el-range__close-icon{
+    background-color: transparent;
+    color:#fff;
+    font-size: 12px;
+    text-align: top;
+    padding:0;
+    position: relative;
+    top:-4px
+}
+/deep/ .el-range__icon{
+    display: none;
+}
+/deep/ .el-date-editor--datetimerange.el-input__inner{
+    width:77%;
+    
+    display: inline-block;
+    
+}
+/deep/ ::placeholder{
+    color:#fff
+}
+/deep/ .el-range-separator{
+    color:#fff;
+    position: relative;
+    top:-4px
+}
+/deep/table,/deep/ tr,/deep/ td{
+    border-collapse: collapse !important;
+}
+/deep/ tr:hover, /deep/ td:hover, /deep/ table:hover{
+    background-color: none !important;
+}
+/deep/ .el-table__empty-block{
+    border:1px solid #fff;
+}
+/deep/ .el-table tbody tr:hover>td { 
+    background-color:transparent
+}
+
+::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width : 0px;  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 0px;
+  }
+::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 0px;
+  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background   : #535353;
+  }
+ ::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 0px;
+  background   : #ededed;
+  }
+
+::-webkit-scrollbar {
+	    display: none
+	  }
+      /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+  display: none;
+}
+</style>

src/components/SD-school/Spring-frame/equipment.vue

@@ -0,0 +1,543 @@
+<template>
+    <div>
+        <el-row class="equipment commonWidth" v-if="state"><!--设备信息弹框-->
+            <el-col class="top">
+                <el-col class="title">
+                    <img src="../../../assets/image/arrow.png" alt="" />
+                    <span>设备信息</span>
+                    <img src="../../../assets/image/icon1.png" alt="" class="equipment-icon"/>
+                </el-col>
+                <p class="close" @click="close"></p>
+            </el-col>
+            <el-col class="contain">
+                <el-col class="title"><span class="type">设备名称：</span><span class="data">{{Message.deviceName ? Message.deviceName : "--"}}</span></el-col>
+                <el-col class="title"><span class="type">设备类型：</span><span class="data">{{Message.deviceType ? Message.deviceType : "--"}}</span></el-col>
+                <el-col class="title"><span class="type">设备编号：</span><span class="data">{{Message.registerDeviceId ? Message.registerDeviceId : "--"}}</span></el-col>
+                <el-col class="title"><span class="type">楼层：</span><span class="data">{{Message.floorUuid ? Message.floorUuid : "--"}}</span></el-col>
+                <el-col class="title"><span class="type">绑定时间：</span><span class="data">{{Message.createTime ? Message.createTime : "--"}}</span></el-col>
+            </el-col>
+        </el-row>
+  </div>
+</template>
+<script>
+export default {
+    props:['resInfo'],
+    data() {
+        return {
+            state:false,
+            Message:{
+                "deviceName": undefined,
+                "deviceType": undefined,
+                "createTime": undefined,
+                "registerDeviceId":undefined,
+            },
+        }
+    },
+    mounted(){
+        this.getData()
+    },
+    methods: {
+        getData(){//获取数据赋值
+            console.log("设备信息弹框")
+            this.state = true
+            this.Message = this.resInfo
+        },
+        close(){//关闭
+            this.state = false
+            this.$emit("close",false)
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+/deep/ .el-table .success-row {
+    background: rgba(22, 55, 163, 0.5) !important;//这里可以修改颜色
+}
+.Spring-frame {
+    position: absolute;
+	width:50%;
+	top:20%;
+	left:25%;
+	margin:0 auto;
+    .warning{
+        width:389px;
+        height:126px;
+        margin:0 auto;
+        background: url('../../../assets/image/warning-bg.png') ;
+        background-size: 389px 126px;
+        .contain{
+            width:58%;
+            margin:6% 0 0 35%;
+            line-height: 22px;
+            color:#fff;
+            font-size: 12px;
+            .title{
+                font-size: 12px;
+            }
+            .content{
+                margin-top:0px;
+            }
+        }
+		// .close{
+		//     width:16px;
+		//     height:16px;
+		//     background: url('../../../assets/image/close2.png') no-repeat;
+		//     position: absolute;
+		// 	top:8px;right:6px;
+		// }
+    }
+    .commonWidth{
+        width:450px;
+        display: block;
+        margin:0 auto; 
+        .top{
+            height: 39px;
+            line-height: 35px;
+            background: rgba(28,82,216,.5);
+            border: 1px solid #1C52D8;
+            border-bottom:none;
+            border-radius: 4px 4px  0 0;
+            .title{
+                width:50%;
+                font-size: 16px;
+                margin-left:16px;
+                vertical-align: middle;
+                color:#38E7EE;
+                vertical-align: middle;
+                img{
+                    margin-right:4px;
+                    vertical-align: middle;
+                }
+                span{
+                    margin-left:16px;
+                    vertical-align: middle;
+                }
+                .equipment-icon{
+                    width:16px;
+                    position: absolute;
+                    top:16px;
+                    right:45%;
+                }
+            }
+            .close{
+                width:16px;
+                height:16px;
+                background: url('../../../assets/image/close.png') ;
+                float:right;
+                margin:12px 6px 0 0;
+            }
+        } 
+        .contain{
+            background-color:rgba(0,22,103,.85);
+            border-radius: 0 0 4px 4px;
+        }
+    }
+    .meeting,.music{
+        height:300px;
+        .contain{
+            height:300px;
+            overflow: hidden;
+            .section{
+                padding:10px;
+                font-size: 14px;
+                font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
+                font-weight: bold;
+                text-align: left;
+                color: #ffffff;
+                line-height: 30px;
+                
+            }
+            .title{
+                margin-bottom:4px;
+            }
+            .section2 .title{
+                width:auto;
+                display: inline-block;
+                margin-right:10px;
+                vertical-align: middle;
+                // margin-bottom:2px;
+            }
+        }
+        
+        /deep/ .el-table tr, /deep/ .el-table th, /deep/ .el-table td{
+            background-color: transparent;//这是设置透明背景色
+            font-size: 10px;
+            padding:0;
+        }
+    }
+    .meeting .title{
+        font-size: 12px;
+    }
+    .equipment,.ba{
+        .contain{
+            padding: 10px 10px 25px;
+            overflow: hidden;
+            .title{
+                margin-top:10px;
+                font-size: 14px;
+                letter-spacing: 1px;
+                .type{
+                    width:25%;
+                    text-align: right;
+                    display: inline-block;
+                }
+                .data{
+                    width:75%;
+                    text-align: left;
+                    display: inline-block;
+                    vertical-align: top;
+                }
+            }
+            
+        }
+    }
+    .ba {
+       .contain{
+           height:300px;
+           overflow-y:scroll;
+       } 
+    }
+    .video{
+        .contain{
+            overflow: hidden;
+            .videoPaly{
+                width:100%;
+            }
+            .videoNo{
+                margin: 10% auto;
+                img{
+                    height:97px;
+                    width:102px;
+                    display: block;
+                    margin: 0 auto;
+                }
+                p{
+                    text-align: center;
+                    font-size: 12px;
+                    color:#fff;
+                    margin-top:3%;
+                }
+                
+            }
+        }
+        
+    }
+    .xinfa{
+        width:290px !important;
+        .top{
+           
+            .title{
+                width:80% !important;
+            }
+        }
+        .contain{
+            height:140px;
+            padding:35px 10px;
+            overflow: hidden;
+            .module1{
+                .title{
+                    font-size: 14px;
+                    color:#fff;
+                    text-align: left;
+                    display: inline-block;
+                    vertical-align: middle;
+                }
+                .wrap{
+                    vertical-align: middle;
+                    display: inline-block;
+                    .span1{
+                        width:12px;
+                        height:12px;
+                        border-radius: 50%;
+                        background-color: red;
+                        display: inline-block;
+                        vertical-align: middle;
+                    }
+                    .span2{
+                        font-size: 14px;
+                        margin-left:5px;
+                        display: inline-block;
+                        vertical-align: middle;
+                    }
+                }
+
+            }
+            .module2{
+                margin-top:30px;
+                .title{
+                    font-size: 14px;
+                    color:#fff;
+                    text-align: left;
+                    display: inline-block;
+                    vertical-align: middle;
+                }
+                .wrap{
+                    .open,.off{
+                        width:60px;
+                        height:26px;
+                    }
+                    .off{
+                        margin-left:25px;
+                    }
+                    vertical-align: middle;
+                    display: inline-block;
+                    
+                }
+
+            }
+            .videoNo{
+                margin: 10% auto;
+                img{
+                    height:97px;
+                    width:102px;
+                    display: block;
+                    margin: 0 auto;
+                }
+                p{
+                    text-align: center;
+                    font-size: 12px;
+                    color:#fff;
+                    margin-top:3%;
+                }
+                
+            }
+        }
+    }
+    
+    .entranceGuard{
+        width:85%;
+        .contain{
+            height:350px;
+            padding:15px 10px;
+            overflow: hidden;
+            .day{
+                font-size: 14px;
+                color:#fff;
+                text-align: left;
+                margin-left:4px;
+            }
+            .wrap{
+                width:100%;
+                .section{
+                    width:45.5%;
+                    display: inline-block;
+                    background: url(../../../assets/image/entranceGuard.png) no-repeat;
+                    background-size: 100% 100%;
+                    align-items: center;
+                    justify-content: center;
+                    padding:20px 0;
+                    margin-top:6px;
+                    vertical-align: middle;
+                    .text{
+                        font-size: 16px;
+                        color:#fff;
+                        margin-left:40px;
+                        vertical-align: middle;
+
+                    }
+                    .num{
+                        font-size: 25px;
+                        margin-left:100px;
+                        vertical-align: middle;
+                    }
+                }
+                .section:nth-child(2){
+                    margin-left:9%;
+                }
+            }
+            .tableTitle{
+                width:96.2% !important;
+                margin:0 auto;
+                font-size: 16px;
+                padding:6px 0;
+                background-color: #1637A3;
+                padding-left:8px;
+                margin-top:14px;
+            }
+            .table2{
+                width:98% !important;
+                margin:0 auto;
+                margin-top:10px;
+                thead{
+                    tr{
+                        font-size: 30px !important;
+                    }
+                }
+                th{
+                    height:30px;
+                   
+                    border-bottom: none;
+                    
+                }
+                /deep/ tr{
+                    //background-color: transparent;//这是设置透明背景色
+                    padding:6px 0;
+                    border:none
+                }
+                /deep/ .cell{
+                    font-size: 14px;
+                }
+                /deep/ td{
+                    padding:4px 0;
+                }
+            }
+            /deep/ .el-table tr, /deep/ .el-table th, /deep/ .el-table td{
+                background-color: transparent;//这是设置透明背景色
+                
+            }
+        }
+    }
+}
+/deep/ .el-table__row>td {
+  border: none;
+}
+
+/deep/ .el-table::before {
+  height: 0px;
+}
+.scroll{
+    overflow-y: scroll;
+    overflow-x: hidden;
+}
+// ::-webkit-scrollbar {
+//   /*滚动条整体样式*/
+//   width : 0px;  /*高宽分别对应横竖滚动条的尺寸*/
+//   height: 1px;
+//   overflow: hidden;
+// }
+// ::-webkit-scrollbar-thumb {
+//   /*滚动条里面小方块*/
+//   border-radius: 1px;
+//   box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+//   background   : rgba(28,82,216,1);
+// }
+// ::-webkit-scrollbar-track {
+//   /*滚动条里面轨道*/
+//   box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+//   border-radius: 1px;
+//   background   : #ededed;
+// }
+
+// 对话框
+/deep/ .el-dialog{
+    background-color: transparent;
+    top:15%;
+}
+/deep/ .el-dialog__header{
+    padding:0;
+    padding-bottom:0;
+}
+/deep/ .el-dialog__body{
+    padding:0;
+}
+/deep/ .el-dialog__headerbtn .el-dialog__close{
+    display: none;
+}
+
+
+// table
+/deep/ .el-table--group, /deep/ .el-table--border{
+    border:none;
+}
+/deep/ .el-table thead{
+    color:#fff;
+    // background-color: rgba(28,82,216,.2);
+}
+
+/deep/ .el-table--border th{
+    border:1px solid #fff;
+    border-bottom:none;
+}
+
+/deep/ .el-table--border td{
+    border:1px solid #fff
+}
+ /deep/  .el-table, .el-table__expanded-cell {
+    background-color: transparent;//这是设置透明背景色
+    color:#fff;
+    border-collapse: collapse;
+    
+  }
+
+/deep/ .el-table__empty-text{
+    color:#fff;
+    font-size: 10px;
+    letter-spacing: 2px;
+}
+
+
+// data
+/deep/ .el-date-editor{
+    border:1px solid #ccc;
+    background-color: transparent;
+    height:25px;
+    line-height: 20px;
+    padding:0;
+    margin-top:2px;
+    box-sizing: border-box;
+}
+/deep/ .el-range-input, /deep/ .el-input__icon el-range__close-icon{
+    background-color: transparent;
+    color:#fff;
+    font-size: 12px;
+    text-align: top;
+    padding:0;
+    position: relative;
+    top:-4px
+}
+/deep/ .el-range__icon{
+    display: none;
+}
+/deep/ .el-date-editor--datetimerange.el-input__inner{
+    width:77%;
+    
+    display: inline-block;
+    
+}
+/deep/ ::placeholder{
+    color:#fff
+}
+/deep/ .el-range-separator{
+    color:#fff;
+    position: relative;
+    top:-4px
+}
+/deep/table,/deep/ tr,/deep/ td{
+    border-collapse: collapse !important;
+}
+/deep/ tr:hover, /deep/ td:hover, /deep/ table:hover{
+    background-color: none !important;
+}
+/deep/ .el-table__empty-block{
+    border:1px solid #fff;
+}
+/deep/ .el-table tbody tr:hover>td { 
+    background-color:transparent
+}
+
+::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width : 0px;  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 0px;
+  }
+::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 0px;
+  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background   : #535353;
+  }
+ ::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 0px;
+  background   : #ededed;
+  }
+
+::-webkit-scrollbar {
+	    display: none
+	  }
+      /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+  display: none;
+}
+</style>

src/components/SD-school/Spring-frame/index copy.vue

@@ -0,0 +1,1268 @@
+<template>
+    <div class="Spring-frame">
+        <!-- <el-dialog :visible.sync="centerDialogVisible"> -->
+            <el-row class="warning alert" v-if="warning.state"><!--告警推送弹框-->
+                <el-col class="contain">
+                    <el-col class="title">{{warning.warningMessage.deviceName ? "设备名称：" + warning.warningMessage.deviceName : "设备名称：--"}}</el-col>
+                    <el-col class="content">{{warning.warningMessage.alarmContent ? "告警信息：" + warning.warningMessage.alarmContent : "告警信息：--"}}</el-col>
+                    <el-col class="time">{{warning.warningMessage.createTime ? "告警时间：" + warning.warningMessage.createTime : "告警时间：--"}}</el-col>
+                </el-col>
+            </el-row>
+            <el-row class="meeting commonWidth" v-if="meeting.state"><!--会议信息弹框-->
+                <el-col class="top">
+                    <el-col class="title">
+                        <img src="../../../assets/image/arrow.png" alt="" />
+                        xxx会议室
+                    </el-col>
+                    <p class="close" @click="close"></p>
+                </el-col>
+                <el-col class="contain">
+                    <el-col class="section1 section" >
+                        <el-col class="title">会议预约列表</el-col>
+                        <el-table :data="meeting.meetingMessage.order" border style="width: 100%;height:104px" class="scroll"  id="table1" v-infinite-scroll="moremeetingMsg1">
+                            <el-table-column prop="meetingStartTime,meetingEndTime" label="预约使用日期" width="240">
+                                <template  slot-scope="scope">
+                                    {{scope.row.meetingStartTime}} ~ {{scope.row.meetingEndTime}}
+                                </template>  
+                            </el-table-column>
+                            <el-table-column prop="meetingRoomName" label="会议名称" width="80"></el-table-column>
+                            <el-table-column prop="markPerson" label="预约人"> </el-table-column>
+                        </el-table>
+                    </el-col>
+                    <el-col class="section2 section">
+                        <el-col class="title" style="width:20%">历史会议信息</el-col>
+                        <el-date-picker
+                            v-model="time"
+                            type="datetimerange"
+                            range-separator="~"
+                            start-placeholder="开始时间"
+                            end-placeholder="结束时间"
+                            @change="changeDate"
+                            >
+                        </el-date-picker>
+                        <el-table :data="meeting.meetingMessage.history" border style="width: 100%;height:80px" class="scroll"  v-infinite-scroll="moreMeetingMsg2">
+                            <el-table-column prop="meetingRoomName" label="会议名称" width="64"></el-table-column>
+                            <el-table-column prop="meetingStartTime,meetingEndTime" label="会议时间" width="234">
+                                <template  slot-scope="scope">
+                                    {{scope.row.meetingStartTime}} ~ {{scope.row.meetingEndTime}}
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="signPerson" label="应到人数" width="64"> </el-table-column>
+                            <el-table-column prop="realityPerson" label="实到人数" width="64"> </el-table-column>
+                        </el-table>
+                    </el-col>
+                </el-col> 
+            </el-row>
+            <el-row class="equipment commonWidth" v-if="equipment.state"><!--设备信息弹框-->
+                <el-col class="top">
+                    <el-col class="title">
+                        <img src="../../../assets/image/arrow.png" alt="" />
+                        <span>设备信息</span>
+                        <img src="../../../assets/image/icon1.png" alt="" class="equipment-icon"/>
+                    </el-col>
+                    <p class="close" @click="close"></p>
+                </el-col>
+                <el-col class="contain">
+                    <el-col class="title"><span class="type">设备名称：</span><span class="data">{{equipment.equipmentMessage.deviceName ? equipment.equipmentMessage.deviceName : "--"}}</span></el-col>
+                    <el-col class="title"><span class="type">设备类型：</span><span class="data">{{equipment.equipmentMessage.deviceType ? equipment.equipmentMessage.deviceType : "--"}}</span></el-col>
+                    <el-col class="title"><span class="type">设备编号：</span><span class="data">{{equipment.equipmentMessage.registerDeviceId ? equipment.equipmentMessage.registerDeviceId : "--"}}</span></el-col>
+                    <el-col class="title"><span class="type">楼层：</span><span class="data">{{equipment.equipmentMessage.floorUuid ? equipment.equipmentMessage.floorUuid : "--"}}</span></el-col>
+                    <el-col class="title"><span class="type">绑定时间：</span><span class="data">{{equipment.equipmentMessage.createTime ? equipment.equipmentMessage.createTime : "--"}}</span></el-col>
+                </el-col>
+            </el-row>
+            <el-row class="xinfa commonWidth" v-if="xinfa.state"><!--信发设备信息弹框-->
+                <el-col class="top">
+                    <el-col class="title">
+                        <img src="../../../assets/image/arrow.png" alt="" />
+                        <span>{{xinfa.name}}</span>
+                    </el-col>
+                    <p class="close" @click="close"></p>
+                </el-col>
+                <el-col class="contain">
+                    <el-col class="module1">
+                        <div class="title">设备工况：</div>
+                        <div class="wrap" >
+                            <span class="span1" :style="xinfa.bgc"></span>
+                            <span class="span2" :style="xinfa.color">{{xinfa.text}}</span>
+                        </div>
+                    </el-col>
+                    <el-col class="module2" v-if="xinfa.sbState">
+                        <div class="title">设备控制：</div>
+                        <div class="wrap">
+                            <el-button type="success" round size="mini" class="open" @click="xinfaSwitch('open')">唤醒</el-button>
+                            <el-button type="danger" round size="mini" class="off" @click="xinfaSwitch('off')">休眠</el-button>
+                        </div>
+                    </el-col>
+                </el-col>
+            </el-row>
+            <el-row class="ba commonWidth" v-if="ba.state"><!--ba设备信息弹框-->
+                <el-col class="top">
+                    <el-col class="title">
+                        <img src="../../../assets/image/arrow.png" alt="" />
+                        <span>设备信息</span>
+                        <img src="../../../assets/image/icon1.png" alt="" class="equipment-icon"/>
+                    </el-col>
+                    <p class="close" @click="close"></p>
+                </el-col>
+                <el-col class="contain scroll">
+                    <el-col class="title">
+                        <span class="type">设备名称：</span>
+                        <span class="data">{{ba.baMessage1.deviceName ? ba.baMessage1.deviceName : "--"}}</span>
+                        
+                    </el-col>
+                    <el-col class="title">
+                        <span class="type">设备类型：</span>
+                        <span class="data" v-if="ba.baMessage2">{{ba.baMessage1.deviceType ? ba.baMessage1.deviceType : "--"}}</span>
+                        <span class="data" v-else>--</span>
+                    </el-col>
+                    <el-col class="title">
+                        <span class="type">设备编号：</span>
+                        <span class="data" >{{ba.baMessage1.registerDeviceId ? ba.baMessage1.registerDeviceId : "--"}}</span>
+                        
+                    </el-col>
+                    <el-col class="title">
+                        <span class="type">楼层：</span>
+                        <span class="data" >{{ba.baMessage1.floorUuid ? ba.baMessage1.floorUuid : "--"}}</span>
+                        
+                    </el-col>
+                    <el-col class="title">
+                        <span class="type">绑定时间：</span>
+                        <span class="data" >{{ba.baMessage1.createTime ? ba.baMessage1.createTime : "--"}}</span>
+                        
+                    </el-col>
+
+                    <el-col class="title">
+                        <span class="type">冷阀反馈：</span>
+                        <span class="data" v-if="ba.baMessage2.length>1">{{ba.baMessage2.find(val=>val.m === '01LFFK') && (ba.baMessage2.find(val=>val.m === '01LFFK').v == "0"  ? "关闭" : ba.baMessage2.find(val=>val.m === '01LFFK').v == "1"  ? "开启" : '--')}}</span>
+                        <span class="data" v-else>--</span>
+                    </el-col>
+                    <el-col class="title">
+                        <span class="type">热阀反馈：</span>
+                        <span class="data" v-if="ba.baMessage2.length>1">{{ba.baMessage2.find(val=>val.m === '02RFFK') && (ba.baMessage2.find(val=>val.m === '02RFFK').v == "0"  ? "关闭" : ba.baMessage2.find(val=>val.m === '02RFFK').v == "1"  ? "开启" : '--')}}</span>
+                        <span class="data" v-else>--</span>
+                    </el-col>
+                    <el-col class="title">
+                        <span class="type">室内温度：</span>
+                        <span class="data" v-if="ba.baMessage2.length>1">{{ba.baMessage2.find(val=>val.m === '03SNWD') && (ba.baMessage2.find(val=>val.m === '03SNWD').v  ? Number(ba.baMessage2.find(val=>val.m === '03SNWD').v).toFixed(1) + "℃" : "--")}}</span>
+                        <span class="data" v-else>--</span>
+                    </el-col>
+                    <el-col class="title">
+                        <span class="type">风机速度：</span>
+                        <span class="data" v-if="ba.baMessage2.length>1"> {{ba.baMessage2.find(val=>val.m === '04FJSD') && (ba.baMessage2.find(val=>val.m === '04FJSD').v  ? ba.baMessage2.find(val=>val.m === '04FJSD').v + "%" : "--")}}</span>
+                        <span class="data" v-else>--</span>
+                    </el-col>
+                    <el-col class="title">
+                        <span class="type">风机启停：</span>
+                        <span class="data" v-if="ba.baMessage2.length>1">{{ba.baMessage2.find(val=>val.m === '05FJQT') && (ba.baMessage2.find(val=>val.m === '05FJQT').v == "0" ? "停止" : ba.baMessage2.find(val=>val.m === '05FJQT').v == "0" ? "启动" : '--')}}</span>
+                        <span class="data" v-else>--</span>
+                    </el-col>
+                   <el-col class="title">
+                        <span class="type">温度设定：</span>
+                        <span class="data" v-if="ba.baMessage2.length>1">
+                            {{ba.baMessage2.find(val=>val.m === '06WDSD') 
+                            && (ba.baMessage2.find(val=>val.m === '06WDSD').v  ? Number(ba.baMessage2.find(val=>val.m === '06WDSD').v).toFixed(1) + "℃（调整精度0.5℃）" : "--")}}
+                        </span>
+                        <span class="data" v-else>--</span>
+                    </el-col>
+                    <el-col class="title"><span class="type">模式选择：</span>
+                        <span class="data" v-if="ba.baMessage2.length>1">
+                            {{ba.baMessage2.find(val=>val.m === '07MSXZ') 
+                            && 
+                            ba.baMessage2.find(val=>val.m === '07MSXZ').v == "0" ? 
+                            "制冷" : ba.baMessage2.find(val=>val.m === '07MSXZ').v == "1" ? 
+                            "制热" : ba.baMessage2.find(val=>val.m === '07MSXZ').v == "2" ? 
+                            "除湿" : ba.baMessage2.find(val=>val.m === '07MSXZ').v == "3" ? 
+                            "通风" : "--" }}</span>
+                        <span class="data" v-else>--</span>
+                        </el-col>
+                    <el-col class="title">
+                        <span class="type">风机模式：</span>
+                        <span class="data" v-if="ba.baMessage2.length>1">{{ba.baMessage2.find(val=>val.m === '08FJMS') && (ba.baMessage2.find(val=>val.m === '08FJMS').v == "0"  ? "自动" : ba.baMessage2.find(val=>val.m === '08FJMS').v == "1"  ? "手动" : '--')}}</span>
+                        <span class="data" v-else>--</span>
+                    </el-col>
+                    <el-col class="title">
+                        <span class="type">风速设定：</span>
+                        <span class="data" v-if="ba.baMessage2.length>1">{{ba.baMessage2.find(val=>val.m === '09FSSD') && (ba.baMessage2.find(val=>val.m === '09FSSD').v  ? Number(ba.baMessage2.find(val=>val.m === '09FSSD').v).toFixed(0) + "%" : "--")}}</span>
+                        <span class="data" v-else>--</span>
+                    </el-col>
+                </el-col>
+            </el-row>
+            <el-row class="entranceGuard commonWidth" v-if="entranceGuard.state"><!--门禁设备信息弹框-->
+                <el-col class="top">
+                    <el-col class="title">
+                        <img src="../../../assets/image/arrow.png" alt="" />
+                        <span>{{entranceGuard.entranceGuardMessage.name}}</span>
+                    </el-col>
+                    <p class="close" @click="close"></p>
+                </el-col>
+                <el-col class="contain">
+                    <el-col class="day">今日累计：</el-col>
+                    <div class="wrap">
+                        <div class="section">
+                            <span class="text">进</span>
+                            <span class="num" style="color:#FDC51A">{{entranceGuard.entranceGuardMessage.into || 0}}</span>
+                        </div>
+                        <div class="section">
+                            <span class="text">出</span>
+                            <span class="num" style="color:#1AF3FD">{{entranceGuard.entranceGuardMessage.out || 0}}</span>
+                        </div>
+                    </div>
+                    <!-- <p class="tableTitle">最新记录</p> -->
+                    <el-table 
+                    height="200"
+                   :header-cell-style="{background:'rgba(22, 55, 163, 0.5)',color:'#fff',border:'none'}"
+                    :row-class-name="tableRowClassName"
+                    :data="entranceGuard.entranceGuardMessage.tableList"   style="width: 100%;height:110px" class="success-row table2 scroll" >
+                        <el-table-column prop="id" label="序号" width="80"></el-table-column>
+                        <el-table-column prop="opdt" label="刷卡时间" > </el-table-column>
+                        <el-table-column prop="outid" label="学工号" width="80"> </el-table-column>
+                        <el-table-column prop="name" label="姓名" width="80"> </el-table-column>
+                        <el-table-column prop="rectype" label="记录类型" width="120"> </el-table-column>
+                        <el-table-column prop="ioflag" label="进出状态" width="80"> </el-table-column>
+                        <el-table-column prop="termname" label="终端编号" > </el-table-column>
+                        <!-- <el-table-column prop="cardsnr" label="卡序列号" > </el-table-column> -->
+                        
+                    </el-table>
+                </el-col>
+            </el-row>
+            
+            <el-row class="music commonWidth" v-if="music.state"><!--背景音乐弹框-->
+                <el-col class="top">
+                    <el-col class="title">
+                        <img src="../../../assets/image/arrow.png" alt="" />
+                        <span class="title">背景音乐</span>
+                    </el-col>
+                    <p class="close" @click="close" ></p>
+					<!-- <p class="close" @click="centerDialogVisible = false" data="22"></p> -->
+                </el-col>
+                <el-col class="contain scroll" >
+                    <el-col class="section1 section">
+                        <el-table :data="music.musicTableData" border style="width: 100%;" >
+                            <el-table-column prop="playTime" label="播放时间" width="220"></el-table-column>
+                            <el-table-column prop="playContent" label="播放内容" ></el-table-column>
+                        </el-table>
+                    </el-col>
+                </el-col>
+            </el-row>
+            <el-row class="video commonWidth" v-if="video.state"><!--视屏监控弹框-->
+                <el-col class="top">
+                    <el-col class="title">
+                        <img src="../../../assets/image/arrow.png" alt="" />
+                        <span>视频监控</span>
+                        <img src="../../../assets/image/icon2.png" alt="" class="equipment-icon"/>
+                    </el-col>
+                    <p class="close" @click="close"></p>
+                </el-col>
+                <el-col class="contain">
+                    <video v-if="video.play"
+                        :id="video.videoId"  
+                        class="video-js vjs-default-skin videoPaly" 
+                        preload="auto" 
+                        autoplay="autoplay" 
+                        :src="video.videoUrl" type="application/x-mpegURL">
+                    </video>
+                    <div class="videoNo" v-if="video.videoNo">
+                        <img src="../../../assets/image/video.png"   alt="">
+                        <p>摄像头设备参数暂未接入</p>
+                    </div>
+                    
+                </el-col>
+                
+            </el-row>
+        <!-- </el-dialog> -->
+  </div>
+</template>
+<script>
+import axios from 'axios'
+import 'video.js/dist/video-js.css'
+import videojs from 'video.js'
+import 'videojs-contrib-hls'
+import "@videojs/http-streaming"
+import { meetingPageApi, meetingStatusApi, videoUrl, xinfaToken, ba, accessControlListApi} from "@/plugins/api"
+export default {
+    props:['resInfo',"close2"],
+    data() {
+        return {
+            centerDialogVisible: true,
+            warning:{//推送告警
+                "state":false,
+                "warningMessage":{},
+            },
+            equipment:{//设备信息
+                "state":false,
+                "equipmentMessage":{
+                    "deviceName": undefined,
+                    "deviceType": undefined,
+                    "createTime": undefined,
+                    "registerDeviceId":undefined,
+                },
+            },
+            meeting:{//会议
+                "state":false,
+                "meetingMessage":{ 
+                    "status":undefined,
+                    "meeting":false, //
+                    "order":[], //预约列表数据
+                    "history":[], //历史信息列表数据
+                    "meetingForm1":{ //预约列表form
+                        current:1,
+                        size:10,
+                        startTime:undefined,
+                        endTime:undefined,
+                        roomId:109,
+                    }, 
+                    "meetingForm2":{ //历史信息列表form
+                        current:1,
+                        size:10,
+                        startTime:undefined,
+                        endTime:undefined,
+                        roomId:109,
+                    }, 
+                    "moreHistoryNo":false,
+                    "moreOrderNo":false,
+                },
+
+            },
+            video:{//视频
+                "state":false,
+                "play":false,
+                "videoId":undefined,
+                "videoUrl":false,
+                "videoNo":false,
+                "videoImg":require("../../../assets/image/video.jpg"),
+                "vedioData":[
+                    // {"title": "3层东楼梯","cameraIndexCode":"4db3dfbea6894b02a24673147a64d6c5","path":"",},
+                ]
+            },
+            music:{//音乐
+                "state":false,
+                "musicTableData":[
+                    {"playTime":"2021-11-15 09:00:00","playContent":"时光对面的我"},
+                    {"playTime":"2021-11-15 10:00:00","playContent":"守护我的光"},  
+                ],
+            },
+            xinfa:{//信发
+                "text":false,
+                "state":false,
+                "xinfaMessage":{},
+                "bgc":{
+                    "background":undefined, 
+                },
+                "color":{
+                    "color":undefined
+                },
+                "cMarks":undefined,
+                "sbState":true,
+                "name":undefined,
+            },
+            ba:{//ba
+                "state":false,
+                "baMessage1":{},
+                "baMessage2":{},
+            },
+            entranceGuard:{//门禁
+                state:false,
+                entranceGuardMessage:{
+                    "tableList":[
+                        {"id":"1","outid":"11111", "name":"张三","termname":"154sdt", "cardsnr":"154sdtsadawee", "opdt":"2021-12-20 00:00:00", "rectype":"正常超时","ioflag":"进"},
+                        {"id":"1","outid":"11111", "name":"张三","termname":"154sdt", "cardsnr":"154sdtsadawee", "opdt":"2021-12-20 00:00:00", "rectype":"正常超时","ioflag":"进"},
+                        {"id":"1","outid":"11111", "name":"张三","termname":"154sdt", "cardsnr":"154sdtsadawee", "opdt":"2021-12-20 00:00:00", "rectype":"正常超时","ioflag":"进"},
+                        {"id":"1","outid":"11111", "name":"张三","termname":"154sdt", "cardsnr":"154sdtsadawee", "opdt":"2021-12-20 00:00:00", "rectype":"正常超时","ioflag":"进"},
+                        {"id":"1","outid":"11111", "name":"张三","termname":"154sdt", "cardsnr":"154sdtsadawee", "opdt":"2021-12-20 00:00:00", "rectype":"正常超时","ioflag":"进"},
+                        {"id":"1","outid":"11111", "name":"张三","termname":"154sdt", "cardsnr":"154sdtsadawee", "opdt":"2021-12-20 00:00:00", "rectype":"正常超时","ioflag":"进"},
+                        {"id":"1","outid":"11111", "name":"张三","termname":"154sdt", "cardsnr":"154sdtsadawee", "opdt":"2021-12-20 00:00:00", "rectype":"正常超时","ioflag":"进"},
+                        {"id":"1","outid":"11111", "name":"张三","termname":"154sdt", "cardsnr":"154sdtsadawee", "opdt":"2021-12-20 00:00:00", "rectype":"正常超时","ioflag":"进"},
+                        {"id":"1","outid":"11111", "name":"张三","termname":"154sdt", "cardsnr":"154sdtsadawee", "opdt":"2021-12-20 00:00:00", "rectype":"正常超时","ioflag":"进"},
+                        {"id":"1","outid":"11111", "name":"张三","termname":"154sdt", "cardsnr":"154sdtsadawee", "opdt":"2021-12-20 00:00:00", "rectype":"正常超时","ioflag":"进"},
+                        
+                    ],
+                    "Into":30,
+                    "out":20,
+                    "name":"一层大厅1#通道"
+                },
+            },
+            time:[],
+        }
+    },
+    watch: {
+        resInfo(){
+            this.getData()
+        },
+        close2(){
+            this.close()
+        },
+        // immediate: true
+        // deep: true,//深度监听
+    },
+    mounted(){
+        this.getData()
+    },
+    methods: {
+    videoPlay(){
+        this.$nextTick(() => {
+            console.log(this.video.videoId)
+            let list = videojs(this.video.videoId , {
+            events: [],
+            // playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
+            autoplay: "true", // 如果true,浏览器准备好时开始回放。
+            controls: true, //  控制条
+            preload: 'auto', // 视频预加载
+            muted: true, //  默认情况下将会消除任何音频。
+            loop: false, // 导致视频一结束就重新开始。
+            language: 'zh-CN',
+            controlBar: {
+              timeDivider: true,
+              durationDisplay: true
+            },
+            aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+            fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+            sources: [{
+              type: 'application/x-mpegURL',
+              src: this.video.videoUrl
+            }],
+            hls: true, // 启用hls？
+            poster: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F945cad7c7105d352aa3c513c94846bb0c2f1a61342067-OWFZcE_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638947006&t=9cd1ab4df990ba151fcd5f0378f6e8cf', // 你的封面地址
+            width: document.documentElement.clientWidth,
+            notSupportedMessage: '此视频暂无法播放，请稍后再试'
+            // autoplay:true,
+            // controls:false,
+            // bigPlayButton: false,
+            // textTrackDisplay: false,
+            // posterImage: true,
+            // errorDisplay: false,
+            // controlBar: true,
+            // muted: true //静音模式 、、 解决首次页面加载播放。
+          }, function () {
+            this.play() // 自动播放
+          })
+        })
+        
+            // let list = videojs(this.video.videoId , {
+            //     events: [],
+            //     playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
+            //     autoplay: "true", // 如果true,浏览器准备好时开始回放。
+            //     controls: true, //  控制条
+            //     preload: 'auto', // 视频预加载
+            //     muted: true, //  默认情况下将会消除任何音频。
+            //     loop: false, // 导致视频一结束就重新开始。
+            //     language: 'zh-CN',
+            //     controlBar: {
+            //         timeDivider: true,
+            //         durationDisplay: true
+            //     },
+            //     aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+            //     fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+            //     sources: [{
+            //         type: 'application/x-mpegURL',
+            //         src: this.videoUrl
+            //     }],
+            //     hls: true, // 启用hls？
+            //     poster: video.videoImg, // 你的封面地址
+            //     width: document.documentElement.clientWidth,
+            //     notSupportedMessage: '此视频暂无法播放，请稍后再试'
+            // }, function () {
+            //     this.play() // 自动播放
+            // })
+        
+    },
+    getData(){
+        // 
+        if(this.resInfo.warningState){//推送告警
+            this.warning.state = true
+		    this.warning.warningMessage = this.resInfo.warningMessage
+            if(this.timeout){
+                clearTimeout(this.timeout)
+            }
+            this.timeout = setTimeout(() => {
+                this.warning.state = false
+                this.close()
+            }, 3000);
+        }else if(this.resInfo.meetingState){//会议
+            console.log("会议更新")
+            //会议状态
+            meetingStatusApi({"rootName":this.meeting.meetingMessage.meetingForm1.roomId}).then(res =>{
+                console.log(res)
+                // this.meeting.state = res.data
+            })
+            //会议列表、历史会议
+            var myDate = new Date();
+            let Year = myDate.getFullYear();
+            let Month = myDate.getMonth() + 1;
+            let Day= myDate.getDate()
+            if(Month<10){
+                Month = '0' + Month
+            }else{
+                Month = Month
+            }
+            if(Day<10){
+                Day = '0' + Day
+            }else{
+                Day = Day
+            }
+            this.meeting.meetingMessage.meetingForm1.current = 1
+            this.meeting.meetingMessage.meetingForm2.current = 1
+            this.meeting.meetingMessage.meetingForm1.startTime = Year + '-' + Month + '-' + Day + " 00:00:00"
+            this.meeting.meetingMessage.meetingForm1.endTime = Year + '-' + Month + '-' + Day + " 23:59:59"
+            meetingPageApi(this.meeting.meetingMessage.meetingForm1).then(res =>{
+                this.meeting.meetingMessage.meeting = true
+                this.meeting.meetingMessage.order = res.data.records
+            })
+            meetingPageApi(this.meeting.meetingMessage.meetingForm2).then(res =>{
+                this.meeting.meetingMessage.history = res.data.records
+            })
+        }else if(this.resInfo.equipmentState){//设备
+            console.log("点位设备")
+            console.log(this.resInfo)
+            this.equipment.state = true
+            if(this.resInfo.equipmentMessage){
+                this.equipment.equipmentMessage = this.resInfo.equipmentMessage
+            }else{
+
+            }
+            
+        }else if(this.resInfo.videoState){//视频
+            if(this.resInfo.videoMessage){
+                videoUrl({"cameraIndexCode":this.resInfo.videoMessage.registerDeviceId,"protocol":"hls"}).then(res =>{ // 点位摄像头视频
+                    console.log("摄像头绑定")
+                    console.log(res)
+                    if(res.data != null){
+                        this.video.videoId = "video" + Date.now()
+                        this.video.videoUrl = res.data.url
+                        this.video.state = true
+                        this.video.play = true
+                        this.videoNo = false
+                        this.videoPlay()
+                    }
+                })
+            }else{
+                console.log("摄像头未绑定")
+                this.video.state = true
+                this.video.videoNo = true
+                this.video.play = false
+            }
+        }else if(this.resInfo.xinfaState){//信发
+            console.log(this.resInfo,this.resInfo.xinfaMessage.registerDeviceId)
+            let cMark = this.resInfo.xinfaMessage.registerDeviceId
+            this.xinfa.cMarks = cMark 
+            xinfaToken().then(res =>{ //信发设备
+				console.log("信发设备")
+				let access_token = res.data.authToken
+				let secret = res.data.secret
+				let acces_secret_md5 = this.$md5(secret)
+				let timestamp = Date.parse(new Date()) / 1000;
+				let sign = this.$md5(access_token + acces_secret_md5 + timestamp);
+				axios({
+					method: 'get',
+					url: 'http://10.108.35.105:8780/adc/sdk/dev_get_devstatus',
+					params: {
+						access_token: access_token,
+						timestamp: timestamp,
+						sign:sign,
+						cMark:cMark
+					},
+					timeout: 3000,
+				}).then(res =>{
+					console.log(res)
+					this.xinfa.state = true
+                    if(res.data.result == "failed"){
+                        this.xinfa.text = res.data.retInfo
+                        this.xinfa.bgc.background = "#E22323"
+						this.xinfa.color.color = "#E22323"
+                        this.xinfa.name = this.resInfo.xinfaMessage.deviceName + this.resInfo.xinfaMessage.deviceType
+                    }else if(res.data.online == 0){
+						this.xinfa.text = "不在线"
+						this.xinfa.bgc.background = "#E22323"
+						this.xinfa.color.color = "#E22323"
+                        this.xinfa.sbState = false
+                        this.xinfa.name = this.resInfo.xinfaMessage.deviceName + this.resInfo.xinfaMessage.deviceType
+					}else{
+						this.xinfa.text = "在线"
+						this.xinfa.bgc.background = "#46C00B"
+						this.xinfa.color.color = "#46C00B"
+                        this.xinfa.name = this.resInfo.xinfaMessage.deviceName + this.resInfo.xinfaMessage.deviceType
+					}
+				}).catch(err =>{
+                    console.log(err)
+                    this.xinfa.text = "不在线"
+					this.xinfa.bgc.background = "#E22323"
+					this.xinfa.color.color = "#E22323"
+                    this.xinfa.sbState = false
+                    this.xinfa.sbState = false
+                    this.xinfa.name = this.resInfo.xinfaMessage.deviceName + this.resInfo.xinfaMessage.deviceType
+
+                });
+			})  
+        }else if(this.resInfo.baState){//ba
+            this.ba.baMessage1 = this.resInfo.baMessage
+            ba({"deviceCode":this.resInfo.baMessage.registerDeviceId}).then(res =>{ 
+                console.log("ba设备")
+                this.ba.state = true
+                console.log(res.data)
+                if(res.data){
+                    let data = JSON.parse(res.data.devDetails)
+                    this.ba.baMessage2 = data
+                }
+                
+                console.log(this.ba.baMessage2)
+            }) 
+        }else if(this.resInfo.entranceGuardState){//门禁
+            this.ba.baMessage1 = this.resInfo.baMessage
+            accessControlListApi({"deviceCode":this.resInfo.baMessage.registerDeviceId}).then(res =>{ 
+                console.log("门禁设备")
+                console.log(res)
+                // this.entranceGuard.state = true
+                // if(res.data){
+                //     let data = JSON.parse(res.data.devDetails)
+                //     this.entranceGuard.entranceGuardMessage = data
+                // }
+            }) 
+        }else{
+
+        }
+    },
+    changeDate(){
+        this.meeting.meetingMessage.meetingForm2.current = 1
+		this.dataChange()
+        meetingPageApi(this.meeting.meetingMessage.meetingForm2).then(res =>{
+            this.meeting.meetingMessage.history = res.data.records
+        })
+    },
+    dataChange(){//时间转化
+        if(this.time.length>0){
+            var myDate1 = this.time[0];
+            let Year1 = myDate1.getFullYear();
+            let Month1 = myDate1.getMonth() + 1;
+            let Day1= myDate1.getDate()
+            if(Month1<10){
+            Month1 = '0' + Month1
+            }else{
+            Month1 = Month1
+            }
+            if(Day1<10){
+            Day1 = '0' + Day1
+            }else{
+            Day1 = Day1
+            }
+            this.meeting.meetingMessage.meetingForm2.startTime = Year1 + '-' + Month1 + '-' + Day1 + " 00:00:00"
+            var myDate2 = this.time[1];
+            let Year2 = myDate2.getFullYear();
+            let Month2 = myDate2.getMonth() + 1;
+            let Day2= myDate2.getDate()
+            
+            if(Month2<10){
+            Month2 = '0' + Month2
+            }else{
+            Month2 = Month2
+            }
+            if(Day2<10){
+            Day2 = '0' + Day2
+            }else{
+            Day2 = Day2
+            }
+            this.meeting.meetingMessage.meetingForm2.endTime = Year2 + '-' + Month2 + '-' + Day2 + " 23:59:59"
+        }
+	},
+    moremeetingMsg1() { //预约列表滑动加载
+		console.log('触发预约列表滑动加载事件')
+		this.meeting.meetingMessage.meetingForm1.current ++
+		meetingPageApi(this.meeting.meetingMessage.meetingForm1).then(res =>{
+			if(res.data.records.length>0){
+                let data = res.data.records
+                for(let i =0;i<data.length; i++){
+                    this.meeting.meetingMessage.order.push(data[i])
+                }
+			}else{
+				this.meeting.meetingMessage.meetingForm1.current --
+			}
+		})
+	},
+    moremeetingMsg2() { //历史会议信息列表滑动加载
+		console.log('触发历史会议信息滑动加载事件')
+        this.dataChange()
+		this.meeting.meetingMessage.meetingForm2.current ++
+		meetingPageApi(this.meeting.meetingMessage.meetingForm2).then(res =>{
+			if(res.data.records.length>0){
+                let data = res.data.records
+                for(let i =0;i<data.length; i++){
+                    this.meeting.meetingMessage.history.push(data[i])
+                }
+			}else{
+				this.meeting.meetingMessage.meetingForm2.current --
+			}
+		})
+	},
+    xinfaSwitch(e){
+            xinfaToken().then(res =>{ //信发设备
+				console.log("信发设备")
+				let access_token = res.data.authToken
+				let secret = res.data.secret
+				let acces_secret_md5 = this.$md5(secret)
+				let timestamp = Date.parse(new Date()) / 1000;
+				let sign = this.$md5(access_token + acces_secret_md5 + timestamp);
+                if(e == "open"){
+                    var sCmd ={
+                        paramType:17,
+                        onoff:1,//1:立即唤醒；0：立即休眠
+                        subcmd:'ctrl_lcd_onoff_ontime'
+                    }
+                }else{
+                    var sCmd ={
+                        paramType:17,
+                        onoff:0,//1:立即唤醒；0：立即休眠
+                        subcmd:'ctrl_lcd_onoff_ontime'
+                    }
+                }
+                
+                axios({
+					method: 'get',
+					url: 'http://10.108.35.105:8780/adc/sdk/sendClientParams',
+					params: {
+						access_token: access_token,
+						timestamp: timestamp,
+						sign:sign,
+                        paramType:"17",
+                        cMarks:this.xinfa.cMarks,
+                        params:JSON.stringify(sCmd),
+                        retry:"0"
+					},
+					timeout: 3000,
+				}).then(res =>{
+					console.log(res)
+                    if(res.data.result =="success"){
+                        if(e == "open"){
+                            this.$message({
+                                showClose: true,
+                                message: '设备唤醒成功',
+                                type: 'success'
+                            });
+                        }else{
+                            this.$message({
+                                showClose: true,
+                                message: '设备已进入休眠状态',
+                                type: 'success'
+                            });
+                        }
+                        
+                    }
+				})
+            })
+       
+    },
+	close(){
+        console.log(11)
+		this.warning.state = false
+		this.music.state = false
+		this.meeting.meetingMessage.meeting = false
+        this.equipment.state = false
+        this.video.state = false
+        this.video.play = false
+        this.video.videoId = false
+        this.video.videoNo = false
+        this.xinfa.state = false
+        this.entranceGuard.state = false
+        this.$emit("close",false)
+	},
+    tableRowClassName({row, rowIndex}) {
+        if (rowIndex%2=== 1)  //=>这里可以改成 rowIndex%2=== 1，后面直接else即可达到隔行变色效果。
+        { 
+          return 'success-row';
+        }
+        return '';
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+
+
+/deep/ .el-table .success-row {
+    background: rgba(22, 55, 163, 0.5) !important;//这里可以修改颜色
+}
+.Spring-frame {
+    position: absolute;
+	width:50%;
+	top:20%;
+	left:25%;
+	margin:0 auto;
+    .warning{
+        width:389px;
+        height:126px;
+        margin:0 auto;
+        background: url('../../../assets/image/warning-bg.png') ;
+        background-size: 389px 126px;
+        .contain{
+            width:58%;
+            margin:6% 0 0 35%;
+            line-height: 22px;
+            color:#fff;
+            font-size: 12px;
+            .title{
+                font-size: 12px;
+            }
+            .content{
+                margin-top:0px;
+            }
+        }
+		// .close{
+		//     width:16px;
+		//     height:16px;
+		//     background: url('../../../assets/image/close2.png') no-repeat;
+		//     position: absolute;
+		// 	top:8px;right:6px;
+		// }
+    }
+    .commonWidth{
+        width:450px;
+        display: block;
+        margin:0 auto; 
+        .top{
+            height: 39px;
+            line-height: 35px;
+            background: rgba(28,82,216,.5);
+            border: 1px solid #1C52D8;
+            border-bottom:none;
+            border-radius: 4px 4px  0 0;
+            .title{
+                width:50%;
+                font-size: 16px;
+                margin-left:16px;
+                vertical-align: middle;
+                color:#38E7EE;
+                vertical-align: middle;
+                img{
+                    margin-right:4px;
+                    vertical-align: middle;
+                }
+                span{
+                    margin-left:16px;
+                    vertical-align: middle;
+                }
+                .equipment-icon{
+                    width:16px;
+                    position: absolute;
+                    top:16px;
+                    right:45%;
+                }
+            }
+            .close{
+                width:16px;
+                height:16px;
+                background: url('../../../assets/image/close.png') ;
+                float:right;
+                margin:12px 6px 0 0;
+            }
+        } 
+        .contain{
+            background-color:rgba(0,22,103,.85);
+            border-radius: 0 0 4px 4px;
+        }
+    }
+    .meeting,.music{
+        height:300px;
+        .contain{
+            height:300px;
+            overflow: hidden;
+            .section{
+                padding:10px;
+                font-size: 14px;
+                font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
+                font-weight: bold;
+                text-align: left;
+                color: #ffffff;
+                line-height: 30px;
+                
+            }
+            .title{
+                margin-bottom:4px;
+            }
+            .section2 .title{
+                width:auto;
+                display: inline-block;
+                margin-right:10px;
+                vertical-align: middle;
+                // margin-bottom:2px;
+            }
+        }
+        
+        /deep/ .el-table tr, /deep/ .el-table th, /deep/ .el-table td{
+            background-color: transparent;//这是设置透明背景色
+            font-size: 10px;
+            padding:0;
+        }
+    }
+    .meeting .title{
+        font-size: 12px;
+    }
+    .equipment,.ba{
+        .contain{
+            padding: 10px 10px 25px;
+            overflow: hidden;
+            .title{
+                margin-top:10px;
+                font-size: 14px;
+                letter-spacing: 1px;
+                .type{
+                    width:25%;
+                    text-align: right;
+                    display: inline-block;
+                }
+                .data{
+                    width:75%;
+                    text-align: left;
+                    display: inline-block;
+                    vertical-align: top;
+                }
+            }
+            
+        }
+    }
+    .ba {
+       .contain{
+           height:300px;
+           overflow-y:scroll;
+       } 
+    }
+    .video{
+        .contain{
+            overflow: hidden;
+            .videoPaly{
+                width:100%;
+            }
+            .videoNo{
+                margin: 10% auto;
+                img{
+                    height:97px;
+                    width:102px;
+                    display: block;
+                    margin: 0 auto;
+                }
+                p{
+                    text-align: center;
+                    font-size: 12px;
+                    color:#fff;
+                    margin-top:3%;
+                }
+                
+            }
+        }
+        
+    }
+    .xinfa{
+        width:290px !important;
+        .top{
+           
+            .title{
+                width:80% !important;
+            }
+        }
+        .contain{
+            height:140px;
+            padding:35px 10px;
+            overflow: hidden;
+            .module1{
+                .title{
+                    font-size: 14px;
+                    color:#fff;
+                    text-align: left;
+                    display: inline-block;
+                    vertical-align: middle;
+                }
+                .wrap{
+                    vertical-align: middle;
+                    display: inline-block;
+                    .span1{
+                        width:12px;
+                        height:12px;
+                        border-radius: 50%;
+                        background-color: red;
+                        display: inline-block;
+                        vertical-align: middle;
+                    }
+                    .span2{
+                        font-size: 14px;
+                        margin-left:5px;
+                        display: inline-block;
+                        vertical-align: middle;
+                    }
+                }
+
+            }
+            .module2{
+                margin-top:30px;
+                .title{
+                    font-size: 14px;
+                    color:#fff;
+                    text-align: left;
+                    display: inline-block;
+                    vertical-align: middle;
+                }
+                .wrap{
+                    .open,.off{
+                        width:60px;
+                        height:26px;
+                    }
+                    .off{
+                        margin-left:25px;
+                    }
+                    vertical-align: middle;
+                    display: inline-block;
+                    
+                }
+
+            }
+            .videoNo{
+                margin: 10% auto;
+                img{
+                    height:97px;
+                    width:102px;
+                    display: block;
+                    margin: 0 auto;
+                }
+                p{
+                    text-align: center;
+                    font-size: 12px;
+                    color:#fff;
+                    margin-top:3%;
+                }
+                
+            }
+        }
+    }
+    
+    .entranceGuard{
+        width:85%;
+        .contain{
+            height:350px;
+            padding:15px 10px;
+            overflow: hidden;
+            .day{
+                font-size: 14px;
+                color:#fff;
+                text-align: left;
+                margin-left:4px;
+            }
+            .wrap{
+                width:100%;
+                .section{
+                    width:45.5%;
+                    display: inline-block;
+                    background: url(../../../assets/image/entranceGuard.png) no-repeat;
+                    background-size: 100% 100%;
+                    align-items: center;
+                    justify-content: center;
+                    padding:20px 0;
+                    margin-top:6px;
+                    vertical-align: middle;
+                    .text{
+                        font-size: 16px;
+                        color:#fff;
+                        margin-left:40px;
+                        vertical-align: middle;
+
+                    }
+                    .num{
+                        font-size: 25px;
+                        margin-left:100px;
+                        vertical-align: middle;
+                    }
+                }
+                .section:nth-child(2){
+                    margin-left:9%;
+                }
+            }
+            .tableTitle{
+                width:96.2% !important;
+                margin:0 auto;
+                font-size: 16px;
+                padding:6px 0;
+                background-color: #1637A3;
+                padding-left:8px;
+                margin-top:14px;
+            }
+            .table2{
+                width:98% !important;
+                margin:0 auto;
+                margin-top:10px;
+                thead{
+                    tr{
+                        font-size: 30px !important;
+                    }
+                }
+                th{
+                    height:30px;
+                   
+                    border-bottom: none;
+                    
+                }
+                /deep/ tr{
+                    //background-color: transparent;//这是设置透明背景色
+                    padding:6px 0;
+                    border:none
+                }
+                /deep/ .cell{
+                    font-size: 14px;
+                }
+                /deep/ td{
+                    padding:4px 0;
+                }
+            }
+            /deep/ .el-table tr, /deep/ .el-table th, /deep/ .el-table td{
+                background-color: transparent;//这是设置透明背景色
+                
+            }
+        }
+    }
+}
+/deep/ .el-table__row>td {
+  border: none;
+}
+
+/deep/ .el-table::before {
+  height: 0px;
+}
+.scroll{
+    overflow-y: scroll;
+    overflow-x: hidden;
+}
+// ::-webkit-scrollbar {
+//   /*滚动条整体样式*/
+//   width : 0px;  /*高宽分别对应横竖滚动条的尺寸*/
+//   height: 1px;
+//   overflow: hidden;
+// }
+// ::-webkit-scrollbar-thumb {
+//   /*滚动条里面小方块*/
+//   border-radius: 1px;
+//   box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+//   background   : rgba(28,82,216,1);
+// }
+// ::-webkit-scrollbar-track {
+//   /*滚动条里面轨道*/
+//   box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+//   border-radius: 1px;
+//   background   : #ededed;
+// }
+
+// 对话框
+/deep/ .el-dialog{
+    background-color: transparent;
+    top:15%;
+}
+/deep/ .el-dialog__header{
+    padding:0;
+    padding-bottom:0;
+}
+/deep/ .el-dialog__body{
+    padding:0;
+}
+/deep/ .el-dialog__headerbtn .el-dialog__close{
+    display: none;
+}
+
+
+// table
+/deep/ .el-table--group, /deep/ .el-table--border{
+    border:none;
+}
+/deep/ .el-table thead{
+    color:#fff;
+    // background-color: rgba(28,82,216,.2);
+}
+
+/deep/ .el-table--border th{
+    border:1px solid #fff;
+    border-bottom:none;
+}
+
+/deep/ .el-table--border td{
+    border:1px solid #fff
+}
+ /deep/  .el-table, .el-table__expanded-cell {
+    background-color: transparent;//这是设置透明背景色
+    color:#fff;
+    border-collapse: collapse;
+    
+  }
+
+/deep/ .el-table__empty-text{
+    color:#fff;
+    font-size: 10px;
+    letter-spacing: 2px;
+}
+
+
+// data
+/deep/ .el-date-editor{
+    border:1px solid #ccc;
+    background-color: transparent;
+    height:25px;
+    line-height: 20px;
+    padding:0;
+    margin-top:2px;
+    box-sizing: border-box;
+}
+/deep/ .el-range-input, /deep/ .el-input__icon el-range__close-icon{
+    background-color: transparent;
+    color:#fff;
+    font-size: 12px;
+    text-align: top;
+    padding:0;
+    position: relative;
+    top:-4px
+}
+/deep/ .el-range__icon{
+    display: none;
+}
+/deep/ .el-date-editor--datetimerange.el-input__inner{
+    width:77%;
+    
+    display: inline-block;
+    
+}
+/deep/ ::placeholder{
+    color:#fff
+}
+/deep/ .el-range-separator{
+    color:#fff;
+    position: relative;
+    top:-4px
+}
+/deep/table,/deep/ tr,/deep/ td{
+    border-collapse: collapse !important;
+}
+/deep/ tr:hover, /deep/ td:hover, /deep/ table:hover{
+    background-color: none !important;
+}
+/deep/ .el-table__empty-block{
+    border:1px solid #fff;
+}
+/deep/ .el-table tbody tr:hover>td { 
+    background-color:transparent
+}
+
+::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width : 0px;  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 0px;
+  }
+::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 0px;
+  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background   : #535353;
+  }
+ ::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 0px;
+  background   : #ededed;
+  }
+
+::-webkit-scrollbar {
+	    display: none
+	  }
+      /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+  display: none;
+}
+</style>

src/components/SD-school/Spring-frame/index.vue

@@ -1,131 +1,31 @@
 <template>
     <div class="Spring-frame">
         <!-- <el-dialog :visible.sync="centerDialogVisible"> -->
-            <el-row class="warning alert" v-if="warning.state"><!--告警推送弹框-->
-                <el-col class="contain">
-                    <el-col class="title">{{warning.warningMessage.deviceName ? "设备名称：" + warning.warningMessage.deviceName : "设备名称：--"}}</el-col>
-                    <el-col class="content">{{warning.warningMessage.alarmContent ? "告警信息：" + warning.warningMessage.alarmContent : "告警信息：--"}}</el-col>
-                    <el-col class="time">{{warning.warningMessage.createTime ? "告警时间：" + warning.warningMessage.createTime : "告警时间：--"}}</el-col>
-                </el-col>
-            </el-row>
-            <el-row class="meeting commonWidth" v-if="meeting.state"><!--会议信息弹框-->
-                <el-col class="top">
-                    <el-col class="title">
-                        <img src="../../../assets/image/arrow.png" alt="" />
-                        xxx会议室
-                    </el-col>
-                    <p class="close" @click="close"></p>
-                </el-col>
-                <el-col class="contain">
-                    <el-col class="section1 section" >
-                        <el-col class="title">会议预约列表</el-col>
-                        <el-table :data="meeting.meetingMessage.order" border style="width: 100%;height:104px" class="scroll"  id="table1" v-infinite-scroll="moremeetingMsg1">
-                            <el-table-column prop="meetingStartTime,meetingEndTime" label="预约使用日期" width="240">
-                                <template  slot-scope="scope">
-                                    {{scope.row.meetingStartTime}} ~ {{scope.row.meetingEndTime}}
-                                </template>  
-                            </el-table-column>
-                            <el-table-column prop="meetingRoomName" label="会议名称" width="80"></el-table-column>
-                            <el-table-column prop="markPerson" label="预约人"> </el-table-column>
-                        </el-table>
-                    </el-col>
-                    <el-col class="section2 section">
-                        <el-col class="title" style="width:20%">历史会议信息</el-col>
-                        <el-date-picker
-                            v-model="time"
-                            type="datetimerange"
-                            range-separator="~"
-                            start-placeholder="开始时间"
-                            end-placeholder="结束时间"
-                            @change="changeDate"
-                            >
-                        </el-date-picker>
-                        <el-table :data="meeting.meetingMessage.history" border style="width: 100%;height:80px" class="scroll"  v-infinite-scroll="moreMeetingMsg2">
-                            <el-table-column prop="meetingRoomName" label="会议名称" width="64"></el-table-column>
-                            <el-table-column prop="meetingStartTime,meetingEndTime" label="会议时间" width="234">
-                                <template  slot-scope="scope">
-                                    {{scope.row.meetingStartTime}} ~ {{scope.row.meetingEndTime}}
-                                </template>
-                            </el-table-column>
-                            <el-table-column prop="signPerson" label="应到人数" width="64"> </el-table-column>
-                            <el-table-column prop="realityPerson" label="实到人数" width="64"> </el-table-column>
-                        </el-table>
-                    </el-col>
-                </el-col> 
-            </el-row>
-            <el-row class="equipment commonWidth" v-if="equipment.state"><!--设备信息弹框-->
-                <el-col class="top">
-                    <el-col class="title">
-                        <img src="../../../assets/image/arrow.png" alt="" />
-                        <span>设备信息</span>
-                        <img src="../../../assets/image/icon1.png" alt="" class="equipment-icon"/>
-                    </el-col>
-                    <p class="close" @click="close"></p>
-                </el-col>
-                <el-col class="contain">
-                    <el-col class="title"><span class="type">设备名称：</span><span class="data">{{equipment.equipmentMessage.deviceName ? equipment.equipmentMessage.deviceName : "--"}}</span></el-col>
-                    <el-col class="title"><span class="type">设备类型：</span><span class="data">{{equipment.equipmentMessage.deviceType ? equipment.equipmentMessage.deviceType : "--"}}</span></el-col>
-                    <el-col class="title"><span class="type">设备编号：</span><span class="data">{{equipment.equipmentMessage.registerDeviceId ? equipment.equipmentMessage.registerDeviceId : "--"}}</span></el-col>
-                    <el-col class="title"><span class="type">楼层：</span><span class="data">{{equipment.equipmentMessage.floorUuid ? equipment.equipmentMessage.floorUuid : "--"}}</span></el-col>
-                    <el-col class="title"><span class="type">绑定时间：</span><span class="data">{{equipment.equipmentMessage.createTime ? equipment.equipmentMessage.createTime : "--"}}</span></el-col>
-                </el-col>
-            </el-row>
-            <el-row class="xinfa commonWidth" v-if="xinfa.state">><!--信发设备信息弹框-->
-                <el-col class="top">
-                    <el-col class="title">
-                        <img src="../../../assets/image/arrow.png" alt="" />
-                        <span>{{xinfa.name}}</span>
-                    </el-col>
-                    <p class="close" @click="close"></p>
-                </el-col>
-                <el-col class="contain">
-                    <el-col class="module1">
-                        <div class="title">设备工况：</div>
-                        <div class="wrap" >
-                            <span class="span1" :style="xinfa.bgc"></span>
-                            <span class="span2" :style="xinfa.color">{{xinfa.text}}</span>
-                        </div>
-                    </el-col>
-                    <el-col class="module2" v-if="xinfa.sbState">
-                        <div class="title">设备控制：</div>
-                        <div class="wrap">
-                            <el-button type="success" round size="mini" class="open" @click="xinfaSwitch('open')">唤醒</el-button>
-                            <el-button type="danger" round size="mini" class="off" @click="xinfaSwitch('off')">休眠</el-button>
-                        </div>
-                    </el-col>
-                </el-col>
-            </el-row>
-            <el-row class="entranceGuard commonWidth" v-if="entranceGuard.state"><!--门禁设备信息弹框-->
-                <el-col class="top">
-                    <el-col class="title">
-                        <img src="../../../assets/image/arrow.png" alt="" />
-                        <span>{{entranceGuard.entranceGuardMessage.name}}</span>
-                    </el-col>
-                    <p class="close" @click="close"></p>
-                </el-col>
-                <el-col class="contain">
-                    <el-col class="day">今日累计：</el-col>
-                    <div class="wrap">
-                        <div class="section">
-                            <span class="text">进</span>
-                            <span class="num" style="color:#FDC51A">{{entranceGuard.entranceGuardMessage.into || 0}}</span>
-                        </div>
-                        <div class="section">
-                            <span class="text">出</span>
-                            <span class="num" style="color:#1AF3FD">{{entranceGuard.entranceGuardMessage.out || 0}}</span>
-                        </div>
-                    </div>
-                    <p class="tableTitle">最新记录</p>
-                    <el-table 
-                    :show-header="false" 
-                    :row-class-name="tableRowClassName"
-                    :data="entranceGuard.entranceGuardMessage.tableList"   style="width: 100%;height:110px" class="table2 scroll"  v-infinite-scroll="moreMeetingMsg2">
-                        <el-table-column prop="time" label="" ></el-table-column>
-                        <el-table-column prop="type" label="" > </el-table-column>
-                        <el-table-column prop="name" label="" > </el-table-column>
-                    </el-table>
-                </el-col>
-            </el-row>
+            <transition name="fade">
+                <warning v-if="warning" :resInfo="item" @close="itemClose"/><!--告警推送弹框-->
+            </transition>
+            <transition name="fade">
+                <meeting v-if="meeting"  @close="itemClose"/><!--会议信息弹框-->
+            </transition>
+            <transition name="fade">
+                <equipment v-if="equipment" :resInfo="item" @close="itemClose"/><!--设备信息弹框-->
+            </transition>
+            <transition name="fade">
+                <xinfa v-if="xinfa" :resInfo="item" @close="itemClose"/><!--信发设备信息弹框-->
+            </transition>
+            <transition name="fade">
+                <ba v-if="ba" :resInfo="item" @close="itemClose"/><!--ba设备信息弹框-->
+            </transition>
+            <transition name="fade">
+                <entranceGuard v-if="entranceGuard" :resInfo="item" @close="itemClose"/><!--门禁设备信息弹框-->
+            </transition>
+            <transition name="fade">
+                <video v-if="video" :resInfo="item" @close="itemClose"/><!--摄像头信息弹框-->
+            </transition>
+            <transition name="fade">
+                <music v-if="music" :resInfo="item" @close="itemClose"/><!--摄像头信息弹框-->
+            </transition>
+            
             <el-row class="music commonWidth" v-if="music.state"><!--背景音乐弹框-->
                 <el-col class="top">
                     <el-col class="title">
@@ -144,135 +44,43 @@
                     </el-col>
                 </el-col>
             </el-row>
-            <el-row class="video commonWidth" v-if="video.state"><!--视屏监控弹框-->
-                <el-col class="top">
-                    <el-col class="title">
-                        <img src="../../../assets/image/arrow.png" alt="" />
-                        <span>视频监控</span>
-                        <img src="../../../assets/image/icon2.png" alt="" class="equipment-icon"/>
-                    </el-col>
-                    <p class="close" @click="close"></p>
-                </el-col>
-                <el-col class="contain">
-                    <video v-if="video.play"
-                        :id="video.videoId"  
-                        class="video-js vjs-default-skin videoPaly" 
-                        preload="auto" 
-                        autoplay="autoplay" 
-                        :src="video.videoUrl" type="application/x-mpegURL">
-                    </video>
-                    <div class="videoNo" v-if="video.videoNo">
-                        <img src="../../../assets/image/video.png"   alt="">
-                        <p>摄像头设备参数暂未接入</p>
-                    </div>
-                    
-                </el-col>
-                
-            </el-row>
         <!-- </el-dialog> -->
   </div>
 </template>
 <script>
 import axios from 'axios'
-import 'video.js/dist/video-js.css'
-// import videojs from 'video.js'
-import 'videojs-contrib-hls'
-import "@videojs/http-streaming"
-import { meetingPageApi, meetingStatusApi, videoUrl, xinfaToken } from "@/plugins/api"
+import warning from "./warning";
+import meeting from "./meeting";
+import equipment from "./equipment";
+import xinfa from "./xinfa";
+import ba from "./ba";
+import entranceGuard from "./entranceGuard";
+import video from "./video";
+import music from "./music";
 export default {
     props:['resInfo',"close2"],
+    components: {
+        warning,
+        meeting,
+        equipment,
+        xinfa,
+        ba,
+        entranceGuard,
+        video,
+        music,
+    },
     data() {
         return {
+            item:{},
             centerDialogVisible: true,
-            warning:{//推送告警
-                "state":false,
-                "warningMessage":{},
-            },
-            equipment:{//设备信息
-                "state":false,
-                "equipmentMessage":{
-                    "deviceName": undefined,
-                    "deviceType": undefined,
-                    "createTime": undefined,
-                    "registerDeviceId":undefined,
-                },
-            },
-            meeting:{//会议
-                "state":true,
-                "meetingMessage":{ 
-                    "status":undefined,
-                    "meeting":false, //
-                    "order":[], //预约列表数据
-                    "history":[], //历史信息列表数据
-                    "meetingForm1":{ //预约列表form
-                        current:1,
-                        size:10,
-                        startTime:undefined,
-                        endTime:undefined,
-                        roomId:109,
-                    }, 
-                    "meetingForm2":{ //历史信息列表form
-                        current:1,
-                        size:10,
-                        startTime:undefined,
-                        endTime:undefined,
-                        roomId:109,
-                    }, 
-                    "moreHistoryNo":false,
-                    "moreOrderNo":false,
-                },
-
-            },
-            video:{//视频
-                "state":false,
-                "play":false,
-                "videoId":"video" + Date.now(),
-                "videoUrl":false,
-                "videoNo":false,
-                "videoImg":require("../../../assets/image/video.jpg"),
-                "vedioData":[
-                    // {"title": "3层东楼梯","cameraIndexCode":"4db3dfbea6894b02a24673147a64d6c5","path":"",},
-                ]
-            },
-            music:{//音乐
-                "state":false,
-                "musicTableData":[
-                    {"playTime":"2021-11-15 09:00:00","playContent":"时光对面的我"},
-                    {"playTime":"2021-11-15 10:00:00","playContent":"守护我的光"},  
-                ],
-            },
-            xinfa:{//信发
-                "text":false,
-                "state":false,
-                "xinfaMessage":{},
-                "bgc":{
-                    "background":undefined, 
-                },
-                "color":{
-                    "color":undefined
-                },
-                "cMarks":undefined,
-                "sbState":true,
-                "name":undefined,
-            },
-            entranceGuard:{//门禁
-                state:false,
-                entranceGuardMessage:{
-                    "tableList":[
-                        {"time":"09:20", "type":"进", "name":"张三"},
-                        {"time":"09:40", "type":"进", "name":"张三三"},
-                        {"time":"09:20", "type":"进", "name":"张三"},
-                        {"time":"09:40", "type":"进", "name":"张三三"},
-                        {"time":"09:20", "type":"进", "name":"张三"},
-                        {"time":"09:40", "type":"进", "name":"张三三"},
-                        {"time":"09:20", "type":"进", "name":"张三"},
-                        {"time":"09:40", "type":"进", "name":"张三三"},
-                    ],
-                    "Into":30,
-                    "out":20,
-                    "name":"一层大厅1#通道"
-                },
-            },
+            warning:false,
+            meeting:false,
+            equipment:false,
+            xinfa:false,
+            ba:false,
+            entranceGuard:false,
+            video:false,
+            music:false,
             time:[],
         }
     },
@@ -290,306 +98,55 @@ export default {
         this.getData()
     },
     methods: {
-    videoPlay(){
-        this.$nextTick(() => {
-            let list = videojs(this.video.videoId , {
-                events: [],
-                playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
-                autoplay: "true", // 如果true,浏览器准备好时开始回放。
-                controls: true, //  控制条
-                preload: 'auto', // 视频预加载
-                muted: true, //  默认情况下将会消除任何音频。
-                loop: false, // 导致视频一结束就重新开始。
-                language: 'zh-CN',
-                controlBar: {
-                    timeDivider: true,
-                    durationDisplay: true
-                },
-                aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
-                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
-                sources: [{
-                    type: 'application/x-mpegURL',
-                    src: this.videoUrl
-                }],
-                hls: true, // 启用hls？
-                poster: video.videoImg, // 你的封面地址
-                width: document.documentElement.clientWidth,
-                notSupportedMessage: '此视频暂无法播放，请稍后再试'
-            }, function () {
-                this.play() // 自动播放
-            })
-        })
-    },
+
     getData(){
-        this.video.videoId = "video" + Date.now()
+        // 
         if(this.resInfo.warningState){//推送告警
-            this.warning.state = true
-		    this.warning.warningMessage = this.resInfo.warningMessage
-            if(this.timeout){
-                clearTimeout(this.timeout)
-            }
-            this.timeout = setTimeout(() => {
-                this.warning.state = false
-                this.close()
-            }, 3000);
+            this.warning = true
+            this.item = this.resInfo.warningMessage
         }else if(this.resInfo.meetingState){//会议
-            console.log("会议更新")
-            //会议状态
-            meetingStatusApi({"rootName":this.meeting.meetingMessage.meetingForm1.roomId}).then(res =>{
-                console.log(res)
-                // this.meeting.state = res.data
-            })
-            //会议列表、历史会议
-            var myDate = new Date();
-            let Year = myDate.getFullYear();
-            let Month = myDate.getMonth() + 1;
-            let Day= myDate.getDate()
-            if(Month<10){
-                Month = '0' + Month
-            }else{
-                Month = Month
-            }
-            if(Day<10){
-                Day = '0' + Day
-            }else{
-                Day = Day
-            }
-            this.meeting.meetingMessage.meetingForm1.current = 1
-            this.meeting.meetingMessage.meetingForm2.current = 1
-            this.meeting.meetingMessage.meetingForm1.startTime = Year + '-' + Month + '-' + Day + " 00:00:00"
-            this.meeting.meetingMessage.meetingForm1.endTime = Year + '-' + Month + '-' + Day + " 23:59:59"
-            meetingPageApi(this.meeting.meetingMessage.meetingForm1).then(res =>{
-                this.meeting.meetingMessage.meeting = true
-                this.meeting.meetingMessage.order = res.data.records
-            })
-            meetingPageApi(this.meeting.meetingMessage.meetingForm2).then(res =>{
-                this.meeting.meetingMessage.history = res.data.records
-            })
+            this.meeting = true
         }else if(this.resInfo.equipmentState){//设备
-            console.log("点位设备")
-            this.equipment.state = true
-            this.equipment.equipmentMessage = this.resInfo.equipmentMessage
+            this.equipment = true
+            this.item = this.resInfo.equipmentMessage
         }else if(this.resInfo.videoState){//视频
-            if(this.resInfo.videoMessage){
-                videoUrl({"cameraIndexCode":this.resInfo.videoMessage.registerDeviceId,"protocol":"hls"}).then(res =>{ // 点位摄像头视频
-                    console.log("摄像头绑定")
-                    if(res.data != null){
-                        this.video.videoUrl = res.data.url
-                        this.video.state = true
-                        this.video.play = true
-                        this.videoNo = false
-                        this.videoPlay()
-                    }
-                })
-            }else{
-                console.log("摄像头未绑定")
-                this.video.state = true
-                this.video.videoNo = true
-                this.video.play = false
-            }
+            this.video = true
+            this.item = this.resInfo.videoMessage
+            
         }else if(this.resInfo.xinfaState){//信发
-            console.log(this.resInfo,this.resInfo.xinfaMessage.registerDeviceId)
-            this.xinfa.cMarks = this.resInfo.xinfaMessage.registerDeviceI
-            let cMark = this.resInfo.xinfaMessage.registerDeviceId
-            xinfaToken().then(res =>{ //信发设备
-				console.log("信发设备")
-				let access_token = res.data.authToken
-				let secret = res.data.secret
-				let acces_secret_md5 = this.$md5(secret)
-				let timestamp = Date.parse(new Date()) / 1000;
-				let sign = this.$md5(access_token + acces_secret_md5 + timestamp);
-				axios({
-					method: 'get',
-					url: 'http://10.108.35.105:8780/adc/sdk/dev_get_devstatus',
-					params: {
-						access_token: access_token,
-						timestamp: timestamp,
-						sign:sign,
-						cMark:cMark
-					},
-					timeout: 3000,
-				}).then(res =>{
-					console.log(res)
-					this.xinfa.state = true
-                    if(res.data.result == "failed"){
-                        this.xinfa.text = res.data.retInfo
-                        this.xinfa.bgc.background = "#E22323"
-						this.xinfa.color.color = "#E22323"
-                        this.xinfa.name = this.resInfo.xinfaMessage.deviceName + this.resInfo.xinfaMessage.deviceType
-                    }else if(res.data.online == 0){
-						this.xinfa.text = "不在线"
-						this.xinfa.bgc.background = "#E22323"
-						this.xinfa.color.color = "#E22323"
-                        this.xinfa.sbState = false
-                        this.xinfa.name = this.resInfo.xinfaMessage.deviceName + this.resInfo.xinfaMessage.deviceType
-					}else{
-						this.xinfa.text = "在线"
-						this.xinfa.bgc.background = "#46C00B"
-						this.xinfa.color.color = "#46C00B"
-                        this.xinfa.name = this.resInfo.xinfaMessage.deviceName + this.resInfo.xinfaMessage.deviceType
-					}
-				}).catch(err =>{
-                    this.xinfa.text = "不在线"
-					this.xinfa.bgc.background = "#E22323"
-					this.xinfa.color.color = "#E22323"
-                    this.xinfa.sbState = false
-                    this.xinfa.sbState = false
-                    this.xinfa.name = this.resInfo.xinfaMessage.deviceName + this.resInfo.xinfaMessage.deviceType
+            this.xinfa = true
+            this.item = this.resInfo.xinfaMessage
+        }else if(this.resInfo.baState){//ba
+            this.ba = true
+            this.item = this.resInfo.baMessage
+        }else if(this.resInfo.entranceGuardState){//门禁
+            this.entranceGuardState = true
+            this.item = this.resInfo.entranceGuardState
+        }else{
 
-                });
-			})
-            
-        }
-    },
-    changeDate(){
-        this.meeting.meetingMessage.meetingForm2.current = 1
-		this.dataChange()
-        meetingPageApi(this.meeting.meetingMessage.meetingForm2).then(res =>{
-            this.meeting.meetingMessage.history = res.data.records
-        })
-    },
-    dataChange(){//时间转化
-        if(this.time.length>0){
-            var myDate1 = this.time[0];
-            let Year1 = myDate1.getFullYear();
-            let Month1 = myDate1.getMonth() + 1;
-            let Day1= myDate1.getDate()
-            if(Month1<10){
-            Month1 = '0' + Month1
-            }else{
-            Month1 = Month1
-            }
-            if(Day1<10){
-            Day1 = '0' + Day1
-            }else{
-            Day1 = Day1
-            }
-            this.meeting.meetingMessage.meetingForm2.startTime = Year1 + '-' + Month1 + '-' + Day1 + " 00:00:00"
-            var myDate2 = this.time[1];
-            let Year2 = myDate2.getFullYear();
-            let Month2 = myDate2.getMonth() + 1;
-            let Day2= myDate2.getDate()
-            
-            if(Month2<10){
-            Month2 = '0' + Month2
-            }else{
-            Month2 = Month2
-            }
-            if(Day2<10){
-            Day2 = '0' + Day2
-            }else{
-            Day2 = Day2
-            }
-            this.meeting.meetingMessage.meetingForm2.endTime = Year2 + '-' + Month2 + '-' + Day2 + " 23:59:59"
         }
-	},
-    moremeetingMsg1() { //预约列表滑动加载
-		console.log('触发预约列表滑动加载事件')
-		this.meeting.meetingMessage.meetingForm1.current ++
-		meetingPageApi(this.meeting.meetingMessage.meetingForm1).then(res =>{
-			if(res.data.records.length>0){
-                let data = res.data.records
-                for(let i =0;i<data.length; i++){
-                    this.meeting.meetingMessage.order.push(data[i])
-                }
-			}else{
-				this.meeting.meetingMessage.meetingForm1.current --
-			}
-		})
-	},
-    moremeetingMsg2() { //历史会议信息列表滑动加载
-		console.log('触发历史会议信息滑动加载事件')
-        this.dataChange()
-		this.meeting.meetingMessage.meetingForm2.current ++
-		meetingPageApi(this.meeting.meetingMessage.meetingForm2).then(res =>{
-			if(res.data.records.length>0){
-                let data = res.data.records
-                for(let i =0;i<data.length; i++){
-                    this.meeting.meetingMessage.history.push(data[i])
-                }
-			}else{
-				this.meeting.meetingMessage.meetingForm2.current --
-			}
-		})
-	},
-    xinfaSwitch(e){
-            xinfaToken().then(res =>{ //信发设备
-				console.log("信发设备")
-				let access_token = res.data.authToken
-				let secret = res.data.secret
-				let acces_secret_md5 = this.$md5(secret)
-				let timestamp = Date.parse(new Date()) / 1000;
-				let sign = this.$md5(access_token + acces_secret_md5 + timestamp);
-                if(e == "open"){
-                    var sCmd ={
-                        paramType:17,
-                        onoff:1,//1:立即唤醒；0：立即休眠
-                        subcmd:'ctrl_lcd_onoff_ontime'
-                    }
-                }else{
-                    var sCmd ={
-                        paramType:17,
-                        onoff:0,//1:立即唤醒；0：立即休眠
-                        subcmd:'ctrl_lcd_onoff_ontime'
-                    }
-                }
-                
-                axios({
-					method: 'get',
-					url: 'http://10.108.35.105:8780/adc/sdk/sendClientParams',
-					params: {
-						access_token: access_token,
-						timestamp: timestamp,
-						sign:sign,
-                        paramType:"17",
-                        cMark:this.xinfa.cMarks,
-                        params:JSON.stringify(sCmd),
-                        retry:"0"
-					},
-					timeout: 3000,
-				}).then(res =>{
-					console.log(res)
-                    if(res.data.result =="success"){
-                        if(e == "open"){
-                            this.$message({
-                                showClose: true,
-                                message: '设备唤醒成功',
-                                type: 'success'
-                            });
-                        }else{
-                            this.$message({
-                                showClose: true,
-                                message: '设备已进入休眠状态',
-                                type: 'success'
-                            });
-                        }
-                        
-                    }
-				})
-            })
-       
     },
-	close(){
-        console.log(11)
-		this.warning.state = false
-		this.music.state = false
-		this.meeting.meetingMessage.meeting = false
-        this.equipment.state = false
-        this.video.state = false
-        this.video.play = false
-        this.video.videoId = false
-        this.video.videoNo = false
-        this.xinfa.state = false
-        this.entranceGuard.state = false
+    itemClose(){
+        this.warning = false
+        this.meeting = false
+        this.equipment = false
+        this.xinfa = false
+        this.ba = false
+        this.entranceGuard = false
+        this.video = false
+        this.music = false
+        this.item = {}
         this.$emit("close",false)
-	},
-    tableRowClassName({row, rowIndex}) {
-        if (rowIndex%2=== 1)  //=>这里可以改成 rowIndex%2=== 1，后面直接else即可达到隔行变色效果。
-        { 
-          return 'success-row';
-        }
-        return '';
-    }
+    },
+    
+    
+    // tableRowClassName({row, rowIndex}) {
+    //     if (rowIndex%2=== 1)  //=>这里可以改成 rowIndex%2=== 1，后面直接else即可达到隔行变色效果。
+    //     { 
+    //       return 'success-row';
+    //     }
+    //     return '';
+    // }
   },
 };
 </script>
@@ -715,7 +272,7 @@ export default {
     .meeting .title{
         font-size: 12px;
     }
-    .equipment{
+    .equipment,.ba{
         .contain{
             padding: 10px 10px 25px;
             overflow: hidden;
@@ -735,8 +292,15 @@ export default {
                     vertical-align: top;
                 }
             }
+            
         }
     }
+    .ba {
+       .contain{
+           height:300px;
+           overflow-y:scroll;
+       } 
+    }
     .video{
         .contain{
             overflow: hidden;
@@ -764,6 +328,12 @@ export default {
     }
     .xinfa{
         width:290px !important;
+        .top{
+           
+            .title{
+                width:80% !important;
+            }
+        }
         .contain{
             height:140px;
             padding:35px 10px;
@@ -837,9 +407,11 @@ export default {
             }
         }
     }
+    
     .entranceGuard{
+        width:85%;
         .contain{
-            height:300px;
+            height:350px;
             padding:15px 10px;
             overflow: hidden;
             .day{
@@ -863,13 +435,13 @@ export default {
                     .text{
                         font-size: 16px;
                         color:#fff;
-                        margin-left:20px;
+                        margin-left:40px;
                         vertical-align: middle;
 
                     }
                     .num{
                         font-size: 25px;
-                        margin-left:50px;
+                        margin-left:100px;
                         vertical-align: middle;
                     }
                 }
@@ -894,7 +466,6 @@ export default {
                     tr{
                         font-size: 30px !important;
                     }
-                   
                 }
                 th{
                     height:30px;
@@ -932,24 +503,24 @@ export default {
     overflow-y: scroll;
     overflow-x: hidden;
 }
-::-webkit-scrollbar {
-  /*滚动条整体样式*/
-  width : 0px;  /*高宽分别对应横竖滚动条的尺寸*/
-  height: 1px;
-  overflow: hidden;
-}
-::-webkit-scrollbar-thumb {
-  /*滚动条里面小方块*/
-  border-radius: 1px;
-  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
-  background   : rgba(28,82,216,1);
-}
-::-webkit-scrollbar-track {
-  /*滚动条里面轨道*/
-  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
-  border-radius: 1px;
-  background   : #ededed;
-}
+// ::-webkit-scrollbar {
+//   /*滚动条整体样式*/
+//   width : 0px;  /*高宽分别对应横竖滚动条的尺寸*/
+//   height: 1px;
+//   overflow: hidden;
+// }
+// ::-webkit-scrollbar-thumb {
+//   /*滚动条里面小方块*/
+//   border-radius: 1px;
+//   box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+//   background   : rgba(28,82,216,1);
+// }
+// ::-webkit-scrollbar-track {
+//   /*滚动条里面轨道*/
+//   box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+//   border-radius: 1px;
+//   background   : #ededed;
+// }
 
 // 对话框
 /deep/ .el-dialog{
@@ -1047,4 +618,29 @@ export default {
 /deep/ .el-table tbody tr:hover>td { 
     background-color:transparent
 }
+
+::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width : 0px;  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 0px;
+  }
+::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 0px;
+  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background   : #535353;
+  }
+ ::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 0px;
+  background   : #ededed;
+  }
+
+::-webkit-scrollbar {
+	    display: none
+	  }
+      /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+  display: none;
+}
 </style>

src/components/SD-school/Spring-frame/meeting.vue

@@ -0,0 +1,569 @@
+<template>
+    <div>
+        <el-row class="meeting commonWidth" v-if="state"><!--会议信息弹框-->
+            <el-col class="top">
+                <el-col class="title">
+                    <img src="../../../assets/image/arrow.png" alt="" />
+                    109会议室
+                </el-col>
+                <el-col class="status" v-if="Message.status">
+                    <div v-if="!Message.sy">
+                        <span class="spanY span1"></span> <span class="span2">空闲中</span>
+                    </div>
+                    <div v-if="Message.sy">
+                        <span class="spanY span3"></span> <span class="span4">使用中</span>
+                    </div>
+                </el-col>
+                <p class="close" @click="close"></p>
+            </el-col>
+            <el-col class="contain">
+                <el-col class="section1 section" >
+                    <el-col class="title">会议预约列表</el-col>
+                    <!-- v-infinite-scroll="moremeetingMsg1" -->
+                    <el-table :data="Message.order" border style="width: 100%" height="104" class="scroll"  id="table1">
+                        <el-table-column prop="start_time,end_time" label="预约使用日期" width="240">
+                            <template  slot-scope="scope">
+                                {{scope.row.start_time}} ~ {{scope.row.end_time}}
+                            </template>  
+                        </el-table-column>
+                        <el-table-column prop="title" label="会议名称" width="126"></el-table-column>
+                        <el-table-column prop="chair" label="预约人" width="64"> </el-table-column>
+                    </el-table>
+                </el-col>
+                <el-col class="section2 section">
+                    <el-col class="title" style="width:20%">历史会议信息</el-col>
+                    <el-date-picker
+                        v-model="time"
+                        type="datetimerange"
+                        range-separator="~"
+                        start-placeholder="开始时间"
+                        end-placeholder="结束时间"
+                        @change="changeDate"
+                        >
+                    </el-date-picker>
+                    <el-table :data="Message.history" border style="width: 100%" height="134" class="scroll"  >
+                        <el-table-column prop="title" label="会议名称" width="75"></el-table-column>
+                        <el-table-column prop="start_time,end_time" label="会议时间" >
+                            <template  slot-scope="scope">
+                                {{scope.row.start_time}} ~ {{scope.row.end_time}}
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="status" label="会议状态" width="75"> 
+                            <template  slot-scope="scope">
+                                {{scope.row.status == "0" ? "未发布" : scope.row.status == "1" ? "已发布" : scope.row.status == "2" ? "进行中" : scope.row.status == "3" ? "已完成" : scope.row.status == "4" ? "归档" : ""}}
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="useStorageSpaceTotal" label="使用空间（Mb）" width="120"> </el-table-column>
+                    </el-table>
+                </el-col>
+            </el-col> 
+        </el-row>
+  </div>
+</template>
+<script>
+import axios from 'axios'
+export default {
+    data() {
+        return {
+            state:false,
+            Message:{
+                "order":[
+
+                ], //预约列表数据
+                "history":[], //历史信息列表数据
+                "meetingForm1":{ //预约列表form
+                    page:1,
+                    size:10,
+                    start_time:undefined,
+                    end_time:undefined,
+                    // roomId:109,
+                }, 
+                "meetingForm2":{ //历史信息列表form
+                    page:1,
+                    size:10,
+                    start_time:undefined,
+                    end_time:undefined,
+                    // roomId:109,
+                },
+                status:false,
+                sy:false,
+                "moreHistoryNo":false,
+                "moreOrderNo":false,
+            },
+            time:[]
+        }
+    },
+    mounted(){
+        this.getData()
+    },
+    methods: {
+        getData(){//获取数据赋值
+            this.state = true
+            // meetingStatusApi({"rootName":this.Message.meetingForm1.roomId}).then(res =>{
+            //     console.log(res)
+            // })
+            //会议列表、历史会议
+            var myDate = new Date();
+            let Year = myDate.getFullYear();
+            let Month = myDate.getMonth() + 1;
+            let Day= myDate.getDate()
+            let s = myDate.getHours(); //获取系统时，
+            let f = myDate.getMinutes(); //分
+            let m = myDate.getSeconds(); //秒
+            if(Month<10){
+                Month = '0' + Month
+            }
+            if(Day<10){
+                Day = '0' + Day
+            }
+            if(s<10){
+                s = '0' + s
+            }
+            if(f<10){
+                f = '0' + f
+            }
+            if(m<10){
+                m = '0' + m
+            }
+            this.Message.meetingForm1.page = 1
+            this.Message.meetingForm2.page = 1
+            this.Message.meetingForm1.start_time = Year + '-' + Month + '-' + Day + " 00:00"
+            this.Message.meetingForm1.end_time = Year + '-' + Month + '-' + Day + " " + s + ":" + f
+            this.Message.meetingForm2.start_time = Year + '-' + Month + '-' + Day + " " + s + ":" + f 
+            this.Message.meetingForm2.end_time = Year + '-' + Month + '-' + Day + " 23:59"
+            // let list = [
+            //     {"start_time":"2021-12-30 08:00","end_time":"2021-12-30 09:00","title":"测试数据测试数据测试数据测试数据测试数据","chair":"王某某"},
+            //     {"start_time":"2021-12-30 09:30","end_time":"2021-12-30 10:30","title":"测试数据测试数据测试数据测试数据测试数据","chair":"王某某"},
+            //     {"start_time":"2021-12-30 11:00","end_time":"2021-12-30 12:00","title":"测试数据测试数据测试数据测试数据测试数据","chair":"王某某"},
+            //     {"start_time":"2021-12-30 13:00","end_time":"2021-12-30 15:00","title":"测试数据测试数据测试数据测试数据测试数据","chair":"王某某"},
+            //     {"start_time":"2021-12-30 16:00","end_time":"2021-12-30 18:00","title":"测试数据测试数据测试数据测试数据测试数据","chair":"王某某"},
+            // ]
+            // if(list.length>0){
+            //     if(this.timeStamp(list[0].start_time) <= this.timeStamp(this.Message.meetingForm1.end_time) && this.timeStamp(this.Message.meetingForm1.end_time)<= this.timeStamp(list[0].end_time)){
+            //         this.Message.sy = true
+            //     }else{
+            //         this.Message.sy = false
+            //     }
+            //     this.Message.status = true
+            // }
+            // this.Message.order = list
+            axios({
+                method: 'get',
+                url: 'http://10.108.52.86/v1/meeting',
+                params: {
+                    page: this.Message.meetingForm1.page,
+                    size: this.Message.meetingForm1.size,
+                    status:1,
+                    start_time:this.Message.meetingForm1.start_time,
+                    end_time:this.Message.meetingForm1.end_time,
+                },
+                timeout: 3000,
+            }).then(res =>{
+                console.log(res)
+                 if(res.data.data.list.length>0){
+                    if(this.timeStamp(list[0].start_time) <= this.timeStamp(this.Message.meetingForm1.end_time) && this.timeStamp(this.Message.meetingForm1.end_time)<= this.timeStamp(list[0].end_time)){
+                        this.Message.sy = true
+                    }else{
+                        this.Message.sy = false
+                    }
+                }else{
+                    this.Message.sy = false
+                }
+                this.Message.status = true
+                this.Message.order = res.data.data.list
+                axios({
+                    method: 'get',
+                    url: 'http://10.108.52.86/v1/meeting',
+                    params: {
+                        page: this.Message.meetingForm2.page,
+                        size: this.Message.meetingForm2.size,
+                        start_time:this.Message.meetingForm2.start_time,
+                        end_time:this.Message.meetingForm2.end_time,
+                    },
+                    timeout: 3000,
+                }).then(res =>{
+                    console.log(res)
+                    this.Message.history = res.data.list
+                }).catch(err =>{
+                })
+            })
+        },
+        timeStamp(time){ //年月日时分秒转时间戳
+            return Date.parse(new Date(time))/1000
+        },
+        changeDate(){//时间选择
+            this.Message.meetingForm2.current = 1
+            this.dataChange()
+            axios({
+            method: 'get',
+                url: 'http://10.108.52.86/v1/meeting',
+                params: {
+                    page: this.Message.meetingForm2.page,
+                    size: this.Message.meetingForm2.size,
+                    start_time:this.Message.meetingForm2.start_time,
+                    end_time:this.Message.meetingForm2.end_time,
+                },
+                timeout: 3000,
+            }).then(res =>{
+                console.log(res)
+                this.Message.history = res.data.data.list
+            })
+        },
+        dataChange(){//时间转化
+            if(this.time.length>0){
+                var myDate1 = this.time[0];
+                let Year1 = myDate1.getFullYear();
+                let Month1 = myDate1.getMonth() + 1;
+                let Day1= myDate1.getDate()
+                let s1 = myDate1.getHours(); //获取系统时，
+                let f1 = myDate1.getMinutes(); //分
+                if(Month1<10){
+                    Month1 = '0' + Month1
+                }
+                if(Day1<10){
+                    Day1 = '0' + Day1
+                }
+                if(s1<10){
+                    s1 = '0' + s1
+                }
+                if(f1<10){
+                    f1 = '0' + f1
+                }
+                this.Message.meetingForm2.start_time = Year1 + '-' + Month1 + '-' + Day1 + " " + s1 + ":" + f1
+                var myDate2 = this.time[1];
+                let Year2 = myDate2.getFullYear();
+                let Month2 = myDate2.getMonth() + 1;
+                let Day2= myDate2.getDate()
+                let s2 = myDate2.getHours(); //获取系统时，
+                let f2 = myDate2.getMinutes(); //分
+                if(Month2<10){
+                    Month2 = '0' + Month2
+                }
+                if(Day2<10){
+                    Day2 = '0' + Day2
+                }
+                if(s2<10){
+                    s2 = '0' + s2
+                }
+                if(f2<10){
+                    f2 = '0' + f2
+                }
+                this.Message.meetingForm2.end_time = Year2 + '-' + Month2 + '-' + Day2 + " " + s2 + ":" + f2
+                // console.log(this.Message.meetingForm2.start_time,this.Message.meetingForm2.end_time)
+            }
+        },
+        moremeetingMsg1() { //预约列表滑动加载
+            console.log('触发预约列表滑动加载事件')
+            this.Message.meetingForm1.page ++
+            // meetingPageApi(this.Message.meetingForm1).then(res =>{
+            //     if(res.data.records.length>0){
+            //         let data = res.data.records
+            //         for(let i =0;i<data.length; i++){
+            //             this.Message.order.push(data[i])
+            //         }
+            //     }else{
+            //         this.Message.meetingForm1.page --
+            //     }
+            // })
+        },
+        moremeetingMsg2() { //历史会议信息列表滑动加载
+            console.log('触发历史会议信息滑动加载事件')
+            this.dataChange()
+            this.Message.meetingForm2.current ++
+            meetingPageApi(this.Message.meetingForm2).then(res =>{
+                if(res.data.records.length>0){
+                    let data = res.data.records
+                    for(let i =0;i<data.length; i++){
+                        this.Message.history.push(data[i])
+                    }
+                }else{
+                    this.Message.meetingForm2.current --
+                }
+            })
+        },
+        close(){//关闭
+            this.state = false
+            this.$emit("close",false)
+        },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+    .commonWidth{
+        width:450px;
+        display: block;
+        margin:0 auto; 
+        .top{
+            height: 39px;
+            line-height: 35px;
+            background: rgba(28,82,216,.5);
+            border: 1px solid #1C52D8;
+            border-bottom:none;
+            border-radius: 4px 4px  0 0;
+            .title{
+                width:50%;
+                font-size: 16px;
+                margin-left:16px;
+                vertical-align: middle;
+                display: inline-block;
+                color:#38E7EE;
+                img{
+                    margin-right:4px;
+                    vertical-align: middle;
+                }
+                span{
+                    margin-left:16px;
+                    vertical-align: middle;
+                }
+                .equipment-icon{
+                    width:16px;
+                    position: absolute;
+                    top:16px;
+                    right:45%;
+                }
+            }
+            .status{
+                 vertical-align: middle;
+                 width:30%;
+                 display: inline-block;
+                div{
+                    .spanY{
+                        width:14px;
+                        height:14px;
+                        border-radius: 50%;
+                        display: inline-block;
+                        vertical-align: middle;
+                        margin-right:6px;
+                    }
+                    .span1{
+                        background-color: #2FEB11;
+                    }
+                    .span2{
+                         margin-right:6px;
+                        color:#2FEB11;
+                    }
+                    .span3{
+                        background-color: red;
+                    }
+                    .span4{
+                        color:red;
+                    }
+                }
+            }
+            .close{
+                width:16px;
+                height:16px;
+                background: url('../../../assets/image/close.png') ;
+                float:right;
+                margin:10px 8px 0 0;
+            }
+        } 
+        .contain{
+            background-color:rgba(0,22,103,.85);
+            border-radius: 0 0 4px 4px;
+        }
+    }
+    .meeting{
+        height:300px;
+        .contain{
+            height:350px;
+            overflow: hidden;
+            .section{
+                padding:10px;
+                font-size: 14px;
+                font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
+                font-weight: bold;
+                text-align: left;
+                color: #ffffff;
+                line-height: 30px;
+                
+            }
+            .title{
+                margin-bottom:4px;
+            }
+            .section2 .title{
+                width:auto;
+                display: inline-block;
+                margin-right:10px;
+                vertical-align: middle;
+                // margin-bottom:2px;
+            }
+        }
+        
+        /deep/ .el-table tr, /deep/ .el-table th, /deep/ .el-table td{
+            background-color: transparent;//这是设置透明背景色
+            font-size: 10px;
+            padding:0;
+        }
+    }
+    .meeting .title{
+        font-size: 12px;
+    }
+    
+
+
+/deep/ .el-table__row>td {
+//   border: none;
+}
+
+/deep/ .el-table::before {
+  height: 0px;
+}
+.scroll{
+    overflow-y: scroll;
+    overflow-x: hidden;
+}
+// ::-webkit-scrollbar {
+//   /*滚动条整体样式*/
+//   width : 0px;  /*高宽分别对应横竖滚动条的尺寸*/
+//   height: 1px;
+//   overflow: hidden;
+// }
+// ::-webkit-scrollbar-thumb {
+//   /*滚动条里面小方块*/
+//   border-radius: 1px;
+//   box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+//   background   : rgba(28,82,216,1);
+// }
+// ::-webkit-scrollbar-track {
+//   /*滚动条里面轨道*/
+//   box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+//   border-radius: 1px;
+//   background   : #ededed;
+// }
+
+// 对话框
+/deep/ .el-dialog{
+    background-color: transparent;
+    top:15%;
+}
+/deep/ .el-dialog__header{
+    padding:0;
+    padding-bottom:0;
+}
+/deep/ .el-dialog__body{
+    padding:0;
+}
+/deep/ .el-dialog__headerbtn .el-dialog__close{
+    // display: none;
+}
+
+
+// table
+/deep/ .el-table--group, /deep/ .el-table--border{
+    // border:none;
+}
+/deep/ .el-table thead{
+    color:#fff;
+    // background-color: rgba(28,82,216,.2);
+}
+
+/deep/ .el-table--border th{
+    border:1px solid #fff;
+    border-bottom:none;
+}
+
+/deep/ .el-table--border td{
+    border:1px solid #fff
+}
+ /deep/  .el-table, .el-table__expanded-cell {
+    background-color: transparent;//这是设置透明背景色
+    color:#fff;
+    border-collapse: collapse;
+    
+  }
+
+/deep/ .el-table__empty-text{
+    color:#fff;
+    font-size: 10px;
+    letter-spacing: 2px;
+}
+
+
+// data
+/deep/ .el-date-editor{
+    border:1px solid #ccc;
+    background-color: transparent;
+    height:25px;
+    line-height: 20px;
+    padding:0;
+    margin-top:2px;
+    box-sizing: border-box;
+}
+/deep/ .el-range-input, /deep/ .el-input__icon el-range__close-icon{
+    background-color: transparent;
+    color:#fff;
+    font-size: 12px;
+    text-align: top;
+    padding:0;
+    position: relative;
+    top:-4px
+}
+/deep/ .el-range__icon{
+    display: none;
+}
+/deep/ .el-date-editor--datetimerange.el-input__inner{
+    width:77%;
+    
+    display: inline-block;
+    
+}
+/deep/ ::placeholder{
+    color:#fff
+}
+/deep/ .el-range-separator{
+    color:#fff;
+    position: relative;
+    top:-4px
+}
+/deep/table,/deep/ tr,/deep/ td{
+    border-collapse: collapse !important;
+}
+/deep/ tr:hover, /deep/ td:hover, /deep/ table:hover{
+    background-color: none !important;
+}
+/deep/ .el-table__empty-block{
+    border:1px solid #fff;
+}
+/deep/ .el-table tbody tr:hover>td { 
+    background-color:transparent
+}
+
+::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width : 0px;  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 0px;
+  }
+::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 0px;
+  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background   : #535353;
+  }
+ ::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 0px;
+  background   : #ededed;
+  }
+
+::-webkit-scrollbar {
+    display: none
+}
+/deep/.el-table--scrollable-y ::-webkit-scrollbar {
+    display: none;
+}
+/deep/ .el-table{
+    border-bottom:1px solid #fff !important;
+}
+/deep/ .el-table thead{
+    border-bottom: 1px solid #fff
+}
+/deep/ .el-table__body-wrapper{
+    margin-top:-1px;
+}
+/deep/.el-table--border:last-child td{
+    border-bottom:none !important;
+}
+</style>

src/components/SD-school/Spring-frame/music.vue

@@ -0,0 +1,543 @@
+<template>
+    <div>
+        <el-row class="music commonWidth" v-if="music.state"><!--背景音乐弹框-->
+            <el-col class="top">
+                <el-col class="title">
+                    <img src="../../../assets/image/arrow.png" alt="" />
+                    <span class="title">背景音乐</span>
+                </el-col>
+                <p class="close" @click="close" ></p>
+                <!-- <p class="close" @click="centerDialogVisible = false" data="22"></p> -->
+            </el-col>
+            <el-col class="contain scroll" >
+                <el-col class="section1 section">
+                    <el-table :data="music.musicTableData" border style="width: 100%;" >
+                        <el-table-column prop="playTime" label="播放时间" width="220"></el-table-column>
+                        <el-table-column prop="playContent" label="播放内容" ></el-table-column>
+                    </el-table>
+                </el-col>
+            </el-col>
+        </el-row>
+  </div>
+</template>
+<script>
+export default {
+    props:['resInfo'],
+    data() {
+        return {
+            state:false,
+            Message:{
+                "musicTableData":[
+                    {"playTime":"2021-11-15 09:00:00","playContent":"时光对面的我"},
+                    {"playTime":"2021-11-15 10:00:00","playContent":"守护我的光"},  
+                ],
+            },
+        }
+    },
+    mounted(){
+        this.getData()
+    },
+    methods: {
+        getData(){//获取数据赋值
+            
+        },
+
+        close(){//关闭
+            this.state = false
+            this.$emit("close",false)
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+/deep/ .el-table .success-row {
+    background: rgba(22, 55, 163, 0.5) !important;//这里可以修改颜色
+}
+.Spring-frame {
+    position: absolute;
+	width:50%;
+	top:20%;
+	left:25%;
+	margin:0 auto;
+    .warning{
+        width:389px;
+        height:126px;
+        margin:0 auto;
+        background: url('../../../assets/image/warning-bg.png') ;
+        background-size: 389px 126px;
+        .contain{
+            width:58%;
+            margin:6% 0 0 35%;
+            line-height: 22px;
+            color:#fff;
+            font-size: 12px;
+            .title{
+                font-size: 12px;
+            }
+            .content{
+                margin-top:0px;
+            }
+        }
+		// .close{
+		//     width:16px;
+		//     height:16px;
+		//     background: url('../../../assets/image/close2.png') no-repeat;
+		//     position: absolute;
+		// 	top:8px;right:6px;
+		// }
+    }
+    .commonWidth{
+        width:450px;
+        display: block;
+        margin:0 auto; 
+        .top{
+            height: 39px;
+            line-height: 35px;
+            background: rgba(28,82,216,.5);
+            border: 1px solid #1C52D8;
+            border-bottom:none;
+            border-radius: 4px 4px  0 0;
+            .title{
+                width:50%;
+                font-size: 16px;
+                margin-left:16px;
+                vertical-align: middle;
+                color:#38E7EE;
+                vertical-align: middle;
+                img{
+                    margin-right:4px;
+                    vertical-align: middle;
+                }
+                span{
+                    margin-left:16px;
+                    vertical-align: middle;
+                }
+                .equipment-icon{
+                    width:16px;
+                    position: absolute;
+                    top:16px;
+                    right:45%;
+                }
+            }
+            .close{
+                width:16px;
+                height:16px;
+                background: url('../../../assets/image/close.png') ;
+                float:right;
+                margin:12px 6px 0 0;
+            }
+        } 
+        .contain{
+            background-color:rgba(0,22,103,.85);
+            border-radius: 0 0 4px 4px;
+        }
+    }
+    .meeting,.music{
+        height:300px;
+        .contain{
+            height:300px;
+            overflow: hidden;
+            .section{
+                padding:10px;
+                font-size: 14px;
+                font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
+                font-weight: bold;
+                text-align: left;
+                color: #ffffff;
+                line-height: 30px;
+                
+            }
+            .title{
+                margin-bottom:4px;
+            }
+            .section2 .title{
+                width:auto;
+                display: inline-block;
+                margin-right:10px;
+                vertical-align: middle;
+                // margin-bottom:2px;
+            }
+        }
+        
+        /deep/ .el-table tr, /deep/ .el-table th, /deep/ .el-table td{
+            background-color: transparent;//这是设置透明背景色
+            font-size: 10px;
+            padding:0;
+        }
+    }
+    .meeting .title{
+        font-size: 12px;
+    }
+    .equipment,.ba{
+        .contain{
+            padding: 10px 10px 25px;
+            overflow: hidden;
+            .title{
+                margin-top:10px;
+                font-size: 14px;
+                letter-spacing: 1px;
+                .type{
+                    width:25%;
+                    text-align: right;
+                    display: inline-block;
+                }
+                .data{
+                    width:75%;
+                    text-align: left;
+                    display: inline-block;
+                    vertical-align: top;
+                }
+            }
+            
+        }
+    }
+    .ba {
+       .contain{
+           height:300px;
+           overflow-y:scroll;
+       } 
+    }
+    .video{
+        .contain{
+            overflow: hidden;
+            .videoPaly{
+                width:100%;
+            }
+            .videoNo{
+                margin: 10% auto;
+                img{
+                    height:97px;
+                    width:102px;
+                    display: block;
+                    margin: 0 auto;
+                }
+                p{
+                    text-align: center;
+                    font-size: 12px;
+                    color:#fff;
+                    margin-top:3%;
+                }
+                
+            }
+        }
+        
+    }
+    .xinfa{
+        width:290px !important;
+        .top{
+           
+            .title{
+                width:80% !important;
+            }
+        }
+        .contain{
+            height:140px;
+            padding:35px 10px;
+            overflow: hidden;
+            .module1{
+                .title{
+                    font-size: 14px;
+                    color:#fff;
+                    text-align: left;
+                    display: inline-block;
+                    vertical-align: middle;
+                }
+                .wrap{
+                    vertical-align: middle;
+                    display: inline-block;
+                    .span1{
+                        width:12px;
+                        height:12px;
+                        border-radius: 50%;
+                        background-color: red;
+                        display: inline-block;
+                        vertical-align: middle;
+                    }
+                    .span2{
+                        font-size: 14px;
+                        margin-left:5px;
+                        display: inline-block;
+                        vertical-align: middle;
+                    }
+                }
+
+            }
+            .module2{
+                margin-top:30px;
+                .title{
+                    font-size: 14px;
+                    color:#fff;
+                    text-align: left;
+                    display: inline-block;
+                    vertical-align: middle;
+                }
+                .wrap{
+                    .open,.off{
+                        width:60px;
+                        height:26px;
+                    }
+                    .off{
+                        margin-left:25px;
+                    }
+                    vertical-align: middle;
+                    display: inline-block;
+                    
+                }
+
+            }
+            .videoNo{
+                margin: 10% auto;
+                img{
+                    height:97px;
+                    width:102px;
+                    display: block;
+                    margin: 0 auto;
+                }
+                p{
+                    text-align: center;
+                    font-size: 12px;
+                    color:#fff;
+                    margin-top:3%;
+                }
+                
+            }
+        }
+    }
+    
+    .entranceGuard{
+        width:85%;
+        .contain{
+            height:350px;
+            padding:15px 10px;
+            overflow: hidden;
+            .day{
+                font-size: 14px;
+                color:#fff;
+                text-align: left;
+                margin-left:4px;
+            }
+            .wrap{
+                width:100%;
+                .section{
+                    width:45.5%;
+                    display: inline-block;
+                    background: url(../../../assets/image/entranceGuard.png) no-repeat;
+                    background-size: 100% 100%;
+                    align-items: center;
+                    justify-content: center;
+                    padding:20px 0;
+                    margin-top:6px;
+                    vertical-align: middle;
+                    .text{
+                        font-size: 16px;
+                        color:#fff;
+                        margin-left:40px;
+                        vertical-align: middle;
+
+                    }
+                    .num{
+                        font-size: 25px;
+                        margin-left:100px;
+                        vertical-align: middle;
+                    }
+                }
+                .section:nth-child(2){
+                    margin-left:9%;
+                }
+            }
+            .tableTitle{
+                width:96.2% !important;
+                margin:0 auto;
+                font-size: 16px;
+                padding:6px 0;
+                background-color: #1637A3;
+                padding-left:8px;
+                margin-top:14px;
+            }
+            .table2{
+                width:98% !important;
+                margin:0 auto;
+                margin-top:10px;
+                thead{
+                    tr{
+                        font-size: 30px !important;
+                    }
+                }
+                th{
+                    height:30px;
+                   
+                    border-bottom: none;
+                    
+                }
+                /deep/ tr{
+                    //background-color: transparent;//这是设置透明背景色
+                    padding:6px 0;
+                    border:none
+                }
+                /deep/ .cell{
+                    font-size: 14px;
+                }
+                /deep/ td{
+                    padding:4px 0;
+                }
+            }
+            /deep/ .el-table tr, /deep/ .el-table th, /deep/ .el-table td{
+                background-color: transparent;//这是设置透明背景色
+                
+            }
+        }
+    }
+}
+/deep/ .el-table__row>td {
+  border: none;
+}
+
+/deep/ .el-table::before {
+  height: 0px;
+}
+.scroll{
+    overflow-y: scroll;
+    overflow-x: hidden;
+}
+// ::-webkit-scrollbar {
+//   /*滚动条整体样式*/
+//   width : 0px;  /*高宽分别对应横竖滚动条的尺寸*/
+//   height: 1px;
+//   overflow: hidden;
+// }
+// ::-webkit-scrollbar-thumb {
+//   /*滚动条里面小方块*/
+//   border-radius: 1px;
+//   box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+//   background   : rgba(28,82,216,1);
+// }
+// ::-webkit-scrollbar-track {
+//   /*滚动条里面轨道*/
+//   box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+//   border-radius: 1px;
+//   background   : #ededed;
+// }
+
+// 对话框
+/deep/ .el-dialog{
+    background-color: transparent;
+    top:15%;
+}
+/deep/ .el-dialog__header{
+    padding:0;
+    padding-bottom:0;
+}
+/deep/ .el-dialog__body{
+    padding:0;
+}
+/deep/ .el-dialog__headerbtn .el-dialog__close{
+    display: none;
+}
+
+
+// table
+/deep/ .el-table--group, /deep/ .el-table--border{
+    border:none;
+}
+/deep/ .el-table thead{
+    color:#fff;
+    // background-color: rgba(28,82,216,.2);
+}
+
+/deep/ .el-table--border th{
+    border:1px solid #fff;
+    border-bottom:none;
+}
+
+/deep/ .el-table--border td{
+    border:1px solid #fff
+}
+ /deep/  .el-table, .el-table__expanded-cell {
+    background-color: transparent;//这是设置透明背景色
+    color:#fff;
+    border-collapse: collapse;
+    
+  }
+
+/deep/ .el-table__empty-text{
+    color:#fff;
+    font-size: 10px;
+    letter-spacing: 2px;
+}
+
+
+// data
+/deep/ .el-date-editor{
+    border:1px solid #ccc;
+    background-color: transparent;
+    height:25px;
+    line-height: 20px;
+    padding:0;
+    margin-top:2px;
+    box-sizing: border-box;
+}
+/deep/ .el-range-input, /deep/ .el-input__icon el-range__close-icon{
+    background-color: transparent;
+    color:#fff;
+    font-size: 12px;
+    text-align: top;
+    padding:0;
+    position: relative;
+    top:-4px
+}
+/deep/ .el-range__icon{
+    display: none;
+}
+/deep/ .el-date-editor--datetimerange.el-input__inner{
+    width:77%;
+    
+    display: inline-block;
+    
+}
+/deep/ ::placeholder{
+    color:#fff
+}
+/deep/ .el-range-separator{
+    color:#fff;
+    position: relative;
+    top:-4px
+}
+/deep/table,/deep/ tr,/deep/ td{
+    border-collapse: collapse !important;
+}
+/deep/ tr:hover, /deep/ td:hover, /deep/ table:hover{
+    background-color: none !important;
+}
+/deep/ .el-table__empty-block{
+    border:1px solid #fff;
+}
+/deep/ .el-table tbody tr:hover>td { 
+    background-color:transparent
+}
+
+::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width : 0px;  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 0px;
+  }
+::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 0px;
+  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background   : #535353;
+  }
+ ::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 0px;
+  background   : #ededed;
+  }
+
+::-webkit-scrollbar {
+	    display: none
+	  }
+      /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+  display: none;
+}
+</style>

src/components/SD-school/Spring-frame/video.vue

@@ -0,0 +1,616 @@
+<template>
+    <div>
+        <el-row class="video commonWidth" v-if="state">
+            <el-col class="top">
+                <el-col class="title">
+                    <img src="../../../assets/image/arrow.png" alt="" />
+                    <span>视频监控</span>
+                    <img src="../../../assets/image/icon2.png" alt="" class="equipment-icon"/>
+                </el-col>
+                <p class="close" @click="close"></p>
+            </el-col>
+            <el-col class="contain">
+                <video v-if="Message.play"
+                    :id="Message.videoId"  
+                    class="video-js vjs-default-skin videoPaly" 
+                    preload="auto" 
+                    autoplay="autoplay" 
+                    :src="Message.videoUrl" type="application/x-mpegURL">
+                </video>
+                <div class="videoNo" v-if="Message.videoNo">
+                    <img src="../../../assets/image/video.png"   alt="">
+                    <p>摄像头设备参数暂未接入</p>
+                </div>
+                
+            </el-col>
+        </el-row>
+  </div>
+</template>
+<script>
+import 'video.js/dist/video-js.css'
+import videojs from 'video.js'
+import 'videojs-contrib-hls'
+import "@videojs/http-streaming"
+import {  videoUrl } from "@/plugins/api"
+export default {
+    props:['resInfo'],
+    data() {
+        return {
+            state:false,
+            Message:{
+                "play":false,
+                "videoId":undefined,
+                "videoUrl":false,
+                "videoNo":false,
+                "videoImg":require("../../../assets/image/video.jpg"),
+                "vedioData":[]
+            },
+        }
+    },
+    mounted(){
+        this.getData()
+    },
+    methods: {
+        getData(){//获取数据赋值
+            this.state = true
+            this.Message = this.resInfo
+            if(this.Message){
+                videoUrl({"cameraIndexCode":this.resInfo.code,"protocol":"hls"}).then(res =>{ // 点位摄像头视频
+                    console.log("摄像头绑定")
+                    console.log(res)
+                    if(res.data != null){
+                        this.Message.videoId = "video" + Date.now()
+                        this.Message.videoUrl = res.data.url
+                        this.state = true
+                        this.Message.play = true
+                        this.Message.videoNo = false
+                        this.videoPlay()
+                    }
+                })
+            }else{
+                console.log("摄像头未绑定")
+                this.Message.videoNo = true
+                this.Message.play = false
+            }
+        },
+        videoPlay(){//播发
+            this.$nextTick(() => {
+                console.log(this.Message.videoId)
+                let list = videojs(this.Message.videoId , {
+                    events: [],
+                    // playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
+                    autoplay: "true", // 如果true,浏览器准备好时开始回放。
+                    controls: true, //  控制条
+                    preload: 'auto', // 视频预加载
+                    muted: true, //  默认情况下将会消除任何音频。
+                    loop: false, // 导致视频一结束就重新开始。
+                    language: 'zh-CN',
+                    controlBar: {
+                        timeDivider: true,
+                        durationDisplay: true
+                    },
+                    aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+                    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+                    sources: [{
+                        type: 'application/x-mpegURL',
+                        src: this.Message.videoUrl
+                    }],
+                    hls: true, // 启用hls？
+                    poster: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F945cad7c7105d352aa3c513c94846bb0c2f1a61342067-OWFZcE_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638947006&t=9cd1ab4df990ba151fcd5f0378f6e8cf', // 你的封面地址
+                    width: document.documentElement.clientWidth,
+                    notSupportedMessage: '此视频暂无法播放，请稍后再试'
+                    // autoplay:true,
+                    // controls:false,
+                    // bigPlayButton: false,
+                    // textTrackDisplay: false,
+                    // posterImage: true,
+                    // errorDisplay: false,
+                    // controlBar: true,
+                    // muted: true //静音模式 、、 解决首次页面加载播放。
+                }, function () {
+                    this.play() // 自动播放
+                })
+            })
+        },
+        close(){//关闭
+            this.state = false
+            this.Message.play = false
+            this.Message.videoId = false
+            this.Message.videoNo = false
+            this.$emit("close",false)
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+/deep/ .el-table .success-row {
+    background: rgba(22, 55, 163, 0.5) !important;//这里可以修改颜色
+}
+.Spring-frame {
+    position: absolute;
+	width:50%;
+	top:20%;
+	left:25%;
+	margin:0 auto;
+    .warning{
+        width:389px;
+        height:126px;
+        margin:0 auto;
+        background: url('../../../assets/image/warning-bg.png') ;
+        background-size: 389px 126px;
+        .contain{
+            width:58%;
+            margin:6% 0 0 35%;
+            line-height: 22px;
+            color:#fff;
+            font-size: 12px;
+            .title{
+                font-size: 12px;
+            }
+            .content{
+                margin-top:0px;
+            }
+        }
+		// .close{
+		//     width:16px;
+		//     height:16px;
+		//     background: url('../../../assets/image/close2.png') no-repeat;
+		//     position: absolute;
+		// 	top:8px;right:6px;
+		// }
+    }
+    .commonWidth{
+        width:450px;
+        display: block;
+        margin:0 auto; 
+        .top{
+            height: 39px;
+            line-height: 35px;
+            background: rgba(28,82,216,.5);
+            border: 1px solid #1C52D8;
+            border-bottom:none;
+            border-radius: 4px 4px  0 0;
+            .title{
+                width:50%;
+                font-size: 16px;
+                margin-left:16px;
+                vertical-align: middle;
+                color:#38E7EE;
+                vertical-align: middle;
+                img{
+                    margin-right:4px;
+                    vertical-align: middle;
+                }
+                span{
+                    margin-left:16px;
+                    vertical-align: middle;
+                }
+                .equipment-icon{
+                    width:16px;
+                    position: absolute;
+                    top:16px;
+                    right:45%;
+                }
+            }
+            .close{
+                width:16px;
+                height:16px;
+                background: url('../../../assets/image/close.png') ;
+                float:right;
+                margin:12px 6px 0 0;
+            }
+        } 
+        .contain{
+            background-color:rgba(0,22,103,.85);
+            border-radius: 0 0 4px 4px;
+        }
+    }
+    .meeting,.music{
+        height:300px;
+        .contain{
+            height:300px;
+            overflow: hidden;
+            .section{
+                padding:10px;
+                font-size: 14px;
+                font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
+                font-weight: bold;
+                text-align: left;
+                color: #ffffff;
+                line-height: 30px;
+                
+            }
+            .title{
+                margin-bottom:4px;
+            }
+            .section2 .title{
+                width:auto;
+                display: inline-block;
+                margin-right:10px;
+                vertical-align: middle;
+                // margin-bottom:2px;
+            }
+        }
+        
+        /deep/ .el-table tr, /deep/ .el-table th, /deep/ .el-table td{
+            background-color: transparent;//这是设置透明背景色
+            font-size: 10px;
+            padding:0;
+        }
+    }
+    .meeting .title{
+        font-size: 12px;
+    }
+    .equipment,.ba{
+        .contain{
+            padding: 10px 10px 25px;
+            overflow: hidden;
+            .title{
+                margin-top:10px;
+                font-size: 14px;
+                letter-spacing: 1px;
+                .type{
+                    width:25%;
+                    text-align: right;
+                    display: inline-block;
+                }
+                .data{
+                    width:75%;
+                    text-align: left;
+                    display: inline-block;
+                    vertical-align: top;
+                }
+            }
+            
+        }
+    }
+    .ba {
+       .contain{
+           height:300px;
+           overflow-y:scroll;
+       } 
+    }
+    .video{
+        .contain{
+            overflow: hidden;
+            .videoPaly{
+                width:100%;
+            }
+            .videoNo{
+                margin: 10% auto;
+                img{
+                    height:97px;
+                    width:102px;
+                    display: block;
+                    margin: 0 auto;
+                }
+                p{
+                    text-align: center;
+                    font-size: 12px;
+                    color:#fff;
+                    margin-top:3%;
+                }
+                
+            }
+        }
+        
+    }
+    .xinfa{
+        width:290px !important;
+        .top{
+           
+            .title{
+                width:80% !important;
+            }
+        }
+        .contain{
+            height:140px;
+            padding:35px 10px;
+            overflow: hidden;
+            .module1{
+                .title{
+                    font-size: 14px;
+                    color:#fff;
+                    text-align: left;
+                    display: inline-block;
+                    vertical-align: middle;
+                }
+                .wrap{
+                    vertical-align: middle;
+                    display: inline-block;
+                    .span1{
+                        width:12px;
+                        height:12px;
+                        border-radius: 50%;
+                        background-color: red;
+                        display: inline-block;
+                        vertical-align: middle;
+                    }
+                    .span2{
+                        font-size: 14px;
+                        margin-left:5px;
+                        display: inline-block;
+                        vertical-align: middle;
+                    }
+                }
+
+            }
+            .module2{
+                margin-top:30px;
+                .title{
+                    font-size: 14px;
+                    color:#fff;
+                    text-align: left;
+                    display: inline-block;
+                    vertical-align: middle;
+                }
+                .wrap{
+                    .open,.off{
+                        width:60px;
+                        height:26px;
+                    }
+                    .off{
+                        margin-left:25px;
+                    }
+                    vertical-align: middle;
+                    display: inline-block;
+                    
+                }
+
+            }
+            .videoNo{
+                margin: 10% auto;
+                img{
+                    height:97px;
+                    width:102px;
+                    display: block;
+                    margin: 0 auto;
+                }
+                p{
+                    text-align: center;
+                    font-size: 12px;
+                    color:#fff;
+                    margin-top:3%;
+                }
+                
+            }
+        }
+    }
+    
+    .entranceGuard{
+        width:85%;
+        .contain{
+            height:350px;
+            padding:15px 10px;
+            overflow: hidden;
+            .day{
+                font-size: 14px;
+                color:#fff;
+                text-align: left;
+                margin-left:4px;
+            }
+            .wrap{
+                width:100%;
+                .section{
+                    width:45.5%;
+                    display: inline-block;
+                    background: url(../../../assets/image/entranceGuard.png) no-repeat;
+                    background-size: 100% 100%;
+                    align-items: center;
+                    justify-content: center;
+                    padding:20px 0;
+                    margin-top:6px;
+                    vertical-align: middle;
+                    .text{
+                        font-size: 16px;
+                        color:#fff;
+                        margin-left:40px;
+                        vertical-align: middle;
+
+                    }
+                    .num{
+                        font-size: 25px;
+                        margin-left:100px;
+                        vertical-align: middle;
+                    }
+                }
+                .section:nth-child(2){
+                    margin-left:9%;
+                }
+            }
+            .tableTitle{
+                width:96.2% !important;
+                margin:0 auto;
+                font-size: 16px;
+                padding:6px 0;
+                background-color: #1637A3;
+                padding-left:8px;
+                margin-top:14px;
+            }
+            .table2{
+                width:98% !important;
+                margin:0 auto;
+                margin-top:10px;
+                thead{
+                    tr{
+                        font-size: 30px !important;
+                    }
+                }
+                th{
+                    height:30px;
+                   
+                    border-bottom: none;
+                    
+                }
+                /deep/ tr{
+                    //background-color: transparent;//这是设置透明背景色
+                    padding:6px 0;
+                    border:none
+                }
+                /deep/ .cell{
+                    font-size: 14px;
+                }
+                /deep/ td{
+                    padding:4px 0;
+                }
+            }
+            /deep/ .el-table tr, /deep/ .el-table th, /deep/ .el-table td{
+                background-color: transparent;//这是设置透明背景色
+                
+            }
+        }
+    }
+}
+/deep/ .el-table__row>td {
+  border: none;
+}
+
+/deep/ .el-table::before {
+  height: 0px;
+}
+.scroll{
+    overflow-y: scroll;
+    overflow-x: hidden;
+}
+// ::-webkit-scrollbar {
+//   /*滚动条整体样式*/
+//   width : 0px;  /*高宽分别对应横竖滚动条的尺寸*/
+//   height: 1px;
+//   overflow: hidden;
+// }
+// ::-webkit-scrollbar-thumb {
+//   /*滚动条里面小方块*/
+//   border-radius: 1px;
+//   box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+//   background   : rgba(28,82,216,1);
+// }
+// ::-webkit-scrollbar-track {
+//   /*滚动条里面轨道*/
+//   box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+//   border-radius: 1px;
+//   background   : #ededed;
+// }
+
+// 对话框
+/deep/ .el-dialog{
+    background-color: transparent;
+    top:15%;
+}
+/deep/ .el-dialog__header{
+    padding:0;
+    padding-bottom:0;
+}
+/deep/ .el-dialog__body{
+    padding:0;
+}
+/deep/ .el-dialog__headerbtn .el-dialog__close{
+    display: none;
+}
+
+
+// table
+/deep/ .el-table--group, /deep/ .el-table--border{
+    border:none;
+}
+/deep/ .el-table thead{
+    color:#fff;
+    // background-color: rgba(28,82,216,.2);
+}
+
+/deep/ .el-table--border th{
+    border:1px solid #fff;
+    border-bottom:none;
+}
+
+/deep/ .el-table--border td{
+    border:1px solid #fff
+}
+ /deep/  .el-table, .el-table__expanded-cell {
+    background-color: transparent;//这是设置透明背景色
+    color:#fff;
+    border-collapse: collapse;
+    
+  }
+
+/deep/ .el-table__empty-text{
+    color:#fff;
+    font-size: 10px;
+    letter-spacing: 2px;
+}
+
+
+// data
+/deep/ .el-date-editor{
+    border:1px solid #ccc;
+    background-color: transparent;
+    height:25px;
+    line-height: 20px;
+    padding:0;
+    margin-top:2px;
+    box-sizing: border-box;
+}
+/deep/ .el-range-input, /deep/ .el-input__icon el-range__close-icon{
+    background-color: transparent;
+    color:#fff;
+    font-size: 12px;
+    text-align: top;
+    padding:0;
+    position: relative;
+    top:-4px
+}
+/deep/ .el-range__icon{
+    display: none;
+}
+/deep/ .el-date-editor--datetimerange.el-input__inner{
+    width:77%;
+    
+    display: inline-block;
+    
+}
+/deep/ ::placeholder{
+    color:#fff
+}
+/deep/ .el-range-separator{
+    color:#fff;
+    position: relative;
+    top:-4px
+}
+/deep/table,/deep/ tr,/deep/ td{
+    border-collapse: collapse !important;
+}
+/deep/ tr:hover, /deep/ td:hover, /deep/ table:hover{
+    background-color: none !important;
+}
+/deep/ .el-table__empty-block{
+    border:1px solid #fff;
+}
+/deep/ .el-table tbody tr:hover>td { 
+    background-color:transparent
+}
+
+::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width : 0px;  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 0px;
+  }
+::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 0px;
+  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background   : #535353;
+  }
+ ::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 0px;
+  background   : #ededed;
+  }
+
+::-webkit-scrollbar {
+	    display: none
+	  }
+      /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+  display: none;
+}
+</style>

src/components/SD-school/Spring-frame/warning.vue

@@ -0,0 +1,535 @@
+<template>
+    <div>
+        <el-row class="warning" v-if="state"><!--告警推送弹框-->
+            <el-col class="contain">
+                <el-col class="title">{{Message.deviceName ? "设备名称：" + Message.deviceName : "设备名称：--"}}</el-col>
+                <el-col class="content">{{Message.alarmContent ? "告警信息：" + Message.alarmContent : "告警信息：--"}}</el-col>
+                <el-col class="time">{{Message.createTime ? "告警时间：" + Message.createTime : "告警时间：--"}}</el-col>
+            </el-col>
+        </el-row>
+  </div>
+</template>
+<script>
+export default {
+    props:['resInfo'],
+    data() {
+        return {
+            state:false,
+            Message:{},
+        }
+    },
+    mounted(){
+        this.getData()
+    },
+    methods: {
+        getData(){//获取数据赋值
+            this.state = true
+            this.Message = this.resInfo
+            console.log(this.Message)
+            if(timeout){
+                clearTimeout(timeout)
+            }
+            let timeout = setTimeout(() => {
+                this.state = false
+                this.close()
+            }, 3000);
+        },
+        close(){//关闭
+            this.state = false
+            this.$emit("close",false)
+        },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+/deep/ .el-table .success-row {
+    background: rgba(22, 55, 163, 0.5) !important;//这里可以修改颜色
+}
+.Spring-frame {
+    position: absolute;
+	width:50%;
+	top:20%;
+	left:25%;
+	margin:0 auto;
+    .warning{
+        width:389px;
+        height:126px;
+        margin:0 auto;
+        background: url('../../../assets/image/warning-bg.png') ;
+        background-size: 389px 126px;
+        .contain{
+            width:58%;
+            margin:6% 0 0 35%;
+            line-height: 22px;
+            color:#fff;
+            font-size: 12px;
+            .title{
+                font-size: 12px;
+            }
+            .content{
+                margin-top:0px;
+            }
+        }
+		// .close{
+		//     width:16px;
+		//     height:16px;
+		//     background: url('../../../assets/image/close2.png') no-repeat;
+		//     position: absolute;
+		// 	top:8px;right:6px;
+		// }
+    }
+    .commonWidth{
+        width:450px;
+        display: block;
+        margin:0 auto; 
+        .top{
+            height: 39px;
+            line-height: 35px;
+            background: rgba(28,82,216,.5);
+            border: 1px solid #1C52D8;
+            border-bottom:none;
+            border-radius: 4px 4px  0 0;
+            .title{
+                width:50%;
+                font-size: 16px;
+                margin-left:16px;
+                vertical-align: middle;
+                color:#38E7EE;
+                vertical-align: middle;
+                img{
+                    margin-right:4px;
+                    vertical-align: middle;
+                }
+                span{
+                    margin-left:16px;
+                    vertical-align: middle;
+                }
+                .equipment-icon{
+                    width:16px;
+                    position: absolute;
+                    top:16px;
+                    right:45%;
+                }
+            }
+            .close{
+                width:16px;
+                height:16px;
+                background: url('../../../assets/image/close.png') ;
+                float:right;
+                margin:12px 6px 0 0;
+            }
+        } 
+        .contain{
+            background-color:rgba(0,22,103,.85);
+            border-radius: 0 0 4px 4px;
+        }
+    }
+    .meeting,.music{
+        height:300px;
+        .contain{
+            height:300px;
+            overflow: hidden;
+            .section{
+                padding:10px;
+                font-size: 14px;
+                font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
+                font-weight: bold;
+                text-align: left;
+                color: #ffffff;
+                line-height: 30px;
+                
+            }
+            .title{
+                margin-bottom:4px;
+            }
+            .section2 .title{
+                width:auto;
+                display: inline-block;
+                margin-right:10px;
+                vertical-align: middle;
+                // margin-bottom:2px;
+            }
+        }
+        
+        /deep/ .el-table tr, /deep/ .el-table th, /deep/ .el-table td{
+            background-color: transparent;//这是设置透明背景色
+            font-size: 10px;
+            padding:0;
+        }
+    }
+    .meeting .title{
+        font-size: 12px;
+    }
+    .equipment,.ba{
+        .contain{
+            padding: 10px 10px 25px;
+            overflow: hidden;
+            .title{
+                margin-top:10px;
+                font-size: 14px;
+                letter-spacing: 1px;
+                .type{
+                    width:25%;
+                    text-align: right;
+                    display: inline-block;
+                }
+                .data{
+                    width:75%;
+                    text-align: left;
+                    display: inline-block;
+                    vertical-align: top;
+                }
+            }
+            
+        }
+    }
+    .ba {
+       .contain{
+           height:300px;
+           overflow-y:scroll;
+       } 
+    }
+    .video{
+        .contain{
+            overflow: hidden;
+            .videoPaly{
+                width:100%;
+            }
+            .videoNo{
+                margin: 10% auto;
+                img{
+                    height:97px;
+                    width:102px;
+                    display: block;
+                    margin: 0 auto;
+                }
+                p{
+                    text-align: center;
+                    font-size: 12px;
+                    color:#fff;
+                    margin-top:3%;
+                }
+                
+            }
+        }
+        
+    }
+    .xinfa{
+        width:290px !important;
+        .top{
+           
+            .title{
+                width:80% !important;
+            }
+        }
+        .contain{
+            height:140px;
+            padding:35px 10px;
+            overflow: hidden;
+            .module1{
+                .title{
+                    font-size: 14px;
+                    color:#fff;
+                    text-align: left;
+                    display: inline-block;
+                    vertical-align: middle;
+                }
+                .wrap{
+                    vertical-align: middle;
+                    display: inline-block;
+                    .span1{
+                        width:12px;
+                        height:12px;
+                        border-radius: 50%;
+                        background-color: red;
+                        display: inline-block;
+                        vertical-align: middle;
+                    }
+                    .span2{
+                        font-size: 14px;
+                        margin-left:5px;
+                        display: inline-block;
+                        vertical-align: middle;
+                    }
+                }
+
+            }
+            .module2{
+                margin-top:30px;
+                .title{
+                    font-size: 14px;
+                    color:#fff;
+                    text-align: left;
+                    display: inline-block;
+                    vertical-align: middle;
+                }
+                .wrap{
+                    .open,.off{
+                        width:60px;
+                        height:26px;
+                    }
+                    .off{
+                        margin-left:25px;
+                    }
+                    vertical-align: middle;
+                    display: inline-block;
+                    
+                }
+
+            }
+            .videoNo{
+                margin: 10% auto;
+                img{
+                    height:97px;
+                    width:102px;
+                    display: block;
+                    margin: 0 auto;
+                }
+                p{
+                    text-align: center;
+                    font-size: 12px;
+                    color:#fff;
+                    margin-top:3%;
+                }
+                
+            }
+        }
+    }
+    
+    .entranceGuard{
+        width:85%;
+        .contain{
+            height:350px;
+            padding:15px 10px;
+            overflow: hidden;
+            .day{
+                font-size: 14px;
+                color:#fff;
+                text-align: left;
+                margin-left:4px;
+            }
+            .wrap{
+                width:100%;
+                .section{
+                    width:45.5%;
+                    display: inline-block;
+                    background: url(../../../assets/image/entranceGuard.png) no-repeat;
+                    background-size: 100% 100%;
+                    align-items: center;
+                    justify-content: center;
+                    padding:20px 0;
+                    margin-top:6px;
+                    vertical-align: middle;
+                    .text{
+                        font-size: 16px;
+                        color:#fff;
+                        margin-left:40px;
+                        vertical-align: middle;
+
+                    }
+                    .num{
+                        font-size: 25px;
+                        margin-left:100px;
+                        vertical-align: middle;
+                    }
+                }
+                .section:nth-child(2){
+                    margin-left:9%;
+                }
+            }
+            .tableTitle{
+                width:96.2% !important;
+                margin:0 auto;
+                font-size: 16px;
+                padding:6px 0;
+                background-color: #1637A3;
+                padding-left:8px;
+                margin-top:14px;
+            }
+            .table2{
+                width:98% !important;
+                margin:0 auto;
+                margin-top:10px;
+                thead{
+                    tr{
+                        font-size: 30px !important;
+                    }
+                }
+                th{
+                    height:30px;
+                   
+                    border-bottom: none;
+                    
+                }
+                /deep/ tr{
+                    //background-color: transparent;//这是设置透明背景色
+                    padding:6px 0;
+                    border:none
+                }
+                /deep/ .cell{
+                    font-size: 14px;
+                }
+                /deep/ td{
+                    padding:4px 0;
+                }
+            }
+            /deep/ .el-table tr, /deep/ .el-table th, /deep/ .el-table td{
+                background-color: transparent;//这是设置透明背景色
+                
+            }
+        }
+    }
+}
+/deep/ .el-table__row>td {
+  border: none;
+}
+
+/deep/ .el-table::before {
+  height: 0px;
+}
+.scroll{
+    overflow-y: scroll;
+    overflow-x: hidden;
+}
+// ::-webkit-scrollbar {
+//   /*滚动条整体样式*/
+//   width : 0px;  /*高宽分别对应横竖滚动条的尺寸*/
+//   height: 1px;
+//   overflow: hidden;
+// }
+// ::-webkit-scrollbar-thumb {
+//   /*滚动条里面小方块*/
+//   border-radius: 1px;
+//   box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+//   background   : rgba(28,82,216,1);
+// }
+// ::-webkit-scrollbar-track {
+//   /*滚动条里面轨道*/
+//   box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+//   border-radius: 1px;
+//   background   : #ededed;
+// }
+
+// 对话框
+/deep/ .el-dialog{
+    background-color: transparent;
+    top:15%;
+}
+/deep/ .el-dialog__header{
+    padding:0;
+    padding-bottom:0;
+}
+/deep/ .el-dialog__body{
+    padding:0;
+}
+/deep/ .el-dialog__headerbtn .el-dialog__close{
+    display: none;
+}
+
+
+// table
+/deep/ .el-table--group, /deep/ .el-table--border{
+    border:none;
+}
+/deep/ .el-table thead{
+    color:#fff;
+    // background-color: rgba(28,82,216,.2);
+}
+
+/deep/ .el-table--border th{
+    border:1px solid #fff;
+    border-bottom:none;
+}
+
+/deep/ .el-table--border td{
+    border:1px solid #fff
+}
+ /deep/  .el-table, .el-table__expanded-cell {
+    background-color: transparent;//这是设置透明背景色
+    color:#fff;
+    border-collapse: collapse;
+    
+  }
+
+/deep/ .el-table__empty-text{
+    color:#fff;
+    font-size: 10px;
+    letter-spacing: 2px;
+}
+
+
+// data
+/deep/ .el-date-editor{
+    border:1px solid #ccc;
+    background-color: transparent;
+    height:25px;
+    line-height: 20px;
+    padding:0;
+    margin-top:2px;
+    box-sizing: border-box;
+}
+/deep/ .el-range-input, /deep/ .el-input__icon el-range__close-icon{
+    background-color: transparent;
+    color:#fff;
+    font-size: 12px;
+    text-align: top;
+    padding:0;
+    position: relative;
+    top:-4px
+}
+/deep/ .el-range__icon{
+    display: none;
+}
+/deep/ .el-date-editor--datetimerange.el-input__inner{
+    width:77%;
+    
+    display: inline-block;
+    
+}
+/deep/ ::placeholder{
+    color:#fff
+}
+/deep/ .el-range-separator{
+    color:#fff;
+    position: relative;
+    top:-4px
+}
+/deep/table,/deep/ tr,/deep/ td{
+    border-collapse: collapse !important;
+}
+/deep/ tr:hover, /deep/ td:hover, /deep/ table:hover{
+    background-color: none !important;
+}
+/deep/ .el-table__empty-block{
+    border:1px solid #fff;
+}
+/deep/ .el-table tbody tr:hover>td { 
+    background-color:transparent
+}
+
+::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width : 0px;  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 0px;
+  }
+::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 0px;
+  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background   : #535353;
+  }
+ ::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 0px;
+  background   : #ededed;
+  }
+
+::-webkit-scrollbar {
+	    display: none
+	  }
+      /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+  display: none;
+}
+</style>

src/components/SD-school/Spring-frame/xinfa.vue

@@ -0,0 +1,664 @@
+<template>
+    <div>
+        <el-row class="xinfa commonWidth" v-if="state"><!--信发设备信息弹框-->
+            <el-col class="top">
+                <el-col class="title">
+                    <img src="../../../assets/image/arrow.png" alt="" />
+                    <span>{{Message.name}}</span>
+                </el-col>
+                <p class="close" @click="close"></p>
+            </el-col>
+            <el-col class="contain">
+                <el-col class="module1">
+                    <div class="title">设备工况：</div>
+                    <div class="wrap" >
+                        <span class="span1" :style="Message.bgc"></span>
+                        <span class="span2" :style="Message.color">{{Message.text}}</span>
+                    </div>
+                </el-col>
+                <el-col class="module2" v-if="xinfa.sbState">
+                    <div class="title">设备控制：</div>
+                    <div class="wrap">
+                        <el-button type="success" round size="mini" class="open" @click="xinfaSwitch('open')">唤醒</el-button>
+                        <el-button type="danger" round size="mini" class="off" @click="xinfaSwitch('off')">休眠</el-button>
+                    </div>
+                </el-col>
+            </el-col>
+        </el-row>
+  </div>
+</template>
+<script>
+import axios from 'axios'
+import { xinfaToken } from "@/plugins/api"
+export default {
+    props:['resInfo'],
+    data() {
+        return {
+            state:false,
+            Message:{
+                "text":false,
+                "Message":{},
+                "bgc":{
+                    "background":undefined, 
+                },
+                "color":{
+                    "color":undefined
+                },
+                "cMarks":undefined,
+                "sbState":true,
+                "name":undefined,
+            },
+        }
+    },
+    mounted(){
+        this.getData()
+    },
+    methods: {
+        getData(){//获取数据赋值
+            this.Message = this.resInfo
+            let cMark = this.resInfo.registerDeviceId
+            this.Message.cMarks = cMark 
+            xinfaToken().then(res =>{ //信发设备
+				console.log("信发设备")
+				let access_token = res.data.authToken
+				let secret = res.data.secret
+				let acces_secret_md5 = this.$md5(secret)
+				let timestamp = Date.parse(new Date()) / 1000;
+				let sign = this.$md5(access_token + acces_secret_md5 + timestamp);
+				axios({
+					method: 'get',
+					url: 'http://10.108.35.105:8780/adc/sdk/dev_get_devstatus',
+					params: {
+						access_token: access_token,
+						timestamp: timestamp,
+						sign:sign,
+						cMark:cMark
+					},
+					timeout: 3000,
+				}).then(res =>{
+					console.log(res)
+					this.state = true
+                    if(res.data.result == "failed"){
+                        this.Message.text = res.data.retInfo
+                        this.Message.bgc.background = "#E22323"
+						this.Message.color.color = "#E22323"
+                        this.Message.name = this.resInfo.deviceName + this.resInfo.deviceType
+                    }else if(res.data.online == 0){
+						this.Message.text = "不在线"
+						this.Message.bgc.background = "#E22323"
+						this.Message.color.color = "#E22323"
+                        this.Message.sbState = false
+                        this.Message.name = this.resInfo.deviceName + this.resInfo.deviceType
+					}else{
+						this.Message.text = "在线"
+						this.Message.bgc.background = "#46C00B"
+						this.Message.color.color = "#46C00B"
+                        this.Message.name = this.resInfo.deviceName + this.resInfo.deviceType
+					}
+				}).catch(err =>{
+                    console.log(err)
+                    this.Message.text = "不在线"
+					this.Message.bgc.background = "#E22323"
+					this.Message.color.color = "#E22323"
+                    this.Message.sbState = false
+                    this.Message.sbState = false
+                    this.Message.name = this.resInfo.deviceName + this.resInfo.deviceType
+
+                });
+			})  
+        },
+        xinfaSwitch(e){
+            xinfaToken().then(res =>{ //信发设备
+				console.log("信发设备")
+				let access_token = res.data.authToken
+				let secret = res.data.secret
+				let acces_secret_md5 = this.$md5(secret)
+				let timestamp = Date.parse(new Date()) / 1000;
+				let sign = this.$md5(access_token + acces_secret_md5 + timestamp);
+                if(e == "open"){
+                    var sCmd ={
+                        paramType:17,
+                        onoff:1,//1:立即唤醒；0：立即休眠
+                        subcmd:'ctrl_lcd_onoff_ontime'
+                    }
+                }else{
+                    var sCmd ={
+                        paramType:17,
+                        onoff:0,//1:立即唤醒；0：立即休眠
+                        subcmd:'ctrl_lcd_onoff_ontime'
+                    }
+                }
+                
+                axios({
+					method: 'get',
+					url: 'http://10.108.35.105:8780/adc/sdk/sendClientParams',
+					params: {
+						access_token: access_token,
+						timestamp: timestamp,
+						sign:sign,
+                        paramType:"17",
+                        cMarks:this.Message.cMarks,
+                        params:JSON.stringify(sCmd),
+                        retry:"0"
+					},
+					timeout: 3000,
+				}).then(res =>{
+					console.log(res)
+                    if(res.data.result =="success"){
+                        if(e == "open"){
+                            this.$message({
+                                showClose: true,
+                                message: '设备唤醒成功',
+                                type: 'success'
+                            });
+                        }else{
+                            this.$message({
+                                showClose: true,
+                                message: '设备已进入休眠状态',
+                                type: 'success'
+                            });
+                        }
+                        
+                    }
+				})
+            })
+        },
+        close(){//关闭
+            this.state = false
+            this.$emit("close",false)
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+/deep/ .el-table .success-row {
+    background: rgba(22, 55, 163, 0.5) !important;//这里可以修改颜色
+}
+.Spring-frame {
+    position: absolute;
+	width:50%;
+	top:20%;
+	left:25%;
+	margin:0 auto;
+    .warning{
+        width:389px;
+        height:126px;
+        margin:0 auto;
+        background: url('../../../assets/image/warning-bg.png') ;
+        background-size: 389px 126px;
+        .contain{
+            width:58%;
+            margin:6% 0 0 35%;
+            line-height: 22px;
+            color:#fff;
+            font-size: 12px;
+            .title{
+                font-size: 12px;
+            }
+            .content{
+                margin-top:0px;
+            }
+        }
+		// .close{
+		//     width:16px;
+		//     height:16px;
+		//     background: url('../../../assets/image/close2.png') no-repeat;
+		//     position: absolute;
+		// 	top:8px;right:6px;
+		// }
+    }
+    .commonWidth{
+        width:450px;
+        display: block;
+        margin:0 auto; 
+        .top{
+            height: 39px;
+            line-height: 35px;
+            background: rgba(28,82,216,.5);
+            border: 1px solid #1C52D8;
+            border-bottom:none;
+            border-radius: 4px 4px  0 0;
+            .title{
+                width:50%;
+                font-size: 16px;
+                margin-left:16px;
+                vertical-align: middle;
+                color:#38E7EE;
+                vertical-align: middle;
+                img{
+                    margin-right:4px;
+                    vertical-align: middle;
+                }
+                span{
+                    margin-left:16px;
+                    vertical-align: middle;
+                }
+                .equipment-icon{
+                    width:16px;
+                    position: absolute;
+                    top:16px;
+                    right:45%;
+                }
+            }
+            .close{
+                width:16px;
+                height:16px;
+                background: url('../../../assets/image/close.png') ;
+                float:right;
+                margin:12px 6px 0 0;
+            }
+        } 
+        .contain{
+            background-color:rgba(0,22,103,.85);
+            border-radius: 0 0 4px 4px;
+        }
+    }
+    .meeting,.music{
+        height:300px;
+        .contain{
+            height:300px;
+            overflow: hidden;
+            .section{
+                padding:10px;
+                font-size: 14px;
+                font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
+                font-weight: bold;
+                text-align: left;
+                color: #ffffff;
+                line-height: 30px;
+                
+            }
+            .title{
+                margin-bottom:4px;
+            }
+            .section2 .title{
+                width:auto;
+                display: inline-block;
+                margin-right:10px;
+                vertical-align: middle;
+                // margin-bottom:2px;
+            }
+        }
+        
+        /deep/ .el-table tr, /deep/ .el-table th, /deep/ .el-table td{
+            background-color: transparent;//这是设置透明背景色
+            font-size: 10px;
+            padding:0;
+        }
+    }
+    .meeting .title{
+        font-size: 12px;
+    }
+    .equipment,.ba{
+        .contain{
+            padding: 10px 10px 25px;
+            overflow: hidden;
+            .title{
+                margin-top:10px;
+                font-size: 14px;
+                letter-spacing: 1px;
+                .type{
+                    width:25%;
+                    text-align: right;
+                    display: inline-block;
+                }
+                .data{
+                    width:75%;
+                    text-align: left;
+                    display: inline-block;
+                    vertical-align: top;
+                }
+            }
+            
+        }
+    }
+    .ba {
+       .contain{
+           height:300px;
+           overflow-y:scroll;
+       } 
+    }
+    .video{
+        .contain{
+            overflow: hidden;
+            .videoPaly{
+                width:100%;
+            }
+            .videoNo{
+                margin: 10% auto;
+                img{
+                    height:97px;
+                    width:102px;
+                    display: block;
+                    margin: 0 auto;
+                }
+                p{
+                    text-align: center;
+                    font-size: 12px;
+                    color:#fff;
+                    margin-top:3%;
+                }
+                
+            }
+        }
+        
+    }
+    .xinfa{
+        width:290px !important;
+        .top{
+           
+            .title{
+                width:80% !important;
+            }
+        }
+        .contain{
+            height:140px;
+            padding:35px 10px;
+            overflow: hidden;
+            .module1{
+                .title{
+                    font-size: 14px;
+                    color:#fff;
+                    text-align: left;
+                    display: inline-block;
+                    vertical-align: middle;
+                }
+                .wrap{
+                    vertical-align: middle;
+                    display: inline-block;
+                    .span1{
+                        width:12px;
+                        height:12px;
+                        border-radius: 50%;
+                        background-color: red;
+                        display: inline-block;
+                        vertical-align: middle;
+                    }
+                    .span2{
+                        font-size: 14px;
+                        margin-left:5px;
+                        display: inline-block;
+                        vertical-align: middle;
+                    }
+                }
+
+            }
+            .module2{
+                margin-top:30px;
+                .title{
+                    font-size: 14px;
+                    color:#fff;
+                    text-align: left;
+                    display: inline-block;
+                    vertical-align: middle;
+                }
+                .wrap{
+                    .open,.off{
+                        width:60px;
+                        height:26px;
+                    }
+                    .off{
+                        margin-left:25px;
+                    }
+                    vertical-align: middle;
+                    display: inline-block;
+                    
+                }
+
+            }
+            .videoNo{
+                margin: 10% auto;
+                img{
+                    height:97px;
+                    width:102px;
+                    display: block;
+                    margin: 0 auto;
+                }
+                p{
+                    text-align: center;
+                    font-size: 12px;
+                    color:#fff;
+                    margin-top:3%;
+                }
+                
+            }
+        }
+    }
+    
+    .entranceGuard{
+        width:85%;
+        .contain{
+            height:350px;
+            padding:15px 10px;
+            overflow: hidden;
+            .day{
+                font-size: 14px;
+                color:#fff;
+                text-align: left;
+                margin-left:4px;
+            }
+            .wrap{
+                width:100%;
+                .section{
+                    width:45.5%;
+                    display: inline-block;
+                    background: url(../../../assets/image/entranceGuard.png) no-repeat;
+                    background-size: 100% 100%;
+                    align-items: center;
+                    justify-content: center;
+                    padding:20px 0;
+                    margin-top:6px;
+                    vertical-align: middle;
+                    .text{
+                        font-size: 16px;
+                        color:#fff;
+                        margin-left:40px;
+                        vertical-align: middle;
+
+                    }
+                    .num{
+                        font-size: 25px;
+                        margin-left:100px;
+                        vertical-align: middle;
+                    }
+                }
+                .section:nth-child(2){
+                    margin-left:9%;
+                }
+            }
+            .tableTitle{
+                width:96.2% !important;
+                margin:0 auto;
+                font-size: 16px;
+                padding:6px 0;
+                background-color: #1637A3;
+                padding-left:8px;
+                margin-top:14px;
+            }
+            .table2{
+                width:98% !important;
+                margin:0 auto;
+                margin-top:10px;
+                thead{
+                    tr{
+                        font-size: 30px !important;
+                    }
+                }
+                th{
+                    height:30px;
+                   
+                    border-bottom: none;
+                    
+                }
+                /deep/ tr{
+                    //background-color: transparent;//这是设置透明背景色
+                    padding:6px 0;
+                    border:none
+                }
+                /deep/ .cell{
+                    font-size: 14px;
+                }
+                /deep/ td{
+                    padding:4px 0;
+                }
+            }
+            /deep/ .el-table tr, /deep/ .el-table th, /deep/ .el-table td{
+                background-color: transparent;//这是设置透明背景色
+                
+            }
+        }
+    }
+}
+/deep/ .el-table__row>td {
+  border: none;
+}
+
+/deep/ .el-table::before {
+  height: 0px;
+}
+.scroll{
+    overflow-y: scroll;
+    overflow-x: hidden;
+}
+// ::-webkit-scrollbar {
+//   /*滚动条整体样式*/
+//   width : 0px;  /*高宽分别对应横竖滚动条的尺寸*/
+//   height: 1px;
+//   overflow: hidden;
+// }
+// ::-webkit-scrollbar-thumb {
+//   /*滚动条里面小方块*/
+//   border-radius: 1px;
+//   box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+//   background   : rgba(28,82,216,1);
+// }
+// ::-webkit-scrollbar-track {
+//   /*滚动条里面轨道*/
+//   box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+//   border-radius: 1px;
+//   background   : #ededed;
+// }
+
+// 对话框
+/deep/ .el-dialog{
+    background-color: transparent;
+    top:15%;
+}
+/deep/ .el-dialog__header{
+    padding:0;
+    padding-bottom:0;
+}
+/deep/ .el-dialog__body{
+    padding:0;
+}
+/deep/ .el-dialog__headerbtn .el-dialog__close{
+    display: none;
+}
+
+
+// table
+/deep/ .el-table--group, /deep/ .el-table--border{
+    border:none;
+}
+/deep/ .el-table thead{
+    color:#fff;
+    // background-color: rgba(28,82,216,.2);
+}
+
+/deep/ .el-table--border th{
+    border:1px solid #fff;
+    border-bottom:none;
+}
+
+/deep/ .el-table--border td{
+    border:1px solid #fff
+}
+ /deep/  .el-table, .el-table__expanded-cell {
+    background-color: transparent;//这是设置透明背景色
+    color:#fff;
+    border-collapse: collapse;
+    
+  }
+
+/deep/ .el-table__empty-text{
+    color:#fff;
+    font-size: 10px;
+    letter-spacing: 2px;
+}
+
+
+// data
+/deep/ .el-date-editor{
+    border:1px solid #ccc;
+    background-color: transparent;
+    height:25px;
+    line-height: 20px;
+    padding:0;
+    margin-top:2px;
+    box-sizing: border-box;
+}
+/deep/ .el-range-input, /deep/ .el-input__icon el-range__close-icon{
+    background-color: transparent;
+    color:#fff;
+    font-size: 12px;
+    text-align: top;
+    padding:0;
+    position: relative;
+    top:-4px
+}
+/deep/ .el-range__icon{
+    display: none;
+}
+/deep/ .el-date-editor--datetimerange.el-input__inner{
+    width:77%;
+    
+    display: inline-block;
+    
+}
+/deep/ ::placeholder{
+    color:#fff
+}
+/deep/ .el-range-separator{
+    color:#fff;
+    position: relative;
+    top:-4px
+}
+/deep/table,/deep/ tr,/deep/ td{
+    border-collapse: collapse !important;
+}
+/deep/ tr:hover, /deep/ td:hover, /deep/ table:hover{
+    background-color: none !important;
+}
+/deep/ .el-table__empty-block{
+    border:1px solid #fff;
+}
+/deep/ .el-table tbody tr:hover>td { 
+    background-color:transparent
+}
+
+::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width : 0px;  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 0px;
+  }
+::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 0px;
+  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background   : #535353;
+  }
+ ::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 0px;
+  background   : #ededed;
+  }
+
+::-webkit-scrollbar {
+	    display: none
+	  }
+      /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+  display: none;
+}
+</style>

src/components/SD-school/give-an-alarm/index.vue

@@ -19,11 +19,12 @@
           start-placeholder="开始日期"
           end-placeholder="结束日期"
           @change="changeDate"
+		  clearable
         >
         </el-date-picker>
       </el-form-item>
       <el-form-item label="类型" >
-        <el-select v-model="a" placeholder="请选择类型" size="mini" @change="changeSelect">
+        <el-select v-model="a" placeholder="请选择类型" size="mini" @change="changeSelect" clearable>
           <el-option :label="item.name" :value="item.code" v-for="(item, index) in type" :key="index" ></el-option>
         </el-select>
       </el-form-item>
@@ -102,7 +103,12 @@ export default {
 	  },
 	  loadMore() {
 		console.log('触发滚动加载事件')
-		this.dataChange()
+		if(this.formS.startTime){
+			this.dataChange()
+		}else{
+
+		}
+		
 		this.formS.current ++
 		shebeifyApi(this.formS).then(res =>{
 			if(res.data.records.length>0){
@@ -129,8 +135,8 @@ export default {
 					}
 					if(res.data.records[i].alarmContent){
 						if(this.isJSON(res.data.records[i].alarmContent)){
-							let alarmContent = JSON.parse(this.resInfo[i].alarmContent)
-							res.data.records[i].alarmContent = alarmContent[0].dp[0].property 
+							let alarmContent = JSON.parse(res.data.records[i].alarmContent)
+							res.data.records[i].alarmContent = alarmContent.dp[0].property 
 							// + " " +  alarmContent[0].dp[0].serial + " " +  alarmContent[0].dp[0].value + " " +  alarmContent[0].dp[0].status
 						}
 					}
@@ -219,39 +225,75 @@ export default {
 		  }
 	  },
 	  changeDate(val){
-		// this.resList = []
 		this.formS.current = 1
-		this.dataChange()
-		shebeifyApi(this.formS).then(res =>{
-			for(let i =0; i<res.data.records.length; i++){
-			  	if(res.data.records[i].systemCode == 0){
-					res.data.records[i].systemCode = "门禁"
-				}else if(res.data.records[i].systemCode == 1){
-					res.data.records[i].systemCode = "停车"
-				}else if(res.data.records[i].systemCode == 2){
-					res.data.records[i].systemCode = "消防应急"
-				}else if(res.data.records[i].systemCode == 3){
-					res.data.records[i].systemCode = "用户采购"
-				}else if(res.data.records[i].systemCode == 4){
-					res.data.records[i].systemCode = "会议系统"
-				}else if(res.data.records[i].systemCode == 5){
-					res.data.records[i].systemCode = "机房系统"
-				}else if(res.data.records[i].systemCode == 6){
-					res.data.records[i].systemCode = "音乐系统"
-				}else if(res.data.records[i].systemCode == 7){
-					res.data.records[i].systemCode = "视频系统"
-				}else if(res.data.records[i].systemCode == 8){
-					res.data.records[i].systemCode = "设备故障"
+		if(val){
+			console.log(val)
+			this.dataChange()
+			shebeifyApi(this.formS).then(res =>{
+				for(let i =0; i<res.data.records.length; i++){
+					if(res.data.records[i].systemCode == 0){
+						res.data.records[i].systemCode = "门禁"
+					}else if(res.data.records[i].systemCode == 1){
+						res.data.records[i].systemCode = "停车"
+					}else if(res.data.records[i].systemCode == 2){
+						res.data.records[i].systemCode = "消防应急"
+					}else if(res.data.records[i].systemCode == 3){
+						res.data.records[i].systemCode = "用户采购"
+					}else if(res.data.records[i].systemCode == 4){
+						res.data.records[i].systemCode = "会议系统"
+					}else if(res.data.records[i].systemCode == 5){
+						res.data.records[i].systemCode = "机房系统"
+					}else if(res.data.records[i].systemCode == 6){
+						res.data.records[i].systemCode = "音乐系统"
+					}else if(res.data.records[i].systemCode == 7){
+						res.data.records[i].systemCode = "视频系统"
+					}else if(res.data.records[i].systemCode == 8){
+						res.data.records[i].systemCode = "设备故障"
+					}
+					if(this.isJSON(res.data.records[i].alarmContent)){
+						let alarmContent = JSON.parse(res.data.records[i].alarmContent)
+						res.data.records[i].alarmContent = alarmContent.dp[0].property
+						// + " " +  alarmContent[0].dp[0].serial + " " +  alarmContent[0].dp[0].value + " " +  alarmContent[0].dp[0].status
+					}
 				}
-			  	if(this.isJSON(res.data.records[i].alarmContent)){
-					let alarmContent = JSON.parse(res.data.records[i].alarmContent)
-					res.data.records[i].alarmContent = alarmContent.dp[0].property
-					// + " " +  alarmContent[0].dp[0].serial + " " +  alarmContent[0].dp[0].value + " " +  alarmContent[0].dp[0].status
+				
+				this.resList = res.data.records
+			})
+		}else{
+			this.formS.startTime =''
+			this.formS.endTime =''
+			shebeifyApi(this.formS).then(res =>{
+				for(let i =0; i<res.data.records.length; i++){
+					if(res.data.records[i].systemCode == 0){
+						res.data.records[i].systemCode = "门禁"
+					}else if(res.data.records[i].systemCode == 1){
+						res.data.records[i].systemCode = "停车"
+					}else if(res.data.records[i].systemCode == 2){
+						res.data.records[i].systemCode = "消防应急"
+					}else if(res.data.records[i].systemCode == 3){
+						res.data.records[i].systemCode = "用户采购"
+					}else if(res.data.records[i].systemCode == 4){
+						res.data.records[i].systemCode = "会议系统"
+					}else if(res.data.records[i].systemCode == 5){
+						res.data.records[i].systemCode = "机房系统"
+					}else if(res.data.records[i].systemCode == 6){
+						res.data.records[i].systemCode = "音乐系统"
+					}else if(res.data.records[i].systemCode == 7){
+						res.data.records[i].systemCode = "视频系统"
+					}else if(res.data.records[i].systemCode == 8){
+						res.data.records[i].systemCode = "设备故障"
+					}
+					if(this.isJSON(res.data.records[i].alarmContent)){
+						let alarmContent = JSON.parse(res.data.records[i].alarmContent)
+						res.data.records[i].alarmContent = alarmContent.dp[0].property
+						// + " " +  alarmContent[0].dp[0].serial + " " +  alarmContent[0].dp[0].value + " " +  alarmContent[0].dp[0].status
+					}
 				}
-			}
-			
-			this.resList = res.data.records
-		})
+				
+				this.resList = res.data.records
+			})
+		}
+		
 	  },
 	  timestampToTime(timestamp) {
          var  date =  new  Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
@@ -326,7 +368,7 @@ export default {
     },
 	async getDataAdd(){
 		console.log(this.websocket)
-			
+
 		if(this.websocket.data?.systemCode){
 
 			if(this.websocket.data.systemCode == 0){
@@ -351,7 +393,6 @@ export default {
 
 			}
 		}
-		console.log(this.systemCode,this.websocket.data.systemCode)
 		if(this.systemCode){
 			if(this.websocket.data?.systemCode == this.systemCode){
 				if(this.websocket.describe =="infoAdd"){
@@ -367,22 +408,36 @@ export default {
 					}
 				}
 				this.resList.unshift(this.websocket.data)
+			}else{
+				//websocket加入不同类型
+				if(this.websocket.describe =="infoAdd"){
+					this.websocket.data.createTime = this.timestampToTime(this.websocket.data.alarmTime)
+					let alarmContent = JSON.parse(this.websocket.data.alarmContent)
+					this.websocket.data.alarmContent = alarmContent.dp[0].property
+				}else{
+					if(this.websocket.data.alarmContent){
+						let alarmContent = JSON.parse(this.websocket.data.alarmContent)
+						this.websocket.data.createTime = this.timeFormat(alarmContent[0].timeStamp)
+						this.websocket.data.alarmContent = alarmContent.dp[0].property 
+						// + " " +  alarmContent[0].dp[0].serial + " " +  alarmContent[0].dp[0].value + " " +  alarmContent[0].dp[0].status
+					}
+				}
 			}
 		}else{
 			if(this.websocket.describe =="infoAdd"){
-				console.log(111)
 				let alarmContent = JSON.parse(this.websocket.data.alarmContent)
 				this.websocket.data.createTime = this.timestampToTime(this.websocket.data.alarmTime)
 				this.websocket.data.alarmContent = alarmContent.dp[0].property 
 			}else{
-				
+	
 				if(this.websocket.data?.alarmContent){
+			
 					let alarmContent = JSON.parse(this.websocket.data.alarmContent)
 					this.websocket.data.createTime = this.timeFormat(alarmContent[0].timeStamp)
 					this.websocket.data.alarmContent = alarmContent[0].dp[0].property 
 					// + " " +  alarmContent[0].dp[0].serial + " " +  alarmContent[0].dp[0].value + " " +  alarmContent[0].dp[0].status
 				}else{
-
+				
 					if(this.websocket.data.alarams[0].deviceType == "00"){
 						this.websocket.data.systemCode = "门禁"
 					}else if(this.websocket.data.alarams[0].deviceType == "01"){

src/components/SD-school/monitor/index.vue

@@ -63,24 +63,26 @@ export default {
 
       player: null,
       vedioData:[
-        {
-          "title": "3层东楼梯","cameraIndexCode":"4db3dfbea6894b02a24673147a64d6c5","path":"",
-        },
         // {
-        //   "title": "4层东电梯厅","cameraIndexCode":"eeced6dccd5845e8ac57530d28d0285c","path":"",
+        //   "title": "3层东楼梯","cameraIndexCode":"4db3dfbea6894b02a24673147a64d6c5","path":"",
         // },
-        {
-          "title": "5层西电梯厅","cameraIndexCode":"3841eccccbe248b9863a941cf00453dc","path":"",
-        },
-        {
-          "title": "6层东东楼梯","cameraIndexCode":"d61f260c25e9463f880d2ecf702b92b6","path":"",
-        },
         // {
-        //   "title": "7层东电梯厅","cameraIndexCode":"ce50d61896ee4ad19fa0502d60576f4a","path":"",
+        //   "title": "5层西电梯厅","cameraIndexCode":"3841eccccbe248b9863a941cf00453dc","path":"",
         // },
         // {
-        //   "title": "9层西电梯厅","cameraIndexCode":"abdcf630ece64c00a0c82aadaeaeaec8","path":"",
+        //   "title": "6层东东楼梯","cameraIndexCode":"d61f260c25e9463f880d2ecf702b92b6","path":"",
         // },
+
+        {
+          "title": "一层西南角西楼梯口","cameraIndexCode":"7f7694c14e7f4f3fbc59f6c95d6faea6","path":"",
+        },
+        {
+          "title": "3层东楼梯","cameraIndexCode":"5474106c1fa74d3aac1321bac4557240","path":"",
+        },
+        {
+          "title": "7层西电梯厅","cameraIndexCode":"068a9894fa2c431ca829edee61c35a69","path":"",
+        }
+
         
         
         
@@ -107,7 +109,7 @@ export default {
         for(let i = 0; i<this.vedioData.length; i++){
           let list = videojs('video' + (i + 1) , {
             events: [],
-            playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
+            //playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
             autoplay: "true", // 如果true,浏览器准备好时开始回放。
             controls: true, //  控制条
             preload: 'auto', // 视频预加载
@@ -147,7 +149,7 @@ export default {
       setTimeout(()=>{
         let list = videojs(id, {
             events: [],
-            playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
+            // playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
             autoplay: "true", // 如果true,浏览器准备好时开始回放。
             controls: true, //  控制条
             preload: 'auto', // 视频预加载
@@ -213,7 +215,7 @@ export default {
             this.init()
           })
       },2000)
-      
+      this.init()
       
     },
     selectRegion(){

src/components/SD-school/parking-lot/echart.js

@@ -1,8 +1,13 @@
 import * as echarts from "echarts";
 export default function getData(params) {
+    var h_hour = new Date().getHours()
+    console.log(h_hour)
+    params = params.slice(0, h_hour + 1)
+
+
     let resList = params.map(val => {
             return {
-                time: val.createTime + "时",
+                time: (val.id - 1) + "时",
                 num: val.tiatlFreeNum
                     // num:val.tiatlFreeNum + Math.ceil(Math.random()*300)
             }

src/components/SD-school/parking-lot/index.vue

@@ -12,7 +12,7 @@
           <img src="../../../assets/image/car2.png" alt="" />
         </el-col>
         <el-col class="carNumbderLot">
-          <span class="green">{{resList && resList.totalNum || 0}}</span>
+          <span class="green">{{resList1.total_parking_space ? resList1.total_parking_space : 0}}</span>
           <span>车位总数</span>
         </el-col>
       </el-col>
@@ -21,7 +21,7 @@
           <img src="../../../assets/image/car1.png" alt="" />
         </el-col>
         <el-col class="carNumbderLot">
-          <span class="yellow">{{resList && resList.tiatlFreeNum || 0}}</span>
+          <span class="yellow">{{resList1.empty_parking_space ? resList1.empty_parking_space : 0}}</span>
           <span>空闲车位总数</span>
         </el-col>
       </el-col>
@@ -35,12 +35,12 @@
 <script>
 import * as echarts from "echarts";
 import echartsGet from './echart'
-import { parkingLotApi2 } from "@/plugins/api"
+import { parkingLotAllApi,parkingLotListApi } from "@/plugins/api"
 export default {
   props:['resInfo', 'websocket'],
   data() {
     return {
-      resList: [],
+      resList1: {},
 	    resList2: [],
     };
   },
@@ -60,45 +60,14 @@ export default {
   },
   methods:{
     async getData(){
-      if(this.websocket.data){
-        this.resList=this.websocket.data
-      }else{
-        this.resList=this.resInfo
-      }
-        var myDate = new Date();
-        let tYear = myDate.getFullYear();
-        let tMonth = myDate.getMonth() + 1;
-        let lastDay= new Date(tYear,tMonth,0).getDate()
-        this.month = tMonth
-        let day = myDate.getDate(); //获取当前日(1-31)
-        let hours = myDate.getHours(); //获取当前小时数(0-23)
-        let minutes = myDate.getMinutes(); //获取当前分钟数(0-59)
-        let seconds = myDate.getSeconds(); //获取当前秒数(0-59)
-        // this.year = tYear + '年'
-        if(tMonth<10){
-          tMonth = '0' + tMonth
-          this.monthParameter = tMonth
-        }else{
-          this.monthParameter = tMonth
-        }
-        if(day<10){
-          day = '0' + day
-        }else{
-          day =  day
-        }
-        if(minutes<10){
-          minutes = '0' + minutes
-        }else{
-          minutes =  minutes
-        }
-        if(seconds<10){
-          seconds = '0' + seconds
-        }else{
-          seconds =  seconds
-        }
-        let startTime = tYear + '-' + tMonth + '-' + day + ' ' + "00:00:00"
-        let endTime = tYear + '-' + tMonth + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
-        parkingLotApi2({startTime:startTime,endTime:endTime}).then(res =>{
+        parkingLotAllApi().then(res =>{
+          console.log(res)
+          this.resList1 = JSON.parse(res.data).area_info[0]
+        })
+        parkingLotListApi({startTime:this.$utils.nowDay().startTime,endTime:this.$utils.nowDay().endTime}).then(res =>{
+          let data1 = res.data.slice(0,new Date().getHours() + 1)
+          let data2 = data1.slice(-1)
+          this.tiatlFreeNum = data2[0].tiatlFreeNum
           echarts.init(this.$refs.echartD).setOption(echartsGet(res.data))
         })
 	},

src/main.js

@@ -9,7 +9,8 @@ import hls from 'videojs-contrib-hls'
 import store from './store'
 import './assets/font/index.scss'
 import md5 from 'js-md5';
-
+import utils from "@/util/utils"; // @ 默认的是 src 文件夹，后面省略了utils.js 后面的后缀名js
+Vue.prototype.$utils = utils; //直接定义在vue的原型上面
 Date.prototype.Format = function(fmt) {
     let o = {
         'M+': this.getMonth() + 1, // 月份
@@ -27,6 +28,7 @@ Date.prototype.Format = function(fmt) {
     return fmt;
 };
 Vue.prototype.$md5 = md5;
+Vue.config.devtools = true;
 // 在main.js文件钟准备一个滚动加载指令
 Vue.directive('loadmore', {
     bind(el, binding) {

src/plugins/api.js

@@ -1,6 +1,5 @@
 import request from '@/plugins/request'
-// import { service, request1 } from '@/plugins/request'
-// import { serviceXinfa, request2 } from '@/plugins/request'
+
 
 //天气
 export function aliWeather(query) {
@@ -12,10 +11,25 @@ export function aliWeather(query) {
 }
 
 
+//门禁系统
+// export function accessControlApi(query) {
+//     return request({
+//         url: 'sdp/messageDeviceInto/count',
+//         method: 'get',
+//         params: query
+//     })
+// }
 
-export function accessControlApi(query) {
+export function accessControlAllApi(query) {
+    return request({
+        url: 'sdp/mRecKqmj/inOutCount',
+        method: 'get',
+        params: query
+    })
+}
+export function accessControlListApi(query) {
     return request({
-        url: 'sdp/messageDeviceInto/count',
+        url: 'sdp/mRecKqmj/list',
         method: 'get',
         params: query
     })
@@ -39,22 +53,31 @@ export function emergencyDisasterPreventionApi(query) { //改/加
 
 
 //停车系统
-export function parkingLotApi(query) { //各车位数据
+export function parkingLotAllApi(query) { //各车位数据
     return request({
         url: 'sdp/messageDevicePark/listParkInfo',
         method: 'get',
         params: query
     })
 }
-export function parkingLotApi2(query) { //图表数据
+// export function parkingLotApi2(query) { //图表数据
+//     return request({
+//         url: 'sdp/messageDevicePark/listParkByDate',
+//         method: 'get',
+//         params: query
+//     })
+// }
+export function parkingLotListApi(query) { //图表数据不计算
     return request({
-        url: 'sdp/messageDevicePark/listParkByDate',
+        url: 'sdp/messageDevicePark/list',
         method: 'get',
         params: query
     })
 }
 
 
+
+
 export function infoApi(query) { //告警分页
     return request({
         url: 'sdp/tbAlarm/getCheckCount',
@@ -105,14 +128,21 @@ export function meetingStatusApi(query) { //当前会议室状态
 
 //视频
 
-export function cameraPreviewURL(query) { //当前会议室状态
+export function nodes(query) { //摄像头名称获取code
+    return request({
+        url: 'nodes',
+        method: 'get',
+        params: query
+    })
+}
+export function cameraPreviewURL(query) { //code获取视频地址
     return request({
         url: 'cameraPreviewURL',
         method: 'get',
         params: query
     })
 }
-export function videoUrl(query) { //当前会议室状态
+export function videoUrl(query) {
     return request({
         url: 'videoUrl',
         method: 'get',
@@ -149,11 +179,20 @@ export function tbDevice(query) { //设备编号  查看设备详情
 }
 
 
-//xinfa
+//信发设备
 export function xinfaToken(query) { //设备编号  查看设备详情
     return request({
         url: 'xftoken',
         method: 'get'
 
+    })
+}
+//ba设备
+export function ba(query) { //设备编号  查看设备详情
+    return request({
+        url: '/sdp/ba',
+        method: 'get',
+        params: query
+
     })
 }

src/plugins/axios.js

@@ -5,7 +5,7 @@ import axios from "axios";
 
 // Full config:  https://github.com/axios/axios#request-config
 // axios.defaults.baseURL = 'http://120.55.70.156:80/api';
-// axios.defaults.baseURL = 'http://172.16.120.92:8089';
+axios.defaults.baseURL = 'http://10.108.34.2:80'; //向日葵'
 // axios.defaults.baseURL = 'http://172.16.120.104:8089';
 // axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || 'http://120.55.70.156:80/api';
 // axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

src/plugins/request.js

@@ -10,15 +10,8 @@ const service = axios.create({
     // 超时
     timeout: 10000
 })
-const serviceXinfa = axios.create({
-        // axios中请求配置有baseURL选项，表示请求URL公共部分
-        //baseURL: "http://101.133.214.75:81/sdpart/", //内测试
-        baseURL: "http://172.16.120.104:8089/", //本地
-        //baseURL: "http://10.108.34.2:80/sdpart/", //山东
-        // 超时
-        timeout: 10000
-    })
-    // request拦截器
+
+// request拦截器
 service.interceptors.request.use(config => {
     // 是否需要设置 token
     // const isToken = (config.headers || {}).isToken === false
@@ -58,44 +51,6 @@ service.interceptors.request.use(config => {
     Promise.reject(error)
 })
 
-serviceXinfa.interceptors.request.use(config => {
-    // 是否需要设置 token
-    // const isToken = (config.headers || {}).isToken === false
-    // if (getToken() && !isToken) {
-    //     config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
-    // }
-    // 导出请求blob类型或设置其他类型
-    if (config.responseType) {
-        config.responseType = config.responseType
-    }
-    // get请求映射params参数
-    if (config.method === 'get' && config.params) {
-        let url = config.url + '?';
-        for (const propName of Object.keys(config.params)) {
-            const value = config.params[propName];
-            var part = encodeURIComponent(propName) + "=";
-            if (value !== null && typeof(value) !== "undefined") {
-                if (typeof value === 'object') {
-                    for (const key of Object.keys(value)) {
-                        let params = propName + '[' + key + ']';
-                        var subPart = encodeURIComponent(params) + "=";
-                        url += subPart + encodeURIComponent(value[key]) + "&";
-                    }
-                } else {
-                    url += part + encodeURIComponent(value) + "&";
-                }
-            }
-        }
-        url = url.slice(0, -1);
-        config.params = {};
-        config.url = url;
-
-    }
-    return config
-}, error => {
-    console.log(error)
-    Promise.reject(error)
-})
 
 // 响应拦截器
 service.interceptors.response.use(res => {
@@ -107,24 +62,10 @@ service.interceptors.response.use(res => {
     }
 )
 
-serviceXinfa.interceptors.response.use(res => {
-        return res.data
-    },
-    error => {
-        console.log('err' + error)
-        return Promise.reject(error)
-    }
-)
 
 
 
 
 
 
-export default service
-// export function request1(service) {
-//     return service;
-// }
-// export function request2(serviceXinfa) {
-//     return serviceXinfa;
-// }
+export default service

src/store/index.js

@@ -6,9 +6,11 @@ Vue.use(Vuex)
 export default new Vuex.Store({
     state: {
         windowWidth: 1920 + 1080,
-        wsUrl: '172.16.120.104:8089/', //本地
+
+        //wsUrl: 'localhost:8089/', //本地
+        //wsUrl: '172.16.120.104:8089/', //本地
         //wsUrl: '101.133.214.75:81', //内测试
-        //wsUrl: '10.108.34.2:80/sdws', //山东
+        wsUrl: '10.108.34.2:80/sdws', //山东
 
 
         weaterRes: {}

src/util/utils.js

@@ -0,0 +1,34 @@
+export default {
+    //当天时间
+    nowDay() {
+        var myDate = new Date();
+        let tYear = myDate.getFullYear();
+        let tMonth = myDate.getMonth() + 1;
+        let lastDay = new Date(tYear, tMonth, 0).getDate()
+        this.month = tMonth
+        let day = myDate.getDate(); //获取当前日(1-31)
+        let hours = myDate.getHours(); //获取当前小时数(0-23)
+        let minutes = myDate.getMinutes(); //获取当前分钟数(0-59)
+        let seconds = myDate.getSeconds(); //获取当前秒数(0-59)
+        // this.year = tYear + '年'
+        if (tMonth < 10) {
+            tMonth = '0' + tMonth
+            this.monthParameter = tMonth
+        }
+        if (day < 10) {
+            day = '0' + day
+        }
+        if (minutes < 10) {
+            minutes = '0' + minutes
+        }
+        if (seconds < 10) {
+            seconds = '0' + seconds
+        }
+        let startTime = tYear + '-' + tMonth + '-' + day + ' ' + "00:00:00"
+        let endTime = tYear + '-' + tMonth + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
+        return { startTime, endTime }
+    },
+    hello() {
+        console.log("Hello World!")
+    }
+}

src/views/Home.vue

@@ -12,7 +12,7 @@
 			</template>
 		</el-row>
 		<el-row class="contnetCenter" >
-			<!-- <iframe src="https://www.thingjs.com/s/cd7b1592538e0f4a9572c55e?params=105b0f77fd24654d4eebc434e9" frameborder="0" id="iframe"></iframe> -->
+			<!-- <iframe src="https://www.thingjs.com/s/cd7b1592538e0f4a9572c55e?params=105b0f77fd24654d4eebc434e9" frameborder="0" id="iframe" ></iframe> -->
 		</el-row>
 		<el-row class="contentClass contnetRight">
 			<emergencyDisasterPrevention class="emergencyDisasterPrevention" :resInfo="data.emergencyDisasterPrevention"  />
@@ -36,14 +36,14 @@ import giveAnAlarm from "../components/SD-school/give-an-alarm"; // 综合告警
 
 import SpringFrame from "../components/SD-school/Spring-frame"; // 弹框
 import { 
-	accessControlApi, 
+	accessControlAllApi, 
 	computerRoomApi, 
 	emergencyDisasterPreventionApi, 
-	parkingLotApi, 
 	infoApi,
 	typeApi,
 	shebeifyApi,
 	tbDevice,
+	nodes,
 } from "@/plugins/api";
 export default {
   	name: "Home",
@@ -86,18 +86,25 @@ export default {
 			springFrameState:true,//弹框
 			item:{ //弹框下各系统板块
 				"warningState":false,
-				"meetingState":true,
+				"meetingState":false,
 				"equipmentState":false,
 				"videoState":false,
 				"xinfaState":false,
+				"baState":false,
+				"entranceGuardState":true,
 
 				"warningMessage":{},
 				"equipmentMessage":{},
-				"videoMessage":{},
+				"videoMessage":{
+					name:undefined,
+					code:undefined
+				},
 				"xinfaMessage":{},
 				"time":null,
 				"close":false,
 				"xinfaMessage":{},
+				"baMessage":{},
+				"entranceGuardMessage":{},
 				
 				// "alertMessage":{ //
 				// 	name:null,
@@ -111,6 +118,7 @@ export default {
 	},
 	created() {
 		this.getData()
+		// this.ceba()
 	},
 	mounted() {
 		var that = this;
@@ -121,25 +129,32 @@ export default {
 			var data = event.data;
 			if (isDOM == true) {
 				if ("param" in data == true) {
-					if (data.param.name === "1楼会议室" && data.param.id === "109") { //会议室弹框开启
-						// setTimeout(()=>{
-						// 	that.springFrameState = false
-						// },1)
-						// setTimeout(()=>{
-						// 	that.springFrameState = true
-						// 	that.item.meetingState = true
-						// },2)
-						console.log("会议室弹框暂时关闭")
+					let name = data.param.name
+					if (name === "1楼会议室" && data.param.id === "109") { //会议室弹框开启
+						that.SpringFrameChange()
+						setTimeout(()=>{
+							that.springFrameState = true
+							that.item.meetingState = true
+						},2)
+					}else if (name.indexOf("摄像头")>1) { 
+						nodes({"name":data.param.id,"pageNo":1,"pageSize":10}).then(res =>{ //获取code
+							console.log(res)
+							that.SpringFrameChange()
+							setTimeout(()=>{
+								that.springFrameState = true
+								that.item.videoState = true
+								that.item.videoMessage.name = data.param.id
+								that.item.videoMessage.code = res.data.list[0].indexCode
+							},2)
+						})
 					}else if(data.param.id =="B1" || data.param.id =="F1" || data.param.id =="F2" || data.param.id =="F3" || data.param.id =="F4" 
 						|| data.param.id =="F5" || data.param.id =="F6" || data.param.id =="F7" || data.param.id =="F8" || data.param.id =="F9" 
 						|| data.param.id =="F10" || data.param.id =="F11" || data.param.id =="F12" || data.param.id =="F13"){ //楼层id过滤
 						console.log("楼层")
 					}else{
 						tbDevice(data.param.id).then(res =>{ //设备信息查询
-						console.log(res)
-							setTimeout(()=>{
-								that.springFrameState = false
-							},1)
+							console.log(res)
+							that.SpringFrameChange()
 							setTimeout(()=>{
 								console.log(res.data.detail)
 								let name = data.param.name
@@ -151,27 +166,35 @@ export default {
 								}else{//设备
 									console.log("设备")
 									if(res.data.detail){
-										if(res.data.detail.manufacturer == 3){
+										if(res.data.detail.manufacturer == 3){//信发
 											console.log("信发")
 											that.springFrameState = true
 											that.item.xinfaState = true
 											that.item.xinfaMessage = res.data.detail
+										}else if(res.data.detail.manufacturer == 4){//ba
+											console.log("ba设备")
+											that.springFrameState = true
+											that.item.baState = true
+											that.item.baMessage = res.data.detail
+										}else if(res.data.detail.manufacturer == 5){//门禁
+											console.log("门禁设备")
+											that.springFrameState = true
+											that.item.entranceGuardState = true
+											that.item.entranceGuardMessage = res.data.detail
 										}else{
-											console.log("信发、摄像头外设备")
+											console.log("信发、摄像头、ba、门禁外设备")
 											that.springFrameState = true
 											that.item.equipmentState = true
 											that.item.equipmentMessage = res.data.detail
 										}
 									}else{
-										console.log("信发、摄像头外设备")
+										console.log("信发、摄像头、ba、门禁外设备 数据为空")
 										that.springFrameState = true
 										that.item.equipmentState = true
 										that.item.equipmentMessage = res.data.detail
 									}
 								}
 							},2)
-							
-							
 						})
 					}
 				}
@@ -179,13 +202,46 @@ export default {
 		},false)
 	},
 	methods: {
+		mouseclick(event){
+			if (event.button == 0) {
+				
+			} else if (event.button == 1) {
+				
+			}else if (event.button == 2) {
+				console.log("右键");
+				//this.SpringFrameChange()
+			}
+		},
+		ceba(){
+			tbDevice("FCU-02F-01").then(res =>{ //设备信息查询	
+				if(res.data.detail){
+					if(res.data.detail.manufacturer == 3){//信发
+						console.log("信发")
+						this.springFrameState = true
+						this.item.xinfaState = true
+						this.item.xinfaMessage = res.data.detail
+					}else if(res.data.detail.manufacturer == 4){//ba
+						console.log("ba设备")
+						this.springFrameState = true
+						this.item.baState = true
+						this.item.baMessage = res.data.detail
+
+					}else{
+						console.log("信发、摄像头、ba外设备")
+						this.springFrameState = true
+						this.item.equipmentState = true
+						this.item.equipmentMessage = res.data.detail
+					}
+				}
+			})
+		},
 		postMsg(newValue) {
 			var myframe = document.getElementById("iframe"); //获取iframe 
 			myframe.contentWindow.postMessage({ state: false, name: "门禁" }, "*"); //childDomain是子页面的源（协议+主机+端口号）
 		},
 		async getData(){
 			
-			accessControlApi().then(res =>{ // 门禁进出入统计
+			accessControlAllApi().then(res =>{ // 门禁进出入统计
 				this.data.accessControl = res.data
 			})
 			computerRoomApi().then(res =>{ // 机房温度
@@ -194,9 +250,9 @@ export default {
 			emergencyDisasterPreventionApi().then(res =>{ //应急防灾
 				this.data.emergencyDisasterPrevention = res.data
 			})
-			parkingLotApi().then(res =>{ //停车场统计
-				this.data.parkingLot = res.data
-			})
+			// parkingLotApi().then(res =>{ //停车场统计
+			// 	this.data.parkingLot = res.data
+			// })
 			infoApi().then(res =>{ //综合信息统计 告警信息
 				this.data.info = res.data
 			})
@@ -205,11 +261,11 @@ export default {
 				this.data.giveAnAlarm = res.data.records
 				})
 			// })
-			console.log(this.$store.state.wsUrl)
-			console.log("ws://" + this.$store.state.wsUrl + "/top/WS/alarmPush")
+			// console.log(this.$store.state.wsUrl)
+			// console.log("ws://" + this.$store.state.wsUrl + "/top/WS/alarmPush")
 			if ("WebSocket" in window) {
 				this.ws = new WebSocket("ws://" + this.$store.state.wsUrl + "/top/WS/alarmPush");
-				console.log(this.ws)
+				// console.log(this.ws)
 				this.ws.onopen = ()=> {
 				console.log("websocket连接成功");
 				//this.sendWs({aa:22});
@@ -288,6 +344,8 @@ export default {
 			this.item.meetingState = false
 			this.item.equipmentState = false
 			this.item.videoState = false
+			this.item.xinfaState = false
+			this.item.baState = false
 		},
 		// roomBox(val){
 		// 	val === 'left' ? this.isLeft = !this.isLeft : (this.isRight = !this.isRight)

vue.config.js

@@ -74,9 +74,10 @@ module.exports = {
         proxy: {
             // 配置多个跨域
             '/': {
-                //target: 'http://10.108.34.2:80/sdpart', //向日葵
+                target: 'http://10.108.34.2:80/sdpart', //向日葵
                 //target: 'http://101.133.214.75:81/sdpart/', //线上测试
-                target: 'http://172.16.120.104:8089/', //本地
+                //target: 'http://172.16.120.104:8089/', //本地
+                //target: 'http://localhost:8089/', //本地
                 changeOrigin: true,
                 pathRewrite: {
                     '': '/'