340 lines
8.7 KiB
Vue
340 lines
8.7 KiB
Vue
<template>
|
|
<new-bg>
|
|
<flex-col>
|
|
<system-title show-back custom-title="磅秤台账"/>
|
|
<ModuleContent padding="0px 20px 20px">
|
|
<flex-col>
|
|
<Butgroup2 class="type-button">
|
|
<cus-button :class="['tabs-button',activeTabsButton == null?'active-tabs-button':'']"
|
|
@click="tabsChange(null)">
|
|
全部
|
|
</cus-button>
|
|
<cus-button :class="['tabs-button',activeTabsButton == 1?'active-tabs-button':'']" @click="tabsChange(1)">
|
|
东门
|
|
</cus-button>
|
|
<cus-button :class="['tabs-button',activeTabsButton == 2?'active-tabs-button':'']" @click="tabsChange(2)">
|
|
东门
|
|
</cus-button>
|
|
<cus-button :class="['tabs-button',activeTabsButton == 3?'active-tabs-button':'']" @click="tabsChange(3)">
|
|
东门
|
|
</cus-button>
|
|
<cus-button :class="['tabs-button',activeTabsButton == 4?'active-tabs-button':'']" @click="tabsChange(4)">
|
|
东门
|
|
</cus-button>
|
|
</Butgroup2>
|
|
<Split num="10"></Split>
|
|
<ModuleContent2 bg padding="20px">
|
|
<a-row :gutter="16">
|
|
<a-col :span="18">
|
|
<CustomTable
|
|
hide-action
|
|
hide-search
|
|
hide-button
|
|
:columns="columns"
|
|
:api-conf="apiConf"
|
|
:form-items="formItems"
|
|
@edit="editHandler"
|
|
@viewDetails="viewDetails"
|
|
>
|
|
<template slot="search-button" slot-scope="{ search }">
|
|
<a-button type="primary" @click="exportList(search)">导出历史数据</a-button>
|
|
<Split num="10"></Split>
|
|
</template>
|
|
</CustomTable>
|
|
</a-col>
|
|
<a-col :span="6">
|
|
<flex-col>
|
|
<web3-title>驾驶人详情</web3-title>
|
|
<ModuleContent padding="0">
|
|
<flex-col>
|
|
<img :src="selectedRecord.imgUrl" alt="" class="car-preview">
|
|
<butgroup2>
|
|
<cus-button2 flex>进出场抓拍图</cus-button2>
|
|
<!-- <cus-button2>行驶证-正面</cus-button2>-->
|
|
<!-- <cus-button2>行驶证-反面</cus-button2>-->
|
|
<!-- <cus-button2>环保清单</cus-button2>-->
|
|
</butgroup2>
|
|
<ModuleContent padding="20px 27px" class="desc">
|
|
<cus-desc :data="selectedRecord" :columns="descColumns"></cus-desc>
|
|
</ModuleContent>
|
|
</flex-col>
|
|
|
|
</ModuleContent>
|
|
</flex-col>
|
|
|
|
</a-col>
|
|
</a-row>
|
|
</ModuleContent2>
|
|
</flex-col>
|
|
</ModuleContent>
|
|
</flex-col>
|
|
</new-bg>
|
|
</template>
|
|
<script>
|
|
import Curd from "../../components/smallCommon/Curd.vue";
|
|
import moment from 'moment'
|
|
import SystemTitle from "../../components/smallCommon/SystemTitle.vue";
|
|
import NewBg from "../../components/NewBg.vue";
|
|
import FlexCol from "../../components/FlexCol.vue";
|
|
import ModuleContent from "../../components/ModuleContent.vue";
|
|
import ModuleContent2 from "../../components/smallCommon/ModuleContent2.vue";
|
|
import CustomTable from "../../components/smallCommon/CustomTable.vue";
|
|
import Split from "../../components/Split.vue";
|
|
import Web3Title from "../../components/smallCommon/Web3Title.vue";
|
|
import CusDesc from "../../components/smallCommon/CusDesc.vue";
|
|
import CusButton2 from "../../components/smallCommon/CusButton2.vue";
|
|
import Butgroup2 from "../../components/smallCommon/butgroup2.vue";
|
|
import CusButton from "../../components/smallCommon/CusButton4.vue";
|
|
|
|
export default {
|
|
name: "user",
|
|
components: {
|
|
CusButton,
|
|
Butgroup2, CusButton2, CusDesc,
|
|
Web3Title,
|
|
Split,
|
|
CustomTable,
|
|
ModuleContent2,
|
|
ModuleContent, FlexCol, NewBg, SystemTitle,
|
|
Curd
|
|
},
|
|
data() {
|
|
return {
|
|
isEdit: false,
|
|
roles: [],
|
|
descColumns: [
|
|
{
|
|
title: '车牌号',
|
|
dataIndex: 'carNumber',
|
|
width: '100%'
|
|
}, {
|
|
title: '车牌颜色',
|
|
dataIndex: 'carColorString',
|
|
width: '100%'
|
|
}, {
|
|
title: '车辆类型',
|
|
dataIndex: 'carType',
|
|
width: '100%'
|
|
}, {
|
|
title: '车辆类型',
|
|
dataIndex: 'carType',
|
|
width: '100%'
|
|
}, {
|
|
title: '排放等级',
|
|
dataIndex: 'effluent',
|
|
width: '100%'
|
|
}, {
|
|
title: 'VIN',
|
|
dataIndex: 'vin',
|
|
width: '100%'
|
|
}, {
|
|
title: '发动机号',
|
|
dataIndex: 'entryExitPictureUrl',
|
|
width: '100%'
|
|
}, {
|
|
title: '注册日期',
|
|
dataIndex: 'registrationDate',
|
|
width: '100%'
|
|
}
|
|
],
|
|
selectedRecord: {},
|
|
columns: [
|
|
{
|
|
dataIndex: 'outTime',
|
|
key: 'outTime',
|
|
title: '日期'
|
|
},
|
|
{
|
|
dataIndex: 'carNum',
|
|
key: 'carNum',
|
|
title: '车牌号'
|
|
},
|
|
{
|
|
dataIndex: 'carModel',
|
|
key: 'carModel',
|
|
title: '车型'
|
|
},
|
|
{
|
|
dataIndex: 'newCar',
|
|
key: 'newCar',
|
|
title: '新能源',
|
|
customRender(text) {
|
|
if (text) return '是'
|
|
return '否'
|
|
}
|
|
},
|
|
{
|
|
dataIndex: 'emissions',
|
|
key: 'emissions',
|
|
title: '燃油车'
|
|
},
|
|
{
|
|
dataIndex: 'createDateTime',
|
|
key: 'createDateTime',
|
|
title: '出厂日期'
|
|
}
|
|
],
|
|
apiConf: {
|
|
listApi: {api: '/api/Ledger/list', method: 'get'},
|
|
},
|
|
isShowInfoDetails: false,
|
|
activeButton: 1,
|
|
activeTabsButton: null
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
formItems() {
|
|
return [
|
|
{
|
|
type: 'dateRange',
|
|
key: 'time',
|
|
label: '日期',
|
|
isSearch: true,
|
|
placeholder: ['请选择开始日期', '请选择结束日期'],
|
|
rules: [
|
|
{required: true, message: '请选择时间范围'}
|
|
],
|
|
fields: ['startTime', 'endTime']
|
|
}
|
|
]
|
|
}
|
|
},
|
|
created() {
|
|
},
|
|
|
|
methods: {
|
|
editHandler(isEdit) {
|
|
this.isEdit = isEdit
|
|
},
|
|
exportList({time}) {
|
|
const [start, end] = time
|
|
const fmt = 'YYYY-MM-DD'
|
|
window.open(`http://101.43.201.20:5000/api/Ledger/export?start=${moment(start).format(fmt)}&end=${moment(end).format(fmt)}`, '_blank')
|
|
},
|
|
viewDetails(data) {
|
|
console.log('data:', data)
|
|
this.isShowInfoDetails = true
|
|
},
|
|
//根据选中的图片类型查看图片
|
|
viewImgByType(value) {
|
|
this.activeButton = value
|
|
},
|
|
//关闭详情
|
|
closeDetails() {
|
|
this.isShowInfoDetails = false
|
|
},
|
|
|
|
//方位改变
|
|
tabsChange(value) {
|
|
this.activeTabsButton = value
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="less">
|
|
.car-preview {
|
|
width: 100%;
|
|
height: 260px;
|
|
}
|
|
|
|
.desc {
|
|
background: rgba(24, 131, 201, 0.2);
|
|
border: 1px solid rgba(15, 81, 122, 1);
|
|
}
|
|
|
|
.type-button {
|
|
max-width: 70%;
|
|
|
|
.tabs-button {
|
|
height: 40px;
|
|
cursor: pointer;
|
|
border: 1px solid #e8e8e8;
|
|
width: 200px;
|
|
text-align: center;
|
|
line-height: 40px;
|
|
}
|
|
|
|
.active-tabs-button {
|
|
background: #0088ff;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
|
|
.data-info {
|
|
display: flex;
|
|
flex-flow: row;
|
|
|
|
.left-table {
|
|
flex: 1;
|
|
}
|
|
|
|
.right-details {
|
|
width: 600px;
|
|
height: 700px;
|
|
display: flex;
|
|
flex-flow: column;
|
|
align-items: center;
|
|
border: 1px solid #e8e8e8;
|
|
margin-left: 10px;
|
|
|
|
.header-title {
|
|
font-size: 18px;
|
|
text-align: center;
|
|
}
|
|
|
|
img {
|
|
margin-top: 10px;
|
|
width: 500px;
|
|
height: 300px;
|
|
}
|
|
|
|
.group-button {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
flex-flow: row;
|
|
width: 500px;
|
|
justify-content: space-between;
|
|
|
|
._button {
|
|
width: 100px;
|
|
height: 50px;
|
|
border: 1px solid #777777;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
line-height: 50px;
|
|
}
|
|
|
|
.active_button {
|
|
background: #0088ff;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
.details-info {
|
|
padding-left: 50px;
|
|
width: 100%;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-flow: column;
|
|
justify-content: space-around;
|
|
align-items: flex-start;
|
|
|
|
.details-info-item {
|
|
display: flex;
|
|
flex-flow: row;
|
|
}
|
|
|
|
}
|
|
|
|
.footer-button {
|
|
height: 30px;
|
|
margin-bottom: 10px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
</style>
|