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>
|