添加屏幕扩展动画

src/views/ProjectScreen/components/rightPage.vue

@@ -8,15 +8,18 @@
         <div class="content_item">项目位置：贵州省贵阳市乌当区（具体地块编号：01-123-11）</div>
         <div class="content_item">占地面积：约10000亩</div>
         <div class="content_item"> 土地性质：城镇住宅用地（兼容商业用地，容积率≤2.5）</div>
+        <div class="content_item"> 土地性质：城镇住宅用地（兼容商业用地，容积率≤2.5）</div>
+        <div class="content_item"> 土地性质：城镇住宅用地（兼容商业用地，容积率≤2.5）</div>
+        <div class="content_item"> 土地性质：城镇住宅用地（兼容商业用地，容积率≤2.5）</div>
       </div>
     </div>
     <div class="endPage">
-      <!-- 饼图容器 -->
       <Title title="形象进度" />
 
-      <div ref="pieChartRef" class="echart" />
-      <!-- 折线图容器 -->
-      <div ref="lineChartRef" class="echart" />
+      <div class="chart_container">
+        <div ref="pieChartRef" class="echart" />
+        <div ref="lineChartRef" class="echart" />
+      </div>
     </div>
   </div>
 </template>
@@ -25,15 +28,25 @@
 import { ref, onMounted, onUnmounted, nextTick } from "vue"
 import Title from './title.vue'
 import * as echarts from 'echarts';
+import { pieOption, barOption } from './optionList';
+import { getScreenLand } from '@/api/projectScreen';
+
+const props = defineProps({
+  projectId: {
+    type: String,
+    default: 0
+  }
+})
 
 // 饼图相关
 const pieChartRef = ref<HTMLDivElement | null>(null);
 let pieChart: any = null;
-
 // 折线图相关
 const lineChartRef = ref<HTMLDivElement | null>(null);
 let lineChart: any = null;
-
+// 土地数据 折线图
+const designAreaData = ref([])
+const transferAreaData = ref([])
 // 饼图数据
 const pieData = [
   { name: '桩点浇筑', value: 13 },
@@ -43,131 +56,13 @@ const pieData = [
   { name: '组件安装', value: 20 },
 ]
 
-// 折线图数据
-const barData = {
-  xAxis: ['地块1', '地块2', '地块3', '地块4', '地块5', '地块6'],
-  series: [
-    {
-      name: '计划流转面积',
-      data: [70, 25, 45, 115, 70, 85]
-    },
-    {
-      name: '已流转面积',
-      data: [105, 30, 150, 65, 80, 200]
-    }
-  ]
-}
-
-// 饼图配置
-const pieOption = {
-  series: {
-    type: 'pie',
-    data: pieData,
-    radius: [50, 80],
-    itemStyle: {
-      borderColor: '#fff',
-      borderWidth: 1
-    },
-    label: {
-      alignTo: 'edge',
-      formatter: '{name|{b}}\n{percent|{c} %}',
-      minMargin: 10,
-      edgeDistance: 20,
-      lineHeight: 15,
-      rich: {
-        name: {
-          fontSize: 12,
-          color: '#fff'
-        },
-        percent: {
-          fontSize: 12,
-          color: '#fff'
-        }
-      }
-    },
-    legend: {
-      top: 'bottom'
-    },
-  }
-};
-
-// 柱状图配置
-const barOption = {
-  legend: {
-    data: ['计划流转面积', '已流转面积'],
-    top: 0
-  },
-  grid: {
-    left: '3%',
-    right: '4%',
-    bottom: '3%',
-    containLabel: true
-  },
-  xAxis: {
-    type: 'category',
-    data: barData.xAxis
-  },
-  yAxis: {
-    name: '单位：m²',
-    type: 'value',
-    axisLabel: {
-      formatter: '{value}'
-    }
-  },
-  series: [
-    {
-      type: 'bar',
-      data: [], // 空数据，仅用于承载markArea
-      markArea: {
-        silent: true, // 背景不响应交互
-        data: (() => {
-          const groupCount = 3; // 共3组（6个月 ÷ 2）
-          const groupWidth = 1.8; // 每组背景宽度（覆盖2根柱子）
-          const bgData = [];
-
-          for (let i = 0; i < groupCount; i++) {
-            const startX = i * 2 - 0.9; // 每组起始位置
-            const endX = startX + groupWidth; // 每组结束位置
-            bgData.push([
-              { xAxis: startX, yAxis: 0 },
-              { xAxis: endX, yAxis: 100 }
-            ]);
-          }
-          return bgData;
-        })(),
-        itemStyle: {
-          color: 'rgba(255, 255, 255, 0.05)',
-          borderRadius: 4
-        }
-      }
-    },
-    {
-      name: '计划流转面积',
-      type: 'bar',
-      data: barData.series[0].data,
-      barWidth: 15, // 柱形宽度
-      itemStyle: {
-        color: 'rgb(29, 253, 253)'
-      },
-    },
-    {
-      name: '已流转面积',
-      type: 'bar',
-      data: barData.series[1].data,
-      barWidth: 15,
-      itemStyle: {
-        color: '#rgb(25, 181, 251)'
-      },
-    }
-  ]
-};
-
 // 初始化饼图
 const initPieChart = () => {
   if (!pieChartRef.value) {
     console.error('未找到饼图容器元素');
     return;
   }
+  pieOption.series.data = pieData
   pieChart = echarts.init(pieChartRef.value, null, {
     renderer: 'canvas',
     useDirtyRect: false
@@ -181,6 +76,8 @@ const initLineChart = () => {
     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
@@ -194,11 +91,24 @@ const handleResize = () => {
   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();
+  }
+}
+
 // 组件挂载时初始化图表
 onMounted(() => {
+  getScreenLandData()
   nextTick(() => {
     initPieChart();
-    initLineChart();
     window.addEventListener('resize', handleResize);
   });
 });
@@ -221,8 +131,7 @@ onUnmounted(() => {
 .leftPage {
   display: flex;
   flex-direction: column;
-  width: calc(25vw - 30px);
-  margin: 0 15px;
+  width: 25vw;
   height: 100%;
 
   .topPage,
@@ -240,15 +149,37 @@ onUnmounted(() => {
     flex: 1;
     margin-top: 23px;
 
-    .echart {
+    .chart_container {
+      display: flex;
+      flex-direction: column;
       width: 100%;
       height: 100%;
     }
+
+    .echart {
+      height: 50%;
+      width: 100%;
+    }
   }
 }
 
 .content {
-  margin: 10px 35px;
+  max-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;
@@ -262,12 +193,6 @@ onUnmounted(() => {
   }
 }
 
-.ellipse {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .subfont {
   color: rgba(138, 149, 165, 1);
 }