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

制造成本分析修改

Browse Source
This commit is contained in:
朱菊兰
2026-03-25 14:10:27 +08:00
parent bb66f97b95
commit 4f7466bb29
59 changed files with 3909 additions and 1779 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/views/home/electricityCostAnalysisComponents/container.vue
View File

@@ -43,37 +43,35 @@ export default {
.content-top {
height: 60px;
.title-wrapper {
display: flex;
align-items: center;
margin-left: 10px;
/* 垂直居中关键属性 */
height: 100%;
/* 继承父容器高度，确保垂直居中范围 */
}
.title-wrapper {
display: flex;
align-items: center;
margin-left: 10px;
/* 垂直居中关键属性 */
height: 100%;
/* 继承父容器高度，确保垂直居中范围 */
}
.title-icon {
font-size: 30px;
margin-right: 12px;
margin-top: 4px;
/* 图标和文字之间的间距 */
flex-shrink: 0;
/* 防止图标被压缩 */
}
.title-text {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24px;
color: #000000;
letter-spacing: 3px;
text-align: left;
font-style: normal;
// 移除固定行高，避免影响垂直对齐
// line-height: 60px;
}
.title-icon {
font-size: 30px;
margin-right: 12px;
margin-top: 4px;
/* 图标和文字之间的间距 */
flex-shrink: 0;
/* 防止图标被压缩 */
}
.title-text {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24px;
color: #000000;
letter-spacing: 3px;
text-align: left;
font-style: normal;
// 移除固定行高，避免影响垂直对齐
// line-height: 60px;
}
// width: 547px;
// background: url(../../../assets/img/contentTopBasic.png) no-repeat;
// background-size: 100% 100%;
@@ -108,12 +106,11 @@ export default {
background-size: 100% 100%;
background-position: 0 0;
}
&__rawTopTitleLarge {
background: url(../../../assets/img/rawTopTitleLarge.png) no-repeat;
background-size: 100% 100%;
background-position: 0 0;
}
&__rawTopTitleLarge {
background: url(../../../assets/img/rawTopTitleLarge.png) no-repeat;
background-size: 100% 100%;
background-position: 0 0;
}
}
@@ -165,30 +162,22 @@ export default {
background-position: 0 0;
}
&__operatingRevenueBg {
background: url(../../../assets/img/operatingRevenueBg.png) no-repeat;
background-size: 100% 100%;
background-position: 0 0;
}
&__operatingRevenueBg {
background: url(../../../assets/img/operatingRevenueBg.png) no-repeat;
background-size: 100% 100%;
background-position: 0 0;
}
&__costBasicBg {
background: url(../../../assets/img/costBasicBg.png) no-repeat;
background-size: 100% 100%;
background-position: 0 0;
}
&__rawTopBg {
background: url(../../../assets/img/rawTopBg.png) no-repeat;
background-size: 100% 100%;
background-position: 0 0;
}
&__opLargeBg {
background: url(../../../assets/img/opLargeBg.png) no-repeat;
background-size: 100% 100%;
background-position: 0 0;
}
&__rawTopBg {
background: url(../../../assets/img/rawTopBg.png) no-repeat;
background-size: 100% 100%;
background-position: 0 0;
}
// &__left {
// background: url(../../../../../../../assets/img/left.png) no-repeat;
// background-size: 100% 100%;

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

@@ -8,7 +8,8 @@
width: 1595px;
background-color: rgba(249, 252, 255, 1);
">
<dataTrendBar @changeItem="handleChange" :chartData="chartData" />
<!-- 直接使用计算属性 chartData，无需手动更新 -->
<dataTrendBar @handleGetItemData="getData" :chartData="chartData" />
</div>
</div>
</Container>
@@ -23,128 +24,81 @@ export default {
name: "ProductionStatus",
components: { Container, dataTrendBar },
props: {
trend: {
trendData: {
type: Array,
// 默认值与实际数据结构一致（12个月）
default: () => [
// { title: "2025年01月", budget: 0, real: 0, rate: 0, diff: 0 },
// { title: "2025年02月", budget: 0, real: 0, rate: 0, diff: 0 },
// { title: "2025年03月", budget: 0, real: 0, rate: 0, diff: 0 },
// { title: "2025年04月", budget: 0, real: 0, rate: 0, diff: 0 },
// { title: "2025年05月", budget: 0, real: 0, rate: 0, diff: 0 },
// { title: "2025年06月", budget: 0, real: 0, rate: 0, diff: 0 },
// { title: "2025年07月", budget: 0, real: 0, rate: 0, diff: 0 },
// { title: "2025年08月", budget: 0, real: 0, rate: 0, diff: 0 },
// { title: "2025年09月", budget: 0, real: 0, rate: 0, diff: 0 },
// { title: "2025年10月", budget: 0, real: 0, rate: 0, diff: 0 },
// { title: "2025年11月", budget: 0, real: 0, rate: 0, diff: 0 },
// { title: "2025年12月", budget: 0, real: 0, rate: 0, diff: 0 }
]
default: () => [],
},
},
data() {
return {
chartData: {
months: [], // 月份数组（2025年01月 - 2025年12月）
rates: [], // 每月完成率（百分比）
reals: [], // 每月实际值
budgets: [],// 每月预算值
diffs: [], // 每月差值
flags: [] // 每月达标标识（≥100 → 1，<100 → 0）
}
// 移除：原 chartData 定义，改为计算属性
};
},
watch: {
trend: {
handler(newVal) {
this.processTrendData(newVal);
},
immediate: true,
deep: true,
},
},
mounted() {
this.processTrendData(this.trend);
},
methods: {
handleChange(value) {
this.$emit("handleChange", value);
},
// 移除：原 watch 监听配置，计算属性自动响应 trendData 变化
computed: {
/**
* 处理趋势数据（适配12个月的数组结构）
* @param {Array} trendData - 原始趋势数组（12个月）
* chartData 计算属性：自动响应 trendData 变化，格式化并提取各字段数组
* @returns {Object} 包含6个独立数组的格式化数据
*/
processTrendData(trendData) {
// 数据兜底：确保是数组且长度为12
const validTrend = Array.isArray(trendData)
? trendData
: []
chartData() {
// 初始化6个独立数组
const timeArr = []; // 格式化后的年月数组
const valueArr = []; // 实际值数组
const diffValueArr = []; // 差异值数组
const targetValueArr = []; // 预算值数组
const proportionArr = []; // 占比数组
const completedArr = []; // 完成率数组
// 初始化空数组
const months = [];
const rates = [];
const reals = [];
const budgets = [];
const diffs = [];
const flags = [];
// 遍历传入的 trendData 数组（响应式依赖，变化时自动重算）
this.trendData.forEach((item) => {
// 1. 格式化时间并推入时间数组
const yearMonth = this.formatTimeToYearMonth(item.time);
timeArr.push(yearMonth);
// 遍历12个月数据
validTrend.forEach(item => {
// 基础数据提取（兜底处理）
const month = item.title ?? '';
const budget = Number(item.budget) || 0;
const real = Number(item.real) || 0;
const rate = Number(item.rate) || 0;
const diff = Number(item.diff) || 0;
// 计算达标标识（≥100 → 1，<100 → 0）
const flag = this.getRateFlag(rate, real, budget);
// 填充数组
months.push(month);
rates.push(rate); // 转为百分比并取整
reals.push(real);
budgets.push(budget);
diffs.push(diff);
flags.push(flag);
// 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);
});
// 更新chartData（响应式）
this.chartData = {
months,
rates,
reals,
budgets,
diffs,
flags
// 组装并返回格式化后的数据（结构与原一致）
return {
time: timeArr,
value: valueArr,
diffValue: diffValueArr,
targetValue: targetValueArr,
proportion: proportionArr,
completed: completedArr,
rawData: this.trendData, // 透传原始数据，方便子组件使用
};
console.log('处理后的趋势数据：', this.chartData);
},
},
methods: {
/**
* 计算达标标识
* @param {Number} rate - 完成率（原始值，如1.2 → 120%）
* @returns {Number} 1: 达标（≥100%），0: 未达标（<100%）
* 格式化时间戳为年月格式（YYYY-MM）
* @param {Number} timestamp 13位毫秒级时间戳
* @returns {String} 格式化后的年月字符串（如：2025-10）
*/
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
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}`;
},
getData(value) {
this.$emit('getData', value)
},
},
};
</script>
<style lang="scss" scoped>
/* 滚动容器样式 */
/* 原有样式保持不变 */
.scroll-container {
max-height: 210px;
overflow-y: auto;
@@ -159,7 +113,6 @@ getRateFlag(rate, real, target) {
-ms-overflow-style: none;
}
/* 设备项样式优化 */
.proBarInfo {
display: flex;
flex-direction: column;
@@ -266,7 +219,6 @@ getRateFlag(rate, real, target) {
transition: width 0.3s ease;
}
/* 图表相关样式 */
.chartImgBottom {
position: absolute;
bottom: 45px;
@@ -285,7 +237,7 @@ getRateFlag(rate, real, target) {
</style>
<style>
/* 全局 tooltip 样式 */
/* 全局 tooltip 样式（不使用 scoped，确保生效） */
.production-status-chart-tooltip {
background: #0a2b4f77 !important;
border: none !important;

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

@@ -12,7 +12,7 @@
</span>
<span class="legend-item">
<span class="legend-icon square target"></span>
预算
目标
</span>
<span class="legend-item">
<span class="legend-icon square achieved"></span>
@@ -59,13 +59,17 @@ export default {
props: ["chartData"],
data() {
return {
activeButton: 0,
isDropdownShow: false,
selectedProfit: '营业收入', // 选中的名称，初始为null
selectedProfit: '利润总额', // 选中的名称，初始为null
profitOptions: [
'营业收入',
'单价',
'利润总额',
'销量',
'单价',
'制造成本',
'管理费用',
'销售费用',
'财务费用',
'非经营性利润',
]
};
},
@@ -74,19 +78,17 @@ export default {
// return this.categoryData.map(item => item.name) || [];
// },
currentDataSource() {
console.log('yyyy', this.chartData);
return this.chartData
return this.chartData
},
locations() {
console.log('this.chartData', this.chartData);
return this.chartData.months
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 +115,7 @@ export default {
{ offset: 1, color: 'rgba(40, 138, 255, 0)' }
])
},
data: data.rates, // 完成率（%）
data: data.proportion || [], // 完成率（%）
symbol: 'circle',
symbolSize: 6
},
@@ -135,7 +137,7 @@ export default {
borderRadius: [4, 4, 0, 0],
borderWidth: 0
},
data: data.budgets // 目标销量（万元）
data: data.targetValue || [] // 目标销量（万元）
},
// 3. 实际（柱状图，含达标状态）
{
@@ -152,8 +154,8 @@ export default {
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: (params) => {
const diff = data.diffs || [];
const flags = data.flags || [];
const diff = data.diffValue || [];
const flags = data.completed || [];
const currentDiff = diff[params.dataIndex] || 0;
const currentFlag = flags[params.dataIndex] || 0;
@@ -216,7 +218,7 @@ export default {
itemStyle: {
color: (params) => {
// 达标状态：1=达标（绿色），0=未达标（橙色）
const safeFlag = data.flags;
const safeFlag = data.completed || [];
const currentFlag = safeFlag[params.dataIndex] || 0;
return currentFlag === 1
? {
@@ -239,13 +241,10 @@ export default {
borderRadius: [4, 4, 0, 0],
borderWidth: 0
},
data: data.reals // 实际销量（万元）
data: data.value || [] // 实际销量（万元）
}
]
};
// 根据按钮状态返回对应数据
return salesData;
}
},
@@ -253,7 +252,7 @@ export default {
selectProfit(item) {
this.selectedProfit = item;
this.isDropdownShow = false;
this.$emit("changeItem", item);
this.$emit('handleGetItemData', item)
}
},
};
@@ -268,11 +267,11 @@ export default {
// 新增：头部行容器，实现一行排列
.header-row {
display: flex;
justify-content: flex-end; // 左右两端对齐
align-items: center; // 垂直居中
// width: 100%;
margin-bottom: 8px; // 与下方图表区保留间距（可根据需求调整）
display: flex;
justify-content: flex-end; // 左右两端对齐
align-items: center; // 垂直居中
// width: 100%;
margin-bottom: 8px; // 与下方图表区保留间距（可根据需求调整）
}
// 各基地情况标题样式
@@ -378,7 +377,7 @@ export default {
.dropdown-container {
position: relative;
z-index: 10;
z-index: 999; // 提高z-index，确保菜单不被遮挡
}
.item-button {
@@ -442,18 +441,21 @@ export default {
transition: transform 0.2s ease;
&.rotate {
transform: rotate(90deg);
transform: rotate(90deg); // 箭头旋转方向可根据需求调整，比如改为rotate(-90deg)更符合向上展开的视觉
}
}
.dropdown-options {
position: absolute;
top: 100%;
// 关键修改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;

6
src/views/home/electricityCostAnalysisComponents/electricityGauge.vue
View File

@@ -4,7 +4,7 @@
<div :id="id" style="width: 100%; height:100%;"></div>
<div class="bottomTip">
<div class="precent">
<span class="precentNum">{{ detailData.rate || 0 }}% </span>
<span class="precentNum">{{ detailData.completeRate ? detailData.completeRate : 0 }}% </span>
</div>
</div>
</div>
@@ -89,7 +89,7 @@ export default {
if (!this.electricityChart) return
// 修复：兜底获取rate值，确保数值有效
const rate = Number(this.detailData?.rate) || 0
const rate = Number(this.detailData?.completeRate) || 0
console.log('当前rate值：', rate); // 调试：确认rate值正确
// 关键：第二个参数传true，清空原有配置，强制更新
@@ -221,6 +221,4 @@ export default {
}
}
}
</style>

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

@@ -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,113 +9,104 @@
</div>
<div class="number">
<div class="yield">
{{ monthData?.rate || 0 }}%
{{ formatRate(factoryData?.completeRate) }}%
</div>
<div class="mom">
环比{{ monthData?.momRate }}%
<img v-if="monthData?.momRate >= 0" class="arrow" src="../../../assets/img/topArrow.png" alt="">
<img v-else 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 :detailData="monthData" id="month"></electricityGauge>
<electricityGauge id="month" :detailData="factoryData"></electricityGauge>
</div> -->
</div>
<div class="line" style="padding: 0px;">
<verticalBarChart :detailData="monthData">
</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: {
monthData: { // 接收父组件传递的设备数据数组
monData: {
type: Object,
default: () => {} // 默认空数组，避免报错
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: {
// // 处理排序：包含“总成本”的项放前面，其余项按原顺序排列
// 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())
computed: {
/**
* 自动提取monData中的工厂数据，并新增flag字段
*/
factoryData() { // 整合原始数据 + 计算flag
return {
completeRate: this.monData.proportion ? Number(this.monData.proportion) : 0,
diff: this.monData.diffValue,
real: this.monData.value,
target: this.monData.targetValue,
thb: this.monData.thb,
// ...rawData,
flag: this.monData.completed // 新增flag字段
};
}
},
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值
*/
}
}
</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;
}
@@ -126,18 +115,13 @@ export default {
height: 205px;
background: #F9FCFF;
padding: 16px 0 0 10px;
.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;
}
@@ -164,6 +148,13 @@ export default {
font-style: normal;
margin-top: 20px;
}
// 箭头样式优化
.arrow {
width: 16px;
height: 16px;
object-fit: contain;
}
}
.line {
@@ -171,34 +162,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> -->

262
src/views/home/electricityCostAnalysisComponents/monthlyRelatedMetrics.vue
View File

@@ -1,36 +1,24 @@
<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%;">
<div class="topItem-container" style="display: flex; gap: 8px; width: 100%;">
<!-- 销量模块（直接传递整合了flag的salesData） -->
<div class="dashboard left" @click="handleDashboardClick('/salesVolumeAnalysis/salesVolumeAnalysisBase')">
<div style='position: relative;'>
<div class="title">
销量·万㎡
</div>
<div style='font-size: 16px;position: absolute;top:-4px;right:15px'>
<span>完成率:<span style='color: #0B58FF;'>{{monthAnalysis[0].rate}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:monthAnalysis[0].flags>0?'#30B590':'#FF9423'}" >{{monthAnalysis[0].diff}}</span></span>
</div>
<!-- 新增：topItem 专属包裹容器，统一控制样式和布局 -->
<div class="topItem-container" style="display: flex; gap: 8px;">
<div class="dashboard left">
<div class="title">
销量·万元
</div>
<div class="chart-wrap">
<operatingSingleBar :detailData="salesData"></operatingSingleBar>
<div class="line">
<operatingSingleBar></operatingSingleBar>
</div>
</div>
<!-- 单价模块（直接传递整合了flag的unitPriceData） -->
<div class="dashboard right" @click="handleDashboardClick('/unitPriceAnalysis/unitPriceAnalysisBase')">
<div style='position: relative;'>
<div class="title">
单价·元/㎡
</div>
<div style='font-size: 16px;position: absolute;top:-4px;right:15px'>
<span>完成率:<span style='color: #0B58FF;'>{{monthAnalysis[1].rate}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:monthAnalysis[1].flags>0?'#30B590':'#FF9423'}" >{{monthAnalysis[1].diff}}</span></span>
</div>
<div class="dashboard right">
<div class="title">
单价·万元
</div>
<div class="chart-wrap">
<operatingSingleBar :detailData="unitPriceData"></operatingSingleBar>
<div class="line">
<operatingSingleBar></operatingSingleBar>
</div>
</div>
</div>
@@ -38,167 +26,102 @@
</Container>
</div>
</template>
<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 },
components: { Container, operatingSingleBar, verticalBarChart },
// mixins: [resize],
props: {
monthAnalysis: {
itemData: { // 接收父组件传递的设备数据数组
type: Array,
default: () => [
{ title: "销量", budget: 0, real: 0, rate: 0, diff: 0 },
{ title: "单价", budget: 0, real: 0, rate: 0, diff: 0 }
]
default: () => [] // 默认空数组，避免报错
},
dateData: {
type: Object,
default: () => {}
},
title: {
title: { // 接收父组件传递的设备数据数组
type: String,
default: ''
default: () => '' // 默认空数组，避免报错
},
factory: {
type: [String,Number],
default: ''
},
month: {
month: { // 接收父组件传递的设备数据数组
type: String,
default: ''
default: () => '' // 默认空数组，避免报错
},
},
data() {
return {
chart: null,
// 初始化数据包含flag字段
salesData: { title: "销量", budget: 0, real: 0, rate: 0, diff: 0, flag: 0 },
unitPriceData: { title: "单价", budget: 0, real: 0, rate: 0, diff: 0, flag: 0 }
}
},
watch: {
monthAnalysis: {
handler(newVal) {
this.updateChart(newVal)
itemData: {
handler(newValue, oldValue) {
// this.updateChart()
},
deep: true,
immediate: true
deep: 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() {
this.updateChart(this.monthAnalysis)
// 初始化图表（若需展示图表，需在模板中添加对应 DOM）
// this.$nextTick(() => this.updateChart())
},
methods: {
handleDashboardClick(path) {
this.$router.push({
path: path,
query: {
factory: this.$route.query.factory ? this.$route.query.factory : this.factory,
dateData: this.dateData
}
})
},
// 判断flag的核心方法
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
updateChart(data) {
// 数据兜底
const salesItem = Array.isArray(data) && data[0] ? data[0] : { title: "销量", budget: 0, real: 0, rate: 0, diff: 0 };
const unitPriceItem = Array.isArray(data) && data[1] ? data[1] : { title: "单价", budget: 0, real: 0, rate: 0, diff: 0 };
// 核心修改：将flag整合到数据对象中，无需单独定义salesFlag/unitPriceFlag
this.salesData = {
...salesItem, // 合并原有字段
flag: this.getRateFlag(salesItem.rate, salesItem.real, salesItem.budget) // 新增flag字段
};
this.unitPriceData = {
...unitPriceItem, // 合并原有字段
flag: this.getRateFlag(unitPriceItem.rate, unitPriceItem.real, unitPriceItem.budget) // 新增flag字段
};
// 调试：确认整合后的数据
console.log('整合flag后的销量数据：', this.salesData);
console.log('整合flag后的单价数据：', this.unitPriceData);
}
}
}
</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;
}
.topItem-container {
display: flex;
justify-content: space-between;
}
.dashboard {
flex: 1;
min-width: 300px;
width: 382px;
height: 205px;
background: #F9FCFF;
padding: 16px 0 0 10px;
margin: 0 4px;
.title {
height: 18px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 18px;
color: #000000;
line-height: 18px;
letter-spacing: 2px;
text-align: left;
margin-bottom: 12px;
}
.chart-wrap {
width: 100%;
height: calc(100% - 30px);
}
.number {
display: flex;
align-items: center;
gap: 30px;
height: 32px;
font-family: YouSheBiaoTiHei;
font-size: 32px;
color: #0B58FF;
line-height: 32px;
letter-spacing: 2px;
text-align: left;
}
.mom {
width: 97px;
// width: 190px;
height: 18px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
@@ -207,15 +130,74 @@ getRateFlag(rate, real, target) {
line-height: 18px;
letter-spacing: 1px;
text-align: left;
font-style: normal;
letter-spacing: 2px;
}
.number {
display: flex;
align-items: center;
gap: 6px;
// width: 190px;
height: 32px;
font-family: YouSheBiaoTiHei;
font-size: 32px;
color: #0B58FF;
line-height: 32px;
letter-spacing: 2px;
text-align: left;
font-style: normal;
white-space: nowrap;
}
.mom {
width: 120px;
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;
z-index: 1000;
}
}
.dashboard.left {
margin-left: 0;
// .line {
// width: 500px;
// 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);
}
.dashboard.right {
margin-right: 0;
.production-status-chart-tooltip * {
color: #fff !important;
}
</style>
</style> -->

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

@@ -51,7 +51,7 @@ import * as echarts from 'echarts';
export default {
name: "Container",
components: { operatingLineBar },
props: ["chartData", 'dateData'],
props: ["chartData",'dateData'],
emits: ['sort-change'], // 声明事件（Vue3 推荐）
data() {
return {
@@ -70,10 +70,10 @@ export default {
computed: {
// 排序后的数据源（核心：根据selectedSortValue重新排序）
currentDataSource() {
if (!this.chartData?.factory) return {};
if (!this.chartData) return {};
// 深拷贝原始数据，避免修改原数据
const factory = JSON.parse(JSON.stringify(this.chartData.factory));
const factory = JSON.parse(JSON.stringify(this.chartData));
if (!factory.locations.length || !this.selectedSortValue) return factory;
// 构建带索引的数组，方便同步所有字段排序
@@ -82,7 +82,7 @@ export default {
name,
real: factory.reals[index],
target: factory.targets[index],
rate: factory.rates[index],
rate: factory.rate[index],
diff: factory.diff[index],
flag: factory.flags[index]
}));
@@ -143,7 +143,7 @@ export default {
{ offset: 1, color: 'rgba(40, 138, 255, 0)' }
])
},
data: data.rates || [],
data: data.rate || [],
symbol: 'circle',
symbolSize: 6
},
@@ -219,14 +219,14 @@ export default {
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646',
fontSize: 14,
fontSize: 14
},
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 14,
fontSize: 14
},
// 未达标样式
unachieved: {
@@ -234,7 +234,7 @@ export default {
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 14,
fontSize: 14
}
}
},
@@ -413,7 +413,7 @@ export default {
height: 24px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
fontSize: 12px;
font-size: 12px;
line-height: 24px;
font-style: normal;
letter-spacing: 2px;
@@ -485,7 +485,7 @@ export default {
.dropdown-option {
padding: 6px 12px;
fontSize: 12px;
font-size: 12px;
color: #333;
cursor: pointer;
text-align: left;

14
src/views/home/electricityCostAnalysisComponents/operatingLineBarSale.vue
View File

@@ -62,11 +62,7 @@ export default {
console.error('图表容器未找到！');
return;
}
// 只创建一次图表实例
this.myChart = echarts.init(chartDom);
// 绑定点击事件（只绑定一次，永久生效）
this.myChart.getZr().on('click', (params) => {
console.log('params', params);
@@ -94,9 +90,10 @@ export default {
if (itemName === undefined) {
return;
}
// 路由跳转时携带序号（或名称+序号）
this.$router.push({
path: 'operatingRevenueBase',
path: 'totalProfitBase',
query: { // 使用query传递参数（推荐），也可使用params
// baseName: itemName,
factory: baseIndex,
@@ -136,7 +133,7 @@ export default {
}
}
},
grid: {
grid: {
top: 30,
bottom: 5,
right: 20,
@@ -175,6 +172,7 @@ export default {
fontSize: 12,
align: 'right'
},
splitNumber: 4,
axisTick: { show: false },
axisLabel: {
@@ -183,7 +181,7 @@ export default {
formatter: '{value}'
},
splitLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
axisLine: { show: true, show: true, lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } }
axisLine: { show: true, lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } }
},
{
type: 'value',
@@ -199,7 +197,7 @@ export default {
formatter: '{value}%'
},
splitLine: { show: false },
axisLine: { show: true, show: true, lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
axisLine: { show: true, lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
splitNumber: 4
}
],

9
src/views/home/electricityCostAnalysisComponents/operatingLineBarSaleGroup.vue
View File

@@ -34,7 +34,7 @@ export default {
// 深度监听数据变化，仅更新图表配置（不销毁实例）
chartData: {
handler() {
console.log(this.chartData,'chartData');
console.log(this.chartData, 'chartData');
this.updateChart();
},
deep: true,
@@ -83,9 +83,9 @@ export default {
// return html;
// }
},
grid: {
grid: {
top: 30,
bottom:20,
bottom: 20,
right: 10,
left: 25,
containLabel: true
@@ -118,6 +118,7 @@ export default {
fontSize: 12,
align: 'right'
},
splitNumber: 4,
axisTick: { show: false },
axisLabel: {
@@ -126,7 +127,7 @@ export default {
formatter: '{value}'
},
splitLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
axisLine: { show: true, show: true, lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
axisLine: { show: true, lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
},
// 右侧Y轴：利润占比（百分比）
{

24
src/views/home/electricityCostAnalysisComponents/operatingLineBarSaleSingle.vue
View File

@@ -1,5 +1,5 @@
<template>
<div :ref="refName" id="coreLineChart" style="width: 100%; height: 200px;"></div>
<div ref="cockpitEffChip" id="coreLineChart" style="width: 100%; height: 200px;"></div>
</template>
<script>
import * as echarts from 'echarts';
@@ -13,14 +13,6 @@ export default {
},
props: {
// 明确接收的props结构，增强可读性
refName: {
type: String,
default: () => 'cockpitEffChip',
// 校验数据格式
// validator: (value) => {
// return Array.isArray(value.series) && Array.isArray(value.allPlaceNames);
// }
},
chartData: {
type: Object,
default: () => ({
@@ -42,7 +34,7 @@ export default {
// 深度监听数据变化，仅更新图表配置（不销毁实例）
chartData: {
handler() {
console.log(this.chartData, 'chartData');
console.log(this.chartData,'chartData');
this.updateChart();
},
deep: true,
@@ -51,7 +43,7 @@ export default {
},
methods: {
updateChart() {
const chartDom = this.$refs[this.refName];
const chartDom = this.$refs.cockpitEffChip;
if (!chartDom) {
console.error('图表容器未找到！');
return;
@@ -92,16 +84,18 @@ export default {
// }
},
grid: {
top: 20,
bottom: 30,
right: 20,
left: 5,
top: 25,
bottom: 25,
right: 10,
left: 2,
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: true,
// offset: 10
// boundaryGap: ['50%', '50%'],
axisTick: { show: false },
axisLine: {
show: true,

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

@@ -1,7 +1,6 @@
<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="
height: 380px;
@@ -21,10 +20,10 @@
集团情况
</div>
<div style='font-size: 16px;line-height: 16px;text-align: right;padding-right: 16px;'>
<span>完成率:<span style='color: #0B58FF;'>{{chartData.group.rate[0]}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:chartData.group.flags>0?'#30B590':'#FF9423'}" >{{chartData.group.diff[0]}}</span></span>
<span>完成率:<span style='color: #0B58FF;'>{{chartData.topBarData.rate[0]}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:chartData.topBarData.flags>0?'#30B590':'#FF9423'}" >{{chartData.topBarData.diff[0]}}</span></span>
</div>
<operatingTopBar :chartData="chartData" />
<operatingTopBar :chartData="chartData?.topBarData || {}" />
</div>
<div class="right" style="
height: 380px;
@@ -32,8 +31,7 @@
width: 1220px;
background-color: rgba(249, 252, 255, 1);
">
<!-- <top-item /> -->
<operatingBar :dateData="dateData" :chartData="chartData" @sort-change="sortChange" />
<operatingBar :dateData="dateData" :chartData="chartData?.barData || {}" />
</div>
</div>
</Container>
@@ -45,38 +43,56 @@ 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: {
monthData: {
type: Object,
default: () => ({
group: {
rate: 0,
diff: 0,
real: 0,
target: 0
},
factory: []
}),
required: true
monData: {
type: Array,
default: () => [],
},
dateData: {
type: Object,
default: () => ({
}),
},
default: () => {},
}
},
data() {
return {
chartData: null, // 初始化 chartData 为 null
groupData: {}, // 集团数据
factoryData: [] // 工厂数据
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: {
monthData: {
monData: {
handler() {
this.processChartData();
},
@@ -85,135 +101,93 @@ export default {
},
},
methods: {
sortChange(value) {
this.$emit('sort-change', value);
},
/**
* 判断rate对应的flag值（<1为0，>1为1）
* @param {number} rate 处理后的rate值（已*100）
* @returns {0|1} flag值
*/
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
/**
* 核心处理函数：在所有数据都准备好后，才组装 chartData
* 核心方法：按levelId匹配地名生成locations
*/
processChartData() {
// 1. 处理集团数据 - 提取各字段到对应数组
this.groupData = this.monthData.group || { rate: 0, diff: 0, real: 0, target: 0 };
// 初始化空数据结构
const initTopBarData = {
locations: [], diff: [], targets: [], reals: [], rate: [], flags: []
};
const initBarData = { locations: [], diff: [], targets: [], reals: [], rate: [], flags: [] };
// 集团各维度数据数组（单条数据，对应凯盛新能）
const groupTarget = [this.groupData.target]; // 预算值数组
const groupDiff = [this.groupData.diff]; // 差值数组
const groupReal = [this.groupData.real]; // 实际值数组
const groupRate = [this.groupData.rate]; // 完成率数组
// 新增：集团rate对应的flag
const groupFlag = [this.getRateFlag(groupRate[0], groupReal[0], groupTarget[0])];
if (!Array.isArray(this.monData) || this.monData.length === 0) {
this.chartData = { topBarData: initTopBarData, barData: initBarData };
return;
}
console.log('集团数据数组：', {
groupTarget,
groupDiff,
groupReal,
groupRate,
groupFlag,
rawGroupData: this.groupData
// 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);
});
// 2. 处理工厂数据 - 提取每个工厂的对应字段到数组
this.factoryData = this.monthData.factory || [];
// 提取工厂名称数组
const factoryNames = this.factoryData.map(item => item.title || '');
// 提取工厂各维度数据数组
const factoryBudget = this.factoryData.map(item => item.budget || 0);
const factoryReal = this.factoryData.map(item => item.real || 0);
const factoryRate = this.factoryData.map(item => item.rate || 0);
const factoryDiff = this.factoryData.map(item => item.diff || 0);
// 新增：每个工厂rate对应的flag数组
const factoryFlags = this.factoryData.map(item => this.getRateFlag(item.rate, item.real, item.budget));
// 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);
});
// 3. 组装最终的chartData（供子组件使用）
this.chartData = {
// 集团数据（对应凯盛新能）
group: {
locations: ['凯盛新能'], // 集团名称
targets: groupTarget, // 集团预算值数组
diff: groupDiff, // 集团差值数组
reals: groupReal, // 集团实际值数组
rate: groupRate, // 集团完成率数组
flags: groupFlag // 新增：集团rate对应的flag
},
// 工厂数据
factory: {
locations: factoryNames, // 工厂名称数组
targets: factoryBudget, // 工厂预算数组
reals: factoryReal, // 工厂实际值数组
rates: factoryRate, // 工厂完成率数组
diff: factoryDiff, // 工厂差值数组
flags: factoryFlags // 新增：工厂rate对应的flags数组
},
// 原始数据备份（方便后续使用）
rawData: {
group: this.groupData,
factory: this.factoryData
// 遍历有效数据，填充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); // 序号转数字
}
};
});
console.log('最终处理后的图表数据：', this.chartData);
},
// 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 {
@@ -226,14 +200,12 @@ getRateFlag(rate, real, target) {
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;
@@ -259,7 +231,6 @@ getRateFlag(rate, real, target) {
height: 14px;
border: 1px solid #adadad;
margin: 0 8px;
/* 优化分割线间距 */
}
.yield {
@@ -276,22 +247,18 @@ getRateFlag(rate, real, target) {
.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;
}
@@ -314,10 +281,8 @@ getRateFlag(rate, real, target) {
#37acf5 100%);
border-radius: 5px;
transition: width 0.3s ease;
/* 进度变化时添加过渡动画，更流畅 */
}
/* 图表相关样式保留 */
.chartImgBottom {
position: absolute;
bottom: 45px;
@@ -336,7 +301,6 @@ getRateFlag(rate, real, target) {
</style>
<style>
/* 全局 tooltip 样式（不使用 scoped，确保生效） */
.production-status-chart-tooltip {
background: #0a2b4f77 !important;
border: none !important;

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

@@ -1,7 +1,6 @@
<template>
<div style="flex: 1">
<Container name="累计数据对比" icon="cockpitItemIcon" size="opLargeBg" topSize="large">
<!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
<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;
@@ -10,7 +9,7 @@
background-color: rgba(249, 252, 255, 1);
flex-direction: column;
">
<div style="
<div style="
padding: 16px 16px 5px 16px;
line-height: 18px;
font-size: 18px;
@@ -21,10 +20,10 @@
集团情况
</div>
<div style='font-size: 16px;line-height: 16px;text-align: right;padding-right: 16px;'>
<span>完成率:<span style='color: #0B58FF;'>{{chartData.group.rate[0]}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:chartData.group.flags>0?'#30B590':'#FF9423'}" >{{chartData.group.diff[0]}}</span></span>
<span>完成率:<span style='color: #0B58FF;'>{{chartData.topBarData.rate[0]}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:chartData.topBarData.flags>0?'#30B590':'#FF9423'}" >{{chartData.topBarData.diff[0]}}</span></span>
</div>
<operatingTopBar :chartData="chartData" />
<operatingTopBar :chartData="chartData?.topBarData || {}" />
</div>
<div class="right" style="
height: 380px;
@@ -32,46 +31,68 @@
width: 1220px;
background-color: rgba(249, 252, 255, 1);
">
<!-- <top-item /> -->
<operatingBar :dateData="dateData" @sort-change="sortChange" :chartData="chartData" />
<operatingBar :dateData="dateData" :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: () => ({}),
},
ytdData: {
type: Object,
default: () => ({}),
totalData: {
type: Array,
default: () => [],
},
dateData: {
type: Object,
default: () => ({
}),
default: () => {},
},
},
data() {
return {
chartData: null, // 初始化 chartData 为 null
groupData: {}, // 集团数据
factoryData: [] // 工厂数据
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: {
ytdData: {
totalData: {
handler() {
this.processChartData();
},
@@ -80,136 +101,93 @@ export default {
},
},
methods: {
sortChange(value) {
this.$emit('sort-change', value);
},
/**
* 判断rate对应的flag值（<1为0，>1为1）
* @param {number} rate 处理后的rate值（已*100）
* @returns {0|1} flag值
*/
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
/**
* 核心处理函数：在所有数据都准备好后，才组装 chartData
* 核心方法：按levelId匹配地名生成locations
*/
processChartData() {
// 1. 处理集团数据 - 提取各字段到对应数组
this.groupData = this.ytdData.group || { rate: 0, diff: 0, real: 0, target: 0 };
// 初始化空数据结构
const initTopBarData = {
locations: [], diff: [], targets: [], reals: [], rate: [], flags: []
};
const initBarData = { locations: [], diff: [], targets: [], reals: [], rate: [], flags: [] };
// 集团各维度数据数组（单条数据，对应凯盛新能）
const groupTarget = [this.groupData.target]; // 预算值数组
const groupDiff = [this.groupData.diff]; // 差值数组
const groupReal = [this.groupData.real]; // 实际值数组
const groupRate = [this.groupData.rate]; // 完成率数组
// 新增：集团rate对应的flag
const groupFlag = [this.getRateFlag(groupRate[0], groupReal[0], groupTarget[0])];
if (!Array.isArray(this.totalData) || this.totalData.length === 0) {
this.chartData = { topBarData: initTopBarData, barData: initBarData };
return;
}
console.log('集团数据数组：', {
groupTarget,
groupDiff,
groupReal,
groupRate,
groupFlag,
rawGroupData: this.groupData
// 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);
});
// 2. 处理工厂数据 - 提取每个工厂的对应字段到数组
this.factoryData = this.ytdData.factory || [];
// 提取工厂名称数组
const factoryNames = this.factoryData.map(item => item.title || '');
// 提取工厂各维度数据数组
const factoryBudget = this.factoryData.map(item => item.budget || 0);
const factoryReal = this.factoryData.map(item => item.real || 0);
const factoryRate = this.factoryData.map(item => item.rate || 0);
const factoryDiff = this.factoryData.map(item => item.diff || 0);
// 新增：每个工厂rate对应的flag数组
const factoryFlags = this.factoryData.map(item => this.getRateFlag(item.rate, item.real, item.budget));
// 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);
});
// 3. 组装最终的chartData（供子组件使用）
this.chartData = {
// 集团数据（对应凯盛新能）
group: {
locations: ['凯盛新能'], // 集团名称
targets: groupTarget, // 集团预算值数组
diff: groupDiff, // 集团差值数组
reals: groupReal, // 集团实际值数组
rate: groupRate, // 集团完成率数组
flags: groupFlag // 新增：集团rate对应的flag
},
// 工厂数据
factory: {
locations: factoryNames, // 工厂名称数组
targets: factoryBudget, // 工厂预算数组
reals: factoryReal, // 工厂实际值数组
rates: factoryRate, // 工厂完成率数组
diff: factoryDiff, // 工厂差值数组
flags: factoryFlags // 新增：工厂rate对应的flags数组
},
// 原始数据备份（方便后续使用）
rawData: {
group: this.groupData,
factory: this.factoryData
// 遍历有效数据，填充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); // 序号转数字
}
};
});
console.log('最终处理后的图表数据：', this.chartData);
},
// 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 {
@@ -222,14 +200,12 @@ getRateFlag(rate, real, target) {
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;
@@ -255,7 +231,6 @@ getRateFlag(rate, real, target) {
height: 14px;
border: 1px solid #adadad;
margin: 0 8px;
/* 优化分割线间距 */
}
.yield {
@@ -272,22 +247,18 @@ getRateFlag(rate, real, target) {
.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;
}
@@ -303,19 +274,15 @@ getRateFlag(rate, real, target) {
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;
@@ -334,7 +301,6 @@ getRateFlag(rate, real, target) {
</style>
<style>
/* 全局 tooltip 样式（不使用 scoped，确保生效） */
.production-status-chart-tooltip {
background: #0a2b4f77 !important;
border: none !important;

18
src/views/home/electricityCostAnalysisComponents/operatingSingleBar.vue
View File

@@ -1,12 +1,11 @@
<template>
<div class="lineBottom" style="height: 180px; width: 100%">
<operatingLineBarSaleSingle :refName=" 'totalOperating' " :chartData="chartD" style="height: 99%; width: 100%" />
<div class="lineBottom" style="height: 160px; width: 100%">
<operatingLineBarSaleSingle :refName="'totalOperating'" :chartData="chartD" style="height: 100%; width: 100%" />
</div>
</template>
<script>
import operatingLineBarSaleSingle from './operatingLineBarSaleSingle.vue';
import * as echarts from 'echarts';
export default {
name: "Container",
@@ -23,20 +22,18 @@ export default {
chartD() {
// 背景图片路径（若不需要可注释）
// const bgImageUrl = require('@/assets/img/labelBg.png');
console.log('this.detailData', this.detailData);
const rate = this.detailData?.rate || 0
const diff = this.detailData?.diff || 0
const rate = this.detailData?.proportion? Number(this.detailData?.proportion) : 0
const diff = this.detailData?.diffValue || 0
console.log('diff', diff);
const seriesData = [
{
value: this.detailData?.budget || 0,
value: this.detailData?.targetValue || 0,
flag: 1, // 实际项：达标（绿色）
label: {
show: true,
position: 'top',
offset: [0, 0],
fontSize: 14,
},
itemStyle: {
color: {
@@ -52,13 +49,12 @@ export default {
},
},
{
value: this.detailData?.real || 0,
flag: this.detailData?.flag, // 实际项：达标（绿色）
value: this.detailData?.value || 0,
flag: this.detailData?.completed, // 实际项：达标（绿色）
label: {
show: true,
position: 'top',
offset: [0, 0],
fontSize: 14,
},
itemStyle: {
borderRadius: [4, 4, 0, 0],

42
src/views/home/electricityCostAnalysisComponents/operatingTopBar.vue
View File

@@ -23,23 +23,51 @@ export default {
currentDataSource() {
console.log('yyyy', this.chartData);
return this.chartData.group
return this.chartData
},
locations() {
console.log('this.chartData', this.chartData);
console.log('this.1111', this.chartData);
return this.chartData.group.locations
return this.chartData.locations
},
// 根据按钮切换生成对应的 chartData
chartD() {
// 销量场景数据
const data = this.currentDataSource;
const diff = this.currentDataSource.diff[0]
const rate = this.currentDataSource.rate[0]
const diff = data.diff[0]
const rate = data.rate[0]
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',
@@ -135,7 +163,7 @@ export default {
name: '预算',
type: 'bar',
yAxisIndex: 0,
barWidth: 65,
barWidth: 14,
itemStyle: {
color: {
type: 'linear',
@@ -155,7 +183,7 @@ export default {
name: '实际',
type: 'bar',
yAxisIndex: 0,
barWidth: 65,
barWidth: 14,
itemStyle: {
color: (params) => {
const safeFlag = [1, 0, 1, 1, 0, 1]; // 达标状态

225
src/views/home/electricityCostAnalysisComponents/relatedIndicatorsAnalysis.vue Normal file
View File

@@ -0,0 +1,225 @@
<template>
<div style="flex: 1">
<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">
<div
v-for="item in sortedIndicators"
:key="item.key"
class="dashboard"
@click="item.route && handleDashboardClick(item.route)"
>
<div class="title">
{{ item.name }}·{{ item.unit }}
</div>
<div style='font-size: 16px;text-align: right;padding-right: 5px;'>
<span>完成率:<span style='color: #0B58FF;'>{{item.data.proportion}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:item.data.completed>0?'#30B590':'#FF9423'}" >{{item.data.diffValue}}</span></span>
</div>
<operatingSingleBar :detailData="item.data"></operatingSingleBar>
</div>
</div>
</div>
</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',
components: { Container, operatingSingleBar },
props: {
// 接收父组件传递的 月度+累计 组合数据
relatedData: {
type: Object,
default: () => ({
relatedMon: [], // 月度数据（数组格式，存储销量/单价等数据）
relatedTotal: [] // 累计数据（数组格式，存储销量/单价等数据）
})
},
dateData: {
type: Object,
default: () => ({})
},
factory: {
type: [Number, String],
default: ''
},
// 可选：动态标题
title: {
type: String,
default: ''
}
},
data() {
return {
chart: null,
// 核心：当前激活的数据集（月度/累计），默认初始化月度数据
activeData: this.relatedData.relatedMon || []
}
},
computed: {
indicatorDefs() {
return [
{ key: 'sales', name: '销量', unit: '万㎡', route: '/salesVolumeAnalysis/salesVolumeAnalysisBase'},
{ key: 'price', name: '单价', unit: '元/㎡', route: '/unitPriceAnalysis/unitPriceAnalysisBase'},
{ key: 'mfgCost', name: '制造成本', unit: '元/㎡', route: '/productionCostAnalysis/productionCostAnalysisBase'},
{ key: 'mgmtFee', name: '管理费用', unit: '万元', route: '/expenseAnalysis/expenseAnalysisBase'},
{ key: 'salesFee', name: '销售费用', unit: '万元', route: '/expenseAnalysis/expenseAnalysisBase'},
{ key: 'finFee', name: '财务费用', unit: '万元', route: '/expenseAnalysis/expenseAnalysisBase'},
{ key: 'nonOpProfit', name: '非经营性利润', unit: '万元', route: null}
]
},
indicators() {
const fallback = { targetValue: 0, value: 0, completed: 0, diffValue: 0 }
const list = (Array.isArray(this.activeData) ? this.activeData : [])
return this.indicatorDefs.map(def => {
const data = list.find(item => item && item.name === def.name) || fallback
return {
...def,
data,
sortValue: Number((data && data.value) ?? 0)
}
})
},
sortedIndicators() {
const unitOrder = ['万㎡', '元/㎡', '万元']
const unitRank = (u) => {
const idx = unitOrder.indexOf(u)
return idx === -1 ? 999 : idx
}
return this.indicators.slice().sort((a, b) => {
const ur = unitRank(a.unit) - unitRank(b.unit)
if (ur !== 0) return ur
const vr = (b.sortValue ?? -Infinity) - (a.sortValue ?? -Infinity)
if (vr !== 0) return vr
return String(a.key).localeCompare(String(b.key))
})
}
},
watch: {
// 可选：监听 relatedData 初始变化（若父组件异步传递数据，确保 activeData 同步更新）
relatedData: {
handler(newVal) {
this.activeData = newVal.relatedMon || [];
},
immediate: true,
deep: true
}
},
mounted() {
console.log('组件挂载时的激活数据：', this.activeData);
},
methods: {
handleDashboardClick(path) {
this.$router.push({
path: path,
query: {
factory: this.$route.query.factory ? this.$route.query.factory : this.factory,
dateData: this.dateData
}
})
},
/**
* Tab 切换处理函数
* @param {String} value 切换值（'month' = 月度，'total' = 累计，可根据实际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，超出则滚动） */
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;
}
.dashboard {
width: 220px;
height: 205px;
background: #F9FCFF;
padding: 16px 0 0 10px;
.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;
}
.number {
display: flex;
align-items: center;
gap: 6px;
// width: 190px;
height: 32px;
font-family: YouSheBiaoTiHei;
font-size: 32px;
color: #0B58FF;
line-height: 32px;
letter-spacing: 2px;
text-align: left;
font-style: normal;
white-space: nowrap;
}
.mom {
width: 120px;
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;
z-index: 1000;
}
}
</style>

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

@@ -11,22 +11,21 @@
</div>
<div class="number">
<div class="yield">
{{ ytdData?.rate || 0}}%
{{ formatRate(factoryData?.completeRate) }}%
</div>
<div class="mom">
同比{{ ytdData?.yoyRate || 0}}%
<img v-if="ytdData?.yoyRate >= 0" class="arrow" src="../../../assets/img/topArrow.png" alt="">
<img v-else class="arrow" src="../../../assets/img/downArrow.png" alt="">
同比{{ 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=" 'totalG' " :detailData="ytdData" id="totalGauge"></electricityGauge>
<electricityGauge id="year" :detailData="factoryData"></electricityGauge>
</div> -->
</div>
<div class="line" style="padding: 0px;">
<verticalBarChart :refName=" 'totalVerticalBarChart' " :detailData="ytdData">
</verticalBarChart>
<!-- 传递包含flag的factoryData给柱状图组件 -->
<verticalBarChart :detailData="factoryData"></verticalBarChart>
</div>
</div>
</div>
@@ -44,55 +43,56 @@ import verticalBarChart from './verticalBarChart.vue'
export default {
name: 'ProductionStatus',
components: { Container, electricityGauge, verticalBarChart },
// mixins: [resize],
props: {
ytdData: { // 接收父组件传递的设备数据数组
totalData: {
type: Object,
default: () => {} // 默认空数组，避免报错
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.totalData.proportion ? Number(this.totalData.proportion) : 0,
diff: this.totalData.diffValue,
real: this.totalData.value,
target: this.totalData.targetValue,
thb: this.totalData.thb,
// ...rawData,
flag: 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值
*/
}
}
</script>
@@ -126,6 +126,7 @@ export default {
height: 205px;
background: #F9FCFF;
padding: 16px 0 0 10px;
.title {
// width: 190px;
height: 18px;

222
src/views/home/electricityCostAnalysisComponents/verticalBarChart.vue
View File

@@ -1,8 +1,8 @@
<template>
<div style="width: 100%; height: 210px;position: relative;">
<div style='font-size: 16px;position: absolute;right: 20px;top:10px'>
<span>完成率:<span style='color: #0B58FF;'>{{detailData.rate}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:detailData.flags>0?'#30B590':'#FF9423'}" >{{detailData.diff}}</span></span>
<span>完成率:<span style='color: #0B58FF;'>{{detailData.completeRate}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:detailData.flag>0?'#30B590':'#FF9423'}" >{{detailData.diff}}</span></span>
</div>
<div :ref="refName" id="coreLineChart" style="width: 100%; height: 210px;"></div>
</div>
@@ -14,88 +14,70 @@ export default {
components: {},
data() {
return {
myChart: null // 存储图表实例，避免重复创建
myChart: null
};
},
props: {
// 明确接收的props结构，增强可读性
refName: {
type: String,
default: () => 'verticalBarChart',
default: 'verticalBarChart',
},
detailData: {
type: Object,
default: () => ({
completeRate: 0,
diff: 0,
real: 0,
target: 0,
thb: 0,
flag: 0
}),
}
},
mounted() {
this.$nextTick(() => {
this.updateChart();
});
this.$nextTick(() => this.updateChart());
},
// 新增：监听 chartData 变化
watch: {
// 深度监听数据变化，仅更新图表配置（不销毁实例）
detailData: {
handler() {
console.log(this.chartData, 'chartData');
this.updateChart();
},
deep: true,
immediate: true // 初始化时立即执行
immediate: true
}
},
methods: {
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
updateChart() {
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 diff = this.detailData.diff || 0
const rate = this.detailData.rate || 0
const flagValue = this.getRateFlag(this.detailData.rate, this.detailData.real, this.detailData.target) || 0
// 解构数据，避免重复取值
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: 40,
@@ -103,122 +85,98 @@ export default {
right: 80,
left: 10,
containLabel: true,
show: false // 隐藏grid背景，避免干扰
show: false
},
xAxis: {
// 横向柱状图的x轴必须设为数值轴，否则无法正常展示数值
type: 'value',
// offset: 0,
// boundaryGap: true ,
// boundaryGap: [10, 0], // 可根据需要开启，控制轴的留白
axisTick: { show: false },
min: 0,
//
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: this.detailData.real,
label: {
show: true,
position: 'right',
fontSize: 14,
// 修复：拆分数据项，确保每个柱子的样式独立生效
data: [
// 实际值柱子（核心：绑定flag颜色）
{
value: realValue,
label: {
show: true,
position: 'right',
fontSize: 14
},
// 修复：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: flagValue === 1
? {
// 预算值柱子（固定蓝色渐变）
{
value: targetValue,
label: {
show: true,
position: 'right',
fontSize: 14
},
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
x: 1, 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)' }
{ offset: 0, color: '#82CCFF' },
{ offset: 1, color: '#4B9DFF' }
]
},
borderRadius: [4, 4, 0, 0]
borderRadius: [4, 4, 0, 0],
borderWidth: 0
}
}
}, {
value: this.detailData.target,
label: {
show: true,
position: 'right',
fontSize: 14,
},
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;
});
}
},

258
src/views/home/electricityCostAnalysisComponents/yearRelatedMetrics.vue
View File

@@ -1,36 +1,24 @@
<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%;">
<div class="topItem-container" style="display: flex; gap: 8px; width: 100%;">
<!-- 销量模块（直接传递整合了flag的salesData） -->
<div class="dashboard left" @click="handleDashboardClick('/salesVolumeAnalysis/salesVolumeAnalysisBase')">
<div style='position: relative;'>
<div class="title">
销量·万㎡
</div>
<div style='font-size: 16px;position: absolute;top:-4px;right:15px'>
<span>完成率:<span style='color: #0B58FF;'>{{ytdAnalysis[0].rate}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:ytdAnalysis[0].flags>0?'#30B590':'#FF9423'}" >{{ytdAnalysis[0].diff}}</span></span>
</div>
<!-- 新增：topItem 专属包裹容器，统一控制样式和布局 -->
<div class="topItem-container" style="display: flex; gap: 8px;">
<div class="dashboard left">
<div class="title">
销量·万元
</div>
<div class="chart-wrap">
<operatingSingleBar :detailData="salesData"></operatingSingleBar>
<div class="line">
<operatingSingleBar></operatingSingleBar>
</div>
</div>
<!-- 单价模块（直接传递整合了flag的unitPriceData） -->
<div class="dashboard right" @click="handleDashboardClick('/unitPriceAnalysis/unitPriceAnalysisBase')">
<div style='position: relative;'>
<div class="title">
单价·元/㎡
</div>
<div style='font-size: 16px;position: absolute;top:-4px;right:15px'>
<span>完成率:<span style='color: #0B58FF;'>{{ytdAnalysis[1].rate}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:ytdAnalysis[1].flags>0?'#30B590':'#FF9423'}" >{{ytdAnalysis[1].diff}}</span></span>
</div>
<div class="dashboard right">
<div class="title">
单价·万元
</div>
<div class="chart-wrap">
<operatingSingleBar :detailData="unitPriceData"></operatingSingleBar>
<div class="line">
<operatingSingleBar></operatingSingleBar>
</div>
</div>
</div>
@@ -38,163 +26,102 @@
</Container>
</div>
</template>
<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 },
components: { Container, operatingSingleBar, verticalBarChart },
// mixins: [resize],
props: {
ytdAnalysis: {
itemData: { // 接收父组件传递的设备数据数组
type: Array,
default: () => [
{ title: "销量", budget: 0, real: 0, rate: 0, diff: 0 },
{ title: "单价", budget: 0, real: 0, rate: 0, diff: 0 }
]
default: () => [] // 默认空数组，避免报错
},
dateData: {
type: Object,
default: () => {}
},
title: {
title: { // 接收父组件传递的设备数据数组
type: String,
default: ''
default: () => '' // 默认空数组，避免报错
},
month: {
month: { // 接收父组件传递的设备数据数组
type: String,
default: ''
default: () => '' // 默认空数组，避免报错
},
},
data() {
return {
chart: null,
// 初始化数据包含flag字段
salesData: { title: "销量", budget: 0, real: 0, rate: 0, diff: 0, flag: 0 },
unitPriceData: { title: "单价", budget: 0, real: 0, rate: 0, diff: 0, flag: 0 }
}
},
watch: {
ytdAnalysis: {
handler(newVal) {
this.updateChart(newVal)
itemData: {
handler(newValue, oldValue) {
// this.updateChart()
},
deep: true,
immediate: true
deep: 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() {
this.updateChart(this.ytdAnalysis)
// 初始化图表（若需展示图表，需在模板中添加对应 DOM）
// this.$nextTick(() => this.updateChart())
},
methods: {
handleDashboardClick(path) {
this.$router.push({
path: path,
query: {
factory: this.$route.query.factory ? this.$route.query.factory : 5,
dateData: this.dateData
}
})
},
// 判断flag的核心方法
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
updateChart(data) {
// 数据兜底
const salesItem = Array.isArray(data) && data[0] ? data[0] : { title: "销量", budget: 0, real: 0, rate: 0, diff: 0 };
const unitPriceItem = Array.isArray(data) && data[1] ? data[1] : { title: "单价", budget: 0, real: 0, rate: 0, diff: 0 };
// 核心修改：将flag整合到数据对象中，无需单独定义salesFlag/unitPriceFlag
this.salesData = {
...salesItem, // 合并原有字段
flag: this.getRateFlag(salesItem.rate, salesItem.real, salesItem.budget) // 新增flag字段
};
this.unitPriceData = {
...unitPriceItem, // 合并原有字段
flag: this.getRateFlag(unitPriceItem.rate, unitPriceItem.real, unitPriceItem.budget) // 新增flag字段
};
// 调试：确认整合后的数据
console.log('整合flag后的销量数据：', this.salesData);
console.log('整合flag后的单价数据：', this.unitPriceData);
}
}
}
</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;
}
.topItem-container {
display: flex;
justify-content: space-between;
}
.dashboard {
flex: 1;
min-width: 300px;
width: 382px;
height: 205px;
background: #F9FCFF;
padding: 16px 0 0 10px;
margin: 0 4px;
.title {
height: 18px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 18px;
color: #000000;
line-height: 18px;
letter-spacing: 2px;
text-align: left;
margin-bottom: 12px;
}
.chart-wrap {
width: 100%;
height: calc(100% - 30px);
}
.number {
display: flex;
align-items: center;
gap: 30px;
height: 32px;
font-family: YouSheBiaoTiHei;
font-size: 32px;
color: #0B58FF;
line-height: 32px;
letter-spacing: 2px;
text-align: left;
}
.mom {
width: 97px;
// width: 190px;
height: 18px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
@@ -203,15 +130,74 @@ getRateFlag(rate, real, target) {
line-height: 18px;
letter-spacing: 1px;
text-align: left;
font-style: normal;
letter-spacing: 2px;
}
.number {
display: flex;
align-items: center;
gap: 6px;
// width: 190px;
height: 32px;
font-family: YouSheBiaoTiHei;
font-size: 32px;
color: #0B58FF;
line-height: 32px;
letter-spacing: 2px;
text-align: left;
font-style: normal;
white-space: nowrap;
}
.mom {
width: 120px;
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;
z-index: 1000;
}
}
.dashboard.left {
margin-left: 0;
// .line {
// width: 500px;
// 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);
}
.dashboard.right {
margin-right: 0;
.production-status-chart-tooltip * {
color: #fff !important;
}
</style>
</style> -->