529 lines
15 KiB
Vue
529 lines
15 KiB
Vue
<template>
|
||
<div class="coreBar">
|
||
<!-- 新增行容器：包裹“各基地情况”和barTop -->
|
||
<div class="header-row">
|
||
<div class="barTop">
|
||
<!-- 关键：新增右侧容器，包裹图例和按钮组，实现整体靠右 -->
|
||
<div class="right-container">
|
||
<div class="legend">
|
||
<span class="legend-item">
|
||
<span class="legend-icon line yield"></span>
|
||
完成率
|
||
</span>
|
||
<span class="legend-item">
|
||
<span class="legend-icon square target"></span>
|
||
目标
|
||
</span>
|
||
<span class="legend-item">
|
||
<span class="legend-icon square achieved"></span>
|
||
实际·达标
|
||
</span>
|
||
<span class="legend-item">
|
||
<span class="legend-icon square unachieved"></span>
|
||
实际·未达标
|
||
</span>
|
||
</div>
|
||
<div class="button-group">
|
||
<div class="item-button category-btn">
|
||
<span class="item-text">类目选择</span>
|
||
</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="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.name }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="lineBottom" style="height: 100%; width: 100%">
|
||
<operatingLineBar :chartData="chartD" style="height: 99%; width: 100%" />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import operatingLineBar from './operatingLineBarSale.vue';
|
||
import * as echarts from 'echarts';
|
||
|
||
export default {
|
||
name: "Container",
|
||
components: { operatingLineBar },
|
||
props: [
|
||
"trendData" // 接收父组件传递的 trend 数据（单价/运费/净价）
|
||
],
|
||
data() {
|
||
return {
|
||
activeButton: 0,
|
||
isDropdownShow: false,
|
||
selectedProfit: '全成本', // 关键修改：默认赋值为「净价」，初始化即展示该类目数据
|
||
profitOptions:[
|
||
{name:'全成本',unit:'元/㎡'},
|
||
{name:'制造成本',unit:'元/㎡'},
|
||
{name:'管理费用',unit:'万元'},
|
||
{name:'财务费用',unit:'万元'},
|
||
{name:'运费',unit:'元/㎡'},
|
||
{name:'销售费用',unit:'万元'},
|
||
],
|
||
unit:'元/㎡'
|
||
};
|
||
},
|
||
computed: {
|
||
// 核心：根据选中的类目，动态解析趋势数据
|
||
trendParsedData() {
|
||
// 1. 校验数据有效性
|
||
if (!this.trendData || !this.selectedProfit) {
|
||
return {
|
||
months: [], // 月份数组（x轴标签）
|
||
rates: [], // 完成率（completeRate）
|
||
reals: [], // 实际值（real）
|
||
targets: [], // 预算值（target）
|
||
flags: [], // 达标状态
|
||
diffs:[]
|
||
};
|
||
}
|
||
|
||
// 2. 获取选中类目的趋势数据（如：trendData.单价）
|
||
const selectedTrend = this.trendData[this.selectedProfit] || {};
|
||
// 3. 提取月份并排序（保证时间顺序）
|
||
const months = Object.keys(selectedTrend).sort((a, b) => new Date(a) - new Date(b));
|
||
// 4. 初始化数据数组
|
||
const rates = [];
|
||
const reals = [];
|
||
const targets = [];
|
||
const flags = [];
|
||
const diffs = []
|
||
|
||
// 5. 按月份提取数据
|
||
months.forEach(month => {
|
||
const monthData = selectedTrend[month] || {};
|
||
const completeRate = monthData.completeRate || 0;
|
||
// 填充对应数据
|
||
rates.push(completeRate);
|
||
reals.push(monthData.real || 0);
|
||
targets.push(monthData.target || 0);
|
||
diffs.push(monthData.diff || 0);
|
||
flags.push(completeRate>=100?1:0);
|
||
});
|
||
|
||
return {
|
||
months,
|
||
rates,
|
||
reals,
|
||
targets,
|
||
flags,
|
||
diffs
|
||
};
|
||
},
|
||
// locations() {
|
||
// return this.activeButton === 0 ? this.chartData?.salesLocations : this.chartData?.grossMarginLocations;
|
||
// },
|
||
// 重构 chartD：替换硬编码数据为动态解析数据
|
||
chartD() {
|
||
// 获取动态解析的趋势数据
|
||
const { months, rates, reals, targets, flags, diffs } = this.trendParsedData;
|
||
console.log('flags',flags);
|
||
|
||
// 销量场景数据（保留原有结构，替换数据来源）
|
||
const salesData = {
|
||
allPlaceNames: months, // 优先用基地名称，无则用月份
|
||
unit: this.unit,
|
||
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: rates, // 动态完成率
|
||
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: targets, // 动态预算值
|
||
},
|
||
// 3. 实际（柱状图，含达标状态）
|
||
{
|
||
name: '实际',
|
||
type: 'bar',
|
||
yAxisIndex: 0,
|
||
barWidth: 14,
|
||
label: {
|
||
show: false
|
||
},
|
||
itemStyle: {
|
||
color: (params) => {
|
||
const currentFlag = flags[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: reals, // 动态实际值
|
||
},
|
||
// 4. 实际差值标签（独立scatter系列，zlevel=1确保标签在最上层）
|
||
{
|
||
name: '__实际差值标签',
|
||
type: 'scatter',
|
||
yAxisIndex: 0,
|
||
zlevel: 1,
|
||
symbolSize: 0,
|
||
tooltip: {
|
||
show: false
|
||
},
|
||
data: (reals || []).map((value, index) => ({
|
||
value: value,
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
offset: [0, 0],
|
||
width: 68,
|
||
height: 20,
|
||
formatter: () => {
|
||
const currentDiff = diffs[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
|
||
}
|
||
}
|
||
}
|
||
}))
|
||
}
|
||
]
|
||
};
|
||
|
||
// 直接返回动态组装的 salesData（移除硬编码的毛利率数据）
|
||
return salesData;
|
||
}
|
||
},
|
||
methods: {
|
||
selectProfit(item) {
|
||
this.selectedProfit = item.name;
|
||
this.unit = item.unit;
|
||
this.isDropdownShow = false;
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.coreBar {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
padding: 12px;
|
||
|
||
// 新增：头部行容器，实现一行排列
|
||
.header-row {
|
||
display: flex;
|
||
justify-content: flex-end; // 左右两端对齐
|
||
align-items: center; // 垂直居中
|
||
// width: 100%;
|
||
margin-bottom: 8px; // 与下方图表区保留间距（可根据需求调整）整）
|
||
}
|
||
|
||
// 各基地情况标题样式
|
||
.base-title {
|
||
font-weight: 400;
|
||
font-size: 18px;
|
||
color: #000000;
|
||
line-height: 18px;
|
||
letter-spacing: 1px;
|
||
font-style: normal;
|
||
padding: 0 0 0 16px; // 保留原有内边距
|
||
white-space: nowrap; // 防止文字换行
|
||
}
|
||
|
||
.barTop {
|
||
// 移除原有flex和justify-content，由header-row控制
|
||
width: auto; // 自适应宽度
|
||
// 保留原有align-items，确保内部元素垂直居中
|
||
align-items: center;
|
||
gap: 16px;
|
||
|
||
// 1. 右侧容器：包裹图例和按钮组，整体靠右
|
||
.right-container {
|
||
display: flex;
|
||
align-items: center; // 图例和按钮组垂直居中
|
||
gap: 24px; // 图例与按钮组的间距，避免贴紧
|
||
margin-right: 46px; // 右侧整体留边，与原按钮组边距一致
|
||
}
|
||
|
||
// 2. 图例：在右侧容器内横向排列
|
||
.legend {
|
||
display: flex;
|
||
gap: 16px; // 图例项之间间距，避免重叠
|
||
align-items: center;
|
||
margin: 0;
|
||
}
|
||
|
||
.legend-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: rgba(0, 0, 0, 0.8);
|
||
text-align: left;
|
||
font-style: normal;
|
||
white-space: nowrap; // 防止图例文字换行
|
||
}
|
||
|
||
.legend-icon {
|
||
display: inline-block;
|
||
}
|
||
|
||
.legend-icon.line {
|
||
width: 12px;
|
||
height: 2px;
|
||
position: relative;
|
||
|
||
&::before {
|
||
position: absolute;
|
||
content: "";
|
||
top: -2px;
|
||
left: 3px;
|
||
width: 6px;
|
||
border-radius: 50%;
|
||
height: 6px;
|
||
background-color: rgba(40, 138, 255, 1);
|
||
}
|
||
}
|
||
|
||
.legend-icon.square {
|
||
width: 8px;
|
||
height: 8px;
|
||
}
|
||
|
||
// 图例颜色
|
||
.yield {
|
||
background: rgba(40, 138, 255, 1);
|
||
}
|
||
|
||
.target {
|
||
background: #2889FF;
|
||
}
|
||
|
||
.achieved {
|
||
background: rgba(40, 203, 151, 1);
|
||
}
|
||
|
||
.unachieved {
|
||
background: rgba(255, 132, 0, 1);
|
||
}
|
||
|
||
// 3. 按钮组：在右侧容器内，保留原有样式
|
||
.button-group {
|
||
display: flex;
|
||
position: relative;
|
||
gap: 2px;
|
||
align-items: center;
|
||
height: 24px;
|
||
background: #ecf4fe;
|
||
margin: 0;
|
||
|
||
.dropdown-container {
|
||
position: relative;
|
||
z-index: 10;
|
||
}
|
||
|
||
.item-button {
|
||
cursor: pointer;
|
||
height: 24px;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 12px;
|
||
line-height: 24px;
|
||
font-style: normal;
|
||
letter-spacing: 2px;
|
||
|
||
overflow: hidden;
|
||
|
||
.item-text {
|
||
display: inline-block;
|
||
}
|
||
}
|
||
|
||
.category-btn {
|
||
width: 75px;
|
||
border-top-left-radius: 12px;
|
||
border-bottom-left-radius: 12px;
|
||
background: #ffffff;
|
||
color: #0b58ff;
|
||
text-align: center;
|
||
}
|
||
|
||
.profit-btn {
|
||
width: 123px;
|
||
border-top-right-radius: 12px;
|
||
border-bottom-right-radius: 12px;
|
||
position: relative;
|
||
padding: 0 18px 0 8px;
|
||
background: #ffffff;
|
||
color: #0b58ff;
|
||
text-align: left;
|
||
|
||
&.active {
|
||
background: #3071ff;
|
||
color: rgba(249, 252, 255, .8);
|
||
}
|
||
|
||
.profit-text {
|
||
text-align: left;
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.dropdown-arrow {
|
||
position: absolute;
|
||
right: 8px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 6px solid currentColor;
|
||
border-top: 4px solid transparent;
|
||
border-bottom: 4px solid transparent;
|
||
border-right: 4px solid transparent;
|
||
transition: transform 0.2s ease;
|
||
|
||
&.rotate {
|
||
transform: rotate(90deg);
|
||
}
|
||
}
|
||
|
||
.dropdown-options {
|
||
position: absolute;
|
||
bottom: 100%;
|
||
right: 0;
|
||
margin-top: 2px;
|
||
width: 123px;
|
||
background: #ffffff;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
overflow: hidden;
|
||
|
||
.dropdown-option {
|
||
padding: 6px 12px;
|
||
font-size: 12px;
|
||
color: #333;
|
||
cursor: pointer;
|
||
text-align: left;
|
||
letter-spacing: 1px;
|
||
|
||
&:hover {
|
||
background: #f5f7fa;
|
||
color: #3071ff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|