徐景良 2026-03-13 16:53:57 +08:00
commit aa9dfa3ef6
1 changed files with 42 additions and 32 deletions

View File

@ -1,21 +1,26 @@
<template> <template>
<div class="ZhiGan_ModalTimeLine"> <div class="ZhiGan_ModalTimeLine">
<n-timeline :icon-size="option.dataStyle.iconSize" :size="option.dataStyle.size"> <a-timeline mode="left" :icon-size="option.dataStyle.iconSize" :size="option.dataStyle.size">
<n-timeline-item <a-timeline-item
class="list" class="list"
v-for="(item, index) in option.dataset" v-for="(item, index) in option.dataset"
:key="item" :key="item"
:type="item.type" :type="item.type"
> >
<template #icon></template> <template #label>
<template #header> <div class="time-box">
<!-- 标题 --> <div class="date">{{ item.time.split(' ')[0] }}</div>
<div class="time">{{ item.time.split(' ')[1] }}</div>
</div>
</template>
<template #default>
<div v-if="option.dataStyle.showTitle"> <div v-if="option.dataStyle.showTitle">
<div <div
v-if="index == 0" v-if="index == 0"
:style="{ :style="{
color: option.dataStyle.titleColorFirst, color: option.dataStyle.titleColorFirst,
fontSize: `${option.dataStyle.titleFontSizeFirst}px`, fontSize: `${option.dataStyle.titleFontSizeFirst}px`,
fontWeight: 700,
}" }"
> >
{{ item.title }} {{ item.title }}
@ -25,36 +30,12 @@
:style="{ :style="{
color: option.dataStyle.titleColor, color: option.dataStyle.titleColor,
fontSize: `${option.dataStyle.titleFontSize}px`, fontSize: `${option.dataStyle.titleFontSize}px`,
fontWeight: 700,
}" }"
> >
{{ item.title }} {{ item.title }}
</div> </div>
</div> </div>
</template>
<template #default>
<div v-if="option.dataStyle.showTime">
<!-- 时间 -->
<div
v-if="index == 0"
:style="{
color: option.dataStyle.timeColorFirst,
fontSize: `${option.dataStyle.timeFontSizeFirst}px`,
}"
>
{{ item.time }}
</div>
<div
v-else
:style="{
color: option.dataStyle.timeColor,
fontSize: `${option.dataStyle.timeFontSize}px`,
}"
>
{{ item.time }}
</div>
</div>
<!-- 虚线 -->
<span v-if="option.dataStyle.showLine">-------------------------------</span>
<!-- 文本 --> <!-- 文本 -->
<div v-if="option.dataStyle.showContent"> <div v-if="option.dataStyle.showContent">
<div <div
@ -255,8 +236,8 @@
</div> </div>
</div> </div>
</template> </template>
</n-timeline-item> </a-timeline-item>
</n-timeline> </a-timeline>
</div> </div>
</template> </template>
@ -335,6 +316,7 @@
// callback // callback
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => { useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
option.dataset = resData; option.dataset = resData;
console.log(1111111111,resData)
}); });
}); });
@ -386,6 +368,7 @@
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => { useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
if (resData) { if (resData) {
option.dataset = resData; option.dataset = resData;
console.log(1111111111,resData)
} }
}); });
} }
@ -394,6 +377,15 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.time-box{
width: 100px;
color: rgb(255, 255, 255);
font-size: 16px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.ZhiGan_ModalTimeLine { .ZhiGan_ModalTimeLine {
overflow-y: auto; overflow-y: auto;
width: v-bind('`${w}px`'); width: v-bind('`${w}px`');
@ -401,7 +393,25 @@
margin-top: v-bind('`${option.dataStyle.marginTop}px`'); margin-top: v-bind('`${option.dataStyle.marginTop}px`');
background: v-bind('`${option.dataStyle.background}`'); background: v-bind('`${option.dataStyle.background}`');
border: 1px solid v-bind('`${option.dataStyle.borderColor}`'); border: 1px solid v-bind('`${option.dataStyle.borderColor}`');
padding: 10px;
display: block; display: block;
:deep(.ant-timeline-item-label){
width: 100px !important;
}
:deep(.ant-timeline-item-tail){
left: 110px !important;
border-inline-start: 2px solid #103A26;;
}
:deep(.ant-timeline-item-head){
left: 110px !important;
border-color: rgb(118, 124, 130);
}
:deep(.ant-timeline-item-content){
margin-left: 130px !important;
}
:deep(.ant-timeline-item-content){
inset-inline-start: initial !important;
}
} }
.ZhiGan_ModalTimeLine::-webkit-scrollbar { .ZhiGan_ModalTimeLine::-webkit-scrollbar {