merge

src/api/axios.ts

@@ -4,7 +4,7 @@ import { ErrorPageNameMap } from "@/enums/pageEnum"
 import { redirectErrorPage } from '@/utils'
 
 const axiosInstance = axios.create({
-  baseURL: import.meta.env.DEV ? import.meta.env.VITE_DEV_PATH : import.meta.env.VITE_PRO_PATH,
+  baseURL: import.meta.env.VITE_GLOB_API_URL,
   timeout: ResultEnum.TIMEOUT,
 })
 

src/api/demo/photo.ts

@@ -3,19 +3,26 @@ enum Api {
   imageUpload = '/api/goview/project/image/upload',
   imageList = '/api/goview/project/image/list',
   imageDelete = '/api/goview/project/image/delete',
+  imageGroupList = '/api/goview/project/imageGroup/list',
 }
 
-export const imageList = (params?) =>
-  defHttp.get({ url: Api.imageList });
+export const imageList = (params:{GroupName:string,page:number,limit:number,key?:string}) =>
+  defHttp.get({ 
+    url: Api.imageList,
+    params
+  });
+
+export const getImageGroupList = () =>
+  defHttp.get({ url: Api.imageGroupList });
 
 export const imageDelete = (id:string) =>
   defHttp.post({ 
     url: `${Api.imageDelete}?ids=${id}`
   });
 
