bjquanjiang
/
pinganxiaoyuan
1
0
Bifurcation 0
Code Tickets 0 Demandes d'ajout 0 Versions 0 Wiki Activité
Parcourir la source

接口调试完成

master
wwp il y a 2 mois
Parent
fccd0fbbd3
révision
91be21da81
9 fichiers modifiés avec 820 ajouts et 1631 suppressions
Vue séparée
Option de Diff
Voir les Statistiques Télécharger le Fichier Patch Télécharger le Fichier des Différences
  1. +9
    -1
      monitorMobile/api/monitor/index.js
  2. +23
    -16
      monitorMobile/manifest.json
  3. +0
    -6
      monitorMobile/pages.json
  4. +0
    -624
      monitorMobile/pages/earlyWarning/components/inspectionCenter.vue
  5. +0
    -696
      monitorMobile/pages/earlyWarning/components/warningInfo.vue
  6. +45
    -18
      monitorMobile/pages/earlyWarning/detail.vue
  7. +650
    -64
      monitorMobile/pages/earlyWarning/index.vue
  8. +0
    -64
      monitorMobile/pages/earlyWarning/processingResults.vue
  9. +93
    -142
      monitorMobile/pages/monitor/index.vue

+ 9
- 1
monitorMobile/api/monitor/index.js Voir le fichier

@@ -15,6 +15,14 @@ export const list = (params) => {
params
})
}
// 获取视频地址
export const startUrl = (params) => {
return http.request({
url: '/api/business/deviceApi/getStartVideoLive',
method: 'get',
params
})
}
// 停止视频流获取
export const stopUrl = (params) => {
return http.request({
@@ -22,4 +30,4 @@ export const stopUrl = (params) => {
method: 'get',
params
})
}
}

+ 23
- 16
monitorMobile/manifest.json Voir le fichier

