mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

修改集团及基地图表样式

Browse Source
This commit is contained in:
朱菊兰
2026-03-20 16:13:53 +08:00
parent 2465f89d26
commit bb66f97b95
257 changed files with 25365 additions and 6814 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/views/home/grossMarginComponents/monthlyOverview.vue
View File

@@ -19,9 +19,9 @@
<img v-else class="arrow" src="../../../assets/img/downArrow.png" alt="">
</div>
</div>
<div class="electricityGauge">
<!-- <div class="electricityGauge">
<electricityGauge :detailData="monthData" id="month"></electricityGauge>
</div>
</div> -->
</div>
<div class="line" style="padding: 0px;">
<verticalBarChart :detailData="monthData">
@@ -143,33 +143,27 @@ export default {
}
.number {
display: flex;
align-items: center;
gap: 6px;
// width: 190px;
height: 32px;
font-family: YouSheBiaoTiHei;
font-size: 32px;
font-size: 46px;
color: #0B58FF;
line-height: 32px;
letter-spacing: 2px;
text-align: left;
text-align: center;
font-style: normal;
white-space: nowrap;
margin-top: 20px;
}
.mom {
// width: 97px;
height: 18px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 18px;
font-size: 20px;
color: #000000;
line-height: 18px;
letter-spacing: 1px;
text-align: left;
text-align: center;
font-style: normal;
z-index: 1000;
margin-top: 20px;
}
}

20
src/views/home/grossMarginComponents/monthlyRelatedMetrics.vue
View File

@@ -5,8 +5,14 @@
<div class="topItem-container" style="display: flex; gap: 8px; width: 100%;">
<!-- 累计指标1 -->
<div class="dashboard left" @click="handleDashboardClick('/operatingRevenue/operatingRevenueBase')">
<div class="title">
营业收入·万元
<div style='position: relative;'>
<div class="title">
营业收入·万元
</div>
<div style='font-size: 16px;position: absolute;top:-4px;right:15px'>
<span>完成率:<span style='color: #0B58FF;'>{{ytdIncomeData.rate}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:ytdIncomeData.flag>0?'#30B590':'#FF9423'}" >{{ytdIncomeData.diff}}</span></span>
</div>
</div>
<div class="chart-wrap">
<operatingSingleBar :detailData="ytdIncomeData"></operatingSingleBar>
@@ -14,8 +20,14 @@
</div>
<!-- 累计指标2 -->
<div class="dashboard right" @click="handleDashboardClick('/fullCostAnalysis/fullCostAnalysisBase')">
<div class="title">
全成本·元/㎡
<div style='position: relative;'>
<div class="title">
全成本·元/㎡
</div>
<div style='font-size: 16px;position: absolute;top:-4px;right:15px'>
<span>完成率:<span style='color: #0B58FF;'>{{ytdCostData.rate}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:ytdCostData.flag>0?'#30B590':'#FF9423'}" >{{ytdCostData.diff}}</span></span>
</div>
</div>
<div class="chart-wrap">
<operatingSingleBar :detailData="ytdCostData"></operatingSingleBar>

23
src/views/home/grossMarginComponents/operatingBar.vue
View File

