center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

Merge pull request #133 from dataease/pr@dev@wjh

Browse Source 
Pr@dev@wjh
This commit is contained in:
王嘉豪 2021-07-01 18:51:11 +08:00 committed by GitHub
commit db6f010558
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 424 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/canvas/components/Editor/index.vue
View File

@ -153,8 +153,8 @@ export default {
},
// 矩阵数量 默认 12 * 24
matrixCount: {
x: 12,
y: 24
x: 24,
y: 48
},
customStyleHistory: null,
showDrag: true,

174
frontend/src/components/canvas/components/RectangleAttr.vue Normal file
View File

@ -0,0 +1,174 @@
<template>
<el-card class="el-card-main" :style="mainStyle">
<div style="position: relative;">
<div style="width: 80px;margin-top: 2px;margin-left: 2px;float: left">
<el-tooltip content="边框风格">
<el-select v-model="styleInfo.borderStyle" size="mini">
<el-option
v-for="item in lineStyle"
:key="item.value"
:label="item.label"
:value="item.value"
>
<span style="float: left;">
<i :class="item.icon" />
</span>
<span style="float: right; color: #8492a6; font-size: 12px">{{ item.label }}</span>
</el-option>
</el-select>
</el-tooltip>
</div>
<div style="width: 55px;float: left;margin-top: 2px;margin-left: 2px;">
<el-tooltip content="边框宽度">
<el-select v-model="styleInfo.borderWidth" size="mini" placeholder="">
<el-option
v-for="item in lineFont"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-tooltip>
</div>
<div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<div style="width: 16px;height: 18px">
<el-tooltip content="边框颜色">
<i class="iconfont icon-huabi" @click="goBoardColor" />
</el-tooltip>
<div :style="boardDivColor" />
<el-color-picker ref="boardColorPicker" v-model="styleInfo.borderColor" style="margin-top: 7px;height: 0px" size="mini" />
</div>
</div>
<div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<div style="width: 16px;height: 18px">
<el-tooltip content="背景颜色">
<i class="iconfont icon-beijingse1" @click="goBackgroundColor" />
</el-tooltip>
<div :style="backgroundDivColor" />
<el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" />
</div>
</div>
</div>
</el-card>
</template>
<script>
import { mapState } from 'vuex'
export default {
data() {
return {
lineStyle: [{
icon: 'iconfont icon-solid_line',
value: 'solid',
label: '实线'
}, {
icon: 'iconfont icon-xuxian',
value: 'dashed',
label: '虚线'
}, {
icon: 'iconfont icon-dianxian',
value: 'dotted',
label: '点线'
}],
lineFont: [{
value: '0',
label: '0'
}, {
value: '1',
label: '1'
}, {
value: '2',
label: '2'
}, {
value: '3',
label: '3'
}, {
value: '4',
label: '4'
}, {
value: '5',
label: '5'
}]
}
},
computed: {
boardDivColor() {
const style = {
height: '2px',
background: this.styleInfo.borderColor
}
return style
},
backgroundDivColor() {
const style = {
height: '2px',
background: this.styleInfo.backgroundColor
}
return style
},
mainStyle() {
const style = {
left: this.getPositionX(this.curComponent.style.left) + 'px',
top: (this.getPositionY(this.curComponent.style.top) - 3) + 'px'
}
return style
},
styleInfo() {
return this.$store.state.curComponent.style
},
...mapState([
'curComponent',
'curCanvasScale',
'canvasStyleData'
])
},
methods: {
goBoardColor() {
this.$refs.boardColorPicker.handleTrigger()
},
goBackgroundColor() {
this.$refs.backgroundColorPicker.handleTrigger()
},
getPositionX(x) {
if (this.canvasStyleData.selfAdaption) {
return (x * this.curCanvasScale.scaleWidth / 100) + 60
} else {
return x + 190
}
},
getPositionY(y) {
if (this.canvasStyleData.selfAdaption) {
return y * this.curCanvasScale.scaleHeight / 100
} else {
return y
}
}
}
}
</script>
<style lang="scss" scoped>
.attr-list {
overflow: auto;
padding: 20px;
padding-top: 0;
height: 100%;
}
.el-card-main {
height: 34px;
z-index: 1000000000;
width: 210px;
position: absolute;
}
.el-card-main ::v-deep .el-card__body {
padding: 0px!important;
}
</style>

6
frontend/src/components/canvas/custom-component/component-list.js
View File

