gxwebsoft
0b81001ce7
- 将欢迎页整体结构拆分为多个功能区组件，提高代码可维护性 - 移除原有欢迎横幅、指标卡、图表区、下方区及快捷入口的静态实现 - 引入并注册 SectionKpi、SectionStructure、SectionBusiness 等八个子组件 - 删除冗余样式，更新整体背景和布局样式 - 精简模板内容，仅保留子组件渲染及页脚版权信息 - 移除无用的响应式数据、计算属性及方法 - 包含依赖包 echarts 的新增，支持后续图表功能开发
76 lines
2.0 KiB
Vue
76 lines
2.0 KiB
Vue
<template>
|
|
<section class="wel-sec">
|
|
<div class="wel-sec__head">
|
|
<span class="wel-sec__title">车队与线路</span>
|
|
<wel-filters condition-label="运输方式" />
|
|
</div>
|
|
|
|
<el-row :gutter="16">
|
|
<el-col :xs="24" :md="12">
|
|
<rank-panel
|
|
title="下游车队 TOP10"
|
|
unit="单"
|
|
color="#1a9e94"
|
|
:items="fleetItems"
|
|
height="320px"
|
|
:name-width="120"
|
|
class="fleet-panel"
|
|
/>
|
|
</el-col>
|
|
<el-col :xs="24" :md="12">
|
|
<rank-panel
|
|
title="运输线路 TOP5"
|
|
unit="单"
|
|
color="#c9a227"
|
|
:items="routeItems"
|
|
height="320px"
|
|
:name-width="120"
|
|
class="fleet-panel"
|
|
/>
|
|
</el-col>
|
|
</el-row>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import RankPanel from './rank-panel.vue';
|
|
import WelFilters from './wel-filters.vue';
|
|
|
|
export default {
|
|
name: 'section-fleet',
|
|
components: { RankPanel, WelFilters },
|
|
data() {
|
|
return {
|
|
// Mock：车队/线路排行数据，对接统计接口后替换
|
|
fleetItems: [
|
|
{ name: '顺达车队', value: 186.5 },
|
|
{ name: '穗联物流车队', value: 158.2 },
|
|
{ name: '宏运车队', value: 132.6 },
|
|
{ name: '桂海运输车队', value: 118.4 },
|
|
{ name: '南北快运车队', value: 96.7 },
|
|
{ name: '恒通货运车队', value: 85.3 },
|
|
{ name: '运达车队', value: 74.2 },
|
|
{ name: '捷安物流车队', value: 62.8 },
|
|
{ name: '广通运输车队', value: 54.6 },
|
|
{ name: '长顺车队', value: 43.1 },
|
|
],
|
|
routeItems: [
|
|
{ name: '南宁 → 柳州', value: 342.5 },
|
|
{ name: '钦州港 → 南宁', value: 285.6 },
|
|
{ name: '贵港 → 广州', value: 226.3 },
|
|
{ name: '桂林 → 南宁', value: 168.2 },
|
|
{ name: '玉林 → 深圳', value: 142.6 },
|
|
],
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '../dashboard.scss';
|
|
|
|
.fleet-panel {
|
|
margin-bottom: 16px;
|
|
}
|
|
</style>
|