115 lines
3.9 KiB
JavaScript
115 lines
3.9 KiB
JavaScript
/**
|
|
* 顶部header
|
|
*/
|
|
Vue.component("swiper-row", {
|
|
template: `
|
|
<div>
|
|
<div>
|
|
<div class="sjk-chart-line-title">
|
|
<slot></slot>
|
|
<!-- <div :class="btnNav==4?'active':''" @click="onClickPoint(4)">风速</div>-->
|
|
<!-- <div :class="btnNav==5?'active':''" @click="onClickPoint(5)">温度</div>-->
|
|
<!-- <div :class="btnNav==6?'active':''" @click="onClickPoint(6)">湿度</div>-->
|
|
</div>
|
|
<!-- <environment-line-chart :height="220" :data="exceedanceTimesData"></environment-line-chart>-->
|
|
<div class="OutBox" @mouseout="costMouseout" @mouseover="costMouseover">
|
|
<!-- 左边按钮-->
|
|
<div class="btnLeft" @click="btnLeft">
|
|
<img src="/images/carousel_left.png"
|
|
style="width: 100%;height: 100%;background-color:#040d33;">
|
|
</div>
|
|
<div class="outBigBox" ref="modifyContent">
|
|
<ul class="ulBigBox" ref="width">
|
|
<li class="liSmallBox" v-for="(item,index) in srcList" :key="index">
|
|
<div class="demo-image__preview">
|
|
<el-image
|
|
class="ImgBox"
|
|
:src="item"
|
|
:preview-src-list="srcList">
|
|
</el-image>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- 右边按钮-->
|
|
<div class="btnRight" @click="btnRight">
|
|
<img src="/images/carousel_right.png"
|
|
style="width: 100%;height: 100%;background-color:#040d33;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
`,
|
|
props: {
|
|
srcList: {
|
|
type: Array,
|
|
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
btnNav: 1,
|
|
//造价
|
|
costIndex: 0,
|
|
direction: 'right',
|
|
costInterval: undefined,
|
|
}
|
|
},
|
|
mounted() {
|
|
this.init()
|
|
},
|
|
methods: {
|
|
//初始化
|
|
init() {
|
|
// 图片定时器
|
|
// 造价 定时器
|
|
this.costInterval = setInterval(this.manufacturingCostRoll, 2000);
|
|
|
|
this.$nextTick(() => {
|
|
var width = $(".liSmallBox").innerWidth() + 28
|
|
const a = $(this.$refs['width']).width = width * this.srcList.length
|
|
console.log(a)
|
|
})
|
|
},
|
|
|
|
btnLeft() {
|
|
this.direction = 'left'
|
|
this.manufacturingCostRoll()
|
|
},
|
|
btnRight() {
|
|
this.direction = 'right'
|
|
this.manufacturingCostRoll()
|
|
},
|
|
manufacturingCostRoll() {
|
|
var width = $(".liSmallBox").innerWidth() + 28
|
|
if (this.direction == 'right') {
|
|
if (this.costIndex == 7) {
|
|
this.costIndex = 0
|
|
} else {
|
|
this.costIndex = this.costIndex + 1
|
|
}
|
|
} else {
|
|
if (this.costIndex == 0) {
|
|
this.costIndex = 7
|
|
} else {
|
|
this.costIndex = this.costIndex - 1
|
|
}
|
|
}
|
|
$(this.$refs.modifyContent).animate({scrollLeft: (width * this.costIndex) + 'px'})
|
|
this.direction = 'right'
|
|
// console.log(123)
|
|
},
|
|
costMouseover() {
|
|
clearInterval(this.costInterval);
|
|
},
|
|
costMouseout() {
|
|
this.costInterval = setInterval(this.manufacturingCostRoll, 2000);
|
|
},
|
|
onClickPoint(n) {
|
|
this.btnNav = n;
|
|
},
|
|
},
|
|
|
|
})
|