项目初始化
This commit is contained in:
liuhanqing
169
ruoyi-ui/src/views/kpi/inAnalysis/index.vue
Normal file
169
ruoyi-ui/src/views/kpi/inAnalysis/index.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="120px">
|
||||
<!-- 仓库 -->
|
||||
<el-form-item label="仓库" prop="warehouseId">
|
||||
<el-select v-model="queryParams.warehouseId" placeholder="请选择仓库" clearable>
|
||||
<el-option
|
||||
v-for="dict in warehouseOptions"
|
||||
:key="dict.warehouseId"
|
||||
:label="dict.warehouseName"
|
||||
:value="dict.warehouseId"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- 年月 -->
|
||||
<el-form-item label="年月" prop="yearMonth">
|
||||
<el-date-picker
|
||||
v-model="queryParams.yearMonth"
|
||||
type="month"
|
||||
placeholder="请选择年月"
|
||||
value-format="yyyy-MM"
|
||||
format="yyyy-MM"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<!-- 【查询】按钮 -->
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
|
||||
<!-- 【重置】按钮 -->
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 柱状图容器 -->
|
||||
<div class="chart-container" style="height: 700px">
|
||||
<div ref="tunnelChart" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from '@/plugins/echarts.min.js'
|
||||
import { getInAnalysisList } from "@/api/kpi/inAnalysis"
|
||||
import { listWarehouse } from "@/api/bas/warehouse"
|
||||
|
||||
export default {
|
||||
name: "inAnalysis",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 仓库选项
|
||||
warehouseOptions: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
warehouseId: "01", // 默认选择仓库1
|
||||
yearMonth: null
|
||||
},
|
||||
// 图表实例
|
||||
chart: null,
|
||||
// 模拟数据
|
||||
chartData: {
|
||||
tunnels: [],
|
||||
counts: []
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getWarehouseList();
|
||||
this.handleQuery();
|
||||
},
|
||||
mounted() {
|
||||
this.initChart();
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.chart) {
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/** 查询仓库列表 */
|
||||
getWarehouseList() {
|
||||
// TODO: 调用获取仓库列表接口
|
||||
var quaryParam = {
|
||||
pageNum:1,
|
||||
pageSize:99
|
||||
}
|
||||
listWarehouse(quaryParam).then(response => {
|
||||
this.warehouseOptions = response.rows;
|
||||
});
|
||||
// this.warehouseOptions = [{warehouseId: "01", warehouseName: "仓库1"}, {warehouseId: "02", warehouseName: "仓库2"}];
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
getInAnalysisList(this.queryParams).then(response => {
|
||||
|
||||
this.chartData = response.data;
|
||||
this.updateChart();
|
||||
});
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.queryParams.warehouseId = "01"; // 重置时仍选择仓库1
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 初始化图表 */
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.tunnelChart);
|
||||
this.updateChart();
|
||||
},
|
||||
/** 更新图表数据 */
|
||||
updateChart() {
|
||||
const option = {
|
||||
title: {
|
||||
// 标题：入库均匀分析
|
||||
text: '入库均匀分析',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.chartData.tunnels,
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 0
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
// 数量
|
||||
name: '数量'
|
||||
},
|
||||
series: [{
|
||||
data: this.chartData.counts,
|
||||
type: 'bar',
|
||||
barWidth: '40%',
|
||||
itemStyle: {
|
||||
color: '#1890ff'
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
}
|
||||
}]
|
||||
};
|
||||
this.chart.setOption(option);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart-container {
|
||||
margin-top: 20px;
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
|
||||
}
|
||||
</style>
|
||||
191
ruoyi-ui/src/views/kpi/inAnalysis/indexByTime.vue
Normal file
191
ruoyi-ui/src/views/kpi/inAnalysis/indexByTime.vue
Normal file
@@ -0,0 +1,191 @@
|
||||
<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:'1'
|
||||
},
|
||||
dateRange: [],
|
||||
|
||||
// 仓库选项
|
||||
warehouseOptions: [],
|
||||
// 图表实例
|
||||
chart: null,
|
||||
// 图表数据
|
||||
chartData: {
|
||||
xAxis: [],
|
||||
series: []
|
||||
},
|
||||
queryWarehouseParam:{
|
||||
pageNum: 1,
|
||||
pageSize: 99,
|
||||
typeData:[1,2]
|
||||
}
|
||||
}
|
||||
},
|
||||
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.queryWarehouseParam)
|
||||
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() {
|
||||
// 验证时间范围是否为空
|
||||
if (!this.dateRange || this.dateRange.length === 0 || !this.dateRange[0] || !this.dateRange[1]) {
|
||||
this.$message.warning('请选择时间范围') // 请选择时间范围
|
||||
return
|
||||
}
|
||||
|
||||
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>
|
||||
Reference in New Issue
Block a user