From 872e7afdd3f2c9b44fd34fbf499d695fcf359c19 Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Sun, 8 Oct 2023 18:16:51 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=9A=E7=BB=B4=E8=A1=A8=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/AiDvRender.vue                     |   14 +-
 components/index.js                           |    2 +-
 components/layout/AiDvPlot/AiDvPlot.vue       |   75 +-
 .../designer/components/form/DataConfig.vue   |   22 +-
 packages/bigscreen/designer/config.js         | 1632 ++++++++---------
 ui/packages/tools/AiEchartV2.vue              |    5 +-
 6 files changed, 841 insertions(+), 909 deletions(-)

diff --git a/components/AiDvRender.vue b/components/AiDvRender.vue
index 259868fa..7ff03094 100644
--- a/components/AiDvRender.vue
+++ b/components/AiDvRender.vue
@@ -24,15 +24,7 @@
                     :key="`chart-${index}`"
                     :theme="theme"
                     :data="values"
-                    :ops="chartList[data.config]"/>
-      <!-- <ai-q-map
-        v-else-if="currentType=='map'"
-        :area-id="data.areaId"
-        :markers="markers"
-        :is3d="data.is3D === '1'"
-        :limitArea="data.limitArea === '1'"
-        :is3dAround="data.is3dAround === '1'">
-      </ai-q-map> -->
+                    :ops="$echartTpls[data.config]"/>
       <AiDvTable
           v-else-if="currentType === 'AiDvTable'"
           :heigth="'100%'"
@@ -66,7 +58,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'" :options="data.charts"/>
+      <ai-dv-plot v-else-if="currentType=='plot'" :options="data.charts" :instance="instance"/>
     </ai-dv-panel>
   </div>
 </template>
@@ -76,7 +68,6 @@ import {scrollBoard} from '@jiaminghi/data-view'
 import Vue from "vue"
 import {mapState} from 'vuex'
 import AiDvMap from "./AiDvMap";
-import chartList from './AiEchart/echartTpls'
 import AiMonitor from "./AiMonitor/AiMonitor";
 import AiSwiper from './AiSwiper.vue'
 import AiDvDisplay from "./layout/AiDvDisplay/AiDvDisplay";
