mkl_power_box/components/safe-monitor-data.js

/**
 * 顶部header
 */
Vue.component("safe-monitor-data", {
    template: `
        <div class="monitor-max">
            <div class="monitor-left">
                <div class="monitor-police"><label v-if="speed.data>=0 || speed.type == 'heightData'">报警</label> <span>{{data.police}}</span></div>
                <div class="monitor-warning"  :style="speed.data>=0 || speed.type == 'heightData' ? {top:((10-this.warning_top) * 10 < 7 ? 7 : (10-this.warning_top) * 10 )+'%'}:{top: ((this.warning_top-1) * 10 > 85 ? 85:(this.warning_top-1) * 10) +'%'}">预警 <span>{{data.warning}}</span></div>
                <div class="monitor-zero"><label v-if="speed.data<0 && speed.type != 'heightData'">报警</label>  {{data.min}}</div>
            </div>
            
            <div class="sf-speed-data-chart" v-if="data.data > 0" >
                <div v-for="(item,i) in 10" :class="getClass(i)"></div>
            </div>
            <div class="sf-speed-data-chart" v-else>
                <div v-for="(item,i) in 10" :class="getClass(i)"></div>
            </div>
            <div class="monitor-right">   
                <div :class="getDataClass()" :style="speed.data>=0 ? {top: ((10-this.max_i) * 9 < 0 ? 0:(10-this.max_i) * 9) +'%'}:{top: (speed.type != 'heightData'?((this.max_i-1) * 10 > 100 ? 90 :(this.max_i-1) * 10):(90))+'%'}"><span>{{data.data}}</span> {{data.unit}}</div>
            </div>
        </div>
    `,
    props: {
        data:{
            type: Object,
        },
    },
    data() {
        return {
            speed:{},
            max_i:0,
            warning_top:0
        }
    },
    mounted(){
        this.getSpeed()
    },
    methods: {
        getClass(i){
            var speed = this.data
            if(isNaN(speed.min)){
                speed.min = 0;
            }
            if(isNaN(speed.police)){
                speed.police = 0;
            }
            if(isNaN(speed.warning)){
                speed.warning = 0;
            }
            if(isNaN(speed.data) || speed.data == undefined){
                speed.data = 0;
            }
            var data = speed.data
            if(data >= 0 || speed.type == 'heightData'){
                if(data <  speed.warning){
                    if((10 - i) <= this.max_i){
                        return 'activation'
                    }
                }else if(data >= speed.police){
                    if((10 - i) <= this.max_i){
                        return 'police'
                    }
                }else {
                    if((10 - i) <= this.max_i){
                        return 'warning'
                    }
                }
            }else{
                if(data > speed.warning){
                    if( i < this.max_i){
                        return 'activation'
                    }
                }else if(data <= speed.min){
                    if( i < this.max_i){
                        return 'police'
                    }
                }else {
                    if( i < this.max_i){
                        return 'warning'
                    }
                }
            }
            return ''
        },
        getDataClass(){
            var speed = this.data
            if(isNaN(speed.min)){
                speed.min = 0;
            }
            if(isNaN(speed.police)){
                speed.police = 0;
            }
            if(isNaN(speed.warning)){
                speed.warning = 0;
            }
            if(isNaN(speed.data) || speed.data == undefined){
                speed.data = 0;
            }
            var data = speed.data
            if(data >= 0 || speed.type == 'heightData'){
                if(data >= speed.warning && data < speed.police){
                    return 'monitor-data warning-data'
                }else if(data >= speed.police){
                    return 'monitor-data police-data'
                }
            }else{
                if(data <= speed.warning && data > speed.min){
                    return 'monitor-data warning-data'
                }else if(data <= speed.min){
                    return 'monitor-data police-data'
                }else {

                }
            }
            return 'monitor-data'
        },
        getSpeed(){
            var speed = this.data
            if(isNaN(speed.min)){
                speed.min = 0;
            }
            if(isNaN(speed.police)){
                speed.police = 0;
            }
            if(isNaN(speed.warning)){
                speed.warning = 0;
            }
            if(isNaN(speed.data) || speed.data == undefined){
                speed.data = 0;
            }

            if(speed.data >= 0 || speed.type == 'heightData'){
                this.speed = speed
            }else{
                let tmp = -speed.min
                speed.min = -speed.police
                speed.warning = -speed.warning
                speed.police = tmp
                this.speed = speed
            }
            var data = speed.data
            if(data >= 0 || speed.type == 'heightData'){
                let data_prop = (data  - speed.min) / (speed.police - speed.min)
                this.max_i =  Math.ceil(data_prop*10)
                let warning_prop = (speed.warning  - speed.min) / (speed.police - speed.min)
                this.warning_top =  Math.ceil(warning_prop*10)
            }else{
                let data_prop = (data  - speed.police) / (speed.min - speed.police )
                this.max_i =  Math.ceil(data_prop*10)
                let warning_prop = (speed.warning  - speed.police) / (speed.min - speed.police )
                this.warning_top =  Math.ceil(warning_prop*10)
            }

        }
    },
    watch:{
        data: function (n,o) {
            this.getSpeed();
        },
    }
})