diff --git a/klp-ui/src/components/CoilSelector/index.vue b/klp-ui/src/components/CoilSelector/index.vue index fcfb86d1..c072d6b6 100644 --- a/klp-ui/src/components/CoilSelector/index.vue +++ b/klp-ui/src/components/CoilSelector/index.vue @@ -85,26 +85,90 @@ - - - - - - - - - - +
+ + + + +
+ +
- - - - - - + @@ -116,48 +180,18 @@ -
- -
- - 总净重：{{ coilTrimStatistics.total_net_weight || 0 }}t - + +
+ + 总净重：{{ coilTrimStatistics.total_net_weight || 0 }}t + - -
- - -
-
-
- 总卷数： - {{ totalCoils }} -
-
- 总净重： - {{ totalNetWeight }}t -
+
- - - - - - - - - - - - -
确认选择 取消 @@ -195,6 +229,7 @@ import { defaultColumns } from './data'; import ActualWarehouseSelect from '@/components/KLPService/ActualWarehouseSelect/index.vue'; import WarehouseBirdMini from '@/views/wms/warehouse/components/WarehouseBirdMini.vue'; import DragResizeBox from '@/components/DragResizeBox/index.vue'; +import DragResizePanel from '@/components/DragResizePanel/index.vue'; import OrderDetail from '@/views/crm/components/OrderDetail.vue'; export default { @@ -205,6 +240,7 @@ export default { ActualWarehouseSelect, WarehouseBirdMini, DragResizeBox, + DragResizePanel, OrderDetail }, dicts: ['coil_itemname', 'coil_material', 'coil_manufacturer', 'coil_quality_status'], @@ -255,11 +291,6 @@ export default { type: Array, default: () => [] }, - // 销售视角：钢卷受限访问 - salesRestricted: { - type: Boolean, - default: false - }, // 是否根据实际库区查询钢卷 orderBy: { type: Boolean, @@ -308,7 +339,6 @@ export default { dataType: 1 // 只查询当前数据，不查询历史数据 }, columns: defaultColumns, - currentTab: 'my', selectedCoils: [], warehouseList: [], selectedNodeId: null, @@ -341,9 +371,6 @@ export default { } } }, - currentUserId() { - return this.$store.getters.id; - }, renderColumns() { // 如果有自定义列配置，使用它；否则使用默认列 return this.coilColumn.length > 0 ? this.coilColumn : this.columns; @@ -469,11 +496,6 @@ export default { classNames.push('selected-coil-row'); } - // 销售受限模式下，判断当前行是否有权限 - if (this.salesRestricted && row.saleId !== this.currentUserId) { - classNames.push('disabled-coil-row'); // 禁用行类名 - } - return classNames.join(' '); }, @@ -503,11 +525,6 @@ export default { ...this.filters, }; queryPayload.selectType = queryPayload.itemType; - // 处于销售视角，且my视图时，只查询当前用户的钢卷 - console.log('this.salesRestricted', this.salesRestricted, this.currentTab, this.currentUserId); - if (this.salesRestricted && this.currentTab === 'my') { - queryPayload.saleId = this.currentUserId; - } const response = await listMaterialCoil(queryPayload); const { pageNum, pageSize, excludeBound, orderBy, ...noPager } = queryPayload; getCoilStatisticsList(noPager).then((res) => { @@ -555,7 +572,7 @@ export default { resetQuery() { this.queryParams = { pageNum: 1, - pageSize: 10, + pageSize: 50, currentCoilNo: null, grade: null, dataType: 1, @@ -567,11 +584,6 @@ export default { // 点击表格行选择 - 新增禁用行拦截 handleRowClick(row) { - // 销售受限模式下，拦截无权限行的点击 - if (this.salesRestricted && row.saleId !== this.currentUserId) { - this.$message.warning('您没有权限选择此钢卷'); - return; // 终止后续逻辑 - } if (this.disableO) { // 并且钢卷的warehouseId不是1988150210872930306 // 1988150380649967617 @@ -599,10 +611,6 @@ export default { this.$message.warning('请选择有效的钢卷数据'); return; } - if (this.salesRestricted && row.saleId != this.currentUserId) { - this.$message.warning('您没有权限选择此钢卷'); - return; - } if (this.multiple) { // 检查是否已经选择 if (this.selectedCoils.some(item => item.coilId === row.coilId)) { @@ -724,6 +732,59 @@ export default { overflow-y: auto; } +// 多选模式拖拽面板容器样式 +.coil-selector-drag-panel { + height: 70vh; + max-height: 700px; +} + +// panelA容器样式 +.panel-a-container { + display: flex; + flex-direction: column; + height: 100%; + overflow: hidden; +} + +// 表格容器样式 +.table-wrapper { + flex: 1; + overflow: hidden; +} + +// 分页容器样式 +.pagination-wrapper { + flex-shrink: 0; + display: flex; + justify-content: flex-end; + align-items: center; + gap: 10px; + padding-top: 10px; +} + +// panelB容器样式 +.panel-b-container { + display: flex; + flex-direction: column; + height: 100%; + overflow: hidden; +} + +// 已选表格容器样式 +.selected-table-wrapper { + flex: 1; + overflow: hidden; +} + +// 空面板样式 +.empty-panel { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + padding: 20px; +} + ::v-deep .el-table { --el-table-row-hover-bg-color: var(--el-color-primary-light-9); } @@ -748,38 +809,6 @@ export default { } } -// 核心：禁用行样式（销售权限受限） -::v-deep .el-table .disabled-coil-row { - background-color: #f8f8f8 !important; - color: #c0c4cc !important; - cursor: not-allowed !important; - - // 覆盖hover高亮 - &:hover>td { - background-color: #f8f8f8 !important; - } - - // 覆盖当前行高亮 - &.current-row { - background-color: #f8f8f8 !important; - } - - // 禁止单元格交互 - td { - pointer-events: none; - user-select: none; // 禁止文本选中 - } - - // 当同时是已选行时（优先级：禁用 > 已选） - &.selected-coil-row { - background-color: #f5f5f5 !important; - - &:hover>td { - background-color: #f5f5f5 !important; - } - } -} - .dialog-footer { text-align: right; } diff --git a/klp-ui/src/views/ems/dashboard/index.vue b/klp-ui/src/views/ems/dashboard/index.vue index 36e257e5..8bd35ad8 100644 --- a/klp-ui/src/views/ems/dashboard/index.vue +++ b/klp-ui/src/views/ems/dashboard/index.vue @@ -4,14 +4,8 @@
- + 刷新 @@ -19,26 +13,58 @@
- -
+ +
+ - -
-
- + +
+
+ 产线能源类型二维表
-
-
{{ stat.value }}
-
{{ stat.label }}
+
+ + + + + +
-
- -
- + + + +
+
+ 产线能源时序分析 +
+ + + + + + + + +
+
+
+
+ + + +
@@ -49,62 +75,39 @@
- +
- 能源类型占比 + 能源产线占比 + + + +
- - - -
-
- 产线能耗对比 -
-
-
- - - - -
-
- 设备能耗排行 TOP 10 -
-
-
- - - - - + +
-
- 产线能源类型二维表 -
-
- - - - - - - - - +
+ 能源流向 + + + + +
+
@@ -140,6 +143,11 @@ export default { productionLines: [] }, energyTypeList: [], + productionLines: [], + selectedEnergyTypeId: null, + selectedLineAnalysisEnergyTypeId: null, + selectedSankeyEnergyTypeId: null, + selectedLines: [], meterList: [], energyRecords: [], statistics: [], @@ -147,8 +155,8 @@ export default { trendChartType: 'day', trendChart: null, energyTypeChart: null, - productionLineChart: null, - deviceRankingChart: null, + lineEnergyTrendChart: null, + sankeyChart: null, loading: false, } }, @@ -161,31 +169,44 @@ export default { window.removeEventListener('resize', this.handleResize) if (this.trendChart) this.trendChart.dispose() if (this.energyTypeChart) this.energyTypeChart.dispose() - if (this.productionLineChart) this.productionLineChart.dispose() - if (this.deviceRankingChart) this.deviceRankingChart.dispose() + if (this.lineEnergyTrendChart) this.lineEnergyTrendChart.dispose() + if (this.sankeyChart) this.sankeyChart.dispose() }, methods: { initCharts() { this.trendChart = echarts.init(this.$refs.trendChart) this.energyTypeChart = echarts.init(this.$refs.energyTypeChart) - this.productionLineChart = echarts.init(this.$refs.productionLineChart) - this.deviceRankingChart = echarts.init(this.$refs.deviceRankingChart) + this.lineEnergyTrendChart = echarts.init(this.$refs.lineEnergyTrendChart) + this.sankeyChart = echarts.init(this.$refs.sankeyChart) }, handleResize() { this.trendChart && this.trendChart.resize() this.energyTypeChart && this.energyTypeChart.resize() - this.productionLineChart && this.productionLineChart.resize() - this.deviceRankingChart && this.deviceRankingChart.resize() + this.lineEnergyTrendChart && this.lineEnergyTrendChart.resize() + this.sankeyChart && this.sankeyChart.resize() }, async loadBasicData() { try { this.loading = true; const [energyTypeRes, meterRes] = await Promise.all([ listEnergyType({ pageSize: 999 }), - listMeter({ pageSize: 999, isTotalMeter: 0 }) + listMeter({ pageSize: 999 }) ]) this.energyTypeList = energyTypeRes.rows || [] + if (this.energyTypeList.length > 0) { + this.selectedEnergyTypeId = this.energyTypeList[0].energyTypeId + this.selectedLineAnalysisEnergyTypeId = this.energyTypeList[0].energyTypeId + } this.meterList = meterRes.rows || [] + this.productionLines = this.dict.type.sys_lines || [] + if (this.productionLines.length > 0) { + this.selectedLines = this.productionLines.slice(0, 3).map(l => l.value) + } + // 设置默认的桑基图能源类型（筛选有且只有一个主表的能源） + const validSankeyEnergyTypes = this.getValidSankeyEnergyTypes() + if (validSankeyEnergyTypes.length > 0) { + this.selectedSankeyEnergyTypeId = validSankeyEnergyTypes[0].energyTypeId + } await this.loadData() } catch (error) { console.error('加载基础数据失败', error) @@ -216,8 +237,8 @@ export default { this.calculateStatistics() this.updateTrendChart() this.updateEnergyTypeChart() - this.updateProductionLineChart() - this.updateDeviceRankingChart() + this.updateLineEnergyTrendChart() + this.updateSankeyChart() this.updateTableData() }, calculateStatistics() { @@ -272,13 +293,13 @@ export default { }, updateTrendChart() { const dateFormat = this.trendChartType === 'day' ? 'YYYY-MM-DD' : - this.trendChartType === 'week' ? 'YYYY-WW' : 'YYYY-MM' - + this.trendChartType === 'week' ? 'YYYY-WW' : 'YYYY-MM' + const groupedData = new Map() this.energyRecords.forEach(record => { const dateKey = dayjs(record.recordDate).format(dateFormat) const energyType = this.getEnergyTypeName(record.energyId) - + if (!groupedData.has(dateKey)) { groupedData.set(dateKey, {}) } @@ -290,7 +311,7 @@ export default { const dates = Array.from(groupedData.keys()).sort() const energyTypes = Array.from(new Set(this.energyRecords.map(r => this.getEnergyTypeName(r.energyId)))) - + const colors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399', '#00CED1'] const series = energyTypes.map((type, index) => ({ name: type, @@ -333,14 +354,26 @@ export default { this.trendChart.setOption(option) }, updateEnergyTypeChart() { - const typeMap = new Map() + const lineMap = new Map() + this.energyRecords.forEach(record => { - const typeName = this.getEnergyTypeName(record.energyId) - typeMap.set(typeName, (typeMap.get(typeName) || 0) + (Number(record.consumption) || 0)) + // 只统计选中的能源类型 + if (this.selectedEnergyTypeId && record.energyId !== this.selectedEnergyTypeId) { + return + } + + const meter = this.meterList.find(m => m.meterId === record.meterId) + if (meter && meter.productionLine) { + const lines = Array.isArray(meter.productionLine) ? meter.productionLine : [meter.productionLine] + lines.forEach(lineId => { + const lineName = this.getLineName(lineId) + lineMap.set(lineName, (lineMap.get(lineName) || 0) + (Number(record.consumption) || 0)) + }) + } }) - const data = Array.from(typeMap.entries()).map(([name, value]) => ({ name, value })) - + const data = Array.from(lineMap.entries()).map(([name, value]) => ({ name, value })) + const option = { tooltip: { trigger: 'item', @@ -353,7 +386,7 @@ export default { }, series: [ { - name: '能源类型', + name: '产线消耗', type: 'pie', radius: ['40%', '70%'], avoidLabelOverlap: false, @@ -382,112 +415,8 @@ export default { } this.energyTypeChart.setOption(option) }, - updateProductionLineChart() { - const lineMap = new Map() - - this.energyRecords.forEach(record => { - const meter = this.meterList.find(m => m.meterId === record.meterId) - if (meter && meter.productionLine) { - const lines = Array.isArray(meter.productionLine) ? meter.productionLine : [meter.productionLine] - lines.forEach(lineId => { - const lineName = this.getLineName(lineId) - lineMap.set(lineName, (lineMap.get(lineName) || 0) + (Number(record.consumption) || 0)) - }) - } - }) - const sortedLines = Array.from(lineMap.entries()) - .sort((a, b) => b[1] - a[1]) - - const option = { - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow' - } - }, - grid: { - left: '3%', - right: '4%', - bottom: '3%', - containLabel: true - }, - xAxis: { - type: 'value', - name: '能耗' - }, - yAxis: { - type: 'category', - data: sortedLines.map(item => item[0]) - }, - series: [ - { - name: '能耗', - type: 'bar', - data: sortedLines.map(item => item[1]), - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ - { offset: 0, color: '#409EFF' }, - { offset: 1, color: '#00CED1' } - ]), - borderRadius: [0, 4, 4, 0] - } - } - ] - } - this.productionLineChart.setOption(option) - }, - updateDeviceRankingChart() { - const deviceMap = new Map() - - this.energyRecords.forEach(record => { - const meter = this.meterList.find(m => m.meterId === record.meterId) - const deviceName = meter ? meter.meterCode : `设备${record.meterId}` - deviceMap.set(deviceName, (deviceMap.get(deviceName) || 0) + (Number(record.consumption) || 0)) - }) - const sortedDevices = Array.from(deviceMap.entries()) - .sort((a, b) => b[1] - a[1]) - .slice(0, 10) - - const option = { - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow' - } - }, - grid: { - left: '3%', - right: '4%', - bottom: '3%', - containLabel: true - }, - xAxis: { - type: 'value', - name: '能耗' - }, - yAxis: { - type: 'category', - data: sortedDevices.map(item => item[0]).reverse() - }, - series: [ - { - name: '能耗', - type: 'bar', - data: sortedDevices.map(item => item[1]).reverse(), - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ - { offset: 0, color: '#67C23A' }, - { offset: 1, color: '#95E67D' } - ]), - borderRadius: [0, 4, 4, 0] - } - } - ] - } - this.deviceRankingChart.setOption(option) - }, getEnergyTypeName(energyTypeId) { const type = this.energyTypeList.find(t => t.energyTypeId === energyTypeId) return type ? type.name : '未知' @@ -496,9 +425,257 @@ export default { const line = this.dict.type.sys_lines?.find(l => l.value === lineId) return line ? line.label : lineId }, + // 获取有且仅有一个主表的能源类型列表 + getValidSankeyEnergyTypes() { + const energyTypeMeterMap = {} + // 按能源类型分组所有表计 + this.meterList.forEach(meter => { + if (!energyTypeMeterMap[meter.energyTypeId]) { + energyTypeMeterMap[meter.energyTypeId] = [] + } + energyTypeMeterMap[meter.energyTypeId].push(meter) + }) + // 筛选出有且仅有一个主表的能源类型 + return this.energyTypeList.filter(type => { + const meters = energyTypeMeterMap[type.energyTypeId] || [] + const totalMeters = meters.filter(m => m.isTotalMeter === 1) + return totalMeters.length === 1 + }) + }, + // 更新桑基图 + updateSankeyChart() { + if (!this.selectedSankeyEnergyTypeId) { + // 如果没有选择能源类型，显示空图表 + this.sankeyChart.setOption({ + title: { text: '请选择能源类型' }, + series: [] + }) + return + } + + // 获取当前能源类型的所有表计 + const currentEnergyMeters = this.meterList.filter(m => m.energyTypeId === this.selectedSankeyEnergyTypeId) + const totalMeter = currentEnergyMeters.find(m => m.isTotalMeter === 1) + const subMeters = currentEnergyMeters.filter(m => m.isTotalMeter !== 1) + + if (!totalMeter) { + this.sankeyChart.setOption({ + title: { text: '当前能源类型没有主表' }, + series: [] + }) + return + } + + // 计算各节点的能耗 + const nodeMap = {} + const links = [] + const nodes = [] + + // 获取能源类型名称 + const energyType = this.energyTypeList.find(t => t.energyTypeId === this.selectedSankeyEnergyTypeId) + const energyTypeName = energyType ? energyType.name : '能源' + + // 1. 能源节点 -> 总表节点 + let totalConsumption = 0 + // 先计算总表的总消耗 + this.energyRecords.forEach(record => { + if (record.meterId === totalMeter.meterId) { + totalConsumption += Number(record.consumption) || 0 + } + }) + + // 添加能源节点 + const energyNodeName = energyTypeName + nodes.push({ name: energyNodeName }) + nodeMap[energyNodeName] = true + + // 添加总表节点 + const totalMeterName = `总表:${totalMeter.meterCode}` + nodes.push({ name: totalMeterName }) + nodeMap[totalMeterName] = true + + // 能源 -> 总表 连接 + links.push({ + source: energyNodeName, + target: totalMeterName, + value: totalConsumption + }) + + // 2. 总表 -> 分表/产线节点 + // 按产线分组分表 + const lineSubMeterMap = {} + subMeters.forEach(meter => { + const lineName = meter.productionLine ? this.getLineName(meter.productionLine) : '未分配产线' + if (!lineSubMeterMap[lineName]) { + lineSubMeterMap[lineName] = [] + } + lineSubMeterMap[lineName].push(meter) + }) + + // 为每条产线创建节点 + Object.keys(lineSubMeterMap).forEach(lineName => { + const lineMeters = lineSubMeterMap[lineName] + let lineConsumption = 0 + + // 计算产线总消耗 + lineMeters.forEach(meter => { + this.energyRecords.forEach(record => { + if (record.meterId === meter.meterId) { + lineConsumption += Number(record.consumption) || 0 + } + }) + }) + + if (lineConsumption > 0) { + // 产线节点 + nodes.push({ name: `产线:${lineName}` }) + nodeMap[`产线:${lineName}`] = true + links.push({ + source: totalMeterName, + target: `产线:${lineName}`, + value: lineConsumption + }) + + // 为产线下的每个分表创建节点 + lineMeters.forEach(meter => { + let meterConsumption = 0 + this.energyRecords.forEach(record => { + if (record.meterId === meter.meterId) { + meterConsumption += Number(record.consumption) || 0 + } + }) + if (meterConsumption > 0) { + const meterNodeName = `设备:${meter.meterCode}` + if (!nodeMap[meterNodeName]) { + nodes.push({ name: meterNodeName }) + nodeMap[meterNodeName] = true + } + links.push({ + source: `产线:${lineName}`, + target: meterNodeName, + value: meterConsumption + }) + } + }) + } + }) + + // 渲染桑基图 + const option = { + tooltip: { + trigger: 'item', + formatter: function (params) { + if (params.dataType === 'edge') { + return `${params.data.source} → ${params.data.target}
能耗: ${params.data.value.toFixed(2)}` + } else { + return `${params.name}
能耗: ${params.value ? params.value.toFixed(2) : 0}` + } + } + }, + series: [{ + type: 'sankey', + layout: 'none', + emphasis: { + focus: 'adjacency' + }, + data: nodes, + links: links, + lineStyle: { + color: 'gradient', + curveness: 0.5 + }, + label: { + color: '#333' + } + }] + } + + this.sankeyChart.setOption(option) + }, + updateLineEnergyTrendChart() { + const dateFormat = 'YYYY-MM-DD' + const groupedData = new Map() + + this.energyRecords.forEach(record => { + if (this.selectedLineAnalysisEnergyTypeId && record.energyId !== this.selectedLineAnalysisEnergyTypeId) { + return + } + + const meter = this.meterList.find(m => m.meterId === record.meterId) + if (!meter || !meter.productionLine) return + + const lines = Array.isArray(meter.productionLine) ? meter.productionLine : [meter.productionLine] + const dateKey = dayjs(record.recordDate).format(dateFormat) + + lines.forEach(lineId => { + if (this.selectedLines.length > 0 && !this.selectedLines.includes(lineId)) { + return + } + + const lineName = this.getLineName(lineId) + if (!groupedData.has(dateKey)) { + groupedData.set(dateKey, {}) + } + if (!groupedData.get(dateKey)[lineName]) { + groupedData.get(dateKey)[lineName] = 0 + } + groupedData.get(dateKey)[lineName] += Number(record.consumption) || 0 + }) + }) + + const dates = Array.from(groupedData.keys()).sort() + const lineNames = Array.from(new Set( + Array.from(groupedData.values()).flatMap(obj => Object.keys(obj)) + )).sort() + + const colors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399', '#00CED1', '#00BFFF', '#32CD32'] + const series = lineNames.map((lineName, index) => ({ + name: lineName, + type: 'line', + smooth: true, + data: dates.map(date => groupedData.get(date)[lineName] || 0), + itemStyle: { color: colors[index % colors.length] }, + areaStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: colors[index % colors.length] + '80' }, + { offset: 1, color: colors[index % colors.length] + '10' } + ]) + } + })) + + const selectedEnergyType = this.energyTypeList.find(t => t.energyTypeId === this.selectedLineAnalysisEnergyTypeId) + + const option = { + tooltip: { + trigger: 'axis' + }, + legend: { + data: lineNames, + top: 10 + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + top: 80, + containLabel: true + }, + xAxis: { + type: 'category', + boundaryGap: false, + data: dates + }, + yAxis: { + type: 'value', + name: selectedEnergyType ? selectedEnergyType.name : '能耗' + }, + series + } + this.lineEnergyTrendChart.setOption(option) + }, updateTableData() { const lineEnergyMap = new Map() - + this.energyRecords.forEach(record => { const meter = this.meterList.find(m => m.meterId === record.meterId) if (meter && meter.productionLine) { @@ -506,7 +683,7 @@ export default { lines.forEach(lineId => { const lineName = this.getLineName(lineId) const energyTypeId = record.energyId - + if (!lineEnergyMap.has(lineName)) { lineEnergyMap.set(lineName, {}) } @@ -596,12 +773,15 @@ export default { &.stat-0 { border-left: 4px solid #409EFF; } + &.stat-1 { border-left: 4px solid #67C23A; } + &.stat-2 { border-left: 4px solid #E6A23C; } + &.stat-3 { border-left: 4px solid #F56C6C; } @@ -620,14 +800,17 @@ export default { background: linear-gradient(135deg, #409EFF, #00CED1); color: #ffffff; } + .stat-1 & { background: linear-gradient(135deg, #67C23A, #95E67D); color: #ffffff; } + .stat-2 & { background: linear-gradient(135deg, #E6A23C, #F7D94C); color: #ffffff; } + .stat-3 & { background: linear-gradient(135deg, #F56C6C, #FC9494); color: #ffffff; @@ -663,6 +846,8 @@ export default { } .charts-section { + margin-bottom: 20px; + .chart-card { background: #ffffff; border-radius: 8px; diff --git a/klp-ui/src/views/wms/delivery/components/detailTable.vue b/klp-ui/src/views/wms/delivery/components/detailTable.vue index 42ccd83d..4d5f1a7b 100644 --- a/klp-ui/src/views/wms/delivery/components/detailTable.vue +++ b/klp-ui/src/views/wms/delivery/components/detailTable.vue @@ -8,7 +8,7 @@ 新增 - 批量新增