542 lines
13 KiB
Vue
542 lines
13 KiB
Vue
<template>
|
||
<div class="image-carousel">
|
||
<div class="flex full-height" v-if="JczMsg.jczlx=='01'">
|
||
<div class="column-container">
|
||
<div class="gradient-title">过站人员</div>
|
||
<div class="search-container">
|
||
<el-input v-model="timeData.ryXm" placeholder="请输入姓名" class="search-input" clearable />
|
||
<el-date-picker v-model="timeData.time" type="daterange" unlink-panels range-separator="至"
|
||
start-placeholder="开始时间" end-placeholder="结束时间" :shortcuts="shortcuts" :size="size" />
|
||
<el-button type="primary" class="search-button">搜索</el-button>
|
||
</div>
|
||
<div class="waning-cards noScollLine">
|
||
<div class="warning-card" v-for="(item, index) in 20" :key="index">
|
||
<div class="warning-image">
|
||
<img :src="require('@/assets/images/default_male.png')" alt="抓拍图片" />
|
||
</div>
|
||
<div class="warning-info">
|
||
<div class="info-item">
|
||
<span class="label">姓名：</span>
|
||
<span>老王</span>
|
||
<span class="tag">老王预警</span>
|
||
</div>
|
||
<div class="info-item align-center">
|
||
<span class="label">性别：男</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="label">相似度：</span>
|
||
<span class="highlight">95%</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="label">抓拍时间：</span>
|
||
<span>2025-10-10 10:00:00</span>
|
||
</div>
|
||
<div class="info-item align-center">
|
||
<span class="label nowrap">抓拍地址：</span>
|
||
<span class="one_text_detail">上海市普陀区金沙江路 1518 弄</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="column-container">
|
||
<div class="gradient-title">过站车辆</div>
|
||
<div class="search-container">
|
||
<el-input v-model="clData.cph" placeholder="请输入车牌号" class="search-input" clearable />
|
||
<el-date-picker v-model="clData.time" type="daterange" unlink-panels range-separator="至"
|
||
start-placeholder="开始时间" end-placeholder="结束时间" :shortcuts="shortcuts" :size="size" />
|
||
<el-button type="primary" class="search-button">搜索</el-button>
|
||
</div>
|
||
<div class="waning-cards noScollLine" >
|
||
<div class="warning-card" v-for="(item, index) in pageData.tableData" :key="index">
|
||
<div class="warning-image">
|
||
<img :src="require('@/assets/images/car.png')" alt="抓拍图片" />
|
||
</div>
|
||
<div class="warning-info">
|
||
<div class="info-item">
|
||
<span class="label">车牌号：</span>
|
||
<span>{{ item.cph }}</span>
|
||
<span class="tag">{{ item.bq }} </span>
|
||
</div>
|
||
<!-- <div class="info-item flex">
|
||
<span class="label">性别：男</span>
|
||
</div> -->
|
||
<div class="info-item">
|
||
<span class="label">相似度：</span>
|
||
<span class="highlight">{{ item.xsd }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="label">抓拍时间：</span>
|
||
<span>{{ item.time }}</span>
|
||
</div>
|
||
<div class="info-item align-center">
|
||
<span class="label nowrap">抓拍地址：</span>
|
||
<span class="one_text_detail">{{ item.fx }}{{ item.dz }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-else>
|
||
<div>
|
||
<div>
|
||
<div style="display: flex;align-items: center;padding: 10px 0;">
|
||
<el-input v-model="timeData.ryXm" placeholder="请输入车牌号" style="width: 30%;margin-right: 10px;" clearable />
|
||
<el-date-picker v-model="timeData.time" type="daterange" range-separator="至" start-placeholder="开始时间"
|
||
end-placeholder="结束时间" style="width: 30%;;margin-right: 10px;" :size="size" />
|
||
<el-button type="primary">搜索</el-button>
|
||
</div>
|
||
</div>
|
||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" tableHeight="35vh"
|
||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
|
||
<template #tp="{ row }">
|
||
<el-image :src="row.tp" :preview-src-list="[row.tp]" alt="车辆类型" style="width: 80px; height: 100px;"/>
|
||
|
||
</template>
|
||
|
||
<!-- 操作 -->
|
||
<template #controls="{ row }">
|
||
<el-link type="primary" @click="addEdit('edit', row)">修改</el-link>
|
||
<el-link type="primary" @click="addEdit('detail', row)">详情</el-link>
|
||
<el-link type="primary" @click="delDictItem(row.id)">删除</el-link>
|
||
</template>
|
||
</MyTable>
|
||
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
|
||
...pageData.pageConfiger,
|
||
total: pageData.total
|
||
}"></Pages>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive } from 'vue'
|
||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||
import Pages from "@/components/aboutTable/Pages.vue";
|
||
const props=defineProps({
|
||
JczMsg: {
|
||
type: Object,
|
||
default: () => ({})
|
||
}
|
||
})
|
||
|
||
const timeData = ref({
|
||
ryXm: '',
|
||
time: []
|
||
})
|
||
const clData = ref({
|
||
cph: '',
|
||
time: []
|
||
})
|
||
const pageData = reactive({
|
||
tableData: [{
|
||
tp: require("@/assets/images/cstp.png"),
|
||
cph: "豫DGL808",
|
||
time: "2025-11-02 09:18:00",
|
||
fx: "入林方向",
|
||
dz: "德吉路与光彩路入口处",
|
||
bm: "54040251001325030171",
|
||
cllx: "小型车辆",
|
||
bq: "前科人员车",
|
||
xsd: "80%",
|
||
}, {
|
||
tp: require("@/assets/images/cstp.png"),
|
||
cph: "豫DGL808",
|
||
time: "2025-11-02 15:18:00",
|
||
fx: "出林方向",
|
||
dz: "德吉路与光彩路出口处",
|
||
bm: "54040251001325030172",
|
||
cllx: "小型车辆",
|
||
bq: "前科人员车",
|
||
xsd: "90%",
|
||
}, {
|
||
tp: require("@/assets/images/cstp.png"),
|
||
cph: "豫DGL808",
|
||
time: "2025-11-02 21:18:00",
|
||
fx: "入林方向",
|
||
dz: "德吉路与光彩路入口处",
|
||
bm: "54040251001325030171",
|
||
cllx: "小型车辆",
|
||
bq: "前科人员车",
|
||
xsd: "95%",
|
||
}], //表格数据
|
||
keyCount: 0,
|
||
tableConfiger: {
|
||
rowHieght: 61,
|
||
showSelectType: "null",
|
||
loading: false,
|
||
haveControls: false
|
||
},
|
||
total: 0,
|
||
pageConfiger: {
|
||
pageSize: 20,
|
||
pageCurrent: 1
|
||
}, //分页
|
||
controlsWidth: 250, //操作栏宽度
|
||
tableColumn: [
|
||
{ label: "过车图片", prop: "tp", showOverflowTooltip: true, showSolt: true },
|
||
{ label: "车牌号", prop: "cph", showOverflowTooltip: true },
|
||
{ label: "过车时间", prop: "time", showOverflowTooltip: true },
|
||
{ label: "卡口方向", prop: "fx", showOverflowTooltip: true },
|
||
{ label: "车辆种类", prop: "cllx", showOverflowTooltip: true },
|
||
{ label: "摄像头编码", prop: "bm", showOverflowTooltip: true },
|
||
{ label: "抓拍摄像头", prop: "dz", showOverflowTooltip: true, },
|
||
{ label: "标签", prop: "bq", showOverflowTooltip: true }
|
||
]
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.image-carousel {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
padding: 35px 10px;
|
||
box-sizing: border-box;
|
||
|
||
.carousel-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.image-wrapper {
|
||
display: flex;
|
||
height: 49.5%;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.image-item {
|
||
width: 24%;
|
||
margin: 0 1%;
|
||
height: 100%;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
}
|
||
|
||
.control-button {
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
color: #fff;
|
||
z-index: 1;
|
||
|
||
&.prev {
|
||
left: 0;
|
||
}
|
||
|
||
&.next {
|
||
right: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.video-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
/* 6列 */
|
||
grid-template-rows: repeat(2, auto);
|
||
/* 2行 */
|
||
gap: 10px;
|
||
height: 100%;
|
||
overflow: auto;
|
||
}
|
||
|
||
::v-deep .el-carousel__container {
|
||
height: 100% !important;
|
||
}
|
||
|
||
::v-deep .image-carousel {
|
||
// padding: 0 !important;;
|
||
}
|
||
|
||
// 自定义滚动条样式
|
||
.noScollLine::-webkit-scrollbar {
|
||
width: 0.5em;
|
||
height: 0.5em;
|
||
}
|
||
|
||
.noScollLine::-webkit-scrollbar-track {
|
||
background: #000000;
|
||
}
|
||
|
||
.noScollLine::-webkit-scrollbar-thumb {
|
||
background: #021b31;
|
||
border-radius: 0.25em;
|
||
}
|
||
|
||
.noScollLine::-webkit-scrollbar-thumb:hover {
|
||
background: #011733cd;
|
||
}
|
||
|
||
// 表格列样式
|
||
.col-index {
|
||
width: 50px;
|
||
}
|
||
|
||
.col-image {
|
||
width: 80px;
|
||
}
|
||
|
||
.col-plate {
|
||
width: 100px;
|
||
}
|
||
|
||
.col-time {
|
||
width: 15%;
|
||
}
|
||
|
||
.col-direction {
|
||
width: 10%;
|
||
}
|
||
|
||
.col-type {
|
||
width: 10%;
|
||
}
|
||
|
||
.col-code {
|
||
width: 20%;
|
||
}
|
||
|
||
.col-camera {
|
||
width: 10%;
|
||
}
|
||
|
||
.col-tag {
|
||
width: calc(35% - 250px);
|
||
}
|
||
|
||
// 图片容器样式
|
||
.image-container {
|
||
width: 80px;
|
||
height: 100px;
|
||
padding: 10px;
|
||
}
|
||
|
||
.vehicle-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
// 特殊文本样式
|
||
.plate-number {
|
||
color: blue;
|
||
}
|
||
|
||
// 滚动容器样式
|
||
.scroll-container {
|
||
height: 38vh;
|
||
overflow: auto;
|
||
}
|
||
|
||
// 布局相关样式
|
||
.full-height {
|
||
height: 100%;
|
||
}
|
||
|
||
.column-container {
|
||
width: 50%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
padding: 10px;
|
||
}
|
||
|
||
.gradient-title {
|
||
line-height: 40px;
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
color: #000;
|
||
font-family: 'YSBTH';
|
||
background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
.search-container {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
}
|
||
|
||
.search-input {
|
||
margin-bottom: 10px;
|
||
width: 40%;
|
||
}
|
||
|
||
.search-button {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.align-center {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.video-cell {
|
||
position: relative;
|
||
|
||
}
|
||
|
||
.iconFont {
|
||
position: absolute;
|
||
top: 10px;
|
||
text-align: right;
|
||
width: 100%;
|
||
}
|
||
|
||
.waning-cards {
|
||
height: calc(100% - 80px);
|
||
overflow: hidden;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.nowrap {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.one_text_detail {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.warning-card {
|
||
background: url("~@/assets/images/bg_10.png") no-repeat center center;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20px;
|
||
margin-bottom: 4px;
|
||
padding: 4px 4px 4px 10px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.warning-image {
|
||
width: 70px;
|
||
height: 80px;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.warning-image img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.warning-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.info-item {
|
||
margin-bottom: 4px;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.label {
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
|
||
.highlight {
|
||
color: #00f0ff;
|
||
}
|
||
|
||
.tag {
|
||
background: rgba(250, 177, 21, 0.2);
|
||
border-radius: 8px;
|
||
border: 1px solid #ffac26;
|
||
color: #fff;
|
||
padding: 2px 8px;
|
||
border-radius: 10px;
|
||
font-size: 12px;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.list-Box {
|
||
background-color: #0274ff;
|
||
color: #fff;
|
||
line-height: 50px;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.list-list {
|
||
background-color: #0017498a;
|
||
color: #000;
|
||
text-align: center;
|
||
line-height: 100px;
|
||
height: 100px;
|
||
color: #fff;
|
||
}
|
||
|
||
.listTr {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
// max-width: 100%;
|
||
cursor: pointer;
|
||
}
|
||
|
||
::v-deep .el-input__inner {
|
||
background-color: #273467d9;
|
||
color: #fff;
|
||
border: none;
|
||
}
|
||
|
||
::v-deep .el-range-input {
|
||
background-color: #273467d9;
|
||
color: #fff;
|
||
}
|
||
::v-deep .el-table{
|
||
border: none !important;
|
||
background-color: transparent !important;
|
||
--el-table-border-color: transparent !important;
|
||
}
|
||
::v-deep .el-table tr{
|
||
background-color: #072b56bf !important;
|
||
}
|
||
::v-deep .el-table th.el-table__cell {
|
||
background-color: #273467d9;
|
||
color: #fff;
|
||
}
|
||
::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
|
||
background-color: #094c9dbf !important;
|
||
}
|
||
::v-deep .el-table .el-table__cell{
|
||
z-index:0 !important;
|
||
position:static;
|
||
}
|
||
::v-deep .el-table td.el-table__cell{
|
||
|
||
color: #fff !important;
|
||
}
|
||
::v-deep .el-table--border .el-table__cell{
|
||
border-color: #3b3b3bbf !important;
|
||
}
|
||
::v-deep .el-pagination__total{
|
||
color: #fff !important;
|
||
}
|
||
::v-deep .el-pagination.is-background .btn-next:disabled, .el-pagination.is-background .btn-prev:disabled{
|
||
background-color: #212c59;
|
||
}
|
||
::v-deep .el-pagination.is-background .btn-next:disabled, .el-pagination.is-background .btn-prev:disabled{
|
||
background-color: #212c59 !important;
|
||
}
|
||
::v-deep .el-date-editor .el-range-separator{
|
||
color: #fff !important;
|
||
}
|
||
</style>
|