<template>
|
<div class="main_app1">
|
<div class="main_home">
|
<div class="home_header">
|
<div class="mb10 fs17">下午好，{{ userInfo.realname }}</div>
|
<div class="fs13">
|
今天是 {{ nowDate }} {{ nowWeek }}，欢迎访公务车钥匙智能柜管理系统
|
</div>
|
</div>
|
</div>
|
<div class="main_head">
|
<div class="main_head_title" >
|
<span>车辆派单统计总览(次)</span>
|
</div>
|
<div class="main_head_bottom">
|
<div class="main_head_item blue">
|
<span>{{info.todayTotal || 0}}</span>
|
<span>今日</span>
|
</div>
|
<div class="main_head_item red">
|
<span>{{info.yesterdayTotal || 0}}</span>
|
<span>昨日</span>
|
</div>
|
<div class="main_head_item yellow">
|
<span>{{info.weekTotal || 0}}</span>
|
<span>本周</span>
|
</div>
|
<div class="main_head_item orange">
|
<span>{{info.monthTotal || 0}}</span>
|
<span>本月</span>
|
</div>
|
<div class="main_head_item darkBlue">
|
<span>{{info.yearTotal || 0}}</span>
|
<span>本年</span>
|
</div>
|
</div>
|
</div>
|
<div class="main_content">
|
<div class="type_wrap">
|
<div class="title" style="display: flex; align-items: center; justify-content: space-between;">
|
<div style="display: flex; align-items: center;">
|
<span>全年派车申请趋势(次)</span>
|
</div>
|
</div>
|
<div id="echart1" ref="typeRef" v-show="info.cumulativeDataList && info.cumulativeDataList.length"></div>
|
<div style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;" v-show="!info.cumulativeDataList || !info.cumulativeDataList.length">
|
<img style="width: 200px;" src="@/assets/images/default_homeimg.png" alt="">
|
</div>
|
</div>
|
</div>
|
<div class="main_table">
|
<div class="main_table_list">
|
<div class="title" style="display: flex; align-items: center; justify-content: space-between;">
|
<div style="display: flex; align-items: center;">
|
<span>入园车辆统计表</span>
|
<el-radio-group style="margin-left: 20px;" v-model="radio" @change="changeBB">
|
<el-radio-button label="month">月度</el-radio-button>
|
<el-radio-button label="year">年度</el-radio-button>
|
</el-radio-group>
|
<el-date-picker
|
v-model="date1"
|
:type="radio"
|
:clearable="false"
|
@change="getReportLists()"
|
:value-format="radio === 'month' ? 'yyyy-MM' : 'yyyy'"
|
style="margin-left: 10px; width: 120px;"
|
placeholder="请选择">
|
</el-date-picker>
|
</div>
|
<el-button type="primary" style="margin-left: 20px;" icon="el-icon-upload2" @click="daochu">导出</el-button>
|
</div>
|
<div style="width: 100%;display: flex;margin: 20px">
|
<span style="width: 100px;text-align: right;padding-right: 20px;">指定车辆</span>
|
<el-select v-model="carCodeList" filterable multiple clearable style="margin-left: 10px;width: 100%;padding-right: 20px; " @change="getReportLists" placeholder="指定车辆" >
|
<el-option v-for="item in carList" :key="item.code" :label="item.code" :value="item.code">
|
</el-option>
|
</el-select>
|
</div>
|
<div style="display: block;">
|
<template v-if="column.length > 0">
|
<el-table
|
style="width: 100%; margin-top: 15px;"
|
:data="list"
|
:header-row-style="{'background-color': '#F7F7F7'}"
|
border
|
>
|
<el-table-column :prop="item" :label="item" align="center" :fixed="index === 0 ? true : index === column.length - 1 ? 'right' : false" v-for="(item, index) in column" :key="index">
|
<template slot-scope="{row}">
|
<span v-if="row[item] && row[item] >0" class="green" style="font-weight: 600;">{{row[item]}}</span>
|
<span v-else >{{row[item]}}</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
</template>
|
<div style="width: 100%;margin-top: 100px;height: 100px;display: flex;align-items: center;justify-content: center;" v-else>
|
<img style="width: 200px;" src="@/assets/images/default_homeimg.png" alt="">
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import * as echarts from 'echarts'
|
import { getCarUseData, getReportList, reportExportExcel } from '@/api/business/carUseBook'
|
import dayjs from 'dayjs'
|
import { weeks } from '@/utils/config'
|
import { allList as carList } from '@/api/business/cars'
|
export default {
|
data () {
|
return {
|
info: { cumulativeDataList: [] },
|
nowDate: '',
|
nowWeek: '',
|
isGroupBy: 0,
|
radio: 'month',
|
value: '',
|
dateType: 'month',
|
date: '',
|
carids: [],
|
carList: [],
|
date1: '',
|
column: [],
|
list: [],
|
carCodeList: []
|
}
|
},
|
computed: {
|
userInfo () {
|
return this.$store.state.userInfo
|
}
|
},
|
mounted () {
|
var now = new Date()
|
var year = now.getFullYear()
|
var month = now.getMonth() + 1 > 9 ? now.getMonth() + 1 : `0${now.getMonth() + 1}`
|
this.value = `${year}-${month}`
|
this.date1 = `${year}-${month}`
|
this.updateDate()
|
this.getData()
|
this.loadCars()
|
this.getReportLists()
|
},
|
methods: {
|
loadCars () {
|
carList({
|
type: 0 // 公务车
|
})
|
.then(res => {
|
this.carList = res
|
})
|
.catch(e => {
|
})
|
.finally(() => {
|
})
|
},
|
updateDate () {
|
this.nowDate = dayjs().format('YYYY年M月D日')
|
this.nowWeek = weeks[new Date().getDay()]
|
},
|
daochu () {
|
reportExportExcel({ dateStr: this.date1, carCodeList: this.carCodeList}).then(res => {
|
this.download(res)
|
})
|
},
|
getReportLists () {
|
this.column=[]
|
this.list=[]
|
getReportList({ dateStr: this.date1, carCodeList: this.carCodeList, type: 0 })
|
.then(res => {
|
if (res && res.length) {
|
this.column = res[0]
|
this.list = res.slice(1).map(row => {
|
const obj = {}
|
this.column.forEach((header, index) => {
|
obj[header] = row[index]
|
})
|
return obj
|
})
|
}
|
console.log(this.list)
|
})
|
},
|
changeBB () {
|
if (this.radio === 'month') {
|
const now = new Date()
|
const year = now.getFullYear()
|
const month = now.getMonth() + 1 > 9 ? now.getMonth() + 1 : `0${now.getMonth() + 1}`
|
this.date1 = `${year}-${month}`
|
} else {
|
const now = new Date()
|
const year = now.getFullYear()
|
this.date1 = `${year}`
|
}
|
this.getReportLists()
|
},
|
changeDateType () {
|
if (this.dateType === 'month') {
|
const now = new Date()
|
const year = now.getFullYear()
|
const month = now.getMonth() + 1 > 9 ? now.getMonth() + 1 : `0${now.getMonth() + 1}`
|
this.value = `${year}-${month}`
|
} else {
|
const now = new Date()
|
const year = now.getFullYear()
|
this.value = `${year}`
|
}
|
this.getReportLists()
|
},
|
// 基础数据
|
getData () {
|
getCarUseData({ }).then(res => {
|
this.info = res || {}
|
setTimeout(() => {
|
this.initType()
|
}, 1000)
|
})
|
},
|
// 全年入园车辆趋势
|
initType () {
|
if (!this.info.cumulativeDataList) return
|
const myChart = echarts.init(document.querySelector('#echart1'))
|
const names = this.info.cumulativeDataList.map(item => item.name)
|
const datas = this.info.cumulativeDataList.map(item => item.total)
|
const option = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'line'
|
}
|
},
|
legend: {
|
show: false,
|
orient: 'vertical',
|
left: 'left'
|
},
|
graphic: {
|
elements: [
|
{
|
type: 'text',
|
left: 'left',
|
top: 'top',
|
style: {
|
text: '派车次数',
|
textAlign: 'center',
|
fill: '#333'
|
}
|
}
|
]
|
},
|
grid: {
|
left: '0%',
|
right: '5%',
|
bottom: '10%',
|
top: '20%',
|
containLabel: true
|
},
|
xAxis: {
|
type: 'category',
|
data: names
|
},
|
yAxis: {
|
type: 'value',
|
axisLine: {
|
show: true
|
},
|
axisLabel: {
|
formatter: function (value) {
|
// 四舍五入到最近的整数
|
return Math.round(value)
|
}
|
}
|
},
|
series: [
|
{
|
data: datas,
|
name: '入园车辆',
|
type: 'line',
|
areaStyle: {
|
normal: {
|
color: {
|
x: 0,
|
y: 0,
|
x2: 0,
|
y2: 1,
|
colorStops: [{
|
offset: 0,
|
color: '#207FF7' // 0% 处的颜色
|
}, {
|
offset: 1,
|
color: 'rgba(255,255,255,.2)' // 100% 处的颜色
|
}],
|
globalCoord: false // 缺省为 false
|
}
|
}
|
},
|
lineStyle: { // 线条样式
|
color: {
|
type: 'linear',
|
x: 0,
|
y: 0,
|
x2: 0,
|
y2: 1,
|
colorStops: [{
|
offset: 0, color: '#207FF7' // 0% 处的颜色
|
}, {
|
offset: 1, color: '#207FF7' // 100% 处的颜色
|
}]
|
},
|
width: 2 // 线条粗细
|
},
|
symbol: 'circle',
|
symbolSize: 10,
|
itemStyle: {
|
borderWidth: 1,
|
borderColor: '#fff',
|
color: '#207FF7'
|
},
|
smooth: false
|
}
|
]
|
}
|
myChart.setOption(option)
|
window.addEventListener('resize', function () { // 执行
|
myChart.resize()
|
})
|
myChart.resize()
|
}
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
|
.main_app1 {
|
width: 100%;
|
height: calc(100% - 44px);
|
overflow-y: auto;
|
overflow-x: hidden;
|
padding: 15px;
|
box-sizing: border-box;
|
background-color: #F4F7FC;
|
.main_home {
|
background: #f4f7fc;
|
position: relative;
|
width: 100%;
|
height: 120px;
|
overflow: hidden;
|
.home_header {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 80px;
|
padding: 20px;
|
color: #fff;
|
background: linear-gradient(180deg, #076ae5 10%, rgba(32, 127, 247, 0) 100%);
|
}
|
}
|
.main_head {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
margin-bottom: 10px;
|
background-color: #ffffff;
|
padding: 20px;
|
box-sizing: border-box;
|
.main_head_title {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-bottom: 20px;
|
span {
|
font-weight: 500;
|
font-size: 18px;
|
color: #222222;
|
margin-right: 30px;
|
}
|
}
|
.main_head_bottom {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.blue {
|
border-left: 8px solid #12BB8B;
|
}
|
.red {
|
border-left: 8px solid #F6CF46;
|
}
|
.yellow {
|
border-left: 8px solid #5DC9FB;
|
}
|
.orange {
|
border-left: 8px solid #FF9E56;
|
}
|
.darkBlue {
|
border-left: 8px solid #6B6EFF;
|
}
|
.main_head_item {
|
width: 19%;
|
height: 112px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
box-sizing: border-box;
|
border-radius: 5px;
|
background-color: #F4F7FC;
|
span {
|
&:nth-child(1) {
|
font-weight: 600;
|
font-size: 30px;
|
color: #222222;
|
}
|
&:nth-child(2) {
|
font-weight: 400;
|
font-size: 14px;
|
color: #222222;
|
}
|
}
|
}
|
}
|
}
|
|
.main_table {
|
display: flex;
|
align-items: start;
|
justify-content: space-between;
|
margin-top: 10px;
|
.main_table_list {
|
background-color: #ffffff;
|
padding: 20px;
|
box-sizing: border-box;
|
width: 100%;
|
.title {
|
display: flex;
|
align-items: center;
|
span {
|
font-weight: 500;
|
font-size: 18px;
|
color: #222222;
|
}
|
}
|
.list_wu {
|
width: 100%;
|
height: 100px;
|
line-height: 100px;
|
text-align: center;
|
font-size: 16px;
|
color: #222222;
|
}
|
.list_head {
|
width: 100%;
|
height: 50px;
|
display: flex;
|
align-items: center;
|
background-color: #F7F7F7;
|
border-left: 1px solid #DFE2E8;
|
border-top: 1px solid #DFE2E8;
|
margin-top: 15px;
|
.list_head_item {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 13px;
|
color: #222222;
|
font-weight: 500;
|
border-right: 1px solid #DFE2E8;
|
}
|
}
|
.table_box {
|
width: 100%;
|
border-bottom: 1px solid #DFE2E8;
|
.list_content {
|
width: 100%;
|
height: 50px;
|
display: flex;
|
align-items: center;
|
border-left: 1px solid #DFE2E8;
|
border-top: 1px solid #DFE2E8;
|
.list_head_item {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
border-right: 1px solid #DFE2E8;
|
align-items: center;
|
justify-content: center;
|
font-size: 13px;
|
color: #222222;
|
}
|
}
|
}
|
}
|
.main_table_list1 {
|
width: 30%;
|
padding: 20px;
|
box-sizing: border-box;
|
flex-shrink: 0;
|
background-color: #ffffff;
|
.title {
|
font-weight: 500;
|
font-size: 18px;
|
color: #222222;
|
}
|
.list_wu {
|
width: 100%;
|
height: 100px;
|
line-height: 100px;
|
text-align: center;
|
font-size: 16px;
|
color: #222222;
|
}
|
.list_head {
|
width: 100%;
|
height: 50px;
|
display: flex;
|
align-items: center;
|
background-color: #F7F7F7;
|
border-left: 1px solid #DFE2E8;
|
border-top: 1px solid #DFE2E8;
|
margin-top: 15px;
|
.list_head_item {
|
flex: 1.8;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 13px;
|
color: #222222;
|
font-weight: 500;
|
border-right: 1px solid #DFE2E8;
|
&:last-child {
|
flex: 1;
|
}
|
}
|
}
|
.table_box {
|
width: 100%;
|
border-bottom: 1px solid #DFE2E8;
|
.list_content {
|
width: 100%;
|
height: 50px;
|
display: flex;
|
align-items: center;
|
border-left: 1px solid #DFE2E8;
|
border-top: 1px solid #DFE2E8;
|
.list_head_item {
|
flex: 1.8;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
border-right: 1px solid #DFE2E8;
|
justify-content: center;
|
text-align: center;
|
font-size: 13px;
|
color: #222222;
|
&:last-child {
|
flex: 1;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.main_content {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
height: 350px;
|
|
.title {
|
font-weight: 500;
|
font-size: 18px;
|
color: #222222;
|
}
|
|
.type_wrap {
|
flex: 1;
|
height: 100%;
|
background-color: #ffffff;
|
padding: 20px;
|
box-sizing: border-box;
|
/*border-right: 12px solid #f7f7f7;*/
|
|
#echart1 {
|
width: 100%;
|
height: 100%;
|
margin-top: 18px;
|
}
|
}
|
|
.dept_wrap {
|
width: 420px;
|
flex-shrink: 0;
|
height: 100%;
|
background-color: #ffffff;
|
padding: 20px;
|
box-sizing: border-box;
|
margin-left: 10px;
|
#echart_2 {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
}
|
</style>
|
