前端可视化试图页面修改

src/views/projectBoard/childBoard/bar.vue

@@ -0,0 +1,78 @@
+<template>
+  <v-chart :option="option" theme="auto" :autoresize="true" style="width: 100%; height: 400px" />
+</template>
+
+<script lang="ts" name="PieChart" setup>
+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'
+      },
+      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>

src/views/projectBoard/childBoard/bas_bar.vue

@@ -0,0 +1,64 @@
+<template>
+  <v-chart :option="option" theme="auto" :autoresize="true" style="width: 100%; height: 400px" />
+</template>
+
+<script lang="ts" name="PieChart" setup>
+import { ref, reactive } from 'vue'
+let receivingParameter = defineProps(["title", "data"])
+let option = reactive({})
+option = {
+  title: {
+    text: receivingParameter.title
+  },
+  // tooltip: {
+  //   trigger: 'axis',
+  //   axisPointer: {
+  //     type: 'shadow'
+  //   }
+  // },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true
+  },
+  yAxis: {
+    type: 'category',
+    data:receivingParameter.data.names, 
+  },
+  xAxis: {
+    type: 'value',
+    min: 0,
+    max: 1,
+    axisLabel: {
+      formatter: function (value, index) {
+        return (value*100) + "%";
+      }
+    }
+  },
+  series: [
+    {
+      data: receivingParameter.data.values,
+      type: 'bar',
+      showBackground: true,
+      backgroundStyle: {
+        color: 'rgba(180, 180, 180, 0.2)'
+      },
+      label: {
+        show: true,
+        position: 'right',
+        formatter: function (params) {
+          return (params.value*100) + "%";
+        }
+
+
+      }
+
+
+    }
+  ]
+};
+
+</script>
+
+<style></style>

src/views/projectBoard/childBoard/childBoard.api.ts

@@ -0,0 +1,24 @@
+import { defHttp } from '@/utils/http/axios';
+
+export enum Api {
+  showCountBoard = '/huzhouProject/showCountBoard',
+
+  showCountBoardByReformName = "/huzhouProject/showCountBoardByReformName",
+  showCountBoardByAdminDivision =  "/huzhouProject/showCountBoardByAdminDivision",
+
+  getDimensionPageSorted= "/huzhouProject/getDimensionPageSorted",
+  getPageSorted = "/huzhouProject/getPageSorted",
+}
+/**
+ * 总体看板
+ */
+
+export const showCountBoardByReformName = () => defHttp.get({ url: Api.showCountBoardByReformName })
+export const showCountBoardByAdminDivision = () => defHttp.get({ url: Api.showCountBoardByAdminDivision })
+export const getDimensionPageSorted = (params) => defHttp.get({ url: Api.getDimensionPageSorted,params })
+export const getPageSorted = (params) => defHttp.get({ url: Api.getPageSorted,params })
+
+// export const submitplaninfoUploadFile =  (params?) =>defHttp.post({ url: Api.submitplaninfoUploadFile,headers:{ "Content-Type": "multipart/form-data" }, params })
+
+
+

src/views/projectBoard/childBoard/childBoard.data.ts

