|
|
@@ -1,29 +1,46 @@
|
|
|
<template>
|
|
|
|
|
|
<view class="">
|
|
|
+ <view v-if="loadingStatus" class="loadingMask">Loading...</view>
|
|
|
<view class="cu-list menu-avatar">
|
|
|
- <view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in deviceData"
|
|
|
- :key="index" :data-target="'move-box-' + index" @tap="goVideoDetail">
|
|
|
- <view class="cu-avatar round lg" :style="`background-image:url(${item.imgUrl})`" style="opacity:.7"></view>
|
|
|
- <view class="content">
|
|
|
- <view class="">{{item.title}}</view>
|
|
|
- </view>
|
|
|
- <view class="nav-right num">
|
|
|
- <view v-if="item.status=='在线'" class="online" >
|
|
|
- {{item.status}}
|
|
|
- <text class="icon iconfont margin-right-xs margin-left-lg"></text>
|
|
|
+
|
|
|
+ <view v-if="!this.openId&&!this.onLineVideoList.length" class="text-center margin-top-lg">加载中...</view>
|
|
|
+ <view v-if="!this.matchedDeviceList.length&&this.onLineVideoList.length" class="text-center margin-top-lg">暂无数据</view>
|
|
|
+
|
|
|
+ <view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in matchedDeviceList"
|
|
|
+ :key="index" :data-target="'move-box-' + index">
|
|
|
+ <view v-if="item.ALIVEVALUE==3" class="cu-avatar round lg" style="background-image:url(../../static/video-icon-on.png);opacity:.7"></view>
|
|
|
+ <view v-else class="cu-avatar round lg" style="background-image:url(../../static/video-icon-off.png);opacity:.7"></view>
|
|
|
+ <view v-if="item.ALIVEVALUE==3" @tap="open_video(item)">
|
|
|
+ <view class="content">
|
|
|
+ <view class="">{{item.DEVICE}}</view>
|
|
|
</view>
|
|
|
- <view v-else-if="item.status=='离线'" class="text-gray" >
|
|
|
- {{item.status}}
|
|
|
- <text class="icon iconfont margin-right-xs margin-left-lg"></text>
|
|
|
+ <view class="nav-right num">
|
|
|
+ <view class="online">
|
|
|
+ 在线
|
|
|
+ <text class="icon iconfont margin-right-xs margin-left-lg"></text>
|
|
|
+ </view>
|
|
|
+
|
|
|
</view>
|
|
|
- <view v-else="item.status=='异常'" class="error" >
|
|
|
- {{item.status}}
|
|
|
- <text class="icon iconfont margin-right-xs margin-left-lg"></text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view v-else>
|
|
|
+ <view class="content">
|
|
|
+ <view class="">{{item.DEVICE}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="nav-right num">
|
|
|
+
|
|
|
+ <view class="offline">
|
|
|
+ 离线
|
|
|
+ <text class="icon iconfont margin-right-xs margin-left-lg"></text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+
|
|
|
</view>
|
|
|
</view>
|
|
|
+
|
|
|
+ <input type="hidden" v-model="openId" style="opacity:0">
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -31,60 +48,198 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- deviceData: [{
|
|
|
- status: '离线',
|
|
|
- imgUrl: '../../static/video-icon-off.png',
|
|
|
- title: 'C59360332',
|
|
|
- num: 6
|
|
|
- }, {
|
|
|
- status: '在线',
|
|
|
- imgUrl: '../../static/video-icon-on.png',
|
|
|
- title: 'C59360332',
|
|
|
- num: 11
|
|
|
- },
|
|
|
- {
|
|
|
- status: '异常',
|
|
|
- imgUrl: '../../static/video-icon-error.png',
|
|
|
- title: 'C59360332',
|
|
|
- num: 6
|
|
|
- }
|
|
|
- ],
|
|
|
+
|
|
|
+ d: {
|
|
|
+ CMD: 1
|
|
|
+ },
|
|
|
+ deviceData: [],
|
|
|
+ onLineVideoList: [],
|
|
|
+ matchedDeviceList: [],
|
|
|
modalName: null,
|
|
|
+ openId: '',
|
|
|
+ reCount: 0,
|
|
|
+ count: 0,
|
|
|
+ loadingStatus: false
|
|
|
|
|
|
};
|
|
|
},
|
|
|
- onLoad:function(option){
|
|
|
- this.getVideoList({'company_code':uni.getStorageSync('selectedCode')})
|
|
|
-
|
|
|
+ onLoad: function(option) {
|
|
|
+
|
|
|
+ // this.companyCode = option.companyCode
|
|
|
+ // this.deviceType = option.deviceType
|
|
|
+ this.getDeviceManage({
|
|
|
+ 'company_code':uni.getStorageSync('selectedCode')
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ this.chk_video()
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+
|
|
|
},
|
|
|
methods: {
|
|
|
+
|
|
|
+ chk_video() {
|
|
|
|
|
|
- // 视频列表数据请求
|
|
|
- async getVideoList(params = {}) {
|
|
|
- const res = await this.$myRequest({
|
|
|
- url: 'VideoMonitoring/getVideoList',
|
|
|
- data:params,
|
|
|
- showLoading: true
|
|
|
- })
|
|
|
- this.getData=res.data.data;
|
|
|
- console.log(this.getData)
|
|
|
+ uni.request({
|
|
|
+ url: 'https://fire.usky.cn:8443/YtIoT/cgi-bin/demo2.cgi',
|
|
|
+ data: 'queryJson:' + JSON.stringify({
|
|
|
+ CMD: 1
|
|
|
+ }),
|
|
|
+ method: 'post',
|
|
|
+ header: {
|
|
|
+ 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ this.onLineVideoList = res.data.RESULT.LIST;
|
|
|
+ // console.log('this.onLineVideoList');
|
|
|
+ // console.log(this.onLineVideoList)
|
|
|
+ // console.log('this.openId')
|
|
|
+ // console.log(this.openId)
|
|
|
+ if (this.openId.length > 0) {
|
|
|
+ console.log('doododododododo')
|
|
|
+ for (var n = 0; n < this.onLineVideoList.length; n++) {
|
|
|
+ if (this.openId == this.onLineVideoList[n].DEVICE) {
|
|
|
+ this.reCount++;
|
|
|
+ if (this.onLineVideoList[n].ONAIR) {
|
|
|
+ if ((++this.count) > 2) {
|
|
|
+ // var mask = document.getElementById('videomask');
|
|
|
+ // if (mask != undefined) {
|
|
|
+ // removeDIV('videomask');
|
|
|
+ // }
|
|
|
+ this.loadingStatus = false;
|
|
|
+
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/videoList/videoDetail/videoDetail?deviceCode=' + this.onLineVideoList[n].DEVICE,
|
|
|
+ });
|
|
|
+
|
|
|
+ } else {
|
|
|
+ setTimeout(this.chk_video, 5000);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+
|
|
|
+ if (this.reCount > 7) {
|
|
|
+ // var mask = document.getElementById('videomask');
|
|
|
+ // if (mask != undefined) {
|
|
|
+ // removeDIV('videomask');
|
|
|
+ // }
|
|
|
+ this.loadingStatus = false;
|
|
|
+ // alert('远程摄像头链接超时，请稍后再试')
|
|
|
+ uni.showToast({
|
|
|
+ title: "远程摄像头链接超时，请稍后再试",
|
|
|
+ icon: "none"
|
|
|
+ });
|
|
|
+ // $("#myPopup").popup("open");
|
|
|
+
|
|
|
+ break;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ setTimeout(this.chk_video, 5000);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ for (var i = 0; i < this.onLineVideoList.length; i++) {
|
|
|
+ for (var j = 0; j < this.deviceData.length; j++) {
|
|
|
+ if (this.onLineVideoList[i].DEVICE == this.deviceData[j].owner_code) {
|
|
|
+ this.matchedDeviceList.push({
|
|
|
+ "DEVICE": this.onLineVideoList[i].DEVICE,
|
|
|
+ "ALIVEVALUE": this.onLineVideoList[i].ALIVEVALUE,
|
|
|
+ "ONAIR": this.onLineVideoList[i].ONAIR
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log('this.matchedDeviceList')
|
|
|
+ console.log(this.matchedDeviceList)
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
+ open_video(item) {
|
|
|
+ // alert( item.DEVICE);
|
|
|
+ if (this.openId != item.DEVICE) {
|
|
|
+ this.openId = item.DEVICE
|
|
|
+ }
|
|
|
+ console.log('this.openId')
|
|
|
+ console.log(this.openId)
|
|
|
+ console.log('this.onLineVideoList')
|
|
|
+ console.log(this.onLineVideoList)
|
|
|
+ for (var n = 0; n < this.onLineVideoList.length; n++) {
|
|
|
+ if (this.onLineVideoList[n].DEVICE == this.openId) {
|
|
|
+ if (this.onLineVideoList[n].ONAIR) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/videoList/videoDetail/videoDetail?deviceType=2&companyCode=' + uni.getStorageSync('selectedCode') + '&deviceCode=' + item.DEVICE +
|
|
|
+ '',
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.count = 0;
|
|
|
+ this.reCount = 0;
|
|
|
+ this.loadingStatus = true;
|
|
|
|
|
|
- goVideoDetail() {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/videoList/videoDetail/videoDetail',
|
|
|
- success: res => {},
|
|
|
- fail: () => {},
|
|
|
- complete: () => {}
|
|
|
+ alert('一些loading操作')
|
|
|
+ uni.request({
|
|
|
+ url: 'https://fire.usky.cn:8443/YtIoT/cgi-bin/demo2.cgi',
|
|
|
+ data: 'queryJson:' + JSON.stringify({
|
|
|
+ CMD: 3,
|
|
|
+ BODY: {
|
|
|
+ DEVICE: item.DEVICE,
|
|
|
+ ACTION: 1,
|
|
|
+ IDX: 7
|
|
|
+ }
|
|
|
+ }),
|
|
|
+ method: 'post',
|
|
|
+ header: {
|
|
|
+ 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ setTimeout(this.chk_video, 5000);
|
|
|
+ }
|
|
|
});
|
|
|
+
|
|
|
},
|
|
|
|
|
|
|
|
|
+ async getDeviceManage(ming = {}) {
|
|
|
+ const res = await this.$myRequest({
|
|
|
+ url: 'VideoMonitoring/getVideoList',
|
|
|
+ data: ming
|
|
|
+ })
|
|
|
+ this.deviceData = res.data.data;
|
|
|
+ console.log(this.deviceData)
|
|
|
+ },
|
|
|
+
|
|
|
}
|
|
|
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
-
|
|
|
-</style>
|
|
|
+ .loadingMask {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ background: rgba(0, 0, 0, .3);
|
|
|
+ z-index: 1000;
|
|
|
+ color: #000;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ display: flex;
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 100rpx;
|
|
|
+ font-size: 34rpx;
|
|
|
+ }
|
|
|
+</style>
|
Ming