259 lines
7.2 KiB
Vue
259 lines
7.2 KiB
Vue
<template>
|
||
<!-- 视频宣传 -->
|
||
<div class="videoPhoto">
|
||
<div class="titleTxt">
|
||
<div>
|
||
<el-button type="text" :class="show? '' : 'changeCol'" class="video" @click="toVideo()"></el-button>
|
||
<!-- <el-button type="text" :class="show? 'changeCol' : ''" class="image" @click="toImage()">效果图</el-button> -->
|
||
</div>
|
||
<!-- <i class="el-icon-refresh"></i> -->
|
||
</div>
|
||
<video v-if="!show" :src="$store.state.FILEURL + projectData.videoUrl" class="topInner videos" autoplay controls loop></video>
|
||
<!-- src="@/assets/images/projectImg/videoPic.png" -->
|
||
|
||
<!-- 初次上传视频 -->
|
||
<div class="placeholderBox placeholderBox2" v-if="projectData.videoUrl == ''">
|
||
<img src="@/assets/images/noData3.png" alt srcset />
|
||
<p>
|
||
{{ $t('message.videoManage.empty') }},
|
||
<el-upload
|
||
style="display: inline-block"
|
||
class="upload-demo"
|
||
:action="$store.state.UPLOADURL"
|
||
:on-success="(file) => handleSuccess(file, 1)"
|
||
:on-error="(file) => handleError(file, 1)"
|
||
:beforeUpload="(file) => handleBeforeUpload(file, 1)"
|
||
name="files"
|
||
:show-file-list="false"
|
||
>
|
||
<!-- 点我上传 -->
|
||
<span>{{ $t('message.companyDiagram.uploadImg') }}</span>
|
||
</el-upload>
|
||
</p>
|
||
</div>
|
||
<!-- 更换视频 -->
|
||
<el-upload
|
||
v-if="projectData.videoUrl"
|
||
class="changeVideoBox"
|
||
:src="$store.state.FILEURL + projectData.videoUrl"
|
||
:action="$store.state.UPLOADURL"
|
||
:on-success="(file) => handleSuccess(file, 1)"
|
||
:on-error="(file) => handleError(file, 1)"
|
||
:beforeUpload="(file) => handleBeforeUpload(file, 1)"
|
||
name="files"
|
||
:show-file-list="false"
|
||
>
|
||
<span class="changeVideoBtn">{{ $t('message.companyDiagram.changeVideo') }}</span>
|
||
</el-upload>
|
||
|
||
<!-- 更换图片 -->
|
||
<!-- <div @mouseenter="showChangeImg = true" @mouseleave="showChangeImg = false" class="img">
|
||
<el-upload
|
||
v-if="showChangeImg"
|
||
class="changeImg"
|
||
:action="$store.state.UPLOADURL"
|
||
:on-success="(file) => handleSuccessTwo(file, 1)"
|
||
:on-error="(file) => handleError(file, 1)"
|
||
:beforeUpload="(file) => handleBeforeUpload(file, 1)"
|
||
name="files"
|
||
:show-file-list="false"
|
||
>
|
||
<span style="border: 1px solid #ffffff; padding: 5px">{{ $t('message.companyDiagram.changeImg') }}</span>
|
||
</el-upload>
|
||
<img v-if="show" class="imgStyle" :src="this.$store.state.FILEURL + imgUrl" alt />
|
||
</div> -->
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getProjectDetail, editProjectInfo } from '@/assets/js/api/baseInfo.js'
|
||
import { queryBySnData, eidtProjectShowConfig } from '@/assets/js/api/projectSummary.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
show: false,
|
||
projectData: {
|
||
videoUrl: ''
|
||
},
|
||
imgUrl: '', //图片
|
||
showChangeImg: false, //显示隐藏更换图片
|
||
fullscreenLoading: null
|
||
}
|
||
},
|
||
props: {
|
||
title: {
|
||
type: String,
|
||
default: 'default title'
|
||
}
|
||
},
|
||
created() {
|
||
this.getDataDateils()
|
||
this.getQueryBySnData()
|
||
},
|
||
methods: {
|
||
toVideo() {
|
||
this.show = false
|
||
},
|
||
// toImage() {
|
||
// this.show = true
|
||
// },
|
||
//获取项目详情
|
||
getDataDateils() {
|
||
let data = {
|
||
projectSn: this.$store.state.projectSn
|
||
}
|
||
console.log('当前的参数', data)
|
||
getProjectDetail(data).then(res => {
|
||
if (res.code == 200) {
|
||
this.projectData = res.result
|
||
console.log('projectData', this.projectData)
|
||
}
|
||
})
|
||
},
|
||
// 获取图片
|
||
getQueryBySnData() {
|
||
queryBySnData({
|
||
projectSn: this.$store.state.projectSn,
|
||
showType: 3
|
||
}).then(res => {
|
||
// console.log('------获取图片',res.result)
|
||
this.imgUrl = res.result.configValue
|
||
})
|
||
},
|
||
//效果图 保存
|
||
saveEffectData(url) {
|
||
// let configValue = JSON.stringify(url);
|
||
let data = {
|
||
projectSn: this.$store.state.projectSn,
|
||
showType: 3,
|
||
showTitle: this.$t('message.companyDiagram.resultImg'), //'效果图'
|
||
configValue: url
|
||
}
|
||
eidtProjectShowConfig(data).then(res => {
|
||
if (res.code == 200) {
|
||
this.getQueryBySnData()
|
||
}
|
||
})
|
||
},
|
||
//保存或删除宣传视频
|
||
saveOrDeleteVideo(url) {
|
||
editProjectInfo({
|
||
projectId: this.projectData.projectId,
|
||
videoUrl: url
|
||
}).then(res => {
|
||
this.$message.success(this.$t('message.companyDiagram.uploadSuccess')) //"上传成功"
|
||
this.projectData.videoUrl = url
|
||
})
|
||
},
|
||
// 文件上传 之前
|
||
handleBeforeUpload(file, type) {
|
||
console.log(file)
|
||
let fileType = file.type.split('/')[0]
|
||
if (fileType == 'video' || fileType == 'image') {
|
||
this.fullscreenLoading = this.$loading({
|
||
lock: true,
|
||
text: this.$t('message.companyDiagram.uploadHint'), // "上传中，请稍等。。。"
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(0, 0, 0, 0.7)'
|
||
})
|
||
return true
|
||
} else {
|
||
this.$message.error(this.$t('message.companyDiagram.uploadHint2')) //"请选择正确的文件"
|
||
return false
|
||
}
|
||
},
|
||
//上传失败
|
||
handleError(file, type) {
|
||
this.fullscreenLoading.close()
|
||
this.$message.error(this.$t('message.companyDiagram.uploadError')) //"上传失败，请重试"
|
||
},
|
||
//上传成功
|
||
handleSuccess(file, type) {
|
||
console.log('上传成功了吗', file)
|
||
if (file.code == 200 || file.status == 'SUCCESS') {
|
||
console.log(file)
|
||
var url = file.data[0].imageUrl
|
||
this.saveOrDeleteVideo(url)
|
||
}
|
||
this.fullscreenLoading.close()
|
||
},
|
||
|
||
handleSuccessTwo(file, type) {
|
||
if (file.code == 200 || file.status == 'SUCCESS') {
|
||
console.log(file)
|
||
var url = file.data[0].imageUrl
|
||
this.imgUrl = url
|
||
console.log('--------', this.imgUrl)
|
||
this.saveEffectData(url)
|
||
}
|
||
this.fullscreenLoading.close()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.videoPhoto {
|
||
box-sizing: border-box;
|
||
padding-top: 6px;
|
||
width: 100%;
|
||
height: 100%;
|
||
// border: 1px solid #0081c3;
|
||
.titleTxt {
|
||
// height: 30px;
|
||
// box-sizing: border-box;
|
||
// padding: 0 10px;
|
||
// display: flex;
|
||
// justify-content: space-between;
|
||
// align-items: center;
|
||
// font-size: 18px;
|
||
// color: #6ee4f0;
|
||
// cursor: pointer;
|
||
}
|
||
|
||
.topInner {
|
||
width: calc(100% - 33px);
|
||
height: calc(100% - 62px);
|
||
margin: -24px 0 15px 15px;
|
||
}
|
||
.video,
|
||
.image {
|
||
font-size: 18px;
|
||
color: #6ee4f0;
|
||
margin-top: 5px;
|
||
margin-left: 10px;
|
||
}
|
||
.changeCol {
|
||
color: white;
|
||
}
|
||
.changeVideoBtn {
|
||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||
padding: 3px 5px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 45%;
|
||
display: none;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
.videos:hover + .changeVideoBox .changeVideoBtn,
|
||
.changeVideoBox:hover .changeVideoBtn {
|
||
display: block;
|
||
}
|
||
.img {
|
||
width: 100%;
|
||
height: 100%;
|
||
.imgStyle {
|
||
width: 98%;
|
||
height: 88%;
|
||
margin-left: 1%;
|
||
}
|
||
.changeImg {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 45%;
|
||
}
|
||
}
|
||
}
|
||
</style> |