feat:业务组件添加g2plot模板

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

@@ -407,7 +407,7 @@ export default {
     },
     // 自定义属性更新
     updateSetting (config) {
-      if (config.type === 'map' || config.type === 'video' || config.type === 'flyMap') {
+      if (config.type === 'map'|| config.type==='remoteComponent' || config.type === 'video' || config.type === 'flyMap') {
         config.key = new Date().getTime()
       }
       this.changeChartConfig(cloneDeep(config))

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

@@ -14,6 +14,8 @@
 </template>
 <script>
 import remoteVueLoader from 'remote-vue-loader'
+import * as _echarts from 'echarts'
+import * as g2Plot from '@antv/g2plot'
 import { getBizComponentInfo } from 'data-room-ui/js/api/bigScreenApi'
 import innerRemoteComponents, { getRemoteComponents } from 'data-room-ui/RemoteComponents/remoteComponentsList'
 export default {
@@ -37,8 +39,12 @@ export default {
         let setting = []
         // eslint-disable-next-line prefer-const, no-unused-vars
         let title = ''
+
+        let chartType = ''
         // eslint-disable-next-line prefer-const, no-unused-vars
         let data = []
+        let g2Plots=g2Plot
+        let echarts = _echarts
         // eslint-disable-next-line prefer-const
         let settingContent = this.settingContentInner?.replaceAll('const ', '')
         // 去掉 export default及后面代码
@@ -47,7 +53,10 @@ export default {
         return {
           title,
           option,
-          setting
+          setting,
+          echarts,
+          g2Plots,
+          chartType
         }
       },
       set (val) {}
@@ -72,7 +81,7 @@ export default {
       loading: false,
       remoteComponent: null,
       vueContentInner: this.vueContent,
-      settingContentInner: this.settingContent?.replaceAll('const ', '')
+      settingContentInner: this.settingContent?.replaceAll('const ', ''),
     }
   },
   created () {
@@ -185,17 +194,17 @@ export default {
 
 <style lang="scss" scoped>
 .bs-remote-preview {
-  position: absolute;
-  min-height: 100%;
+  // position: absolute;
+  height: 88%;
   min-width: 100%;
   overflow: hidden;
   box-sizing: border-box;
 
   .remote-preview-inner-wrap {
-    position: absolute;
-    // height: 100%;
+    // position: absolute;
+    height: 100%;
     width: 100%;
-    overflow: auto;
+    // overflow: auto;
     padding: 20px;
     background-color: var(--bs-background-1);
   }

data-room-ui/packages/BizComponent/config/defaultG2Config.js

@@ -0,0 +1,511 @@
+/*
+ * @description: 此处是业务组件的代码案例
+ * @Date: 2023-06-06 15:45:07
+ */
+
+// vue 组件片段
+export const defaultG2VueContent = `
+<!-- 这是一个代码案例 -->
+<template>
+  <div
+	 :id="chatId"
+	 style="width: 100%;height: 300px"
+	/>
+</template>
+<script>
+
+export default {
+
+  name: 'TestA',
+  components: {
+  },
+  // 业务组件提供的props
+  props: {
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+	  chart: null,
+    }
+  },
+  // 计算属性
+  computed: {
+   chatId(){
+	 return 'g2' + this.config.code
+   }
+  },
+  methods: {
+
+    // 联动需要调用次接口
+    newChart (config) {
+      this.chart = new config.g2Plots['Line'](this.chatId, {
+        renderer: 'svg',
+        // 仪表盘缩放状态下，点击准确
+        supportCSSTransform: true,
+        ...config.option
+      })
+      this.chart.render()
+    },
+  },
+  mounted(){
+   this.newChart(this.config)
+  },
+}
+</script>
+<style lang="scss" scoped>
+// 此处书写样式，支持scss
+
+</style>
+`
+
+// 配置 片段
+export const defaultG2SettingContent = `
+// 这是一个配置案例
+//  组件备注名称
+const title = 'g2案例'
+
+// 右侧配置项
+const setting = [
+   {
+    label: '维度',
+    // 设置组件类型， select / input / colorPicker
+    type: 'select',
+    // 字段
+    field: 'xField',
+    optionField: 'xField', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+    // tab页。 data: 数据， custom: 自定义
+    tabName: 'data'
+  },
+  {
+    label: '指标',
+    // 设置组件类型
+    type: 'select',
+    // 字段
+    field: 'yField',
+    // 对应options中的字段
+    optionField: 'yField',
+    // 是否多选
+    multiple: false,
+    value: '',
+    tabName: 'data'
+  },
+  /** 样式配置 **/
+  // 图表 graph
+  {
+    label: '曲线宽度',
+    type: 'inputNumber',
+    field: 'lineStyle_lineWidth',
+    optionField: 'lineStyle.lineWidth',
+    value: 2,
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  {
+    label: '曲线颜色',
+    type: 'gradual',
+    field: 'lineStyle_stroke',
+    optionField: 'lineStyle.stroke',
+    value: 'l(0) 0:#5F92F9 1:#62FF00',
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  // 网格线 grid
+  {
+    label: '虚线',
+    type: 'switch',
+    field: 'yAxis_grid_line_style_lineDash',
+    optionField: 'yAxis.grid.line.style.lineDash',
+    value: 0,
+    active: 5,
+    inactive: 0,
+    tabName: 'custom',
+    groupName: 'grid'
+  },
+  {
+    label: '宽度',
+    type: 'inputNumber',
+    field: 'yAxis_grid_line_style_lineWidth',
+    optionField: 'yAxis.grid.line.style.lineWidth',
+    value: 1,
+    tabName: 'custom',
+    groupName: 'grid'
+  },
+  {
+    label: '颜色',
+    type: 'colorPicker',
+    field: 'yAxis_grid_line_style_stroke',
+    optionField: 'yAxis.grid.line.style.stroke',
+    value: '#d0d0d0',
+    tabName: 'custom',
+    groupName: 'grid'
+  },
+  // 图例 legend
+  // X轴 xAxis
+  {
+    label: '标题',
+    type: 'input',
+    field: 'xAxis_title_text',
+    optionField: 'xAxis.title.text',
+    value: '',
+    tabName: 'custom',
+    groupName: 'xAxis'
+  },
+  {
+    label: '标题位置',
+    type: 'select',
+    field: 'xAxis_title_position',
+    optionField: 'xAxis.title.position',
+    value: 'end',
+    tabName: 'custom',
+    options: [
+      {
+        label: '左',
+        value: 'start'
+      },
+      {
+        label: '中',
+        value: 'center'
+      },
+      {
+        label: '右',
+        value: 'end'
+      }],
+    groupName: 'xAxis'
+  },
+  {
+    label: '标题字体大小',
+    type: 'inputNumber',
+    field: 'xAxis_title_style_fontSize',
+    optionField: 'xAxis.title.style.fontSize',
+    value: 12,
+    tabName: 'custom',
+    groupName: 'xAxis'
+  },
+  {
+    label: '标题颜色',
+    type: 'colorPicker',
+    field: 'xAxis_title_style_fill',
+    optionField: 'xAxis.title.style.fill',
+    // 是否多选
+    multiple: false,
+    value: '#8C8C8C',
+    tabName: 'custom',
+    groupName: 'xAxis'
+  },
+  {
+    label: '标签大小',
+    type: 'inputNumber',
+    field: 'xAxis_label_style_fontSize',
+    optionField: 'xAxis.label.style.fontSize',
+    value: 12,
+    tabName: 'custom',
+    groupName: 'xAxis'
+  },
+  {
+    label: '标签颜色',
+    type: 'colorPicker',
+    field: 'xAxis_label_style_fill',
+    optionField: 'xAxis.label.style.fill',
+    // 是否多选
+    multiple: false,
+    value: '#8C8C8C',
+    tabName: 'custom',
+    groupName: 'xAxis'
+  },
+  {
+    label: '轴线宽度',
+    type: 'inputNumber',
+    field: 'xAxis_line_style_lineWidth',
+    optionField: 'xAxis.line.style.lineWidth',
+    value: 1,
+    tabName: 'custom',
+    groupName: 'xAxis'
+  },
+  {
+    label: '轴线颜色',
+    type: 'colorPicker',
+    field: 'xAxis_line_style_stroke',
+    optionField: 'xAxis.line.style.stroke',
+    // 是否多选
+    multiple: false,
+    value: '#d0d0d0',
+    tabName: 'custom',
+    groupName: 'xAxis'
+  },
+  {
+    label: '刻度线宽度',
+    type: 'inputNumber',
+    field: 'xAxis_tickLine_style_lineWidth',
+    optionField: 'xAxis.tickLine.style.lineWidth',
+    value: 1,
+    tabName: 'custom',
+    groupName: 'xAxis'
+  },
+  {
+    label: '刻度线颜色',
+    type: 'colorPicker',
+    field: 'xAxis_tickLine_style_stroke',
+    optionField: 'xAxis.tickLine.style.stroke',
+    // 是否多选
+    multiple: false,
+    value: '#d0d0d0',
+    tabName: 'custom',
+    groupName: 'xAxis'
+  },
+  {
+    label: '标签过多时旋转',
+    type: 'switch',
+    field: 'xAxis_label_autoRotate',
+    optionField: 'xAxis.label.autoRotate',
+    value: false,
+    active: true,
+    inactive: false,
+    tabName: 'custom',
+    groupName: 'xAxis'
+  },
+  {
+    label: '标签过多时隐藏',
+    type: 'switch',
+    field: 'xAxis_label_autoHide',
+    optionField: 'xAxis.label.autoHide',
+    value: false,
+    active: true,
+    inactive: false,
+    tabName: 'custom',
+    groupName: 'xAxis'
+  },
+  {
+    label: '标签过长时省略',
+    type: 'switch',
+    field: 'xAxis_label_autoEllipsis',
+    optionField: 'xAxis.label.autoEllipsis',
+    value: false,
+    active: true,
+    inactive: false,
+    tabName: 'custom',
+    groupName: 'xAxis'
+  },
+  // Y轴 yAxis
+  {
+    label: '标题',
+    type: 'input',
+    field: 'yAxis_title_text',
+    optionField: 'yAxis.title.text',
+    value: '',
+    tabName: 'custom',
+    groupName: 'yAxis'
+  },
+  {
+    label: '标题位置',
+    type: 'select',
+    field: 'yAxis_title_position',
+    optionField: 'yAxis.title.position',
+    value: 'end',
+    tabName: 'custom',
+    options: [
+      {
+        label: '上',
+        value: 'end'
+      },
+      {
+        label: '中',
+        value: 'center'
+      },
+      {
+        label: '下',
+        value: 'start'
+      }],
+    groupName: 'yAxis'
+  },
+  {
+    label: '标题字体大小',
+    type: 'inputNumber',
+    field: 'yAxis_title_style_fontSize',
+    optionField: 'yAxis.title.style.fontSize',
+    value: 12,
+    tabName: 'custom',
+    groupName: 'yAxis'
+  },
+  {
+    label: '标题颜色',
+    type: 'colorPicker',
+    field: 'yAxis_title_style_fill',
+    optionField: 'yAxis.title.style.fill',
+    // 是否多选
+    multiple: false,
+    value: '#8C8C8C',
+    tabName: 'custom',
+    groupName: 'yAxis'
+  },
+  {
+    label: '显示标签',
+    type: 'switch',
+    field: 'yAxis_label_style_opacity',
+    optionField: 'yAxis.label.style.opacity',
+    value: 1,
+    active: 1,
+    inactive: 0,
+    tabName: 'custom',
+    groupName: 'yAxis'
+  },
+  {
+    label: '标签字体大小',
+    type: 'inputNumber',
+    field: 'yAxis_label_style_fontSize',
+    optionField: 'yAxis.label.style.fontSize',
+    value: 12,
+    tabName: 'custom',
+    groupName: 'yAxis'
+  },
+  {
+    label: '标签字体颜色',
+    type: 'colorPicker',
+    field: 'yAxis_label_style_fill',
+    optionField: 'yAxis.label.style.fill',
+    // 是否多选
+    multiple: false,
+    value: '#8C8C8C',
+    tabName: 'custom',
+    groupName: 'yAxis'
+  },
+  {
+    label: '轴线宽度',
+    type: 'inputNumber',
+    field: 'yAxis_line_lineWidth',
+    optionField: 'yAxis.line.style.lineWidth',
+    value: 0,
+    tabName: 'custom',
+    groupName: 'yAxis'
+  },
+  {
+    label: '轴线颜色',
+    type: 'colorPicker',
+    field: 'yAxis_line_stroke',
+    optionField: 'yAxis.line.style.stroke',
+    // 是否多选
+    multiple: false,
+    value: '#d0d0d0',
+    tabName: 'custom',
+    groupName: 'yAxis'
+  },
+  // 边距 padding
+    {
+    label: '图表边距',
+    type: 'padding',
+    field: 'appendPadding',
+    optionField: 'appendPadding',
+    value: [16, 16, 16, 16],
+    tabName: 'custom',
+    groupName: 'padding'
+  }
+]
+
+// 模拟数据
+const data = [
+  { Date: '2010-01', scales: 1998 },
+  { Date: '2010-02', scales: 1850 },
+  { Date: '2010-03', scales: 1720 },
+  { Date: '2010-04', scales: 1818 },
+  { Date: '2010-05', scales: 1920 },
+  { Date: '2010-06', scales: 1802 },
+  { Date: '2010-07', scales: 1945 },
+  { Date: '2010-08', scales: 1856 },
+  { Date: '2010-09', scales: 2107 },
+  { Date: '2010-10', scales: 2140 }
+]
+
+const option = {
+  // 数据将要放入到哪个字段中
+  dataKey: 'data',
+  data,
+  color: '',
+  appendPadding: [16, 16, 16, 16], // 设置图标的边距
+  xField: 'Date',
+  yField: 'scales',
+  smooth: true,
+  lineStyle: {
+    lineWidth: 2,
+    stroke: 'l(0) 0:#5F92F9 1:#62FF00'
+  },
+  xAxis: {
+    title: {
+      text: '',
+      position: 'end',
+      style: {
+        fill: '#8C8C8C',
+        fontSize: 12
+      }
+    },
+    label: {
+      autoRotate: false,
+      autoHide: false,
+      autoEllipsis: true,
+      style: {
+        fill: '#8C8C8C',
+        fontSize: 12
+      }
+    },
+    line: {
+      style: {
+        stroke: '#d0d0d0',
+        lineWidth: 1
+      }
+    },
+    tickLine: {
+      style: {
+        stroke: '#d0d0d0',
+        lineWidth: 1
+      }
+    }
+  },
+  yAxis: {
+    title: {
+      text: '',
+      position: 'end',
+      autoRotate: false,
+      // rotation: Math.PI / 2,
+      style: {
+        fill: '#8C8C8C',
+        fontSize: 12
+      }
+    },
+    grid: {
+      line: {
+        style: {
+          stroke: '#d0d0d0',
+          lineWidth: 1,
+          lineDash: [4, 5],
+          strokeOpacity: 0.7
+        }
+      }
+    },
+    label: {
+      style: {
+        fill: '#8C8C8C',
+        fontSize: 12,
+        opacity: 1
+      }
+    },
+    line: {
+      style: {
+        stroke: '#d0d0d0',
+        lineWidth: 0
+      }
+    }
+  }
+}
+
+export default {
+  title,
+  option,
+  setting
+}
+
+`

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

@@ -13,12 +13,7 @@
         </div>
       </div>
       <div class="right-btn-wrap">
-        <CusBtn
-          :loading="loading"
-          @click.native="createdImg()"
-        >
-          生成图片
-        </CusBtn>
+
         <CusBtn
           :loading="loading"
           @click="save"
@@ -31,8 +26,17 @@
       <div class="bs-custom-component-content-code">
         <div class="left-vue-code component-code">
           <div class="code-tab-header">
-            <div class="code-tab">
-              VUE组件
+            <div class="code-tab-left">
+              <div class="code-tab">组件模板</div>
+              <div class="code-tab-btn">
+                echarts组件
+              </div>
+              <div class="code-tab-btn" @click="change('g2')">
+                G2Plot组件
+              </div>
+              <div class="code-tab-btn" @click="change('base')">
+                原生组件
+              </div>
             </div>
             <div class="upload-btn">
               <CusBtn @click="upload('vueContent')">
@@ -84,6 +88,14 @@
             <div class="code-tab">
               效果预览
             </div>
+            <div class="upload-btn">
+             <CusBtn
+              :loading="loading"
+              @click.native="createdImg()"
+            >
+              生成图片
+            </CusBtn>
+            </div>
           </div>
           <BizComponentPreview
             :vue-content="form.vueContent"
@@ -118,6 +130,7 @@ import CusBtn from 'data-room-ui/BigScreenDesign/BtnLoading'
 import BizComponentPreview from './Preview'
 import { getBizComponentInfo, updateBizComponent } from 'data-room-ui/js/api/bigScreenApi'
 import { defaultSettingContent, defaultVueContent } from './config/defaultBizConfig'
+import { defaultG2SettingContent, defaultG2VueContent } from './config/defaultG2Config'
 import { codemirror } from 'vue-codemirror'
 import 'codemirror/lib/codemirror.css'
 import 'codemirror/theme/material-darker.css'
@@ -218,6 +231,29 @@ export default {
         })
       }
     },
+    changeTemp(val){
+      if(val=='g2'){
+        this.form.settingContent=defaultG2SettingContent
+        this.form.vueContent=defaultG2VueContent
+      }else if(val=='base'){
+        this.form.settingContent=defaultSettingContent
+        this.form.vueContent=defaultVueContent
+      }
+    },
+    change(val) {
+      this.$confirm('确定替换为选中模板吗？未保存的代码将被覆盖！', '提示', {
+        distinguishCancelAndClose: true,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        cancelButtonClass: 'cancel-btn',
+        type: 'warning',
+        customClass: 'bs-el-message-box'
+      }).then(() => {
+        this.changeTemp(val)
+      }).catch((action) => {
+
+      })
+    },
     upload (type) {
       this.currentContentType = type
       this.$refs[`${this.currentContentType}File`].click()
@@ -426,6 +462,28 @@ export default {
           justify-content: space-between;
           height: 40px;
 
+          .code-tab-left {
+            height: 100%;
+            width: 450px;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+            .code-tab-btn{
+              width: 90px;
+              cursor: pointer;
+            }
+            .code-tab {
+              font-size: 14px;
+              align-items: center;
+              justify-content: center;
+              width: 120px;
+              height: 100%;
+              color: var(--bs-el-title);
+              background: var(--bs-background-1);
+            }
+          }
+
           .code-tab {
             font-size: 14px;
             display: flex;
@@ -458,13 +516,20 @@ export default {
         position: relative;
         .code-tab-header{
           height: 40px;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
           background-color: var(--bs-background-2);
-          line-height: 40px;
-          .code-tab{
+          .code-tab {
+            font-size: 14px;
+            align-items: center;
+            justify-content: center;
+            display: flex;
             width: 120px;
-            height:40px;
-            text-align: center;
-            background-color: var(--bs-background-1);
+            margin-right: 20px;
+            height: 100%;
+            color: var(--bs-el-title);
+            background: var(--bs-background-1);
           }
         }
       }

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

@@ -16,6 +16,8 @@
 import linkageMixins from 'data-room-ui/js/mixins/linkageMixins'
 import commonMixins from 'data-room-ui/js/mixins/commonMixins'
 import remoteVueLoader from 'remote-vue-loader'
+import * as g2Plot from '@antv/g2plot'
+import * as _echarts from 'echarts'
 import { mapMutations, mapState } from 'vuex'
 import innerRemoteComponents, { getRemoteComponents } from 'data-room-ui/RemoteComponents/remoteComponentsList'
 import { getBizComponentInfo } from 'data-room-ui/js/api/bigScreenApi'
@@ -90,6 +92,8 @@ export default {
     },
     async chartInit () {
       let config = this.config
+      config.g2Plots=g2Plot
+      config.echarts=_echarts
       // key和code相等，说明是一进来刷新，调用list接口
       if (this.config.code === this.config.key || this.isPreview) {
         // 改变样式