简柏林 / thingskit-front · Commits

Commit 10c47882cbd98ebf7315a67a61032a7435d731cf

Authored by fengwotao
1 parent 02df0669

pref:修改首页饼图为圆环图

Inline Side-by-side
Showing 4 changed files with 630 additions and 489 deletions
1   -<template>
2   - <div>
3   - <!-- 首页基础信息 -->
4   - <div class="md:flex">
5   - <Card size="small" class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:mr-4" style="color: #666">
6   - <div class="flex" style="height: 100px">
7   - <div class="mr-4"
8   - ><img
9   - src="/src/assets/images/device-count.png"
10   - style="width: 5.625rem; height: 5.625rem"
11   - /></div>
12   - <div class="flex-auto">
13   - <div class="flex justify-between" style="align-items: center">
14   - <div style="font-size: 1.625rem; color: #333; font-weight: bold">
15   - <CountTo
16   - v-if="growCardList?.deviceInfo?.sumCount"
17   - :endVal="growCardList.deviceInfo.sumCount"
18   - />
19   - <CountTo v-else :endVal="0" />
20   - </div>
21   - <Tooltip>
22   - <template #title>
23   - 设备数 : {{ growCardList?.deviceInfo.sumCount }} 今日新增
24   - {{ toThousands(growCardList?.deviceInfo?.todayAdd) }}
25   - </template>
26   - <img src="/src/assets/images/tip.png" style="width: 1.125rem; height: 1.125rem" />
27   - </Tooltip>
28   - </div>
29   - <div> 设备数 </div>
30   - </div>
31   - </div>
32   - <div class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
33   - 今日新增 {{ toThousands(growCardList?.deviceInfo?.todayAdd) }}
34   - </div>
35   - </Card>
36   - <Card size="small" class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:mr-4" style="color: #666">
37   - <div class="flex" style="height: 100px">
38   - <div class="mr-4">
39   - <img
40   - v-if="!isAdmin(role)"
41   - src="/src/assets/images/alarm-count.png"
42   - style="width: 5.625rem; height: 5.625rem"
43   - />
44   - <img v-else src="/src/assets/images/zh.png" style="width: 5.625rem; height: 5.625rem" />
45   - </div>
46   - <div class="flex-auto">
47   - <div class="flex justify-between" style="align-items: center">
48   - <div
49   - v-if="!isAdmin(role)"
50   - style="font-size: 1.625rem; color: #333; font-weight: bold"
51   - >
52   - <CountTo
53   - v-if="growCardList?.alarmInfo?.sumCount"
54   - :end-val="growCardList.alarmInfo.sumCount"
55   - />
56   - <CountTo v-else :end-val="0" />
57   - </div>
58   - <div style="font-size: 1.625rem; color: #333; font-weight: bold" v-else>
59   - <CountTo
60   - v-if="growCardList?.tenantInfo?.sumCount"
61   - :end-val="growCardList.tenantInfo.sumCount"
62   - />
63   - <CountTo v-else :end-val="0" />
64   - </div>
65   - <Tooltip>
66   - <template #title>
67   - {{
68   - !isAdmin(role)
69   - ? `告警数：${growCardList?.alarmInfo?.sumCount} 今日新增 ${toThousands(
70   - growCardList?.alarmInfo?.todayAdd
71   - )}`
72   - : `租户总量：${growCardList?.tenantInfo?.sumCount} 今日新增 ${toThousands(
73   - growCardList?.alarmInfo?.todayAdd
74   - )}`
75   - }}
76   - </template>
77   - <img src="/src/assets/images/tip.png" style="width: 1.125rem; height: 1.125rem" />
78   - </Tooltip>
79   - </div>
80   - <div> {{ !isAdmin(role) ? `告警数` : '租户总量' }}</div>
81   - </div>
82   - </div>
83   - <div v-if="!isAdmin(role)" class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
84   - 今日新增 {{ toThousands(growCardList?.alarmInfo?.todayAdd) }}</div
85   - >
86   - <div v-else class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
87   - 今日新增 {{ toThousands(growCardList?.tenantInfo?.todayAdd) }}</div
88   - >
89   - </Card>
90   - <Card size="small" class="md:w-1/3 w-full !md:mt-0 !mt-4" style="color: #666">
91   - <div class="flex" style="height: 100px">
92   - <div class="mr-4">
93   - <img
94   - v-if="!isAdmin(role)"
95   - src="/src/assets/images/msg-count.png"
96   - style="width: 5.625rem; height: 5.625rem"
97   - />
98   - <img v-else src="/src/assets/images/kf.png" style="width: 5.625rem; height: 5.625rem" />
99   - </div>
100   - <div class="flex-auto">
101   - <div class="flex justify-between" style="align-items: center">
102   - <div
103   - v-if="!isAdmin(role)"
104   - style="font-size: 1.625rem; color: #333; font-weight: bold"
105   - >
106   - <CountTo
107   - v-if="growCardList?.messageInfo?.messageCount"
108   - :end-val="growCardList.messageInfo.messageCount"
109   - />
110   - <CountTo v-else :end-val="0" />
111   - </div>
112   - <div style="font-size: 1.625rem; color: #333; font-weight: bold" v-else>
113   - <CountTo
114   - v-if="growCardList?.customerInfo?.sumCount"
115   - :end-val="growCardList.customerInfo.sumCount"
116   - />
117   - <CountTo v-else :end-val="0" />
118   - </div>
119   - <Tooltip>
120   - <template #title>
121   - {{
122   - !isAdmin(role)
123   - ? `消息数：${growCardList?.messageInfo?.messageCount} 今日新增 ${toThousands(
124   - growCardList?.messageInfo?.todayMessageAdd
125   - )}`
126   - : `客户总量：${growCardList?.customerInfo?.sumCount} 今日新增 ${toThousands(
127   - growCardList?.messageInfo?.todayMessageAdd
128   - )}`
129   - }}
130   - </template>
131   - <img src="/src/assets/images/tip.png" style="width: 1.125rem; height: 1.125rem" />
132   - </Tooltip>
133   - </div>
134   - <div> {{ !isAdmin(role) ? `消息数` : '客户总量' }}</div>
135   - </div>
136   - </div>
137   - <div v-if="!isAdmin(role)" class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
138   - 今日新增 {{ toThousands(growCardList?.messageInfo?.todayMessageAdd) }}</div
139   - >
140   - <div v-else class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
141   - 今日新增 {{ toThousands(growCardList?.customerInfo?.todayAdd) }}</div
142   - >
143   - </Card>
144   - <Card
145   - v-if="!isAdmin(role)"
146   - size="small"
147   - class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:ml-4"
148   - style="color: #666"
149   - >
150   - <div class="flex" style="height: 100px">
151   - <div class="mr-4">
152   - <img
153   - v-if="!isAdmin(role)"
154   - src="/src/assets/images/product.png"
155   - style="width: 5.625rem; height: 5.625rem"
156   - />
157   - <img
158   - v-else
159   - src="/src/assets/images/product.png"
160   - style="width: 5.625rem; height: 5.625rem"
161   - />
162   - </div>
163   - <div class="flex-auto">
164   - <div class="flex justify-between" style="align-items: center">
165   - <div
166   - v-if="!isAdmin(role)"
167   - style="font-size: 1.625rem; color: #333; font-weight: bold"
168   - >
169   - <CountTo
170   - v-if="growCardList?.productInfo?.sumCount"
171   - :end-val="growCardList.productInfo.sumCount"
172   - />
173   - <CountTo v-else :end-val="0" />
174   - </div>
175   - <div style="font-size: 1.625rem; color: #333; font-weight: bold" v-else>
176   - <CountTo
177   - v-if="growCardList?.productInfo?.sumCount"
178   - :end-val="growCardList.productInfo?.sumCount"
179   - />
180   - <CountTo v-else :end-val="0" />
181   - </div>
182   - <Tooltip>
183   - <template #title>
184   - {{
185   - !isAdmin(role)
186   - ? `产品数：${growCardList?.productInfo?.sumCount} 今日新增 ${toThousands(
187   - growCardList?.productInfo?.todayAdd
188   - )}`
189   - : `产品数：${growCardList?.customerInfo?.sumCount} 今日新增 ${toThousands(
190   - growCardList?.productInfo?.todayAdd
191   - )}`
192   - }}
193   - </template>
194   - <img src="/src/assets/images/tip.png" style="width: 1.125rem; height: 1.125rem" />
195   - </Tooltip>
196   - </div>
197   - <div> {{ !isAdmin(role) ? `产品数` : '产品数' }}</div>
198   - </div>
199   - </div>
200   - <div v-if="!isAdmin(role)" class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
201   - 今日新增 {{ toThousands(growCardList?.productInfo?.todayAdd) }}</div
202   - >
203   - <div v-else class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
204   - 今日新增 {{ toThousands(growCardList?.productInfo?.todayAdd) }}</div
205   - >
206   - </Card>
207   - </div>
208   - <!-- 首页饼图 -->
209   - <div class="md:flex mt-4" v-if="!isAdmin(role)">
210   - <Card
211   - size="small"
212   - class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:mr-4"
213   - style="color: #666; width: 50%"
214   - >
215   - <div class="flex container ml-4">
216   - <div class="mr-4 flex chart-top">
217   - <PieChartDeviceSub
218   - v-if="seriesData.length > 0"
219   - :legendData="legendData"
220   - :seriesData="seriesData"
221   - :isCircle="true"
222   - />
223   - </div>
224   - <div class="ml-20 flex justify-around right-text">
225   - <div class="text">
226   - 直连设备：{{ growCardList?.deviceInfo?.directConnection ?? 0 }}个
227   - </div>
228   - <div class="text"> 网关设备：{{ growCardList?.deviceInfo?.gateWay ?? 0 }}个 </div>
229   - <div class="text"> 网关子设备：{{ growCardList?.deviceInfo?.sensor ?? 0 }}个 </div>
230   - </div>
231   - </div>
232   - </Card>
233   - <Card
234   - size="small"
235   - class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:ml-1"
236   - style="color: #666; width: 50%"
237   - >
238   - <div class="flex container ml-4">
239   - <div class="mr-4 flex chart-top">
240   - <PieChartDeviceSub
241   - v-if="seriesStatusData.length > 0"
242   - :legendData="legendStatusData"
243   - :seriesData="seriesStatusData"
244   - :isCircle="false"
245   - />
246   - </div>
247   - <div class="ml-20 flex justify-around right-text">
248   - <div class="text"> 待激活设备：{{ growCardList?.deviceInfo?.inActive ?? 0 }}个 </div>
249   - <div class="text"> 在线设备：{{ growCardList?.deviceInfo?.onLine ?? 0 }}个 </div>
250   - <div class="text"> 离线设备：{{ growCardList?.deviceInfo?.offLine ?? 0 }}个 </div>
251   - </div>
252   - </div>
253   - </Card>
254   - </div>
255   - </div>
256   -</template>
257   -<script lang="ts" setup>
258   - import { ref, onMounted, defineComponent, Ref } from 'vue';
259   - import { Card } from 'ant-design-vue';
260   - import { getHomeData } from '/@/api/dashboard';
261   - import { isAdmin } from '/@/enums/roleEnum';
262   - import { toThousands } from '/@/utils/fnUtils';
263   - import { CountTo } from '/@/components/CountTo/index';
264   - import { Tooltip } from 'ant-design-vue';
265   - import { CardList, seriesDataT } from './props';
266   - import PieChartDeviceSub from './PieChartDeviceSub.vue';
267   -
268   - defineProps<{
269   - role: string;
270   - }>();
271   -
272   - defineExpose({
273   - isAdmin,
274   - toThousands,
275   - });
276   -
277   - defineComponent({
278   - Card,
279   - });
280   -
281   - const legendData = ref(['网关设备', '直连设备', '网关子设备']);
282   -
283   - const seriesData: Ref<seriesDataT[]> = ref([]);
284   -
285   - const legendStatusData = ref(['待激活', '在线', '离线']);
286   -
287   - const seriesStatusData: Ref<seriesDataT[]> = ref([]);
288   -
289   - const growCardList = ref<CardList>();
290   -
291   - const devicePieColor = [
292   - { key: 'directConnection', itemStyle: { color: '#5C7BD9' }, value: '直连设备' },
293   - { key: 'gateWay', itemStyle: { color: '#91CC75' }, value: '网关设备' },
294   - { key: 'sensor', itemStyle: { color: '#FAC859' }, value: '网关子设备' },
295   - { key: 'inActive', itemStyle: { color: '#5C7BD9' }, value: '待激活' },
296   - { key: 'onLine', itemStyle: { color: '#91CC75 ' }, value: '在线' },
297   - { key: 'offLine', itemStyle: { color: '#EC4040' }, value: '离线' },
298   - ];
299   -
300   - onMounted(async () => {
301   - const res = await getHomeData();
302   - growCardList.value = res;
303   - const { deviceInfo } = growCardList.value!;
304   - let data = Object.entries(deviceInfo).map(([key, value]) => {
305   - const name = devicePieColor?.find((f) => f.key === key)?.value;
306   - const itemStyle = devicePieColor?.find((f) => f.key === key)?.itemStyle;
307   - return { key, value, itemStyle, name };
308   - });
309   - seriesData.value = data.filter(
310   - (f) => f.key === 'directConnection' || f.key === 'gateWay' || f.key === 'sensor'
311   - );
312   - seriesStatusData.value = data.filter(
313   - (f) => f.key === 'inActive' || f.key === 'onLine' || f.key === 'offLine'
314   - );
315   - });
316   -</script>
317   -<style lang="css">
318   - .right-text {
319   - width: 40%;
320   - flex-direction: column;
321   - height: 240px;
322   - margin: 10px 0 10px 50px;
323   - }
324   -
325   - .text {
326   - color: #333;
327   - font-weight: bold;
328   - display: flex;
329   - flex-wrap: nowrap;
330   - }
331   -
332   - .chart-top {
333   - width: 60%;
334   - height: 300px;
335   - align-items: center;
336   - margin-top: -30px;
337   - }
338   -
339   - .container {
340   - width: 100%;
341   - }
342   -</style>
  1 +<template>
  2 + <div>
  3 + <!-- 首页基础信息 -->
  4 + <div class="md:flex">
  5 + <Card size="small" class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:mr-4" style="color: #666">
  6 + <div class="flex" style="height: 100px">
  7 + <div class="mr-4"
  8 + ><img
  9 + src="/src/assets/images/device-count.png"
  10 + style="width: 5.625rem; height: 5.625rem"
  11 + /></div>
  12 + <div class="flex-auto">
  13 + <div class="flex justify-between" style="align-items: center">
  14 + <div style="font-size: 1.625rem; color: #333; font-weight: bold">
  15 + <CountTo
  16 + v-if="growCardList?.deviceInfo?.sumCount"
  17 + :endVal="growCardList.deviceInfo.sumCount"
  18 + />
  19 + <CountTo v-else :endVal="0" />
  20 + </div>
  21 + <Tooltip>
  22 + <template #title>
  23 + 设备数 : {{ growCardList?.deviceInfo.sumCount }} 今日新增
  24 + {{ toThousands(growCardList?.deviceInfo?.todayAdd) }}
  25 + </template>
  26 + <img src="/src/assets/images/tip.png" style="width: 1.125rem; height: 1.125rem" />
  27 + </Tooltip>
  28 + </div>
  29 + <div> 设备数 </div>
  30 + </div>
  31 + </div>
  32 + <div class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
  33 + 今日新增 {{ toThousands(growCardList?.deviceInfo?.todayAdd) }}
  34 + </div>
  35 + </Card>
  36 + <Card size="small" class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:mr-4" style="color: #666">
  37 + <div class="flex" style="height: 100px">
  38 + <div class="mr-4">
  39 + <img
  40 + v-if="!isAdmin(role)"
  41 + src="/src/assets/images/alarm-count.png"
  42 + style="width: 5.625rem; height: 5.625rem"
  43 + />
  44 + <img v-else src="/src/assets/images/zh.png" style="width: 5.625rem; height: 5.625rem" />
  45 + </div>
  46 + <div class="flex-auto">
  47 + <div class="flex justify-between" style="align-items: center">
  48 + <div
  49 + v-if="!isAdmin(role)"
  50 + style="font-size: 1.625rem; color: #333; font-weight: bold"
  51 + >
  52 + <CountTo
  53 + v-if="growCardList?.alarmInfo?.sumCount"
  54 + :end-val="growCardList.alarmInfo.sumCount"
  55 + />
  56 + <CountTo v-else :end-val="0" />
  57 + </div>
  58 + <div style="font-size: 1.625rem; color: #333; font-weight: bold" v-else>
  59 + <CountTo
  60 + v-if="growCardList?.tenantInfo?.sumCount"
  61 + :end-val="growCardList.tenantInfo.sumCount"
  62 + />
  63 + <CountTo v-else :end-val="0" />
  64 + </div>
  65 + <Tooltip>
  66 + <template #title>
  67 + {{
  68 + !isAdmin(role)
  69 + ? `告警数：${growCardList?.alarmInfo?.sumCount} 今日新增 ${toThousands(
  70 + growCardList?.alarmInfo?.todayAdd
  71 + )}`
  72 + : `租户总量：${growCardList?.tenantInfo?.sumCount} 今日新增 ${toThousands(
  73 + growCardList?.alarmInfo?.todayAdd
  74 + )}`
  75 + }}
  76 + </template>
  77 + <img src="/src/assets/images/tip.png" style="width: 1.125rem; height: 1.125rem" />
  78 + </Tooltip>
  79 + </div>
  80 + <div> {{ !isAdmin(role) ? `告警数` : '租户总量' }}</div>
  81 + </div>
  82 + </div>
  83 + <div v-if="!isAdmin(role)" class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
  84 + 今日新增 {{ toThousands(growCardList?.alarmInfo?.todayAdd) }}</div
  85 + >
  86 + <div v-else class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
  87 + 今日新增 {{ toThousands(growCardList?.tenantInfo?.todayAdd) }}</div
  88 + >
  89 + </Card>
  90 + <Card size="small" class="md:w-1/3 w-full !md:mt-0 !mt-4" style="color: #666">
  91 + <div class="flex" style="height: 100px">
  92 + <div class="mr-4">
  93 + <img
  94 + v-if="!isAdmin(role)"
  95 + src="/src/assets/images/msg-count.png"
  96 + style="width: 5.625rem; height: 5.625rem"
  97 + />
  98 + <img v-else src="/src/assets/images/kf.png" style="width: 5.625rem; height: 5.625rem" />
  99 + </div>
  100 + <div class="flex-auto">
  101 + <div class="flex justify-between" style="align-items: center">
  102 + <div
  103 + v-if="!isAdmin(role)"
  104 + style="font-size: 1.625rem; color: #333; font-weight: bold"
  105 + >
  106 + <CountTo
  107 + v-if="growCardList?.messageInfo?.messageCount"
  108 + :end-val="growCardList.messageInfo.messageCount"
  109 + />
  110 + <CountTo v-else :end-val="0" />
  111 + </div>
  112 + <div style="font-size: 1.625rem; color: #333; font-weight: bold" v-else>
  113 + <CountTo
  114 + v-if="growCardList?.customerInfo?.sumCount"
  115 + :end-val="growCardList.customerInfo.sumCount"
  116 + />
  117 + <CountTo v-else :end-val="0" />
  118 + </div>
  119 + <Tooltip>
  120 + <template #title>
  121 + {{
  122 + !isAdmin(role)
  123 + ? `消息数：${growCardList?.messageInfo?.messageCount} 今日新增 ${toThousands(
  124 + growCardList?.messageInfo?.todayMessageAdd
  125 + )}`
  126 + : `客户总量：${growCardList?.customerInfo?.sumCount} 今日新增 ${toThousands(
  127 + growCardList?.messageInfo?.todayMessageAdd
  128 + )}`
  129 + }}
  130 + </template>
  131 + <img src="/src/assets/images/tip.png" style="width: 1.125rem; height: 1.125rem" />
  132 + </Tooltip>
  133 + </div>
  134 + <div> {{ !isAdmin(role) ? `消息数` : '客户总量' }}</div>
  135 + </div>
  136 + </div>
  137 + <div v-if="!isAdmin(role)" class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
  138 + 今日新增 {{ toThousands(growCardList?.messageInfo?.todayMessageAdd) }}</div
  139 + >
  140 + <div v-else class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
  141 + 今日新增 {{ toThousands(growCardList?.customerInfo?.todayAdd) }}</div
  142 + >
  143 + </Card>
  144 + <Card
  145 + v-if="!isAdmin(role)"
  146 + size="small"
  147 + class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:ml-4"
  148 + style="color: #666"
  149 + >
  150 + <div class="flex" style="height: 100px">
  151 + <div class="mr-4">
  152 + <img
  153 + v-if="!isAdmin(role)"
  154 + src="/src/assets/images/product.png"
  155 + style="width: 5.625rem; height: 5.625rem"
  156 + />
  157 + <img
  158 + v-else
  159 + src="/src/assets/images/product.png"
  160 + style="width: 5.625rem; height: 5.625rem"
  161 + />
  162 + </div>
  163 + <div class="flex-auto">
  164 + <div class="flex justify-between" style="align-items: center">
  165 + <div
  166 + v-if="!isAdmin(role)"
  167 + style="font-size: 1.625rem; color: #333; font-weight: bold"
  168 + >
  169 + <CountTo
  170 + v-if="growCardList?.productInfo?.sumCount"
  171 + :end-val="growCardList.productInfo.sumCount"
  172 + />
  173 + <CountTo v-else :end-val="0" />
  174 + </div>
  175 + <div style="font-size: 1.625rem; color: #333; font-weight: bold" v-else>
  176 + <CountTo
  177 + v-if="growCardList?.productInfo?.sumCount"
  178 + :end-val="growCardList.productInfo?.sumCount"
  179 + />
  180 + <CountTo v-else :end-val="0" />
  181 + </div>
  182 + <Tooltip>
  183 + <template #title>
  184 + {{
  185 + !isAdmin(role)
  186 + ? `产品数：${growCardList?.productInfo?.sumCount} 今日新增 ${toThousands(
  187 + growCardList?.productInfo?.todayAdd
  188 + )}`
  189 + : `产品数：${growCardList?.customerInfo?.sumCount} 今日新增 ${toThousands(
  190 + growCardList?.productInfo?.todayAdd
  191 + )}`
  192 + }}
  193 + </template>
  194 + <img src="/src/assets/images/tip.png" style="width: 1.125rem; height: 1.125rem" />
  195 + </Tooltip>
  196 + </div>
  197 + <div> {{ !isAdmin(role) ? `产品数` : '产品数' }}</div>
  198 + </div>
  199 + </div>
  200 + <div v-if="!isAdmin(role)" class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
  201 + 今日新增 {{ toThousands(growCardList?.productInfo?.todayAdd) }}</div
  202 + >
  203 + <div v-else class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
  204 + 今日新增 {{ toThousands(growCardList?.productInfo?.todayAdd) }}</div
  205 + >
  206 + </Card>
  207 + </div>
  208 + <!-- 首页饼图 -->
  209 + <div class="md:flex mt-4" v-if="!isAdmin(role)">
  210 + <Card
  211 + size="small"
  212 + class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:mr-4"
  213 + style="color: #666; width: 50%"
  214 + title="设备数量统计"
  215 + >
  216 + <div class="flex container ml-4">
  217 + <div class="mr-4 flex chart-top">
  218 + <PieChartDeviceSub
  219 + v-if="seriesData.length > 0"
  220 + :legendData="legendData"
  221 + :seriesData="seriesData"
  222 + :isCircle="false"
  223 + />
  224 + </div>
  225 + <div class="ml-20 flex justify-around right-text">
  226 + <div class="text flex items-center">
  227 + <span class="left-icon-d-color"></span>
  228 + 直连设备：{{ growCardList?.deviceInfo?.directConnection ?? 0 }}个
  229 + </div>
  230 + <div class="text flex items-center">
  231 + <span class="left-icon-g-color"></span>
  232 + 网关设备：{{ growCardList?.deviceInfo?.gateWay ?? 0 }}个
  233 + </div>
  234 + <div class="text flex items-center">
  235 + <span class="left-icon-s-color"></span>
  236 + 网关子设备：{{ growCardList?.deviceInfo?.sensor ?? 0 }}个
  237 + </div>
  238 + </div>
  239 + </div>
  240 + </Card>
  241 + <Card
  242 + size="small"
  243 + class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:ml-1"
  244 + style="color: #666; width: 50%"
  245 + title="设备状态统计"
  246 + >
  247 + <div class="flex container ml-4">
  248 + <div class="mr-4 flex chart-top-status">
  249 + <PieChartDeviceStatus
  250 + v-if="seriesStatusData.length > 0"
  251 + :seriesStatusData="seriesStatusData"
  252 + />
  253 + <div class="empty-box" v-else><Empty :image="Empty.PRESENTED_IMAGE_SIMPLE" /></div>
  254 + </div>
  255 + <div class="ml-20 flex justify-around right-text">
  256 + <div class="text flex items-center">
  257 + <span class="right-icon-d-color"></span>
  258 + 待激活设备：{{ growCardList?.deviceInfo?.inActive ?? 0 }}个
  259 + </div>
  260 + <div class="text flex items-center">
  261 + <span class="right-icon-g-color"></span>
  262 + 在线设备：{{ growCardList?.deviceInfo?.onLine ?? 0 }}个
  263 + </div>
  264 + <div class="text flex items-center">
  265 + <span class="right-icon-s-color"></span>
  266 + 离线设备：{{ growCardList?.deviceInfo?.offLine ?? 0 }}个
  267 + </div>
  268 + </div>
  269 + </div>
  270 + </Card>
  271 + </div>
  272 + </div>
  273 +</template>
  274 +<script lang="ts" setup>
  275 + import { ref, onMounted, defineComponent, Ref } from 'vue';
  276 + import { Card } from 'ant-design-vue';
  277 + import { getHomeData } from '/@/api/dashboard';
  278 + import { isAdmin } from '/@/enums/roleEnum';
  279 + import { toThousands } from '/@/utils/fnUtils';
  280 + import { CountTo } from '/@/components/CountTo/index';
  281 + import { Tooltip } from 'ant-design-vue';
  282 + import { CardList, seriesDataT } from './props';
  283 + import PieChartDeviceSub from './PieChartDeviceSub.vue';
  284 + import PieChartDeviceStatus from './PieChartDeviceStatus.vue';
  285 + import { Empty } from 'ant-design-vue';
  286 +
  287 + defineProps<{
  288 + role: string;
  289 + }>();
  290 +
  291 + defineExpose({
  292 + isAdmin,
  293 + toThousands,
  294 + });
  295 +
  296 + defineComponent({
  297 + Card,
  298 + });
  299 +
  300 + const legendData = ref(['网关设备', '直连设备', '网关子设备']);
  301 +
  302 + const seriesData: Ref<seriesDataT[]> = ref([]);
  303 +
  304 + const seriesStatusData: Ref<seriesDataT[]> = ref([]);
  305 +
  306 + const growCardList = ref<CardList>();
  307 +
  308 + const devicePieColor = [
  309 + { key: 'directConnection', itemStyle: { color: '#5C7BD9' }, value: '直连设备' },
  310 + { key: 'gateWay', itemStyle: { color: '#91CC75' }, value: '网关设备' },
  311 + { key: 'sensor', itemStyle: { color: '#FAC859' }, value: '网关子设备' },
  312 + { key: 'inActive', itemStyle: { color: '#5C7BD9' }, value: '待激活' },
  313 + { key: 'onLine', itemStyle: { color: '#91CC75 ' }, value: '在线' },
  314 + { key: 'offLine', itemStyle: { color: '#EC4040' }, value: '离线' },
  315 + ];
  316 +
  317 + onMounted(async () => {
  318 + const res = await getHomeData();
  319 + growCardList.value = res;
  320 + const { deviceInfo } = growCardList.value!;
  321 + let data = Object.entries(deviceInfo).map(([key, value]) => {
  322 + const name = devicePieColor?.find((f) => f.key === key)?.value;
  323 + const itemStyle = devicePieColor?.find((f) => f.key === key)?.itemStyle;
  324 + return { key, value, itemStyle, name };
  325 + });
  326 + seriesData.value = data.filter(
  327 + (f) => f.key === 'directConnection' || f.key === 'gateWay' || f.key === 'sensor'
  328 + );
  329 + seriesStatusData.value = data.filter(
  330 + (f) => f.key === 'inActive' || f.key === 'onLine' || f.key === 'offLine'
  331 + );
  332 + });
  333 +</script>
  334 +<style lang="less">
  335 + .right-text {
  336 + width: 40%;
  337 + flex-direction: column;
  338 + height: 240px;
  339 + margin: 10px 0 10px 50px;
  340 + }
  341 +
  342 + .text {
  343 + color: #333;
  344 + font-weight: bold;
  345 + display: flex;
  346 + flex-wrap: nowrap;
  347 + }
  348 +
  349 + .chart-top {
  350 + width: 60%;
  351 + height: 300px;
  352 + align-items: center;
  353 + margin-top: -30px;
  354 + }
  355 +
  356 + .container {
  357 + width: 100%;
  358 + }
  359 +
  360 + .chart-top-status {
  361 + height: 300px;
  362 + align-items: center;
  363 + margin-top: -40px;
  364 + }
  365 +
  366 + .base-left-icon-color {
  367 + border-radius: 50%;
  368 + width: 15px;
  369 + height: 15px;
  370 + position: relative;
  371 + right: 10px;
  372 + }
  373 + .left-icon-d-color :extend(.base-left-icon-color) {
  374 + background-color: #5c7bd9;
  375 + }
  376 + .left-icon-g-color :extend(.base-left-icon-color) {
  377 + background-color: #91cc75;
  378 + }
  379 + .left-icon-s-color :extend(.base-left-icon-color) {
  380 + background-color: #fac859;
  381 + }
  382 + .right-icon-d-color :extend(.base-left-icon-color) {
  383 + background-color: #5c7bd9;
  384 + }
  385 + .right-icon-g-color :extend(.base-left-icon-color) {
  386 + background-color: #91cc75;
  387 + }
  388 + .right-icon-s-color :extend(.base-left-icon-color) {
  389 + background-color: #ec4040;
  390 + }
  391 +</style>
