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

达标函数删除，图表label置于最顶层

Browse Source
This commit is contained in:
朱菊兰
2026-04-14 10:17:38 +08:00
parent 0d74e762ce
commit 7135ab0e4b
208 changed files with 3567 additions and 12787 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/views/home/electricityCostAnalysisComponents/dataTrend.vue
View File

@@ -30,11 +30,8 @@ export default {
},
},
data() {
return {
// 移除：原 chartData 定义，改为计算属性
};
return {};
},
// 移除：原 watch 监听配置，计算属性自动响应 trendData 变化
computed: {
/**
* chartData 计算属性：自动响应 trendData 变化，格式化并提取各字段数组
@@ -58,7 +55,7 @@ export default {
diffValueArr.push(item.diff ?? 0);
targetValueArr.push(item.budget ?? 0);
proportionArr.push(item.rate ?? 0);
completedArr.push(item.rate && item.rate>=100 ? 1 : 0);
completedArr.push(item.rate>=100 ? 1 : 0);
});
// 组装并返回格式化后的数据（结构与原一致）

144
src/views/home/electricityCostAnalysisComponents/dataTrendBar.vue
View File

@@ -143,74 +143,7 @@ export default {
yAxisIndex: 0,
barWidth: 14,
label: {
show: true,
position: 'top',
offset: [0, 0],
// 固定label尺寸：68px×20px
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: (params) => {
const diff = data.diffValue || [];
const flags = data.completed || [];
const currentDiff = diff[params.dataIndex] || 0;
const currentFlag = flags[params.dataIndex] || 0;
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
}
}
show: false
},
itemStyle: {
color: (params) => {
@@ -239,6 +172,81 @@ export default {
borderWidth: 0
},
data: data.value || [] // 实际销量（万元）
},
// 4. 实际差值标签（独立scatter系列，zlevel=1确保标签在最上层）
{
name: '__实际差值标签',
type: 'scatter',
yAxisIndex: 0,
zlevel: 1,
symbolSize: 0,
tooltip: {
show: false
},
data: (data.value || []).map((value, index) => ({
value: value,
label: {
show: true,
position: 'top',
offset: [0, 0],
width: 68,
height: 20,
formatter: () => {
const diff = data.diffValue || [];
const flags = data.completed || [];
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: 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',
fontSize: 11,
lineHeight: 20
},
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A',
fontSize: 11,
lineHeight: 20
}
}
}
}))
}
]
};

10
src/views/home/electricityCostAnalysisComponents/monthlyOverview.vue
View File

@@ -17,9 +17,6 @@
<img v-else class="arrow" src="../../../assets/img/downArrow.png" alt="下降">
</div>
</div>
<!-- <div class="electricityGauge">
<electricityGauge id="month" :detailData="factoryData"></electricityGauge>
</div> -->
</div>
<div class="line" style="padding: 0px;">
<!-- 传递包含flag的factoryData给柱状图组件 -->
@@ -84,12 +81,7 @@ export default {
return 0;
}
return value;
},
/**
* 判断完成率对应的flag值（<100为0，≥100为1）
* @param {number} rate 完成率（原始值，如89代表89%）
* @returns {0|1} flag值
*/
}
}
}
</script>

136
src/views/home/electricityCostAnalysisComponents/operatingBar.vue
View File

@@ -175,69 +175,7 @@ export default {
yAxisIndex: 0,
barWidth: 40,
label: {
show: true,
position: 'top',
offset: [32, 0],
width: 100,
height: 22,
formatter: (params) => {
const diff = data.diff || [];
const flags = data.flags || [];
const currentDiff = diff[params.dataIndex] || 0;
const currentFlag = flags[params.dataIndex] || 0;
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: 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', // 与达标的 offset: 1 颜色一致
fontSize: 14
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 14
}
}
show: false
},
itemStyle: {
color: (params) => {
@@ -265,6 +203,78 @@ 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
}
}
}
}))
}
]
};

19
src/views/home/electricityCostAnalysisComponents/operatingLineChart.vue
View File

