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

新增页面

Browse Source
This commit is contained in:
‘937886381’
2025-12-25 16:48:17 +08:00
parent 2d200dd1a6
commit 80deffbb42
406 changed files with 108362 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

419
src/views/home/expenseAnalysisComponents/Header.vue Normal file
View File

@@ -0,0 +1,419 @@
<template>
<header class="report-header">
<!-- 左侧区域：logo + 标题 -->
<div class="left-content">
<img style="height: 36px;" src="../../../assets/img/cnbm.png" alt="benmaLogo" >
<div class="top-title">{{ topTitle }}</div>
</div>
<div class="center-content">
<!-- 循环 pageRoutes，不再硬编码文字 -->
<div class="item" v-for="(page, index) in pageRoutes" :key="index" @click="goToPage(page.path, index)">
<span class="item-text">{{ page.text }}</span>
</div>
</div>
<!-- :class="{ 'no-skew': activeIndex === index }
" -->
<!-- 右侧区域：全屏按钮 -->
<div class="right-content">
<el-button type="text" class="screen-btn" :title="isFullScreen ? '退出全屏' : '全屏'" @click="changeFullScreen">
<svg-icon style="color: #0B58FF;" v-if="isFullScreen" icon-class="unFullScreenView" />
<svg-icon style="color: #0B58FF;" v-else icon-class="fullScreenView" />
</el-button>
</div>
<!-- 时间选择区域：日/月/年按钮 + label + 日期选择器 -->
<div class="timeType">
<!-- <div class="item" v-for="(item, index) in timeTypes" :key="index" @click="activeTime = index"
:class="{ 'no-skew': activeTime === index }">
<span class="item-text">{{ item.text }}</span>
</div> -->
<div class="dateP">
<div class="label">
<span class="label-text">月份选择</span>
</div>
<el-date-picker v-model="date" :type="getPickerType" :placeholder="getPickerPlaceholder"
class="custom-date-picker" style="width: 132px;height: 29px;" @change="emitTimeRange" />
</div>
</div>
</header>
</template>
<script>
import moment from 'moment'
export default {
name: 'Header',
props: {
isFullScreen: { type: Boolean, default: false },
topTitle: { type: String, default: '' }
},
data() {
return {
currentTime: '',
timeTimer: null,
date: undefined,
activeIndex: -1,
activeTime: 1, // 0=日，1=月，2=年（默认选中“日”）
pageRoutes: [
{ text: '营业收入', path: '/operatingRevenue/operatingRevenueIndex' },
{ text: '利润分析', path: '/profitAnalysis' },
{ text: '产销率库存分析', path: '/PSIAnal' },
{ text: '成本分析', path: '/cost/cost' },
{ text: '驾驶舱报表', path: '/cockpit' }
],
// 定义时间类型配置：text=按钮文字，pickerType=选择器类型，placeholder=占位符
timeTypes: [
{ text: '日', pickerType: 'date', placeholder: '选择日期' },
{ text: '月', pickerType: 'month', placeholder: '选择月份' },
{ text: '年', pickerType: 'year', placeholder: '选择年份' }
]
}
},
computed: {
// 动态获取日期选择器类型
getPickerType() {
return this.timeTypes[this.activeTime].pickerType;
},
// 动态获取日期选择器占位符
getPickerPlaceholder() {
return this.timeTypes[this.activeTime].placeholder;
}
},
methods: {
goToPage(path, index) {
// 1. 跳转到对应路由
this.$router.push(path);
// 2. 更新activeIndex，让当前点击项高亮
this.activeIndex = index;
},
changeFullScreen() { this.$emit('screenfullChange') },
padZero(num) { return num < 10 ? '0' + num : num },
/**
* 核心方法1：根据维度计算时间区间（首次进入时基于赋值的当月日期，计算“当月第一天0点→次月第一天0点”）
* @returns {Object} 包含 start（开始时间）、end（结束时间）、dimension（维度）的区间对象
*/
calculateTimeRange() {
let startTime = 0;
let endTime = 0;
const mode = this.activeTime + 1; // 1=日，2=月，3=年
const defaultMoment = moment(); // 默认当前时间
const targetMoment = this.date
? moment(this.date, this.getPickerType === 'date' ? 'YYYY-MM-DD' : (this.getPickerType === 'month' ? 'YYYY-MM' : 'YYYY'))
: defaultMoment;
if (!targetMoment.isValid()) {
console.error('无效日期:', this.date);
return { startTime, endTime, mode };
}
// 1. 日维度：00:00:00 → 23:59:59（无毫秒）
if (this.activeTime === 0) {
startTime = targetMoment.startOf('day').millisecond(0).valueOf();
endTime = targetMoment.endOf('day').millisecond(0).valueOf();
}
// 2. 月维度：当月1日00:00:00 → 当月最后一天23:59:59（无毫秒）
else if (this.activeTime === 1) {
startTime = targetMoment.startOf('month').millisecond(0).valueOf();
endTime = targetMoment.endOf('month').millisecond(0).valueOf();
}
// 3. 年维度：当年1月1日00:00:00 → 当年最后一天23:59:59（无毫秒）
else if (this.activeTime === 2) {
startTime = targetMoment.startOf('year').millisecond(0).valueOf();
endTime = targetMoment.endOf('year').millisecond(0).valueOf();
}
// 调试输出：验证是否去掉毫秒
console.log('时间范围计算结果:', {
mode,
startTime: moment(startTime * 1000).format('YYYY-MM-DD HH:mm:ss'), // 格式：2025-11-30 00:00:00
endTime: moment(endTime * 1000).format('YYYY-MM-DD HH:mm:ss'), // 格式：2025-11-30 23:59:59（无毫秒）
startTimeStamp: startTime, // 秒级时间戳（如：1764422400）
endTimeStamp: endTime // 秒级时间戳（如：1764508799）
});
return { startTime, endTime, mode };
},
/**
* 核心方法2：传递时间区间给父组件（首次进入时触发，传递“当月第一天0点→次月第一天0点”）
*/
emitTimeRange() {
const timeRange = this.calculateTimeRange();
this.$emit('timeRangeChange', timeRange);
// 调试用：查看首次传递的区间（如{start: "2025-10-01T00:00:00", end: "2025-11-01T00:00:00", dimension: "月"}）
console.log('当前时间区间：', timeRange);
}
},
watch: {
// 维度切换时：清空选择的日期，并传递当前维度的默认区间
activeTime(newVal, oldVal) {
if (newVal !== oldVal) {
this.date = undefined;
// this.emitTimeRange();
}
}
},
mounted() {
// 核心逻辑：首次进入页面，计算当月默认日期并赋值给选择器，同时传递区间
const now = new Date();
const year = now.getFullYear();
const month = this.padZero(now.getMonth() + 1); // 月份从0开始，+1后补零（如1月→01）
// 赋值当月默认日期（格式：YYYY-MM，适配month类型选择器）
this.date = `${year}-${month}`;
// 确保选择器渲染完成后，传递“当月第一天0点→次月第一天0点”的区间
this.$nextTick(() => this.emitTimeRange());
},
}
</script>
<style scoped lang="scss">
/* 原有样式不变，仅补充label文字的倾斜抵消样式 */
@font-face {
font-family: "YouSheBiaoTiHei";
src: url('../../../assets/fonts/YouSheBiaoTiHe.ttf') format('truetype');
}
.report-header {
height: 117px;
width: 100%;
display: flex;
justify-content: space-around;
background: url('../../../assets/img/topTitle.png') no-repeat;
background-size: cover;
background-position: 0 0;
box-sizing: border-box;
position: relative;
/* 确保timeType绝对定位生效 */
.left-content {
margin-top: 11px;
margin-left: 44px;
height: 55px;
display: flex;
align-items: center;
gap: 16px;
}
.top-title {
height: 55px;
font-family: "YouSheBiaoTiHei", sans-serif;
font-size: 42px;
color: #1E1651;
line-height: 55px;
letter-spacing: 6px;
text-align: left;
}
.center-content {
display: flex;
gap: 8px;
margin-top: 18px;
margin-left: 70px;
.item {
width: 180px;
height: 50px;
background: #E1EEFC;
transform: skew(-20deg);
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 20px;
color: #1E1651;
line-height: 50px;
letter-spacing: 2px;
text-align: center;
cursor: pointer;
overflow: hidden;
box-shadow: 0px 13px 16px 0px rgba(179, 217, 255, 0.43),
0px 2px 4px 0px rgba(92, 140, 255, 0.25),
inset 0px -43px 13px 0px rgba(255, 255, 255, 0.51);
.item-text {
display: inline-block;
transform: skew(20deg);
}
}
.item.no-skew {
background: none !important;
transform: none !important;
box-shadow: none !important;
color: #1E1651;
.item-text {
transform: none !important;
}
}
}
.timeType {
position: absolute;
display: flex;
align-items: center;
/* 垂直居中，避免元素高低错位 */
top: 42px;
right:10px;
margin-top: 18px;
gap: 0;
/* 清除间隙，让按钮与选择器紧密连接 */
}
.timeType .item {
width: 40px;
height: 28px;
background: rgba(236, 244, 254, 1);
transform: skew(-20deg);
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 14px;
color: rgba(11, 88, 255, 1);
line-height: 28px;
letter-spacing: 2px;
text-align: center;
cursor: pointer;
overflow: hidden;
/* 选中按钮与未选中按钮倾斜角度统一，避免切换时跳动 */
}
.timeType .item .item-text {
display: inline-block;
transform: skew(20deg);
transition: all 0.2s ease;
}
.timeType .item.no-skew {
background: rgba(11, 88, 255, 1);
color: rgba(249, 252, 255, 1);
transform: skew(-20deg) !important;
/* 统一倾斜角度，修复原30deg的错位 */
box-shadow: 0 2px 8px rgba(11, 88, 255, 0.3);
}
.timeType .item.no-skew .item-text {
transform: skew(20deg) !important;
/* 同步统一文字倾斜角度 */
}
.dateP {
position: relative;
margin-left: 30px;
display: flex;
align-items: center;
gap: 0;
}
.dateP .label {
width: 165px;
height: 28px;
background: rgba(236, 244, 254, 1);
transform: skew(-25deg);
/* 与按钮倾斜角度统一（原30deg改为25deg，避免视觉错位） */
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 14px;
color: #0B58FF;
line-height: 28px;
text-align: center;
overflow: hidden;
}
/* 补充：label文字抵消倾斜（原代码遗漏，导致文字倾斜） */
.dateP .label-text {
display: inline-block;
transform: skew(25deg);
/* 与label倾斜角度相反，确保文字正立 */
}
.right-content {
display: flex;
flex-direction: column;
margin-top: 12px;
margin-right: 4px;
gap: 20px;
}
.current-time {
color: #FFFFFF;
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 22px;
line-height: 24px;
letter-spacing: 1px;
}
.screen-btn {
width: 26px;
margin-left: 300px;
color: #00fff0;
font-size: 26px;
padding: 0;
}
}
/* 日期选择器样式保持不变 */
::v-deep .custom-date-picker {
position: absolute;
right: 8px;
width: 165px !important;
height: 28px !important;
position: relative;
margin: 0 !important;
/* 1. 调整输入框文字：确保行高与输入框高度一致，垂直居中 */
.el-input__inner {
height: 28px !important;
width: 165px !important;
text-align: center;
padding-left: 15px !important;
padding-right: 32px !important;
/* 给图标留空间，避免文字被遮挡 */
font-size: 14px !important;
line-height: 28px !important;
/* 行高=输入框高度，文字垂直居中 */
color: rgba(237, 245, 253, 1) !important;
vertical-align: middle !important;
/* 强制文字垂直对齐 */
clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%);
border: none !important;
box-shadow: none !important;
background-color: rgba(11, 88, 255, 1) !important;
border-left: 1px solid rgba(255, 255, 255, 0.2);
}
/* 2. 调整图标容器：让图标与文字在同一水平线上 */
.el-input__prefix {
left: auto !important;
right: 8px !important;
top: 50% !important;
/* 从40%改为50%，基于输入框垂直居中 */
transform: translateY(-50%) !important;
/* 向上偏移自身50%，精准居中 */
display: inline-flex !important;
/* 让容器内图标垂直居中 */
align-items: center !important;
/* 图标在容器内垂直居中 */
height: 28px !important;
/* 容器高度=输入框高度，避免偏移 */
}
/* 3. 调整图标本身：确保图标大小和对齐方式 */
.el-input__icon {
color: #ffffff !important;
font-size: 16px !important;
line-height: 28px !important;
/* 图标行高=输入框高度，与文字对齐 */
vertical-align: middle !important;
/* 强制图标垂直对齐 */
}
/* 4. 图标伪类：确保颜色和对齐继承 */
.el-icon-date::before {
color: #ffffff !important;
font-size: 16px !important;
line-height: inherit !important;
/* 继承父级行高，避免错位 */
}
}
</style>

