submit

src/api/trans.js

@@ -33,3 +33,10 @@ export function getAllinfoByPage(params) {
       params
     })
 }
+// 分页获取矿装卸货识别异常信息
+export function getAbnormarlinfoByPage(params) {
+  return request({
+    url: '/trans/abnormarlinfo/page',
+    params
+  })
+}

src/views/goafCameraAlarm/index.vue

@@ -1,52 +1,90 @@
 <template>
     <div class="goafCameraAlarm">
-        <el-table
-            ref="multipleTableRef"
-            :data="dataList"
-            style="width:100%"
-            row-class-name="CustomRowClassName"
-        >
-            <el-table-column type="index" width="55" label="序号"  />
-            <el-table-column property="date" label="日期" min-width="120">
-                <template #default="scope">{{ parseTime(scope.row.transLoadTime,'{y}-{m}-{d}') }}</template>
-            </el-table-column>
-            <el-table-column property="transLicense" label="车牌" min-width="140"></el-table-column>
-            <el-table-column property="transLoadTime" label="装货时间"  min-width="180">
-                <template #default="scope">
-                    <p>{{scope.row.transLoadTime}}</p>
-                    <div class="snap-image__preview" v-if="scope.row.transLoadTime">
-                        <el-image
-                            style="width: 30px; height: 30px"
-                            :src="scope.row.transLoadPicurl"
-                            :preview-src-list="[scope.row.transLoadPicurl]"
-                            preview-teleported
-                            fit="cover"
-                        />
-                    </div> 
-                    <span v-else>没有装货图片</span>                   
-                </template>           
-            </el-table-column>
-            <el-table-column property="transUnloadTime" label="卸货时间"  min-width="180">
-                <template #default="scope">
-                    <p>{{scope.row.transUnloadTime}}</p>
-                    <div class="snap-image__preview" v-if="scope.row.transUnloadPicurl">
-                        <el-image
-                            style="width: 30px; height: 30px"
-                            :src="scope.row.transUnloadPicurl"
-                            :preview-src-list="[scope.row.transUnloadPicurl]"
-                            preview-teleported
-                            fit="cover"
-                        />
-                    </div>   
-                    <span v-else>没有卸货图片</span>                 
-                </template>           
-            </el-table-column>
-            <el-table-column property="transTimeInterval" label="时差（分钟）"></el-table-column>
-            <el-table-column property="transLoadWeight" label="载货重量（分钟）" ></el-table-column>
-            <el-table-column property="transUnloadWeight" label="卸货重量（吨）"></el-table-column>
-            <el-table-column property="transWeightDifference" label="载物差（吨）"></el-table-column>
-            <el-table-column property="transEvaluate" label="结论" width="100" />
-        </el-table>
+        <div class="table-head" >
+            <div class="tab">
+                <el-button class="tab-item" :type="tabType===0?'primary':''" @click="tabClick(0)">正常</el-button>
+                <el-button class="tab-item"  :type="tabType===1?'danger':''" @click="tabClick(1)">识别异常</el-button>              
+            </div>  
+        </div>
+        <template v-if="tabType===0">
+            <el-table
+                ref="multipleTableRef"
+                :data="dataList"
+                style="width:100%"
+                row-class-name="CustomRowClassName"
+            >
+                <el-table-column type="index" width="55" label="序号"  />
+                <el-table-column property="date" label="日期" min-width="120">
+                    <template #default="scope">{{ parseTime(scope.row.transLoadTime,'{y}-{m}-{d}') }}</template>
+                </el-table-column>
+                <el-table-column property="transLicense" label="车牌" min-width="140"></el-table-column>
+                <el-table-column property="transLoadTime" label="装货时间"  min-width="180">
+                    <template #default="scope">
+                        <p>{{scope.row.transLoadTime}}</p>
+                        <div class="snap-image__preview" v-if="scope.row.transLoadTime">
+                            <el-image
+                                style="width: 30px; height: 30px"
+                                :src="scope.row.transLoadPicurl"
+                                :preview-src-list="[scope.row.transLoadPicurl]"
+                                preview-teleported
+                                fit="cover"
+                            />
+                        </div> 
+                        <span v-else>没有装货图片</span>                   
+                    </template>           
+                </el-table-column>
+                <el-table-column property="transUnloadTime" label="卸货时间"  min-width="180">
+                    <template #default="scope">
+                        <p>{{scope.row.transUnloadTime}}</p>
+                        <div class="snap-image__preview" v-if="scope.row.transUnloadPicurl">
+                            <el-image
+                                style="width: 30px; height: 30px"
+                                :src="scope.row.transUnloadPicurl"
+                                :preview-src-list="[scope.row.transUnloadPicurl]"
+                                preview-teleported
+                                fit="cover"
+                            />
+                        </div>   
+                        <span v-else>没有卸货图片</span>                 
+                    </template>           
+                </el-table-column>
+                <el-table-column property="transTimeInterval" label="时差（分钟）"></el-table-column>
+                <el-table-column property="transLoadWeight" label="载货重量（分钟）" ></el-table-column>
+                <el-table-column property="transUnloadWeight" label="卸货重量（吨）"></el-table-column>
+                <el-table-column property="transWeightDifference" label="载物差（吨）"></el-table-column>
+                <el-table-column property="transEvaluate" label="结论" width="100" />
+            </el-table>        
+        </template>
+        <template v-if="tabType===1">
+            <el-table
+                :data="dataList"
+                style="width:100%"
+                row-class-name="CustomRowClassName"
+            >
+                <el-table-column type="index" width="55" label="序号"  />
+                <el-table-column property="transAbnormarlLicense" label="车牌" min-width="140"></el-table-column>
+                <el-table-column property="transLoadTime" label="抓拍图片"  min-width="180">
+                    <template #default="scope">
+                        <div class="snap-image__preview" v-if="scope.row.transAbnormarlPicurl">
+                            <el-image
+                                style="width: 30px; height: 30px"
+                                :src="scope.row.transAbnormarlPicurl"
+                                :preview-src-list="[scope.row.transAbnormarlPicurl]"
+                                preview-teleported
+                                fit="cover"
+                            />
+                        </div> 
+                        <span v-else>没有图片</span>                   
+                    </template>           
+                </el-table-column>
+                <el-table-column property="transAbnormarlTime" label="运输异常时间" min-width="120">
+                    <template #default="scope">{{ parseTime(scope.row.transAbnormarlTime,'{y}-{m}-{d} {h}:{i}:{s}') }}</template>
+                </el-table-column>
+                <el-table-column property="transAbnormarlTime" label="运输类型" min-width="120">
+                    <template #default="scope">{{ scope.row.transAbnormarType===0?'装货':"卸货" }}</template>
+                </el-table-column>
+            </el-table>        
+        </template>
         <div class="el-pagination-wrap">
             <el-pagination small layout="prev, pager, next" 
             :total="total"
