From fa551fe61887f2dda4df2b002971a5219f483719 Mon Sep 17 00:00:00 2001 From: aixianling Date: Sat, 7 Oct 2023 18:04:34 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A4=9A=E7=BB=B4=E8=A1=A8=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E9=9D=A2=E6=9D=BF=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/AiDvRender.vue | 6 +- components/layout/AiDvPlot/AiDvPlot.vue | 44 +++ .../designer/components/form/DataConfig.vue | 281 ++++++++---------- .../components/form/componentConfig.vue | 12 +- packages/bigscreen/designer/config.js | 34 +++ 5 files changed, 218 insertions(+), 159 deletions(-) create mode 100644 components/layout/AiDvPlot/AiDvPlot.vue diff --git a/components/AiDvRender.vue b/components/AiDvRender.vue index a5eb5bd7..fd8cee13 100644 --- a/components/AiDvRender.vue +++ b/components/AiDvRender.vue @@ -66,6 +66,7 @@ v-else-if="currentType === 'video'"/> + @@ -81,6 +82,7 @@ import AiSwiper from './AiSwiper.vue' import AiDvDisplay from "./layout/AiDvDisplay/AiDvDisplay"; import AiDvPanel from "./layout/AiDvPanel/AiDvPanel"; import AiDvSummary from "./layout/AiDvSummary/AiDvSummary"; +import AiDvPlot from "./layout/AiDvPlot/AiDvPlot.vue"; Vue.use(scrollBoard) @@ -88,6 +90,7 @@ export default { name: 'AiDvRender', props: ['data', 'index', 'theme', 'instance'], components: { + AiDvPlot, // AiSprite, AiDvSummary, AiDvDisplay, @@ -118,8 +121,7 @@ export default { deep: true, handler() { if (this.currentType == 'map') { this.renderMap() - } - if (this.currentType === 'AiDvTable') { + } else if (this.currentType === 'AiDvTable') { this.dvTableConfig = this.data[this.data.dataType].map((v, i) => { return { color: this.data.config[i] ? (this.data.config[i].color || '') : '', diff --git a/components/layout/AiDvPlot/AiDvPlot.vue b/components/layout/AiDvPlot/AiDvPlot.vue new file mode 100644 index 00000000..a3064522 --- /dev/null +++ b/components/layout/AiDvPlot/AiDvPlot.vue @@ -0,0 +1,44 @@ + + + diff --git a/packages/bigscreen/designer/components/form/DataConfig.vue b/packages/bigscreen/designer/components/form/DataConfig.vue index 08c190fa..91ec5417 100644 --- a/packages/bigscreen/designer/components/form/DataConfig.vue +++ b/packages/bigscreen/designer/components/form/DataConfig.vue @@ -6,14 +6,11 @@ 标记点设置 添加 -
-
+ + + + + -
-

基础设置

-
- -
- - - - + +
+

基础设置

+ + + +
+
+

基础设置

+ + +
- - + + + +
- - + + + + + +
-
-

基础设置

-
- -
- -
-
-
-
+

字段设置

-
- -
- - - - -
-
+ + + + + +
-
+

字段设置

-
- -
- - - - -
-
-
- -
- - - - -
-
+ + + + + + + + + + + +
- -
- -
- @@ -173,6 +153,8 @@ import 'brace/snippets/json'; 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 charts from "../../../../../components/AiEchart/echartTpls"; export default { name: 'dataConfig', @@ -189,19 +171,18 @@ export default { return { dataTypes: [ { - value: 'staticData', + id: 'staticData', label: '静态数据' }, { - value: 'dynamicData', + id: 'dynamicData', label: '动态数据' }, { - value: 'apiData', + id: 'apiData', label: '接口' } ], - isShowEditor: false, json: "", sourceDataId: '', sourceData: [], @@ -209,15 +190,28 @@ export default { monitorList: [], list: [], showMapEditor: false, - form: {} + form: {}, + charts: Object.keys(charts).map((label, id) => ({id, label})) } }, computed: { - markers: v => v.options.staticData?.markers || [] + markers: v => v.options.staticData?.markers || [], }, components: { + AiFold, AiDialogBtn, CodeEditor, + configItem: { + props: { + label: String + }, + render(h) { + return h('div', {class: 'layout-config__item'}, [ + h('label', this.label), + h('div', {class: 'layout-config__item--right fill'}, this.$slots.default) + ]) + } + } }, created() { if (this.options.type == "map" && Array.isArray(this.options.staticData)) {//处理历史数据,并更新最新数据结构 @@ -257,7 +251,6 @@ export default { methods: { showEditor() { this.json = JSON.stringify(this.options.staticData, null, 2) - this.isShowEditor = true }, onMoniterId(e) { @@ -383,7 +376,6 @@ export default { onConfirm() { this.$set(this.options, 'staticData', JSON.parse(this.json)) - this.isShowEditor = false this.$emit('change') }, handleMapMarker(v = {}, index) { @@ -448,18 +440,6 @@ export default { .layout-config__code { position: relative; padding-left: 10px; - - .layout-config__code--btn { - position: absolute; - right: 0; - top: 0; - color: gray; - z-index: 111; - - &:hover { - opacity: 0.8; - } - } } & > h2 { @@ -476,7 +456,7 @@ export default { } } - .layout-config__item { + :deep(.layout-config__item) { display: flex; align-items: center; justify-content: space-between; @@ -494,26 +474,11 @@ export default { text-align: right; } - .layout-config__item--right { - display: flex; - align-items: center; - justify-content: flex-end; - width: 200px; - text-align: right; - } - .el-select .el-tag { color: #fff; background: transparent; } - input { - background: #262C33; - font-size: 12px; - color: #fff; - border: 1px solid #030411; - } - .el-input__icon { color: #fff; } @@ -550,8 +515,22 @@ export default { color: #f46; } - .el-button + .el-button { + .el-button--text + .el-button--text { margin-left: 0; } + + input { + background: #262C33; + font-size: 12px; + color: #fff; + border: 1px solid #030411; + } + .layout-config__item--right { + display: flex; + align-items: center; + justify-content: flex-end; + text-align: right; + margin-left: 30px; + } } diff --git a/packages/bigscreen/designer/components/form/componentConfig.vue b/packages/bigscreen/designer/components/form/componentConfig.vue index 58033659..ea328e70 100644 --- a/packages/bigscreen/designer/components/form/componentConfig.vue +++ b/packages/bigscreen/designer/components/form/componentConfig.vue @@ -106,10 +106,12 @@
- +
-
+
@@ -215,7 +217,7 @@ export default { data() { return { borderList: ['border0', 'border1', 'border2', 'border3', 'border4', 'border5', 'border6', 'border7', 'border8', 'border9', 'border10', - 'border11', 'border12', 'border13'],//边框待选项 + 'border11', 'border12', 'border13'],//边框待选项 summaryList: ['summary0', 'summary1', 'summary2', 'summary3', 'summary4', 'summary6', 'summary5', 'summary7', 'summary8', 'summary9', 'summary10', 'summary11', 'summary12', 'summary13', 'summary14', 'summary15', 'summary16', 'summary17', 'summary18'],//汇总待选项 @@ -239,9 +241,7 @@ export default { width: 232px; :deep( .el-select ) { - width: 80px input { - width: 80px; - } + width: 80px; } .el-select { diff --git a/packages/bigscreen/designer/config.js b/packages/bigscreen/designer/config.js index 6148f90c..ba95e3f8 100644 --- a/packages/bigscreen/designer/config.js +++ b/packages/bigscreen/designer/config.js @@ -1,3 +1,7 @@ +/** + * 大屏设计组件库,模板设置中心 + * + */ const components = [ { type: 'chart', @@ -454,6 +458,36 @@ const components = [ dynamicData: [] } ] + }, + { + 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} + ] + } + ], + + } + ] } ] },