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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
| <template>
| <div class="echarts">
| <ECharts :option="option" v-if="dataLoaded" />
| </div>
| </template>
|
| <script setup lang="ts" name="pie">
| import { ECOption } from "@/components/ECharts/config";
| import ECharts from "@/components/ECharts/index.vue";
| import { ref, onMounted, computed } from "vue";
| import { useI18n } from "vue-i18n";
| import { FindBSWarningCount } from "@/api/modules/hxzk/count/count";
|
| const { t } = useI18n();
| const dataLoaded = ref(false);
|
| // 使用计算属性来获取翻译后的告警类型名称
| const warningTypes = computed(() => [
| { value: 0, name: t("warningTypes.sos") },
| { value: 0, name: t("warningTypes.enter") },
| { value: 0, name: t("warningTypes.exit") },
| { value: 0, name: t("warningTypes.gather") },
| { value: 0, name: t("warningTypes.overstaffed") }
| ]);
|
| const pieData = ref([...warningTypes.value]);
|
| const option = ref<ECOption>({
| title: {
| text: t("pie.alarmData"),
| subtext: t("pie.accessProportion"),
| left: "56%",
| top: "45%",
| textAlign: "center",
| textStyle: {
| fontSize: 18,
| color: "#767676"
| },
| subtextStyle: {
| fontSize: 15,
| color: "#a1a1a1"
| }
| },
| tooltip: {
| trigger: "item",
| formatter: (params: any) => {
| return `${params.name}: ${params.value} (${params.percent}%)`;
| }
| },
| legend: {
| top: "4%",
| left: "2%",
| orient: "vertical",
| icon: "circle",
| align: "left",
| itemGap: 20,
| textStyle: {
| fontSize: 13,
| color: "#a1a1a1",
| fontWeight: 500
| },
| formatter: function (name: string) {
| const item = pieData.value.find(item => item.name === name);
| if (!item) return name;
| return item.value >= 10000 ? `${name} ${(item.value / 10000).toFixed(2)}w` : `${name} ${item.value}`;
| }
| },
| series: [
| {
| type: "pie",
| radius: ["70%", "40%"],
| center: ["57%", "52%"],
| silent: true,
| clockwise: true,
| startAngle: 150,
| data: pieData.value,
| labelLine: {
| length: 80,
| length2: 30,
| lineStyle: {
| width: 1
| }
| },
| label: {
| position: "outside",
| show: true,
| formatter: "{d}%",
| fontWeight: 400,
| fontSize: 15,
| color: "#a1a1a1"
| },
| color: [] // You might want to define your colors here
| }
| ]
| });
|
| onMounted(async () => {
| try {
| const result = await FindBSWarningCount();
|
| // 更新数据值，但保持翻译后的名称
| pieData.value = warningTypes.value.map((item, index) => ({
| ...item,
| value: result[index] || 0
| }));
|
| // Update the series data in the option
| option.value.series[0].data = pieData.value;
| dataLoaded.value = true;
| } catch (error) {
| console.error("Error fetching data:", error);
| // You might want to set some fallback data here
| dataLoaded.value = true;
| }
| });
| </script>
|
| <style lang="scss" scoped>
| .echarts {
| width: 100%;
| height: 100%;
| }
| </style>
|
|
