124
This commit is contained in:
220
src/views/home/components/warning.vue
Normal file
220
src/views/home/components/warning.vue
Normal file
@ -0,0 +1,220 @@
|
||||
<template>
|
||||
<div class="warning-container">
|
||||
<!-- 标签切换 -->
|
||||
<div class="tab-container">
|
||||
<div class="tab-item" :class="linkQuery.yjLx == 2 ? 'active' : ''">
|
||||
<div class="tab-content" @click="clickData(2)">车辆预警</div>
|
||||
</div>
|
||||
<div class="tab-item" :class="linkQuery.yjLx == 1 ? 'active' : ''">
|
||||
<div class="tab-content" @click="clickData(1)">人员预警</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 预警列表 -->
|
||||
<div
|
||||
class="warning-list noScollLine"
|
||||
v-loading="loading"
|
||||
v-infinite-scroll="rollingLoading"
|
||||
>
|
||||
<div
|
||||
class="warning-card"
|
||||
v-for="(item, index) in warningList.data"
|
||||
:key="index"
|
||||
>
|
||||
<div class="warning-image">
|
||||
<img :src="item.yjTp" alt="预警图片" />
|
||||
</div>
|
||||
<div class="warning-info">
|
||||
<div class="info-item" v-if="linkQuery.yjLx == 2">
|
||||
<span class="label">车牌号：</span>
|
||||
<span>{{ item.yjClcph }}</span>
|
||||
<span class="tag">{{ item.yjBt }}</span>
|
||||
</div>
|
||||
<div class="info-item" v-else>
|
||||
<span class="label">姓名：</span>
|
||||
<span>{{ item.yjRyxm }}</span>
|
||||
<span class="tag">{{ item.yjBt }}</span>
|
||||
</div>
|
||||
<div class="info-item flex" v-if="linkQuery.yjLx == 1">
|
||||
<span class="label">性别：</span>
|
||||
<dict-tag
|
||||
:options="D_BZ_XB"
|
||||
:value="IdCard(item.yjRysfzh, 3)"
|
||||
:tag="false"
|
||||
></dict-tag>
|
||||
</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.yjSj }}</span>
|
||||
</div>
|
||||
<div class="info-item flex align-center">
|
||||
<span class="label nowrap">抓拍地址：</span>
|
||||
<span class="one_text_detail">{{ item.yjDz }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Empty :show="warningList.data.length == 0" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, getCurrentInstance } from "vue";
|
||||
import { jczgetPageList } from "@/api/mosty-jcz.js";
|
||||
import { IdCard } from "@/utils/dict.js";
|
||||
import Empty from "@/components/MyComponents/Empty/index.vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_XB } = proxy.$dict("D_BZ_XB");
|
||||
const warningList = reactive({
|
||||
data: [],
|
||||
total: 0
|
||||
});
|
||||
|
||||
const loading = ref(false);
|
||||
const linkQuery = ref({
|
||||
yjLx: 2,
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
// 获取预警数据
|
||||
const clickData = (val) => {
|
||||
linkQuery.value.yjLx = val;
|
||||
linkQuery.value.pageNum = 1;
|
||||
getPageList();
|
||||
};
|
||||
const getPageList = () => {
|
||||
loading.value = true;
|
||||
jczgetPageList(linkQuery.value)
|
||||
.then((res) => {
|
||||
warningList.data =
|
||||
linkQuery.value.pageNum == 1
|
||||
? res.records
|
||||
: warningList.data.concat(res.records);
|
||||
warningList.total = res.total;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("预警数据请求错误", err);
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
//滚动
|
||||
const rollingLoading = () => {
|
||||
if (warningList.data.length < warningList.total) {
|
||||
linkQuery.value.pageNum++;
|
||||
getPageList();
|
||||
}
|
||||
};
|
||||
getPageList();
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.warning-container {
|
||||
height: 100%;
|
||||
padding-top: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tab-container {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
width: 159px;
|
||||
height: 43px;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding: 8px 30px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tab-item::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("~@/assets/images/bg_08.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.tab-item.active::before {
|
||||
background: url("~@/assets/images/bg_09.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.warning-list {
|
||||
height: calc(100% - 64px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.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: 100px;
|
||||
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.9);
|
||||
color: #fff;
|
||||
padding: 2px 8px;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user