-export const imageUpload = (params) =>
+export const imageUpload = (params,groupName) =>
   defHttp.post({
-    url: Api.imageUpload,
+    url: `${Api.imageUpload}?groupName=${groupName}`,
     params,
     headers: {
       'Content-type': 'multipart/form-data',

src/api/http.ts

@@ -217,7 +217,8 @@ export const customizeHttp = (
   }
 
   try {
-    const url = new Function('return `' + `${requestOriginUrl}${requestUrl}`.trim() + '`')();
+    // const url = new Function('return `' + `${requestOriginUrl}${requestUrl}`.trim() + '`')();
+    const url = new Function('return `' + `${requestUrl.includes('https://') || requestUrl.includes('http://') ? requestUrl : requestOriginUrl + requestUrl}`.trim() + '`')();
     return axiosInstance({
       url,
       method: requestHttpType,

src/api/path/project.api.ts

@@ -19,6 +19,9 @@ enum Api {
   projectFile = '/api/goview/project/uploadFile',
   SetMainPage = '/api/goview/project/mainPage/set',
   GetMainPage = '/api/goview/project/mainPage/get',
+  CustomComponentSave = '/api/goview/project/customComponent/save',
+  CustomComponentSaveList = '/api/goview/project/customComponent/list',
+  CustomComponentSaveDelete = '/api/goview/project/customComponent/delete',
 }
 // * 项目列表
 export const projectListApi = (params?: ProjectItem) =>
@@ -80,7 +83,6 @@ export function projectUploadFile(
   params,
   onUploadProgress: (progressEvent: AxiosProgressEvent) => void,
 ) {
-  console.log(params);
   return defHttp.uploadFile<UploadApiResult>(
     {
       url: uploadFileUrl,
@@ -106,7 +108,6 @@ export function projectUploadFile(
 
 // 设置系统主页面
 export function setMainPage(params) {
-  console.log(params);
   return defHttp.post({
     url: Api.SetMainPage,
     params,
@@ -114,3 +115,22 @@ export function setMainPage(params) {
 }
 // 获取系统主页面
 export const getMainPage = () => defHttp.get({ url: Api.GetMainPage });
+
+// 保存组件
+export function customComponentSave(params) {
+  return defHttp.post({
+    url: Api.CustomComponentSave,
+    params,
+  });
+}
+// 获取组件列表
+export const customComponentList = (params: any) =>
+  defHttp.get({ url: Api.CustomComponentSaveList, params });
+
+// 删除组件
+export function customComponentSaveDelete(params) {
+  return defHttp.post({
+    url: Api.CustomComponentSaveDelete + '?ids=' + params.ids,
+    params,
+  });
+}

src/components/Pages/ChartGlobImage/index.vue

@@ -3,29 +3,29 @@
 </template>
 
 <script setup lang="ts">
-import { ref, PropType, watch } from 'vue'
-import { fetchImages } from '@/packages'
-import { ConfigType } from '@/packages/index.d'
+  import { ref, PropType, watch } from 'vue';
+  import { fetchImages } from '@/packages';
+  import { ConfigType } from '@/packages/index.d';
 
-const props = defineProps({
-  chartConfig: {
-    type: Object as PropType<ConfigType>,
-    required: true
-  }
-})
+  const props = defineProps({
+    chartConfig: {
+      type: Object as PropType<ConfigType>,
+      required: true,
+    },
+  });
 
-const imageInfo = ref('')
+  const imageInfo = ref('');
 
-// 获取图片
-const fetchImageUrl = async () => {
-  imageInfo.value = await fetchImages(props.chartConfig)
-}
+  // 获取图片
+  const fetchImageUrl = async () => {
+    imageInfo.value = await fetchImages(props.chartConfig);
+  };
 
-watch(
-  () => props.chartConfig.key,
-  () => fetchImageUrl(),
-  {
-    immediate: true
-  }
-)
+  watch(
+    () => props.chartConfig.key,
+    () => fetchImageUrl(),
+    {
+      immediate: true,
+    },
+  );
 </script>

src/enums/editPageEnum.ts

@@ -60,6 +60,8 @@ export enum MenuEnum {
   HIDE = 'hide',
   // 显示
   SHOW = 'show',
+  // 保存至分组
+  SAVETOGROUP = 'saveToGroup',
 }
 
 // Win 键盘枚举

src/hooks/eventHandler.hook.ts

@@ -1,15 +1,20 @@
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
 import { mapFun } from '@/hooks/ceshiFun.hook';
 import { router } from '@/router';
+import { previewUrl } from '@/utils';
+import { EventBus } from '@/utils/eventBus';
 
 const chartEditStore = useChartEditStore();
 const ceshiFunction = mapFun();
-
-// 交互事件
-export const eventHandlerHook = (comonentList: any, elementList: any, params: any = null) => {
+export const eventCommonHandler = (
+  componentList: any,
+  elementList: any,
+  type: string,
+  params: any = null,
+) => {
   let obj: any = {};
   let index = 0;
-  for (let i = 0; i < comonentList.length; i++) {
+  for (let i = 0; i < componentList.length; i++) {
     for (let j = 0; j < elementList.length; j++) {
       if (elementList[j].movement == 'newaddress') {
         // 打开新页面
@@ -20,6 +25,12 @@ export const eventHandlerHook = (comonentList: any, elementList: any, params: an
             });
             window.open(routeUrl.href, '_blank');
             return;
+          } else if (elementList[j].skipType == 'publishLink') {
+            const routeUrl = router.resolve({
+              path: previewUrl(elementList[j].url),
+            });
+            window.open(routeUrl.href, '_blank');
+            return;
           } else {
             window.open(elementList[j].url, '_blank');
             return;
@@ -28,6 +39,12 @@ export const eventHandlerHook = (comonentList: any, elementList: any, params: an
           if (elementList[j].skipType == 'routeLink') {
             router.replace(elementList[j].url);
             return;
+          } else if (elementList[j].skipType == 'publishLink') {
+            const routeUrl = router.resolve({
+              path: previewUrl(elementList[j].url),
+            });
+            window.open(routeUrl.href, '_self');
+            return;
           } else {
             window.open(elementList[j].url, '_self');
             return;
@@ -36,8 +53,8 @@ export const eventHandlerHook = (comonentList: any, elementList: any, params: an
       } else if (elementList[j].movement == 'reveal') {
         // 显示
         for (let k = 0; k < elementList[j].elementId.length; k++) {
-          if (comonentList[i].id == elementList[j].elementId[k]) {
-            obj = comonentList[i];
+          if (componentList[i].id == elementList[j].elementId[k]) {
+            obj = componentList[i];
             index = i;
             obj.status.hide = false;
             chartEditStore.updateComponentList(index, obj);
@@ -46,8 +63,8 @@ export const eventHandlerHook = (comonentList: any, elementList: any, params: an
       } else if (elementList[j].movement == 'hidden') {
         // 隐藏
         for (let k = 0; k < elementList[j].elementId.length; k++) {
-          if (comonentList[i].id == elementList[j].elementId[k]) {
-            obj = comonentList[i];
+          if (componentList[i].id == elementList[j].elementId[k]) {
+            obj = componentList[i];
             index = i;
             obj.status.hide = true;
             chartEditStore.updateComponentList(index, obj);
@@ -56,7 +73,7 @@ export const eventHandlerHook = (comonentList: any, elementList: any, params: an
       } else if (elementList[j].movement == 'map') {
         // 地图事件联动
         for (let k = 0; k < elementList[j].elementId.length; k++) {
-          if (comonentList[i].id == elementList[j].elementId[k]) {
+          if (componentList[i].id == elementList[j].elementId[k]) {
             if (params) {
               ceshiFunction[elementList[j].funName](params);
             } else {
@@ -64,7 +81,49 @@ export const eventHandlerHook = (comonentList: any, elementList: any, params: an
             }
           }
         }
+      } else if (elementList[j].movement == 'communication') {
+        // 组件通信
+        for (let k = 0; k < elementList[j].elementId.length; k++) {
+          if (componentList[i].id == elementList[j].elementId[k]) {
+            EventBus.emit(elementList[j].elementId[k] + type, params);
+          }
+        }
       }
     }
   }
 };
+// 交互事件
+export const eventHandlerHook = (
+  componentList: any,
+  interactConfigEvents: any,
+  type: string,
+  params: any = null,
+) => {
+  const elementList: any = [];
+  for (let i = 0; i < interactConfigEvents.length; i++) {
+    if (interactConfigEvents[i].type == type) {
+      if (!interactConfigEvents[i].movementList) {
+        return false;
+      }
+      for (let j = 0; j < interactConfigEvents[i].movementList.length; j++) {
+        elementList.push(interactConfigEvents[i].movementList[j]);
+      }
+    }
+  }
+
+  if (componentList.length == 0 || elementList.length == 0) {
+    return false;
+  }
+  eventCommonHandler(componentList, elementList, type, params);
+};
+// websocket事件
+export const websocketEvent = (interactConfigEvents: any, params: any = null) => {
+  console.log('websocketEvent', interactConfigEvents, params);
+  interactConfigEvents.forEach((element) => {
+    if (element.messageType == params.type) {
+      element.elementId.forEach((item) => {
+        EventBus.emit(item + 'websocket', params);
+      });
+    }
+  });
+};

src/locales/lang/en/global.json

@@ -20,5 +20,6 @@
   "r_unpublish": "Unpublish",
   "r_download": "Download",
   "r_delete": "Delete",
-  "r_more": "More"
+  "r_more": "More",
+  "r_copy_url": "Copy Release Address"
 }

src/locales/lang/zh-CN/global.json

@@ -17,5 +17,6 @@
   "r_unpublish": "取消发布",
   "r_download": "下载",
   "r_delete": "删除",
-  "r_more": "更多"
+  "r_more": "更多",
+  "r_copy_url": "复制发布地址"
 }

src/packages/components/Decorates/Titles/Titles01/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div  class="go-title-01">
-    <!-- <span class="text">{{ borderTitle }}</span> -->
+    <span class="text">{{ borderTitle }}</span>
     <svg :width="w" :height="h">
       <title>大标题@2x</title>
       <defs>

src/packages/components/Decorates/Titles/Titles02/index.vue

@@ -97,6 +97,7 @@ const {
   svg {
     position: absolute;
     z-index: -1;
+    cursor: pointer;
   }
 }
 </style>

src/packages/components/Decorates/Titles/Titles03/index.vue

@@ -98,6 +98,7 @@ const {
   svg {
     position: absolute;
     z-index: -1;
+    cursor: pointer;
   }
   .fill {
     fill: v-bind('colors[0]');

src/packages/components/Decorates/Titles/TitlesText/config.ts

@@ -1,5 +1,5 @@
 import { PublicConfigClass } from '@/packages/public'
-import { chartInitConfig } from '@/settings/designSetting'
+import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
 import { CreateComponentType } from '@/packages/index.d'
 import { TitlesTextConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
@@ -16,4 +16,6 @@ export default class Config extends PublicConfigClass implements CreateComponent
   public attr = { ...chartInitConfig, w: 500, h: 70, zIndex: 1 }
   public chartConfig = cloneDeep(TitlesTextConfig)
   public option = cloneDeep(option)
+  public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
+  public filter = "return res.result;"
 }

src/packages/components/Decorates/Titles/TitlesText/index.vue

@@ -10,7 +10,8 @@
   <script setup lang="ts">
   import { PropType, toRefs } from 'vue'
   import { CreateComponentType } from '@/packages/index.d'
-  import { getUUID } from '@/utils'
+  import { useChartDataFetch } from '@/hooks';
+  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
   const props = defineProps({
     chartConfig: {
       type: Object as PropType<CreateComponentType>,
@@ -18,9 +19,12 @@
     }
   })
   
-  const id = getUUID()
   const { w, h } = toRefs(props.chartConfig.attr)
   const { colors, dataset, textSize,textFlod } = toRefs(props.chartConfig.option)
+  // 数据callback处理（预览时触发）
+  useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
+    props.chartConfig.option.dataset = resData;
+  });
   </script>
   
   <style lang="scss" scoped>

src/packages/components/Diy/Diy/DiyTest/config.ts

@@ -1,36 +0,0 @@
-import { PublicConfigClass } from '@/packages/public'
-import { CreateComponentType } from '@/packages/index.d'
-import { DiyTestConfig } from './index'
-import cloneDeep from 'lodash/cloneDeep'
-import dataJson from './data.json'
-
-export const option = {
-  // 数据
-  dataset: dataJson,
-  // 表行数
-  rowNum: 5,
-  // 轮播时间
-  waitTime: 2,
-  // 数值单位
-  unit: '',
-  // 自动排序
-  sort: true,
-  color: '#1370fb',
-  textColor: '#CDD2F8FF',
-  borderColor: '#1370fb80',
-  carousel: 'single',
-  //序号字体大小
-  indexFontSize: 12,
-  //左侧数据字体大小
-  leftFontSize: 12,
-  //右侧数据字体大小
-  rightFontSize: 12,
-  // 格式化
-  valueFormatter(item: { value: any}) { return item.value}
-}
-
-export default class Config extends PublicConfigClass implements CreateComponentType {
-  public key = DiyTestConfig.key
-  public chartConfig = cloneDeep(DiyTestConfig)
-  public option = cloneDeep(option)
-}

src/packages/components/Diy/Diy/DiyTest/config.vue

@@ -1,95 +0,0 @@
-<template>
-  <CollapseItem name="列表" :expanded="true">
-    <SettingItemBox name="基础">
-      <SettingItem name="表行数">
-        <n-input-number
-          v-model:value="optionData.rowNum"
-          :min="1"
-          size="small"
-          placeholder="请输入自动计算"
-        ></n-input-number>
-      </SettingItem>
-      <SettingItem name="轮播时间(s)">
-        <n-input-number
-          v-model:value="optionData.waitTime"
-          :min="1"
-          size="small"
-          placeholder="请输入轮播时间"
-        ></n-input-number>
-      </SettingItem>
-      <SettingItem name="数值单位">
-        <n-input
-          v-model:value="optionData.unit"
-          size="small"
-          placeholder="数值单位"
-        ></n-input>
-      </SettingItem>
-    </SettingItemBox>
-
-    <SettingItemBox name="样式">
-      <SettingItem name="主体颜色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="optionData.color"
-        ></n-color-picker>
-      </SettingItem>
-      <SettingItem name="数据颜色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="optionData.textColor"
-        ></n-color-picker>
-      </SettingItem>
-      <SettingItem name="底部线条">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="optionData.borderColor"
-        ></n-color-picker>
-      </SettingItem>
-    </SettingItemBox>
-
-    <SettingItemBox name="字体样式">
-       <SettingItem name="序号字体">
-        <n-input-number
-          size="small"
-          v-model:value="optionData.indexFontSize"
-          :min="12"
-        />
-      </SettingItem>
-      <SettingItem name="左侧数据字体">
-        <n-input-number
-          size="small"
-          v-model:value="optionData.leftFontSize"
-          :min="12"
-        />
-      </SettingItem>
-      <SettingItem name="右侧数据字体">
-        <n-input-number
-          size="small"
-          v-model:value="optionData.rightFontSize"
-          :min="12"
-        />
-      </SettingItem>
-    </SettingItemBox>
-      
-  </CollapseItem>
-</template>
-
-<script setup lang="ts">
-import { PropType } from 'vue'
-import {
-  CollapseItem,
-  SettingItemBox,
-  SettingItem,
-} from '@/components/Pages/ChartItemSetting'
-import { option } from './config'
-
-const props = defineProps({
-  optionData: {
-    type: Object as PropType<typeof option>,
-    required: true,
-  },
-})
-</script>

src/packages/components/Diy/Diy/DiyTest/data.json

@@ -1,14 +0,0 @@
-[
-  { "name": "荣成", "value": 26700 },
-  { "name": "河南", "value": 20700 },
-  { "name": "河北", "value": 18700 },
-  { "name": "徐州", "value": 17800 },
-  { "name": "漯河", "value": 16756 },
-  { "name": "三门峡", "value": 12343 },
-  { "name": "郑州", "value": 9822 },
-  { "name": "周口", "value": 8912 },
-  { "name": "濮阳", "value": 6834 },
-  { "name": "信阳", "value": 5875 },
-  { "name": "新乡", "value": 3832 },
-  { "name": "大同", "value": 1811 }
-]

src/packages/components/Diy/Diy/DiyTest/index.ts

@@ -1,14 +0,0 @@
-import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
-import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
-
-export const DiyTestConfig: ConfigType = {
-  key: 'DiyTest',
-  chartKey: 'VDiyTest',
-  conKey: 'VCDiyTest',
-  title: '自定义测试组件',
-  category: ChatCategoryEnum.DIY,
-  categoryName: ChatCategoryEnumName.DIY,
-  package: PackagesCategoryEnum.DIY,
-  chartFrame: ChartFrameEnum.COMMON,
-  image: 'tables_list.png'
-}

src/packages/components/Diy/Diy/DiyTest/index.vue

@@ -1,57 +0,0 @@
-<template>
-  <component :is="remote" v-if="remote" @childClick="childClick" :optionParam="optionParam" />
-</template>
-
-<script setup lang="ts">
-import { loadModule } from 'vue3-sfc-loader/dist/vue3-sfc-loader'
-import { ref, onMounted, getCurrentInstance, defineAsyncComponent } from 'vue'
-import * as Vue from 'vue'
-import { PropType } from 'vue'
-import { option } from './config'
-import { CreateComponentType } from '@/packages/index.d'
-
-let remote = ref()
-let url = 'http://localhost:3000/getVue3Str'
-
-onMounted(() => {
-  load(url)
-})
-const load = async url => {
-  let res = await fetch(url).then(res => res.json())
-
-  const options = {
-    moduleCache: {
-      vue: Vue
-    },
-    async getFile() {
-      return res.fileStr
-    },
-    addStyle(textContent) {
-      const style = Object.assign(document.createElement('style'), { textContent })
-      const ref = document.head.getElementsByTagName('style')[0] || null
-      document.head.insertBefore(style, ref)
-    }
-  }
-
-  // 加载远程组件
-  remote.value = defineAsyncComponent(() => loadModule(res.fileName || 'loader.vue', options))
-}
-const childClick = newVal => {
-  console.log('子组件点击事件', newVal)
-}
-
-const props = defineProps({
-  optionData: {
-    type: Object as PropType<typeof option>,
-    required: true
-  },
-  chartConfig: {
-    type: Object as PropType<CreateComponentType>,
-    required: true
-  }
-})
-console.log('props', props)
-const optionParam = ref(props.chartConfig.option ? props.chartConfig.option : option)
-</script>
-
-<style lang="scss" scoped></style>

src/packages/components/Diy/Diy/Remote/config.vue

@@ -1,33 +0,0 @@
-<template>
-  <CollapseItem name="配置" :expanded="true">
-
-    <SettingItemBox name="背景颜色">
-    
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="optionData.backgroundColor"
-        ></n-color-picker>
-    </SettingItemBox>
-
-      
-  </CollapseItem>
-</template>
-
-<script setup lang="ts">
-import { PropType } from 'vue'
-import {
-  CollapseItem,
-  SettingItemBox,
-  SettingItem,
-} from '@/components/Pages/ChartItemSetting'
-import { option } from './config'
-
-const props = defineProps({
-  optionData: {
-    type: Object as PropType<typeof option>,
-    required: true,
-  },
-})
-console.log('自定义组件配置props',props)
-</script>

src/packages/components/Diy/Diy/Remote/data.json

@@ -1,14 +0,0 @@
-[
-  { "name": "荣成", "value": 26700 },
-  { "name": "河南", "value": 20700 },
-  { "name": "河北", "value": 18700 },
-  { "name": "徐州", "value": 17800 },
-  { "name": "漯河", "value": 16756 },
-  { "name": "三门峡", "value": 12343 },
-  { "name": "郑州", "value": 9822 },
-  { "name": "周口", "value": 8912 },
-  { "name": "濮阳", "value": 6834 },
-  { "name": "信阳", "value": 5875 },
-  { "name": "新乡", "value": 3832 },
-  { "name": "大同", "value": 1811 }
-]

src/packages/components/Diy/Diy/Remote/index.ts

@@ -1,14 +0,0 @@
-import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
-import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
-
-export const RemoteConfig: ConfigType = {
-  key: 'Remote',
-  chartKey: 'Remote',
-  conKey: 'RemoteConfig',
-  title: '测试远程组件',
-  category: ChatCategoryEnum.DIY,
-  categoryName: ChatCategoryEnumName.DIY,
-  package: PackagesCategoryEnum.DIY,
-  chartFrame: ChartFrameEnum.COMMON,
-  image: 'tables_list.png'
-}

src/packages/components/Diy/Diy/Remote/index.vue

@@ -1,62 +0,0 @@
-<template>
-  <component :is="remote" v-if="remote" :config="chartConfig" :data="data" />
-</template>
-
-<script setup lang="ts">
-import { loadModule } from 'vue3-sfc-loader/dist/vue3-sfc-loader'
-import { ref, onMounted, getCurrentInstance, defineAsyncComponent } from 'vue'
-import * as Vue from 'vue'
-import { PropType } from 'vue'
-import { option } from './config'
-import { CreateComponentType } from '@/packages/index.d'
-import { useChartDataFetch } from '@/hooks'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-
-const props = defineProps({
-  optionData: {
-    type: Object as PropType<typeof option>,
-    required: true
-  },
-  chartConfig: {
-    type: Object as PropType<CreateComponentType>,
-    required: true
-  }
-})
-
-let remote = ref()
-let url = 'http://192.168.10.124:3000/getVue3Str2'
-const data = ref(props.chartConfig.option.dataset)
-
-onMounted(() => {
-  load(url)
-})
-const load = async url => {
-  let res = await fetch(url).then(res => res.json())
-
-  const options = {
-    moduleCache: {
-      vue: Vue
-    },
-    async getFile() {
-      return res.fileStr
-    },
-    addStyle(textContent) {
-      const style = Object.assign(document.createElement('style'), { textContent })
-      const ref = document.head.getElementsByTagName('style')[0] || null
-      document.head.insertBefore(style, ref)
-    }
-  }
-
-  // 加载远程组件
-  remote.value = defineAsyncComponent(() => loadModule(res.fileName || 'loader.vue', options))
-}
-
-
-console.log('props', props)
-useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
-  console.log('接口获取数据',newData)
-  data.value = newData
-})
-</script>
-
-<style lang="scss" scoped></style>

src/packages/components/Diy/Diy/index.ts

@@ -1,3 +0,0 @@
-import { DiyTestConfig } from './DiyTest'
-import { RemoteConfig } from './Remote'
-export default [ DiyTestConfig, RemoteConfig ]

src/packages/components/Diy/index.d.ts

@@ -1,9 +0,0 @@
-export enum ChatCategoryEnum {
-  TABLE = 'Tables',
-  DIY = 'Diy'
-}
-
-export enum ChatCategoryEnumName {
-  TABLE = '表格',
-  DIY = '自定义'
-}

src/packages/components/Diy/index.ts

@@ -1,3 +0,0 @@
-import Diy from './Diy'
-
-export const DiyList = [...Diy]

src/packages/components/Equipment/Equipment/Contentbg01/config.ts

@@ -0,0 +1,17 @@
+import { PublicConfigClass } from '@/packages/public'
+import { chartInitConfig } from '@/settings/designSetting'
+import { CreateComponentType } from '@/packages/index.d'
+import { EquipmentContentbg01Config } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  boxId: 'EquipmentContentbg01',
+  colors: ['#06463A','#02221B','#00D586','#00AB4E','#007343','#89E5A1'],
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = EquipmentContentbg01Config.key
+  public attr = { ...chartInitConfig, w: 401, h: 119, zIndex: 1 }
+  public chartConfig = cloneDeep(EquipmentContentbg01Config)
+  public option = cloneDeep(option)
+}

src/packages/components/Equipment/Equipment/Contentbg01/config.vue

@@ -0,0 +1,53 @@
+<template>
+  <CollapseItem name="内容" :expanded="true">
+    <SettingItemBox name="ID" :alone="true">
+      <n-input
+        size="small"
+        v-model:value="optionData.boxId"
+        :minlength="1"
+        type="text"
+        placeholder="请输入Id"
+      />
+    </SettingItemBox> 
+  </CollapseItem>
+  <CollapseItem name="样式" :expanded="true">
+    <SettingItemBox
+      :name="`颜色-${index + 1}`"
+      v-for="(item, index) in optionData.colors"
+      :key="index"
+    >
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.colors[index]"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.colors[index] = option.colors[index]"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

src/packages/components/Equipment/Equipment/Contentbg01/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
+
+export const EquipmentContentbg01Config: ConfigType = {
+  key: 'Contentbg01',
+  chartKey: 'VContentbg01',
+  conKey: 'VCContentbg01',
+  title: '模块背景-01',
+  category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
+  package: PackagesCategoryEnum.EQUIPMENT,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'contentbg01.png',
+};