From 8252fca39f5ca6a9ac784aead29e3ba8b9c9aa43 Mon Sep 17 00:00:00 2001 From: aixianling Date: Wed, 9 Nov 2022 11:54:15 +0800 Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E8=AE=A1=E9=A1=B5=E9=9D=A2=E9=A9=BB?= =?UTF-8?q?=E7=95=99=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/bigscreen/designer/AppDesigner.vue | 6 +- .../bigscreen/designer/components/Add.vue | 165 +++++++----------- .../bigscreen/designer/components/Layout.vue | 55 +++--- 3 files changed, 92 insertions(+), 134 deletions(-) diff --git a/packages/bigscreen/designer/AppDesigner.vue b/packages/bigscreen/designer/AppDesigner.vue index 983ec699..55f9920b 100644 --- a/packages/bigscreen/designer/AppDesigner.vue +++ b/packages/bigscreen/designer/AppDesigner.vue @@ -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 [ diff --git a/packages/bigscreen/designer/components/Add.vue b/packages/bigscreen/designer/components/Add.vue index 2432e32c..e4d2d788 100644 --- a/packages/bigscreen/designer/components/Add.vue +++ b/packages/bigscreen/designer/components/Add.vue @@ -27,7 +27,7 @@ - - @@ -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 } }, diff --git a/packages/bigscreen/designer/components/Layout.vue b/packages/bigscreen/designer/components/Layout.vue index f9cc3d31..310f0fbf 100644 --- a/packages/bigscreen/designer/components/Layout.vue +++ b/packages/bigscreen/designer/components/Layout.vue @@ -8,7 +8,7 @@
素材 - 退出 + 退出 保存
@@ -60,7 +60,7 @@ width: bigscreenWidth + 'px', height: bigscreenHeight + 'px' }"> - +
{{ item.left }}, {{ item.top }}
- + @@ -242,7 +242,6 @@ ref="dataConfig" :instance="instance" :dict="dict" - :urlPrefix="urlPrefix" :options="currLayout" @change="onChange('barChart')"> @@ -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) } }