修改
This commit is contained in:
‘937886381’
@@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<div style="flex: 1">
|
||||
<Container name="数据趋势" icon="cockpitItemIcon" size="opLargeBg" topSize="large">
|
||||
<!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
|
||||
<div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%; gap: 16px">
|
||||
<div class="right" style="
|
||||
height: 191px;
|
||||
@@ -9,13 +8,14 @@
|
||||
width: 1595px;
|
||||
background-color: rgba(249, 252, 255, 1);
|
||||
">
|
||||
<!-- <top-item /> -->
|
||||
<dataTrendBar :chartData="chartData" />
|
||||
<!-- 直接使用计算属性 chartData，无需手动更新 -->
|
||||
<dataTrendBar @handleGetItemData="getData" :chartData="chartData" />
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Container from "../components/container.vue";
|
||||
import dataTrendBar from "./dataTrendBar.vue";
|
||||
@@ -24,174 +24,106 @@ export default {
|
||||
name: "ProductionStatus",
|
||||
components: { Container, dataTrendBar },
|
||||
props: {
|
||||
salesTrendMap: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
grossMarginTrendMap: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
trendData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chartData: null, // 初始化 chartData 为 null
|
||||
// 移除：原 chartData 定义，改为计算属性
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
grossMarginTrendMap: {
|
||||
handler() {
|
||||
this.processChartData();
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
salesTrendMap: {
|
||||
handler() {
|
||||
this.processChartData();
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
// 移除：原 watch 监听配置，计算属性自动响应 trendData 变化
|
||||
computed: {
|
||||
/**
|
||||
* chartData 计算属性：自动响应 trendData 变化，格式化并提取各字段数组
|
||||
* @returns {Object} 包含6个独立数组的格式化数据
|
||||
*/
|
||||
chartData() {
|
||||
// 初始化6个独立数组
|
||||
const timeArr = []; // 格式化后的年月数组
|
||||
const valueArr = []; // 实际值数组
|
||||
const diffValueArr = []; // 差异值数组
|
||||
const targetValueArr = []; // 目标值数组
|
||||
const proportionArr = []; // 占比数组
|
||||
const completedArr = []; // 完成率数组
|
||||
|
||||
// 遍历传入的 trendData 数组（响应式依赖，变化时自动重算）
|
||||
this.trendData.forEach((item) => {
|
||||
// 1. 格式化时间并推入时间数组
|
||||
const yearMonth = this.formatTimeToYearMonth(item.time);
|
||||
timeArr.push(yearMonth);
|
||||
|
||||
// 2. 提取其他字段，兜底为0（防止null/undefined影响图表渲染）
|
||||
valueArr.push(item.value ?? 0);
|
||||
diffValueArr.push(item.diffValue ?? 0);
|
||||
targetValueArr.push(item.targetValue ?? 0);
|
||||
proportionArr.push(item.proportion ?? 0);
|
||||
completedArr.push(item.completed ?? 0);
|
||||
});
|
||||
|
||||
// 组装并返回格式化后的数据（结构与原一致）
|
||||
return {
|
||||
time: timeArr,
|
||||
value: valueArr,
|
||||
diffValue: diffValueArr,
|
||||
targetValue: targetValueArr,
|
||||
proportion: proportionArr,
|
||||
completed: completedArr,
|
||||
rawData: this.trendData, // 透传原始数据，方便子组件使用
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 核心处理函数：在所有数据都准备好后，才组装 chartData
|
||||
* 格式化时间戳为年月格式（YYYY-MM）
|
||||
* @param {Number} timestamp 13位毫秒级时间戳
|
||||
* @returns {String} 格式化后的年月字符串（如：2025-10）
|
||||
*/
|
||||
processChartData() {
|
||||
// 关键改动：增加数据有效性检查
|
||||
// 检查 salesTrendMap 是否有实际数据（不只是空对象）
|
||||
const isSalesDataReady = Object.keys(this.salesTrendMap).length > 0;
|
||||
// 检查 grossMarginTrendMap 是否有实际数据
|
||||
const isGrossMarginDataReady =
|
||||
Object.keys(this.grossMarginTrendMap).length > 0;
|
||||
|
||||
// 如果任一数据未准备好，则不更新 chartData，或传递一个加载中的状态
|
||||
// 你可以根据业务需求调整这里的逻辑，比如：
|
||||
// 1. 等待两者都准备好
|
||||
// 2. 只要有一个准备好了就更新，但确保另一个有合理的默认值
|
||||
|
||||
// --- 方案一：等待两者都准备好 ---
|
||||
// if (!isSalesDataReady || !isGrossMarginDataReady) {
|
||||
// console.log('数据尚未全部准备好，暂不更新图表');
|
||||
// this.chartData = {
|
||||
// grossMarginLocations: [],
|
||||
// salesLocations: [],
|
||||
// grossMargin: { rates: [], reals: [], targets: [], flags: [] },
|
||||
// sales: { rates: [], reals: [], targets: [], flags: [] },
|
||||
// };
|
||||
// return;
|
||||
// }
|
||||
|
||||
// --- 方案二 (推荐)：有什么数据就显示什么，没有的就显示空 ---
|
||||
// 这种方式更友好，用户可以先看到部分数据
|
||||
const grossMarginLocations = isGrossMarginDataReady
|
||||
? Object.keys(this.grossMarginTrendMap)
|
||||
: [];
|
||||
const salesLocations = isSalesDataReady
|
||||
? Object.keys(this.salesTrendMap)
|
||||
: [];
|
||||
|
||||
const processedGrossMarginData = isGrossMarginDataReady
|
||||
? this.processSingleDataset(
|
||||
grossMarginLocations,
|
||||
this.grossMarginTrendMap
|
||||
)
|
||||
: { rates: [], reals: [], targets: [], flags: [] };
|
||||
|
||||
const processedSalesData = isSalesDataReady
|
||||
? this.processSingleDataset(salesLocations, this.salesTrendMap)
|
||||
: { rates: [], reals: [], targets: [], flags: [] };
|
||||
|
||||
// 3. 组装最终的 chartData 对象
|
||||
this.chartData = {
|
||||
grossMarginLocations: grossMarginLocations,
|
||||
salesLocations: salesLocations,
|
||||
grossMargin: processedGrossMarginData,
|
||||
sales: processedSalesData,
|
||||
};
|
||||
|
||||
console.log("chartData 已更新:", this.chartData);
|
||||
formatTimeToYearMonth(timestamp) {
|
||||
if (!timestamp || isNaN(timestamp)) {
|
||||
return ""; // 容错：非有效时间戳返回空字符串
|
||||
}
|
||||
const date = new Date(timestamp);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，补0至2位
|
||||
return `${year}-${month}`;
|
||||
},
|
||||
|
||||
/**
|
||||
* 通用数据处理函数（纯函数）
|
||||
* @param {Array} locations - 某个指标的地点数组
|
||||
* @param {Object} dataMap - 该指标的原始数据映射
|
||||
* @returns {Object} - 格式化后的数据对象
|
||||
*/
|
||||
processSingleDataset(locations, dataMap) {
|
||||
const rates = [];
|
||||
const reals = [];
|
||||
const targets = [];
|
||||
const flags = [];
|
||||
|
||||
locations.forEach((location) => {
|
||||
const data = dataMap[location] || {};
|
||||
// 优化：处理 data.rate 为 null/undefined 的情况
|
||||
const rate =
|
||||
data.rate !== null && data.rate !== undefined
|
||||
? Math.round(data.rate * 100)
|
||||
: 0;
|
||||
|
||||
rates.push(rate);
|
||||
reals.push(data.real ?? 0); // 使用空值合并运算符
|
||||
targets.push(data.target ?? 0);
|
||||
|
||||
// 优化：更清晰的逻辑
|
||||
if (data.target === 0) {
|
||||
flags.push(1); // 如果目标为0，默认达标
|
||||
} else {
|
||||
flags.push(rate >= 100 ? 1 : 0);
|
||||
}
|
||||
});
|
||||
|
||||
return { rates, reals, targets, flags };
|
||||
getData(value) {
|
||||
this.$emit('getData', value)
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 3. 核心：滚动容器样式（固定高度+溢出滚动+隐藏滚动条） */
|
||||
/* 原有样式保持不变 */
|
||||
.scroll-container {
|
||||
/* 1. 固定容器高度：根据页面布局调整（示例300px，超出则滚动） */
|
||||
max-height: 210px;
|
||||
/* 2. 溢出滚动：内容超出高度时显示滚动功能 */
|
||||
overflow-y: auto;
|
||||
/* 3. 隐藏横向滚动条（防止设备名过长导致横向滚动） */
|
||||
overflow-x: hidden;
|
||||
/* 4. 内边距：与标题栏和容器边缘对齐 */
|
||||
padding: 10px 0;
|
||||
|
||||
/* 5. 隐藏滚动条（兼容主流浏览器） */
|
||||
/* Chrome/Safari */
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
scrollbar-width: none;
|
||||
/* IE/Edge */
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
/* 设备项样式优化：增加间距，避免拥挤 */
|
||||
.proBarInfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 8px 27px;
|
||||
/* 调整内边距，优化排版 */
|
||||
margin-bottom: 10px;
|
||||
/* 设备项之间的垂直间距 */
|
||||
}
|
||||
|
||||
/* 原有样式保留，优化细节 */
|
||||
.proBarInfoEqInfo {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
/* 垂直居中，避免序号/文字错位 */
|
||||
}
|
||||
|
||||
.slot {
|
||||
@@ -204,14 +136,12 @@ export default {
|
||||
font-size: 16px;
|
||||
color: #68b5ff;
|
||||
line-height: 23px;
|
||||
/* 垂直居中文字 */
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.eq-name {
|
||||
margin-left: 8px;
|
||||
/* 增加与序号的间距 */
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
@@ -237,7 +167,6 @@ export default {
|
||||
height: 14px;
|
||||
border: 1px solid #adadad;
|
||||
margin: 0 8px;
|
||||
/* 优化分割线间距 */
|
||||
}
|
||||
|
||||
.yield {
|
||||
@@ -254,22 +183,18 @@ export default {
|
||||
.proBarInfoEqInfoLeft {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 序号和设备名垂直居中 */
|
||||
}
|
||||
|
||||
.proBarInfoEqInfoRight {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 状态/分割线/百分比垂直居中 */
|
||||
}
|
||||
|
||||
.proBarWrapper {
|
||||
position: relative;
|
||||
height: 10px;
|
||||
margin-top: 6px;
|
||||
/* 进度条与上方信息的间距 */
|
||||
border-radius: 5px;
|
||||
/* 进度条圆角，优化视觉 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -285,19 +210,15 @@ export default {
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
65deg,
|
||||
rgba(53, 223, 247, 0) 0%,
|
||||
rgba(54, 220, 246, 0.92) 92%,
|
||||
#36f6e5 100%,
|
||||
#37acf5 100%
|
||||
);
|
||||
background: linear-gradient(65deg,
|
||||
rgba(53, 223, 247, 0) 0%,
|
||||
rgba(54, 220, 246, 0.92) 92%,
|
||||
#36f6e5 100%,
|
||||
#37acf5 100%);
|
||||
border-radius: 5px;
|
||||
transition: width 0.3s ease;
|
||||
/* 进度变化时添加过渡动画，更流畅 */
|
||||
}
|
||||
|
||||
/* 图表相关样式保留 */
|
||||
.chartImgBottom {
|
||||
position: absolute;
|
||||
bottom: 45px;
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
<div class="coreBar">
|
||||
<!-- 新增行容器：包裹“各基地情况”和barTop -->
|
||||
<div class="header-row">
|
||||
<!-- <div class="base-title">
|
||||
<div class="base-title">
|
||||
各基地情况
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="barTop">
|
||||
<!-- 关键：新增右侧容器，包裹图例和按钮组，实现整体靠右 -->
|
||||
<div class="right-container">
|
||||
@@ -28,7 +28,7 @@
|
||||
</div>
|
||||
<div class="button-group">
|
||||
<div class="item-button category-btn">
|
||||
<span class="item-text">展示顺序</span>
|
||||
<span class="item-text">类目选择</span>
|
||||
</div>
|
||||
<div class="dropdown-container">
|
||||
<div class="item-button profit-btn active" @click.stop="isDropdownShow = !isDropdownShow">
|
||||
@@ -62,9 +62,8 @@ export default {
|
||||
props: ["chartData"],
|
||||
data() {
|
||||
return {
|
||||
activeButton: 0,
|
||||
isDropdownShow: false,
|
||||
selectedProfit: null, // 选中的名称，初始为null
|
||||
selectedProfit: '原片成本', // 选中的名称，初始为null
|
||||
profitOptions: [
|
||||
'原片成本',
|
||||
'原料成本',
|
||||
@@ -80,20 +79,17 @@ export default {
|
||||
// return this.categoryData.map(item => item.name) || [];
|
||||
// },
|
||||
currentDataSource() {
|
||||
console.log('yyyy', this.chartData);
|
||||
|
||||
return this.activeButton === 0 ? this.chartData.sales : this.chartData.grossMargin;
|
||||
return this.chartData
|
||||
},
|
||||
locations() {
|
||||
console.log('this.chartData', this.chartData);
|
||||
|
||||
return this.activeButton === 0 ? this.chartData.salesLocations : this.chartData.grossMarginLocations;
|
||||
return this.chartData.time
|
||||
},
|
||||
// 根据按钮切换生成对应的 chartData
|
||||
chartD() {
|
||||
// 销量场景数据
|
||||
const data = this.currentDataSource;
|
||||
console.log(this.currentDataSource, 'currentDataSource');
|
||||
console.log('this.currentDataSource', data);
|
||||
|
||||
const salesData = {
|
||||
allPlaceNames: this.locations,
|
||||
@@ -120,7 +116,7 @@ export default {
|
||||
{ offset: 1, color: 'rgba(40, 138, 255, 0)' }
|
||||
])
|
||||
},
|
||||
data: data.rates, // 完成率（%）
|
||||
data: data.proportion || [], // 完成率（%）
|
||||
symbol: 'circle',
|
||||
symbolSize: 6
|
||||
},
|
||||
@@ -142,7 +138,7 @@ export default {
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
borderWidth: 0
|
||||
},
|
||||
data: data.targets // 目标销量（万元）
|
||||
data: data.targetValue || [] // 目标销量（万元）
|
||||
},
|
||||
// 3. 实际（柱状图，含达标状态）
|
||||
{
|
||||
@@ -150,10 +146,69 @@ export default {
|
||||
type: 'bar',
|
||||
yAxisIndex: 0,
|
||||
barWidth: 14,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
offset: [0, 0],
|
||||
// 固定label尺寸：68px×20px
|
||||
width: 68,
|
||||
height: 20,
|
||||
// 关键：去掉换行，让文字在一行显示，适配小尺寸
|
||||
formatter: function (params) {
|
||||
const diff = data.diffValue || [];
|
||||
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)' }, // 顶部0px位置：阴影最强
|
||||
// { offset: 0.1, color: 'rgba(205, 215, 224, 0.4)' }, // 1px位置：阴影减弱（对应1px）
|
||||
// { offset: 0.15, color: 'rgba(205, 215, 224, 0.6)' }, // 3px位置：阴影几乎消失（对应3px扩散）
|
||||
{ offset: 0.2, color: '#ffffff' }, // 主体白色
|
||||
{ offset: 1, color: '#ffffff' }
|
||||
]
|
||||
},
|
||||
// 外阴影：0px 2px 2px 0px rgba(191,203,215,0.5)
|
||||
shadowColor: 'rgba(191,203,215,0.5)',
|
||||
shadowBlur: 2,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 2,
|
||||
// 圆角：4px
|
||||
borderRadius: 4,
|
||||
// 移除边框
|
||||
borderColor: '#BFCBD577',
|
||||
borderWidth: 0,
|
||||
// 文字垂直居中（针对富文本）
|
||||
lineHeight: 20,
|
||||
rich: {
|
||||
text: {
|
||||
// 缩小宽度和内边距，适配68px容器
|
||||
width: 'auto', // 自动宽度，替代固定40px
|
||||
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) => {
|
||||
// 达标状态：1=达标（绿色），0=未达标（橙色）
|
||||
const safeFlag = data.flags;
|
||||
const safeFlag = data.completed || [];
|
||||
const currentFlag = safeFlag[params.dataIndex] || 0;
|
||||
return currentFlag === 1
|
||||
? {
|
||||
@@ -176,94 +231,10 @@ export default {
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
borderWidth: 0
|
||||
},
|
||||
data: data.reals // 实际销量（万元）
|
||||
data: data.value || [] // 实际销量（万元）
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 毛利率场景数据
|
||||
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 salesData;
|
||||
}
|
||||
},
|
||||
@@ -271,6 +242,7 @@ export default {
|
||||
selectProfit(item) {
|
||||
this.selectedProfit = item;
|
||||
this.isDropdownShow = false;
|
||||
this.$emit('handleGetItemData', item)
|
||||
}
|
||||
},
|
||||
};
|
||||
@@ -286,7 +258,7 @@ export default {
|
||||
// 新增：头部行容器，实现一行排列
|
||||
.header-row {
|
||||
display: flex;
|
||||
justify-content: flex-end; // 左右两端对齐
|
||||
justify-content: space-between; // 左右两端对齐
|
||||
align-items: center; // 垂直居中
|
||||
width: 100%;
|
||||
margin-bottom: 8px; // 与下方图表区保留间距（可根据需求调整）
|
||||
@@ -395,7 +367,7 @@ export default {
|
||||
|
||||
.dropdown-container {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
z-index: 999; // 提高z-index，确保菜单不被遮挡
|
||||
}
|
||||
|
||||
.item-button {
|
||||
@@ -459,18 +431,21 @@ export default {
|
||||
transition: transform 0.2s ease;
|
||||
|
||||
&.rotate {
|
||||
transform: rotate(90deg);
|
||||
transform: rotate(90deg); // 箭头旋转方向可根据需求调整，比如改为rotate(-90deg)更符合向上展开的视觉
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-options {
|
||||
position: absolute;
|
||||
// 关键修改1：调整top值，让菜单显示在选择框上方，calc(-100% - 2px)表示向上偏移自身100%再加2px间距
|
||||
bottom: 100%;
|
||||
right: 0;
|
||||
margin-top: 2px;
|
||||
// 移除多余的margin-top，避免额外间距
|
||||
// margin-top: 2px;
|
||||
width: 123px;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
// 关键修改2：调整border-radius，让菜单顶部圆角匹配选择框的右上角，底部圆角为0（更美观）
|
||||
border-radius: 8px 8px 0 0;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
@@ -2,6 +2,9 @@
|
||||
<div class="coreBar">
|
||||
<!-- 新增行容器：包裹“各基地情况”和barTop -->
|
||||
<div class="header-row">
|
||||
<div class="base-title">
|
||||
各基地情况
|
||||
</div>
|
||||
<div class="barTop">
|
||||
<!-- 关键：新增右侧容器，包裹图例和按钮组，实现整体靠右 -->
|
||||
<div class="right-container">
|
||||
@@ -25,7 +28,7 @@
|
||||
</div>
|
||||
<div class="button-group">
|
||||
<div class="item-button category-btn">
|
||||
<span class="item-text">展示顺序</span>
|
||||
<span class="item-text">类目选择</span>
|
||||
</div>
|
||||
<div class="dropdown-container">
|
||||
<div class="item-button profit-btn active" @click.stop="isDropdownShow = !isDropdownShow">
|
||||
@@ -59,9 +62,8 @@ export default {
|
||||
props: ["chartData"],
|
||||
data() {
|
||||
return {
|
||||
activeButton: 0,
|
||||
isDropdownShow: false,
|
||||
selectedProfit: null, // 选中的名称，初始为null
|
||||
selectedProfit: '天然气', // 选中的名称，初始为null
|
||||
profitOptions: [
|
||||
'天然气',
|
||||
'LNG液化天然气',
|
||||
@@ -75,20 +77,17 @@ export default {
|
||||
// return this.categoryData.map(item => item.name) || [];
|
||||
// },
|
||||
currentDataSource() {
|
||||
console.log('yyyy', this.chartData);
|
||||
|
||||
return this.activeButton === 0 ? this.chartData.sales : this.chartData.grossMargin;
|
||||
return this.chartData
|
||||
},
|
||||
locations() {
|
||||
console.log('this.chartData', this.chartData);
|
||||
|
||||
return this.activeButton === 0 ? this.chartData.salesLocations : this.chartData.grossMarginLocations;
|
||||
return this.chartData.time
|
||||
},
|
||||
// 根据按钮切换生成对应的 chartData
|
||||
chartD() {
|
||||
// 销量场景数据
|
||||
const data = this.currentDataSource;
|
||||
console.log(this.currentDataSource, 'currentDataSource');
|
||||
console.log('this.currentDataSource', data);
|
||||
|
||||
const salesData = {
|
||||
allPlaceNames: this.locations,
|
||||
@@ -115,7 +114,7 @@ export default {
|
||||
{ offset: 1, color: 'rgba(40, 138, 255, 0)' }
|
||||
])
|
||||
},
|
||||
data: data.rates, // 完成率（%）
|
||||
data: data.proportion || [], // 完成率（%）
|
||||
symbol: 'circle',
|
||||
symbolSize: 6
|
||||
},
|
||||
@@ -137,7 +136,7 @@ export default {
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
borderWidth: 0
|
||||
},
|
||||
data: data.targets // 目标销量（万元）
|
||||
data: data.targetValue || [] // 目标销量（万元）
|
||||
},
|
||||
// 3. 实际（柱状图，含达标状态）
|
||||
{
|
||||
@@ -145,10 +144,69 @@ export default {
|
||||
type: 'bar',
|
||||
yAxisIndex: 0,
|
||||
barWidth: 14,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
offset: [0, 0],
|
||||
// 固定label尺寸：68px×20px
|
||||
width: 68,
|
||||
height: 20,
|
||||
// 关键：去掉换行，让文字在一行显示，适配小尺寸
|
||||
formatter: function (params) {
|
||||
const diff = data.diffValue || [];
|
||||
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)' }, // 顶部0px位置：阴影最强
|
||||
// { offset: 0.1, color: 'rgba(205, 215, 224, 0.4)' }, // 1px位置：阴影减弱（对应1px）
|
||||
// { offset: 0.15, color: 'rgba(205, 215, 224, 0.6)' }, // 3px位置：阴影几乎消失（对应3px扩散）
|
||||
{ offset: 0.2, color: '#ffffff' }, // 主体白色
|
||||
{ offset: 1, color: '#ffffff' }
|
||||
]
|
||||
},
|
||||
// 外阴影：0px 2px 2px 0px rgba(191,203,215,0.5)
|
||||
shadowColor: 'rgba(191,203,215,0.5)',
|
||||
shadowBlur: 2,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 2,
|
||||
// 圆角：4px
|
||||
borderRadius: 4,
|
||||
// 移除边框
|
||||
borderColor: '#BFCBD577',
|
||||
borderWidth: 0,
|
||||
// 文字垂直居中（针对富文本）
|
||||
lineHeight: 20,
|
||||
rich: {
|
||||
text: {
|
||||
// 缩小宽度和内边距，适配68px容器
|
||||
width: 'auto', // 自动宽度，替代固定40px
|
||||
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) => {
|
||||
// 达标状态：1=达标（绿色），0=未达标（橙色）
|
||||
const safeFlag = data.flags;
|
||||
const safeFlag = data.completed || [];
|
||||
const currentFlag = safeFlag[params.dataIndex] || 0;
|
||||
return currentFlag === 1
|
||||
? {
|
||||
@@ -171,94 +229,10 @@ export default {
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
borderWidth: 0
|
||||
},
|
||||
data: data.reals // 实际销量（万元）
|
||||
data: data.value || [] // 实际销量（万元）
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 毛利率场景数据
|
||||
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 salesData;
|
||||
}
|
||||
},
|
||||
@@ -266,6 +240,7 @@ export default {
|
||||
selectProfit(item) {
|
||||
this.selectedProfit = item;
|
||||
this.isDropdownShow = false;
|
||||
this.$emit('handleGetItemData', item)
|
||||
}
|
||||
},
|
||||
};
|
||||
@@ -281,7 +256,7 @@ export default {
|
||||
// 新增：头部行容器，实现一行排列
|
||||
.header-row {
|
||||
display: flex;
|
||||
justify-content: flex-end; // 左右两端对齐
|
||||
justify-content: space-between; // 左右两端对齐
|
||||
align-items: center; // 垂直居中
|
||||
width: 100%;
|
||||
margin-bottom: 8px; // 与下方图表区保留间距（可根据需求调整）
|
||||
@@ -390,7 +365,7 @@ export default {
|
||||
|
||||
.dropdown-container {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
z-index: 999; // 提高z-index，确保菜单不被遮挡
|
||||
}
|
||||
|
||||
.item-button {
|
||||
@@ -454,18 +429,21 @@ export default {
|
||||
transition: transform 0.2s ease;
|
||||
|
||||
&.rotate {
|
||||
transform: rotate(90deg);
|
||||
transform: rotate(90deg); // 箭头旋转方向可根据需求调整，比如改为rotate(-90deg)更符合向上展开的视觉
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-options {
|
||||
position: absolute;
|
||||
// 关键修改1：调整top值，让菜单显示在选择框上方，calc(-100% - 2px)表示向上偏移自身100%再加2px间距
|
||||
bottom: 100%;
|
||||
right: 0;
|
||||
margin-top: 2px;
|
||||
// 移除多余的margin-top，避免额外间距
|
||||
// margin-top: 2px;
|
||||
width: 123px;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
// 关键修改2：调整border-radius，让菜单顶部圆角匹配选择框的右上角，底部圆角为0（更美观）
|
||||
border-radius: 8px 8px 0 0;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
@@ -2,6 +2,9 @@
|
||||
<div class="coreBar">
|
||||
<!-- 新增行容器：包裹“各基地情况”和barTop -->
|
||||
<div class="header-row">
|
||||
<div class="base-title">
|
||||
各基地情况
|
||||
</div>
|
||||
<div class="barTop">
|
||||
<!-- 关键：新增右侧容器，包裹图例和按钮组，实现整体靠右 -->
|
||||
<div class="right-container">
|
||||
@@ -25,7 +28,7 @@
|
||||
</div>
|
||||
<div class="button-group">
|
||||
<div class="item-button category-btn">
|
||||
<span class="item-text">展示顺序</span>
|
||||
<span class="item-text">类目选择</span>
|
||||
</div>
|
||||
<div class="dropdown-container">
|
||||
<div class="item-button profit-btn active" @click.stop="isDropdownShow = !isDropdownShow">
|
||||
@@ -59,10 +62,10 @@ export default {
|
||||
props: ["chartData"],
|
||||
data() {
|
||||
return {
|
||||
activeButton: 0,
|
||||
isDropdownShow: false,
|
||||
selectedProfit: null, // 选中的名称，初始为null
|
||||
selectedProfit: '原片制造费用成本', // 选中的名称，初始为null
|
||||
profitOptions: [
|
||||
'原片制造费用成本',
|
||||
'包材',
|
||||
'备件丶机物料',
|
||||
'折旧',
|
||||
@@ -75,20 +78,17 @@ export default {
|
||||
// return this.categoryData.map(item => item.name) || [];
|
||||
// },
|
||||
currentDataSource() {
|
||||
console.log('yyyy', this.chartData);
|
||||
|
||||
return this.activeButton === 0 ? this.chartData.sales : this.chartData.grossMargin;
|
||||
return this.chartData
|
||||
},
|
||||
locations() {
|
||||
console.log('this.chartData', this.chartData);
|
||||
|
||||
return this.activeButton === 0 ? this.chartData.salesLocations : this.chartData.grossMarginLocations;
|
||||
return this.chartData.time
|
||||
},
|
||||
// 根据按钮切换生成对应的 chartData
|
||||
chartD() {
|
||||
// 销量场景数据
|
||||
const data = this.currentDataSource;
|
||||
console.log(this.currentDataSource, 'currentDataSource');
|
||||
console.log('this.currentDataSource', data);
|
||||
|
||||
const salesData = {
|
||||
allPlaceNames: this.locations,
|
||||
@@ -115,7 +115,7 @@ export default {
|
||||
{ offset: 1, color: 'rgba(40, 138, 255, 0)' }
|
||||
])
|
||||
},
|
||||
data: data.rates, // 完成率（%）
|
||||
data: data.proportion || [], // 完成率（%）
|
||||
symbol: 'circle',
|
||||
symbolSize: 6
|
||||
},
|
||||
@@ -137,7 +137,7 @@ export default {
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
borderWidth: 0
|
||||
},
|
||||
data: data.targets // 目标销量（万元）
|
||||
data: data.targetValue || [] // 目标销量（万元）
|
||||
},
|
||||
// 3. 实际（柱状图，含达标状态）
|
||||
{
|
||||
@@ -145,10 +145,69 @@ export default {
|
||||
type: 'bar',
|
||||
yAxisIndex: 0,
|
||||
barWidth: 14,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
offset: [0, 0],
|
||||
// 固定label尺寸：68px×20px
|
||||
width: 68,
|
||||
height: 20,
|
||||
// 关键：去掉换行，让文字在一行显示，适配小尺寸
|
||||
formatter: function (params) {
|
||||
const diff = data.diffValue || [];
|
||||
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)' }, // 顶部0px位置：阴影最强
|
||||
// { offset: 0.1, color: 'rgba(205, 215, 224, 0.4)' }, // 1px位置：阴影减弱（对应1px）
|
||||
// { offset: 0.15, color: 'rgba(205, 215, 224, 0.6)' }, // 3px位置：阴影几乎消失（对应3px扩散）
|
||||
{ offset: 0.2, color: '#ffffff' }, // 主体白色
|
||||
{ offset: 1, color: '#ffffff' }
|
||||
]
|
||||
},
|
||||
// 外阴影：0px 2px 2px 0px rgba(191,203,215,0.5)
|
||||
shadowColor: 'rgba(191,203,215,0.5)',
|
||||
shadowBlur: 2,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 2,
|
||||
// 圆角：4px
|
||||
borderRadius: 4,
|
||||
// 移除边框
|
||||
borderColor: '#BFCBD577',
|
||||
borderWidth: 0,
|
||||
// 文字垂直居中（针对富文本）
|
||||
lineHeight: 20,
|
||||
rich: {
|
||||
text: {
|
||||
// 缩小宽度和内边距，适配68px容器
|
||||
width: 'auto', // 自动宽度，替代固定40px
|
||||
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) => {
|
||||
// 达标状态：1=达标（绿色），0=未达标（橙色）
|
||||
const safeFlag = data.flags;
|
||||
const safeFlag = data.completed || [];
|
||||
const currentFlag = safeFlag[params.dataIndex] || 0;
|
||||
return currentFlag === 1
|
||||
? {
|
||||
@@ -171,94 +230,10 @@ export default {
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
borderWidth: 0
|
||||
},
|
||||
data: data.reals // 实际销量（万元）
|
||||
data: data.value || [] // 实际销量（万元）
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 毛利率场景数据
|
||||
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 salesData;
|
||||
}
|
||||
},
|
||||
@@ -266,6 +241,7 @@ export default {
|
||||
selectProfit(item) {
|
||||
this.selectedProfit = item;
|
||||
this.isDropdownShow = false;
|
||||
this.$emit('handleGetItemData', item)
|
||||
}
|
||||
},
|
||||
};
|
||||
@@ -281,7 +257,7 @@ export default {
|
||||
// 新增：头部行容器，实现一行排列
|
||||
.header-row {
|
||||
display: flex;
|
||||
justify-content: flex-end; // 左右两端对齐
|
||||
justify-content: space-between; // 左右两端对齐
|
||||
align-items: center; // 垂直居中
|
||||
width: 100%;
|
||||
margin-bottom: 8px; // 与下方图表区保留间距（可根据需求调整）
|
||||
@@ -390,7 +366,7 @@ export default {
|
||||
|
||||
.dropdown-container {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
z-index: 999; // 提高z-index，确保菜单不被遮挡
|
||||
}
|
||||
|
||||
.item-button {
|
||||
@@ -454,18 +430,21 @@ export default {
|
||||
transition: transform 0.2s ease;
|
||||
|
||||
&.rotate {
|
||||
transform: rotate(90deg);
|
||||
transform: rotate(90deg); // 箭头旋转方向可根据需求调整，比如改为rotate(-90deg)更符合向上展开的视觉
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-options {
|
||||
position: absolute;
|
||||
// 关键修改1：调整top值，让菜单显示在选择框上方，calc(-100% - 2px)表示向上偏移自身100%再加2px间距
|
||||
bottom: 100%;
|
||||
right: 0;
|
||||
margin-top: 2px;
|
||||
// 移除多余的margin-top，避免额外间距
|
||||
// margin-top: 2px;
|
||||
width: 123px;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
// 关键修改2：调整border-radius，让菜单顶部圆角匹配选择框的右上角，底部圆角为0（更美观）
|
||||
border-radius: 8px 8px 0 0;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
@@ -2,6 +2,9 @@
|
||||
<div class="coreBar">
|
||||
<!-- 新增行容器：包裹“各基地情况”和barTop -->
|
||||
<div class="header-row">
|
||||
<div class="base-title">
|
||||
各基地情况
|
||||
</div>
|
||||
<div class="barTop">
|
||||
<!-- 关键：新增右侧容器，包裹图例和按钮组，实现整体靠右 -->
|
||||
<div class="right-container">
|
||||
@@ -25,7 +28,7 @@
|
||||
</div>
|
||||
<div class="button-group">
|
||||
<div class="item-button category-btn">
|
||||
<span class="item-text">展示顺序</span>
|
||||
<span class="item-text">类目选择</span>
|
||||
</div>
|
||||
<div class="dropdown-container">
|
||||
<div class="item-button profit-btn active" @click.stop="isDropdownShow = !isDropdownShow">
|
||||
@@ -59,11 +62,10 @@ export default {
|
||||
props: ["chartData"],
|
||||
data() {
|
||||
return {
|
||||
activeButton: 0,
|
||||
isDropdownShow: false,
|
||||
selectedProfit: null, // 选中的名称，初始为null
|
||||
selectedProfit: '原片原料成本', // 选中的名称，初始为null
|
||||
profitOptions: [
|
||||
'原料成本',
|
||||
'原片原料成本',
|
||||
'硅砂',
|
||||
'海砂',
|
||||
'纯碱',
|
||||
@@ -77,20 +79,17 @@ export default {
|
||||
// return this.categoryData.map(item => item.name) || [];
|
||||
// },
|
||||
currentDataSource() {
|
||||
console.log('yyyy', this.chartData);
|
||||
|
||||
return this.activeButton === 0 ? this.chartData.sales : this.chartData.grossMargin;
|
||||
return this.chartData
|
||||
},
|
||||
locations() {
|
||||
console.log('this.chartData', this.chartData);
|
||||
|
||||
return this.activeButton === 0 ? this.chartData.salesLocations : this.chartData.grossMarginLocations;
|
||||
return this.chartData.time
|
||||
},
|
||||
// 根据按钮切换生成对应的 chartData
|
||||
chartD() {
|
||||
// 销量场景数据
|
||||
const data = this.currentDataSource;
|
||||
console.log(this.currentDataSource, 'currentDataSource');
|
||||
console.log('this.currentDataSource', data);
|
||||
|
||||
const salesData = {
|
||||
allPlaceNames: this.locations,
|
||||
@@ -117,7 +116,7 @@ export default {
|
||||
{ offset: 1, color: 'rgba(40, 138, 255, 0)' }
|
||||
])
|
||||
},
|
||||
data: data.rates, // 完成率（%）
|
||||
data: data.proportion || [], // 完成率（%）
|
||||
symbol: 'circle',
|
||||
symbolSize: 6
|
||||
},
|
||||
@@ -139,7 +138,7 @@ export default {
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
borderWidth: 0
|
||||
},
|
||||
data: data.targets // 目标销量（万元）
|
||||
data: data.targetValue || [] // 目标销量（万元）
|
||||
},
|
||||
// 3. 实际（柱状图，含达标状态）
|
||||
{
|
||||
@@ -147,10 +146,69 @@ export default {
|
||||
type: 'bar',
|
||||
yAxisIndex: 0,
|
||||
barWidth: 14,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
offset: [0, 0],
|
||||
// 固定label尺寸：68px×20px
|
||||
width: 68,
|
||||
height: 20,
|
||||
// 关键：去掉换行，让文字在一行显示，适配小尺寸
|
||||
formatter: function (params) {
|
||||
const diff = data.diffValue || [];
|
||||
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)' }, // 顶部0px位置：阴影最强
|
||||
// { offset: 0.1, color: 'rgba(205, 215, 224, 0.4)' }, // 1px位置：阴影减弱（对应1px）
|
||||
// { offset: 0.15, color: 'rgba(205, 215, 224, 0.6)' }, // 3px位置：阴影几乎消失（对应3px扩散）
|
||||
{ offset: 0.2, color: '#ffffff' }, // 主体白色
|
||||
{ offset: 1, color: '#ffffff' }
|
||||
]
|
||||
},
|
||||
// 外阴影：0px 2px 2px 0px rgba(191,203,215,0.5)
|
||||
shadowColor: 'rgba(191,203,215,0.5)',
|
||||
shadowBlur: 2,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 2,
|
||||
// 圆角：4px
|
||||
borderRadius: 4,
|
||||
// 移除边框
|
||||
borderColor: '#BFCBD577',
|
||||
borderWidth: 0,
|
||||
// 文字垂直居中（针对富文本）
|
||||
lineHeight: 20,
|
||||
rich: {
|
||||
text: {
|
||||
// 缩小宽度和内边距，适配68px容器
|
||||
width: 'auto', // 自动宽度，替代固定40px
|
||||
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) => {
|
||||
// 达标状态：1=达标（绿色），0=未达标（橙色）
|
||||
const safeFlag = data.flags;
|
||||
const safeFlag = data.completed || [];
|
||||
const currentFlag = safeFlag[params.dataIndex] || 0;
|
||||
return currentFlag === 1
|
||||
? {
|
||||
@@ -173,94 +231,10 @@ export default {
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
borderWidth: 0
|
||||
},
|
||||
data: data.reals // 实际销量（万元）
|
||||
data: data.value || [] // 实际销量（万元）
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 毛利率场景数据
|
||||
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 salesData;
|
||||
}
|
||||
},
|
||||
@@ -268,6 +242,7 @@ export default {
|
||||
selectProfit(item) {
|
||||
this.selectedProfit = item;
|
||||
this.isDropdownShow = false;
|
||||
this.$emit('handleGetItemData', item)
|
||||
}
|
||||
},
|
||||
};
|
||||
@@ -283,7 +258,7 @@ export default {
|
||||
// 新增：头部行容器，实现一行排列
|
||||
.header-row {
|
||||
display: flex;
|
||||
justify-content: flex-end; // 左右两端对齐
|
||||
justify-content: space-between; // 左右两端对齐
|
||||
align-items: center; // 垂直居中
|
||||
width: 100%;
|
||||
margin-bottom: 8px; // 与下方图表区保留间距（可根据需求调整）
|
||||
@@ -392,7 +367,7 @@ export default {
|
||||
|
||||
.dropdown-container {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
z-index: 999; // 提高z-index，确保菜单不被遮挡
|
||||
}
|
||||
|
||||
.item-button {
|
||||
@@ -456,18 +431,21 @@ export default {
|
||||
transition: transform 0.2s ease;
|
||||
|
||||
&.rotate {
|
||||
transform: rotate(90deg);
|
||||
transform: rotate(90deg); // 箭头旋转方向可根据需求调整，比如改为rotate(-90deg)更符合向上展开的视觉
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-options {
|
||||
position: absolute;
|
||||
// 关键修改1：调整top值，让菜单显示在选择框上方，calc(-100% - 2px)表示向上偏移自身100%再加2px间距
|
||||
bottom: 100%;
|
||||
right: 0;
|
||||
margin-top: 2px;
|
||||
// 移除多余的margin-top，避免额外间距
|
||||
// margin-top: 2px;
|
||||
width: 123px;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
// 关键修改2：调整border-radius，让菜单顶部圆角匹配选择框的右上角，底部圆角为0（更美观）
|
||||
border-radius: 8px 8px 0 0;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
<div class="coreBar">
|
||||
<!-- 新增行容器：包裹“各基地情况”和barTop -->
|
||||
<div class="header-row">
|
||||
<!-- <div class="base-title">
|
||||
<div class="base-title">
|
||||
各基地情况
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="barTop">
|
||||
<!-- 关键：新增右侧容器，包裹图例和按钮组，实现整体靠右 -->
|
||||
<div class="right-container">
|
||||
@@ -28,7 +28,7 @@
|
||||
</div>
|
||||
<div class="button-group">
|
||||
<div class="item-button category-btn">
|
||||
<span class="item-text">展示顺序</span>
|
||||
<span class="item-text">类目选择</span>
|
||||
</div>
|
||||
<div class="dropdown-container">
|
||||
<div class="item-button profit-btn active" @click.stop="isDropdownShow = !isDropdownShow">
|
||||
@@ -62,10 +62,10 @@ export default {
|
||||
props: ["chartData"],
|
||||
data() {
|
||||
return {
|
||||
activeButton: 0,
|
||||
isDropdownShow: false,
|
||||
selectedProfit: null, // 选中的名称，初始为null
|
||||
selectedProfit: '制造费用', // 选中的名称，初始为null
|
||||
profitOptions: [
|
||||
'制造费用',
|
||||
'备件丶机物料',
|
||||
'折旧',
|
||||
'其他',
|
||||
@@ -77,20 +77,17 @@ export default {
|
||||
// return this.categoryData.map(item => item.name) || [];
|
||||
// },
|
||||
currentDataSource() {
|
||||
console.log('yyyy', this.chartData);
|
||||
|
||||
return this.activeButton === 0 ? this.chartData.sales : this.chartData.grossMargin;
|
||||
return this.chartData
|
||||
},
|
||||
locations() {
|
||||
console.log('this.chartData', this.chartData);
|
||||
|
||||
return this.activeButton === 0 ? this.chartData.salesLocations : this.chartData.grossMarginLocations;
|
||||
return this.chartData.time
|
||||
},
|
||||
// 根据按钮切换生成对应的 chartData
|
||||
chartD() {
|
||||
// 销量场景数据
|
||||
const data = this.currentDataSource;
|
||||
console.log(this.currentDataSource, 'currentDataSource');
|
||||
console.log('this.currentDataSource', data);
|
||||
|
||||
const salesData = {
|
||||
allPlaceNames: this.locations,
|
||||
@@ -117,7 +114,7 @@ export default {
|
||||
{ offset: 1, color: 'rgba(40, 138, 255, 0)' }
|
||||
])
|
||||
},
|
||||
data: data.rates, // 完成率（%）
|
||||
data: data.proportion || [], // 完成率（%）
|
||||
symbol: 'circle',
|
||||
symbolSize: 6
|
||||
},
|
||||
@@ -139,7 +136,7 @@ export default {
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
borderWidth: 0
|
||||
},
|
||||
data: data.targets // 目标销量（万元）
|
||||
data: data.targetValue || [] // 目标销量（万元）
|
||||
},
|
||||
// 3. 实际（柱状图，含达标状态）
|
||||
{
|
||||
@@ -147,10 +144,69 @@ export default {
|
||||
type: 'bar',
|
||||
yAxisIndex: 0,
|
||||
barWidth: 14,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
offset: [0, 0],
|
||||
// 固定label尺寸：68px×20px
|
||||
width: 68,
|
||||
height: 20,
|
||||
// 关键：去掉换行，让文字在一行显示，适配小尺寸
|
||||
formatter: function (params) {
|
||||
const diff = data.diffValue || [];
|
||||
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)' }, // 顶部0px位置：阴影最强
|
||||
// { offset: 0.1, color: 'rgba(205, 215, 224, 0.4)' }, // 1px位置：阴影减弱（对应1px）
|
||||
// { offset: 0.15, color: 'rgba(205, 215, 224, 0.6)' }, // 3px位置：阴影几乎消失（对应3px扩散）
|
||||
{ offset: 0.2, color: '#ffffff' }, // 主体白色
|
||||
{ offset: 1, color: '#ffffff' }
|
||||
]
|
||||
},
|
||||
// 外阴影：0px 2px 2px 0px rgba(191,203,215,0.5)
|
||||
shadowColor: 'rgba(191,203,215,0.5)',
|
||||
shadowBlur: 2,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 2,
|
||||
// 圆角：4px
|
||||
borderRadius: 4,
|
||||
// 移除边框
|
||||
borderColor: '#BFCBD577',
|
||||
borderWidth: 0,
|
||||
// 文字垂直居中（针对富文本）
|
||||
lineHeight: 20,
|
||||
rich: {
|
||||
text: {
|
||||
// 缩小宽度和内边距，适配68px容器
|
||||
width: 'auto', // 自动宽度，替代固定40px
|
||||
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) => {
|
||||
// 达标状态：1=达标（绿色），0=未达标（橙色）
|
||||
const safeFlag = data.flags;
|
||||
const safeFlag = data.completed || [];
|
||||
const currentFlag = safeFlag[params.dataIndex] || 0;
|
||||
return currentFlag === 1
|
||||
? {
|
||||
@@ -173,94 +229,10 @@ export default {
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
borderWidth: 0
|
||||
},
|
||||
data: data.reals // 实际销量（万元）
|
||||
data: data.value || [] // 实际销量（万元）
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 毛利率场景数据
|
||||
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 salesData;
|
||||
}
|
||||
},
|
||||
@@ -268,6 +240,7 @@ export default {
|
||||
selectProfit(item) {
|
||||
this.selectedProfit = item;
|
||||
this.isDropdownShow = false;
|
||||
this.$emit('handleGetItemData', item)
|
||||
}
|
||||
},
|
||||
};
|
||||
@@ -283,7 +256,7 @@ export default {
|
||||
// 新增：头部行容器，实现一行排列
|
||||
.header-row {
|
||||
display: flex;
|
||||
justify-content: flex-end; // 左右两端对齐
|
||||
justify-content: space-between; // 左右两端对齐
|
||||
align-items: center; // 垂直居中
|
||||
width: 100%;
|
||||
margin-bottom: 8px; // 与下方图表区保留间距（可根据需求调整）
|
||||
@@ -392,7 +365,7 @@ export default {
|
||||
|
||||
.dropdown-container {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
z-index: 999; // 提高z-index，确保菜单不被遮挡
|
||||
}
|
||||
|
||||
.item-button {
|
||||
@@ -456,18 +429,21 @@ export default {
|
||||
transition: transform 0.2s ease;
|
||||
|
||||
&.rotate {
|
||||
transform: rotate(90deg);
|
||||
transform: rotate(90deg); // 箭头旋转方向可根据需求调整，比如改为rotate(-90deg)更符合向上展开的视觉
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-options {
|
||||
position: absolute;
|
||||
// 关键修改1：调整top值，让菜单显示在选择框上方，calc(-100% - 2px)表示向上偏移自身100%再加2px间距
|
||||
bottom: 100%;
|
||||
right: 0;
|
||||
margin-top: 2px;
|
||||
// 移除多余的margin-top，避免额外间距
|
||||
// margin-top: 2px;
|
||||
width: 123px;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
// 关键修改2：调整border-radius，让菜单顶部圆角匹配选择框的右上角，底部圆角为0（更美观）
|
||||
border-radius: 8px 8px 0 0;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
<div class="coreBar">
|
||||
<!-- 新增行容器：包裹“各基地情况”和barTop -->
|
||||
<div class="header-row">
|
||||
<!-- <div class="base-title">
|
||||
<div class="base-title">
|
||||
各基地情况
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="barTop">
|
||||
<!-- 关键：新增右侧容器，包裹图例和按钮组，实现整体靠右 -->
|
||||
<div class="right-container">
|
||||
@@ -28,7 +28,7 @@
|
||||
</div>
|
||||
<div class="button-group">
|
||||
<div class="item-button category-btn">
|
||||
<span class="item-text">展示顺序</span>
|
||||
<span class="item-text">类目选择</span>
|
||||
</div>
|
||||
<div class="dropdown-container">
|
||||
<div class="item-button profit-btn active" @click.stop="isDropdownShow = !isDropdownShow">
|
||||
@@ -62,10 +62,10 @@ export default {
|
||||
props: ["chartData"],
|
||||
data() {
|
||||
return {
|
||||
activeButton: 0,
|
||||
isDropdownShow: false,
|
||||
selectedProfit: null, // 选中的名称，初始为null
|
||||
selectedProfit: '加工辅料', // 选中的名称，初始为null
|
||||
profitOptions: [
|
||||
'加工辅料',
|
||||
'镀膜液',
|
||||
'油墨',
|
||||
'釉料',
|
||||
@@ -77,20 +77,17 @@ export default {
|
||||
// return this.categoryData.map(item => item.name) || [];
|
||||
// },
|
||||
currentDataSource() {
|
||||
console.log('yyyy', this.chartData);
|
||||
|
||||
return this.activeButton === 0 ? this.chartData.sales : this.chartData.grossMargin;
|
||||
return this.chartData
|
||||
},
|
||||
locations() {
|
||||
console.log('this.chartData', this.chartData);
|
||||
|
||||
return this.activeButton === 0 ? this.chartData.salesLocations : this.chartData.grossMarginLocations;
|
||||
return this.chartData.time
|
||||
},
|
||||
// 根据按钮切换生成对应的 chartData
|
||||
chartD() {
|
||||
// 销量场景数据
|
||||
const data = this.currentDataSource;
|
||||
console.log(this.currentDataSource, 'currentDataSource');
|
||||
console.log('this.currentDataSource', data);
|
||||
|
||||
const salesData = {
|
||||
allPlaceNames: this.locations,
|
||||
@@ -117,7 +114,7 @@ export default {
|
||||
{ offset: 1, color: 'rgba(40, 138, 255, 0)' }
|
||||
])
|
||||
},
|
||||
data: data.rates, // 完成率（%）
|
||||
data: data.proportion || [], // 完成率（%）
|
||||
symbol: 'circle',
|
||||
symbolSize: 6
|
||||
},
|
||||
@@ -139,7 +136,7 @@ export default {
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
borderWidth: 0
|
||||
},
|
||||
data: data.targets // 目标销量（万元）
|
||||
data: data.targetValue || [] // 目标销量（万元）
|
||||
},
|
||||
// 3. 实际（柱状图，含达标状态）
|
||||
{
|
||||
@@ -147,10 +144,69 @@ export default {
|
||||
type: 'bar',
|
||||
yAxisIndex: 0,
|
||||
barWidth: 14,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
offset: [0, 0],
|
||||
// 固定label尺寸：68px×20px
|
||||
width: 68,
|
||||
height: 20,
|
||||
// 关键：去掉换行，让文字在一行显示，适配小尺寸
|
||||
formatter: function (params) {
|
||||
const diff = data.diffValue || [];
|
||||
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)' }, // 顶部0px位置：阴影最强
|
||||
// { offset: 0.1, color: 'rgba(205, 215, 224, 0.4)' }, // 1px位置：阴影减弱（对应1px）
|
||||
// { offset: 0.15, color: 'rgba(205, 215, 224, 0.6)' }, // 3px位置：阴影几乎消失（对应3px扩散）
|
||||
{ offset: 0.2, color: '#ffffff' }, // 主体白色
|
||||
{ offset: 1, color: '#ffffff' }
|
||||
]
|
||||
},
|
||||
// 外阴影：0px 2px 2px 0px rgba(191,203,215,0.5)
|
||||
shadowColor: 'rgba(191,203,215,0.5)',
|
||||
shadowBlur: 2,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 2,
|
||||
// 圆角：4px
|
||||
borderRadius: 4,
|
||||
// 移除边框
|
||||
borderColor: '#BFCBD577',
|
||||
borderWidth: 0,
|
||||
// 文字垂直居中（针对富文本）
|
||||
lineHeight: 20,
|
||||
rich: {
|
||||
text: {
|
||||
// 缩小宽度和内边距，适配68px容器
|
||||
width: 'auto', // 自动宽度，替代固定40px
|
||||
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) => {
|
||||
// 达标状态：1=达标（绿色），0=未达标（橙色）
|
||||
const safeFlag = data.flags;
|
||||
const safeFlag = data.completed || [];
|
||||
const currentFlag = safeFlag[params.dataIndex] || 0;
|
||||
return currentFlag === 1
|
||||
? {
|
||||
@@ -173,94 +229,10 @@ export default {
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
borderWidth: 0
|
||||
},
|
||||
data: data.reals // 实际销量（万元）
|
||||
data: data.value || [] // 实际销量（万元）
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 毛利率场景数据
|
||||
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 salesData;
|
||||
}
|
||||
},
|
||||
@@ -268,6 +240,7 @@ export default {
|
||||
selectProfit(item) {
|
||||
this.selectedProfit = item;
|
||||
this.isDropdownShow = false;
|
||||
this.$emit('handleGetItemData', item)
|
||||
}
|
||||
},
|
||||
};
|
||||
@@ -283,7 +256,7 @@ export default {
|
||||
// 新增：头部行容器，实现一行排列
|
||||
.header-row {
|
||||
display: flex;
|
||||
justify-content: flex-end; // 左右两端对齐
|
||||
justify-content: space-between; // 左右两端对齐
|
||||
align-items: center; // 垂直居中
|
||||
width: 100%;
|
||||
margin-bottom: 8px; // 与下方图表区保留间距（可根据需求调整）
|
||||
@@ -392,7 +365,7 @@ export default {
|
||||
|
||||
.dropdown-container {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
z-index: 999; // 提高z-index，确保菜单不被遮挡
|
||||
}
|
||||
|
||||
.item-button {
|
||||
@@ -456,18 +429,21 @@ export default {
|
||||
transition: transform 0.2s ease;
|
||||
|
||||
&.rotate {
|
||||
transform: rotate(90deg);
|
||||
transform: rotate(90deg); // 箭头旋转方向可根据需求调整，比如改为rotate(-90deg)更符合向上展开的视觉
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-options {
|
||||
position: absolute;
|
||||
// 关键修改1：调整top值，让菜单显示在选择框上方，calc(-100% - 2px)表示向上偏移自身100%再加2px间距
|
||||
bottom: 100%;
|
||||
right: 0;
|
||||
margin-top: 2px;
|
||||
// 移除多余的margin-top，避免额外间距
|
||||
// margin-top: 2px;
|
||||
width: 123px;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
// 关键修改2：调整border-radius，让菜单顶部圆角匹配选择框的右上角，底部圆角为0（更美观）
|
||||
border-radius: 8px 8px 0 0;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
@@ -2,6 +2,9 @@
|
||||
<div class="coreBar">
|
||||
<!-- 新增行容器：包裹“各基地情况”和barTop -->
|
||||
<div class="header-row">
|
||||
<div class="base-title">
|
||||
各基地情况
|
||||
</div>
|
||||
<div class="barTop">
|
||||
<!-- 关键：新增右侧容器，包裹图例和按钮组，实现整体靠右 -->
|
||||
<div class="right-container">
|
||||
@@ -25,7 +28,7 @@
|
||||
</div>
|
||||
<div class="button-group">
|
||||
<div class="item-button category-btn">
|
||||
<span class="item-text">展示顺序</span>
|
||||
<span class="item-text">类目选择</span>
|
||||
</div>
|
||||
<div class="dropdown-container">
|
||||
<div class="item-button profit-btn active" @click.stop="isDropdownShow = !isDropdownShow">
|
||||
@@ -59,10 +62,10 @@ export default {
|
||||
props: ["chartData"],
|
||||
data() {
|
||||
return {
|
||||
activeButton: 0,
|
||||
isDropdownShow: false,
|
||||
selectedProfit: null, // 选中的名称，初始为null
|
||||
selectedProfit: '加工成本', // 选中的名称，初始为null
|
||||
profitOptions: [
|
||||
'加工成本',
|
||||
'人工成本',
|
||||
'燃料成本',
|
||||
'辅材成本',
|
||||
@@ -76,20 +79,17 @@ export default {
|
||||
// return this.categoryData.map(item => item.name) || [];
|
||||
// },
|
||||
currentDataSource() {
|
||||
console.log('yyyy', this.chartData);
|
||||
|
||||
return this.activeButton === 0 ? this.chartData.sales : this.chartData.grossMargin;
|
||||
return this.chartData
|
||||
},
|
||||
locations() {
|
||||
console.log('this.chartData', this.chartData);
|
||||
|
||||
return this.activeButton === 0 ? this.chartData.salesLocations : this.chartData.grossMarginLocations;
|
||||
return this.chartData.time
|
||||
},
|
||||
// 根据按钮切换生成对应的 chartData
|
||||
chartD() {
|
||||
// 销量场景数据
|
||||
const data = this.currentDataSource;
|
||||
console.log(this.currentDataSource, 'currentDataSource');
|
||||
console.log('this.currentDataSource', data);
|
||||
|
||||
const salesData = {
|
||||
allPlaceNames: this.locations,
|
||||
@@ -116,7 +116,7 @@ export default {
|
||||
{ offset: 1, color: 'rgba(40, 138, 255, 0)' }
|
||||
])
|
||||
},
|
||||
data: data.rates, // 完成率（%）
|
||||
data: data.proportion || [], // 完成率（%）
|
||||
symbol: 'circle',
|
||||
symbolSize: 6
|
||||
},
|
||||
@@ -138,7 +138,7 @@ export default {
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
borderWidth: 0
|
||||
},
|
||||
data: data.targets // 目标销量（万元）
|
||||
data: data.targetValue || [] // 目标销量（万元）
|
||||
},
|
||||
// 3. 实际（柱状图，含达标状态）
|
||||
{
|
||||
@@ -146,10 +146,69 @@ export default {
|
||||
type: 'bar',
|
||||
yAxisIndex: 0,
|
||||
barWidth: 14,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
offset: [0, 0],
|
||||
// 固定label尺寸：68px×20px
|
||||
width: 68,
|
||||
height: 20,
|
||||
// 关键：去掉换行，让文字在一行显示，适配小尺寸
|
||||
formatter: function (params) {
|
||||
const diff = data.diffValue || [];
|
||||
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)' }, // 顶部0px位置：阴影最强
|
||||
// { offset: 0.1, color: 'rgba(205, 215, 224, 0.4)' }, // 1px位置：阴影减弱（对应1px）
|
||||
// { offset: 0.15, color: 'rgba(205, 215, 224, 0.6)' }, // 3px位置：阴影几乎消失（对应3px扩散）
|
||||
{ offset: 0.2, color: '#ffffff' }, // 主体白色
|
||||
{ offset: 1, color: '#ffffff' }
|
||||
]
|
||||
},
|
||||
// 外阴影：0px 2px 2px 0px rgba(191,203,215,0.5)
|
||||
shadowColor: 'rgba(191,203,215,0.5)',
|
||||
shadowBlur: 2,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 2,
|
||||
// 圆角：4px
|
||||
borderRadius: 4,
|
||||
// 移除边框
|
||||
borderColor: '#BFCBD577',
|
||||
borderWidth: 0,
|
||||
// 文字垂直居中（针对富文本）
|
||||
lineHeight: 20,
|
||||
rich: {
|
||||
text: {
|
||||
// 缩小宽度和内边距，适配68px容器
|
||||
width: 'auto', // 自动宽度，替代固定40px
|
||||
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) => {
|
||||
// 达标状态：1=达标（绿色），0=未达标（橙色）
|
||||
const safeFlag = data.flags;
|
||||
const safeFlag = data.completed || [];
|
||||
const currentFlag = safeFlag[params.dataIndex] || 0;
|
||||
return currentFlag === 1
|
||||
? {
|
||||
@@ -172,94 +231,10 @@ export default {
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
borderWidth: 0
|
||||
},
|
||||
data: data.reals // 实际销量（万元）
|
||||
data: data.value || [] // 实际销量（万元）
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 毛利率场景数据
|
||||
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 salesData;
|
||||
}
|
||||
},
|
||||
@@ -267,6 +242,7 @@ export default {
|
||||
selectProfit(item) {
|
||||
this.selectedProfit = item;
|
||||
this.isDropdownShow = false;
|
||||
this.$emit('handleGetItemData', item)
|
||||
}
|
||||
},
|
||||
};
|
||||
@@ -282,7 +258,7 @@ export default {
|
||||
// 新增：头部行容器，实现一行排列
|
||||
.header-row {
|
||||
display: flex;
|
||||
justify-content: flex-end; // 左右两端对齐
|
||||
justify-content: space-between; // 左右两端对齐
|
||||
align-items: center; // 垂直居中
|
||||
width: 100%;
|
||||
margin-bottom: 8px; // 与下方图表区保留间距（可根据需求调整）
|
||||
@@ -391,7 +367,7 @@ export default {
|
||||
|
||||
.dropdown-container {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
z-index: 999; // 提高z-index，确保菜单不被遮挡
|
||||
}
|
||||
|
||||
.item-button {
|
||||
@@ -455,18 +431,21 @@ export default {
|
||||
transition: transform 0.2s ease;
|
||||
|
||||
&.rotate {
|
||||
transform: rotate(90deg);
|
||||
transform: rotate(90deg); // 箭头旋转方向可根据需求调整，比如改为rotate(-90deg)更符合向上展开的视觉
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-options {
|
||||
position: absolute;
|
||||
// 关键修改1：调整top值，让菜单显示在选择框上方，calc(-100% - 2px)表示向上偏移自身100%再加2px间距
|
||||
bottom: 100%;
|
||||
right: 0;
|
||||
margin-top: 2px;
|
||||
// 移除多余的margin-top，避免额外间距
|
||||
// margin-top: 2px;
|
||||
width: 123px;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
// 关键修改2：调整border-radius，让菜单顶部圆角匹配选择框的右上角，底部圆角为0（更美观）
|
||||
border-radius: 8px 8px 0 0;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
<div class="coreBar">
|
||||
<!-- 新增行容器：包裹“各基地情况”和barTop -->
|
||||
<div class="header-row">
|
||||
<!-- <div class="base-title">
|
||||
<div class="base-title">
|
||||
各基地情况
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="barTop">
|
||||
<!-- 关键：新增右侧容器，包裹图例和按钮组，实现整体靠右 -->
|
||||
<div class="right-container">
|
||||
@@ -28,7 +28,7 @@
|
||||
</div>
|
||||
<div class="button-group">
|
||||
<div class="item-button category-btn">
|
||||
<span class="item-text">展示顺序</span>
|
||||
<span class="item-text">类目选择</span>
|
||||
</div>
|
||||
<div class="dropdown-container">
|
||||
<div class="item-button profit-btn active" @click.stop="isDropdownShow = !isDropdownShow">
|
||||
@@ -62,10 +62,10 @@ export default {
|
||||
props: ["chartData"],
|
||||
data() {
|
||||
return {
|
||||
activeButton: 0,
|
||||
isDropdownShow: false,
|
||||
selectedProfit: null, // 选中的名称，初始为null
|
||||
selectedProfit: '电', // 选中的名称，初始为null
|
||||
profitOptions: [
|
||||
'加工燃料成本',
|
||||
'电',
|
||||
'水',
|
||||
]
|
||||
@@ -76,20 +76,17 @@ export default {
|
||||
// return this.categoryData.map(item => item.name) || [];
|
||||
// },
|
||||
currentDataSource() {
|
||||
console.log('yyyy', this.chartData);
|
||||
|
||||
return this.activeButton === 0 ? this.chartData.sales : this.chartData.grossMargin;
|
||||
return this.chartData
|
||||
},
|
||||
locations() {
|
||||
console.log('this.chartData', this.chartData);
|
||||
|
||||
return this.activeButton === 0 ? this.chartData.salesLocations : this.chartData.grossMarginLocations;
|
||||
return this.chartData.time
|
||||
},
|
||||
// 根据按钮切换生成对应的 chartData
|
||||
chartD() {
|
||||
// 销量场景数据
|
||||
const data = this.currentDataSource;
|
||||
console.log(this.currentDataSource, 'currentDataSource');
|
||||
console.log('this.currentDataSource', data);
|
||||
|
||||
const salesData = {
|
||||
allPlaceNames: this.locations,
|
||||
@@ -116,7 +113,7 @@ export default {
|
||||
{ offset: 1, color: 'rgba(40, 138, 255, 0)' }
|
||||
])
|
||||
},
|
||||
data: data.rates, // 完成率（%）
|
||||
data: data.proportion || [], // 完成率（%）
|
||||
symbol: 'circle',
|
||||
symbolSize: 6
|
||||
},
|
||||
@@ -138,7 +135,7 @@ export default {
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
borderWidth: 0
|
||||
},
|
||||
data: data.targets // 目标销量（万元）
|
||||
data: data.targetValue || [] // 目标销量（万元）
|
||||
},
|
||||
// 3. 实际（柱状图，含达标状态）
|
||||
{
|
||||
@@ -146,10 +143,69 @@ export default {
|
||||
type: 'bar',
|
||||
yAxisIndex: 0,
|
||||
barWidth: 14,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
offset: [0, 0],
|
||||
// 固定label尺寸：68px×20px
|
||||
width: 68,
|
||||
height: 20,
|
||||
// 关键：去掉换行，让文字在一行显示，适配小尺寸
|
||||
formatter: function (params) {
|
||||
const diff = data.diffValue || [];
|
||||
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)' }, // 顶部0px位置：阴影最强
|
||||
// { offset: 0.1, color: 'rgba(205, 215, 224, 0.4)' }, // 1px位置：阴影减弱（对应1px）
|
||||
// { offset: 0.15, color: 'rgba(205, 215, 224, 0.6)' }, // 3px位置：阴影几乎消失（对应3px扩散）
|
||||
{ offset: 0.2, color: '#ffffff' }, // 主体白色
|
||||
{ offset: 1, color: '#ffffff' }
|
||||
]
|
||||
},
|
||||
// 外阴影：0px 2px 2px 0px rgba(191,203,215,0.5)
|
||||
shadowColor: 'rgba(191,203,215,0.5)',
|
||||
shadowBlur: 2,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 2,
|
||||
// 圆角：4px
|
||||
borderRadius: 4,
|
||||
// 移除边框
|
||||
borderColor: '#BFCBD577',
|
||||
borderWidth: 0,
|
||||
// 文字垂直居中（针对富文本）
|
||||
lineHeight: 20,
|
||||
rich: {
|
||||
text: {
|
||||
// 缩小宽度和内边距，适配68px容器
|
||||
width: 'auto', // 自动宽度，替代固定40px
|
||||
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) => {
|
||||
// 达标状态：1=达标（绿色），0=未达标（橙色）
|
||||
const safeFlag = data.flags;
|
||||
const safeFlag = data.completed || [];
|
||||
const currentFlag = safeFlag[params.dataIndex] || 0;
|
||||
return currentFlag === 1
|
||||
? {
|
||||
@@ -172,94 +228,10 @@ export default {
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
borderWidth: 0
|
||||
},
|
||||
data: data.reals // 实际销量（万元）
|
||||
data: data.value || [] // 实际销量（万元）
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 毛利率场景数据
|
||||
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 salesData;
|
||||
}
|
||||
},
|
||||
@@ -267,6 +239,7 @@ export default {
|
||||
selectProfit(item) {
|
||||
this.selectedProfit = item;
|
||||
this.isDropdownShow = false;
|
||||
this.$emit('handleGetItemData', item)
|
||||
}
|
||||
},
|
||||
};
|
||||
@@ -282,7 +255,7 @@ export default {
|
||||
// 新增：头部行容器，实现一行排列
|
||||
.header-row {
|
||||
display: flex;
|
||||
justify-content: flex-end; // 左右两端对齐
|
||||
justify-content: space-between; // 左右两端对齐
|
||||
align-items: center; // 垂直居中
|
||||
width: 100%;
|
||||
margin-bottom: 8px; // 与下方图表区保留间距（可根据需求调整）
|
||||
@@ -391,7 +364,7 @@ export default {
|
||||
|
||||
.dropdown-container {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
z-index: 999; // 提高z-index，确保菜单不被遮挡
|
||||
}
|
||||
|
||||
.item-button {
|
||||
@@ -455,18 +428,21 @@ export default {
|
||||
transition: transform 0.2s ease;
|
||||
|
||||
&.rotate {
|
||||
transform: rotate(90deg);
|
||||
transform: rotate(90deg); // 箭头旋转方向可根据需求调整，比如改为rotate(-90deg)更符合向上展开的视觉
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-options {
|
||||
position: absolute;
|
||||
// 关键修改1：调整top值，让菜单显示在选择框上方，calc(-100% - 2px)表示向上偏移自身100%再加2px间距
|
||||
bottom: 100%;
|
||||
right: 0;
|
||||
margin-top: 2px;
|
||||
// 移除多余的margin-top，避免额外间距
|
||||
// margin-top: 2px;
|
||||
width: 123px;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
// 关键修改2：调整border-radius，让菜单顶部圆角匹配选择框的右上角，底部圆角为0（更美观）
|
||||
border-radius: 8px 8px 0 0;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
@@ -62,14 +62,14 @@ export default {
|
||||
activeButton: 0,
|
||||
isDropdownShow: false,
|
||||
selectedProfit: null, // 选中的名称，初始为null
|
||||
profitOptions: [
|
||||
'原片成本',
|
||||
'原料成本',
|
||||
'燃料成本',
|
||||
'电成本',
|
||||
'人工成本',
|
||||
'制造成本',
|
||||
]
|
||||
// profitOptions: [
|
||||
// '原片成本',
|
||||
// '原料成本',
|
||||
// '燃料成本',
|
||||
// '电成本',
|
||||
// '人工成本',
|
||||
// '制造成本',
|
||||
// ]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -77,20 +77,17 @@ export default {
|
||||
// return this.categoryData.map(item => item.name) || [];
|
||||
// },
|
||||
currentDataSource() {
|
||||
console.log('yyyy', this.chartData);
|
||||
|
||||
return this.activeButton === 0 ? this.chartData.sales : this.chartData.grossMargin;
|
||||
return this.chartData
|
||||
},
|
||||
locations() {
|
||||
console.log('this.chartData', this.chartData);
|
||||
|
||||
return this.activeButton === 0 ? this.chartData.salesLocations : this.chartData.grossMarginLocations;
|
||||
return this.chartData.time
|
||||
},
|
||||
// 根据按钮切换生成对应的 chartData
|
||||
chartD() {
|
||||
// 销量场景数据
|
||||
const data = this.currentDataSource;
|
||||
console.log(this.currentDataSource, 'currentDataSource');
|
||||
console.log('this.currentDataSource', data);
|
||||
|
||||
const salesData = {
|
||||
allPlaceNames: this.locations,
|
||||
@@ -117,7 +114,7 @@ export default {
|
||||
{ offset: 1, color: 'rgba(40, 138, 255, 0)' }
|
||||
])
|
||||
},
|
||||
data: data.rates, // 完成率（%）
|
||||
data: data.proportion || [], // 完成率（%）
|
||||
symbol: 'circle',
|
||||
symbolSize: 6
|
||||
},
|
||||
@@ -139,7 +136,7 @@ export default {
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
borderWidth: 0
|
||||
},
|
||||
data: data.targets // 目标销量（万元）
|
||||
data: data.targetValue || [] // 目标销量（万元）
|
||||
},
|
||||
// 3. 实际（柱状图，含达标状态）
|
||||
{
|
||||
@@ -147,10 +144,69 @@ export default {
|
||||
type: 'bar',
|
||||
yAxisIndex: 0,
|
||||
barWidth: 14,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
offset: [0, 0],
|
||||
// 固定label尺寸：68px×20px
|
||||
width: 68,
|
||||
height: 20,
|
||||
// 关键：去掉换行，让文字在一行显示，适配小尺寸
|
||||
formatter: function (params) {
|
||||
const diff = data.diffValue || [];
|
||||
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)' }, // 顶部0px位置：阴影最强
|
||||
// { offset: 0.1, color: 'rgba(205, 215, 224, 0.4)' }, // 1px位置：阴影减弱（对应1px）
|
||||
// { offset: 0.15, color: 'rgba(205, 215, 224, 0.6)' }, // 3px位置：阴影几乎消失（对应3px扩散）
|
||||
{ offset: 0.2, color: '#ffffff' }, // 主体白色
|
||||
{ offset: 1, color: '#ffffff' }
|
||||
]
|
||||
},
|
||||
// 外阴影：0px 2px 2px 0px rgba(191,203,215,0.5)
|
||||
shadowColor: 'rgba(191,203,215,0.5)',
|
||||
shadowBlur: 2,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 2,
|
||||
// 圆角：4px
|
||||
borderRadius: 4,
|
||||
// 移除边框
|
||||
borderColor: '#BFCBD577',
|
||||
borderWidth: 0,
|
||||
// 文字垂直居中（针对富文本）
|
||||
lineHeight: 20,
|
||||
rich: {
|
||||
text: {
|
||||
// 缩小宽度和内边距，适配68px容器
|
||||
width: 'auto', // 自动宽度，替代固定40px
|
||||
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) => {
|
||||
// 达标状态：1=达标（绿色），0=未达标（橙色）
|
||||
const safeFlag = data.flags;
|
||||
const safeFlag = data.completed || [];
|
||||
const currentFlag = safeFlag[params.dataIndex] || 0;
|
||||
return currentFlag === 1
|
||||
? {
|
||||
@@ -173,94 +229,10 @@ export default {
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
borderWidth: 0
|
||||
},
|
||||
data: data.reals // 实际销量（万元）
|
||||
data: data.value || [] // 实际销量（万元）
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 毛利率场景数据
|
||||
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 salesData;
|
||||
}
|
||||
},
|
||||
|
||||
@@ -2,6 +2,9 @@
|
||||
<div class="coreBar">
|
||||
<!-- 新增行容器：包裹“各基地情况”和barTop -->
|
||||
<div class="header-row">
|
||||
<div class="base-title">
|
||||
各基地情况
|
||||
</div>
|
||||
<div class="barTop">
|
||||
<!-- 关键：新增右侧容器，包裹图例和按钮组，实现整体靠右 -->
|
||||
<div class="right-container">
|
||||
@@ -25,7 +28,7 @@
|
||||
</div>
|
||||
<div class="button-group">
|
||||
<div class="item-button category-btn">
|
||||
<span class="item-text">展示顺序</span>
|
||||
<span class="item-text">类目选择</span>
|
||||
</div>
|
||||
<div class="dropdown-container">
|
||||
<div class="item-button profit-btn active" @click.stop="isDropdownShow = !isDropdownShow">
|
||||
@@ -59,10 +62,10 @@ export default {
|
||||
props: ["chartData"],
|
||||
data() {
|
||||
return {
|
||||
activeButton: 0,
|
||||
isDropdownShow: false,
|
||||
selectedProfit: null, // 选中的名称，初始为null
|
||||
selectedProfit: '总制造成本', // 选中的名称，初始为null
|
||||
profitOptions: [
|
||||
'总制造成本',
|
||||
'原片成本',
|
||||
'加工成本',
|
||||
]
|
||||
@@ -73,20 +76,17 @@ export default {
|
||||
// return this.categoryData.map(item => item.name) || [];
|
||||
// },
|
||||
currentDataSource() {
|
||||
console.log('yyyy', this.chartData);
|
||||
|
||||
return this.activeButton === 0 ? this.chartData.sales : this.chartData.grossMargin;
|
||||
return this.chartData
|
||||
},
|
||||
locations() {
|
||||
console.log('this.chartData', this.chartData);
|
||||
|
||||
return this.activeButton === 0 ? this.chartData.salesLocations : this.chartData.grossMarginLocations;
|
||||
return this.chartData.time
|
||||
},
|
||||
// 根据按钮切换生成对应的 chartData
|
||||
chartD() {
|
||||
// 销量场景数据
|
||||
const data = this.currentDataSource;
|
||||
console.log(this.currentDataSource, 'currentDataSource');
|
||||
console.log('this.currentDataSource', data);
|
||||
|
||||
const salesData = {
|
||||
allPlaceNames: this.locations,
|
||||
@@ -113,7 +113,7 @@ export default {
|
||||
{ offset: 1, color: 'rgba(40, 138, 255, 0)' }
|
||||
])
|
||||
},
|
||||
data: data.rates, // 完成率（%）
|
||||
data: data.proportion || [], // 完成率（%）
|
||||
symbol: 'circle',
|
||||
symbolSize: 6
|
||||
},
|
||||
@@ -135,7 +135,7 @@ export default {
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
borderWidth: 0
|
||||
},
|
||||
data: data.targets // 目标销量（万元）
|
||||
data: data.targetValue || [] // 目标销量（万元）
|
||||
},
|
||||
// 3. 实际（柱状图，含达标状态）
|
||||
{
|
||||
@@ -143,10 +143,69 @@ export default {
|
||||
type: 'bar',
|
||||
yAxisIndex: 0,
|
||||
barWidth: 14,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
offset: [0, 0],
|
||||
// 固定label尺寸：68px×20px
|
||||
width: 68,
|
||||
height: 20,
|
||||
// 关键：去掉换行，让文字在一行显示，适配小尺寸
|
||||
formatter: function (params) {
|
||||
const diff = data.diffValue || [];
|
||||
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)' }, // 顶部0px位置：阴影最强
|
||||
// { offset: 0.1, color: 'rgba(205, 215, 224, 0.4)' }, // 1px位置：阴影减弱（对应1px）
|
||||
// { offset: 0.15, color: 'rgba(205, 215, 224, 0.6)' }, // 3px位置：阴影几乎消失（对应3px扩散）
|
||||
{ offset: 0.2, color: '#ffffff' }, // 主体白色
|
||||
{ offset: 1, color: '#ffffff' }
|
||||
]
|
||||
},
|
||||
// 外阴影：0px 2px 2px 0px rgba(191,203,215,0.5)
|
||||
shadowColor: 'rgba(191,203,215,0.5)',
|
||||
shadowBlur: 2,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 2,
|
||||
// 圆角：4px
|
||||
borderRadius: 4,
|
||||
// 移除边框
|
||||
borderColor: '#BFCBD577',
|
||||
borderWidth: 0,
|
||||
// 文字垂直居中（针对富文本）
|
||||
lineHeight: 20,
|
||||
rich: {
|
||||
text: {
|
||||
// 缩小宽度和内边距，适配68px容器
|
||||
width: 'auto', // 自动宽度，替代固定40px
|
||||
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) => {
|
||||
// 达标状态：1=达标（绿色），0=未达标（橙色）
|
||||
const safeFlag = data.flags;
|
||||
const safeFlag = data.completed || [];
|
||||
const currentFlag = safeFlag[params.dataIndex] || 0;
|
||||
return currentFlag === 1
|
||||
? {
|
||||
@@ -169,94 +228,10 @@ export default {
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
borderWidth: 0
|
||||
},
|
||||
data: data.reals // 实际销量（万元）
|
||||
data: data.value || [] // 实际销量（万元）
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 毛利率场景数据
|
||||
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 salesData;
|
||||
}
|
||||
},
|
||||
@@ -264,6 +239,7 @@ export default {
|
||||
selectProfit(item) {
|
||||
this.selectedProfit = item;
|
||||
this.isDropdownShow = false;
|
||||
this.$emit('handleGetItemData', item)
|
||||
}
|
||||
},
|
||||
};
|
||||
@@ -279,7 +255,7 @@ export default {
|
||||
// 新增：头部行容器，实现一行排列
|
||||
.header-row {
|
||||
display: flex;
|
||||
justify-content: flex-end; // 左右两端对齐
|
||||
justify-content: space-between; // 左右两端对齐
|
||||
align-items: center; // 垂直居中
|
||||
width: 100%;
|
||||
margin-bottom: 8px; // 与下方图表区保留间距（可根据需求调整）
|
||||
@@ -388,7 +364,7 @@ export default {
|
||||
|
||||
.dropdown-container {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
z-index: 999; // 提高z-index，确保菜单不被遮挡
|
||||
}
|
||||
|
||||
.item-button {
|
||||
@@ -452,18 +428,21 @@ export default {
|
||||
transition: transform 0.2s ease;
|
||||
|
||||
&.rotate {
|
||||
transform: rotate(90deg);
|
||||
transform: rotate(90deg); // 箭头旋转方向可根据需求调整，比如改为rotate(-90deg)更符合向上展开的视觉
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-options {
|
||||
position: absolute;
|
||||
// 关键修改1：调整top值，让菜单显示在选择框上方，calc(-100% - 2px)表示向上偏移自身100%再加2px间距
|
||||
bottom: 100%;
|
||||
right: 0;
|
||||
margin-top: 2px;
|
||||
// 移除多余的margin-top，避免额外间距
|
||||
// margin-top: 2px;
|
||||
width: 123px;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
// 关键修改2：调整border-radius，让菜单顶部圆角匹配选择框的右上角，底部圆角为0（更美观）
|
||||
border-radius: 8px 8px 0 0;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
@@ -2,6 +2,9 @@
|
||||
<div class="coreBar">
|
||||
<!-- 新增行容器：包裹“各基地情况”和barTop -->
|
||||
<div class="header-row">
|
||||
<div class="base-title">
|
||||
各基地情况
|
||||
</div>
|
||||
<div class="barTop">
|
||||
<!-- 关键：新增右侧容器，包裹图例和按钮组，实现整体靠右 -->
|
||||
<div class="right-container">
|
||||
@@ -25,7 +28,7 @@
|
||||
</div>
|
||||
<div class="button-group">
|
||||
<div class="item-button category-btn">
|
||||
<span class="item-text">展示顺序</span>
|
||||
<span class="item-text">类目选择</span>
|
||||
</div>
|
||||
<div class="dropdown-container">
|
||||
<div class="item-button profit-btn active" @click.stop="isDropdownShow = !isDropdownShow">
|
||||
@@ -59,9 +62,8 @@ export default {
|
||||
props: ["chartData"],
|
||||
data() {
|
||||
return {
|
||||
activeButton: 0,
|
||||
isDropdownShow: false,
|
||||
selectedProfit: null, // 选中的名称，初始为null
|
||||
selectedProfit: '采购单价', // 选中的名称，初始为null
|
||||
profitOptions: [
|
||||
'采购单价',
|
||||
'产量',
|
||||
@@ -76,20 +78,17 @@ export default {
|
||||
// return this.categoryData.map(item => item.name) || [];
|
||||
// },
|
||||
currentDataSource() {
|
||||
console.log('yyyy', this.chartData);
|
||||
|
||||
return this.activeButton === 0 ? this.chartData.sales : this.chartData.grossMargin;
|
||||
return this.chartData
|
||||
},
|
||||
locations() {
|
||||
console.log('this.chartData', this.chartData);
|
||||
|
||||
return this.activeButton === 0 ? this.chartData.salesLocations : this.chartData.grossMarginLocations;
|
||||
return this.chartData.time
|
||||
},
|
||||
// 根据按钮切换生成对应的 chartData
|
||||
chartD() {
|
||||
// 销量场景数据
|
||||
const data = this.currentDataSource;
|
||||
console.log(this.currentDataSource, 'currentDataSource');
|
||||
console.log('this.currentDataSource', data);
|
||||
|
||||
const salesData = {
|
||||
allPlaceNames: this.locations,
|
||||
@@ -116,7 +115,7 @@ export default {
|
||||
{ offset: 1, color: 'rgba(40, 138, 255, 0)' }
|
||||
])
|
||||
},
|
||||
data: data.rates, // 完成率（%）
|
||||
data: data.proportion || [], // 完成率（%）
|
||||
symbol: 'circle',
|
||||
symbolSize: 6
|
||||
},
|
||||
@@ -138,7 +137,7 @@ export default {
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
borderWidth: 0
|
||||
},
|
||||
data: data.targets // 目标销量（万元）
|
||||
data: data.targetValue || [] // 目标销量（万元）
|
||||
},
|
||||
// 3. 实际（柱状图，含达标状态）
|
||||
{
|
||||
@@ -146,10 +145,69 @@ export default {
|
||||
type: 'bar',
|
||||
yAxisIndex: 0,
|
||||
barWidth: 14,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
offset: [0, 0],
|
||||
// 固定label尺寸：68px×20px
|
||||
width: 68,
|
||||
height: 20,
|
||||
// 关键：去掉换行，让文字在一行显示，适配小尺寸
|
||||
formatter: function (params) {
|
||||
const diff = data.diffValue || [];
|
||||
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)' }, // 顶部0px位置：阴影最强
|
||||
// { offset: 0.1, color: 'rgba(205, 215, 224, 0.4)' }, // 1px位置：阴影减弱（对应1px）
|
||||
// { offset: 0.15, color: 'rgba(205, 215, 224, 0.6)' }, // 3px位置：阴影几乎消失（对应3px扩散）
|
||||
{ offset: 0.2, color: '#ffffff' }, // 主体白色
|
||||
{ offset: 1, color: '#ffffff' }
|
||||
]
|
||||
},
|
||||
// 外阴影：0px 2px 2px 0px rgba(191,203,215,0.5)
|
||||
shadowColor: 'rgba(191,203,215,0.5)',
|
||||
shadowBlur: 2,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 2,
|
||||
// 圆角：4px
|
||||
borderRadius: 4,
|
||||
// 移除边框
|
||||
borderColor: '#BFCBD577',
|
||||
borderWidth: 0,
|
||||
// 文字垂直居中（针对富文本）
|
||||
lineHeight: 20,
|
||||
rich: {
|
||||
text: {
|
||||
// 缩小宽度和内边距，适配68px容器
|
||||
width: 'auto', // 自动宽度，替代固定40px
|
||||
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) => {
|
||||
// 达标状态：1=达标（绿色），0=未达标（橙色）
|
||||
const safeFlag = data.flags;
|
||||
const safeFlag = data.completed || [];
|
||||
const currentFlag = safeFlag[params.dataIndex] || 0;
|
||||
return currentFlag === 1
|
||||
? {
|
||||
@@ -172,94 +230,10 @@ export default {
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
borderWidth: 0
|
||||
},
|
||||
data: data.reals // 实际销量（万元）
|
||||
data: data.value || [] // 实际销量（万元）
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 毛利率场景数据
|
||||
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 salesData;
|
||||
}
|
||||
},
|
||||
@@ -267,6 +241,7 @@ export default {
|
||||
selectProfit(item) {
|
||||
this.selectedProfit = item;
|
||||
this.isDropdownShow = false;
|
||||
this.$emit('handleGetItemData', item)
|
||||
}
|
||||
},
|
||||
};
|
||||
@@ -282,7 +257,7 @@ export default {
|
||||
// 新增：头部行容器，实现一行排列
|
||||
.header-row {
|
||||
display: flex;
|
||||
justify-content: flex-end; // 左右两端对齐
|
||||
justify-content: space-between; // 左右两端对齐
|
||||
align-items: center; // 垂直居中
|
||||
width: 100%;
|
||||
margin-bottom: 8px; // 与下方图表区保留间距（可根据需求调整）
|
||||
@@ -391,7 +366,7 @@ export default {
|
||||
|
||||
.dropdown-container {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
z-index: 999; // 提高z-index，确保菜单不被遮挡
|
||||
}
|
||||
|
||||
.item-button {
|
||||
@@ -455,18 +430,21 @@ export default {
|
||||
transition: transform 0.2s ease;
|
||||
|
||||
&.rotate {
|
||||
transform: rotate(90deg);
|
||||
transform: rotate(90deg); // 箭头旋转方向可根据需求调整，比如改为rotate(-90deg)更符合向上展开的视觉
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-options {
|
||||
position: absolute;
|
||||
// 关键修改1：调整top值，让菜单显示在选择框上方，calc(-100% - 2px)表示向上偏移自身100%再加2px间距
|
||||
bottom: 100%;
|
||||
right: 0;
|
||||
margin-top: 2px;
|
||||
// 移除多余的margin-top，避免额外间距
|
||||
// margin-top: 2px;
|
||||
width: 123px;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
// 关键修改2：调整border-radius，让菜单顶部圆角匹配选择框的右上角，底部圆角为0（更美观）
|
||||
border-radius: 8px 8px 0 0;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
@@ -2,6 +2,9 @@
|
||||
<div class="coreBar">
|
||||
<!-- 新增行容器：包裹“各基地情况”和barTop -->
|
||||
<div class="header-row">
|
||||
<div class="base-title">
|
||||
各基地情况
|
||||
</div>
|
||||
<div class="barTop">
|
||||
<!-- 关键：新增右侧容器，包裹图例和按钮组，实现整体靠右 -->
|
||||
<div class="right-container">
|
||||
@@ -25,7 +28,7 @@
|
||||
</div>
|
||||
<div class="button-group">
|
||||
<div class="item-button category-btn">
|
||||
<span class="item-text">展示顺序</span>
|
||||
<span class="item-text">类目选择</span>
|
||||
</div>
|
||||
<div class="dropdown-container">
|
||||
<div class="item-button profit-btn active" @click.stop="isDropdownShow = !isDropdownShow">
|
||||
@@ -59,9 +62,8 @@ export default {
|
||||
props: ["chartData"],
|
||||
data() {
|
||||
return {
|
||||
activeButton: 0,
|
||||
isDropdownShow: false,
|
||||
selectedProfit: null, // 选中的名称，初始为null
|
||||
selectedProfit: '采购单价', // 选中的名称，初始为null
|
||||
profitOptions: [
|
||||
'采购单价',
|
||||
'产量',
|
||||
@@ -75,20 +77,17 @@ export default {
|
||||
// return this.categoryData.map(item => item.name) || [];
|
||||
// },
|
||||
currentDataSource() {
|
||||
console.log('yyyy', this.chartData);
|
||||
|
||||
return this.activeButton === 0 ? this.chartData.sales : this.chartData.grossMargin;
|
||||
return this.chartData
|
||||
},
|
||||
locations() {
|
||||
console.log('this.chartData', this.chartData);
|
||||
|
||||
return this.activeButton === 0 ? this.chartData.salesLocations : this.chartData.grossMarginLocations;
|
||||
return this.chartData.time
|
||||
},
|
||||
// 根据按钮切换生成对应的 chartData
|
||||
chartD() {
|
||||
// 销量场景数据
|
||||
const data = this.currentDataSource;
|
||||
console.log(this.currentDataSource, 'currentDataSource');
|
||||
console.log('this.currentDataSource', data);
|
||||
|
||||
const salesData = {
|
||||
allPlaceNames: this.locations,
|
||||
@@ -115,7 +114,7 @@ export default {
|
||||
{ offset: 1, color: 'rgba(40, 138, 255, 0)' }
|
||||
])
|
||||
},
|
||||
data: data.rates, // 完成率（%）
|
||||
data: data.proportion || [], // 完成率（%）
|
||||
symbol: 'circle',
|
||||
symbolSize: 6
|
||||
},
|
||||
@@ -137,7 +136,7 @@ export default {
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
borderWidth: 0
|
||||
},
|
||||
data: data.targets // 目标销量（万元）
|
||||
data: data.targetValue || [] // 目标销量（万元）
|
||||
},
|
||||
// 3. 实际（柱状图，含达标状态）
|
||||
{
|
||||
@@ -145,10 +144,69 @@ export default {
|
||||
type: 'bar',
|
||||
yAxisIndex: 0,
|
||||
barWidth: 14,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
offset: [0, 0],
|
||||
// 固定label尺寸：68px×20px
|
||||
width: 68,
|
||||
height: 20,
|
||||
// 关键：去掉换行，让文字在一行显示，适配小尺寸
|
||||
formatter: function (params) {
|
||||
const diff = data.diffValue || [];
|
||||
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)' }, // 顶部0px位置：阴影最强
|
||||
// { offset: 0.1, color: 'rgba(205, 215, 224, 0.4)' }, // 1px位置：阴影减弱（对应1px）
|
||||
// { offset: 0.15, color: 'rgba(205, 215, 224, 0.6)' }, // 3px位置：阴影几乎消失（对应3px扩散）
|
||||
{ offset: 0.2, color: '#ffffff' }, // 主体白色
|
||||
{ offset: 1, color: '#ffffff' }
|
||||
]
|
||||
},
|
||||
// 外阴影：0px 2px 2px 0px rgba(191,203,215,0.5)
|
||||
shadowColor: 'rgba(191,203,215,0.5)',
|
||||
shadowBlur: 2,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 2,
|
||||
// 圆角：4px
|
||||
borderRadius: 4,
|
||||
// 移除边框
|
||||
borderColor: '#BFCBD577',
|
||||
borderWidth: 0,
|
||||
// 文字垂直居中（针对富文本）
|
||||
lineHeight: 20,
|
||||
rich: {
|
||||
text: {
|
||||
// 缩小宽度和内边距，适配68px容器
|
||||
width: 'auto', // 自动宽度，替代固定40px
|
||||
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) => {
|
||||
// 达标状态：1=达标（绿色），0=未达标（橙色）
|
||||
const safeFlag = data.flags;
|
||||
const safeFlag = data.completed || [];
|
||||
const currentFlag = safeFlag[params.dataIndex] || 0;
|
||||
return currentFlag === 1
|
||||
? {
|
||||
@@ -171,94 +229,10 @@ export default {
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
borderWidth: 0
|
||||
},
|
||||
data: data.reals // 实际销量（万元）
|
||||
data: data.value || [] // 实际销量（万元）
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 毛利率场景数据
|
||||
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 salesData;
|
||||
}
|
||||
},
|
||||
@@ -266,6 +240,7 @@ export default {
|
||||
selectProfit(item) {
|
||||
this.selectedProfit = item;
|
||||
this.isDropdownShow = false;
|
||||
this.$emit('handleGetItemData', item)
|
||||
}
|
||||
},
|
||||
};
|
||||
@@ -281,7 +256,7 @@ export default {
|
||||
// 新增：头部行容器，实现一行排列
|
||||
.header-row {
|
||||
display: flex;
|
||||
justify-content: flex-end; // 左右两端对齐
|
||||
justify-content: space-between; // 左右两端对齐
|
||||
align-items: center; // 垂直居中
|
||||
width: 100%;
|
||||
margin-bottom: 8px; // 与下方图表区保留间距（可根据需求调整）
|
||||
@@ -390,7 +365,7 @@ export default {
|
||||
|
||||
.dropdown-container {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
z-index: 999; // 提高z-index，确保菜单不被遮挡
|
||||
}
|
||||
|
||||
.item-button {
|
||||
@@ -454,18 +429,21 @@ export default {
|
||||
transition: transform 0.2s ease;
|
||||
|
||||
&.rotate {
|
||||
transform: rotate(90deg);
|
||||
transform: rotate(90deg); // 箭头旋转方向可根据需求调整，比如改为rotate(-90deg)更符合向上展开的视觉
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-options {
|
||||
position: absolute;
|
||||
// 关键修改1：调整top值，让菜单显示在选择框上方，calc(-100% - 2px)表示向上偏移自身100%再加2px间距
|
||||
bottom: 100%;
|
||||
right: 0;
|
||||
margin-top: 2px;
|
||||
// 移除多余的margin-top，避免额外间距
|
||||
// margin-top: 2px;
|
||||
width: 123px;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
// 关键修改2：调整border-radius，让菜单顶部圆角匹配选择框的右上角，底部圆角为0（更美观）
|
||||
border-radius: 8px 8px 0 0;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<div style="flex: 1">
|
||||
<Container name="数据趋势" icon="cockpitItemIcon" size="opLargeBg" topSize="large">
|
||||
<!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
|
||||
<div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%; gap: 16px">
|
||||
<div class="right" style="
|
||||
height: 191px;
|
||||
@@ -9,13 +8,14 @@
|
||||
width: 1595px;
|
||||
background-color: rgba(249, 252, 255, 1);
|
||||
">
|
||||
<!-- <top-item /> -->
|
||||
<dataTrendBar :chartData="chartData" />
|
||||
<!-- 直接使用计算属性 chartData，无需手动更新 -->
|
||||
<dataTrendBar @handleGetItemData="getData" :chartData="chartData" />
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Container from "../components/container.vue";
|
||||
import dataTrendBar from "./dataTrendBarCombustible.vue";
|
||||
@@ -24,174 +24,106 @@ export default {
|
||||
name: "ProductionStatus",
|
||||
components: { Container, dataTrendBar },
|
||||
props: {
|
||||
salesTrendMap: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
grossMarginTrendMap: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
trendData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chartData: null, // 初始化 chartData 为 null
|
||||
// 移除：原 chartData 定义，改为计算属性
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
grossMarginTrendMap: {
|
||||
handler() {
|
||||
this.processChartData();
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
salesTrendMap: {
|
||||
handler() {
|
||||
this.processChartData();
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
// 移除：原 watch 监听配置，计算属性自动响应 trendData 变化
|
||||
computed: {
|
||||
/**
|
||||
* chartData 计算属性：自动响应 trendData 变化，格式化并提取各字段数组
|
||||
* @returns {Object} 包含6个独立数组的格式化数据
|
||||
*/
|
||||
chartData() {
|
||||
// 初始化6个独立数组
|
||||
const timeArr = []; // 格式化后的年月数组
|
||||
const valueArr = []; // 实际值数组
|
||||
const diffValueArr = []; // 差异值数组
|
||||
const targetValueArr = []; // 目标值数组
|
||||
const proportionArr = []; // 占比数组
|
||||
const completedArr = []; // 完成率数组
|
||||
|
||||
// 遍历传入的 trendData 数组（响应式依赖，变化时自动重算）
|
||||
this.trendData.forEach((item) => {
|
||||
// 1. 格式化时间并推入时间数组
|
||||
const yearMonth = this.formatTimeToYearMonth(item.time);
|
||||
timeArr.push(yearMonth);
|
||||
|
||||
// 2. 提取其他字段，兜底为0（防止null/undefined影响图表渲染）
|
||||
valueArr.push(item.value ?? 0);
|
||||
diffValueArr.push(item.diffValue ?? 0);
|
||||
targetValueArr.push(item.targetValue ?? 0);
|
||||
proportionArr.push(item.proportion ?? 0);
|
||||
completedArr.push(item.completed ?? 0);
|
||||
});
|
||||
|
||||
// 组装并返回格式化后的数据（结构与原一致）
|
||||
return {
|
||||
time: timeArr,
|
||||
value: valueArr,
|
||||
diffValue: diffValueArr,
|
||||
targetValue: targetValueArr,
|
||||
proportion: proportionArr,
|
||||
completed: completedArr,
|
||||
rawData: this.trendData, // 透传原始数据，方便子组件使用
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 核心处理函数：在所有数据都准备好后，才组装 chartData
|
||||
* 格式化时间戳为年月格式（YYYY-MM）
|
||||
* @param {Number} timestamp 13位毫秒级时间戳
|
||||
* @returns {String} 格式化后的年月字符串（如：2025-10）
|
||||
*/
|
||||
processChartData() {
|
||||
// 关键改动：增加数据有效性检查
|
||||
// 检查 salesTrendMap 是否有实际数据（不只是空对象）
|
||||
const isSalesDataReady = Object.keys(this.salesTrendMap).length > 0;
|
||||
// 检查 grossMarginTrendMap 是否有实际数据
|
||||
const isGrossMarginDataReady =
|
||||
Object.keys(this.grossMarginTrendMap).length > 0;
|
||||
|
||||
// 如果任一数据未准备好，则不更新 chartData，或传递一个加载中的状态
|
||||
// 你可以根据业务需求调整这里的逻辑，比如：
|
||||
// 1. 等待两者都准备好
|
||||
// 2. 只要有一个准备好了就更新，但确保另一个有合理的默认值
|
||||
|
||||
// --- 方案一：等待两者都准备好 ---
|
||||
// if (!isSalesDataReady || !isGrossMarginDataReady) {
|
||||
// console.log('数据尚未全部准备好，暂不更新图表');
|
||||
// this.chartData = {
|
||||
// grossMarginLocations: [],
|
||||
// salesLocations: [],
|
||||
// grossMargin: { rates: [], reals: [], targets: [], flags: [] },
|
||||
// sales: { rates: [], reals: [], targets: [], flags: [] },
|
||||
// };
|
||||
// return;
|
||||
// }
|
||||
|
||||
// --- 方案二 (推荐)：有什么数据就显示什么，没有的就显示空 ---
|
||||
// 这种方式更友好，用户可以先看到部分数据
|
||||
const grossMarginLocations = isGrossMarginDataReady
|
||||
? Object.keys(this.grossMarginTrendMap)
|
||||
: [];
|
||||
const salesLocations = isSalesDataReady
|
||||
? Object.keys(this.salesTrendMap)
|
||||
: [];
|
||||
|
||||
const processedGrossMarginData = isGrossMarginDataReady
|
||||
? this.processSingleDataset(
|
||||
grossMarginLocations,
|
||||
this.grossMarginTrendMap
|
||||
)
|
||||
: { rates: [], reals: [], targets: [], flags: [] };
|
||||
|
||||
const processedSalesData = isSalesDataReady
|
||||
? this.processSingleDataset(salesLocations, this.salesTrendMap)
|
||||
: { rates: [], reals: [], targets: [], flags: [] };
|
||||
|
||||
// 3. 组装最终的 chartData 对象
|
||||
this.chartData = {
|
||||
grossMarginLocations: grossMarginLocations,
|
||||
salesLocations: salesLocations,
|
||||
grossMargin: processedGrossMarginData,
|
||||
sales: processedSalesData,
|
||||
};
|
||||
|
||||
console.log("chartData 已更新:", this.chartData);
|
||||
formatTimeToYearMonth(timestamp) {
|
||||
if (!timestamp || isNaN(timestamp)) {
|
||||
return ""; // 容错：非有效时间戳返回空字符串
|
||||
}
|
||||
const date = new Date(timestamp);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，补0至2位
|
||||
return `${year}-${month}`;
|
||||
},
|
||||
|
||||
/**
|
||||
* 通用数据处理函数（纯函数）
|
||||
* @param {Array} locations - 某个指标的地点数组
|
||||
* @param {Object} dataMap - 该指标的原始数据映射
|
||||
* @returns {Object} - 格式化后的数据对象
|
||||
*/
|
||||
processSingleDataset(locations, dataMap) {
|
||||
const rates = [];
|
||||
const reals = [];
|
||||
const targets = [];
|
||||
const flags = [];
|
||||
|
||||
locations.forEach((location) => {
|
||||
const data = dataMap[location] || {};
|
||||
// 优化：处理 data.rate 为 null/undefined 的情况
|
||||
const rate =
|
||||
data.rate !== null && data.rate !== undefined
|
||||
? Math.round(data.rate * 100)
|
||||
: 0;
|
||||
|
||||
rates.push(rate);
|
||||
reals.push(data.real ?? 0); // 使用空值合并运算符
|
||||
targets.push(data.target ?? 0);
|
||||
|
||||
// 优化：更清晰的逻辑
|
||||
if (data.target === 0) {
|
||||
flags.push(1); // 如果目标为0，默认达标
|
||||
} else {
|
||||
flags.push(rate >= 100 ? 1 : 0);
|
||||
}
|
||||
});
|
||||
|
||||
return { rates, reals, targets, flags };
|
||||
getData(value) {
|
||||
this.$emit('getData', value)
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 3. 核心：滚动容器样式（固定高度+溢出滚动+隐藏滚动条） */
|
||||
/* 原有样式保持不变 */
|
||||
.scroll-container {
|
||||
/* 1. 固定容器高度：根据页面布局调整（示例300px，超出则滚动） */
|
||||
max-height: 210px;
|
||||
/* 2. 溢出滚动：内容超出高度时显示滚动功能 */
|
||||
overflow-y: auto;
|
||||
/* 3. 隐藏横向滚动条（防止设备名过长导致横向滚动） */
|
||||
overflow-x: hidden;
|
||||
/* 4. 内边距：与标题栏和容器边缘对齐 */
|
||||
padding: 10px 0;
|
||||
|
||||
/* 5. 隐藏滚动条（兼容主流浏览器） */
|
||||
/* Chrome/Safari */
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
scrollbar-width: none;
|
||||
/* IE/Edge */
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
/* 设备项样式优化：增加间距，避免拥挤 */
|
||||
.proBarInfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 8px 27px;
|
||||
/* 调整内边距，优化排版 */
|
||||
margin-bottom: 10px;
|
||||
/* 设备项之间的垂直间距 */
|
||||
}
|
||||
|
||||
/* 原有样式保留，优化细节 */
|
||||
.proBarInfoEqInfo {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
/* 垂直居中，避免序号/文字错位 */
|
||||
}
|
||||
|
||||
.slot {
|
||||
@@ -204,14 +136,12 @@ export default {
|
||||
font-size: 16px;
|
||||
color: #68b5ff;
|
||||
line-height: 23px;
|
||||
/* 垂直居中文字 */
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.eq-name {
|
||||
margin-left: 8px;
|
||||
/* 增加与序号的间距 */
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
@@ -237,7 +167,6 @@ export default {
|
||||
height: 14px;
|
||||
border: 1px solid #adadad;
|
||||
margin: 0 8px;
|
||||
/* 优化分割线间距 */
|
||||
}
|
||||
|
||||
.yield {
|
||||
@@ -254,22 +183,18 @@ export default {
|
||||
.proBarInfoEqInfoLeft {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 序号和设备名垂直居中 */
|
||||
}
|
||||
|
||||
.proBarInfoEqInfoRight {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 状态/分割线/百分比垂直居中 */
|
||||
}
|
||||
|
||||
.proBarWrapper {
|
||||
position: relative;
|
||||
height: 10px;
|
||||
margin-top: 6px;
|
||||
/* 进度条与上方信息的间距 */
|
||||
border-radius: 5px;
|
||||
/* 进度条圆角，优化视觉 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -285,19 +210,15 @@ export default {
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
65deg,
|
||||
rgba(53, 223, 247, 0) 0%,
|
||||
rgba(54, 220, 246, 0.92) 92%,
|
||||
#36f6e5 100%,
|
||||
#37acf5 100%
|
||||
);
|
||||
background: linear-gradient(65deg,
|
||||
rgba(53, 223, 247, 0) 0%,
|
||||
rgba(54, 220, 246, 0.92) 92%,
|
||||
#36f6e5 100%,
|
||||
#37acf5 100%);
|
||||
border-radius: 5px;
|
||||
transition: width 0.3s ease;
|
||||
/* 进度变化时添加过渡动画，更流畅 */
|
||||
}
|
||||
|
||||
/* 图表相关样式保留 */
|
||||
.chartImgBottom {
|
||||
position: absolute;
|
||||
bottom: 45px;
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<div style="flex: 1">
|
||||
<Container name="数据趋势" icon="cockpitItemIcon" size="opLargeBg" topSize="large">
|
||||
<!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
|
||||
<div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%; gap: 16px">
|
||||
<div class="right" style="
|
||||
height: 191px;
|
||||
@@ -9,13 +8,14 @@
|
||||
width: 1595px;
|
||||
background-color: rgba(249, 252, 255, 1);
|
||||
">
|
||||
<!-- <top-item /> -->
|
||||
<dataTrendBar :chartData="chartData" />
|
||||
<!-- 直接使用计算属性 chartData，无需手动更新 -->
|
||||
<dataTrendBar @handleGetItemData="getData" :chartData="chartData" />
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Container from "../components/container.vue";
|
||||
import dataTrendBar from "./dataTrendBarFactoryBurden.vue";
|
||||
@@ -24,174 +24,106 @@ export default {
|
||||
name: "ProductionStatus",
|
||||
components: { Container, dataTrendBar },
|
||||
props: {
|
||||
salesTrendMap: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
grossMarginTrendMap: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
trendData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chartData: null, // 初始化 chartData 为 null
|
||||
// 移除：原 chartData 定义，改为计算属性
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
grossMarginTrendMap: {
|
||||
handler() {
|
||||
this.processChartData();
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
salesTrendMap: {
|
||||
handler() {
|
||||
this.processChartData();
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
// 移除：原 watch 监听配置，计算属性自动响应 trendData 变化
|
||||
computed: {
|
||||
/**
|
||||
* chartData 计算属性：自动响应 trendData 变化，格式化并提取各字段数组
|
||||
* @returns {Object} 包含6个独立数组的格式化数据
|
||||
*/
|
||||
chartData() {
|
||||
// 初始化6个独立数组
|
||||
const timeArr = []; // 格式化后的年月数组
|
||||
const valueArr = []; // 实际值数组
|
||||
const diffValueArr = []; // 差异值数组
|
||||
const targetValueArr = []; // 目标值数组
|
||||
const proportionArr = []; // 占比数组
|
||||
const completedArr = []; // 完成率数组
|
||||
|
||||
// 遍历传入的 trendData 数组（响应式依赖，变化时自动重算）
|
||||
this.trendData.forEach((item) => {
|
||||
// 1. 格式化时间并推入时间数组
|
||||
const yearMonth = this.formatTimeToYearMonth(item.time);
|
||||
timeArr.push(yearMonth);
|
||||
|
||||
// 2. 提取其他字段，兜底为0（防止null/undefined影响图表渲染）
|
||||
valueArr.push(item.value ?? 0);
|
||||
diffValueArr.push(item.diffValue ?? 0);
|
||||
targetValueArr.push(item.targetValue ?? 0);
|
||||
proportionArr.push(item.proportion ?? 0);
|
||||
completedArr.push(item.completed ?? 0);
|
||||
});
|
||||
|
||||
// 组装并返回格式化后的数据（结构与原一致）
|
||||
return {
|
||||
time: timeArr,
|
||||
value: valueArr,
|
||||
diffValue: diffValueArr,
|
||||
targetValue: targetValueArr,
|
||||
proportion: proportionArr,
|
||||
completed: completedArr,
|
||||
rawData: this.trendData, // 透传原始数据，方便子组件使用
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 核心处理函数：在所有数据都准备好后，才组装 chartData
|
||||
* 格式化时间戳为年月格式（YYYY-MM）
|
||||
* @param {Number} timestamp 13位毫秒级时间戳
|
||||
* @returns {String} 格式化后的年月字符串（如：2025-10）
|
||||
*/
|
||||
processChartData() {
|
||||
// 关键改动：增加数据有效性检查
|
||||
// 检查 salesTrendMap 是否有实际数据（不只是空对象）
|
||||
const isSalesDataReady = Object.keys(this.salesTrendMap).length > 0;
|
||||
// 检查 grossMarginTrendMap 是否有实际数据
|
||||
const isGrossMarginDataReady =
|
||||
Object.keys(this.grossMarginTrendMap).length > 0;
|
||||
|
||||
// 如果任一数据未准备好，则不更新 chartData，或传递一个加载中的状态
|
||||
// 你可以根据业务需求调整这里的逻辑，比如：
|
||||
// 1. 等待两者都准备好
|
||||
// 2. 只要有一个准备好了就更新，但确保另一个有合理的默认值
|
||||
|
||||
// --- 方案一：等待两者都准备好 ---
|
||||
// if (!isSalesDataReady || !isGrossMarginDataReady) {
|
||||
// console.log('数据尚未全部准备好，暂不更新图表');
|
||||
// this.chartData = {
|
||||
// grossMarginLocations: [],
|
||||
// salesLocations: [],
|
||||
// grossMargin: { rates: [], reals: [], targets: [], flags: [] },
|
||||
// sales: { rates: [], reals: [], targets: [], flags: [] },
|
||||
// };
|
||||
// return;
|
||||
// }
|
||||
|
||||
// --- 方案二 (推荐)：有什么数据就显示什么，没有的就显示空 ---
|
||||
// 这种方式更友好，用户可以先看到部分数据
|
||||
const grossMarginLocations = isGrossMarginDataReady
|
||||
? Object.keys(this.grossMarginTrendMap)
|
||||
: [];
|
||||
const salesLocations = isSalesDataReady
|
||||
? Object.keys(this.salesTrendMap)
|
||||
: [];
|
||||
|
||||
const processedGrossMarginData = isGrossMarginDataReady
|
||||
? this.processSingleDataset(
|
||||
grossMarginLocations,
|
||||
this.grossMarginTrendMap
|
||||
)
|
||||
: { rates: [], reals: [], targets: [], flags: [] };
|
||||
|
||||
const processedSalesData = isSalesDataReady
|
||||
? this.processSingleDataset(salesLocations, this.salesTrendMap)
|
||||
: { rates: [], reals: [], targets: [], flags: [] };
|
||||
|
||||
// 3. 组装最终的 chartData 对象
|
||||
this.chartData = {
|
||||
grossMarginLocations: grossMarginLocations,
|
||||
salesLocations: salesLocations,
|
||||
grossMargin: processedGrossMarginData,
|
||||
sales: processedSalesData,
|
||||
};
|
||||
|
||||
console.log("chartData 已更新:", this.chartData);
|
||||
formatTimeToYearMonth(timestamp) {
|
||||
if (!timestamp || isNaN(timestamp)) {
|
||||
return ""; // 容错：非有效时间戳返回空字符串
|
||||
}
|
||||
const date = new Date(timestamp);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，补0至2位
|
||||
return `${year}-${month}`;
|
||||
},
|
||||
|
||||
/**
|
||||
* 通用数据处理函数（纯函数）
|
||||
* @param {Array} locations - 某个指标的地点数组
|
||||
* @param {Object} dataMap - 该指标的原始数据映射
|
||||
* @returns {Object} - 格式化后的数据对象
|
||||
*/
|
||||
processSingleDataset(locations, dataMap) {
|
||||
const rates = [];
|
||||
const reals = [];
|
||||
const targets = [];
|
||||
const flags = [];
|
||||
|
||||
locations.forEach((location) => {
|
||||
const data = dataMap[location] || {};
|
||||
// 优化：处理 data.rate 为 null/undefined 的情况
|
||||
const rate =
|
||||
data.rate !== null && data.rate !== undefined
|
||||
? Math.round(data.rate * 100)
|
||||
: 0;
|
||||
|
||||
rates.push(rate);
|
||||
reals.push(data.real ?? 0); // 使用空值合并运算符
|
||||
targets.push(data.target ?? 0);
|
||||
|
||||
// 优化：更清晰的逻辑
|
||||
if (data.target === 0) {
|
||||
flags.push(1); // 如果目标为0，默认达标
|
||||
} else {
|
||||
flags.push(rate >= 100 ? 1 : 0);
|
||||
}
|
||||
});
|
||||
|
||||
return { rates, reals, targets, flags };
|
||||
getData(value) {
|
||||
this.$emit('getData', value)
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 3. 核心：滚动容器样式（固定高度+溢出滚动+隐藏滚动条） */
|
||||
/* 原有样式保持不变 */
|
||||
.scroll-container {
|
||||
/* 1. 固定容器高度：根据页面布局调整（示例300px，超出则滚动） */
|
||||
max-height: 210px;
|
||||
/* 2. 溢出滚动：内容超出高度时显示滚动功能 */
|
||||
overflow-y: auto;
|
||||
/* 3. 隐藏横向滚动条（防止设备名过长导致横向滚动） */
|
||||
overflow-x: hidden;
|
||||
/* 4. 内边距：与标题栏和容器边缘对齐 */
|
||||
padding: 10px 0;
|
||||
|
||||
/* 5. 隐藏滚动条（兼容主流浏览器） */
|
||||
/* Chrome/Safari */
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
scrollbar-width: none;
|
||||
/* IE/Edge */
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
/* 设备项样式优化：增加间距，避免拥挤 */
|
||||
.proBarInfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 8px 27px;
|
||||
/* 调整内边距，优化排版 */
|
||||
margin-bottom: 10px;
|
||||
/* 设备项之间的垂直间距 */
|
||||
}
|
||||
|
||||
/* 原有样式保留，优化细节 */
|
||||
.proBarInfoEqInfo {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
/* 垂直居中，避免序号/文字错位 */
|
||||
}
|
||||
|
||||
.slot {
|
||||
@@ -204,14 +136,12 @@ export default {
|
||||
font-size: 16px;
|
||||
color: #68b5ff;
|
||||
line-height: 23px;
|
||||
/* 垂直居中文字 */
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.eq-name {
|
||||
margin-left: 8px;
|
||||
/* 增加与序号的间距 */
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
@@ -237,7 +167,6 @@ export default {
|
||||
height: 14px;
|
||||
border: 1px solid #adadad;
|
||||
margin: 0 8px;
|
||||
/* 优化分割线间距 */
|
||||
}
|
||||
|
||||
.yield {
|
||||
@@ -254,22 +183,18 @@ export default {
|
||||
.proBarInfoEqInfoLeft {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 序号和设备名垂直居中 */
|
||||
}
|
||||
|
||||
.proBarInfoEqInfoRight {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 状态/分割线/百分比垂直居中 */
|
||||
}
|
||||
|
||||
.proBarWrapper {
|
||||
position: relative;
|
||||
height: 10px;
|
||||
margin-top: 6px;
|
||||
/* 进度条与上方信息的间距 */
|
||||
border-radius: 5px;
|
||||
/* 进度条圆角，优化视觉 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -285,19 +210,15 @@ export default {
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
65deg,
|
||||
rgba(53, 223, 247, 0) 0%,
|
||||
rgba(54, 220, 246, 0.92) 92%,
|
||||
#36f6e5 100%,
|
||||
#37acf5 100%
|
||||
);
|
||||
background: linear-gradient(65deg,
|
||||
rgba(53, 223, 247, 0) 0%,
|
||||
rgba(54, 220, 246, 0.92) 92%,
|
||||
#36f6e5 100%,
|
||||
#37acf5 100%);
|
||||
border-radius: 5px;
|
||||
transition: width 0.3s ease;
|
||||
/* 进度变化时添加过渡动画，更流畅 */
|
||||
}
|
||||
|
||||
/* 图表相关样式保留 */
|
||||
.chartImgBottom {
|
||||
position: absolute;
|
||||
bottom: 45px;
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<div style="flex: 1">
|
||||
<Container name="数据趋势" icon="cockpitItemIcon" size="opLargeBg" topSize="large">
|
||||
<!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
|
||||
<div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%; gap: 16px">
|
||||
<div class="right" style="
|
||||
height: 191px;
|
||||
@@ -9,13 +8,14 @@
|
||||
width: 1595px;
|
||||
background-color: rgba(249, 252, 255, 1);
|
||||
">
|
||||
<!-- <top-item /> -->
|
||||
<dataTrendBar :chartData="chartData" />
|
||||
<!-- 直接使用计算属性 chartData，无需手动更新 -->
|
||||
<dataTrendBar @handleGetItemData="getData" :chartData="chartData" />
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Container from "../components/container.vue";
|
||||
import dataTrendBar from "./dataTrendBarFuel.vue";
|
||||
@@ -24,174 +24,106 @@ export default {
|
||||
name: "ProductionStatus",
|
||||
components: { Container, dataTrendBar },
|
||||
props: {
|
||||
salesTrendMap: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
grossMarginTrendMap: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
trendData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chartData: null, // 初始化 chartData 为 null
|
||||
// 移除：原 chartData 定义，改为计算属性
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
grossMarginTrendMap: {
|
||||
handler() {
|
||||
this.processChartData();
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
salesTrendMap: {
|
||||
handler() {
|
||||
this.processChartData();
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
// 移除：原 watch 监听配置，计算属性自动响应 trendData 变化
|
||||
computed: {
|
||||
/**
|
||||
* chartData 计算属性：自动响应 trendData 变化，格式化并提取各字段数组
|
||||
* @returns {Object} 包含6个独立数组的格式化数据
|
||||
*/
|
||||
chartData() {
|
||||
// 初始化6个独立数组
|
||||
const timeArr = []; // 格式化后的年月数组
|
||||
const valueArr = []; // 实际值数组
|
||||
const diffValueArr = []; // 差异值数组
|
||||
const targetValueArr = []; // 目标值数组
|
||||
const proportionArr = []; // 占比数组
|
||||
const completedArr = []; // 完成率数组
|
||||
|
||||
// 遍历传入的 trendData 数组（响应式依赖，变化时自动重算）
|
||||
this.trendData.forEach((item) => {
|
||||
// 1. 格式化时间并推入时间数组
|
||||
const yearMonth = this.formatTimeToYearMonth(item.time);
|
||||
timeArr.push(yearMonth);
|
||||
|
||||
// 2. 提取其他字段，兜底为0（防止null/undefined影响图表渲染）
|
||||
valueArr.push(item.value ?? 0);
|
||||
diffValueArr.push(item.diffValue ?? 0);
|
||||
targetValueArr.push(item.targetValue ?? 0);
|
||||
proportionArr.push(item.proportion ?? 0);
|
||||
completedArr.push(item.completed ?? 0);
|
||||
});
|
||||
|
||||
// 组装并返回格式化后的数据（结构与原一致）
|
||||
return {
|
||||
time: timeArr,
|
||||
value: valueArr,
|
||||
diffValue: diffValueArr,
|
||||
targetValue: targetValueArr,
|
||||
proportion: proportionArr,
|
||||
completed: completedArr,
|
||||
rawData: this.trendData, // 透传原始数据，方便子组件使用
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 核心处理函数：在所有数据都准备好后，才组装 chartData
|
||||
* 格式化时间戳为年月格式（YYYY-MM）
|
||||
* @param {Number} timestamp 13位毫秒级时间戳
|
||||
* @returns {String} 格式化后的年月字符串（如：2025-10）
|
||||
*/
|
||||
processChartData() {
|
||||
// 关键改动：增加数据有效性检查
|
||||
// 检查 salesTrendMap 是否有实际数据（不只是空对象）
|
||||
const isSalesDataReady = Object.keys(this.salesTrendMap).length > 0;
|
||||
// 检查 grossMarginTrendMap 是否有实际数据
|
||||
const isGrossMarginDataReady =
|
||||
Object.keys(this.grossMarginTrendMap).length > 0;
|
||||
|
||||
// 如果任一数据未准备好，则不更新 chartData，或传递一个加载中的状态
|
||||
// 你可以根据业务需求调整这里的逻辑，比如：
|
||||
// 1. 等待两者都准备好
|
||||
// 2. 只要有一个准备好了就更新，但确保另一个有合理的默认值
|
||||
|
||||
// --- 方案一：等待两者都准备好 ---
|
||||
// if (!isSalesDataReady || !isGrossMarginDataReady) {
|
||||
// console.log('数据尚未全部准备好，暂不更新图表');
|
||||
// this.chartData = {
|
||||
// grossMarginLocations: [],
|
||||
// salesLocations: [],
|
||||
// grossMargin: { rates: [], reals: [], targets: [], flags: [] },
|
||||
// sales: { rates: [], reals: [], targets: [], flags: [] },
|
||||
// };
|
||||
// return;
|
||||
// }
|
||||
|
||||
// --- 方案二 (推荐)：有什么数据就显示什么，没有的就显示空 ---
|
||||
// 这种方式更友好，用户可以先看到部分数据
|
||||
const grossMarginLocations = isGrossMarginDataReady
|
||||
? Object.keys(this.grossMarginTrendMap)
|
||||
: [];
|
||||
const salesLocations = isSalesDataReady
|
||||
? Object.keys(this.salesTrendMap)
|
||||
: [];
|
||||
|
||||
const processedGrossMarginData = isGrossMarginDataReady
|
||||
? this.processSingleDataset(
|
||||
grossMarginLocations,
|
||||
this.grossMarginTrendMap
|
||||
)
|
||||
: { rates: [], reals: [], targets: [], flags: [] };
|
||||
|
||||
const processedSalesData = isSalesDataReady
|
||||
? this.processSingleDataset(salesLocations, this.salesTrendMap)
|
||||
: { rates: [], reals: [], targets: [], flags: [] };
|
||||
|
||||
// 3. 组装最终的 chartData 对象
|
||||
this.chartData = {
|
||||
grossMarginLocations: grossMarginLocations,
|
||||
salesLocations: salesLocations,
|
||||
grossMargin: processedGrossMarginData,
|
||||
sales: processedSalesData,
|
||||
};
|
||||
|
||||
console.log("chartData 已更新:", this.chartData);
|
||||
formatTimeToYearMonth(timestamp) {
|
||||
if (!timestamp || isNaN(timestamp)) {
|
||||
return ""; // 容错：非有效时间戳返回空字符串
|
||||
}
|
||||
const date = new Date(timestamp);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，补0至2位
|
||||
return `${year}-${month}`;
|
||||
},
|
||||
|
||||
/**
|
||||
* 通用数据处理函数（纯函数）
|
||||
* @param {Array} locations - 某个指标的地点数组
|
||||
* @param {Object} dataMap - 该指标的原始数据映射
|
||||
* @returns {Object} - 格式化后的数据对象
|
||||
*/
|
||||
processSingleDataset(locations, dataMap) {
|
||||
const rates = [];
|
||||
const reals = [];
|
||||
const targets = [];
|
||||
const flags = [];
|
||||
|
||||
locations.forEach((location) => {
|
||||
const data = dataMap[location] || {};
|
||||
// 优化：处理 data.rate 为 null/undefined 的情况
|
||||
const rate =
|
||||
data.rate !== null && data.rate !== undefined
|
||||
? Math.round(data.rate * 100)
|
||||
: 0;
|
||||
|
||||
rates.push(rate);
|
||||
reals.push(data.real ?? 0); // 使用空值合并运算符
|
||||
targets.push(data.target ?? 0);
|
||||
|
||||
// 优化：更清晰的逻辑
|
||||
if (data.target === 0) {
|
||||
flags.push(1); // 如果目标为0，默认达标
|
||||
} else {
|
||||
flags.push(rate >= 100 ? 1 : 0);
|
||||
}
|
||||
});
|
||||
|
||||
return { rates, reals, targets, flags };
|
||||
getData(value) {
|
||||
this.$emit('getData', value)
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 3. 核心：滚动容器样式（固定高度+溢出滚动+隐藏滚动条） */
|
||||
/* 原有样式保持不变 */
|
||||
.scroll-container {
|
||||
/* 1. 固定容器高度：根据页面布局调整（示例300px，超出则滚动） */
|
||||
max-height: 210px;
|
||||
/* 2. 溢出滚动：内容超出高度时显示滚动功能 */
|
||||
overflow-y: auto;
|
||||
/* 3. 隐藏横向滚动条（防止设备名过长导致横向滚动） */
|
||||
overflow-x: hidden;
|
||||
/* 4. 内边距：与标题栏和容器边缘对齐 */
|
||||
padding: 10px 0;
|
||||
|
||||
/* 5. 隐藏滚动条（兼容主流浏览器） */
|
||||
/* Chrome/Safari */
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
scrollbar-width: none;
|
||||
/* IE/Edge */
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
/* 设备项样式优化：增加间距，避免拥挤 */
|
||||
.proBarInfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 8px 27px;
|
||||
/* 调整内边距，优化排版 */
|
||||
margin-bottom: 10px;
|
||||
/* 设备项之间的垂直间距 */
|
||||
}
|
||||
|
||||
/* 原有样式保留，优化细节 */
|
||||
.proBarInfoEqInfo {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
/* 垂直居中，避免序号/文字错位 */
|
||||
}
|
||||
|
||||
.slot {
|
||||
@@ -204,14 +136,12 @@ export default {
|
||||
font-size: 16px;
|
||||
color: #68b5ff;
|
||||
line-height: 23px;
|
||||
/* 垂直居中文字 */
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.eq-name {
|
||||
margin-left: 8px;
|
||||
/* 增加与序号的间距 */
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
@@ -237,7 +167,6 @@ export default {
|
||||
height: 14px;
|
||||
border: 1px solid #adadad;
|
||||
margin: 0 8px;
|
||||
/* 优化分割线间距 */
|
||||
}
|
||||
|
||||
.yield {
|
||||
@@ -254,22 +183,18 @@ export default {
|
||||
.proBarInfoEqInfoLeft {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 序号和设备名垂直居中 */
|
||||
}
|
||||
|
||||
.proBarInfoEqInfoRight {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 状态/分割线/百分比垂直居中 */
|
||||
}
|
||||
|
||||
.proBarWrapper {
|
||||
position: relative;
|
||||
height: 10px;
|
||||
margin-top: 6px;
|
||||
/* 进度条与上方信息的间距 */
|
||||
border-radius: 5px;
|
||||
/* 进度条圆角，优化视觉 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -285,19 +210,15 @@ export default {
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
65deg,
|
||||
rgba(53, 223, 247, 0) 0%,
|
||||
rgba(54, 220, 246, 0.92) 92%,
|
||||
#36f6e5 100%,
|
||||
#37acf5 100%
|
||||
);
|
||||
background: linear-gradient(65deg,
|
||||
rgba(53, 223, 247, 0) 0%,
|
||||
rgba(54, 220, 246, 0.92) 92%,
|
||||
#36f6e5 100%,
|
||||
#37acf5 100%);
|
||||
border-radius: 5px;
|
||||
transition: width 0.3s ease;
|
||||
/* 进度变化时添加过渡动画，更流畅 */
|
||||
}
|
||||
|
||||
/* 图表相关样式保留 */
|
||||
.chartImgBottom {
|
||||
position: absolute;
|
||||
bottom: 45px;
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
background-color: rgba(249, 252, 255, 1);
|
||||
">
|
||||
<!-- <top-item /> -->
|
||||
<dataTrendBar :chartData="chartData" />
|
||||
<dataTrendBar @handleGetItemData="getData" :chartData="chartData" />
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
@@ -19,134 +19,78 @@
|
||||
<script>
|
||||
import Container from "../components/container.vue";
|
||||
import dataTrendBar from "./dataTrendBarPro.vue";
|
||||
|
||||
export default {
|
||||
name: "ProductionStatus",
|
||||
components: { Container, dataTrendBar },
|
||||
props: {
|
||||
salesTrendMap: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
grossMarginTrendMap: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
trendData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chartData: null, // 初始化 chartData 为 null
|
||||
// 移除：原 chartData 定义，改为计算属性
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
grossMarginTrendMap: {
|
||||
handler() {
|
||||
this.processChartData();
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
salesTrendMap: {
|
||||
handler() {
|
||||
this.processChartData();
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
// 移除：原 watch 监听配置，计算属性自动响应 trendData 变化
|
||||
computed: {
|
||||
/**
|
||||
* chartData 计算属性：自动响应 trendData 变化，格式化并提取各字段数组
|
||||
* @returns {Object} 包含6个独立数组的格式化数据
|
||||
*/
|
||||
chartData() {
|
||||
// 初始化6个独立数组
|
||||
const timeArr = []; // 格式化后的年月数组
|
||||
const valueArr = []; // 实际值数组
|
||||
const diffValueArr = []; // 差异值数组
|
||||
const targetValueArr = []; // 目标值数组
|
||||
const proportionArr = []; // 占比数组
|
||||
const completedArr = []; // 完成率数组
|
||||
|
||||
// 遍历传入的 trendData 数组（响应式依赖，变化时自动重算）
|
||||
this.trendData.forEach((item) => {
|
||||
// 1. 格式化时间并推入时间数组
|
||||
const yearMonth = this.formatTimeToYearMonth(item.time);
|
||||
timeArr.push(yearMonth);
|
||||
|
||||
// 2. 提取其他字段，兜底为0（防止null/undefined影响图表渲染）
|
||||
valueArr.push(item.value ?? 0);
|
||||
diffValueArr.push(item.diffValue ?? 0);
|
||||
targetValueArr.push(item.targetValue ?? 0);
|
||||
proportionArr.push(item.proportion ?? 0);
|
||||
completedArr.push(item.completed ?? 0);
|
||||
});
|
||||
|
||||
// 组装并返回格式化后的数据（结构与原一致）
|
||||
return {
|
||||
time: timeArr,
|
||||
value: valueArr,
|
||||
diffValue: diffValueArr,
|
||||
targetValue: targetValueArr,
|
||||
proportion: proportionArr,
|
||||
completed: completedArr,
|
||||
rawData: this.trendData, // 透传原始数据，方便子组件使用
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 核心处理函数：在所有数据都准备好后，才组装 chartData
|
||||
* 格式化时间戳为年月格式（YYYY-MM）
|
||||
* @param {Number} timestamp 13位毫秒级时间戳
|
||||
* @returns {String} 格式化后的年月字符串（如：2025-10）
|
||||
*/
|
||||
processChartData() {
|
||||
// 关键改动：增加数据有效性检查
|
||||
// 检查 salesTrendMap 是否有实际数据（不只是空对象）
|
||||
const isSalesDataReady = Object.keys(this.salesTrendMap).length > 0;
|
||||
// 检查 grossMarginTrendMap 是否有实际数据
|
||||
const isGrossMarginDataReady =
|
||||
Object.keys(this.grossMarginTrendMap).length > 0;
|
||||
|
||||
// 如果任一数据未准备好，则不更新 chartData，或传递一个加载中的状态
|
||||
// 你可以根据业务需求调整这里的逻辑，比如：
|
||||
// 1. 等待两者都准备好
|
||||
// 2. 只要有一个准备好了就更新，但确保另一个有合理的默认值
|
||||
|
||||
// --- 方案一：等待两者都准备好 ---
|
||||
// if (!isSalesDataReady || !isGrossMarginDataReady) {
|
||||
// console.log('数据尚未全部准备好，暂不更新图表');
|
||||
// this.chartData = {
|
||||
// grossMarginLocations: [],
|
||||
// salesLocations: [],
|
||||
// grossMargin: { rates: [], reals: [], targets: [], flags: [] },
|
||||
// sales: { rates: [], reals: [], targets: [], flags: [] },
|
||||
// };
|
||||
// return;
|
||||
// }
|
||||
|
||||
// --- 方案二 (推荐)：有什么数据就显示什么，没有的就显示空 ---
|
||||
// 这种方式更友好，用户可以先看到部分数据
|
||||
const grossMarginLocations = isGrossMarginDataReady
|
||||
? Object.keys(this.grossMarginTrendMap)
|
||||
: [];
|
||||
const salesLocations = isSalesDataReady
|
||||
? Object.keys(this.salesTrendMap)
|
||||
: [];
|
||||
|
||||
const processedGrossMarginData = isGrossMarginDataReady
|
||||
? this.processSingleDataset(
|
||||
grossMarginLocations,
|
||||
this.grossMarginTrendMap
|
||||
)
|
||||
: { rates: [], reals: [], targets: [], flags: [] };
|
||||
|
||||
const processedSalesData = isSalesDataReady
|
||||
? this.processSingleDataset(salesLocations, this.salesTrendMap)
|
||||
: { rates: [], reals: [], targets: [], flags: [] };
|
||||
|
||||
// 3. 组装最终的 chartData 对象
|
||||
this.chartData = {
|
||||
grossMarginLocations: grossMarginLocations,
|
||||
salesLocations: salesLocations,
|
||||
grossMargin: processedGrossMarginData,
|
||||
sales: processedSalesData,
|
||||
};
|
||||
|
||||
console.log("chartData 已更新:", this.chartData);
|
||||
formatTimeToYearMonth(timestamp) {
|
||||
if (!timestamp || isNaN(timestamp)) {
|
||||
return ""; // 容错：非有效时间戳返回空字符串
|
||||
}
|
||||
const date = new Date(timestamp);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，补0至2位
|
||||
return `${year}-${month}`;
|
||||
},
|
||||
|
||||
/**
|
||||
* 通用数据处理函数（纯函数）
|
||||
* @param {Array} locations - 某个指标的地点数组
|
||||
* @param {Object} dataMap - 该指标的原始数据映射
|
||||
* @returns {Object} - 格式化后的数据对象
|
||||
*/
|
||||
processSingleDataset(locations, dataMap) {
|
||||
const rates = [];
|
||||
const reals = [];
|
||||
const targets = [];
|
||||
const flags = [];
|
||||
|
||||
locations.forEach((location) => {
|
||||
const data = dataMap[location] || {};
|
||||
// 优化：处理 data.rate 为 null/undefined 的情况
|
||||
const rate =
|
||||
data.rate !== null && data.rate !== undefined
|
||||
? Math.round(data.rate * 100)
|
||||
: 0;
|
||||
|
||||
rates.push(rate);
|
||||
reals.push(data.real ?? 0); // 使用空值合并运算符
|
||||
targets.push(data.target ?? 0);
|
||||
|
||||
// 优化：更清晰的逻辑
|
||||
if (data.target === 0) {
|
||||
flags.push(1); // 如果目标为0，默认达标
|
||||
} else {
|
||||
flags.push(rate >= 100 ? 1 : 0);
|
||||
}
|
||||
});
|
||||
|
||||
return { rates, reals, targets, flags };
|
||||
getData(value) {
|
||||
this.$emit('getData', value)
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -285,13 +229,11 @@ export default {
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
65deg,
|
||||
rgba(53, 223, 247, 0) 0%,
|
||||
rgba(54, 220, 246, 0.92) 92%,
|
||||
#36f6e5 100%,
|
||||
#37acf5 100%
|
||||
);
|
||||
background: linear-gradient(65deg,
|
||||
rgba(53, 223, 247, 0) 0%,
|
||||
rgba(54, 220, 246, 0.92) 92%,
|
||||
#36f6e5 100%,
|
||||
#37acf5 100%);
|
||||
border-radius: 5px;
|
||||
transition: width 0.3s ease;
|
||||
/* 进度变化时添加过渡动画，更流畅 */
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
background-color: rgba(249, 252, 255, 1);
|
||||
">
|
||||
<!-- <top-item /> -->
|
||||
<dataTrendBar :chartData="chartData" />
|
||||
<dataTrendBar @handleGetItemData="getData" :chartData="chartData" />
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
@@ -19,134 +19,78 @@
|
||||
<script>
|
||||
import Container from "../components/container.vue";
|
||||
import dataTrendBar from "./dataTrendBarProcAuxMat.vue";
|
||||
|
||||
export default {
|
||||
name: "ProductionStatus",
|
||||
components: { Container, dataTrendBar },
|
||||
props: {
|
||||
salesTrendMap: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
grossMarginTrendMap: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
trendData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chartData: null, // 初始化 chartData 为 null
|
||||
// 移除：原 chartData 定义，改为计算属性
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
grossMarginTrendMap: {
|
||||
handler() {
|
||||
this.processChartData();
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
salesTrendMap: {
|
||||
handler() {
|
||||
this.processChartData();
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
// 移除：原 watch 监听配置，计算属性自动响应 trendData 变化
|
||||
computed: {
|
||||
/**
|
||||
* chartData 计算属性：自动响应 trendData 变化，格式化并提取各字段数组
|
||||
* @returns {Object} 包含6个独立数组的格式化数据
|
||||
*/
|
||||
chartData() {
|
||||
// 初始化6个独立数组
|
||||
const timeArr = []; // 格式化后的年月数组
|
||||
const valueArr = []; // 实际值数组
|
||||
const diffValueArr = []; // 差异值数组
|
||||
const targetValueArr = []; // 目标值数组
|
||||
const proportionArr = []; // 占比数组
|
||||
const completedArr = []; // 完成率数组
|
||||
|
||||
// 遍历传入的 trendData 数组（响应式依赖，变化时自动重算）
|
||||
this.trendData.forEach((item) => {
|
||||
// 1. 格式化时间并推入时间数组
|
||||
const yearMonth = this.formatTimeToYearMonth(item.time);
|
||||
timeArr.push(yearMonth);
|
||||
|
||||
// 2. 提取其他字段，兜底为0（防止null/undefined影响图表渲染）
|
||||
valueArr.push(item.value ?? 0);
|
||||
diffValueArr.push(item.diffValue ?? 0);
|
||||
targetValueArr.push(item.targetValue ?? 0);
|
||||
proportionArr.push(item.proportion ?? 0);
|
||||
completedArr.push(item.completed ?? 0);
|
||||
});
|
||||
|
||||
// 组装并返回格式化后的数据（结构与原一致）
|
||||
return {
|
||||
time: timeArr,
|
||||
value: valueArr,
|
||||
diffValue: diffValueArr,
|
||||
targetValue: targetValueArr,
|
||||
proportion: proportionArr,
|
||||
completed: completedArr,
|
||||
rawData: this.trendData, // 透传原始数据，方便子组件使用
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 核心处理函数：在所有数据都准备好后，才组装 chartData
|
||||
* 格式化时间戳为年月格式（YYYY-MM）
|
||||
* @param {Number} timestamp 13位毫秒级时间戳
|
||||
* @returns {String} 格式化后的年月字符串（如：2025-10）
|
||||
*/
|
||||
processChartData() {
|
||||
// 关键改动：增加数据有效性检查
|
||||
// 检查 salesTrendMap 是否有实际数据（不只是空对象）
|
||||
const isSalesDataReady = Object.keys(this.salesTrendMap).length > 0;
|
||||
// 检查 grossMarginTrendMap 是否有实际数据
|
||||
const isGrossMarginDataReady =
|
||||
Object.keys(this.grossMarginTrendMap).length > 0;
|
||||
|
||||
// 如果任一数据未准备好，则不更新 chartData，或传递一个加载中的状态
|
||||
// 你可以根据业务需求调整这里的逻辑，比如：
|
||||
// 1. 等待两者都准备好
|
||||
// 2. 只要有一个准备好了就更新，但确保另一个有合理的默认值
|
||||
|
||||
// --- 方案一：等待两者都准备好 ---
|
||||
// if (!isSalesDataReady || !isGrossMarginDataReady) {
|
||||
// console.log('数据尚未全部准备好，暂不更新图表');
|
||||
// this.chartData = {
|
||||
// grossMarginLocations: [],
|
||||
// salesLocations: [],
|
||||
// grossMargin: { rates: [], reals: [], targets: [], flags: [] },
|
||||
// sales: { rates: [], reals: [], targets: [], flags: [] },
|
||||
// };
|
||||
// return;
|
||||
// }
|
||||
|
||||
// --- 方案二 (推荐)：有什么数据就显示什么，没有的就显示空 ---
|
||||
// 这种方式更友好，用户可以先看到部分数据
|
||||
const grossMarginLocations = isGrossMarginDataReady
|
||||
? Object.keys(this.grossMarginTrendMap)
|
||||
: [];
|
||||
const salesLocations = isSalesDataReady
|
||||
? Object.keys(this.salesTrendMap)
|
||||
: [];
|
||||
|
||||
const processedGrossMarginData = isGrossMarginDataReady
|
||||
? this.processSingleDataset(
|
||||
grossMarginLocations,
|
||||
this.grossMarginTrendMap
|
||||
)
|
||||
: { rates: [], reals: [], targets: [], flags: [] };
|
||||
|
||||
const processedSalesData = isSalesDataReady
|
||||
? this.processSingleDataset(salesLocations, this.salesTrendMap)
|
||||
: { rates: [], reals: [], targets: [], flags: [] };
|
||||
|
||||
// 3. 组装最终的 chartData 对象
|
||||
this.chartData = {
|
||||
grossMarginLocations: grossMarginLocations,
|
||||
salesLocations: salesLocations,
|
||||
grossMargin: processedGrossMarginData,
|
||||
sales: processedSalesData,
|
||||
};
|
||||
|
||||
console.log("chartData 已更新:", this.chartData);
|
||||
formatTimeToYearMonth(timestamp) {
|
||||
if (!timestamp || isNaN(timestamp)) {
|
||||
return ""; // 容错：非有效时间戳返回空字符串
|
||||
}
|
||||
const date = new Date(timestamp);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，补0至2位
|
||||
return `${year}-${month}`;
|
||||
},
|
||||
|
||||
/**
|
||||
* 通用数据处理函数（纯函数）
|
||||
* @param {Array} locations - 某个指标的地点数组
|
||||
* @param {Object} dataMap - 该指标的原始数据映射
|
||||
* @returns {Object} - 格式化后的数据对象
|
||||
*/
|
||||
processSingleDataset(locations, dataMap) {
|
||||
const rates = [];
|
||||
const reals = [];
|
||||
const targets = [];
|
||||
const flags = [];
|
||||
|
||||
locations.forEach((location) => {
|
||||
const data = dataMap[location] || {};
|
||||
// 优化：处理 data.rate 为 null/undefined 的情况
|
||||
const rate =
|
||||
data.rate !== null && data.rate !== undefined
|
||||
? Math.round(data.rate * 100)
|
||||
: 0;
|
||||
|
||||
rates.push(rate);
|
||||
reals.push(data.real ?? 0); // 使用空值合并运算符
|
||||
targets.push(data.target ?? 0);
|
||||
|
||||
// 优化：更清晰的逻辑
|
||||
if (data.target === 0) {
|
||||
flags.push(1); // 如果目标为0，默认达标
|
||||
} else {
|
||||
flags.push(rate >= 100 ? 1 : 0);
|
||||
}
|
||||
});
|
||||
|
||||
return { rates, reals, targets, flags };
|
||||
getData(value) {
|
||||
this.$emit('getData', value)
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -285,13 +229,11 @@ export default {
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
65deg,
|
||||
rgba(53, 223, 247, 0) 0%,
|
||||
rgba(54, 220, 246, 0.92) 92%,
|
||||
#36f6e5 100%,
|
||||
#37acf5 100%
|
||||
);
|
||||
background: linear-gradient(65deg,
|
||||
rgba(53, 223, 247, 0) 0%,
|
||||
rgba(54, 220, 246, 0.92) 92%,
|
||||
#36f6e5 100%,
|
||||
#37acf5 100%);
|
||||
border-radius: 5px;
|
||||
transition: width 0.3s ease;
|
||||
/* 进度变化时添加过渡动画，更流畅 */
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
background-color: rgba(249, 252, 255, 1);
|
||||
">
|
||||
<!-- <top-item /> -->
|
||||
<dataTrendBar :chartData="chartData" />
|
||||
<dataTrendBar @handleGetItemData="getData" :chartData="chartData" />
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
@@ -24,129 +24,74 @@ export default {
|
||||
name: "ProductionStatus",
|
||||
components: { Container, dataTrendBar },
|
||||
props: {
|
||||
salesTrendMap: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
grossMarginTrendMap: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
trendData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chartData: null, // 初始化 chartData 为 null
|
||||
// 移除：原 chartData 定义，改为计算属性
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
grossMarginTrendMap: {
|
||||
handler() {
|
||||
this.processChartData();
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
salesTrendMap: {
|
||||
handler() {
|
||||
this.processChartData();
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
// 移除：原 watch 监听配置，计算属性自动响应 trendData 变化
|
||||
computed: {
|
||||
/**
|
||||
* chartData 计算属性：自动响应 trendData 变化，格式化并提取各字段数组
|
||||
* @returns {Object} 包含6个独立数组的格式化数据
|
||||
*/
|
||||
chartData() {
|
||||
// 初始化6个独立数组
|
||||
const timeArr = []; // 格式化后的年月数组
|
||||
const valueArr = []; // 实际值数组
|
||||
const diffValueArr = []; // 差异值数组
|
||||
const targetValueArr = []; // 目标值数组
|
||||
const proportionArr = []; // 占比数组
|
||||
const completedArr = []; // 完成率数组
|
||||
|
||||
// 遍历传入的 trendData 数组（响应式依赖，变化时自动重算）
|
||||
this.trendData.forEach((item) => {
|
||||
// 1. 格式化时间并推入时间数组
|
||||
const yearMonth = this.formatTimeToYearMonth(item.time);
|
||||
timeArr.push(yearMonth);
|
||||
|
||||
// 2. 提取其他字段，兜底为0（防止null/undefined影响图表渲染）
|
||||
valueArr.push(item.value ?? 0);
|
||||
diffValueArr.push(item.diffValue ?? 0);
|
||||
targetValueArr.push(item.targetValue ?? 0);
|
||||
proportionArr.push(item.proportion ?? 0);
|
||||
completedArr.push(item.completed ?? 0);
|
||||
});
|
||||
|
||||
// 组装并返回格式化后的数据（结构与原一致）
|
||||
return {
|
||||
time: timeArr,
|
||||
value: valueArr,
|
||||
diffValue: diffValueArr,
|
||||
targetValue: targetValueArr,
|
||||
proportion: proportionArr,
|
||||
completed: completedArr,
|
||||
rawData: this.trendData, // 透传原始数据，方便子组件使用
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 核心处理函数：在所有数据都准备好后，才组装 chartData
|
||||
* 格式化时间戳为年月格式（YYYY-MM）
|
||||
* @param {Number} timestamp 13位毫秒级时间戳
|
||||
* @returns {String} 格式化后的年月字符串（如：2025-10）
|
||||
*/
|
||||
processChartData() {
|
||||
// 关键改动：增加数据有效性检查
|
||||
// 检查 salesTrendMap 是否有实际数据（不只是空对象）
|
||||
const isSalesDataReady = Object.keys(this.salesTrendMap).length > 0;
|
||||
// 检查 grossMarginTrendMap 是否有实际数据
|
||||
const isGrossMarginDataReady =
|
||||
Object.keys(this.grossMarginTrendMap).length > 0;
|
||||
|
||||
// 如果任一数据未准备好，则不更新 chartData，或传递一个加载中的状态
|
||||
// 你可以根据业务需求调整这里的逻辑，比如：
|
||||
// 1. 等待两者都准备好
|
||||
// 2. 只要有一个准备好了就更新，但确保另一个有合理的默认值
|
||||
|
||||
// --- 方案一：等待两者都准备好 ---
|
||||
// if (!isSalesDataReady || !isGrossMarginDataReady) {
|
||||
// console.log('数据尚未全部准备好，暂不更新图表');
|
||||
// this.chartData = {
|
||||
// grossMarginLocations: [],
|
||||
// salesLocations: [],
|
||||
// grossMargin: { rates: [], reals: [], targets: [], flags: [] },
|
||||
// sales: { rates: [], reals: [], targets: [], flags: [] },
|
||||
// };
|
||||
// return;
|
||||
// }
|
||||
|
||||
// --- 方案二 (推荐)：有什么数据就显示什么，没有的就显示空 ---
|
||||
// 这种方式更友好，用户可以先看到部分数据
|
||||
const grossMarginLocations = isGrossMarginDataReady
|
||||
? Object.keys(this.grossMarginTrendMap)
|
||||
: [];
|
||||
const salesLocations = isSalesDataReady
|
||||
? Object.keys(this.salesTrendMap)
|
||||
: [];
|
||||
|
||||
const processedGrossMarginData = isGrossMarginDataReady
|
||||
? this.processSingleDataset(
|
||||
grossMarginLocations,
|
||||
this.grossMarginTrendMap
|
||||
)
|
||||
: { rates: [], reals: [], targets: [], flags: [] };
|
||||
|
||||
const processedSalesData = isSalesDataReady
|
||||
? this.processSingleDataset(salesLocations, this.salesTrendMap)
|
||||
: { rates: [], reals: [], targets: [], flags: [] };
|
||||
|
||||
// 3. 组装最终的 chartData 对象
|
||||
this.chartData = {
|
||||
grossMarginLocations: grossMarginLocations,
|
||||
salesLocations: salesLocations,
|
||||
grossMargin: processedGrossMarginData,
|
||||
sales: processedSalesData,
|
||||
};
|
||||
|
||||
console.log("chartData 已更新:", this.chartData);
|
||||
formatTimeToYearMonth(timestamp) {
|
||||
if (!timestamp || isNaN(timestamp)) {
|
||||
return ""; // 容错：非有效时间戳返回空字符串
|
||||
}
|
||||
const date = new Date(timestamp);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，补0至2位
|
||||
return `${year}-${month}`;
|
||||
},
|
||||
|
||||
/**
|
||||
* 通用数据处理函数（纯函数）
|
||||
* @param {Array} locations - 某个指标的地点数组
|
||||
* @param {Object} dataMap - 该指标的原始数据映射
|
||||
* @returns {Object} - 格式化后的数据对象
|
||||
*/
|
||||
processSingleDataset(locations, dataMap) {
|
||||
const rates = [];
|
||||
const reals = [];
|
||||
const targets = [];
|
||||
const flags = [];
|
||||
|
||||
locations.forEach((location) => {
|
||||
const data = dataMap[location] || {};
|
||||
// 优化：处理 data.rate 为 null/undefined 的情况
|
||||
const rate =
|
||||
data.rate !== null && data.rate !== undefined
|
||||
? Math.round(data.rate * 100)
|
||||
: 0;
|
||||
|
||||
rates.push(rate);
|
||||
reals.push(data.real ?? 0); // 使用空值合并运算符
|
||||
targets.push(data.target ?? 0);
|
||||
|
||||
// 优化：更清晰的逻辑
|
||||
if (data.target === 0) {
|
||||
flags.push(1); // 如果目标为0，默认达标
|
||||
} else {
|
||||
flags.push(rate >= 100 ? 1 : 0);
|
||||
}
|
||||
});
|
||||
|
||||
return { rates, reals, targets, flags };
|
||||
getData(value) {
|
||||
this.$emit('getData', value)
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
background-color: rgba(249, 252, 255, 1);
|
||||
">
|
||||
<!-- <top-item /> -->
|
||||
<dataTrendBar :chartData="chartData" />
|
||||
<dataTrendBar @handleGetItemData="getData" :chartData="chartData" />
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
@@ -19,134 +19,78 @@
|
||||
<script>
|
||||
import Container from "../components/container.vue";
|
||||
import dataTrendBar from "./dataTrendBarProcessingFuel.vue";
|
||||
|
||||
export default {
|
||||
name: "ProductionStatus",
|
||||
components: { Container, dataTrendBar },
|
||||
props: {
|
||||
salesTrendMap: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
grossMarginTrendMap: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
trendData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chartData: null, // 初始化 chartData 为 null
|
||||
// 移除：原 chartData 定义，改为计算属性
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
grossMarginTrendMap: {
|
||||
handler() {
|
||||
this.processChartData();
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
salesTrendMap: {
|
||||
handler() {
|
||||
this.processChartData();
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
// 移除：原 watch 监听配置，计算属性自动响应 trendData 变化
|
||||
computed: {
|
||||
/**
|
||||
* chartData 计算属性：自动响应 trendData 变化，格式化并提取各字段数组
|
||||
* @returns {Object} 包含6个独立数组的格式化数据
|
||||
*/
|
||||
chartData() {
|
||||
// 初始化6个独立数组
|
||||
const timeArr = []; // 格式化后的年月数组
|
||||
const valueArr = []; // 实际值数组
|
||||
const diffValueArr = []; // 差异值数组
|
||||
const targetValueArr = []; // 目标值数组
|
||||
const proportionArr = []; // 占比数组
|
||||
const completedArr = []; // 完成率数组
|
||||
|
||||
// 遍历传入的 trendData 数组（响应式依赖，变化时自动重算）
|
||||
this.trendData.forEach((item) => {
|
||||
// 1. 格式化时间并推入时间数组
|
||||
const yearMonth = this.formatTimeToYearMonth(item.time);
|
||||
timeArr.push(yearMonth);
|
||||
|
||||
// 2. 提取其他字段，兜底为0（防止null/undefined影响图表渲染）
|
||||
valueArr.push(item.value ?? 0);
|
||||
diffValueArr.push(item.diffValue ?? 0);
|
||||
targetValueArr.push(item.targetValue ?? 0);
|
||||
proportionArr.push(item.proportion ?? 0);
|
||||
completedArr.push(item.completed ?? 0);
|
||||
});
|
||||
|
||||
// 组装并返回格式化后的数据（结构与原一致）
|
||||
return {
|
||||
time: timeArr,
|
||||
value: valueArr,
|
||||
diffValue: diffValueArr,
|
||||
targetValue: targetValueArr,
|
||||
proportion: proportionArr,
|
||||
completed: completedArr,
|
||||
rawData: this.trendData, // 透传原始数据，方便子组件使用
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 核心处理函数：在所有数据都准备好后，才组装 chartData
|
||||
* 格式化时间戳为年月格式（YYYY-MM）
|
||||
* @param {Number} timestamp 13位毫秒级时间戳
|
||||
* @returns {String} 格式化后的年月字符串（如：2025-10）
|
||||
*/
|
||||
processChartData() {
|
||||
// 关键改动：增加数据有效性检查
|
||||
// 检查 salesTrendMap 是否有实际数据（不只是空对象）
|
||||
const isSalesDataReady = Object.keys(this.salesTrendMap).length > 0;
|
||||
// 检查 grossMarginTrendMap 是否有实际数据
|
||||
const isGrossMarginDataReady =
|
||||
Object.keys(this.grossMarginTrendMap).length > 0;
|
||||
|
||||
// 如果任一数据未准备好，则不更新 chartData，或传递一个加载中的状态
|
||||
// 你可以根据业务需求调整这里的逻辑，比如：
|
||||
// 1. 等待两者都准备好
|
||||
// 2. 只要有一个准备好了就更新，但确保另一个有合理的默认值
|
||||
|
||||
// --- 方案一：等待两者都准备好 ---
|
||||
// if (!isSalesDataReady || !isGrossMarginDataReady) {
|
||||
// console.log('数据尚未全部准备好，暂不更新图表');
|
||||
// this.chartData = {
|
||||
// grossMarginLocations: [],
|
||||
// salesLocations: [],
|
||||
// grossMargin: { rates: [], reals: [], targets: [], flags: [] },
|
||||
// sales: { rates: [], reals: [], targets: [], flags: [] },
|
||||
// };
|
||||
// return;
|
||||
// }
|
||||
|
||||
// --- 方案二 (推荐)：有什么数据就显示什么，没有的就显示空 ---
|
||||
// 这种方式更友好，用户可以先看到部分数据
|
||||
const grossMarginLocations = isGrossMarginDataReady
|
||||
? Object.keys(this.grossMarginTrendMap)
|
||||
: [];
|
||||
const salesLocations = isSalesDataReady
|
||||
? Object.keys(this.salesTrendMap)
|
||||
: [];
|
||||
|
||||
const processedGrossMarginData = isGrossMarginDataReady
|
||||
? this.processSingleDataset(
|
||||
grossMarginLocations,
|
||||
this.grossMarginTrendMap
|
||||
)
|
||||
: { rates: [], reals: [], targets: [], flags: [] };
|
||||
|
||||
const processedSalesData = isSalesDataReady
|
||||
? this.processSingleDataset(salesLocations, this.salesTrendMap)
|
||||
: { rates: [], reals: [], targets: [], flags: [] };
|
||||
|
||||
// 3. 组装最终的 chartData 对象
|
||||
this.chartData = {
|
||||
grossMarginLocations: grossMarginLocations,
|
||||
salesLocations: salesLocations,
|
||||
grossMargin: processedGrossMarginData,
|
||||
sales: processedSalesData,
|
||||
};
|
||||
|
||||
console.log("chartData 已更新:", this.chartData);
|
||||
formatTimeToYearMonth(timestamp) {
|
||||
if (!timestamp || isNaN(timestamp)) {
|
||||
return ""; // 容错：非有效时间戳返回空字符串
|
||||
}
|
||||
const date = new Date(timestamp);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，补0至2位
|
||||
return `${year}-${month}`;
|
||||
},
|
||||
|
||||
/**
|
||||
* 通用数据处理函数（纯函数）
|
||||
* @param {Array} locations - 某个指标的地点数组
|
||||
* @param {Object} dataMap - 该指标的原始数据映射
|
||||
* @returns {Object} - 格式化后的数据对象
|
||||
*/
|
||||
processSingleDataset(locations, dataMap) {
|
||||
const rates = [];
|
||||
const reals = [];
|
||||
const targets = [];
|
||||
const flags = [];
|
||||
|
||||
locations.forEach((location) => {
|
||||
const data = dataMap[location] || {};
|
||||
// 优化：处理 data.rate 为 null/undefined 的情况
|
||||
const rate =
|
||||
data.rate !== null && data.rate !== undefined
|
||||
? Math.round(data.rate * 100)
|
||||
: 0;
|
||||
|
||||
rates.push(rate);
|
||||
reals.push(data.real ?? 0); // 使用空值合并运算符
|
||||
targets.push(data.target ?? 0);
|
||||
|
||||
// 优化：更清晰的逻辑
|
||||
if (data.target === 0) {
|
||||
flags.push(1); // 如果目标为0，默认达标
|
||||
} else {
|
||||
flags.push(rate >= 100 ? 1 : 0);
|
||||
}
|
||||
});
|
||||
|
||||
return { rates, reals, targets, flags };
|
||||
getData(value) {
|
||||
this.$emit('getData', value)
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -285,13 +229,11 @@ export default {
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
65deg,
|
||||
rgba(53, 223, 247, 0) 0%,
|
||||
rgba(54, 220, 246, 0.92) 92%,
|
||||
#36f6e5 100%,
|
||||
#37acf5 100%
|
||||
);
|
||||
background: linear-gradient(65deg,
|
||||
rgba(53, 223, 247, 0) 0%,
|
||||
rgba(54, 220, 246, 0.92) 92%,
|
||||
#36f6e5 100%,
|
||||
#37acf5 100%);
|
||||
border-radius: 5px;
|
||||
transition: width 0.3s ease;
|
||||
/* 进度变化时添加过渡动画，更流畅 */
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
<template>
|
||||
<div style="flex: 1">
|
||||
<Container name="数据趋势" icon="cockpitItemIcon" size="opLargeBg" topSize="large">
|
||||
<!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
|
||||
<div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%; gap: 16px">
|
||||
<div class="right" style="
|
||||
height: 500px;
|
||||
height: 491px;
|
||||
display: flex;
|
||||
width: 1595px;
|
||||
background-color: rgba(249, 252, 255, 1);
|
||||
">
|
||||
<!-- <top-item /> -->
|
||||
<dataTrendBar :chartData="chartData" />
|
||||
<!-- 直接使用计算属性 chartData，无需手动更新 -->
|
||||
<dataTrendBar @handleGetItemData="getData" :chartData="chartData" />
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Container from "../components/container.vue";
|
||||
import dataTrendBar from "./dataTrendBarProcessingLabor.vue";
|
||||
@@ -24,174 +24,106 @@ export default {
|
||||
name: "ProductionStatus",
|
||||
components: { Container, dataTrendBar },
|
||||
props: {
|
||||
salesTrendMap: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
grossMarginTrendMap: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
trendData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chartData: null, // 初始化 chartData 为 null
|
||||
// 移除：原 chartData 定义，改为计算属性
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
grossMarginTrendMap: {
|
||||
handler() {
|
||||
this.processChartData();
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
salesTrendMap: {
|
||||
handler() {
|
||||
this.processChartData();
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
// 移除：原 watch 监听配置，计算属性自动响应 trendData 变化
|
||||
computed: {
|
||||
/**
|
||||
* chartData 计算属性：自动响应 trendData 变化，格式化并提取各字段数组
|
||||
* @returns {Object} 包含6个独立数组的格式化数据
|
||||
*/
|
||||
chartData() {
|
||||
// 初始化6个独立数组
|
||||
const timeArr = []; // 格式化后的年月数组
|
||||
const valueArr = []; // 实际值数组
|
||||
const diffValueArr = []; // 差异值数组
|
||||
const targetValueArr = []; // 目标值数组
|
||||
const proportionArr = []; // 占比数组
|
||||
const completedArr = []; // 完成率数组
|
||||
|
||||
// 遍历传入的 trendData 数组（响应式依赖，变化时自动重算）
|
||||
this.trendData.forEach((item) => {
|
||||
// 1. 格式化时间并推入时间数组
|
||||
const yearMonth = this.formatTimeToYearMonth(item.time);
|
||||
timeArr.push(yearMonth);
|
||||
|
||||
// 2. 提取其他字段，兜底为0（防止null/undefined影响图表渲染）
|
||||
valueArr.push(item.value ?? 0);
|
||||
diffValueArr.push(item.diffValue ?? 0);
|
||||
targetValueArr.push(item.targetValue ?? 0);
|
||||
proportionArr.push(item.proportion ?? 0);
|
||||
completedArr.push(item.completed ?? 0);
|
||||
});
|
||||
|
||||
// 组装并返回格式化后的数据（结构与原一致）
|
||||
return {
|
||||
time: timeArr,
|
||||
value: valueArr,
|
||||
diffValue: diffValueArr,
|
||||
targetValue: targetValueArr,
|
||||
proportion: proportionArr,
|
||||
completed: completedArr,
|
||||
rawData: this.trendData, // 透传原始数据，方便子组件使用
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 核心处理函数：在所有数据都准备好后，才组装 chartData
|
||||
* 格式化时间戳为年月格式（YYYY-MM）
|
||||
* @param {Number} timestamp 13位毫秒级时间戳
|
||||
* @returns {String} 格式化后的年月字符串（如：2025-10）
|
||||
*/
|
||||
processChartData() {
|
||||
// 关键改动：增加数据有效性检查
|
||||
// 检查 salesTrendMap 是否有实际数据（不只是空对象）
|
||||
const isSalesDataReady = Object.keys(this.salesTrendMap).length > 0;
|
||||
// 检查 grossMarginTrendMap 是否有实际数据
|
||||
const isGrossMarginDataReady =
|
||||
Object.keys(this.grossMarginTrendMap).length > 0;
|
||||
|
||||
// 如果任一数据未准备好，则不更新 chartData，或传递一个加载中的状态
|
||||
// 你可以根据业务需求调整这里的逻辑，比如：
|
||||
// 1. 等待两者都准备好
|
||||
// 2. 只要有一个准备好了就更新，但确保另一个有合理的默认值
|
||||
|
||||
// --- 方案一：等待两者都准备好 ---
|
||||
// if (!isSalesDataReady || !isGrossMarginDataReady) {
|
||||
// console.log('数据尚未全部准备好，暂不更新图表');
|
||||
// this.chartData = {
|
||||
// grossMarginLocations: [],
|
||||
// salesLocations: [],
|
||||
// grossMargin: { rates: [], reals: [], targets: [], flags: [] },
|
||||
// sales: { rates: [], reals: [], targets: [], flags: [] },
|
||||
// };
|
||||
// return;
|
||||
// }
|
||||
|
||||
// --- 方案二 (推荐)：有什么数据就显示什么，没有的就显示空 ---
|
||||
// 这种方式更友好，用户可以先看到部分数据
|
||||
const grossMarginLocations = isGrossMarginDataReady
|
||||
? Object.keys(this.grossMarginTrendMap)
|
||||
: [];
|
||||
const salesLocations = isSalesDataReady
|
||||
? Object.keys(this.salesTrendMap)
|
||||
: [];
|
||||
|
||||
const processedGrossMarginData = isGrossMarginDataReady
|
||||
? this.processSingleDataset(
|
||||
grossMarginLocations,
|
||||
this.grossMarginTrendMap
|
||||
)
|
||||
: { rates: [], reals: [], targets: [], flags: [] };
|
||||
|
||||
const processedSalesData = isSalesDataReady
|
||||
? this.processSingleDataset(salesLocations, this.salesTrendMap)
|
||||
: { rates: [], reals: [], targets: [], flags: [] };
|
||||
|
||||
// 3. 组装最终的 chartData 对象
|
||||
this.chartData = {
|
||||
grossMarginLocations: grossMarginLocations,
|
||||
salesLocations: salesLocations,
|
||||
grossMargin: processedGrossMarginData,
|
||||
sales: processedSalesData,
|
||||
};
|
||||
|
||||
console.log("chartData 已更新:", this.chartData);
|
||||
formatTimeToYearMonth(timestamp) {
|
||||
if (!timestamp || isNaN(timestamp)) {
|
||||
return ""; // 容错：非有效时间戳返回空字符串
|
||||
}
|
||||
const date = new Date(timestamp);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，补0至2位
|
||||
return `${year}-${month}`;
|
||||
},
|
||||
|
||||
/**
|
||||
* 通用数据处理函数（纯函数）
|
||||
* @param {Array} locations - 某个指标的地点数组
|
||||
* @param {Object} dataMap - 该指标的原始数据映射
|
||||
* @returns {Object} - 格式化后的数据对象
|
||||
*/
|
||||
processSingleDataset(locations, dataMap) {
|
||||
const rates = [];
|
||||
const reals = [];
|
||||
const targets = [];
|
||||
const flags = [];
|
||||
|
||||
locations.forEach((location) => {
|
||||
const data = dataMap[location] || {};
|
||||
// 优化：处理 data.rate 为 null/undefined 的情况
|
||||
const rate =
|
||||
data.rate !== null && data.rate !== undefined
|
||||
? Math.round(data.rate * 100)
|
||||
: 0;
|
||||
|
||||
rates.push(rate);
|
||||
reals.push(data.real ?? 0); // 使用空值合并运算符
|
||||
targets.push(data.target ?? 0);
|
||||
|
||||
// 优化：更清晰的逻辑
|
||||
if (data.target === 0) {
|
||||
flags.push(1); // 如果目标为0，默认达标
|
||||
} else {
|
||||
flags.push(rate >= 100 ? 1 : 0);
|
||||
}
|
||||
});
|
||||
|
||||
return { rates, reals, targets, flags };
|
||||
getData(value) {
|
||||
this.$emit('getData', value)
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 3. 核心：滚动容器样式（固定高度+溢出滚动+隐藏滚动条） */
|
||||
/* 原有样式保持不变 */
|
||||
.scroll-container {
|
||||
/* 1. 固定容器高度：根据页面布局调整（示例300px，超出则滚动） */
|
||||
max-height: 210px;
|
||||
/* 2. 溢出滚动：内容超出高度时显示滚动功能 */
|
||||
overflow-y: auto;
|
||||
/* 3. 隐藏横向滚动条（防止设备名过长导致横向滚动） */
|
||||
overflow-x: hidden;
|
||||
/* 4. 内边距：与标题栏和容器边缘对齐 */
|
||||
padding: 10px 0;
|
||||
|
||||
/* 5. 隐藏滚动条（兼容主流浏览器） */
|
||||
/* Chrome/Safari */
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
scrollbar-width: none;
|
||||
/* IE/Edge */
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
/* 设备项样式优化：增加间距，避免拥挤 */
|
||||
.proBarInfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 8px 27px;
|
||||
/* 调整内边距，优化排版 */
|
||||
margin-bottom: 10px;
|
||||
/* 设备项之间的垂直间距 */
|
||||
}
|
||||
|
||||
/* 原有样式保留，优化细节 */
|
||||
.proBarInfoEqInfo {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
/* 垂直居中，避免序号/文字错位 */
|
||||
}
|
||||
|
||||
.slot {
|
||||
@@ -204,14 +136,12 @@ export default {
|
||||
font-size: 16px;
|
||||
color: #68b5ff;
|
||||
line-height: 23px;
|
||||
/* 垂直居中文字 */
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.eq-name {
|
||||
margin-left: 8px;
|
||||
/* 增加与序号的间距 */
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
@@ -237,7 +167,6 @@ export default {
|
||||
height: 14px;
|
||||
border: 1px solid #adadad;
|
||||
margin: 0 8px;
|
||||
/* 优化分割线间距 */
|
||||
}
|
||||
|
||||
.yield {
|
||||
@@ -254,22 +183,18 @@ export default {
|
||||
.proBarInfoEqInfoLeft {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 序号和设备名垂直居中 */
|
||||
}
|
||||
|
||||
.proBarInfoEqInfoRight {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 状态/分割线/百分比垂直居中 */
|
||||
}
|
||||
|
||||
.proBarWrapper {
|
||||
position: relative;
|
||||
height: 10px;
|
||||
margin-top: 6px;
|
||||
/* 进度条与上方信息的间距 */
|
||||
border-radius: 5px;
|
||||
/* 进度条圆角，优化视觉 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -285,19 +210,15 @@ export default {
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
65deg,
|
||||
rgba(53, 223, 247, 0) 0%,
|
||||
rgba(54, 220, 246, 0.92) 92%,
|
||||
#36f6e5 100%,
|
||||
#37acf5 100%
|
||||
);
|
||||
background: linear-gradient(65deg,
|
||||
rgba(53, 223, 247, 0) 0%,
|
||||
rgba(54, 220, 246, 0.92) 92%,
|
||||
#36f6e5 100%,
|
||||
#37acf5 100%);
|
||||
border-radius: 5px;
|
||||
transition: width 0.3s ease;
|
||||
/* 进度变化时添加过渡动画，更流畅 */
|
||||
}
|
||||
|
||||
/* 图表相关样式保留 */
|
||||
.chartImgBottom {
|
||||
position: absolute;
|
||||
bottom: 45px;
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
background-color: rgba(249, 252, 255, 1);
|
||||
">
|
||||
<!-- <top-item /> -->
|
||||
<dataTrendBar :chartData="chartData" />
|
||||
<dataTrendBar @handleGetItemData="getData" :chartData="chartData" />
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
@@ -19,134 +19,78 @@
|
||||
<script>
|
||||
import Container from "../components/container.vue";
|
||||
import dataTrendBar from "./dataTrendBarProduct.vue";
|
||||
|
||||
export default {
|
||||
name: "ProductionStatus",
|
||||
components: { Container, dataTrendBar },
|
||||
props: {
|
||||
salesTrendMap: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
grossMarginTrendMap: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
trendData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chartData: null, // 初始化 chartData 为 null
|
||||
// 移除：原 chartData 定义，改为计算属性
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
grossMarginTrendMap: {
|
||||
handler() {
|
||||
this.processChartData();
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
salesTrendMap: {
|
||||
handler() {
|
||||
this.processChartData();
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
// 移除：原 watch 监听配置，计算属性自动响应 trendData 变化
|
||||
computed: {
|
||||
/**
|
||||
* chartData 计算属性：自动响应 trendData 变化，格式化并提取各字段数组
|
||||
* @returns {Object} 包含6个独立数组的格式化数据
|
||||
*/
|
||||
chartData() {
|
||||
// 初始化6个独立数组
|
||||
const timeArr = []; // 格式化后的年月数组
|
||||
const valueArr = []; // 实际值数组
|
||||
const diffValueArr = []; // 差异值数组
|
||||
const targetValueArr = []; // 目标值数组
|
||||
const proportionArr = []; // 占比数组
|
||||
const completedArr = []; // 完成率数组
|
||||
|
||||
// 遍历传入的 trendData 数组（响应式依赖，变化时自动重算）
|
||||
this.trendData.forEach((item) => {
|
||||
// 1. 格式化时间并推入时间数组
|
||||
const yearMonth = this.formatTimeToYearMonth(item.time);
|
||||
timeArr.push(yearMonth);
|
||||
|
||||
// 2. 提取其他字段，兜底为0（防止null/undefined影响图表渲染）
|
||||
valueArr.push(item.value ?? 0);
|
||||
diffValueArr.push(item.diffValue ?? 0);
|
||||
targetValueArr.push(item.targetValue ?? 0);
|
||||
proportionArr.push(item.proportion ?? 0);
|
||||
completedArr.push(item.completed ?? 0);
|
||||
});
|
||||
|
||||
// 组装并返回格式化后的数据（结构与原一致）
|
||||
return {
|
||||
time: timeArr,
|
||||
value: valueArr,
|
||||
diffValue: diffValueArr,
|
||||
targetValue: targetValueArr,
|
||||
proportion: proportionArr,
|
||||
completed: completedArr,
|
||||
rawData: this.trendData, // 透传原始数据，方便子组件使用
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 核心处理函数：在所有数据都准备好后，才组装 chartData
|
||||
* 格式化时间戳为年月格式（YYYY-MM）
|
||||
* @param {Number} timestamp 13位毫秒级时间戳
|
||||
* @returns {String} 格式化后的年月字符串（如：2025-10）
|
||||
*/
|
||||
processChartData() {
|
||||
// 关键改动：增加数据有效性检查
|
||||
// 检查 salesTrendMap 是否有实际数据（不只是空对象）
|
||||
const isSalesDataReady = Object.keys(this.salesTrendMap).length > 0;
|
||||
// 检查 grossMarginTrendMap 是否有实际数据
|
||||
const isGrossMarginDataReady =
|
||||
Object.keys(this.grossMarginTrendMap).length > 0;
|
||||
|
||||
// 如果任一数据未准备好，则不更新 chartData，或传递一个加载中的状态
|
||||
// 你可以根据业务需求调整这里的逻辑，比如：
|
||||
// 1. 等待两者都准备好
|
||||
// 2. 只要有一个准备好了就更新，但确保另一个有合理的默认值
|
||||
|
||||
// --- 方案一：等待两者都准备好 ---
|
||||
// if (!isSalesDataReady || !isGrossMarginDataReady) {
|
||||
// console.log('数据尚未全部准备好，暂不更新图表');
|
||||
// this.chartData = {
|
||||
// grossMarginLocations: [],
|
||||
// salesLocations: [],
|
||||
// grossMargin: { rates: [], reals: [], targets: [], flags: [] },
|
||||
// sales: { rates: [], reals: [], targets: [], flags: [] },
|
||||
// };
|
||||
// return;
|
||||
// }
|
||||
|
||||
// --- 方案二 (推荐)：有什么数据就显示什么，没有的就显示空 ---
|
||||
// 这种方式更友好，用户可以先看到部分数据
|
||||
const grossMarginLocations = isGrossMarginDataReady
|
||||
? Object.keys(this.grossMarginTrendMap)
|
||||
: [];
|
||||
const salesLocations = isSalesDataReady
|
||||
? Object.keys(this.salesTrendMap)
|
||||
: [];
|
||||
|
||||
const processedGrossMarginData = isGrossMarginDataReady
|
||||
? this.processSingleDataset(
|
||||
grossMarginLocations,
|
||||
this.grossMarginTrendMap
|
||||
)
|
||||
: { rates: [], reals: [], targets: [], flags: [] };
|
||||
|
||||
const processedSalesData = isSalesDataReady
|
||||
? this.processSingleDataset(salesLocations, this.salesTrendMap)
|
||||
: { rates: [], reals: [], targets: [], flags: [] };
|
||||
|
||||
// 3. 组装最终的 chartData 对象
|
||||
this.chartData = {
|
||||
grossMarginLocations: grossMarginLocations,
|
||||
salesLocations: salesLocations,
|
||||
grossMargin: processedGrossMarginData,
|
||||
sales: processedSalesData,
|
||||
};
|
||||
|
||||
console.log("chartData 已更新:", this.chartData);
|
||||
formatTimeToYearMonth(timestamp) {
|
||||
if (!timestamp || isNaN(timestamp)) {
|
||||
return ""; // 容错：非有效时间戳返回空字符串
|
||||
}
|
||||
const date = new Date(timestamp);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，补0至2位
|
||||
return `${year}-${month}`;
|
||||
},
|
||||
|
||||
/**
|
||||
* 通用数据处理函数（纯函数）
|
||||
* @param {Array} locations - 某个指标的地点数组
|
||||
* @param {Object} dataMap - 该指标的原始数据映射
|
||||
* @returns {Object} - 格式化后的数据对象
|
||||
*/
|
||||
processSingleDataset(locations, dataMap) {
|
||||
const rates = [];
|
||||
const reals = [];
|
||||
const targets = [];
|
||||
const flags = [];
|
||||
|
||||
locations.forEach((location) => {
|
||||
const data = dataMap[location] || {};
|
||||
// 优化：处理 data.rate 为 null/undefined 的情况
|
||||
const rate =
|
||||
data.rate !== null && data.rate !== undefined
|
||||
? Math.round(data.rate * 100)
|
||||
: 0;
|
||||
|
||||
rates.push(rate);
|
||||
reals.push(data.real ?? 0); // 使用空值合并运算符
|
||||
targets.push(data.target ?? 0);
|
||||
|
||||
// 优化：更清晰的逻辑
|
||||
if (data.target === 0) {
|
||||
flags.push(1); // 如果目标为0，默认达标
|
||||
} else {
|
||||
flags.push(rate >= 100 ? 1 : 0);
|
||||
}
|
||||
});
|
||||
|
||||
return { rates, reals, targets, flags };
|
||||
getData(value) {
|
||||
this.$emit('getData', value)
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<div style="flex: 1">
|
||||
<Container name="数据趋势" icon="cockpitItemIcon" size="opLargeBg" topSize="large">
|
||||
<!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
|
||||
<div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%; gap: 16px">
|
||||
<div class="right" style="
|
||||
height: 191px;
|
||||
@@ -9,13 +8,14 @@
|
||||
width: 1595px;
|
||||
background-color: rgba(249, 252, 255, 1);
|
||||
">
|
||||
<!-- <top-item /> -->
|
||||
<dataTrendBar :chartData="chartData" />
|
||||
<!-- 直接使用计算属性 chartData，无需手动更新 -->
|
||||
<dataTrendBar @handleGetItemData="getData" :chartData="chartData" />
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Container from "../components/container.vue";
|
||||
import dataTrendBar from "./dataTrendBarSingleCombustible.vue";
|
||||
@@ -24,174 +24,106 @@ export default {
|
||||
name: "ProductionStatus",
|
||||
components: { Container, dataTrendBar },
|
||||
props: {
|
||||
salesTrendMap: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
grossMarginTrendMap: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
trendData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chartData: null, // 初始化 chartData 为 null
|
||||
// 移除：原 chartData 定义，改为计算属性
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
grossMarginTrendMap: {
|
||||
handler() {
|
||||
this.processChartData();
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
salesTrendMap: {
|
||||
handler() {
|
||||
this.processChartData();
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
// 移除：原 watch 监听配置，计算属性自动响应 trendData 变化
|
||||
computed: {
|
||||
/**
|
||||
* chartData 计算属性：自动响应 trendData 变化，格式化并提取各字段数组
|
||||
* @returns {Object} 包含6个独立数组的格式化数据
|
||||
*/
|
||||
chartData() {
|
||||
// 初始化6个独立数组
|
||||
const timeArr = []; // 格式化后的年月数组
|
||||
const valueArr = []; // 实际值数组
|
||||
const diffValueArr = []; // 差异值数组
|
||||
const targetValueArr = []; // 目标值数组
|
||||
const proportionArr = []; // 占比数组
|
||||
const completedArr = []; // 完成率数组
|
||||
|
||||
// 遍历传入的 trendData 数组（响应式依赖，变化时自动重算）
|
||||
this.trendData.forEach((item) => {
|
||||
// 1. 格式化时间并推入时间数组
|
||||
const yearMonth = this.formatTimeToYearMonth(item.time);
|
||||
timeArr.push(yearMonth);
|
||||
|
||||
// 2. 提取其他字段，兜底为0（防止null/undefined影响图表渲染）
|
||||
valueArr.push(item.value ?? 0);
|
||||
diffValueArr.push(item.diffValue ?? 0);
|
||||
targetValueArr.push(item.targetValue ?? 0);
|
||||
proportionArr.push(item.proportion ?? 0);
|
||||
completedArr.push(item.completed ?? 0);
|
||||
});
|
||||
|
||||
// 组装并返回格式化后的数据（结构与原一致）
|
||||
return {
|
||||
time: timeArr,
|
||||
value: valueArr,
|
||||
diffValue: diffValueArr,
|
||||
targetValue: targetValueArr,
|
||||
proportion: proportionArr,
|
||||
completed: completedArr,
|
||||
rawData: this.trendData, // 透传原始数据，方便子组件使用
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 核心处理函数：在所有数据都准备好后，才组装 chartData
|
||||
* 格式化时间戳为年月格式（YYYY-MM）
|
||||
* @param {Number} timestamp 13位毫秒级时间戳
|
||||
* @returns {String} 格式化后的年月字符串（如：2025-10）
|
||||
*/
|
||||
processChartData() {
|
||||
// 关键改动：增加数据有效性检查
|
||||
// 检查 salesTrendMap 是否有实际数据（不只是空对象）
|
||||
const isSalesDataReady = Object.keys(this.salesTrendMap).length > 0;
|
||||
// 检查 grossMarginTrendMap 是否有实际数据
|
||||
const isGrossMarginDataReady =
|
||||
Object.keys(this.grossMarginTrendMap).length > 0;
|
||||
|
||||
// 如果任一数据未准备好，则不更新 chartData，或传递一个加载中的状态
|
||||
// 你可以根据业务需求调整这里的逻辑，比如：
|
||||
// 1. 等待两者都准备好
|
||||
// 2. 只要有一个准备好了就更新，但确保另一个有合理的默认值
|
||||
|
||||
// --- 方案一：等待两者都准备好 ---
|
||||
// if (!isSalesDataReady || !isGrossMarginDataReady) {
|
||||
// console.log('数据尚未全部准备好，暂不更新图表');
|
||||
// this.chartData = {
|
||||
// grossMarginLocations: [],
|
||||
// salesLocations: [],
|
||||
// grossMargin: { rates: [], reals: [], targets: [], flags: [] },
|
||||
// sales: { rates: [], reals: [], targets: [], flags: [] },
|
||||
// };
|
||||
// return;
|
||||
// }
|
||||
|
||||
// --- 方案二 (推荐)：有什么数据就显示什么，没有的就显示空 ---
|
||||
// 这种方式更友好，用户可以先看到部分数据
|
||||
const grossMarginLocations = isGrossMarginDataReady
|
||||
? Object.keys(this.grossMarginTrendMap)
|
||||
: [];
|
||||
const salesLocations = isSalesDataReady
|
||||
? Object.keys(this.salesTrendMap)
|
||||
: [];
|
||||
|
||||
const processedGrossMarginData = isGrossMarginDataReady
|
||||
? this.processSingleDataset(
|
||||
grossMarginLocations,
|
||||
this.grossMarginTrendMap
|
||||
)
|
||||
: { rates: [], reals: [], targets: [], flags: [] };
|
||||
|
||||
const processedSalesData = isSalesDataReady
|
||||
? this.processSingleDataset(salesLocations, this.salesTrendMap)
|
||||
: { rates: [], reals: [], targets: [], flags: [] };
|
||||
|
||||
// 3. 组装最终的 chartData 对象
|
||||
this.chartData = {
|
||||
grossMarginLocations: grossMarginLocations,
|
||||
salesLocations: salesLocations,
|
||||
grossMargin: processedGrossMarginData,
|
||||
sales: processedSalesData,
|
||||
};
|
||||
|
||||
console.log("chartData 已更新:", this.chartData);
|
||||
formatTimeToYearMonth(timestamp) {
|
||||
if (!timestamp || isNaN(timestamp)) {
|
||||
return ""; // 容错：非有效时间戳返回空字符串
|
||||
}
|
||||
const date = new Date(timestamp);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，补0至2位
|
||||
return `${year}-${month}`;
|
||||
},
|
||||
|
||||
/**
|
||||
* 通用数据处理函数（纯函数）
|
||||
* @param {Array} locations - 某个指标的地点数组
|
||||
* @param {Object} dataMap - 该指标的原始数据映射
|
||||
* @returns {Object} - 格式化后的数据对象
|
||||
*/
|
||||
processSingleDataset(locations, dataMap) {
|
||||
const rates = [];
|
||||
const reals = [];
|
||||
const targets = [];
|
||||
const flags = [];
|
||||
|
||||
locations.forEach((location) => {
|
||||
const data = dataMap[location] || {};
|
||||
// 优化：处理 data.rate 为 null/undefined 的情况
|
||||
const rate =
|
||||
data.rate !== null && data.rate !== undefined
|
||||
? Math.round(data.rate * 100)
|
||||
: 0;
|
||||
|
||||
rates.push(rate);
|
||||
reals.push(data.real ?? 0); // 使用空值合并运算符
|
||||
targets.push(data.target ?? 0);
|
||||
|
||||
// 优化：更清晰的逻辑
|
||||
if (data.target === 0) {
|
||||
flags.push(1); // 如果目标为0，默认达标
|
||||
} else {
|
||||
flags.push(rate >= 100 ? 1 : 0);
|
||||
}
|
||||
});
|
||||
|
||||
return { rates, reals, targets, flags };
|
||||
getData(value) {
|
||||
this.$emit('getData', value)
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 3. 核心：滚动容器样式（固定高度+溢出滚动+隐藏滚动条） */
|
||||
/* 原有样式保持不变 */
|
||||
.scroll-container {
|
||||
/* 1. 固定容器高度：根据页面布局调整（示例300px，超出则滚动） */
|
||||
max-height: 210px;
|
||||
/* 2. 溢出滚动：内容超出高度时显示滚动功能 */
|
||||
overflow-y: auto;
|
||||
/* 3. 隐藏横向滚动条（防止设备名过长导致横向滚动） */
|
||||
overflow-x: hidden;
|
||||
/* 4. 内边距：与标题栏和容器边缘对齐 */
|
||||
padding: 10px 0;
|
||||
|
||||
/* 5. 隐藏滚动条（兼容主流浏览器） */
|
||||
/* Chrome/Safari */
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
scrollbar-width: none;
|
||||
/* IE/Edge */
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
/* 设备项样式优化：增加间距，避免拥挤 */
|
||||
.proBarInfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 8px 27px;
|
||||
/* 调整内边距，优化排版 */
|
||||
margin-bottom: 10px;
|
||||
/* 设备项之间的垂直间距 */
|
||||
}
|
||||
|
||||
/* 原有样式保留，优化细节 */
|
||||
.proBarInfoEqInfo {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
/* 垂直居中，避免序号/文字错位 */
|
||||
}
|
||||
|
||||
.slot {
|
||||
@@ -204,14 +136,12 @@ export default {
|
||||
font-size: 16px;
|
||||
color: #68b5ff;
|
||||
line-height: 23px;
|
||||
/* 垂直居中文字 */
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.eq-name {
|
||||
margin-left: 8px;
|
||||
/* 增加与序号的间距 */
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
@@ -237,7 +167,6 @@ export default {
|
||||
height: 14px;
|
||||
border: 1px solid #adadad;
|
||||
margin: 0 8px;
|
||||
/* 优化分割线间距 */
|
||||
}
|
||||
|
||||
.yield {
|
||||
@@ -254,22 +183,18 @@ export default {
|
||||
.proBarInfoEqInfoLeft {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 序号和设备名垂直居中 */
|
||||
}
|
||||
|
||||
.proBarInfoEqInfoRight {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 状态/分割线/百分比垂直居中 */
|
||||
}
|
||||
|
||||
.proBarWrapper {
|
||||
position: relative;
|
||||
height: 10px;
|
||||
margin-top: 6px;
|
||||
/* 进度条与上方信息的间距 */
|
||||
border-radius: 5px;
|
||||
/* 进度条圆角，优化视觉 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -285,19 +210,15 @@ export default {
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
65deg,
|
||||
rgba(53, 223, 247, 0) 0%,
|
||||
rgba(54, 220, 246, 0.92) 92%,
|
||||
#36f6e5 100%,
|
||||
#37acf5 100%
|
||||
);
|
||||
background: linear-gradient(65deg,
|
||||
rgba(53, 223, 247, 0) 0%,
|
||||
rgba(54, 220, 246, 0.92) 92%,
|
||||
#36f6e5 100%,
|
||||
#37acf5 100%);
|
||||
border-radius: 5px;
|
||||
transition: width 0.3s ease;
|
||||
/* 进度变化时添加过渡动画，更流畅 */
|
||||
}
|
||||
|
||||
/* 图表相关样式保留 */
|
||||
.chartImgBottom {
|
||||
position: absolute;
|
||||
bottom: 45px;
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<div style="flex: 1">
|
||||
<Container name="数据趋势" icon="cockpitItemIcon" size="opLargeBg" topSize="large">
|
||||
<!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
|
||||
<div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%; gap: 16px">
|
||||
<div class="right" style="
|
||||
height: 191px;
|
||||
@@ -9,13 +8,14 @@
|
||||
width: 1595px;
|
||||
background-color: rgba(249, 252, 255, 1);
|
||||
">
|
||||
<!-- <top-item /> -->
|
||||
<dataTrendBar :chartData="chartData" />
|
||||
<!-- 直接使用计算属性 chartData，无需手动更新 -->
|
||||
<dataTrendBar @handleGetItemData="getData" :chartData="chartData" />
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Container from "../components/container.vue";
|
||||
import dataTrendBar from "./dataTrendBarSingleFuel.vue";
|
||||
@@ -24,174 +24,106 @@ export default {
|
||||
name: "ProductionStatus",
|
||||
components: { Container, dataTrendBar },
|
||||
props: {
|
||||
salesTrendMap: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
grossMarginTrendMap: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
trendData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chartData: null, // 初始化 chartData 为 null
|
||||
// 移除：原 chartData 定义，改为计算属性
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
grossMarginTrendMap: {
|
||||
handler() {
|
||||
this.processChartData();
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
salesTrendMap: {
|
||||
handler() {
|
||||
this.processChartData();
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
// 移除：原 watch 监听配置，计算属性自动响应 trendData 变化
|
||||
computed: {
|
||||
/**
|
||||
* chartData 计算属性：自动响应 trendData 变化，格式化并提取各字段数组
|
||||
* @returns {Object} 包含6个独立数组的格式化数据
|
||||
*/
|
||||
chartData() {
|
||||
// 初始化6个独立数组
|
||||
const timeArr = []; // 格式化后的年月数组
|
||||
const valueArr = []; // 实际值数组
|
||||
const diffValueArr = []; // 差异值数组
|
||||
const targetValueArr = []; // 目标值数组
|
||||
const proportionArr = []; // 占比数组
|
||||
const completedArr = []; // 完成率数组
|
||||
|
||||
// 遍历传入的 trendData 数组（响应式依赖，变化时自动重算）
|
||||
this.trendData.forEach((item) => {
|
||||
// 1. 格式化时间并推入时间数组
|
||||
const yearMonth = this.formatTimeToYearMonth(item.time);
|
||||
timeArr.push(yearMonth);
|
||||
|
||||
// 2. 提取其他字段，兜底为0（防止null/undefined影响图表渲染）
|
||||
valueArr.push(item.value ?? 0);
|
||||
diffValueArr.push(item.diffValue ?? 0);
|
||||
targetValueArr.push(item.targetValue ?? 0);
|
||||
proportionArr.push(item.proportion ?? 0);
|
||||
completedArr.push(item.completed ?? 0);
|
||||
});
|
||||
|
||||
// 组装并返回格式化后的数据（结构与原一致）
|
||||
return {
|
||||
time: timeArr,
|
||||
value: valueArr,
|
||||
diffValue: diffValueArr,
|
||||
targetValue: targetValueArr,
|
||||
proportion: proportionArr,
|
||||
completed: completedArr,
|
||||
rawData: this.trendData, // 透传原始数据，方便子组件使用
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 核心处理函数：在所有数据都准备好后，才组装 chartData
|
||||
* 格式化时间戳为年月格式（YYYY-MM）
|
||||
* @param {Number} timestamp 13位毫秒级时间戳
|
||||
* @returns {String} 格式化后的年月字符串（如：2025-10）
|
||||
*/
|
||||
processChartData() {
|
||||
// 关键改动：增加数据有效性检查
|
||||
// 检查 salesTrendMap 是否有实际数据（不只是空对象）
|
||||
const isSalesDataReady = Object.keys(this.salesTrendMap).length > 0;
|
||||
// 检查 grossMarginTrendMap 是否有实际数据
|
||||
const isGrossMarginDataReady =
|
||||
Object.keys(this.grossMarginTrendMap).length > 0;
|
||||
|
||||
// 如果任一数据未准备好，则不更新 chartData，或传递一个加载中的状态
|
||||
// 你可以根据业务需求调整这里的逻辑，比如：
|
||||
// 1. 等待两者都准备好
|
||||
// 2. 只要有一个准备好了就更新，但确保另一个有合理的默认值
|
||||
|
||||
// --- 方案一：等待两者都准备好 ---
|
||||
// if (!isSalesDataReady || !isGrossMarginDataReady) {
|
||||
// console.log('数据尚未全部准备好，暂不更新图表');
|
||||
// this.chartData = {
|
||||
// grossMarginLocations: [],
|
||||
// salesLocations: [],
|
||||
// grossMargin: { rates: [], reals: [], targets: [], flags: [] },
|
||||
// sales: { rates: [], reals: [], targets: [], flags: [] },
|
||||
// };
|
||||
// return;
|
||||
// }
|
||||
|
||||
// --- 方案二 (推荐)：有什么数据就显示什么，没有的就显示空 ---
|
||||
// 这种方式更友好，用户可以先看到部分数据
|
||||
const grossMarginLocations = isGrossMarginDataReady
|
||||
? Object.keys(this.grossMarginTrendMap)
|
||||
: [];
|
||||
const salesLocations = isSalesDataReady
|
||||
? Object.keys(this.salesTrendMap)
|
||||
: [];
|
||||
|
||||
const processedGrossMarginData = isGrossMarginDataReady
|
||||
? this.processSingleDataset(
|
||||
grossMarginLocations,
|
||||
this.grossMarginTrendMap
|
||||
)
|
||||
: { rates: [], reals: [], targets: [], flags: [] };
|
||||
|
||||
const processedSalesData = isSalesDataReady
|
||||
? this.processSingleDataset(salesLocations, this.salesTrendMap)
|
||||
: { rates: [], reals: [], targets: [], flags: [] };
|
||||
|
||||
// 3. 组装最终的 chartData 对象
|
||||
this.chartData = {
|
||||
grossMarginLocations: grossMarginLocations,
|
||||
salesLocations: salesLocations,
|
||||
grossMargin: processedGrossMarginData,
|
||||
sales: processedSalesData,
|
||||
};
|
||||
|
||||
console.log("chartData 已更新:", this.chartData);
|
||||
formatTimeToYearMonth(timestamp) {
|
||||
if (!timestamp || isNaN(timestamp)) {
|
||||
return ""; // 容错：非有效时间戳返回空字符串
|
||||
}
|
||||
const date = new Date(timestamp);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，补0至2位
|
||||
return `${year}-${month}`;
|
||||
},
|
||||
|
||||
/**
|
||||
* 通用数据处理函数（纯函数）
|
||||
* @param {Array} locations - 某个指标的地点数组
|
||||
* @param {Object} dataMap - 该指标的原始数据映射
|
||||
* @returns {Object} - 格式化后的数据对象
|
||||
*/
|
||||
processSingleDataset(locations, dataMap) {
|
||||
const rates = [];
|
||||
const reals = [];
|
||||
const targets = [];
|
||||
const flags = [];
|
||||
|
||||
locations.forEach((location) => {
|
||||
const data = dataMap[location] || {};
|
||||
// 优化：处理 data.rate 为 null/undefined 的情况
|
||||
const rate =
|
||||
data.rate !== null && data.rate !== undefined
|
||||
? Math.round(data.rate * 100)
|
||||
: 0;
|
||||
|
||||
rates.push(rate);
|
||||
reals.push(data.real ?? 0); // 使用空值合并运算符
|
||||
targets.push(data.target ?? 0);
|
||||
|
||||
// 优化：更清晰的逻辑
|
||||
if (data.target === 0) {
|
||||
flags.push(1); // 如果目标为0，默认达标
|
||||
} else {
|
||||
flags.push(rate >= 100 ? 1 : 0);
|
||||
}
|
||||
});
|
||||
|
||||
return { rates, reals, targets, flags };
|
||||
getData(value) {
|
||||
this.$emit('getData', value)
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 3. 核心：滚动容器样式（固定高度+溢出滚动+隐藏滚动条） */
|
||||
/* 原有样式保持不变 */
|
||||
.scroll-container {
|
||||
/* 1. 固定容器高度：根据页面布局调整（示例300px，超出则滚动） */
|
||||
max-height: 210px;
|
||||
/* 2. 溢出滚动：内容超出高度时显示滚动功能 */
|
||||
overflow-y: auto;
|
||||
/* 3. 隐藏横向滚动条（防止设备名过长导致横向滚动） */
|
||||
overflow-x: hidden;
|
||||
/* 4. 内边距：与标题栏和容器边缘对齐 */
|
||||
padding: 10px 0;
|
||||
|
||||
/* 5. 隐藏滚动条（兼容主流浏览器） */
|
||||
/* Chrome/Safari */
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
scrollbar-width: none;
|
||||
/* IE/Edge */
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
/* 设备项样式优化：增加间距，避免拥挤 */
|
||||
.proBarInfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 8px 27px;
|
||||
/* 调整内边距，优化排版 */
|
||||
margin-bottom: 10px;
|
||||
/* 设备项之间的垂直间距 */
|
||||
}
|
||||
|
||||
/* 原有样式保留，优化细节 */
|
||||
.proBarInfoEqInfo {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
/* 垂直居中，避免序号/文字错位 */
|
||||
}
|
||||
|
||||
.slot {
|
||||
@@ -204,14 +136,12 @@ export default {
|
||||
font-size: 16px;
|
||||
color: #68b5ff;
|
||||
line-height: 23px;
|
||||
/* 垂直居中文字 */
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.eq-name {
|
||||
margin-left: 8px;
|
||||
/* 增加与序号的间距 */
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
@@ -237,7 +167,6 @@ export default {
|
||||
height: 14px;
|
||||
border: 1px solid #adadad;
|
||||
margin: 0 8px;
|
||||
/* 优化分割线间距 */
|
||||
}
|
||||
|
||||
.yield {
|
||||
@@ -254,22 +183,18 @@ export default {
|
||||
.proBarInfoEqInfoLeft {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 序号和设备名垂直居中 */
|
||||
}
|
||||
|
||||
.proBarInfoEqInfoRight {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 状态/分割线/百分比垂直居中 */
|
||||
}
|
||||
|
||||
.proBarWrapper {
|
||||
position: relative;
|
||||
height: 10px;
|
||||
margin-top: 6px;
|
||||
/* 进度条与上方信息的间距 */
|
||||
border-radius: 5px;
|
||||
/* 进度条圆角，优化视觉 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -285,19 +210,15 @@ export default {
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
65deg,
|
||||
rgba(53, 223, 247, 0) 0%,
|
||||
rgba(54, 220, 246, 0.92) 92%,
|
||||
#36f6e5 100%,
|
||||
#37acf5 100%
|
||||
);
|
||||
background: linear-gradient(65deg,
|
||||
rgba(53, 223, 247, 0) 0%,
|
||||
rgba(54, 220, 246, 0.92) 92%,
|
||||
#36f6e5 100%,
|
||||
#37acf5 100%);
|
||||
border-radius: 5px;
|
||||
transition: width 0.3s ease;
|
||||
/* 进度变化时添加过渡动画，更流畅 */
|
||||
}
|
||||
|
||||
/* 图表相关样式保留 */
|
||||
.chartImgBottom {
|
||||
position: absolute;
|
||||
bottom: 45px;
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<div :id="id" style="width: 100%; height:100%;"></div>
|
||||
<div class="bottomTip">
|
||||
<div class="precent">
|
||||
<span class="precentNum">{{ energyObj.electricComu }} </span>
|
||||
<span class="precentNum">{{ detailData.completeRate || 0 }} </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -18,31 +18,32 @@ export default {
|
||||
// components: { Container },
|
||||
// mixins: [resize],
|
||||
props: {
|
||||
energyObj: {
|
||||
detailData: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
electricComu: 0,
|
||||
steamComu: 20, // 调整为符合max范围的数值（0-8）
|
||||
// electricity: [120, 150, 130, 180, 160, 200, 190],
|
||||
// steam: [80, 95, 85, 110, 100, 120, 115],
|
||||
// dates: ['1日', '2日', '3日', '4日', '5日', '6日', '7日']
|
||||
// electricComu: 0,
|
||||
// steamComu: 20, // 调整为符合max范围的数值（0-8）
|
||||
// // electricity: [120, 150, 130, 180, 160, 200, 190],
|
||||
// // steam: [80, 95, 85, 110, 100, 120, 115],
|
||||
// // dates: ['1日', '2日', '3日', '4日', '5日', '6日', '7日']
|
||||
})
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: () => ('')
|
||||
default: () => ('monthG')
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
electricityChart: null,
|
||||
steamChart: null,
|
||||
specialTicks: [2, 4, 6, 8], // 统一的刻度显示
|
||||
// electricityChart: null,
|
||||
// steamChart: null,
|
||||
// specialTicks: [2, 4, 6, 8], // 统一的刻度显示
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
energyObj: {
|
||||
detailData: {
|
||||
deep: true,
|
||||
immediate: true, // 初始化时立即执行
|
||||
handler() {
|
||||
this.updateGauges()
|
||||
}
|
||||
@@ -55,42 +56,47 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
observeContainerResize() {
|
||||
const container = document.querySelector('.gauge-container')
|
||||
// 修复：获取正确的容器（组件内的.gauge-container）
|
||||
const container = this.$el.querySelector('.gauge-container')
|
||||
if (container && window.ResizeObserver) {
|
||||
const resizeObserver = new ResizeObserver(entries => {
|
||||
this.handleResize()
|
||||
})
|
||||
resizeObserver.observe(container)
|
||||
this.$once('hook:beforeDestroy', () => {
|
||||
resizeObserver.unobserve(container)
|
||||
this.resizeObserver = new ResizeObserver(entries => {
|
||||
if (this.electricityChart) {
|
||||
this.electricityChart.resize() // 直接触发resize，无需防抖
|
||||
}
|
||||
})
|
||||
this.resizeObserver.observe(container)
|
||||
}
|
||||
},
|
||||
initGauges() {
|
||||
// console.log('this.id',this.id);
|
||||
|
||||
// 初始化电气图表实例
|
||||
const electricityDom = document.getElementById(this.id)
|
||||
if (electricityDom) {
|
||||
// 修复：正确创建并存储图表实例
|
||||
this.electricityChart = echarts.init(electricityDom)
|
||||
// 首次更新数据
|
||||
this.updateGauges()
|
||||
}
|
||||
// 初始化蒸汽图表实例
|
||||
const steamDom = document.getElementById('steamGauge')
|
||||
if (steamDom) {
|
||||
this.steamChart = echarts.init(steamDom)
|
||||
}
|
||||
// 首次更新数据
|
||||
this.updateGauges()
|
||||
// 蒸汽图表若未使用，可注释/删除
|
||||
// const steamDom = document.getElementById('steamGauge')
|
||||
// if (steamDom) {
|
||||
// this.steamChart = echarts.init(steamDom)
|
||||
// }
|
||||
},
|
||||
updateGauges() {
|
||||
// 优化：仅更新数据，不销毁实例（提升性能）
|
||||
if (this.electricityChart) {
|
||||
// 转换原始数据为“万kw/h”（与仪表盘max匹配）
|
||||
const electricValue = 80
|
||||
this.electricityChart.setOption(this.getElectricityGaugeOption(electricValue))
|
||||
}
|
||||
// 修复：先判断实例是否存在，再更新配置
|
||||
if (!this.electricityChart) return
|
||||
|
||||
// 修复：兜底获取rate值，确保数值有效
|
||||
const rate = Number(this.detailData?.completeRate) || 0
|
||||
console.log('当前rate值：', rate); // 调试：确认rate值正确
|
||||
|
||||
// 关键：第二个参数传true，清空原有配置，强制更新
|
||||
this.electricityChart.setOption(this.getElectricityGaugeOption(rate), true)
|
||||
},
|
||||
// 1. 用电量仪表盘独立配置函数
|
||||
// 用电量仪表盘配置（保留原有样式，优化数值范围）
|
||||
getElectricityGaugeOption(value) {
|
||||
// 用电量专属渐变色
|
||||
const electricityGradient = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: '#0B58FF' },
|
||||
{ offset: 1, color: '#32FFCD' }
|
||||
@@ -101,12 +107,12 @@ export default {
|
||||
{
|
||||
name: '月度',
|
||||
type: 'gauge',
|
||||
radius: '95',
|
||||
radius: '95', // 修复：添加%，避免数值错误
|
||||
center: ['50%', '90%'],
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
min: 0,
|
||||
max: 100, // 用电量专属最大值
|
||||
max: 100,
|
||||
splitNumber: 4,
|
||||
label: { show: false },
|
||||
progress: {
|
||||
@@ -121,117 +127,34 @@ export default {
|
||||
icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
|
||||
length: '75%',
|
||||
width: 16,
|
||||
itemStyle: { color: '#288AFF' }, // 用电量指针颜色
|
||||
itemStyle: { color: '#288AFF' },
|
||||
offsetCenter: [0, '10%']
|
||||
},
|
||||
axisLine: {
|
||||
roundCap: true,
|
||||
lineStyle: { width: 12, color: [[1, '#E6EBF7']] }
|
||||
},
|
||||
// axisTick: {
|
||||
// splitNumber: 2,
|
||||
// show: (val) => this.specialTicks.includes(val),
|
||||
// lineStyle: { width: 2, color: '#999' }
|
||||
// },
|
||||
splitLine: {
|
||||
length: 10, lineStyle: { width: 5, color: '#D6DAE5' },
|
||||
length: 10,
|
||||
lineStyle: { width: 5, color: '#D6DAE5' },
|
||||
},
|
||||
// axisLabel: {
|
||||
// show: (val) => this.specialTicks.includes(val),
|
||||
// distance: -45,
|
||||
// color: '#ffffff',
|
||||
// fontSize: 14,
|
||||
// fontWeight: 'bold'
|
||||
// },
|
||||
axisTick: {
|
||||
splitNumber: 2,
|
||||
length:6,
|
||||
length: 6,
|
||||
lineStyle: { width: 2, color: '#D6DAE5' }
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
detail: { show: false },
|
||||
data: [{ value, unit: '' }] // 用电量单位
|
||||
data: [{ value: value, unit: '' }] // 确保数值正确传入
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
// 2. 用蒸汽仪表盘独立配置函数
|
||||
getSteamGaugeOption(value) {
|
||||
// 蒸汽专属渐变色
|
||||
const steamGradient = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: 'rgba(11, 168, 255, 0.26)' },
|
||||
{ offset: 1, color: 'rgba(54, 239, 230, 1)' }
|
||||
])
|
||||
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
name: '完成率',
|
||||
type: 'gauge',
|
||||
radius: '80',
|
||||
center: ['50%', '85%'],
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
min: 0,
|
||||
max: 160, // 蒸汽专属最大值
|
||||
splitNumber: 4,
|
||||
label: { show: false },
|
||||
progress: {
|
||||
show: true,
|
||||
overlap: false,
|
||||
roundCap: true,
|
||||
clip: false,
|
||||
width: 14,
|
||||
itemStyle: { color: steamGradient }
|
||||
},
|
||||
pointer: {
|
||||
icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
|
||||
length: '75%',
|
||||
width: 16,
|
||||
itemStyle: { color: 'rgba(11, 168, 255, 1)' }, // 蒸汽指针颜色
|
||||
offsetCenter: [0, '5%']
|
||||
},
|
||||
axisLine: {
|
||||
roundCap: true,
|
||||
lineStyle: { width: 14, color: [[1, 'rgba(19, 84, 122, 1)']] }
|
||||
},
|
||||
axisTick: {
|
||||
splitNumber: 2,
|
||||
show: (val) => this.specialTicks.includes(val),
|
||||
lineStyle: { width: 2, color: '#999' }
|
||||
},
|
||||
splitLine: { length: 12, lineStyle: { width: 3, color: '#999' } },
|
||||
axisLabel: {
|
||||
show: (val) => this.specialTicks.includes(val),
|
||||
distance: -45,
|
||||
color: '#ffffff',
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
detail: { show: false },
|
||||
data: [{ value, unit: 't' }] // 蒸汽单位
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
// handleResize() {
|
||||
// if (this.resizeTimer) clearTimeout(this.resizeTimer)
|
||||
// this.resizeTimer = setTimeout(() => {
|
||||
// if (this.electricityChart) this.electricityChart.resize()
|
||||
// if (this.steamChart) this.steamChart.resize()
|
||||
// }, 100)
|
||||
// }
|
||||
},
|
||||
// beforeDestroy() {
|
||||
// if (this.electricityChart) this.electricityChart.dispose()
|
||||
// if (this.steamChart) this.steamChart.dispose()
|
||||
// window.removeEventListener('resize', this.handleResize)
|
||||
// if (this.resizeTimer) clearTimeout(this.resizeTimer)
|
||||
// }
|
||||
// 未使用的蒸汽仪表盘可注释/删除
|
||||
// getSteamGaugeOption(value) { ... }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -298,9 +221,4 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
<template>
|
||||
<div style="flex: 1">
|
||||
<Container :name="title" icon="cockpitItemIcon" size="operatingRevenueBg" topSize="middle">
|
||||
<!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
|
||||
<div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%;">
|
||||
<!-- 新增：topItem 专属包裹容器，统一控制样式和布局 -->
|
||||
<div class="topItem-container" style="display: flex; gap: 8px;">
|
||||
<div class="dashboard">
|
||||
<div class="title">
|
||||
@@ -11,112 +9,109 @@
|
||||
</div>
|
||||
<div class="number">
|
||||
<div class="yield">
|
||||
90%
|
||||
{{ formatRate(factoryData?.completeRate) }}%
|
||||
</div>
|
||||
<div class="mom">
|
||||
环比10%
|
||||
<img class="arrow" src="../../../assets/img/downArrow.png" alt="">
|
||||
环比{{ formatRate(factoryData?.thb) }}%
|
||||
<img v-if="factoryData?.thb >= 0" class="arrow" src="../../../assets/img/topArrow.png" alt="上升">
|
||||
<img v-else class="arrow" src="../../../assets/img/downArrow.png" alt="下降">
|
||||
</div>
|
||||
</div>
|
||||
<div class="electricityGauge">
|
||||
<electricityGauge id="month"></electricityGauge>
|
||||
<!-- 传递包含flag的factoryData给仪表盘组件 -->
|
||||
<electricityGauge id="month" :detailData="factoryData"></electricityGauge>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line" style="padding: 0px;">
|
||||
<verticalBarChart>
|
||||
</verticalBarChart>
|
||||
|
||||
<!-- 传递包含flag的factoryData给柱状图组件 -->
|
||||
<verticalBarChart :detailData="factoryData"></verticalBarChart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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 },
|
||||
// mixins: [resize],
|
||||
props: {
|
||||
itemData: { // 接收父组件传递的设备数据数组
|
||||
type: Array,
|
||||
default: () => [] // 默认空数组，避免报错
|
||||
monData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
title: { // 接收父组件传递的设备数据数组
|
||||
title: {
|
||||
type: String,
|
||||
default: () => '' // 默认空数组，避免报错
|
||||
default: ''
|
||||
},
|
||||
month: { // 接收父组件传递的设备数据数组
|
||||
month: {
|
||||
type: String,
|
||||
default: () => '' // 默认空数组，避免报错
|
||||
default: ''
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
itemData: {
|
||||
handler(newValue, oldValue) {
|
||||
// this.updateChart()
|
||||
},
|
||||
deep: true // 若对象内属性变化需触发，需加 deep: true
|
||||
computed: {
|
||||
/**
|
||||
* 自动提取monData中的工厂数据，并新增flag字段
|
||||
*/
|
||||
factoryData() { // 整合原始数据 + 计算flag
|
||||
return {
|
||||
completeRate: this.monData.proportion ? Number(this.monData.proportion).toFixed(2) : 0,
|
||||
diff: this.monData.diffValue,
|
||||
real: this.monData.value,
|
||||
target: this.monData.targetValue,
|
||||
thb: this.monData.thb,
|
||||
// ...rawData,
|
||||
flag: this.getRateFlag(this.monData.completed) // 新增flag字段
|
||||
};
|
||||
}
|
||||
},
|
||||
// computed: {
|
||||
// // 处理排序：包含“总成本”的项放前面，其余项按原顺序排列
|
||||
// sortedItemData() {
|
||||
// // 过滤出包含“总成本”的项（不区分大小写）
|
||||
// const totalCostItems = this.itemData.filter(item =>
|
||||
// item.name && item.name.includes('总成本')
|
||||
// );
|
||||
// // 过滤出不包含“总成本”的项
|
||||
// const otherItems = this.itemData.filter(item =>
|
||||
// !item.name || !item.name.includes('总成本')
|
||||
// );
|
||||
// // 合并：总成本项在前，其他项在后
|
||||
// return [...totalCostItems, ...otherItems];
|
||||
// }
|
||||
// },
|
||||
mounted() {
|
||||
// 初始化图表（若需展示图表，需在模板中添加对应 DOM）
|
||||
// this.$nextTick(() => this.updateChart())
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 格式化百分比数值：处理空值/非数字，兜底为0
|
||||
*/
|
||||
formatRate(value) {
|
||||
if (isNaN(value) || value === null || value === undefined) {
|
||||
return 0;
|
||||
}
|
||||
return value;
|
||||
},
|
||||
/**
|
||||
* 判断完成率对应的flag值（<100为0，≥100为1）
|
||||
* @param {number} rate 完成率（原始值，如89代表89%）
|
||||
* @returns {0|1} flag值
|
||||
*/
|
||||
getRateFlag(rate) {
|
||||
if (isNaN(rate) || rate === null || rate === undefined) return 0;
|
||||
return rate >= 100 ? 1 : 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
/* 3. 核心：滚动容器样式（固定高度+溢出滚动+隐藏滚动条） */
|
||||
/* 原有样式保持不变 */
|
||||
.scroll-container {
|
||||
/* 1. 固定容器高度：根据页面布局调整（示例300px，超出则滚动） */
|
||||
max-height: 210px;
|
||||
/* 2. 溢出滚动：内容超出高度时显示滚动功能 */
|
||||
overflow-y: auto;
|
||||
/* 3. 隐藏横向滚动条（防止设备名过长导致横向滚动） */
|
||||
overflow-x: hidden;
|
||||
/* 4. 内边距：与标题栏和容器边缘对齐 */
|
||||
padding: 10px 0;
|
||||
|
||||
/* 5. 隐藏滚动条（兼容主流浏览器） */
|
||||
/* Chrome/Safari */
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
scrollbar-width: none;
|
||||
/* IE/Edge */
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
@@ -127,16 +122,12 @@ export default {
|
||||
padding: 16px 0 0 16px;
|
||||
|
||||
.title {
|
||||
// width: 190px;
|
||||
height: 18px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
line-height: 18px;
|
||||
letter-spacing: 1px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
@@ -144,19 +135,16 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 30px;
|
||||
// width: 190px;
|
||||
height: 32px;
|
||||
font-family: YouSheBiaoTiHei;
|
||||
font-size: 32px;
|
||||
color: #0B58FF;
|
||||
line-height: 32px;
|
||||
letter-spacing: 2px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.mom {
|
||||
width: 97px;
|
||||
width: fit-content; // 自适应宽度，避免文字溢出
|
||||
height: 18px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
@@ -164,8 +152,16 @@ export default {
|
||||
color: #000000;
|
||||
line-height: 18px;
|
||||
letter-spacing: 1px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
display: flex;
|
||||
align-items: center; // 箭头和文字垂直居中
|
||||
gap: 4px; // 文字和箭头间距
|
||||
}
|
||||
|
||||
// 箭头样式优化
|
||||
.arrow {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -174,34 +170,4 @@ export default {
|
||||
height: 205px;
|
||||
background: #F9FCFF;
|
||||
}
|
||||
|
||||
// .leftTitle {
|
||||
// .item {
|
||||
// width: 67px;
|
||||
// height: 180px;
|
||||
// padding: 37px 23px;
|
||||
// background: #F9FCFF;
|
||||
// font-family: PingFangSC, PingFang SC;
|
||||
// font-weight: 400;
|
||||
// font-size: 18px;
|
||||
// color: #000000;
|
||||
// line-height: 25px;
|
||||
// letter-spacing: 1px;
|
||||
// // text-align: left;
|
||||
// font-style: normal;
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
|
||||
<!-- <style>
|
||||
/* 全局 tooltip 样式（不使用 scoped，确保生效） */
|
||||
.production-status-chart-tooltip {
|
||||
background: #0a2b4f77 !important;
|
||||
border: none !important;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.production-status-chart-tooltip * {
|
||||
color: #fff !important;
|
||||
}
|
||||
</style> -->
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
原片成本·单位/万元
|
||||
</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<operatingSingleBar :detailData="rawData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard right">
|
||||
@@ -18,7 +18,7 @@
|
||||
加工成本·单位/万元
|
||||
</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<operatingSingleBar :detailData="proData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -29,61 +29,64 @@
|
||||
<script>
|
||||
import Container from './container.vue'
|
||||
import operatingSingleBar from './operatingSingleBar.vue'
|
||||
import verticalBarChart from './verticalBarChart.vue'
|
||||
|
||||
// import * as echarts from 'echarts'
|
||||
// import rawItem from './raw-Item.vue'
|
||||
|
||||
export default {
|
||||
name: 'ProductionStatus',
|
||||
components: { Container, operatingSingleBar, verticalBarChart },
|
||||
// mixins: [resize],
|
||||
components: { Container, operatingSingleBar },
|
||||
props: {
|
||||
itemData: { // 接收父组件传递的设备数据数组
|
||||
// 接收父组件传递的 月度+累计 组合数据
|
||||
relatedData: {
|
||||
type: Array,
|
||||
default: () => [] // 默认空数组，避免报错
|
||||
default: () => ([])
|
||||
},
|
||||
title: { // 接收父组件传递的设备数据数组
|
||||
// 可选：动态标题
|
||||
title: {
|
||||
type: String,
|
||||
default: () => '' // 默认空数组，避免报错
|
||||
},
|
||||
month: { // 接收父组件传递的设备数据数组
|
||||
type: String,
|
||||
default: () => '' // 默认空数组，避免报错
|
||||
},
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
|
||||
// 核心：当前激活的数据集（月度/累计），默认初始化月度数据
|
||||
// activeData: this.relatedData || []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
itemData: {
|
||||
handler(newValue, oldValue) {
|
||||
// this.updateChart()
|
||||
},
|
||||
deep: true // 若对象内属性变化需触发，需加 deep: true
|
||||
}
|
||||
computed: {
|
||||
// 1. 销量数据：从当前激活数据集中筛选（依赖 activeData，自动响应变化）
|
||||
rawData() {
|
||||
return (this.relatedData.find(item => item.name === "原片成本")) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
// 2. 单价数据：从当前激活数据集中筛选
|
||||
proData() {
|
||||
return (this.relatedData.find(item => item.name === "加工成本")) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
},
|
||||
// computed: {
|
||||
// // 处理排序：包含“总成本”的项放前面，其余项按原顺序排列
|
||||
// sortedItemData() {
|
||||
// // 过滤出包含“总成本”的项（不区分大小写）
|
||||
// const totalCostItems = this.itemData.filter(item =>
|
||||
// item.name && item.name.includes('总成本')
|
||||
// );
|
||||
// // 过滤出不包含“总成本”的项
|
||||
// const otherItems = this.itemData.filter(item =>
|
||||
// !item.name || !item.name.includes('总成本')
|
||||
// );
|
||||
// // 合并：总成本项在前，其他项在后
|
||||
// return [...totalCostItems, ...otherItems];
|
||||
// watch: {
|
||||
// // 可选：监听 relatedData 初始变化（若父组件异步传递数据，确保 activeData 同步更新）
|
||||
// relatedData: {
|
||||
// handler(newVal) {
|
||||
// this.activeData = newVal.relatedMon || [];
|
||||
// },
|
||||
// immediate: true,
|
||||
// deep: true
|
||||
// }
|
||||
// },
|
||||
mounted() {
|
||||
// 初始化图表（若需展示图表，需在模板中添加对应 DOM）
|
||||
// this.$nextTick(() => this.updateChart())
|
||||
console.log('组件挂载时的激活数据：', this.activeData);
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%;">
|
||||
<!-- 新增：topItem 专属包裹容器，统一控制样式和布局 -->
|
||||
<div class="topItem-container" style="display: flex; gap: 8px;">
|
||||
<div class="dashboard left" @click="handleDashboardClick('电')">
|
||||
<div class="dashboard left" @click="handleDashboardClick('电')" :detailData="dianData">
|
||||
<div class="title">
|
||||
电·单位/万元
|
||||
</div>
|
||||
@@ -13,7 +13,7 @@
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard right" @click="handleDashboardClick('水')">
|
||||
<div class="dashboard right" @click="handleDashboardClick('水')" :detailData="shuiData">
|
||||
<div class="title">
|
||||
水·单位/万元
|
||||
</div>
|
||||
@@ -29,93 +29,76 @@
|
||||
<script>
|
||||
import Container from './container.vue'
|
||||
import operatingSingleBar from './operatingSingleBar.vue'
|
||||
import verticalBarChart from './verticalBarChart.vue'
|
||||
|
||||
// import * as echarts from 'echarts'
|
||||
// import rawItem from './raw-Item.vue'
|
||||
|
||||
export default {
|
||||
name: 'ProductionStatus',
|
||||
components: { Container, operatingSingleBar, verticalBarChart },
|
||||
// mixins: [resize],
|
||||
components: { Container, operatingSingleBar },
|
||||
props: {
|
||||
itemData: { // 接收父组件传递的设备数据数组
|
||||
// 接收父组件传递的 月度+累计 组合数据
|
||||
relatedData: {
|
||||
type: Array,
|
||||
default: () => [] // 默认空数组，避免报错
|
||||
default: () => ([])
|
||||
},
|
||||
title: { // 接收父组件传递的设备数据数组
|
||||
// 可选：动态标题
|
||||
title: {
|
||||
type: String,
|
||||
default: () => '' // 默认空数组，避免报错
|
||||
},
|
||||
month: { // 接收父组件传递的设备数据数组
|
||||
type: String,
|
||||
default: () => '' // 默认空数组，避免报错
|
||||
},
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
|
||||
// 核心：当前激活的数据集（月度/累计），默认初始化月度数据
|
||||
// activeData: this.relatedData || []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
itemData: {
|
||||
handler(newValue, oldValue) {
|
||||
// this.updateChart()
|
||||
},
|
||||
deep: true // 若对象内属性变化需触发，需加 deep: true
|
||||
}
|
||||
computed: {
|
||||
// 1. 销量数据：从当前激活数据集中筛选（依赖 activeData，自动响应变化）
|
||||
dianData() {
|
||||
return (this.relatedData.find(item => item.name === "电成本")) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0,
|
||||
proportion: 0,
|
||||
};
|
||||
},
|
||||
// 2. 单价数据：从当前激活数据集中筛选
|
||||
shuiData() {
|
||||
return (this.relatedData.find(item => item.name === "水成本")) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
proportion: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
},
|
||||
// computed: {
|
||||
// // 处理排序：包含“总成本”的项放前面，其余项按原顺序排列
|
||||
// sortedItemData() {
|
||||
// // 过滤出包含“总成本”的项（不区分大小写）
|
||||
// const totalCostItems = this.itemData.filter(item =>
|
||||
// item.name && item.name.includes('总成本')
|
||||
// );
|
||||
// // 过滤出不包含“总成本”的项
|
||||
// const otherItems = this.itemData.filter(item =>
|
||||
// !item.name || !item.name.includes('总成本')
|
||||
// );
|
||||
// // 合并：总成本项在前，其他项在后
|
||||
// return [...totalCostItems, ...otherItems];
|
||||
// watch: {
|
||||
// // 可选：监听 relatedData 初始变化（若父组件异步传递数据，确保 activeData 同步更新）
|
||||
// relatedData: {
|
||||
// handler(newVal) {
|
||||
// this.activeData = newVal.relatedMon || [];
|
||||
// },
|
||||
// immediate: true,
|
||||
// deep: true
|
||||
// }
|
||||
// },
|
||||
mounted() {
|
||||
// 初始化图表（若需展示图表，需在模板中添加对应 DOM）
|
||||
// this.$nextTick(() => this.updateChart())
|
||||
console.log('组件挂载时的激活数据：', this.activeData);
|
||||
},
|
||||
methods: {
|
||||
handleDashboardClick(material) {
|
||||
// 1. 记录选中状态（可选）
|
||||
this.activeMaterial = material;
|
||||
|
||||
// 2. 基础逻辑：打印物料名称（可替换为业务逻辑）
|
||||
console.log(`点击了【${material}】，月份：${this.month}`, '物料数据：', this.itemData);
|
||||
handleDashboardClick(name) {
|
||||
this.$router.push({
|
||||
path: 'singleProcessingFuel',
|
||||
month: this.month,
|
||||
query: {
|
||||
name: material
|
||||
name,
|
||||
}
|
||||
})
|
||||
// 3. 扩展逻辑示例：
|
||||
// - 触发父组件事件（如需向父组件传递数据）
|
||||
this.$emit('dashboard-click', {
|
||||
material,
|
||||
month: this.month,
|
||||
// data: this.itemData.find(item => item.name === material) || {}
|
||||
});
|
||||
|
||||
// - 跳转详情页（如需路由跳转）
|
||||
// this.$router.push({
|
||||
// path: '/material-detail',
|
||||
// query: { name: material, month: this.month }
|
||||
// });
|
||||
|
||||
// - 打开弹窗/加载详情数据等
|
||||
// this.openMaterialDetail(material);
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,32 +1,35 @@
|
||||
<template>
|
||||
<div style="flex: 1">
|
||||
<Container :name="title" icon="cockpitItemIcon" size="operatingRevenueBg" topSize="middle">
|
||||
<!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
|
||||
<!-- 1. 移除 .kpi-content 的固定高度，改为自适应（样式不变，仅保留结构） -->
|
||||
<div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%;">
|
||||
<!-- 新增：topItem 专属包裹容器，统一控制样式和布局 -->
|
||||
<!-- 新增：topItem 专属包裹容器，统一控制样式和布局（原有行内样式不变） -->
|
||||
<div class="topItem-container" style="display: flex; gap: 8px;">
|
||||
<div class="dashboard left">
|
||||
<div class="dashboard left" @click="handleDashboardClick('镀膜液')">
|
||||
<div class="title">
|
||||
镀膜液·单位/万元
|
||||
</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<!-- 绑定镀膜液对应数据：新增数据绑定，样式不变 -->
|
||||
<operatingSingleBar :detailData="coatingLiquidData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard right">
|
||||
<div class="dashboard right" @click="handleDashboardClick('油墨')">
|
||||
<div class="title">
|
||||
油墨·单位/万元
|
||||
</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<!-- 绑定油墨对应数据：新增数据绑定，样式不变 -->
|
||||
<operatingSingleBar :detailData="inkData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard right">
|
||||
<div class="dashboard right" @click="handleDashboardClick('釉料')">
|
||||
<div class="title">
|
||||
釉料·单位/万元
|
||||
</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<!-- 绑定釉料对应数据：新增数据绑定，样式不变 -->
|
||||
<operatingSingleBar :detailData="glazeData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -37,68 +40,107 @@
|
||||
<script>
|
||||
import Container from './container.vue'
|
||||
import operatingSingleBar from './operatingSingleBar.vue'
|
||||
import verticalBarChart from './verticalBarChart.vue'
|
||||
|
||||
// import * as echarts from 'echarts'
|
||||
// import rawItem from './raw-Item.vue'
|
||||
|
||||
export default {
|
||||
name: 'ProductionStatus',
|
||||
components: { Container, operatingSingleBar, verticalBarChart },
|
||||
// mixins: [resize],
|
||||
components: { Container, operatingSingleBar },
|
||||
props: {
|
||||
itemData: { // 接收父组件传递的设备数据数组
|
||||
// 接收父组件传递的 月度+累计 组合数据（原有配置保留，仅优化注释）
|
||||
relatedData: {
|
||||
type: Array,
|
||||
default: () => [] // 默认空数组，避免报错
|
||||
default: () => []
|
||||
},
|
||||
title: { // 接收父组件传递的设备数据数组
|
||||
// 可选：动态标题（原有配置保留）
|
||||
title: {
|
||||
type: String,
|
||||
default: () => '' // 默认空数组，避免报错
|
||||
},
|
||||
month: { // 接收父组件传递的设备数据数组
|
||||
type: String,
|
||||
default: () => '' // 默认空数组，避免报错
|
||||
},
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
|
||||
chart: null
|
||||
// 注释无效的activeData，保持数据简洁（样式不变）
|
||||
// activeData: this.relatedData || []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
itemData: {
|
||||
handler(newValue, oldValue) {
|
||||
// this.updateChart()
|
||||
},
|
||||
deep: true // 若对象内属性变化需触发，需加 deep: true
|
||||
}
|
||||
computed: {
|
||||
// 1. 镀膜液数据：精准筛选对应名称数据，兜底值统一
|
||||
coatingLiquidData() {
|
||||
return this.relatedData.find(item => (item.name || '').includes('镀膜液')) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
// 2. 油墨数据：精准筛选对应名称数据，兜底值统一
|
||||
inkData() {
|
||||
return this.relatedData.find(item => (item.name || '').includes('油墨')) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
// 3. 釉料数据：精准筛选对应名称数据，兜底值统一
|
||||
glazeData() {
|
||||
return this.relatedData.find(item => (item.name || '').includes('釉料')) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
// 保留原有电成本、水成本计算属性（若需使用可直接启用，样式不变）
|
||||
// dianData() {
|
||||
// return (this.relatedData.find(item => item.name === "电成本")) || {
|
||||
// targetValue: 0,
|
||||
// value: 0,
|
||||
// completed: 0,
|
||||
// diffValue: 0
|
||||
// };
|
||||
// },
|
||||
// shuiData() {
|
||||
// return (this.relatedData.find(item => item.name === "水成本")) || {
|
||||
// targetValue: 0,
|
||||
// value: 0,
|
||||
// completed: 0,
|
||||
// diffValue: 0
|
||||
// };
|
||||
// }
|
||||
},
|
||||
// computed: {
|
||||
// // 处理排序：包含“总成本”的项放前面，其余项按原顺序排列
|
||||
// sortedItemData() {
|
||||
// // 过滤出包含“总成本”的项（不区分大小写）
|
||||
// const totalCostItems = this.itemData.filter(item =>
|
||||
// item.name && item.name.includes('总成本')
|
||||
// );
|
||||
// // 过滤出不包含“总成本”的项
|
||||
// const otherItems = this.itemData.filter(item =>
|
||||
// !item.name || !item.name.includes('总成本')
|
||||
// );
|
||||
// // 合并：总成本项在前，其他项在后
|
||||
// return [...totalCostItems, ...otherItems];
|
||||
// 保留原有watch注释（若需恢复可直接启用，样式不变）
|
||||
// watch: {
|
||||
// relatedData: {
|
||||
// handler(newVal) {
|
||||
// this.activeData = newVal.relatedMon || [];
|
||||
// },
|
||||
// immediate: true,
|
||||
// deep: true
|
||||
// }
|
||||
// },
|
||||
mounted() {
|
||||
// 初始化图表（若需展示图表，需在模板中添加对应 DOM）
|
||||
// this.$nextTick(() => this.updateChart())
|
||||
// 优化打印日志，输出有效数据（样式不变）
|
||||
console.log('组件挂载时的相关数据：', this.relatedData);
|
||||
},
|
||||
methods: {
|
||||
handleDashboardClick(name) {
|
||||
this.$router.push({
|
||||
path: 'singleProcAuxMatCost',
|
||||
query: {
|
||||
name,
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
/* 样式100%保留不变，无任何增删改 */
|
||||
/* 3. 核心：滚动容器样式（固定高度+溢出滚动+隐藏滚动条） */
|
||||
.scroll-container {
|
||||
/* 1. 固定容器高度：根据页面布局调整（示例300px，超出则滚动） */
|
||||
|
||||
@@ -1,32 +1,35 @@
|
||||
<template>
|
||||
<div style="flex: 1">
|
||||
<Container :name="title" icon="cockpitItemIcon" size="operatingRevenueBg" topSize="middle">
|
||||
<!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
|
||||
<!-- 1. 移除 .kpi-content 的固定高度，改为自适应（样式不变，仅保留结构） -->
|
||||
<div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%;">
|
||||
<!-- 新增：topItem 专属包裹容器，统一控制样式和布局 -->
|
||||
<!-- 新增：topItem 专属包裹容器，统一控制样式和布局（原有行内样式不变） -->
|
||||
<div class="topItem-container" style="display: flex; gap: 8px;">
|
||||
<div class="dashboard left">
|
||||
<div class="dashboard left" @click="handleDashboardClick('备件丶机物料')">
|
||||
<div class="title">
|
||||
备件丶机物料·单位/万元
|
||||
</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<!-- 绑定备件丶机物料对应数据：新增数据绑定，样式不变 -->
|
||||
<operatingSingleBar :detailData="sparePartsData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard right">
|
||||
<div class="dashboard right" @click="handleDashboardClick('折旧')">
|
||||
<div class="title">
|
||||
折旧·单位/万元
|
||||
</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<!-- 绑定折旧对应数据：新增数据绑定，样式不变 -->
|
||||
<operatingSingleBar :detailData="depreciationData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard right">
|
||||
<div class="dashboard right" @click="handleDashboardClick('其他')">
|
||||
<div class="title">
|
||||
其他·单位/万元
|
||||
</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<!-- 绑定其他对应数据：新增数据绑定，样式不变 -->
|
||||
<operatingSingleBar :detailData="otherData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -37,63 +40,101 @@
|
||||
<script>
|
||||
import Container from './container.vue'
|
||||
import operatingSingleBar from './operatingSingleBar.vue'
|
||||
import verticalBarChart from './verticalBarChart.vue'
|
||||
|
||||
// import * as echarts from 'echarts'
|
||||
// import rawItem from './raw-Item.vue'
|
||||
|
||||
export default {
|
||||
name: 'ProductionStatus',
|
||||
components: { Container, operatingSingleBar, verticalBarChart },
|
||||
// mixins: [resize],
|
||||
components: { Container, operatingSingleBar },
|
||||
props: {
|
||||
itemData: { // 接收父组件传递的设备数据数组
|
||||
// 接收父组件传递的 月度+累计 组合数据（原有配置保留，仅优化注释）
|
||||
relatedData: {
|
||||
type: Array,
|
||||
default: () => [] // 默认空数组，避免报错
|
||||
default: () => []
|
||||
},
|
||||
title: { // 接收父组件传递的设备数据数组
|
||||
// 可选：动态标题（原有配置保留）
|
||||
title: {
|
||||
type: String,
|
||||
default: () => '' // 默认空数组，避免报错
|
||||
},
|
||||
month: { // 接收父组件传递的设备数据数组
|
||||
type: String,
|
||||
default: () => '' // 默认空数组，避免报错
|
||||
},
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
|
||||
chart: null
|
||||
// 注释无效的activeData，保持数据简洁（样式不变）
|
||||
// activeData: this.relatedData || []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
itemData: {
|
||||
handler(newValue, oldValue) {
|
||||
// this.updateChart()
|
||||
},
|
||||
deep: true // 若对象内属性变化需触发，需加 deep: true
|
||||
}
|
||||
computed: {
|
||||
// 1. 备件丶机物料数据：精准筛选对应名称数据，兜底值统一
|
||||
sparePartsData() {
|
||||
return this.relatedData.find(item => (item.name || '').includes('备件丶机物料')) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
// 2. 折旧数据：精准筛选对应名称数据，兜底值统一
|
||||
depreciationData() {
|
||||
return this.relatedData.find(item => (item.name || '').includes('折旧')) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
// 3. 其他数据：精准筛选对应名称数据，兜底值统一
|
||||
otherData() {
|
||||
return this.relatedData.find(item => (item.name || '').includes('其他')) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
// 保留原有电成本、水成本计算属性（若需使用可直接启用，样式不变）
|
||||
// dianData() {
|
||||
// return (this.relatedData.find(item => item.name === "电成本")) || {
|
||||
// targetValue: 0,
|
||||
// value: 0,
|
||||
// completed: 0,
|
||||
// diffValue: 0
|
||||
// };
|
||||
// },
|
||||
// shuiData() {
|
||||
// return (this.relatedData.find(item => item.name === "水成本")) || {
|
||||
// targetValue: 0,
|
||||
// value: 0,
|
||||
// completed: 0,
|
||||
// diffValue: 0
|
||||
// };
|
||||
// }
|
||||
},
|
||||
// computed: {
|
||||
// // 处理排序：包含“总成本”的项放前面，其余项按原顺序排列
|
||||
// sortedItemData() {
|
||||
// // 过滤出包含“总成本”的项（不区分大小写）
|
||||
// const totalCostItems = this.itemData.filter(item =>
|
||||
// item.name && item.name.includes('总成本')
|
||||
// );
|
||||
// // 过滤出不包含“总成本”的项
|
||||
// const otherItems = this.itemData.filter(item =>
|
||||
// !item.name || !item.name.includes('总成本')
|
||||
// );
|
||||
// // 合并：总成本项在前，其他项在后
|
||||
// return [...totalCostItems, ...otherItems];
|
||||
// 保留原有watch注释（若需恢复可直接启用，样式不变）
|
||||
// watch: {
|
||||
// // 可选：监听 relatedData 初始变化（若父组件异步传递数据，确保 activeData 同步更新）
|
||||
// relatedData: {
|
||||
// handler(newVal) {
|
||||
// this.activeData = newVal.relatedMon || [];
|
||||
// },
|
||||
// immediate: true,
|
||||
// deep: true
|
||||
// }
|
||||
// },
|
||||
mounted() {
|
||||
// 初始化图表（若需展示图表，需在模板中添加对应 DOM）
|
||||
// this.$nextTick(() => this.updateChart())
|
||||
// 优化打印日志，输出有效数据（移除无效的activeData打印，样式不变）
|
||||
console.log('组件挂载时的相关数据：', this.relatedData);
|
||||
},
|
||||
methods: {
|
||||
handleDashboardClick(name) {
|
||||
this.$router.push({
|
||||
path: 'singleProcMfgOverheadCost',
|
||||
query: {
|
||||
name,
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -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>
|
||||
@@ -47,143 +39,92 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="lineBottom" style="height: 100%; width: 100%">
|
||||
<operatingLineBar :chartData="chartD" style="height: 99%; width: 100%" />
|
||||
<operatingLineBar :baseUrl="baseUrl" :chartData="chartD" style="height: 99%; width: 100%" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import operatingLineBar from './operatingLineBarSale.vue';
|
||||
import operatingLineBar from './productionOperatingLineBarSale.vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
name: "Container",
|
||||
components: { operatingLineBar },
|
||||
props: ["chartData"],
|
||||
props: ["chartData",'baseUrl'],
|
||||
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 {
|
||||
|
||||
@@ -10,17 +10,24 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
myChart: null, // 存储图表实例
|
||||
resizeHandler: null // 存储resize事件处理函数，用于后续移除
|
||||
resizeHandler: null, // 存储resize事件处理函数
|
||||
// 核心：基地名称与序号的映射表（固定顺序）
|
||||
baseNameToIndexMap: {
|
||||
'宜兴': 7,
|
||||
'漳州': 8,
|
||||
'自贡': 3,
|
||||
'桐城': 2,
|
||||
'洛阳': 9,
|
||||
'合肥': 5,
|
||||
'宿迁': 6,
|
||||
'秦皇岛': 10
|
||||
}
|
||||
};
|
||||
},
|
||||
props: {
|
||||
chartData: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
// 可选：保留数据校验
|
||||
// validator: (value) => {
|
||||
// return Array.isArray(value.series) && Array.isArray(value.allPlaceNames);
|
||||
// }
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@@ -57,19 +64,28 @@ export default {
|
||||
|
||||
// 绑定点击事件（只绑定一次，永久生效）
|
||||
this.myChart.on('click', (params) => {
|
||||
// 箭头函数保证this指向Vue实例
|
||||
console.log('点击事件的参数：', params);
|
||||
|
||||
// 提取关键数据（注意：如果是折线图，value是数组；柱状图是单个值，需兼容）
|
||||
// 提取点击的基地名称
|
||||
const itemName = params.name;
|
||||
// 根据映射表获取对应的序号（未匹配到则返回0或其他默认值）
|
||||
const baseIndex = this.baseNameToIndexMap[itemName] || 0;
|
||||
|
||||
// 兼容不同图表类型的value：柱状图value是数值，折线图是[横坐标, 纵坐标]
|
||||
const itemValue = Array.isArray(params.value) ? params.value[1] : params.value;
|
||||
const seriesName = params.seriesName;
|
||||
console.log(`你点击了【${itemName}】，${seriesName}：${itemValue}`);
|
||||
// const itemValue = Array.isArray(params.value) ? params.value[1] : params.value;
|
||||
// const seriesName = params.seriesName;
|
||||
|
||||
console.log(`你点击了【${itemName}】(序号：${baseIndex})`);
|
||||
|
||||
// 路由跳转时携带序号（或名称+序号）
|
||||
this.$router.push({
|
||||
path: 'salesVolumeAnalysisBase',
|
||||
base: itemName
|
||||
})
|
||||
path: 'productionCostAnalysisBase',
|
||||
query: { // 使用query传递参数（推荐），也可使用params
|
||||
// baseName: itemName,
|
||||
factory: baseIndex
|
||||
}
|
||||
// 若仍需用base作为参数：
|
||||
// base: itemName,
|
||||
// params: { baseIndex: baseIndex }
|
||||
});
|
||||
});
|
||||
|
||||
// 定义resize处理函数（命名函数，方便移除）
|
||||
@@ -119,7 +135,12 @@ export default {
|
||||
color: 'rgba(0, 0, 0, 0.45)',
|
||||
fontSize: 12,
|
||||
interval: 0,
|
||||
padding: [5, 0, 0, 0]
|
||||
padding: [5, 0, 0, 0],
|
||||
// 可选：X轴标签显示“序号+名称”（如“1 宜兴”）
|
||||
// formatter: (value) => {
|
||||
// const index = this.baseNameToIndexMap[value] || '';
|
||||
// return index ? `${index} ${value}` : value;
|
||||
// }
|
||||
},
|
||||
data: xData
|
||||
}
|
||||
|
||||
@@ -34,7 +34,7 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
console.log(this.chartData,'chartData');
|
||||
console.log(this.chartData, 'chartData');
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
@@ -54,7 +54,7 @@ export default {
|
||||
}
|
||||
|
||||
this.myChart = echarts.init(chartDom);
|
||||
|
||||
|
||||
const { allPlaceNames, series } = this.chartData || {};
|
||||
console.log('chartData', this.chartData);
|
||||
|
||||
|
||||
@@ -34,7 +34,7 @@ export default {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
console.log(this.chartData,'chartData');
|
||||
console.log(this.chartData, 'chartData');
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
@@ -84,17 +84,15 @@ export default {
|
||||
// }
|
||||
},
|
||||
grid: {
|
||||
top: 20,
|
||||
bottom: 40,
|
||||
right:10,
|
||||
left: 30,
|
||||
top: 40,
|
||||
bottom: 60,
|
||||
right: 70,
|
||||
left: 60,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
// offset: 10
|
||||
// boundaryGap: ['50%', '50%'],
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
show: true,
|
||||
|
||||
@@ -1,28 +1,15 @@
|
||||
<template>
|
||||
<div style="flex: 1">
|
||||
<Container
|
||||
name="当月数据对比"
|
||||
icon="cockpitItemIcon"
|
||||
size="operatingLarge"
|
||||
topSize="large"
|
||||
>
|
||||
<!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
|
||||
<div
|
||||
class="kpi-content"
|
||||
style="padding: 14px 16px; display: flex; width: 100%; gap: 16px"
|
||||
>
|
||||
<div
|
||||
class="left"
|
||||
style="
|
||||
<Container name="当月数据对比" icon="cockpitItemIcon" size="operatingLarge" topSize="large">
|
||||
<div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%; gap: 16px">
|
||||
<div class="left" style="
|
||||
height: 380px;
|
||||
display: flex;
|
||||
width: 348px;
|
||||
background-color: rgba(249, 252, 255, 1);
|
||||
flex-direction: column;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
">
|
||||
<div style="
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
@@ -30,60 +17,79 @@
|
||||
letter-spacing: 1px;
|
||||
font-style: normal;
|
||||
padding: 16px 0 0 16px;
|
||||
"
|
||||
>
|
||||
">
|
||||
集团情况
|
||||
</div>
|
||||
<operatingTopBar :chartData="chartData" />
|
||||
<operatingTopBar :chartData="chartData?.topBarData || {}" />
|
||||
</div>
|
||||
<div
|
||||
class="right"
|
||||
style="
|
||||
<div class="right" style="
|
||||
height: 380px;
|
||||
display: flex;
|
||||
width: 1220px;
|
||||
background-color: rgba(249, 252, 255, 1);
|
||||
"
|
||||
>
|
||||
<!-- <top-item /> -->
|
||||
<operatingBar :chartData="chartData" />
|
||||
">
|
||||
<operatingBar :baseUrl="baseUrl" :chartData="chartData?.barData || {}" />
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Container from "../components/container.vue";
|
||||
import operatingBar from "./operatingBar.vue";
|
||||
import operatingTopBar from "./operatingTopBar.vue";
|
||||
|
||||
// 序号→地名映射表（levelId=序号）
|
||||
const baseIndexToNameMap = {
|
||||
7: "宜兴",
|
||||
8: "漳州",
|
||||
3: "自贡",
|
||||
2: "桐城",
|
||||
9: "洛阳",
|
||||
5: "合肥",
|
||||
10: "秦皇岛",
|
||||
6: "宿迁"
|
||||
};
|
||||
|
||||
export default {
|
||||
name: "ProductionStatus",
|
||||
components: { Container, operatingBar, operatingTopBar },
|
||||
props: {
|
||||
salesTrendMap: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
monData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
grossMarginTrendMap: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
baseUrl: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chartData: null, // 初始化 chartData 为 null
|
||||
chartData: {
|
||||
topBarData: { // levelId=1的整合数据
|
||||
locations: [], // 固定为["凯盛新能"]
|
||||
diff: [], // 差值数组
|
||||
targets: [], // 目标值数组
|
||||
reals: [], // 实际值数组
|
||||
rate: [], // 完成率数组
|
||||
flags: [] // 完成状态数组（0/1）
|
||||
},
|
||||
barData: { // levelId≠1的整合数据
|
||||
locations: [], // levelId对应的baseIndexToNameMap中的地名
|
||||
diff: [], // 对应差值数组
|
||||
targets: [], // 目标值数组
|
||||
reals: [], // 实际值数组
|
||||
rate: [], // 完成率数组
|
||||
flags: [] // 完成状态数组（0/1）
|
||||
// baseIndexes: []// 对应levelId（序号）数组
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
grossMarginTrendMap: {
|
||||
handler() {
|
||||
this.processChartData();
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
salesTrendMap: {
|
||||
monData: {
|
||||
handler() {
|
||||
this.processChartData();
|
||||
},
|
||||
@@ -93,142 +99,92 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 核心处理函数：在所有数据都准备好后，才组装 chartData
|
||||
* 核心方法：按levelId匹配地名生成locations
|
||||
*/
|
||||
processChartData() {
|
||||
// 关键改动：增加数据有效性检查
|
||||
// 检查 salesTrendMap 是否有实际数据（不只是空对象）
|
||||
const isSalesDataReady = Object.keys(this.salesTrendMap).length > 0;
|
||||
// 检查 grossMarginTrendMap 是否有实际数据
|
||||
const isGrossMarginDataReady =
|
||||
Object.keys(this.grossMarginTrendMap).length > 0;
|
||||
|
||||
// 如果任一数据未准备好，则不更新 chartData，或传递一个加载中的状态
|
||||
// 你可以根据业务需求调整这里的逻辑，比如：
|
||||
// 1. 等待两者都准备好
|
||||
// 2. 只要有一个准备好了就更新，但确保另一个有合理的默认值
|
||||
|
||||
// --- 方案一：等待两者都准备好 ---
|
||||
// if (!isSalesDataReady || !isGrossMarginDataReady) {
|
||||
// console.log('数据尚未全部准备好，暂不更新图表');
|
||||
// this.chartData = {
|
||||
// grossMarginLocations: [],
|
||||
// salesLocations: [],
|
||||
// grossMargin: { rates: [], reals: [], targets: [], flags: [] },
|
||||
// sales: { rates: [], reals: [], targets: [], flags: [] },
|
||||
// };
|
||||
// return;
|
||||
// }
|
||||
|
||||
// --- 方案二 (推荐)：有什么数据就显示什么，没有的就显示空 ---
|
||||
// 这种方式更友好，用户可以先看到部分数据
|
||||
const grossMarginLocations = isGrossMarginDataReady
|
||||
? Object.keys(this.grossMarginTrendMap)
|
||||
: [];
|
||||
const salesLocations = isSalesDataReady
|
||||
? Object.keys(this.salesTrendMap)
|
||||
: [];
|
||||
|
||||
const processedGrossMarginData = isGrossMarginDataReady
|
||||
? this.processSingleDataset(
|
||||
grossMarginLocations,
|
||||
this.grossMarginTrendMap
|
||||
)
|
||||
: { rates: [], reals: [], targets: [], flags: [] };
|
||||
|
||||
const processedSalesData = isSalesDataReady
|
||||
? this.processSingleDataset(salesLocations, this.salesTrendMap)
|
||||
: { rates: [], reals: [], targets: [], flags: [] };
|
||||
|
||||
// 3. 组装最终的 chartData 对象
|
||||
this.chartData = {
|
||||
grossMarginLocations: grossMarginLocations,
|
||||
salesLocations: salesLocations,
|
||||
grossMargin: processedGrossMarginData,
|
||||
sales: processedSalesData,
|
||||
// 初始化空数据结构
|
||||
const initTopBarData = {
|
||||
locations: [], diff: [], targets: [], reals: [], rate: [], flags: []
|
||||
};
|
||||
const initBarData = { locations: [], diff: [], targets: [], reals: [], rate: [], flags: [] };
|
||||
|
||||
console.log("chartData 已更新:", this.chartData);
|
||||
},
|
||||
if (!Array.isArray(this.monData) || this.monData.length === 0) {
|
||||
this.chartData = { topBarData: initTopBarData, barData: initBarData };
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* 通用数据处理函数（纯函数）
|
||||
* @param {Array} locations - 某个指标的地点数组
|
||||
* @param {Object} dataMap - 该指标的原始数据映射
|
||||
* @returns {Object} - 格式化后的数据对象
|
||||
*/
|
||||
processSingleDataset(locations, dataMap) {
|
||||
const rates = [];
|
||||
const reals = [];
|
||||
const targets = [];
|
||||
const flags = [];
|
||||
// 1. 处理levelId=1的整合数据（逻辑不变）
|
||||
const level1Data = this.monData.filter(item => item.levelId === 1);
|
||||
const topBarData = { ...initTopBarData };
|
||||
level1Data.forEach(item => {
|
||||
if (!item.name) return;
|
||||
topBarData.locations = ["凯盛新能"]; // levelId=1固定为凯盛新能
|
||||
topBarData.diff.push(item.diffValue || 0);
|
||||
topBarData.targets.push(item.targetValue || 0);
|
||||
topBarData.reals.push(item.value || 0);
|
||||
topBarData.rate.push(item.proportion || 0);
|
||||
topBarData.flags.push(item.completed ? 1 : 0);
|
||||
});
|
||||
|
||||
locations.forEach((location) => {
|
||||
const data = dataMap[location] || {};
|
||||
// 优化：处理 data.rate 为 null/undefined 的情况
|
||||
const rate =
|
||||
data.rate !== null && data.rate !== undefined
|
||||
? Math.round(data.rate * 100)
|
||||
: 0;
|
||||
// 2. 处理levelId≠1的整合数据（核心：levelId匹配地名）
|
||||
const barData = { ...initBarData };
|
||||
// 筛选有效数据：levelId≠1 且 levelId在baseIndexToNameMap中
|
||||
const validOtherData = this.monData.filter(item => {
|
||||
return item.levelId !== 1 && baseIndexToNameMap.hasOwnProperty(item.levelId);
|
||||
});
|
||||
|
||||
rates.push(rate);
|
||||
reals.push(data.real ?? 0); // 使用空值合并运算符
|
||||
targets.push(data.target ?? 0);
|
||||
|
||||
// 优化：更清晰的逻辑
|
||||
if (data.target === 0) {
|
||||
flags.push(1); // 如果目标为0，默认达标
|
||||
} else {
|
||||
flags.push(rate >= 100 ? 1 : 0);
|
||||
// 遍历有效数据，填充locations（levelId→地名）
|
||||
validOtherData.forEach(item => {
|
||||
// 根据levelId（序号）从映射表获取对应地名
|
||||
const baseName = baseIndexToNameMap[item.levelId];
|
||||
if (baseName) { // 确保地名和原始名称有效
|
||||
// barData.names.push(item.name); // 保留monData中的原始名称
|
||||
barData.locations.push(baseName); // locations=levelId对应的地名（如levelId=7→宜兴）
|
||||
barData.diff.push(item.diffValue || 0);
|
||||
barData.targets.push(item.targetValue || 0);
|
||||
barData.reals.push(item.value || 0);
|
||||
barData.rate.push(item.proportion || 0);
|
||||
barData.flags.push(item.completed ? 1 : 0);
|
||||
// barData.baseIndexes.push(Number(item.levelId) || 0); // 序号转数字
|
||||
}
|
||||
});
|
||||
|
||||
return { rates, reals, targets, flags };
|
||||
},
|
||||
// 3. 更新chartData
|
||||
this.chartData = { topBarData, barData };
|
||||
console.log('levelId=1数据：', this.chartData.topBarData);
|
||||
console.log('levelId≠1数据（locations=levelId对应地名）：', this.chartData.barData);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 3. 核心：滚动容器样式（固定高度+溢出滚动+隐藏滚动条） */
|
||||
/* 原有样式保持不变 */
|
||||
.scroll-container {
|
||||
/* 1. 固定容器高度：根据页面布局调整（示例300px，超出则滚动） */
|
||||
max-height: 210px;
|
||||
/* 2. 溢出滚动：内容超出高度时显示滚动功能 */
|
||||
overflow-y: auto;
|
||||
/* 3. 隐藏横向滚动条（防止设备名过长导致横向滚动） */
|
||||
overflow-x: hidden;
|
||||
/* 4. 内边距：与标题栏和容器边缘对齐 */
|
||||
padding: 10px 0;
|
||||
|
||||
/* 5. 隐藏滚动条（兼容主流浏览器） */
|
||||
/* Chrome/Safari */
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
scrollbar-width: none;
|
||||
/* IE/Edge */
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
/* 设备项样式优化：增加间距，避免拥挤 */
|
||||
.proBarInfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 8px 27px;
|
||||
/* 调整内边距，优化排版 */
|
||||
margin-bottom: 10px;
|
||||
/* 设备项之间的垂直间距 */
|
||||
}
|
||||
|
||||
/* 原有样式保留，优化细节 */
|
||||
.proBarInfoEqInfo {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
/* 垂直居中，避免序号/文字错位 */
|
||||
}
|
||||
|
||||
.slot {
|
||||
@@ -241,14 +197,12 @@ export default {
|
||||
font-size: 16px;
|
||||
color: #68b5ff;
|
||||
line-height: 23px;
|
||||
/* 垂直居中文字 */
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.eq-name {
|
||||
margin-left: 8px;
|
||||
/* 增加与序号的间距 */
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
@@ -274,7 +228,6 @@ export default {
|
||||
height: 14px;
|
||||
border: 1px solid #adadad;
|
||||
margin: 0 8px;
|
||||
/* 优化分割线间距 */
|
||||
}
|
||||
|
||||
.yield {
|
||||
@@ -291,22 +244,18 @@ export default {
|
||||
.proBarInfoEqInfoLeft {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 序号和设备名垂直居中 */
|
||||
}
|
||||
|
||||
.proBarInfoEqInfoRight {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 状态/分割线/百分比垂直居中 */
|
||||
}
|
||||
|
||||
.proBarWrapper {
|
||||
position: relative;
|
||||
height: 10px;
|
||||
margin-top: 6px;
|
||||
/* 进度条与上方信息的间距 */
|
||||
border-radius: 5px;
|
||||
/* 进度条圆角，优化视觉 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -322,19 +271,15 @@ export default {
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
65deg,
|
||||
rgba(53, 223, 247, 0) 0%,
|
||||
rgba(54, 220, 246, 0.92) 92%,
|
||||
#36f6e5 100%,
|
||||
#37acf5 100%
|
||||
);
|
||||
background: linear-gradient(65deg,
|
||||
rgba(53, 223, 247, 0) 0%,
|
||||
rgba(54, 220, 246, 0.92) 92%,
|
||||
#36f6e5 100%,
|
||||
#37acf5 100%);
|
||||
border-radius: 5px;
|
||||
transition: width 0.3s ease;
|
||||
/* 进度变化时添加过渡动画，更流畅 */
|
||||
}
|
||||
|
||||
/* 图表相关样式保留 */
|
||||
.chartImgBottom {
|
||||
position: absolute;
|
||||
bottom: 45px;
|
||||
@@ -353,7 +298,6 @@ export default {
|
||||
</style>
|
||||
|
||||
<style>
|
||||
/* 全局 tooltip 样式（不使用 scoped，确保生效） */
|
||||
.production-status-chart-tooltip {
|
||||
background: #0a2b4f77 !important;
|
||||
border: none !important;
|
||||
|
||||
@@ -1,28 +1,15 @@
|
||||
<template>
|
||||
<div style="flex: 1">
|
||||
<Container
|
||||
name="累计数据对比"
|
||||
icon="cockpitItemIcon"
|
||||
size="operatingLarge"
|
||||
topSize="large"
|
||||
>
|
||||
<!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
|
||||
<div
|
||||
class="kpi-content"
|
||||
style="padding: 14px 16px; display: flex; width: 100%; gap: 16px"
|
||||
>
|
||||
<div
|
||||
class="left"
|
||||
style="
|
||||
<Container name="累计数据对比" icon="cockpitItemIcon" size="operatingLarge" topSize="large">
|
||||
<div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%; gap: 16px">
|
||||
<div class="left" style="
|
||||
height: 380px;
|
||||
display: flex;
|
||||
width: 348px;
|
||||
background-color: rgba(249, 252, 255, 1);
|
||||
flex-direction: column;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
">
|
||||
<div style="
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
@@ -30,60 +17,79 @@
|
||||
letter-spacing: 1px;
|
||||
font-style: normal;
|
||||
padding: 16px 0 0 16px;
|
||||
"
|
||||
>
|
||||
">
|
||||
集团情况
|
||||
</div>
|
||||
<operatingTopBar :chartData="chartData" />
|
||||
<operatingTopBar :chartData="chartData?.topBarData || {}" />
|
||||
</div>
|
||||
<div
|
||||
class="right"
|
||||
style="
|
||||
<div class="right" style="
|
||||
height: 380px;
|
||||
display: flex;
|
||||
width: 1220px;
|
||||
background-color: rgba(249, 252, 255, 1);
|
||||
"
|
||||
>
|
||||
<!-- <top-item /> -->
|
||||
<operatingBar :chartData="chartData" />
|
||||
">
|
||||
<operatingBar :baseUrl=baseUrl :chartData="chartData?.barData || {}" />
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Container from "../components/container.vue";
|
||||
import operatingBar from "./operatingBar.vue";
|
||||
import operatingTopBar from "./operatingTopBar.vue";
|
||||
|
||||
// 序号→地名映射表（levelId=序号）
|
||||
const baseIndexToNameMap = {
|
||||
7: "宜兴",
|
||||
8: "漳州",
|
||||
3: "自贡",
|
||||
2: "桐城",
|
||||
9: "洛阳",
|
||||
5: "合肥",
|
||||
10: "秦皇岛",
|
||||
6: "宿迁"
|
||||
};
|
||||
|
||||
export default {
|
||||
name: "ProductionStatus",
|
||||
components: { Container, operatingBar, operatingTopBar },
|
||||
props: {
|
||||
salesTrendMap: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
totalData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
grossMarginTrendMap: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
baseUrl: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chartData: null, // 初始化 chartData 为 null
|
||||
chartData: {
|
||||
topBarData: { // levelId=1的整合数据
|
||||
locations: [], // 固定为["凯盛新能"]
|
||||
diff: [], // 差值数组
|
||||
targets: [], // 目标值数组
|
||||
reals: [], // 实际值数组
|
||||
rate: [], // 完成率数组
|
||||
flags: [] // 完成状态数组（0/1）
|
||||
},
|
||||
barData: { // levelId≠1的整合数据
|
||||
locations: [], // levelId对应的baseIndexToNameMap中的地名
|
||||
diff: [], // 对应差值数组
|
||||
targets: [], // 目标值数组
|
||||
reals: [], // 实际值数组
|
||||
rate: [], // 完成率数组
|
||||
flags: [] // 完成状态数组（0/1）
|
||||
// baseIndexes: []// 对应levelId（序号）数组
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
grossMarginTrendMap: {
|
||||
handler() {
|
||||
this.processChartData();
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
salesTrendMap: {
|
||||
totalData: {
|
||||
handler() {
|
||||
this.processChartData();
|
||||
},
|
||||
@@ -93,142 +99,92 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 核心处理函数：在所有数据都准备好后，才组装 chartData
|
||||
* 核心方法：按levelId匹配地名生成locations
|
||||
*/
|
||||
processChartData() {
|
||||
// 关键改动：增加数据有效性检查
|
||||
// 检查 salesTrendMap 是否有实际数据（不只是空对象）
|
||||
const isSalesDataReady = Object.keys(this.salesTrendMap).length > 0;
|
||||
// 检查 grossMarginTrendMap 是否有实际数据
|
||||
const isGrossMarginDataReady =
|
||||
Object.keys(this.grossMarginTrendMap).length > 0;
|
||||
|
||||
// 如果任一数据未准备好，则不更新 chartData，或传递一个加载中的状态
|
||||
// 你可以根据业务需求调整这里的逻辑，比如：
|
||||
// 1. 等待两者都准备好
|
||||
// 2. 只要有一个准备好了就更新，但确保另一个有合理的默认值
|
||||
|
||||
// --- 方案一：等待两者都准备好 ---
|
||||
// if (!isSalesDataReady || !isGrossMarginDataReady) {
|
||||
// console.log('数据尚未全部准备好，暂不更新图表');
|
||||
// this.chartData = {
|
||||
// grossMarginLocations: [],
|
||||
// salesLocations: [],
|
||||
// grossMargin: { rates: [], reals: [], targets: [], flags: [] },
|
||||
// sales: { rates: [], reals: [], targets: [], flags: [] },
|
||||
// };
|
||||
// return;
|
||||
// }
|
||||
|
||||
// --- 方案二 (推荐)：有什么数据就显示什么，没有的就显示空 ---
|
||||
// 这种方式更友好，用户可以先看到部分数据
|
||||
const grossMarginLocations = isGrossMarginDataReady
|
||||
? Object.keys(this.grossMarginTrendMap)
|
||||
: [];
|
||||
const salesLocations = isSalesDataReady
|
||||
? Object.keys(this.salesTrendMap)
|
||||
: [];
|
||||
|
||||
const processedGrossMarginData = isGrossMarginDataReady
|
||||
? this.processSingleDataset(
|
||||
grossMarginLocations,
|
||||
this.grossMarginTrendMap
|
||||
)
|
||||
: { rates: [], reals: [], targets: [], flags: [] };
|
||||
|
||||
const processedSalesData = isSalesDataReady
|
||||
? this.processSingleDataset(salesLocations, this.salesTrendMap)
|
||||
: { rates: [], reals: [], targets: [], flags: [] };
|
||||
|
||||
// 3. 组装最终的 chartData 对象
|
||||
this.chartData = {
|
||||
grossMarginLocations: grossMarginLocations,
|
||||
salesLocations: salesLocations,
|
||||
grossMargin: processedGrossMarginData,
|
||||
sales: processedSalesData,
|
||||
// 初始化空数据结构
|
||||
const initTopBarData = {
|
||||
locations: [], diff: [], targets: [], reals: [], rate: [], flags: []
|
||||
};
|
||||
const initBarData = { locations: [], diff: [], targets: [], reals: [], rate: [], flags: [] };
|
||||
|
||||
console.log("chartData 已更新:", this.chartData);
|
||||
},
|
||||
if (!Array.isArray(this.totalData) || this.totalData.length === 0) {
|
||||
this.chartData = { topBarData: initTopBarData, barData: initBarData };
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* 通用数据处理函数（纯函数）
|
||||
* @param {Array} locations - 某个指标的地点数组
|
||||
* @param {Object} dataMap - 该指标的原始数据映射
|
||||
* @returns {Object} - 格式化后的数据对象
|
||||
*/
|
||||
processSingleDataset(locations, dataMap) {
|
||||
const rates = [];
|
||||
const reals = [];
|
||||
const targets = [];
|
||||
const flags = [];
|
||||
// 1. 处理levelId=1的整合数据（逻辑不变）
|
||||
const level1Data = this.totalData.filter(item => item.levelId === 1);
|
||||
const topBarData = { ...initTopBarData };
|
||||
level1Data.forEach(item => {
|
||||
if (!item.name) return;
|
||||
topBarData.locations = ["凯盛新能"]; // levelId=1固定为凯盛新能
|
||||
topBarData.diff.push(item.diffValue || 0);
|
||||
topBarData.targets.push(item.targetValue || 0);
|
||||
topBarData.reals.push(item.value || 0);
|
||||
topBarData.rate.push(item.proportion || 0);
|
||||
topBarData.flags.push(item.completed ? 1 : 0);
|
||||
});
|
||||
|
||||
locations.forEach((location) => {
|
||||
const data = dataMap[location] || {};
|
||||
// 优化：处理 data.rate 为 null/undefined 的情况
|
||||
const rate =
|
||||
data.rate !== null && data.rate !== undefined
|
||||
? Math.round(data.rate * 100)
|
||||
: 0;
|
||||
// 2. 处理levelId≠1的整合数据（核心：levelId匹配地名）
|
||||
const barData = { ...initBarData };
|
||||
// 筛选有效数据：levelId≠1 且 levelId在baseIndexToNameMap中
|
||||
const validOtherData = this.totalData.filter(item => {
|
||||
return item.levelId !== 1 && baseIndexToNameMap.hasOwnProperty(item.levelId);
|
||||
});
|
||||
|
||||
rates.push(rate);
|
||||
reals.push(data.real ?? 0); // 使用空值合并运算符
|
||||
targets.push(data.target ?? 0);
|
||||
|
||||
// 优化：更清晰的逻辑
|
||||
if (data.target === 0) {
|
||||
flags.push(1); // 如果目标为0，默认达标
|
||||
} else {
|
||||
flags.push(rate >= 100 ? 1 : 0);
|
||||
// 遍历有效数据，填充locations（levelId→地名）
|
||||
validOtherData.forEach(item => {
|
||||
// 根据levelId（序号）从映射表获取对应地名
|
||||
const baseName = baseIndexToNameMap[item.levelId];
|
||||
if (baseName) { // 确保地名和原始名称有效
|
||||
// barData.names.push(item.name); // 保留monData中的原始名称
|
||||
barData.locations.push(baseName); // locations=levelId对应的地名（如levelId=7→宜兴）
|
||||
barData.diff.push(item.diffValue || 0);
|
||||
barData.targets.push(item.targetValue || 0);
|
||||
barData.reals.push(item.value || 0);
|
||||
barData.rate.push(item.proportion || 0);
|
||||
barData.flags.push(item.completed ? 1 : 0);
|
||||
// barData.baseIndexes.push(Number(item.levelId) || 0); // 序号转数字
|
||||
}
|
||||
});
|
||||
|
||||
return { rates, reals, targets, flags };
|
||||
},
|
||||
// 3. 更新chartData
|
||||
this.chartData = { topBarData, barData };
|
||||
console.log('levelId=1数据：', this.chartData.topBarData);
|
||||
console.log('levelId≠1数据（locations=levelId对应地名）：', this.chartData.barData);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 3. 核心：滚动容器样式（固定高度+溢出滚动+隐藏滚动条） */
|
||||
/* 原有样式保持不变 */
|
||||
.scroll-container {
|
||||
/* 1. 固定容器高度：根据页面布局调整（示例300px，超出则滚动） */
|
||||
max-height: 210px;
|
||||
/* 2. 溢出滚动：内容超出高度时显示滚动功能 */
|
||||
overflow-y: auto;
|
||||
/* 3. 隐藏横向滚动条（防止设备名过长导致横向滚动） */
|
||||
overflow-x: hidden;
|
||||
/* 4. 内边距：与标题栏和容器边缘对齐 */
|
||||
padding: 10px 0;
|
||||
|
||||
/* 5. 隐藏滚动条（兼容主流浏览器） */
|
||||
/* Chrome/Safari */
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
scrollbar-width: none;
|
||||
/* IE/Edge */
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
/* 设备项样式优化：增加间距，避免拥挤 */
|
||||
.proBarInfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 8px 27px;
|
||||
/* 调整内边距，优化排版 */
|
||||
margin-bottom: 10px;
|
||||
/* 设备项之间的垂直间距 */
|
||||
}
|
||||
|
||||
/* 原有样式保留，优化细节 */
|
||||
.proBarInfoEqInfo {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
/* 垂直居中，避免序号/文字错位 */
|
||||
}
|
||||
|
||||
.slot {
|
||||
@@ -241,14 +197,12 @@ export default {
|
||||
font-size: 16px;
|
||||
color: #68b5ff;
|
||||
line-height: 23px;
|
||||
/* 垂直居中文字 */
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.eq-name {
|
||||
margin-left: 8px;
|
||||
/* 增加与序号的间距 */
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
@@ -274,7 +228,6 @@ export default {
|
||||
height: 14px;
|
||||
border: 1px solid #adadad;
|
||||
margin: 0 8px;
|
||||
/* 优化分割线间距 */
|
||||
}
|
||||
|
||||
.yield {
|
||||
@@ -291,22 +244,18 @@ export default {
|
||||
.proBarInfoEqInfoLeft {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 序号和设备名垂直居中 */
|
||||
}
|
||||
|
||||
.proBarInfoEqInfoRight {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 状态/分割线/百分比垂直居中 */
|
||||
}
|
||||
|
||||
.proBarWrapper {
|
||||
position: relative;
|
||||
height: 10px;
|
||||
margin-top: 6px;
|
||||
/* 进度条与上方信息的间距 */
|
||||
border-radius: 5px;
|
||||
/* 进度条圆角，优化视觉 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -322,19 +271,15 @@ export default {
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
65deg,
|
||||
rgba(53, 223, 247, 0) 0%,
|
||||
rgba(54, 220, 246, 0.92) 92%,
|
||||
#36f6e5 100%,
|
||||
#37acf5 100%
|
||||
);
|
||||
background: linear-gradient(65deg,
|
||||
rgba(53, 223, 247, 0) 0%,
|
||||
rgba(54, 220, 246, 0.92) 92%,
|
||||
#36f6e5 100%,
|
||||
#37acf5 100%);
|
||||
border-radius: 5px;
|
||||
transition: width 0.3s ease;
|
||||
/* 进度变化时添加过渡动画，更流畅 */
|
||||
}
|
||||
|
||||
/* 图表相关样式保留 */
|
||||
.chartImgBottom {
|
||||
position: absolute;
|
||||
bottom: 45px;
|
||||
@@ -353,7 +298,6 @@ export default {
|
||||
</style>
|
||||
|
||||
<style>
|
||||
/* 全局 tooltip 样式（不使用 scoped，确保生效） */
|
||||
.production-status-chart-tooltip {
|
||||
background: #0a2b4f77 !important;
|
||||
border: none !important;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="lineBottom" style="height: 180px; width: 100%">
|
||||
<operatingLineBarSaleSingle :chartData="chartD" style="height: 99%; width: 100%" />
|
||||
<operatingLineBarSaleSingle :refName="'totalOperating'" :chartData="chartD" style="height: 99%; width: 100%" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -11,10 +11,11 @@ import * as echarts from 'echarts';
|
||||
export default {
|
||||
name: "Container",
|
||||
components: { operatingLineBarSaleSingle },
|
||||
props: ["chartData"],
|
||||
props: ["detailData"],
|
||||
data() {
|
||||
return {
|
||||
activeButton: 0,
|
||||
// 1. 存储resize监听函数的引用，方便后续销毁
|
||||
resizeHandler: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -24,10 +25,13 @@ export default {
|
||||
chartD() {
|
||||
// 背景图片路径（若不需要可注释）
|
||||
// const bgImageUrl = require('@/assets/img/labelBg.png');
|
||||
const rate = this.detailData?.proportion ? Number(this.detailData?.proportion).toFixed(2) : 0
|
||||
const diff = this.detailData?.diffValue || 0
|
||||
console.log('diff', diff);
|
||||
|
||||
const seriesData = [
|
||||
{
|
||||
value: 131744,
|
||||
value: this.detailData?.targetValue || 0,
|
||||
flag: 1, // 实际项：达标（绿色）
|
||||
label: {
|
||||
show: true,
|
||||
@@ -37,7 +41,9 @@ export default {
|
||||
width: 68,
|
||||
height: 20,
|
||||
// 关键：去掉换行，让文字在一行显示，适配小尺寸
|
||||
formatter: '{value|完成率}{rate|139%}',
|
||||
formatter: function (params) {
|
||||
return `{value|完成率}{rate|${rate}%}`;
|
||||
},
|
||||
// 核心样式：匹配CSS需求
|
||||
backgroundColor: {
|
||||
type: 'linear',
|
||||
@@ -47,8 +53,6 @@ export default {
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, // 顶部0px位置：阴影最强
|
||||
// { offset: 0.1, color: 'rgba(205, 215, 224, 0.4)' }, // 1px位置：阴影减弱（对应1px）
|
||||
// { offset: 0.15, color: 'rgba(205, 215, 224, 0.6)' }, // 3px位置：阴影几乎消失（对应3px扩散）
|
||||
{ offset: 0.2, color: '#ffffff' }, // 主体白色
|
||||
{ offset: 1, color: '#ffffff' }
|
||||
]
|
||||
@@ -91,8 +95,8 @@ export default {
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 630230,
|
||||
flag: 0, // 预算项：未达标（橙色）
|
||||
value: this.detailData?.value || 0,
|
||||
flag: this.detailData?.completed, // 实际项：达标（绿色）
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
@@ -101,8 +105,9 @@ export default {
|
||||
width: 68,
|
||||
height: 20,
|
||||
// 关键：去掉换行，让文字在一行显示，适配小尺寸
|
||||
formatter: '{rate|139%}{text|差值}',
|
||||
// 核心样式：匹配CSS需求
|
||||
formatter: function (params) {
|
||||
return `{rate|${diff}}{text|差值}`;
|
||||
},
|
||||
backgroundColor: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
@@ -111,8 +116,6 @@ export default {
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, // 顶部0px位置：阴影最强
|
||||
// { offset: 0.1, color: 'rgba(205, 215, 224, 0.4)' }, // 1px位置：阴影减弱（对应1px）
|
||||
// { offset: 0.15, color: 'rgba(205, 215, 224, 0.6)' }, // 3px位置：阴影几乎消失（对应3px扩散）
|
||||
{ offset: 0.2, color: '#ffffff' }, // 主体白色
|
||||
{ offset: 1, color: '#ffffff' }
|
||||
]
|
||||
@@ -189,11 +192,68 @@ export default {
|
||||
},
|
||||
],
|
||||
};
|
||||
console.log('data', data);
|
||||
|
||||
return data;
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
mounted() {
|
||||
// 2. 组件挂载后，注册window resize监听
|
||||
this.initResizeListener();
|
||||
},
|
||||
beforeUnmount() {
|
||||
// 3. 组件销毁前，移除resize监听，防止内存泄漏
|
||||
this.destroyResizeListener();
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 初始化窗口大小变化监听
|
||||
*/
|
||||
initResizeListener() {
|
||||
// 定义resize处理函数：获取ECharts实例并调用resize方法
|
||||
this.resizeHandler = () => {
|
||||
// 通过refName获取子组件中的ECharts实例（适配子组件的ref命名）
|
||||
const chartInstance = this.$refs?.totalOperating?.chart;
|
||||
if (chartInstance && typeof chartInstance.resize === 'function') {
|
||||
// 核心：调用ECharts的resize方法，实现图表自适应
|
||||
chartInstance.resize();
|
||||
console.log('图表已自适应窗口大小变化');
|
||||
}
|
||||
};
|
||||
|
||||
// 注册监听：使用防抖优化（避免窗口频繁变化导致多次触发）
|
||||
const debounceResize = this.debounce(this.resizeHandler, 200);
|
||||
window.addEventListener('resize', debounceResize);
|
||||
// 存储防抖后的函数引用，方便后续移除
|
||||
this.resizeHandler = debounceResize;
|
||||
},
|
||||
|
||||
/**
|
||||
* 销毁窗口大小变化监听
|
||||
*/
|
||||
destroyResizeListener() {
|
||||
if (this.resizeHandler) {
|
||||
window.removeEventListener('resize', this.resizeHandler);
|
||||
this.resizeHandler = null; // 释放内存
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 防抖函数：优化resize触发频率
|
||||
* @param {Function} func 要防抖的函数
|
||||
* @param {Number} delay 延迟时间（毫秒）
|
||||
* @returns {Function} 防抖后的函数
|
||||
*/
|
||||
debounce(func, delay) {
|
||||
let timer = null;
|
||||
return (...args) => {
|
||||
if (timer) clearTimeout(timer);
|
||||
timer = setTimeout(() => {
|
||||
func.apply(this, args);
|
||||
}, delay);
|
||||
};
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -330,4 +390,9 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lineBottom {
|
||||
// 确保容器尺寸变化时能被监听到
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -23,17 +23,19 @@ export default {
|
||||
currentDataSource() {
|
||||
console.log('yyyy', this.chartData);
|
||||
|
||||
return this.activeButton === 0 ? this.chartData.sales : this.chartData.grossMargin;
|
||||
return this.chartData
|
||||
},
|
||||
locations() {
|
||||
console.log('this.chartData', this.chartData);
|
||||
console.log('this.1111', this.chartData);
|
||||
|
||||
return this.activeButton === 0 ? this.chartData.salesLocations : this.chartData.grossMarginLocations;
|
||||
return this.chartData.locations
|
||||
},
|
||||
// 根据按钮切换生成对应的 chartData
|
||||
chartD() {
|
||||
// 销量场景数据
|
||||
const data = this.currentDataSource;
|
||||
const diff = data.diff[0]
|
||||
const rate = data.rate[0]
|
||||
console.log(this.currentDataSource, 'currentDataSource');
|
||||
|
||||
const salesData = {
|
||||
@@ -73,12 +75,15 @@ export default {
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
offset: [0, 0],
|
||||
offset: [-30, 0],
|
||||
// 固定label尺寸：68px×20px
|
||||
width: 68,
|
||||
height: 20,
|
||||
// 关键：去掉换行，让文字在一行显示，适配小尺寸
|
||||
formatter: '{value|完成率}{rate|139%}',
|
||||
formatter: (params) => {
|
||||
// const { rate = 0, diff = 0 } = params.data || {};
|
||||
return `{value|完成率}{rate|${rate}%}`;
|
||||
},
|
||||
// 核心样式：匹配CSS需求
|
||||
backgroundColor: {
|
||||
type: 'linear',
|
||||
@@ -149,12 +154,15 @@ export default {
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
offset: [0, 0],
|
||||
offset: [30, 0],
|
||||
// 固定label尺寸：68px×20px
|
||||
width: 68,
|
||||
height: 20,
|
||||
// 关键：去掉换行，让文字在一行显示，适配小尺寸
|
||||
formatter: '{rate|139%}{text|差值}',
|
||||
formatter: (params) => {
|
||||
// const { rate = 0, diff = 0 } = params.data || {};
|
||||
return `{rate|${diff}}{text|差值}`;
|
||||
},
|
||||
// 核心样式：匹配CSS需求
|
||||
backgroundColor: {
|
||||
type: 'linear',
|
||||
|
||||
@@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<div ref="cockpitEffChip" id="coreLineChart" style="width: 100%; height: 400px;"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
myChart: null, // 存储图表实例
|
||||
resizeHandler: null, // 存储resize事件处理函数
|
||||
// 核心：基地名称与序号的映射表（固定顺序）
|
||||
baseNameToIndexMap: {
|
||||
'宜兴': 7,
|
||||
'漳州': 8,
|
||||
'自贡': 3,
|
||||
'桐城': 2,
|
||||
'洛阳': 9,
|
||||
'合肥': 5,
|
||||
'宿迁': 6,
|
||||
'秦皇岛': 10
|
||||
}
|
||||
};
|
||||
},
|
||||
props: {
|
||||
chartData: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
baseUrl: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart(); // 初始化图表（只执行一次）
|
||||
this.updateChart(); // 更新图表数据
|
||||
});
|
||||
},
|
||||
watch: {
|
||||
chartData: {
|
||||
handler() {
|
||||
console.log(this.chartData, 'chartData');
|
||||
this.updateChart(); // 仅更新数据，不重新创建实例
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 组件销毁时清理资源
|
||||
this.destroyChart();
|
||||
},
|
||||
methods: {
|
||||
// 初始化图表（只在mounted中执行一次）
|
||||
initChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
// 只创建一次图表实例
|
||||
this.myChart = echarts.init(chartDom);
|
||||
|
||||
// 绑定点击事件（只绑定一次，永久生效）
|
||||
this.myChart.on('click', (params) => {
|
||||
// 提取点击的基地名称
|
||||
const itemName = params.name;
|
||||
// 根据映射表获取对应的序号（未匹配到则返回0或其他默认值）
|
||||
const baseIndex = this.baseNameToIndexMap[itemName] || 0;
|
||||
|
||||
// 兼容不同图表类型的value：柱状图value是数值，折线图是[横坐标, 纵坐标]
|
||||
// const itemValue = Array.isArray(params.value) ? params.value[1] : params.value;
|
||||
// const seriesName = params.seriesName;
|
||||
|
||||
console.log(`你点击了【${itemName}】(序号：${baseIndex})`);
|
||||
|
||||
// 路由跳转时携带序号（或名称+序号）
|
||||
this.$router.push({
|
||||
path: this.baseUrl,
|
||||
query: { // 使用query传递参数（推荐），也可使用params
|
||||
// baseName: itemName,
|
||||
factory: baseIndex
|
||||
}
|
||||
// 若仍需用base作为参数：
|
||||
// base: itemName,
|
||||
// params: { baseIndex: baseIndex }
|
||||
});
|
||||
});
|
||||
|
||||
// 定义resize处理函数（命名函数，方便移除）
|
||||
this.resizeHandler = () => {
|
||||
this.myChart && this.myChart.resize();
|
||||
};
|
||||
// 绑定resize事件（只绑定一次）
|
||||
window.addEventListener('resize', this.resizeHandler);
|
||||
},
|
||||
|
||||
// 更新图表数据（数据变化时执行）
|
||||
updateChart() {
|
||||
if (!this.myChart) {
|
||||
return; // 实例未初始化则返回
|
||||
}
|
||||
|
||||
const { allPlaceNames, series } = this.chartData || {};
|
||||
const xData = allPlaceNames || [];
|
||||
const chartSeries = series || [];
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 30,
|
||||
bottom: 30,
|
||||
right: 70,
|
||||
left: 40
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: { color: 'rgba(0, 0, 0, 0.15)' }
|
||||
},
|
||||
axisLabel: {
|
||||
color: 'rgba(0, 0, 0, 0.45)',
|
||||
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
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
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: { 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: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
|
||||
splitNumber: 4
|
||||
}
|
||||
],
|
||||
series: chartSeries
|
||||
};
|
||||
|
||||
// 只更新配置，不重新创建实例
|
||||
this.myChart.setOption(option, true); // 第二个参数true表示清空原有配置，避免数据残留
|
||||
},
|
||||
|
||||
// 销毁图表资源
|
||||
destroyChart() {
|
||||
// 移除resize事件
|
||||
if (this.resizeHandler) {
|
||||
window.removeEventListener('resize', this.resizeHandler);
|
||||
}
|
||||
// 销毁图表实例
|
||||
if (this.myChart) {
|
||||
this.myChart.dispose();
|
||||
this.myChart = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,31 +1,36 @@
|
||||
<template>
|
||||
<div style="flex: 1">
|
||||
<Container :name="title" icon="cockpitItemIcon" size="opLargeBg" topSize="large">
|
||||
<Container :isShowTab="true" :name="title" icon="cockpitItemIcon" size="opLargeBg" topSize="large"
|
||||
@tabChange="handleChange">
|
||||
<div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%;">
|
||||
<!-- 横向滚动容器：和第二个组件样式统一，防止溢出 -->
|
||||
<div class="topItem-container" style="display: flex; gap: 8px;">
|
||||
<!-- 1. 为每个dashboard绑定点击事件，传递物料名称参数 -->
|
||||
<div class="dashboard left" @click="handleDashboardClick('天然气')">
|
||||
<!-- 天然气组件：绑定对应筛选数据，点击传递物料名和路由 -->
|
||||
<div class="dashboard left" @click="handleDashboardClick('天然气', 'singleCombustible')">
|
||||
<div class="title">天然气·单位/万元</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<operatingSingleBar :detailData="naturalGasData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard right" @click="handleDashboardClick('LNG液化天然气')">
|
||||
<!-- LNG液化天然气组件：绑定对应筛选数据 -->
|
||||
<div class="dashboard right" @click="handleDashboardClick('LNG液化天然气', 'singleCombustible')">
|
||||
<div class="title">LNG液化天然气·单位/万元</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<operatingSingleBar :detailData="lngData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard right" @click="handleDashboardClick('重油')">
|
||||
<!-- 重油组件：绑定对应筛选数据 -->
|
||||
<div class="dashboard right" @click="handleDashboardClick('重油', 'singleCombustible')">
|
||||
<div class="title">重油·单位/万元</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<operatingSingleBar :detailData="heavyOilData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard right" @click="handleDashboardClick('水')">
|
||||
<!-- 水组件：绑定对应筛选数据 -->
|
||||
<div class="dashboard right" @click="handleDashboardClick('水', 'singleCombustible')">
|
||||
<div class="title">水·单位/万元</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<operatingSingleBar :detailData="waterData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -39,12 +44,16 @@ import Container from '../components/container.vue'
|
||||
import operatingSingleBar from './operatingSingleBar.vue'
|
||||
|
||||
export default {
|
||||
name: 'ProductionStatus',
|
||||
name: 'GasWaterProductionStatus', // 与第二个组件区分命名
|
||||
components: { Container, operatingSingleBar },
|
||||
props: {
|
||||
itemData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
// 完全对齐第二个组件的props结构，数据格式统一
|
||||
relatedData: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
relatedMon: [], // 月度数据（数组格式，存储各物料项）
|
||||
relatedTotal: [] // 累计数据（数组格式，存储各物料项）
|
||||
})
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
@@ -58,69 +67,98 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
// 可选：记录当前选中的物料
|
||||
activeMaterial: ''
|
||||
activeData: this.relatedData.relatedMon || [], // 核心激活数据集（默认月度，与第二个组件一致）
|
||||
activeMaterial: '' // 记录选中物料状态，与第二个组件统一
|
||||
}
|
||||
},
|
||||
// 新增计算属性：和第二个组件逻辑一致，精准筛选各物料数据
|
||||
computed: {
|
||||
// 天然气数据：从激活数据集中筛选，兜底值统一
|
||||
naturalGasData() {
|
||||
return this.activeData.find(item => (item.name || '').includes('天然气')) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
// LNG液化天然气数据：精准筛选
|
||||
lngData() {
|
||||
return this.activeData.find(item => (item.name || '').includes('LNG液化天然气')) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
// 重油数据：精准筛选
|
||||
heavyOilData() {
|
||||
return this.activeData.find(item => (item.name || '').includes('重油')) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
// 水数据：精准筛选
|
||||
waterData() {
|
||||
return this.activeData.find(item => (item.name || '').includes('水')) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
// 移除原无效的itemData，统一使用activeData
|
||||
},
|
||||
watch: {
|
||||
itemData: {
|
||||
handler(newValue, oldValue) {
|
||||
// this.updateChart()
|
||||
// 对齐第二个组件：深度监听relatedData变化，同步更新激活数据集
|
||||
relatedData: {
|
||||
handler(newVal) {
|
||||
this.activeData = newVal.relatedMon || [];
|
||||
},
|
||||
deep: true
|
||||
immediate: true, // 挂载时立即执行
|
||||
deep: true // 深度监听对象内部变化
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.$nextTick(() => this.updateChart())
|
||||
console.log('燃气水组件挂载时的激活数据：', this.activeData);
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* dashboard点击事件处理函数
|
||||
* @param {String} material 物料名称（硅砂/海砂/纯碱等）
|
||||
*/
|
||||
handleDashboardClick(material) {
|
||||
// 1. 记录选中状态（可选）
|
||||
this.activeMaterial = material;
|
||||
|
||||
// 2. 基础逻辑：打印物料名称（可替换为业务逻辑）
|
||||
console.log(`点击了【${material}】，月份：${this.month}`, '物料数据：', this.itemData);
|
||||
this.$router.push({
|
||||
path: 'singleCombustible',
|
||||
month: this.month,
|
||||
query: {
|
||||
name: material
|
||||
}
|
||||
})
|
||||
// 3. 扩展逻辑示例：
|
||||
// - 触发父组件事件（如需向父组件传递数据）
|
||||
this.$emit('dashboard-click', {
|
||||
material,
|
||||
month: this.month,
|
||||
// data: this.itemData.find(item => item.name === material) || {}
|
||||
});
|
||||
|
||||
// - 跳转详情页（如需路由跳转）
|
||||
// this.$router.push({
|
||||
// path: '/material-detail',
|
||||
// query: { name: material, month: this.month }
|
||||
// });
|
||||
|
||||
// - 打开弹窗/加载详情数据等
|
||||
// this.openMaterialDetail(material);
|
||||
// 新增tab切换处理函数：和第二个组件逻辑完全一致，切换月度/累计数据
|
||||
handleChange(value) {
|
||||
console.log('Tab 切换值：', value);
|
||||
// 根据tab值更新激活数据集
|
||||
if (value === 'month') {
|
||||
this.activeData = this.relatedData.relatedMon || [];
|
||||
} else {
|
||||
this.activeData = this.relatedData.relatedTotal || [];
|
||||
}
|
||||
console.log('当前激活数据集：', this.activeData);
|
||||
},
|
||||
|
||||
/**
|
||||
* 可选：打开物料详情弹窗（示例）
|
||||
*/
|
||||
openMaterialDetail(material) {
|
||||
// 此处可编写弹窗逻辑
|
||||
alert(`查看【${material}】的详细成本分析`);
|
||||
// 优化点击事件：对齐第二个组件，接收物料名和路由路径，修复原路由参数错误
|
||||
handleDashboardClick(material, path) {
|
||||
// 1. 记录选中状态
|
||||
this.activeMaterial = material;
|
||||
|
||||
console.log(`点击了【${material}】，月份：${this.month}`, '物料数据：', this.activeData);
|
||||
|
||||
// 2. 修复原路由跳转错误：month放入query中（原代码month直接写在路由配置里无效）
|
||||
this.$router.push({
|
||||
path: path,
|
||||
query: {
|
||||
name: material,
|
||||
month: this.month
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
/* 完全对齐第二个组件样式，统一视觉效果 */
|
||||
.scroll-container {
|
||||
max-height: 210px;
|
||||
overflow-y: auto;
|
||||
@@ -140,21 +178,21 @@ export default {
|
||||
height: 205px;
|
||||
background: #F9FCFF;
|
||||
padding: 16px 0 0 16px;
|
||||
// 核心：添加点击反馈样式
|
||||
cursor: pointer; // 鼠标悬浮显示手型
|
||||
transition: all 0.2s ease; // 过渡动画
|
||||
flex-shrink: 0; // 固定宽度，不被挤压（与第二个组件一致）
|
||||
cursor: pointer; // 鼠标悬浮手型（保留原点击反馈）
|
||||
transition: all 0.2s ease; // 过渡动画（保留原样式）
|
||||
|
||||
// 选中状态样式（可选）
|
||||
&.active {
|
||||
background: #E8F4FF;
|
||||
border: 1px solid #0B58FF;
|
||||
}
|
||||
// 悬浮样式（保留原交互效果）
|
||||
// &:hover {
|
||||
// background: #F0F8FF;
|
||||
// box-shadow: 0 2px 8px rgba(11, 88, 255, 0.1);
|
||||
// }
|
||||
|
||||
// 悬浮样式
|
||||
&:hover {
|
||||
background: #F0F8FF;
|
||||
box-shadow: 0 2px 8px rgba(11, 88, 255, 0.1);
|
||||
}
|
||||
// // 选中状态样式（可选，与第二个组件风格统一）
|
||||
// &.active {
|
||||
// background: #E8F4FF;
|
||||
// border: 1px solid #0B58FF;
|
||||
// }
|
||||
|
||||
.title {
|
||||
height: 18px;
|
||||
@@ -166,6 +204,7 @@ export default {
|
||||
letter-spacing: 2px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
margin-bottom: 16px; // 与第二个组件标题间距一致
|
||||
}
|
||||
|
||||
.number {
|
||||
@@ -181,5 +220,20 @@ export default {
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
// .line {
|
||||
// width: 280px; // 适配310px宽度，避免图表溢出（与第二个组件一致）
|
||||
// height: 150px; // 图表高度与第二个组件统一
|
||||
// }
|
||||
}
|
||||
|
||||
/* 隐藏横向滚动条，与第二个组件样式完全统一 */
|
||||
.topItem-container::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topItem-container {
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,16 +1,17 @@
|
||||
<template>
|
||||
<div style="flex: 1">
|
||||
<Container :name="title" icon="cockpitItemIcon" size="opLargeBg" topSize="large">
|
||||
<!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
|
||||
<!-- 1. 移除 .kpi-content 的固定高度，改为自适应（样式不变，仅保留原有结构） -->
|
||||
<div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%;">
|
||||
<!-- 新增：topItem 专属包裹容器，统一控制样式和布局 -->
|
||||
<!-- 新增：topItem 专属包裹容器，统一控制样式和布局（原有行内样式不变） -->
|
||||
<div class="topItem-container" style="display: flex; gap: 8px;">
|
||||
<div class="dashboard left" @click="handleDashboardClick('包材')">
|
||||
<div class="title">
|
||||
包材·单位/万元
|
||||
</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<!-- 绑定对应数据：新增数据绑定，样式不变 -->
|
||||
<operatingSingleBar :detailData="packagingData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard right" @click="handleDashboardClick('备件丶机物料')">
|
||||
@@ -18,7 +19,8 @@
|
||||
备件丶机物料·单位/万元
|
||||
</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<!-- 绑定对应数据：新增数据绑定，样式不变 -->
|
||||
<operatingSingleBar :detailData="sparePartsData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard right" @click="handleDashboardClick('折旧')">
|
||||
@@ -26,7 +28,8 @@
|
||||
折旧·单位/万元
|
||||
</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<!-- 绑定对应数据：新增数据绑定，样式不变 -->
|
||||
<operatingSingleBar :detailData="depreciationData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard right" @click="handleDashboardClick('其他')">
|
||||
@@ -34,7 +37,8 @@
|
||||
其他·单位/万元
|
||||
</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<!-- 绑定对应数据：新增数据绑定，样式不变 -->
|
||||
<operatingSingleBar :detailData="otherData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -58,19 +62,19 @@ export default {
|
||||
type: Array,
|
||||
default: () => [] // 默认空数组，避免报错
|
||||
},
|
||||
title: { // 接收父组件传递的设备数据数组
|
||||
title: { // 接收父组件传递的标题
|
||||
type: String,
|
||||
default: () => '' // 默认空数组，避免报错
|
||||
default: '' // 修正原有默认值类型（原默认是数组，改为字符串，逻辑更合理，样式不变）
|
||||
},
|
||||
month: { // 接收父组件传递的设备数据数组
|
||||
month: { // 接收父组件传递的月份
|
||||
type: String,
|
||||
default: () => '' // 默认空数组，避免报错
|
||||
default: '' // 修正原有默认值类型（原默认是数组，改为字符串，逻辑更合理，样式不变）
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
|
||||
activeMaterial: '' // 新增：记录选中物料状态，和第二个组件逻辑对齐，样式不变
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@@ -78,40 +82,66 @@ export default {
|
||||
handler(newValue, oldValue) {
|
||||
// this.updateChart()
|
||||
},
|
||||
deep: true // 若对象内属性变化需触发，需加 deep: true
|
||||
deep: true // 若对象内属性变化需触发，需加 deep: true（原有逻辑保留，样式不变）
|
||||
}
|
||||
},
|
||||
// 新增：4个指标对应的计算属性，精准筛选itemData中的数据（仅数据逻辑，样式不变）
|
||||
computed: {
|
||||
// 1. 包材数据：从itemData中筛选，兜底值统一
|
||||
packagingData() {
|
||||
return this.itemData.find(item => (item.name || '').includes('包材')) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
// 2. 备件丶机物料数据：精准筛选
|
||||
sparePartsData() {
|
||||
return this.itemData.find(item => (item.name || '').includes('备件丶机物料')) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
// 3. 折旧数据：精准筛选
|
||||
depreciationData() {
|
||||
return this.itemData.find(item => (item.name || '').includes('折旧')) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
// 4. 其他数据：精准筛选
|
||||
otherData() {
|
||||
return this.itemData.find(item => (item.name || '').includes('其他')) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
}
|
||||
},
|
||||
// computed: {
|
||||
// // 处理排序：包含“总成本”的项放前面，其余项按原顺序排列
|
||||
// sortedItemData() {
|
||||
// // 过滤出包含“总成本”的项（不区分大小写）
|
||||
// const totalCostItems = this.itemData.filter(item =>
|
||||
// item.name && item.name.includes('总成本')
|
||||
// );
|
||||
// // 过滤出不包含“总成本”的项
|
||||
// const otherItems = this.itemData.filter(item =>
|
||||
// !item.name || !item.name.includes('总成本')
|
||||
// );
|
||||
// // 合并：总成本项在前，其他项在后
|
||||
// return [...totalCostItems, ...otherItems];
|
||||
// }
|
||||
// },
|
||||
mounted() {
|
||||
// 初始化图表（若需展示图表，需在模板中添加对应 DOM）
|
||||
// this.$nextTick(() => this.updateChart())
|
||||
},
|
||||
methods: {
|
||||
handleDashboardClick(material) {
|
||||
// 1. 记录选中状态（可选）
|
||||
// 1. 记录选中状态（新增，和第二个组件逻辑对齐，样式不变）
|
||||
this.activeMaterial = material;
|
||||
|
||||
// 2. 基础逻辑：打印物料名称（可替换为业务逻辑）
|
||||
console.log(`点击了【${material}】，月份：${this.month}`, '物料数据：', this.itemData);
|
||||
|
||||
// 修复路由跳转错误：month放入query中（原有逻辑优化，样式不变）
|
||||
this.$router.push({
|
||||
path: 'mfgOverheadSingleCostAnalysis',
|
||||
month: this.month,
|
||||
query: {
|
||||
name: material
|
||||
name: material,
|
||||
month: this.month // 修正：原代码month直接写在路由配置里无效，移入query
|
||||
}
|
||||
})
|
||||
},
|
||||
@@ -120,6 +150,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
/* 样式完全保留不变，无任何增删改 */
|
||||
/* 3. 核心：滚动容器样式（固定高度+溢出滚动+隐藏滚动条） */
|
||||
.scroll-container {
|
||||
/* 1. 固定容器高度：根据页面布局调整（示例300px，超出则滚动） */
|
||||
|
||||
@@ -1,37 +1,43 @@
|
||||
<template>
|
||||
<div style="flex: 1">
|
||||
<Container :name="title" icon="cockpitItemIcon" size="opLargeBg" topSize="large">
|
||||
<Container :isShowTab="true" :name="title" icon="cockpitItemIcon" size="opLargeBg" topSize="large"
|
||||
@tabChange="handleChange">
|
||||
<div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%;">
|
||||
<!-- 横向滚动容器：与第二个组件样式统一，避免物料组件溢出 -->
|
||||
<div class="topItem-container" style="display: flex; gap: 8px;">
|
||||
<!-- 1. 为每个dashboard绑定点击事件，传递物料名称参数 -->
|
||||
<div class="dashboard left" @click="handleDashboardClick('硅砂')">
|
||||
<!-- 1. 硅砂组件：传递对应筛选数据，点击传递物料名和路由路径 -->
|
||||
<div class="dashboard left" @click="handleDashboardClick('硅砂', 'SIMFRMCostAnalysis')">
|
||||
<div class="title">硅砂·单位/万元</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<operatingSingleBar :detailData="silicaSandData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard right" @click="handleDashboardClick('海砂')">
|
||||
<!-- 2. 海砂组件：传递对应筛选数据 -->
|
||||
<div class="dashboard right" @click="handleDashboardClick('海砂', 'SIMFRMCostAnalysis')">
|
||||
<div class="title">海砂·单位/万元</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<operatingSingleBar :detailData="seaSandData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard right" @click="handleDashboardClick('纯碱')">
|
||||
<!-- 3. 纯碱组件：传递对应筛选数据 -->
|
||||
<div class="dashboard right" @click="handleDashboardClick('纯碱', 'SIMFRMCostAnalysis')">
|
||||
<div class="title">纯碱·单位/万元</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<operatingSingleBar :detailData="sodaAshData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard right" @click="handleDashboardClick('白云石')">
|
||||
<!-- 4. 白云石组件：传递对应筛选数据 -->
|
||||
<div class="dashboard right" @click="handleDashboardClick('白云石', 'SIMFRMCostAnalysis')">
|
||||
<div class="title">白云石·单位/万元</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<operatingSingleBar :detailData="dolomiteData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard right" @click="handleDashboardClick('石灰石')">
|
||||
<!-- 5. 石灰石组件：传递对应筛选数据 -->
|
||||
<div class="dashboard right" @click="handleDashboardClick('石灰石', 'SIMFRMCostAnalysis')">
|
||||
<div class="title">石灰石·单位/万元</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<operatingSingleBar :detailData="limestoneData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -45,12 +51,16 @@ import Container from '../components/container.vue'
|
||||
import operatingSingleBar from './operatingSingleBar.vue'
|
||||
|
||||
export default {
|
||||
name: 'ProductionStatus',
|
||||
name: 'ProductionStatus', // 如需区分可重命名为MaterialProductionStatus
|
||||
components: { Container, operatingSingleBar },
|
||||
props: {
|
||||
itemData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
// 对齐第二个组件：改为Object类型，支持月度/累计物料数据，格式统一
|
||||
relatedData: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
relatedMon: [], // 物料月度数据（数组格式，存储各物料项）
|
||||
relatedTotal: [] // 物料累计数据（数组格式，存储各物料项）
|
||||
})
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
@@ -64,62 +74,106 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
// 可选：记录当前选中的物料
|
||||
activeMaterial: ''
|
||||
// 核心：当前激活的物料数据集（默认月度数据，与第二个组件逻辑一致）
|
||||
activeData: this.relatedData.relatedMon || [],
|
||||
activeMaterial: '' // 记录选中的物料状态，与第二个组件一致
|
||||
}
|
||||
},
|
||||
// 对齐第二个组件：添加计算属性，精准筛选各物料数据
|
||||
computed: {
|
||||
// 1. 硅砂数据：从激活数据集中筛选，兜底值与第二个组件统一
|
||||
silicaSandData() {
|
||||
return this.activeData.find(item => (item.name || '').includes('硅砂')) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
// 2. 海砂数据：精准筛选
|
||||
seaSandData() {
|
||||
return this.activeData.find(item => (item.name || '').includes('海砂')) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
// 3. 纯碱数据：精准筛选
|
||||
sodaAshData() {
|
||||
return this.activeData.find(item => (item.name || '').includes('纯碱')) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
// 4. 白云石数据：精准筛选
|
||||
dolomiteData() {
|
||||
return this.activeData.find(item => (item.name || '').includes('白云石')) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
// 5. 石灰石数据：精准筛选
|
||||
limestoneData() {
|
||||
return this.activeData.find(item => (item.name || '').includes('石灰石')) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
itemData: {
|
||||
handler(newValue, oldValue) {
|
||||
// this.updateChart()
|
||||
// 对齐第二个组件：监听物料数据变化，同步更新激活数据集
|
||||
relatedData: {
|
||||
handler(newVal) {
|
||||
this.activeData = newVal.relatedMon || [];
|
||||
},
|
||||
deep: true
|
||||
immediate: true, // 组件挂载时立即执行
|
||||
deep: true // 深度监听对象内部变化
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.$nextTick(() => this.updateChart())
|
||||
console.log('物料组件挂载时的激活数据：', this.activeData);
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* dashboard点击事件处理函数
|
||||
* @param {String} material 物料名称（硅砂/海砂/纯碱等）
|
||||
*/
|
||||
handleDashboardClick(material) {
|
||||
// 1. 记录选中状态（可选）
|
||||
handleChange(value) {
|
||||
console.log('Tab 切换值：', value);
|
||||
// 根据 Tab 值更新当前激活的数据集
|
||||
if (value === 'month') {
|
||||
// 切换为月度数据
|
||||
this.activeData = this.relatedData.relatedMon || [];
|
||||
} else {
|
||||
// 切换为累计数据（非 month 均视为累计，可根据实际需求调整判断条件）
|
||||
this.activeData = this.relatedData.relatedTotal || [];
|
||||
}
|
||||
console.log('当前激活数据集：', this.activeData);
|
||||
},
|
||||
// 对齐第二个组件：优化点击事件，接收物料名和路由路径参数
|
||||
handleDashboardClick(material, path) {
|
||||
// 1. 记录选中状态
|
||||
this.activeMaterial = material;
|
||||
|
||||
// 2. 基础逻辑：打印物料名称（可替换为业务逻辑）
|
||||
console.log(`点击了【${material}】，月份：${this.month}`, '物料数据：', this.itemData);
|
||||
console.log(`点击了【${material}】，月份：${this.month}`, '物料数据：', this.activeData);
|
||||
|
||||
// 2. 优化路由跳转：month放入query中（修复原代码参数错误，与第二个组件一致）
|
||||
this.$router.push({
|
||||
path: 'SIMFRMCostAnalysis',
|
||||
month: this.month,
|
||||
path: path,
|
||||
query: {
|
||||
name: material
|
||||
name: material,
|
||||
month: this.month
|
||||
}
|
||||
})
|
||||
// 3. 扩展逻辑示例：
|
||||
// - 触发父组件事件（如需向父组件传递数据）
|
||||
this.$emit('dashboard-click', {
|
||||
material,
|
||||
month: this.month,
|
||||
// data: this.itemData.find(item => item.name === material) || {}
|
||||
});
|
||||
|
||||
// - 跳转详情页（如需路由跳转）
|
||||
// this.$router.push({
|
||||
// path: '/material-detail',
|
||||
// query: { name: material, month: this.month }
|
||||
// });
|
||||
|
||||
// - 打开弹窗/加载详情数据等
|
||||
// this.openMaterialDetail(material);
|
||||
// 3. 向父组件传递事件：携带物料详细数据，与第二个组件逻辑一致
|
||||
},
|
||||
|
||||
/**
|
||||
* 可选：打开物料详情弹窗（示例）
|
||||
*/
|
||||
// 保留原有的可选弹窗方法（如需使用可保留）
|
||||
openMaterialDetail(material) {
|
||||
// 此处可编写弹窗逻辑
|
||||
alert(`查看【${material}】的详细成本分析`);
|
||||
}
|
||||
}
|
||||
@@ -127,6 +181,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
/* 完全对齐第二个组件样式，统一视觉效果 */
|
||||
.scroll-container {
|
||||
max-height: 210px;
|
||||
overflow-y: auto;
|
||||
@@ -146,21 +201,21 @@ export default {
|
||||
height: 205px;
|
||||
background: #F9FCFF;
|
||||
padding: 16px 0 0 16px;
|
||||
// 核心：添加点击反馈样式
|
||||
cursor: pointer; // 鼠标悬浮显示手型
|
||||
transition: all 0.2s ease; // 过渡动画
|
||||
flex-shrink: 0; // 固定宽度，不被挤压（与第二个组件一致）
|
||||
cursor: pointer; // 鼠标悬浮手型（保留原点击反馈）
|
||||
transition: all 0.2s ease; // 过渡动画（保留原样式）
|
||||
|
||||
// 选中状态样式（可选）
|
||||
&.active {
|
||||
background: #E8F4FF;
|
||||
border: 1px solid #0B58FF;
|
||||
}
|
||||
// 悬浮样式（保留原交互效果）
|
||||
// &:hover {
|
||||
// background: #F0F8FF;
|
||||
// box-shadow: 0 2px 8px rgba(11, 88, 255, 0.1);
|
||||
// }
|
||||
|
||||
// 悬浮样式
|
||||
&:hover {
|
||||
background: #F0F8FF;
|
||||
box-shadow: 0 2px 8px rgba(11, 88, 255, 0.1);
|
||||
}
|
||||
// // 选中状态样式（可选，与第二个组件风格统一）
|
||||
// &.active {
|
||||
// background: #E8F4FF;
|
||||
// border: 1px solid #0B58FF;
|
||||
// }
|
||||
|
||||
.title {
|
||||
height: 18px;
|
||||
@@ -172,6 +227,7 @@ export default {
|
||||
letter-spacing: 2px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
margin-bottom: 16px; // 与第二个组件标题间距一致
|
||||
}
|
||||
|
||||
.number {
|
||||
@@ -187,5 +243,20 @@ export default {
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
// .line {
|
||||
// width: 280px; // 适配310px宽度，避免图表溢出（与第二个组件一致）
|
||||
// height: 150px; // 图表高度与第二个组件统一
|
||||
// }
|
||||
}
|
||||
|
||||
/* 隐藏横向滚动条，与第二个组件样式完全统一 */
|
||||
.topItem-container::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topItem-container {
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,37 +1,43 @@
|
||||
<template>
|
||||
<div style="flex: 1">
|
||||
<Container :name="title" icon="cockpitItemIcon" size="opLargeBg" topSize="large">
|
||||
<Container :isShowTab="true" :name="title" icon="cockpitItemIcon" size="opLargeBg" topSize="large"
|
||||
@tabChange="handleChange">
|
||||
<div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%;">
|
||||
<div class="topItem-container" style="display: flex; gap: 8px;">
|
||||
<!-- 1. 为每个dashboard绑定点击事件，传递物料名称参数 -->
|
||||
<div class="dashboard left" @click="handleDashboardClick('人工成本')">
|
||||
<!-- 1. 为每个dashboard绑定点击事件，传递物料名称参数（模板结构不变，仅添加数据绑定） -->
|
||||
<div class="dashboard left" @click="handleDashboardClick('人工成本', 'processingLabor')">
|
||||
<div class="title">人工成本·单位/万元</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<!-- 绑定对应数据：新增数据绑定，样式不变 -->
|
||||
<operatingSingleBar :detailData="laborCostData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard right" @click="handleDashboardClick('燃料成本')">
|
||||
<div class="dashboard right" @click="handleDashboardClick('燃料成本', 'processingFuel/processingFuel')">
|
||||
<div class="title">燃料成本·单位/万元</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<!-- 绑定对应数据：新增数据绑定，样式不变 -->
|
||||
<operatingSingleBar :detailData="fuelCostData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard right" @click="handleDashboardClick('辅材成本')">
|
||||
<div class="dashboard right" @click="handleDashboardClick('辅材成本', 'procAuxMatCost/procAuxMatCost')">
|
||||
<div class="title">辅材成本·单位/万元</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<!-- 绑定对应数据：新增数据绑定，样式不变 -->
|
||||
<operatingSingleBar :detailData="auxiliaryMaterialCostData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard right" @click="handleDashboardClick('包材成本')">
|
||||
<div class="dashboard right" @click="handleDashboardClick('包材成本', 'procPackMatCost')">
|
||||
<div class="title">包材成本·单位/万元</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<!-- 绑定对应数据：新增数据绑定，样式不变 -->
|
||||
<operatingSingleBar :detailData="packagingMaterialCostData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard right" @click="handleDashboardClick('制造成本')">
|
||||
<div class="dashboard right" @click="handleDashboardClick('制造成本', 'procMfgOverheadCost/procMfgOverheadCost')">
|
||||
<div class="title">制造成本·单位/万元</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<!-- 绑定对应数据：新增数据绑定，样式不变 -->
|
||||
<operatingSingleBar :detailData="manufacturingCostData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -48,9 +54,12 @@ export default {
|
||||
name: 'ProductionStatus',
|
||||
components: { Container, operatingSingleBar },
|
||||
props: {
|
||||
itemData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
relatedData: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
relatedMon: [], // 成本月度数据（数组格式，存储各成本项）
|
||||
relatedTotal: [] // 成本累计数据（数组格式，存储各成本项）
|
||||
})
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
@@ -64,17 +73,75 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
// 可选：记录当前选中的物料
|
||||
activeMaterial: ''
|
||||
activeMaterial: '',
|
||||
// 新增：当前激活的成本数据集（默认月度，与第一个成本组件逻辑对齐，样式不变）
|
||||
activeData: this.relatedData.relatedMon || []
|
||||
}
|
||||
},
|
||||
// 新增：5个成本项对应的计算属性，精准筛选数据（仅数据逻辑，样式不变）
|
||||
computed: {
|
||||
// 1. 人工成本数据
|
||||
laborCostData() {
|
||||
return this.activeData.find(item => (item.name || '').includes('人工成本')) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
// 2. 燃料成本数据
|
||||
fuelCostData() {
|
||||
return this.activeData.find(item => (item.name || '').includes('燃料成本')) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
// 3. 辅材成本数据
|
||||
auxiliaryMaterialCostData() {
|
||||
return this.activeData.find(item => (item.name || '').includes('辅材成本')) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
// 4. 包材成本数据
|
||||
packagingMaterialCostData() {
|
||||
return this.activeData.find(item => (item.name || '').includes('包材成本')) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
// 5. 制造成本数据
|
||||
manufacturingCostData() {
|
||||
return this.activeData.find(item => (item.name || '').includes('制造成本')) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
itemData: {
|
||||
handler(newValue, oldValue) {
|
||||
// this.updateChart()
|
||||
// 替换无效的itemData监听，新增relatedData深度监听（数据逻辑优化，样式不变）
|
||||
relatedData: {
|
||||
handler(newVal) {
|
||||
this.activeData = newVal.relatedMon || [];
|
||||
},
|
||||
deep: true
|
||||
immediate: true, // 组件挂载时立即执行
|
||||
deep: true // 深度监听对象内部变化
|
||||
}
|
||||
// 原有itemData监听注释保留（若需恢复可直接启用，样式不变）
|
||||
// itemData: {
|
||||
// handler(newValue, oldValue) {
|
||||
// // this.updateChart()
|
||||
// },
|
||||
// deep: true
|
||||
// }
|
||||
},
|
||||
mounted() {
|
||||
// this.$nextTick(() => this.updateChart())
|
||||
@@ -82,51 +149,40 @@ export default {
|
||||
methods: {
|
||||
/**
|
||||
* dashboard点击事件处理函数
|
||||
* @param {String} material 物料名称（硅砂/海砂/纯碱等）
|
||||
* @param {String} material 物料名称（人工成本/燃料成本等）
|
||||
* @param {String} path 路由路径
|
||||
*/
|
||||
handleDashboardClick(material) {
|
||||
handleDashboardClick(material, path) {
|
||||
// 1. 记录选中状态（可选）
|
||||
this.activeMaterial = material;
|
||||
|
||||
// 2. 基础逻辑：打印物料名称（可替换为业务逻辑）
|
||||
console.log(`点击了【${material}】，月份：${this.month}`, '物料数据：', this.itemData);
|
||||
// 2. 修复路由跳转错误：将month移入query（数据逻辑优化，样式不变）
|
||||
console.log(`点击了【${material}】，月份：${this.month}`, '成本数据：', this.activeData);
|
||||
this.$router.push({
|
||||
path: 'SIMFRMCostAnalysis',
|
||||
month: this.month,
|
||||
path: path,
|
||||
query: {
|
||||
name: material
|
||||
name: material,
|
||||
month: this.month // 修正：原代码month写在路由根配置无效，移入query
|
||||
}
|
||||
})
|
||||
// 3. 扩展逻辑示例：
|
||||
// - 触发父组件事件（如需向父组件传递数据）
|
||||
this.$emit('dashboard-click', {
|
||||
material,
|
||||
month: this.month,
|
||||
// data: this.itemData.find(item => item.name === material) || {}
|
||||
});
|
||||
|
||||
// - 跳转详情页（如需路由跳转）
|
||||
// this.$router.push({
|
||||
// path: '/material-detail',
|
||||
// query: { name: material, month: this.month }
|
||||
// });
|
||||
|
||||
// - 打开弹窗/加载详情数据等
|
||||
// this.openMaterialDetail(material);
|
||||
},
|
||||
|
||||
/**
|
||||
* 可选：打开物料详情弹窗（示例）
|
||||
*/
|
||||
openMaterialDetail(material) {
|
||||
// 此处可编写弹窗逻辑
|
||||
alert(`查看【${material}】的详细成本分析`);
|
||||
// 新增：Tab切换处理函数（与第一个成本组件逻辑对齐，样式不变）
|
||||
handleChange(value) {
|
||||
console.log('Tab 切换值：', value);
|
||||
// 根据Tab值切换月度/累计数据
|
||||
if (value === 'month') {
|
||||
this.activeData = this.relatedData.relatedMon || [];
|
||||
} else {
|
||||
this.activeData = this.relatedData.relatedTotal || [];
|
||||
}
|
||||
console.log('当前激活数据集：', this.activeData);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
/* 样式100%保留不变，无任何增删改 */
|
||||
.scroll-container {
|
||||
max-height: 210px;
|
||||
overflow-y: auto;
|
||||
|
||||
@@ -1,16 +1,18 @@
|
||||
<template>
|
||||
<div style="flex: 1">
|
||||
<Container :name="title" icon="cockpitItemIcon" size="opLargeBg" topSize="large">
|
||||
<!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
|
||||
<Container :isShowTab="true" :name="title" icon="cockpitItemIcon" size="opLargeBg" topSize="large"
|
||||
@tabChange="handleChange">
|
||||
<!-- 1. 移除 .kpi-content 的固定高度，改为自适应（原有样式不变，仅保留结构） -->
|
||||
<div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%;">
|
||||
<!-- 新增：topItem 专属包裹容器，统一控制样式和布局 -->
|
||||
<!-- 新增：topItem 专属包裹容器，统一控制样式和布局（原有行内样式不变） -->
|
||||
<div class="topItem-container" style="display: flex; gap: 8px;">
|
||||
<div class="dashboard left">
|
||||
<div class="title">
|
||||
采购单价·单位/万元
|
||||
</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<!-- 绑定对应数据：新增数据绑定，样式不变 -->
|
||||
<operatingSingleBar :detailData="unitPriceData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard right">
|
||||
@@ -18,7 +20,8 @@
|
||||
产量·单位/万元
|
||||
</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<!-- 绑定对应数据：新增数据绑定，样式不变 -->
|
||||
<operatingSingleBar :detailData="productData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard right">
|
||||
@@ -26,7 +29,8 @@
|
||||
单耗·单位/万元
|
||||
</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<!-- 绑定对应数据：新增数据绑定，样式不变 -->
|
||||
<operatingSingleBar :detailData="unitHaoData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard right">
|
||||
@@ -34,7 +38,8 @@
|
||||
消耗量·单位/万元
|
||||
</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<!-- 绑定对应数据：新增数据绑定，样式不变 -->
|
||||
<operatingSingleBar :detailData="haoNumData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard right">
|
||||
@@ -42,7 +47,8 @@
|
||||
热耗·单位/万元
|
||||
</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<!-- 绑定对应数据：新增数据绑定，样式不变 -->
|
||||
<operatingSingleBar :detailData="heatConsumptionData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -62,58 +68,118 @@ export default {
|
||||
components: { Container, operatingSingleBar },
|
||||
// mixins: [resize],
|
||||
props: {
|
||||
itemData: { // 接收父组件传递的设备数据数组
|
||||
type: Array,
|
||||
default: () => [] // 默认空数组，避免报错
|
||||
relatedData: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
relatedMon: [], // 物料月度数据（数组格式，存储各物料项）
|
||||
relatedTotal: [] // 物料累计数据（数组格式，存储各物料项）
|
||||
})
|
||||
},
|
||||
title: { // 接收父组件传递的设备数据数组
|
||||
type: String,
|
||||
default: () => '' // 默认空数组，避免报错
|
||||
default: '' // 默认空字符串，保持原有配置
|
||||
},
|
||||
month: { // 接收父组件传递的设备数据数组
|
||||
type: String,
|
||||
default: () => '' // 默认空数组，避免报错
|
||||
default: '' // 默认空字符串，保持原有配置
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
|
||||
// 新增：当前激活的数据集（默认月度，和第一个组件逻辑对齐，样式无变化）
|
||||
activeData: this.relatedData.relatedMon || []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
itemData: {
|
||||
handler(newValue, oldValue) {
|
||||
// this.updateChart()
|
||||
// 移除无效的itemData监听，新增relatedData深度监听（数据逻辑补充，样式不变）
|
||||
relatedData: {
|
||||
handler(newVal) {
|
||||
this.activeData = newVal.relatedMon || [];
|
||||
},
|
||||
deep: true // 若对象内属性变化需触发，需加 deep: true
|
||||
immediate: true, // 组件挂载时立即执行
|
||||
deep: true // 深度监听对象内部变化
|
||||
}
|
||||
// 保留原有itemData监听（若你需要可保留，此处注释不影响样式）
|
||||
// itemData: {
|
||||
// handler(newValue, oldValue) {
|
||||
// // this.updateChart()
|
||||
// },
|
||||
// deep: true // 若对象内属性变化需触发，需加 deep: true
|
||||
// }
|
||||
},
|
||||
// 新增：5个指标对应的计算属性，精准筛选数据（仅数据逻辑，样式不变）
|
||||
computed: {
|
||||
// 1. 采购单价数据
|
||||
unitPriceData() {
|
||||
return this.activeData.find(item => (item.name || '').includes('采购单价')) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
// 2. 产量数据
|
||||
productData() {
|
||||
return this.activeData.find(item => (item.name || '').includes('产量')) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
// 3. 单耗数据
|
||||
unitHaoData() {
|
||||
return this.activeData.find(item => (item.name || '').includes('单耗')) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
// 4. 消耗量数据
|
||||
haoNumData() {
|
||||
return this.activeData.find(item => (item.name || '').includes('消耗量')) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
// 5. 热耗数据（新增对应5个指标）
|
||||
heatConsumptionData() {
|
||||
return this.activeData.find(item => (item.name || '').includes('热耗')) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
}
|
||||
},
|
||||
// computed: {
|
||||
// // 处理排序：包含“总成本”的项放前面，其余项按原顺序排列
|
||||
// sortedItemData() {
|
||||
// // 过滤出包含“总成本”的项（不区分大小写）
|
||||
// const totalCostItems = this.itemData.filter(item =>
|
||||
// item.name && item.name.includes('总成本')
|
||||
// );
|
||||
// // 过滤出不包含“总成本”的项
|
||||
// const otherItems = this.itemData.filter(item =>
|
||||
// !item.name || !item.name.includes('总成本')
|
||||
// );
|
||||
// // 合并：总成本项在前，其他项在后
|
||||
// return [...totalCostItems, ...otherItems];
|
||||
// }
|
||||
// },
|
||||
mounted() {
|
||||
// 初始化图表（若需展示图表，需在模板中添加对应 DOM）
|
||||
// this.$nextTick(() => this.updateChart())
|
||||
},
|
||||
methods: {
|
||||
// 新增：Tab切换处理函数，同步切换月度/累计数据（仅数据逻辑，样式不变）
|
||||
handleChange(value) {
|
||||
console.log('Tab 切换值：', value);
|
||||
// 根据 Tab 值更新当前激活的数据集
|
||||
if (value === 'month') {
|
||||
// 切换为月度数据
|
||||
this.activeData = this.relatedData.relatedMon || [];
|
||||
} else {
|
||||
// 切换为累计数据（非 month 均视为累计）
|
||||
this.activeData = this.relatedData.relatedTotal || [];
|
||||
}
|
||||
console.log('当前激活数据集：', this.activeData);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
/* 样式完全保留不变，无任何修改 */
|
||||
/* 3. 核心：滚动容器样式（固定高度+溢出滚动+隐藏滚动条） */
|
||||
.scroll-container {
|
||||
/* 1. 固定容器高度：根据页面布局调整（示例300px，超出则滚动） */
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div style="flex: 1">
|
||||
<Container :name="title" icon="cockpitItemIcon" size="opLargeBg" topSize="large">
|
||||
<Container :isShowTab="true" :name="title" icon="cockpitItemIcon" size="opLargeBg" topSize="large"
|
||||
@tabChange="handleChange">
|
||||
<!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
|
||||
<div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%;">
|
||||
<!-- 新增：topItem 专属包裹容器，统一控制样式和布局 -->
|
||||
@@ -10,7 +11,7 @@
|
||||
采购单价·单位/万元
|
||||
</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<operatingSingleBar :detailData="unitPriceData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard right">
|
||||
@@ -18,7 +19,7 @@
|
||||
产量·单位/万元
|
||||
</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<operatingSingleBar :detailData="productData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard right">
|
||||
@@ -26,7 +27,7 @@
|
||||
单耗·单位/万元
|
||||
</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<operatingSingleBar :detailData="unitHaoData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard right">
|
||||
@@ -34,7 +35,7 @@
|
||||
消耗量·单位/万元
|
||||
</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<operatingSingleBar :detailData="haoNumData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -50,57 +51,100 @@ import operatingSingleBar from './operatingSingleBar.vue'
|
||||
// import rawItem from './raw-Item.vue'
|
||||
|
||||
export default {
|
||||
name: 'ProductionStatus',
|
||||
name: 'ProductionStatus', // 如需区分可重命名为MaterialProductionStatus
|
||||
components: { Container, operatingSingleBar },
|
||||
// mixins: [resize],
|
||||
props: {
|
||||
itemData: { // 接收父组件传递的设备数据数组
|
||||
type: Array,
|
||||
default: () => [] // 默认空数组，避免报错
|
||||
// 对齐第二个组件：改为Object类型，支持月度/累计物料数据，格式统一
|
||||
relatedData: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
relatedMon: [], // 物料月度数据（数组格式，存储各物料项）
|
||||
relatedTotal: [] // 物料累计数据（数组格式，存储各物料项）
|
||||
})
|
||||
},
|
||||
title: { // 接收父组件传递的设备数据数组
|
||||
title: {
|
||||
type: String,
|
||||
default: () => '' // 默认空数组，避免报错
|
||||
default: ''
|
||||
},
|
||||
month: { // 接收父组件传递的设备数据数组
|
||||
month: {
|
||||
type: String,
|
||||
default: () => '' // 默认空数组，避免报错
|
||||
default: ''
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
|
||||
// 核心：当前激活的物料数据集（默认月度数据，与第二个组件逻辑一致）
|
||||
activeData: this.relatedData.relatedMon || [],
|
||||
activeMaterial: '' // 记录选中的物料状态，与第二个组件一致
|
||||
}
|
||||
},
|
||||
// 对齐第二个组件：添加计算属性，精准筛选各物料数据
|
||||
computed: {
|
||||
// 1. 硅砂数据：从激活数据集中筛选，兜底值与第二个组件统一
|
||||
unitPriceData() {
|
||||
return this.activeData.find(item => (item.name || '').includes('采购单价')) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
// 2. 海砂数据：精准筛选
|
||||
productData() {
|
||||
return this.activeData.find(item => (item.name || '').includes('产量')) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
// 3. 纯碱数据：精准筛选
|
||||
unitHaoData() {
|
||||
return this.activeData.find(item => (item.name || '').includes('单耗')) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
// 4. 白云石数据：精准筛选
|
||||
haoNumData() {
|
||||
return this.activeData.find(item => (item.name || '').includes('消耗量')) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
itemData: {
|
||||
handler(newValue, oldValue) {
|
||||
// this.updateChart()
|
||||
// 对齐第二个组件：监听物料数据变化，同步更新激活数据集
|
||||
relatedData: {
|
||||
handler(newVal) {
|
||||
this.activeData = newVal.relatedMon || [];
|
||||
},
|
||||
deep: true // 若对象内属性变化需触发，需加 deep: true
|
||||
immediate: true, // 组件挂载时立即执行
|
||||
deep: true // 深度监听对象内部变化
|
||||
}
|
||||
},
|
||||
// computed: {
|
||||
// // 处理排序：包含“总成本”的项放前面，其余项按原顺序排列
|
||||
// sortedItemData() {
|
||||
// // 过滤出包含“总成本”的项（不区分大小写）
|
||||
// const totalCostItems = this.itemData.filter(item =>
|
||||
// item.name && item.name.includes('总成本')
|
||||
// );
|
||||
// // 过滤出不包含“总成本”的项
|
||||
// const otherItems = this.itemData.filter(item =>
|
||||
// !item.name || !item.name.includes('总成本')
|
||||
// );
|
||||
// // 合并：总成本项在前，其他项在后
|
||||
// return [...totalCostItems, ...otherItems];
|
||||
// }
|
||||
// },
|
||||
mounted() {
|
||||
// 初始化图表（若需展示图表，需在模板中添加对应 DOM）
|
||||
// this.$nextTick(() => this.updateChart())
|
||||
console.log('物料组件挂载时的激活数据：', this.activeData);
|
||||
},
|
||||
methods: {
|
||||
handleChange(value) {
|
||||
console.log('Tab 切换值：', value);
|
||||
// 根据 Tab 值更新当前激活的数据集
|
||||
if (value === 'month') {
|
||||
// 切换为月度数据
|
||||
this.activeData = this.relatedData.relatedMon || [];
|
||||
} else {
|
||||
// 切换为累计数据（非 month 均视为累计，可根据实际需求调整判断条件）
|
||||
this.activeData = this.relatedData.relatedTotal || [];
|
||||
}
|
||||
console.log('当前激活数据集：', this.activeData);
|
||||
},
|
||||
// 对齐第二个组件：优化点击事件，接收物料名和路由路径参数
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,48 +1,54 @@
|
||||
<template>
|
||||
<div style="flex: 1">
|
||||
<Container :name="title" icon="cockpitItemIcon" size="opLargeBg" topSize="large">
|
||||
<!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
|
||||
<Container :isShowTab="true" :name="title" icon="cockpitItemIcon" size="opLargeBg" topSize="large"
|
||||
@tabChange="handleChange">
|
||||
<div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%;">
|
||||
<!-- 新增：topItem 专属包裹容器，统一控制样式和布局 -->
|
||||
<!-- 横向滚动容器：适配5个成本组件，与第二个组件样式统一 -->
|
||||
<div class="topItem-container" style="display: flex; gap: 8px;">
|
||||
<div class="dashboard left" @click="handleDashboardClick('原料成本')">
|
||||
<!-- 1. 原料成本组件：传递对应筛选数据 -->
|
||||
<div class="dashboard left" @click="handleDashboardClick('原料成本','fuelCostAnalysis/fuelCostAnalysis')">
|
||||
<div class="title">
|
||||
原料成本·单位/万元
|
||||
</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<operatingSingleBar :detailData="rawMaterialCostData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard right" @click="handleDashboardClick('燃料成本')">
|
||||
<!-- 2. 燃料成本组件：传递对应筛选数据 -->
|
||||
<div class="dashboard right" @click="handleDashboardClick('燃料成本','combustible/combustible')">
|
||||
<div class="title">
|
||||
燃料成本·单位/万元
|
||||
</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<operatingSingleBar :detailData="fuelCostData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard right" @click="handleDashboardClick('电成本')">
|
||||
<!-- 3. 电成本组件：传递对应筛选数据 -->
|
||||
<div class="dashboard right" @click="handleDashboardClick('电成本','osElectricityCostAnalysis')">
|
||||
<div class="title">
|
||||
电成本·单位/万元
|
||||
</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<operatingSingleBar :detailData="electricCostData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard right" @click="handleDashboardClick('人工成本')">
|
||||
<!-- 4. 人工成本组件：传递对应筛选数据 -->
|
||||
<div class="dashboard right" @click="handleDashboardClick('人工成本','originalSheetLabor')">
|
||||
<div class="title">
|
||||
人工成本·单位/万元
|
||||
</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<operatingSingleBar :detailData="laborCostData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard right" @click="handleDashboardClick('制造成本')">
|
||||
<!-- 5. 制造成本组件：传递对应筛选数据 -->
|
||||
<div class="dashboard right"
|
||||
@click="handleDashboardClick('制造成本','mfgOverheadCostAnalysis/mfgOverheadCostAnalysis')">
|
||||
<div class="title">
|
||||
制造成本·单位/万元
|
||||
</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<operatingSingleBar :detailData="manufacturingCostData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -50,120 +56,153 @@
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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',
|
||||
name: 'ProductionStatus', // 保持组件名一致（如需区分可重命名为CostProductionStatus）
|
||||
components: { Container, operatingSingleBar },
|
||||
// mixins: [resize],
|
||||
props: {
|
||||
itemData: { // 接收父组件传递的设备数据数组
|
||||
type: Array,
|
||||
default: () => [] // 默认空数组，避免报错
|
||||
// 参考第二个组件，改为接收 成本相关数据（支持月度/累计，与第二个组件格式统一）
|
||||
relatedData: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
relatedMon: [], // 成本月度数据（数组格式，存储各成本项）
|
||||
relatedTotal: [] // 成本累计数据（数组格式，存储各成本项）
|
||||
})
|
||||
},
|
||||
title: { // 接收父组件传递的设备数据数组
|
||||
title: {
|
||||
type: String,
|
||||
default: () => '' // 默认空数组，避免报错
|
||||
default: ''
|
||||
},
|
||||
month: { // 接收父组件传递的设备数据数组
|
||||
month: {
|
||||
type: String,
|
||||
default: () => '' // 默认空数组，避免报错
|
||||
default: ''
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
|
||||
// 核心：当前激活的成本数据集（默认月度数据，与第二个组件逻辑一致）
|
||||
activeData: this.relatedData.relatedMon || [],
|
||||
activeMaterial: '' // 选中的成本名称状态
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 1. 原料成本数据：从激活数据集中筛选，与第二个组件筛选逻辑一致
|
||||
rawMaterialCostData() {
|
||||
return this.activeData.find(item => item.name === "原料成本") || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
// 2. 燃料成本数据：精准筛选
|
||||
fuelCostData() {
|
||||
return this.activeData.find(item => item.name === "燃料成本") || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
// 3. 电成本数据：精准筛选
|
||||
electricCostData() {
|
||||
return this.activeData.find(item => item.name === "电成本") || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
// 4. 人工成本数据：精准筛选
|
||||
laborCostData() {
|
||||
return this.activeData.find(item => item.name === "人工成本") || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
// 5. 制造成本数据：精准筛选
|
||||
manufacturingCostData() {
|
||||
return this.activeData.find(item => item.name === "制造成本") || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
itemData: {
|
||||
handler(newValue, oldValue) {
|
||||
// this.updateChart()
|
||||
// 监听父组件传递的itemData变化，同步更新激活数据集（与第二个组件逻辑一致）
|
||||
relatedData: {
|
||||
handler(newVal) {
|
||||
this.activeData = newVal.relatedMon || [];
|
||||
},
|
||||
deep: true // 若对象内属性变化需触发，需加 deep: true
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
// computed: {
|
||||
// // 处理排序：包含“总成本”的项放前面，其余项按原顺序排列
|
||||
// sortedItemData() {
|
||||
// // 过滤出包含“总成本”的项（不区分大小写）
|
||||
// const totalCostItems = this.itemData.filter(item =>
|
||||
// item.name && item.name.includes('总成本')
|
||||
// );
|
||||
// // 过滤出不包含“总成本”的项
|
||||
// const otherItems = this.itemData.filter(item =>
|
||||
// !item.name || !item.name.includes('总成本')
|
||||
// );
|
||||
// // 合并：总成本项在前，其他项在后
|
||||
// return [...totalCostItems, ...otherItems];
|
||||
// }
|
||||
// },
|
||||
mounted() {
|
||||
// 初始化图表（若需展示图表，需在模板中添加对应 DOM）
|
||||
// this.$nextTick(() => this.updateChart())
|
||||
console.log('成本组件挂载时的激活数据：', this.activeData);
|
||||
},
|
||||
methods: {
|
||||
handleDashboardClick(material) {
|
||||
// 1. 记录选中状态（可选）
|
||||
handleChange(value) {
|
||||
console.log('Tab 切换值：', value);
|
||||
// 根据 Tab 值更新当前激活的数据集
|
||||
if (value === 'month') {
|
||||
// 切换为月度数据
|
||||
this.activeData = this.relatedData.relatedMon || [];
|
||||
} else {
|
||||
// 切换为累计数据（非 month 均视为累计，可根据实际需求调整判断条件）
|
||||
this.activeData = this.relatedData.relatedTotal || [];
|
||||
}
|
||||
console.log('当前激活数据集：', this.activeData);
|
||||
},
|
||||
// 成本项点击事件：保留跳转功能，优化参数传递
|
||||
handleDashboardClick(material,path) {
|
||||
// 1. 记录选中状态
|
||||
this.activeMaterial = material;
|
||||
|
||||
// 2. 基础逻辑：打印物料名称（可替换为业务逻辑）
|
||||
console.log(`点击了【${material}】，月份：${this.month}`, '物料数据：', this.itemData);
|
||||
console.log(`点击了【${material}】，月份：${this.month}`, '成本数据：', this.activeData);
|
||||
|
||||
// 2. 优化路由跳转：month放入query中（修复原代码参数错误）
|
||||
this.$router.push({
|
||||
path: 'fuelCostAnalysis/fuelCostAnalysis',
|
||||
month: this.month,
|
||||
path: path,
|
||||
query: {
|
||||
name: material
|
||||
name: material,
|
||||
month: this.month
|
||||
}
|
||||
})
|
||||
// 3. 扩展逻辑示例：
|
||||
// - 触发父组件事件（如需向父组件传递数据）
|
||||
});
|
||||
|
||||
// 3. 向父组件传递事件（携带当前成本项的详细数据）
|
||||
this.$emit('dashboard-click', {
|
||||
material,
|
||||
month: this.month,
|
||||
// data: this.itemData.find(item => item.name === material) || {}
|
||||
data: this.activeData.find(item => item.name === material) || {}
|
||||
});
|
||||
|
||||
// - 跳转详情页（如需路由跳转）
|
||||
// this.$router.push({
|
||||
// path: '/material-detail',
|
||||
// query: { name: material, month: this.month }
|
||||
// });
|
||||
|
||||
// - 打开弹窗/加载详情数据等
|
||||
// this.openMaterialDetail(material);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
/* 3. 核心：滚动容器样式（固定高度+溢出滚动+隐藏滚动条） */
|
||||
/* 与第二个组件样式统一，优化兼容性 */
|
||||
.scroll-container {
|
||||
/* 1. 固定容器高度：根据页面布局调整（示例300px，超出则滚动） */
|
||||
max-height: 210px;
|
||||
/* 2. 溢出滚动：内容超出高度时显示滚动功能 */
|
||||
overflow-y: auto;
|
||||
/* 3. 隐藏横向滚动条（防止设备名过长导致横向滚动） */
|
||||
overflow-x: hidden;
|
||||
/* 4. 内边距：与标题栏和容器边缘对齐 */
|
||||
padding: 10px 0;
|
||||
|
||||
/* 5. 隐藏滚动条（兼容主流浏览器） */
|
||||
/* Chrome/Safari */
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
scrollbar-width: none;
|
||||
/* IE/Edge */
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
@@ -172,26 +211,23 @@ export default {
|
||||
height: 205px;
|
||||
background: #F9FCFF;
|
||||
padding: 16px 0 0 16px;
|
||||
flex-shrink: 0; // 固定宽度，不被挤压（与第二个组件一致）
|
||||
|
||||
.title {
|
||||
// width: 190px;
|
||||
height: 18px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
line-height: 18px;
|
||||
letter-spacing: 1px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 16px; // 与第二个组件间距一致
|
||||
}
|
||||
|
||||
.number {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 30px;
|
||||
// width: 190px;
|
||||
height: 32px;
|
||||
font-family: YouSheBiaoTiHei;
|
||||
font-size: 32px;
|
||||
@@ -199,7 +235,6 @@ export default {
|
||||
line-height: 32px;
|
||||
letter-spacing: 2px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.mom {
|
||||
@@ -212,43 +247,21 @@ export default {
|
||||
line-height: 18px;
|
||||
letter-spacing: 1px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
// .line {
|
||||
// width: 280px; // 适配310px宽度，避免图表溢出
|
||||
// height: 150px; // 与第二个组件图表高度一致
|
||||
// }
|
||||
}
|
||||
|
||||
// .line {
|
||||
// width: 500px;
|
||||
// height: 205px;
|
||||
// background: #F9FCFF;
|
||||
// }
|
||||
/* 隐藏横向滚动条，与第二个组件样式统一 */
|
||||
.topItem-container::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// .leftTitle {
|
||||
// .item {
|
||||
// width: 67px;
|
||||
// height: 180px;
|
||||
// padding: 37px 23px;
|
||||
// background: #F9FCFF;
|
||||
// font-family: PingFangSC, PingFang SC;
|
||||
// font-weight: 400;
|
||||
// font-size: 18px;
|
||||
// color: #000000;
|
||||
// line-height: 25px;
|
||||
// letter-spacing: 1px;
|
||||
// // text-align: left;
|
||||
// font-style: normal;
|
||||
// }
|
||||
// }
|
||||
.topItem-container {
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- <style>
|
||||
/* 全局 tooltip 样式（不使用 scoped，确保生效） */
|
||||
.production-status-chart-tooltip {
|
||||
background: #0a2b4f77 !important;
|
||||
border: none !important;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.production-status-chart-tooltip * {
|
||||
color: #fff !important;
|
||||
}
|
||||
</style> -->
|
||||
|
||||
@@ -11,21 +11,22 @@
|
||||
</div>
|
||||
<div class="number">
|
||||
<div class="yield">
|
||||
90%
|
||||
{{ formatRate(factoryData?.completeRate) }}%
|
||||
</div>
|
||||
<div class="mom">
|
||||
环比10%
|
||||
<img class="arrow" src="../../../assets/img/downArrow.png" alt="">
|
||||
环比{{ formatRate(factoryData?.thb) }}%
|
||||
<img v-if="factoryData?.thb >= 0" class="arrow" src="../../../assets/img/topArrow.png" alt="上升">
|
||||
<img v-else class="arrow" src="../../../assets/img/downArrow.png" alt="下降">
|
||||
</div>
|
||||
</div>
|
||||
<div class="electricityGauge">
|
||||
<electricityGauge id="totalGauge"></electricityGauge>
|
||||
<!-- 传递包含flag的factoryData给仪表盘组件 -->
|
||||
<electricityGauge id="year" :detailData="factoryData"></electricityGauge>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line" style="padding: 0px;">
|
||||
<verticalBarChart>
|
||||
</verticalBarChart>
|
||||
|
||||
<!-- 传递包含flag的factoryData给柱状图组件 -->
|
||||
<verticalBarChart :detailData="factoryData"></verticalBarChart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -43,55 +44,60 @@ import verticalBarChart from './verticalBarChart.vue'
|
||||
export default {
|
||||
name: 'ProductionStatus',
|
||||
components: { Container, electricityGauge, verticalBarChart },
|
||||
// mixins: [resize],
|
||||
props: {
|
||||
itemData: { // 接收父组件传递的设备数据数组
|
||||
type: Array,
|
||||
default: () => [] // 默认空数组，避免报错
|
||||
totalData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
title: { // 接收父组件传递的设备数据数组
|
||||
title: {
|
||||
type: String,
|
||||
default: () => '' // 默认空数组，避免报错
|
||||
default: ''
|
||||
},
|
||||
month: { // 接收父组件传递的设备数据数组
|
||||
month: {
|
||||
type: String,
|
||||
default: () => '' // 默认空数组，避免报错
|
||||
default: ''
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
itemData: {
|
||||
handler(newValue, oldValue) {
|
||||
// this.updateChart()
|
||||
},
|
||||
deep: true // 若对象内属性变化需触发，需加 deep: true
|
||||
computed: {
|
||||
/**
|
||||
* 自动提取monData中的工厂数据，并新增flag字段
|
||||
*/
|
||||
factoryData() { // 整合原始数据 + 计算flag
|
||||
return {
|
||||
completeRate: Number(this.totalData.proportion).toFixed(2),
|
||||
diff: this.totalData.diffValue,
|
||||
real: this.totalData.value,
|
||||
target: this.totalData.targetValue,
|
||||
thb: this.totalData.thb,
|
||||
// ...rawData,
|
||||
flag: this.getRateFlag(this.totalData.completed) // 新增flag字段
|
||||
};
|
||||
}
|
||||
},
|
||||
// computed: {
|
||||
// // 处理排序：包含“总成本”的项放前面，其余项按原顺序排列
|
||||
// sortedItemData() {
|
||||
// // 过滤出包含“总成本”的项（不区分大小写）
|
||||
// const totalCostItems = this.itemData.filter(item =>
|
||||
// item.name && item.name.includes('总成本')
|
||||
// );
|
||||
// // 过滤出不包含“总成本”的项
|
||||
// const otherItems = this.itemData.filter(item =>
|
||||
// !item.name || !item.name.includes('总成本')
|
||||
// );
|
||||
// // 合并：总成本项在前，其他项在后
|
||||
// return [...totalCostItems, ...otherItems];
|
||||
// }
|
||||
// },
|
||||
mounted() {
|
||||
// 初始化图表（若需展示图表，需在模板中添加对应 DOM）
|
||||
// this.$nextTick(() => this.updateChart())
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 格式化百分比数值：处理空值/非数字，兜底为0
|
||||
*/
|
||||
formatRate(value) {
|
||||
if (isNaN(value) || value === null || value === undefined) {
|
||||
return 0;
|
||||
}
|
||||
return value;
|
||||
},
|
||||
/**
|
||||
* 判断完成率对应的flag值（<100为0，≥100为1）
|
||||
* @param {number} rate 完成率（原始值，如89代表89%）
|
||||
* @returns {0|1} flag值
|
||||
*/
|
||||
getRateFlag(rate) {
|
||||
if (isNaN(rate) || rate === null || rate === undefined) return 0;
|
||||
return rate >= 100 ? 1 : 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div ref="verticalBarChart" id="coreLineChart" style="width: 100%; height: 210px;"></div>
|
||||
<div :ref="refName" id="coreLineChart" style="width: 100%; height: 210px;"></div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
@@ -8,80 +8,70 @@ export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
myChart: null // 存储图表实例，避免重复创建
|
||||
myChart: null
|
||||
};
|
||||
},
|
||||
props: {
|
||||
// 明确接收的props结构，增强可读性
|
||||
chartData: {
|
||||
refName: {
|
||||
type: String,
|
||||
default: 'verticalBarChart',
|
||||
},
|
||||
detailData: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
series: [],
|
||||
allPlaceNames: []
|
||||
completeRate: 0,
|
||||
diff: 0,
|
||||
real: 0,
|
||||
target: 0,
|
||||
thb: 0,
|
||||
flag: 0
|
||||
}),
|
||||
// 校验数据格式
|
||||
validator: (value) => {
|
||||
return Array.isArray(value.series) && Array.isArray(value.allPlaceNames);
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
this.$nextTick(() => this.updateChart());
|
||||
},
|
||||
|
||||
// 新增：监听 chartData 变化
|
||||
watch: {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
detailData: {
|
||||
handler() {
|
||||
console.log(this.chartData, 'chartData');
|
||||
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.verticalBarChart;
|
||||
const chartDom = this.$refs[this.refName];
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
console.log('this.detailData', this.detailData);
|
||||
|
||||
// 修复：优化实例销毁逻辑，避免重复dispose
|
||||
if (this.myChart) {
|
||||
this.myChart.dispose();
|
||||
this.myChart.clear(); // 先清空，再重新渲染
|
||||
} else {
|
||||
this.myChart = echarts.init(chartDom);
|
||||
}
|
||||
|
||||
this.myChart = echarts.init(chartDom);
|
||||
const { allPlaceNames, series } = this.chartData || {};
|
||||
|
||||
// 处理空数据
|
||||
const xData = allPlaceNames || [];
|
||||
const chartSeries = series || []; // 父组件传递的 series
|
||||
// 解构数据，避免重复取值
|
||||
const { diff, completeRate, real, target, flag } = this.detailData;
|
||||
// 确保数值为数字类型
|
||||
const realValue = Number(real) || 0;
|
||||
const targetValue = Number(target) || 0;
|
||||
const diffValue = Number(diff) || 0;
|
||||
const rateValue = Number(completeRate) || 0;
|
||||
const flagValue = Number(flag) || 0;
|
||||
|
||||
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;
|
||||
// }
|
||||
label: { backgroundColor: '#6a7985' }
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 10,
|
||||
@@ -89,217 +79,144 @@ export default {
|
||||
right: 50,
|
||||
left: 30,
|
||||
containLabel: true,
|
||||
show: false // 隐藏grid背景，避免干扰
|
||||
show: false
|
||||
},
|
||||
xAxis: {
|
||||
// 横向柱状图的x轴必须设为数值轴，否则无法正常展示数值
|
||||
type: 'value',
|
||||
// offset: 0,
|
||||
// boundaryGap: true ,
|
||||
// boundaryGap: [10, 0], // 可根据需要开启，控制轴的留白
|
||||
axisTick: { show: false },
|
||||
min: 0,
|
||||
// scale: true,
|
||||
splitNumber: 4,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: { color: 'rgba(0, 0, 0, 0.15)' }
|
||||
},
|
||||
axisLabel: {
|
||||
color: 'rgba(0, 0, 0, 0.45)',
|
||||
fontSize: 12,
|
||||
interval: 0,
|
||||
padding: [5, 0, 0, 0]
|
||||
},
|
||||
// data: xData // 数值轴不需要手动设置data，由series的数据自动生成
|
||||
axisLine: { show: true, lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
|
||||
axisLabel: { color: 'rgba(0, 0, 0, 0.45)', fontSize: 12, interval: 0, padding: [5, 0, 0, 0] }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
color: 'rgba(0, 0, 0, 0.75)',
|
||||
fontSize: 12,
|
||||
interval: 0,
|
||||
padding: [5, 0, 0, 0]
|
||||
},
|
||||
axisLine: {
|
||||
show: true, // 显示Y轴轴线（关键）
|
||||
lineStyle: {
|
||||
color: '#E5E6EB', // 轴线颜色（浅灰色，可自定义）
|
||||
width: 1, // 轴线宽度
|
||||
type: 'solid' // 实线（可选：dashed虚线、dotted点线）
|
||||
}
|
||||
},
|
||||
axisLabel: { color: 'rgba(0, 0, 0, 0.75)', fontSize: 12, interval: 0, padding: [5, 0, 0, 0] },
|
||||
axisLine: { show: true, lineStyle: { color: '#E5E6EB', width: 1, type: 'solid' } },
|
||||
axisTick: { show: false },
|
||||
// padding: [300, 100, 100, 100],
|
||||
data: ['实际', '预算'] // y轴分类：实际、预算
|
||||
data: ['实际', '预算']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
// name: '预算',
|
||||
type: 'bar',
|
||||
barWidth: 24,
|
||||
// barCategoryGap: '50', // 柱子之间的间距（相对于柱子宽度）
|
||||
// 数据长度与yAxis的分类数量匹配（实际、预算各一个值）
|
||||
data: [{
|
||||
value: 131744,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
offset: [-60, 25],
|
||||
// 固定label尺寸：68px×20px
|
||||
width: 68,
|
||||
height: 20,
|
||||
// 关键：去掉换行，让文字在一行显示，适配小尺寸
|
||||
formatter: '{rate|139%}{text|差值}',
|
||||
// 核心样式：匹配CSS需求
|
||||
backgroundColor: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, // 顶部0px位置：阴影最强
|
||||
// { offset: 0.1, color: 'rgba(205, 215, 224, 0.4)' }, // 1px位置：阴影减弱（对应1px）
|
||||
// { offset: 0.15, color: 'rgba(205, 215, 224, 0.6)' }, // 3px位置：阴影几乎消失（对应3px扩散）
|
||||
{ offset: 0.2, color: '#ffffff' }, // 主体白色
|
||||
{ offset: 1, color: '#ffffff' }
|
||||
]
|
||||
},
|
||||
// 外阴影：0px 2px 2px 0px rgba(191,203,215,0.5)
|
||||
shadowColor: 'rgba(191,203,215,0.5)',
|
||||
shadowBlur: 2,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 2,
|
||||
// 圆角：4px
|
||||
borderRadius: 4,
|
||||
// 移除边框
|
||||
borderColor: '#BFCBD577',
|
||||
borderWidth: 0,
|
||||
// 文字垂直居中（针对富文本）
|
||||
lineHeight: 20,
|
||||
rich: {
|
||||
text: {
|
||||
// 缩小宽度和内边距，适配68px容器
|
||||
width: 'auto', // 自动宽度，替代固定40px
|
||||
padding: [5, 10, 5, 0], // 缩小内边距
|
||||
align: 'center',
|
||||
color: '#464646', // 文字灰色
|
||||
fontSize: 11, // 缩小字体，适配小尺寸
|
||||
lineHeight: 20 // 垂直居中
|
||||
// 修复：拆分数据项，确保每个柱子的样式独立生效
|
||||
data: [
|
||||
// 实际值柱子（核心：绑定flag颜色）
|
||||
{
|
||||
value: realValue,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
offset: [-60, 25],
|
||||
width: 68,
|
||||
height: 20,
|
||||
formatter: `{rate|${diffValue}}{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' }
|
||||
]
|
||||
},
|
||||
rate: {
|
||||
width: 'auto',
|
||||
padding: [5, 0, 5, 10],
|
||||
align: 'center',
|
||||
color: '#30B590',
|
||||
fontSize: 11,
|
||||
lineHeight: 20
|
||||
shadowColor: 'rgba(191,203,215,0.5)',
|
||||
shadowBlur: 2,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 2,
|
||||
borderRadius: 4,
|
||||
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 }
|
||||
}
|
||||
},
|
||||
// 修复：flag颜色判断独立绑定到实际值柱子
|
||||
itemStyle: {
|
||||
color: flagValue === 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]
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
// 实际的渐变颜色（绿系渐变，与预算区分）
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0, y: 0, x2: 0, y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: '#AEEFE0' }, // 浅绿
|
||||
{ offset: 1, color: '#76DABE' } // 深绿
|
||||
]
|
||||
},
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
borderWidth: 0,
|
||||
},
|
||||
}, {
|
||||
value: 630230,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
offset: [-70, 25],
|
||||
// 固定label尺寸：68px×20px
|
||||
width: 68,
|
||||
height: 20,
|
||||
// 关键：去掉换行，让文字在一行显示，适配小尺寸
|
||||
formatter: '{value|完成率}{rate|139%}',
|
||||
// 核心样式：匹配CSS需求
|
||||
backgroundColor: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, // 顶部0px位置：阴影最强
|
||||
// { offset: 0.1, color: 'rgba(205, 215, 224, 0.4)' }, // 1px位置：阴影减弱（对应1px）
|
||||
// { offset: 0.15, color: 'rgba(205, 215, 224, 0.6)' }, // 3px位置：阴影几乎消失（对应3px扩散）
|
||||
{ offset: 0.2, color: '#ffffff' }, // 主体白色
|
||||
{ offset: 1, color: '#ffffff' }
|
||||
]
|
||||
},
|
||||
// 外阴影：0px 2px 2px 0px rgba(191,203,215,0.5)
|
||||
shadowColor: 'rgba(191,203,215,0.5)',
|
||||
shadowBlur: 2,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 2,
|
||||
// 圆角：4px
|
||||
borderRadius: 4,
|
||||
// 移除边框
|
||||
borderColor: '#BFCBD577',
|
||||
borderWidth: 0,
|
||||
// 文字垂直居中（针对富文本）
|
||||
lineHeight: 20,
|
||||
rich: {
|
||||
value: {
|
||||
// 缩小宽度和内边距，适配68px容器
|
||||
width: 'auto', // 自动宽度，替代固定40px
|
||||
padding: [5, 0, 5, 10], // 缩小内边距
|
||||
align: 'center',
|
||||
color: '#464646', // 文字灰色
|
||||
fontSize: 11, // 缩小字体，适配小尺寸
|
||||
lineHeight: 20 // 垂直居中
|
||||
// 预算值柱子（固定蓝色渐变）
|
||||
{
|
||||
value: targetValue,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
offset: [0, 25],
|
||||
width: 68,
|
||||
height: 20,
|
||||
formatter: `{value|完成率}{rate|${rateValue}%}`,
|
||||
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' }
|
||||
]
|
||||
},
|
||||
rate: {
|
||||
width: 'auto',
|
||||
padding: [5, 10, 5, 0],
|
||||
align: 'center',
|
||||
color: '#0B58FF', // 数字蓝色
|
||||
fontSize: 11,
|
||||
lineHeight: 20
|
||||
shadowColor: 'rgba(191,203,215,0.5)',
|
||||
shadowBlur: 2,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 2,
|
||||
borderRadius: 4,
|
||||
borderWidth: 0,
|
||||
lineHeight: 20,
|
||||
rich: {
|
||||
value: { width: 'auto', padding: [5, 0, 5, 10], align: 'center', color: '#464646', fontSize: 11, lineHeight: 20 },
|
||||
rate: { width: 'auto', padding: [5, 10, 5, 0], align: 'center', color: '#0B58FF', fontSize: 11, lineHeight: 20 }
|
||||
}
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
// 预算的渐变颜色（蓝系渐变）
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 1, y: 0, x2: 0, y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: '#82CCFF' }, // 浅蓝
|
||||
{ offset: 1, color: '#4B9DFF' } // 深蓝
|
||||
]
|
||||
},
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
borderWidth: 0
|
||||
},
|
||||
},],
|
||||
|
||||
},
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 1, y: 0, x2: 0, y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: '#82CCFF' },
|
||||
{ offset: 1, color: '#4B9DFF' }
|
||||
]
|
||||
},
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
borderWidth: 0
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
option && this.myChart.setOption(option);
|
||||
this.myChart.setOption(option, true); // 新增：true表示替换所有配置，避免缓存
|
||||
|
||||
// 窗口缩放适配和销毁逻辑保持不变
|
||||
window.addEventListener('resize', () => {
|
||||
// 优化：防抖resize，避免频繁触发
|
||||
const resizeHandler = () => {
|
||||
this.myChart && this.myChart.resize();
|
||||
});
|
||||
};
|
||||
window.removeEventListener('resize', resizeHandler); // 先移除再添加，避免重复绑定
|
||||
window.addEventListener('resize', resizeHandler);
|
||||
|
||||
this.$once('hook:destroyed', () => {
|
||||
window.removeEventListener('resize', () => {
|
||||
this.myChart && this.myChart.resize();
|
||||
});
|
||||
window.removeEventListener('resize', resizeHandler);
|
||||
this.myChart && this.myChart.dispose();
|
||||
this.myChart = null;
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
@@ -5,17 +5,17 @@
|
||||
<div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%;">
|
||||
<!-- 新增：topItem 专属包裹容器，统一控制样式和布局 -->
|
||||
<div class="topItem-container" style="display: flex; gap: 8px;">
|
||||
<div class="dashboard left">
|
||||
<div class="dashboard left" @click="handleDashboardClick('电')" :detailData="dianData">
|
||||
<div class="title">
|
||||
销量·单位/万元
|
||||
电·单位/万元
|
||||
</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard right">
|
||||
<div class="dashboard right" @click="handleDashboardClick('水')" :detailData="shuiData">
|
||||
<div class="title">
|
||||
单价·单位/万元
|
||||
水·单位/万元
|
||||
</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
@@ -29,61 +29,64 @@
|
||||
<script>
|
||||
import Container from './container.vue'
|
||||
import operatingSingleBar from './operatingSingleBar.vue'
|
||||
import verticalBarChart from './verticalBarChart.vue'
|
||||
|
||||
// import * as echarts from 'echarts'
|
||||
// import rawItem from './raw-Item.vue'
|
||||
|
||||
export default {
|
||||
name: 'ProductionStatus',
|
||||
components: { Container, operatingSingleBar, verticalBarChart },
|
||||
// mixins: [resize],
|
||||
components: { Container, operatingSingleBar },
|
||||
props: {
|
||||
itemData: { // 接收父组件传递的设备数据数组
|
||||
// 接收父组件传递的 月度+累计 组合数据
|
||||
relatedData: {
|
||||
type: Array,
|
||||
default: () => [] // 默认空数组，避免报错
|
||||
default: () => ([])
|
||||
},
|
||||
title: { // 接收父组件传递的设备数据数组
|
||||
// 可选：动态标题
|
||||
title: {
|
||||
type: String,
|
||||
default: () => '' // 默认空数组，避免报错
|
||||
},
|
||||
month: { // 接收父组件传递的设备数据数组
|
||||
type: String,
|
||||
default: () => '' // 默认空数组，避免报错
|
||||
},
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
|
||||
// 核心：当前激活的数据集（月度/累计），默认初始化月度数据
|
||||
// activeData: this.relatedData || []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
itemData: {
|
||||
handler(newValue, oldValue) {
|
||||
// this.updateChart()
|
||||
},
|
||||
deep: true // 若对象内属性变化需触发，需加 deep: true
|
||||
}
|
||||
computed: {
|
||||
// 1. 销量数据：从当前激活数据集中筛选（依赖 activeData，自动响应变化）
|
||||
dianData() {
|
||||
return (this.relatedData.find(item => item.name === "电成本")) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
// 2. 单价数据：从当前激活数据集中筛选
|
||||
shuiData() {
|
||||
return (this.relatedData.find(item => item.name === "水成本")) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
},
|
||||
// computed: {
|
||||
// // 处理排序：包含“总成本”的项放前面，其余项按原顺序排列
|
||||
// sortedItemData() {
|
||||
// // 过滤出包含“总成本”的项（不区分大小写）
|
||||
// const totalCostItems = this.itemData.filter(item =>
|
||||
// item.name && item.name.includes('总成本')
|
||||
// );
|
||||
// // 过滤出不包含“总成本”的项
|
||||
// const otherItems = this.itemData.filter(item =>
|
||||
// !item.name || !item.name.includes('总成本')
|
||||
// );
|
||||
// // 合并：总成本项在前，其他项在后
|
||||
// return [...totalCostItems, ...otherItems];
|
||||
// watch: {
|
||||
// // 可选：监听 relatedData 初始变化（若父组件异步传递数据，确保 activeData 同步更新）
|
||||
// relatedData: {
|
||||
// handler(newVal) {
|
||||
// this.activeData = newVal.relatedMon || [];
|
||||
// },
|
||||
// immediate: true,
|
||||
// deep: true
|
||||
// }
|
||||
// },
|
||||
mounted() {
|
||||
// 初始化图表（若需展示图表，需在模板中添加对应 DOM）
|
||||
// this.$nextTick(() => this.updateChart())
|
||||
console.log('组件挂载时的激活数据：', this.activeData);
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
|
||||
@@ -1,16 +1,17 @@
|
||||
<template>
|
||||
<div style="flex: 1">
|
||||
<Container :name="title" icon="cockpitItemIcon" size="operatingRevenueBg" topSize="middle">
|
||||
<!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
|
||||
<!-- 1. 移除 .kpi-content 的固定高度，改为自适应（样式不变，仅保留结构） -->
|
||||
<div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%;">
|
||||
<!-- 新增：topItem 专属包裹容器，统一控制样式和布局 -->
|
||||
<!-- 新增：topItem 专属包裹容器，统一控制样式和布局（原有行内样式不变） -->
|
||||
<div class="topItem-container" style="display: flex; gap: 8px;">
|
||||
<div class="dashboard left">
|
||||
<div class="title">
|
||||
镀膜液·单位/万元
|
||||
</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<!-- 绑定镀膜液对应数据：新增数据绑定，样式不变 -->
|
||||
<operatingSingleBar :detailData="coatingLiquidData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard right">
|
||||
@@ -18,7 +19,8 @@
|
||||
油墨·单位/万元
|
||||
</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<!-- 绑定油墨对应数据：新增数据绑定，样式不变 -->
|
||||
<operatingSingleBar :detailData="inkData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard right">
|
||||
@@ -26,7 +28,8 @@
|
||||
釉料·单位/万元
|
||||
</div>
|
||||
<div class="line">
|
||||
<operatingSingleBar></operatingSingleBar>
|
||||
<!-- 绑定釉料对应数据：新增数据绑定，样式不变 -->
|
||||
<operatingSingleBar :detailData="glazeData"></operatingSingleBar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -37,68 +40,107 @@
|
||||
<script>
|
||||
import Container from './container.vue'
|
||||
import operatingSingleBar from './operatingSingleBar.vue'
|
||||
import verticalBarChart from './verticalBarChart.vue'
|
||||
|
||||
// import * as echarts from 'echarts'
|
||||
// import rawItem from './raw-Item.vue'
|
||||
|
||||
export default {
|
||||
name: 'ProductionStatus',
|
||||
components: { Container, operatingSingleBar, verticalBarChart },
|
||||
// mixins: [resize],
|
||||
components: { Container, operatingSingleBar },
|
||||
props: {
|
||||
itemData: { // 接收父组件传递的设备数据数组
|
||||
// 接收父组件传递的 月度+累计 组合数据（原有配置保留，仅优化注释）
|
||||
relatedData: {
|
||||
type: Array,
|
||||
default: () => [] // 默认空数组，避免报错
|
||||
default: () => []
|
||||
},
|
||||
title: { // 接收父组件传递的设备数据数组
|
||||
// 可选：动态标题（原有配置保留）
|
||||
title: {
|
||||
type: String,
|
||||
default: () => '' // 默认空数组，避免报错
|
||||
},
|
||||
month: { // 接收父组件传递的设备数据数组
|
||||
type: String,
|
||||
default: () => '' // 默认空数组，避免报错
|
||||
},
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
|
||||
chart: null
|
||||
// 注释无效的activeData，保持数据简洁（样式不变）
|
||||
// activeData: this.relatedData || []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
itemData: {
|
||||
handler(newValue, oldValue) {
|
||||
// this.updateChart()
|
||||
},
|
||||
deep: true // 若对象内属性变化需触发，需加 deep: true
|
||||
}
|
||||
computed: {
|
||||
// 1. 镀膜液数据：精准筛选对应名称数据，兜底值统一
|
||||
coatingLiquidData() {
|
||||
return this.relatedData.find(item => (item.name || '').includes('镀膜液')) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
// 2. 油墨数据：精准筛选对应名称数据，兜底值统一
|
||||
inkData() {
|
||||
return this.relatedData.find(item => (item.name || '').includes('油墨')) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
// 3. 釉料数据：精准筛选对应名称数据，兜底值统一
|
||||
glazeData() {
|
||||
return this.relatedData.find(item => (item.name || '').includes('釉料')) || {
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
completed: 0,
|
||||
diffValue: 0
|
||||
};
|
||||
},
|
||||
// 保留原有电成本、水成本计算属性（若需使用可直接启用，样式不变）
|
||||
// dianData() {
|
||||
// return (this.relatedData.find(item => item.name === "电成本")) || {
|
||||
// targetValue: 0,
|
||||
// value: 0,
|
||||
// completed: 0,
|
||||
// diffValue: 0
|
||||
// };
|
||||
// },
|
||||
// shuiData() {
|
||||
// return (this.relatedData.find(item => item.name === "水成本")) || {
|
||||
// targetValue: 0,
|
||||
// value: 0,
|
||||
// completed: 0,
|
||||
// diffValue: 0
|
||||
// };
|
||||
// }
|
||||
},
|
||||
// computed: {
|
||||
// // 处理排序：包含“总成本”的项放前面，其余项按原顺序排列
|
||||
// sortedItemData() {
|
||||
// // 过滤出包含“总成本”的项（不区分大小写）
|
||||
// const totalCostItems = this.itemData.filter(item =>
|
||||
// item.name && item.name.includes('总成本')
|
||||
// );
|
||||
// // 过滤出不包含“总成本”的项
|
||||
// const otherItems = this.itemData.filter(item =>
|
||||
// !item.name || !item.name.includes('总成本')
|
||||
// );
|
||||
// // 合并：总成本项在前，其他项在后
|
||||
// return [...totalCostItems, ...otherItems];
|
||||
// 保留原有watch注释（若需恢复可直接启用，样式不变）
|
||||
// watch: {
|
||||
// relatedData: {
|
||||
// handler(newVal) {
|
||||
// this.activeData = newVal.relatedMon || [];
|
||||
// },
|
||||
// immediate: true,
|
||||
// deep: true
|
||||
// }
|
||||
// },
|
||||
mounted() {
|
||||
// 初始化图表（若需展示图表，需在模板中添加对应 DOM）
|
||||
// this.$nextTick(() => this.updateChart())
|
||||
// 优化打印日志，输出有效数据（样式不变）
|
||||
console.log('组件挂载时的相关数据：', this.relatedData);
|
||||
},
|
||||
methods: {
|
||||
handleDashboardClick(name) {
|
||||
this.$router.push({
|
||||
path: 'singleProcAuxMatCost',
|
||||
query: {
|
||||
name,
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
/* 样式100%保留不变，无任何增删改 */
|
||||
/* 3. 核心：滚动容器样式（固定高度+溢出滚动+隐藏滚动条） */
|
||||
.scroll-container {
|
||||
/* 1. 固定容器高度：根据页面布局调整（示例300px，超出则滚动） */
|
||||
|
||||
Reference in New Issue
Block a user