WholeProcessPlatform/frontend/src/modules/liuyu/yichangyujing/shuizhijiancegaojing/shuizhijianceshuju.vue

<!-- SidePanelItem.vue -->
<template>
    <div>
        <SidePanelItem title="水质监测数据告警情况" :select="select" @update-values="handlePanelChange">
            <a-spin :spinning="dataLoading" tip="加载中...">
                <div class="body_box">
                    <div class="box" v-for="(item, index) in data" :key="index" @click="handleCardClick(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="modalVisible"
            title="水质监测告警统计"
            width="1536px"
            :footer="null"
            @cancel="handleModalClose"
        >
            <ModeGaoJing
                v-if="modalVisible"
                :baseId="baseid"
                :warnState="currentWarnState"
                :dtinType="defaultValue"
            />
        </a-modal>
    </div>
</template>

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

defineOptions({
    name: "shuizhijianceshuju",
});

const JidiSelectEventStore = useJidiSelectEventStore();
const baseid = ref('');
const dataLoading = ref(false);
const defaultValue = ref<string>('0');

// 弹框状态
const modalVisible = ref(false);
const currentWarnState = ref('');

const handleCardClick = (warnState: string) => {
    currentWarnState.value = warnState;
    modalVisible.value = true;
};

const handleModalClose = () => {
    modalVisible.value = false;
};

const select = ref({
    show: true,
    value: '0',
    options: [
        { label: '全部', value: '' },
        { label: '国家站', value: '1' },
        { label: '自建站', value: '0' },
    ],
    width: '140px',
    minWidth: '140px',
});

const data = ref([
    {
        name: '正常',
        num: '0',
        warnState: '1',
        icon: 'iconfont icon-shuidianzhan1 zhuangji',
        background: '#78c300',
    },
    {
        name: '告警',
        num: '0',
        warnState: '2',
        icon: 'iconfont icon-shuidianzhanGaojing shebeiZhengchang',
        background: '#e55555',
    },
    {
        name: '无数据',
        num: '0',
        warnState: '0',
        icon: 'iconfont icon-shuidianzhanWushujv shebeiLixian',
        background: '#8d8d8d',
    },
]);

const handlePanelChange = (payload: any) => {
    if (payload.select !== undefined) {
        defaultValue.value = payload.select;
        select.value.value = payload.select;
    }
    getCardData();
};

const getCardData = async () => {
    if (!baseid.value) return;

    dataLoading.value = true;

    try {
        const filters: any[] = [
            {
                field: 'sttpCode',
                operator: 'in',
                dataType: 'string',
                value: ['WQ'],
            },
            {
                field: 'mway',
                operator: 'eq',
                dataType: 'number',
                value: 2,
            },
            {
                field: 'usfl',
                operator: 'eq',
                dataType: 'string',
                value: '1',
            },
           baseid.value !='all'? {
                field: 'baseId',
                operator: 'eq',
                dataType: 'string',
                value: baseid.value,
            }: null,
        ].filter(Boolean);

        if (defaultValue.value === '') {
            filters.push({
                field: 'dtinType',
                operator: 'in',
                dataType: 'number',
                value: [0, 1],
            });
        } else {
            filters.push({
                field: 'dtinType',
                operator: 'eq',
                dataType: 'number',
                value: Number(defaultValue.value),
            });
        }

        const params = {
            filter: {
                logic: 'and',
                filters,
            },
            group: [
                {
                    dir: 'desc',
                    field: 'warnState',
                    aggregates: [
                        {
                            field: 'stcd',
                            aggregate: 'count',
                        },
                    ],
                },
            ],
            select: [],
        };

        const res = await getShuizhiGaojingList(params);
        const list = res?.data?.data || [];
        // debugger
        const result = {
            normal: 0,
            abnormal: 0,
            noData: 0,
        };

        list.forEach((item: any) => {
            const warnState = item.items?.[0]?.WARNSTATE;
            const count = item.items?.[0]?.COUNT_STCD ?? 0;
            if (warnState == 0) result.noData = count;
            else if (warnState == 1) result.normal = count;
            else if (warnState == 2) result.abnormal = count;
        });

        data.value = [
            {
                name: '正常',
                num: result.normal.toString(),
                warnState: '1',
                icon: 'iconfont icon-shuidianzhan1 zhuangji',
                background: '#78c300',
            },
            {
                name: '告警',
                num: result.abnormal.toString(),
                warnState: '2',
                icon: 'iconfont icon-shuidianzhanGaojing shebeiZhengchang',
                background: '#e55555',
            },
            {
                name: '无数据',
                num: result.noData.toString(),
                warnState: '0',
                icon: 'iconfont icon-shuidianzhanWushujv shebeiLixian',
                background: '#8d8d8d',
            },
        ];
    } 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>