diff --git a/components/AiDvRender.vue b/components/AiDvRender.vue index fd8cee13..259868fa 100644 --- a/components/AiDvRender.vue +++ b/components/AiDvRender.vue @@ -66,7 +66,7 @@ v-else-if="currentType === 'video'"/> - + diff --git a/components/index.js b/components/index.js index 7cca617a..2b193b66 100644 --- a/components/index.js +++ b/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) { diff --git a/components/layout/AiDvPlot/AiDvPlot.vue b/components/layout/AiDvPlot/AiDvPlot.vue index a3064522..6ee0d18c 100644 --- a/components/layout/AiDvPlot/AiDvPlot.vue +++ b/components/layout/AiDvPlot/AiDvPlot.vue @@ -1,6 +1,6 @@ @@ -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() { + + } + }, } diff --git a/packages/bigscreen/designer/components/form/DataConfig.vue b/packages/bigscreen/designer/components/form/DataConfig.vue index bab938e9..c66a87d7 100644 --- a/packages/bigscreen/designer/components/form/DataConfig.vue +++ b/packages/bigscreen/designer/components/form/DataConfig.vue @@ -30,7 +30,7 @@ - + @@ -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, diff --git a/packages/bigscreen/designer/config.js b/packages/bigscreen/designer/config.js index ba95e3f8..ba91c6ad 100644 --- a/packages/bigscreen/designer/config.js +++ b/packages/bigscreen/designer/config.js @@ -1,464 +1,465 @@ /** - * 大屏设计组件库,模板设置中心 + * 大屏设计资产库,模板设置中心 * */ +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: [] + } + ] + }] const components = [ { type: 'chart', label: '图表', list: [ - { - 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: [] - } - ] - }, + ...chartTpl, { label: "多维图", type: "plot",