271
src/views/home/expenseAnalysisComponents/container.vue Normal file
View File

@@ -0,0 +1,271 @@
<template>
<div class="cockpitContainer" :class="['cockpitContainer__' + size]">
<div class="content-top" :class="['content-top__' + topSize]">
<!-- 使用 flex 容器包裹图标和文字，实现垂直居中 -->
<div class="title-wrapper">
<svg-icon class="title-icon" :icon-class="icon" />
<span class="title-text">
{{ name }}
</span>
</div>
</div>
<div class="cockpitContainer-body">
<slot>
<div class="test-body">something test....</div>
</slot>
</div>
</div>
</template>
<script>
export default {
name: 'Container',
components: {},
// eslint-disable-next-line vue/require-prop-types
props: ['name', 'size', 'icon', 'topSize'],
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss">
.cockpitContainer {
display: inline-block;
// width: 100%;
// height: 100%;
padding: 6px;
display: flex;
flex-direction: column;
position: relative;
.content-top {
height: 60px;
.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;
}
// width: 547px;
// background: url(../../../assets/img/contentTopBasic.png) no-repeat;
// background-size: 100% 100%;
// background-position: 0 0;
&__basic {
// width: 547px;
background: url(../../../assets/img/contentTopBasic.png) no-repeat;
background-size: 100% 100%;
background-position: 0 0;
}
&__middle {
background: url(../../../assets/img/topTileMiddle.png) no-repeat;
background-size: 100% 100%;
background-position: 0 0;
}
&__large {
background: url(../../../assets/img/topTitleLargeBg.png) no-repeat;
background-size: 100% 100%;
background-position: 0 0;
}
&__KFAPTopTitle {
background: url(../../../assets/img/KFAPTopTitle.png) no-repeat;
background-size: 100% 100%;
background-position: 0 0;
}
&__psiTopTitleBasic {
background: url(../../../assets/img/psiTopTitleBasic.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;
}
}
&__topBasic {
background: url(../../../assets/img/top-basic.png) no-repeat;
background-size: 100% 100%;
background-position: 0 0;
}
&__bottomBasic {
background: url(../../../assets/img/bottom-basic.png) no-repeat;
background-size: 100% 100%;
background-position: 0 0;
}
&__operatingBasic {
background: url(../../../assets/img/operating-basic.png) no-repeat;
background-size: 100% 100%;
background-position: 0 0;
}
&__operatingLarge {
background: url(../../../assets/img/operating-large.png) no-repeat;
background-size: 100% 100%;
background-position: 0 0;
}
&__profitTopBasic {
background: url(../../../assets/img/profitTopBasic.png) no-repeat;
background-size: 100% 100%;
background-position: 0 0;
}
&__profitMiddleBasic {
background: url(../../../assets/img/profitMiddleBasic.png) no-repeat;
background-size: 100% 100%;
background-position: 0 0;
}
&__psiBasicBg {
background: url(../../../assets/img/psiBasicBg.png) no-repeat;
background-size: 100% 100%;
background-position: 0 0;
}
&__psiMiddleBg {
background: url(../../../assets/img/psiMiddleBg.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;
}
// &__left {
// background: url(../../../../../../../assets/img/left.png) no-repeat;
// background-size: 100% 100%;
// background-position: 0 0;
// }
// &__energyConsumption {
// background: url(../../../../../../../assets/img/energyConsumption.png) no-repeat;
// background-size: 100% 100%;
// background-position: 0 0;
// }
// &__left2 {
// background: url(../../assets/left_2.png) no-repeat;
// background-size: 100% 100%;
// background-position: 0 0;
// }
// &__left3 {
// background: url(../../assets/left_3.png) no-repeat;
// background-size: 100% 100%;
// background-position: 0 0;
// }
// &__mid2 {
// background: url(../../assets/mid_2.png) no-repeat;
// background-size: 100% 100%;
// background-position: 0 0;
// }
// &__mid3 {
// background: url(../../assets/mid_3.png) no-repeat;
// background-size: 100% 100%;
// background-position: 0 0;
// }
// &__right1 {
// background: url(../../assets/right_1.png) no-repeat;
// background-size: 100% 100%;
// background-position: 0 0;
// }
// &__right2 {
// background: url(../../assets/right_2.png) no-repeat;
// background-size: 100% 100%;
// background-position: 0 0;
// }
// &__right3 {
// background: url(../../assets/right_3.png) no-repeat;
// background-size: 100% 100%;
// background-position: 0 0;
// }
// &__weekRight2 {
// background: url(../../assets/week_right_2.png) no-repeat;
// background-size: 100% 100%;
// background-position: 0 0;
// }
// &__weekMidTop {
// background: url(../../assets/week-mid-top.png) no-repeat;
// background-size: 100% 100%;
// background-position: 0 0;
// }
// &__weekMidMid {
// background: url(../../assets/week-mid-mid.png) no-repeat;
// background-size: 100% 100%;
// background-position: 0 0;
// }
&::after {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
// background: inherit;
/* 设置模糊，不用 filter */
backdrop-filter: blur(5px);
z-index: -1;
}
}
.container-body {
flex: 1;
}
</style>

292
src/views/home/expenseAnalysisComponents/dataTrend.vue Normal file
View File

@@ -0,0 +1,292 @@
<template>
<div style="flex: 1">
<Container name="数据趋势" icon="cockpitItemIcon" size="opLargeBg" topSize="large">
<div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%; gap: 16px">
<div class="right" style="
height: 191px;
display: flex;
width: 1595px;
background-color: rgba(249, 252, 255, 1);
">
<dataTrendBar @changeItem="handleChange" :chartData="chartData" />
</div>
</div>
</Container>
</div>
</template>
<script>
import Container from "../components/container.vue";
import dataTrendBar from "./dataTrendBar.vue";
export default {
name: "ProductionStatus",
components: { Container, dataTrendBar },
props: {
trend: {
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 }
]
},
},
data() {
return {
chartData: {
months: [], // 月份数组（2025年01月 - 2025年12月）
rates: [], // 每月完成率（百分比）
reals: [], // 每月实际值
budgets: [],// 每月预算值
diffs: [], // 每月差值
flags: [] // 每月达标标识（≥100 → 1，<100 → 0）
}
};
},
watch: {
trend: {
handler(newVal) {
this.processTrendData(newVal);
},
immediate: true,
deep: true,
},
},
mounted() {
this.processTrendData(this.trend);
},
methods: {
handleChange(value) {
this.$emit("handleChange", value);
},
/**
* 处理趋势数据（适配12个月的数组结构）
* @param {Array} trendData - 原始趋势数组（12个月）
*/
processTrendData(trendData) {
// 数据兜底：确保是数组且长度为12
const validTrend = Array.isArray(trendData) && trendData.length === 12
? trendData
: this.$props.trend.default();
// 初始化空数组
const months = [];
const rates = [];
const reals = [];
const budgets = [];
const diffs = [];
const flags = [];
// 遍历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);
// 填充数组
months.push(month);
rates.push(Math.round(rate * 100)); // 转为百分比并取整
reals.push(real);
budgets.push(budget);
diffs.push(diff);
flags.push(flag);
});
// 更新chartData（响应式）
this.chartData = {
months,
rates,
reals,
budgets,
diffs,
flags
};
console.log('处理后的趋势数据：', this.chartData);
},
/**
* 计算达标标识
* @param {Number} rate - 完成率（原始值，如1.2 → 120%）
* @returns {Number} 1: 达标（≥100%），0: 未达标（<100%）
*/
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 原始rate若为小数（如0.8 → 80%，1.1 → 110%），则*100后判断
const ratePercent = rate;
return ratePercent >= 100 ? 1 : 0;
}
},
};
</script>
<style lang="scss" scoped>
/* 滚动容器样式 */
.scroll-container {
max-height: 210px;
overflow-y: auto;
overflow-x: hidden;
padding: 10px 0;
&::-webkit-scrollbar {
display: none;
}
scrollbar-width: none;
-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 {
width: 21px;
height: 23px;
background: rgba(0, 106, 205, 0.22);
backdrop-filter: blur(1.5px);
font-family: PingFangSC, PingFang SC;
font-weight: 400;
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;
color: #ffffff;
line-height: 18px;
letter-spacing: 1px;
text-align: left;
font-style: normal;
}
.eqStatus {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 16px;
color: #ffffff;
line-height: 18px;
text-align: right;
font-style: normal;
}
.splitLine {
width: 1px;
height: 14px;
border: 1px solid #adadad;
margin: 0 8px;
}
.yield {
height: 18px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 16px;
color: #00ffff;
line-height: 18px;
text-align: right;
font-style: normal;
}
.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;
}
.proBarLine {
width: 100%;
height: 100%;
background: linear-gradient(65deg, rgba(82, 82, 82, 0) 0%, #acacac 100%);
opacity: 0.2;
}
.proBarLineTop {
position: absolute;
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%);
border-radius: 5px;
transition: width 0.3s ease;
}
/* 图表相关样式 */
.chartImgBottom {
position: absolute;
bottom: 45px;
left: 58px;
}
.line {
display: inline-block;
position: absolute;
left: 57px;
bottom: 42px;
width: 1px;
height: 20px;
background-color: #00e8ff;
}
</style>
<style>
/* 全局 tooltip 样式 */
.production-status-chart-tooltip {
background: #0a2b4f77 !important;
border: none !important;
backdrop-filter: blur(12px);
}
.production-status-chart-tooltip * {
color: #fff !important;
}
</style>

