|
|
@@ -173,20 +173,14 @@
|
|
|
<FilterOutlined />
|
|
|
</Button>
|
|
|
</Tooltip>
|
|
|
- <span class="canvas-toolbar__divider"></span>
|
|
|
- <Tooltip title="缩小">
|
|
|
- <Button type="text" class="canvas-toolbar__button" @click="zoomOut">
|
|
|
- <MinusOutlined />
|
|
|
- </Button>
|
|
|
- </Tooltip>
|
|
|
- <Tooltip title="放大">
|
|
|
- <Button type="text" class="canvas-toolbar__button" @click="zoomIn">
|
|
|
- <PlusOutlined />
|
|
|
+ <Tooltip title="扩散关系">
|
|
|
+ <Button type="text" class="canvas-toolbar__button" @click="selectNeighborElements">
|
|
|
+ <ShareAltOutlined />
|
|
|
</Button>
|
|
|
</Tooltip>
|
|
|
- <Tooltip title="适配画布">
|
|
|
- <Button type="text" class="canvas-toolbar__button" @click="fitView">
|
|
|
- <FullscreenOutlined />
|
|
|
+ <Tooltip title="重新布局">
|
|
|
+ <Button type="text" class="canvas-toolbar__button" @click="relayout">
|
|
|
+ <ApartmentOutlined />
|
|
|
</Button>
|
|
|
</Tooltip>
|
|
|
<Tooltip title="居中内容">
|
|
|
@@ -194,22 +188,12 @@
|
|
|
<AimOutlined />
|
|
|
</Button>
|
|
|
</Tooltip>
|
|
|
- <span class="canvas-toolbar__divider"></span>
|
|
|
- <Tooltip title="扩散关系">
|
|
|
- <Button type="text" class="canvas-toolbar__button" @click="selectNeighborElements">
|
|
|
- <ShareAltOutlined />
|
|
|
- </Button>
|
|
|
- </Tooltip>
|
|
|
- <Tooltip title="框选">
|
|
|
- <Button type="text" class="canvas-toolbar__button" @click="showBoxSelectTip">
|
|
|
- <BorderOutlined />
|
|
|
- </Button>
|
|
|
- </Tooltip>
|
|
|
- <Tooltip title="重新布局">
|
|
|
- <Button type="text" class="canvas-toolbar__button" @click="relayout">
|
|
|
- <ApartmentOutlined />
|
|
|
+ <Tooltip title="适配画布">
|
|
|
+ <Button type="text" class="canvas-toolbar__button" @click="fitView">
|
|
|
+ <CompressOutlined />
|
|
|
</Button>
|
|
|
</Tooltip>
|
|
|
+ <span class="canvas-toolbar__divider"></span>
|
|
|
<Tooltip title="全屏查看">
|
|
|
<Button type="text" class="canvas-toolbar__button" @click="emit('toggle-fullscreen')">
|
|
|
<FullscreenOutlined />
|
|
|
@@ -230,6 +214,7 @@
|
|
|
:open="detailTableModalOpen"
|
|
|
:title="detailTitle"
|
|
|
:width="960"
|
|
|
+ :z-index="DETAIL_MODAL_Z_INDEX"
|
|
|
:loading="detailLoading"
|
|
|
:filters="detailFilters"
|
|
|
:filter-schema="detailFilterSchema"
|
|
|
@@ -257,6 +242,7 @@
|
|
|
:open="detailSummaryModalOpen"
|
|
|
:title="detailTitle"
|
|
|
:width="960"
|
|
|
+ :z-index="DETAIL_MODAL_Z_INDEX"
|
|
|
:show-ok-btn="false"
|
|
|
:show-cancel-btn="false"
|
|
|
:can-fullscreen="true"
|
|
|
@@ -279,6 +265,7 @@
|
|
|
<TransRecordModal
|
|
|
v-model:open="transDetailVisible"
|
|
|
:title="transDetailTitle"
|
|
|
+ :z-index="DETAIL_MODAL_Z_INDEX"
|
|
|
:base-query="transDetailBaseQuery"
|
|
|
:fetch-api="fetchTransDetailRecords"
|
|
|
:filter-fields="['startDate', 'endDate', 'transAmount']"
|
|
|
@@ -288,6 +275,7 @@
|
|
|
<CallRecordModal
|
|
|
v-model:open="callDetailVisible"
|
|
|
:title="callDetailTitle"
|
|
|
+ :z-index="DETAIL_MODAL_Z_INDEX"
|
|
|
:base-query="callDetailBaseQuery"
|
|
|
:fetch-api="fetchCallDetailRecords"
|
|
|
:filter-fields="['startDate', 'endDate']"
|
|
|
@@ -308,11 +296,9 @@
|
|
|
import {
|
|
|
AimOutlined,
|
|
|
ApartmentOutlined,
|
|
|
- BorderOutlined,
|
|
|
+ CompressOutlined,
|
|
|
FilterOutlined,
|
|
|
FullscreenOutlined,
|
|
|
- MinusOutlined,
|
|
|
- PlusOutlined,
|
|
|
SearchOutlined,
|
|
|
ShareAltOutlined,
|
|
|
} from '@ant-design/icons-vue';
|
|
|
@@ -350,6 +336,8 @@
|
|
|
|
|
|
const FILTER_OPERATORS = ['>', '>=', '=', '<', '<='] as const;
|
|
|
const filterOperators = FILTER_OPERATORS;
|
|
|
+ /** 详情弹框必须高于全屏图谱浮层(--ai-z-modal + 10 = 1010),低于 toast(2000) */
|
|
|
+ const DETAIL_MODAL_Z_INDEX = 1200;
|
|
|
|
|
|
const stageRef = ref<HTMLDivElement>();
|
|
|
const graphRef = shallowRef<Graph | null>(null);
|
|
|
@@ -1005,10 +993,6 @@
|
|
|
activePanel.value = activePanel.value === panel ? null : panel;
|
|
|
};
|
|
|
|
|
|
- const showBoxSelectTip = () => {
|
|
|
- showMessage('按住 Shift 拖动画布即可框选', 'info');
|
|
|
- };
|
|
|
-
|
|
|
const selectNeighborElements = () => {
|
|
|
const graph = graphRef.value;
|
|
|
const node = selectedNode.value;
|
|
|
@@ -1246,6 +1230,13 @@
|
|
|
enable: (event: any) => event?.targetType === 'canvas',
|
|
|
},
|
|
|
'zoom-canvas',
|
|
|
+ {
|
|
|
+ type: 'drag-element',
|
|
|
+ dropEffect: 'move',
|
|
|
+ state: 'selected',
|
|
|
+ animation: false,
|
|
|
+ enable: (event: any) => event?.targetType === 'node',
|
|
|
+ },
|
|
|
],
|
|
|
plugins: performanceMode.value
|
|
|
? [createContextMenuPlugin()]
|
|
|
@@ -1345,24 +1336,6 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- async function zoomIn() {
|
|
|
- try {
|
|
|
- await graphRef.value?.zoomBy(1.12, { duration: 180 });
|
|
|
- refreshZoom();
|
|
|
- } catch {
|
|
|
- /* 忽略 */
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- async function zoomOut() {
|
|
|
- try {
|
|
|
- await graphRef.value?.zoomBy(0.88, { duration: 180 });
|
|
|
- refreshZoom();
|
|
|
- } catch {
|
|
|
- /* 忽略 */
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
async function fitView() {
|
|
|
try {
|
|
|
await graphRef.value?.fitView({ when: 'always' }, false);
|