feat: 设计器左侧面板，基础组件图标使用svg资源

data-room-ui/packages/BasicComponents/Map/settingConfig.js

@@ -1,8 +1,7 @@
 import { commonConfig, displayOption } from 'data-room-ui/js/config'
-// import Icon from 'data-room-ui/assets/images/bigScreenIcon/export'
+import Icon from 'data-room-ui/assets/images/bigScreenIcon/export'
 import cloneDeep from 'lodash/cloneDeep'
-import * as iconData from 'data-room-ui/assets/symbols/bigScreenIcon/iconfont.json'
-const iconNames = iconData.glyphs.map(item => item.name).sort((a, b) => a.localeCompare(b))
+
 export const settingConfig = {
   padding: [30, 30, 50, 80],
   legend: false,
@@ -91,7 +90,7 @@ export const dataConfig = {
 export const mapData = {
   name: '地图',
   title: '地图',
-  icon: iconNames[5],
+  icon: Icon.getNameList()[5],
   className:
     'com.gccloud.dataroom.core.module.chart.components.ScreenMapChart',
   w: 800,

data-room-ui/packages/BigScreenDesign/LeftPanel.vue

@@ -110,18 +110,18 @@
                         class="img_dispaly chooseDragNode"
                         @click.stop="addComponent(element)"
                       >
-                        <svg
+                        <!-- <svg
                           v-if="element.icon"
                           class="icon-svg"
                           aria-hidden="true"
                         >
                           <use :xlink:href="`#icon-a-${element.icon}`" />
-                        </svg>
-                        <!-- <icon-svg
+                        </svg> -->
+                        <icon-svg
                           v-if="element.icon"
                           :name="element.icon"
                           class="page-opt-list-icon"
-                        /> -->
+                        />
                         <img
                           v-else-if="element.img"
                           :src="element.img"
@@ -147,7 +147,7 @@
 </template>
 <script>
 import cloneDeep from 'lodash/cloneDeep'
-import 'data-room-ui/assets/symbols/bigScreenIcon/iconfont.js'
+// import 'data-room-ui/assets/symbols/bigScreenIcon/iconfont.js'
 import basicComponents from 'data-room-ui/js/config/basicComponentsConfig'
 import g2PlotComponents, { getCustomPlots } from '../G2Plots/plotList'
 import borderComponents from 'data-room-ui/js/config/borderComponentsConfig'

data-room-ui/packages/BizComponent/Preview.vue

@@ -85,7 +85,7 @@ export default {
         const data = await getBizComponentInfo(this.$route.query?.code)
         this.vueContentInner = data.vueContent
         this.settingContentInner = data.settingContent
-       this.config = this.dataFormatting(this.config)
+        this.config = this.dataFormatting(this.config)
         this.remoteComponent = remoteVueLoader('data:text/plain,' + encodeURIComponent(this.vueContentInner))
         this.loading = false
       }
@@ -115,7 +115,6 @@ export default {
      */
     // 将config.setting的配置转化为option里的配置，这里之所以将转化的方法提出来，是因为在改变维度指标和样式的时候都需要转化
     transformSettingToOption (config, type) {
-
       let option = null
       config.setting.forEach(set => {
         if (set.optionField) {

data-room-ui/packages/assets/images/bigScreenIcon/svg/16marquee.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1692869317903" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1118" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M960 0H64A64 64 0 0 0 0 64v896a64 64 0 0 0 64 64h896a64 64 0 0 0 64-64V64a64 64 0 0 0-64-64z m-21.333 85.333v853.334H85.333V85.333h853.334z" fill="#5A8BEA" p-id="1119"></path><path d="M277.333 170.667H320q21.333 0 21.333 21.333v128q0 21.333-21.333 21.333h-42.667Q256 341.333 256 320V192q0-21.333 21.333-21.333z" fill="#EA9518" p-id="1120"></path><path d="M316.34 707.66q30.17 30.17 0 60.34L256 828.34q-30.17 30.17-60.34 0t0-60.34L256 707.66q30.17-30.17 60.34 0z" fill="#1296DB" p-id="1121"></path><path d="M277.333 170.667h469.334Q768 170.667 768 192v42.667Q768 256 746.667 256H277.333Q256 256 256 234.667V192q0-21.333 21.333-21.333zM405.333 597.333h213.334q21.333 0 21.333 21.334v42.666q0 21.334-21.333 21.334H405.333q-21.333 0-21.333-21.334v-42.666q0-21.334 21.333-21.334z" fill="#EA9518" p-id="1122"></path><path d="M213.333 768h597.334q42.666 0 42.666 42.667 0 42.666-42.666 42.666H213.333q-42.666 0-42.666-42.666 0-42.667 42.666-42.667z" fill="#1296DB" p-id="1123"></path><path d="M704 170.667h42.667Q768 170.667 768 192v128q0 21.333-21.333 21.333H704q-21.333 0-21.333-21.333V192q0-21.333 21.333-21.333zM490.667 170.667h42.666q21.334 0 21.334 21.333v469.333q0 21.334-21.334 21.334h-42.666q-21.334 0-21.334-21.334V192q0-21.333 21.334-21.333z" fill="#EA9518" p-id="1124"></path></svg>

data-room-ui/packages/js/config/basicComponentsConfig.js

@@ -12,7 +12,6 @@ import getComponentConfig from 'data-room-ui/js/utils/getComponentConfig'
 // 批量引入配置文件
 import { setModules, dataModules } from 'data-room-ui/js/utils/configImport'
 const typeList = [
-  'marquee',
   'texts',
   'linkChart',
   'horizontalLine', // 横线
@@ -27,7 +26,8 @@ const typeList = [
   'screenScrollBoard',
   'video',
   'input',
-  'button'
+  'button',
+  'marquee'
 ]
 let basicConfigList = []
 basicConfigList = typeList.map((type) => {

data-room-ui/packages/js/utils/getComponentConfig.js

@@ -1,27 +1,12 @@
-import * as iconData from 'data-room-ui/assets/symbols/bigScreenIcon/iconfont.json'
-const iconNames = iconData.glyphs.map(item => item.name).sort((a, b) => a.localeCompare(b))
+import Icon from 'data-room-ui/assets/images/bigScreenIcon/export'
+console.log(Icon)
 export default function getComponentConfig (type) {
-  // const _type = _.upperFirst(type)
-  // const className = `com.gccloud.starter.lowcode.page.bigscreen.components.${_type}Chart`
   switch (type) {
-    case 'marquee':
-      return {
-        name: '跑马灯',
-        title: '跑马灯',
-        icon: iconNames[16],
-        className:
-          'com.gccloud.dataroom.core.module.chart.components.ScreenTextChart',
-        w: 150,
-        h: 100,
-        x: 0,
-        y: 0,
-        type
-      }
     case 'texts':
       return {
         name: '文本',
         title: '文本',
-        icon: iconNames[0],
+        icon: Icon.getNameList()[0],
         className:
           'com.gccloud.dataroom.core.module.chart.components.ScreenTextChart',
         w: 150,
@@ -34,7 +19,7 @@ export default function getComponentConfig (type) {
       return {
         name: '超链接',
         title: '超链接',
-        icon: iconNames[15],
+        icon: Icon.getNameList()[15],
         className:
           'com.gccloud.dataroom.core.module.chart.components.ScreenLinkChart',
         w: 150,
@@ -47,7 +32,7 @@ export default function getComponentConfig (type) {
       return {
         name: '水平线',
         title: '水平线',
-        icon: iconNames[10],
+        icon: Icon.getNameList()[10],
         component: null,
         className:
           'com.gccloud.dataroom.core.module.chart.components.ScreenBorderChart',
@@ -61,7 +46,7 @@ export default function getComponentConfig (type) {
       return {
         name: '垂直线',
         title: '垂直线',
-        icon: iconNames[11],
+        icon: Icon.getNameList()[11],
         component: null,
         className:
           'com.gccloud.dataroom.core.module.chart.components.ScreenBorderChart',
@@ -76,7 +61,7 @@ export default function getComponentConfig (type) {
       return {
         name: '图片',
         title: '图片',
-        icon: iconNames[1],
+        icon: Icon.getNameList()[1],
         className:
           'com.gccloud.dataroom.core.module.chart.components.ScreenPictureChart',
         w: 280,
@@ -89,7 +74,7 @@ export default function getComponentConfig (type) {
       return {
         name: '轮播表',
         title: '轮播表',
-        icon: iconNames[2],
+        icon: Icon.getNameList()[2],
         className:
           'com.gccloud.dataroom.core.module.chart.components.ScreenScrollBoardChart',
         w: 600,
@@ -102,7 +87,7 @@ export default function getComponentConfig (type) {
       return {
         name: '排名表',
         title: '排名表',
-        icon: iconNames[3],
+        icon: Icon.getNameList()[3],
         className:
           'com.gccloud.dataroom.core.module.chart.components.ScreenScrollRankingChart',
         w: 600,
@@ -115,7 +100,7 @@ export default function getComponentConfig (type) {
       return {
         name: '表格',
         title: '表格',
-        icon: iconNames[4],
+        icon: Icon.getNameList()[4],
         className:
           'com.gccloud.dataroom.core.module.chart.components.ScreenTablesChart',
         w: 600,
@@ -128,7 +113,7 @@ export default function getComponentConfig (type) {
       return {
         name: '当前时间',
         title: '当前时间',
-        icon: iconNames[6],
+        icon: Icon.getNameList()[6],
         className:
           'com.gccloud.dataroom.core.module.chart.components.ScreenCurrentTimeChart',
         w: 380,
@@ -141,7 +126,7 @@ export default function getComponentConfig (type) {
       return {
         name: '倒计时',
         title: '倒计时',
-        icon: iconNames[7],
+        icon: Icon.getNameList()[7],
         className:
           'com.gccloud.dataroom.core.module.chart.components.ScreenTimeCountDownChart',
         w: 500,
@@ -154,7 +139,7 @@ export default function getComponentConfig (type) {
       return {
         name: '外链',
         title: '外链',
-        icon: iconNames[8],
+        icon: Icon.getNameList()[8],
         className:
           'com.gccloud.dataroom.core.module.chart.components.ScreenIframeChart',
         w: 600,
@@ -181,7 +166,7 @@ export default function getComponentConfig (type) {
       return {
         name: '播放器',
         title: '播放器',
-        icon: iconNames[12],
+        icon: Icon.getNameList()[12],
         className:
           'com.gccloud.dataroom.core.module.chart.components.ScreenVideoChart',
         w: 600,
@@ -195,7 +180,7 @@ export default function getComponentConfig (type) {
       return {
         name: '输入框',
         title: '输入框',
-        icon: iconNames[13],
+        icon: Icon.getNameList()[13],
         className: 'com.gccloud.dataroom.core.module.chart.components.ScreenInputChart',
         w: 180,
         h: 40,
@@ -207,7 +192,7 @@ export default function getComponentConfig (type) {
       return {
         name: '按钮',
         title: '按钮',
-        icon: iconNames[14],
+        icon: Icon.getNameList()[14],
         className: 'com.gccloud.dataroom.core.module.chart.components.ScreenButtonChart',
         w: 80,
         h: 40,
@@ -215,6 +200,19 @@ export default function getComponentConfig (type) {
         y: 0,
         type
       }
+    case 'marquee':
+      return {
+        name: '跑马灯',
+        title: '跑马灯',
+        icon: Icon.getNameList()[16],
+        className:
+            'com.gccloud.dataroom.core.module.chart.components.ScreenTextChart',
+        w: 150,
+        h: 30,
+        x: 0,
+        y: 0,
+        type
+      }
     default:
       return {}
   }

data-room-ui/vue.config.example.js

@@ -174,7 +174,7 @@ module.exports = {
       .rule('svg')
       .exclude.add(resolve('packages/assets/images/dataSourceIcon/svg'))
       .add(resolve('packages/assets/images/pageIcon/svg'))
-      // .add(resolve('packages/assets/images/bigScreenIcon/svg'))
+      .add(resolve('packages/assets/images/bigScreenIcon/svg'))
       .add(resolve('packages/Svgs/svg'))
       .add(resolve('packages/assets/images/alignIcon/svg'))
       .end()
@@ -184,7 +184,7 @@ module.exports = {
       .test(/\.svg$/)
       .include.add(resolve('packages/assets/images/dataSourceIcon/svg'))
       .add(resolve('packages/assets/images/pageIcon/svg'))
-      // .add(resolve('packages/assets/images/bigScreenIcon/svg'))
+      .add(resolve('packages/assets/images/bigScreenIcon/svg'))
       .add(resolve('packages/Svgs/svg'))
       .add(resolve('packages/assets/images/alignIcon/svg'))
       .end()