mkl_power_box/components/amplify/Company/jixieguanli/amplify-fljjsqk.js

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()
        },
    },

})