Merge pull request #32 from yaolunmao/Re-1.0

feat: 新增自定义组件：当前时间

src/assets/svgs/custom-vue-now-time.svg

@@ -0,0 +1,9 @@
+<svg viewBox="0 0 1024 1024" version="1.1"
+    xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+    <path
+        d="M512 206.848c-168.448 0-305.152 136.704-305.152 305.152s136.704 305.152 305.152 305.152 305.152-136.704 305.152-305.152-136.704-305.152-305.152-305.152z m0 547.84c-136.704 0-242.688-109.568-242.688-242.688S375.296 269.312 512 269.312 754.688 378.88 754.688 512s-105.984 242.688-242.688 242.688z"
+        fill="#232323"></path>
+    <path
+        d="M590.336 519.68H504.32V375.296c0-15.872-11.776-31.232-31.232-31.232s-31.232 15.872-31.232 31.232v176.128c0 15.872 11.776 31.232 31.232 31.232h117.248c15.872 0 31.232-11.776 31.232-31.232 0-19.968-15.872-31.744-31.232-31.744z"
+        fill="#00AC4E"></path>
+</svg>

src/components/webtopo-svg-edit/components/custom-vue/now-time/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <div class="text-12px font-bold" :style="{ color: props.fontColor }">{{ date }}</div>
+    <div class="flex mt-5px">
+      <div class="text-12px font-bold" :style="{ color: props.fontColor }">{{ week }}</div>
+      <div class="text-12px font-bold ml-5px" :style="{ color: props.fontColor }">{{ time }}</div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { computed, onMounted, ref, onUnmounted } from 'vue';
+  const props = defineProps({
+    fontColor: {
+      type: String,
+      default: '#000000'
+    }
+  });
+  const now_date = ref(new Date());
+  const timer = ref();
+  const date = computed(() => {
+    const year = now_date.value.getFullYear();
+    const month = now_date.value.getMonth() + 1;
+    const day = now_date.value.getDate();
+    const time = year.toString() + '年' + month.toString() + '月' + day.toString() + '日';
+    return time;
+  });
+  const week = computed(() => {
+    const d = now_date.value.getDay();
+    const weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+    const time = weekday[d];
+    return time;
+  });
+  const time = computed(() => {
+    const hour = now_date.value.getHours();
+    const minute = now_date.value.getMinutes();
+    const second = now_date.value.getSeconds();
+    const time =
+      (hour < 10 ? '0' + hour.toString() : hour.toString()) +
+      ':' +
+      (minute < 10 ? '0' + minute.toString() : minute.toString()) +
+      ':' +
+      (second < 10 ? '0' + second.toString() : second.toString());
+    return time;
+  });
+  onMounted(() => {
+    timer.value = setInterval(() => {
+      now_date.value = new Date(); // 修改数据date
+    }, 500);
+  });
+  onUnmounted(() => {
+    clearInterval(timer.value);
+  });
+</script>

src/config-center/index.ts

@@ -5,6 +5,7 @@ import switchDemo from '@/components/webtopo-svg-edit/components/custom-svg/swit
 import { vue_config_center } from './vue';
 import { ElButton, ElTag } from 'element-plus';
 import CommonTable from '@/components/webtopo-svg-edit/components/custom-vue/common-table/index.vue';
+import NowTime from '@/components/webtopo-svg-edit/components/custom-vue/now-time/index.vue';
 import PieCharts from '@/components/webtopo-svg-edit/components/echarts/pie-charts/index.vue';
 export const configCenter: IConfigCenter = {
   svg文件: svgfile_config_center,
@@ -16,5 +17,6 @@ export const ComponentImport: IComponentImport = {
   'el-tag': ElTag,
   'custom-vue-common-table': CommonTable,
   'pie-charts': PieCharts,
-  'switch-demo': switchDemo
+  'switch-demo': switchDemo,
+  'custom-vue-now-time': NowTime
 };

src/config-center/vue/custom-vue/index.ts

@@ -1,9 +1,10 @@
 import { IConfigComponentGroup } from '@/config-center/types';
 
 import { custom_vue_common_table } from './common-table';
+import { custom_vue_now_time } from './now-time';
 
 export const custom_vue_group: IConfigComponentGroup = {
   groupType: 'custom-vue',
   title: '自定义',
-  list: [custom_vue_common_table]
+  list: [custom_vue_common_table, custom_vue_now_time]
 };

src/config-center/vue/custom-vue/now-time/index.ts

@@ -0,0 +1,27 @@
+import { EConfigItemPropsType, EDoneJsonType, IConfigItem } from '@/config-center/types';
+
+export const custom_vue_now_time: IConfigItem = {
+  name: 'custom-vue-now-time',
+  title: '当前时间',
+  tag: 'custom-vue-now-time',
+  type: EDoneJsonType.Vue,
+  config: {
+    can_zoom: true,
+    have_anchor: false,
+    actual_rect: true
+  },
+  display: true,
+  props: {
+    fontColor: {
+      title: '文字颜色',
+      type: EConfigItemPropsType.Color,
+      val: '#000000'
+    }
+  },
+  common_animations: {
+    val: '',
+    delay: 'delay-0s',
+    speed: 'slow',
+    repeat: 'infinite'
+  }
+};