解决冲突
This commit is contained in:
13684185576
@ -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 {
|
||||
|
||||
@ -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%;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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,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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user