td_official/src/views/enterpriseLarge/digitalizationScreen/components/rightPage.vue

<template>
  <div class="leftPage">
    <div class="topPage">
      <Title title="项目概况" />
      <div class="content" v-html="generalize"></div>
    </div>
    <div class="endPage">
      <Title title="形象进度" />
      <div class="chart_container">
        <div ref="pieChartRef" class="echart" />
        <div ref="lineChartRef" class="echart" />
      </div>
    </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 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 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.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 handleResize = () => {
  if (pieChart) pieChart.resize();
  if (lineChart) lineChart.resize();
};

/**
 * 获取项目土地统计数据
 */
const getScreenLandData = async () => {
  const res = await getScreenLand(props.projectId);
  const { data, code } = res
  if (code === 200) {
    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(props.projectId);
  const { data, code } = res
  if (code === 200) {
    totalPercent.value = data.totalPercentage
    pieData.forEach((item: any) => {
      item.value = data[item.label]
    })
    initPieChart()
  }
}

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

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

// 组件卸载时清理
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
  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,
  .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 {
    flex: 1;
    margin-top: 23px;

    .chart_container {
      display: flex;
      flex-direction: column;
      gap: 5px;
      width: 100%;
      height: 100%;
    }

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

.content {
  height: 100px;
  margin: 0 15px;
  padding: 0 10px;
  margin-top: 15px;
  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>