Browse Source

logo和标题替换,监控替换(移动端)

master
wwp 1 month ago
parent
commit
500bdd70f8
6 changed files with 802 additions and 14 deletions
  1. +30
    -4
      monitorMobile/pages/earlyWarning/index.vue
  2. +747
    -0
      monitorMobile/pages/monitor/index - 副本.vue
  3. +23
    -9
      monitorMobile/pages/monitor/index.vue
  4. BIN
      monitorMobile/static/image/earlyWarning/back3.png
  5. BIN
      monitorMobile/static/image/earlyWarning/logoBack.png
  6. +2
    -1
      monitorMobile/store/index.js

+ 30
- 4
monitorMobile/pages/earlyWarning/index.vue View File

@@ -7,7 +7,10 @@
</view> -->

<view class="logo">
<image src="@/static/image/earlyWarning/logo.png" mode="heightFix"></image>
<image :src="logo" mode="heightFix"></image>
</view>
<view class="logoTitle">
{{title}}
</view>
</view>
<view class="contentBox">
@@ -213,6 +216,8 @@
},
data() {
return {
title: '',
logo: '',
searchValue: '全部',
isShowSearch: false,
isTriggered: true,
@@ -262,7 +267,12 @@
},
},
onLoad() {
console.log(this.searchForm.$alarmType)
// console.log(this.sysInfo,111)
// 获取logo和平台名称
let titleObj = this.sysInfo.find(e=>e.configKey == 'SYS_NAME')
if(titleObj)this.title = titleObj.configValue
let logoObj = this.sysInfo.find(e=>e.configKey == 'SYS_LOGO')
if(logoObj)this.logo = logoObj.configValue
// 获取预警类型
this.getWarnTypeList()
// 隐藏导航栏
@@ -408,7 +418,7 @@
.headerBox {
/*#ifdef H5*/
height: 272rpx;
background: url("@/static/image/earlyWarning/back2.png") no-repeat center center / cover;
background: url("@/static/image/earlyWarning/logoBack.png") no-repeat center center / cover;

/*#endif*/
/*#ifdef APP-PLUS || MP-ALIPAY || MP-WEIXIN*/
@@ -439,12 +449,28 @@
position: absolute;
left: 36rpx;
/*#ifdef H5*/
top: 50rpx;
top: 55rpx;
/*#endif*/
/*#ifdef APP-PLUS || MP-ALIPAY || MP-WEIXIN*/
top: 110rpx;
/*#endif*/
}
.logoTitle {
position: absolute;
left: 36rpx;
/*#ifdef H5*/
top: 150rpx;
/*#endif*/
/*#ifdef APP-PLUS || MP-ALIPAY || MP-WEIXIN*/
top: 170rpx;
/*#endif*/
font-family: 'Alimama ShuHeiTi';
font-weight: 700;
color: #2388FF;
font-size: 50rpx;
letter-spacing: 6%;
text-shadow: #fff 1px 0 0,#fff 0 1px 0,#fff -1px 0 0, #fff 0 -1px 0;
}
}

