@@ -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);
diff --git a/src/views/home/inputOutputRatioComponents/dataTrend.vue b/src/views/home/inputOutputRatioComponents/dataTrend.vue
index 48a67397..b6c2db19 100644
--- a/src/views/home/inputOutputRatioComponents/dataTrend.vue
+++ b/src/views/home/inputOutputRatioComponents/dataTrend.vue
@@ -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;
+},
},
};
diff --git a/src/views/home/inputOutputRatioComponents/dataTrendBar.vue b/src/views/home/inputOutputRatioComponents/dataTrendBar.vue
index a7f99253..ea7607f1 100644
--- a/src/views/home/inputOutputRatioComponents/dataTrendBar.vue
+++ b/src/views/home/inputOutputRatioComponents/dataTrendBar.vue
@@ -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
}
diff --git a/src/views/home/inputOutputRatioComponents/monthlyRelatedMetrics.vue b/src/views/home/inputOutputRatioComponents/monthlyRelatedMetrics.vue
index 3295327c..61262ab3 100644
--- a/src/views/home/inputOutputRatioComponents/monthlyRelatedMetrics.vue
+++ b/src/views/home/inputOutputRatioComponents/monthlyRelatedMetrics.vue
@@ -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)
};
// 调试日志
diff --git a/src/views/home/inputOutputRatioComponents/operatingBar.vue b/src/views/home/inputOutputRatioComponents/operatingBar.vue
index 411b1c12..c95f3e7e 100644
--- a/src/views/home/inputOutputRatioComponents/operatingBar.vue
+++ b/src/views/home/inputOutputRatioComponents/operatingBar.vue
@@ -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
}
diff --git a/src/views/home/inputOutputRatioComponents/operatingLineBarSale.vue b/src/views/home/inputOutputRatioComponents/operatingLineBarSale.vue
index 8db29e89..aa285bba 100644
--- a/src/views/home/inputOutputRatioComponents/operatingLineBarSale.vue
+++ b/src/views/home/inputOutputRatioComponents/operatingLineBarSale.vue
@@ -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',
diff --git a/src/views/home/inputOutputRatioComponents/operatingLineChart.vue b/src/views/home/inputOutputRatioComponents/operatingLineChart.vue
index 9da2f4a3..7c5bd812 100644
--- a/src/views/home/inputOutputRatioComponents/operatingLineChart.vue
+++ b/src/views/home/inputOutputRatioComponents/operatingLineChart.vue
@@ -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 = {
diff --git a/src/views/home/inputOutputRatioComponents/operatingLineChartCumulative.vue b/src/views/home/inputOutputRatioComponents/operatingLineChartCumulative.vue
index c9145bbb..0c439f47 100644
--- a/src/views/home/inputOutputRatioComponents/operatingLineChartCumulative.vue
+++ b/src/views/home/inputOutputRatioComponents/operatingLineChartCumulative.vue
@@ -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 = {
diff --git a/src/views/home/inputOutputRatioComponents/operatingSingleBar.vue b/src/views/home/inputOutputRatioComponents/operatingSingleBar.vue
index d1562ceb..997f61a4 100644
--- a/src/views/home/inputOutputRatioComponents/operatingSingleBar.vue
+++ b/src/views/home/inputOutputRatioComponents/operatingSingleBar.vue
@@ -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
}
diff --git a/src/views/home/inputOutputRatioComponents/operatingTopBar.vue b/src/views/home/inputOutputRatioComponents/operatingTopBar.vue
index d8afea7c..fd995cf9 100644
--- a/src/views/home/inputOutputRatioComponents/operatingTopBar.vue
+++ b/src/views/home/inputOutputRatioComponents/operatingTopBar.vue
@@ -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
}
diff --git a/src/views/home/inputOutputRatioComponents/verticalBarChart.vue b/src/views/home/inputOutputRatioComponents/verticalBarChart.vue
index 0ed4bba3..73ae2fc2 100644
--- a/src/views/home/inputOutputRatioComponents/verticalBarChart.vue
+++ b/src/views/home/inputOutputRatioComponents/verticalBarChart.vue
@@ -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
}
diff --git a/src/views/home/inputOutputRatioComponents/yearRelatedMetrics.vue b/src/views/home/inputOutputRatioComponents/yearRelatedMetrics.vue
index e49d60dd..6cef2502 100644
--- a/src/views/home/inputOutputRatioComponents/yearRelatedMetrics.vue
+++ b/src/views/home/inputOutputRatioComponents/yearRelatedMetrics.vue
@@ -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)
};
// 调试日志
diff --git a/src/views/home/netPriceAnalysisComponents/dataTrend.vue b/src/views/home/netPriceAnalysisComponents/dataTrend.vue
index 6b9e8afe..f70b1671 100644
--- a/src/views/home/netPriceAnalysisComponents/dataTrend.vue
+++ b/src/views/home/netPriceAnalysisComponents/dataTrend.vue
@@ -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;
+},
}
};
diff --git a/src/views/home/netPriceAnalysisComponents/dataTrendBar.vue b/src/views/home/netPriceAnalysisComponents/dataTrendBar.vue
index 7269910f..d5bc88f5 100644
--- a/src/views/home/netPriceAnalysisComponents/dataTrendBar.vue
+++ b/src/views/home/netPriceAnalysisComponents/dataTrendBar.vue
@@ -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;
}
}
};
diff --git a/src/views/home/netPriceAnalysisComponents/monthlyOverview.vue b/src/views/home/netPriceAnalysisComponents/monthlyOverview.vue
index bb4ab2c4..3a411dc2 100644
--- a/src/views/home/netPriceAnalysisComponents/monthlyOverview.vue
+++ b/src/views/home/netPriceAnalysisComponents/monthlyOverview.vue
@@ -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;
+},
}
}
diff --git a/src/views/home/netPriceAnalysisComponents/monthlyRelatedMetrics.vue b/src/views/home/netPriceAnalysisComponents/monthlyRelatedMetrics.vue
index 723e3d0a..33fed4cf 100644
--- a/src/views/home/netPriceAnalysisComponents/monthlyRelatedMetrics.vue
+++ b/src/views/home/netPriceAnalysisComponents/monthlyRelatedMetrics.vue
@@ -12,7 +12,7 @@
@@ -23,7 +23,7 @@