From 680dcd3efb79f439a1e4bf95240a0c2b8d975837 Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Mon, 26 Sep 2022 11:46:13 +0800
Subject: [PATCH] 事件管理、维修管理添加图片视频上传；维修管理添加地图详情页面、详情数据显示上传的图片和视频
---
src/const/eventgm/eventgm.js | 15 +
src/views/repairsorder/repairsorderDetail.vue | 264 +++++++++++++++++++++++++++++++++
src/views/eventgm/eventgmDetail.vue | 101 ++++++++++++
src/views/repairsorder/repairsorder.vue | 32 +++
src/util/determiningFileFormat.js | 4
src/const/repairsorder/repairsorder.js | 14 +
src/views/taskinfo/taskinfoDetail.vue | 12
src/views/eventgm/eventgm.vue | 13 +
8 files changed, 443 insertions(+), 12 deletions(-)
diff --git a/src/const/eventgm/eventgm.js b/src/const/eventgm/eventgm.js
index bfe4e5c..2d6f648 100644
--- a/src/const/eventgm/eventgm.js
+++ b/src/const/eventgm/eventgm.js
@@ -157,6 +157,21 @@
},
},
{
+ label: '图片上传',
+ prop: 'picUrls',
+ type: 'upload',
+ span: 24,
+ listType: 'picture-card',
+ limit:5,
+ hide:true,
+ props:"value",
+ propsHttp: {
+ url:'link',
+ res: 'data'
+ },
+ action: '/api/blade-resource/oss/endpoint/put-file-attach'
+ },
+ {
label: "修改人",
prop: "updateUser",
type: "input",
diff --git a/src/const/repairsorder/repairsorder.js b/src/const/repairsorder/repairsorder.js
index c387ec9..d21c78a 100644
--- a/src/const/repairsorder/repairsorder.js
+++ b/src/const/repairsorder/repairsorder.js
@@ -89,6 +89,20 @@
}],
},
{
+ label: '图片上传',
+ prop: 'picUrls',
+ type: 'upload',
+ span: 24,
+ listType: 'picture-card',
+ limit:5,
+ hide:true,
+ propsHttp: {
+ url:'link',
+ res: 'data'
+ },
+ action: '/api/blade-resource/oss/endpoint/put-file-attach'
+ },
+ {
label: "内容",
prop: "content",
type: "textarea",
diff --git a/src/util/determiningFileFormat.js b/src/util/determiningFileFormat.js
new file mode 100644
index 0000000..be72c3c
--- /dev/null
+++ b/src/util/determiningFileFormat.js
@@ -0,0 +1,4 @@
+export const isImage = (str) =>{
+ var reg = /.(png|jpg|gif|jpeg|webp)$/;
+ return reg.test(str);
+}
diff --git a/src/views/eventgm/eventgm.vue b/src/views/eventgm/eventgm.vue
index b90d0c7..2257b2c 100644
--- a/src/views/eventgm/eventgm.vue
+++ b/src/views/eventgm/eventgm.vue
@@ -8,6 +8,7 @@
:before-open="beforeOpen"
v-model="form"
ref="crud"
+ :upload-before="uploadBefore"
@row-update="rowUpdate"
@row-save="rowSave"
@row-del="rowDel"
@@ -117,6 +118,9 @@
},
methods: {
rowSave(row, done, loading) {
+ if (!row.picUrls){
+ row.picUrls = null
+ }
add(row).then(() => {
this.onLoad(this.page);
this.$message({
@@ -184,7 +188,6 @@
beforeOpen(done, type) {
if (["edit", "view"].includes(type)) {
getDetail(this.form.id).then(res => {
- console.log(res);
this.form = res.data.data;
this.form.avueMapAddress = {
"formattedAddress": this.form.address,
@@ -239,6 +242,14 @@
this.selectionClear();
});
},
+ uploadBefore(file, done, loading,column) {
+ if (["image","video"].includes(file.type.split("/")[0])){
+ done()
+ }else {
+ this.$message.warning('请上传图片或视频')
+ loading()
+ }
+ },
handleDisposal(row) {
this.disposalVisible = true
this.$nextTick(() => {
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>
diff --git a/src/views/repairsorder/repairsorder.vue b/src/views/repairsorder/repairsorder.vue
index 96c3163..d1e2ab0 100644
--- a/src/views/repairsorder/repairsorder.vue
+++ b/src/views/repairsorder/repairsorder.vue
@@ -1,6 +1,6 @@
<template>
<basic-container>
- <avue-crud :option="option"
+ <avue-crud v-show="!detailVisible" :option="option"
:table-loading="loading"
:data="data"
:page.sync="page"
@@ -8,9 +8,11 @@
:before-open="beforeOpen"
v-model="form"
ref="crud"
+ :upload-before="uploadBefore"
@row-update="rowUpdate"
@row-save="rowSave"
@row-del="rowDel"
+ @row-dblclick="rowClick"
@search-change="searchChange"
@search-reset="searchReset"
@selection-change="selectionChange"
@@ -28,7 +30,7 @@
</el-button>
</template>
<template slot-scope="{type,size,row,index}" slot="menu">
- <el-button icon="el-icon-view" :size="size" :type="type" @click="$refs.crud.rowView(row,index)">查 看</el-button>
+ <el-button icon="el-icon-view" :size="size" :type="type" @click="rowClick(row)">查 看</el-button>
<el-button icon="el-icon-check" :size="size" :type="type" :disabled="row.state == 1" @click="handleSendorder(row)">派 单</el-button>
<el-button icon="el-icon-edit" :size="size" :type="type" :disabled="row.state >= 1" @click="$refs.crud.rowEdit(row,index)">编 辑</el-button>
<el-button icon="el-icon-delete" :size="size" :type="type" :disabled="row.state >= 1" @click="$refs.crud.rowDel(row,index)">删 除</el-button>
@@ -37,6 +39,7 @@
<!-- 弹窗, 派单 -->
<sendorder v-if="sendorderVisible" ref="sendorder" @refreshOnLoad="refreshChange"></sendorder>
+ <repairsorder-detail v-if="detailVisible" ref="detailVisible" :detailInfo="detailInfo" @isDetail="isDetail"></repairsorder-detail>
</basic-container>
</template>
@@ -45,9 +48,11 @@
import option from "@/const/repairsorder/repairsorder";
import {mapGetters} from "vuex";
import sendorder from "./sendorder.vue"
+ import RepairsorderDetail from "@/views/repairsorder/repairsorderDetail";
export default {
components: {
+ RepairsorderDetail,
sendorder
},
data() {
@@ -63,7 +68,9 @@
selectionList: [],
option: option,
data: [],
- sendorderVisible: false
+ sendorderVisible: false,
+ detailVisible:false,
+ detailInfo:{},
};
},
watch: {
@@ -98,6 +105,9 @@
},
methods: {
rowSave(row, done, loading) {
+ if (!picUrls){
+ row.picUrls = null
+ }
add(row).then(() => {
this.onLoad(this.page);
this.$message({
@@ -213,11 +223,27 @@
this.selectionClear();
});
},
+ uploadBefore(file, done, loading,column) {
+ if (["image","video"].includes(file.type.split("/")[0])){
+ done()
+ }else {
+ this.$message.warning('请上传图片或视频')
+ loading()
+ }
+ },
handleSendorder(row) {
this.sendorderVisible = true
this.$nextTick(() => {
this.$refs.sendorder.init(row)
})
+ },
+ //点击当前行事件
+ rowClick(val){
+ this.detailInfo = val
+ this.isDetail();
+ },
+ isDetail(){
+ this.detailVisible = !this.detailVisible
}
}
};
diff --git a/src/views/repairsorder/repairsorderDetail.vue b/src/views/repairsorder/repairsorderDetail.vue
new file mode 100644
index 0000000..96cf186
--- /dev/null
+++ b/src/views/repairsorder/repairsorderDetail.vue
@@ -0,0 +1,264 @@
+<template>
+ <div>
+ <el-button class="backBtn" size="small" type="success" icon="el-icon-back" plain @click="handleBack">返 回
+ </el-button>
+ <el-row>
+ <el-col :span="12">
+ <div>
+ <el-card class="trackClass" style="overflow-y: auto">
+ <!--维修信息-->
+ <div
+ style="margin-top: -10px"
+ 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-message-solid avue-group__icon"></i>
+ <h1 class="avue-group__title">维修信息</h1>
+ </div>
+ </div>
+ </div>
+ <el-card>
+ <el-form
+ :model="form"
+ label-position="right"
+ size="mini"
+ class="taskinfoForm"
+ label-width="100px"
+ style="
+ margin-top: 20px;
+ margin-left: 10px;
+ margin-right: 10px;
+ height: calc(100% - 40px);
+ width: calc(100% - 20px);
+ "
+ >
+ <el-row>
+ <el-col span="12">
+ <el-form-item label="工单编号">
+ <el-input disabled="true" v-model="form.no" autocomplete="off"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col span="12">
+ <el-form-item label="任务状态">
+ <el-input disabled="true" v-model="form.$state" autocomplete="off"></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+
+ <el-row>
+ <el-col span="24">
+ <el-form-item label="地址">
+ <el-input disabled="true" v-model="form.location" autocomplete="off"></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+
+ <el-row>
+ <el-col span="24">
+ <el-form-item label="任务内容">
+ <el-input disabled="true" v-model="form.content" autocomplete="off"></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+
+ </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="margin-top: 15px"
+ 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-custom avue-group__icon"></i>
+ <h1 class="avue-group__title">维修人员信息</h1>
+ </div>
+ </div>
+ </div>
+ <el-card>
+ <el-table
+ ref="multipleTable"
+ :data="repairPersonInfo"
+ tooltip-effect="dark"
+ style="width: 100%"
+ max-height="240"
+ >
+ <el-table-column prop="name" label="姓名" width="150" align="center"></el-table-column>
+ <el-table-column prop="realName" label="真名" width="150" align="center"></el-table-column>
+ <el-table-column prop="phone" label="联系电话" width="170" align="center"></el-table-column>
+ </el-table>
+ </el-card>
+ </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>
+ </el-row>
+ </div>
+</template>
+
+<script>
+import OpenLayersMap from "@/components/OpenLayersMap/index";
+import {getUser} from "@/api/system/user"
+import {isImage} from "@/util/determiningFileFormat";
+export default {
+ name: "repairsorderDetail",
+ components: {OpenLayersMap},
+ props:["detailInfo"],
+ data(){
+ return{
+ form:{},
+ pointLonLat: {},
+ repairPersonInfo:[],
+ 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
+ }
+ this.getUser()
+ },
+ methods:{
+ // 获取巡检人员信息
+ getUser(){
+ if (this.form.toUserId != -1){
+ getUser(this.form.toUserId).then(res=>{
+ if (res.data.code == 200){
+ this.repairPersonInfo.push(res.data.data)
+ }
+ })
+ }
+ },
+ handleBack(){
+ this.$emit('isDetail');
+ }
+ },
+}
+</script>
+
+<style scoped lang="scss">
+
+/deep/ .el-table tbody tr:hover > td {
+ background-color: #f3ec94 !important
+}
+
+.el-col {
+ height: calc(100% - 5px);
+}
+
+.trackClass {
+ height: 85vh;
+ overflow: auto;
+ overflow-x: hidden;
+}
+
+.receiving-alarm-box {
+ line-height: 32px !important;
+ height: 200px;
+ overflow-y: auto;
+
+ .el-card__body {
+ padding: 0 10px !important;
+ }
+}
+
+#old_video::-webkit-media-controls-timeline {
+ display: block;
+}
+
+.backBtn{
+ position: fixed;
+ top: 20%;
+ right: 3%;
+ z-index: 99999;
+}
+</style>
diff --git a/src/views/taskinfo/taskinfoDetail.vue b/src/views/taskinfo/taskinfoDetail.vue
index b6bf0a0..61120b1 100644
--- a/src/views/taskinfo/taskinfoDetail.vue
+++ b/src/views/taskinfo/taskinfoDetail.vue
@@ -149,11 +149,13 @@
methods:{
//获取巡检人员信息
getUser(){
- getUser(this.form.toUserId).then(res=>{
- if (res.data.code == 200){
- this.accepterInfo.push(res.data.data)
- }
- })
+ if (this.form.toUserId != -1) {
+ getUser(this.form.toUserId).then(res => {
+ if (res.data.code == 200) {
+ this.accepterInfo.push(res.data.data)
+ }
+ })
+ }
},
handleBack(){
this.$emit('isDetail');
--
Gitblit v1.9.3