From a14471c7135fd6df767fd781fce00be169a0f837 Mon Sep 17 00:00:00 2001
From: rose <Rose@1980>
Date: Fri, 30 Jun 2023 16:28:24 +0800
Subject: [PATCH] =?UTF-8?q?ui=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/evan-steps/evan-step.vue           |  57 +--
 pages/login.vue                               |   4 +-
 static/scss/custom.scss                       |  11 +-
 .../touristPortrait/touristPortrait.vue       |  32 +-
 subPackMine/info/edit.vue                     |  30 +-
 subPackMine/info/index.vue                    |  75 ++--
 subPackWork/emergencyPlan/emergencyPlan.vue   |   2 +-
 subPackWork/myReport/reportDetail.vue         | 337 +++++++++---------
 8 files changed, 289 insertions(+), 259 deletions(-)

diff --git a/components/evan-steps/evan-step.vue b/components/evan-steps/evan-step.vue
index c0e0012..bc65433 100644
--- a/components/evan-steps/evan-step.vue
+++ b/components/evan-steps/evan-step.vue
@@ -4,11 +4,11 @@
 			<slot name="icon"></slot>
 		</view>
 		<view class="evan-step__icon-wrapper" :class="'evan-step__icon-wrapper--'+direction" v-else-if="icon">
-			<uni-icons :type="icon" size="22" :color="customIconColor" class="evan-step__custom-icon" :class="'evan-step__custom-icon--'+direction"></uni-icons>
+			<uni-icons :type="icon" size="22" :color="'#fff'" class="evan-step__custom-icon" :class="'evan-step__custom-icon--'+direction"></uni-icons>
 		</view>
 		<view v-else class="evan-step__circle" :class="['evan-step__circle--'+direction,'evan-step__circle--'+currentStatus]"
 		 :style="{borderColor:circleStyle.borderColor,backgroundColor:circleStyle.backgroundColor}">
-			<uni-icons v-if="currentStatus==='finish'" type="checkmarkempty" :color="primaryColor" :size="circleIconSize"></uni-icons>
+			<uni-icons v-if="currentStatus==='finish'" type="checkmarkempty" :color="'rgba(255,255,255,.5)'" :size="circleIconSize"></uni-icons>
 			<uni-icons v-else-if="currentStatus==='error'" type="closeempty" color="#fff" :size="circleIconSize"></uni-icons>
 			<text class="evan-step__circle__text" :class="'evan-step__circle__text--'+currentStatus" :style="{color:circleStyle.color}"
 			 v-else>{{index+1}}</text>
