feat: 增加仪表板时间组件

2026-05-23 22:08:34 +08:00 · 2021-10-19 15:00:24 +08:00
parent df2e1f0800
commit 1bf3f1d5e2
21 changed files with 1029 additions and 22 deletions
--- a/frontend/src/components/widget/DeWidget/TimeElec.vue
+++ b/frontend/src/components/widget/DeWidget/TimeElec.vue
@@ -0,0 +1,112 @@
+<template>
+  <div id="clock" :style="{'--varBg': varBg}">
+    <p class="date">{{ date }}</p>
+    <p class="time" :style="{'fontSize': (parseInt(element.style.fontSize) * 3) + 'px'}">{{ time }}</p>
+  </div>
+</template>
+
+<script>
+import { getThemeCluster } from '@/utils/style'
+export default {
+  name: 'TimeElec',
+  props: {
+    element: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      time: '',
+      date: '',
+      week: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+    }
+  },
+  computed: {
+    varBg() {
+      const color = this.element.style.color
+      const styleCluster = getThemeCluster(color.replace('#', ''))
+      if (styleCluster.length > 2) {
+        const len = styleCluster.length
+        const val = styleCluster[len - 2]
+        return val
+      }
+      return ''
+    }
+  },
+  created() {
+    // this.bigFontSize = (parseInt(this.element.style.fontSize) * 3) + 'px'
+  },
+  mounted() {
+    // this.bigFontSize = this.element.style.fontSize + ''
+    this.currentTime()
+  },
+
+  beforeDestroy() {
+    if (this.updateTime) {
+      clearInterval(this.updateTime) // 在Vue实例销毁前，清除时间定时器
+    }
+  },
+  methods: {
+    currentTime() {
+      setInterval(this.updateTime, 500)
+    },
+    zeroPadding(num, digit) {
+      var zero = ''
+      for (var i = 0; i < digit; i++) {
+        zero += '0'
+      }
+      return (zero + num).slice(-digit)
+    },
+    updateTime() {
+      var cd = new Date()
+      const timeFormat = this.element.formatInfo.timeFormat || 'hh:mm:ss'
+      const showWeek = this.element.formatInfo.showWeek
+      const showDate = this.element.formatInfo.showDate
+      const dateFormat = this.element.formatInfo.dateFormat || 'yyyy-MM-dd'
+      let nowDate = ''
+      if (showDate && dateFormat) {
+        nowDate = cd.format(dateFormat)
+      }
+      const nowWeek = this.week[cd.getDay()]
+
+      this.time = cd.format(timeFormat)
+      this.date = showWeek ? (nowDate + ' ' + nowWeek) : nowDate
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+p {
+  margin: 0;
+  padding: 0;
+}
+
+#clock {
+  font-family: "Share Tech Mono", monospace;
+  // color: #ffffff;
+  // text-align: center;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  // color: #daf6ff;
+  // text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
+  text-shadow: 0 0 20px var(--varBg), 0 0 20px rgba(10, 175, 230, 0);
+}
+#clock .time {
+  letter-spacing: 0.05em;
+  font-size: 80px;
+  padding: 5px 0;
+}
+#clock .date {
+  letter-spacing: 0.1em;
+  //font-size: 24px;
+}
+#clock .text {
+  letter-spacing: 0.1em;
+  font-size: 12px;
+  padding: 20px 0 0;
+}
+</style>