feat:回放

src/api/area/areaPlaybackDevice.ts

@@ -0,0 +1,41 @@
+import request from "/@/utils/request"
+
+export function fetchList(query?: Object) {
+  return request({
+    url: '/admin/areaPlaybackDevice/page',
+    method: 'get',
+    params: query
+  })
+}
+
+export function addObj(obj?: Object) {
+  return request({
+    url: '/admin/areaPlaybackDevice',
+    method: 'post',
+    data: obj
+  })
+}
+
+export function getObj(id?: string) {
+  return request({
+    url: '/admin/areaPlaybackDevice/' + id,
+    method: 'get'
+  })
+}
+
+export function delObjs(ids?: Object) {
+  return request({
+    url: '/admin/areaPlaybackDevice',
+    method: 'delete',
+    data: ids
+  })
+}
+
+export function putObj(obj?: Object) {
+  return request({
+    url: '/admin/areaPlaybackDevice',
+    method: 'put',
+    data: obj
+  })
+}
+

src/components/Tag/TagOnline.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="flex flex-wrap items-center gap-2 max-w-full">
+    <div class="flex flex-wrap justify-center items-center gap-2 max-w-full">
         <div class="w-2 h-2 rounded-full" :class="{ 'bg-success': props.isOnline, 'bg-error': !props.isOnline }" />
         <el-tag size="small" :type="props.isOnline ? 'success' : 'danger'">{{ props.isOnline ? '在线' : '离线' }}</el-tag>
     </div>

src/views/area/_components/areaHouseTable.vue

@@ -122,10 +122,6 @@ const form = reactive({
     sortOrder: '',
 });
 
