Skip to content

D
dataease
Unverified 提交 03ca1530 authored 作者: fit2cloud-chenyw's avatar fit2cloud-chenyw 提交者： GitHub
浏览文件
操作

Merge pull request #1005 from dataease/pr@dev@fix_timer_component

feat: 完善仪表板时间组件
上级 6fd580e2 19c49629
隐藏空白字符变更
内嵌 并排
正在显示 包含 129 行增加 和 28 行删除
frontend/src/components/canvas/components/TextAttr.vue
浏览文件 @ 03ca1530
......@@ -70,6 +70,22 @@
<el-input v-model="styleInfo.letterSpacing" type="number" size="mini" min="0" max="99" @change="styleChange" />
</div>
<el-tooltip v-if="attrShow('margin')" :content="$t('panel.margin')">
<i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-margin" />
</el-tooltip>
<div v-if="attrShow('margin')" style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
<el-input v-model="styleInfo.margin" type="number" size="mini" min="0" max="99" @change="styleChange" />
</div>
<el-tooltip v-if="attrShow('time_margin')" :content="$t('panel.margin')">
<i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-margin" />
</el-tooltip>
<div v-if="attrShow('time_margin')" style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
<el-input v-model="styleInfo.time_margin" type="number" size="mini" min="0" max="99" @change="styleChange" />
</div>
<el-tooltip v-if="attrShow('opacity')" :content="$t('panel.opacity')">
<i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-touming" />
</el-tooltip>
......@@ -121,7 +137,7 @@
</el-tooltip>
</div>
<div v-if="attrShow('date-format')" style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;">
<div v-if="attrShow('date-format')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<el-tooltip content="日期格式">
<date-format :format-info="curComponent.formatInfo" />
</el-tooltip>
......@@ -242,7 +258,9 @@ export default {
'borderRadius',
'color',
'backgroundColor',
'date-format'
'date-format',
'time_margin'
/* 'margin' */
],
// 文本组件显示的属性
'v-text': [
......
frontend/src/components/canvas/custom-component/component-list.js
浏览文件 @ 03ca1530
......@@ -243,7 +243,9 @@ const list = [
borderStyle: 'solid',
borderWidth: 1,
borderColor: '#000000',
borderRadius: 0
borderRadius: 0,
/* margin: 10, */
time_margin: 10
},
formatInfo: {
openMode: '0',
......
frontend/src/components/canvas/utils/style.js
浏览文件 @ 03ca1530
......@@ -9,7 +9,8 @@ export function getStyle(style, filter = []) {
'left',
'borderWidth',
'letterSpacing',
'borderRadius'
'borderRadius',
'margin'
]
const result = {}
......
frontend/src/components/widget/DeWidget/DeShowDate.vue
浏览文件 @ 03ca1530
......@@ -24,6 +24,16 @@ export default {
default: null
}
},
data() {
return {
// time_margin: 0
}
},
computed: {
timeMargin() {
return this.element.style.time_margin
}
},
methods: {
chartResize() {
......
frontend/src/components/widget/DeWidget/TimeDefault.vue
浏览文件 @ 03ca1530
<template>
<span>{{ nowDate }}</span>
<div style="display: flex;align-items: center;" :style="{ 'height': containerHeight, 'margin':timeMargin +'px'}">
<p style="width:100%;margin:auto;">{{ nowDate }}</p>
</div>
</template>
<script>
......@@ -17,6 +21,14 @@ export default {
timer: null
}
},
computed: {
timeMargin() {
return this.element.style.time_margin
},
containerHeight() {
return 'calc(100% - ' + this.element.style.time_margin * 2 + 'px)'
}
},
mounted() {
this.currentTime()
},
......
frontend/src/components/widget/DeWidget/TimeElec.vue
浏览文件 @ 03ca1530
......@@ -32,6 +32,12 @@ export default {
return val
}
return ''
},
timeMargin() {
return this.element.style.time_margin
},
containerHeight() {
return 'calc(100% - ' + this.element.style.time_margin * 2 + 'px)'
}
},
created() {
......
frontend/src/components/widget/DeWidget/TimeSimple.vue
浏览文件 @ 03ca1530
<template>
<div style="height: 100%">
<div class="time-s-class" style="height: calc(100% - 100px);">
<canvas id="canvas" class="de-canvas" :width="element.style.width" :height="element.style.height - 100" />
<div :style="{ 'height': containerHeight}">
<div ref="canvasContainer" class="time-s-class" style="height: calc(100% - 50px);" :style="{'margin':timeMargin +'px'}">
<canvas
id="canvas"
class="de-canvas"
:width="canvas_width"
:height="canvas_height"
/>
<!-- <canvas id="canvas" class="de-canvas" :width="$refs.canvasContainer.clientWidth" :height="$refs.canvasContainer.clientHeight" /> -->
</div>
<div style="height: 100px;">
<p id="fulltime" :style="{'fontSize': (parseInt(element.style.fontSize) * 2) + 'px', 'color':element.style.color}" style="width:100%;margin:auto;" />
<div style="height: 50px;display: flex;align-items: center;">
<p id="fulltime" :style="{'fontSize': (parseInt(element.style.fontSize) * 1) + 'px', 'color':element.style.color}" style="width:100%;margin:auto;" />
</div>
</div>
</template>
......@@ -25,12 +31,26 @@ export default {
week: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
canvas: null,
draw: null,
timer: null
timer: null,
canvas_width: null,
canvas_height: null,
padding: 0
}
},
computed: {
timeMargin() {
return this.element.style.time_margin
},
containerHeight() {
return 'calc(100% - ' + this.element.style.time_margin * 2 + 'px)'
}
},
mounted() {
this.canvas = document.getElementById('canvas')
this.draw = this.canvas.getContext('2d')
this.canvas_width = this.element.style.width
this.canvas_height = this.element.style.height
this.currentTime()
},
beforeDestroy() {
......@@ -51,9 +71,16 @@ export default {
const showWeek = this.element.formatInfo.showWeek
const showDate = this.element.formatInfo.showDate
const canvas_w = this.element.style.width
const canvas_w = this.$refs.canvasContainer.clientWidth || this.element.style.width
if (canvas_w !== this.canvas_width) {
this.canvas_width = canvas_w
}
const canvas_h = this.$refs.canvasContainer.clientHeight || (this.element.style.height - 50)
const canvas_h = this.element.style.height - 100
if (canvas_h !== this.canvas_height) {
this.canvas_height = canvas_h
}
const side_length = Math.min(canvas_w, canvas_h)
......@@ -112,8 +139,10 @@ export default {
draw.beginPath()
draw.moveTo(0, side_length / 2 - 70)
draw.lineTo(0, side_length / 2 - 50)
draw.moveTo(0, side_length / 2 - 0)
/* draw.moveTo(0, side_length / 2 - 70)
draw.lineTo(0, side_length / 2 - 50) */
draw.lineTo(0, side_length / 2 - 20)
draw.closePath()
draw.stroke()
draw.restore()
......@@ -121,17 +150,16 @@ export default {
// 分刻度
for (let i = 0; i < 60; i++) {
draw.save()
// draw.translate(250, 250)
draw.translate(this.element.style.width / 2, (this.element.style.height - 100) / 2)
draw.translate(canvas_w / 2, canvas_h / 2)
draw.rotate(i * 6 * Math.PI / 180)
draw.lineWidth = 2
draw.strokeStyle = this.element.style.color
draw.beginPath()
// draw.moveTo(0, 190)
draw.lineTo(0, side_length / 2 - 50)
// draw.lineTo(0, 180)
draw.lineTo(0, side_length / 2 - 60)
draw.moveTo(0, side_length / 2 - 0)
// draw.lineTo(0, side_length / 2 - 50)
// draw.lineTo(0, side_length / 2 - 60)
draw.lineTo(0, side_length / 2 - 10)
draw.closePath()
draw.stroke()
......@@ -142,7 +170,7 @@ export default {
draw.save()
draw.strokeStyle = this.element.style.color
// draw.translate(250, 250)
draw.translate(this.element.style.width / 2, (this.element.style.height - 100) / 2)
draw.translate(canvas_w / 2, canvas_h / 2)
const hourzs = h + min / 60// 获取浮点类型的小时
draw.rotate(hourzs * 30 * Math.PI / 180)
draw.lineWidth = 6
......@@ -155,7 +183,7 @@ export default {
// 画分针
draw.save()
// draw.translate(250, 250)
draw.translate(this.element.style.width / 2, (this.element.style.height - 100) / 2)
draw.translate(canvas_w / 2, canvas_h / 2)
draw.rotate(min * 6 * Math.PI / 180)
draw.strokeStyle = this.element.style.color
......@@ -169,7 +197,7 @@ export default {
// 画秒针
draw.save()
// draw.translate(250, 250)
draw.translate(this.element.style.width / 2, (this.element.style.height - 100) / 2)
draw.translate(canvas_w / 2, canvas_h / 2)
draw.rotate(s * 6 * Math.PI / 180)
draw.strokeStyle = this.element.style.color
draw.lineWidth = 1
......@@ -186,7 +214,7 @@ export default {
draw.lineWidth = 2
draw.beginPath()
// draw.arc(250, 250, 4, 0, 360, false)
draw.arc(this.element.style.width / 2, (this.element.style.height - 100) / 2, 4, 0, 360, false)
draw.arc(canvas_w / 2, canvas_h / 2, 4, 0, 360, false)
draw.closePath()
draw.fill()
}
......
frontend/src/lang/zh.js
浏览文件 @ 03ca1530
......@@ -1299,6 +1299,8 @@ export default {
fontWeight: '字体粗细',
lineHeight: '行高',
letterSpacing: '字间距',
padding: '内间距',
margin: '外间距',
textAlign: '左右对齐',
opacity: '不透明度',
verticalAlign: '上下对齐',
......
frontend/src/styles/deicon/iconfont.css
浏览文件 @ 03ca1530
@font-face {
font-family: "iconfont"; /* Project id 2459092 */
src: url('iconfont.woff2?t=1634625523445') format('woff2'),
url('iconfont.woff?t=1634625523445') format('woff'),
url('iconfont.ttf?t=1634625523445') format('truetype');
src: url('iconfont.woff2?t=1634802523514') format('woff2'),
url('iconfont.woff?t=1634802523514') format('woff'),
url('iconfont.ttf?t=1634802523514') format('truetype');
}
.iconfont {
......@@ -13,6 +13,14 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-margin:before {
content: "\e902";
}
.icon-padding:before {
content: "\e91b";
}
.icon-tabs:before {
content: "\e9a8";
}
......
frontend/src/styles/deicon/iconfont.js
浏览文件 @ 03ca1530
This source diff could not be displayed because it is too large. You can view the blob instead.
frontend/src/styles/deicon/iconfont.json
浏览文件 @ 03ca1530
......@@ -5,6 +5,20 @@
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "924440",
"name": "margin",
"font_class": "margin",
"unicode": "e902",
"unicode_decimal": 59650
},
{
"icon_id": "924475",
"name": "padding",
"font_class": "padding",
"unicode": "e91b",
"unicode_decimal": 59675
},
{
"icon_id": "11982148",
"name": "tabs",
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论