suzhou-jichuang-lanhai
/
JiangningUrbanManagePc
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

merge into: suzhou-jichuang-lanhai:master
Branches Tags
suzhou-jichuang-lanhai:prodLv
suzhou-jichuang-lanhai:xuhongjie
suzhou-jichuang-lanhai:master
suzhou-jichuang-lanhai:prod
suzhou-jichuang-lanhai:Lvtianfang
suzhou-jichuang-lanhai:develop-fix
suzhou-jichuang-lanhai:development-local
suzhou-jichuang-lanhai:lijinlong
suzhou-jichuang-lanhai:dhy
...
pull from: suzhou-jichuang-lanhai:prodLv
Branches Tags
suzhou-jichuang-lanhai:prodLv
suzhou-jichuang-lanhai:xuhongjie
suzhou-jichuang-lanhai:master
suzhou-jichuang-lanhai:prod
suzhou-jichuang-lanhai:Lvtianfang
suzhou-jichuang-lanhai:develop-fix
suzhou-jichuang-lanhai:development-local
suzhou-jichuang-lanhai:lijinlong
suzhou-jichuang-lanhai:dhy

5 Commits
master ... prodLv

Author SHA1 Message Date
吕天方 2412579e96 新增跳转地址
3 months ago
吕天方 2a041db047 车辆行程轨迹使用假数据 车辆状态由行驶中改为未启动
3 months ago
吕天方 f9ce658f49 厂中厂园中园视频点击事件、模拟登录接口调用
3 months ago
吕天方 fa8c0c9e54 增加厂中厂园中园图层、监控视频图层增加分类筛选
4 months ago
吕天方 988f5784ec 地图人员点位接口更换、新增班次显示
5 months ago
11 changed files with 644 additions and 213 deletions
Show Stats

2
.env.development
Unescape View File

@ -2,7 +2,7 @@
# @Author: 张涛 # @Author: 张涛
# @Date: 2023-11-09 18:29:41 # @Date: 2023-11-09 18:29:41
# @LastEditors: JC9527 # @LastEditors: JC9527
# @LastEditTime: 2024-05-15 13:40:14 # @LastEditTime: 2024-10-15 10:27:32
# @FilePath: \JiangningUrbanManagePc\.env.development # @FilePath: \JiangningUrbanManagePc\.env.development
### ###
# 页面标题 # 页面标题

44
src/api/bigScreenApi/index.js
Unescape View File

@ -22,15 +22,33 @@ export function getVideoPageEq(params) {
params params
}) })
} }
// 获取流URL // 厂中厂园中园监控
export function getPreviewURLs(params) { export function DeviceListNewRequest(params) {
return request({
url: "/jn/vcp/DeviceListNewRequest",
method:'get',
params
})
}
// 获取视频流
export function getDeviceMediaUrlHls(params){
return request({ return request({
url: "/jn/video/previewURLs", url: "/jn/vcp/getDeviceMediaUrlHls",
method:'get', method:'get',
params params
}) })
} }
// 获取流URL
// export function getPreviewURLs(params) {
// return request({
// url: "/jn/video/previewURLs",
// method:'get',
// params
// })
// }
// 终端设备坐标采集、在线状态接口 // 终端设备坐标采集、在线状态接口
export function getDeviceList(params) { export function getDeviceList(params) {
return request({ return request({
@ -140,6 +158,24 @@ export function getUserinfo(params){
// } // }
}) })
} }
// 视频监控获取
export function getVideoDevice(params) {
return request({
baseURL: process.env.VUE_APP_BASE_API2,
url: "/biz/VideoDevice/page",
method:'get',
params,
})
}
// 视频url获取
export function getPreviewURLs(params) {
return request({
baseURL: process.env.VUE_APP_BASE_API2,
url: "/videoSpnl/previewURLs",
method:'get',
params,
})
}
// 事件列表查询 // 事件列表查询
export function getQueryViewListPage(params,data) { export function getQueryViewListPage(params,data) {
@ -201,7 +237,7 @@ export function getUserByImei(params){
// 根据手机号和人员名称查询 // 根据手机号和人员名称查询
export function dwgjList(params){ export function dwgjList(params){
return request({ return request({
url: '/jn/dwgj/list', url: '/jn/scheduling/allList',
method: 'get', method: 'get',
params params
}) })

BIN
src/assets/images/icon7.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

26
src/assets/styles/amap.scss
Unescape View File

@ -20,6 +20,32 @@
background-image: url('../images/personInfo.png'); background-image: url('../images/personInfo.png');
background-size: 100% 100%; background-size: 100% 100%;
margin-bottom: 5px; margin-bottom: 5px;
// overflow: hidden;
// white-space: nowrap;
// text-overflow: ellipsis;
}
.tag {
display: flex;
// grid-template-columns: 1fr,1fr;
// column-gap: 5px;
background-image: url('../images/personInfo.png');
background-size: 100% 100%;
span {
color: #ffb300;
// background-color: rgba(255,179,0,0.3);
font-size: 12px;
line-height: 20px;
// padding: 5px;
display: flex;
justify-content: center;
width: 40px;
&:nth-of-type(2) {
margin-left: 5px;
}
&:nth-of-type(2) {
margin-left: 5px;
}
}
} }
img { img {
// width: 54px; // width: 54px;

107
src/utils/data/carTrack.json
Unescape View File

@ -0,0 +1,107 @@
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"id": 81370,
"properties": {
"_draw_type": "line"
},
"geometry": {
"type": "LineString",
"coordinates": [
[
118.79807494,
31.94347206
],
[
118.79913133,
31.93427172
],
[
118.8076934,
31.93521538
],
[
118.80850954,
31.92890365
],
[
118.81906195,
31.92842336
],
[
118.81889553,
31.93096601
],
[
118.81876239,
31.93181355
],
[
118.81892884,
31.93232207
],
[
118.81969448,
31.93316959
],
[
118.81956133,
31.93384761
],
[
118.81862926,
31.93429962
],
[
118.8179635,
31.93537313
],
[
118.81788248,
31.93900338
],
[
118.81856548,
31.94062961
],
[
118.81802194,
31.94263941
],
[
118.81879847,
31.94310067
],
[
118.82636959,
31.94316657
],
[
118.82625314,
31.94507748
],
[
118.82128337,
31.94484686
],
[
118.8077718,
31.94405614
],
[
118.7980264,
31.94349604
]
]
},
"bbox": [
118.7980264,
31.92842336,
118.82636959,
31.94507748
]
}
]
}

4
src/utils/request.js
Unescape View File

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

20
src/views/bigScreen/components/mapLeftContent.vue
Unescape View File

@ -4,7 +4,7 @@
* @Author: JC9527 * @Author: JC9527
* @Date: 2023-08-15 09:44:13 * @Date: 2023-08-15 09:44:13
* @LastEditors: JC9527 * @LastEditors: JC9527
* @LastEditTime: 2024-09-05 17:30:07 * @LastEditTime: 2024-09-24 11:12:07
--> -->
<template> <template>
<div class="left-wai-box"> <div class="left-wai-box">
@ -71,7 +71,7 @@
</div> </div>
<div class="item lfet-list-one" id="parent-getHeight" :style="itemOne"> <div class="item lfet-list-one" id="parent-getHeight" :style="itemOne">
<title-box title="人员在线情况" :id="1"></title-box> <title-box title="人员在线情况" :id="1"></title-box>
<map-number title="在线人员总数" :onLine="personOnLine" :sum="perpsonNum" type="人" @unfold="unfold" :numberArray="peopleArray" <map-number title="在线人员总数" :currentClasses="currentClasses" :onLine="personOnLine" :sum="perpsonNum" type="人" @unfold="unfold" :numberArray="peopleArray"
:height="oneHeight" :id="1" v-on="$listeners"></map-number> :height="oneHeight" :id="1" v-on="$listeners"></map-number>
<div style="display:flex;justify-content:flex-end;"> <div style="display:flex;justify-content:flex-end;">
<div class="pagesBtnChange"> <div class="pagesBtnChange">
@ -209,6 +209,7 @@ export default {
personLoading:false, personLoading:false,
isBreadcrumb:true, isBreadcrumb:true,
account:"", account:"",
currentClasses: "白班"
} }
}, },
props: ['personLine', 'carLine'], props: ['personLine', 'carLine'],
@ -441,7 +442,20 @@ export default {
this.getEvent(); this.getEvent();
this.getOnline(); this.getOnline();
this.account = localStorage.getItem('account') this.account = localStorage.getItem('account')
this.MYsummarystat() this.MYsummarystat();
const now = new Date();
const hours = now.getHours() < 10 ? '0' + now.getHours() : now.getHours();
const minutes = now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes();
let currentTime = hours + ':' + minutes;
if(currentTime > '07:30' && currentTime < '17:30') {
this.currentClasses = '白班'
} else if(currentTime > '17:30' && currentTime < '21:30'){
this.currentClasses = '值班/定岗'
} else{
this.currentClasses = '夜班'
}
}, },
} }
</script> </script>

