119 lines
3.7 KiB
JavaScript
119 lines
3.7 KiB
JavaScript
/**
|
|
* 顶部header
|
|
*/
|
|
Vue.component("planne-output", {
|
|
template: `
|
|
<!--最外班盒子-->
|
|
<div>
|
|
<div class="outBox"
|
|
@mouseover="MouseEnter"
|
|
@mouseout="MouseLeave"
|
|
ref="jhxj"
|
|
>
|
|
<div v-if="data.length == 0" style="height: 200px;text-align: center;line-height: 200px;color: #aaaaaa">暂无数据</div>
|
|
<!--每一个盒子-->
|
|
<div v-if="data.length> 0" class="allBox" v-for="(item,index) in data" >
|
|
<!--时间年份-->
|
|
<div class="planTime">{{item.planeTime}}</div>
|
|
<!-- 比例-->
|
|
<div class="planeScale">{{(item.realityValue/item.planValue*100).toFixed(1)+'%'}}</div>
|
|
<!-- 进度条-->
|
|
<div class="planeProgress">
|
|
<!-- 每一个进度条-->
|
|
<div class="inBox">
|
|
<!-- 进度条盒子-->
|
|
<div class="progressBox">
|
|
<!-- 进度条内容部分-->
|
|
<div class="upActive" :style="{'width':item.planValueWidth+'%'}"></div>
|
|
</div>
|
|
<!-- 数值-->
|
|
<div class="planeData">{{item.planValue.toFixed(2)}}</div>
|
|
</div>
|
|
<!-- 每一个进度条-->
|
|
<div class="inBox">
|
|
<!-- 进度条盒子-->
|
|
<div class="progressBox">
|
|
<!-- 进度条内容部分-->
|
|
<div class="downActive" :style="{'width':item.realityValueWidth+'%'}"></div>
|
|
</div>
|
|
<!-- 数值-->
|
|
<div class="planeData">{{item.realityValue.toFixed(2)}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
props: {
|
|
planelist: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
interval: '',
|
|
IndexBox:0,
|
|
data:[]
|
|
}
|
|
},
|
|
mounted() {
|
|
this.init(
|
|
|
|
)
|
|
},
|
|
methods: {
|
|
init() {
|
|
//计划时间
|
|
this.interval = setInterval(this.scroll, 5000);
|
|
this.getData()
|
|
},
|
|
|
|
getData(){
|
|
var planelist = this.planelist
|
|
var arr = []
|
|
for(let i = 0;i<planelist.length;i++){
|
|
arr.push(planelist[i].planValue)
|
|
}
|
|
console.log(arr)
|
|
var max = Math.max(...arr)
|
|
|
|
planelist.map(x => {
|
|
x.planValueWidth = (x.planValue / max ) * 100
|
|
x.realityValueWidth = (x.realityValue / max ) * 100
|
|
return x
|
|
})
|
|
this.data = planelist
|
|
},
|
|
|
|
scroll() {
|
|
let offsetHeight = this.$refs.jhxj.querySelectorAll('.allBox')[0].offsetHeight;
|
|
if(this.IndexBox==this.planelist.length-6){
|
|
this.IndexBox=0
|
|
}else{
|
|
this.IndexBox+=1
|
|
}
|
|
$(this.$refs.jhxj).animate({scrollTop:(offsetHeight * this.IndexBox)+'px'})
|
|
},
|
|
MouseEnter() {//鼠标移入停止滚动
|
|
clearInterval(this.interval);
|
|
},
|
|
MouseLeave() {//鼠标离开继续滚动
|
|
this.interval = setInterval(this.scroll, 5000);
|
|
},
|
|
|
|
},
|
|
//计算属性
|
|
// computed: {
|
|
// percentage() {
|
|
// return index => {
|
|
// let row = this.planelist[index]
|
|
// console.log(row)
|
|
// return (row.plansList[1].widthB / row.plansList[0].widthA) * 100
|
|
// }
|
|
//
|
|
// }
|
|
// }
|
|
})
|