.contentBox {


+ 747
- 0
monitorMobile/pages/monitor/index - 副本.vue View File

@@ -0,0 +1,747 @@
<template>
<view class="inspectionCenter">
<view v-show="showVideo" class="poupBox">
<view class="videoHeader">

</view>
<view class="contentBox">
<view class="closeBox">
<view class="title">
{{sensorName+'(' + sensorId + ')'}}
</view>
<view class="closes" @click="closeDialog">
<u-icon name="close-circle-fill" color="#ccc" size="22"></u-icon>
</view>
</view>
<view class="botbox">
<view id="url-player-test"></view>
</view>
</view>
<view class="bottom-content">

</view>
</view>
<view class="searchBox">
<view class="searchLine">
<view class="searchLabels" @click="showTree">
<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">{{this.searchForm.groupName}}</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">
<view class="left-layout">
<text>{{'警告类型'}}</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>{{'处理状态'}}</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>

<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="monitorList.length == 0&&status == 'nomore'" mode="list" text="暂无数据"></u-empty>
<u-list @scrolltolower="scrolltolower" style="height: calc(100% - 0rpx);">
<u-list-item v-for="(item, index) in monitorList" :key="index">
<view class="liBox">
<view class="topCard">
<view class="pic">
<image :src="item.snapshotUrl" mode="aspectFill"></image>
<view class="resolvingPower">
{{item.resWidth}}*{{item.resHeight}}
</view>
</view>
<view class="rightCard">
<view class="firstCard">
<view class="schoolName">
摄像头ID:{{item.sensorId}}
</view>
</view>
<view class="secondCard">

<view class="txt">
摄像头名称:{{item.sensorName}}
</view>
</view>
<view class="thirdCard">

<view class="txt">
设备IP:{{item.directUrlIp}}
</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="startClick(item.sensorId,item.sensorName)">
<view class="txt">
播放
</view>
</view>
</view>
</view>
</u-list-item>
<u-loadmore :status="status" />
</u-list>
</view>

<!-- <web-view :webview-styles="styles" src="/hybrid/html/players.html"></web-view> -->
<!-- <u-modal :show="showVideo" :title="videoTitle" :closeOnClickOverlay="false" :showCancelButton="true"
@confirm="confirmVideo" @cancel="cancelVideo">
<view class="slot-content">
<cover-view style="width: 100%;height:500px">

</cover-view>

</view>
</u-modal> -->
<tki-tree ref="tkitree" title="摄像头分组" :showChild="showChild" :selectParent="selectParent" :multiple="multiple"
:range="treelist" :foldAll="flod" rangeKey="name" @confirm="treeConfirm" @cancel="treeCancel"></tki-tree>
</view>
</template>

<script>
import tkiTree from '@/components/tki-tree/tki-tree.vue';
import {
groupList, //获取摄像头分组
list, //获取摄像头列表
startUrl, //说去视频地址
stopUrl //停止视频流获取
} from '@/api/monitor/index.js'
export default {
components: {
tkiTree
},
data() {
return {
styles: {
width: '100%',
height: '100%',
zIndex: '999999999999999999999999999'
// bottom: '56px'
},
showVideo: false,
videoTitle: '',
isShowSearch: false,
searchForm: {
groupName: '全部',
groupId: '',
pageNum: 1,
pageSize: 10
},
monitorList: [],
isLoading: false,
status: 'loadmore', //loading正在加载 loadmore加载更多 nomore没有更多了
treelist: [],
multiple: false, //是否多选
selectParent: true, //父级可选择
flod: false, //折叠
showChild: true,
player: null,
sensorId: '',
sensorName: '',
videoUrl: '',
streamId: '',
videoToken: '',
}
},
watch: {

},
mounted() {

},
onLoad() {
this.getGroupList()
// 获取列表数据
this.loadmore()
},
onUnload() {
if(this.showVideo) {
this.closeDialog()
}
},
onPullDownRefresh() {
uni.stopPullDownRefresh()
this.status = 'loadmore'
this.searchForm.pageNum = 1;
this.monitorList = []
this.loadmore()
},
methods: {

setVideo() {
let that = this;
this.loadWebPlayerSDK().then(() => {
// 如果需要使用自定义组件,打开以下注释
// this.loadComponent().then(() => {
this.player = new Aliplayer({
id: "url-player-test",
source: this.videoUrl + "&subaudio=no&jitterbuffer=6000",
width: "100%",
height: "100%",
isLive: true,
rtsFallback: true,
rtsFallbackType: 'HLS',
}, function(player) {
player.mute()
});

this.player.one('canplay', function() {
// console.log('canplay', this.player.tag);
that.player.tag.play();
});



// }).catch((e) => { console.log("加载组件失败", e) })
}).catch((e) => {
console.log("加载播放器SDK失败", e);
});
},
closeDialog() {
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) => {
const s_tag = document.createElement('script'); // 引入播放器js
s_tag.type = 'text/javascript';
s_tag.src = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/aliplayer-min.js'

// s_tag.src = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/aliplayer-min.js';
s_tag.charset = 'utf-8';
s_tag.onload = () => {
resolve();
}
document.body.appendChild(s_tag);
const l_tag = document.createElement('link'); // 引入播放器css
l_tag.rel = 'stylesheet';
l_tag.href =
'https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/skins/default/aliplayer-min.css'
// 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/skins/default/aliplayer-min.css';
document.body.appendChild(l_tag);
});
},
loadComponent() {
return new Promise((resolve, reject) => {
const s_tag = document.createElement('script');
s_tag.type = 'text/javascript';
// 需要先下载组件 js 文件,放到项目 /static/ 目录下
// 下载地址:https://github.com/aliyunvideo/AliyunPlayer_Web/blob/master/customComponents/dist/aliplayer-components/aliplayercomponents-1.0.9.min.js
s_tag.src = './static/aliplayercomponents-1.0.9.min.js';
s_tag.charset = 'utf-8';
s_tag.onload = () => {
resolve();
}
document.body.appendChild(s_tag);
});
},

addAttribute(data) { // tree结构递归添加属性
for (var i = 0; i < data.length; i++) {
data[i].isShow = false
data[i].name = data[i].title
if (data[i].children && data[i].children.length > 0) {
this.addAttribute(data[i].children)
}
}
return data
},
// 确定回调事件
treeConfirm(e) {
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) {
// console.log(e)
},
// 显示树形选择器
showTree() {
this.$refs.tkitree._show();
},
cancelVideo() {
this.showVideo = false;
},
getGroupList() {
groupList({}).then((res) => {
if (res.code == 200) {
this.treelist = [...[{
id: "",
name: "全部",
checked: true
}], ...res.data];
}
});
},
// 获取视频地址
startClick(id,name) {
this.sensorId = id;
this.sensorName = name;
this.showVideo = true;

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;
},

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;
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'
}
}

})
}
}
}
</script>

