sagacloud-new-daping/src/components/LastAllEnergy.vue

<template>
    <div
        class="lastMonth"
        :class="[screenType === 'hor' ? 'horizontalClass ' : 'verLastClass ']"
    >
        <div class="subhead-title">
            <span>上月总能耗</span>
        </div>
        <div class="saveEnergy">
            <span class="backImage">节能<span class="value">{{ lastAllComputed.energyCompare }}%</span></span>
        </div>
        <div class="energySave">
            <div class="textDiv">
                <span>项目能耗</span><span class="value">{{ lastAllComputed.energySaving }}kWh</span>
            </div>
            <div
                class="saveBack"
                :style="{ width: lastAllComputed.energyCompare + '%' }"
            ></div>
        </div>
        <div class="energyTotal">
            <div class="textDiv">
                <span>基准能耗</span><span class="value">{{ lastAllComputed.energyTotal }}kWh</span>
            </div>
            <div
                class="totalBack"
                :style="{ width: widthBase }"
            ></div>
        </div>
    </div>
</template>
<script lang="ts">
import {
    ref,
    defineComponent,
    reactive,
    toRefs,
    onMounted,
    computed,
} from "vue";
import { queryLastEnergy } from "@/api/index";
import useProjectStore from "@/store/useProjectStore";
import { storeToRefs, mapState } from "pinia";

//import { lastGold, lastGray } from "@/utils/dapingImage";

export default defineComponent({
    props: {
        screenType: {
            type: String,
        },
    },
    setup(props, contx) {
        //   console.log("props", props, contx);
        const projectStore = useProjectStore();
        ///  const { lastAllEnergy22 } = storeToRefs(projectStore);
        const allData = reactive({
            widthBase: "0%",
        });
        const lastAllComputed = computed(() => {
            const lastAllEnergy = projectStore.lastAllEnergy;

            var lastObj = {
                energySaving: lastAllEnergy.energySaving
                    ? lastAllEnergy.energySaving.toFixed(1)
                    : lastAllEnergy.energySaving,
                energyTotal: lastAllEnergy.energyTotal
                    ? lastAllEnergy.energyTotal.toFixed(1)
                    : lastAllEnergy.energyTotal,
                energyCompare: lastAllEnergy.energyCompare
                    ? (lastAllEnergy.energyCompare * 100).toFixed(0)
                    : lastAllEnergy.energyCompare,
            };
            return lastObj;
        });
        projectStore.$subscribe((mutation, state) => {
            //debugger;
            allData.widthBase = "100%";
        });
        onMounted(() => {
            projectStore.setLastAllEnergy();
        });
        return { ...toRefs(allData), lastAllComputed, projectStore };
    },
    computed: {
        // ...mapState(useProjectStore, {
        //     lastAllEnergy2: (store) => {
        //         debugger;
        //         return store.lastAllEnergy.energyCompare
        //             ? (store.lastAllEnergy.energyCompare * 100).toFixed(1)
        //             : store.lastAllEnergy.energyCompare;
        //     },
        // }),
        // lastAllEnergy2() {
        //     debugger;
        //     if (this.projectStore) {
        //         return this.projectStore.lastAllEnergy.energyCompare
        //             ? (
        //                   this.projectStore.lastAllEnergy.energyCompare * 100
        //               ).toFixed(1)
        //             : this.projectStore.lastAllEnergy.energyCompare;
        //     } else {
        //         return 122;
        //     }
        // },
    },
});
</script>

<style scoped lang="scss">
.lastMonth {
    height: 100%;
    backdrop-filter: blur(20px);
    background: rgba(100, 108, 130, 0.06);

    border-radius: 20px;
    .saveEnergy {
        color: #f7e6cd;
        font-size: 46px;
        height: calc(100% - 195px);
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 600;
        font-family: Persagy;
        .backImage {
            background-image: url("@/assets/image/horImg/lastAllLight.png");
            background-repeat: no-repeat;
            background-position: center bottom;
            background-size: 100%;
            padding-bottom: 5px;
            text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.4);
            .value {
                font-weight: 700;
                font-size: 48px;
                margin-left: 2px;
            }
        }
    }
    .energySave {
        color: #e0c29b;
        font-size: 20px;
        padding-bottom: 32px;
        padding-left: 24px;
        padding-right: 24px;
        height: 85px;
        box-sizing: border-box;
    }
    .energyTotal {
        color: #cbcdda;
        font-size: 20px;
        height: 50px;
        padding-left: 24px;
        padding-right: 24px;
        box-sizing: border-box;
    }
    .textDiv {
        display: flex;
        justify-content: space-between;
        padding-bottom: 8px;
        font-family: Persagy;
    }
    .saveBack {
        height: 15px;
        background-image: url("@/assets/image/horImg/lastGold.svg");
        transition: width 0.8s linear;
        width: 0;
    }
    .totalBack {
        height: 15px;
        background-image: url("@/assets/image/horImg/lastGray.svg");
        transition: width 0.8s linear;
        width: 0;
    }
}
.verLastClass {
    //height: 420px;
    height: 28%;
    box-sizing: border-box;
    padding: 0 36px 40px;
}
</style>