WholeProcessPlatform/frontend/src/modules/shuidianhuangjingjieruMod/TwoLayer/ShuiDianKaiFQKTwoLayer.vue

<script setup lang="ts">
import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue';
import * as echarts from 'echarts';
import type { EChartsOption } from 'echarts';
import type { ColumnsType } from 'ant-design-vue/es/table/interface';
import { DownloadOutlined } from '@ant-design/icons-vue';
import BasicSearch from '@/components/BasicSearch/index.vue';
import BasicTable from '@/components/BasicTable/index.vue';
import { message, Spin, Empty } from 'ant-design-vue';
import { useModelStore } from '@/store/modules/model';
import { handleTabs } from '@/components/MapModal/setting.config';
import {
  getVmsstbprptKendoList,
  getVmsstbprptKendoListCust,
  getBaseWbsb
} from '@/api/home';
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';

const props = defineProps<{
  defaultJidiInfo?: Record<string, string | number | boolean>;
  seriesName?: string;
  stateName?: string;
  defaultTab?: string;
}>();

interface TabItem {
  key: string;
  value: string;
  col: string;
  unit: string;
  count: number;
}

interface PieDataItem {
  key: string;
  name: string;
  value: number;
  unit: string;
  dataDimensionRecursive?: string;
  index?: number;
}

interface TableFilterParams {
  baseId?:
    | string
    | Array<{
        field: string;
        operator: string;
        dataType: string;
        value: string[];
      }>;
  hbrvcd?:
    | string
    | Array<{
        field: string;
        operator: string;
        dataType: string;
        value: string[];
      }>;
  bldsttCcode?: string;
  stnmContains?: string | null;
  prsc?: Array<{
    field: string;
    operator: string;
    dataType: string;
    value: string[];
  }>;
  ttpwr?: Array<{ field: string; operator: string }>;
  sttpCode?: string;
}

const modelStore = useModelStore();
const JidiSelectEventStore = useJidiSelectEventStore();

const qid = ref<string>((props.defaultJidiInfo?.baseid as string) || 'all');
const jiDiList = ref<any[]>([]);
const defJD = ref<string>((props.defaultJidiInfo?.basename as string) || '');

const tabIndex = ref<string>('');
const tabKey = ref<string>('');
const tabCol = ref<string>('');
const tabList = ref<TabItem[]>([]);

const stnm = ref<string | null>(null);
const formRef = ref<any>();

const pieData = ref<PieDataItem[]>([]);
const pieCode = ref<string[]>([]);
const pikData = ref<PieDataItem[]>([]);
const chartInstance = ref<any>(null);
const chartInitialized = ref<boolean>(false);
const dataLoading = ref<boolean>(false);

const chartRefs = ref<Record<string, HTMLElement>>({});
const chartInstances = ref<Record<string, any>>({});
const setChartRef = (el: any, key: string) => {
  if (el) {
    chartRefs.value[key] = el as HTMLElement;
  }
};

const tableRefs = ref<Record<string, any>>({});
const setTableRef = (el: any, key: string) => {
  if (el) tableRefs.value[key] = el;
};

const unit = '万kW';
const jdColor = [
  '#5B8FF9',
  '#5AD8A6',
  '#F6BD16',
  '#7262FD',
  '#FF6B6B',
  '#9556a4',
  '#30b7b9'
];
const tableRef = ref<any>(null);

function transUnit(value: number): number {
  return Math.round(value * 0.1 * 100) / 100;
}

