181 lines
4.5 KiB
Vue
181 lines
4.5 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<el-form :model="queryParams" ref="queryForm" :inline="true">
|
|
<el-form-item label="仓库" prop="warehouseId">
|
|
<el-select v-model="queryParams.warehouseId" placeholder="请选择仓库" clearable>
|
|
<el-option
|
|
v-for="item in warehouseOptions"
|
|
:key="item.warehouseId"
|
|
:label="item.warehouseName"
|
|
:value="item.warehouseId"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="时间范围" prop="dateRange">
|
|
<el-date-picker
|
|
v-model="dateRange"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
value-format="yyyy-MM-dd"
|
|
@change="handleDateRangeChange"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<div class="chart-wrapper">
|
|
<div class="chart-scroll-container">
|
|
<div ref="chartRef" style="height: 500px; min-width: 800px"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts'
|
|
import { listWarehouse } from '@/api/bas/warehouse'
|
|
import { getInAnalysisData } from '@/api/kpi/inAnalysis'
|
|
|
|
export default {
|
|
name: 'InAnalysisByTime',
|
|
data() {
|
|
return {
|
|
// 查询参数
|
|
queryParams: {
|
|
warehouseId: undefined,
|
|
startTime: '',
|
|
endTime: '',
|
|
inOut:'2'
|
|
},
|
|
dateRange: [],
|
|
|
|
// 仓库选项
|
|
warehouseOptions: [],
|
|
// 图表实例
|
|
chart: null,
|
|
// 图表数据
|
|
chartData: {
|
|
xAxis: [],
|
|
series: []
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getWarehouseList()
|
|
this.initChart()
|
|
this.setDefaultDateRange()
|
|
},
|
|
beforeDestroy() {
|
|
if (this.chart) {
|
|
this.chart.dispose()
|
|
this.chart = null
|
|
}
|
|
},
|
|
methods: {
|
|
/** 获取仓库列表 */
|
|
async getWarehouseList() {
|
|
try {
|
|
const response = await listWarehouse()
|
|
this.warehouseOptions = response.rows
|
|
} catch (error) {
|
|
console.error('获取仓库列表失败:', error)
|
|
}
|
|
},
|
|
/** 设置最近七天时间范围 */
|
|
setDefaultDateRange() {
|
|
const end = new Date()
|
|
const start = new Date()
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 6)
|
|
this.dateRange = [this.formatDate(start), this.formatDate(end)]
|
|
this.handleDateRangeChange(this.dateRange)
|
|
this.handleQuery()
|
|
},
|
|
/** 格式化日期 */
|
|
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}`
|
|
},
|
|
/** 初始化图表 */
|
|
initChart() {
|
|
this.chart = echarts.init(this.$refs.chartRef)
|
|
this.updateChart()
|
|
},
|
|
/** 更新图表数据 */
|
|
updateChart() {
|
|
const option = {
|
|
title: {
|
|
text: '出库数量统计'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: this.chartData.xAxis
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: '出库数量'
|
|
},
|
|
series: [{
|
|
name: '出库数量',
|
|
type: 'line',
|
|
data: this.chartData.series,
|
|
smooth: true
|
|
}]
|
|
}
|
|
this.chart.setOption(option)
|
|
},
|
|
/** 处理日期范围变化 */
|
|
handleDateRangeChange(val) {
|
|
if (val) {
|
|
this.queryParams.startTime = val[0]
|
|
this.queryParams.endTime = val[1]
|
|
} else {
|
|
this.queryParams.startTime = ''
|
|
this.queryParams.endTime = ''
|
|
}
|
|
},
|
|
/** 处理查询按钮点击 */
|
|
async handleQuery() {
|
|
try {
|
|
const response = await getInAnalysisData(this.queryParams)
|
|
if (response.code === 200) {
|
|
this.chartData.xAxis = response.data.xAxis
|
|
this.chartData.series = response.data.series
|
|
this.updateChart()
|
|
} else {
|
|
this.$message.error(response.msg)
|
|
}
|
|
} catch (error) {
|
|
console.error('获取统计数据失败:', error)
|
|
this.$message.error('获取统计数据失败')
|
|
}
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.chart-wrapper {
|
|
margin-top: 20px;
|
|
background: #fff;
|
|
padding: 20px;
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.chart-scroll-container {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
}
|
|
</style>
|