0.0.7: 图表DEMO_EK 自定义组件

README.md

@@ -85,6 +85,7 @@ public interface CustomComponentProvider extends Mutable {
 * 0.0.4: 图表DEMO_EK 保存配置接口: [0.0.4](说明/0.0.4)
 * 0.0.5: 图表DEMO_EK Click联动: [0.0.5](说明/0.0.5)
 * 0.0.6: 图表DEMO_EK dimensionSelected、pointSelected联动: [0.0.6](说明/0.0.6)
+* 0.0.7: 图表DEMO_EK 自定义组件: [0.0.7](说明/0.0.7)
 
 
 

plugin.xml

@@ -3,7 +3,7 @@
     <id>com.finebi.plugin.tptj.ivan.chart.demo.amap</id>
     <name><![CDATA[图表DEMO_EK]]></name>
     <active>yes</active>
-    <version>0.0.6</version>
+    <version>0.0.7</version>
     <env-version>11.0~11.0</env-version>
     <jartime>2021-08-30</jartime>
     <vendor>DEMO</vendor>
@@ -15,6 +15,7 @@
       0.0.4: 图表DEMO_EK 保存配置接口<br/>
       0.0.5: 图表DEMO_EK Click联动<br/>
       0.0.6: 图表DEMO_EK dimensionSelected、pointSelected联动<br/>
+      0.0.7: 图表DEMO_EK 自定义组件<br/>
     ]]></change-notes>
     <bi-env-version>6.0~</bi-env-version>
     <main-package>com.finebi.plugin.tptj.ivan.chart.demo.amap</main-package>
@@ -26,4 +27,7 @@
                 class="com.finebi.plugin.tptj.ivan.chart.demo.amap.MapHotComponentProvider"/>
         <LocaleFinder class="com.finebi.plugin.tptj.ivan.chart.demo.amap.locale.CustomDatasetLocale"/>
     </extra-core>
+    <extra-decision>
+        <WebResourceProvider class="com.finebi.plugin.tptj.ivan.chart.demo.amap.component.SubjectComponentProvider"/>
+    </extra-decision>
 </plugin>

src/main/java/com/finebi/plugin/tptj/ivan/chart/demo/amap/component/AmapDemo.java

@@ -0,0 +1,17 @@
+package com.finebi.plugin.tptj.ivan.chart.demo.amap.component;
+
+import com.fr.common.annotations.Open;
+import com.fr.web.struct.Component;
+import com.fr.web.struct.category.ScriptPath;
+
+@Open
+public class AmapDemo extends Component {
+    public static final AmapDemo KEY = new AmapDemo();
+
+    private AmapDemo() {
+    }
+
+    public ScriptPath script() {
+        return ScriptPath.build("/com/finebi/plugin/tptj/ivan/chart/demo/amap/widget/bi.amap.demo.js");
+    }
+}

src/main/java/com/finebi/plugin/tptj/ivan/chart/demo/amap/component/SubjectComponentProvider.java

@@ -0,0 +1,29 @@
+package com.finebi.plugin.tptj.ivan.chart.demo.amap.component;
+
+import com.finebi.foundation.api.web.component.AssembleComponentFactory;
+import com.fr.decision.fun.impl.AbstractWebResourceProvider;
+import com.fr.web.struct.Atom;
+
+
+/**
+ * 自定义组件需要注入到subject里
+ *
+ * @author Ivan.Guo
+ * @version 11.0
+ */
+public class SubjectComponentProvider extends AbstractWebResourceProvider {
+    public SubjectComponentProvider() {
+    }
+
+    @Override
+    public Atom attach() {
+        return AssembleComponentFactory.getSubjectComponent();
+    }
+
+    @Override
+    public Atom[] clients() {
+        return new Atom[]{
+                AmapDemo.KEY,
+        };
+    }
+}

src/main/resources/com/finebi/plugin/tptj/ivan/chart/demo/amap/config/config.json

@@ -15,6 +15,19 @@
       "text": "Plugin-DEMO_WEB_FG",
       "multiFields": false,
       "settings": []
+    },
+    {
+      "name": "test",
+      "text": "测试",
+      "multiFields": false,
+      "settings": [
+        {
+          "name": "test1",
+          "text": "测试1",
+          "type": "bi.amap.demo",
+          "defaultValue": {}
+        }
+      ]
     }
   ],
   "chartStyles": [

src/main/resources/com/finebi/plugin/tptj/ivan/chart/demo/amap/js/chart.js

@@ -41,6 +41,13 @@
             customConfig
         } = config;
 
+        // 图形属性配置项存在于chartAttrMapping对象中，这里只是DEMO，具体获取逻辑自行修改
+        const configKeys = Object.keys(chartAttrMapping);
+        for (let i = 0; i < configKeys.length; i++) {
+            let configKey = configKeys[i];
+            alert(configKey + ": " + chartAttr[configKey]['test'].value[0])
+        }
+
         // 获取配置项
         const mapAttribute = chartStyle["mapProp"]["value"];
 

src/main/resources/com/finebi/plugin/tptj/ivan/chart/demo/amap/widget/bi.amap.demo.js

@@ -0,0 +1,64 @@
+!(function () {
+    /**
+     * 自定义组件需优先注入到subject里
+     */
+    var Demo = BI.inherit(BI.Widget, {
+
+        props: {
+            baseCls: ""
+        },
+
+        render: function () {
+            var self = this;
+            // self.options包含上次的value和setValue方法
+            debugger;
+            return {
+                type: "bi.vertical",
+                width: 300,
+                items: [
+                    {
+                        el: {
+                            type: "bi.vertical_adapt",
+                            items: [
+                                {
+                                    el: {
+                                        type: "bi.label",
+                                        text: "名称",
+                                        textAlign: "left",
+                                    },
+                                    width: 70,
+                                    rgap: 10,
+                                },
+                                {
+                                    el: {
+                                        type: "bi.editor",
+                                        value: self.options.value, // 上次设置的value
+                                        cls: "bi-border bi-border-radius",
+                                        width: 150,
+                                        allowClear: !1,
+                                        height: 24,
+                                        ref: function (e) {
+                                            self.myNameEditor = e;
+                                        },
+                                        listeners: [
+                                            {
+                                                eventName: "EVENT_CHANGE",
+                                                action: function () {
+                                                    debugger;
+                                                    // 设置value的方法，调用后会刷新页面
+                                                    self.options.setValue(this.getValue());
+                                                },
+                                            },
+                                        ],
+                                    },
+                                },
+                            ],
+                        },
+                        tgap: 10,
+                    }]
+            };
+        },
+
+    });
+    BI.shortcut("bi.amap.demo", Demo);
+})();