Guoyan
/
new_huozhou_frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

前端可视化试图页面修改

master
zhouhaibin 4 months ago
parent
49c6cc5fd1
commit
97f3b62321
15 changed files with 1235 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/images/配套.png
  2. BIN
      src/assets/images/项目入库.png
  3. BIN
      src/assets/images/项目数量.png
  4. 78
      src/views/projectBoard/childBoard/bar.vue
  5. 64
      src/views/projectBoard/childBoard/bas_bar.vue
  6. 24
      src/views/projectBoard/childBoard/childBoard.api.ts
  7. 186
      src/views/projectBoard/childBoard/childBoard.data.ts
  8. 37
      src/views/projectBoard/childBoard/danWeiZhuTi.vue
  9. 215
      src/views/projectBoard/childBoard/gaiGeRenWu.vue
  10. 31
      src/views/projectBoard/childBoard/index.vue
  11. 37
      src/views/projectBoard/childBoard/shiFanXiangMu.vue
  12. 217
      src/views/projectBoard/childBoard/xingZhengQuHua.vue
  13. 315
      src/views/projectBoard/totalProjectBoard/ProjectCard.vue
  14. 13
      src/views/projectBoard/totalProjectBoard/index.vue
  15. 18
      src/views/projectBoard/totalProjectBoard/totalProjectBoard.api.ts

BIN
src/assets/images/配套.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

BIN
src/assets/images/项目入库.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
src/assets/images/项目数量.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

78
src/views/projectBoard/childBoard/bar.vue
View File

@ -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>

64
src/views/projectBoard/childBoard/bas_bar.vue
View File

@ -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>

24
src/views/projectBoard/childBoard/childBoard.api.ts
View File

@ -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 })

186
src/views/projectBoard/childBoard/childBoard.data.ts
View File

@ -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'
},
];

37
src/views/projectBoard/childBoard/danWeiZhuTi.vue
View File

@ -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>

215
src/views/projectBoard/childBoard/gaiGeRenWu.vue
View File

@ -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>

31
src/views/projectBoard/childBoard/index.vue
View File

@ -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>

37
src/views/projectBoard/childBoard/shiFanXiangMu.vue
View File

@ -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>

217
src/views/projectBoard/childBoard/xingZhengQuHua.vue
View File

@ -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>

315
src/views/projectBoard/totalProjectBoard/ProjectCard.vue
View File

@ -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>

13
src/views/projectBoard/totalProjectBoard/index.vue
View File

@ -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>

18
src/views/projectBoard/totalProjectBoard/totalProjectBoard.api.ts
View File

@ -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 })
Write Preview
Loading…
Cancel
Save