刘泉佳
68 lines
1.8 KiB
Vue
68 lines
1.8 KiB
Vue
<template>
|
|
<section class="wel-sec">
|
|
<el-row :gutter="16">
|
|
<el-col :xs="24" :md="12">
|
|
<div class="wel-card summary-panel">
|
|
<div class="panel-title">
|
|
车辆耗时占比
|
|
<span class="panel-title__unit">按小时</span>
|
|
</div>
|
|
<wel-chart :option="donutOpt" height="260px" />
|
|
</div>
|
|
</el-col>
|
|
<el-col :xs="24" :md="12">
|
|
<div class="wel-card summary-panel">
|
|
<div class="panel-title">
|
|
单据完成趋势
|
|
<span class="panel-title__unit">按周</span>
|
|
</div>
|
|
<wel-chart :option="lineOpt" height="260px" />
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import WelChart from './wel-chart.vue';
|
|
import { donutOption, lineAreaOption } from '../chart-options';
|
|
|
|
export default {
|
|
name: 'section-summary',
|
|
components: { WelChart },
|
|
data() {
|
|
return {
|
|
// Mock：车辆耗时与单据完成数据，对接统计接口后替换
|
|
timeItems: [
|
|
{ name: '在途运输', value: 86.2 },
|
|
{ name: '装货等待', value: 32.5 },
|
|
{ name: '卸货作业', value: 28.4 },
|
|
{ name: '返程空驶', value: 21.6 },
|
|
{ name: '场站等待', value: 18.3 },
|
|
{ name: '维修保养', value: 9.8 },
|
|
],
|
|
weeks: ['1周', '2周', '3周', '4周', '5周', '6周', '7周'],
|
|
doneData: [520, 545, 508, 532, 560, 548, 572],
|
|
};
|
|
},
|
|
computed: {
|
|
donutOpt() {
|
|
return donutOption(this.timeItems, { centerTitle: '196.8', centerSub: '总耗时（小时）' });
|
|
},
|
|
lineOpt() {
|
|
return lineAreaOption(this.weeks, [
|
|
{ name: '完成单据', data: this.doneData, color: '#1a9e94' },
|
|
]);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@use '../dashboard.scss';
|
|
|
|
.summary-panel {
|
|
margin-bottom: 16px;
|
|
}
|
|
</style>
|