Compare commits
5 Commits
c870103d4c
...
ed99d3ce76
| Author | SHA1 | Date |
|---|---|---|
 刘凯
|
ed99d3ce76 | 11 months ago |
|
刘凯
|
100855c936 | 11 months ago |
|
刘凯
|
da27ad744a | 11 months ago |
|
刘凯
|
a532e9c318 | 11 months ago |
|
刘凯
|
d127e0aa42 | 11 months ago |
95 changed files with 3085 additions and 5116 deletions
@ -1,4 +0,0 @@
|
||||
export { default as CronTab } from './src/CronTabInput.vue' |
||||
export { default as CronTabInner } from './src/CronTabInner.vue' |
||||
export { default as CronTabModal } from './src/CronTabModal.vue' |
||||
export { default as CronValidator } from './src/validator' |
||||
@ -1,360 +0,0 @@
|
||||
<script lang="ts" setup> |
||||
import { computed, provide, reactive, ref, watch } from 'vue' |
||||
import { Col, Divider, Input, Row, TabPane, Tabs, Textarea, Tooltip } from 'ant-design-vue' |
||||
import CronParser from 'cron-parser' |
||||
import SecondUI from './tabs/SecondUI.vue' |
||||
import MinuteUI from './tabs/MinuteUI.vue' |
||||
import HourUI from './tabs/HourUI.vue' |
||||
import DayUI from './tabs/DayUI.vue' |
||||
import MonthUI from './tabs/MonthUI.vue' |
||||
import WeekUI from './tabs/WeekUI.vue' |
||||
import YearUI from './tabs/YearUI.vue' |
||||
import { cronEmits, cronProps } from './cron.data' |
||||
import { useDesign } from '@/hooks/web/useDesign' |
||||
import { dateFormat } from '@/utils/dateUtil' |
||||
import { simpleDebounce } from '@/utils' |
||||
|
||||
const props = defineProps({ ...cronProps }) |
||||
const emit = defineEmits([...cronEmits]) |
||||
const { prefixCls } = useDesign('cron-inner') |
||||
provide('prefixCls', prefixCls) |
||||
const activeKey = ref(props.hideSecond ? 'minute' : 'second') |
||||
const second = ref('*') |
||||
const minute = ref('*') |
||||
const hour = ref('*') |
||||
const day = ref('*') |
||||
const month = ref('*') |
||||
const week = ref('?') |
||||
const year = ref('*') |
||||
const inputValues = reactive({ |
||||
second: '', |
||||
minute: '', |
||||
hour: '', |
||||
day: '', |
||||
month: '', |
||||
week: '', |
||||
year: '', |
||||
cron: '', |
||||
}) |
||||
const preTimeList = ref('执行预览，会忽略年份参数。') |
||||
|
||||
// cron表达式 |
||||
const cronValueInner = computed(() => { |
||||
const result: string[] = [] |
||||
if (!props.hideSecond) |
||||
result.push(second.value ? second.value : '*') |
||||
|
||||
result.push(minute.value ? minute.value : '*') |
||||
result.push(hour.value ? hour.value : '*') |
||||
result.push(day.value ? day.value : '*') |
||||
result.push(month.value ? month.value : '*') |
||||
result.push(week.value ? week.value : '?') |
||||
if (!props.hideYear && !props.hideSecond) |
||||
result.push(year.value ? year.value : '*') |
||||
return result.join(' ') |
||||
}) |
||||
// 不含年 |
||||
const cronValueNoYear = computed(() => { |
||||
const v = cronValueInner.value |
||||
if (props.hideYear || props.hideSecond) |
||||
return v |
||||
const vs = v.split(' ') |
||||
if (vs.length >= 6) { |
||||
// 转成 Quartz 的规则 |
||||
vs[5] = convertWeekToQuartz(vs[5]) |
||||
} |
||||
return vs.slice(0, vs.length - 1).join(' ') |
||||
}) |
||||
const calTriggerList = simpleDebounce(calTriggerListInner, 500) |
||||
|
||||
watch( |
||||
() => props.value, |
||||
(newVal) => { |
||||
if (newVal === cronValueInner.value) |
||||
return |
||||
|
||||
formatValue() |
||||
}, |
||||
) |
||||
|
||||
watch(cronValueInner, (newValue) => { |
||||
calTriggerList() |
||||
emitValue(newValue) |
||||
assignInput() |
||||
}) |
||||
|
||||
assignInput() |
||||
formatValue() |
||||
calTriggerListInner() |
||||
|
||||
function assignInput() { |
||||
inputValues.second = second.value |
||||
inputValues.minute = minute.value |
||||
inputValues.hour = hour.value |
||||
inputValues.day = day.value |
||||
inputValues.month = month.value |
||||
inputValues.week = week.value |
||||
inputValues.year = year.value |
||||
inputValues.cron = cronValueInner.value |
||||
} |
||||
|
||||
function formatValue() { |
||||
if (!props.value) |
||||
return |
||||
const values = props.value.split(' ').filter(item => !!item) |
||||
if (!values || values.length <= 0) |
||||
return |
||||
let i = 0 |
||||
if (!props.hideSecond) |
||||
second.value = values[i++] |
||||
if (values.length > i) |
||||
minute.value = values[i++] |
||||
if (values.length > i) |
||||
hour.value = values[i++] |
||||
if (values.length > i) |
||||
day.value = values[i++] |
||||
if (values.length > i) |
||||
month.value = values[i++] |
||||
if (values.length > i) |
||||
week.value = values[i++] |
||||
if (values.length > i) |
||||
year.value = values[i] |
||||
assignInput() |
||||
} |
||||
|
||||
// Quartz 的规则： |
||||
// 1 = 周日，2 = 周一，3 = 周二，4 = 周三，5 = 周四，6 = 周五，7 = 周六 |
||||
function convertWeekToQuartz(week: string) { |
||||
const convert = (v: string) => { |
||||
if (v === '0') |
||||
return '1' |
||||
|
||||
if (v === '1') |
||||
return '0' |
||||
|
||||
return (Number.parseInt(v) - 1).toString() |
||||
} |
||||
// 匹配示例 1-7 or 1/7 |
||||
const patten1 = /^([0-7])([-/])([0-7])$/ |
||||
// 匹配示例 1,4,7 |
||||
const patten2 = /^([0-7])(,[0-7])+$/ |
||||
if (/^[0-7]$/.test(week)) { |
||||
return convert(week) |
||||
} |
||||
else if (patten1.test(week)) { |
||||
return week.replace(patten1, (_$0, before, separator, after) => { |
||||
if (separator === '/') |
||||
return convert(before) + separator + after |
||||
else |
||||
return convert(before) + separator + convert(after) |
||||
}) |
||||
} |
||||
else if (patten2.test(week)) { |
||||
return week |
||||
.split(',') |
||||
.map(v => convert(v)) |
||||
.join(',') |
||||
} |
||||
return week |
||||
} |
||||
|
||||
function calTriggerListInner() { |
||||
// 设置了回调函数 |
||||
if (props.remote) { |
||||
props.remote(cronValueInner.value, +new Date(), (v) => { |
||||
preTimeList.value = v |
||||
}) |
||||
return |
||||
} |
||||
const format = 'yyyy-MM-dd hh:mm:ss' |
||||
const options = { |
||||
currentDate: dateFormat(new Date(), format), |
||||
} |
||||
const iter = CronParser.parseExpression(cronValueNoYear.value, options) |
||||
const result: string[] = [] |
||||
for (let i = 1; i <= 10; i++) |
||||
result.push(dateFormat(new Date(iter.next() as any), format)) |
||||
|
||||
preTimeList.value = result.length > 0 ? result.join('\n') : '无执行时间' |
||||
} |
||||
|
||||
function onInputBlur() { |
||||
second.value = inputValues.second |
||||
minute.value = inputValues.minute |
||||
hour.value = inputValues.hour |
||||
day.value = inputValues.day |
||||
month.value = inputValues.month |
||||
week.value = inputValues.week |
||||
year.value = inputValues.year |
||||
} |
||||
|
||||
function onInputCronBlur(event) { |
||||
emitValue(event.target.value) |
||||
} |
||||
|
||||
function emitValue(value) { |
||||
emit('change', value) |
||||
emit('update:value', value) |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<div :class="`${prefixCls}`"> |
||||
<div class="content"> |
||||
<Tabs v-model:activeKey="activeKey" size="small"> |
||||
<TabPane v-if="!hideSecond" key="second" tab="秒"> |
||||
<SecondUI v-model:value="second" :disabled="disabled" /> |
||||
</TabPane> |
||||
<TabPane key="minute" tab="分"> |
||||
<MinuteUI v-model:value="minute" :disabled="disabled" /> |
||||
</TabPane> |
||||
<TabPane key="hour" tab="时"> |
||||
<HourUI v-model:value="hour" :disabled="disabled" /> |
||||
</TabPane> |
||||
<TabPane key="day" tab="日"> |
||||
<DayUI v-model:value="day" :week="week" :disabled="disabled" /> |
||||
</TabPane> |
||||
<TabPane key="month" tab="月"> |
||||
<MonthUI v-model:value="month" :disabled="disabled" /> |
||||
</TabPane> |
||||
<TabPane key="week" tab="周"> |
||||
<WeekUI v-model:value="week" :day="day" :disabled="disabled" /> |
||||
</TabPane> |
||||
<TabPane v-if="!hideYear && !hideSecond" key="year" tab="年"> |
||||
<YearUI v-model:value="year" :disabled="disabled" /> |
||||
</TabPane> |
||||
</Tabs> |
||||
<Divider /> |
||||
<!-- 执行时间预览 --> |
||||
<Row :gutter="8"> |
||||
<Col :span="18" style="margin-top: 22px"> |
||||
<Row :gutter="8"> |
||||
<Col :span="8" style="margin-bottom: 12px"> |
||||
<Input v-model:value="inputValues.second" @blur="onInputBlur"> |
||||
<template #addonBefore> |
||||
<span class="allow-click" @click="activeKey = 'second'">秒</span> |
||||
</template> |
||||
</Input> |
||||
</Col> |
||||
<Col :span="8" style="margin-bottom: 12px"> |
||||
<Input v-model:value="inputValues.minute" @blur="onInputBlur"> |
||||
<template #addonBefore> |
||||
<span class="allow-click" @click="activeKey = 'minute'">分</span> |
||||
</template> |
||||
</Input> |
||||
</Col> |
||||
<Col :span="8" style="margin-bottom: 12px"> |
||||
<Input v-model:value="inputValues.hour" @blur="onInputBlur"> |
||||
<template #addonBefore> |
||||
<span class="allow-click" @click="activeKey = 'hour'">时</span> |
||||
</template> |
||||
</Input> |
||||
</Col> |
||||
<Col :span="8" style="margin-bottom: 12px"> |
||||
<Input v-model:value="inputValues.day" @blur="onInputBlur"> |
||||
<template #addonBefore> |
||||
<span class="allow-click" @click="activeKey = 'day'">日</span> |
||||
</template> |
||||
</Input> |
||||
</Col> |
||||
<Col :span="8" style="margin-bottom: 12px"> |
||||
<Input v-model:value="inputValues.month" @blur="onInputBlur"> |
||||
<template #addonBefore> |
||||
<span class="allow-click" @click="activeKey = 'month'">月</span> |
||||
</template> |
||||
</Input> |
||||
</Col> |
||||
<Col :span="8" style="margin-bottom: 12px"> |
||||
<Input v-model:value="inputValues.week" @blur="onInputBlur"> |
||||
<template #addonBefore> |
||||
<span class="allow-click" @click="activeKey = 'week'">周</span> |
||||
</template> |
||||
</Input> |
||||
</Col> |
||||
<Col :span="8"> |
||||
<Input v-model:value="inputValues.year" @blur="onInputBlur"> |
||||
<template #addonBefore> |
||||
<span class="allow-click" @click="activeKey = 'year'">年</span> |
||||
</template> |
||||
</Input> |
||||
</Col> |
||||
<Col :span="16"> |
||||
<Input v-model:value="inputValues.cron" @blur="onInputCronBlur"> |
||||
<template #addonBefore> |
||||
<Tooltip title="Cron表达式"> |
||||
式 |
||||
</Tooltip> |
||||
</template> |
||||
</Input> |
||||
</Col> |
||||
</Row> |
||||
</Col> |
||||
<Col :span="6"> |
||||
<div>近十次执行时间（不含年）</div> |
||||
<Textarea :value="preTimeList" :rows="5" /> |
||||
</Col> |
||||
</Row> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<style lang="less"> |
||||
@prefix-cls: ~'@{namespace}-cron-inner'; |
||||
|
||||
.@{prefix-cls} { |
||||
.content { |
||||
.ant-checkbox-wrapper + .ant-checkbox-wrapper { |
||||
margin-left: 0; |
||||
} |
||||
} |
||||
|
||||
&-config-list { |
||||
margin: 0 10px 10px; |
||||
text-align: left; |
||||
|
||||
.item { |
||||
margin-top: 5px; |
||||
font-size: 14px; |
||||
|
||||
span { |
||||
padding: 0 2px; |
||||
} |
||||
} |
||||
|
||||
.choice { |
||||
padding: 5px 8px; |
||||
} |
||||
|
||||
.w60 { |
||||
width: 60px; |
||||
min-width: 60px; |
||||
} |
||||
|
||||
.w80 { |
||||
width: 80px; |
||||
min-width: 80px; |
||||
} |
||||
|
||||
.list { |
||||
margin: 0 20px; |
||||
} |
||||
|
||||
.list-check-item { |
||||
width: 4em; |
||||
padding: 1px 3px; |
||||
} |
||||
|
||||
.list-cn .list-check-item { |
||||
width: 5em; |
||||
} |
||||
|
||||
.tip-info { |
||||
color: #999; |
||||
} |
||||
} |
||||
|
||||
.allow-click { |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,55 +0,0 @@
|
||||
<script lang="ts" setup> |
||||
import { ref, watch } from 'vue' |
||||
import { Input } from 'ant-design-vue' |
||||
import CronTabModal from './CronTabModal.vue' |
||||
import { cronEmits, cronProps } from './cron.data' |
||||
import { useModal } from '@/components/Modal' |
||||
import { propTypes } from '@/utils/propTypes' |
||||
|
||||
const props = defineProps({ |
||||
...cronProps, |
||||
placeholder: propTypes.string.def('请输入cron表达式'), |
||||
exeStartTime: propTypes.oneOfType([propTypes.number, propTypes.string, propTypes.object]).def(0), |
||||
}) |
||||
const emit = defineEmits([...cronEmits]) |
||||
const [registerModal, { openModal }] = useModal() |
||||
const editCronValue = ref(props.value) |
||||
|
||||
watch( |
||||
() => props.value, |
||||
(newVal) => { |
||||
if (newVal !== editCronValue.value) |
||||
editCronValue.value = newVal |
||||
}, |
||||
) |
||||
watch(editCronValue, (newVal) => { |
||||
emit('change', newVal) |
||||
emit('update:value', newVal) |
||||
}) |
||||
|
||||
function showConfigModal() { |
||||
if (!props.disabled) |
||||
openModal() |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<div> |
||||
<Input v-model:value="editCronValue" :placeholder="placeholder" :disabled="disabled"> |
||||
<template #addonAfter> |
||||
<a class="cursor-pointer" :disabled="disabled ? 'disabled' : null" @click="showConfigModal"> |
||||
<span class="i-ant-design:setting-outlined relative right-0.5 top-0.25" /> |
||||
<span>选择</span> |
||||
</a> |
||||
</template> |
||||
</Input> |
||||
<CronTabModal |
||||
v-model:value="editCronValue" |
||||
:exe-start-time="exeStartTime" |
||||
:hide-year="hideYear" |
||||
:remote="remote" |
||||
:hide-second="hideSecond" |
||||
@register="registerModal" |
||||
/> |
||||
</div> |
||||
</template> |
||||
@ -1,18 +0,0 @@
|
||||
<script lang="ts" setup> |
||||
import CronTab from './CronTabInner.vue' |
||||
import { BasicModal, useModalInner } from '@/components/Modal' |
||||
|
||||
defineOptions({ name: 'CronTabModal', inheritAttrs: false }) |
||||
|
||||
const [registerModal, { closeModal }] = useModalInner() |
||||
|
||||
function onOk() { |
||||
closeModal() |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<BasicModal title="Cron表达式" width="800px" @register="registerModal" @ok="onOk"> |
||||
<CronTab v-bind="$attrs" /> |
||||
</BasicModal> |
||||
</template> |
||||
@ -1,10 +0,0 @@
|
||||
import { propTypes } from '@/utils/propTypes' |
||||
|
||||
export const cronEmits = ['change', 'update:value'] |
||||
export const cronProps = { |
||||
value: propTypes.string.def(''), |
||||
disabled: propTypes.bool.def(false), |
||||
hideSecond: propTypes.bool.def(false), |
||||
hideYear: propTypes.bool.def(false), |
||||
remote: propTypes.func, |
||||
} |
||||
@ -1,101 +0,0 @@
|
||||
<script lang="ts"> |
||||
import { computed, defineComponent, watch } from 'vue' |
||||
import { Checkbox, Input, Radio } from 'ant-design-vue' |
||||
import { TypeEnum, useTabEmits, useTabProps, useTabSetup } from './useTabMixin' |
||||
|
||||
export default defineComponent({ |
||||
name: 'DayUI', |
||||
components: { AInput: Input, Checkbox, CheckboxGroup: Checkbox.Group, Radio, RadioGroup: Radio.Group }, |
||||
props: useTabProps({ |
||||
defaultValue: '*', |
||||
props: { |
||||
week: { type: String, default: '?' }, |
||||
}, |
||||
}), |
||||
emits: useTabEmits(), |
||||
setup(props, context) { |
||||
const disabledChoice = computed(() => { |
||||
return (props.week && props.week !== '?') || props.disabled |
||||
}) |
||||
const setup = useTabSetup(props, context, { |
||||
defaultValue: '*', |
||||
valueWork: 1, |
||||
minValue: 1, |
||||
maxValue: 31, |
||||
valueRange: { start: 1, end: 31 }, |
||||
valueLoop: { start: 1, interval: 1 }, |
||||
disabled: disabledChoice, |
||||
}) |
||||
const typeWorkAttrs = computed(() => ({ |
||||
disabled: setup.type.value !== TypeEnum.work || props.disabled || disabledChoice.value, |
||||
...setup.inputNumberAttrs.value, |
||||
})) |
||||
|
||||
watch( |
||||
() => props.week, |
||||
() => { |
||||
setup.updateValue(disabledChoice.value ? '?' : setup.computeValue.value) |
||||
}, |
||||
) |
||||
|
||||
return { ...setup, typeWorkAttrs } |
||||
}, |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<div :class="`${prefixCls}-config-list`"> |
||||
<RadioGroup v-model:value="type"> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.unset" v-bind="beforeRadioAttrs"> |
||||
不设置 |
||||
</Radio> |
||||
<span class="tip-info">日和周只能设置其中之一</span> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.every" v-bind="beforeRadioAttrs"> |
||||
每日 |
||||
</Radio> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.range" v-bind="beforeRadioAttrs"> |
||||
区间 |
||||
</Radio> |
||||
<span> 从 </span> |
||||
<AInput v-model:value="valueRange.start" type="number" v-bind="typeRangeAttrs" /> |
||||
<span> 日 至 </span> |
||||
<AInput v-model:value="valueRange.end" type="number" v-bind="typeRangeAttrs" /> |
||||
<span> 日 </span> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.loop" v-bind="beforeRadioAttrs"> |
||||
循环 |
||||
</Radio> |
||||
<span> 从 </span> |
||||
<AInput v-model:value="valueLoop.start" type="number" class="w-4" v-bind="typeLoopAttrs" /> |
||||
<span> 日开始，间隔 </span> |
||||
<AInput v-model:value="valueLoop.interval" type="number" v-bind="typeLoopAttrs" /> |
||||
<span> 日 </span> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.last" v-bind="beforeRadioAttrs"> |
||||
最后一日 |
||||
</Radio> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.specify" v-bind="beforeRadioAttrs"> |
||||
指定 |
||||
</Radio> |
||||
<div class="list"> |
||||
<CheckboxGroup v-model:value="valueList"> |
||||
<template v-for="i in specifyRange" :key="i"> |
||||
<Checkbox :value="i" v-bind="typeSpecifyAttrs"> |
||||
{{ i }} |
||||
</Checkbox> |
||||
</template> |
||||
</CheckboxGroup> |
||||
</div> |
||||
</div> |
||||
</RadioGroup> |
||||
</div> |
||||
</template> |
||||
@ -1,69 +0,0 @@
|
||||
<script lang="ts"> |
||||
import { defineComponent } from 'vue' |
||||
import { Checkbox, Input, Radio } from 'ant-design-vue' |
||||
import { useTabEmits, useTabProps, useTabSetup } from './useTabMixin' |
||||
|
||||
export default defineComponent({ |
||||
name: 'HourUI', |
||||
components: { AInput: Input, Checkbox, CheckboxGroup: Checkbox.Group, Radio, RadioGroup: Radio.Group }, |
||||
props: useTabProps({ |
||||
defaultValue: '*', |
||||
}), |
||||
emits: useTabEmits(), |
||||
setup(props, context) { |
||||
return useTabSetup(props, context, { |
||||
defaultValue: '*', |
||||
minValue: 0, |
||||
maxValue: 23, |
||||
valueRange: { start: 0, end: 23 }, |
||||
valueLoop: { start: 0, interval: 1 }, |
||||
}) |
||||
}, |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<div :class="`${prefixCls}-config-list`"> |
||||
<RadioGroup v-model:value="type"> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.every" v-bind="beforeRadioAttrs"> |
||||
每时 |
||||
</Radio> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.range" v-bind="beforeRadioAttrs"> |
||||
区间 |
||||
</Radio> |
||||
<span> 从 </span> |
||||
<AInput v-model:value="valueRange.start" type="number" v-bind="typeRangeAttrs" /> |
||||
<span> 时 至 </span> |
||||
<AInput v-model:value="valueRange.end" type="number" v-bind="typeRangeAttrs" /> |
||||
<span> 时 </span> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.loop" v-bind="beforeRadioAttrs"> |
||||
循环 |
||||
</Radio> |
||||
<span> 从 </span> |
||||
<AInput v-model:value="valueLoop.start" type="number" v-bind="typeLoopAttrs" /> |
||||
<span> 时开始，间隔 </span> |
||||
<AInput v-model:value="valueLoop.interval" type="number" v-bind="typeLoopAttrs" /> |
||||
<span> 时 </span> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.specify" v-bind="beforeRadioAttrs"> |
||||
指定 |
||||
</Radio> |
||||
<div class="list"> |
||||
<CheckboxGroup v-model:value="valueList"> |
||||
<template v-for="i in specifyRange" :key="i"> |
||||
<Checkbox :value="i" v-bind="typeSpecifyAttrs"> |
||||
{{ i }} |
||||
</Checkbox> |
||||
</template> |
||||
</CheckboxGroup> |
||||
</div> |
||||
</div> |
||||
</RadioGroup> |
||||
</div> |
||||
</template> |
||||
@ -1,69 +0,0 @@
|
||||
<script lang="ts"> |
||||
import { defineComponent } from 'vue' |
||||
import { Checkbox, Input, Radio } from 'ant-design-vue' |
||||
import { useTabEmits, useTabProps, useTabSetup } from './useTabMixin' |
||||
|
||||
export default defineComponent({ |
||||
name: 'MinuteUI', |
||||
components: { AInput: Input, Checkbox, CheckboxGroup: Checkbox.Group, Radio, RadioGroup: Radio.Group }, |
||||
props: useTabProps({ |
||||
defaultValue: '*', |
||||
}), |
||||
emits: useTabEmits(), |
||||
setup(props, context) { |
||||
return useTabSetup(props, context, { |
||||
defaultValue: '*', |
||||
minValue: 0, |
||||
maxValue: 59, |
||||
valueRange: { start: 0, end: 59 }, |
||||
valueLoop: { start: 0, interval: 1 }, |
||||
}) |
||||
}, |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<div :class="`${prefixCls}-config-list`"> |
||||
<RadioGroup v-model:value="type"> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.every" v-bind="beforeRadioAttrs"> |
||||
每分 |
||||
</Radio> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.range" v-bind="beforeRadioAttrs"> |
||||
区间 |
||||
</Radio> |
||||
<span> 从 </span> |
||||
<AInput v-model:value="valueRange.start" type="number" v-bind="typeRangeAttrs" /> |
||||
<span> 分 至 </span> |
||||
<AInput v-model:value="valueRange.end" type="number" v-bind="typeRangeAttrs" /> |
||||
<span> 分 </span> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.loop" v-bind="beforeRadioAttrs"> |
||||
循环 |
||||
</Radio> |
||||
<span> 从 </span> |
||||
<AInput v-model:value="valueLoop.start" type="number" v-bind="typeLoopAttrs" /> |
||||
<span> 分开始，间隔 </span> |
||||
<AInput v-model:value="valueLoop.interval" type="number" v-bind="typeLoopAttrs" /> |
||||
<span> 分 </span> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.specify" v-bind="beforeRadioAttrs"> |
||||
指定 |
||||
</Radio> |
||||
<div class="list"> |
||||
<CheckboxGroup v-model:value="valueList"> |
||||
<template v-for="i in specifyRange" :key="i"> |
||||
<Checkbox :value="i" v-bind="typeSpecifyAttrs"> |
||||
{{ i }} |
||||
</Checkbox> |
||||
</template> |
||||
</CheckboxGroup> |
||||
</div> |
||||
</div> |
||||
</RadioGroup> |
||||
</div> |
||||
</template> |
||||
@ -1,69 +0,0 @@
|
||||
<script lang="ts"> |
||||
import { defineComponent } from 'vue' |
||||
import { Checkbox, Input, Radio } from 'ant-design-vue' |
||||
import { useTabEmits, useTabProps, useTabSetup } from './useTabMixin' |
||||
|
||||
export default defineComponent({ |
||||
name: 'MonthUI', |
||||
components: { AInput: Input, Checkbox, CheckboxGroup: Checkbox.Group, Radio, RadioGroup: Radio.Group }, |
||||
props: useTabProps({ |
||||
defaultValue: '*', |
||||
}), |
||||
emits: useTabEmits(), |
||||
setup(props, context) { |
||||
return useTabSetup(props, context, { |
||||
defaultValue: '*', |
||||
minValue: 1, |
||||
maxValue: 12, |
||||
valueRange: { start: 1, end: 12 }, |
||||
valueLoop: { start: 1, interval: 1 }, |
||||
}) |
||||
}, |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<div :class="`${prefixCls}-config-list`"> |
||||
<RadioGroup v-model:value="type"> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.every" v-bind="beforeRadioAttrs"> |
||||
每月 |
||||
</Radio> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.range" v-bind="beforeRadioAttrs"> |
||||
区间 |
||||
</Radio> |
||||
<span> 从 </span> |
||||
<AInput v-model:value="valueRange.start" type="number" v-bind="typeRangeAttrs" /> |
||||
<span> 月 至 </span> |
||||
<AInput v-model:value="valueRange.end" type="number" v-bind="typeRangeAttrs" /> |
||||
<span> 月 </span> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.loop" v-bind="beforeRadioAttrs"> |
||||
循环 |
||||
</Radio> |
||||
<span> 从 </span> |
||||
<AInput v-model:value="valueLoop.start" type="number" v-bind="typeLoopAttrs" /> |
||||
<span> 月开始，间隔 </span> |
||||
<AInput v-model:value="valueLoop.interval" type="number" v-bind="typeLoopAttrs" /> |
||||
<span> 月 </span> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.specify" v-bind="beforeRadioAttrs"> |
||||
指定 |
||||
</Radio> |
||||
<div class="list"> |
||||
<CheckboxGroup v-model:value="valueList"> |
||||
<template v-for="i in specifyRange" :key="i"> |
||||
<Checkbox :value="i" v-bind="typeSpecifyAttrs"> |
||||
{{ i }} |
||||
</Checkbox> |
||||
</template> |
||||
</CheckboxGroup> |
||||
</div> |
||||
</div> |
||||
</RadioGroup> |
||||
</div> |
||||
</template> |
||||
@ -1,69 +0,0 @@
|
||||
<script lang="ts"> |
||||
import { defineComponent } from 'vue' |
||||
import { Checkbox, Input, Radio } from 'ant-design-vue' |
||||
import { useTabEmits, useTabProps, useTabSetup } from './useTabMixin' |
||||
|
||||
export default defineComponent({ |
||||
name: 'SecondUI', |
||||
components: { AInput: Input, Checkbox, CheckboxGroup: Checkbox.Group, Radio, RadioGroup: Radio.Group }, |
||||
props: useTabProps({ |
||||
defaultValue: '*', |
||||
}), |
||||
emits: useTabEmits(), |
||||
setup(props, context) { |
||||
return useTabSetup(props, context, { |
||||
defaultValue: '*', |
||||
minValue: 0, |
||||
maxValue: 59, |
||||
valueRange: { start: 0, end: 59 }, |
||||
valueLoop: { start: 0, interval: 1 }, |
||||
}) |
||||
}, |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<div :class="`${prefixCls}-config-list`"> |
||||
<RadioGroup v-model:value="type"> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.every" v-bind="beforeRadioAttrs"> |
||||
每秒 |
||||
</Radio> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.range" v-bind="beforeRadioAttrs"> |
||||
区间 |
||||
</Radio> |
||||
<span> 从 </span> |
||||
<AInput v-model:value="valueRange.start" type="number" v-bind="typeRangeAttrs" /> |
||||
<span> 秒 至 </span> |
||||
<AInput v-model:value="valueRange.end" type="number" v-bind="typeRangeAttrs" /> |
||||
<span> 秒 </span> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.loop" v-bind="beforeRadioAttrs"> |
||||
循环 |
||||
</Radio> |
||||
<span> 从 </span> |
||||
<AInput v-model:value="valueLoop.start" type="number" v-bind="typeLoopAttrs" /> |
||||
<span> 秒开始，间隔 </span> |
||||
<AInput v-model:value="valueLoop.interval" type="number" v-bind="typeLoopAttrs" /> |
||||
<span> 秒 </span> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.specify" v-bind="beforeRadioAttrs"> |
||||
指定 |
||||
</Radio> |
||||
<div class="list"> |
||||
<CheckboxGroup v-model:value="valueList"> |
||||
<template v-for="i in specifyRange" :key="i"> |
||||
<Checkbox :value="i" v-bind="typeSpecifyAttrs"> |
||||
{{ i }} |
||||
</Checkbox> |
||||
</template> |
||||
</CheckboxGroup> |
||||
</div> |
||||
</div> |
||||
</RadioGroup> |
||||
</div> |
||||
</template> |
||||
@ -1,135 +0,0 @@
|
||||
<script lang="ts"> |
||||
import { computed, defineComponent, watch } from 'vue' |
||||
import { Checkbox, Input, Radio, Select } from 'ant-design-vue' |
||||
import { TypeEnum, useTabEmits, useTabProps, useTabSetup } from './useTabMixin' |
||||
|
||||
const WEEK_MAP_EN = { |
||||
1: 'SUN', |
||||
2: 'MON', |
||||
3: 'TUE', |
||||
4: 'WED', |
||||
5: 'THU', |
||||
6: 'FRI', |
||||
7: 'SAT', |
||||
} |
||||
|
||||
const WEEK_MAP_CN = { |
||||
1: '周日', |
||||
2: '周一', |
||||
3: '周二', |
||||
4: '周三', |
||||
5: '周四', |
||||
6: '周五', |
||||
7: '周六', |
||||
} |
||||
|
||||
export default defineComponent({ |
||||
name: 'WeekUI', |
||||
components: { AInput: Input, ASelect: Select, Checkbox, CheckboxGroup: Checkbox.Group, Radio, RadioGroup: Radio.Group }, |
||||
props: useTabProps({ |
||||
defaultValue: '?', |
||||
props: { |
||||
day: { type: String, default: '*' }, |
||||
}, |
||||
}), |
||||
emits: useTabEmits(), |
||||
setup(props, context) { |
||||
const disabledChoice = computed(() => { |
||||
return (props.day && props.day !== '?') || props.disabled |
||||
}) |
||||
const setup = useTabSetup(props, context, { |
||||
defaultType: TypeEnum.unset, |
||||
defaultValue: '?', |
||||
minValue: 1, |
||||
maxValue: 7, |
||||
// 0,7表示周日 1表示周一 |
||||
valueRange: { start: 1, end: 7 }, |
||||
valueLoop: { start: 2, interval: 1 }, |
||||
disabled: disabledChoice, |
||||
}) |
||||
const weekOptions = computed(() => { |
||||
const options: { label: string, value: number }[] = [] |
||||
for (const weekKey of Object.keys(WEEK_MAP_CN)) { |
||||
const weekName: string = WEEK_MAP_CN[weekKey] |
||||
options.push({ |
||||
value: Number.parseInt(weekKey), |
||||
label: weekName, |
||||
}) |
||||
} |
||||
return options |
||||
}) |
||||
|
||||
const typeRangeSelectAttrs = computed(() => ({ |
||||
class: ['w80'], |
||||
disabled: setup.typeRangeAttrs.value.disabled, |
||||
})) |
||||
|
||||
const typeLoopSelectAttrs = computed(() => ({ |
||||
class: ['w80'], |
||||
disabled: setup.typeLoopAttrs.value.disabled, |
||||
})) |
||||
|
||||
watch( |
||||
() => props.day, |
||||
() => { |
||||
setup.updateValue(disabledChoice.value ? '?' : setup.computeValue.value) |
||||
}, |
||||
) |
||||
|
||||
return { |
||||
...setup, |
||||
weekOptions, |
||||
typeLoopSelectAttrs, |
||||
typeRangeSelectAttrs, |
||||
WEEK_MAP_CN, |
||||
WEEK_MAP_EN, |
||||
} |
||||
}, |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<div :class="`${prefixCls}-config-list`"> |
||||
<RadioGroup v-model:value="type"> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.unset" v-bind="beforeRadioAttrs"> |
||||
不设置 |
||||
</Radio> |
||||
<span class="tip-info">日和周只能设置其中之一</span> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.range" v-bind="beforeRadioAttrs"> |
||||
区间 |
||||
</Radio> |
||||
<span> 从 </span> |
||||
<ASelect v-model:value="valueRange.start" :options="weekOptions" v-bind="typeRangeSelectAttrs" /> |
||||
<span> 至 </span> |
||||
<ASelect v-model:value="valueRange.end" :options="weekOptions" v-bind="typeRangeSelectAttrs" /> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.loop" v-bind="beforeRadioAttrs"> |
||||
循环 |
||||
</Radio> |
||||
<span> 从 </span> |
||||
<ASelect v-model:value="valueLoop.start" :options="weekOptions" v-bind="typeLoopSelectAttrs" /> |
||||
<span> 开始，间隔 </span> |
||||
<AInput v-model:value="valueLoop.interval" type="number" v-bind="typeLoopAttrs" /> |
||||
<span> 天 </span> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.specify" v-bind="beforeRadioAttrs"> |
||||
指定 |
||||
</Radio> |
||||
<div class="list list-cn"> |
||||
<CheckboxGroup v-model:value="valueList"> |
||||
<template v-for="opt in weekOptions" :key="opt.value"> |
||||
<Checkbox :value="opt.value" v-bind="typeSpecifyAttrs"> |
||||
{{ opt.label }} |
||||
</Checkbox> |
||||
</template> |
||||
</CheckboxGroup> |
||||
</div> |
||||
</div> |
||||
</RadioGroup> |
||||
</div> |
||||
</template> |
||||
@ -1,55 +0,0 @@
|
||||
<script lang="ts"> |
||||
import { defineComponent } from 'vue' |
||||
import { Input, Radio } from 'ant-design-vue' |
||||
import { useTabEmits, useTabProps, useTabSetup } from './useTabMixin' |
||||
|
||||
export default defineComponent({ |
||||
name: 'YearUI', |
||||
components: { AInput: Input, Radio, RadioGroup: Radio.Group }, |
||||
props: useTabProps({ |
||||
defaultValue: '*', |
||||
}), |
||||
emits: useTabEmits(), |
||||
setup(props, context) { |
||||
const nowYear = new Date().getFullYear() |
||||
return useTabSetup(props, context, { |
||||
defaultValue: '*', |
||||
minValue: 0, |
||||
valueRange: { start: nowYear, end: nowYear + 100 }, |
||||
valueLoop: { start: nowYear, interval: 1 }, |
||||
}) |
||||
}, |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<div :class="`${prefixCls}-config-list`"> |
||||
<RadioGroup v-model:value="type"> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.every" v-bind="beforeRadioAttrs"> |
||||
每年 |
||||
</Radio> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.range" v-bind="beforeRadioAttrs"> |
||||
区间 |
||||
</Radio> |
||||
<span> 从 </span> |
||||
<AInput v-model:value="valueRange.start" type="number" class="w80" v-bind="typeRangeAttrs" /> |
||||
<span> 年 至 </span> |
||||
<AInput v-model:value="valueRange.end" type="number" class="w80" v-bind="typeRangeAttrs" /> |
||||
<span> 年 </span> |
||||
</div> |
||||
<div class="item"> |
||||
<Radio :value="TypeEnum.loop" v-bind="beforeRadioAttrs"> |
||||
循环 |
||||
</Radio> |
||||
<span> 从 </span> |
||||
<AInput v-model:value="valueLoop.start" type="number" class="w80" v-bind="typeLoopAttrs" /> |
||||
<span> 年开始，间隔 </span> |
||||
<AInput v-model:value="valueLoop.interval" type="number" class="w80" v-bind="typeLoopAttrs" /> |
||||
<span> 年 </span> |
||||
</div> |
||||
</RadioGroup> |
||||
</div> |
||||
</template> |
||||
@ -1,204 +0,0 @@
|
||||
// 主要用于日和星期的互斥使用
|
||||
import { computed, inject, reactive, ref, unref, watch } from 'vue' |
||||
import { propTypes } from '@/utils/propTypes' |
||||
|
||||
export enum TypeEnum { |
||||
unset = 'UNSET', |
||||
every = 'EVERY', |
||||
range = 'RANGE', |
||||
loop = 'LOOP', |
||||
work = 'WORK', |
||||
last = 'LAST', |
||||
specify = 'SPECIFY', |
||||
} |
||||
|
||||
// use 公共 props
|
||||
export function useTabProps(options) { |
||||
const defaultValue = options?.defaultValue ?? '?' |
||||
return { |
||||
value: propTypes.string.def(defaultValue), |
||||
disabled: propTypes.bool.def(false), |
||||
...options?.props, |
||||
} |
||||
} |
||||
|
||||
// use 公共 emits
|
||||
export function useTabEmits() { |
||||
return ['change', 'update:value'] |
||||
} |
||||
|
||||
// use 公共 setup
|
||||
export function useTabSetup(props, context, options) { |
||||
const { emit } = context |
||||
const prefixCls = inject('prefixCls') |
||||
const defaultValue = ref(options?.defaultValue ?? '?') |
||||
// 类型
|
||||
const type = ref(options.defaultType ?? TypeEnum.every) |
||||
const valueList = ref<any[]>([]) |
||||
// 对于不同的类型，所定义的值也有所不同
|
||||
const valueRange = reactive(options.valueRange) |
||||
const valueLoop = reactive(options.valueLoop) |
||||
const valueWeek = reactive(options.valueWeek) |
||||
const valueWork = ref(options.valueWork) |
||||
const maxValue = ref(options.maxValue) |
||||
const minValue = ref(options.minValue) |
||||
|
||||
// 根据不同的类型计算出的value
|
||||
const computeValue = computed(() => { |
||||
const valueArray: any[] = [] |
||||
switch (type.value) { |
||||
case TypeEnum.unset: |
||||
valueArray.push('?') |
||||
break |
||||
case TypeEnum.every: |
||||
valueArray.push('*') |
||||
break |
||||
case TypeEnum.range: |
||||
valueArray.push(`${valueRange.start}-${valueRange.end}`) |
||||
break |
||||
case TypeEnum.loop: |
||||
valueArray.push(`${valueLoop.start}/${valueLoop.interval}`) |
||||
break |
||||
case TypeEnum.work: |
||||
valueArray.push(`${valueWork.value}W`) |
||||
break |
||||
case TypeEnum.last: |
||||
valueArray.push('L') |
||||
break |
||||
case TypeEnum.specify: |
||||
if (valueList.value.length === 0) |
||||
valueList.value.push(minValue.value) |
||||
|
||||
valueArray.push(valueList.value.join(',')) |
||||
break |
||||
default: |
||||
valueArray.push(defaultValue.value) |
||||
break |
||||
} |
||||
return valueArray.length > 0 ? valueArray.join('') : defaultValue.value |
||||
}) |
||||
// 指定值范围区间，介于最小值和最大值之间
|
||||
const specifyRange = computed(() => { |
||||
const range: number[] = [] |
||||
if (maxValue.value != null) { |
||||
for (let i = minValue.value; i <= maxValue.value; i++) |
||||
range.push(i) |
||||
} |
||||
return range |
||||
}) |
||||
|
||||
watch( |
||||
() => props.value, |
||||
(val) => { |
||||
if (val !== computeValue.value) |
||||
parseValue(val) |
||||
}, |
||||
{ immediate: true }, |
||||
) |
||||
|
||||
watch(computeValue, v => updateValue(v)) |
||||
|
||||
function updateValue(value) { |
||||
emit('change', value) |
||||
emit('update:value', value) |
||||
} |
||||
|
||||
/** |
||||
* parseValue |
||||
* @param value |
||||
*/ |
||||
function parseValue(value) { |
||||
if (value === computeValue.value) |
||||
return |
||||
|
||||
try { |
||||
if (!value || value === defaultValue.value) { |
||||
type.value = TypeEnum.every |
||||
} |
||||
else if (value.includes('?')) { |
||||
type.value = TypeEnum.unset |
||||
} |
||||
else if (value.includes('-')) { |
||||
type.value = TypeEnum.range |
||||
const values = value.split('-') |
||||
if (values.length >= 2) { |
||||
valueRange.start = Number.parseInt(values[0]) |
||||
valueRange.end = Number.parseInt(values[1]) |
||||
} |
||||
} |
||||
else if (value.includes('/')) { |
||||
type.value = TypeEnum.loop |
||||
const values = value.split('/') |
||||
if (values.length >= 2) { |
||||
valueLoop.start = value[0] === '*' ? 0 : Number.parseInt(values[0]) |
||||
valueLoop.interval = Number.parseInt(values[1]) |
||||
} |
||||
} |
||||
else if (value.includes('W')) { |
||||
type.value = TypeEnum.work |
||||
const values = value.split('W') |
||||
if (!values[0] && !Number.isNaN(values[0])) |
||||
valueWork.value = Number.parseInt(values[0]) |
||||
} |
||||
else if (value.includes('L')) { |
||||
type.value = TypeEnum.last |
||||
} |
||||
else if (value.includes(',') || !Number.isNaN(value)) { |
||||
type.value = TypeEnum.specify |
||||
valueList.value = value.split(',').map(item => Number.parseInt(item)) |
||||
} |
||||
else { |
||||
type.value = TypeEnum.every |
||||
} |
||||
} |
||||
catch (e) { |
||||
type.value = TypeEnum.every |
||||
} |
||||
} |
||||
|
||||
const beforeRadioAttrs = computed(() => ({ |
||||
class: ['choice'], |
||||
disabled: props.disabled || unref(options.disabled), |
||||
})) |
||||
const inputNumberAttrs = computed(() => ({ |
||||
class: ['w60'], |
||||
max: maxValue.value, |
||||
min: minValue.value, |
||||
precision: 0, |
||||
})) |
||||
const typeRangeAttrs = computed(() => ({ |
||||
disabled: type.value !== TypeEnum.range || props.disabled || unref(options.disabled), |
||||
...inputNumberAttrs.value, |
||||
})) |
||||
const typeLoopAttrs = computed(() => ({ |
||||
disabled: type.value !== TypeEnum.loop || props.disabled || unref(options.disabled), |
||||
...inputNumberAttrs.value, |
||||
})) |
||||
const typeSpecifyAttrs = computed(() => ({ |
||||
disabled: type.value !== TypeEnum.specify || props.disabled || unref(options.disabled), |
||||
class: ['list-check-item'], |
||||
})) |
||||
|
||||
return { |
||||
type, |
||||
TypeEnum, |
||||
prefixCls, |
||||
defaultValue, |
||||
valueRange, |
||||
valueLoop, |
||||
valueWeek, |
||||
valueList, |
||||
valueWork, |
||||
maxValue, |
||||
minValue, |
||||
computeValue, |
||||
specifyRange, |
||||
updateValue, |
||||
parseValue, |
||||
beforeRadioAttrs, |
||||
inputNumberAttrs, |
||||
typeRangeAttrs, |
||||
typeLoopAttrs, |
||||
typeSpecifyAttrs, |
||||
} |
||||
} |
||||
@ -1,50 +0,0 @@
|
||||
/* eslint-disable prefer-promise-reject-errors */ |
||||
import CronParser from 'cron-parser' |
||||
import type { ValidatorRule } from 'ant-design-vue/lib/form/interface' |
||||
|
||||
const cronRule: ValidatorRule = { |
||||
// eslint-disable-next-line no-empty-pattern
|
||||
validator({}, value) { |
||||
// 没填写就不校验
|
||||
if (!value) |
||||
return Promise.resolve() |
||||
|
||||
const values: string[] = value.split(' ').filter(item => !!item) |
||||
if (values.length > 7) |
||||
return Promise.reject('Cron表达式最多7项！') |
||||
|
||||
// 检查第7项
|
||||
let val: string = value |
||||
if (values.length === 7) { |
||||
const year = values[6] |
||||
if (year !== '*' && year !== '?') { |
||||
let yearValues: string[] = [] |
||||
if (year.includes('-')) |
||||
yearValues = year.split('-') |
||||
else if (year.indexOf('/')) |
||||
yearValues = year.split('/') |
||||
else |
||||
yearValues = [year] |
||||
|
||||
// 判断是否都是数字
|
||||
const checkYear = yearValues.some(item => Number.isNaN(Number(item))) |
||||
if (checkYear) |
||||
return Promise.reject(`Cron表达式参数[年]错误：${year}`) |
||||
} |
||||
// 取其中的前六项
|
||||
val = values.slice(0, 6).join(' ') |
||||
} |
||||
// 6位 没有年
|
||||
// 5位没有秒、年
|
||||
try { |
||||
const iter = CronParser.parseExpression(val) |
||||
iter.next() |
||||
return Promise.resolve() |
||||
} |
||||
catch (e: any) { |
||||
return Promise.reject(`Cron表达式错误：${e}`) |
||||
} |
||||
}, |
||||
} |
||||
|
||||
export default cronRule.validator |
||||
@ -1,191 +0,0 @@
|
||||
export enum StationStatus { |
||||
Closed = '0', |
||||
Using = '1', |
||||
} |
||||
|
||||
/** |
||||
* 站点状态 |
||||
*/ |
||||
export const StationStatusOptions = [ |
||||
{ |
||||
value: StationStatus.Closed, |
||||
label: '关闭中', |
||||
}, |
||||
{ |
||||
value: StationStatus.Using, |
||||
label: '使用中', |
||||
}, |
||||
] |
||||
|
||||
export enum StationEnvironments { |
||||
OpenAir = '0', |
||||
Underground = '1', |
||||
Carport = '2', |
||||
} |
||||
|
||||
/** |
||||
* 站点环境 |
||||
*/ |
||||
export const StationEnvironmentOptions = [ |
||||
{ |
||||
value: StationEnvironments.OpenAir, |
||||
label: '露天', |
||||
}, |
||||
{ |
||||
value: StationEnvironments.Underground, |
||||
label: '地下', |
||||
}, |
||||
{ |
||||
value: StationEnvironments.Carport, |
||||
label: '车棚', |
||||
}, |
||||
] |
||||
|
||||
/** |
||||
* 建筑场所 |
||||
*/ |
||||
export const BuildingLotOptions = [ |
||||
{ |
||||
value: '1', |
||||
label: '居民区', |
||||
}, |
||||
{ |
||||
value: '2', |
||||
label: '公共机构', |
||||
}, |
||||
{ |
||||
value: '3', |
||||
label: '企事业单位', |
||||
}, |
||||
{ |
||||
value: '4', |
||||
label: '写字楼', |
||||
}, |
||||
{ |
||||
value: '5', |
||||
label: '工业园区', |
||||
}, |
||||
{ |
||||
value: '6', |
||||
label: '交通枢纽', |
||||
}, |
||||
{ |
||||
value: '7', |
||||
label: '大型文体设施', |
||||
}, |
||||
{ |
||||
value: '8', |
||||
label: '城市绿地', |
||||
}, |
||||
{ |
||||
value: '9', |
||||
label: '大型建筑配建停车场', |
||||
}, |
||||
{ |
||||
value: '10', |
||||
label: '路边停车位', |
||||
}, |
||||
{ |
||||
value: '11', |
||||
label: '城际高速服务区', |
||||
}, |
||||
{ |
||||
value: '255', |
||||
label: '其他', |
||||
}, |
||||
] |
||||
|
||||
/** |
||||
* 运营方式 |
||||
*/ |
||||
export const OperateWayOptions = [ |
||||
{ |
||||
value: 'self', |
||||
label: '自营', |
||||
}, |
||||
{ |
||||
value: 'other', |
||||
label: '代运营', |
||||
}, |
||||
] |
||||
|
||||
export enum ParkingChargeWay { |
||||
Free = '0', |
||||
LimitedFree = '1', |
||||
Changing = '2', |
||||
} |
||||
|
||||
export const ParkingChargeWayOptions = [ |
||||
{ |
||||
value: ParkingChargeWay.Free, |
||||
label: '免费停车', |
||||
}, |
||||
{ |
||||
value: ParkingChargeWay.LimitedFree, |
||||
label: '限时免费', |
||||
}, |
||||
{ |
||||
value: ParkingChargeWay.Changing, |
||||
label: '收费停车', |
||||
}, |
||||
] |
||||
|
||||
/** |
||||
* 支付状态 |
||||
*/ |
||||
export const PayStatusOptions = [ |
||||
{ |
||||
label: '未支付', |
||||
value: 'notPay', |
||||
}, |
||||
{ |
||||
label: '支付中', |
||||
value: 'paying', |
||||
}, |
||||
{ |
||||
label: '支付成功', |
||||
value: 'suc', |
||||
}, |
||||
{ |
||||
label: '支付失败', |
||||
value: 'fail', |
||||
}, |
||||
{ |
||||
label: '待退款', |
||||
value: 'waitRefund', |
||||
}, |
||||
{ |
||||
label: '退款中', |
||||
value: 'refunding', |
||||
}, |
||||
{ |
||||
label: '退款成功', |
||||
value: 'refundSuc', |
||||
}, |
||||
{ |
||||
label: '退款失败', |
||||
value: 'refundFailed', |
||||
}, |
||||
] |
||||
|
||||
/** |
||||
* 支付渠道 |
||||
*/ |
||||
export const PayModesEnum = [ |
||||
{ |
||||
label: '微信分支付', |
||||
value: 'wechatFen', |
||||
}, |
||||
{ |
||||
label: '微信扫码', |
||||
value: '1', |
||||
}, |
||||
{ |
||||
label: '支付宝扫码', |
||||
value: '2', |
||||
}, |
||||
{ |
||||
label: '银座钱包', |
||||
value: '3', |
||||
}, |
||||
] |
||||
@ -1,41 +0,0 @@
|
||||
<script lang="ts" setup> |
||||
import { Card, Tag } from 'ant-design-vue' |
||||
import { growCardList } from '../data' |
||||
import { CountTo } from '@/components/CountTo' |
||||
import { SvgIcon } from '@/components/Icon' |
||||
|
||||
defineProps({ |
||||
loading: { |
||||
type: Boolean, |
||||
}, |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<div class="md:flex"> |
||||
<template v-for="(item, index) in growCardList" :key="item.title"> |
||||
<Card |
||||
:loading="loading" |
||||
:title="item.title" |
||||
class="w-full md:w-1/4 !md:mt-0" |
||||
:class="{ '!md:mr-4': index + 1 < 4, '!mt-4': index > 0 }" |
||||
> |
||||
<template #extra> |
||||
<Tag :color="item.color"> |
||||
{{ item.action }} |
||||
</Tag> |
||||
</template> |
||||
|
||||
<div class="flex items-center justify-between px-4 py-4"> |
||||
<CountTo prefix="$" :start-val="1" :end-val="item.value" class="text-2xl" /> |
||||
<SvgIcon :name="item.icon" :size="40" /> |
||||
</div> |
||||
|
||||
<div class="flex justify-between p-2 px-4"> |
||||
<span>总{{ item.title }}</span> |
||||
<CountTo prefix="$" :start-val="1" :end-val="item.total" /> |
||||
</div> |
||||
</Card> |
||||
</template> |
||||
</div> |
||||
</template> |
||||
@ -1,61 +0,0 @@
|
||||
<script lang="ts" setup> |
||||
import type { Ref } from 'vue' |
||||
import { ref, watch } from 'vue' |
||||
import { Card } from 'ant-design-vue' |
||||
import { useECharts } from '@/hooks/web/useECharts' |
||||
import { propTypes } from '@/utils/propTypes' |
||||
|
||||
const props = defineProps({ |
||||
loading: Boolean, |
||||
width: propTypes.string.def('100%'), |
||||
height: propTypes.string.def('300px'), |
||||
}) |
||||
|
||||
const chartRef = ref<HTMLDivElement | null>(null) |
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>) |
||||
|
||||
watch( |
||||
() => props.loading, |
||||
() => { |
||||
if (props.loading) |
||||
return |
||||
|
||||
setOptions({ |
||||
tooltip: { |
||||
trigger: 'item', |
||||
}, |
||||
|
||||
series: [ |
||||
{ |
||||
name: '访问来源', |
||||
type: 'pie', |
||||
radius: '80%', |
||||
center: ['50%', '50%'], |
||||
color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'], |
||||
data: [ |
||||
{ value: 500, name: '电子产品' }, |
||||
{ value: 310, name: '服装' }, |
||||
{ value: 274, name: '化妆品' }, |
||||
{ value: 400, name: '家居' }, |
||||
].sort((a, b) => { |
||||
return a.value - b.value |
||||
}), |
||||
roseType: 'radius', |
||||
animationType: 'scale', |
||||
animationEasing: 'exponentialInOut', |
||||
animationDelay() { |
||||
return Math.random() * 400 |
||||
}, |
||||
}, |
||||
], |
||||
}) |
||||
}, |
||||
{ immediate: true }, |
||||
) |
||||
</script> |
||||
|
||||
<template> |
||||
<Card title="成交占比" :loading="loading"> |
||||
<div ref="chartRef" :style="{ width, height }" /> |
||||
</Card> |
||||
</template> |
||||
@ -1,34 +0,0 @@
|
||||
<script lang="ts" setup> |
||||
import { ref } from 'vue' |
||||
import { Card } from 'ant-design-vue' |
||||
import VisitAnalysis from './VisitAnalysis.vue' |
||||
import VisitAnalysisBar from './VisitAnalysisBar.vue' |
||||
|
||||
const activeKey = ref('tab1') |
||||
|
||||
const tabListTitle = [ |
||||
{ |
||||
key: 'tab1', |
||||
tab: '流量趋势', |
||||
}, |
||||
{ |
||||
key: 'tab2', |
||||
tab: '访问量', |
||||
}, |
||||
] |
||||
|
||||
function onTabChange(key: string) { |
||||
activeKey.value = key |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<Card :tab-list="tabListTitle" v-bind="$attrs" :active-tab-key="activeKey" @tab-change="onTabChange"> |
||||
<p v-if="activeKey === 'tab1'"> |
||||
<VisitAnalysis /> |
||||
</p> |
||||
<p v-if="activeKey === 'tab2'"> |
||||
<VisitAnalysisBar /> |
||||
</p> |
||||
</Card> |
||||
</template> |
||||
@ -1,83 +0,0 @@
|
||||
<script lang="ts" setup> |
||||
import type { Ref } from 'vue' |
||||
import { onMounted, ref } from 'vue' |
||||
import { basicProps } from './props' |
||||
import { useECharts } from '@/hooks/web/useECharts' |
||||
|
||||
defineProps({ |
||||
...basicProps, |
||||
}) |
||||
const chartRef = ref<HTMLDivElement | null>(null) |
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>) |
||||
|
||||
onMounted(() => { |
||||
setOptions({ |
||||
tooltip: { |
||||
trigger: 'axis', |
||||
axisPointer: { |
||||
lineStyle: { |
||||
width: 1, |
||||
color: '#019680', |
||||
}, |
||||
}, |
||||
}, |
||||
xAxis: { |
||||
type: 'category', |
||||
boundaryGap: false, |
||||
data: [...Array.from({ length: 18 })].map((_item, index) => `${index + 6}:00`), |
||||
splitLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
width: 1, |
||||
type: 'solid', |
||||
color: 'rgba(226,226,226,0.5)', |
||||
}, |
||||
}, |
||||
axisTick: { |
||||
show: false, |
||||
}, |
||||
}, |
||||
yAxis: [ |
||||
{ |
||||
type: 'value', |
||||
max: 80000, |
||||
splitNumber: 4, |
||||
axisTick: { |
||||
show: false, |
||||
}, |
||||
splitArea: { |
||||
show: true, |
||||
areaStyle: { |
||||
color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'], |
||||
}, |
||||
}, |
||||
}, |
||||
], |
||||
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true }, |
||||
series: [ |
||||
{ |
||||
smooth: true, |
||||
data: [111, 222, 4000, 18000, 33333, 55555, 66666, 33333, 14000, 36000, 66666, 44444, 22222, 11111, 4000, 2000, 500, 333, 222, 111], |
||||
type: 'line', |
||||
areaStyle: {}, |
||||
itemStyle: { |
||||
color: '#5ab1ef', |
||||
}, |
||||
}, |
||||
{ |
||||
smooth: true, |
||||
data: [33, 66, 88, 333, 3333, 5000, 18000, 3000, 1200, 13000, 22000, 11000, 2221, 1201, 390, 198, 60, 30, 22, 11], |
||||
type: 'line', |
||||
areaStyle: {}, |
||||
itemStyle: { |
||||
color: '#019680', |
||||
}, |
||||
}, |
||||
], |
||||
}) |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<div ref="chartRef" :style="{ height, width }" /> |
||||
</template> |
||||
@ -1,47 +0,0 @@
|
||||
<script lang="ts" setup> |
||||
import type { Ref } from 'vue' |
||||
import { onMounted, ref } from 'vue' |
||||
import { basicProps } from './props' |
||||
import { useECharts } from '@/hooks/web/useECharts' |
||||
|
||||
defineProps({ |
||||
...basicProps, |
||||
}) |
||||
|
||||
const chartRef = ref<HTMLDivElement | null>(null) |
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>) |
||||
onMounted(() => { |
||||
setOptions({ |
||||
tooltip: { |
||||
trigger: 'axis', |
||||
axisPointer: { |
||||
lineStyle: { |
||||
width: 1, |
||||
color: '#019680', |
||||
}, |
||||
}, |
||||
}, |
||||
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true }, |
||||
xAxis: { |
||||
type: 'category', |
||||
data: [...Array.from({ length: 12 })].map((_item, index) => `${index + 1}月`), |
||||
}, |
||||
yAxis: { |
||||
type: 'value', |
||||
max: 8000, |
||||
splitNumber: 4, |
||||
}, |
||||
series: [ |
||||
{ |
||||
data: [3000, 2000, 3333, 5000, 3200, 4200, 3200, 2100, 3000, 5100, 6000, 3200, 4800], |
||||
type: 'bar', |
||||
barMaxWidth: 80, |
||||
}, |
||||
], |
||||
}) |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<div ref="chartRef" :style="{ height, width }" /> |
||||
</template> |
||||
@ -1,91 +0,0 @@
|
||||
<script lang="ts" setup> |
||||
import type { Ref } from 'vue' |
||||
import { ref, watch } from 'vue' |
||||
import { Card } from 'ant-design-vue' |
||||
import { useECharts } from '@/hooks/web/useECharts' |
||||
import { propTypes } from '@/utils/propTypes' |
||||
|
||||
const props = defineProps({ |
||||
loading: Boolean, |
||||
width: propTypes.string.def('100%'), |
||||
height: propTypes.string.def('300px'), |
||||
}) |
||||
const chartRef = ref<HTMLDivElement | null>(null) |
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>) |
||||
|
||||
watch( |
||||
() => props.loading, |
||||
() => { |
||||
if (props.loading) |
||||
return |
||||
|
||||
setOptions({ |
||||
legend: { |
||||
bottom: 0, |
||||
data: ['访问', '购买'], |
||||
}, |
||||
tooltip: {}, |
||||
radar: { |
||||
radius: '60%', |
||||
splitNumber: 8, |
||||
indicator: [ |
||||
{ |
||||
name: '电脑', |
||||
}, |
||||
{ |
||||
name: '充电器', |
||||
}, |
||||
{ |
||||
name: '耳机', |
||||
}, |
||||
{ |
||||
name: '手机', |
||||
}, |
||||
{ |
||||
name: 'Ipad', |
||||
}, |
||||
{ |
||||
name: '耳机', |
||||
}, |
||||
], |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: 'radar', |
||||
symbolSize: 0, |
||||
areaStyle: { |
||||
shadowBlur: 0, |
||||
shadowColor: 'rgba(0,0,0,.2)', |
||||
shadowOffsetX: 0, |
||||
shadowOffsetY: 10, |
||||
opacity: 1, |
||||
}, |
||||
data: [ |
||||
{ |
||||
value: [90, 50, 86, 40, 50, 20], |
||||
name: '访问', |
||||
itemStyle: { |
||||
color: '#b6a2de', |
||||
}, |
||||
}, |
||||
{ |
||||
value: [70, 75, 70, 76, 20, 85], |
||||
name: '购买', |
||||
itemStyle: { |
||||
color: '#5ab1ef', |
||||
}, |
||||
}, |
||||
], |
||||
}, |
||||
], |
||||
}) |
||||
}, |
||||
{ immediate: true }, |
||||
) |
||||
</script> |
||||
|
||||
<template> |
||||
<Card title="转化率" :loading="loading"> |
||||
<div ref="chartRef" :style="{ width, height }" /> |
||||
</Card> |
||||
</template> |
||||
@ -1,79 +0,0 @@
|
||||
<script lang="ts" setup> |
||||
import type { Ref } from 'vue' |
||||
import { ref, watch } from 'vue' |
||||
import { Card } from 'ant-design-vue' |
||||
import { useECharts } from '@/hooks/web/useECharts' |
||||
import { propTypes } from '@/utils/propTypes' |
||||
|
||||
const props = defineProps({ |
||||
loading: Boolean, |
||||
width: propTypes.string.def('100%'), |
||||
height: propTypes.string.def('300px'), |
||||
}) |
||||
const chartRef = ref<HTMLDivElement | null>(null) |
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>) |
||||
|
||||
watch( |
||||
() => props.loading, |
||||
() => { |
||||
if (props.loading) |
||||
return |
||||
|
||||
setOptions({ |
||||
tooltip: { |
||||
trigger: 'item', |
||||
}, |
||||
legend: { |
||||
bottom: '1%', |
||||
left: 'center', |
||||
}, |
||||
series: [ |
||||
{ |
||||
color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'], |
||||
name: '访问来源', |
||||
type: 'pie', |
||||
radius: ['40%', '70%'], |
||||
avoidLabelOverlap: false, |
||||
itemStyle: { |
||||
borderRadius: 10, |
||||
borderColor: '#fff', |
||||
borderWidth: 2, |
||||
}, |
||||
label: { |
||||
show: false, |
||||
position: 'center', |
||||
}, |
||||
emphasis: { |
||||
label: { |
||||
show: true, |
||||
fontSize: '12', |
||||
fontWeight: 'bold', |
||||
}, |
||||
}, |
||||
labelLine: { |
||||
show: false, |
||||
}, |
||||
data: [ |
||||
{ value: 1048, name: '搜索引擎' }, |
||||
{ value: 735, name: '直接访问' }, |
||||
{ value: 580, name: '邮件营销' }, |
||||
{ value: 484, name: '联盟广告' }, |
||||
], |
||||
animationType: 'scale', |
||||
animationEasing: 'exponentialInOut', |
||||
animationDelay() { |
||||
return Math.random() * 100 |
||||
}, |
||||
}, |
||||
], |
||||
}) |
||||
}, |
||||
{ immediate: true }, |
||||
) |
||||
</script> |
||||
|
||||
<template> |
||||
<Card title="访问来源" :loading="loading"> |
||||
<div ref="chartRef" :style="{ width, height }" /> |
||||
</Card> |
||||
</template> |
||||
@ -1,16 +0,0 @@
|
||||
import type { PropType } from 'vue' |
||||
|
||||
export interface BasicProps { |
||||
width: string |
||||
height: string |
||||
} |
||||
export const basicProps = { |
||||
width: { |
||||
type: String as PropType<string>, |
||||
default: '100%', |
||||
}, |
||||
height: { |
||||
type: String as PropType<string>, |
||||
default: '280px', |
||||
}, |
||||
} |
||||
@ -1,43 +0,0 @@
|
||||
export interface GrowCardItem { |
||||
icon: string |
||||
title: string |
||||
value: number |
||||
total: number |
||||
color: string |
||||
action: string |
||||
} |
||||
|
||||
export const growCardList: GrowCardItem[] = [ |
||||
{ |
||||
title: '访问数', |
||||
icon: 'visit-count', |
||||
value: 2000, |
||||
total: 120000, |
||||
color: 'green', |
||||
action: '月', |
||||
}, |
||||
{ |
||||
title: '成交额', |
||||
icon: 'total-sales', |
||||
value: 20000, |
||||
total: 500000, |
||||
color: 'blue', |
||||
action: '月', |
||||
}, |
||||
{ |
||||
title: '下载数', |
||||
icon: 'download-count', |
||||
value: 8000, |
||||
total: 120000, |
||||
color: 'orange', |
||||
action: '周', |
||||
}, |
||||
{ |
||||
title: '成交数', |
||||
icon: 'transaction', |
||||
value: 5000, |
||||
total: 50000, |
||||
color: 'purple', |
||||
action: '年', |
||||
}, |
||||
] |
||||
@ -1,26 +0,0 @@
|
||||
<script lang="ts" setup> |
||||
import { ref } from 'vue' |
||||
import GrowCard from './components/GrowCard.vue' |
||||
import SiteAnalysis from './components/SiteAnalysis.vue' |
||||
import VisitSource from './components/VisitSource.vue' |
||||
import VisitRadar from './components/VisitRadar.vue' |
||||
import SalesProductPie from './components/SalesProductPie.vue' |
||||
|
||||
const loading = ref(true) |
||||
|
||||
setTimeout(() => { |
||||
loading.value = false |
||||
}, 500) |
||||
</script> |
||||
|
||||
<template> |
||||
<div class="p-4"> |
||||
<GrowCard :loading="loading" class="enter-y" /> |
||||
<SiteAnalysis class="enter-y !my-4" :loading="loading" /> |
||||
<div class="enter-y md:flex"> |
||||
<VisitRadar class="w-full md:w-1/3" :loading="loading" /> |
||||
<VisitSource class="w-full !my-4 md:w-1/3 !md:mx-4 !md:my-0" :loading="loading" /> |
||||
<SalesProductPie class="w-full md:w-1/3" :loading="loading" /> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
@ -1,34 +0,0 @@
|
||||
<script lang="ts" setup> |
||||
import { Card, List } from 'ant-design-vue' |
||||
import { dynamicInfoItems } from './data' |
||||
import { SvgIcon } from '@/components/Icon' |
||||
|
||||
const ListItem = List.Item |
||||
const ListItemMeta = List.Item.Meta |
||||
</script> |
||||
|
||||
<template> |
||||
<Card title="最新动态" v-bind="$attrs"> |
||||
<template #extra> |
||||
<a-button type="link"> |
||||
更多 |
||||
</a-button> |
||||
</template> |
||||
<List item-layout="horizontal" :data-source="dynamicInfoItems"> |
||||
<template #renderItem="{ item }"> |
||||
<ListItem> |
||||
<ListItemMeta> |
||||
<template #description> |
||||
{{ item.date }} |
||||
</template> |
||||
<!-- eslint-disable-next-line --> |
||||
<template #title> {{ item.name }} <span v-html="item.desc"> </span> </template> |
||||
<template #avatar> |
||||
<SvgIcon :name="item.avatar" :size="30" /> |
||||
</template> |
||||
</ListItemMeta> |
||||
</ListItem> |
||||
</template> |
||||
</List> |
||||
</Card> |
||||
</template> |
||||
@ -1,87 +0,0 @@
|
||||
<script lang="ts" setup> |
||||
import { Card, CardGrid } from 'ant-design-vue' |
||||
|
||||
interface GroupItem { |
||||
title: string |
||||
icon: string |
||||
color: string |
||||
desc: string |
||||
date: string |
||||
group: string |
||||
} |
||||
|
||||
const groupItems: GroupItem[] = [ |
||||
{ |
||||
title: 'Github', |
||||
icon: 'i-carbon:logo-github', |
||||
color: '', |
||||
desc: '不要等待机会，而要创造机会。', |
||||
group: '开源组', |
||||
date: '2021-04-01', |
||||
}, |
||||
{ |
||||
title: 'Vue', |
||||
icon: 'i-ion:logo-vue', |
||||
color: '#3fb27f', |
||||
desc: '现在的你决定将来的你。', |
||||
group: '算法组', |
||||
date: '2021-04-01', |
||||
}, |
||||
{ |
||||
title: 'Html5', |
||||
icon: 'i-ion:logo-html5', |
||||
color: '#e18525', |
||||
desc: '没有什么才能比努力更重要。', |
||||
group: '上班摸鱼', |
||||
date: '2021-04-01', |
||||
}, |
||||
{ |
||||
title: 'Angular', |
||||
icon: 'i-ion:logo-angular', |
||||
color: '#bf0c2c', |
||||
desc: '热情和欲望可以突破一切难关。', |
||||
group: 'UI', |
||||
date: '2021-04-01', |
||||
}, |
||||
{ |
||||
title: 'React', |
||||
icon: 'i-bx:bxl-react', |
||||
color: '#00d8ff', |
||||
desc: '健康的身体是实现目标的基石。', |
||||
group: '技术牛', |
||||
date: '2021-04-01', |
||||
}, |
||||
{ |
||||
title: 'Js', |
||||
icon: 'i-ion:logo-javascript', |
||||
color: '#EBD94E', |
||||
desc: '路是走出来的，而不是空想出来的。', |
||||
group: '架构组', |
||||
date: '2021-04-01', |
||||
}, |
||||
] |
||||
</script> |
||||
|
||||
<template> |
||||
<Card title="项目" v-bind="$attrs"> |
||||
<template #extra> |
||||
<a-button type="link"> |
||||
更多 |
||||
</a-button> |
||||
</template> |
||||
|
||||
<CardGrid v-for="item in groupItems" :key="item.title" class="!w-full !md:w-1/3"> |
||||
<span class="flex"> |
||||
<span :class="item.icon" :style="{ color: item.color }" class="text-[30px]" /> |
||||
<span class="ml-4 text-lg">{{ item.title }}</span> |
||||
</span> |
||||
<div class="text-secondary mt-2 h-10 flex"> |
||||
{{ item.desc }} |
||||
</div> |
||||
<div class="text-secondary flex justify-between"> |
||||
<span>{{ item.group }}</span> |
||||
<span>{{ item.date }}</span> |
||||
</div> |
||||
</CardGrid> |
||||
</Card> |
||||
</template> |
||||
@ -1,53 +0,0 @@
|
||||
<script lang="ts" setup> |
||||
import { Card, CardGrid } from 'ant-design-vue' |
||||
|
||||
interface NavItem { |
||||
title: string |
||||
icon: string |
||||
color: string |
||||
} |
||||
|
||||
const navItems: NavItem[] = [ |
||||
{ |
||||
title: '首页', |
||||
icon: 'i-ion:home-outline', |
||||
color: '#1fdaca', |
||||
}, |
||||
{ |
||||
title: '仪表盘', |
||||
icon: 'i-ion:grid-outline', |
||||
color: '#bf0c2c', |
||||
}, |
||||
{ |
||||
title: '组件', |
||||
icon: 'i-ion:layers-outline', |
||||
color: '#e18525', |
||||
}, |
||||
{ |
||||
title: '系统管理', |
||||
icon: 'i-ion:settings-outline', |
||||
color: '#3fb27f', |
||||
}, |
||||
{ |
||||
title: '权限管理', |
||||
icon: 'i-ion:key-outline', |
||||
color: '#4daf1bc9', |
||||
}, |
||||
{ |
||||
title: '图表', |
||||
icon: 'i-ion:bar-chart-outline', |
||||
color: '#00d8ff', |
||||
}, |
||||
] |
||||
</script> |
||||
|
||||
<template> |
||||
<Card title="快捷导航"> |
||||
<CardGrid v-for="item in navItems" :key="item.title"> |
||||
<span class="flex flex-col items-center"> |
||||
<span :class="item.icon" :style="{ color: item.color }" class="text-[20px]" /> |
||||
<span class="text-md mt-2 truncate">{{ item.title }}</span> |
||||
</span> |
||||
</CardGrid> |
||||
</Card> |
||||
</template> |
||||
@ -1,91 +0,0 @@
|
||||
<script lang="ts" setup> |
||||
import type { Ref } from 'vue' |
||||
import { ref, watch } from 'vue' |
||||
import { Card } from 'ant-design-vue' |
||||
import { useECharts } from '@/hooks/web/useECharts' |
||||
import { propTypes } from '@/utils/propTypes' |
||||
|
||||
const props = defineProps({ |
||||
loading: Boolean, |
||||
width: propTypes.string.def('100%'), |
||||
height: propTypes.string.def('400px'), |
||||
}) |
||||
|
||||
const chartRef = ref<HTMLDivElement | null>(null) |
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>) |
||||
watch( |
||||
() => props.loading, |
||||
() => { |
||||
if (props.loading) |
||||
return |
||||
|
||||
setOptions({ |
||||
legend: { |
||||
bottom: 0, |
||||
data: ['Visits', 'Sales'], |
||||
}, |
||||
tooltip: {}, |
||||
radar: { |
||||
radius: '60%', |
||||
splitNumber: 8, |
||||
indicator: [ |
||||
{ |
||||
name: '2017', |
||||
}, |
||||
{ |
||||
name: '2017', |
||||
}, |
||||
{ |
||||
name: '2018', |
||||
}, |
||||
{ |
||||
name: '2019', |
||||
}, |
||||
{ |
||||
name: '2020', |
||||
}, |
||||
{ |
||||
name: '2021', |
||||
}, |
||||
], |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: 'radar', |
||||
symbolSize: 0, |
||||
areaStyle: { |
||||
shadowBlur: 0, |
||||
shadowColor: 'rgba(0,0,0,.2)', |
||||
shadowOffsetX: 0, |
||||
shadowOffsetY: 10, |
||||
opacity: 1, |
||||
}, |
||||
data: [ |
||||
{ |
||||
value: [90, 50, 86, 40, 50, 20], |
||||
name: 'Visits', |
||||
itemStyle: { |
||||
color: '#b6a2de', |
||||
}, |
||||
}, |
||||
{ |
||||
value: [70, 75, 70, 76, 20, 85], |
||||
name: 'Sales', |
||||
itemStyle: { |
||||
color: '#67e0e3', |
||||
}, |
||||
}, |
||||
], |
||||
}, |
||||
], |
||||
}) |
||||
}, |
||||
{ immediate: true }, |
||||
) |
||||
</script> |
||||
|
||||
<template> |
||||
<Card title="销售统计" :loading="loading"> |
||||
<div ref="chartRef" :style="{ width, height }" /> |
||||
</Card> |
||||
</template> |
||||
@ -1,36 +0,0 @@
|
||||
<script lang="ts" setup> |
||||
import { computed } from 'vue' |
||||
import { Avatar } from 'ant-design-vue' |
||||
import { useUserStore } from '@/store/modules/user' |
||||
import headerImg from '@/assets/images/header.jpg' |
||||
|
||||
const userStore = useUserStore() |
||||
const userinfo = computed(() => userStore.getUserInfo) |
||||
</script> |
||||
|
||||
<template> |
||||
<div class="lg:flex"> |
||||
<Avatar :src="userinfo.user.avatar || headerImg" :size="72" class="!mx-auto !block" /> |
||||
<div class="mt-2 flex flex-col justify-center md:ml-6 md:mt-0"> |
||||
<h1 class="text-md md:text-lg"> |
||||
早安, {{ userinfo.user.real_name }}, 开始您一天的工作吧！ |
||||
</h1> |
||||
<span class="text-secondary"> 今日晴，20℃ - 32℃！ </span> |
||||
</div> |
||||
<div class="mt-4 flex flex-1 justify-end md:mt-0"> |
||||
<div class="flex flex-col justify-center text-right"> |
||||
<span class="text-secondary"> 待办 </span> |
||||
<span class="text-2xl">2/10</span> |
||||
</div> |
||||
|
||||
<div class="mx-12 flex flex-col justify-center text-right md:mx-16"> |
||||
<span class="text-secondary"> 项目 </span> |
||||
<span class="text-2xl">8</span> |
||||
</div> |
||||
<div class="mr-4 flex flex-col justify-center text-right md:mr-10"> |
||||
<span class="text-secondary"> 团队 </span> |
||||
<span class="text-2xl">300</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
@ -1,57 +0,0 @@
|
||||
interface DynamicInfoItem { |
||||
avatar: string |
||||
name: string |
||||
date: string |
||||
desc: string |
||||
} |
||||
|
||||
export const dynamicInfoItems: DynamicInfoItem[] = [ |
||||
{ |
||||
avatar: 'dynamic-avatar-1', |
||||
name: '威廉', |
||||
date: '刚刚', |
||||
desc: '在 <a>开源组</a> 创建了项目 <a>Vue</a>', |
||||
}, |
||||
{ |
||||
avatar: 'dynamic-avatar-2', |
||||
name: '艾文', |
||||
date: '1个小时前', |
||||
desc: '关注了 <a>威廉</a> ', |
||||
}, |
||||
{ |
||||
avatar: 'dynamic-avatar-3', |
||||
name: '克里斯', |
||||
date: '1天前', |
||||
desc: '发布了 <a>个人动态</a> ', |
||||
}, |
||||
{ |
||||
avatar: 'dynamic-avatar-4', |
||||
name: 'Kay', |
||||
date: '2天前', |
||||
desc: '发表文章 <a>如何编写一个Vite插件</a> ', |
||||
}, |
||||
{ |
||||
avatar: 'dynamic-avatar-5', |
||||
name: '皮特', |
||||
date: '3天前', |
||||
desc: '回复了 <a>杰克</a> 的问题 <a>如何进行项目优化？</a>', |
||||
}, |
||||
{ |
||||
avatar: 'dynamic-avatar-6', |
||||
name: '杰克', |
||||
date: '1周前', |
||||
desc: '关闭了问题 <a>如何运行项目</a> ', |
||||
}, |
||||
{ |
||||
avatar: 'dynamic-avatar-1', |
||||
name: '威廉', |
||||
date: '1周前', |
||||
desc: '发布了 <a>个人动态</a> ', |
||||
}, |
||||
{ |
||||
avatar: 'dynamic-avatar-1', |
||||
name: '威廉', |
||||
date: '2021-04-01 20:00', |
||||
desc: '推送了代码到 <a>Github</a>', |
||||
}, |
||||
] |
||||
@ -1,39 +0,0 @@
|
||||
<script lang="ts" setup> |
||||
import { ref } from 'vue' |
||||
import { Card } from 'ant-design-vue' |
||||
import WorkbenchHeader from './components/WorkbenchHeader.vue' |
||||
import ProjectCard from './components/ProjectCard.vue' |
||||
import QuickNav from './components/QuickNav.vue' |
||||
import DynamicInfo from './components/DynamicInfo.vue' |
||||
import SaleRadar from './components/SaleRadar.vue' |
||||
import { PageWrapper } from '@/components/Page' |
||||
|
||||
const loading = ref(true) |
||||
|
||||
setTimeout(() => { |
||||
loading.value = false |
||||
}, 500) |
||||
</script> |
||||
|
||||
<template> |
||||
<PageWrapper> |
||||
<template #headerContent> |
||||
<WorkbenchHeader /> |
||||
</template> |
||||
<div class="lg:flex"> |
||||
<div class="enter-y w-full !mr-4 lg:w-7/10"> |
||||
<ProjectCard :loading="loading" class="enter-y" /> |
||||
<DynamicInfo :loading="loading" class="enter-y !my-4" /> |
||||
</div> |
||||
<div class="enter-y w-full lg:w-3/10"> |
||||
<QuickNav :loading="loading" class="enter-y" /> |
||||
|
||||
<Card class="enter-y !my-4" :loading="loading"> |
||||
<img class="mx-auto h-30 xl:h-50" src="@/assets/svg/illustration.svg"> |
||||
</Card> |
||||
|
||||
<SaleRadar :loading="loading" class="enter-y" /> |
||||
</div> |
||||
</div> |
||||
</PageWrapper> |
||||
</template> |
||||
Loading…
Reference in new issue