... ...
  1 +<template>
  2 + <div v-for="(item, index) in seriesStatusData" :key="index">
  3 + <div :id="`chartPie${item.key}`" style="width: 150px; height: 200px"></div>
  4 + </div>
  5 +</template>
  6 +<script lang="ts">
  7 + import { defineComponent, PropType, onMounted, toRefs } from 'vue';
  8 + import * as echarts from 'echarts';
  9 + import { seriesDataT } from './props';
  10 +
  11 + export default defineComponent({
  12 + props: {
  13 + seriesStatusData: {
  14 + type: Array as PropType<seriesDataT[]>,
  15 + default: () => [],
  16 + },
  17 + },
  18 +
  19 + setup(props) {
  20 + const { seriesStatusData } = toRefs(props);
  21 + const total = seriesStatusData.value
  22 + .map((m) => m.value)
  23 + .reduce((prev, cur) => prev! + cur!, 0);
  24 + onMounted(() => {
  25 + seriesStatusData.value.forEach((item) => {
  26 + initEchart(item.key, item, item.value);
  27 + });
  28 + });
  29 +
  30 + const initEchart = (id, item, value) => {
  31 + //牵引线条颜色
  32 + const labelLine = {
  33 + normal: {
  34 + show: true,
  35 + length: 20,
  36 + length2: 20,
  37 + lineStyle: {
  38 + color: '#808080',
  39 + },
  40 + },
  41 + } as any;
  42 + const legendKey = item.key == 'onLine' ? '在线' : item.key == 'offLine' ? '离线' : '待激活';
  43 + const echartInstance = echarts.init(
  44 + document.getElementById(`chartPie${id}`) as HTMLElement
  45 + );
  46 + echartInstance.setOption({
  47 + backgroundColor: '#ffffff',
  48 + tooltip: {
  49 + trigger: 'item',
  50 + formatter: `${legendKey}设备${((value / total!) * 100).toFixed(2)}%`,
  51 + },
  52 + legend: {
  53 + bottom: 0,
  54 + left: 'center',
  55 + data: [legendKey],
  56 + },
  57 + graphic: [
  58 + {
  59 + type: 'text',
  60 + left: '42%',
  61 + top: '48%',
  62 + z: 10,
  63 + style: {
  64 + fill: '#1a1a1a',
  65 + text: value + '个',
  66 + font: '14px Microsoft YaHei',
  67 + },
  68 + },
  69 + ],
  70 + series: [
  71 + {
  72 + data: [item],
  73 + avoidLabelOverlap: false,
  74 + type: 'pie',
  75 + radius: ['40%', '60%'],
  76 + label: {
  77 + normal: {
  78 + show: true,
  79 + position: 'outer',
  80 + formatter: `${legendKey}${((value / total!) * 100).toFixed(2)}%`,
  81 + borderWidth: 5,
  82 + borderRadius: 0,
  83 + padding: [90, -60],
  84 + },
  85 + },
  86 + labelLine,
  87 + },
  88 + ],
  89 + });
  90 + window.addEventListener('resize', () => echartInstance.resize());
  91 + };
  92 + },
  93 + });
  94 +</script>
