submit

src/App.vue

@@ -28,4 +28,4 @@ if(getQueryObject().token){
     box-sizing: border-box;
     overflow: hidden;
 }
-</style>
+</style>

src/api/goaf/sensor.js

@@ -55,3 +55,37 @@ export function sensordatatatis(data) {
     data
   })
 }
+
+// 获取所有采空区摄像头告警数量
+export function goafCameraAlarmNumber(params) {
+  return request({
+    url: '/goaf/goafcameraalarm/goafdevstatis',
+    method: 'GET',
+    params
+  })
+}
+// 获取所有采空区摄像头告警信息
+export function goafCameraAlarm(params) {
+  return request({
+    url: '/goaf/goafcameraalarm/list',
+    method: 'GET',
+    params
+  })
+}
+// 分页获取所有采空区摄像头告警信息
+export function goafCameraAlarmByPage(params) {
+  return request({
+    url: '/goaf/goafcameraalarm/page',
+    method: 'GET',
+    params
+  })
+}
+// 处理
+export function goafCameraAlarmHandle(data) {
+  return request({
+    url: '/goaf/goafcameraalarm/update',
+    method: 'PUT',
+    data
+  })
+}
+

src/components/HkwsVideo/iframe.vue

@@ -1,6 +1,6 @@
 <template>
     <div id="divPluginIframe">
-        <a :href="iframeSrc" target="_blank">若监控无法播放请点击此处</a> 
+        <a :href="iframeSrc" target="_blank" v-if="state">若监控无法播放请点击此处</a> 
         <iframe :src="iframeSrc" frameborder="0" @load="iframeLoaded"></iframe>
     </div>
 
@@ -11,6 +11,7 @@
     data(){
         return{
             iframeSrc:"",
+            state:false,
             oPlugin:{
                 iWidth: 650,             // plugin width
                 iHeight: 450             // plugin height                
@@ -35,6 +36,7 @@
             szUsername= "",     // device username
             szPassword= "", // device password  
         }){
+            this.state=true
             this.iframeSrc=`${streamServeUrl}?name=${szUsername}&pwd=${szPassword}&ip=${szIP}&port=${szPort}`
         }
     }

src/router/index.js

@@ -28,33 +28,24 @@ const routes = [
           path: 'check',
           name: 'particulars_check',
           component: () => import('@/views/particulars/check.vue')
-        }
-    ]   
-  },
-  {
-    path: '/particulars',
-    name: 'goaf-info',    
-    component:Main,
-    children:[
+        },
         {
           path: 'goaf-info',
           name: 'particulars_goaf-info',
           component: () => import('@/views/particulars/goaf_info.vue')
-        }
-    ]   
-  }, 
-  {
-    path: '/particulars',
-    name: 'video',    
-    component:Main,
-    children:[
+        },
         {
           path: 'particulars-video',
-          name: 'particulars-video',
+          name: 'particulars_gvideo',
           component: () => import('@/views/particulars/video.vue')
         }
     ]   
