提交

src/config/index.js

@@ -4,8 +4,8 @@ module.exports = {
     * 服务API地址
     */
     serverUrl: 'http://113.141.93.143:1688', // 正式环境
-    // devServerUrl: 'http://113.141.93.143:1688', // 开发环境
-    devServerUrl: 'http://192.168.3.5:1688/', // 开发环境 qu
+    devServerUrl: 'http://113.141.93.143:1688', // 开发环境
+    // devServerUrl: 'http://192.168.3.5:1688/', // 开发环境 qu
     mqttUrl: 'ws://113.141.93.143:8894/mqtt', // mqtt地址
     /**
     * websocket 地址

src/views/goafCameraAlarm/index.vue

@@ -1,57 +1,44 @@
 <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="抓拍图片"  >
+            <el-table-column type="index" width="55" label="序号"  />
+            <el-table-column property="date" label="日期" min-width="180"></el-table-column>
+            <el-table-column property="carPlate" label="车牌" min-width="150"></el-table-column>
+            <el-table-column property="exitTime" label="出场时间"  min-width="200">
                 <template #default="scope">
+                    <p>{{scope.row.exitTime}}</p>
                     <div class="snap-image__preview">
                         <el-image
-                            style="width: 50px; height: 50px"
-                            :src="scope.row.goafSnapPicurl"
-                            :preview-src-list="[scope.row.goafSnapPicurl]"
+                            style="width: 30px; height: 30px"
+                            :src="scope.row.exitTimeSnapPicurl"
+                            :preview-src-list="[scope.row.exitTimeSnapPicurl]"
                             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">
+            <el-table-column property="enterTime" label="入场时间"  min-width="200">
                 <template #default="scope">
-                    <el-button link type="primary" size="small" @click="showHandModel(scope.row)"
-                    >处理</el-button
-                    >
-                </template>
+                    <p>{{scope.row.enterTime}}</p>
+                    <div class="snap-image__preview">
+                        <el-image
+                            style="width: 30px; height: 30px"
+                            :src="scope.row.enterTimeSnapPicurl"
+                            :preview-src-list="[scope.row.enterTimeSnapPicurl]"
+                            preview-teleported
+                            fit="cover"
+                        />
+                    </div>                    
+                </template>           
             </el-table-column>
+            <el-table-column property="timeDifference" label="时差（分钟）" width="180"></el-table-column>
+            <el-table-column property="result" label="结论" width="100" />
         </el-table>
         <div class="el-pagination-wrap">
             <el-pagination small layout="prev, pager, next" 
@@ -64,8 +51,7 @@
 </template>
 <script>
 import {ElMessage} from 'element-plus'
-import { goafCameraAlarmByPage,goafCameraAlarmHandle} from '@/api/goaf/sensor'
-import { NumConvertLM ,parseTime} from '@/utils'
+import { NumConvertLM ,parseTime,getTime} from '@/utils'
 import HandleModel from './Model.vue'
     export default {
         name:"goafCameraAlarm",
@@ -77,11 +63,9 @@ import HandleModel from './Model.vue'
                 conditions: {
                     page: 1,
                     limit: 10,
-                    goafAlarmStatus:0
                 },  
                 dataList:[],
                 total:0,
-                selection:[] 
             }
         },
         created(){
@@ -90,44 +74,21 @@ import HandleModel from './Model.vue'
         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())
+                let dataList=[]
+                for(let i=0;i<6;i++){
+                    dataList.push({
+                        date:parseTime(new Date()),
+                        carPlate:"陕A12345",
+                        exitTime:getTime(),
+                        enterTime:getTime(0.5),
+                        exitTimeSnapPicurl:'http://113.141.93.143:9000/file/20236161224471948394.jpg',
+                        enterTimeSnapPicurl:'http://113.141.93.143:9000/file/20236161224471948394.jpg',
+                        timeDifference:40,
+                        result:i%2===0?'正常':'异常',
+                        
                     })
                 }
-                this.getData()
-            },
-            handleSelectionChange(selection){
-                this.selection=selection
+                this.dataList=dataList
             },
             handleSizeChange(limit){
                 this.conditions.limit=limit
@@ -162,19 +123,8 @@ import HandleModel from './Model.vue'
             }
         }
     }
-    .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;
-            }
-        }
-    }
+}
+.snap-image__preview{
+    padding-top: 8px;
 }
 </style>

src/views/home/components/carPlateInfo.vue

@@ -5,7 +5,33 @@
             <span class="detail" @click="linkTo">详情>></span>    
         </div>
         <div class="container">
-
+            <div class="carplate-item" v-for=" item in 10">
+                <div class="carplate-image__preview">
+                    <div class="carplate-image-item">
+                        <el-image
+                            style="width: 100%; height: 150px"
+                            :src="goafSnapPicurl"
+                            :zoom-rate="1.2"
+                            :preview-src-list="[goafSnapPicurl]"
+                            :initial-index="4"
+                            fit="cover"
+                        />     
+                        <p>入场时间：{{parseTime(new Date())}}</p>           
+                    </div>
+                    <div class="carplate-image-item">
+                        <el-image
+                            style="width: 100%; height: 150px"
+                            :src="goafSnapPicurl"
+                            :zoom-rate="1.2"
+                            :preview-src-list="[goafSnapPicurl]"
+                            :initial-index="4"
+                            fit="cover"
+                        />     
+                        <p>出场时间：{{parseTime(new Date())}}</p>           
+                    </div>
+                </div>   
+                <div class="carplateDiv">{{ carPlate }}</div>              
+            </div>        
         </div>
         <div class="video-dialog" v-if="videoDialogVisible">
             <div class="video-dialog-container">
@@ -32,7 +58,7 @@
 </template>
     <script>
      import { goafCameraAlarmNumber} from '@/api/goaf/sensor'
-     import { NumConvertLM } from '@/utils'
+     import { NumConvertLM,parseTime} from '@/utils'
      import HkwsVideo from '@/components/HkwsVideo/iframe.vue'
       export default {
         name:"carPlateInfo",
@@ -42,19 +68,20 @@
         data(){
             return{
                 videoDialogVisible:false,
+                carPlate:"",
+                goafSnapPicurl:"",
                 capturePhotos:[]                            
             }
         },
         created(){
-            this.$nextTick(()=>{
-                this.reload()
-            })
+            this.reload()
         },        
         methods:{
             NumConvertLM,
+            parseTime,
             reload(){      
-                this.$nextTick(()=>{
-                })                 
+                this.carPlate="陕A12345"
+                this.goafSnapPicurl="http://113.141.93.143:9000/file/20236161224471948394.jpg"               
             },   
             showWarnModel(item){
                 this.videoDialogVisible=true
@@ -127,13 +154,56 @@
       }
     </script>
     <style lang="scss" scoped>
-    .container{
-        height: 12vh;
-        #sensor-info-chart{
-            width: 95%;
-            height: 100%;
-        }    
+    .carPlateInfo{
+        .container{
+                padding:0 10px;
+                .carplate-item{
+                    margin-bottom: 8px;
+                    padding-bottom: 5px;
+                    border-bottom: 1px solid rgba(160, 160, 238, 0.356);
+                    .carplate-image__preview{
+                        width: 100%;
+                        box-sizing: border-box;
+                        padding-bottom: 10px;
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+                        .carplate-image-item{
+                            width: 50%;
+                            box-sizing: border-box;
+                            padding-right: 5px;
+                            &:nth-child(2){
+                                padding:0 0 0 5px;
+                            }
+                            p{
+                                color: #fff;
+                                font-size: 12px;
+                                line-height: 1;
+                                padding-top: 5px;
+                            }
+                        }
+                    }
+                    .carplateDiv{
+                        width: 50%;
+                        background-color: blue;
+                        color: #fff;
+                        height: 50px;
+                        border-radius: 2px;
+                        line-height: 50px;
+                        text-align: center;
+                        font-size: 24px;
+                        font-weight: 700;
+                        letter-spacing: 2px;
+                        box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) ,inset 0 0 3px rgba(255, 255, 255, 0.8);
+                        display: inline-block;
+                        // background-image: linear-gradient(to bottom right,blue,#fff);
+                        background-image:linear-gradient(to bottom right, #5c5cb1,blue,#5c5cb1)
+                        
+                    } 
+                }               
+        }
     }
+
     .demo-image__preview{
         padding:0 0  10px 20px;
     }
@@ -180,61 +250,4 @@
             margin: 10px auto;
         }        
     }
-    .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;
-            &::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;}
-    50% {opacity: 0.5;}
-    100% {opacity: 0;}
-}
     </style>