测试远程组件

package.json

@@ -136,7 +136,8 @@
     "xlsx": "^0.18.5",
     "jszip":"^3.10.1",
     "shpjs":"^6.1.0",
-    "js-base64":"3.7.7"
+    "js-base64":"3.7.7",
+    "monaco-editor": "^0.33.0"
   },
   "devDependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
@@ -182,7 +183,8 @@
     "vite-plugin-mars3d": "^3.1.3",
     "vite-plugin-mock": "^2.9.6",
     "vue-echarts": "^6.0.2",
-    "vue-tsc": "^1.8.27"
+    "vue-tsc": "^1.8.27",
+    "vite-plugin-monaco-editor": "^1.1.0"
   },
   "packageManager": "pnpm@8.10.0",
   "engines": {

src/main.ts

@@ -37,6 +37,7 @@ import { addCollection } from 'iconify-icon';
 import { setupNaive, setupDirectives, setupCustomComponents, initFunction } from '@/plugins';
 import { i18n } from '@/i18n';
 import { GoAppProvider } from '@/components/GoAppProvider/index';
+import * as echarts from 'echarts'
 
 // 注册图标
 addCollection(uimIcons);
@@ -49,6 +50,7 @@ async function bootstrap() {
   // app.use(i18n);
   // 在Vue应用挂载后绑定$t到window对象
   app.config.globalProperties.$t = i18n.global.t;
+  app.config.globalProperties.$echarts = echarts
   window['$t'] = i18n.global.t;
   // 注册全局常用的 naive-ui 组件
   setupNaive(app);

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

@@ -0,0 +1,22 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { RemoteConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export const option = {
+  backgroundColor: '#000000FF',
+  // 数据
+  dataset: dataJson,
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = RemoteConfig.key
+  public chartConfig = cloneDeep(RemoteConfig)
+  public option = cloneDeep(option)
+  constructor() {
+    super(); 
+    this.attr.w = 600;
+    this.attr.h = 600;
+  }
+}

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

@@ -0,0 +1,33 @@
+<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

@@ -0,0 +1,14 @@
+[
+  { "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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,62 @@
+<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.130:3000/getVue3Str1'
+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,2 +1,3 @@
 import { DiyTestConfig } from './DiyTest'
-export default [ DiyTestConfig ]
+import { RemoteConfig } from './Remote'
+export default [ DiyTestConfig, RemoteConfig ]