async function fetchTabData(params: any): Promise<TabItem[]> {
  try {
    const _name = `装机容量(${unit})`;
    const useTtpwrFilter = props.seriesName === _name;

    const aggregates = [{ field: 'ttpwr', aggregate: 'sum' }];
    const sortConfig = useTtpwrFilter
      ? [{ dir: 'desc', field: 'bldsttCcode', aggregates }]
      : [{ dir: 'desc', field: 'bldsttCcode' }];

    const filterParams = useTtpwrFilter
      ? [...params, { field: 'ttpwr', operator: 'isnotnull' }]
      : params;

    const res = await getVmsstbprptKendoList({
      filter: {
        logic: 'and',
        filters: filterParams
      },
      group: sortConfig
    });

    const resData = res?.data?.data || [];
    if (!Array.isArray(resData)) return [];

    let list: TabItem[] = [];
    resData.forEach((cur: any) => {
      if (cur.key == '0') {
        list.push({
          col: useTtpwrFilter ? 'ttpwr' : 'engTotal',
          key: 'noBuild',
          unit: useTtpwrFilter ? unit : '座',
          value: '未建',
          count: useTtpwrFilter
            ? cur?.items[0]?.SUM_TTPWR
              ? transUnit(cur.items[0].SUM_TTPWR)
              : 0
            : cur?.items[0]?.COUNT_BLDSTTCCODE || 0
        });
      } else if (cur.key == '1') {
        list.push({
          col: useTtpwrFilter ? 'ttpwr' : 'engTotal',
          key: 'building',
          unit: useTtpwrFilter ? unit : '座',
          value: '在建',
          count: useTtpwrFilter
            ? cur?.items[0]?.SUM_TTPWR
              ? transUnit(cur.items[0].SUM_TTPWR)
              : 0
            : cur?.items[0]?.COUNT_BLDSTTCCODE || 0
        });
      } else if (cur.key == '2') {
        list.push({
          col: useTtpwrFilter ? 'ttpwr' : 'engTotal',
          key: 'build',
          unit: useTtpwrFilter ? unit : '座',
          value: '已建',
          count: useTtpwrFilter
            ? cur?.items[0]?.SUM_TTPWR
              ? transUnit(cur.items[0].SUM_TTPWR)
              : 0
            : cur?.items[0]?.COUNT_BLDSTTCCODE || 0
        });
      }
    });

    return list;
  } catch (error) {
    console.error('获取Tab数据失败:', error);
    message.error('获取Tab数据失败');
    return [];
  }
}

async function fetchPieData(params: any): Promise<PieDataItem[]> {
  try {
    const _name = `装机容量(${unit})`;
    const useTtpwrFilter = props.seriesName === _name;

    const aggregates = [{ field: 'ttpwr', aggregate: 'sum' }];
    const sortConfig = [
      qid.value === 'all' || qid.value === 'other'
        ? null
        : { dir: 'asc', field: 'rvcdStepSort' },
      qid.value === 'all' ? { dir: 'asc', field: 'baseStepSort' } : null,
      { dir: 'asc', field: qid.value === 'all' ? 'baseId' : 'hbrvcd' },
      { dir: 'desc', field: qid.value === 'all' ? 'baseName' : 'hbrvcdName' },
      useTtpwrFilter
        ? { dir: 'desc', field: 'bldsttCcode', aggregates }
        : { dir: 'desc', field: 'bldsttCcode' }
    ].filter(Boolean);

    const filterParams = useTtpwrFilter
      ? [...params, { field: 'ttpwr', operator: 'isnotnull' }]
      : params;

    const res = await getVmsstbprptKendoList({
      filter: {
        logic: 'and',
        filters: filterParams
      },
      group: sortConfig
    });

    const resData = res?.data?.data || [];
    if (!Array.isArray(resData)) return [];

    let list = resData.flatMap((item: any) => {
      let arr: PieDataItem[] = [];

      const itmeData = item?.items;

      itmeData?.map((outItem: any) => {
        const level5Data = outItem?.items?.[0]?.items?.[0]?.items?.[0];

        const name = outItem?.items?.[0]?.key;

        if (name) {
          arr.push({
            key: outItem?.key,
            dataDimensionRecursive: 'true',
            name: name,
            unit: '',
            value:
              useTtpwrFilter
                ? level5Data?.SUM_TTPWR && +transUnit(level5Data?.SUM_TTPWR)
                : level5Data?.COUNT_BLDSTTCCODE
          });
        }
      });

      return arr;
    });

    if (qid.value === 'other' && list.length > 0) {
      const introRes = await getBaseWbsb({
        filter: {
          logic: 'and',
          filters: [
            { field: 'wbsType', operator: 'eq', value: 'PSB_RVCD' },
            { field: 'objId', operator: 'eq', value: 'other' },
            { field: 'orderIndex', operator: 'isnotnull' }
          ]
        },
        sort: [{ field: 'orderIndex', dir: 'asc' }],
        select: ['wbsCode', 'wbsName', 'orderIndex']
      });

      const introData = introRes?.data?.data || [];
      if (introData?.length && list?.length) {
        list = list
          .map((el: any) => {
            const found = introData.find(
              (item: any) => el?.key === item?.wbsCode
            );
            return {
              ...el,
              index: found?.orderIndex
            };
          })
          .sort((a: any, b: any) => a?.index - b?.index);
      }
    }

    return list;
  } catch (error) {
    console.error('获取饼图数据失败:', error);
    message.error('获取饼图数据失败');
    return [];
  }
}

