2023-03-08 15:02:41 +08:00
|
|
|
|
<template>
|
2023-03-15 20:21:10 +08:00
|
|
|
|
<collapse-item name="展示方式" :expanded="true">
|
|
|
|
|
<setting-item-box name="选择方式">
|
2023-05-22 11:36:43 +08:00
|
|
|
|
<n-select v-model:value="optionData.isPanel" size="small" :options="panelOptions" />
|
2023-03-15 20:21:10 +08:00
|
|
|
|
</setting-item-box>
|
|
|
|
|
</collapse-item>
|
|
|
|
|
|
2023-03-14 22:19:55 +08:00
|
|
|
|
<collapse-item name="时间配置" :expanded="true">
|
|
|
|
|
<setting-item-box name="基础">
|
2023-03-08 15:02:41 +08:00
|
|
|
|
<setting-item name="类型">
|
2023-05-22 11:36:43 +08:00
|
|
|
|
<n-select v-model:value="optionData.componentInteractEventKey" size="small" :options="datePickerTypeOptions" />
|
2023-03-08 15:02:41 +08:00
|
|
|
|
</setting-item>
|
2023-03-14 22:19:55 +08:00
|
|
|
|
</setting-item-box>
|
2023-03-08 15:02:41 +08:00
|
|
|
|
|
2023-03-14 22:19:55 +08:00
|
|
|
|
<setting-item-box name="默认值" :alone="true">
|
2023-05-22 11:36:43 +08:00
|
|
|
|
<n-date-picker size="small" v-model:value="optionData.dataset" :type="optionData.componentInteractEventKey" />
|
|
|
|
|
</setting-item-box>
|
|
|
|
|
|
|
|
|
|
<setting-item-box :alone="true">
|
|
|
|
|
<template #name>
|
|
|
|
|
<n-text>动态</n-text>
|
|
|
|
|
<n-tooltip trigger="hover">
|
|
|
|
|
<template #trigger>
|
|
|
|
|
<n-icon size="21" :depth="3">
|
|
|
|
|
<help-outline-icon></help-outline-icon>
|
|
|
|
|
</n-icon>
|
|
|
|
|
</template>
|
|
|
|
|
<n-text>动态值不为0时,默认值:取当天时间相加当前值</n-text>
|
|
|
|
|
</n-tooltip>
|
|
|
|
|
</template>
|
|
|
|
|
<n-input-number v-model:value="optionData.differValue" class="input-num-width" size="small" :min="-40" :max="40">
|
|
|
|
|
<template #suffix> 天 </template>
|
|
|
|
|
</n-input-number>
|
2023-03-14 22:19:55 +08:00
|
|
|
|
</setting-item-box>
|
|
|
|
|
</collapse-item>
|
2023-03-08 15:02:41 +08:00
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
import { PropType } from 'vue'
|
|
|
|
|
import { icon } from '@/plugins'
|
|
|
|
|
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
2023-03-11 16:58:32 +08:00
|
|
|
|
import { option } from './config'
|
2023-03-15 20:21:10 +08:00
|
|
|
|
import { ComponentInteractEventEnum } from './interact'
|
2023-03-08 15:02:41 +08:00
|
|
|
|
|
|
|
|
|
const { HelpOutlineIcon } = icon.ionicons5
|
|
|
|
|
|
|
|
|
|
const props = defineProps({
|
|
|
|
|
optionData: {
|
|
|
|
|
type: Object as PropType<typeof option>,
|
|
|
|
|
required: true
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
2023-03-15 20:21:10 +08:00
|
|
|
|
const panelOptions = [
|
|
|
|
|
{
|
|
|
|
|
label: '下拉展示',
|
|
|
|
|
value: 0
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '面板展示',
|
|
|
|
|
value: 1
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
|
2023-03-08 15:02:41 +08:00
|
|
|
|
const datePickerTypeOptions = [
|
|
|
|
|
{
|
2023-03-15 20:21:10 +08:00
|
|
|
|
label: '日期',
|
|
|
|
|
value: ComponentInteractEventEnum.DATE
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '日期时间',
|
|
|
|
|
value: ComponentInteractEventEnum.DATE_TIME
|
2023-03-08 15:02:41 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '日期范围',
|
2023-03-15 20:21:10 +08:00
|
|
|
|
value: ComponentInteractEventEnum.DATE_RANGE
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '月份',
|
|
|
|
|
value: ComponentInteractEventEnum.MONTH
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '月份范围',
|
|
|
|
|
value: ComponentInteractEventEnum.MONTH_RANGE
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '年份',
|
|
|
|
|
value: ComponentInteractEventEnum.YEAR
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '年份范围',
|
|
|
|
|
value: ComponentInteractEventEnum.YEAR_RANGE
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '季度',
|
|
|
|
|
value: ComponentInteractEventEnum.QUARTER
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '季度范围',
|
|
|
|
|
value: ComponentInteractEventEnum.QUARTER_RANGE
|
2023-03-08 15:02:41 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
</script>
|