125 lines
3.4 KiB
Vue
125 lines
3.4 KiB
Vue
<template>
|
||
<view class="dateReport">
|
||
<view class="pd20">
|
||
<uni-segmented-control
|
||
:current="curSub"
|
||
class="subsection"
|
||
active-color="#376cf3"
|
||
:values="subsectionList"
|
||
@clickItem="sectionChange"
|
||
/>
|
||
</view>
|
||
|
||
<!-- 卡片 -->
|
||
<view
|
||
class="event-list"
|
||
v-if="eventList.length != 0"
|
||
:style="{ height: 'calc(100vh - ' + (navHeight + 56) + 'px)', overflow: 'auto' }"
|
||
>
|
||
<!-- 循环渲染事件项 -->
|
||
<uni-card class="event-item" :class="item.type" v-for="(item, index) in eventList" :key="index">
|
||
<!-- 头部：图标 + 信息 + 操作 -->
|
||
<view class="event-header">
|
||
<view class="event-info">
|
||
<view class="event-title">
|
||
<text class="event-id" >{{ item.id }}</text>
|
||
<text class="event-tags">{{ item.tag }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 详情区域 -->
|
||
<view class="event-detail">
|
||
<text>频率偏差越限111次</text>
|
||
<text>不平衡度越限3次</text>
|
||
<text>电压畸变率越限5次</text>
|
||
<text>偶次电压越限5次</text>
|
||
</view>
|
||
<view class="downloadReport">
|
||
<uni-icons type="download" size="16" color="#376cf3"></uni-icons>下载报告
|
||
</view>
|
||
</uni-card>
|
||
<uni-load-more :status="status"></uni-load-more>
|
||
</view>
|
||
<Cn-empty v-else></Cn-empty>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
components: {},
|
||
props: {
|
||
indexList: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
total: {
|
||
type: Number,
|
||
default: 0,
|
||
},
|
||
navHeight: {
|
||
type: Number,
|
||
default: 0,
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
status: 'noMore',
|
||
curSub: 0,
|
||
subsectionList: ['周报', '月报'],
|
||
eventList: [
|
||
{
|
||
id: '测试监测点',
|
||
tag: '2026-01-23至2026-01-23',
|
||
|
||
status: '1',
|
||
},
|
||
],
|
||
}
|
||
},
|
||
created() {},
|
||
|
||
methods: {
|
||
sectionChange(index) {
|
||
this.curSub = index.currentIndex
|
||
},
|
||
scrolltolower() {
|
||
if (this.total != this.indexList.length) {
|
||
this.$emit('scrolltolower')
|
||
} else {
|
||
// this.status = 'noMore'
|
||
}
|
||
},
|
||
},
|
||
|
||
computed: {},
|
||
|
||
watch: {},
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
@import '@/pages/message1/index.scss';
|
||
.event-title {
|
||
justify-content: space-between;
|
||
}
|
||
.event-tags {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.event-detail {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
}
|
||
.downloadReport {
|
||
width: 100%;
|
||
background: #376cf320;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
color: #376cf3;
|
||
font-weight: 600;
|
||
border-radius: 15rpx;
|
||
margin-top: 10rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
</style>
|