@@ -15,6 +15,14 @@ export const list = (params) => { | |||||
params | params | ||||
}) | }) | ||||
} | } | ||||
// 获取视频地址 | |||||
export const startUrl = (params) => { | |||||
return http.request({ | |||||
url: '/api/business/deviceApi/getStartVideoLive', | |||||
method: 'get', | |||||
params | |||||
}) | |||||
} | |||||
// 停止视频流获取 | // 停止视频流获取 | ||||
export const stopUrl = (params) => { | export const stopUrl = (params) => { | ||||
return http.request({ | return http.request({ | ||||
@@ -22,4 +30,4 @@ export const stopUrl = (params) => { | |||||
method: 'get', | method: 'get', | ||||
params | params | ||||
}) | }) | ||||
} | |||||
} |
@@ -1,6 +1,6 @@ | |||||
{ | { | ||||
"name" : "monitorMobile", | "name" : "monitorMobile", | ||||
"appid" : "", | |||||
"appid" : "__UNI__F9792E9", | |||||
"description" : "", | "description" : "", | ||||
"versionName" : "1.0.0", | "versionName" : "1.0.0", | ||||
"versionCode" : "100", | "versionCode" : "100", | ||||
@@ -65,21 +65,28 @@ | |||||
"mp-toutiao" : { | "mp-toutiao" : { | ||||
"usingComponents" : true | "usingComponents" : true | ||||
}, | }, | ||||
"h5" : { | |||||
"devServer" : { | |||||
"port" : 1888, | |||||
"proxy" : { | |||||
"/api" : { | |||||
"target" : "http://192.168.10.186:8003", | |||||
"changeOrigin" : true, | |||||
"pathRewrite" : { | |||||
"^/api" : "" | |||||
} | |||||
} | |||||
}, | |||||
"https" : false | |||||
} | |||||
}, | |||||
"h5" : { | |||||
"devServer" : { | |||||
"port" : 1888, | |||||
"proxy" : { | |||||
"/api" : { | |||||
"target" : "http://192.168.10.186:8003", | |||||
"changeOrigin" : true, | |||||
"pathRewrite" : { | |||||
"^/api" : "" | |||||
} | |||||
}, | |||||
"/Files" : { | |||||
"target" : "http://192.168.10.186:8003/Files", | |||||
"changeOrigin" : true, | |||||
"pathRewrite" : { | |||||
"^/Files" : "" | |||||
} | |||||
} | |||||
}, | |||||
"https" : false | |||||
} | |||||
}, | |||||
"uniStatistics" : { | "uniStatistics" : { | ||||
"enable" : false | "enable" : false | ||||
}, | }, | ||||
@@ -117,12 +117,6 @@ | |||||
"navigationBarTitleText": "处理意见" | "navigationBarTitleText": "处理意见" | ||||
} | } | ||||
}, | }, | ||||
{ | |||||
"path": "pages/earlyWarning/processingResults", | |||||
"style": { | |||||
"navigationBarTitleText": "处理结果" | |||||
} | |||||
}, | |||||
// 我的 | // 我的 | ||||
{ | { | ||||
"path": "pages/my/index", | "path": "pages/my/index", | ||||
@@ -1,624 +0,0 @@ | |||||
<template> | |||||
<view class="inspectionCenter"> | |||||
<view class="searchBox"> | |||||
<view class="searchLine" @click="openSearch"> | |||||
<!-- <view class="searchShow"> --> | |||||
<view class="searchLabels"> | |||||
<image v-show="isShowSearch==false" src="@/static/image/earlyWarning/group.png" mode=""> | |||||
</image> | |||||
<image v-show="isShowSearch" src="@/static/image/earlyWarning/group2.png" mode=""> | |||||
</image> | |||||
<text class="labels">选择分组</text> | |||||
<view class="values">一号楼/厨房</view> | |||||
</view> | |||||
<view class="arrow"> | |||||
<image v-show="isShowSearch==false" src="@/static/image/earlyWarning/arrow1.png" mode=""> | |||||
</image> | |||||
<image v-show="isShowSearch" src="@/static/image/earlyWarning/arrow2.png" mode=""></image> | |||||
</view> | |||||
<!-- </view> --> | |||||
</view> | |||||
<view @click="isShowSearch=false" class="searchDialog" v-if="isShowSearch"> | |||||
<view class="content" @click.stop="isSelect"> | |||||
<u-row justify="space-between" gutter="10"> | |||||
<u-col span="7"> | |||||
<view class="demo-layout" @click="toOpen"> | |||||
<view class="left-layout"> | |||||
<text>{{searchForm.alarmType}}</text> | |||||
</view> | |||||
<view class="right-layout"> | |||||
<image style="width: 30rpx;height:30rpx;" | |||||
src="@/static/image/earlyWarning/arrowRight.png" mode=""></image> | |||||
</view> | |||||
</view> | |||||
<!-- <jp-select-plus ref="selectPlus" :isShow="false" color="#2388FF" placeholder="请选择" | |||||
isSearch v-model="va3" :list="listc"></jp-select-plus> --> | |||||
</u-col> | |||||
<u-col span="5"> | |||||
<view class="demo-layout" @click="toOpenSelect"> | |||||
<view class="left-layout"> | |||||
<text>{{searchForm.warnHand}}</text> | |||||
</view> | |||||
<view class="right-layout"> | |||||
<image style="width: 30rpx;height:30rpx;" | |||||
src="@/static/image/earlyWarning/arrowRight.png" mode=""></image> | |||||
</view> | |||||
</view> | |||||
</u-col> | |||||
</u-row> | |||||
<u-row style="margin-top:10px;" justify="space-between" gutter="10"> | |||||
<u-col span="12"> | |||||
<uni-datetime-picker v-model="searchForm.tick" type="datetimerange"> | |||||
<view class="demo-layout"> | |||||
<view class="startBox"> | |||||
{{searchForm.StartTick}} | |||||
</view> | |||||
<text>至</text> | |||||
<view class="endBox"> | |||||
{{searchForm.EndTick}} | |||||
</view> | |||||
<view class="timeIcon"> | |||||
<image style="width: 30rpx;height:30rpx;" | |||||
src="@/static/image/earlyWarning/calendar.png" mode=""></image> | |||||
</view> | |||||
</view> | |||||
</uni-datetime-picker> | |||||
</u-col> | |||||
</u-row> | |||||
<view class="btnBox"> | |||||
<view class="leftBtn"> | |||||
重置 | |||||
</view> | |||||
<view class="rightBtn"> | |||||
确认 | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<view class="tableBox"> | |||||
<u-empty marginTop="100rpx" :show="false" mode="warnList" text="暂无数据"></u-empty> | |||||
<u-list @scrolltolower="scrolltolower" style="height: calc(100% - 0rpx);"> | |||||
<u-list-item v-for="(item, index) in warnList" :key="index"> | |||||
<view class="liBox"> | |||||
<view class="topCard"> | |||||
<view class="pic"> | |||||
<image src="@/static/image/earlyWarning/warnBack.png" mode="aspectFill"></image> | |||||
<view class="resolvingPower"> | |||||
2560*1440 | |||||
</view> | |||||
</view> | |||||
<view class="rightCard"> | |||||
<view class="firstCard"> | |||||
<view class="schoolName"> | |||||
摄像头ID:SXT001 | |||||
</view> | |||||
</view> | |||||
<view class="secondCard"> | |||||
<view class="txt"> | |||||
摄像头名称:厨房(良景) | |||||
</view> | |||||
</view> | |||||
<view class="thirdCard"> | |||||
<view class="txt"> | |||||
设备IP:192.168.10.130 | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<view class="btoCard"> | |||||
<view class="leftBox btoBox"> | |||||
<image src="@/static/image/earlyWarning/school.png" mode=""></image> | |||||
<view class="txt"> | |||||
所属学校:演示学校 | |||||
</view> | |||||
</view> | |||||
<view class="rightBox btoBox" @click="deleteClick"> | |||||
<view class="txt"> | |||||
播放 | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</u-list-item> | |||||
<u-loadmore :status="status" /> | |||||
</u-list> | |||||
</view> | |||||
<u-modal :show="showDelete" :title="deleteTitle" :showCancelButton="true" @confirm="confirmDelete" | |||||
@cancel="cancelDelete"> | |||||
<view class="slot-content"> | |||||
<text style="text-align: center;">是否确定删除该预警吗?</text> | |||||
</view> | |||||
</u-modal> | |||||
<selectSearch ref="selectSearchBox" :cellVisible="false" :value.sync="searchForm.alarmType" | |||||
:options="[{value:1,label:'qinshi1'},{value:2,label:'qinshi2'}]" title="预警类型" search-place-holder="预警类型" /> | |||||
<selectRadio ref="selectRadioBox" :cellVisible="false" :value.sync="searchForm.warnHand" | |||||
:options="[{value:1,label:'loudong1'},{value:2,label:'loudong2'}]" title="楼栋" /> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
import selectRadio from "@/components/selectRadio.vue" | |||||
import selectSearch from "@/components/selectSearch.vue" | |||||
export default { | |||||
components: { | |||||
selectRadio, | |||||
selectSearch, | |||||
}, | |||||
data() { | |||||
return { | |||||
showDelete: false, | |||||
deleteTitle: '提示', | |||||
deleteContent: '是否确定删除该预警吗?', | |||||
isShowSearch: false, | |||||
searchForm: { | |||||
alarmType: '警告类型', | |||||
warnHand: '处理状态', | |||||
tick: [], | |||||
StartTick: '开始时间', | |||||
EndTick: '结束时间', | |||||
}, | |||||
warnList: [{ | |||||
warnHand: 1 | |||||
}, { | |||||
warnHand: 0 | |||||
}, { | |||||
warnHand: 1 | |||||
}, { | |||||
warnHand: 1 | |||||
}, { | |||||
warnHand: 1 | |||||
}, {}, {}, {}, {}, ], | |||||
isLoading: false, | |||||
status: 'loadmore', //loading正在加载 loadmore加载更多 nomore没有更多了 | |||||
listc: [{ | |||||
code: 1, | |||||
name: 'dasda' | |||||
}, { | |||||
code: 2, | |||||
name: 'dasda' | |||||
}, | |||||
{ | |||||
code: 3, | |||||
name: 'dasda' | |||||
}, | |||||
{ | |||||
code: 4, | |||||
name: 'dasda' | |||||
}, | |||||
{ | |||||
code: 5, | |||||
name: 'dasda' | |||||
}, | |||||
{ | |||||
code: 6, | |||||
name: 'dasda' | |||||
}, | |||||
{ | |||||
code: 7, | |||||
name: 'dasda' | |||||
}, | |||||
{ | |||||
code: 8, | |||||
name: 'dasda' | |||||
}, | |||||
{ | |||||
code: 9, | |||||
name: 'dasda' | |||||
}, | |||||
{ | |||||
code: 10, | |||||
name: 'dasda' | |||||
}, | |||||
{ | |||||
code: 11, | |||||
name: 'dasda' | |||||
}, | |||||
{ | |||||
code: 12, | |||||
name: 'dasda' | |||||
}, | |||||
{ | |||||
code: 13, | |||||
name: '你好' | |||||
} | |||||
] | |||||
} | |||||
}, | |||||
watch: { | |||||
"searchForm.tick"() { | |||||
console.log('日期时间:', this.searchForm.tick); | |||||
if (this.searchForm.tick && this.searchForm.tick.length > 0) { | |||||
this.searchForm.StartTick = this.searchForm.tick[0] | |||||
this.searchForm.EndTick = this.searchForm.tick[1] | |||||
} | |||||
}, | |||||
}, | |||||
filters: { | |||||
// statusChange(val) { | |||||
// switch (val) { | |||||
// case 'todo': | |||||
// return '我的待办' | |||||
// break; | |||||
// case 'send': | |||||
// return '由我发起' | |||||
// break; | |||||
// case 'done': | |||||
// return '我的已办' | |||||
// break; | |||||
// default: | |||||
// } | |||||
// }, | |||||
}, | |||||
onLoad() { | |||||
// 隐藏导航栏 | |||||
this.loadmore() | |||||
}, | |||||
methods: { | |||||
cancelDelete() { | |||||
this.showDelete = false; | |||||
}, | |||||
deleteClick() { | |||||
this.showDelete = true; | |||||
}, | |||||
confirmDelete() { | |||||
this.showDelete = false; | |||||
}, | |||||
// 跳转处理页面 | |||||
toHandle(row) { | |||||
if (row.warnHand == 1) { | |||||
uni.navigateTo({ | |||||
url: '/pages/earlyWarning/handlingSuggestions' | |||||
}); | |||||
} | |||||
}, | |||||
// 跳转详情页面 | |||||
toDetail(row) { | |||||
uni.navigateTo({ | |||||
url: '/pages/earlyWarning/detail' | |||||
}); | |||||
}, | |||||
// 预警类型弹框筛选 | |||||
toOpen() { | |||||
this.$refs.selectSearchBox.show = true; | |||||
}, | |||||
// 处理情况筛选 | |||||
toOpenSelect() { | |||||
this.$refs.selectRadioBox.show = true; | |||||
}, | |||||
// 打开筛选框 | |||||
openSearch() { | |||||
this.isShowSearch = !this.isShowSearch; | |||||
}, | |||||
isSelect() { | |||||
}, | |||||
scrolltolower() { | |||||
this.loadmore() | |||||
}, | |||||
loadmore() { | |||||
if (this.status != 'loadmore') return | |||||
this.status = 'loading' | |||||
setTimeout(() => { | |||||
for (let i = 0; i < 1; i++) { | |||||
this.warnList.push({}, {}) | |||||
} | |||||
// 获取到的总条数>=接口总条数 | |||||
if (this.warnList.length >= 14) { | |||||
this.status = 'nomore' | |||||
} else { | |||||
this.status = 'loadmore' | |||||
} | |||||
}, 2000) | |||||
} | |||||
} | |||||
} | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
// .contentBox { | |||||
// height: calc(100% - 375rpx); | |||||
.inspectionCenter { | |||||
width: 100%; | |||||
height: 100%; | |||||
.u-modal__title { | |||||
color: #000000; | |||||
} | |||||
} | |||||
.searchBox { | |||||
// height: calc(100% - 360rpx); | |||||
position: relative; | |||||
.searchLine { | |||||
height: 88rpx; | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: space-between; | |||||
padding: 0 15px; | |||||
box-sizing: border-box; | |||||
background: #fff; | |||||
font-size: 28rpx; | |||||
.searchLabels { | |||||
display: flex; | |||||
align-items: center; | |||||
width: calc(100% - 34rpx); | |||||
image { | |||||
width: 40rpx; | |||||
height: 40rpx; | |||||
flex-shrink: 1; | |||||
} | |||||
.labels { | |||||
width: 120rpx; | |||||
display: block; | |||||
color: #333333; | |||||
margin-left: 10rpx; | |||||
flex-shrink: 1; | |||||
} | |||||
.values { | |||||
width: calc(100% - 40rpx - 120rpx); | |||||
color: #2388FF; | |||||
font-weight: 700; | |||||
margin-left: 18rpx; | |||||
overflow: hidden; | |||||
word-wrap: break-word; | |||||
white-space: pre-wrap; | |||||
display: -webkit-box; | |||||
-webkit-box-orient: vertical; | |||||
-webkit-line-clamp: 1; | |||||
} | |||||
} | |||||
.arrow { | |||||
// text-align: right; | |||||
// flex-shrink: 1; | |||||
image { | |||||
width: 34rpx; | |||||
height: 34rpx; | |||||
} | |||||
} | |||||
.leftSearchBox { | |||||
display: flex; | |||||
align-items: center; | |||||
width: calc(100% - 40px); | |||||
.searchLabel { | |||||
flex-shrink: 1; | |||||
color: #333333; | |||||
width: 80px; | |||||
} | |||||
.searchValue { | |||||
width: calc(100% - 60px); | |||||
margin-left: 10px; | |||||
color: #2388FF; | |||||
overflow: hidden; | |||||
word-wrap: break-word; | |||||
white-space: pre-wrap; | |||||
display: -webkit-box; | |||||
-webkit-box-orient: vertical; | |||||
-webkit-line-clamp: 1; | |||||
} | |||||
} | |||||
} | |||||
.searchDialog { | |||||
position: absolute; | |||||
z-index: 990; | |||||
top: 89rpx; | |||||
width: 100%; | |||||
height: calc(100vh - 375rpx - 100rpx); | |||||
font-size: 26rpx; | |||||
background: rgba(0, 0, 0, 0.2); | |||||
.content { | |||||
background: #FFFFFF; | |||||
padding: 15px; | |||||
box-sizing: border-box; | |||||
border-top: 1px solid rgba(0, 0, 0, 0.1); | |||||
.demo-layout { | |||||
height: 80rpx; | |||||
border-radius: 8rpx; | |||||
background: #F5F5F5; | |||||
display: flex; | |||||
justify-content: space-between; | |||||
align-items: center; | |||||
padding: 0 10px; | |||||
box-sizing: border-box; | |||||
.left-layout { | |||||
color: #777777; | |||||
} | |||||
.right-layout {} | |||||
.startBox { | |||||
color: #777777; | |||||
} | |||||
text { | |||||
color: #777777; | |||||
} | |||||
.endBox { | |||||
color: #777777; | |||||
} | |||||
.timeIcon {} | |||||
} | |||||
} | |||||
.btnBox { | |||||
display: flex; | |||||
align-items: center; | |||||
margin-top: 15px; | |||||
.leftBtn { | |||||
width: 50%; | |||||
height: 74rpx; | |||||
line-height: 74rpx; | |||||
border: 1px solid #BABABA; | |||||
border-radius: 12rpx; | |||||
color: #333333; | |||||
text-align: center; | |||||
} | |||||
.rightBtn { | |||||
width: 50%; | |||||
height: 74rpx; | |||||
line-height: 74rpx; | |||||
border: 1px solid #2388FF; | |||||
border-radius: 12rpx; | |||||
color: #fff; | |||||
text-align: center; | |||||
background: #2388FF; | |||||
margin-left: 15rpx; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
.tableBox { | |||||
height: 100%; | |||||
padding: 10px; | |||||
box-sizing: border-box; | |||||
// height: 600px; | |||||
padding-bottom: 30px; | |||||
.liBox { | |||||
background: #fff; | |||||
padding: 20px 15px; | |||||
box-sizing: border-box; | |||||
border-radius: 20px; | |||||
margin-bottom: 10px; | |||||
.topCard { | |||||
display: flex; | |||||
.pic { | |||||
position: relative; | |||||
image { | |||||
width: 300rpx; | |||||
height: 220rpx; | |||||
border-radius: 4px; | |||||
} | |||||
.resolvingPower { | |||||
position: absolute; | |||||
top: 15rpx; | |||||
right: 15rpx; | |||||
background: #000000; | |||||
color: #fff; | |||||
padding: 8rpx; | |||||
box-sizing: border-box; | |||||
font-size: 20rpx; | |||||
border-radius: 4rpx; | |||||
} | |||||
} | |||||
.rightCard { | |||||
margin-left: 20rpx; | |||||
margin-top: 15rpx; | |||||
.firstCard { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
align-items: center; | |||||
margin-bottom: 60rpx; | |||||
.schoolName { | |||||
font-size: 32rpx; | |||||
font-weight: 700; | |||||
color: #333333; | |||||
overflow: hidden; | |||||
word-wrap: break-word; | |||||
white-space: pre-wrap; | |||||
// font-size: 14px; | |||||
display: -webkit-box; | |||||
-webkit-box-orient: vertical; | |||||
-webkit-line-clamp: 1; | |||||
} | |||||
} | |||||
.secondCard, | |||||
.thirdCard { | |||||
display: flex; | |||||
align-items: center; | |||||
margin-top: 18rpx; | |||||
.txt { | |||||
font-size: 26rpx; | |||||
color: #333333; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
.midCard { | |||||
font-size: 28rpx; | |||||
.midContent { | |||||
margin-top: 18rpx; | |||||
} | |||||
} | |||||
.btoCard { | |||||
border-top: 1px solid rgba(0, 0, 0, 0.1); | |||||
margin-top: 30rpx; | |||||
padding: 18px 0 0 0; | |||||
display: flex; | |||||
justify-content: space-between; | |||||
align-items: center; | |||||
.btoBox { | |||||
// width: 33.3%; | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
position: relative; | |||||
image { | |||||
width: 40rpx; | |||||
height: 40rpx; | |||||
margin-right: 15rpx; | |||||
} | |||||
} | |||||
.rightBox { | |||||
width: 180rpx; | |||||
height: 74rpx; | |||||
background: #2388FF; | |||||
color: #fff; | |||||
border-radius: 80rpx; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
// } | |||||
</style> |
@@ -1,696 +0,0 @@ | |||||
<template> | |||||
<view class="warningInfo"> | |||||
<view class="searchBox"> | |||||
<!-- <view class="searchLine"> | |||||
<view class="searchShow" @click="openSearch"> | |||||
<image v-show="isShowSearch==false" style="width:20px;height:20px;" | |||||
src="@/static/image/earlyWarning/screen.png" mode=""> | |||||
</image> | |||||
<image v-show="isShowSearch" style="width:20px;height:20px;" | |||||
src="@/static/image/earlyWarning/screenActive.png" mode=""> | |||||
</image> | |||||
<text class="labels">筛选</text> | |||||
<text class="values">周界入侵,未处理,2024-8-24 18:06:12 - 2024-8-24 18:06:12</text> | |||||
<view class="arrow"> | |||||
<image v-show="isShowSearch==false" src="@/static/image/earlyWarning/arrow1.png" mode=""> | |||||
</image> | |||||
<image v-show="isShowSearch" src="@/static/image/earlyWarning/arrow2.png" mode=""></image> | |||||
</view> | |||||
</view> | |||||
</view> --> | |||||
<view class="searchLine" @click="openSearch"> | |||||
<!-- <view class="searchShow"> --> | |||||
<view class="searchLabels"> | |||||
<image v-show="isShowSearch==false" src="@/static/image/earlyWarning/screen.png" mode=""> | |||||
</image> | |||||
<image v-show="isShowSearch" src="@/static/image/earlyWarning/screenActive.png" mode=""> | |||||
</image> | |||||
<text class="labels">筛选</text> | |||||
<view class="values">周界入侵,未处理,2024-8-24 18:06:12 - 2024-8-24 18:06:12</view> | |||||
</view> | |||||
<view class="arrow"> | |||||
<image v-show="isShowSearch==false" src="@/static/image/earlyWarning/arrow1.png" mode=""> | |||||
</image> | |||||
<image v-show="isShowSearch" src="@/static/image/earlyWarning/arrow2.png" mode=""></image> | |||||
</view> | |||||
<!-- </view> --> | |||||
</view> | |||||
<view @click="isShowSearch=false" class="searchDialog" v-if="isShowSearch"> | |||||
<view class="content" @click.stop="isSelect"> | |||||
<u-row justify="space-between" gutter="10"> | |||||
<u-col span="7"> | |||||
<view class="demo-layout" @click="toOpen"> | |||||
<view class="left-layout"> | |||||
<text>{{searchForm.$alarmType || '警告类型'}}</text> | |||||
</view> | |||||
<view class="right-layout"> | |||||
<image style="width: 30rpx;height:30rpx;" | |||||
src="@/static/image/earlyWarning/arrowRight.png" mode=""></image> | |||||
</view> | |||||
</view> | |||||
<!-- <jp-select-plus ref="selectPlus" :isShow="false" color="#2388FF" placeholder="请选择" | |||||
isSearch v-model="va3" :list="listc"></jp-select-plus> --> | |||||
</u-col> | |||||
<u-col span="5"> | |||||
<view class="demo-layout" @click="toOpenSelect"> | |||||
<view class="left-layout"> | |||||
<text>{{searchForm.warnHand || '处理状态'}}</text> | |||||
</view> | |||||
<view class="right-layout"> | |||||
<image style="width: 30rpx;height:30rpx;" | |||||
src="@/static/image/earlyWarning/arrowRight.png" mode=""></image> | |||||
</view> | |||||
</view> | |||||
</u-col> | |||||
</u-row> | |||||
<u-row style="margin-top:10px;" justify="space-between" gutter="10"> | |||||
<u-col span="12"> | |||||
<uni-datetime-picker v-model="searchForm.tick" type="datetimerange"> | |||||
<view class="demo-layout"> | |||||
<view class="startBox"> | |||||
{{searchForm.StartTick || '开始时间'}} | |||||
</view> | |||||
<text>至</text> | |||||
<view class="endBox"> | |||||
{{searchForm.EndTick || '结束时间'}} | |||||
</view> | |||||
<view class="timeIcon"> | |||||
<image style="width: 30rpx;height:30rpx;" | |||||
src="@/static/image/earlyWarning/calendar.png" mode=""></image> | |||||
</view> | |||||
</view> | |||||
</uni-datetime-picker> | |||||
</u-col> | |||||
</u-row> | |||||
<view class="btnBox"> | |||||
<view class="leftBtn" @click="clearform"> | |||||
重置 | |||||
</view> | |||||
<view class="rightBtn" @click="onsubmit"> | |||||
确认 | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<view class="tableBox"> | |||||
<u-empty marginTop="100rpx" :show="false" mode="list" text="暂无数据"></u-empty> | |||||
<u-list @scrolltolower="scrolltolower" style="height: calc(100% - 0rpx);"> | |||||
<u-list-item v-for="(item, index) in warnList" :key="index"> | |||||
<view class="liBox"> | |||||
<view class="headerCard"> | |||||
<view class="schoolName"> | |||||
学校名称学校名称学校名称学校名称 | |||||
</view> | |||||
<view class="statusBox" :class="[item.warnHand == 1?'handle':'nohandle']"> | |||||
{{item.warnHand == 1 ? '已处理' : '未处理'}} | |||||
</view> | |||||
</view> | |||||
<view class="topCard"> | |||||
<view class="pic"> | |||||
<image src="@/static/image/earlyWarning/warnBack.png" mode="aspectFill"></image> | |||||
</view> | |||||
<view class="rightCard"> | |||||
<u-row> | |||||
<u-col span="6"> | |||||
<view class="midContent"> | |||||
姓名:杨云 | |||||
</view> | |||||
</u-col> | |||||
<u-col span="6"> | |||||
<view class="midContent"> | |||||
系部:安环部 | |||||
</view> | |||||
</u-col> | |||||
</u-row> | |||||
<u-row style="margin-top: 20rpx;"> | |||||
<u-col span="6"> | |||||
<view class="midContent"> | |||||
专业:环艺 | |||||
</view> | |||||
</u-col> | |||||
<u-col span="6"> | |||||
<view class="midContent"> | |||||
班级:第二班 | |||||
</view> | |||||
</u-col> | |||||
</u-row> | |||||
</view> | |||||
</view> | |||||
<view class="midCard"> | |||||
<view class="secondCard"> | |||||
<image style="width: 30rpx;height: 30rpx;" | |||||
src="@/static/image/earlyWarning/warnType.png" mode=""></image> | |||||
<view class="txt"> | |||||
警告类型:周界入侵 | |||||
</view> | |||||
</view> | |||||
<view class="thirdCard"> | |||||
<image style="width: 30rpx;height: 30rpx;" | |||||
src="@/static/image/earlyWarning/warnVideo.png" mode=""></image> | |||||
<view class="txt"> | |||||
警告摄像头:厨房(良景) | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<view class="btoCard"> | |||||
<view class="btoContent"> | |||||
时间:2024-08-15 11:59:12 | |||||
</view> | |||||
<view class="rightBox btoBox" @click="toDetail"> | |||||
<view class="txt"> | |||||
查看 | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</u-list-item> | |||||
<u-loadmore :status="status" /> | |||||
</u-list> | |||||
</view> | |||||
<selectSearch ref="selectSearchBox" :cellVisible="false" v-model="searchForm.alarmType" | |||||
:options="warnOption" :title.sync="searchForm.$alarmType" placeholder="预警类型" search-placeholder="预警类型" /> | |||||
<selectRadio ref="selectRadioBox" :cellVisible="false" v-model="searchForm.warnHand" | |||||
:options="handOption" placeholder="处理状态" /> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
import selectRadio from "@/components/selectRadio.vue" | |||||
import selectSearch from "@/components/selectSearch.vue" | |||||
import { | |||||
page, //获取列表 | |||||
detail, //详情 | |||||
warnType, //获取预警类型 | |||||
} from '@/api/warn/index.js' | |||||
export default { | |||||
components: { | |||||
selectRadio, | |||||
selectSearch | |||||
}, | |||||
data() { | |||||
return { | |||||
isShowSearch: false, | |||||
searchForm: { | |||||
alarmType: '', | |||||
warnHand: '', | |||||
tick: [], | |||||
StartTick: '', | |||||
EndTick: '', | |||||
}, | |||||
warnOption: [ | |||||
{ | |||||
label: '人群聚集', | |||||
value: 1 | |||||
}, | |||||
{ | |||||
label: '烟火警告', | |||||
value: 2 | |||||
}, | |||||
{ | |||||
label: '未佩戴口罩检查', | |||||
value: 3 | |||||
}, | |||||
{ | |||||
label: '周界入侵', | |||||
value: 4 | |||||
}, | |||||
], | |||||
handOption: [ | |||||
{ | |||||
label: '已处理', | |||||
value: 1 | |||||
}, | |||||
{ | |||||
label: '未处理', | |||||
value: 2 | |||||
}, | |||||
], | |||||
warnList: [{ | |||||
warnHand: 1 | |||||
}, { | |||||
warnHand: 0 | |||||
}, { | |||||
warnHand: 1 | |||||
}, { | |||||
warnHand: 1 | |||||
}, { | |||||
warnHand: 1 | |||||
}, {}, {}, {}, {}, ], | |||||
isLoading: false, | |||||
status: 'loadmore', //loading正在加载 loadmore加载更多 nomore没有更多了 | |||||
listc: [{ | |||||
code: 1, | |||||
name: 'dasda' | |||||
}, { | |||||
code: 2, | |||||
name: 'dasda' | |||||
}, | |||||
{ | |||||
code: 3, | |||||
name: 'dasda' | |||||
}, | |||||
{ | |||||
code: 4, | |||||
name: 'dasda' | |||||
}, | |||||
{ | |||||
code: 5, | |||||
name: 'dasda' | |||||
}, | |||||
{ | |||||
code: 6, | |||||
name: 'dasda' | |||||
}, | |||||
{ | |||||
code: 7, | |||||
name: 'dasda' | |||||
}, | |||||
{ | |||||
code: 8, | |||||
name: 'dasda' | |||||
}, | |||||
{ | |||||
code: 9, | |||||
name: 'dasda' | |||||
}, | |||||
{ | |||||
code: 10, | |||||
name: 'dasda' | |||||
}, | |||||
{ | |||||
code: 11, | |||||
name: 'dasda' | |||||
}, | |||||
{ | |||||
code: 12, | |||||
name: 'dasda' | |||||
}, | |||||
{ | |||||
code: 13, | |||||
name: '你好' | |||||
} | |||||
] | |||||
} | |||||
}, | |||||
watch: { | |||||
"searchForm.tick"() { | |||||
console.log('日期时间:', this.searchForm.tick); | |||||
if (this.searchForm.tick && this.searchForm.tick.length > 0) { | |||||
this.searchForm.StartTick = this.searchForm.tick[0] | |||||
this.searchForm.EndTick = this.searchForm.tick[1] | |||||
} | |||||
}, | |||||
}, | |||||
filters: { | |||||
// statusChange(val) { | |||||
// switch (val) { | |||||
// case 'todo': | |||||
// return '我的待办' | |||||
// break; | |||||
// case 'send': | |||||
// return '由我发起' | |||||
// break; | |||||
// case 'done': | |||||
// return '我的已办' | |||||
// break; | |||||
// default: | |||||
// } | |||||
// }, | |||||
}, | |||||
onLoad() { | |||||
// 隐藏导航栏 | |||||
this.loadmore() | |||||
}, | |||||
methods: { | |||||
clearform() { | |||||
this.searchForm = {} | |||||
this.isShowSearch = false; | |||||
}, | |||||
onsubmit() { | |||||
console.log(this.searchForm) | |||||
}, | |||||
// 跳转详情页面 | |||||
toDetail(row) { | |||||
uni.navigateTo({ | |||||
url: '/pages/earlyWarning/detail' | |||||
}); | |||||
}, | |||||
// 预警类型弹框筛选 | |||||
toOpen() { | |||||
this.$refs.selectSearchBox.show = true; | |||||
}, | |||||
// 处理情况筛选 | |||||
toOpenSelect() { | |||||
this.$refs.selectRadioBox.show = true; | |||||
}, | |||||
// 打开筛选框 | |||||
openSearch() { | |||||
this.isShowSearch = !this.isShowSearch; | |||||
}, | |||||
isSelect() { | |||||
}, | |||||
scrolltolower() { | |||||
this.loadmore() | |||||
}, | |||||
loadmore() { | |||||
if (this.status != 'loadmore') return | |||||
this.status = 'loading' | |||||
page(this.searchForm).then(res=>{ | |||||
console.log(res) | |||||
// 获取到的总条数>=接口总条数 | |||||
if (this.warnList.length >= 14) { | |||||
this.status = 'nomore' | |||||
} else { | |||||
this.status = 'loadmore' | |||||
} | |||||
}) | |||||
// setTimeout(() => { | |||||
// for (let i = 0; i < 1; i++) { | |||||
// this.warnList.push({}, {}) | |||||
// } | |||||
// }, 2000) | |||||
} | |||||
} | |||||
} | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
// .contentBox { | |||||
// height: calc(100% - 375rpx); | |||||
.warningInfo { | |||||
width: 100%; | |||||
height: 100%; | |||||
background: #F6F8FA; | |||||
.u-modal__title { | |||||
color: #000000; | |||||
} | |||||
} | |||||
.searchBox { | |||||
// height: calc(100% - 360rpx); | |||||
position: relative; | |||||
.searchLine { | |||||
height: 88rpx; | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: space-between; | |||||
padding: 0 15px; | |||||
box-sizing: border-box; | |||||
background: #fff; | |||||
font-size: 28rpx; | |||||
.searchLabels { | |||||
display: flex; | |||||
align-items: center; | |||||
width: calc(100% - 34rpx); | |||||
image { | |||||
width: 40rpx; | |||||
height: 40rpx; | |||||
flex-shrink: 1; | |||||
} | |||||
.labels { | |||||
width: 70rpx; | |||||
display: block; | |||||
color: #333333; | |||||
margin-left: 10rpx; | |||||
flex-shrink: 1; | |||||
} | |||||
.values { | |||||
width: calc(100% - 40rpx - 50rpx); | |||||
color: #2388FF; | |||||
font-weight: 700; | |||||
margin-left: 18rpx; | |||||
overflow: hidden; | |||||
word-wrap: break-word; | |||||
white-space: pre-wrap; | |||||
display: -webkit-box; | |||||
-webkit-box-orient: vertical; | |||||
-webkit-line-clamp: 1; | |||||
} | |||||
} | |||||
.arrow { | |||||
// text-align: right; | |||||
// flex-shrink: 1; | |||||
image { | |||||
width: 34rpx; | |||||
height: 34rpx; | |||||
} | |||||
} | |||||
.leftSearchBox { | |||||
display: flex; | |||||
align-items: center; | |||||
width: calc(100% - 40px); | |||||
.searchLabel { | |||||
flex-shrink: 1; | |||||
color: #333333; | |||||
width: 80px; | |||||
} | |||||
.searchValue { | |||||
width: calc(100% - 60px); | |||||
margin-left: 10px; | |||||
color: #2388FF; | |||||
overflow: hidden; | |||||
word-wrap: break-word; | |||||
white-space: pre-wrap; | |||||
display: -webkit-box; | |||||
-webkit-box-orient: vertical; | |||||
-webkit-line-clamp: 1; | |||||
} | |||||
} | |||||
} | |||||
.searchDialog { | |||||
position: absolute; | |||||
z-index: 990; | |||||
top: 89rpx; | |||||
width: 100%; | |||||
height: calc(100vh - 375rpx - 60rpx); | |||||
font-size: 26rpx; | |||||
background: rgba(0, 0, 0, 0.2); | |||||
.content { | |||||
background: #FFFFFF; | |||||
padding: 15px; | |||||
box-sizing: border-box; | |||||
border-top: 1px solid rgba(0, 0, 0, 0.1); | |||||
.demo-layout { | |||||
height: 80rpx; | |||||
border-radius: 8rpx; | |||||
background: #F5F5F5; | |||||
display: flex; | |||||
justify-content: space-between; | |||||
align-items: center; | |||||
padding: 0 10px; | |||||
box-sizing: border-box; | |||||
.left-layout { | |||||
color: #777777; | |||||
} | |||||
.right-layout {} | |||||
.startBox { | |||||
color: #777777; | |||||
} | |||||
text { | |||||
color: #777777; | |||||
} | |||||
.endBox { | |||||
color: #777777; | |||||
} | |||||
.timeIcon {} | |||||
} | |||||
} | |||||
.btnBox { | |||||
display: flex; | |||||
align-items: center; | |||||
margin-top: 15px; | |||||
.leftBtn { | |||||
width: 50%; | |||||
height: 74rpx; | |||||
line-height: 74rpx; | |||||
border: 1px solid #ccc; | |||||
border-radius: 12rpx; | |||||
color: #333333; | |||||
text-align: center; | |||||
} | |||||
.rightBtn { | |||||
width: 50%; | |||||
height: 74rpx; | |||||
line-height: 74rpx; | |||||
border: 1px solid #2388FF; | |||||
border-radius: 12rpx; | |||||
color: #fff; | |||||
text-align: center; | |||||
background: #2388FF; | |||||
margin-left: 15rpx; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
.tableBox { | |||||
height: 100%; | |||||
padding: 30rpx; | |||||
box-sizing: border-box; | |||||
// height: 600px; | |||||
padding-bottom: 30px; | |||||
.liBox { | |||||
background: #fff; | |||||
padding: 0 30rpx; | |||||
box-sizing: border-box; | |||||
border-radius: 20rpx; | |||||
margin-bottom: 30rpx; | |||||
font-family: 'PingFang SC'; | |||||
.headerCard { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
align-items: center; | |||||
padding: 24rpx 0; | |||||
.schoolName { | |||||
font-size: 32rpx; | |||||
font-weight: 700; | |||||
font-family: 'PingFang SC'; | |||||
color: #333333; | |||||
overflow: hidden; | |||||
word-wrap: break-word; | |||||
white-space: pre-wrap; | |||||
// font-size: 14px; | |||||
display: -webkit-box; | |||||
-webkit-box-orient: vertical; | |||||
-webkit-line-clamp: 1; | |||||
} | |||||
.statusBox { | |||||
width: 100rpx; | |||||
flex-shrink: 1; | |||||
text-align: center; | |||||
font-size: 24rpx; | |||||
border-radius: 8rpx; | |||||
color: #fff; | |||||
padding: 8rpx 12rpx; | |||||
font-family: 'PingFang SC'; | |||||
} | |||||
.handle { | |||||
background: rgba(15, 175, 118, 0.1); | |||||
color: #0FAF76; | |||||
} | |||||
.nohandle { | |||||
background: rgba(239, 45, 45, 0.1); | |||||
color: rgba(239, 45, 45, 1); | |||||
} | |||||
} | |||||
.topCard { | |||||
display: flex; | |||||
border-top: 1px solid rgba(0, 0, 0, 0.1); | |||||
align-items: center; | |||||
padding: 20rpx 0; | |||||
.pic { | |||||
width: 120rpx; | |||||
height: 120rpx; | |||||
image { | |||||
width: 120rpx; | |||||
height: 120rpx; | |||||
border-radius: 4px; | |||||
} | |||||
} | |||||
.rightCard { | |||||
margin-left: 20rpx; | |||||
font-size: 26rpx; | |||||
font-family: 'PingFang SC'; | |||||
width: calc(100% - 140rpx); | |||||
} | |||||
} | |||||
.midCard { | |||||
font-size: 26rpx; | |||||
.secondCard, | |||||
.thirdCard { | |||||
display: flex; | |||||
align-items: center; | |||||
.txt { | |||||
font-size: 26rpx; | |||||
font-family: 'PingFang SC'; | |||||
margin-left: 10rpx; | |||||
color: #333333; | |||||
} | |||||
} | |||||
.thirdCard { | |||||
margin-top: 18rpx; | |||||
} | |||||
} | |||||
.btoCard { | |||||
border-top: 1px solid rgba(0, 0, 0, 0.1); | |||||
margin-top: 20rpx; | |||||
padding: 20rpx 0; | |||||
display: flex; | |||||
justify-content: space-between; | |||||
align-items: center; | |||||
font-size: 26rpx; | |||||
font-family: 'PingFang SC'; | |||||
.rightBox { | |||||
.txt { | |||||
width: 120rpx; | |||||
height: 60rpx; | |||||
line-height: 60rpx; | |||||
font-family: 'PingFang SC'; | |||||
text-align: center; | |||||
background: #2388FF; | |||||
color: #fff; | |||||
border-radius: 80rpx; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} | |||||
// } | |||||
</style> |
@@ -1,9 +1,9 @@ | |||||
<template> | <template> | ||||
<view class="warningDetail"> | <view class="warningDetail"> | ||||
<view class="title cli"> | <view class="title cli"> | ||||
周界入侵-2024-08-20 18:01:41 | |||||
{{detailData.alarmTypeDesc ? detailData.alarmTypeDesc + '-' + detailData.tick : ''}} | |||||
</view> | </view> | ||||
<image style="width: 100%;height:422rpx;" src="../../static/image/add.png" mode="aspectFit"></image> | |||||
<image style="width: 100%;height:422rpx;" :src="detailData.snapshotUrl" mode="aspectFit"></image> | |||||
<view class="cli"> | <view class="cli"> | ||||
<view class="labelBox"> | <view class="labelBox"> | ||||
所属学校: | 所属学校: | ||||
@@ -17,31 +17,39 @@ | |||||
班级: | 班级: | ||||
</view> | </view> | ||||
<view class="valueBox"> | <view class="valueBox"> | ||||
班级 | |||||
-- | |||||
</view> | </view> | ||||
</view> | </view> | ||||
<view class="cli"> | <view class="cli"> | ||||
<view class="labelBox"> | <view class="labelBox"> | ||||
告警摄像头: | |||||
姓名: | |||||
</view> | </view> | ||||
<view class="valueBox"> | <view class="valueBox"> | ||||
摄像头 | |||||
{{ detailData.personName || "--" }} | |||||
</view> | </view> | ||||
</view> | </view> | ||||
<view class="cli"> | <view class="cli"> | ||||
<view class="labelBox"> | <view class="labelBox"> | ||||
告警类型: | |||||
预警摄像头: | |||||
</view> | </view> | ||||
<view class="valueBox"> | <view class="valueBox"> | ||||
类型 | |||||
{{ detailData.cameraName || "--" }} | |||||
</view> | </view> | ||||
</view> | </view> | ||||
<view class="cli"> | <view class="cli"> | ||||
<view class="labelBox"> | <view class="labelBox"> | ||||
告警时间: | |||||
预警类型: | |||||
</view> | </view> | ||||
<view class="valueBox"> | <view class="valueBox"> | ||||
2024-8-24 16:42:13 | |||||
{{ detailData.alarmTypeDesc || "--" }} | |||||
</view> | |||||
</view> | |||||
<view class="cli"> | |||||
<view class="labelBox"> | |||||
预警时间: | |||||
</view> | |||||
<view class="valueBox"> | |||||
{{ detailData.tick || "--" }} | |||||
</view> | </view> | ||||
</view> | </view> | ||||
<view class="cli"> | <view class="cli"> | ||||
@@ -49,8 +57,8 @@ | |||||
复核视频: | 复核视频: | ||||
</view> | </view> | ||||
<view class="valueBox"> | <view class="valueBox"> | ||||
<text style="color: #2388FF;" @click="seeVideo">查看视频</text> | |||||
<text>暂无数据</text> | |||||
<text v-if="detailData.videoUrl" style="color: #2388FF;" @click="seeVideo(detailData.videoUrl)">查看视频</text> | |||||
<text v-else>--</text> | |||||
</view> | </view> | ||||
</view> | </view> | ||||
<view class="cli2"> | <view class="cli2"> | ||||
@@ -58,7 +66,7 @@ | |||||
备注信息: | 备注信息: | ||||
</view> | </view> | ||||
<view class="valueBox"> | <view class="valueBox"> | ||||
暂无数据 | |||||
{{ detailData.extend || '--' }} | |||||
</view> | </view> | ||||
</view> | </view> | ||||
@@ -67,7 +75,7 @@ | |||||
处理意见: | 处理意见: | ||||
</view> | </view> | ||||
<view class="valueBox"> | <view class="valueBox"> | ||||
暂无数据 | |||||
{{ detailData.remark || '--' }} | |||||
</view> | </view> | ||||
</view> | </view> | ||||
<u-popup :show="showVideo" :closeable="true" @close="close" @open="open" mode="center"> | <u-popup :show="showVideo" :closeable="true" @close="close" @open="open" mode="center"> | ||||
@@ -78,7 +86,7 @@ | |||||
<view class="poupBox"> | <view class="poupBox"> | ||||
<view style="width: 750rpx;height: 400rpx;"> | <view style="width: 750rpx;height: 400rpx;"> | ||||
<DomVideoPlayer ref="domVideoPlayer" object-fit='contain' :controls="controls" :autoplay="autoplay" | <DomVideoPlayer ref="domVideoPlayer" object-fit='contain' :controls="controls" :autoplay="autoplay" | ||||
:loop="loop" :src="src" :playback-rate="playbackRate" :is-loading="isLoading" @play="onPlay" | |||||
:loop="loop" :src="urlsrc" :playback-rate="playbackRate" :is-loading="isLoading" @play="onPlay" | |||||
@pause="onPause" @ended="onEnded" @durationchange="onDurationChange" @timeupdate="onTimeUpdate" | @pause="onPause" @ended="onEnded" @durationchange="onDurationChange" @timeupdate="onTimeUpdate" | ||||
@ratechange="onRateChange" @fullscreenchange="onFullscreenChange" /> | @ratechange="onRateChange" @fullscreenchange="onFullscreenChange" /> | ||||
</view> | </view> | ||||
@@ -89,6 +97,10 @@ | |||||
<script> | <script> | ||||
import DomVideoPlayer from '@/components/DomVideoPlayer/DomVideoPlayer.vue' | import DomVideoPlayer from '@/components/DomVideoPlayer/DomVideoPlayer.vue' | ||||
import { | |||||
detail, //详情 | |||||
warnType, //获取预警类型 | |||||
} from '@/api/warn/index.js' | |||||
// 将xx秒转为 xx:xx 分秒格式 | // 将xx秒转为 xx:xx 分秒格式 | ||||
const formatSec2Time = (time) => { | const formatSec2Time = (time) => { | ||||
const min = Math.floor(time / 60) | const min = Math.floor(time / 60) | ||||
@@ -101,10 +113,10 @@ | |||||
}, | }, | ||||
data() { | data() { | ||||
return { | return { | ||||
value1: '', | |||||
detailData: {}, | |||||
showVideo: false, | showVideo: false, | ||||
// 视频参数 | // 视频参数 | ||||
src: '', | |||||
urlsrc: '', | |||||
// src: 'http://deepvision.oss-cn-zhangjiakou.aliyuncs.com/acp/quanjiang/DEMO00001/20240708/video/wander/SXT001__quanjiang__DEMO00001_video_wm_1720400435638.mp4?Expires=1724745909&OSSAccessKeyId=STS.NV49VEGSbWMNi7Wp4e76VrWKk&Signature=wXTdiWQHGNp%2FtbtezUBmD%2Fziy1E%3D&security-token=CAIS0wN1q6Ft5B2yfSjIr5WBcuzxqoxD4I%2BlaxHmlDQwO7l6nZLgiTz2IHFMf3huCeodsv8%2BlGxS5%2FgelrpqVpZDR03Na8RHwrly1lv5O9KY4zIJb0D10s%2FLI3OaLjKm9hi7AYygPgK0GJqEb1TDiVUto9%2FTfimjWFqIKICAjYUdAP0cQgi%2Fa0gwZrJRPRAwh8IGEnHTOP2xUHvtmXGCNFd0nQB%2BhGhjk7TdpPeR8R3Dllb35%2FYIroDqWPieYtJrIY10XqWBvqx%2FfbGT1zVLuVoYtvV6gaFc5zbcv9abRFVf4hiCP6%2Ff6MBuNw5%2Fae94efZNp%2BOukuZj6K6B1db7xhtVI%2BBOUiPZA4mr2IzdBeqvNNcwc7m8F1no9YjXbsGs9EEGGStLaVgVI4F8dyAhWEd9FWjgR%2FX5qAyQUGCKULOY1aw6651xwmjz8MCCT1r1GOTBindGasVnMxh5Z0JMjDK9aNkKfgFUbVJ8BrGTCIh%2FYx0bsq7yowDIEyp71TRMo%2Bbu%2FDBhIifKpO4VN7AxMup1DPwu2wNCxKRpnrU0rgxd8uAx9DyyfH1x3TObqd7jjqzaKs3NYdtswV4BUlvK5CGWEjhzQEO8mJtNIDT39ax%2Bf3elrfsIeBqAAaamZEcVMZBN29tT2k9jMRQfJjNJzZRtx5Z4sYbOwDoRAq%2F4qEv07jBx5PUAAB3q9IqDapPoeUw8Yccvlo9q5VG8AsY%2BZkidTAw%2B7s7%2BTKuJC93tJfdSUYdycPZ%2BZneA%2BlZqpdvfhTtZCteGsdnoQU4H7x%2B9ph9K%2Bg3HGMQrtuFdIAA%3D', | // src: 'http://deepvision.oss-cn-zhangjiakou.aliyuncs.com/acp/quanjiang/DEMO00001/20240708/video/wander/SXT001__quanjiang__DEMO00001_video_wm_1720400435638.mp4?Expires=1724745909&OSSAccessKeyId=STS.NV49VEGSbWMNi7Wp4e76VrWKk&Signature=wXTdiWQHGNp%2FtbtezUBmD%2Fziy1E%3D&security-token=CAIS0wN1q6Ft5B2yfSjIr5WBcuzxqoxD4I%2BlaxHmlDQwO7l6nZLgiTz2IHFMf3huCeodsv8%2BlGxS5%2FgelrpqVpZDR03Na8RHwrly1lv5O9KY4zIJb0D10s%2FLI3OaLjKm9hi7AYygPgK0GJqEb1TDiVUto9%2FTfimjWFqIKICAjYUdAP0cQgi%2Fa0gwZrJRPRAwh8IGEnHTOP2xUHvtmXGCNFd0nQB%2BhGhjk7TdpPeR8R3Dllb35%2FYIroDqWPieYtJrIY10XqWBvqx%2FfbGT1zVLuVoYtvV6gaFc5zbcv9abRFVf4hiCP6%2Ff6MBuNw5%2Fae94efZNp%2BOukuZj6K6B1db7xhtVI%2BBOUiPZA4mr2IzdBeqvNNcwc7m8F1no9YjXbsGs9EEGGStLaVgVI4F8dyAhWEd9FWjgR%2FX5qAyQUGCKULOY1aw6651xwmjz8MCCT1r1GOTBindGasVnMxh5Z0JMjDK9aNkKfgFUbVJ8BrGTCIh%2FYx0bsq7yowDIEyp71TRMo%2Bbu%2FDBhIifKpO4VN7AxMup1DPwu2wNCxKRpnrU0rgxd8uAx9DyyfH1x3TObqd7jjqzaKs3NYdtswV4BUlvK5CGWEjhzQEO8mJtNIDT39ax%2Bf3elrfsIeBqAAaamZEcVMZBN29tT2k9jMRQfJjNJzZRtx5Z4sYbOwDoRAq%2F4qEv07jBx5PUAAB3q9IqDapPoeUw8Yccvlo9q5VG8AsY%2BZkidTAw%2B7s7%2BTKuJC93tJfdSUYdycPZ%2BZneA%2BlZqpdvfhTtZCteGsdnoQU4H7x%2B9ph9K%2Bg3HGMQrtuFdIAA%3D', | ||||
playing: false, | playing: false, | ||||
loop: false, | loop: false, | ||||
@@ -129,16 +141,31 @@ | |||||
// return `${curr} / ${dur}` | // return `${curr} / ${dur}` | ||||
// }, | // }, | ||||
}, | }, | ||||
onLoad(options) { | |||||
console.log(options) | |||||
if(options.id) { | |||||
this.id = options.id; | |||||
} | |||||
this.getInfo(); | |||||
}, | |||||
methods: { | methods: { | ||||
seeVideo() { | |||||
getInfo() { | |||||
detail({ id: this.id }).then(res=>{ | |||||
if(res.code == 200) { | |||||
this.detailData = res.data; | |||||
} | |||||
}) | |||||
}, | |||||
seeVideo(url) { | |||||
this.showVideo = true; | this.showVideo = true; | ||||
this.urlsrc = url; | |||||
}, | }, | ||||
open() { | open() { | ||||
// console.log('open'); | // console.log('open'); | ||||
setTimeout(() => { | setTimeout(() => { | ||||
this.src = | this.src = | ||||
'http://deepvision.oss-cn-zhangjiakou.aliyuncs.com/acp/quanjiang/DEMO00001/20240708/video/wander/SXT001__quanjiang__DEMO00001_video_wm_1720400435638.mp4?Expires=1724748181&OSSAccessKeyId=STS.NTwCzwCtwDDYeE7RAhHue5mDb&Signature=qY%2F82lk1K9VJEX95ImeNH9wMHiw%3D&security-token=CAIS0wN1q6Ft5B2yfSjIr5fCCMDDrqtW84ayZ2OGtkE9RPpJ2qjvgDz2IHFMf3huCeodsv8%2BlGxS5%2FgelrpqVpZDR03Na8RHwrly1lv5O9KY4z1YIkL10s%2FLI3OaLjKm9hi7AYygPgK0GJqEb1TDiVUto9%2FTfimjWFqIKICAjYUdAP0cQgi%2Fa0gwZrJRPRAwh8IGEnHTOP2xUHvtmXGCNFd0nQB%2BhGhjk7TdpPeR8R3Dllb35%2FYIroDqWPieYtJrIY10XqWBvqx%2FfbGT1zVLuVoYtvV6gaFc5zbcv9abRFVf4hiCP6%2Ff6MBuNw5%2Fae94efZNp%2BOukuZj6K6B1db7xhtVI%2BBOUiPZA4mr2IzdBeqvNNcwc7m8F1no9YjXbsGs9EEGGStLaVgVI4F8dyAhWEd9FWjgR%2FX5qAyQUGCKULOY1aw6651xwmjz8MCCT1r1GOTBindGasVnMxh5Z0JMjDK9aNkKfgFUbVJ8BrGTCIh%2FYx0bsq7yowDIEyp71TRMo%2Bbu%2FDBhIifKpO4VN7AxMup1DPwu2wNCxKQmwS5Se2k%2BwM10kxsnMbhsSH5O0sXx5M%2B5TxBoZB5p9PtUj15fgYQDR12uT0nToulHQz7%2BX6zfLqvSrfsIeBqAAUdgBEBn%2BksEpfpynILn8V8z3O5GaZcm3NmplGe%2F2XtD9%2FbnSWWTEzR1JJ45DnANEEIGzfjd6UvxpIcrk5Ggr0I52UqVdGUhcovTegZXYeBMsXYze8OLsu0UOhtpHsy8nCCJzpNnrwUBZOfUdZtwsCYHC4Bs8BRQ9JORs4ECvUnyIAA%3D' | 'http://deepvision.oss-cn-zhangjiakou.aliyuncs.com/acp/quanjiang/DEMO00001/20240708/video/wander/SXT001__quanjiang__DEMO00001_video_wm_1720400435638.mp4?Expires=1724748181&OSSAccessKeyId=STS.NTwCzwCtwDDYeE7RAhHue5mDb&Signature=qY%2F82lk1K9VJEX95ImeNH9wMHiw%3D&security-token=CAIS0wN1q6Ft5B2yfSjIr5fCCMDDrqtW84ayZ2OGtkE9RPpJ2qjvgDz2IHFMf3huCeodsv8%2BlGxS5%2FgelrpqVpZDR03Na8RHwrly1lv5O9KY4z1YIkL10s%2FLI3OaLjKm9hi7AYygPgK0GJqEb1TDiVUto9%2FTfimjWFqIKICAjYUdAP0cQgi%2Fa0gwZrJRPRAwh8IGEnHTOP2xUHvtmXGCNFd0nQB%2BhGhjk7TdpPeR8R3Dllb35%2FYIroDqWPieYtJrIY10XqWBvqx%2FfbGT1zVLuVoYtvV6gaFc5zbcv9abRFVf4hiCP6%2Ff6MBuNw5%2Fae94efZNp%2BOukuZj6K6B1db7xhtVI%2BBOUiPZA4mr2IzdBeqvNNcwc7m8F1no9YjXbsGs9EEGGStLaVgVI4F8dyAhWEd9FWjgR%2FX5qAyQUGCKULOY1aw6651xwmjz8MCCT1r1GOTBindGasVnMxh5Z0JMjDK9aNkKfgFUbVJ8BrGTCIh%2FYx0bsq7yowDIEyp71TRMo%2Bbu%2FDBhIifKpO4VN7AxMup1DPwu2wNCxKQmwS5Se2k%2BwM10kxsnMbhsSH5O0sXx5M%2B5TxBoZB5p9PtUj15fgYQDR12uT0nToulHQz7%2BX6zfLqvSrfsIeBqAAUdgBEBn%2BksEpfpynILn8V8z3O5GaZcm3NmplGe%2F2XtD9%2FbnSWWTEzR1JJ45DnANEEIGzfjd6UvxpIcrk5Ggr0I52UqVdGUhcovTegZXYeBMsXYze8OLsu0UOhtpHsy8nCCJzpNnrwUBZOfUdZtwsCYHC4Bs8BRQ9JORs4ECvUnyIAA%3D' | ||||
}, 3000) | |||||
}, 1000) | |||||
}, | }, | ||||
close() { | close() { | ||||
this.showVideo = false; | this.showVideo = false; | ||||
@@ -7,95 +7,378 @@ | |||||
</view> --> | </view> --> | ||||
<view class="logo"> | <view class="logo"> | ||||
<!-- #ifdef H5 --> | |||||
<image src="@/static/image/earlyWarning/logo.png" mode="heightFix"></image> | <image src="@/static/image/earlyWarning/logo.png" mode="heightFix"></image> | ||||
<!-- #endif --> | |||||
<!-- #ifdef APP-PLUS || MP-ALIPAY || MP-WEIXIN --> | |||||
<!-- #endif --> | |||||
</view> | |||||
<!-- <view class="selectModel" @click="showSelectModel = true"> | |||||
<view class="modelName"> | |||||
{{modelObj.name}} | |||||
</view> | |||||
<image src="@/static/image/earlyWarning/down.png"></image> | |||||
</view> | </view> | ||||
<u-popup :show="showSelectModel" @close="close" @open="open" mode="bottom"> | |||||
<view class="selectPopupBox"> | |||||
<view class="modelLi" :class="item.id == isActive ? 'active' : ''" @click="modelChange(item)" | |||||
v-for="(item,i) in modelList"> | |||||
{{item.name}} | |||||
</view> | |||||
</view> | |||||
</u-popup> --> | |||||
</view> | </view> | ||||
<view class="contentBox" @touchmove.stop @touch.stop> | <view class="contentBox" @touchmove.stop @touch.stop> | ||||
<warningInfo v-if="isActive == '1'"></warningInfo> | |||||
<inspectionCenter v-else></inspectionCenter> | |||||
</view> | |||||
<view class="warningInfo"> | |||||
<view class="searchBox"> | |||||
<view class="searchLine" @click="openSearch"> | |||||
<view class="searchLabels"> | |||||
<image v-show="isShowSearch==false" src="@/static/image/earlyWarning/screen.png" mode=""> | |||||
</image> | |||||
<image v-show="isShowSearch" src="@/static/image/earlyWarning/screenActive.png" mode=""> | |||||
</image> | |||||
<text class="labels">筛选</text> | |||||
<view class="values">{{searchValue}}</view> | |||||
</view> | |||||
<view class="arrow"> | |||||
<image v-show="isShowSearch==false" src="@/static/image/earlyWarning/arrow1.png" mode=""> | |||||
</image> | |||||
<image v-show="isShowSearch" src="@/static/image/earlyWarning/arrow2.png" mode=""></image> | |||||
</view> | |||||
</view> | |||||
<view @click="isShowSearch=false" class="searchDialog" v-if="isShowSearch"> | |||||
<view class="content" @click.stop="isSelect"> | |||||
<u-row justify="space-between" gutter="10"> | |||||
<u-col span="7"> | |||||
<view class="demo-layout" @click="toOpen"> | |||||
<view class="left-layout"> | |||||
<text>{{searchForm.$alarmType || '预警类型'}}</text> | |||||
</view> | |||||
<view class="right-layout"> | |||||
<image style="width: 30rpx;height:30rpx;" | |||||
src="@/static/image/earlyWarning/arrowRight.png" mode=""></image> | |||||
</view> | |||||
</view> | |||||
</u-col> | |||||
<u-col span="5"> | |||||
<view class="demo-layout" @click="toOpenSelect"> | |||||
<view class="left-layout"> | |||||
<text>{{searchForm.$warnHand || '处理状态'}}</text> | |||||
</view> | |||||
<view class="right-layout"> | |||||
<image style="width: 30rpx;height:30rpx;" | |||||
src="@/static/image/earlyWarning/arrowRight.png" mode=""></image> | |||||
</view> | |||||
</view> | |||||
</u-col> | |||||
</u-row> | |||||
<u-row style="margin-top:10px;" justify="space-between" gutter="10"> | |||||
<u-col span="12"> | |||||
<uni-datetime-picker v-model="searchForm.tick" type="datetimerange"> | |||||
<view class="demo-layout"> | |||||
<view class="startBox"> | |||||
{{searchForm.StartTick || '开始时间'}} | |||||
</view> | |||||
<text>至</text> | |||||
<view class="endBox"> | |||||
{{searchForm.EndTick || '结束时间'}} | |||||
</view> | |||||
<view class="timeIcon"> | |||||
<image style="width: 30rpx;height:30rpx;" | |||||
src="@/static/image/earlyWarning/calendar.png" mode=""></image> | |||||
</view> | |||||
</view> | |||||
</uni-datetime-picker> | |||||
</u-col> | |||||
</u-row> | |||||
<view class="btnBox"> | |||||
<view class="leftBtn" @click="clearform"> | |||||
重置 | |||||
</view> | |||||
<view class="rightBtn" @click="onsubmit"> | |||||
确认 | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<view class="tableBox"> | |||||
<u-empty marginTop="100rpx" :show="false" mode="list" text="暂无数据"></u-empty> | |||||
<!-- <u-pull-refresh :refreshing="refreshing" @refresh="onRefresh"> --> | |||||
<!-- <scroll-view class="scroll-view" scroll-y="true" refresher-enabled="true" | |||||
@refresher-pull="onRefresh" @refresher-refresh="doRefresh" @refresher-restore="restore" | |||||
@refresher-abort="abort"> --> | |||||
<u-list :loading="isLoading" refresher-enabled :refresher-triggered="isTriggered" | |||||
@refresher-pull="onRefresh" @scrolltolower="scrolltolower" style="height: calc(100% - 0rpx);"> | |||||
<u-list-item v-for="(item, index) in warnList" :key="index"> | |||||
<view class="liBox"> | |||||
<view class="headerCard"> | |||||
<view class="schoolName"> | |||||
演示学校 | |||||
</view> | |||||
<view class="statusBox" :class="[item.warnHand == 1?'handle':'nohandle']"> | |||||
{{item.warnHand == 1 ? '已处理' : '未处理'}} | |||||
</view> | |||||
</view> | |||||
<view class="topCard"> | |||||
<view class="pic"> | |||||
<image :src="item.snapshotUrl" mode="aspectFill" | |||||
@click="previewImage(item.snapshotUrl,index)"></image> | |||||
</view> | |||||
<view class="rightCard"> | |||||
<u-row> | |||||
<u-col span="6"> | |||||
<view class="midContent"> | |||||
姓名:-- | |||||
</view> | |||||
</u-col> | |||||
<u-col span="6"> | |||||
<view class="midContent"> | |||||
系部:-- | |||||
</view> | |||||
</u-col> | |||||
</u-row> | |||||
<u-row style="margin-top: 20rpx;"> | |||||
<u-col span="6"> | |||||
<view class="midContent"> | |||||
专业:-- | |||||
</view> | |||||
</u-col> | |||||
<u-col span="6"> | |||||
<view class="midContent"> | |||||
班级:{{item.personSetName || '--'}} | |||||
</view> | |||||
</u-col> | |||||
</u-row> | |||||
</view> | |||||
</view> | |||||
<view class="midCard"> | |||||
<view class="secondCard"> | |||||
<image style="width: 30rpx;height: 30rpx;" | |||||
src="@/static/image/earlyWarning/warnType.png" mode=""></image> | |||||
<view class="txt"> | |||||
预警类型:{{item.alarmTypeDesc || '--'}} | |||||
</view> | |||||
</view> | |||||
<view class="thirdCard"> | |||||
<image style="width: 30rpx;height: 30rpx;" | |||||
src="@/static/image/earlyWarning/warnVideo.png" mode=""></image> | |||||
<view class="txt"> | |||||
预警摄像头:{{item.cameraName || '--'}} | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<view class="btoCard"> | |||||
<view class="btoContent"> | |||||
时间:{{item.tick}} | |||||
</view> | |||||
<view class="rightBox btoBox" @click="toDetail(item)"> | |||||
<view class="txt"> | |||||
查看 | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</u-list-item> | |||||
<u-loadmore :status="status" /> | |||||
</u-list> | |||||
<!-- </scroll-view> --> | |||||
<!-- </u-pull-refresh> --> | |||||
</view> | |||||
<selectSearch ref="selectSearchBox" :cellVisible="false" v-model="searchForm.alarmType" | |||||
:options="warnOption" :title.sync="searchForm.$alarmType" placeholder="预警类型" | |||||
search-placeholder="预警类型" /> | |||||
<selectRadio ref="selectRadioBox" :cellVisible="false" v-model="searchForm.warnHand" | |||||
:options="handOption" :title.sync="searchForm.$warnHand" placeholder="处理状态" /> | |||||
</view> | |||||
</view> | |||||
</view> | </view> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import warningInfo from "./components/warningInfo.vue" | |||||
import inspectionCenter from "./components/inspectionCenter.vue" | |||||
import selectRadio from "@/components/selectRadio.vue" | |||||
import selectSearch from "@/components/selectSearch.vue" | |||||
import { | |||||
page, //获取列表 | |||||
warnType, //获取预警类型 | |||||
} from '@/api/warn/index.js' | |||||
export default { | export default { | ||||
components: { | components: { | ||||
warningInfo, | |||||
inspectionCenter | |||||
selectRadio, | |||||
selectSearch | |||||
}, | }, | ||||
data() { | data() { | ||||
return { | return { | ||||
showSelectModel: false, | |||||
modelObj: { | |||||
name: '预警信息', | |||||
backgroundImg: require(`@/static/image/earlyWarning/warnBack.png`) | |||||
searchValue: '', | |||||
isShowSearch: false, | |||||
isTriggered: true, | |||||
searchForm: { | |||||
alarmType: '', | |||||
$alarmType: '全部', | |||||
warnHand: '', | |||||
$warnHand: '', | |||||
tick: [], | |||||
StartTick: '', | |||||
EndTick: '', | |||||
pageNum: 1, | |||||
pageSize: 10 | |||||
}, | }, | ||||
isActive: '1', | |||||
modelList: [{ | |||||
id: '1', | |||||
name: '预警信息', | |||||
imgUrl: require(`@/static/image/earlyWarning/warnBack.png`) | |||||
warnOption: [], | |||||
handOption: [{ | |||||
label: '已处理', | |||||
value: 1 | |||||
}, | }, | ||||
{ | { | ||||
id: '2', | |||||
name: '巡检中心', | |||||
imgUrl: require(`@/static/image/earlyWarning/majorBack.png`) | |||||
} | |||||
label: '未处理', | |||||
value: 0 | |||||
}, | |||||
], | ], | ||||
warnList: [], | |||||
isLoading: false, | |||||
finished: false, | |||||
refreshing: false, | |||||
status: 'loadmore', //loading正在加载 loadmore加载更多 nomore没有更多了 | |||||
} | } | ||||
}, | }, | ||||
watch: { | |||||
"searchForm.tick"() { | |||||
console.log('日期时间:', this.searchForm.tick); | |||||
if (this.searchForm.tick && this.searchForm.tick.length > 0) { | |||||
this.searchForm.StartTick = this.searchForm.tick[0] | |||||
this.searchForm.EndTick = this.searchForm.tick[1] | |||||
} | |||||
}, | |||||
}, | |||||
onLoad() { | |||||
// 获取预警类型 | |||||
this.getWarnTypeList() | |||||
// 隐藏导航栏 | |||||
this.loadmore() | |||||
}, | |||||
methods: { | methods: { | ||||
open() { | |||||
// console.log('open'); | |||||
onRefresh() { | |||||
// this.refreshing = true; | |||||
console.log('下拉刷新') | |||||
}, | |||||
// 执行刷新操作 | |||||
doRefresh() { | |||||
console.log('正在刷新...'); | |||||
// 这里执行刷新数据的逻辑 | |||||
this.searchForm.pageNum = 1; | |||||
this.warnList = []; | |||||
this.loadmore() | |||||
setTimeout(() => { | |||||
// 刷新数据完成后,调用restore或abort方法结束刷新状态 | |||||
this.restore(); | |||||
}, 2000); | |||||
}, | |||||
// 刷新结束,恢复scroll-view | |||||
restore() { | |||||
console.log('刷新结束'); | |||||
}, | }, | ||||
close() { | |||||
this.showSelectModel = false; | |||||
// console.log('close'); | |||||
// 刷新结束,取消scroll-view的刷新状态 | |||||
abort() { | |||||
console.log('取消刷新'); | |||||
}, | }, | ||||
// 切换模块 | |||||
modelChange(item) { | |||||
console.log(item) | |||||
this.modelObj.name = item.name; | |||||
this.modelObj.backgroundImg = item.imgUrl; | |||||
this.isActive = item.id; | |||||
this.showSelectModel = false; | |||||
// switch (item.id) { | |||||
// case '1': | |||||
// break; | |||||
// case '2': | |||||
// break; | |||||
// default: | |||||
// break; | |||||
// } | |||||
// 预览图片 | |||||
previewImage(url, index) { | |||||
// 使用uni.previewImage API 进行图片预览 | |||||
uni.previewImage({ | |||||
current: index, // 当前显示图片索引 | |||||
urls: [url] // 需要预览的图片链接列表 | |||||
}); | |||||
}, | }, | ||||
clearform() { | |||||
this.searchForm = { | |||||
alarmType: '', | |||||
$alarmType: '全部', | |||||
warnHand: '', | |||||
$warnHand: '', | |||||
tick: [], | |||||
StartTick: '', | |||||
EndTick: '', | |||||
pageNum: 1, | |||||
pageSize: 10 | |||||
} | |||||
// this.isShowSearch = false; | |||||
}, | |||||
onsubmit() { | |||||
let arr = [] | |||||
for (let key in this.searchForm) { | |||||
if (['$alarmType', '$warnHand', 'StartTick', 'EndTick'].includes(key)) { | |||||
if (Object.hasOwnProperty.call(this.searchForm, key) && this.searchForm[key]) { | |||||
arr.push(this.searchForm[key]) | |||||
} | |||||
} | |||||
} | |||||
this.searchValue = arr.join(','); | |||||
this.isShowSearch = false; | |||||
this.status = 'loadmore' | |||||
this.searchForm.pageNum = 1; | |||||
this.warnList = [] | |||||
this.loadmore() | |||||
}, | |||||
// 获取预警类型 | |||||
getWarnTypeList() { | |||||
warnType({}).then(res => { | |||||
let { | |||||
code, | |||||
data | |||||
} = res; | |||||
if (code == 200) { | |||||
this.warnOption = data.map(item => { | |||||
return { | |||||
label: item.name, | |||||
value: item.code | |||||
}; | |||||
}) | |||||
this.warnOption.unshift({ | |||||
label: '全部', | |||||
value: '' | |||||
}) | |||||
} | |||||
}); | |||||
}, | |||||
// 跳转详情页面 | |||||
toDetail(row) { | |||||
uni.navigateTo({ | |||||
url: '/pages/earlyWarning/detail?id=' + row.id | |||||
}); | |||||
}, | |||||
// 预警类型弹框筛选 | |||||
toOpen() { | |||||
this.$refs.selectSearchBox.show = true; | |||||
}, | |||||
// 处理情况筛选 | |||||
toOpenSelect() { | |||||
this.$refs.selectRadioBox.show = true; | |||||
}, | |||||
// 打开筛选框 | |||||
openSearch() { | |||||
this.isShowSearch = !this.isShowSearch; | |||||
}, | |||||
isSelect() { | |||||
}, | |||||
scrolltolower() { | |||||
if (this.status == 'loading' || this.status == 'nomore') { | |||||
return; | |||||
} | |||||
this.searchForm.pageNum += 1; | |||||
this.loadmore() | |||||
}, | |||||
loadmore() { | |||||
if (this.status != 'loadmore') return | |||||
this.status = 'loading' | |||||
this.isLoading = true; | |||||
delete this.searchForm.tick | |||||
page(this.searchForm).then(res => { | |||||
if (res?.code === 200) { | |||||
this.warnList = [...this.warnList, ...res?.data?.list]; | |||||
this.isLoading = false; | |||||
// 获取到的总条数>=接口总条数 | |||||
if (this.warnList.length >= res.data.total) { | |||||
this.status = 'nomore' | |||||
} else { | |||||
this.status = 'loadmore' | |||||
} | |||||
} | |||||
}) | |||||
} | |||||
} | } | ||||
} | } | ||||
</script> | </script> | ||||
@@ -108,7 +391,7 @@ | |||||
/*#ifdef H5*/ | /*#ifdef H5*/ | ||||
height: 272rpx; | height: 272rpx; | ||||
background: url("@/static/image/earlyWarning/back2.png") no-repeat center center / cover; | background: url("@/static/image/earlyWarning/back2.png") no-repeat center center / cover; | ||||
/*#endif*/ | /*#endif*/ | ||||
/*#ifdef APP-PLUS || MP-ALIPAY || MP-WEIXIN*/ | /*#ifdef APP-PLUS || MP-ALIPAY || MP-WEIXIN*/ | ||||
height: 340rpx; | height: 340rpx; | ||||
@@ -152,7 +435,310 @@ | |||||
/*#endif*/ | /*#endif*/ | ||||
/*#ifdef APP-PLUS || MP-ALIPAY || MP-WEIXIN*/ | /*#ifdef APP-PLUS || MP-ALIPAY || MP-WEIXIN*/ | ||||
height: calc(100% - 375rpx); | height: calc(100% - 375rpx); | ||||
/*#endif*/ | /*#endif*/ | ||||
.warningInfo { | |||||
width: 100%; | |||||
height: 100%; | |||||
background: #F6F8FA; | |||||
.u-modal__title { | |||||
color: #000000; | |||||
} | |||||
} | |||||
.searchBox { | |||||
// height: calc(100% - 360rpx); | |||||
position: relative; | |||||
.searchLine { | |||||
height: 88rpx; | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: space-between; | |||||
padding: 0 15px; | |||||
box-sizing: border-box; | |||||
background: #fff; | |||||
font-size: 28rpx; | |||||
.searchLabels { | |||||
display: flex; | |||||
align-items: center; | |||||
width: calc(100% - 34rpx); | |||||
image { | |||||
width: 40rpx; | |||||
height: 40rpx; | |||||
flex-shrink: 1; | |||||
} | |||||
.labels { | |||||
width: 70rpx; | |||||
display: block; | |||||
color: #333333; | |||||
margin-left: 10rpx; | |||||
flex-shrink: 1; | |||||
} | |||||
.values { | |||||
width: calc(100% - 40rpx - 50rpx); | |||||
color: #2388FF; | |||||
font-weight: 700; | |||||
margin-left: 18rpx; | |||||
overflow: hidden; | |||||
word-wrap: break-word; | |||||
white-space: pre-wrap; | |||||
display: -webkit-box; | |||||
-webkit-box-orient: vertical; | |||||
-webkit-line-clamp: 1; | |||||
} | |||||
} | |||||
.arrow { | |||||
// text-align: right; | |||||
// flex-shrink: 1; | |||||
image { | |||||
width: 34rpx; | |||||
height: 34rpx; | |||||
} | |||||
} | |||||
.leftSearchBox { | |||||
display: flex; | |||||
align-items: center; | |||||
width: calc(100% - 40px); | |||||
.searchLabel { | |||||
flex-shrink: 1; | |||||
color: #333333; | |||||
width: 80px; | |||||
} | |||||
.searchValue { | |||||
width: calc(100% - 60px); | |||||
margin-left: 10px; | |||||
color: #2388FF; | |||||
overflow: hidden; | |||||
word-wrap: break-word; | |||||
white-space: pre-wrap; | |||||
display: -webkit-box; | |||||
-webkit-box-orient: vertical; | |||||
-webkit-line-clamp: 1; | |||||
} | |||||
} | |||||
} | |||||
.searchDialog { | |||||
position: absolute; | |||||
z-index: 990; | |||||
top: 89rpx; | |||||
width: 100%; | |||||
height: calc(100vh - 375rpx - 60rpx); | |||||
font-size: 26rpx; | |||||
background: rgba(0, 0, 0, 0.2); | |||||
.content { | |||||
background: #FFFFFF; | |||||
padding: 15px; | |||||
box-sizing: border-box; | |||||
border-top: 1px solid rgba(0, 0, 0, 0.1); | |||||
.demo-layout { | |||||
height: 80rpx; | |||||
border-radius: 8rpx; | |||||
background: #F5F5F5; | |||||
display: flex; | |||||
justify-content: space-between; | |||||
align-items: center; | |||||
padding: 0 10px; | |||||
box-sizing: border-box; | |||||
.left-layout { | |||||
color: #777777; | |||||
} | |||||
.right-layout {} | |||||
.startBox { | |||||
color: #777777; | |||||
} | |||||
text { | |||||
color: #777777; | |||||
} | |||||
.endBox { | |||||
color: #777777; | |||||
} | |||||
.timeIcon {} | |||||
} | |||||
} | |||||
.btnBox { | |||||
display: flex; | |||||
align-items: center; | |||||
margin-top: 15px; | |||||
.leftBtn { | |||||
width: 50%; | |||||
height: 74rpx; | |||||
line-height: 74rpx; | |||||
border: 1px solid #ccc; | |||||
border-radius: 12rpx; | |||||
color: #333333; | |||||
text-align: center; | |||||
} | |||||
.rightBtn { | |||||
width: 50%; | |||||
height: 74rpx; | |||||
line-height: 74rpx; | |||||
border: 1px solid #2388FF; | |||||
border-radius: 12rpx; | |||||
color: #fff; | |||||
text-align: center; | |||||
background: #2388FF; | |||||
margin-left: 15rpx; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
.tableBox { | |||||
height: 100%; | |||||
padding: 30rpx; | |||||
box-sizing: border-box; | |||||
// height: 600px; | |||||
padding-bottom: 30px; | |||||
.liBox { | |||||
background: #fff; | |||||
padding: 0 30rpx; | |||||
box-sizing: border-box; | |||||
border-radius: 20rpx; | |||||
margin-bottom: 30rpx; | |||||
font-family: 'PingFang SC'; | |||||
.headerCard { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
align-items: center; | |||||
padding: 24rpx 0; | |||||
.schoolName { | |||||
font-size: 32rpx; | |||||
font-weight: 700; | |||||
font-family: 'PingFang SC'; | |||||
color: #333333; | |||||
overflow: hidden; | |||||
word-wrap: break-word; | |||||
white-space: pre-wrap; | |||||
// font-size: 14px; | |||||
display: -webkit-box; | |||||
-webkit-box-orient: vertical; | |||||
-webkit-line-clamp: 1; | |||||
} | |||||
.statusBox { | |||||
width: 100rpx; | |||||
flex-shrink: 1; | |||||
text-align: center; | |||||
font-size: 24rpx; | |||||
border-radius: 8rpx; | |||||
color: #fff; | |||||
padding: 8rpx 12rpx; | |||||
font-family: 'PingFang SC'; | |||||
} | |||||
.handle { | |||||
background: rgba(15, 175, 118, 0.1); | |||||
color: #0FAF76; | |||||
} | |||||
.nohandle { | |||||
background: rgba(239, 45, 45, 0.1); | |||||
color: rgba(239, 45, 45, 1); | |||||
} | |||||
} | |||||
.topCard { | |||||
display: flex; | |||||
border-top: 1px solid rgba(0, 0, 0, 0.1); | |||||
align-items: center; | |||||
padding: 20rpx 0; | |||||
.pic { | |||||
width: 120rpx; | |||||
height: 120rpx; | |||||
image { | |||||
width: 120rpx; | |||||
height: 120rpx; | |||||
border-radius: 4px; | |||||
} | |||||
} | |||||
.rightCard { | |||||
margin-left: 20rpx; | |||||
font-size: 26rpx; | |||||
font-family: 'PingFang SC'; | |||||
width: calc(100% - 140rpx); | |||||
} | |||||
} | |||||
.midCard { | |||||
font-size: 26rpx; | |||||
.secondCard, | |||||
.thirdCard { | |||||
display: flex; | |||||
align-items: center; | |||||
.txt { | |||||
font-size: 26rpx; | |||||
font-family: 'PingFang SC'; | |||||
margin-left: 10rpx; | |||||
color: #333333; | |||||
} | |||||
} | |||||
.thirdCard { | |||||
margin-top: 18rpx; | |||||
} | |||||
} | |||||
.btoCard { | |||||
border-top: 1px solid rgba(0, 0, 0, 0.1); | |||||
margin-top: 20rpx; | |||||
padding: 20rpx 0; | |||||
display: flex; | |||||
justify-content: space-between; | |||||
align-items: center; | |||||
font-size: 26rpx; | |||||
font-family: 'PingFang SC'; | |||||
.rightBox { | |||||
.txt { | |||||
width: 120rpx; | |||||
height: 60rpx; | |||||
line-height: 60rpx; | |||||
font-family: 'PingFang SC'; | |||||
text-align: center; | |||||
background: #2388FF; | |||||
color: #fff; | |||||
border-radius: 80rpx; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} | } | ||||
} | } | ||||
</style> | </style> |
@@ -1,64 +0,0 @@ | |||||
<template> | |||||
<view class="processingResults"> | |||||
<view class="tips" v-if="callBackType == 'success'"> | |||||
<image class="auto" src="@/static/image/earlyWarning/success.png" mode=""></image> | |||||
<view class="title auto"> | |||||
提交成功 | |||||
</view> | |||||
<u-button class="auto" style="width: 60%" shape="circle" type="primary" @click="back">知道了</u-button> | |||||
</view> | |||||
<view class="tips" v-else> | |||||
<image class="auto" src="@/static/image/earlyWarning/falid.png" mode=""></image> | |||||
<view class="title auto"> | |||||
提交失败 | |||||
</view> | |||||
<u-button class="auto" style="width: 60%" shape="circle" type="primary" @click="back">重新提交</u-button> | |||||
</view> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
data() { | |||||
return { | |||||
callBackType: 'success' | |||||
} | |||||
}, | |||||
methods: { | |||||
back() { | |||||
uni.switchTab({ | |||||
url: '/pages/earlyWarning/index' | |||||
}); | |||||
} | |||||
} | |||||
} | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
.processingResults { | |||||
width: 100%; | |||||
height: 100%; | |||||
background: #fff; | |||||
.tips { | |||||
width: 100%; | |||||
text-align: center; | |||||
margin-top: 200rpx; | |||||
image { | |||||
width: 300rpx; | |||||
height: 268rpx; | |||||
margin: 0 auto; | |||||
} | |||||
.auto { | |||||
margin: 0 auto; | |||||
} | |||||
.title { | |||||
text-align: center; | |||||
color: #333333; | |||||
font-weight: 700; | |||||
margin: 20rpx 0 120rpx 0; | |||||
} | |||||
} | |||||
} | |||||
</style> |
@@ -16,7 +16,7 @@ | |||||
<image v-show="isShowSearch" src="@/static/image/earlyWarning/group2.png" mode=""> | <image v-show="isShowSearch" src="@/static/image/earlyWarning/group2.png" mode=""> | ||||
</image> | </image> | ||||
<text class="labels">选择分组</text> | <text class="labels">选择分组</text> | ||||
<view class="values">一号楼/厨房</view> | |||||
<view class="values">{{this.searchForm.groupName}}</view> | |||||
</view> | </view> | ||||
<view class="arrow"> | <view class="arrow"> | ||||
@@ -51,7 +51,7 @@ | |||||
</view> | </view> | ||||
</u-col> | </u-col> | ||||
</u-row> | </u-row> | ||||
<view class="btnBox"> | <view class="btnBox"> | ||||
<view class="leftBtn" @click="clearform"> | <view class="leftBtn" @click="clearform"> | ||||
重置 | 重置 | ||||
@@ -66,31 +66,31 @@ | |||||
<view class="tableBox"> | <view class="tableBox"> | ||||
<u-empty marginTop="100rpx" :show="false" mode="list" text="暂无数据"></u-empty> | <u-empty marginTop="100rpx" :show="false" mode="list" text="暂无数据"></u-empty> | ||||
<u-list @scrolltolower="scrolltolower" style="height: calc(100% - 0rpx);"> | <u-list @scrolltolower="scrolltolower" style="height: calc(100% - 0rpx);"> | ||||
<u-list-item v-for="(item, index) in warnList" :key="index"> | |||||
<u-list-item v-for="(item, index) in monitorList" :key="index"> | |||||
<view class="liBox"> | <view class="liBox"> | ||||
<view class="topCard"> | <view class="topCard"> | ||||
<view class="pic"> | <view class="pic"> | ||||
<image src="@/static/image/earlyWarning/warnBack.png" mode="aspectFill"></image> | |||||
<image :src="item.snapshotUrl" mode="aspectFill"></image> | |||||
<view class="resolvingPower"> | <view class="resolvingPower"> | ||||
2560*1440 | |||||
{{item.resWidth}}*{{item.resHeight}} | |||||
</view> | </view> | ||||
</view> | </view> | ||||
<view class="rightCard"> | <view class="rightCard"> | ||||
<view class="firstCard"> | <view class="firstCard"> | ||||
<view class="schoolName"> | <view class="schoolName"> | ||||
摄像头ID:SXT001 | |||||
摄像头ID:{{item.sensorId}} | |||||
</view> | </view> | ||||
</view> | </view> | ||||
<view class="secondCard"> | <view class="secondCard"> | ||||
<view class="txt"> | <view class="txt"> | ||||
摄像头名称:厨房(良景) | |||||
摄像头名称:{{item.sensorName}} | |||||
</view> | </view> | ||||
</view> | </view> | ||||
<view class="thirdCard"> | <view class="thirdCard"> | ||||
<view class="txt"> | <view class="txt"> | ||||
设备IP:192.168.10.130 | |||||
设备IP:{{item.directUrlIp}} | |||||
</view> | </view> | ||||
</view> | </view> | ||||
</view> | </view> | ||||
@@ -103,7 +103,7 @@ | |||||
所属学校:演示学校 | 所属学校:演示学校 | ||||
</view> | </view> | ||||
</view> | </view> | ||||
<view class="rightBox btoBox" @click="deleteClick(item)"> | |||||
<view class="rightBox btoBox" @click="startClick(item.sensorId)"> | |||||
<view class="txt"> | <view class="txt"> | ||||
播放 | 播放 | ||||
</view> | </view> | ||||
@@ -132,6 +132,12 @@ | |||||
<script> | <script> | ||||
import tkiTree from '@/components/tki-tree/tki-tree.vue'; | import tkiTree from '@/components/tki-tree/tki-tree.vue'; | ||||
import { | |||||
groupList, //获取摄像头分组 | |||||
list, //获取摄像头列表 | |||||
startUrl, //说去视频地址 | |||||
stopUrl //停止视频流获取 | |||||
} from '@/api/monitor/index.js' | |||||
export default { | export default { | ||||
components: { | components: { | ||||
tkiTree | tkiTree | ||||
@@ -148,124 +154,51 @@ | |||||
videoTitle: '', | videoTitle: '', | ||||
isShowSearch: false, | isShowSearch: false, | ||||
searchForm: { | searchForm: { | ||||
alarmType: '警告类型', | |||||
warnHand: '处理状态', | |||||
tick: [], | |||||
StartTick: '开始时间', | |||||
EndTick: '结束时间', | |||||
groupId: '', | |||||
pageNum: 1, | |||||
pageSize: 10 | |||||
}, | }, | ||||
warnList: [{ | |||||
warnHand: 1 | |||||
}, { | |||||
warnHand: 0 | |||||
}, { | |||||
warnHand: 1 | |||||
}, { | |||||
warnHand: 1 | |||||
}, { | |||||
warnHand: 1 | |||||
}, {}, {}, {}, {}, ], | |||||
monitorList: [], | |||||
isLoading: false, | isLoading: false, | ||||
status: 'loadmore', //loading正在加载 loadmore加载更多 nomore没有更多了 | status: 'loadmore', //loading正在加载 loadmore加载更多 nomore没有更多了 | ||||
listc: [{ | |||||
code: 1, | |||||
name: 'dasda' | |||||
}, { | |||||
code: 2, | |||||
name: 'dasda' | |||||
}, | |||||
{ | |||||
code: 3, | |||||
name: 'dasda' | |||||
}, | |||||
{ | |||||
code: 4, | |||||
name: 'dasda' | |||||
}, | |||||
{ | |||||
code: 5, | |||||
name: 'dasda' | |||||
}, | |||||
{ | |||||
code: 6, | |||||
name: 'dasda' | |||||
}, | |||||
{ | |||||
code: 7, | |||||
name: 'dasda' | |||||
}, | |||||
{ | |||||
code: 8, | |||||
name: 'dasda' | |||||
}, | |||||
{ | |||||
code: 9, | |||||
name: 'dasda' | |||||
}, | |||||
{ | |||||
code: 10, | |||||
name: 'dasda' | |||||
}, | |||||
{ | |||||
code: 11, | |||||
name: 'dasda' | |||||
}, | |||||
{ | |||||
code: 12, | |||||
name: 'dasda' | |||||
}, | |||||
{ | |||||
code: 13, | |||||
name: '你好' | |||||
} | |||||
], | |||||
treelist: [{ | |||||
name: '111', | |||||
value: '1', | |||||
children: [{ | |||||
name: '111', | |||||
value: '2', | |||||
}] | |||||
}], | |||||
treelist: [], | |||||
multiple: false, //是否多选 | multiple: false, //是否多选 | ||||
selectParent: true, //父级可选择 | selectParent: true, //父级可选择 | ||||
flod: false, //折叠 | flod: false, //折叠 | ||||
player: null | |||||
player: null, | |||||
sensorId: '', | |||||
videoUrl: '', | |||||
streamId: '', | |||||
videoToken: '', | |||||
} | } | ||||
}, | }, | ||||
watch: { | watch: { | ||||
"searchForm.tick"() { | |||||
console.log('日期时间:', this.searchForm.tick); | |||||
if (this.searchForm.tick && this.searchForm.tick.length > 0) { | |||||
this.searchForm.StartTick = this.searchForm.tick[0] | |||||
this.searchForm.EndTick = this.searchForm.tick[1] | |||||
} | |||||
}, | |||||
}, | }, | ||||
mounted() { | mounted() { | ||||
}, | }, | ||||
onLoad() { | onLoad() { | ||||
// 隐藏导航栏 | |||||
this.getGroupList() | |||||
// 获取列表数据 | |||||
this.loadmore() | this.loadmore() | ||||
}, | }, | ||||
methods: { | methods: { | ||||
setVideo() { | setVideo() { | ||||
this.loadWebPlayerSDK().then(() => { | this.loadWebPlayerSDK().then(() => { | ||||
// 如果需要使用自定义组件,打开以下注释 | // 如果需要使用自定义组件,打开以下注释 | ||||
// this.loadComponent().then(() => { | // this.loadComponent().then(() => { | ||||
this.player = new Aliplayer({ | this.player = new Aliplayer({ | ||||
id: "url-player-test", | id: "url-player-test", | ||||
source: "artc://rts-pull-live.deepeleph.com/quanjiang_DEMO00001/SXT003-0?auth_key=1724987674-0-0-df36ae3670785249c50e05cdb93e28ea&aliyun_uuid=286f58e41cc04c0393434b6856f29d07", | |||||
source: this.videoUrl + "&subaudio=no&jitterbuffer=6000", | |||||
width: "100%", | width: "100%", | ||||
height: "100%", | height: "100%", | ||||
isLive: true, | isLive: true, | ||||
rtsFallback: true, | rtsFallback: true, | ||||
rtsFallbackType: 'HLS', | rtsFallbackType: 'HLS', | ||||
}, function(player) { | }, function(player) { | ||||
player.mute() | |||||
// player.mute() | |||||
}); | }); | ||||
this.player.one('canplay', function() { | this.player.one('canplay', function() { | ||||
@@ -281,8 +214,19 @@ | |||||
}); | }); | ||||
}, | }, | ||||
closeDialog() { | closeDialog() { | ||||
this.player.dispose(); | |||||
if (this.player) { | |||||
this.player.dispose(); | |||||
} | |||||
this.showVideo = false; | this.showVideo = false; | ||||
let params = { | |||||
sensorId: this.sensorId, | |||||
streamId: this.streamId, | |||||
videoToken: this.videoToken | |||||
}; | |||||
stopUrl(params).then(res => { | |||||
}) | |||||
}, | }, | ||||
loadWebPlayerSDK() { | loadWebPlayerSDK() { | ||||
return new Promise((resolve, reject) => { | return new Promise((resolve, reject) => { | ||||
@@ -319,9 +263,6 @@ | |||||
}); | }); | ||||
}, | }, | ||||
addAttribute(data) { // tree结构递归添加属性 | addAttribute(data) { // tree结构递归添加属性 | ||||
for (var i = 0; i < data.length; i++) { | for (var i = 0; i < data.length; i++) { | ||||
data[i].isShow = false | data[i].isShow = false | ||||
@@ -334,8 +275,12 @@ | |||||
}, | }, | ||||
// 确定回调事件 | // 确定回调事件 | ||||
treeConfirm(e) { | treeConfirm(e) { | ||||
// this.form.groupName = e[0].name | |||||
// this.form.groupId = e[0].id | |||||
this.searchForm.groupName = e[0].name; | |||||
this.searchForm.groupId = e[0].id; | |||||
this.status = 'loadmore' | |||||
this.searchForm.pageNum = 1; | |||||
this.monitorList = [] | |||||
this.loadmore() | |||||
}, | }, | ||||
// 取消回调事件 | // 取消回调事件 | ||||
treeCancel(e) { | treeCancel(e) { | ||||
@@ -346,63 +291,68 @@ | |||||
this.$refs.tkitree._show(); | this.$refs.tkitree._show(); | ||||
}, | }, | ||||
cancelVideo() { | cancelVideo() { | ||||
console.log(11111) | |||||
this.showVideo = false; | this.showVideo = false; | ||||
}, | }, | ||||
deleteClick() { | |||||
getGroupList() { | |||||
groupList({}).then((res) => { | |||||
if (res.code == 200) { | |||||
this.treelist = [...[{id: "",name: "全部"}], ...res.data]; | |||||
} | |||||
}); | |||||
}, | |||||
// 获取视频地址 | |||||
startClick(id) { | |||||
this.sensorId = id; | |||||
this.showVideo = true; | this.showVideo = true; | ||||
this.setVideo() | |||||
startUrl({ | |||||
sensorId: id | |||||
}).then(res => { | |||||
let { | |||||
code, | |||||
data | |||||
} = res; | |||||
if (code == 200) { | |||||
this.videoUrl = data.rtsPullStreamUrls[0].url; | |||||
this.streamId = data.streamId; | |||||
this.videoToken = data.videoToken; | |||||
this.setVideo() | |||||
} | |||||
}) | |||||
}, | }, | ||||
confirmVideo() { | confirmVideo() { | ||||
this.showVideo = false; | this.showVideo = false; | ||||
}, | }, | ||||
// 跳转处理页面 | |||||
toHandle(row) { | |||||
if (row.warnHand == 1) { | |||||
uni.navigateTo({ | |||||
url: '/pages/earlyWarning/handlingSuggestions' | |||||
}); | |||||
} | |||||
}, | |||||
// 跳转详情页面 | |||||
toDetail(row) { | |||||
uni.navigateTo({ | |||||
url: '/pages/earlyWarning/detail' | |||||
}); | |||||
}, | |||||
// 预警类型弹框筛选 | |||||
toOpen() { | |||||
this.$refs.selectSearchBox.show = true; | |||||
}, | |||||
// 处理情况筛选 | |||||
toOpenSelect() { | |||||
this.$refs.selectRadioBox.show = true; | |||||
}, | |||||
// 打开筛选框 | |||||
openSearch() { | |||||
this.isShowSearch = !this.isShowSearch; | |||||
}, | |||||
isSelect() { | isSelect() { | ||||
}, | }, | ||||
scrolltolower() { | scrolltolower() { | ||||
if (this.status == 'loading' || this.status == 'nomore') { | |||||
return; | |||||
} | |||||
this.searchForm.pageNum += 1; | |||||
this.loadmore() | this.loadmore() | ||||
}, | }, | ||||
loadmore() { | loadmore() { | ||||
if (this.status != 'loadmore') return | if (this.status != 'loadmore') return | ||||
this.status = 'loading' | this.status = 'loading' | ||||
setTimeout(() => { | |||||
for (let i = 0; i < 1; i++) { | |||||
this.warnList.push({}, {}) | |||||
} | |||||
// 获取到的总条数>=接口总条数 | |||||
if (this.warnList.length >= 14) { | |||||
this.status = 'nomore' | |||||
} else { | |||||
this.status = 'loadmore' | |||||
this.isLoading = true; | |||||
list(this.searchForm).then(res => { | |||||
if (res?.code === 200) { | |||||
this.monitorList = [...this.monitorList, ...res?.data?.list]; | |||||
this.isLoading = false; | |||||
// 获取到的总条数>=接口总条数 | |||||
if (this.monitorList.length >= res.data.total) { | |||||
this.status = 'nomore' | |||||
} else { | |||||
this.status = 'loadmore' | |||||
} | |||||
} | } | ||||
}, 2000) | |||||
}) | |||||
} | } | ||||
} | } | ||||
} | } | ||||
@@ -442,6 +392,7 @@ | |||||
// z-index: 1000000; | // z-index: 1000000; | ||||
width: 100%; | width: 100%; | ||||
height: 500rpx; | height: 500rpx; | ||||
background: #000; | |||||
// margin: 50rpx auto; | // margin: 50rpx auto; | ||||
} | } | ||||