更新前端src/views/(mobile,panel,share,system)目录文件

This commit is contained in:
limengnan 2025-06-24 11:40:18 +08:00
parent 8b6554263e
commit 84bf53266c
17 changed files with 481 additions and 199 deletions

View File

@ -127,7 +127,7 @@ watch(filterText, val => {
}) })
const dataClick = val => { const dataClick = val => {
filterText.value = '' if (val.extraFlag1 === 0) return
if (val.leaf) { if (val.leaf) {
emits('hiddenTabbar', true) emits('hiddenTabbar', true)
handleCellClick(val) handleCellClick(val)
@ -155,7 +155,7 @@ const dfsTableData = arr => {
} }
const getTree = async () => { const getTree = async () => {
const request = { busiFlag: 'dashboard' } as BusiTreeRequest const request = { busiFlag: 'dashboard', resourceTable: 'core' } as BusiTreeRequest
await interactiveStore.setInteractive(request) await interactiveStore.setInteractive(request)
const interactiveData = interactiveStore.getPanel const interactiveData = interactiveStore.getPanel
const nodeData = interactiveData.treeNodes const nodeData = interactiveData.treeNodes
@ -269,6 +269,7 @@ onMounted(() => {
v-for="ele in activeTableData" v-for="ele in activeTableData"
:key="ele.id" :key="ele.id"
@click="dataClick(ele)" @click="dataClick(ele)"
:style="{ color: ele.extraFlag1 === 0 ? '#bbbfc4' : '#1f2329' }"
:label="ele.name" :label="ele.name"
:nextlevel="!ele.leaf" :nextlevel="!ele.leaf"
:prefix-icon="ele.leaf ? icon_dashboard : dvFolder" :prefix-icon="ele.leaf ? icon_dashboard : dvFolder"

View File

@ -1,5 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref, computed, onMounted, reactive } from 'vue' import { ref, computed, onMounted, reactive, watch } from 'vue'
import { interactiveStoreWithOut } from '@/store/modules/interactive' import { interactiveStoreWithOut } from '@/store/modules/interactive'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { shortcutOption } from '@/views/workbranch/ShortcutOption' import { shortcutOption } from '@/views/workbranch/ShortcutOption'
@ -16,6 +16,8 @@ import 'vant/es/sticky/style'
import 'vant/es/tab/style' import 'vant/es/tab/style'
import 'vant/es/nav-bar/style' import 'vant/es/nav-bar/style'
import 'vant/es/tabs/style' import 'vant/es/tabs/style'
import { cloneDeep, map } from 'lodash-es'
import { XpackComponent } from '@/components/plugin'
const router = useRouter() const router = useRouter()
const { t } = useI18n() const { t } = useI18n()
@ -43,18 +45,6 @@ const loadTableData = () => {
}) })
} }
const setEmptyTips = () => {
emptyTips.value = state.tableData.length
? ''
: `暂无${
{
recent: '数据',
store: '收藏',
share: '分享'
}[activeTab.value]
}`
}
const loadShareTableData = () => { const loadShareTableData = () => {
emits('setLoading', true) emits('setLoading', true)
request request
@ -71,12 +61,26 @@ const loadShareTableData = () => {
}) })
} }
const tablePaneList = ref([ const baseTablePaneList = ref([
{ title: t('work_branch.recent'), name: 'recent', disabled: false }, { title: t('work_branch.recent'), name: 'recent', disabled: false },
{ title: '我的收藏', name: 'store', disabled: false }, { title: '我的收藏', name: 'store', disabled: false },
{ title: t('visualization.share_out'), name: 'share', disabled: false } { title: t('visualization.share_out'), name: 'share', disabled: false }
]) ])
const computedBaseTablePaneNameList = computed(() => {
return map(baseTablePaneList.value, l => l.name)
})
const dfTablePaneList = ref([])
const tablePaneList = computed(() => {
const list = cloneDeep(!!busiAuthList.length ? baseTablePaneList.value : [])
for (const valueElement of dfTablePaneList.value) {
list.push(valueElement)
}
return list
})
const busiDataMap = computed(() => interactiveStore.getData) const busiDataMap = computed(() => interactiveStore.getData)
const getBusiListWithPermission = () => { const getBusiListWithPermission = () => {
@ -87,22 +91,51 @@ const getBusiListWithPermission = () => {
busiFlagList.push(baseFlagList[parseInt(key)]) busiFlagList.push(baseFlagList[parseInt(key)])
} }
} }
tablePaneList.value[0].disabled = !busiFlagList?.length baseTablePaneList.value[0].disabled = !busiFlagList?.length
tablePaneList.value[1].disabled = baseTablePaneList.value[1].disabled =
!busiFlagList.includes('panel') && !busiFlagList.includes('screen') !busiFlagList.includes('panel') && !busiFlagList.includes('screen')
return busiFlagList return busiFlagList
} }
const busiAuthList = getBusiListWithPermission() const busiAuthList = getBusiListWithPermission()
const shortName = {
recent: '数据',
store: '收藏',
share: '分享'
}
const loadedDataFilling = data => {
dfTablePaneList.value.push(data)
shortName[data.name] = data.shortName
}
const setEmptyTips = () => {
emptyTips.value = state.tableData.length ? '' : `暂无${shortName[activeTab.value]}`
}
const firstChangeActiveName = ref(false)
watch(
() => tablePaneList.value.length,
() => {
if (tablePaneList.value.length > 0 && !firstChangeActiveName.value) {
firstChangeActiveName.value = true
activeTab.value = tablePaneList.value[0].name
}
}
)
const handleClick = ({ name, disabled }) => { const handleClick = ({ name, disabled }) => {
if (disabled) return if (disabled) return
if (name === 'recent' || name === 'store') { if (name === 'recent' || name === 'store') {
emits('setLoading', true) emits('setLoading', true)
shortcutOption.setBusiFlag(name) shortcutOption.setBusiFlag(name)
loadTableData() loadTableData()
} else { } else if (name === 'share') {
loadShareTableData() loadShareTableData()
} else {
emptyTips.value = undefined
} }
} }
onMounted(() => { onMounted(() => {
@ -116,6 +149,7 @@ onMounted(() => {
}) })
const handleCellClick = ele => { const handleCellClick = ele => {
if (ele.extFlag1 === 0) return
wsCache.set('activeTab', activeTab.value) wsCache.set('activeTab', activeTab.value)
router.push({ router.push({
path: '/panel/mobile', path: '/panel/mobile',
@ -145,13 +179,20 @@ const formatterTime = val => {
</van-tabs> </van-tabs>
</van-sticky> </van-sticky>
<div class="workbranch-cell-group"> <div class="workbranch-cell-group">
<Workbranch <template v-if="computedBaseTablePaneNameList.includes(activeTab)">
@click="handleCellClick(ele)" <Workbranch
v-for="ele in state.tableData" @click="handleCellClick(ele)"
:key="ele.id" v-for="ele in state.tableData"
size="large" :key="ele.id"
:label="ele.name" :style="{ color: ele.extFlag1 === 0 ? '#bbbfc4' : '#1f2329' }"
:time="formatterTime(ele.lastEditTime || ele.time)" size="large"
:label="ele.name"
:time="formatterTime(ele.lastEditTime || ele.time)"
/>
</template>
<XpackComponent
jsname="L21lbnUvZGF0YS9kYXRhLWZpbGxpbmcvZmlsbC9UYWJQYW5lVGFibGU="
v-else-if="activeTab === 'data-filling'"
/> />
</div> </div>
<div class="empty-img-mobile" v-if="!!emptyTips"> <div class="empty-img-mobile" v-if="!!emptyTips">
@ -161,6 +202,11 @@ const formatterTime = val => {
</div> </div>
</div> </div>
</div> </div>
<XpackComponent
jsname="L21lbnUvZGF0YS9kYXRhLWZpbGxpbmcvZmlsbC9UYWJQYW5l"
@loaded="loadedDataFilling"
/>
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>

View File

@ -143,12 +143,7 @@ const onSubmit = async () => {
return return
} }
showMfa.value = false showMfa.value = false
if (!isLdap && mfa?.enabled) { if (toMfa(mfa)) {
for (const key in mfa) {
mfaData.value[key] = mfa[key]
}
showMfa.value = true
duringLogin.value = false
return return
} }
userStore.setToken(token) userStore.setToken(token)
@ -177,6 +172,19 @@ const switchType = type => {
const toMain = () => { const toMain = () => {
router.push({ path: '/index' }) router.push({ path: '/index' })
} }
const toMfa = (mfa: any) => {
const isLdap = loginType.value === 'ldap'
if (!isLdap && mfa?.enabled) {
for (const key in mfa) {
mfaData.value[key] = mfa[key]
}
showMfa.value = true
duringLogin.value = false
showPlatLoginMask.value = false
return true
}
return false
}
const loadFail = () => { const loadFail = () => {
xpackLoadFail.value = true xpackLoadFail.value = true
showPlatLoginMask.value = false showPlatLoginMask.value = false
@ -248,6 +256,7 @@ const loadFail = () => {
<XpackComponent <XpackComponent
jsname="L2NvbXBvbmVudC9sb2dpbi9Nb2JpbGVIYW5kbGVy" jsname="L2NvbXBvbmVudC9sb2dpbi9Nb2JpbGVIYW5kbGVy"
@switch-type="switchType" @switch-type="switchType"
@to-mfa="toMfa"
@to-main="toMain" @to-main="toMain"
/> />
</div> </div>

View File

@ -1,8 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive } from 'vue' import { reactive } from 'vue'
import icon_collection_outlined from '@/assets/svg/icon_collection_outlined.svg'
import visualStar from '@/assets/svg/visual-star.svg'
import icon_replace_outlined from '@/assets/svg/icon_replace_outlined.svg'
import { initCanvasDataMobile } from '@/utils/canvasUtils' import { initCanvasDataMobile } from '@/utils/canvasUtils'
import { ref, nextTick, onBeforeMount } from 'vue' import { ref, nextTick, onBeforeMount } from 'vue'
import { useRoute, useRouter } from 'vue-router' import { useRoute, useRouter } from 'vue-router'
import { storeApi, storeStatusApi } from '@/api/visualization/dataVisualization'
import DePreview from '@/components/data-visualization/canvas/DePreview.vue' import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain' import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import VanSticky from 'vant/es/sticky' import VanSticky from 'vant/es/sticky'
@ -11,13 +15,15 @@ import 'vant/es/nav-bar/style'
import 'vant/es/sticky/style' import 'vant/es/sticky/style'
import { downloadCanvas2 } from '@/utils/imgUtils' import { downloadCanvas2 } from '@/utils/imgUtils'
import { useEmitt } from '@/hooks/web/useEmitt' import { useEmitt } from '@/hooks/web/useEmitt'
import CanvasOptBar from '@/components/visualization/CanvasOptBar.vue'
const dvMainStore = dvMainStoreWithOut() const dvMainStore = dvMainStoreWithOut()
const state = reactive({ const state = reactive({
canvasDataPreview: null, canvasDataPreview: null,
canvasStylePreview: null, canvasStylePreview: null,
canvasViewInfoPreview: null, canvasViewInfoPreview: null,
dvInfo: { dvInfo: {
name: '' name: '',
id: ''
}, },
curPreviewGap: 0 curPreviewGap: 0
}) })
@ -46,6 +52,7 @@ const loadCanvasData = (dvId, weight?) => {
state.curPreviewGap = curPreviewGap state.curPreviewGap = curPreviewGap
dataInitState.value = true dataInitState.value = true
nextTick(() => { nextTick(() => {
storeQuery()
dashboardPreview.value.restore() dashboardPreview.value.restore()
}) })
} }
@ -89,6 +96,25 @@ const onClickLeft = () => {
} }
}) })
} }
const reload = () => {
window.location.reload()
}
const favorited = ref(false)
const executeStore = () => {
const param = {
id: state.dvInfo.id,
type: 'panel'
}
storeApi(param).then(() => {
storeQuery()
})
}
const storeQuery = () => {
if (!state.dvInfo?.id) return
storeStatusApi(state.dvInfo.id).then(res => {
favorited.value = res.data
})
}
</script> </script>
<template> <template>
@ -96,6 +122,29 @@ const onClickLeft = () => {
<van-sticky> <van-sticky>
<van-nav-bar :title="state.dvInfo.name" left-arrow @click-left="onClickLeft" /> <van-nav-bar :title="state.dvInfo.name" left-arrow @click-left="onClickLeft" />
</van-sticky> </van-sticky>
<div class="top-nav_refresh">
<el-icon
size="16"
@click="executeStore"
:style="{ color: favorited ? '#FFC60A' : '#646A73' }"
>
<icon
><component
class="svg-icon"
:is="favorited ? visualStar : icon_collection_outlined"
></component
></icon>
</el-icon>
<el-icon style="margin-left: 16px" @click="reload" color="#646A73" size="16"
><icon_replace_outlined
/></el-icon>
</div>
<canvas-opt-bar
style="top: 48px"
canvas-id="canvas-main"
:canvas-style-data="state.canvasStylePreview || {}"
:component-data="state.canvasDataPreview || []"
></canvas-opt-bar>
<de-preview <de-preview
ref="dashboardPreview" ref="dashboardPreview"
v-if="state.canvasStylePreview && dataInitState" v-if="state.canvasStylePreview && dataInitState"
@ -105,6 +154,7 @@ const onClickLeft = () => {
:canvas-style-data="state.canvasStylePreview" :canvas-style-data="state.canvasStylePreview"
:canvas-view-info="state.canvasViewInfoPreview" :canvas-view-info="state.canvasViewInfoPreview"
:download-status="downloadStatus" :download-status="downloadStatus"
:show-linkage-button="false"
></de-preview> ></de-preview>
</div> </div>
</template> </template>
@ -120,6 +170,15 @@ const onClickLeft = () => {
--van-nav-bar-title-text-color: #1f2329; --van-nav-bar-title-text-color: #1f2329;
--van-font-bold: 500; --van-font-bold: 500;
--van-nav-bar-title-font-size: 17px; --van-nav-bar-title-font-size: 17px;
.top-nav_refresh {
position: absolute;
top: 14px;
right: 24px;
z-index: 10;
display: flex;
align-items: center;
}
#preview-canvas-main { #preview-canvas-main {
height: calc(100% - 44px) !important; height: calc(100% - 44px) !important;
} }

View File

@ -87,7 +87,11 @@ const hanedleMessage = event => {
mobileComponent['events'] = component['events'] mobileComponent['events'] = component['events']
mobileComponent['propValue'] = component['propValue'] mobileComponent['propValue'] = component['propValue']
mobileViewStyleSwitch(otherComponent) mobileViewStyleSwitch(otherComponent)
useEmitt().emitter.emit('renderChart-' + component.id, otherComponent) if (mobileComponent.component === 'VQuery') {
useEmitt().emitter.emit('renderChart-' + component.id, otherComponent)
} else if (mobileComponent.component === 'UserView') {
useEmitt().emitter.emit('calcData-' + component.id, otherComponent)
}
} }
} }

View File

@ -162,7 +162,7 @@ const activeTableData = computed(() => {
<template> <template>
<div class="de-mobile-user"> <div class="de-mobile-user">
<template v-if="showNavBar"> <template v-if="showNavBar">
<div class="logout flex-center">我的</div> <div class="logout flex-center" style="padding-top: 8px; margin: 0">我的</div>
<div class="mobile-user-top"> <div class="mobile-user-top">
<van-image round width="48" height="48" :src="userImg" /> <van-image round width="48" height="48" :src="userImg" />
<div class="user-name"> <div class="user-name">
@ -185,43 +185,50 @@ const activeTableData = computed(() => {
left-arrow left-arrow
@click-left="onClickLeft" @click-left="onClickLeft"
/> />
<div class="grey"> <div class="cell-org_scroll">
<div @click="clearOrg" class="flex-align-center"> <div class="grey">
<span class="ellipsis" :class="!!directName.length && 'active'">组织</span> <div @click="clearOrg" class="flex-align-center">
<el-icon v-if="!!directName.length"> <span class="ellipsis" :class="!!directName.length && 'active'">组织</span>
<Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon> <el-icon v-if="!!directName.length">
</el-icon> <Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
</div> </el-icon>
<div </div>
@click="handleDir(index)" <div
class="flex-align-center" @click="handleDir(index)"
v-for="(ele, index) in directName" class="flex-align-center"
:key="ele" v-for="(ele, index) in directName"
> :key="ele"
<span class="ellipsis" :class="ele !== activeDirectName && 'active'">{{ ele }}</span> >
<el-icon v-if="directName.length > 1 && index !== directName.length - 1"> <span class="ellipsis" :class="ele !== activeDirectName && 'active'">{{ ele }}</span>
<Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon> <el-icon v-if="directName.length > 1 && index !== directName.length - 1">
</el-icon> <Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
</el-icon>
</div>
</div> </div>
<OrgCell
@click="type => orgCellClick(type, ele)"
v-for="ele in activeTableData"
:key="ele.id"
:label="ele.name"
:nextlevel="ele.children"
:active="name === ele.name"
></OrgCell>
</div> </div>
<OrgCell
@click="type => orgCellClick(type, ele)"
v-for="ele in activeTableData"
:key="ele.id"
:label="ele.name"
:nextlevel="ele.children"
:active="name === ele.name"
></OrgCell>
</template> </template>
</div> </div>
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>
.de-mobile-user { .de-mobile-user {
height: 100vh; height: calc(100% - 50px);
width: 100vw; width: 100vw;
background: #f5f6f7; background: #f5f6f7;
.cell-org_scroll {
height: calc(100% - 144px);
overflow-y: auto;
}
.mobile-user-top { .mobile-user-top {
padding: 16px; padding: 16px;
display: flex; display: flex;

View File

@ -18,9 +18,12 @@ export interface ProxyInfo {
shareDisable: boolean shareDisable: boolean
peRequireValid: boolean peRequireValid: boolean
ticketValidVO: TicketValidVO ticketValidVO: TicketValidVO
pwd?: string
uuid: string
} }
class ShareProxy { class ShareProxy {
uuid: string uuid: string
pwd?: string
constructor() { constructor() {
this.uuid = '' this.uuid = ''
} }
@ -48,7 +51,16 @@ class ShareProxy {
curLocation.lastIndexOf('de-link/') + 8, curLocation.lastIndexOf('de-link/') + 8,
pmIndex > 0 ? pmIndex : curLocation.length pmIndex > 0 ? pmIndex : curLocation.length
) )
this.uuid = uuidObj
if (uuidObj?.includes(',')) {
const index = uuidObj.indexOf(',')
this.uuid = uuidObj.substring(0, index)
if (uuidObj.length > index + 1) {
this.pwd = uuidObj.substring(index + 1)
}
} else {
this.uuid = uuidObj
}
} }
async loadProxy() { async loadProxy() {
this.setUuid() this.setUuid()
@ -66,6 +78,12 @@ class ShareProxy {
} }
const res = await request.post({ url, data: param }) const res = await request.post({ url, data: param })
const proxyInfo: ProxyInfo = res.data as ProxyInfo const proxyInfo: ProxyInfo = res.data as ProxyInfo
if (proxyInfo) {
proxyInfo.uuid = uuid
if (this.pwd) {
proxyInfo.pwd = this.pwd
}
}
return proxyInfo return proxyInfo
} }
} }

View File

@ -3,17 +3,22 @@
class="link-container" class="link-container"
v-loading="loading || requestStore.loadingMap[permissionStore.currentPath]" v-loading="loading || requestStore.loadingMap[permissionStore.currentPath]"
> >
<ErrorTemplate v-if="!loading && disableError" msg="已禁用分享功能,请联系管理员!" /> <ErrorTemplate v-if="!loading && disableError" :msg="t('link_ticket.disable_error')" />
<IframeError v-else-if="!loading && iframeError" /> <ErrorTemplate v-else-if="!loading && iframeError" :msg="t('link_ticket.iframe_error')" />
<ErrorTemplate <ErrorTemplate
v-else-if="!loading && peRequireError" v-else-if="!loading && peRequireError"
msg="已设置有效期密码必填,当前链接无效!" :msg="t('link_ticket.pe_require_error')"
/> />
<LinkError v-else-if="!loading && !linkExist" /> <ErrorTemplate v-else-if="!loading && !linkExist" :msg="t('link_ticket.link_error')" />
<Exp v-else-if="!loading && linkExp" /> <ErrorTemplate v-else-if="!loading && linkExp" :msg="t('link_ticket.link_exp_error')" />
<PwdTips v-else-if="!loading && !pwdValid" /> <PwdTips v-else-if="!loading && !pwdValid" />
<TicketError <ErrorTemplate
v-else-if="!loading && (!state.ticketValidVO.ticketValid || state.ticketValidVO.ticketExp)" v-else-if="!loading && !state.ticketValidVO.ticketValid"
:msg="t('link_ticket.param_error')"
/>
<ErrorTemplate
v-else-if="!loading && state.ticketValidVO.ticketExp"
:msg="t('link_ticket.exp_error')"
/> />
<PreviewCanvas <PreviewCanvas
v-else v-else
@ -30,13 +35,10 @@ import { useRequestStoreWithOut } from '@/store/modules/request'
import { usePermissionStoreWithOut } from '@/store/modules/permission' import { usePermissionStoreWithOut } from '@/store/modules/permission'
import PreviewCanvas from '@/views/data-visualization/PreviewCanvas.vue' import PreviewCanvas from '@/views/data-visualization/PreviewCanvas.vue'
import { ProxyInfo, shareProxy } from './ShareProxy' import { ProxyInfo, shareProxy } from './ShareProxy'
import Exp from './exp.vue'
import LinkError from './error.vue'
import PwdTips from './pwd.vue' import PwdTips from './pwd.vue'
import IframeError from './IframeError.vue'
import TicketError from './TicketError.vue'
import ErrorTemplate from './ErrorTemplate.vue' import ErrorTemplate from './ErrorTemplate.vue'
import { useLinkStoreWithOut } from '@/store/modules/link' import { useLinkStoreWithOut } from '@/store/modules/link'
import { useI18n } from '@/hooks/web/useI18n'
const linkStore = useLinkStoreWithOut() const linkStore = useLinkStoreWithOut()
const requestStore = useRequestStoreWithOut() const requestStore = useRequestStoreWithOut()
const permissionStore = usePermissionStoreWithOut() const permissionStore = usePermissionStoreWithOut()
@ -48,6 +50,7 @@ const linkExist = ref(false)
const loading = ref(true) const loading = ref(true)
const linkExp = ref(false) const linkExp = ref(false)
const pwdValid = ref(false) const pwdValid = ref(false)
const { t } = useI18n()
const state = reactive({ const state = reactive({
ticketValidVO: { ticketValidVO: {
ticketValid: false, ticketValid: false,

View File

@ -1,16 +1,21 @@
<template> <template>
<div class="mobile-link-container" v-loading="loading"> <div class="mobile-link-container" v-loading="loading">
<ErrorTemplate v-if="!loading && disableError" msg="已禁用分享功能,请联系管理员!" /> <ErrorTemplate v-if="!loading && disableError" :msg="t('link_ticket.disable_error')" />
<IframeError v-else-if="!loading && iframeError" /> <ErrorTemplate v-else-if="!loading && iframeError" :msg="t('link_ticket.iframe_error')" />
<ErrorTemplate <ErrorTemplate
v-else-if="!loading && peRequireError" v-else-if="!loading && peRequireError"
msg="已设置有效期密码必填,当前链接无效!" :msg="t('link_ticket.pe_require_error')"
/> />
<LinkError v-else-if="!loading && !linkExist" /> <ErrorTemplate v-else-if="!loading && !linkExist" :msg="t('link_ticket.link_error')" />
<Exp v-else-if="!loading && linkExp" /> <ErrorTemplate v-else-if="!loading && linkExp" :msg="t('link_ticket.link_exp_error')" />
<PwdTips v-else-if="!loading && !pwdValid" /> <PwdTips v-else-if="!loading && !pwdValid" />
<TicketError <ErrorTemplate
v-else-if="!loading && (!state.ticketValidVO.ticketValid || state.ticketValidVO.ticketExp)" v-else-if="!loading && !state.ticketValidVO.ticketValid"
:msg="t('link_ticket.param_error')"
/>
<ErrorTemplate
v-else-if="!loading && state.ticketValidVO.ticketExp"
:msg="t('link_ticket.exp_error')"
/> />
<PreviewCanvas <PreviewCanvas
v-else v-else
@ -25,11 +30,8 @@
import { onMounted, nextTick, ref, reactive } from 'vue' import { onMounted, nextTick, ref, reactive } from 'vue'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain' import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import PreviewCanvas from '@/views/data-visualization/PreviewCanvasMobile.vue' import PreviewCanvas from '@/views/data-visualization/PreviewCanvasMobile.vue'
import TicketError from './TicketError.vue' import { useI18n } from '@/hooks/web/useI18n'
import { ProxyInfo, shareProxy } from './ShareProxy' import { ProxyInfo, shareProxy } from './ShareProxy'
import Exp from './exp.vue'
import LinkError from './error.vue'
import IframeError from './IframeError.vue'
import PwdTips from './pwd.vue' import PwdTips from './pwd.vue'
import ErrorTemplate from './ErrorTemplate.vue' import ErrorTemplate from './ErrorTemplate.vue'
const disableError = ref(true) const disableError = ref(true)
@ -42,6 +44,7 @@ const pwdValid = ref(false)
const dvMainStore = dvMainStoreWithOut() const dvMainStore = dvMainStoreWithOut()
const pcanvas = ref(null) const pcanvas = ref(null)
const curType = ref('') const curType = ref('')
const { t } = useI18n()
const state = reactive({ const state = reactive({
ticketValidVO: { ticketValidVO: {
ticketValid: false, ticketValid: false,

View File

@ -50,8 +50,6 @@ import { rsaEncryp } from '@/utils/encryption'
import { useCache } from '@/hooks/web/useCache' import { useCache } from '@/hooks/web/useCache'
import { queryDekey } from '@/api/login' import { queryDekey } from '@/api/login'
import { CustomPassword } from '@/components/custom-password' import { CustomPassword } from '@/components/custom-password'
import { useRoute } from 'vue-router'
const route = useRoute()
const { wsCache } = useCache() const { wsCache } = useCache()
const appStore = useAppStoreWithOut() const appStore = useAppStoreWithOut()
@ -59,6 +57,7 @@ const { t } = useI18n()
const msg = ref('') const msg = ref('')
const loading = ref(true) const loading = ref(true)
const pwdForm = ref<FormInstance>() const pwdForm = ref<FormInstance>()
const vid = ref('')
const form = ref({ const form = ref({
password: '' password: ''
}) })
@ -78,7 +77,7 @@ const refresh = async (formEl: FormInstance | undefined) => {
if (!formEl) return if (!formEl) return
await formEl.validate((valid, fields) => { await formEl.validate((valid, fields) => {
if (valid) { if (valid) {
const uuid = route.params.uuid const uuid = vid.value
const pwd = form.value.password const pwd = form.value.password
const text = `${uuid},${pwd}` const text = `${uuid},${pwd}`
const ciphertext = rsaEncryp(text) const ciphertext = rsaEncryp(text)
@ -95,17 +94,52 @@ const refresh = async (formEl: FormInstance | undefined) => {
} }
}) })
} }
const formatPwd = (pwdText: string) => {
try {
return decodeURIComponent(pwdText)
} catch (e) {
return pwdText
}
}
const prepare = () => {
const curLocation = window.location.href
const pmIndex = curLocation.lastIndexOf('?')
const uuidObj = curLocation.substring(
curLocation.lastIndexOf('de-link/') + 8,
pmIndex > 0 ? pmIndex : curLocation.length
)
let uuid = null
let pwd = null
if (uuidObj?.includes(',')) {
const index = uuidObj.indexOf(',')
uuid = uuidObj.substring(0, index)
if (uuidObj.length > index + 1) {
pwd = uuidObj.substring(index + 1)
}
} else {
uuid = uuidObj
}
vid.value = uuid
if (pwd) {
pwd = formatPwd(pwd)
form.value.password = pwd
refresh(pwdForm.value)
}
}
onMounted(() => { onMounted(() => {
if (!wsCache.get(appStore.getDekey)) { if (!wsCache.get(appStore.getDekey)) {
queryDekey() queryDekey()
.then(res => { .then(res => {
wsCache.set(appStore.getDekey, res.data) wsCache.set(appStore.getDekey, res.data)
prepare()
}) })
.finally(() => { .finally(() => {
loading.value = false loading.value = false
}) })
} else {
prepare()
loading.value = false
} }
loading.value = false
}) })
</script> </script>

View File

@ -5,6 +5,7 @@ import icon_dashboard_outlined from '@/assets/svg/icon_dashboard_outlined.svg'
import icon_database_outlined from '@/assets/svg/icon_database_outlined.svg' import icon_database_outlined from '@/assets/svg/icon_database_outlined.svg'
import icon_operationAnalysis_outlined from '@/assets/svg/icon_operation-analysis_outlined.svg' import icon_operationAnalysis_outlined from '@/assets/svg/icon_operation-analysis_outlined.svg'
import dvDashboardSpineMobile from '@/assets/svg/dv-dashboard-spine-mobile.svg' import dvDashboardSpineMobile from '@/assets/svg/dv-dashboard-spine-mobile.svg'
import dvDashboardSpineMobileDisabled from '@/assets/svg/dv-dashboard-spine-mobile-disabled.svg'
import icon_pc_outlined from '@/assets/svg/icon_pc_outlined.svg' import icon_pc_outlined from '@/assets/svg/icon_pc_outlined.svg'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { ref, reactive, watch, computed } from 'vue' import { ref, reactive, watch, computed } from 'vue'
@ -14,13 +15,11 @@ import dayjs from 'dayjs'
import { propTypes } from '@/utils/propTypes' import { propTypes } from '@/utils/propTypes'
import ShareHandler from './ShareHandler.vue' import ShareHandler from './ShareHandler.vue'
import { interactiveStoreWithOut } from '@/store/modules/interactive' import { interactiveStoreWithOut } from '@/store/modules/interactive'
import { useCache } from '@/hooks/web/useCache'
const props = defineProps({ const props = defineProps({
activeName: propTypes.string.def('') activeName: propTypes.string.def('')
}) })
const { wsCache } = useCache('localStorage')
const { t } = useI18n() const { t } = useI18n()
const interactiveStore = interactiveStoreWithOut() const interactiveStore = interactiveStoreWithOut()
@ -45,9 +44,11 @@ const handleCommand = (command: string) => {
const triggerFilterPanel = () => { const triggerFilterPanel = () => {
loadTableData() loadTableData()
} }
const preview = id => { const preview = (id, disabled = false) => {
const routeUrl = `/#/preview?dvId=${id}` if (!disabled) {
window.open(routeUrl, '_blank') const routeUrl = `/#/preview?dvId=${id}`
window.open(routeUrl, '_blank')
}
} }
const formatterTime = (_, _column, cellValue) => { const formatterTime = (_, _column, cellValue) => {
if (!cellValue) { if (!cellValue) {
@ -117,7 +118,7 @@ const getEmptyDesc = (): string => {
} }
const handleCellClick = row => { const handleCellClick = row => {
if (row) { if (row && row.extFlag1) {
const sourceId = row.resourceId const sourceId = row.resourceId
if (['dashboard', 'panel'].includes(row.type)) { if (['dashboard', 'panel'].includes(row.type)) {
window.open('#/panel/index?dvId=' + sourceId, '_self') window.open('#/panel/index?dvId=' + sourceId, '_self')
@ -131,9 +132,11 @@ const iconMap = {
panel: icon_dashboard_outlined, panel: icon_dashboard_outlined,
panelMobile: dvDashboardSpineMobile, panelMobile: dvDashboardSpineMobile,
dashboard: icon_dashboard_outlined, dashboard: icon_dashboard_outlined,
dashboardDisabled: icon_dashboard_outlined,
dashboardMobile: dvDashboardSpineMobile, dashboardMobile: dvDashboardSpineMobile,
screen: icon_operationAnalysis_outlined, screen: icon_operationAnalysis_outlined,
dataV: icon_operationAnalysis_outlined, dataV: icon_operationAnalysis_outlined,
dataVDisabled: icon_operationAnalysis_outlined,
dataset: icon_app_outlined, dataset: icon_app_outlined,
datasource: icon_database_outlined datasource: icon_database_outlined
} }
@ -201,16 +204,34 @@ watch(
<template v-slot:default="scope"> <template v-slot:default="scope">
<div class="name-content"> <div class="name-content">
<el-icon style="margin-right: 12px; font-size: 18px" v-if="scope.row.extFlag"> <el-icon style="margin-right: 12px; font-size: 18px" v-if="scope.row.extFlag">
<Icon name="dv-dashboard-spine-mobile" <Icon v-if="scope.row.extFlag1" name="dv-dashboard-spine-mobile"
><dvDashboardSpineMobile class="svg-icon" ><dvDashboardSpineMobile class="svg-icon"
/></Icon> /></Icon>
<Icon v-if="!scope.row.extFlag1" name="dv-dashboard-spine-mobile"
><dvDashboardSpineMobileDisabled class="svg-icon"
/></Icon>
</el-icon> </el-icon>
<el-icon v-else :class="`main-color color-${scope.row.type}`"> <el-icon
<Icon><component class="svg-icon" :is="iconMap[scope.row.type]"></component></Icon> v-else
:class="`main-color color-${scope.row.type} custom-color${
scope.row.extFlag1 ? '' : '-disabled'
}`"
>
<Icon
><component
class="svg-icon"
:is="iconMap[scope.row.type + (scope.row.extFlag1 ? '' : 'Disabled')]"
></component
></Icon>
</el-icon> </el-icon>
<el-tooltip placement="top"> <el-tooltip placement="top">
<template #content>{{ scope.row.name }}</template> <template #content>{{ scope.row.name }}</template>
<span class="ellipsis" style="max-width: 250px">{{ scope.row.name }}</span> <span
class="ellipsis"
:class="{ 'color-disabled': !scope.row.extFlag1 }"
style="max-width: 250px"
>{{ scope.row.name }}</span
>
</el-tooltip> </el-tooltip>
</div> </div>
</template> </template>
@ -233,16 +254,30 @@ watch(
<el-table-column width="96" fixed="right" key="_operation" :label="t('common.operate')"> <el-table-column width="96" fixed="right" key="_operation" :label="t('common.operate')">
<template #default="scope"> <template #default="scope">
<el-tooltip effect="dark" :content="t('work_branch.new_page_preview')" placement="top"> <div
<el-icon class="hover-icon hover-icon-in-table" @click="preview(scope.row.resourceId)"> style="display: flex; flex-direction: row; align-items: center"
<Icon><icon_pc_outlined class="svg-icon" /></Icon> :class="{ 'opt-disabled': !scope.row.extFlag1 }"
</el-icon> >
</el-tooltip> <el-tooltip
<ShareHandler :disabled="!scope.row.extFlag1"
:in-grid="true" effect="dark"
:resource-id="scope.row.resourceId" :content="t('work_branch.new_page_preview')"
:weight="scope.row.weight" placement="top"
/> >
<el-icon
class="hover-icon hover-icon-in-table"
@click="preview(scope.row.resourceId, !scope.row.extFlag1)"
>
<Icon><icon_pc_outlined class="svg-icon" /></Icon>
</el-icon>
</el-tooltip>
<ShareHandler
:in-grid="true"
:disabled="!scope.row.extFlag1"
:resource-id="scope.row.resourceId"
:weight="scope.row.weight"
/>
</div>
</template> </template>
</el-table-column> </el-table-column>
</GridTable> </GridTable>
@ -284,6 +319,7 @@ watch(
color: #fff; color: #fff;
background: #3370ff; background: #3370ff;
} }
.name-star { .name-star {
font-size: 15px; font-size: 15px;
padding-left: 5px; padding-left: 5px;
@ -296,4 +332,16 @@ watch(
line-height: 20px !important; line-height: 20px !important;
} }
} }
.color-disabled {
color: #bbbfc4;
}
.custom-color-disabled {
background: #bbbfc4 !important;
}
.opt-disabled {
opacity: 0.2;
cursor: not-allowed;
}
</style> </style>

View File

@ -2,6 +2,7 @@
<el-tooltip <el-tooltip
v-if="props.weight >= 7 && props.inGrid" v-if="props.weight >= 7 && props.inGrid"
effect="dark" effect="dark"
:disabled="disabled"
:content="t('visualization.share')" :content="t('visualization.share')"
placement="top" placement="top"
> >
@ -237,6 +238,7 @@ const { toClipboard } = useClipboard()
const { t } = useI18n() const { t } = useI18n()
const props = defineProps({ const props = defineProps({
inGrid: propTypes.bool.def(false), inGrid: propTypes.bool.def(false),
disabled: propTypes.bool.def(false),
resourceId: propTypes.string.def(''), resourceId: propTypes.string.def(''),
resourceType: propTypes.string.def(''), resourceType: propTypes.string.def(''),
weight: propTypes.number.def(0), weight: propTypes.number.def(0),
@ -381,8 +383,10 @@ const closeLoading = () => {
} }
const share = () => { const share = () => {
dialogVisible.value = true if (!props.disabled) {
loadShareInfo(validatePeRequire) dialogVisible.value = true
loadShareInfo(validatePeRequire)
}
} }
const loadShareInfo = cb => { const loadShareInfo = cb => {
@ -826,7 +830,7 @@ onMounted(() => {
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.1);
color: #8f959e; color: #8f959e;
&:hover { &:hover {
border: 1px solid #0089ff; box-shadow: 0 0 0 1px var(--ed-input-border-color, var(--ed-border-color)) inset;
} }
input { input {
color: #646a73; color: #646a73;

View File

@ -12,6 +12,7 @@
<el-button <el-button
secondary secondary
v-if="props.weight >= 7" v-if="props.weight >= 7"
:disabled="disabled"
@click="openPopover" @click="openPopover"
v-click-outside="clickOutPopover" v-click-outside="clickOutPopover"
> >
@ -242,7 +243,8 @@ const { t } = useI18n()
const props = defineProps({ const props = defineProps({
resourceId: propTypes.string.def(''), resourceId: propTypes.string.def(''),
resourceType: propTypes.string.def(''), resourceType: propTypes.string.def(''),
weight: propTypes.number.def(0) weight: propTypes.number.def(0),
disabled: propTypes.bool.def(false)
}) })
const popoverVisible = ref(false) const popoverVisible = ref(false)
const pwdRef = ref(null) const pwdRef = ref(null)
@ -847,7 +849,7 @@ defineExpose({
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.1);
color: #8f959e; color: #8f959e;
&:hover { &:hover {
border: 1px solid #0089ff; box-shadow: 0 0 0 1px var(--ed-input-border-color, var(--ed-border-color)) inset;
} }
input { input {
color: #646a73; color: #646a73;

View File

@ -16,6 +16,7 @@ const { t } = useI18n()
const dialogVisible = ref(false) const dialogVisible = ref(false)
const loadingInstance = ref(null) const loadingInstance = ref(null)
const ticketForm = ref<FormInstance>() const ticketForm = ref<FormInstance>()
const inputRefList = ref<HTMLElement[]>([])
const props = defineProps({ const props = defineProps({
uuid: propTypes.string.def('') uuid: propTypes.string.def('')
}) })
@ -148,7 +149,8 @@ const args2ArgList = () => {
const row = { name: key, val: JSON.stringify(val) } const row = { name: key, val: JSON.stringify(val) }
state.argList.push(row) state.argList.push(row)
} else { } else {
const row = { name: key, val: argObj[key] } const tempArray = [val]
const row = { name: key, val: JSON.stringify(tempArray) }
state.argList.push(row) state.argList.push(row)
} }
} }
@ -165,11 +167,56 @@ const argList2Args = () => {
const argObj = {} const argObj = {}
state.argList.forEach(row => { state.argList.forEach(row => {
if (row.name && row.val) { if (row.name && row.val) {
argObj[row.name] = row.val argObj[row.name] = JSON.parse(row.val)
} }
}) })
state.form.args = JSON.stringify(argObj) state.form.args = JSON.stringify(argObj)
} }
const setErrorStatus = (index, value, status?: boolean) => {
let valid = !!status
if (!value?.length) {
valid = true
} else if (status === null || typeof status === 'undefined') {
try {
JSON.parse(value)
valid = true
} catch (error) {
valid = false
}
}
const domRef = inputRefList[index]
const e = domRef.input
const className = 'link-ticket-error-msg'
const fullClassName = `.${className}`
if (valid) {
e.style = null
e.style.borderColor = null
const child = e.parentElement.querySelector(fullClassName)
if (child) {
e.parentElement['style'] = null
e.parentElement.removeChild(child)
}
} else {
const msg = 'JSON格式错误'
e.style.color = 'red'
e.style.borderColor = 'red'
e.parentElement['style']['box-shadow'] = '0 0 0 1px red inset'
const child = e.parentElement.querySelector(fullClassName)
if (!child) {
const errorDom = document.createElement('div')
errorDom.className = className
errorDom.innerText = msg
e.parentElement.appendChild(errorDom)
} else {
child.innerText = msg
}
}
}
const setInputRef = (el, index) => {
if (el) {
inputRefList[index] = el
}
}
const copyTicket = async ticket => { const copyTicket = async ticket => {
const url = `${linkUrl.value}?ticket=${ticket}` const url = `${linkUrl.value}?ticket=${ticket}`
try { try {
@ -212,7 +259,7 @@ defineExpose({
<el-drawer <el-drawer
:title="`${t('commons.add')} Ticket`" :title="`${t('commons.add')} Ticket`"
v-model="dialogVisible" v-model="dialogVisible"
custom-class="ticket-param-drawer" modal-class="ticket-param-drawer"
size="600px" size="600px"
direction="rtl" direction="rtl"
> >
@ -286,7 +333,12 @@ defineExpose({
</template> </template>
<div class="args-line" v-for="(row, index) in state.argList" :key="index"> <div class="args-line" v-for="(row, index) in state.argList" :key="index">
<el-input v-model="row['name']" :placeholder="t('visualization.input_param_name')" /> <el-input v-model="row['name']" :placeholder="t('visualization.input_param_name')" />
<el-input v-model="row['val']" :placeholder="t('link_ticket.arg_val_tips')" /> <el-input
:ref="el => setInputRef(el, index)"
v-model="row['val']"
:placeholder="t('link_ticket.arg_val_tips')"
@blur="setErrorStatus(index, row['val'])"
/>
<div <div
:style="{ opacity: state.argList.length !== 1 ? 1 : 0 }" :style="{ opacity: state.argList.length !== 1 ? 1 : 0 }"
class="arg-del-btn" class="arg-del-btn"
@ -403,6 +455,16 @@ defineExpose({
&:not(:last-child) { &:not(:last-child) {
margin-bottom: 8px; margin-bottom: 8px;
} }
:deep(.link-ticket-error-msg) {
color: red;
position: absolute;
z-index: 9;
font-size: 10px;
height: 10px;
top: 21px;
width: 350px;
left: 0px;
}
} }
.ticket-tips-label { .ticket-tips-label {
line-height: 22px; line-height: 22px;

View File

@ -254,7 +254,7 @@ defineExpose({
<el-drawer <el-drawer
:title="title" :title="title"
v-model="dialogVisible" v-model="dialogVisible"
custom-class="basic-param-drawer" modal-class="basic-param-drawer"
size="600px" size="600px"
direction="rtl" direction="rtl"
> >

View File

@ -191,7 +191,7 @@ defineExpose({
<el-drawer <el-drawer
:title="t('system.geographic_information')" :title="t('system.geographic_information')"
v-model="dialogVisible" v-model="dialogVisible"
custom-class="geometry-info-drawer" modal-class="geometry-info-drawer"
size="600px" size="600px"
direction="rtl" direction="rtl"
> >

View File

@ -7,6 +7,19 @@
<el-row> <el-row>
<el-col> <el-col>
<div class="online-form-item"> <div class="online-form-item">
<div class="map-item">
<div class="map-item-label">
<span class="form-label">{{ t('chart.map_type') }}</span>
</div>
</div>
<div class="map-item">
<el-select v-model="mapEditor.mapType" @change="initLoad">
<el-option value="gaode" :label="t('chart.map_type_gaode')" />
<el-option value="tianditu" :label="t('chart.map_type_tianditu')" />
<!-- <el-option value="baidu" :label="t('chart.map_type_baidu')" />-->
<el-option value="qq" :label="t('chart.map_type_tencent')" />
</el-select>
</div>
<div class="map-item"> <div class="map-item">
<div class="map-item-label"> <div class="map-item-label">
<span class="form-label">Key</span> <span class="form-label">Key</span>
@ -32,8 +45,21 @@
</el-button> </el-button>
</el-row> </el-row>
</el-aside> </el-aside>
<el-main> <el-main v-loading="mapLoading">
<div v-show="mapLoaded" v-if="!mapReloading" class="de-map-container" :id="domId" /> <OnlineMapGaode
v-if="!mapLoading && mapLoaded && mapEditor.key && mapEditor.mapType === 'gaode'"
:map-key="mapEditor.key"
:security-code="mapEditor.securityCode"
/>
<OnlineMapTdt
v-if="!mapLoading && mapLoaded && mapEditor.key && mapEditor.mapType === 'tianditu'"
:map-key="mapEditor.key"
/>
<OnlineMapQQ
v-if="!mapLoading && mapLoaded && mapEditor.key && mapEditor.mapType === 'qq'"
:map-key="mapEditor.key"
:security-code="mapEditor.securityCode"
/>
<EmptyBackground <EmptyBackground
v-if="!mapLoaded" v-if="!mapLoaded"
img-type="noneWhite" img-type="noneWhite"
@ -44,62 +70,24 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { nextTick, onMounted, reactive, ref } from 'vue' import { onMounted, reactive, ref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { queryMapKeyApi, saveMapKeyApi } from '@/api/setting/sysParameter' import { queryMapKeyApi, saveMapKeyApi, queryMapKeyApiByType } from '@/api/setting/sysParameter'
import { ElMessage } from 'element-plus-secondary' import { ElMessage } from 'element-plus-secondary'
import EmptyBackground from '@/components/empty-background/src/EmptyBackground.vue' import EmptyBackground from '@/components/empty-background/src/EmptyBackground.vue'
import OnlineMapTdt from './OnlineMapTdt.vue'
import OnlineMapGaode from './OnlineMapGaode.vue'
import OnlineMapQQ from './OnlineMapQQ.vue'
const { t } = useI18n() const { t } = useI18n()
const mapEditor = reactive({ const mapEditor = reactive({
key: '', key: '',
securityCode: '' securityCode: '',
mapType: ''
}) })
const mapInstance = ref(null)
const mapReloading = ref(false)
const domId = ref('de-map-container')
const mapLoaded = ref(false) const mapLoaded = ref(false)
const mapLoading = ref(false)
const loadMap = () => {
if (!mapEditor.key) {
return
}
const mykey = mapEditor.key
const url = `https://webapi.amap.com/maps?v=2.0&key=${mykey}`
loadScript(url)
.then(() => {
if (mapInstance.value) {
mapInstance.value?.destroy()
mapInstance.value = null
mapReloading.value = true
setTimeout(() => {
domId.value = domId.value + '-de-'
mapReloading.value = false
nextTick(() => {
createMapInstance()
})
}, 1500)
return
}
createMapInstance()
})
.catch(e => {
if (mapInstance.value) {
mapInstance.value.destroy()
mapInstance.value = null
}
console.error(e)
})
}
const createMapInstance = () => {
mapInstance.value = new window.AMap.Map(domId.value, {
viewMode: '2D',
zoom: 11,
center: [116.397428, 39.90923]
})
mapLoaded.value = true
}
const saveHandler = () => { const saveHandler = () => {
saveMapKeyApi(mapEditor) saveMapKeyApi(mapEditor)
.then(() => { .then(() => {
@ -110,41 +98,34 @@ const saveHandler = () => {
console.error(e) console.error(e)
}) })
} }
const initLoad = () => { const initLoad = (type?: string) => {
queryMapKeyApi() mapLoading.value = true
.then(res => { mapLoaded.value = false
mapEditor.key = res.data.key
mapEditor.securityCode = res.data.securityCode let f
loadMap() if (type) {
}) f = queryMapKeyApiByType(type)
} else {
f = queryMapKeyApi()
}
f.then(res => {
mapEditor.key = res.data.key
mapEditor.mapType = res.data.mapType
mapEditor.securityCode = res.data.securityCode
if (mapEditor.key) {
mapLoaded.value = true
}
})
.catch(e => { .catch(e => {
console.error(e) console.error(e)
}) })
.finally(() => {
setTimeout(() => {
mapLoading.value = false
}, 2000)
})
} }
const loadScript = (url: string) => {
return new Promise(function (resolve, reject) {
const scriptId = 'de-gaode-script-id'
let dom = document.getElementById(scriptId)
if (dom) {
dom.parentElement?.removeChild(dom)
dom = null
window.AMap = null
}
var script = document.createElement('script')
script.id = scriptId
script.onload = function () {
return resolve(null)
}
script.onerror = function () {
return reject(new Error('Load script from '.concat(url, ' failed')))
}
script.src = url
var head = document.head || document.getElementsByTagName('head')[0]
;(document.body || head).appendChild(script)
})
}
onMounted(() => { onMounted(() => {
initLoad() initLoad()
}) })
@ -154,6 +135,7 @@ onMounted(() => {
.de-map-container { .de-map-container {
height: 100%; height: 100%;
width: 100%; width: 100%;
position: relative;
} }
.online-map-container { .online-map-container {
height: 100%; height: 100%;