feat:大屏新增背景选择

@@ -21,7 +21,6 @@
         ></n-input-number>
         ></n-input-number>
       </n-form-item>
       </n-form-item>
     </n-form>
     </n-form>
-
     <n-card class="upload-box">
     <n-card class="upload-box">
       <n-upload
       <n-upload
         v-model:file-list="uploadFileListRef"
         v-model:file-list="uploadFileListRef"
@@ -42,6 +41,17 @@
     </n-card>
     </n-card>
     <n-space vertical :size="12">
     <n-space vertical :size="12">
       <n-space>
       <n-space>
+        <n-text>背景选择</n-text>
+        <n-select
+          size="small"
+          placeholder="请选择您要使用的背景"
+          style="width: 250px"
+          v-model:value="bgSelectValue"
+          :options="selectBgOptions"
+          @update:value="selectBgValueHandle"
+        />
+      </n-space>
+      <n-space>
         <n-text>背景颜色</n-text>
         <n-text>背景颜色</n-text>
         <div class="picker-height">
         <div class="picker-height">
           <n-color-picker
           <n-color-picker
@@ -132,7 +142,7 @@ import { FileTypeEnum } from '@/enums/fileTypeEnum'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { StylesSetting } from '@/components/Pages/ChartItemSetting'
 import { StylesSetting } from '@/components/Pages/ChartItemSetting'
-import { UploadCustomRequestOptions } from 'naive-ui'
+import { UploadCustomRequestOptions, SelectOption } from 'naive-ui'
 import { fileToUrl, loadAsyncComponent } from '@/utils'
 import { fileToUrl, loadAsyncComponent } from '@/utils'
 import { PreviewScaleEnum } from '@/enums/styleEnum'
 import { PreviewScaleEnum } from '@/enums/styleEnum'
 import { icon } from '@/plugins'
 import { icon } from '@/plugins'
@@ -150,6 +160,23 @@ const selectColorValue = ref(0)
 
 
 const ChartThemeColor = loadAsyncComponent(() => import('./components/ChartThemeColor/index.vue'))
 const ChartThemeColor = loadAsyncComponent(() => import('./components/ChartThemeColor/index.vue'))
 
 
+//背景选择配置项
+const bgSelectValue = ref('')
+
+const selectBgOptions = ref<Array<SelectOption>>([])
+
+//待封装成传文件夹名字获取下面所有图片
+const getFetchImages = () => {
+  const imagesModules = import.meta.globEager('@/assets/images/chart/background/*')
+  for (const key in imagesModules) {
+    selectBgOptions.value.push({
+      label: imagesModules[key]?.default.slice(36),
+      value: imagesModules[key]?.default
+    })
+  }
+}
+getFetchImages()
+
 // 默认应用类型
 // 默认应用类型
 const selectColorOptions = [
 const selectColorOptions = [
   {
   {
@@ -242,6 +269,12 @@ const selectColorValueHandle = (value: number) => {
   canvasConfig.selectColor = value == 0
   canvasConfig.selectColor = value == 0
 }
 }
 
 
+//选择背景
+const selectBgValueHandle = (value: string) => {
+  bgSelectValue.value = value
+  canvasConfig.backgroundImage = value
+}
+
 // 清除背景
 // 清除背景
 const clearImage = () => {
 const clearImage = () => {
   chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.BACKGROUND_IMAGE, undefined)
   chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.BACKGROUND_IMAGE, undefined)
@@ -331,8 +364,8 @@ $uploadHeight: 193px;
     padding-right: 2.25em;
     padding-right: 2.25em;
   }
   }
   .select-preview-icon {
   .select-preview-icon {
-    padding-right: .68em;
-    padding-left: .68em;
+    padding-right: 0.68em;
+    padding-left: 0.68em;
   }
   }
   .tabs-box {
   .tabs-box {
     margin-top: 20px;
     margin-top: 20px;