const listUrl = computed(() =>
  qid.value === 'all' ? getVmsstbprptKendoListCust : getVmsstbprptKendoList
);

const customTransform = (res: any) => ({
  records: res?.data?.data || res?.data?.items || [],
  total: res?.data?.total || 0
});

function handleExport() {
  if (tableRef.value && typeof tableRef.value.export === 'function') {
    tableRef.value.export();
  } else {
    message.info('导出功能待实现');
  }
}

const chartSetting = computed<EChartsOption>(() => {
  const _name = `装机容量(${unit})`;  // unit = '万kW'
const useTtpwrFilter = props.seriesName === _name;
  const total = pieData.value
    .reduce((acc, item) => acc + item.value, 0)
    .toFixed(2);
  const flag = props.seriesName === '数量(座)';

  const bbbb = flag ? '电站总数量' : '总装机容量';
  const dddd = flag ? '电站数量' : '装机容量';
  const cccc = flag ? ' (座)' : ` (${unit})`;

  const colors = pieData.value.map((item: any, index: any) => {
    return jdColor[index % jdColor.length];
  });

  return {
    color: colors,
    tooltip: {
      trigger: 'item',
      formatter: (params: any) =>
        `${dddd}<div>${params.marker}${params.name}: &nbsp;&nbsp;&nbsp;&nbsp;<span style="float:right">${params.value}${cccc}</span></div>`
    },
    title: [
      {
        text: String(total || 0),
        left: useTtpwrFilter?'24%':'28%',
        top: '43%',
        textStyle: { fontSize: 24, fontWeight: 'bold', color: '#333' }
      },
      {
        text: bbbb,
        left: useTtpwrFilter?'27%':'28%',
        top: '50%',
        textStyle: { fontSize: 14, color: '#666' }
      },
      {
        text: cccc,
        left: useTtpwrFilter?'29%':'32%',
        top: '55%',
        textStyle: { fontSize: 12, color: '#999' }
      }
    ],
    legend: {
      type: 'scroll',
      orient: 'vertical',
      right: 10,
      top: 20,
      bottom: 20,
      textStyle: { fontSize: 12 }
    },
    series: [
      {
        name: dddd,
        type: 'pie',
        radius: ['30%', '40%'],
        center: ['35%', '50%'],
        avoidLabelOverlap: true,
        itemStyle: {
          borderRadius: 4,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
          position: 'outside',
          formatter: '{b}',
          fontSize: 12
        },
        emphasis: {
          scale: true,
          scaleSize: 10
        },
        data: pieData.value.map(item => ({ ...item }))
      }
    ]
  };
});