@@ -57,11 +95,12 @@
 </template>
 <script>
 import { parseTime} from '@/utils'
-import {getAllinfoByPage} from '@/api/trans'
+import {getAllinfoByPage,getAbnormarlinfoByPage} from '@/api/trans'
     export default {
         name:"goafCameraAlarm",
         data(){
             return{
+                tabType:0,
                 conditions: {
                     page: 1,
                     limit: 10,
@@ -76,13 +115,30 @@ import {getAllinfoByPage} from '@/api/trans'
         methods:{
             parseTime,
             getData(){
+                if(this.tabType===0){
+                    this.getAllinfoData()
+                }else{
+                    this.getAnomalyData()
+                }
+            },
+            getAllinfoData(){
                 getAllinfoByPage(this.conditions).then((resp)=>{
                     const {data,total}=resp
                     this.total=total
                     this.dataList=data
+                }) 
+            },
+            getAnomalyData(){
+                getAbnormarlinfoByPage(this.conditions).then((resp)=>{
+                    const {data,total}=resp
+                    this.total=total
+                    this.dataList=data
                 })
-                
             },
+            tabClick(type){
+                this.tabType=type
+                this.getData()
+            },            
             handleSizeChange(limit){
                 this.conditions.limit=limit
                 this.getData()
@@ -117,6 +173,20 @@ import {getAllinfoByPage} from '@/api/trans'
         }
     }
 }
+.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;
 }