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

修改

Browse Source
This commit is contained in:
‘937886381’
2025-12-30 09:04:48 +08:00
parent 80deffbb42
commit 7b3873f9ea
232 changed files with 13127 additions and 17011 deletions
Download Patch File Download Diff File Expand all files Collapse all files

292
src/views/home/operatingProfitComponents/operatingBar.vue
View File

@@ -1,29 +1,21 @@
<template>
<div class="coreBar">
<!-- 新增行容器：包裹“各基地情况”和barTop -->
<div class="header-row">
<div class="base-title">
各基地情况
</div>
<div class="base-title">各基地情况</div>
<div class="barTop">
<!-- 关键：新增右侧容器，包裹图例和按钮组，实现整体靠右 -->
<div class="right-container">
<div class="legend">
<span class="legend-item">
<span class="legend-icon line yield"></span>
完成率
<span class="legend-icon line yield"></span>完成率
</span>
<span class="legend-item">
<span class="legend-icon square target"></span>
目标
<span class="legend-icon square target"></span>预算
</span>
<span class="legend-item">
<span class="legend-icon square achieved"></span>
实际·达标
<span class="legend-icon square achieved"></span>实际·达标
</span>
<span class="legend-item">
<span class="legend-icon square unachieved"></span>
实际·未达标
<span class="legend-icon square unachieved"></span>实际·未达标
</span>
</div>
<div class="button-group">
@@ -32,13 +24,13 @@
</div>
<div class="dropdown-container">
<div class="item-button profit-btn active" @click.stop="isDropdownShow = !isDropdownShow">
<span class="item-text profit-text">{{ selectedProfit || '请选择' }}</span>
<span class="item-text profit-text">{{ selectedSort || '请选择' }}</span>
<span class="dropdown-arrow" :class="{ 'rotate': isDropdownShow }"></span>
</div>
<div class="dropdown-options" v-if="isDropdownShow">
<div class="dropdown-option" v-for="(item, index) in profitOptions" :key="index"
@click.stop="selectProfit(item)">
{{ item }}
{{ item.label }}
</div>
</div>
</div>
@@ -60,130 +52,79 @@ export default {
name: "Container",
components: { operatingLineBar },
props: ["chartData"],
emits: ['sort-change'], // 声明事件（Vue3 推荐）
data() {
return {
activeButton: 0,
isDropdownShow: false,
selectedProfit: null, // 选中的名称，初始为null
selectedSort: null, // 选中的label
selectedSortValue: null, // 选中的value，用于排序逻辑
profitOptions: [
'实际值：高~低',
'实际值：低~高',
'目标值：高~低',
'目标值：低~高',
{ label: '实际值：高~低', value: 1 },
{ label: '实际值：低~高', value: 2 },
{ label: '完成率：高~低', value: 3 },
{ label: '完成率：低~高', value: 4 },
]
};
},
computed: {
// profitOptions() {
// return this.categoryData.map(item => item.name) || [];
// },
// 排序后的数据源（核心：根据selectedSortValue重新排序）
currentDataSource() {
console.log('yyyy', this.chartData);
if (!this.chartData) return {};
return this.activeButton === 0 ? this.chartData.sales : this.chartData.grossMargin;
// 深拷贝原始数据，避免修改原数据
const factory = JSON.parse(JSON.stringify(this.chartData));
if (!factory.locations.length || !this.selectedSortValue) return factory;
// 构建带索引的数组，方便同步所有字段排序
const dataWithIndex = factory.locations.map((name, index) => ({
index,
name,
real: factory.reals[index],
target: factory.targets[index],
rate: factory.rate[index],
diff: factory.diff[index],
flag: factory.flags[index]
}));
// 根据选中的排序规则排序
switch (this.selectedSortValue) {
case 1: // 实际值：高~低
dataWithIndex.sort((a, b) => b.real - a.real);
break;
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;
}
// 同步更新所有数组
factory.locations = dataWithIndex.map(item => item.name);
factory.reals = dataWithIndex.map(item => item.real);
factory.targets = dataWithIndex.map(item => item.target);
factory.rates = dataWithIndex.map(item => item.rate);
factory.diff = dataWithIndex.map(item => item.diff);
factory.flags = dataWithIndex.map(item => item.flag);
return factory;
},
locations() {
console.log('this.chartData', this.chartData);
return this.activeButton === 0 ? this.chartData.salesLocations : this.chartData.grossMarginLocations;
return this.currentDataSource.locations || [];
},
// 根据按钮切换生成对应的 chartData
// 最终传递给图表的排序后数据
chartD() {
// 销量场景数据
const data = this.currentDataSource;
console.log(this.currentDataSource, 'currentDataSource');
const salesData = {
allPlaceNames: this.locations,
series: [
// 1. 完成率（折线图）
{
name: '完成率',
type: 'line',
yAxisIndex: 1, // 绑定右侧Y轴（需在子组件启用配置）
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
},
// 2. 目标（柱状图）
{
name: '目标',
type: 'bar',
yAxisIndex: 0, // 左侧Y轴（万元）
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: data.targets // 目标销量（万元）
},
// 3. 实际（柱状图，含达标状态）
{
name: '实际',
type: 'bar',
yAxisIndex: 0,
barWidth: 14,
itemStyle: {
color: (params) => {
// 达标状态：1=达标（绿色），0=未达标（橙色）
const safeFlag = data.flags;
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: data.reals // 实际销量（万元）
}
]
};
// 毛利率场景数据
const grossProfitData = {
series: [
// 1. 完成率（折线图）
// 完成率（折线图）
{
name: '完成率',
type: 'line',
@@ -202,13 +143,13 @@ export default {
{ offset: 1, color: 'rgba(40, 138, 255, 0)' }
])
},
data: [106.7, 96.9, 106.5, 106.1, 93.8, 105.9], // 毛利率完成率（%）
data: data.rate || [],
symbol: 'circle',
symbolSize: 6
},
// 2. 目标（柱状图）
// 目标（柱状图）
{
name: '目标',
name: '预算',
type: 'bar',
yAxisIndex: 0,
barWidth: 14,
@@ -224,17 +165,64 @@ export default {
borderRadius: [4, 4, 0, 0],
borderWidth: 0
},
data: [30, 32, 31, 33, 32, 34] // 目标毛利率（万元）
data: data.targets || []
},
// 3. 实际（柱状图）
// 实际（柱状图）
{
name: '实际',
type: 'bar',
yAxisIndex: 0,
barWidth: 14,
label: {
show: true,
position: 'top',
offset: [30, 0],
width: 68,
height: 20,
formatter: (params) => {
const diff = data.diff || [];
const currentDiff = diff[params.dataIndex] || 0;
return `{rate|${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
},
rate: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
fontSize: 11,
lineHeight: 20
}
}
},
itemStyle: {
color: (params) => {
const safeFlag = [1, 0, 1, 1, 0, 1]; // 达标状态
const safeFlag = data.flags || [];
const currentFlag = safeFlag[params.dataIndex] || 0;
return currentFlag === 1
? {
@@ -257,21 +245,34 @@ export default {
borderRadius: [4, 4, 0, 0],
borderWidth: 0
},
data: [32, 31, 33, 35, 30, 36] // 实际毛利率（万元）
data: data.reals || []
}
]
};
// 根据按钮状态返回对应数据
return salesData;
}
},
methods: {
selectProfit(item) {
this.selectedProfit = item;
// 更新选中的label和value
this.selectedSort = item.label;
this.selectedSortValue = item.value;
this.isDropdownShow = false;
// 向父组件传递排序事件（可选，保持原有逻辑）
this.$emit('sort-change', item.value);
}
},
// 监听父组件传入的chartData变化，重置选中状态（可选）
watch: {
'chartData.factory': {
handler() {
// 若需要切换数据源后重置排序，可取消注释
// this.selectedSort = null;
// this.selectedSortValue = null;
},
deep: true
}
}
};
</script>
@@ -282,16 +283,14 @@ export default {
width: 100%;
padding: 12px;
// 新增：头部行容器，实现一行排列
.header-row {
display: flex;
justify-content: space-between; // 左右两端对齐
align-items: center; // 垂直居中
justify-content: space-between;
align-items: center;
width: 100%;
margin-bottom: 8px; // 与下方图表区保留间距（可根据需求调整）
margin-bottom: 8px;
}
// 各基地情况标题样式
.base-title {
font-weight: 400;
font-size: 18px;
@@ -299,29 +298,25 @@ export default {
line-height: 18px;
letter-spacing: 1px;
font-style: normal;
padding: 0 0 0 16px; // 保留原有内边距
white-space: nowrap; // 防止文字换行
padding: 0 0 0 16px;
white-space: nowrap;
}
.barTop {
// 移除原有flex和justify-content，由header-row控制
width: auto; // 自适应宽度
// 保留原有align-items，确保内部元素垂直居中
width: auto;
align-items: center;
gap: 16px;
// 1. 右侧容器：包裹图例和按钮组，整体靠右
.right-container {
display: flex;
align-items: center; // 图例和按钮组垂直居中
gap: 24px; // 图例与按钮组的间距，避免贴紧
margin-right: 46px; // 右侧整体留边，与原按钮组边距一致
align-items: center;
gap: 24px;
margin-right: 46px;
}
// 2. 图例：在右侧容器内横向排列
.legend {
display: flex;
gap: 16px; // 图例项之间间距，避免重叠
gap: 16px;
align-items: center;
margin: 0;
}
@@ -336,7 +331,7 @@ export default {
color: rgba(0, 0, 0, 0.8);
text-align: left;
font-style: normal;
white-space: nowrap; // 防止图例文字换行
white-space: nowrap;
}
.legend-icon {
@@ -365,7 +360,6 @@ export default {
height: 8px;
}
// 图例颜色
.yield {
background: rgba(40, 138, 255, 1);
}
@@ -382,7 +376,6 @@ export default {
background: rgba(255, 132, 0, 1);
}
// 3. 按钮组：在右侧容器内，保留原有样式
.button-group {
display: flex;
position: relative;
@@ -406,7 +399,6 @@ export default {
line-height: 24px;
font-style: normal;
letter-spacing: 2px;
overflow: hidden;
.item-text {