471
src/views/home/expenseAnalysisComponents/dataTrendBar.vue Normal file
View File

@@ -0,0 +1,471 @@
<template>
<div class="coreBar">
<!-- 新增行容器：包裹“各基地情况”和barTop -->
<div class="header-row">
<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>
<span class="legend-item">
<span class="legend-icon square target"></span>
预算
</span>
<span class="legend-item">
<span class="legend-icon square achieved"></span>
实际·达标
</span>
<span class="legend-item">
<span class="legend-icon square unachieved"></span>
实际·未达标
</span>
</div>
<div class="button-group">
<div class="item-button category-btn">
<span class="item-text">类目选择</span>
</div>
<div class="dropdown-container">
<div class="item-button profit-btn active" @click.stop="isDropdownShow = !isDropdownShow">
<span class="item-text profit-text">{{ selectedProfit || '请选择' }}</span>
<span class="dropdown-arrow" :class="{ 'rotate': isDropdownShow }"></span>
</div>
<div class="dropdown-options" v-if="isDropdownShow">
<div class="dropdown-option" v-for="(item, index) in profitOptions" :key="index"
@click.stop="selectProfit(item)">
{{ item }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="lineBottom" style="height: 100%; width: 100%">
<operatingLineBar :chartData="chartD" style="height: 99%; width: 100%" />
</div>
</div>
</template>
<script>
import operatingLineBar from './operatingLineBarSale.vue';
import * as echarts from 'echarts';
export default {
name: "Container",
components: { operatingLineBar },
props: ["chartData"],
data() {
return {
activeButton: 0,
isDropdownShow: false,
selectedProfit: null, // 选中的名称，初始为null
profitOptions: [
'总费用',
'管理费用',
'销售费用',
'财务费用',
]
};
},
computed: {
// profitOptions() {
// return this.categoryData.map(item => item.name) || [];
// },
currentDataSource() {
console.log('yyyy', this.chartData);
return this.chartData
},
locations() {
console.log('this.chartData', this.chartData);
return this.chartData.months
},
// 根据按钮切换生成对应的 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.budgets // 目标销量（万元）
},
// 3. 实际（柱状图，含达标状态）
{
name: '实际',
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.diffs || [];
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 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 // 实际销量（万元）
}
]
};
// 根据按钮状态返回对应数据
return salesData;
}
},
methods: {
selectProfit(item) {
this.selectedProfit = item;
this.isDropdownShow = false;
this.$emit("changeItem", item);
}
},
};
</script>
<style scoped lang="scss">
.coreBar {
display: flex;
flex-direction: column;
width: 100%;
padding: 12px;
// 新增：头部行容器，实现一行排列
.header-row {
display: flex;
justify-content: space-between; // 左右两端对齐
align-items: center; // 垂直居中
width: 100%;
margin-bottom: 8px; // 与下方图表区保留间距（可根据需求调整）
}
// 各基地情况标题样式
.base-title {
font-weight: 400;
font-size: 18px;
color: #000000;
line-height: 18px;
letter-spacing: 1px;
font-style: normal;
padding: 0 0 0 16px; // 保留原有内边距
white-space: nowrap; // 防止文字换行
}
.barTop {
// 移除原有flex和justify-content，由header-row控制
width: auto; // 自适应宽度
// 保留原有align-items，确保内部元素垂直居中
align-items: center;
gap: 16px;
// 1. 右侧容器：包裹图例和按钮组，整体靠右
.right-container {
display: flex;
align-items: center; // 图例和按钮组垂直居中
gap: 24px; // 图例与按钮组的间距，避免贴紧
margin-right: 46px; // 右侧整体留边，与原按钮组边距一致
}
// 2. 图例：在右侧容器内横向排列
.legend {
display: flex;
gap: 16px; // 图例项之间间距，避免重叠
align-items: center;
margin: 0;
}
.legend-item {
display: flex;
align-items: center;
gap: 8px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 14px;
color: rgba(0, 0, 0, 0.8);
text-align: left;
font-style: normal;
white-space: nowrap; // 防止图例文字换行
}
.legend-icon {
display: inline-block;
}
.legend-icon.line {
width: 12px;
height: 2px;
position: relative;
&::before {
position: absolute;
content: "";
top: -2px;
left: 3px;
width: 6px;
border-radius: 50%;
height: 6px;
background-color: rgba(40, 138, 255, 1);
}
}
.legend-icon.square {
width: 8px;
height: 8px;
}
// 图例颜色
.yield {
background: rgba(40, 138, 255, 1);
}
.target {
background: #2889FF;
}
.achieved {
background: rgba(40, 203, 151, 1);
}
.unachieved {
background: rgba(255, 132, 0, 1);
}
// 3. 按钮组：在右侧容器内，保留原有样式
.button-group {
display: flex;
position: relative;
gap: 2px;
align-items: center;
height: 24px;
background: #ecf4fe;
margin: 0;
.dropdown-container {
position: relative;
z-index: 10;
}
.item-button {
cursor: pointer;
height: 24px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 12px;
line-height: 24px;
font-style: normal;
letter-spacing: 2px;
overflow: hidden;
.item-text {
display: inline-block;
}
}
.category-btn {
width: 75px;
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
background: #ffffff;
color: #0b58ff;
text-align: center;
}
.profit-btn {
width: 123px;
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
position: relative;
padding: 0 18px 0 8px;
background: #ffffff;
color: #0b58ff;
text-align: left;
&.active {
background: #3071ff;
color: rgba(249, 252, 255, .8);
}
.profit-text {
text-align: left;
width: 100%;
}
}
.dropdown-arrow {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 6px solid currentColor;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-right: 4px solid transparent;
transition: transform 0.2s ease;
&.rotate {
transform: rotate(90deg);
}
}
.dropdown-options {
position: absolute;
top: 100%;
right: 0;
margin-top: 2px;
width: 123px;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
.dropdown-option {
padding: 6px 12px;
font-size: 12px;
color: #333;
cursor: pointer;
text-align: left;
letter-spacing: 1px;
&:hover {
background: #f5f7fa;
color: #3071ff;
}
}
}
}
}
}
</style>

224
src/views/home/expenseAnalysisComponents/electricityGauge.vue Normal file
View File

