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

bug修改

Browse Source
This commit is contained in:
朱菊兰
2026-04-14 15:27:06 +08:00
parent 446078f558
commit d8abdfbfec
14 changed files with 49 additions and 351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
src/views/home/depreciationAnalysisComponents/operatingBar.vue
View File

@@ -46,7 +46,6 @@
<script>
import operatingLineBar from './operatingLineBarSale.vue';
import * as echarts from 'echarts';
export default {
name: "Container",
@@ -62,8 +61,6 @@ export default {
profitOptions: [
{ label: '实际值：高~低', value: 1 },
{ label: '实际值：低~高', value: 2 },
{ label: '完成率：高~低', value: 3 },
{ label: '完成率：低~高', value: 4 },
]
};
},
@@ -95,12 +92,6 @@ export default {
case 2: // 实际值：低~高
dataWithIndex.sort((a, b) => a.real - b.real);
break;
case 3: // 预算值：高~低
dataWithIndex.sort((a, b) => b.rate - a.rate);
break;
case 4: // 预算值：低~高
dataWithIndex.sort((a, b) => a.rate - b.rate);
break;
default:
return factory;
}
@@ -123,58 +114,15 @@ export default {
const data = this.currentDataSource;
const salesData = {
allPlaceNames: this.locations,
series: [
// 完成率（折线图）
{
name: '完成率',
type: 'line',
yAxisIndex: 1,
lineStyle: { color: 'rgba(40, 138, 255, .5)', width: 2 },
itemStyle: {
color: 'rgba(40, 138, 255, 1)',
borderColor: 'rgba(40, 138, 255, 1)',
borderWidth: 2,
radius: 4
},
areaStyle: {
opacity: 0.2,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(40, 138, 255, .9)' },
{ offset: 1, color: 'rgba(40, 138, 255, 0)' }
])
},
data: data.rates || [],
symbol: 'circle',
symbolSize: 6
},
// 目标（柱状图）
{
name: '预算',
type: 'bar',
yAxisIndex: 0,
barWidth: 40,
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(130, 204, 255, 1)' },
{ offset: 1, color: 'rgba(75, 157, 255, 1)' }
]
},
borderRadius: [4, 4, 0, 0],
borderWidth: 0
},
data: data.targets || []
},
// 实际（柱状图）
series: [
{
name: '实际',
type: 'bar',
yAxisIndex: 0,
barWidth: 40,
label: {
show: false
show: true,
position: 'top'
},
itemStyle: {
color: (params) => {
@@ -202,78 +150,6 @@ export default {
borderWidth: 0
},
data: data.reals || []
},
// 实际差值标签（独立scatter系列，zlevel=1确保标签在最上层）
{
name: '__实际差值标签',
type: 'scatter',
yAxisIndex: 0,
zlevel: 1,
symbolSize: 0,
tooltip: {
show: false
},
data: (data.reals || []).map((value, index) => ({
value: value,
label: {
show: true,
position: 'top',
offset: [32, 0],
width: 100,
height: 22,
formatter: () => {
const diff = data.diff || [];
const flags = data.flags || [];
const currentDiff = diff[index] || 0;
const currentFlag = flags[index] || 0;
if (currentFlag === 1) {
return `{achieved|${currentDiff}}{text|差值}`;
} else {
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: 26,
rich: {
text: {
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646',
fontSize: 14,
},
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#76DABE',
fontSize: 14,
},
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A',
fontSize: 14,
}
}
}
}))
}
]
};

39
src/views/home/depreciationAnalysisComponents/operatingLineBarSale.vue
View File

@@ -145,11 +145,6 @@ export default {
fontSize: 12,
interval: 0,
padding: [5, 0, 0, 0],
// 可选：X轴标签显示“序号+名称”（如“1 宜兴”）
// formatter: (value) => {
// const index = this.baseNameToIndexMap[value] || '';
// return index ? `${index} ${value}` : value;
// }
},
data: xData
}
@@ -173,23 +168,23 @@ export default {
splitLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
axisLine: { show: true, show: true, lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } }
},
{
type: 'value',
nameTextStyle: {
color: 'rgba(0, 0, 0, 0.45)',
fontSize: 12,
align: 'left'
},
axisTick: { show: false },
axisLabel: {
color: 'rgba(0, 0, 0, 0.45)',
fontSize: 12,
formatter: '{value}%'
},
splitLine: { show: false },
axisLine: { show: true, show: true, lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
splitNumber: 4
}
// {
// type: 'value',
// nameTextStyle: {
// color: 'rgba(0, 0, 0, 0.45)',
// fontSize: 12,
// align: 'left'
// },
// axisTick: { show: false },
// axisLabel: {
// color: 'rgba(0, 0, 0, 0.45)',
// fontSize: 12,
// formatter: '{value}%'
// },
// splitLine: { show: false },
// axisLine: { show: true, show: true, lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
// splitNumber: 4
// }
],
series: chartSeries
};

