检测报告

pages/user/reportUni.vue

@@ -133,17 +133,24 @@
 								<view class="car-report-item-info">
 									<view v-if="item.SectionType===0">
 
-										<view class="nameBox" v-for="(item2,index) in item.value" :key="index">
-
-											<view class="contentB2">
-												<view class="leftName">{{item2.ItemName}}：</view>
-												<view v-if="item2.Value" class="itemValue">{{item2.Value}}</view>
-
-											</view>
-											<view class="kuang"
-												:class="{'report-color-red':item2.ValueType===3,'report-color-yellow':item2.ValueType===2}">
-												{{item2.ValueType===3?'急需处理':item2.ValueType===2?'密切关注':'状态良好'}}</view>
-
+										<view class="" v-for="(item2,index) in item.value" :key="index">
+                                           <view class="nameBox">
+											   <view class="contentB2">
+											   	<view class="leftName">{{item2.ItemName}}：</view>
+											   	<view v-if="item2.Value" class="itemValue">{{item2.Value}}</view>
+											   
+											   </view>
+											   <view class="kuang"
+											   	:class="{'report-color-red':item2.ValueType===3,'report-color-yellow':item2.ValueType===2}">
+											   	{{item2.ValueType===3?'急需处理':item2.ValueType===2?'密切关注':'状态良好'}}</view>
+										   </view>
+											
+                                          <!--   <view class="seeImg " v-if="item2.photoPath" @click="seeImg(item2.photoPath)">查看图片</view> -->
+										    <view class="imgLineBox" v-if="item2.photoPath">
+												   <view class="imgView" v-for="(imgurl,imgIndex) in item2.photoPath.split(',')">
+														<img class="lineImg" :src="imgurl" alt="" @click="seeImg3(item2.photoPath,imgIndex)">
+												   </view>
+										    </view>
 										</view>
 										<view class="contentB">
 											<view class="leftT">备注：</view>
@@ -153,6 +160,12 @@
 											<view class="leftT">说明：</view>
 											<view v-if="item.Describe" class="contentStr">{{item.Describe}}</view>
 										</view>
+										<view class="imgLineBox" v-if="item.value[0].photoAllPath">
+											   <view class="imgView"  v-for="(imgurl,imgIndex) in item.value[0].photoAllPath.split(',')">
+													<img class="lineImg" :src="imgurl" alt="" @click="seeImg3(item.value[0].photoAllPath,imgIndex)">
+											   </view>
+										</view>
+										<!-- <view class="seeImg2" v-if="item.value[0].photoAllPath" @click="seeImg(item.value[0].photoAllPath)">查看图片</view> -->
 									</view>
 									<view class="warning-lamp" v-if="item.SectionType===2">
 
@@ -165,23 +178,42 @@
 									</view>
 									<view v-if="item.SectionType===1">
 										<view class="car-report-rv">
-											<img :src="item.SectionPic" style="width: 100%; height: 100%;" alt="图片加载失败">
+											<img v-if="item.SectionPic" :src="item.SectionPic" style="width: 100%; height: 100%;" alt="图片加载失败">
+										   <img v-else src="http://api.dms.66km.com.cn/static/img/huanshi.png" style="width: 100%; height: 100%;" alt="图片加载失败">
 										</view>
 										<view class="car-report-rv-buttom"></view>
 									</view>
+									<view v-if="item.SectionType===2||item.SectionType===1">
+										<view class="imgLineBox" v-if="item.photoPath">
+										   <view class="imgView"  v-for="(imgurl,imgIndex) in item.photoPath">
+												<img class="lineImg" :src="imgurl" alt="" @click="seeImg2(item.photoPath,imgIndex)">
+										   </view>
+										</view>
+										<!-- <view class="seeImg" v-if="item.photoPath.length" @click="seeImg2(item.photoPath)">查看图片</view> -->
+									</view>
 									<view class="video-button carjcvideo-button" v-if="item.VideoName&&!item.showVideo">
 										<view class="video-play" @click="ckVideo(item)"></view>
 										{{item.VideoName}}
 									</view>
 									<view class="image-list">
-										<view class="image-list-item" v-for="(file,index) in item.photoPath"
+										<!-- <view class="image-list-item" v-for="(file,index) in item.photoPath"
 											:key="file.id">
 											<img mode='aspectFit' :src="file"  @click="sphotos(item.photoPath,index)" class="image-list-item-img"/>
+										</view> -->
+										<view v-if="item.VideoPath.length>0" class="image-list-item " >
+											<view  v-for="(vi,vindex) in item.VideoPath" class="videoLine">
+												<video :src="vi" style="width: 160rpx;height: 160rpx;" playsinline webkit-playsinline></video> 
+												<!-- <img src="http://dmsphoto.66km.com.cn/thFiles/C8C06AA1-7775-4C23-9454-38C64E004DA8.png" alt="" style="width: 160rpx;height: 160rpx;"> -->
+												<view class="videoLineZz" @click="showVideoFN(vi)"></view>
+											</view>
+											
+											
 										</view>
 									</view>
+									
 
 									<view class="video-wrapper" v-if="item.showVideo">
-										<video :src="item.VideoURL"></video>
+										<video :loop="false" :src="item.VideoURL"></video>
 										<!-- <video-player class="vjs-custom-skin" :options="getPlayerOptions(item.VideoURL)"></video-player> -->
 									</view>
 									<view class="car-report-remarks" v-if="item.SectionType&&item.Comment">
