设备变化记录拆分组件

Web/package.json

@@ -6,7 +6,7 @@
   "license": "ISC",
   "scripts": {
     "start": "vite --mode development",
-    "start:build": "vite --mode production",
+    "start:prod": "vite --mode production",
     "build": "vite build --mode production"
   },
   "dependencies": {

Web/src/components/common/nav.vue

@@ -19,12 +19,6 @@
           媒体管理
         </span>
       </a-menu-item>
-<!--      <a-menu-item :key="'/' + ERouterName.REPLAY">-->
-<!--        <VideoCameraOutlined />-->
-<!--        <span>-->
-<!--          视频回放-->
-<!--        </span>-->
-<!--      </a-menu-item>-->
       <a-menu-item :key="'/' + ERouterName.TRAJECTORY">
         <GatewayOutlined />
         <span>

Web/src/components/devices/changeRecord/components/CustomCell.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="customCell">
+        <div class="customCell-item">
+            {{ record[fieldName] }}
+        </div>
+        <div class="customCell-item" v-if="record.children && record.children[fieldName]">
+            <div class="mt-5 ml0"
+                style="border-left: 2px solid rgb(200,200,200); border-bottom: 2px solid rgb(200,200,200); height: 16px;width: 16px; float: left;">
+            </div>
+            <div style="margin-left: 5px;">
+                {{ record.children[fieldName] }}
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+interface Props {
+    record: any,
+    fieldName: string,
+};
+
+const props = withDefaults(defineProps<Props>(), {
+
+});
+</script>
+
+<style lang="scss" scoped>
+.customCell {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    &-item {
+        height: 30px;
+        display: flex;
+        align-items: center;
+    }
+}
+</style>

Web/src/components/devices/changeRecord/components/Search.vue

@@ -23,7 +23,7 @@
           </a-select>
         </a-form-item>
         <a-form-item name="keyword">
-          <a-input style="width: 200px;margin-right: 10px;" placeholder="设备SN、设备名称" v-model:value="formModel.keyword" />
+          <a-input style="width: 200px;margin-right: 10px;" placeholder="项目名称、设备SN" v-model:value="formModel.keyword" />
         </a-form-item>
         <a-form-item>
           <a-button style="margin-right: 10px;" @click="handleClicSekarch">

Web/src/components/devices/changeRecord/index.vue

@@ -3,37 +3,19 @@
     <Search :onClickSearch="async () => { }" :onClickReset="async () => { }" />
     <div class="changeRecord-table">
       <a-table :scroll="{ x: '100%', y: 500 }" :childrenColumnName="null" rowKey="device_sn"
-        :loading="state.listLoading" :columns="columns" @change="() => { }" :rowClassName="rowClassName"
+        :loading="state.listLoading" :columns="columns" @change="refreshData" :rowClassName="rowClassName"
         :dataSource="state.list" :pagination="paginationConfig">
         <!-- 设备型号 -->
         <template #device_name="{ record }">
-          <div class="record">
-            {{ record.device_name }}
-          </div>
-          <div class="record" v-if="record.children">
-            <div class="mt-5 ml0"
-              style="border-left: 2px solid rgb(200,200,200); border-bottom: 2px solid rgb(200,200,200); height: 16px;width: 16px; float: left;">
-            </div>
-            {{ record.children.device_name }}
-          </div>
+          <CustomCell :record="record" fieldName="device_name" />
         </template>
         <!-- 设备SN -->
         <template #device_sn="{ record }">
-          <div class="record">
-            {{ record.device_sn }}
-          </div>
-          <div class="record" v-if="record.children">
-            {{ record.children.device_sn }}
-          </div>
+          <CustomCell :record="record" fieldName="device_sn" />
         </template>
         <!-- 设备名称 -->
         <template #nick_name="{ record }">
-          <div class="record">
-            {{ record.nick_name }}
-          </div>
-          <div class="record" v-if="record.children">
-            {{ record.children.nick_name }}
-          </div>
+          <CustomCell :record="record" fieldName="nick_name" />
         </template>
       </a-table>
     </div>
@@ -43,20 +25,17 @@
 <script lang="ts" setup>
 import { reactive, onMounted } from 'vue';
 import Search from './components/Search.vue';
+import CustomCell from './components/CustomCell.vue';
 import { apis } from '/@/api/custom/index';
 
 interface State {
   listLoading: boolean,
   list: any[],
-  currentId: string,
-  drawerVisible: boolean,
 };
 
 const state: State = reactive({
   listLoading: false,
   list: [],
-  currentId: '',
-  drawerVisible: false,
 });
 
 const paginationConfig = reactive({
@@ -68,7 +47,7 @@ const paginationConfig = reactive({
   total: 0
 })
 
-onMounted(async () => {
+const fetchList = async () => {
   state.listLoading = true;
   try {
     const res = await apis.fetchChangeRecordList({ page: paginationConfig.current, page_size: paginationConfig.pageSize });
@@ -83,11 +62,15 @@ onMounted(async () => {
   } finally {
     state.listLoading = false;
   }
+}
+
+onMounted(async () => {
+  await fetchList();
 })
 
 const columns = [
   {
-    title: '时间',
+    title: '加入项目时间',
     dataIndex: 'create_time',
     width: 200,
     sorter: (a: any, b: any) => a.create_time.localeCompare(b.create_time),
@@ -111,7 +94,6 @@ const columns = [
     title: '变化描述',
     dataIndex: 'log_info',
     width: 150,
-    sorter: (a: any, b: any) => a.log_info.localeCompare(b.log_info),
   },
   {
     title: '设备型号',
@@ -130,7 +112,8 @@ const columns = [
     title: '设备名称',
     dataIndex: 'nick_name',
     width: 150,
-    slots: { customRender: 'nick_name' }
+    slots: { customRender: 'nick_name' },
+    sorter: (a: any, b: any) => a.nick_name.localeCompare(b.nick_name),
   }
 ]
 
@@ -141,6 +124,12 @@ const rowClassName = (record: any, index: number) => {
   }
   return className.toString().replaceAll(',', ' ')
 }
+
+const refreshData = async (page: any) => {
+  paginationConfig.current = page?.current!
+  paginationConfig.pageSize = page?.pageSize!
+  await fetchList();
+}
 </script>
 
 <style lang="scss">
@@ -148,10 +137,6 @@ const rowClassName = (record: any, index: number) => {
   padding: 20px;
 }
 
-.record {
-  height: 30px;
-}
-
 .ant-table {
   border-top: 1px solid rgb(0, 0, 0, 0.06);
   border-bottom: 1px solid rgb(0, 0, 0, 0.06);

Web/src/pages/page-web/projects/replay/index.vue

@@ -1,11 +0,0 @@
-<template>
-  <div>
-    视频回放
-  </div>
-</template>
-
-<script lang="ts" setup>
-
-</script>
-
-<style lang="scss" scoped></style>

Web/src/router/index.ts

@@ -3,8 +3,6 @@ import { ERouterName } from '/@/types/index'
 import CreatePlan from '/@/components/task/CreatePlan.vue'
 import WaylinePanel from '/@/pages/page-web/projects/wayline.vue'
 import DockPanel from '/@/pages/page-web/projects/dock.vue'
-import LiveAgora from '/@/components/livestream-agora.vue'
-import LiveOthers from '/@/components/livestream-others.vue'
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -42,11 +40,6 @@ const routes: Array<RouteRecordRaw> = [
         name: ERouterName.MEDIA,
         component: () => import('/@/pages/page-web/projects/media/index.vue')
       },
-      {
-        path: '/' + ERouterName.REPLAY,
-        name: ERouterName.REPLAY,
-        component: () => import('/@/pages/page-web/projects/replay/index.vue')
-      },
       {
         path: '/' + ERouterName.TRAJECTORY,
         name: ERouterName.TRAJECTORY,

Web/src/types/enums.ts

@@ -3,7 +3,6 @@ export enum ERouterName {
     DEVICES = 'devices',
     TASK = 'task',
     MEDIA = 'media',
-    REPLAY = 'replay',
     TRAJECTORY = 'trajectory',
     MEMBERS = 'members',