389 lines
10 KiB
Vue
389 lines
10 KiB
Vue
<template>
|
||
<div class="app-container cost-dashboard">
|
||
<!-- 成本概览 -->
|
||
<div class="overview-section">
|
||
<div class="overview-item">
|
||
<div class="overview-label">今日总成本</div>
|
||
<div class="overview-value primary">{{ formatMoney(todayCost) }}</div>
|
||
<div class="overview-desc">元</div>
|
||
</div>
|
||
<div class="overview-item">
|
||
<div class="overview-label">在库钢卷数</div>
|
||
<div class="overview-value warning">{{ totalCoils }}</div>
|
||
<div class="overview-desc">个</div>
|
||
</div>
|
||
<div class="overview-item">
|
||
<div class="overview-label">总净重</div>
|
||
<div class="overview-value success">{{ formatWeight(totalNetWeight) }}</div>
|
||
<div class="overview-desc">吨</div>
|
||
</div>
|
||
<div class="overview-item">
|
||
<div class="overview-label">当前成本标准</div>
|
||
<div class="overview-value info">{{ formatMoney(currentUnitCost) }}</div>
|
||
<div class="overview-desc">元/吨/天</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 快速入口 -->
|
||
<div class="action-section">
|
||
<div class="section-header">
|
||
<span>快速入口</span>
|
||
<el-tooltip content="批量日计算改为后端定时任务，这里仅提供配置与明细入口" placement="top">
|
||
<i class="el-icon-question"></i>
|
||
</el-tooltip>
|
||
</div>
|
||
<div class="action-buttons">
|
||
<el-button type="warning" icon="el-icon-setting" @click="goToStandardConfig">
|
||
成本标准配置
|
||
</el-button>
|
||
<el-button type="info" icon="el-icon-view" @click="goToDetail">
|
||
查看成本明细
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 成本趋势图表 -->
|
||
<div class="chart-section">
|
||
<div class="section-header">
|
||
<span>成本趋势（近30天）</span>
|
||
<el-date-picker
|
||
v-model="trendDateRange"
|
||
type="daterange"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
size="small"
|
||
style="width: 300px;"
|
||
value-format="yyyy-MM-dd"
|
||
@change="loadTrendData"
|
||
/>
|
||
</div>
|
||
<div id="costTrendChart" style="height: 300px;"></div>
|
||
</div>
|
||
|
||
<!-- 成本分布统计 -->
|
||
<div class="stat-section">
|
||
<div class="stat-item">
|
||
<div class="section-header">
|
||
<span>按库区统计</span>
|
||
</div>
|
||
<el-table :data="warehouseStats" stripe style="width: 100%">
|
||
<el-table-column prop="warehouseName" label="库区名称" />
|
||
<el-table-column prop="coilCount" label="钢卷数" align="right" />
|
||
<el-table-column prop="totalCost" label="总成本" align="right">
|
||
<template slot-scope="scope">
|
||
{{ formatMoney(scope.row.totalCost) }}
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="section-header">
|
||
<span>按物品类型统计</span>
|
||
</div>
|
||
<el-table :data="itemTypeStats" stripe style="width: 100%">
|
||
<el-table-column prop="itemType" label="物品类型">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.itemType === 'raw_material' ? '原料' : '成品' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="coilCount" label="钢卷数" align="right" />
|
||
<el-table-column prop="totalCost" label="总成本" align="right">
|
||
<template slot-scope="scope">
|
||
{{ formatMoney(scope.row.totalCost) }}
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
queryCostSummary,
|
||
queryCostTrend,
|
||
getCurrentCostStandard,
|
||
getCostOverview
|
||
} from '@/api/wms/cost'
|
||
import * as echarts from 'echarts'
|
||
|
||
export default {
|
||
name: 'CostDashboard',
|
||
data() {
|
||
return {
|
||
todayCost: 0,
|
||
totalCoils: 0,
|
||
totalNetWeight: 0,
|
||
totalGrossWeight: 0,
|
||
avgStorageDays: 0,
|
||
currentUnitCost: 10000,
|
||
trendDateRange: [],
|
||
trendChart: null,
|
||
warehouseStats: [],
|
||
itemTypeStats: []
|
||
}
|
||
},
|
||
mounted() {
|
||
this.initTrendDateRange()
|
||
this.loadOverviewData()
|
||
this.loadTrendData()
|
||
this.loadStatsData()
|
||
this.loadCurrentStandard()
|
||
},
|
||
beforeDestroy() {
|
||
if (this.trendChart) {
|
||
this.trendChart.dispose()
|
||
}
|
||
},
|
||
methods: {
|
||
initTrendDateRange() {
|
||
const end = new Date()
|
||
const start = new Date()
|
||
start.setTime(start.getTime() - 30 * 24 * 60 * 60 * 1000)
|
||
this.trendDateRange = [
|
||
start.toISOString().split('T')[0],
|
||
end.toISOString().split('T')[0]
|
||
]
|
||
},
|
||
async loadOverviewData() {
|
||
try {
|
||
const res = await getCostOverview()
|
||
if (res.code === 200 && res.data) {
|
||
this.todayCost = res.data.totalCost || 0
|
||
this.totalCoils = res.data.totalCoils || 0
|
||
this.totalNetWeight = res.data.totalNetWeight || 0
|
||
this.totalGrossWeight = res.data.totalGrossWeight || 0
|
||
this.avgStorageDays = res.data.avgStorageDays || 0
|
||
}
|
||
} catch (error) {
|
||
console.error('加载概览数据失败:', error)
|
||
}
|
||
},
|
||
async loadTrendData() {
|
||
if (!this.trendDateRange || this.trendDateRange.length !== 2) return
|
||
try {
|
||
const startDate = this.trendDateRange[0] instanceof Date
|
||
? this.trendDateRange[0].toISOString().split('T')[0]
|
||
: this.trendDateRange[0]
|
||
const endDate = this.trendDateRange[1] instanceof Date
|
||
? this.trendDateRange[1].toISOString().split('T')[0]
|
||
: this.trendDateRange[1]
|
||
const res = await queryCostTrend(startDate, endDate)
|
||
if (res.code === 200 && res.data) {
|
||
this.renderTrendChart(res.data)
|
||
}
|
||
} catch (error) {
|
||
console.error('加载趋势数据失败:', error)
|
||
}
|
||
},
|
||
renderTrendChart(data) {
|
||
this.$nextTick(() => {
|
||
if (!this.trendChart) {
|
||
this.trendChart = echarts.init(document.getElementById('costTrendChart'))
|
||
}
|
||
const dates = data.map(item => item.date)
|
||
const costs = data.map(item => item.totalCost)
|
||
const option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
formatter: (params) => {
|
||
return `${params[0].name}<br/>成本: ${this.formatMoney(params[0].value)}元`
|
||
}
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: dates,
|
||
axisLine: { lineStyle: { color: '#C0C4CC' } }
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLine: { lineStyle: { color: '#C0C4CC' } },
|
||
axisLabel: {
|
||
formatter: (value) => {
|
||
if (value >= 10000) {
|
||
return (value / 10000).toFixed(1) + '万'
|
||
}
|
||
return value
|
||
}
|
||
}
|
||
},
|
||
series: [{
|
||
data: costs,
|
||
type: 'line',
|
||
smooth: true,
|
||
itemStyle: { color: '#409EFF' },
|
||
areaStyle: {
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{ offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
|
||
{ offset: 1, color: 'rgba(64, 158, 255, 0.1)' }
|
||
]
|
||
}
|
||
}
|
||
}]
|
||
}
|
||
this.trendChart.setOption(option)
|
||
})
|
||
},
|
||
async loadStatsData() {
|
||
try {
|
||
const today = new Date().toISOString().split('T')[0]
|
||
const res = await queryCostSummary(today, today, 'warehouse', null)
|
||
if (res.code === 200) {
|
||
this.warehouseStats = res.data.details || []
|
||
const itemTypeRes = await queryCostSummary(today, today, 'itemType', null)
|
||
if (itemTypeRes.code === 200) {
|
||
this.itemTypeStats = itemTypeRes.data.details || []
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('加载统计数据失败:', error)
|
||
}
|
||
},
|
||
async loadCurrentStandard() {
|
||
try {
|
||
const res = await getCurrentCostStandard()
|
||
if (res.code === 200 && res.data) {
|
||
this.currentUnitCost = res.data.unitCost || 10000
|
||
}
|
||
} catch (error) {
|
||
console.error('加载成本标准失败:', error)
|
||
}
|
||
},
|
||
goToStandardConfig() {
|
||
this.$router.push('/wms/cost/standard')
|
||
},
|
||
goToDetail() {
|
||
this.$router.push('/wms/cost/detail')
|
||
},
|
||
formatMoney(value) {
|
||
if (!value) return '0.00'
|
||
return Number(value).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
||
},
|
||
formatWeight(value) {
|
||
if (!value) return '0.000'
|
||
return Number(value).toFixed(3)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.cost-dashboard {
|
||
padding: 20px;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.overview-section {
|
||
display: flex;
|
||
gap: 20px;
|
||
margin-bottom: 20px;
|
||
padding: 20px;
|
||
background: #fafafa;
|
||
border-radius: 4px;
|
||
border: 1px solid #ebeef5;
|
||
|
||
.overview-item {
|
||
flex: 1;
|
||
text-align: center;
|
||
|
||
.overview-label {
|
||
font-size: 14px;
|
||
color: #606266;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.overview-value {
|
||
font-size: 32px;
|
||
font-weight: bold;
|
||
margin-bottom: 5px;
|
||
|
||
&.primary {
|
||
color: #409eff;
|
||
}
|
||
|
||
&.warning {
|
||
color: #e6a23c;
|
||
}
|
||
|
||
&.success {
|
||
color: #67c23a;
|
||
}
|
||
|
||
&.info {
|
||
color: #909399;
|
||
}
|
||
}
|
||
|
||
.overview-desc {
|
||
font-size: 12px;
|
||
color: #909399;
|
||
}
|
||
}
|
||
}
|
||
|
||
.action-section {
|
||
margin-bottom: 20px;
|
||
padding: 20px;
|
||
background: #fafafa;
|
||
border-radius: 4px;
|
||
border: 1px solid #ebeef5;
|
||
}
|
||
|
||
.section-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-weight: 500;
|
||
margin-bottom: 15px;
|
||
font-size: 16px;
|
||
color: #303133;
|
||
|
||
.el-icon-question {
|
||
color: #909399;
|
||
cursor: help;
|
||
margin-left: 5px;
|
||
}
|
||
}
|
||
|
||
.action-buttons {
|
||
display: flex;
|
||
gap: 15px;
|
||
}
|
||
|
||
.chart-section {
|
||
margin-bottom: 20px;
|
||
padding: 20px;
|
||
background: #fafafa;
|
||
border-radius: 4px;
|
||
border: 1px solid #ebeef5;
|
||
}
|
||
|
||
.stat-section {
|
||
display: flex;
|
||
gap: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.stat-item {
|
||
flex: 1;
|
||
padding: 20px;
|
||
background: #fafafa;
|
||
border-radius: 4px;
|
||
border: 1px solid #ebeef5;
|
||
}
|
||
</style>
|
||
|