From 5273f300eaf261a13d389e8e7f38541ec78680e0 Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Mon, 25 Mar 2024 17:49:57 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=81=E8=AE=B8echart=E5=9C=A8=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=86=85=E6=9B=B4=E6=8D=A2=E5=9B=BE=E6=A0=87=E7=B1=BB?=
 =?UTF-8?q?=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/AiDvRender.vue                         |  1 +
 .../designer/components/componentConfig.vue       | 15 +++++++++++----
 .../bigscreen/designer/components/jsonEditor.vue  | 10 +++++++++-
 ui/packages/tools/AiEchartV2.vue                  | 10 ++++++----
 4 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/components/AiDvRender.vue b/components/AiDvRender.vue
index f148b41e..a222fdef 100644
--- a/components/AiDvRender.vue
+++ b/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'"
diff --git a/packages/bigscreen/designer/components/componentConfig.vue b/packages/bigscreen/designer/components/componentConfig.vue
index 930e7d30..195d1948 100644
--- a/packages/bigscreen/designer/components/componentConfig.vue
+++ b/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,
diff --git a/packages/bigscreen/designer/components/jsonEditor.vue b/packages/bigscreen/designer/components/jsonEditor.vue
index 25647870..7d450e42 100644
--- a/packages/bigscreen/designer/components/jsonEditor.vue
+++ b/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"
diff --git a/ui/packages/tools/AiEchartV2.vue b/ui/packages/tools/AiEchartV2.vue
index b7527cd9..d6c55fde 100644
--- a/ui/packages/tools/AiEchartV2.vue
+++ b/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,14 +52,13 @@ 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 : {},
           colors = this.theme === '1' ? this.colors : (options.color || this.colors),
           legend = {textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14}, show: false},
           series = data?.[0] ? Array(Object.keys(data?.[0]).length - 1).fill(1)
-          .map((e, i) => ({type, ...(typeof style == 'object' ? style : style(colors[i]))})) : []
+              .map((e, i) => ({type, ...(typeof style == 'object' ? style : style(colors[i]))})) : []
       return {
         tooltip: {},
         xAxis: {
@@ -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
             }