简柏林 / thingskit-front · Commits

Commit d4c3666a508a914ea0a37c0d1bd3a4dbc41d4ae2

Authored by ww
1 parent 49db5844

perf: optimize the code

Inline Side-by-side
Showing 7 changed files with 41 additions and 27 deletions
@@ -3,8 +3,11 @@ @@ -3,8 +3,11 @@
3 import { DropMenu } from '/@/components/Dropdown'; 3 import { DropMenu } from '/@/components/Dropdown';
4 import Dropdown from '/@/components/Dropdown/src/Dropdown.vue'; 4 import Dropdown from '/@/components/Dropdown/src/Dropdown.vue';
5 import { Tooltip } from 'ant-design-vue'; 5 import { Tooltip } from 'ant-design-vue';
6 - // import SvgIcon from '/@/components/Icon/src/SvgIcon.vue';  
7 - import { isBataBoardSharePage, MoreActionEvent } from '../../config/config'; 6 + import {
  7 + isBataBoardSharePage,
  8 + MoreActionEvent,
  9 + VisualComponentPermission,
  10 + } from '../../config/config';
8 import { computed } from '@vue/reactivity'; 11 import { computed } from '@vue/reactivity';
9 import { usePermission } from '/@/hooks/web/usePermission'; 12 import { usePermission } from '/@/hooks/web/usePermission';
10 import { DataSource } from '/@/api/dataBoard/model'; 13 import { DataSource } from '/@/api/dataBoard/model';
@@ -19,9 +22,9 @@ @@ -19,9 +22,9 @@
19 const { hasPermission } = usePermission(); 22 const { hasPermission } = usePermission();
20 const dropMenuList = computed<DropMenu[]>(() => { 23 const dropMenuList = computed<DropMenu[]>(() => {
21 const basicMenu: DropMenu[] = []; 24 const basicMenu: DropMenu[] = [];
22 - const hasUpdatePermission = hasPermission('api:yt:data_component:update:update');  
23 - const hasDeletePermission = hasPermission('api:yt:data_component:delete');  
24 - const hasCopyPermission = hasPermission('api:yt:dataBoardDetail:copy'); 25 + const hasUpdatePermission = hasPermission(VisualComponentPermission.UPDATE);
  26 + const hasDeletePermission = hasPermission(VisualComponentPermission.DELETE);
  27 + const hasCopyPermission = hasPermission(VisualComponentPermission.COPY);
25 if (hasUpdatePermission) 28 if (hasUpdatePermission)
26 basicMenu.push({ 29 basicMenu.push({
27 text: '编辑组件', 30 text: '编辑组件',
@@ -69,7 +72,6 @@ @@ -69,7 +72,6 @@
69 > 72 >
70 <Tooltip :title="item.deviceName" placement="topLeft"> 73 <Tooltip :title="item.deviceName" placement="topLeft">
71 <div class="flex p-1"> 74 <div class="flex p-1">
72 - <!-- <SvgIcon name="" prefix="iconfont" class="!fill-emerald-400" /> -->  
73 <div class="truncate font-bold">{{ item.deviceRename || item.deviceName }}</div> 75 <div class="truncate font-bold">{{ item.deviceRename || item.deviceName }}</div>
74 </div> 76 </div>
75 </Tooltip> 77 </Tooltip>
@@ -2,8 +2,6 @@ @@ -2,8 +2,6 @@
2 import { useSlots } from 'vue'; 2 import { useSlots } from 'vue';
3 import { useUpdateCenter } from '../../hook/useUpdateCenter'; 3 import { useUpdateCenter } from '../../hook/useUpdateCenter';
4 import { FrontDataSourceRecord } from '../../types/type'; 4 import { FrontDataSourceRecord } from '../../types/type';
5 - // import type { WidgetWrapperRegister } from './type';  
6 - // import { DataSource } from '/@/api/dataBoard/model';  
7 5
8 const props = defineProps<{ 6 const props = defineProps<{
9 dataSource: FrontDataSourceRecord[]; 7 dataSource: FrontDataSourceRecord[];
@@ -61,14 +59,14 @@ @@ -61,14 +59,14 @@
61 height: 100%; 59 height: 100%;
62 background-color: #fff; 60 background-color: #fff;
63 border-radius: 3px; 61 border-radius: 3px;
64 - box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.1); 62 + box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1);
65 } 63 }
  64 +
66 .widget-content { 65 .widget-content {
67 display: flex; 66 display: flex;
68 flex-wrap: wrap; 67 flex-wrap: wrap;
69 justify-content: center; 68 justify-content: center;
70 align-items: center; 69 align-items: center;
71 -  
72 width: 100%; 70 width: 100%;
73 height: 100%; 71 height: 100%;
74 } 72 }
1 -// import { DataBoardLayoutInfo } from '../../types/type';  
2 -  
3 -// export type WidgetWrapperRegister = (dataSource: DataBoardLayoutInfo['record'][]) => any;  
@@ -4,7 +4,19 @@ export enum MoreActionEvent { @@ -4,7 +4,19 @@ export enum MoreActionEvent {
4 DELETE = 'delete', 4 DELETE = 'delete',
5 } 5 }
6 6
7 -// export enum 7 +export enum VisualBoardPermission {
  8 + UPDATE = 'api:yt:data_board:update:update',
  9 + DELETE = 'api:yt:data_board:delete',
  10 + CREATE = '',
  11 + DETAIL = 'api:yt:data_component:list',
  12 +}
  13 +
  14 +export enum VisualComponentPermission {
  15 + UPDATE = 'api:yt:data_component:update:update',
  16 + DELETE = 'api:yt:data_component:delete',
  17 + COPY = 'api:yt:dataBoardDetail:copy',
  18 + CREATE = 'api:yt:data_component:add:post',
  19 +}
8 20
9 export const DEFAULT_MAX_COL = 24; 21 export const DEFAULT_MAX_COL = 24;
10 export const DEFAULT_WIDGET_WIDTH = 6; 22 export const DEFAULT_WIDGET_WIDTH = 6;
@@ -16,6 +16,7 @@ @@ -16,6 +16,7 @@
16 DEFAULT_WIDGET_WIDTH, 16 DEFAULT_WIDGET_WIDTH,
17 isBataBoardSharePage, 17 isBataBoardSharePage,
18 MoreActionEvent, 18 MoreActionEvent,
  19 + VisualComponentPermission,
19 } from '../config/config'; 20 } from '../config/config';
20 import { 21 import {
21 addDataComponent, 22 addDataComponent,
@@ -391,7 +392,7 @@ @@ -391,7 +392,7 @@
391 </div> 392 </div>
392 </template> 393 </template>
393 <template #extra> 394 <template #extra>
394 - <Authority value="api:yt:data_component:add:post"> 395 + <Authority :value="VisualComponentPermission.CREATE">
395 <Button v-if="!getIsSharePage" type="primary" @click="handleOpenCreatePanel"> 396 <Button v-if="!getIsSharePage" type="primary" @click="handleOpenCreatePanel">
396 创建组件 397 创建组件
397 </Button> 398 </Button>
@@ -439,7 +440,6 @@ @@ -439,7 +440,6 @@
439 :data-source="item.record.dataSource" 440 :data-source="item.record.dataSource"
440 > 441 >
441 <template #header> 442 <template #header>
442 - <!-- <div>header</div> -->  
443 <BaseWidgetHeader 443 <BaseWidgetHeader
444 :record="item.record.dataSource" 444 :record="item.record.dataSource"
445 :id="item.record.id" 445 :id="item.record.id"
@@ -448,11 +448,6 @@ @@ -448,11 +448,6 @@
448 > 448 >
449 <template #moreAction> 449 <template #moreAction>
450 <Tooltip title="趋势"> 450 <Tooltip title="趋势">
451 - <!-- <LineChartOutlined  
452 - v-if="!getIsSharePage"  
453 - class="cursor-pointer mx-1"  
454 - @click="handleOpenHistroyDataModal(item.record.dataSource)"  
455 - /> -->  
456 <img 451 <img
457 :src="trendIcon" 452 :src="trendIcon"
458 v-if="!getIsSharePage" 453 v-if="!getIsSharePage"
@@ -494,14 +489,18 @@ @@ -494,14 +489,18 @@
494 .vue-grid-item:not(.vue-grid-placeholder) { 489 .vue-grid-item:not(.vue-grid-placeholder) {
495 background: #fff; 490 background: #fff;
496 border: none !important; 491 border: none !important;
  492 +
497 /* border: 1px solid black; */ 493 /* border: 1px solid black; */
498 } 494 }
  495 +
499 .vue-grid-item .resizing { 496 .vue-grid-item .resizing {
500 opacity: 0.9; 497 opacity: 0.9;
501 } 498 }
  499 +
502 .vue-grid-item .static { 500 .vue-grid-item .static {
503 background: #cce; 501 background: #cce;
504 } 502 }
  503 +
505 .vue-grid-item .text { 504 .vue-grid-item .text {
506 font-size: 24px; 505 font-size: 24px;
507 text-align: center; 506 text-align: center;
@@ -514,16 +513,20 @@ @@ -514,16 +513,20 @@
514 height: 100%; 513 height: 100%;
515 width: 100%; 514 width: 100%;
516 } 515 }
  516 +
517 .vue-grid-item .no-drag { 517 .vue-grid-item .no-drag {
518 height: 100%; 518 height: 100%;
519 width: 100%; 519 width: 100%;
520 } 520 }
  521 +
521 .vue-grid-item .minMax { 522 .vue-grid-item .minMax {
522 font-size: 12px; 523 font-size: 12px;
523 } 524 }
  525 +
524 .vue-grid-item .add { 526 .vue-grid-item .add {
525 cursor: pointer; 527 cursor: pointer;
526 } 528 }
  529 +
527 .vue-draggable-handle { 530 .vue-draggable-handle {
528 position: absolute; 531 position: absolute;
529 width: 20px; 532 width: 20px;
@@ -8,6 +8,10 @@ interface GapRecord { @@ -8,6 +8,10 @@ interface GapRecord {
8 endIndex: Nullable<number>; 8 endIndex: Nullable<number>;
9 } 9 }
10 10
  11 +/**
  12 + * @description calculate where to place the component
  13 + * @returns
  14 + */
11 export function useCalcGridLayout() { 15 export function useCalcGridLayout() {
12 const calcLayoutInfo = ( 16 const calcLayoutInfo = (
13 layoutInfo: Layout[], 17 layoutInfo: Layout[],
@@ -7,7 +7,7 @@ @@ -7,7 +7,7 @@
7 import { useMessage } from '/@/hooks/web/useMessage'; 7 import { useMessage } from '/@/hooks/web/useMessage';
8 import Dropdown from '/@/components/Dropdown/src/Dropdown.vue'; 8 import Dropdown from '/@/components/Dropdown/src/Dropdown.vue';
9 import { DropMenu } from '/@/components/Dropdown'; 9 import { DropMenu } from '/@/components/Dropdown';
10 - import { DATA_BOARD_SHARE_URL, MoreActionEvent } from './config/config'; 10 + import { DATA_BOARD_SHARE_URL, MoreActionEvent, VisualBoardPermission } from './config/config';
11 import { useModal } from '/@/components/Modal'; 11 import { useModal } from '/@/components/Modal';
12 import PanelDetailModal from './components/PanelDetailModal.vue'; 12 import PanelDetailModal from './components/PanelDetailModal.vue';
13 import { getDataBoardList, deleteDataBoard } from '/@/api/dataBoard'; 13 import { getDataBoardList, deleteDataBoard } from '/@/api/dataBoard';
@@ -90,8 +90,8 @@ @@ -90,8 +90,8 @@
90 90
91 const { hasPermission } = usePermission(); 91 const { hasPermission } = usePermission();
92 const dropMenuList = computed<DropMenu[]>(() => { 92 const dropMenuList = computed<DropMenu[]>(() => {
93 - const hasUpdatePermission = hasPermission('api:yt:data_board:update:update');  
94 - const hasDeletePermission = hasPermission('api:yt:data_board:delete'); 93 + const hasUpdatePermission = hasPermission(VisualBoardPermission.UPDATE);
  94 + const hasDeletePermission = hasPermission(VisualBoardPermission.DELETE);
95 const basicMenu: DropMenu[] = []; 95 const basicMenu: DropMenu[] = [];
96 if (hasUpdatePermission) 96 if (hasUpdatePermission)
97 basicMenu.push({ 97 basicMenu.push({
@@ -160,7 +160,7 @@ @@ -160,7 +160,7 @@
160 const [registerModal, { openModal }] = useModal(); 160 const [registerModal, { openModal }] = useModal();
161 161
162 const handleViewBoard = (record: DataBoardRecord) => { 162 const handleViewBoard = (record: DataBoardRecord) => {
163 - const hasDetailPermission = hasPermission('api:yt:data_component:list'); 163 + const hasDetailPermission = hasPermission(VisualBoardPermission.DETAIL);
164 if (hasDetailPermission) { 164 if (hasDetailPermission) {
165 const boardId = encode(record.id); 165 const boardId = encode(record.id);
166 const boardName = encode(record.name); 166 const boardName = encode(record.name);
@@ -179,8 +179,6 @@ @@ -179,8 +179,6 @@
179 '.ant-spin-container' 179 '.ant-spin-container'
180 ) as HTMLElement; 180 ) as HTMLElement;
181 listContainerEl && 181 listContainerEl &&
182 - // (listContainerEl.style.minHeight = listContainerHeight + 'px') &&  
183 - // (listContainerEl.style.maxHeight = listContainerHeight + 'px') &&  
184 (listContainerEl.style.height = listContainerHeight + 'px') && 182 (listContainerEl.style.height = listContainerHeight + 'px') &&
185 (listContainerEl.style.overflowY = 'auto') && 183 (listContainerEl.style.overflowY = 'auto') &&
186 (listContainerEl.style.overflowX = 'hidden'); 184 (listContainerEl.style.overflowX = 'hidden');