@@ -0,0 +1,186 @@
+import { FormSchema } from '@/components/Form';
+import { BasicColumn } from '@/components/Table';
+
+export const danweizhuticolumns: BasicColumn[] = [
+  {
+    title: '入库责任单位',
+    dataIndex: 'dutyWorkplace',
+    resizable: true
+  },
+  {
+    title: '行政区划',
+    dataIndex: 'adminDivision',
+    resizable: true
+  },
+  {
+    title: '单位属性',
+    dataIndex: 'workplaceProperties',
+    resizable: true
+  },
+  {
+    title: '合同金额',
+    dataIndex: 'totalMoney',
+    resizable: true
+  },
+  {
+    title: '合同资金支付率',
+    dataIndex: 'paymentExecutionRate',
+    resizable: true
+  },
+  {
+    title: '中央资金',
+    dataIndex: 'centralMoney',
+    resizable: true,
+  },
+  {
+    title: '省级资金',
+    dataIndex: 'provincialMoney',
+    resizable: true
+  },
+  {
+    title: '上级资金支付率',
+    dataIndex: 'superiorFundExecutionRate',
+    resizable: true,
+  },
+  {
+    title: '项目总进度',
+    dataIndex: 'projectProgress',
+    resizable: true,
+    slots: { customRender: 'projectProgress' },
+  },
+];
+export const danweizhutisearchFormSchema: FormSchema[] = [
+  {
+    //标题名称
+    label: '责任单位',
+    //字段
+    field: 'dutyWorkplace',
+    //组件 支持组件详见 components/Form/src/types/index.ts 中的 ComponentType
+    component: 'Input',
+    labelWidth: 'auto'
+  },
+  {
+    label: '行政区划',
+    field: 'adminDivision',
+    component: 'Input',
+    labelWidth: 'auto'
+    //colProps: { span: 6 },
+  },
+
+  {
+    //标题名称
+    label: '单位属性',
+    //字段
+    field: 'workplaceProperties',
+    //组件 支持组件详见 components/Form/src/types/index.ts 中的 ComponentType
+    component: 'Input',
+    labelWidth: 'auto'
+  },
+  
+];
+
+export const shifanxiangmucolumns: BasicColumn[] = [
+  {
+    title: '项目名称',
+    dataIndex: 'projectName',
+    resizable: true,
+
+  },
+  {
+    title: '行政区划',
+    dataIndex: 'adminDivision',
+    resizable: true
+  },
+  {
+    title: '责任单位',
+    dataIndex: 'dutyWorkplace',
+    resizable: true
+  },
+  {
+    title: '单位属性',
+    dataIndex: 'workplaceProperties',
+    resizable: true
+  },
+  {
+    title: '上级指导处室',
+    dataIndex: 'superLeader',
+    format: 'dict|superLeader',
+    resizable: true
+  },
+  {
+    title: '合同金额',
+    dataIndex: 'totalMoney',
+    resizable: true
+  },
+  {
+    title: '合同资金支付率',
+    dataIndex: 'paymentExecutionRate',
+    resizable: true
+  },
+  {
+    title: '中央资金',
+    dataIndex: 'centralMoney',
+    resizable: true,
+  },
+  {
+    title: '省级资金',
+    dataIndex: 'provincialMoney',
+    resizable: true
+  },
+  {
+    title: '上级资金支付率',
+    dataIndex: 'superiorFundExecutionRate',
+    resizable: true,
+  },
+  {
+    title: '项目总进度',
+    dataIndex: 'projectProgress',
+    resizable: true,
+    slots: { customRender: 'projectProgress' },
+  },
+];
+
+export const shifanxiangsearchFormSchema: FormSchema[] = [
+  {
+    label: '项目名称',
+    field: 'projectName',
+    component: 'Input',
+    labelWidth: 'auto'
+    //colProps: { span: 6 },
+  },
+  {
+    label: '行政区划',
+    field: 'adminDivision',
+    component: 'Input',
+    labelWidth: 'auto'
+    //colProps: { span: 6 },
+  },
+  {
+    //标题名称
+    label: '责任单位',
+    //字段
+    field: 'dutyWorkplace',
+    //组件 支持组件详见 components/Form/src/types/index.ts 中的 ComponentType
+    component: 'Input',
+    labelWidth: 'auto'
+  },
+  {
+    //标题名称
+    label: '单位属性',
+    //字段
+    field: 'workplaceProperties',
+    //组件 支持组件详见 components/Form/src/types/index.ts 中的 ComponentType
+    component: 'Input',
+    labelWidth: 'auto'
+  },
+  {
+    field: 'superLeader',
+    label: '上级指导处室',
+    component: 'DictSelect',
+    componentProps: {
+      dictType: 'superLeader',
+    },
+    labelWidth: 'auto'
+
+  },
+];

src/views/projectBoard/childBoard/danWeiZhuTi.vue

