简柏林 / thingskit-view · Commits

Commit fcf8c66c9dc6f0324c6362a07b9bf2e4234841ea

Authored by fengwotao
1 parent 2d369238

feat(src/packages): 信息自定义日期新增快捷日期选择

Inline Side-by-side
Showing 4 changed files with 276 additions and 38 deletions
@@ -13,6 +13,7 @@ export const option = { @@ -13,6 +13,7 @@ export const option = {
13 // 下拉展示 13 // 下拉展示
14 isPanel: 0, 14 isPanel: 0,
15 dataset: dayjs().valueOf(), 15 dataset: dayjs().valueOf(),
  16 + differValue: 0,
16 selectStyleOptions: { 17 selectStyleOptions: {
17 textColor: 'black', 18 textColor: 'black',
18 textBackgroundColor: 'white', 19 textBackgroundColor: 'white',
@@ -22,8 +23,7 @@ export const option = { @@ -22,8 +23,7 @@ export const option = {
22 textSelectModalBackgroundColor: 'black', 23 textSelectModalBackgroundColor: 'black',
23 textSelectModalTextColor: 'black' 24 textSelectModalTextColor: 'black'
24 }, 25 },
25 - //是否开启前一周  
26 - openLastWeek: false 26 + shortcut: null
27 } 27 }
28 28
29 export default class Config extends PublicConfigClass implements CreateComponentType { 29 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -4,27 +4,36 @@ @@ -4,27 +4,36 @@
4 <n-select v-model:value="optionData.isPanel" size="small" :options="panelOptions" /> 4 <n-select v-model:value="optionData.isPanel" size="small" :options="panelOptions" />
5 </setting-item-box> 5 </setting-item-box>
6 </collapse-item> 6 </collapse-item>
7 -  
8 <collapse-item name="时间配置" :expanded="true"> 7 <collapse-item name="时间配置" :expanded="true">
9 - <setting-item-box name="近一周">  
10 - <setting-item>  
11 - <n-switch @change="handleChange" v-model:value="optionData.openLastWeek" size="small"></n-switch> 8 + <setting-item-box name="快捷选择">
  9 + <setting-item name="日期">
  10 + <n-select @change="shortCutSelect" v-model:value="optionData.shortcut" size="small" :options="intervalOption" />
12 </setting-item> 11 </setting-item>
13 </setting-item-box> 12 </setting-item-box>
14 <setting-item-box name="基础"> 13 <setting-item-box name="基础">
15 <setting-item name="类型"> 14 <setting-item name="类型">
16 - <n-select  
17 - @change="handleSelect"  
18 - v-model:value="optionData.componentInteractEventKey"  
19 - size="small"  
20 - :options="datePickerTypeOptions"  
21 - /> 15 + <n-select v-model:value="optionData.componentInteractEventKey" size="small" :options="datePickerTypeOptions" />
22 </setting-item> 16 </setting-item>
23 </setting-item-box> 17 </setting-item-box>
24 -  
25 <setting-item-box name="默认值" :alone="true"> 18 <setting-item-box name="默认值" :alone="true">
26 <n-date-picker size="small" v-model:value="optionData.dataset" :type="optionData.componentInteractEventKey" /> 19 <n-date-picker size="small" v-model:value="optionData.dataset" :type="optionData.componentInteractEventKey" />
27 </setting-item-box> 20 </setting-item-box>
  21 + <setting-item-box :alone="true">
  22 + <template #name>
  23 + <n-text>动态</n-text>
  24 + <n-tooltip trigger="hover">
  25 + <template #trigger>
  26 + <n-icon size="21" :depth="3">
  27 + <help-outline-icon></help-outline-icon>
  28 + </n-icon>
  29 + </template>
  30 + <n-text>动态值不为0时，默认值:取当天时间相加当前值</n-text>
  31 + </n-tooltip>
  32 + </template>
  33 + <n-input-number v-model:value="optionData.differValue" class="input-num-width" size="small" :min="-40" :max="40">
  34 + <template #suffix> 天 </template>
  35 + </n-input-number>
  36 + </setting-item-box>
28 <setting-item-box name="文字颜色" :alone="true"> 37 <setting-item-box name="文字颜色" :alone="true">
29 <SettingItem name="颜色"> 38 <SettingItem name="颜色">
30 <n-color-picker 39 <n-color-picker
@@ -110,6 +119,7 @@ import { icon } from '@/plugins' @@ -110,6 +119,7 @@ import { icon } from '@/plugins'
110 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting' 119 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
111 import { option } from './config' 120 import { option } from './config'
112 import { ComponentInteractEventEnum } from './interact' 121 import { ComponentInteractEventEnum } from './interact'
  122 +import { intervalOption } from './shortcutTime'
113 123
114 const { HelpOutlineIcon } = icon.ionicons5 124 const { HelpOutlineIcon } = icon.ionicons5
115 125
@@ -169,12 +179,10 @@ const datePickerTypeOptions = [ @@ -169,12 +179,10 @@ const datePickerTypeOptions = [
169 value: ComponentInteractEventEnum.QUARTER_RANGE 179 value: ComponentInteractEventEnum.QUARTER_RANGE
170 } 180 }
171 ] 181 ]
172 -const handleChange = (value: boolean) => {  
173 - if (!value) return  
174 - const lastWeekEnd = new Date(new Date().toLocaleDateString()).getTime() - 7 * 24 * 3600 * 1000  
175 - const lastWeekStart = new Date().getTime()  
176 - props.optionData.dataset = [lastWeekEnd, lastWeekStart] as any  
177 -}  
178 182
179 -const handleSelect = (value: string) => (props.optionData.openLastWeek = false) 183 +const shortCutSelect = (value: number) => {
  184 + const startTs = Date.now() - value
  185 + const endTs = Date.now()
  186 + props.optionData.dataset = [startTs, endTs] as any
  187 +}
180 </script> 188 </script>
@@ -10,7 +10,7 @@ @@ -10,7 +10,7 @@
10 </template> 10 </template>
11 11
12 <script setup lang="ts"> 12 <script setup lang="ts">
13 -import { PropType, toRefs, ref, shallowReactive, watch } from 'vue' 13 +import { PropType, toRefs, shallowReactive, watch } from 'vue'
14 import dayjs from 'dayjs' 14 import dayjs from 'dayjs'
15 import { CreateComponentType } from '@/packages/index.d' 15 import { CreateComponentType } from '@/packages/index.d'
16 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' 16 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@@ -27,16 +27,9 @@ const props = defineProps({ @@ -27,16 +27,9 @@ const props = defineProps({
27 27
28 const { w, h } = toRefs(props.chartConfig.attr) 28 const { w, h } = toRefs(props.chartConfig.attr)
29 29
30 -const {  
31 - textColor,  
32 - textBackgroundColor,  
33 - iconColor,  
34 - textBackgroundColorAlpha,  
35 - textSelectModalBackgroundColor,  
36 - textSelectModalTextColor  
37 -} = toRefs(props.chartConfig.option.selectStyleOptions) as any  
38 -  
39 -const rangeDate = ref<number | number[]>() 30 +const { textColor, textBackgroundColor, iconColor, textSelectModalBackgroundColor } = toRefs(
  31 + props.chartConfig.option.selectStyleOptions
  32 +)
40 33
41 const option = shallowReactive({ 34 const option = shallowReactive({
42 dataset: props.chartConfig.option.dataset 35 dataset: props.chartConfig.option.dataset
@@ -67,7 +60,6 @@ const onChange = (v: number | number[]) => { @@ -67,7 +60,6 @@ const onChange = (v: number | number[]) => {
67 } 60 }
68 } 61 }
69 62
70 -// 手动更新  
71 watch( 63 watch(
72 () => props.chartConfig.option.dataset, 64 () => props.chartConfig.option.dataset,
73 (newData: number | number[]) => { 65 (newData: number | number[]) => {
@@ -80,14 +72,32 @@ watch( @@ -80,14 +72,32 @@ watch(
80 } 72 }
81 ) 73 )
82 74
  75 +// 手动更新
  76 +watch(
  77 + () => props.chartConfig.option.differValue,
  78 + (newData: number) => {
  79 + if (props.chartConfig.option.differValue === 0) return
  80 + if (typeof option.dataset === 'object') {
  81 + option.dataset[0] = dayjs().add(newData, 'day').valueOf()
  82 + option.dataset[1] = dayjs().add(newData, 'day').valueOf()
  83 + } else {
  84 + option.dataset = dayjs().add(newData, 'day').valueOf()
  85 + }
  86 + // 关联目标组件首次请求带上默认内容
  87 + onChange(newData)
  88 + },
  89 + {
  90 + immediate: true
  91 + }
  92 +)
  93 +
83 watch( 94 watch(
84 - () => props.chartConfig.option.openLastWeek,  
85 - newData => { 95 + () => props.chartConfig.option.shortcut,
  96 + (newData) => {
86 if (!newData) return 97 if (!newData) return
87 - const lastWeekEnd = new Date(new Date().toLocaleDateString()).getTime() - 7 * 24 * 3600 * 1000  
88 - const lastWeekStart = new Date().getTime()  
89 - props.chartConfig.option.componentInteractEventKey = 'daterange'  
90 - option.dataset = [lastWeekEnd, lastWeekStart] 98 + const startTs = Date.now() - newData
  99 + const endTs = Date.now()
  100 + option.dataset = [startTs, endTs]
91 onChange(option.dataset) 101 onChange(option.dataset)
92 }, 102 },
93 { 103 {
  1 +enum TimeUnit {
  2 + SECOND = 'second',
  3 + MINUTE = 'MINUTE',
  4 + HOUR = 'HOUR',
  5 + DAY = 'DAY'
  6 +}
  7 +
  8 +const unitMapping = {
  9 + [TimeUnit.SECOND]: '秒',
  10 + [TimeUnit.MINUTE]: '分',
  11 + [TimeUnit.HOUR]: '小时',
  12 + [TimeUnit.DAY]: '天'
  13 +}
  14 +
  15 +const unitConversion = {
  16 + [TimeUnit.SECOND]: 1 * 1000,
  17 + [TimeUnit.MINUTE]: 1 * 60 * 1000,
  18 + [TimeUnit.HOUR]: 1 * 60 * 60 * 1000,
  19 + [TimeUnit.DAY]: 1 * 60 * 60 * 24 * 1000
  20 +}
  21 +
  22 +export const intervalOption = [
  23 + {
  24 + id: 1,
  25 + unit: TimeUnit.SECOND,
  26 + linkage: [{ id: 1, unit: TimeUnit.SECOND }]
  27 + },
  28 + {
  29 + id: 5,
  30 + unit: TimeUnit.SECOND,
  31 + linkage: [{ id: 1, unit: TimeUnit.SECOND }]
  32 + },
  33 + {
  34 + id: 10,
  35 + unit: TimeUnit.SECOND,
  36 + linkage: [{ id: 1, unit: TimeUnit.SECOND }]
  37 + },
  38 + {
  39 + id: 15,
  40 + unit: TimeUnit.SECOND,
  41 + linkage: [{ id: 1, unit: TimeUnit.SECOND }]
  42 + },
  43 + {
  44 + id: 30,
  45 + unit: TimeUnit.SECOND,
  46 + linkage: [{ id: 1, unit: TimeUnit.SECOND }]
  47 + },
  48 + {
  49 + id: 1,
  50 + unit: TimeUnit.MINUTE,
  51 + linkage: [
  52 + { id: 1, unit: TimeUnit.SECOND },
  53 + { id: 5, unit: TimeUnit.SECOND }
  54 + ]
  55 + },
  56 + {
  57 + id: 2,
  58 + unit: TimeUnit.MINUTE,
  59 + linkage: [
  60 + { id: 1, unit: TimeUnit.SECOND },
  61 + { id: 5, unit: TimeUnit.SECOND },
  62 + { id: 10, unit: TimeUnit.SECOND },
  63 + { id: 15, unit: TimeUnit.SECOND }
  64 + ]
  65 + },
  66 + {
  67 + id: 5,
  68 + unit: TimeUnit.MINUTE,
  69 + linkage: [
  70 + { id: 1, unit: TimeUnit.SECOND },
  71 + { id: 5, unit: TimeUnit.SECOND },
  72 + { id: 10, unit: TimeUnit.SECOND },
  73 + { id: 15, unit: TimeUnit.SECOND },
  74 + { id: 30, unit: TimeUnit.SECOND }
  75 + ]
  76 + },
  77 + {
  78 + id: 10,
  79 + unit: TimeUnit.MINUTE,
  80 + linkage: [
  81 + { id: 5, unit: TimeUnit.SECOND },
  82 + { id: 10, unit: TimeUnit.SECOND },
  83 + { id: 15, unit: TimeUnit.SECOND },
  84 + { id: 30, unit: TimeUnit.SECOND },
  85 + { id: 1, unit: TimeUnit.MINUTE }
  86 + ]
  87 + },
  88 + {
  89 + id: 15,
  90 + unit: TimeUnit.MINUTE,
  91 + linkage: [
  92 + { id: 5, unit: TimeUnit.SECOND },
  93 + { id: 10, unit: TimeUnit.SECOND },
  94 + { id: 15, unit: TimeUnit.SECOND },
  95 + { id: 30, unit: TimeUnit.SECOND },
  96 + { id: 1, unit: TimeUnit.MINUTE },
  97 + { id: 2, unit: TimeUnit.MINUTE }
  98 + ]
  99 + },
  100 + {
  101 + id: 30,
  102 + unit: TimeUnit.MINUTE,
  103 + linkage: [
  104 + { id: 5, unit: TimeUnit.SECOND },
  105 + { id: 10, unit: TimeUnit.SECOND },
  106 + { id: 15, unit: TimeUnit.SECOND },
  107 + { id: 30, unit: TimeUnit.SECOND },
  108 + { id: 1, unit: TimeUnit.MINUTE },
  109 + { id: 2, unit: TimeUnit.MINUTE }
  110 + ]
  111 + },
  112 + {
  113 + id: 1,
  114 + unit: TimeUnit.HOUR,
  115 + linkage: [
  116 + { id: 10, unit: TimeUnit.SECOND },
  117 + { id: 15, unit: TimeUnit.SECOND },
  118 + { id: 30, unit: TimeUnit.SECOND },
  119 + { id: 1, unit: TimeUnit.MINUTE },
  120 + { id: 2, unit: TimeUnit.MINUTE },
  121 + { id: 5, unit: TimeUnit.MINUTE }
  122 + ]
  123 + },
  124 + {
  125 + id: 2,
  126 + unit: TimeUnit.HOUR,
  127 + linkage: [
  128 + { id: 15, unit: TimeUnit.SECOND },
  129 + { id: 30, unit: TimeUnit.SECOND },
  130 + { id: 1, unit: TimeUnit.MINUTE },
  131 + { id: 2, unit: TimeUnit.MINUTE },
  132 + { id: 5, unit: TimeUnit.MINUTE },
  133 + { id: 10, unit: TimeUnit.MINUTE },
  134 + { id: 15, unit: TimeUnit.MINUTE }
  135 + ]
  136 + },
  137 + {
  138 + id: 5,
  139 + unit: TimeUnit.HOUR,
  140 + linkage: [
  141 + { id: 1, unit: TimeUnit.MINUTE },
  142 + { id: 2, unit: TimeUnit.MINUTE },
  143 + { id: 5, unit: TimeUnit.MINUTE },
  144 + { id: 10, unit: TimeUnit.MINUTE },
  145 + { id: 15, unit: TimeUnit.MINUTE },
  146 + { id: 30, unit: TimeUnit.MINUTE }
  147 + ]
  148 + },
  149 + {
  150 + id: 10,
  151 + unit: TimeUnit.HOUR,
  152 + linkage: [
  153 + { id: 2, unit: TimeUnit.MINUTE },
  154 + { id: 5, unit: TimeUnit.MINUTE },
  155 + { id: 10, unit: TimeUnit.MINUTE },
  156 + { id: 15, unit: TimeUnit.MINUTE },
  157 + { id: 30, unit: TimeUnit.MINUTE },
  158 + { id: 1, unit: TimeUnit.HOUR }
  159 + ]
  160 + },
  161 + {
  162 + id: 12,
  163 + unit: TimeUnit.HOUR,
  164 + linkage: [
  165 + { id: 2, unit: TimeUnit.MINUTE },
  166 + { id: 5, unit: TimeUnit.MINUTE },
  167 + { id: 10, unit: TimeUnit.MINUTE },
  168 + { id: 15, unit: TimeUnit.MINUTE },
  169 + { id: 30, unit: TimeUnit.MINUTE },
  170 + { id: 1, unit: TimeUnit.HOUR }
  171 + ]
  172 + },
  173 + {
  174 + id: 1,
  175 + unit: TimeUnit.DAY,
  176 + linkage: [
  177 + { id: 5, unit: TimeUnit.MINUTE },
  178 + { id: 10, unit: TimeUnit.MINUTE },
  179 + { id: 15, unit: TimeUnit.MINUTE },
  180 + { id: 30, unit: TimeUnit.MINUTE },
  181 + { id: 1, unit: TimeUnit.HOUR },
  182 + { id: 2, unit: TimeUnit.HOUR }
  183 + ]
  184 + },
  185 + {
  186 + id: 7,
  187 + unit: TimeUnit.DAY,
  188 + linkage: [
  189 + { id: 30, unit: TimeUnit.MINUTE },
  190 + { id: 1, unit: TimeUnit.HOUR },
  191 + { id: 2, unit: TimeUnit.HOUR },
  192 + { id: 5, unit: TimeUnit.HOUR },
  193 + { id: 10, unit: TimeUnit.HOUR },
  194 + { id: 12, unit: TimeUnit.HOUR },
  195 + { id: 1, unit: TimeUnit.DAY }
  196 + ]
  197 + },
  198 + {
  199 + id: 30,
  200 + unit: TimeUnit.DAY,
  201 + linkage: [
  202 + { id: 2, unit: TimeUnit.HOUR },
  203 + { id: 5, unit: TimeUnit.HOUR },
  204 + { id: 10, unit: TimeUnit.HOUR },
  205 + { id: 12, unit: TimeUnit.HOUR },
  206 + { id: 1, unit: TimeUnit.DAY }
  207 + ]
  208 + }
  209 +].map(item => {
  210 + return {
  211 + value: item.id * unitConversion[item.unit],
  212 + label: `近${item.id + unitMapping[item.unit]}`,
  213 + linkage: item.linkage.map(item => {
  214 + return {
  215 + value: item.id * unitConversion[item.unit],
  216 + label: `近${item.id + unitMapping[item.unit]}`
  217 + }
  218 + })
  219 + }
  220 +})