kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

设计页面驻留调整

Browse Source
This commit is contained in:
aixianling
2022-11-09 11:54:15 +08:00
parent c48d86ee42
commit 8252fca39f
3 changed files with 92 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/bigscreen/designer/AppDesigner.vue
View File

@@ -9,11 +9,12 @@ import List from './components/List.vue'
import Add from './components/Add'
import SourceData from './components/SourceData'
import Preview from "./components/preview";
import DesignDashboard from "./components/Layout";
export default {
name: 'AppDesigner',
label: '大屏设计',
components: {Preview, List, Add, SourceData},
components: {DesignDashboard, Preview, List, Add, SourceData},
props: {
instance: Function,
dict: Object,
@@ -29,7 +30,8 @@ export default {
const {hash} = this.$route
return hash == "#sourceData" ? SourceData :
hash == "#add" ? Add :
hash == "#preview" ? Preview : List
hash == "#preview" ? Preview :
hash == "#design" ? DesignDashboard : List
},
tabs() {
return [

165
packages/bigscreen/designer/components/Add.vue
View File

@@ -27,7 +27,7 @@
</ai-card>
<ai-card title="大屏">
<template #right>
<el-button @click="add('')" type="primary">添加大屏</el-button>
<el-button @click="gotoDesign()" type="primary">添加大屏</el-button>
<el-button @click="dialog=true" type="primary">定制大屏</el-button>
</template>
<template #content>
@@ -62,16 +62,6 @@
</template>
</ai-card>
</el-form>
<Layout
v-if="isShowLayout"
:instance="instance"
:dict="dict"
:params="query"
@change="onChange"
:urlPrefix="urlPrefix"
:theme="config.theme"
@close="isShowLayout = false">
</Layout>
<ai-dialog :visible.sync="dialog" title="定制大屏" @closed="custom={}" @onConfirm="handleCustomizedDV">
<el-form ref="CustomDVFrom" size="small" :model="custom" :rules="rules" label-width="80px">
<el-form-item label="大屏标题" prop="title">
@@ -110,7 +100,6 @@ export default {
components: {
Layout
},
data() {
return {
info: {},
@@ -130,7 +119,6 @@ export default {
{prop: 'id', label: 'ID'}
],
tableData: [],
isShowLayout: false,
id: '',
dialog: false,
custom: {},
@@ -143,36 +131,32 @@ export default {
}
}
},
created() {
this.dict.load('customizedDVs')
this.getInfo()
this.getInfo().then(() => this.$route.params?.id && this.onChange(this.$route.params))
},
methods: {
getInfo() {
let {id} = this.$route.query
if (!id) return
this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryLargeScreenProjectDetailById?id=${id}`).then(res => {
if (res?.data) {
this.form = {
...res.data
}
if (res.data.relationLsIds) {
this.tableData = res.data.lsList.map(v => {
let conf = JSON.parse(v.config || '') || {}
return {
id: v.id,
title: v.title,
dv: conf.custom || '',
meta: JSON.stringify(conf.meta),
isCustom: !!conf.custom,
status: v.status
}
})
this.total = res.data.lsList.length
methods: {
getInfo() {
let {id} = this.$route.query
if (!id) return Promise.reject()
return this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryLargeScreenProjectDetailById?id=${id}`).then(res => {
if (res?.data) {
this.form = {
...res.data
}
if (res.data.relationLsIds) {
this.tableData = res.data.lsList.map(v => {
let conf = JSON.parse(v.config || '') || {}
return {
id: v.id,
title: v.title,
dv: conf.custom || '',
meta: JSON.stringify(conf.meta),
isCustom: !!conf.custom,
status: v.status
}
})
this.total = res.data.lsList.length
this.$nextTick(() => {
this.rowDrop()
})
@@ -180,15 +164,13 @@ export default {
}
})
},
onStatusChange (id) {
this.instance.post(`${this.urlPrefix}/appdiylargescreen/enableLargeScreen?id=${id}`).then(res => {
if (res.code === 0) {
this.$message.success('操作成功')
}
})
},
onStatusChange(id) {
this.instance.post(`${this.urlPrefix}/appdiylargescreen/enableLargeScreen?id=${id}`).then(res => {
if (res.code === 0) {
this.$message.success('操作成功')
}
})
},
rowDrop() {
const tbody = document.querySelector('.el-table__body-wrapper tbody')
const _this = this
@@ -199,61 +181,46 @@ export default {
}
})
},
toViewer(id) {
this.$router.push({query: {id}, hash: "#preview"})
},
onChange(e) {
const ids = this.tableData.map(v => v.id)
if (ids.indexOf(e.id) < 0) {
this.tableData.push({
title: e.title,
id: e.id,
status: '1'
})
} else {
const index = this.tableData.findIndex(v => v.id === e.id)
this.$set(this.tableData[index], 'title', e.title)
}
this.$nextTick(() => {
if (this.$route.query.id) {
const ids = this.tableData.map(v => v.id).join(',')
const names = this.tableData.map(v => v.name).join(',')
this.instance.post(`${this.urlPrefix}/appdiylargescreen/addOrUpdateLargeScreenProject`, {
...this.form,
relationLsIds: ids,
relationLsNames: names
}).then(res => {
if (res.code == 0) {
}
})
}
})
},
add() {
this.query = {
id: '',
name: this.form.name
}
this.isShowLayout = true
toViewer(id) {
this.$router.push({query: {id}, hash: "#preview"})
},
onChange(e) {
const ids = this.tableData.map(v => v.id)
if (ids.indexOf(e.id) < 0) {
this.tableData.push({
title: e.title,
id: e.id,
status: '1'
})
} else {
const index = this.tableData.findIndex(v => v.id === e.id)
this.$set(this.tableData[index], 'title', e.title)
}
this.$nextTick(() => {
if (this.$route.query.id) {
const ids = this.tableData.map(v => v.id).join(',')
const names = this.tableData.map(v => v.name).join(',')
this.instance.post(`${this.urlPrefix}/appdiylargescreen/addOrUpdateLargeScreenProject`, {
...this.form,
relationLsIds: ids,
relationLsNames: names
}).then(res => {
if (res.code == 0) {
}
})
}
})
},
gotoDesign(did) {
const {id} = this.$route.query
this.$router.push({hash: "#design", query: {id, did, name: this.form.name}})
},
toEdit(id, isCustom, form) {
if (!isCustom) {
this.query = {
id,
name: this.form.name
}
this.isShowLayout = true
this.gotoDesign(id)
} else {
this.dialog = true
this.custom = {
...form,
}
this.custom = form
}
},

55
packages/bigscreen/designer/components/Layout.vue
View File

@@ -8,7 +8,7 @@
</div>
<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>
</div>
</div>
@@ -60,7 +60,7 @@
width: bigscreenWidth + 'px',
height: bigscreenHeight + 'px'
}">
<ai-dv-wrapper style="height: 100%" :title="params.name" :theme="dashboard.theme">
<ai-dv-wrapper style="height: 100%" :title="$route.query.name" :theme="dashboard.theme">
<div style="width: 100%; height: 100%">
<AiDvBackground
:theme="dashboard.theme"
@@ -91,7 +91,7 @@
<div class="coordinate-top"></div>
<div class="coordinate-label">{{ item.left }}, {{ item.top }}</div>
</div>
<ai-dv-render :data="item" :theme="dashboard.theme" :index="index" :instance="instance" />
<ai-dv-render :data="item" :theme="dashboard.theme" :index="index" :instance="instance"/>
</vue-draggable-resizable>
</div>
</ai-dv-wrapper>
@@ -242,7 +242,6 @@
ref="dataConfig"
:instance="instance"
:dict="dict"
:urlPrefix="urlPrefix"
:options="currLayout"
@change="onChange('barChart')">
</data-config>
@@ -355,13 +354,11 @@ import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
import DataConfig from './form/DataConfig.vue'
export default {
name: "designDashboard",
props: {
instance: Function,
dict: Object,
params: Object,
urlPrefix: String
},
data() {
return {
colConfigs: [
@@ -440,9 +437,7 @@ export default {
},
mounted() {
if (this.params && this.params.id) {
this.getInfo(this.params.id)
}
this.getInfo(this.$route.query.did)
this.$nextTick(() => {
this.middleWidth = document.querySelector('.layout-wrapper').offsetWidth - 670
this.middleHeight = document.querySelector('.layout-wrapper').offsetHeight
@@ -451,15 +446,6 @@ export default {
},
methods: {
bindEvent() {
this.middleWidth = document.querySelector('.layout-wrapper').offsetWidth - 670
this.middleHeight = document.querySelector('.layout-wrapper').offsetHeight
this.$nextTick(() => {
this.initCanvas()
})
},
copy(link) {
let oInput = document.createElement('input')
oInput.value = link
@@ -506,7 +492,7 @@ export default {
},
getInfo(id) {
this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => {
id && this.instance.post(`/app/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => {
if (res.code === 0) {
const data = JSON.parse(res.data.config)
this.componentList = data.config
@@ -516,29 +502,32 @@ export default {
})
},
back() {
this.$emit('close')
back(params) {
if (!!params) {
const {id} = this.$route.query
this.$router.push({hash: "#add", params, query: {id}})
} else {
this.$router.back()
}
},
save() {
this.instance.post(`${this.urlPrefix}/appdiylargescreen/addOrUpdateLargeScreen`, {
const {did: id} = this.$route.query, {dashboard} = this
this.instance.post(`/app/appdiylargescreen/addOrUpdateLargeScreen`, {
id,
config: JSON.stringify({
config: this.componentList,
dashboard: this.dashboard,
dashboard,
images: this.images
}),
status: 1,
title: this.dashboard.title,
id: this.params.id || ''
title: dashboard.title,
}).then(res => {
if (res.code == 0) {
if (res?.code == 0) {
this.$message.success('保存成功')
this.$emit('change', res.data)
this.back()
this.back(res.data)
}
})
},
clone(e) {
this.componentList.push(this.deepClone(e))
},
@@ -617,8 +606,8 @@ export default {
},
initCanvas() {
var widthScale = (this.middleWidth - this.widthPaddingTools) / this.bigscreenWidth
var heightScale = (this.middleHeight - this.widthPaddingTools) / this.bigscreenHeight
let widthScale = (this.middleWidth - this.widthPaddingTools) / this.bigscreenWidth
let heightScale = (this.middleHeight - this.widthPaddingTools) / this.bigscreenHeight
this.heightScale = Math.min(widthScale, heightScale)
}
}