简柏林 / thingskit-front · Commits

Commit b9fd638cf19e97d03a2515a23a757714298f7218

Authored by xp.Huang
2 parents 8ef4393e 63d89a6d

Merge branch 'local_dev_ft' into 'main' 

feat:联调首页相关接口

See merge request huang/yun-teng-iot-front!449
Inline Side-by-side
Showing 7 changed files with 372 additions and 353 deletions
1 <template> 1 <template>
2 - <div class="md:flex">  
3 - <Card size="small" class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:mr-4" style="color: #666">  
4 - <div class="flex" style="height: 100px">  
5 - <div class="mr-4"  
6 - ><img src="/src/assets/images/device-count.png" style="width: 5.625rem; height: 5.625rem"  
7 - /></div>  
8 - <div class="flex-auto">  
9 - <div class="flex justify-between" style="align-items: center">  
10 - <div style="font-size: 1.625rem; color: #333; font-weight: bold">  
11 - <CountTo  
12 - v-if="growCardList?.deviceInfo?.sumCount"  
13 - :endVal="growCardList.deviceInfo.sumCount"  
14 - />  
15 - <CountTo v-else :endVal="0" /> 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>
16 </div> 28 </div>
17 - <Tooltip>  
18 - <template #title>  
19 - 设备数 : {{ growCardList?.deviceInfo.sumCount }} 今日新增  
20 - {{ toThousands(growCardList?.deviceInfo?.todayAdd) }}  
21 - </template>  
22 - <img src="/src/assets/images/tip.png" style="width: 1.125rem; height: 1.125rem" />  
23 - </Tooltip> 29 + <div> 设备数 </div>
24 </div> 30 </div>
25 - <div> 设备数 </div>  
26 </div> 31 </div>
27 - </div>  
28 - <div class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">  
29 - 今日新增 {{ toThousands(growCardList?.deviceInfo?.todayAdd) }}  
30 - </div>  
31 - </Card>  
32 - <Card size="small" class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:mr-4" style="color: #666">  
33 - <div class="flex" style="height: 100px">  
34 - <div class="mr-4">  
35 - <img  
36 - v-if="!isAdmin(role)"  
37 - src="/src/assets/images/alarm-count.png"  
38 - style="width: 5.625rem; height: 5.625rem"  
39 - />  
40 - <img v-else src="/src/assets/images/zh.png" style="width: 5.625rem; height: 5.625rem" /> 32 + <div class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
  33 + 今日新增 {{ toThousands(growCardList?.deviceInfo?.todayAdd) }}