@@ -0,0 +1,37 @@
+<template>
+  <PageWrapper dense>
+    <!--引用表格-->
+    <BasicTable @register="registerTable">
+      <template #projectProgress="{ record }">
+        <el-progress :percentage="Number(record.projectProgress)*100>0?Number(record.projectProgress)*100:0"></el-progress>
+      </template>
+    </BasicTable>
+  </PageWrapper>
+</template>
+
+<script lang="ts" name="system-user" setup>
+//ts语法
+import { ref } from 'vue';
+import { ActionItem, BasicTable, TableAction, useTable } from '@/components/Table';
+import { PageWrapper } from '@/components/Page';
+
+import { danweizhuticolumns, danweizhutisearchFormSchema } from './childBoard.data'
+
+import { getDimensionPageSorted } from './childBoard.api';
+
+const [registerTable] = useTable({
+  title: '项目归档信息',
+  columns: danweizhuticolumns,
+  api: getDimensionPageSorted,
+  useSearchForm: true,
+  showIndexColumn: true,
+  //表单查询项设置
+  formConfig: {
+    schemas: danweizhutisearchFormSchema,
+  },
+});
+
+
+</script>
+
+<style scoped></style>

src/views/projectBoard/childBoard/gaiGeRenWu.vue

@@ -0,0 +1,215 @@
+<template>
+  <div style="background-color: #ececec; padding: 20px">
+    <a-row :gutter="16">
+      <a-col :span="12">
+        <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">
+                <template #default="{ percentage }">
+
+
+                  <div class="flex flex-col ...">
+                    <div>总进度</div>
+                    <div class="mt-4"> {{ percentage }}%</div>
+
+                  </div>
+                </template>
+              </el-progress>
+            </a-col>
+            <a-col :span="4" class="flex justify-center items-center ">
+              <div class="flex flex-col">
+                <div class="text-center">
+                  <!-- 这里放置内容 -->
+                  {{ data.totalProgress.notStartedNum }}
+                </div>
+                <div class="text-center">
+                  <!-- 这里放置内容 -->
+                  未启动
+                </div>
+              </div>
+            </a-col>
+            <a-col :span="4" class="flex justify-center items-center ">
+              <div class="flex flex-col">
+                <div class="text-center">
+                  <!-- 这里放置内容 -->
+                  {{data.totalProgress.purchasedNum}}
+                </div>
+                <div class="text-center">
+                  <!-- 这里放置内容 -->
+                  已采购
+                </div>
+              </div>
+            </a-col>
+            <a-col :span="4" class="flex justify-center items-center ">
+              <div class="flex flex-col">
+                <div class="text-center">
+                  <!-- 这里放置内容 -->
+                  {{ data.totalProgress.finishNum }}
+                </div>
+                <div class="text-center">
+                  <!-- 这里放置内容 -->
+                  建设完成
+                </div>
+              </div>
+            </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">
+                <template #default="{ percentage }">
+                  <div class="flex flex-col ...">
+                    <div>合同总金额</div>
+                    <div class="mt-4">{{data.countFundByFundType.totalMoney}}</div>
+                    <div class="mt-4"> {{ percentage }}%</div>
+                  </div>
+                </template>
+              </el-progress>
+            </a-col>
+            <a-col :span="16" class="flex justify-center items-center">
+              <div class="flex flex-col w-full">
+                <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>
+                    <div>{{ data.countFundByFundType.totalCentral }}</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.payProvincialExecutionRate)*100>0?Number(data.countFundByFundType.payProvincialExecutionRate)*100:0" />
+                    </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>
+                    <div>{{ data.countFundByFundType.totalCity }}</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.payCountyExecutionRate)*100>0?Number(data.countFundByFundType.payCountyExecutionRate)*100:0" />
+                    </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>
+                      <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"/>
+
+        </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>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+<script lang="ts">
+import bas_bar from './bas_bar.vue'
+import bar from './bar.vue'
+import { showCountBoardByReformName} from './childBoard.api'
+export default {
+  components: {
+    bas_bar,
+    bar,
+  },
+    data() {
+      return {
+        data: {
+          total: '0',
+          rkNum: '0',
+          ptNum: '0',
+          totalProgress: {
+            progress: '0',
+            notStartedNum: '0',
+            purchasedNum: '0',
+            finishNum: '0',
+          },
+          countFundByFundType: {
+            totalMoney: '0.00',
+            totalCentral: '0.00',
+            totalProvincial: '0.00',
+            totalCity: '0.00',
+            totalCounty: '0.00',
+            totalSelf: '0.00',
+            payAmount: '0.00',
+            payCentral: '0.00',
+            payProvincial: '0.00',
+            payCity: '0.00',
+            payCounty: '0.00',
+            paySelf: '0.00',
+            paymentExecutionRate: '0.0',
+            payCentralExecutionRate: '0.0',
+            payProvincialExecutionRate: '0.00',
+            payCityExecutionRate: '0.00',
+            payCountyExecutionRate: '0.00',
+            paySelfExecutionRate: '0.00',
+          },
+          countFundByCondition:[],
+          progress:[]
+        },
+        bas_barData: {
+          names:[],
+          values:[]
+        },
+        barData: {
+          names:[],
+          paymentExecutionRates:[],
+          superiorFundExecutionRates:[]
+        }
+      };
+    },
+    async created() {
+      this.data =  await showCountBoardByReformName() 
+      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)
+      })
+    },
+    methods: {},
+  };
+
+
+</script>