@@ -0,0 +1,224 @@
<template>
<div>
<div class="chartBox" style="width: 100%; height: 108px; position: relative;">
<div :id="id" style="width: 100%; height:100%;"></div>
<div class="bottomTip">
<div class="precent">
<span class="precentNum">{{ detailData.rate || 0 }} </span>
</div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
name: 'EnergyConsumption',
// components: { Container },
// mixins: [resize],
props: {
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日']
})
},
id: {
type: String,
default: () => ('monthG')
}
},
data() {
return {
// electricityChart: null,
// steamChart: null,
// specialTicks: [2, 4, 6, 8], // 统一的刻度显示
}
},
watch: {
detailData: {
deep: true,
immediate: true, // 初始化时立即执行
handler() {
this.updateGauges()
}
}
},
mounted() {
this.initGauges()
// window.addEventListener('resize', this.handleResize)
this.observeContainerResize()
},
methods: {
observeContainerResize() {
// 修复：获取正确的容器（组件内的.gauge-container）
const container = this.$el.querySelector('.gauge-container')
if (container && window.ResizeObserver) {
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)
// }
},
updateGauges() {
// 修复：先判断实例是否存在，再更新配置
if (!this.electricityChart) return
// 修复：兜底获取rate值，确保数值有效
const rate = Number(this.detailData?.rate) || 0
console.log('当前rate值：', rate); // 调试：确认rate值正确
// 关键：第二个参数传true，清空原有配置，强制更新
this.electricityChart.setOption(this.getElectricityGaugeOption(rate), true)
},
// 用电量仪表盘配置（保留原有样式，优化数值范围）
getElectricityGaugeOption(value) {
const electricityGradient = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#0B58FF' },
{ offset: 1, color: '#32FFCD' }
])
return {
series: [
{
name: '月度',
type: 'gauge',
radius: '95', // 修复：添加%，避免数值错误
center: ['50%', '90%'],
startAngle: 180,
endAngle: 0,
min: 0,
max: 100,
splitNumber: 4,
label: { show: false },
progress: {
show: true,
overlap: false,
roundCap: true,
clip: false,
width: 14,
itemStyle: { color: electricityGradient }
},
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: '#288AFF' },
offsetCenter: [0, '10%']
},
axisLine: {
roundCap: true,
lineStyle: { width: 12, color: [[1, '#E6EBF7']] }
},
splitLine: {
length: 10,
lineStyle: { width: 5, color: '#D6DAE5' },
},
axisTick: {
splitNumber: 2,
length: 6,
lineStyle: { width: 2, color: '#D6DAE5' }
},
axisLabel: {
show: false,
},
detail: { show: false },
data: [{ value: value, unit: '' }] // 确保数值正确传入
}
]
}
},
// 未使用的蒸汽仪表盘可注释/删除
// getSteamGaugeOption(value) { ... }
}
}
</script>
<style lang='scss' scoped>
.chartBox {
.bottomTip {
text-align: center;
font-size: 14px;
.precent {
line-height: 3px;
&::after,
&::before {
content: '';
display: inline-block;
width: 54px;
height: 5px;
vertical-align: middle;
}
&::after {
margin-left: 30px;
}
&::before {
margin-right: 30px;
}
}
// 用电量线条颜色
.precent::before {
background: linear-gradient(90deg, rgba(40, 138, 255, 0) 0%, rgba(12, 125, 254, 0.4) 100%);
}
/* ::after：从 透明 到 rgba(12, 125, 254, 0.4)（90度渐变，左到右） */
.precent::after {
background: linear-gradient(90deg, rgba(12, 125, 254, 0.4) 0%, rgba(40, 138, 255, 0) 100%);
}
// 蒸汽线条颜色
// .steam-precent::after,
// .steam-precent::before {
// background: linear-gradient(90deg, rgba(11, 168, 255, 0.26) 0%, rgba(54, 239, 230, 1) 100%);
// }
.precentNum {
display: inline-block;
// width: 52px;
height: 22px;
font-family: PingFangSC, PingFang SC;
font-weight: 600;
font-size: 16px;
color: #0B58FF;
line-height: 22px;
text-align: center;
font-style: normal;
}
// 蒸汽数字颜色
.steam-num {
color: rgba(54, 239, 230, 1);
}
}
}
</style>

208
src/views/home/expenseAnalysisComponents/monthlyOverview.vue Normal file
View File

@@ -0,0 +1,208 @@
<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">
{{ month }}月完成率
</div>
<div class="number">
<div class="yield">
{{ monthData?.rate || 0 }}%
</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="">
</div>
</div>
<div class="electricityGauge">
<electricityGauge :detailData="monthData" id="month"></electricityGauge>
</div>
</div>
<div class="line" style="padding: 0px;">
<verticalBarChart :detailData="monthData">
</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: { // 接收父组件传递的设备数据数组
type: Object,
default: () => { } // 默认空数组，避免报错
},
title: { // 接收父组件传递的设备数据数组
type: String,
default: () => '' // 默认空数组，避免报错
},
month: { // 接收父组件传递的设备数据数组
type: String,
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())
},
methods: {
}
}
</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: 264px;
height: 205px;
background: #F9FCFF;
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;
}
.number {
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;
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;
}
}
.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);
}
.production-status-chart-tooltip * {
color: #fff !important;
}
</style> -->

199
src/views/home/expenseAnalysisComponents/monthlyRelatedMetrics.vue Normal file
View File

@@ -0,0 +1,199 @@
<template>
<div style="flex: 1">
<Container :name="title" icon="cockpitItemIcon" size="operatingRevenueBg" topSize="middle">
<div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%;">
<div class="topItem-container" style="display: flex; gap: 8px; width: 100%;">
<!-- 管理费用模块 -->
<div class="dashboard">
<div class="title">
管理费用·单位/万元
</div>
<div class="chart-wrap">
<operatingSingleBar :detailData="manageCostData"></operatingSingleBar>
</div>
</div>
<!-- 销售费用模块 -->
<div class="dashboard">
<div class="title">
销售费用·单位/万元
</div>
<div class="chart-wrap">
<operatingSingleBar :detailData="saleCostData"></operatingSingleBar>
</div>
</div>
<!-- 财务费用模块 -->
<div class="dashboard">
<div class="title">
财务费用·单位/万元
</div>
<div class="chart-wrap">
<operatingSingleBar :detailData="financeCostData"></operatingSingleBar>
</div>
</div>
</div>
</div>
</Container>
</div>
</template>
<script>
import Container from './container.vue'
import operatingSingleBar from './operatingSingleBar.vue'
export default {
name: 'CostAnalysis', // 语义化组件名
components: { Container, operatingSingleBar },
props: {
// 费用数据：数组包含管理/销售/财务费用三个对象
monthAnalysis: {
type: Array,
default: () => [
{ title: "管理费用", budget: 0, real: 0, rate: 0, diff: 0 },
{ title: "销售费用", budget: 0, real: 0, rate: 0, diff: 0 },
{ title: "财务费用", budget: 0, real: 0, rate: 0, diff: 0 }
]
},
title: {
type: String,
default: '费用分析'
},
month: {
type: String,
default: ''
},
},
data() {
return {
// 初始化费用数据（包含flag字段）
manageCostData: { title: "管理费用", budget: 0, real: 0, rate: 0, diff: 0, flag: 0 },
saleCostData: { title: "销售费用", budget: 0, real: 0, rate: 0, diff: 0, flag: 0 },
financeCostData: { title: "财务费用", budget: 0, real: 0, rate: 0, diff: 0, flag: 0 }
}
},
watch: {
monthAnalysis: {
handler(newVal) {
this.updateCostData(newVal)
},
deep: true,
immediate: true // 初始化立即执行
}
},
mounted() {
this.updateCostData(this.monthAnalysis)
},
methods: {
// 达标标识判断（≥100返回1，<100返回0）
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return rate >= 100 ? 1 : 0;
},
// 处理费用数据
updateCostData(data) {
// 数据兜底：确保是数组且长度≥3
const validData = Array.isArray(data) && data.length >= 3
? data
: this.$props.monthAnalysis;
// 提取三个费用项数据（兜底处理）
const manageItem = validData[0] || { title: "管理费用", budget: 0, real: 0, rate: 0, diff: 0 };
const saleItem = validData[1] || { title: "销售费用", budget: 0, real: 0, rate: 0, diff: 0 };
const financeItem = validData[2] || { title: "财务费用", budget: 0, real: 0, rate: 0, diff: 0 };
// 整合flag字段
this.manageCostData = {
...manageItem,
flag: this.getRateFlag(manageItem.rate)
};
this.saleCostData = {
...saleItem,
flag: this.getRateFlag(saleItem.rate)
};
this.financeCostData = {
...financeItem,
flag: this.getRateFlag(financeItem.rate)
};
// 调试日志
console.log('管理费用数据：', this.manageCostData);
console.log('销售费用数据：', this.saleCostData);
console.log('财务费用数据：', this.financeCostData);
}
}
}
</script>
<style lang='scss' scoped>
.scroll-container {
max-height: 210px;
overflow-y: auto;
overflow-x: hidden;
padding: 10px 0;
&::-webkit-scrollbar {
display: none;
}
scrollbar-width: none;
-ms-overflow-style: none;
}
.topItem-container {
display: flex;
justify-content: space-between; // 三列均匀分布
}
.dashboard {
flex: 1; // 三列等分宽度
min-width: 240px; // 最小宽度，防止挤压
max-width: 300px; // 最大宽度，限制过宽
height: 205px;
background: #F9FCFF;
padding: 16px 16px 0;
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;
height: 18px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 18px;
color: #000000;
line-height: 18px;
letter-spacing: 1px;
text-align: left;
}
}
</style>

485
src/views/home/expenseAnalysisComponents/operatingBar.vue Normal file
View File

