<template>
|
<view class="alarmOver">
|
<view class="once">
|
<view class="titles">事件描述:</view>
|
<view class="mains">{{data.alarmType}}</view>
|
</view>
|
<view class="once">
|
<view class="titles">事件地点:</view>
|
<view class="mains">{{data.place}}</view>
|
</view>
|
<view class="once">
|
<view class="titles">处理流程:</view>
|
<!-- <view class="mains">加载中···</view> -->
|
<view class="mains">
|
|
<u-time-line>
|
<u-time-line-item nodeTop="19" v-for="(item,index) in oderData" :key="index">
|
<!-- 此处自定义了左边内容，用一个图标替代 -->
|
|
<template v-slot:node>
|
<view class="u-node" style="background: #19be6b;">
|
<!-- 此处为uView的icon组件 -->
|
<u-icon name="clock-fill" color="#fff" :size="30"></u-icon>
|
</view>
|
</template>
|
<template v-slot:content>
|
<view class="u-order">
|
<span class="u-o-time"> {{item.time}}</span>
|
<span class="u-o-main"> {{item.content}}</span>
|
<span class="zw" v-if="item == '暂无'">暂无</span>
|
</view>
|
</template>
|
</u-time-line-item>
|
</u-time-line>
|
|
</view>
|
</view>
|
<view class="once">
|
<view class="titles">处理结果:</view>
|
<view class="mains">妥善处理</view>
|
</view>
|
<view class="once">
|
<view class="titles">问题反馈:</view>
|
<view class="mains">无</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
data: '',
|
oderData: ['暂无'
|
// {
|
// time: '2019-05-08 12:12',
|
// content: '任务下发'
|
// }, {
|
// time: '2019-05-08 12:12',
|
// content: '任务接收'
|
// }, {
|
// time: '2019-05-08 12:12',
|
// content: '处置完成'
|
// },
|
]
|
}
|
},
|
methods: {
|
userData(d) {
|
console.log(d);
|
var a = [{
|
time: '2019-05-08 12:12',
|
content: '任务下发'
|
},
|
{
|
time: '2019-05-08 12:12',
|
content: '任务接收'
|
}, {
|
time: '2019-05-08 12:12',
|
content: '处置完成'
|
}
|
]
|
this.oderData = a;
|
}
|
},
|
mounted() {
|
|
},
|
onLoad: function(options) {
|
this.data = JSON.parse(options.data);
|
if (this.data == '') {
|
console.log('未传数据');
|
return;
|
}
|
this.userData(this.data);
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.u-node {
|
width: 44rpx;
|
height: 44rpx;
|
border-radius: 100rpx;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
background: #d0d0d0;
|
}
|
|
.u-o-time {
|
color: rgb(200, 200, 200);
|
font-size: 26rpx;
|
}
|
|
.u-o-main {
|
margin-left: 2rem;
|
}
|
|
.alarmOver {
|
background-color: #F7F7F7;
|
width: 100%;
|
height: 100%;
|
overflow: auto;
|
|
.once {
|
width: 100%;
|
min-height: 4rem;
|
background-color: #fff;
|
margin: 1rem 0;
|
|
.titles {
|
width: 100%;
|
// border: 1px solid #0078A8;
|
font-weight: 600;
|
padding-left: 2rem;
|
height: 1.5rem;
|
line-height: 1.5rem;
|
}
|
|
.mains {
|
width: 100%;
|
// border: 1px solid #0078A8;
|
padding-left: 2rem;
|
min-height: 2.5rem;
|
line-height: 2.5rem;
|
}
|
}
|
}
|
</style>
|