src/views/projectBoard/childBoard/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <PageWrapper>
+    <div>
+      <a-tabs v-model:activeKey="activeKey" type="card">
+
+        <a-tab-pane key="1"  tab="改革任务"><gaiGeRenWu :loading="loading" class="enter-y" v-if="activeKey=='1'"/></a-tab-pane>
+        <a-tab-pane key="2" tab="行政区划">
+          <xingZhengQuHua v-if="activeKey=='2'"/>
+        </a-tab-pane>
+        <a-tab-pane key="3" tab="单位主体"><danWeiZhuTi v-if="activeKey=='3'"/></a-tab-pane>
+        <a-tab-pane key="4" tab="示范项目"><shiFanXiangMu v-if="activeKey=='4'"/></a-tab-pane>
+
+      </a-tabs>
+      
+      <!-- <DynamicInfo :loading="loading" class="!my-4 enter-y" /> -->
+    </div>
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+import { ref, reactive, onMounted } from 'vue';
+import { PageWrapper } from '@/components/Page';
+import gaiGeRenWu from './gaiGeRenWu.vue';
+import xingZhengQuHua from './xingZhengQuHua.vue';
+import danWeiZhuTi from './danWeiZhuTi.vue';
+import shiFanXiangMu from './shiFanXiangMu.vue';
+// import ProjectCard from './ProjectCard.vue';
+
+const loading = ref(true);
+const activeKey = ref('1');
+
+</script>

src/views/projectBoard/childBoard/shiFanXiangMu.vue

@@ -0,0 +1,37 @@
+<template>
+  <PageWrapper dense>
+    <!--引用表格-->
+    <BasicTable @register="registerTable">
+      <template #projectProgress="{ record }">
+        <el-progress :percentage="Number(record.projectProgress)*100"></el-progress>
+      </template>
+    </BasicTable>
+  </PageWrapper>
+</template>
+
+<script lang="ts" name="system-user" setup>
+//ts语法
+import { ref } from 'vue';
+import { ActionItem, BasicTable, TableAction, useTable } from '@/components/Table';
+import { PageWrapper } from '@/components/Page';
+
+import { shifanxiangmucolumns, shifanxiangsearchFormSchema } from './childBoard.data'
+
+import { getPageSorted } from './childBoard.api';
+
+const [registerTable] = useTable({
+  title: '项目归档信息',
+  columns: shifanxiangmucolumns,
+  api:getPageSorted,
+  useSearchForm: true,
+  showIndexColumn: true,
+  //表单查询项设置
+  formConfig: {
+    schemas: shifanxiangsearchFormSchema,
+  },
+});
+
+
+</script>
+
+<style scoped></style>

