给echart提供个性化的地方

packages/bigscreen/designer/components/componentConfig.vue

@@ -25,114 +25,86 @@
     <div class="layout-right__content--wrapper">
       <div class="layout-config__group">
         <h2>组件设置</h2>
-        <div class="layout-config__item layout-config__item--input">
-          <label>标题</label>
-          <div class="layout-config__item--right">
-            <el-input v-model="config.title" size="mini"></el-input>
-          </div>
-        </div>
-        <div class="layout-config__item layout-config__item--input" v-if="config.display === 'summary2'">
-          <label>标题</label>
-          <div class="layout-config__item--right">
-            <el-input v-model="config.summaryTitle" size="mini"></el-input>
-          </div>
-        </div>
-        <div class="layout-config__item" v-if="config.type !== 'display'">
-          <label>边框</label>
-          <div class="layout-config__item--right">
-            <el-select size="mini" v-model="config.border" placeholder="请选择边框" clearable>
-              <el-option
-                  v-for="(item, index) in borderList"
-                  :key="index"
-                  :label="item"
-                  :value="item">
-              </el-option>
-            </el-select>
-          </div>
-        </div>
-        <div class="layout-config__item layout-config__item--input" v-if="config.type === 'video'">
-          <label>视频地址</label>
-          <div class="layout-config__item--right">
-            <el-input v-model="config.src" size="mini"></el-input>
-          </div>
-        </div>
+        <config-item label="标题">
+          <el-input v-model="config.summaryTitle" size="mini" v-if="config.display === 'summary2'"/>
+          <el-input v-else v-model="config.title" size="mini"/>
+        </config-item>
+        <config-item label="边框" v-if="config.type !== 'display'">
+          <el-select size="mini" v-model="config.border" placeholder="请选择边框" clearable>
+            <el-option
+                v-for="(item, index) in borderList"
+                :key="index"
+                :label="item"
+                :value="item">
+            </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>
+        <config-item label="视频地址" v-if="config.type === 'video'">
+          <el-input v-model="config.src" size="mini"/>
+        </config-item>
         <config-item label="图片URL" v-if="config.type=='img'">
           <el-input v-model="config.src" size="mini" clearable placeholder="请输入图片URL"/>
         </config-item>
-        <div class="layout-config__item" v-if="config.type === 'monitor'">
-          <label>视频类型</label>
-          <div class="layout-config__item--right">
-            <ai-select size="mini" v-model="config.monitorType" :select-list="monitorTypes"/>
-          </div>
-        </div>
-        <div class="layout-config__item" v-if="config.type === 'AiRanking'">
-          <label>样式</label>
-          <div class="layout-config__item--right">
-            <el-select size="mini" v-model="config.subType" placeholder="请选择样式" clearable>
-              <el-option label="样式1" value="Ranking1"></el-option>
-              <el-option label="样式2" value="Ranking2"></el-option>
-              <el-option label="样式3" value="Ranking3"></el-option>
-            </el-select>
-          </div>
-        </div>
+        <config-item label="视频类型" v-if="config.type === 'monitor'">
+          <ai-select size="mini" v-model="config.monitorType" :select-list="monitorTypes"/>
+        </config-item>
+        <config-item label="样式" v-if="config.type === 'AiRanking'">
+          <el-select size="mini" v-model="config.subType" placeholder="请选择样式" clearable>
+            <el-option label="样式1" value="Ranking1"></el-option>
+            <el-option label="样式2" value="Ranking2"></el-option>
+            <el-option label="样式3" value="Ranking3"></el-option>
+          </el-select>
+        </config-item>
         <template v-if="config.type === 'table' || config.type === 'AiDvTable'">
