tqApp-webView/alarm/blindSpot/detail.vue

<template>
	<view class="driver_class">
		<view style="width: 100%;">
			<video style="width: 100%;" :src="videoUrl"></video>
		</view>
		<view class="image" v-if="images.length">
			<view v-for="(item, index) in images" :key="item">
				<image style="width: 220rpx;" @click="previewImage(item, index)" :src="item" mode="widthFix"></image>
			</view>
		</view>
		<view class="alarm-type">
			<view class="alarm-type-title">
				报警类型
			</view>
			<view class="alarm-type-item">
				<view class="label">
					类型:
				</view>
				<view class="" style="color: #FF3140;">
					{{ info.alarmType }}
				</view>
			</view>
			<view class="alarm-type-item">
				<view class="label">
					等级:
				</view>
				<view style="color: #F7B500;">
					{{ info.level }}
				</view>
			</view>
		</view>
		<view class="alarm-detail">
			<view class="alarm-detail-title">
				详细信息
			</view>
			<view class="alarm-detail-name">
				<view class="alarm-detail-image">
					<image :src="$getImages('/assetsMobile/images/alarm/touxiang.png')" style="width: 120rpx;height: 120rpx;"
						mode=""></image>
				</view>
				<view class="image-right">
					<view class="alarm-detail-form">
						<view class="label">
							车牌号：
						</view>
						<view class="val">
							{{ info.plate }}
						</view>
					</view>
					<view class="alarm-detail-form">
						<view class="label">
							驾驶员名称：
						</view>
						<view class="val">
							{{ info.driverName || '暂无信息' }}
						</view>
					</view>
				</view>
			</view>
			<view class="alarm-detail-form top">
				<view class="label">
					司机电话：
				</view>
				<view class="val">
					{{ info.driverPhone }}
				</view>
			</view>
			<view class="alarm-detail-form top">
				<view class="label">
					企业名称：
				</view>
				<view class="val">
					{{ info.deptName }}
				</view>
			</view>
			<view class="alarm-detail-form top">
				<view class="label">
					通信号码：
				</view>
				<view class="val">
					{{ info.phone }}
				</view>
			</view>
			<view class="alarm-detail-form top">
				<view class="label">
					报警类型：
				</view>
				<view class="val">
					{{ info.alarmType }}
				</view>
			</view>
			<view class="alarm-detail-form top">
				<view class="label">
					报警时间：
				</view>
				<view class="val">
					{{ info.alarmTime }}
				</view>
			</view>
			<view class="alarm-detail-form top">
				<view class="label">
					车速：
				</view>
				<view class="val">
					{{ info.speed }}km/h
				</view>
			</view>
			<view class="alarm-detail-form top">
				<view class="label">
					经度：
				</view>
				<view class="val">
					{{ info.lng }}
				</view>
			</view>
			<view class="alarm-detail-form top">
				<view class="label">
					纬度：
				</view>
				<view class="val">
					{{ info.lat }}
				</view>
			</view>
			<!-- 			<view class="alarm-detail-form top">
				<view class="label">
					车辆状态：
				</view>
				<view class="val">
					{{info.phone}}
				</view>
			</view> -->
			<view class="alarm-detail-form top">
				<view class="label" style="width: 170rpx;">
					报警地址：
				</view>
				<view class="val" style="color: #4573FC;text-decoration:underline;width: calc(100% - 170rpx);"
					@click="goHistory(info)">
					{{ info.address }}>>
				</view>
			</view>
		</view>
		<view style="height: 28rpx;">

		</view>
		<!-- 		<view class="exports" @click="exportZip">
			<image src="../../static/vehicle/icon_evidence_derive_24.png" style="width: 48rpx;height: 48rpx;margin-right: 16rpx;" mode=""></image>
			证据导出
		</view> -->
	</view>
</template>

