初始提交
This commit is contained in:
188
pages/portal/components/HTimeAxis/index.vue
Normal file
188
pages/portal/components/HTimeAxis/index.vue
Normal file
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<view class="timeLine-v">
|
||||
<view class="timeLine" :key="key">
|
||||
<u-time-line v-if="option.isVertical" :class="option.isLeft?'timeLine-right':''">
|
||||
<u-time-line-item v-for="(item,i) in option.defaultValue" :key="i">
|
||||
<template v-slot:node>
|
||||
<view class="timeLine-dot" v-if="i==0" :style="{'background':'rgba(62, 213, 56, 0.39)'}">
|
||||
</view>
|
||||
<view class="timeLine-dot" v-else-if="i==option.defaultValue.length-1"
|
||||
:style="{'background':'rgba(228, 231, 237, 0.39)'}">
|
||||
</view>
|
||||
<view class="timeLine-dot" v-else :style="{'background':'rgba(25, 144, 250, 0.39)'}">
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:content>
|
||||
<view class="timeLine-content" :style="{'text-align':option.isLeft?'right':'left'}"
|
||||
@tap="jump(item)">
|
||||
<view class="u-font-24" v-if="option.isCrad">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="u-flex-col" :class="option.isCrad?'timeLine-title2':'timeLine-title'">
|
||||
<text class="name u-font-28">{{item.content}}</text>
|
||||
<text class="time u-font-28">{{item.timestamp}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</u-time-line-item>
|
||||
</u-time-line>
|
||||
<timeLine-row v-if="!option.isVertical" :list='option.defaultValue' :isCrad='option.isCrad'
|
||||
:isUpper="option.isUpper">
|
||||
</timeLine-row>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import timeLineRow from './timeLine-row.vue'
|
||||
import {
|
||||
getDataInterfaceRes
|
||||
} from '@/api/common'
|
||||
export default {
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
timeLineRow
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option: {},
|
||||
key: +new Date()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
uni.$off('proRefresh')
|
||||
uni.$on('proRefresh', () => {
|
||||
this.initData()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
jump(item) {
|
||||
this.jnpf.solveAddressParam(item, this.config)
|
||||
this.jnpf.jumpLink(item.urlAddress)
|
||||
},
|
||||
init() {
|
||||
this.initData()
|
||||
if (!this.config.allRefresh.autoRefresh && this.config.refresh.autoRefresh) {
|
||||
setInterval(this.initData, this.config.refresh.autoRefreshTime * 60000)
|
||||
}
|
||||
},
|
||||
initData() {
|
||||
if (this.config.dataType === "dynamic") {
|
||||
if (!this.config.propsApi) return
|
||||
const query = {
|
||||
paramList: this.config.templateJson
|
||||
};
|
||||
getDataInterfaceRes(this.config.propsApi, query).then(res => {
|
||||
this.config.option.defaultValue = res.data || []
|
||||
this.handleAttrs()
|
||||
})
|
||||
} else {
|
||||
this.handleAttrs()
|
||||
}
|
||||
},
|
||||
handleAttrs() {
|
||||
if (this.config.option.sortable == 2) this.config.option.defaultValue = this.config.option.defaultValue
|
||||
.reverse();
|
||||
this.config.option.isCrad = this.config.option.styleType == 2 ? true : false
|
||||
this.config.option.isLeft = false
|
||||
this.config.option.isVertical = false
|
||||
this.config.option.isUpper = false
|
||||
if (this.config.option.layout == 1 || this.config.option.layout == 2 || this.config.option.layout ==
|
||||
3 || this.config.option.layout == 4) {
|
||||
this.config.option.isVertical = true
|
||||
if (this.config.option.layout == 3) {
|
||||
this.config.option.isLeft = true
|
||||
}
|
||||
}
|
||||
if (!this.config.option.isVertical) {
|
||||
if (this.config.option.layout == 5 || this.config.option.layout == 6 || this.config.option
|
||||
.layout == 7)
|
||||
this.config.option.isUpper = true
|
||||
}
|
||||
this.config.option.appShowNumber = this.config.option.appShowNumber || 50
|
||||
if (this.config.option.appShowNumber && Array.isArray(this.config.option.defaultValue)) {
|
||||
this.config.option.defaultValue = this.config.option.defaultValue.slice(0, this.config.option
|
||||
.appShowNumber)
|
||||
}
|
||||
this.option = this.config.option
|
||||
this.key = +new Date()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.timeLine-v {
|
||||
.timeLine {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20rpx;
|
||||
|
||||
.u-time-axis-item {
|
||||
.u-time-axis-node {
|
||||
top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.timeLine-right {
|
||||
padding-left: 0;
|
||||
padding-right: 40rpx !important;
|
||||
|
||||
&::before {
|
||||
left: 670rpx !important;
|
||||
}
|
||||
|
||||
.u-time-axis-item {
|
||||
.u-time-axis-node {
|
||||
left: 670rpx !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeLine-dot {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
border: 4rpx solid #FFFFFF;
|
||||
box-shadow: 0 6rpx 12rpx rgba(2, 7, 28, 0.16);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.timeLine-content {
|
||||
padding: 0 10rpx;
|
||||
|
||||
.timeLine-title {
|
||||
font-size: 30rpx;
|
||||
line-height: 36rpx;
|
||||
|
||||
.name {
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.timeLine-title2 {
|
||||
margin-top: 6rpx;
|
||||
background: rgba(255, 255, 255, 0.39);
|
||||
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
|
||||
padding: 10rpx 20rpx;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.timeLine-desc {
|
||||
margin-top: 10rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
color: #909399;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
165
pages/portal/components/HTimeAxis/timeLine-row.vue
Normal file
165
pages/portal/components/HTimeAxis/timeLine-row.vue
Normal file
@@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<view class="steps-v">
|
||||
<view class="steps-box">
|
||||
<view class="steps-line" :style="isUpper? lowerStyle:upperStyle" v-for="(item,index) in list" :key="index"
|
||||
@click="jump(item)">
|
||||
<view class="steps-item">
|
||||
<view class="steps-content" :style="{'width':isCrad?'270rpx':'250rpx'}">
|
||||
<view class="u-font-24 steps-content-hd" v-if="isCrad">
|
||||
<text>{{item.title}}</text>
|
||||
</view>
|
||||
<view class="u-font-24" :class="isCrad?'steps-title':'steps-title2'">
|
||||
<text class="name u-line-2">{{item.content}}</text>
|
||||
<text class="time">{{item.timestamp}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="steps-node" :style="isUpper?lowerDotStyle:upperDotStyle">
|
||||
<view class="steps-node-dot" v-if="index==0" :style="{'background':'rgba(62, 213, 56, 0.39)'}">
|
||||
</view>
|
||||
<view class="steps-node-dot" v-else-if="index==list.length-1"
|
||||
:style="{'background':'rgba(228, 231, 237, 0.39)'}"></view>
|
||||
<view class="steps-node-dot" v-else :style="{'background':'rgba(25, 144, 250, 0.39)'}"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
isCrad: {
|
||||
type: Boolean,
|
||||
default () {
|
||||
return false
|
||||
}
|
||||
},
|
||||
isUpper: {
|
||||
type: Boolean,
|
||||
default () {
|
||||
return true
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
upperStyle: {
|
||||
'padding-top': '40rpx',
|
||||
'border-top': '2rpx solid #DEDEDE'
|
||||
},
|
||||
upperDotStyle: {
|
||||
'top': '-54rpx'
|
||||
},
|
||||
lowerStyle: {
|
||||
'padding-bottom': '40rpx',
|
||||
'border-bottom': '2rpx solid #DEDEDE'
|
||||
},
|
||||
lowerDotStyle: {
|
||||
'bottom': '-52rpx'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
jump(item) {
|
||||
this.jnpf.solveAddressParam(item, this.config)
|
||||
this.jnpf.jumpLink(item.urlAddress)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.steps-v {
|
||||
height: 100%;
|
||||
overflow-x: scroll;
|
||||
|
||||
.steps-box {
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
|
||||
.steps-line {
|
||||
.steps-item {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.steps-node {
|
||||
position: absolute;
|
||||
left: 12rpx;
|
||||
transform-origin: 0;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
font-size: 24rpx;
|
||||
background-color: rgb(255, 255, 255);
|
||||
z-index: 9;
|
||||
|
||||
.steps-node-dot {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
border: 4rpx solid #FFFFFF;
|
||||
box-shadow: 0 6rpx 12rpx rgba(2, 7, 28, 0.16);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
.steps-content {
|
||||
.steps-content-hd {
|
||||
width: 90%;
|
||||
height: 44rpx;
|
||||
color: #606266;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.steps-title2 {
|
||||
line-height: 36rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 90%;
|
||||
height: 120rpx;
|
||||
justify-content: space-between;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.steps-title {
|
||||
line-height: 36rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 90%;
|
||||
height: 170rpx;
|
||||
background: rgba(255, 255, 255, 0.39);
|
||||
box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
padding: 22rpx;
|
||||
justify-content: space-between;
|
||||
|
||||
.name {
|
||||
margin-bottom: 6rpx;
|
||||
letter-spacing: 2rpx;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.time {
|
||||
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user