41 </div> 34 </div>
42 - <div class="flex-auto">  
43 - <div class="flex justify-between" style="align-items: center">  
44 - <div v-if="!isAdmin(role)" style="font-size: 1.625rem; color: #333; font-weight: bold">  
45 - <CountTo  
46 - v-if="growCardList?.alarmInfo?.sumCount"  
47 - :end-val="growCardList.alarmInfo.sumCount"  
48 - />  
49 - <CountTo v-else :end-val="0" /> 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>
50 </div> 79 </div>
51 - <div style="font-size: 1.625rem; color: #333; font-weight: bold" v-else>  
52 - <CountTo  
53 - v-if="growCardList?.tenantInfo?.sumCount"  
54 - :end-val="growCardList.tenantInfo.sumCount"  
55 - />  
56 - <CountTo v-else :end-val="0" /> 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>
57 </div> 133 </div>
58 - <Tooltip>  
59 - <template #title>  
60 - {{  
61 - !isAdmin(role)  
62 - ? `告警数：${growCardList?.alarmInfo?.sumCount} 今日新增 ${toThousands(  
63 - growCardList?.alarmInfo?.todayAdd  
64 - )}`  
65 - : `租户总量：${growCardList?.tenantInfo?.sumCount} 今日新增 ${toThousands(  
66 - growCardList?.alarmInfo?.todayAdd  
67 - )}`  
68 - }}  
69 - </template>  
70 - <img src="/src/assets/images/tip.png" style="width: 1.125rem; height: 1.125rem" />  
71 - </Tooltip> 134 + <div> {{ !isAdmin(role) ? `消息数` : '客户总量' }}</div>
72 </div> 135 </div>
73 - <div> {{ !isAdmin(role) ? `告警数` : '租户总量' }}</div>  
74 </div> 136 </div>
75 - </div>  
76 - <div v-if="!isAdmin(role)" class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">  
77 - 今日新增 {{ toThousands(growCardList?.alarmInfo?.todayAdd) }}</div  
78 - >  
79 - <div v-else class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">  
80 - 今日新增 {{ toThousands(growCardList?.tenantInfo?.todayAdd) }}</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"
81 > 149 >
82 - </Card>  
83 - <Card size="small" class="md:w-1/3 w-full !md:mt-0 !mt-4" style="color: #666">  
84 - <div class="flex" style="height: 100px">  
85 - <div class="mr-4">  
86 - <img  
87 - v-if="!isAdmin(role)"  
88 - src="/src/assets/images/msg-count.png"  
89 - style="width: 5.625rem; height: 5.625rem"  
90 - />  
91 - <img v-else src="/src/assets/images/kf.png" style="width: 5.625rem; height: 5.625rem" />  
92 - </div>  
93 - <div class="flex-auto">  
94 - <div class="flex justify-between" style="align-items: center">  
95 - <div v-if="!isAdmin(role)" style="font-size: 1.625rem; color: #333; font-weight: bold">  
96 - <CountTo  
97 - v-if="growCardList?.messageInfo?.messageCount"  
98 - :end-val="growCardList.messageInfo.messageCount"  
99 - />  
100 - <CountTo v-else :end-val="0" />  
101 - </div>  
102 - <div style="font-size: 1.625rem; color: #333; font-weight: bold" v-else>  
103 - <CountTo  
104 - v-if="growCardList?.customerInfo?.sumCount"  
105 - :end-val="growCardList.customerInfo.sumCount"  
106 - />  
107 - <CountTo v-else :end-val="0" /> 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>
108 </div> 196 </div>
109 - <Tooltip>  
110 - <template #title>  
111 - {{  
112 - !isAdmin(role)  
113 - ? `消息数：${growCardList?.messageInfo?.messageCount} 今日新增 ${toThousands(  
114 - growCardList?.messageInfo?.todayMessageAdd  
115 - )}`  
116 - : `客户总量：${growCardList?.customerInfo?.sumCount} 今日新增 ${toThousands(  
117 - growCardList?.messageInfo?.todayMessageAdd  
118 - )}`  
119 - }}  
120 - </template>  
121 - <img src="/src/assets/images/tip.png" style="width: 1.125rem; height: 1.125rem" />  
122 - </Tooltip> 197 + <div> {{ !isAdmin(role) ? `产品数` : '产品数' }}</div>
123 </div> 198 </div>
124 - <div> {{ !isAdmin(role) ? `消息数` : '客户总量' }}</div>  
125 </div> 199 </div>
126 - </div>  
127 - <div v-if="!isAdmin(role)" class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">  
128 - 今日新增 {{ toThousands(growCardList?.messageInfo?.todayMessageAdd) }}</div  
129 - >  
130 - <div v-else class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">  
131 - 今日新增 {{ toThousands(growCardList?.customerInfo?.todayAdd) }}</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%"
132 > 214 >
133 - </Card>  
134 -  
135 - <Card size="small" class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:ml-4" style="color: #666">  
136 - <div class="flex" style="height: 100px">  
137 - <div class="mr-4">  
138 - <img  
139 - v-if="!isAdmin(role)"  
140 - src="/src/assets/images/product.png"  
141 - style="width: 5.625rem; height: 5.625rem"  
142 - />  
143 - <img  
144 - v-else  
145 - src="/src/assets/images/product.png"  
146 - style="width: 5.625rem; height: 5.625rem"  
147 - />  
148 - </div>  
149 - <div class="flex-auto">  
150 - <div class="flex justify-between" style="align-items: center">  
151 - <div v-if="!isAdmin(role)" style="font-size: 1.625rem; color: #333; font-weight: bold">  
152 - <CountTo  
153 - v-if="growCardList?.messageInfo?.messageCount"  
154 - :end-val="growCardList.messageInfo.messageCount"  
155 - />  
156 - <CountTo v-else :end-val="0" />  
157 - </div>  
158 - <div style="font-size: 1.625rem; color: #333; font-weight: bold" v-else>  
159 - <CountTo  
160 - v-if="growCardList?.customerInfo?.sumCount"  
161 - :end-val="growCardList.customerInfo.sumCount"  
162 - />  
163 - <CountTo v-else :end-val="0" /> 215 + <div class="flex container">
  216 + <div class="mr-4 flex chart-top">
  217 + <PieChartDeviceSub :legendData="legendData" :seriesData="seriesData" :isCircle="true" />
  218 + </div>
  219 + <div class="ml-20 flex justify-around right-text">
  220 + <div class="text">
  221 + 直连设备：{{ growCardList?.deviceInfo?.directConnection ?? 0 }}个
