工单 告警 报事 修改
This commit is contained in:
@@ -1,50 +1,61 @@
|
||||
<template>
|
||||
<view class="warn-container">
|
||||
<!-- 顶部导航 -->
|
||||
<view class="warn-navbar">
|
||||
<image src="/static/ic_back.png" class="warn-back" @click="goBack" />
|
||||
<text class="warn-title">预警处理</text>
|
||||
<text class="warn-right-txt" @click="goStatistics">预警统计</text>
|
||||
</view>
|
||||
<view class="warn-container">
|
||||
<!-- 顶部导航 -->
|
||||
<view class="warn-navbar">
|
||||
<image src="/static/ic_back.png" class="warn-back" @click="goBack" />
|
||||
<text class="warn-title">预警处理</text>
|
||||
<text class="warn-right-txt" @click="goStatistics">预警统计</text>
|
||||
</view>
|
||||
|
||||
<!-- tab栏 -->
|
||||
<view class="warn-tabs">
|
||||
<view v-for="(tab, idx) in tabs" :key="idx" :class="['warn-tab', { active: idx === activeTab }]"
|
||||
@click="changeTab(idx)">
|
||||
{{ tab }}
|
||||
<view v-if="idx === activeTab" class="tab-underline"></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- tab栏 -->
|
||||
<view class="warn-tabs">
|
||||
<view v-for="(tab, idx) in tabs" :key="idx" :class="['warn-tab', { active: idx === activeTab }]"
|
||||
@click="changeTab(idx)">
|
||||
{{ tab }}
|
||||
<view v-if="idx === activeTab" class="tab-underline"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 列表区 -->
|
||||
<scroll-view class="warn-list" scroll-y refresher-enabled refresher-background="#f7f7f7"
|
||||
:refresher-triggered="refresherTriggered" @refresherrefresh="onRefresh" @scrolltolower="loadMore"
|
||||
:lower-threshold="50">
|
||||
<view v-for="(item, idx) in list" :key="idx" class="warn-card" @click="goDetail2(item)">
|
||||
<view class="warn-row">
|
||||
<view class="warn-no">{{item.smallTypeName}}</view>
|
||||
<view class="warn-status">{{item.levelName}}</view>
|
||||
</view>
|
||||
<image class="warn-line-image" src="/static/ic_my_repair_03.png" />
|
||||
<view class="warn-info">预警内容:{{ item.description }}</view>
|
||||
<view class="warn-info">预警位置:{{ item.deviceGroupName }}</view>
|
||||
<view class="warn-info">预警时间:{{ item.reportTime }}</view>
|
||||
<view class="warn-info">预警设备:{{ item.deviceName }}</view>
|
||||
<view v-if="[20, 30, 31, 32].includes(item.state)" class="warn-eval-wrap" @click.stop="goDetail(item)">
|
||||
<view class="warn-eval-btn">去处理</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 为每个标签页创建独立的scroll-view -->
|
||||
<view class="warn-list-container">
|
||||
<scroll-view
|
||||
v-for="(tab, idx) in tabs"
|
||||
:key="idx"
|
||||
v-show="idx === activeTab"
|
||||
class="warn-list"
|
||||
scroll-y
|
||||
:refresher-enabled="true"
|
||||
refresher-background="#f7f7f7"
|
||||
:refresher-triggered="refresherTriggered"
|
||||
@refresherrefresh="onRefresh"
|
||||
@scrolltolower="loadMore"
|
||||
:lower-threshold="50">
|
||||
<view v-for="(item, index) in tabData[idx]" :key="index" class="warn-card" @click="goDetail2(item)">
|
||||
<view class="warn-row">
|
||||
<view class="warn-no">{{item.smallTypeName}}</view>
|
||||
<view class="warn-status">{{item.levelName}}</view>
|
||||
</view>
|
||||
<image class="warn-line-image" src="/static/ic_my_repair_03.png" />
|
||||
<view class="warn-info">预警内容:{{ item.description }}</view>
|
||||
<view class="warn-info">预警位置:{{ item.deviceGroupName }}</view>
|
||||
<view class="warn-info">预警时间:{{ item.reportTime }}</view>
|
||||
<view class="warn-info">预警设备:{{ item.deviceName }}</view>
|
||||
<view v-if="[20, 30, 31, 32].includes(item.state)" class="warn-eval-wrap" @click.stop="goDetail(item)">
|
||||
<view class="warn-eval-btn">去处理</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部加载提示 -->
|
||||
<view v-if="loading" style="text-align:center;color:#999;font-size:26rpx;padding:20rpx;">
|
||||
加载中...
|
||||
</view>
|
||||
<view v-if="noMore[activeTab]" style="text-align:center;color:#999;font-size:26rpx;padding:20rpx;">
|
||||
没有更多数据了
|
||||
</view>
|
||||
<!-- 底部加载提示 -->
|
||||
<view v-if="loading" style="text-align:center;color:#999;font-size:26rpx;padding:20rpx;">
|
||||
加载中...
|
||||
</view>
|
||||
<view v-if="noMore[idx]" style="text-align:center;color:#999;font-size:26rpx;padding:20rpx;">
|
||||
没有更多数据了
|
||||
</view>
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -72,13 +83,12 @@
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.onRefresh()
|
||||
},
|
||||
onShow() {
|
||||
uni.$once('refreshData', () => {
|
||||
this.tabLoaded = [false, false]
|
||||
this.onRefresh()
|
||||
});
|
||||
this.loadAllTabsData()
|
||||
},
|
||||
onShow() {
|
||||
uni.$once('refreshData', () => {
|
||||
this.loadAllTabsData()
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
@@ -87,9 +97,12 @@
|
||||
// 切换 tab
|
||||
async changeTab(idx) {
|
||||
this.activeTab = idx;
|
||||
// 移除切换标签时的加载逻辑,避免重复调用接口
|
||||
/*
|
||||
if (!this.tabLoaded[idx]) {
|
||||
this.onRefresh()
|
||||
}
|
||||
*/
|
||||
},
|
||||
// 下拉刷新
|
||||
async onRefresh() {
|
||||
@@ -144,6 +157,19 @@
|
||||
uni.navigateTo({
|
||||
url: "/pages/sys/workbench/earlyWarning/warnStatistics"
|
||||
});
|
||||
},
|
||||
|
||||
// 添加预加载所有标签页数据的方法
|
||||
async loadAllTabsData() {
|
||||
// 并行加载所有标签页数据,提高加载速度
|
||||
const loadPromises = [0, 1].map((index) => {
|
||||
return this.loadTabData(index);
|
||||
});
|
||||
|
||||
await Promise.all(loadPromises);
|
||||
|
||||
// 标记所有标签页已加载
|
||||
this.tabLoaded = [true, true];
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -155,6 +181,7 @@
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.warn-navbar {
|
||||
@@ -165,6 +192,7 @@
|
||||
justify-content: stretch;
|
||||
position: relative;
|
||||
margin-top: 50rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.warn-back {
|
||||
@@ -193,7 +221,7 @@
|
||||
justify-content: space-around;
|
||||
background: #fff;
|
||||
height: 80rpx;
|
||||
bwarn-bottom: 1px solid #f0f0f0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -217,23 +245,32 @@
|
||||
width: 60rpx;
|
||||
height: 6rpx;
|
||||
background: #2186ff;
|
||||
bwarn-radius: 3rpx;
|
||||
border-radius: 3rpx;
|
||||
margin: 0 auto;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.warn-list {
|
||||
padding: 0 24rpx;
|
||||
.warn-list-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 30rpx;
|
||||
height: calc(100vh - 80rpx - 32rpx);
|
||||
position: relative;
|
||||
background: #f7f7f7;
|
||||
}
|
||||
|
||||
.warn-list {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 0 24rpx;
|
||||
padding-bottom: 30rpx;
|
||||
height: calc(100vh - 80rpx - 32rpx - 100rpx - 50rpx); /* 减去顶部导航和tab区域高度 */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.warn-card {
|
||||
background: #fff;
|
||||
bwarn-radius: 12rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-top: 24rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
|
||||
padding-top: 25rpx;
|
||||
|
@@ -65,7 +65,7 @@
|
||||
<image
|
||||
v-for="(img, idx) in realImages"
|
||||
:key="idx"
|
||||
:src="img.imagePath"
|
||||
:src="img"
|
||||
mode="aspectFill"
|
||||
class="preview-image"
|
||||
@click="previewImage(idx)"
|
||||
@@ -139,11 +139,19 @@ export default {
|
||||
this.loadEevetInfo();
|
||||
},
|
||||
methods: {
|
||||
|
||||
|
||||
async loadEevetInfo() {
|
||||
let res = await this.$u.api.getWarnEventInfo({}, this.warnInfo.id);
|
||||
if (res.code == "200") {
|
||||
this.handleDesc = res.data.workReply
|
||||
this.realImages = res.data.attachments
|
||||
const imgIds= res.data.attachments.map(img =>img.ossId)
|
||||
if (!imgIds) return;
|
||||
const result = await this.$u.api.getImageUrl({}, imgIds);
|
||||
if (result.code == 200 && result.data) {
|
||||
// 提取res.data数组中每个对象的url字段
|
||||
this.realImages = result.data.map(item => item.url);
|
||||
}
|
||||
}
|
||||
this.loading = false;
|
||||
},
|
||||
|
Reference in New Issue
Block a user