@@ -0,0 +1,485 @@
<template>
<div class="coreBar">
<div class="header-row">
<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>
<span class="legend-item">
<span class="legend-icon square target"></span>预算
</span>
<span class="legend-item">
<span class="legend-icon square achieved"></span>实际·达标
</span>
<span class="legend-item">
<span class="legend-icon square unachieved"></span>实际·未达标
</span>
</div>
<div class="button-group">
<div class="item-button category-btn">
<span class="item-text">展示顺序</span>
</div>
<div class="dropdown-container">
<div class="item-button profit-btn active" @click.stop="isDropdownShow = !isDropdownShow">
<span class="item-text profit-text">{{ 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.label }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="lineBottom" style="height: 100%; width: 100%">
<operatingLineBar :chartData="chartD" style="height: 99%; width: 100%" />
</div>
</div>
</template>
<script>
import operatingLineBar from './operatingLineBarSale.vue';
import * as echarts from 'echarts';
export default {
name: "Container",
components: { operatingLineBar },
props: ["chartData"],
emits: ['sort-change'], // 声明事件（Vue3 推荐）
data() {
return {
activeButton: 0,
isDropdownShow: false,
selectedSort: null, // 选中的label
selectedSortValue: null, // 选中的value，用于排序逻辑
profitOptions: [
{ label: '实际值：高~低', value: 1 },
{ label: '实际值：低~高', value: 2 },
{ label: '完成率：高~低', value: 3 },
{ label: '完成率：低~高', value: 4 },
]
};
},
computed: {
// 排序后的数据源（核心：根据selectedSortValue重新排序）
currentDataSource() {
if (!this.chartData?.factory) return {};
// 深拷贝原始数据，避免修改原数据
const factory = JSON.parse(JSON.stringify(this.chartData.factory));
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.rates[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() {
return this.currentDataSource.locations || [];
},
// 最终传递给图表的排序后数据
chartD() {
const data = this.currentDataSource;
const salesData = {
allPlaceNames: this.locations,
series: [
// 完成率（折线图）
{
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: data.rates || [],
symbol: 'circle',
symbolSize: 6
},
// 目标（柱状图）
{
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: data.targets || []
},
// 实际（柱状图）
{
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 = 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 || []
}
]
};
return salesData;
}
},
methods: {
selectProfit(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>
<style scoped lang="scss">
.coreBar {
display: flex;
flex-direction: column;
width: 100%;
padding: 12px;
.header-row {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin-bottom: 8px;
}
.base-title {
font-weight: 400;
font-size: 18px;
color: #000000;
line-height: 18px;
letter-spacing: 1px;
font-style: normal;
padding: 0 0 0 16px;
white-space: nowrap;
}
.barTop {
width: auto;
align-items: center;
gap: 16px;
.right-container {
display: flex;
align-items: center;
gap: 24px;
margin-right: 46px;
}
.legend {
display: flex;
gap: 16px;
align-items: center;
margin: 0;
}
.legend-item {
display: flex;
align-items: center;
gap: 8px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 14px;
color: rgba(0, 0, 0, 0.8);
text-align: left;
font-style: normal;
white-space: nowrap;
}
.legend-icon {
display: inline-block;
}
.legend-icon.line {
width: 12px;
height: 2px;
position: relative;
&::before {
position: absolute;
content: "";
top: -2px;
left: 3px;
width: 6px;
border-radius: 50%;
height: 6px;
background-color: rgba(40, 138, 255, 1);
}
}
.legend-icon.square {
width: 8px;
height: 8px;
}
.yield {
background: rgba(40, 138, 255, 1);
}
.target {
background: #2889FF;
}
.achieved {
background: rgba(40, 203, 151, 1);
}
.unachieved {
background: rgba(255, 132, 0, 1);
}
.button-group {
display: flex;
position: relative;
gap: 2px;
align-items: center;
height: 24px;
background: #ecf4fe;
margin: 0;
.dropdown-container {
position: relative;
z-index: 10;
}
.item-button {
cursor: pointer;
height: 24px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 12px;
line-height: 24px;
font-style: normal;
letter-spacing: 2px;
overflow: hidden;
.item-text {
display: inline-block;
}
}
.category-btn {
width: 75px;
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
background: #ffffff;
color: #0b58ff;
text-align: center;
}
.profit-btn {
width: 123px;
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
position: relative;
padding: 0 18px 0 8px;
background: #ffffff;
color: #0b58ff;
text-align: left;
&.active {
background: #3071ff;
color: rgba(249, 252, 255, .8);
}
.profit-text {
text-align: left;
width: 100%;
}
}
.dropdown-arrow {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 6px solid currentColor;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-right: 4px solid transparent;
transition: transform 0.2s ease;
&.rotate {
transform: rotate(90deg);
}
}
.dropdown-options {
position: absolute;
top: 100%;
right: 0;
margin-top: 2px;
width: 123px;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
.dropdown-option {
padding: 6px 12px;
font-size: 12px;
color: #333;
cursor: pointer;
text-align: left;
letter-spacing: 1px;
&:hover {
background: #f5f7fa;
color: #3071ff;
}
}
}
}
}
}
</style>

176
src/views/home/expenseAnalysisComponents/operatingBottomLineBar.vue Normal file
View File

@@ -0,0 +1,176 @@
<template>
<div ref="cockpitEffChipBottom" id="cockpitEffChipBottom" style="width: 100%; height: 400px;"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
components: {},
data() {
return {
myChart: null // 存储图表实例，避免重复创建
};
},
props: {
// 明确接收的props结构，增强可读性
chartData: {
type: Object,
default: () => ({
series: [],
allPlaceNames: []
}),
// 校验数据格式
validator: (value) => {
return Array.isArray(value.series) && Array.isArray(value.allPlaceNames);
}
}
},
mounted() {
this.$nextTick(() => {
this.updateChart();
});
},
// 新增：监听 chartData 变化
watch: {
// 深度监听数据变化，仅更新图表配置（不销毁实例）
chartData: {
handler() {
console.log(this.chartData,'chartData');
this.updateChart();
},
deep: true,
immediate: true // 初始化时立即执行
}
},
methods: {
updateChart() {
const chartDom = this.$refs.cockpitEffChipBottom;
if (!chartDom) {
console.error('图表容器未找到！');
return;
}
if (this.myChart) {
this.myChart.dispose();
}
this.myChart = echarts.init(chartDom);
const { allPlaceNames, series } = this.chartData || {};
// 处理空数据
const xData = allPlaceNames || [];
const chartSeries = series || []; // 父组件传递的 series
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;
}
},
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]
},
data: xData
}
],
yAxis: [
// 左侧Y轴：营业收入、成本（单位万元）
{
type: 'value',
splitNumber: 4,
name: '万元',
nameTextStyle: {
color: 'rgba(0, 0, 0, 0.45)',
fontSize: 12,
align: 'right'
},
// min: 0,
// max: (value) => Math.ceil((value.max || 0) * 1.1),
scale: true,
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)' } },
splitNumber: 4
},
// 右侧Y轴：利润占比（百分比）
{
type: 'value',
nameTextStyle: {
color: 'rgba(0, 0, 0, 0.45)',
fontSize: 12,
align: 'left'
},
// min: 0,
// max: 100,
scale:true,
splitNumber: 4,
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 // 直接使用父组件传递的 series
};
option && this.myChart.setOption(option);
// 窗口缩放适配和销毁逻辑保持不变
window.addEventListener('resize', () => {
this.myChart && this.myChart.resize();
});
this.$once('hook:destroyed', () => {
window.removeEventListener('resize', () => {
this.myChart && this.myChart.resize();
});
this.myChart && this.myChart.dispose();
});
}
},
};
</script>

172
src/views/home/expenseAnalysisComponents/operatingLineBar.vue Normal file
View File

@@ -0,0 +1,172 @@
<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 // 存储图表实例，避免重复创建
};
},
props: {
// 明确接收的props结构，增强可读性
chartData: {
type: Object,
default: () => ({
series: [],
allPlaceNames: []
}),
// 校验数据格式
validator: (value) => {
return Array.isArray(value.series) && Array.isArray(value.allPlaceNames);
}
}
},
mounted() {
this.$nextTick(() => {
this.updateChart();
});
},
// 新增：监听 chartData 变化
watch: {
// 深度监听数据变化，仅更新图表配置（不销毁实例）
chartData: {
handler() {
console.log(this.chartData,'chartData');
this.updateChart();
},
deep: true,
immediate: true // 初始化时立即执行
}
},
methods: {
updateChart() {
const chartDom = this.$refs.cockpitEffChip;
if (!chartDom) {
console.error('图表容器未找到！');
return;
}
if (this.myChart) {
this.myChart.dispose();
}
this.myChart = echarts.init(chartDom);
const { allPlaceNames, series } = this.chartData || {};
// 处理空数据
const xData = allPlaceNames || [];
const chartSeries = series || []; // 父组件传递的 series
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;
// }
},
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]
},
data: xData
}
],
yAxis: [
// 左侧Y轴：营业收入、成本（单位万元）
{
type: 'value',
name: '万元',
nameTextStyle: {
color: 'rgba(0, 0, 0, 0.45)',
fontSize: 12,
align: 'right'
},
scale: true,
splitNumber: 4,
axisTick: { show: false },
axisLabel: {
color: 'rgba(0, 0, 0, 0.45)',
fontSize: 12,
formatter: '{value}'
},
splitLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
axisLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
splitNumber: 4
},
// 右侧Y轴：利润占比（百分比）
// {
// type: 'value',
// nameTextStyle: {
// color: 'rgba(0, 0, 0, 0.45)',
// fontSize: 12,
// align: 'left'
// },
// min: 0,
// max: 100,
// axisTick: { show: false },
// axisLabel: {
// color: 'rgba(0, 0, 0, 0.45)',
// fontSize: 12,
// formatter: '{value}%'
// },
// splitLine: { show: false },
// axisLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
// splitNumber: 4
// }
],
series: chartSeries // 直接使用父组件传递的 series
};
option && this.myChart.setOption(option);
// 窗口缩放适配和销毁逻辑保持不变
window.addEventListener('resize', () => {
this.myChart && this.myChart.resize();
});
this.$once('hook:destroyed', () => {
window.removeEventListener('resize', () => {
this.myChart && this.myChart.resize();
});
this.myChart && this.myChart.dispose();
});
}
},
};
</script>

207
src/views/home/expenseAnalysisComponents/operatingLineBarSale.vue Normal file
View File

@@ -0,0 +1,207 @@
<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: {
'宜兴': 1,
'漳州': 2,
'自贡': 3,
'桐城': 4,
'洛阳': 5,
'合肥': 6,
'宿迁': 7,
'秦皇岛': 8
}
};
},
props: {
chartData: {
type: Object,
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: 'expenseAnalysisBase',
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>

172
src/views/home/expenseAnalysisComponents/operatingLineBarSaleGroup.vue Normal file
View File

@@ -0,0 +1,172 @@
<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 // 存储图表实例，避免重复创建
};
},
props: {
// 明确接收的props结构，增强可读性
chartData: {
type: Object,
default: () => ({
}),
// 校验数据格式
// validator: (value) => {
// return Array.isArray(value.series) && Array.isArray(value.allPlaceNames);
// }
}
},
mounted() {
this.$nextTick(() => {
this.updateChart();
});
},
// 新增：监听 chartData 变化
watch: {
// 深度监听数据变化，仅更新图表配置（不销毁实例）
chartData: {
handler() {
console.log(this.chartData,'chartData');
this.updateChart();
},
deep: true,
immediate: true // 初始化时立即执行
}
},
methods: {
updateChart() {
const chartDom = this.$refs.cockpitEffChip;
if (!chartDom) {
console.error('图表容器未找到！');
return;
}
if (this.myChart) {
this.myChart.dispose();
}
this.myChart = echarts.init(chartDom);
const { allPlaceNames, series } = this.chartData || {};
console.log('chartData', this.chartData);
// 处理空数据
const xData = allPlaceNames || [];
const chartSeries = series || []; // 父组件传递的 series
console.log('xData', xData);
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;
// }
},
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]
},
data: xData
}
],
yAxis: [
// 左侧Y轴：营业收入、成本（单位万元）
{
type: 'value',
name: '万元',
nameTextStyle: {
color: 'rgba(0, 0, 0, 0.45)',
fontSize: 12,
align: 'right'
},
scale: true,
splitNumber: 4,
axisTick: { show: false },
axisLabel: {
color: 'rgba(0, 0, 0, 0.45)',
fontSize: 12,
formatter: '{value}'
},
splitLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
axisLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
},
// 右侧Y轴：利润占比（百分比）
{
type: 'value',
nameTextStyle: {
color: 'rgba(0, 0, 0, 0.45)',
fontSize: 12,
align: 'left'
},
// min: 0,
// max: 100,
axisTick: { show: false },
axisLabel: {
color: 'rgba(0, 0, 0, 0.45)',
fontSize: 12,
formatter: '{value}%'
},
splitLine: { show: false },
axisLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
// scale: true,
splitNumber: 4,
}
],
series: chartSeries // 直接使用父组件传递的 series
};
option && this.myChart.setOption(option);
// 窗口缩放适配和销毁逻辑保持不变
window.addEventListener('resize', () => {
this.myChart && this.myChart.resize();
});
this.$once('hook:destroyed', () => {
window.removeEventListener('resize', () => {
this.myChart && this.myChart.resize();
});
this.myChart && this.myChart.dispose();
});
}
},
};
</script>

