new_huozhou_frontend/src/views/projectBoard/totalProjectBoard/ProjectCard.vue

<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-[#1890FF] 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">
                  <div class="font-semibold text-2xl">项目数量</div>
                </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-[#4AD7FA] 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">
                  <div class="font-semibold text-2xl">入库项目数量</div>
                </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-[#6F75DC] 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">
                  <div class="font-semibold text-2xl">配套项目数量</div>
                </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">
                  <!-- 这里放置内容 -->
                  <div class="text-4xl font-semibold">{{ data.totalProgress.notStartedNum }}</div>
                </div>
                <div class="text-center">
                  <!-- 这里放置内容 -->
                  <div class="text-2xl font-medium">未启动</div>
                </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">
                  <!-- 这里放置内容 -->
                  <div class="text-4xl font-semibold">{{ data.totalProgress.purchasedNum }}</div>
                </div>
                <div class="text-center">
                  <!-- 这里放置内容 -->
                  <div class="text-2xl font-medium">已采购</div>
                </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">
                  <!-- 这里放置内容 -->
                  <div class="text-4xl font-semibold">{{ data.totalProgress.finishNum }}</div>
                </div>
                <div class="text-center">
                  <!-- 这里放置内容 -->
                  <div class="text-2xl font-medium">建设完成</div>
                </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 text-blue-600">{{ data.countFundByFundType.totalMoney }}</div>
                    <div class="mt-4 text-sky-400"> {{ 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-65"
                        :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-65"
                        :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-65"
                        :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-65"
                        :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-65"
                          :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>