1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
| <template>
| <div v-loading="loading" style="height: 100%; width: 100%">
| <swiper :options="swiperOptions" style="height: 100%">
| <swiper-slide v-for="(item, index) in serializeList" :key="index">
| <div class="title-box">
| <p class="name">{{ item.projectCategoryName }}</p>
| <p>
| <span class="num">{{ item.num }}%</span>
| </p>
| </div>
| <DataProgress :stroke-width="6" :color="item.color" :percentage="item.num" />
| </swiper-slide>
| </swiper>
| </div>
| </template>
|
| <script>
| import dataVRequest from '@/api/dataV.js';
|
| import DataProgress from './dataProgress.vue';
|
| export default {
| name: 'project-type',
| components: {
| DataProgress,
| },
| data() {
| return {
| loading: true,
| // 轮播图配置
| swiperOptions: {
| direction: 'vertical',
| autoplay: {
| delay: 2000,
| disableOnInteraction: false,
| }, // 自动轮播
| slidesPerView: 5,
| loop: true,
| },
| colorList: [
| 'linear-gradient(270deg, #FFD15C 0%, rgba(200,172,36,0.4) 100%)',
| 'linear-gradient(270deg, #5CE4FF 0%, rgba(36,145,200,0.4) 100%)',
| 'linear-gradient(270deg, #20E6A4 0%, rgba(32,230,164,0.34) 100%)',
| 'linear-gradient(270deg, #FF5C5C 0%, rgba(200,36,36,0.4) 100%)',
| 'linear-gradient(270deg, #3E9EFF 0%, rgba(7,124,242,0.79) 100%)',
| ],
| list: [],
| };
| },
| computed: {
| serializeList() {
| return this.list.map((item, index) => {
| return {
| ...item,
| color: this.colorList[index % this.colorList.length],
| };
| });
| },
| },
| created() {
| dataVRequest.queryProjectNumByType().then((res) => {
| this.list = res;
| this.loading = false;
| });
| },
| };
| </script>
|
| <style lang="scss" scoped>
| .title-box {
| display: flex;
| justify-content: space-between;
| align-items: center;
| font-size: 12px;
| color: #fff;
| line-height: 22px;
|
| .name {
| opacity: 0.74;
| }
|
| .num {
| margin-left: 10px;
| }
| }
| </style>
|
|
