更新前端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 => {
|
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"
|
||||||
|
@ -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,14 +179,21 @@ const formatterTime = val => {
|
|||||||
</van-tabs>
|
</van-tabs>
|
||||||
</van-sticky>
|
</van-sticky>
|
||||||
<div class="workbranch-cell-group">
|
<div class="workbranch-cell-group">
|
||||||
|
<template v-if="computedBaseTablePaneNameList.includes(activeTab)">
|
||||||
<Workbranch
|
<Workbranch
|
||||||
@click="handleCellClick(ele)"
|
@click="handleCellClick(ele)"
|
||||||
v-for="ele in state.tableData"
|
v-for="ele in state.tableData"
|
||||||
:key="ele.id"
|
:key="ele.id"
|
||||||
|
:style="{ color: ele.extFlag1 === 0 ? '#bbbfc4' : '#1f2329' }"
|
||||||
size="large"
|
size="large"
|
||||||
:label="ele.name"
|
:label="ele.name"
|
||||||
:time="formatterTime(ele.lastEditTime || ele.time)"
|
: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">
|
||||||
<img width="125" height="125" :src="nothingNone" alt="" />
|
<img width="125" height="125" :src="nothingNone" alt="" />
|
||||||
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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)
|
||||||
|
if (mobileComponent.component === 'VQuery') {
|
||||||
useEmitt().emitter.emit('renderChart-' + component.id, otherComponent)
|
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>
|
<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,6 +185,7 @@ const activeTableData = computed(() => {
|
|||||||
left-arrow
|
left-arrow
|
||||||
@click-left="onClickLeft"
|
@click-left="onClickLeft"
|
||||||
/>
|
/>
|
||||||
|
<div class="cell-org_scroll">
|
||||||
<div class="grey">
|
<div class="grey">
|
||||||
<div @click="clearOrg" class="flex-align-center">
|
<div @click="clearOrg" class="flex-align-center">
|
||||||
<span class="ellipsis" :class="!!directName.length && 'active'">组织</span>
|
<span class="ellipsis" :class="!!directName.length && 'active'">组织</span>
|
||||||
@ -212,16 +213,22 @@ const activeTableData = computed(() => {
|
|||||||
:nextlevel="ele.children"
|
:nextlevel="ele.children"
|
||||||
:active="name === ele.name"
|
:active="name === ele.name"
|
||||||
></OrgCell>
|
></OrgCell>
|
||||||
|
</div>
|
||||||
</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;
|
||||||
|
@ -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,8 +51,17 @@ class ShareProxy {
|
|||||||
curLocation.lastIndexOf('de-link/') + 8,
|
curLocation.lastIndexOf('de-link/') + 8,
|
||||||
pmIndex > 0 ? pmIndex : curLocation.length
|
pmIndex > 0 ? pmIndex : curLocation.length
|
||||||
)
|
)
|
||||||
|
|
||||||
|
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
|
this.uuid = uuidObj
|
||||||
}
|
}
|
||||||
|
}
|
||||||
async loadProxy() {
|
async loadProxy() {
|
||||||
this.setUuid()
|
this.setUuid()
|
||||||
if (!this.uuid) {
|
if (!this.uuid) {
|
||||||
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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,
|
||||||
|
@ -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,
|
||||||
|
@ -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>
|
||||||
|
|
||||||
|
@ -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,10 +44,12 @@ const handleCommand = (command: string) => {
|
|||||||
const triggerFilterPanel = () => {
|
const triggerFilterPanel = () => {
|
||||||
loadTableData()
|
loadTableData()
|
||||||
}
|
}
|
||||||
const preview = id => {
|
const preview = (id, disabled = false) => {
|
||||||
|
if (!disabled) {
|
||||||
const routeUrl = `/#/preview?dvId=${id}`
|
const routeUrl = `/#/preview?dvId=${id}`
|
||||||
window.open(routeUrl, '_blank')
|
window.open(routeUrl, '_blank')
|
||||||
}
|
}
|
||||||
|
}
|
||||||
const formatterTime = (_, _column, cellValue) => {
|
const formatterTime = (_, _column, cellValue) => {
|
||||||
if (!cellValue) {
|
if (!cellValue) {
|
||||||
return '-'
|
return '-'
|
||||||
@ -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"
|
||||||
|
: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>
|
<Icon><icon_pc_outlined class="svg-icon" /></Icon>
|
||||||
</el-icon>
|
</el-icon>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
<ShareHandler
|
<ShareHandler
|
||||||
:in-grid="true"
|
:in-grid="true"
|
||||||
|
:disabled="!scope.row.extFlag1"
|
||||||
:resource-id="scope.row.resourceId"
|
:resource-id="scope.row.resourceId"
|
||||||
:weight="scope.row.weight"
|
: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>
|
||||||
|
@ -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,9 +383,11 @@ const closeLoading = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const share = () => {
|
const share = () => {
|
||||||
|
if (!props.disabled) {
|
||||||
dialogVisible.value = true
|
dialogVisible.value = true
|
||||||
loadShareInfo(validatePeRequire)
|
loadShareInfo(validatePeRequire)
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const loadShareInfo = cb => {
|
const loadShareInfo = cb => {
|
||||||
showLoading()
|
showLoading()
|
||||||
@ -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;
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
@ -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"
|
||||||
>
|
>
|
||||||
|
@ -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"
|
||||||
>
|
>
|
||||||
|
@ -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
|
||||||
|
|
||||||
|
let f
|
||||||
|
if (type) {
|
||||||
|
f = queryMapKeyApiByType(type)
|
||||||
|
} else {
|
||||||
|
f = queryMapKeyApi()
|
||||||
|
}
|
||||||
|
f.then(res => {
|
||||||
mapEditor.key = res.data.key
|
mapEditor.key = res.data.key
|
||||||
|
mapEditor.mapType = res.data.mapType
|
||||||
mapEditor.securityCode = res.data.securityCode
|
mapEditor.securityCode = res.data.securityCode
|
||||||
loadMap()
|
|
||||||
|
if (mapEditor.key) {
|
||||||
|
mapLoaded.value = true
|
||||||
|
}
|
||||||
})
|
})
|
||||||
.catch(e => {
|
.catch(e => {
|
||||||
console.error(e)
|
console.error(e)
|
||||||
})
|
})
|
||||||
}
|
.finally(() => {
|
||||||
const loadScript = (url: string) => {
|
setTimeout(() => {
|
||||||
return new Promise(function (resolve, reject) {
|
mapLoading.value = false
|
||||||
const scriptId = 'de-gaode-script-id'
|
}, 2000)
|
||||||
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%;
|
||||||
|
Loading…
Reference in New Issue
Block a user