<template>
<view class="warning_content">
<!-- 搜索条件查询 -->
<view class="header">
<!-- 导航栏占位 -->
<view class="plate">
<uni-easyinput class="uni-mt-5" suffixIcon="search" @input="onInput" v-model="plate"
placeholder="请输入车牌号" @iconClick="serchPlate"></uni-easyinput>
</view>
<view class="selectBox">
<view class="statusSelect">
<uni-data-select v-model="value2" :localdata="range" @change="changeStatus"
placeholder="全部"></uni-data-select>
</view>
<view class="zhanwei"></view>
<view class="typeSelect">
<view class="type_font">
<uni-data-select v-model="value3" :localdata="alarmTypeList" @change="changeBjStatus"
placeholder="报警类型">
</uni-data-select>
</view>
</view>
</view>
<view class="example" @click="showDataPick">
<uni-datetime-picker v-model="datetimerange" type="daterange" @change="dateChange" @close="maskClick"
@maskClick="maskClick" />
</view>
</view>
<!-- 处理弹框 -->
<view style="width: 100%;">
<uni-popup ref="popupDispose" backgroundColor="rgba(0,0,0,0)" @maskClick="maskClick">
<view class="popup-content2">
<view class="reason">
<text>处理结果：</text>
<text>属实</text>
</view>
<view class="measure">
<text>备注</text>
<textarea class="textarea" name="measure" v-model="remark" placeholder-style="color:#999;font-size:28upx"
placeholder="请输入整改措施..." />
</view>
</view>
</uni-popup>
</view>
<view class="warning_list">
<!-- 数据列表 -->
<view class="warning_list_item" v-for="(warning,index) in alarmDateList" :key="index"
@click="redirectDetail(warning.id,warning.powerprocessed,warning.cysprocessed,index)">
<view class="warning_list_bottom">
<view class="address">
<text>车牌号：{{warning.plateno}}</text>
</view>
<view class="address">
<text>订单编号：{{warning.ddbh}}</text>
</view>
<view class="address">
<text>报警类型：</text><text style="color: red;display: inline-block;">{{warning.alarmtype}}</text>
</view>
<view class="dateTime">
<text>发生时间：{{formatDate(warning.firsttime)}}</text>
</view>
<view class="address" style="word-wrap: break-word;word-break: break-all;white-space: normal;">
<text>报警位置：{{warning.firstlocation}}</text>
</view>
<view class="address" style="word-wrap: break-word;word-break: break-all;white-space: normal;">
<text>承运商处理结果：{{warning._cysprocessed}}</text>
</view>
</view>
<view class="warning_list_top">
<view class="function_button">
<view class="chuli" v-if="warning.powerprocessed == '3OL4M8GY'">
<!-- <view class="onpending" @click.stop="openHuLveTypePopup(warning.id,index)">忽略</view> -->
<view class="pending" @click.stop="openDisposeTypePopup(warning,'cl')">处理</view>
<view class="pending" @click.stop="openDisposeTypePopup(warning,'jcbj')">解除报警</view>
<!-- <view v-if="warning._cysprocessed =='已处理' && warning._powerprocessed =='未处理'" class="huifang" @click.stop="openDisposeTypePopup(warning,'cs')">继续查实</view> -->
<view class="huifang" @click.stop="btnGj(warning)">回放</view>
</view>
<view class="shenpi" v-if="warning.powerprocessed == '3OL4M8GZ'">
<view class="pending">已审批</view>
<view class="huifang" @click.stop="btnGj(warning)">回放</view>
<view class="huifang" @click.stop="btnXq(warning)">
修改
</view>
</view>
</view>
</view>
</view>
<view style="margin-top: 30upx;" v-if="showMore">
<uni-load-more :status="status" :content-text="contentText" :clickLoadMore="click" />
</view>
</view>
<!-- 上拉加载 -->
<!-- 没有数据和请求失败的情况下显示 -->
<view class="empty" v-if="showEmpty">
<image src="../../static/images/nodata1.png" mode=""></image>
</view>
<view class="noInternet">
<image src="../../static/images/noInternat.png" mode=""></image>
<text>网络竟然崩溃了</text>
<text>试着刷新页面</text>
</view>
<uni-popup ref="popup" type="dialog" @maskClick="maskClick">
<uni-popup-dialog title="请先选择回放" :before-close="true" @confirm="onDdPickConfirm"
@close="onDdPickClose">
<radio-group @change="radioChange" style="display: flex;">
<label v-for="(item, index) in options" :key="item.value" style="display: flex;font-size: 16px;margin-left: 20px;">
<view>
<radio :value="item.value" :checked="index === current" />
</view>
<view>{{item.text}}</view>
</label>
</radio-group>
</uni-popup-dialog>
</uni-popup>
</view>
</template>
<script>
import request from '@/http/request.js'
export default {
data() {
return {
currentClickListIndex: 0, // 列表索引
currentCLickIndex: 0, //点击处理和忽略索引
value: "", // input默认值
value2: "", // 全部下拉框
value3: "", // 报警下拉框
plate: "", // 输入的车牌号
flag:"",
photoData:[],
num:9,
options:[
{value:"轨迹回放",text:'轨迹回放'},
{value:"视频回放",text:'视频回放'},
],
range: [
{
value: '3OL4M8GY',
text: "未处理"
},
{
value: '3OL4M8GZ',
text: "已处理"
},
],
status: 'loading',
contentText: {
contentdown: '上拉查看更多',
contentnomore: '没有更多了',
contentrefresh: '加载中',
},
datetimerange: [],
alarmDateList: [],
//报警类型集合
alarmTypeList: [],
formData: {},
formDisposeData: {},
remark: '',
disposeId: '',
showEmpty: false,
refreshType: 'search',
showMore: false,
showTabBar: true,
formYjData: {},
popup:false,
hflx:'',
hflist:{},
}
},
onLoad(options) {
var user = uni.getStorageSync('user')
this.formYjData.type = 'HWYJ'
this.loadYjType()
this.formData.powerid = user[0].id
this.formData.rows = 10
this.formData.page = 1
this.loadData()
this.loadCount(user[0].id)
},
onShow() {
this.loadCount(this.formData.powerid)
},
mounted() {
//监听从子页面收到的回调
uni.$on('refreshPreviousPage', (data) => {
var type = data.data
console.log('----' + type + " " + this.currentClickListIndex)
if ('hulve' == type) {
this.alarmDateList[this.currentClickListIndex].powerprocessed = '3OL4M8GZ'
} else if ('dispose' == type) {
this.alarmDateList[this.currentClickListIndex].powerprocessed = '3OL4M8GZ'
}
});
},
methods: {
onDdPickClose(){
this.$refs.popup.close()
},
radioChange(val){
this.hflx = val.detail.value
},
onDdPickConfirm(){
this.$refs.popup.close()
if(this.hflx =='轨迹回放'){
uni.navigateTo({
url: '/pagesFen/monitoring/gjhf?vehicleId=' + this.hflist.vehicleid + '&cph=' + this.hflist.plateno+ '&firsttime=' + this.hflist.firsttime+ '&lasttime=' + this.hflist.lasttime
});
}else{
uni.navigateTo({
url: '/pagesFen/monitoring/historyvideo?title=历史视频-' + this.hflist.plateno+ '&firsttime=' + this.hflist.firsttime+ '&lasttime=' + this.hflist.lasttime
});
}
},
btnXq(arr){
uni.navigateTo({
url: "/pagesFen/prewarning/deatail-xq?ddid=" + arr.id
})
},
maskClick() {
this.$refs.popupDialog.close()
this.changeTab('show')
},
btnGj(arr){
this.$refs.popup.open()
this.hflist = arr
},
onInput(e) {
this.refreshType = 'search'
if ('' != e) {
setTimeout(()=>{
if(e == this.plate){
this.formData.plateno = e
this.loadData()
}
},1000)
} else {
this.formData.page = 1
delete this.formData.plateno
this.loadData()
}
},
formatDate(value) {
if (value == undefined) {
return;
}
// let date = new Date(value * 1000);
let date = new Date(value);
//时间戳为10位需*1000，时间戳为13位的话不需乘1000
let y = date.getFullYear();
let MM = date.getMonth() + 1;
MM = MM < 10 ? ('0' + MM) : MM; //月补0
let d = date.getDate();
d = d < 10 ? ('0' + d) : d; //天补0
let h = date.getHours();
h = h < 10 ? ('0' + h) : h; //小时补0
let m = date.getMinutes();
m = m < 10 ? ('0' + m) : m; //分钟补0
let s = date.getSeconds();
s = s < 10 ? ('0' + s) : s; //秒补0
return y + '-' + MM + '-' + d + ' ' + h + ':' + m; //年月日时分秒
},
//加载报警类型
loadYjType() {
request.vsportal('XcxJkAction.yjType', this.formYjData).then((res) => {
if (res.status) {
res.data.forEach(item => {
this.alarmTypeList.push({
'text': item.alarmtype,
'value': item.alarmtype
})
})
/* res.data.adas.forEach(item =>{
this.alarmTypeList.push({'text':item.alarmtype,'value':item.alarmtype})
})
res.data.bds.forEach(item =>{
this.alarmTypeList.push({'text':item.alarmtype,'value':item.alarmtype})
})
res.data.dsm.forEach(item =>{
this.alarmTypeList.push({'text':item.alarmtype,'value':item.alarmtype})
}) */
}
});
},
loadCount(id) {
var num = ''
request.vsportal('XcxJgAction.warCount', {
powerid: id
}).then((res)=> {
if (res.status) {
if(res.data.count == 0){
uni.removeTabBarBadge({
index:2
})
}else{
uni.setTabBarBadge({ //显示数字
index: 2, //tabbar下标
text: res.data.count >100 ? '99+' : res.data.count+'' //数字
})
}
}
})
},
//加载列表数据
loadData() {
this.status = "loading";
request.vsportal('XcxJgAction.dcWarnInfo', this.formData).then((res)=> {
//request.vsportal('XcxJgAction.ysWarn', this.formData).then(function(res) {
if (res.status) {
var list = res.data
if (list.length > 0) {
this.showMore = true
if (this.formData.page == 1) {
this.scrollToTop()
this.alarmDateList = []
}
for (var i = 0; i < list.length; i++) {
if (list[i].firstlocation.indexOf('[]') != -1) {
list[i].firstlocation = ''
}
this.alarmDateList.push(list[i])
}
this.showEmpty = false
this.status = 'noMore'
} else {
this.status = "noMore"
if ('pull' == this.refreshType) {
if (this.alarmDateList.length != 0) {
this.showEmpty = false
this.showMore = true
}
} else {
this.alarmDateList = res.data
this.showEmpty = true
this.showMore = false
}
}
}
uni.hideLoading()
})
},
//点击顶部车牌号搜索
serchPlate() {
this.formData.page = 1
this.refreshType = 'search'
if (this.plate == undefined || "" == this.plate) {
delete this.formData.plateno
} else {
this.formData.plateno = this.plate
}
this.loadData()
},
// 全部类型下拉框
changeStatus(e) {
this.refreshType = 'search'
if ("" == e) {
this.formData.page = 1
this.formData.cysprocessed = ''
this.formData.powerprocessed = ''
delete this.formData.spzt
}else {
this.formData.page = 1
this.formData.powerprocessed = e
//this.formData.cysprocessed = '3OL4M8GZ'
}
uni.showLoading({
title: '加载中...',
})
setTimeout(() => {
this.loadData()
}, 1000)
},
//滑动到顶部
scrollToTop() {
uni.pageScrollTo({
selector: ".cart-box",
scrollTop: 0
});
},
// 报警类型下拉框
changeBjStatus(e) {
uni.showLoading({
title: '加载中...'
})
this.refreshType = 'search'
if ("" == e) {
this.formData.alarmtype = ''
this.formData.page = 1
delete this.formData.alarmtype
} else {
this.formData.page = 1
this.formData.alarmtype = e
}
setTimeout(() => {
this.loadData()
}, 1000)
},
showDataPick() {
if (this.showTabBar) {
this.changeTab('hide')
}
},
// 确定日期时触发事件
dateChange(time) {
uni.showLoading({
title: '加载中...'
})
this.refreshType = 'search'
if (undefined != time[0] && undefined != time[1]) {
this.formData.page = 1
this.formData.starttime = time[0]
this.formData.endtime = time[1]
} else {
delete this.formData.starttime;
delete this.formData.endtime;
}
setTimeout(() => {
this.loadData()
this.changeTab('show')
}, 1000)
},
canel() {
this.$refs.popup2.close()
},
//上啦
onReachBottom() {
var my = this;
my.refreshType = 'pull'
my.formData.page++;
my.formData.page = my.formData.page
this.loadData()
},
submit() {
this.$refs.popup.close()
this.$refs.popup2.close()
},
// 跳处理
openDisposeTypePopup(arr,lx) {
uni.navigateTo({
url: "/pagesFen/prewarning/deatail-xq?ddid=" + arr.id + '&lx=' + lx
})
},
// 跳转详情
redirectDetail(id, status, cysstatus,index) {
this.currentClickListIndex = index
uni.navigateTo({
url: "/pagesFen/prewarning/deatail?ddid=" + id + "&type=" + status + "&cysstatus=" + cysstatus
})
},
changeTab(type) {
if ('hide' == type) {
uni.hideTabBar({
animation: true
})
this.showTabBar = false
} else {
uni.showTabBar({
animation: true
})
this.showTabBar = true
}
}
}
}
</script>优化代码，将懒加载实现
ABAP 弹出式屏幕与 ALV 实现
本文介绍如何使用 ABAP 实现多种弹出式屏幕功能，包括多选、确认步骤等，并详细讲解了如何创建带有 ALV 的自定义屏幕，通过实例演示了整个过程。
扫一扫
4503
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
