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';
import { useDraggable } from '@/utils/drag';

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('');
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
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-map-rgszzDabiao zhuangji',
    background: '#78c300'
  },
  {
    name: '告警',
    num: '0',
    warnState: '2',
    icon: 'iconfont icon-map-rgszzDabiao shebeiZhengchang',
    background: '#e55555'
  },
  {
    name: '无数据',
    num: '0',
    warnState: '0',
    icon: 'iconfont icon-map-rgszzDabiao 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: '0',
        warnState: '1',
        icon: 'iconfont icon-map-rgszzDabiao zhuangji',
        background: '#78c300'
      },
      {
        name: '告警',
        num: '0',
        warnState: '2',
        icon: 'iconfont icon-map-rgszzDabiao shebeiZhengchang',
        background: '#e55555'
      },
      {
        name: '无数据',
        num: '0',
        warnState: '0',
        icon: 'iconfont icon-map-rgszzDabiao 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>