简柏林 / thingskit-front · Commits

Commit dd5ff901c81d71f44f065a11a9c968222304811c

Authored by xp.Huang
2 parents c31c3668 69a1cdb1

Merge branch 'local_dev_ft' into 'main' 

fix:修复组态设计和大屏设计器列表分页点击刷新请求两次问题，pref:优化首页饼图布局

See merge request yunteng/thingskit-front!508
Inline Side-by-side
Showing 7 changed files with 1007 additions and 804 deletions
1   -<script setup lang="ts">
2   - import { List, Card, Button, PaginationProps, Tooltip } from 'ant-design-vue';
3   - import { ReloadOutlined } from '@ant-design/icons-vue';
4   - import { computed, onMounted, reactive, ref, unref } from 'vue';
5   - import { OrganizationIdTree, useResetOrganizationTree } from '../../common/organizationIdTree';
6   - import {
7   - deleteConfigurationCenter,
8   - getPage,
9   - } from '/@/api/configuration/center/configurationCenter';
10   - import { ConfigurationCenterItemsModal } from '/@/api/configuration/center/model/configurationCenterModal';
11   - import { PageWrapper } from '/@/components/Page';
12   - import { BasicForm, useForm } from '/@/components/Form';
13   - import { ConfigurationPermission, searchFormSchema } from './center.data';
14   - import { useMessage } from '/@/hooks/web/useMessage';
15   - import { Authority } from '/@/components/Authority';
16   - import { isDevMode } from '/@/utils/env';
17   - import ConfigurationCenterDrawer from './ConfigurationCenterDrawer.vue';
18   - import { useDrawer } from '/@/components/Drawer';
19   - import { getBoundingClientRect } from '/@/utils/domUtils';
20   - import configurationSrc from '/@/assets/icons/configuration.svg';
21   - import { cloneDeep } from 'lodash';
22   - import { usePermission } from '/@/hooks/web/usePermission';
23   - import { useGlobSetting } from '/@/hooks/setting';
24   - import { AuthIcon, CardLayoutButton } from '/@/components/Widget';
25   - import AuthDropDown from '/@/components/Widget/AuthDropDown.vue';
26   -
27   - const listColumn = ref(5);
28   -
29   - const { createMessage } = useMessage();
30   -
31   - const organizationId = ref<Nullable<number>>(null);
32   -
33   - const pagination = reactive<PaginationProps>({
34   - size: 'small',
35   - showTotal: (total: number) => `共 ${total} 条数据`,
36   - current: 1,
37   - pageSize: unref(listColumn) * 2,
38   - onChange: (page: number) => {
39   - pagination.current = page;
40   - getListData();
41   - },
42   - });
43   -
44   - const loading = ref(false);
45   -
46   - const dataSource = ref<ConfigurationCenterItemsModal[]>([]);
47   -
48   - const [registerForm, { getFieldsValue }] = useForm({
49   - schemas: searchFormSchema,
50   - showAdvancedButton: true,
51   - labelWidth: 100,
52   - compact: true,
53   - resetFunc: () => {
54   - resetFn();
55   - organizationId.value = null;
56   - return getListData();
57   - },
58   - submitFunc: async () => {
59   - const value = getFieldsValue();
60   - getListData(value);
61   - },
62   - });
63   -
64   - async function getListData(value: Recordable = {}) {
65   - try {
66   - loading.value = true;
67   - const pageSize = unref(listColumn) * 2;
68   - const { items, total } = await getPage({
69   - organizationId: unref(organizationId),
70   - ...value,
71   - page: pagination.current!,
72   - pageSize,
73   - });
74   -
75   - dataSource.value = items;
76   - Object.assign(pagination, { total, pageSize });
77   - } catch (error) {
78   - } finally {
79   - loading.value = false;
80   - }
81   - }
82   -
83   - onMounted(() => {
84   - getListData();
85   - });
86   -
87   - const searchInfo = reactive<Recordable>({});
88   - const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
89   - const handleSelect = (orgId: number) => {
90   - organizationId.value = orgId;
91   - getListData();
92   - };
93   -
94   - const [registerDrawer, { openDrawer }] = useDrawer();
95   -
96   - const { hasPermission } = usePermission();
97   -
98   - const getPreviewFlag = computed(() => {
99   - return hasPermission(ConfigurationPermission.PREVIEW);
100   - });
101   -
102   - const getDesignFlag = computed(() => {
103   - return hasPermission(ConfigurationPermission.DESIGN);
104   - });
105   -
106   - const handleCreateOrUpdate = (record?: ConfigurationCenterItemsModal) => {
107   - if (record) {
108   - openDrawer(true, {
109   - isUpdate: true,
110   - record: cloneDeep(record),
111   - });
112   - } else {
113   - openDrawer(true, {
114   - isUpdate: false,
115   - });
116   - }
117   - };
118   -
119   - const { configurationPrefix } = useGlobSetting();
120   - const isDev = isDevMode();
121   -
122   - const handlePreview = (record: ConfigurationCenterItemsModal) => {
123   - if (!unref(getPreviewFlag)) return;
124   - window.open(
125   - `${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${record!.id}&lightbox=1`
126   - );
127   - };
128   -
129   - const handleDesign = (record: ConfigurationCenterItemsModal) => {
130   - if (!unref(getDesignFlag)) return;
131   - window.open(`${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${record!.id}`);
132   - };
133   -
134   - const handleDelete = async (record: ConfigurationCenterItemsModal) => {
135   - try {
136   - await deleteConfigurationCenter([record.id]);
137   - createMessage.success('删除成功');
138   - await getListData();
139   - } catch (error) {}
140   - };
141   -
142   - const handleCardLayoutChange = () => {
143   - pagination.current = 1;
144   - getListData();
145   - };
146   -
147   - const listEl = ref<Nullable<ComponentElRef>>(null);
148   -
149   - onMounted(() => {
150   - const clientHeight = document.documentElement.clientHeight;
151   - const rect = getBoundingClientRect(unref(listEl)!.$el!) as DOMRect;
152   - // margin-top 24 height 24
153   - const paginationHeight = 24 + 24 + 8;
154   - // list pading top 8 maring-top 8 extra slot 56
155   - const listContainerMarginBottom = 8 + 8 + 56;
156   - const listContainerHeight =
157   - clientHeight - rect.top - paginationHeight - listContainerMarginBottom;
158   - const listContainerEl = (unref(listEl)!.$el as HTMLElement).querySelector(
159   - '.ant-spin-container'
160   - ) as HTMLElement;
161   - listContainerEl &&
162   - (listContainerEl.style.height = listContainerHeight + 'px') &&
163   - (listContainerEl.style.overflowY = 'auto') &&
164   - (listContainerEl.style.overflowX = 'hidden');
165   - });
166   -</script>
167   -
168   -<template>
169   - <PageWrapper dense contentFullHeight contentClass="flex">
170   - <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" />
171   - <section class="flex-auto p-4 w-3/4 xl:w-4/5 w-full configuration-list">
172   - <div class="flex-auto w-full bg-light-50 dark:bg-dark-900 p-4">
173   - <BasicForm @register="registerForm" />
174   - </div>
175   - <List
176   - ref="listEl"
177   - :loading="loading"
178   - class="flex-auto bg-light-50 dark:bg-dark-900 !p-2 !mt-4"
179   - position="bottom"
180   - :pagination="pagination"
181   - :data-source="dataSource"
182   - :grid="{ gutter: 4, column: listColumn }"
183   - >
184   - <template #header>
185   - <div class="flex gap-3 justify-end">
186   - <Authority :value="ConfigurationPermission.CREATE">
187   - <Button type="primary" @click="handleCreateOrUpdate()">新增组态</Button>
188   - </Authority>
189   - <CardLayoutButton v-model:value="listColumn" @change="handleCardLayoutChange" />
190   - <Tooltip title="刷新">
191   - <Button type="primary" @click="getListData">
192   - <ReloadOutlined @click="getListData" />
193   - </Button>
194   - </Tooltip>
195   - </div>
196   - </template>
197   - <template #renderItem="{ item }">
198   - <List.Item>
199   - <Card hoverable>
200   - <template #cover>
201   - <div class="h-full w-full !flex justify-center items-center text-center p-1">
202   - <img
203   - class="w-full h-36"
204   - alt="example"
205   - :src="item.thumbnail || configurationSrc"
206   - @click="handlePreview(item)"
207   - />
208   - </div>
209   - </template>
210   - <template class="ant-card-actions" #actions>
211   - <Tooltip title="预览">
212   - <AuthIcon
213   - :auth="ConfigurationPermission.PREVIEW"
214   - class="!text-lg"
215   - icon="ant-design:eye-outlined"
216   - @click="handlePreview(item)"
217   - />
218   - </Tooltip>
219   - <Tooltip title="设计">
220   - <AuthIcon
221   - :auth="ConfigurationPermission.DESIGN"
222   - class="!text-lg"
223   - icon="ant-design:edit-outlined"
224   - @click="handleDesign(item)"
225   - />
226   - </Tooltip>
227   - <AuthDropDown
228   - :dropMenuList="[
229   - {
230   - text: '编辑',
231   - auth: ConfigurationPermission.UPDATE,
232   - icon: 'clarity:note-edit-line',
233   - event: '',
234   - onClick: handleCreateOrUpdate.bind(null, item),
235   - },
236   - {
237   - text: '删除',
238   - auth: ConfigurationPermission.DELETE,
239   - icon: 'ant-design:delete-outlined',
240   - event: '',
241   - popconfirm: {
242   - title: '是否确认删除操作?',
243   - onConfirm: handleDelete.bind(null, item),
244   - },
245   - },
246   - ]"
247   - :trigger="['hover']"
248   - />
249   - </template>
250   - <Card.Meta>
251   - <template #title>
252   - <span class="truncate">{{ item.name }}</span>
253   - </template>
254   - <template #description>
255   - <div class="truncate h-11">
256   - <div class="truncate">{{ item.organizationDTO.name }}</div>
257   - <div class="truncate">{{ item.remark || '' }} </div>
258   - </div>
259   - </template>
260   - </Card.Meta>
261   - </Card>
262   - </List.Item>
263   - </template>
264   - </List>
265   - </section>
266   - <ConfigurationCenterDrawer @register="registerDrawer" @success="getListData" />
267   - </PageWrapper>
268   -</template>
269   -
270   -<style lang="less" scoped>
271   - .configuration-list:deep(.ant-list-header) {
272   - border-bottom: none !important;
273   - }
274   -
275   - .configuration-list:deep(.ant-list-pagination) {
276   - height: 24px;
277   - }
278   -
279   - .configuration-list:deep(.ant-card-body) {
280   - padding: 16px !important;
281   - }
282   -
283   - .configuration-list:deep(.ant-list-empty-text) {
284   - @apply w-full h-full flex justify-center items-center;
285   - }
286   -</style>
  1 +<script setup lang="ts">
  2 + import { List, Card, Button, PaginationProps, Tooltip } from 'ant-design-vue';
  3 + import { ReloadOutlined } from '@ant-design/icons-vue';
  4 + import { computed, onMounted, reactive, ref, unref } from 'vue';
  5 + import { OrganizationIdTree, useResetOrganizationTree } from '../../common/organizationIdTree';
  6 + import {
  7 + deleteConfigurationCenter,
  8 + getPage,
  9 + } from '/@/api/configuration/center/configurationCenter';
  10 + import { ConfigurationCenterItemsModal } from '/@/api/configuration/center/model/configurationCenterModal';
  11 + import { PageWrapper } from '/@/components/Page';
  12 + import { BasicForm, useForm } from '/@/components/Form';
  13 + import { ConfigurationPermission, searchFormSchema } from './center.data';
  14 + import { useMessage } from '/@/hooks/web/useMessage';
  15 + import { Authority } from '/@/components/Authority';
  16 + import { isDevMode } from '/@/utils/env';
  17 + import ConfigurationCenterDrawer from './ConfigurationCenterDrawer.vue';
  18 + import { useDrawer } from '/@/components/Drawer';
  19 + import { getBoundingClientRect } from '/@/utils/domUtils';
  20 + import configurationSrc from '/@/assets/icons/configuration.svg';
  21 + import { cloneDeep } from 'lodash';
  22 + import { usePermission } from '/@/hooks/web/usePermission';
  23 + import { useGlobSetting } from '/@/hooks/setting';
  24 + import { AuthIcon, CardLayoutButton } from '/@/components/Widget';
  25 + import AuthDropDown from '/@/components/Widget/AuthDropDown.vue';
  26 +
  27 + const listColumn = ref(5);
  28 +
  29 + const { createMessage } = useMessage();
  30 +
  31 + const organizationId = ref<Nullable<number>>(null);
  32 +
  33 + const pagination = reactive<PaginationProps>({
  34 + size: 'small',
  35 + showTotal: (total: number) => `共 ${total} 条数据`,
  36 + current: 1,
  37 + pageSize: unref(listColumn) * 2,
  38 + onChange: (page: number) => {
  39 + pagination.current = page;
  40 + getListData();
  41 + },
  42 + });
  43 +
  44 + const loading = ref(false);
  45 +
  46 + const dataSource = ref<ConfigurationCenterItemsModal[]>([]);
  47 +
  48 + const [registerForm, { getFieldsValue }] = useForm({
  49 + schemas: searchFormSchema,
  50 + showAdvancedButton: true,
  51 + labelWidth: 100,
  52 + compact: true,
  53 + resetFunc: () => {
  54 + resetFn();
  55 + organizationId.value = null;
  56 + return getListData();
  57 + },
  58 + submitFunc: async () => {
  59 + const value = getFieldsValue();
  60 + getListData(value);
  61 + },
  62 + });
  63 +
  64 + async function getListData(value: Recordable = {}) {
  65 + try {
  66 + loading.value = true;
  67 + const pageSize = unref(listColumn) * 2;
  68 + const { items, total } = await getPage({
  69 + organizationId: unref(organizationId),
  70 + ...value,
  71 + page: pagination.current!,
  72 + pageSize,
  73 + });
  74 +
  75 + dataSource.value = items;
  76 + Object.assign(pagination, { total, pageSize });
  77 + } catch (error) {
  78 + } finally {
  79 + loading.value = false;
  80 + }
  81 + }
  82 +
  83 + onMounted(() => {
  84 + getListData();
  85 + });
  86 +
  87 + const searchInfo = reactive<Recordable>({});
  88 + const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
  89 + const handleSelect = (orgId: number) => {
  90 + organizationId.value = orgId;
  91 + getListData();
  92 + };
  93 +
  94 + const [registerDrawer, { openDrawer }] = useDrawer();
  95 +
  96 + const { hasPermission } = usePermission();
  97 +
  98 + const getPreviewFlag = computed(() => {
  99 + return hasPermission(ConfigurationPermission.PREVIEW);
  100 + });
  101 +
  102 + const getDesignFlag = computed(() => {
  103 + return hasPermission(ConfigurationPermission.DESIGN);
  104 + });
  105 +
  106 + const handleCreateOrUpdate = (record?: ConfigurationCenterItemsModal) => {
  107 + if (record) {
  108 + openDrawer(true, {
  109 + isUpdate: true,
  110 + record: cloneDeep(record),
  111 + });
  112 + } else {
  113 + openDrawer(true, {
  114 + isUpdate: false,
  115 + });
  116 + }
  117 + };
  118 +
  119 + const { configurationPrefix } = useGlobSetting();
  120 + const isDev = isDevMode();
  121 +
  122 + const handlePreview = (record: ConfigurationCenterItemsModal) => {
  123 + if (!unref(getPreviewFlag)) return;
  124 + window.open(
  125 + `${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${record!.id}&lightbox=1`
  126 + );
  127 + };
  128 +
  129 + const handleDesign = (record: ConfigurationCenterItemsModal) => {
  130 + if (!unref(getDesignFlag)) return;
  131 + window.open(`${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${record!.id}`);
  132 + };
  133 +
  134 + const handleDelete = async (record: ConfigurationCenterItemsModal) => {
  135 + try {
  136 + await deleteConfigurationCenter([record.id]);
  137 + createMessage.success('删除成功');
  138 + await getListData();
  139 + } catch (error) {}
  140 + };
  141 +
  142 + const handleCardLayoutChange = () => {
  143 + pagination.current = 1;
  144 + getListData();
  145 + };
  146 +
  147 + const listEl = ref<Nullable<ComponentElRef>>(null);
  148 +
  149 + onMounted(() => {
  150 + const clientHeight = document.documentElement.clientHeight;
  151 + const rect = getBoundingClientRect(unref(listEl)!.$el!) as DOMRect;
  152 + // margin-top 24 height 24
  153 + const paginationHeight = 24 + 24 + 8;
  154 + // list pading top 8 maring-top 8 extra slot 56
  155 + const listContainerMarginBottom = 8 + 8 + 56;
  156 + const listContainerHeight =
  157 + clientHeight - rect.top - paginationHeight - listContainerMarginBottom;
  158 + const listContainerEl = (unref(listEl)!.$el as HTMLElement).querySelector(
  159 + '.ant-spin-container'
  160 + ) as HTMLElement;
  161 + listContainerEl &&
  162 + (listContainerEl.style.height = listContainerHeight + 'px') &&
  163 + (listContainerEl.style.overflowY = 'auto') &&
  164 + (listContainerEl.style.overflowX = 'hidden');
  165 + });
  166 +</script>
  167 +
  168 +<template>
  169 + <PageWrapper dense contentFullHeight contentClass="flex">
  170 + <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" />
  171 + <section class="flex-auto p-4 w-3/4 xl:w-4/5 w-full configuration-list">
  172 + <div class="flex-auto w-full bg-light-50 dark:bg-dark-900 p-4">
  173 + <BasicForm @register="registerForm" />
  174 + </div>
  175 + <List
  176 + ref="listEl"
  177 + :loading="loading"
  178 + class="flex-auto bg-light-50 dark:bg-dark-900 !p-2 !mt-4"
  179 + position="bottom"
  180 + :pagination="pagination"
  181 + :data-source="dataSource"
  182 + :grid="{ gutter: 4, column: listColumn }"
  183 + >
  184 + <template #header>
  185 + <div class="flex gap-3 justify-end">
  186 + <Authority :value="ConfigurationPermission.CREATE">
  187 + <Button type="primary" @click="handleCreateOrUpdate()">新增组态</Button>
  188 + </Authority>
  189 + <CardLayoutButton v-model:value="listColumn" @change="handleCardLayoutChange" />
  190 + <Tooltip title="刷新">
  191 + <Button type="primary" @click="getListData">
  192 + <ReloadOutlined />
  193 + </Button>
  194 + </Tooltip>
  195 + </div>
  196 + </template>
  197 + <template #renderItem="{ item }">
  198 + <List.Item>
  199 + <Card hoverable>
  200 + <template #cover>
  201 + <div class="h-full w-full !flex justify-center items-center text-center p-1">
  202 + <img
  203 + class="w-full h-36"
  204 + alt="example"
  205 + :src="item.thumbnail || configurationSrc"
  206 + @click="handlePreview(item)"
  207 + />
  208 + </div>
  209 + </template>
  210 + <template class="ant-card-actions" #actions>
  211 + <Tooltip title="预览">
  212 + <AuthIcon
  213 + :auth="ConfigurationPermission.PREVIEW"
  214 + class="!text-lg"
  215 + icon="ant-design:eye-outlined"
  216 + @click="handlePreview(item)"
  217 + />
  218 + </Tooltip>
  219 + <Tooltip title="设计">
  220 + <AuthIcon
  221 + :auth="ConfigurationPermission.DESIGN"
  222 + class="!text-lg"
  223 + icon="ant-design:edit-outlined"
  224 + @click="handleDesign(item)"
  225 + />
  226 + </Tooltip>
  227 + <AuthDropDown
  228 + :dropMenuList="[
  229 + {
  230 + text: '编辑',
  231 + auth: ConfigurationPermission.UPDATE,
  232 + icon: 'clarity:note-edit-line',
  233 + event: '',
  234 + onClick: handleCreateOrUpdate.bind(null, item),
  235 + },
  236 + {
  237 + text: '删除',
  238 + auth: ConfigurationPermission.DELETE,
  239 + icon: 'ant-design:delete-outlined',
  240 + event: '',
  241 + popconfirm: {
  242 + title: '是否确认删除操作?',
  243 + onConfirm: handleDelete.bind(null, item),
  244 + },
  245 + },
  246 + ]"
  247 + :trigger="['hover']"
  248 + />
  249 + </template>
  250 + <Card.Meta>
  251 + <template #title>
  252 + <span class="truncate">{{ item.name }}</span>
  253 + </template>
  254 + <template #description>
  255 + <div class="truncate h-11">
  256 + <div class="truncate">{{ item.organizationDTO.name }}</div>
  257 + <div class="truncate">{{ item.remark || '' }} </div>
  258 + </div>
  259 + </template>
  260 + </Card.Meta>
  261 + </Card>
  262 + </List.Item>
  263 + </template>
  264 + </List>
  265 + </section>
  266 + <ConfigurationCenterDrawer @register="registerDrawer" @success="getListData" />
  267 + </PageWrapper>
  268 +</template>
  269 +
  270 +<style lang="less" scoped>
  271 + .configuration-list:deep(.ant-list-header) {
  272 + border-bottom: none !important;
  273 + }
  274 +
  275 + .configuration-list:deep(.ant-list-pagination) {
  276 + height: 24px;
  277 + }
  278 +
  279 + .configuration-list:deep(.ant-card-body) {
  280 + padding: 16px !important;
  281 + }
  282 +
  283 + .configuration-list:deep(.ant-list-empty-text) {
  284 + @apply w-full h-full flex justify-center items-center;
  285 + }
  286 +</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   - >
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 + <a-row type="flex" justify="space-between" align="middle">
  217 + <a-col :span="12">
  218 + <PieChartDeviceSub
  219 + v-if="seriesData.length > 0"
  220 + :legendData="legendData"
  221 + :seriesData="seriesData"
  222 + :isCircle="false"
  223 + /></a-col>
  224 + <a-col :span="12">
  225 + <a-row type="flex" justify="space-between" align="middle" style="row-gap: 30px">
  226 + <a-col :offset="8" class="flex items-center">
  227 + <span class="left-icon-d-color"></span>
  228 + 直连设备：
  229 + <span class="bold-text">{{ growCardList?.deviceInfo?.directConnection ?? 0 }}</span
  230 + >个</a-col
  231 + >
  232 + <a-col :offset="8" class="flex items-center">
  233 + <span class="left-icon-g-color"></span>
  234 + 网关设备：
  235 + <span class="bold-text">{{ growCardList?.deviceInfo?.gateWay ?? 0 }}</span
  236 + >个</a-col
  237 + >
  238 + <a-col :offset="8" class="flex items-center">
  239 + <span class="left-icon-s-color"></span>
  240 + 网关子设备：<span class="bold-text">{{
  241 + growCardList?.deviceInfo?.sensor ?? 0
  242 + }}</span
  243 + >个</a-col
  244 + >
  245 + </a-row>
  246 + </a-col>
  247 + </a-row>
  248 + </Card>
  249 + <Card
  250 + size="small"
  251 + class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:ml-1"
  252 + style="color: #666; width: 50%"
  253 + title="设备状态统计"
  254 + >
  255 + <a-row type="flex" justify="space-between" align="middle">
  256 + <a-col :span="12">
  257 + <PieChartDeviceStatus
  258 + v-if="seriesStatusData.length > 0"
  259 + :seriesStatusData="seriesStatusData"
  260 + />
  261 + <div class="empty-box" v-else><Empty :image="Empty.PRESENTED_IMAGE_SIMPLE" /></div>
  262 + </a-col>
  263 + <a-col :span="12">
  264 + <a-row type="flex" justify="space-between" align="middle" style="row-gap: 30px">
  265 + <a-col :offset="8" class="flex items-center">
  266 + <span class="right-icon-d-color"></span>
  267 + 待激活设备：
  268 + <span class="bold-text">{{ growCardList?.deviceInfo?.inActive ?? 0 }}</span
  269 + >个</a-col
  270 + >
  271 + <a-col :offset="8" class="flex items-center">
  272 + <span class="right-icon-g-color"></span>
  273 + 在线设备：<span class="bold-text">{{ growCardList?.deviceInfo?.onLine ?? 0 }}</span
  274 + >个</a-col
  275 + >
  276 + <a-col :offset="8" class="flex items-center">
  277 + <span class="right-icon-s-color"></span>
  278 + 离线设备：<span class="bold-text">{{ growCardList?.deviceInfo?.offLine ?? 0 }}</span
  279 + >个</a-col
  280 + >
  281 + </a-row>
  282 + </a-col>
  283 + </a-row>
  284 + </Card>
  285 + </div>
  286 + </div>
  287 +</template>
  288 +<script lang="ts" setup>
  289 + import { ref, onMounted, defineComponent, Ref } from 'vue';
  290 + import { Card } from 'ant-design-vue';
  291 + import { getHomeData } from '/@/api/dashboard';
  292 + import { isAdmin } from '/@/enums/roleEnum';
  293 + import { toThousands } from '/@/utils/fnUtils';
  294 + import { CountTo } from '/@/components/CountTo/index';
  295 + import { Tooltip } from 'ant-design-vue';
  296 + import { CardList, seriesDataT } from './props';
  297 + import PieChartDeviceSub from './PieChartDeviceSub.vue';
  298 + import PieChartDeviceStatus from './PieChartDeviceStatus.vue';
  299 + import { Empty } from 'ant-design-vue';
  300 +
  301 + defineProps<{
  302 + role: string;
  303 + }>();
  304 +
  305 + defineExpose({
  306 + isAdmin,
  307 + toThousands,
  308 + });
  309 +
  310 + defineComponent({
  311 + Card,
  312 + });
  313 +
  314 + const legendData = ref(['网关设备', '直连设备', '网关子设备']);
  315 +
  316 + const seriesData: Ref<seriesDataT[]> = ref([]);
  317 +
  318 + const seriesStatusData: Ref<seriesDataT[]> = ref([]);
  319 +
  320 + const growCardList = ref<CardList>();
  321 +
  322 + const devicePieColor = [
  323 + { key: 'directConnection', itemStyle: { color: '#5C7BD9' }, value: '直连设备' },
  324 + { key: 'gateWay', itemStyle: { color: '#91CC75' }, value: '网关设备' },
  325 + { key: 'sensor', itemStyle: { color: '#FAC859' }, value: '网关子设备' },
  326 + { key: 'inActive', itemStyle: { color: '#5C7BD9' }, value: '待激活' },
  327 + { key: 'onLine', itemStyle: { color: '#91CC75 ' }, value: '在线' },
  328 + { key: 'offLine', itemStyle: { color: '#EC4040' }, value: '离线' },
  329 + ];
  330 +
  331 + onMounted(async () => {
  332 + const res = await getHomeData();
  333 + growCardList.value = res;
  334 + const { deviceInfo } = growCardList.value!;
  335 + let data = Object.entries(deviceInfo).map(([key, value]) => {
  336 + const name = devicePieColor?.find((f) => f.key === key)?.value;
  337 + const itemStyle = devicePieColor?.find((f) => f.key === key)?.itemStyle;
  338 + return { key, value, itemStyle, name };
  339 + });
  340 + seriesData.value = data.filter(
  341 + (f) => f.key === 'directConnection' || f.key === 'gateWay' || f.key === 'sensor'
  342 + );
  343 + seriesStatusData.value = data.filter(
  344 + (f) => f.key === 'inActive' || f.key === 'onLine' || f.key === 'offLine'
  345 + );
  346 + });
  347 +</script>
  348 +<style lang="less">
  349 + .text {
  350 + color: #333;
  351 + display: flex;
  352 + flex-wrap: nowrap;
  353 + }
  354 +
  355 + .bold-text {
  356 + font-weight: bold;
  357 + }
  358 +
  359 + .base-left-icon-color {
  360 + border-radius: 50%;
  361 + width: 0.75rem;
  362 + height: 0.75rem;
  363 + display: block;
  364 + position: relative;
  365 + right: 0.5rem;
  366 + }
  367 +
  368 + .left-icon-d-color :extend(.base-left-icon-color) {
  369 + background-color: #5c7bd9 !important;
  370 + }
  371 + .left-icon-g-color :extend(.base-left-icon-color) {
  372 + background-color: #91cc75 !important;
  373 + }
  374 + .left-icon-s-color :extend(.base-left-icon-color) {
  375 + background-color: #fac859 !important;
  376 + }
  377 + .right-icon-d-color :extend(.base-left-icon-color) {
  378 + background-color: #5c7bd9;
  379 + }
  380 + .right-icon-g-color :extend(.base-left-icon-color) {
  381 + background-color: #91cc75;
  382 + }
  383 + .right-icon-s-color :extend(.base-left-icon-color) {
  384 + background-color: #ec4040;
  385 + }
  386 +</style>
