diff --git a/.env.dev b/.env.dev index c8f7babc..a5e7dc35 100644 --- a/.env.dev +++ b/.env.dev @@ -5,8 +5,8 @@ ENV = 'development' VUE_APP_TITLE = 洛玻集团驾驶舱 # 芋道管理系统/开发环境 -# VUE_APP_BASE_API = 'http://172.16.32.18:7070' -VUE_APP_BASE_API = 'http://172.16.32.95:7070' +VUE_APP_BASE_API = 'http://172.16.32.18:7070' +# VUE_APP_BASE_API = 'http://172.16.32.95:7070' # VUE_APP_BASE_API = 'http://172.16.33.83:7070' # VUE_APP_BASE_API = 'http://192.168.0.35:7070' diff --git a/src/api/cockpit.js b/src/api/cockpit.js index 44a1ddb8..92ca4558 100644 --- a/src/api/cockpit.js +++ b/src/api/cockpit.js @@ -194,3 +194,55 @@ export function getInputOutputRateFactoryData(data) { data: data, }); } +export function getUnitPriceAnalysisGroupData(data) { + return request({ + url: "/lb/unit-price-analysis/getGroupData", + method: "post", + data: data, + }); +} +export function getUnitPriceAnalysisBaseData(data) { + return request({ + url: "/lb/unit-price-analysis/getBaseData", + method: "post", + data: data, + }); +} + +export function getProfitAnalysisManageList(data) { + return request({ + url: "/lb/profit-analysis/manageList", + method: "post", + data: data, + }); +} + +export function getProfitAnalysisTotalList(data) { + return request({ + url: "/lb/profit-analysis/profitTotalList", + method: "post", + data: data, + }); +} +export function getCostAnalysisData(data) { + return request({ + url: "/lb/cost-analysis/XXCostList2", + method: "post", + data: data, + }); +} + +export function getSingleMaterialAnalysis(data) { + return request({ + url: "/lb/cost-analysis/singleMaterialAnalysis", + method: "post", + data: data, + }); +} +export function getSingleMaterialCostAnalysis(data) { + return request({ + url: "/lb/cost-analysis/singleMaterialCostAnalysis", + method: "post", + data: data, + }); +} diff --git a/src/views/home/components/Header.vue b/src/views/home/components/Header.vue index 82c397d1..0c5848fb 100644 --- a/src/views/home/components/Header.vue +++ b/src/views/home/components/Header.vue @@ -8,9 +8,9 @@
-
+
@@ -188,7 +188,7 @@ export default { height: 117px; width: 100%; display: flex; - justify-content: space-around; + justify-content: space-between; background: url('../../../assets/img/topTitle.png') no-repeat; background-size: cover; background-position: 0 0; @@ -339,7 +339,7 @@ export default { display: flex; flex-direction: column; margin-top: 12px; - margin-right: 4px; + margin-right: 16px; gap: 20px; } diff --git a/src/views/home/components/changeBase.vue b/src/views/home/components/changeBase.vue index 0f5a9c8c..8defd54f 100644 --- a/src/views/home/components/changeBase.vue +++ b/src/views/home/components/changeBase.vue @@ -26,52 +26,52 @@ import bgBaseTongcheng from '@/assets/images/bgBase/桐城.png'; import bgBaseLuoyang from '@/assets/images/bgBase/洛阳.png'; import bgBaseHefei from '@/assets/images/bgBase/合肥.png'; import bgBaseSuqian from '@/assets/images/bgBase/宿迁.png'; -import bgBaseQinhuangdao from '@/assets/images/bgBase/秦皇岛.png'; +import bgBaseQinhuangdao from '@/assets/images/bgBase/秦皇岛.png';// 补充：江苏 export default { name: "BaseSelector", props: { factory: { - type: Number, - default: 1, // 默认选中宜兴（序号1） - validator: (val) => val >= 1 && val <= 8 // 校验序号范围 + type: [String, Number], + default: 5, // 新映射中“宜兴”对应序号7 + validator: (val) => [5, 2, 7, 3, 8, 9, 10].includes(val) // 校验序号范围（匹配新的baseNameToIndexMap） } }, data() { return { - activeButton: 0, // 初始化默认选中索引0（宜兴） - buttonList: ['宜兴', '漳州', '自贡', '桐城', '洛阳', '合肥', '宿迁', '秦皇岛'], + activeButton: 5, // 初始化默认选中索引2（对应buttonList中的“宜兴”） + buttonList: ['合肥', '桐城', '宜兴', '自贡', '漳州', '洛阳', '秦皇岛', '宿迁'], // 匹配截图顺序 imgMap: { base: { - 宜兴: baseYixing, - 漳州: baseZhangzhou, - 自贡: baseZigong, - 桐城: baseTongcheng, - 洛阳: baseLuoyang, 合肥: baseHefei, - 宿迁: baseSuqian, - 秦皇岛: baseQinhuangdao + 桐城: baseTongcheng, + 宜兴: baseYixing, + 自贡: baseZigong, + 漳州: baseZhangzhou, + 洛阳: baseLuoyang, + 秦皇岛: baseQinhuangdao, + 宿迁: baseSuqian }, bgBase: { - 宜兴: bgBaseYixing, - 漳州: bgBaseZhangzhou, - 自贡: bgBaseZigong, - 桐城: bgBaseTongcheng, - 洛阳: bgBaseLuoyang, 合肥: bgBaseHefei, - 宿迁: bgBaseSuqian, - 秦皇岛: bgBaseQinhuangdao + 桐城: bgBaseTongcheng, + 宜兴: bgBaseYixing, + 自贡: bgBaseZigong, + 漳州: bgBaseZhangzhou, + 洛阳: bgBaseLuoyang, + 秦皇岛: bgBaseQinhuangdao, + 宿迁: bgBaseSuqian } }, - baseNameToIndex: { - 宜兴: 1, - 漳州: 2, + baseNameToIndexMap: { // 新的名称→序号映射 + 宜兴: 7, + 漳州: 8, 自贡: 3, - 桐城: 4, - 洛阳: 5, - 合肥: 6, - 宿迁: 7, - 秦皇岛: 8 + 桐城: 2, + 洛阳: 9, + 合肥: 5, + 秦皇岛: 10, // 补充 + 宿迁: 6 // 补充 } }; }, @@ -79,20 +79,20 @@ export default { // 监听父组件传递的factory变化，同步本地选中索引 factory: { handler(newVal) { - // 强制转换为数字，避免非数字值导致错误 - const val = Number(newVal); - if (val >= 1 && val <= 8) { - this.activeButton = val - 1; // 序号1→索引0（宜兴） - } else { - this.activeButton = 0; // 非法值默认选中宜兴 - } + // 根据新的baseNameToIndexMap，找到对应的基地名称 + const targetName = Object.keys(this.baseNameToIndexMap).find(name => this.baseNameToIndexMap[name] === newVal); + // 根据名称找到buttonList中的索引 + const targetIndex = this.buttonList.indexOf(targetName); + // 合法索引则更新，否则默认选中宜兴 + this.activeButton = targetIndex > -1 ? targetIndex : 2; console.log('当前选中基地：', this.buttonList[this.activeButton], '序号：', newVal); }, immediate: true // 初始化立即执行 }, // 监听本地选中索引变化，向父组件发送事件 activeButton(newVal) { - const selectedIndex = newVal + 1; // 索引0→序号1 + const selectedName = this.buttonList[newVal]; + const selectedIndex = this.baseNameToIndexMap[selectedName] || 5; // 默认返回宜兴的序号7 this.$emit('baseChange', selectedIndex); } }, @@ -101,12 +101,12 @@ export default { this.activeButton = index; }, getIndexByName(name) { - return this.baseNameToIndex[name] || 1; + return this.baseNameToIndexMap[name] || 5; } }, mounted() { - // 修复：初始化时触发事件，传递默认选中的宜兴序号（1） - this.$emit('baseChange', 1); + // 初始化时触发事件，传递默认选中的宜兴序号（7） + this.$emit('baseChange', 5); } }; @@ -126,7 +126,7 @@ export default { text-align: center; cursor: pointer; white-space: nowrap; - margin-right: -35px; + margin-right: -35px; // 重叠效果，可根据需求调整 transition: all 0.2s ease; &:hover, diff --git a/src/views/home/components/coresBar.vue b/src/views/home/components/coresBar.vue index 289ce516..a1682b6c 100644 --- a/src/views/home/components/coresBar.vue +++ b/src/views/home/components/coresBar.vue @@ -118,11 +118,11 @@ export default { } ], yAxis: { - type: 'value', + // type: 'value', nameTextStyle: { color: 'rgba(0, 0, 0, 0.45)', fontSize: 14, align: 'left' }, // min: () => 0, // max: (value) => Math.ceil(value.max), - // scale: true, + scale: true, axisTick: { show: false }, axisLabel: { color: 'rgba(0, 0, 0, 0.45)', fontSize: 12 }, splitLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } }, diff --git a/src/views/home/components/purchase-Item.vue b/src/views/home/components/purchase-Item.vue index 2629b9b2..8707aeb1 100644 --- a/src/views/home/components/purchase-Item.vue +++ b/src/views/home/components/purchase-Item.vue @@ -54,50 +54,37 @@ export default { name: "Container", components: {}, - props: ["finance",'dateData'], + props: { + finance: { + type: Object, + default: () => ({}) // 明确props默认值为空对象 + }, + dateData: { + type: Object, + default: () => ({}) + } + }, data() { return { - // itemList: [ - // { - // name: "营业收入·万元", - // targetValue: 16, - // currentValue: 17.2, // 大于目标值（绿色） - // progress: 107.5, - // route: 'operatingRevenue' - // }, - // { - // name: "经营性利润·万元", - // targetValue: 16, - // currentValue: 16, // 等于目标值（绿色） - // progress: 100, - // route: 'profitAnalysis' - // }, - // { - // name: "利润总额·万元", - // targetValue: 16, - // currentValue: 14.8, // 小于目标值（黄色） - // progress: 92.5, - // route: 'profitAnalysis' - // }, - // { - // name: "毛利率·%", - // targetValue: 16, - // currentValue: 15.5, // 小于目标值（黄色） - // progress: 96.875, - // route: 'profitAnalysis' - // } - // ] + // 关键修复1：初始化itemList为空数组（必选，否则初始状态下v-for报错且数据无法响应式更新） + itemList: [] }; }, watch: { finance: { handler(newVal) { - if (newVal) { + // 关键修复2：增强数据判断，避免空值/无效值触发错误 + if (newVal && Object.keys(newVal).length > 0) { + // 转换数据并赋值给itemList（响应式更新） this.itemList = this.transformData(newVal); + console.log('finance更新，itemList已同步', this.itemList); + } else { + // 当finance为空时，重置itemList为空数组 + this.itemList = []; } }, - immediate: true, - deep: true + immediate: true, // 组件挂载时立即执行，初始化数据 + deep: true // 深度监听finance对象内部属性变化 } }, methods: { @@ -112,13 +99,18 @@ export default { // 遍历映射关系，转换数据 return Mapping.map(mappingItem => { + // 关键修复3：兜底更严谨，避免rawData[mappingItem.key]不存在导致报错 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; return { name: mappingItem.name, - targetValue: data.target, - currentValue: data.real, - progress: Math.round(data.rate), // 将小数率转换为百分比并四舍五入 + targetValue: target, + currentValue: real, + progress: Math.round(rate), // 将小数率转换为百分比并四舍五入 route: mappingItem.route }; }); @@ -128,9 +120,10 @@ export default { this.$router.push({ path: route, query: { - dateData: this.dateData + // 关键修复4：dateData是对象，需序列化后传递（否则路由query无法正常接收对象） + dateData: JSON.stringify(this.dateData) } - }); + }); } } } @@ -254,7 +247,7 @@ export default { /* 进度条 - 实际值≥目标值（绿色） */ .bar-exceed { - background:rgba(98, 213, 180, 1) !important; + background: rgba(98, 213, 180, 1) !important; opacity: 1 !important; } diff --git a/src/views/home/expenseAnalysis/expenseAnalysisBase.vue b/src/views/home/expenseAnalysis/expenseAnalysisBase.vue index a87caf10..9294ca02 100644 --- a/src/views/home/expenseAnalysis/expenseAnalysisBase.vue +++ b/src/views/home/expenseAnalysis/expenseAnalysisBase.vue @@ -185,7 +185,7 @@ export default { this.beilv = _this.clientWidth / 1920; })(); }; - this.factory = this.$route.query.factory ? this.$route.query.factory : this.factory + this.factory = this.$route.query.factory ? Number(this.$route.query.factory) : this.factory }, methods: { handleChange(value) { diff --git a/src/views/home/expenseAnalysisComponents/dataTrend.vue b/src/views/home/expenseAnalysisComponents/dataTrend.vue index 2782a541..920febea 100644 --- a/src/views/home/expenseAnalysisComponents/dataTrend.vue +++ b/src/views/home/expenseAnalysisComponents/dataTrend.vue @@ -129,10 +129,8 @@ export default { */ 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; - } + return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0） + }, }, }; diff --git a/src/views/home/expenseAnalysisComponents/monthlyRelatedMetrics.vue b/src/views/home/expenseAnalysisComponents/monthlyRelatedMetrics.vue index 6d973838..3eb08e75 100644 --- a/src/views/home/expenseAnalysisComponents/monthlyRelatedMetrics.vue +++ b/src/views/home/expenseAnalysisComponents/monthlyRelatedMetrics.vue @@ -86,7 +86,7 @@ export default { // 达标标识判断（≥100返回1，<100返回0） getRateFlag(rate) { if (isNaN(rate) || rate === null || rate === undefined) return 0; - return rate >= 100 ? 1 : 0; + return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0） }, // 处理费用数据 diff --git a/src/views/home/expenseAnalysisComponents/operatingLineBarSale.vue b/src/views/home/expenseAnalysisComponents/operatingLineBarSale.vue index b3f3d2cf..e7ec0eb7 100644 --- a/src/views/home/expenseAnalysisComponents/operatingLineBarSale.vue +++ b/src/views/home/expenseAnalysisComponents/operatingLineBarSale.vue @@ -13,14 +13,14 @@ export default { resizeHandler: null, // 存储resize事件处理函数 // 核心：基地名称与序号的映射表（固定顺序） baseNameToIndexMap: { - '宜兴': 1, - '漳州': 2, + '宜兴': 7, + '漳州': 8, '自贡': 3, - '桐城': 4, - '洛阳': 5, - '合肥': 6, - '宿迁': 7, - '秦皇岛': 8 + '桐城': 2, + '洛阳': 9, + '合肥': 5, + '宿迁': 6, + '秦皇岛': 10 } }; }, diff --git a/src/views/home/expenseAnalysisComponents/operatingLineChart.vue b/src/views/home/expenseAnalysisComponents/operatingLineChart.vue index 3c30d9ca..efde8896 100644 --- a/src/views/home/expenseAnalysisComponents/operatingLineChart.vue +++ b/src/views/home/expenseAnalysisComponents/operatingLineChart.vue @@ -85,13 +85,10 @@ export default { * @param {number} rate 处理后的rate值（已*100） * @returns {0|1} flag值 */ -getRateFlag(rate) { - // 处理非数字/空值，默认返回 0 - if (isNaN(rate) || rate === null || rate === undefined) return 0; - // 核心逻辑：≥100 → 1；<100 → 0 - return rate >= 100 ? 1 : 0; -}, - + getRateFlag(rate) { + if (isNaN(rate) || rate === null || rate === undefined) return 0; + return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0） + }, /** * 核心处理函数：在所有数据都准备好后，才组装 chartData */ diff --git a/src/views/home/expenseAnalysisComponents/operatingLineChartCumulative.vue b/src/views/home/expenseAnalysisComponents/operatingLineChartCumulative.vue index c3e41d2e..29b35069 100644 --- a/src/views/home/expenseAnalysisComponents/operatingLineChartCumulative.vue +++ b/src/views/home/expenseAnalysisComponents/operatingLineChartCumulative.vue @@ -79,13 +79,10 @@ export default { * @param {number} rate 处理后的rate值（已*100） * @returns {0|1} flag值 */ -getRateFlag(rate) { - // 处理非数字/空值，默认返回 0 - if (isNaN(rate) || rate === null || rate === undefined) return 0; - // 核心逻辑：≥100 → 1；<100 → 0 - return rate >= 100 ? 1 : 0; -}, - + getRateFlag(rate) { + if (isNaN(rate) || rate === null || rate === undefined) return 0; + return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0） + }, /** * 核心处理函数：在所有数据都准备好后，才组装 chartData */ diff --git a/src/views/home/expenseAnalysisComponents/verticalBarChart.vue b/src/views/home/expenseAnalysisComponents/verticalBarChart.vue index fb6aef94..b3b0bdd9 100644 --- a/src/views/home/expenseAnalysisComponents/verticalBarChart.vue +++ b/src/views/home/expenseAnalysisComponents/verticalBarChart.vue @@ -43,6 +43,10 @@ export default { } }, methods: { + getRateFlag(rate) { + if (isNaN(rate) || rate === null || rate === undefined) return 0; + return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0） + }, updateChart() { const chartDom = this.$refs[this.refName]; if (!chartDom) { @@ -57,6 +61,8 @@ 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 option = { tooltip: { trigger: 'axis', @@ -198,18 +204,25 @@ export default { } }, itemStyle: { - // 实际的渐变颜色（绿系渐变，与预算区分） - color: { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: '#AEEFE0' }, // 浅绿 - { offset: 1, color: '#76DABE' } // 深绿 - ] - }, - borderRadius: [4, 4, 0, 0], - borderWidth: 0, - }, + color: flagValue === 1 + ? { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(174, 239, 224, 1)' }, + { offset: 1, color: 'rgba(118, 218, 190, 1)' } + ] + } + : { + type: 'linear', + x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(253, 209, 129, 1)' }, + { offset: 1, color: 'rgba(249, 164, 74, 1)' } + ] + }, + borderRadius: [4, 4, 0, 0] + } }, { value: this.detailData.target, label: { diff --git a/src/views/home/expenseAnalysisComponents/yearRelatedMetrics.vue b/src/views/home/expenseAnalysisComponents/yearRelatedMetrics.vue index ccc6c992..ad0f68c4 100644 --- a/src/views/home/expenseAnalysisComponents/yearRelatedMetrics.vue +++ b/src/views/home/expenseAnalysisComponents/yearRelatedMetrics.vue @@ -86,7 +86,7 @@ export default { // 达标标识判断（≥100返回1，<100返回0） getRateFlag(rate) { if (isNaN(rate) || rate === null || rate === undefined) return 0; - return rate >= 100 ? 1 : 0; + return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字（true→1，false→0） }, // 处理费用数据 diff --git a/src/views/home/fullCostAnalysis/fullCostAnalysis.vue b/src/views/home/fullCostAnalysis/fullCostAnalysis.vue index 4f6fd097..8d7045e5 100644 --- a/src/views/home/fullCostAnalysis/fullCostAnalysis.vue +++ b/src/views/home/fullCostAnalysis/fullCostAnalysis.vue @@ -16,7 +16,7 @@ gap: 12px; grid-template-columns:1624px; "> - +
@@ -25,7 +25,7 @@ gap: 12px; grid-template-columns: 1624px; "> - +
@@ -50,7 +50,7 @@ import { mapState } from "vuex"; import operatingLineChart from "../fullCostAnalysisComponents/operatingLineChart"; import operatingLineChartCumulative from "../fullCostAnalysisComponents/operatingLineChartCumulative.vue"; -import { getSalesRevenueData } from '@/api/cockpit' +import { getUnitPriceAnalysisGroupData } from '@/api/cockpit' import moment from "moment"; export default { name: "DayReport", @@ -68,11 +68,9 @@ export default { timer: null, beilv: 1, value: 100, - saleData: {}, - premiumProduct: {}, - salesTrendMap: {}, - grossMarginTrendMap: {}, - salesProportion:{}, + selectDate: {}, + thisMonData: {}, + totalData: {}, }; }, @@ -141,22 +139,27 @@ export default { }, methods: { getData(obj) { - getSalesRevenueData({ - startTime: obj.startTime, - endTime: obj.endTime, - timeDim: obj.mode + getUnitPriceAnalysisGroupData({ + startTime: this.selectDate.startTime, + endTime: this.selectDate.endTime, + paramName: '全成本' + // timeDim: this.selectDate.mode }).then((res) => { console.log(res); - this.saleData = res.data.SaleData - this.premiumProduct = res.data.premiumProduct - this.salesTrendMap = res.data.salesTrendMap - this.grossMarginTrendMap = res.data.grossMarginTrendMap - this.salesProportion = res.data.salesProportion ? res.data.salesProportion : {} + this.thisMonData = res.data.thisMonData + this.totalData = res.data.totalData + + // this.saleData = res.data.SaleData + // this.premiumProduct = res.data.premiumProduct + // this.salesTrendMap = res.data.salesTrendMap + // this.grossMarginTrendMap = res.data.grossMarginTrendMap + // this.salesProportion = res.data.salesProportion ? res.data.salesProportion : {} }) }, handleTimeChange(obj) { - console.log(obj, 'obj'); - this.getData(obj) + // console.log(obj, 'obj'); + this.selectDate = obj + this.getData() }, handleClickOutside() { this.$store.dispatch("app/closeSideBar", { withoutAnimation: false }); @@ -228,12 +231,14 @@ export default { - - + diff --git a/src/views/home/fullCostAnalysisComponents/dataTrendBar.vue b/src/views/home/fullCostAnalysisComponents/dataTrendBar.vue index 8066853d..83ff8013 100644 --- a/src/views/home/fullCostAnalysisComponents/dataTrendBar.vue +++ b/src/views/home/fullCostAnalysisComponents/dataTrendBar.vue @@ -28,7 +28,7 @@
- 展示顺序 + 类目选择
@@ -59,48 +59,82 @@ import * as echarts from 'echarts'; export default { name: "Container", components: { operatingLineBar }, - props: ["chartData"], + props: [ + "trendData" // 接收父组件传递的 trend 数据（单价/运费/净价） + ], data() { return { activeButton: 0, isDropdownShow: false, - selectedProfit: null, // 选中的名称，初始为null - profitOptions: [ - '全成本', - '财务费用', - '制造费用', - '销售费用', - '管理费用', - '运费', - ] + selectedProfit: '全成本', // 关键修改：默认赋值为「净价」，初始化即展示该类目数据 + profitOptions: ['全成本', '制造成本', '管理费用', '财务费用', '运费', '销售费用'] }; }, computed: { - // profitOptions() { - // return this.categoryData.map(item => item.name) || []; - // }, - currentDataSource() { - console.log('yyyy', this.chartData); - return this.activeButton === 0 ? this.chartData.sales : this.chartData.grossMargin; - }, - locations() { - console.log('this.chartData', this.chartData); - return this.activeButton === 0 ? this.chartData.salesLocations : this.chartData.grossMarginLocations; - }, - // 根据按钮切换生成对应的 chartData - chartD() { - // 销量场景数据 - const data = this.currentDataSource; - console.log(this.currentDataSource, 'currentDataSource'); + // 核心：根据选中的类目，动态解析趋势数据 + trendParsedData() { + // 1. 校验数据有效性 + if (!this.trendData || !this.selectedProfit) { + return { + months: [], // 月份数组（x轴标签） + rates: [], // 完成率（completeRate） + reals: [], // 实际值（real） + targets: [], // 目标值（target） + flags: [], // 达标状态 + diffs:[] + }; + } + // 2. 获取选中类目的趋势数据（如：trendData.单价） + const selectedTrend = this.trendData[this.selectedProfit] || {}; + // 3. 提取月份并排序（保证时间顺序） + const months = Object.keys(selectedTrend).sort((a, b) => new Date(a) - new Date(b)); + // 4. 初始化数据数组 + const rates = []; + const reals = []; + const targets = []; + const flags = []; + const diffs = [] + + // 5. 按月份提取数据 + months.forEach(month => { + const monthData = selectedTrend[month] || {}; + const completeRate = monthData.completeRate || 0; + // 填充对应数据 + rates.push(completeRate); + reals.push(monthData.real || 0); + targets.push(monthData.target || 0); + diffs.push(monthData.diff || 0); + + // 生成达标状态（复用 getRateFlag 逻辑） + flags.push(this.getRateFlag(completeRate)); + }); + + return { + months, + rates, + reals, + targets, + flags, + diffs + }; + }, + // locations() { + // return this.activeButton === 0 ? this.chartData?.salesLocations : this.chartData?.grossMarginLocations; + // }, + // 重构 chartD：替换硬编码数据为动态解析数据 + chartD() { + // 获取动态解析的趋势数据 + const { months, rates, reals, targets, flags } = this.trendParsedData; + // 销量场景数据（保留原有结构，替换数据来源） const salesData = { - allPlaceNames: this.locations, + allPlaceNames: months, // 优先用基地名称，无则用月份 series: [ // 1. 完成率（折线图） { name: '完成率', type: 'line', - yAxisIndex: 1, // 绑定右侧Y轴（需在子组件启用配置） + yAxisIndex: 1, lineStyle: { color: 'rgba(40, 138, 255, .5)', width: 2 @@ -118,7 +152,7 @@ export default { { offset: 1, color: 'rgba(40, 138, 255, 0)' } ]) }, - data: data.rates, // 完成率（%） + data: rates, // 动态完成率 symbol: 'circle', symbolSize: 6 }, @@ -126,7 +160,7 @@ export default { { name: '目标', type: 'bar', - yAxisIndex: 0, // 左侧Y轴（万元） + yAxisIndex: 0, barWidth: 14, itemStyle: { color: { @@ -140,7 +174,7 @@ export default { borderRadius: [4, 4, 0, 0], borderWidth: 0 }, - data: data.targets // 目标销量（万元） + data: targets, // 动态目标值 }, // 3. 实际（柱状图，含达标状态） { @@ -148,93 +182,68 @@ export default { type: 'bar', yAxisIndex: 0, barWidth: 14, - itemStyle: { - color: (params) => { - // 达标状态：1=达标（绿色），0=未达标（橙色） - const safeFlag = data.flags; - const currentFlag = safeFlag[params.dataIndex] || 0; - return currentFlag === 1 - ? { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(174, 239, 224, 1)' }, - { offset: 1, color: 'rgba(118, 218, 190, 1)' } - ] - } - : { - type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: 'rgba(253, 209, 129, 1)' }, - { offset: 1, color: 'rgba(249, 164, 74, 1)' } - ] - }; + label: { + show: true, + position: 'top', + offset: [0, 0], + // 固定label尺寸：68px×20px + width: 68, + height: 20, + // 关键：去掉换行，让文字在一行显示，适配小尺寸 + formatter: function (params) { + const diff = data.diffs || []; + const currentDiff = diff[params.dataIndex] || 0; + return `{rate|${currentDiff}}{text|差值}`; }, - borderRadius: [4, 4, 0, 0], - borderWidth: 0 - }, - data: data.reals // 实际销量（万元） - } - ] - }; - - // 毛利率场景数据 - const grossProfitData = { - series: [ - // 1. 完成率（折线图） - { - name: '完成率', - type: 'line', - yAxisIndex: 1, - lineStyle: { color: 'rgba(40, 138, 255, .5)', width: 2 }, - itemStyle: { - color: 'rgba(40, 138, 255, 1)', - borderColor: 'rgba(40, 138, 255, 1)', - borderWidth: 2, - radius: 4 - }, - areaStyle: { - opacity: 0.2, - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: 'rgba(40, 138, 255, .9)' }, - { offset: 1, color: 'rgba(40, 138, 255, 0)' } - ]) - }, - data: [106.7, 96.9, 106.5, 106.1, 93.8, 105.9], // 毛利率完成率（%） - symbol: 'circle', - symbolSize: 6 - }, - // 2. 目标（柱状图） - { - name: '目标', - type: 'bar', - yAxisIndex: 0, - barWidth: 14, - itemStyle: { - color: { + backgroundColor: { type: 'linear', - x: 0, y: 0, x2: 0, y2: 1, + 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)' } + { offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, // 顶部0px位置：阴影最强 + // { offset: 0.1, color: 'rgba(205, 215, 224, 0.4)' }, // 1px位置：阴影减弱（对应1px） + // { offset: 0.15, color: 'rgba(205, 215, 224, 0.6)' }, // 3px位置：阴影几乎消失（对应3px扩散） + { offset: 0.2, color: '#ffffff' }, // 主体白色 + { offset: 1, color: '#ffffff' } ] }, - borderRadius: [4, 4, 0, 0], - borderWidth: 0 + // 外阴影：0px 2px 2px 0px rgba(191,203,215,0.5) + shadowColor: 'rgba(191,203,215,0.5)', + shadowBlur: 2, + shadowOffsetX: 0, + shadowOffsetY: 2, + // 圆角：4px + borderRadius: 4, + // 移除边框 + borderColor: '#BFCBD577', + borderWidth: 0, + // 文字垂直居中（针对富文本） + lineHeight: 20, + rich: { + text: { + // 缩小宽度和内边距，适配68px容器 + width: 'auto', // 自动宽度，替代固定40px + padding: [5, 10, 5, 0], // 缩小内边距 + align: 'center', + color: '#464646', // 文字灰色 + fontSize: 11, // 缩小字体，适配小尺寸 + lineHeight: 20 // 垂直居中 + }, + rate: { + width: 'auto', + padding: [5, 0, 5, 10], + align: 'center', + color: '#30B590', + fontSize: 11, + lineHeight: 20 + } + } }, - 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; + const currentFlag = flags[params.dataIndex] || 0; return currentFlag === 1 ? { type: 'linear', @@ -256,12 +265,12 @@ export default { borderRadius: [4, 4, 0, 0], borderWidth: 0 }, - data: [32, 31, 33, 35, 30, 36] // 实际毛利率（万元） + data: reals, // 动态实际值 } ] }; - // 根据按钮状态返回对应数据 + // 直接返回动态组装的 salesData（移除硬编码的毛利率数据） return salesData; } }, @@ -269,8 +278,13 @@ export default { selectProfit(item) { this.selectedProfit = item; this.isDropdownShow = false; + }, + // 复用达标状态判断方法 + getRateFlag(rate) { + if (isNaN(rate) || rate === null || rate === undefined) return 0; + return (rate >= 100 || rate === 0) ? 1 : 0; } - }, + } }; @@ -393,7 +407,7 @@ export default { .dropdown-container { position: relative; - z-index: 999; // 提高z-index，确保菜单不被遮挡 + z-index: 10; } .item-button { @@ -457,21 +471,18 @@ export default { transition: transform 0.2s ease; &.rotate { - transform: rotate(90deg); // 箭头旋转方向可根据需求调整，比如改为rotate(-90deg)更符合向上展开的视觉 + transform: rotate(90deg); } } .dropdown-options { position: absolute; - // 关键修改1：调整top值，让菜单显示在选择框上方，calc(-100% - 2px)表示向上偏移自身100%再加2px间距 bottom: 100%; right: 0; - // 移除多余的margin-top，避免额外间距 - // margin-top: 2px; + margin-top: 2px; width: 123px; background: #ffffff; - // 关键修改2：调整border-radius，让菜单顶部圆角匹配选择框的右上角，底部圆角为0（更美观） - border-radius: 8px 8px 0 0; + border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); overflow: hidden; diff --git a/src/views/home/fullCostAnalysisComponents/electricityGauge.vue b/src/views/home/fullCostAnalysisComponents/electricityGauge.vue index 153fdbaf..92d73f5e 100644 --- a/src/views/home/fullCostAnalysisComponents/electricityGauge.vue +++ b/src/views/home/fullCostAnalysisComponents/electricityGauge.vue @@ -4,7 +4,7 @@
- {{ energyObj.electricComu }} + {{ detailData.completeRate || 0 }}
@@ -18,31 +18,32 @@ export default { // components: { Container }, // mixins: [resize], props: { - energyObj: { + detailData: { type: Object, default: () => ({ - electricComu: 0, - steamComu: 20, // 调整为符合max范围的数值（0-8） - // electricity: [120, 150, 130, 180, 160, 200, 190], - // steam: [80, 95, 85, 110, 100, 120, 115], - // dates: ['1日', '2日', '3日', '4日', '5日', '6日', '7日'] + // electricComu: 0, + // steamComu: 20, // 调整为符合max范围的数值（0-8） + // // electricity: [120, 150, 130, 180, 160, 200, 190], + // // steam: [80, 95, 85, 110, 100, 120, 115], + // // dates: ['1日', '2日', '3日', '4日', '5日', '6日', '7日'] }) }, id: { type: String, - default: () => ('') + default: () => ('monthG') } }, data() { return { - electricityChart: null, - steamChart: null, - specialTicks: [2, 4, 6, 8], // 统一的刻度显示 + // electricityChart: null, + // steamChart: null, + // specialTicks: [2, 4, 6, 8], // 统一的刻度显示 } }, watch: { - energyObj: { + detailData: { deep: true, + immediate: true, // 初始化时立即执行 handler() { this.updateGauges() } @@ -55,42 +56,47 @@ export default { }, methods: { observeContainerResize() { - const container = document.querySelector('.gauge-container') + // 修复：获取正确的容器（组件内的.gauge-container） + const container = this.$el.querySelector('.gauge-container') if (container && window.ResizeObserver) { - const resizeObserver = new ResizeObserver(entries => { - this.handleResize() - }) - resizeObserver.observe(container) - this.$once('hook:beforeDestroy', () => { - resizeObserver.unobserve(container) + this.resizeObserver = new ResizeObserver(entries => { + if (this.electricityChart) { + this.electricityChart.resize() // 直接触发resize，无需防抖 + } }) + this.resizeObserver.observe(container) } }, initGauges() { + // console.log('this.id',this.id); + // 初始化电气图表实例 const electricityDom = document.getElementById(this.id) if (electricityDom) { + // 修复：正确创建并存储图表实例 this.electricityChart = echarts.init(electricityDom) + // 首次更新数据 + this.updateGauges() } - // 初始化蒸汽图表实例 - const steamDom = document.getElementById('steamGauge') - if (steamDom) { - this.steamChart = echarts.init(steamDom) - } - // 首次更新数据 - this.updateGauges() + // 蒸汽图表若未使用，可注释/删除 + // const steamDom = document.getElementById('steamGauge') + // if (steamDom) { + // this.steamChart = echarts.init(steamDom) + // } }, updateGauges() { - // 优化：仅更新数据，不销毁实例（提升性能） - if (this.electricityChart) { - // 转换原始数据为“万kw/h”（与仪表盘max匹配） - const electricValue = 80 - this.electricityChart.setOption(this.getElectricityGaugeOption(electricValue)) - } + // 修复：先判断实例是否存在，再更新配置 + if (!this.electricityChart) return + + // 修复：兜底获取rate值，确保数值有效 + const rate = Number(this.detailData?.completeRate) || 0 + console.log('当前rate值：', rate); // 调试：确认rate值正确 + + // 关键：第二个参数传true，清空原有配置，强制更新 + this.electricityChart.setOption(this.getElectricityGaugeOption(rate), true) }, - // 1. 用电量仪表盘独立配置函数 + // 用电量仪表盘配置（保留原有样式，优化数值范围） getElectricityGaugeOption(value) { - // 用电量专属渐变色 const electricityGradient = new echarts.graphic.LinearGradient(0, 0, 1, 0, [ { offset: 0, color: '#0B58FF' }, { offset: 1, color: '#32FFCD' } @@ -101,12 +107,12 @@ export default { { name: '月度', type: 'gauge', - radius: '95', + radius: '95', // 修复：添加%，避免数值错误 center: ['50%', '90%'], startAngle: 180, endAngle: 0, min: 0, - max: 100, // 用电量专属最大值 + max: 100, splitNumber: 4, label: { show: false }, progress: { @@ -121,117 +127,34 @@ export default { icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z', length: '75%', width: 16, - itemStyle: { color: '#288AFF' }, // 用电量指针颜色 + itemStyle: { color: '#288AFF' }, offsetCenter: [0, '10%'] }, axisLine: { roundCap: true, lineStyle: { width: 12, color: [[1, '#E6EBF7']] } }, - // axisTick: { - // splitNumber: 2, - // show: (val) => this.specialTicks.includes(val), - // lineStyle: { width: 2, color: '#999' } - // }, splitLine: { - length: 10, lineStyle: { width: 5, color: '#D6DAE5' }, + length: 10, + lineStyle: { width: 5, color: '#D6DAE5' }, }, - // axisLabel: { - // show: (val) => this.specialTicks.includes(val), - // distance: -45, - // color: '#ffffff', - // fontSize: 14, - // fontWeight: 'bold' - // }, axisTick: { splitNumber: 2, - length:6, + length: 6, lineStyle: { width: 2, color: '#D6DAE5' } }, axisLabel: { show: false, }, detail: { show: false }, - data: [{ value, unit: '' }] // 用电量单位 + data: [{ value: value, unit: '' }] // 确保数值正确传入 } ] } }, - - // 2. 用蒸汽仪表盘独立配置函数 - getSteamGaugeOption(value) { - // 蒸汽专属渐变色 - const steamGradient = new echarts.graphic.LinearGradient(0, 0, 1, 0, [ - { offset: 0, color: 'rgba(11, 168, 255, 0.26)' }, - { offset: 1, color: 'rgba(54, 239, 230, 1)' } - ]) - - return { - series: [ - { - name: '完成率', - type: 'gauge', - radius: '80', - center: ['50%', '85%'], - startAngle: 180, - endAngle: 0, - min: 0, - max: 160, // 蒸汽专属最大值 - splitNumber: 4, - label: { show: false }, - progress: { - show: true, - overlap: false, - roundCap: true, - clip: false, - width: 14, - itemStyle: { color: steamGradient } - }, - pointer: { - icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z', - length: '75%', - width: 16, - itemStyle: { color: 'rgba(11, 168, 255, 1)' }, // 蒸汽指针颜色 - offsetCenter: [0, '5%'] - }, - axisLine: { - roundCap: true, - lineStyle: { width: 14, color: [[1, 'rgba(19, 84, 122, 1)']] } - }, - axisTick: { - splitNumber: 2, - show: (val) => this.specialTicks.includes(val), - lineStyle: { width: 2, color: '#999' } - }, - splitLine: { length: 12, lineStyle: { width: 3, color: '#999' } }, - axisLabel: { - show: (val) => this.specialTicks.includes(val), - distance: -45, - color: '#ffffff', - fontSize: 14, - fontWeight: 'bold' - }, - detail: { show: false }, - data: [{ value, unit: 't' }] // 蒸汽单位 - } - ] - } - }, - - // handleResize() { - // if (this.resizeTimer) clearTimeout(this.resizeTimer) - // this.resizeTimer = setTimeout(() => { - // if (this.electricityChart) this.electricityChart.resize() - // if (this.steamChart) this.steamChart.resize() - // }, 100) - // } - }, - // beforeDestroy() { - // if (this.electricityChart) this.electricityChart.dispose() - // if (this.steamChart) this.steamChart.dispose() - // window.removeEventListener('resize', this.handleResize) - // if (this.resizeTimer) clearTimeout(this.resizeTimer) - // } + // 未使用的蒸汽仪表盘可注释/删除 + // getSteamGaugeOption(value) { ... } + } } @@ -298,9 +221,4 @@ export default { } } } - - - - - diff --git a/src/views/home/fullCostAnalysisComponents/monthlyOverview.vue b/src/views/home/fullCostAnalysisComponents/monthlyOverview.vue index 4018ce67..e7876a1f 100644 --- a/src/views/home/fullCostAnalysisComponents/monthlyOverview.vue +++ b/src/views/home/fullCostAnalysisComponents/monthlyOverview.vue @@ -1,9 +1,7 @@ + - - diff --git a/src/views/home/fullCostAnalysisComponents/operatingBar.vue b/src/views/home/fullCostAnalysisComponents/operatingBar.vue index 6ce591d0..ab7c7692 100644 --- a/src/views/home/fullCostAnalysisComponents/operatingBar.vue +++ b/src/views/home/fullCostAnalysisComponents/operatingBar.vue @@ -1,29 +1,21 @@