166 lines
7.2 KiB
JavaScript
166 lines
7.2 KiB
JavaScript
var vms = Vue.component("Company-amplify-fljjsqk", {
|
||
template: `
|
||
<div>
|
||
<div class="amplify-title-icon">
|
||
<img src="https://fileimg.makalu.cc/WEB_DBD5893450984E50AFF356EF44FF4139.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-max">
|
||
<div class="amplify-title">
|
||
<div>分类及工情况</div>
|
||
<div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
|
||
</div>
|
||
<div class="amplify-content">
|
||
<!--内容区域-->
|
||
|
||
<div class="amplify-warning-info-title">
|
||
<div :class="infoNav==0?'active':''" @click="onWarningInfoNav(0)">设备数量</div>
|
||
<div :class="infoNav==1?'active':''" @click="onWarningInfoNav(1)">昨日工时</div>
|
||
<div :class="infoNav==2?'active':''" @click="onWarningInfoNav(2)">当月工时</div>
|
||
</div>
|
||
|
||
<div class="amplify-pcd-output-value" style="padding: 10px;justify-content: right">
|
||
<div class="pcd-output-value-key">
|
||
<div class="pcd-output-value-key-info">
|
||
<div style="width: 15px;height: 10px;margin-right:5px;background:#52adf4"></div>
|
||
<div>已监控</div>
|
||
</div>
|
||
<div class="pcd-output-value-key-info">
|
||
<div style="width: 15px;height: 10px;margin-right:5px;background:#4677ff"></div>
|
||
<div>未监控</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div @mouseover="MouseEnter" @mouseout="MouseLeave" >
|
||
<div class="amplify-output-content" ref="process" :style="{'height':height +'px'}">
|
||
<div class="amplify-process-for" style="height: 90px;" v-for="(item,i) in forData">
|
||
<div style="display: flex;align-items: center;justify-content: space-between;padding: 20px 0 10px;">
|
||
<div>
|
||
<img src="https://fileimg.makalu.cc/WEB_2B7C06210CD44D55BFEE6205A35DE4A7.png" width="18" height="12">
|
||
<span style="color:#fcbc02;font-style:italic;padding-right: 10px;">No.{{i + 1}}</span>
|
||
<span style="color:#c6d9fa">{{item.name}}</span>
|
||
</div>
|
||
<div style="color: #6c829a">
|
||
<span style="color: #c6d9fa">{{item.total}}</span> {{item.unit}}
|
||
<span>（</span>
|
||
<span style="color: #52adf4">{{item.yesMonitor}}</span> {{item.unit}} /
|
||
<span style="color: #4677ff">{{item.notMonitor}}</span> {{item.unit}}
|
||
<span>）</span>
|
||
</div>
|
||
</div>
|
||
<div style="padding-top: 12px;">
|
||
<div style="height: 9px;background:rgba(22,203,115,0.1);display: flex;align-items: center">
|
||
<div :style="{'width':item.yesWidth+'%','height':'6px','background':'#52adf4'}"></div>
|
||
<div :style="{'width':item.notWidth+'%','height':'6px','background':'#4677ff'}"></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</transition>
|
||
</div>
|
||
`,
|
||
props: {
|
||
businessdata:{
|
||
type:Object
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
show:false,
|
||
infoNav:0,
|
||
height:380,
|
||
forData:[],
|
||
number:3,
|
||
interval: '',
|
||
index:0,
|
||
}
|
||
},
|
||
mounted(){
|
||
console.log(this.businessdata)
|
||
},
|
||
methods: {
|
||
openAmplify(){
|
||
this.show = true
|
||
this.getClassifyBarData()
|
||
},
|
||
closeAmplify(){
|
||
this.show = false
|
||
},
|
||
closeAmplifyAll(e){
|
||
if(e.target.className == 'amplify-fixed'){
|
||
this.show = false
|
||
}
|
||
},
|
||
//当日预警信息
|
||
onWarningInfoNav(n){
|
||
this.infoNav = n
|
||
this.forData = this.classifyBarData[n];
|
||
},
|
||
|
||
//分类及工时情况
|
||
getClassifyBarData(){
|
||
axios.post(this.businessdata.requestUrl+"getClassifyWorks?deptId="+this.businessdata.deptId+"&projectId="+this.businessdata.projectIdStr, {
|
||
}).then(res => {
|
||
this.classifyBarData = [res.data.data.num,res.data.data.dayWorkTime,res.data.data.monthWorkTime];
|
||
this.forData = this.classifyBarData[0];
|
||
this.getData()
|
||
}).catch(err => {
|
||
})
|
||
},
|
||
|
||
getData(){
|
||
var data = this.forData
|
||
var max = 0;
|
||
for(let i = 0;i<data.length;i++){
|
||
if(max < Number(data[i].total)){
|
||
max = Number(data[i].total)
|
||
}
|
||
}
|
||
data.map(x => {
|
||
x.yesWidth = (Number(x.yesMonitor) / max ) * 100
|
||
x.notWidth = (Number(x.notMonitor) / max ) * 100
|
||
return x
|
||
})
|
||
this.forData = data
|
||
this.$refs.process.scrollTop = 0
|
||
this.index = 0
|
||
this.interval = setInterval(this.scroll, 3000);
|
||
},
|
||
scroll() {
|
||
let offsetHeight = this.$refs.process.querySelectorAll('.amplify-process-for')[0].offsetHeight;
|
||
if(this.index == this.forData.length - this.number){
|
||
this.index = 0
|
||
}else{
|
||
this.index += 1
|
||
}
|
||
$(this.$refs.process).animate({scrollTop:(offsetHeight * this.index)+'px'})
|
||
},
|
||
|
||
|
||
MouseEnter() {//鼠标移入停止滚动
|
||
clearInterval(this.interval);
|
||
},
|
||
MouseLeave() {//鼠标离开继续滚动
|
||
this.interval = setInterval(this.scroll, 3000);
|
||
},
|
||
|
||
|
||
},
|
||
watch:{
|
||
forData: function (n,o) {
|
||
this.getData()
|
||
},
|
||
},
|
||
|
||
})
|
||
|
||
|