大屏设计新增图片素材管理
This commit is contained in:
yanran200730
@@ -7,6 +7,7 @@
|
||||
<h2>{{ dashboard.title }}</h2>
|
||||
</div>
|
||||
<div class="layout-header__right">
|
||||
<span type="text" @click="isShowImg = true">图片素材</span>
|
||||
<span type="text" @click="back">退出</span>
|
||||
<span type="text" @click="save">保存</span>
|
||||
</div>
|
||||
@@ -266,9 +267,9 @@
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="layout-menu"
|
||||
v-if="activeIndex > -1 && isShowMenu"
|
||||
:style="{top: menuY + 'px', left: menuX + 'px'}">
|
||||
class="layout-menu"
|
||||
v-if="activeIndex > -1 && isShowMenu"
|
||||
:style="{top: menuY + 'px', left: menuX + 'px'}">
|
||||
<div class="layout-menu__item" @click="removeLayer">
|
||||
<span>删除图层</span>
|
||||
</div>
|
||||
@@ -282,246 +283,320 @@
|
||||
<span>置底图层</span>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { components } from '../config'
|
||||
import VueRulerTool from 'vue-ruler-tool'
|
||||
import VueDraggableResizable from 'vue-draggable-resizable'
|
||||
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
|
||||
import DataConfig from './form/DataConfig.vue'
|
||||
import RenderElement from './RenderElement'
|
||||
import { components } from '../config'
|
||||
import VueRulerTool from 'vue-ruler-tool'
|
||||
import VueDraggableResizable from 'vue-draggable-resizable'
|
||||
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
|
||||
import DataConfig from './form/DataConfig.vue'
|
||||
import RenderElement from './RenderElement'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
params: Object,
|
||||
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})`
|
||||
export default {
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
params: Object,
|
||||
urlPrefix: String
|
||||
},
|
||||
|
||||
currLayout() {
|
||||
if (this.activeIndex === -1) return {}
|
||||
|
||||
return this.componentList[this.activeIndex]
|
||||
},
|
||||
|
||||
widget() {
|
||||
if (this.components.length && this.components[this.parentIndex].list.length) {
|
||||
return this.components[this.parentIndex].list[this.subIndex].list
|
||||
data() {
|
||||
return {
|
||||
colConfigs: [
|
||||
// { prop: 'url', label: '图片链接', showOverflowTooltip: false },
|
||||
{ slot: 'img', label: '图片' }
|
||||
],
|
||||
form: {
|
||||
images: []
|
||||
},
|
||||
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() {
|
||||
if (this.params && this.params.id) {
|
||||
this.getInfo(this.params.id)
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.middleWidth = document.querySelector('.layout-wrapper').offsetWidth - 670
|
||||
this.middleHeight = document.querySelector('.layout-wrapper').offsetHeight
|
||||
this.initCanvas()
|
||||
})
|
||||
},
|
||||
currLayout() {
|
||||
if (this.activeIndex === -1) return {}
|
||||
|
||||
methods: {
|
||||
bindEvent() {
|
||||
this.middleWidth = document.querySelector('.layout-wrapper').offsetWidth - 670
|
||||
this.middleHeight = document.querySelector('.layout-wrapper').offsetHeight
|
||||
return this.componentList[this.activeIndex]
|
||||
},
|
||||
|
||||
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.middleWidth = document.querySelector('.layout-wrapper').offsetWidth - 670
|
||||
this.middleHeight = document.querySelector('.layout-wrapper').offsetHeight
|
||||
this.initCanvas()
|
||||
})
|
||||
},
|
||||
|
||||
setTop() {
|
||||
const maxZindex = Math.max.apply(Math, this.componentList.map(item => {
|
||||
return item.zIndex
|
||||
}))
|
||||
methods: {
|
||||
bindEvent() {
|
||||
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() {
|
||||
const item = this.componentList[this.activeIndex]
|
||||
this.componentList.splice(this.activeIndex, 1)
|
||||
this.componentList.unshift(item)
|
||||
},
|
||||
copy (link) {
|
||||
let oInput = document.createElement('input')
|
||||
oInput.value = link
|
||||
document.body.appendChild(oInput)
|
||||
oInput.select()
|
||||
document.execCommand('Copy')
|
||||
this.$message({
|
||||
message: '已复制',
|
||||
type: 'success'
|
||||
})
|
||||
oInput.remove()
|
||||
},
|
||||
|
||||
getInfo(id) {
|
||||
this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.componentList = JSON.parse(res.data.config).config
|
||||
this.dashboard = JSON.parse(res.data.config).dashboard
|
||||
removeImg (index) {
|
||||
this.images.splice(index, 1)
|
||||
},
|
||||
|
||||
onImageConfirm () {
|
||||
if (!this.form.images.length) {
|
||||
return this.$message.error('请上传图片')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
back() {
|
||||
this.$emit('close')
|
||||
},
|
||||
this.images.push(this.form.images)
|
||||
this.form.images = []
|
||||
this.isShowAddImg = false
|
||||
},
|
||||
|
||||
save() {
|
||||
this.instance.post(`${this.urlPrefix}/appdiylargescreen/addOrUpdateLargeScreen`, {
|
||||
config: JSON.stringify({
|
||||
config: this.componentList,
|
||||
dashboard: this.dashboard
|
||||
}),
|
||||
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()
|
||||
setTop() {
|
||||
const maxZindex = Math.max.apply(Math, this.componentList.map(item => {
|
||||
return item.zIndex
|
||||
}))
|
||||
|
||||
this.$set(this.componentList[this.activeIndex], 'zIndex', maxZindex + 1)
|
||||
},
|
||||
|
||||
setBottom() {
|
||||
const item = this.componentList[this.activeIndex]
|
||||
this.componentList.splice(this.activeIndex, 1)
|
||||
this.componentList.unshift(item)
|
||||
},
|
||||
|
||||
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) {
|
||||
this.componentList.push(this.deepClone(e))
|
||||
},
|
||||
|
||||
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)
|
||||
deepClone(data, hash = new WeakMap()) {
|
||||
if (typeof data !== 'object' || data === null) {
|
||||
throw new TypeError('传入参数不是对象')
|
||||
}
|
||||
})
|
||||
return newData
|
||||
},
|
||||
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)
|
||||
}
|
||||
})
|
||||
return newData
|
||||
},
|
||||
|
||||
onContextmenu(e, index) {
|
||||
this.menuX = e.clientX + 10
|
||||
this.menuY = e.clientY + 10
|
||||
this.activeIndex = index
|
||||
this.isShowMenu = true
|
||||
onContextmenu(e, index) {
|
||||
this.menuX = e.clientX + 10
|
||||
this.menuY = e.clientY + 10
|
||||
this.activeIndex = index
|
||||
this.isShowMenu = true
|
||||
|
||||
e.preventDefault()
|
||||
},
|
||||
e.preventDefault()
|
||||
},
|
||||
|
||||
copyLayer() {
|
||||
const layer = this.deepClone(this.componentList[this.activeIndex])
|
||||
this.componentList.push(layer)
|
||||
},
|
||||
copyLayer() {
|
||||
const layer = this.deepClone(this.componentList[this.activeIndex])
|
||||
this.componentList.push(layer)
|
||||
},
|
||||
|
||||
removeLayer() {
|
||||
this.componentList.splice(this.activeIndex, 1)
|
||||
this.activeIndex = -1
|
||||
},
|
||||
removeLayer() {
|
||||
this.componentList.splice(this.activeIndex, 1)
|
||||
this.activeIndex = -1
|
||||
},
|
||||
|
||||
onActivated(index) {
|
||||
this.activeIndex = index
|
||||
},
|
||||
onActivated(index) {
|
||||
this.activeIndex = index
|
||||
},
|
||||
|
||||
|
||||
onDrag(x, y, index) {
|
||||
this.$set(this.componentList[index], 'left', x)
|
||||
this.$set(this.componentList[index], 'top', y)
|
||||
},
|
||||
onDrag(x, y, index) {
|
||||
this.$set(this.componentList[index], 'left', x)
|
||||
this.$set(this.componentList[index], 'top', y)
|
||||
},
|
||||
|
||||
onResizing(x, y, w, h, index, type) {
|
||||
this.$set(this.componentList[index], 'left', x)
|
||||
this.$set(this.componentList[index], 'top', y)
|
||||
this.$set(this.componentList[index], 'width', w)
|
||||
this.$set(this.componentList[index], 'height', h)
|
||||
onResizing(x, y, w, h, index, type) {
|
||||
this.$set(this.componentList[index], 'left', x)
|
||||
this.$set(this.componentList[index], 'top', y)
|
||||
this.$set(this.componentList[index], 'width', w)
|
||||
this.$set(this.componentList[index], 'height', h)
|
||||
|
||||
if (type.indexOf('Chart') > -1) {
|
||||
this.$refs[`chart${index}`][0].watchResize()
|
||||
if (type.indexOf('Chart') > -1) {
|
||||
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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Reference in New Issue
Block a user