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

修复柱状图缺失总金额

changchun
zhouhaibin 8 months ago
parent
16a702439a
commit
fc696f8bf4
3 changed files with 184 additions and 123 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. 135
      src/views/projectBoard/childBoard/bar.vue
  2. 4
      src/views/projectBoard/childBoard/gaiGeRenWu.vue
  3. 168
      src/views/projectBoard/childBoard/xingZhengQuHua.vue

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

@ -3,76 +3,81 @@
</template>
<script lang="ts" name="PieChart" setup>
import { ref, reactive } from 'vue'
let receivingParameter = defineProps(["title", "data"])
let option = reactive({})
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'
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 + '%';
},
},
data: receivingParameter.data.superiorFundExecutionRates
},
{
name: '资金支付执行率',
type: 'bar',
stack: 'total',
label: {
show: true,
formatter: function (params) {
return (params.value*100).toFixed() + "%";
}
yAxis: [
{
type: 'category',
data: receivingParameter.data.names,
},
emphasis: {
focus: 'series'
{
type: 'category',
data: receivingParameter.data.totalMoneys,
},
data: receivingParameter.data.paymentExecutionRates
},
]
};
],
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>

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

@ -190,7 +190,8 @@ export default {
barData: {
names:[],
paymentExecutionRates:[],
superiorFundExecutionRates:[]
superiorFundExecutionRates:[],
totalMoneys:[],
}
};
},
@ -204,6 +205,7 @@ export default {
this.barData.names.push(item.name)
this.barData.paymentExecutionRates.push(item.paymentExecutionRate)
this.barData.superiorFundExecutionRates.push(item.superiorFundExecutionRate)
this.barData.totalMoneys.push(item.totalMoney)
})
},
methods: {},

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

@ -5,19 +5,25 @@
<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">
<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 ">
<a-col :span="4" class="flex justify-center items-center">
<div class="flex flex-col">
<div class="text-center">
<!-- 这里放置内容 -->
@ -55,17 +61,25 @@
</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">
<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-blue-600">{{ data.countFundByFundType.totalMoney }}</div>
<div class="mt-4 text-sky-400"> {{ percentage }}%</div>
</div>
</template>
@ -76,8 +90,17 @@
<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 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>
@ -85,17 +108,35 @@
<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 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>{{ 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 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>
@ -103,53 +144,68 @@
<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 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>{{ 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 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>{{ 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"/>
<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 :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,
},
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: {
@ -182,36 +238,34 @@ export default {
payCountyExecutionRate: '0.00',
paySelfExecutionRate: '0.00',
},
countFundByCondition:[],
progress:[]
countFundByCondition: [],
progress: [],
},
bas_barData: {
names:[],
values:[]
names: [],
values: [],
},
barData: {
names:[],
paymentExecutionRates:[],
superiorFundExecutionRates:[]
}
names: [],
paymentExecutionRates: [],
superiorFundExecutionRates: [],
totalMoneys: [],
},
};
},
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)
})
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);
this.barData.totalMoneys.push(item.totalMoney);
});
},
methods: {},
};
</script>

Write Preview
Loading…
Cancel
Save