You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
403 lines
10 KiB
403 lines
10 KiB
<template>
|
|
<div class="component-container time-line">
|
|
<!-- 类型筛查 -->
|
|
<div class="type-screen">
|
|
<el-collapse v-model="activeNames" @change="collapseChange">
|
|
<el-collapse-item name="1">
|
|
<template slot="title">
|
|
<!-- 头部 -->
|
|
<div class="type-screen-head">
|
|
<div class="type-screen-left">
|
|
<span class="type-screen-left-title">类型筛查</span>
|
|
<img :src="require('@/assets/img/type_screen_bgc_l.png')" alt="">
|
|
</div>
|
|
<div
|
|
class="type-screen-right"
|
|
@mouseover="IsTypeScreenRightShow=true"
|
|
@mouseout="IsTypeScreenRightShow=false"
|
|
@click="typeScreenClick"
|
|
>
|
|
<svg-icon icon-class="icon-screen" />
|
|
<img
|
|
class="type-screen-right-img"
|
|
:src="require('@/assets/img/type_screen_bgc_r.png')"
|
|
alt=""
|
|
>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<!-- 类型内容 -->
|
|
<div class="type-screen-content">
|
|
<el-checkbox-group v-model="typeScreenCheckArr">
|
|
<el-checkbox
|
|
v-for="(item,index) in checkboxLableArr"
|
|
:key="index"
|
|
:label="item"
|
|
@change="checkboxChange"
|
|
/>
|
|
</el-checkbox-group>
|
|
</div>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
</div>
|
|
<div v-if="timeAxisData.length>0" :class="activeNames==1 ? 'scroll-father-open':'scroll-father-close'">
|
|
<el-scrollbar class="scrollbar-wrapper" style="height:100%;padding-bottom: 30px">
|
|
<div v-for="(item,index) in timeAxisData" :key="index">
|
|
<!-- 年份 -->
|
|
<div class="time-line-year">
|
|
<div class="time-line-item-tail" />
|
|
<div class="time-line-item-date">
|
|
<div class="time-line-background" />
|
|
<div class="time-line-title">{{ item.year }}</div>
|
|
</div>
|
|
</div>
|
|
<div v-for="(itemData, itemDataIndex) in item.data" :key="itemDataIndex" class="time-line-item">
|
|
<!-- 节点 -->
|
|
<div class="time-line-item-node">
|
|
<i v-show="false" class="node" />
|
|
<div class="node" :class="itemCurrentIndex == itemDataIndex && currentIndex == index ? 'nodeActive' : ''" />
|
|
|
|
</div>
|
|
<!-- 节点尾 -->
|
|
<div class="time-line-item-tail" />
|
|
<!-- 内容 -->
|
|
<div class="time-line-item-wrapper">
|
|
<!-- 抬头 -->
|
|
<div class="time-line-item-wrapper-title">
|
|
<span class="title">
|
|
<span class="title-time">{{ itemData.date|convertDate }}</span>
|
|
</span>
|
|
</div>
|
|
<!-- 内容 -->
|
|
<div
|
|
v-for="(item2, itemListIndex) in itemData.itemList"
|
|
:key="itemListIndex"
|
|
class="time-line-item-wrapper-item"
|
|
:class="itemCurrentIndex == itemDataIndex && currentIndex == index && itemListCurrentIndex==itemListIndex ? 'activeTitle' : ''"
|
|
@click="sclectMentItem(item2,index,itemDataIndex,itemListIndex)"
|
|
>
|
|
|
|
<img :src="require('@/assets/img/icon-timeZ.png')" alt="">
|
|
<span class="time-line-item-wrapper-item-title">{{ item2.type }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-scrollbar>
|
|
</div>
|
|
<div v-else class="empty">空</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
name: 'TimeLine',
|
|
props: {
|
|
timeAxisData: {
|
|
type: Array,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
IsTypeScreenRightShow: false,
|
|
drgsName: window.localStorage.getItem('identity'),
|
|
typeScreenCheckArr: ['诊断', '手术', '用药', '住院', '出院', '检查', '随访'],
|
|
checkboxLableArr: ['诊断', '手术', '用药', '住院', '出院', '检查', '随访'],
|
|
currentIndex: 0,
|
|
itemCurrentIndex: 0,
|
|
itemListCurrentIndex: 0,
|
|
activeNames: ['1']
|
|
}
|
|
},
|
|
watch: {
|
|
timeAxisData(val) {
|
|
this.timeAxisData = val
|
|
}
|
|
},
|
|
methods: {
|
|
collapseChange(e) {
|
|
},
|
|
// 点击日期
|
|
selectMenu(index, itemDataIndex) {
|
|
},
|
|
// 点击子节点
|
|
sclectMentItem(item, index, itemDataIndex, itemListIndex) {
|
|
console.log('123', item)
|
|
this.currentIndex = index
|
|
this.itemCurrentIndex = itemDataIndex
|
|
this.itemListCurrentIndex = itemListIndex
|
|
// 1是随访 0不是随访
|
|
item.isVisit === '1' ? this.$listeners.getVisitRecordInfo(item) : this.$listeners.getTimeAxisNodeInfo(item, item.date, item.type)
|
|
},
|
|
// 点击类型筛选
|
|
typeScreenClick() {
|
|
},
|
|
checkboxChange() {
|
|
this.$listeners.getTimeAxisData(this.typeScreenCheckArr)
|
|
},
|
|
setCheckArr() {
|
|
this.typeScreenCheckArr = JSON.parse(JSON.stringify(this.checkboxLableArr))
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
$color: #fff;
|
|
// $containerBgColor: #f8fafa;
|
|
$containerBgColor: #0c1016;
|
|
$borderColor: #424242;
|
|
$paddingRight: 0px;
|
|
.empty {
|
|
color: #000;
|
|
}
|
|
.time-line {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
color: $color;
|
|
background-color: $containerBgColor;
|
|
|
|
.time-line-item-wrapper-item-title{
|
|
vertical-align: middle;
|
|
margin-left: 5px;
|
|
}
|
|
.type-screen-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.type-screen-left {
|
|
position: relative;
|
|
width: 193px;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
.type-screen-left-title {
|
|
position: absolute;
|
|
color: #fff;
|
|
z-index:99;
|
|
padding-left: 12px;
|
|
}
|
|
img {
|
|
position: absolute;
|
|
height: 32px;
|
|
width: 165px;
|
|
}
|
|
}
|
|
.type-screen-right {
|
|
position: relative;
|
|
.svg-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
position: absolute;
|
|
left: -25px;
|
|
top: 8px;
|
|
z-index: 99;
|
|
}
|
|
.type-screen-right-img {
|
|
width: 50px;
|
|
height: 32px;
|
|
position: absolute;
|
|
left: -50px;
|
|
}
|
|
}
|
|
}
|
|
.type-screen-content {
|
|
padding-left: 10px;
|
|
margin-top: 8px;
|
|
.el-checkbox {
|
|
margin-right: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
.time-line-year {
|
|
position: relative;
|
|
height: 50px;
|
|
.time-line-item-date {
|
|
position: relative;
|
|
}
|
|
// 年份
|
|
.time-line-background {
|
|
position: absolute;
|
|
top: 26px;
|
|
left: -20px;
|
|
padding-left: 15px;
|
|
// margin-left: -10px;
|
|
// margin-right: -$paddingRight;
|
|
width: 93px;
|
|
height: 32px;
|
|
transform: skew(-30deg);
|
|
line-height: 32px;
|
|
font-size: 16px;
|
|
font-style: oblique;
|
|
font-family: fantasy;
|
|
background: linear-gradient(
|
|
210deg,
|
|
rgba(0, 70, 251, 0.6) 0%,
|
|
rgba(49, 107, 255, 0.1) 100%
|
|
);
|
|
letter-spacing: 1px;
|
|
}
|
|
.time-line-title {
|
|
position: absolute;
|
|
top: 28px;
|
|
left: 10px;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
font-family: Roboto;
|
|
font-style: italic;
|
|
}
|
|
}
|
|
|
|
.time-line-item {
|
|
position: relative;
|
|
padding-bottom: 10px;
|
|
|
|
// 节点
|
|
.time-line-item-node {
|
|
z-index: 3;
|
|
display: inline-block;
|
|
position: absolute;
|
|
left: 16px;
|
|
top: 25px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 16px;
|
|
height: 15px;
|
|
background-color: #fff;
|
|
border-color: $borderColor;
|
|
|
|
.node {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
// background-color: #959595;
|
|
}
|
|
}
|
|
|
|
// 节点尾（竖线）
|
|
.time-line-item-tail {
|
|
}
|
|
|
|
.time-line-item-wrapper:hover {
|
|
color: #fff;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
// wrapper
|
|
.time-line-item-wrapper {
|
|
position: relative;
|
|
padding-left: 80px;
|
|
top: 20px;
|
|
left: -40px;
|
|
z-index:999;
|
|
|
|
// 抬头
|
|
.time-line-item-wrapper-title {
|
|
color: $color;
|
|
|
|
.title-date {
|
|
display: inline-block;
|
|
padding-right: 30px;
|
|
margin-left: -70px;
|
|
color: #ecb36d;
|
|
}
|
|
.title {
|
|
display: inline-block;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
border-radius: 3px;
|
|
font-size: 16px;
|
|
.title-time {
|
|
padding-right: 16px;
|
|
color: #fff;
|
|
letter-spacing: 1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 内容
|
|
.time-line-item-wrapper-item {
|
|
cursor: pointer;
|
|
margin: 5px 0 0 8px;
|
|
padding: 6px 0px;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
color: #fff;
|
|
width: 138px;
|
|
padding-left: 15px;
|
|
letter-spacing: .2em;
|
|
border-radius: 3px;
|
|
font-size: 14px;
|
|
.svg-icon {
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
.activeTitle {
|
|
color: #fff;
|
|
background: #1c69dc;
|
|
}
|
|
}
|
|
|
|
.transitionCon {
|
|
position: relative;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 节点尾（竖线）
|
|
.time-line-item-tail {
|
|
position: absolute;
|
|
left: 23px;
|
|
top: 4px;
|
|
height: 100%;
|
|
border-left: 3px solid;
|
|
border-color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.nodeActive {
|
|
background-color: #3e9fff !important;
|
|
}
|
|
// .time-line .time-line-item:last-child .time-line-item-tail {
|
|
// display: none;
|
|
// }
|
|
.scroll-father-close {
|
|
height: calc(100% - 40px);
|
|
}
|
|
.scroll-father-open {
|
|
height: calc(100% - 148px);
|
|
}
|
|
</style>
|
|
<style lang="scss">
|
|
.time-line {
|
|
overflow: hidden;
|
|
.el-collapse {
|
|
border: none;
|
|
// margin-bottom: 10px;
|
|
}
|
|
.el-collapse-item__header {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
border: none;
|
|
display: block;
|
|
height: 32px;
|
|
}
|
|
.el-icon-arrow-right:before {
|
|
content: "";
|
|
}
|
|
.el-collapse-item__wrap {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
border: none;
|
|
}
|
|
.el-collapse-item__content {
|
|
padding-bottom: 0;
|
|
line-height:0;
|
|
}
|
|
.el-scrollbar__wrap {
|
|
// padding-bottom: 100px;
|
|
}
|
|
.el-scrollbar__bar {
|
|
right: 6px;
|
|
}
|
|
}
|
|
</style>
|