|
|
|
|
@ -14,17 +14,17 @@
|
|
|
|
|
<el-card shadow="never" style="border-radius: 6px;margin-top: 12px">
|
|
|
|
|
<el-button type="primary" @click="addSceneBtnClick">新增</el-button>
|
|
|
|
|
<el-table
|
|
|
|
|
v-loading="load"
|
|
|
|
|
:data="sceneList"
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
v-loading="load"
|
|
|
|
|
:data="sceneList"
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
>
|
|
|
|
|
<el-table-column
|
|
|
|
|
v-if="false"
|
|
|
|
|
prop="achieveId">
|
|
|
|
|
v-if="false"
|
|
|
|
|
prop="achieveId">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="achieveName"
|
|
|
|
|
label="名称">
|
|
|
|
|
prop="achieveName"
|
|
|
|
|
label="名称">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- <el-table-column-->
|
|
|
|
|
<!-- prop="templateName"-->
|
|
|
|
|
@ -40,19 +40,19 @@
|
|
|
|
|
<!-- </template>-->
|
|
|
|
|
<!-- </el-table-column>-->
|
|
|
|
|
<el-table-column
|
|
|
|
|
fixed="right"
|
|
|
|
|
label="操作"
|
|
|
|
|
width="260">
|
|
|
|
|
fixed="right"
|
|
|
|
|
label="操作"
|
|
|
|
|
width="260">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-button @click="viewDetails(scope.row)" type="text" size="small" style="padding: 0 4px">全屏查看
|
|
|
|
|
<el-button @click="viewDetails(scope.row)" type="text" size="small" style="padding: 0 4px">预览
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button @click="querySceneInfo(scope.row)" type="text" size="small" style="padding: 0 4px">修改模版
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button @click="bindComponents(scope.row)" type="text" size="small" style="padding: 0 4px">绑定组件
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-popconfirm
|
|
|
|
|
title="确定删除吗？"
|
|
|
|
|
@confirm="delSceneOk(scope.row.achieveId)">
|
|
|
|
|
title="确定删除吗？"
|
|
|
|
|
@confirm="delSceneOk(scope.row.achieveId)">
|
|
|
|
|
<el-button slot="reference" type="text" size="small" style="padding: 0 4px">删除</el-button>
|
|
|
|
|
</el-popconfirm>
|
|
|
|
|
</template>
|
|
|
|
|
@ -60,22 +60,22 @@
|
|
|
|
|
</el-table>
|
|
|
|
|
<div style="margin-top: 12px">
|
|
|
|
|
<el-pagination
|
|
|
|
|
style="display: flex;justify-content: flex-end;"
|
|
|
|
|
@size-change="getList"
|
|
|
|
|
@current-change="getList"
|
|
|
|
|
:current-page.sync="queryForm.pageNum"
|
|
|
|
|
:page-sizes="[10,20,50,100]"
|
|
|
|
|
:page-size="queryForm.pageSize"
|
|
|
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
|
|
|
:total="total">
|
|
|
|
|
style="display: flex;justify-content: flex-end;"
|
|
|
|
|
@size-change="getList"
|
|
|
|
|
@current-change="getList"
|
|
|
|
|
:current-page.sync="queryForm.pageNum"
|
|
|
|
|
:page-sizes="[10,20,50,100]"
|
|
|
|
|
:page-size="queryForm.pageSize"
|
|
|
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
|
|
|
:total="total">
|
|
|
|
|
</el-pagination>
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
|
|
|
|
|
<el-dialog
|
|
|
|
|
:title="sceneDialogTitle"
|
|
|
|
|
:visible.sync="addSceneDialogVisible"
|
|
|
|
|
width="30%">
|
|
|
|
|
:title="sceneDialogTitle"
|
|
|
|
|
:visible.sync="addSceneDialogVisible"
|
|
|
|
|
width="30%">
|
|
|
|
|
<el-form ref="form" :model="sceneForm" label-width="80px">
|
|
|
|
|
<el-form-item label="场景名称">
|
|
|
|
|
<el-input v-model="sceneForm.achieveName"></el-input>
|
|
|
|
|
@ -85,7 +85,8 @@
|
|
|
|
|
<div class="useModel" v-if="!sceneForm.achieveContent.center">
|
|
|
|
|
<i class="el-icon-plus"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="layout" ref="layout" v-if="sceneForm.achieveContent.center">
|
|
|
|
|
<div class="layout" ref="layout" v-if="sceneForm.achieveContent.center"
|
|
|
|
|
:style="`background-image:url(${(sceneForm.achieveContent.pageCfg||{}).bg})`">
|
|
|
|
|
<component style="pointer-events: none" :is="sceneForm.achieveContent.center"
|
|
|
|
|
:tree="sceneForm.achieveContent.centerChildren"></component>
|
|
|
|
|
</div>
|
|
|
|
|
@ -100,12 +101,13 @@
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
|
|
<el-dialog
|
|
|
|
|
title="选择模版"
|
|
|
|
|
:visible.sync="selectModelDialogVisible"
|
|
|
|
|
width="700px">
|
|
|
|
|
title="选择模版"
|
|
|
|
|
:visible.sync="selectModelDialogVisible"
|
|
|
|
|
width="700px">
|
|
|
|
|
|
|
|
|
|
<div class="modelListItem" v-for="i in modelList" @click="useModel(i)">
|
|
|
|
|
<div class="modelListItemContent">
|
|
|
|
|
<div class="modelListItemContent"
|
|
|
|
|
:style="`background-image:url(${(JSON.parse(i.templateContent).pageCfg||{}).bg})`">
|
|
|
|
|
<component style="pointer-events: none;" :is="JSON.parse(i.templateContent).center"
|
|
|
|
|
:tree="JSON.parse(i.templateContent).centerChildren"></component>
|
|
|
|
|
</div>
|
|
|
|
|
@ -122,15 +124,15 @@
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<el-pagination
|
|
|
|
|
hide-on-single-page
|
|
|
|
|
style="display: flex;justify-content: center;"
|
|
|
|
|
@size-change="getModelList"
|
|
|
|
|
@current-change="getModelList"
|
|
|
|
|
:current-page.sync="modelPagination.pageNum"
|
|
|
|
|
:page-sizes="[10,20,50,100]"
|
|
|
|
|
:page-size="modelPagination.pageSize"
|
|
|
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
|
|
|
:total="total">
|
|
|
|
|
hide-on-single-page
|
|
|
|
|
style="display: flex;justify-content: center;"
|
|
|
|
|
@size-change="getModelList"
|
|
|
|
|
@current-change="getModelList"
|
|
|
|
|
:current-page.sync="modelPagination.pageNum"
|
|
|
|
|
:page-sizes="[10,20,50,100]"
|
|
|
|
|
:page-size="modelPagination.pageSize"
|
|
|
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
|
|
|
:total="total">
|
|
|
|
|
</el-pagination>
|
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
|
|
<el-button @click="selectModelDialogVisible = false">取 消</el-button>
|
|
|
|
|
@ -139,10 +141,10 @@
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
|
|
<el-dialog
|
|
|
|
|
title="绑定组件"
|
|
|
|
|
:visible.sync="bindComponentsDialogVisible"
|
|
|
|
|
fullscreen
|
|
|
|
|
width="600px">
|
|
|
|
|
title="绑定组件"
|
|
|
|
|
:visible.sync="bindComponentsDialogVisible"
|
|
|
|
|
fullscreen
|
|
|
|
|
width="600px">
|
|
|
|
|
<div slot="title">
|
|
|
|
|
<span>
|
|
|
|
|
绑定组件
|
|
|
|
|
@ -169,6 +171,7 @@
|
|
|
|
|
<el-radio-group v-model="pageCfg.sizeType">
|
|
|
|
|
<el-radio :label="1">固定宽高</el-radio>
|
|
|
|
|
<el-radio :label="2">固定比例</el-radio>
|
|
|
|
|
<el-radio :label="3">撑满容器</el-radio>
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="页面大小" label-width="120px" v-if="pageCfg.sizeType">
|
|
|
|
|
@ -183,13 +186,13 @@
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="画布背景" label-width="120px">
|
|
|
|
|
<el-upload
|
|
|
|
|
class="avatar-uploader"
|
|
|
|
|
action="dev-api/basic/hwTemplateAchieve/saveImage"
|
|
|
|
|
:headers="{
|
|
|
|
|
class="avatar-uploader"
|
|
|
|
|
action="dev-api/basic/hwTemplateAchieve/saveImage"
|
|
|
|
|
:headers="{
|
|
|
|
|
authorization:'Bearer ' + getToken()
|
|
|
|
|
}"
|
|
|
|
|
:show-file-list="false"
|
|
|
|
|
:on-success="getImg">
|
|
|
|
|
:show-file-list="false"
|
|
|
|
|
:on-success="getImg">
|
|
|
|
|
<img v-if="pageCfg.bg" :src="pageCfg.bg" class="avatar">
|
|
|
|
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
|
|
</el-upload>
|
|
|
|
|
@ -207,39 +210,41 @@
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="基准颜色">
|
|
|
|
|
<el-tag
|
|
|
|
|
:key="tag"
|
|
|
|
|
v-for="(tag,k) in (pageCfg.styleData||{}).colors"
|
|
|
|
|
closable
|
|
|
|
|
:disable-transitions="false"
|
|
|
|
|
@close="colorsClose(tag)">
|
|
|
|
|
<el-color-picker show-alpha v-model="colors[k]" size="mini" @change="colorsChange($event,k)"></el-color-picker>
|
|
|
|
|
:key="tag"
|
|
|
|
|
v-for="(tag,k) in (pageCfg.styleData||{}).colors"
|
|
|
|
|
closable
|
|
|
|
|
:disable-transitions="false"
|
|
|
|
|
@close="colorsClose(tag)">
|
|
|
|
|
<el-color-picker show-alpha v-model="colors[k]" size="mini"
|
|
|
|
|
@change="colorsChange($event,k)"></el-color-picker>
|
|
|
|
|
</el-tag>
|
|
|
|
|
<el-color-picker show-alpha
|
|
|
|
|
class="input-new-tag"
|
|
|
|
|
v-if="inputVisible"
|
|
|
|
|
v-model="inputValue"
|
|
|
|
|
ref="saveTagInput"
|
|
|
|
|
size="small"
|
|
|
|
|
@change="colorsInputConfirm"></el-color-picker>
|
|
|
|
|
class="input-new-tag"
|
|
|
|
|
v-if="inputVisible"
|
|
|
|
|
v-model="inputValue"
|
|
|
|
|
ref="saveTagInput"
|
|
|
|
|
size="small"
|
|
|
|
|
@change="colorsInputConfirm"></el-color-picker>
|
|
|
|
|
<el-button v-else class="button-new-tag" size="small" @click="showInput">添加颜色</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="颜色库">
|
|
|
|
|
<el-tag
|
|
|
|
|
:key="tag"
|
|
|
|
|
v-for="(tag,k) in (pageCfg.styleData||{}).colors1"
|
|
|
|
|
closable
|
|
|
|
|
:disable-transitions="false"
|
|
|
|
|
@close="colorsClose1(tag)">
|
|
|
|
|
<el-color-picker show-alpha v-model="colors1[k]" size="mini" @change="colorsChange1($event,k)"></el-color-picker>
|
|
|
|
|
:key="tag"
|
|
|
|
|
v-for="(tag,k) in (pageCfg.styleData||{}).colors1"
|
|
|
|
|
closable
|
|
|
|
|
:disable-transitions="false"
|
|
|
|
|
@close="colorsClose1(tag)">
|
|
|
|
|
<el-color-picker show-alpha v-model="colors1[k]" size="mini"
|
|
|
|
|
@change="colorsChange1($event,k)"></el-color-picker>
|
|
|
|
|
</el-tag>
|
|
|
|
|
<el-color-picker show-alpha
|
|
|
|
|
class="input-new-tag"
|
|
|
|
|
v-if="inputVisible1"
|
|
|
|
|
v-model="inputValue1"
|
|
|
|
|
ref="saveTagInput1"
|
|
|
|
|
size="small"
|
|
|
|
|
@change="colorsInputConfirm1"></el-color-picker>
|
|
|
|
|
class="input-new-tag"
|
|
|
|
|
v-if="inputVisible1"
|
|
|
|
|
v-model="inputValue1"
|
|
|
|
|
ref="saveTagInput1"
|
|
|
|
|
size="small"
|
|
|
|
|
@change="colorsInputConfirm1"></el-color-picker>
|
|
|
|
|
<el-button v-else class="button-new-tag" size="small" @click="showInput1">添加颜色</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
@ -296,9 +301,9 @@ export default {
|
|
|
|
|
pageCfgDialogVisible: false,
|
|
|
|
|
pageCfg: {
|
|
|
|
|
styleData: {
|
|
|
|
|
colors:[],
|
|
|
|
|
colors1:[],
|
|
|
|
|
region:''
|
|
|
|
|
colors: [],
|
|
|
|
|
colors1: [],
|
|
|
|
|
region: ''
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
colors: [],
|
|
|
|
|
@ -332,7 +337,7 @@ export default {
|
|
|
|
|
colorsInputConfirm() {
|
|
|
|
|
let inputValue = this.inputValue;
|
|
|
|
|
if (inputValue) {
|
|
|
|
|
this.$detectingNullValues(this.pageCfg, ['styleData', 'colors',0])
|
|
|
|
|
this.$detectingNullValues(this.pageCfg, ['styleData', 'colors', 0])
|
|
|
|
|
this.pageCfg.styleData.colors.push(inputValue);
|
|
|
|
|
this.colors.push(inputValue);
|
|
|
|
|
}
|
|
|
|
|
@ -342,7 +347,7 @@ export default {
|
|
|
|
|
colorsInputConfirm1() {
|
|
|
|
|
let inputValue = this.inputValue1;
|
|
|
|
|
if (inputValue) {
|
|
|
|
|
this.$detectingNullValues(this.pageCfg, ['styleData', 'colors1',0])
|
|
|
|
|
this.$detectingNullValues(this.pageCfg, ['styleData', 'colors1', 0])
|
|
|
|
|
this.pageCfg.styleData.colors1.push(inputValue);
|
|
|
|
|
this.colors1.push(inputValue);
|
|
|
|
|
}
|
|
|
|
|
@ -453,17 +458,18 @@ export default {
|
|
|
|
|
...e,
|
|
|
|
|
sceneData: JSON.parse(e.achieveContent)
|
|
|
|
|
}
|
|
|
|
|
this.pageCfg = this.bindComponentsData.sceneData.pageCfg || {}
|
|
|
|
|
if (!this.pageCfg.styleData?.colors) {
|
|
|
|
|
this.$set(this.pageCfg.styleData, 'colors', [])
|
|
|
|
|
}
|
|
|
|
|
if (!this.pageCfg.styleData?.colors1) {
|
|
|
|
|
this.$set(this.pageCfg.styleData, 'colors1', [])
|
|
|
|
|
}
|
|
|
|
|
if (!this.pageCfg.styleData?.region) {
|
|
|
|
|
this.$set(this.pageCfg.styleData, 'region', '')
|
|
|
|
|
}
|
|
|
|
|
console.log('csssss', JSON.parse(e.achieveContent))
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.pageCfg = this.bindComponentsData.sceneData.pageCfg || {}
|
|
|
|
|
if (!this.pageCfg.styleData?.colors) {
|
|
|
|
|
this.$set(this.pageCfg.styleData, 'colors', [])
|
|
|
|
|
}
|
|
|
|
|
if (!this.pageCfg.styleData?.colors1) {
|
|
|
|
|
this.$set(this.pageCfg.styleData, 'colors1', [])
|
|
|
|
|
}
|
|
|
|
|
if (!this.pageCfg.styleData?.region) {
|
|
|
|
|
this.$set(this.pageCfg.styleData, 'region', '')
|
|
|
|
|
}
|
|
|
|
|
this.colors = JSON.parse(JSON.stringify(this.pageCfg.styleData.colors || '[]'))
|
|
|
|
|
this.colors1 = JSON.parse(JSON.stringify(this.pageCfg.styleData.colors1 || '[]'))
|
|
|
|
|
|
|
|
|
|
@ -490,6 +496,12 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (this.pageCfg.sizeType === 3) {
|
|
|
|
|
this.pageData = {
|
|
|
|
|
width: null,
|
|
|
|
|
height: null,
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
bindComponentsOk() {
|
|
|
|
|
@ -533,6 +545,12 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (this.pageCfg.sizeType === 3) {
|
|
|
|
|
this.pageData = {
|
|
|
|
|
width: null,
|
|
|
|
|
height: null,
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
this.bindComponentsData.sceneData.pageCfg = this.pageCfg
|
|
|
|
|
this.pageCfgDialogVisible = false
|
|
|
|
|
},
|
|
|
|
|
@ -540,7 +558,7 @@ export default {
|
|
|
|
|
this.$set(this.pageCfg, 'bg', file.data.url.replaceAll('127.0.0.1', '10.11.40.122'))
|
|
|
|
|
},
|
|
|
|
|
viewDetails(e) {
|
|
|
|
|
this.$router.push({path: '/board/sceneView', query: {achieveId: e.achieveId}})
|
|
|
|
|
this.$router.push({path: '/sceneView', query: {achieveId: e.achieveId}})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -580,6 +598,8 @@ export default {
|
|
|
|
|
.layout {
|
|
|
|
|
height: 500px;
|
|
|
|
|
border: 1px solid #0003;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.miniLayout {
|
|
|
|
|
@ -617,6 +637,8 @@ export default {
|
|
|
|
|
height: 200px;
|
|
|
|
|
border: 1px solid #0003;
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.modelListItemName {
|
|
|
|
|
@ -638,12 +660,15 @@ export default {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: calc(100vh - 70px - 70px - 60px - 6px);
|
|
|
|
|
position: relative;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
|
|
|
|
|
.scene {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
left: 0%;
|
|
|
|
|
top: 0%;
|
|
|
|
|
//left: 50%;
|
|
|
|
|
//top: 50%;
|
|
|
|
|
//transform: translate(-50%, -50%);
|
|
|
|
|
border: 1px solid #0003;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
夜笙歌
2 weeks ago