tzjy-code
/
DataRoom
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix:点九图bug修复

Browse Source
main
zhu.yawen 1 year ago
parent f6d02d534b
commit b59a3c476d
3 changed files with 192 additions and 192 deletions
Show Stats Download Patch File Download Diff File

360
data-room-ui/packages/BigScreenDesign/RightSetting/MoveDialog/index.vue
Unescape Escape View File

@ -10,55 +10,57 @@
@closed="close" @closed="close"
@opened="getDom" @opened="getDom"
> >
<div class="content"> <div class="contentTable">
<div> <table
<table border="1"
border="1" cellspacing="0"
cellspacing="0" >
> <tr>
<tr> <th>方向</th>
<th>方向</th> <th>描述</th>
<th>描述</th> </tr>
</tr> <tr>
<tr> <td>左上角</td>
<td>左上角</td> <td>不能拉伸</td>
<td>不能拉伸</td> </tr>
</tr> <tr>
<tr> <td>右上角</td>
<td>右上角</td> <td>不能拉伸</td>
<td>不能拉伸</td> </tr>
</tr> <tr>
<tr> <td>左下角</td>
<td>左下角</td> <td>不能拉伸</td>
<td>不能拉伸</td> </tr>
</tr> <tr>
<tr> <td>右下角</td>
<td>右下角</td> <td>不能拉伸</td>
<td>不能拉伸</td> </tr>
</tr> <tr>
<tr> <td>左侧</td>
<td>左侧</td> <td>宽度不变，高度自动拉伸</td>
<td>宽度不变，高度自动拉伸</td> </tr>
</tr> <tr>
<tr> <td>右侧</td>
<td>右侧</td> <td>宽度不变，高度自动拉伸</td>
<td>宽度不变，高度自动拉伸</td> </tr>
</tr> <tr>
<tr> <td>顶部</td>
<td>顶部</td> <td>高度不变，宽度自动拉伸</td>
<td>高度不变，宽度自动拉伸</td> </tr>
</tr> <tr>
<tr> <td>底部</td>
<td>底部</td> <td>高度不变，宽度自动拉伸</td>
<td>高度不变，宽度自动拉伸</td> </tr>
</tr> <tr>
<tr> <td>中部</td>
<td>中部</td> <td>宽度，高度自动拉伸</td>
<td>宽度，高度自动拉伸</td> </tr>
</tr> </table>
</table> </div>
</div> <div
<div class="img"> class="imgContent"
>
<div class="imgContainer">
<span class="toptitle"> <span class="toptitle">
<!-- <InputCom @changeStyle='changeTop' :Fx="['上','下']" :number="top" /> --> <!-- <InputCom @changeStyle='changeTop' :Fx="['上','下']" :number="top" /> -->
<el-input-number <el-input-number
@ -66,7 +68,7 @@
class="bs-el-input-number" class="bs-el-input-number"
:step=" 1" :step=" 1"
:min="0" :min="0"
:max="100000" :max="49"
@change="changeTop" @change="changeTop"
/> />
</span> </span>
@ -76,7 +78,7 @@
class="bs-el-input-number" class="bs-el-input-number"
:step=" 1" :step=" 1"
:min="0" :min="0"
:max="100000" :max="49"
@change="changeRight" @change="changeRight"
/> />
</span> </span>
@ -86,7 +88,7 @@
class="bs-el-input-number" class="bs-el-input-number"
:step=" 1" :step=" 1"
:min="0" :min="0"
:max="100000" :max="49"
@change="changeBottom" @change="changeBottom"
/> />
</span> </span>
@ -96,14 +98,14 @@
class="bs-el-input-number" class="bs-el-input-number"
:step=" 1" :step=" 1"
:min="0" :min="0"
:max="100000" :max="49"
@change="changeLeft" @change="changeLeft"
/> />
</span> </span>
<el-image <el-image
style="max-width:550px" style="max-width:550px;object-fit: cover;"
:src="imgUrl||url" :src="imgUrl||url"
fit="fill" fit="cover"
/> />
<div <div
id="top" id="top"
@ -149,13 +151,14 @@
</div> </div>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
import { getFileUrl } from 'data-room-ui/js/utils/file' import { getFileUrl } from 'data-room-ui/js/utils/file'
export default { export default {
name: 'SourceDialog', name: 'SourceDialog',
data () { data () {
return { return {
contentHeight: 300,
dialogVisible: false, dialogVisible: false,
imgUrl: '', imgUrl: '',
top: 0, top: 0,
@ -175,13 +178,28 @@ export default {
return require('data-room-ui/BorderComponents/GcBorder16/component.png') return require('data-room-ui/BorderComponents/GcBorder16/component.png')
} }
}, },
mounted () {
},
methods: { methods: {
confirm () { confirm () {
this.$emit('getArray', [this.top, this.right, this.bottom, this.left]) this.$emit('getArray', [this.top, this.right, this.bottom, this.left])
this.dialogVisible = false this.dialogVisible = false
}, },
init (val, array) {
if (!val.startsWith('http')) {
this.imgUrl = getFileUrl(val)
} else {
this.imgUrl = val
}
if (array) {
[this.top, this.right, this.bottom, this.left] = array
this.$nextTick(() => {
this.changeTop(this.top)
this.changeRight(this.right)
this.changeBottom(this.bottom)
this.changeLeft(this.left)
})
}
this.dialogVisible = true
},
getDom () { getDom () {
// const a=document.getElementById('top') // const a=document.getElementById('top')
// const b=document.getElementById('right') // const b=document.getElementById('right')
@ -192,6 +210,25 @@ export default {
// this.bottom=getComputedStyle(c).bottom.slice(0,-2) // this.bottom=getComputedStyle(c).bottom.slice(0,-2)
// this.left=getComputedStyle(d).left.slice(0,-2) // this.left=getComputedStyle(d).left.slice(0,-2)
}, },
close () {
},
changeTop (val) {
const a = document.getElementById('top')
a.style.top = val + '%'
},
changeRight (val) {
const a = document.getElementById('right')
a.style.right = val + '%'
},
changeBottom (val) {
const a = document.getElementById('bottom')
a.style.bottom = val + '%'
},
changeLeft (val) {
const a = document.getElementById('left')
a.style.left = val + '%'
},
onMouseUp () { onMouseUp () {
// this.isDown=false; // this.isDown=false;
}, },
@ -208,152 +245,109 @@ export default {
}, },
onMouseDown (e) { onMouseDown (e) {
// this.y=e.layerY // this.y=e.layerY
// this.t=this.top; // this.t=this.top;
// this.isDown=true // this.isDown=true
// console.log(this.x,this.l) // console.log(this.x,this.l)
}, },
changeSymbol (val) { changeSymbol (val) {
this.symbol = val this.symbol = val
},
close () {
},
changeTop (val) {
const a = document.getElementById('top')
a.style.top = val + 'px'
},
changeRight (val) {
const a = document.getElementById('right')
a.style.right = val + 'px'
},
changeBottom (val) {
const a = document.getElementById('bottom')
a.style.bottom = val + 'px'
},
changeLeft (val) {
const a = document.getElementById('left')
a.style.left = val + 'px'
},
init (val, array) {
if (!val.startsWith('http')) {
this.imgUrl = getFileUrl(val)
} else {
this.imgUrl = val
}
if (array) {
[this.top, this.right, this.bottom, this.left] = array
this.$nextTick(() => {
this.changeTop(this.top)
this.changeRight(this.right)
this.changeBottom(this.bottom)
this.changeLeft(this.left)
})
}
this.dialogVisible = true
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// @import '../../assets/style/bsTheme.scss'; ::v-deep .el-dialog__body{
::v-deep .el-dialog__body{ position: relative;
background-color: #232832; background-color: #232832;
position: relative; min-height: 450px;
min-height: 450px; padding: 16px 16px 16px 16px !important;
align-items: center; overflow: auto;
justify-content: center; }
display: flex; .contentTable{
padding: 16px 16px 16px 16px !important; position: absolute;
} top: 0;
.content{ left: 0;
margin: 20px 0; width: 400px;
width: 100%; margin-top: 50px;
display: flex; margin-left: 20px;
justify-content: center; margin-right: 200px;
align-items: center; table{
color: #fff;
border: 1px solid #fff;
}
td,th{ td,th{
padding: 8px 20px; padding: 8px 20px;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
} }
.img{ }
position: relative; .imgContent{
.toptitle{ width: 300px;
position: absolute;
left: 500px;
top: 50%;
transform: translateY(-50%);
margin-top: 0px;
.imgContainer{
width: 100%;
height: 100%;
position: relative;
.toptitle{
position: absolute; position: absolute;
top: -43px; top: -43px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
} }
.righttitle{ .righttitle{
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
right: -123px; right: -150px;
} }
.bottomtitle{ .bottomtitle{
position: absolute; position: absolute;
bottom: -43px; bottom: -43px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
} }
.lefttitle{ .lefttitle{
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
left: -123px; left: -150px;
} }
// height: 100%; // height: 100%;
.top{ .top{
position: absolute; position: absolute;
top: 0; top: 0;
height: 1px; height: 1px;
background-color: #fff; background-color: #fff;
width: 100%; width: 100%;
} }
.right{ .right{
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
height: 100%; height: 100%;
background-color: #fff; background-color: #fff;
width: 1px; width: 1px;
} }
.bottom{ .bottom{
position: absolute; position: absolute;
bottom: 0; bottom: 0;
height: 1px; height: 1px;
background-color: #fff; background-color: #fff;
width: 100%; width: 100%;
} }
.left{ .left{
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
height: 100%; height: 100%;
background-color: #fff; background-color: #fff;
width: 1px; width: 1px;
}
} }
} }
}
::v-deep .el-input-number--mini{
width: 100px;
.el-input__inner{
padding-right: 30px;
}
}
table{
margin-right: 200px;
color: #fff;
border: 1px solid #fff;
}
th{
padding: 4px;
}
td{
padding: 8px;
}
</style> </style>

20
data-room-ui/packages/BorderComponents/GcBorder16/index.vue
Unescape Escape View File

@ -1,12 +1,12 @@
<template> <template>
<div <div
style="width: 100%;height: 100%" style="width: 100%;height: 100%;object-fit: cover"
class="bs-design-wrap" class="bs-design-wrap"
:id="'border'+ config.code" :id="'border'+ config.code"
:style="{ :style="{
opacity: opacity, opacity: opacity,
borderImageSlice:`${borderArray[0]} ${borderArray[1]} ${borderArray[2]} ${borderArray[3]} fill`, borderImageSlice:`${borderImageArray[0]} ${borderImageArray[1]} ${borderImageArray[2]} ${borderImageArray[3]} fill`,
borderImageWidth:`${borderArray[0]}px ${borderArray[1]}px ${borderArray[2]}px ${borderArray[3]}px`, borderImageWidth:`${borderImageArray[0]}px ${borderImageArray[1]}px ${borderImageArray[2]}px ${borderImageArray[3]}px`,
}" }"
> >
</div> </div>
@ -35,15 +35,21 @@ export default {
} }
}, },
computed: { computed: {
url(){ url () {
return require('data-room-ui/BorderComponents/GcBorder16/component.png') return require('data-room-ui/BorderComponents/GcBorder16/component.png')
}, },
opacity () { opacity () {
return this.config.border.opacity || 100 return this.config.border.opacity || 100
}, },
borderArray(){ borderImageArray () {
return this.config.border.borderArray ? this.config.border.borderArray const borderArr = this.config.border.borderArray ? this.config.border.borderArray
: [50,50,50,50] : [10, 10, 10, 10]
const arr = []
arr[0] = borderArr[0] * 3.2
arr[1] = borderArr[1] * 4.5
arr[2] = borderArr[2] * 3.2
arr[3] = borderArr[3] * 4.5
return arr
} }
}, },
watch: { watch: {

4
data-room-ui/packages/BorderComponents/GcBorder16/setting.js
Unescape Escape View File

@ -54,8 +54,8 @@ const setting = [
// 是否多选 // 是否多选
multiple: false, multiple: false,
// 绑定的值 // 绑定的值
value: [50,50,50,50], value: [10, 10, 10, 10]
}, }
] ]

Write Preview
Loading…
Cancel
Save