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

components/AiDvRender.vue

@@ -25,6 +25,7 @@
                     :key="`chart-${index}`"
                     :theme="theme"
                     :data="values"
+                    :tpl="data.config"
                     :ops="data.echartOps"/>
       <AiDvTable
           v-else-if="currentType === 'AiDvTable'"

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>
+        <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"

ui/packages/tools/AiEchartV2.vue

@@ -15,6 +15,7 @@ export default {
     data: {default: () => []},
     ops: {default: () => ({})},
     type: {default: "line"},
+    tpl: String,
     series: Object,
     theme: {
       default: '0'
@@ -51,7 +52,6 @@ export default {
 
       return ['#FFBA44', '#EC6666', '#FF3E18', '#C9FF82', '#29D7FA', '#ea7ccc']
     },
-
     chartOptions() {
       let {type, data, ops: options = {}} = this,
           style = this.series ? this.series : this.ops.daemon ? this.ops.daemon : {},
@@ -118,9 +118,11 @@ export default {
         this.getChartData(oldDims != current)
       }
     },
-
     theme() {
       this.refresh()
+    },
+    tpl(v) {
+      v && this.refresh()
     }
   },
   methods: {
@@ -149,7 +151,7 @@ export default {
 
             if (copy && typeof copy == 'object') {
               // 递归调用
-              target[name] = this.deepAssign( src, copy)
+              target[name] = this.deepAssign(src, copy)
             } else if (copy !== undefined) {
               target[name] = copy
             }