admin/ys-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改巡检图片视频内容

Browse Source
This commit is contained in:
xuli
2025-12-19 16:54:02 +08:00
parent d32152912a
commit 3da8fe4027
24 changed files with 627 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/pages/business/polling/problemReport.vue
View File

@@ -45,15 +45,32 @@
<view class="report-list" style="display:block;">
<view class="r-title">问题点位照片或视频 <text>*</text></view>
<view class="img-flex">
<view class="img-show" v-for="(item,index) in imgArr" :key="index" @click="showMediaPreview(item)">
<img :src="item.shortUrl" />
<view class="img-show" v-for="(item2,index2) in imgArr" :key="index2" @click="showMediaPreview(item2)">
<view class="img-delete" @click.stop="handleDelete(imgArr,index2)">
<uni-icons type="closeempty" size="16" color="#fff"></uni-icons>
</view>
<!-- <img :src="item2.shortUrl" /> -->
<image :src="item2.shortUrl" mode="aspectFill" />
</view>
<view class="img-show" v-for="(item,index) in videoArr" :key="index" @click="showMediaPreview(item)">
<video :src="item.url" controls></video>
<view class="img-show" v-for="(item2,index2) in videoArr" :key="index2" @click="showMediaPreview(item2)">
<view class="img-delete" @click.stop="handleDelete(videoArr,index2)">
<uni-icons type="closeempty" size="16" color="#fff"></uni-icons>
</view>
<view class="img-icon">
<img :src="'static/images/polling/icon-play.png'" />
</view>
<!-- <video :src="item.url" controls></video> -->
<DomVideoPlayer :src="item2.url" objectFit="cover" />
</view>
<!-- #ifdef APP-PLUS -->
<view class="img-con" @click="chooseMedia">
<img :src="'static/images/polling/icon-AddPorV.png'" class="img-pic" />
<!-- loading -->
<view class="upload-loading" v-if="imgLoading">
<uni-icons type="refreshempty" size="30" color="#C9C9C9"></uni-icons>
<view>上传中....</view>
</view>
</view>
<!-- #endif -->
<!-- #ifndef APP-PLUS -->
@@ -77,10 +94,11 @@
<script setup>
import { ref,onMounted,onUnmounted,nextTick,computed,reactive, watch } from 'vue'
import { onLoad,onHide} from '@dcloudio/uni-app';
import { onLoad,onShow,onHide} from '@dcloudio/uni-app';
import customHeader from '@/components/customHeader.vue';
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
import mediaPreview from "@/components/mediaPreview.vue"
import DomVideoPlayer from 'uniapp-video-player'
import { getUserInfo } from '@/api/auth.js'
import { problemDetail,problemAdd,problemEdit,minioUpload } from '@/api/polling.js'
import {compressImageUni,getFileType} from '@/utils/common.js'
@@ -103,6 +121,10 @@ onLoad(async option => {
let userinfo = await getUserInfo({});
realname.value = userinfo.realname
})
onShow(()=>{
getList();
})
// 查询列表
@@ -115,6 +137,7 @@ const mescrollInit = (mescroll) => {
mescrollRef.value = mescroll;
};
const downOption = ref({
use:false,
auto: true,
textInOffset: '下拉刷新',
textOutOffset: '释放更新',
@@ -163,11 +186,13 @@ const getList = async () => {
imgArr.value.push({
shortUrl:minioObj.minioThumbUrl +"/"+item,
url:minioObj.minioUrl +"/"+item,
name:item
})
}else if(getFileType(item)=='video'){
videoArr.value.push({
shortUrl:minioObj.minioThumbUrl +"/"+item,
url:minioObj.minioUrl +"/"+item,
name:item
})
}
})
@@ -178,6 +203,7 @@ const getList = async () => {
let mediaArr = ref([]);//传给后台的地址
let imgArr=ref([]);//图片 后台返回的
let videoArr = ref([]);//视频 后台返回的
let imgLoading = ref(false)
const chooseMedia = () => {
uni.chooseMedia({
count: 9,
@@ -206,23 +232,28 @@ const chooseMedia = () => {
formData: {
directory:'polling'
},
}
}
imgLoading.value=true;
minioUpload(param).then(res=>{
let data = res.data;
let data = res.data;console.log("上传成功后=>",res)
mediaArr.value.push(data.fileName);
if (file.fileType === 'image') {// 图片
// imgArr.value.push(data.fileUrl)
imgArr.value.push({
shortUrl:minioObj.minioThumbUrl +"/"+data.fileName,
url:minioObj.minioUrl +"/"+data.fileName,
name:data.fileName
})
} else if (file.type === 'video') {// 视频
} else if (file.fileType === 'video') {// 视频
// videoArr.value.push(data.fileUrl)
videoArr.value.push({
shortUrl:minioObj.minioThumbUrl +"/"+data.fileName,
url:minioObj.minioUrl +"/"+data.fileName,
name:data.fileName
})
}
}).finally(()=>{
imgLoading.value=false;
})
});
@@ -230,11 +261,20 @@ const chooseMedia = () => {
});
}
// 视频或图片删除 根据数组下标删除数组里的某个图片或视频
const handleDelete=(arr,index2)=>{
arr.splice(index2, 1);
let item = arr[index2];
mediaArr.value = mediaArr.value.filter(item2=>item2!=item.name);
console.log("删除后=>",mediaArr.value)
}
// 放大视频或图片
let isVisible= ref(false);//放大处理
let mediaUrl= ref('');//放大地址
let videoShow = ref(true);
const showMediaPreview=(item)=>{
// console.log("调用放大视频==>",item)
isVisible.value = true;
videoShow.value = false;
mediaUrl.value = item.url
@@ -419,9 +459,12 @@ const handleSubmit=()=>{
display: flex;
flex-flow:row wrap;
margin-bottom:30rpx;
width:100%;
}
.report-list .img-show img,
.report-list .img-show video{
.report-list .img-show image,
.report-list .img-show video,
.report-list .img-show .player-wrapper{
width:210rpx;
height: 140rpx;
}
@@ -450,6 +493,40 @@ const handleSubmit=()=>{
width: calc(100% / 3 - 10px); /* 减去一些间隙以避免溢出 */
margin:20rpx 20rpx 0 0;
}
.report-list .img-show{
position: relative;
}
.report-list .img-show .img-delete{
position: absolute;
/* #ifndef APP-PLUS */
right:4rpx;
/* #endif */
/* #ifdef APP-PLUS */
right:4rpx;
/* #endif */
top:8rpx;
width:34rpx;
height:34rpx;
line-height:34rpx;
border-radius:3rpx;
background-color: rgba(0, 0, 0, 0.6);
text-align: center;
z-index:1;
}
.report-list .img-show .img-icon{
position: absolute;
top:50%;
left: 50%;
width: 64rpx;
height:64rpx;
margin-left:-32rpx;
margin-top:-32rpx;
z-index:1;
}
.report-list .img-show .img-icon img{
width: 64rpx;
height:64rpx;
}
.btn-submit{