From fc696f8bf4b878f6faf4719231a2b90fa8c98c61 Mon Sep 17 00:00:00 2001
From: zhouhaibin <zhouhaibin@qq.com>
Date: Tue, 4 Jun 2024 20:19:04 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=9F=B1=E7=8A=B6=E5=9B=BE?=
 =?UTF-8?q?=E7=BC=BA=E5=A4=B1=E6=80=BB=E9=87=91=E9=A2=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/projectBoard/childBoard/bar.vue     | 135 +++++++-------
 .../projectBoard/childBoard/gaiGeRenWu.vue    |   4 +-
 .../childBoard/xingZhengQuHua.vue             | 168 ++++++++++++------
 3 files changed, 184 insertions(+), 123 deletions(-)

diff --git a/src/views/projectBoard/childBoard/bar.vue b/src/views/projectBoard/childBoard/bar.vue
index 7f7fb0b..5815e08 100644
--- a/src/views/projectBoard/childBoard/bar.vue
+++ b/src/views/projectBoard/childBoard/bar.vue
@@ -3,76 +3,81 @@
 </template>
 
 <script lang="ts" name="PieChart" setup>
-import { ref, reactive } from 'vue'
-let receivingParameter = defineProps(["title", "data"])
-let option = reactive({})
+  import { ref, reactive } from 'vue';
+  let receivingParameter = defineProps(['title', 'data']);
+  let option = reactive({});
 
-option = {
-  title: {
-    text: receivingParameter.title
-  },
-  // tooltip: {
-  //   trigger: 'axis',
-  //   axisPointer: {
-  //     // Use axis to trigger tooltip
-  //     type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
-  //   }
-  // },
-  legend: {},
-  grid: {
-    left: '3%',
-    right: '4%',
-    bottom: '3%',
-    containLabel: true
-  },
-  xAxis: {
-    type: 'value',
-    min:0,
-    max:1,
-    axisLabel: {
-      formatter: function (value, index) {
-        return (value*100) + "%";
-      }
-    }
-  },
-  yAxis: {
-    type: 'category',
-    data: receivingParameter.data.names
-  },
-  series: [
-    {
-      name: '上级资金支付执行率',
-      type: 'bar',
-      stack: 'total',
-      label: {
-        show: true,
-        formatter: function (params) {
-          return (params.value*100).toFixed(0) + "%";
-        }
-      },
-      emphasis: {
-        focus: 'series'
+  option = {
+    title: {
+      text: receivingParameter.title,
+    },
+    // tooltip: {
+    //   trigger: 'axis',
+    //   axisPointer: {
+    //     // Use axis to trigger tooltip
+    //     type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
+    //   }
+    // },
+    legend: {},
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'value',
+      min: 0,
+      max: 1,
+      axisLabel: {
+        formatter: function (value, index) {
+          return value * 100 + '%';
+        },
       },
-      data: receivingParameter.data.superiorFundExecutionRates
     },
-    {
-      name: '资金支付执行率',
-      type: 'bar',
-      stack: 'total',
-      label: {
-        show: true,
-         formatter: function (params) {
-          return (params.value*100).toFixed() + "%";
-        }
+    yAxis: [
+      {
+        type: 'category',
+        data: receivingParameter.data.names,
       },
-      emphasis: {
-        focus: 'series'
+      {
+        type: 'category',
+        data: receivingParameter.data.totalMoneys,
       },
-      data: receivingParameter.data.paymentExecutionRates
-    },
-  ]
-};
-
+    ],
+    series: [
+      {
+        name: '上级资金支付执行率',
+        type: 'bar',
+        stack: 'total',
+        label: {
+          show: true,
+          formatter: function (params) {
+            return (params.value * 100).toFixed(0) + '%';
+          },
+        },
+        emphasis: {
+          focus: 'series',
+        },
+        data: receivingParameter.data.superiorFundExecutionRates,
+      },
+      {
+        name: '资金支付执行率',
+        type: 'bar',
+        stack: 'total',
+        label: {
+          show: true,
+          formatter: function (params) {
+            return (params.value * 100).toFixed() + '%';
+          },
+        },
+        emphasis: {
+          focus: 'series',
+        },
+        data: receivingParameter.data.paymentExecutionRates,
+      },
+    ],
+  };
 </script>
 
 <style></style>
diff --git a/src/views/projectBoard/childBoard/gaiGeRenWu.vue b/src/views/projectBoard/childBoard/gaiGeRenWu.vue
index 697b4c1..9640fa0 100644
--- a/src/views/projectBoard/childBoard/gaiGeRenWu.vue
+++ b/src/views/projectBoard/childBoard/gaiGeRenWu.vue
@@ -190,7 +190,8 @@ export default {
         barData: {
           names:[],
           paymentExecutionRates:[],
-          superiorFundExecutionRates:[]
+          superiorFundExecutionRates:[],
+          totalMoneys:[],
         }
       };
     },
@@ -204,6 +205,7 @@ export default {
         this.barData.names.push(item.name)
         this.barData.paymentExecutionRates.push(item.paymentExecutionRate)
         this.barData.superiorFundExecutionRates.push(item.superiorFundExecutionRate)
+        this.barData.totalMoneys.push(item.totalMoney)
       })
     },
     methods: {},