<style lang="scss" scoped>
.container {
padding: 20px;
font-size: 14px;
height: 800px;
}



// .contentBox {
// height: calc(100% - 375rpx);
.inspectionCenter {
width: 100%;
height: calc(100% - 88rpx);
position: relative;

.u-modal__title {
color: #000000;
}

.poupBox {
height: 100vh;
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 100000000000000;
// background: red;
background: rgba(0, 0, 0, 0.5);

.videoHeader {
height: 255rpx;
}

.contentBox {
// z-index: 1000000;
width: 100%;
height: 590rpx;
background: #000;

// margin: 50rpx auto;
.closeBox {
text-align: right;
height: 80rpx;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 25rpx;
background: #fff;
.title {
font-weight: 700;
font-size: 28rpx;
}
.closes {
// background: #ccc;
}
}
.botbox {
height:calc(100% - 80rpx);
}
}

.bottom-content {
height: calc(100% - 590rpx -255rpx);
}
}
}

.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: 0 30rpx;
box-sizing: border-box;

.liBox {
background: #fff;
padding: 24rpx 30rpx;
box-sizing: border-box;
border-radius: 20rpx;
margin-top: 30rpx;

.topCard {
display: flex;
align-items: center;

.pic {
position: relative;
width: 268rpx;
height: 201rpx;

image {
width: 268rpx;
height: 201rpx;
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;
font-family: 'PingFang SC';
}
}

.rightCard {
margin-left: 20rpx;

.firstCard {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 60rpx;

.schoolName {
font-size: 32rpx;
font-family: 'PingFang SC';
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: 16rpx;

.txt {
font-size: 26rpx;
font-family: 'PingFang SC';
color: #333333;
}
}
}
}

.btoCard {
border-top: 1px solid rgba(0, 0, 0, 0.1);
margin-top: 24rpx;
padding: 24rpx 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;
font-size: 26rpx;
color: #333;
font-family: 'PingFang SC';

image {
width: 36rpx;
height: 36rpx;
margin-right: 15rpx;
}
}

.rightBox {
width: 120rpx;
height: 60rpx;
background: #2388FF;
color: #fff;
border-radius: 80rpx;
}
}
}

}

