lcw
This commit is contained in:
@ -1,65 +1,191 @@
|
||||
<template>
|
||||
<div class="image-carousel">
|
||||
<el-carousel style="height: 100%;" motion-blur indicator-position="none" @change="handleCarouselChange"
|
||||
:autoplay="false">
|
||||
<el-carousel-item v-for="(item, index) in listSxt" :key="index">
|
||||
<div class="video-grid" v-if="activeIndex == index">
|
||||
<div v-for="(items,indexs) in item" :key="indexs" class="video-cell">
|
||||
<div class="iconFont" @click.stop="showchenge(items)">
|
||||
<el-icon :size="20"><UploadFilled /></el-icon>
|
||||
<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>
|
||||
<WsIframe :sbbh="items.sbbh" />
|
||||
</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</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, watch, computed, onMounted, onUnmounted, reactive,nextTick } from 'vue'
|
||||
import WsIframe from '@/components/wsIframe/index.vue'
|
||||
import { useRoute } from "vue-router"
|
||||
import { sxtGetList } from '@/api/mosty-jcz.js'
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
const activeIndex = ref(0)
|
||||
const cdList=ref([])
|
||||
const listSxt=ref([1])
|
||||
const handleCarouselChange = (index) => {
|
||||
activeIndex.value = index
|
||||
}
|
||||
|
||||
const getSxtGetList = (id) => {
|
||||
const jczid = {
|
||||
jczid: id
|
||||
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: () => ({})
|
||||
}
|
||||
sxtGetList(jczid).then(res => {
|
||||
listSxt.value= Array.from({ length:Math.ceil(res.length / 12)==0?1:Math.ceil(res.length / 12) }, (_, row) => {
|
||||
return res.slice(row * 12, row * 12 + 12)
|
||||
}
|
||||
);
|
||||
cdList.value = listSxt.value[0].length < 4 ? listSxt.value[0]: listSxt.value[0].slice(0,4)
|
||||
emitter.emit("getSxtGetList", cdList.value )
|
||||
}).finally(()=>{
|
||||
})
|
||||
}
|
||||
const route = useRoute()
|
||||
onMounted(() => {
|
||||
const id = route.query.id
|
||||
getSxtGetList(id)
|
||||
})
|
||||
const showchenge = (item) => {
|
||||
const index = cdList.value.indexOf(item);
|
||||
if (index !== -1) {
|
||||
// 如果数字已存在，先移除它
|
||||
cdList.value.splice(index, 1);
|
||||
}
|
||||
// 添加到最前面
|
||||
cdList.value.unshift(item);
|
||||
|
||||
emitter.emit("getSxtGetList", cdList.value )
|
||||
}
|
||||
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>
|
||||
@ -67,7 +193,7 @@ if (index !== -1) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
padding: 30px 20px;
|
||||
padding: 35px 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.carousel-container {
|
||||
@ -116,7 +242,7 @@ if (index !== -1) {
|
||||
|
||||
.video-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
/* 6列 */
|
||||
grid-template-rows: repeat(2, auto);
|
||||
/* 2行 */
|
||||
@ -133,28 +259,283 @@ if (index !== -1) {
|
||||
// padding: 0 !important;;
|
||||
}
|
||||
|
||||
/* 自定义滚动条样式 */
|
||||
::-webkit-scrollbar {
|
||||
// 自定义滚动条样式
|
||||
.noScollLine::-webkit-scrollbar {
|
||||
width: 0.5em;
|
||||
height: 0.5em;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
.noScollLine::-webkit-scrollbar-track {
|
||||
background: #000000;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
.noScollLine::-webkit-scrollbar-thumb {
|
||||
background: #021b31;
|
||||
border-radius: 0.25em;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
.noScollLine::-webkit-scrollbar-thumb:hover {
|
||||
background: #011733cd;
|
||||
}
|
||||
.video-cell{
|
||||
position: relative;
|
||||
|
||||
// 表格列样式
|
||||
.col-index {
|
||||
width: 50px;
|
||||
}
|
||||
.iconFont{
|
||||
position: absolute; top: 10px; text-align: right; width: 100%;
|
||||
|
||||
.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>
|
||||
|
||||
Reference in New Issue
Block a user