Skip to content

D
dataease
提交 039f3832 authored 作者: wangjiahao's avatar wangjiahao
浏览文件
操作

feat(仪表盘): 增加文字组件 矩形组件等，统一归类为样式组件 增加仪表盘侧边 '其他' 按钮 用来存放其他类型的组件

上级 e05dd9f6
隐藏空白字符变更
内嵌 并排
正在显示 包含 427 行增加 和 60 行删除
frontend/src/components/canvas/components/AttrList.vue
浏览文件 @ 039f3832
<!-- TODO: 这个页面后续将用 JSX 重构 -->
<template> <template>
<div class="attr-list"> <div class="attr-list">
<el-form> <el-form>
<el-form-item v-for="(key, index) in styleKeys.filter(item => (item != 'rotate' && item != 'borderWidth'))" :key="index" :label="map[key]"> <el-form-item v-for="(key, index) in styleKeys.filter(item => item != 'rotate')" :key="index" :label="map[key]">
<el-color-picker v-if="key == 'borderColor'" v-model="curComponent.style[key]" /> <el-color-picker v-if="key == 'borderColor'" v-model="curComponent.style[key]" />
<el-color-picker v-else-if="key == 'color'" v-model="curComponent.style[key]" /> <el-color-picker v-else-if="key == 'color'" v-model="curComponent.style[key]" />
<el-color-picker v-else-if="key == 'backgroundColor'" v-model="curComponent.style[key]" /> <el-color-picker v-else-if="key == 'backgroundColor'" v-model="curComponent.style[key]" />
<el-select v-else-if="key == 'textAlign'" v-model="curComponent.style[key]"> <el-select v-else-if="selectKey.includes(key)" v-model="curComponent.style[key]">
<el-option <template v-if="key == 'textAlign'">
v-for="item in options" <el-option
:key="item.value" v-for="item in textAlignOptions"
:label="item.label" :key="item.value"
:value="item.value" :label="item.label"
/> :value="item.value"
/>
</template>
<template v-else-if="key == 'borderStyle'">
<el-option
v-for="item in borderStyleOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</template>
<template v-else>
<el-option
v-for="item in verticalAlignOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</template>
</el-select> </el-select>
<el-input v-if="key ==='opacity'" v-model="curComponent.style[key]" type="number" :min="0" :step="0.1" :max="1" />
<el-input v-else v-model="curComponent.style[key]" type="number" /> <el-input v-else v-model="curComponent.style[key]" type="number" />
</el-form-item> </el-form-item>
<!-- <el-form-item v-if="curComponent && !excludes.includes(curComponent.component)" label="内容">--> <el-form-item v-if="curComponent && !excludes.includes(curComponent.component)" :label="$t('panel.content')">
<!-- <el-input v-model="curComponent.propValue" type="textarea" />--> <el-input v-model="curComponent.propValue" type="textarea" />
<!-- </el-form-item>--> </el-form-item>
</el-form> </el-form>
</div> </div>
</template> </template>
...@@ -27,21 +45,46 @@ ...@@ -27,21 +45,46 @@
export default { export default {
data() { data() {
return { return {
excludes: ['Picture', 'Group'], // 这些组件不显示内容 excludes: ['Picture', 'Group', 'user-view'], // 这些组件不显示内容
options: [ textAlignOptions: [
{ {
label: this.$t('panel.aline_left'), label: this.$t('panel.text_align_left'),
value: 'left' value: 'left'
}, },
{ {
label: this.$t('panel.aline_center'), label: this.$t('panel.text_align_center'),
value: 'center' value: 'center'
}, },
{ {
label: this.$t('panel.aline_right'), label: this.$t('panel.text_align_right'),
value: 'right' value: 'right'
} }
], ],
borderStyleOptions: [
{
label: this.$t('panel.border_style_solid'),
value: 'solid'
},
{
label: this.$t('panel.border_style_dashed'),
value: 'dashed'
}
],
verticalAlignOptions: [
{
label: this.$t('panel.vertical_align_top'),
value: 'top'
},
{
label: this.$t('panel.vertical_align_middle'),
value: 'middle'
},
{
label: this.$t('panel.vertical_align_bottom'),
value: 'bottom'
}
],
selectKey: ['textAlign', 'borderStyle', 'verticalAlign'],
map: { map: {
left: this.$t('panel.left'), left: this.$t('panel.left'),
top: this.$t('panel.top'), top: this.$t('panel.top'),
...@@ -49,6 +92,7 @@ export default { ...@@ -49,6 +92,7 @@ export default {
width: this.$t('panel.width'), width: this.$t('panel.width'),
color: this.$t('panel.color'), color: this.$t('panel.color'),
backgroundColor: this.$t('panel.backgroundColor'), backgroundColor: this.$t('panel.backgroundColor'),
borderStyle: this.$t('panel.borderStyle'),
borderWidth: this.$t('panel.borderWidth'), borderWidth: this.$t('panel.borderWidth'),
borderColor: this.$t('panel.borderColor'), borderColor: this.$t('panel.borderColor'),
borderRadius: this.$t('panel.borderRadius'), borderRadius: this.$t('panel.borderRadius'),
...@@ -57,12 +101,14 @@ export default { ...@@ -57,12 +101,14 @@ export default {
lineHeight: this.$t('panel.lineHeight'), lineHeight: this.$t('panel.lineHeight'),
letterSpacing: this.$t('panel.letterSpacing'), letterSpacing: this.$t('panel.letterSpacing'),
textAlign: this.$t('panel.textAlign'), textAlign: this.$t('panel.textAlign'),
opacity: this.$t('panel.opacity') opacity: this.$t('panel.opacity'),
verticalAlign: this.$t('panel.verticalAlign')
} }
} }
}, },
computed: { computed: {
styleKeys() { styleKeys() {
console.log(this.$store.state.curComponent.style)
return this.$store.state.curComponent ? Object.keys(this.$store.state.curComponent.style) : [] return this.$store.state.curComponent ? Object.keys(this.$store.state.curComponent.style) : []
}, },
curComponent() { curComponent() {
...@@ -73,10 +119,10 @@ export default { ...@@ -73,10 +119,10 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.attr-list { .attr-list {
overflow: auto; overflow: auto;
padding: 0px; padding: 20px;
padding-top: 0; padding-top: 0;
height: 100%; height: 100%;
} }
</style> </style>
frontend/src/components/canvas/components/Editor/Shape.vue
浏览文件 @ 039f3832
...@@ -334,7 +334,6 @@ export default { ...@@ -334,7 +334,6 @@ export default {
curPoint, curPoint,
symmetricPoint symmetricPoint
}) })
// console.log('this is test:' + JSON.stringify(this.element.propValue.viewId)) // console.log('this is test:' + JSON.stringify(this.element.propValue.viewId))
this.$store.commit('setShapeStyle', style) this.$store.commit('setShapeStyle', style)
this.element.propValue && this.element.propValue.viewId && eventBus.$emit('resizing', this.element.propValue.viewId) this.element.propValue && this.element.propValue.viewId && eventBus.$emit('resizing', this.element.propValue.viewId)
......
frontend/src/components/canvas/components/Editor/index.vue
浏览文件 @ 039f3832
...@@ -21,22 +21,20 @@ ...@@ -21,22 +21,20 @@
:index="index" :index="index"
:class="{ lock: item.isLock }" :class="{ lock: item.isLock }"
> >
<!-- item.style-&#45;&#45;{{ item.style }}-->
<!-- item.style-&#45;&#45;{{ getShapeStyleInt(item.style) }}-->
<component <component
:is="item.component" :is="item.component"
v-if="item.type==='custom'" v-if="item.type==='v-text'"
:id="'component' + item.id" :id="'component' + item.id"
class="component" class="component"
:style="item.style" :style="getComponentStyleDefault(item.style)"
:out-style="getShapeStyleInt(item.style)" :prop-value="item.propValue"
:element="item" :element="item"
:out-style="getShapeStyleInt(item.style)"
@input="handleInput"
/> />
<component <component
:is="item.component" :is="item.component"
v-else v-else-if="item.type==='other'"
:id="'component' + item.id" :id="'component' + item.id"
class="component" class="component"
:style="getComponentStyle(item.style)" :style="getComponentStyle(item.style)"
...@@ -45,6 +43,16 @@ ...@@ -45,6 +43,16 @@
:filter="filter" :filter="filter"
:out-style="getShapeStyleInt(item.style)" :out-style="getShapeStyleInt(item.style)"
/> />
<component
:is="item.component"
v-else
:id="'component' + item.id"
class="component"
:style="getComponentStyleDefault(item.style)"
:prop-value="item.propValue"
:element="item"
:out-style="getShapeStyleInt(item.style)"
/>
<!-- <component <!-- <component
:is="item.component" :is="item.component"
v-else v-else
...@@ -365,17 +373,26 @@ export default { ...@@ -365,17 +373,26 @@ export default {
return result return result
}, },
getComponentStyleDefault(style) {
debugger
return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
// return style
},
getComponentStyle(style) { getComponentStyle(style) {
debugger
// return getStyle(style, ['top', 'left', 'width', 'height', 'rotate']) // return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
return style return style
}, },
handleInput(element, value) { handleInput(element, value) {
// 根据文本组件高度调整 shape 高度 // 根据文本组件高度调整 shape 高度
this.$store.commit('setShapeStyle', { height: this.getTextareaHeight(element, value) }) // remain -自适应画布会导致一些问题 暂时不修改
// this.$store.commit('setShapeStyle', { height: this.getTextareaHeight(element, value) })
}, },
getTextareaHeight(element, text) { getTextareaHeight(element, text) {
debugger
// eslint-disable-next-line prefer-const // eslint-disable-next-line prefer-const
let { lineHeight, fontSize, height } = element.style let { lineHeight, fontSize, height } = element.style
if (lineHeight === '') { if (lineHeight === '') {
......
frontend/src/components/canvas/custom-component/component-list.js
浏览文件 @ 039f3832
...@@ -11,6 +11,25 @@ export const commonAttr = { ...@@ -11,6 +11,25 @@ export const commonAttr = {
isLock: false // 是否锁定组件 isLock: false // 是否锁定组件
} }
export const assistList = [
{
id: '10001',
component: 'v-text',
type: 'v-text',
label: '文字',
icon: 'iconfont icon-shuru',
defaultClass: 'text-filter'
},
{
id: '10004',
component: 'rect-shape',
type: 'rect-shape',
label: '矩形',
icon: 'iconfont icon-xialakuang',
defaultClass: 'text-filter'
}
]
// 编辑器左侧组件列表 // 编辑器左侧组件列表
const list = [ const list = [
{ {
...@@ -19,7 +38,7 @@ const list = [ ...@@ -19,7 +38,7 @@ const list = [
label: '文字', label: '文字',
propValue: '双击编辑文字', propValue: '双击编辑文字',
icon: 'wenben', icon: 'wenben',
type: 'other', type: 'v-text',
style: { style: {
width: 200, width: 200,
height: 22, height: 22,
...@@ -37,7 +56,7 @@ const list = [ ...@@ -37,7 +56,7 @@ const list = [
label: '按钮', label: '按钮',
propValue: '按钮', propValue: '按钮',
icon: 'button', icon: 'button',
type: 'other', type: 'v-button',
style: { style: {
width: 100, width: 100,
height: 34, height: 34,
...@@ -58,7 +77,7 @@ const list = [ ...@@ -58,7 +77,7 @@ const list = [
component: 'Picture', component: 'Picture',
label: '图片', label: '图片',
icon: 'tupian', icon: 'tupian',
type: 'other', type: 'Picture',
propValue: require('@/components/canvas/assets/title.jpg'), propValue: require('@/components/canvas/assets/title.jpg'),
style: { style: {
width: 300, width: 300,
...@@ -71,7 +90,7 @@ const list = [ ...@@ -71,7 +90,7 @@ const list = [
component: 'Picture', component: 'Picture',
label: '背景-科技1', label: '背景-科技1',
icon: 'tupian', icon: 'tupian',
type: 'other', type: 'Picture',
propValue: require('@/components/canvas/assets/bg-kj-1.jpg'), propValue: require('@/components/canvas/assets/bg-kj-1.jpg'),
style: { style: {
width: 600, width: 600,
...@@ -83,9 +102,9 @@ const list = [ ...@@ -83,9 +102,9 @@ const list = [
id: '10004', id: '10004',
component: 'rect-shape', component: 'rect-shape',
label: '矩形', label: '矩形',
propValue: '&nbsp;', propValue: '',
icon: 'juxing', icon: 'juxing',
type: 'other', type: 'rect-shape',
style: { style: {
width: 200, width: 200,
height: 200, height: 200,
...@@ -112,7 +131,7 @@ const list = [ ...@@ -112,7 +131,7 @@ const list = [
style: { style: {
width: 200, width: 200,
height: 300, height: 300,
borderWidth: 1 borderRadius: ''
} }
} }
] ]
......
frontend/src/components/canvas/utils/style.js
浏览文件 @ 039f3832
...@@ -27,6 +27,7 @@ export function getStyle(style, filter = []) { ...@@ -27,6 +27,7 @@ export function getStyle(style, filter = []) {
} }
}) })
debugger
return result return result
} }
......
frontend/src/lang/en.js
浏览文件 @ 039f3832
...@@ -932,6 +932,7 @@ export default { ...@@ -932,6 +932,7 @@ export default {
width: 'Width', width: 'Width',
color: 'Color', color: 'Color',
backgroundColor: 'BackgroundColor', backgroundColor: 'BackgroundColor',
borderStyle: 'Border Style',
borderWidth: 'BorderWidth', borderWidth: 'BorderWidth',
borderColor: 'BorderColor', borderColor: 'BorderColor',
borderRadius: 'BorderRadius', borderRadius: 'BorderRadius',
...@@ -941,10 +942,18 @@ export default { ...@@ -941,10 +942,18 @@ export default {
letterSpacing: 'LetterSpacing', letterSpacing: 'LetterSpacing',
textAlign: 'TextAlign', textAlign: 'TextAlign',
opacity: 'Opacity', opacity: 'Opacity',
aline_left: 'Aline Left', verticalAlign: 'Vertical Align',
aline_center: 'Aline Center', text_align_left: 'Aline Left',
aline_right: 'Aline Right', text_align_center: 'Aline Center',
select_component: 'Check Component' text_align_right: 'Aline Right',
vertical_align_top: 'Align Align',
vertical_align_middle: 'Align Middle',
vertical_align_bottom: 'Align Bottom',
border_style_solid: 'Solid',
border_style_dashed: 'Dashed',
select_component: 'Check Component',
other_module: 'Other',
content: 'Content'
}, },
plugin: { plugin: {
local_install: 'Local installation', local_install: 'Local installation',
......
frontend/src/lang/tw.js
浏览文件 @ 039f3832
...@@ -932,6 +932,7 @@ export default { ...@@ -932,6 +932,7 @@ export default {
width: '宽', width: '宽',
color: '颜色', color: '颜色',
backgroundColor: '背景色', backgroundColor: '背景色',
borderStyle: '边框风格',
borderWidth: '边框宽度', borderWidth: '边框宽度',
borderColor: '边框颜色', borderColor: '边框颜色',
borderRadius: '边框半径', borderRadius: '边框半径',
...@@ -939,12 +940,20 @@ export default { ...@@ -939,12 +940,20 @@ export default {
fontWeight: '字体粗细', fontWeight: '字体粗细',
lineHeight: '行高', lineHeight: '行高',
letterSpacing: '字间距', letterSpacing: '字间距',
textAlign: '对齐方式', textAlign: '左右对齐',
opacity: '透明度', opacity: '透明度',
aline_left: '左对齐', verticalAlign: '上下对齐',
aline_center: '居中', text_align_left: '左对齐',
aline_right: '右对齐', text_align_center: '左右居中',
select_component: '请选择组件' text_align_right: '右对齐',
vertical_align_top: '上对齐',
vertical_align_middle: '居中对齐',
vertical_align_bottom: '下对齐',
border_style_solid: '实线',
border_style_dashed: '虚线',
select_component: '请选择组件',
other_module: '其他',
content: '内容'
}, },
plugin: { plugin: {
local_install: '本地安裝', local_install: '本地安裝',
......
frontend/src/lang/zh.js
浏览文件 @ 039f3832
...@@ -932,6 +932,7 @@ export default { ...@@ -932,6 +932,7 @@ export default {
width: '宽', width: '宽',
color: '颜色', color: '颜色',
backgroundColor: '背景色', backgroundColor: '背景色',
borderStyle: '边框风格',
borderWidth: '边框宽度', borderWidth: '边框宽度',
borderColor: '边框颜色', borderColor: '边框颜色',
borderRadius: '边框半径', borderRadius: '边框半径',
...@@ -939,12 +940,20 @@ export default { ...@@ -939,12 +940,20 @@ export default {
fontWeight: '字体粗细', fontWeight: '字体粗细',
lineHeight: '行高', lineHeight: '行高',
letterSpacing: '字间距', letterSpacing: '字间距',
textAlign: '对齐方式', textAlign: '左右对齐',
opacity: '透明度', opacity: '透明度',
aline_left: '左对齐', verticalAlign: '上下对齐',
aline_center: '居中', text_align_left: '左对齐',
aline_right: '右对齐', text_align_center: '左右居中',
select_component: '请选择组件' text_align_right: '右对齐',
vertical_align_top: '上对齐',
vertical_align_middle: '居中对齐',
vertical_align_bottom: '下对齐',
border_style_solid: '实线',
border_style_dashed: '虚线',
select_component: '请选择组件',
other_module: '其他',
content: '内容'
}, },
plugin: { plugin: {
local_install: '本地安装', local_install: '本地安装',
......
frontend/src/store/index.js
浏览文件 @ 039f3832
...@@ -72,6 +72,7 @@ const data = { ...@@ -72,6 +72,7 @@ const data = {
}, },
setCurComponent(state, { component, index }) { setCurComponent(state, { component, index }) {
console.log('curComponent' + JSON.stringify(component))
state.curComponent = component state.curComponent = component
state.curComponentIndex = index state.curComponentIndex = index
}, },
...@@ -87,6 +88,7 @@ const data = { ...@@ -87,6 +88,7 @@ const data = {
if (width) curComponent.style.width = parseInt(canvasStyleData.selfAdaption ? (width * 100 / curCanvasScale.scaleWidth) : width) if (width) curComponent.style.width = parseInt(canvasStyleData.selfAdaption ? (width * 100 / curCanvasScale.scaleWidth) : width)
if (height) curComponent.style.height = parseInt(canvasStyleData.selfAdaption ? (height * 100 / curCanvasScale.scaleHeight) : height) if (height) curComponent.style.height = parseInt(canvasStyleData.selfAdaption ? (height * 100 / curCanvasScale.scaleHeight) : height)
if (rotate) curComponent.style.rotate = rotate if (rotate) curComponent.style.rotate = rotate
console.log('setShapeStyle' + JSON.stringify(curComponent))
}, },
setShapeSingleStyle({ curComponent }, { key, value }) { setShapeSingleStyle({ curComponent }, { key, value }) {
......
frontend/src/views/panel/AssistComponent/index.vue 0 → 100644
浏览文件 @ 039f3832
<template>
<div class="filter-container" @dragstart="handleDragStart">
<div class="widget-subject">
<div class="filter-header">
<div class="filter-header-text"> 样式组件 </div>
</div>
<div class="filter-widget-content">
<div
v-for="(item, index) in assistList"
:key="index"
:data-id="item.id"
draggable
:data-index="index"
:class="'filter-widget '+ (item.defaultClass || '')"
>
<div class="filter-widget-icon">
<i :class="(item.icon || 'el-icon-setting') + ' widget-icon-i'" />
</div>
<div class="filter-widget-text">{{ item.label }}</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { assistList } from '@/components/canvas/custom-component/component-list'
export default {
name: 'FilterGroup',
data() {
return {
assistList
}
},
methods: {
handleDragStart(ev) {
ev.dataTransfer.effectAllowed = 'copy'
const dataTrans = {
type: 'assist',
id: ev.target.dataset.id
}
ev.dataTransfer.setData('componentInfo', JSON.stringify(dataTrans))
}
}
}
</script>
<style lang="scss" scoped>
.filter-container {
width: 240px;
overflow: hidden auto;
min-height: 24px;
padding-top: 0px;
padding-bottom: 0px;
position: relative;
height: 940px;
max-height: 976px;
}
.filter-header {
overflow: hidden;
position: relative;
margin-top: 24px;
margin-left: 15px;
align-items: center;
word-break: break-all;
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: nowrap;
}
.filter-header-text {
font-size: 14px;
max-width: 100%;
color: gray;
text-align: left;
white-space: pre;
text-overflow: ellipsis;
position: relative;
flex-shrink: 0;
box-sizing: border-box;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
word-break: break-all;
}
.filter-widget-content {
position: relative;
margin-left: 5px;
}
.filter-widget {
width: 100px;
height: 36px;
position: relative;
float: left;
margin-top: 10px;
margin-left: 10px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1a3685f2,endColorstr=#1a3685f2);
font-size: 12px;
border-radius: 10px;
cursor: pointer;
overflow: hidden;
}
.time-filter {
background-color: rgba(54,133,242,.1);
.filter-widget-icon {
color: #3685f2;
}
.filter-widget-text {
color: #3d4d66;
}
}
.time-filter:hover {
background-color: #3685f2;
color: #fff;
.filter-widget-icon {
background-color: #3685f2;
color: #fff;
}
.filter-widget-text {
color: #fff;
}
}
.text-filter {
background-color: rgba(35,190,239,.1);
.filter-widget-icon {
color: #23beef;
}
.filter-widget-text {
color: #3d4d66;
}
}
.text-filter:hover {
background-color: #23beef;
color: #fff;
.filter-widget-icon {
background-color: #23beef;
color: #fff;
}
.filter-widget-text {
color: #fff;
}
}
.tree-filter {
background-color: rgba(22,160,132,.1);
.filter-widget-icon {
color: #37b4aa;
}
.filter-widget-text {
color: #3d4d66;
}
}
.tree-filter:hover {
background-color: #37b4aa;
.filter-widget-icon {
color: #37b4aa;
}
.filter-widget-text {
color: #fff;
}
}
.filter-widget-icon {
width: 40px;
height: 36px;
text-align: center;
line-height: 1;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
justify-content: center;
align-items: center;
flex-direction: row;
flex-wrap: nowrap;
display: flex;
.widget-icon-i {
width: 24px;
height: 24px;
position: relative;
flex-shrink: 0;
font-size: 24px;
margin: auto;
font-family: fineui;
font-style: normal;
-webkit-font-smoothing: antialiased;
text-align: center;
}
}
.filter-widget-text {
font-size: 14px;
height: 36px;
line-height: 36px;
text-align: left;
white-space: pre;
text-overflow: ellipsis;
position: absolute;
inset: 0px 0px 0px 40px;
box-sizing: border-box;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
word-break: break-all;
cursor: pointer;
}
.widget-subject {
display: flow-root;
}
</style>
frontend/src/views/panel/edit/index.vue
浏览文件 @ 039f3832
...@@ -52,6 +52,23 @@ ...@@ -52,6 +52,23 @@
<div style="width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;" /> <div style="width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;" />
</div> </div>
<!-- 过滤组件 end --> <!-- 过滤组件 end -->
<!-- 其他组件 start -->
<div tabindex="-1" style="position: relative; margin: 16px auto">
<div style="height: 60px; position: relative">
<div class="button-div-class" style=" text-align: center;line-height: 1;position: absolute;inset: 0px 0px 45px; ">
<el-button circle :class="show&&showIndex===3? 'button-show':'button-closed'" class="el-icon-brush" size="mini" @click="showPanel(3)" />
</div>
<div style=" position: absolute;left: 0px;right: 0px;bottom: 10px; height: 16px;">
<div style=" max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
{{ $t('panel.other_module') }}
</div>
</div>
</div>
</div>
<div style="height: 1px; position: relative; margin: 0px auto;background-color:#E6E6E6;">
<div style="width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;" />
</div>
<!-- 其他组件 end -->
</div> </div>
</div> </div>
</de-aside-container> </de-aside-container>
...@@ -73,6 +90,7 @@ ...@@ -73,6 +90,7 @@
<view-select v-show=" show && showIndex===0" /> <view-select v-show=" show && showIndex===0" />
<filter-group v-show=" show &&showIndex===1" /> <filter-group v-show=" show &&showIndex===1" />
<subject-setting v-show=" show &&showIndex===2" /> <subject-setting v-show=" show &&showIndex===2" />
<assist-component v-show=" show &&showIndex===3" />
</el-drawer> </el-drawer>
<div <div
...@@ -147,8 +165,9 @@ import Toolbar from '@/components/canvas/components/Toolbar' ...@@ -147,8 +165,9 @@ import Toolbar from '@/components/canvas/components/Toolbar'
import { findOne } from '@/api/panel/panel' import { findOne } from '@/api/panel/panel'
import PreviewFullScreen from '@/components/canvas/components/Editor/PreviewFullScreen' import PreviewFullScreen from '@/components/canvas/components/Editor/PreviewFullScreen'
import Preview from '@/components/canvas/components/Editor/Preview' import Preview from '@/components/canvas/components/Editor/Preview'
import AttrList from '@/components/canvas/components/AttrList.vue' import AttrList from '@/components/canvas/components/AttrList'
import elementResizeDetectorMaker from 'element-resize-detector' import elementResizeDetectorMaker from 'element-resize-detector'
import AssistComponent from '@/views/panel/AssistComponent'
// 引入样式 // 引入样式
import '@/components/canvas/assets/iconfont/iconfont.css' import '@/components/canvas/assets/iconfont/iconfont.css'
...@@ -171,7 +190,8 @@ export default { ...@@ -171,7 +190,8 @@ export default {
SubjectSetting, SubjectSetting,
PreviewFullScreen, PreviewFullScreen,
Preview, Preview,
AttrList AttrList,
AssistComponent
}, },
data() { data() {
return { return {
...@@ -334,6 +354,7 @@ export default { ...@@ -334,6 +354,7 @@ export default {
return data return data
}, },
handleDrop(e) { handleDrop(e) {
debugger
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
let component let component
...@@ -341,8 +362,15 @@ export default { ...@@ -341,8 +362,15 @@ export default {
const componentInfo = JSON.parse(e.dataTransfer.getData('componentInfo')) const componentInfo = JSON.parse(e.dataTransfer.getData('componentInfo'))
// 用户视图设置 复制一个模板 if (componentInfo.type === 'assist') {
if (componentInfo.type === 'view') { // 辅助设计组件
componentList.forEach(componentTemp => {
if (componentInfo.id === componentTemp.id) {
component = deepCopy(componentTemp)
}
})
} else if (componentInfo.type === 'view') {
// 用户视图设置 复制一个模板
componentList.forEach(componentTemp => { componentList.forEach(componentTemp => {
if (componentTemp.type === 'view') { if (componentTemp.type === 'view') {
component = deepCopy(componentTemp) component = deepCopy(componentTemp)
...@@ -368,6 +396,7 @@ export default { ...@@ -368,6 +396,7 @@ export default {
component = deepCopy(this.currentFilterCom) component = deepCopy(this.currentFilterCom)
} }
// position = absolution 或导致有偏移 这里中和一下偏移量
component.style.top = e.offsetY component.style.top = e.offsetY
component.style.left = e.offsetX component.style.left = e.offsetX
component.id = newComponentId component.id = newComponentId
...@@ -546,10 +575,10 @@ export default { ...@@ -546,10 +575,10 @@ export default {
background-color: #ffffff!important; background-color: #ffffff!important;
} }
.style-aside{ .style-aside{
width: 85px; width: 200px;
max-width:85px!important; max-width:200px!important;
border: 1px solid #E6E6E6; border: 1px solid #E6E6E6;
padding: 3px; padding: 10px;
transition: all 0.3s; transition: all 0.3s;
} }
......
frontend/src/views/panel/filter/index.vue
浏览文件 @ 039f3832
...@@ -28,7 +28,8 @@ ...@@ -28,7 +28,8 @@
</template> </template>
<script>import componentList from '@/components/canvas/custom-component/component-list' <script>
import componentList from '@/components/canvas/custom-component/component-list'
import { ApplicationContext } from '@/utils/ApplicationContext' import { ApplicationContext } from '@/utils/ApplicationContext'
export default { export default {
name: 'FilterGroup', name: 'FilterGroup',
...@@ -73,6 +74,7 @@ export default { ...@@ -73,6 +74,7 @@ export default {
return result return result
}) })
} }
console.log('this.widgetSubjects=>' + JSON.stringify(this.widgetSubjects))
}, },
methods: { methods: {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论