admin-fiveFollowing/src/views/energyManage/totalEnergyC/components/StatPanelItem.vue

<template>
    <div class="card-area-center">
        <div class="value col-3">{{ props.title[0] }}：{{ props.value[0] || 0 }}</div>
        <div class="value col-3">{{ props.title[1] }}：{{ props.value[1] || 0 }}</div>
        <div class="value col-3">
            同期环比：
            <span :style="{ color: isPositiveNumber(props.value[2]).color, marginRight: '5px' }">
                {{ props.value[2] || 0 }}%</span>
            <img class="image" :src="isPositiveNumber(props.value[2]).icons" alt="整体图片" />
        </div>
    </div>
    <el-divider class="card-area-divider" v-if="props.isDivider" />
</template>
  
<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue'
/*----------------------------------接口引入-----------------------------------*/
/*----------------------------------组件引入-----------------------------------*/
import CaretCenter from '@/assets/images/energyManage/CaretCenter.png'
import CaretTop from '@/assets/images/energyManage/CaretTop.png'
import CaretBottom from '@/assets/images/energyManage/CaretBottom.png'
/*----------------------------------store引入-----------------------------------*/
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const props = defineProps({
    title: Object,
    value: Object,
    isDivider: {
        type: Boolean,
        default: false
    }
}) //数据双向绑定
const emit = defineEmits([]);
/*----------------------------------变量声明-----------------------------------*/


function isPositiveNumber(value) {
    let list = {}

    if (value == 0 || value == null) {
        list.color = '#cacaca'
        list.icons = CaretCenter
    } else if (typeof value === 'number' && !Number.isNaN(value) && value > 0 && value !== Infinity) {
        list.color = '#FF0000'
        list.icons = CaretTop
    } else {
        list.color = '#00C309'
        list.icons = CaretBottom
    }

    return list
};

</script>