|
|
@@ -1,16 +1,37 @@
|
|
1
|
1
|
<template>
|
|
2
|
2
|
<div class="body-wrapper">
|
|
3
|
3
|
<div class="search-wrapper">
|
|
4
|
|
- <div class="header-row">
|
|
5
|
|
- <div v-for="(item, index) in menus" :key="index" class="menu-btn" style="width: 16%" @click="jumpToSearchPage(item)">
|
|
6
|
|
- <p>{{ item.title }}</p>
|
|
7
|
|
- <div class="flex" style="padding-top: 10px;">
|
|
8
|
|
- <div style="width: 26%;" class="middle-flex">
|
|
9
|
|
- <img style="width: 50px; height: 50px;" :src="`../../../../static/homepage/group${index+1}.png`"/>
|
|
|
4
|
+ <div class="header-row clearfix">
|
|
|
5
|
+ <div class="data-repository">
|
|
|
6
|
+ <div class="data-repo-title">
|
|
|
7
|
+ <span class="icon"></span>
|
|
|
8
|
+ 数据资源库
|
|
|
9
|
+ </div>
|
|
|
10
|
+ <div class="data-repo-wrap">
|
|
|
11
|
+ <div v-for="(item, index) in menus" :key="index" class="menu-btn" style="width: 16%" @click="jumpToSearchPage(item)">
|
|
|
12
|
+ <p>{{ item.title }}</p>
|
|
|
13
|
+ <div class="flex" style="padding-top: 10px;">
|
|
|
14
|
+ <div style="width: 26%;" class="middle-flex">
|
|
|
15
|
+ <img style="width: 50px; height: 50px;" :src="`../../../../static/homepage/group${index+1}.png`"/>
|
|
|
16
|
+ </div>
|
|
|
17
|
+ <div style="width: 74%; line-height: 30px;">
|
|
|
18
|
+ <p class="sub-title"><span :class="['circle', `circle${index+1}`]"/>今日新增<span style="margin-left: 5px;" :class="`font${index+1}`">{{item.new}}</span></p>
|
|
|
19
|
+ <p class="sub-title"><span :class="['circle', `circle${index+1}`]"/>历史总量<span style="margin-left: 5px;" :class="`font${index+1}`">{{item.history}}</span></p>
|
|
|
20
|
+ </div>
|
|
|
21
|
+ </div>
|
|
10
|
22
|
</div>
|
|
11
|
|
- <div style="width: 74%; line-height: 30px;">
|
|
12
|
|
- <p class="sub-title"><span :class="['circle', `circle${index+1}`]"/>今日新增<span style="margin-left: 5px;" :class="`font${index+1}`">{{item.new}}</span></p>
|
|
13
|
|
- <p class="sub-title"><span :class="['circle', `circle${index+1}`]"/>历史总量<span style="margin-left: 5px;" :class="`font${index+1}`">{{item.history}}</span></p>
|
|
|
23
|
+ </div>
|
|
|
24
|
+ </div>
|
|
|
25
|
+ <div class="my-collect clearfix">
|
|
|
26
|
+ <div class="menu-btn" style="width: 80%" @click="jumpToSearchPage()">
|
|
|
27
|
+ <p>我的收藏</p>
|
|
|
28
|
+ <div class="flex" style="padding-top: 10px;">
|
|
|
29
|
+ <div style="width: 26%;" class="middle-flex">
|
|
|
30
|
+ <img style="width: 50px; height: 50px;" src="../../../assets/image/u448.svg"/>
|
|
|
31
|
+ </div>
|
|
|
32
|
+ <div style="width: 74%; line-height: 30px;">
|
|
|
33
|
+ <p class="sub-title"><span/>收藏总量<span style="margin-left: 5px;" :class="`font-collect`">1553</span></p>
|
|
|
34
|
+ </div>
|
|
14
|
35
|
</div>
|
|
15
|
36
|
</div>
|
|
16
|
37
|
</div>
|
|
|
@@ -46,15 +67,66 @@
|
|
46
|
67
|
</div>
|
|
47
|
68
|
<div class="chart-card">
|
|
48
|
69
|
<div class="title">各专题资产数量统计</div>
|
|
49
|
|
- <div class="chart"></div>
|
|
|
70
|
+ <div class="chart">
|
|
|
71
|
+ <barchart
|
|
|
72
|
+ class="side-chart"
|
|
|
73
|
+ :autoStop="false"
|
|
|
74
|
+ legendIcon="circle"
|
|
|
75
|
+ :bottom="90"
|
|
|
76
|
+ :xlabelFormat="xLabelFormat"
|
|
|
77
|
+ :top="60"
|
|
|
78
|
+ :yAxisName="['(张)', '(兆)']"
|
|
|
79
|
+ :tooltip="tooltipFormat"
|
|
|
80
|
+ :dataset="specialAssetsData"
|
|
|
81
|
+ :encode="[{x: 'qyjc', y: 'hs', seriesName: '数据量'}, {x: 'qyjc', y: 'hs1', seriesName: '数据表'}]"
|
|
|
82
|
+ :labelSize="15"
|
|
|
83
|
+ id="ztzc"
|
|
|
84
|
+ />
|
|
|
85
|
+ </div>
|
|
50
|
86
|
</div>
|
|
51
|
87
|
<div class="chart-card">
|
|
52
|
88
|
<div class="title">各部门指标统计</div>
|
|
53
|
|
- <div class="chart"></div>
|
|
|
89
|
+ <div class="chart">
|
|
|
90
|
+ <barchart
|
|
|
91
|
+ class="side-chart"
|
|
|
92
|
+ :autoStop="false"
|
|
|
93
|
+ legendIcon="circle"
|
|
|
94
|
+ :bottom="90"
|
|
|
95
|
+ :xlabelFormat="xLabelFormat"
|
|
|
96
|
+ :top="60"
|
|
|
97
|
+ :yAxisName="['(个)', '(兆)']"
|
|
|
98
|
+ :tooltip="tooltipFormat"
|
|
|
99
|
+ :dataset="indicatorStatData"
|
|
|
100
|
+ :encode="[{x: 'qyjc', y: 'hs', seriesName: '数据量'}, {x: 'qyjc', y: 'hs1', seriesName: '数据表'}]"
|
|
|
101
|
+ :labelSize="15"
|
|
|
102
|
+ id="bmzb"
|
|
|
103
|
+ />
|
|
|
104
|
+ </div>
|
|
54
|
105
|
</div>
|
|
55
|
106
|
<div class="chart-card">
|
|
56
|
107
|
<div class="title">服务调用排行</div>
|
|
57
|
|
- <div class="chart"></div>
|
|
|
108
|
+ <div class="chart rank-chart">
|
|
|
109
|
+ <el-button-group>
|
|
|
110
|
+ <el-button :type="rankType === 'API' ? 'primary' : ''" @click="rankType = 'API'" size="small">API</el-button>
|
|
|
111
|
+ <el-button :type="rankType === 'MQ' ? 'primary' : ''" @click="rankType = 'MQ'" size="small">MQ</el-button>
|
|
|
112
|
+ </el-button-group>
|
|
|
113
|
+ <div class="rank-block">
|
|
|
114
|
+ <div class="rank-item clearfix" v-for="(item, index) in rankData" :key="index">
|
|
|
115
|
+ <div v-if="index < 3" :class="`icon-three icon${index}`"></div>
|
|
|
116
|
+ <div v-else :class="`icon`">{{index + 1}}</div>
|
|
|
117
|
+ <div class="right-block">
|
|
|
118
|
+ <div class="name-unit clearfix">
|
|
|
119
|
+ <div class="name">{{item.name}}</div>
|
|
|
120
|
+ <div class="unit" v-if="index === 0">次</div>
|
|
|
121
|
+ </div>
|
|
|
122
|
+ <el-progress :percentage="item.percent"
|
|
|
123
|
+ :class="`progress progress${index}`"
|
|
|
124
|
+ :format="(per) => format(per, item.num)"
|
|
|
125
|
+ define-back-color="#5c6779"></el-progress>
|
|
|
126
|
+ </div>
|
|
|
127
|
+ </div>
|
|
|
128
|
+ </div>
|
|
|
129
|
+ </div>
|
|
58
|
130
|
</div>
|
|
59
|
131
|
</div>
|
|
60
|
132
|
</div>
|
|
|
@@ -87,7 +159,19 @@ export default {
|
|
87
|
159
|
new: 35,
|
|
88
|
160
|
history: 1553,
|
|
89
|
161
|
}],
|
|
90
|
|
- barData: [{qyjc: '2023-01', hs: 100, hs1: 200}, {qyjc: '2023-02', hs: 10, hs1: 20}, {qyjc: '2023-03', hs: 10, hs1: 20}, {qyjc: '2023-04', hs: 10, hs1: 20}, {qyjc: '2023-05', hs: 10, hs1: 20},]
|
|
|
162
|
+ barData: [{qyjc: '2023-01', hs: 100, hs1: 200}, {qyjc: '2023-02', hs: 10, hs1: 20}, {qyjc: '2023-03', hs: 10, hs1: 20}, {qyjc: '2023-04', hs: 10, hs1: 20}, {qyjc: '2023-05', hs: 10, hs1: 20},],
|
|
|
163
|
+ specialAssetsData: [{qyjc: '专题1', hs: 100, hs1: 200}, {qyjc: '2023-02', hs: 10, hs1: 20}, {qyjc: '2023-03', hs: 10, hs1: 20}, {qyjc: '2023-04', hs: 10, hs1: 20}, {qyjc: '2023-05', hs: 10, hs1: 20},],
|
|
|
164
|
+ indicatorStatData: [{qyjc: '部门1', hs: 100, hs1: 200}, {qyjc: '2023-02', hs: 10, hs1: 20}, {qyjc: '2023-03', hs: 10, hs1: 20}, {qyjc: '2023-04', hs: 10, hs1: 20}, {qyjc: '2023-05', hs: 10, hs1: 20},],
|
|
|
165
|
+ rankType: 'API',
|
|
|
166
|
+ rankData: [{ percent: 75, num: 160, name: 'xxxApi' },
|
|
|
167
|
+ { percent: 72, num: 120, name: 'xxxApi' },
|
|
|
168
|
+ { percent: 70, num: 100, name: 'xxxApi' },
|
|
|
169
|
+ { percent: 65, num: 80, name: 'xxxApi' },
|
|
|
170
|
+ { percent: 55, num: 70, name: 'xxxApi' },
|
|
|
171
|
+ { percent: 50, num: 60, name: 'xxxApi' },
|
|
|
172
|
+ { percent: 45, num: 50, name: 'xxxApi' },
|
|
|
173
|
+ { percent: 35, num: 40, name: 'xxxApi' },
|
|
|
174
|
+ { percent: 25, num: 30, name: 'xxxApi' },]
|
|
91
|
175
|
}
|
|
92
|
176
|
},
|
|
93
|
177
|
mounted() {
|
|
|
@@ -118,6 +202,9 @@ export default {
|
|
118
|
202
|
// ${params[0].name || "--"}月：
|
|
119
|
203
|
return `<div class="${type==='bar' ? 'bar-tooltip-dz' : type==='line' ? 'line-tooltip-dz' : ''}">${data.hs || "--"}张</div>`;
|
|
120
|
204
|
},
|
|
|
205
|
+ format(percentage, num) {
|
|
|
206
|
+ return num
|
|
|
207
|
+ }
|
|
121
|
208
|
}
|
|
122
|
209
|
}
|
|
123
|
210
|
</script>
|
|
|
@@ -149,49 +236,80 @@ export default {
|
|
149
|
236
|
}
|
|
150
|
237
|
|
|
151
|
238
|
.header-row {
|
|
152
|
|
- display: flex;
|
|
153
|
|
- justify-content: space-around;
|
|
154
|
|
- background: #fff;
|
|
155
|
|
- padding: 20px 20px;
|
|
156
|
|
- .menu-btn {
|
|
157
|
|
- height: 98px;
|
|
158
|
|
- width: 100%;
|
|
159
|
|
- padding: 20px;
|
|
160
|
|
- box-shadow: 2px 5px 10px #ddd;
|
|
|
239
|
+ padding-top: 10px;
|
|
|
240
|
+ .data-repository, .my-collect{
|
|
|
241
|
+ float: left;
|
|
|
242
|
+ }
|
|
|
243
|
+ .data-repository{
|
|
|
244
|
+ width: 80%;
|
|
161
|
245
|
background: #fff;
|
|
162
|
|
- border-radius: 5px;
|
|
163
|
|
- >p {
|
|
164
|
|
- font-size: 24px;
|
|
165
|
|
- font-weight: bold;
|
|
166
|
|
- }
|
|
167
|
|
- .circle {
|
|
168
|
|
- width: 10px;
|
|
169
|
|
- height: 10px;
|
|
170
|
|
- border-radius: 50%;
|
|
171
|
|
- margin-right: 5px;
|
|
172
|
|
- }
|
|
173
|
|
- .circle1 {
|
|
174
|
|
- border: 3px solid #084FC0;
|
|
175
|
|
- }
|
|
176
|
|
- .circle2 {
|
|
177
|
|
- border: 3px solid #BE5205;
|
|
178
|
|
- }
|
|
179
|
|
- .circle3 {
|
|
180
|
|
- border: 3px solid #58C627;
|
|
181
|
|
- }
|
|
182
|
|
- .circle4 {
|
|
183
|
|
- border: 3px solid #BF44FF;
|
|
|
246
|
+ padding: 20px 20px;
|
|
|
247
|
+ border-right: 1px solid #f2f2f2;
|
|
|
248
|
+ box-sizing: border-box;
|
|
|
249
|
+ .data-repo-title{
|
|
|
250
|
+ margin-bottom: 5px;
|
|
|
251
|
+ .icon{
|
|
|
252
|
+ display: inline-block;
|
|
|
253
|
+ width: 11px;
|
|
|
254
|
+ height: 25px;
|
|
|
255
|
+ background: #8bb2ff;
|
|
|
256
|
+ vertical-align: middle;
|
|
|
257
|
+ }
|
|
184
|
258
|
}
|
|
185
|
|
- .sub-title {
|
|
|
259
|
+ .data-repo-wrap{
|
|
186
|
260
|
display: flex;
|
|
187
|
|
- align-items: center;
|
|
|
261
|
+ justify-content: space-between;
|
|
|
262
|
+ padding-left: 14px;
|
|
188
|
263
|
}
|
|
189
|
|
- .middle-flex{
|
|
190
|
|
- display: flex;
|
|
191
|
|
- align-items: center;
|
|
192
|
|
- justify-content: center;
|
|
|
264
|
+ }
|
|
|
265
|
+ .my-collect{
|
|
|
266
|
+ padding-top: 50px;
|
|
|
267
|
+ padding-right: 10px;
|
|
|
268
|
+ width: 20%;
|
|
|
269
|
+ box-sizing: border-box;
|
|
|
270
|
+ .menu-btn{
|
|
|
271
|
+ float: right;
|
|
193
|
272
|
}
|
|
194
|
273
|
}
|
|
|
274
|
+ .menu-btn {
|
|
|
275
|
+ height: 98px;
|
|
|
276
|
+ width: 100%;
|
|
|
277
|
+ padding: 20px;
|
|
|
278
|
+ box-shadow: 2px 5px 10px #ddd;
|
|
|
279
|
+ background: #fff;
|
|
|
280
|
+ border-radius: 5px;
|
|
|
281
|
+ >p {
|
|
|
282
|
+ font-size: 24px;
|
|
|
283
|
+ font-weight: bold;
|
|
|
284
|
+ }
|
|
|
285
|
+ .circle {
|
|
|
286
|
+ width: 10px;
|
|
|
287
|
+ height: 10px;
|
|
|
288
|
+ border-radius: 50%;
|
|
|
289
|
+ margin-right: 5px;
|
|
|
290
|
+ }
|
|
|
291
|
+ .circle1 {
|
|
|
292
|
+ border: 3px solid #084FC0;
|
|
|
293
|
+ }
|
|
|
294
|
+ .circle2 {
|
|
|
295
|
+ border: 3px solid #BE5205;
|
|
|
296
|
+ }
|
|
|
297
|
+ .circle3 {
|
|
|
298
|
+ border: 3px solid #58C627;
|
|
|
299
|
+ }
|
|
|
300
|
+ .circle4 {
|
|
|
301
|
+ border: 3px solid #BF44FF;
|
|
|
302
|
+ }
|
|
|
303
|
+ .sub-title {
|
|
|
304
|
+ display: flex;
|
|
|
305
|
+ align-items: center;
|
|
|
306
|
+ }
|
|
|
307
|
+ .middle-flex{
|
|
|
308
|
+ display: flex;
|
|
|
309
|
+ align-items: center;
|
|
|
310
|
+ justify-content: center;
|
|
|
311
|
+ }
|
|
|
312
|
+ }
|
|
195
|
313
|
}
|
|
196
|
314
|
|
|
197
|
315
|
.chart-wrap {
|
|
|
@@ -215,6 +333,97 @@ export default {
|
|
215
|
333
|
height: 280px;
|
|
216
|
334
|
box-shadow: 2px 5px 10px #ddd;
|
|
217
|
335
|
}
|
|
|
336
|
+ .rank-chart{
|
|
|
337
|
+ text-align: center;
|
|
|
338
|
+ box-sizing: border-box;
|
|
|
339
|
+ padding: 10px 20px 0;
|
|
|
340
|
+ }
|
|
|
341
|
+ .rank-block{
|
|
|
342
|
+ height: 238px;
|
|
|
343
|
+ overflow-y: auto;
|
|
|
344
|
+ scrollbar-width: none; /* firefox */
|
|
|
345
|
+ }
|
|
|
346
|
+ .rank-block::-webkit-scrollbar {
|
|
|
347
|
+ display: none; /* Chrome Safari */
|
|
|
348
|
+ }
|
|
|
349
|
+ .rank-item{
|
|
|
350
|
+ margin-bottom: 10px;
|
|
|
351
|
+ .icon, .right-block, .icon-three{
|
|
|
352
|
+ float: left;
|
|
|
353
|
+ }
|
|
|
354
|
+ .icon{
|
|
|
355
|
+ width: 18px;
|
|
|
356
|
+ height: 18px;
|
|
|
357
|
+ background: url('../../../assets/image/u211.svg');
|
|
|
358
|
+ font-size: 12px;
|
|
|
359
|
+ color: #FFFFFF;
|
|
|
360
|
+ line-height: 18px;
|
|
|
361
|
+ }
|
|
|
362
|
+ .icon-three{
|
|
|
363
|
+ width: 18px;
|
|
|
364
|
+ height: 26px;
|
|
|
365
|
+ }
|
|
|
366
|
+ .icon0{
|
|
|
367
|
+ background: url('../../../assets/image/u218.svg');
|
|
|
368
|
+ background-size: 100% 100%;
|
|
|
369
|
+ }
|
|
|
370
|
+ .icon1{
|
|
|
371
|
+ background: url('../../../assets/image/u219.svg');
|
|
|
372
|
+ background-size: 100% 100%;
|
|
|
373
|
+ }
|
|
|
374
|
+ .icon2{
|
|
|
375
|
+ background: url('../../../assets/image/u220.svg');
|
|
|
376
|
+ background-size: 100% 100%;
|
|
|
377
|
+ }
|
|
|
378
|
+ .right-block{
|
|
|
379
|
+ width: calc(100% - 18px);
|
|
|
380
|
+ .name-unit{
|
|
|
381
|
+ padding: 0 10px;
|
|
|
382
|
+ margin-bottom: 5px;
|
|
|
383
|
+ }
|
|
|
384
|
+ .name{
|
|
|
385
|
+ float: left;
|
|
|
386
|
+ }
|
|
|
387
|
+ .unit{
|
|
|
388
|
+ float: right;
|
|
|
389
|
+ }
|
|
|
390
|
+ }
|
|
|
391
|
+ /deep/ .progress .el-progress-bar__inner {
|
|
|
392
|
+ background-image: linear-gradient(
|
|
|
393
|
+ to right,
|
|
|
394
|
+ #00c8ff,
|
|
|
395
|
+ #009bff
|
|
|
396
|
+ );
|
|
|
397
|
+ }
|
|
|
398
|
+ /deep/ .progress0 .el-progress-bar__inner {
|
|
|
399
|
+ background-image: linear-gradient(
|
|
|
400
|
+ to right,
|
|
|
401
|
+ #ec5a48,
|
|
|
402
|
+ #d566d7
|
|
|
403
|
+ );
|
|
|
404
|
+ }
|
|
|
405
|
+ /deep/ .progress1 .el-progress-bar__inner {
|
|
|
406
|
+ background-image: linear-gradient(
|
|
|
407
|
+ to right,
|
|
|
408
|
+ #f9b101,
|
|
|
409
|
+ #ff6a62
|
|
|
410
|
+ );
|
|
|
411
|
+ }
|
|
|
412
|
+ /deep/ .progress2 .el-progress-bar__inner {
|
|
|
413
|
+ background-image: linear-gradient(
|
|
|
414
|
+ to right,
|
|
|
415
|
+ #00f576,
|
|
|
416
|
+ #009df7
|
|
|
417
|
+ );
|
|
|
418
|
+ }
|
|
|
419
|
+ }
|
|
|
420
|
+ }
|
|
|
421
|
+ }
|
|
|
422
|
+ .clearfix{
|
|
|
423
|
+ &:after {
|
|
|
424
|
+ content: "";
|
|
|
425
|
+ display: table;
|
|
|
426
|
+ clear: both;
|
|
218
|
427
|
}
|
|
219
|
428
|
}
|
|
220
|
429
|
}
|
chaihaorui