@@ -111,21 +111,21 @@
 				switch (this.currentStatus) {
 					case 'finish':
 						return {
-							backgroundColor: '#fff',
-							borderColor: this.primaryColor,
+							backgroundColor: 'rgba(255,255,255,.1)',
+							borderColor: 'rgba(255,255,255,.1)',
 							color: this.primaryColor
 						}
 					case 'process':
 						return {
-							backgroundColor: this.primaryColor,
-							borderColor: this.primaryColor,
+							backgroundColor: 'rgba(255,255,255,.3)',
+							borderColor: 'rgba(255,255,255,1)',
 							color: '#fff'
 						}
 					case 'wait':
 						return {
-							backgroundColor: '#ccc',
-							borderColor: '#ccc',
-							color: '#fff'
+							backgroundColor: 'rgba(255,255,255,.1)',
+							borderColor: 'rgba(255,255,255,.1)',
+							color: 'rgba(255,255,255,.5)'
 						}
 					case 'error':
 						return {
@@ -135,66 +135,66 @@
 						}
 					default:
 						return {
-							backgroundColor: '#fff',
-							borderColor: this.primaryColor,
-							color: this.primaryColor
+							backgroundColor: 'rgba(255,255,255,.1)',
+							borderColor: 'rgba(255,255,255,.1)',
+							color: '#fff'
 						}
 				}
 			},
 			titleColor() {
 				switch (this.currentStatus) {
 					case 'finish':
-						return 'rgba(0,0,0,0.65)'
+						return 'rgba(255,255,255,0.65)'
 					case 'process':
-						return 'rgba(0,0,0,0.85)'
+						return 'rgba(255,255,255,0.85)'
 					case 'wait':
-						return 'rgba(0,0,0,0.45)'
+						return 'rgba(255,255,255,0.45)'
 					case 'error':
 						return this.errorColor
 					default:
-						return 'rgba(0,0,0,0.85)'
+						return 'rgba(255,255,255,0.85)'
 				}
 			},
 			descriptionColor() {
 				switch (this.currentStatus) {
 					case 'finish':
-						return 'rgba(0,0,0,0.45)'
+						return 'rgba(255,255,255,0.45)'
 					case 'process':
-						return 'rgba(0,0,0,0.65)'
+						return 'rgba(255,255,255,0.65)'
 					case 'wait':
-						return 'rgba(0,0,0,0.45)'
+						return 'rgba(255,255,255,0.45)'
 					case 'error':
 						return this.errorColor
 					default:
-						return 'rgba(0,0,0,0.85)'
+						return 'rgba(255,255,255,0.85)'
 				}
 			},
 			customIconColor() {
 				switch (this.currentStatus) {
 					case 'finish':
-						return this.primaryColor
+						return 'rgba(255,255,255,0.85)'
 					case 'process':
-						return this.primaryColor
+						return 'rgba(255,255,255,0.85)'
 					case 'wait':
 						return '#ccc'
 					case 'error':
 						return this.errorColor
 					default:
-						return this.primaryColor
+						return 'rgba(255,255,255,0.85)'
 				}
 			},
 			lineColor() {
 				switch (this.nextStatus) {
 					case 'finish':
-						return this.primaryColor
+						return 'rgba(255,255,255,0.3)'
 					case 'process':
-						return this.primaryColor
+						return 'rgba(255,255,255,0.3)'
 					case 'wait':
-						return '#ddd'
+						return 'rgba(255,255,255,0.3)'
 					case 'error':
 						return this.errorColor
 					default:
-						return this.primaryColor
+						return 'rgba(255,255,255,0.3)'
 				}
 			},
 			contentHeight() {
@@ -464,4 +464,7 @@
 	.evan-step__content__description--horizontal {
 		text-align: center;
 	}
+	.step-items:first-child {
+		margin-left: 400rpx;
+	}
 </style>
diff --git a/pages/login.vue b/pages/login.vue
index 2b0fd49..8b3037c 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -21,8 +21,8 @@
           <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
         </view  >
       </view>
-      <view class="action-btn">
-        <button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
+      <view class="v-m-t20">
+        <button @click="handleLogin" class="v-btn v-btn-large block">登录</button>
       </view>
     </view>
 
diff --git a/static/scss/custom.scss b/static/scss/custom.scss
index d68cc70..a53753b 100644
--- a/static/scss/custom.scss
+++ b/static/scss/custom.scss
@@ -15,6 +15,9 @@
 }
  .v-m-t10{
      margin-top: 20rpx!important;
+}
+ .v-m-t20{
+     margin-top: 40rpx!important;
 }
  .v-m-p10{
      padding-top: 20rpx!important;
@@ -119,7 +122,7 @@ top:0;left: 0;	width: 100%;background: linear-gradient(to right,rgba(54,127,255,
   background: #ffffff;
   box-shadow: 0 6rpx 20rpx 0 rgba(0,0,0,.05);}
  .v-card{
-	 
+	 .uni-list--border-top{background-color: #fff!important;}
 	 .v-card-item{padding: 10rpx 0;}
 
      .v-card-content{overflow: hidden;}
@@ -128,9 +131,11 @@ top:0;left: 0;	width: 100%;background: linear-gradient(to right,rgba(54,127,255,
     }
      .v-card-image{
          width: 120rpx;
-         height: 120rpx;
+         height: 120rpx;overflow: hidden;
 		 border: 1px solid rgba(0,0,0,.05);
          margin-right: 20px;
+		 image{width: 120rpx;
+         height: 120rpx;}
     }
      .v-card-title{
          font-size: 32rpx;
@@ -325,8 +330,10 @@ button.v-btn-primary[disabled]{color: rgba(255,255,255,1)!important; opacity: .5
      color: #fff;
      background-color:#367FFF;
 }
+
  .v-form{	
 	 .tree-pick{width: 100%!important;}
+	 
 	 .selected-area{display: inline-block!important;color: rgba(0, 0, 0, 0.3)!important;	}
 	 .selected-list{display: inline-block!important;}
 	 .uni-date-x--border{border: none!important;}
diff --git a/subPackDeatil/touristPortrait/touristPortrait.vue b/subPackDeatil/touristPortrait/touristPortrait.vue
index 2302b70..ed78330 100644
--- a/subPackDeatil/touristPortrait/touristPortrait.vue
+++ b/subPackDeatil/touristPortrait/touristPortrait.vue
@@ -1,50 +1,50 @@
 <template>
-  <view class="detail-container">
-    <view class="g-body">
+  <view class="v-page">
+    <view class="v-card contain">
       <!--   客源地分布统计   -->
-      <view class="body-item">
+      <view class="v-card-item"><view class="v-card-box">
         <common-title :title="'客源地分布统计'" ></common-title>
         <view class="charts-box">
           <qiun-data-charts :chartData="chartData" :opts="chartOpts" type="bar" />
         </view>
-      </view>
+      </view></view>
       <!--   年龄占比   -->
-      <view class="body-item">
+      <view class="v-card-item"><view class="v-card-box">
         <common-title :title="'年龄占比'" ></common-title>
         <view class="charts-box-pie">
           <qiun-data-charts :chartData="chartData2" :opts="chartOpts2" type="pie" />
         </view>
-      </view>
+      </view></view>
       <!--   游客偏好   -->
-      <view class="body-item">
+      <view class="v-card-item"><view class="v-card-box">
         <common-title :title="'游客偏好'" ></common-title>
         <view class="charts-box-pie">
           <qiun-data-charts :chartData="chartData3" :opts="chartOpts3" type="pie" />
         </view>
-      </view>
+      </view></view>
       <!--   职业占比   -->
-      <view class="body-item">
+      <view class="v-card-item"><view class="v-card-box">
         <common-title :title="'职业占比'" ></common-title>
         <view class="charts-box-pie">
           <qiun-data-charts :chartData="chartData4" :opts="chartOpts4" type="pie" />
         </view>
-      </view>
+      </view></view>
       <!--   停留时长   -->
-      <view class="body-item">
+      <view class="v-card-item"><view class="v-card-box">
         <common-title :title="'停留时长'" ></common-title>
         <view class="charts-box-pie">
           <qiun-data-charts :chartData="chartData6" :opts="chartOpts6" type="column" />
         </view>
-      </view>
+      </view></view>
       <!--   学历占比   -->
-      <view class="body-item">
+      <view class="v-card-item"><view class="v-card-box">
         <common-title :title="'学历占比'" ></common-title>
         <view class="charts-box-pie">
           <qiun-data-charts :chartData="chartData5" :opts="chartOpts5" type="pie" />
         </view>
-      </view>
+      </view> </view>
       <!--   出行方式   -->
-      <view class="body-item">
+      <view class="v-card-item"><view class="v-card-box">
         <common-title :title="'出行方式'" ></common-title>
           <view class="charts-box">
             <qiun-data-charts
@@ -54,7 +54,7 @@
                 :ontouch="true"
             />
           </view>
-        </view>
+        </view> </view>
     </view>
 	</view>
 </template>
diff --git a/subPackMine/info/edit.vue b/subPackMine/info/edit.vue
index c4d7b26..56f3b85 100644
--- a/subPackMine/info/edit.vue
+++ b/subPackMine/info/edit.vue
@@ -1,19 +1,21 @@
 <template>
 	<view class="v-page">
-		<uni-forms ref="form" :model="user" labelWidth="80px" class="v-form">
-			<uni-forms-item label="用户昵称" name="nickName">
-				<uni-easyinput v-model="user.nickName" placeholder="请输入昵称" />
-			</uni-forms-item>
-			<uni-forms-item label="手机号码" name="phonenumber">
-				<uni-easyinput v-model="user.phonenumber" placeholder="请输入手机号码" />
-			</uni-forms-item>
-			<uni-forms-item label="邮箱" name="email">
-				<uni-easyinput v-model="user.email" placeholder="请输入邮箱" />
-			</uni-forms-item>
-			<uni-forms-item label="性别" name="sex" required>
-				<uni-data-checkbox v-model="user.sex" :localdata="sexs" />
-			</uni-forms-item>
-		</uni-forms>
+		<view class="v-card contain">
+			<uni-forms ref="form" :model="user" labelWidth="80px" class="v-form">
+				<uni-forms-item label="用户昵称" name="nickName">
+					<uni-easyinput v-model="user.nickName" placeholder="请输入昵称" />
+				</uni-forms-item>
+				<uni-forms-item label="手机号码" name="phonenumber">
+					<uni-easyinput v-model="user.phonenumber" placeholder="请输入手机号码" />
+				</uni-forms-item>
+				<uni-forms-item label="邮箱" name="email">
+					<uni-easyinput v-model="user.email" placeholder="请输入邮箱" />
+				</uni-forms-item>
+				<uni-forms-item label="性别" name="sex" required>
+					<uni-data-checkbox v-model="user.sex" :localdata="sexs" />
+				</uni-forms-item>
+			</uni-forms>
+		</view>
 		<view class="v-page-button contain">
 			<button class="v-btn-large" type="primary" @click="submit">提交</button>
 		</view>
diff --git a/subPackMine/info/index.vue b/subPackMine/info/index.vue
index 65c861a..b150b17 100644
--- a/subPackMine/info/index.vue
+++ b/subPackMine/info/index.vue
@@ -1,44 +1,47 @@
 <template>
-  <view class="container">
-    <uni-list>
-      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'person-filled'}" title="昵称" :rightText="user.nickName" />
-      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'phone-filled'}" title="手机号码" :rightText="user.phonenumber" />
-      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'email-filled'}" title="邮箱" :rightText="user.email" />
-      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'auth-filled'}" title="岗位" :rightText="postGroup" />
-      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'staff-filled'}" title="角色" :rightText="roleGroup" />
-      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'calendar-filled'}" title="创建日期" :rightText="user.createTime" />
-    </uni-list>
-  </view>
+	<view class="v-page">
+		<view class="v-card contain">
+			<view class="v-card-box">
+				<uni-list>
+					<uni-list-item showExtraIcon="true" title="昵称" :rightText="user.nickName" />
+					<uni-list-item showExtraIcon="true" title="手机号码" :rightText="user.phonenumber" />
+					<uni-list-item showExtraIcon="true" title="邮箱" :rightText="user.email" />
+					<uni-list-item showExtraIcon="true" title="岗位" :rightText="postGroup" />
+					<uni-list-item showExtraIcon="true" title="角色" :rightText="roleGroup" />
+					<uni-list-item showExtraIcon="true" title="创建日期" :rightText="user.createTime" />
+				</uni-list>
+			</view>
+		</view>
+	</view>
 </template>
 
 <script>
-  import { getUserProfile } from "@/api/system/user"
+	import {
+		getUserProfile
+	} from "@/api/system/user"
 
-  export default {
-    data() {
-      return {
-        user: {},
-        roleGroup: "",
-        postGroup: ""
-      }
-    },
-    onLoad() {
-      this.getUser()
-    },
-    methods: {
-      getUser() {
-        getUserProfile().then(response => {
-          this.user = response.data
-          this.roleGroup = response.roleGroup
-          this.postGroup = response.postGroup
-        })
-      }
-    }
-  }
+	export default {
+		data() {
+			return {
+				user: {},
+				roleGroup: "",
+				postGroup: ""
+			}
+		},
+		onLoad() {
+			this.getUser()
+		},
+		methods: {
+			getUser() {
+				getUserProfile().then(response => {
+					this.user = response.data
+					this.roleGroup = response.roleGroup
+					this.postGroup = response.postGroup
+				})
+			}
+		}
+	}
 </script>
 
 <style lang="scss">
-  page {
-    background-color: #ffffff;
-  }
-</style>
+</style>
\ No newline at end of file
diff --git a/subPackWork/emergencyPlan/emergencyPlan.vue b/subPackWork/emergencyPlan/emergencyPlan.vue
index 61d518c..b62cf7a 100644
--- a/subPackWork/emergencyPlan/emergencyPlan.vue
+++ b/subPackWork/emergencyPlan/emergencyPlan.vue
@@ -37,7 +37,7 @@
 						</view>
 						<view class="v-card-detail v-m-t8">
 							<view class="v-ellipsis2"><text
-									class="v-card-detail-title">预案说明</text>{{ item.description || '-' }}
+									class="">预案说明：</text>{{ item.description || '-' }}
 							</view>
 						</view>
 					</view>
diff --git a/subPackWork/myReport/reportDetail.vue b/subPackWork/myReport/reportDetail.vue
index cf6807b..6da3613 100644
--- a/subPackWork/myReport/reportDetail.vue
+++ b/subPackWork/myReport/reportDetail.vue
@@ -1,15 +1,15 @@
 <template>
 	<view class="v-page">
+		<view class="v-page-bg" style="height: 300rpx;"></view>
 		<view class="v-card contain">
 			<view class="v-card-item">
-				<view class="status-top">
-					<view>当前处理状态：</view>
-					<button class="rignt-button" size="mini" @click="goList">处理记录</button>
+				<view class="status-top">					
+					<button class="v-btn v-btn-primary-b" size="mini" @click="goList">处理记录</button>
 				</view>
 				<view class="status-bottom">
 					<evan-steps :active="datas.status-1" direction="horizontal">
 						<evan-step class="step-items" v-for="item in processState" :title="item.dictLabel"></evan-step>
-<!-- 						<evan-step title="处警"></evan-step>
+						<!-- 						<evan-step title="处警"></evan-step>
 						<evan-step title="结警"></evan-step>
 						<evan-step title="归档"></evan-step> -->
 					</evan-steps>
@@ -27,16 +27,21 @@
 							<uni-list-item title="联系人手机" :rightText="datas.phone || '/'" />
 							<uni-list-item title="标题" :rightText="datas.title" />
 							<uni-list-item title="事件位置" :rightText="'经度：'+datas.longitude+',纬度：'+datas.latitude " />
-						<map class="map" :markers="covers" :longitude="datas.longitude" :latitude="datas.latitude" name="" ></map>
+							<map class="map" :markers="covers" :longitude="datas.longitude" :latitude="datas.latitude"
+								name=""></map>
 							<uni-list-item title="描述" :rightText="datas.description" />
 							<uni-list-item>
 								<template v-slot:body>
 									<text class="slot-box slot-text">现场照片</text>
 								</template>
 								<template v-slot:footer>
-									<view class="image-box" v-if="datas.pathList">
-									<image class="iamges-list" mode="widthFix"  v-for="(item, index) in datas.pathList" :key="index" :src="requestUrl+item" @click="preview(item)"></image>
-									<q-previewImage ref="previewImage"  :urls="datas.pathList" @open="open" @close="close"></q-previewImage>
+									<view class="" v-if="datas.pathList">
+										<view class="v-card-image">
+											<image :mode="'widthFix'" v-for="(item, index) in datas.pathList"
+												:key="index" :src="requestUrl+item" @click="preview(item)"></image>
+										</view>
+										<q-previewImage ref="previewImage" :urls="datas.pathList" @open="open"
+											@close="close"></q-previewImage>
 									</view>
 								</template>
 							</uni-list-item>
@@ -49,182 +54,192 @@
 </template>
 
 <script>
-import EvanSteps from '@/components/evan-steps/evan-steps.vue';
-import EvanStep from '@/components/evan-steps/evan-step.vue';
+	import EvanSteps from '@/components/evan-steps/evan-steps.vue';
+	import EvanStep from '@/components/evan-steps/evan-step.vue';
 
-import UniIcons from '@/components/uni-icons/uni-icons.vue';
-import {getEventReportDetail} from '@/api/word/myReport.js'
-import {getDicts} from '@/api/system/dict/data.js'
-import config from '@/config.js';
-const baseUrl = config.baseUrl;
-export default {
-	components: {
-		EvanSteps,
-		EvanStep,
-		UniIcons,
-	},
-	data() {
-		return {
-			datas: {
-				id: 62,
-				status: '1',
-				reportTime: '2023-04-17 16:39',
-				classificationDataName: '咨询',
-				contactUser: '张三',
-				phone: '15845978656',
-				title: '咨询演练',
-				longitude: '114.465666',
-				latitude: '38.065909',
-				description: '应急演练',
-				pathList: null
-			},
-			processState:[], // 处理状态
-			id: 0,
-			covers: [],
-			videoShow: true, //video组件是否显示
-			requestUrl: baseUrl,
-			imgs: ['https://web-assets.dcloud.net.cn/unidoc/zh/multiport-20210812.png', 'https://web-assets.dcloud.net.cn/unidoc/zh/uni-function-diagram.png']
-		};
-	},
-	onLoad(option) {
-		this.id = option.id
-		this.getEventReportDetail(option.id)
-	},
-	mounted() {
-		this.getReportType();
-	},
-	watch : {
-	        datas:function(val) {
-	            console.log(this.datas )
-				if(!val.longitude){
+	import UniIcons from '@/components/uni-icons/uni-icons.vue';
+	import {
+		getEventReportDetail
+	} from '@/api/word/myReport.js'
+	import {
+		getDicts
+	} from '@/api/system/dict/data.js'
+	import config from '@/config.js';
+	const baseUrl = config.baseUrl;
+	export default {
+		components: {
+			EvanSteps,
+			EvanStep,
+			UniIcons,
+		},
+		data() {
+			return {
+				datas: {
+					id: 62,
+					status: '1',
+					reportTime: '2023-04-17 16:39',
+					classificationDataName: '咨询',
+					contactUser: '张三',
+					phone: '15845978656',
+					title: '咨询演练',
+					longitude: '114.465666',
+					latitude: '38.065909',
+					description: '应急演练',
+					pathList: null
+				},
+				processState: [], // 处理状态
+				id: 0,
+				covers: [],
+				videoShow: true, //video组件是否显示
+				requestUrl: baseUrl,
+				imgs: ['https://web-assets.dcloud.net.cn/unidoc/zh/multiport-20210812.png',
+					'https://web-assets.dcloud.net.cn/unidoc/zh/uni-function-diagram.png'
+				]
+			};
+		},
+		onLoad(option) {
+			this.id = option.id
+			this.getEventReportDetail(option.id)
+		},
+		mounted() {
+			this.getReportType();
+		},
+		watch: {
+			datas: function(val) {
+				console.log(this.datas)
+				if (!val.longitude) {
 					this.datas.longitude = '/'
 				}
-				if(!val.latitude){
+				if (!val.latitude) {
 					this.datas.latitude = '/'
 				}
-	        },
+			},
 
-	    },
-	methods: {
-		goList(){
-			uni.navigateTo({
-				url:'processingRecord?id='+this.id
-			})
-		},
-		preview(url) {
-			this.imgs = ['https://web-assets.dcloud.net.cn/unidoc/zh/multiport-20210812.png', 'https://web-assets.dcloud.net.cn/unidoc/zh/uni-function-diagram.png']; //设置图片数组
-			this.$nextTick(() => {
-				this.$refs.previewImage.open(url); // 传入当前选中的图片地址
-			});
 		},
-		onLongpress(e) {
-			//长按事件
-			console.log('当前长按的图片是' + e);
-			uni.showActionSheet({
-				itemList: ['转发给朋友', '保存到手机'],
-				success: function (res) {
-					console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
-				},
-				fail: function (res) {
-					console.log(res.errMsg);
-				}
-			});
-		},
-		open() {
-			//监听组件显示 （隐藏TabBar和NavigationBar，隐藏video原生组件）
-			uni.hideTabBar();
-			uni.setNavigationBarColor({
-				frontColor: '#000000', // 设置前景色为黑色
-				backgroundColor: '#000000' // 设置背景色为黑色
-			});
-			this.videoShow = false;
-		},
-		close() {
-			//监听组件隐藏 （显示TabBar和NavigationBar，显示video原生组件）
-			uni.showTabBar();
+		methods: {
+			goList() {
+				uni.navigateTo({
+					url: 'processingRecord?id=' + this.id
+				})
+			},
+			preview(url) {
+				this.imgs = ['https://web-assets.dcloud.net.cn/unidoc/zh/multiport-20210812.png',
+					'https://web-assets.dcloud.net.cn/unidoc/zh/uni-function-diagram.png'
+				]; //设置图片数组
+				this.$nextTick(() => {
+					this.$refs.previewImage.open(url); // 传入当前选中的图片地址
+				});
+			},
+			onLongpress(e) {
+				//长按事件
+				console.log('当前长按的图片是' + e);
+				uni.showActionSheet({
+					itemList: ['转发给朋友', '保存到手机'],
+					success: function(res) {
+						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
+					},
+					fail: function(res) {
+						console.log(res.errMsg);
+					}
+				});
+			},
+			open() {
+				//监听组件显示 （隐藏TabBar和NavigationBar，隐藏video原生组件）
+				uni.hideTabBar();
+				uni.setNavigationBarColor({
+					frontColor: '#000000', // 设置前景色为黑色
+					backgroundColor: '#000000' // 设置背景色为黑色
+				});
+				this.videoShow = false;
+			},
+			close() {
+				//监听组件隐藏 （显示TabBar和NavigationBar，显示video原生组件）
+				uni.showTabBar();
 
-			uni.setNavigationBarColor({
-				frontColor: '#000000', // 设置前景色为白色
-				backgroundColor: '#ffffff' // 设置背景色为黑色
-			});
+				uni.setNavigationBarColor({
+					frontColor: '#000000', // 设置前景色为白色
+					backgroundColor: '#ffffff' // 设置背景色为黑色
+				});
 
-			this.videoShow = true;
-		},
-		// 获取上报分类
-		 getReportType(){
-			   getDicts("alarm_status").then(res =>{
-				   if(res.code === 200){
-						 let arr = []
-					  res.data.forEach(item =>{
-						  arr.push(item)
-					  })
+				this.videoShow = true;
+			},
+			// 获取上报分类
+			getReportType() {
+				getDicts("alarm_status").then(res => {
+					if (res.code === 200) {
+						let arr = []
+						res.data.forEach(item => {
+							arr.push(item)
+						})
 						this.processState = arr
 						console.log(this.processState)
-				   }
-			   })
-		 },
-		// 获取数据详情
-		getEventReportDetail(id){
-			getEventReportDetail(id).then(res =>{
-				 if(res.code === 200){
-					 this.datas = res.data
-					 let obj = {
-					 	longitude: Number(this.datas.longitude),
-					 	latitude: Number(this.datas.latitude)
-					 }
+					}
+				})
+			},
+			// 获取数据详情
+			getEventReportDetail(id) {
+				getEventReportDetail(id).then(res => {
+					if (res.code === 200) {
+						this.datas = res.data
+						let obj = {
+							longitude: Number(this.datas.longitude),
+							latitude: Number(this.datas.latitude)
+						}
 
-					 this.covers.push(obj);
-				 }
-			})
+						this.covers.push(obj);
+					}
+				})
+			}
 		}
-	}
-};
+	};
 </script>
 
 <style lang="scss" scoped>
-.status-top {
-	display: flex;
-	align-items: center;
-	margin: 0 32rpx 20rpx;
-	position: relative;
-	height: fit-content;
-	padding-top: 20rpx;
-	justify-content: space-between;
+	.status-top {
+		display: flex;
+		align-items: center;
+		margin: 0 32rpx 20rpx;
+		position: relative;
+		height: fit-content;
+		padding-top: 20rpx;
+		justify-content: space-between;
 
-	.rignt-button {
-		margin: 0;
+		.rignt-button {
+			margin: 0;
+		}
 	}
-}
-.status-bottom {
-	::v-deep .evan-steps--horizontal {
-		justify-content: space-evenly;
 
-		.evan-step__content__title {
-			font-size: 24rpx;
+	.status-bottom {
+		::v-deep .evan-steps--horizontal {
+			justify-content: space-evenly;
+
+			.evan-step__content__title {
+				font-size: 24rpx;
+			}
 		}
 	}
-}
-.content-detail {
-	.map {
-		width: 100%;
-	}
 
-	::v-deep .slot-text {
-		width: 35%;
-		font-size: 28rpx;
-	}
+	.content-detail {
+		.map {
+			width: 100%;
+		}
 
-	.image-box{
-		display: flex;
-		flex: 1;
-		justify-content: flex-end;
+		::v-deep .slot-text {
+			width: 35%;
+			font-size: 28rpx;
+		}
+
+		.image-box {
+			display: flex;
+			flex: 1;
+			height: 120rpx;
 
-		.iamges-list{
-			width: 120rpx;
+			.iamges-list {
+				width: 120rpx;
+				height: 120rpx;
+			}
 		}
 	}
-}
-.step-items:first-child{
-	margin-left: 300rpx;
-}
-</style>
+
+	
+</style>
\ No newline at end of file