xiaoy
/
contract-business-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

部分修改

Browse Source
master
lion 10 months ago
parent bb46171f83
commit 352f85d099
3 changed files with 200 additions and 224 deletions
Show Stats Download Patch File Download Diff File

318
src/components/Progress/index.vue
Unescape View File

@ -1,195 +1,167 @@
<template> <template>
<div :class="className" :style="{ height: height, width: width }" ref="chartContainer" /> <div :class="className" :style="{ height: height, width: width }" ref="chartContainer" />
</template> </template>
<script> <script>
import * as echarts from 'echarts' import * as echarts from 'echarts'
import resize from '@/mixins/resize' import resize from '@/mixins/resize'
export default { export default {
mixins: [resize], mixins: [resize],
props: { props: {
className: { className: {
type: String, type: String,
default: '' default: ''
}, },
height: { height: {
type: String, type: String,
default: '350px' // 增加高度以容纳图例 default: '350px' // 增加高度以容纳图例
},
width: {
type: String,
default: '300px'
},
chartData: {
type: Array,
required: true
},
title: {
type: String,
default: '数据统计'
}
}, },
width: { data() {
type: String, return {
default: '300px' chart: null,
showRemaining: false,
usedAmount: 0,
totalAmount: 0,
remainingAmount: 0,
usedPercent: 0
}
}, },
chartData: { computed: {
type: Array, formattedUsedAmount() {
required: true return this.usedAmount.toFixed(2)
},
formattedRemainingAmount() {
return this.remainingAmount.toFixed(2)
},
formattedUsedPercent() {
return this.usedPercent.toFixed(2)
},
formattedRemainingPercent() {
return (100 - this.usedPercent).toFixed(2)
}
}, },
title: { mounted() {
type: String, this.$nextTick(() => {
default: '数据统计' this.initChart()
} this.bindEvents()
}, })
data() {
return {
chart: null,
showRemaining: false,
usedAmount: 0,
totalAmount: 0,
remainingAmount: 0,
usedPercent: 0
}
},
computed: {
formattedUsedAmount() {
return this.usedAmount.toFixed(2)
}, },
formattedRemainingAmount() { beforeDestroy() {
return this.remainingAmount.toFixed(2) if (this.chart) {
this.chart.dispose()
}
}, },
formattedUsedPercent() { watch: {
return this.usedPercent.toFixed(2) chartData: {
handler() {
this.setOptions()
},
deep: true
}
}, },
formattedRemainingPercent() { methods: {
return (100 - this.usedPercent).toFixed(2) initChart() {
} this.chart = echarts.init(this.$refs.chartContainer)
},
mounted() {
this.$nextTick(() => {
this.initChart()
this.bindEvents()
})
},
beforeDestroy() {
if (this.chart) {
this.chart.dispose()
}
},
watch: {
chartData: {
handler() {
this.setOptions() this.setOptions()
}, },
deep: true setOptions() {
} // 从chartData中提取已用金额和合计金额
}, const usedItem = this.chartData.find(item => item.name === '已用金额') || { value: 0 }
methods: { const totalItem = this.chartData.find(item => item.name === '合计金额') || { value: 0 }
initChart() {
this.chart = echarts.init(this.$refs.chartContainer)
this.setOptions()
},
setOptions() {
// 从chartData中提取已用金额和合计金额
const usedItem = this.chartData.find(item => item.name === '已用金额') || { value: 0 }
const totalItem = this.chartData.find(item => item.name === '合计金额') || { value: 0 }
this.usedAmount = parseFloat(usedItem.value) || 0 this.usedAmount = parseFloat(usedItem.value) || 0
this.totalAmount = parseFloat(totalItem.value) || 0 this.totalAmount = parseFloat(totalItem.value) || 0
this.remainingAmount = Math.max(0, this.totalAmount - this.usedAmount) this.remainingAmount = Math.max(0, this.totalAmount - this.usedAmount)
this.usedPercent = this.totalAmount > 0 this.usedPercent = this.totalAmount > 0
? (this.usedAmount / this.totalAmount) * 100 ? (this.usedAmount / this.totalAmount) * 100
: 0 : 0
const option = { const option = {
// 添加图例配置 // 添加图例配置
legend: { legend: {
type: 'plain', type: 'plain',
orient: 'horizontal', // 水平排列 orient: 'horizontal', // 水平排列
bottom: 0, // 位于底部 bottom: 0, // 位于底部
left: 'center', // 居中对齐 left: 'center', // 居中对齐
itemWidth: 12, // 图例标记宽度 itemWidth: 12, // 图例标记宽度
itemHeight: 12, // 图例标记高度 itemHeight: 12, // 图例标记高度
textStyle: { textStyle: {
fontSize: 10, fontSize: 10,
color: '#333' color: '#333'
}, },
data: [ data: [
{ name: '已用金额', icon: 'circle' }, { name: '已用金额', icon: 'circle' },
{ name: '剩余金额', icon: 'circle' } { name: '剩余金额', icon: 'circle' }
] ]
},
series: [{
type: 'pie',
radius: ['50%', '70%'],
center: ['50%', '40%'], // 调整图表位置，为图例腾出空间
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 6,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: true,
position: 'center',
formatter: () => `已用\n{value|${this.formattedUsedAmount}}\n{percent|${this.formattedUsedPercent}%}`,
rich: {
value: {
fontSize: 14,
fontWeight: 'bold',
lineHeight: 30
},
percent: {
fontSize: 12,
color: '#666'
}
}
},
labelLine: {
show: false
}, },
data: [ series: [{
{ type: 'pie',
value: this.usedAmount, radius: ['40%', '65%'],
name: '已用金额', center: ['50%', '45%'],
itemStyle: { avoidLabelOverlap: false,
color: '#446df6' // 已用金额颜色 minShowLabelAngle: 10,
} itemStyle: {
borderRadius: 6,
borderColor: '#fff',
borderWidth: 2
}, },
{ label: {
value: this.remainingAmount, show: true,
name: '剩余金额', position: 'outside',
itemStyle: { fontSize: 12,
color: '#ddd' // 剩余金额颜色 color: '#333',
formatter: params => {
// 只显示有数值的部分
if (params.value === 0) return '';
const percent = this.totalAmount > 0 ? ((params.value / this.totalAmount) * 100).toFixed(2) : '0.00';
return `${params.name}\n${percent}%`;
} }
} },
] labelLine: {
}] show: true,
} length: 8,
length2: 5,
this.chart.setOption(option) smooth: true
}, },
bindEvents() { data: [
// 鼠标悬停在剩余金额区域时显示剩余金额 {
this.chart.on('mouseover', params => { value: this.usedAmount,
if (params.data.name === '剩余金额') { name: '已用金额',
this.showRemaining = true itemStyle: {
this.chart.setOption({ color: '#446df6' // 已用金额颜色
series: [{ }
label: { },
formatter: () => `剩余\n{value|${this.formattedRemainingAmount}}\n{percent|${this.formattedRemainingPercent}%}` {
value: this.remainingAmount,
name: '剩余金额',
itemStyle: {
color: '#ddd' // 剩余金额颜色
}
} }
}] ]
}) }]
} }
})
// 鼠标移出时恢复显示已用金额 this.chart.setOption(option)
this.chart.on('mouseout', params => { },
if (params.data.name === '剩余金额') { // 移除bindEvents方法和相关调用
this.showRemaining = false
this.chart.setOption({
series: [{
label: {
formatter: () => `已用\n{value|${this.formattedUsedAmount}}\n{percent|${this.formattedUsedPercent}%}`
}
}]
})
}
})
} }
} }
} </script>
</script>
<style scoped> <style scoped>
</style> </style>