<script>
import { selectByFileuuid, getAlarmBlindSpotDetailByFileuuid, exportAlarm } from "@/api/alarm/blindSpot.js"
import { getToken } from '@/utils/auth'
export default {
	components: {},
	props: {},
	data() {
		return {
			images: [], // 图片数组
			vehSpeed: 0,
			fid: '',
			page: '',
			videoUrl: '',
			info: {},
		};
	},
	onLoad(option) {
		this.fid = this.$route.query.fid;
		this.page = this.$route.query.type;
	},
	created() { },
	mounted() {
		this.$nextTick(() => {
			this.queryVideoImages();
			this.queryBasicInfo();
		});
	},
	watch: {},
	computed: {},
	methods: {
		previewImage(item, index) {
			uni.previewImage({
				current: item,
				urls: this.images,
				indicator: index
			})
		},
		async queryVideoImages() {
			// 查询视频和图片
			let videoList;
			this.images = [];
			let res = await selectByFileuuid(this.fid);
			if (res.code == "0") {
				for (let i = 0; i < res.data.length; i++) {
					if (res.data[i].fileType == "02") {
						videoList = res.data[i].fileName.replace(".h264", ".mp4");
						this.videoUrl = this.$getImages("/img/alarmvideo/" + videoList)
						console.log(this.url)
					}
					if (res.data[i].fileType == "00") {
						this.images.push(
							this.$getImages("/img/alarmvideo/" + res.data[i].fileName)
						);
					}
				}
			}
		},
		checkData(data) {
			// 检测数据
			return data == null || data == undefined ? "" : data;
		},
		async queryBasicInfo() {
			// 查询视频和图片
			let videoList;
			this.images = [];
			let res = await getAlarmBlindSpotDetailByFileuuid(this.fid);
			if (res.code == "0") {
				this.info = {
					...res.data,
					deptName: this.checkData(res.data.deptName),
					driverName: this.checkData(res.data.driverName),
					driverPhone: this.checkData(res.data.driverPhone),
					plate: this.checkData(res.data.plate),
					alarmType: this.checkData(res.data.alarmType),
					alarmTime: this.checkData(res.data.startTime),
					speed: this.checkData(res.data.speed),
					lng: this.checkData(res.data.lng),
					lat: this.checkData(res.data.lat),
					level: this.checkData(res.data.alarmGrade),
					vehicleId: this.checkData(res.data.vehicleId),
					address: this.checkData(res.data.location),
				}
			}
		},

		// 跳到历史轨迹
		goHistory(item) {
			let params = {
				tabStyleType: 'vehicle'
			}
			params.vehicleId = item.vehicleId

			let unixTime = this.dayjs(item.startTime).unix()

			let s_time = this.dayjs(item.startTime).format('YYYY-MM-DD HH:mm')

			let e_time = this.dayjs.unix(unixTime + 60).format('YYYY-MM-DD HH:mm')
			let startTime = s_time;
			let endTime = e_time;
			params.time = [startTime, endTime]
			this.$store.dispatch('setParams', params)
			uni.navigateTo({
				url: '/pagesMap/pastRoute/pastRoute',
			});

		},
	},



};
</script>

<style lang="scss" scoped>
.driver_class {
	width: 100%;
	height: 100%;
}

.image {
	width: 100%;
	// padding: 24rpx 24rpx 0 24rpx;
	display: flex;
	justify-content: space-around;
	margin-top: 15rpx;
}

.alarm-type {
	width: calc(100% - 110rpx);
	margin: 16rpx 20rpx;
	border-radius: 16rpx;
	padding: 36rpx;
	display: flex;
	flex-direction: column;
	background-color: #fff;
	margin-top: 16rpx;
}

.alarm-type-title {
	color: #4573FC;
	font-size: 36rpx;
	font-weight: bold;
}

.alarm-type-item {
	display: flex;
	justify-content: space-between;
	font-size: 32rpx;
	margin-top: 28rpx;

	.label {
		color: #999999;
	}
}

.alarm-detail {
	width: calc(100% - 116rpx);
	padding: 38rpx;
	display: flex;
	flex-direction: column;
	border-radius: 8rpx;
	background-color: #fff;
	margin: 16rpx 20rpx;
	font-size: 32rpx;
	margin-top: 20rpx;

	.alarm-detail-title {
		color: #4573FC;
		font-size: 36rpx;
		font-weight: bold;
	}

	.alarm-detail-name {
		display: flex;
		align-items: center;
		margin-top: 18rpx;

		.alarm-detail-image {
			width: 120rpx;
			height: 120rpx;
			overflow: hidden;
			border-radius: 50%;
			background-color: #C3C7CC;
		}
	}

	.image-right {
		flex: 1;
		height: 120rpx;
		margin-left: 24rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.alarm-detail-form {
		display: flex;
		justify-content: space-between;
		width: 100%;

		.label {
			color: #999999;
		}

		.val {
			color: #666666;
		}
	}

	.top {
		margin-top: 28rpx;
	}


}

.exports {
	width: calc(100% - 48rpx);
	margin: 24rpx;
	padding: 24rpx 0;
	margin-bottom: 24rpx;
	background-color: #4573FC;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 36rpx;
}
</style>