DeXun/rtsp-video-analysis-system
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善首页

Browse Source
This commit is contained in:
砂糖
2025-10-07 13:13:06 +08:00
parent 9fd1832ce9
commit f80035d32a
3 changed files with 222 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
rtsp-vue/src/views/index.vue
View File

@@ -4,47 +4,136 @@
<el-form-item label="设备类型" prop="type">
<el-radio-group type="button" v-model="queryParams.type" @change="handleQuery">
<el-radio-button :label="undefined">全部</el-radio-button>
<el-radio-button v-for="dict in device_type" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio-button>
<el-radio-button v-for="dict in device_type" :key="dict.value" :label="dict.value">{{ dict.label
}}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item style="float: right;">
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize" @pagination="getList" />
</el-form-item>
</el-form>
<el-row>
<el-col :span="12">
<div style="display: flex;">
<div style="display: flex;">
<div class="card" @click="handleVideoCameraFilled(item)" v-for="item in deviceList" :key="item.deviceId">
<div class="card-image">
<img :src="item.url" :alt="item.url" style="width: 100%; height: 100%;" />
<!-- <div style="width: 100%; height: 100%;">
<!-- <div style="width: 100%; height: 100%;">
{{ item.url }}
</div> -->
</div>
<div class="category"><dict-tag :options="device_type" :value="item.type"/></div>
<div class="heading">
<div class="category"><dict-tag :options="device_type" :value="item.type" /></div>
<div class="heading">
{{ item.ip }}
<!-- <div class="author"> By <span class="name">Abi</span> 4 days ago</div> -->
</div>
</div>
</div>
<el-row :gutter="20">
<el-col :span="12">
<div style="width: 100%; height: 100%;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<h3>告警记录 {{ alarmRecordList.length }}条</h3>
<el-button type="primary" @click="handleAlarmRecord">查看更多</el-button>
</div>
<el-table :data="alarmRecordList" style="width: 100%">
<el-table-column label="任务名称" align="center" prop="taskName" />
<el-table-column label="设备名称" align="center" prop="deviceName" />
<el-table-column label="报警类型" align="center" prop="alarmType" />
<!-- <el-table-column label="报警级别" align="center" prop="alarmLevel">
<template #default="scope">
<el-tag v-if="scope.row.alarmLevel === '1'" type="info">低</el-tag>
<el-tag v-else-if="scope.row.alarmLevel === '2'" type="warning">中</el-tag>
<el-tag v-else-if="scope.row.alarmLevel === '3'" type="danger">高</el-tag>
</template>
</el-table-column> -->
<el-table-column label="置信度" align="center" prop="confidence">
<template #default="scope">
{{ (scope.row.confidence * 100).toFixed(1) }}%
</template>
</el-table-column>
</el-table>
</div>
</el-col>
<el-col :span="12">
<div style="width: 100%; height: 100%;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<h3>巡检记录 {{ inspectionRecordList.length }}条</h3>
<el-button type="primary" @click="handleInspectionRecord">查看更多</el-button>
</div>
<el-table :data="inspectionRecordList" style="width: 100%">
<el-table-column label="巡检任务" prop="taskName">
<template #default="scope">
{{ findTaskName(scope.row.taskId) }}
</template>
</el-table-column>
<el-table-column label="执行时间" prop="executeTime" />
<el-table-column label="执行时长" prop="duration" />
<el-table-column label="执行状态" prop="status">
<template #default="scope">
<dict-tag :options="ins_record_status" :value="scope.row.status" />
</template>
</el-table-column>
</el-table>
</div>
</el-col>
</el-row>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize" @pagination="getList" />
</div>
</template>
<script setup name="Device">
import router from '@/router'
import { listDevice } from "@/api/video/device";
import { listInspectionRecord } from "@/api/video/insRecord";
import { listInspection } from "@/api/video/inspection";
import { listAlarm } from "@/api/video/alarm";
const { proxy } = getCurrentInstance();
const { device_on_status, device_type } = proxy.useDict('device_on_status', 'device_type');
const { device_on_status, device_type, ins_record_status } = proxy.useDict('device_on_status', 'device_type', 'ins_record_status');
const inspectionRecordList = ref([]);
const inspectionList = ref([]);
const findTaskName = (taskId) => {
return inspectionList.value.find(item => item.taskId === taskId)?.taskName;
}
function getInspectionList() {
listInspection({
pageNum: 1,
pageSize: 10,
}).then(response => {
inspectionList.value = response.rows;
});
}
function getInspectionRecordList() {
listInspectionRecord({
pageNum: 1,
pageSize: 10,
}).then(response => {
inspectionRecordList.value = response.rows;
});
}
function handleInspectionRecord() {
router.push({ path: "/insrecord" });
}
getInspectionList();
getInspectionRecordList();
function handleAlarmRecord() {
router.push({ path: "/alarm" });
}
const alarmRecordList = ref([]);
function getAlarmRecordList() {
listAlarm({
pageNum: 1,
pageSize: 10,
}).then(response => {
alarmRecordList.value = response.rows;
});
}
getAlarmRecordList();
const deviceList = ref([]);
const loading = ref(true);