-// 定义校验规则
-const dataRules = ref({
-})
-
 // 打开弹窗
 const openDialog = (id: string) => {
     visible.value = true
@@ -163,17 +159,6 @@ const resetQuery = () => {
     getDataList()
 }
 
-// 初始化表单数据
-const getareaHouseData = (id: string) => {
-    // 获取数据
-    loading.value = true
-    AreaHouseApi.getObj(id).then((res: any) => {
-        Object.assign(form, res.data)
-    }).finally(() => {
-        loading.value = false
-    })
-};
-
 // 多选事件
 const selectionChangHandle = (objs: { id: string }[]) => {
     selectObjs.value = objs.map(({ id }) => id);

src/views/area/_components/areaPlaybackDeviceForm.vue

@@ -0,0 +1,137 @@
+<template>
+    <el-dialog :title="form.id ? '编辑' : '新增'" width="40%" v-model="visible" :close-on-click-modal="false" draggable
+        @closed="dialogClosed">
+        <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px"
+            v-loading="loading">
+            <el-row :gutter="24">
+                <el-col :span="24" class="mb20">
+                    <el-form-item label="空间" prop="areaName">
+                        <el-input v-model="form.areaName" disabled placeholder="" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="24" class="mb20">
+                    <el-form-item label="关联类型" prop="bizType">
+                        <dict-select v-model="form.bizType" :options="playback_biz_type" placeholder="请选择关联类型" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="24" class="mb20">
+                    <el-form-item label="设备" prop="channelCode">
+                        <select-tree-channel-radio v-model="form.channelCode" placeholder="请选择设备" />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="visible = false">取消</el-button>
+                <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup lang="ts" name="areaPlaybackDeviceForm">
+import { useDict } from '/@/hooks/dict';
+import { useMessage } from "/@/hooks/message";
+import { rule } from '/@/utils/validate';
+
+import * as AreaHouseApi from "/@/api/area/areaHouse"
+import * as AreaManageApi from '/@/api/area/areaManage'
+import * as AreaPlaybackDeviceApi from "/@/api/area/areaPlaybackDevice"
+
+const emit = defineEmits(['refresh']);
+
+// 定义变量内容
+const dataFormRef = ref();
+const visible = ref(false)
+const loading = ref(false)
+
+// 定义字典
+const { playback_biz_type } = useDict('playback_biz_type')
+
+// 提交表单数据
+const initForm = {
+    id: '',
+    areaId: '',
+    bizType: '',
+    areaName: '',
+    channelCode: '',
+}
+const form = reactive<any>({ ...initForm });
+
+// 定义校验规则
+const dataRules = ref({
+    areaName: [{ required: true, message: '空间名不能为空', trigger: 'change' }],
+    bizType: [{ required: true, message: '关联类型不能为空', trigger: 'change' }],
+    channelCode: [{ required: true, message: '设备不能为空', trigger: 'change' }],
+})
+
+// 打开弹窗
+const openDialog = (playbackDeviceId: string, areaId: string,) => {
+    console.log("playbackDeviceId:", playbackDeviceId, "areaId:", areaId);
+    visible.value = true
+    // 重置表单数据
+    nextTick(() => {
+        dataFormRef.value?.resetFields();
+    });
+    if (playbackDeviceId) {
+        form.id = playbackDeviceId
+        getDetail()
+    }
+    if (areaId) {
+        form.areaId = areaId
+        getAreaDetail()
+    }
+};
+
+const dialogClosed = () => {
+    Object.assign(form, initForm)
+}
+
+// 提交
+const onSubmit = async () => {
+    const valid = await dataFormRef.value.validate().catch(() => { });
+    if (!valid) return false;
+    try {
+        loading.value = true;
+        const _data = { ...form }
+        form.id ? await AreaPlaybackDeviceApi.putObj(_data) : await AreaPlaybackDeviceApi.addObj(_data);
+        useMessage().success(form.id ? '修改成功' : '添加成功');
+        visible.value = false;
+        emit('refresh');
+    } catch (err: any) {
+        useMessage().error(err.msg);
+    } finally {
+        loading.value = false;
+    }
+};
+
+// 获取回放设备详情
+const getDetail = async () => {
+    try {
+        const { data } = await AreaPlaybackDeviceApi.getObj(form.id)
+        console.log("获取回放设备详情 data:", data);
+        if (!data) return
+        Object.assign(form, data)
+    } catch (error: any) {
+        console.error(error);
+    }
+}
+
+// 获取区域详情
+const getAreaDetail = async () => {
+    try {
+        const { data } = await AreaManageApi.getObj(form.areaId)
+        console.log("获取区域详情data:", data);
+        if (!data) return
+        form.areaName = data.name
+    } catch (error: any) {
+        console.error(error);
+    }
+}
+
+// 暴露变量
+defineExpose({
+    openDialog
+});
+</script>

src/views/area/_components/areaPlaybackDeviceTable.vue

@@ -0,0 +1,146 @@
+<template>
+    <el-dialog title="房屋回放摄像头管理" v-model="visible" width="75%" :close-on-click-modal="false" draggable
+        @closed="dialogClosed">
+        <el-row>
+            <div class="mb8" style="width: 100%">
+                <el-button icon="folder-add" type="primary" class="ml10"
+                    @click="areaPlaybackDeviceFormDialogRef.openDialog(null, form.id)">
+                    新 增
+                </el-button>
+            </div>
+        </el-row>
+        <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
+            :header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
+            @sort-change="sortChangeHandle">
+            <el-table-column type="index" label="#" width="80" />
+            <el-table-column width="100" label="关联类型">
+                <template #default="{ row }">
+                    <dict-tag :options="playback_biz_type" :value="row.bizType" />
+                </template>
+            </el-table-column>
+            <el-table-column label="空间">
+                <el-table-column prop="areaName" label="空间名" />
+                <el-table-column prop="areaUniqueCode" width="120" label="空间编码" />
+            </el-table-column>
+            <el-table-column label="设备">
+                <el-table-column prop="deviceName" width="160" label="设备名" />
+                <el-table-column prop="channelName" width="160" label="通道名" />
+                <el-table-column prop="deviceIp" width="120" label="ip" />
+                <el-table-column prop="devicePort" width="120" label="端口" />
+                <el-table-column prop="devicePort" width="120" label="状态">
+                    <template #default="{ row }">
+                        <tag-online :isOnline="row.isOnline == 1" />
+                    </template>
+                </el-table-column>
+            </el-table-column>
+            <el-table-column label="操作" width="200" fixed="right">
+                <template #default="{ row }">
+                    <el-button icon="edit-pen" text type="primary" v-auth="'area_areaHouse_edit'"
+                        @click="areaPlaybackDeviceFormDialogRef.openDialog(row.id, form.id)">
+                        编辑
+                    </el-button>
+                    <el-button icon="delete" text type="primary" v-auth="'area_areaHouse_del'"
+                        @click="handleDelete([row.id])">
+                        删除
+                    </el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="visible = false">取消</el-button>
+            </span>
+        </template>
+        <area-playback-device-form-dialog ref="areaPlaybackDeviceFormDialogRef" @refresh="getDataList(false)" />
+    </el-dialog>
+</template>
+<script setup lang="ts" name="AreaPlaybackDeviceTable">
+import { BasicTableProps, useTable } from "/@/hooks/table";
+import { useDict } from '/@/hooks/dict';
+import { useMessage, useMessageBox } from "/@/hooks/message";
+import * as AreaPlaybackDeviceApi from '/@/api/area/areaPlaybackDevice'
+import { rule } from '/@/utils/validate';
+const emit = defineEmits(['refresh']);
+
+const AreaPlaybackDeviceFormDialog = defineAsyncComponent(() => import('./areaPlaybackDeviceForm.vue'));
+
+// 定义变量内容
+const dataFormRef = ref();
+const visible = ref(false)
+const loading = ref(false)
+
+// 多选变量
+const selectObjs = ref([]) as any
+const multiple = ref(true)
+
+const areaPlaybackDeviceFormDialogRef = ref()
+
+// 定义字典
+const { playback_biz_type } = useDict('playback_biz_type')
+
+// 搜索变量
+const queryRef = ref()
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+    createdIsNeed: false,
+    queryForm: {},
+    pageList: AreaPlaybackDeviceApi.fetchList
+})
+
+//  table hook
+const {
+    getDataList,
+    currentChangeHandle,
+    sizeChangeHandle,
+    sortChangeHandle,
+    downBlobFile,
+    tableStyle
+} = useTable(state)
+
+// 提交表单数据
+const initForm = { id: '' }
+const form = reactive({ ...initForm });
+
+// 打开弹窗
+const openDialog = (id: string) => {
+    visible.value = true
+    form.id = id
+    if (id) {
+        state.queryForm.areaId = id
+        getDataList()
+    }
+};
+
+const dialogClosed = () => {
+    Object.assign(form, initForm)
+}
+
+// 多选事件
+const selectionChangHandle = (objs: { id: string }[]) => {
+    selectObjs.value = objs.map(({ id }) => id);
+    multiple.value = !objs.length;
+};
+
+// 删除操作
+const handleDelete = async (ids: string[]) => {
+    try {
+        await useMessageBox().confirm('此操作将永久删除');
+    } catch {
+        return;
+    }
+    try {
+        await AreaPlaybackDeviceApi.delObjs(ids);
+        getDataList();
+        useMessage().success('删除成功');
+    } catch (err: any) {
+        useMessage().error(err.msg);
+    }
+};
+
+// 暴露变量
+defineExpose({
+    openDialog
+});
+
+</script>

