WholeProcessPlatform/frontend/src/modules/shuizhijiancegongzuoQK/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">
        <ShuiwenjiancegongzuoEJ v-if="currentFacility" :activeKey="currentFacility.key" :tabs="facilities"
            :baseId="baseid" />
    </a-modal>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue';
import SidePanelItem from '@/components/SidePanelItem/index.vue';
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
import { msstbprptGetKendoList } from '@/api/sz'
import ShuiwenjiancegongzuoEJ from "./shuiwenjiancegongzuoEJ.vue"
import { useDraggable } from '@/utils/drag';

// 定义组件名（便于调试和递归）
defineOptions({
    name: 'shuizhijiancegongzuoQK'
});
const JidiSelectEventStore = useJidiSelectEventStore();
// loading状态
const loading = ref(false);
// 设施数据
const facilities = ref([
    {
        name: '河道水质站',
        count: 0,
        icon: 'icon iconfont icon-qixidi',
        key: '0'
    },
    {
        icon: 'icon iconfont icon-yuleizengzhizhan',
        name: '增殖站水质站',
        count: '0',
        key: '3'
    },
    {
        name: '国家水质站',
        count: 0,
        icon: 'icon iconfont icon-diwenshuijianhuan',
        key: '1'
    },
    {
        name: '人工水质监测断面',
        count: 0,
        icon: 'icon iconfont icon-shuiwen-line',
        key: '2'
    },

]);

// 弹框相关状态
const modalVisible = ref(false);
const currentFacility = ref<any>(null);
const baseid = ref("")

useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
//获取水质监测工作开展情况数据
const getDataList = async () => {
    loading.value = true;
    try {
        let data1 = {
            "filter": {
                "logic": "and",
                "filters": [
                    baseid.value != "all" ? {
                        "field": "baseId",
                        "operator": "eq",
                        "dataType": "string",
                        "value":  baseid.value
                    } : null,
                    {
                        "field": "isDeleted",
                        "operator": "eq",
                        "value": 0
                    },
                    {
                        "field": "sttpCode",
                        "operator": "eq",
                        "value": "WQ"
                    },
                    {
                        "logic": "or",
                        "filters": [
                            {
                                "logic": "and",
                                "filters": [
                                    {
                                        "field": "mway",
                                        "operator": "eq",
                                        "value": 2
                                    },
                                    {
                                        "field": "dtinType",
                                        "operator": "eq",
                                        "value": 0
                                    }
                                ]
                            },
                            {
                                "logic": "and",
                                "filters": [
                                    {
                                        "field": "mway",
                                        "operator": "eq",
                                        "value": 1
                                    },
                                    {
                                        "field": "dtinType",
                                        "operator": "eq",
                                        "value": 2
                                    }
                                ]
                            },
                            {
                                "logic": "and",
                                "filters": [
                                    {
                                        "field": "mway",
                                        "operator": "eq",
                                        "value": 2
                                    },
                                    {
                                        "field": "dtinType",
                                        "operator": "eq",
                                        "value": 1
                                    }
                                ]
                            }
                        ]
                    }
                ].filter(Boolean)
            },
            "group": [
                {
                    "dir": "asc",
                    "field": "dtinType"
                }
            ]
        }
        let data2 = {
            "filter": {
                "logic": "and",
                "filters": [
                    baseid.value != "all" ? {
                        "field": "baseId",
                        "operator": "eq",
                        "dataType": "string",
                        "value":  baseid.value
                    } : null,
                    {
                        "field": "isDeleted",
                        "operator": "eq",
                        "value": 0
                    },
                    {
                        "field": "sttpCode",
                        "operator": "eq",
                        "value": "WQFB"
                    },
                    {
                        "filters": [
                            {
                                "logic": "and",
                                "filters": [
                                    {
                                        "field": "mway",
                                        "operator": "eq",
                                        "value": 2
                                    },
                                    {
                                        "field": "dtinType",
                                        "operator": "eq",
                                        "value": 0
                                    }
                                ]
                            }
                        ]
                    }
                ].filter(Boolean)
            },
            "group": [
                {
                    "dir": "asc",
                    "field": "dtinType"
                }
            ]
        }
        // const params = [data1, data2]
        const res1 = await msstbprptGetKendoList(data1);
        // 
        let finalData = facilities.value.map((item) => ({ ...item, count: 0 }))
        if (res1.data) {
            const { data } = res1
            data.data.forEach((item: any, index: number) => {
                const target = finalData.find((n) => n.key == item.key)
                if (target) {
                    target.count = item.count || 0
                }
            })
        }
        console.log(finalData)
        // /
        const res2 = await msstbprptGetKendoList(data2);
        if (res2.data) {
            const responseData = res2?.data?.data
            const target1 = finalData.find((n) => n.key == '3')
            if (target1) {
                target1.count = responseData[0]?.count || 0
            }
        }
        facilities.value = finalData
         console.log(finalData)
        // 
    } catch (error) {
        console.error('获取数据失败:', error);
    } finally {
        loading.value = false;
    }
}
watch(
    () => JidiSelectEventStore.selectedItem,
    (newVal) => {
        baseid.value = newVal.wbsCode;
        getDataList()
    },
    { deep: true, immediate: true }
);
// 点击处理函数
const handleFacilityClick = (facility: any) => {
    // console.log(facility);
    currentFacility.value = facility;
    modalVisible.value = true;


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


// 页面加载时执行的逻辑
onMounted(() => {

});
</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>