... ...
  1 +<template>
  2 + <a-row type="flex" justify="space-between" align="middle">
  3 + <a-col
  4 + class="flex items-center"
  5 + v-for="(item, index) in seriesStatusData"
  6 + :key="index"
  7 + :span="8"
  8 + >
  9 + <a-col
  10 + :id="`chartPie${item.key}`"
  11 + style="width: 10rem; height: 12rem; position: relative; top: -0.7rem"
  12 + />
  13 + </a-col>
  14 + </a-row>
  15 +</template>
  16 +<script lang="ts">
  17 + import {
  18 + defineComponent,
  19 + PropType,
  20 + onMounted,
  21 + toRefs,
  22 + shallowReactive,
  23 + onUnmounted,
  24 + nextTick,
  25 + } from 'vue';
  26 + import * as echarts from 'echarts';
  27 + import { seriesDataT } from './props';
  28 +
  29 + export default defineComponent({
  30 + props: {
  31 + seriesStatusData: {
  32 + type: Array as PropType<seriesDataT[]>,
  33 + default: () => [],
  34 + },
  35 + },
  36 +
  37 + setup(props) {
  38 + const chartsInstance = shallowReactive<{ [key: string]: echarts.ECharts }>({});
  39 +
  40 + const { seriesStatusData } = toRefs(props);
  41 +
  42 + const total = seriesStatusData.value
  43 + .map((m) => m.value)
  44 + .reduce((prev, cur) => prev! + cur!, 0);
  45 +
  46 + nextTick(() => {
  47 + for (const item of seriesStatusData.value) {
  48 + const { key, value } = item;
  49 + //牵引线条颜色
  50 + const labelLine = {
  51 + normal: {
  52 + show: true,
  53 + length: 20,
  54 + length2: 20,
  55 + lineStyle: {
  56 + color: '#808080',
  57 + },
  58 + },
  59 + } as any;
  60 + const legendKey = key == 'onLine' ? '在线' : key == 'offLine' ? '离线' : '待激活';
  61 + chartsInstance[key!] = echarts.init(
  62 + document.getElementById(`chartPie${key}`) as HTMLElement
  63 + );
  64 + const option = {
  65 + backgroundColor: '#ffffff',
  66 + tooltip: {
  67 + trigger: 'item',
  68 + formatter: `${legendKey}设备${((value! / total!) * 100).toFixed(2)}%`,
  69 + },
  70 + graphic: [
  71 + {
  72 + type: 'text',
  73 + left: '42%',
  74 + top: '48%',
  75 + z: 10,
  76 + style: {
  77 + fill: '#1a1a1a',
  78 + text: value + '个',
  79 + font: '1.25vh Microsoft YaHei',
  80 + },
  81 + },
  82 + ],
  83 + series: [
  84 + {
  85 + data: [item],
  86 + avoidLabelOverlap: false,
  87 + type: 'pie',
  88 + radius: ['40%', '60%'],
  89 + label: {
  90 + normal: {
  91 + show: true,
  92 + position: 'outer',
  93 + formatter: `${legendKey}${((value! / total!) * 100).toFixed(2)}%`,
  94 + borderWidth: 5,
  95 + borderRadius: 0,
  96 + padding: [90, -60],
  97 + },
  98 + },
  99 + labelLine,
  100 + },
  101 + ],
  102 + };
  103 + chartsInstance[key!].setOption(option);
  104 + }
  105 + });
  106 +
  107 + const resize = (flag) => {
  108 + Object.keys(chartsInstance).forEach((key) => {
  109 + const doFuncKey = chartsInstance[key];
  110 + flag === 'r' ? doFuncKey.resize() : doFuncKey.dispose();
  111 + });
  112 + };
  113 +
  114 + onMounted(() => {
  115 + window.addEventListener('resize', () => resize('r'));
  116 + });
  117 +
  118 + onUnmounted(() => {
  119 + window.removeEventListener('resize', () => resize('d'));
  120 + });
  121 + },
  122 + });
  123 +</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 + series: [
  60 + {
  61 + avoidLabelOverlap: false,
  62 + type: 'pie',
  63 + radius: props.isCircle ? '60%' : ['40%', '60%'],
  64 + data: dataSeries.value,
  65 + emphasis: {
  66 + itemStyle: {
  67 + shadowBlur: 10,
  68 + shadowOffsetX: 0,
  69 + shadowColor: 'rgba(0, 0, 0, 0.5)',
  70 + },
  71 + },
  72 + labelLine,
  73 + },
  74 + ],
  75 + });
  76 + //自适应
  77 + window.addEventListener('resize', () => resize());
  78 + });
  79 + return { chartRef, Empty, dataSeries };
  80 + },
  81 + });
  82 +</script>
  83 +
  84 +<style>
  85 + .empty-box {
  86 + display: flex;
  87 + align-items: center;
  88 + margin: 0 120px;
  89 + }
  90 +</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 +};
