zgw/FTC25009
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

项目初始化

Browse Source
This commit is contained in:
刘汗青
2026-06-10 10:03:08 +08:00
commit a3c023a8d3
1255 changed files with 194055 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

216
ruoyi-ui/src/views/kpi/cargospace/index.vue Normal file
View File

@@ -0,0 +1,216 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
<!-- 仓库 -->
<el-form-item label="仓库" prop="warehouseId">
<el-select v-model="queryParams.warehouseId" placeholder="请选择仓库" clearable @change="onWarehouseChange">
<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="roadwayId">
<el-select v-model="queryParams.roadwayId" placeholder="请选择巷道" clearable @change="handleQuery">
<el-option
v-for="item in roadwayOptions"
:key="item.roadwayId"
:label="item.roadwayName"
:value="item.roadwayId"
/>
</el-select>
</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="spaceChart" style="width: 100%; height: 100%"></div>
</div>
</div>
</template>
<script>
import * as echarts from '@/plugins/echarts.min.js'
import {listWarehouse} from "@/api/bas/warehouse";
import {listRoadway} from "@/api/bas/roadway";
import {getSpaceStatusCounts} from "@/api/kpi/kpi";
export default {
name: "spaceAnalysis",
data() {
return {
// 遮罩层
loading: true,
// 显示搜索条件
showSearch: true,
// 仓库选项
warehouseOptions: [],
// 巷道选项
roadwayOptions: [],
// 查询参数
queryParams: {
warehouseId: null,
roadwayId: null
},
// 图表实例
chart: null,
// 图表数据（状态计数）
chartData: {},
queryWarehouseParam: {
pageNum: 1,
pageSize: 99,
warehouseType: 1
}
}
}
,
created() {
this.getWarehouseList();
this.handleQuery();
}
,
mounted() {
this.initChart();
}
,
beforeDestroy() {
if (this.chart) {
this.chart.dispose();
this.chart = null;
}
}
,
methods: {
/** 查询仓库列表 */
getWarehouseList() {
listWarehouse(this.queryWarehouseParam).then(response => {
this.warehouseOptions = response.rows;
// 默认选择第一个仓库并加载巷道
// if (!this.queryParams.warehouseId && this.warehouseOptions.length) {
// this.queryParams.warehouseId = this.warehouseOptions[0].warehouseId;
// }
this.getRoadwayList();
});
}
,
/** 仓库切换 */
onWarehouseChange() {
this.queryParams.roadwayId = null;
this.getRoadwayList();
}
,
/** 查询巷道列表 */
getRoadwayList() {
if (!this.queryParams.warehouseId) return;
listRoadway({warehouseId: this.queryParams.warehouseId}).then(res => {
this.roadwayOptions = (res.rows) || [];
this.handleQuery();
});
}
,
/** 搜索按钮操作 */
handleQuery() {
getSpaceStatusCounts(this.queryParams).then(response => {
if (response.code === 200) {
this.chartData = response.data || {};
this.updateChart();
} else {
this.$message.error(response.msg);
}
}).catch(error => {
console.error('获取数据失败:', error);
this.$message.error('获取数据失败');
});
}
,
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.queryParams.roadwayId = null;
this.queryParams.warehouseId = null;
this.handleQuery();
}
,
/** 初始化图表 */
initChart() {
this.chart = echarts.init(this.$refs.spaceChart);
this.updateChart();
}
,
/** 状态码转换为国际化文本 */
getStatusText(statusCode) {
const statusMap = {
'1': '空闲',
'2': '占用',
'3': '入库分配',
'4': '出库分配',
'5': '入库需盘点',
'6': '出库需盘点'
};
return statusMap[statusCode] || statusCode;
}
,
/** 更新图表数据为饼图 */
updateChart() {
const counts = this.chartData || {};
const statusCodes = ['1', '2', '3', '4', '5', '6'];
const pieData = statusCodes.map(code => ({
name: this.getStatusText(code),
value: counts[code] || 0
}));
const option = {
title: {
text: '货位状态分析',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{b}: {c} ({d}%)'
},
legend: {
top: "5%",
textStyle: {
fontSize: 15,
color: "#292c2c"
},
},
color: ['#25abd9', '#fac858', '#91cc75', '#ee6666', '#73c0de', '#3ba272'], // 添加六个自定义颜色
series: [{
name: '货位状态',
type: 'pie',
radius: '60%',
center: ['50%', '60%'],
data: pieData,
label: {
show: true,
formatter: '{b}: {c}'
}
}]
};
if (this.chart) {
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>

228
ruoyi-ui/src/views/kpi/in/index.vue Normal file
View File

@@ -0,0 +1,228 @@
<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"
unlink-panels
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/kpi'
export default {
name: 'InAnalysisByTime',
data() {
return {
// 查询参数
queryParams: {
warehouseId: null,
startTime: '',
endTime: '',
inOut: '1'
},
dateRange: [],
// 仓库选项
warehouseOptions: [],
// 图表实例
chart: null,
// 图表数据
chartData: {
xAxis: [],
series: []
},
// 图表颜色
chartColors: ['#409EFF', '#3ac270', '#f56c6c', '#67c23a', '#e6a23c', '#909399'],
queryWarehouseParam: {
pageNum: 1,
pageSize: 99,
warehouseType: 1
}
}
},
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() {
// 在调用setOption前检查chart实例是否存在
if (this.chart && typeof this.chart.setOption === 'function') {
const option = {
title: {
text: '入库数量统计' // 入库数量统计（按巷道）
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
legend: {
data: this.chartData.series.map(item => item.name),
top: 25
},
grid: {
top: 80,
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.chartData.xAxis,
axisLabel: {
rotate: 0
}
},
yAxis: {
type: 'value',
name: '入库数量', // 入库数量
minInterval: 1
},
series: this.chartData.series.map((item, index) => ({
name: item.name,
type: 'line',
data: item.data,
smooth: true,
symbol: 'circle',
symbolSize: 6,
itemStyle: {
color: this.chartColors[index % this.chartColors.length]
},
lineStyle: {
width: 2
}
}))
}
this.chart.setOption(option, true)
} else {
console.warn('Chart instance is not ready yet');
}
},
/** 处理日期范围变化 */
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>

223
ruoyi-ui/src/views/kpi/out/index.vue Normal file
View File

@@ -0,0 +1,223 @@
<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"
unlink-panels
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 { getOutAnalysisData } from '@/api/kpi/kpi'
export default {
name: 'InAnalysisByTime',
data() {
return {
// 查询参数
queryParams: {
warehouseId: null,
startTime: '',
endTime: '',
inOut:'2'
},
dateRange: [],
// 仓库选项
warehouseOptions: [],
// 图表实例
chart: null,
// 图表数据
chartData: {
xAxis: [],
series: []
},
// 图表颜色
chartColors: ['#409EFF', '#67C23A'],
queryWarehouseParam:{
pageNum: 1,
pageSize: 99,
typeData:[1]
}
}
},
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() {
// 在调用setOption前检查chart实例是否存在
if (this.chart && typeof this.chart.setOption === 'function') {
const option = {
title: {
text: '出库数量统计' // 出库数量统计（按巷道）
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
legend: {
data: this.chartData.series.map(item => item.name),
top: 25
},
grid: {
top: 80,
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.chartData.xAxis
},
yAxis: {
type: 'value',
name: '出库数量', // 出库数量
minInterval: 1
},
series: this.chartData.series.map((item, index) => ({
name: item.name,
type: 'line',
data: item.data,
smooth: true,
symbol: 'circle',
symbolSize: 6,
itemStyle: {
color: this.chartColors[index % this.chartColors.length]
},
lineStyle: {
width: 2
}
}))
}
this.chart.setOption(option, true)
} else {
console.warn('Chart instance is not ready yet');
}
},
/** 处理日期范围变化 */
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 getOutAnalysisData(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>

397
ruoyi-ui/src/views/kpi/plan/index.vue Normal file
View File

@@ -0,0 +1,397 @@
<template>
<div class="app-container">
<div class="search-box">
<el-form :model="queryParams" ref="queryForm" :inline="true">
<!-- 仓库 -->
<el-form-item label="仓库" prop="warehouseId">
<el-select v-model="queryParams.warehouseId" placeholder="请选择仓库" clearable @change="handleWarehouseChange">
<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="roadwayId">
<el-select v-model="queryParams.roadwayId" placeholder="请选择巷道" clearable @change="handleRoadwayChange">
<el-option v-for="item in roadwayOptions" :key="item.value" :label="item.label" :value="item.value"/>
</el-select>
</el-form-item>
<!-- 排 -->
<el-form-item label="排">
<el-select v-model="queryParams.thePlatoon" placeholder="请选择排" clearable style="width: 200px" @change="handlePlatoonChange">
<el-option v-for="item in platoonOptions" :key="item.value" :label="item.label" :value="item.value"/>
</el-select>
</el-form-item>
</el-form>
</div>
<div class="chart-container">
<div id="container" v-show="queryParams.warehouseId !== '04'" style="height: 60vh"></div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import {listWarehouse} from "@/api/bas/warehouse";
import {listRoadway} from "@/api/bas/roadway";
import {getPlatoons} from "@/api/bas/cargospace";
import {getChartData, getChartMag} from "@/api/kpi/kpi";
export default {
name: 'SpacePlan',
data() {
return {
queryParams: {
warehouseId: '01',
roadwayId: '1',
thePlatoon: '1',
theFloor: '',
specifications: '',
quantity_x: '',
quantity_j: '',
layer_quantity: '',
classgroup_number: '',
class_workshop_date_time: '',
class_now_date_time: '',
print_date: '',
lot_no: '',
},
warehouseOptions: [],
roadwayOptions: [],
floorOptions: [],
platoonOptions: [],
normalChart: null,
specialChart: null,
loadingKeys: {},
chartData: {
x: [],
y: [],
empty: [],
full: [],
inAllot: [],
outAllot: [],
inCheck: [],
outCheck: [],
resultsOf: [],
outCargo: [],
theLocked: []
},
queryWarehouseParam:{
pageNum: 1,
pageSize: 99,
typeData:[1]
}
}
},
mounted() {
this.getWarehouseList()
this.initCharts()
this.handleWarehouseChange()
},
methods: {
getWarehouseList() {
listWarehouse(this.queryWarehouseParam).then(response => {
this.warehouseOptions = response.rows;
});
},
initCharts() {
this.normalChart = echarts.init(document.getElementById('container'))
},
handleWarehouseChange() {
this.queryParams.roadwayId = ''
this.queryParams.thePlatoon = ''
this.roadwayOptions = []
this.platoonOptions = []
this.floorOptions = []
listRoadway({ warehouseId: this.queryParams.warehouseId }).then(response => {
const roadways = response.rows || []
if (roadways && roadways.length > 0) {
this.roadwayOptions = roadways.map(item => ({ value: item.roadwayId, label: item.roadwayName || item.roadwayId }))
this.queryParams.roadwayId = this.roadwayOptions[0].value
this.handleRoadwayChange()
}
}).catch(error => {
console.error('获取巷道列表失败:', error)
this.$modal.msgError('获取巷道列表失败')
})
},
handleRoadwayChange() {
this.queryParams.thePlatoon = ''
this.platoonOptions = []
getPlatoons({ warehouseId: this.queryParams.warehouseId, roadwayId: this.queryParams.roadwayId }).then(response => {
const platoons = response.data || []
if (platoons && platoons.length > 0) {
this.platoonOptions = platoons.map(item => ({ value: item, label: item + '排' }))
this.queryParams.thePlatoon = this.platoonOptions[0].value
this.loadChartData()
} else {
this.platoonOptions = []
this.queryParams.thePlatoon = null
}
}).catch(error => {
console.error('获取排列表失败:', error)
this.$modal.msgError('获取排列表失败')
})
},
handlePlatoonChange() {
console.log( this.queryParams.thePlatoon)
this.loadChartData()
},
loadChartData() {
getChartData(this.queryParams).then(response => {
const data = response.data
const adjustCoordinates = (data) => {
return data.map(item => {
const columnLabel = item[1] + '层';
const floorLabel = item[0] + '列';
const columnIndex = this.chartData.y.indexOf(columnLabel);
const floorIndex = this.chartData.x.indexOf(floorLabel);
return [floorIndex > -1 ? floorIndex : item[1] - 1, columnIndex > -1 ? columnIndex : item[0] - 1, item[2]];
});
};
this.chartData.x = eval('(' + data["column"] + ')');
this.chartData.y = eval('(' + data["floor"] + ')');
this.chartData.empty = adjustCoordinates(eval('(' + data["empty"] + ')'));
this.chartData.full = adjustCoordinates(eval('(' + data["full"] + ')'));
this.chartData.inAllot = adjustCoordinates(eval('(' + data["inAllot"] + ')'));
this.chartData.outAllot = adjustCoordinates(eval('(' + data["outAllot"] + ')'));
this.chartData.inCheck = adjustCoordinates(eval('(' + data["inCheck"] + ')'));
this.chartData.outCheck = adjustCoordinates(eval('(' + data["outCheck"] + ')'));
this.updateNormalChart()
})
},
updateNormalChart() {
const option = {
tooltip: {
trigger: 'item',
formatter: (params) => {
return this.formatTooltip(params)
}
},
title: {
text: '库位分布平面图',
subtext: (() => {
const sel = this.platoonOptions.find(o => String(o.value) === String(this.queryParams.thePlatoon))
return sel && sel.label ? sel.label : ''
})()
},
grid: {
width: '90%',
height: '75%',
top: '15%',
left: '5%'
},
xAxis: {
type: 'category',
data: this.chartData.x,
splitArea: {show: true}
},
yAxis: {
type: 'category',
data: this.chartData.y,
splitArea: {show: true}
},
visualMap: {
show: false,
min: 1,
max: 6,
calculable: true,
orient: 'horizontal',
left: 'center',
inRange: {
color: ['#AEEEEE', '#FF9900', '#FFFF00', '#00CC00', '#FF0000', '#0000FF']
}
},
legend: {
data: [
{
name: '空位',
itemStyle: { color: '#AEEEEE' }
},
{
name: '满位',
itemStyle: { color: '#FF9900' }
},
{
name: '入库分配',
itemStyle: { color: '#FFFF00' }
},
{
name: '出库分配',
itemStyle: { color: '#00cc00' }
},
{
name: '入库需盘点',
itemStyle: { color: '#FF0000' }
},
{
name: '出库需盘点',
itemStyle: { color: '#0000FF' }
}
],
textStyle: {
color: '#333'
}
},
series: [
{
name: '空位',
type: 'heatmap',
data: this.chartData.empty,
itemStyle: {
borderColor: '#fff',
borderWidth: 2
}
},
{
name: '满位',
type: 'heatmap',
data: this.chartData.full,
itemStyle: {
borderColor: '#fff',
borderWidth: 2
}
},
{
name: '入库分配',
type: 'heatmap',
data: this.chartData.inAllot,
itemStyle: {
borderColor: '#fff',
borderWidth: 2
}
},
{
name: '出库分配',
type: 'heatmap',
data: this.chartData.outAllot,
itemStyle: {
borderColor: '#fff',
borderWidth: 2
}
},
{
name: '入库需盘点',
type: 'heatmap',
data: this.chartData.inCheck,
itemStyle: {
borderColor: '#fff',
borderWidth: 2
}
},
{
name: '出库需盘点',
type: 'heatmap',
data: this.chartData.outCheck,
itemStyle: {
borderColor: '#fff',
borderWidth: 2
}
}
]
}
this.normalChart.setOption(option)
},
debounce(func, wait) {
let timeout;
return function (...args) {
const context = this;
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(context, args), wait);
};
},
formatTooltip(params) {
const rowIndex = params.data[1];
const rowLabel = this.chartData.y[rowIndex];
const colIndex = params.data[0];
const colLabel = this.chartData.x[colIndex];
if (params.seriesName !== '满位') {
return params.seriesName + '<br>' + this.queryParams.thePlatoon + '排' + colLabel + rowLabel;
}
const returnData = {
"thePlatoon": this.queryParams.thePlatoon,
"theColumn": colLabel.replace(/[^\d]/g, ''),
"theFloor": rowLabel.replace(/[^\d]/g, ''),
"warehouseId": this.queryParams.warehouseId
};
const key = `${params.seriesName}-${params.data[0]}-${params.data[1]}`;
if (this.loadingKeys && this.loadingKeys[key]) {
return params.seriesName + '<br>' + this.queryParams.thePlatoon + '排' + colLabel + rowLabel;
}
const baseStr = `${params.seriesName}<br>${this.queryParams.thePlatoon}排${colLabel}${rowLabel}`;
if (!this.loadingKeys) this.loadingKeys = {};
this.loadingKeys[key] = true;
this.debounce(() => {
getChartMag(returnData)
.then(response => {
const msg = response.data.msg;
const str = `${baseStr}<br>${msg}`;
this.normalChart.setOption({
tooltip: {
formatter: (p) => {
if (p.seriesName === params.seriesName &&
p.data[0] === params.data[0] &&
p.data[1] === params.data[1]) {
return str;
}
return this.formatTooltip(p);
}
}
});
})
.catch(error => {
console.error('获取货位信息失败:', error);
})
.finally(() => {
delete this.loadingKeys[key];
});
}, 300)();
return baseStr;
},
}
}
</script>
<style scoped>
.app-container {
padding: 20px;
}
.search-box {
background-color: #fff;
padding: 20px 0 0 20px;
margin-bottom: 20px;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.chart-container {
background-color: #fff;
padding: 20px;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>

204
ruoyi-ui/src/views/kpi/roadway/index.vue Normal file
View File

@@ -0,0 +1,204 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
<!-- 仓库 -->
<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="startTime">
<el-date-picker
v-model="queryParams.startTime"
type="datetime"
placeholder="请选择开始时间"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm:ss"
clearable
/>
</el-form-item>
<!-- 结束时间 -->
<el-form-item label="结束时间" prop="endTime">
<el-date-picker
v-model="queryParams.endTime"
type="datetime"
placeholder="请选择结束时间"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm:ss"
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 { listWarehouse } from "@/api/bas/warehouse"
import { getRoadwayAnalysisList } from "@/api/kpi/kpi"
export default {
name: "roadwayAnalysis",
data() {
return {
// 遮罩层
loading: true,
// 显示搜索条件
showSearch: true,
// 仓库选项
warehouseOptions: [],
// 查询参数
queryParams: {
warehouseId: null, // 默认选择仓库1
startTime: null,
endTime: null
},
// 图表实例
chart: null,
// 图表数据
chartData: {
tunnels: [],
inCounts: [],
outCounts: []
},
queryWarehouseParam:{
pageNum: 1,
pageSize: 99,
typeData:[1,2]
}
}
},
created() {
this.getWarehouseList();
this.handleQuery();
},
mounted() {
this.initChart();
},
beforeDestroy() {
if (this.chart) {
this.chart.dispose();
this.chart = null;
}
},
methods: {
/** 查询仓库列表 */
getWarehouseList() {
listWarehouse(this.queryWarehouseParam).then(response => {
this.warehouseOptions = response.rows;
});
// this.warehouseOptions = [{warehouseId: "01", warehouseName: "仓库1"}, {warehouseId: "02", warehouseName: "仓库2"}];
},
/** 搜索按钮操作 */
handleQuery() {
getRoadwayAnalysisList(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'
}
},
legend: {
// 【入库数量】、【出库数量】
data: ['入库数量', '出库数量'],
top: '30px'
},
xAxis: {
type: 'category',
data: this.chartData.tunnels,
axisLabel: {
interval: 0,
rotate: 0
}
},
yAxis: {
type: 'value',
// 数量
name: '数量'
},
series: [
{
// 入库数量
name: '入库数量',
data: this.chartData.inCounts,
type: 'bar',
barWidth: '30%',
itemStyle: {
color: '#1890ff'
},
label: {
show: true,
position: 'top'
}
},
{
// 出库数量
name: '出库数量',
data: this.chartData.outCounts,
type: 'bar',
barWidth: '30%',
itemStyle: {
color: '#52c41a'
},
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>