function initChart(tabKeyStr?: string) {
  const currentTabKey = tabKeyStr || tabKey.value || 'build';
  const chartContainer = chartRefs.value[currentTabKey];

  if (!chartContainer) {
    setTimeout(() => initChart(currentTabKey), 200);
    return;
  }

  if (chartInstances.value[currentTabKey]) {
    chartInstances.value[currentTabKey].dispose();
    chartInstances.value[currentTabKey] = null;
  }

  try {
    chartInstances.value[currentTabKey] = echarts.init(chartContainer, null, {
      width: 541,
      height: 482
    });

    chartInstances.value[currentTabKey].on(
      'legendselectchanged',
      handleLegendSelectChanged
    );

    if (pieData.value.length > 0) {
      updateChart(currentTabKey);
      setTimeout(() => {
        chartInstances.value[currentTabKey]?.resize();
      }, 100);
    }
    chartInitialized.value = true;
  } catch (error) {
    console.error('ECharts init failed:', error);
    setTimeout(() => initChart(currentTabKey), 300);
  }
}

function updateChart(tabKeyStr?: string) {
  const currentTabKey = tabKeyStr || tabKey.value || 'build';
  const instance = chartInstances.value[currentTabKey];
  if (!instance) return;
  instance.setOption(chartSetting.value, true);
}

function handleResize() {
  Object.values(chartInstances.value).forEach(instance => {
    if (instance) instance.resize();
  });
}

function handleLegendSelectChanged(e: any) {
  const trueRivers = Object.keys(e.selected).filter(key => e.selected[key]);
  const allFalse = Object.values(e.selected).every(value => value === false);

  const selectedKeys = pikData.value
    .filter((item: any) => trueRivers.includes(item.name))
    .map((item: any) => item.key);

  pieCode.value = allFalse ? [] : selectedKeys;
}

const columns = [
  {
    title: '电站名称',
    dataIndex: 'stnm',
    key: 'stnm',
    fixed: 'left',
    ellipsis: true,
    width: 150,
    sort: true,
     slots: { customRender: 'stnm' },
    customRender: ({ record }: any) => ({
      children: record.stnm,
      attrs: {
        onClick: () => handleRowClick(record)
      },
      style: {
        color: '#1890ff',
        cursor: 'pointer'
      }
    })
  },
  {
    title: '开发方式',
    dataIndex: 'dvtp',
    key: 'dvtp',
    ellipsis: true,
    width: 150,
    sort: true,
    customRender: ({ record }: any) => record.dvtpName || '-'
  },
  {
    title: `装机容量(${unit})`,
    dataIndex: 'ttpwr',
    key: 'ttpwr',
    ellipsis: true,
    width: 150,
    sort: true,
    customRender: ({ text }: any) => (text ? Number(text).toFixed(2) : '-')
  },
  {
    title: '设计年发电量(亿kW·h)',
    dataIndex: 'yrge',
    key: 'yrge',
    width: 150,
    sort: true,
    ellipsis: true
  },
  {
    title: '总库容(亿m³)',
    dataIndex: 'ttcp',
    key: 'ttcp',
    width: 150,
    sort: true,
    ellipsis: true
  },
  {
    title: '所属基地',
    dataIndex: 'baseName',
    key: 'baseName',
    width: 150,
    sort: true,
    ellipsis: true
  },
  {
    title: '所属行政区',
    dataIndex: 'addvcdName',
    key: 'addvcdName',
    width: 150,
    sort: true,
    ellipsis: true
  },
  {
    title: '所在河段',
    dataIndex: 'hbrvcdName',
    key: 'hbrvcdName',
    width: 240,
    merge: true,
    sort: true,
    ellipsis: true
  },
  {
    title: '第一台机组投产时间',
    dataIndex: 'piodt',
    key: 'piodt',
    ellipsis: true,
    sort: true,
    width: 170
  },
  {
    title: '全部机组投产时间',
    dataIndex: 'aiodt',
    key: 'aiodt',
    width: 150,
    sort: true,
    ellipsis: true
  }
];

