cockpitzhdn/src/views/index1/hj.vue

<template>
    <el-space wrap>
        <dv-border-box-9 class="cardAlarm">
            <div style="color: #fff; text-align: center;margin-top:0.06rem;font-size: 0.12rem;font-weight:700;">前日拆分收入
            </div>
            <dv-digital-flop :config="byFee" style="height: 0.45rem;" />
        </dv-border-box-9>


        <dv-border-box-9 class="cardAlarm">
            <div style="color: #fff; text-align: center;margin-top:0.06rem;font-size: 0.12rem;font-weight:700;">昨日拆分收入
            </div>
            <dv-digital-flop :config="yesterdayFee" style="height: 0.45rem;" />
        </dv-border-box-9>


        <dv-border-box-9 class="cardAlarm">
            <div style="color: #fff; text-align: center;margin-top:0.06rem;font-size: 0.12rem;font-weight:700;">环比增加情况
            </div>
            <div style="display: flex;justify-content: center;">
                <el-icon v-if="tbFee.number[0] >= 0" :color="tbFee.style.fill" :size="size" style="width: 12%;align-items: center;height: 0.42rem;">
                    <Top />
                </el-icon>
                <el-icon v-if="tbFee.number[0] < 0" :color="tbFee.style.fill" :size="size" style="width: 12%;align-items: center;height: 0.42rem;">
                    <Bottom />
                </el-icon>
                <dv-digital-flop :config="tbFee" style="width: 55%;height: 0.45rem;" />
            </div>
        </dv-border-box-9>



        <dv-border-box-9 class="cardAlarm">
            <div style="color: #fff; text-align: center;margin-top:0.06rem;font-size: 0.12rem;font-weight:700;">前日高速货车拆分收入
            </div>
            <dv-digital-flop :config="byGsHuoFee" style="height: 0.45rem;" />
        </dv-border-box-9>


        <dv-border-box-9 class="cardAlarm">
            <div style="color: #fff; text-align: center;margin-top:0.06rem;font-size: 0.12rem;font-weight:700;">昨日高速货车拆分收入
            </div>
            <dv-digital-flop :config="yesterdayGsHuoFee" style="height: 0.45rem;" />
        </dv-border-box-9>


        <dv-border-box-9 class="cardAlarm">
            <div style="color: #fff; text-align: center;margin-top:0.06rem;font-size: 0.12rem;font-weight:700;">环比增加情况
            </div>
            <div style="display: flex;justify-content: center;">
                <el-icon v-if="tbGsHuoFee.number[0] >= 0" :color="tbGsHuoFee.style.fill" :size="size" style="width: 12%;align-items: center;height: 0.42rem;">
                    <Top />
                </el-icon>
                <el-icon v-if="tbGsHuoFee.number[0] < 0" :color="tbGsHuoFee.style.fill" :size="size" style="width: 12%;align-items: center;height: 0.42rem;">
                    <Bottom />
                </el-icon>
                <dv-digital-flop :config="tbGsHuoFee" style="width: 55%;height: 0.45rem;" />
            </div>
        </dv-border-box-9>


        
        <dv-border-box-9 class="cardAlarm">
            <div style="color: #fff; text-align: center;margin-top:0.06rem;font-size: 0.12rem;font-weight:700;">前日高速客车拆分收入
            </div>
            <dv-digital-flop :config="byGsKeFee" style="height: 0.45rem;" />
        </dv-border-box-9>


        <dv-border-box-9 class="cardAlarm">
            <div style="color: #fff; text-align: center;margin-top:0.06rem;font-size: 0.12rem;font-weight:700;">昨日高速客车拆分收入
            </div>
            <dv-digital-flop :config="yesterdayGsKeFee" style="height: 0.45rem;" />
        </dv-border-box-9>


        <dv-border-box-9 class="cardAlarm">
            <div style="color: #fff; text-align: center;margin-top:0.06rem;font-size: 0.12rem;font-weight:700;">环比增加情况
            </div>
            <div style="display: flex;justify-content: center;">
                <el-icon v-if="tbGsKeFee.number[0] >= 0" :color="tbGsKeFee.style.fill" :size="size" style="width: 12%;align-items: center;height: 0.42rem;">
                    <Top />
                </el-icon>
                <el-icon v-if="tbGsKeFee.number[0] < 0" :color="tbGsKeFee.style.fill" :size="size" style="width: 12%;align-items: center;height: 0.42rem;">
                    <Bottom />
                </el-icon>
                <dv-digital-flop :config="tbGsKeFee" style="width: 55%;height: 0.45rem;" />
            </div>
        </dv-border-box-9>






        <dv-border-box-9 class="cardAlarm">
            <div style="color: #fff; text-align: center;margin-top:0.06rem;font-size: 0.12rem;font-weight:700;">前日一级路拆分收入
            </div>
            <dv-digital-flop :config="byYjFee" style="height: 0.45rem;" />
        </dv-border-box-9>



        <dv-border-box-9 class="cardAlarm">
            <div style="color: #fff; text-align: center;margin-top:0.06rem;font-size: 0.12rem;font-weight:700;">
                昨日一级路拆分收入
            </div>
            <dv-digital-flop :config="yesterdayYjFee" style="height: 0.45rem;" />
        </dv-border-box-9>



        <dv-border-box-9 class="cardAlarm">
            <div style="color: #fff; text-align: center;margin-top:0.06rem;font-size: 0.12rem;font-weight:700;">
                环比增加情况
            </div>
            <div style="display: flex;justify-content: center;">
                <el-icon v-if="tbYjFee.number[0] >= 0" :color="tbYjFee.style.fill" :size="size" style="width: 12%;align-items: center;height: 0.42rem;">
                    <Top />
                </el-icon>
                <el-icon v-if="tbYjFee.number[0] < 0" :color="tbYjFee.style.fill" :size="size" style="width: 12%;align-items: center;height: 0.42rem;">
                    <Bottom />
                </el-icon>
                <dv-digital-flop :config="tbYjFee" style="width: 55%;height: 0.45rem;" />
            </div>
        </dv-border-box-9>
    </el-space>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getCockPitIndexCenterHj } from '@/util/api/api.js';

