更新前端src/views/（mobile，panel，share，system）目录文件
This commit is contained in:
parent
8b6554263e
commit
84bf53266c
@ -127,7 +127,7 @@ watch(filterText, val => {
|
||||
})
|
||||
|
||||
const dataClick = val => {
|
||||
filterText.value = ''
|
||||
if (val.extraFlag1 === 0) return
|
||||
if (val.leaf) {
|
||||
emits('hiddenTabbar', true)
|
||||
handleCellClick(val)
|
||||
@ -155,7 +155,7 @@ const dfsTableData = arr => {
|
||||
}
|
||||
|
||||
const getTree = async () => {
|
||||
const request = { busiFlag: 'dashboard' } as BusiTreeRequest
|
||||
const request = { busiFlag: 'dashboard', resourceTable: 'core' } as BusiTreeRequest
|
||||
await interactiveStore.setInteractive(request)
|
||||
const interactiveData = interactiveStore.getPanel
|
||||
const nodeData = interactiveData.treeNodes
|
||||
@ -269,6 +269,7 @@ onMounted(() => {
|
||||
v-for="ele in activeTableData"
|
||||
:key="ele.id"
|
||||
@click="dataClick(ele)"
|
||||
:style="{ color: ele.extraFlag1 === 0 ? '#bbbfc4' : '#1f2329' }"
|
||||
:label="ele.name"
|
||||
:nextlevel="!ele.leaf"
|
||||
:prefix-icon="ele.leaf ? icon_dashboard : dvFolder"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<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 { useI18n } from '@/hooks/web/useI18n'
|
||||
import { shortcutOption } from '@/views/workbranch/ShortcutOption'
|
||||
@ -16,6 +16,8 @@ import 'vant/es/sticky/style'
|
||||
import 'vant/es/tab/style'
|
||||
import 'vant/es/nav-bar/style'
|
||||
import 'vant/es/tabs/style'
|
||||
import { cloneDeep, map } from 'lodash-es'
|
||||
import { XpackComponent } from '@/components/plugin'
|
||||
|
||||
const router = useRouter()
|
||||
const { t } = useI18n()
|
||||
@ -43,18 +45,6 @@ const loadTableData = () => {
|
||||
})
|
||||
}
|
||||
|
||||
const setEmptyTips = () => {
|
||||
emptyTips.value = state.tableData.length
|
||||
? ''
|
||||
: `暂无${
|
||||
{
|
||||
recent: '数据',
|
||||
store: '收藏',
|
||||
share: '分享'
|
||||
}[activeTab.value]
|
||||
}`
|
||||
}
|
||||
|
||||
const loadShareTableData = () => {
|
||||
emits('setLoading', true)
|
||||
request
|
||||
@ -71,12 +61,26 @@ const loadShareTableData = () => {
|
||||
})
|
||||
}
|
||||
|
||||
const tablePaneList = ref([
|
||||
const baseTablePaneList = ref([
|
||||
{ title: t('work_branch.recent'), name: 'recent', disabled: false },
|
||||
{ title: '我的收藏', name: 'store', 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 getBusiListWithPermission = () => {
|
||||
@ -87,22 +91,51 @@ const getBusiListWithPermission = () => {
|
||||
busiFlagList.push(baseFlagList[parseInt(key)])
|
||||
}
|
||||
}
|
||||
tablePaneList.value[0].disabled = !busiFlagList?.length
|
||||
tablePaneList.value[1].disabled =
|
||||
baseTablePaneList.value[0].disabled = !busiFlagList?.length
|
||||
baseTablePaneList.value[1].disabled =
|
||||
!busiFlagList.includes('panel') && !busiFlagList.includes('screen')
|
||||
return busiFlagList
|
||||
}
|
||||
|
||||
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 }) => {
|
||||
if (disabled) return
|
||||
if (name === 'recent' || name === 'store') {
|
||||
emits('setLoading', true)
|
||||
shortcutOption.setBusiFlag(name)
|
||||
loadTableData()
|
||||
} else {
|
||||
} else if (name === 'share') {
|
||||
loadShareTableData()
|
||||
} else {
|
||||
emptyTips.value = undefined
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
@ -116,6 +149,7 @@ onMounted(() => {
|
||||
})
|
||||
|
||||
const handleCellClick = ele => {
|
||||
if (ele.extFlag1 === 0) return
|
||||
wsCache.set('activeTab', activeTab.value)
|
||||
router.push({
|
||||
path: '/panel/mobile',
|
||||
@ -145,13 +179,20 @@ const formatterTime = val => {
|
||||
</van-tabs>
|
||||
</van-sticky>
|
||||
<div class="workbranch-cell-group">
|
||||
<Workbranch
|
||||
@click="handleCellClick(ele)"
|
||||
v-for="ele in state.tableData"
|
||||
:key="ele.id"
|
||||
size="large"
|
||||
:label="ele.name"
|
||||
:time="formatterTime(ele.lastEditTime || ele.time)"
|
||||
<template v-if="computedBaseTablePaneNameList.includes(activeTab)">
|
||||
<Workbranch
|
||||
@click="handleCellClick(ele)"
|
||||
v-for="ele in state.tableData"
|
||||
:key="ele.id"
|
||||
:style="{ color: ele.extFlag1 === 0 ? '#bbbfc4' : '#1f2329' }"
|
||||
size="large"
|
||||
:label="ele.name"
|
||||
:time="formatterTime(ele.lastEditTime || ele.time)"
|
||||
/>
|
||||
</template>
|
||||
<XpackComponent
|
||||
jsname="L21lbnUvZGF0YS9kYXRhLWZpbGxpbmcvZmlsbC9UYWJQYW5lVGFibGU="
|
||||
v-else-if="activeTab === 'data-filling'"
|
||||
/>
|
||||
</div>
|
||||
<div class="empty-img-mobile" v-if="!!emptyTips">
|
||||
@ -161,6 +202,11 @@ const formatterTime = val => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<XpackComponent
|
||||
jsname="L21lbnUvZGF0YS9kYXRhLWZpbGxpbmcvZmlsbC9UYWJQYW5l"
|
||||
@loaded="loadedDataFilling"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
@ -143,12 +143,7 @@ const onSubmit = async () => {
|
||||
return
|
||||
}
|
||||
showMfa.value = false
|
||||
if (!isLdap && mfa?.enabled) {
|
||||
for (const key in mfa) {
|
||||
mfaData.value[key] = mfa[key]
|
||||
}
|
||||
showMfa.value = true
|
||||
duringLogin.value = false
|
||||
if (toMfa(mfa)) {
|
||||
return
|
||||
}
|
||||
userStore.setToken(token)
|
||||
@ -177,6 +172,19 @@ const switchType = type => {
|
||||
const toMain = () => {
|
||||
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 = () => {
|
||||
xpackLoadFail.value = true
|
||||
showPlatLoginMask.value = false
|
||||
@ -248,6 +256,7 @@ const loadFail = () => {
|
||||
<XpackComponent
|
||||
jsname="L2NvbXBvbmVudC9sb2dpbi9Nb2JpbGVIYW5kbGVy"
|
||||
@switch-type="switchType"
|
||||
@to-mfa="toMfa"
|
||||
@to-main="toMain"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
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 { ref, nextTick, onBeforeMount } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { storeApi, storeStatusApi } from '@/api/visualization/dataVisualization'
|
||||
import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
|
||||
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
||||
import VanSticky from 'vant/es/sticky'
|
||||
@ -11,13 +15,15 @@ import 'vant/es/nav-bar/style'
|
||||
import 'vant/es/sticky/style'
|
||||
import { downloadCanvas2 } from '@/utils/imgUtils'
|
||||
import { useEmitt } from '@/hooks/web/useEmitt'
|
||||
import CanvasOptBar from '@/components/visualization/CanvasOptBar.vue'
|
||||
const dvMainStore = dvMainStoreWithOut()
|
||||
const state = reactive({
|
||||
canvasDataPreview: null,
|
||||
canvasStylePreview: null,
|
||||
canvasViewInfoPreview: null,
|
||||
dvInfo: {
|
||||
name: ''
|
||||
name: '',
|
||||
id: ''
|
||||
},
|
||||
curPreviewGap: 0
|
||||
})
|
||||
@ -46,6 +52,7 @@ const loadCanvasData = (dvId, weight?) => {
|
||||
state.curPreviewGap = curPreviewGap
|
||||
dataInitState.value = true
|
||||
nextTick(() => {
|
||||
storeQuery()
|
||||
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>
|
||||
|
||||
<template>
|
||||
@ -96,6 +122,29 @@ const onClickLeft = () => {
|
||||
<van-sticky>
|
||||
<van-nav-bar :title="state.dvInfo.name" left-arrow @click-left="onClickLeft" />
|
||||
</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
|
||||
ref="dashboardPreview"
|
||||
v-if="state.canvasStylePreview && dataInitState"
|
||||
@ -105,6 +154,7 @@ const onClickLeft = () => {
|
||||
:canvas-style-data="state.canvasStylePreview"
|
||||
:canvas-view-info="state.canvasViewInfoPreview"
|
||||
:download-status="downloadStatus"
|
||||
:show-linkage-button="false"
|
||||
></de-preview>
|
||||
</div>
|
||||
</template>
|
||||
@ -120,6 +170,15 @@ const onClickLeft = () => {
|
||||
--van-nav-bar-title-text-color: #1f2329;
|
||||
--van-font-bold: 500;
|
||||
--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 {
|
||||
height: calc(100% - 44px) !important;
|
||||
}
|
||||
|
||||
@ -87,7 +87,11 @@ const hanedleMessage = event => {
|
||||
mobileComponent['events'] = component['events']
|
||||
mobileComponent['propValue'] = component['propValue']
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -162,7 +162,7 @@ const activeTableData = computed(() => {
|
||||
<template>
|
||||
<div class="de-mobile-user">
|
||||
<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">
|
||||
<van-image round width="48" height="48" :src="userImg" />
|
||||
<div class="user-name">
|
||||
@ -185,43 +185,50 @@ const activeTableData = computed(() => {
|
||||
left-arrow
|
||||
@click-left="onClickLeft"
|
||||
/>
|
||||
<div class="grey">
|
||||
<div @click="clearOrg" class="flex-align-center">
|
||||
<span class="ellipsis" :class="!!directName.length && 'active'">组织</span>
|
||||
<el-icon v-if="!!directName.length">
|
||||
<Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
|
||||
</el-icon>
|
||||
</div>
|
||||
<div
|
||||
@click="handleDir(index)"
|
||||
class="flex-align-center"
|
||||
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">
|
||||
<Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
|
||||
</el-icon>
|
||||
<div class="cell-org_scroll">
|
||||
<div class="grey">
|
||||
<div @click="clearOrg" class="flex-align-center">
|
||||
<span class="ellipsis" :class="!!directName.length && 'active'">组织</span>
|
||||
<el-icon v-if="!!directName.length">
|
||||
<Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
|
||||
</el-icon>
|
||||
</div>
|
||||
<div
|
||||
@click="handleDir(index)"
|
||||
class="flex-align-center"
|
||||
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">
|
||||
<Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
|
||||
</el-icon>
|
||||
</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>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.de-mobile-user {
|
||||
height: 100vh;
|
||||
height: calc(100% - 50px);
|
||||
width: 100vw;
|
||||
background: #f5f6f7;
|
||||
|
||||
.cell-org_scroll {
|
||||
height: calc(100% - 144px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.mobile-user-top {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
|
||||
@ -18,9 +18,12 @@ export interface ProxyInfo {
|
||||
shareDisable: boolean
|
||||
peRequireValid: boolean
|
||||
ticketValidVO: TicketValidVO
|
||||
pwd?: string
|
||||
uuid: string
|
||||
}
|
||||
class ShareProxy {
|
||||
uuid: string
|
||||
pwd?: string
|
||||
constructor() {
|
||||
this.uuid = ''
|
||||
}
|
||||
@ -48,7 +51,16 @@ class ShareProxy {
|
||||
curLocation.lastIndexOf('de-link/') + 8,
|
||||
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() {
|
||||
this.setUuid()
|
||||
@ -66,6 +78,12 @@ class ShareProxy {
|
||||
}
|
||||
const res = await request.post({ url, data: param })
|
||||
const proxyInfo: ProxyInfo = res.data as ProxyInfo
|
||||
if (proxyInfo) {
|
||||
proxyInfo.uuid = uuid
|
||||
if (this.pwd) {
|
||||
proxyInfo.pwd = this.pwd
|
||||
}
|
||||
}
|
||||
return proxyInfo
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,17 +3,22 @@
|
||||
class="link-container"
|
||||
v-loading="loading || requestStore.loadingMap[permissionStore.currentPath]"
|
||||
>
|
||||
<ErrorTemplate v-if="!loading && disableError" msg="已禁用分享功能，请联系管理员！" />
|
||||
<IframeError v-else-if="!loading && iframeError" />
|
||||
<ErrorTemplate v-if="!loading && disableError" :msg="t('link_ticket.disable_error')" />
|
||||
<ErrorTemplate v-else-if="!loading && iframeError" :msg="t('link_ticket.iframe_error')" />
|
||||
<ErrorTemplate
|
||||
v-else-if="!loading && peRequireError"
|
||||
msg="已设置有效期密码必填，当前链接无效！"
|
||||
:msg="t('link_ticket.pe_require_error')"
|
||||
/>
|
||||
<LinkError v-else-if="!loading && !linkExist" />
|
||||
<Exp v-else-if="!loading && linkExp" />
|
||||
<ErrorTemplate v-else-if="!loading && !linkExist" :msg="t('link_ticket.link_error')" />
|
||||
<ErrorTemplate v-else-if="!loading && linkExp" :msg="t('link_ticket.link_exp_error')" />
|
||||
<PwdTips v-else-if="!loading && !pwdValid" />
|
||||
<TicketError
|
||||
v-else-if="!loading && (!state.ticketValidVO.ticketValid || state.ticketValidVO.ticketExp)"
|
||||
<ErrorTemplate
|
||||
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
|
||||
v-else
|
||||
@ -30,13 +35,10 @@ import { useRequestStoreWithOut } from '@/store/modules/request'
|
||||
import { usePermissionStoreWithOut } from '@/store/modules/permission'
|
||||
import PreviewCanvas from '@/views/data-visualization/PreviewCanvas.vue'
|
||||
import { ProxyInfo, shareProxy } from './ShareProxy'
|
||||
import Exp from './exp.vue'
|
||||
import LinkError from './error.vue'
|
||||
import PwdTips from './pwd.vue'
|
||||
import IframeError from './IframeError.vue'
|
||||
import TicketError from './TicketError.vue'
|
||||
import ErrorTemplate from './ErrorTemplate.vue'
|
||||
import { useLinkStoreWithOut } from '@/store/modules/link'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
const linkStore = useLinkStoreWithOut()
|
||||
const requestStore = useRequestStoreWithOut()
|
||||
const permissionStore = usePermissionStoreWithOut()
|
||||
@ -48,6 +50,7 @@ const linkExist = ref(false)
|
||||
const loading = ref(true)
|
||||
const linkExp = ref(false)
|
||||
const pwdValid = ref(false)
|
||||
const { t } = useI18n()
|
||||
const state = reactive({
|
||||
ticketValidVO: {
|
||||
ticketValid: false,
|
||||
|
||||
@ -1,16 +1,21 @@
|
||||
<template>
|
||||
<div class="mobile-link-container" v-loading="loading">
|
||||
<ErrorTemplate v-if="!loading && disableError" msg="已禁用分享功能，请联系管理员！" />
|
||||
<IframeError v-else-if="!loading && iframeError" />
|
||||
<ErrorTemplate v-if="!loading && disableError" :msg="t('link_ticket.disable_error')" />
|
||||
<ErrorTemplate v-else-if="!loading && iframeError" :msg="t('link_ticket.iframe_error')" />
|
||||
<ErrorTemplate
|
||||
v-else-if="!loading && peRequireError"
|
||||
msg="已设置有效期密码必填，当前链接无效！"
|
||||
:msg="t('link_ticket.pe_require_error')"
|
||||
/>
|
||||
<LinkError v-else-if="!loading && !linkExist" />
|
||||
<Exp v-else-if="!loading && linkExp" />
|
||||
<ErrorTemplate v-else-if="!loading && !linkExist" :msg="t('link_ticket.link_error')" />
|
||||
<ErrorTemplate v-else-if="!loading && linkExp" :msg="t('link_ticket.link_exp_error')" />
|
||||
<PwdTips v-else-if="!loading && !pwdValid" />
|
||||
<TicketError
|
||||
v-else-if="!loading && (!state.ticketValidVO.ticketValid || state.ticketValidVO.ticketExp)"
|
||||
<ErrorTemplate
|
||||
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
|
||||
v-else
|
||||
@ -25,11 +30,8 @@
|
||||
import { onMounted, nextTick, ref, reactive } from 'vue'
|
||||
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
||||
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 Exp from './exp.vue'
|
||||
import LinkError from './error.vue'
|
||||
import IframeError from './IframeError.vue'
|
||||
import PwdTips from './pwd.vue'
|
||||
import ErrorTemplate from './ErrorTemplate.vue'
|
||||
const disableError = ref(true)
|
||||
@ -42,6 +44,7 @@ const pwdValid = ref(false)
|
||||
const dvMainStore = dvMainStoreWithOut()
|
||||
const pcanvas = ref(null)
|
||||
const curType = ref('')
|
||||
const { t } = useI18n()
|
||||
const state = reactive({
|
||||
ticketValidVO: {
|
||||
ticketValid: false,
|
||||
|
||||
@ -50,8 +50,6 @@ import { rsaEncryp } from '@/utils/encryption'
|
||||
import { useCache } from '@/hooks/web/useCache'
|
||||
import { queryDekey } from '@/api/login'
|
||||
import { CustomPassword } from '@/components/custom-password'
|
||||
import { useRoute } from 'vue-router'
|
||||
const route = useRoute()
|
||||
const { wsCache } = useCache()
|
||||
const appStore = useAppStoreWithOut()
|
||||
|
||||
@ -59,6 +57,7 @@ const { t } = useI18n()
|
||||
const msg = ref('')
|
||||
const loading = ref(true)
|
||||
const pwdForm = ref<FormInstance>()
|
||||
const vid = ref('')
|
||||
const form = ref({
|
||||
password: ''
|
||||
})
|
||||
@ -78,7 +77,7 @@ const refresh = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
await formEl.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
const uuid = route.params.uuid
|
||||
const uuid = vid.value
|
||||
const pwd = form.value.password
|
||||
const text = `${uuid},${pwd}`
|
||||
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(() => {
|
||||
if (!wsCache.get(appStore.getDekey)) {
|
||||
queryDekey()
|
||||
.then(res => {
|
||||
wsCache.set(appStore.getDekey, res.data)
|
||||
prepare()
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
} else {
|
||||
prepare()
|
||||
loading.value = false
|
||||
}
|
||||
loading.value = false
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
@ -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_operationAnalysis_outlined from '@/assets/svg/icon_operation-analysis_outlined.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 { useI18n } from '@/hooks/web/useI18n'
|
||||
import { ref, reactive, watch, computed } from 'vue'
|
||||
@ -14,13 +15,11 @@ import dayjs from 'dayjs'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
import ShareHandler from './ShareHandler.vue'
|
||||
import { interactiveStoreWithOut } from '@/store/modules/interactive'
|
||||
import { useCache } from '@/hooks/web/useCache'
|
||||
|
||||
const props = defineProps({
|
||||
activeName: propTypes.string.def('')
|
||||
})
|
||||
|
||||
const { wsCache } = useCache('localStorage')
|
||||
const { t } = useI18n()
|
||||
const interactiveStore = interactiveStoreWithOut()
|
||||
|
||||
@ -45,9 +44,11 @@ const handleCommand = (command: string) => {
|
||||
const triggerFilterPanel = () => {
|
||||
loadTableData()
|
||||
}
|
||||
const preview = id => {
|
||||
const routeUrl = `/#/preview?dvId=${id}`
|
||||
window.open(routeUrl, '_blank')
|
||||
const preview = (id, disabled = false) => {
|
||||
if (!disabled) {
|
||||
const routeUrl = `/#/preview?dvId=${id}`
|
||||
window.open(routeUrl, '_blank')
|
||||
}
|
||||
}
|
||||
const formatterTime = (_, _column, cellValue) => {
|
||||
if (!cellValue) {
|
||||
@ -117,7 +118,7 @@ const getEmptyDesc = (): string => {
|
||||
}
|
||||
|
||||
const handleCellClick = row => {
|
||||
if (row) {
|
||||
if (row && row.extFlag1) {
|
||||
const sourceId = row.resourceId
|
||||
if (['dashboard', 'panel'].includes(row.type)) {
|
||||
window.open('#/panel/index?dvId=' + sourceId, '_self')
|
||||
@ -131,9 +132,11 @@ const iconMap = {
|
||||
panel: icon_dashboard_outlined,
|
||||
panelMobile: dvDashboardSpineMobile,
|
||||
dashboard: icon_dashboard_outlined,
|
||||
dashboardDisabled: icon_dashboard_outlined,
|
||||
dashboardMobile: dvDashboardSpineMobile,
|
||||
screen: icon_operationAnalysis_outlined,
|
||||
dataV: icon_operationAnalysis_outlined,
|
||||
dataVDisabled: icon_operationAnalysis_outlined,
|
||||
dataset: icon_app_outlined,
|
||||
datasource: icon_database_outlined
|
||||
}
|
||||
@ -201,16 +204,34 @@ watch(
|
||||
<template v-slot:default="scope">
|
||||
<div class="name-content">
|
||||
<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"
|
||||
/></Icon>
|
||||
<Icon v-if="!scope.row.extFlag1" name="dv-dashboard-spine-mobile"
|
||||
><dvDashboardSpineMobileDisabled class="svg-icon"
|
||||
/></Icon>
|
||||
</el-icon>
|
||||
<el-icon v-else :class="`main-color color-${scope.row.type}`">
|
||||
<Icon><component class="svg-icon" :is="iconMap[scope.row.type]"></component></Icon>
|
||||
<el-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-tooltip placement="top">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
@ -233,16 +254,30 @@ watch(
|
||||
|
||||
<el-table-column width="96" fixed="right" key="_operation" :label="t('common.operate')">
|
||||
<template #default="scope">
|
||||
<el-tooltip effect="dark" :content="t('work_branch.new_page_preview')" placement="top">
|
||||
<el-icon class="hover-icon hover-icon-in-table" @click="preview(scope.row.resourceId)">
|
||||
<Icon><icon_pc_outlined class="svg-icon" /></Icon>
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
<ShareHandler
|
||||
:in-grid="true"
|
||||
:resource-id="scope.row.resourceId"
|
||||
:weight="scope.row.weight"
|
||||
/>
|
||||
<div
|
||||
style="display: flex; flex-direction: row; align-items: center"
|
||||
:class="{ 'opt-disabled': !scope.row.extFlag1 }"
|
||||
>
|
||||
<el-tooltip
|
||||
:disabled="!scope.row.extFlag1"
|
||||
effect="dark"
|
||||
:content="t('work_branch.new_page_preview')"
|
||||
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>
|
||||
</el-table-column>
|
||||
</GridTable>
|
||||
@ -284,6 +319,7 @@ watch(
|
||||
color: #fff;
|
||||
background: #3370ff;
|
||||
}
|
||||
|
||||
.name-star {
|
||||
font-size: 15px;
|
||||
padding-left: 5px;
|
||||
@ -296,4 +332,16 @@ watch(
|
||||
line-height: 20px !important;
|
||||
}
|
||||
}
|
||||
.color-disabled {
|
||||
color: #bbbfc4;
|
||||
}
|
||||
|
||||
.custom-color-disabled {
|
||||
background: #bbbfc4 !important;
|
||||
}
|
||||
|
||||
.opt-disabled {
|
||||
opacity: 0.2;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
<el-tooltip
|
||||
v-if="props.weight >= 7 && props.inGrid"
|
||||
effect="dark"
|
||||
:disabled="disabled"
|
||||
:content="t('visualization.share')"
|
||||
placement="top"
|
||||
>
|
||||
@ -237,6 +238,7 @@ const { toClipboard } = useClipboard()
|
||||
const { t } = useI18n()
|
||||
const props = defineProps({
|
||||
inGrid: propTypes.bool.def(false),
|
||||
disabled: propTypes.bool.def(false),
|
||||
resourceId: propTypes.string.def(''),
|
||||
resourceType: propTypes.string.def(''),
|
||||
weight: propTypes.number.def(0),
|
||||
@ -381,8 +383,10 @@ const closeLoading = () => {
|
||||
}
|
||||
|
||||
const share = () => {
|
||||
dialogVisible.value = true
|
||||
loadShareInfo(validatePeRequire)
|
||||
if (!props.disabled) {
|
||||
dialogVisible.value = true
|
||||
loadShareInfo(validatePeRequire)
|
||||
}
|
||||
}
|
||||
|
||||
const loadShareInfo = cb => {
|
||||
@ -826,7 +830,7 @@ onMounted(() => {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
color: #8f959e;
|
||||
&:hover {
|
||||
border: 1px solid #0089ff;
|
||||
box-shadow: 0 0 0 1px var(--ed-input-border-color, var(--ed-border-color)) inset;
|
||||
}
|
||||
input {
|
||||
color: #646a73;
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
<el-button
|
||||
secondary
|
||||
v-if="props.weight >= 7"
|
||||
:disabled="disabled"
|
||||
@click="openPopover"
|
||||
v-click-outside="clickOutPopover"
|
||||
>
|
||||
@ -242,7 +243,8 @@ const { t } = useI18n()
|
||||
const props = defineProps({
|
||||
resourceId: 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 pwdRef = ref(null)
|
||||
@ -847,7 +849,7 @@ defineExpose({
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
color: #8f959e;
|
||||
&:hover {
|
||||
border: 1px solid #0089ff;
|
||||
box-shadow: 0 0 0 1px var(--ed-input-border-color, var(--ed-border-color)) inset;
|
||||
}
|
||||
input {
|
||||
color: #646a73;
|
||||
|
||||
@ -16,6 +16,7 @@ const { t } = useI18n()
|
||||
const dialogVisible = ref(false)
|
||||
const loadingInstance = ref(null)
|
||||
const ticketForm = ref<FormInstance>()
|
||||
const inputRefList = ref<HTMLElement[]>([])
|
||||
const props = defineProps({
|
||||
uuid: propTypes.string.def('')
|
||||
})
|
||||
@ -148,7 +149,8 @@ const args2ArgList = () => {
|
||||
const row = { name: key, val: JSON.stringify(val) }
|
||||
state.argList.push(row)
|
||||
} else {
|
||||
const row = { name: key, val: argObj[key] }
|
||||
const tempArray = [val]
|
||||
const row = { name: key, val: JSON.stringify(tempArray) }
|
||||
state.argList.push(row)
|
||||
}
|
||||
}
|
||||
@ -165,11 +167,56 @@ const argList2Args = () => {
|
||||
const argObj = {}
|
||||
state.argList.forEach(row => {
|
||||
if (row.name && row.val) {
|
||||
argObj[row.name] = row.val
|
||||
argObj[row.name] = JSON.parse(row.val)
|
||||
}
|
||||
})
|
||||
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 url = `${linkUrl.value}?ticket=${ticket}`
|
||||
try {
|
||||
@ -212,7 +259,7 @@ defineExpose({
|
||||
<el-drawer
|
||||
:title="`${t('commons.add')} Ticket`"
|
||||
v-model="dialogVisible"
|
||||
custom-class="ticket-param-drawer"
|
||||
modal-class="ticket-param-drawer"
|
||||
size="600px"
|
||||
direction="rtl"
|
||||
>
|
||||
@ -286,7 +333,12 @@ defineExpose({
|
||||
</template>
|
||||
<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['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
|
||||
:style="{ opacity: state.argList.length !== 1 ? 1 : 0 }"
|
||||
class="arg-del-btn"
|
||||
@ -403,6 +455,16 @@ defineExpose({
|
||||
&:not(:last-child) {
|
||||
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 {
|
||||
line-height: 22px;
|
||||
|
||||
@ -254,7 +254,7 @@ defineExpose({
|
||||
<el-drawer
|
||||
:title="title"
|
||||
v-model="dialogVisible"
|
||||
custom-class="basic-param-drawer"
|
||||
modal-class="basic-param-drawer"
|
||||
size="600px"
|
||||
direction="rtl"
|
||||
>
|
||||
|
||||
@ -191,7 +191,7 @@ defineExpose({
|
||||
<el-drawer
|
||||
:title="t('system.geographic_information')"
|
||||
v-model="dialogVisible"
|
||||
custom-class="geometry-info-drawer"
|
||||
modal-class="geometry-info-drawer"
|
||||
size="600px"
|
||||
direction="rtl"
|
||||
>
|
||||
|
||||
@ -7,6 +7,19 @@
|
||||
<el-row>
|
||||
<el-col>
|
||||
<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-label">
|
||||
<span class="form-label">Key</span>
|
||||
@ -32,8 +45,21 @@
|
||||
</el-button>
|
||||
</el-row>
|
||||
</el-aside>
|
||||
<el-main>
|
||||
<div v-show="mapLoaded" v-if="!mapReloading" class="de-map-container" :id="domId" />
|
||||
<el-main v-loading="mapLoading">
|
||||
<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
|
||||
v-if="!mapLoaded"
|
||||
img-type="noneWhite"
|
||||
@ -44,62 +70,24 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { nextTick, onMounted, reactive, ref } from 'vue'
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
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 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 mapEditor = reactive({
|
||||
key: '',
|
||||
securityCode: ''
|
||||
securityCode: '',
|
||||
mapType: ''
|
||||
})
|
||||
const mapInstance = ref(null)
|
||||
const mapReloading = ref(false)
|
||||
const domId = ref('de-map-container')
|
||||
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 = () => {
|
||||
saveMapKeyApi(mapEditor)
|
||||
.then(() => {
|
||||
@ -110,41 +98,34 @@ const saveHandler = () => {
|
||||
console.error(e)
|
||||
})
|
||||
}
|
||||
const initLoad = () => {
|
||||
queryMapKeyApi()
|
||||
.then(res => {
|
||||
mapEditor.key = res.data.key
|
||||
mapEditor.securityCode = res.data.securityCode
|
||||
loadMap()
|
||||
})
|
||||
const initLoad = (type?: string) => {
|
||||
mapLoading.value = true
|
||||
mapLoaded.value = false
|
||||
|
||||
let f
|
||||
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 => {
|
||||
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(() => {
|
||||
initLoad()
|
||||
})
|
||||
@ -154,6 +135,7 @@ onMounted(() => {
|
||||
.de-map-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.online-map-container {
|
||||
height: 100%;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user