src/views/area/_components/bindCameraForm.vue

@@ -15,7 +15,6 @@
                 </el-col>
                 <el-col :span="24" class="mb20">
                     <el-form-item v-if="!form.id" label="设备" prop="channelIds">
-                        <!-- <select-device v-model="form.channelIds" placeholder="请选择设备" /> -->
                         <select-tree-channel v-model="form.channelIds" placeholder="请选择设备" />
                     </el-form-item>
                 </el-col>

src/views/area/_components/bindCameraTable.vue

@@ -37,6 +37,7 @@
             </el-table-column>
             <el-table-column label="设备">
                 <el-table-column prop="deviceName" width="160" label="设备名" />
+                <el-table-column prop="channelName" width="160" label="通道名" />
                 <el-table-column prop="deviceIp" width="120" label="ip" />
                 <el-table-column prop="devicePort" width="120" label="端口" />
                 <el-table-column prop="devicePort" width="120" label="状态">

src/views/area/areaManage/index.vue

@@ -56,7 +56,7 @@
         <el-table-column label="操作" width="350">
           <template #default="{ row }">
             <el-button icon="OfficeBuilding" text type="primary" v-auth="'admin_areaManage_edit'"
-              @click="areaHouseTableDialogRef.openDialog(row.id)">
+              @click="areaPlaybackDeviceTableDialogRef.openDialog(row.id)">
               报警回放摄像头
             </el-button>
             <el-button icon="OfficeBuilding" text type="primary" v-auth="'admin_areaManage_edit'"
