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

<!-- SidePanelItem.vue -->
<template>
  <SidePanelItem
    title="增殖站建设运行情况"
    :datetimePicker="datetimePicker"
    @update-values="handlePanelChange1"
  >
    <a-spin :spinning="loading">
      <div class="facility-grid">
      <div
        v-for="facility in facilities"
        :key="facility.name"
        class="facility-card"
        @click="openDialog(facility)"
      >
        <div
          style="
            width: 70px;
            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: 14px">
            <span class="facility-count">{{ facility.nowNum }}</span>
            <span v-if="facility.name == '增殖站数量'">座</span>
            <span v-if="facility.name == '放流量'">万尾</span>
            <span v-if="facility.name == '放流种类'">种</span>
          </div>
        </div>
      </div>
    </div>
    </a-spin>
    <a-modal
      v-model:visible="dialogVisible"
      :title="dialogTitle"
      :width="1536"
      :footer="null"
    >
      <WholeValuedStationOverviewDetail v-if="dialogVisible" :time="datetimePicker.value" all :baseId="baseid" />
    </a-modal>
  </SidePanelItem>
</template>

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

// 定义组件名（便于调试和递归）
defineOptions({
  name: 'zengzhizhanjiansheyunxing'
});
const JidiSelectEventStore = useJidiSelectEventStore();
const baseid = ref('');
const loading = ref(false);
const dialogVisible = ref(false);
useDraggable(dialogVisible, { boundary: true, resetOnOpen: true });
const dialogTitle = ref('增殖站概况');
const datetimePicker = ref({
  show: true,
  value: `${new Date().getFullYear() - 1}`, // 上一年
  format: 'YYYY',
  picker: 'year' as const,
  options: []
});
// 设施数据
const facilities:any = ref([
  {
    name: '增殖站数量',
    nowNum: '56',
    icon: 'icon iconfont icon-yuleizengzhizhan1'
  },
  {
    name: '放流量',
    nowNum: '1722',
    icon: 'icon iconfont icon-fangliushuliang'
  },
  {
    name: '放流种类',
    nowNum: '135',
    icon: 'icon iconfont icon-yuzhongshuliang'
  }
]);
const getData = async () => {
  loading.value = true;
  try {
    const year = datetimePicker.value.value;
    let params = {
      filter: {
        logic: 'and',
        filters: [
          baseid.value != 'all'
            ? {
                field: 'baseId',
                operator: 'eq',
                value: baseid.value
              }
            : null,
          {
            field: 'startTime',
            operator: 'gte',
            dataType: 'date',
            value: `${year}-01-01 00:00:00`
          },
          {
            field: 'endTime',
            operator: 'lte',
            dataType: 'date',
            value: `${year}-12-31 23:59:59`
          }
        ].filter(Boolean)
      }
    };
    let res = await overviewGetKendoListCust(params);
    if (res.data?.data?.length > 0) {
      const item = res.data.data[0];
      facilities.value[0].nowNum = item.count ?? '-';
      facilities.value[1].nowNum = item.realfcnt
        ? (item.realfcnt / 10000).toFixed(4)
        : '0.0000';
      facilities.value[2].nowNum = item.realftpCount ?? '0';
    }
  } finally {
    loading.value = false;
  }
};
// 页面加载时执行
onMounted(() => {
  // 延迟初始化，确保容器已渲染
});

// 组件卸载时清理
onUnmounted(() => {});

watch(
  () => JidiSelectEventStore.selectedItem,
  newVal => {
    if (newVal && newVal.wbsCode) {
      baseid.value = newVal.wbsCode;
       getData();
    }
  },
  { deep: true, immediate: true }
);
//监听子组件的数据变化
const handlePanelChange1 = async data => {
  console.log('当前所有控件状态:', data);
  // 当选择器或日期变化时,重新加载图表数据
  if (data.datetime) {
    await (datetimePicker.value.value = data.datetime);
     getData();
  }
};

const openDialog = (facility) => {
  dialogTitle.value = `增殖站概况`;
  dialogVisible.value = 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: 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: rgb(47, 107, 152);
  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>