湖州项目前端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

316 lines
12 KiB

<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
9 months ago
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
9 months ago
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
9 months ago
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
9 months ago
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
9 months ago
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
9 months ago
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
9 months ago
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
9 months ago
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>