WholeProcessPlatform/frontend/src/modules/liuyu/yichangyujing/shengtailiuliangxianzhigaojing/shengtailiuliangxianshuju.vue

<!-- SidePanelItem.vue -->
<template>
    <div>
        <SidePanelItem title="生态流量低于限值告警情况">
            <a-spin :spinning="dataLoading" tip="加载中...">
                <div class="body_box">
                    <div class="box" v-for="(item, index) in data" :key="index" @click="handleBoxClick(item.warnState)" style="cursor: pointer;">
                        <div>
                            <div :class="item.icon" :style="{background:item.background}"></div>
                            <div class="title_text">{{ item.name }}</div>
                        </div>
                        <div><span class="text_num">{{ item.num }}</span><span>座</span></div>
                    </div>
                </div>
            </a-spin>
        </SidePanelItem>

        <!-- 详情弹窗 -->
        <a-modal
            v-model:open="isModalOpen"
            title="生态流量低于限值告警统计"
            width="90%"
            :body-style="{ height: '600px', padding: '16px' }"
            :footer="null"
            @cancel="handleModalClose"
        >
            <ModeGaoJing
                :base-id="baseid"
                :warn-state="currentWarnState"
                warn-type="QEC"
                sttp-code="ENG"
            />
        </a-modal>
    </div>
</template>

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

// 定义组件名（便于调试和递归）
defineOptions({
    name: "jidiInfoMod",
});

const JidiSelectEventStore = useJidiSelectEventStore();
const baseid = ref('');
const dataLoading = ref(false);
const isModalOpen = ref(false);
const currentWarnState = ref('');
useDraggable(isModalOpen, { boundary: true, resetOnOpen: true });
const data = ref([
    {
        name:'正常',
        num:'0',
        icon:'iconfont icon-shuidianzhan1 zhuangji',
        background:'#78c300',
        warnState:'1',
    },
     {
        name:'告警',
        num:'0',
        icon:'iconfont icon-shuidianzhanGaojing shebeiZhengchang',
        background:'#e55555',
        warnState:'2',
    },
     {
        name:'无数据',
        num:'0',
        icon:'iconfont icon-shuidianzhanWushujv shebeiLixian',
        background:'#8d8d8d',
        warnState:'0',
    },
])

// 点击卡片
const handleBoxClick = (warnState: string) => {
    currentWarnState.value = warnState;
    isModalOpen.value = true;
};

// 关闭弹窗
const handleModalClose = () => {
    isModalOpen.value = false;
};

// ==================== 获取卡片统计数据 ====================
const getCardData = async () => {
    if (!baseid.value) return;
    
    dataLoading.value = true;
    
    try {
        const params = {
            filter: {
                logic: 'and',
                filters: [
                    baseid.value !== 'all' ? {
                        field: 'base_Id',
                        operator: 'eq',
                        dataType: 'string',
                        value: baseid.value
                    } : null
                ].filter(Boolean)
            }
        };
        
        const res = await getStllGaojingList(params);
        const list = res?.data?.data || [];
        
        // 筛选 warnType === 'QEC' 的数据
        const qecList = list.filter((item: any) => item.warnType === 'QEC');
        
        // 按 warnState 分类统计
        const result = {
            normal: 0,    // warnState = 1
            abnormal: 0,  // warnState = 2
            noData: 0     // warnState = 0
        };
        
        qecList.forEach((item: any) => {
            if (item.warnState === 0) result.noData = item.num;
            else if (item.warnState === 1) result.normal = item.num;
            else if (item.warnState === 2) result.abnormal = item.num;
        });
        
        // 更新卡片数据
        data.value = [
            {
                name: '正常',
                num: result.normal.toString(),
                icon: 'iconfont icon-shuidianzhan1 zhuangji',
                background: '#78c300',
                warnState: '1'
            },
            {
                name: '告警',
                num: result.abnormal.toString(),
                icon: 'iconfont icon-shuidianzhanGaojing shebeiZhengchang',
                background: '#e55555',
                warnState: '2'
            },
            {
                name: '无数据',
                num: result.noData.toString(),
                icon: 'iconfont icon-shuidianzhanWushujv shebeiLixian',
                background: '#8d8d8d',
                warnState: '0'
            }
        ];
    } catch (error) {
        console.error('获取生态流量告警数据失败:', error);
    } finally {
        dataLoading.value = false;
    }
};

// ==================== 监听基地变化 ====================
watch(
    () => JidiSelectEventStore.selectedItem,
    async newVal => {
        if (newVal && newVal.wbsCode) {
            baseid.value = newVal.wbsCode;
            getCardData();
        }
    },
    { deep: true, immediate: true }
);
</script>

<style lang="scss">
.body_box {
    width: 100%;
    height: 132px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .box {
        width: 126px;
        height: 116px;
        border: 1px solid rgba(108, 164, 247, 0.35);
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;

        .iconfont {
            width: 40px;
            height: 40px;
            background: #78c300;
            border-radius: 50%;
            text-align: center;
            line-height: 40px;
            font-size: 24px;
            color: #fff;
        }
        .title_text{
            width: 100%;
            text-align: center;
        }
        .text_num{
            width: 100%;
            text-align: center;
            font-size: 24px;
        }
    }
}
</style>