提交

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

@@ -16,30 +16,31 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, nextTick } from "vue"
-import Title from './title.vue'
+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 generalize = ref();
 // 饼图相关
 const pieChartRef = ref<HTMLDivElement | null>(null);
 let pieChart: any = null;
-const totalPercent = ref(0)
+const totalPercent = ref(0);
 // 折线图相关
 const lineChartRef = ref<HTMLDivElement | null>(null);
 let lineChart: any = null;
 // 土地数据 折线图
-const designAreaData = ref([])
-const transferAreaData = ref([])
+const designAreaData = ref([]);
+const transferAreaData = ref([]);
 // 饼图数据
 let pieData = [
   { label: 'areaPercentage', name: '场区', value: 0 },
@@ -47,8 +48,8 @@ let pieData = [
   { label: 'collectorLinePercentage', name: '集电线路', value: 0 },
   { label: 'exportLinePercentage', name: '送出线路', value: 0 },
   { label: 'substationPercentage', name: '升压站', value: 0 },
-  { label: 'boxTransformerPercentage', name: '箱变', value: 0 },
-]
+  { label: 'boxTransformerPercentage', name: '箱变', value: 0 }
+];
 
 // 初始化饼图
 const initPieChart = () => {
@@ -56,14 +57,14 @@ const initPieChart = () => {
     console.error('未找到饼图容器元素');
     return;
   }
-  pieOption.series.data = pieData
-  pieOption.graphic[0].style.text = totalPercent.value + '%'
+  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 = () => {
@@ -71,55 +72,55 @@ const initLineChart = () => {
     console.error('未找到折线图容器元素');
     return;
   }
-  barOption.series[0].data = designAreaData.value
-  barOption.series[1].data = transferAreaData.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(props.projectId);
-  const { data, code } = res
+  const res = await getScreenLand(projectIdTwo);
+  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))
+    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
+  const res = await getScreenImgProcess(projectIdTwo);
+  const { data, code } = res;
   if (code === 200) {
-    totalPercent.value = data.totalPercentage
+    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()
+      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(props.projectId);
-  const { data, code, msg } = res
+  const res = await getScreenGeneralize(projectIdTwo);
+  const { data, code, msg } = res;
   if (code === 200) {
-    generalize.value = msg
+    generalize.value = msg;
   }
-}
+};
 
 // 响应窗口大小变化
 const handleResize = () => {
@@ -129,9 +130,9 @@ const handleResize = () => {
 
 // 组件挂载时初始化图表
 onMounted(() => {
-  getScreenLandData()
-  getScreenImgProcessData()
-  getScreenGeneralizeData()
+  getScreenLandData();
+  getScreenImgProcessData();
+  getScreenGeneralizeData();
   nextTick(() => {
     initPieChart();
     window.addEventListener('resize', handleResize);