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-08 16:16:41 +08:00
parent 3abac5ff1b
commit bf0996d750
3 changed files with 19 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
rtsp-vue/src/assets/images/camera.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 360 KiB

BIN
rtsp-vue/src/assets/images/device.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

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

@@ -15,19 +15,25 @@
</el-form> </el-form>
<div style="display: flex;"> <div style="display: flex; gap: 20px">
<div class="card" @click="handleVideoCameraFilled(item)" v-for="item in deviceList" :key="item.deviceId"> <div class="card" @click="handleVideoCameraFilled(item)" v-for="item in deviceList" :key="item.deviceId">
<div class="card-image"> <el-row>
<img :src="item.url" :alt="item.url" style="width: 100%; height: 100%;" /> <el-col :span="16">
<!-- <div style="width: 100%; height: 100%;"> <h3 style="display: flex; align-items: center;"><img :src="DeviceImage" alt="" style="width: 20px; height: 20px; margin-right: 10px;"> {{ item.ip }}</h3>
{{ item.url }} <div class="li" style="display: flex; align-items: center;">设备分类：<dict-tag :options="device_type" :value="item.type" /></div>
</div> --> <div class="li" style="display: flex; align-items: center;">用户名：{{ item.username ?? '-' }}</div>
</el-col>
<el-col :span="8">
<img :src="CameraImage" alt="设备图片" style="width: 100%;" />
</el-col>
</el-row>
<!-- <div class="card-image">
<img :src="DeviceImage" :alt="item.url" style="width: 100%; height: 100%;" />
</div> </div>
<div class="category"><dict-tag :options="device_type" :value="item.type" /></div> <div class="category"><dict-tag :options="device_type" :value="item.type" /></div>
<div class="heading"> <div class="heading">
{{ item.ip }} {{ item.ip }}
<!-- <div class="author"> By <span class="name">Abi</span> 4 days ago</div> --> </div> -->
</div>
</div> </div>
</div> </div>
@@ -89,6 +95,8 @@ import { listDevice } from "@/api/video/device";
import { listInspectionRecord } from "@/api/video/insRecord"; import { listInspectionRecord } from "@/api/video/insRecord";
import { listInspection } from "@/api/video/inspection"; import { listInspection } from "@/api/video/inspection";
import { listAlarm } from "@/api/video/alarm"; import { listAlarm } from "@/api/video/alarm";
import DeviceImage from "@/assets/images/device.png";
import CameraImage from "@/assets/images/camera.png";
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
const { device_on_status, device_type, ins_record_status } = proxy.useDict('device_on_status', 'device_type', 'ins_record_status'); const { device_on_status, device_type, ins_record_status } = proxy.useDict('device_on_status', 'device_type', 'ins_record_status');
@@ -186,19 +194,17 @@ getList();
<style scoped> <style scoped>
/* From Uiverse.io by alexmaracinaru */ /* From Uiverse.io by alexmaracinaru */
.card { .card {
width: 190px; width: 300px;
background: white;
padding: .4em; padding: .4em;
border-radius: 6px; border-radius: 0;
border: 1px solid #e0e0e0;
} }
.card-image { .card-image {
background-color: rgb(236, 236, 236);
width: 100%; width: 100%;
height: 130px; height: 130px;
text-align: center; text-align: center;
word-break: break-all; word-break: break-all;
border-radius: 6px 6px 0 0;
} }
.card-image:hover { .card-image:hover {