124
This commit is contained in:
1417
src/views/home/components/511202.json
Normal file
1417
src/views/home/components/511202.json
Normal file
File diff suppressed because it is too large
Load Diff
149
src/views/home/components/CarWarning.vue
Normal file
149
src/views/home/components/CarWarning.vue
Normal file
@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<div
|
||||
class="waning-cards noScollLine"
|
||||
v-infinite-scroll="rollingLoading"
|
||||
v-loading="loading"
|
||||
>
|
||||
<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">
|
||||
<span class="label">车牌号：</span>
|
||||
<span>{{ item.yjClcph }}</span>
|
||||
<span class="tag">{{ item.yjBt }}</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.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" :imgSize="100" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, getCurrentInstance } from "vue";
|
||||
import { jczgetPageList } from "@/api/mosty-jcz.js";
|
||||
import Empty from "@/components/MyComponents/Empty/index.vue";
|
||||
const props = defineProps({
|
||||
jczId: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
});
|
||||
const warningList = reactive({
|
||||
data: [],
|
||||
total: 0
|
||||
});
|
||||
const loading = ref(false);
|
||||
const linkQuery = ref({
|
||||
yjLx: 2,
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
jczid: props.jczId
|
||||
});
|
||||
// 获取预警数据
|
||||
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 lang="scss" scoped>
|
||||
.waning-cards {
|
||||
height: 100%;
|
||||
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.2);
|
||||
border-radius: 8px;
|
||||
border: 1px solid #ffac26;
|
||||
color: #fff;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
font-size: 12px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
158
src/views/home/components/PeoWarning.vue
Normal file
158
src/views/home/components/PeoWarning.vue
Normal file
@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<div
|
||||
class="waning-cards noScollLine"
|
||||
v-infinite-scroll="rollingLoading"
|
||||
v-loading="loading"
|
||||
>
|
||||
<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">
|
||||
<span class="label">姓名：</span>
|
||||
<span>{{ item.yjRyxm }}</span>
|
||||
<span class="tag">{{ item.yjBt }}</span>
|
||||
</div>
|
||||
<div class="info-item flex">
|
||||
<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" :imgSize="100" />
|
||||
</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 props = defineProps({
|
||||
jczId: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
});
|
||||
const warningList = reactive({
|
||||
data: [],
|
||||
total: 0
|
||||
});
|
||||
const loading = ref(false);
|
||||
const linkQuery = ref({
|
||||
yjLx: 1,
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
jczid: props.jczId
|
||||
});
|
||||
// 获取预警数据
|
||||
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 lang="scss" scoped>
|
||||
.waning-cards {
|
||||
height: 100%;
|
||||
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.2);
|
||||
border-radius: 8px;
|
||||
border: 1px solid #ffac26;
|
||||
color: #fff;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
font-size: 12px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
102
src/views/home/components/beonDuty.vue
Normal file
102
src/views/home/components/beonDuty.vue
Normal file
@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div class="checkpoint-list noScollLine" v-loading="loading">
|
||||
<div
|
||||
class="checkpoint-item"
|
||||
v-for="(item, index) in checkpoints"
|
||||
:key="index"
|
||||
>
|
||||
<div class="checkpoint-icon">
|
||||
<img src="@/assets/images/bg_11.png" alt="检查站" />
|
||||
</div>
|
||||
<div class="checkpoint-info">
|
||||
<span class="checkpoint-name">{{ item.kkMc }}：</span>
|
||||
<span class="checkpoint-count">{{ item.personSl }} 人</span>
|
||||
</div>
|
||||
</div>
|
||||
<Empty :show="checkpoints.length == 0" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import Empty from "@/components/MyComponents/Empty/index.vue";
|
||||
import { jczjczCount } from "@/api/mosty-jcz";
|
||||
const loading = ref(false);
|
||||
|
||||
const checkpoints = ref([]);
|
||||
const jczjczCountList = () => {
|
||||
loading.value = true;
|
||||
jczjczCount()
|
||||
.then((res) => {
|
||||
if (res.length == 0) checkpoints.value = [];
|
||||
checkpoints.value = res.map((item) => {
|
||||
return {
|
||||
personSl: item.mjsl + item.fjsl,
|
||||
kkMc: item.kkMc
|
||||
};
|
||||
});
|
||||
console.log(res);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("检查站备勤错误", err);
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
jczjczCountList();
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.checkpoint-list {
|
||||
margin-top: 20px;
|
||||
height: calc(100% - 40px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.checkpoint-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 30px;
|
||||
padding: 4px 10px 4px 22px;
|
||||
}
|
||||
|
||||
.checkpoint-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 240, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.checkpoint-icon img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
filter: brightness(0) invert(1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.checkpoint-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.checkpoint-name {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
display: inline-block;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.checkpoint-count {
|
||||
color: #00f0ff;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
194
src/views/home/components/collection.vue
Normal file
194
src/views/home/components/collection.vue
Normal file
@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<div class="data-statistics">
|
||||
<!-- 人员数据采集 -->
|
||||
<div class="data-collection">
|
||||
<h2 class="section-title">人员数据采集</h2>
|
||||
<div class="statistics-cards">
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">{{ personnelData.rzhy }}</div>
|
||||
<div class="f14">人证核验</div>
|
||||
<div><img src="@/assets/images/bg_03.png" alt="" /></div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">{{ personnelData.wgtx }}</div>
|
||||
<div class="f14">无感通行</div>
|
||||
<div><img src="@/assets/images/bg_04.png" alt="" /></div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">{{ personnelData.sczd }}</div>
|
||||
<div class="f14">手持终端登记</div>
|
||||
<div><img src="@/assets/images/bg_05.png" alt="" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 流入流出统计 -->
|
||||
<div class="flow-statistics">
|
||||
<h2 class="section-title">流入流出统计</h2>
|
||||
<div class="flow-grid">
|
||||
<div class="flow-item">
|
||||
<div class="flow-icon">
|
||||
<img width="60" src="@/assets/images/bg_06.png" alt="" />
|
||||
</div>
|
||||
<div class="flow-info">
|
||||
<span class="flow-label">进林人员</span>
|
||||
<span class="flow-number">{{ carAccess.rlsl }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flow-item">
|
||||
<div class="flow-icon">
|
||||
<img width="60" src="@/assets/images/bg_06.png" alt="" />
|
||||
</div>
|
||||
<div class="flow-info">
|
||||
<span class="flow-label">出林人员</span>
|
||||
<span class="flow-number">{{ carAccess.clsl }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flow-item">
|
||||
<div class="flow-icon">
|
||||
<img width="60" src="@/assets/images/bg_07.png" alt="" />
|
||||
</div>
|
||||
<div class="flow-info">
|
||||
<span class="flow-label">进林车辆</span>
|
||||
<span class="flow-number">{{ personneAccess.rlsl }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flow-item">
|
||||
<div class="flow-icon">
|
||||
<img width="60" src="@/assets/images/bg_07.png" alt="" />
|
||||
</div>
|
||||
<div class="flow-info">
|
||||
<span class="flow-label">出林车辆</span>
|
||||
<span class="flow-number">{{ personneAccess.clsl }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 可以在这里添加需要的响应式数据和方法
|
||||
import { jczCountWay, jczgetcountCrl, jczGzrycountCrl } from "@/api/mosty-jcz";
|
||||
import { ref } from "vue";
|
||||
const personnelData = ref({
|
||||
rzhy: 0,
|
||||
sczd: 0,
|
||||
wgtx: 0
|
||||
});
|
||||
const personneAccess = ref({
|
||||
clsl: 0,
|
||||
rlsl: 0
|
||||
});
|
||||
const carAccess = ref({
|
||||
clsl: 0,
|
||||
rlsl: 0
|
||||
});
|
||||
const countWay = () => {
|
||||
jczCountWay()
|
||||
.then((res) => {
|
||||
personnelData.value = res;
|
||||
})
|
||||
.catch((err) => {});
|
||||
};
|
||||
const getcountCrl = () => {
|
||||
jczgetcountCrl()
|
||||
.then((res) => {
|
||||
personneAccess.value = res;
|
||||
})
|
||||
.catch((err) => {});
|
||||
};
|
||||
const GzrycountCrl = () => {
|
||||
jczGzrycountCrl()
|
||||
.then((res) => {
|
||||
carAccess.value = res;
|
||||
})
|
||||
.catch((err) => {});
|
||||
};
|
||||
countWay();
|
||||
GzrycountCrl();
|
||||
getcountCrl();
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.data-statistics {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 15px;
|
||||
font-size: 18px;
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
background: linear-gradient(0deg, #59a6f4 0%, #ffffff 90%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.section-title::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 8px;
|
||||
height: 16px;
|
||||
background: url("~@/assets/images/bg_02.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.statistics-cards {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 32px;
|
||||
color: #00f0ff;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.flow-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
padding-left: 15px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.flow-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.flow-icon {
|
||||
font-size: 24px;
|
||||
color: #00f0ff;
|
||||
}
|
||||
|
||||
.flow-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flow-label {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.flow-number {
|
||||
font-size: 24px;
|
||||
color: #00f0ff;
|
||||
margin-top: 5px;
|
||||
}
|
||||
</style>
|
||||
320
src/views/home/components/entrance.vue
Normal file
320
src/views/home/components/entrance.vue
Normal file
@ -0,0 +1,320 @@
|
||||
<template>
|
||||
<div class="entrance">
|
||||
<div class="cloes" @click="cloes">
|
||||
<img src="@/assets/images/tc/close.png" alt="" srcset="" />
|
||||
</div>
|
||||
<div class="flex just-between align-center bt">
|
||||
<div class="headline">{{ BbMag?.jczmc }}</div>
|
||||
<div class="headbut" style="" @click="enterLevel">进入检查站</div>
|
||||
</div>
|
||||
<div class="flex just-between content">
|
||||
<div class="contentLeft">
|
||||
<div class="flex">
|
||||
<div class="leftImg">
|
||||
<img src="@/assets/images/tc/zbld.png" alt="" srcset="" />
|
||||
</div>
|
||||
<div class="leftMag">
|
||||
<div class="ld">值班领导</div>
|
||||
<div class="name">{{ BbMag.fzrXm }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="leftImg">
|
||||
<img src="@/assets/images/tc/zbld.png" alt="" srcset="" />
|
||||
</div>
|
||||
<div class="leftMag">
|
||||
<div class="ld">联系电话</div>
|
||||
<div class="name">{{ BbMag.fzrLxdh }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dutyList flex just-between align-center">
|
||||
<div class="dutyImg">
|
||||
<img src="@/assets/images/tc/zbfj.png" alt="" srcset="" />
|
||||
</div>
|
||||
<div class="occupation">
|
||||
值班民警：<span class="number">{{ BbMag.ryList.length }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dutyList flex just-between align-center">
|
||||
<div class="dutyImg">
|
||||
<img src="@/assets/images/tc/zbfj.png" alt="" srcset="" />
|
||||
</div>
|
||||
<div class="occupation">
|
||||
值班武警：<span class="number">{{ BbMag.ryList.length }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dutyList flex just-between align-center">
|
||||
<div class="dutyImg">
|
||||
<img src="@/assets/images/tc/zbfj.png" alt="" srcset="" />
|
||||
</div>
|
||||
<div class="occupation">
|
||||
值班民警：<span class="number">{{ BbMag.ryList.length }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contentRight">
|
||||
<div
|
||||
class="flex align-center right just-between"
|
||||
v-for="(item, index) in ArrList"
|
||||
:key="index"
|
||||
>
|
||||
<div>{{ item.name }}</div>
|
||||
<div class="number">
|
||||
<span>{{ item.count }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from "vue";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import {
|
||||
jczqueryById,
|
||||
jczCountWay,
|
||||
jczgetcountCrl,
|
||||
jczGzrycountCrl
|
||||
} from "@/api/mosty-jcz";
|
||||
import { useRouter } from "vue-router";
|
||||
const props = defineProps({
|
||||
JczData: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
|
||||
const BbMag = ref({ ryList: [] });
|
||||
const getjczqueryByIdFeign = () => {
|
||||
jczqueryById({ jczid: props.JczData.id }).then((res) => {
|
||||
BbMag.value = res;
|
||||
});
|
||||
};
|
||||
getjczqueryByIdFeign();
|
||||
const router = useRouter();
|
||||
const enterLevel = () => {
|
||||
const hrefs = router.resolve({
|
||||
name: "StationLevel",
|
||||
path: "/StationLevel",
|
||||
query: { id: props.JczData.id, name: props.JczData.jczmc }
|
||||
});
|
||||
window.open(hrefs.href, "_blank");
|
||||
};
|
||||
const cloes = () => {
|
||||
emitter.emit("showJcz");
|
||||
};
|
||||
let ArrList = ref([
|
||||
{
|
||||
name: "人证核验:",
|
||||
count: 0,
|
||||
key: "rzhy"
|
||||
},
|
||||
{
|
||||
name: "无感通行:",
|
||||
count: 0,
|
||||
key: "wgtx"
|
||||
},
|
||||
{
|
||||
name: "手持终端登记:",
|
||||
count: 0,
|
||||
key: "sczd"
|
||||
},
|
||||
{
|
||||
name: "进林人员:",
|
||||
count: 0,
|
||||
key: "crlrlsl"
|
||||
},
|
||||
{
|
||||
name: "出林人员:",
|
||||
count: 0,
|
||||
key: "crlclsl"
|
||||
},
|
||||
{
|
||||
name: "进林车辆:",
|
||||
count: 0,
|
||||
key: "rlsl"
|
||||
},
|
||||
{
|
||||
name: "出林车辆:",
|
||||
count: 0,
|
||||
key: "clsl"
|
||||
},
|
||||
{
|
||||
name: "人员预警:",
|
||||
count: 0,
|
||||
key: "xxx"
|
||||
},
|
||||
{
|
||||
name: "车辆预警:",
|
||||
count: 0,
|
||||
key: "xx"
|
||||
}
|
||||
]);
|
||||
const countWays = async () => {
|
||||
const way = await jczCountWay({ kkId: props.JczData.id });
|
||||
const crl = await jczgetcountCrl({ kkId: props.JczData.id });
|
||||
const gzry = await jczGzrycountCrl({ kkId: props.JczData.id });
|
||||
const crlData = {
|
||||
crlrlsl: gzry.rlsl,
|
||||
crlclsl: gzry.clsl
|
||||
};
|
||||
const data = { ...way, ...crl, ...crlData };
|
||||
ArrList.value = ArrList.value.map((item) => {
|
||||
return {
|
||||
name: item.name,
|
||||
count: data[item.key] ? data[item.key] : 0
|
||||
};
|
||||
});
|
||||
};
|
||||
countWays();
|
||||
// const countWay = () => {
|
||||
// jczCountWay({ kkId: props.JczData.id })
|
||||
// .then((res) => {
|
||||
// ArrList.value = ArrList.value.map((item) => {
|
||||
// return {
|
||||
// name: item.name,
|
||||
// count: res[item.key] ? res[item.key] : 0
|
||||
// };
|
||||
// });
|
||||
// console.log(ArrList.value);
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// console.log(err);
|
||||
// });
|
||||
// };
|
||||
|
||||
// const getcountCrl = () => {
|
||||
// jczgetcountCrl({ kkid: props.JczData.id })
|
||||
// .then((res) => {
|
||||
// ArrList.value = ArrList.value.map((item) => {
|
||||
// return {
|
||||
// name: item.name,
|
||||
// count: res[item.key] ? res[item.key] : 0
|
||||
// };
|
||||
// });
|
||||
// })
|
||||
// .catch((err) => {});
|
||||
// };
|
||||
// const GzrycountCrl = () => {
|
||||
// jczGzrycountCrl({ kkid: props.JczData.id })
|
||||
// .then((res) => {
|
||||
// ArrList.value = ArrList.value.map((item) => {
|
||||
// return {
|
||||
// name: item.name,
|
||||
// count: res[item.key] ? res[item.key] : 0
|
||||
// };
|
||||
// });
|
||||
// })
|
||||
// .catch((err) => {});
|
||||
// };
|
||||
// countWay();
|
||||
// GzrycountCrl();
|
||||
// getcountCrl();
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.entrance {
|
||||
position: absolute;
|
||||
width: 596px;
|
||||
height: 471px;
|
||||
background: url("~@/assets/images/tc/bg.png");
|
||||
z-index: 9999;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
padding: 20px 0;
|
||||
.cloes {
|
||||
width: 23px;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 92%;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.bt {
|
||||
margin-top: 14px;
|
||||
|
||||
.headline {
|
||||
width: 70%;
|
||||
background: url("~@/assets/images/tc/bt.png");
|
||||
line-height: 38px;
|
||||
background-repeat: no-repeat;
|
||||
padding-left: 35px;
|
||||
font-size: 16px;
|
||||
font-family: "微软雅黑";
|
||||
font-weight: 700;
|
||||
}
|
||||
.headbut {
|
||||
width: 159px;
|
||||
margin-right: 20px;
|
||||
height: 43px;
|
||||
line-height: 43px;
|
||||
text-align: center;
|
||||
background: url("~@/assets/images/streetBi/wxz.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
.contentLeft {
|
||||
width: 50%;
|
||||
.leftImg {
|
||||
width: 97px;
|
||||
height: 98px;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.leftMag {
|
||||
font-size: 20px;
|
||||
height: 98px;
|
||||
align-content: space-around;
|
||||
margin-left: 10px;
|
||||
|
||||
.ld {
|
||||
font-family: "YSBTH";
|
||||
background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.name {
|
||||
font-family: "方正黑体";
|
||||
}
|
||||
}
|
||||
.dutyList {
|
||||
padding-left: 16px;
|
||||
margin-bottom: 5px;
|
||||
.dutyImg {
|
||||
width: 27px;
|
||||
}
|
||||
.occupation {
|
||||
font-size: 20px;
|
||||
font-family: "方正黑体";
|
||||
width: calc(100% - 70px);
|
||||
.number {
|
||||
color: #02fafb;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.contentRight {
|
||||
width: 50%;
|
||||
padding: 0 20px;
|
||||
.right {
|
||||
font-size: 18px;
|
||||
font-family: "方正黑体";
|
||||
margin-bottom: 11px;
|
||||
.number {
|
||||
width: 40%;
|
||||
color: #02fafb;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
145
src/views/home/components/mapecharts.vue
Normal file
145
src/views/home/components/mapecharts.vue
Normal file
@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div class="map-container">
|
||||
<div ref="chartRef" class="chart"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
import 'echarts-gl'
|
||||
|
||||
const chartRef = ref(null)
|
||||
let chart = null
|
||||
|
||||
const initChart = async () => {
|
||||
// 使用require方式导入静态资源
|
||||
const baseImg = require('@/assets/images/map-marker.svg')
|
||||
|
||||
try {
|
||||
// 确保图片加载完成
|
||||
await new Promise((resolve, reject) => {
|
||||
const img = new Image()
|
||||
img.onload = resolve
|
||||
img.onerror = reject
|
||||
img.src = baseImg
|
||||
})
|
||||
|
||||
let geoJson = require('./511202.json')
|
||||
chart = echarts.init(chartRef.value)
|
||||
echarts.registerMap('myMap', geoJson)
|
||||
|
||||
// 异步加载撒点数据
|
||||
const markerData = [
|
||||
{ name: '站点1', value: [102.651727, 30.117088, 3] },
|
||||
{ name: '站点2', value: [102.527442, 30.108846, 3] },
|
||||
{ name: '站点3', value: [102.801965, 30.100063, 3] },
|
||||
{ name: '站点4', value: [102.711411, 30.158424, 3] },
|
||||
{ name: '站点5', value: [102.579582, 30.174818, 3] }
|
||||
]
|
||||
|
||||
const option = {
|
||||
geo3D: {
|
||||
map: 'myMap',
|
||||
regionHeight: 6,
|
||||
shading: 'realistic',
|
||||
realisticMaterial: {
|
||||
roughness: 0.2,
|
||||
metalness: 0
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'rgba(1,59,110,0.2)',
|
||||
opacity: 0.9,
|
||||
borderWidth: 1,
|
||||
borderColor: '#61CFF8',
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'rgba(1,59,110,0.5)',
|
||||
borderWidth: 10,
|
||||
borderColor: 'rgba(10,148,184,1)'
|
||||
}
|
||||
},
|
||||
light: {
|
||||
main: {
|
||||
color: '#fff',
|
||||
intensity: 1,
|
||||
shadow: true,
|
||||
shadowQuality: 'high',
|
||||
alpha: 25,
|
||||
beta: 20
|
||||
},
|
||||
ambient: {
|
||||
color: '#fff',
|
||||
intensity: 0.6
|
||||
}
|
||||
},
|
||||
viewControl: {
|
||||
distance: 150,
|
||||
alpha: 46,
|
||||
beta: 30,
|
||||
},
|
||||
postEffect: {
|
||||
enable: true,
|
||||
bloom: {
|
||||
enable: true,
|
||||
intensity: 0.1
|
||||
}
|
||||
},
|
||||
temporalSuperSampling: {
|
||||
enable: true
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
type: 'scatter3D',
|
||||
coordinateSystem: 'geo3D',
|
||||
symbol: 'image://' + baseImg,
|
||||
symbolSize: [40, 40],
|
||||
itemStyle: {
|
||||
color: '#00f0ff',
|
||||
opacity: 1
|
||||
},
|
||||
data: markerData
|
||||
}]
|
||||
}
|
||||
|
||||
// 确保DOM已经渲染完成
|
||||
await nextTick()
|
||||
chart.setOption(option)
|
||||
} catch (error) {
|
||||
console.error('地图初始化失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleResize = () => {
|
||||
chart?.resize()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initChart()
|
||||
window.addEventListener('resize', handleResize)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize)
|
||||
chart?.dispose()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
280
src/views/home/components/wanringAnyse.vue
Normal file
280
src/views/home/components/wanringAnyse.vue
Normal file
@ -0,0 +1,280 @@
|
||||
<template>
|
||||
<div class="warning-analysis">
|
||||
<div class="chart-section">
|
||||
<h2 class="section-title">车辆预警分析</h2>
|
||||
<div ref="vehicleChartRef" class="chart-container"></div>
|
||||
</div>
|
||||
<div class="chart-section">
|
||||
<h2 class="section-title">人员预警分析</h2>
|
||||
<div ref="personChartRef" class="chart-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { choseRbgb } from "@/utils/tools";
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import { jczgetYjbqtj } from "@/api/mosty-jcz";
|
||||
import * as echarts from "echarts";
|
||||
|
||||
const vehicleChartRef = ref(null);
|
||||
const personChartRef = ref(null);
|
||||
let vehicleChart = null;
|
||||
let personChart = null;
|
||||
|
||||
const createChartOption = (data, colors) => {
|
||||
return {
|
||||
title: {
|
||||
text: "100",
|
||||
subtext: "总数",
|
||||
left: "20%",
|
||||
top: "center",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 24,
|
||||
fontWeight: "normal"
|
||||
},
|
||||
subtextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
legend: {
|
||||
orient: "vertical",
|
||||
left: "60%",
|
||||
top: "center",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
rich: {
|
||||
value: {
|
||||
color: "#fff"
|
||||
},
|
||||
percentage: {
|
||||
padding: [0, 0, 0, 10]
|
||||
},
|
||||
blue: {
|
||||
color: colors[0]
|
||||
},
|
||||
lightBlue: {
|
||||
color: colors[1]
|
||||
},
|
||||
orange: {
|
||||
color: colors[2]
|
||||
},
|
||||
green: {
|
||||
color: colors[3]
|
||||
}
|
||||
}
|
||||
},
|
||||
formatter: (name) => {
|
||||
const item = data.find((d) => d.name === name);
|
||||
return `${name} ${item.value} {${item.colorType}|(${item.value}%)}`;
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["55%", "70%"],
|
||||
center: ["28%", "50%"],
|
||||
data: data.map((item) => ({
|
||||
...item,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: item.color[0] },
|
||||
{ offset: 1, color: item.color[1] }
|
||||
])
|
||||
}
|
||||
})),
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
scale: false,
|
||||
focus: "none"
|
||||
},
|
||||
z: 2
|
||||
},
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["65%", "85%"],
|
||||
center: ["28%", "50%"],
|
||||
data: data.map((item) => ({
|
||||
...item,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: item.color1[0] },
|
||||
{ offset: 1, color: item.color1[1] }
|
||||
])
|
||||
}
|
||||
})),
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
scale: false,
|
||||
focus: "none"
|
||||
},
|
||||
z: 1,
|
||||
silent: true
|
||||
}
|
||||
]
|
||||
};
|
||||
};
|
||||
const randomHexColor = () => {
|
||||
return "#" + Math.floor(Math.random() * 16777215).toString(16);
|
||||
};
|
||||
|
||||
const initCharts = async () => {
|
||||
vehicleChart = echarts.init(vehicleChartRef.value);
|
||||
personChart = echarts.init(personChartRef.value);
|
||||
const colors = ["#00f0ff", "#0066ff", "#ff9900", "#00cc66"];
|
||||
// 车辆预警数据
|
||||
const res = await jczgetYjbqtj({ yjLx: 1 });
|
||||
const res2 = await jczgetYjbqtj({ yjLx: 2 });
|
||||
console.log(res);
|
||||
const vehicleData = res.map((item) => {
|
||||
const color = randomHexColor();
|
||||
const color2 = randomHexColor();
|
||||
return {
|
||||
value: item.sl,
|
||||
name: item.yjbq,
|
||||
// colorType: color,
|
||||
color: [color, color2],
|
||||
color1: [choseRbgb(color, 0.3), choseRbgb(color2, 0.3)]
|
||||
};
|
||||
});
|
||||
|
||||
// [
|
||||
// {
|
||||
// value: 25,
|
||||
// name: "盗窃车辆",
|
||||
// colorType: "blue",
|
||||
// color: ["#00f0ff", "#00a0cc"],
|
||||
// color1: [choseRbgb("#00f0ff", 0.3), choseRbgb("#00a0cc", 0.3)]
|
||||
// },
|
||||
// {
|
||||
// value: 30,
|
||||
// name: "车牌与车辆不符",
|
||||
// colorType: "lightBlue",
|
||||
// color: ["#0066ff", "#0044cc"],
|
||||
// color1: [choseRbgb("#0066ff", 0.3), choseRbgb("#0044cc", 0.3)]
|
||||
// },
|
||||
// {
|
||||
// value: 17,
|
||||
// name: "车辆超高",
|
||||
// colorType: "orange",
|
||||
// color: ["#ff9900", "#cc7a00"],
|
||||
// color1: [choseRbgb("#ff9900", 0.3), choseRbgb("#cc7a00", 0.3)]
|
||||
// },
|
||||
// {
|
||||
// value: 28,
|
||||
// name: "车辆超限",
|
||||
// colorType: "green",
|
||||
// color: ["#00cc66", "#009944"],
|
||||
// color1: [choseRbgb("#00cc66", 0.3), choseRbgb("#009944", 0.3)]
|
||||
// }
|
||||
// ];
|
||||
|
||||
// 人员预警数据
|
||||
const personData = res2.map((item) => {
|
||||
const color = randomHexColor();
|
||||
const color2 = randomHexColor();
|
||||
return {
|
||||
value: item.sl,
|
||||
name: item.yjbq,
|
||||
// colorType: color,
|
||||
color: [color, color2],
|
||||
color1: [choseRbgb(color, 0.3), choseRbgb(color2, 0.3)]
|
||||
};
|
||||
});
|
||||
// [
|
||||
// {
|
||||
// value: 25,
|
||||
// name: "涉稳人员",
|
||||
// colorType: "blue",
|
||||
// color: ["#00f0ff", "#00a0cc"],
|
||||
// color1: [choseRbgb("#00f0ff", 0.3), choseRbgb("#00a0cc", 0.3)]
|
||||
// },
|
||||
// {
|
||||
// value: 30,
|
||||
// name: "涉毒人员",
|
||||
// colorType: "lightBlue",
|
||||
// color: ["#0066ff", "#0044cc"],
|
||||
// color1: [choseRbgb("#0066ff", 0.3), choseRbgb("#0044cc", 0.3)]
|
||||
// },
|
||||
// {
|
||||
// value: 17,
|
||||
// name: "涉黄人员",
|
||||
// colorType: "orange",
|
||||
// color: ["#ff9900", "#cc7a00"],
|
||||
// color1: [choseRbgb("#ff9900", 0.3), choseRbgb("#cc7a00", 0.3)]
|
||||
// },
|
||||
// {
|
||||
// value: 28,
|
||||
// name: "前科人员",
|
||||
// colorType: "green",
|
||||
// color: ["#00cc66", "#009944"],
|
||||
// color1: [choseRbgb("#00cc66", 0.3), choseRbgb("#009944", 0.3)]
|
||||
// }
|
||||
// ];
|
||||
vehicleChart.setOption(createChartOption(vehicleData, colors));
|
||||
personChart.setOption(createChartOption(personData, colors));
|
||||
};
|
||||
|
||||
const handleResize = () => {
|
||||
vehicleChart?.resize();
|
||||
personChart?.resize();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initCharts();
|
||||
window.addEventListener("resize", handleResize);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener("resize", handleResize);
|
||||
vehicleChart?.dispose();
|
||||
personChart?.dispose();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.warning-analysis {
|
||||
padding: 20px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.chart-section {
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
background: linear-gradient(0deg, #59a6f4 0%, #ffffff 90%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.section-title::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 8px;
|
||||
height: 16px;
|
||||
background: url("~@/assets/images/bg_02.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
height: calc(100% - 40px);
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
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