... ...
1   -<template>
2   - <div v-show="dataSeries.length" ref="chartRef" :style="{ height, width }"></div>
3   - <div class="empty-box" v-show="!dataSeries.length"
4   - ><Empty :image="Empty.PRESENTED_IMAGE_SIMPLE"
5   - /></div>
6   -</template>
7   -<script lang="ts">
8   - import { defineComponent, PropType, ref, Ref, onMounted, toRefs } from 'vue';
9   - import { useECharts } from '/@/hooks/web/useECharts';
10   - import { Empty } from 'ant-design-vue';
11   - import { seriesDataT } from './props';
12   -
13   - export default defineComponent({
14   - components: { Empty },
15   - props: {
16   - width: {
17   - type: String as PropType<string>,
18   - default: '100%',
19   - },
20   - height: {
21   - type: String as PropType<string>,
22   - default: '200px',
23   - },
24   - legendData: {
25   - type: Array,
26   - default: () => [],
27   - },
28   - seriesData: {
29   - type: Array,
30   - default: () => [],
31   - },
32   - isCircle: {
33   - type: Boolean,
34   - default: true,
35   - },
36   - },
37   - setup(props) {
38   - const { legendData, seriesData } = toRefs(props);
39   - const dataSeries: Ref<seriesDataT[]> = ref([]);
40   - const legendDatas: Ref<seriesDataT[]> = ref([]);
41   - dataSeries.value = seriesData.value as unknown as seriesDataT[];
42   - legendDatas.value = legendData.value as unknown as seriesDataT[];
43   -
44   - const chartRef = ref<HTMLDivElement | null>(null);
45   - const { setOptions, resize } = useECharts(chartRef as Ref<HTMLDivElement>);
46   - const labelLine = {
47   - normal: {
48   - show: true,
49   - length2: 1,
50   - },
51   - } as any;
52   - onMounted(() => {
53   - setOptions({
54   - backgroundColor: '#ffffff',
55   - tooltip: {
56   - trigger: 'item',
57   - formatter: '{b} {d}%',
58   - },
59   - legend: {
60   - bottom: 0,
61   - width: 500,
62   - height: 200,
63   - left: 'center',
64   - data: legendDatas.value,
65   - },
66   - series: [
67   - {
68   - avoidLabelOverlap: false,
69   - type: 'pie',
70   - radius: props.isCircle ? '60%' : ['40%', '60%'],
71   - data: dataSeries.value,
72   - emphasis: {
73   - itemStyle: {
74   - shadowBlur: 10,
75   - shadowOffsetX: 0,
76   - shadowColor: 'rgba(0, 0, 0, 0.5)',
77   - },
78   - },
79   - labelLine,
80   - },
81   - ],
82   - });
83   - //自适应
84   - window.addEventListener('resize', () => resize());
85   - });
86   - return { chartRef, Empty, dataSeries };
87   - },
88   - });
89   -</script>
90   -
91   -<style>
92   - .empty-box {
93   - display: flex;
94   - align-items: center;
95   - margin: 0 120px;
96   - }
97   -</style>
  1 +<template>
  2 + <div v-show="dataSeries.length" ref="chartRef" :style="{ height, width }"></div>
  3 + <div class="empty-box" v-show="!dataSeries.length"
  4 + ><Empty :image="Empty.PRESENTED_IMAGE_SIMPLE"
  5 + /></div>
  6 +</template>
  7 +<script lang="ts">
  8 + import { defineComponent, PropType, ref, Ref, onMounted, toRefs } from 'vue';
  9 + import { useECharts } from '/@/hooks/web/useECharts';
  10 + import { Empty } from 'ant-design-vue';
  11 + import { seriesDataT } from './props';
  12 +
  13 + export default defineComponent({
  14 + components: { Empty },
  15 + props: {
  16 + width: {
  17 + type: String as PropType<string>,
  18 + default: '100%',
  19 + },
  20 + height: {
  21 + type: String as PropType<string>,
  22 + default: '200px',
  23 + },
  24 + legendData: {
  25 + type: Array,
  26 + default: () => [],
  27 + },
  28 + seriesData: {
  29 + type: Array,
  30 + default: () => [],
  31 + },
  32 + isCircle: {
  33 + type: Boolean,
  34 + default: true,
  35 + },
  36 + },
  37 + setup(props) {
  38 + const { legendData, seriesData } = toRefs(props);
  39 + const dataSeries: Ref<seriesDataT[]> = ref([]);
  40 + const legendDatas: Ref<seriesDataT[]> = ref([]);
  41 + dataSeries.value = seriesData.value as unknown as seriesDataT[];
  42 + legendDatas.value = legendData.value as unknown as seriesDataT[];
  43 +
  44 + const chartRef = ref<HTMLDivElement | null>(null);
  45 + const { setOptions, resize } = useECharts(chartRef as Ref<HTMLDivElement>);
  46 + const labelLine = {
  47 + normal: {
  48 + show: true,
  49 + length2: 1,
  50 + },
  51 + } as any;
  52 + onMounted(() => {
  53 + setOptions({
  54 + backgroundColor: '#ffffff',
  55 + tooltip: {
  56 + trigger: 'item',
  57 + formatter: '{b} {d}%',
  58 + },
  59 + legend: {
  60 + bottom: 0,
  61 + left: 'center',
  62 + data: legendDatas.value,
  63 + },
  64 + series: [
  65 + {
  66 + avoidLabelOverlap: false,
  67 + type: 'pie',
  68 + radius: props.isCircle ? '60%' : ['40%', '60%'],
  69 + data: dataSeries.value,
  70 + emphasis: {
  71 + itemStyle: {
  72 + shadowBlur: 10,
  73 + shadowOffsetX: 0,
  74 + shadowColor: 'rgba(0, 0, 0, 0.5)',
  75 + },
  76 + },
  77 + labelLine,
  78 + },
  79 + ],
  80 + });
  81 + //自适应
  82 + window.addEventListener('resize', () => resize());
  83 + });
  84 + return { chartRef, Empty, dataSeries };
  85 + },
  86 + });
  87 +</script>
  88 +
  89 +<style>
  90 + .empty-box {
  91 + display: flex;
  92 + align-items: center;
  93 + margin: 0 120px;
  94 + }
  95 +</style>
