月度概览加单位

This commit is contained in:
2026-04-17 14:41:01 +08:00
parent d8abdfbfec
commit 8105e74122
46 changed files with 145 additions and 68 deletions

View File

@@ -127,7 +127,7 @@ export default {
validOtherData.forEach(item => { validOtherData.forEach(item => {
barData.locations.push(item.title); // locations=levelId对应的地名如levelId=7→宜兴 barData.locations.push(item.title); // locations=levelId对应的地名如levelId=7→宜兴
barData.diff.push(item.diff || 0); barData.diff.push(item.diff || 0);
barData.targets.push(item.target || 0); barData.targets.push(item.budget || 0);
barData.reals.push(item.real || 0); barData.reals.push(item.real || 0);
barData.rate.push(item.rate || 0); barData.rate.push(item.rate || 0);
barData.flags.push(item.rate >= 100 ? 1 : 0); barData.flags.push(item.rate >= 100 ? 1 : 0);

View File

@@ -50,7 +50,7 @@ export default {
}, },
{ {
value: this.detailData?.real || 0, value: this.detailData?.real || 0,
flag: this.detailData?.rate>=100, // 实际项:达标(绿色) flag: this.detailData?.flag || 0, // 实际项:达标(绿色)
label: { label: {
show: true, show: true,
position: 'top', position: 'top',

View File

@@ -80,7 +80,10 @@ export default {
const data = list.find(item => item && item.title === def.name) || fallback const data = list.find(item => item && item.title === def.name) || fallback
return { return {
...def, ...def,
data, data:{
...data,
flag:data.rate >= 100 ? 1 : 0
},
sortValue: Number((data && data.real) ?? 0) sortValue: Number((data && data.real) ?? 0)
} }
}) })

View File

@@ -1,5 +1,8 @@
<template> <template>
<div style="width: 100%; height: 210px;position: relative;"> <div style="width: 100%; height: 210px;position: relative;">
<div style='font-size: 16px;position: absolute;left: 20px;top:10px'>
万元
</div>
<div style='font-size: 16px;position: absolute;right: 20px;top:10px'> <div style='font-size: 16px;position: absolute;right: 20px;top:10px'>
<span>完成率:<span style='color: #0B58FF;'>{{detailData.completeRate}}%</span></span> <span>完成率:<span style='color: #0B58FF;'>{{detailData.completeRate}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:detailData.flag>0?'#30B590':'#FF9423'}" >{{detailData.diff}}</span></span> <span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:detailData.flag>0?'#30B590':'#FF9423'}" >{{detailData.diff}}</span></span>

View File

@@ -1,5 +1,8 @@
<template> <template>
<div style="width: 100%; height: 210px;position: relative;"> <div style="width: 100%; height: 210px;position: relative;">
<div style='font-size: 16px;position: absolute;left: 20px;top:10px'>
万元
</div>
<div style='font-size: 16px;position: absolute;right: 20px;top:10px'> <div style='font-size: 16px;position: absolute;right: 20px;top:10px'>
<span>完成率:<span style='color: #0B58FF;'>{{detailData.rate}}%</span></span> <span>完成率:<span style='color: #0B58FF;'>{{detailData.rate}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:flag>0?'#30B590':'#FF9423'}" >{{detailData.diff}}</span></span> <span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:flag>0?'#30B590':'#FF9423'}" >{{detailData.diff}}</span></span>

View File

@@ -1,5 +1,8 @@
<template> <template>
<div style="width: 100%; height: 210px;position: relative;"> <div style="width: 100%; height: 210px;position: relative;">
<div style='font-size: 16px;position: absolute;left: 20px;top:10px'>
/
</div>
<div style='font-size: 16px;position: absolute;right: 20px;top:10px'> <div style='font-size: 16px;position: absolute;right: 20px;top:10px'>
<span>完成率:<span style='color: #0B58FF;'>{{detailData.completeRate}}%</span></span> <span>完成率:<span style='color: #0B58FF;'>{{detailData.completeRate}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:detailData.flag>0?'#30B590':'#FF9423'}" >{{detailData.diff}}</span></span> <span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:detailData.flag>0?'#30B590':'#FF9423'}" >{{detailData.diff}}</span></span>

View File

@@ -1,5 +1,8 @@
<template> <template>
<div style="width: 100%; height: 210px;position: relative;"> <div style="width: 100%; height: 210px;position: relative;">
<div style='font-size: 16px;position: absolute;left: 20px;top:10px'>
万元
</div>
<div style='font-size: 16px;position: absolute;right: 20px;top:10px'> <div style='font-size: 16px;position: absolute;right: 20px;top:10px'>
<span>完成率:<span style='color: #0B58FF;'>{{detailData.rate}}%</span></span> <span>完成率:<span style='color: #0B58FF;'>{{detailData.rate}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:flag>0?'#30B590':'#FF9423'}" >{{detailData.diff}}</span></span> <span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:flag>0?'#30B590':'#FF9423'}" >{{detailData.diff}}</span></span>

View File

@@ -1,5 +1,8 @@
<template> <template>
<div style="width: 100%; height: 210px;position: relative;"> <div style="width: 100%; height: 210px;position: relative;">
<div style='font-size: 16px;position: absolute;left: 20px;top:10px'>
%
</div>
<div style='font-size: 16px;position: absolute;right: 20px;top:10px'> <div style='font-size: 16px;position: absolute;right: 20px;top:10px'>
<span>完成率:<span style='color: #0B58FF;'>{{detailData.rate}}%</span></span> <span>完成率:<span style='color: #0B58FF;'>{{detailData.rate}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:flag>0?'#30B590':'#FF9423'}" >{{detailData.diff}}</span></span> <span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:flag>0?'#30B590':'#FF9423'}" >{{detailData.diff}}</span></span>

View File

@@ -1,5 +1,8 @@
<template> <template>
<div style="width: 100%; height: 210px;position: relative;"> <div style="width: 100%; height: 210px;position: relative;">
<div style='font-size: 16px;position: absolute;left: 20px;top:10px'>
/
</div>
<div style='font-size: 16px;position: absolute;right: 20px;top:10px'> <div style='font-size: 16px;position: absolute;right: 20px;top:10px'>
<span>完成率:<span style='color: #0B58FF;'>{{detailData.completeRate}}%</span></span> <span>完成率:<span style='color: #0B58FF;'>{{detailData.completeRate}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:detailData.flag>0?'#30B590':'#FF9423'}" >{{detailData.diff}}</span></span> <span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:detailData.flag>0?'#30B590':'#FF9423'}" >{{detailData.diff}}</span></span>

View File

@@ -1,5 +1,8 @@
<template> <template>
<div style="width: 100%; height: 210px;position: relative;"> <div style="width: 100%; height: 210px;position: relative;">
<div style='font-size: 16px;position: absolute;left: 20px;top:10px'>
万元
</div>
<div style='font-size: 16px;position: absolute;right: 20px;top:10px'> <div style='font-size: 16px;position: absolute;right: 20px;top:10px'>
<span>完成率:<span style='color: #0B58FF;'>{{detailData.rate}}%</span></span> <span>完成率:<span style='color: #0B58FF;'>{{detailData.rate}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:detailData.diff>=0?'#30B590':'#FF9423'}" >{{detailData.diff}}</span></span> <span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:detailData.diff>=0?'#30B590':'#FF9423'}" >{{detailData.diff}}</span></span>
@@ -75,16 +78,6 @@ export default {
backgroundColor: '#6a7985' backgroundColor: '#6a7985'
} }
}, },
// formatter: (params) => {
// let html = `${params[0].axisValue}<br/>`;
// params.forEach(item => {
// const unit = item.seriesName === '完成率' ? '%' : (
// ['产量', '销量'].includes(this.$parent.selectedProfit) ? '片' : '万元'
// );
// html += `${item.marker} ${item.seriesName}: ${item.value}${unit}<br/>`;
// });
// return html;
// }
}, },
grid: { grid: {
top: 40, top: 40,
@@ -97,9 +90,6 @@ export default {
xAxis: { xAxis: {
// 横向柱状图的x轴必须设为数值轴否则无法正常展示数值 // 横向柱状图的x轴必须设为数值轴否则无法正常展示数值
type: 'value', type: 'value',
// offset: 0,
// boundaryGap: true ,
// boundaryGap: [10, 0], // 可根据需要开启,控制轴的留白
axisTick: { show: false }, axisTick: { show: false },
min: 0, min: 0,
// //

View File

@@ -1,5 +1,8 @@
<template> <template>
<div style="width: 100%; height: 210px;position: relative;"> <div style="width: 100%; height: 210px;position: relative;">
<div style='font-size: 16px;position: absolute;left: 20px;top:10px'>
万元
</div>
<div style='font-size: 16px;position: absolute;right: 20px;top:10px'> <div style='font-size: 16px;position: absolute;right: 20px;top:10px'>
<span>完成率:<span style='color: #0B58FF;'>{{detailData.completeRate}}%</span></span> <span>完成率:<span style='color: #0B58FF;'>{{detailData.completeRate}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:detailData.flag>0?'#30B590':'#FF9423'}" >{{detailData.diff}}</span></span> <span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:detailData.flag>0?'#30B590':'#FF9423'}" >{{detailData.diff}}</span></span>

View File

@@ -1,5 +1,8 @@
<template> <template>
<div style="width: 100%; height: 210px;position: relative;"> <div style="width: 100%; height: 210px;position: relative;">
<div style='font-size: 16px;position: absolute;left: 20px;top:10px'>
万元
</div>
<div style='font-size: 16px;position: absolute;right: 20px;top:10px'> <div style='font-size: 16px;position: absolute;right: 20px;top:10px'>
<span>完成率:<span style='color: #0B58FF;'>{{detailData.completeRate}}%</span></span> <span>完成率:<span style='color: #0B58FF;'>{{detailData.completeRate}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:detailData.flag>0?'#30B590':'#FF9423'}" >{{detailData.diff}}</span></span> <span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:detailData.flag>0?'#30B590':'#FF9423'}" >{{detailData.diff}}</span></span>

View File

@@ -28,8 +28,8 @@
gap: 12px; gap: 12px;
grid-template-columns: 804px 804px; grid-template-columns: 804px 804px;
"> ">
<monthlyOverview :month="month" :monData="monData" :title="'月度概览'" /> <monthlyOverview :month="month" :monData="monData" :title="'月度概览'" unit='元/㎡'/>
<totalOverview :totalData="totalData" :title="'累计概览'" /> <totalOverview :totalData="totalData" :title="'累计概览'" unit='元/㎡'/>
</div> </div>
</div> </div>
<div class="middle" style="display: flex; gap: 16px;margin-top: 6px;"> <div class="middle" style="display: flex; gap: 16px;margin-top: 6px;">

View File

@@ -26,8 +26,8 @@
gap: 12px; gap: 12px;
grid-template-columns: 804px 804px; grid-template-columns: 804px 804px;
"> ">
<monthlyOverview :month="month" :monData="monData" :title="'月度概览'" /> <monthlyOverview :month="month" :monData="monData" :title="'月度概览'" unit='元/㎡'/>
<totalOverview :totalData="totalData" :title="'累计概览'" /> <totalOverview :totalData="totalData" :title="'累计概览'" unit='元/㎡'/>
</div> </div>
</div> </div>
<div class="middle" style="display: flex; gap: 16px;margin-top: 6px;"> <div class="middle" style="display: flex; gap: 16px;margin-top: 6px;">

View File

@@ -26,8 +26,8 @@
gap: 12px; gap: 12px;
grid-template-columns: 804px 804px; grid-template-columns: 804px 804px;
"> ">
<monthlyOverview :month="month" :monData="monData" :title="'月度概览'" /> <monthlyOverview :month="month" :monData="monData" :title="'月度概览'" unit='元/㎡'/>
<totalOverview :totalData="totalData" :title="'累计概览'" /> <totalOverview :totalData="totalData" :title="'累计概览'" unit='元/㎡'/>
</div> </div>
</div> </div>
<div class="middle" style="display: flex; gap: 16px;margin-top: 6px;"> <div class="middle" style="display: flex; gap: 16px;margin-top: 6px;">

View File

@@ -26,8 +26,8 @@
gap: 12px; gap: 12px;
grid-template-columns: 804px 804px; grid-template-columns: 804px 804px;
"> ">
<monthlyOverview :month="month" :monData="monData" :title="'月度概览'" /> <monthlyOverview :month="month" :monData="monData" :title="'月度概览'" unit='元/㎡'/>
<totalOverview :totalData="totalData" :title="'累计概览'" /> <totalOverview :totalData="totalData" :title="'累计概览'" unit='元/㎡'/>
</div> </div>
</div> </div>
<div class="middle" style="display: flex; gap: 16px;margin-top: 6px;"> <div class="middle" style="display: flex; gap: 16px;margin-top: 6px;">

View File

@@ -28,8 +28,8 @@
gap: 12px; gap: 12px;
grid-template-columns: 804px 804px; grid-template-columns: 804px 804px;
"> ">
<monthlyOverview :month="month" :monData="monData" :title="'月度概览'" /> <monthlyOverview :month="month" :monData="monData" :title="'月度概览'" unit='元/㎡'/>
<totalOverview :totalData="totalData" :title="'累计概览'" /> <totalOverview :totalData="totalData" :title="'累计概览'" unit='元/㎡'/>
</div> </div>
</div> </div>
<div class="bottom" style="display: flex; gap: 16px;margin-top: 6px;"> <div class="bottom" style="display: flex; gap: 16px;margin-top: 6px;">

View File

@@ -26,8 +26,8 @@
gap: 12px; gap: 12px;
grid-template-columns: 804px 804px; grid-template-columns: 804px 804px;
"> ">
<monthlyOverview :month="month" :monData="monData" :title="'月度概览'" /> <monthlyOverview :month="month" :monData="monData" :title="'月度概览'" unit='元/㎡'/>
<totalOverview :totalData="totalData" :title="'累计概览'" /> <totalOverview :totalData="totalData" :title="'累计概览'" unit='元/㎡'/>
</div> </div>
</div> </div>
<div class="middle" style="display: flex; gap: 16px;margin-top: 6px;"> <div class="middle" style="display: flex; gap: 16px;margin-top: 6px;">

View File

@@ -26,8 +26,8 @@
gap: 12px; gap: 12px;
grid-template-columns: 804px 804px; grid-template-columns: 804px 804px;
"> ">
<monthlyOverview :month="month" :monData="monData" :title="'月度概览'" /> <monthlyOverview :month="month" :monData="monData" :title="'月度概览'" unit='元/㎡'/>
<totalOverview :totalData="totalData" :title="'累计概览'" /> <totalOverview :totalData="totalData" :title="'累计概览'" unit='元/㎡'/>
</div> </div>
</div> </div>

View File

@@ -26,8 +26,8 @@
gap: 12px; gap: 12px;
grid-template-columns: 804px 804px; grid-template-columns: 804px 804px;
"> ">
<monthlyOverview :month="month" :monData="monData" :title="'月度概览'" /> <monthlyOverview :month="month" :monData="monData" :title="'月度概览'" unit='元/㎡'/>
<totalOverview :totalData="totalData" :title="'累计概览'" /> <totalOverview :totalData="totalData" :title="'累计概览'" unit='元/㎡'/>
</div> </div>
</div> </div>
<div class="middle" style="display: flex; gap: 16px;margin-top: 6px;"> <div class="middle" style="display: flex; gap: 16px;margin-top: 6px;">

View File

@@ -26,8 +26,8 @@
gap: 12px; gap: 12px;
grid-template-columns: 804px 804px; grid-template-columns: 804px 804px;
"> ">
<monthlyOverview :month="month" :monData="monData" :title="'月度概览'" /> <monthlyOverview :month="month" :monData="monData" :title="'月度概览'" unit='元/㎡'/>
<totalOverview :totalData="totalData" :title="'累计概览'" /> <totalOverview :totalData="totalData" :title="'累计概览'" unit='元/㎡'/>
</div> </div>
</div> </div>
<div class="middle" style="display: flex; gap: 16px;margin-top: 6px;"> <div class="middle" style="display: flex; gap: 16px;margin-top: 6px;">

View File

@@ -26,8 +26,8 @@
gap: 12px; gap: 12px;
grid-template-columns: 804px 804px; grid-template-columns: 804px 804px;
"> ">
<monthlyOverview :month="month" :monData="monData" :title="'月度概览'" /> <monthlyOverview :month="month" :monData="monData" :title="'月度概览'" unit='元/㎡'/>
<totalOverview :totalData="totalData" :title="'累计概览'" /> <totalOverview :totalData="totalData" :title="'累计概览'" unit='元/㎡'/>
</div> </div>
</div> </div>
<div class="middle" style="display: flex; gap: 16px;margin-top: 6px;"> <div class="middle" style="display: flex; gap: 16px;margin-top: 6px;">

View File

@@ -26,8 +26,8 @@
gap: 12px; gap: 12px;
grid-template-columns: 804px 804px; grid-template-columns: 804px 804px;
"> ">
<monthlyOverview :month="month" :monData="monData" :title="'月度概览'" /> <monthlyOverview :month="month" :monData="monData" :title="'月度概览'" unit='元/㎡'/>
<totalOverview :totalData="totalData" :title="'累计概览'" /> <totalOverview :totalData="totalData" :title="'累计概览'" unit='元/㎡'/>
</div> </div>
</div> </div>

View File

@@ -26,8 +26,8 @@
gap: 12px; gap: 12px;
grid-template-columns: 804px 804px; grid-template-columns: 804px 804px;
"> ">
<monthlyOverview :month="month" :monData="monData" :title="'月度概览'" /> <monthlyOverview :month="month" :monData="monData" :title="'月度概览'" unit='元/㎡'/>
<totalOverview :totalData="totalData" :title="'累计概览'" /> <totalOverview :totalData="totalData" :title="'累计概览'" unit='元/㎡'/>
</div> </div>
</div> </div>
<div class="middle" style="display: flex; gap: 16px;margin-top: 6px;"> <div class="middle" style="display: flex; gap: 16px;margin-top: 6px;">

View File

@@ -26,8 +26,8 @@
gap: 12px; gap: 12px;
grid-template-columns: 804px 804px; grid-template-columns: 804px 804px;
"> ">
<monthlyOverview :month="month" :monData="monData" :title="'月度概览'" /> <monthlyOverview :month="month" :monData="monData" :title="'月度概览'" unit='元/㎡'/>
<totalOverview :totalData="totalData" :title="'累计概览'" /> <totalOverview :totalData="totalData" :title="'累计概览'" unit='元/㎡'/>
</div> </div>
</div> </div>
<div class="middle" style="display: flex; gap: 16px;margin-top: 6px;"> <div class="middle" style="display: flex; gap: 16px;margin-top: 6px;">

View File

@@ -26,8 +26,8 @@
gap: 12px; gap: 12px;
grid-template-columns: 804px 804px; grid-template-columns: 804px 804px;
"> ">
<monthlyOverview :month="month" :monData="monData" :title="'月度概览'" /> <monthlyOverview :month="month" :monData="monData" :title="'月度概览'" unit='元/㎡'/>
<totalOverview :totalData="totalData" :title="'累计概览'" /> <totalOverview :totalData="totalData" :title="'累计概览'" unit='元/㎡'/>
</div> </div>
</div> </div>

View File

@@ -26,8 +26,8 @@
gap: 12px; gap: 12px;
grid-template-columns: 804px 804px; grid-template-columns: 804px 804px;
"> ">
<monthlyOverview :month="month" :monData="monData" :title="'月度概览'" /> <monthlyOverview :month="month" :monData="monData" :title="'月度概览'" unit='元/㎡'/>
<totalOverview :totalData="totalData" :title="'累计概览'" /> <totalOverview :totalData="totalData" :title="'累计概览'" unit='元/㎡'/>
</div> </div>
</div> </div>

View File

@@ -28,8 +28,8 @@
gap: 12px; gap: 12px;
grid-template-columns: 804px 804px; grid-template-columns: 804px 804px;
"> ">
<monthlyOverview :month="month" :monData="monData" :title="'月度概览'" /> <monthlyOverview :month="month" :monData="monData" :title="'月度概览'" :unit='unit'/>
<totalOverview :totalData="totalData" :title="'累计概览'" /> <totalOverview :totalData="totalData" :title="'累计概览'" :unit='unit'/>
</div> </div>
</div> </div>
<div class="middle" style="display: flex; gap: 16px;margin-top: 6px;"> <div class="middle" style="display: flex; gap: 16px;margin-top: 6px;">
@@ -151,6 +151,17 @@ export default {
variables() { variables() {
return variables; return variables;
}, },
unit(){
if(this.fuelName === '重油'){
return '元/㎡'
}else if(this.fuelName === 'LNG液化天然气'){
return '元/㎡'
}else if(this.fuelName === '天然气'){
return '元/㎡'
}else if(this.fuelName === '水'){
return '元/m³'
}
},
// ...mapGetters(['sidebar']), // ...mapGetters(['sidebar']),
styles() { styles() {
const v = Math.floor(this.value * this.beilv * 100) / 10000; const v = Math.floor(this.value * this.beilv * 100) / 10000;

View File

@@ -28,8 +28,8 @@
gap: 12px; gap: 12px;
grid-template-columns: 804px 804px; grid-template-columns: 804px 804px;
"> ">
<monthlyOverview :month="month" :monData="monData" :title="'月度概览'" /> <monthlyOverview :month="month" :monData="monData" :title="'月度概览'" unit='元/㎡'/>
<totalOverview :totalData="totalData" :title="'累计概览'" /> <totalOverview :totalData="totalData" :title="'累计概览'" unit='元/㎡'/>
</div> </div>
</div> </div>
<div class="middle" style="display: flex; gap: 16px;margin-top: 6px;"> <div class="middle" style="display: flex; gap: 16px;margin-top: 6px;">

View File

@@ -28,8 +28,8 @@
gap: 12px; gap: 12px;
grid-template-columns: 804px 804px; grid-template-columns: 804px 804px;
"> ">
<monthlyOverview :month="month" :monData="monData" :title="'月度概览'" /> <monthlyOverview :month="month" :monData="monData" :title="'月度概览'" unit='元/㎡'/>
<totalOverview :totalData="totalData" :title="'累计概览'" /> <totalOverview :totalData="totalData" :title="'累计概览'" unit='元/㎡'/>
</div> </div>
</div> </div>

View File

@@ -28,8 +28,8 @@
gap: 12px; gap: 12px;
grid-template-columns: 804px 804px; grid-template-columns: 804px 804px;
"> ">
<monthlyOverview :month="month" :monData="monData" :title="'月度概览'" /> <monthlyOverview :month="month" :monData="monData" :title="'月度概览'" unit='元/㎡'/>
<totalOverview :totalData="totalData" :title="'累计概览'" /> <totalOverview :totalData="totalData" :title="'累计概览'" unit='元/㎡'/>
</div> </div>
</div> </div>
<div class="middle" style="display: flex; gap: 16px;margin-top: 6px;"> <div class="middle" style="display: flex; gap: 16px;margin-top: 6px;">

View File

@@ -63,7 +63,7 @@ export default {
selectedProfit: '原片成本', // 选中的名称初始为null selectedProfit: '原片成本', // 选中的名称初始为null
profitOptions: [ profitOptions: [
'原片成本', '原片成本',
'原料成本', '原片原料成本',
'燃料成本', '燃料成本',
'电成本', '电成本',
'人工成本', '人工成本',

View File

@@ -24,7 +24,7 @@
</div> </div>
<div class="line" style="padding: 0px;"> <div class="line" style="padding: 0px;">
<!-- 传递包含flag的factoryData给柱状图组件 --> <!-- 传递包含flag的factoryData给柱状图组件 -->
<verticalBarChart :detailData="factoryData"></verticalBarChart> <verticalBarChart :detailData="factoryData" :unit='unit'></verticalBarChart>
</div> </div>
</div> </div>
</div> </div>
@@ -54,6 +54,10 @@ export default {
type: String, type: String,
default: '' default: ''
}, },
unit: {
type: String,
default: ''
},
}, },
data() { data() {
return { return {

View File

@@ -31,6 +31,16 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
this.updateChart(); this.updateChart();
}); });
// 在 mounted 中统一绑定 resize 事件
window.addEventListener('resize', this.handleResize);
},
beforeDestroy() { // 或 unmounted (Vue3)
// 组件销毁时移除监听器并销毁图表
window.removeEventListener('resize', this.handleResize);
if (this.myChart) {
this.myChart.dispose();
this.myChart = null;
}
}, },
// 新增:监听 chartData 变化 // 新增:监听 chartData 变化
@@ -46,7 +56,7 @@ export default {
}, },
showRelated: { showRelated: {
handler(val) { handler(val) {
if (val) { if (val && this.myChart) {
this.myChart.resize(); this.myChart.resize();
} }
}, },

View File

@@ -26,7 +26,7 @@
</div> </div>
<div class="line" style="padding: 0px;"> <div class="line" style="padding: 0px;">
<!-- 传递包含flag的factoryData给柱状图组件 --> <!-- 传递包含flag的factoryData给柱状图组件 -->
<verticalBarChart :detailData="factoryData"></verticalBarChart> <verticalBarChart :detailData="factoryData" :unit='unit'></verticalBarChart>
</div> </div>
</div> </div>
</div> </div>
@@ -57,6 +57,10 @@ export default {
type: String, type: String,
default: '' default: ''
}, },
unit: {
type: String,
default: ''
},
}, },
data() { data() {
return { return {

View File

@@ -1,5 +1,8 @@
<template> <template>
<div style="width: 100%; height: 210px;position: relative;"> <div style="width: 100%; height: 210px;position: relative;">
<div style='font-size: 16px;position: absolute;left: 20px;top:10px'>
{{unit}}
</div>
<div style='font-size: 16px;position: absolute;right: 20px;top:10px'> <div style='font-size: 16px;position: absolute;right: 20px;top:10px'>
<span>完成率:<span style='color: #0B58FF;'>{{detailData.completeRate}}%</span></span> <span>完成率:<span style='color: #0B58FF;'>{{detailData.completeRate}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:detailData.flag>0?'#30B590':'#FF9423'}" >{{detailData.diff}}</span></span> <span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:detailData.flag>0?'#30B590':'#FF9423'}" >{{detailData.diff}}</span></span>
@@ -32,6 +35,10 @@ export default {
thb: 0, thb: 0,
flag: 0 flag: 0
}), }),
},
unit:{
type: String,
default: ''
} }
}, },
mounted() { mounted() {

View File

@@ -1,5 +1,8 @@
<template> <template>
<div style="width: 100%; height: 210px;position: relative;"> <div style="width: 100%; height: 210px;position: relative;">
<div style='font-size: 16px;position: absolute;left: 20px;top:10px'>
%
</div>
<div style='font-size: 16px;position: absolute;right: 20px;top:10px'> <div style='font-size: 16px;position: absolute;right: 20px;top:10px'>
<span>完成率:<span style='color: #0B58FF;'>{{detailData.rate}}%</span></span> <span>完成率:<span style='color: #0B58FF;'>{{detailData.rate}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:flag>0?'#30B590':'#FF9423'}" >{{detailData.diff}}</span></span> <span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:flag>0?'#30B590':'#FF9423'}" >{{detailData.diff}}</span></span>

View File

@@ -26,8 +26,8 @@
gap: 12px; gap: 12px;
grid-template-columns: 804px 804px; grid-template-columns: 804px 804px;
"> ">
<monthlyOverview :month="month" :monData="monData" :title="'月度概览'" /> <monthlyOverview :month="month" :monData="monData" :title="'月度概览'" unit='万㎡'/>
<totalOverview :totalData="totalData" :title="'累计概览'" /> <totalOverview :totalData="totalData" :title="'累计概览'" unit='万㎡'/>
</div> </div>
</div> </div>

View File

@@ -26,8 +26,8 @@
gap: 12px; gap: 12px;
grid-template-columns: 804px 804px; grid-template-columns: 804px 804px;
"> ">
<monthlyOverview :month="month" :monData="monData" :title="'月度概览'" /> <monthlyOverview :month="month" :monData="monData" :title="'月度概览'" unit='%'/>
<totalOverview :totalData="totalData" :title="'累计概览'" /> <totalOverview :totalData="totalData" :title="'累计概览'" unit='%'/>
</div> </div>
</div> </div>

View File

@@ -26,8 +26,8 @@
gap: 12px; gap: 12px;
grid-template-columns: 804px 804px; grid-template-columns: 804px 804px;
"> ">
<monthlyOverview :month="month" :monData="monData" :title="'月度概览'" /> <monthlyOverview :month="month" :monData="monData" :title="'月度概览'" unit='万㎡'/>
<totalOverview :totalData="totalData" :title="'累计概览'" /> <totalOverview :totalData="totalData" :title="'累计概览'" unit='万㎡'/>
</div> </div>
</div> </div>

View File

@@ -20,7 +20,7 @@
</div> </div>
<div class="line" style="padding: 0px;"> <div class="line" style="padding: 0px;">
<!-- 传递包含flag的factoryData给柱状图组件 --> <!-- 传递包含flag的factoryData给柱状图组件 -->
<verticalBarChart :detailData="factoryData"></verticalBarChart> <verticalBarChart :detailData="factoryData" :unit='unit'></verticalBarChart>
</div> </div>
</div> </div>
</div> </div>
@@ -50,6 +50,10 @@ export default {
type: String, type: String,
default: '' default: ''
}, },
unit: {
type: String,
default: ''
},
}, },
data() { data() {
return { return {

View File

@@ -21,7 +21,7 @@
</div> </div>
</div> </div>
<div class="line" style="padding: 0px;"> <div class="line" style="padding: 0px;">
<verticalBarChart :detailData="factoryData"> <verticalBarChart :detailData="factoryData" :unit='unit'>
</verticalBarChart> </verticalBarChart>
</div> </div>
@@ -51,6 +51,10 @@ export default {
type: String, type: String,
default: '' default: ''
}, },
unit: {
type: String,
default: ''
},
}, },
data() { data() {
return { return {

View File

@@ -1,5 +1,8 @@
<template> <template>
<div style="width: 100%; height: 210px;position: relative;"> <div style="width: 100%; height: 210px;position: relative;">
<div style='font-size: 16px;position: absolute;left: 20px;top:10px'>
{{unit}}
</div>
<div style='font-size: 16px;position: absolute;right: 20px;top:10px'> <div style='font-size: 16px;position: absolute;right: 20px;top:10px'>
<span>完成率:<span style='color: #0B58FF;'>{{detailData.completeRate}}%</span></span> <span>完成率:<span style='color: #0B58FF;'>{{detailData.completeRate}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:detailData.flag>0?'#30B590':'#FF9423'}" >{{detailData.diff}}</span></span> <span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:detailData.flag>0?'#30B590':'#FF9423'}" >{{detailData.diff}}</span></span>
@@ -32,6 +35,10 @@ export default {
thb: 0, thb: 0,
flag: 0 flag: 0
}), }),
},
unit: {
type: String,
default: ''
} }
}, },
mounted() { mounted() {

View File

@@ -1,5 +1,8 @@
<template> <template>
<div style="width: 100%; height: 210px;position: relative;"> <div style="width: 100%; height: 210px;position: relative;">
<div style='font-size: 16px;position: absolute;left: 20px;top:10px'>
万元
</div>
<div style='font-size: 16px;position: absolute;right: 20px;top:10px'> <div style='font-size: 16px;position: absolute;right: 20px;top:10px'>
<span>完成率:<span style='color: #0B58FF;'>{{detailData.completeRate}}%</span></span> <span>完成率:<span style='color: #0B58FF;'>{{detailData.completeRate}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:detailData.flag>0?'#30B590':'#FF9423'}" >{{detailData.diff}}</span></span> <span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:detailData.flag>0?'#30B590':'#FF9423'}" >{{detailData.diff}}</span></span>

View File

@@ -117,7 +117,7 @@ export default {
watch: { watch: {
relatedMon: { relatedMon: {
handler(newValue) { handler(newValue) {
this.updateChart() // this.updateChart()
}, },
immediate: true, // 初始化时立即执行 immediate: true, // 初始化时立即执行
deep: true deep: true
@@ -125,7 +125,7 @@ export default {
}, },
mounted() { mounted() {
// 初始化图表 // 初始化图表
this.$nextTick(() => this.updateChart()) // this.$nextTick(() => this.updateChart())
}, },
methods: { methods: {
handleDashboardClick(path) { handleDashboardClick(path) {

View File

@@ -1,5 +1,8 @@
<template> <template>
<div style="width: 100%; height: 210px;position: relative;"> <div style="width: 100%; height: 210px;position: relative;">
<div style='font-size: 16px;position: absolute;left: 20px;top:10px'>
/
</div>
<div style='font-size: 16px;position: absolute;right: 20px;top:10px'> <div style='font-size: 16px;position: absolute;right: 20px;top:10px'>
<span>完成率:<span style='color: #0B58FF;'>{{detailData.completeRate}}%</span></span> <span>完成率:<span style='color: #0B58FF;'>{{detailData.completeRate}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:detailData.flag>0?'#30B590':'#FF9423'}" >{{detailData.diff}}</span></span> <span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:detailData.flag>0?'#30B590':'#FF9423'}" >{{detailData.diff}}</span></span>