<template>
|
<div class="stock-material-board">
|
<div class="page-header">
|
<h2>库存与物料看板</h2>
|
</div>
|
|
<!-- 搜索表单 -->
|
<el-card class="search-form-card" shadow="never">
|
<el-form :inline="true" :model="searchParams" class="search-form">
|
<el-form-item label="时间范围">
|
<el-date-picker
|
v-model="searchParams.dateRange"
|
type="daterange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
:shortcuts="dateShortcuts"
|
value-format="YYYY-MM-DD"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="handleSearch" :loading="loading">查询</el-button>
|
<el-button @click="handleReset">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</el-card>
|
|
<!-- 统计卡片 -->
|
<div class="stats-cards">
|
<div class="stat-card">
|
<div class="card-icon">
|
<i class="el-icon-download" />
|
</div>
|
<div class="card-content">
|
<div class="card-title">今日入库总量</div>
|
<div class="card-value">{{ todayInboundTotal.toFixed(2) }} 吨</div>
|
</div>
|
</div>
|
|
<div class="stat-card">
|
<div class="card-icon">
|
<i class="el-icon-upload" />
|
</div>
|
<div class="card-content">
|
<div class="card-title">今日出库总量</div>
|
<div class="card-value">{{ todayOutboundTotal.toFixed(2) }} 吨</div>
|
</div>
|
</div>
|
|
<div class="stat-card">
|
<div class="card-icon">
|
<i class="el-icon-shopping-cart-full" />
|
</div>
|
<div class="card-content">
|
<div class="card-title">当前库存总量</div>
|
<div class="card-value">{{ currentTotalStock.toFixed(2) }} 吨</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 分类数据展示 -->
|
<el-card class="category-cards" shadow="never">
|
<template #header>
|
<div class="card-header">
|
<span>分类数据统计</span>
|
</div>
|
</template>
|
|
<!-- 煤种分类 -->
|
<div class="category-section">
|
<h3 class="category-title"><i class="el-icon-menu"></i> 煤种分布</h3>
|
<div class="category-items">
|
<div v-for="item in coalTypeData" :key="item.name" class="category-item">
|
<span class="item-name">{{ item.name }}</span>
|
<div class="item-bar">
|
<div class="item-progress" :style="{ width: item.percentage + '%' }"></div>
|
</div>
|
<span class="item-value">{{ item.value.toFixed(2) }} 吨 ({{ item.percentage.toFixed(1) }}%)</span>
|
</div>
|
</div>
|
</div>
|
|
<!-- 热值分类 -->
|
<div class="category-section">
|
<h3 class="category-title"><i class="el-icon-fire"></i> 热值分布</h3>
|
<div class="category-items">
|
<div v-for="item in calorificData" :key="item.name" class="category-item">
|
<span class="item-name">{{ item.name }}</span>
|
<div class="item-bar">
|
<div class="item-progress" :style="{ width: item.percentage + '%' }"></div>
|
</div>
|
<span class="item-value">{{ item.value.toFixed(2) }} 吨 ({{ item.percentage.toFixed(1) }}%)</span>
|
</div>
|
</div>
|
</div>
|
|
<!-- 车次编码分类 -->
|
<div class="category-section">
|
<h3 class="category-title"><i class="el-icon-train"></i> 车次编码统计</h3>
|
<div class="train-code-list">
|
<div v-for="item in trainCodeData" :key="item.code" class="train-code-item">
|
<div class="train-code-info">
|
<span class="train-code-label">{{ item.code }}</span>
|
<div class="train-code-details">
|
<span class="train-count">次数: {{ item.count }}</span>
|
<span class="train-total">总量: {{ item.total.toFixed(2) }}吨</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-card>
|
|
<!-- 最近交易记录 -->
|
<el-card class="transactions-card" shadow="never">
|
<template #header>
|
<div class="card-header">
|
<span>最近交易记录</span>
|
</div>
|
</template>
|
<el-table v-loading="loading" :data="recentTransactions" style="width: 100%">
|
<el-table-column prop="id" label="序号" width="60" type="index" align="center"/>
|
<el-table-column prop="type" label="煤料类型" width="100">
|
<template #default="scope">
|
<span>{{ scope.row.type === 1 ? '成品' : scope.row.type === 2 ? '原料' : '-' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="supplierName" label="供应商名称" />
|
<el-table-column prop="coalName" label="煤种" />
|
<el-table-column prop="purchaseQuantity" label="采购数量" width="100" />
|
<el-table-column prop="priceIncludingTax" label=" 单价（含税）" />
|
<el-table-column prop="totalPriceIncludingTax" label="总价（含税）" />
|
<el-table-column prop="createTime" label="创建时间" width="180" />
|
</el-table>
|
</el-card>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, onMounted } from 'vue'
|
import { ElMessage } from 'element-plus'
|
import { getMaterialStatistics, getCoalTypeDistribution, getHeatValueDistribution, getCarCodeDistribution, getRecentTransaction } from '@/api/productionScheduling'
|
|
// 搜索参数
|
const searchParams = ref({
|
dateRange: [],
|
coalType: '',
|
trainCode: ''
|
})
|
|
// 日期快捷选项
|
const dateShortcuts = [
|
{
|
text: '今天',
|
value: () => {
|
const formatDate = (date) => {
|
const year = date.getFullYear()
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
const day = String(date.getDate()).padStart(2, '0')
|
return `${year}-${month}-${day}`
|
}
|
const end = new Date()
|
const start = new Date()
|
return [formatDate(start), formatDate(end)]
|
}
|
},
|
{
|
text: '昨天',
|
value: () => {
|
const formatDate = (date) => {
|
const year = date.getFullYear()
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
const day = String(date.getDate()).padStart(2, '0')
|
return `${year}-${month}-${day}`
|
}
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24)
|
return [formatDate(start), formatDate(end)]
|
}
|
},
|
{
|
text: '近7天',
|
value: () => {
|
const formatDate = (date) => {
|
const year = date.getFullYear()
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
const day = String(date.getDate()).padStart(2, '0')
|
return `${year}-${month}-${day}`
|
}
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
return [formatDate(start), formatDate(end)]
|
}
|
},
|
{
|
text: '近30天',
|
value: () => {
|
const formatDate = (date) => {
|
const year = date.getFullYear()
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
const day = String(date.getDate()).padStart(2, '0')
|
return `${year}-${month}-${day}`
|
}
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
return [formatDate(start), formatDate(end)]
|
}
|
},
|
{
|
text: '本月',
|
value: () => {
|
const formatDate = (date) => {
|
const year = date.getFullYear()
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
const day = String(date.getDate()).padStart(2, '0')
|
return `${year}-${month}-${day}`
|
}
|
const end = new Date()
|
const start = new Date(end.getFullYear(), end.getMonth(), 1)
|
return [formatDate(start), formatDate(end)]
|
}
|
}
|
]
|
|
// 统计数据
|
const todayInboundTotal = ref(0)
|
const todayOutboundTotal = ref(0)
|
const currentTotalStock = ref(0)
|
|
// 百分比数据（根据需要保留）
|
const todayInStockPercentage = ref(0)
|
const todayOutStockPercentage = ref(0)
|
|
// 分类数据 - 煤种分布
|
const coalTypeData = ref([
|
{ name: '烟煤', value: 4500, percentage: 30.0 },
|
{ name: '无烟煤', value: 3200, percentage: 21.3 },
|
{ name: '褐煤', value: 2800, percentage: 18.7 },
|
{ name: '贫煤', value: 2500, percentage: 16.7 },
|
{ name: '瘦煤', value: 2680, percentage: 17.9 }
|
])
|
|
// 分类数据 - 热值分布
|
const calorificData = ref([
|
{ name: '4000-4500', value: 2800, percentage: 17.9 },
|
{ name: '4500-5000', value: 4200, percentage: 26.8 },
|
{ name: '5000-5500', value: 5600, percentage: 35.7 },
|
{ name: '5500-6000', value: 2500, percentage: 16.0 },
|
{ name: '6000+', value: 580, percentage: 3.7 }
|
])
|
|
// 分类数据 - 车次编码统计
|
const trainCodeData = ref([])
|
|
// 最近交易记录数据
|
const recentTransactions = ref([])
|
|
// 加载状态
|
const loading = ref(false)
|
|
// 查询数据
|
const handleSearch = async () => {
|
try {
|
loading.value = true
|
console.log('搜索参数:', searchParams.value)
|
|
// 构建请求参数
|
const params = {
|
entryDateStart: searchParams.value.dateRange && searchParams.value.dateRange[0] ? searchParams.value.dateRange[0] : '',
|
entryDateEnd: searchParams.value.dateRange && searchParams.value.dateRange[1] ? searchParams.value.dateRange[1] : ''
|
}
|
|
// 调用API获取统计数据
|
const response = await getMaterialStatistics(params)
|
|
// 根据项目中其他地方的代码风格，检查响应成功的条件应该是code === 200
|
if (response.code === 200 && response.data) {
|
// 更新统计数据
|
todayInboundTotal.value = response.data.todayInboundTotal || 0
|
todayOutboundTotal.value = response.data.todayOutboundTotal || 0
|
currentTotalStock.value = response.data.currentInventoryTotal || 0
|
|
// 可以在这里添加百分比的计算逻辑，如果API返回了相关数据
|
// 暂时保留原有的模拟百分比数据
|
todayInStockPercentage.value = -10 + Math.random() * 20
|
todayOutStockPercentage.value = -10 + Math.random() * 20
|
}
|
|
// 调用API获取煤种分布数据
|
const coalTypeResponse = await getCoalTypeDistribution(params)
|
|
if (coalTypeResponse.code === 200 && coalTypeResponse.data) {
|
// 根据接口响应更新煤种分布数据
|
coalTypeData.value = coalTypeResponse.data.map(item => ({
|
name: item.name || '',
|
value: item.value || 0,
|
percentage: item.percent || 0
|
}))
|
}
|
|
// 调用API获取热值分布数据
|
const heatValueResponse = await getHeatValueDistribution(params)
|
|
if (heatValueResponse.code === 200 && heatValueResponse.data) {
|
// 根据接口响应更新热值分布数据
|
calorificData.value = heatValueResponse.data.map(item => ({
|
name: item.name || '',
|
value: item.value || 0,
|
percentage: item.percent || 0
|
}))
|
}
|
|
// 调用API获取车次编码分布数据
|
const carCodeResponse = await getCarCodeDistribution(params)
|
|
if (carCodeResponse.code === 200 && carCodeResponse.data) {
|
// 根据接口响应更新车次编码数据
|
trainCodeData.value = carCodeResponse.data
|
}
|
|
// 调用API获取最近交易记录
|
const transactionResponse = await getRecentTransaction(params)
|
|
if (transactionResponse.code === 200 && transactionResponse.data) {
|
// 根据接口响应更新最近交易记录数据
|
// 由于接口返回的数据结构与表格所需的结构不完全匹配，需要进行字段映射
|
recentTransactions.value = transactionResponse.data
|
}
|
} catch (error) {
|
console.error('查询失败:', error)
|
} finally {
|
loading.value = false
|
}
|
}
|
|
// 重置搜索参数
|
const handleReset = () => {
|
searchParams.value = {
|
dateRange: [],
|
coalType: '',
|
trainCode: ''
|
}
|
}
|
|
// 刷新数据
|
const handleRefresh = () => {
|
ElMessage.info('正在刷新数据...')
|
handleSearch()
|
}
|
|
// 自动生成编码函数
|
const generateCode = (type) => {
|
const prefix = type === '入库' ? 'RK' : type === '出库' ? 'CK' : 'LL'
|
const date = new Date().toISOString().slice(0, 10).replace(/-/g, '')
|
const random = Math.floor(Math.random() * 1000).toString().padStart(3, '0')
|
return `${prefix}${date}${random}`
|
}
|
|
// 初始化页面
|
onMounted(() => {
|
// 默认查询近7天数据
|
const formatDate = (date) => {
|
const year = date.getFullYear()
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
const day = String(date.getDate()).padStart(2, '0')
|
return `${year}-${month}-${day}`
|
}
|
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
searchParams.value.dateRange = [formatDate(start), formatDate(end)]
|
|
// 初始加载数据
|
handleSearch()
|
})
|
</script>
|
|
<style scoped>
|
.stock-material-board {
|
padding: 20px;
|
}
|
|
.page-header {
|
margin-bottom: 20px;
|
}
|
|
.page-header h2 {
|
margin-bottom: 15px;
|
font-size: 18px;
|
font-weight: 600;
|
color: #303133;
|
}
|
|
.search-form-card {
|
margin-bottom: 20px;
|
}
|
|
.search-form {
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
gap: 16px;
|
}
|
|
.stats-cards {
|
display: grid;
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
gap: 16px;
|
margin-bottom: 24px;
|
}
|
|
.stat-card {
|
display: flex;
|
padding: 20px;
|
background: #fff;
|
border-radius: 8px;
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
transition: transform 0.3s, box-shadow 0.3s;
|
}
|
|
.stat-card:hover {
|
transform: translateY(-2px);
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
}
|
|
.card-icon {
|
width: 48px;
|
height: 48px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border-radius: 50%;
|
font-size: 24px;
|
margin-right: 16px;
|
}
|
|
.stat-card:nth-child(1) .card-icon {
|
background: #F6FFED;
|
color: #52C41A;
|
}
|
|
.stat-card:nth-child(2) .card-icon {
|
background: #FFF7E6;
|
color: #FA8C16;
|
}
|
|
.stat-card:nth-child(3) .card-icon {
|
background: #FFF2F0;
|
color: #FF4D4F;
|
}
|
|
.stat-card:nth-child(4) .card-icon {
|
background: #E6F7FF;
|
color: #1890FF;
|
}
|
|
.card-content {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
}
|
|
.card-title {
|
font-size: 14px;
|
color: #909399;
|
margin-bottom: 8px;
|
}
|
|
.card-value {
|
font-size: 24px;
|
font-weight: 600;
|
color: #303133;
|
margin-bottom: 4px;
|
}
|
|
.card-percentage {
|
font-size: 12px;
|
}
|
|
.card-percentage.positive {
|
color: #52C41A;
|
}
|
|
.card-percentage.negative {
|
color: #FF4D4F;
|
}
|
|
.category-cards {
|
margin-bottom: 24px;
|
}
|
|
.category-section {
|
margin-bottom: 24px;
|
padding-bottom: 20px;
|
border-bottom: 1px solid #EBEEF5;
|
}
|
|
.category-section:last-child {
|
margin-bottom: 0;
|
padding-bottom: 0;
|
border-bottom: none;
|
}
|
|
.category-title {
|
font-size: 16px;
|
font-weight: 600;
|
color: #303133;
|
margin-bottom: 16px;
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
}
|
|
.train-code-list {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 12px;
|
}
|
|
.train-code-item {
|
flex: 1;
|
min-width: 200px;
|
padding: 16px;
|
background-color: #f5f7fa;
|
border-radius: 8px;
|
}
|
|
.train-code-info {
|
display: flex;
|
flex-direction: column;
|
gap: 8px;
|
}
|
|
.train-code-label {
|
font-size: 16px;
|
font-weight: 600;
|
color: #409eff;
|
}
|
|
.train-code-details {
|
display: flex;
|
justify-content: space-between;
|
font-size: 14px;
|
color: #606266;
|
}
|
|
.train-count,
|
.train-total {
|
display: inline-block;
|
}
|
|
.category-items {
|
display: flex;
|
flex-direction: column;
|
gap: 12px;
|
}
|
|
.category-item {
|
display: flex;
|
align-items: center;
|
gap: 16px;
|
}
|
|
.item-name {
|
width: 100px;
|
font-size: 14px;
|
color: #606266;
|
}
|
|
.item-bar {
|
flex: 1;
|
height: 8px;
|
background-color: #F5F7FA;
|
border-radius: 4px;
|
overflow: hidden;
|
}
|
|
.item-progress {
|
height: 100%;
|
background-color: #409EFF;
|
border-radius: 4px;
|
transition: width 0.3s ease;
|
}
|
|
.item-value {
|
width: 140px;
|
text-align: right;
|
font-size: 14px;
|
color: #606266;
|
}
|
|
.transactions-card {
|
background: #fff;
|
border-radius: 8px;
|
}
|
|
.card-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 16px 20px;
|
border-bottom: 1px solid #EBEEF5;
|
}
|
|
.card-header span {
|
font-weight: 600;
|
color: #303133;
|
}
|
|
.type-tag {
|
padding: 4px 8px;
|
border-radius: 4px;
|
font-size: 12px;
|
}
|
|
.type-in {
|
background: #F6FFED;
|
color: #52C41A;
|
border: 1px solid #B7EB8F;
|
}
|
|
.type-out {
|
background: #FFF7E6;
|
color: #FA8C16;
|
border: 1px solid #FFD591;
|
}
|
|
.type-pick {
|
background: #FFF2F0;
|
color: #FF4D4F;
|
border: 1px solid #FFCCC7;
|
}
|
|
/* 修复日期选择器被动事件监听器问题 */
|
.el-date-editor {
|
touch-action: none;
|
}
|
|
/* 禁用日期选择器的默认选择器指示器的触摸交互 */
|
.el-date-picker__editor-wrap .el-input__inner::-webkit-calendar-picker-indicator {
|
-webkit-touch-callout: none;
|
-webkit-user-select: none;
|
user-select: none;
|
}
|
|
/* 响应式设计 */
|
@media screen and (max-width: 1200px) {
|
.stats-cards {
|
grid-template-columns: repeat(2, 1fr);
|
}
|
}
|
|
@media screen and (max-width: 768px) {
|
.stats-cards {
|
grid-template-columns: 1fr;
|
}
|
|
.search-form {
|
flex-direction: column;
|
align-items: stretch;
|
}
|
|
.search-form .el-form-item {
|
width: 100%;
|
}
|
}
|
</style>
|
