大屏设计新增图片素材管理
This commit is contained in:
yanran200730
@@ -7,6 +7,7 @@
|
|||||||
<h2>{{ dashboard.title }}</h2>
|
<h2>{{ dashboard.title }}</h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="layout-header__right">
|
<div class="layout-header__right">
|
||||||
|
<span type="text" @click="isShowImg = true">图片素材</span>
|
||||||
<span type="text" @click="back">退出</span>
|
<span type="text" @click="back">退出</span>
|
||||||
<span type="text" @click="save">保存</span>
|
<span type="text" @click="save">保存</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -266,9 +267,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="layout-menu"
|
class="layout-menu"
|
||||||
v-if="activeIndex > -1 && isShowMenu"
|
v-if="activeIndex > -1 && isShowMenu"
|
||||||
:style="{top: menuY + 'px', left: menuX + 'px'}">
|
:style="{top: menuY + 'px', left: menuX + 'px'}">
|
||||||
<div class="layout-menu__item" @click="removeLayer">
|
<div class="layout-menu__item" @click="removeLayer">
|
||||||
<span>删除图层</span>
|
<span>删除图层</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -282,246 +283,320 @@
|
|||||||
<span>置底图层</span>
|
<span>置底图层</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<ai-dialog :visible.sync="isShowImg" append-to-body title="图片素材" @onConfirm="isShowImg = false">
|
||||||
|
<el-button type="primary" style="margin-bottom: 20px" @click="isShowAddImg = true">添加图片</el-button>
|
||||||
|
<ai-table
|
||||||
|
:tableData="images"
|
||||||
|
:total="images.length"
|
||||||
|
:colConfigs="colConfigs"
|
||||||
|
@getList="() => {}">
|
||||||
|
<el-table-column slot="img" label="图片" align="center">
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<ai-uploader
|
||||||
|
:instance="instance"
|
||||||
|
:value="[{url: row.url}]"
|
||||||
|
disabled
|
||||||
|
:limit="1">
|
||||||
|
</ai-uploader>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column slot="options" width="140px" fixed="right" label="操作" align="center">
|
||||||
|
<template slot-scope="{ row, $index }">
|
||||||
|
<div class="table-options">
|
||||||
|
<el-button type="text" @click="removeImg($index)">删除</el-button>
|
||||||
|
<el-button type="text" @click="copy(row.url)">复制链接</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</ai-table>
|
||||||
|
</ai-dialog>
|
||||||
|
<ai-dialog :visible.sync="isShowAddImg" width="580px" append-to-body title="添加图片" @closed="form.images = []" @onConfirm="onImageConfirm">
|
||||||
|
<ai-uploader
|
||||||
|
:instance="instance"
|
||||||
|
v-model="form.images"
|
||||||
|
:limit="9">
|
||||||
|
<template slot="tips">
|
||||||
|
<p>最多上传9张图片,单个文件最大10MB，支持jpg、jpeg、png格式</p>
|
||||||
|
</template>
|
||||||
|
</ai-uploader>
|
||||||
|
</ai-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { components } from '../config'
|
import { components } from '../config'
|
||||||
import VueRulerTool from 'vue-ruler-tool'
|
import VueRulerTool from 'vue-ruler-tool'
|
||||||
import VueDraggableResizable from 'vue-draggable-resizable'
|
import VueDraggableResizable from 'vue-draggable-resizable'
|
||||||
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
|
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
|
||||||
import DataConfig from './form/DataConfig.vue'
|
import DataConfig from './form/DataConfig.vue'
|
||||||
import RenderElement from './RenderElement'
|
import RenderElement from './RenderElement'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
instance: Function,
|
instance: Function,
|
||||||
dict: Object,
|
dict: Object,
|
||||||
params: Object,
|
params: Object,
|
||||||
urlPrefix: String
|
urlPrefix: String
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
parentIndex: 0,
|
|
||||||
subIndex: 0,
|
|
||||||
sonIndex: 0,
|
|
||||||
leftIndex: 0,
|
|
||||||
rightIndex: 1,
|
|
||||||
configIndex: 0,
|
|
||||||
components,
|
|
||||||
bigscreenWidth: 1920,
|
|
||||||
bigscreenHeight: 1080,
|
|
||||||
widthPaddingTools: 18,
|
|
||||||
componentList: [],
|
|
||||||
dashboard: {
|
|
||||||
title: '大屏',
|
|
||||||
width: 1920,
|
|
||||||
height: 1080,
|
|
||||||
backgroundColor: '',
|
|
||||||
backgroundImage: []
|
|
||||||
},
|
|
||||||
menuX: 0,
|
|
||||||
menuY: 0,
|
|
||||||
isShowMenu: false,
|
|
||||||
activeIndex: -1,
|
|
||||||
middleWidth: 0,
|
|
||||||
middleHeight: 0,
|
|
||||||
widthScale: 0,
|
|
||||||
heightScale: 0,
|
|
||||||
bigscreenScaleInWorkbench: 0,
|
|
||||||
tableStatus: [{
|
|
||||||
label: '是',
|
|
||||||
value: '1'
|
|
||||||
}, {
|
|
||||||
label: '否',
|
|
||||||
value: '0'
|
|
||||||
}],
|
|
||||||
summaryList: ['summary0', 'summary1', 'summary2', 'summary3', 'summary4', 'summary5', 'summary7', 'summary9', 'summary10'],
|
|
||||||
borderList: ['border0', 'border1', 'border2', 'border3', 'border4']
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
components: {
|
|
||||||
RenderElement,
|
|
||||||
DataConfig,
|
|
||||||
VueRulerTool,
|
|
||||||
VueDraggableResizable,
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
workbenchTransform() {
|
|
||||||
return `scale(${this.heightScale})`
|
|
||||||
},
|
},
|
||||||
|
|
||||||
currLayout() {
|
data() {
|
||||||
if (this.activeIndex === -1) return {}
|
return {
|
||||||
|
colConfigs: [
|
||||||
return this.componentList[this.activeIndex]
|
// { prop: 'url', label: '图片链接', showOverflowTooltip: false },
|
||||||
},
|
{ slot: 'img', label: '图片' }
|
||||||
|
],
|
||||||
widget() {
|
form: {
|
||||||
if (this.components.length && this.components[this.parentIndex].list.length) {
|
images: []
|
||||||
return this.components[this.parentIndex].list[this.subIndex].list
|
},
|
||||||
|
isShowAddImg: false,
|
||||||
|
isShowImg: false,
|
||||||
|
parentIndex: 0,
|
||||||
|
subIndex: 0,
|
||||||
|
sonIndex: 0,
|
||||||
|
leftIndex: 0,
|
||||||
|
rightIndex: 1,
|
||||||
|
configIndex: 0,
|
||||||
|
components,
|
||||||
|
bigscreenWidth: 1920,
|
||||||
|
bigscreenHeight: 1080,
|
||||||
|
widthPaddingTools: 18,
|
||||||
|
componentList: [],
|
||||||
|
dashboard: {
|
||||||
|
title: '大屏',
|
||||||
|
width: 1920,
|
||||||
|
height: 1080,
|
||||||
|
backgroundColor: '',
|
||||||
|
backgroundImage: []
|
||||||
|
},
|
||||||
|
menuX: 0,
|
||||||
|
menuY: 0,
|
||||||
|
isShowMenu: false,
|
||||||
|
activeIndex: -1,
|
||||||
|
middleWidth: 0,
|
||||||
|
middleHeight: 0,
|
||||||
|
widthScale: 0,
|
||||||
|
heightScale: 0,
|
||||||
|
bigscreenScaleInWorkbench: 0,
|
||||||
|
tableStatus: [{
|
||||||
|
label: '是',
|
||||||
|
value: '1'
|
||||||
|
}, {
|
||||||
|
label: '否',
|
||||||
|
value: '0'
|
||||||
|
}],
|
||||||
|
images: [],
|
||||||
|
summaryList: ['summary0', 'summary1', 'summary2', 'summary3', 'summary4', 'summary5', 'summary7', 'summary9', 'summary10'],
|
||||||
|
borderList: ['border0', 'border1', 'border2', 'border3', 'border4']
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
|
||||||
return []
|
components: {
|
||||||
}
|
RenderElement,
|
||||||
},
|
DataConfig,
|
||||||
|
VueRulerTool,
|
||||||
|
VueDraggableResizable,
|
||||||
|
},
|
||||||
|
|
||||||
created() {
|
computed: {
|
||||||
},
|
workbenchTransform() {
|
||||||
|
return `scale(${this.heightScale})`
|
||||||
|
},
|
||||||
|
|
||||||
mounted() {
|
currLayout() {
|
||||||
if (this.params && this.params.id) {
|
if (this.activeIndex === -1) return {}
|
||||||
this.getInfo(this.params.id)
|
|
||||||
}
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.middleWidth = document.querySelector('.layout-wrapper').offsetWidth - 670
|
|
||||||
this.middleHeight = document.querySelector('.layout-wrapper').offsetHeight
|
|
||||||
this.initCanvas()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
return this.componentList[this.activeIndex]
|
||||||
bindEvent() {
|
},
|
||||||
this.middleWidth = document.querySelector('.layout-wrapper').offsetWidth - 670
|
|
||||||
this.middleHeight = document.querySelector('.layout-wrapper').offsetHeight
|
|
||||||
|
|
||||||
|
widget() {
|
||||||
|
if (this.components.length && this.components[this.parentIndex].list.length) {
|
||||||
|
return this.components[this.parentIndex].list[this.subIndex].list
|
||||||
|
}
|
||||||
|
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
if (this.params && this.params.id) {
|
||||||
|
this.getInfo(this.params.id)
|
||||||
|
}
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
|
this.middleWidth = document.querySelector('.layout-wrapper').offsetWidth - 670
|
||||||
|
this.middleHeight = document.querySelector('.layout-wrapper').offsetHeight
|
||||||
this.initCanvas()
|
this.initCanvas()
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
setTop() {
|
methods: {
|
||||||
const maxZindex = Math.max.apply(Math, this.componentList.map(item => {
|
bindEvent() {
|
||||||
return item.zIndex
|
this.middleWidth = document.querySelector('.layout-wrapper').offsetWidth - 670
|
||||||
}))
|
this.middleHeight = document.querySelector('.layout-wrapper').offsetHeight
|
||||||
|
|
||||||
this.$set(this.componentList[this.activeIndex], 'zIndex', maxZindex + 1)
|
this.$nextTick(() => {
|
||||||
},
|
this.initCanvas()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
setBottom() {
|
copy (link) {
|
||||||
const item = this.componentList[this.activeIndex]
|
let oInput = document.createElement('input')
|
||||||
this.componentList.splice(this.activeIndex, 1)
|
oInput.value = link
|
||||||
this.componentList.unshift(item)
|
document.body.appendChild(oInput)
|
||||||
},
|
oInput.select()
|
||||||
|
document.execCommand('Copy')
|
||||||
|
this.$message({
|
||||||
|
message: '已复制',
|
||||||
|
type: 'success'
|
||||||
|
})
|
||||||
|
oInput.remove()
|
||||||
|
},
|
||||||
|
|
||||||
getInfo(id) {
|
removeImg (index) {
|
||||||
this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => {
|
this.images.splice(index, 1)
|
||||||
if (res.code === 0) {
|
},
|
||||||
this.componentList = JSON.parse(res.data.config).config
|
|
||||||
this.dashboard = JSON.parse(res.data.config).dashboard
|
onImageConfirm () {
|
||||||
|
if (!this.form.images.length) {
|
||||||
|
return this.$message.error('请上传图片')
|
||||||
}
|
}
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
back() {
|
this.images.push(this.form.images)
|
||||||
this.$emit('close')
|
this.form.images = []
|
||||||
},
|
this.isShowAddImg = false
|
||||||
|
},
|
||||||
|
|
||||||
save() {
|
setTop() {
|
||||||
this.instance.post(`${this.urlPrefix}/appdiylargescreen/addOrUpdateLargeScreen`, {
|
const maxZindex = Math.max.apply(Math, this.componentList.map(item => {
|
||||||
config: JSON.stringify({
|
return item.zIndex
|
||||||
config: this.componentList,
|
}))
|
||||||
dashboard: this.dashboard
|
|
||||||
}),
|
this.$set(this.componentList[this.activeIndex], 'zIndex', maxZindex + 1)
|
||||||
status: 1,
|
},
|
||||||
title: this.dashboard.title,
|
|
||||||
id: this.params.id || ''
|
setBottom() {
|
||||||
}).then(res => {
|
const item = this.componentList[this.activeIndex]
|
||||||
if (res.code == 0) {
|
this.componentList.splice(this.activeIndex, 1)
|
||||||
this.$message.success('保存成功')
|
this.componentList.unshift(item)
|
||||||
this.$emit('change', res.data)
|
},
|
||||||
this.back()
|
|
||||||
|
getInfo(id) {
|
||||||
|
this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => {
|
||||||
|
if (res.code === 0) {
|
||||||
|
const data = JSON.parse(res.data.config)
|
||||||
|
this.componentList = data.config
|
||||||
|
this.dashboard = data.dashboard
|
||||||
|
this.images = data.images || []
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
back() {
|
||||||
|
this.$emit('close')
|
||||||
|
},
|
||||||
|
|
||||||
|
save() {
|
||||||
|
this.instance.post(`${this.urlPrefix}/appdiylargescreen/addOrUpdateLargeScreen`, {
|
||||||
|
config: JSON.stringify({
|
||||||
|
config: this.componentList,
|
||||||
|
dashboard: this.dashboard,
|
||||||
|
images: this.images
|
||||||
|
}),
|
||||||
|
status: 1,
|
||||||
|
title: this.dashboard.title,
|
||||||
|
id: this.params.id || ''
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.$message.success('保存成功')
|
||||||
|
this.$emit('change', res.data)
|
||||||
|
this.back()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
clone(e) {
|
||||||
|
this.componentList.push(this.deepClone(e))
|
||||||
|
},
|
||||||
|
|
||||||
|
onChange(e) {
|
||||||
|
if (e.indexOf('Chart') > -1) {
|
||||||
|
this.$refs[`chart${this.activeIndex}`][0].refresh()
|
||||||
}
|
}
|
||||||
})
|
},
|
||||||
},
|
|
||||||
|
|
||||||
clone(e) {
|
deepClone(data, hash = new WeakMap()) {
|
||||||
this.componentList.push(this.deepClone(e))
|
if (typeof data !== 'object' || data === null) {
|
||||||
},
|
throw new TypeError('传入参数不是对象')
|
||||||
|
|
||||||
onChange(e) {
|
|
||||||
if (e.indexOf('Chart') > -1) {
|
|
||||||
this.$refs[`chart${this.activeIndex}`][0].refresh()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
deepClone(data, hash = new WeakMap()) {
|
|
||||||
if (typeof data !== 'object' || data === null) {
|
|
||||||
throw new TypeError('传入参数不是对象')
|
|
||||||
}
|
|
||||||
if (hash.has(data)) {
|
|
||||||
return hash.get(data)
|
|
||||||
}
|
|
||||||
let newData = {}
|
|
||||||
const dataKeys = Object.keys(data)
|
|
||||||
dataKeys.forEach(value => {
|
|
||||||
const currentDataValue = data[value]
|
|
||||||
if (typeof currentDataValue !== "object" || currentDataValue === null) {
|
|
||||||
newData[value] = currentDataValue
|
|
||||||
} else if (Array.isArray(currentDataValue)) {
|
|
||||||
newData[value] = [...currentDataValue]
|
|
||||||
} else if (currentDataValue instanceof Set) {
|
|
||||||
newData[value] = new Set([...currentDataValue])
|
|
||||||
} else if (currentDataValue instanceof Map) {
|
|
||||||
newData[value] = new Map([...currentDataValue])
|
|
||||||
} else {
|
|
||||||
hash.set(data, data)
|
|
||||||
newData[value] = this.deepClone(currentDataValue, hash)
|
|
||||||
}
|
}
|
||||||
})
|
if (hash.has(data)) {
|
||||||
return newData
|
return hash.get(data)
|
||||||
},
|
}
|
||||||
|
let newData = {}
|
||||||
|
const dataKeys = Object.keys(data)
|
||||||
|
dataKeys.forEach(value => {
|
||||||
|
const currentDataValue = data[value]
|
||||||
|
if (typeof currentDataValue !== "object" || currentDataValue === null) {
|
||||||
|
newData[value] = currentDataValue
|
||||||
|
} else if (Array.isArray(currentDataValue)) {
|
||||||
|
newData[value] = [...currentDataValue]
|
||||||
|
} else if (currentDataValue instanceof Set) {
|
||||||
|
newData[value] = new Set([...currentDataValue])
|
||||||
|
} else if (currentDataValue instanceof Map) {
|
||||||
|
newData[value] = new Map([...currentDataValue])
|
||||||
|
} else {
|
||||||
|
hash.set(data, data)
|
||||||
|
newData[value] = this.deepClone(currentDataValue, hash)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return newData
|
||||||
|
},
|
||||||
|
|
||||||
onContextmenu(e, index) {
|
onContextmenu(e, index) {
|
||||||
this.menuX = e.clientX + 10
|
this.menuX = e.clientX + 10
|
||||||
this.menuY = e.clientY + 10
|
this.menuY = e.clientY + 10
|
||||||
this.activeIndex = index
|
this.activeIndex = index
|
||||||
this.isShowMenu = true
|
this.isShowMenu = true
|
||||||
|
|
||||||
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
|
||||||
},
|
},
|
||||||
|
|
||||||
onActivated(index) {
|
onActivated(index) {
|
||||||
this.activeIndex = index
|
this.activeIndex = index
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
onDrag(x, y, index) {
|
onDrag(x, y, index) {
|
||||||
this.$set(this.componentList[index], 'left', x)
|
this.$set(this.componentList[index], 'left', x)
|
||||||
this.$set(this.componentList[index], 'top', y)
|
this.$set(this.componentList[index], 'top', y)
|
||||||
},
|
},
|
||||||
|
|
||||||
onResizing(x, y, w, h, index, type) {
|
onResizing(x, y, w, h, index, type) {
|
||||||
this.$set(this.componentList[index], 'left', x)
|
this.$set(this.componentList[index], 'left', x)
|
||||||
this.$set(this.componentList[index], 'top', y)
|
this.$set(this.componentList[index], 'top', y)
|
||||||
this.$set(this.componentList[index], 'width', w)
|
this.$set(this.componentList[index], 'width', w)
|
||||||
this.$set(this.componentList[index], 'height', h)
|
this.$set(this.componentList[index], 'height', h)
|
||||||
|
|
||||||
if (type.indexOf('Chart') > -1) {
|
if (type.indexOf('Chart') > -1) {
|
||||||
this.$refs[`chart${index}`][0].watchResize()
|
this.$refs[`chart${index}`][0].watchResize()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
initCanvas() {
|
||||||
|
var widthScale = (this.middleWidth - this.widthPaddingTools) / this.bigscreenWidth
|
||||||
|
var heightScale = (this.middleHeight - this.widthPaddingTools) / this.bigscreenHeight
|
||||||
|
this.heightScale = Math.min(widthScale, heightScale)
|
||||||
}
|
}
|
||||||
},
|
|
||||||
|
|
||||||
initCanvas() {
|
|
||||||
var widthScale = (this.middleWidth - this.widthPaddingTools) / this.bigscreenWidth
|
|
||||||
var heightScale = (this.middleHeight - this.widthPaddingTools) / this.bigscreenHeight
|
|
||||||
this.heightScale = Math.min(widthScale, heightScale)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
Reference in New Issue
Block a user