function handleRowClick(record: any) {
  modelStore.params = {
    sttp: 'ENG',
    stcd: record.stcd,
    titleName: record.stnm
  } as any;
  modelStore.title = record.stnm ? `${record.stnm} ` : '';
  modelStore.tabList = handleTabs(modelStore.params);
  modelStore.modalVisible = true;
}

const searchList = computed(() => [
  {
    type: 'Select',
    name: 'Select',
    label: '基地选择',
    options:
      jiDiList.value?.map((item: any) => ({
        qid: item.baseid,
        value: item.basename,
        label: item.basename
      })) || []
  },
  {
    type: 'Input',
    name: 'stnm',
    label: '',
    fieldProps: {
      allowClear: true,
      placeholder: '请输入电站名称'
    }
  }
]);

const initialValues = computed(() => ({
  Select: defJD.value,
  stnm: null
}));

function handleSearch(values: any) {
  const matchedOption = searchList.value[0]?.options?.find(
    (value: any) => value.label === values.Select
  );

  qid.value = matchedOption?.qid || 'other';
  stnm.value = values.stnm;
}

function handleReset() {
  const defaultBaseId = props.defaultJidiInfo?.baseid as string;
  const defaultBasename = props.defaultJidiInfo?.basename as string;
  
  qid.value = defaultBaseId || 'all';
  stnm.value = null;
  defJD.value = defaultBasename || '全部基地';
  
  setTimeout(() => {
    tabList.value.forEach(item => {
      if (tableRefs.value[item.key]) {
        tableRefs.value[item.key].getList(buildFilter.value);
      }
    });
  }, 100);
}

const tableSearchParams = computed(() => ({
  sort: [
    { field: 'baseStepSort', dir: 'asc' },
    { field: 'rvcdStepSort', dir: 'asc' },
    { field: 'siteStepSort', dir: 'asc' },
    { field: 'ttpwr', dir: 'desc' }
  ],
  group: [],
  select: [],
  groupResultFlat: false
}));

const buildFilter = computed(() => {
  let filters = [
    pieCode.value?.length > 0 && qid.value === 'all'
      ? {
          field: 'baseId',
          operator: 'in',
          dataType: 'string',
          value: pieCode.value
        }
      : qid.value != 'all'
      ? {
          field: 'baseId',
          operator: 'eq',
          dataType: 'string',
          value: qid.value
        }
      : null,
    {
      field: 'sttpCode',
      operator: 'eq',
      dataType: 'string',
      value: 'ENG'
    },
    pieCode.value?.length > 0 && qid.value !== 'all'
      ? {
          field: 'hbrvcd',
          operator: 'in',
          dataType: 'string',
          value: pieCode.value
        }
      : null,
    {
      field: 'bldsttCcode',
      operator: 'eq',
      dataType: 'string',
      value:
        tabKey.value === 'noBuild'
          ? '0'
          : tabKey.value === 'building'
          ? '1'
          : '2'
    },
    stnm.value
      ? {
          field: 'stnm',
          operator: 'contains',
          dataType: 'string',
          value: stnm.value
        }
      : null,
    {
      field: 'prsc',
      operator: 'in',
      dataType: 'string',
      value: ['1', '2', '3']
    }
  ].filter(Boolean);

  return {
    logic: 'and',
    filters
  };
});

