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

<!-- SidePanelItem.vue -->
<template>
  <SidePanelItem title="过鱼设施">
    <a-spin :spinning="loading" tip="加载中...">
      <div class="facility-grid">
        <div
          v-for="facility in facilities"
          :key="facility.name"
          class="facility-card"
          @click="handleFacilityClick(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"
                type="icon-shengtailiuliang2"
              ></i>
            </div>
          </div>

          <div class="facility-info">
            <div class="facility-name">{{ facility.name }}</div>
            <div style="font-size: 16px">
              <span class="facility-count">{{ facility.count }}</span
              ><span>座</span>
            </div>
          </div>
        </div>
      </div>
    </a-spin>
  </SidePanelItem>
  <!-- 弹框 -->
  <a-modal
    v-model:open="modalVisible"
    :title="'过鱼设施'"
    :footer="null"
    width="1536px"
    @cancel="handleCloseModal"
  >
    <ModalPage v-if="currentFacility" :data="currentFacility" :jdId="'all'" />
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
import SidePanelItem from '@/components/SidePanelItem/index.vue';
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
import { buildGetKendoListCust } from '@/api/gyss';
import ModalPage from './ModalPage/index.vue';
import { useDraggable } from '@/utils/drag';

// 定义组件名（便于调试和递归）
defineOptions({
  name: 'qixidibaohugongzuokaizhanQK'
});
const JidiSelectEventStore = useJidiSelectEventStore();
// loading状态
const loading = ref(false);
// 设施数据
const facilities = ref([
  {
    name: '鱼道',
    count: 0,
    icon: 'icon iconfont icon-map-gyssYudao',
    key: 'FP_1'
  },
  {
    name: '集运鱼系统',
    count: 0,
    icon: 'icon iconfont icon-map-gyssJiyunyuxitong',
    key: 'FP_3'
  },
  {
    name: '升鱼机',
    count: 0,
    icon: 'icon iconfont icon-map-gyssShengyuji',
    key: 'FP_4'
  },
  {
    name: '其他',
    count: 0,
    icon: 'icon iconfont icon-map-gyssQita',
    key: 'FP_5'
  }
]);
const baseid = ref('');
// 弹框相关状态
const modalVisible = ref(false);
const currentFacility = ref<any>(null);
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
//获取页面数据
const getData = async () => {
  loading.value = true;
  try {
    let params = {
      filter: {
        logic: 'and',
        filters: []
      }
    };
    const res = await buildGetKendoListCust(params); //适配监控-VD
    let data = res?.data?.data || res?.data || [];

    // 重置所有设施的count为0
    facilities.value.forEach(facility => {
      facility.count = 0;
    });

    // 遍历接口返回的所有数据
    data.forEach(item => {
      const matchedFacility = facilities.value.find(
        facility => facility.key === item.sttpCode
      );
      if (matchedFacility) {
        // 如果在facilities中找到对应的key，累加到该设施
        matchedFacility.count +=
          Number(item.built) + Number(item.building) || 0;
      } else {
        // 如果没有找到对应的key，累加到FP_5（其他）
        const otherFacility = facilities.value.find(
          facility => facility.key === 'FP_5'
        );
        if (otherFacility) {
          otherFacility.count +=
            Number(item.built) + Number(item.building) || 0;
        }
      }
    });
  } catch (error) {
    console.error('获取数据失败:', error);
  } finally {
    loading.value = false;
  }
};
// 点击处理函数
const handleFacilityClick = (facility: any) => {
  currentFacility.value = facility;
  modalVisible.value = true;
};
// 关闭弹框
const handleCloseModal = () => {
  modalVisible.value = false;
  currentFacility.value = null;
};

watch(
  () => JidiSelectEventStore.selectedItem,
  newVal => {
    baseid.value = newVal.wbsCode;
    getData();
  },
  { deep: true, immediate: true }
);
// 页面加载时执行
onMounted(() => {
  // 延迟初始化，确保容器已渲染
});

// 组件卸载时清理
onUnmounted(() => {});
</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: 70px;
  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;
  // margin-right: 8px;
  background: #5389b5;
  border-radius: 50%;

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

.facility-info {
  flex: 1;
}

.facility-name {
  font-size: 16px;
  color: #333;
  // margin-bottom: 4px;
  // font-weight: 500;
}

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