@@ -101,21 +101,6 @@ export default {
},
},
methods: {
/**
* 核心方法：按levelId匹配地名生成locations
*/
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
// if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
processChartData() {
// 初始化空数据结构
const initTopBarData = {
@@ -132,7 +117,7 @@ export default {
topBarData.targets.push(level1Data.target || 0);
topBarData.reals.push(level1Data.real || 0);
topBarData.rate.push(level1Data.rate || 0);
topBarData.flags.push(this.getRateFlag(level1Data.rate, level1Data.real, level1Data.target));
topBarData.flags.push(level1Data.rate >= 100 ? 1 : 0);
// 2. 处理levelId≠1的整合数据（核心：levelId匹配地名）
const barData = { ...initBarData };
// 筛选有效数据：levelId≠1 且 levelId在baseIndexToNameMap中
@@ -145,7 +130,7 @@ export default {
barData.targets.push(item.target || 0);
barData.reals.push(item.real || 0);
barData.rate.push(item.rate || 0);
barData.flags.push(this.getRateFlag(item.rate, item.real, item.target));
barData.flags.push(item.rate >= 100 ? 1 : 0);
});
// 3. 更新chartData

19
src/views/home/electricityCostAnalysisComponents/operatingLineChartCumulative.vue
View File

@@ -101,21 +101,6 @@ export default {
},
},
methods: {
/**
* 核心方法：按levelId匹配地名生成locations
*/
getRateFlag(rate, real, budget) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
// if (rate === 0 && budget === 0) return 1;
// 其他情况 => 未达标
return 0;
},
processChartData() {
// 初始化空数据结构
const initTopBarData = {
@@ -132,7 +117,7 @@ export default {
topBarData.targets.push(level1Data.target || 0);
topBarData.reals.push(level1Data.real || 0);
topBarData.rate.push(level1Data.rate || 0);
topBarData.flags.push(this.getRateFlag(level1Data.rate, level1Data.real, level1Data.target));
topBarData.flags.push(level1Data.rate >= 100 ? 1 : 0);
// 2. 处理levelId≠1的整合数据（核心：levelId匹配地名）
const barData = { ...initBarData };
@@ -146,7 +131,7 @@ export default {
barData.targets.push(item.budget || 0);
barData.reals.push(item.real || 0);
barData.rate.push(item.rate || 0);
barData.flags.push(this.getRateFlag(item.rate, item.real, item.budget));
barData.flags.push(item.rate >= 100 ? 1 : 0);
});
// 3. 更新chartData

3
src/views/home/electricityCostAnalysisComponents/relatedIndicatorsAnalysis.vue
View File

@@ -28,9 +28,6 @@
import Container from '../components/container.vue'
import operatingSingleBar from './operatingSingleBar.vue'
// import * as echarts from 'echarts'
// import rawItem from './raw-Item.vue'
export default {
name: 'ProductionStatus',
components: { Container, operatingSingleBar },

13
src/views/home/electricityCostAnalysisComponents/totalOverview.vue
View File

@@ -19,9 +19,6 @@
<img v-else class="arrow" src="../../../assets/img/downArrow.png" alt="下降">
</div>
</div>
<!-- <div class="electricityGauge">
<electricityGauge id="year" :detailData="factoryData"></electricityGauge>
</div> -->
</div>
<div class="line" style="padding: 0px;">
<!-- 传递包含flag的factoryData给柱状图组件 -->
@@ -37,9 +34,6 @@ import Container from './container.vue'
import electricityGauge from './electricityGauge.vue'
import verticalBarChart from './verticalBarChart.vue'
// import * as echarts from 'echarts'
// import rawItem from './raw-Item.vue'
export default {
name: 'ProductionStatus',
components: { Container, electricityGauge, verticalBarChart },
@@ -87,12 +81,7 @@ export default {
return 0;
}
return value;
},
/**
* 判断完成率对应的flag值（<100为0，≥100为1）
* @param {number} rate 完成率（原始值，如89代表89%）
* @returns {0|1} flag值
*/
}
}
}
</script>