<template>
|
<div class="flex-center timeline-out-content">
|
<fTemplate @click.native="goLeft()">
|
<i class="d-block fas fa-chevron-left timeline-out-icon"></i>
|
</fTemplate>
|
<div :style="`float:left;width:${(1/(items.length))*100}%`" v-for='(item,key) in items' :key="key">
|
<div class="timeline-container" @click="selectLocal(item)">
|
<div :class="[item.isActive?'timeitem-circle-isActive':'timeitem-circle']" @click.native="goLeft()">
|
<div class="timeitem-daynum flex-center">
|
{{item.monthfirst?item.showMonth:item.day}}
|
<b-btn v-if="item.monthfirst" variant="primary" class="btn-circle-timeline" @click="closeMonth(item,key)">
|
<i v-if="!item.close" class="ion d-block ion-md-arrow-dropleft"></i>
|
<i v-if="item.close" class="ion d-block ion-md-arrow-dropright"></i>
|
</b-btn>
|
</div>
|
</div>
|
</div>
|
</div>
|
<fTemplate @click.native="goRight()">
|
<i class="d-block fas fa-chevron-right timeline-out-icon"></i>
|
</fTemplate>
|
</div>
|
</template>
|
<script>
|
export default {
|
name: 'light-timeline',
|
components: { },
|
props: {
|
dataList: {
|
type: Array,
|
default: () => {}
|
},
|
activeColor: {
|
type: String,
|
default: '#26B4FF'
|
},
|
indexVal: {
|
default: 0
|
}
|
},
|
data() {
|
return {
|
presetReg: /defaultColor|orange|yellow/,
|
// indexVal: 0
|
items: [
|
],
|
total: [],
|
// 记录左侧第一个数据的索引
|
leftIndex: 0,
|
// 记录右侧第一个数据的索引
|
ringhtIndex: 0
|
}
|
},
|
watch: {
|
dataList: {
|
handler(newVal, oldVal) {
|
if (newVal !== oldVal) {
|
console.log(newVal, 'timeline newVal')
|
this.total = this.dataList
|
this.InitTimeline()
|
}
|
},
|
deep: true
|
}
|
},
|
methods: {
|
getColorClass(color) {
|
return this.presetReg.test(color) ? color : ''
|
},
|
getStyle(item) {
|
const color =
|
item.color && item.color !== '' ? item.color : this.activeColor
|
if (!this.presetReg.test(color)) {
|
return item.type === 'star'
|
? this.makeStarColor(color)
|
: this.makeCircleColor(color)
|
}
|
return {}
|
},
|
makeCircleColor(color) {
|
return { border: `2px solid ${color}` }
|
},
|
makeStarColor(color) {
|
return { stroke: color }
|
},
|
clickTimerIteam(json, key) {
|
// this.indexVal = key
|
this.$emit('clickBackfn', json, key)
|
},
|
|
goLeft() {
|
if (this.leftIndex !== 0) {
|
console.log(this.leftIndex, 'this.leftIndex')
|
if (this.items[0].monthfirst) {
|
let arr1 = this.total.filter((i, index) => {
|
if (i.monthfirst && i.close) {
|
this.$set(i, 'index', index)
|
return true
|
}
|
})
|
if (arr1.length > 0 && arr1) {
|
arr1.forEach((i, index) => {
|
let beforeNode = this.total[this.leftIndex - 1]
|
if (i.year === beforeNode.year && i.month === beforeNode.month) {
|
let arr2 = this.total.filter((temp, index) => {
|
if (temp.monthfirst) {
|
return true
|
} else {
|
if (temp.year === i.year && temp.month === i.month) {
|
return false
|
} else {
|
return true
|
}
|
}
|
})
|
/** 过滤掉之前收起来的天数 */
|
if (arr2.length >= 5) {
|
this.items = arr2.slice(arr1.length - 1, arr1.length + 4)
|
this.ringhtIndex = this.items[4].index
|
} else {
|
this.items = arr2
|
}
|
this.leftIndex = this.items[0].index
|
}
|
})
|
} else {
|
/** 左移一个，直接通过索引左移 */
|
this.items = this.total.slice(this.leftIndex - 1, this.ringhtIndex)
|
this.leftIndex = this.leftIndex - 1
|
this.ringhtIndex = this.ringhtIndex - 1
|
}
|
} else {
|
/** 左移一个，直接通过索引左移 */
|
this.items = this.total.slice(this.leftIndex - 1, this.ringhtIndex)
|
this.leftIndex = this.leftIndex - 1
|
this.ringhtIndex = this.ringhtIndex - 1
|
}
|
}
|
},
|
goRight() {
|
console.log(this.total, '======this.total')
|
if (this.ringhtIndex !== (this.total.length - 1)) {
|
/** 判断第一个数据是否是收起状态 */
|
console.log(this.items, '======this.items')
|
if (this.items[0].close) {
|
/** 如果是修改左侧索引位置 */
|
this.total.filter((i, index) => {
|
if (i.year === this.items[0].year && i.month === this.items[0].month) {
|
if (this.total[index + 1].year === this.items[0].year && this.total[index + 1].month === this.items[0].month) {
|
return true
|
} else {
|
this.leftIndex = index
|
return false
|
}
|
}
|
})
|
}
|
console.log(this.leftIndex, 'this.leftIndex', this.ringhtIndex)
|
/** 不考虑那么多，直接根据索引往右移动一个 */
|
this.items = this.total.slice(this.leftIndex + 1, this.ringhtIndex + 2)
|
this.leftIndex = this.leftIndex + 1
|
this.ringhtIndex = this.ringhtIndex + 1
|
}
|
},
|
closeMonth(data, key) {
|
console.log(data, '收起某月')
|
if (data && data !== undefined) {
|
if (data.close) {
|
/** close为真说明是要展开 */
|
this.items = this.total.slice(this.leftIndex, this.leftIndex + 5)
|
this.ringhtIndex = this.items[4].index
|
this.$set(data, 'close', false)
|
} else {
|
/** 从总数据中过滤掉该月的数据 */
|
let arr = this.total.filter((e) => {
|
if (e.monthfirst) {
|
return true
|
} else {
|
if (e.year === data.year && e.month === data.month) {
|
return false
|
} else {
|
return true
|
}
|
}
|
})
|
console.log(arr, '收起某月')
|
if (arr.length <= 5) {
|
this.items = arr
|
} else {
|
this.items = arr.slice(0, 5)
|
}
|
const findEle = (element) => {
|
return element.Id === this.items[this.items.length - 1].Id
|
}
|
/** 右边的索引 */
|
this.ringhtIndex = this.total.findIndex(findEle)
|
// console.log(this.total.findIndex(findEle), '=======最后一个元素的索引')
|
this.$set(data, 'close', true)
|
}
|
}
|
},
|
selectLocal(data) {
|
this.$nextTick(() => {
|
this.$emit('changParam', data, 'tlList')
|
})
|
},
|
/** 初始化时间轴，给左右索引赋值 */
|
InitTimeline() {
|
this.items = this.total.slice(0, 5)
|
if (this.items.length !== 0) {
|
if (this.items.length <= 5) {
|
this.leftIndex = 0
|
this.ringhtIndex = this.items.length - 1
|
} else {
|
this.leftIndex = 0
|
this.ringhtIndex = 4
|
}
|
}
|
},
|
/** 设置一段时间显示在时间轴的前面 */
|
setStartTime(arr) {
|
// arr应该是一个按照时间排序的有序数组
|
if (arr !== undefined && arr.length !== 0) {
|
let startNode = arr[0]
|
let endNode = arr[arr.length - 1]
|
this.total.forEach((item, index) => {
|
if (item.id === startNode.id) {
|
this.leftIndex = index
|
}
|
if (item.id === endNode.id) {
|
this.ringhtIndex = index
|
}
|
})
|
}
|
this.items = [...this.total.slice(this.leftIndex + 1, this.ringhtIndex + 1)]
|
}
|
|
},
|
mounted() {
|
this.total = this.dataList
|
this.total.forEach((i, index) => {
|
this.$set(i, 'index', index)
|
})
|
console.log(this.total, 'this.total')
|
this.InitTimeline()
|
}
|
}
|
</script>
|
<style lang="scss">
|
$font-family-no-number: 'Chinese Quote', -apple-system, BlinkMacSystemFont,
|
'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
|
'Helvetica Neue', Helvetica, Arial, sans-serif;
|
$font-family: 'Helvetica Neue For Number', $font-family-no-number;
|
$tag-family: Consolas, Menlo, Courier, monospace;
|
|
$defaultColor: #ccc;
|
$orange: #ed9153;
|
$yellow: #fbd157;
|
$font-color: #606c76;
|
$font-size: 14px;
|
$left-pad: 5rem;
|
$item-pad: 1rem;
|
$icon-size: 16px;
|
$sm-icon-size: 10px;
|
$lg-icon-size: 24px;
|
|
$colors: (
|
defaultColor: $defaultColor,
|
orange: $orange,
|
yellow: $yellow
|
);
|
|
@mixin square($val) {
|
width: $val;
|
height: $val;
|
}
|
|
@mixin circle($diameter, $color) {
|
@include square($diameter);
|
border-radius: $diameter/2 + 2px;
|
background: white;
|
border: 2px solid $color;
|
}
|
|
@mixin line-point($val) {
|
box-sizing: border-box;
|
position: absolute;
|
left: -$item-pad;
|
margin-left: -($val/2) + 1px;
|
z-index: 1;
|
}
|
|
@mixin make-circle($diameter, $color) {
|
@include line-point($diameter);
|
@include circle($diameter, $color);
|
}
|
|
@mixin make-star($val, $color) {
|
@include line-point($val);
|
@include square($val);
|
margin-top: -($val/6);
|
path {
|
stroke: $color;
|
stroke-width: 4px;
|
fill: white;
|
}
|
}
|
|
:root {
|
--defaultColor: $defaultColor;
|
--orange: $orange;
|
--yellow: $yellow;
|
}
|
|
.line-container {
|
color: $font-color;
|
font-size: $font-size;
|
font-family: $font-family;
|
box-sizing: border-box;
|
position: relative;
|
list-style: none;
|
margin: 0.5rem;
|
width: 32px;
|
padding-left: $left-pad + 1rem;
|
&::after {
|
position: absolute;
|
content: '';
|
left: $left-pad;
|
top: 0;
|
width: 100%;
|
height: 2px;
|
background-color: $defaultColor; //lighten($defaultColor, 90%);
|
}
|
|
.line-item {
|
padding: $item-pad;
|
position: relative;
|
}
|
.item-circle {
|
cursor: pointer;
|
margin-top: -6px;
|
transition: 0.5s all;
|
@include make-circle($icon-size, $defaultColor);
|
@each $key, $val in $colors {
|
&.#{$key} {
|
border: 2px solid $val;
|
}
|
}
|
}
|
.item-star {
|
cursor: pointer;
|
@include make-star($lg-icon-size, $defaultColor);
|
@each $key, $val in $colors {
|
&.#{$key} {
|
path {
|
stroke: $val;
|
}
|
}
|
}
|
}
|
.item-tag {
|
position: absolute;
|
left: -($left-pad + 1rem);
|
width: 65px;
|
text-align: center;
|
color: lighten($font-color, 20%);
|
font-size: $font-size/1.2;
|
cursor: pointer;
|
}
|
.item-content {
|
white-space: pre-line;
|
&.star {
|
font-weight: bold;
|
font-size: $font-size * 1.1;
|
}
|
cursor: pointer;
|
}
|
}
|
|
.line{
|
width: 32px;
|
height: 2px;
|
border: 2px solid $font-color;
|
}
|
|
.timeline-container{
|
width: 100%;
|
height: 2px;
|
border: 2px solid #cccccc;
|
|
.timeitem-circle{
|
width: 15px;
|
height: 15px;
|
border-radius: 50%;
|
background: white;
|
border: 2px solid #cccccc;
|
margin-left: 50px;
|
margin-top: -7px;
|
}
|
.timeitem-circle-isActive{
|
width: 15px;
|
height: 15px;
|
border-radius: 50%;
|
background: rgb(240, 8, 8);
|
border: 2px solid #cccccc;
|
margin-left: 50px;
|
margin-top: -7px;
|
}
|
.timeitem-daynum{
|
margin-top: -20px;
|
width: 110px;
|
margin-left: -55px;
|
}
|
}
|
|
.timeline-out-icon{
|
margin-top: 0px;
|
}
|
.btn-circle-timeline{
|
width: 15px;
|
height: 15px;
|
text-align: center;
|
padding: 0;
|
}
|
</style>
|