71
src/views/dashboard/components/budgetStatic.vue
Unescape View File

@ -2,7 +2,7 @@
<div> <div>
<el-drawer <el-drawer
size="1050px" size="1250px"
title="预算统计" title="预算统计"
:visible.sync="drawer" :visible.sync="drawer"
direction="rtl"> direction="rtl">
@ -80,27 +80,7 @@ export default {
align: 'left', align: 'left',
fixed: this.$store.getters.device === 'mobile'?false:'left' fixed: this.$store.getters.device === 'mobile'?false:'left'
}, },
{
prop: 'type_detail.value',
label: '预算类型',
width: 120,
},
{
prop: 'year',
label: '所属年份',
width: 160
},
{
prop: 'plan_department.name',
label: "相关科室",
width: 180
},
{
prop: 'content',
label: '描述',
align: 'left',
minWidth: 300
},
{ {
prop: 'money', prop: 'money',
width: 180, width: 180,
@ -138,6 +118,27 @@ export default {
return ( <div><el-progress percentage={perShow}> </el-progress></div>) return ( <div><el-progress percentage={perShow}> </el-progress></div>)
} }
}, },
{
prop: 'type_detail.value',
label: '预算类型',
width: 120,
},
{
prop: 'year',
label: '所属年份',
width: 160
},
{
prop: 'plan_department.name',
label: "相关科室",
width: 180
},
{
prop: 'content',
label: '描述',
align: 'left',
minWidth: 300
},
] ]
} }
}, },
@ -168,7 +169,7 @@ export default {
this.list = this.list =
mergeTableRow({ mergeTableRow({
data: res.list.data, data: res.list.data,
mergeColNames: ["pid_info_name",'selection','index'], // 需要合并的列，默认合并列相同的数据 mergeColNames: ["pid_info_name",'index'], // 需要合并的列，默认合并列相同的数据
firstMergeColNames: ["pid_info_name"], // 受影响的列，只合并以firstMerge为首的同类型数据 firstMergeColNames: ["pid_info_name"], // 受影响的列，只合并以firstMerge为首的同类型数据
firstMerge: 'pid_info_name' // 以哪列为基础进行合并，一般为第一列 firstMerge: 'pid_info_name' // 以哪列为基础进行合并，一般为第一列
}) })
@ -177,24 +178,24 @@ export default {
}, },
selected (selections, selected) { selected (selections, selected) {
if (selected['pid_info_name-span']?.rowspan > 1) { // if (selected['pid_info_name-span']?.rowspan > 1) {
if (this.selections.find(i => i.id === selected.id)) { // if (this.selections.find(i => i.id === selected.id)) {
let len = selected['pid_info_name-span'].rowspan // let len = selected['pid_info_name-span'].rowspan
let idx = this.selections.indexOf(selected) // let idx = this.selections.indexOf(selected)
this.selections.splice(idx,len) // this.selections.splice(idx,len)
} else { // } else {
let len = selected['pid_info_name-span'].rowspan // let len = selected['pid_info_name-span'].rowspan
let idx = this.list.indexOf(selected) // let idx = this.list.indexOf(selected)
this.selections.push(...this.list.slice(idx,idx+len)) // this.selections.push(...this.list.slice(idx,idx+len))
} // }
} else { // } else {
if (this.selections.find(i => i.id === selected.id)) { if (this.selections.find(i => i.id === selected.id)) {
let idx = this.selections.indexOf(this.selections.find(i => i.id === selected.id)) let idx = this.selections.indexOf(this.selections.find(i => i.id === selected.id))
this.selections.splice(idx,1) this.selections.splice(idx,1)
} else { } else {
this.selections.push(selected) this.selections.push(selected)
} }
} // }
}, },
selectAll (selections) { selectAll (selections) {

33
src/views/dashboard/index.vue
Unescape View File

@ -22,7 +22,7 @@
</el-tabs> </el-tabs>
</div> </div>
<div class="table-tree1" v-if="activeName==='todo'"> <div class="table-tree1" v-if="activeName==='todo'">
<el-table :data="list" border class="v-table" style="width: 100%; margin-bottom: 20px;height:220px"> <el-table :data="list" border class="v-table" style="width: 100%; margin-bottom: 20px;height:260px">
<el-table-column type="index" label="序号" align="center" /> <el-table-column type="index" label="序号" align="center" />
<el-table-column prop="type" width="100" label="类型" align="center" :formatter="typeFormatter" /> <el-table-column prop="type" width="100" label="类型" align="center" :formatter="typeFormatter" />
<el-table-column prop="content" label="内容" align="left" show-overflow-tooltip /> <el-table-column prop="content" label="内容" align="left" show-overflow-tooltip />
@ -58,7 +58,7 @@
</div> </div>
</div> </div>
<div v-if="isShowNoPay && activeName==='todolist'"> <div v-if="isShowNoPay && activeName==='todolist'">
<xy-table :cell-style="nopayCellStyle" :height="270" :list="nopay" :table-item="nopayTable"> <xy-table :cell-style="nopayCellStyle" :height="300" :list="nopay" :table-item="nopayTable">
<template v-slot:btns /> <template v-slot:btns />
</xy-table> </xy-table>
</div> </div>
@ -105,8 +105,8 @@
<div class="progress-card-item"> <div class="progress-card-item">
<MyProgress <MyProgress
ref="MyProgress" ref="MyProgress"
width="145px" width="300px"
height="145px" height="165px"
title="执行率" title="执行率"
:chart-data="[{value:statistic.progress.use_money_total,name:'已用金额'},{value:statistic.progress.money_total_2 ? statistic.progress.money_total_2 : statistic.progress.money_total_1,name:'合计金额'}]" :chart-data="[{value:statistic.progress.use_money_total,name:'已用金额'},{value:statistic.progress.money_total_2 ? statistic.progress.money_total_2 : statistic.progress.money_total_1,name:'合计金额'}]"
/> />
@ -145,7 +145,7 @@
</el-row> </el-row>
<div v-for="(sitem, index) in typeList"> <div v-for="(sitem, index) in typeList">
<template v-if="sitem[0]&&sitem[1]"> <template v-if="sitem[0]&&sitem[1]">
<el-col v-if="sitem[0]" :span="12"> <el-col v-if="sitem[0]" :span="12" style="padding-right:10px">
<el-card class="box-card"> <el-card class="box-card">
<div slot="header" class="box-card-header"> <div slot="header" class="box-card-header">
<SvgIcon style="color: #2D8cF0;width: 24px;height: 24px;" icon-class="caidan" /> <SvgIcon style="color: #2D8cF0;width: 24px;height: 24px;" icon-class="caidan" />
@ -178,15 +178,15 @@
<div class="progress-card-item"> <div class="progress-card-item">
<MyProgress <MyProgress
ref="MyProgress1" ref="MyProgress1"
width="145px" width="300px"
height="145px" height="165px"
title="执行率" title="执行率"
:chart-data="[{value:parseFloat(sitem[0].use_money_total),name:'已用金额'},{value:parseFloat(sitem[0].money_total_2) ? parseFloat(sitem[0].money_total_2) : parseFloat(sitem[0].money_total_1),name:'合计金额'}]" :chart-data="[{value:parseFloat(sitem[0].use_money_total),name:'已用金额'},{value:parseFloat(sitem[0].money_total_2) ? parseFloat(sitem[0].money_total_2) : parseFloat(sitem[0].money_total_1),name:'合计金额'}]"
/> />
</div> </div>
</div> </div>
</div> </div>
<xy-table :height="380" :list="sitem[0].departments" :table-item="departmentTable"> <xy-table :height="560" :list="sitem[0].departments" :table-item="departmentTable">
<template v-slot:btns> <template v-slot:btns>
<el-table-column :width="80" fixed="right" label="操作" header-align="center" align="center"> <el-table-column :width="80" fixed="right" label="操作" header-align="center" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
@ -201,7 +201,7 @@
</el-card> </el-card>
</el-col> </el-col>
<el-col v-if="sitem[1]" :span="12"> <el-col v-if="sitem[1]" :span="12" style="padding-left:10px">
<el-card class="box-card"> <el-card class="box-card">
<div slot="header" class="box-card-header"> <div slot="header" class="box-card-header">
<SvgIcon style="color: #2D8cF0;width: 24px;height: 24px;" icon-class="caidan" /> <SvgIcon style="color: #2D8cF0;width: 24px;height: 24px;" icon-class="caidan" />
@ -234,15 +234,15 @@
<div class="progress-card-item"> <div class="progress-card-item">
<MyProgress <MyProgress
ref="MyProgress2" ref="MyProgress2"
width="145px" width="300px"
height="145px" height="165px"
title="执行率" title="执行率"
:chart-data="[{value:parseFloat(sitem[1].use_money_total),name:'已用金额'},{value:parseFloat(sitem[1].money_total_2) ? parseFloat(sitem[1].money_total_2) : parseFloat(sitem[1].money_total_1),name:'合计金额'}]" :chart-data="[{value:parseFloat(sitem[1].use_money_total),name:'已用金额'},{value:parseFloat(sitem[1].money_total_2) ? parseFloat(sitem[1].money_total_2) : parseFloat(sitem[1].money_total_1),name:'合计金额'}]"
/> />
</div> </div>
</div> </div>
</div> </div>
<xy-table :height="380" :list="sitem[1].departments" :table-item="departmentTable"> <xy-table :height="280" :list="sitem[1].departments" :table-item="departmentTable">
<template v-slot:btns> <template v-slot:btns>
<el-table-column <el-table-column
:width="80" :width="80"
@ -1337,6 +1337,7 @@ export default {
this.statistic.departmentList = res.departmentList?.sort((a, b) => a.plan_department.sortnumber - b.plan_department.sortnumber) this.statistic.departmentList = res.departmentList?.sort((a, b) => a.plan_department.sortnumber - b.plan_department.sortnumber)
} }
console.log("this.statistic.typeList",this.typeList)
// this.split = Array.from({ length: Math.ceil(this.typeList/2) },() => 0.5) // this.split = Array.from({ length: Math.ceil(this.typeList/2) },() => 0.5)
}, },
getPer(row) { getPer(row) {
@ -1532,15 +1533,17 @@ export default {
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
height:280px; height:310px;
margin-top:10px; margin-top:10px;
&-item { &-item {
min-width: 120px; min-width: 120px;
margin: 10px; // margin: 10px;
margin-bottom: 10px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
text-align: center; text-align: center;
flex-basis: 50%;
&__label { &__label {
font-size: 15px; font-size: 15px;
@ -1626,7 +1629,7 @@ export default {
.table-tree1 { .table-tree1 {
margin-top: 10px; margin-top: 10px;
height:280px; height:310px;
} }
.v-text { .v-text {

Write Preview
Loading…
Cancel
Save