164 </div> 222 </div>
165 - <Tooltip>  
166 - <template #title>  
167 - {{  
168 - !isAdmin(role)  
169 - ? `产品数：${growCardList?.messageInfo?.messageCount} 今日新增 ${toThousands(  
170 - growCardList?.messageInfo?.todayMessageAdd  
171 - )}`  
172 - : `产品数：${growCardList?.customerInfo?.sumCount} 今日新增 ${toThousands(  
173 - growCardList?.messageInfo?.todayMessageAdd  
174 - )}`  
175 - }}  
176 - </template>  
177 - <img src="/src/assets/images/tip.png" style="width: 1.125rem; height: 1.125rem" />  
178 - </Tooltip> 223 + <div class="text"> 网关设备：{{ growCardList?.deviceInfo?.gateWay ?? 0 }}个 </div>
  224 + <div class="text"> 网关子设备：{{ growCardList?.deviceInfo?.sensor ?? 0 }}个 </div>
179 </div> 225 </div>
180 - <div> {{ !isAdmin(role) ? `产品数` : '产品数' }}</div>  
181 </div> 226 </div>
182 - </div>  
183 - <div v-if="!isAdmin(role)" class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">  
184 - 今日新增 {{ toThousands(growCardList?.messageInfo?.todayMessageAdd) }}</div 227 + </Card>
  228 + <Card
  229 + size="small"
  230 + class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:ml-1"
  231 + style="color: #666; width: 50%"
185 > 232 >
186 - <div v-else class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">  
187 - 今日新增 {{ toThousands(growCardList?.customerInfo?.todayAdd) }}</div  
188 - >  
189 - </Card> 233 + <div class="flex container">
  234 + <div class="mr-4 flex chart-top">
  235 + <PieChartDeviceSub
  236 + :legendData="legendStatusData"
  237 + :seriesData="seriesStatusData"
  238 + :isCircle="false"
  239 + />
  240 + </div>
  241 + <div class="ml-20 flex justify-around right-text">
  242 + <div class="text"> 待激活设备：{{ growCardList?.deviceInfo?.inActive ?? 0 }}个 </div>
  243 + <div class="text"> 在线设备：{{ growCardList?.deviceInfo?.onLine ?? 0 }}个 </div>
  244 + <div class="text"> 离线设备：{{ growCardList?.deviceInfo?.offLine ?? 0 }}个 </div>
  245 + </div>
  246 + </div>
  247 + </Card>
  248 + </div>
190 </div> 249 </div>
191 </template> 250 </template>
192 <script lang="ts" setup> 251 <script lang="ts" setup>
193 - import { ref, onMounted, defineComponent } from 'vue'; 252 + import { ref, onMounted, defineComponent, Ref } from 'vue';
194 import { Card } from 'ant-design-vue'; 253 import { Card } from 'ant-design-vue';
195 import { getHomeData } from '/@/api/dashboard'; 254 import { getHomeData } from '/@/api/dashboard';
196 import { isAdmin } from '/@/enums/roleEnum'; 255 import { isAdmin } from '/@/enums/roleEnum';
197 import { toThousands } from '/@/utils/fnUtils'; 256 import { toThousands } from '/@/utils/fnUtils';
198 import { CountTo } from '/@/components/CountTo/index'; 257 import { CountTo } from '/@/components/CountTo/index';
199 import { Tooltip } from 'ant-design-vue'; 258 import { Tooltip } from 'ant-design-vue';
  259 + import { CardList, seriesDataT } from './props';
  260 + import PieChartDeviceSub from './PieChartDeviceSub.vue';
