多维图数据设置已完成

components/AiDvRender.vue

@@ -66,7 +66,7 @@
              v-else-if="currentType === 'video'"/>
       <AiDvPartyOrg style="width: 100%; height: 100%;" v-else-if="currentType === 'partyOrg'" :instance="instance"/>
       <!-- <ai-sprite v-else-if="/building/.test(currentType)" v-bind="data" is3D @init="mods[currentType]"/> -->
-      <ai-dv-plot v-else-if="currentType=='plot'"/>
+      <ai-dv-plot v-else-if="currentType=='plot'" :options="data.charts"/>
     </ai-dv-panel>
   </div>
 </template>

components/index.js

@@ -14,6 +14,7 @@ const install = function (Vue) {
     })
     Vue.prototype.MODEL = model
   }
+  Vue.prototype.$echartTpls = require("./AiEchart/echartTpls")
   // 遍历注册全局组件
   let contexts = require.context('.', true, /[\\\/]Ai([^\\\/]+)\.vue$/);
   if (contexts) {

components/layout/AiDvPlot/AiDvPlot.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="AiDvPlot">
-    <ai-select class="plotPicker" v-model="current" :select-list="options"/>
+    <ai-select class="plotPicker" v-model="current" :select-list="charts" @change="handleChangeChart"/>
     <div ref="DvPlot"/>
   </section>
 </template>
@@ -15,7 +15,15 @@ export default {
       current: 0
     }
   },
-  methods: {},
+  computed: {
+    charts: v => v.options.map((e, id) => ({id, label: e.title})),
+    plot: v => v.options[v.current]
+  },
+  methods: {
+    handleChangeChart() {
+
+    }
+  },
 }
 </script>
 <style scoped lang="scss">

packages/bigscreen/designer/components/chartPicker.vue

@@ -0,0 +1,85 @@
+<template>
+  <section class="chartPicker">
+    <ai-dialog-btn :modal="false" dialog-title="选择图表模板" :customFooter="false"
+                   @confirm="handleConfirm" @open="handleOpenDialog">
+      <template #btn>
+        <img class="pointer" v-if="current.thumb" :src="current.thumb"/>
+        <el-button v-else type="text">选择图表</el-button>
+      </template>
+      <div class="charts">
+        <div class="item pointer" v-for="tpl in tpls" :key="tpl.type" :class="{selected:selected==tpl.type}"
+             @click="selected=tpl.type">
+          <img :src="tpl.thumb"/>
+          <div v-text="tpl.label"/>
+        </div>
+      </div>
+    </ai-dialog-btn>
+  </section>
+</template>
+<script>
+import AiDialogBtn from "dui/packages/layout/AiDialogBtn.vue";
+import {chartTpl} from "../config";
+
+export default {
+  name: "chartPicker",
+  components: {AiDialogBtn},
+  model: {
+    prop: "value",
+    event: "input"
+  },
+  props: {
+    value: String
+  },
+  data() {
+    return {
+      selected: null
+    }
+  },
+  computed: {
+    tpls: () => chartTpl.map(e => e.list).flat(),
+    current: v => v.tpls.find(e => e.type == v.value) || {}
+  },
+  watch: {
+    value(v) {
+      v && this.$emit("config", this.$echartTpls[v])
+    }
+  },
+  methods: {
+    handleConfirm() {
+      this.$emit("input", this.selected)
+    },
+    handleOpenDialog() {
+      this.selected = this.$copy(this.value)
+    }
+  },
+}
+</script>
+<style scoped lang="scss">
+.chartPicker {
+  text-align: left;
+
+  .pointer {
+    cursor: pointer;
+  }
+
+  .charts {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    gap: 8px;
+
+    .item {
+      text-align: center;
+      padding: 2px;
+      border: 2px solid transparent;
+
+      & > img {
+        width: 100%;
+      }
+
+      &.selected, &:hover {
+        border-color: #46f;
+      }
+    }
+  }
+}
+</style>

packages/bigscreen/designer/components/form/DataConfig.vue

@@ -30,7 +30,7 @@
           <el-input size="small" v-model="chart.title"/>
         </config-item>
         <config-item label="图表模板">
-          <ai-select v-model="chart.chart" :select-list="charts"/>
+          <chart-picker v-model="chart.chart"/>
         </config-item>
         <config-item label="数据类型">
           <ai-select v-model="chart.dataType" placeholder="请选择数据类型" :select-list="dataTypes"/>
@@ -154,6 +154,7 @@ import 'brace/theme/github';
 import 'brace/theme/monokai';
 import AiDialogBtn from "dui/packages/layout/AiDialogBtn.vue";
 import AiFold from "dui/packages/layout/AiFold.vue";
+import ChartPicker from "../chartPicker.vue";
 
 export default {
   name: 'dataConfig',
@@ -197,6 +198,7 @@ export default {
     markers: v => v.options.staticData?.markers || [],
   },
   components: {
+    ChartPicker,
     AiFold,
     AiDialogBtn,
     CodeEditor,

packages/bigscreen/designer/config.js

@@ -1,13 +1,8 @@
 /**
- * 大屏设计组件库,模板设置中心
+ * 大屏设计资产库,模板设置中心
  *
  */
-const components = [
+export const chartTpl = [{
-  {
-    type: 'chart',
-    label: '图表',
-    list: [
-      {
   label: '柱状图',
   type: 'bar',
   list: [
@@ -214,7 +209,7 @@ const components = [
       dynamicData: []
     }
   ]
-      },
+},
   {
     label: '折线图',
     type: 'line',
@@ -458,7 +453,13 @@ const components = [
         dynamicData: []
       }
     ]
-      },
+  }]
+const components = [
+  {
+    type: 'chart',
+    label: '图表',
+    list: [
+      ...chartTpl,
       {
         label: "多维图",
         type: "plot",