diff --git a/src/views/projectBoard/childBoard/xingZhengQuHua.vue b/src/views/projectBoard/childBoard/xingZhengQuHua.vue
index 070fc45..6660c6b 100644
--- a/src/views/projectBoard/childBoard/xingZhengQuHua.vue
+++ b/src/views/projectBoard/childBoard/xingZhengQuHua.vue
@@ -5,19 +5,25 @@
         <a-card title="项目总进度" :body-style="{ padding: 0, overflow: 'hidden' }">
           <a-row>
             <a-col :span="12" class="flex justify-center items-center h-58">
-              <el-progress type="dashboard" :stroke-width="18" :percentage="Number(data.totalProgress.progress)*100>0?Number(data.totalProgress.progress)*100:0" :width="200">
+              <el-progress
+                type="dashboard"
+                :stroke-width="18"
+                :percentage="
+                  Number(data.totalProgress.progress) * 100 > 0
+                    ? Number(data.totalProgress.progress) * 100
+                    : 0
+                "
+                :width="200"
+              >
                 <template #default="{ percentage }">
-
-
                   <div class="flex flex-col ...">
                     <div>总进度</div>
                     <div class="mt-4 text-sky-400"> {{ percentage }}%</div>
-
                   </div>
                 </template>
               </el-progress>
             </a-col>
-            <a-col :span="4" class="flex justify-center items-center ">
+            <a-col :span="4" class="flex justify-center items-center">
               <div class="flex flex-col">
                 <div class="text-center">
                   <!-- 这里放置内容 -->
@@ -55,17 +61,25 @@
             </a-col>
           </a-row>
         </a-card>
-
       </a-col>
       <a-col :span="12">
         <a-card title="资金支付情况" :body-style="{ padding: 0, overflow: 'hidden' }">
           <a-row>
             <a-col :span="8" class="flex justify-center items-center h-58">
-              <el-progress type="dashboard" :stroke-width="18" :percentage="Number(data.countFundByFundType.paymentExecutionRate)*100>0?Number(data.countFundByFundType.paymentExecutionRate)*100:0" :width="200">
+              <el-progress
+                type="dashboard"
+                :stroke-width="18"
+                :percentage="
+                  Number(data.countFundByFundType.paymentExecutionRate) * 100 > 0
+                    ? Number(data.countFundByFundType.paymentExecutionRate) * 100
+                    : 0
+                "
+                :width="200"
+              >
                 <template #default="{ percentage }">
                   <div class="flex flex-col ...">
                     <div>合同总金额</div>
-                    <div class="mt-4 text-blue-600">{{data.countFundByFundType.totalMoney}}</div>
+                    <div class="mt-4 text-blue-600">{{ data.countFundByFundType.totalMoney }}</div>
                     <div class="mt-4 text-sky-400"> {{ percentage }}%</div>
                   </div>
                 </template>
