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
316 lines
12 KiB
9 months ago
|
<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>
|