655 lines
19 KiB
Vue
655 lines
19 KiB
Vue
<template>
|
|
<view class="monitor-page bg-page">
|
|
<view class="utab-section">
|
|
<u-subsection
|
|
:list="list"
|
|
:current="current"
|
|
@change="sectionChange"
|
|
></u-subsection>
|
|
</view>
|
|
<view class="secreen-section" style="background-color: #fff">
|
|
<u-dropdown class="dropdown-box" v-if="current == 0" ref="uDropdown">
|
|
<u-dropdown-item
|
|
v-model="addressValue"
|
|
title="基地"
|
|
height="700rpx"
|
|
:options="deviceAddressList"
|
|
@change="change"
|
|
></u-dropdown-item>
|
|
<u-dropdown-item
|
|
v-model="device_id"
|
|
title="检测点"
|
|
height="700rpx"
|
|
:options="options2"
|
|
@change="change2"
|
|
></u-dropdown-item>
|
|
<u-dropdown-item
|
|
v-model="is_recommend"
|
|
title="全部"
|
|
:options="options3"
|
|
@change="change3"
|
|
></u-dropdown-item>
|
|
</u-dropdown>
|
|
<u-dropdown
|
|
class="dropdown-box"
|
|
v-if="current == 1"
|
|
ref="uDropdown2"
|
|
@open="openDropDown"
|
|
>
|
|
<u-dropdown-item
|
|
v-model="addressValue2"
|
|
title="基地"
|
|
height="700rpx"
|
|
:options="deviceAddressList2"
|
|
@change="change"
|
|
></u-dropdown-item>
|
|
<u-dropdown-item
|
|
v-model="device_id2"
|
|
title="检测点"
|
|
height="700rpx"
|
|
:options="options4"
|
|
@change="change4"
|
|
></u-dropdown-item>
|
|
<u-dropdown-item v-if="current == 1" title="日期">
|
|
<view class="slot-content" style="background-color: #ffffff">
|
|
<view class="select-date u-border-bottom" style="margin-bottom: 0">
|
|
<view class="name" @click="pickerTimeFn('start')">
|
|
<u-icon name="calendar" color="#333" size="32"></u-icon>
|
|
<text style="margin-left: 6rpx">开始时间：</text>
|
|
</view>
|
|
<view class="time_box">
|
|
<view
|
|
class="tip_txt"
|
|
v-if="!start_date_c"
|
|
@click="pickerTimeFn('start')"
|
|
>请选择开始时间</view
|
|
>
|
|
<view class="tile_val" v-else @click="pickerTimeFn('start')">{{
|
|
start_date_c
|
|
}}</view>
|
|
<view
|
|
class="delete_btn"
|
|
v-if="start_date_c"
|
|
@click="deleteDateFn('start')"
|
|
>
|
|
<u-icon name="close-circle" color="#333" size="34"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="select-date u-border-bottom" style="margin-bottom: 0">
|
|
<view class="name" @click="pickerTimeFn('end')">
|
|
<u-icon name="calendar" color="#333" size="32"></u-icon>
|
|
<text style="margin-left: 6rpx">结束时间：</text>
|
|
</view>
|
|
<view class="time_box">
|
|
<view
|
|
class="tip_txt"
|
|
v-if="!end_date_c"
|
|
@click="pickerTimeFn('end')"
|
|
>请选择结束时间</view
|
|
>
|
|
<view class="tile_val" v-else @click="pickerTimeFn('end')">{{
|
|
end_date_c
|
|
}}</view>
|
|
<view
|
|
class="delete_btn"
|
|
v-if="end_date_c"
|
|
@click="deleteDateFn('end')"
|
|
>
|
|
<u-icon name="close-circle" color="#333" size="34"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="select-date u-border-bottom" v-if="selectedTimeTip">
|
|
<view class="tip_err_text">
|
|
请选择开始时间和结束时间，查询视频
|
|
</view>
|
|
</view>
|
|
<view class="btn_group">
|
|
<u-button class="btn" @click="resetSecreen()">重置</u-button>
|
|
<u-button
|
|
class="btn"
|
|
type="primary"
|
|
@click="selectedDateConform()"
|
|
>查询</u-button
|
|
>
|
|
</view>
|
|
</view>
|
|
</u-dropdown-item>
|
|
</u-dropdown>
|
|
</view>
|
|
<view class="secreen-show-box mt20" v-if="current == 0 && addressName">
|
|
<view class="label_t">当前位置：</view>
|
|
<view class="info"
|
|
>{{ addressName }}-{{ device_id ? device_id : '全部' }}-{{
|
|
is_recommend ? '推荐' : '全部'
|
|
}}</view
|
|
>
|
|
</view>
|
|
<view class="secreen-show-box mt20" v-if="current == 1 && q_start_time">
|
|
<view class="label_t">查询：</view>
|
|
<view class="info">
|
|
<view>{{ addressName2 }}-{{ device_id2 }}</view>
|
|
<view>{{ q_start_time }} 到 {{ q_end_time }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="content-box">
|
|
<view class="video_ul" v-show="current == 0">
|
|
<view class="video_li" v-for="(video, index) in videoList" :key="index">
|
|
<view class="video_cd">
|
|
<!-- #ifdef H5 -->
|
|
<videoM3u8H5 v-if="video.video_type=='m3u8'" :url="video.video_url" :id="`m_${index}_refsM3u8`"></videoM3u8H5>
|
|
<video-flv-h5 v-else :url="video.video_url"></video-flv-h5>
|
|
<!-- #endif -->
|
|
</view>
|
|
<view class="bottom-box">
|
|
<view class="row flex-row">
|
|
<view class="lab">推荐：</view>
|
|
<u-switch
|
|
v-model="video.bl_recommend"
|
|
size="30"
|
|
@change="changeRecommend($event, index)"
|
|
></u-switch>
|
|
</view>
|
|
<view class="address"
|
|
>{{ video.base_name }}-{{ video.monitoring_point }}</view
|
|
>
|
|
</view>
|
|
</view>
|
|
<u-loadmore :status="loading" />
|
|
</view>
|
|
<view class="video_ul" v-show="current == 1">
|
|
<view
|
|
class="video_li"
|
|
v-for="(video, index) in videoList2"
|
|
:key="index"
|
|
>
|
|
<view class="video_cd">
|
|
<!-- #ifdef H5 -->
|
|
<videoM3u8H5 v-if="video.video_type=='m3u8'" :url="video.video_url" :id="`m_${index}_refsM3u82`" ></videoM3u8H5>
|
|
<video-flv-h5 v-else :url="video.video_url"></video-flv-h5>
|
|
<!-- #endif -->
|
|
</view>
|
|
<view class="bottom-box">
|
|
<view class="address"
|
|
>{{ video.base_name }}-{{ video.monitoring_point }}</view
|
|
>
|
|
</view>
|
|
</view>
|
|
|
|
<u-loadmore :status="loading2" v-if="loading2" />
|
|
<u-empty
|
|
text="请选择要查看的视频的日期"
|
|
mode="history"
|
|
margin-top="100"
|
|
v-if="!(videoList2 && videoList2.length)"
|
|
></u-empty>
|
|
</view>
|
|
</view>
|
|
<!-- 选择时间 -->
|
|
<u-picker
|
|
mode="time"
|
|
v-model="pickerShow"
|
|
@confirm="pickerChange"
|
|
:params="pickerParams"
|
|
:default-time="defaultTime"
|
|
></u-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import videoFlvH5 from '@/components/video-flv-h5/video-flv-h5.vue'
|
|
import videoM3u8H5 from '@/components/video-m3u8-h5/video-m3u8-h5.vue'
|
|
import Request from '@/api/luch-request/index.js'
|
|
const http = new Request()
|
|
export default {
|
|
components: { videoFlvH5,videoM3u8H5 },
|
|
data() {
|
|
return {
|
|
list: [
|
|
{
|
|
name: '监控',
|
|
},
|
|
{
|
|
name: '视频',
|
|
},
|
|
],
|
|
current: 0,
|
|
//筛选
|
|
q_start_time: '',
|
|
q_end_time: '',
|
|
deviceAddressList: [], //筛选设备地区列表
|
|
addressName: '',
|
|
addressValue: '',
|
|
device_id: '', //检测点 - options2中的设备id
|
|
options2: [],
|
|
start_date_c: '',
|
|
end_date_c: '',
|
|
device_type: 1, //监控
|
|
is_recommend: 0,
|
|
options3: [
|
|
{
|
|
label: '全部',
|
|
value: 0,
|
|
},
|
|
{
|
|
label: '推荐',
|
|
value: 1,
|
|
},
|
|
],
|
|
per_page: 4,
|
|
page: 1,
|
|
pickerParams: {
|
|
year: true,
|
|
month: true,
|
|
day: true,
|
|
hour: true,
|
|
minute: true,
|
|
second: false,
|
|
},
|
|
defaultTime: '',
|
|
pickerShow: false, //选择
|
|
ctimeType: '', //当前点击
|
|
addressValue2: '',
|
|
addressName2: '',
|
|
device_id2: '',
|
|
options4: [],
|
|
websocket: {},
|
|
videoList: [],
|
|
videoList2: [],
|
|
per_page2: 4,
|
|
page2: 1,
|
|
loading: 'loading',
|
|
loading2: '',
|
|
selectedTimeTip: false, //选择时间段提示
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.queryWebsocketIp()
|
|
},
|
|
methods: {
|
|
sectionChange(index) {
|
|
this.current = index
|
|
},
|
|
//地区1
|
|
change(val) {
|
|
console.log(val)
|
|
let narray = this.deviceAddressList.filter((item) => {
|
|
return item.value == val
|
|
})
|
|
console.log(narray)
|
|
if (this.current == 0) {
|
|
this.addressName = narray[0].name
|
|
} else {
|
|
this.addressName2 = narray[0].name
|
|
}
|
|
if (val == '') {
|
|
this.addressName = '全部'
|
|
this.queryDevices()
|
|
} else {
|
|
this.queryAddressDevicePoints(val)
|
|
}
|
|
},
|
|
//地区下设备id
|
|
change2(val) {
|
|
console.log(val)
|
|
this.queryDevices()
|
|
},
|
|
//推荐
|
|
change3(val) {
|
|
this.queryDevices()
|
|
},
|
|
//视频下-设备
|
|
change4(val) {},
|
|
//时间选择
|
|
pickerTimeFn(type) {
|
|
this.ctimeType = type
|
|
this.pickerShow = true
|
|
},
|
|
//日期范围
|
|
pickerChange(e) {
|
|
console.log(e, '日期范围')
|
|
let dateTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`
|
|
if (this.ctimeType == 'start') {
|
|
this.start_date_c = dateTime
|
|
} else if (this.ctimeType == 'end') {
|
|
this.end_date_c = dateTime
|
|
} else {
|
|
}
|
|
console.log(dateTime, '日期范围')
|
|
},
|
|
//删除选择的时间
|
|
deleteDateFn(type) {
|
|
if (type == 'start') {
|
|
this.start_date_c = ''
|
|
} else if (type == 'end') {
|
|
this.end_date_c = ''
|
|
} else {
|
|
}
|
|
},
|
|
resetSecreen() {
|
|
this.start_date_c = ''
|
|
this.end_date_c = ''
|
|
},
|
|
selectedDateConform() {
|
|
if (this.start_date_c && this.end_date_c) {
|
|
this.selectedTimeTip = false
|
|
this.q_start_time = this.start_date_c
|
|
this.q_end_time = this.end_date_c
|
|
this.queryDevices2()
|
|
this.$refs.uDropdown2.close()
|
|
} else {
|
|
this.selectedTimeTip = true
|
|
}
|
|
},
|
|
//时间筛选
|
|
openDropDown(index) {
|
|
console.log(index, 'openDropDown')
|
|
this.selectedTimeTip = false
|
|
if (index == 2) {
|
|
//日期
|
|
this.start_date_c = this.q_start_time
|
|
this.end_date_c = this.q_end_time
|
|
}
|
|
},
|
|
//推特
|
|
changeRecommend(value, index) {
|
|
console.log(value, index)
|
|
let id = this.videoList[index].id
|
|
this.recommendId(id)
|
|
},
|
|
recommendId(id) {
|
|
this.$http
|
|
.put(`/api/devices-update-recommend/${id}`)
|
|
.then(({ data }) => {
|
|
console.log(data, 'recommendId===')
|
|
})
|
|
.catch((err) => {})
|
|
},
|
|
async queryWebsocketIp() {
|
|
let params = {
|
|
_t: new Date().getTime(),
|
|
}
|
|
const { data } = await this.$http.get('/api/ffmpeg-websocket-ip', {
|
|
params: params,
|
|
})
|
|
try {
|
|
console.log(data, 'queryWebsocketIp')
|
|
if (data.code == 200) {
|
|
this.websocket = data.data
|
|
}
|
|
} catch (e) {
|
|
//TODO handle the exception
|
|
}
|
|
this.queryDeviceBasics('init')
|
|
},
|
|
//查询监测
|
|
queryDevices(type) {
|
|
if (type != 'more') {
|
|
this.loading = 'loadmore'
|
|
this.page = 1
|
|
}
|
|
let params = {
|
|
type: this.device_type,
|
|
status: 1, //在线
|
|
per_page: this.per_page,
|
|
page: this.page++,
|
|
_t: new Date().getTime(),
|
|
}
|
|
if (this.addressValue) {
|
|
params['base'] = this.addressValue
|
|
}
|
|
if (this.device_id) {
|
|
params['point'] = this.device_id
|
|
}
|
|
if (this.is_recommend) {
|
|
params['is_recommend'] = this.is_recommend
|
|
}
|
|
this.loading = 'loading'
|
|
|
|
this.$http
|
|
.get('/api/devices', { params: params })
|
|
.then(async ({ data }) => {
|
|
this.loading = 'loadmore'
|
|
if (type != 'more') {
|
|
this.videoList = []
|
|
}
|
|
console.log(data, '监测视频')
|
|
if (data.code == 200) {
|
|
let list = data.data
|
|
for (let item of list) {
|
|
let url = item.extends.rtsp_url
|
|
let { ip, port } = this.websocket
|
|
|
|
if (url) {
|
|
item.video_url = `ws://${ip}:${port}/rtsp?url=${window.btoa(
|
|
url
|
|
)}`
|
|
}
|
|
const { supplier, extends: extend, sn } = item
|
|
|
|
if (item.supplier.id == 'device-supplier-biang') {
|
|
const { data } = await http.get(
|
|
'https://yun.bigdata5s.com/api/open-api/open/getSeedingLive',
|
|
{
|
|
params: {
|
|
username: extend.username,
|
|
password: extend.password,
|
|
equipmentCode: sn,
|
|
channelNo: extend.passage,
|
|
},
|
|
}
|
|
)
|
|
item.video_url = data.data
|
|
item.video_type = 'm3u8'
|
|
}
|
|
|
|
item.bl_recommend = item.is_recommend == 1 ? true : false
|
|
}
|
|
this.videoList = this.videoList.concat(list)
|
|
if (data.meta.current_page >= data.meta.last_page) {
|
|
this.loading = 'nomore'
|
|
}
|
|
console.log(this.videoList, data)
|
|
}
|
|
})
|
|
.catch(() => {
|
|
this.loading = 'loadmore'
|
|
})
|
|
},
|
|
//查询视频
|
|
queryDevices2(type) {
|
|
if (type != 'more') {
|
|
this.loading2 = 'loadmore'
|
|
this.page2 = 1
|
|
}
|
|
let params = {
|
|
type: this.device_type,
|
|
status: 1, //在线
|
|
per_page: this.per_page2,
|
|
page: this.page2++,
|
|
_t: new Date().getTime(),
|
|
}
|
|
if (this.addressValue2) {
|
|
params['base'] = this.addressValue2
|
|
}
|
|
if (this.device_id) {
|
|
params['point'] = this.device_id2
|
|
}
|
|
if (this.q_start_time) {
|
|
//时间
|
|
params['start_time'] = this.q_start_time
|
|
params['end_time'] = this.q_end_time
|
|
}
|
|
this.loading2 = 'loading'
|
|
this.$http
|
|
.get('/api/devices', { params: params })
|
|
.then(({ data }) => {
|
|
this.loading2 = 'loadmore'
|
|
if (type != 'more') {
|
|
this.videoList2 = []
|
|
}
|
|
console.log(data, '监测视频')
|
|
if (data.code == 200) {
|
|
let list = data.data
|
|
for (let item of list) {
|
|
let url = item.extends.rtsp_url
|
|
if (url) {
|
|
let { username, password, ip, passage, port } = item.extends
|
|
let stime = this.$u.timeFormat(
|
|
params['start_time'],
|
|
'yyyy_mm_dd_hh_MM_ss'
|
|
)
|
|
let etime = this.$u.timeFormat(
|
|
params['end_time'],
|
|
'yyyy_mm_dd_hh_MM_ss'
|
|
)
|
|
let p_url = `rtsp://${username}:${password}@${ip}:${port}/cam/playback?channel=${passage}&subtype=0`
|
|
let rtsp_url = `${p_url}&starttime=${stime}&endtime=${etime}`
|
|
item.video_url = `ws://${this.websocket.ip}:${
|
|
this.websocket.port
|
|
}/rtsp?url=${window.btoa(rtsp_url)}}`
|
|
console.log(rtsp_url, item.video_url, '视频url')
|
|
}
|
|
}
|
|
this.videoList2 = this.videoList2.concat(list)
|
|
if (data.meta.current_page >= data.meta.last_page) {
|
|
this.loading2 = 'nomore'
|
|
}
|
|
}
|
|
})
|
|
.catch(() => {
|
|
this.loading2 = 'loadmore'
|
|
})
|
|
},
|
|
//查询地址筛选
|
|
queryDeviceBasics(type) {
|
|
let params = {
|
|
device_type: this.device_type,
|
|
_t: new Date().getTime(),
|
|
}
|
|
this.$http
|
|
.get('/api/agricultural-device-basic', { params: params })
|
|
.then(({ data }) => {
|
|
console.log(data)
|
|
if (data.code == 200) {
|
|
let _data = data.data
|
|
if(_data.length==0){
|
|
this.loading = 'nomore'
|
|
return this.$u.toast('没有关联基地')
|
|
}
|
|
for (let item of _data) {
|
|
item['label'] = item.name
|
|
item['value'] = item.id
|
|
}
|
|
this.deviceAddressList = JSON.parse(JSON.stringify(_data))
|
|
this.deviceAddressList2 = _data
|
|
this.addressValue = _data[0].id
|
|
this.addressName = _data[0].name
|
|
this.addressValue2 = _data[0].id
|
|
this.addressName2 = _data[0].name
|
|
this.deviceAddressList.unshift({ label: '全部', value: '' })
|
|
this.queryAddressDevicePoints(_data[0].id, type)
|
|
}
|
|
})
|
|
.catch(() => {})
|
|
},
|
|
//查询地址下的设备监控点
|
|
queryAddressDevicePoints(id, type) {
|
|
let params = {
|
|
device_type: this.device_type,
|
|
agricultural_basic: id,
|
|
_t: new Date().getTime(),
|
|
}
|
|
this.$http
|
|
.get(`/api/agricultural-device-point/${id}`, { params: params })
|
|
.then(({ data }) => {
|
|
console.log(data)
|
|
if (data.code == 200) {
|
|
let _data = data.data
|
|
let options = []
|
|
for (let k in _data) {
|
|
let item = {}
|
|
item['label'] = _data[k]
|
|
item['value'] = _data[k]
|
|
options.push(item)
|
|
}
|
|
|
|
console.log(type, '初始查询')
|
|
|
|
console.log(this.options2, this.device_id, 'this.options2')
|
|
if (this.current == 0) {
|
|
//监控
|
|
this.options2 = JSON.parse(JSON.stringify(options))
|
|
this.device_id = options[0].value
|
|
this.options2.unshift({ label: '全部', value: '' })
|
|
this.queryDevices()
|
|
} else {
|
|
//视频
|
|
this.options4 = options
|
|
this.device_id2 = options[0].value
|
|
}
|
|
if (type == 'init') {
|
|
//初始查询
|
|
this.options4 = options
|
|
this.device_id2 = options[0].value
|
|
}
|
|
}
|
|
})
|
|
.catch(() => {})
|
|
},
|
|
},
|
|
//触底加载
|
|
onReachBottom() {
|
|
if (this.current == 0) {
|
|
if (this.loading == 'loadmore') {
|
|
this.queryDevices('more')
|
|
}
|
|
} else {
|
|
if (this.loading2 == 'loadmore') {
|
|
this.queryDevices2('more')
|
|
}
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.monitor-page {
|
|
background-color: #fafafa;
|
|
}
|
|
.utab-section {
|
|
padding: 30rpx;
|
|
}
|
|
.content-box {
|
|
padding: 30rpx;
|
|
}
|
|
.video_ul {
|
|
.video_li {
|
|
background-color: #fff;
|
|
width: 100%;
|
|
padding: 0 12rpx;
|
|
margin-bottom: 30rpx;
|
|
.video_cd {
|
|
width: 100%;
|
|
height: 400rpx;
|
|
padding-top: 20rpx;
|
|
}
|
|
.bottom-box {
|
|
padding-top: 30rpx;
|
|
padding-bottom: 30rpx;
|
|
padding-left: 20rpx;
|
|
padding-right: 20rpx;
|
|
.row {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
}
|
|
.address {
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|