import pro from '../../util/tool.js';


const InColor = ref("#F56C6C");
const JangColor = ref("#67C23A");
const size = ref(30);


const byFee = ref({
    number: [0],
    toFixed: 3,
    content: '{nt}万元',
    style: {
        fill: '#FFDB5C'
    }
})
const yesterdayFee = ref({
    number: [0],
    toFixed: 3,
    content: '{nt}万元',
    style: {
        fill: '#FFDB5C'
    }
})
const tbFee = ref({
    number: [0],
    toFixed: 3,
    content: '{nt}%',
    style: {
        fill: "#F56C6C"
    }
})



const byGsHuoFee = ref({
    number: [0],
    toFixed: 3,
    content: '{nt}万元',
    style: {
        fill: '#FFDB5C'
    }
})
const yesterdayGsHuoFee = ref({
    number: [0],
    toFixed: 3,
    content: '{nt}万元',
    style: {
        fill: '#FFDB5C'
    }
})
const tbGsHuoFee = ref({
    number: [0],
    toFixed: 3,
    content: '{nt}%',
    style: {
        fill: "#F56C6C"
    }
})


const byGsKeFee = ref({
    number: [0],
    toFixed: 3,
    content: '{nt}万元',
    style: {
        fill: '#FFDB5C'
    }
})
const yesterdayGsKeFee = ref({
    number: [0],
    toFixed: 3,
    content: '{nt}万元',
    style: {
        fill: '#FFDB5C'
    }
})
const tbGsKeFee = ref({
    number: [0],
    toFixed: 3,
    content: '{nt}%',
    style: {
        fill: "#F56C6C"
    }
})


const byYjFee = ref({
    number: [0],
    toFixed: 3,
    content: '{nt}万元',
    style: {
        fill: '#FFDB5C'
    }
})
const yesterdayYjFee = ref({
    number: [0],
    toFixed: 3,
    content: '{nt}万元',
    style: {
        fill: '#FFDB5C'
    }
})
const tbYjFee = ref({
    number: [0],
    toFixed: 3,
    content: '{nt}%',
    style: {
        fill: "#F56C6C"
    }
})





onMounted(() => {

    //查询拆分数据
    getData();
    setInterval(setIntervalloadData, 10000);//1min一次

});





