解决冲突

This commit is contained in:
13684185576
2025-12-05 10:12:13 +08:00
203 changed files with 83842 additions and 1196 deletions

View File

@ -1,34 +1,73 @@
<template>
<div class="homeBox" @click="handless">
<Head :title="query.name" :query="query.name"></Head>
<div class="homeBox">
<Head :title="query.name" :query="query.name" :JczMsg="JczMsg"></Head>
<div class="mainBox_jcz hidden flex">
<ul class="asideBox">
<li class="asideItem" v-for="(item, idx) in meun.leftMeun" :key="idx">
<div class="title">{{ item }}</div>
<div class="asideCnt" @click="handless">
<PeoCollection :jczId="query.id" v-if="item == '人员数据采集'"></PeoCollection>
<PlowStatistics :jczId="query.id" v-if="item == '流入流出统计'"></PlowStatistics>
<WarningCount :jczId="query.id" v-if="item == '预警统计'"></WarningCount>
<template v-if="JczMsg.zqlx == '1'">
<li class="asideItem" v-for="(item, idx) in meun.leftMeun" :key="idx">
<div class="title">{{ item }}</div>
<div class="asideCnt">
<PeoCollection :jczId="query.id" v-if="item == '人员数据采集'"></PeoCollection>
<PlowStatistics :jczId="query.id" v-if="item == '流入流出统计'"></PlowStatistics>
<WarningCount :jczId="query.id" v-if="item == '预警统计'"></WarningCount>
</div>
</li>
</template>
<template v-if="JczMsg.zqlx == '2'">
<div class="asideItem">
<div class="title">预警统计</div>
<div class="asideCnt">
<WarningCount :jczId="query.id"></WarningCount>
</div>
</div>
</li>
<div class="asideItems">
<div class="title">人员预警</div>
<div class="asideCnt">
<PeoWarning :jczId="query.id"></PeoWarning>
</div>
</div>
</template>
</ul>
<div class="mainBox">
<div class="main-top">
<VideoMore></VideoMore>
</div>
<div class="main-bottom">
<VideoFoot></VideoFoot>
<VideoFoot :JczMsg="JczMsg" v-show="JczMsg"></VideoFoot>
</div>
</div>
<ul class="asideBox">
<li class="asideItem" v-for="(item, idx) in meun.rightMeun" :key="idx">
<div class="title">{{ item }}</div>
<div class="asideCnt">
<BeOnDuty :jczId="query.id" v-if="item == '值班备勤'"></BeOnDuty>
<CarWarning :jczId="query.id" v-if="item == '车辆预警'"></CarWarning>
<PeoWarning :jczId="query.id" v-if="item == '人员预警'"></PeoWarning>
<template v-if="JczMsg.zqlx == '1'">
<li class="asideItem" v-for="(item, idx) in meun.rightMeun" :key="idx">
<div class="title">{{ item }}</div>
<div class="asideCnt">
<BeOnDuty :jczId="query.id" v-if="item == '值班备勤'"></BeOnDuty>
<CarWarning :jczId="query.id" v-if="item == '车辆预警'"></CarWarning>
<PeoWarning :jczId="query.id" v-if="item == '人员预警'"></PeoWarning>
</div>
</li>
</template>
<template v-if="JczMsg.zqlx == '2'">
<div class="asideItem">
<div class="title">流入流出统计</div>
<div class="asideCnt">
<PlowStatistics :jczId="query.id"></PlowStatistics>
</div>
</div>
</li>
<div class="asideItems">
<div class="title">车辆预警</div>
<div class="asideCnt">
<CarWarning :jczId="query.id"></CarWarning>
</div>
</div>
<!-- <CarWarning :jczId="query.id" v-if="item == '车辆预警'"></CarWarning> -->
<!-- <li class="asideItem" v-for="(item, idx) in meun.LxTowrightMeun" :key="idx">
</li> -->
</template>
</ul>
</div>
</div>
@ -46,14 +85,34 @@ import VideoMore from "./layout/VideoMore.vue";
import VideoFoot from "./layout/VideoFoot.vue";
import { useRoute } from "vue-router";
import { ref, onMounted, onUnmounted, reactive, computed } from "vue";
import {
JczselectById
} from "@/api/mosty-jcz";
import { template } from "lodash";
const router = useRoute();
const meun = reactive({
leftMeun: ["人员数据采集", "流入流出统计", "预警统计"],
rightMeun: ["值班备勤", "车辆预警", "人员预警"]
rightMeun: ["值班备勤", "车辆预警", "人员预警"],
LxTowleftMeun: ["流入流出统计", "人员预警",],
LxTowrightMeun: ["预警统计", "车辆预警"]
});
const query = computed(() => {
return router.query;
});
const JczMsg = ref({})
const getJczselectById = () => {
const id = router.query.id
JczselectById({ id: id }).then((res) => {
console.log(res);
JczMsg.value = res
}).catch((err) => {
});
}
onMounted(() => {
getJczselectById()
})
</script>
<style lang="scss" scoped>
@ -78,23 +137,31 @@ const query = computed(() => {
background-size: 100% 100%;
padding: 0 10px;
box-sizing: border-box;
}
.title {
height: 50px;
line-height: 50px;
padding-left: 20px;
font-size: 20px;
font-family: "YSBTH";
background: linear-gradient(0deg, #59a6f4 0%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.asideItems {
height: calc(100% / 3 *2);
background: url("~@/assets/images/border_R_B.png") no-repeat;
background-size: 100% 100%;
padding: 0 10px;
box-sizing: border-box;
}
.asideCnt {
height: calc(100% - 50px);
overflow: hidden;
overflow-y: auto;
}
.title {
height: 50px;
line-height: 50px;
padding-left: 20px;
font-size: 20px;
font-family: "YSBTH";
background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.asideCnt {
height: calc(100% - 50px);
overflow: hidden;
overflow-y: auto;
}
}
@ -105,11 +172,11 @@ const query = computed(() => {
.main-top {
background: url("~@/assets/images/bg_13.png") no-repeat;
background-size: 100% 100%;
height: 70%;
height: 45%;
}
.main-bottom {
height: 30%;
height: 55%;
background: url("~@/assets/images/bg_14.png") no-repeat;
background-size: 100% 100%;
}

View File

@ -2,11 +2,11 @@
<div class="warning-container">
<!-- 标签切换 -->
<div class="tab-container">
<div class="tab-item" @click="showchenge(1)" :class="{ active: show == 1 }">
<div class="tab-content">值班人员</div>
<div class="tab-item itemwxz" @click="showchenge(1)" :class="{ 'tab-itemxz': show == 1 }">
<div class="tab-content" @click="showchenge(1)">值班人员</div>
</div>
<div class="tab-item" @click="showchenge(2)" :class="{ active: show == 2 }">
<div class="tab-content">值班装备</div>
<div class="tab-item itemwxz" @click="showchenge(2)" :class="{ 'tab-itemxz': show ==2 }">
<div class="tab-content" @click="showchenge(2)">值班装备</div>
</div>
</div>
@ -94,9 +94,16 @@ const warningListValue = (res) => {
warningList.value.qxList = res.qxList && res.qxList.length > 0
? res.qxList.filter((item) => item.qxsl > 0)
: [];
warningList.value.ryList = res.ryList.length > 0 ? res.ryList : [];
warningList.value.clList = res.clList.length > 0 ? res.clList : [];
warningList.value.ryList =res.ryList&& res.ryList.length > 0 ? res.ryList : [];
warningList.value.clList = res.clList && res.clList.length > 0 ? res.clList : [];
if (res.tcList && res.tcList.length > 0&&res.zdList&&res.zdList.length > 0) {
warningList.value.sbList = [...res.tcList, ...res.zdList]
}else if (res.tcList && res.tcList.length > 0) {
warningList.value.sbList = res.tcList
} else if (res.zdList && res.zdList.length > 0) {
warningList.value.sbList = res.zdList
}
emitter.emit("chengZ", res);
} else {
warningList.value = res;
@ -122,31 +129,41 @@ getjczqueryById();
line-height: 24px;
position: relative;
cursor: pointer;
z-index: 2;
background: url("~@/assets/images/bg_08.png") no-repeat center center;
background-size: 100% 100%;
}
.tab-itemwxz {
}
.tab-itemxz {
background: url("~@/assets/images/bg_09.png") no-repeat center center;
background-size: 100% 100%;
}
.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::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%;
}
// .tab-item.active::before {
// background: url("~@/assets/images/bg_09.png") no-repeat center center;
// background-size: 100% 100%;
// }
.warning-list {
height: calc(100% - 50px);
@ -225,7 +242,8 @@ getjczqueryById();
font-size: 12px;
margin-left: 10px;
}
.white-text{
.white-text {
color: #fff;
}
</style>

View File

@ -10,7 +10,8 @@
:key="index"
>
<div class="warning-image">
<img :src="item.yjTp" alt="预警图片" />
<img :src="item.yjTp" alt="预警图片" v-if="item.yjTp&&!item.yjTp.includes('baidu')" />
<img src="@/assets/images/default_male.png" alt="预警图片" v-else/>
</div>
<div class="warning-info">
<div class="info-item">

View File

@ -10,7 +10,8 @@
:key="index"
>
<div class="warning-image">
<img :src="item.yjTp" alt="预警图片" />
<img :src="item.yjTp" alt="预警图片" v-if="item.yjTp&&!item.yjTp.includes('baidu')" />
<img src="@/assets/images/default_male.png" alt="预警图片" v-else/>
</div>
<div class="warning-info">
<div class="info-item">
@ -113,7 +114,7 @@ getPageList();
}
.warning-image {
width: 100px;
width: 80px;
height: 80px;
img {
width: 100%;

View File

@ -1,65 +1,191 @@
<template>
<div class="image-carousel">
<el-carousel style="height: 100%;" motion-blur indicator-position="none" @change="handleCarouselChange"
:autoplay="false">
<el-carousel-item v-for="(item, index) in listSxt" :key="index">
<div class="video-grid" v-if="activeIndex == index">
<div v-for="(items,indexs) in item" :key="indexs" class="video-cell">
<div class="iconFont" @click.stop="showchenge(items)">
<el-icon :size="20"><UploadFilled /></el-icon>
<div class="flex full-height" v-if="JczMsg.jczlx=='01'">
<div class="column-container">
<div class="gradient-title">过站人员</div>
<div class="search-container">
<el-input v-model="timeData.ryXm" placeholder="请输入姓名" class="search-input" clearable />
<el-date-picker v-model="timeData.time" type="daterange" unlink-panels range-separator="至"
start-placeholder="开始时间" end-placeholder="结束时间" :shortcuts="shortcuts" :size="size" />
<el-button type="primary" class="search-button">搜索</el-button>
</div>
<div class="waning-cards noScollLine">
<div class="warning-card" v-for="(item, index) in 20" :key="index">
<div class="warning-image">
<img :src="require('@/assets/images/default_male.png')" alt="抓拍图片" />
</div>
<div class="warning-info">
<div class="info-item">
<span class="label">姓名</span>
<span>老王</span>
<span class="tag">老王预警</span>
</div>
<div class="info-item align-center">
<span class="label">性别</span>
</div>
<div class="info-item">
<span class="label">相似度</span>
<span class="highlight">95%</span>
</div>
<div class="info-item">
<span class="label">抓拍时间</span>
<span>2025-10-10 10:00:00</span>
</div>
<div class="info-item align-center">
<span class="label nowrap">抓拍地址</span>
<span class="one_text_detail">上海市普陀区金沙江路 1518 </span>
</div>
</div>
<WsIframe :sbbh="items.sbbh" />
</div>
</div>
</el-carousel-item>
</el-carousel>
</div>
<div class="column-container">
<div class="gradient-title">过站车辆</div>
<div class="search-container">
<el-input v-model="clData.cph" placeholder="请输入车牌号" class="search-input" clearable />
<el-date-picker v-model="clData.time" type="daterange" unlink-panels range-separator="至"
start-placeholder="开始时间" end-placeholder="结束时间" :shortcuts="shortcuts" :size="size" />
<el-button type="primary" class="search-button">搜索</el-button>
</div>
<div class="waning-cards noScollLine" >
<div class="warning-card" v-for="(item, index) in pageData.tableData" :key="index">
<div class="warning-image">
<img :src="require('@/assets/images/car.png')" alt="抓拍图片" />
</div>
<div class="warning-info">
<div class="info-item">
<span class="label">车牌号</span>
<span>{{ item.cph }}</span>
<span class="tag">{{ item.bq }} </span>
</div>
<!-- <div class="info-item flex">
<span class="label">性别</span>
</div> -->
<div class="info-item">
<span class="label">相似度</span>
<span class="highlight">{{ item.xsd }}</span>
</div>
<div class="info-item">
<span class="label">抓拍时间</span>
<span>{{ item.time }}</span>
</div>
<div class="info-item align-center">
<span class="label nowrap">抓拍地址</span>
<span class="one_text_detail">{{ item.fx }}{{ item.dz }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-else>
<div>
<div>
<div style="display: flex;align-items: center;padding: 10px 0;">
<el-input v-model="timeData.ryXm" placeholder="请输入车牌号" style="width: 30%;margin-right: 10px;" clearable />
<el-date-picker v-model="timeData.time" type="daterange" range-separator="至" start-placeholder="开始时间"
end-placeholder="结束时间" style="width: 30%;;margin-right: 10px;" :size="size" />
<el-button type="primary">搜索</el-button>
</div>
</div>
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" tableHeight="35vh"
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
<template #tp="{ row }">
<el-image :src="row.tp" :preview-src-list="[row.tp]" alt="车辆类型" style="width: 80px; height: 100px;"/>
</template>
<!-- 操作 -->
<template #controls="{ row }">
<el-link type="primary" @click="addEdit('edit', row)">修改</el-link>
<el-link type="primary" @click="addEdit('detail', row)">详情</el-link>
<el-link type="primary" @click="delDictItem(row.id)">删除</el-link>
</template>
</MyTable>
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
...pageData.pageConfiger,
total: pageData.total
}"></Pages>
</div>
</div>
</div>
</template>
<script setup>
import { ref, watch, computed, onMounted, onUnmounted, reactive,nextTick } from 'vue'
import WsIframe from '@/components/wsIframe/index.vue'
import { useRoute } from "vue-router"
import { sxtGetList } from '@/api/mosty-jcz.js'
import emitter from "@/utils/eventBus.js";
const activeIndex = ref(0)
const cdList=ref([])
const listSxt=ref([1])
const handleCarouselChange = (index) => {
activeIndex.value = index
}
const getSxtGetList = (id) => {
const jczid = {
jczid: id
import { ref, reactive } from 'vue'
import MyTable from "@/components/aboutTable/MyTable.vue";
import Pages from "@/components/aboutTable/Pages.vue";
const props=defineProps({
JczMsg: {
type: Object,
default: () => ({})
}
sxtGetList(jczid).then(res => {
listSxt.value= Array.from({ length:Math.ceil(res.length / 12)==0?1:Math.ceil(res.length / 12) }, (_, row) => {
return res.slice(row * 12, row * 12 + 12)
}
);
cdList.value = listSxt.value[0].length < 4 ? listSxt.value[0]: listSxt.value[0].slice(0,4)
emitter.emit("getSxtGetList", cdList.value )
}).finally(()=>{
})
}
const route = useRoute()
onMounted(() => {
const id = route.query.id
getSxtGetList(id)
})
const showchenge = (item) => {
const index = cdList.value.indexOf(item);
if (index !== -1) {
// 如果数字已存在,先移除它
cdList.value.splice(index, 1);
}
// 添加到最前面
cdList.value.unshift(item);
emitter.emit("getSxtGetList", cdList.value )
}
const timeData = ref({
ryXm: '',
time: []
})
const clData = ref({
cph: '',
time: []
})
const pageData = reactive({
tableData: [{
tp: require("@/assets/images/cstp.png"),
cph: "豫DGL808",
time: "2025-11-02 09:18:00",
fx: "入林方向",
dz: "德吉路与光彩路入口处",
bm: "54040251001325030171",
cllx: "小型车辆",
bq: "前科人员车",
xsd: "80%",
}, {
tp: require("@/assets/images/cstp.png"),
cph: "豫DGL808",
time: "2025-11-02 15:18:00",
fx: "出林方向",
dz: "德吉路与光彩路出口处",
bm: "54040251001325030172",
cllx: "小型车辆",
bq: "前科人员车",
xsd: "90%",
}, {
tp: require("@/assets/images/cstp.png"),
cph: "豫DGL808",
time: "2025-11-02 21:18:00",
fx: "入林方向",
dz: "德吉路与光彩路入口处",
bm: "54040251001325030171",
cllx: "小型车辆",
bq: "前科人员车",
xsd: "95%",
}], //表格数据
keyCount: 0,
tableConfiger: {
rowHieght: 61,
showSelectType: "null",
loading: false,
haveControls: false
},
total: 0,
pageConfiger: {
pageSize: 20,
pageCurrent: 1
}, //分页
controlsWidth: 250, //操作栏宽度
tableColumn: [
{ label: "过车图片", prop: "tp", showOverflowTooltip: true, showSolt: true },
{ label: "车牌号", prop: "cph", showOverflowTooltip: true },
{ label: "过车时间", prop: "time", showOverflowTooltip: true },
{ label: "卡口方向", prop: "fx", showOverflowTooltip: true },
{ label: "车辆种类", prop: "cllx", showOverflowTooltip: true },
{ label: "摄像头编码", prop: "bm", showOverflowTooltip: true },
{ label: "抓拍摄像头", prop: "dz", showOverflowTooltip: true, },
{ label: "标签", prop: "bq", showOverflowTooltip: true }
]
});
</script>
<style lang="scss" scoped>
@ -67,7 +193,7 @@ if (index !== -1) {
width: 100%;
height: 100%;
position: relative;
padding: 30px 20px;
padding: 35px 10px;
box-sizing: border-box;
.carousel-container {
@ -116,7 +242,7 @@ if (index !== -1) {
.video-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-columns: repeat(3, 1fr);
/* 6列 */
grid-template-rows: repeat(2, auto);
/* 2行 */
@ -133,28 +259,283 @@ if (index !== -1) {
// padding: 0 !important;;
}
/* 自定义滚动条样式 */
::-webkit-scrollbar {
// 自定义滚动条样式
.noScollLine::-webkit-scrollbar {
width: 0.5em;
height: 0.5em;
}
::-webkit-scrollbar-track {
.noScollLine::-webkit-scrollbar-track {
background: #000000;
}
::-webkit-scrollbar-thumb {
.noScollLine::-webkit-scrollbar-thumb {
background: #021b31;
border-radius: 0.25em;
}
::-webkit-scrollbar-thumb:hover {
.noScollLine::-webkit-scrollbar-thumb:hover {
background: #011733cd;
}
.video-cell{
position: relative;
// 表格列样式
.col-index {
width: 50px;
}
.iconFont{
position: absolute; top: 10px; text-align: right; width: 100%;
.col-image {
width: 80px;
}
.col-plate {
width: 100px;
}
.col-time {
width: 15%;
}
.col-direction {
width: 10%;
}
.col-type {
width: 10%;
}
.col-code {
width: 20%;
}
.col-camera {
width: 10%;
}
.col-tag {
width: calc(35% - 250px);
}
// 图片容器样式
.image-container {
width: 80px;
height: 100px;
padding: 10px;
}
.vehicle-image {
width: 100%;
height: 100%;
}
// 特殊文本样式
.plate-number {
color: blue;
}
// 滚动容器样式
.scroll-container {
height: 38vh;
overflow: auto;
}
// 布局相关样式
.full-height {
height: 100%;
}
.column-container {
width: 50%;
height: 100%;
overflow: hidden;
padding: 10px;
}
.gradient-title {
line-height: 40px;
font-size: 24px;
font-weight: bold;
text-align: center;
color: #000;
font-family: 'YSBTH';
background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.search-container {
display: flex;
justify-content: space-around;
}
.search-input {
margin-bottom: 10px;
width: 40%;
}
.search-button {
margin-bottom: 10px;
}
.align-center {
display: flex;
align-items: center;
}
.video-cell {
position: relative;
}
.iconFont {
position: absolute;
top: 10px;
text-align: right;
width: 100%;
}
.waning-cards {
height: calc(100% - 80px);
overflow: hidden;
overflow-y: auto;
}
.nowrap {
white-space: nowrap;
}
.one_text_detail {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.warning-card {
background: url("~@/assets/images/bg_10.png") no-repeat center center;
background-size: 100% 100%;
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 4px;
padding: 4px 4px 4px 10px;
box-sizing: border-box;
}
.warning-image {
width: 70px;
height: 80px;
img {
width: 100%;
height: 100%;
}
}
.warning-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.warning-info {
flex: 1;
}
.info-item {
margin-bottom: 4px;
color: #fff;
font-size: 14px;
}
.label {
color: rgba(255, 255, 255, 0.7);
}
.highlight {
color: #00f0ff;
}
.tag {
background: rgba(250, 177, 21, 0.2);
border-radius: 8px;
border: 1px solid #ffac26;
color: #fff;
padding: 2px 8px;
border-radius: 10px;
font-size: 12px;
margin-left: 10px;
}
.list-Box {
background-color: #0274ff;
color: #fff;
line-height: 50px;
text-align: center;
font-weight: bold;
}
.list-list {
background-color: #0017498a;
color: #000;
text-align: center;
line-height: 100px;
height: 100px;
color: #fff;
}
.listTr {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
// max-width: 100%;
cursor: pointer;
}
::v-deep .el-input__inner {
background-color: #273467d9;
color: #fff;
border: none;
}
::v-deep .el-range-input {
background-color: #273467d9;
color: #fff;
}
::v-deep .el-table{
border: none !important;
background-color: transparent !important;
--el-table-border-color: transparent !important;
}
::v-deep .el-table tr{
background-color: #072b56bf !important;
}
::v-deep .el-table th.el-table__cell {
background-color: #273467d9;
color: #fff;
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
background-color: #094c9dbf !important;
}
::v-deep .el-table .el-table__cell{
z-index:0 !important;
position:static;
}
::v-deep .el-table td.el-table__cell{
color: #fff !important;
}
::v-deep .el-table--border .el-table__cell{
border-color: #3b3b3bbf !important;
}
::v-deep .el-pagination__total{
color: #fff !important;
}
::v-deep .el-pagination.is-background .btn-next:disabled, .el-pagination.is-background .btn-prev:disabled{
background-color: #212c59;
}
::v-deep .el-pagination.is-background .btn-next:disabled, .el-pagination.is-background .btn-prev:disabled{
background-color: #212c59 !important;
}
::v-deep .el-date-editor .el-range-separator{
color: #fff !important;
}
</style>

View File

@ -1,130 +1,304 @@
<template>
<div class="video-more-container">
<el-carousel style="height: 100%;" motion-blur indicator-position="none" :autoplay="false"
@change="handleCarouselChange">
<el-carousel-item v-for="(item, index) in sbList" :key="index">
<div class="video-grid" v-if="activeIndex == index">
<div v-for="(items, indexs) in item" :key="indexs" class="video-cell">
<WsIframe :sbbh="items.sbbh" />
</div>
<div class="entrance">
<div class="flex just-between content ">
<div class="contentLeft">
<div v-if="listSxt.ClGzy.length>0">
<el-carousel style="height: 100%;" motion-blur indicator-position="none" @change="clhandleCarouselChange"
:autoplay="false">
<el-carousel-item v-for="(item, index) in listSxt.ClGzy" :key="index">
<div class="video-grid" v-if="clActiveIndex == index">
<div v-for="(items, indexs) in item" :key="indexs"
:class="item.length == 2 ? 'video-cell' : 'video-cellMax'">
<WsIframe :sbbh="items.sbbh" />
</div>
</div>
</el-carousel-item>
</el-carousel>
</div>
</el-carousel-item>
</el-carousel>
<Empty v-else :show="listSxt.ClGzy.length ==0" />
</div>
<div class="contentRight">
<div v-if="listSxt.RlGzy.length >0">
<el-carousel style="height: 100%;" motion-blur indicator-position="none" @change="rlhandleCarouselChange"
:autoplay="false">
<el-carousel-item v-for="(item, index) in listSxt.RlGzy" :key="index">
<div class="video-grid" v-if="rlActiveIndex == index">
<div v-for="(items, indexs) in item" :key="indexs"
:class="item.length == 2 ? 'video-cell' : 'video-cellMax'">
<WsIframe :sbbh="items.sbbh" />
</div>
</div>
</el-carousel-item>
</el-carousel>
</div>
<Empty v-else :show="listSxt.RlGzy.length == 0" />
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import Empty from "@/components/MyComponents/Empty/index.vue";
import {
JczselectById
} from "@/api/mosty-jcz";
import WsIframe from '@/components/wsIframe/index.vue'
import emitter from "@/utils/eventBus.js";
const activeIndex = ref(0)
const handleCarouselChange = (index) => {
activeIndex.value = index
}
const sbList = ref([1])
onMounted(() => {
emitter.on("getSxtGetList", (res) => {
sbList.value = Array.from({ length: Math.ceil(res.length / 4) == 0 ? 1 : Math.ceil(res.length / 4) }, (_, row) => {
return res.slice(row * 4, row * 4 + 4)
}
);
})
import { useRoute } from 'vue-router'
const listSxt = ref({
ClGzy: [],
RlGzy: [],
})
const routeId = ref()
onMounted(() => {
routeId.value = route.query.id
getSxtGetList()
})
const route = useRoute()
const clActiveIndex = ref(0)
const rlActiveIndex = ref(0)
const clhandleCarouselChange = (val) => {
clActiveIndex.value = val
}
const rlhandleCarouselChange = (val) => {
rlActiveIndex.value = val
}
const getSxtGetList = () => {
JczselectById({ id: routeId.value }).then(res => {
const clgzy = res.sxtList ? res.sxtList.filter(item => item.gzyfx == '01') : []
const rlgzy = res.sxtList ? res.sxtList.filter(item => item.gzyfx == '02') : []
listSxt.value.ClGzy = clgzy.length > 0 ? Array.from({ length: Math.ceil(clgzy.length / 2) == 0 ? 1 : Math.ceil(clgzy.length / 2) }, (_, row) => {
return clgzy.slice(row * 2, row * 2 + 2)
}) : []
listSxt.value.RlGzy = rlgzy.length > 0 ? Array.from({ length: Math.ceil(rlgzy.length / 2) == 0 ? 1 : Math.ceil(rlgzy.length / 2) }, (_, row) => {
return rlgzy.slice(row * 2, row * 2 + 2)
}) : []
console.log(listSxt.value);
})
}
</script>
<style lang="scss" scoped>
.video-more-container {
width: 100%;
height: 100%;
padding: 20px;
box-sizing: border-box;
position: relative;
<style scoped lang="scss">
.entrance {
background-size: 100%;
.switch-btn {
// padding: 20px 0;
.cloes {
width: 23px;
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
transition: all 0.3s;
color: #fff;
z-index: 1;
top: 4px;
left: 92%;
&.prev {
left: 0;
border-radius: 0 4px 4px 0;
}
&.next {
right: 0;
border-radius: 4px 0 0 4px;
img {
width: 100%;
}
}
.video-grid {
padding: 10px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 10px;
height: 100%;
}
.video-cell {
position: relative;
background: url('~@/assets/images/bg13.png') no-repeat;
background-size: 100% 100%;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.video-wrapper {
background-color: #000;
position: relative;
width: 100%;
height: 100%;
}
.video-player {
width: 100%;
height: 100%;
object-fit: cover;
}
.video-controls {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
display: flex;
justify-content: space-between;
align-items: center;
.bt {
margin-top: 14px;
color: #fff;
.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%;
}
}
.time-display {
font-size: 14px;
}
.content {
width: 100%;
// margin-top: 10px;
color: #fff;
.control-buttons {
display: flex;
gap: 15px;
.contentLeft {
width: 50%;
i {
cursor: pointer;
font-size: 20px;
.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;
}
}
}
.box {
overflow: auto;
// height: 400px;
}
// 标题样式
.section-title {
padding: 10px 15px;
background: rgba(17, 94, 201, 0.3);
color: #fff;
font-size: 16px;
font-weight: bold;
// border-left: 3px solid #02fafb;
// margin-bottom: 10px;
}
// 感知源头列表样式
.flex.modesl {
padding: 10px 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
transition: background-color 0.3s;
&:hover {
color: #409EFF;
background-color: rgba(17, 94, 201, 0.2);
}
// 信息容器样式
.info-container {
width: calc(100% - 60px);
.ld,
div {
color: #fff;
font-size: 16px;
margin-bottom: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div:last-child {
color: #02fafb;
font-size: 14px;
margin-bottom: 0;
}
}
// 播放按钮样式
>div:last-child {
background: url("~@/assets/images/streetBi/wxz.png") no-repeat;
background-size: 100% 100%;
padding: 5px 15px;
cursor: pointer;
transition: transform 0.2s;
font-size: 14px;
height: 30px;
line-height: 20px;
text-align: center;
min-width: 50px;
&:hover {
transform: scale(1.05);
}
}
}
}
}
.demo-tabs {
padding: 0 15px;
}
::v-deep .el-tabs--border-card {
background-color: #ffffff00;
border: none;
.el-tabs__header {
background-color: #ffffff00;
border-color: #3b68c3;
.el-tabs__item {
color: #fff;
}
}
.el-tabs__item.is-active {
background-color: #115ec9;
color: #fff;
border-color: transparent;
}
}
::v-deep .el-carousel__container {
height: 100% !important;
height: 420px;
}
.video-cell {
height: 210px;
padding: 2px 10px
}
.video-cellMax {
height: 400px;
padding: 25px;
}
</style>

View File

@ -31,7 +31,8 @@
/>
</el-form-item>
<el-form-item style="width: 40%" prop="sbmc" label="感知源名称">
<el-input :disabled="forbidden"
<el-input readonly :disabled="forbidden"
@click="openDialog=true"
v-model="listQuery.sbmc"
placeholder="请输入感知源名称"
style="width: 100%"
@ -97,7 +98,7 @@
></el-option>
</el-select>
</el-form-item> -->
<el-form-item style="width: 40%" label="环林卡口名称">
<el-form-item style="width: 40%" label="环林卡口名称" prop="jczmc">
<div class="diviput" @click="!forbidden?showJcz = true:''">
<span v-if="listQuery.jczmc">{{ listQuery.jczmc }}</span>
<span class="placeholder" v-else> 请选择布控卡口</span>
@ -128,6 +129,7 @@
</div>
</div>
<Jczloder v-model="showJcz" :Single="true" @choosedJcz="JczMsg" :data="[]" />
<ChooseGzy v-model="openDialog" @choose="chooseDataGzy" />
</template>
<script setup>
@ -136,6 +138,7 @@ import { TtbJczSxtAdd, Ttbgetupdate } from "@/api/mosty-jcz.js";
import * as MOSTY from "@/components/MyComponents/index";
import emitter from "@/utils/eventBus.js";
import Jczloder from "@/components/loder/Jczloder.vue";
import ChooseGzy from "@/components/chooseList/chooseGzy.vue";
import GdMap from "@/components/GdMap/index.vue";
import { ElMessage } from "element-plus";
const props = defineProps({
@ -175,7 +178,13 @@ const rules = reactive({
required: true,
message: "请输入经度"
}
]
],
jczmc: [
{
required: true,
message: "请输入环林卡口名称"
}
],
});
const formRef = ref(null);
const emit = defineEmits(["getjczgetXfllList"]);
@ -223,8 +232,6 @@ const init = (type, row) => {
//保存
const _onSave = () => {
if (!formRef) return;
console.log(listQuery.value);
formRef.value.validate((valid, fields) => {
if (valid) {
if (pageType.value == "add") {
@ -284,6 +291,19 @@ const JczMsg = (val) => {
listQuery.value.jczmc = val.jczmc;
listQuery.value.jczid = val.id;
};
const chooseDataGzy = (val) => {
listQuery.value.sbmc = val.sbmc
listQuery.value.sblx = val.sblx
listQuery.value.sbbh = val.sbbh
listQuery.value.wd = val.wd
listQuery.value.jd = val.jd
listQuery.value.dzmc = val.dzmc
listQuery.value.csmc = val.csmc
listQuery.value.sblxdm = val.sblxdm
listQuery.value.sblx = val.sblx
}
// 选择感知源
const openDialog=ref(false)
defineExpose({ init });
</script>

View File

@ -2,12 +2,12 @@
<div>
<div class="titleBox">
<PageTitle title="感知源管理">
<el-button :disabled="ids.length<=0" type="primary" @click="delDictItem(ids)" v-if="Auth">
<!-- <el-button :disabled="ids.length<=0" type="primary" @click="delDictItem(ids)" v-if="Auth">
<el-icon style="vertical-align: middle">
<CirclePlus />
</el-icon>
<span style="vertical-align: middle" >批量删除</span>
</el-button>
</el-button> -->
<el-button type="primary" @click="addEdit('add', '')" v-if="Auth">
<el-icon style="vertical-align: middle">
<CirclePlus />
@ -55,6 +55,7 @@
<EditAddForm ref="detailDiloag" :dict="{ D_BZ_SF, D_BZ_SBLX, D_BZ_DWFL, D_BZ_GZSBLX }"
@getjczgetXfllList="getjczgetXfllList" />
</div>
</template>
<script setup>
@ -67,8 +68,9 @@ import EditAddForm from "./components/editAddForm.vue";
import { TtbgetPageList, gzydeleteList } from "@/api/mosty-jcz.js";
import { isAuth } from '@/utils/tools.js'
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const urlImg = "/mosty-api/mosty-base/minio/image/download/";
const { proxy } = getCurrentInstance();
const { D_BZ_SBLX, D_BZ_SF, D_BZ_DWFL, D_BZ_GZSBLX } = proxy.$dict(
"D_BZ_SBLX",
"D_BZ_SF",
@ -103,7 +105,7 @@ const pageData = reactive({
keyCount: 0,
tableConfiger: {
rowHieght: 61,
showSelectType: "checkBox",
showSelectType: "null",
loading: false
},
total: 0,
@ -195,6 +197,11 @@ const addEdit = (type, row) => {
detailDiloag.value.init(type, row);
};
const historyDialog = ref();
const showTrack = (row) => {
historyDialog.value.open(row);
};
const searchBox = ref(null);
// 表格高度计算
const tabHeightFn = () => {
@ -207,6 +214,9 @@ const tabHeightFn = () => {
const chooseData = (val) => {
ids.value=val.map(item=>item.id)
}
</script>
<style>

View File

@ -0,0 +1,56 @@
<template>
<el-dialog v-model="visible" title="历史轨迹" width="80%" :close-on-click-modal="false" :destroy-on-close="true">
<div style="width:100%; height:60vh; position:relative;">
<GdMap :isShow="true" :isShowZoom="true" />
</div>
<template #footer>
<span>{{ personLabel }}</span>
<el-button @click="visible=false">关闭</el-button>
</template>
</el-dialog>
</template>
<script setup>
import { ref, nextTick } from 'vue'
import GdMap from '@/components/GdMap/index.vue'
import emitter from '@/utils/eventBus.js'
import { RyGjTrajectory } from '@/api/mosty-jcz.js'
import { ElMessage } from 'element-plus'
const visible = ref(false)
const sfzh = ref('')
const personLabel = ref('')
const open = async (row) => {
sfzh.value = row.sfzh
personLabel.value = `${row.xm || ''}近30天`
visible.value = true
await nextTick()
emitter.emit('map-resize')
const res = await RyGjTrajectory({ sfzh: sfzh.value, days: 30 })
const list = Array.isArray(res) ? res : (res?.data?.data || [])
if (!list || list.length === 0) {
ElMessage({ message: '近30天无轨迹数据', type: 'info' })
emitter.emit('removeElement', 'rygj')
return
}
const coords = list.map(it => [Number(it.jd), Number(it.wd)])
const start = coords[0]
console.log('coords', coords)
emitter.emit('setMapCenter', { location: start, zoomLevel: 12 })
if (coords.length > 1) {
emitter.emit('drawLineAnimation', { coords, isClear: true, flag: 'rygj' })
}
// 撒点显示历史轨迹
const pointObjs = list.map(it => ({ jd: Number(it.jd), wd: Number(it.wd) }))
emitter.emit('addPointArea', { coords: pointObjs, icon: require('@/assets/images/bi/gzy.png'), flag: 'rygj_points' })
}
defineExpose({ open })
</script>
<style scoped>
</style>

View File

@ -0,0 +1,168 @@
<template>
<div class="dialog" v-if="dialogForm">
<div class="head_box">
<span class="title">{{ pageInfo[pageType].title }}</span>
<div>
<el-button size="small" type="primary" v-if="['add', 'edit'].includes(pageType)" @click="_onSave">保存</el-button>
<el-button size="small" @click="close">关闭</el-button>
</div>
</div>
<div class="cntinfo">
<el-form ref="formRef" :model="form" :rules="rules" :inline="true" label-position="top">
<el-form-item style="width: 40%" prop="sfzh" label="身份证号">
<el-input v-model="form.sfzh" placeholder="请输入身份证号" clearable />
</el-form-item>
<el-form-item style="width: 40%" prop="xm" label="姓名">
<el-input v-model="form.xm" placeholder="请输入姓名" clearable />
</el-form-item>
<el-form-item style="width: 40%" prop="rylx" label="人员类型">
<el-select v-model="form.rylx" placeholder="请选择" style="width: 100%">
<el-option label="流动人口" value="01" />
<el-option label="常驻人口" value="02" />
<el-option label="重点人" value="03" />
</el-select>
</el-form-item>
<el-form-item style="width: 40%" prop="pcsj" label="采集时间">
<el-date-picker v-model="form.pcsj" type="datetime" placeholder="请选择" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
</el-form-item>
<el-form-item style="width: 40%" prop="ssbmdm" label="所属部门">
<MOSTY.Department width="100%" clearable v-model="form.ssbmdm" :placeholder="form.ssbm ? form.ssbm : '请选择所属部门'" />
</el-form-item>
<!-- 联系方式与地址在前 -->
<el-form-item style="width: 40%" prop="lxdh" label="联系电话">
<el-input v-model="form.lxdh" placeholder="请输入联系电话" clearable />
</el-form-item>
<el-form-item style="width: 40%" prop="xjzdz" label="居住地址">
<el-input v-model="form.xjzdz" placeholder="请输入居住地址" clearable />
</el-form-item>
<!-- 经纬度选择放到最后参考感知源实现 -->
<el-form-item style="width: 85%" prop="jd" label="坐标位置">
<div class="latlng">
<el-input :disabled="true" v-model="form.jd" clearable placeholder="请选择坐标" style="width: 42%" />
<el-input :disabled="true" v-model="form.wd" clearable placeholder="请选择坐标" style="width: 42%; margin-left: 1%" />
<el-button @click="selectLocation" size="small" type="primary">选择定位</el-button>
</div>
</el-form-item>
<el-form-item style="width: 100%">
<div class="mapbox"><GdMap /></div>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { RyGjInsertEntity, RyGjEditEntity } from '@/api/mosty-jcz.js'
import * as MOSTY from '@/components/MyComponents/index'
import GdMap from '@/components/GdMap/index.vue'
import emitter from '@/utils/eventBus.js'
const formRef = ref(null)
const dialogForm = ref(false)
const form = ref({})
const pageType = ref('add')
const emit = defineEmits(['refresh'])
const pageInfo = { add: { title: '新增', url: '' }, edit: { title: '编辑', url: '' }, detail: { title: '详情' } }
const rules = {
sfzh: [{ required: true, message: '请输入身份证号' }],
rylx: [{ required: true, message: '请选择人员类型' }],
pcsj: [{ required: true, message: '请选择采集时间', trigger: 'change' }],
jd: [{ required: true, message: '请输入经度' }],
wd: [{ required: true, message: '请输入纬度' }]
}
const init = (type, row) => {
pageType.value = type
dialogForm.value = true
if (type === 'detail') {
form.value = { ...row }
centerMap()
} else if (type === 'edit') {
form.value = { ...row }
} else {
form.value = {}
}
}
const _onSave = () => {
if (!formRef.value) return
formRef.value.validate((valid) => {
if (!valid) return
enrichFromSfzh()
if (pageType.value === 'add') {
RyGjInsertEntity(form.value).then(() => { ElMessage({ message: '新增成功', type: 'success' }); emit('refresh'); close(); })
} else {
RyGjEditEntity(form.value).then(() => { ElMessage({ message: '修改成功', type: 'success' }); emit('refresh'); close(); })
}
})
}
const close = () => { dialogForm.value = false; form.value = {} }
defineExpose({ init })
const enrichFromSfzh = () => {
const val = form.value.sfzh || ''
if (val && val.length >= 18) {
const y = val.substring(6, 10)
const m = val.substring(10, 12)
const d = val.substring(12, 14)
form.value.csrq = `${y}-${m}-${d}`
const genderCode = parseInt(val.substring(16, 17))
form.value.xbdm = (genderCode % 2 === 1) ? '1' : '2' // 1-男 2-女
}
}
const selectLocation = () => {
emitter.emit('drawShape', { flag: 'select_point', type: 'point', isclear: true })
}
const coordHandler = (res) => {
if (res?.type === 'point') {
form.value.jd = res.coord[0]
form.value.wd = res.coord[1]
chackLat()
}
}
const centerMap = () => {
if (form.value.jd && form.value.wd) {
emitter.emit('setMapCenter', { location: [Number(form.value.jd), Number(form.value.wd)], zoomLevel: 12 })
chackLat()
}
}
const chackLat = () => {
const { jd, wd } = form.value
emitter.emit('deletePointArea', 'jczMap_Gzy')
if (jd && wd) {
emitter.emit('addPointArea', {
coords: [{ jd: Number(jd), wd: Number(wd) }],
icon: require('@/assets/images/bi/gzy.png'),
flag: 'jczMap_Gzy'
})
}
}
onMounted(() => { emitter.on('coordString', coordHandler) })
onUnmounted(() => { emitter.off('coordString') })
</script>
<style scoped>
.dialog { padding: 20px; }
.head_box { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.cntinfo { height: calc(100% - 70px); overflow: auto; }
.mapbox {
width: 1000px;
padding: 0 10px;
height: 400px;
box-sizing: border-box;
background: #000;
}
.latlng { display: flex; align-items: center; gap: 8px; }
</style>

View File

@ -0,0 +1,126 @@
<template>
<div>
<div class="titleBox">
<PageTitle title="人员轨迹">
<el-button type="primary" @click="addEdit('add', '')" v-if="Auth">新增</el-button>
</PageTitle>
</div>
<div ref="searchBox">
<Search :searchArr="searchConfiger" @submit="onSearch" />
</div>
<div class="tabBox">
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
<template #rylx="{ row }">
{{ rylxMap[row.rylx] || row.rylx || '-' }}
</template>
<template #controls="{ row }">
<template v-if="Auth">
<el-link type="primary" @click="addEdit('edit', row)">编辑</el-link>
<el-link type="primary" @click="delItem(row.id)">删除</el-link>
</template>
<el-link type="primary" @click="showTrack(row)">历史轨迹</el-link>
</template>
</MyTable>
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
...pageData.pageConfiger,
total: pageData.total
}"></Pages>
</div>
<EditAddForm ref="detailDiloag" @refresh="getList" />
<HistoryTrackDialog ref="historyDialog" />
</div>
</template>
<script setup>
import { ElMessage } from "element-plus";
import PageTitle from "@/components/aboutTable/PageTitle.vue";
import MyTable from "@/components/aboutTable/MyTable.vue";
import Pages from "@/components/aboutTable/Pages.vue";
import Search from "@/components/aboutTable/Search.vue";
import EditAddForm from "./components/editAddForm.vue";
import HistoryTrackDialog from "./components/HistoryTrackDialog.vue";
import { RyGjSelectPage, RyGjDeleteById } from "@/api/mosty-jcz.js";
import { isAuth } from '@/utils/tools.js'
import { reactive, ref, onMounted, nextTick } from "vue";
const Auth = ref(true)
onMounted(() => {
Auth.value = isAuth()
nextTick(() => { tabHeightFn(); });
});
const rylxMap = {
'01': '流动人口',
'02': '常驻人口',
'03': '重点人'
}
const searchConfiger = ref([
{ label: "身份证号", prop: "sfzh", placeholder: "请输入身份证号", showType: "input" },
{ label: "姓名", prop: "xm", placeholder: "请输入姓名", showType: "input" },
{ label: "人员类型", prop: "rylx", placeholder: "请选择", showType: "select", options: [
{ label: '流动人口', value: '01' },
{ label: '常驻人口', value: '02' },
{ label: '重点人', value: '03' }
] },
{ label: "开始时间", prop: "startTime", placeholder: "请选择开始时间", showType: "dateTime" },
{ label: "结束时间", prop: "endTime", placeholder: "请选择结束时间", showType: "dateTime" }
]);
const pageData = reactive({
tableData: [],
keyCount: 0,
tableConfiger: { rowHieght: 61, showSelectType: "null", loading: false },
total: 0,
pageConfiger: { pageSize: 20, pageCurrent: 1 },
controlsWidth: 250,
tableHeight: 0,
tableColumn: [
{ label: "身份证号", prop: "sfzh", showOverflowTooltip: true },
{ label: "姓名", prop: "xm", showOverflowTooltip: true },
{ label: "人员类型", prop: "rylx", showOverflowTooltip: true, showSolt: true },
{ label: "采集时间", prop: "pcsj", showOverflowTooltip: true },
{ label: "经度", prop: "jd", showOverflowTooltip: true },
{ label: "纬度", prop: "wd", showOverflowTooltip: true },
{ label: "所属部门", prop: "ssbm", showOverflowTooltip: true },
]
});
const queryCondition = ref({});
const getList = () => {
pageData.tableConfiger.loading = true;
const params = { ...queryCondition.value, ...pageData.pageConfiger };
RyGjSelectPage(params)
.then((res) => {
const r = res?.data?.data || res;
pageData.tableData = r.records || [];
pageData.total = r.total || 0;
})
.finally(() => { pageData.tableConfiger.loading = false; });
};
getList();
const onSearch = (val) => { queryCondition.value = { ...queryCondition.value, ...val }; getList(); };
const changeNo = (val) => { pageData.pageConfiger.pageCurrent = val; getList(); };
const changeSize = (val) => { pageData.pageConfiger.pageSize = val; getList(); };
const delItem = (id) => {
RyGjDeleteById(id).then(() => { ElMessage({ message: "删除成功", type: "success" }); getList(); });
};
const detailDiloag = ref();
const addEdit = (type, row) => { detailDiloag.value.init(type, row); };
const historyDialog = ref();
const showTrack = (row) => { historyDialog.value.open(row); };
const searchBox = ref(null);
const tabHeightFn = () => {
pageData.tableHeight = window.innerHeight - (searchBox.value?.offsetHeight || 0) - 280;
window.onresize = function () { tabHeightFn(); };
};
</script>
<style>
.el-loading-mask { background: rgba(0, 0, 0, 0.5) !important; }
</style>

View File

@ -63,11 +63,10 @@
</el-form-item>
<el-form-item style="width: 85%" prop="jd" label="坐标位置">
<div class="latlng flex">
<el-input :disabled="true" v-model="listQuery.jd" clearable placeholder="请选择坐标"
<el-input :disabled="false" v-model="listQuery.jd" clearable placeholder="请选择坐标"
style="width: 42%"></el-input>
<el-input :disabled="true" v-model="listQuery.wd" clearable placeholder="请选择坐标"
<el-input :disabled="false" v-model="listQuery.wd" clearable placeholder="请选择坐标"
style="width: 42%; margin-left: 1%"></el-input>
<el-button @click="selectLocation" :disabled="forbidden">选择定位</el-button>
</div>
</el-form-item>
@ -213,16 +212,24 @@ const selectLocation = () => {
//获取经纬度
const chackLat = () => {
const { jd, wd } = listQuery.value;
console.log(jd, wd);
let icon = require("@/assets/images/bi/gzy.png");
emitter.emit("deletePointArea", "jczMap_Gzy");
if (listQuery.value.zqlx == '2') {
icon = require("@/assets/images/bi/gzy.png");
} else {
icon = require("@/assets/images/z.png");
}
if (jd && wd) {
setTimeout(() => {
emitter.emit("deletePointArea", "jczMap_Gzy");
emitter.emit("addPointArea", {
coords: [{ jd, wd }],
icon: require("@/assets/images/bi/gzy.png"),
icon,
flag: "jczMap_Gzy"
});
emitter.emit("setMapCenter", { location: [jd, wd], zoomLevel: 10 });
}, 1000);
}
};

View File

@ -23,7 +23,8 @@
</div>
</div>
<div class="btn_bom">
<button class="dp-default small" @click="chooceItem(item)" style="margin-right: 10px;">选择</button>
<button class="dp-default small" @click="chooceItem(item,'cl')" style="margin-right: 10px;">设置出林</button>
<button class="dp-default small" @click="chooceItem(item,'rl')" style="margin-right: 10px;">设置入林</button>
<button class="dp-default small" @click="openVideo(item)">视频播放</button>
</div>
</div>
@ -40,8 +41,7 @@ const info = ref([]); //警情数据
const emits = defineEmits(['chooseVideo'])
onMounted(() => {
emitter.on("showGzyInfo", (res) => {
console.log(res, 'resresresres')
info.value = [res];
info.value =res ;
show.value = true;
});
});
@ -49,14 +49,16 @@ onUnmounted(() => {
emitter.off("showGzyInfo");
});
function chooceItem(item) {
emits('chooseVideo', item)
}
function chooceItem(item,type) {
if (type === 'cl') {
emits('chooseVideo', {...item,gzyfx:'02'})
} else {
emits('chooseVideo', {...item,gzyfx:'01'})
}
}
// 打开视频
function openVideo(item) {
console.log(item, 'item');
let params = {
...item,
splitNum: 1
@ -91,7 +93,7 @@ function close() {
display: flex;
justify-content: space-between;
padding: 0;
background: #052342;
.close {
font-size: 20px;
font-weight: 200;

View File

@ -8,18 +8,26 @@
</div>
</div>
<div class="cntinfo">
<el-form ref="formRef" :model="listQuery" :rules="rules" :inline="true" label-position="top">
<el-form-item style="width: 40%" label="感知源">
<el-form ref="formRef" :model="listQuery" :rules="rules" label-position="top">
<el-form-item label="检查站名称">
<el-input v-model="JczMc" disabled />
</el-form-item>
<el-form-item style="width: 40%" label="感知源">
<!-- <div class="diviput" @click="showJcz = true"> -->
<div class="diviput">
<span v-if="listQuery.sxtList && listQuery.sxtList.length > 0">
<el-tag closable @close="handleClose(index)" v-for="(item, index) in listQuery.sxtList" :key="index"> {{
<el-form-item label="入林感知源">
<div class="diviput" @click="openCl('rl')">
<span v-if="RlGzy && RlGzy.length > 0">
<el-tag closable @close="handleClose(index,'rl')" v-for="(item, index) in RlGzy" :key="index"> {{
item.sbmc }} </el-tag>
</span>
<span class="placeholder" v-else> 请选择感知源</span>
<span class="placeholder" v-else> 请选择入林感知源</span>
</div>
</el-form-item>
<el-form-item label="出林感知源">
<div class="diviput" @click="openCl('cl')">
<span v-if="ClGzy && ClGzy.length > 0">
<el-tag closable @close="handleClose(index,'cl')" v-for="(item, index) in ClGzy" :key="index"> {{
item.sbmc }} </el-tag>
</span>
<span class="placeholder" v-else> 请选择出林感知源</span>
</div>
</el-form-item>
</el-form>
@ -41,15 +49,16 @@ import { sxtBatch, JczselectById } from '@/api/mosty-jcz'
import { ElMessage } from "element-plus";
import GdMap from "@/components/GdMap/index.vue";
import gzyInfo from "./gzyInfo.vue";
import { ysSxtGetList } from '@/api/yszx.js'
import { ysSxtGetList, ysSxtgetPageList } from '@/api/yszx.js'
import emitter from "@/utils/eventBus.js";
const emit = defineEmits(['getjczgetXfllList'])
const search = ref(null)
const ClGzy = ref([])
const RlGzy = ref([])
const listQuery = ref({})
onMounted(() => {
tabHeightFn()
console.log("xxxx");
});
const data = ref([])
@ -63,14 +72,26 @@ const init = (row) => {
JczMc.value = row.jczmc
JczselectById({ id: row.id }).then(res => {
if (res) {
listQuery.value.sxtList = res.sxtList ? res.sxtList : [];
ClGzy.value=res.sxtList.filter(item => item.gzyfx=='02')
RlGzy.value=res.sxtList.filter(item => item.gzyfx=='01')
const icon = require("@/assets/images/z.png");
const iconjcz = require("@/assets/point/sp.png");
emitter.emit("setMapCenter", { location: [res.jd, res.wd], zoomLevel: 10 });
if (res.jczlx == '01') {
emitter.emit("addPointArea", { coords: [res], icon, flag: "jczMap_hm" });
} else {
emitter.emit("addPointArea", { coords: [res], icon: iconjcz, flag: "jczMap_hm" });
}
}
})
};
//保存
const _onSave = () => {
sxtBatch(listQuery.value).then((res) => {
console.log(res);
const promes = {
...listQuery.value,
sxtList: [...RlGzy.value, ...ClGzy.value]
}
sxtBatch(promes).then((res) => {
ElMessage({ message: "新增成功", type: "success" });
emit("getjczgetXfllList");
close()
@ -114,6 +135,7 @@ const pageDatas = reactive({
]
});
//页面关闭
const close = () => {
dialogGzy.value = false;
@ -121,9 +143,16 @@ const close = () => {
};
// 选择视频
function chooseVideo(sxt) {
console.log(sxt, 'sxt');
listQuery.value.sxtList.push(sxt)
if (sxt.gzyfx=='01') {
RlGzy.value.find(item => item.sbbh === sxt.sbbh)? ElMessage({ message: "入林感知源已选择", type: "warning" }) : RlGzy.value.push(sxt)
} else {
ClGzy.value.find(item => item.sbbh === sxt.sbbh)? ElMessage({ message: "出林感知源已选择", type: "warning" }) : ClGzy.value.push(sxt)
}
}
// listQuery.value.sxtList.find(item => item.sbbh === sxt.sbbh) ? ElMessage({ message: "感知源已选择", type: "warning" }) : listQuery.value.sxtList.push(sxt)
// 表格高度计算
const tabHeightFn = () => {
console.log(search.value);
@ -134,22 +163,60 @@ const tabHeightFn = () => {
};
};
const sxtGetList = () => {
const icon = require("@/assets/point/kk.png")
ysSxtGetList().then(res => {
emitter.emit("addPointArea", {
coords: res,
icon: require("@/assets/point/sp.png"),
flag: "sp"
});
// 筛选出有效的地理坐标数据,经度范围(-180, 180),纬度范围(-90, 90)
const coords = res.filter(item => {
// 确保经纬度存在且为有效数字,并在合理范围内
const jd = Number(item.jd)
const wd = Number(item.wd)
return !isNaN(jd) && jd > 0 && !isNaN(wd) && wd > 0
})
emitter.emit("addPoint",
{
coords: coords,
icon: icon,
flag: 'sp',
scale: 0.6,
fontColor: "#FF0000"
})
})
}
defineExpose({ init });
// 打开弹窗
const lxSxt = ref('')
const openCl = (val) => {
showJcz.value = true
lxSxt.value = val
}
const showJcz = ref(false)
const GzyMsg = (val) => {
listQuery.value.sxtList = val
if (lxSxt.value == 'cl') {
ClGzy.value = val.map(item => {
return {
...item,
gzyfx: '02'
}
})
} else if (lxSxt.value == 'rl') {
RlGzy.value = val.map(item => {
return {
...item,
gzyfx: '01'
}
})
}
}
const handleClose = (idx) => {
listQuery.value.sxtList.splice(idx, 1)
const handleClose = (idx,type) => {
if (type == 'cl') {
ClGzy.value.splice(idx, 1)
} else if (type == 'rl') {
RlGzy.value.splice(idx, 1)
}
}
</script>
@ -261,6 +328,8 @@ const handleClose = (idx) => {
border: 1px solid #c0c4cc;
color: #000;
min-height: 32px;
max-height: 100px;
overflow: auto;
// line-height: 32px;
padding: 0 10px;
border-radius: 5px;

View File

@ -1,8 +1,18 @@
<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="waning-cards noScollLine"
v-infinite-scroll="rollingLoading"
v-loading="loading"
>
<div
class="warning-card"
v-for="(item, index) in warningList.data"
:key="index"
@click="plotThetrajectory(item.yjRysfzh)"
>
<div class="warning-image">
<img :src="item.yjTp" alt="预警图片" />
<img :src="item.yjTp" alt="预警图片" v-if="item.yjTp&&!item.yjTp.includes('baidu')" />
<img src="@/assets/images/car.png" alt="预警图片" v-else/>
</div>
<div class="warning-info">
<div class="info-item">
@ -30,8 +40,9 @@
<script setup>
import { reactive, ref, getCurrentInstance } from "vue";
import { jczgetPageList } from "@/api/mosty-jcz.js";
import { jczgetPageList,tbYjxxGsgj } from "@/api/mosty-jcz.js";
import Empty from "@/components/MyComponents/Empty/index.vue";
import emitter from "@/utils/eventBus.js";
const props = defineProps({
jczId: {
type: String,
@ -74,6 +85,100 @@ const rollingLoading = () => {
getPageList();
}
};
// 轨迹上图
const plotThetrajectory = (val) => {
tbYjxxGsgj({
startTime: null,
endTime: null,
yjRysfzh: val
}).then(res => {
console.log(res);
if (res && res[0].list.length > 0) {
let coords = res[0].list.map(item => {
return [item.jd, item.wd]
})
// const coords = [
// [
// 94.3695802486277983689433312974870204925537109375,
// 29.659805088901098457654370577074587345123291015625
// ],
// [
// 94.369054723455093380835023708641529083251953125,
// 29.66032233866609857386720250360667705535888671875
// ],
// [
// 94.3684916577901020673380116932094097137451171875,
// 29.660979382630298317735650925897061824798583984375
// ],
// [
// 94.3683415069466065006054122932255268096923828125,
// 29.660755708570601285600787377916276454925537109375
// ],
// [
// 94.3675662718153063224235665984451770782470703125,
// 29.659987675165101705943015986122190952301025390625
// ],
// [
// 94.366890606904092919648974202573299407958984375,
// 29.659353928438999759009675472043454647064208984375
// ],
// [
// 94.3656729217579055557507672347128391265869140625,
// 29.6582345740253998656044132076203823089599609375
// ],
// [
// 94.3646650204280064144768402911722660064697265625,
// 29.657336173164399184543071896769106388092041015625
// ],
// [
// 94.364147680070203705327003262937068939208984375,
// 29.6567231392728984928908175788819789886474609375
// ],
// [
// 94.3636436022359958997185458429157733917236328125,
// 29.65662527779360146951148635707795619964599609375
// ],
// [
// 94.362367320062702447103220038115978240966796875,
// 29.6567138191363000032652053050696849822998046875
// ],
// [
// 94.3614396063849056872641085647046566009521484375,
// 29.656713819753800720491199172101914882659912109375
// ],
// [
// 94.3603242001151016893345513381063938140869140625,
// 29.65673712009380125209645484574139118194580078125
// ],
// [
// 94.358962121621999585840967483818531036376953125,
// 29.65674177535930056137658539228141307830810546875
// ],
// [
// 94.3576684689077040957272402010858058929443359375,
// 29.65681167375640114869383978657424449920654296875
// ],
// [
// 94.3564404495050013110812869854271411895751953125,
// 29.65685827438640131958891288377344608306884765625
// ],
// [
// 94.3547512464013067301493720151484012603759765625,
// 29.656946809372101370172458700835704803466796875
// ]
// ]
emitter.emit('drawLineAnimation', {
type: "solid",
coords: coords,
isclear: true,
flag: "yjLine"
})
} else {
ElMessage({ message: '暂无轨迹数据', type: 'warning' });
}
})
}
getPageList();
</script>
@ -96,7 +201,7 @@ getPageList();
}
.warning-image {
width: 100px;
width: 60px;
height: 80px;
img {

View File

@ -8,9 +8,11 @@
class="warning-card"
v-for="(item, index) in warningList.data"
:key="index"
@click="plotThetrajectory(item.yjRysfzh)"
>
<div class="warning-image">
<img :src="item.yjTp" alt="预警图片" />
<img :src="item.yjTp" alt="预警图片" v-if="item.yjTp&&!item.yjTp.includes('baidu')" />
<img src="@/assets/images/default_male.png" alt="预警图片" v-else/>
</div>
<div class="warning-info">
<div class="info-item">
@ -46,9 +48,11 @@
<script setup>
import { reactive, ref, getCurrentInstance } from "vue";
import { jczgetPageList } from "@/api/mosty-jcz.js";
import { jczgetPageList,tbYjxxGsgj } from "@/api/mosty-jcz.js";
import { IdCard } from "@/utils/dict.js";
import {ElMessage} from 'element-plus'
import Empty from "@/components/MyComponents/Empty/index.vue";
import emitter from "@/utils/eventBus.js";
const props = defineProps({
jczId: {
type: String,
@ -91,6 +95,101 @@ const rollingLoading = () => {
getPageList();
}
};
// 轨迹上图
const plotThetrajectory = (val) => {
tbYjxxGsgj({
startTime: null,
endTime: null,
yjRysfzh: val
}).then(res => {
console.log(res);
if (res && res[0].list.length > 0) {
let coords = res[0].list.map(item => {
return [item.jd, item.wd]
})
// const coords = [
// [
// 94.3695802486277983689433312974870204925537109375,
// 29.659805088901098457654370577074587345123291015625
// ],
// [
// 94.369054723455093380835023708641529083251953125,
// 29.66032233866609857386720250360667705535888671875
// ],
// [
// 94.3684916577901020673380116932094097137451171875,
// 29.660979382630298317735650925897061824798583984375
// ],
// [
// 94.3683415069466065006054122932255268096923828125,
// 29.660755708570601285600787377916276454925537109375
// ],
// [
// 94.3675662718153063224235665984451770782470703125,
// 29.659987675165101705943015986122190952301025390625
// ],
// [
// 94.366890606904092919648974202573299407958984375,
// 29.659353928438999759009675472043454647064208984375
// ],
// [
// 94.3656729217579055557507672347128391265869140625,
// 29.6582345740253998656044132076203823089599609375
// ],
// [
// 94.3646650204280064144768402911722660064697265625,
// 29.657336173164399184543071896769106388092041015625
// ],
// [
// 94.364147680070203705327003262937068939208984375,
// 29.6567231392728984928908175788819789886474609375
// ],
// [
// 94.3636436022359958997185458429157733917236328125,
// 29.65662527779360146951148635707795619964599609375
// ],
// [
// 94.362367320062702447103220038115978240966796875,
// 29.6567138191363000032652053050696849822998046875
// ],
// [
// 94.3614396063849056872641085647046566009521484375,
// 29.656713819753800720491199172101914882659912109375
// ],
// [
// 94.3603242001151016893345513381063938140869140625,
// 29.65673712009380125209645484574139118194580078125
// ],
// [
// 94.358962121621999585840967483818531036376953125,
// 29.65674177535930056137658539228141307830810546875
// ],
// [
// 94.3576684689077040957272402010858058929443359375,
// 29.65681167375640114869383978657424449920654296875
// ],
// [
// 94.3564404495050013110812869854271411895751953125,
// 29.65685827438640131958891288377344608306884765625
// ],
// [
// 94.3547512464013067301493720151484012603759765625,
// 29.656946809372101370172458700835704803466796875
// ]
// ]
emitter.emit('drawLineAnimation', {
type: "solid",
coords: coords,
isclear: true,
flag: "yjLine"
})
} else {
ElMessage({ message: '暂无轨迹数据', type: 'warning' });
}
})
}
getPageList();
</script>
@ -113,7 +212,7 @@ getPageList();
}
.warning-image {
width: 100px;
width: 60px;
height: 80px;
img {
width: 100%;

View File

@ -123,7 +123,7 @@ getcountCrl();
font-size: 18px;
position: relative;
padding-left: 12px;
background: linear-gradient(0deg, #59a6f4 0%, #ffffff 90%);
background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

View File

@ -4,74 +4,108 @@
<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 class="headline">{{ JczData.jczmc }}</div>
<div class="headbut" @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="" />
<el-tabs v-model="activeName" class="demo-tabs" type="border-card" @tab-click="handleClick">
<el-tab-pane label="检查站信息" name="检查站信息">
<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" v-if="BbMag.fzrXm">{{ BbMag?.fzrXm }}</div>
<div class="name" v-else>暂无报备数据</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" v-if="BbMag.fzrXm">{{ BbMag?.fzrLxdh }}</div>
<div class="name" v-else>暂无报备数据</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.mjsl ? BbMag.mjsl : 0 }}</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.fjsl ? BbMag.fjsl : 0 }}</span>
</div>
</div>
</div>
<div class="leftMag">
<div class="ld">值班领导</div>
<div class="name">{{ BbMag?.fzrXm }}</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 class="flex">
<div class="leftImg">
<img src="@/assets/images/tc/zbld.png" alt="" srcset="" />
</el-tab-pane>
<el-tab-pane label="感知源" name="感知源">
<div class="flex just-between content ">
<div class="contentLeft">
<div class="box">
<div class="section-title">
入林感知源
</div>
<div v-for="(item,index) in gzyList.RlGzy" class="flex just-between modesl" :key="index">
<div class="info-container">
<div>{{ item.sbmc }}</div>
<div>{{item .sbbh }}</div>
</div>
<div @click="openVideo(item)">播放</div>
</div>
</div>
</div>
<div class="leftMag">
<div class="ld">联系电话</div>
<div class="name">{{ BbMag?.fzrLxdh }}</div>
<div class="contentRight">
<div class="box">
<div class="section-title">
出林感知源
</div>
<div v-for="(item,index) in gzyList.ClGzy" class="flex just-between modesl" :key="index">
<div class="info-container">
<div>{{ item.sbmc }}</div>
<div>{{item .sbbh }}</div>
</div>
<div @click="openVideo(item)">播放</div>
</div>
</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.mjsl?BbMag.mjsl:0 }}</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.fjsl?BbMag.fjsl:0 }}</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>
</el-tab-pane>
</el-tabs>
</div>
<VideoCnt/>
</template>
<script setup>
import { ref, reactive } from "vue";
import VideoCnt from "@/components/video/index.vue";
import emitter from "@/utils/eventBus.js";
import {
jczqueryById,
jczCountWay,
jczgetcountCrl,
jczGzrycountCrl
jczGzrycountCrl,
JczselectById
} from "@/api/mosty-jcz";
import { useRouter } from "vue-router";
const props = defineProps({
@ -85,15 +119,17 @@ const BbMag = ref({ ryList: [] });
const getjczqueryByIdFeign = () => {
jczqueryById({ jczid: props.JczData.id }).then((res) => {
BbMag.value = res;
if (res.ryList) {
if (res && res.ryList) {
BbMag.value.mjsl = res.ryList.filter((el) => {
return el.ryMfjlb == '01'
}).length
BbMag.value.fjsl = res.ryList.filter((el) => {
return el.ryMfjlb == '02'
}).length
} else {
BbMag.value = {}
}
});
};
getjczqueryByIdFeign();
@ -106,6 +142,34 @@ const enterLevel = () => {
});
window.open(hrefs.href, "_blank");
};
const activeName = ref('检查站信息')
const gzyList = ref({
RlGzy: [],
ClGzy: [],
})
function openVideo(item) {
let params = {
...item,
splitNum: 1
}
console.log(params);
emitter.emit("openGzyVideo", params)
}
const getJczselectById=()=>{
JczselectById({ id: props.JczData.id }).then((res) => {
gzyList.value.RlGzy=res.sxtList?res.sxtList.filter(item => item.gzyfx=='01'):[]
gzyList.value.ClGzy=res.sxtList?res.sxtList.filter(item => item.gzyfx=='02'):[]
});
}
getJczselectById()
const handleClick = (val) => {
}
const cloes = () => {
emitter.emit("showJcz");
};
@ -221,10 +285,12 @@ countWays();
<style scoped lang="scss">
.entrance {
position: absolute;
width: 596px;
height: 471px;
background: url("~@/assets/images/tc/bg.png");
z-index: 9999;
width: 700px;
height: 570px;
background: url("~@/assets/images/tc/bg.png") no-repeat;
background-size: 100%;
z-index: 99;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
@ -270,6 +336,7 @@ countWays();
.content {
width: 100%;
margin-top: 10px;
color: #fff;
.contentLeft {
width: 50%;
@ -337,6 +404,93 @@ countWays();
}
}
}
.box {
overflow: auto;
height: 400px;
}
// 标题样式
.section-title {
padding: 10px 15px;
background: rgba(17, 94, 201, 0.3);
color: #fff;
font-size: 16px;
font-weight: bold;
border-left: 3px solid #02fafb;
margin-bottom: 10px;
}
// 感知源头列表样式
.flex.modesl {
padding: 10px 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
transition: background-color 0.3s;
&:hover {
background-color: rgba(17, 94, 201, 0.2);
}
// 信息容器样式
.info-container {
width: calc(100% - 60px);
.ld,
div {
color: #fff;
font-size: 16px;
margin-bottom: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div:last-child {
color: #02fafb;
font-size: 14px;
margin-bottom: 0;
}
}
// 播放按钮样式
> div:last-child {
background: url("~@/assets/images/streetBi/wxz.png") no-repeat;
background-size: 100% 100%;
padding: 5px 15px;
cursor: pointer;
transition: transform 0.2s;
font-size: 14px;
height: 30px;
line-height: 20px;
text-align: center;
min-width: 50px;
&:hover {
transform: scale(1.05);
}
}
} }
}
.demo-tabs {
padding: 0 15px;
}
::v-deep .el-tabs--border-card {
background-color: #ffffff00;
border: none;
.el-tabs__header {
background-color: #ffffff00;
border-color: #3b68c3;
.el-tabs__item {
color: #fff;
}
}
.el-tabs__item.is-active {
background-color: #115ec9;
color: #fff;
border-color: transparent;
}
}
</style>

View File

@ -22,7 +22,9 @@
:key="index"
>
<div class="warning-image">
<img :src="item.yjTp" alt="预警图片" />
<img :src="item.yjTp" alt="预警图片" v-if="item.yjTp" />
<img src="@/assets/images/car.png" alt="预警图片" v-else-if="linkQuery.yjLx == 2" />
<img src="@/assets/images/default_male.png" alt="预警图片" v-else/>
</div>
<div class="warning-info">
<div class="info-item" v-if="linkQuery.yjLx == 2">

View File

@ -1,7 +1,8 @@
<template>
<div class="homeBox">
<GdMap></GdMap>
<GdMap :minZoom="6.6" :maxZoom="6.6"></GdMap>
<!-- 头部 -->
<Head></Head>
<!-- 左边 内容-->
<div class="home-aside asideL">
@ -14,18 +15,18 @@
<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>
<!-- <Warning></Warning> -->
<!-- 右边 内容-->
<div class="home-aside asideR">
<div class="asideL-top">
@ -43,6 +44,8 @@
</div>
</div>
<Entrance v-if="showEntrance" :JczData="JczData" />
<PopupWindows />
</template>
<script setup>
@ -54,43 +57,167 @@ 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 {ysSxtGetList} from '@/api/yszx.js'
import { jczgetJczList, sxtGetList } from "@/api/mosty-jcz";
import { ysSxtGetList } from '@/api/yszx.js'
import emitter from "@/utils/eventBus.js";
import PopupWindows from "@/components/popupWindows/index.vue";
import { bm, arrowhead, centralPoint } from '@/components/GdMap/xzqh.js'
import { ref, onMounted, reactive } from "vue";
import { getItem } from "@/utils/storage";
import { ref, onMounted } from "vue";
//获取所有检查站
const getjczgetJczList = () => {
jczgetJczList({}).then((res) => {
const point = res.filter((item) => item.jd && item.wd);
const gajcz = res.filter(item => item.zqlx == '1' && item.jd && item.wd)
const jcz = res.filter(item => item.zqlx == '2' && item.jd && item.wd)
const icon = require("@/assets/images/z.png");
emitter.emit("addPointArea", { coords: point, icon, flag: "jczMap_hm" });
const iconjcz = require("@/assets/point/sp.png");
emitter.emit("addPointArea", { coords: gajcz, icon, flag: "jczMap_hm" });
emitter.emit("addPointArea", { coords: jcz, icon: iconjcz, flag: "jczMap_hm" });
});
};
const makerCenter = () => {
const dw = require("@/assets/point/dingwei.png")
const coords = centralPoint.map(item => {
return { jd: item.point[0], wd: item.point[1], jzMc: item.name }
})
emitter.emit("addPointArea", { coords, icon: dw, flag: "hm", size: '14px', showTitle: true, offset: [0, -25] });
}
getjczgetJczList();
const JczData = ref();
const showEntrance = ref(false);
onMounted(() => {
getDepId()
makerCenter()
emitter.on("showJcz", (res) => {
if (res) {
// const promes = {
// jczid: res.id,
// }
showEntrance.value = true;
JczData.value = res;
// emitter.emit("deletePointArea", "jczMap_Gzy");
// sxtGetList(promes).then(resData => {
// emitter.emit("addPointArea", {
// coords: resData,
// icon: require("@/assets/point/sp.png"),
// flag: "jczMap_Gzy"
// });
// })
} else {
showEntrance.value = false;
}
});
});
const sxtGetList = () => {
ysSxtGetList().then(res => {
emitter.emit("addPointArea", {
coords: res,
icon: require("@/assets/point/sp.png"),
flag: "jczMap_Gzy"
});
})
const keyIndex = ref()
const changeXzqh = (val, trg) => {
setTimeout(() => {
// 先移除已有的边界
// 如果传入的是多个区域数据(二维数组)
const features = val.map((area, index) => ({
geometry: {
type: "Polygon",
coordinates: [area] // 确保格式正确
},
properties: {
},
type: "Feature"
}))
// 循环为每个区域创建单独的多边形,这样可以设置不同的样式
features.forEach((feature, index) => {
emitter.emit('setBoundarys', {
data: {
type: "FeatureCollection",
features: [feature]
},
color: '#cf1010',
fillColor: 'rgba(255, 255, 255, 0)',
borderColor: index == keyIndex.value ? '#ff00ff' : 'red'
})
})
getMapData()
}, 3000)
}
// sxtGetList()
const getDepId = () => {
const deptId = getItem('deptId')
const deptLevel = deptId[0].deptLevel ? deptId[0].deptLevel : null
const deptCode = deptId[0].deptCode ? deptId[0].deptCode : null
// if (deptLevel.startsWith('2')) {
const keyData = []
for (const key in bm) {
keyData.push(key)
}
const data = Object.values(bm).map(item => item);
// } else {
switch (deptCode) {
case '54040200000'://巴宜区
keyIndex.value = keyData.indexOf('542621')
// changeXzqh(bm[542621])
break;
case '54042400000'://波密县
keyIndex.value = keyData.indexOf('542625')
// changeXzqh(bm[542625])
break;
case '54042500000'://察隅县
keyIndex.value = keyData.indexOf('542626')
// changeXzqh(bm[542626])
break;
case '54042100000'://工布江达县
keyIndex.value = keyData.indexOf('542622')
// changeXzqh(bm[542622])
break;
case '54042600000'://朗县
keyIndex.value = keyData.indexOf('542627')
// changeXzqh(bm[542627])
break;
case '54042200000'://米林县
keyIndex.value = keyData.indexOf('542623')
// changeXzqh(bm[542623])
break;
case '54042300000'://墨脱县
keyIndex.value = keyData.indexOf('542624')
// changeXzqh(bm[542624])
break;
default:
const data = Object.values(bm).map(item => item);
changeXzqh(data, true)
break;
}
changeXzqh(data, true)
// }
}
// 箭头
const getMapData = () => {
let jtData = []
for (const key in arrowhead) {
jtData.push({
position: [arrowhead[key].zb],
text: arrowhead[key].name,
pyl: arrowhead[key].pyl,
})
}
// 修复后的多边形绘制代码
for (let i = 0; i < jtData.length; i++) {
console.log("正在绘制第", i, "个多边形");
emitter.emit("echoPlane", {
flag: `polygon${i}`,
type: "polygon",
coords: [jtData[i]], // 保持使用第一个数据点进行测试
fontSize: "20px",
fontColor: '#000',
isclear: false, // 暂时设为false避免清除之前的绘制
id: i,
pyl: jtData[i].pyl
});
}
}
</script>
<style lang="scss" scoped>
@ -98,6 +225,7 @@ const sxtGetList = () => {
width: 100%;
height: 100vh;
position: relative;
.home-aside {
overflow: hidden;
z-index: 3;
@ -108,14 +236,17 @@ const sxtGetList = () => {
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;
@ -124,16 +255,19 @@ const sxtGetList = () => {
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;
@ -141,6 +275,17 @@ const sxtGetList = () => {
}
}
.asideB {
position: absolute;
bottom: 50px;
z-index: 11;
left: 50%;
transform: translateX(-50%);
height: 100px;
width: 50%;
padding: 0 30px;
}
// 公用
.common-title {
padding: 0 54px;
@ -151,6 +296,7 @@ const sxtGetList = () => {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.comom-cnt {
height: calc(100% - 30px);
padding: 4px 20px;
@ -158,4 +304,5 @@ const sxtGetList = () => {
}
}
</style>

View File

@ -5,11 +5,31 @@
<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 class="zbbb" v-if="query&&JczMsg.zqlx == '1'" @click="show = true">值班报备</div>
<div v-else>
<div class="tc">
<div><img src="@/assets/images/peo.png" /></div>
<div class="hd">
<div class="name">姓名{{ username }}</div>
<div class="work">单位{{ deptName }}</div>
</div>
<el-dropdown :hide-on-click="false">
<span class="el-dropdown-link">
<el-icon :size="20" color="#fff">
<CaretBottom />
</el-icon>
</span>
<template #dropdown>
<el-dropdown-menu class="loginOut" @click="goPath">
<el-dropdown-item command="logout" >前往后台</el-dropdown-item>
</el-dropdown-menu>
<el-dropdown-menu class="loginOut" @click="goAot">
<el-dropdown-item command="logout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
</div>
<el-dialog v-model="show" width="800px" title="值班报备">
<div style="height: 50vh; overflow: auto" v-if="show">
@ -30,6 +50,7 @@
import { useRouter } from "vue-router";
import { getRecentDay, timeValidate } from "@/utils/tools.js";
import emitter from "@/utils/eventBus.js";
import { useStore } from "vuex";
import {
ref,
onMounted,
@ -37,7 +58,8 @@ import {
onUnmounted,
getCurrentInstance
} from "vue";
import zbbb from "./zbbb.vue";
const store =useStore()
const { proxy } = getCurrentInstance();
const {
D_BZ_RYMFJLB,
@ -56,7 +78,6 @@ const {
"D_QW_BBZT",
"D_QW_BC_KTS"
);
import zbbb from "./zbbb.vue";
const props = defineProps({
title: {
type: String,
@ -65,6 +86,10 @@ const props = defineProps({
query: {
type: String,
default: ""
},
JczMsg: {
type: Object,
default: () => ({})
}
});
const show = ref(false);
@ -77,10 +102,14 @@ const second = ref("00"); //秒
const hour = ref("00"); //时
const day = ref(0);
const timersfm = ref(null);
const deptName = ref('');
const username = ref('');
const router = useRouter();
const row = ref();
onMounted(() => {
//登陆用户信息
deptName.value = localStorage.getItem("deptId") ? JSON.parse(localStorage.getItem("deptId"))[0].deptName : ''
username.value = localStorage.getItem("USERNAME");
emitter.on("chengZ", (res) => {
row.value = res;
console.log(res);
@ -104,6 +133,9 @@ function CurrentTime() {
function goPath() {
router.push("/editPassword");
}
const goAot = () => {
store.dispatch("user/logout");
}
</script>
<style lang="scss" scoped>
@ -119,7 +151,7 @@ function goPath() {
position: relative;
width: 100%;
height: 65px;
z-index: 2;
z-index: 1;
background: #0e1b29;
&::after {
@ -177,5 +209,28 @@ function goPath() {
color: #fff;
cursor: pointer;
}
.tc {
position: absolute;
right: 20px;
display: flex;
top: 14px;
// width: 162px;
height: 48px;
// line-height: 48px;
background-size: 100% 100%;
color: #fff;
// background: url("~@/assets/images/btnbb.png") no-repeat center center;
// background-color: #1a4e838c;
border-radius: 5px;
align-items: center;
padding: 0 10px;
cursor: pointer;
.hd {
text-align: left;
}
}
}
</style>

View File

@ -6,6 +6,7 @@
<MOSTY.Department v-model="listQuery.ssbmdm" placeholder="请选择部门" @getDepValue="changeDep" />
</div>
<!-- v-if="['add', 'edit'].includes(pageType)" -->
<el-button size="small" type="primary" @click="_onSave" :disabled="loding">保存</el-button>
</div>
<el-form ref="formRef" class="info" :model="listQuery" :inline="true" :rules="rules">
@ -85,6 +86,7 @@
<div class="num">
{{ mjData ? mjData.length : 0 }}
</div>
<!-- <el-button size="small" type="primary" @click="openMfjDialog">添加民警</el-button> -->
<ChooseTable :deptment="deptment" v-if="!isDetail" :dic="props.dic" :configer="{
lx: 'mj',
rowKey: 'ryid',
@ -212,6 +214,7 @@
</div>
</el-form>
</div>
<ChoosePersonnel v-model="showMfDialog" @choose="chooseDataGzy" />
</template>
<script setup>
@ -221,6 +224,7 @@ import { jczqueryById } from "@/api/mosty-jcz";
import { jczsavel, Xfbbupdate } from "@/api/mosty-jcz.js";
import { ElMessage } from "element-plus";
import ChooseTable from "@/components/chooseList/chooseTable.vue";
import ChoosePersonnel from "@/components/chooseList/choosePersonnel.vue";
import { timeValidate } from "@/utils/tools.js";
import { useRoute } from "vue-router";
import emitter from "@/utils/eventBus.js";
@ -287,19 +291,19 @@ const fz = (val) => {
// 初始化数据
const init = (type) => {
pageType.value = type;
pageType.value = type==undefined||type=='add'?"add":"detail";
dialogForm.value = true;
// 根据type和row初始化表单数据
console.log(props.row, "=====================================");
if (props.row) {
listQuery.value = { ...props.row };
if (props.row.ryList.length > 0) {
if (props.row.ryList&&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) {
if (listQuery.value.qxList&&listQuery.value.qxList.length == 0) {
listQuery.value.qxList = props.dic.D_BZ_JYQXFL.map((item) => {
return { qxmc: item.label, qxsl: 0 };
});
@ -321,8 +325,6 @@ watch(
const routerList = ref({})
onMounted(() => {
init();
console.log(route.query);
routerList.value = route.query
});
// 验证规则
@ -451,6 +453,16 @@ const changeDep = (val) => {
const changeJCZ = (val) => {
console.log(val);
};
// 获取民辅警
const showMfDialog = ref(false)
// 打开民辅警弹窗
const openMfjDialog = () => {
}
const chooseDataGzy = (val) => {
mjData.value = val.filter((item) => item.fl == "01");
fjData.value = val.filter((item) => item.fl == "02");
};
</script>
<style lang="scss" scoped>

View File

@ -108,7 +108,7 @@ const kaptchaUrl = ref("");
// 数据源
const loginForm = ref({
userName: "admin",
password: "111111",
password: "123456",
kaptcha: ""
});
const loginDialog = ref(false);

View File

@ -3,7 +3,7 @@
<script setup>
import { ref, onMounted } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { useRouter,useRoute } from "vue-router";
import {
setItem
} from "@/utils/storage";
@ -11,8 +11,11 @@ const loginDialog = ref(false);
const deptList = ref([]);
const store = useStore();
function redirectAuth() {
// 从路由参数中获取token
const route = useRoute();
let token = route.query.token || null;
console.log(token,"xxxxxxxx");
let token = location.hash.slice(20) || null;
if (token != null) {
token = token.replace(/\ +/g, "");
setItem("SSOTOKEN", token)

View File

@ -0,0 +1,69 @@
<template>
<div class="sso-redirect-container">
<div class="loading-wrapper">
<div class="loading-text">正在跳转...</div>
</div>
</div>
</template>
<script setup>
import { onMounted } from "vue";
import { useRoute,useRouter } from "vue-router";
import { getItem, setItem } from "@/utils/storage";
const route = useRoute();
const router = useRouter();
// 获取路由参数url
const getUrlParam = () => {
return route.query.url || '';
};
// 检查token并进行跳转
const checkTokenAndRedirect = () => {
// 获取路由参数url
const redirectUrl = getUrlParam();
// 检查localStorage中是否存在token
const token = getItem('SSOTOKEN') || getItem('token');
if (token) {
// 如果存在token直接跳转到url参数指定的地址
if (redirectUrl) {
router.push(redirectUrl);
} else {
// 如果没有url参数跳转到首页
router.push("/");
}
} else {
setItem("FounderUrl", redirectUrl);
// 如果不存在token跳转到SSO登录地址
window.location.href = "http://192.168.0.231:8006/mosty-api/mosty-base/fzSsoLogin";
}
};
// 页面挂载时执行检查
onMounted(() => {
checkTokenAndRedirect();
});
</script>
<style scoped>
.sso-redirect-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f5f5;
}
.loading-wrapper {
text-align: center;
}
.loading-text {
font-size: 16px;
color: #666;
margin-top: 20px;
}
</style>

View File

@ -0,0 +1,114 @@
<template></template>
<script setup>
import { ref, onMounted } from "vue";
import { useStore } from "vuex";
import {
getCookie
} from "@/utils/cookie";
import {
setItem
} from "@/utils/storage";
import { getSessionForSfzh, idCardNoLogin, getSession } from "@/api/user-manage";
import {
setTimeStamp
} from "@/utils/auth";
import emitter from "@/utils/eventBus.js";
const loginDialog = ref(false);
const deptList = ref([]);
const store = useStore();
// 处理页面可见性变化的函数
const handleVisibilityChange = () => {
getSession().then(res => {
const { placeId, userId } = res.rows[0]
idCardNoLoginLogin(userId, placeId)
})
};
function redirectAuth() {
const url = window.location.href
const urlObj = new URL(url);
handleVisibilityChange()
}
// 身份证号进行登录
const idCardNoLoginLogin = (idCard, orgId) => {
idCardNoLogin({
idCardNo: idCard,
orgCode: orgId
}).then((resIdCard) => {
// 登录成功后设置token和用户信息到store
store.commit("user/setToken", resIdCard.jwtToken);
store.commit("user/setDeptList", resIdCard.deptList);
store.commit("user/setUserName", resIdCard.userName);
store.commit("user/setMenuList", resIdCard.menuList);
store.commit("user/setUserInfo", {
token: resIdCard.jwtToken,
permission: {
buttonPermission: ["removeTest", "viewTest"],
menus: resIdCard.menuCodeSet
},
menuList: resIdCard.menuList,
deptList: resIdCard.deptList
});
// 保存用户信息到本地存储
setItem("USERNAME", resIdCard.userName);
setItem("SFRH", resIdCard.sfrh);
setItem("USERID", resIdCard.userId);
setItem("menusPermission", resIdCard.menuCodeSet);
setItem("idEntityCard", resIdCard.idEntityCard);
setItem("deptId", resIdCard.deptList);
// 保存登录时间
setTimeStamp();
emitter.emit("handleClick")
// 重定向到首页
setTimeout(() => {
if (window.parent !== window.self) {
window.location.hash = window.location.href.split("#")[1];
} else {
console.log("首页");
window.location.hash = "/";
}
}, 1000);
}).catch((error) => {
console.error("免登失败:", error);
// 免登失败时重定向到登录页面
// window.location.hash = "/login";
});
}
onMounted(() => {
redirectAuth();
});
</script>
<style></style>