200 261
201 defineProps<{ 262 defineProps<{
202 role: string; 263 role: string;
203 }>(); 264 }>();
  265 +
204 defineExpose({ 266 defineExpose({
205 isAdmin, 267 isAdmin,
206 toThousands, 268 toThousands,
207 }); 269 });
  270 +
208 defineComponent({ 271 defineComponent({
209 Card, 272 Card,
210 }); 273 });
211 - interface CardList {  
212 - deviceInfo: {  
213 - sumCount: number;  
214 - onLine: number;  
215 - offLine: number;  
216 - inActive: number;  
217 - todayAdd: number;  
218 - };  
219 - tenantInfo?: { sumCount: number; todayAdd: number };  
220 - customerInfo?: { sumCount: number; todayAdd: number };  
221 - alarmInfo?: {  
222 - sumCount: number;  
223 - todayAdd: number;  
224 - };  
225 - messageInfo?: {  
226 - dataPointsCount: number;  
227 - messageCount: number;  
228 - todayDataPointsAdd: number;  
229 - todayMessageAdd: number;  
230 - };  
231 - } 274 +
  275 + const legendData = ref(['网关设备', '直连设备', '网关子设备']);
  276 +
  277 + const seriesData: Ref<seriesDataT[]> = ref([]);
  278 +
  279 + const legendStatusData = ref(['待激活', '在线', '离线']);
  280 +
  281 + const seriesStatusData: Ref<seriesDataT[]> = ref([]);
  282 +
232 const growCardList = ref<CardList>(); 283 const growCardList = ref<CardList>();
  284 +
233 onMounted(async () => { 285 onMounted(async () => {
234 const res = await getHomeData(); 286 const res = await getHomeData();
235 growCardList.value = res; 287 growCardList.value = res;
  288 + const devObj = growCardList.value?.deviceInfo;
  289 + for (let o in devObj) {
  290 + if (o === 'directConnection' || o === 'gateWay' || o === 'sensor') {
  291 + seriesData.value.push({
  292 + value:
  293 + o === 'directConnection'
  294 + ? devObj?.directConnection
  295 + : o === 'gateWay'
  296 + ? devObj?.gateWay
  297 + : devObj?.sensor,
  298 + name: o === 'directConnection' ? '直连设备' : o === 'gateWay' ? '网关设备' : '网关子设备',
  299 + itemStyle:
  300 + o === 'directConnection'
  301 + ? { color: '#5AEEED' }
  302 + : o === 'gateWay'
  303 + ? { color: '#0B55F1' }
  304 + : { color: '#00C678' },
  305 + });
  306 + }
  307 + if (o === 'inActive' || o === 'onLine' || o === 'offLine') {
  308 + seriesStatusData.value.push({
  309 + value:
  310 + o === 'inActive' ? devObj?.inActive : o === 'onLine' ? devObj?.onLine : devObj?.offLine,
  311 + name: o === 'inActive' ? '待激活' : o === 'onLine' ? '在线' : '离线',
  312 + itemStyle:
  313 + o === 'inActive'
  314 + ? { color: '#F9C900' }
  315 + : o === 'onLine'
  316 + ? { color: '#5AEEED' }
  317 + : { color: '#FF9C4A' },
  318 + });
  319 + }
  320 + }
236 }); 321 });
237 </script> 322 </script>
  323 +<style lang="css">
  324 + .right-text {
  325 + width: 40%;
  326 + flex-direction: column;
  327 + height: 240px;
  328 + margin: 10px 0 10px 50px;
  329 + }
  330 +
  331 + .text {
  332 + color: #333;
  333 + font-weight: bold;
  334 + display: flex;
  335 + flex-wrap: nowrap;
  336 + }
  337 +
  338 + .chart-top {
  339 + width: 60%;
  340 + height: 300px;
  341 + align-items: center;
  342 + margin-top: -30px;
  343 + }
  344 +
  345 + .container {
  346 + width: 100%;
  347 + }
  348 +</style>
