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

<!-- SidePanelItem.vue -->
<template>
    <SidePanelItem title="过鱼设施">
        <a-spin :spinning="loading" tip="加载中...">
            <div class="facility-grid">
                <div v-for="facility in facilities" :key="facility.name" class="facility-card"
                    @click="handleFacilityClick(facility)">
                    <div style="width: 60px;height: 62px;display: flex;align-items: center;justify-content: center;">
                        <div class="facility-icon">
                            <i style="color: #fff;" :class="facility.icon" type="icon-shengtailiuliang2"></i>
                        </div>
                    </div>

                    <div class="facility-info">
                        <div class="facility-name">{{ facility.name }}</div>
                        <div style="font-size: 16px;"> <span class="facility-count">{{ facility.count
                                }}</span><span>座</span></div>
                    </div>
                </div>
            </div>
        </a-spin>
    </SidePanelItem>
    <!-- 弹框 -->
    <a-modal v-model:open="modalVisible" :title="'过鱼设施'" :footer="null" width="1536px" @cancel="handleCloseModal">
       <ModalPage v-if="currentFacility" :data="currentFacility" :jdId="'all'" />
    </a-modal>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
import SidePanelItem from '@/components/SidePanelItem/index.vue';
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
import { buildGetKendoListCust } from '@/api/gyss';
import  ModalPage  from './ModalPage/index.vue'
// 定义组件名（便于调试和递归）
defineOptions({
    name: 'qixidibaohugongzuokaizhanQK'
});
const JidiSelectEventStore = useJidiSelectEventStore();
// loading状态
const loading = ref(false);
// 设施数据
const facilities = ref([
    {
        name: '鱼道',
        count: 0,
        icon: 'icon iconfont icon-map-gyssYudao',
        key: 'FP_1'
    },
    {
        name: '集运鱼系统',
        count: 0,
        icon: 'icon iconfont icon-map-gyssJiyunyuxitong',
        key: 'FP_3'
    },
    {
        name: '升鱼机',
        count: 0,
        icon: 'icon iconfont icon-map-gyssShengyuji',
        key: 'FP_4'
    },
    {
        name: '其他',
        count: 0,
        icon: 'icon iconfont icon-map-gyssQita',
        key: 'FP_5'
    },

]);
const baseid = ref('')
// 弹框相关状态
const modalVisible = ref(false);
const currentFacility = ref<any>(null);
//获取页面数据
const getData = async () => {
    loading.value = true;
    try {
        let params = {
            "filter": {
                "logic": "and",
                "filters": []
            }
        }
        const res = await buildGetKendoListCust(params); //适配监控-VD
        let data = res?.data?.data || res?.data || [];

        // 重置所有设施的count为0
        facilities.value.forEach(facility => {
            facility.count = 0;
        });

        // 遍历接口返回的所有数据
        data.forEach(item => {
            const matchedFacility = facilities.value.find(facility => facility.key === item.sttpCode);
            if (matchedFacility) {
                // 如果在facilities中找到对应的key，累加到该设施
                matchedFacility.count += Number(item.built) + Number(item.building) || 0;
            } else {
                // 如果没有找到对应的key，累加到FP_5（其他）
                const otherFacility = facilities.value.find(facility => facility.key === 'FP_5');
                if (otherFacility) {
                    otherFacility.count += Number(item.built) + Number(item.building) || 0;
                }
            }
        });
    } catch (error) {
        console.error('获取数据失败:', error);
    } finally {
        loading.value = false;
    }
}
// 点击处理函数
const handleFacilityClick = (facility: any) => {
    currentFacility.value = facility;
    modalVisible.value = true;


};
// 关闭弹框
const handleCloseModal = () => {
    modalVisible.value = false;
    currentFacility.value = null;
};

watch(
    () => JidiSelectEventStore.selectedItem,
    (newVal) => {
        baseid.value = newVal.wbsCode;
        getData()
    },
    { deep: true, immediate: true }
);
// 页面加载时执行
onMounted(() => {
    // 延迟初始化，确保容器已渲染

});

// 组件卸载时清理
onUnmounted(() => {

});
</script>

<style lang="scss" scoped>
.facility-grid {
    width: 406px;
    flex-flow: wrap;
    display: flex;
    justify-content: space-between;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}

.facility-card {
    width: 200px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 2px;
    transition: all 0.3s;
    cursor: pointer;
    box-sizing: border-box;
}

.facility-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    // margin-right: 8px;
    background: #5389b5;
    border-radius: 50%;

    .anticon {
        font-size: 24px;
        color: #fff;
    }
}

.facility-info {
    flex: 1;
}

.facility-name {
    font-size: 16px;
    color: #333;
    // margin-bottom: 4px;
    // font-weight: 500;
}

.facility-count {
    font-size: 18px;
    color: #2f6b98;
    // font-weight: 600;
}
</style>