factory_web/src/views/bigScreen/enpComponents/transport.vue

206 lines
8.7 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>