-  } 
+  },
+  {
+    path: '/goafcameraalarm',
+    name: 'goafcameraalarm',    
+    component: () => import('@/views/goafCameraAlarm')   
+  }
 ]
 
 const router = createRouter({

src/views/goafCameraAlarm/Model.vue

@@ -0,0 +1,37 @@
+<template>
+    <el-dialog
+        v-model="dialogVisible"
+        title="处理入侵预警"
+        width="40%"
+    >
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="dialogVisible = false">取消</el-button>
+                <el-button type="primary" @click="dialogVisible = false">
+                提交
+                </el-button>
+            </span>
+        </template>
+    </el-dialog>   
+    
+</template>
+<script>
+import { goafCameraAlarmHandle} from '@/api/goaf/sensor'
+    export default {
+        name:"goafCameraAlarmModal",
+        data(){
+            return{
+                dialogVisible:false,
+                viewData:{
+
+                }
+            }
+        },
+        methods:{
+            showEditModal(data){
+                this.viewData=data
+                this.dialogVisible=true
+            }
+        }
+    }
+</script>

src/views/goafCameraAlarm/index.vue

@@ -0,0 +1,180 @@
+<template>
+    <div class="goafCameraAlarm">
+        <div class="table-head" >
+            <div class="tab">
+                <el-button class="tab-item" :type="conditions.goafAlarmStatus===0?'primary':''" @click="tabClick(0)">未处理</el-button>
+                <el-button class="tab-item"  :type="conditions.goafAlarmStatus===1?'primary':''" @click="tabClick(1)">已处理</el-button>              
+            </div>  
+            <div>
+                <el-button type="primary" @click="batchHandle" v-if="selection.length>0">批量处理</el-button>           
+            </div> 
+        </div>
+        <el-table
+            ref="multipleTableRef"
+            :data="dataList"
+            style="width:100%"
+            row-class-name="CustomRowClassName"
+            @selection-change="handleSelectionChange"
+        >
+            <el-table-column type="selection" width="55" v-if="conditions.goafAlarmStatus===0" />
+            <el-table-column type="index" width="55" label="序号" v-if="conditions.goafAlarmStatus===1" />
+            <el-table-column property="goafAlarmStatus" label="安装位置" width="200">
+                <template #default="scope">{{NumConvertLM(scope.row.goafOrebelt)}}-{{scope.row.goafOrebody}}-{{scope.row.goafOreheight}}-{{scope.row.goafName}}</template>           
+            </el-table-column>
+            <!-- <el-table-column property="goafDevId" label="设备ID" /> -->
+            <el-table-column property="goafAlarmBegintime" label="抓拍图片"  >
+                <template #default="scope">
+                    <div class="snap-image__preview">
+                        <el-image
+                            style="width: 50px; height: 50px"
+                            :src="scope.row.goafSnapPicurl"
+                            :preview-src-list="[scope.row.goafSnapPicurl]"
+                            preview-teleported
+                            fit="cover"
+                        />
+                    </div>                    
+                </template>           
+            </el-table-column>
+            <el-table-column property="goafAlarmStatus" label="预警状态" width="100">
+                <template #default="scope">{{ scope.row.goafAlarmStatus===0?'未处理':'已处理' }}</template>           
+            </el-table-column>
+            <el-table-column property="goafAlarmBegintime" label="预警开始时间" width="240"  />
+            <el-table-column property="goafAlarmEndtime" label="预警结束时间" width="240" v-if="conditions.goafAlarmStatus===1" />
+            <el-table-column property="goafAlarmHandleAccountname" label="处理人" v-if="conditions.goafAlarmStatus===1"  />
+            <el-table-column property="goafAlarmHandleGroupname" label="处理部门"  v-if="conditions.goafAlarmStatus===1" />
+            <el-table-column property="goafAlarmType" label="预警类型"  >
+                <template #default="scope">{{ scope.row.goafAlarmType===4?'入侵预警':'' }}</template>           
+            </el-table-column>
+            <el-table-column fixed="right" label="操作" width="120" v-if="conditions.goafAlarmStatus===0">
+                <template #default="scope">
+                    <el-button link type="primary" size="small" @click="showHandModel(scope.row)"
+                    >处理</el-button
+                    >
+                </template>
+            </el-table-column>
+        </el-table>
+        <div class="el-pagination-wrap">
+            <el-pagination small layout="prev, pager, next" 
+            :total="total"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange" />
+        </div>   
+        <handle-model ref="handle-model"></handle-model>     
+    </div>
+</template>
+<script>
+import {ElMessage} from 'element-plus'
+import { goafCameraAlarmByPage,goafCameraAlarmHandle} from '@/api/goaf/sensor'
+import { NumConvertLM ,parseTime} from '@/utils'
+import HandleModel from './Model.vue'
+    export default {
+        name:"goafCameraAlarm",
+        components:{
+            HandleModel
+        },
+        data(){
+            return{
+                conditions: {
+                    page: 1,
+                    limit: 10,
+                    goafAlarmStatus:0
+                },  
+                dataList:[],
+                total:0,
+                selection:[] 
+            }
+        },
+        created(){
+            this.getData()
+        },
+        methods:{
+            NumConvertLM,
+            getData(){
+                goafCameraAlarmByPage(this.conditions).then((res)=>{
+                    const {total,data}=res
+                    this.dataList=data
+                    this.total=total
+                })
+            },
+            tabClick(state){
+                this.conditions.goafAlarmStatus=state
+                this.getData()
+            },
+            showHandModel(data){
+                // let user=localStorage.getItem('user');
+                // user=JSON.parse(user)
+                goafCameraAlarmHandle({
+                    ...data,
+                    goafAlarmStatus:1,
+                    goafAlarmEndtime:parseTime(new Date())
+                }).then(()=>{
+                    ElMessage.success('处理完毕')
+                    this.getData()
+                })
+            },
+            async batchHandle(){
+                if(this.selection.length<1){
+                    ElMessage.error('请选择要处理的预警')
+                    return
+                }
+                for(let i=0;i<this.selection.length;i++){
+                    await goafCameraAlarmHandle({
+                        ...this.selection[i],
+                        goafAlarmStatus:1,
+                        goafAlarmEndtime:parseTime(new Date())
+                    })
+                }
+                this.getData()
+            },
+            handleSelectionChange(selection){
+                this.selection=selection
+            },
+            handleSizeChange(limit){
+                this.conditions.limit=limit
+                this.getData()
+            },
+            handleCurrentChange(pageNumber){
+                this.conditions.page=pageNumber
+                this.getData()
+            }     
+        }
+    }
+</script>
+<style>
+.el-table .CustomRowClassName {
+  --el-table-tr-bg-color: var(--el-color-success-light-9);
+}
+</style>
+
+<style lang="scss" scoped>
+.goafCameraAlarm{
+    .el-pagination-wrap{
+        float: right;
+        margin-top: 5vh;
+        ::v-deep{
+            .el-pager li,button{
+                background-color: #00539F;
+                margin-left: 10px;
+                color: rgba(255, 255, 255, 0.75);
+                &.is-active{
+                    background-color: rgba(0, 131, 207, 1);
+                }
+            }
+        }
+    }
+    .table-head{
+        display: flex;
+        justify-content:space-between;
+        align-items: center;
+        background-color: #fff;
+        padding:10px;
+        border-bottom: 1px solid #f7f0f0;
+        .tab{
+            .tab-item{
+                margin: 0;
+                border-radius: 0;
+            }
+        }
+    }
+}
+</style>

src/views/home/components/SensorInfoStatistics.vue

@@ -1,38 +1,54 @@
 <template>
     <div class="item SensorInfoStatistics">
         <div class="title">
-            <span class="name">传感器实时信息统计</span>
-            <span class="number">{{total}}</span>
+            <span class="name">区域入侵预警<span class="number" style="padding-left:10px;">{{total}}</span></span>
+            <span class="detail" @click="linkTo">详情>></span>    
         </div>
         <div class="container">
             <!-- <div id="sensor-info-chart" v-if="status"></div>    -->
-            <div class="warn-item" @click="showWarnModel">
+            <!-- <div class="warn-item" @click="showWarnModel">
                 <div class="tag" v-if="warnInfo.goafName">{{NumConvertLM(warnInfo.goafOrebelt)}}-{{warnInfo.goafOrebody}}-{{warnInfo.goafOreheight}}-{{warnInfo.goafName}}</div>
-            </div>
+            </div> -->
+
+            <el-carousel trigger="click" height="120px" indicator-position="none" arrow="always" :autoplay="false" :loop="false">
+                <el-carousel-item v-for="(items,index) in warnList" :key="index" >
+                    <div class="warn-item-box">
+                        <div class="warn-item warning" @click="showWarnModel(item)" v-for="(item,_index) in items" :key="_index">
+                            <div class="tag">{{NumConvertLM(item.goafOrebelt)}}-{{item.goafOrebody}}-{{item.goafOreheight}}-{{item.goafName}}</div>
+                        </div>                    
+                    </div>
+                </el-carousel-item>
+            </el-carousel>
+
         </div>
         <div class="video-dialog" v-if="videoDialogVisible">
-             <div class="header">
-                <div class="name"><span v-if="warnInfo.goafName">{{NumConvertLM(warnInfo.goafOrebelt)}}-{{warnInfo.goafOrebody}}-{{warnInfo.goafOreheight}}-</span>{{warnInfo.goafName}}报警监控</div>
-                <div class="close" @click="videoDialogVisible=false"><el-icon><Close /></el-icon></div>
-             </div>
-            <!-- <video :src="video.src" id="video" controls></video> -->
-            <div class="demo-image__preview" v-if="capturePhotos.length>0">
-                <el-image
-                    style="width: 100px; height: 100px"
-                    :src="capturePhotos[0]"
-                    :zoom-rate="1.2"
-                    :preview-src-list="capturePhotos"
-                    :initial-index="4"
-                fit="cover"
-                />
-            </div> 
-            <HkwsVideo ref="HkwsVideo"></HkwsVideo>           
+            <div class="video-dialog-container">
+                    <div class="header">
+                        <div class="name">
+                            <!-- <span v-if="warnInfo.goafName">{{NumConvertLM(warnInfo.goafOrebelt)}}-{{warnInfo.goafOrebody}}-{{warnInfo.goafOreheight}}-{{warnInfo.goafName}}</span> -->
+                            <span>区域入侵预警</span>
+                        </div>
+                        <div class="close" @click="videoDialogVisible=false"><el-icon><Close /></el-icon></div>
+                    </div>
+                    <!-- <video :src="video.src" id="video" controls></video> -->
+                    <div class="demo-image__preview" v-if="capturePhotos.length>0">
+                        <el-image
+                            style="width: 100px; height: 100px"
+                            :src="capturePhotos[0]"
+                            :zoom-rate="1.2"
+                            :preview-src-list="capturePhotos"
+                            :initial-index="4"
+                        fit="cover"
+                        />
+                    </div> 
+                    <HkwsVideo ref="HkwsVideo"></HkwsVideo>              
+            </div>         
         </div> 
     </div>
 </template>
     <script>
      import * as echarts from 'echarts';
-     import { goafdevstatis} from '@/api/goaf/sensor'
+     import { goafdevstatis,goafCameraAlarmNumber,goafCameraAlarm} from '@/api/goaf/sensor'
      import { NumConvertLM } from '@/utils'
      import HkwsVideo from '@/components/HkwsVideo/iframe.vue'
       export default {
@@ -46,6 +62,7 @@
                 warn_status:0,
                 total:0,
                 videoDialogVisible:false,
+                warnList:[],
                 warnInfo:{
                     "goafOrebody": "",
                     "goafOrebelt": "",
@@ -195,9 +212,9 @@
             }
         },
         created(){
-            // this.$nextTick(()=>{
-            //     this.reload()
-            // })
+            this.$nextTick(()=>{
+                this.reload()
+            })
         },        
         methods:{
             NumConvertLM,
@@ -217,34 +234,48 @@
             }
             ,reload(){      
                 this.$nextTick(()=>{
-                    this.goafdevstatis()
+                    this.goafCameraAlarmNumber()
+                    this.goafCameraAlarm()
                 })                 
             },  
             warn(data){
-                this.warnInfo=data
-                $('.SensorInfoStatistics').find('.warn-item').addClass('warning')
+                // this.warnInfo=data
+                // $('.SensorInfoStatistics').find('.warn-item').addClass('warning')
+                this.goafCameraAlarm()
             },  
-            showWarnModel(){
+            showWarnModel(item){
                 this.videoDialogVisible=true
+                if(item){
+                    let warn_info=JSON.parse(JSON.stringify(item))
+                    this.warnInfo=warn_info
+                    this.warnInfo.fileUrl=warn_info.goafSnapPicurl
+                }
                 this.capturePhotos=[this.warnInfo.fileUrl]
-                if(this.isNull(this.warnInfo.goafDevSocketAddr)){
+                let warnInfo=item?item:this.warnInfo
+                let state=true
+                if(this.isNull(warnInfo.goafDevSocketAddr)){
+                    state="未配置推流地址"
                     console.error('未配置推流地址')
                     return
                 }
                 if(this.isNull(this.warnInfo.goafDevIp)){
-                    console.error('未配置设备IP')
+                    state="未配置设备IP"
+                    console.error(state)
                     return
                 }    
                 if(this.isNull(this.warnInfo.goafDevPort)){
-                    console.error('未配置设备端口')
+                    state="未配置设备端口"
+                    console.error(state)
                     return
                 }
                 if(this.isNull(this.warnInfo.goafDevAccount)){
-                    console.error('未配置设备账号')
+                    state="未配置设备账号"
+                    console.error(state)
                     return
                 }      
                 if(this.isNull(this.warnInfo.goafDevPwd)){
-                    console.error('未配置设备密码')
+                    state="未配置设备密码"
+                    console.error(state)
                     return
                 }                 
                 this.$nextTick(()=>{
@@ -253,18 +284,58 @@
                         szIP: this.warnInfo.goafDevIp,    // protocol ip
                         szPort: this.warnInfo.goafDevPort,            // protocol port
                         szUsername:this.warnInfo.goafDevAccount,     // device username
-                        szPassword: this.warnInfo.goafDevPwd, // device password        
+                        szPassword: this.warnInfo.goafDevPwd, // device password       
                     })
                 })
-            },    
+            }, 
+            // 获取所有采空区摄像头告警数量  
+            goafCameraAlarmNumber(){
+                goafCameraAlarmNumber({
+                    goafAlarmStatus:0
+                }).then((res)=>{
+                    this.total=res.data                                   
+                })
+            },
+            //获取所有采空区摄像头告警信息
+            goafCameraAlarm(){
+                goafCameraAlarm({
+                    goafAlarmStatus:0
+                }).then((res)=>{
+                    this.warnList=this.getDataSource(res.data)                                
+                })
+            },
             goafdevstatis(){
                 let   option  =JSON.parse(JSON.stringify(this.option))
                 goafdevstatis().then((res)=>{
                     this.total=res.data.goafDevTotalNum                                   
                 })
             },
+            linkTo(){
+                this.$router.push({
+                    path: '/goafCameraAlarm'
+                })                
+            },
+            getDataSource(dataList=[],n=4) {
+                let newDataList = []
+                let current = 0
+                if(dataList && dataList.length>0){
+                    for(let i=0;i<=dataList.length-1;i++){
+                        if(i%n !== 0 || i === 0 ){
+                        if(!newDataList[current]){
+                            newDataList.push([dataList[i]])
+                        }else{
+                            newDataList[current].push(dataList[i])
+                        }
+                        }else{
+                            current++
+                            newDataList.push([dataList[i]])
+                        }
+                    }
+                }
+                return [...newDataList]
+            },            
             isNull(val){
-                if(val===undefined||val==="undefined"&&val===null&&val===""){
+                if(val===undefined||val==="undefined"||val===null||val===""){
                     return true
                 }
                 return false
@@ -293,7 +364,14 @@
         top: 0;
         right: 10px;
         bottom: 0;
-        background-color: rgba(5, 25, 51, 0.98);
+        background-color: rgba(222, 229, 236, 0.45);
+        .video-dialog-container{
+            width: 654px;
+            height: 644px;
+            background-color: #051933;
+            border-radius: 20px;
+            margin: 20px auto;
+        }
         .name{
             color: #fff;
             font-size: 20px;
@@ -322,51 +400,57 @@
             margin: 10px auto;
         }        
     }
-    .warn-item{
-        width: 100px;
-        height: 100px;
-        position: relative;
-        margin-left: 10px;
-        display: none;
-        .tag{
-            width: 120px;
-            display: inline-block;
-            background: #21649c;
-            overflow:hidden; 
-            text-overflow:ellipsis; 
-            white-space:nowrap; 
-            color: #fff;
-            text-align: center;
-            z-index: 9;
-            position: absolute;
-            bottom: -6px;
-            font-size: 12px;
-        }   
-        &::after{
+    .warn-item-box{
+        display: flex;
+        align-items: center;
+        .warn-item{
+            width: 100px;
+            height: 100px;
+            position: relative;
+            margin-left: 15px;
+            display: none;
+            .tag{
+                width: 110px;
+                display: inline-block;
+                background: #21649c;
+                overflow:hidden; 
+                text-overflow:ellipsis; 
+                white-space:nowrap; 
+                color: #fff;
+                text-align: center;
+                z-index: 9;
+                position: absolute;
+                bottom: -4px;
+                font-size: 12px;
+                line-height: 1;
+                padding: 2px 0;
+            }   
+            &::after{
+                display: block;
+                content: "";
+                height: 60%;
+                width: 60%;
+                border-radius: 50% 50% 10% 10%;
+                position: absolute;
+                transform: translate(-50%,-50%);
+                left: 50%;
+                top: 50%;
+                z-index: 9;
+                background-image: radial-gradient(#dee7f6, #797878);
+                box-shadow: 0 0 20px #fff;
+            }             
+        }    
+        .warning {
             display: block;
-            content: "";
-            height: 60%;
-            width: 60%;
-            border-radius: 50% 50% 10% 10%;
-            position: absolute;
-            transform: translate(-50%,-50%);
-            left: 50%;
-            top: 50%;
-            z-index: 9;
-            background-image: radial-gradient(#dee7f6, #797878);
-            box-shadow: 0 0 20px #fff;
-        }             
+            &::after{
+                background-image: radial-gradient(yellow,red);
+                animation: twinkle 0.5s infinite alternate;
+                box-shadow: 0 0 20px red;
+            }
+        }            
     }
 
   /*动画*/
-.warning {
-  display: block;
-  &::after{
-    background-image: radial-gradient(yellow,red);
-    animation: twinkle 0.5s infinite alternate;
-    box-shadow: 0 0 20px red;
-  }
-}
 
 @keyframes twinkle {
     0% {opacity: 0.9;}

src/views/home/index.vue

@@ -140,7 +140,7 @@ import {
                     this.$refs.map.updateMapLayers(data.mapId)
                 }else if(topic.includes("topic/goaf/waring/camera")){
                         /**更新chart */
-                    this.$refs['sensor-info-statistics'].warn(data);
+                    this.$refs['sensor-info-statistics']?.warn(data);
                 }
                 
                 

src/views/particulars/video.vue

@@ -23,32 +23,35 @@
                 </div>
                 <div class="lf-container"> 
                     <div class="video-container">
-                        <div class="item" v-for="(item,index) in 10" :key="index" @click="showVideo(item)">
+                        <div class="item" v-for="(item,index) in dataList" :key="index" @click="showVideo(item)">
                             <video src="https://www.runoob.com/try/demo_source/movie.mp4" poster="./images/video.png">
                                 <source src="movie.mp4"  type="video/mp4">
                             </video>
-                            <p>{Ⅲ号-770-32008}：封堵口</p>
+                            <p>{{NumConvertLM(item.goafOrebelt)}}-{{item.goafOrebody}}-{{item.goafOreheight}}-{{item.goafName}}</p>
                         </div>
                     </div>
                     <div class="el-pagination-wrap">
-                        <el-pagination small layout="prev, pager, next" :total="50" />
+                        <el-pagination small layout="prev, pager, next" :total="total" />
                      </div>                                   
                 </div>
             </div>
         </div>
         <div class="video-dialog" v-if="videoDialogVisible">
-             <div class="header">
-                <div class="name">{{ video.name }}</div>
-                <div class="close" @click="videoDialogVisible=false"><el-icon><Close /></el-icon></div>
-             </div>
-            <!-- <video :src="video.src" id="video" controls></video> -->
-            <HkwsVideo ref="HkwsVideo"></HkwsVideo>
+            <div class="video-dialog-container">
+                <div class="header">
+                    <div class="name">{{ video.name }}</div>
+                    <div class="close" @click="videoDialogVisible=false"><el-icon><Close /></el-icon></div>
+                </div>
+                <HkwsVideo ref="HkwsVideo"></HkwsVideo>
+            </div>
         </div>    
     </div>
 </template>
 <script>
 import HkwsVideo from '@/components/HkwsVideo/iframe'
 import {  getGoafBaseInfo } from '@/api/goaf/info'
+import { getSensor } from '@/api/goaf/sensor'
+import { NumConvertLM } from '@/utils'
  export default {
     name:"particulars_video",
     components:{
@@ -82,19 +85,22 @@ import {  getGoafBaseInfo } from '@/api/goaf/info'
             goafOrebelts: [],
             goafOrebodys: [],
             goafOreheights: [],
-            goafNames: [],                  
+            goafNames: [],  
+            dataList:[]                
         }
     },
     created(){
         this.init()
     },
     methods:{
+        NumConvertLM,
         init(){
             getGoafBaseInfo().then((res) => {
                 const goafOrebelts = res.data.map(item => item.goafOrebelt)
                 this.goafOrebelts = [...new Set(goafOrebelts)]
                 this.goafList = res.data
             })  
+            this.getData()
         },
         changeHead(item){
             this.activeId=item.id
@@ -118,8 +124,21 @@ import {  getGoafBaseInfo } from '@/api/goaf/info'
             this.goafNames=[]  
             this.getData()
         },
-        getData(){
-
+        getData() {
+            for(let key in this.conditions){
+                if(this.conditions[key]===undefined||this.conditions[key]===''||this.conditions[key]==='undefined'){
+                    delete this.conditions[key]
+                }
+            }
+            getSensor(this.conditions).then((resp) => {
+                this.listLoading = false
+                const { data } = resp
+                const start = (this.conditions.page - 1) * this.conditions.limit
+                const end = this.conditions.page * this.conditions.limit
+                const dataList = data.filter((item) => item.goafDevTypename.includes('摄像头'))
+                this.dataList = dataList.filter((item, index) => index >= start && index < end)
+                this.total = dataList.length
+            })
         },
         showVideo(item){
                 if(this.isNull(item.goafDevSocketAddr)){
@@ -237,12 +256,19 @@ import {  getGoafBaseInfo } from '@/api/goaf/info'
     } 
     .video-dialog{
         position: fixed;
-        z-index: 999;
-        left: 0;
+        z-index: 9999;
+        left: 10px;
         top: 0;
-        right: 0;
+        right: 10px;
         bottom: 0;
-        background-color: rgba(5, 25, 51, 0.98);
+        background-color: rgba(222, 229, 236, 0.45);
+        .video-dialog-container{
+            width: 654px;
+            height: 535px;
+            background-color: #051933;
+            border-radius: 20px;
+            margin: 20px auto;
+        }
         .name{
             color: #fff;
             font-size: 20px;
@@ -345,7 +371,7 @@ import {  getGoafBaseInfo } from '@/api/goaf/info'
                     justify-content: flex-start;
                     align-items: center;
                     flex-wrap: wrap;
-                    margin-top: 5vh;
+                    margin-top: 3vh;
                     .item{
                         width: 20%;
                         display: flex;
@@ -368,7 +394,7 @@ import {  getGoafBaseInfo } from '@/api/goaf/info'
                 }
                 .el-pagination-wrap{
                     float: right;
-                    margin-top: 5vh;
+                    margin-top: 3vh;
                     ::v-deep{
                         .el-pager li,button{
                             background-color: #00539F;