154 lines
3.8 KiB
Vue
154 lines
3.8 KiB
Vue
<template>
|
||
<div class="checkpoint-list noScollLine">
|
||
<el-timeline style="max-width: 375px">
|
||
<el-timeline-item
|
||
v-for="(item, index) in warningList.listData"
|
||
:key="index"
|
||
:timestamp="item.yjSj"
|
||
placement="top"
|
||
:hollow="true"
|
||
color="#061b44"
|
||
>
|
||
<div class="item_card">
|
||
<div style="line-height: 18px">
|
||
{{ item.yjNr }}
|
||
<!-- 2025年3月20日,早上10点时，重点人员张三购买林芝客运站前
|
||
往朗县客运站的车票。 -->
|
||
</div>
|
||
<el-divider border-style="dashed" class="dashed" />
|
||
<div class="flex">
|
||
<div class="warning-image">
|
||
<img :src="item.yjTp" alt="预警图片" />
|
||
</div>
|
||
<div class="inform">
|
||
<div class="flex align-center">
|
||
<div class="inform_name">
|
||
姓名：<span>{{ item.yjRyxm }}</span>
|
||
</div>
|
||
<div class="inform_tag">{{ item.yjlyBqmc }}</div>
|
||
</div>
|
||
|
||
<div>身份证：{{ item.yjRysfzh }}</div>
|
||
<div>
|
||
购票时间：<span>{{ item.gpsj }}</span>
|
||
</div>
|
||
<div>购买路线：{{ item.gmlx }}</div>
|
||
<div>购买地点：{{ item.gmdd }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-timeline-item>
|
||
</el-timeline>
|
||
<Empty :show="warningList.listData.length == 0" />
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { reactive } from "vue";
|
||
import { tbGjYjgetPageList } from "@/api/mosty-zhgj.js";
|
||
import Empty from "@/components/Empty/index.vue";
|
||
const warningList = reactive({
|
||
listData: [],
|
||
total: 0
|
||
});
|
||
const linQuery = reactive({
|
||
pageCurrent: 1,
|
||
pageSize: 10
|
||
});
|
||
const gettbGjclselectPage = () => {
|
||
tbGjYjgetPageList(linQuery).then((res) => {
|
||
warningList.listData =
|
||
linQuery.pageCurrent == 1
|
||
? res.records
|
||
: warningList.listDat.concat(res.records);
|
||
warningList.total = res.total;
|
||
});
|
||
};
|
||
const scroll = () => {
|
||
if (warningList.total > warningList.listData.length) {
|
||
gettbGjclselectPage();
|
||
linQuery.pageCurrent++;
|
||
}
|
||
};
|
||
gettbGjclselectPage();
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.checkpoint-list {
|
||
margin-top: 20px;
|
||
margin-left: 18px;
|
||
height: calc(100% - 40px);
|
||
overflow: hidden;
|
||
overflow-y: auto;
|
||
padding: 4px;
|
||
box-sizing: border-box;
|
||
.item_card {
|
||
font-size: 14px;
|
||
color: #fff;
|
||
padding: 18px 13px 8px 15px;
|
||
width: 359px;
|
||
height: 190px;
|
||
border-radius: 4px;
|
||
border: 1px solid #0468e1;
|
||
opacity: 0.86;
|
||
background: url("~@/assets/images/bi/jmk.png") no-repeat center center;
|
||
background-size: 100% 100%;
|
||
.dashed {
|
||
width: 100%;
|
||
border-top: 1px #0468e1 dashed;
|
||
margin: 10px 0px 9px;
|
||
}
|
||
.warning-image {
|
||
border: 1px solid #0468e1;
|
||
padding: 10px 10px 10px 14px;
|
||
width: 103px;
|
||
height: 99px;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
}
|
||
.inform {
|
||
box-sizing: border-box;
|
||
margin-left: 11px;
|
||
width: 215px;
|
||
font-family: "Source Han Sans CN";
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #ffffff;
|
||
.inform_name {
|
||
width: 120px;
|
||
}
|
||
.inform_tag {
|
||
font-family: "Source Han Sans CN";
|
||
font-weight: 300;
|
||
font-size: 10px;
|
||
color: #f9411c;
|
||
border: 1px solid #f9411c;
|
||
padding: 0px 8px;
|
||
font-weight: 800;
|
||
border-radius: 8px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
::v-deep .el-timeline-item__node {
|
||
border-color: rgb(13, 216, 37);
|
||
}
|
||
::v-deep .el-timeline-item__tail {
|
||
border-left: 2px solid #06366d;
|
||
}
|
||
::v-deep .el-timeline-item__wrapper {
|
||
padding-left: 10px;
|
||
}
|
||
::v-deep .is-top {
|
||
margin-bottom: 12px;
|
||
padding-top: 2px;
|
||
font-size: 14px;
|
||
margin-left: 10px;
|
||
color: #fff;
|
||
}
|
||
</style>
|