// }
</style>

+ 23
- 9
monitorMobile/pages/monitor/index.vue View File

@@ -16,7 +16,7 @@
<view class="botbox">
<view id="url-player-test"></view>
</view>
</view>
<view class="bottom-content">

@@ -78,7 +78,8 @@
</view>
</view>
<view class="tableBox">
<u-empty marginTop="100rpx" :show="monitorList.length == 0&&status == 'nomore'" mode="list" text="暂无数据"></u-empty>
<u-empty marginTop="100rpx" :show="monitorList.length == 0&&status == 'nomore'" mode="list"
text="暂无数据"></u-empty>
<u-list @scrolltolower="scrolltolower" style="height: calc(100% - 0rpx);">
<u-list-item v-for="(item, index) in monitorList" :key="index">
<view class="liBox">
@@ -201,10 +202,10 @@
this.loadmore()
},
onUnload() {
if(this.showVideo) {
if (this.showVideo) {
this.closeDialog()
}
},
onPullDownRefresh() {
uni.stopPullDownRefresh()
@@ -222,7 +223,7 @@
// this.loadComponent().then(() => {
this.player = new Aliplayer({
id: "url-player-test",
source: this.videoUrl + "&subaudio=no&jitterbuffer=6000",
source: this.videoUrl,
width: "100%",
height: "100%",
isLive: true,
@@ -336,7 +337,7 @@
});
},
// 获取视频地址
startClick(id,name) {
startClick(id, name) {
this.sensorId = id;
this.sensorName = name;
this.showVideo = true;
@@ -350,7 +351,17 @@
data
} = res;
if (code == 200) {
this.videoUrl = data.rtsPullStreamUrls[0].url;
if (this.sensorId == 'SXT001') {
this.videoUrl = 'http://123.57.209.16:8004/video/1.mp4'
} else if (this.sensorId == 'SXT002') {
this.videoUrl = 'http://123.57.209.16:8004/video/5.mp4'
} else if (this.sensorId == 'SXT003') {
this.videoUrl = 'http://123.57.209.16:8004/video/2.mp4'
}
// this.videoUrl = data.rtsPullStreamUrls[0].url;
this.streamId = data.streamId;
this.videoToken = data.videoToken;
this.setVideo()
@@ -443,17 +454,20 @@
align-items: center;
padding: 0 25rpx;
background: #fff;

.title {
font-weight: 700;
font-size: 28rpx;
}

.closes {
// background: #ccc;
}
}

.botbox {
height:calc(100% - 80rpx);
height: calc(100% - 80rpx);
}
}



BIN
monitorMobile/static/image/earlyWarning/back3.png View File

Before After
Width: 750  |  Height: 272  |  Size: 192 KiB

BIN
monitorMobile/static/image/earlyWarning/logoBack.png View File

Before After
Width: 750  |  Height: 272  |  Size: 168 KiB

+ 2
- 1
monitorMobile/store/index.js View File

@@ -21,7 +21,7 @@ try {
}

// 需要永久存储,且下次APP启动需要取出的,在state中的变量名
let saveStateKeys = ['token', 'userInfo', 'allOptions', 'refreshToken'];
let saveStateKeys = ['token', 'userInfo', 'allOptions', 'refreshToken','sysInfo'];

// 保存变量到本地存储中
const saveLifeData = function(key, value) {
@@ -54,6 +54,7 @@ const store = new Vuex.Store({
monitorList: [], //摄像头列表
buildingList:[], //楼栋列表
},
sysInfo: []
},
actions: {
async getUserInfo(context) {


Loading…
Cancel
Save