|
|
@@ -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;
|
|
|
}
|
