修复轮播图编辑器

This commit is contained in:
aixianling
2023-10-09 17:37:22 +08:00
parent 3a9377fe4b
commit 1b2348ef73
3 changed files with 32 additions and 23 deletions

View File

@@ -294,6 +294,7 @@ export default {
}, },
currLayout: { currLayout: {
set(v) { set(v) {
console.log(v)
this.componentList.splice(this.activeIndex, 1, v) this.componentList.splice(this.activeIndex, 1, v)
}, },
get() { get() {
@@ -351,7 +352,7 @@ export default {
this.form.images = [] this.form.images = []
this.isShowAddImg = false this.isShowAddImg = false
}, },
//置顶图层
setTop() { setTop() {
const maxZindex = Math.max.apply(Math, this.componentList.map(item => { const maxZindex = Math.max.apply(Math, this.componentList.map(item => {
return item.zIndex return item.zIndex
@@ -359,7 +360,7 @@ export default {
this.$set(this.componentList[this.activeIndex], 'zIndex', maxZindex + 1) this.$set(this.componentList[this.activeIndex], 'zIndex', maxZindex + 1)
}, },
//置底图层
setBottom() { setBottom() {
const item = this.componentList[this.activeIndex] const item = this.componentList[this.activeIndex]
this.componentList.splice(this.activeIndex, 1) this.componentList.splice(this.activeIndex, 1)
@@ -404,6 +405,7 @@ export default {
} }
}) })
}, },
//从资产中新建时使用
clone(e) { clone(e) {
this.componentList.push(this.deepClone(e)) this.componentList.push(this.deepClone(e))
}, },
@@ -456,12 +458,12 @@ export default {
e.preventDefault() e.preventDefault()
}, },
//复制图层功能
copyLayer() { copyLayer() {
const layer = this.deepClone(this.componentList[this.activeIndex]) const layer = this.deepClone(this.componentList[this.activeIndex])
this.componentList.push(layer) this.componentList.push(layer)
}, },
//删除图层功能
removeLayer() { removeLayer() {
this.componentList.splice(this.activeIndex, 1) this.componentList.splice(this.activeIndex, 1)
this.activeIndex = -1 this.activeIndex = -1

View File

@@ -37,7 +37,7 @@
<chart-picker v-model="chart.chart"/> <chart-picker v-model="chart.chart"/>
</config-item> </config-item>
<datasource-picker v-model="chart.ds" :instance="instance" <datasource-picker v-model="chart.ds" :instance="instance"
@input="chart={...chart,...chart.ds},$emit('change')"/> @input="chart={...chart,...chart.ds},$emit('change',options)"/>
<config-item label="数据维度" v-if="chart.dataType !== 'staticData'"> <config-item label="数据维度" v-if="chart.dataType !== 'staticData'">
<code-editor v-model="chart.djson" lang="json" theme="github" width="100%" height="100" <code-editor v-model="chart.djson" lang="json" theme="github" width="100%" height="100"
placeholder="参照echarts配置数据维度,为一个数组,数组的第一个值为维度值" placeholder="参照echarts配置数据维度,为一个数组,数组的第一个值为维度值"
@@ -54,7 +54,7 @@
</div> </div>
<div class="layout-config__group" v-else> <div class="layout-config__group" v-else>
<h2>基础设置</h2> <h2>基础设置</h2>
<datasource-picker v-model="options" :instance="instance" @input="$emit('change')"/> <datasource-picker :options="options" :instance="instance" @input="v=>$emit('change',v)"/>
</div> </div>
<div v-if="options.dataType!='staticData'&&options.type=='monitor'&&['cmcc','slw'].includes(options.monitorType)" <div v-if="options.dataType!='staticData'&&options.type=='monitor'&&['cmcc','slw'].includes(options.monitorType)"
class="layout-config__group"> class="layout-config__group">
@@ -154,6 +154,7 @@ export default {
list: [], list: [],
showMapEditor: false, showMapEditor: false,
form: {}, form: {},
datasource:{}
} }
}, },
computed: { computed: {

View File

@@ -1,22 +1,22 @@
<template> <template>
<section class="datasourcePicker"> <section class="datasourcePicker">
<config-item label="数据类型"> <config-item label="数据类型">
<ai-select v-model="options.dataType" placeholder="请选择数据类型" :select-list="dataTypes"/> <ai-select v-model="source.dataType" placeholder="请选择数据类型" :select-list="dataTypes"/>
</config-item> </config-item>
<div class="codeEditor" v-if="['htmlData','staticData'].includes(options.dataType)"> <div class="codeEditor" v-if="['htmlData','staticData'].includes(source.dataType)">
<ai-dialog-btn :modal="false" dialog-title="编辑器" :customFooter="false" <ai-dialog-btn :modal="false" dialog-title="编辑器" :customFooter="false"
@confirm="changeData" @open="content=contentstr"> @confirm="changeData(JSON.parse(content))" @open="content=contentstr">
<code-editor slot="btn" readonly :value="contentstr" :lang="dataLang" theme="github" width="100%" height="250"/> <code-editor slot="btn" readonly :value="contentstr" :lang="dataLang" theme="github" width="100%" height="250"/>
<code-editor v-model="content" :lang="dataLang" theme="github" width="100%" height="440" wrap/> <code-editor v-model="content" :lang="dataLang" theme="github" width="100%" height="440" wrap/>
</ai-dialog-btn> </ai-dialog-btn>
</div> </div>
<config-item v-else-if="options.dataType === 'dynamicData'" label="数据源"> <config-item v-else-if="source.dataType === 'dynamicData'" label="数据源">
<ai-select v-model="options.sourceDataId" placeholder="请选择数据源" :instance="instance" <ai-select v-model="source.sourceDataId" placeholder="请选择数据源" :instance="instance"
:prop="{label:'description'}" @change="changeData" :prop="{label:'description'}" @change="changeData"
action="/app/appdiylargescreen/allDatasourceByPage"/> action="/app/appdiylargescreen/allDatasourceByPage"/>
</config-item> </config-item>
<config-item label="接口地址" v-else-if="options.dataType === 'apiData'"> <config-item label="接口地址" v-else-if="source.dataType === 'apiData'">
<el-input size="small" v-model="options.api" @change="changeData" placeholder="请输入数据接口URL"/> <el-input size="small" v-model="source.api" @change="changeData" placeholder="请输入数据接口URL"/>
</config-item> </config-item>
</section> </section>
</template> </template>
@@ -45,21 +45,27 @@ export default {
return { return {
dataTypes: Object.entries(DvCompData.types).map(e => ({id: e[0], label: e[1]})), dataTypes: Object.entries(DvCompData.types).map(e => ({id: e[0], label: e[1]})),
content: "", content: "",
sourceData: [] loading: false
} }
}, },
computed: { computed: {
contentstr: v => JSON.stringify(v.options.staticData), contentstr: v => JSON.stringify(v.options.staticData),
dataLang: v => v.options.dataType == 'htmlData' ? 'html' : 'json' dataLang: v => v.options.dataType == 'htmlData' ? 'html' : 'json',
source: {
set(v) {
console.log(v)
this.$emit("input", v)
},
get() {
return this.options
}
}
}, },
methods: { methods: {
updateOptions() { changeData(sdata) {
this.$emit("input", this.options) this.source.dataType == 'staticData' ? this.source.staticData = sdata :
}, new DvCompData(this.source.dataType, this.source, this.instance).getData().then(data => {
changeData() { this.source[this.source.dataType] = data
new DvCompData(this.options.dataType, this.options, this.instance).getData().then(data => {
this.options[this.options.dataType] = data
this.updateOptions()
}) })
} }
}, },