@@ -39,7 +39,7 @@
</div>
</div>
<div class="lineBottom" style="height: 100%; width: 100%">
<operatingLineBar :dateData="dateData" :chartData="chartD" style="height: 99%; width: 100%" />
<operatingLineBar :dateData="dateData" :chartData="chartD" style="height: 100%; width: 100%" />
</div>
</div>
</template>
@@ -152,7 +152,7 @@ export default {
name: '预算',
type: 'bar',
yAxisIndex: 0,
barWidth: 14,
barWidth: 40,
itemStyle: {
color: {
type: 'linear',
@@ -172,13 +172,13 @@ export default {
name: '实际',
type: 'bar',
yAxisIndex: 0,
barWidth: 14,
barWidth: 40,
label: {
show: true,
position: 'top',
offset: [30, 0],
width: 68,
height: 20,
offset: [32, 0],
width: 100,
height: 22,
formatter: (params) => {
const diff = data.diff || [];
const flags = data.flags || [];
@@ -212,23 +212,21 @@ export default {
borderRadius: 4,
borderColor: '#BFCBD577',
borderWidth: 0,
lineHeight: 20,
lineHeight: 26,
rich: {
text: {
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646',
fontSize: 11,
lineHeight: 20
fontSize: 14
},
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
fontSize: 14
},
// 未达标样式
unachieved: {
@@ -236,8 +234,7 @@ export default {
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
fontSize: 14
}
}
},

7
src/views/home/grossMarginComponents/operatingLineBarSale.vue
View File

@@ -149,9 +149,10 @@ export default {
},
grid: {
top: 30,
bottom: 30,
right: 70,
left: 60
bottom: 5,
right: 20,
left: 25,
containLabel: true
},
xAxis: [
{

4
src/views/home/grossMarginComponents/operatingLineBarSaleGroup.vue
View File

@@ -1,5 +1,5 @@
<template>
<div ref="cockpitEffChip" id="coreLineChart" style="width: 100%; height: 400px;"></div>
<div ref="cockpitEffChip" id="coreLineChart" style="width: 100%; height: 380px;"></div>
</template>
<script>
import * as echarts from 'echarts';
@@ -85,7 +85,7 @@ export default {
},
grid: {
top: 30,
bottom: 5,
bottom: 20,
right: 10,
left: 25,
containLabel: true

6
src/views/home/grossMarginComponents/operatingLineBarSaleSingle.vue
View File

@@ -84,10 +84,10 @@ export default {
// }
},
grid: {
top: 25,
top: 20,
bottom: 30,
right: 0,
left: 2,
right: 20,
left: 5,
containLabel: true
},
xAxis: [

15
src/views/home/grossMarginComponents/operatingLineChart.vue
View File

@@ -10,17 +10,20 @@
background-color: rgba(249, 252, 255, 1);
flex-direction: column;
">
<div style="
font-weight: 400;
<div style="
padding: 16px 16px 5px 16px;
line-height: 18px;
font-size: 18px;
color: #000000;
line-height: 18px;
letter-spacing: 1px;
font-style: normal;
padding: 16px 0 0 16px;
">
集团情况
</div>
集团情况
</div>
<div style='font-size: 16px;line-height: 16px;text-align: right;padding-right: 16px;'>
<span>完成率:<span style='color: #0B58FF;'>{{chartData.group.rate[0]}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:chartData.group.flags>0?'#30B590':'#FF9423'}" >{{chartData.group.diff[0]}}</span></span>
</div>
<operatingTopBar :chartData="chartData" />
</div>
<div class="right" style="

15
src/views/home/grossMarginComponents/operatingLineChartCumulative.vue
View File

@@ -10,17 +10,20 @@
background-color: rgba(249, 252, 255, 1);
flex-direction: column;
">
<div style="
font-weight: 400;
<div style="
padding: 16px 16px 5px 16px;
line-height: 18px;
font-size: 18px;
color: #000000;
line-height: 18px;
letter-spacing: 1px;
font-style: normal;
padding: 16px 0 0 16px;
">
集团情况
</div>
集团情况
</div>
<div style='font-size: 16px;line-height: 16px;text-align: right;padding-right: 16px;'>
<span>完成率:<span style='color: #0B58FF;'>{{chartData.group.rate[0]}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:chartData.group.flags>0?'#30B590':'#FF9423'}" >{{chartData.group.diff[0]}}</span></span>
</div>
<operatingTopBar :chartData="chartData" />
</div>
<div class="right" style="

123
src/views/home/grossMarginComponents/operatingSingleBar.vue
View File

@@ -35,59 +35,7 @@ export default {
show: true,
position: 'top',
offset: [0, 0],
// 固定label尺寸：68px×20px
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: function (params) {
return `{value|完成率}{rate|${rate}%}`;
},
// 核心样式：匹配CSS需求
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, // 顶部0px位置：阴影最强
// { offset: 0.1, color: 'rgba(205, 215, 224, 0.4)' }, // 1px位置：阴影减弱（对应1px）
// { offset: 0.15, color: 'rgba(205, 215, 224, 0.6)' }, // 3px位置：阴影几乎消失（对应3px扩散）
{ offset: 0.2, color: '#ffffff' }, // 主体白色
{ offset: 1, color: '#ffffff' }
]
},
// 外阴影：0px 2px 2px 0px rgba(191,203,215,0.5)
shadowColor: 'rgba(191,203,215,0.5)',
shadowBlur: 2,
shadowOffsetX: 0,
shadowOffsetY: 2,
// 圆角：4px
borderRadius: 4,
// 移除边框
borderColor: '#BFCBD577',
borderWidth: 0,
// 文字垂直居中（针对富文本）
lineHeight: 20,
rich: {
value: {
// 缩小宽度和内边距，适配68px容器
width: 'auto', // 自动宽度，替代固定40px
padding: [5, 0, 5, 10], // 缩小内边距
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
},
rate: {
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#0B58FF', // 数字蓝色
fontSize: 11,
lineHeight: 20
}
}
fontSize: 14,
},
itemStyle: {
color: {
@@ -109,72 +57,7 @@ export default {
show: true,
position: 'top',
offset: [0, 0],
// 固定label尺寸：68px×20px
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: (params) => {
// const flags = flags || [];
const currentDiff = diff || 0;
const currentFlag = this.detailData?.flag || 0;
// console.log('flags[params.dataIndex]', flags);
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(205, 215, 224, 0.6)' },
{ offset: 0.2, color: '#ffffff' },
{ offset: 1, color: '#ffffff' }
]
},
shadowColor: 'rgba(191,203,215,0.5)',
shadowBlur: 2,
shadowOffsetX: 0,
shadowOffsetY: 2,
borderRadius: 4,
borderColor: '#BFCBD577',
borderWidth: 0,
lineHeight: 20,
rich: {
text: {
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646',
fontSize: 11,
lineHeight: 20
},
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}
}
fontSize: 14,
},
itemStyle: {
borderRadius: [4, 4, 0, 0],
@@ -188,7 +71,7 @@ export default {
series: [
{
type: 'bar',
barWidth: 24,
barWidth: 60,
barCategoryGap: '50%',
data: seriesData,
itemStyle: {

131
src/views/home/grossMarginComponents/operatingTopBar.vue
View File

@@ -73,65 +73,9 @@ export default {
yAxisIndex: 0, // 左侧Y轴（万元）
label: {
show: true,
position: 'top',
offset: [-30, 0],
// 固定label尺寸：68px×20px
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: (params) => {
// const { rate = 0, diff = 0 } = params.data || {};
return `{value|完成率}{rate|${rate}%}`;
},
// formatter: `{value|完成率}{rate|${rate}%}`,
// 核心样式：匹配CSS需求
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, // 顶部0px位置：阴影最强
// { offset: 0.1, color: 'rgba(205, 215, 224, 0.4)' }, // 1px位置：阴影减弱（对应1px）
// { offset: 0.15, color: 'rgba(205, 215, 224, 0.6)' }, // 3px位置：阴影几乎消失（对应3px扩散）
{ offset: 0.2, color: '#ffffff' }, // 主体白色
{ offset: 1, color: '#ffffff' }
]
},
// 外阴影：0px 2px 2px 0px rgba(191,203,215,0.5)
shadowColor: 'rgba(191,203,215,0.5)',
shadowBlur: 2,
shadowOffsetX: 0,
shadowOffsetY: 2,
// 圆角：4px
borderRadius: 4,
// 移除边框
borderColor: '#BFCBD577',
borderWidth: 0,
// 文字垂直居中（针对富文本）
lineHeight: 20,
rich: {
value: {
// 缩小宽度和内边距，适配68px容器
width: 'auto', // 自动宽度，替代固定40px
padding: [5, 0, 5, 10], // 缩小内边距
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
},
rate: {
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#0B58FF', // 数字蓝色
fontSize: 11,
lineHeight: 20
}
}
position: 'top'
},
barWidth: 14,
barWidth: 65,
itemStyle: {
color: {
type: 'linear',
@@ -153,76 +97,9 @@ export default {
yAxisIndex: 0,
label: {
show: true,
position: 'top',
offset: [30, 0],
// 固定label尺寸：68px×20px
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: (params) => {
// const flags = flags || [];
const currentDiff = diff || 0;
const currentFlag = data.flags[0] || 0;
// console.log('flags[params.dataIndex]', flags);
const prefix = currentFlag === 1 ? '+' : '';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(205, 215, 224, 0.6)' },
{ offset: 0.2, color: '#ffffff' },
{ offset: 1, color: '#ffffff' }
]
},
shadowColor: 'rgba(191,203,215,0.5)',
shadowBlur: 2,
shadowOffsetX: 0,
shadowOffsetY: 2,
borderRadius: 4,
borderColor: '#BFCBD577',
borderWidth: 0,
lineHeight: 20,
rich: {
text: {
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646',
fontSize: 11,
lineHeight: 20
},
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}
}
position: 'top'
},
barWidth: 14,
barWidth: 65,
itemStyle: {
color: (params) => {
// 达标状态：1=达标（绿色），0=未达标（橙色）

22
src/views/home/grossMarginComponents/totalOverview.vue
View File

@@ -19,9 +19,9 @@
<img v-else class="arrow" src="../../../assets/img/downArrow.png" alt="">
</div>
</div>
<div class="electricityGauge">
<!-- <div class="electricityGauge">
<electricityGauge :id="'totalG'" :detailData="ytdData" id="totalGauge"></electricityGauge>
</div>
</div> -->
</div>
<div class="line" style="padding: 0px;">
<verticalBarChart :refName="'totalVerticalBarChart'" :detailData="ytdData">
@@ -142,32 +142,26 @@ export default {
}
.number {
display: flex;
align-items: center;
gap: 8px;
// width: 190px;
height: 32px;
font-family: YouSheBiaoTiHei;
font-size: 32px;
font-size: 46px;
color: #0B58FF;
line-height: 32px;
letter-spacing: 2px;
text-align: left;
text-align: center;
font-style: normal;
margin-top: 20px;
}
.mom {
// width: 97px;
height: 18px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 18px;
font-size: 20px;
color: #000000;
line-height: 18px;
letter-spacing: 1px;
text-align: left;
text-align: center;
font-style: normal;
z-index: 1000;
margin-top: 20px;
}
}

159
src/views/home/grossMarginComponents/verticalBarChart.vue
View File

@@ -1,5 +1,11 @@
<template>
<div :ref="refName" id="coreLineChart" style="width: 100%; height: 210px;"></div>
<div style="width: 100%; height: 210px;position: relative;">
<div style='font-size: 16px;position: absolute;right: 20px;top:10px'>
<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>
</div>
<div :ref="refName" id="coreLineChart" style="width: 100%; height: 210px;"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
@@ -8,7 +14,8 @@ export default {
components: {},
data() {
return {
myChart: null // 存储图表实例，避免重复创建
myChart: null, // 存储图表实例，避免重复创建
flag:0
};
},
props: {
@@ -43,18 +50,18 @@ export default {
}
},
methods: {
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
// 其他情况 => 未达标
return 0;
},
updateChart() {
const chartDom = this.$refs[this.refName];
if (!chartDom) {
@@ -70,6 +77,7 @@ getRateFlag(rate, real, target) {
const diff = this.detailData.diff || 0
const rate = this.detailData.rate || 0
const flagValue = this.getRateFlag(this.detailData.rate, this.detailData.real, this.detailData.target) || 0
this.flag = flagValue
const option = {
tooltip: {
@@ -92,10 +100,10 @@ getRateFlag(rate, real, target) {
// }
},
grid: {
top: 10,
bottom: 30,
top: 40,
bottom: 15,
right: 80,
left: 30,
left: 10,
containLabel: true,
show: false // 隐藏grid背景，避免干扰
},
@@ -153,73 +161,7 @@ getRateFlag(rate, real, target) {
label: {
show: true,
position: 'right',
offset: [0, 25],
// 固定label尺寸：68px×20px
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: (params) => {
// const flags = flags || [];
const currentDiff = diff || 0;
const currentFlag = flagValue || 0;
// console.log('flags[params.dataIndex]', flags);
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(205, 215, 224, 0.6)' },
{ offset: 0.2, color: '#ffffff' },
{ offset: 1, color: '#ffffff' }
]
},
shadowColor: 'rgba(191,203,215,0.5)',
shadowBlur: 2,
shadowOffsetX: 0,
shadowOffsetY: 2,
borderRadius: 4,
borderColor: '#BFCBD577',
borderWidth: 0,
lineHeight: 20,
rich: {
text: {
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646',
fontSize: 11,
lineHeight: 20
},
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}
}
fontSize: 14
},
itemStyle: {
color: flagValue === 1
@@ -246,60 +188,7 @@ getRateFlag(rate, real, target) {
label: {
show: true,
position: 'right',
offset: [0, 25],
// 固定label尺寸：68px×20px
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: function (params) {
return `{value|完成率}{rate|${rate}%}`;
},
// 核心样式：匹配CSS需求
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, // 顶部0px位置：阴影最强
// { offset: 0.1, color: 'rgba(205, 215, 224, 0.4)' }, // 1px位置：阴影减弱（对应1px）
// { offset: 0.15, color: 'rgba(205, 215, 224, 0.6)' }, // 3px位置：阴影几乎消失（对应3px扩散）
{ offset: 0.2, color: '#ffffff' }, // 主体白色
{ offset: 1, color: '#ffffff' }
]
},
// 外阴影：0px 2px 2px 0px rgba(191,203,215,0.5)
shadowColor: 'rgba(191,203,215,0.5)',
shadowBlur: 2,
shadowOffsetX: 0,
shadowOffsetY: 2,
// 圆角：4px
borderRadius: 4,
// 移除边框
borderColor: '#BFCBD577',
borderWidth: 0,
// 文字垂直居中（针对富文本）
lineHeight: 20,
rich: {
value: {
// 缩小宽度和内边距，适配68px容器
width: 'auto', // 自动宽度，替代固定40px
padding: [5, 0, 5, 10], // 缩小内边距
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
},
rate: {
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#0B58FF', // 数字蓝色
fontSize: 11,
lineHeight: 20
}
}
fontSize: 14
},
itemStyle: {
// 预算的渐变颜色（蓝系渐变）

20
src/views/home/grossMarginComponents/yearRelatedMetrics.vue
View File

@@ -5,8 +5,14 @@
<div class="topItem-container" style="display: flex; gap: 8px; width: 100%;">
<!-- 收入模块（传递整合了flag的incomeData） -->
<div class="dashboard left" @click="handleDashboardClick('/operatingRevenue/operatingRevenueBase')">
<div class="title">
营业收入·万元
<div style='position: relative;'>
<div class="title">
营业收入·万元
</div>
<div style='font-size: 16px;position: absolute;top:-4px;right:15px'>
<span>完成率:<span style='color: #0B58FF;'>{{incomeData.rate}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:incomeData.flag>0?'#30B590':'#FF9423'}" >{{incomeData.diff}}</span></span>
</div>
</div>
<div class="chart-wrap">
<operatingSingleBar :detailData="incomeData"></operatingSingleBar>
@@ -14,8 +20,14 @@
</div>
<!-- 全成本模块（传递整合了flag的totalCostData） -->
<div class="dashboard right" @click="handleDashboardClick('/fullCostAnalysis/fullCostAnalysisBase')">
<div class="title">
全成本·元/㎡
<div style='position: relative;'>
<div class="title">
全成本·元/㎡
</div>
<div style='font-size: 16px;position: absolute;top:-4px;right:15px'>
<span>完成率:<span style='color: #0B58FF;'>{{totalCostData.rate}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:totalCostData.flag>0?'#30B590':'#FF9423'}" >{{totalCostData.diff}}</span></span>
</div>
</div>
<div class="chart-wrap">
<operatingSingleBar :detailData="totalCostData"></operatingSingleBar>