156
src/views/home/expenseAnalysisComponents/operatingLineBarSaleSingle.vue Normal file
View File

@@ -0,0 +1,156 @@
<template>
<div ref="cockpitEffChip" id="coreLineChart" style="width: 100%; height: 200px;"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
components: {},
data() {
return {
myChart: null // 存储图表实例，避免重复创建
};
},
props: {
// 明确接收的props结构，增强可读性
chartData: {
type: Object,
default: () => ({
}),
// 校验数据格式
// validator: (value) => {
// return Array.isArray(value.series) && Array.isArray(value.allPlaceNames);
// }
}
},
mounted() {
this.$nextTick(() => {
this.updateChart();
});
},
// 新增：监听 chartData 变化
watch: {
// 深度监听数据变化，仅更新图表配置（不销毁实例）
chartData: {
handler() {
console.log(this.chartData,'chartData');
this.updateChart();
},
deep: true,
immediate: true // 初始化时立即执行
}
},
methods: {
updateChart() {
const chartDom = this.$refs.cockpitEffChip;
if (!chartDom) {
console.error('图表容器未找到！');
return;
}
if (this.myChart) {
this.myChart.dispose();
}
this.myChart = echarts.init(chartDom);
const { allPlaceNames, series } = this.chartData || {};
console.log('chartData', this.chartData);
// 处理空数据
const xData = allPlaceNames || [];
const chartSeries = series || []; // 父组件传递的 series
console.log('xData', xData);
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;
// }
},
grid: {
top: 40,
bottom: 40,
right: 70,
left: 60,
},
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]
},
data: xData
}
],
yAxis: {
type: 'value',
// name: '万元',
nameTextStyle: {
color: 'rgba(0, 0, 0, 0.45)',
fontSize: 12,
align: 'right'
},
axisLine: {
show: true, // 显示Y轴轴线（关键）
lineStyle: {
color: '#E5E6EB', // 轴线颜色（浅灰色，可自定义）
width: 1, // 轴线宽度
type: 'solid' // 实线（可选：dashed虚线、dotted点线）
}
},
scale: true,
splitNumber: 2,
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)' } },
},
series: chartSeries // 直接使用父组件传递的 series
};
option && this.myChart.setOption(option);
// 窗口缩放适配和销毁逻辑保持不变
window.addEventListener('resize', () => {
this.myChart && this.myChart.resize();
});
this.$once('hook:destroyed', () => {
window.removeEventListener('resize', () => {
this.myChart && this.myChart.resize();
});
this.myChart && this.myChart.dispose();
});
}
},
};
</script>

336
src/views/home/expenseAnalysisComponents/operatingLineChart.vue Normal file
View File

@@ -0,0 +1,336 @@
<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;
display: flex;
width: 348px;
background-color: rgba(249, 252, 255, 1);
flex-direction: column;
">
<div style="
font-weight: 400;
font-size: 18px;
color: #000000;
line-height: 18px;
letter-spacing: 1px;
font-style: normal;
padding: 16px 0 0 16px;
">
集团情况
</div>
<operatingTopBar :chartData="chartData" />
</div>
<div class="right" style="
height: 380px;
display: flex;
width: 1220px;
background-color: rgba(249, 252, 255, 1);
">
<!-- <top-item /> -->
<operatingBar :chartData="chartData" @sort-change="sortChange" />
</div>
</div>
</Container>
</div>
</template>
<script>
import Container from "../components/container.vue";
import operatingBar from "./operatingBar.vue";
import operatingTopBar from "./operatingTopBar.vue";
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
},
},
data() {
return {
chartData: null, // 初始化 chartData 为 null
groupData: {}, // 集团数据
factoryData: [] // 工厂数据
};
},
watch: {
monthData: {
handler() {
this.processChartData();
},
immediate: true,
deep: true,
},
},
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) {
// 处理非数字/空值，默认返回 0
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 核心逻辑：≥100 → 1；<100 → 0
return rate >= 100 ? 1 : 0;
},
/**
* 核心处理函数：在所有数据都准备好后，才组装 chartData
*/
processChartData() {
// 1. 处理集团数据 - 提取各字段到对应数组
this.groupData = this.monthData.group || { rate: 0, diff: 0, real: 0, target: 0 };
// 集团各维度数据数组（单条数据，对应凯盛新能）
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])];
console.log('集团数据数组：', {
groupTarget,
groupDiff,
groupReal,
groupRate,
groupFlag,
rawGroupData: this.groupData
});
// 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 = factoryRate.map(rate => this.getRateFlag(rate));
// 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
}
};
console.log('最终处理后的图表数据：', this.chartData);
},
},
};
</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 {
width: 21px;
height: 23px;
background: rgba(0, 106, 205, 0.22);
backdrop-filter: blur(1.5px);
font-family: PingFangSC, PingFang SC;
font-weight: 400;
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;
color: #ffffff;
line-height: 18px;
letter-spacing: 1px;
text-align: left;
font-style: normal;
}
.eqStatus {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 16px;
color: #ffffff;
line-height: 18px;
text-align: right;
font-style: normal;
}
.splitLine {
width: 1px;
height: 14px;
border: 1px solid #adadad;
margin: 0 8px;
/* 优化分割线间距 */
}
.yield {
height: 18px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 16px;
color: #00ffff;
line-height: 18px;
text-align: right;
font-style: normal;
}
.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;
}
.proBarLine {
width: 100%;
height: 100%;
background: linear-gradient(65deg, rgba(82, 82, 82, 0) 0%, #acacac 100%);
opacity: 0.2;
}
.proBarLineTop {
position: absolute;
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%);
border-radius: 5px;
transition: width 0.3s ease;
/* 进度变化时添加过渡动画，更流畅 */
}
/* 图表相关样式保留 */
.chartImgBottom {
position: absolute;
bottom: 45px;
left: 58px;
}
.line {
display: inline-block;
position: absolute;
left: 57px;
bottom: 42px;
width: 1px;
height: 20px;
background-color: #00e8ff;
}
</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>

330
src/views/home/expenseAnalysisComponents/operatingLineChartCumulative.vue Normal file
View File

@@ -0,0 +1,330 @@
<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="left" style="
height: 380px;
display: flex;
width: 348px;
background-color: rgba(249, 252, 255, 1);
flex-direction: column;
">
<div style="
font-weight: 400;
font-size: 18px;
color: #000000;
line-height: 18px;
letter-spacing: 1px;
font-style: normal;
padding: 16px 0 0 16px;
">
集团情况
</div>
<operatingTopBar :chartData="chartData" />
</div>
<div class="right" style="
height: 380px;
display: flex;
width: 1220px;
background-color: rgba(249, 252, 255, 1);
">
<!-- <top-item /> -->
<operatingBar @sort-change="sortChange" :chartData="chartData" />
</div>
</div>
</Container>
</div>
</template>
<script>
import Container from "../components/container.vue";
import operatingBar from "./operatingBar.vue";
import operatingTopBar from "./operatingTopBar.vue";
export default {
name: "ProductionStatus",
components: { Container, operatingBar, operatingTopBar },
props: {
salesTrendMap: {
type: Object,
default: () => ({}),
},
ytdData: {
type: Object,
default: () => ({}),
},
},
data() {
return {
chartData: null, // 初始化 chartData 为 null
groupData: {}, // 集团数据
factoryData: [] // 工厂数据
};
},
watch: {
ytdData: {
handler() {
this.processChartData();
},
immediate: true,
deep: true,
},
},
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) {
// 处理非数字/空值，默认返回 0
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 核心逻辑：≥100 → 1；<100 → 0
return rate >= 100 ? 1 : 0;
},
/**
* 核心处理函数：在所有数据都准备好后，才组装 chartData
*/
processChartData() {
// 1. 处理集团数据 - 提取各字段到对应数组
this.groupData = this.ytdData.group || { rate: 0, diff: 0, real: 0, target: 0 };
// 集团各维度数据数组（单条数据，对应凯盛新能）
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])];
console.log('集团数据数组：', {
groupTarget,
groupDiff,
groupReal,
groupRate,
groupFlag,
rawGroupData: this.groupData
});
// 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 = factoryRate.map(rate => this.getRateFlag(rate));
// 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
}
};
console.log('最终处理后的图表数据：', this.chartData);
},
},
};
</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 {
width: 21px;
height: 23px;
background: rgba(0, 106, 205, 0.22);
backdrop-filter: blur(1.5px);
font-family: PingFangSC, PingFang SC;
font-weight: 400;
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;
color: #ffffff;
line-height: 18px;
letter-spacing: 1px;
text-align: left;
font-style: normal;
}
.eqStatus {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 16px;
color: #ffffff;
line-height: 18px;
text-align: right;
font-style: normal;
}
.splitLine {
width: 1px;
height: 14px;
border: 1px solid #adadad;
margin: 0 8px;
/* 优化分割线间距 */
}
.yield {
height: 18px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 16px;
color: #00ffff;
line-height: 18px;
text-align: right;
font-style: normal;
}
.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;
}
.proBarLine {
width: 100%;
height: 100%;
background: linear-gradient(65deg, rgba(82, 82, 82, 0) 0%, #acacac 100%);
opacity: 0.2;
}
.proBarLineTop {
position: absolute;
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%);
border-radius: 5px;
transition: width 0.3s ease;
/* 进度变化时添加过渡动画，更流畅 */
}
/* 图表相关样式保留 */
.chartImgBottom {
position: absolute;
bottom: 45px;
left: 58px;
}
.line {
display: inline-block;
position: absolute;
left: 57px;
bottom: 42px;
width: 1px;
height: 20px;
background-color: #00e8ff;
}
</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>

