!39 通用时间控件

Merge pull request !39 from jiangcheng/dev

src/packages/components/Decorates/Mores/TimeCommon/config.ts

@@ -0,0 +1,38 @@
+import { publicConfig } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { TimeCommonConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
+
+export enum FontWeightEnum {
+  NORMAL = '常规',
+  BOLD = '加粗'
+}
+
+export const FontWeightObject = {
+  [FontWeightEnum.NORMAL]: 'normal',
+  [FontWeightEnum.BOLD]: 'bold'
+}
+
+export const option = {
+  // 数据说明
+  timeSize: 24,
+  timeLineHeight: 50,
+  timeTextIndent: 2,
+  timeColor: '#E6F7FF',
+  fontWeight: 'normal',
+
+  //阴影
+  showShadow:  true,
+  hShadow: 0,
+  vShadow: 0,
+  blurShadow: 8,
+  colorShadow: '#0075ff'
+}
+
+export default class Config extends publicConfig implements CreateComponentType {
+  public key = TimeCommonConfig.key
+  public attr = { ...chartInitConfig, w: 300, h: 50, zIndex: -1 }
+  public chartConfig = cloneDeep(TimeCommonConfig)
+  public option = cloneDeep(option)
+}

src/packages/components/Decorates/Mores/TimeCommon/config.vue

@@ -0,0 +1,99 @@
+<template>
+  <CollapseItem name="内容" :expanded="true">
+    <SettingItemBox name="字体">
+      <SettingItem name="大小">
+        <n-input-number
+          v-model:value="optionData.timeSize"
+          size="small"
+          :min="1"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="粗细">
+        <n-select
+          v-model:value="optionData.fontWeight"
+          size="small"
+          :options="fontWeightOptions"
+        />
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="间距">
+      <SettingItem name="字距">
+        <n-input-number
+          v-model:value="optionData.timeTextIndent"
+          size="small"
+          :min="1"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="行距">
+        <n-input-number
+          v-model:value="optionData.timeLineHeight"
+          size="small"
+          :min="1"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox name="颜色">
+      <SettingItem name="时间">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.timeColor"
+        ></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="阴影">
+      <SettingItem>
+        <n-space>
+          <n-switch v-model:value="optionData.showShadow" size="small" />
+          <n-text>展示阴影</n-text>
+        </n-space>
+      </SettingItem>
+      <SettingItem name="x">
+        <n-input-number v-model:value="optionData.hShadow" size="small"></n-input-number
+      ></SettingItem>
+      <SettingItem name="y">
+        <n-input-number v-model:value="optionData.vShadow" size="small"></n-input-number
+      ></SettingItem>
+      <SettingItem name="模糊">
+        <n-input-number
+          v-model:value="optionData.blurShadow"
+          size="small"
+        ></n-input-number
+      ></SettingItem>
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.colorShadow"
+        ></n-color-picker
+      ></SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+<script setup lang="ts">
+import { PropType } from "vue";
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem,
+} from "@/components/Pages/ChartItemSetting";
+import { option, FontWeightEnum, FontWeightObject } from "./config";
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true,
+  },
+});
+const fontWeightOptions = [
+  {
+    label: FontWeightEnum.NORMAL,
+    value: FontWeightObject[FontWeightEnum.NORMAL],
+  },
+  {
+    label: FontWeightEnum.BOLD,
+    value: FontWeightObject[FontWeightEnum.BOLD],
+  },
+];
+</script>

src/packages/components/Decorates/Mores/TimeCommon/index.ts

@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/decorates/time-common.png'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+
+export const TimeCommonConfig: ConfigType = {
+  key: 'TimeCommon',
+  chartKey: 'VTimeCommon',
+  conKey: 'VCTimeCommon',
+  title: '通用时间',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.DECORATES,
+  image
+}

src/packages/components/Decorates/Mores/TimeCommon/index.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="go-decorates-number" :style="`width:${w}px;height:${h}px;`">
+    <div
+      :style="`color:${timeColor};font-size:${timeSize}px;line-height:${timeLineHeight}px;
+      letter-spacing:${timeTextIndent}px;font-weight:${fontWeight};
+      text-shadow: ${boxShadow}`"
+    >
+      {{ newData }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, ref, reactive, watch, onMounted, onUnmounted } from "vue";
+import { CreateComponentType } from "@/packages/index.d";
+import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
+import { useChartDataFetch } from "@/hooks";
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true,
+  },
+});
+let yearMonthDay = ref("2021-2-3");
+let nowData = ref("08:00:00");
+let newData = ref("2021-2-3 08:00:00");
+let boxShadow = ref("none");
+
+const { w, h } = toRefs(props.chartConfig.attr);
+
+let {
+  timeColor,
+  timeSize,
+  timeLineHeight,
+  timeTextIndent,
+  fontWeight,
+  showShadow,
+  hShadow,
+  vShadow,
+  blurShadow,
+  colorShadow,
+} = toRefs(props.chartConfig.option);
+
+watch(
+  props.chartConfig.option,
+  () => {
+    if (props.chartConfig.option.showShadow) {
+      boxShadow.value = `${props.chartConfig.option.hShadow}px ${props.chartConfig.option.vShadow}px ${props.chartConfig.option.blurShadow}px ${props.chartConfig.option.colorShadow}`;
+    } else {
+      boxShadow.value = "none";
+    }
+  },
+  {
+    immediate: true,
+  }
+);
+onMounted(() => {
+  const timer = setInterval(() => {
+    var datetime = new Date();
+    var year = datetime.getFullYear();
+    var month =
+      datetime.getMonth() + 1 < 10
+        ? "0" + (datetime.getMonth() + 1)
+        : datetime.getMonth() + 1;
+    var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
+    var hh = datetime.getHours(); // 时
+    var mm = datetime.getMinutes(); // 分
+    var ss = datetime.getSeconds(); // 分
+    let time = "";
+    if (hh < 10) time += "0";
+    time += hh + ":";
+    if (mm < 10) time += "0";
+    time += mm + ":";
+    if (ss < 10) time += "0";
+    time += ss;
+    yearMonthDay.value = `${year}-${month}-${date}`;
+    nowData.value = time;
+    newData.value = yearMonthDay.value + " " + nowData.value;
+  }, 500);
+});
+onUnmounted(() => {
+  clearInterval();
+});
+useChartDataFetch(props.chartConfig, useChartEditStore);
+</script>
+
+<style lang="scss" scoped>
+@include go("decorates-number") {
+  text-align: center;
+}
+</style>

src/packages/components/Decorates/Mores/index.ts

@@ -2,5 +2,6 @@ import { WeatherConfig } from './Weather/index'
 import { TimeConfig } from './Time/index'
 import { WeatherTimeConfig } from './WeatherTime/index'
 import { NumberConfig } from './Number/index'
+import { TimeCommonConfig } from './TimeCommon/index'
 
-export default [WeatherConfig, TimeConfig, WeatherTimeConfig, NumberConfig]
+export default [WeatherConfig, TimeCommonConfig, TimeConfig, WeatherTimeConfig, NumberConfig]