增加车辆查看详情功能
This commit is contained in:
Vce
parent
c8c26271b4
commit
7238f5cfeb
@ -85,12 +85,12 @@
|
|||||||
align="center"
|
align="center"
|
||||||
:label="$t('message.carManage.carNumber')"
|
:label="$t('message.carManage.carNumber')"
|
||||||
></el-table-column>
|
></el-table-column>
|
||||||
<el-table-column
|
<!-- <el-table-column
|
||||||
v-if="COMPANY != 'neimenggu'"
|
v-if="COMPANY != 'neimenggu'"
|
||||||
prop="carColor"
|
prop="carColor"
|
||||||
label="车身颜色"
|
label="车身颜色"
|
||||||
align="center"
|
align="center"
|
||||||
></el-table-column>
|
></el-table-column> -->
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="carTypeName"
|
prop="carTypeName"
|
||||||
:label="$t('message.carManage.carType')"
|
:label="$t('message.carManage.carType')"
|
||||||
@ -136,7 +136,7 @@
|
|||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
|
||||||
<el-table-column
|
<!-- <el-table-column
|
||||||
width="80"
|
width="80"
|
||||||
align="center"
|
align="center"
|
||||||
:label="$t('message.carManage.carPhotosUrl')"
|
:label="$t('message.carManage.carPhotosUrl')"
|
||||||
@ -164,7 +164,7 @@
|
|||||||
height="50px"
|
height="50px"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</el-table-column>
|
</el-table-column> -->
|
||||||
|
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="carModuleType"
|
prop="carModuleType"
|
||||||
@ -230,7 +230,7 @@
|
|||||||
>
|
>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<!-- <el-table-column
|
||||||
width="80"
|
width="80"
|
||||||
align="center"
|
align="center"
|
||||||
label="驾驶证"
|
label="驾驶证"
|
||||||
@ -345,11 +345,11 @@
|
|||||||
height="50px"
|
height="50px"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</el-table-column>
|
</el-table-column> -->
|
||||||
<el-table-column
|
<el-table-column
|
||||||
:label="$t('message.deviceManage.operation')"
|
:label="$t('message.deviceManage.operation')"
|
||||||
align="center"
|
align="center"
|
||||||
width="280px"
|
width="400px"
|
||||||
>
|
>
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<div class="tableBtns">
|
<div class="tableBtns">
|
||||||
@ -365,6 +365,14 @@
|
|||||||
/>
|
/>
|
||||||
<span>下发详情</span>
|
<span>下发详情</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div @click="showOtherDetailDialog(scope.row)" class="operationText">
|
||||||
|
<img
|
||||||
|
src="@/assets/images/icon-detail.png"
|
||||||
|
width="15px"
|
||||||
|
height="15px"
|
||||||
|
/>
|
||||||
|
<span>查看详情</span>
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
v-permission="{
|
v-permission="{
|
||||||
key: 'clgl_edit',
|
key: 'clgl_edit',
|
||||||
@ -856,6 +864,310 @@
|
|||||||
</div>
|
</div>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
<!-- <img :preview="showImgUrl" :src="showImgUrl" alt="">-->
|
<!-- <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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
@ -1105,6 +1417,10 @@ export default {
|
|||||||
},
|
},
|
||||||
whoId: "",
|
whoId: "",
|
||||||
issuePointList: [],
|
issuePointList: [],
|
||||||
|
|
||||||
|
showOtherDetail: false,
|
||||||
|
entityDetail: {},
|
||||||
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
@ -1123,6 +1439,11 @@ export default {
|
|||||||
this.whoId = id;
|
this.whoId = id;
|
||||||
this.getNewestList();
|
this.getNewestList();
|
||||||
},
|
},
|
||||||
|
// 展示其他详情
|
||||||
|
showOtherDetailDialog(item) {
|
||||||
|
this.showOtherDetail = true;
|
||||||
|
this.entityDetail = item
|
||||||
|
},
|
||||||
async getNewestList() {
|
async getNewestList() {
|
||||||
const res = await xmglXzHikvisionSyncGetNewestList({
|
const res = await xmglXzHikvisionSyncGetNewestList({
|
||||||
// pageNo:this.issuePage.pageNo,
|
// pageNo:this.issuePage.pageNo,
|
||||||
@ -1690,7 +2011,47 @@ export default {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</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">
|
<style lang="less">
|
||||||
|
|
||||||
.tables {
|
.tables {
|
||||||
img {
|
img {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user