fix: 修改绘制界面样式,新增返回首页按钮

This commit is contained in:
mtruning 2022-01-09 17:12:35 +08:00
parent a0fdd752d4
commit f665b75fc4
10 changed files with 118 additions and 61 deletions

View File

@ -36,7 +36,8 @@ import {
Cube as CubeIcon,
ChevronBackOutline as ChevronBackOutlineIcon,
Flash as FlashIcon,
SettingsSharp as SettingsSharpIcon
SettingsSharp as SettingsSharpIcon,
Home as HomeIcon
} from '@vicons/ionicons5'
// ionicons5 在这里
@ -116,7 +117,9 @@ const ionicons5 = {
// 后端数据(闪电)
FlashIcon,
// 设置(齿轮)
SettingsSharpIcon
SettingsSharpIcon,
// 回退
HomeIcon
}
// https://www.xicons.org/#/ 还有很多

View File

@ -1,7 +1,9 @@
import { useRoute } from 'vue-router'
import { ResultEnum } from '@/enums/httpEnum'
import { ErrorPageNameMap, PageEnum } from '@/enums/pageEnum'
import router from '@/router'
import { docPath, giteeSourceCodePath } from '@/settings/pathConst'
import { goDialog } from '@/utils/plugin'
/**
* *
@ -21,12 +23,12 @@ export const routerTurnByName = (
}
if (isReplace) {
router.replace({
name: pageName
name: pageName,
})
return
}
router.push({
name: pageName
name: pageName,
})
}
@ -37,7 +39,7 @@ export const routerTurnByName = (
*/
export const fetchPathByName = (pageName: string, p?: string) => {
const pathData = router.resolve({
name: pageName
name: pageName,
})
return p ? (pathData as any)[p] : pathData
}
@ -65,12 +67,12 @@ export const routerTurnByPath = (
}
if (isReplace) {
router.replace({
path: fullPath
path: fullPath,
})
return
}
router.push({
path: fullPath
path: fullPath,
})
}
@ -123,3 +125,27 @@ export const openDoc = () => {
export const openGiteeSourceCode = () => {
openNewWindow(giteeSourceCodePath)
}
/**
* *
* @returns object
*/
export const fetchRouteParams = () => {
const route = useRoute()
return route.params
}
/**
* *
* @param confirm
*/
export const goHome = (confirm?: boolean, message?: string) => {
if (confirm) {
goDialog({
message,
onPositiveCallback: () => {
routerTurnByName(PageEnum.BASE_HOME_NAME)
},
})
}
}

View File

@ -7,16 +7,16 @@ import { renderIcon } from '@/utils'
/**
* * render
* @param { Function } dialogFn dialog函数
* @param { Object} params
* @param { Function } dialogFn
*/
export const goDialog = (
params: {
// 基本
type: DialogEnum
type?: DialogEnum
message?: string
// 回调
onPositiveCallback?: Function
onPositiveCallback: Function
onNegativeCallback?: Function
// 异步
promise?: boolean
@ -56,12 +56,13 @@ export const goDialog = (
}
}
const d: DialogReactive = (typeObj as any)[type]['fn']({
const d: DialogReactive = (typeObj as any)[type || DialogEnum.warning]['fn']({
title: '提示',
icon: renderIcon(InformationCircleIcon, { size: dialogIconSize }),
content: (typeObj as any)[type]['message'],
content: (typeObj as any)[type || DialogEnum.warning]['message'],
positiveText: '确定',
negativeText: '取消',
// 是否通过遮罩关闭
maskClosable: maskClosable,
onPositiveClick: async () => {
// 执行异步

View File

@ -55,6 +55,12 @@ export const requireFallbackImg = (path?: string, name?: string) => {
).href
}
/**
*
* @param isFullscreen
* @param isEnabled
* @returns
*/
export const screenfullFn = (isFullscreen?: boolean, isEnabled?: boolean) => {
// 是否是全屏
if (isFullscreen) return screenfull.isFullscreen
@ -72,12 +78,11 @@ export const screenfullFn = (isFullscreen?: boolean, isEnabled?: boolean) => {
/**
* *
* @returns url
*/
export const goAddEventListener = <K extends keyof WindowEventMap>(
target: EventTarget,
type: K,
listener: EventListenerOrEventListenerObject,
listener: any,
options?: boolean | AddEventListenerOptions | undefined
) => {
if (!target) return
@ -90,9 +95,9 @@ export const goAddEventListener = <K extends keyof WindowEventMap>(
options
)
}
/**
* *
* @returns url
*/
export const goRemoveEventListener = <K extends keyof WindowEventMap>(
target: EventTarget,

View File

@ -1,7 +1,7 @@
<template>
<div class="go-content-box" :class="[`bg-depth${depth}`, flex && 'flex']">
<div v-if="showTop" class="top go-mt-0 go-flex-no-wrap">
<n-space class="go-flex-no-wrap">
<n-space class="go-flex-no-wrap" :size="5">
<n-ellipsis>
<n-text>{{ title }}</n-text>
</n-ellipsis>

View File

@ -4,11 +4,11 @@
:class="{ scoped: !getCharts }"
title="图表"
:depth="2"
:backIcon="getCharts"
:backIcon="false"
>
<template #icon>
<n-icon size="14" :depth="2">
<component :is="BarChartIcon" />
<BarChartIcon />
</n-icon>
</template>
</ContentBox>

View File

@ -26,7 +26,7 @@
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import { reactive, shallowRef } from 'vue'
import { renderIcon } from '@/utils'
import { icon } from '@/plugins'
import { ContentBox } from '../ContentBox/index'
@ -43,13 +43,13 @@ const tabList = reactive([
key: 'setting',
title: '配置项',
icon: renderIcon(CubeIcon),
render: Setting
render: shallowRef(Setting)
},
{
key: 'behind',
title: '后端数据',
icon: renderIcon(FlashIcon),
render: Behind
render: shallowRef(Behind)
}
])
</script>

View File

@ -1,51 +1,58 @@
<template>
<n-space class="header-left-btn">
<n-tooltip
v-for="item in btnList"
:key="item.key"
placement="bottom"
trigger="hover"
>
<template #trigger>
<n-button
:type="item.select ? 'info' : ''"
size="small"
ghost
@click="clickHandle(item)"
>
<component :is="item.icon"></component>
</n-button>
</template>
<span>
{{ item.title }}
</span>
</n-tooltip>
<n-space class="header-left-btn" :size="25">
<n-button size="small" quaternary #icon @click="goHome(true, '返回将不会保存任何操作')">
<n-icon :depth="3">
<HomeIcon />
</n-icon>
</n-button>
<n-space>
<n-tooltip v-for="item in btnList" :key="item.key" placement="bottom" trigger="hover">
<template #trigger>
<n-button
:type="item.select ? 'success' : ''"
size="small"
ghost
@click="clickHandle(item)"
>
<component :is="item.icon"></component>
</n-button>
</template>
<span>{{ item.title }}</span>
</n-tooltip>
</n-space>
</n-space>
</template>
<script setup lang="ts">
import { toRefs, reactive } from 'vue'
import { renderIcon } from '@/utils'
import { toRefs, Ref, reactive } from 'vue'
import { renderIcon, routerTurnByName, goHome } from '@/utils'
import { icon } from '@/plugins'
const { LayersIcon, BarChartIcon, PrismIcon } = icon.ionicons5
const { LayersIcon, BarChartIcon, PrismIcon, HomeIcon } = icon.ionicons5
import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
const { setItem } = useChartLayoutStore()
const { getLayers, getCharts, getDetails } = toRefs(useChartLayoutStore())
const btnList = reactive([
{
key: 'layers',
select: getLayers,
title: '图层控制',
icon: renderIcon(LayersIcon)
},
type ItemType = {
key: string;
select: Ref<boolean> | boolean;
title: string;
icon: any
}
const btnList = reactive<ItemType[]>([
{
key: 'charts',
select: getCharts,
title: '图表组件',
icon: renderIcon(BarChartIcon)
},
{
key: 'layers',
select: getLayers,
title: '图层控制',
icon: renderIcon(LayersIcon)
},
{
key: 'details',
select: getDetails,
@ -54,12 +61,15 @@ const btnList = reactive([
}
])
const clickHandle = (item: { [T: string]: string }) => {
const clickHandle = (item: ItemType) => {
setItem(item.key, !item.select)
}
</script>
<style lang="scss" scoped>
.header-left-btn {
padding-right: 212px;
margin-left: -37px;
padding-right: 149px;
}
</style>

View File

@ -5,9 +5,7 @@
</n-icon>
<n-text @click="handleFocus">
工作空间 -
<n-button v-show="!focus" secondary round size="tiny">
{{ comTitle }}
</n-button>
<n-button v-show="!focus" secondary round size="tiny">{{ comTitle }}</n-button>
</n-text>
<n-input
@ -27,22 +25,36 @@
<script setup lang="ts">
import { ref, nextTick, computed } from 'vue'
import { fetchRouteParams } from '@/utils'
import { icon } from '@/plugins'
const { FishIcon } = icon.ionicons5
const focus = ref<boolean>(false)
const title = ref<string>('')
const inputInstRef = ref(null)
// id
const fetchProhectInfoById = () => {
const { id } = fetchRouteParams()
if (id.length) {
// todo
return '编辑项目' + id[0]
}
return ''
}
const title = ref<string>(fetchProhectInfoById())
const comTitle = computed(() => {
title.value = title.value.replace(/\s/g,"");
title.value = title.value.replace(/\s/g, "");
return title.value.length ? title.value : '新项目'
})
const handleFocus = () => {
focus.value = true
nextTick(() => {
;(<any>inputInstRef).value.focus()
; (<any>inputInstRef).value.focus()
})
}

View File

@ -13,8 +13,8 @@
</template>
</HeaderPro>
<n-layout-content content-style="overflow:hidden; display: flex">
<ContentLayers />
<ContentCharts />
<ContentLayers />
<ContentDraw />
<ContentDetails />
</n-layout-content>