@@ -76,8 +90,17 @@
                 <div>
                   <div class="flex flex-wrap">
                     <div class="mr-2">中央资金</div>
-                    <div class="mr-2"><el-progress class="w-80" :text-inside="true" :stroke-width="18"
-                        :percentage="Number(data.countFundByFundType.payCentralExecutionRate)*100>0?Number(data.countFundByFundType.payCentralExecutionRate)*100:0" />
+                    <div class="mr-2"
+                      ><el-progress
+                        class="w-80"
+                        :text-inside="true"
+                        :stroke-width="18"
+                        :percentage="
+                          Number(data.countFundByFundType.payCentralExecutionRate) * 100 > 0
+                            ? Number(data.countFundByFundType.payCentralExecutionRate) * 100
+                            : 0
+                        "
+                      />
                     </div>
                     <div>{{ data.countFundByFundType.totalCentral }}</div>
                   </div>
@@ -85,17 +108,35 @@
                 <div class="mt-4">
                   <div class="flex flex-wrap">
                     <div class="mr-2">省级资金</div>
-                    <div class="mr-2"><el-progress class="w-80" :text-inside="true" :stroke-width="18"
-                        :percentage="Number(data.countFundByFundType.payProvincialExecutionRate)*100>0?Number(data.countFundByFundType.payProvincialExecutionRate)*100:0" />
+                    <div class="mr-2"
+                      ><el-progress
+                        class="w-80"
+                        :text-inside="true"
+                        :stroke-width="18"
+                        :percentage="
+                          Number(data.countFundByFundType.payProvincialExecutionRate) * 100 > 0
+                            ? Number(data.countFundByFundType.payProvincialExecutionRate) * 100
+                            : 0
+                        "
+                      />
                     </div>
-                    <div>{{data.countFundByFundType.totalProvincial}}</div>
+                    <div>{{ data.countFundByFundType.totalProvincial }}</div>
                   </div>
                 </div>
                 <div class="mt-4">
                   <div class="flex flex-wrap">
                     <div class="mr-2">市级资金</div>
-                    <div class="mr-2"><el-progress class="w-80" :text-inside="true" :stroke-width="18"
-                        :percentage="Number(data.countFundByFundType.payCityExecutionRate)*100>0?Number(data.countFundByFundType.payCityExecutionRate)*100:0" />
+                    <div class="mr-2"
+                      ><el-progress
+                        class="w-80"
+                        :text-inside="true"
+                        :stroke-width="18"
+                        :percentage="
+                          Number(data.countFundByFundType.payCityExecutionRate) * 100 > 0
+                            ? Number(data.countFundByFundType.payCityExecutionRate) * 100
+                            : 0
+                        "
+                      />
                     </div>
                     <div>{{ data.countFundByFundType.totalCity }}</div>
                   </div>
@@ -103,53 +144,68 @@
                 <div class="mt-4">
                   <div class="flex flex-wrap">
                     <div class="mr-2">区县资金</div>
-                    <div class="mr-2"><el-progress class="w-80" :text-inside="true" :stroke-width="18"
-                        :percentage="Number(data.countFundByFundType.payCountyExecutionRate)*100>0?Number(data.countFundByFundType.payCountyExecutionRate)*100:0" />
+                    <div class="mr-2"
+                      ><el-progress
+                        class="w-80"
+                        :text-inside="true"
+                        :stroke-width="18"
+                        :percentage="
+                          Number(data.countFundByFundType.payCountyExecutionRate) * 100 > 0
+                            ? Number(data.countFundByFundType.payCountyExecutionRate) * 100
+                            : 0
+                        "
+                      />
                     </div>
-                    <div>{{data.countFundByFundType.totalCounty}}</div>
+                    <div>{{ data.countFundByFundType.totalCounty }}</div>
                   </div>
                   <div class="mt-4">
                     <div class="flex flex-wrap">
                       <div class="mr-2">自筹资金</div>