@@ -1,6 +1,6 @@
{
"name" : "monitorMobile",
"appid" : "",
"appid" : "__UNI__F9792E9",
"description" : "",
"versionName" : "1.0.0",
"versionCode" : "100",
@@ -65,21 +65,28 @@
"mp-toutiao" : {
"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" : {
"enable" : false
},


+ 0
- 6
monitorMobile/pages.json Voir le fichier

@@ -114,12 +114,6 @@
"navigationBarTitleText": "处理意见"
}
},
{
"path": "pages/earlyWarning/processingResults",
"style": {
"navigationBarTitleText": "处理结果"
}
},
// 我的
{
"path": "pages/my/index",


+ 0
- 624
monitorMobile/pages/earlyWarning/components/inspectionCenter.vue Voir le fichier

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

+ 0
- 696
monitorMobile/pages/earlyWarning/components/warningInfo.vue Voir le fichier

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

+ 45
- 18
monitorMobile/pages/earlyWarning/detail.vue Voir le fichier

@@ -1,9 +1,9 @@
<template>
<view class="warningDetail">
<view class="title cli">
周界入侵-2024-08-20 18:01:41
{{detailData.alarmTypeDesc ? detailData.alarmTypeDesc + '-' + detailData.tick : ''}}
</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="labelBox">
所属学校：
@@ -17,31 +17,39 @@
班级：
</view>
<view class="valueBox">
班级
--
</view>
</view>
<view class="cli">
<view class="labelBox">
告警摄像头：
姓名：
</view>
<view class="valueBox">
摄像头
{{ detailData.personName || "--" }}
</view>
</view>
<view class="cli">
<view class="labelBox">
告警类型：
预警摄像头：
</view>
<view class="valueBox">
类型
{{ detailData.cameraName || "--" }}
</view>
</view>
<view class="cli">
<view class="labelBox">
告警时间：
预警类型：
</view>
<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 class="cli">
@@ -49,8 +57,8 @@
复核视频：
</view>
<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 class="cli2">
@@ -58,7 +66,7 @@
备注信息：
</view>
<view class="valueBox">
暂无数据
{{ detailData.extend || '--' }}
</view>
</view>

@@ -67,7 +75,7 @@
处理意见：
</view>
<view class="valueBox">
暂无数据
{{ detailData.remark || '--' }}
</view>
</view>
<u-popup :show="showVideo" :closeable="true" @close="close" @open="open" mode="center">
@@ -78,7 +86,7 @@
<view class="poupBox">
<view style="width: 750rpx;height: 400rpx;">
<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"
@ratechange="onRateChange" @fullscreenchange="onFullscreenChange" />
</view>
@@ -89,6 +97,10 @@

<script>
import DomVideoPlayer from '@/components/DomVideoPlayer/DomVideoPlayer.vue'
import {
detail, //详情
warnType, //获取预警类型
} from '@/api/warn/index.js'
// 将xx秒转为 xx:xx 分秒格式
const formatSec2Time = (time) => {
const min = Math.floor(time / 60)
@@ -101,10 +113,10 @@
},
data() {
return {
value1: '',
detailData: {},
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',
playing: false,
loop: false,
@@ -129,16 +141,31 @@
// return `${curr} / ${dur}`
// },
},
onLoad(options) {
console.log(options)
if(options.id) {
this.id = options.id;
}
this.getInfo();
},
methods: {
seeVideo() {
getInfo() {
detail({ id: this.id }).then(res=>{
if(res.code == 200) {
this.detailData = res.data;
}
})
},
seeVideo(url) {
this.showVideo = true;
this.urlsrc = url;
},
open() {
// console.log('open');
setTimeout(() => {
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'
}, 3000)
}, 1000)
},
close() {
this.showVideo = false;


+ 650
- 64
monitorMobile/pages/earlyWarning/index.vue Voir le fichier

@@ -7,95 +7,378 @@
</view> -->

<view class="logo">
<!-- #ifdef H5 -->
<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>
<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 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>
</template>

<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 {
components: {
warningInfo,
inspectionCenter
selectRadio,
selectSearch
},
data() {
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: {
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>
@@ -108,7 +391,7 @@
/*#ifdef H5*/
height: 272rpx;
background: url("@/static/image/earlyWarning/back2.png") no-repeat center center / cover;
/*#endif*/
/*#ifdef APP-PLUS || MP-ALIPAY || MP-WEIXIN*/
height: 340rpx;
@@ -152,7 +435,310 @@
/*#endif*/
/*#ifdef APP-PLUS || MP-ALIPAY || MP-WEIXIN*/
height: calc(100% - 375rpx);

/*#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>

+ 0
- 64
monitorMobile/pages/earlyWarning/processingResults.vue Voir le fichier

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

+ 93
- 142
monitorMobile/pages/monitor/index.vue Voir le fichier

@@ -16,7 +16,7 @@
<image v-show="isShowSearch" src="@/static/image/earlyWarning/group2.png" mode="">
</image>
<text class="labels">选择分组</text>
<view class="values">一号楼/厨房</view>
<view class="values">{{this.searchForm.groupName}}</view>
</view>

<view class="arrow">
@@ -51,7 +51,7 @@
</view>
</u-col>
</u-row>
<view class="btnBox">
<view class="leftBtn" @click="clearform">
重置
@@ -66,31 +66,31 @@
<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">
<u-list-item v-for="(item, index) in monitorList" :key="index">
<view class="liBox">
<view class="topCard">
<view class="pic">
<image src="@/static/image/earlyWarning/warnBack.png" mode="aspectFill"></image>
<image :src="item.snapshotUrl" mode="aspectFill"></image>
<view class="resolvingPower">
2560*1440
{{item.resWidth}}*{{item.resHeight}}
</view>
</view>
<view class="rightCard">
<view class="firstCard">
<view class="schoolName">
摄像头ID：SXT001
摄像头ID：{{item.sensorId}}
</view>
</view>
<view class="secondCard">

<view class="txt">
摄像头名称：厨房（良景）
摄像头名称：{{item.sensorName}}
</view>
</view>
<view class="thirdCard">

<view class="txt">
设备IP：192.168.10.130
设备IP：{{item.directUrlIp}}
</view>
</view>
</view>
@@ -103,7 +103,7 @@
所属学校：演示学校
</view>
</view>
<view class="rightBox btoBox" @click="deleteClick(item)">
<view class="rightBox btoBox" @click="startClick(item.sensorId)">
<view class="txt">
播放
</view>
@@ -132,6 +132,12 @@

<script>
import tkiTree from '@/components/tki-tree/tki-tree.vue';
import {
groupList, //获取摄像头分组
list, //获取摄像头列表
startUrl, //说去视频地址
stopUrl //停止视频流获取
} from '@/api/monitor/index.js'
export default {
components: {
tkiTree
@@ -148,124 +154,51 @@
videoTitle: '',
isShowSearch: false,
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,
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, //是否多选
selectParent: true, //父级可选择
flod: false, //折叠
player: null
player: null,
sensorId: '',
videoUrl: '',
streamId: '',
videoToken: '',
}
},
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() {

},
onLoad() {
// 隐藏导航栏
this.getGroupList()
// 获取列表数据
this.loadmore()
},
methods: {
setVideo() {
this.loadWebPlayerSDK().then(() => {
// 如果需要使用自定义组件，打开以下注释
// this.loadComponent().then(() => {
this.player = new Aliplayer({
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%",
height: "100%",
isLive: true,
rtsFallback: true,
rtsFallbackType: 'HLS',
}, function(player) {
player.mute()
// player.mute()
});

this.player.one('canplay', function() {
@@ -281,8 +214,19 @@
});
},
closeDialog() {
this.player.dispose();
if (this.player) {
this.player.dispose();
}

this.showVideo = false;
let params = {
sensorId: this.sensorId,
streamId: this.streamId,
videoToken: this.videoToken
};
stopUrl(params).then(res => {

})
},
loadWebPlayerSDK() {
return new Promise((resolve, reject) => {
@@ -319,9 +263,6 @@
});
},




addAttribute(data) { // tree结构递归添加属性
for (var i = 0; i < data.length; i++) {
data[i].isShow = false
@@ -334,8 +275,12 @@
},
// 确定回调事件
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) {
@@ -346,63 +291,68 @@
this.$refs.tkitree._show();
},
cancelVideo() {
console.log(11111)
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.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() {
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() {

},
scrolltolower() {
if (this.status == 'loading' || this.status == 'nomore') {
return;
}
this.searchForm.pageNum += 1;
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'
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;
width: 100%;
height: 500rpx;
background: #000;
// margin: 50rpx auto;
}



Écrire Aperçu
Chargement…
Annuler
Enregistrer