xzlz_JczWeb/src/views/StationLevel/layout/VideoFoot.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>