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

xiugai

Browse Source
This commit is contained in:
‘937886381’
2026-01-06 13:48:11 +08:00
parent 20ef2b9763
commit 5605eeab06
287 changed files with 1890 additions and 1381 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/views/home/rawSheetYieldComponents/dataTrend.vue
View File

@@ -76,9 +76,9 @@ export default {
*/
processTrendData(trendData) {
// 数据兜底：确保是数组且长度为12
const validTrend = Array.isArray(trendData) && trendData.length === 12
const validTrend = Array.isArray(trendData)
? trendData
: this.$props.trend.default();
:[]
// 初始化空数组
const months = [];
@@ -129,10 +129,8 @@ export default {
*/
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 原始rate若为小数（如0.8 → 80%，1.1 → 110%），则*100后判断
const ratePercent = rate;
return ratePercent >= 100 ? 1 : 0;
}
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
},
};
</script>

13
src/views/home/rawSheetYieldComponents/dataTrendBar.vue
View File

@@ -2,9 +2,6 @@
<div class="coreBar">
<!-- 新增行容器：包裹“各基地情况”和barTop -->
<div class="header-row">
<div class="base-title">
各基地情况
</div>
<div class="barTop">
<!-- 关键：新增右侧容器，包裹图例和按钮组，实现整体靠右 -->
<div class="right-container">
@@ -260,11 +257,11 @@ export default {
// 新增：头部行容器，实现一行排列
.header-row {
display: flex;
justify-content: space-between; // 左右两端对齐
align-items: center; // 垂直居中
width: 100%;
margin-bottom: 8px; // 与下方图表区保留间距（可根据需求调整）
display: flex;
justify-content: flex-end; // 左右两端对齐
align-items: center; // 垂直居中
// width: 100%;
margin-bottom: 8px; // 与下方图表区保留间距（可根据需求调整））
}
// 各基地情况标题样式

4
src/views/home/rawSheetYieldComponents/monthlyRelatedMetrics.vue
View File

@@ -6,7 +6,7 @@
<!-- 原片产量模块（传递整合了flag的yieldData） -->
<div class="dashboard left">
<div class="title">
原片产量·单位/万元
原片产量·吨
</div>
<div class="chart-wrap">
<operatingSingleBar :detailData="yieldData"></operatingSingleBar>
@@ -15,7 +15,7 @@
<!-- 拉引量模块（传递整合了flag的pullData） -->
<div class="dashboard right">
<div class="title">
拉引量·单位/万元
拉引量·吨
</div>
<div class="chart-wrap">
<operatingSingleBar :detailData="pullData"></operatingSingleBar>

4
src/views/home/rawSheetYieldComponents/operatingBar.vue
View File

@@ -39,7 +39,7 @@
</div>
</div>
<div class="lineBottom" style="height: 100%; width: 100%">
<operatingLineBar :chartData="chartD" style="height: 99%; width: 100%" />
<operatingLineBar :dateData="dateData" :chartData="chartD" style="height: 99%; width: 100%" />
</div>
</div>
</template>
@@ -51,7 +51,7 @@ import * as echarts from 'echarts';
export default {
name: "Container",
components: { operatingLineBar },
props: ["chartData"],
props: ["chartData",'dateData'],
emits: ['sort-change'], // 声明事件（Vue3 推荐）
data() {
return {

2
src/views/home/rawSheetYieldComponents/operatingBottomLineBar.vue
View File

@@ -120,7 +120,7 @@ export default {
},
// min: 0,
// max: (value) => Math.ceil((value.max || 0) * 1.1),
scale: true,
axisTick: { show: false },
axisLabel: {
color: 'rgba(0, 0, 0, 0.45)',

2
src/views/home/rawSheetYieldComponents/operatingLineBar.vue
View File

@@ -117,7 +117,7 @@ export default {
fontSize: 12,
align: 'right'
},
scale: true,
splitNumber: 4,
axisTick: { show: false },
axisLabel: {

15
src/views/home/rawSheetYieldComponents/operatingLineBarSale.vue
View File

@@ -28,6 +28,10 @@ export default {
chartData: {
type: Object,
default: () => ({}),
},
dateData: {
type: Object,
default: () => ({}),
}
},
mounted() {
@@ -44,7 +48,7 @@ export default {
},
deep: true,
immediate: true
}
},
},
beforeDestroy() {
// 组件销毁时清理资源
@@ -80,7 +84,8 @@ export default {
path: 'rawSheetYieldBase',
query: { // 使用query传递参数（推荐），也可使用params
// baseName: itemName,
factory: baseIndex
factory: baseIndex,
dateData: this.dateData
}
// 若仍需用base作为参数：
// base: itemName,
@@ -116,11 +121,11 @@ export default {
}
}
},
grid: {
grid: {
top: 30,
bottom: 30,
right: 70,
left: 40
left: 60
},
xAxis: [
{
@@ -154,7 +159,7 @@ export default {
fontSize: 12,
align: 'right'
},
scale: true,
splitNumber: 4,
axisTick: { show: false },
axisLabel: {

84
src/views/home/rawSheetYieldComponents/operatingLineBarSaleGroup.vue
View File

@@ -1,5 +1,5 @@
<template>
<div ref="cockpitEffChip" id="coreLineChart" style="width: 100%; height: 400px;"></div>
<div :ref="chartRef " id="coreLineChart" style="width: 100%; height: 400px;"></div>
</template>
<script>
import * as echarts from 'echarts';
@@ -21,6 +21,10 @@ export default {
// validator: (value) => {
// return Array.isArray(value.series) && Array.isArray(value.allPlaceNames);
// }
},
chartRef: {
type: String,
default: () => 'cockpitEffChip',
}
},
mounted() {
@@ -34,7 +38,7 @@ export default {
// 深度监听数据变化，仅更新图表配置（不销毁实例）
chartData: {
handler() {
console.log(this.chartData,'chartData');
console.log(this.chartData, 'chartData');
this.updateChart();
},
deep: true,
@@ -43,7 +47,7 @@ export default {
},
methods: {
updateChart() {
const chartDom = this.$refs.cockpitEffChip;
const chartDom = this.$refs[this.chartRef];
if (!chartDom) {
console.error('图表容器未找到！');
return;
@@ -72,18 +76,8 @@ 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: {
grid: {
top: 30,
bottom: 30,
right: 20,
@@ -92,7 +86,7 @@ export default {
xAxis: [
{
type: 'category',
boundaryGap: true,
// boundaryGap: true,
axisTick: { show: false },
axisLine: {
show: true,
@@ -107,49 +101,25 @@ export default {
data: xData
}
],
yAxis: [
// 左侧Y轴：营业收入、成本（单位万元）
{
type: 'value',
name: '万元',
nameTextStyle: {
color: 'rgba(0, 0, 0, 0.45)',
fontSize: 12,
align: 'right'
},
scale: true,
splitNumber: 4,
axisTick: { show: false },
axisLabel: {
color: 'rgba(0, 0, 0, 0.45)',
fontSize: 12,
formatter: '{value}'
},
splitLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
axisLine: { show: true, lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
yAxis: {
type: 'value',
name: '万元',
nameTextStyle: {
color: 'rgba(0, 0, 0, 0.45)',
fontSize: 12,
align: 'right'
},
// 右侧Y轴：利润占比（百分比）
{
type: 'value',
nameTextStyle: {
color: 'rgba(0, 0, 0, 0.45)',
fontSize: 12,
align: 'left'
},
// min: 0,
// max: 100,
axisTick: { show: false },
axisLabel: {
color: 'rgba(0, 0, 0, 0.45)',
fontSize: 12,
formatter: '{value}%'
},
splitLine: { show: false },
axisLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
// scale: true,
splitNumber: 4,
}
],
//
splitNumber: 4,
axisTick: { show: false },
axisLabel: {
color: 'rgba(0, 0, 0, 0.45)',
fontSize: 12,
formatter: '{value}'
},
splitLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
axisLine: { show: true, lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
},
series: chartSeries // 直接使用父组件传递的 series
};

10
src/views/home/rawSheetYieldComponents/operatingLineBarSaleSingle.vue
View File

@@ -84,10 +84,10 @@ export default {
// }
},
grid: {
top: 40,
bottom: 40,
right: 70,
left: 60,
top: 30,
bottom: 60,
right: 30,
left: 50,
},
xAxis: [
{
@@ -123,7 +123,7 @@ export default {
type: 'solid' // 实线（可选：dashed虚线、dotted点线）
}
},
scale: true,
splitNumber: 2,
axisTick: { show: false },
axisLabel: {

10
src/views/home/rawSheetYieldComponents/operatingLineChart.vue
View File

@@ -30,7 +30,7 @@
background-color: rgba(249, 252, 255, 1);
">
<!-- <top-item /> -->
<operatingBar :chartData="chartData" @sort-change="sortChange" />
<operatingBar :dateData="dateData" :chartData="chartData" @sort-change="sortChange" />
</div>
</div>
</Container>
@@ -59,6 +59,10 @@ export default {
}),
required: true
},
dateData: {
type: Object,
default: () => ({}),
},
},
data() {
return {
@@ -86,10 +90,8 @@ export default {
* @returns {0|1} flag值
*/
getRateFlag(rate) {
// 处理非数字/空值，默认返回 0
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 核心逻辑：≥100 → 1；<100 → 0
return rate >= 100 ? 1 : 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
/**

16
src/views/home/rawSheetYieldComponents/operatingLineChartCumulative.vue
View File

@@ -30,7 +30,7 @@
background-color: rgba(249, 252, 255, 1);
">
<!-- <top-item /> -->
<operatingBar @sort-change="sortChange" :chartData="chartData" />
<operatingBar :dateData="dateData" @sort-change="sortChange" :chartData="chartData" />
</div>
</div>
</Container>
@@ -53,6 +53,10 @@ export default {
type: Object,
default: () => ({}),
},
dateData: {
type: Object,
default: () => ({}),
}
},
data() {
return {
@@ -79,12 +83,10 @@ export default {
* @param {number} rate 处理后的rate值（已*100）
* @returns {0|1} flag值
*/
getRateFlag(rate) {
// 处理非数字/空值，默认返回 0
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 核心逻辑：≥100 → 1；<100 → 0
return rate >= 100 ? 1 : 0;
},
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
/**
* 核心处理函数：在所有数据都准备好后，才组装 chartData

92
src/views/home/rawSheetYieldComponents/operatingTopBar.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="coreBar">
<div class="lineBottom" style="height: 320px; width: 100%">
<operatingLineBar :chartData="chartD" style="height: 99%; width: 100%" />
<operatingLineBar :chartRef="'monthChart'" :chartData="chartD" style="height: 99%; width: 100%" />
</div>
</div>
</template>
@@ -22,12 +22,11 @@ export default {
computed: {
currentDataSource() {
console.log('yyyy', this.chartData);
console.log('reals', this.chartData.group.reals);
return this.chartData.group
},
locations() {
console.log('this.chartData', this.chartData);
return this.chartData.group.locations
},
// 根据按钮切换生成对应的 chartData
@@ -70,7 +69,6 @@ export default {
{
name: '预算',
type: 'bar',
yAxisIndex: 0, // 左侧Y轴（万元）
label: {
show: true,
position: 'top',
@@ -146,11 +144,9 @@ export default {
},
data: data.targets // 目标销量（万元）
},
// 3. 实际（柱状图，含达标状态）
{
name: '实际',
type: 'bar',
yAxisIndex: 0,
label: {
show: true,
position: 'top',
@@ -242,90 +238,8 @@ 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: 14,
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: 14,
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;
return salesData
}
},
methods: {},

2
src/views/home/rawSheetYieldComponents/totalOverview.vue
View File

@@ -14,7 +14,7 @@
{{ ytdData?.rate || 0 }}%
</div>
<div class="mom">
环比{{ ytdData?.yoyRate || 0 }}%
同比{{ ytdData?.yoyRate || 0 }}%
<img v-if="ytdData?.yoyRate >= 0" class="arrow" src="../../../assets/img/topArrow.png" alt="">
<img v-else class="arrow" src="../../../assets/img/downArrow.png" alt="">
</div>

2
src/views/home/rawSheetYieldComponents/verticalBarChart.vue
View File

@@ -99,7 +99,7 @@ export default {
// boundaryGap: [10, 0], // 可根据需要开启，控制轴的留白
axisTick: { show: false },
min: 0,
// scale: true,
//
splitNumber: 4,
axisLine: {
show: true,

4
src/views/home/rawSheetYieldComponents/yearRelatedMetrics.vue
View File

@@ -6,7 +6,7 @@
<!-- 原片产量模块（传递整合了flag的yieldData） -->
<div class="dashboard left">
<div class="title">
原片产量·单位/万元
原片产量·吨
</div>
<div class="chart-wrap">
<operatingSingleBar :detailData="yieldData"></operatingSingleBar>
@@ -15,7 +15,7 @@
<!-- 拉引量模块（传递整合了flag的pullData） -->
<div class="dashboard right">
<div class="title">
拉引量·单位/万元
拉引量·吨
</div>
<div class="chart-wrap">
<operatingSingleBar :detailData="pullData"></operatingSingleBar>