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

修改

Browse Source
This commit is contained in:
‘937886381’
2026-01-07 16:47:49 +08:00
parent 51e66cf6e1
commit b76f3bfd37
164 changed files with 4179 additions and 2297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/icons/svg/closeSider.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

12
src/assets/icons/svg/openSider.svg Normal file
View File

@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>展开备份</title>
<g id="12-月修改-2-版" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="01-运营驾驶舱展开" transform="translate(-1818.000000, -12.000000)" fill="#0B58FF">
<g id="展开备份" transform="translate(1818.000000, 12.000000)">
<rect id="矩形" stroke="#0B58FF" opacity="0" x="0.5" y="0.5" width="31" height="31"></rect>
<path d="M26.9054416,1.26315789 L27.1627614,1.2715785 C27.589262,1.29963047 28.0033877,1.39768715 28.3969525,1.56449606 C28.853625,1.75530116 29.2618455,2.03033772 29.6157539,2.38424612 C29.967102,2.73559426 30.2434779,3.1465945 30.4352441,3.6024321 C30.6356746,4.07532525 30.7368421,4.57721075 30.7368421,5.09455843 L30.7368421,26.9054416 L30.7284215,27.1627614 C30.7003695,27.589262 30.6023129,28.0033877 30.4355039,28.3969525 C30.2446988,28.853625 29.9696623,29.2618455 29.6157539,29.6157539 C29.2644057,29.967102 28.8534055,30.2434779 28.3975679,30.4352441 C27.9246748,30.6356746 27.4227892,30.7368421 26.9054416,30.7368421 L5.09455843,30.7368421 L4.83723859,30.7284215 C4.41073802,30.7003695 3.99661229,30.6023129 3.60304751,30.4355039 C3.14637497,30.2446988 2.73815452,29.9696623 2.38424612,29.6157539 C2.03289798,29.2644057 1.75652209,28.8534055 1.56475593,28.3975679 C1.36432537,27.9246748 1.26315789,27.4227892 1.26315789,26.9054416 L1.26315789,5.09455843 L1.2715785,4.83723859 C1.29963047,4.41073802 1.39768715,3.99661229 1.56449606,3.60304751 C1.75530116,3.14637497 2.03033772,2.73815452 2.38424612,2.38424612 C2.73559426,2.03289798 3.1465945,1.75652209 3.6024321,1.56475593 C4.07532525,1.36432537 4.57721075,1.26315789 5.09455843,1.26315789 L26.9054416,1.26315789 Z M26.9054416,3.17216771 L5.09455843,3.17216771 L4.94438644,3.17795455 C3.95326514,3.25463661 3.17216771,4.08386243 3.17216771,5.09455843 L3.17216771,26.9054416 L3.17795455,27.0556136 C3.25463661,28.0467349 4.08386243,28.8278323 5.09455843,28.8278323 L26.9054416,28.8278323 L27.0556136,28.8220454 C28.0467349,28.7453634 28.8278323,27.9161376 28.8278323,26.9054416 L28.8278323,5.09455843 L28.8220454,4.94438644 C28.7453634,3.95326514 27.9161376,3.17216771 26.9054416,3.17216771 Z M29.2015182,9.76714413 L29.2015182,11.8615014 L2.12281432,11.8615014 L2.12281432,9.76714413 L29.2015182,9.76714413 Z" id="形状结合" fill-rule="nonzero" opacity="0.79078311"></path>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

175
src/views/home/components/Header.vue
View File

