WenWuGuanJia/index_fenbao/GuanLi/online-patrol.vue

<template>
	<view class="body">
		<u-navbar
			:title="title + '文物管理'"
			bgColor="rgba(255,255,255,0.3)"
			:placeholder="true"
			:autoBack="true"
			leftText="返回"
			titleStyle="font-weight:bold;color:#7a5831"
		></u-navbar>
		<view class="box">
			<view>
				<view class="justify-between" style="color: #940000; font-size: 36rpx; font-weight: bold; margin-left: 24rpx; margin-top: 40rpx">
					<view>文物监控</view>
					<view class="gui-margin">[点击预览]</view>
				</view>
				<view class="gui-card-list">
					<view class="gui-card-item" v-for="(item, index) in device_list" :key="index">
						<view class="gui-card-img" @click="openVideo(item.device_code)">
							<image style="width: 340rpx; height: 240rpx" :src="item.image"></image>
						</view>
						<text class="gui-card-title gui-block-text gui-text gui-primary-color">{{ item.position }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
let that = this;
var md5 = require('@/static/js/md5.js');
export default {
	data() {
		return {
			flag: false,
			code: '350206-0091',
			title: '',
			device_list: {}
		};
	},
	onLoad(e) {
		that = this;

		console.log('传递的参数：');
		//当用户点击第一个的时候 跳转到详情页 通过id判断用户点击的是哪一个 根据用户点击的 id 去后端查询这个数据
		console.log();
		if (e.code) this.code = e.code;
		if (e.title) this.title = e.title;

		let auth = that.$common.userInfo();
		//获取用户权限
		if (!(auth === 'undefined' || auth === '' || auth === [] || auth === null) && auth.token !== 'undefined') {
			this.$api.userManageCrAuth(
				{
					main_body_id: 1,
					cr_code: this.code
				},
				function (res) {
					console.log(res);
					if (res.data !== true) {
						that.$common.successToShow('暂无该权限');
						return;
					}
				}
			);
		}

		this.getDevices();
	},
	methods: {
		opens() {
			this.flag = !this.flag;
		},
		closes() {
			this.flag = !this.flag;
		},
		getDevices() {
			this.$api.getDevices(
				{
					code: this.code
				},
				function (res) {
					console.log(res);
					that.device_list = res.data;
				}
			);
		},
		openGuide(name, address, latitude, longitude) {
			//  微信小程序
			// #ifdef MP-WEIXIN
			//console.log('走的这里', item);
			wx.openLocation({
				latitude: +latitude, // 纬度
				longitude: +longitude, // 经度
				name: name, // 地址名称
				address: address, // 详细地址
				success: function (r) {
					console.log(r);
				},
				fail: function (res) {
					console.log('拉起失败啦', res);
				}
			});
			// #endif
		},
		openVideo(camera_index_code) {
			console.log(camera_index_code);
			var t = Date.parse(new Date()) / 1000;
			//md5
			var key = md5.md5(t + '@feichenghuli');

			this.webViedoUrl = encodeURIComponent('https://wenwu.16fw.cn/hik_monitor/mobile_monitor.html?t=' + t.toString() + '&key=' + key + '&index_code=' + camera_index_code);
			console.log(this.webViedoUrl);
			this.$common.navigateTo('/index_fenbao/GuanLi/cr-video?url=' + this.webViedoUrl);
			return;

			uni.request({
				url: 'https://huli-app.wenlvti.net/api/sports/admin/getPreviewUrl',
				data: {
					camera_index_code: camera_index_code
				},
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				method: 'POST',
				success: function (res) {
					console.log(res);
					that.videoUrl = res.data.data.url;
					let url = that.videoUrl;
					console.log(url);
					url = url.replace('http://192.168.10.10:83', 'https://wenwu.16fw.cn/m3u8');
					that.videoUrl = url;
					console.log(that.videoUrl);
					that.showVideo = true;
				},
				fail: function (err) {}
			});
		}
	}
};
</script>

<style>
.box .info {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 20rpx;
	margin-top: 8px;
}

.box .info > view {
	margin-top: 10px;
	font-size: 14px;
	margin-left: 4px;
	color: #940000;
}

.box .u-info {
	margin: 20rpx;
}

.box .text {
	margin: 20rpx;
}

.box {
	height: auto;
	width: 100%;
	background-image: url('https://huli-app.wenlvti.net/app_static/wuyuan/static/shouhu/wyj-feiyi3-001.png');
	background-size: 100% 100%;
	background-attachment: fixed;
	border-radius: 16px 16px 0 0;
	position: relative;
	top: -20px;
	padding-top: 10rpx;
}

.head {
	height: 6px;
	width: 60px;
	background-color: darkgray;
	text-align: center;
	margin: 0 auto;
	margin-top: 10px;
	border-radius: 4px;
}

.body {
	background-image: url('https://huli-app.wenlvti.net/app_static/wuyuan/static/wenwu/wyj-jiemian1-BJ.png');
	background-size: 100% 100%;
	background-attachment: fixed;
	padding-bottom: 50rpx;
	height: auto;
}

.boxs > view {
	overflow: hidden;
	width: 355px;
	height: 160px;
	border-radius: 5px;
	margin-bottom: 30px;
}

.text-img-img {
	display: flex;
	overflow: none;
	overflow-x: scroll;
	margin-top: 5rpx;
}

.text-img-img > view {
	color: #940000;
	margin-right: 10px;
}

.text-img-info {
	color: #940000;
	display: flex;
	justify-content: space-between;
}

.text-img {
	margin: 14px 10px;
}

.guidance {
	background-color: #f8f8f8;
	width: 100%;
	height: 100rpx;
	line-height: 1.5;
}

.guidICON {
	margin-top: 3rpx;
}
.gui-card-list {
	width: 95%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: auto;
	margin-top: 20rpx;
}
.justify-between {
	width: 95%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.gui-card-item {
	margin-bottom: 30rpx;
}
</style>