WholeProcessPlatform/frontend/src/components/engEnvironmentData/index.vue

<template>
  <div>
    <div style="width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center">
      <span style="font-size: 14px; line-height: 22px; font-weight: 400; color: #000; margin-bottom: 4px">
        监测数据接入情况
      </span>

      <div style="display: flex; flex-direction: column">
        <div
          style="width: 190px; height: 36px; border: 1px solid #EDF2F8; padding: 4px; display: flex; justify-content: space-between; cursor: pointer"
          @click="handleItemClick('notAccess')"
        >
          <div>
            <span style="border-right: 2px solid #00A14D; margin-right: 6px"></span>
            <span>大中型已建在建电站</span>
          </div>
          <span style="padding-right: 3px; color: #2F6B98; cursor: pointer">{{ data.one ?? '-' }}</span>
        </div>
        <div
          style="width: 190px; height: 36px; border: 1px solid #EDF2F8; padding: 4px; display: flex; justify-content: space-between; margin: 3px 0; cursor: pointer"
          @click="handleItemClick('partAccess')"
        >
          <div>
            <span style="border-right: 2px solid #4978AD; margin-right: 6px"></span>
            <span>已接入电站运行数据</span>
          </div>
          <span style="padding-right: 3px; color: #2F6B98; cursor: pointer">{{ data.two ?? '-' }}</span>
        </div>
        <div
          style="width: 190px; height: 36px; border: 1px solid #EDF2F8; padding: 4px; display: flex; justify-content: space-between; cursor: pointer"
          @click="handleItemClick('isAccess')"
        >
          <div>
            <span style="border-right: 2px solid #606060; margin-right: 6px"></span>
            <span>已开展全过程监测工作</span>
          </div>
          <span style="padding-right: 3px; color: #2F6B98; cursor: pointer">{{ data.three ?? '-' }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { getVmsstbprptKendoList } from '@/api/home';
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';

defineOptions({
    name: 'EngEnvironmentData'
});

const emit = defineEmits<{
    (e: 'item-click', params: any): void;
}>();

const JidiSelectEventStore = useJidiSelectEventStore();
const baseid = ref('');
const dataLoading = ref(false);
const data = ref<Record<string, number>>({ one: 0, two: 0, three: 0 });

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

    const baseFilters: any[] = [
        { field: 'sttpCode', operator: 'eq', dataType: 'string', value: 'ENG' },
        { field: 'bldsttCcode', operator: 'in', dataType: 'string', value: ['1', '2'] }
    ];
    if (baseid.value !== 'all') {
        baseFilters.unshift({ field: 'baseId', operator: 'eq', dataType: 'string', value: baseid.value });
    }

    const params1 = {
        filter: {
            logic: 'and',
            filters: [
                ...baseFilters,
                { field: 'prsc', operator: 'in', dataType: 'string', value: ['1', '2', '3'] }
            ]
        }
    };

    const params2 = {
        filter: {
            logic: 'and',
            filters: [
                ...baseFilters,
                { field: 'runState', operator: 'eq', dataType: 'number', value: 4 },
                { field: 'dtin', operator: 'eq', dataType: 'number', value: 1 }
            ]
        }
    };

    const params3 = {
        filter: {
            logic: 'and',
            filters: [
                ...baseFilters,
                { field: 'prsc', operator: 'in', dataType: 'string', value: ['1', '2', '3'] },
                { field: 'dtinEnv', operator: 'in', dataType: 'string', value: ['2'] }
            ]
        }
    };

    try {
        dataLoading.value = true;
        const [res1, res2, res3] = await Promise.all([
            getVmsstbprptKendoList(params1),
            getVmsstbprptKendoList(params2),
            getVmsstbprptKendoList(params3)
        ]);

        const record = { one: 0, two: 0, three: 0 };
        const responses = [res1, res2, res3];
        responses.forEach((res, index) => {
            const total = res?.data?.total ?? 0;
            switch (index) {
                case 0:
                    record.one = total;
                    break;
                case 1:
                    record.two = total;
                    break;
                case 2:
                    record.three = total;
                    break;
            }
        });
        data.value = record;
        // debugger
    } catch (error) {
        console.error('EngEnvironmentData getData error:', error);
    } finally {
        dataLoading.value = false;
    }
};

const handleItemClick = (name: string) => {
    emit('item-click', { name });
};

watch(
    () => JidiSelectEventStore.selectedItem,
    newVal => {
        if (newVal && newVal.wbsCode) {
            baseid.value = newVal.wbsCode;
            getData();
        }
    },
    { deep: true, immediate: true }
);
</script>