|
|
@@ -86,8 +86,11 @@
|
|
|
:key="index"
|
|
|
:position="{ lng: marker.lng, lat: marker.lat }"
|
|
|
:icon="{
|
|
|
- url: require('@/assets/images/org-icon.png'),
|
|
|
- size: { width: 20, height: 20 },
|
|
|
+ url:
|
|
|
+ marker.show && addMark
|
|
|
+ ? require('@/assets/images/org-icon2x.png')
|
|
|
+ : require('@/assets/images/org-icon.png'),
|
|
|
+ size: { width: 40, height: 40 },
|
|
|
}"
|
|
|
@mouseout="infoWindowClose(marker)"
|
|
|
>
|
|
|
@@ -96,6 +99,7 @@
|
|
|
:show="marker.show"
|
|
|
:position="{ lng: marker.lng, lat: marker.lat }"
|
|
|
@open="infoWindowOpen(marker)"
|
|
|
+ @close="marker.show = false"
|
|
|
@mouseout="infoWindowClose(marker)"
|
|
|
>
|
|
|
<div class="tankuang" v-if="!dianShow.type">
|
|
|
@@ -182,61 +186,82 @@
|
|
|
:default-time="['00:00:00', '23:59:59']"
|
|
|
@change="checkDrillDate"
|
|
|
/>
|
|
|
- <div class="real-signal">
|
|
|
+ <div class="real-signal" :style="{ height: wheight - 30 + 'px' }">
|
|
|
<div>
|
|
|
<div class="title">恶意动态</div>
|
|
|
- <div
|
|
|
- class="cont"
|
|
|
- @click="lookPosition(items, 'eyi')"
|
|
|
- v-for="(items, indexs) in realTimeDataY"
|
|
|
- :key="indexs"
|
|
|
- style="float: left"
|
|
|
- >
|
|
|
- <span class="positions" style="float: left; width: 50px"
|
|
|
- ><img src="../assets/images/MapPin.png" alt="" /><span
|
|
|
- >位置</span
|
|
|
- ></span
|
|
|
- >
|
|
|
- <span
|
|
|
- class="realname"
|
|
|
- style="float: left; width: 50px; text-align: center"
|
|
|
- >{{ items.type }}</span
|
|
|
- >
|
|
|
- <span style="float: left; width: 100px; text-align: left">{{
|
|
|
- items.name
|
|
|
- }}</span>
|
|
|
- <span
|
|
|
- class="illegal"
|
|
|
- style="float: left; width: 180px; text-align: left"
|
|
|
- >{{ items.keyword }}</span
|
|
|
+ <div v-if="realTimeDataY.length > 0">
|
|
|
+ <div
|
|
|
+ class="cont"
|
|
|
+ @click="lookPosition(items, 'eyi')"
|
|
|
+ v-for="(items, indexs) in realTimeDataY"
|
|
|
+ :key="indexs"
|
|
|
+ style="float: left"
|
|
|
>
|
|
|
+ <span class="positions" style="float: left; width: 50px"
|
|
|
+ ><img src="../assets/images/MapPin.png" alt="" /><span
|
|
|
+ >位置</span
|
|
|
+ ></span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ class="realname"
|
|
|
+ style="float: left; width: 50px; text-align: center"
|
|
|
+ >{{ items.type }}</span
|
|
|
+ >
|
|
|
+ <span style="float: left; width: 150px; text-align: left">{{
|
|
|
+ items.mac
|
|
|
+ }}</span>
|
|
|
+ <span
|
|
|
+ class="illegal"
|
|
|
+ style="float: left; width: 60px; text-align: left"
|
|
|
+ >{{ items.keyword }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ class="illegal"
|
|
|
+ style="float: left; width: 160px; text-align: left"
|
|
|
+ >{{ items.name }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <div v-else class="notrends">暂无恶意动态</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="real-signal real-signal-n">
|
|
|
+ <div
|
|
|
+ class="real-signal real-signal-n"
|
|
|
+ :style="{ height: wheight - 20 + 'px', top: wheight + 5 + 'px' }"
|
|
|
+ >
|
|
|
<div>
|
|
|
<div class="title">上报动态</div>
|
|
|
- <div
|
|
|
- class="cont"
|
|
|
- @click="lookPosition(items, 'noeyi')"
|
|
|
- v-for="(items, indexs) in realTimeDataN"
|
|
|
- :key="indexs"
|
|
|
- >
|
|
|
- <span class="positions" style="float: left; width: 100px"
|
|
|
- ><img src="../assets/images/MapPin.png" alt="" /><span
|
|
|
- >位置</span
|
|
|
- ></span
|
|
|
- >
|
|
|
- <span
|
|
|
- class="realname"
|
|
|
- style="float: left; width: 100px; text-align: center"
|
|
|
- >{{ items.type }}</span
|
|
|
- >
|
|
|
- <span
|
|
|
- class="realname"
|
|
|
- style="float: left; width: 200px; text-align: center"
|
|
|
- >{{ items.name }}</span
|
|
|
+ <div v-if="realTimeDataN.length > 0">
|
|
|
+ <div
|
|
|
+ class="cont"
|
|
|
+ @click="lookPosition(items, 'noeyi')"
|
|
|
+ v-for="(items, indexs) in realTimeDataN"
|
|
|
+ :key="indexs"
|
|
|
>
|
|
|
+ <span class="positions" style="float: left; width: 100px"
|
|
|
+ ><img src="../assets/images/MapPin.png" alt="" /><span
|
|
|
+ >位置</span
|
|
|
+ ></span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ class="realname"
|
|
|
+ style="float: left; width: 100px; text-align: center"
|
|
|
+ >{{ items.type }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ class="realname"
|
|
|
+ style="float: left; width: 200px; text-align: center"
|
|
|
+ >{{ items.name }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ class="illegal"
|
|
|
+ style="float: left; width: 180px; text-align: left"
|
|
|
+ >{{ items.mac }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else class="notrends">
|
|
|
+ 暂无上报动态
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -291,7 +316,8 @@ export default {
|
|
|
},
|
|
|
created() {
|
|
|
this.$nextTick(() => {
|
|
|
- this.wheight = document.getElementById("contbody").clientHeight;
|
|
|
+ this.wheight = document.getElementById("contbody").clientHeight / 2;
|
|
|
+ console.log("first", this.wheight);
|
|
|
});
|
|
|
// this.getList();
|
|
|
// 头部数据
|
|
|
@@ -311,7 +337,9 @@ export default {
|
|
|
window.WSObj.regWsCall("getxy", function (data) {
|
|
|
if (data.illegal == "Y") {
|
|
|
_this.realTimeDataY.unshift(data);
|
|
|
- _this.$modal.msgError(`发现恶意${data.type} ${data.name} ${data.mac} ${data.time} `);
|
|
|
+ _this.$modal.msgError(
|
|
|
+ `发现恶意${data.type} ${data.name} ${data.mac} ${data.time} `
|
|
|
+ );
|
|
|
} else if (data.illegal == "N") {
|
|
|
_this.realTimeDataN.unshift(data);
|
|
|
}
|
|
|
@@ -340,6 +368,7 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
lookPosition(items, iseyi) {
|
|
|
+ this.topData.info = this.topData.info.filter((i) => i.identify != 1);
|
|
|
this.iseyi = iseyi;
|
|
|
this.dianShow = items;
|
|
|
console.log("itemssssssssss", items);
|
|
|
@@ -347,35 +376,35 @@ export default {
|
|
|
this.$message.error("坐标错误！");
|
|
|
return;
|
|
|
}
|
|
|
- console.log("center", this.center);
|
|
|
// this.realTimeInfo();
|
|
|
- let addMark = true;
|
|
|
+ this.addMark = true;
|
|
|
//查看位置
|
|
|
this.center = { lng: 104.064856, lat: 30.658876 };
|
|
|
this.$nextTick(() => {
|
|
|
this.center = { lng: items.lng, lat: items.lat };
|
|
|
+ this.topData.info.forEach((item) => {
|
|
|
+ if (
|
|
|
+ item.lat == items.lat &&
|
|
|
+ item.lng == items.lng &&
|
|
|
+ item.identify != 1
|
|
|
+ ) {
|
|
|
+ console.log(item, "sdfsf", this.center);
|
|
|
+ item.show = true; //弹框显示
|
|
|
+ // addMark = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // if (addMark) {
|
|
|
+ // this.topData.info = this.topData.info.filter((i) => i.identify != 1);
|
|
|
+ this.topData.info.push({
|
|
|
+ show: true, //弹框显示
|
|
|
+ lat: items.lat,
|
|
|
+ lng: items.lng,
|
|
|
+ identify: 1,
|
|
|
+ });
|
|
|
+ this.zoom = 19;
|
|
|
+ console.log("this.topData.info", this.topData.info);
|
|
|
+ // }
|
|
|
});
|
|
|
- this.topData.info.forEach((item) => {
|
|
|
- if (
|
|
|
- item.lat == items.lat &&
|
|
|
- item.lng == items.lng &&
|
|
|
- item.identify != 1
|
|
|
- ) {
|
|
|
- console.log(item, "sdfsf", this.center);
|
|
|
- item.show = true;
|
|
|
- addMark = false;
|
|
|
- }
|
|
|
- });
|
|
|
- // if (addMark) {
|
|
|
- // this.topData.info = this.topData.info.filter((i) => i.identify != 1);
|
|
|
- this.topData.info.push({
|
|
|
- show: true,
|
|
|
- lat: items.lat,
|
|
|
- lng: items.lng,
|
|
|
- identify: 1,
|
|
|
- });
|
|
|
- console.log("this.topData.info", this.topData.info);
|
|
|
- // }
|
|
|
},
|
|
|
//选择周，天。。。
|
|
|
choiceTime(selectedValue) {
|
|
|
@@ -395,9 +424,9 @@ export default {
|
|
|
},
|
|
|
//关闭点位
|
|
|
infoWindowClose(marker) {
|
|
|
- this.topData.info = this.topData.info.filter((i) => i.identify != 1);
|
|
|
marker.show = false;
|
|
|
this.dianShow = {};
|
|
|
+ this.addMark = false;
|
|
|
this.$forceUpdate();
|
|
|
},
|
|
|
//鼠标移动到点位上显示点位信息
|
|
|
@@ -442,20 +471,20 @@ export default {
|
|
|
<style lang="scss" scoped>
|
|
|
.container {
|
|
|
background-color: #f6f6f6 !important;
|
|
|
- height: 93vh;
|
|
|
+ height: 90vh;
|
|
|
width: 100%;
|
|
|
}
|
|
|
.main {
|
|
|
+ overflow: hidden;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
margin: 0 32px 32px;
|
|
|
- overflow: hidden;
|
|
|
height: 100%;
|
|
|
}
|
|
|
.nav {
|
|
|
display: flex;
|
|
|
justify-content: space-around;
|
|
|
- min-height: 160px;
|
|
|
+ min-height: 130px;
|
|
|
margin: 32px 0 24px;
|
|
|
& > div {
|
|
|
& > div {
|
|
|
@@ -690,9 +719,8 @@ export default {
|
|
|
//实时信号
|
|
|
.real-signal,
|
|
|
.real-signal-n {
|
|
|
- height: 310px;
|
|
|
overflow-y: auto;
|
|
|
- width: 400px;
|
|
|
+ width: 500px;
|
|
|
right: 24px;
|
|
|
top: 24px;
|
|
|
position: absolute;
|
|
|
@@ -741,9 +769,13 @@ export default {
|
|
|
}
|
|
|
.real-signal-n {
|
|
|
right: 24px;
|
|
|
- top: 340px;
|
|
|
}
|
|
|
.dian-show {
|
|
|
width: 150px;
|
|
|
}
|
|
|
+.notrends{
|
|
|
+ text-align: center;
|
|
|
+ color: #999595;
|
|
|
+ margin-top: 30px;
|
|
|
+}
|
|
|
</style>
|
“yueshang”
