WholeProcessPlatform/frontend/src/modules/shengtaidabiaoMod/index.vue

<!-- SidePanelItem.vue -->
<template>
    <div>
        <SidePanelItem title="生态流量达标情况" :clickprompt="obj">
            <div class="body_topOne">
                <a-radio-group v-model:value="mode">
                    <a-radio-button value="top">逐时</a-radio-button>
                    <a-radio-button value="left">日</a-radio-button>
                </a-radio-group>
                <div class="title_text">≥95%座数/总座数</div>
            </div>
            <a-spin :spinning="spinning">
                <div>
                    <div v-for="el in datalist">
                        <div :key='el.key'>
                            <div class="boy_one">
                                <div style="flex: 1; white-space: nowrap;margin-right: 5px;">{{ el.name }}</div>
                                <img style="flex: 1;" src="@/assets/components/fgx.svg" alt="">
                            </div>
                            <div class="body_zhu">
                                <div class="body_biao">
                                    <div v-for="value in allArr">
                                        <div :key="value" class="nei_body">
                                            <div v-if="value < (el?.key == null ? 1 : el.qecTCnt == 0 ? 0 : el.qecCnt / el.qecTCnt) * 20"
                                                class="little_body" :style="{ backgroundColor: el.color }"></div>
                                        </div>
                                    </div>

                                </div>
                                <div class="body_text">
                                    {{ el.qecCnt }}/{{ el.qecTCnt }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a-spin>


        </SidePanelItem>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import SidePanelItem from '@/components/SidePanelItem/index.vue';


// 定义组件名（便于调试和递归）
defineOptions({
    name: 'shengtaidabiaoMod'
});
const obj =
{
    show: true,
    value: '1、统计电站范围：接入过生态流量数据的电站,2、当来水不足时，生态流量不小于入库流量判定为达标,3、“≥95%座数”表示统计电站范围内时段达标率大于等于95%的电站数量',
}
const mode = ref('top');
const dataArr: any = ref([
    {
        name: '生态环境部门要求',
        qecCnt: '41', // 座数
        qecTCnt: '55', //总座数
        type: 1

    },
    {
        name: '水利部门要求',
        qecCnt: '41', // 座数
        qecTCnt: '55', //总座数
        type: 2
    }
])
const list: any = ref(
    [
        { name: '生态环境部门要求', type: 1, color: '#77C300', key: 'qecInterval' },
        { name: '水利部门要求', type: 2, color: '#56C3E3', key: 'mwrInterval' },
        { name: '多年平均流量 10%', type: 3, color: '#F76B01', key: 'avqInterval' },
        { name: '无生态流量要求', type: 4, color: '#B4B4B4', key: null },
    ]
)
const datalist: any = ref([])
const allArr: any = ref(Array.from({ length: 20 }, (_, i) => i))
const spinning = ref(false)
// 根据 type 将 list 中的数据合并到 dataArr 中
const setStyle = () => {
    if (dataArr.value.length == 0) {
        return false
    }
    dataArr.value.forEach((item: any) => {
        // 在 list 中找到 type 匹配的数据
        const matched = list.value.find((listItem: any) => listItem.type === item.type)
        if (matched) {
            // 合并数据，dataArr 的属性优先
            datalist.value.push({
                ...matched,
                ...item,
            })
        }
    })
    console.log(datalist.value)
}

// 页面加载时执行的逻辑
onMounted(() => {
    setStyle()
});
</script>

<style lang="scss" scoped>
.body_topOne {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;

    .title_text {
        font-size: 16px;
    }
}

.boy_one {
    display: flex;
    align-items: center;
    margin: 5px 0px;
}

.body_zhu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;

    .body_biao {
        width: 100%;
        height: 52px;
        border: 1px solid #ccdae7;
        border-radius: 2px;
        display: flex;
        padding: 5px 1px;
        overflow: hidden;

        .nei_body {
            width: 12px;
            height: 100%;
            border: 1px solid #ccdae7;
            padding: 2px;
            margin-left: 4px;

            .little_body {
                width: 100%;
                height: 100%;

            }
        }
    }

    .body_text {
        display: flex;
        flex-direction: column;
        width: 90px;
        height: 100%;
        justify-content: space-around;
        margin-left: 6px;
        align-items: center;
        font-size: 18px;
        font-weight: 500;
    }
}

.ant-radio-group {
    // border: 3px solid #2f6b98 !important;
    // border-radius: 10px !important;

    .ant-radio-button-wrapper-checked {
        border: 1px solid #2f6b98 !important;
        background-color: #2f6b98 !important;
        color: #fff !important;
    }

    .ant-radio-button-wrapper {
        border: 2px solid #2f6b98 !important;
    }

    .ant-radio-button-wrapper-checked :before {
        background-color: #2f6b98 !important;
    }
}
</style>