|  |  |  | 
|---|
|  |  |  | .drawer { | 
|---|
|  |  |  | overflow: scroll; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .assembly-style .el-form-item__content{ | 
|---|
|  |  |  | margin-left: 0px !important; | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .assembly-style .el-input{ | 
|---|
|  |  |  | width: 100px !important; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .assembly-style i{ | 
|---|
|  |  |  | font-size: 30px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .assembly-style .active{ | 
|---|
|  |  |  | color: #409eff; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .module-property{ | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | flex-wrap: wrap; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .module-property .el-form-item__content{ | 
|---|
|  |  |  | margin-left: 0px !important; | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .module-property .el-input{ | 
|---|
|  |  |  | width: 100px !important; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </style> | 
|---|
|  |  |  | </head> | 
|---|
|  |  |  | <body> | 
|---|
|  |  |  | 
|---|
|  |  |  | </el-col>--> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <el-form-item label="CSS样式"> | 
|---|
|  |  |  | <el-input v-model="currentNode.nodeStyleStr"></el-input> | 
|---|
|  |  |  | <!--            <el-form-item label="CSS样式">--> | 
|---|
|  |  |  | <!--                <el-input v-model="currentNode.nodeStyleStr"></el-input>--> | 
|---|
|  |  |  | <!--            </el-form-item>--> | 
|---|
|  |  |  | <el-form-item label="组件宽高" class="assembly-style"> | 
|---|
|  |  |  | <el-input v-model="zjwidth" v-on:input="widthChange"></el-input> | 
|---|
|  |  |  | <i :class="selected ? 'el-icon-link active' : 'el-icon-link'" @click="fixedProportion"></i> | 
|---|
|  |  |  | <el-input v-model="zjheight" v-on:input="heightChange"></el-input> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="节点属性"> | 
|---|
|  |  |  | <el-input v-model="currentNode.nodeAttribute"></el-input> | 
|---|
|  |  |  | <!--            <el-form-item label="节点属性">--> | 
|---|
|  |  |  | <!--                <el-input v-model="currentNode.nodeAttribute"></el-input>--> | 
|---|
|  |  |  | <!--            </el-form-item>--> | 
|---|
|  |  |  | <el-form-item label="组件属性"> | 
|---|
|  |  |  | <!--                1.图片--> | 
|---|
|  |  |  | <!--                6.滑块--> | 
|---|
|  |  |  | <!--                3.轮播图--> | 
|---|
|  |  |  | <!--                4.视频--> | 
|---|
|  |  |  | <!--                5.跑马灯文字--> | 
|---|
|  |  |  | <el-from class="module-property" > | 
|---|
|  |  |  | <el-form-item label="自动切换时间间隔(毫秒)"> | 
|---|
|  |  |  | <el-input v-model="interval"></el-input> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="前边距"> | 
|---|
|  |  |  | <el-input v-model="previousMargin"></el-input> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="后边距"> | 
|---|
|  |  |  | <el-input v-model="nextMargin"></el-input> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | </el-from> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <el-form-item label="页面组"> | 
|---|
|  |  |  | <el-input v-model="currentNode.pageCode"></el-input> | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <script> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | var id = $.query.get("id"); | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | pageList:[], | 
|---|
|  |  |  | //当前编辑页面 | 
|---|
|  |  |  | currentPage:{}, | 
|---|
|  |  |  | zjwidth:'', | 
|---|
|  |  |  | zjheight:'', | 
|---|
|  |  |  | selected:false, | 
|---|
|  |  |  | //宽高比 | 
|---|
|  |  |  | aspectRatio:'', | 
|---|
|  |  |  | interval:'', | 
|---|
|  |  |  | previousMargin:'', | 
|---|
|  |  |  | nextMargin:'', | 
|---|
|  |  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | created: function () { | 
|---|
|  |  |  | 
|---|
|  |  |  | mounted: function () { | 
|---|
|  |  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  |  | 
|---|
|  |  |  | methods: { | 
|---|
|  |  |  | widthChange(){ | 
|---|
|  |  |  | if(this.selected){ | 
|---|
|  |  |  | this.zjheight = parseInt(this.zjwidth/this.aspectRatio) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | heightChange(){ | 
|---|
|  |  |  | if(this.selected){ | 
|---|
|  |  |  | this.zjwidth = parseInt(this.zjheight*this.aspectRatio) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | getHeight() { | 
|---|
|  |  |  | this.height = window.innerHeight - 40 + 'px'; | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | 
|---|
|  |  |  | spinner: 'el-icon-loading', | 
|---|
|  |  |  | background: 'rgba(0, 0, 0, 0.7)' | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | let f = e.target.files[0]; | 
|---|
|  |  |  | let reader = new FileReader(); | 
|---|
|  |  |  | reader.onload = function (e) { | 
|---|
|  |  |  | let data = e.target.result; | 
|---|
|  |  |  | //加载图片获取图片真实宽度和高度 | 
|---|
|  |  |  | let image = new Image(); | 
|---|
|  |  |  | image.onload=function(){ | 
|---|
|  |  |  | let width = image.width; | 
|---|
|  |  |  | let height = image.height; | 
|---|
|  |  |  | _this.aspectRatio= width/height | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | image.src= data; | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | reader.readAsDataURL(f); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | uploadForImage( | 
|---|
|  |  |  | basePath + "/admin/multipleUploadFile/doUpload", | 
|---|
|  |  |  | e.target.files[0], | 
|---|
|  |  |  | function (d, result) { | 
|---|
|  |  |  |  | 
|---|
|  |  |  | _this.process = d + "%"; | 
|---|
|  |  |  | if (d == 100) { | 
|---|
|  |  |  |  | 
|---|
|  |  |  | if (result) { | 
|---|
|  |  |  | if (result.status == 200) { | 
|---|
|  |  |  |  | 
|---|
|  |  |  | loading.close(); | 
|---|
|  |  |  | _this.currentNode.ads[index].imgUrl = result.path; | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  |  | 
|---|
|  |  |  | clickNode(node) { | 
|---|
|  |  |  | console.log(node) | 
|---|
|  |  |  | var _this = this; | 
|---|
|  |  |  | this.currentNode = node; | 
|---|
|  |  |  | this.drawer = !this.drawer; | 
|---|
|  |  |  | this.zjwidth = node.nodeStyle.width.substring(0,node.nodeStyle.width.length-2); | 
|---|
|  |  |  | this.zjheight = node.nodeStyle.height.substring(0,node.nodeStyle.height.length-2); | 
|---|
|  |  |  | let nodeAttribute = JSON.parse(node.nodeAttribute) | 
|---|
|  |  |  | console.log(1111) | 
|---|
|  |  |  | console.log(nodeAttribute) | 
|---|
|  |  |  | if(nodeAttribute.interval){ | 
|---|
|  |  |  | _this.interval = nodeAttribute['interval']; | 
|---|
|  |  |  | _this.previousMargin = nodeAttribute['previous-margin']; | 
|---|
|  |  |  | _this.nextMargin = nodeAttribute['next-margin']; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | let image = new Image(); | 
|---|
|  |  |  | image.onload = function() { | 
|---|
|  |  |  | let width = image.width; // 宽 px | 
|---|
|  |  |  | let height = image.height; // 高 px | 
|---|
|  |  |  | _this.aspectRatio = width/height; | 
|---|
|  |  |  | console.log(1111); | 
|---|
|  |  |  | console.log(_this.aspectRatio); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | if(node.ads){ | 
|---|
|  |  |  | image.src = node.ads[0].imgUrl; | 
|---|
|  |  |  | }else { | 
|---|
|  |  |  | image.src = node.nodeValue; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  |  | 
|---|
|  |  |  | //改变编辑页面,切换页面元素 | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | this.currentPage=this.pageList[index]; | 
|---|
|  |  |  | this.currentPageCode=this.pageList[index].code; | 
|---|
|  |  |  | console.log(this.currentPageCode); | 
|---|
|  |  |  | this.loadPageAds(); | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | loadPageAds() { | 
|---|
|  |  |  | 
|---|
|  |  |  | if (node.nodeStyle != null && node.nodeStyle.length > 1) { | 
|---|
|  |  |  | node.nodeStyleStr = node.nodeStyle; | 
|---|
|  |  |  | node.nodeStyle = JSON.parse(node.nodeStyle); | 
|---|
|  |  |  | _this.zjwidth = node.nodeStyle.width.substring(0,node.nodeStyle.width.length-2); | 
|---|
|  |  |  | _this.zjheight = node.nodeStyle.height.substring(0,node.nodeStyle.height.length-2); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | _this.adNodes = data.rows; | 
|---|
|  |  |  | 
|---|
|  |  |  | if (!this.validation(cNode)) { | 
|---|
|  |  |  | return false; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | let zjw = this.zjwidth; | 
|---|
|  |  |  | let zjh = this.zjheight; | 
|---|
|  |  |  | if(zjw != null && zjh != null){ | 
|---|
|  |  |  | cNode.nodeStyleStr = '{"width":"'+zjw+'px","height":"'+zjh+'px"}'; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | if(this.interval != null && this.previousMargin != null && this.nextMargin != null){ | 
|---|
|  |  |  | cNode.nodeAttribute = '{"interval":'+this.interval+',"previous-margin":'+this.previousMargin+',"next-margin":'+this.nextMargin+'}'; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | if (cNode.nodeStyleStr != null && cNode.nodeStyleStr.length > 1) { | 
|---|
|  |  |  | cNode.nodeStyle = JSON.parse(cNode.nodeStyleStr); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | let data = { | 
|---|
|  |  |  | 
|---|
|  |  |  | "1" | 
|---|
|  |  |  | ); | 
|---|
|  |  |  | }, | 
|---|
|  |  |  |  | 
|---|
|  |  |  | fixedProportion(){ | 
|---|
|  |  |  | let _this = this; | 
|---|
|  |  |  | _this.selected = !_this.selected | 
|---|
|  |  |  | if(_this.selected){ | 
|---|
|  |  |  | _this.zjwidth = 0 | 
|---|
|  |  |  | _this.zjheight = 0 | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | destroyed() { | 
|---|