@@ -209,6 +241,11 @@
 				<image src="../../static/timg/icon_guanbi@2x.png" mode="" class="authorizCloseImg"></image>
 			</view>
 		</view>
+		<view class="authorizBox videoZz" v-if="videoUrlShow"  @click="videoUrlShow=false">
+			<view class="videoCont" @click.stop="">
+				<video :src="videoUrl" autoplay></video>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -229,11 +266,14 @@
 				authorizShow: false,
 				code: '',
 				iStatusBarHeight:'',
+				videoUrl:'',
+				videoUrlShow:false,
 			}
 		},
 		onLoad(opt) {
 			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
 			this.id = opt.id;
+			//this.id='C44E8DD8-1793-4544-BC25-AE2C77340ED4'//'761BD9FD-B5B4-468D-A136-3DB2AF68A203'
 			this.userInfo = this.$store.state.userInfo;
 			this.ext = this.$common.getExtStoreId();
 			if (this.userInfo) {
@@ -256,6 +296,55 @@
 
 		},
 		methods: {
+			seeImg2(arr,index){
+				uni.previewImage({
+					urls: arr,
+					current: index,
+					longPressActions: {
+						itemList: ['发送给朋友', '保存图片', ],
+						success: function(data) {
+						},
+						fail: function(err) {
+						}
+					}
+				});
+			},
+			seeImg3(img,index){
+					var arr=img.split(',')
+					uni.previewImage({
+						urls: arr,
+						current: index,
+						longPressActions: {
+							itemList: ['发送给朋友', '保存图片', ],
+							success: function(data) {
+							},
+							fail: function(err) {
+							}
+						}
+					});
+			},
+			showVideoFN(url){
+				console.log(url)
+				this.videoUrl=url
+				this.videoUrlShow=true
+			},
+			seeImg(img){
+				console.log(img)
+				var arr=img.split(',')
+				uni.previewImage({
+					urls: arr,
+					//current: index,
+					longPressActions: {
+						itemList: ['发送给朋友', '保存图片', '收藏'],
+						success: function(data) {
+							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
+						},
+						fail: function(err) {
+							console.log(err.errMsg);
+						}
+					}
+				});
+			},
 			sphotos(arr,index){
 				uni.previewImage({
 					urls: arr,
@@ -350,6 +439,9 @@
 							this.$set(item2, 'name', Object.keys(item2)[0])
 							this.$set(item2, 'value', item2[Object.keys(item2)[0]])
 							this.$set(item2, 'showVideo', false)
+							this.$set(item2, 'showVideo2', false)
+							this.$set(item2, 'VideoPath', item2.value[0].VideoPath&& item2.value[
+								0].VideoPath.split(',') || [])
 							this.$set(item2, 'VideoName', item2.value[0].VideoName)
 							this.$set(item2, 'VideoURL', item2.value[0].VideoURL)
 							this.$set(item2, 'photoPath', item2.value[0].photoPath && item2.value[
@@ -358,6 +450,7 @@
 							this.$set(item2, 'Describe', item2.value[0].Describe)
 							this.$set(item2, 'SectionType', item2.value[0].SectionType)
 							this.$set(item2, 'SectionPic', item2.value[0].SectionPic)
+							this.$set(item2, 'photoAllPath', item2.value[0].photoAllPath)
 						})
 					})
 					console.log(data)
@@ -604,9 +697,9 @@
 					// }
 
 					&.error-lamp {
-						// color: EC0F0A;
+						// color: #F03B3B;
 
-						// filter: drop-shadow(EC0F0A 10rpx 0);
+						// filter: drop-shadow(#F03B3B 10rpx 0);
 						// &svg path {
 						// 	fill: rgb(18, 136, 222)
 						// }
@@ -947,7 +1040,7 @@
 	.authorizContbutton {
 		width: 422rpx;
 		height: 88rpx;
-		background: #EC0F0A;
+		background: #D53533;
 		border-radius: 44rpx;
 		line-height: 88rpx;
 		text-align: center;
@@ -970,7 +1063,7 @@
 
 	.top {
 		height: 190rpx;
-		background: #EC0F0A;
+		background: #FF0000;
 		margin-left: -20rpx;
 		margin-right: -20rpx;
 	}
@@ -1222,4 +1315,42 @@
 		font-size: 24rpx;
 		color: #999999;
 	}
+	.videoLine{
+		position: relative;
+		margin-top: 20rpx;
+	}
+	.videoLineZz{
+		width: 160rpx;height: 160rpx;
+		position: absolute;top: 0;left: 0;
+		z-index: 11;
+	}
+	.videoCont{
+		width: 100vw;
+	}
+	.videoCont video{
+		width: 100vw;
+	}
+	.videoZz{
+		display: flex;
+		align-items: center;
+	}
+	.seeImg{
+		padding-left: 20rpx;font-size: 26rpx;
+		color: #1677FF;line-height: 40rpx;
+	}
+	.seeImg2{
+		font-size: 26rpx;
+		color: #1677FF;line-height: 40rpx;
+	}
+	.imgLineBox{
+		display: flex;
+	}
+	.lineImg{
+		width: 160rpx;height: 160rpx;
+	}
+	.imgView{
+		margin-right: 20rpx;
+		padding-top: 16rpx;
+		padding-bottom: 20rpx;
+	}
 </style>