src/views/projectBoard/childBoard/xingZhengQuHua.vue

@@ -0,0 +1,217 @@
+<template>
+  <div style="background-color: #ececec; padding: 20px">
+    <a-row :gutter="16">
+      <a-col :span="12">
+        <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">
+                <template #default="{ percentage }">
+
+
+                  <div class="flex flex-col ...">
+                    <div>总进度</div>
+                    <div class="mt-4"> {{ percentage }}%</div>
+
+                  </div>
+                </template>
+              </el-progress>
+            </a-col>
+            <a-col :span="4" class="flex justify-center items-center ">
+              <div class="flex flex-col">
+                <div class="text-center">
+                  <!-- 这里放置内容 -->
+                  {{ data.totalProgress.notStartedNum }}
+                </div>
+                <div class="text-center">
+                  <!-- 这里放置内容 -->
+                  未启动
+                </div>
+              </div>
+            </a-col>
+            <a-col :span="4" class="flex justify-center items-center ">
+              <div class="flex flex-col">
+                <div class="text-center">
+                  <!-- 这里放置内容 -->
+                  {{data.totalProgress.purchasedNum}}
+                </div>
+                <div class="text-center">
+                  <!-- 这里放置内容 -->
+                  已采购
+                </div>
+              </div>
+            </a-col>
+            <a-col :span="4" class="flex justify-center items-center ">
+              <div class="flex flex-col">
+                <div class="text-center">
+                  <!-- 这里放置内容 -->
+                  {{ data.totalProgress.finishNum }}
+                </div>
+                <div class="text-center">
+                  <!-- 这里放置内容 -->
+                  建设完成
+                </div>
+              </div>
+            </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">
+                <template #default="{ percentage }">
+                  <div class="flex flex-col ...">
+                    <div>合同总金额</div>
+                    <div class="mt-4">{{data.countFundByFundType.totalMoney}}</div>
+                    <div class="mt-4"> {{ percentage }}%</div>
+                  </div>
+                </template>
+              </el-progress>
+            </a-col>
+            <a-col :span="16" class="flex justify-center items-center">
+              <div class="flex flex-col w-full">
+                <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>
+                    <div>{{ data.countFundByFundType.totalCentral }}</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.payProvincialExecutionRate)*100>0?Number(data.countFundByFundType.payProvincialExecutionRate)*100:0" />
+                    </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>
+                    <div>{{ data.countFundByFundType.totalCity }}</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.payCountyExecutionRate)*100>0?Number(data.countFundByFundType.payCountyExecutionRate)*100:0" />
+                    </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>
+                      <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"/>
+
+        </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>
+      </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,
+  },
+    data() {
+      return {
+        data: {
+          total: '0',
+          rkNum: '0',
+          ptNum: '0',
+          totalProgress: {
+            progress: '0',
+            notStartedNum: '0',
+            purchasedNum: '0',
+            finishNum: '0',
+          },
+          countFundByFundType: {
+            totalMoney: '0.00',
+            totalCentral: '0.00',
+            totalProvincial: '0.00',
+            totalCity: '0.00',
+            totalCounty: '0.00',
+            totalSelf: '0.00',
+            payAmount: '0.00',
+            payCentral: '0.00',
+            payProvincial: '0.00',
+            payCity: '0.00',
+            payCounty: '0.00',
+            paySelf: '0.00',
+            paymentExecutionRate: '0.0',
+            payCentralExecutionRate: '0.0',
+            payProvincialExecutionRate: '0.00',
+            payCityExecutionRate: '0.00',
+            payCountyExecutionRate: '0.00',
+            paySelfExecutionRate: '0.00',
+          },
+          countFundByCondition:[],
+          progress:[]
+        },
+        bas_barData: {
+          names:[],
+          values:[]
+        },
+        barData: {
+          names:[],
+          paymentExecutionRates:[],
+          superiorFundExecutionRates:[]
+        }
+      };
+    },
+    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)
+      })
+    },
+    methods: {},
+  };
+
+
+
+
+</script>