watch(
  qid,
  async newQid => {
    if (!newQid) return;

    dataLoading.value = true;
    try {
      // const params = {
      //   baseId: newQid,
      //   sttpCode: 'ENG',
      //   prsc: [{ field: 'prsc', operator: 'in', dataType: 'string', value: ['1', '2', '3'] }]
      // }
      let params = [
        newQid != 'all'
          ? {
              field: 'baseId',
              operator: 'eq',
              dataType: 'string',
              value: newQid
            }
          : null,
        {
          field: 'sttpCode',
          operator: 'eq',
          dataType: 'string',
          value: 'ENG'
        },
        {
          field: 'prsc',
          operator: 'in',
          dataType: 'string',
          value: ['1', '2', '3']
        }
      ].filter(Boolean);

      const result = await fetchTabData(params);
      tabList.value = result;
      // debugger

      if (result.length > 0) {
        if (props.defaultTab) {
          const matchedTab = result.find(
            item => item.value === props.defaultTab
          );
          if (matchedTab) {
            tabIndex.value = matchedTab.value;
            tabKey.value = matchedTab.key;
            tabCol.value = matchedTab.col;
          } else {
            tabIndex.value = result[0].value;
            tabKey.value = result[0].key;
            tabCol.value = result[0].col;
          }
        } else {
          tabIndex.value = result[0].value;
          tabKey.value = result[0].key;
          tabCol.value = result[0].col;
        }
      }
    } catch (error) {
      console.error('获取Tab数据失败:', error);
      message.error('获取Tab数据失败');
    } finally {
      dataLoading.value = false;
    }
  },
  { immediate: true }
);

watch(
  () => props.defaultTab,
  newDefaultTab => {
    if (!newDefaultTab || tabList.value.length === 0) return;

    const matchedTab = tabList.value.find(item => item.value === newDefaultTab);
    if (matchedTab) {
      tabIndex.value = matchedTab.value;
      tabKey.value = matchedTab.key;
      tabCol.value = matchedTab.col;
    }
  },
  { immediate: true }
);

watch(
  [tabKey, tabCol, stnm, qid],
  async () => {
    if (!tabKey.value || !tabCol.value) return;

    dataLoading.value = true;
    try {
      let params: any = [
        qid.value != 'all'
          ? {
              field: 'baseId',
              operator: 'eq',
              dataType: 'string',
              value: qid.value
            }
          : null,
        {
          field: 'sttpCode',
          operator: 'eq',
          dataType: 'string',
          value: 'ENG'
        },
        {
          field: 'bldsttCcode',
          operator: 'eq',
          dataType: 'string',
          value:
            tabKey.value === 'noBuild'
              ? '0'
              : tabKey.value === 'building'
              ? '1'
              : '2'
        },
        {
          field: 'prsc',
          operator: 'in',
          dataType: 'string',
          value: ['1', '2', '3']
        },
        stnm.value
          ? {
              field: 'stnm',
              operator: 'contains',
              dataType: 'string',
              value: stnm.value
            }
          : null
      ].filter(Boolean);

      // const params: any = {
      //   stnmContains: stnm.value,
      //   baseId: qid.value,
      //   sttpCode: 'ENG',
      //   bldsttCcode:
      //     tabKey.value === 'noBuild'
      //       ? '0'
      //       : tabKey.value === 'building'
      //       ? '1'
      //       : '2',
      //   prsc: [
      //     {
      //       field: 'prsc',
      //       operator: 'in',
      //       dataType: 'string',
      //       value: ['1', '2', '3']
      //     }
      //   ]
      // };

      if (props.seriesName === `装机容量(${unit})`) {
        params.push({
          field: 'ttpwr',
          operator: 'isnotnull',
          dataType: 'string'
        });
      }

      const result = await fetchPieData(params);

      pikData.value = result;
      pieData.value = result;
      pieCode.value = [];

      await nextTick();

      setTimeout(() => {
        initChart();
      }, 200);
    } catch (error) {
      console.error('获取饼图数据失败:', error);
      message.error('获取饼图数据失败');
    } finally {
      dataLoading.value = false;
    }
  },
  { deep: true }
);

onMounted(() => {
  JidiSelectEventStore.jidiData.forEach(element => {
    jiDiList.value.push({
      label: element.wbsName,
      value: element.wbsCode,
      baseid: element.wbsCode,
      basename: element.wbsName
    });
  });

  if (!qid.value) {
    qid.value = 'all';
  }

  window.addEventListener('resize', handleResize);
});

