更新前端src/views/dashboard目录文件
This commit is contained in:
parent
6ab590073a
commit
ca0e601c54
@ -9,7 +9,6 @@ import EmptyBackground from '@/components/empty-background/src/EmptyBackground.v
|
||||
import ArrowSide from '@/views/common/DeResourceArrow.vue'
|
||||
import { initCanvasData, initCanvasDataPrepare, onInitReady } from '@/utils/canvasUtils'
|
||||
import { useAppStoreWithOut } from '@/store/modules/app'
|
||||
import { usePermissionStoreWithOut } from '@/store/modules/permission'
|
||||
import { useMoveLine } from '@/hooks/web/useMoveLine'
|
||||
import { Icon } from '@/components/icon-custom'
|
||||
import { download2AppTemplate, downloadCanvas2 } from '@/utils/imgUtils'
|
||||
@ -19,6 +18,7 @@ import AppExportForm from '@/components/de-app/AppExportForm.vue'
|
||||
import { useEmitt } from '@/hooks/web/useEmitt'
|
||||
import { useUserStoreWithOut } from '@/store/modules/user'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import CanvasOptBar from '@/components/visualization/CanvasOptBar.vue'
|
||||
const userStore = useUserStoreWithOut()
|
||||
|
||||
const userName = computed(() => userStore.getName)
|
||||
@ -28,7 +28,6 @@ const dvMainStore = dvMainStoreWithOut()
|
||||
const previewCanvasContainer = ref(null)
|
||||
const dashboardPreview = ref(null)
|
||||
const slideShow = ref(true)
|
||||
const permissionStore = usePermissionStoreWithOut()
|
||||
const appStore = useAppStoreWithOut()
|
||||
const dataInitState = ref(true)
|
||||
const downloadStatus = ref(false)
|
||||
@ -37,7 +36,11 @@ const state = reactive({
|
||||
canvasStylePreview: null,
|
||||
canvasViewInfoPreview: null,
|
||||
dvInfo: null,
|
||||
curPreviewGap: 0
|
||||
curPreviewGap: 0,
|
||||
showOffset: {
|
||||
top: 110,
|
||||
left: 280
|
||||
}
|
||||
})
|
||||
|
||||
const { fullscreenFlag, canvasViewDataInfo } = storeToRefs(dvMainStore)
|
||||
@ -55,10 +58,15 @@ const props = defineProps({
|
||||
required: false,
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
resourceTable: {
|
||||
required: false,
|
||||
type: String,
|
||||
default: 'core'
|
||||
}
|
||||
})
|
||||
|
||||
const { showPosition } = toRefs(props)
|
||||
const { showPosition, resourceTable } = toRefs(props)
|
||||
|
||||
const resourceTreeRef = ref()
|
||||
|
||||
@ -93,7 +101,7 @@ const loadCanvasData = (dvId, weight?) => {
|
||||
dataInitState.value = false
|
||||
initMethod(
|
||||
dvId,
|
||||
'dashboard',
|
||||
{ busiFlag: 'dashboard', resourceTable: 'core' },
|
||||
function ({
|
||||
canvasDataResult,
|
||||
canvasStyleResult,
|
||||
@ -115,13 +123,20 @@ const loadCanvasData = (dvId, weight?) => {
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
// 地图类图表，需要预先准备图片
|
||||
const mapChartTypes = ['bubble-map', 'flow-map', 'heat-map', 'map', 'symbolic-map']
|
||||
const downloadH2 = type => {
|
||||
downloadStatus.value = true
|
||||
const mapElementIds =
|
||||
state.canvasDataPreview
|
||||
?.filter(ele => mapChartTypes.includes(ele.innerType))
|
||||
.map(ele => ele.id) || []
|
||||
mapElementIds.forEach(id => useEmitt().emitter.emit('l7-prepare-picture', id))
|
||||
nextTick(() => {
|
||||
const vueDom = previewCanvasContainer.value.querySelector('.canvas-container')
|
||||
downloadCanvas2(type, vueDom, state.dvInfo.name, () => {
|
||||
downloadStatus.value = false
|
||||
mapElementIds.forEach(id => useEmitt().emitter.emit('l7-unprepare-picture', id))
|
||||
})
|
||||
})
|
||||
}
|
||||
@ -214,13 +229,18 @@ const downLoadApp = appAttachInfo => {
|
||||
fileDownload('app', appAttachInfo)
|
||||
}
|
||||
|
||||
const freezeStyle = computed(() => [
|
||||
{ '--top-show-offset': state.showOffset.top },
|
||||
{ '--left-show-offset': state.showOffset.left }
|
||||
])
|
||||
|
||||
defineExpose({
|
||||
getPreviewStateInfo
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dv-preview dv-teleport-query">
|
||||
<div class="dv-preview dv-teleport-query" :style="freezeStyle">
|
||||
<ArrowSide
|
||||
v-if="!noClose"
|
||||
:style="{ left: (sideTreeStatus ? width - 12 : 0) + 'px' }"
|
||||
@ -246,12 +266,13 @@ defineExpose({
|
||||
v-show="slideShow"
|
||||
:cur-canvas-type="'dashboard'"
|
||||
:show-position="showPosition"
|
||||
:resource-table="resourceTable"
|
||||
@node-click="resourceNodeClick"
|
||||
/>
|
||||
</el-aside>
|
||||
<el-container
|
||||
class="preview-area"
|
||||
:class="{ 'no-data': !hasTreeData }"
|
||||
:class="{ 'no-data': !state.dvInfo?.id }"
|
||||
v-loading="!dataInitState"
|
||||
>
|
||||
<div
|
||||
@ -276,6 +297,11 @@ defineExpose({
|
||||
id="de-preview-content"
|
||||
:class="{ 'de-screen-full': fullscreenFlag }"
|
||||
>
|
||||
<canvas-opt-bar
|
||||
canvas-id="canvas-main"
|
||||
:canvas-style-data="state.canvasStylePreview || {}"
|
||||
:component-data="state.canvasDataPreview || []"
|
||||
></canvas-opt-bar>
|
||||
<de-preview
|
||||
ref="dashboardPreview"
|
||||
v-if="state.canvasStylePreview && dataInitState"
|
||||
@ -286,6 +312,7 @@ defineExpose({
|
||||
:canvas-view-info="state.canvasViewInfoPreview"
|
||||
:show-position="showPosition"
|
||||
:download-status="downloadStatus"
|
||||
:show-linkage-button="false"
|
||||
></de-preview>
|
||||
</div>
|
||||
</template>
|
||||
@ -347,6 +374,7 @@ defineExpose({
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@ -215,7 +215,7 @@ const setMobileStyle = debounce(() => {
|
||||
transformOrigin: '0 0'
|
||||
}
|
||||
}, 100)
|
||||
const curComponentChangeHandle = info => {
|
||||
const curComponentChangeHandle = () => {
|
||||
// do change
|
||||
}
|
||||
onMounted(() => {
|
||||
@ -332,7 +332,7 @@ const save = () => {
|
||||
:canvas-view-info-mobile="canvasViewInfoMobile"
|
||||
></component-style-editor>
|
||||
</div>
|
||||
<div class="config-mobile-tab" v-show="activeCollapse === 'com'">
|
||||
<div class="config-mobile-tab" v-if="activeCollapse === 'com'">
|
||||
<div
|
||||
:style="{ height: '196px', width: '196px' }"
|
||||
class="mobile-wrapper-inner-adaptor"
|
||||
@ -541,7 +541,7 @@ const save = () => {
|
||||
}
|
||||
|
||||
:deep(.ed-tabs__item):not(.is-active) {
|
||||
color: #A6A6A6;
|
||||
color: #646a73;
|
||||
}
|
||||
|
||||
.config-mobile-sidebar {
|
||||
@ -636,39 +636,4 @@ const save = () => {
|
||||
width: 90% !important;
|
||||
}
|
||||
}
|
||||
.ed-tabs__nav-wrap::after{
|
||||
background-color: rgba(235, 235, 235, 0.15) !important;
|
||||
}
|
||||
.ed-checkbox__input.is-disabled .ed-checkbox__inner{
|
||||
background-color: #373737;
|
||||
border-color: #5f5f5f;
|
||||
}
|
||||
.ed-color-picker.is-custom.is-disabled .ed-color-picker__trigger{
|
||||
border-color: #5f5f5f;
|
||||
}
|
||||
.mobile-background-selector .avatar-uploader .ed-upload--picture-card {
|
||||
background: #373737 !important;
|
||||
border: 1px dashed #373737 !important;
|
||||
}
|
||||
.mobile-background-selector .avatar-uploader .ed-upload--picture-card .ed-icon{
|
||||
color: #ebebeb !important;
|
||||
}
|
||||
.ed-message-box{
|
||||
background: #212121 ;
|
||||
}
|
||||
.ed-message-box__content{
|
||||
color: #ffffff;
|
||||
}
|
||||
.ed-message-box__btns .ed-button--primary{
|
||||
background: #0089ff;
|
||||
border-color: #0089ff;
|
||||
}
|
||||
.ed-message-box__btns .ed-button.is-secondary{
|
||||
color: #F2F4F5 !important;
|
||||
background-color: #212121 !important;
|
||||
border: 1px solid #434343 !important;
|
||||
}
|
||||
.custom-popover-light{
|
||||
border: 1px solid#363636 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -33,6 +33,7 @@ import { usePermissionStoreWithOut } from '@/store/modules/permission'
|
||||
import eventBus from '@/utils/eventBus'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import DashboardHiddenComponent from '@/components/dashboard/DashboardHiddenComponent.vue'
|
||||
import { recoverToPublished } from '@/api/visualization/dataVisualization'
|
||||
const embeddedStore = useEmbedded()
|
||||
const { wsCache } = useCache()
|
||||
const canvasCacheOutRef = ref(null)
|
||||
@ -115,7 +116,7 @@ const checkPer = async resourceId => {
|
||||
if (!window.DataEaseBi || !resourceId) {
|
||||
return true
|
||||
}
|
||||
const request = { busiFlag: 'dashboard' }
|
||||
const request = { busiFlag: 'dashboard', resourceTable: 'core' }
|
||||
await interactiveStore.setInteractive(request)
|
||||
return check(wsCache.get('panel-weight'), resourceId, 4)
|
||||
}
|
||||
@ -162,10 +163,13 @@ const doUseCache = flag => {
|
||||
}
|
||||
}
|
||||
|
||||
const initLocalCanvasData = () => {
|
||||
const initLocalCanvasData = callBack => {
|
||||
const { resourceId, opt, sourcePid } = state
|
||||
const busiFlg = opt === 'copy' ? 'dashboard-copy' : 'dashboard'
|
||||
initCanvasData(resourceId, busiFlg, function () {
|
||||
const busiFlag = opt === 'copy' ? 'dashboard-copy' : 'dashboard'
|
||||
initCanvasData(
|
||||
resourceId,
|
||||
{ busiFlag, resourceTable: 'snapshot', source: 'main-edit' },
|
||||
function () {
|
||||
dataInitState.value = true
|
||||
if (dvInfo.value && opt === 'copy') {
|
||||
dvInfo.value.dataState = 'prepare'
|
||||
@ -176,7 +180,9 @@ const initLocalCanvasData = () => {
|
||||
}, 1500)
|
||||
}
|
||||
onInitReady({ resourceId: resourceId })
|
||||
})
|
||||
callBack && callBack()
|
||||
}
|
||||
)
|
||||
}
|
||||
onMounted(async () => {
|
||||
dvMainStore.setCurComponent({ component: null, index: null })
|
||||
@ -216,7 +222,9 @@ onMounted(async () => {
|
||||
if (canvasCache) {
|
||||
canvasCacheOutRef.value?.dialogInit({ canvasType: 'dashboard', resourceId: resourceId })
|
||||
} else {
|
||||
initLocalCanvasData()
|
||||
initLocalCanvasData(() => {
|
||||
// do init
|
||||
})
|
||||
}
|
||||
} else if (opt && opt === 'create') {
|
||||
dataInitState.value = false
|
||||
@ -296,6 +304,23 @@ const cancelHidden = item => {
|
||||
}
|
||||
}
|
||||
|
||||
const doRecoverToPublished = () => {
|
||||
recoverToPublished({ id: dvInfo.value.id, type: 'dashboard', name: dvInfo.value.name }).then(
|
||||
() => {
|
||||
state.resourceId = dvInfo.value.id
|
||||
state.sourcePid = dvInfo.value.pid
|
||||
state.opt = null
|
||||
initLocalCanvasData(() => {
|
||||
nextTick(() => {
|
||||
deCanvasRef.value.canvasInit(false)
|
||||
dvMainStore.updateDvInfoCall(1)
|
||||
useEmitt().emitter.emit('calcData-all')
|
||||
})
|
||||
})
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('storage', eventCheck)
|
||||
window.removeEventListener('message', winMsgHandle)
|
||||
@ -309,7 +334,7 @@ onUnmounted(() => {
|
||||
v-loading="requestStore.loadingMap[permissionStore.currentPath]"
|
||||
v-if="loadFinish && !mobileConfig"
|
||||
>
|
||||
<DbToolbar />
|
||||
<DbToolbar @recoverToPublished="doRecoverToPublished" />
|
||||
<el-container
|
||||
class="dv-layout-container"
|
||||
:class="{ 'preview-content': editMode === 'preview' }"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user