<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="flex-center" @click="selectLocal(item)">
|
<div v-if="key !== 0" class="flex-center" style="width:50px;margin-right:3px;">
|
<!-- <i class="d-block fas fa-long-arrow-alt-right"></i> -->
|
<div class="linex"></div>
|
<i class="d-block fas fa-caret-right timeline-out-icon"></i>
|
</div>
|
|
<div :class="['d-block fas fa-map-marker-alt',item.isActive?'timeline-icon-active':'timeline-out-icon']"></div>
|
<span :class="['timeline-address',item.isActive?'timeline-icon-active':'timeline-out-icon']">{{item.address}}</span>
|
</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: [
|
{
|
id: '001',
|
type: 'circle',
|
color: 'red',
|
tag: '测试',
|
address: '学校教学楼',
|
isActive: true,
|
content: '2019-01-07',
|
year: '2019',
|
month: '01',
|
day: '01',
|
close: false
|
},
|
{
|
id: '002',
|
type: 'circle',
|
color: 'red',
|
tag: '测试',
|
address: '学校宿舍楼',
|
isActive: false,
|
content: '2019-01-07',
|
year: '2019',
|
month: '01',
|
day: '02',
|
close: false
|
},
|
{
|
id: '003',
|
type: 'circle',
|
color: 'red',
|
tag: '测试',
|
address: '学校东门',
|
isActive: true,
|
content: '2019-01-07',
|
year: '2019',
|
month: '02',
|
day: '01',
|
close: false
|
},
|
{
|
id: '004',
|
type: 'circle',
|
color: 'red',
|
tag: '测试',
|
address: '学校操场',
|
isActive: false,
|
content: '2019-01-07',
|
year: '2019',
|
month: '02',
|
day: '02',
|
close: false
|
},
|
{
|
id: '005',
|
type: 'circle',
|
color: 'red',
|
tag: '测试',
|
address: '学校食堂',
|
isActive: true,
|
content: '2019-01-07',
|
year: '2019',
|
month: '03',
|
day: '01',
|
close: false
|
},
|
{
|
id: '006',
|
type: 'circle',
|
color: 'red',
|
tag: '测试',
|
address: '学校篮球场',
|
isActive: false,
|
content: '2019-01-07',
|
year: '2019',
|
month: '03',
|
day: '02',
|
close: false
|
},
|
{
|
id: '007',
|
type: 'circle',
|
color: 'red',
|
tag: '测试',
|
address: '学校哪路',
|
isActive: true,
|
content: '2019-01-07',
|
year: '2019',
|
month: '04',
|
day: '01',
|
close: false
|
}
|
],
|
// 记录左侧第一个数据的索引
|
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() {
|
console.log(this.leftIndex, 'this.leftIndex')
|
if (this.leftIndex !== 0) {
|
this.items = [...this.total.slice(this.leftIndex - 1, this.leftIndex), ...this.items]
|
this.items = [...this.items.splice(0, 4)]
|
this.leftIndex -= 1
|
this.ringhtIndex -= 1
|
}
|
},
|
goRight() {
|
if (this.ringhtIndex !== 0) {
|
if (this.total.length - this.ringhtIndex > 0) {
|
this.items = [...this.items, ...this.total.slice(this.ringhtIndex, this.ringhtIndex + 1)]
|
this.items = [...this.items.splice(1, 5)]
|
this.leftIndex += 1
|
this.ringhtIndex += 1
|
}
|
}
|
},
|
closeMonth(data, index) {
|
console.log(data)
|
if (data && data !== undefined) {
|
if (data.close) {
|
/** close为真说明是要展开 */
|
let arr1 = this.items.splice(0, index + 1)
|
console.log(arr1, 'arr1')
|
let arr2 = this.total
|
let arr3 = this.items
|
arr1.forEach(item => {
|
arr2 = arr2.filter(i => (i.id !== item.id))
|
if (item.close) {
|
arr2 = arr2.filter(i => (i.month === data.month))
|
}
|
})
|
console.log(arr2, 'arr2')
|
let arr4 = [...arr1, ...arr2]
|
arr4.forEach(item => {
|
arr3 = arr3.filter(i => (i.id !== item.id))
|
})
|
console.log(arr3, 'arr3')
|
let arr5 = [...arr4, ...arr3]
|
console.log(arr5, 'arr5')
|
this.items = arr5.splice(0, 4)
|
this.$set(data, 'close', false)
|
console.log(this.items, '展开的数据')
|
} else {
|
/** 为假说明是收起 */
|
/** 从轴过滤出来本月的数据 */
|
let arr1 = this.items.filter(item => (item.month !== data.month || item.id === data.id))
|
/** 从总数据中过滤出本月数据 */
|
let arr2 = this.total.filter(item => (item.month !== data.month && item.id !== data.id))
|
arr1.forEach(item => {
|
arr2 = arr2.filter(i => (i.id !== item.id))
|
if (item.close) {
|
arr2 = arr2.filter(i => (i.month !== item.month))
|
}
|
})
|
let arr3 = [...arr1, ...arr2]
|
this.items = arr3.slice(0, 4)
|
this.$set(data, 'close', true)
|
console.log(this.items, '收起的数据')
|
}
|
}
|
},
|
InitTimeline() {
|
this.items = this.total.slice(0, 4)
|
if (this.items.length !== 0) {
|
if (this.items.length <= 4) {
|
this.leftIndex = 0
|
this.ringhtIndex = this.items.length
|
} 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)]
|
},
|
selectLocal(data) {
|
// this.items.forEach(i => {
|
// if (i.videoReqNum !== data.videoReqNum) {
|
// this.$set(i, 'isActive', false)
|
// }
|
// })
|
this.$emit('changParam', data, 'tlList2')
|
}
|
|
},
|
mounted() {
|
this.total = this.dataList
|
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 #26b4ff;
|
|
.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;
|
// color: #26b4ff;
|
}
|
.timeline-icon-active{
|
color: rgb(240, 8, 8);
|
}
|
.btn-circle-timeline{
|
width: 15px;
|
height: 15px;
|
text-align: center;
|
padding: 0;
|
}
|
.timeline-address{
|
margin-left: 5px;
|
}
|
.linex{
|
width: 100%;
|
height: 2px;
|
border: 2px solid #26b4ff;
|
}
|
</style>
|
