增加车辆查看详情功能
This commit is contained in:
Vce
parent
c8c26271b4
commit
7238f5cfeb
@ -85,12 +85,12 @@
|
||||
align="center"
|
||||
:label="$t('message.carManage.carNumber')"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
<!-- <el-table-column
|
||||
v-if="COMPANY != 'neimenggu'"
|
||||
prop="carColor"
|
||||
label="车身颜色"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
></el-table-column> -->
|
||||
<el-table-column
|
||||
prop="carTypeName"
|
||||
:label="$t('message.carManage.carType')"
|
||||
@ -136,7 +136,7 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
<!-- <el-table-column
|
||||
width="80"
|
||||
align="center"
|
||||
:label="$t('message.carManage.carPhotosUrl')"
|
||||
@ -164,7 +164,7 @@
|
||||
height="50px"
|
||||
/>
|
||||
</div>
|
||||
</el-table-column>
|
||||
</el-table-column> -->
|
||||
|
||||
<el-table-column
|
||||
prop="carModuleType"
|
||||
@ -230,7 +230,7 @@
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
<!-- <el-table-column
|
||||
width="80"
|
||||
align="center"
|
||||
label="驾驶证"
|
||||
@ -345,11 +345,11 @@
|
||||
height="50px"
|
||||
/>
|
||||
</div>
|
||||
</el-table-column>
|
||||
</el-table-column> -->
|
||||
<el-table-column
|
||||
:label="$t('message.deviceManage.operation')"
|
||||
align="center"
|
||||
width="280px"
|
||||
width="400px"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<div class="tableBtns">
|
||||
@ -365,6 +365,14 @@
|
||||
/>
|
||||
<span>下发详情</span>
|
||||
</div>
|
||||
<div @click="showOtherDetailDialog(scope.row)" class="operationText">
|
||||
<img
|
||||
src="@/assets/images/icon-detail.png"
|
||||
width="15px"
|
||||
height="15px"
|
||||
/>
|
||||
<span>查看详情</span>
|
||||
</div>
|
||||
<div
|
||||
v-permission="{
|
||||
key: 'clgl_edit',
|
||||
@ -856,6 +864,310 @@
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- <img :preview="showImgUrl" :src="showImgUrl" alt="">-->
|
||||
<!-- 其他详情 -->
|
||||
<!-- 下发详情 -->
|
||||
<el-dialog
|
||||
:modal-append-to-body="false"
|
||||
title="其他详情"
|
||||
:close-on-click-modal="false"
|
||||
:visible.sync="showOtherDetail"
|
||||
width="850px"
|
||||
>
|
||||
<!-- <div class="dialogOtherDetail">
|
||||
<vue-scroll>
|
||||
<div class="innerContainer">
|
||||
<div>企业名称：</div>
|
||||
<div>车牌号：</div>
|
||||
<div>车身颜色：</div>
|
||||
<div>车辆类型：</div>
|
||||
<div>司机姓名：</div>
|
||||
<div>司机电话：</div>
|
||||
<div>是否黑名单：</div>
|
||||
<div>车辆图片：</div>
|
||||
<div>固定/临时/外来车辆：</div>
|
||||
<div>预约时间：</div>
|
||||
<div>允许进出次数：</div>
|
||||
<div>车辆下发状态：</div>
|
||||
<div>驾驶证：</div>
|
||||
<div>行驶证：</div>
|
||||
<div>交强险：</div>
|
||||
<div>其他证明：</div>
|
||||
</div>
|
||||
</vue-scroll>
|
||||
</div> -->
|
||||
<div style="height: 420px">
|
||||
<vue-scroll>
|
||||
<div style="width: 800px">
|
||||
<!-- 隐患记录 超期整改 -->
|
||||
<div class="headerLeft">车辆记录详情</div>
|
||||
<div class="detailBox">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<div class="grid-content">
|
||||
<span class="label">企业名称：</span>
|
||||
<span class="value">{{entityDetail.enterpriseName}}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="grid-content">
|
||||
<span class="label">车牌号：</span>
|
||||
<span class="value">{{entityDetail.carNumber}}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<div class="grid-content">
|
||||
<span class="label">车身颜色：</span>
|
||||
<span class="value">{{entityDetail.carColor}}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="grid-content">
|
||||
<span class="label">车辆类型：</span>
|
||||
<span class="value">{{entityDetail.carTypeName}}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<div class="grid-content">
|
||||
<span class="label">司机姓名：</span>
|
||||
<span class="value">{{entityDetail.driverWorkerName}}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="grid-content">
|
||||
<span class="label">司机电话：</span>
|
||||
<span class="value">{{entityDetail.driverTelephone}}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<div class="grid-content">
|
||||
<span class="label" style="margin-left:0px">是否黑名单：</span>
|
||||
<span class="value">{{entityDetail.isBlack === 0 ? '是':'否'}}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="grid-content">
|
||||
<span class="label">固定/临时/外来车辆：</span>
|
||||
<span class="value" v-if="entityDetail.carModuleType === 1">固定车辆</span>
|
||||
<span class="value" v-else-if="entityDetail.carModuleType === 2">临时车辆</span>
|
||||
<span class="value" v-else>外来车辆</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<div class="grid-content">
|
||||
<span class="label">预约开始时间：</span>
|
||||
<span class="value">{{entityDetail.reserveStartTime}}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="grid-content">
|
||||
<span class="label">预约结束时间：</span>
|
||||
<span class="value">{{entityDetail.reserveEndTime}}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<div class="grid-content">
|
||||
<span class="label">允许进出次数：</span>
|
||||
<span class="value" v-if="entityDetail.entryAndExitPermit === 0">单次</span>
|
||||
<span class="value" v-if="entityDetail.entryAndExitPermit === 1">多次</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="grid-content">
|
||||
<span class="label">车辆下发状态：</span>
|
||||
<span class="value">
|
||||
<span :class="['valuesColor',
|
||||
entityDetail.sendSuccessStatus === 1
|
||||
? 'green'
|
||||
: entityDetail.sendSuccessStatus === 2
|
||||
? 'red'
|
||||
: entityDetail.sendSuccessStatus === 3
|
||||
? 'yellow'
|
||||
: '',
|
||||
]"
|
||||
>
|
||||
{{entityDetail.sendSuccessStatus === 1
|
||||
? "成功"
|
||||
: entityDetail.sendSuccessStatus === 2
|
||||
? "失败"
|
||||
: entityDetail.sendSuccessStatus === 3
|
||||
? "部分成功"
|
||||
: ""
|
||||
}}</span
|
||||
>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<div class="grid-content">
|
||||
<span class="label">车辆图片：</span>
|
||||
<span class="value">
|
||||
<img
|
||||
v-if="
|
||||
entityDetail.carPhotosUrl &&
|
||||
JSON.parse(entityDetail.carPhotosUrl).length > 0
|
||||
"
|
||||
:preview="
|
||||
JSON.parse(entityDetail.carPhotosUrl)[0]
|
||||
? $store.state.FILEURL +
|
||||
JSON.parse(entityDetail.carPhotosUrl)[0].url
|
||||
: ''
|
||||
"
|
||||
:src="
|
||||
JSON.parse(entityDetail.carPhotosUrl)[0]
|
||||
? $store.state.FILEURL +
|
||||
JSON.parse(entityDetail.carPhotosUrl)[0].url
|
||||
: ''
|
||||
"
|
||||
alt=""
|
||||
width="50px"
|
||||
height="50px"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="grid-content">
|
||||
<span class="label">驾驶证：</span>
|
||||
<span class="value">
|
||||
<img
|
||||
v-if="
|
||||
entityDetail.jsz &&
|
||||
JSON.parse(entityDetail.jsz).length > 0
|
||||
"
|
||||
:preview="
|
||||
JSON.parse(entityDetail.jsz)[0]
|
||||
? $store.state.FILEURL +
|
||||
JSON.parse(entityDetail.jsz)[0].url
|
||||
: ''
|
||||
"
|
||||
:src="
|
||||
JSON.parse(entityDetail.jsz)[0]
|
||||
? $store.state.FILEURL +
|
||||
JSON.parse(entityDetail.jsz)[0].url
|
||||
: ''
|
||||
"
|
||||
alt=""
|
||||
width="50px"
|
||||
height="50px"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<div class="grid-content">
|
||||
<span class="label">行驶证：</span>
|
||||
<span class="value">
|
||||
<img
|
||||
v-if="
|
||||
entityDetail.xsz &&
|
||||
JSON.parse(entityDetail.xsz).length > 0
|
||||
"
|
||||
:preview="
|
||||
JSON.parse(entityDetail.xsz)[0]
|
||||
? $store.state.FILEURL +
|
||||
JSON.parse(entityDetail.xsz)[0].url
|
||||
: ''
|
||||
"
|
||||
:src="
|
||||
JSON.parse(entityDetail.xsz)[0]
|
||||
? $store.state.FILEURL +
|
||||
JSON.parse(entityDetail.xsz)[0].url
|
||||
: ''
|
||||
"
|
||||
alt=""
|
||||
width="50px"
|
||||
height="50px"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="grid-content">
|
||||
<span class="label">交强险：</span>
|
||||
<span class="value">
|
||||
<img
|
||||
v-if="
|
||||
entityDetail.jqx &&
|
||||
JSON.parse(entityDetail.jqx).length > 0
|
||||
"
|
||||
:preview="
|
||||
JSON.parse(entityDetail.jqx)[0]
|
||||
? $store.state.FILEURL +
|
||||
JSON.parse(entityDetail.jqx)[0].url
|
||||
: ''
|
||||
"
|
||||
:src="
|
||||
JSON.parse(entityDetail.jqx)[0]
|
||||
? $store.state.FILEURL +
|
||||
JSON.parse(entityDetail.jqx)[0].url
|
||||
: ''
|
||||
"
|
||||
alt=""
|
||||
width="50px"
|
||||
height="50px"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<div class="grid-content">
|
||||
<span class="label">其他证明：</span>
|
||||
<span class="value">
|
||||
<img
|
||||
v-if="
|
||||
entityDetail.otherProve &&
|
||||
JSON.parse(entityDetail.otherProve).length > 0
|
||||
"
|
||||
:preview="
|
||||
JSON.parse(entityDetail.otherProve)[0]
|
||||
? $store.state.FILEURL +
|
||||
JSON.parse(entityDetail.otherProve)[0].url
|
||||
: ''
|
||||
"
|
||||
:src="
|
||||
JSON.parse(entityDetail.otherProve)[0]
|
||||
? $store.state.FILEURL +
|
||||
JSON.parse(entityDetail.otherProve)[0].url
|
||||
: ''
|
||||
"
|
||||
alt=""
|
||||
width="50px"
|
||||
height="50px"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="grid-content">
|
||||
<span class="label"></span>
|
||||
<span class="value"></span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</vue-scroll>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@ -1105,6 +1417,10 @@ export default {
|
||||
},
|
||||
whoId: "",
|
||||
issuePointList: [],
|
||||
|
||||
showOtherDetail: false,
|
||||
entityDetail: {},
|
||||
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
@ -1123,6 +1439,11 @@ export default {
|
||||
this.whoId = id;
|
||||
this.getNewestList();
|
||||
},
|
||||
// 展示其他详情
|
||||
showOtherDetailDialog(item) {
|
||||
this.showOtherDetail = true;
|
||||
this.entityDetail = item
|
||||
},
|
||||
async getNewestList() {
|
||||
const res = await xmglXzHikvisionSyncGetNewestList({
|
||||
// pageNo:this.issuePage.pageNo,
|
||||
@ -1690,7 +2011,47 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.detailBox {
|
||||
.grid-content {
|
||||
overflow: hidden;
|
||||
margin-bottom: 10px;
|
||||
.label {
|
||||
float: left;
|
||||
width: 150px;
|
||||
text-align: right;
|
||||
}
|
||||
.value {
|
||||
float: left;
|
||||
width: calc(80% - 150px);
|
||||
margin-left: 10px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
.headerLeft {
|
||||
height: 30px;
|
||||
background: #ededed;
|
||||
font-size: 14px;
|
||||
color: #616266;
|
||||
line-height: 30px;
|
||||
padding: 0 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.dialogOtherDetail{
|
||||
background-color: darkred;
|
||||
height: 550px;
|
||||
.innerContainer{
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less">
|
||||
|
||||
.tables {
|
||||
img {
|
||||
cursor: pointer;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user