-                      <div class="mr-2"><el-progress class="w-80" :text-inside="true" :stroke-width="18"
-                          :percentage="Number(data.countFundByFundType.paySelfExecutionRate)*100>0?Number(data.countFundByFundType.paySelfExecutionRate)*100:0" />
+                      <div class="mr-2"
+                        ><el-progress
+                          class="w-80"
+                          :text-inside="true"
+                          :stroke-width="18"
+                          :percentage="
+                            Number(data.countFundByFundType.paySelfExecutionRate) * 100 > 0
+                              ? Number(data.countFundByFundType.paySelfExecutionRate) * 100
+                              : 0
+                          "
+                        />
                       </div>
-                      <div>{{data.countFundByFundType.totalSelf}}</div>
+                      <div>{{ data.countFundByFundType.totalSelf }}</div>
                     </div>
                   </div>
                 </div>
               </div>
             </a-col>
-
           </a-row>
         </a-card>
       </a-col>
-
     </a-row>
     <a-row :gutter="16" class="mt-4">
       <a-col :span="12">
         <a-card :body-style="{ padding: 0, overflow: 'hidden' }" class="h-104">
-          <bas_bar title="总进度"  :data="bas_barData"/>
-
+          <bas_bar title="总进度" :data="bas_barData" />
         </a-card>
       </a-col>
       <a-col :span="12">
-        <a-card  :body-style="{ padding: 0, overflow: 'hidden' }" class="h-104">
-          <bar title="资金支付情况"  :data="barData"/>
+        <a-card :body-style="{ padding: 0, overflow: 'hidden' }" class="h-104">
+          <bar title="资金支付情况" :data="barData" />
         </a-card>
       </a-col>
     </a-row>
   </div>
 </template>
 <script lang="ts">
-import bas_bar from './bas_bar.vue'
-import bar from './bar.vue'
-import { showCountBoardByAdminDivision} from './childBoard.api'
-export default {
-  components: {
-    bas_bar,
-    bar,
-  },
+  import bas_bar from './bas_bar.vue';
+  import bar from './bar.vue';
+  import { showCountBoardByAdminDivision } from './childBoard.api';
+  export default {
+    components: {
+      bas_bar,
+      bar,
+    },
     data() {
       return {
         data: {
@@ -182,36 +238,34 @@ export default {
             payCountyExecutionRate: '0.00',
             paySelfExecutionRate: '0.00',
           },
-          countFundByCondition:[],
-          progress:[]
+          countFundByCondition: [],
+          progress: [],
         },
         bas_barData: {
-          names:[],
-          values:[]
+          names: [],
+          values: [],
         },
         barData: {
-          names:[],
-          paymentExecutionRates:[],
-          superiorFundExecutionRates:[]
-        }
+          names: [],
+          paymentExecutionRates: [],
+          superiorFundExecutionRates: [],
+          totalMoneys: [],
+        },
       };
     },
     async created() {
-      this.data =  await showCountBoardByAdminDivision() 
-      this.data.progress.forEach(item => {
-        this.bas_barData.names.push(item.name)
-        this.bas_barData.values.push(item.projectProgress)
-      })
-      this.data.countFundByCondition.forEach(item => {
-        this.barData.names.push(item.name)
-        this.barData.paymentExecutionRates.push(item.paymentExecutionRate)
-        this.barData.superiorFundExecutionRates.push(item.superiorFundExecutionRate)
-      })
+      this.data = await showCountBoardByAdminDivision();
+      this.data.progress.forEach((item) => {
+        this.bas_barData.names.push(item.name);
+        this.bas_barData.values.push(item.projectProgress);
+      });
+      this.data.countFundByCondition.forEach((item) => {
+        this.barData.names.push(item.name);
+        this.barData.paymentExecutionRates.push(item.paymentExecutionRate);
+        this.barData.superiorFundExecutionRates.push(item.superiorFundExecutionRate);
+        this.barData.totalMoneys.push(item.totalMoney);
+      });
     },
     methods: {},
   };
-
-
-
-
 </script>