lcw
This commit is contained in:
@ -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%, #ffffff 100%);
|
||||
-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%;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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%;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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);
|
||||
}
|
||||
};
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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/car.png" alt="预警图片" v-else/>
|
||||
</div>
|
||||
<div class="warning-info">
|
||||
<div class="info-item">
|
||||
@ -38,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,
|
||||
@ -82,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>
|
||||
|
||||
@ -104,7 +201,7 @@ getPageList();
|
||||
}
|
||||
|
||||
.warning-image {
|
||||
width: 100px;
|
||||
width: 60px;
|
||||
height: 80px;
|
||||
img {
|
||||
width: 100%;
|
||||
|
||||
@ -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%;
|
||||
|
||||
@ -5,75 +5,107 @@
|
||||
</div>
|
||||
<div class="flex just-between align-center bt">
|
||||
<div class="headline">{{ JczData.jczmc }}</div>
|
||||
<div class="headbut" @click="enterLevel">进入检查站</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" v-if="BbMag.fzrXm">{{ BbMag?.fzrXm }}</div>
|
||||
<div class="name" v-else>暂无报备数据</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" v-if="BbMag.fzrXm">{{ BbMag?.fzrLxdh }}</div>
|
||||
<div class="name" v-else>暂无报备数据</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({
|
||||
@ -87,7 +119,7 @@ const BbMag = ref({ ryList: [] });
|
||||
const getjczqueryByIdFeign = () => {
|
||||
jczqueryById({ jczid: props.JczData.id }).then((res) => {
|
||||
BbMag.value = res;
|
||||
if (res) {
|
||||
if (res && res.ryList) {
|
||||
BbMag.value.mjsl = res.ryList.filter((el) => {
|
||||
return el.ryMfjlb == '01'
|
||||
}).length
|
||||
@ -110,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");
|
||||
};
|
||||
@ -225,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%);
|
||||
@ -274,6 +336,7 @@ countWays();
|
||||
.content {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
color: #fff;
|
||||
|
||||
.contentLeft {
|
||||
width: 50%;
|
||||
@ -341,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>
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="homeBox">
|
||||
<GdMap></GdMap>
|
||||
<GdMap :minZoom="6.6" :maxZoom="6.6"></GdMap>
|
||||
<!-- 头部 -->
|
||||
|
||||
<Head></Head>
|
||||
@ -25,7 +25,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <Warning></Warning> -->
|
||||
<!-- <Warning></Warning> -->
|
||||
|
||||
<!-- 右边 内容-->
|
||||
<div class="home-aside asideR">
|
||||
@ -42,11 +42,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="asideB" >
|
||||
<img src="@/assets/images/bi/gzy.png" @click="getsxtGetList"/>
|
||||
</div>
|
||||
</div>
|
||||
<Entrance v-if="showEntrance" :JczData="JczData" />
|
||||
|
||||
<PopupWindows />
|
||||
</template>
|
||||
|
||||
@ -63,52 +61,163 @@ 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,
|
||||
}
|
||||
// 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"
|
||||
});
|
||||
})
|
||||
// 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 getsxtGetList = () => {
|
||||
ysSxtGetList().then(res => {
|
||||
emitter.emit("deletePointArea", "jczMap_Gzy");
|
||||
emitter.emit("addPoint", {
|
||||
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)
|
||||
}
|
||||
const showDiclog = ref(true)
|
||||
getsxtGetList()
|
||||
|
||||
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>
|
||||
@ -165,9 +274,18 @@ getsxtGetList()
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.asideB{
|
||||
position: absolute;bottom: 50px;z-index:11;left: 50%;transform: translateX(-50%);height: 100px;width: 50%;padding: 0 30px;
|
||||
}
|
||||
|
||||
.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;
|
||||
@ -185,4 +303,6 @@ getsxtGetList()
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@ -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,
|
||||
@ -38,7 +59,7 @@ import {
|
||||
getCurrentInstance
|
||||
} from "vue";
|
||||
import zbbb from "./zbbb.vue";
|
||||
|
||||
const store =useStore()
|
||||
const { proxy } = getCurrentInstance();
|
||||
const {
|
||||
D_BZ_RYMFJLB,
|
||||
@ -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>
|
||||
|
||||
@ -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">
|
||||
@ -290,18 +291,19 @@ const fz = (val) => {
|
||||
|
||||
// 初始化数据
|
||||
const init = (type) => {
|
||||
pageType.value = type;
|
||||
|
||||
|
||||
pageType.value = type==undefined||type=='add'?"add":"detail";
|
||||
dialogForm.value = true;
|
||||
// 根据type和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 };
|
||||
});
|
||||
|
||||
@ -108,7 +108,7 @@ const kaptchaUrl = ref("");
|
||||
// 数据源
|
||||
const loginForm = ref({
|
||||
userName: "admin",
|
||||
password: "111111",
|
||||
password: "123456",
|
||||
kaptcha: ""
|
||||
});
|
||||
const loginDialog = ref(false);
|
||||
|
||||
@ -9,71 +9,103 @@ import {
|
||||
import {
|
||||
setItem
|
||||
} from "@/utils/storage";
|
||||
import { getSessionForSfzh, idCardNoLogin } from "@/api/user-manage";
|
||||
import {useRouter} from 'vue-router'
|
||||
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();
|
||||
function redirectAuth() {
|
||||
handleLogin();
|
||||
}
|
||||
const router = useRouter()
|
||||
const handleLogin = (e) => {
|
||||
// 先尝试获取cookie中的clientKey
|
||||
const token = getCookie("clientKey");
|
||||
|
||||
if (token) {
|
||||
// 使用clientKey获取会话信息
|
||||
getSessionForSfzh({ cookie: token }).then((res) => {
|
||||
// 使用获取到的idEntityCard进行免登
|
||||
idCardNoLogin({
|
||||
idCardNo: res
|
||||
}).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();
|
||||
// 重定向到首页
|
||||
setTimeout(() => {
|
||||
window.location.hash = "/";
|
||||
router.push("/");
|
||||
}, 1000);
|
||||
}).catch((error) => {
|
||||
console.error("免登失败:", error);
|
||||
// 免登失败时重定向到登录页面
|
||||
// window.location.hash = "/login";
|
||||
});
|
||||
}).catch((error) => {
|
||||
console.error("获取会话信息失败:", error);
|
||||
// 获取会话信息失败时重定向到登录页面
|
||||
// window.location.hash = "/login";
|
||||
});
|
||||
} else {
|
||||
console.error("没有找到clientKey cookie");
|
||||
// 没有cookie时重定向到登录页面
|
||||
window.location.hash = "/login";
|
||||
}
|
||||
// 处理页面可见性变化的函数
|
||||
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();
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user