16
src/views/home/depreciationAnalysisComponents/operatingLineBarSaleGroup.vue
View File

@@ -17,10 +17,6 @@ export default {
type: Object,
default: () => ({
}),
// 校验数据格式
// validator: (value) => {
// return Array.isArray(value.series) && Array.isArray(value.allPlaceNames);
// }
}
},
mounted() {
@@ -72,20 +68,10 @@ export default {
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: {
top: 30,
bottom:20,
bottom:5,
right: 10,
left: 25,
containLabel: true

4
src/views/home/depreciationAnalysisComponents/operatingLineChart.vue
View File

@@ -20,10 +20,6 @@
">
集团情况
</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="

4
src/views/home/depreciationAnalysisComponents/operatingLineChartCumulative.vue
View File

@@ -20,10 +20,6 @@
">
集团情况
</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="

107
src/views/home/depreciationAnalysisComponents/operatingTopBar.vue
View File

@@ -8,7 +8,6 @@
<script>
import operatingLineBar from './operatingLineBarSaleGroup.vue';
import * as echarts from 'echarts';
export default {
name: "Container",
@@ -40,30 +39,6 @@ export default {
const salesData = {
allPlaceNames: this.locations,
series: [
{
name: '预算',
type: 'bar',
yAxisIndex: 0, // 左侧Y轴（万元）
label: {
show: true,
position: 'top'
},
barWidth: 65,
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(130, 204, 255, 1)' },
{ offset: 1, color: 'rgba(75, 157, 255, 1)' }
]
},
borderRadius: [4, 4, 0, 0],
borderWidth: 0
},
data: data.targets // 目标销量（万元）
},
// 3. 实际（柱状图，含达标状态）
{
name: '实际',
type: 'bar',
@@ -104,88 +79,6 @@ export default {
]
};
// 毛利率场景数据
const grossProfitData = {
series: [
// 1. 完成率（折线图）
{
name: '完成率',
type: 'line',
yAxisIndex: 1,
lineStyle: { color: 'rgba(40, 138, 255, .5)', width: 2 },
itemStyle: {
color: 'rgba(40, 138, 255, 1)',
borderColor: 'rgba(40, 138, 255, 1)',
borderWidth: 2,
radius: 4
},
areaStyle: {
opacity: 0.2,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(40, 138, 255, .9)' },
{ offset: 1, color: 'rgba(40, 138, 255, 0)' }
])
},
data: [106.7, 96.9, 106.5, 106.1, 93.8, 105.9], // 毛利率完成率（%）
symbol: 'circle',
symbolSize: 6
},
// 2. 目标（柱状图）
{
name: '预算',
type: 'bar',
yAxisIndex: 0,
barWidth: 65,
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(130, 204, 255, 1)' },
{ offset: 1, color: 'rgba(75, 157, 255, 1)' }
]
},
borderRadius: [4, 4, 0, 0],
borderWidth: 0
},
data: [30, 32, 31, 33, 32, 34] // 目标毛利率（万元）
},
// 3. 实际（柱状图）
{
name: '实际',
type: 'bar',
yAxisIndex: 0,
barWidth: 65,
itemStyle: {
color: (params) => {
const safeFlag = [1, 0, 1, 1, 0, 1]; // 达标状态
const currentFlag = safeFlag[params.dataIndex] || 0;
return currentFlag === 1
? {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(174, 239, 224, 1)' },
{ offset: 1, color: 'rgba(118, 218, 190, 1)' }
]
}
: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(253, 209, 129, 1)' },
{ offset: 1, color: 'rgba(249, 164, 74, 1)' }
]
};
},
borderRadius: [4, 4, 0, 0],
borderWidth: 0
},
data: [32, 31, 33, 35, 30, 36] // 实际毛利率（万元）
}
]
};
// 根据按钮状态返回对应数据
return this.activeButton === 0 ? salesData : grossProfitData;
}

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

