✨ feat: 增加仓库的排序，修复展示bug

klp-ui/src/components/FLVPlayer/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <video ref="videoElement" controls autoplay></video>
+    <video ref="videoElement" controls autoplay style="width: 100%; height: 400px;"></video>
   </div>
 </template>
 

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

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="120px">
       <el-form-item label="摄像头编号" prop="cameraCode">
         <el-input
           v-model="queryParams.cameraCode"
@@ -71,11 +71,17 @@
       <el-table-column label="摄像头编号" align="center" prop="cameraCode" />
       <el-table-column label="摄像头名称" align="center" prop="cameraName" />
       <el-table-column label="RTSP 推流地址" align="center" prop="rtspUrl" />
-      <el-table-column label="ws - fmp4 播放地址" align="center" prop="wsFmp4" />
+      <!-- <el-table-column label="ws播放地址" align="center" prop="wsFmp4" /> -->
-      <el-table-column label="状态：0-未启用 1-正常 2-离线 3-故障" align="center" prop="status" />
+      <!-- <el-table-column label="状态" align="center" prop="status" /> -->
       <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-video-play"
+            @click="handlePlay(scope.row)"
+          >播放</el-button>
           <el-button
             size="mini"
             type="text"
@@ -101,8 +107,8 @@
     />
 
     <!-- 添加或修改摄像头管理对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-form ref="form" :model="form" :rules="rules" label-width="200px">
         <el-form-item label="摄像头编号" prop="cameraCode">
           <el-input v-model="form.cameraCode" placeholder="请输入摄像头编号" />
         </el-form-item>
@@ -112,7 +118,7 @@
         <el-form-item label="RTSP 推流地址" prop="rtspUrl">
           <el-input v-model="form.rtspUrl" placeholder="请输入RTSP 推流地址" />
         </el-form-item>
-        <el-form-item label="ws - fmp4 播放地址" prop="wsFmp4">
+        <!-- <el-form-item label="ws - fmp4 播放地址" prop="wsFmp4">
           <el-input v-model="form.wsFmp4" placeholder="请输入ws - fmp4 播放地址" />
         </el-form-item>
         <el-form-item label="http - fmp4 播放地址" prop="httpFmp4">
@@ -123,7 +129,7 @@
         </el-form-item>
         <el-form-item label="hls 播放地址" prop="hlsAddr">
           <el-input v-model="form.hlsAddr" placeholder="请输入hls 播放地址" />
-        </el-form-item>
+        </el-form-item> -->
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
         </el-form-item>
@@ -133,21 +139,31 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+
+    <el-dialog :title="title" :visible.sync="openVideo" width="800px" append-to-body>
+      <flv-player :url="videoUrl" />
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { listCameraManagement, getCameraManagement, delCameraManagement, addCameraManagement, updateCameraManagement } from "@/api/wms/cameraManagement";
+import flvPlayer from '@/components/FLVPlayer/index.vue';
 
 export default {
   name: "CameraManagement",
+  components: {
+    flvPlayer
+  },
   data() {
     return {
+      videoUrl: '',
+      openVideo: false,
       // 按钮loading
       buttonLoading: false,
       // 遮罩层
       loading: true,
-      // 选中数组
+      // 选中数组 
       ids: [],
       // 非单个禁用
       single: true,
@@ -301,6 +317,11 @@ export default {
       this.download('wms/cameraManagement/export', {
         ...this.queryParams
       }, `cameraManagement_${new Date().getTime()}.xlsx`)
+    },
+    handlePlay(row) {
+      this.videoUrl = row.rtspUrl;
+      this.title = row.cameraName;
+      this.openVideo = true;
     }
   }
 };

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

@@ -191,7 +191,7 @@ export default {
         warehouseCode: undefined,
         warehouseName: undefined,
         warehouseType: undefined,
-        sortNo: 0,
+        sortNo: undefined,
         isEnabled: undefined,
       },
       // 表单参数
@@ -218,7 +218,18 @@ export default {
     getList() {
       this.loading = true;
       listWarehouse(this.queryParams).then(response => {
-        this.warehouseList = this.handleTree(response.data, "warehouseId", "parentId");
+        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);
+        this.warehouseList = list;
         this.loading = false;
       });
     },