Add File
This commit is contained in:
225
frontend/src/views/dashboard/preview/SQPreviewShow.vue
Normal file
225
frontend/src/views/dashboard/preview/SQPreviewShow.vue
Normal file
@@ -0,0 +1,225 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
|
||||||
|
import { reactive, ref, toRefs, onBeforeMount, computed } from 'vue'
|
||||||
|
import { load_resource_prepare } from '@/views/dashboard/utils/canvasUtils'
|
||||||
|
import { Icon } from '@/components/icon-custom'
|
||||||
|
import ResourceTree from '@/views/dashboard/common/ResourceTree.vue'
|
||||||
|
import SQPreview from '@/views/dashboard/preview/SQPreview.vue'
|
||||||
|
import SQPreviewHead from '@/views/dashboard/preview/SQPreviewHead.vue'
|
||||||
|
import EmptyBackground from '@/views/dashboard/common/EmptyBackground.vue'
|
||||||
|
import EmptyBackgroundSvg from '@/views/dashboard/common/EmptyBackgroundSvg.vue'
|
||||||
|
import { dashboardStoreWithOut } from '@/stores/dashboard/dashboard.ts'
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
const { t } = useI18n()
|
||||||
|
const dashboardStore = dashboardStoreWithOut()
|
||||||
|
const previewCanvasContainer = ref(null)
|
||||||
|
const dashboardPreview = ref(null)
|
||||||
|
const slideShow = ref(true)
|
||||||
|
const dataInitState = ref(true)
|
||||||
|
const state = reactive({
|
||||||
|
canvasDataPreview: [],
|
||||||
|
canvasStylePreview: {},
|
||||||
|
canvasViewInfoPreview: {},
|
||||||
|
dashboardInfo: {},
|
||||||
|
})
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
showPosition: {
|
||||||
|
required: false,
|
||||||
|
type: String,
|
||||||
|
default: 'preview',
|
||||||
|
},
|
||||||
|
noClose: {
|
||||||
|
required: false,
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const { showPosition } = toRefs(props)
|
||||||
|
|
||||||
|
const resourceTreeRef = ref()
|
||||||
|
|
||||||
|
const hasTreeData = computed(() => {
|
||||||
|
return resourceTreeRef.value?.hasData
|
||||||
|
})
|
||||||
|
const mounted = computed(() => {
|
||||||
|
return resourceTreeRef.value?.mounted
|
||||||
|
})
|
||||||
|
function createNew() {
|
||||||
|
resourceTreeRef.value?.createNewObject()
|
||||||
|
}
|
||||||
|
|
||||||
|
const stateInit = () => {
|
||||||
|
state.canvasDataPreview = []
|
||||||
|
state.canvasStylePreview = {}
|
||||||
|
state.canvasViewInfoPreview = {}
|
||||||
|
state.dashboardInfo = {}
|
||||||
|
}
|
||||||
|
const loadCanvasData = (params: any) => {
|
||||||
|
dataInitState.value = false
|
||||||
|
load_resource_prepare(
|
||||||
|
{ id: params.id },
|
||||||
|
function ({ dashboardInfo, canvasDataResult, canvasStyleResult, canvasViewInfoPreview }) {
|
||||||
|
state.canvasDataPreview = canvasDataResult
|
||||||
|
state.canvasStylePreview = canvasStyleResult
|
||||||
|
state.canvasViewInfoPreview = canvasViewInfoPreview
|
||||||
|
state.dashboardInfo = dashboardInfo
|
||||||
|
dataInitState.value = true
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
const getPreviewStateInfo = () => {
|
||||||
|
return state
|
||||||
|
}
|
||||||
|
|
||||||
|
const reload = (params: any) => {
|
||||||
|
loadCanvasData(params)
|
||||||
|
}
|
||||||
|
|
||||||
|
const resourceNodeClick = (prams: any) => {
|
||||||
|
loadCanvasData(prams)
|
||||||
|
}
|
||||||
|
|
||||||
|
// @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
const previewShowFlag = computed(() => !!state.dashboardInfo?.name)
|
||||||
|
|
||||||
|
onBeforeMount(() => {
|
||||||
|
if (showPosition.value === 'preview') {
|
||||||
|
dashboardStore.canvasDataInit()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const sideTreeStatus = ref(true)
|
||||||
|
defineExpose({
|
||||||
|
getPreviewStateInfo,
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="dv-preview dv-teleport-query no-padding">
|
||||||
|
<el-aside
|
||||||
|
ref="node"
|
||||||
|
class="resource-area"
|
||||||
|
:class="{ 'close-side': !slideShow, retract: !sideTreeStatus }"
|
||||||
|
>
|
||||||
|
<resource-tree
|
||||||
|
v-show="slideShow"
|
||||||
|
ref="resourceTreeRef"
|
||||||
|
:cur-canvas-type="'dashboard'"
|
||||||
|
:show-position="showPosition"
|
||||||
|
@node-click="resourceNodeClick"
|
||||||
|
@delete-cur-resource="stateInit"
|
||||||
|
/>
|
||||||
|
</el-aside>
|
||||||
|
<el-container
|
||||||
|
v-loading="!dataInitState"
|
||||||
|
class="preview-area"
|
||||||
|
:class="{ 'no-data': !state.dashboardInfo }"
|
||||||
|
>
|
||||||
|
<template v-if="previewShowFlag">
|
||||||
|
<SQPreviewHead :dashboard-info="state.dashboardInfo" @reload="reload" />
|
||||||
|
<div id="sq-preview-content" ref="previewCanvasContainer" class="content">
|
||||||
|
<SQPreview
|
||||||
|
v-if="state.canvasStylePreview && dataInitState"
|
||||||
|
ref="dashboardPreview"
|
||||||
|
:dashboard-info="state.dashboardInfo"
|
||||||
|
:component-data="state.canvasDataPreview"
|
||||||
|
:canvas-style-data="state.canvasStylePreview"
|
||||||
|
:canvas-view-info="state.canvasViewInfoPreview"
|
||||||
|
:show-position="showPosition"
|
||||||
|
></SQPreview>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="hasTreeData && mounted">
|
||||||
|
<EmptyBackgroundSvg :description="t('dashboard.select_dashboard_tips')" />
|
||||||
|
</template>
|
||||||
|
<template v-else-if="mounted">
|
||||||
|
<EmptyBackground :description="t('dashboard.no_dashboard_info')" img-type="none">
|
||||||
|
<el-button type="primary" @click="createNew">
|
||||||
|
<template #icon>
|
||||||
|
<Icon name="icon_add_outlined">
|
||||||
|
<icon_add_outlined class="svg-icon" />
|
||||||
|
</Icon>
|
||||||
|
</template>
|
||||||
|
{{ t('dashboard.new_dashboard') }}
|
||||||
|
</el-button>
|
||||||
|
</EmptyBackground>
|
||||||
|
</template>
|
||||||
|
</el-container>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.dv-preview {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
background: #ffffff;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 12px;
|
||||||
|
|
||||||
|
.resource-area {
|
||||||
|
--ed-aside-width: 260px;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
box-shadow: 0 0 3px #d7d7d7;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
overflow: visible;
|
||||||
|
|
||||||
|
&.retract {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-area {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
position: relative;
|
||||||
|
//transition: 0.5s;
|
||||||
|
|
||||||
|
&.no-data {
|
||||||
|
background-color: rgba(245, 246, 247, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-side {
|
||||||
|
width: 0 !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexible-button-area {
|
||||||
|
position: absolute;
|
||||||
|
height: 60px;
|
||||||
|
width: 16px;
|
||||||
|
left: 0;
|
||||||
|
top: calc(50% - 30px);
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 0 4px 4px 0;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 10;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-top: 1px solid #d7d7d7;
|
||||||
|
border-right: 1px solid #d7d7d7;
|
||||||
|
border-bottom: 1px solid #d7d7d7;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user