月度概览加单位
This commit is contained in:
@@ -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);
|
||||||
|
|||||||
@@ -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',
|
||||||
|
|||||||
@@ -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)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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,
|
||||||
//
|
//
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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;">
|
||||||
|
|||||||
@@ -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;">
|
||||||
|
|||||||
@@ -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;">
|
||||||
|
|||||||
@@ -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;">
|
||||||
|
|||||||
@@ -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;">
|
||||||
|
|||||||
@@ -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;">
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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;">
|
||||||
|
|||||||
@@ -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;">
|
||||||
|
|||||||
@@ -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;">
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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;">
|
||||||
|
|||||||
@@ -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;">
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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;">
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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;">
|
||||||
|
|||||||
@@ -63,7 +63,7 @@ export default {
|
|||||||
selectedProfit: '原片成本', // 选中的名称,初始为null
|
selectedProfit: '原片成本', // 选中的名称,初始为null
|
||||||
profitOptions: [
|
profitOptions: [
|
||||||
'原片成本',
|
'原片成本',
|
||||||
'原料成本',
|
'原片原料成本',
|
||||||
'燃料成本',
|
'燃料成本',
|
||||||
'电成本',
|
'电成本',
|
||||||
'人工成本',
|
'人工成本',
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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() {
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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() {
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user