feat:新增业务组件类型字段

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

@@ -39,7 +39,6 @@ export default {
         let setting = []
         // eslint-disable-next-line prefer-const, no-unused-vars
         let title = ''
-
         // eslint-disable-next-line prefer-const, no-unused-vars
         let data = []
         let g2Plots=g2Plot
@@ -203,7 +202,7 @@ export default {
     height: calc(100% - 40px);
     width: 100%;
     overflow: auto;
-    padding: 20px;
+    padding: 5px 20px;
     background-color: var(--bs-background-1);
   }
 }

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

@@ -28,15 +28,18 @@
           <div class="code-tab-header">
             <div class="code-tab-left">
               <div class="code-tab">组件模板</div>
-              <div class="code-tab-btn" @click="change('echarts')">
+              <div class="code-tab-btn" @click="change('echart')">
                 echarts组件
               </div>
-              <div class="code-tab-btn" @click="change('g2')">
+              <div class="code-tab-btn" @click="change('g2plot')">
                 G2Plot组件
               </div>
-              <div class="code-tab-btn" @click="change('base')">
+              <div class="code-tab-btn" @click="change('native')">
                 原生组件
               </div>
+              <div class="code-tab-btn" @click="change('3DEchart')">
+                3D组件
+              </div>
             </div>
             <div class="upload-btn">
               <CusBtn @click="upload('vueContent')">
@@ -218,33 +221,63 @@ export default {
   methods: {
     getBizComponentInfo () {
       const code = this.$route.query.code
+      const type = this.$route.query.type
       if (code) {
         getBizComponentInfo(code).then(data => {
-          this.form = {
-            ...data,
-            name: data.name,
-            coverPicture: data.coverPicture,
-            settingContent: data.settingContent || defaultSettingContent,
-            vueContent: data.vueContent || defaultVueContent
+         if(type&&type==='g2plot'){
+            this.form = {
+              ...data,
+              name: data.name,
+              coverPicture: data.coverPicture,
+              settingContent: data.settingContent || defaultG2SettingContent,
+              vueContent: data.vueContent || defaultG2VueContent
+            }
+          }else if(type&&type==='echart'){
+            this.form = {
+              ...data,
+              name: data.name,
+              coverPicture: data.coverPicture,
+              settingContent: data.settingContent || defaultEchartsSettingContent,
+              vueContent: data.vueContent || defaultEchartsVueContent
+            }
+          }else{
+            this.form = {
+              ...data,
+              name: data.name,
+              coverPicture: data.coverPicture,
+              settingContent: data.settingContent || defaultSettingContent,
+              vueContent: data.vueContent || defaultVueContent
+            }
           }
+
           // this.$refs.vueContent.editor.setValue(this.form.vueContent)
           // this.$refs.settingContent.editor.setValue(this.form.settingContent)
         })
       }
     },
     changeTemp(val){
-      if(val=='g2'){
+      if(val=='g2plot'){
         this.form.settingContent=defaultG2SettingContent
         this.form.vueContent=defaultG2VueContent
-      }else if(val=='base'){
+      }else if(val=='native'){
         this.form.settingContent=defaultSettingContent
         this.form.vueContent=defaultVueContent
-      }else if(val=='echarts'){
+      }else if(val=='echart'){
         this.form.settingContent= defaultEchartsSettingContent
         this.form.vueContent=defaultEchartsVueContent
       }
     },
     change(val) {
+      if(val==='3DEchart') return this.$confirm('开发中。。。。', '提示', {
+        distinguishCancelAndClose: true,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        cancelButtonClass: 'cancel-btn',
+        type: 'warning',
+        customClass: 'bs-el-message-box'
+      }).then(() => {
+      }).catch((action) => {
+      })
       this.$confirm('确定替换为选中模板吗？未保存的代码将被覆盖！', '提示', {
         distinguishCancelAndClose: true,
         confirmButtonText: '确定',
@@ -444,8 +477,8 @@ export default {
       display: flex;
       justify-content: space-between;
       width: 100%;
-      height: 400px;
-      padding: 16px;
+      height: 354px;
+      padding: 5px 16px;
 
       .left-vue-code {
         width: 60%;
@@ -474,8 +507,9 @@ export default {
             align-items: center;
             justify-content: space-between;
             .code-tab-btn{
-              width: 90px;
+              // width: 90px;
               cursor: pointer;
+              text-align: center;
             }
             .code-tab {
               font-size: 14px;
@@ -501,7 +535,7 @@ export default {
         }
 
         .code-tab-content {
-          height: calc(100% - 40px);
+          height: calc(100% - 88px);
           background: var(--bs-background-1);
         }
       }

data-room-ui/packages/ComponentList/EditForm.vue

@@ -28,6 +28,25 @@
             maxlength="30"
             class="bs-el-input"
           />
+        </el-form-item>
+         <el-form-item
+          label="组件类型"
+          v-if="type === 'bizComponent'"
+        >
+          <el-select
+            v-model="bizType"
+            class="bs-el-select"
+            popper-class="bs-el-select"
+            placeholder="请选择组件类型"
+            clearable
+          >
+            <el-option
+              v-for="resolutionRatioItem in BizList"
+              :key="resolutionRatioItem.value"
+              :label="resolutionRatioItem.label"
+              :value="resolutionRatioItem.value"
+            />
+          </el-select>
         </el-form-item>
         <el-form-item
           v-if="type === 'component'"
@@ -126,8 +145,21 @@ export default {
   },
   data () {
     return {
+      bizType:'',
       resolutionRatioValue: '',
       resolutionRatio: {},
+      BizList:[
+        {
+          label:'echarts组件',
+          value:'echarts'
+        }, {
+          label:'g2Plot组件',
+          value:'g2plot'
+        }, {
+          label:'基础组件',
+          value:'native'
+        },
+      ],
       resolutionRatioOptions: [
         {
           value: '1024*768',
@@ -422,7 +454,13 @@ export default {
     // 跳转设计态
     toDesign (form) {
       const path = this.type === 'component' ? (window.BS_CONFIG?.routers?.designUrl || '/big-screen/design') : 'big-screen-biz-component-design'
-      const { href: bigScreenHref } = this.$router.resolve({
+      const { href: bigScreenHref } =this.type=='bizComponent'? this.$router.resolve({
+        path,
+        query: {
+          code: form.code,
+          type:this.bizType
+        }
+      }):this.$router.resolve({
         path,
         query: {
           code: form.code