刘泉佳
71 lines
2.0 KiB
Vue
71 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="项目收入 TOP5"
|
|
unit="万元"
|
|
color="#8b5cf6"
|
|
:items="incomeItems"
|
|
height="280px"
|
|
:name-width="180"
|
|
class="project-panel"
|
|
/>
|
|
</el-col>
|
|
<el-col :xs="24" :md="12">
|
|
<rank-panel
|
|
title="项目运量 TOP5"
|
|
unit="万吨"
|
|
color="#2bb3a3"
|
|
:items="volumeItems"
|
|
height="280px"
|
|
:name-width="180"
|
|
class="project-panel"
|
|
/>
|
|
</el-col>
|
|
</el-row>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import RankPanel from './rank-panel.vue';
|
|
import WelFilters from './wel-filters.vue';
|
|
|
|
export default {
|
|
name: 'section-project',
|
|
components: { RankPanel, WelFilters },
|
|
data() {
|
|
return {
|
|
// Mock：项目排行数据，对接统计接口后替换
|
|
incomeItems: [
|
|
{ name: '广西华谊氯碱化工物流项目', value: 1285.6 },
|
|
{ name: '柳钢集团钢材外运项目（二期）', value: 982.4 },
|
|
{ name: '南宁轨道交通建材配送项目', value: 756.3 },
|
|
{ name: '北部湾港集装箱短驳项目', value: 621.7 },
|
|
{ name: '中粮集团粮食储备调运项目', value: 468.2 },
|
|
],
|
|
volumeItems: [
|
|
{ name: '广西华谊氯碱化工物流项目', value: 32.5 },
|
|
{ name: '柳钢集团钢材外运项目（二期）', value: 26.8 },
|
|
{ name: '南宁轨道交通建材配送项目', value: 21.4 },
|
|
{ name: '北部湾港集装箱短驳项目', value: 18.6 },
|
|
{ name: '中粮集团粮食储备调运项目', value: 15.2 },
|
|
],
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@use '../dashboard.scss';
|
|
|
|
.project-panel {
|
|
margin-bottom: 16px;
|
|
}
|
|
</style>
|