|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 719 KiB After Width: | Height: | Size: 662 KiB |
|
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 3.9 KiB |
|
Before Width: | Height: | Size: 5.7 KiB After Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 4.4 KiB |
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 3.9 KiB |
|
Before Width: | Height: | Size: 5.7 KiB After Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 145 KiB After Width: | Height: | Size: 129 KiB |
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.4 KiB |
@ -0,0 +1,346 @@
|
||||
<template>
|
||||
<div class="qycl">
|
||||
<div class="title"><img src="../../assets/safetyIndex/装饰009991.png" alt="">企业车辆</div>
|
||||
<div class="qyclBody">
|
||||
<div class="today">
|
||||
<div class="todayChild">
|
||||
<div class="iconBox"><img src="../../assets/safetyIndex/今日进园区.png" alt=""></div>
|
||||
<div class="iconmsg">
|
||||
<div class="msgText">今日进园区</div>
|
||||
<div class="msgNum"><span>{{ intotal }}</span> 辆</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="todayChild">
|
||||
<div class="iconBox"><img src="../../assets/safetyIndex/今日出园区.png" alt=""></div>
|
||||
<div class="iconmsg">
|
||||
<div class="msgText">今日出园区</div>
|
||||
<div class="msgNum"><span>{{ outtotal }}</span> 辆</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="today">
|
||||
<div class="todayChild" @click="showfangkeVisible(1)" style="cursor: pointer;">
|
||||
<div class="iconBox"><img src="../../assets/safetyIndex/物流.png" alt=""></div>
|
||||
<div class="iconmsg">
|
||||
<div class="msgText">自有</div>
|
||||
<div class="msgNum"><span>{{ ziyouTotal }}</span> 辆</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="todayChild" @click="showfangkeVisible(2)" style="cursor: pointer;">
|
||||
<div class="iconBox"><img src="../../assets/safetyIndex/消防.png" alt=""></div>
|
||||
<div class="iconmsg">
|
||||
<div class="msgText">租赁</div>
|
||||
<div class="msgNum"><span>{{ zulintotal }}</span> 辆</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog title="企业车辆详情" :visible.sync="fangkeVisible" class="fangkeForm">
|
||||
<el-table :cell-style="{ background: 'revert' }" :data="fangkeList" class="table"
|
||||
style="width: calc(100% - 40px); margin:0 20px;" :row-style="tableRowStyle"
|
||||
:header-row-style="tableHeaderColor" :header-cell-style="tableHeaderCellColor">
|
||||
<el-table-column type="index" width="50" label="序号">
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="plateNo" label="车牌号" width="100">
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="vehicleType" label="车型" width="120">
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="useTypeCn" label="使用方式" width="80">
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="companyName" label="归属单位">
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="vinNo" label="车架号" width="180">
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="nuclearLoad" label="核载" width="80">
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="deadWeight" label="自重" width="80">
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="plateColor" label="车牌颜色" width="80">
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="transportLicense" label="运输许可证" width="120">
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="registerTime" label="登记时间">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="block">
|
||||
<el-pagination style="float:right;margin:5px;" class="msg-pagination-container" :background="true"
|
||||
@size-change="fangkeSizeChange" @current-change="fangkeCurrentChange" :current-page="fangkepageNum"
|
||||
:page-sizes="[10]" layout="total, sizes, prev, pager, next, jumper" :total="fangketotal">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { vehicleUserType, vehicleOut, vehicleIn, vehicleDetail } from '@/api/safetyIndex'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
staffStatisticsList: [],
|
||||
staffDetailList: [],
|
||||
listTotal: {},
|
||||
fangkeVisible: false,
|
||||
fangkepageSize: 10,
|
||||
fangkepageNum: 1,
|
||||
fangketotal: 0,
|
||||
fangkeList: [],
|
||||
intotal: 0,
|
||||
outtotal: 0,
|
||||
ziyouTotal: 0,
|
||||
zulintotal: 0,
|
||||
useType: 0,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getUserType()
|
||||
vehicleIn().then(res => {
|
||||
this.intotal = res.data
|
||||
})
|
||||
vehicleOut().then(res => {
|
||||
this.outtotal = res.data
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
tableRowStyle({ rowIndex }) {
|
||||
if ((rowIndex + 1) % 2 == 1) {
|
||||
return { 'background': 'rgba(0,0,0,0)', 'color': '#fff', 'border': '0' }
|
||||
} else {
|
||||
return { 'background': 'rgba(61, 85, 102, 0.16)', 'border': '0', 'color': '#fff' }
|
||||
}
|
||||
},
|
||||
tableHeaderColor() {
|
||||
return { 'background': 'linear-gradient( rgba(38, 88, 76, 0.6) 100%, rgba(55, 131, 128, 0.6) 100%, rgba(34, 74, 53, 0.46) 46%)' }
|
||||
// return { 'background': 'url("~@/assets/archives/列表9910.png") no-repeat;', 'background-size': '100% 100%;', 'color': '#fff' }
|
||||
},
|
||||
tableHeaderCellColor() {
|
||||
return { 'background': 'rgba(0,0,0,0)', 'border': '0', 'color': '#fff' }
|
||||
},
|
||||
|
||||
fangkeSizeChange(val) {
|
||||
this.fangkepageNum = 1;
|
||||
this.fangkepageSize = val;
|
||||
this.showfangkeVisible(this.useType)
|
||||
},
|
||||
fangkeCurrentChange(val) {
|
||||
this.fangkepageNum = val;
|
||||
this.showfangkeVisible(this.useType)
|
||||
},
|
||||
|
||||
getUserType() {
|
||||
vehicleUserType({ useType: 1 }).then(res => {
|
||||
this.ziyouTotal = res.data
|
||||
})
|
||||
vehicleUserType({ useType: 2 }).then(res => {
|
||||
this.zulintotal = res.data
|
||||
})
|
||||
|
||||
},
|
||||
showfangkeVisible(val) {
|
||||
this.useType = val
|
||||
vehicleDetail({ pageSize: this.fangkepageSize, pageNum: this.fangkepageNum, useType: this.useType }).then(res => {
|
||||
this.fangkeList = res.data
|
||||
this.fangketotal = res.total
|
||||
this.fangkeVisible = true
|
||||
})
|
||||
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.qycl {
|
||||
height: 186px;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
background: url('~@/assets/safetyIndex/主屏板块1.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 33px;
|
||||
background: url('~@/assets/safetyIndex/标题样式.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
font-size: 16px;
|
||||
color: #D9E7FF;
|
||||
letter-spacing: 1px;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.qyclBody {
|
||||
width: 100%;
|
||||
height: calc(100% - 33px);
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.today {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 5px 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.todayChild {
|
||||
width: 48%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
.iconBox {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: url('~@/assets/safetyIndex/编组 16.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-left: 20px;
|
||||
|
||||
img {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.iconmsg {
|
||||
margin-left: 10px;
|
||||
width: 108px;
|
||||
height: 58px;
|
||||
|
||||
|
||||
.msgText {
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
color: #D0DEEE;
|
||||
letter-spacing: 1px;
|
||||
vertical-align: middle;
|
||||
font-weight: 400;
|
||||
line-height: 29px;
|
||||
}
|
||||
|
||||
.msgNum {
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
background: url('~@/assets/safetyIndex/矩形21.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
letter-spacing: 1.25px;
|
||||
line-height: 18px;
|
||||
font-weight: 600;
|
||||
vertical-align: middle;
|
||||
line-height: 29px;
|
||||
padding-left: 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
span {
|
||||
font-size: 20px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 2.08px;
|
||||
line-height: 21px;
|
||||
font-weight: 700;
|
||||
vertical-align: middle;
|
||||
line-height: 29px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.today:first-child {
|
||||
border-bottom: 1px solid rgba(114, 155, 137, 0.48);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.fangkeForm {
|
||||
|
||||
|
||||
/deep/ .el-dialog {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
background: url('~@/assets/head/编组 3021112.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 1241px;
|
||||
height: 640px;
|
||||
position: relative;
|
||||
|
||||
.el-dialog__title {
|
||||
font-size: 16px;
|
||||
color: #EBFFF4;
|
||||
letter-spacing: 2px;
|
||||
|
||||
text-shadow: 0 0 9px rgba(21, 255, 195, 0.77);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
box-sizing: border-box;
|
||||
height: 360px;
|
||||
|
||||
.scopeQuantity {
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/.el-table {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
|
||||
td.el-table__cell {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.xiangqing {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
border: 0;
|
||||
color: rgba(48, 196, 255, 0.7);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.staffPic {
|
||||
width: 19px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/.el-input__inner {
|
||||
// background: url('~@/assets/companyFile/2121.png') no-repeat;
|
||||
background: url('~@/assets/companyFile/矩形备份 18.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border: 1px solid rgba(40, 132, 126, 1);
|
||||
color: rgba(234, 246, 255, 0.7);
|
||||
;
|
||||
|
||||
.el-range-separator {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.el-range-input {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
</style>
|
||||