1 -<template>  
2 - <div class="md:flex mt-4">  
3 - <Card  
4 - size="small"  
5 - class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:mr-4"  
6 - style="color: #666; width: 50%"  
7 - >  
8 - <div class="flex container">  
9 - <div class="mr-4 flex chart-top">  
10 - <PieChartDeviceSub  
11 - :legendData="legendData"  
12 - :seriesData="seriesData"  
13 - :radisData="radisData"  
14 - />  
15 - </div>  
16 - <div class="ml-20 flex justify-around right-text">  
17 - <div class="text"> 直连设备：4个 </div>  
18 - <div class="text"> 网关设备：1个 </div>  
19 - <div class="text"> 网关子设备：6个 </div>  
20 - </div>  
21 - </div>  
22 - </Card>  
23 - <Card  
24 - size="small"  
25 - class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:ml-1"  
26 - style="color: #666; width: 50%"  
27 - >  
28 - <div class="flex container">  
29 - <div class="mr-4 flex chart-top">  
30 - <PieChartDeviceSub  
31 - :legendData="legendStatusData"  
32 - :seriesData="seriesStatusData"  
33 - :radisData="radisStatusData"  
34 - />  
35 - </div>  
36 - <div class="ml-20 flex justify-around right-text">  
37 - <div class="text"> 待激活设备：2个 </div>  
38 - <div class="text"> 在线设备：1个 </div>  
39 - <div class="text"> 离线设备：4个 </div>  
40 - </div>  
41 - </div>  
42 - </Card>  
43 - </div>  
44 -</template>  
45 -<script lang="ts" setup>  
46 - import { ref, onMounted, defineComponent, Ref } from 'vue';  
47 - import { Card } from 'ant-design-vue';  
48 - import { getHomeData } from '/@/api/dashboard';  
49 - import { isAdmin } from '/@/enums/roleEnum';  
50 - import { toThousands } from '/@/utils/fnUtils';  
51 - import PieChartDeviceSub from './PieChartDeviceSub.vue';  
52 -  
53 - defineProps<{  
54 - role: string;  
55 - }>();  
56 - defineExpose({  
57 - isAdmin,  
58 - toThousands,  
59 - });  
60 - defineComponent({  
61 - Card,  
62 - });  
63 - interface CardList {  
64 - deviceInfo: {  
65 - sumCount: number;  
66 - onLine: number;  
67 - offLine: number;  
68 - inActive: number;  
69 - todayAdd: number;  
70 - };  
71 - tenantInfo?: { sumCount: number; todayAdd: number };  
72 - customerInfo?: { sumCount: number; todayAdd: number };  
73 - alarmInfo?: {  
74 - sumCount: number;  
75 - todayAdd: number;  
76 - };  
77 - messageInfo?: {  
78 - dataPointsCount: number;  
79 - messageCount: number;  
80 - todayDataPointsAdd: number;  
81 - todayMessageAdd: number;  
82 - };  
83 - }  
84 - type seriesDataT = {  
85 - value: number;  
86 - name: string;  
87 - itemStyle: object;  
88 - };  
89 - const radisData: any = ref('70%');  
90 - const radisStatusData = ref<string[]>(['40%', '70%']);  
91 - const growCardList = ref<CardList>();  
92 - const legendData = ref(['gateway', 'directly', 'sub-device']);  
93 - const seriesData: Ref<seriesDataT[]> = ref([  
94 - { value: 1048, name: 'gateway', itemStyle: { color: '#3079FF' } },  
95 - { value: 735, name: 'directly', itemStyle: { color: '#36cbcb' } },  
96 - { value: 580, name: 'sub-device', itemStyle: { color: '#4ecb73' } },  
97 - ]);  
98 - const legendStatusData = ref(['inactive', 'online', 'offline']);  
99 - const seriesStatusData: Ref<seriesDataT[]> = ref([  
100 - { value: 1048, name: 'inactive', itemStyle: { color: '#3079FF' } },  
101 - { value: 735, name: 'online', itemStyle: { color: '#36cbcb' } },  
102 - { value: 580, name: 'offline', itemStyle: { color: '#4ecb73' } },  
103 - ]);  
104 - onMounted(async () => {  
105 - const res = await getHomeData();  
106 - growCardList.value = res;  
107 - });  
108 -</script>  
109 -  
110 -<style lang="css">  
111 - .right-text {  
112 - width: 40%;  
113 - flex-direction: column;  
114 - height: 240px;  
115 - margin: 10px 0 10px 50px;  
116 - }  
117 -  
118 - .text {  
119 - color: #333;  
120 - font-weight: bold;  
121 - display: flex;  
122 - flex-wrap: nowrap;  
123 - }  
124 -  
125 - .chart-top {  
126 - width: 60%;  
127 - height: 300px;  
128 - align-items: center;  
129 - margin-top: -30px;  
130 - }  
131 -  
132 - .container {  
133 - width: 100%;  
134 - }  
135 -</style>  
@@ -8,6 +8,7 @@ @@ -8,6 +8,7 @@
8 import { defineComponent, PropType, ref, Ref, onMounted, toRefs } from 'vue'; 8 import { defineComponent, PropType, ref, Ref, onMounted, toRefs } from 'vue';
9 import { useECharts } from '/@/hooks/web/useECharts'; 9 import { useECharts } from '/@/hooks/web/useECharts';
10 import { Empty } from 'ant-design-vue'; 10 import { Empty } from 'ant-design-vue';
  11 + import { seriesDataT } from './props';
