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

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

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

style(views): 清理注释掉的代码和未使用的组件

klp-ui/src/api/l2/pdo.js

@@ -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'
     },

klp-ui/src/api/l2/plan.js

@@ -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'
     },

klp-ui/src/api/l2/report.js

@@ -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'
     },

klp-ui/src/api/l2/roller.js

@@ -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'
     },

klp-ui/src/api/l2/steelGrade.js

@@ -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'
     },

klp-ui/src/api/l2/stop.js

@@ -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'
     },

klp-ui/src/api/l2/track.js

@@ -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'
     },

klp-ui/src/utils/websocketManager.js

@@ -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
+

klp-ui/src/views/lines/index.vue

@@ -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">

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

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

klp-ui/src/views/wms/warehouse/index.vue

@@ -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"
+    <el-row :gutter="20" v-loading="loading">
-      v-loading="loading"
+      <!-- 1. 新增卡片动态class区分启用/禁用状态 -->
-      :data="warehouseList"
+      <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="item in warehouseList" :key="item.warehouseId" class="mb20">
-      row-key="warehouseId"
+        <el-card 
-      :default-expand-all="isExpandAll"
+          shadow="hover" 
-      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+          class="warehouse-card"
-    >
+          :class="{'enabled-card': item.isEnabled == 1, 'disabled-card': item.isEnabled == 0}"
-      <!-- <el-table-column label="上级节点" prop="parentId" /> -->
+        >
-      <el-table-column label="库位编码" align="center" prop="warehouseCode" />
+          <div class="card-content">
-      <el-table-column label="库位名称" align="center" prop="warehouseName" />
+            <!-- 2. 合并名称和编码为 名称#编码 形式 -->
-      <!-- <el-table-column label="库位类型" align="center" prop="warehouseType">
+            <div class="card-item">
-        <template slot-scope="scope">
+              <span class="label">库位信息：</span>
-          <dict-tag :options="dict.type.warehouse_type" :value="scope.row.warehouseType"/>
+              <span class="value">{{ item.warehouseName }}#{{ item.warehouseCode }}</span>
-        </template>
+            </div>
-      </el-table-column> -->
+            <!-- <div class="card-item">
-      <el-table-column label="排序号" align="center" prop="sortNo" />
+              <span class="label">排序号：</span>
-      <el-table-column label="启用状态" align="center" prop="isEnabled">
+              <span class="value">{{ item.sortNo }}</span>
-        <template slot-scope="scope">
+            </div> -->
-          <span>{{ scope.row.isEnabled == 1 ? '启用' : '禁用' }}</span>
+            <div class="card-item">
-        </template>
+              <span class="label">备注：</span>
-      </el-table-column>
+              <!-- 3. 备注添加多行省略样式类 -->
-      <el-table-column label="备注" align="center" prop="remark" />
+              <span class="value remark-text">{{ item.remark || '无' }}</span>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            </div>
-        <template slot-scope="scope">
+            <div class="card-actions">
-          <el-button
+              <!-- 4. 新增启用/禁用快捷开关 -->
-            size="mini"
+              <el-switch
-            type="text"
+                v-model="item.isEnabled"
-            icon="el-icon-edit"
+                :active-value="1"
-            @click="handleUpdate(scope.row)"
+                :inactive-value="0"
-          >修改</el-button>
+                @change="handleSwitchChange(item)"
-          <el-button
+                :disabled="switchLoading"
-            size="mini"
+              />
-            type="text"
+              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(item)">修改</el-button>
-            icon="el-icon-plus"
+              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(item)">删除</el-button>
-            @click="handleAdd(scope.row)"
+            </div>
-          >新增</el-button>
+          </div>
-          <el-button
+        </el-card>
-            size="mini"
+      </el-col>
-            type="text"
+    </el-row>
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </KLPTable>
 
-    <!-- 添加或修改库位/库区/库位自关联对话框 -->
+    <!-- 添加或修改库位对话框 -->
     <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">
+        <el-form-item label="上级节点" prop="parentId" v-show="false">
-          <WarehouseSelect v-model="form.parentId" placeholder="请选择上级节点" />
+          <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: {},
-  components: {
-    Treeselect,
-    WarehouseSelect
-  },
   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: [
+        isEnabled: [
-          { required: true, message: "类型不能为空", trigger: "change" }
+          { 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");
+        // 直接使用一维数组，按sortNo排序（无需递归）
-        // 递归遍历list，通过sortNo排序
+        const list = response.data.sort((a, b) => a.sortNo - b.sortNo);
-        const sort = (list) => {
-          list.sort((a, b) => a.sortNo - b.sortNo);
-          list.forEach(item => {
-            if (item.children) {
-              sort(item.children);
-            }
-          });
-        };
-        sort(list);
         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();
+      // 固定parentId为0，无需树形选择器
-      if (row != null && row.warehouseId) {
+      this.form.parentId = undefined;
-        this.form.parentId = row.warehouseId;
-      } else {
-        this.form.parentId = 0;
-      }
       this.open = true;
-      this.title = "添加库位/库区/库位自关联";
+      this.title = "添加库位/库区";
-    },
-    /** 展开/折叠操作 */
-    toggleExpandAll() {
-      this.refreshTable = false;
-      this.isExpandAll = !this.isExpandAll;
-      this.$nextTick(() => {
-        this.refreshTable = true;
-      });
     },
+
     /** 修改按钮操作 */
     handleUpdate(row) {
-	  this.loading = true;
+      this.loading = true;
       this.reset();
-      this.getTreeselect();
+      // 固定parentId为0
-      if (row != null) {
+      this.form.parentId = 0;
-        this.form.parentId = row.warehouseId;
-      }
       getWarehouse(row.warehouseId).then(response => {
-	    this.loading = false;
+        this.loading = false;
-        this.form = response.data;
+        // 覆盖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 的情况
+          // 强制设置parentId为0
-          let submitData = { ...this.form };
+          const submitData = { ...this.form, parentId: undefined };
-          if (submitData.parentId === 0) {
-            delete submitData.parentId;
-          }
           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>