feat: 新增工作区域内容模块

2026-04-23 00:00:12 +08:00 · 2022-01-20 21:25:35 +08:00
parent cb14424110
commit 20a1866923
27 changed files with 398 additions and 106 deletions
@@ -23,8 +23,10 @@
      </n-space>
    </div>
    <aside class="content">
-      <n-scrollbar>
-        <slot></slot>
+      <n-scrollbar x-scrollable>
+        <n-scrollbar>
+          <slot></slot>
+        </n-scrollbar>
      </n-scrollbar>
    </aside>
    <div v-if="showBottom" class="bottom go-mt-0">
@@ -5,7 +5,7 @@ import { themeColor, setItem, getCharts } from './layoutHook'
 import { PackagesCategoryEnum, PackagesCategoryName } from '@/packages/index.d'
 // 图表
 import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
-import { ChartLayoutStoreEnums } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
+import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
 // 图标
 const { BarChartIcon } = icon.ionicons5
 const {
@@ -68,9 +68,9 @@ const clickItemHandle = (key: string, item: any) => {
  selectOptions.value = item
  // 处理折叠
  if (beforeSelect === key) {
-    setItem(ChartLayoutStoreEnums.CHARTS, !getCharts.value)
+    setItem(ChartLayoutStoreEnum.CHARTS, !getCharts.value)
  } else {
-    setItem(ChartLayoutStoreEnums.CHARTS, true)
+    setItem(ChartLayoutStoreEnum.CHARTS, true)
  }
  beforeSelect = key
 }
@@ -1,8 +1,8 @@
 <template>
  <n-layout has-sider sider-placement="right">
    <n-layout-content>
-      <!-- 为了展示折叠的按钮，放在了这里 呜呜呜 -->
-      <ContentDrag />
+      <!-- 图表拖拽区域 -->
+      <ContentEdit />
    </n-layout-content>
    <n-layout-sider
      collapse-mode="transform"
@@ -43,11 +43,11 @@ import {  shallowRef, ref, toRefs, watch, reactive } from 'vue'
 import { icon } from '@/plugins'
 import { ContentBox } from '../ContentBox/index'
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
-import { ChartLayoutStoreEnums } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
+import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
 import { Setting } from './components/Setting/index'
 import { Behind } from './components/Behind/index'
 import { Page } from './components/Page/index'
-import { ContentDrag } from '../ContentDrag/index'
+import { ContentEdit } from '../ContentEdit/index'

 const { getDetails } = toRefs(useChartLayoutStore())
 const { setItem } = useChartLayoutStore()
@@ -58,12 +58,12 @@ const collapsed = ref<boolean>(getDetails.value)

 const collapsedHindle = () => {
  collapsed.value = true
-  setItem(ChartLayoutStoreEnums.DETAILS, true)
+  setItem(ChartLayoutStoreEnum.DETAILS, true)
 }

 const expandHindle = () => {
  collapsed.value = false
-  setItem(ChartLayoutStoreEnums.DETAILS, false)
+  setItem(ChartLayoutStoreEnum.DETAILS, false)
 }

 watch(getDetails, (newData) => {
@@ -1,3 +0,0 @@
-import ContentDrag from './index.vue'
-
-export { ContentDrag }
@@ -1,25 +0,0 @@
-<template>
-  <ContentBox
-    class="go-content-draw"
-    :flex="true"
-    :showTop="false"
-    :showBottom="true"
-    :depth="1"
-  >
-    <template #bottom>
-    </template>
-  </ContentBox>
-</template>
-
-<script setup lang="ts">
-import { reactive } from 'vue'
-import { ContentBox } from '../ContentBox/index'
-</script>
-
-<style lang="scss" scoped>
-@include go(content-draw) {
-  overflow: hidden;
-  @include background-image('background-point');
-  @extend .go-point-bg;
-}
-</style>
@@ -0,0 +1,3 @@
+import EditRange from './index.vue'
+
+export { EditRange }
@@ -0,0 +1,22 @@
+<template>
+  <div class="go-edit-range">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped>
+@include go(edit-range) {
+  position: relative;
+  height: 1080px;
+  width: 1920px;
+  border: 1px solid;
+  border-radius: 15px;
+  background-color: #333;
+  @include filter-bg-color('background-color2');
+  @include fetch-theme('box-shadow');
+  @include filter-border-color('hover-border-color');
+  @include fetch-theme-custom('border-color', 'background-color4');
+}
+</style>
@@ -0,0 +1,6 @@
+import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
+const chartEditStore = useChartEditStoreStore()
+
+export const getChartEditStore = () => {
+  return chartEditStore
+}
@@ -0,0 +1,3 @@
+import ContentEdit from './index.vue'
+
+export { ContentEdit }
@@ -0,0 +1,68 @@
+<template>
+  <ContentBox
+    id="go-chart-edit-layout"
+    ref="editDomRef"
+    :flex="true"
+    :showTop="false"
+    :showBottom="true"
+    :depth="1"
+  >
+    <div id="go-chart-edit-content">
+      <!-- 中间区域 -->
+      <EditRange>
+      </EditRange>
+    </div>
+    <!-- 底部控制 -->
+    <template #bottom> </template>
+  </ContentBox>
+</template>
+
+<script lang="ts" setup>
+import { ref, onUnmounted, onMounted, computed } from 'vue'
+import { ContentBox } from '../ContentBox/index'
+import { EditRange } from './components/EditRange'
+import { getChartEditStore } from './hooks/useStore'
+import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+
+const chartEditStore = getChartEditStore()
+
+onMounted(() => {
+  // 设置 Dom 值(ref 不生效先用document)
+  chartEditStore.setEditCanvasItem(
+    EditCanvasTypeEnum.EDITLAYOUTDOM,
+    document.getElementById('go-chart-edit-layout')
+  )
+  chartEditStore.setEditCanvasItem(
+    EditCanvasTypeEnum.EDITCONTENTDON,
+    document.getElementById('go-chart-edit-content')
+  )
+
+  // 大小初始化
+  chartEditStore.setPageSize()
+
+  // 监听初始化
+  const removeScale = chartEditStore.listenerScale()
+
+  onUnmounted(() => {
+    removeScale()
+  })
+})
+
+computed(() => {})
+</script>
+
+<style lang="scss" scoped>
+@include goId(chart-edit-layout) {
+  position: relative;
+  width: 100%;
+  @include background-image('background-point');
+  @extend .go-point-bg;
+  @include goId(chart-edit-content) {
+    position: relative;
+    top: 20px;
+    left: 20px;
+    transform-origin: left top;
+    @extend .go-transition;
+  }
+}
+</style>
@@ -18,13 +18,13 @@
 <script setup lang="ts">
 import { ContentBox } from '../ContentBox/index'
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
-import { ChartLayoutStoreEnums } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
+import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
 import { icon } from '@/plugins'
 const { LayersIcon } = icon.ionicons5
 const chartLayoutStore = useChartLayoutStore()

 const backHandle = () => {
-  chartLayoutStore.setItem(ChartLayoutStoreEnums.LAYERS, false)
+  chartLayoutStore.setItem(ChartLayoutStoreEnum.LAYERS, false)
 }
 </script>

@@ -26,7 +26,7 @@ import { renderIcon, goDialog, goHome } from '@/utils'
 import { icon } from '@/plugins'
 const { LayersIcon, BarChartIcon, PrismIcon, HomeIcon } = icon.ionicons5
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
-import { ChartLayoutStoreEnums } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
+import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'

 const { setItem } = useChartLayoutStore()
 const { getLayers, getCharts, getDetails } = toRefs(useChartLayoutStore())
@@ -40,19 +40,19 @@ type ItemType = {

 const btnList = reactive<ItemType[]>([
  {
-    key: ChartLayoutStoreEnums.CHARTS,
+    key: ChartLayoutStoreEnum.CHARTS,
    select: getCharts,
    title: '图表组件',
    icon: renderIcon(BarChartIcon)
  },
  {
-    key: ChartLayoutStoreEnums.LAYERS,
+    key: ChartLayoutStoreEnum.LAYERS,
    select: getLayers,
    title: '图层控制',
    icon: renderIcon(LayersIcon)
  },
  {
-    key: ChartLayoutStoreEnums.DETAILS,
+    key: ChartLayoutStoreEnum.DETAILS,
    select: getDetails,
    title: '详情设置',
    icon: renderIcon(PrismIcon)
@@ -62,7 +62,7 @@ const btnList = reactive<ItemType[]>([

 // store 描述的是展示的值，所以和 ContentDetails 的 collapsed 是相反的
 const styleHandle = (item: ItemType) => {
-  if (item.key === ChartLayoutStoreEnums.DETAILS) {
+  if (item.key === ChartLayoutStoreEnum.DETAILS) {
    return item.select ? '' : 'success'
  }
  return item.select ? 'success' : ''
@@ -22,17 +22,31 @@
 </template>

 <script setup lang="ts">
+import { loadAsyncComponent } from '@/utils'
 import { HeaderPro } from '@/layout/components/HeaderPro'
-import { HeaderLeftBtn } from './components/HeaderLeftBtn/index'
-import { HeaderRightBtn } from './components/HeaderRightBtn/index'
-import { HeaderTitle } from './components/HeaderTitle/index'
-import { ContentLayers } from './components/ContentLayers/index'
-import { ContentCharts } from './components/ContentCharts/index'
-import { ContentDetails } from './components/ContentDetails/index'
+
+const HeaderLeftBtn = loadAsyncComponent(() =>
+  import('./components/HeaderLeftBtn/index.vue')
+)
+const HeaderRightBtn = loadAsyncComponent(() =>
+  import('./components/HeaderRightBtn/index.vue')
+)
+const HeaderTitle = loadAsyncComponent(() =>
+  import('./components/HeaderTitle/index.vue')
+)
+const ContentLayers = loadAsyncComponent(() =>
+  import('./components/ContentLayers/index.vue')
+)
+const ContentCharts = loadAsyncComponent(() =>
+  import('./components/ContentCharts/index.vue')
+)
+const ContentDetails = loadAsyncComponent(() =>
+  import('./components/ContentDetails/index.vue')
+)
 </script>

 <style lang="scss" scoped>
-@include go("chart") {
+@include go('chart') {
  height: 100vh;
  width: 100vw;
  overflow: hidden;