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>
| <layout-box title="单体容量">
| <div class="flex-box">
| <div class="flex-box-body">
| <circle-chart id="circleChart" ref="circleChart"></circle-chart>
| </div>
| <div class="flex-box-footer">
| <ul class="list-view">
| <li v-for="item in chart.circle" :key="item.name" class="list-view-item">
| <span class="item-name">{{item.name}}</span>
| :
| <span class="item-value" :style="{'color':item.color}">{{item.value}}</span>
| </li>
| </ul>
| </div>
| </div>
| </layout-box>
| </template>
|
| <script>
| import LayoutBox from "@/components/LayoutBox";
| import CircleChart from "@/components/charts/CircleChart";
| export default {
| name: "MonCap",
| components: {CircleChart, LayoutBox},
| data() {
| return {
| chart: {
| circle: [
| {
| name: '低告警数量',
| value: 380,
| color: '#00DFFC',
| },
| {
| name: '告警总数比例',
| value: 180,
| color: '#FF8B34',
| },
| {
| name: '告警总数',
| value: 180,
| color: '#ED4882',
| },
| {
| name: '告警机房总数',
| value: 280,
| color: '#2EEA9D',
| },
| {
| name: '告警机房数比例',
| value: 70,
| color: '#F3E501',
| }
| ]
| }
| }
| },
| mounted() {
| this.$refs.circleChart.setData(this.chart.circle);
| }
| }
| </script>
|
| <style scoped>
|
| .flex-box {
| display: flex;
| height: 100%;
| align-items: center;
| }
| .flex-box-body {
| flex:1;
| height: 100%;
| }
| .flex-box-footer {
| padding:0 8px;
| }
| .list-view li {
| list-style: none;
| }
| .list-view-item {
| white-space: nowrap;
| padding: 8px 0;
| }
| </style>
|
|