@ -119,10 +119,10 @@ const list = [
style: {
width: 200,
height: 200,
borderColor: '#000',
borderStyle: 'solid',
borderWidth: 1,
backgroundColor: '',
borderStyle: 'solid'
borderColor: '#000000',
backgroundColor: '#ffffff'
}
},
{

241
frontend/src/styles/deicon/demo_index.html
View File

@ -38,7 +38,7 @@
<div class="main">
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
</a></h1>
<div class="nav-tabs">
<ul id="tabs" class="dib-box">
@ -46,122 +46,152 @@
<li class="dib"><span>Font class</span></li>
<li class="dib"><span>Symbol</span></li>
</ul>
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2459092" target="_blank" class="nav-more">查看项目</a>
</div>
<div class="tab-container">
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe64a;</span>
<div class="name">实线</div>
<div class="code-name">&amp;#xe64a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe640;</span>
<div class="name">画笔</div>
<div class="code-name">&amp;#xe640;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe614;</span>
<div class="name">点线</div>
<div class="code-name">&amp;#xe614;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe617;</span>
<div class="name">虚线</div>
<div class="code-name">&amp;#xe617;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe600;</span>
<div class="name">背景色‘</div>
<div class="code-name">&amp;#xe600;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe648;</span>
<div class="name">矩形</div>
<div class="code-name">&amp;#xe648;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe959;</span>
<div class="name">text</div>
<div class="code-name">&amp;#xe959;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe643;</span>
<div class="name">picture</div>
<div class="code-name">&amp;#xe643;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6ab;</span>
<div class="name">输入</div>
<div class="code-name">&amp;#xe6ab;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe628;</span>
<div class="name">树</div>
<div class="code-name">&amp;#xe628;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe615;</span>
<div class="name">查询搜索</div>
<div class="code-name">&amp;#xe615;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe624;</span>
<div class="name">季度</div>
<div class="code-name">&amp;#xe624;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe7de;</span>
<div class="name">数字顺序</div>
<div class="code-name">&amp;#xe7de;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6a6;</span>
<div class="name">树列表</div>
<div class="code-name">&amp;#xe6a6;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe639;</span>
<div class="name">日期</div>
<div class="code-name">&amp;#xe639;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6dd;</span>
<div class="name">左侧-区间</div>
<div class="code-name">&amp;#xe6dd;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe66f;</span>
<div class="name">列表</div>
<div class="code-name">&amp;#xe66f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe8ca;</span>
<div class="name">下拉框</div>
<div class="code-name">&amp;#xe8ca;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe8d0;</span>
<div class="name">下拉树</div>
<div class="code-name">&amp;#xe8d0;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe611;</span>
<div class="name">重置</div>
<div class="code-name">&amp;#xe611;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe691;</span>
<div class="name">日</div>
<div class="code-name">&amp;#xe691;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe692;</span>
<div class="name">年</div>
<div class="code-name">&amp;#xe692;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe695;</span>
<div class="name">月</div>
<div class="code-name">&amp;#xe695;</div>
</li>
</ul>
<div class="article markdown">
<h2 id="unicode-">Unicode 引用</h2>
@ -180,9 +210,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1623984849135') format('woff2'),
url('iconfont.woff?t=1623984849135') format('woff'),
url('iconfont.ttf?t=1623984849135') format('truetype');
src: url('iconfont.woff2?t=1625127498350') format('woff2'),
url('iconfont.woff?t=1625127498350') format('woff'),
url('iconfont.ttf?t=1625127498350') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@ -207,7 +237,52 @@
</div>
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-solid_line"></span>
<div class="name">
实线
</div>
<div class="code-name">.icon-solid_line
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-huabi"></span>
<div class="name">
画笔
</div>
<div class="code-name">.icon-huabi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-dianxian"></span>
<div class="name">
点线
</div>
<div class="code-name">.icon-dianxian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xuxian"></span>
<div class="name">
虚线
</div>
<div class="code-name">.icon-xuxian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-beijingse1"></span>
<div class="name">
背景色‘
</div>
<div class="code-name">.icon-beijingse1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-juxing"></span>
<div class="name">
@ -216,7 +291,7 @@
<div class="code-name">.icon-juxing
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-text"></span>
<div class="name">
@ -225,7 +300,7 @@
<div class="code-name">.icon-text
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-picture"></span>
<div class="name">
@ -234,7 +309,7 @@
<div class="code-name">.icon-picture
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shuru"></span>
<div class="name">
@ -243,7 +318,7 @@
<div class="code-name">.icon-shuru
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tree"></span>
<div class="name">
@ -252,7 +327,7 @@
<div class="code-name">.icon-tree
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-chaxunsousuo"></span>
<div class="name">
@ -261,7 +336,7 @@
<div class="code-name">.icon-chaxunsousuo
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jidu"></span>
<div class="name">
@ -270,7 +345,7 @@
<div class="code-name">.icon-jidu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shuzishunxu"></span>
<div class="name">
@ -279,7 +354,7 @@
<div class="code-name">.icon-shuzishunxu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-Group-"></span>
<div class="name">
@ -288,7 +363,7 @@
<div class="code-name">.icon-Group-
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-riqi"></span>
<div class="name">
@ -297,7 +372,7 @@
<div class="code-name">.icon-riqi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zuoce-qujian"></span>
<div class="name">
@ -306,7 +381,7 @@
<div class="code-name">.icon-zuoce-qujian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-liebiao"></span>
<div class="name">
@ -315,7 +390,7 @@
<div class="code-name">.icon-liebiao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xialakuang"></span>
<div class="name">
@ -324,7 +399,7 @@
<div class="code-name">.icon-xialakuang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xialashu"></span>
<div class="name">
@ -333,7 +408,7 @@
<div class="code-name">.icon-xialashu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zhongzhi"></span>
<div class="name">
@ -342,7 +417,7 @@
<div class="code-name">.icon-zhongzhi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-ri"></span>
<div class="name">
@ -351,7 +426,7 @@
<div class="code-name">.icon-ri
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-nian"></span>
<div class="name">
@ -360,7 +435,7 @@
<div class="code-name">.icon-nian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yue"></span>
<div class="name">
@ -369,7 +444,7 @@
<div class="code-name">.icon-yue
</div>
</li>
</ul>
<div class="article markdown">
<h2 id="font-class-">font-class 引用</h2>
@ -396,7 +471,47 @@
</div>
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-solid_line"></use>
</svg>
<div class="name">实线</div>
<div class="code-name">#icon-solid_line</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-huabi"></use>
</svg>
<div class="name">画笔</div>
<div class="code-name">#icon-huabi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-dianxian"></use>
</svg>
<div class="name">点线</div>
<div class="code-name">#icon-dianxian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xuxian"></use>
</svg>
<div class="name">虚线</div>
<div class="code-name">#icon-xuxian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-beijingse1"></use>
</svg>
<div class="name">背景色‘</div>
<div class="code-name">#icon-beijingse1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-juxing"></use>
@ -404,7 +519,7 @@
<div class="name">矩形</div>
<div class="code-name">#icon-juxing</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-text"></use>
@ -412,7 +527,7 @@
<div class="name">text</div>
<div class="code-name">#icon-text</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-picture"></use>
@ -420,7 +535,7 @@
<div class="name">picture</div>
<div class="code-name">#icon-picture</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shuru"></use>
@ -428,7 +543,7 @@
<div class="name">输入</div>
<div class="code-name">#icon-shuru</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tree"></use>
@ -436,7 +551,7 @@
<div class="name">树</div>
<div class="code-name">#icon-tree</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-chaxunsousuo"></use>
@ -444,7 +559,7 @@
<div class="name">查询搜索</div>
<div class="code-name">#icon-chaxunsousuo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jidu"></use>
@ -452,7 +567,7 @@
<div class="name">季度</div>
<div class="code-name">#icon-jidu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shuzishunxu"></use>
@ -460,7 +575,7 @@
<div class="name">数字顺序</div>
<div class="code-name">#icon-shuzishunxu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-Group-"></use>
@ -468,7 +583,7 @@
<div class="name">树列表</div>
<div class="code-name">#icon-Group-</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-riqi"></use>
@ -476,7 +591,7 @@
<div class="name">日期</div>
<div class="code-name">#icon-riqi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zuoce-qujian"></use>
@ -484,7 +599,7 @@
<div class="name">左侧-区间</div>
<div class="code-name">#icon-zuoce-qujian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-liebiao"></use>
@ -492,7 +607,7 @@
<div class="name">列表</div>
<div class="code-name">#icon-liebiao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xialakuang"></use>
@ -500,7 +615,7 @@
<div class="name">下拉框</div>
<div class="code-name">#icon-xialakuang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xialashu"></use>
@ -508,7 +623,7 @@
<div class="name">下拉树</div>
<div class="code-name">#icon-xialashu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zhongzhi"></use>
@ -516,7 +631,7 @@
<div class="name">重置</div>
<div class="code-name">#icon-zhongzhi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-ri"></use>
@ -524,7 +639,7 @@
<div class="name">日</div>
<div class="code-name">#icon-ri</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-nian"></use>
@ -532,7 +647,7 @@
<div class="name">年</div>
<div class="code-name">#icon-nian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yue"></use>
@ -540,7 +655,7 @@
<div class="name">月</div>
<div class="code-name">#icon-yue</div>
</li>
</ul>
<div class="article markdown">
<h2 id="symbol-">Symbol 引用</h2>

26
frontend/src/styles/deicon/iconfont.css
View File

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 2459092 */
src: url('iconfont.woff2?t=1623984849135') format('woff2'),
url('iconfont.woff?t=1623984849135') format('woff'),
url('iconfont.ttf?t=1623984849135') format('truetype');
src: url('iconfont.woff2?t=1625127498350') format('woff2'),
url('iconfont.woff?t=1625127498350') format('woff'),
url('iconfont.ttf?t=1625127498350') format('truetype');
}
.iconfont {
@ -13,6 +13,26 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-solid_line:before {
content: "\e64a";
}
.icon-huabi:before {
content: "\e640";
}
.icon-dianxian:before {
content: "\e614";
}
.icon-xuxian:before {
content: "\e617";
}
.icon-beijingse1:before {
content: "\e600";
}
.icon-juxing:before {
content: "\e648";
}

2
frontend/src/styles/deicon/iconfont.js
View File

File diff suppressed because one or more lines are too long

35
frontend/src/styles/deicon/iconfont.json
View File

@ -5,6 +5,41 @@
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "20374711",
"name": "实线",
"font_class": "solid_line",
"unicode": "e64a",
"unicode_decimal": 58954
},
{
"icon_id": "930673",
"name": "画笔",
"font_class": "huabi",
"unicode": "e640",
"unicode_decimal": 58944
},
{
"icon_id": "15952264",
"name": "点线",
"font_class": "dianxian",
"unicode": "e614",
"unicode_decimal": 58900
},
{
"icon_id": "15952269",
"name": "虚线",
"font_class": "xuxian",
"unicode": "e617",
"unicode_decimal": 58903
},
{
"icon_id": "19990890",
"name": "背景色‘",
"font_class": "beijingse1",
"unicode": "e600",
"unicode_decimal": 58880
},
{
"icon_id": "2404485",
"name": "矩形",

BIN
frontend/src/styles/deicon/iconfont.ttf
View File

Binary file not shown.

BIN
frontend/src/styles/deicon/iconfont.woff
View File

Binary file not shown.

BIN
frontend/src/styles/deicon/iconfont.woff2
View File

Binary file not shown.

11
frontend/src/views/panel/edit/index.vue
View File

@ -154,9 +154,12 @@
<fullscreen style="height: 100%;background: #f7f8fa;overflow-y: auto" :fullscreen.sync="previewVisible">
<Preview v-if="previewVisible" :show-type="canvasStyleData.selfAdaption?'full':'width'" />
</fullscreen>
<input id="input" ref="files" type="file" accept="image/*" hidden @change="handleFileChange">
<!--矩形样式组件-->
test--------{{ curComponent&&curComponent.type }}
<RectangleAttr v-if="curComponent&&curComponent.type==='rect-shape'" />
</el-row>
</template>
@ -195,6 +198,7 @@ import FilterDialog from '../filter/filterDialog'
import toast from '@/components/canvas/utils/toast'
import { commonStyle, commonAttr } from '@/components/canvas/custom-component/component-list'
import generateID from '@/components/canvas/utils/generateID'
import RectangleAttr from '@/components/canvas/components/RectangleAttr'
export default {
name: 'PanelEdit',
@ -213,7 +217,8 @@ export default {
AttrList,
AttrListExtend,
AssistComponent,
PanelTextEditor
PanelTextEditor,
RectangleAttr
},
data() {
return {
@ -451,7 +456,7 @@ export default {
this.clearCurrentInfo()
// 文字组件
if (component.type === 'v-text' || component.type === 'rect-shape') {
if (component.type === 'v-text') {
this.$store.commit('setCurComponent', { component: component, index: this.componentData.length })
this.styleDialogVisible = true
this.show = false