DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(api): 为L2 API添加HTTP协议前缀

Browse Source 
refactor(warehouse): 重构仓库管理页面为卡片布局并优化交互
- 移除树形表格改用卡片布局
- 添加启用/禁用快捷开关
- 优化备注显示样式
- 简化表单逻辑

feat(utils): 新增WebSocket管理器类
- 支持多连接管理
- 自动重连机制
- 状态监控功能

style(views): 清理注释掉的代码和未使用的组件
This commit is contained in:
砂糖
2025-12-22 10:18:58 +08:00
parent 517157bcb0
commit 0ced7e5a9f
12 changed files with 2429 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
klp-ui/src/api/l2/pdo.js
View File

@@ -2,7 +2,7 @@ import axios from 'axios'
export default function createFetch(url) {
const l2Request = axios.create({
baseURL: url,
baseURL: 'http://' + url,
headers: {
'Content-Type': 'application/json'
},

2
klp-ui/src/api/l2/plan.js
View File

@@ -44,7 +44,7 @@ function formatDateFields(data) {
export default function createFetch(url) {
const l2Request = axios.create({
baseURL: url,
baseURL: 'http://' + url,
headers: {
'Content-Type': 'application/json'
},

2
klp-ui/src/api/l2/report.js
View File

@@ -2,7 +2,7 @@ import axios from 'axios'
export default function createFetch(url) {
const l2Request = axios.create({
baseURL: url,
baseURL: 'http://' + url,
headers: {
'Content-Type': 'application/json'
},

2
klp-ui/src/api/l2/roller.js
View File

@@ -2,7 +2,7 @@ import axios from 'axios'
export default function createFetch(url) {
const l2Request = axios.create({
baseURL: url,
baseURL: 'http://' + url,
headers: {
'Content-Type': 'application/json'
},

2
klp-ui/src/api/l2/steelGrade.js
View File

@@ -2,7 +2,7 @@ import axios from 'axios'
export default function createFetch(url) {
const l2Request = axios.create({
baseURL: url,
baseURL: 'http://' + url,
headers: {
'Content-Type': 'application/json'
},

2
klp-ui/src/api/l2/stop.js
View File

@@ -2,7 +2,7 @@ import axios from 'axios'
export default function createFetch(url) {
const l2Request = axios.create({
baseURL: url,
baseURL: 'http://' + url,
headers: {
'Content-Type': 'application/json'
},

2
klp-ui/src/api/l2/track.js
View File

@@ -2,7 +2,7 @@ import axios from 'axios'
export default function createFetch(url) {
const l2Request = axios.create({
baseURL: url,
baseURL: 'http://' + url,
headers: {
'Content-Type': 'application/json'
},

137
klp-ui/src/utils/websocketManager.js Normal file
View File

@@ -0,0 +1,137 @@
/**
* WebSocket 管理器
* 用于管理多个 WebSocket 连接
*/
class WebSocketManager {
constructor(url) {
this.connections = new Map()
this.baseUrl = url
}
/**
* 创建 WebSocket 连接
* @param {String} type - WebSocket 类型 (track_measure, track_position, track_signal, track_matmap, calc_setup_result)
* @param {Function} onMessage - 接收消息的回调函数
* @param {Function} onOpen - 连接打开的回调函数
* @param {Function} onError - 错误回调函数
* @param {Function} onClose - 关闭回调函数
*/
connect(type, { onMessage, onOpen, onError, onClose } = {}) {
// 如果已存在连接，先断开
if (this.connections.has(type)) {
this.disconnect(type)
}
const url = `${this.baseUrl}?type=${type}`
console.log(`[WebSocket] 正在连接: ${type}`)
try {
const socket = new WebSocket(url)
socket.onopen = (event) => {
console.log(`[WebSocket] 连接成功: ${type}`)
if (onOpen) onOpen(event)
}
socket.onmessage = (event) => {
try {
const data = JSON.parse(event.data)
if (onMessage) onMessage(data)
} catch (error) {
console.error(`[WebSocket] 数据解析失败 (${type}):`, error)
// 如果不是 JSON，直接传递原始数据
if (onMessage) onMessage(event.data)
}
}
socket.onerror = (error) => {
console.error(`[WebSocket] 连接错误 (${type}):`, error)
if (onError) onError(error)
}
socket.onclose = (event) => {
console.log(`[WebSocket] 连接关闭 (${type}):`, event.code, event.reason)
this.connections.delete(type)
if (onClose) {
onClose(event)
} else if (event.code !== 1000) {
// 非正常关闭，3秒后自动重连
console.log(`[WebSocket] 3秒后尝试重连: ${type}`)
setTimeout(() => {
this.connect(type, { onMessage, onOpen, onError, onClose })
}, 3000)
}
}
this.connections.set(type, socket)
return socket
} catch (error) {
console.error(`[WebSocket] 创建连接失败 (${type}):`, error)
// 失败后3秒重试
setTimeout(() => {
this.connect(type, { onMessage, onOpen, onError, onClose })
}, 3000)
}
}
/**
* 断开指定类型的连接
*/
disconnect(type) {
const socket = this.connections.get(type)
if (socket) {
console.log(`[WebSocket] 主动断开: ${type}`)
socket.close(1000, '主动关闭')
this.connections.delete(type)
}
}
/**
* 断开所有连接
*/
disconnectAll() {
console.log('[WebSocket] 断开所有连接')
this.connections.forEach((socket, type) => {
this.disconnect(type)
})
}
/**
* 获取指定类型的连接状态
*/
isConnected(type) {
const socket = this.connections.get(type)
return socket && socket.readyState === WebSocket.OPEN
}
/**
* 获取所有连接状态
*/
getAllStatus() {
const status = {}
this.connections.forEach((socket, type) => {
status[type] = socket.readyState === WebSocket.OPEN
})
return status
}
/**
* 发送消息（如果需要）
*/
send(type, message) {
const socket = this.connections.get(type)
if (socket && socket.readyState === WebSocket.OPEN) {
const data = typeof message === 'string' ? message : JSON.stringify(message)
socket.send(data)
return true
}
console.warn(`[WebSocket] 无法发送消息，连接未打开: ${type}`)
return false
}
}
// 导出单例
export default WebSocketManager

5
klp-ui/src/views/lines/index.vue
View File

@@ -1,14 +1,13 @@
<template>
<div>
<el-tabs v-model="activeName" type="card">
<!-- <el-tabs v-model="activeName" type="card">
<el-tab-pane label="计划执行" name="Plan" v-if="tabs.includes('Plan')"></el-tab-pane>
<el-tab-pane label="过程跟踪" name="Track" v-if="tabs.includes('Track')"></el-tab-pane>
<el-tab-pane label="产出实绩" name="Quality" v-if="tabs.includes('Quality')"></el-tab-pane>
<el-tab-pane label="停机明细" name="Stop" v-if="tabs.includes('Stop')"></el-tab-pane>
<el-tab-pane label="实绩报表" name="PdoAnalysis" v-if="tabs.includes('PdoAnalysis')"></el-tab-pane>
<el-tab-pane label="停机报表" name="StopAnalysis" v-if="tabs.includes('StopAnalysis')"></el-tab-pane>
<!-- <el-tab-pane label="换辊报表" name="RollerAnalysis"></el-tab-pane> -->
</el-tabs>
</el-tabs> -->
<keep-alive>
<div v-if="ready" class="app-container">

2311
klp-ui/src/views/lines/panels/track/index.vue
View File

File diff suppressed because it is too large Load Diff

13
klp-ui/src/views/wms/warehouse/components/WarehouseInterlaced.vue
View File

@@ -162,9 +162,18 @@ export default {
},
rulerMaxRow() {
// 取所有列中level为3的第一层的最大行数
const maxRows = Object.values(this.columns)
.filter(col => col.layer1?.[0]?.parsedInfo?.level === 3)
// 如果不存在level为3的列，则不执行filter操作，直接去最大值
// 如果存在level为3的列，则取layer1且level为3的最大行数
const columns = Object.values(this.columns)
const columnsOnlyLevel3 = columns.filter(col => col.layer1?.[0]?.parsedInfo?.level === 3);
let maxRows = []
if (columnsOnlyLevel3.length > 0) {
maxRows = columnsOnlyLevel3
.map(col => col.layer1?.length || 0);
} else {
maxRows = columns
.map(col => col.layer1?.length || 0);
}
return maxRows.length > 0 ? Math.max(...maxRows) : 0;
}
},

326
klp-ui/src/views/wms/warehouse/index.vue
View File

@@ -17,16 +17,6 @@
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<!-- <el-form-item label="库位类型" prop="warehouseType">
<el-select v-model="queryParams.warehouseType" placeholder="请选择库位类型" clearable>
<el-option
v-for="dict in dict.type.warehouse_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item> -->
<el-form-item label="启用状态" prop="isEnabled">
<el-select v-model="queryParams.isEnabled" placeholder="请选择启用状态" clearable>
<el-option label="启用" :value="1" />
@@ -34,7 +24,7 @@
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<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>
@@ -49,70 +39,55 @@
@click="handleAdd"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="info"
plain
icon="el-icon-sort"
size="mini"
@click="toggleExpandAll"
>展开/折叠</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<KLPTable
v-if="refreshTable"
v-loading="loading"
:data="warehouseList"
row-key="warehouseId"
:default-expand-all="isExpandAll"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<!-- <el-table-column label="上级节点" prop="parentId" /> -->
<el-table-column label="库位编码" align="center" prop="warehouseCode" />
<el-table-column label="库位名称" align="center" prop="warehouseName" />
<!-- <el-table-column label="库位类型" align="center" prop="warehouseType">
<template slot-scope="scope">
<dict-tag :options="dict.type.warehouse_type" :value="scope.row.warehouseType"/>
</template>
</el-table-column> -->
<el-table-column label="排序号" align="center" prop="sortNo" />
<el-table-column label="启用状态" align="center" prop="isEnabled">
<template slot-scope="scope">
<span>{{ scope.row.isEnabled == 1 ? '启用' : '禁用' }}</span>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-plus"
@click="handleAdd(scope.row)"
>新增</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button>
</template>
</el-table-column>
</KLPTable>
<!-- 替换树形表格为卡片布局 -->
<el-row :gutter="20" v-loading="loading">
<!-- 1. 新增卡片动态class区分启用/禁用状态 -->
<el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="item in warehouseList" :key="item.warehouseId" class="mb20">
<el-card
shadow="hover"
class="warehouse-card"
:class="{'enabled-card': item.isEnabled == 1, 'disabled-card': item.isEnabled == 0}"
>
<div class="card-content">
<!-- 2. 合并名称和编码为 名称#编码 形式 -->
<div class="card-item">
<span class="label">库位信息：</span>
<span class="value">{{ item.warehouseName }}#{{ item.warehouseCode }}</span>
</div>
<!-- <div class="card-item">
<span class="label">排序号：</span>
<span class="value">{{ item.sortNo }}</span>
</div> -->
<div class="card-item">
<span class="label">备注：</span>
<!-- 3. 备注添加多行省略样式类 -->
<span class="value remark-text">{{ item.remark || '无' }}</span>
</div>
<div class="card-actions">
<!-- 4. 新增启用/禁用快捷开关 -->
<el-switch
v-model="item.isEnabled"
:active-value="1"
:inactive-value="0"
@change="handleSwitchChange(item)"
:disabled="switchLoading"
/>
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(item)">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(item)">删除</el-button>
</div>
</div>
</el-card>
</el-col>
</el-row>
<!-- 添加或修改库位/库区/库位自关联对话框 -->
<!-- 添加或修改库位对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="上级节点" prop="parentId">
<WarehouseSelect v-model="form.parentId" placeholder="请选择上级节点" />
<el-form-item label="上级节点" prop="parentId" v-show="false">
<el-input v-model="form.parentId" disabled />
</el-form-item>
<el-form-item label="库位编码" prop="warehouseCode">
<el-input v-model="form.warehouseCode" placeholder="请输入库位编码" />
@@ -120,16 +95,6 @@
<el-form-item label="库位名称" prop="warehouseName">
<el-input v-model="form.warehouseName" placeholder="请输入库位名称" />
</el-form-item>
<!-- <el-form-item label="库位类型" prop="warehouseType">
<el-select v-model="form.warehouseType" placeholder="请选择库位类型">
<el-option
v-for="dict in dict.type.warehouse_type"
:key="dict.value"
:label="dict.label"
:value="parseInt(dict.value)"
></el-option>
</el-select>
</el-form-item> -->
<el-form-item label="排序号" prop="sortNo">
<el-input v-model="form.sortNo" placeholder="请输入排序号" />
</el-form-item>
@@ -153,40 +118,31 @@
<script>
import { listWarehouse, getWarehouse, delWarehouse, addWarehouse, updateWarehouse } from "@/api/wms/warehouse";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import WarehouseSelect from '@/components/WarehouseSelect';
export default {
name: "Warehouse",
// dicts: ['warehouse_type'],
components: {
Treeselect,
WarehouseSelect
},
components: {},
data() {
return {
// 按钮loading
buttonLoading: false,
// 开关loading（新增）
switchLoading: false,
// 遮罩层
loading: true,
// 显示搜索条件
showSearch: true,
// 库位/库区/库位自关联表格数据
// 库位表格数据（一维数组，非树形）
warehouseList: [],
// 库位/库区/库位自关联树选项
warehouseOptions: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 是否展开，默认全部展开
isExpandAll: true,
// 重新渲染表格状态
// 重新渲染表格状态（树结构相关，保留但无实际作用）
refreshTable: true,
// 查询参数
queryParams: {
parentId: undefined,
parentId: undefined, // 固定查询parentId=0的数据
warehouseCode: undefined,
warehouseName: undefined,
warehouseType: undefined,
@@ -195,7 +151,7 @@ export default {
},
// 表单参数
form: {},
// 表单校验
// 表单校验（移除warehouseType必填规则）
rules: {
warehouseCode: [
{ required: true, message: "库位/库区编码不能为空", trigger: "blur" }
@@ -203,9 +159,9 @@ export default {
warehouseName: [
{ required: true, message: "库位/库区名称不能为空", trigger: "blur" }
],
warehouseType: [
{ required: true, message: "类型不能为空", trigger: "change" }
],
isEnabled: [
{ required: true, message: "启用状态不能为空", trigger: "change" }
]
}
};
},
@@ -213,60 +169,33 @@ export default {
this.getList();
},
methods: {
/** 查询库位/库区/库位自关联列表 */
/** 查询库位列表（移除树形处理） */
getList() {
this.loading = true;
listWarehouse(this.queryParams).then(response => {
const list = this.handleTree(response.data, "warehouseId", "parentId");
// 递归遍历list，通过sortNo排序
const sort = (list) => {
list.sort((a, b) => a.sortNo - b.sortNo);
list.forEach(item => {
if (item.children) {
sort(item.children);
}
});
};
sort(list);
// 直接使用一维数组，按sortNo排序（无需递归）
const list = response.data.sort((a, b) => a.sortNo - b.sortNo);
this.warehouseList = list;
this.loading = false;
});
},
/** 转换库位/库区/库位自关联数据结构 */
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.warehouseId,
label: node.warehouseName,
children: node.children
};
},
/** 查询库位/库区/库位自关联下拉树结构 */
getTreeselect() {
listWarehouse().then(response => {
this.warehouseOptions = [];
const data = { warehouseId: 0, warehouseName: '顶级节点', children: [] };
data.children = this.handleTree(response.data, "warehouseId", "parentId");
this.warehouseOptions.push(data);
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
warehouseId: null,
parentId: null,
parentId: undefined, // 固定parentId为0
warehouseCode: null,
warehouseName: null,
warehouseType: 1,
sortNo: null,
isEnabled: null,
isEnabled: 1, // 默认启用
delFlag: null,
remark: null,
createTime: null,
@@ -276,60 +205,51 @@ export default {
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
// 重置后仍保留parentId=0
this.queryParams.parentId = undefined;
this.handleQuery();
},
/** 新增按钮操作 */
handleAdd(row) {
handleAdd() {
this.reset();
this.getTreeselect();
if (row != null && row.warehouseId) {
this.form.parentId = row.warehouseId;
} else {
this.form.parentId = 0;
}
// 固定parentId为0，无需树形选择器
this.form.parentId = undefined;
this.open = true;
this.title = "添加库位/库区/库位自关联";
},
/** 展开/折叠操作 */
toggleExpandAll() {
this.refreshTable = false;
this.isExpandAll = !this.isExpandAll;
this.$nextTick(() => {
this.refreshTable = true;
});
this.title = "添加库位/库区";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.loading = true;
this.loading = true;
this.reset();
this.getTreeselect();
if (row != null) {
this.form.parentId = row.warehouseId;
}
// 固定parentId为0
this.form.parentId = 0;
getWarehouse(row.warehouseId).then(response => {
this.loading = false;
this.form = response.data;
this.loading = false;
// 覆盖parentId为0
this.form = { ...response.data, parentId: undefined };
this.open = true;
this.title = "修改库位/库区/库位自关联";
this.title = "修改库位/库区";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
this.buttonLoading = true;
// 处理 parentId 为 0 的情况
let submitData = { ...this.form };
if (submitData.parentId === 0) {
delete submitData.parentId;
}
// 强制设置parentId为0
const submitData = { ...this.form, parentId: undefined };
if (this.form.warehouseId != null) {
updateWarehouse(submitData).then(response => {
this.$modal.msgSuccess("修改成功");
@@ -350,9 +270,10 @@ export default {
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
this.$modal.confirm('是否确认删除库位/库区/库位自关联编号为"' + row.warehouseId + '"的数据项？').then(() => {
this.$modal.confirm('是否确认删除库位/库区编号为"' + row.warehouseId + '"的数据项？').then(() => {
this.loading = true;
return delWarehouse(row.warehouseId);
}).then(() => {
@@ -363,7 +284,88 @@ export default {
}).finally(() => {
this.loading = false;
});
},
/** 新增：开关切换启用/禁用状态 */
handleSwitchChange(item) {
this.switchLoading = true;
// 构造更新参数（仅更新状态）
const updateData = {
...item,
isEnabled: item.isEnabled
};
updateWarehouse(updateData).then(() => {
this.$modal.msgSuccess(`已${item.isEnabled === 1 ? '启用' : '禁用'}该库位`);
this.getList(); // 刷新列表确保数据一致
}).catch(() => {
// 切换失败时恢复原状态
item.isEnabled = item.isEnabled === 1 ? 0 : 1;
this.$modal.msgError("状态切换失败");
}).finally(() => {
this.switchLoading = false;
});
}
}
};
</script>
<style scoped>
/* 卡片样式优化 */
.warehouse-card {
height: 100%;
transition: border-color 0.3s;
}
/* 1. 启用卡片绿色边框 */
.enabled-card {
border-color: #67c23a !important;
}
/* 禁用卡片红色边框 */
.disabled-card {
border-color: #f56c6c !important;
}
.card-content {
padding: 10px 0;
}
.card-item {
margin-bottom: 8px;
display: flex;
align-items: flex-start; /* 适配多行文本对齐 */
}
.label {
color: #606266;
width: 80px;
flex-shrink: 0;
}
.value {
color: #303133;
flex: 1;
}
/* 2. 备注文本多行省略样式 */
.remark-text {
display: -webkit-box;
-webkit-line-clamp: 2; /* 最多显示2行 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.5; /* 行高适配 */
max-height: 3em; /* 2行 * 1.5行高 = 3em */
}
.card-actions {
margin-top: 15px;
display: flex;
gap: 10px;
align-items: center; /* 开关和按钮垂直居中 */
}
.mb20 {
margin-bottom: 20px;
}
</style>