修改

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

@@ -0,0 +1,221 @@
+<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>