... ...
... ... @@ -86,20 +86,20 @@ export const formSchema: FormSchema[] = [
86 86 },
87 87 },
88 88 },
89   - {
90   - field: 'state',
91   - label: '发布状态',
92   - required: true,
93   - component: 'RadioGroup',
94   - defaultValue: Platform.PC,
95   - componentProps: {
96   - defaultValue: Platform.PC,
97   - options: [
98   - { label: '未发布', value: Platform.PC },
99   - { label: '已发布', value: Platform.PHONE },
100   - ],
101   - },
102   - },
  89 + // {
  90 + // field: 'state',
  91 + // label: '发布状态',
  92 + // required: true,
  93 + // component: 'RadioGroup',
  94 + // defaultValue: Platform.PC,
  95 + // componentProps: {
  96 + // defaultValue: Platform.PC,
  97 + // options: [
  98 + // { label: '未发布', value: Platform.PC },
  99 + // { label: '已发布', value: Platform.PHONE },
  100 + // ],
  101 + // },
  102 + // },
103 103 {
104 104 field: 'remark',
105 105 label: '备注',
... ...
... ... @@ -169,22 +169,35 @@
169 169 <CardLayoutButton v-model:value="listColumn" @change="handleCardLayoutChange" />
170 170 <Tooltip title="刷新">
171 171 <Button type="primary" @click="getListData">
172   - <ReloadOutlined @click="getListData" />
  172 + <ReloadOutlined />
173 173 </Button>
174 174 </Tooltip>
175 175 </div>
176 176 </template>
177 177 <template #renderItem="{ item }">
178 178 <List.Item>
179   - <Card hoverable>
  179 + <Card>
180 180 <template #cover>
181   - <div class="h-full w-full !flex justify-center items-center text-center p-1">
  181 + <div class="h-full w-full hover-show-modal-content">
182 182 <img
183   - class="w-full h-36"
  183 + style="position: relative"
  184 + class="w-full h-45 hover-show-modal"
184 185 alt="example"
185 186 :src="item.thumbnail || configurationSrc"
186 187 @click="handlePreview(item)"
187 188 />
  189 + <div class="masker-content">
  190 + <div class="masker-text">
  191 + <div
  192 + ><span>{{ item.name }}</span></div
  193 + >
  194 + <div>
  195 + <span class="masker-text-org"
  196 + >所属组织：{{ item.organizationDTO.name }}</span
  197 + >
  198 + </div>
  199 + </div>
  200 + </div>
188 201 </div>
189 202 </template>
190 203 <template class="ant-card-actions" #actions>
... ... @@ -225,17 +238,6 @@
225 238 :trigger="['hover']"
226 239 />
227 240 </template>
228   - <Card.Meta>
229   - <template #title>
230   - <span class="truncate">{{ item.name }}</span>
231   - </template>
232   - <template #description>
233   - <div class="truncate h-11">
234   - <div class="truncate">{{ item.organizationDTO.name }}</div>
235   - <div class="truncate">{{ item.remark || '' }} </div>
236   - </div>
237   - </template>
238   - </Card.Meta>
239 241 </Card>
240 242 </List.Item>
241 243 </template>
... ... @@ -261,4 +263,45 @@
261 263 .configuration-list:deep(.ant-list-empty-text) {
262 264 @apply w-full h-full flex justify-center items-center;
263 265 }
  266 +
  267 + :deep(.ant-card-body) {
  268 + display: none;
  269 + }
  270 +
  271 + .masker-content {
  272 + opacity: 0;
  273 + z-index: 1000;
  274 + width: 100%;
  275 + height: 11.25rem;
  276 + background-color: rgba(0, 0, 0, 0.5);
  277 + position: absolute;
  278 + transition: opacity 0.5;
  279 + pointer-events: none;
  280 + top: 0;
  281 + left: 0;
  282 + right: 0;
  283 + bottom: 0;
  284 +
  285 + .masker-text {
  286 + color: #fff;
  287 + font-size: 16px;
  288 + display: flex;
  289 + flex-direction: column;
  290 + align-items: center;
  291 + justify-content: center;
  292 + line-height: 2.5rem;
  293 + margin: 4rem 0;
  294 +
  295 + .masker-text-org {
  296 + font-size: 12px;
  297 + position: absolute;
  298 + bottom: 0;
  299 + left: 0.8rem;
  300 + }
  301 + }
  302 + }
  303 +
  304 + .hover-show-modal-content:hover > .masker-content {
  305 + opacity: 1;
  306 + }
264 307 </style>
... ...