feat: 完善仪表板时间组件

frontend/src/components/canvas/components/TextAttr.vue

@@ -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

@@ -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

@@ -9,7 +9,8 @@ export function getStyle(style, filter = []) {
     'left',
     'borderWidth',
     'letterSpacing',
-    'borderRadius'
+    'borderRadius',
+    'margin'
   ]
 
   const result = {}

frontend/src/components/widget/DeWidget/DeShowDate.vue

@@ -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

@@ -1,5 +1,9 @@
 <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

@@ -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

@@ -1,10 +1,16 @@
 <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.element.style.height - 100
+      const canvas_h = this.$refs.canvasContainer.clientHeight || (this.element.style.height - 50)
+
+      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

@@ -1297,6 +1297,8 @@ export default {
     fontWeight: '字体粗细',
     lineHeight: '行高',
     letterSpacing: '字间距',
+    padding: '内间距',
+    margin: '外间距',
     textAlign: '左右对齐',
     opacity: '不透明度',
     verticalAlign: '上下对齐',

frontend/src/styles/deicon/iconfont.css

@@ -1,8 +1,8 @@
 @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.json

@@ -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",