... ...
1   -import { PropType } from 'vue';
2   -export interface BasicProps {
3   - width: string;
4   - height: string;
5   -}
6   -export const basicProps = {
7   - width: {
8   - type: String as PropType<string>,
9   - default: '100%',
10   - },
11   - height: {
12   - type: String as PropType<string>,
13   - default: '280px',
14   - },
15   -};
16   -
17   -export interface CardList {
18   - deviceInfo: {
19   - sumCount: number;
20   - onLine: number;
21   - offLine: number;
22   - inActive: number;
23   - todayAdd: number;
24   - directConnection: number;
25   - gateWay: number;
26   - sensor: number;
27   - };
28   - tenantInfo?: { sumCount: number; todayAdd: number };
29   - customerInfo?: { sumCount: number; todayAdd: number };
30   - alarmInfo?: {
31   - sumCount: number;
32   - todayAdd: number;
33   - };
34   - messageInfo?: {
35   - dataPointsCount: number;
36   - messageCount: number;
37   - todayDataPointsAdd: number;
38   - todayMessageAdd: number;
39   - };
40   - productInfo?: {
41   - sumCount: number;
42   - todayAdd: number;
43   - };
44   -}
45   -export type seriesDataT = {
46   - value: number | undefined;
47   - name: string | undefined;
48   - itemStyle: object | undefined;
49   - key?: string | undefined;
50   -};
  1 +import { PropType } from 'vue';
  2 +export interface BasicProps {
  3 + width: string;
  4 + height: string;
  5 +}
  6 +export const basicProps = {
  7 + width: {
  8 + type: String as PropType<string>,
  9 + default: '100%',
  10 + },
  11 + height: {
  12 + type: String as PropType<string>,
  13 + default: '280px',
  14 + },
  15 +};
  16 +
  17 +export interface CardList {
  18 + deviceInfo: {
  19 + sumCount: number;
  20 + onLine: number;
  21 + offLine: number;
  22 + inActive: number;
  23 + todayAdd: number;
  24 + directConnection: number;
  25 + gateWay: number;
  26 + sensor: number;
  27 + };
  28 + tenantInfo?: { sumCount: number; todayAdd: number };
  29 + customerInfo?: { sumCount: number; todayAdd: number };
  30 + alarmInfo?: {
  31 + sumCount: number;
  32 + todayAdd: number;
  33 + };
  34 + messageInfo?: {
  35 + dataPointsCount: number;
  36 + messageCount: number;
  37 + todayDataPointsAdd: number;
  38 + todayMessageAdd: number;
  39 + };
  40 + productInfo?: {
  41 + sumCount: number;
  42 + todayAdd: number;
  43 + };
  44 +}
  45 +export type seriesDataT = {
  46 + value: number | undefined;
  47 + name: string | undefined;
  48 + itemStyle: object | undefined;
  49 + key?: string | undefined;
  50 +};
... ...