人员替换网格,人员聚合,事件新增弹框

Lvtianfang
吕天方 1 year ago
parent f5a7176249
commit 37afdb9888

@ -2,7 +2,7 @@
# @Author: 张涛
# @Date: 2023-11-09 18:29:41
# @LastEditors: JC9527
# @LastEditTime: 2024-01-12 09:30:34
# @LastEditTime: 2024-01-23 13:54:49
# @FilePath: \JiangningUrbanManagePc\.env.development
###
# 页面标题
@ -17,7 +17,7 @@ ENV = 'development'
VUE_APP_BASE_API = 'https://t-jn-bjh-admin-server.jsszkd.com'
VUE_APP_BASE_API1 = 'https://t-kd-process-server.jsszkd.com'
VUE_APP_BASE_API2 = 'https://t-jn-development-manager-server.jsszkd.com/api/webapp'
# VUE_APP_BASE_API = 'http://192.168.0.108:9037'
# VUE_APP_BASE_API = 'http://192.168.0.104:9037'
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

@ -160,4 +160,30 @@ export function eventSaveData(params,data) {
params,
data
})
}
// 分页查询在线人员
export function onlinePeople(params){
return request({
url: "/jn/dockingEq/onlinePeople",
method:'get',
params
})
}
// 查询在线总人数
export function onlineNumSize(){
return request({
url: "/jn/dockingEq/onlineNumSize",
method:'get',
})
}
// 指挥中心列表
export function listZhzz(query) {
return request({
url: '/jn/center/list',
method: 'get',
params: query
})
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 672 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 680 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

@ -135,7 +135,7 @@ service.interceptors.response.use(res => {
console.log('err' + error)
let { message } = error;
const originalRequest = error.config;
console.log(originalRequest,'originalRequest');
// console.log(originalRequest,'originalRequest');
console.log(error.response.status,'error.response.status');
if (message == "Network Error") {
message = "后端接口连接异常";

@ -4,7 +4,7 @@
* @Author: JC9527
* @Date: 2023-08-15 09:44:13
* @LastEditors: JC9527
* @LastEditTime: 2024-01-11 10:10:12
* @LastEditTime: 2024-01-23 14:01:48
-->
<template>
<div class="left-box">
@ -72,6 +72,12 @@
<title-box title="人员在线情况"></title-box>
<map-number title="在线人员总数" :onLine="personOnLine" :sum="perpsonNum" type="人" :numberArray="peopleArray"
:height="oneHeight" :id="1" v-on="$listeners"></map-number>
<div style="display:flex;justify-content:flex-end;">
<div class="pagesBtnChange">
<div @click="changePage(1)"><i class="el-icon-arrow-left"></i></div>
<div @click="changePage(2)"><i class="el-icon-arrow-right"></i></div>
</div>
</div>
</div>
<div class="item lfet-list-two" :style="itemOne">
<title-box title="车辆在线情况"></title-box>
@ -84,7 +90,7 @@
import titleBox from '../../components/title/index.vue'
import mapNumber from '../../components/mapLeftNumber/index.vue'
import { getTrend, summarystat, tasksummarystat } from '@/api/bigScreenApi/eventApi.js'
import { getQueryViewListPage } from "@/api/bigScreenApi/index.js"
import { getQueryViewListPage, onlinePeople, onlineNumSize } from "@/api/bigScreenApi/index.js"
export default {
name: 'mapLeftContent',
components: { titleBox, mapNumber },
@ -92,29 +98,7 @@ export default {
return {
perpsonNum: 0,
personOnLine: 0,
peopleArray: [
{
title: '李飞'
}, {
title: '李飞'
}, {
title: '李飞'
}, {
title: '李飞'
}, {
title: '李飞'
}, {
title: '李飞'
}, {
title: '李飞'
}, {
title: '李飞'
}, {
title: '李飞'
}, {
title: '李飞'
},
],
peopleArray: [],
vehicleArray: [
{
userName: '苏A123456'
@ -152,6 +136,7 @@ export default {
pageNo: "1",
pageSize: "10"
},
page: 1,
eventData: {
"queryValue": [
// {
@ -169,23 +154,23 @@ export default {
},
props: ['personLine', 'carLine'],
watch: {
personLine: {
handler(newPerson) {
// console.log(newPerson,'线');
this.peopleArray = newPerson
if (newPerson) {
this.perpsonNum = newPerson.length;
let line = 0;
newPerson.forEach(element => {
if (element.status == "1") {
line += 1
}
});
this.personOnLine = line
}
},
immediate: true,
},
// personLine: {
// handler(newPerson) {
// // console.log(newPerson,'线');
// this.peopleArray = newPerson
// if (newPerson) {
// this.perpsonNum = newPerson.length;
// let line = 0;
// newPerson.forEach(element => {
// if (element.status == "1") {
// line += 1
// }
// });
// this.personOnLine = line
// }
// },
// immediate: true,
// },
carLine: {
handler(newPerson) {
// console.log(newPerson,'线');
@ -203,21 +188,64 @@ export default {
let height = dom[0].getBoundingClientRect();
let windowHeight = window.innerHeight;
// let relativeHeight = (windowHeight - height.top) / 2 - 14;
let relativeHeight = (windowHeight - height.top) / 2 + 4;
let relativeHeight = (windowHeight - height.top) / 2;
let sum = relativeHeight * 2 - 2;
// let relativeHeight2 = (windowHeight - height2.top - sum) / 2 - 55;
let relativeHeight2 = (windowHeight - height2.top - sum) / 2 - 115;
let relativeHeight2 = (windowHeight - height2.top - sum) / 2 - 110;
this.itemOne.height = relativeHeight + 'px';
this.itemTwo.height = relativeHeight2 + 'px';
this.oneHeight = Number(relativeHeight);
})
},
getEvent() {
getQueryViewListPage(this.eventList, this.eventData).then(res => {
console.log(res, 'resres');
// getQueryViewListPage(this.eventList, this.eventData).then(res => {
// console.log(res, 'resres');
// })
onlinePeople({pageNum:1,pageSize:10}).then(res=>{
this.perpsonNum = res.total;
// console.log(res.rows,"res.rows");
this.peopleArray = res.rows;
})
},
getOnline(){
onlineNumSize().then(res=>{
this.personOnLine = res.data;
})
},
changePage(id){
if(id == 1) {
if(this.page == 1) {
this.$modal.msgError("已到第一页");
return;
}
this.getOnline();
onlinePeople({pageNum:--this.page,pageSize:10}).then(res=>{
// this.personOnLine = res.rows;
this.peopleArray = res.rows;
})
} else if(id == 2) {
if(this.page == parseInt(this.perpsonNum / 10) + 1){
this.$modal.msgError("已到最后一页");
return;
}
this.getOnline();
onlinePeople({pageNum:++this.page,pageSize:10}).then(res=>{
// this.personOnLine = res.rows;
this.peopleArray = res.rows;
})
}
},
//
pagesChange(pageNum){
//
console.log(pageNum,"pageNum");
},
MYsummarystat() {
//
summarystat().then(res => {
@ -240,7 +268,8 @@ export default {
this.getDomHeight();
});
this.getDomHeight();
// this.getEvent();
this.getEvent();
this.getOnline();
// getTrend({ type: 1 }).then(res => {
// console.log(res, '');
// })
@ -257,11 +286,30 @@ export default {
.left-box {
display: grid;
grid-column: 1fr;
grid-row-gap: 24px;
grid-row-gap: 20px;
height: 100%;
.item {
.pagesBtnChange {
display: flex;
align-items: center;
z-index: 800;
div {
margin-top: 2px;
font-size: 14px;
display: flex;
align-items: center;
padding: 2px 10px;
color: #52B1FF;
border: 1px solid #52B1FF;
cursor: pointer;
margin-right: 5px;
display: flex;
align-items: center;
font-size: 15px;
line-height: 30px;
}
}
// background: rgba(222, 225, 230, 0.6);
.item-main {
margin-top: 5px;

@ -4,7 +4,7 @@
* @Author: JC9527
* @Date: 2023-08-15 11:09:57
* @LastEditors: JC9527
* @LastEditTime: 2023-12-25 11:13:11
* @LastEditTime: 2024-01-22 13:03:42
-->
<template>
<div class="right-box">
@ -168,7 +168,7 @@ export default {
.right-box {
display: grid;
grid-column: 1fr;
grid-row-gap: 20px;
grid-row-gap: 15px;
height: 100%;
.item {
// background: rgba(222, 225, 230, 0.6);

@ -236,20 +236,6 @@ div {
background-color: rgba(100, 124, 176, 0.29);
}
}
// .left-animation-enter-active{
// transition: all .8s ease;
// }
// .left-animation-enter{
// transform: translateX(510px);
// opacity: 0;
// }
// .left-animation-leave-active{
// transition: all .8s ease;
// }
// .left-animation-leave{
// transform: translateX(510px);
// opacity: 1;
// }
.left-animation-enter-active,
.left-animation-leave-active {
transition: all 1s;

@ -4,7 +4,7 @@
* @Author: JC9527
* @Date: 2024-01-09 23:08:15
* @LastEditors: JC9527
* @LastEditTime: 2024-01-17 11:34:56
* @LastEditTime: 2024-01-23 13:58:59
-->
<template>
<div class="map-main">
@ -50,7 +50,7 @@
<el-amap-info-window
v-if="personInfo.visible"
anchor="bottom-center"
:offset="[-10,-123]"
:offset="[-10,-93]"
:closeWhenClickMap="true"
:position="personInfo.position"
:visible.sync="personInfo.visible">
@ -271,7 +271,8 @@
</div>
<transition name="left-animationMap">
<div class="map-left" v-if="leftAnimationData">
<map-left :personLine="personLine" :carLine="carLine" @realTimeLocationClick="realTimeLocationClick"></map-left>
<!-- :personLine="personLine" -->
<map-left :carLine="carLine" @realTimeLocationClick="realTimeLocationClick"></map-left>
</div>
</transition>
@ -479,6 +480,7 @@ import {
getPreviewURLs,
getCarManageList,
getStreetShopList,
listZhzz,
} from "@/api/bigScreenApi";
import {
robotLogin,
@ -580,6 +582,8 @@ export default {
personLine: [], // 线
carLine: [], //
visible: false, //
onIcon:null,
offIcon:null,
};
},
methods: {
@ -599,167 +603,207 @@ export default {
// this.layers.layer2.setzIndex(10);
// this.layers.layer3.setzIndex(9);
this.$nextTick(() => {
var geojson1 = new AMap.Polygon({
path:OneGJ02.features[0].geometry.coordinates[0][0],
strokeColor: '#00C5EC',
fillColor: '#00AEFF',
fillOpacity: 0.4,
// fillOpacity: 0.3,
editable:false,
visible:true,
})
var text1 = new AMap.Text({
// position: [element.properties.CENTERX,element.properties.CENTERY],
position: getCenter(OneGJ02.features[0].geometry.coordinates[0][0]),
anchor: 'bottom-center',
text: OneGJ02.features[0].properties.NAME,
style:{
'font-size': '16px',
'font-weight': 'bold',
'text-align': 'center',
'color': '#00AEFF',
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
'white-space': 'nowrap',
},
});
var geojson2 = new AMap.Polygon({
path:TwoGJ02.features[0].geometry.coordinates[0][0],
strokeColor: '#00C5EC',
fillColor: '#00AEFF',
fillOpacity: 0.4,
// fillOpacity: 0.3,
editable:false,
visible:true,
})
var text2 = new AMap.Text({
// position: [element.properties.CENTERX,element.properties.CENTERY],
position: getCenter(TwoGJ02.features[0].geometry.coordinates[0][0]),
anchor: 'bottom-center',
text: TwoGJ02.features[0].properties.NAME,
style:{
'font-size': '16px',
'font-weight': 'bold',
'text-align': 'center',
'color': '#00AEFF',
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
'white-space': 'nowrap',
},
});
var geojson3 = new AMap.Polygon({
path:ThreeGJ02.features[0].geometry.coordinates[0][0],
strokeColor: '#00C5EC',
fillColor: '#00AEFF',
fillOpacity: 0.4,
// fillOpacity: 0.3,
editable:false,
visible:true,
})
var text3 = new AMap.Text({
// position: [element.properties.CENTERX,element.properties.CENTERY],
position: getCenter(ThreeGJ02.features[0].geometry.coordinates[0][0]),
anchor: 'bottom-center',
text: ThreeGJ02.features[0].properties.NAME,
style:{
'font-size': '16px',
'font-weight': 'bold',
'text-align': 'center',
'color': '#00AEFF',
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
'white-space': 'nowrap',
},
});
var geojson4 = new AMap.Polygon({
path:FourGJ02.features[0].geometry.coordinates[0][0],
strokeColor: '#00C5EC',
fillColor: '#00AEFF',
fillOpacity: 0.4,
// fillOpacity: 0.3,
editable:false,
visible:true,
})
// var geojson1 = new AMap.Polygon({
// path:OneGJ02.features[0].geometry.coordinates[0][0],
// strokeColor: '#00C5EC',
// fillColor: '#00AEFF',
// fillOpacity: 0.4,
// // fillOpacity: 0.3,
// editable:false,
// visible:true,
// })
// var text1 = new AMap.Text({
// // position: [element.properties.CENTERX,element.properties.CENTERY],
// position: getCenter(OneGJ02.features[0].geometry.coordinates[0][0]),
// anchor: 'bottom-center',
// text: OneGJ02.features[0].properties.NAME,
// style:{
// 'font-size': '16px',
// 'font-weight': 'bold',
// 'text-align': 'center',
// 'color': '#00AEFF',
// 'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
// 'white-space': 'nowrap',
// },
// });
// var geojson2 = new AMap.Polygon({
// path:TwoGJ02.features[0].geometry.coordinates[0][0],
// strokeColor: '#00C5EC',
// fillColor: '#00AEFF',
// fillOpacity: 0.4,
// // fillOpacity: 0.3,
// editable:false,
// visible:true,
// })
// var text2 = new AMap.Text({
// // position: [element.properties.CENTERX,element.properties.CENTERY],
// position: getCenter(TwoGJ02.features[0].geometry.coordinates[0][0]),
// anchor: 'bottom-center',
// text: TwoGJ02.features[0].properties.NAME,
// style:{
// 'font-size': '16px',
// 'font-weight': 'bold',
// 'text-align': 'center',
// 'color': '#00AEFF',
// 'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
// 'white-space': 'nowrap',
// },
// });
// var geojson3 = new AMap.Polygon({
// path:ThreeGJ02.features[0].geometry.coordinates[0][0],
// strokeColor: '#00C5EC',
// fillColor: '#00AEFF',
// fillOpacity: 0.4,
// // fillOpacity: 0.3,
// editable:false,
// visible:true,
// })
// var text3 = new AMap.Text({
// // position: [element.properties.CENTERX,element.properties.CENTERY],
// position: getCenter(ThreeGJ02.features[0].geometry.coordinates[0][0]),
// anchor: 'bottom-center',
// text: ThreeGJ02.features[0].properties.NAME,
// style:{
// 'font-size': '16px',
// 'font-weight': 'bold',
// 'text-align': 'center',
// 'color': '#00AEFF',
// 'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
// 'white-space': 'nowrap',
// },
// });
// var geojson4 = new AMap.Polygon({
// path:FourGJ02.features[0].geometry.coordinates[0][0],
// strokeColor: '#00C5EC',
// fillColor: '#00AEFF',
// fillOpacity: 0.4,
// // fillOpacity: 0.3,
// editable:false,
// visible:true,
// })
var text4 = new AMap.Text({
// position: [element.properties.CENTERX,element.properties.CENTERY],
position: getCenter(FourGJ02.features[0].geometry.coordinates[0][0]),
anchor: 'bottom-center',
text: FourGJ02.features[0].properties.NAME,
style:{
'font-size': '16px',
'font-weight': 'bold',
'text-align': 'center',
'color': '#00AEFF',
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
'white-space': 'nowrap',
},
});
var geojson5 = new AMap.Polygon({
path:kaifaqu.features[0].geometry.coordinates[0][0],
strokeColor: '#00C5EC',
fillColor: '#00AEFF',
fillOpacity: 0.4,
// fillOpacity: 0.3,
editable:false,
visible:true,
})
var text5 = new AMap.Text({
// position: [element.properties.CENTERX,element.properties.CENTERY],
position: getCenter(kaifaqu.features[0].geometry.coordinates[0][0]),
anchor: 'bottom-center',
text: kaifaqu.features[0].properties.NAME,
style:{
'font-size': '16px',
'font-weight': 'bold',
'text-align': 'center',
'color': '#00AEFF',
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
'white-space': 'nowrap',
},
});
// var text4 = new AMap.Text({
// // position: [element.properties.CENTERX,element.properties.CENTERY],
// position: getCenter(FourGJ02.features[0].geometry.coordinates[0][0]),
// anchor: 'bottom-center',
// text: FourGJ02.features[0].properties.NAME,
// style:{
// 'font-size': '16px',
// 'font-weight': 'bold',
// 'text-align': 'center',
// 'color': '#00AEFF',
// 'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
// 'white-space': 'nowrap',
// },
// });
// var geojson5 = new AMap.Polygon({
// path:kaifaqu.features[0].geometry.coordinates[0][0],
// strokeColor: '#00C5EC',
// fillColor: '#00AEFF',
// fillOpacity: 0.4,
// // fillOpacity: 0.3,
// editable:false,
// visible:true,
// })
// var text5 = new AMap.Text({
// // position: [element.properties.CENTERX,element.properties.CENTERY],
// position: getCenter(kaifaqu.features[0].geometry.coordinates[0][0]),
// anchor: 'bottom-center',
// text: kaifaqu.features[0].properties.NAME,
// style:{
// 'font-size': '16px',
// 'font-weight': 'bold',
// 'text-align': 'center',
// 'color': '#00AEFF',
// 'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
// 'white-space': 'nowrap',
// },
// });
var geojson6 = new AMap.Polygon({
path:ruanjianyuan.features[0].geometry.coordinates[0][0],
strokeColor: '#00C5EC',
fillColor: '#00AEFF',
fillOpacity: 0.4,
// fillOpacity: 0.3,
editable:false,
visible:true,
// var geojson6 = new AMap.Polygon({
// path:ruanjianyuan.features[0].geometry.coordinates[0][0],
// strokeColor: '#00C5EC',
// fillColor: '#00AEFF',
// fillOpacity: 0.4,
// // fillOpacity: 0.3,
// editable:false,
// visible:true,
// })
// var text6 = new AMap.Text({
// // position: [element.properties.CENTERX,element.properties.CENTERY],
// position: getCenter(ruanjianyuan.features[0].geometry.coordinates[0][0]),
// anchor: 'bottom-center',
// text: ruanjianyuan.features[0].properties.NAME,
// style:{
// 'font-size': '16px',
// 'font-weight': 'bold',
// 'text-align': 'center',
// 'color': '#00AEFF',
// 'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
// 'white-space': 'nowrap',
// },
// });
levelQywg({level:1}).then(res=>{
let W = [];
res.data.forEach(element=>{
let shapeStr = JSON.parse(element.shapeStr);
// console.log(shapeStr,"shapeStr");
W.push(shapeStr.features[0]);
let geojson = new AMap.Polygon({
path:shapeStr.features[0].geometry.coordinates[0],
strokeColor: '#00C5EC',
fillColor: '#00AEFF',
fillOpacity: 0.4,
// fillOpacity: 0.3,
editable:false,
visible:true,
extData:{
name: shapeStr.features[0].properties.NAME
},
})
var text = new AMap.Text({
// position: [element.properties.CENTERX,element.properties.CENTERY],
position: getCenter(shapeStr.features[0].geometry.coordinates[0]),
anchor: 'bottom-center',
text: shapeStr.features[0].properties.NAME,
style:{
'font-size': '16px',
'font-weight': 'bold',
'text-align': 'center',
'color': '#00AEFF',
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
'white-space': 'nowrap',
},
});
element.myPolygon = geojson;
element.text = text;
this.layers.layer.addOverlay(geojson);
this.layers.text.addOverlay(text);
})
this.wanggeData = res.data;
})
var text6 = new AMap.Text({
// position: [element.properties.CENTERX,element.properties.CENTERY],
position: getCenter(ruanjianyuan.features[0].geometry.coordinates[0][0]),
anchor: 'bottom-center',
text: ruanjianyuan.features[0].properties.NAME,
style:{
'font-size': '16px',
'font-weight': 'bold',
'text-align': 'center',
'color': '#00AEFF',
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
'white-space': 'nowrap',
},
});
this.layers.layer.addOverlay(geojson1);
this.layers.text.addOverlay(text1);
this.layers.layer.addOverlay(geojson2);
this.layers.text.addOverlay(text2);
this.layers.layer.addOverlay(geojson3);
this.layers.text.addOverlay(text3);
this.layers.layer.addOverlay(geojson4);
this.layers.text.addOverlay(text4);
this.layers.layer.addOverlay(geojson5);
this.layers.text.addOverlay(text5);
this.layers.layer.addOverlay(geojson6);
this.layers.text.addOverlay(text6);
// this.layers.layer.addOverlay(geojson1);
// this.layers.text.addOverlay(text1);
// this.layers.layer.addOverlay(geojson2);
// this.layers.text.addOverlay(text2);
// this.layers.layer.addOverlay(geojson3);
// this.layers.text.addOverlay(text3);
// this.layers.layer.addOverlay(geojson4);
// this.layers.text.addOverlay(text4);
// this.layers.layer.addOverlay(geojson5);
// this.layers.text.addOverlay(text5);
// this.layers.layer.addOverlay(geojson6);
// this.layers.text.addOverlay(text6);
this.map.add(this.layers.layer);
this.map.add(this.layers.text);
map.setFitView();
//
// this.stairWangge();
//
this.getWanggeGeoJson();
// this.getWanggeGeoJson();
//
this.getWeilanGeoJson();
//
@ -821,12 +865,8 @@ export default {
// zoomchange zoomstart zoomend
map.on("zoomend", (ev) => {
let zoom = map.getZoom();
console.log(zoom,'zoom层级');
if(this.actionMap == 4) {
// console.log(zoom,'zoom');
}
if(zoom < 11) {
this.componentMarker.visible = false;
this.personInfo.visible = false;
@ -846,22 +886,22 @@ export default {
if(this.layers.layer3) {
this.layers.layer3.hide();
}
if(this.layers.layer) {
this.layers.layer.show();
this.layers.text.show();
}
// if(this.layers.layer) {
// this.layers.layer.show();
// this.layers.text.show();
// }
} else if(zoom > 13.2){
if(this.layers.layer2) {
this.layers.layer2.show();
this.layers.text1.hide();
}
if(this.layers.layer) {
if(this.wanggeData.length > 0){
this.layers.layer.hide();
this.layers.text.hide();
}
}
// if(this.layers.layer) {
// if(this.wanggeData.length > 0){
// this.layers.layer.hide();
// this.layers.text.hide();
// }
// }
if(this.layers.layer3) {
this.layers.layer3.hide();
}
@ -881,33 +921,32 @@ export default {
},
//
_renderClusterMarker(context){
var factor = Math.pow(context.count / this.count, 1 / 18);
var div = document.createElement('div');
var Hue = 180 - factor * 180;
var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
div.style.backgroundColor = bgColor;
var size = Math.round(30 + Math.pow(context.count / this.count, 1 / 5) * 20);
div.style.width = div.style.height = size + 'px';
div.style.border = 'solid 1px ' + borderColor;
div.style.borderRadius = size / 2 + 'px';
div.style.boxShadow = '0 0 5px ' + shadowColor;
div.innerHTML = context.count;
div.style.lineHeight = size + 'px';
div.style.color = fontColor;
div.style.fontSize = '14px';
div.style.textAlign = 'center';
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
context.marker.setContent(div)
//
_personRenderMarker(context){
let imgSrc
if(this.onIcon && this.offIcon){
imgSrc = context.data[0].imgSrc == '1' ? this.onIcon : this.offIcon
} else {
imgSrc = context.data[0].imgSrc == '1' ? require("../../../assets/images/icon/icon1.png") : require("../../../assets/images/icon/offLine1.png")
}
var content = `<div class="markerStyles"><div class="marker-Text" style="width:${context.data[0].text.length * 15}px">${context.data[0].text}</div><img src="${imgSrc}" alt=""></div>`;
var offset = new AMap.Pixel(-27, -94);
context.marker.setContent(content)
context.marker.setOffset(offset)
context.marker.on('click',(ev)=>{
this.personInfo.position = context.data[0].position;
this.personInfo.info = context.data[0].info;
// console.log(context.data[0].info,'');
// TODO:
// getDeviceList({imei:context.data[0].info.imei}).then((res) => {
// console.log(res,"");
this.personInfo.visible = true;
// })
})
},
//
_renderMarker (context) {
var content = `<div class="markerStyles"><img src="${require("../../../assets/images/icon/icon5.png")}" alt=""></div>`;
var content = `<div class="markerStyles"><img src="${context.data[0].info.status == 1 ? require("../../../assets/images/icon/icon5.png") : require("../../../assets/images/icon/offLine4.png")}" alt=""></div>`;
var offset = new AMap.Pixel(-27, -94);
context.marker.setContent(content)
context.marker.setOffset(offset)
@ -917,6 +956,7 @@ export default {
this.monitoringInfo.visible = true;
})
},
//
_DrenderMarker(context) {
var content = `<div class="markerStyles"><div class="marker-Text" style="width:${context.data[0].info.shopName.length * 15}px">${context.data[0].info.shopName}</div><img src="${require("../../../assets/images/icon/icon6.png")}" alt=""></div>`;
var offset = new AMap.Pixel(-27, -94);
@ -944,11 +984,32 @@ export default {
let offIcon2 = require("../../../assets/images/icon/offLine2.png");
let offIcon3 = require("../../../assets/images/icon/offLine3.png");
let offIcon4 = require("../../../assets/images/icon/offLine4.png");
let imgUrl = require("../../../assets/images/icon/green.png")
var sts = [{
url: imgUrl,
size: new AMap.Size(32, 32),
offset: new AMap.Pixel(-16, -16),
textColor:"#FFFFFF",
textSize:14
}, {
url: imgUrl,
size: new AMap.Size(32, 32),
offset: new AMap.Pixel(-16, -16),
textColor:"#FFFFFF",
textSize:14
}, {
url: imgUrl,
size: new AMap.Size(32, 32),
offset: new AMap.Pixel(-18, -18),
textColor:"#FFFFFF",
textSize:14
}];
this.markers = [];
this.mapLoading = status ? false : true;
if(id == 1) {
this.personLine = [];
getDeviceList({ imei: "861316060216403,861316060216619,861316060207857,861316060214648,861316060214317,861316060215553,861316060212493,861316060214804,861316060207931,861316060216056" }).then((res) => {
let videoPoint = [];
getDeviceList().then((res) => {
this.mapLoading = false;
// console.log(res,'');
if (res.data.obj) {
@ -959,12 +1020,27 @@ export default {
obj.position[0] = element.longitude;
obj.position[1] = element.latitude;
obj.text = element.userName;
obj.imgSrc = element.status == "0" ? offIcon1 : element.status == "1"? ico1 : ico1;
obj.lnglat = new AMap.LngLat(element.longitude ? element.longitude : 0 ,element.latitude ? element.latitude : 0)
// obj.imgSrc = element.status == "0" ? offIcon1 : element.status == "1"? ico1 : ico1;
obj.imgSrc = element.status;
obj.userId = element.userId;
obj.info = element;
this.markers.push(obj)
// this.markers.push(obj)
videoPoint.push(obj)
}
})
this.count = videoPoint.length;
// console.log(videoPoint,'videoPoint');
// console.log(this.count,'this.count');
AMap.plugin(['AMap.MarkerCluster'],()=>{
this.cluster = new AMap.MarkerCluster(this.map,videoPoint,{
gridSize: 20, //
styles: sts,
maxZoom: 17,
// renderClusterMarker: this._renderClusterMarker, //
renderMarker: this._personRenderMarker, //
})
})
} else {
this.$modal.msgError("执法人员" + res.data.msg);
}
@ -981,13 +1057,6 @@ export default {
this.markers.push(obj)
this.mapLoading = false;
}
// else if (element.properties.name == "") {
// let obj = {position:[]};
// obj.position[0] = element.geometry.coordinates[0];
// obj.position[1] = element.geometry.coordinates[1];
// obj.imgSrc = ico3;
// this.markers.push(obj)
// }
})
} else if(id == 3){
point.features.forEach((element)=>{
@ -1034,7 +1103,9 @@ export default {
AMap.plugin(['AMap.MarkerCluster'],()=>{
this.cluster = new AMap.MarkerCluster(this.map,videoPoint,{
gridSize: 20, //
renderClusterMarker: this._renderClusterMarker, //
maxZoom: 17,
styles: sts,
// renderClusterMarker: this._renderClusterMarker, //
renderMarker: this._renderMarker, //
})
})
@ -1068,10 +1139,14 @@ export default {
videoPoint.push(obj)
})
this.count = videoPoint.length;
AMap.plugin(['AMap.MarkerCluster'],()=>{
AMap.plugin(['AMap.MarkerCluster','AMap.Size','AMap.Pixel'],()=>{
this.cluster = new AMap.MarkerCluster(this.map,videoPoint,{
gridSize: 20, //
renderClusterMarker: this._renderClusterMarker, //
gridSize: 60, //
styles: sts,
maxZoom: 17,
// renderClusterMarker: this._renderClusterMarker, //
renderMarker: this._DrenderMarker, //
})
})
@ -1205,9 +1280,12 @@ export default {
//
watchClick(){
this.showVideo = true;
videoSurveillance({...this.videoCondition,imei:this.personInfo.info.imei}).then(res=>{
videoSurveillance({...this.videoCondition,destID:'9999' + this.personInfo.info.imei,imei:this.personInfo.info.imei}).then(res=>{
if(res.code == 200 && res.data.msg == '操作成功') {
this.initVideoPlayer(`http://121.229.2.163:9291/live/9999_${this.personInfo.info.userId}.flv`)
// http://121.229.2.163:9291/live/9999 http://120.27.25.166:9305/live/9999_
setTimeout(()=>{
this.initVideoPlayer(`http://121.229.2.163:9291/live/9999_${this.personInfo.info.userId}.flv`)
},3000)
}
})
},
@ -1226,19 +1304,6 @@ export default {
eventBtn(){
this.$refs.crewAssign.open();
},
//
playVideo(status){
if(status == 1) {
getPreviewURLs({protocol:'hls',cameraIndexCode:this.monitoringInfo.info.cameraIndexCode,expand:"transcode=1"}).then(res=>{
if(res.code == 200) {
console.log(res);
this.$refs.aloneVideo.open(res.msg);
}
})
} else {
this.$modal.msgError("该设备已离线");
}
},
//
monitorVideos(status){
// this.$refs.videoWall.open();
@ -1279,7 +1344,7 @@ export default {
//
getWanggeGeoJson(){
bgridsetting({pageNum:1,pageSize:100}).then(res=>{
bgridsetting({pageNum:1,pageSize:100,level:1}).then(res=>{
console.log(res,"网格数据");
let W = []
res.rows.forEach((element)=>{
@ -1329,6 +1394,7 @@ export default {
//
getWeilanGeoJson(){
fence({ pageNum: 1, pageSize: 100 }).then((res) => {
// console.log(res,"");
this.weilanData = res.rows;
this.weilanData.forEach((element,index) => {
let shapeStr = JSON.parse(element.shapeStr);
@ -1556,14 +1622,18 @@ export default {
},
//
realTimeLocationClick(item){
this.map.setZoomAndCenter(16,[item.longitude,item.latitude]);
this.personLine.forEach(per=>{
if(item.imei == per.imei) {
this.map.setZoomAndCenter(16,[per.longitude,per.latitude]);
}
})
},
//
divClick(lightedPolygonId){
// console.log(lightedPolygonId,"");
console.log(lightedPolygonId,"父组件的名称点击事件");
//
this.quyuData.forEach((element) => {
element.myPolygon.setOptions({
element.myPolygon?.setOptions({
strokeOpacity: 0,
strokeColor: '#FF0000',
fillColor: '#FF0000',
@ -1571,25 +1641,25 @@ export default {
editable:false,
visible:true,
});
element.text.setStyle({
element.text?.setStyle({
'color': '#F44444',
});
})
//
this.luduanData.forEach((element) => {
element.myPolyline.setOptions({
element.myPolyline?.setOptions({
strokeOpacity: 1,
strokeColor: '#46FF77',
editable:false,
visible:true,
});
element.text.setStyle({
element.text?.setStyle({
'color': '#46FF77',
});
})
//
this.weilanData.forEach((element) => {
element.myPolygon.setOptions({
element.myPolygon?.setOptions({
strokeOpacity: 0.9,
strokeColor: "#62E1FA",
fillColor: "#62E1FA",
@ -1597,13 +1667,13 @@ export default {
editable:false,
visible:true,
});
element.text.setStyle({
element.text?.setStyle({
'color': '#62E1FA',
});
})
//
gridding.features.forEach((element)=>{
element.myPolygon.setOptions({
this.wanggeData.forEach((element)=>{
element.myPolygon?.setOptions({
strokeColor: '#FFBF7A',
fillColor: '#DC8419',
strokeOpacity: 1,
@ -1611,7 +1681,7 @@ export default {
editable:false,
visible:true,
});
element.text.setStyle({
element.text?.setStyle({
'color': '#FFDBB7',
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
});
@ -1620,8 +1690,10 @@ export default {
this.highlightedPolygonId = lightedPolygonId.id;
if(lightedPolygonId.id == 1) {
//
gridding.features.forEach((element)=>{
if(element.properties.COOD === lightedPolygonId.item.properties.COOD) {
this.wanggeData.forEach((element)=>{
// console.log(element,"element");
// let shapeStr = JSON.parse(element.shapeStr);
if(element.id === lightedPolygonId.item.id) {
element.myPolygon.setOptions({
strokeColor: '#46FF77',
fillColor: '#46FF77',
@ -1638,15 +1710,15 @@ export default {
this.map.setFitView(element.myPolygon);
} else {
element.myPolygon.setOptions({
strokeColor: '#FFBF7A',
fillColor: '#DC8419',
strokeColor: '#00C5EC',
fillColor: '#00AEFF',
fillOpacity: 0.4,
strokeOpacity: 1,
fillOpacity: 0.3,
editable:false,
visible:true,
});
element.text.setStyle({
'color': '#FFDBB7',
'color': '#00AEFF',
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
});
}
@ -1756,19 +1828,19 @@ export default {
this.isClickLingtedPolygonId = false;
if(this.highlightedPolygonId == 1) {
this.lightedPolygon.setOptions({
strokeColor: '#FFBF7A',
fillColor: '#DC8419',
strokeColor: '#00C5EC',
fillColor: '#00AEFF',
fillOpacity: 0.4,
strokeOpacity: 1,
fillOpacity: 0.3,
editable:false,
visible:true,
});
this.lightedText.setStyle({
'color': '#FFDBB7',
'color': '#00AEFF',
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
});
} else if(this.highlightedPolygonId == 2) {
console.log("进入区域取消高亮");
// console.log("");
this.lightedPolygon.setOptions({
strokeOpacity: 0,
strokeColor: '#FF0000',
@ -2057,12 +2129,34 @@ export default {
}
})
},
// 线线
getPersonIcon(){
listZhzz().then(res=>{
if(res.code == 200) {
this.onIcon = res.rows[0].onIcon ? process.env.VUE_APP_BASE_API + res.rows[0].onIcon : require("../../../assets/images/icon/icon1.png");
this.offIcon = res.rows[0].offIcon ? process.env.VUE_APP_BASE_API + res.rows[0].offIcon : require("../../../assets/images/icon/icon1.png");
// console.log(this.onIcon,'this.onIcon');
// console.log(this.offIcon,'this.offIcon');
const faviconUrl = res.rows[0].platformLogoUrl ? process.env.VUE_APP_BASE_API + res.rows[0].platformLogoUrl : require("@/assets/images/login-logo.png");
const faviconLink = document.querySelector('link[rel="icon"]');
const newLink = document.createElement('link');
newLink.setAttribute('rel', 'icon');
newLink.setAttribute('type', 'image/x-icon');
newLink.setAttribute('href', faviconUrl);
// link link
faviconLink.parentNode.replaceChild(newLink, faviconLink);
}
})
}
},
mounted() {
this.getPersonIcon();
this.getCarList();
this.getrobotToken();
// this.markerInterval()
},
};

@ -12,7 +12,7 @@
<div class="left--lists" id="box" :style="{'height':(height - lists.height + 5) + 'px'}">
<div class="main-lists" v-for="(item,index) in numberArray" :key="index" :class="(index+1) % 2 == 0? 'main-lists2':''">
<div class="list-title">
{{ item.userName || item.carCode}}
{{ item.nickName || item.carCode}}
</div>
<div class="list-right">
<div class="real-time-location" @click="realTimeLocation(item)">

@ -34,10 +34,18 @@
<template slot="label">
<div class="new-event-form">
<div class="ball"></div>
<span>事件名称</span>
<span>事件派发</span>
</div>
</template>
<el-select v-model="taskForm.task" placeholder="请选择事件">
<div class="select-input">
<el-input
placeholder="请选择事件"
v-model="taskForm.task"
clearable>
</el-input>
<div class="btn" @click="select"></div>
</div>
<!-- <el-select v-model="taskForm.task" placeholder="请选择事件">
<el-option
v-for="item in options"
:key="item.value"
@ -45,7 +53,8 @@
:value="item.value"
>
</el-option>
</el-select>
</el-select> -->
</el-form-item>
</el-col>
</el-row>
@ -58,6 +67,67 @@
</el-col>
</el-row>
</el-form>
<dia-log ref="eventDialog" width="60%" title="选择事件">
<section>
<el-table
class="exporttable"
:data="tableData"
:row-class-name="tableRowClassName"
:header-cell-style="tableHeaderCellStyle"
:row-style="{height: 40 + 'px'}"
:cell-style="{padding:0+'px'}"
style="width: 100%">
<el-table-column
prop="date"
label="事件流水号"
header-align="center"
>
</el-table-column>
<el-table-column
prop="eventName"
label="事件名称"
header-align="center"
>
</el-table-column>
<el-table-column
prop="eventType"
header-align="center"
label="事件类型">
</el-table-column>
<el-table-column
prop="eventAddress"
header-align="center"
label="事件地址">
</el-table-column>
<el-table-column
prop="eventDate"
header-align="center"
label="事件发生时间">
</el-table-column>
<el-table-column
prop=""
header-align="center"
label="操作">
<template slot-scope="scope">
<div class="btns">
<div class="btn" @click="zhipai(scope.row)"></div>
</div>
</template>
</el-table-column>
</el-table>
<div class="myPagination">
<el-pagination
background
@current-change="pageChange"
:page-sizes="[10]"
:current-page="1"
:page-size="10"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
></el-pagination>
</div>
</section>
</dia-log>
</dia-log>
</template>
<script>
@ -67,6 +137,7 @@ export default {
components:{diaLog},
data() {
return {
total:20,
title:"任务派发",
taskForm:{
task:"",
@ -78,6 +149,56 @@ export default {
]
},
info:null,
tableData: [{
date: '20240120084248951',
eventName: '事件名称',
eventType: '事件类型',
eventAddress: '地址',
eventDate:"2019-04-12"
}, {
date: '20240120084248951',
eventName: '事件名称',
eventType: '事件类型',
eventAddress: '地址',
eventDate:"2019-04-12"
}, {
date: '20240120084248951',
eventName: '事件名称',
eventType: '事件类型',
eventAddress: '地址',
eventDate:"2019-04-12"
}, {
date: '20240120084248951',
eventName: '事件名称',
eventType: '事件类型',
eventAddress: '地址',
eventDate:"2019-04-12"
}, {
date: '20240120084248951',
eventName: '事件名称',
eventType: '事件类型',
eventAddress: '地址',
eventDate:"2019-04-12"
}, {
date: '20240120084248951',
eventName: '事件名称',
eventType: '事件类型',
eventAddress: '地址',
eventDate:"2019-04-12"
}, {
date: '20240120084248951',
eventName: '事件名称',
eventType: '事件类型',
eventAddress: '地址',
eventDate:"2019-04-12"
}, {
date: '20240120084248951',
eventName: '事件名称',
eventType: '事件类型',
eventAddress: '地址',
eventDate:"2019-04-12"
}
]
}
},
mounted() {
@ -87,7 +208,7 @@ export default {
open(info){
this.info = info;
this.$refs.taskDialog.open();
this.getViewListPageList();
// this.getViewListPageList();
},
getViewListPageList(){
let data = {'queryValue' : [], "myInstanceClassify" : "all"}
@ -105,6 +226,23 @@ export default {
})
},
tableRowClassName({row, rowIndex}) {
if (rowIndex % 2 == 0) {
return 'warning-row';
} else {
return 'success-row';
}
},
tableHeaderCellStyle(){
return 'font-size: 14px;font-family: "Source Han Sans CN-Regular";font-weight: 400;color: #d3eef2;'
},
zhipai(row){
console.log("事件触发了");
},
//
select(){
this.$refs.eventDialog.open()
},
//
cancel(refForm){
this.$refs[refForm].resetFields();
@ -125,6 +263,10 @@ export default {
}
})
},
//
pageChange(pages) {
console.log(pages);
}
},
}
</script>
@ -157,6 +299,10 @@ export default {
margin-left: 15px;
}
}
.el-form-item {
width: 100%;
display: flex;
}
.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
content: ' ';
width: 0px;
@ -183,6 +329,7 @@ export default {
}
}
.el-form-item__content {
flex: 1;
// background-image: url("../../../assets/images/timebg.png");
.form-div {
font-size: 14px;
@ -192,7 +339,7 @@ export default {
line-height: 35px;
}
background-size: 100% 100%;
width: 250px;
// width: 250px;
height: 35px;
.el-input__prefix {
display: none;
@ -201,6 +348,57 @@ export default {
// background-color: transparent;
// width: 250px;
// }
.select-input {
display: flex;
align-items: center;
width: 100%;
.el-input {
background-color: transparent;
background-image: url("../../../assets/images/timebg.png");
background-size: 100% 100%;
// width: 400px;
flex: 1;
height: 35px;
}
.el-input__inner {
background-color: transparent;
border: none;
width: 100%;
height: 35px;
font-size: 14px;
font-family: "Source Han Sans CN-Medium";
font-weight: 500;
color: #e9f4ff;
}
.el-input__inner::placeholder {
/* 在这里添加你想要修改的 placeholder 样式 */
font-size: 14px;
font-family: "Source Han Sans CN-Regular";
font-weight: 400;
color: #d3eef2;
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(211, 238, 242, 0.2);
}
.btn {
width: 91px;
height: 35px;
margin: 0 20px;
background: rgba(0, 60, 116, 0.6);
box-shadow: inset 0px 0px 6px 0px #00c2ff;
border-radius: 2px 2px 2px 2px;
opacity: 1;
border: 1px solid rgba(181, 207, 255, 0.5);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-family: "Source Han Sans CN-Regular";
font-weight: 400;
color: #d3eef2;
line-height: 20px;
cursor: pointer;
}
}
.el-select {
background-color: transparent;
background-image: url("../../../assets/images/timebg.png");
@ -259,4 +457,92 @@ export default {
}
}
}
::v-deep section {
padding-right: 25px;
// .exporttable {
// border-color: #003C74;
// }
.el-table {
font-size: 14px;
font-family: "Source Han Sans CN-Regular";
font-weight: 400;
color: #d3eef2;
// line-height: 20px;
}
.el-table .warning-row {
background-color: rgba(187,220,255,0.2);
}
.el-table .success-row {
background-color: rgba(216,216,216,0.05);
}
.el-table tbody tr:hover>td {
background-color: rgba(6, 16, 33, 0) !important
}
// .el-table tbody tr {
// pointer-events:none;
// }
.el-table, .el-table__expanded-cell{
background-color: transparent;
}
.el-table td.el-table__cell {
border: none;
}
.el-table th.el-table__cell {
border: none;
}
/* 表格内背景颜色 */
.el-table th,
.el-table tr,
.el-table td {
background-color: transparent;
text-align: center;
height: 40px;
}
.el-table tr {
font-size: 14px;
font-family: "Source Han Sans CN-Regular";
font-weight: 400;
color: #d3eef2;
// line-height: 20px;
}
.el-table::before {
left: 0;
bottom: 0;
width: 100%;
height: 0px;
}
.btns {
.btn {
width: 91px;
height: 35px;
margin: 0 20px;
background: rgba(0, 60, 116, 0.6);
box-shadow: inset 0px 0px 6px 0px #00c2ff;
border-radius: 2px 2px 2px 2px;
opacity: 1;
border: 1px solid rgba(181, 207, 255, 0.5);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-family: "Source Han Sans CN-Regular";
font-weight: 400;
color: #d3eef2;
line-height: 20px;
cursor: pointer;
}
}
.myPagination {
margin-top: 20px;
display: flex;
justify-content: flex-end;
.el-pagination__total,.el-pagination__jump {
font-size: 14px;
font-family: "Source Han Sans CN-Regular";
font-weight: 400;
color: #d3eef2;
}
}
}
</style>

@ -73,7 +73,7 @@
<div class="cell-item">
<div class="item-icon"></div>
<div class="item-lable">门前三包等级</div>
<div class="item-value">{{ myShopInfo ? myShopInfo.sbLevel : '/'}}</div>
<div class="item-value">{{ myShopInfo ? myShopInfo.sbLevel == 3 ? "红牌" : myShopInfo.sbLevel == 4 ? "黄牌" : myShopInfo.sbLevel == 5 ? "绿牌" : "" : '/'}}</div>
</div>
</div>
</div>

Loading…
Cancel
Save