11 12
12 export default defineComponent({ 13 export default defineComponent({
13 components: { Empty }, 14 components: { Empty },
@@ -28,19 +29,17 @@ @@ -28,19 +29,17 @@
28 type: Array, 29 type: Array,
29 default: () => [], 30 default: () => [],
30 }, 31 },
31 - radisData: {  
32 - type: Array || String,  
33 - default: () => ['40%', '70%'] || '70%', 32 + isCircle: {
  33 + type: Boolean,
  34 + default: true,
34 }, 35 },
35 }, 36 },
36 setup(props) { 37 setup(props) {
37 - const { legendData, seriesData, radisData } = toRefs(props);  
38 - const dataSeries = ref<any>([]);  
39 - const legendDatas = ref<any>([]);  
40 - const radisDatas = ref<any>([]);  
41 - dataSeries.value = seriesData.value;  
42 - legendDatas.value = legendData.value;  
43 - radisDatas.value = radisData.value; 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[];
44 43
45 const chartRef = ref<HTMLDivElement | null>(null); 44 const chartRef = ref<HTMLDivElement | null>(null);
46 const { setOptions, resize } = useECharts(chartRef as Ref<HTMLDivElement>); 45 const { setOptions, resize } = useECharts(chartRef as Ref<HTMLDivElement>);
@@ -60,8 +59,9 @@ @@ -60,8 +59,9 @@
60 }, 59 },
61 series: [ 60 series: [
62 { 61 {
  62 + avoidLabelOverlap: false,
63 type: 'pie', 63 type: 'pie',
64 - radius: radisDatas.value, 64 + radius: props.isCircle ? '60%' : ['40%', '60%'],
65 data: dataSeries.value, 65 data: dataSeries.value,
66 emphasis: { 66 emphasis: {
67 itemStyle: { 67 itemStyle: {
@@ -70,6 +70,12 @@ @@ -70,6 +70,12 @@
70 shadowColor: 'rgba(0, 0, 0, 0.5)', 70 shadowColor: 'rgba(0, 0, 0, 0.5)',
71 }, 71 },
72 }, 72 },
  73 + labelLine: {
  74 + normal: {
  75 + show: true,
  76 + length2: 1,
  77 + },
  78 + },
73 }, 79 },
74 ], 80 ],
75 }); 81 });
@@ -107,7 +107,6 @@ @@ -107,7 +107,6 @@
107 import { getAuthCache } from '/@/utils/auth'; 107 import { getAuthCache } from '/@/utils/auth';
108 import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum'; 108 import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum';
109 import { formatToDateTime } from '/@/utils/dateUtil'; 109 import { formatToDateTime } from '/@/utils/dateUtil';
110 - import { getEntitiesId } from '/@/api/dashboard/index';  
111 import CustomerTrend from './CustomerTrend.vue'; 110 import CustomerTrend from './CustomerTrend.vue';
112 // import TenantTrend from './TenantTrend.vue'; 111 // import TenantTrend from './TenantTrend.vue';
113 import CustomerAlarmMessage from './CustomerAlarmMessage.vue'; 112 import CustomerAlarmMessage from './CustomerAlarmMessage.vue';
@@ -159,8 +158,8 @@ @@ -159,8 +158,8 @@
159 const { send, close } = useWebSocket(state.server, { 158 const { send, close } = useWebSocket(state.server, {
160 async onConnected() { 159 async onConnected() {
161 if (isAdmin(props.role)) return; 160 if (isAdmin(props.role)) return;
162 - const res = await getEntitiesId();  
163 - entityId = res.data[0]?.entityId; 161 + let content = JSON.parse(window.localStorage.getItem('entityId'));
  162 + entityId = content;
164 const sendValue = JSON.stringify({ 163 const sendValue = JSON.stringify({
165 entityDataCmds: [ 164 entityDataCmds: [
166 { 165 {
@@ -106,7 +106,6 @@ @@ -106,7 +106,6 @@
106 import { getAuthCache } from '/@/utils/auth'; 106 import { getAuthCache } from '/@/utils/auth';
107 import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum'; 107 import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum';
108 import { formatToDateTime } from '/@/utils/dateUtil'; 108 import { formatToDateTime } from '/@/utils/dateUtil';
109 - import { getEntitiesId } from '/@/api/dashboard/index';  
110 // import CustomerTrend from './CustomerTrend.vue'; 109 // import CustomerTrend from './CustomerTrend.vue';
111 import TenantTrend from './TenantTrend.vue'; 110 import TenantTrend from './TenantTrend.vue';
112 import CustomerAlarmMessage from './CustomerAlarmMessage.vue'; 111 import CustomerAlarmMessage from './CustomerAlarmMessage.vue';
@@ -158,8 +157,8 @@ @@ -158,8 +157,8 @@
158 const { send, close } = useWebSocket(state.server, { 157 const { send, close } = useWebSocket(state.server, {
159 async onConnected() { 158 async onConnected() {
160 if (isAdmin(props.role)) return; 159 if (isAdmin(props.role)) return;
161 - const res = await getEntitiesId();  
162 - entityId = res.data[0]?.entityId; 160 + let content = JSON.parse(window.localStorage.getItem('entityId'));
  161 + entityId = content;
163 const sendValue = JSON.stringify({ 162 const sendValue = JSON.stringify({
164 entityDataCmds: [ 163 entityDataCmds: [
165 { 164 {
@@ -243,7 +242,6 @@ @@ -243,7 +242,6 @@
243 } 242 }
244 } else { 243 } else {
245 if (data) { 244 if (data) {
246 - console.log('消息数', data);  
247 if (data) { 245 if (data) {
248 const { transportDataPointsCountHourly, transportMsgCountHourly } = 246 const { transportDataPointsCountHourly, transportMsgCountHourly } =
249 data.data[0].latest.TIME_SERIES; 247 data.data[0].latest.TIME_SERIES;
@@ -259,9 +257,7 @@ @@ -259,9 +257,7 @@
259 transportDataPointsCountHourly?.ts, 257 transportDataPointsCountHourly?.ts,
260 transportDataPointsCountHourly?.value, 258 transportDataPointsCountHourly?.value,
261 ]); 259 ]);
262 - console.log('state.dataPointList', state.dataPointList);  
263 state.messageList.push([transportMsgCountHourly?.ts, transportMsgCountHourly?.value]); 260 state.messageList.push([transportMsgCountHourly?.ts, transportMsgCountHourly?.value]);
264 - console.log('state.messageList', state.messageList);  
265 } 261 }
266 } 262 }
267 if (update) { 263 if (update) {
@@ -276,8 +272,6 @@ @@ -276,8 +272,6 @@
276 } 272 }
277 state.dataPointList = newArray; 273 state.dataPointList = newArray;
278 state.messageList = newArray1; 274 state.messageList = newArray1;
279 - console.log('newArray', state.dataPointList);  
280 - console.log('newArray1', state.messageList);  
281 } 275 }
282 } 276 }
283 }, 277 },
@@ -13,3 +13,37 @@ export const basicProps = { @@ -13,3 +13,37 @@ export const basicProps = {
13 default: '280px', 13 default: '280px',
14 }, 14 },
15 }; 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;
  48 + itemStyle: object;
  49 +};
@@ -2,7 +2,6 @@ @@ -2,7 +2,6 @@
2 <div class="p-4 md:flex"> 2 <div class="p-4 md:flex">
3 <div class="md:w-7/10 w-full !mr-4 enter-y"> 3 <div class="md:w-7/10 w-full !mr-4 enter-y">
4 <GrowCard :loading="loading" class="enter-y" :role="role" /> 4 <GrowCard :loading="loading" class="enter-y" :role="role" />
5 - <PieChartDevice :loading="loading" class="enter-y" :role="role" />  
6 <SiteAnalysisMessage class="!my-4 enter-y" :loading="loading" :role="role" /> 5 <SiteAnalysisMessage class="!my-4 enter-y" :loading="loading" :role="role" />
7 <SiteAnalysis class="!my-4 enter-y" :loading="loading" :role="role" /> 6 <SiteAnalysis class="!my-4 enter-y" :loading="loading" :role="role" />
8 <div class="md:flex enter-y" v-if="!isAdmin(role)"> 7 <div class="md:flex enter-y" v-if="!isAdmin(role)">
@@ -22,7 +21,7 @@ @@ -22,7 +21,7 @@
22 </div> 21 </div>
23 </template> 22 </template>
24 <script lang="ts" setup> 23 <script lang="ts" setup>
25 - import { ref } from 'vue'; 24 + import { ref, onMounted } from 'vue';
26 import GrowCard from './components/GrowCard.vue'; 25 import GrowCard from './components/GrowCard.vue';
27 import SiteAnalysis from './components/SiteAnalysis.vue'; 26 import SiteAnalysis from './components/SiteAnalysis.vue';
28 import SiteAnalysisMessage from './components/SiteAnalysisMessage.vue'; 27 import SiteAnalysisMessage from './components/SiteAnalysisMessage.vue';
@@ -31,16 +30,27 @@ @@ -31,16 +30,27 @@
31 import { USER_INFO_KEY } from '/@/enums/cacheEnum'; 30 import { USER_INFO_KEY } from '/@/enums/cacheEnum';
32 import { getAuthCache } from '/@/utils/auth'; 31 import { getAuthCache } from '/@/utils/auth';
33 import { isAdmin } from '/@/enums/roleEnum'; 32 import { isAdmin } from '/@/enums/roleEnum';
34 - import PieChartDevice from './components/PieChartDevice.vue'; 33 + import { getEntitiesId } from '/@/api/dashboard/index';
35 34
36 defineExpose({ 35 defineExpose({
37 isAdmin, 36 isAdmin,
38 }); 37 });
39 38
40 const userInfo: any = getAuthCache(USER_INFO_KEY); 39 const userInfo: any = getAuthCache(USER_INFO_KEY);
  40 +
41 const role: string = userInfo?.roles[0]; 41 const role: string = userInfo?.roles[0];
  42 +
42 const loading = ref(true); 43 const loading = ref(true);
  44 +
43 setTimeout(() => { 45 setTimeout(() => {
44 loading.value = false; 46 loading.value = false;
45 }, 1500); 47 }, 1500);
  48 +
  49 + const entityId = ref({});
  50 +
  51 + onMounted(async () => {
  52 + const res = await getEntitiesId();
  53 + entityId.value = res.data[0]?.entityId;
  54 + window.localStorage.setItem('entityId', JSON.stringify(entityId.value));
  55 + });
46 </script> 56 </script>