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>
|
||||
149
src/views/home/index.vue
Normal file
149
src/views/home/index.vue
Normal file
@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<div class="homeBox">
|
||||
<GdMap></GdMap>
|
||||
<!-- 头部 -->
|
||||
<Head></Head>
|
||||
<!-- 左边 内容-->
|
||||
<div class="home-aside asideL">
|
||||
<div class="asideL-top">
|
||||
<div class="common-title">数据采集</div>
|
||||
<div class="comom-cnt">
|
||||
<Collection></Collection>
|
||||
</div>
|
||||
</div>
|
||||
<div class="asideL-bottom">
|
||||
<div class="common-title">人员预警</div>
|
||||
<div class="comom-cnt">
|
||||
<!-- <Warning></Warning> -->
|
||||
<PeoWarning />
|
||||
</div>
|
||||
</div>
|
||||
<div class="asideL-bottom">
|
||||
<div class="common-title">车辆预警</div>
|
||||
<div class="comom-cnt">
|
||||
<!-- <Warning></Warning> -->
|
||||
<CarWarning />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右边 内容-->
|
||||
<div class="home-aside asideR">
|
||||
<div class="asideL-top">
|
||||
<div class="common-title">值班备勤</div>
|
||||
<div class="comom-cnt">
|
||||
<BeOnDuty></BeOnDuty>
|
||||
</div>
|
||||
</div>
|
||||
<div class="asideL-bottom">
|
||||
<div class="common-title">预警统计分析</div>
|
||||
<div class="comom-cnt">
|
||||
<WanringAnyse></WanringAnyse>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Entrance v-if="showEntrance" :JczData="JczData" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import Head from "./layout/head.vue";
|
||||
import Collection from "./components/collection.vue";
|
||||
// import Warning from "./components/warning.vue";
|
||||
import CarWarning from "./components/CarWarning.vue";
|
||||
import PeoWarning from "./components/PeoWarning.vue";
|
||||
import BeOnDuty from "./components/beonDuty.vue";
|
||||
import Entrance from "./components/entrance.vue";
|
||||
import WanringAnyse from "./components/wanringAnyse.vue";
|
||||
import { jczgetJczList } from "@/api/mosty-jcz";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
|
||||
import { ref, onMounted } from "vue";
|
||||
//获取所有检查站
|
||||
const getjczgetJczList = () => {
|
||||
jczgetJczList({}).then((res) => {
|
||||
const point = res.filter((item) => item.jd && item.wd);
|
||||
const icon = require("@/assets/images/z.png");
|
||||
emitter.emit("addPointArea", { coords: point, icon, flag: "jczMap_hm" });
|
||||
});
|
||||
};
|
||||
getjczgetJczList();
|
||||
const JczData = ref();
|
||||
const showEntrance = ref(false);
|
||||
onMounted(() => {
|
||||
emitter.on("showJcz", (res) => {
|
||||
if (res) {
|
||||
showEntrance.value = true;
|
||||
JczData.value = res;
|
||||
} else {
|
||||
showEntrance.value = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.homeBox {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
.home-aside {
|
||||
overflow: hidden;
|
||||
z-index: 3;
|
||||
width: 442px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
height: calc(100vh - 67px);
|
||||
top: 65px;
|
||||
background: #0e1b29;
|
||||
}
|
||||
// 左边
|
||||
.asideL {
|
||||
left: 0;
|
||||
.asideL-top {
|
||||
height: 480px;
|
||||
background: url("~@/assets/images/border_L_T.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.asideL-bottom {
|
||||
height: calc((100% - 505px) / 2);
|
||||
margin-top: 10px;
|
||||
background: url("~@/assets/images/border_R_T.png") no-repeat center center;
|
||||
// background: url("~@/assets/images/border_L_T.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
// 右边
|
||||
.asideR {
|
||||
right: 0;
|
||||
padding-right: 10px;
|
||||
box-sizing: border-box;
|
||||
.asideL-top {
|
||||
height: 40%;
|
||||
background: url("~@/assets/images/border_R_T.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.asideL-bottom {
|
||||
height: 60%;
|
||||
background: url("~@/assets/images/border_R_B.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// 公用
|
||||
.common-title {
|
||||
padding: 0 54px;
|
||||
box-sizing: border-box;
|
||||
font-size: 22px;
|
||||
font-family: "YSBTH";
|
||||
background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.comom-cnt {
|
||||
height: calc(100% - 30px);
|
||||
padding: 4px 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
178
src/views/home/layout/head.vue
Normal file
178
src/views/home/layout/head.vue
Normal file
@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<div class="home-head-box relative">
|
||||
<div class="time absolute">
|
||||
<div class="f20">{{ datatime }}</div>
|
||||
<div class="f18 pl104">{{ hour + ":" + minute + ":" + second }}</div>
|
||||
</div>
|
||||
<div class="title absolute" @click="goPath">{{ props.title }}</div>
|
||||
<div class="wd absolute">
|
||||
<el-icon size="25px" style="top: 6px" color="#86C8EB"><Sunny /></el-icon>
|
||||
<span> 温度 1~7°C </span>
|
||||
</div>
|
||||
<div class="zbbb" v-if="query" @click="show = true">值班报备</div>
|
||||
</div>
|
||||
<el-dialog v-model="show" title="Shipping address">
|
||||
<div style="height: 50vh; overflow: auto">
|
||||
<zbbb
|
||||
:row="row"
|
||||
@close="close"
|
||||
:dic="{
|
||||
D_BZ_RYMFJLB,
|
||||
D_BZ_JYQXFL,
|
||||
D_BZ_XFQDJ,
|
||||
D_BZ_SF,
|
||||
D_BZ_JLLX,
|
||||
D_QW_BBZT,
|
||||
D_QW_BC_KTS
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRouter } from "vue-router";
|
||||
import { getRecentDay, timeValidate } from "@/utils/tools.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
defineProps,
|
||||
onUnmounted,
|
||||
getCurrentInstance
|
||||
} from "vue";
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
const {
|
||||
D_BZ_RYMFJLB,
|
||||
D_BZ_JYQXFL,
|
||||
D_BZ_XFQDJ,
|
||||
D_BZ_SF,
|
||||
D_BZ_JLLX,
|
||||
D_QW_BBZT,
|
||||
D_QW_BC_KTS
|
||||
} = proxy.$dict(
|
||||
"D_BZ_RYMFJLB",
|
||||
"D_BZ_JYQXFL",
|
||||
"D_BZ_XFQDJ",
|
||||
"D_BZ_SF",
|
||||
"D_BZ_JLLX",
|
||||
"D_QW_BBZT",
|
||||
"D_QW_BC_KTS"
|
||||
);
|
||||
import zbbb from "./zbbb.vue";
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: "林芝市检查站综合管理"
|
||||
},
|
||||
query: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
});
|
||||
const show = ref(false);
|
||||
const close = () => {
|
||||
show.value = false;
|
||||
};
|
||||
const datatime = ref(getRecentDay(0));
|
||||
const minute = ref("00"); //分
|
||||
const second = ref("00"); //秒
|
||||
const hour = ref("00"); //时
|
||||
const day = ref(0);
|
||||
const timersfm = ref(null);
|
||||
|
||||
const router = useRouter();
|
||||
const row = ref();
|
||||
onMounted(() => {
|
||||
emitter.on("chengZ", (res) => {
|
||||
row.value = res;
|
||||
console.log(res);
|
||||
});
|
||||
timersfm.value = setInterval(() => {
|
||||
CurrentTime();
|
||||
}, 1000);
|
||||
});
|
||||
// 获取时分秒
|
||||
function CurrentTime() {
|
||||
const date = new Date();
|
||||
hour.value = date.getHours();
|
||||
minute.value = date.getMinutes();
|
||||
second.value = date.getSeconds();
|
||||
day.value = day.value < 10 ? "0" + day.value : day.value;
|
||||
hour.value = hour.value < 10 ? "0" + hour.value : hour.value;
|
||||
minute.value = minute.value < 10 ? "0" + minute.value : minute.value;
|
||||
second.value = second.value < 10 ? "0" + second.value : second.value;
|
||||
}
|
||||
|
||||
function goPath() {
|
||||
router.push("/editPassword");
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.zdybg {
|
||||
width: 100%;
|
||||
height: 65px;
|
||||
position: relative;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
z-index: 2;
|
||||
}
|
||||
.home-head-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 65px;
|
||||
z-index: 2;
|
||||
background: #0e1b29;
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
height: 138px;
|
||||
z-index: -1;
|
||||
background: url("~@/assets/images/home_head.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.title {
|
||||
font-size: 36px;
|
||||
left: 50%;
|
||||
top: 10px;
|
||||
transform: translateX(-50%);
|
||||
font-family: "YSBTH";
|
||||
background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
.time {
|
||||
font-family: "DigifaceWide";
|
||||
color: #fff;
|
||||
left: 25%;
|
||||
top: 10px;
|
||||
}
|
||||
.wd {
|
||||
right: 25%;
|
||||
top: 12px;
|
||||
font-size: 16px;
|
||||
font-family: "DigifaceWide";
|
||||
color: #fff;
|
||||
}
|
||||
.zbbb {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 14px;
|
||||
font-size: 16px;
|
||||
width: 162px;
|
||||
height: 48px;
|
||||
text-align: center;
|
||||
line-height: 48px;
|
||||
font-size: 16px;
|
||||
background: url("~@/assets/images/btnbb.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
620
src/views/home/layout/zbbb.vue
Normal file
620
src/views/home/layout/zbbb.vue
Normal file
@ -0,0 +1,620 @@
|
||||
<template>
|
||||
<div></div>
|
||||
|
||||
<div class="cntinfo">
|
||||
<div class="flex align-center just-between box">
|
||||
<div class="flex align-center">
|
||||
报备单位：
|
||||
<MOSTY.Department
|
||||
v-model="listQuery.ssbmdm"
|
||||
placeholder="请选择部门"
|
||||
@getDepValue="changeDep"
|
||||
/>
|
||||
</div>
|
||||
<!-- v-if="['add', 'edit'].includes(pageType)" -->
|
||||
<el-button size="small" type="primary" @click="_onSave">保存</el-button>
|
||||
</div>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
class="info"
|
||||
:model="listQuery"
|
||||
:inline="true"
|
||||
:rules="rules"
|
||||
>
|
||||
<div class="bblxItem">
|
||||
<div class="btItem">检查站设置</div>
|
||||
<div class="info">
|
||||
<el-form-item>
|
||||
<ChooseTable
|
||||
:deptment="deptment"
|
||||
v-if="!isDetail"
|
||||
:configer="{
|
||||
width: 800,
|
||||
lx: 'jcz',
|
||||
isRadio: true
|
||||
}"
|
||||
v-model="listQuery.jczList"
|
||||
:dic="props.dic"
|
||||
/>
|
||||
|
||||
<div class="peolist" v-if="listQuery.jczList">
|
||||
<el-tag type="primary" :key="item">{{
|
||||
listQuery.jczList.jczmc
|
||||
}}</el-tag>
|
||||
</div>
|
||||
<div class="peolist" v-if="listQuery.jczmc && !listQuery.jczList">
|
||||
<el-tag type="primary" :key="item">{{ listQuery.jczmc }}</el-tag>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bblxItem">
|
||||
<div class="btItem">班次设置</div>
|
||||
<div class="info">
|
||||
<el-form-item prop="kssj">
|
||||
<el-time-picker
|
||||
v-model="listQuery.bcKssj"
|
||||
:disabled="isDetail"
|
||||
placeholder="开始时间"
|
||||
format="HH:mm:ss"
|
||||
value-format="HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="bcKts">
|
||||
<el-select
|
||||
clearable
|
||||
v-model="listQuery.bcKtsDict"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in dic.D_QW_BC_KTS"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="jssj">
|
||||
<el-time-picker
|
||||
v-model="listQuery.bcJssj"
|
||||
:disabled="isDetail"
|
||||
format="HH:mm:ss"
|
||||
placeholder="结束时间"
|
||||
value-format="HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bblxItem">
|
||||
<div class="btItem">负责人</div>
|
||||
<div class="info">
|
||||
<el-form-item>
|
||||
<ChooseTable
|
||||
:deptment="deptment"
|
||||
@change="handleFzr"
|
||||
v-if="!isDetail"
|
||||
:configer="{
|
||||
width: 700,
|
||||
lx: 'mj',
|
||||
rowKey: 'id',
|
||||
isRadio: true
|
||||
}"
|
||||
:dic="props.dic"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="fzrXm">
|
||||
<el-input
|
||||
readonly
|
||||
v-model="listQuery.fzrXm"
|
||||
placeholder="负责人"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="fzrSfzh">
|
||||
<el-input
|
||||
readonly
|
||||
v-model="listQuery.fzrSfzh"
|
||||
placeholder="身份证"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="fzrLxdh">
|
||||
<el-input
|
||||
readonly
|
||||
v-model="listQuery.fzrLxdh"
|
||||
placeholder="负责人电话"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bblxItem">
|
||||
<div class="btItem">当班人员</div>
|
||||
<div class="info">
|
||||
<div style="width: 100%">
|
||||
<el-form-item prop="mjData" label="当班民警">
|
||||
<div class="flex">
|
||||
<div class="num">
|
||||
{{ mjData ? mjData.length : 0 }}
|
||||
</div>
|
||||
<ChooseTable
|
||||
:deptment="deptment"
|
||||
v-if="!isDetail"
|
||||
:dic="props.dic"
|
||||
:configer="{
|
||||
lx: 'mj',
|
||||
rowKey: 'ryid',
|
||||
placement: 'top-start'
|
||||
}"
|
||||
v-model="mjData"
|
||||
/>
|
||||
<div class="peolist">
|
||||
<el-tag type="primary" v-for="item in mjData" :key="item">{{
|
||||
item.jlxm || item.xm
|
||||
}}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<el-form-item prop="fjData" label="当班辅警">
|
||||
<div class="flex">
|
||||
<div class="num">
|
||||
{{ fjData ? fjData.length : 0 }}
|
||||
</div>
|
||||
<!-- :deptment="props.dep"
|
||||
:dic="props.dic" -->
|
||||
<ChooseTable
|
||||
:deptment="deptment"
|
||||
:dic="props.dic"
|
||||
v-if="!isDetail"
|
||||
:configer="{ lx: 'fj', placement: 'top-start' }"
|
||||
v-model="fjData"
|
||||
/>
|
||||
<div class="peolist">
|
||||
<el-tag type="primary" v-for="item in fjData" :key="item">{{
|
||||
item.jlxm || item.xm
|
||||
}}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bblxItem">
|
||||
<div class="btItem">装备</div>
|
||||
<div class="info">
|
||||
<div style="width: 100%">
|
||||
<el-form-item prop="zdList" label="智能装备">
|
||||
<div class="flex">
|
||||
<div class="num">
|
||||
{{ listQuery.zdList ? listQuery.zdList.length : 0 }}
|
||||
</div>
|
||||
<ChooseTable
|
||||
:dic="props.dic"
|
||||
v-if="!isDetail"
|
||||
:deptment="deptment"
|
||||
:configer="{
|
||||
lx: 'znzb',
|
||||
rowKey: 'id',
|
||||
placement: 'top-start'
|
||||
}"
|
||||
v-model="listQuery.zdList"
|
||||
/>
|
||||
<div class="peolist">
|
||||
<el-tag
|
||||
type="primary"
|
||||
v-for="item in listQuery.zdList"
|
||||
:key="item"
|
||||
>{{ item.sbmc }}</el-tag
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<!-- <div style="width: 100%">
|
||||
<el-form-item prop="jyqxList" label="警用器械">
|
||||
<div class="flex">
|
||||
<div class="num">
|
||||
{{ listQuery.jyqxList ? listQuery.jyqxList.length : 0 }}
|
||||
</div>
|
||||
|
||||
<ChooseTable
|
||||
:deptment="deptment"
|
||||
v-if="!isDetail"
|
||||
:dic="props.dic"
|
||||
:configer="{ lx: 'jyqx', placement: 'top-start' }"
|
||||
v-model="listQuery.jyqxList"
|
||||
/>
|
||||
<div class="peolist">
|
||||
<el-tag
|
||||
type="primary"
|
||||
v-for="item in listQuery.jyqxList"
|
||||
:key="item"
|
||||
>{{ item.qxMc }}</el-tag
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<el-form-item
|
||||
v-for="(item, idx) in listQuery.jyqxList"
|
||||
:key="idx"
|
||||
:label="item.qxMc"
|
||||
>
|
||||
<el-input-number
|
||||
:disabled="isDetail"
|
||||
style="width: 100%"
|
||||
v-model="item.qxsl"
|
||||
class="mx-4"
|
||||
:min="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div> -->
|
||||
<div style="width: 100%">
|
||||
<el-form-item prop="clList" label="巡防车辆">
|
||||
<div class="flex">
|
||||
<div class="num">
|
||||
{{ listQuery.clList ? listQuery.clList.length : 0 }}
|
||||
</div>
|
||||
<ChooseTable
|
||||
:deptment="deptment"
|
||||
v-if="!isDetail"
|
||||
:dic="props.dic"
|
||||
:configer="{
|
||||
lx: 'cl',
|
||||
rowKey: 'id',
|
||||
placement: 'top-start'
|
||||
}"
|
||||
v-model="listQuery.clList"
|
||||
/>
|
||||
<div class="peolist">
|
||||
<el-tag
|
||||
type="primary"
|
||||
v-for="item in listQuery.clList"
|
||||
:key="item"
|
||||
>{{ item.cph }}</el-tag
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bblxItem">
|
||||
<div class="btItem">警用器械</div>
|
||||
<div class="info">
|
||||
<el-form-item>
|
||||
<div
|
||||
v-for="(item, index) in listQuery.qxList"
|
||||
:key="index"
|
||||
style="width: 50%; margin-bottom: 10px"
|
||||
>
|
||||
<div class="flex">
|
||||
<div style="width: 30%">{{ item.qxmc }}：</div>
|
||||
<el-input-number v-model="item.qxsl" :step="1" />
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, getCurrentInstance, onMounted, watch } from "vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { jczsavel, Xfbbupdate } from "@/api/mosty-jcz.js";
|
||||
import { ElMessage } from "element-plus";
|
||||
import ChooseTable from "@/components/chooseList/chooseTable.vue";
|
||||
import { timeValidate } from "@/utils/tools.js";
|
||||
const { proxy } = getCurrentInstance();
|
||||
// const { D_BZ_JYQXFL } = proxy.$dict("D_BZ_JYQXFL");
|
||||
const props = defineProps({
|
||||
dic: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isDetail: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
row: { type: Object, default: () => {} }
|
||||
});
|
||||
|
||||
const emit = defineEmits(["close"]);
|
||||
const formRef = ref(null);
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const pageInfo = {
|
||||
edit: {
|
||||
title: "编辑",
|
||||
url: ""
|
||||
},
|
||||
add: {
|
||||
title: "新增",
|
||||
url: ""
|
||||
},
|
||||
detail: {
|
||||
title: "详情"
|
||||
}
|
||||
};
|
||||
let pageType = ref("add");
|
||||
const mjData = ref([]);
|
||||
const fjData = ref([]);
|
||||
const ChegeMj = (val) => {
|
||||
const data = val.map((item) => {
|
||||
return {
|
||||
xfllld: item.id,
|
||||
ryXm: item.xm,
|
||||
rysfzh: item.sfzh,
|
||||
ryJzlx: item.fl,
|
||||
ryMfjilb: item.ryid,
|
||||
ryLxdh: item.lxdh
|
||||
};
|
||||
});
|
||||
return data;
|
||||
};
|
||||
const fz = (val) => {
|
||||
const data = val.map((item) => {
|
||||
return {
|
||||
id: item.xfllld,
|
||||
xm: item.ryXm,
|
||||
sfzh: item.rysfzh,
|
||||
fl: item.ryJzlx,
|
||||
ryid: item.ryMfjilb,
|
||||
lxdh: item.ryLxdh
|
||||
};
|
||||
});
|
||||
return data;
|
||||
};
|
||||
// 初始化数据
|
||||
const init = (type) => {
|
||||
pageType.value = type;
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
console.log(props.row, "=====================================");
|
||||
|
||||
if (props.row) {
|
||||
listQuery.value = { ...props.row };
|
||||
if (props.row.ryList.length > 0) {
|
||||
const data = fz(props.row.ryList);
|
||||
mjData.value = data.filter((item) => item.fl == "01");
|
||||
fjData.value = data.filter((item) => item.fl == "02");
|
||||
}
|
||||
if (listQuery.value.qxList.length == 0) {
|
||||
listQuery.value.qxList = props.dic.D_BZ_JYQXFL.map((item) => {
|
||||
return { qxmc: item.label, qxsl: 0 };
|
||||
});
|
||||
}
|
||||
} else {
|
||||
pageType.value = "add";
|
||||
|
||||
listQuery.value.qxList = props.dic.D_BZ_JYQXFL.map((item) => {
|
||||
return { qxmc: item.label, qxsl: 0 };
|
||||
});
|
||||
}
|
||||
};
|
||||
watch(
|
||||
() => props.row,
|
||||
() => {
|
||||
init();
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
// 验证规则
|
||||
const rules = ref({
|
||||
spbt: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入标题",
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
});
|
||||
//保存
|
||||
|
||||
const _onSave = () => {
|
||||
const data = [...mjData.value, ...fjData.value];
|
||||
|
||||
listQuery.value.ryList = ChegeMj(data);
|
||||
const time = new Date();
|
||||
listQuery.value.bbSjBbrq = timeValidate(time);
|
||||
switch (listQuery.value.bcKtsDict) {
|
||||
case "01":
|
||||
listQuery.value.bcKts = 1;
|
||||
break;
|
||||
case "02":
|
||||
listQuery.value.bcKts = 2;
|
||||
case "03":
|
||||
listQuery.value.bcKts = 4;
|
||||
case "04":
|
||||
listQuery.value.bcKts = 5;
|
||||
case "05":
|
||||
listQuery.value.bcKts = 6;
|
||||
case "06":
|
||||
listQuery.value.bcKts = 7;
|
||||
case "07":
|
||||
listQuery.value.bcKts = 8;
|
||||
}
|
||||
if (listQuery.value.jczList) {
|
||||
listQuery.value.jczid = listQuery.value.jczList.id;
|
||||
listQuery.value.jczmc = listQuery.value.jczList.jczmc;
|
||||
}
|
||||
|
||||
if (pageType.value == "add") {
|
||||
jczsavel(listQuery.value).then((res) => {
|
||||
ElMessage({ message: "新增成功", type: "success" });
|
||||
emit("close");
|
||||
});
|
||||
} else {
|
||||
Xfbbupdate(listQuery.value).then((res) => {
|
||||
ElMessage({ message: "修改成功", type: "success" });
|
||||
emit("close");
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
//
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
|
||||
//获取数据
|
||||
const JczShow = ref(false);
|
||||
//负责人
|
||||
const handleFzr = (val) => {
|
||||
listQuery.value.fzrXm = val.xm;
|
||||
listQuery.value.fzrId = val.ryid;
|
||||
listQuery.value.fzrSfzh = val.sfzh;
|
||||
listQuery.value.fzrLxdh = val.lxdh;
|
||||
};
|
||||
const deptment = ref({});
|
||||
const changeDep = (val) => {
|
||||
deptment.value = val;
|
||||
};
|
||||
const changeJCZ = (val) => {
|
||||
console.log(val);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
.file {
|
||||
height: 400px;
|
||||
border: 1px solid #e9e9e9;
|
||||
// border-radius: ;
|
||||
color: #777575;
|
||||
// border-left: 0;
|
||||
}
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #f7fafb;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #e3e7ed;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo {
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
.bblxItem {
|
||||
width: 100%;
|
||||
line-height: 40px;
|
||||
min-height: 40px;
|
||||
display: flex;
|
||||
color: #000;
|
||||
.btItem {
|
||||
width: 180px;
|
||||
padding: 7px 0;
|
||||
background: #0000000a;
|
||||
margin-top: 1px;
|
||||
text-align: center;
|
||||
}
|
||||
.info {
|
||||
flex: 1;
|
||||
background: #0000000a;
|
||||
margin-top: 1px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
.gapline {
|
||||
height: 1px;
|
||||
border-top: 1px dashed #66cbff;
|
||||
margin: 4px 0;
|
||||
}
|
||||
.dl-car {
|
||||
min-width: 200px;
|
||||
display: inline-block;
|
||||
border: solid 1px #66cbff;
|
||||
margin: 20px 30px 0 0;
|
||||
padding: 0;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
dt {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #0380c0;
|
||||
padding: 0 10px 0 40px;
|
||||
box-sizing: border-box;
|
||||
font-weight: 600;
|
||||
box-sizing: border-box;
|
||||
border-bottom: solid 1px #66cbff;
|
||||
background: #e3f5ff;
|
||||
height: 30px;
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
.peo {
|
||||
border-bottom: solid 1px #01d608;
|
||||
background: #dbf3cf;
|
||||
color: #339d00;
|
||||
}
|
||||
}
|
||||
.dl-car::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: -18px;
|
||||
left: -18px;
|
||||
width: 52px;
|
||||
height: 49px;
|
||||
background: url("~@/assets/images/peo.png");
|
||||
}
|
||||
}
|
||||
.num {
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
border: 1px solid #bebebe;
|
||||
// background-color: #1b294c;
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.subBtn {
|
||||
padding-left: 100px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-form-item--default {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
::v-deep .el-form-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
::v-deep .el-form--inline .el-form-item {
|
||||
margin-right: 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.deBtn {
|
||||
padding: 0px 10px;
|
||||
background: rgb(35, 176, 241);
|
||||
border-radius: 18px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.box {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user