@@ -9,10 +9,10 @@
<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 style='font-size: 16px;text-align: right;padding-right: 5px;'>
<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 class="chart-wrap">
<operatingSingleBar :detailData="ytdIncomeData"></operatingSingleBar>
@@ -24,11 +24,11 @@
<div class="title">
全成本·元/㎡
</div>
<div style='font-size: 16px;position: absolute;top:-4px;right:15px'>
</div>
<div style='font-size: 16px;text-align: right;padding-right: 5px;'>
<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>
</div>
@@ -165,12 +165,11 @@ export default {
line-height: 18px;
letter-spacing: 2px;
text-align: left;
margin-bottom: 12px;
}
.chart-wrap {
width: 100%;
height: calc(100% - 30px);
height: calc(100% - 42px);
}
.number {

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

@@ -1,5 +1,5 @@
<template>
<div ref="cockpitEffChip" id="coreLineChart" style="width: 100%; height: 200px;"></div>
<div ref="cockpitEffChip" id="coreLineChart" style="width: 100%; height: 100%;"></div>
</template>
<script>
import * as echarts from 'echarts';
@@ -66,26 +66,10 @@ export default {
const option = {
tooltip: {
trigger: 'axis',
// axisPointer: {
// type: 'cross',
// label: {
// 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: {
top: 20,
bottom: 30,
bottom: 10,
right: 20,
left: 5,
containLabel: true

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

@@ -1,5 +1,5 @@
<template>
<div class="lineBottom" style="height: 180px; width: 100%">
<div class="lineBottom" style="height: 147px; width: 100%">
<operatingLineBarSaleSingle :refName="'totalOperating'" :chartData="chartD" style="height: 99%; width: 100%" />
</div>
</template>

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

@@ -9,11 +9,11 @@
<div class="title">
营业收入·万元
</div>
<div style='font-size: 16px;position: absolute;top:-4px;right:15px'>
</div>
<div style='font-size: 16px;text-align: right;padding-right: 5px;'>
<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>
</div>
@@ -24,11 +24,11 @@
<div class="title">
全成本·元/㎡
</div>
<div style='font-size: 16px;position: absolute;top:-4px;right:15px'>
</div>
<div style='font-size: 16px;text-align: right;padding-right: 5px;'>
<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>
</div>
@@ -168,13 +168,12 @@ export default {
line-height: 18px;
letter-spacing: 2px;
text-align: left;
margin-bottom: 12px; // 标题与图表间距
}
// 图表容器：控制尺寸，确保子组件渲染空间
.chart-wrap {
width: 100%;
height: calc(100% - 30px); // 扣除标题高度
height: calc(100% - 42px); // 扣除标题高度
}
.number {

11
src/views/home/operatingComponents/monthlyRelatedMetrics.vue
View File

@@ -9,11 +9,11 @@
<div class="title">
销量·万㎡
</div>
<div style='font-size: 16px;position: absolute;top:-4px;right:15px'>
</div>
<div style='font-size: 16px;text-align: right;padding-right: 5px;'>
<span>完成率:<span style='color: #0B58FF;'>{{salesData.rate}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:salesData.flag>0?'#30B590':'#FF9423'}" >{{salesData.diff}}</span></span>
</div>
</div>
<div class="chart-wrap">
<operatingSingleBar :detailData="salesData"></operatingSingleBar>
</div>
@@ -24,11 +24,11 @@
<div class="title">
单价·元/㎡
</div>
<div style='font-size: 16px;position: absolute;top:-4px;right:15px'>
</div>
<div style='font-size: 16px;text-align: right;padding-right: 5px;'>
<span>完成率:<span style='color: #0B58FF;'>{{unitPriceData.rate}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:unitPriceData.flag>0?'#30B590':'#FF9423'}" >{{unitPriceData.diff}}</span></span>
</div>
</div>
<div class="chart-wrap">
<operatingSingleBar :detailData="unitPriceData"></operatingSingleBar>
</div>
@@ -163,12 +163,11 @@ export default {
line-height: 18px;
letter-spacing: 2px;
text-align: left;
margin-bottom: 12px;
}
.chart-wrap {
width: 100%;
height: calc(100% - 30px);
height: calc(100% - 42px);
}
.number {

28
src/views/home/operatingComponents/operatingLineBarSaleSingle.vue
View File

@@ -1,5 +1,5 @@
<template>
<div :ref="refName" id="coreLineChart" style="width: 100%; height: 200px;"></div>
<div :ref="refName" id="coreLineChart" style="width: 100%; height: 100%;"></div>
</template>
<script>
import * as echarts from 'echarts';
@@ -16,19 +16,11 @@ export default {
refName: {
type: String,
default: () => 'cockpitEffChip',
// 校验数据格式
// validator: (value) => {
// return Array.isArray(value.series) && Array.isArray(value.allPlaceNames);
// }
},
chartData: {
type: Object,
default: () => ({
}),
// 校验数据格式
// validator: (value) => {
// return Array.isArray(value.series) && Array.isArray(value.allPlaceNames);
// }
}
},
mounted() {
@@ -74,26 +66,10 @@ export default {
const option = {
tooltip: {
trigger: 'axis',
// axisPointer: {
// type: 'cross',
// label: {
// 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: {
top: 20,
bottom: 30,
bottom: 10,
right: 20,
left: 5,
containLabel: true

2
src/views/home/operatingComponents/operatingSingleBar.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="lineBottom" style="height: 180px; width: 100%">
<div class="lineBottom" style="height: 147px; width: 100%">
<operatingLineBarSaleSingle :refName=" 'totalOperating' " :chartData="chartD" style="height: 99%; width: 100%" />
</div>
</template>

11
src/views/home/operatingComponents/yearRelatedMetrics.vue
View File

@@ -9,11 +9,11 @@
<div class="title">
销量·万㎡
</div>
<div style='font-size: 16px;position: absolute;top:-4px;right:15px'>
</div>
<div style='font-size: 16px;text-align: right;padding-right: 5px;'>
<span>完成率:<span style='color: #0B58FF;'>{{salesData.rate}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:salesData.flag>0?'#30B590':'#FF9423'}" >{{salesData.diff}}</span></span>
</div>
</div>
<div class="chart-wrap">
<operatingSingleBar :detailData="salesData"></operatingSingleBar>
</div>
@@ -24,11 +24,11 @@
<div class="title">
单价·元/㎡
</div>
<div style='font-size: 16px;position: absolute;top:-4px;right:15px'>
</div>
<div style='font-size: 16px;text-align: right;padding-right: 5px;'>
<span>完成率:<span style='color: #0B58FF;'>{{unitPriceData.rate}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:unitPriceData.flag>0?'#30B590':'#FF9423'}" >{{unitPriceData.diff}}</span></span>
</div>
</div>
<div class="chart-wrap">
<operatingSingleBar :detailData="unitPriceData"></operatingSingleBar>
</div>
@@ -158,12 +158,11 @@ export default {
line-height: 18px;
letter-spacing: 2px;
text-align: left;
margin-bottom: 12px;
}
.chart-wrap {
width: 100%;
height: calc(100% - 30px);
height: calc(100% - 42px);
}
.number {