function getData() {
    getCockPitIndexCenterHj({currentDate:pro.dateFormatDay(new Date().setDate((new Date().getDate() - 1)))}).then(res => {
        yesterdayFee.value.number = [res.CURRENTFEE/10000];
        byFee.value.number = [res.YESTERDAYFEE/10000];
        tbFee.value.number = [((res.CURRENTFEE/10000-res.YESTERDAYFEE/10000)/(res.YESTERDAYFEE/10000))*100];
        if(tbFee.value.number[0] >=0){
            tbFee.value.style.fill = InColor.value;
        }else{
            tbFee.value.style.fill = JangColor.value;
        }

        yesterdayGsHuoFee.value.number = [res.GSHUOCH/10000];
        byGsHuoFee.value.number = [res.GSHUOCHS/10000];
        tbGsHuoFee.value.number = [((res.GSHUOCH/10000-res.GSHUOCHS/10000)/(res.GSHUOCHS/10000))*100];
        if(tbGsHuoFee.value.number[0] >=0){
            tbGsHuoFee.value.style.fill = InColor.value;
        }else{
            tbGsHuoFee.value.style.fill = JangColor.value;
        }


        yesterdayGsKeFee.value.number = [res.GSKECH/10000];
        byGsKeFee.value.number = [res.GSKECHS/10000];
        tbGsKeFee.value.number = [((res.GSKECH/10000-res.GSKECHS/10000)/(res.GSKECHS/10000))*100];
        if(tbGsKeFee.value.number[0] >=0){
            tbGsKeFee.value.style.fill = InColor.value;
        }else{
            tbGsKeFee.value.style.fill = JangColor.value;
        }

        yesterdayYjFee.value.number = [res.YJCURRENTFEE/10000];
        byYjFee.value.number = [res.YJYESTERDAYFEE/10000];
        tbYjFee.value.number = [((res.YJCURRENTFEE/10000-res.YJYESTERDAYFEE/10000)/(res.YJYESTERDAYFEE/10000))*100];
        if(tbYjFee.value.number[0] >=0){
            tbYjFee.value.style.fill = InColor.value;
        }else{
            tbYjFee.value.style.fill = JangColor.value;
        }
    })
}

function setIntervalloadData() {
    getCockPitIndexCenterHj({currentDate:pro.dateFormatDay(new Date().setDate((new Date().getDate() - 1)))}).then(res => {
        /*CURRENTFEE	
        YESTERDAYFEE	
        GSCURRENTFEE	
        GSYESTERDAYFEE	
        YJCURRENTFEE	
        YJYESTERDAYFEE	
        GSHUOCH	
        GSHUOCHS	
        GSKECH	
        GSKECHS*/
        yesterdayFee.value.number = [res.CURRENTFEE/10000];
        byFee.value.number = [res.YESTERDAYFEE/10000];
        tbFee.value.number = [((res.CURRENTFEE/10000-res.YESTERDAYFEE/10000)/(res.YESTERDAYFEE/10000))*100];
        if(tbFee.value.number[0] >=0){
            tbFee.value.style.fill = InColor.value;
        }else{
            tbFee.value.style.fill = JangColor.value;
        }


          

        yesterdayGsHuoFee.value.number = [res.GSHUOCH/10000];
        byGsHuoFee.value.number = [res.GSHUOCHS/10000];
        tbGsHuoFee.value.number = [((res.GSHUOCH/10000-res.GSHUOCHS/10000)/(res.GSHUOCHS/10000))*100];
        if(tbGsHuoFee.value.number[0] >=0){
            tbGsHuoFee.value.style.fill = InColor.value;
        }else{
            tbGsHuoFee.value.style.fill = JangColor.value;
        }


        yesterdayGsKeFee.value.number = [res.GSKECH/10000];
        byGsKeFee.value.number = [res.GSKECHS/10000];
        tbGsKeFee.value.number = [((res.GSKECH/10000-res.GSKECHS/10000)/(res.GSKECHS/10000))*100];
        if(tbGsKeFee.value.number[0] >=0){
            tbGsKeFee.value.style.fill = InColor.value;
        }else{
            tbGsKeFee.value.style.fill = JangColor.value;
        }

        yesterdayYjFee.value.number = [res.YJCURRENTFEE/10000];
        byYjFee.value.number = [res.YJYESTERDAYFEE/10000];
        tbYjFee.value.number = [((res.YJCURRENTFEE/10000-res.YJYESTERDAYFEE/10000)/(res.YJYESTERDAYFEE/10000))*100];
        if(tbYjFee.value.number[0] >=0){
            tbYjFee.value.style.fill = InColor.value;
        }else{
            tbYjFee.value.style.fill = JangColor.value;
        }
    })
}

</script>

<style scoped>
.cardAlarm {
    width: 1.4rem;
    height: 0.6rem;
}
</style>