@@ -6,16 +6,12 @@
<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" @click="changeHomeSider">
<svg-icon style="color: #0B58FF;" v-if="openSider" icon-class="closeSider" />
<svg-icon style="color: #0B58FF;" v-else icon-class="openSider" />
</el-button>
<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" />
@@ -24,16 +20,15 @@
<!-- 时间选择区域：日/月/年按钮 + 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 :clearable="false" v-model="date" type="month" placeholder="请选择月份" class="custom-date-picker"
style="width: 132px;height: 29px;" @change="emitTimeRange" />
value-format="timestamp"
style="width: 132px;height: 29px;"
@change="emitTimeRange"
/>
</div>
</div>
</header>
@@ -45,19 +40,19 @@ export default {
name: 'Header',
props: {
isFullScreen: { type: Boolean, default: false },
openSider: { type: Boolean, default: false },
topTitle: { type: String, default: '' },
dateData: {
type: Object,
default: {} // 默认值设为350px
default: () => ({})
},
},
data() {
return {
currentTime: '',
timeTimer: null,
date: undefined,
// activeIndex: -1,
activeTime: 1, // 0=日，1=月，2=年（默认选中“日”）
date: Date.now(), // 使用时间戳格式
activeTime: 1, // 0=日，1=月，2=年（默认选中"月"）
pageRoutes: [
{ text: '营业收入', path: '/operatingRevenue/operatingRevenueIndex' },
{ text: '利润分析', path: '/profitAnalysis' },
@@ -65,132 +60,109 @@ export default {
{ 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;
},
changeHomeSider() { this.$emit('siderOpenChange') },
changeFullScreen() { this.$emit('screenfullChange') },
padZero(num) { return num < 10 ? '0' + num : num },
/**
* 核心方法1：根据维度计算时间区间（首次进入时基于赋值的当月日期，计算“当月第一天0点→次月第一天0点”）
* @returns {Object} 包含 start（开始时间）、end（结束时间）、dimension（维度）的区间对象
*/
* 计算时间区间
* @returns {Object} 包含 startTime、endTime、mode、targetMonth 的区间对象
*/
calculateTimeRange() {
// 固定为月维度
const mode = 2;
// 初始化时间戳为0（兜底值）
let startTime = 0;
let endTime = 0;
// 存储目标月份（仅数字，如10、12）
// 存储目标月份
let targetMonth = '';
// 默认当前月份
const defaultMoment = moment();
try {
// 仅处理月份维度：固定使用YYYY-MM格式解析日期
// 使用 this.date（时间戳）创建 moment 对象
let targetMoment = this.date
? moment(this.date, 'YYYY-MM') // 解析传入的月份（如"2025-10"）
: defaultMoment;
? moment(this.date) // 解析时间戳
: moment(); // 如果 date 无效，使用当前时间
// 验证日期是否有效，无效则使用当前月份兜底
// 验证日期是否有效
if (!targetMoment.isValid()) {
console.warn('无效的月份格式（请使用YYYY-MM），已使用当前月份:', this.date);
targetMoment = defaultMoment;
console.warn('无效的日期，已使用当前月份:', this.date);
targetMoment = moment();
}
// 仅获取月份（数字格式，如10、12；若要两位格式如01、10，使用'MM'）
targetMonth = targetMoment.format('M'); // 'M'是1-12，'MM'是01-12，可按需选择
// 获取月份（数字格式，1-12）
targetMonth = targetMoment.format('M');
console.log('当前选择的月份:', targetMonth);
// 打印仅含月份的结果
console.log('targetMonth', targetMonth);
// 计算当月第一天00:00:00的时间戳
startTime = targetMoment.startOf('month').valueOf();
// 计算当月最后一天23:59:59的时间戳
endTime = targetMoment.endOf('month').valueOf();
// 计算当月第一天00:00:00（去掉毫秒）的毫秒级时间戳
startTime = targetMoment.startOf('month').millisecond(0).valueOf();
// 计算当月最后一天23:59:59（去掉毫秒）的毫秒级时间戳
endTime = targetMoment.endOf('month').millisecond(0).valueOf();
// 【可选】调试输出：查看时间范围详情
// console.log('月份时间范围：', {
// startTime: moment(startTime).format('YYYY-MM-DD HH:mm:ss'),
// endTime: moment(endTime).format('YYYY-MM-DD HH:mm:ss'),
// startTimeStamp: startTime,
// endTimeStamp: endTime
// });
// 调试输出
console.log('月份时间范围计算结果:', {
startTime: moment(startTime).format('YYYY-MM-DD HH:mm:ss'),
endTime: moment(endTime).format('YYYY-MM-DD HH:mm:ss'),
startTimeStamp: startTime,
endTimeStamp: endTime,
targetMonth: targetMonth
});
} catch (error) {
console.error('计算月份时间范围时出错：', error);
}
// 返回月份相关的所有信息：时间戳、维度、仅月份值
return {
startTime,
endTime,
mode,
targetMonth // 现在仅为月份数字，如"10"
targetMonth
};
},
/**
* 核心方法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);
console.log('触发时间范围变化:', timeRange);
}
},
watch: {
// 维度切换时：清空选择的日期，并传递当前维度的默认区间
// 维度切换时：清空选择的日期
activeTime(newVal, oldVal) {
if (newVal !== oldVal) {
this.date = undefined;
// this.emitTimeRange();
this.date = Date.now(); // 重置为当前时间戳
this.emitTimeRange();
}
},
dateData: {
immediate: true, // 初始化时立即执行
handler(newVal) {
console.log('dateData 变化:', newVal);
if (newVal && (newVal.startTime || newVal.endTime)) {
// 优先使用 startTime 转换为月份格式
// 优先使用 startTime
const timeStamp = newVal.startTime || newVal.endTime;
if (timeStamp !== 0) {
const monthStr = moment(timeStamp).format('YYYY-MM');
this.date = monthStr; // 赋值给选择器
if (timeStamp && timeStamp !== 0) {
console.log('设置日期选择器时间为:', timeStamp);
this.date = timeStamp; // 直接使用时间戳
}
}
}
}
},
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());
},
// 初始化默认日期为当前月份
console.log('初始化日期选择器，当前时间戳:', this.date);
this.$nextTick(() => {
this.emitTimeRange();
});
}
}
</script>
@@ -211,7 +183,6 @@ export default {
background-position: 0 0;
box-sizing: border-box;
position: relative;
/* 确保timeType绝对定位生效 */
.left-content {
margin-top: 11px;
@@ -278,12 +249,10 @@ export default {
position: absolute;
display: flex;
align-items: center;
/* 垂直居中，避免元素高低错位 */
top: 42px;
right:10px;
right: 10px;
margin-top: 18px;
gap: 0;
/* 清除间隙，让按钮与选择器紧密连接 */
}
.timeType .item {
@@ -300,7 +269,6 @@ export default {
text-align: center;
cursor: pointer;
overflow: hidden;
/* 选中按钮与未选中按钮倾斜角度统一，避免切换时跳动 */
}
.timeType .item .item-text {
@@ -313,13 +281,11 @@ export default {
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 {
@@ -335,7 +301,6 @@ export default {
height: 28px;
background: rgba(236, 244, 254, 1);
transform: skew(-25deg);
/* 与按钮倾斜角度统一（原30deg改为25deg，避免视觉错位） */
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 14px;
@@ -345,19 +310,17 @@ export default {
overflow: hidden;
}
/* 补充：label文字抵消倾斜（原代码遗漏，导致文字倾斜） */
.dateP .label-text {
display: inline-block;
transform: skew(25deg);
/* 与label倾斜角度相反，确保文字正立 */
}
.right-content {
display: flex;
flex-direction: column;
margin-top: 12px;
margin-bottom: 60px;
margin-right: 16px;
gap: 20px;
justify-content: flex-end;
gap: 10px;
}
.current-time {
@@ -371,7 +334,6 @@ export default {
.screen-btn {
width: 26px;
margin-left: 300px;
color: #00fff0;
font-size: 26px;
padding: 0;
@@ -387,20 +349,16 @@ export default {
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;
@@ -408,38 +366,27 @@ export default {
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>

18
src/views/home/components/coresBar.vue
View File

@@ -97,21 +97,11 @@ export default {
overflow: 'break',
formatter: (value) => {
const dateParts = value.split('-'); // ["2025", "07", "01"]
if (dateParts.length < 2) return value; // 处理异常格式
if (dateParts.length < 2) return value;
switch (this.dateData.mode) {
case 1: // 日模式，显示“月-日”
// 确保有日的部分
return dateParts.length >= 3
? `${dateParts[1]}月${dateParts[2]}日`
: `${dateParts[1]}月`; // fallback
case 2: // 月模式，显示“月”
return `${dateParts[1]}月`;
case 3: // 年模式，显示“年”
return `${dateParts[1]}月`;
default: // 默认月模式
return `${dateParts[1]}月`;
}
// 去掉月份前面的0，然后加上"月"
const month = dateParts[1].replace(/^0+/, '');
return `${month}月`;
}
},
data: this.xAxisData

233
src/views/home/components/noRouterHeader.vue
View File

@@ -18,17 +18,12 @@
<!-- 时间选择区域：日/月/年按钮 + 日期选择器 -->
<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="month" placeholder="请选择月份"
class="custom-date-picker" value-format="yyyy-MM-dd" :clearable="false" style="width: 132px;height: 29px;"
@change="emitTimeRange" />
<el-date-picker v-model="date" type="month" placeholder="请选择月份" class="custom-date-picker"
value-format="timestamp" :clearable="false" style="width: 132px;height: 29px;" @change="emitTimeRange" />
</div>
</div>
</header>
@@ -49,76 +44,65 @@ export default {
},
dateData: {
type: Object,
default: {} // 默认值设为350px
default: () => ({})
},
},
data() {
return {
currentTime: '',
timeTimer: null,
date: undefined, // 存储选择的日期（字符串格式：yyyy-MM-dd/yyyy-MM/yyyy）
date: Date.now(), // 使用当前时间戳作为初始值
activeTime: 1, // 默认月维度（0=日，1=月，2=年）
// 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;
// }
},
watch: {
activeTime(newVal, oldVal) {
if (newVal !== oldVal) {
this.date = undefined;
// this.emitTimeRange();
this.date = Date.now();
this.emitTimeRange();
}
},
dateData: {
immediate: true, // 初始化时立即执行
handler(newVal) {
console.log('newVal', newVal);
console.log('dateData 变化:', newVal);
if (newVal && (newVal.startTime || newVal.endTime)) {
// 优先使用 startTime 转换为月份格式
// 优先使用 startTime，如果没有则使用 endTime
const timeStamp = newVal.startTime || newVal.endTime;
if (timeStamp !== 0) {
const monthStr = moment(timeStamp).format('YYYY-MM');
this.date = monthStr; // 赋值给选择器
if (timeStamp && timeStamp !== 0) {
console.log('设置日期选择器时间为:', timeStamp);
this.date = timeStamp; // 直接使用时间戳
}
}
}
}
},
mounted() {
// 初始化默认日期（当前月，格式：yyyy-MM）
// console.log(this.$router);
this.date = moment().format('YYYY-MM');
this.$nextTick(() => this.emitTimeRange());
// 初始化默认日期为当前月份
console.log('初始化日期选择器，当前时间戳:', this.date);
this.$nextTick(() => {
this.emitTimeRange();
});
},
beforeDestroy() {
// 清理定时器
if (this.timeTimer) {
clearInterval(this.timeTimer);
}
},
methods: {
changeFullScreen() {
this.$emit('screenfullChange');
},
handleReturn() {
console.log(this.$router);
this.$router.go(-1);
},
exportPDF() {
this.$emit('exportPDF');
console.log('返回上一页');
if (this.$router) {
this.$router.go(-1);
}
},
/**
* 核心方法：用moment计算时间范围（时间戳格式）
* 日：选择日00:00:00 → 次日00:00:00
* 月：当月1日00:00:00 → 次月1日00:00:00
* 年：当年1月1日00:00:00 → 次年1月1日00:00:00
* 计算时间范围（时间戳格式）
* 固定为月维度：当月1日00:00:00 → 当月最后一天23:59:59
*/
calculateTimeRange() {
// 固定为月维度
@@ -128,99 +112,53 @@ export default {
let endTime = 0;
// 存储目标月份（仅数字，如10、12）
let targetMonth = '';
// 默认当前月份
const defaultMoment = moment();
try {
// 仅处理月份维度：固定使用YYYY-MM格式解析日期
// 使用 this.date（时间戳）创建 moment 对象
let targetMoment = this.date
? moment(this.date, 'YYYY-MM') // 解析传入的月份（如"2025-10"）
: defaultMoment;
? moment(this.date)
: moment(); // 如果 date 无效，使用当前时间
// 验证日期是否有效，无效则使用当前月份兜底
// 验证日期是否有效
if (!targetMoment.isValid()) {
console.warn('无效的月份格式（请使用YYYY-MM），已使用当前月份:', this.date);
targetMoment = defaultMoment;
console.warn('无效的日期，已使用当前月份:', this.date);
targetMoment = moment();
}
// 仅获取月份（数字格式，如10、12；若要两位格式如01、10，使用'MM'）
targetMonth = targetMoment.format('M'); // 'M'是1-12，'MM'是01-12，可按需选择
// 获取月份（数字格式，1-12）
targetMonth = targetMoment.format('M');
console.log('当前选择的月份:', targetMonth);
// 打印仅含月份的结果
console.log('targetMonth', targetMonth);
// 计算当月第一天00:00:00的时间戳
startTime = targetMoment.startOf('month').valueOf();
// 计算当月最后一天23:59:59的时间戳
endTime = targetMoment.endOf('month').valueOf();
// 计算当月第一天00:00:00（去掉毫秒）的毫秒级时间戳
startTime = targetMoment.startOf('month').millisecond(0).valueOf();
// 计算当月最后一天23:59:59（去掉毫秒）的毫秒级时间戳
endTime = targetMoment.endOf('month').millisecond(0).valueOf();
// 【可选】调试输出：查看时间范围详情
// console.log('月份时间范围：', {
// startTime: moment(startTime).format('YYYY-MM-DD HH:mm:ss'),
// endTime: moment(endTime).format('YYYY-MM-DD HH:mm:ss'),
// startTimeStamp: startTime,
// endTimeStamp: endTime
// });
// 调试输出
console.log('月份时间范围计算结果:', {
startTime: moment(startTime).format('YYYY-MM-DD HH:mm:ss'),
endTime: moment(endTime).format('YYYY-MM-DD HH:mm:ss'),
startTimeStamp: startTime,
endTimeStamp: endTime,
targetMonth: targetMonth
});
} catch (error) {
console.error('计算月份时间范围时出错：', error);
}
// 返回月份相关的所有信息：时间戳、维度、仅月份值
// 返回月份相关的所有信息：时间戳、维度、月份值
return {
startTime,
endTime,
mode,
targetMonth // 现在仅为月份数字，如"10"
targetMonth
};
},
// calculateTimeRange() {
// let startTime = 0;
// let endTime = 0;
// const mode = 2; // 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 };
// },
// 传递时间范围给父组件
emitTimeRange() {
const timeRange = this.calculateTimeRange();
console.log('触发时间范围变化:', timeRange);
this.$emit('timeRangeChange', timeRange);
}
}
@@ -258,7 +196,6 @@ export default {
/* 左侧标题区域 */
.left-content {
margin-top: 11px;
// margin-left: 350px;
height: 55px;
display: flex;
align-items: center;
@@ -347,48 +284,36 @@ export default {
}
/* 右侧全屏按钮区域 */
.right-content {
display: flex;
// flex-direction: column;
margin-top: 12px;
margin-right: 10px;
gap: 21px;
}
.right-content {
display: flex;
margin-top: 12px;
margin-right: 10px;
gap: 21px;
}
// .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;
height: 26px;
color: #00fff0;
font-size: 26px;
padding: 0;
}
.screen-btn {
width: 26px;
height: 26px;
color: #00fff0;
font-size: 26px;
padding: 0;
}
.home-btn {
width: 26px;
height: 26px;
color: #00fff0;
font-size: 26px;
padding: 0;
}
.home-btn {
width: 26px;
height: 26px;
// margin-left: 300px;
color: #00fff0;
font-size: 26px;
padding: 0;
}
.return-btn {
width: 26px;
height: 26px;
// margin-left: 300px;
color: #00fff0;
font-size: 26px;
padding: 0;
}
.return-btn {
width: 26px;
height: 26px;
color: #00fff0;
font-size: 26px;
padding: 0;
}
}
/* 日期选择器自定义样式 */

23
src/views/home/components/productBar.vue
View File

@@ -115,27 +115,18 @@ export default {
color: 'rgba(0, 0, 0, 0.45)',
fontSize: 12,
interval: 0,
// 这里可以根据需要调整标签的显示方式
// width: 38,
overflow: 'break',
formatter: (value) => {
const dateParts = value.split('-'); // ["2025", "07", "01"]
if (dateParts.length < 2) return value; // 处理异常格式
if (dateParts.length < 2) return value;
switch (this.dateData.mode) {
case 1: // 日模式，显示“月-日”
// 确保有日的部分
return dateParts.length >= 3
? `${dateParts[1]}月${dateParts[2]}日`
: `${dateParts[1]}月`; // fallback
case 2: // 月模式，显示“月”
return `${dateParts[1]}月`;
case 3: // 年模式，显示“年”
return `${dateParts[0]}年`;
default: // 默认月模式
return `${dateParts[1]}月`;
}
// 去掉月份前面的0，然后加上"月"
const month = dateParts[1].replace(/^0+/, '');
return `${month}月`;
}
},
data: xAxisData // 使用提取出的 X 轴数据
data: xAxisData
}
],
yAxis: {

90
src/views/home/components/purchase-Item.vue
View File

@@ -25,7 +25,7 @@
<!-- 进度条：同步绑定类名 -->
<div class="progress-group">
<div class="progress-container">
<div class="progress-bar" :style="{ width: item.progress + '%' }" :class="{
<div class="progress-bar" :style="{ width: item.progressWidth + '%' }" :class="{
'bar-exceed': item.currentValue >= item.targetValue,
'bar-below': item.currentValue < item.targetValue
}"></div>
@@ -42,7 +42,7 @@
'percent-exceed': item.currentValue >= item.targetValue,
'percent-below': item.currentValue < item.targetValue
}">
{{ item.progress }}%
{{ item.progressDisplay }}
</div>
</div>
</div>
@@ -88,29 +88,101 @@ export default {
}
},
methods: {
// 解析rate字符串，提取百分比数值
parseRateString(rateStr) {
if (!rateStr || typeof rateStr !== 'string') {
return { displayText: '0%', progressValue: 0 };
}
// 尝试匹配百分比数字，如"减亏93%"中的93
const match = rateStr.match(/(\d+(\.\d+)?)%/);
if (match) {
const percentValue = parseFloat(match[1]);
return {
displayText: rateStr, // 保持原字符串显示
progressValue: percentValue // 提取的百分比数值用于进度条
};
}
// 如果没有匹配到百分比，尝试解析纯数字
const numMatch = rateStr.match(/\d+(\.\d+)?/);
if (numMatch) {
const numValue = parseFloat(numMatch[0]);
return {
displayText: rateStr,
progressValue: numValue
};
}
// 默认返回
return {
displayText: '0%',
progressValue: 0
};
},
transformData(rawData) {
// 定义指标映射关系，包括名称、对应的数据键和路由
const Mapping = [
{ key: 'operatingRevenue', name: '营业收入·万元', route: '/operatingRevenue/operatingRevenueIndex' },
{ key: 'operatingIncome', name: '经营性利润·万元', route: '/operatingProfit/operatingProfit' },
{ key: 'totalProfit', name: '利润总额·万元', route: '/totalProfit/totalProfit' },
{ key: 'grossMargin', name: '毛利率·%', route: '/grossMargin/grossMargin' }
{
key: 'operatingRevenue',
name: '营业收入·万元',
route: '/operatingRevenue/operatingRevenueIndex',
isPercentage: true // 需要加%符号
},
{
key: 'operatingIncome',
name: '经营性利润·万元',
route: '/operatingProfit/operatingProfit',
isPercentage: false // 不需要加%符号，使用原始rate字符串
},
{
key: 'totalProfit',
name: '利润总额·万元',
route: '/totalProfit/totalProfit',
isPercentage: false // 不需要加%符号，使用原始rate字符串
},
{
key: 'grossMargin',
name: '毛利率·%',
route: '/grossMargin/grossMargin',
isPercentage: true // 需要加%符号
}
];
// 遍历映射关系，转换数据
return Mapping.map(mappingItem => {
// 关键修复3：兜底更严谨，避免rawData[mappingItem.key]不存在导致报错
const data = rawData[mappingItem.key] || { rate: 0, real: 0, target: 0 };
const data = rawData[mappingItem.key] || { rate: '0%', real: 0, target: 0 };
// 额外兜底：避免data中的属性为undefined
const target = data.target || 0;
const real = data.real || 0;
const rate = data.rate || 0;
const rate = data.rate || '0%';
// 解析rate字符串
const parsedRate = this.parseRateString(rate);
// 进度条宽度：限制在0-100之间
const progressWidth = Math.min(Math.max(parsedRate.progressValue, 0), 100);
// 显示文本处理
let progressDisplay;
if (mappingItem.isPercentage) {
// 对于需要加%的指标，确保有%符号
progressDisplay = parsedRate.displayText.includes('%')
? parsedRate.displayText
: `${parsedRate.displayText}%`;
} else {
// 对于经营性利润和利润总额，直接使用原始rate字符串
progressDisplay = parsedRate.displayText;
}
return {
name: mappingItem.name,
targetValue: target,
currentValue: real,
progress: Math.round(rate), // 将小数率转换为百分比并四舍五入
progressWidth: progressWidth, // 用于进度条宽度
progressDisplay: progressDisplay, // 用于显示文本
route: mappingItem.route
};
});

18
src/views/home/expenseAnalysisComponents/dataTrend.vue
View File

@@ -98,11 +98,11 @@ export default {
const diff = Number(item.diff) || 0;
// 计算达标标识（≥100 → 1，<100 → 0）
const flag = this.getRateFlag(rate);
const flag = this.getRateFlag(rate, real, budget);
// 填充数组
months.push(month);
rates.push(Math.round(rate * 100)); // 转为百分比并取整
rates.push(rate); // 转为百分比并取整
reals.push(real);
budgets.push(budget);
diffs.push(diff);
@@ -127,10 +127,18 @@ export default {
* @param {Number} rate - 完成率（原始值，如1.2 → 120%）
* @returns {Number} 1: 达标（≥100%），0: 未达标（<100%）
*/
getRateFlag(rate) {
getRateFlag(rate, real, target) {
// 先处理无效值的情况
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
// 实际值和目标值都为0时，算作达标
if (real === 0 && target === 0 && rate === 0) {
return 1; // 达标
}
// 其他情况：rate >= 100 或 rate === 0 时达标
return (rate >= 100) ? 1 : 0;
}
},
};
</script>

27
src/views/home/expenseAnalysisComponents/dataTrendBar.vue
View File

@@ -155,8 +155,20 @@ export default {
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: function (params) {
const diff = data.diffs || [];
const flags = data.flags || [];
const currentDiff = diff[params.dataIndex] || 0;
return `{rate|${currentDiff}}{text|差值}`;
const currentFlag = flags[params.dataIndex] || 0;
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
@@ -194,11 +206,20 @@ export default {
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}

23
src/views/home/expenseAnalysisComponents/monthlyRelatedMetrics.vue
View File

@@ -84,10 +84,18 @@ export default {
},
methods: {
// 达标标识判断（≥100返回1，<100返回0）
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
// 处理费用数据
updateCostData(data) {
@@ -104,17 +112,16 @@ export default {
// 整合flag字段
this.manageCostData = {
...manageItem,
flag: this.getRateFlag(manageItem.rate)
flag: this.getRateFlag(manageItem.rate, manageItem.real, manageItem.budget)
};
this.saleCostData = {
...saleItem,
flag: this.getRateFlag(saleItem.rate)
flag: this.getRateFlag(saleItem.rate, saleItem.real, saleItem.budget)
};
this.financeCostData = {
...financeItem,
flag: this.getRateFlag(financeItem.rate)
flag: this.getRateFlag(financeItem.rate, financeItem.real, financeItem.budget)
};
// 调试日志
console.log('管理费用数据：', this.manageCostData);
console.log('销售费用数据：', this.saleCostData);

27
src/views/home/expenseAnalysisComponents/operatingBar.vue
View File

@@ -181,8 +181,20 @@ export default {
height: 20,
formatter: (params) => {
const diff = data.diff || [];
const flags = data.flags || [];
const currentDiff = diff[params.dataIndex] || 0;
return `{rate|${currentDiff}}{text|差值}`;
const currentFlag = flags[params.dataIndex] || 0;
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
@@ -210,11 +222,20 @@ export default {
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}

26
src/views/home/expenseAnalysisComponents/operatingLineBarSale.vue
View File

@@ -65,21 +65,31 @@ export default {
// 只创建一次图表实例
this.myChart = echarts.init(chartDom);
this.myChart.getZr().on('click', (params) => {
console.log('params', params);
// 绑定点击事件（只绑定一次，永久生效）
this.myChart.on('click', (params) => {
// 提取点击的基地名称
const itemName = params.name;
// const itemName = params.name;
let itemName = undefined
// 根据映射表获取对应的序号（未匹配到则返回0或其他默认值）
let pointInPixel = [params.offsetX, params.offsetY];
if (this.myChart.containPixel('grid', pointInPixel)) {
let pointInGrid = this.myChart.convertFromPixel({
seriesIndex: 0
}, pointInPixel);
let xIndex = pointInGrid[0]; //索引
let handleIndex = Number(xIndex);
let seriesObj = this.myChart.getOption(); //图表object对象
var op = this.myChart.getOption();
//获得图表中点击的列
itemName = op.xAxis[0].data[handleIndex]; //获取点击的列名
console.log(itemName, 'monthmonthmonth');
console.log(handleIndex, seriesObj);
};
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

20
src/views/home/expenseAnalysisComponents/operatingLineChart.vue
View File

@@ -88,10 +88,18 @@ export default {
* @param {number} rate 处理后的rate值（已*100）
* @returns {0|1} flag值
*/
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
/**
* 核心处理函数：在所有数据都准备好后，才组装 chartData
*/
@@ -105,7 +113,7 @@ export default {
const groupReal = [this.groupData.real]; // 实际值数组
const groupRate = [this.groupData.rate]; // 完成率数组
// 新增：集团rate对应的flag
const groupFlag = [this.getRateFlag(groupRate[0])];
const groupFlag = [this.getRateFlag(groupRate[0], groupReal[0], groupTarget[0])];
console.log('集团数据数组：', {
groupTarget,
@@ -126,7 +134,7 @@ export default {
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));
const factoryFlags = this.factoryData.map(item => this.getRateFlag(item.rate, item.real, item.budget));
// 3. 组装最终的chartData（供子组件使用）
this.chartData = {

18
src/views/home/expenseAnalysisComponents/operatingLineChartCumulative.vue
View File

@@ -83,9 +83,17 @@ export default {
* @param {number} rate 处理后的rate值（已*100）
* @returns {0|1} flag值
*/
getRateFlag(rate) {
getRateFlag(rate, real, target) {
// 先处理无效值的情况
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
console.log(rate, real, target)
// 实际值和目标值都为0时，算作达标
if (real === 0 && target === 0 && rate === 0) {
return 1; // 达标
}
// 其他情况：rate >= 100 或 rate === 0 时达标
return (rate >= 100) ? 1 : 0;
},
/**
* 核心处理函数：在所有数据都准备好后，才组装 chartData
@@ -100,8 +108,7 @@ export default {
const groupReal = [this.groupData.real]; // 实际值数组
const groupRate = [this.groupData.rate]; // 完成率数组
// 新增：集团rate对应的flag
const groupFlag = [this.getRateFlag(groupRate[0])];
const groupFlag = [this.getRateFlag(groupRate[0], groupReal[0], groupTarget[0])];
console.log('集团数据数组：', {
groupTarget,
groupDiff,
@@ -121,7 +128,8 @@ export default {
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));
const factoryFlags = this.factoryData.map(item => this.getRateFlag(item.rate, item.real, item.budget));
console.log('factoryFlags', factoryFlags);
// 3. 组装最终的chartData（供子组件使用）
this.chartData = {

67
src/views/home/expenseAnalysisComponents/operatingSingleBar.vue
View File

@@ -90,8 +90,16 @@ export default {
}
},
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,
borderWidth: 0
},
},
{
@@ -105,52 +113,61 @@ export default {
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: function (params) {
// 假设 params.data 是完成率数值（如 139）
// // 2. 模板字符串拼接富文本标签 + 动态值
return `{rate|${diff}}{text|差值}`;
formatter: (params) => {
// const flags = flags || [];
const currentDiff = diff || 0;
const currentFlag = this.detailData?.flag || 0;
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
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: 0, color: 'rgba(205, 215, 224, 0.6)' },
{ 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], // 缩小内边距
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
color: '#464646',
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}

55
src/views/home/expenseAnalysisComponents/operatingTopBar.vue
View File

@@ -160,51 +160,60 @@ export default {
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: (params) => {
// const { rate = 0, diff = 0 } = params.data || {};
return `{rate|${diff}}{text|差值}`;
// const flags = flags || [];
const currentDiff = diff || 0;
const currentFlag = data.flags[0] || 0;
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
// 核心样式：匹配CSS需求
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
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: 0, color: 'rgba(205, 215, 224, 0.6)' },
{ 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], // 缩小内边距
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
color: '#464646',
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}

77
src/views/home/expenseAnalysisComponents/verticalBarChart.vue
View File

@@ -43,10 +43,18 @@ export default {
}
},
methods: {
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
updateChart() {
const chartDom = this.$refs[this.refName];
if (!chartDom) {
@@ -61,7 +69,7 @@ export default {
this.myChart = echarts.init(chartDom);
const diff = this.detailData.diff || 0
const rate = this.detailData.rate || 0
const flagValue = this.getRateFlag(this.detailData.rate) || 0
const flagValue = this.getRateFlag(this.detailData.rate, this.detailData.real, this.detailData.target) || 0
const option = {
tooltip: {
@@ -150,54 +158,61 @@ export default {
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: function (params) {
// 假设 params.data 是完成率数值（如 139）
// // 2. 模板字符串拼接富文本标签 + 动态值
return `{rate|${diff}}{text|差值}`;
formatter: (params) => {
// const flags = flags || [];
const currentDiff = diff || 0;
const currentFlag = flagValue || 0;
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
// formatter: '',
// 核心样式：匹配CSS需求
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
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: 0, color: 'rgba(205, 215, 224, 0.6)' },
{ 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], // 缩小内边距
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
color: '#464646',
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}

22
src/views/home/expenseAnalysisComponents/yearRelatedMetrics.vue
View File

@@ -84,10 +84,18 @@ export default {
},
methods: {
// 达标标识判断（≥100返回1，<100返回0）
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
// 处理费用数据
updateCostData(data) {
@@ -104,15 +112,15 @@ export default {
// 整合flag字段
this.manageCostData = {
...manageItem,
flag: this.getRateFlag(manageItem.rate)
flag: this.getRateFlag(manageItem.rate, manageItem.real, manageItem.budget)
};
this.saleCostData = {
...saleItem,
flag: this.getRateFlag(saleItem.rate)
flag: this.getRateFlag(saleItem.rate, saleItem.real, saleItem.budget)
};
this.financeCostData = {
...financeItem,
flag: this.getRateFlag(financeItem.rate)
flag: this.getRateFlag(financeItem.rate, financeItem.real, financeItem.budget)
};
// 调试日志

61
src/views/home/fullCostAnalysisComponents/dataTrendBar.vue
View File

@@ -104,7 +104,7 @@ export default {
diffs.push(monthData.diff || 0);
// 生成达标状态（复用 getRateFlag 逻辑）
flags.push(this.getRateFlag(completeRate));
flags.push(this.getRateFlag(completeRate, monthData.real, monthData.target));
});
return {
@@ -122,7 +122,9 @@ export default {
// 重构 chartD：替换硬编码数据为动态解析数据
chartD() {
// 获取动态解析的趋势数据
const { months, rates, reals, targets, flags,diffs } = this.trendParsedData;
const { months, rates, reals, targets, flags, diffs } = this.trendParsedData;
console.log('flags',flags);
// 销量场景数据（保留原有结构，替换数据来源）
const salesData = {
allPlaceNames: months, // 优先用基地名称，无则用月份
@@ -189,8 +191,21 @@ export default {
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: function (params) {
const diff = diffs || [];
// const flags = flags || [];
const currentDiff = diff[params.dataIndex] || 0;
return `{rate|${currentDiff}}{text|差值}`;
const currentFlag = flags[params.dataIndex] || 0;
console.log('currentFlag', flags, params.dataIndex);
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
@@ -220,19 +235,27 @@ export default {
lineHeight: 20,
rich: {
text: {
// 缩小宽度和内边距，适配68px容器
width: 'auto', // 自动宽度，替代固定40px
padding: [5, 10, 5, 0], // 缩小内边距
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
color: '#464646',
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}
@@ -277,10 +300,18 @@ export default {
this.isDropdownShow = false;
},
// 复用达标状态判断方法
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return (rate >= 100 || rate === 0) ? 1 : 0;
}
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
}
};
</script>

18
src/views/home/fullCostAnalysisComponents/monthlyOverview.vue
View File

@@ -87,7 +87,7 @@ export default {
target: 0,
thb: 0,
...rawData,
flag: this.getRateFlag(rawData.completeRate) // 新增flag字段
flag: this.getRateFlag(rawData.completeRate, rawData.real, rawData.target) // 新增flag字段
};
}
},
@@ -106,10 +106,18 @@ export default {
* @param {number} rate 完成率（原始值，如89代表89%）
* @returns {0|1} flag值
*/
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
}
}
</script>

27
src/views/home/fullCostAnalysisComponents/operatingBar.vue
View File

@@ -181,8 +181,20 @@ export default {
height: 20,
formatter: (params) => {
const diff = data.diff || [];
const flags = data.flags || [];
const currentDiff = diff[params.dataIndex] || 0;
return `{rate|${currentDiff}}{text|差值}`;
const currentFlag = flags[params.dataIndex] || 0;
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
@@ -210,11 +222,20 @@ export default {
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}

29
src/views/home/fullCostAnalysisComponents/operatingLineBarSale.vue
View File

@@ -67,15 +67,28 @@ export default {
this.myChart = echarts.init(chartDom);
// 绑定点击事件（只绑定一次，永久生效）
this.myChart.on('click', (params) => {
// 提取点击的基地名称
const itemName = params.name;
// 根据映射表获取对应的序号（未匹配到则返回0或其他默认值）
const baseIndex = this.baseNameToIndexMap[itemName] || 0;
this.myChart.getZr().on('click', (params) => {
console.log('params', params);
// 兼容不同图表类型的value：柱状图value是数值，折线图是[横坐标, 纵坐标]
// const itemValue = Array.isArray(params.value) ? params.value[1] : params.value;
// const seriesName = params.seriesName;
// 提取点击的基地名称
// const itemName = params.name;
let itemName = undefined
// 根据映射表获取对应的序号（未匹配到则返回0或其他默认值）
let pointInPixel = [params.offsetX, params.offsetY];
if (this.myChart.containPixel('grid', pointInPixel)) {
let pointInGrid = this.myChart.convertFromPixel({
seriesIndex: 0
}, pointInPixel);
let xIndex = pointInGrid[0]; //索引
let handleIndex = Number(xIndex);
let seriesObj = this.myChart.getOption(); //图表object对象
var op = this.myChart.getOption();
//获得图表中点击的列
itemName = op.xAxis[0].data[handleIndex]; //获取点击的列名
console.log(itemName,'monthmonthmonth');
console.log(handleIndex, seriesObj);
};
const baseIndex = this.baseNameToIndexMap[itemName] || 0;
console.log(`你点击了【${itemName}】(序号：${baseIndex})`);

20
src/views/home/fullCostAnalysisComponents/operatingLineChart.vue
View File

@@ -82,10 +82,18 @@ export default {
* @param {number} rate 完成率（原始值，如80代表80%）
* @returns {0|1} flag值
*/
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
/**
* 核心处理函数：解析thisMonData，组装集团和工厂数据
@@ -105,7 +113,7 @@ export default {
diff: [ksxnData.diff],
reals: [ksxnData.real],
rate: [ksxnData.completeRate],
flags: [this.getRateFlag(ksxnData.completeRate)],
flags: [this.getRateFlag(ksxnData.completeRate, ksxnData.real, ksxnData.target)],
thb: [ksxnData.thb] // 新增thb字段（如果子组件需要）
};
@@ -120,7 +128,7 @@ export default {
diff: factoryDataList.map(item => item.diff || 0), // 差值
reals: factoryDataList.map(item => item.real || 0), // 实际值
rates: factoryDataList.map(item => item.completeRate || 0), // 完成率
flags: factoryDataList.map(item => this.getRateFlag(item.completeRate)), // 完成率标识
flags: factoryDataList.map(item => this.getRateFlag(item.completeRate, item.real, item.target)), // 完成率标识
thb: factoryDataList.map(item => item.thb || 0) // thb字段
};

20
src/views/home/fullCostAnalysisComponents/operatingLineChartCumulative.vue
View File

@@ -82,10 +82,18 @@ export default {
* @param {number} rate 完成率（原始值，如80代表80%）
* @returns {0|1} flag值
*/
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
/**
* 核心处理函数：解析thisMonData，组装集团和工厂数据
@@ -105,7 +113,7 @@ export default {
diff: [ksxnData.diff],
reals: [ksxnData.real],
rate: [ksxnData.completeRate],
flags: [this.getRateFlag(ksxnData.completeRate)],
flags: [this.getRateFlag(ksxnData.completeRate, ksxnData.real, ksxnData.target)],
thb: [ksxnData.thb] // 新增thb字段（如果子组件需要）
};
@@ -120,7 +128,7 @@ export default {
diff: factoryDataList.map(item => item.diff || 0), // 差值
reals: factoryDataList.map(item => item.real || 0), // 实际值
rates: factoryDataList.map(item => item.completeRate || 0), // 完成率
flags: factoryDataList.map(item => this.getRateFlag(item.completeRate)), // 完成率标识
flags: factoryDataList.map(item => this.getRateFlag(item.completeRate, item.real, item.target)), // 完成率标识
thb: factoryDataList.map(item => item.thb || 0) // thb字段
};

69
src/views/home/fullCostAnalysisComponents/operatingSingleBar.vue
View File

@@ -25,7 +25,7 @@ export default {
// const bgImageUrl = require('@/assets/img/labelBg.png');
const rate = this.detailData?.completeRate || 0
const diff = this.detailData?.diff || 0
console.log('diff', diff);
console.log('diff', this.detailData);
const seriesData = [
{
@@ -90,8 +90,16 @@ export default {
}
},
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,
borderWidth: 0
},
},
{
@@ -105,52 +113,61 @@ export default {
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: function (params) {
// 假设 params.data 是完成率数值（如 139）
// // 2. 模板字符串拼接富文本标签 + 动态值
return `{rate|${diff}}{text|差值}`;
formatter: (params) => {
// const flags = flags || [];
const currentDiff = diff || 0;
const currentFlag = this.detailData?.flag || 0;
const prefix = currentFlag === 1 ? '+' : '';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
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: 0, color: 'rgba(205, 215, 224, 0.6)' },
{ 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], // 缩小内边距
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
color: '#464646',
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}

55
src/views/home/fullCostAnalysisComponents/operatingTopBar.vue
View File

@@ -160,51 +160,60 @@ export default {
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: (params) => {
// const { rate = 0, diff = 0 } = params.data || {};
return `{rate|${diff}}{text|差值}`;
// const flags = flags || [];
const currentDiff = diff || 0;
const currentFlag = flags[0] || 0;
const prefix = currentFlag === 1 ? '+' : '';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
// 核心样式：匹配CSS需求
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
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: 0, color: 'rgba(205, 215, 224, 0.6)' },
{ 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], // 缩小内边距
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
color: '#464646',
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}

26
src/views/home/fullCostAnalysisComponents/relatedIndicatorsAnalysis.vue
View File

@@ -14,7 +14,7 @@
<div class="line">
<operatingSingleBar :detailData="{
...(relatedDetailData.制造成本 || defaultData),
flag: getRateFlag((relatedDetailData.制造成本 || defaultData).completeRate)
flag: getRateFlag((relatedDetailData.制造成本 || defaultData).completeRate, (relatedDetailData.制造成本 || defaultData).real, (relatedDetailData.制造成本 || defaultData).target)
}" />
</div>
</div>
@@ -25,7 +25,7 @@
<div class="line">
<operatingSingleBar :detailData="{
...(relatedDetailData.财务费用 || defaultData),
flag: getRateFlag((relatedDetailData.财务费用 || defaultData).completeRate)
flag: getRateFlag((relatedDetailData.财务费用 || defaultData).completeRate, (relatedDetailData.财务费用 || defaultData).real, (relatedDetailData.财务费用 || defaultData).target)
}" />
</div>
</div>
@@ -36,7 +36,7 @@
<div class="line">
<operatingSingleBar :detailData="{
...(relatedDetailData.销售费用 || defaultData),
flag: getRateFlag((relatedDetailData.销售费用 || defaultData).completeRate)
flag: getRateFlag((relatedDetailData.销售费用 || defaultData).completeRate, (relatedDetailData.销售费用 || defaultData).real, (relatedDetailData.销售费用 || defaultData).target,)
}" />
</div>
</div>
@@ -47,7 +47,7 @@
<div class="line">
<operatingSingleBar :detailData="{
...(relatedDetailData.管理费用 || defaultData),
flag: getRateFlag((relatedDetailData.管理费用 || defaultData).completeRate)
flag: getRateFlag((relatedDetailData.管理费用 || defaultData).completeRate, (relatedDetailData.管理费用 || defaultData).real, (relatedDetailData.管理费用 || defaultData).target)
}" />
</div>
</div>
@@ -58,7 +58,7 @@
<div class="line">
<operatingSingleBar :detailData="{
...(relatedDetailData.运费 || defaultData),
flag: getRateFlag((relatedDetailData.运费 || defaultData).completeRate)
flag: getRateFlag((relatedDetailData.运费 || defaultData).completeRate, (relatedDetailData.运费 || defaultData).reat, (relatedDetailData.运费 || defaultData).target)
}" />
</div>
</div>
@@ -150,10 +150,18 @@ export default {
path: path
})
},
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0);
},
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
handleChange(value) {
console.log('value', value, this.relatedData);
if (value === 'month') {

18
src/views/home/fullCostAnalysisComponents/totalOverview.vue
View File

@@ -90,7 +90,7 @@ export default {
target: 0,
thb: 0,
...rawData,
flag: this.getRateFlag(rawData.completeRate) // 新增flag字段
flag: this.getRateFlag(rawData.completeRate, rawData.real, rawData.target) // 新增flag字段
};
}
},
@@ -109,10 +109,18 @@ export default {
* @param {number} rate 完成率（原始值，如89代表89%）
* @returns {0|1} flag值
*/
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
}
}
</script>

46
src/views/home/fullCostAnalysisComponents/verticalBarChart.vue
View File

@@ -56,6 +56,8 @@ export default {
}
// 解构数据，避免重复取值
console.log('this.detailData', this.detailData);
const { diff, completeRate, real, target, flag } = this.detailData;
// 确保数值为数字类型
const realValue = Number(real) || 0;
@@ -110,7 +112,21 @@ export default {
offset: [0, 25],
width: 68,
height: 20,
formatter: `{rate|${diffValue}}{text|差值}`,
formatter: (params) => {
const currentDiff = diffValue || 0;
const currentFlag = flagValue || 0;
const prefix = currentFlag === 1 ? '+' : '';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
@@ -125,11 +141,35 @@ export default {
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 }
text: {
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646',
fontSize: 11,
lineHeight: 20
},
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}
}
},
// 修复：flag颜色判断独立绑定到实际值柱子

22
src/views/home/grossMarginComponents/dataTrend.vue
View File

@@ -98,11 +98,11 @@ export default {
const diff = Number(item.diff) || 0;
// 计算达标标识（≥100 → 1，<100 → 0）
const flag = this.getRateFlag(rate);
const flag = this.getRateFlag(rate, real, budget);
// 填充数组
months.push(month);
rates.push(Math.round(rate * 100)); // 转为百分比并取整
rates.push(rate); // 转为百分比并取整
reals.push(real);
budgets.push(budget);
diffs.push(diff);
@@ -127,12 +127,18 @@ export default {
* @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;
}
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
},
};
</script>

137
src/views/home/grossMarginComponents/dataTrendBar.vue
View File

@@ -152,52 +152,63 @@ export default {
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: function (params) {
formatter: (params) => {
const diff = data.diffs || [];
const flags = data.flags || [];
const currentDiff = diff[params.dataIndex] || 0;
return `{rate|${currentDiff}}{text|差值}`;
const currentFlag = flags[params.dataIndex] || 0;
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
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: 0, color: 'rgba(205, 215, 224, 0.6)' },
{ 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], // 缩小内边距
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
color: '#464646',
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}
@@ -234,88 +245,6 @@ export default {
]
};
// 毛利率场景数据
const grossProfitData = {
series: [
// 1. 完成率（折线图）
{
name: '完成率',
type: 'line',
yAxisIndex: 1,
lineStyle: { color: 'rgba(40, 138, 255, .5)', width: 2 },
itemStyle: {
color: 'rgba(40, 138, 255, 1)',
borderColor: 'rgba(40, 138, 255, 1)',
borderWidth: 2,
radius: 4
},
areaStyle: {
opacity: 0.2,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(40, 138, 255, .9)' },
{ offset: 1, color: 'rgba(40, 138, 255, 0)' }
])
},
data: [106.7, 96.9, 106.5, 106.1, 93.8, 105.9], // 毛利率完成率（%）
symbol: 'circle',
symbolSize: 6
},
// 2. 目标（柱状图）
{
name: '预算',
type: 'bar',
yAxisIndex: 0,
barWidth: 14,
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(130, 204, 255, 1)' },
{ offset: 1, color: 'rgba(75, 157, 255, 1)' }
]
},
borderRadius: [4, 4, 0, 0],
borderWidth: 0
},
data: [30, 32, 31, 33, 32, 34] // 目标毛利率（万元）
},
// 3. 实际（柱状图）
{
name: '实际',
type: 'bar',
yAxisIndex: 0,
barWidth: 14,
itemStyle: {
color: (params) => {
const safeFlag = [1, 0, 1, 1, 0, 1]; // 达标状态
const currentFlag = safeFlag[params.dataIndex] || 0;
return currentFlag === 1
? {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(174, 239, 224, 1)' },
{ offset: 1, color: 'rgba(118, 218, 190, 1)' }
]
}
: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(253, 209, 129, 1)' },
{ offset: 1, color: 'rgba(249, 164, 74, 1)' }
]
};
},
borderRadius: [4, 4, 0, 0],
borderWidth: 0
},
data: [32, 31, 33, 35, 30, 36] // 实际毛利率（万元）
}
]
};
// 根据按钮状态返回对应数据
return salesData;
}

20
src/views/home/grossMarginComponents/monthlyRelatedMetrics.vue
View File

@@ -84,10 +84,18 @@ export default {
}
})
},
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
updateChart(data) {
// 修复核心：正确获取默认值（调用 factory 函数）
@@ -104,12 +112,12 @@ export default {
// 整合flag字段
this.ytdIncomeData = {
...incomeItem,
flag: this.getRateFlag(incomeItem.rate)
flag: this.getRateFlag(incomeItem.rate, incomeItem.real, incomeItem.budget)
};
this.ytdCostData = {
...costItem,
flag: this.getRateFlag(costItem.rate)
flag: this.getRateFlag(costItem.rate, costItem.real, costItem.budget)
};
console.log('累计收入数据：', this.ytdIncomeData);

27
src/views/home/grossMarginComponents/operatingBar.vue
View File

@@ -181,8 +181,20 @@ export default {
height: 20,
formatter: (params) => {
const diff = data.diff || [];
const flags = data.flags || [];
const currentDiff = diff[params.dataIndex] || 0;
return `{rate|${currentDiff}}{text|差值}`;
const currentFlag = flags[params.dataIndex] || 0;
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
@@ -210,11 +222,20 @@ export default {
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}

40
src/views/home/grossMarginComponents/operatingLineBarSale.vue
View File

@@ -67,15 +67,39 @@ export default {
this.myChart = echarts.init(chartDom);
// 绑定点击事件（只绑定一次，永久生效）
this.myChart.on('click', (params) => {
// 提取点击的基地名称
const itemName = params.name;
// 根据映射表获取对应的序号（未匹配到则返回0或其他默认值）
const baseIndex = this.baseNameToIndexMap[itemName] || 0;
// 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;
// // 兼容不同图表类型的value：柱状图value是数值，折线图是[横坐标, 纵坐标]
// // const itemValue = Array.isArray(params.value) ? params.value[1] : params.value;
// // const seriesName = params.seriesName;
// console.log(`你点击了【${itemName}】(序号：${baseIndex})`);
this.myChart.getZr().on('click', (params) => {
console.log('params', params);
// 提取点击的基地名称
// const itemName = params.name;
let itemName = undefined
// 根据映射表获取对应的序号（未匹配到则返回0或其他默认值）
let pointInPixel = [params.offsetX, params.offsetY];
if (this.myChart.containPixel('grid', pointInPixel)) {
let pointInGrid = this.myChart.convertFromPixel({
seriesIndex: 0
}, pointInPixel);
let xIndex = pointInGrid[0]; //索引
let handleIndex = Number(xIndex);
let seriesObj = this.myChart.getOption(); //图表object对象
var op = this.myChart.getOption();
//获得图表中点击的列
itemName = op.xAxis[0].data[handleIndex]; //获取点击的列名
console.log(itemName, 'monthmonthmonth');
console.log(handleIndex, seriesObj);
};
const baseIndex = this.baseNameToIndexMap[itemName] || 0;
console.log(`你点击了【${itemName}】(序号：${baseIndex})`);

20
src/views/home/grossMarginComponents/operatingLineChart.vue
View File

@@ -89,10 +89,18 @@ export default {
* @param {number} rate 处理后的rate值（已*100）
* @returns {0|1} flag值
*/
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
/**
* 核心处理函数：在所有数据都准备好后，才组装 chartData
@@ -107,7 +115,7 @@ export default {
const groupReal = [this.groupData.real]; // 实际值数组
const groupRate = [this.groupData.rate]; // 完成率数组
// 新增：集团rate对应的flag
const groupFlag = [this.getRateFlag(groupRate[0])];
const groupFlag = [this.getRateFlag(groupRate[0], groupReal[0], groupTarget[0])];
console.log('集团数据数组：', {
groupTarget,
@@ -128,7 +136,7 @@ export default {
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));
const factoryFlags = this.factoryData.map(item => this.getRateFlag(item.rate, item.real, item.budget));
// 3. 组装最终的chartData（供子组件使用）
this.chartData = {

20
src/views/home/grossMarginComponents/operatingLineChartCumulative.vue
View File

@@ -84,10 +84,18 @@ export default {
* @returns {0|1} flag值
*/
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
/**
* 核心处理函数：在所有数据都准备好后，才组装 chartData
@@ -102,7 +110,7 @@ export default {
const groupReal = [this.groupData.real]; // 实际值数组
const groupRate = [this.groupData.rate]; // 完成率数组
// 新增：集团rate对应的flag
const groupFlag = [this.getRateFlag(groupRate[0])];
const groupFlag = [this.getRateFlag(groupRate[0], groupReal[0], groupTarget[0])];
console.log('集团数据数组：', {
groupTarget,
@@ -123,7 +131,7 @@ export default {
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));
const factoryFlags = this.factoryData.map(item => this.getRateFlag(item.rate, item.rate, item.budget));
// 3. 组装最终的chartData（供子组件使用）
this.chartData = {

70
src/views/home/grossMarginComponents/operatingSingleBar.vue
View File

@@ -90,8 +90,16 @@ export default {
}
},
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,
borderWidth: 0
},
},
{
@@ -105,52 +113,64 @@ export default {
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: function (params) {
// 假设 params.data 是完成率数值（如 139）
// // 2. 模板字符串拼接富文本标签 + 动态值
return `{rate|${diff}}{text|差值}`;
formatter: (params) => {
// const flags = flags || [];
const currentDiff = diff || 0;
const currentFlag = this.detailData?.flag || 0;
// console.log('flags[params.dataIndex]', flags);
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
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: 0, color: 'rgba(205, 215, 224, 0.6)' },
{ 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], // 缩小内边距
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
color: '#464646',
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}

58
src/views/home/grossMarginComponents/operatingTopBar.vue
View File

@@ -160,51 +160,63 @@ export default {
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: (params) => {
// const { rate = 0, diff = 0 } = params.data || {};
return `{rate|${diff}}{text|差值}`;
// const flags = flags || [];
const currentDiff = diff || 0;
const currentFlag = data.flags[0] || 0;
// console.log('flags[params.dataIndex]', flags);
const prefix = currentFlag === 1 ? '+' : '';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
// 核心样式：匹配CSS需求
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
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: 0, color: 'rgba(205, 215, 224, 0.6)' },
{ 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], // 缩小内边距
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
color: '#464646',
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}

80
src/views/home/grossMarginComponents/verticalBarChart.vue
View File

@@ -43,10 +43,18 @@ export default {
}
},
methods: {
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
updateChart() {
const chartDom = this.$refs[this.refName];
if (!chartDom) {
@@ -61,7 +69,7 @@ export default {
this.myChart = echarts.init(chartDom);
const diff = this.detailData.diff || 0
const rate = this.detailData.rate || 0
const flagValue = this.getRateFlag(this.detailData.rate) || 0
const flagValue = this.getRateFlag(this.detailData.rate, this.detailData.real, this.detailData.target) || 0
const option = {
tooltip: {
@@ -150,54 +158,64 @@ export default {
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: function (params) {
// 假设 params.data 是完成率数值（如 139）
// // 2. 模板字符串拼接富文本标签 + 动态值
return `{rate|${diff}}{text|差值}`;
formatter: (params) => {
// const flags = flags || [];
const currentDiff = diff || 0;
const currentFlag = flagValue || 0;
// console.log('flags[params.dataIndex]', flags);
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
// formatter: '',
// 核心样式：匹配CSS需求
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
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: 0, color: 'rgba(205, 215, 224, 0.6)' },
{ 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], // 缩小内边距
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
color: '#464646',
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}

20
src/views/home/grossMarginComponents/yearRelatedMetrics.vue
View File

@@ -90,10 +90,18 @@ export default {
})
},
// 保留原flag判断逻辑（≥100返回1，<100返回0）
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
updateChart(data) {
// 数据兜底：确保是数组且长度≥2
@@ -108,12 +116,12 @@ export default {
// 整合flag字段到收入/全成本数据中
this.incomeData = {
...incomeItem,
flag: this.getRateFlag(incomeItem.rate)
flag: this.getRateFlag(incomeItem.rate, incomeItem.real, incomeItem.budget)
};
this.totalCostData = {
...totalCostItem,
flag: this.getRateFlag(totalCostItem.rate)
flag: this.getRateFlag(totalCostItem.rate, totalCostItem.real, totalCostItem.budget)
};
// 调试：确认数据赋值正确

54
src/views/home/index.vue
View File

@@ -1,8 +1,9 @@
<template>
<div id="dayReport" class="dayReport" :style="styles">
<!-- <sidebar v-if="!sidebar.hide" class="sidebar-container" /> -->
<ReportHeader top-title="洛玻集团运营驾驶舱" :is-full-screen="isFullScreen" @screenfullChange="screenfullChange"
@timeRangeChange="handleTimeChange" />
<!-- <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" /> -->
<sidebar style="opacity: .9;" v-if="!sidebar.hide && openSider" class="sidebar-container" />
<ReportHeader top-title="洛玻集团运营驾驶舱" :openSider="openSider" :is-full-screen="isFullScreen" @screenfullChange="screenfullChange"
@siderOpenChange="siderOpenChange" @timeRangeChange="handleTimeChange" />
<div class="main-body"
style="margin-top: -20px; flex: 1; display: flex;padding: 0px 16px 0;flex-direction: column;">
<div class="top" style="display: flex;gap: 16px;">
@@ -42,12 +43,14 @@ import keyWork from './components/keyWork.vue'
// import moment from 'moment'
import { getOperateCockpit, getOrderDetail } from '@/api/cockpit'
import { Sidebar } from "../../layout/components";
import { mapState } from "vuex";
export default {
name: 'DayReport',
components: { ReportHeader, coreSalesKPIs, keyProductionIndicators, coreBottomLeft, keyWork, orderProgress, financeCosts, Sidebar },
data() {
return {
isFullScreen: false,
openSider: false,
timer: null,
beilv: 1,
value: 100,
@@ -70,26 +73,25 @@ export default {
this.windowWidth(document.documentElement.clientWidth)
},
computed: {
// ...mapState({
// theme: (state) => state.settings.theme,
// sideTheme: (state) => state.settings.sideTheme,
// sidebar: (state) => state.app.sidebar,
// device: (state) => state.app.device,
// needTagsView: (state) => state.settings.tagsView,
// fixedHeader: (state) => state.settings.fixedHeader,
// }),
// classObj() {
// return {
// hideSidebar: !this.sidebar.opened,
// openSidebar: this.sidebar.opened,
// withoutAnimation: this.sidebar.withoutAnimation,
// mobile: this.device === "mobile",
// };
// },
// variables() {
// return variables;
// },
// ...mapGetters(['sidebar']),
...mapState({
theme: (state) => state.settings.theme,
sideTheme: (state) => state.settings.sideTheme,
sidebar: (state) => state.app.sidebar,
device: (state) => state.app.device,
needTagsView: (state) => state.settings.tagsView,
fixedHeader: (state) => state.settings.fixedHeader,
}),
classObj() {
return {
hideSidebar: !this.sidebar.opened,
openSidebar: this.sidebar.opened,
withoutAnimation: this.sidebar.withoutAnimation,
mobile: this.device === "mobile",
};
},
variables() {
return variables;
},
styles() {
const v = Math.floor(this.value * this.beilv * 100) / 10000
return {
@@ -172,6 +174,9 @@ export default {
change() {
this.isFullScreen = screenfull.isFullscreen
},
handleClickOutside() {
this.$store.dispatch("app/closeSideBar", { withoutAnimation: false });
},
windowWidth(value) {
this.clientWidth = value;
this.beilv2 = this.clientWidth / 1920;
@@ -196,6 +201,9 @@ export default {
}
screenfull.off('change', this.change)
},
siderOpenChange() {
this.openSider = !this.openSider
},
// 全屏
screenfullChange() {
console.log('screenfull.enabled', screenfull.isEnabled);

20
src/views/home/inputOutputRatioComponents/dataTrend.vue
View File

@@ -98,11 +98,11 @@ export default {
const diff = Number(item.diff) || 0;
// 计算达标标识（≥100 → 1，<100 → 0）
const flag = this.getRateFlag(rate);
const flag = this.getRateFlag(rate,real,budget);
// 填充数组
months.push(month);
rates.push(Math.round(rate * 100)); // 转为百分比并取整
rates.push(rate); // 转为百分比并取整
reals.push(real);
budgets.push(budget);
diffs.push(diff);
@@ -127,10 +127,18 @@ export default {
* @param {Number} rate - 完成率（原始值，如1.2 → 120%）
* @returns {Number} 1: 达标（≥100%），0: 未达标（<100%）
*/
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
},
};
</script>

55
src/views/home/inputOutputRatioComponents/dataTrendBar.vue
View File

@@ -151,52 +151,63 @@ export default {
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: function (params) {
formatter: (params) => {
const diff = data.diffs || [];
const flags = data.flags || [];
const currentDiff = diff[params.dataIndex] || 0;
return `{rate|${currentDiff}}{text|差值}`;
const currentFlag = flags[params.dataIndex] || 0;
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
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: 0, color: 'rgba(205, 215, 224, 0.6)' },
{ 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], // 缩小内边距
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
color: '#464646',
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}

20
src/views/home/inputOutputRatioComponents/monthlyRelatedMetrics.vue
View File

@@ -76,10 +76,18 @@ export default {
},
methods: {
// 达标标识判断（≥100返回1，<100返回0）
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
// 处理领用量/加工产量数据
updateData(data) {
@@ -95,11 +103,11 @@ export default {
// 整合flag字段到数据对象中
this.useData = {
...useItem,
flag: this.getRateFlag(useItem.rate)
flag: this.getRateFlag(useItem.rate, useItem.real, useItem.budget)
};
this.processData = {
...processItem,
flag: this.getRateFlag(processItem.rate)
flag: this.getRateFlag(processItem.rate, processItem.real, processItem.budget)
};
// 调试日志

27
src/views/home/inputOutputRatioComponents/operatingBar.vue
View File

@@ -181,8 +181,20 @@ export default {
height: 20,
formatter: (params) => {
const diff = data.diff || [];
const flags = data.flags || [];
const currentDiff = diff[params.dataIndex] || 0;
return `{rate|${currentDiff}}{text|差值}`;
const currentFlag = flags[params.dataIndex] || 0;
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
@@ -210,11 +222,20 @@ export default {
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}

27
src/views/home/inputOutputRatioComponents/operatingLineBarSale.vue
View File

@@ -66,19 +66,32 @@ export default {
// 只创建一次图表实例
this.myChart = echarts.init(chartDom);
// 绑定点击事件（只绑定一次，永久生效）
this.myChart.on('click', (params) => {
this.myChart.getZr().on('click', (params) => {
console.log('params', params);
// 提取点击的基地名称
const itemName = params.name;
// const itemName = params.name;
let itemName = undefined
// 根据映射表获取对应的序号（未匹配到则返回0或其他默认值）
let pointInPixel = [params.offsetX, params.offsetY];
if (this.myChart.containPixel('grid', pointInPixel)) {
let pointInGrid = this.myChart.convertFromPixel({
seriesIndex: 0
}, pointInPixel);
let xIndex = pointInGrid[0]; //索引
let handleIndex = Number(xIndex);
let seriesObj = this.myChart.getOption(); //图表object对象
var op = this.myChart.getOption();
//获得图表中点击的列
itemName = op.xAxis[0].data[handleIndex]; //获取点击的列名
console.log(itemName, 'monthmonthmonth');
console.log(handleIndex, seriesObj);
};
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: 'inputOutputRatioBase',

20
src/views/home/inputOutputRatioComponents/operatingLineChart.vue
View File

@@ -89,10 +89,18 @@ export default {
* @param {number} rate 处理后的rate值（已*100）
* @returns {0|1} flag值
*/
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
/**
* 核心处理函数：在所有数据都准备好后，才组装 chartData
@@ -107,7 +115,7 @@ export default {
const groupReal = [this.groupData.real]; // 实际值数组
const groupRate = [this.groupData.rate]; // 完成率数组
// 新增：集团rate对应的flag
const groupFlag = [this.getRateFlag(groupRate[0])];
const groupFlag = [this.getRateFlag(groupRate[0], groupReal[0], groupTarget[0])];
console.log('集团数据数组：', {
groupTarget,
@@ -128,7 +136,7 @@ export default {
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));
const factoryFlags = this.factoryData.map(item => this.getRateFlag(item.rate,item.real,item.budget));
// 3. 组装最终的chartData（供子组件使用）
this.chartData = {

20
src/views/home/inputOutputRatioComponents/operatingLineChartCumulative.vue
View File

@@ -83,10 +83,18 @@ export default {
* @param {number} rate 处理后的rate值（已*100）
* @returns {0|1} flag值
*/
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
/**
* 核心处理函数：在所有数据都准备好后，才组装 chartData
@@ -101,7 +109,7 @@ export default {
const groupReal = [this.groupData.real]; // 实际值数组
const groupRate = [this.groupData.rate]; // 完成率数组
// 新增：集团rate对应的flag
const groupFlag = [this.getRateFlag(groupRate[0])];
const groupFlag = [this.getRateFlag(groupRate[0], groupReal[0], groupTarget[0])];
console.log('集团数据数组：', {
groupTarget,
@@ -122,7 +130,7 @@ export default {
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));
const factoryFlags = this.factoryData.map(item => this.getRateFlag(item.rate, item.real, item.budget));
// 3. 组装最终的chartData（供子组件使用）
this.chartData = {

70
src/views/home/inputOutputRatioComponents/operatingSingleBar.vue
View File

@@ -90,8 +90,16 @@ export default {
}
},
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,
borderWidth: 0
},
},
{
@@ -105,52 +113,64 @@ export default {
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: function (params) {
// 假设 params.data 是完成率数值（如 139）
// // 2. 模板字符串拼接富文本标签 + 动态值
return `{rate|${diff}}{text|差值}`;
formatter: (params) => {
// const flags = flags || [];
const currentDiff = diff || 0;
const currentFlag = this.detailData?.flag || 0;
// console.log('flags[params.dataIndex]', flags);
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
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: 0, color: 'rgba(205, 215, 224, 0.6)' },
{ 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], // 缩小内边距
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
color: '#464646',
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}

58
src/views/home/inputOutputRatioComponents/operatingTopBar.vue
View File

@@ -160,51 +160,63 @@ export default {
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: (params) => {
// const { rate = 0, diff = 0 } = params.data || {};
return `{rate|${diff}}{text|差值}`;
// const flags = flags || [];
const currentDiff = diff || 0;
const currentFlag = data?.flags[0] || 0;
// console.log('flags[params.dataIndex]', flags);
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
// 核心样式：匹配CSS需求
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
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: 0, color: 'rgba(205, 215, 224, 0.6)' },
{ 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], // 缩小内边距
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
color: '#464646',
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}

80
src/views/home/inputOutputRatioComponents/verticalBarChart.vue
View File

@@ -43,10 +43,18 @@ export default {
}
},
methods: {
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
updateChart() {
const chartDom = this.$refs[this.refName];
if (!chartDom) {
@@ -61,7 +69,7 @@ export default {
this.myChart = echarts.init(chartDom);
const diff = this.detailData.diff || 0
const rate = this.detailData.rate || 0
const flagValue = this.getRateFlag(this.detailData.rate) || 0
const flagValue = this.getRateFlag(this.detailData.rate, this.detailData.real, this.detailData.target) || 0
const option = {
tooltip: {
@@ -150,54 +158,64 @@ export default {
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: function (params) {
// 假设 params.data 是完成率数值（如 139）
// // 2. 模板字符串拼接富文本标签 + 动态值
return `{rate|${diff}}{text|差值}`;
formatter: (params) => {
// const flags = flags || [];
const currentDiff = diff || 0;
const currentFlag = flagValue || 0;
// console.log('flags[params.dataIndex]', flags);
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
// formatter: '',
// 核心样式：匹配CSS需求
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
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: 0, color: 'rgba(205, 215, 224, 0.6)' },
{ 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], // 缩小内边距
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
color: '#464646',
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}

20
src/views/home/inputOutputRatioComponents/yearRelatedMetrics.vue
View File

@@ -76,10 +76,18 @@ export default {
},
methods: {
// 达标标识判断（≥100返回1，<100返回0）
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
// 处理领用量/加工产量数据
updateData(data) {
@@ -95,11 +103,11 @@ export default {
// 整合flag字段到数据对象中
this.useData = {
...useItem,
flag: this.getRateFlag(useItem.rate)
flag: this.getRateFlag(useItem.rate, useItem.real, useItem.budget)
};
this.processData = {
...processItem,
flag: this.getRateFlag(processItem.rate)
flag: this.getRateFlag(processItem.rate, processItem.real, processItem.budget)
};
// 调试日志

18
src/views/home/netPriceAnalysisComponents/dataTrend.vue
View File

@@ -98,15 +98,23 @@ export default {
reals.push(data.real || 0);
targets.push(data.target || 0);
// 复用 getRateFlag 逻辑
flags.push(this.getRateFlag(data.completeRate));
flags.push(this.getRateFlag(data.completeRate, data.real, data.target));
});
return { rates, reals, targets, flags };
},
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return (rate >= 100 || rate === 0) ? 1 : 0;
}
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
}
};
</script>

74
src/views/home/netPriceAnalysisComponents/dataTrendBar.vue
View File

@@ -101,7 +101,7 @@ export default {
targets.push(monthData.target || 0);
diffs.push(monthData.diff || 0);
// 生成达标状态（复用 getRateFlag 逻辑）
flags.push(this.getRateFlag(completeRate));
flags.push(this.getRateFlag(completeRate, monthData.real, monthData.target));
});
return {
@@ -184,52 +184,64 @@ export default {
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: function (params) {
const diff = diffs || [];
const currentDiff = diff[params.dataIndex] || 0;
return `{rate|${currentDiff}}{text|差值}`;
formatter: (params) => {
// const flags = flags || [];
const currentDiff = diffs[params.dataIndex] || 0;
const currentFlag = flags[params.dataIndex] || 0;
console.log('flags[params.dataIndex]', flags);
const prefix = currentFlag === 1 ? '+' : '';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
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: 0, color: 'rgba(205, 215, 224, 0.6)' },
{ 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], // 缩小内边距
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
color: '#464646',
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}
@@ -274,9 +286,17 @@ export default {
this.isDropdownShow = false;
},
// 复用达标状态判断方法
getRateFlag(rate) {
getRateFlag(rate, real, target) {
// 先处理无效值的情况
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return (rate >= 100 || rate === 0) ? 1 : 0;
// 实际值和目标值都为0时，算作达标
if (real === 0 && target === 0 && rate === 0) {
return 1; // 达标
}
// 其他情况：rate >= 100 或 rate === 0 时达标
return (rate >= 100) ? 1 : 0;
}
}
};

18
src/views/home/netPriceAnalysisComponents/monthlyOverview.vue
View File

@@ -87,7 +87,7 @@ export default {
target: 0,
thb: 0,
...rawData,
flag: this.getRateFlag(rawData.completeRate) // 新增flag字段
flag: this.getRateFlag(rawData.completeRate, rawData.real, rawData.target) // 新增flag字段
};
}
},
@@ -106,10 +106,18 @@ export default {
* @param {number} rate 完成率（原始值，如89代表89%）
* @returns {0|1} flag值
*/
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
}
}
</script>

20
src/views/home/netPriceAnalysisComponents/monthlyRelatedMetrics.vue
View File

@@ -12,7 +12,7 @@
<div class="line">
<operatingSingleBar :detailData="{
...(relatedMon.单价 || defaultData),
flag: getRateFlag((relatedMon.单价 || defaultData).completeRate)
flag: getRateFlag((relatedMon.单价 || defaultData).completeRate, (relatedMon.单价 || defaultData).real, (relatedMon.单价 || defaultData).target)
}" />
</div>
</div>
@@ -23,7 +23,7 @@
<div class="line">
<operatingSingleBar :detailData="{
...(relatedMon.运费 || defaultData),
flag: getRateFlag((relatedMon.运费 || defaultData).completeRate)
flag: getRateFlag((relatedMon.运费 || defaultData).completeRate, (relatedMon.运费 || defaultData).real, (relatedMon.运费 || defaultData).target)
}" />
</div>
</div>
@@ -104,10 +104,18 @@ export default {
* @param {number} rate 完成率（原始值，如89代表89%）
* @returns {0|1} flag值
*/
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
/**
* 图表更新方法：可在这里补充全局的图表刷新逻辑

27
src/views/home/netPriceAnalysisComponents/operatingBar.vue
View File

@@ -181,8 +181,20 @@ export default {
height: 20,
formatter: (params) => {
const diff = data.diff || [];
const flags = data.flags || [];
const currentDiff = diff[params.dataIndex] || 0;
return `{rate|${currentDiff}}{text|差值}`;
const currentFlag = flags[params.dataIndex] || 0;
const prefix = currentFlag === 1 ? '+' : '';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
@@ -210,11 +222,20 @@ export default {
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}

30
src/views/home/netPriceAnalysisComponents/operatingLineBarSale.vue
View File

@@ -66,16 +66,28 @@ export default {
// 只创建一次图表实例
this.myChart = echarts.init(chartDom);
// 绑定点击事件（只绑定一次，永久生效）
this.myChart.on('click', (params) => {
// 提取点击的基地名称
const itemName = params.name;
// 根据映射表获取对应的序号（未匹配到则返回0或其他默认值）
const baseIndex = this.baseNameToIndexMap[itemName] || 0;
this.myChart.getZr().on('click', (params) => {
console.log('params', params);
// 兼容不同图表类型的value：柱状图value是数值，折线图是[横坐标, 纵坐标]
// const itemValue = Array.isArray(params.value) ? params.value[1] : params.value;
// const seriesName = params.seriesName;
// 提取点击的基地名称
// const itemName = params.name;
let itemName = undefined
// 根据映射表获取对应的序号（未匹配到则返回0或其他默认值）
let pointInPixel = [params.offsetX, params.offsetY];
if (this.myChart.containPixel('grid', pointInPixel)) {
let pointInGrid = this.myChart.convertFromPixel({
seriesIndex: 0
}, pointInPixel);
let xIndex = pointInGrid[0]; //索引
let handleIndex = Number(xIndex);
let seriesObj = this.myChart.getOption(); //图表object对象
var op = this.myChart.getOption();
//获得图表中点击的列
itemName = op.xAxis[0].data[handleIndex]; //获取点击的列名
console.log(itemName, 'monthmonthmonth');
console.log(handleIndex, seriesObj);
};
const baseIndex = this.baseNameToIndexMap[itemName] || 0;
console.log(`你点击了【${itemName}】(序号：${baseIndex})`);

20
src/views/home/netPriceAnalysisComponents/operatingLineChart.vue
View File

@@ -82,10 +82,18 @@ export default {
* @param {number} rate 完成率（原始值，如80代表80%）
* @returns {0|1} flag值
*/
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
/**
* 核心处理函数：解析thisMonData，组装集团和工厂数据
@@ -105,7 +113,7 @@ export default {
diff: [ksxnData.diff],
reals: [ksxnData.real],
rate: [ksxnData.completeRate],
flags: [this.getRateFlag(ksxnData.completeRate)],
flags: [this.getRateFlag(ksxnData.completeRate, ksxnData.real, ksxnData.target)],
thb: [ksxnData.thb] // 新增thb字段（如果子组件需要）
};
@@ -120,7 +128,7 @@ export default {
diff: factoryDataList.map(item => item.diff || 0), // 差值
reals: factoryDataList.map(item => item.real || 0), // 实际值
rates: factoryDataList.map(item => item.completeRate || 0), // 完成率
flags: factoryDataList.map(item => this.getRateFlag(item.completeRate)), // 完成率标识
flags: factoryDataList.map(item => this.getRateFlag(item.completeRate, item.real, item.target)), // 完成率标识
thb: factoryDataList.map(item => item.thb || 0) // thb字段
};

20
src/views/home/netPriceAnalysisComponents/operatingLineChartCumulative.vue
View File

@@ -82,10 +82,18 @@ export default {
* @param {number} rate 完成率（原始值，如80代表80%）
* @returns {0|1} flag值
*/
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
/**
* 核心处理函数：解析thisMonData，组装集团和工厂数据
@@ -105,7 +113,7 @@ export default {
diff: [ksxnData.diff],
reals: [ksxnData.real],
rate: [ksxnData.completeRate],
flags: [this.getRateFlag(ksxnData.completeRate)],
flags: [this.getRateFlag(ksxnData.completeRate, ksxnData.real, ksxnData.target)],
thb: [ksxnData.thb] // 新增thb字段（如果子组件需要）
};
@@ -120,7 +128,7 @@ export default {
diff: factoryDataList.map(item => item.diff || 0), // 差值
reals: factoryDataList.map(item => item.real || 0), // 实际值
rates: factoryDataList.map(item => item.completeRate || 0), // 完成率
flags: factoryDataList.map(item => this.getRateFlag(item.completeRate)), // 完成率标识
flags: factoryDataList.map(item => this.getRateFlag(item.completeRate, item.real, item.target)), // 完成率标识
thb: factoryDataList.map(item => item.thb || 0) // thb字段
};

70
src/views/home/netPriceAnalysisComponents/operatingSingleBar.vue
View File

@@ -90,8 +90,16 @@ export default {
}
},
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,
borderWidth: 0
},
},
{
@@ -105,52 +113,64 @@ export default {
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: function (params) {
// 假设 params.data 是完成率数值（如 139）
// // 2. 模板字符串拼接富文本标签 + 动态值
return `{rate|${diff}}{text|差值}`;
formatter: (params) => {
// const flags = flags || [];
const currentDiff = diff || 0;
const currentFlag = this.detailData?.flag || 0;
// console.log('flags[params.dataIndex]', flags);
const prefix = currentFlag === 1 ? '+' : '';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
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: 0, color: 'rgba(205, 215, 224, 0.6)' },
{ 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], // 缩小内边距
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
color: '#464646',
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}

58
src/views/home/netPriceAnalysisComponents/operatingTopBar.vue
View File

@@ -160,51 +160,63 @@ export default {
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: (params) => {
// const { rate = 0, diff = 0 } = params.data || {};
return `{rate|${diff}}{text|差值}`;
// const flags = flags || [];
const currentDiff = diff || 0;
const currentFlag = data?.flags[0] || 0;
// console.log('flags[params.dataIndex]', flags);
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
// 核心样式：匹配CSS需求
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
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: 0, color: 'rgba(205, 215, 224, 0.6)' },
{ 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], // 缩小内边距
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
color: '#464646',
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}

18
src/views/home/netPriceAnalysisComponents/totalOverview.vue
View File

@@ -90,7 +90,7 @@ export default {
target: 0,
thb: 0,
...rawData,
flag: this.getRateFlag(rawData.completeRate) // 新增flag字段
flag: this.getRateFlag(rawData.completeRate, rawData.real, rawData.target) // 新增flag字段
};
}
},
@@ -109,10 +109,18 @@ export default {
* @param {number} rate 完成率（原始值，如89代表89%）
* @returns {0|1} flag值
*/
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
}
}
</script>

44
src/views/home/netPriceAnalysisComponents/verticalBarChart.vue
View File

@@ -110,7 +110,21 @@ export default {
offset: [0, 25],
width: 68,
height: 20,
formatter: `{rate|${diffValue}}{text|差值}`,
formatter: (params) => {
const currentDiff = diffValue || 0;
const currentFlag = flagValue || 0;
const prefix = currentFlag === 1 ? '+' : '';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
@@ -125,11 +139,35 @@ export default {
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 }
text: {
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646',
fontSize: 11,
lineHeight: 20
},
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}
}
},
// 修复：flag颜色判断独立绑定到实际值柱子

25
src/views/home/netPriceAnalysisComponents/yearRelatedMetrics.vue
View File

@@ -12,7 +12,7 @@
<div class="line">
<operatingSingleBar :detailData="{
...(relatedTotal.单价 || defaultData),
flag: getRateFlag((relatedTotal.单价 || defaultData).completeRate)
flag: getRateFlag((relatedTotal.单价 || defaultData).completeRate, (relatedTotal.单价 || defaultData).real, (relatedTotal.单价 || defaultData).target)
}" />
</div>
</div>
@@ -23,7 +23,7 @@
<div class="line">
<operatingSingleBar :detailData="{
...(relatedTotal.运费 || defaultData),
flag: getRateFlag((relatedTotal.运费 || defaultData).completeRate)
flag: getRateFlag((relatedTotal.运费 || defaultData).completeRate, (relatedTotal.运费 || defaultData).real, (relatedTotal.运费 || defaultData).target)
}" />
</div>
</div>
@@ -104,21 +104,24 @@ export default {
* @param {number} rate 完成率（原始值，如89代表89%）
* @returns {0|1} flag值
*/
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
/**
* 图表更新方法：可在这里补充全局的图表刷新逻辑
* 若子组件内部已监听 chartData 变化，此方法可留空或补充额外逻辑
*/
updateChart() {
console.log('数据更新，当前relatedMon:', this.relatedTotal)
// 打印各维度的flag值，方便调试
// console.log('销量flag:', this.getRateFlag(this.relatedTotal.销量.completeRate))
// console.log('成本flag:', this.getRateFlag(this.relatedTotal.成本.completeRate))
// console.log('运费flag:', this.getRateFlag(this.relatedTotal.运费.completeRate))
}
}
}

20
src/views/home/operatingComponents/dataTrend.vue
View File

@@ -98,11 +98,11 @@ export default {
const diff = Number(item.diff) || 0;
// 计算达标标识（≥100 → 1，<100 → 0）
const flag = this.getRateFlag(rate);
const flag = this.getRateFlag(rate, real, budget);
// 填充数组
months.push(month);
rates.push(Math.round(rate * 100)); // 转为百分比并取整
rates.push(rate); // 转为百分比并取整
reals.push(real);
budgets.push(budget);
diffs.push(diff);
@@ -127,10 +127,18 @@ export default {
* @param {Number} rate - 完成率（原始值，如1.2 → 120%）
* @returns {Number} 1: 达标（≥100%），0: 未达标（<100%）
*/
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
},
};
</script>

55
src/views/home/operatingComponents/dataTrendBar.vue
View File

@@ -151,52 +151,63 @@ export default {
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: function (params) {
formatter: (params) => {
const diff = data.diffs || [];
const flags = data.flags || [];
const currentDiff = diff[params.dataIndex] || 0;
return `{rate|${currentDiff}}{text|差值}`;
const currentFlag = flags[params.dataIndex] || 0;
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
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: 0, color: 'rgba(205, 215, 224, 0.6)' },
{ 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], // 缩小内边距
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
color: '#464646',
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}

20
src/views/home/operatingComponents/monthlyRelatedMetrics.vue
View File

@@ -90,10 +90,18 @@ export default {
})
},
// 判断flag的核心方法
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
updateChart(data) {
// 数据兜底
@@ -103,12 +111,12 @@ export default {
// 核心修改：将flag整合到数据对象中，无需单独定义salesFlag/unitPriceFlag
this.salesData = {
...salesItem, // 合并原有字段
flag: this.getRateFlag(salesItem.rate) // 新增flag字段
flag: this.getRateFlag(salesItem.rate, salesItem.real, salesItem.budget) // 新增flag字段
};
this.unitPriceData = {
...unitPriceItem, // 合并原有字段
flag: this.getRateFlag(unitPriceItem.rate) // 新增flag字段
flag: this.getRateFlag(unitPriceItem.rate, unitPriceItem.real, unitPriceItem.budget) // 新增flag字段
};
// 调试：确认整合后的数据

35
src/views/home/operatingComponents/operatingBar.vue
View File

@@ -51,7 +51,7 @@ import * as echarts from 'echarts';
export default {
name: "Container",
components: { operatingLineBar },
props: ["chartData",'dateData'],
props: ["chartData", 'dateData'],
emits: ['sort-change'], // 声明事件（Vue3 推荐）
data() {
return {
@@ -177,12 +177,24 @@ export default {
show: true,
position: 'top',
offset: [30, 0],
width: 68,
width: 100,
height: 20,
formatter: (params) => {
const diff = data.diff || [];
const flags = data.flags || [];
const currentDiff = diff[params.dataIndex] || 0;
return `{rate|${currentDiff}}{text|差值}`;
const currentFlag = flags[params.dataIndex] || 0;
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
@@ -210,11 +222,20 @@ export default {
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}
@@ -395,7 +416,7 @@ export default {
height: 24px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 12px;
fontSize: 12px;
line-height: 24px;
font-style: normal;
letter-spacing: 2px;
@@ -467,7 +488,7 @@ export default {
.dropdown-option {
padding: 6px 12px;
font-size: 12px;
fontSize: 12px;
color: #333;
cursor: pointer;
text-align: left;

26
src/views/home/operatingComponents/operatingLineBarSale.vue
View File

@@ -67,18 +67,32 @@ export default {
this.myChart = echarts.init(chartDom);
// 绑定点击事件（只绑定一次，永久生效）
this.myChart.on('click', (params) => {
this.myChart.getZr().on('click', (params) => {
console.log('params', params);
// 提取点击的基地名称
const itemName = params.name;
// const itemName = params.name;
let itemName = undefined
// 根据映射表获取对应的序号（未匹配到则返回0或其他默认值）
let pointInPixel = [params.offsetX, params.offsetY];
if (this.myChart.containPixel('grid', pointInPixel)) {
let pointInGrid = this.myChart.convertFromPixel({
seriesIndex: 0
}, pointInPixel);
let xIndex = pointInGrid[0]; //索引
let handleIndex = Number(xIndex);
let seriesObj = this.myChart.getOption(); //图表object对象
var op = this.myChart.getOption();
//获得图表中点击的列
itemName = op.xAxis[0].data[handleIndex]; //获取点击的列名
console.log(itemName, 'monthmonthmonth');
console.log(handleIndex, seriesObj);
};
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: 'operatingRevenueBase',

20
src/views/home/operatingComponents/operatingLineChart.vue
View File

@@ -90,10 +90,18 @@ export default {
* @param {number} rate 处理后的rate值（已*100）
* @returns {0|1} flag值
*/
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
/**
* 核心处理函数：在所有数据都准备好后，才组装 chartData
*/
@@ -107,7 +115,7 @@ export default {
const groupReal = [this.groupData.real]; // 实际值数组
const groupRate = [this.groupData.rate]; // 完成率数组
// 新增：集团rate对应的flag
const groupFlag = [this.getRateFlag(groupRate[0])];
const groupFlag = [this.getRateFlag(groupRate[0], groupReal[0], groupTarget[0])];
console.log('集团数据数组：', {
groupTarget,
@@ -128,7 +136,7 @@ export default {
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));
const factoryFlags = this.factoryData.map(item => this.getRateFlag(item.rate, item.real, item.budget));
// 3. 组装最终的chartData（供子组件使用）
this.chartData = {

20
src/views/home/operatingComponents/operatingLineChartCumulative.vue
View File

@@ -85,10 +85,18 @@ export default {
* @param {number} rate 处理后的rate值（已*100）
* @returns {0|1} flag值
*/
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
/**
* 核心处理函数：在所有数据都准备好后，才组装 chartData
@@ -103,7 +111,7 @@ export default {
const groupReal = [this.groupData.real]; // 实际值数组
const groupRate = [this.groupData.rate]; // 完成率数组
// 新增：集团rate对应的flag
const groupFlag = [this.getRateFlag(groupRate[0])];
const groupFlag = [this.getRateFlag(groupRate[0], groupReal[0], groupTarget[0])];
console.log('集团数据数组：', {
groupTarget,
@@ -124,7 +132,7 @@ export default {
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));
const factoryFlags = this.factoryData.map(item => this.getRateFlag(item.rate, item.real, item.budget));
// 3. 组装最终的chartData（供子组件使用）
this.chartData = {

70
src/views/home/operatingComponents/operatingSingleBar.vue
View File

@@ -90,8 +90,16 @@ export default {
}
},
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,
borderWidth: 0
},
},
{
@@ -105,52 +113,64 @@ export default {
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: function (params) {
// 假设 params.data 是完成率数值（如 139）
// // 2. 模板字符串拼接富文本标签 + 动态值
return `{rate|${diff}}{text|差值}`;
formatter: (params) => {
// const flags = flags || [];
const currentDiff = diff || 0;
const currentFlag = this.detailData?.flag || 0;
// console.log('flags[params.dataIndex]', flags);
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
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: 0, color: 'rgba(205, 215, 224, 0.6)' },
{ 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], // 缩小内边距
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
color: '#464646',
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}

58
src/views/home/operatingComponents/operatingTopBar.vue
View File

@@ -160,51 +160,63 @@ export default {
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: (params) => {
// const { rate = 0, diff = 0 } = params.data || {};
return `{rate|${diff}}{text|差值}`;
// const flags = flags || [];
const currentDiff = diff || 0;
const currentFlag = data?.flags[0] || 0;
// console.log('flags[params.dataIndex]', flags);
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
// 核心样式：匹配CSS需求
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
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: 0, color: 'rgba(205, 215, 224, 0.6)' },
{ 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], // 缩小内边距
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
color: '#464646',
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}

80
src/views/home/operatingComponents/verticalBarChart.vue
View File

@@ -43,10 +43,18 @@ export default {
}
},
methods: {
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
updateChart() {
const chartDom = this.$refs[this.refName];
if (!chartDom) {
@@ -61,7 +69,7 @@ export default {
this.myChart = echarts.init(chartDom);
const diff = this.detailData.diff || 0
const rate = this.detailData.rate || 0
const flagValue = this.getRateFlag(this.detailData.rate) || 0
const flagValue = this.getRateFlag(this.detailData.rate, this.detailData.real, this.detailData.target) || 0
const option = {
tooltip: {
@@ -150,54 +158,64 @@ export default {
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: function (params) {
// 假设 params.data 是完成率数值（如 139）
// // 2. 模板字符串拼接富文本标签 + 动态值
return `{rate|${diff}}{text|差值}`;
formatter: (params) => {
// const flags = flags || [];
const currentDiff = diff || 0;
const currentFlag = flagValue || 0;
// console.log('flags[params.dataIndex]', flags);
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
// formatter: '',
// 核心样式：匹配CSS需求
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
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: 0, color: 'rgba(205, 215, 224, 0.6)' },
{ 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], // 缩小内边距
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
color: '#464646',
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}

20
src/views/home/operatingComponents/yearRelatedMetrics.vue
View File

@@ -86,10 +86,18 @@ export default {
})
},
// 判断flag的核心方法
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
updateChart(data) {
// 数据兜底
@@ -99,12 +107,12 @@ export default {
// 核心修改：将flag整合到数据对象中，无需单独定义salesFlag/unitPriceFlag
this.salesData = {
...salesItem, // 合并原有字段
flag: this.getRateFlag(salesItem.rate) // 新增flag字段
flag: this.getRateFlag(salesItem.rate, salesItem.real, salesItem.budget) // 新增flag字段
};
this.unitPriceData = {
...unitPriceItem, // 合并原有字段
flag: this.getRateFlag(unitPriceItem.rate) // 新增flag字段
flag: this.getRateFlag(unitPriceItem.rate, unitPriceItem.real, unitPriceItem.budget) // 新增flag字段
};
// 调试：确认整合后的数据

55
src/views/home/operatingProfitComponents/dataTrendBar.vue
View File

@@ -152,52 +152,63 @@ export default {
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: function (params) {
formatter: (params) => {
const diff = data.diffValue || [];
const flags = data.completed || [];
const currentDiff = diff[params.dataIndex] || 0;
return `{rate|${currentDiff}}{text|差值}`;
const currentFlag = flags[params.dataIndex] || 0;
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
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: 0, color: 'rgba(205, 215, 224, 0.6)' },
{ 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], // 缩小内边距
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
color: '#464646',
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}

6
src/views/home/operatingProfitComponents/monthlyOverview.vue
View File

@@ -72,7 +72,7 @@ export default {
target: this.monData.targetValue,
thb: this.monData.thb,
// ...rawData,
flag: this.getRateFlag(this.monData.completed) // 新增flag字段
flag: this.monData.completed // 新增flag字段
};
}
},
@@ -91,10 +91,6 @@ export default {
* @param {number} rate 完成率（原始值，如89代表89%）
* @returns {0|1} flag值
*/
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
}
}
</script>

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

@@ -181,8 +181,20 @@ export default {
height: 20,
formatter: (params) => {
const diff = data.diff || [];
const flags = data.flags || [];
const currentDiff = diff[params.dataIndex] || 0;
return `{rate|${currentDiff}}{text|差值}`;
const currentFlag = flags[params.dataIndex] || 0;
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
@@ -210,11 +222,20 @@ export default {
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}

29
src/views/home/operatingProfitComponents/operatingLineBarSale.vue
View File

@@ -67,15 +67,28 @@ export default {
this.myChart = echarts.init(chartDom);
// 绑定点击事件（只绑定一次，永久生效）
this.myChart.on('click', (params) => {
// 提取点击的基地名称
const itemName = params.name;
// 根据映射表获取对应的序号（未匹配到则返回0或其他默认值）
const baseIndex = this.baseNameToIndexMap[itemName] || 0;
this.myChart.getZr().on('click', (params) => {
console.log('params', params);
// 兼容不同图表类型的value：柱状图value是数值，折线图是[横坐标, 纵坐标]
// const itemValue = Array.isArray(params.value) ? params.value[1] : params.value;
// const seriesName = params.seriesName;
// 提取点击的基地名称
// const itemName = params.name;
let itemName = undefined
// 根据映射表获取对应的序号（未匹配到则返回0或其他默认值）
let pointInPixel = [params.offsetX, params.offsetY];
if (this.myChart.containPixel('grid', pointInPixel)) {
let pointInGrid = this.myChart.convertFromPixel({
seriesIndex: 0
}, pointInPixel);
let xIndex = pointInGrid[0]; //索引
let handleIndex = Number(xIndex);
let seriesObj = this.myChart.getOption(); //图表object对象
var op = this.myChart.getOption();
//获得图表中点击的列
itemName = op.xAxis[0].data[handleIndex]; //获取点击的列名
console.log(itemName, 'monthmonthmonth');
console.log(handleIndex, seriesObj);
};
const baseIndex = this.baseNameToIndexMap[itemName] || 0;
console.log(`你点击了【${itemName}】(序号：${baseIndex})`);

70
src/views/home/operatingProfitComponents/operatingSingleBar.vue
View File

@@ -90,8 +90,16 @@ export default {
}
},
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,
borderWidth: 0
},
},
{
@@ -105,52 +113,64 @@ export default {
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: function (params) {
// 假设 params.data 是完成率数值（如 139）
// // 2. 模板字符串拼接富文本标签 + 动态值
return `{rate|${diff}}{text|差值}`;
formatter: (params) => {
// const flags = flags || [];
const currentDiff = diff || 0;
const currentFlag = this.detailData?.completed || 0;
// console.log('flags[params.dataIndex]', flags);
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
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: 0, color: 'rgba(205, 215, 224, 0.6)' },
{ 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], // 缩小内边距
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
color: '#464646',
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}

58
src/views/home/operatingProfitComponents/operatingTopBar.vue
View File

@@ -160,51 +160,63 @@ export default {
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: (params) => {
// const { rate = 0, diff = 0 } = params.data || {};
return `{rate|${diff}}{text|差值}`;
// const flags = flags || [];
const currentDiff = diff || 0;
const currentFlag = data?.flags[0] || 0;
// console.log('flags[params.dataIndex]', flags);
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
// 核心样式：匹配CSS需求
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
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: 0, color: 'rgba(205, 215, 224, 0.6)' },
{ 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], // 缩小内边距
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
color: '#464646',
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}

6
src/views/home/operatingProfitComponents/totalOverview.vue
View File

@@ -75,7 +75,7 @@ export default {
target: this.totalData.targetValue,
thb: this.totalData.thb,
// ...rawData,
flag: this.getRateFlag(this.totalData.completed) // 新增flag字段
flag: this.totalData.completed // 新增flag字段
};
}
},
@@ -94,10 +94,6 @@ export default {
* @param {number} rate 完成率（原始值，如89代表89%）
* @returns {0|1} flag值
*/
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
}
}
</script>

44
src/views/home/operatingProfitComponents/verticalBarChart.vue
View File

@@ -111,7 +111,21 @@ export default {
offset: [0, 25],
width: 68,
height: 20,
formatter: `{rate|${diffValue}}{text|差值}`,
formatter: (params) => {
const currentDiff = diffValue || 0;
const currentFlag = flagValue || 0;
const prefix = currentFlag === 1 ? '+' : '';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
@@ -126,11 +140,35 @@ export default {
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 }
text: {
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646',
fontSize: 11,
lineHeight: 20
},
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}
}
},
// 修复：flag颜色判断独立绑定到实际值柱子

59
src/views/home/procurementGainAnalysisComponents/dataTrendBar.vue
View File

@@ -187,52 +187,63 @@ export default {
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: function (params) {
const diff = diffs || [];
const currentDiff = diff[params.dataIndex] || 0;
return `{rate|${currentDiff}}{text|差值}`;
formatter: (params) => {
// const diff = data.diff || [];
// const flags = data.flags || [];
const currentDiff = diffs[params.dataIndex] || 0;
const currentFlag = flags[params.dataIndex] || 0;
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
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: 0, color: 'rgba(205, 215, 224, 0.6)' },
{ 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], // 缩小内边距
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
color: '#464646',
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}

18
src/views/home/procurementGainAnalysisComponents/monthlyOverview.vue
View File

@@ -87,7 +87,7 @@ export default {
target: 0,
thb: 0,
...rawData,
flag: this.getRateFlag(rawData.completeRate) // 新增flag字段
flag: this.getRateFlag(rawData.completeRate, rawData.real, rawData.target) // 新增flag字段
};
}
},
@@ -106,10 +106,18 @@ export default {
* @param {number} rate 完成率（原始值，如89代表89%）
* @returns {0|1} flag值
*/
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
}
}
</script>

27
src/views/home/procurementGainAnalysisComponents/operatingBar.vue
View File

@@ -181,8 +181,20 @@ export default {
height: 20,
formatter: (params) => {
const diff = data.diff || [];
const flags = data.flags || [];
const currentDiff = diff[params.dataIndex] || 0;
return `{rate|${currentDiff}}{text|差值}`;
const currentFlag = flags[params.dataIndex] || 0;
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
@@ -210,11 +222,20 @@ export default {
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}

26
src/views/home/procurementGainAnalysisComponents/operatingLineBarSale.vue
View File

@@ -68,18 +68,32 @@ export default {
this.myChart = echarts.init(chartDom);
// 绑定点击事件（只绑定一次，永久生效）
this.myChart.on('click', (params) => {
this.myChart.getZr().on('click', (params) => {
console.log('params', params);
// 提取点击的基地名称
const itemName = params.name;
// const itemName = params.name;
let itemName = undefined
// 根据映射表获取对应的序号（未匹配到则返回0或其他默认值）
let pointInPixel = [params.offsetX, params.offsetY];
if (this.myChart.containPixel('grid', pointInPixel)) {
let pointInGrid = this.myChart.convertFromPixel({
seriesIndex: 0
}, pointInPixel);
let xIndex = pointInGrid[0]; //索引
let handleIndex = Number(xIndex);
let seriesObj = this.myChart.getOption(); //图表object对象
var op = this.myChart.getOption();
//获得图表中点击的列
itemName = op.xAxis[0].data[handleIndex]; //获取点击的列名
console.log(itemName, 'monthmonthmonth');
console.log(handleIndex, seriesObj);
};
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: 'procurementGainAnalysisBase',

20
src/views/home/procurementGainAnalysisComponents/operatingLineChart.vue
View File

@@ -82,10 +82,18 @@ export default {
* @param {number} rate 完成率（原始值，如80代表80%）
* @returns {0|1} flag值
*/
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
/**
* 核心处理函数：解析thisMonData，组装集团和工厂数据
@@ -105,7 +113,7 @@ export default {
diff: [ksxnData.diff],
reals: [ksxnData.real],
rate: [ksxnData.completeRate],
flags: [this.getRateFlag(ksxnData.completeRate)],
flags: [this.getRateFlag(ksxnData.completeRate, ksxnData.real, ksxnData.target)],
thb: [ksxnData.thb] // 新增thb字段（如果子组件需要）
};
@@ -120,7 +128,7 @@ export default {
diff: factoryDataList.map(item => item.diff || 0), // 差值
reals: factoryDataList.map(item => item.real || 0), // 实际值
rates: factoryDataList.map(item => item.completeRate || 0), // 完成率
flags: factoryDataList.map(item => this.getRateFlag(item.completeRate)), // 完成率标识
flags: factoryDataList.map(item => this.getRateFlag(item.completeRate, item.real, item.target)), // 完成率标识
thb: factoryDataList.map(item => item.thb || 0) // thb字段
};

20
src/views/home/procurementGainAnalysisComponents/operatingLineChartCumulative.vue
View File

@@ -82,10 +82,18 @@ export default {
* @param {number} rate 完成率（原始值，如80代表80%）
* @returns {0|1} flag值
*/
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
/**
* 核心处理函数：解析thisMonData，组装集团和工厂数据
@@ -105,7 +113,7 @@ export default {
diff: [ksxnData.diff],
reals: [ksxnData.real],
rate: [ksxnData.completeRate],
flags: [this.getRateFlag(ksxnData.completeRate)],
flags: [this.getRateFlag(ksxnData.completeRate, ksxnData.real, ksxnData.target)],
thb: [ksxnData.thb] // 新增thb字段（如果子组件需要）
};
@@ -120,7 +128,7 @@ export default {
diff: factoryDataList.map(item => item.diff || 0), // 差值
reals: factoryDataList.map(item => item.real || 0), // 实际值
rates: factoryDataList.map(item => item.completeRate || 0), // 完成率
flags: factoryDataList.map(item => this.getRateFlag(item.completeRate)), // 完成率标识
flags: factoryDataList.map(item => this.getRateFlag(item.completeRate, item.real, item.target)), // 完成率标识
thb: factoryDataList.map(item => item.thb || 0) // thb字段
};

70
src/views/home/procurementGainAnalysisComponents/operatingSingleBar.vue
View File

@@ -90,8 +90,16 @@ export default {
}
},
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,
borderWidth: 0
},
},
{
@@ -105,52 +113,64 @@ export default {
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: function (params) {
// 假设 params.data 是完成率数值（如 139）
// // 2. 模板字符串拼接富文本标签 + 动态值
return `{rate|${diff}}{text|差值}`;
formatter: (params) => {
// const flags = flags || [];
const currentDiff = diff || 0;
const currentFlag = this.detailData?.flag || 0;
// console.log('flags[params.dataIndex]', flags);
const prefix = currentFlag === 1 ? '+' : '';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
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: 0, color: 'rgba(205, 215, 224, 0.6)' },
{ 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], // 缩小内边距
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
color: '#464646',
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}

58
src/views/home/procurementGainAnalysisComponents/operatingTopBar.vue
View File

@@ -160,51 +160,63 @@ export default {
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: (params) => {
// const { rate = 0, diff = 0 } = params.data || {};
return `{rate|${diff}}{text|差值}`;
// const flags = flags || [];
const currentDiff = diff || 0;
const currentFlag = data?.flags[0] || 0;
// console.log('flags[params.dataIndex]', flags);
const prefix = currentFlag === 1 ? '+' : '';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
// 核心样式：匹配CSS需求
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
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: 0, color: 'rgba(205, 215, 224, 0.6)' },
{ 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], // 缩小内边距
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
color: '#464646',
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}

18
src/views/home/procurementGainAnalysisComponents/totalOverview.vue
View File

@@ -90,7 +90,7 @@ export default {
target: 0,
thb: 0,
...rawData,
flag: this.getRateFlag(rawData.completeRate) // 新增flag字段
flag: this.getRateFlag(rawData.completeRate, rawData.real, rawData.target) // 新增flag字段
};
}
},
@@ -109,10 +109,18 @@ export default {
* @param {number} rate 完成率（原始值，如89代表89%）
* @returns {0|1} flag值
*/
getRateFlag(rate) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0）
},
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
}
}
</script>

44
src/views/home/procurementGainAnalysisComponents/verticalBarChart.vue
View File

@@ -110,7 +110,21 @@ export default {
offset: [0, 25],
width: 68,
height: 20,
formatter: `{rate|${diffValue}}{text|差值}`,
formatter: (params) => {
const currentDiff = diffValue || 0;
const currentFlag = flagValue || 0;
const prefix = currentFlag === 1 ? '+' : '';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
@@ -125,11 +139,35 @@ export default {
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 }
text: {
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646',
fontSize: 11,
lineHeight: 20
},
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}
}
},
// 修复：flag颜色判断独立绑定到实际值柱子

55
src/views/home/productionCostAnalysisComponents/dataTrendBar.vue
View File

@@ -151,52 +151,63 @@ export default {
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: function (params) {
formatter: (params) => {
const diff = data.diffValue || [];
const flags = data.completed || [];
const currentDiff = diff[params.dataIndex] || 0;
return `{rate|${currentDiff}}{text|差值}`;
const currentFlag = flags[params.dataIndex] || 0;
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
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: 0, color: 'rgba(205, 215, 224, 0.6)' },
{ 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], // 缩小内边距
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
color: '#464646',
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}

55
src/views/home/productionCostAnalysisComponents/dataTrendBarCombustible.vue
View File

@@ -149,52 +149,63 @@ export default {
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: function (params) {
formatter: (params) => {
const diff = data.diffValue || [];
const flags = data.completed || [];
const currentDiff = diff[params.dataIndex] || 0;
return `{rate|${currentDiff}}{text|差值}`;
const currentFlag = flags[params.dataIndex] || 0;
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
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: 0, color: 'rgba(205, 215, 224, 0.6)' },
{ 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], // 缩小内边距
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
color: '#464646',
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}

55
src/views/home/productionCostAnalysisComponents/dataTrendBarFactoryBurden.vue
View File

@@ -150,52 +150,63 @@ export default {
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: function (params) {
formatter: (params) => {
const diff = data.diffValue || [];
const flags = data.completed || [];
const currentDiff = diff[params.dataIndex] || 0;
return `{rate|${currentDiff}}{text|差值}`;
const currentFlag = flags[params.dataIndex] || 0;
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
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: 0, color: 'rgba(205, 215, 224, 0.6)' },
{ 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], // 缩小内边距
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
color: '#464646',
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}

55
src/views/home/productionCostAnalysisComponents/dataTrendBarFuel.vue
View File

@@ -151,52 +151,63 @@ export default {
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: function (params) {
formatter: (params) => {
const diff = data.diffValue || [];
const flags = data.completed || [];
const currentDiff = diff[params.dataIndex] || 0;
return `{rate|${currentDiff}}{text|差值}`;
const currentFlag = flags[params.dataIndex] || 0;
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
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: 0, color: 'rgba(205, 215, 224, 0.6)' },
{ 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], // 缩小内边距
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
color: '#464646',
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}

55
src/views/home/productionCostAnalysisComponents/dataTrendBarPro.vue
View File

@@ -149,52 +149,63 @@ export default {
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: function (params) {
formatter: (params) => {
const diff = data.diffValue || [];
const flags = data.completed || [];
const currentDiff = diff[params.dataIndex] || 0;
return `{rate|${currentDiff}}{text|差值}`;
const currentFlag = flags[params.dataIndex] || 0;
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
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: 0, color: 'rgba(205, 215, 224, 0.6)' },
{ 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], // 缩小内边距
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
color: '#464646',
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}

55
src/views/home/productionCostAnalysisComponents/dataTrendBarProcAuxMat.vue
View File

@@ -149,52 +149,63 @@ export default {
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: function (params) {
formatter: (params) => {
const diff = data.diffValue || [];
const flags = data.completed || [];
const currentDiff = diff[params.dataIndex] || 0;
return `{rate|${currentDiff}}{text|差值}`;
const currentFlag = flags[params.dataIndex] || 0;
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${prefix}${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${prefix}${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
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: 0, color: 'rgba(205, 215, 224, 0.6)' },
{ 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], // 缩小内边距
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
color: '#464646',
fontSize: 11,
lineHeight: 20
},
rate: {
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}

Some files were not shown because too many files have changed in this diff Show More