-          <div class="layout-config__item">
-            <label>显示排名</label>
-            <div class="layout-config__item--right">
-              <el-select size="mini" v-model="config.isShowIndex" placeholder="请选择" clearable>
-                <el-option
-                    v-for="(item, index) in tableStatus"
-                    :key="index"
-                    :label="item.label"
-                    :value="item.value">
-                </el-option>
-              </el-select>
-            </div>
-          </div>
-          <div class="layout-config__item" v-if="config.type === 'AiDvTable'">
-            <label>斑马纹</label>
-            <div class="layout-config__item--right">
-              <el-select size="mini" v-model="config.stripe" placeholder="请选择" clearable>
-                <el-option
-                    label="是"
-                    value="1">
-                </el-option>
-                <el-option
-                    label="否"
-                    value="0">
-                </el-option>
-              </el-select>
-            </div>
-          </div>
-          <div class="layout-config__item" v-if="config.type === 'AiDvTable'">
-            <label>简易样式</label>
-            <div class="layout-config__item--right">
-              <el-select size="mini" v-model="config.simple" placeholder="请选择" clearable>
-                <el-option label="是" value="1"/>
-                <el-option label="否" value="0"/>
-              </el-select>
-            </div>
-          </div>
-          <div class="layout-config__item" v-if="config.type !== 'AiDvTable'">
-            <label>表格行数</label>
-            <div class="layout-config__item--right">
-              <el-input-number size="mini" style="width: 232px" :min="0" v-model="config.rowNum"
-                               controls-position="right"></el-input-number>
-            </div>
-          </div>
-          <div class="layout-config__item table-config" v-if="config.type === 'AiDvTable'"
-               v-for="(item, index) in config.config" :key="index">
-            <label>第{{ index + 1 }}列</label>
-            <div class="layout-config__item--right">
-              <el-select size="mini" style="width: 80px;" v-model="item.align" placeholder="请选择" clearable>
-                <el-option label="居中" value="center"></el-option>
-                <el-option label="居左" value="left"></el-option>
-                <el-option label="居右" value="right"></el-option>
-              </el-select>
-              <el-color-picker v-model="item.color" style="margin: 0 10px;"></el-color-picker>
-              <el-input-number v-model="item.width" label="描述文字" controls-position="right"></el-input-number>
-            </div>
-          </div>
+          <config-item label="显示排名">
+            <el-select size="mini" v-model="config.isShowIndex" placeholder="请选择" clearable>
+              <el-option
+                  v-for="(item, index) in tableStatus"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value">
+              </el-option>
+            </el-select>
+          </config-item>
+          <config-item label="斑马纹" v-if="config.type === 'AiDvTable'">
+            <el-select size="mini" v-model="config.stripe" placeholder="请选择" clearable>
+              <el-option
+                  label="是"
+                  value="1">
+              </el-option>
+              <el-option
+                  label="否"
+                  value="0">
+              </el-option>
+            </el-select>
+          </config-item>
+          <config-item label="简易样式" v-if="config.type === 'AiDvTable'">
+            <el-select size="mini" v-model="config.simple" placeholder="请选择" clearable>
+              <el-option
+                  label="是"
+                  value="1">
+              </el-option>
+              <el-option
+                  label="否"
+                  value="0">
+              </el-option>
+            </el-select>
+          </config-item>
+          <config-item label="表格行数" v-if="config.type !== 'AiDvTable'">
+            <el-input-number size="mini" style="width: 232px" :min="0" v-model="config.rowNum" controls-position="right"/>
+          </config-item>
+          <config-item v-if="config.type === 'AiDvTable'" v-for="(item, i) in config.config" :label="`第${i+1}列`">
+            <el-select size="mini" style="width: 80px;" v-model="item.align" placeholder="请选择" clearable>
+              <el-option label="居中" value="center"></el-option>
+              <el-option label="居左" value="left"></el-option>
+              <el-option label="居右" value="right"></el-option>
+            </el-select>
+            <el-color-picker v-model="item.color" class="mar-h10" size="mini"/>
+            <el-input-number v-model="item.width" label="描述文字" controls-position="right" size="mini"/>
+          </config-item>
         </template>
         <template v-if="config.type === 'map'">
           <div class="layout-config__item">
@@ -235,10 +207,11 @@ import ConfigItem from "./configItem.vue";
 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";
 
 export default {
   name: 'componentConfig',
-  components: {AiDvSummary, AiDialogBtn, ConfigItem},
+  components: {JsonEditor, AiDvSummary, AiDialogBtn, ConfigItem},
   props: {
     config: {default: () => ({})},
     instance: Function,

packages/bigscreen/designer/viewport.vue

@@ -190,9 +190,9 @@
           :total="images.length"
           :colConfigs="colConfigs"
           @getList="() => {}">
-        <el-table-column slot="img" prop="素材地址" label="素材" align="center">
+        <el-table-column :slot="'img'" prop="素材地址" label="素材" align="center">
         </el-table-column>
-        <el-table-column slot="options" width="140px" fixed="right" label="操作" align="center">
+        <el-table-column :slot="'options'" width="140px" fixed="right" label="操作" align="center">
           <template slot-scope="{ row, $index }">
             <div class="table-options">
               <el-button type="text" @click="removeImg($index)">删除</el-button>
@@ -313,6 +313,7 @@ export default {
     comps: v => {
       const obj = {}
       v.components.map(e => e.list.map(c => c.list.map(com => {
+        com.echartOps = com.echartOps || v.$echartTpls[com.type]
         obj[com.type] = com
       })))
       return obj
@@ -351,11 +352,9 @@ export default {
       })
       oInput.remove()
     },
-
     removeImg(index) {
       this.images.splice(index, 1)
     },
-
     onImageConfirm() {
       if (!this.form.images.length) {
         return this.$message.error('请上传图片')
@@ -383,7 +382,6 @@ export default {
       this.componentList.splice(this.activeIndex, 1)
       this.componentList.unshift(item)
     },
-
     getInfo(id) {
       id && this.instance.post(`/app/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => {
         if (res?.data) {
@@ -394,7 +392,6 @@ export default {
         }
       })
     },
-
     back(params) {
       if (!!params) {
         const {id} = this.$route.query
@@ -424,6 +421,9 @@ export default {
     },
     //从资产中新建时使用
     clone(e) {
+      if (/Chart/.test(e.type)) {
+        e.echartOps = this.$echartTpls[e.config]
+      }
       this.componentList.push(this.deepClone(e))
     },
     onChange() {
@@ -432,13 +432,8 @@ export default {
     deepClone(obj) {
       if (obj instanceof Object) {
         let newObj = {}
-
         if (Array.isArray(obj)) {
-          let arr = []
-          obj.forEach(item => {
-            arr.push(this.deepClone(item))
-          })
-          return arr
+          return this.$copy(obj)
         } else if (typeof obj == 'function') {
           newObj = obj.bind(newObj)
         } else {
@@ -460,13 +455,11 @@ export default {
             }
           }
         }
-
         return newObj
       } else {
         return obj
       }
     },
-
     onContextmenu(e, index) {
       this.menuX = e.clientX + 10
       this.menuY = e.clientY + 10
@@ -485,7 +478,6 @@ export default {
       this.componentList.splice(this.activeIndex, 1)
       this.activeIndex = -1
     },
-
     onActivated(index) {
       this.activeIndex = index
     },
@@ -499,7 +491,6 @@ export default {
       item.width = w
       item.height = h
     },
-
     initCanvas() {
       let widthScale = (this.middleWidth - this.widthPaddingTools) / this.bigscreenWidth
       let heightScale = (this.middleHeight - this.widthPaddingTools) / this.bigscreenHeight