允许echart在组件内更换图标类型

packages/bigscreen/designer/components/componentConfig.vue

@@ -39,9 +39,14 @@
             </el-option>
           </el-select>
         </config-item>
-        <config-item label="echart选项" v-if="/Chart/.test(config.type)" top-label>
-          <json-editor v-model="config.echartOps"/>
-        </config-item>
+        <template v-if="/Chart/.test(config.type)">
+          <config-item label="图表模板">
+            <chart-picker v-model="config.config" @input="v=>config.echartOps=$copy($echartTpls[v])"/>
+          </config-item>
+          <config-item label="图表配置项" top-label>
+            <json-editor v-model="config.echartOps"/>
+          </config-item>
+        </template>
         <config-item label="视频地址" v-if="config.type === 'video'">
           <el-input v-model="config.src" size="mini"/>
         </config-item>
@@ -208,10 +213,12 @@ import AiDialogBtn from "dui/packages/layout/AiDialogBtn.vue";
 import {monitorTypes} from "../config";
 import AiDvSummary from "../../../../components/layout/AiDvSummary/AiDvSummary.vue";
 import JsonEditor from "./jsonEditor.vue";
+import Template from "../../../../project/sass/apps/AppAskForm/components/Template.vue";
+import ChartPicker from "./chartPicker.vue";
 
 export default {
   name: 'componentConfig',
-  components: {JsonEditor, AiDvSummary, AiDialogBtn, ConfigItem},
+  components: {ChartPicker, Template, JsonEditor, AiDvSummary, AiDialogBtn, ConfigItem},
   props: {
     config: {default: () => ({})},
     instance: Function,

packages/bigscreen/designer/components/jsonEditor.vue

@@ -14,6 +14,14 @@ export default {
       fullscreen: false
     }
   },
+  watch: {
+    value(v) {
+      const content = this.editor.get()
+      if (v && content && JSON.stringify(v) != JSON.stringify(content)) {
+        this.editor?.set(v)
+      }
+    }
+  },
   methods: {
     init() {
       const {JSONEditor} = window
@@ -27,7 +35,7 @@ export default {
           },
         }, this.value)
       } else setTimeout(() => this.init(), 500)
-      const fullscreenBtn = document.querySelector(".fullscreenBtn")
+      const fullscreenBtn = this.$el.querySelector(".fullscreenBtn")
       if (!fullscreenBtn) {
         const btn = document.createElement("div")
         btn.className = "fullscreenBtn el-icon-full-screen"