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>

    <a-modal
      v-model:open="modalVisible"
      title="环境监测数据接入情况"
      width="1536px"
      :footer="null"
      :destroy-on-close="true"
    >
      <HuanJingSJJRQK
        v-if="modalVisible"
        :dataDimensionVal="modalProps.dataDimensionVal"
        :name="modalProps.name"
      />
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { getVmsstbprptKendoList } from '@/api/home';
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
import HuanJingSJJRQK from '@/modules/shuidianhuangjingjieruMod/TwoLayer/HuanJingSJJRQK.vue';
import { useDraggable } from '@/utils/drag';
defineOptions({
    name: 'EngEnvironmentData'
});

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

const modalVisible = ref(false);
const modalProps = ref<any>({});
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
function openModal(props: any) {
    modalProps.value = props;
    modalVisible.value = true;
}

defineExpose({
    openModal,
    dataLoading
});

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'] }
            ]
        },
        group: [{ dir: 'desc', field: 'sttpCode' }]
    };

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

    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'] }
            ]
        },
        group: [{ dir: 'desc', field: 'dtinEnv' }]
    };

    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) => {
            if (res?.data?.data && Array.isArray(res.data.data) && res.data.data.length > 0) {
                const count = res.data.data[0].count ?? 0;
                switch (index) {
                    case 0:
                        record.one = count;
                        break;
                    case 1:
                        record.two = count;
                        break;
                    case 2:
                        record.three = count;
                        break;
                }
            }
        });
        data.value = record;
    } catch (error) {
        console.error('EngEnvironmentData getData error:', error);
    } finally {
        dataLoading.value = false;
    }
};

const handleItemClick = (name: string) => {
    const currentJidiInfo = JidiSelectEventStore.selectedItem;
    openModal({
        dataDimensionVal: currentJidiInfo?.wbsCode || 'all',
        name
    });
};

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