139 lines
5.4 KiB
JavaScript
139 lines
5.4 KiB
JavaScript
import Vue from 'vue'
|
|
var vms = Vue.component("amplify-xmdt", {
|
|
template: `
|
|
<div>
|
|
<div class="amplify-title-icon">
|
|
<img src="/cdn/images/WEB_90022A49B38E4DA39DE4D8869D90A094.png" @click="openAmplify">
|
|
</div>
|
|
<transition name="el-zoom-in-top">
|
|
<div class="amplify-fixed" v-show="show" style="display: none" @click="closeAmplifyAll">
|
|
<div class="amplify-maxs">
|
|
<div class="amplify-titles">
|
|
<div v-html="modeltitle"></div>
|
|
<div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
|
|
</div>
|
|
<div class="amplify-contents">
|
|
<!--内容区域-->
|
|
|
|
<!-- <div :style="{'height': height + 'px','width':width+'px'}" class="amplify-carousel-max" @mouseout="carouselMouseout" @mouseover="carouselMouseover">-->
|
|
<!-- <div class="amplify-carousel-min" ref="carousel" :style="{'width':(width*forData.length)+'px','left':left+'px'}">-->
|
|
<!-- <div class="amplify-carousel-for" :style="{'width':width+'px'}" v-for="(item,i) in forData">-->
|
|
<!-- <img :src="item.url">-->
|
|
<!-- <div class="amplify-carousel-text" :style="{'width':width+'px'}">{{item.text}}</div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- <div>-->
|
|
<!-- <div class="amplify-carousel-left" :style="{'left':arrowLeft+'px'}" @click="clickCtrl('right')"><img src="/images/carousel_left.png"></div>-->
|
|
<!-- <div class="amplify-carousel-right" :style="{'right':arrowRight+'px'}" @click="clickCtrl('left')"><img src="/images/carousel_right.png"></div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
|
|
<div class="popup-project-introduction-details">
|
|
<div class="popup-project-introduction-info">
|
|
<el-row>
|
|
<el-col :span="6" v-for="item in forData" style="padding: 10px;">
|
|
<el-image style="width: 200px; height: 200px;" :src="item.url"
|
|
:preview-src-list="datas"> </el-image>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
`,
|
|
props: {
|
|
modeltitle:{
|
|
type:String
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
show: false,
|
|
height: 510,
|
|
width: 910,
|
|
forData: [],
|
|
arrowLeft: -45,
|
|
arrowRight:-45,
|
|
interval:undefined,
|
|
left:0,
|
|
direction:'left',
|
|
projectId:JSON.parse(localStorage.getItem("data1")).id,
|
|
datas:[]
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods: {
|
|
openAmplify() {
|
|
this.show = true
|
|
this.getData()
|
|
},
|
|
closeAmplify() {
|
|
this.show = false
|
|
},
|
|
closeAmplifyAll(e) {
|
|
if (e.target.className == 'amplify-fixed') {
|
|
this.show = false
|
|
}
|
|
},
|
|
// 调用接口
|
|
getData() {
|
|
let that = this
|
|
axios.get("/api/building/info?project_id=" + this.projectId).then(res => {
|
|
let data = res.data.data
|
|
let type = {}
|
|
for (let info of data) {
|
|
if (!type[info.sub_type]) {
|
|
type[info.sub_type] = new Array()
|
|
}
|
|
info.url = (info.file_path.indexOf("https") != -1) ? info.file_path : info.file_src
|
|
info.text = info.file_name
|
|
type[info.sub_type].push(info)
|
|
}
|
|
that.forData = type[0];
|
|
that.forData.map(item=>this.datas.push(item.url))
|
|
}).catch(err => {
|
|
|
|
})
|
|
},
|
|
carouselMouseover() {
|
|
this.arrowLeft = 10
|
|
this.arrowRight = 10
|
|
clearInterval(this.interval);
|
|
},
|
|
carouselMouseout() {
|
|
this.arrowLeft = -30
|
|
this.arrowRight = -30
|
|
this.direction = 'left'
|
|
this.interval = setInterval(this.timer, 3000);
|
|
},
|
|
clickCtrl(direction) {
|
|
this.direction = direction
|
|
this.timer()
|
|
},
|
|
timer() {
|
|
if (this.direction == 'left') {
|
|
this.left = this.left - this.width
|
|
if (this.left == -((this.forData.length) * this.width)) {
|
|
this.left = 0
|
|
}
|
|
} else {
|
|
if (this.left == 0) {
|
|
this.left = -((this.forData.length - 1) * this.width)
|
|
} else {
|
|
this.left = this.left + this.width
|
|
}
|
|
}
|
|
},
|
|
},
|
|
watch: {}
|
|
|
|
|
|
})
|
|
|
|
|