td_official/src/views/projectLarge/ProjectScreen/components/rightPage.vue

<template>
  <div class="leftPage">
    <div class="topPage">
      <Title title="项目概况" />
      <div class="content" v-html="generalize"></div>
    </div>
    <div class="midPage">
      <Title title="形象进度" />
      <div ref="pieChartRef" class="echart" />
    </div>
    <div class="endPage">
      <Title title="土地流转情况" />
      <div ref="lineChartRef" class="echart" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import Title from './title.vue';
import * as echarts from 'echarts';
import { pieOption, barOption } from './optionList';
import { getScreenLand, getScreenImgProcess, getScreenGeneralize } from '@/api/projectScreen';
const urlParams = new URLSearchParams(new URL(window.location.href).search);
const projectIdTwo = urlParams.get('projectId');
const props = defineProps({
  projectId: {
    type: String,
    default: 0
  }
});

const generalize = ref();
// 饼图相关
const pieChartRef = ref<HTMLDivElement | null>(null);
let pieChart: any = null;
const totalPercent = ref(0);
// 折线图相关
const lineChartRef = ref<HTMLDivElement | null>(null);
let lineChart: any = null;
// 土地数据 折线图
const designAreaData = ref([]);
const transferAreaData = ref([]);
const barNames = ref([]);
// 饼图数据
let pieData = [
  { label: 'areaPercentage', name: '场区', value: 0 },
  { label: 'roadPercentage', name: '道路', value: 0 },
  { label: 'collectorLinePercentage', name: '集电线路', value: 0 },
  { label: 'exportLinePercentage', name: '送出线路', value: 0 },
  { label: 'substationPercentage', name: '升压站', value: 0 },
  { label: 'boxTransformerPercentage', name: '箱变', value: 0 }
];

// 初始化饼图
const initPieChart = () => {
  if (!pieChartRef.value) {
    console.error('未找到饼图容器元素');
    return;
  }
  pieOption.series.data = pieData;
  pieOption.graphic[0].style.text = totalPercent.value + '%';
  pieChart = echarts.init(pieChartRef.value, null, {
    renderer: 'canvas',
    useDirtyRect: false
  });
  pieChart.setOption(pieOption);
};

// 初始柱状图线图
const initLineChart = () => {
  if (!lineChartRef.value) {
    console.error('未找到折线图容器元素');
    return;
  }
  barOption.xAxis.data = barNames.value;
  barOption.series[0].data = designAreaData.value;
  barOption.series[1].data = transferAreaData.value;
  lineChart = echarts.init(lineChartRef.value, null, {
    renderer: 'canvas',
    useDirtyRect: false
  });
  lineChart.setOption(barOption);
};

/**
 * 获取项目土地统计数据
 */
const getScreenLandData = async () => {
  const res = await getScreenLand(projectIdTwo);
  const { data, code } = res;
  if (code === 200) {
    console.log(data);
    barNames.value = res.data.map((item: any) => item.landName);
    designAreaData.value = data.map((item: any) => Number(item.designArea));
    transferAreaData.value = data.map((item: any) => Number(item.transferArea));
    initLineChart();
  }
};

/**
 * 获取项目形象进度数据
 */
const getScreenImgProcessData = async () => {
  const res = await getScreenImgProcess(projectIdTwo);
  const { data, code } = res;
  if (code === 200) {
    totalPercent.value = data.totalPercentage;
    pieData.forEach((item: any) => {
      item.value = data[item.label];
    });
    pieData = pieData.filter((item: any) => item.value != '0.0');
    console.log(pieData);
    initPieChart();
  }
};

/**
 * 获取项目概况数据
 */
const getScreenGeneralizeData = async () => {
  const res = await getScreenGeneralize(projectIdTwo);
  const { data, code, msg } = res;
  if (code === 200) {
    generalize.value = msg;
  }
};

// 响应窗口大小变化
const handleResize = () => {
  if (pieChart) pieChart.resize();
  if (lineChart) lineChart.resize();
};

// 组件挂载时初始化图表
onMounted(() => {
  getScreenLandData();
  getScreenImgProcessData();
  getScreenGeneralizeData();
  nextTick(() => {
    initPieChart();
    window.addEventListener('resize', handleResize);
  });
});

// 组件卸载时清理
onUnmounted(() => {
  if (pieChart) {
    pieChart.dispose();
    pieChart = null;
  }
  if (lineChart) {
    lineChart.dispose();
    lineChart = null;
  }
});
</script>

<style scoped lang="scss">
.leftPage {
  display: flex;
  flex-direction: column;
  height: 100%;

  .topPage,
  .midPage,
  .endPage {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 15px 0;
    border: 1px solid rgba(29, 214, 255, 0.1);
    box-sizing: border-box;
  }

  .endPage,
  .midPage {
    flex: 1;
    margin-top: 23px;

    .echart {
      height: 100%;
      width: 100%;
    }
  }
}

.content {
  height: 100px;
  margin: 0 15px;
  padding: 0 10px;
  box-sizing: border-box;
  overflow-y: auto;

  &::-webkit-scrollbar-track {
    background: rgba(204, 204, 204, 0.1);
    border-radius: 10px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(29, 214, 255, 0.78);
    border-radius: 10px;
  }

  .content_item {
    font-size: 14px;
    font-weight: 400;
    color: rgba(230, 247, 255, 1);
    margin-bottom: 10px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.subfont {
  color: rgba(138, 149, 165, 1);
}
</style>