简柏林 / 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 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 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 30 </div>
25   - <div> 设备数 </div>
26 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 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 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 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 135 </div>
73   - <div> {{ !isAdmin(role) ? `告警数` : '租户总量' }}</div>
74 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 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 198 </div>
124   - <div> {{ !isAdmin(role) ? `消息数` : '客户总量' }}</div>
125 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 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 225 </div>
180   - <div> {{ !isAdmin(role) ? `产品数` : '产品数' }}</div>
181 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 249 </div>
191 250 </template>
192 251 <script lang="ts" setup>
193   - import { ref, onMounted, defineComponent } from 'vue';
  252 + import { ref, onMounted, defineComponent, Ref } from 'vue';
194 253 import { Card } from 'ant-design-vue';
195 254 import { getHomeData } from '/@/api/dashboard';
196 255 import { isAdmin } from '/@/enums/roleEnum';
197 256 import { toThousands } from '/@/utils/fnUtils';
198 257 import { CountTo } from '/@/components/CountTo/index';
199 258 import { Tooltip } from 'ant-design-vue';
  259 + import { CardList, seriesDataT } from './props';
  260 + import PieChartDeviceSub from './PieChartDeviceSub.vue';
200 261
201 262 defineProps<{
202 263 role: string;
203 264 }>();
  265 +
204 266 defineExpose({
205 267 isAdmin,
206 268 toThousands,
207 269 });
  270 +
208 271 defineComponent({
209 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 283 const growCardList = ref<CardList>();
  284 +
233 285 onMounted(async () => {
234 286 const res = await getHomeData();
235 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 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 8 import { defineComponent, PropType, ref, Ref, onMounted, toRefs } from 'vue';
9 9 import { useECharts } from '/@/hooks/web/useECharts';
10 10 import { Empty } from 'ant-design-vue';
  11 + import { seriesDataT } from './props';
11 12
12 13 export default defineComponent({
13 14 components: { Empty },
... ... @@ -28,19 +29,17 @@
28 29 type: Array,
29 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 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 44 const chartRef = ref<HTMLDivElement | null>(null);
46 45 const { setOptions, resize } = useECharts(chartRef as Ref<HTMLDivElement>);
... ... @@ -60,8 +59,9 @@
60 59 },
61 60 series: [
62 61 {
  62 + avoidLabelOverlap: false,
63 63 type: 'pie',
64   - radius: radisDatas.value,
  64 + radius: props.isCircle ? '60%' : ['40%', '60%'],
65 65 data: dataSeries.value,
66 66 emphasis: {
67 67 itemStyle: {
... ... @@ -70,6 +70,12 @@
70 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 107 import { getAuthCache } from '/@/utils/auth';
108 108 import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum';
109 109 import { formatToDateTime } from '/@/utils/dateUtil';
110   - import { getEntitiesId } from '/@/api/dashboard/index';
111 110 import CustomerTrend from './CustomerTrend.vue';
112 111 // import TenantTrend from './TenantTrend.vue';
113 112 import CustomerAlarmMessage from './CustomerAlarmMessage.vue';
... ... @@ -159,8 +158,8 @@
159 158 const { send, close } = useWebSocket(state.server, {
160 159 async onConnected() {
161 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 163 const sendValue = JSON.stringify({
165 164 entityDataCmds: [
166 165 {
... ...
... ... @@ -106,7 +106,6 @@
106 106 import { getAuthCache } from '/@/utils/auth';
107 107 import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum';
108 108 import { formatToDateTime } from '/@/utils/dateUtil';
109   - import { getEntitiesId } from '/@/api/dashboard/index';
110 109 // import CustomerTrend from './CustomerTrend.vue';
111 110 import TenantTrend from './TenantTrend.vue';
112 111 import CustomerAlarmMessage from './CustomerAlarmMessage.vue';
... ... @@ -158,8 +157,8 @@
158 157 const { send, close } = useWebSocket(state.server, {
159 158 async onConnected() {
160 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 162 const sendValue = JSON.stringify({
164 163 entityDataCmds: [
165 164 {
... ... @@ -243,7 +242,6 @@
243 242 }
244 243 } else {
245 244 if (data) {
246   - console.log('消息数', data);
247 245 if (data) {
248 246 const { transportDataPointsCountHourly, transportMsgCountHourly } =
249 247 data.data[0].latest.TIME_SERIES;
... ... @@ -259,9 +257,7 @@
259 257 transportDataPointsCountHourly?.ts,
260 258 transportDataPointsCountHourly?.value,
261 259 ]);
262   - console.log('state.dataPointList', state.dataPointList);
263 260 state.messageList.push([transportMsgCountHourly?.ts, transportMsgCountHourly?.value]);
264   - console.log('state.messageList', state.messageList);
265 261 }
266 262 }
267 263 if (update) {
... ... @@ -276,8 +272,6 @@
276 272 }
277 273 state.dataPointList = newArray;
278 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 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 2 <div class="p-4 md:flex">
3 3 <div class="md:w-7/10 w-full !mr-4 enter-y">
4 4 <GrowCard :loading="loading" class="enter-y" :role="role" />
5   - <PieChartDevice :loading="loading" class="enter-y" :role="role" />
6 5 <SiteAnalysisMessage class="!my-4 enter-y" :loading="loading" :role="role" />
7 6 <SiteAnalysis class="!my-4 enter-y" :loading="loading" :role="role" />
8 7 <div class="md:flex enter-y" v-if="!isAdmin(role)">
... ... @@ -22,7 +21,7 @@
22 21 </div>
23 22 </template>
24 23 <script lang="ts" setup>
25   - import { ref } from 'vue';
  24 + import { ref, onMounted } from 'vue';
26 25 import GrowCard from './components/GrowCard.vue';
27 26 import SiteAnalysis from './components/SiteAnalysis.vue';
28 27 import SiteAnalysisMessage from './components/SiteAnalysisMessage.vue';
... ... @@ -31,16 +30,27 @@
31 30 import { USER_INFO_KEY } from '/@/enums/cacheEnum';
32 31 import { getAuthCache } from '/@/utils/auth';
33 32 import { isAdmin } from '/@/enums/roleEnum';
34   - import PieChartDevice from './components/PieChartDevice.vue';
  33 + import { getEntitiesId } from '/@/api/dashboard/index';
35 34
36 35 defineExpose({
37 36 isAdmin,
38 37 });
39 38
40 39 const userInfo: any = getAuthCache(USER_INFO_KEY);
  40 +
41 41 const role: string = userInfo?.roles[0];
  42 +
42 43 const loading = ref(true);
  44 +
43 45 setTimeout(() => {
44 46 loading.value = false;
45 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 56 </script>
... ...