From 680dcd3efb79f439a1e4bf95240a0c2b8d975837 Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Mon, 26 Sep 2022 11:46:13 +0800
Subject: [PATCH] 事件管理、维修管理添加图片视频上传；维修管理添加地图详情页面、详情数据显示上传的图片和视频
---
src/views/eventgm/eventgmDetail.vue | 101 +++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 98 insertions(+), 3 deletions(-)
diff --git a/src/views/eventgm/eventgmDetail.vue b/src/views/eventgm/eventgmDetail.vue
index 19215e2..e2ac4c0 100644
--- a/src/views/eventgm/eventgmDetail.vue
+++ b/src/views/eventgm/eventgmDetail.vue
@@ -89,6 +89,63 @@
</el-form>
</el-card>
+ <!--事件图片或视频-->
+ <div
+ style=""
+ role="tab"
+ aria-expanded="true"
+ aria-controls="el-collapse-content-823"
+ aria-describedby="el-collapse-content-823"
+ >
+ <div
+ role="button"
+ tabindex="0"
+ class="el-collapse-item__header focusing is-active"
+ >
+ <div class="avue-group__header avue-group">
+ <i class="el-icon-s-order avue-group__icon"></i>
+ <h1 class="avue-group__title">事件图片</h1>
+ </div>
+ </div>
+ </div>
+ <el-card class="scene-image-box">
+ <el-image
+ v-for="(item, index) in picUrls"
+ :key="index"
+ :src="item"
+ :preview-src-list="picUrls"
+ v-show="picUrls.length > 0"
+ ></el-image>
+ <span v-show="picUrls.length == 0">暂无图片</span>
+ </el-card>
+
+ <div
+ style=""
+ role="tab"
+ aria-expanded="true"
+ aria-controls="el-collapse-content-823"
+ aria-describedby="el-collapse-content-823"
+ >
+ <div
+ role="button"
+ tabindex="0"
+ class="el-collapse-item__header focusing is-active"
+ >
+ <div class="avue-group__header avue-group">
+ <i class="el-icon-s-order avue-group__icon"></i>
+ <h1 class="avue-group__title">事件视频</h1>
+ </div>
+ </div>
+ </div>
+ <el-card>
+ <video
+ :src="videoUrls"
+ style="width: 200px; height: 200px; object-fit: fill"
+ controls
+ v-show="videoUrls != ''"
+ ></video>
+ <span v-show="videoUrls.length == 0">暂无视频</span>
+ </el-card>
<!--事件流程信息-->
<div
style=""
@@ -120,6 +177,7 @@
<el-table-column prop="remark" label="说明" align="center"></el-table-column>
</el-table>
</el-card>
+
<div v-if="this.form.no">
<!--维修人员信息-->
<div v-if="repairsDetail.toUserId != -1">
@@ -190,7 +248,6 @@
</el-card>
</div>
</el-col>
-
<el-col :span="12">
<open-layers-map ref="OpenLayersMap" @toData="toData" :isDetail="true" :pointLonLat="pointLonLat" :routeRange="form.routeRange"></open-layers-map>
</el-col>
@@ -204,10 +261,12 @@
import {getList as getRepairsorderRecordList} from "@/api/repairsorder/repairsorderRecord";
import {getDetail} from "@/api/repairsorder/repairsorder";
import {getUser} from "@/api/system/user"
+import EleGallery from 'vue-ele-gallery'
+import {isImage} from "@/util/determiningFileFormat";
export default {
name: "eventgmDetail",
- components: {OpenLayersMap},
+ components: {OpenLayersMap,EleGallery},
props:["detailInfo"],
data(){
return{
@@ -218,10 +277,21 @@
repairsRecord:[],
repairsDetail:{},
repairsPersonInfo:[],
+ picUrls:[],
+ videoUrls:[],
}
},
created() {
this.form = this.detailInfo;
+ if (this.form.picUrls){
+ this.form.picUrls.forEach(e=>{
+ if (isImage(e.value)){
+ this.picUrls.push(e.value)
+ }else {
+ this.videoUrls.push(e.value)
+ }
+ })
+ }
this.pointLonLat = {
lon:this.form.longitude,
lat:this.form.latitude
@@ -275,7 +345,7 @@
},
handleBack(){
this.$emit('isDetail');
- }
+ },
},
}
</script>
@@ -316,4 +386,29 @@
right: 3%;
z-index: 99999;
}
+
+.scene-image-box {
+ line-height: 32px !important;
+ height: auto;
+ max-height: 200px;
+ overflow-y: auto;
+
+ .el-card__body {
+ display: flex;
+ padding: 0 10px !important;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+
+ .x-audio-wrap.inline {
+ margin: 10px;
+ }
+
+ .el-image {
+ margin: 10px;
+ width: 160px;
+ height: 80px;
+ }
+ }
+}
</style>
--
Gitblit v1.9.3