src/views/projectBoard/totalProjectBoard/ProjectCard.vue

@@ -0,0 +1,315 @@
+<template>
+  <div style="background-color: #ececec; padding: 20px">
+    <a-row :gutter="16">
+      <a-col :span="8">
+        <a-card :body-style="{ padding: 0, overflow: 'hidden' }">
+          <a-row>
+            <a-col :span="8">
+              <div
+                class="bg-gradient-to-b from-cyan-500 to-blue-500 h-full flex justify-center items-center"
+              >
+                <img src="@/assets/images/项目数量.png" class="w-1/2" />
+              </div>
+            </a-col>
+            <a-col :span="16">
+              <a-row>
+                <a-col :span="12" :offset="3">
+                  <p class="font-semibold text-2xl">项目数量</p>
+                </a-col>
+              </a-row>
+              <a-row class="mt-4">
+                <a-col :span="12" :offset="12"
+                  ><a-typography-title :level="1">{{ data.total }}</a-typography-title></a-col
+                >
+              </a-row>
+            </a-col>
+          </a-row>
+        </a-card>
+      </a-col>
+      <a-col :span="8">
+        <a-card :body-style="{ padding: 0, overflow: 'hidden' }">
+          <a-row>
+            <a-col :span="8">
+              <div
+                class="bg-gradient-to-b from-sky-500 to-indigo-500 h-full flex justify-center items-center"
+              >
+                <img src="@/assets/images/项目入库.png" class="w-1/2" />
+              </div>
+            </a-col>
+            <a-col :span="16">
+              <a-row>
+                <a-col :span="24" :offset="3">
+                  <p class="font-semibold text-2xl">入库项目数量</p>
+                </a-col>
+              </a-row>
+              <a-row class="mt-4">
+                <a-col :span="12" :offset="12"
+                  ><a-typography-title :level="1">{{ data.rkNum }}</a-typography-title></a-col
+                >
+              </a-row>
+            </a-col>
+          </a-row>
+        </a-card>
+      </a-col>
+      <a-col :span="8">
+        <a-card :body-style="{ padding: 0, overflow: 'hidden' }">
+          <a-row>
+            <a-col :span="8">
+              <div
+                class="bg-gradient-to-b from-violet-500 to-fuchsia-500 h-full flex justify-center items-center"
+              >
+                <img src="@/assets/images/配套.png" class="w-1/2" />
+              </div>
+            </a-col>
+            <a-col :span="16">
+              <a-row>
+                <a-col :span="24" :offset="3">
+                  <p class="font-semibold text-2xl">配套项目数量</p>
+                </a-col>
+              </a-row>
+              <a-row class="mt-4">
+                <a-col :span="12" :offset="12"
+                  ><a-typography-title :level="1">{{ data.ptNum }}</a-typography-title></a-col
+                >
+              </a-row>
+            </a-col>
+          </a-row>
+        </a-card>
+      </a-col>
+      <!-- 下部分卡片 -->
+    </a-row>
+    <a-row :gutter="16" class="mt-10">
+      <a-col :span="12">
+        <a-card title="项目总进度" :body-style="{ padding: 0, overflow: 'hidden' }">
+          <a-row>
+            <a-col :span="12" class="flex justify-center items-center h-96">
+              <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 h-96">
+              <div class="flex flex-col">
+                <div class="text-center">
+                  <!-- 这里放置内容 -->
+                  <p class="text-2xl">{{ data.totalProgress.notStartedNum }}</p>
+                </div>
+                <div class="text-center">
+                  <!-- 这里放置内容 -->
+                  <p class="text-1xl">未启动</p>
+                </div>
+              </div>
+            </a-col>
+            <a-col :span="4" class="flex justify-center items-center h-96">
+              <div class="flex flex-col">
+                <div class="text-center">
+                  <!-- 这里放置内容 -->
+                  <p class="text-2xl">{{ data.totalProgress.purchasedNum }}</p>
+                </div>
+                <div class="text-center">
+                  <!-- 这里放置内容 -->
+                  <p class="text-1xl">已采购</p>
+                </div>
+              </div>
+            </a-col>
+            <a-col :span="4" class="flex justify-center items-center h-96">
+              <div class="flex flex-col">
+                <div class="text-center">
+                  <!-- 这里放置内容 -->
+                  <p class="text-2xl">{{ data.totalProgress.finishNum }}</p>
+                </div>
+                <div class="text-center">
+                  <!-- 这里放置内容 -->
+                  <p class="text-1xl">建设完成</p>
+                </div>
+              </div>
+            </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-96">
+              <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">{{ data.countFundByFundType.totalMoney }}</div>
+                    <div class="mt-4"> {{ percentage }}%</div>
+                  </div>
+                </template>
+              </el-progress>
+            </a-col>
+            <a-col :span="16" class="flex justify-center items-center h-96">
+              <div class="flex flex-col w-full">
+                <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>
+                    <div>{{ data.countFundByFundType.totalCentral }}</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.payProvincialExecutionRate) * 100 > 0
+                            ? Number(data.countFundByFundType.payProvincialExecutionRate) * 100
+                            : 0
+                        "
+                      />
+                    </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>
+                    <div>{{ data.countFundByFundType.totalCity }}</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.payCountyExecutionRate) * 100 > 0
+                            ? Number(data.countFundByFundType.payCountyExecutionRate) * 100
+                            : 0
+                        "
+                      />
+                    </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>
+                      <div>{{ data.countFundByFundType.totalSelf }}</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </a-col>
+          </a-row>
+        </a-card>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+<script lang="ts">
+  import { showCountBoard } from './totalProjectBoard.api';
+  export default {
+    data() {
+      return {
+        data: {
+          total: '0',
+          rkNum: '0',
+          ptNum: '0',
+          totalProgress: {
+            progress: '0',
+            notStartedNum: '0',
+            purchasedNum: '0',
+            finishNum: '0',
+          },
+          countFundByFundType: {
+            totalMoney: '0.00',
+            totalCentral: '0.00',
+            totalProvincial: '0.00',
+            totalCity: '0.00',
+            totalCounty: '0.00',
+            totalSelf: '0.00',
+            payAmount: '0.00',
+            payCentral: '0.00',
+            payProvincial: '0.00',
+            payCity: '0.00',
+            payCounty: '0.00',
+            paySelf: '0.00',
+            paymentExecutionRate: '0.0',
+            payCentralExecutionRate: '0.0',
+            payProvincialExecutionRate: '0.00',
+            payCityExecutionRate: '0.00',
+            payCountyExecutionRate: '0.00',
+            paySelfExecutionRate: '0.00',
+          },
+        },
+      };
+    },
+    async created() {
+      this.data =  await showCountBoard() 
+    },
+    methods: {},
+  };
+  // import { ref, onMounted, reactive ,defineProps} from 'vue';
+  // import { showCountBoard } from './totalProjectBoard.api';
+  // showCountBoard().then(res => {
+  // data =res
+  // console.log("res",res)
+  // })
+</script>

src/views/projectBoard/totalProjectBoard/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <PageWrapper>
+    <div>
+      <ProjectCard class="enter-y" />
+    </div>
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+import { ref, reactive, onMounted } from 'vue';
+import { PageWrapper } from '@/components/Page';
+import ProjectCard from './ProjectCard.vue';
+
+</script>

src/views/projectBoard/totalProjectBoard/totalProjectBoard.api.ts

@@ -0,0 +1,18 @@
+import { defHttp } from '@/utils/http/axios';
+
+export enum Api {
+  showCountBoard = '/huzhouProject/showCountBoard',
+
+  queryPlanModuleDetailPage = "/huzhouPlan/queryPlanModuleDetailPage",
+
+}
+/**
+ * 总体看板
+ */
+
+export const showCountBoard = () => defHttp.get({ url: Api.showCountBoard})
+
+// export const submitplaninfoUploadFile =  (params?) =>defHttp.post({ url: Api.submitplaninfoUploadFile,headers:{ "Content-Type": "multipart/form-data" }, params })
+
+
+