341
src/views/home/expenseAnalysisComponents/operatingSingleBar.vue Normal file
View File

@@ -0,0 +1,341 @@
<template>
<div class="lineBottom" style="height: 180px; width: 100%">
<operatingLineBarSaleSingle :refName="'totalOperating'" :chartData="chartD" style="height: 99%; width: 100%" />
</div>
</template>
<script>
import operatingLineBarSaleSingle from './operatingLineBarSaleSingle.vue';
import * as echarts from 'echarts';
export default {
name: "Container",
components: { operatingLineBarSaleSingle },
props: ["detailData"],
data() {
return {
};
},
computed: {
locations() {
return ['预算', '实际'];
},
chartD() {
// 背景图片路径（若不需要可注释）
// const bgImageUrl = require('@/assets/img/labelBg.png');
const rate = this.detailData?.rate || 0
const diff = this.detailData?.diff || 0
console.log('diff', diff);
const seriesData = [
{
value: this.detailData?.budget || 0,
flag: 1, // 实际项：达标（绿色）
label: {
show: true,
position: 'top',
offset: [0, 0],
// 固定label尺寸：68px×20px
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: function (params) {
return `{value|完成率}{rate|${rate}%}`;
},
// 核心样式：匹配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 // 垂直居中
},
rate: {
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#0B58FF', // 数字蓝色
fontSize: 11,
lineHeight: 20
}
}
},
itemStyle: {
borderRadius: [4, 4, 0, 0],
borderWidth: 0,
},
},
{
value: this.detailData?.real || 0,
flag: this.detailData?.flag, // 实际项：达标（绿色）
label: {
show: true,
position: 'top',
offset: [0, 0],
// 固定label尺寸：68px×20px
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: function (params) {
// 假设 params.data 是完成率数值（如 139）
// // 2. 模板字符串拼接富文本标签 + 动态值
return `{rate|${diff}}{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: {
borderRadius: [4, 4, 0, 0],
borderWidth: 0
},
}
];
const data = {
allPlaceNames: ['预算', '实际'],
series: [
{
type: 'bar',
barWidth: 24,
barCategoryGap: '50%',
data: seriesData,
itemStyle: {
color: (params) => {
const currentFlag = params.data.flag || 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)' }
]
};
}
},
},
],
};
console.log('data', data);
return data;
}
},
methods: {},
};
</script>
<style scoped lang="scss">
.coreBar {
display: flex;
flex-direction: column;
width: 100%;
padding: 12px;
.barTop {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 16px;
width: 100%;
.title {
height: 18px;
font-family: PingFangSC, PingFangSC;
font-weight: 400;
font-size: 18px;
color: #000000;
line-height: 18px;
letter-spacing: 1px;
text-align: left;
font-style: normal;
white-space: nowrap;
}
.right-container {
display: flex;
align-items: center;
gap: 24px;
margin-right: 46px;
}
.legend {
display: flex;
gap: 16px;
align-items: center;
margin: 0;
}
.legend-item {
display: flex;
align-items: center;
gap: 8px;
font-family: PingFangSC;
font-weight: 400;
font-size: 14px;
color: rgba(0, 0, 0, 0.8);
text-align: left;
font-style: normal;
white-space: nowrap;
}
.legend-icon {
display: inline-block;
}
.legend-icon.line {
width: 12px;
height: 2px;
position: relative;
&::before {
position: absolute;
content: "";
top: -2px;
left: 3px;
width: 6px;
border-radius: 50%;
height: 6px;
background-color: rgba(40, 138, 255, 1);
}
}
.legend-icon.square {
width: 8px;
height: 8px;
}
.yield {
background: rgba(40, 138, 255, 1);
}
.target {
background: #2889FF;
}
.achieved {
background: rgba(40, 203, 151, 1);
}
.unachieved {
background: rgba(255, 132, 0, 1);
}
.button-group {
display: flex;
position: relative;
gap: 2px;
width: 283px;
align-items: center;
height: 24px;
background: #ecf4fe;
border-radius: 12px;
margin: 0;
.item-button {
cursor: pointer;
width: 142px;
height: 24px;
font-family: PingFangSC;
font-weight: 400;
font-size: 12px;
color: #0b58ff;
line-height: 24px;
text-align: center;
font-style: normal;
letter-spacing: 8px;
padding-left: 8px;
}
.item-button.active {
width: 142px;
height: 24px;
background: #3071ff;
border-radius: 12px;
color: #ffffff;
font-weight: 500;
}
}
}
}
</style>

475
src/views/home/expenseAnalysisComponents/operatingTopBar.vue Normal file
View File

@@ -0,0 +1,475 @@
<template>
<div class="coreBar">
<div class="lineBottom" style="height: 320px; width: 100%">
<operatingLineBar :chartData="chartD" style="height: 99%; width: 100%" />
</div>
</div>
</template>
<script>
import operatingLineBar from './operatingLineBarSaleGroup.vue';
import * as echarts from 'echarts';
export default {
name: "Container",
components: { operatingLineBar },
props: ["chartData"],
data() {
return {
activeButton: 0,
};
},
computed: {
currentDataSource() {
console.log('yyyy', this.chartData);
return this.chartData.group
},
locations() {
console.log('this.chartData', this.chartData);
return this.chartData.group.locations
},
// 根据按钮切换生成对应的 chartData
chartD() {
// 销量场景数据
const data = this.currentDataSource;
const diff = this.currentDataSource.diff[0]
const rate = this.currentDataSource.rate[0]
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轴（万元）
label: {
show: true,
position: 'top',
offset: [-30, 0],
// 固定label尺寸：68px×20px
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: (params) => {
// const { rate = 0, diff = 0 } = params.data || {};
return `{value|完成率}{rate|${rate}%}`;
},
// formatter: `{value|完成率}{rate|${rate}%}`,
// 核心样式：匹配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 // 垂直居中
},
rate: {
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#0B58FF', // 数字蓝色
fontSize: 11,
lineHeight: 20
}
}
},
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,
label: {
show: true,
position: 'top',
offset: [30, 0],
// 固定label尺寸：68px×20px
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: (params) => {
// const { rate = 0, diff = 0 } = params.data || {};
return `{rate|${diff}}{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 // 垂直居中
},
rate: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
fontSize: 11,
lineHeight: 20
}
}
},
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',
yAxisIndex: 1,
lineStyle: { color: 'rgba(40, 138, 255, .5)', width: 2 },
itemStyle: {
color: 'rgba(40, 138, 255, 1)',
borderColor: 'rgba(40, 138, 255, 1)',
borderWidth: 2,
radius: 4
},
areaStyle: {
opacity: 0.2,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(40, 138, 255, .9)' },
{ offset: 1, color: 'rgba(40, 138, 255, 0)' }
])
},
data: [106.7, 96.9, 106.5, 106.1, 93.8, 105.9], // 毛利率完成率（%）
symbol: 'circle',
symbolSize: 6
},
// 2. 目标（柱状图）
{
name: '目标',
type: 'bar',
yAxisIndex: 0,
barWidth: 14,
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(130, 204, 255, 1)' },
{ offset: 1, color: 'rgba(75, 157, 255, 1)' }
]
},
borderRadius: [4, 4, 0, 0],
borderWidth: 0
},
data: [30, 32, 31, 33, 32, 34] // 目标毛利率（万元）
},
// 3. 实际（柱状图）
{
name: '实际',
type: 'bar',
yAxisIndex: 0,
barWidth: 14,
itemStyle: {
color: (params) => {
const safeFlag = [1, 0, 1, 1, 0, 1]; // 达标状态
const currentFlag = safeFlag[params.dataIndex] || 0;
return currentFlag === 1
? {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(174, 239, 224, 1)' },
{ offset: 1, color: 'rgba(118, 218, 190, 1)' }
]
}
: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(253, 209, 129, 1)' },
{ offset: 1, color: 'rgba(249, 164, 74, 1)' }
]
};
},
borderRadius: [4, 4, 0, 0],
borderWidth: 0
},
data: [32, 31, 33, 35, 30, 36] // 实际毛利率（万元）
}
]
};
// 根据按钮状态返回对应数据
return this.activeButton === 0 ? salesData : grossProfitData;
}
},
methods: {},
};
</script>
<style scoped lang="scss">
.coreBar {
display: flex;
flex-direction: column;
width: 100%;
padding: 12px;
.barTop {
display: flex;
justify-content: flex-end; // 标题左、右侧容器右，整体两端对齐
align-items: center; // 垂直居中，避免上下错位
gap: 16px; // 标题与右侧容器的最小间距，防止拥挤
width: 100%; // 确保占满父容器，实现两端对齐
.title {
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;
// 标题固定在左侧，不挤压右侧空间
white-space: nowrap;
}
// 1. 右侧容器：包裹图例和按钮组，整体靠右
.right-container {
display: flex;
align-items: center; // 图例和按钮组垂直居中
gap: 24px; // 图例与按钮组的间距，避免贴紧
margin-right: 46px; // 右侧整体留边，与原按钮组边距一致
}
// 2. 图例：在右侧容器内横向排列
.legend {
display: flex;
gap: 16px; // 图例项之间间距，避免重叠
align-items: center;
// 移除原margin-left，避免位置偏移
margin: 0;
}
.legend-item {
display: flex;
align-items: center;
gap: 8px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 14px;
color: rgba(0, 0, 0, 0.8);
text-align: left;
font-style: normal;
white-space: nowrap; // 防止图例文字换行
}
.legend-icon {
display: inline-block;
}
.legend-icon.line {
width: 12px;
height: 2px;
position: relative;
&::before {
position: absolute;
content: "";
top: -2px;
left: 3px;
width: 6px;
border-radius: 50%;
height: 6px;
background-color: rgba(40, 138, 255, 1);
}
}
.legend-icon.square {
width: 8px;
height: 8px;
}
// 图例颜色
.yield {
background: rgba(40, 138, 255, 1);
}
.target {
background: #2889FF;
}
.achieved {
background: rgba(40, 203, 151, 1);
}
.unachieved {
background: rgba(255, 132, 0, 1);
}
// 3. 按钮组：在右侧容器内，保留原有样式
.button-group {
display: flex;
position: relative;
gap: 2px;
width: 283px;
align-items: center;
height: 24px;
background: #ecf4fe;
border-radius: 12px;
// 移除原margin-right，由右侧容器统一控制
margin: 0;
.item-button {
cursor: pointer;
width: 142px;
height: 24px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 12px;
color: #0b58ff;
line-height: 24px;
text-align: center;
font-style: normal;
letter-spacing: 8px; // 确保文字间距生效
padding-left: 8px; // 抵消letter-spacing导致的文字左偏
}
.item-button.active {
width: 142px;
height: 24px;
background: #3071ff;
border-radius: 12px;
color: #ffffff;
font-weight: 500;
}
}
}
}
</style>