@@ -76,6 +76,7 @@
     <!-- 编辑、新增  -->
     <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
     <area-house-table-dialog ref="areaHouseTableDialogRef" />
+    <area-playback-device-table-dialog ref="areaPlaybackDeviceTableDialogRef" />
   </div>
 </template>
 
@@ -88,12 +89,15 @@ import { useDict } from '/@/hooks/dict';
 // 引入组件
 const FormDialog = defineAsyncComponent(() => import('./form.vue'));
 const AreaHouseTableDialog = defineAsyncComponent(() => import('../_components/areaHouseTable.vue'));
+const AreaPlaybackDeviceTableDialog = defineAsyncComponent(() => import('../_components/areaPlaybackDeviceTable.vue'));
 // 定义查询字典
 const { dh_build_type } = useDict("dh_build_type")
 // 定义变量内容
 const formDialogRef = ref()
 const areaHouseTableDialogRef = ref()
+const areaPlaybackDeviceTableDialogRef = ref()
 const bindCameraDialogRef = ref()
+
 // 搜索变量
 const queryRef = ref()
 const showSearch = ref(true)

src/views/car/carAlarm/index.vue

@@ -230,7 +230,7 @@ function openReplayDialog(row: any) {
     const startTime = parseTime(startDateTime, '{y}-{m}-{d} {h}:{i}:{s}')
     const endTime = parseTime(endDateTime, '{y}-{m}-{d} {h}:{i}:{s}')
 
-    replayVideoDialogRef.value.openDialog('channel', row.devChnId, { startTime, endTime })
+    replayVideoDialogRef.value.openDialog('playbackGroup', row.devChnId, { startTime, endTime })
 }
 </script>
 

src/views/device/components/replay-video/replay-video-dialog.vue

@@ -163,6 +163,9 @@ const getDeviceChannelList = async (codeStr: any) => {
         if (state.type == "channel") {
             _data.channelCode = codeStr
         }
+        if (state.type == "playbackGroup") {
+            _data.playbackGroupChannelCode = codeStr
+        }
         const { data, code } = await DeviceChannelApi.list(_data)
         if (code != 0) throw new Error()
 

src/views/door/doorAlarm/index.vue

@@ -232,7 +232,7 @@ function openReplayDialog(row: any) {
     const startTime = parseTime(startDateTime, '{y}-{m}-{d} {h}:{i}:{s}')
     const endTime = parseTime(endDateTime, '{y}-{m}-{d} {h}:{i}:{s}')
 
-    replayVideoDialogRef.value.openDialog('channel', row.channelCode, { startTime, endTime })
+    replayVideoDialogRef.value.openDialog('playbackGroup', row.channelCode, { startTime, endTime })
 }
 </script>
 

src/views/duty/dutyPlan/components/car-list.vue

@@ -29,8 +29,8 @@
                 </div>
             </div>
             <div class="pb-[5px] flex justify-center items-center">
-                <el-pagination size="small" background layout="prev, pager, next" @size-change="handleSizeChange"
-                    @current-change="handleCurrentChange" :total="timer.data.total" />
+                <el-pagination size="small" :page-sizes="[20]" :page-size="20" background layout="prev, pager, next"
+                    @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="timer.data.total" />
             </div>
         </div>
     </div>
@@ -92,6 +92,8 @@ const initListPoll = () => {
             if (!data || !data.records) return
             timer.data.records = data.records
             timer.data.total = data.total
+            console.log("timer.data.total:", timer.data.total);
+
         } catch (error) {
             console.error("|过车列表|意外的错误:", error);
         }

src/views/duty/dutyPlan/components/door-list.vue

@@ -30,8 +30,8 @@
                 </div>
             </div>
             <div class="pb-[5px] flex justify-center items-center">
-                <el-pagination size="small" background layout="prev, pager, next" @size-change="handleSizeChange"
-                    @current-change="handleCurrentChange" :total="timer.data.total" />
+                <el-pagination size="small" :page-sizes="[20]" :page-size="20" background layout="prev, pager, next"
+                    @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="timer.data.total" />
             </div>
         </div>
     </div>