watch(tabIndex, async (newTab, oldTab) => {
  const matchedTab = tabList.value.find(item => item.value === newTab);
  if (matchedTab) {
    tabKey.value = matchedTab.key;
    tabCol.value = matchedTab.col;
  }

  await nextTick();

  setTimeout(() => {
    const matchedTab = tabList.value.find(item => item.value === newTab);
    if (matchedTab) {
      const currentTabKey = matchedTab.key;
      initChart(currentTabKey);

      if (tableRefs.value[currentTabKey]) {
        tableRefs.value[currentTabKey].getList(buildFilter.value);
      }
    }
  }, 300);
});
const handleViewDetail = (record: any) => {
    modelStore.modalVisible = true;
    modelStore.params.sttp = record.sttpCode;
    modelStore.title = record.stnm ;
    modelStore.params.stcd = record.stcd;
}
watch(
  buildFilter,
  () => {
    tabList.value.forEach(item => {
      if (tableRefs.value[item.key]) {
        tableRefs.value[item.key].getList(buildFilter.value);
      }
    });
  },
  { deep: true }
);

onUnmounted(() => {
  Object.values(chartInstances.value).forEach(instance => {
    if (instance) instance.dispose();
  });
  chartInstances.value = {};
  window.removeEventListener('resize', handleResize);
});
</script>

<template>
  <div class="shuidian-kaifa-container">
    <BasicSearch
      ref="formRef"
      :searchList="searchList"
      :initialValues="initialValues"
      @finish="handleSearch"
      @reset="handleReset"
    >
      <template #actions>
        <a-button @click="handleExport">
          <template #icon><DownloadOutlined /></template>
          导出
        </a-button>
      </template>
    </BasicSearch>

    <a-spin :spinning="dataLoading" tip="加载中...">
      <a-tabs v-model:activeKey="tabIndex" class="dwsta-table-tu">
        <a-tab-pane
          v-for="item in tabList"
          :key="item.value"
          :tab="`${item.value}(${item.count}${item.unit})`"
        >
          <div class="chart-table-layout">
            <div class="chart-section">
              <a-empty
                v-if="pieData.length === 0 && !dataLoading"
                description="暂无数据"
              />
              <div
                v-else
                :ref="el => setChartRef(el, item.key)"
                class="pie-chart"
                style="width: 541px; height: 482px"
              ></div>
            </div>

            <div class="table-section">
              <BasicTable
                :ref="el => setTableRef(el, item.key)"
                :columns="columns"
                :listUrl="listUrl"
                :searchParams="tableSearchParams"
                :transformData="customTransform"
                :defaultPageSize="20"
                :scrollY="380"
              >
            <template #stnm="{ record }">
            <a @click="handleViewDetail(record)" class="text-link">
                {{record.stnm }}
            </a>
        </template>
            </BasicTable>
            </div>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-spin>
  </div>
</template>

<style scoped lang="scss">
.shuidian-kaifa-container {
  display: flex;
  flex-direction: column;
  height: 700px;
  padding: 16px;
  background: #fff;
  border-radius: 4px;
}

.dwsta-table-tu {
  flex: 1;
  display: flex;
  flex-direction: column;

  :deep(.ant-tabs-content) {
    height: 100%;
  }

  :deep(.ant-tabs-tabpane) {
    height: 100%;
  }

  :deep(.ant-tabs-nav) {
    margin-bottom: 16px;
  }
}

.chart-table-layout {
  display: flex;
  gap: 16px;
  height: calc(100% - 40px);
  min-height: 450px;

  .chart-section {
    flex: 0 0 541px;
    // background: #fafafa;
    border-radius: 4px;
    padding: 16px;
    // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;

    .pie-chart {
      width: 541px;
      height: 482px;
    }
  }

  .table-section {
    flex: 1;
    overflow: hidden;
    background: #fff;
    border-radius: 4px;
  }
}
.text-link {
    color: #2f6b98;

    &:hover {
        color: #40a9ff;
    }
}
</style>