@@ -102,7 +93,6 @@ export default {
   data() {
     return {
       // mods,
-      chartList,
       map: null,
       lib: null,
       timer: null,
diff --git a/components/index.js b/components/index.js
index 2b193b66..93ee615a 100644
--- a/components/index.js
+++ b/components/index.js
@@ -14,7 +14,7 @@ const install = function (Vue) {
     })
     Vue.prototype.MODEL = model
   }
-  Vue.prototype.$echartTpls = require("./AiEchart/echartTpls")
+  Vue.prototype.$echartTpls = require("./AiEchart/echartTpls").default
   // 遍历注册全局组件
   let contexts = require.context('.', true, /[\\\/]Ai([^\\\/]+)\.vue$/);
   if (contexts) {
diff --git a/components/layout/AiDvPlot/AiDvPlot.vue b/components/layout/AiDvPlot/AiDvPlot.vue
index 6ee0d18c..ef04d936 100644
--- a/components/layout/AiDvPlot/AiDvPlot.vue
+++ b/components/layout/AiDvPlot/AiDvPlot.vue
@@ -1,29 +1,89 @@
 <template>
   <section class="AiDvPlot">
     <ai-select class="plotPicker" v-model="current" :select-list="charts" @change="handleChangeChart"/>
-    <div ref="DvPlot"/>
+    <div class="plotChart" ref="DvPlot"/>
   </section>
 </template>
 <script>
+import * as echarts from 'echarts'
+import {DvCompData} from "../../../packages/bigscreen/designer/config";
+
 export default {
   name: "AiDvPlot",
   props: {
-    options: {default: () => []}
+    options: {default: () => []},
+    instance: Function
   },
   data() {
     return {
-      current: 0
+      current: 0,
+      chart: null
     }
   },
   computed: {
     charts: v => v.options.map((e, id) => ({id, label: e.title})),
-    plot: v => v.options[v.current]
+    plot: v => v.options[v.current],
+    tpl: v => v.$echartTpls[v.plot.chart]
   },
   methods: {
+    initChart() {
+      this.chart = echarts.init(this.$refs.DvPlot)
+      this.handleChangeChart()
+    },
     handleChangeChart() {
-
+      const series = Array(this.plot.dimensions.length - 1).fill(this.tpl.daemon)
+      this.chart.setOption({
+        tooltip: {},
+        xAxis: {
+          type: 'category', nameGap: 20, axisTick: false,
+          axisLabel: {
+            color: '#C3C4C4',
+            interval: 0,
+          },
+          axisLine: {
+            lineStyle: {
+              width: 1
+            }
+          }
+        },
+        // 声明一个 Y 轴，数值轴。
+        yAxis: {
+          nameGap: 23, minInterval: 1,
+          splitLine: {
+            lineStyle: {
+              type: 'dashed'
+            }
+          },
+          axisLabel: {color: '#C3C4C4'},
+          axisLine: {
+            lineStyle: {
+              color: '#C3C4C4'
+            }
+          }
+        },
+        grid: {
+          left: '0%',
+          right: '0%',
+          bottom: '0%',
+          top: '26px',
+          containLabel: true
+        }, series, ...this.tpl
+      })
+      this.getChartData()
+    },
+    getChartData() {
+      return new DvCompData(this.plot.dataType, this.plot, this.instance).getData().then(source => {
+        const dataset = {
+          source,
+          dimensions: this.plot.dimensions.filter(Boolean) || []
+        }
+        this.chart.setOption({dataset})
+      })
     }
   },
+  mounted() {
+    this.$nextTick(this.initChart)
+  }
 }
 </script>
 <style scoped lang="scss">
@@ -35,6 +95,7 @@ export default {
     position: absolute;
     right: 12px;
     top: -10px;
+    z-index: 9;
 
     .el-select {
       .el-input__inner {
@@ -48,5 +109,9 @@ export default {
       }
     }
   }
+
+  .plotChart {
+    height: 100%;
+  }
 }
 </style>
diff --git a/packages/bigscreen/designer/components/form/DataConfig.vue b/packages/bigscreen/designer/components/form/DataConfig.vue
index d857bb44..a761ff75 100644
--- a/packages/bigscreen/designer/components/form/DataConfig.vue
+++ b/packages/bigscreen/designer/components/form/DataConfig.vue
@@ -55,6 +55,11 @@
         <config-item label="接口地址" v-else-if="chart.dataType=='apiData'">
           <el-input size="mini" v-model="chart.api"/>
         </config-item>
+        <config-item label="数据维度" v-if="chart.dataType !== 'staticData'">
+          <code-editor v-model="chart.djson" lang="json" theme="github" width="100%" height="100"
+                       placeholder="参照echarts配置数据维度,为一个数组,数组的第一个值为维度值"
+                       @change="v=>chart.dimensions=JSON.parse(v)"/>
+        </config-item>
       </ai-fold>
       <el-button type="text" icon="el-icon-plus" @click="options.charts.push({title:'新图表'})">添加图表</el-button>
     </template>
@@ -159,6 +164,7 @@ 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";
+import {DvCompData} from "../../config";
 
 export default {
   name: 'dataConfig',
@@ -173,20 +179,7 @@ export default {
   },
   data() {
     return {
-      dataTypes: [
-        {
-          id: 'staticData',
-          label: '静态数据'
-        },
-        {
-          id: 'dynamicData',
-          label: '动态数据'
-        },
-        {
-          id: 'apiData',
-          label: '接口'
-        }
-      ],
+      dataTypes: Object.entries(DvCompData.types).map(e => ({id: e[0], label: e[1]})),
       json: "",
       sourceDataId: '',
       sourceData: [],
@@ -195,7 +188,6 @@ export default {
       list: [],
       showMapEditor: false,
       form: {},
-      charts: Object.keys({}).map((label, id) => ({id, label}))
     }
   },
   computed: {
diff --git a/packages/bigscreen/designer/config.js b/packages/bigscreen/designer/config.js
index ba91c6ad..9310e216 100644
--- a/packages/bigscreen/designer/config.js
+++ b/packages/bigscreen/designer/config.js
@@ -3,886 +3,772 @@
  *
  */
 export const chartTpl = [{
-  label: '柱状图',
-  type: 'bar',
-  list: [
-    {
-      code: 'widget-linechart',
-      type: 'barChart1',
-      label: '柱状图1',
-      title: '柱状图',
-      border: 'border6',
-      icon: 'icontext_box',
-      value: '',
-      thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/bar1.png',
-      width: 500,
-      sourceDataId: '',
-      height: 300,
-      dataX: '',
-      zIndex: 1,
-      dataY: [],
-      top: 0,
-      left: 0,
-      api: '',
-      apiData: [],
-      dataType: 'staticData',
-      staticData: [
-        {name: '阿斯达', v1: 23},
-        {name: '水电费', v1: 12},
-        {name: '凡哥', v1: 67},
-        {name: '党费', v1: 98}
-      ],
-      config: 'barChart1',
-      dynamicData: []
-    },
-    {
-      code: 'widget-linechart',
-      type: 'barChart2',
-      label: '柱状图2',
-      icon: 'icontext_box',
-      value: '',
-      title: '柱状图2',
-      width: 500,
-      border: 'border6',
-      sourceDataId: '',
-      height: 300,
-      thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/bar2.png',
-      dataX: '',
-      dataY: [],
-      top: 0,
-      zIndex: 1,
-      left: 0,
-      dataType: 'staticData',
-      api: '',
-      apiData: [],
-      staticData: [
-        {name: '阿斯达', v1: 23},
-        {name: '水电费', v1: 12},
-        {name: '凡哥', v1: 67},
-        {name: '党费', v1: 98}
-      ],
-      config: 'barChart2',
-      dynamicData: []
-    },
-    {
-      code: 'widget-linechart',
-      type: 'barChart3',
-      label: '柱状图3',
-      title: '柱状图3',
-      icon: 'icontext_box',
-      value: '',
-      width: 500,
-      sourceDataId: '',
-      height: 300,
-      thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/bar3.png',
-      dataX: '',
-      dataY: [],
-      border: 'border6',
-      top: 0,
-      left: 0,
-      zIndex: 1,
-      dataType: 'staticData',
-      api: '',
-      apiData: [],
-      staticData: [
-        {name: '阿斯达', v1: 23},
-        {name: '水电费', v1: 12},
-        {name: '凡哥', v1: 67},
-        {name: '党费', v1: 98}
-      ],
-      config: 'barChart3',
-      dynamicData: []
-    },
-    {
-      code: 'widget-linechart',
-      type: 'barChart5',
-      label: '柱状图4',
-      title: '柱状图4',
-      icon: 'icontext_box',
-      value: '',
-      width: 500,
-      sourceDataId: '',
-      height: 300,
-      dataX: '',
-      dataY: [],
-      zIndex: 1,
-      thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/bar5.png',
-      top: 0,
-      left: 0,
-      border: 'border6',
-      api: '',
-      apiData: [],
-      dataType: 'staticData',
-      staticData: [
-        {name: '阿斯达', v1: 23},
-        {name: '水电费', v1: 12},
-        {name: '凡哥', v1: 67},
-        {name: '党费', v1: 98}
-      ],
-      config: 'barChart5',
-      dynamicData: []
-    },
-    {
-      code: 'widget-linechart',
-      type: 'barChart7',
-      label: '柱状图5',
-      title: '柱状图5',
-      icon: 'icontext_box',
-      value: '',
-      width: 500,
-      sourceDataId: '',
-      height: 300,
-      thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/bar7.png',
-      dataX: '',
-      zIndex: 1,
-      dataY: [],
-      top: 0,
-      left: 0,
-      api: '',
-      apiData: [],
-      dataType: 'staticData',
-      staticData: [
-        {name: '阿斯达', v1: 23},
-        {name: '水电费', v1: 12},
-        {name: '凡哥', v1: 67},
-        {name: '党费', v1: 98}
-      ],
-      config: 'barChart7',
-      dynamicData: []
-    },
-    {
-      code: 'widget-linechart',
-      type: 'barChart8',
-      label: '柱状图6',
-      title: '柱状图6',
-      icon: 'icontext_box',
-      value: '',
-      width: 500,
-      sourceDataId: '',
-      border: 'border6',
-      height: 300,
-      thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/bar8.png',
-      dataX: '',
-      dataY: [],
-      zIndex: 1,
-      top: 0,
-      left: 0,
-      api: '',
-      apiData: [],
-      dataType: 'staticData',
-      staticData: [
-        {name: '阿斯达', v1: 23},
-        {name: '水电费', v1: 12},
-        {name: '凡哥', v1: 67},
-        {name: '党费', v1: 98}
-      ],
-      config: 'barChart8',
-      dynamicData: []
-    },
-    {
-      code: 'widget-linechart',
-      type: 'barChart9',
-      label: '柱状图7',
-      title: '柱状图7',
-      border: 'border6',
-      icon: 'icontext_box',
-      value: '',
-      width: 500,
-      thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/bar9.png',
-      sourceDataId: '',
-      height: 300,
-      dataX: '',
-      dataY: [],
-      zIndex: 1,
-      top: 0,
-      left: 0,
-      api: '',
-      apiData: [],
-      dataType: 'staticData',
-      staticData: [
-        {name: '阿斯达', v1: 23},
-        {name: '水电费', v1: 12},
-        {name: '凡哥', v1: 67},
-        {name: '党费', v1: 98}
-      ],
-      config: 'barChart9',
-      dynamicData: []
-    }
-  ]
-},
-  {
-    label: '折线图',
-    type: 'line',
-    list: [
-      {
-        code: 'widget-linechart',
-        type: 'lineChart1',
-        label: '折线图1',
-        title: '折线图1',
-        border: 'border6',
-        icon: 'icontext_box',
-        value: '',
-        width: 500,
-        height: 300,
-        top: 0,
-        left: 0,
-        zIndex: 1,
-        api: '',
-        apiData: [],
-        thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/line1.png',
-        dataX: '',
-        dataY: [],
-        dataType: 'staticData',
-        staticData: [
-          {name: '阿斯达', v1: 23, v2: 33},
-          {name: '水电费', v1: 12, v2: 34},
-          {name: '凡哥', v1: 67, v2: 25},
-          {name: '党费', v1: 98, v2: 85}
-        ],
-        config: 'lineChart1',
-        sourceDataId: '',
-        dynamicData: []
-      },
-      {
-        code: 'widget-linechart',
-        type: 'lineChart2',
-        label: '折线图2',
-        title: '折线图2',
-        border: 'border6',
-        icon: 'icontext_box',
-        value: '',
-        width: 500,
-        thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/line2.png',
-        height: 300,
-        top: 0,
-        left: 0,
-        dataX: '',
-        dataY: [],
-        zIndex: 1,
-        api: '',
-        apiData: [],
-        dataType: 'staticData',
-        staticData: [
-          {name: '阿斯达', v1: 23, v2: 33},
-          {name: '水电费', v1: 12, v2: 34},
-          {name: '凡哥', v1: 67, v2: 25},
-          {name: '党费', v1: 98, v2: 85}
-        ],
-        config: 'lineChart2',
-        sourceDataId: '',
-        dynamicData: []
-      },
-      {
-        code: 'widget-linechart',
-        type: 'lineChart3',
-        label: '折线图3',
-        title: '折线图3',
-        icon: 'icontext_box',
-        border: 'border6',
-        value: '',
-        width: 500,
-        height: 300,
-        zIndex: 1,
-        thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/line3.png',
-        top: 0,
-        left: 0,
-        dataX: '',
-        dataY: [],
-        api: '',
-        apiData: [],
-        dataType: 'staticData',
-        staticData: [
-          {name: '阿斯达', v1: 23, v2: 33},
-          {name: '水电费', v1: 12, v2: 34},
-          {name: '凡哥', v1: 67, v2: 25},
-          {name: '党费', v1: 98, v2: 85}
-        ],
-        config: 'lineChart3',
-        sourceDataId: '',
-        dynamicData: []
-      },
-      {
-        code: 'widget-linechart',
-        type: 'lineChart4',
-        label: '折线图4',
-        title: '折线图4',
-        icon: 'icontext_box',
-        value: '',
-        border: 'border6',
-        width: 500,
-        height: 300,
-        zIndex: 1,
-        thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/line4.png',
-        top: 0,
-        left: 0,
-        dataX: '',
-        dataY: [],
-        api: '',
-        apiData: [],
-        dataType: 'staticData',
-        staticData: [
-          {name: '阿斯达', v1: 23, v2: 33},
-          {name: '水电费', v1: 12, v2: 34},
-          {name: '凡哥', v1: 67, v2: 25},
-          {name: '党费', v1: 98, v2: 85}
-        ],
-        config: 'lineChart4',
-        sourceDataId: '',
-        dynamicData: []
-      },
-      {
-        code: 'widget-linechart',
-        type: 'lineChart5',
-        label: '折线图5',
-        title: '折线图5',
-        icon: 'icontext_box',
-        value: '',
-        border: 'border6',
-        width: 500,
-        height: 300,
-        zIndex: 1,
-        top: 0,
-        left: 0,
-        dataX: '',
-        thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/line5.png',
-        dataY: [],
-        api: '',
-        apiData: [],
-        dataType: 'staticData',
-        staticData: [
-          {name: '阿斯达', v1: 23, v2: 33},
-          {name: '水电费', v1: 12, v2: 34},
-          {name: '凡哥', v1: 67, v2: 25},
-          {name: '党费', v1: 98, v2: 85}
-        ],
-        config: 'lineChart5',
-        sourceDataId: '',
-        dynamicData: []
-      }
-    ]
-  },
-  {
-    label: '饼图',
-    type: 'pie',
-    list: [
-      {
-        code: 'widget-linechart',
-        type: 'pieChart2',
-        config: 'pieChart2',
-        label: '饼图',
-        title: '饼图',
-        icon: 'icontext_box',
-        value: '',
-        border: 'border6',
-        width: 500,
-        height: 300,
-        zIndex: 1,
-        top: 0,
-        left: 0,
-        thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/pie.png',
-        dataX: '',
-        dataY: [],
-        api: '',
-        apiData: [],
-        dataType: 'staticData',
-        staticData: [
-          {name: '阿斯达', v1: 23, v2: 33},
-          {name: '水电费', v1: 12, v2: 34},
-          {name: '凡哥', v1: 67, v2: 25},
-          {name: '党费', v1: 98, v2: 85}
-        ],
-        sourceDataId: '',
-        dynamicData: []
-      },
-      {
-        code: 'widget-linechart',
-        type: 'pieChart1',
-        label: '饼图',
-        title: '饼图',
-        icon: 'icontext_box',
-        value: '',
-        border: 'border6',
-        width: 500,
-        height: 300,
-        zIndex: 1,
-        top: 0,
-        left: 0,
-        thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/pie.png',
-        dataX: '',
-        dataY: [],
-        api: '',
-        apiData: [],
-        dataType: 'staticData',
-        staticData: [
-          {name: '阿斯达', v1: 23, v2: 33},
-          {name: '水电费', v1: 12, v2: 34},
-          {name: '凡哥', v1: 67, v2: 25},
-          {name: '党费', v1: 98, v2: 85}
-        ],
-        config: 'pieChart1',
-        sourceDataId: '',
-        dynamicData: []
-      },
-      {
-        code: 'widget-linechart',
-        type: 'pieChart3',
-        label: '饼图',
-        title: '饼图',
-        icon: 'icontext_box',
-        value: '',
-        border: 'border6',
-        width: 500,
-        height: 300,
-        zIndex: 1,
-        top: 0,
-        left: 0,
-        thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/pie.png',
-        dataX: '',
-        dataY: [],
-        api: '',
-        apiData: [],
-        dataType: 'staticData',
-        staticData: [
-          {name: '阿斯达', v1: 23, v2: 33},
-          {name: '水电费', v1: 12, v2: 34},
-          {name: '凡哥', v1: 67, v2: 25},
-          {name: '党费', v1: 98, v2: 85}
-        ],
-        config: 'pieChart3',
-        sourceDataId: '',
-        dynamicData: []
-      }
-    ]
+  label: '柱状图', type: 'bar', list: [{
+    code: 'widget-linechart',
+    type: 'barChart1',
+    label: '柱状图1',
+    title: '柱状图',
+    border: 'border6',
+    icon: 'icontext_box',
+    value: '',
+    thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/bar1.png',
+    width: 500,
+    sourceDataId: '',
+    height: 300,
+    dataX: '',
+    zIndex: 1,
+    dataY: [],
+    top: 0,
+    left: 0,
+    api: '',
+    apiData: [],
+    dataType: 'staticData',
+    staticData: [{name: '阿斯达', v1: 23}, {name: '水电费', v1: 12}, {name: '凡哥', v1: 67}, {name: '党费', v1: 98}],
+    config: 'barChart1',
+    dynamicData: []
+  }, {
+    code: 'widget-linechart',
+    type: 'barChart2',
+    label: '柱状图2',
+    icon: 'icontext_box',
+    value: '',
+    title: '柱状图2',
+    width: 500,
+    border: 'border6',
+    sourceDataId: '',
+    height: 300,
+    thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/bar2.png',
+    dataX: '',
+    dataY: [],
+    top: 0,
+    zIndex: 1,
+    left: 0,
+    dataType: 'staticData',
+    api: '',
+    apiData: [],
+    staticData: [{name: '阿斯达', v1: 23}, {name: '水电费', v1: 12}, {name: '凡哥', v1: 67}, {name: '党费', v1: 98}],
+    config: 'barChart2',
+    dynamicData: []
+  }, {
+    code: 'widget-linechart',
+    type: 'barChart3',
+    label: '柱状图3',
+    title: '柱状图3',
+    icon: 'icontext_box',
+    value: '',
+    width: 500,
+    sourceDataId: '',
+    height: 300,
+    thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/bar3.png',
+    dataX: '',
+    dataY: [],
+    border: 'border6',
+    top: 0,
+    left: 0,
+    zIndex: 1,
+    dataType: 'staticData',
+    api: '',
+    apiData: [],
+    staticData: [{name: '阿斯达', v1: 23}, {name: '水电费', v1: 12}, {name: '凡哥', v1: 67}, {name: '党费', v1: 98}],
+    config: 'barChart3',
+    dynamicData: []
+  }, {
+    code: 'widget-linechart',
+    type: 'barChart5',
+    label: '柱状图4',
+    title: '柱状图4',
+    icon: 'icontext_box',
+    value: '',
+    width: 500,
+    sourceDataId: '',
+    height: 300,
+    dataX: '',
+    dataY: [],
+    zIndex: 1,
+    thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/bar5.png',
+    top: 0,
+    left: 0,
+    border: 'border6',
+    api: '',
+    apiData: [],
+    dataType: 'staticData',
+    staticData: [{name: '阿斯达', v1: 23}, {name: '水电费', v1: 12}, {name: '凡哥', v1: 67}, {name: '党费', v1: 98}],
+    config: 'barChart5',
+    dynamicData: []
+  }, {
+    code: 'widget-linechart',
+    type: 'barChart7',
+    label: '柱状图5',
+    title: '柱状图5',
+    icon: 'icontext_box',
+    value: '',
+    width: 500,
+    sourceDataId: '',
+    height: 300,
+    thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/bar7.png',
+    dataX: '',
+    zIndex: 1,
+    dataY: [],
+    top: 0,
+    left: 0,
+    api: '',
+    apiData: [],
+    dataType: 'staticData',
+    staticData: [{name: '阿斯达', v1: 23}, {name: '水电费', v1: 12}, {name: '凡哥', v1: 67}, {name: '党费', v1: 98}],
+    config: 'barChart7',
+    dynamicData: []
+  }, {
+    code: 'widget-linechart',
+    type: 'barChart8',
+    label: '柱状图6',
+    title: '柱状图6',
+    icon: 'icontext_box',
+    value: '',
+    width: 500,
+    sourceDataId: '',
+    border: 'border6',
+    height: 300,
+    thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/bar8.png',
+    dataX: '',
+    dataY: [],
+    zIndex: 1,
+    top: 0,
+    left: 0,
+    api: '',
+    apiData: [],
+    dataType: 'staticData',
+    staticData: [{name: '阿斯达', v1: 23}, {name: '水电费', v1: 12}, {name: '凡哥', v1: 67}, {name: '党费', v1: 98}],
+    config: 'barChart8',
+    dynamicData: []
+  }, {
+    code: 'widget-linechart',
+    type: 'barChart9',
+    label: '柱状图7',
+    title: '柱状图7',
+    border: 'border6',
+    icon: 'icontext_box',
+    value: '',
+    width: 500,
+    thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/bar9.png',
+    sourceDataId: '',
+    height: 300,
+    dataX: '',
+    dataY: [],
+    zIndex: 1,
+    top: 0,
+    left: 0,
+    api: '',
+    apiData: [],
+    dataType: 'staticData',
+    staticData: [{name: '阿斯达', v1: 23}, {name: '水电费', v1: 12}, {name: '凡哥', v1: 67}, {name: '党费', v1: 98}],
+    config: 'barChart9',
+    dynamicData: []
   }]
-const components = [
-  {
-    type: 'chart',
-    label: '图表',
-    list: [
-      ...chartTpl,
-      {
-        label: "多维图",
-        type: "plot",
-        list: [
-          {
-            type: 'plot',
-            label: '多维图表',
-            title: '多维图表',
-            border: 'border0',
-            width: 500,
-            height: 300,
-            top: 0,
-            left: 0,
-            thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/pie.png',
-            charts: [
-              {
-                title: "饼状图统计",
-                chart: "pieChart2", dataType: 'staticData',
-                data: [
-                  {name: '阿斯达', v1: 23, v2: 33},
-                  {name: '水电费', v1: 12, v2: 34},
-                  {name: '凡哥', v1: 67, v2: 25},
-                  {name: '党费', v1: 98, v2: 85}
-                ]
-              }
-            ],
+}, {
+  label: '折线图', type: 'line', list: [{
+    code: 'widget-linechart',
+    type: 'lineChart1',
+    label: '折线图1',
+    title: '折线图1',
+    border: 'border6',
+    icon: 'icontext_box',
+    value: '',
+    width: 500,
+    height: 300,
+    top: 0,
+    left: 0,
+    zIndex: 1,
+    api: '',
+    apiData: [],
+    thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/line1.png',
+    dataX: '',
+    dataY: [],
+    dataType: 'staticData',
+    staticData: [{name: '阿斯达', v1: 23, v2: 33}, {name: '水电费', v1: 12, v2: 34}, {
+      name: '凡哥',
+      v1: 67,
+      v2: 25
+    }, {name: '党费', v1: 98, v2: 85}],
+    config: 'lineChart1',
+    sourceDataId: '',
+    dynamicData: []
+  }, {
+    code: 'widget-linechart',
+    type: 'lineChart2',
+    label: '折线图2',
+    title: '折线图2',
+    border: 'border6',
+    icon: 'icontext_box',
+    value: '',
+    width: 500,
+    thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/line2.png',
+    height: 300,
+    top: 0,
+    left: 0,
+    dataX: '',
+    dataY: [],
+    zIndex: 1,
+    api: '',
+    apiData: [],
+    dataType: 'staticData',
+    staticData: [{name: '阿斯达', v1: 23, v2: 33}, {name: '水电费', v1: 12, v2: 34}, {
+      name: '凡哥',
+      v1: 67,
+      v2: 25
+    }, {name: '党费', v1: 98, v2: 85}],
+    config: 'lineChart2',
+    sourceDataId: '',
+    dynamicData: []
+  }, {
+    code: 'widget-linechart',
+    type: 'lineChart3',
+    label: '折线图3',
+    title: '折线图3',
+    icon: 'icontext_box',
+    border: 'border6',
+    value: '',
+    width: 500,
+    height: 300,
+    zIndex: 1,
+    thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/line3.png',
+    top: 0,
+    left: 0,
+    dataX: '',
+    dataY: [],
+    api: '',
+    apiData: [],
+    dataType: 'staticData',
+    staticData: [{name: '阿斯达', v1: 23, v2: 33}, {name: '水电费', v1: 12, v2: 34}, {
+      name: '凡哥',
+      v1: 67,
+      v2: 25
+    }, {name: '党费', v1: 98, v2: 85}],
+    config: 'lineChart3',
+    sourceDataId: '',
+    dynamicData: []
+  }, {
+    code: 'widget-linechart',
+    type: 'lineChart4',
+    label: '折线图4',
+    title: '折线图4',
+    icon: 'icontext_box',
+    value: '',
+    border: 'border6',
+    width: 500,
+    height: 300,
+    zIndex: 1,
+    thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/line4.png',
+    top: 0,
+    left: 0,
+    dataX: '',
+    dataY: [],
+    api: '',
+    apiData: [],
+    dataType: 'staticData',
+    staticData: [{name: '阿斯达', v1: 23, v2: 33}, {name: '水电费', v1: 12, v2: 34}, {
+      name: '凡哥',
+      v1: 67,
+      v2: 25
+    }, {name: '党费', v1: 98, v2: 85}],
+    config: 'lineChart4',
+    sourceDataId: '',
+    dynamicData: []
+  }, {
+    code: 'widget-linechart',
+    type: 'lineChart5',
+    label: '折线图5',
+    title: '折线图5',
+    icon: 'icontext_box',
+    value: '',
+    border: 'border6',
+    width: 500,
+    height: 300,
+    zIndex: 1,
+    top: 0,
+    left: 0,
+    dataX: '',
+    thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/line5.png',
+    dataY: [],
+    api: '',
+    apiData: [],
+    dataType: 'staticData',
+    staticData: [{name: '阿斯达', v1: 23, v2: 33}, {name: '水电费', v1: 12, v2: 34}, {
+      name: '凡哥',
+      v1: 67,
+      v2: 25
+    }, {name: '党费', v1: 98, v2: 85}],
+    config: 'lineChart5',
+    sourceDataId: '',
+    dynamicData: []
+  }]
+}, {
+  label: '饼图', type: 'pie', list: [{
+    code: 'widget-linechart',
+    type: 'pieChart2',
+    config: 'pieChart2',
+    label: '饼图',
+    title: '饼图',
+    icon: 'icontext_box',
+    value: '',
+    border: 'border6',
+    width: 500,
+    height: 300,
+    zIndex: 1,
+    top: 0,
+    left: 0,
+    thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/pie.png',
+    dataX: '',
+    dataY: [],
+    api: '',
+    apiData: [],
+    dataType: 'staticData',
+    staticData: [{name: '阿斯达', v1: 23, v2: 33}, {name: '水电费', v1: 12, v2: 34}, {
+      name: '凡哥',
+      v1: 67,
+      v2: 25
+    }, {name: '党费', v1: 98, v2: 85}],
+    sourceDataId: '',
+    dynamicData: []
+  }, {
+    code: 'widget-linechart',
+    type: 'pieChart1',
+    label: '饼图',
+    title: '饼图',
+    icon: 'icontext_box',
+    value: '',
+    border: 'border6',
+    width: 500,
+    height: 300,
+    zIndex: 1,
+    top: 0,
+    left: 0,
+    thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/pie.png',
+    dataX: '',
+    dataY: [],
+    api: '',
+    apiData: [],
+    dataType: 'staticData',
+    staticData: [{name: '阿斯达', v1: 23, v2: 33}, {name: '水电费', v1: 12, v2: 34}, {
+      name: '凡哥',
+      v1: 67,
+      v2: 25
+    }, {name: '党费', v1: 98, v2: 85}],
+    config: 'pieChart1',
+    sourceDataId: '',
+    dynamicData: []
+  }, {
+    code: 'widget-linechart',
+    type: 'pieChart3',
+    label: '饼图',
+    title: '饼图',
+    icon: 'icontext_box',
+    value: '',
+    border: 'border6',
+    width: 500,
+    height: 300,
+    zIndex: 1,
+    top: 0,
+    left: 0,
+    thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/pie.png',
+    dataX: '',
+    dataY: [],
+    api: '',
+    apiData: [],
+    dataType: 'staticData',
+    staticData: [{name: '阿斯达', v1: 23, v2: 33}, {name: '水电费', v1: 12, v2: 34}, {
+      name: '凡哥',
+      v1: 67,
+      v2: 25
+    }, {name: '党费', v1: 98, v2: 85}],
+    config: 'pieChart3',
+    sourceDataId: '',
+    dynamicData: []
+  }]
+}]
+const components = [{
+  type: 'chart', label: '图表', list: [...chartTpl, {
+    label: "多维图", type: "plot", list: [{
+      type: 'plot',
+      label: '多维图表',
+      title: '多维图表',
+      border: 'border0',
+      width: 500,
+      height: 300,
+      top: 0,
+      left: 0,
+      thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/pie.png',
+      charts: [{
+        title: "饼状图统计",
+        chart: "pieChart2",
+        dataType: 'staticData',
+        data: [{name: '阿斯达', v1: 23, v2: 33}, {name: '水电费', v1: 12, v2: 34}, {
+          name: '凡哥',
+          v1: 67,
+          v2: 25
+        }, {name: '党费', v1: 98, v2: 85}]
+      }],
 
-          }
-        ]
-      }
-    ]
-  },
-  {
-    type: 'table',
-    label: '表格',
-    list: [
-      {
-        label: '表格',
-        type: 'table',
-        list: [
-          {
-            type: 'table',
-            label: '表格',
-            title: '表格',
-            border: 'border6',
-            width: 650,
-            height: 400,
-            zIndex: 1,
-            thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/table.png',
-            dataX: '',
-            dataY: [],
-            rowNum: 7,
-            isShowIndex: '1',
-            sourceDataId: '',
-            api: '',
-            apiData: [],
-            dataType: 'staticData',
-            dynamicData: [],
-            staticData: [
-              {name: '列1', v: 23, v2: 3},
-              {name: '列2', v: 12, v2: 4},
-              {name: '列2', v: 12, v2: 4}
-            ]
-          },
-          {
-            type: 'AiDvTable',
-            label: '新版表格',
-            title: '新版表格',
-            border: 'border6',
-            width: 650,
-            height: 400,
-            zIndex: 1,
-            thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/table.png',
-            dataX: '',
-            dataY: [],
-            rowNum: 7,
-            stripe: '1',
-            isShowIndex: '1',
-            sourceDataId: '',
-            api: '',
-            config: [
-              {
-                width: '',
-                color: '',
-                align: ''
-              },
-              {
-                width: '',
-                color: '',
-                align: ''
-              },
-              {
-                width: '',
-                color: '',
-                align: ''
-              }
-            ],
-            apiData: [],
-            dataType: 'staticData',
-            dynamicData: [],
-            staticData: [
-              {name: '列1', v: 23, v2: 3},
-              {name: '列2', v: 12, v2: 4},
-              {name: '列2', v: 12, v2: 4}
-            ]
-          },
-          {
-            type: 'AiRanking',
-            label: '排行榜',
-            title: '排行榜',
-            border: 'border6',
-            width: 523,
-            height: 400,
-            zIndex: 1,
-            thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/table.png',
-            dataX: '',
-            dataY: [],
-            rowNum: 7,
-            subType: 'Ranking1',
-            stripe: '1',
-            isShowIndex: '1',
-            sourceDataId: '',
-            api: '',
-            apiData: [],
-            dataType: 'staticData',
-            dynamicData: [],
-            staticData: [
-              {name: '列1', value: 23},
-              {name: '列2', value: 12},
-              {name: '列2', value: 12}
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    type: 'ai3d', label: "3D", list: [
-      {
-        label: "3D楼栋", type: 'building', list: [{
-          type: 'building1', label: "楼栋模型1",
-          width: 840,
-          height: 800,
-          zIndex: 1,
-          title: "楼栋模型1",
-          thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png'
-        }]
-      }
-    ]
-  },
-  {
-    type: 'other',
-    label: '其他',
-    list: [
-      {
-        label: '地图',
-        type: 'map',
-        list: [
-          {
-            type: 'map',
-            label: '地图',
-            display: 'map',
-            width: 840,
-            height: 534,
-            left: 0,
-            top: 0,
-            mask: '2',
-            pulseLines: '1',
-            mapStyle: "e51987628aee5206d4c9ca8c6e98b4f7",
-            areaId: '',
-            zIndex: 1,
-            apiData: [],
-            dataType: 'staticData',
-            dynamicData: [],
-            staticData: [
-              {
-                label: '中卫慧通',
-                lng: 117.1339399,
-                lat: 36.7190487,
-              }
-            ],
-            api: '',
-            thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/map.png',
-            is3dAround: '0',
-            limitArea: '0',
-            layers: 'vector'
-          },
-          {
-            type: 'AiDvMap',
-            label: '地图',
-            display: 'map',
-            width: 840,
-            height: 534,
-            left: 0,
-            top: 0,
-            mask: '2',
-            pulseLines: '1',
-            mapStyle: "e51987628aee5206d4c9ca8c6e98b4f7",
-            areaId: '',
-            zIndex: 1,
-            apiData: [],
-            dataType: 'staticData',
-            dynamicData: [],
-            staticData: [
-              {
-                label: '中卫慧通',
-                lng: 117.1339399,
-                lat: 36.7190487,
-              }
-            ],
-            api: '',
-            thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/map.png',
-            is3dAround: '0',
-            limitArea: '0',
-          }
-        ]
-      },
-      {
-        label: '党组织',
-        type: 'partyOrg',
-        list: [
-          {
-            type: 'partyOrg',
-            label: '党组织',
-            width: 840,
-            height: 800,
-            zIndex: 1,
-            top: 0,
-            left: 0,
-            dataX: '',
-            dataY: [],
-            title: '党组织',
-            border: 'border3',
-            sourceDataId: '',
-            dataType: 'staticData',
-            staticData: [
-              {
-                key: '个人服务办理',
-                value: 247
-              },
-              {
-                key: '同比上月',
-                value: 247
-              }
-            ],
-            dynamicData: [],
-            thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png'
-          }
-        ]
-      },
-      {
-        label: '边框',
-        type: 'panel',
-        list: [
-          {
-            type: 'panel',
-            label: '边框',
-            title: '边框',
-            border: 'border0',
-            width: 400,
-            height: 400,
-            isZoom: false,
-            zIndex: 1,
-            thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/border.png'
-          }
-        ]
-      },
-      {
-        label: '装饰',
-        type: 'display',
-        list: [
-          {
-            type: 'display',
-            label: '装饰',
-            display: 'display0',
-            width: 840,
-            height: 540,
-            isZoom: false,
-            zIndex: 1,
-            title: '标题',
-            thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/display.png',
-            sourceDataId: '',
-            dataType: 'staticData',
-            staticData: [
-              {
-                label: '个人服务办理',
-                value: 247
-              },
-              {
-                label: '同比上月',
-                value: 247
-              }
-            ]
-          }
-        ]
-      },
-      {
-        label: '轮播图',
-        type: 'swiper',
-        list: [
-          {
-            type: 'swiper',
-            label: '轮播图',
-            width: 400,
-            height: 300,
-            zIndex: 1,
-            border: 'border2',
-            dataType: 'staticData',
-            staticData: [
-              {
-                img: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/pie.png',
-                title: '湖羊',
-                content: `歙县众城湖羊养殖专业合作社
+    }]
+  }]
+}, {
+  type: 'table', label: '表格', list: [{
+    label: '表格', type: 'table', list: [{
+      type: 'table',
+      label: '表格',
+      title: '表格',
+      border: 'border6',
+      width: 650,
+      height: 400,
+      zIndex: 1,
+      thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/table.png',
+      dataX: '',
+      dataY: [],
+      rowNum: 7,
+      isShowIndex: '1',
+      sourceDataId: '',
+      api: '',
+      apiData: [],
+      dataType: 'staticData',
+      dynamicData: [],
+      staticData: [{name: '列1', v: 23, v2: 3}, {name: '列2', v: 12, v2: 4}, {name: '列2', v: 12, v2: 4}]
+    }, {
+      type: 'AiDvTable',
+      label: '新版表格',
+      title: '新版表格',
+      border: 'border6',
+      width: 650,
+      height: 400,
+      zIndex: 1,
+      thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/table.png',
+      dataX: '',
+      dataY: [],
+      rowNum: 7,
+      stripe: '1',
+      isShowIndex: '1',
+      sourceDataId: '',
+      api: '',
+      config: [{
+        width: '', color: '', align: ''
+      }, {
+        width: '', color: '', align: ''
+      }, {
+        width: '', color: '', align: ''
+      }],
+      apiData: [],
+      dataType: 'staticData',
+      dynamicData: [],
+      staticData: [{name: '列1', v: 23, v2: 3}, {name: '列2', v: 12, v2: 4}, {name: '列2', v: 12, v2: 4}]
+    }, {
+      type: 'AiRanking',
+      label: '排行榜',
+      title: '排行榜',
+      border: 'border6',
+      width: 523,
+      height: 400,
+      zIndex: 1,
+      thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/table.png',
+      dataX: '',
+      dataY: [],
+      rowNum: 7,
+      subType: 'Ranking1',
+      stripe: '1',
+      isShowIndex: '1',
+      sourceDataId: '',
+      api: '',
+      apiData: [],
+      dataType: 'staticData',
+      dynamicData: [],
+      staticData: [{name: '列1', value: 23}, {name: '列2', value: 12}, {name: '列2', value: 12}]
+    }]
+  }]
+}, {
+  type: 'ai3d', label: "3D", list: [{
+    label: "3D楼栋", type: 'building', list: [{
+      type: 'building1',
+      label: "楼栋模型1",
+      width: 840,
+      height: 800,
+      zIndex: 1,
+      title: "楼栋模型1",
+      thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png'
+    }]
+  }]
+}, {
+  type: 'other', label: '其他', list: [{
+    label: '地图', type: 'map', list: [{
+      type: 'map',
+      label: '地图',
+      display: 'map',
+      width: 840,
+      height: 534,
+      left: 0,
+      top: 0,
+      mask: '2',
+      pulseLines: '1',
+      mapStyle: "e51987628aee5206d4c9ca8c6e98b4f7",
+      areaId: '',
+      zIndex: 1,
+      apiData: [],
+      dataType: 'staticData',
+      dynamicData: [],
+      staticData: [{
+        label: '中卫慧通', lng: 117.1339399, lat: 36.7190487,
+      }],
+      api: '',
+      thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/map.png',
+      is3dAround: '0',
+      limitArea: '0',
+      layers: 'vector'
+    }, {
+      type: 'AiDvMap',
+      label: '地图',
+      display: 'map',
+      width: 840,
+      height: 534,
+      left: 0,
+      top: 0,
+      mask: '2',
+      pulseLines: '1',
+      mapStyle: "e51987628aee5206d4c9ca8c6e98b4f7",
+      areaId: '',
+      zIndex: 1,
+      apiData: [],
+      dataType: 'staticData',
+      dynamicData: [],
+      staticData: [{
+        label: '中卫慧通', lng: 117.1339399, lat: 36.7190487,
+      }],
+      api: '',
+      thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/map.png',
+      is3dAround: '0',
+      limitArea: '0',
+    }]
+  }, {
+    label: '党组织', type: 'partyOrg', list: [{
+      type: 'partyOrg',
+      label: '党组织',
+      width: 840,
+      height: 800,
+      zIndex: 1,
+      top: 0,
+      left: 0,
+      dataX: '',
+      dataY: [],
+      title: '党组织',
+      border: 'border3',
+      sourceDataId: '',
+      dataType: 'staticData',
+      staticData: [{
+        key: '个人服务办理', value: 247
+      }, {
+        key: '同比上月', value: 247
+      }],
+      dynamicData: [],
+      thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png'
+    }]
+  }, {
+    label: '边框', type: 'panel', list: [{
+      type: 'panel',
+      label: '边框',
+      title: '边框',
+      border: 'border0',
+      width: 400,
+      height: 400,
+      isZoom: false,
+      zIndex: 1,
+      thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/border.png'
+    }]
+  }, {
+    label: '装饰', type: 'display', list: [{
+      type: 'display',
+      label: '装饰',
+      display: 'display0',
+      width: 840,
+      height: 540,
+      isZoom: false,
+      zIndex: 1,
+      title: '标题',
+      thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/display.png',
+      sourceDataId: '',
+      dataType: 'staticData',
+      staticData: [{
+        label: '个人服务办理', value: 247
+      }, {
+        label: '同比上月', value: 247
+      }]
+    }]
+  }, {
+    label: '轮播图', type: 'swiper', list: [{
+      type: 'swiper',
+      label: '轮播图',
+      width: 400,
+      height: 300,
+      zIndex: 1,
+      border: 'border2',
+      dataType: 'staticData',
+      staticData: [{
+        img: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/pie.png', title: '湖羊', content: `歙县众城湖羊养殖专业合作社
 							徐晓红 - 18273645627
 							歙县郑村镇唐跃村碉墅`
-              }
-            ],
-            thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png'
-          },
-          {
-            type: 'swiper',
-            label: '轮播图(点指示器)',
-            width: 800,
-            height: 358,
-            zIndex: 1,
-            border: 'border14',
-            dataType: 'staticData',
-            staticData: [
-              {
-                content: `歙县众城湖羊养殖专业合作社
+      }],
+      thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png'
+    }, {
+      type: 'swiper',
+      label: '轮播图(点指示器)',
+      width: 800,
+      height: 358,
+      zIndex: 1,
+      border: 'border14',
+      dataType: 'staticData',
+      staticData: [{
+        content: `歙县众城湖羊养殖专业合作社
 							徐晓红 - 18273645627
 							歙县郑村镇唐跃村碉墅`
-              },
-              {
-                content: `歙县众城湖羊养殖专业合作社
+      }, {
+        content: `歙县众城湖羊养殖专业合作社
 							徐晓红 - 18273645627
 							歙县郑村镇唐跃村碉墅`
-              },
-            ],
-            thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png',
-            dotIndicator: true
-          }
-        ]
-      },
-      {
-        label: '视频播放器',
-        type: 'video',
-        list: [
-          {
-            type: 'video',
-            label: '视频播放器',
-            width: 400,
-            height: 300,
-            zIndex: 1,
-            src: '',
-            border: 'border2',
-            thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png'
-          }
-        ]
-      },
-      {
-        label: '数据统计',
-        type: 'summary',
-        list: [
-          {
-            type: 'summary',
-            label: '数据统计',
-            display: 'summary0',
-            width: 480,
-            height: 240,
-            zIndex: 1,
-            top: 0,
-            left: 0,
-            dataX: '',
-            dataY: [],
-            summaryTitle: '',
-            border: 'border3',
-            sourceDataId: '',
-            title: '数据统计',
-            dataType: 'staticData',
-            staticData: [
-              {
-                key: '个人服务办理',
-                value: 247
-              },
-              {
-                key: '同比上月',
-                value: 247
-              }
-            ],
-            dynamicData: [],
-            thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png'
-          }
-        ]
-      },
-      {
-        label: '视频监控',
-        type: 'monitor',
-        list: [
-          {
-            type: 'monitor',
-            label: '视频监控',
-            src: '',
-            width: 480,
-            height: 240,
-            zIndex: 1,
-            top: 0,
-            left: 0,
-            title: '',
-            moniterId: '',
-            monitorType: 'cmcc',
-            api: '/app/appzyvideoequipment/list2',
-            border: 'border2',
-            sourceDataId: '',
-            dataType: 'staticData',
-            staticData: '',
-            dynamicData: '',
-            thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/video.png'
-          }
-        ]
-      }
-    ]
-  }
-]
+      },],
+      thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png',
+      dotIndicator: true
+    }]
+  }, {
+    label: '视频播放器', type: 'video', list: [{
+      type: 'video',
+      label: '视频播放器',
+      width: 400,
+      height: 300,
+      zIndex: 1,
+      src: '',
+      border: 'border2',
+      thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png'
+    }]
+  }, {
+    label: '数据统计', type: 'summary', list: [{
+      type: 'summary',
+      label: '数据统计',
+      display: 'summary0',
+      width: 480,
+      height: 240,
+      zIndex: 1,
+      top: 0,
+      left: 0,
+      dataX: '',
+      dataY: [],
+      summaryTitle: '',
+      border: 'border3',
+      sourceDataId: '',
+      title: '数据统计',
+      dataType: 'staticData',
+      staticData: [{
+        key: '个人服务办理', value: 247
+      }, {
+        key: '同比上月', value: 247
+      }],
+      dynamicData: [],
+      thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png'
+    }]
+  }, {
+    label: '视频监控', type: 'monitor', list: [{
+      type: 'monitor',
+      label: '视频监控',
+      src: '',
+      width: 480,
+      height: 240,
+      zIndex: 1,
+      top: 0,
+      left: 0,
+      title: '',
+      moniterId: '',
+      monitorType: 'cmcc',
+      api: '/app/appzyvideoequipment/list2',
+      border: 'border2',
+      sourceDataId: '',
+      dataType: 'staticData',
+      staticData: '',
+      dynamicData: '',
+      thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/video.png'
+    }]
+  }]
+}]
 
 export {components}
+
+/**
+ * 大屏组件数据类
+ */
+export class DvCompData {
+  static types = {
+    staticData: "静态数据", dynamicData: "动态数据", apiData: "接口数据"
+  }
+
+  constructor(type, dataConfig = {}, instance) {
+    this.instance = instance
+    this.type = type
+    this.params = dataConfig
+  }
+
+  getData() {
+    return this.type == 'staticData' ? this.getStaticData() :
+      this.type == 'dynamicData' ? this.getDynamicData() :
+        this.type == 'apiData' ? this.getApiData() : []
+  }
+
+  getDynamicData() {
+    const {sourceDataId: id} = this.params
+    return id ? this.getAsyncData(`/app/appdiylargescreen/statisticsByLsid?id=${id}`) : Promise.reject("未获取到数据源id")
+  }
+
+  getStaticData() {
+    const {staticData} = this.params
+    return new Promise((resolve, reject) => {
+      staticData ? resolve(staticData) : reject("未获取到静态数据")
+    })
+  }
+
+  getApiData() {
+    const {api} = this.params
+    return api ? this.getAsyncData(api) : Promise.reject("未获取到api")
+  }
+
+  getAsyncData(api) {
+    return this.instance.post(api).then(res => {
+      if (res?.data) {
+        const list = res.data,
+          firstRecord = list?.[0] || {},
+          keys = Object.keys(firstRecord)
+        let meta = []
+        if (['AiDvTable', 'table'].includes(this.params.type)) {
+          meta = keys.map(v => {
+            let obj = {}
+            list.forEach((item, index) => {
+              obj[`v${index}`] = item[v]
+            })
+            return {row: v, ...obj}
+          })
+        } else if (this.params.type === 'summary') {
+          if (this.params.display === 'summary9') {
+            meta = res.data
+          } else {
+            meta = keys.map(key => ({key, value: firstRecord[key]}))
+          }
+        } else if (this.type === 'dynamicData' && !this.params.dataX && this.params.dataY?.length <= 0) {
+          meta = keys.map(key => ({key, value: firstRecord[key]}))
+        } else {
+          if (this.params.dataX && this.params.dataY.length) {
+            list.forEach(i => {
+              let obj = {}
+              this.params.dataY.forEach(v => obj[v] = i[v])
+              meta.push({
+                [this.params.dataX]: i[this.params.dataX], ...obj
+              })
+            })
+          } else {
+            meta = res.data
+          }
+        }
+        return meta
+      }
+    })
+  }
+}
diff --git a/ui/packages/tools/AiEchartV2.vue b/ui/packages/tools/AiEchartV2.vue
index 1f044411..b7527cd9 100644
--- a/ui/packages/tools/AiEchartV2.vue
+++ b/ui/packages/tools/AiEchartV2.vue
@@ -59,7 +59,7 @@ export default {
           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]))})) : []
-      let ops = {
+      return {
         tooltip: {},
         xAxis: {
           type: 'category', nameGap: 20, axisTick: false,
@@ -84,7 +84,7 @@ export default {
               type: 'dashed'
             }
           },
-          axisLabel: { color: '#C3C4C4' },
+          axisLabel: {color: '#C3C4C4'},
           axisLine: {
             lineStyle: {
               color: '#C3C4C4'
@@ -101,7 +101,6 @@ export default {
         legend, series, ...options,
         color: colors
       }
-      return ops
     },
     grid() {
       let {width, height} = this.chartOptions.grid || {}