完善项目及大屏

src/views/ProjectScreen/components/rightPage.vue

@@ -2,20 +2,10 @@
   <div class="leftPage">
     <div class="topPage">
       <Title title="项目概况" />
-
-      <div class="content">
-        <div class="content_item">项目名称：智慧生态工地社区开发项目</div>
-        <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 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" />
@@ -29,7 +19,7 @@ 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';
+import { getScreenLand, getScreenImgProcess, getScreenGeneralize } from '@/api/projectScreen';
 
 const props = defineProps({
   projectId: {
@@ -38,9 +28,11 @@ const props = defineProps({
   }
 })
 
+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;
@@ -49,11 +41,12 @@ const designAreaData = ref([])
 const transferAreaData = ref([])
 // 饼图数据
 const pieData = [
-  { name: '桩点浇筑', value: 13 },
-  { name: '水泥灌注', value: 7 },
-  { name: '箱变安装', value: 40 },
-  { name: '支架安装', value: 20 },
-  { name: '组件安装', value: 20 },
+  { 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 },
 ]
 
 // 初始化饼图
@@ -63,6 +56,7 @@ const initPieChart = () => {
     return;
   }
   pieOption.series.data = pieData
+  pieOption.graphic[0].style.text = totalPercent.value + '%'
   pieChart = echarts.init(pieChartRef.value, null, {
     renderer: 'canvas',
     useDirtyRect: false
@@ -104,9 +98,37 @@ const getScreenLandData = async () => {
   }
 }
 
+/**
+ * 获取项目形象进度数据
+ */
+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);
@@ -131,7 +153,6 @@ onUnmounted(() => {
 .leftPage {
   display: flex;
   flex-direction: column;
-  width: 25vw;
   height: 100%;
 
   .topPage,