74
src/views/bigScreen/index.vue
Unescape View File

@ -4,7 +4,7 @@
* @Author: JC9527 * @Author: JC9527
* @Date: 2023-08-14 14:40:02 * @Date: 2023-08-14 14:40:02
* @LastEditors: JC9527 * @LastEditors: JC9527
* @LastEditTime: 2024-01-23 17:53:57 * @LastEditTime: 2024-12-10 16:44:15
--> -->
<template> <template>
<div class="pc-container"> <div class="pc-container">
@ -17,13 +17,9 @@
<div class="system-title" text="城市精细化管理监测主题"> <div class="system-title" text="城市精细化管理监测主题">
城市精细化管理监测主题 城市精细化管理监测主题
</div> </div>
<!-- <div class="right-tags"> <div class="right-tags">
<el-input <div @click="goUrl" class="title-num">数据概览</div>
placeholder="请输入设备名称" </div>
v-model="input">
<i slot="suffix" class="el-icon-search" @click="search"></i>
</el-input>
</div> -->
</div> </div>
<transition name="left-animation"> <transition name="left-animation">
<div :class="backgroundId == 1 ? 'map-before-left' : 'change-map-before-left'" v-show="leftAnimation"></div> <div :class="backgroundId == 1 ? 'map-before-left' : 'change-map-before-left'" v-show="leftAnimation"></div>
@ -100,7 +96,10 @@ export default {
changeBackground(id){ changeBackground(id){
// console.log(id); // console.log(id);
this.backgroundId = id; this.backgroundId = id;
} },
goUrl(){
window.open('http://10.236.2.28:54567/screen/new-tube')
},
// getcodeImg(){ // getcodeImg(){
// getInfo().then(res => { // getInfo().then(res => {
// console.log(res,'codeImgres'); // console.log(res,'codeImgres');
@ -348,43 +347,28 @@ div {
line-height: 26px; line-height: 26px;
} }
} }
// .right-tags { .right-tags {
// padding-top: 16px; z-index: 600;
display: flex;
justify-content: flex-end;
text-align: right;
.title-num {
margin-top: 35px;
display: flex;
align-items: center;
padding: 0px 20px;
// color: #52B1FF;
color: #fff;
border: 1px solid #52B1FF;
cursor: pointer;
font-size: 15px;
height: 30px;
// background-color: #077fff;
border-radius: 5px;
margin-left: 10px;
}
}
// ::v-deep .el-input {
// border: 1px solid #D3EEF2;
// border-radius: 3px;
// .el-input__inner {
// background-color: transparent;
// width: 296px;
// height: 30px;
// color: #fff;
// border: none;
// }
// .el-input__inner::placeholder {
// /* 在这里添加你想要修改的 placeholder 样式 */
// font-size: 14px;
// font-family: Source Han Sans CN-Regular, Source Han Sans CN;
// font-weight: 400;
// color: #D3EEF2;
// line-height: 20px;
// }
// }
// // ::v-deep .el-icon-search:before {
// // font-size: 20px;
// // }
// // ::v-deep .el-input__icon {
// // line-height: 30px;
// // }
// ::v-deep .el-input__suffix {
// line-height: 35px;
// color: #D3EEF2;
// cursor: pointer;
// .el-icon-search:before {
// font-size: 20px;
// }
// }
// }
} }
.child-view { .child-view {
position: absolute; position: absolute;

471
src/views/bigScreen/map/index.vue
Unescape View File

@ -4,7 +4,7 @@
* @Author: JC9527 * @Author: JC9527
* @Date: 2024-01-09 23:08:15 * @Date: 2024-01-09 23:08:15
* @LastEditors: JC9527 * @LastEditors: JC9527
* @LastEditTime: 2024-09-14 15:28:34 * @LastEditTime: 2024-11-28 14:58:43
--> -->
<template> <template>
<div class="map-main"> <div class="map-main">
@ -39,12 +39,15 @@
<!-- <el-amap-geojson @init="initLocation" :geo="jiangninggeo" ref="geojson" :polygon-options="polygonOptions" :visible="true" :draggable="draggable"></el-amap-geojson> --> <!-- <el-amap-geojson @init="initLocation" :geo="jiangninggeo" ref="geojson" :polygon-options="polygonOptions" :visible="true" :draggable="draggable"></el-amap-geojson> -->
<!-- marker标记点 --> <!-- marker标记点 -->
<el-amap-marker v-for="(marker, index) in markers" :key="index + 'marker'" :visible="componentMarker.visible" :offset='markerOffset' :position="marker.position" :draggable="false" @click="(e)=> clickMarker(marker,e)"> <!-- <el-amap-marker v-for="(marker, index) in markers" :key="index + 'marker'" :visible="componentMarker.visible" :offset='markerOffset' :position="marker.position" :draggable="false" @click="(e)=> clickMarker(marker,e)">
<div class="markerStyles"> <div class="markerStyles">
<div v-if="marker.text" class="marker-Text">{{marker.text}}</div> <div v-if="marker.text" class="marker-Text">{{marker.text}}</div>
<div class="tag">
<span></span>
</div>
<img :src="marker.imgSrc" alt=""> <img :src="marker.imgSrc" alt="">
</div> </div>
</el-amap-marker> </el-amap-marker> -->
<!-- 人员信息弹框 --> <!-- 人员信息弹框 -->
<el-amap-info-window <el-amap-info-window
@ -216,15 +219,15 @@
<div class="dot"></div> <div class="dot"></div>
<div class="name">点位名称：</div> <div class="name">点位名称：</div>
</div> </div>
<div class="position">{{ monitoringInfo.info.name }}</div> <div class="position">{{ monitoringInfo.info.name || monitoringInfo.info.deviceName }}</div>
</div> </div>
<div class="person-info"> <!-- <div class="person-info">
<div class="info-left"> <div class="info-left">
<div class="dot"></div> <div class="dot"></div>
<div class="name">在线状态：</div> <div class="name">在线状态：</div>
</div> </div>
<div class="position">{{ monitoringInfo.info.status == 1 ? "在线":"离线" }}</div> <div class="position">{{ monitoringInfo.info.status == 1 ? "在线":"离线" }}</div>
</div> </div> -->
<div class="person-info"> <div class="person-info">
<div class="info-left"> <div class="info-left">
<div class="dot"></div> <div class="dot"></div>
@ -336,6 +339,15 @@
<img src="@/assets/images/createdTask.png" alt="" /> <img src="@/assets/images/createdTask.png" alt="" />
</div> </div>
</div> </div>
<div class="monitoring-switch" v-if="!MyInput && actionMap == 4">
<div class="switchItems" v-for="(item,index) in switches" :key="index">
<el-switch
v-model="item.active"
@change="handleSwitchChange(index,item.id)">
</el-switch>
<div class="monitoring-type">{{ item.title }}</div>
</div>
</div>
<div <div
class="middle-bottom-left" class="middle-bottom-left"
:class="!leftAnimationData ? 'middle-bottom-left2' : 'middle-bottom-left'" :class="!leftAnimationData ? 'middle-bottom-left2' : 'middle-bottom-left'"
@ -380,6 +392,14 @@
<span>监控视频</span> <span>监控视频</span>
</div> </div>
</div> </div>
<div class="list" @click="changeMap(6)">
<div class="leftbg" :class="actionMap == 6 ? 'action-map' : ''">
<img class="images" src="@/assets/images/icon7.png" alt="" />
</div>
<div class="rightbg rightbgTwo" v-show="actionMap == 6">
<span>厂中厂园中园监控</span>
</div>
</div>
<div class="list" @click="changeMap(5)"> <div class="list" @click="changeMap(5)">
<div class="leftbg" :class="actionMap == 5 ? 'action-map' : ''"> <div class="leftbg" :class="actionMap == 5 ? 'action-map' : ''">
<img src="@/assets/images/icon6.png" alt="" /> <img src="@/assets/images/icon6.png" alt="" />
@ -520,7 +540,11 @@ import {
getStreetShopList, getStreetShopList,
listZhzz, listZhzz,
getUserByImei, getUserByImei,
dwgjList dwgjList,
onlinePeople,
DeviceListNewRequest,
getDeviceMediaUrlHls,
getVideoDevice
} from "@/api/bigScreenApi"; } from "@/api/bigScreenApi";
import { import {
previewURLs, previewURLs,
@ -557,6 +581,11 @@ export default {
componentMarker: { componentMarker: {
visible: true, visible: true,
}, },
switches: [
{ active: true, title: "视频监控", id: 1 },
{ active: false, title: "算法监控", id: 2 },
{ active: false, title: "自建监控", id: 3 },
],
// 所有点位信息 // 所有点位信息
markers:[], markers:[],
// 人员弹框信息 // 人员弹框信息
@ -874,7 +903,10 @@ export default {
}, },
// 视频非聚合自定义样式及点击事件 // 视频非聚合自定义样式及点击事件
_renderMarker (context) { _renderMarker (context) {
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>`; // ${<span v-for="(item,index) in context.data[0].info.videoTagsList">item.name</span>}
// ${context.data[0].info.videoTagsList?.map(item => `<span>${item.name}</span>`).join('')}
// 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 content = `<div class="markerStyles"><div class="tag">${context.data[0].info.videoTagsList?.map(item => `<span>${item.name}</span>`).join('')}</div><img src="${require("../../../assets/images/icon/icon5.png")}" alt=""></div>`;
var offset = new AMap.Pixel(-13.5, -15); var offset = new AMap.Pixel(-13.5, -15);
context.marker.setContent(content) context.marker.setContent(content)
context.marker.setOffset(offset) context.marker.setOffset(offset)
@ -884,6 +916,28 @@ export default {
this.monitoringInfo.visible = true; this.monitoringInfo.visible = true;
}) })
}, },
// 厂中厂园中园视频非聚合自定义样式及点击事件
_renderMarkerTwo (context) {
// ${context.data[0].info.deviceName.length * 17}
var content = `<div class="markerStyles"><div class="marker-Text" style="width:85px">${context.data[0].info.deviceName}</div><img src="${require("../../../assets/images/icon/icon5.png")}" alt=""></div>`;
let strLength = context.data[0].info.deviceName.length / 5;
var offset = new AMap.Pixel(-28.5, -(Math.floor(strLength) * 36));
context.marker.setContent(content)
context.marker.setOffset(offset)
context.marker.on('click',(ev)=>{
// this.monitoringInfo.position = context.data[0].position;
// this.monitoringInfo.info = context.data[0].info;
// this.monitoringInfo.visible = true;
getDeviceMediaUrlHls({deviceCode:context.data[0].info.deviceCode}).then(res=>{
if(res.url) {
this.$refs.aloneVideo.open(res.url);
}
// else {
// this.$modal.msgError(res.msg);
// }
})
})
},
// 店铺非聚合自定义样式及点击事件 // 店铺非聚合自定义样式及点击事件
_DrenderMarker(context) { _DrenderMarker(context) {
// <div class="marker-Text" style="width:${context.data[0].info.shopName.length * 15}px">${context.data[0].info.shopName}</div> // <div class="marker-Text" style="width:${context.data[0].info.shopName.length * 15}px">${context.data[0].info.shopName}</div>
@ -934,17 +988,16 @@ export default {
textColor:"#FFFFFF", textColor:"#FFFFFF",
textSize:14 textSize:14
}]; }];
this.markers = [];
this.mapLoading = status ? false : true; this.mapLoading = status ? false : true;
if(id == 1) { if(id == 1) {
this.personLine = []; this.personLine = [];
this.videoPoint = []; this.videoPoint = [];
// 获取人员信息 // 获取人员信息
getDeviceList().then((res) => { onlinePeople().then((res) => {
this.mapLoading = false; this.mapLoading = false;
// console.log(res,'点位信息'); // console.log(res,'点位信息');
if (res.data.obj) { if (res.data) {
res.data.obj.forEach((element) => { res.data.forEach((element) => {
if (element.status == "0" || element.status == "1") { if (element.status == "0" || element.status == "1") {
this.personLine.push(element); this.personLine.push(element);
let obj = {position:[]}; let obj = {position:[]};
@ -956,7 +1009,6 @@ export default {
obj.imgSrc = element.status; obj.imgSrc = element.status;
obj.userId = element.userId; obj.userId = element.userId;
obj.info = element; obj.info = element;
// this.markers.push(obj)
this.videoPoint.push(obj) this.videoPoint.push(obj)
} }
}) })
@ -977,16 +1029,6 @@ export default {
this.mapLoading = false; this.mapLoading = false;
}) })
} else if(id == 2) { } else if(id == 2) {
// point.features.forEach((element)=>{
// if (element.properties.name == "普通事件") {
// let obj = {position:[]};
// obj.position[0] = element.geometry.coordinates[0];
// obj.position[1] = element.geometry.coordinates[1];
// obj.imgSrc = element.properties.status == "0"? offIcon2 : ico2;
// this.markers.push(obj)
// this.mapLoading = false;
// }
// })
listpatrol({current:1,size:1000}).then(res=>{ listpatrol({current:1,size:1000}).then(res=>{
this.mapLoading = false; this.mapLoading = false;
if(res.code == 200) { if(res.code == 200) {
@ -1012,7 +1054,6 @@ export default {
obj.imgSrc = ico2; obj.imgSrc = ico2;
obj.info = element obj.info = element
// this.markers.push(obj)
this.videoPoint.push(obj) this.videoPoint.push(obj)
}) })
this.count = this.videoPoint.length; this.count = this.videoPoint.length;
@ -1027,60 +1068,7 @@ export default {
}) })
} }
}) })
// let data = {'queryValue' : [], "myInstanceClassify" : "all", "parameterValue":[], fks: []}
// ViewListPage({viewCode:'event-all-list', pageNo: 1, pageSize:500}, data).then(res=>{
// this.mapLoading = false;
// if(res.code == 200) {
// this.videoPoint = [];
// res.result.records.forEach((element)=>{
// let obj = {position:[]};
// let location = element.location?.split(',');
// // obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
// if(location) {
// obj.position[0] = location[0];
// obj.position[1] = location[1];
// // let lonLat = this.wgs84togcj02(location[0],location[1]);
// // obj.position[0] = lonLat ? lonLat[0] : 0;
// // obj.position[1] = lonLat ? lonLat[1] : 0;
// obj.lnglat = new AMap.LngLat(location.length > 0 ? location[0] : 0 ,location.length > 0 ? location[1] : 0)
// // obj.lnglat = new AMap.LngLat(lonLat ? lonLat[0] : 0 ,lonLat ? lonLat[1] : 0)
// } else {
// obj.position[0] = 0;
// obj.position[1] = 0;
// }
// obj.imgSrc = ico2;
// obj.info = element
// // this.markers.push(obj)
// this.videoPoint.push(obj)
// })
// this.count = this.videoPoint.length;
// AMap.plugin(['AMap.MarkerCluster'],()=>{
// this.cluster = new AMap.MarkerCluster(this.map,this.videoPoint,{
// gridSize: 60, // 设置网格像素大小
// maxZoom: 17,
// styles: sts,
// // renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
// renderMarker: this._eventMarker, // 自定义非聚合点样式
// })
// })
// }
// })
} else if(id == 3){ } else if(id == 3){
// point.features.forEach((element)=>{
// if (element.properties.name == "执法车辆") {
// let obj = {position:[]};
// obj.position[0] = element.geometry.coordinates[0];
// obj.position[1] = element.geometry.coordinates[1];
// obj.imgSrc = element.properties.status == "0"? offIcon3 : ico4;
// obj.text = element.properties.name;
// this.markers.push(obj)
// this.mapLoading = false;
// }
// })
getCarManageList({pageNum: 1,pageSize: 1000}).then(res=>{ getCarManageList({pageNum: 1,pageSize: 1000}).then(res=>{
// console.log('车辆',res); // console.log('车辆',res);
this.carLine = res.rows this.carLine = res.rows
@ -1110,29 +1098,54 @@ export default {
renderMarker: this._carMarker, // 自定义非聚合点样式 renderMarker: this._carMarker, // 自定义非聚合点样式
}) })
}) })
// res.rows.forEach(element => {
// let obj = {position:[]};
// obj.position[0] = element.longitude;
// obj.position[1] = element.latitude;
// obj.imgSrc = ico6;
// obj.info = element;
// this.markers.push(obj)
// this.mapLoading = false;
// })
}).catch(err=>{ }).catch(err=>{
this.mapLoading = false; this.mapLoading = false;
}) })
} else if(id == 4){ } else if(id == 4){
getVideoPageEq({pageNo:1,pageSize:1000}).then(res=>{ // getVideoPageEq({pageNo:1,pageSize:1000}).then(res=>{
// this.mapLoading = false;
// // console.log(res,"res");
// this.videoPoint = [];
// res.data.forEach((element)=>{
// let obj = {position:[]};
// let lonLat;
// if(element.longitude && element.latitude) {
// lonLat = this.wgs84togcj02(element.longitude,element.latitude);
// }
// // obj.position[0] = element.longitude;
// obj.position[0] = lonLat ? lonLat[0] : 0;
// // obj.position[1] = element.latitude;
// obj.position[1] = lonLat ? lonLat[1] : 0;
// // obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
// // obj.lnglat = new AMap.LngLat(element.longitude ? element.longitude : 0 ,element.latitude ? element.latitude : 0)
// obj.lnglat = new AMap.LngLat(lonLat ? lonLat[0] : 0 ,lonLat ? lonLat[1] : 0);
// obj.imgSrc = ico5;
// obj.info = element
// // this.markers.push(obj)
// this.videoPoint.push(obj)
// })
// this.count = this.videoPoint.length;
// AMap.plugin(['AMap.MarkerCluster'],()=>{
// this.cluster = new AMap.MarkerCluster(this.map,this.videoPoint,{
// gridSize: 60, // 设置网格像素大小
// maxZoom: 15,
// styles: sts,
// // renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
// renderMarker: this._renderMarker, // 自定义非聚合点样式
// })
// })
// }).catch(err=>{
// this.$modal.msgError(err);
// this.mapLoading = false;
// })
getVideoDevice({current:1,size:-1}).then(res=>{
this.mapLoading = false; this.mapLoading = false;
// console.log(res,"res");
this.videoPoint = []; this.videoPoint = [];
res.data.forEach((element)=>{ res.data.records.forEach((element)=>{
let obj = {position:[]}; let obj = {position:[]};
let lonLat; let lonLat;
if(element.longitude && element.latitude) { if(element.longitude && element.latitude) {
lonLat = this.wgs84togcj02(element.longitude,element.latitude); lonLat = this.wgs84togcj02(element.longitude,element.latitude);
}
// obj.position[0] = element.longitude; // obj.position[0] = element.longitude;
obj.position[0] = lonLat ? lonLat[0] : 0; obj.position[0] = lonLat ? lonLat[0] : 0;
// obj.position[1] = element.latitude; // obj.position[1] = element.latitude;
@ -1144,6 +1157,7 @@ export default {
obj.info = element obj.info = element
// this.markers.push(obj) // this.markers.push(obj)
this.videoPoint.push(obj) this.videoPoint.push(obj)
}
}) })
this.count = this.videoPoint.length; this.count = this.videoPoint.length;
AMap.plugin(['AMap.MarkerCluster'],()=>{ AMap.plugin(['AMap.MarkerCluster'],()=>{
@ -1160,16 +1174,6 @@ export default {
this.mapLoading = false; this.mapLoading = false;
}) })
} else if(id == 5){ } else if(id == 5){
// point.features.forEach((element)=>{
// if (element.properties.name == "沿街商铺分布") {
// let obj = {position:[]};
// obj.position[0] = element.geometry.coordinates[0];
// obj.position[1] = element.geometry.coordinates[1];
// obj.imgSrc = ico6;
// this.markers.push(obj)
// this.mapLoading = false;
// }
// })
getStreetShopList({pageSize:500,pageNum:1}).then(res=>{ getStreetShopList({pageSize:500,pageNum:1}).then(res=>{
this.videoPoint = []; this.videoPoint = [];
this.mapLoading = false; this.mapLoading = false;
@ -1199,6 +1203,40 @@ export default {
}).catch(err=>{ }).catch(err=>{
this.mapLoading = false; this.mapLoading = false;
}) })
} else if(id == 6) {
DeviceListNewRequest({pageSize:200}).then(res=>{
this.mapLoading = false;
// console.log(res,"res");
this.videoPoint = [];
res.forEach((element)=>{
let obj = {position:[]};
let lonLat;
if(element.longitude && element.latitude) {
lonLat = this.wgs84togcj02(element.longitude,element.latitude);
// obj.position[0] = element.longitude;
obj.position[0] = lonLat ? lonLat[0] : 0;
// obj.position[1] = element.latitude;
obj.position[1] = lonLat ? lonLat[1] : 0;
// obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
// obj.lnglat = new AMap.LngLat(element.longitude ? element.longitude : 0 ,element.latitude ? element.latitude : 0)
obj.lnglat = new AMap.LngLat(lonLat ? lonLat[0] : 0 ,lonLat ? lonLat[1] : 0);
obj.imgSrc = ico5;
obj.info = element
// this.markers.push(obj)
this.videoPoint.push(obj)
}
})
this.count = this.videoPoint.length;
AMap.plugin(['AMap.MarkerCluster'],()=>{
this.cluster = new AMap.MarkerCluster(this.map,this.videoPoint,{
gridSize: 60, // 设置网格像素大小
maxZoom: 15,
styles: sts,
// renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
renderMarker: this._renderMarkerTwo, // 自定义非聚合点样式
})
})
})
} }
}, },
// 点位点击事件 // 点位点击事件
@ -1393,20 +1431,38 @@ export default {
}, },
// 监控视频上墙 // 监控视频上墙
monitorVideos(status){ monitorVideos(status){
// this.$refs.aloneVideo.open(`http://liveplay.vaas.cn-yangzhou-1.ctyunxs.cn/vaas/live/3210000110004_32011502021322002389_live_1/hls.m3u8?auth_key=1728613840-588c71701551402588dcac5d76d4f910-30003-cef7053299ba90ef96453528cba0fc7f`);
// this.$refs.videoWall.open(); // this.$refs.videoWall.open();
if(status == 1) { // expand:"transcode=1" // if(status == 1) { // expand:"transcode=1"
getPreviewURLs({protocol:'hls',cameraIndexCode:this.monitoringInfo.info.cameraIndexCode,streamType:"1",transmode:"1"}).then(res=>{ // getPreviewURLs({protocol:'hls',cameraIndexCode:this.monitoringInfo.info.nationalStandardCode,streamType:"1",transmode:"1"}).then(res=>{
if(res.code == 200) { // if(res.code == 200) {
// console.log(res,'视频地址获取'); // // console.log(res,'视频地址获取');
// this.$refs.aloneVideo.open(res.msg); // // this.$refs.aloneVideo.open(res.msg);
let videoUrl = res.msg; // let videoUrl = res.msg;
var code1 = videoUrl.match(/\/openUrl\/(.*)/)[1] // var code1 = videoUrl.match(/\/openUrl\/(.*)/)[1]
this.$refs.aloneVideo.open(`http://10.236.2.28:54567/bjh-admin-server/jn/videosLive/${code1}`); // this.$refs.aloneVideo.open(`http://10.236.2.28:54567/bjh-admin-server/jn/videosLive/${code1}`);
} // }
}) // })
} else { if(this.actionMap == 4) {
this.$modal.msgError("该设备已离线"); getPreviewURLs({protocol:'hls',cameraIndexCode:this.monitoringInfo.info.nationalStandardCode,streamType:"1",transmode:"1"}).then(res=>{
} // console.log(res,"res");
let url = JSON.parse(res.data)
// console.log(url,"url");
let videoUrl = url.data.url;
// var code1 = videoUrl.match(/\/openUrl\/(.*)/)[1]
// console.log(code1,"code1");
// this.$refs.aloneVideo.open(`http://10.236.2.28:54567/bjh-admin-server/jn/videosLive/${code1}`);
this.$refs.aloneVideo.open(videoUrl);
})
}
// if(this.actionMap == 6) {
// getDeviceMediaUrlHls({deviceCode:this.monitoringInfo.info.deviceCode}).then(res=>{
// this.$refs.aloneVideo.open(res.url)
// })
// } else
// } else {
// this.$modal.msgError("该设备已离线");
// }
}, },
// 转发，复制视频地址 // 转发，复制视频地址
copyUrl(){ copyUrl(){
@ -2406,7 +2462,7 @@ export default {
this.input = queryString; this.input = queryString;
// 执法人员搜索 // 执法人员搜索
if(this.actionMap == 1) { if(this.actionMap == 1) {
dwgjList({name:queryString}).then(res=>{ dwgjList({nickName:queryString}).then(res=>{
var restaurants = res.data; var restaurants = res.data;
let a = []; let a = [];
restaurants.forEach((per=>{ restaurants.forEach((per=>{
@ -2546,9 +2602,168 @@ export default {
this.markerOffset = new AMap.Pixel(-27, -94); this.markerOffset = new AMap.Pixel(-27, -94);
} else if (id == 5) { } else if (id == 5) {
this.markerOffset = new AMap.Pixel(-27, -94); this.markerOffset = new AMap.Pixel(-27, -94);
} else if (id == 6) {
this.MyInput = false;
this.switches[0].active = true;
this.switches[1].active = false;
this.switches[2].active = false;
this.markerOffset = new AMap.Pixel(-27, -94);
} }
this.getMarkers(id); this.getMarkers(id);
}, },
// 视频切换
handleSwitchChange(index,id){
// 判断是否全部都未选，allInactive为true则判断active全部都为false
const allInactive = this.switches.every(switchItem => !switchItem.active);
if(allInactive) {
this.switches[index].active = true;
return;
}
this.switches.forEach((sw, i) => {
// 关闭其他开关
if (i !== index) {
sw.active = false;
}
});
// id 1:视频监控 2:算法监控 3:自建监控
// console.log(id);
this.getVideosType(id)
},
getVideosType(id){
this.mapLoading = true;
// 点聚合重置
if (this.cluster) {
this.cluster.setMap(null);
}
this.videoPoint = [];
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
}];
let ico5 = require("../../../assets/images/icon/icon5.png");
if(id == 1) {
getVideoDevice({current:1,size:-1}).then(res=>{
this.mapLoading = false;
res.data.records.forEach((element)=>{
let obj = {position:[]};
let lonLat;
if(element.longitude && element.latitude) {
lonLat = this.wgs84togcj02(element.longitude,element.latitude);
// obj.position[0] = element.longitude;
obj.position[0] = lonLat ? lonLat[0] : 0;
// obj.position[1] = element.latitude;
obj.position[1] = lonLat ? lonLat[1] : 0;
// obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
// obj.lnglat = new AMap.LngLat(element.longitude ? element.longitude : 0 ,element.latitude ? element.latitude : 0)
obj.lnglat = new AMap.LngLat(lonLat ? lonLat[0] : 0 ,lonLat ? lonLat[1] : 0);
obj.imgSrc = ico5;
obj.info = element
// this.markers.push(obj)
this.videoPoint.push(obj)
}
})
this.count = this.videoPoint.length;
AMap.plugin(['AMap.MarkerCluster'],()=>{
this.cluster = new AMap.MarkerCluster(this.map,this.videoPoint,{
gridSize: 60, // 设置网格像素大小
maxZoom: 15,
styles: sts,
// renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
renderMarker: this._renderMarker, // 自定义非聚合点样式
})
})
}).catch(err=>{
this.$modal.msgError(err);
this.mapLoading = false;
})
} else if(id == 2) {
getVideoDevice({current:1,size:-1,videoTagId:"1836948995594969090"}).then(res=>{
this.mapLoading = false;
res.data.records.forEach((element)=>{
let obj = {position:[]};
let lonLat;
if(element.longitude && element.latitude) {
lonLat = this.wgs84togcj02(element.longitude,element.latitude);
// obj.position[0] = element.longitude;
obj.position[0] = lonLat ? lonLat[0] : 0;
// obj.position[1] = element.latitude;
obj.position[1] = lonLat ? lonLat[1] : 0;
// obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
// obj.lnglat = new AMap.LngLat(element.longitude ? element.longitude : 0 ,element.latitude ? element.latitude : 0)
obj.lnglat = new AMap.LngLat(lonLat ? lonLat[0] : 0 ,lonLat ? lonLat[1] : 0);
obj.imgSrc = ico5;
obj.info = element
// this.markers.push(obj)
this.videoPoint.push(obj)
}
})
this.count = this.videoPoint.length;
AMap.plugin(['AMap.MarkerCluster'],()=>{
this.cluster = new AMap.MarkerCluster(this.map,this.videoPoint,{
gridSize: 60, // 设置网格像素大小
maxZoom: 15,
styles: sts,
// renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
renderMarker: this._renderMarker, // 自定义非聚合点样式
})
})
}).catch(err=>{
this.$modal.msgError(err);
this.mapLoading = false;
})
} else if(id == 3) {
getVideoDevice({current:1,size:-1,videoTagId:"1836949034303692802"}).then(res=>{
this.mapLoading = false;
res.data.records.forEach((element)=>{
let obj = {position:[]};
let lonLat;
if(element.longitude && element.latitude) {
lonLat = this.wgs84togcj02(element.longitude,element.latitude);
// obj.position[0] = element.longitude;
obj.position[0] = lonLat ? lonLat[0] : 0;
// obj.position[1] = element.latitude;
obj.position[1] = lonLat ? lonLat[1] : 0;
// obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
// obj.lnglat = new AMap.LngLat(element.longitude ? element.longitude : 0 ,element.latitude ? element.latitude : 0)
obj.lnglat = new AMap.LngLat(lonLat ? lonLat[0] : 0 ,lonLat ? lonLat[1] : 0);
obj.imgSrc = ico5;
obj.info = element
// this.markers.push(obj)
this.videoPoint.push(obj)
}
})
this.count = this.videoPoint.length;
AMap.plugin(['AMap.MarkerCluster'],()=>{
this.cluster = new AMap.MarkerCluster(this.map,this.videoPoint,{
gridSize: 60, // 设置网格像素大小
maxZoom: 15,
styles: sts,
// renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
renderMarker: this._renderMarker, // 自定义非聚合点样式
})
})
}).catch(err=>{
this.$modal.msgError(err);
this.mapLoading = false;
})
}
},
// 隐藏地图左侧 // 隐藏地图左侧
leftAnimation() { leftAnimation() {
setTimeout(() => { setTimeout(() => {
@ -2879,6 +3094,27 @@ export default {
} }
} }
} }
.monitoring-switch {
z-index: 600;
position: absolute;
left: 537px;
top: 10px;
// display: flex;
// flex-direction: column;
display: grid;
grid-template-columns: 1fr;
row-gap: 10px;
.switchItems {
display: flex;
flex-direction: column;
align-items: center;
// margin-bottom: 10px;
.monitoring-type {
color: #fff;
font-size: 12px;
}
}
}
.middle-top-left2 { .middle-top-left2 {
left: 67px; left: 67px;
} }
@ -2908,6 +3144,9 @@ export default {
img { img {
width: 20px; width: 20px;
} }
.images {
width: 30px;
}
} }
.action-map { .action-map {
background-image: url("../../../assets/images/iconbg1.png"); background-image: url("../../../assets/images/iconbg1.png");
@ -2916,6 +3155,7 @@ export default {
padding-left: 6px; padding-left: 6px;
margin-left: 2px; margin-left: 2px;
background-image: url("../../../assets/images/right-icon.png"); background-image: url("../../../assets/images/right-icon.png");
background-repeat: no-repeat; /* 不平铺 */
width: 115px; width: 115px;
height: 36px; height: 36px;
display: flex; display: flex;
@ -2929,6 +3169,9 @@ export default {
text-shadow: 0px 0px 5px #0077ff; text-shadow: 0px 0px 5px #0077ff;
} }
} }
.rightbgTwo {
width: 145px;
}
} }
} }
.middle-bottom-left2 { .middle-bottom-left2 {

6
src/views/components/mapLeftNumber/index.vue
Unescape View File

@ -8,7 +8,7 @@
</div> </div>
</div> </div>
<div>{{ onLine }}/{{ sum }}{{ type }}</div> <div style="display: flex;align-items: center;"><div v-if="id == 1" style="margin-right: 5px;">{{ currentClasses }}: </div>{{ onLine }}/{{ sum }}{{ type }}</div>
</div> </div>
<div class="header-title"> <div class="header-title">
<div class="header-title-left" :class="id == 1 ? 'header-title-left-two' : ''">{{ id == 1 ? "姓名" : "车牌号" }}</div> <div class="header-title-left" :class="id == 1 ? 'header-title-left-two' : ''">{{ id == 1 ? "姓名" : "车牌号" }}</div>
@ -78,6 +78,10 @@ export default {
id:{ id:{
type:Number, type:Number,
default:0, default:0,
},
currentClasses: {
type:String,
default:'白班',
} }
}, },
methods:{ methods:{

53
src/views/components/personagetrack/index.vue
Unescape View File

@ -24,7 +24,8 @@
<div class="item"> <div class="item">
<div class="ball"></div> <div class="ball"></div>
<div class="content"> <div class="content">
当前状态：<span>{{ person ? personItem.status == '1' ? '在线' : personItem.status == '0' ? '离线' : '' : "行驶中" }}</span> <!-- 当前状态：<span>{{ person ? personItem.status == '1' ? '在线' : personItem.status == '0' ? '离线' : '' : "行驶中" }}</span> -->
当前状态：<span>{{ person ? personItem.status == '1' ? '在线' : personItem.status == '0' ? '离线' : '' : "未启动" }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -122,6 +123,7 @@ import ThreeGJ02 from "@/utils/mapJson/3GJ02.json";
import FourGJ02 from "@/utils/mapJson/4GJ02.json"; import FourGJ02 from "@/utils/mapJson/4GJ02.json";
import kaifaqu from "@/utils/mapJson/开发区空港开发区GJ02.json"; import kaifaqu from "@/utils/mapJson/开发区空港开发区GJ02.json";
import ruanjianyuan from "@/utils/mapJson/开发区软件园GJ02.json"; import ruanjianyuan from "@/utils/mapJson/开发区软件园GJ02.json";
import carTrackJson from "@/utils/data/carTrack.json"
// import L from "leaflet"; // import L from "leaflet";
// import "@/utils/lib/leaflet.ChineseTmsProviders.js"; // import "@/utils/lib/leaflet.ChineseTmsProviders.js";
// import "@/utils/lib/leaflet-tilelayer-colorizr.js"; // import "@/utils/lib/leaflet-tilelayer-colorizr.js";
@ -343,7 +345,6 @@ export default {
this.query(); this.query();
} else { } else {
this.carItem = item; this.carItem = item;
console.log(this.carItem);
this.queryTime.fromTime = this.getCurrentTime(); this.queryTime.fromTime = this.getCurrentTime();
this.queryTime.toTime = this.getCurrentTime(1); this.queryTime.toTime = this.getCurrentTime(1);
this.title = "车辆行程轨迹"; this.title = "车辆行程轨迹";
@ -439,6 +440,7 @@ export default {
if(this.map.getAllOverlays('polyline')) { if(this.map.getAllOverlays('polyline')) {
this.map.remove(this.map.getAllOverlays('polyline')); this.map.remove(this.map.getAllOverlays('polyline'));
} }
console.log(arr,"arr");
this.track = new AMap.Polyline({ this.track = new AMap.Polyline({
path: arr, path: arr,
strokeWeight: 6, strokeWeight: 6,
@ -462,20 +464,38 @@ export default {
} }
}) })
} else { } else {
carTrack({startTime:this.queryTime.fromTime,endTime:this.queryTime.toTime,deviceIndexCode:"b91155244ea245708ed8258dfcc4509a"}).then(res=>{ // carTrack({startTime:this.queryTime.fromTime,endTime:this.queryTime.toTime,deviceIndexCode:"b91155244ea245708ed8258dfcc4509a"}).then(res=>{
// console.log(res,"经纬度"); // // console.log(res,"经纬度");
this.loading = false; // this.loading = false;
if(res.code == 200) { // if(res.code == 200) {
let arr = [] // let arr = []
res.data.records.forEach(element => { // res.data.records.forEach(element => {
let arrTwo = []; // let arrTwo = [];
arrTwo[1] = element.latitude; // arrTwo[1] = element.latitude;
arrTwo[0] = element.longitude; // arrTwo[0] = element.longitude;
arr.push(arrTwo); // arr.push(arrTwo);
}); // });
// if(this.track) { // // if(this.track) {
// this.globalMap.removeLayer(this.track); // // this.globalMap.removeLayer(this.track);
// // }
// if(this.map.getAllOverlays('polyline')) {
// this.map.remove(this.map.getAllOverlays('polyline'));
// }
// this.track = new AMap.Polyline({
// path: arr,
// strokeColor: '#F44444',
// strokeOpacity: 1,
// showDir: true,
// })
// this.map.add(this.track);
// const mapInstance = this.$refs.personMap.$$getInstance();
// // 调用 setFitView 方法居中和缩放地图以适应 GeoJSON 数据
// mapInstance.setFitView(this.track);
// } // }
// }).catch(err => {
// this.loading = false;
// })
let arr = carTrackJson.features[0].geometry.coordinates;
if(this.map.getAllOverlays('polyline')) { if(this.map.getAllOverlays('polyline')) {
this.map.remove(this.map.getAllOverlays('polyline')); this.map.remove(this.map.getAllOverlays('polyline'));
} }
@ -489,10 +509,7 @@ export default {
const mapInstance = this.$refs.personMap.$$getInstance(); const mapInstance = this.$refs.personMap.$$getInstance();
// 调用 setFitView 方法居中和缩放地图以适应 GeoJSON 数据 // 调用 setFitView 方法居中和缩放地图以适应 GeoJSON 数据
mapInstance.setFitView(this.track); mapInstance.setFitView(this.track);
}
}).catch(err => {
this.loading = false; this.loading = false;
})
} }
} }
}, },

Write Preview
Loading…
Cancel
Save