WholeProcessPlatform/frontend/src/modules/huanbaoMod/index.vue

<!-- SidePanelItem.vue -->
<template>
  <SidePanelItem title="环保设施情况">
    <a-spin :spinning="loading">
      <div class="facility-grid" v-if="facilities.length > 0">
        <div
          v-for="facility in facilities"
          :key="facility.type"
          class="facility-card"
          @click="handleCardClick(facility)"
        >
          <div style="width: 60px;height: 62px;display: flex;align-items: center;justify-content: center;">
            <div class="facility-icon">
              <i style="color: #fff;" :class="facility.icon"></i>
            </div>
          </div>

          <div class="facility-info">
            <div class="facility-name">{{ facility.name }}</div>
            <div style="font-size: 16px;">
              <span class="facility-count">{{ facility.nowNum + facility.buildNum }}</span><span>个</span>
            </div>
          </div>
        </div>
      </div>
      <a-empty v-else />
    </a-spin>

    <!-- 二级弹框 -->
    <a-modal
      v-model:open="modalVisible"
      title="环保设施情况"
      width="1536px"
      :footer="null"
    >
      <HuanbaoModTwoLayers
        v-if="modalVisible"
        :data="modalData"
        :currentJidiInfo="currentJidiInfo"
        :res="modalRes"
      />
    </a-modal>
  </SidePanelItem>
</template>

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

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

// 基地选择 store
const JidiSelectEventStore = useJidiSelectEventStore();
const baseid = ref('');
const currentJidiInfo = ref<any>(null);

// 设施列表模板
const facilityList = [
  { name: '生态流量泄放设施', icon: 'icon iconfont icon-shengtailiuliang2', type: 'EQ', accessNum: 0, buildNum: 0, nowNum: 0, totalNum: 1 },
  { name: '低温水减缓设施', icon: 'icon iconfont icon-diwenshuijianhuan', type: 'DW', accessNum: 0, buildNum: 0, nowNum: 0, totalNum: 1 },
  { name: '栖息地', icon: 'icon iconfont icon-qixidi', type: 'FH', accessNum: 0, buildNum: 0, totalNum: 1, nowNum: 0 },
  { name: '过鱼设施', icon: 'icon iconfont icon-guoyusheshi', type: 'FP', accessNum: 0, buildNum: 0, nowNum: 0, totalNum: 1 },
  { name: '鱼类增殖站', icon: 'icon iconfont icon-yuleizengzhizhan', type: 'FB', accessNum: 0, buildNum: 0, nowNum: 0, totalNum: 1 },
  { name: '珍稀植物园', icon: 'icon iconfont icon-zhenxizhiwuyuan', type: 'VP', accessNum: 0, buildNum: 0, totalNum: 1, nowNum: 0 },
  { name: '动物救助站', icon: 'icon iconfont icon-dongwujiuzhuzhan', type: 'VA', accessNum: 0, buildNum: 0, totalNum: 1, nowNum: 0 }
];

// 设施数据
const facilities = ref<any[]>([]);
const loading = ref(false);

// 弹框相关
const modalVisible = ref(false);
const modalData = ref<any>({});
const modalRes = ref({
  bldstt: '',
  hydrodtin: '1'
});

// 获取数据
const getData = async () => {
  if (!baseid.value) return;

  loading.value = true;
  try {
    // const params = { baseId: baseid.value, '1': '1' };
    const params ={
    "filter": {
        "logic": "and",
        "filters": [
            {
                "field": "1",
                "operator": "eq",
                "dataType": "string",
                "value": "1"
            },
            baseid.value !='all'?{
                "field": "baseId",
                "operator": "eq",
                "dataType": "string",
                "value": "01"
            }:null
        ].filter(Boolean)
    }
}
    const res = await environmentalProtectionConstruction(params);

    if (res?.data?.data) {
      const list = [...facilityList];
      list.forEach((item) => {
        const found = res.data.data.find((el: any) => item.type === el.repCode);
        if (found) {
          item.nowNum = found.count || 0;
        }
      });
      facilities.value = list;
    } else {
      facilities.value = [];
    }
  } catch (error) {
    console.error('获取环保设施数据失败:', error);
    facilities.value = [];
  } finally {
    loading.value = false;
  }
};

// 点击卡片
const handleCardClick = (facility: any) => {
  modalData.value = facility;
  modalRes.value = {
    bldstt: '',
    hydrodtin: ''
  };
  modalVisible.value = true;
};

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

<style lang="scss" scoped>
.facility-grid {
  width: 406px;
  flex-flow: wrap;
  display: flex;
  justify-content: space-between;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}

.facility-card {
  width: 200px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 2px;
  transition: all 0.3s;
  cursor: pointer;
  box-sizing: border-box;
}

.facility-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #2f6b98;
  border-radius: 50%;

  .anticon {
    font-size: 24px;
    color: #fff;
  }
}

.facility-info {
  flex: 1;
}

.facility-name {
  font-size: 16px;
  color: #333;
}

.facility-count {
  font-size: 18px;
  color: #2f6b98;
}
</style>