208
src/views/home/expenseAnalysisComponents/totalOverview.vue Normal file
View File

@@ -0,0 +1,208 @@
<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">
累计完成率
</div>
<div class="number">
<div class="yield">
{{ ytdData?.rate || 0 }}%
</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="">
</div>
</div>
<div class="electricityGauge">
<electricityGauge :id="'totalG'" :detailData="ytdData" id="totalGauge"></electricityGauge>
</div>
</div>
<div class="line" style="padding: 0px;">
<verticalBarChart :refName="'totalVerticalBarChart'" :detailData="ytdData">
</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: {
ytdData: { // 接收父组件传递的设备数据数组
type: Object,
default: () => { } // 默认空数组，避免报错
},
title: { // 接收父组件传递的设备数据数组
type: String,
default: () => '' // 默认空数组，避免报错
},
month: { // 接收父组件传递的设备数据数组
type: String,
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())
},
methods: {
}
}
</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: 264px;
height: 205px;
background: #F9FCFF;
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;
}
.number {
display: flex;
align-items: center;
gap: 8px;
// 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;
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;
}
}
.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);
}
.production-status-chart-tooltip * {
color: #fff !important;
}
</style> -->

308
src/views/home/expenseAnalysisComponents/verticalBarChart.vue Normal file
View File

@@ -0,0 +1,308 @@
<template>
<div :ref="refName" id="coreLineChart" style="width: 100%; height: 210px;"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
components: {},
data() {
return {
myChart: null // 存储图表实例，避免重复创建
};
},
props: {
// 明确接收的props结构，增强可读性
refName: {
type: String,
default: () => 'verticalBarChart',
},
detailData: {
type: Object,
default: () => ({
}),
}
},
mounted() {
this.$nextTick(() => {
this.updateChart();
});
},
// 新增：监听 chartData 变化
watch: {
// 深度监听数据变化，仅更新图表配置（不销毁实例）
detailData: {
handler() {
console.log(this.chartData, 'chartData');
this.updateChart();
},
deep: true,
immediate: true // 初始化时立即执行
}
},
methods: {
updateChart() {
const chartDom = this.$refs[this.refName];
if (!chartDom) {
console.error('图表容器未找到！');
return;
}
if (this.myChart) {
this.myChart.dispose();
}
this.myChart = echarts.init(chartDom);
const diff = this.detailData.diff || 0
const rate = this.detailData.rate || 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;
// }
},
grid: {
top: 10,
bottom: 30,
right: 50,
left: 30,
containLabel: true,
show: false // 隐藏grid背景，避免干扰
},
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的数据自动生成
},
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点线）
}
},
axisTick: { show: false },
// padding: [300, 100, 100, 100],
data: ['实际', '预算'] // y轴分类：实际、预算
},
series: [
{
// name: '预算',
type: 'bar',
barWidth: 24,
// barCategoryGap: '50', // 柱子之间的间距（相对于柱子宽度）
// 数据长度与yAxis的分类数量匹配（实际、预算各一个值）
data: [{
value: this.detailData.real,
label: {
show: true,
position: 'right',
offset: [-60, 25],
// 固定label尺寸：68px×20px
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: function (params) {
// 假设 params.data 是完成率数值（如 139）
// // 2. 模板字符串拼接富文本标签 + 动态值
return `{rate|${diff}}{text|差值}`;
},
// formatter: '',
// 核心样式：匹配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 // 垂直居中
},
rate: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
fontSize: 11,
lineHeight: 20
}
}
},
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: this.detailData.target,
label: {
show: true,
position: 'right',
offset: [0, 25],
// 固定label尺寸：68px×20px
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: function (params) {
return `{value|完成率}{rate|${rate}%}`;
},
// 核心样式：匹配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 // 垂直居中
},
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
},
},],
},
]
};
option && this.myChart.setOption(option);
// 窗口缩放适配和销毁逻辑保持不变
window.addEventListener('resize', () => {
this.myChart && this.myChart.resize();
});
this.$once('hook:destroyed', () => {
window.removeEventListener('resize', () => {
this.myChart && this.myChart.resize();
});
this.myChart && this.myChart.dispose();
});
}
},
};
</script>

199
src/views/home/expenseAnalysisComponents/yearRelatedMetrics.vue Normal file
View File

@@ -0,0 +1,199 @@
<template>
<div style="flex: 1">
<Container :name="title" icon="cockpitItemIcon" size="operatingRevenueBg" topSize="middle">
<div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%;">
<div class="topItem-container" style="display: flex; gap: 8px; width: 100%;">
<!-- 管理费用模块 -->
<div class="dashboard">
<div class="title">
管理费用·单位/万元
</div>
<div class="chart-wrap">
<operatingSingleBar :detailData="manageCostData"></operatingSingleBar>
</div>
</div>
<!-- 销售费用模块 -->
<div class="dashboard">
<div class="title">
销售费用·单位/万元
</div>
<div class="chart-wrap">
<operatingSingleBar :detailData="saleCostData"></operatingSingleBar>
</div>
</div>
<!-- 财务费用模块 -->
<div class="dashboard">
<div class="title">
财务费用·单位/万元
</div>
<div class="chart-wrap">
<operatingSingleBar :detailData="financeCostData"></operatingSingleBar>
</div>
</div>
</div>
</div>
</Container>
</div>
</template>
<script>
import Container from './container.vue'
import operatingSingleBar from './operatingSingleBar.vue'
export default {
name: 'CostAnalysis', // 语义化组件名
components: { Container, operatingSingleBar },
props: {
// 费用数据：数组包含管理/销售/财务费用三个对象
ytdAnalysis: {
type: Array,
default: () => [
{ title: "管理费用", budget: 0, real: 0, rate: 0, diff: 0 },
{ title: "销售费用", budget: 0, real: 0, rate: 0, diff: 0 },
{ title: "财务费用", budget: 0, real: 0, rate: 0, diff: 0 }
]
},
title: {
type: String,
default: '费用分析'
},
month: {
type: String,
default: ''
},
},
data() {
return {
// 初始化费用数据（包含flag字段）
manageCostData: { title: "管理费用", budget: 0, real: 0, rate: 0, diff: 0, flag: 0 },
saleCostData: { title: "销售费用", budget: 0, real: 0, rate: 0, diff: 0, flag: 0 },
financeCostData: { title: "财务费用", budget: 0, real: 0, rate: 0, diff: 0, flag: 0 }
}
},
watch: {
ytdAnalysis: {
handler(newVal) {
this.updateCostData(newVal)
},
deep: true,
immediate: true // 初始化立即执行
}
},
mounted() {
this.updateCostData(this.ytdAnalysis)
},
methods: {
// 达标标识判断（≥100返回1，<100返回0）
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return rate >= 100 ? 1 : 0;
},
// 处理费用数据
updateCostData(data) {
// 数据兜底：确保是数组且长度≥3
const validData = Array.isArray(data) && data.length >= 3
? data
: this.$props.ytdAnalysis;
// 提取三个费用项数据（兜底处理）
const manageItem = validData[0] || { title: "管理费用", budget: 0, real: 0, rate: 0, diff: 0 };
const saleItem = validData[1] || { title: "销售费用", budget: 0, real: 0, rate: 0, diff: 0 };
const financeItem = validData[2] || { title: "财务费用", budget: 0, real: 0, rate: 0, diff: 0 };
// 整合flag字段
this.manageCostData = {
...manageItem,
flag: this.getRateFlag(manageItem.rate)
};
this.saleCostData = {
...saleItem,
flag: this.getRateFlag(saleItem.rate)
};
this.financeCostData = {
...financeItem,
flag: this.getRateFlag(financeItem.rate)
};
// 调试日志
console.log('管理费用数据：', this.manageCostData);
console.log('销售费用数据：', this.saleCostData);
console.log('财务费用数据：', this.financeCostData);
}
}
}
</script>
<style lang='scss' scoped>
.scroll-container {
max-height: 210px;
overflow-y: auto;
overflow-x: hidden;
padding: 10px 0;
&::-webkit-scrollbar {
display: none;
}
scrollbar-width: none;
-ms-overflow-style: none;
}
.topItem-container {
display: flex;
justify-content: space-between; // 三列均匀分布
}
.dashboard {
flex: 1; // 三列等分宽度
min-width: 240px; // 最小宽度，防止挤压
max-width: 300px; // 最大宽度，限制过宽
height: 205px;
background: #F9FCFF;
padding: 16px 16px 0;
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;
height: 18px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 18px;
color: #000000;
line-height: 18px;
letter-spacing: 1px;
text-align: left;
}
}
</style>