206 lines
8.7 KiB
Vue
206 lines
8.7 KiB
Vue
<template>
|
||
<el-container>
|
||
<el-header class="panel_title">
|
||
<div class="left-panel">
|
||
厂外运输
|
||
</div>
|
||
<div class="right-panel">
|
||
<!-- <div class="backMap" @click="backtoMap">
|
||
切换地图
|
||
<el-icon>
|
||
<Switch />
|
||
</el-icon>
|
||
</div> -->
|
||
<el-button type="primary" @click="backtoMap"> 返回地图 </el-button>
|
||
</div>
|
||
</el-header>
|
||
<el-main class="nopadding">
|
||
<el-container>
|
||
<el-header class="searchWrap">
|
||
<div class="left-panel">
|
||
<div style="font-size: 1.8vh;">
|
||
车辆进出次数:<span class="totalNumber">{{ count }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="right-panel">
|
||
<el-date-picker v-model="timeRange" type="datetimerange" range-separator="至"
|
||
start-placeholder="开始时间" end-placeholder="结束时间" @change="handleQuery" style="width: 100%"
|
||
clearable />
|
||
<el-select v-model="query.type" placeholder="车辆类型" clearable @change="handleQuery">
|
||
<el-option v-for="item in typeOptions" :key="item.id" :label="item.name" :value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
<el-input :input-style="searchInputStyle" style="width:12vw;margin:0 5px" v-model="query.search"
|
||
placeholder="车牌号"></el-input>
|
||
<el-button type="primary" icon="el-icon-search" @click="handleQuery"></el-button>
|
||
</div>
|
||
</el-header>
|
||
<el-main>
|
||
<scTable ref="table" :data="data" :params="params" :query="query" size="large" style=""
|
||
@row-click="rowClick" @dataChange="updateCount">
|
||
<el-table-column prop="index" label="序号"></el-table-column>
|
||
<el-table-column prop="bcrkbh" label="出入口编号"></el-table-column>
|
||
<el-table-column prop="dzbh" label="道闸编号"></el-table-column>
|
||
<el-table-column prop="dtgfs" label="抬杆方式"></el-table-column>
|
||
<el-table-column prop="jcsj" label="进厂时间"></el-table-column>
|
||
<el-table-column prop="ccsj" label="出厂时间"></el-table-column>
|
||
<el-table-column prop="gcllx" label="车俩类型"></el-table-column>
|
||
<el-table-column prop="hclys" label="车辆颜色"></el-table-column>
|
||
<el-table-column prop="cph" label="车牌号"></el-table-column>
|
||
<el-table-column prop="zcdjsj" label="注册登记日期"></el-table-column>
|
||
<el-table-column prop="lclppxh" label="车辆品牌型号"></el-table-column>
|
||
<el-table-column prop="fdjhm" label="发动机号码"></el-table-column>
|
||
|
||
</scTable>
|
||
<el-dialog width="650px" style="border-color: var(--el-border-color-light);
|
||
background: rgb(4, 50, 83);
|
||
background-color: rgb(4, 50, 83);
|
||
box-shadow: inset 0px 0px 30px 15px rgb(7, 79, 109)" v-model="dialogFormVisible" title="车辆运输台账详情" >
|
||
<el-descriptions :column="3" width="600px">
|
||
<el-descriptions-item label="出入口编号">{{ ysdata.crkbh }}</el-descriptions-item>
|
||
<el-descriptions-item label="道闸编号">{{ ysdata.dzbh }}</el-descriptions-item>
|
||
<el-descriptions-item label="抬杆方式">{{ ysdata.tgfs }}</el-descriptions-item>
|
||
<el-descriptions-item label="进厂时间">{{ ysdata.jcsj }}</el-descriptions-item>
|
||
<el-descriptions-item label="出厂时间">{{ ysdata.ccsj }}</el-descriptions-item>
|
||
<el-descriptions-item label="车辆类型">{{ ysdata.cllx }}</el-descriptions-item>
|
||
<el-descriptions-item label="车牌颜色">{{ ysdata.clys }}</el-descriptions-item>
|
||
<el-descriptions-item label="车牌号">{{ ysdata.cph }}</el-descriptions-item>
|
||
<el-descriptions-item label="注册登记日期">{{ ysdata.zcdjsj }}</el-descriptions-item>
|
||
<el-descriptions-item label="车辆识别代码(VIN)">{{ ysdata.cpsbdm }}</el-descriptions-item>
|
||
<el-descriptions-item label="车辆品牌型号">{{ ysdata.clppxh }}</el-descriptions-item>
|
||
<el-descriptions-item label="发动机号码">{{ ysdata.fdjhm }}</el-descriptions-item>
|
||
<el-descriptions-item label="燃料类型">{{ ysdata.rllx }}</el-descriptions-item>
|
||
<el-descriptions-item label="排放阶段">{{ ysdata.pfjd }}</el-descriptions-item>
|
||
<el-descriptions-item label="使用性质">{{ ysdata.syxz }}</el-descriptions-item>
|
||
<el-descriptions-item label="联网状态">{{ ysdata.lwzt }}</el-descriptions-item>
|
||
<el-descriptions-item label="进厂运输货物名称">{{ ysdata.jcyshwmc }}</el-descriptions-item>
|
||
<el-descriptions-item label="进厂运输货物量">{{ ysdata.jchwl }}</el-descriptions-item>
|
||
<el-descriptions-item label="出厂运输货物名称">{{ ysdata.cchwmc }}</el-descriptions-item>
|
||
<el-descriptions-item label="出厂运输货物量">{{ ysdata.cchwl }}</el-descriptions-item>
|
||
<el-descriptions-item label="车队名称">{{ ysdata.cdmc }}</el-descriptions-item>
|
||
|
||
<el-descriptions-item label="进厂照片">
|
||
<div class="demo-image__preview">
|
||
<el-image style="width: 100px; height: 100px" :src="url" :preview-src-list="srcList">
|
||
</el-image>
|
||
</div>
|
||
</el-descriptions-item>
|
||
|
||
<el-descriptions-item label="行驶证">
|
||
<div class="demo-image__preview">
|
||
<el-image style="width: 100px; height: 100px" :src="url" :preview-src-list="srcList">
|
||
</el-image>
|
||
</div>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="手动抬杆照片">
|
||
<div class="demo-image__preview">
|
||
<el-image style="width: 100px; height: 100px" :src="url" :preview-src-list="srcList">
|
||
</el-image>
|
||
</div>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="随车清单">{{ ysdata.sdqd }}</el-descriptions-item>
|
||
</el-descriptions>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button @click="dialogFormVisible = false">取消</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</el-main>
|
||
</el-container>
|
||
</el-main>
|
||
</el-container>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
|
||
data:[{index:1,
|
||
crkbh:'123456',
|
||
dzbh:'25356',
|
||
tgfs:"自动",
|
||
jcsj:"2024-08-02",
|
||
ccsj:"2024-08-02",
|
||
cllx:"罐车",
|
||
clys:"白色",
|
||
cph:"Ad1233",
|
||
zcdjsj:"",
|
||
cpsbdm:"",
|
||
clppxh:"",
|
||
fdjhm:"",
|
||
rllx:"",
|
||
pfjd:"国五",
|
||
syxz:"汽油",
|
||
lxzt:"",
|
||
jcyshwmc:"",
|
||
jchwl:"",
|
||
cchwmc:"",
|
||
cchwl:"",
|
||
cdmc:"",
|
||
jczp:"",
|
||
sdqd:"",
|
||
xsz:"",
|
||
sdtgzp:""
|
||
|
||
}],
|
||
dialogFormVisible:false,
|
||
ysdata:{},
|
||
query: {},
|
||
count: 0,
|
||
timeRange: [],
|
||
cateOptions: [
|
||
{ id: 1, name: '货车' },
|
||
{ id: 2, name: '罐车' },
|
||
],
|
||
typeOptions: [
|
||
{ id: 1, name: '进厂' },
|
||
{ id: 2, name: '出厂' }
|
||
],
|
||
statusOptions: [
|
||
{ id: '', name: '全部' },
|
||
{ id: 10, name: '已录入' },
|
||
{ id: 20, name: '未录入' }
|
||
],
|
||
type_: {
|
||
1: '进厂',
|
||
2: '出厂'
|
||
},
|
||
timeOptions: ['日', '月', '年'],
|
||
apiObj: this.$API.enp.vehicle_access,
|
||
params: {},
|
||
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
srcList: [
|
||
'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
|
||
|
||
]
|
||
}
|
||
},
|
||
methods: {
|
||
updateCount(res, tableData) {
|
||
this.count = res.count
|
||
},
|
||
rowClick(row){
|
||
this.ysdata = row;
|
||
this.dialogFormVisible=true;
|
||
},
|
||
handleQuery() {
|
||
if (this.timeRange) {
|
||
this.query.access_time__gte = this.timeRange[0]
|
||
this.query.access_time__lte = this.timeRange[1]
|
||
} else {
|
||
this.query.access_time__gte = null
|
||
this.query.access_time__lte = null
|
||
}
|
||
this.$refs.table.queryData(this.query);
|
||
},
|
||
timeHandleQuery() { },
|
||
carHandleQuery() { },
|
||
backtoMap() {
|
||
this.$emit('close')
|
||
},
|
||
}
|
||
}
|
||
</script>
|