suzhou-jichuang-lanhai
/
JiangningUrbanManagePc
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '2412579e96'
${ noResults }
JiangningUrbanManagePc/src/views/bigScreen/map/index.vue

3229 lines
114 KiB
Raw Blame History Escape

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!--
* @Descripttion:
* @version:
* @Author: JC9527
* @Date: 2024-01-09 23:08:15
* @LastEditors: JC9527
* @LastEditTime: 2024-11-28 14:58:43
-->
<template>
<div class="map-main">
<!-- <div id="showMap" class="showMap"></div> -->
<!-- <el-amap
ref="map"
:min-zoom="10"
:max-zoom="22"
:center="center"
:zoom="zoom"
@init="init"
@click="click"
class="bmap-demo"
:events="selfMapEv"
>
</el-amap> -->
<el-amap
ref="map"
map-style="amap://styles/d02b66b0a7f190d5a1556a3f59c86518"
:center="center"
:zoom="zoom"
:zooms="zooms"
v-loading="mapLoading"
element-loading-background="rgba(11, 34, 72, 0.8)"
@init="init"
:extra-options="{ vectorMapForeign: 'style_zh_cn' }"
class="amap-demo"
>
<el-amap-layer-satellite :visible="visible"></el-amap-layer-satellite>
<!-- 江宁GeoJson文件 -->
<!-- <el-amap-geojson @init="initLocation" :geo="jiangninggeo" ref="geojson" :polygon-options="polygonOptions" :visible="true" :draggable="draggable"></el-amap-geojson> -->
<!-- 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)">
<div class="markerStyles">
<div v-if="marker.text" class="marker-Text">{{marker.text}}</div>
<div class="tag">
<span></span>
</div>
<img :src="marker.imgSrc" alt="">
</div>
</el-amap-marker> -->
<!-- 人员信息弹框 -->
<el-amap-info-window
v-if="personInfo.visible"
anchor="bottom-center"
:offset="[-10,-40]"
:closeWhenClickMap="true"
:position="personInfo.position"
:visible.sync="personInfo.visible">
<div class="person-popup">
<div class="person-title">
<div class="title">人员信息</div>
<img src="@/assets/images/dialogbg/close.png" class="mask" @click="markersClosePopup" alt="" />
</div>
<div class="person-main">
<div class="person-info">
<div class="info-left">
<div class="dot"></div>
<div class="name">姓名：</div>
</div>
<div class="position">{{ personInfo.info.userName || "-" }}</div>
</div>
<div class="person-info">
<div class="info-left">
<div class="dot"></div>
<div class="name">联系方式：</div>
</div>
<div class="position">{{ personInfo.personinfo ? personInfo.personinfo.phonenumber : "-" }}</div>
</div>
<div class="person-info">
<div class="info-left">
<div class="dot"></div>
<div class="name">所属部门：</div>
</div>
<div class="position">{{ personInfo.personinfo ? personInfo.personinfo.deptName : "-" }}</div>
</div>
<div class="person-info">
<div class="info-left">
<div class="dot"></div>
<div class="name">设备类型：</div>
</div>
<div class="position">执法仪</div>
</div>
<div class="person-info">
<div class="info-left">
<div class="dot"></div>
<div class="name">所属围栏：</div>
</div>
<div class="position">{{ personInfo.personinfo ? personInfo.personinfo.fenceName : '-' }}</div>
</div>
<div class="person-info">
<div class="info-left">
<div class="dot"></div>
<div class="name">当前位置：</div>
</div>
<div class="position">{{ personInfo.info.address }}</div>
</div>
<div class="btns">
<div @click="travelPath()">行程轨迹</div>
<!-- <div>附近队员</div> -->
<div @click="shareClick">位置分享</div>
<div @click="watchClick">强制观摩</div>
<div @click="taskClick">任务派发</div>
</div>
</div>
</div>
</el-amap-info-window>
<!-- 事件弹框 -->
<el-amap-info-window
v-if="eventInfo.visible"
:offset="[-10,-10]"
:closeWhenClickMap="true"
:position="eventInfo.position"
:visible.sync="eventInfo.visible"
>
<div class="event-popup" :class="eventInfo.info.status == '待受理' ? '':'event-popupTwo'">
<div class="event-title">
<div class="title">事件信息</div>
<!-- <div class="mask" @click="markersClosePopup"></div> -->
<img src="@/assets/images/dialogbg/close.png" class="mask" @click="markersClosePopup" alt="" />
</div>
<div class="event-main">
<div class="event-info">
<div class="dot"></div>
<div class="name">事件名称：</div>
<div class="position">{{ eventInfo.info.name }}</div>
</div>
<div class="event-info">
<div class="dot"></div>
<div class="name">事件类别：</div>
<el-tooltip :content="eventInfo.info.type" placement="top">
<div class="position">{{ eventInfo.info.type }}</div>
</el-tooltip>
</div>
<div class="event-info">
<div class="dot"></div>
<div class="name">事件地址：</div>
<el-tooltip :content="eventInfo.info.address" placement="top">
<div class="position">{{ eventInfo.info.address }}</div>
</el-tooltip>
</div>
<div class="event-info">
<div class="dot"></div>
<div class="name">描述：</div>
<el-tooltip :content="eventInfo.info.content" placement="top">
<div class="position">{{ eventInfo.info.content }}</div>
</el-tooltip>
</div>
<div class="event-info">
<div class="dot"></div>
<div class="name">状态：</div>
<div class="position">{{ eventInfo.info.status }}</div>
</div>
<div class="btn" v-show="eventInfo.info.status == '待受理'" @click="eventBtn">
指派
</div>
</div>
</div>
</el-amap-info-window>
<!-- 执法车辆弹框 -->
<el-amap-info-window
v-if="carInfo.visible"
:offset="[-0,-10]"
:closeWhenClickMap="true"
:position="carInfo.position"
:visible.sync="carInfo.visible"
>
<div class="car-popup">
<div class="car-title">
<div class="title">车辆信息</div>
<!-- <div class="mask" @click="markersClosePopup"></div> -->
<img src="@/assets/images/dialogbg/close.png" class="mask" @click="markersClosePopup" alt="" />
</div>
<div class="car-main">
<div class="car-info">
<div class="dot"></div>
<div class="name">{{carInfo.info.carName}}</div>
<div class="position">{{carInfo.info.carCode}}</div>
</div>
<!-- <div class="btn" @click="travelPath()">行程轨迹</div> -->
<div class="btns">
<div class="btn" @click="travelPath()">行程轨迹</div>
<div class="btn" @click="watchCarVideo">车载视频</div>
</div>
</div>
</div>
</el-amap-info-window>
<!-- 监控视频弹框 -->
<el-amap-info-window
v-if="monitoringInfo.visible"
:offset="[-10,-10]"
:closeWhenClickMap="true"
:position="monitoringInfo.position"
:visible.sync="monitoringInfo.visible"
>
<div class="monitoring-popup">
<div class="monitoring-title">
<div class="title">{{ monitoringInfo.info.name }}</div>
<!-- <div class="mask" @click="markersClosePopup"></div> -->
<img src="@/assets/images/dialogbg/close.png" class="mask" @click="markersClosePopup" alt="" />
</div>
<div class="monitoring">
<div class="monitoring-list">
<div class="person-info">
<div class="info-left">
<div class="dot"></div>
<div class="name">点位名称：</div>
</div>
<div class="position">{{ monitoringInfo.info.name || monitoringInfo.info.deviceName }}</div>
</div>
<!-- <div class="person-info">
<div class="info-left">
<div class="dot"></div>
<div class="name">在线状态：</div>
</div>
<div class="position">{{ monitoringInfo.info.status == 1 ? "在线":"离线" }}</div>
</div> -->
<div class="person-info">
<div class="info-left">
<div class="dot"></div>
<div class="name">安装位置：</div>
</div>
<div class="position">{{ monitoringInfo.info.installPlace }}</div>
</div>
</div>
<div class="btns">
<div class="btn" @click="monitorVideos(monitoringInfo.info.status)">上墙</div>
<div class="btn" @click="copyUrl()">转发</div>
</div>
</div>
</div>
</el-amap-info-window>
<!-- 沿街商铺分布 -->
<el-amap-info-window
v-if="shopInfo.visible"
:offset="[-10,-10]"
:closeWhenClickMap="true"
:position="shopInfo.position"
:visible.sync="shopInfo.visible"
>
<div class="event-popup">
<div class="event-title">
<div class="title">店铺基本信息</div>
<!-- <div class="mask" @click="markersClosePopup"></div> -->
<img src="@/assets/images/dialogbg/close.png" class="mask" @click="markersClosePopup" alt="" />
</div>
<div class="event-main">
<div class="event-info">
<div class="dot"></div>
<div class="name">商铺名称：</div>
<div class="position">{{ shopInfo.info.shopName }}</div>
</div>
<div class="event-info">
<div class="dot"></div>
<div class="name">商铺类型：</div>
<div class="position">{{ shopInfo.info.operation }}</div>
</div>
<div class="event-info">
<div class="dot"></div>
<div class="name">所在地址：</div>
<el-tooltip :content="shopInfo.info.bodyAddress" placement="top">
<div class="position">{{ shopInfo.info.bodyAddress }}</div>
</el-tooltip>
</div>
<div class="event-info">
<div class="dot"></div>
<div class="name">描述：</div>
<el-tooltip :content="shopInfo.info.bodyName" placement="top">
<div class="position">{{ shopInfo.info.bodyName }}</div>
</el-tooltip>
</div>
<div class="btn" @click="getShopInfo">
查看店铺详情
</div>
</div>
</div>
</el-amap-info-window>
</el-amap>
<div class="left-bg">
<div class="bgt"></div>
</div>
<transition name="left-animationMap">
<div class="map-left" v-if="leftAnimationData">
<!-- :personLine="personLine" -->
<map-left :carLine="carLine" @realTimeLocationClick="realTimeLocationClick" @carTimeLocationClick="realTimeLocationClick"></map-left>
</div>
</transition>
<img
:src="
leftAnimationData
? require('@/assets/images/action-left.png')
: require('@/assets/images/action-right.png')
"
alt=""
:class="!leftAnimationData ? 'left-image2' : 'left-image'"
@click="leftAnimation()"
/>
<div
class="middle-top-left"
:class="!leftAnimationData ? 'middle-top-left2' : 'middle-top-left'"
>
<div class="input-keyword" v-if="MyInput">
<!-- <el-input placeholder="请输入关键字" v-model="input">
<i slot="suffix" class="el-icon-search" @click="search"></i>
</el-input> -->
<el-autocomplete
prefix-icon="el-icon-search"
class="inline-input"
v-model="input"
:fetch-suggestions="querySearch"
placeholder="请输入关键字进行搜索"
:trigger-on-focus="false"
@select="handleSelect"
></el-autocomplete>
</div>
<div class="laser-positioning" @click="positioning" v-if="zadian">
<span>地图扎点</span>
<img src="@/assets/images/positioning.png" alt="" />
</div>
<div class="creation-task" @click="createdTask" v-if="zadian">
<span>新增事件</span>
<img src="@/assets/images/createdTask.png" alt="" />
</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
class="middle-bottom-left"
:class="!leftAnimationData ? 'middle-bottom-left2' : 'middle-bottom-left'"
>
<div class="list" @click="changeMap(1)">
<div class="leftbg" :class="actionMap == 1 ? 'action-map' : ''">
<img src="@/assets/images/icon1.png" alt="" />
</div>
<div class="rightbg" v-show="actionMap == 1">
<span>执法人员</span>
</div>
</div>
<div class="list" @click="changeMap(2)">
<div class="leftbg" :class="actionMap == 2 ? 'action-map' : ''">
<img src="@/assets/images/icon2.png" alt="" />
</div>
<div class="rightbg" v-show="actionMap == 2">
<span>巡查事件</span>
</div>
</div>
<!-- <div class="list" @click="changeMap(2)">
<div class="leftbg" :class="actionMap == 2 ? 'action-map' : ''">
<img src="@/assets/images/icon3.png" alt="" />
</div>
<div class="rightbg" v-show="actionMap == 2">
<span>重点事件</span>
</div>
</div> -->
<div class="list" @click="changeMap(3)">
<div class="leftbg" :class="actionMap == 3 ? 'action-map' : ''">
<img src="@/assets/images/icon4.png" alt="" />
</div>
<div class="rightbg" v-show="actionMap == 3">
<span>执法车辆</span>
</div>
</div>
<div class="list" @click="changeMap(4)">
<div class="leftbg" :class="actionMap == 4 ? 'action-map' : ''">
<img src="@/assets/images/icon5.png" alt="" />
</div>
<div class="rightbg" v-show="actionMap == 4">
<span>监控视频</span>
</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="leftbg" :class="actionMap == 5 ? 'action-map' : ''">
<img src="@/assets/images/icon6.png" alt="" />
</div>
<div class="rightbg" v-show="actionMap == 5">
<span>沿街商铺分布</span>
</div>
</div>
</div>
<transition name="right-animationMap">
<div class="map-right" v-if="rightAnimationData">
<map-right
:quyuData="quyuData"
:weilanData="weilanData"
:luduanData="luduanData"
:wanggeData="wanggeData"
@divClick="divClick"
></map-right>
</div>
</transition>
<img
:src="
rightAnimationData
? require('@/assets/images/action-right.png')
: require('@/assets/images/action-left.png')
"
alt=""
:class="!rightAnimationData ? 'right-image2' : 'right-image'"
@click="rightAnimation()"
/>
<div
class="middle-bottom-right"
:class="
!rightAnimationData ? 'middle-bottom-right2' : 'middle-bottom-right'
"
>
<div class="btn-action">
<span :class="action == 1 ? 'action' : ''" @click="actionBtn(1)"
>电子地图</span
>
<span :class="action == 2 ? 'action' : ''" @click="actionBtn(2)"
>卫星地图</span
>
</div>
</div>
<div class="right-bg">
<div class="bgt"></div>
</div>
<div class="bottom-bg">
<div class="bgt"></div>
</div>
<personage-track ref="personageTrack"></personage-track>
<!-- 事件指派人员 -->
<crew-assign ref="crewAssign"></crew-assign>
<!-- <video-wall ref="videoWall"></video-wall> -->
<!-- 监控视频上墙 -->
<alone-video ref="aloneVideo"></alone-video>
<!-- 车载视频上墙 -->
<car-video ref="carVideo"></car-video>
<!-- 商铺详情 -->
<shop ref="shop" width="50%" title="商铺详情查看" />
<!-- 新增事件 -->
<new-event ref="newEvent" @cancel="cancel" @confirm="confirm"></new-event>
<!-- 任务派发 -->
<personage-task ref="personageTask"></personage-task>
<!-- 强制观摩弹框 -->
<el-dialog
:visible.sync="showVideo"
width="45%"
title="强制观摩"
:show-close="false"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
custom-class="travel"
>
<template slot="title">
<div class="closeClick">
<div class="headline" text="title123kmalskdnj">
<div class="headlinetitle" text="强制观摩">强制观摩</div>
</div>
<!-- <div class="close" @click="videoClose"></div> -->
<img src="@/assets/images/dialogbg/close.png" class="closeimg" @click="videoClose" alt="" />
</div>
</template>
<div class="watch-video-play">
<video id='flvvideo' autoplay controls class="flv-js"></video>
</div>
</el-dialog>
</div>
</template>
<script>
import point from "@/utils/mapJson/point.json";
import jiangninggeo from "@/utils/mapJson/jiangningjingkaiqugeo.json";
// 一级网格
// import OneGJ02 from "@/utils/mapJson/1GJ02.json";
// import TwoGJ02 from "@/utils/mapJson/2GJ02.json";
// import ThreeGJ02 from "@/utils/mapJson/3GJ02.json";
// import FourGJ02 from "@/utils/mapJson/4GJ02.json";
// import kaifaqu from "@/utils/mapJson/开发区空港开发区GJ02.json";
// import ruanjianyuan from "@/utils/mapJson/开发区软件园GJ02.json";
// 二级网格
// import gridding from "@/utils/mapJson/中队小网格.json"
// import zhongdianluduan from "@/utils/mapJson/zhongdianluduan.json";
// import zhongdianquyu from "@/utils/mapJson/zhongdianquyu.json";
import mapLeft from "../components/mapLeftContent.vue";
import mapRight from "../components/mapRightContent.vue";
// import mapCentre from "../components/mapCentre.vue"
// 弹窗
import personageTrack from "../../components/personagetrack/index.vue";
import personageTask from "../../components/personageTask/index.vue";
import crewAssign from "../../components/crewAssign/index.vue";
import videoWall from "../../components/videoWall/index.vue";
import carVideo from "../../components/carVideo/index.vue";
import shop from "../../components/shop/index.vue";
import aloneVideo from "../../components/video/index.vue"
import newEvent from "../../components/newEvent/index.vue"
// import jiangningwangge from "@/utils/data/江宁开发区网格.json";
// import weilan from "@/utils/data/围栏1.json";
import { getCenter } from "@/utils/amap"
import {
regionalsettings,
roadsetting,
fence,
bgridsetting,
getDeviceList,
levelQywg,
videoSurveillance,
getVideoPageEq,
getPreviewURLs,
getCarManageList,
getStreetShopList,
listZhzz,
getUserByImei,
dwgjList,
onlinePeople,
DeviceListNewRequest,
getDeviceMediaUrlHls,
getVideoDevice
} from "@/api/bigScreenApi";
import {
previewURLs,
listpatrol
} from "@/api/bigScreenApi/eventApi.js"
import {
robotLogin,
ViewListPage
} from "@/api/bigScreenApi/robot.js"
// import { setRobotToken } from '@/utils/auth'
import flvjs from "flv.js";
import axios from "axios";
export default {
name: "myMap",
components: {
mapLeft,
mapRight,
personageTrack,
crewAssign,
videoWall,
shop,
aloneVideo,
newEvent,
personageTask,
carVideo
},
data() {
return {
zoom: 12,
zooms:[10,18],
center: [118.835418, 31.863971], // 121.59996, 31.197646
map: null,
componentMarker: {
visible: true,
},
switches: [
{ active: true, title: "视频监控", id: 1 },
{ active: false, title: "算法监控", id: 2 },
{ active: false, title: "自建监控", id: 3 },
],
// 所有点位信息
markers:[],
// 人员弹框信息
personInfo: {
position: [],
info: {},
personinfo:{},
visible: false,
},
// 事件弹框
eventInfo: {
position: [],
visible: false,
},
// 车辆弹框信息
carInfo: {
position: [],
info:{},
visible: false,
},
// 监控视频弹框信息
monitoringInfo: {
position: [],
info:{},
visible: false,
},
// 沿街商铺弹框信息
shopInfo: {
position: [],
info:{},
visible: false,
},
isClickLingtedPolygonId:false,
lightedPolygon:null,
lightedText:null,
highlightedPolygonId:null,
layers: {
layer:null,
text: null,
layer2:null,
layer3:null,
layer4:null,
text1:null,
markers:null,
},
showVideo:false,
videoCondition: {
destID: '9999112301',
msgType: 1,
},
player:null,
timer:null,
isPositioning:false,
markerOffset: [-35,-123],
mapLoading:false,
count:0,
cluster:null,
personMarkers:[],
MyInput:true,
zadian:false,
input: "", // 输入框的值
actionMap: 1, // 默认选中执法人员地图
action: 1, // 切换执法人员/车辆/事件分类/监控视频/沿街商铺分布 控制的值
leftAnimationData: true,
rightAnimationData: true,
wanggeData: null, // 区域网格数据
quyuData: null, // 重点区域数据
weilanData: null, // 考勤围栏数据
luduanData: null, // 重点路段
personLine: [], // 在线人员情况
carLine: [], // 车辆情况
visible: false, // 卫星底图是否显示
onIcon:null,
offIcon:null,
videoPoint:[],
videoUrl:"",
};
},
methods: {
// 网页刷新/浏览器关闭
beforeunloadHandler(event){
if(this.personInfo.info.userId && this.personInfo.info.imei) {
this._beforeUnload_time = new Date().getTime();
videoSurveillance({destId:this.personInfo.info.userId,imei:this.personInfo.info.imei,msgType:0}).then(res=>{})
}
},
unloadHandler(e){
this._gap_time = new Date().getTime()-this._beforeUnload_time;
if(this._gap_time <= 5){
if(this.personInfo.info.userId && this.personInfo.info.imei) {
videoSurveillance({destId:this.personInfo.info.userId,imei:this.personInfo.info.imei,msgType:0}).then(res=>{})
}
}
},
init(map) {
this.map = map;
// o.setMapStyle('amap://styles/darkblue')
map.setMapStyle("amap://styles/d02b66b0a7f190d5a1556a3f59c86518");
// console.log(o.getCenter())
// console.log(this.map,'initMapinitMap');
this.layers.layer = new AMap.OverlayGroup(); // 一级网格
this.layers.layer2 = new AMap.OverlayGroup(); // 二级网格 ⌈ 暂废弃 ⌋
this.layers.layer3 = new AMap.OverlayGroup(); // 围栏、路段、区域、及文本
this.layers.layer4 = new AMap.OverlayGroup(); // 地图扎点
this.layers.text = new AMap.OverlayGroup(); // 一级网格文本
this.layers.text1 = new AMap.OverlayGroup(); // 二级网格文本
this.layers.markers = new AMap.OverlayGroup(); // 监控视频markers
this.$nextTick(() => {
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;
})
this.map.add(this.layers.layer);
this.map.add(this.layers.text);
map.setFitView();
// 获取二级网格数据
// this.getWanggeGeoJson();
// 获取围栏数据
this.getWeilanGeoJson();
// 获取重点区域数据
this.getQuyuGeoJson();
// 获取重点路段数据
this.getLuduanGeoJson();
// 修改图层组的层级在点击到围栏，区域，路段时监听网格时就能触发点击事件
// this.layers.layer2.setOptions({ zIndex: 100 });
// this.layers.layer3.setOptions({ zIndex: 99 });
this.layers.layer.on('click', (e)=>{
// console.log(e,'this.layers.layer2的点击事件');
if(this.isPositioning) {
// console.log(e,'eeeeeeee');
const icon = new AMap.Icon({
size: new AMap.Size(25, 34), //图标尺寸
image: require('../../../assets/images/icon/icon2.png'), //Icon 的图像
imageOffset: new AMap.Pixel(-9, -3), //图像相对展示区域的偏移量，适于雪碧图等
imageSize: new AMap.Size(135, 40), //根据所设置的大小拉伸或压缩图片
});
var marker = new AMap.Marker({
position: new AMap.LngLat(e.lnglat.lng, e.lnglat.lat),
anchor: 'bottom-center',
icon: icon
})
this.layers.layer4.addOverlay(marker);
map.add(this.layers.layer4)
let addressName
var lng = e.lnglat.lng + '';
var lat = e.lnglat.lat + '';
// let clickPoint = this.layers.layer2.getOverlays();
// for (var i = 0; i < clickPoint.length; i++) {
// console.log(clickPoint[i],'点击的地址');
// }
axios.get('https://restapi.amap.com/v3/geocode/regeo',{
params:{
key: "5f4a2c045cffa20551a0300c31c1ee78",
location: `${lng.substring(0,9)},${lat.substring(0,9)}`,
extensions: 'all',
// batch: true,
}
}).then(response=>{
// console.log(response,'response');
addressName = response.data.regeocode.aois[0]?.name || response.data.regeocode.pois[0]?.name;
// console.log(addressName,'this.addressName');
if(this.layers.layer4) {
// e.target.getExtData().name; e.target.getExtData()获取给图层设置的extData属性的name
this.$refs.newEvent.open({lnglat:e.lnglat,address:addressName,meshOccurs:e.target.getExtData().name,marker:marker});
this.isPositioning = false;
}
})
}
})
if(this.layers.layer3) {
this.layers.layer3.hide();
}
if(this.layers.text1){
this.layers.text1.hide();
}
// 获取点位
this.getMarkers(1);
// if(this.layers.layer2) {
// this.layers.layer2.hide();
// }
// zoomchange ： 地图缩放级别更改后触发。 zoomstart ： 缩放开始时触发。 zoomend ： 缩放停止时触发。
map.on("zoomend", (ev) => {
let zoom = map.getZoom();
console.log(zoom,'zoom层级');
if(zoom < 11) {
this.componentMarker.visible = false;
this.personInfo.visible = false;
this.eventInfo.visible = false;
this.carInfo.visible = false;
this.monitoringInfo.visible = false;
this.shopInfo.visible = false;
} else {
this.componentMarker.visible = true;
if(zoom < 13.2) {
this.layers.layer.show();
this.layers.text.show();
if(zoom < 12) {
this.unlightedPolygonId()
}
if(this.layers.layer3) {
this.layers.layer3.hide();
this.isPositioning = false;
}
} else if(zoom > 13.2){
this.layers.layer.hide();
this.layers.text.hide();
this.layers.text1.show();
this.layers.layer3.show();
if(zoom > 14) {
this.layers.text1.show();
this.layers.layer3.show();
} else {
if(this.highlightedPolygonId !== 1) {
this.unlightedPolygonId()
}
}
}
}
});
});
},
// 人员非聚合自定义样式及点击事件
_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")
// }
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(-32.5, -48.5);
context.marker.setContent(content);
context.marker.setOffset(offset);
context.marker.on('click',(ev)=>{
// 根据imei获取人员信息
getUserByImei({imei:context.data[0].info.imei}).then(res=>{
if(res.code == 200) {
this.personInfo.position = context.data[0].position;
this.personInfo.info = context.data[0].info;
this.personInfo.personinfo = res.data[0];
this.personInfo.visible = true;
}
})
})
},
// 事件的非聚合自定义样式及点击事件
_eventMarker (context) {
// console.log(context,"context");
var content = `<div class="markerStyles"><img src="${context.data[0].info.status == '已处理' ? require("../../../assets/images/icon/offLine2.png") : require("../../../assets/images/icon/icon2.png")}" alt=""></div>`;
var offset = new AMap.Pixel(-13, -16);
context.marker.setContent(content)
context.marker.setOffset(offset)
context.marker.on('click',(ev)=>{
this.eventInfo.position = context.data[0].position;
this.eventInfo.info = context.data[0].info;
this.eventInfo.visible = true;
})
},
// 车辆非聚合自定义样式及点击事件
_carMarker(context){
var content = `<div class="markerStyles"><img src="${require("../../../assets/images/icon/icon4.png")}" alt=""></div>`;
var offset = new AMap.Pixel(-13, -16);
context.marker.setContent(content)
context.marker.setOffset(offset)
context.marker.on('click',(ev)=>{
this.carInfo.position = context.data[0].position;
this.carInfo.info = context.data[0].info;
this.carInfo.visible = true;
})
},
// 视频非聚合自定义样式及点击事件
_renderMarker (context) {
// ${<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);
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;
})
},
// 厂中厂园中园视频非聚合自定义样式及点击事件
_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) {
// <div class="marker-Text" style="width:${context.data[0].info.shopName.length * 15}px">${context.data[0].info.shopName}</div>
var content = `<div class="markerStyles"><img src="${require("../../../assets/images/icon/icon6.png")}" alt=""></div>`;
var offset = new AMap.Pixel(-13.5, -15);
context.marker.setContent(content)
context.marker.setOffset(offset);
context.marker.on('click',(ev)=>{
this.shopInfo.position = context.data[0].position;
this.shopInfo.info = context.data[0].info;
this.shopInfo.visible = true;
})
},
// 各个点位获取
getMarkers(id,status){
if (this.cluster) {
this.cluster.setMap(null);
}
let ico1 = require("../../../assets/images/icon/icon1.png");
let ico2 = require("../../../assets/images/icon/icon2.png");
let ico3 = require("../../../assets/images/icon/icon3.png");
let ico4 = require("../../../assets/images/icon/icon4.png");
let ico5 = require("../../../assets/images/icon/icon5.png");
let ico6 = require("../../../assets/images/icon/icon6.png");
let offIcon1 = require("../../../assets/images/icon/offLine1.png");
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.mapLoading = status ? false : true;
if(id == 1) {
this.personLine = [];
this.videoPoint = [];
// 获取人员信息
onlinePeople().then((res) => {
this.mapLoading = false;
// console.log(res,'点位信息');
if (res.data) {
res.data.forEach((element) => {
if (element.status == "0" || element.status == "1") {
this.personLine.push(element);
let obj = {position:[]};
obj.position[0] = element.longitude;
obj.position[1] = element.latitude;
obj.text = element.userName;
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.videoPoint.push(obj)
}
})
this.count = this.videoPoint.length;
AMap.plugin(['AMap.MarkerCluster'],()=>{
this.cluster = new AMap.MarkerCluster(this.map,this.videoPoint,{
gridSize: 60, // 设置网格像素大小
styles: sts,
maxZoom: 15,
// renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
renderMarker: this._personRenderMarker, // 自定义非聚合点样式
})
})
} else {
this.$modal.msgError("执法人员" + res.data.msg);
}
}).catch(err=>{
this.mapLoading = false;
})
} else if(id == 2) {
listpatrol({current:1,size:1000}).then(res=>{
this.mapLoading = false;
if(res.code == 200) {
this.videoPoint = [];
res.data.records.forEach((element)=>{
let obj = {position:[]};
let location = element.location?.split(',');
// obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
if(location.length > 1) {
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.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){
getCarManageList({pageNum: 1,pageSize: 1000}).then(res=>{
// console.log('车辆',res);
this.carLine = res.rows
this.videoPoint = [];
this.mapLoading = false;
res.rows.forEach((element)=>{
// console.log(element);
let obj = {position:[]};
obj.position[0] = element.longitude;
obj.position[1] = element.latitude;
// obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
obj.lnglat = new AMap.LngLat(element.longitude ? element.longitude : 0 ,element.latitude ? element.latitude : 0)
obj.imgSrc = ico4;
obj.info = element;
// this.markers.push(obj)
this.videoPoint.push(obj)
})
this.count = this.videoPoint.length;
AMap.plugin(['AMap.MarkerCluster','AMap.Size','AMap.Pixel'],()=>{
this.cluster = new AMap.MarkerCluster(this.map,this.videoPoint,{
gridSize: 60, // 设置网格像素大小
styles: sts,
maxZoom: 15,
// renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
renderMarker: this._carMarker, // 自定义非聚合点样式
})
})
}).catch(err=>{
this.mapLoading = false;
})
} else if(id == 4){
// 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.videoPoint = [];
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 == 5){
getStreetShopList({pageSize:500,pageNum:1}).then(res=>{
this.videoPoint = [];
this.mapLoading = false;
res.rows.forEach((element)=>{
let obj = {position:[]};
obj.position[0] = element.longitude;
obj.position[1] = element.latitude;
// obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
obj.lnglat = new AMap.LngLat(element.longitude ? element.longitude : 0 ,element.latitude ? element.latitude : 0)
obj.imgSrc = ico6;
obj.info = element;
// this.markers.push(obj)
this.videoPoint.push(obj)
})
this.count = this.videoPoint.length;
AMap.plugin(['AMap.MarkerCluster','AMap.Size','AMap.Pixel'],()=>{
this.cluster = new AMap.MarkerCluster(this.map,this.videoPoint,{
gridSize: 60, // 设置网格像素大小
styles: sts,
maxZoom: 15,
// renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
renderMarker: this._DrenderMarker, // 自定义非聚合点样式
})
})
}).catch(err=>{
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, // 自定义非聚合点样式
})
})
})
}
},
// 点位点击事件
clickMarker(marker,e){
// console.log(marker);
if (this.actionMap == 1) {
this.personInfo.position = marker.position;
this.personInfo.info = marker.info;
this.personInfo.visible = true;
} else if (this.actionMap == 2) {
this.eventInfo.position = marker.position;
this.eventInfo.visible = true;
} else if (this.actionMap == 3) {
this.carInfo.position = marker.position;
this.carInfo.visible = true;
} else if (this.actionMap == 4) {
this.monitoringInfo.position = marker.position;
this.monitoringInfo.info = marker.info;
this.monitoringInfo.visible = true;
} else if (this.actionMap == 5) {
this.shopInfo.position = marker.position;
this.shopInfo.info = marker.info;
// console.log(marker.info);
this.shopInfo.visible = true;
}
},
// 点位关闭事件
markersClosePopup(){
if (this.actionMap == 1) {
this.personInfo.visible = false;
} else if(this.actionMap == 2) {
this.eventInfo.visible = false;
} else if(this.actionMap == 3) {
this.carInfo.visible = false;
} else if(this.actionMap == 4) {
this.monitoringInfo.visible = false;
} else if(this,this.actionMap == 5) {
this.shopInfo.visible = false;
}
},
// 任务派发事件
taskClick(){
if(this.personInfo.info.status == "1") {
this.$refs.personageTask.open(this.personInfo.info);
} else {
this.$modal.msgError("该设备已离线");
}
},
// 播放监控视频
initVideoPlayer(){
this.$nextTick(()=>{
var videoDom = document.getElementById('flvvideo')
this.player = flvjs.createPlayer({
type: 'flv', // 媒体类型，默认是 flv,
isLive: true, // 是否是直播流
hasAudio: true, // 是否有音频
hanVideo: true, // 是否有视频
url: this.videoUrl, // 流地址
},{
// 其他的配置项可以根据项目实际情况参考 api 去配置
autoCleanupMinBackwardDuration: true, // 清除缓存 对 SourceBuffer 进行自动清理
})
this.player.attachMediaElement(videoDom)
try {
this.player.load();
this.player.play();
this.listenVideo();
} catch (error) {
console.log(error);
}
// 视频卡顿导致流断了，那就重连
// this.player.on(flvjs.Events.ERROR,(errType, errDetail)=>{
// // console.log(errType,'errTypeerrTypeerrType');
// // console.log(errDetail,'errDetailerrDetailerrDetailerrDetail');
// if(this.player){
// this.destroyVideos()
// this.initVideoPlayer(videoUrl)
// }
// })
})
},
destroyVideos() {
if (!this.player) return;
this.player.pause();
this.player.unload();
this.player.detachMediaElement();
this.player.destroy();
this.player = null;
},
// 监听视频流是否断流或者卡顿
listenVideo() {
const that = this;
if(this.player) {
this.player.on(
flvjs.Events.ERROR,
(errorType, errorDetail, errorInfo) => {
// console.log("errorType", errorType);
// console.log("errorDetail", errorDetail);
// console.log("errorInfo", errorInfo);
if(errorInfo.code == 404) {
setTimeout(()=>{
videoSurveillance({
...that.videoCondition,
destID:that.personInfo.info.userId,
imei:that.personInfo.info.imei
}).then((res) => {
if (res.code == 200 && res.data.msg == "操作成功") {
setTimeout(()=>{
that.videoUrl = `http://10.236.2.28:54567/bjh-admin-server/jn/live/9999_${that.personInfo.info.userId}.flv`
if(!that.showVideo) {
videoSurveillance({destId:that.personInfo.info.userId,imei:that.personInfo.info.imei,msgType:0}).then(res=>{})
that.destroyVideos();
} else {
that.initVideoPlayer();
}
},3000);
}
});
},2000)
} else {
// 视频出错后销毁重建
that.destroyVideos();
that.initVideoPlayer();
}
}
);
// 视频断流
this.player.on("statistics_info", function (res) {
if(that.lastDecodedFrames === 0){
that.lastDecodedFrames = res.decodedFrames
return
}
if(that.lastDecodedFrames != res.decodedFrames){
that.lastDecodedFrames = res.decodedFrames
}else{
that.lastDecodedFrames = 0
that.destroyVideos()
that.initVideoPlayer()
}
});
}
},
// 执法人员强制观摩
watchClick(){
if(this.personInfo.info.status == "1") {
// console.log(this.personInfo.info);
this.showVideo = true;
videoSurveillance({...this.videoCondition,destID:this.personInfo.info.userId,imei:this.personInfo.info.imei}).then(res=>{
if(res.code == 200 && res.data.msg == '操作成功') {
// http://121.229.2.163:9291/live/9999 http://120.27.25.166:9305/live/9999_
setTimeout(()=>{
this.videoUrl = `http://10.236.2.28:54567/bjh-admin-server/jn/live/9999_${this.personInfo.info.userId}.flv`
this.initVideoPlayer()
},3000)
}
})
} else {
this.$modal.msgError("该人员已离线");
}
},
// 强制观摩关闭事件
videoClose(){
this.showVideo = false;
if(!this.player) return
this.player.pause()
this.player.unload()
this.player.detachMediaElement()
this.player.destroy()
this.player = null
videoSurveillance({destID:this.personInfo.info.userId,imei:this.personInfo.info.imei,msgType:0})
if(this.timer) clearInterval(this.timer)
},
// 位置分享
shareClick(){
// console.log(this.personInfo,"位置分享");
if(this.personInfo.info.status == "1") {
var aux = document.createElement("input");
aux.setAttribute("value", this.personInfo.info.address);
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
this.$modal.msgSuccess("位置已复制");
} else {
this.$modal.msgError("该人员已离线");
}
},
// 事件指派
eventBtn(){
this.$refs.crewAssign.open(this.eventInfo.info);
},
// 监控视频上墙
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();
// if(status == 1) { // expand:"transcode=1"
// getPreviewURLs({protocol:'hls',cameraIndexCode:this.monitoringInfo.info.nationalStandardCode,streamType:"1",transmode:"1"}).then(res=>{
// if(res.code == 200) {
// // console.log(res,'视频地址获取');
// // this.$refs.aloneVideo.open(res.msg);
// let videoUrl = res.msg;
// var code1 = videoUrl.match(/\/openUrl\/(.*)/)[1]
// this.$refs.aloneVideo.open(`http://10.236.2.28:54567/bjh-admin-server/jn/videosLive/${code1}`);
// }
// })
if(this.actionMap == 4) {
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(){
getPreviewURLs({protocol:'hls',cameraIndexCode:this.monitoringInfo.info.cameraIndexCode,streamType:"1",transmode:"1"}).then(res=>{
if(res.code == 200) {
// this.$refs.aloneVideo.open(res.msg);
var aux = document.createElement("input");
aux.setAttribute("value", res.msg);
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
this.$modal.msgSuccess("视频地址已复制");
}
}).catch(error=>{
this.$modal.msgError(error);
})
},
// 商铺详情查看
getShopInfo(){
this.$refs.shop.open(this.shopInfo.info);
},
// 二级网格获取
getWanggeGeoJson(){
bgridsetting({pageNum:1,pageSize:100,level:1}).then(res=>{
let W = []
res.rows.forEach((element)=>{
let shapeStr = JSON.parse(element.shapeStr)
W.push(shapeStr)
var wangge = new AMap.Polygon({
path:shapeStr.geometry.coordinates[0],
strokeColor: '#FFBF7A',
fillColor: '#DC8419',
strokeOpacity: 1,
fillOpacity: 0.3,
editable:false,
visible:true,
extData:{
name: shapeStr.properties.NAME
},
})
var text = new AMap.Text({
// position: [element.properties.CENTERX,element.properties.CENTERY],
position: getCenter(shapeStr.geometry.coordinates[0][0]),
anchor: 'bottom-center',
text: shapeStr.properties.NAME,
style:{
'font-size': '16px',
'font-weight': 'bold',
'text-align': 'center',
'color': '#FBFF00',
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
'white-space': 'nowrap',
},
});
shapeStr.myPolygon = wangge;
shapeStr.text = text;
this.layers.layer2.addOverlay(wangge);
this.layers.text1.addOverlay(text);
this.map.add(this.layers.layer2);
this.map.add(this.layers.text1);
})
this.wanggeData = W;
})
// console.log(this.layers.layer,'this.layers.layer');
// this.map.add(this.layers.layer);
},
// 围栏网格获取
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);
// 圆形围栏
if (shapeStr.features[0].geometry.type == "Point") {
var circle = new AMap.Circle({
center: shapeStr.features[0].geometry.coordinates,
radius: shapeStr.features[0].properties.radius,
bubble: true,
extData:{
id: '围栏polygon',
name: shapeStr.features[0].properties.NAME
},
strokeOpacity: 0.9,
strokeColor: "#62E1FA",
fillColor: "#62E1FA",
fillOpacity: 0.3,
editable:false,
visible:true,
})
var text = new AMap.Text({
position: shapeStr.features[0].geometry.coordinates,
anchor: 'bottom-center',
offset: [0, 12],
text: element.name,
extData:{
id: '围栏text',
},
style: {
'font-size': '14px',
'text-align': 'center',
'color': '#62E1FA',
'line-height': '24px',
'letter-spacing': '2px',
'white-space': 'nowrap',
},
});
this.layers.layer3.addOverlay(circle)
this.layers.layer3.addOverlay(text)
this.layers.layer3.hide();
this.map.add(this.layers.layer3);
element.myPolygon = circle;
element.text = text;
this.openClick(circle)
// this.map.add(text);
// 多边形围栏
} else if (shapeStr.features[0].geometry.type == "Polygon") {
var weilan = new AMap.Polygon({
path:shapeStr.features[0].geometry.coordinates,
bubble: true,
extData:{
id: '围栏polygon',
name: shapeStr.features[0].properties.NAME
},
strokeOpacity: 0.9,
strokeColor: "#62E1FA",
fillColor: "#62E1FA",
fillOpacity: 0.3,
editable:false,
visible:true,
})
// 获取多边形的中心点
var currentCenter = getCenter(shapeStr.features[0].geometry.coordinates[0]);
var text = new AMap.Text({
position: currentCenter,
anchor: 'bottom-center',
offset: [0, 12],
text: element.name,
extData:{
id: '围栏text' ,
},
style: {
'font-size': '14px',
'text-align': 'center',
'color': '#62E1FA',
'line-height': '24px',
'letter-spacing': '2px',
'white-space': 'nowrap',
},
});
this.layers.layer3.addOverlay(weilan)
this.layers.layer3.addOverlay(text)
this.layers.layer3.hide();
this.map.add(this.layers.layer3);
element.myPolygon = weilan;
element.text = text;
this.openClick(weilan)
// this.map.add([wangge,text]);
// this.map.add(text);
}
})
})
},
// 重点区域获取
getQuyuGeoJson(){
regionalsettings({ pageNum: 1, pageSize: 100 }).then((res) => {
this.quyuData = res.rows;
this.quyuData.forEach((element,index) => {
let shapeStr = JSON.parse(element.shapeStr);
var quyu = new AMap.Polygon({
path:shapeStr.features[0].geometry.coordinates,
bubble: true,
strokeOpacity: 0,
strokeColor: '#FF0000',
fillColor: '#FF0000',
fillOpacity:0.38,
editable:false,
visible:true,
extData:{
id: '区域polygon',
name: element.name
},
})
var text = new AMap.Text({
position: shapeStr.features[1].geometry.coordinates,
anchor: 'bottom-center',
text: element.name,
extData:{
id: '区域text'
},
style:{
'font-size': '16px',
'font-weight': 'bold',
'text-align': 'center',
'color': '#F44444',
'white-space': 'nowrap',
},
});
element.myPolygon = quyu;
element.text = text;
this.layers.layer3.addOverlay(quyu)
this.layers.layer3.addOverlay(text)
this.layers.layer3.hide();
this.map.add(this.layers.layer3);
this.openClick(quyu)
// this.map.add([quyu,text]);
// this.map.add(text);
})
})
},
// 重点路段获取
getLuduanGeoJson(){
roadsetting({ pageNum: 1, pageSize: 100 }).then((res) => {
this.luduanData = res.rows;
// console.log(res,'resresres');
this.luduanData.forEach((element) => {
let shapeStr = JSON.parse(element.shapeStr);
// console.log(shapeStr,'shapeStrshapeStrshapeStr');
var luduan = new AMap.Polyline({
path:shapeStr.features[0].geometry.coordinates,
bubble: true,
strokeOpacity: 1,
strokeColor: '#46FF77',
editable:false,
visible:true,
})
var text = new AMap.Text({
position: shapeStr.features[1].geometry.coordinates,
anchor: 'bottom-center',
text: element.name,
style:{
'font-size': '16px',
'font-weight': 'bold',
'text-align': 'center',
'color': '#46FF77',
'white-space': 'nowrap',
},
});
this.layers.layer3.addOverlay(luduan)
this.layers.layer3.addOverlay(text)
this.layers.layer3.hide();
this.map.add(this.layers.layer3);
element.myPolyline = luduan;
element.text = text;
this.openClick(luduan)
// this.map.add([luduan,text]);
// this.map.add(text);
})
})
},
// 今日明日获取
getCurrentTime(id) {
const currentDate = new Date();
if(id){
currentDate.setDate(currentDate.getDate() + 1);
}
const year = currentDate.getFullYear();
const month = currentDate.getMonth() + 1; // 月份从0开始，所以要加1
const day = currentDate.getDate();
return year + "-" +month + "-" + day;
},
// 开启围栏，路段，区域的点击事件
openClick(layer){
layer.on('click',(e)=>{
// console.log(e,'区域的点击事件');
// console.log(this.map.getAllOverlays('circle','polyline','polygon'),'this.layers.layer2');
if(this.isPositioning) {
let latlng = e.lnglat
let name;
this.layers.layer3.eachOverlay((item)=>{
// console.log(item,'item');
if(item.getBounds().contains(latlng)){
name = item.getExtData().name
}
})
// console.log(name,"点击的网格名称");
// 拿到点击的网格⌈ 围栏 ⌋名称
const icon = new AMap.Icon({
size: new AMap.Size(26, 26), //图标尺寸
image: require('../../../assets/images/icon/icon2.png'), //Icon 的图像
imageOffset: new AMap.Pixel(0, 0), //图像相对展示区域的偏移量，适于雪碧图等
imageSize: new AMap.Size(26, 26) //根据所设置的大小拉伸或压缩图片
});
var marker = new AMap.Marker({
position: new AMap.LngLat(e.lnglat.lng, e.lnglat.lat),
anchor: 'bottom-center',
icon: icon
})
this.layers.layer4.addOverlay(marker);
this.map.add(this.layers.layer4)
let addressName
var lng = e.lnglat.lng + '';
var lat = e.lnglat.lat + '';
// let clickPoint = this.layers.layer2.getOverlays();
// for (var i = 0; i < clickPoint.length; i++) {
// console.log(clickPoint[i],'点击的地址');
// }
axios.get('https://restapi.amap.com/v3/geocode/regeo',{
params:{
key: "5f4a2c045cffa20551a0300c31c1ee78",
location: `${lng.substring(0,9)},${lat.substring(0,9)}`,
extensions: 'all',
// batch: true,
}
}).then(response=>{
// console.log(response,'response');
addressName = response.data.regeocode.aois[0]?.name || response.data.regeocode.pois[0]?.name;
// console.log(addressName,'this.addressName');
if(this.layers.layer4) {
// e.target.getExtData().name; e.target.getExtData()获取给图层设置的extData属性的name
this.$refs.newEvent.open({lnglat:latlng,address:addressName,meshOccurs:name,marker:marker});
this.isPositioning = false;
}
})
}
})
},
// 子组件的实时定位事件
realTimeLocationClick(item,id){
if(id == 1 && this.actionMap == 1) {
this.personLine.forEach(per=>{
if(item.imei == per.imei) {
getUserByImei({imei:per.imei}).then(resTwo=>{
if(resTwo.code == 200) {
this.map.setZoomAndCenter(16,[per.longitude,per.latitude]);
setTimeout(()=>{
this.personInfo.position = [per.longitude,per.latitude];
this.personInfo.info = per;
this.personInfo.personinfo = resTwo.data[0];
this.personInfo.visible = true;
},1500)
}
})
}
})
} else if(id == 3 && this.actionMap == 3){
this.carLine.forEach(car=>{
if(item.id == car.id) {
this.map.setZoomAndCenter(16,[car.longitude,car.latitude]);
}
})
}
},
// 执法人员/执法车辆 行程轨迹
travelPath(){
if(this.actionMap == 1) {
this.$refs.personageTrack.open("person", this.personInfo.info);
} else if(this.actionMap == 3) {
this.$refs.personageTrack.open("car", this.carInfo.info);
}
},
// 车载监控视频
watchCarVideo(){
getPreviewURLs({protocol:'hls',cameraIndexCode:'5ab6cc3745e147918b2a96c2604ecdbb',streamType:"1",transmode:"1"}).then(res=>{
this.$refs.carVideo.open(res.msg);
})
// previewURLs({cameraIndexCode:'5ab6cc3745e147918b2a96c2604ecdbb',transmode:1,protocol:'hls',streamType:1}).then(res=>{
// let carUrl = JSON.parse(res.data);
// this.$refs.carVideo.open(carUrl.data.url);
// })
},
// 子组件的名称点击事件
divClick(lightedPolygonId){
if(this.action == 1) {
// 取消重点区域高亮
this.quyuData.forEach((element) => {
element.myPolygon?.setOptions({
strokeOpacity: 0,
strokeColor: '#FF0000',
fillColor: '#FF0000',
fillOpacity:0.38,
editable:false,
visible:true,
});
element.text?.setStyle({
'color': '#F44444',
});
})
// 取消重点路段高亮
this.luduanData.forEach((element) => {
element.myPolyline?.setOptions({
strokeOpacity: 1,
strokeColor: '#46FF77',
editable:false,
visible:true,
});
element.text?.setStyle({
'color': '#46FF77',
});
})
// 取消考勤围栏高亮
this.weilanData.forEach((element) => {
element.myPolygon?.setOptions({
strokeOpacity: 0.9,
strokeColor: "#62E1FA",
fillColor: "#62E1FA",
fillOpacity: 0.3,
editable:false,
visible:true,
});
element.text?.setStyle({
'color': '#62E1FA',
});
})
// 取消区域网格高亮
this.wanggeData.forEach((element)=>{
element.myPolygon?.setOptions({
strokeOpacity: 1,
strokeColor: '#00C5EC',
fillColor: '#00AEFF',
fillOpacity: 0.4,
editable:false,
visible:true,
});
element.text?.setStyle({
'color': '#00AEFF',
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
});
})
this.isClickLingtedPolygonId = true;
this.highlightedPolygonId = lightedPolygonId.id;
if(lightedPolygonId.id == 1) {
// 区域网格
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',
fillOpacity: 0.5,
strokeOpacity: 0.8,
editable:false,
visible:true,
});
element.text.setStyle({
'color': '#46FF77',
});
this.lightedPolygon = element.myPolygon;
this.lightedText = element.text;
this.map.setFitView(element.myPolygon);
// this.map.setFitView(element.myPolygon,false,null,13.1);
} else {
element.myPolygon.setOptions({
strokeColor: '#00C5EC',
fillColor: '#00AEFF',
fillOpacity: 0.4,
strokeOpacity: 1,
editable:false,
visible:true,
});
element.text.setStyle({
'color': '#00AEFF',
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
});
}
})
} else if(lightedPolygonId.id == 2) {
// 重点区域
this.quyuData.forEach((element) => {
if(element.id == lightedPolygonId.item.id) {
element.myPolygon.setOptions({
strokeColor: '#46FF77',
fillColor: '#46FF77',
fillOpacity: 0.5,
strokeOpacity: 0.8,
editable:false,
visible:true,
});
element.text.setStyle({
'color': '#FFDBB7',
});
this.lightedPolygon = element.myPolygon;
this.lightedText = element.text;
this.map.setFitView(element.myPolygon);
} else {
element.myPolygon.setOptions({
strokeOpacity: 0,
strokeColor: '#FF0000',
fillColor: '#FF0000',
fillOpacity:0.38,
editable:false,
visible:true,
});
element.text.setStyle({
'color': '#F44444',
});
}
})
} else if(lightedPolygonId.id == 3) {
// 重点路段
this.luduanData.forEach((element) => {
if(element.id == lightedPolygonId.item.id) {
element.myPolyline.setOptions({
strokeOpacity: 1,
strokeColor: '#FF0000',
editable:false,
visible:true,
});
element.text.setStyle({
'color': '#FF0000',
});
this.lightedPolygon = element.myPolyline;
this.lightedText = element.text;
this.map.setFitView(element.myPolyline);
} else {
element.myPolyline.setOptions({
strokeOpacity: 1,
strokeColor: '#46FF77',
editable:false,
visible:true,
});
element.text.setStyle({
'color': '#46FF77',
});
}
})
} else if(lightedPolygonId.id == 4) {
// 考勤围栏
this.weilanData.forEach((element) => {
if(element.id == lightedPolygonId.item) {
element.myPolygon.setOptions({
strokeColor: '#46FF77',
fillColor: '#46FF77',
fillOpacity: 0.5,
strokeOpacity: 0.8,
editable:false,
visible:true,
});
element.text.setStyle({
'color': '#46FF77',
});
this.lightedPolygon = element.myPolygon;
this.lightedText = element.text;
this.map.setFitView(element.myPolygon);
} else {
element.myPolygon.setOptions({
strokeOpacity: 0.9,
strokeColor: "#62E1FA",
fillColor: "#62E1FA",
fillOpacity: 0.3,
editable:false,
visible:true,
});
element.text.setStyle({
'color': '#62E1FA',
});
}
})
}
} else if(this.action == 2) {
// console.log("取消高亮并且判断是卫星地图");
// console.log(lightedPolygonId.item.id,"id");
// 取消重点区域高亮
this.quyuData.forEach((element) => {
element.myPolygon?.setOptions({
strokeOpacity: 0,
strokeColor: '#FF0000',
fillColor: '#FF0000',
fillOpacity:0.6,
editable:false,
visible:true,
});
element.text?.setStyle({
'color': '#E4ECFF',
});
})
// 取消重点路段高亮
this.luduanData.forEach((element) => {
element.myPolyline?.setOptions({
strokeOpacity: 1,
strokeColor: '#46FF77',
editable:false,
visible:true,
});
element.text?.setStyle({
'color': '#46FF77',
});
})
// 取消考勤围栏高亮
this.weilanData.forEach((element) => {
element.myPolygon?.setOptions({
strokeOpacity: 1,
strokeColor: "#00B7FF",
fillColor: "#001AFF",
fillOpacity: 0.5,
editable:false,
visible:true,
});
element.text?.setStyle({
'color': '#E4ECFF',
});
})
// 取消区域网格高亮
this.wanggeData.forEach((element)=>{
element.myPolygon?.setOptions({
strokeColor: '#0084FF',
fillColor: '#40AFFF',
fillOpacity: 0.8,
editable:false,
visible:true,
});
element.text?.setStyle({
'color': '#DFFAFF',
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
});
})
this.isClickLingtedPolygonId = true;
this.highlightedPolygonId = lightedPolygonId.id;
if(lightedPolygonId.id == 1) {
// 区域网格
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',
fillOpacity: 0.5,
strokeOpacity: 0.8,
editable:false,
visible:true,
});
element.text.setStyle({
'color': '#46FF77',
});
this.lightedPolygon = element.myPolygon;
this.lightedText = element.text;
this.map.setFitView(element.myPolygon);
} else {
element.myPolygon.setOptions({
strokeColor: '#0084FF',
fillColor: '#40AFFF',
fillOpacity: 0.8,
strokeOpacity: 1,
editable:false,
visible:true,
});
element.text.setStyle({
'color': '#00AEFF',
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
});
}
})
} else if(lightedPolygonId.id == 2) {
// 重点区域
this.quyuData.forEach((element) => {
if(element.id == lightedPolygonId.item.id) {
element.myPolygon.setOptions({
strokeColor: '#46FF77',
fillColor: '#46FF77',
fillOpacity: 0.5,
strokeOpacity: 0.8,
editable:false,
visible:true,
});
element.text.setStyle({
'color': '#FFDBB7',
});
this.lightedPolygon = element.myPolygon;
this.lightedText = element.text;
this.map.setFitView(element.myPolygon);
} else {
element.myPolygon.setOptions({
strokeOpacity: 0,
strokeColor: '#FF0000',
fillColor: '#FF0000',
fillOpacity:0.6,
editable:false,
visible:true,
});
element.text.setStyle({
'color': '#E4ECFF',
});
}
})
} else if(lightedPolygonId.id == 3) {
// 重点路段
this.luduanData.forEach((element) => {
if(element.id == lightedPolygonId.item.id) {
element.myPolyline.setOptions({
strokeOpacity: 1,
strokeColor: '#FF0000',
editable:false,
visible:true,
});
element.text.setStyle({
'color': '#FF0000',
});
this.lightedPolygon = element.myPolyline;
this.lightedText = element.text;
this.map.setFitView(element.myPolyline);
} else {
element.myPolyline.setOptions({
strokeOpacity: 1,
strokeColor: '#46FF77',
editable:false,
visible:true,
});
element.text.setStyle({
'color': '#46FF77',
});
}
})
} else if(lightedPolygonId.id == 4) {
// 考勤围栏
this.weilanData.forEach((element) => {
if(element.id == lightedPolygonId.item) {
element.myPolygon.setOptions({
strokeColor: '#46FF77',
fillColor: '#46FF77',
fillOpacity: 0.5,
strokeOpacity: 0.8,
editable:false,
visible:true,
});
element.text.setStyle({
'color': '#46FF77',
});
this.lightedPolygon = element.myPolygon;
this.lightedText = element.text;
this.map.setFitView(element.myPolygon);
} else {
element.myPolygon.setOptions({
strokeOpacity: 1,
strokeColor: "#00B7FF",
fillColor: "#001AFF",
fillOpacity: 0.5,
editable:false,
visible:true,
});
element.text.setStyle({
'color': '#E4ECFF',
});
}
})
}
}
},
// 地图等级变化时如果有高亮则取消高亮
unlightedPolygonId(){
// console.log(this.highlightedPolygonId,'this.highlightedPolygonId');
if(this.isClickLingtedPolygonId) {
this.isClickLingtedPolygonId = false;
if(this.action == 1) {
if(this.highlightedPolygonId == 1) {
this.lightedPolygon.setOptions({
strokeColor: '#00C5EC',
fillColor: '#00AEFF',
fillOpacity: 0.4,
strokeOpacity: 1,
editable:false,
visible:true,
});
this.lightedText.setStyle({
'color': '#00AEFF',
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
});
} else if(this.highlightedPolygonId == 2) {
// console.log("进入区域取消高亮");
this.lightedPolygon.setOptions({
strokeOpacity: 0,
strokeColor: '#FF0000',
fillColor: '#FF0000',
fillOpacity:0.38,
editable:false,
visible:true,
});
this.lightedText.setStyle({
'color': '#F44444',
});
} else if(this.highlightedPolygonId == 3) {
this.lightedPolygon.setOptions({
strokeOpacity: 1,
strokeColor: '#46FF77',
editable:false,
visible:true,
});
this.lightedText.setStyle({
'color': '#46FF77',
});
} else if(this.highlightedPolygonId == 4) {
this.lightedPolygon.setOptions({
strokeColor: '#62E1FA',
fillColor: '#62E1FA',
strokeOpacity: 0.9,
fillOpacity: 0.3,
editable:false,
visible:true,
});
this.lightedText.setStyle({
'color': '#62E1FA',
});
}
} else if(this.action == 2) {
if(this.highlightedPolygonId == 1) {
this.lightedPolygon.setOptions({
strokeColor: '#0084FF',
fillColor: '#40AFFF',
fillOpacity: 0.8,
editable:false,
visible:true,
});
this.lightedText.setStyle({
'color': '#DFFAFF',
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
});
} else if(this.highlightedPolygonId == 2) {
// console.log("进入区域取消高亮");
this.lightedPolygon.setOptions({
strokeOpacity: 0,
strokeColor: '#FF0000',
fillColor: '#FF0000',
fillOpacity:0.6,
editable:false,
visible:true,
});
this.lightedText.setStyle({
'color': '#E4ECFF',
});
} else if(this.highlightedPolygonId == 3) {
this.lightedPolygon.setOptions({
strokeOpacity: 1,
strokeColor: '#46FF77',
editable:false,
visible:true,
});
this.lightedText.setStyle({
'color': '#46FF77',
});
} else if(this.highlightedPolygonId == 4) {
this.lightedPolygon.setOptions({
strokeOpacity: 1,
strokeColor: "#00B7FF",
fillColor: "#001AFF",
fillOpacity: 0.5,
editable:false,
visible:true,
});
this.lightedText.setStyle({
'color': '#E4ECFF',
});
}
}
}
},
// 电子底图/卫星底图切换事件
actionBtn(id) {
this.action = id;
this.$emit("changeBackground",id)
if(id == 1) {
this.visible = false;
// 修改一级网格背景
this.layers.layer.setOptions ({
strokeColor: '#00C5EC',
fillColor: '#00AEFF',
fillOpacity: 0.4,
editable:false,
visible:true,
})
// 修改一级网格字体颜色
let text = this.layers.text.getOverlays();
for (let i = 0; i < text.length; i++) {
text[i].setStyle({
'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.layer2.setOptions ({
// strokeColor: '#FFBF7A',
// fillColor: '#DC8419',
// strokeOpacity: 1,
// fillOpacity: 0.3,
// })
// 修改围栏区域文本样式
var overlays = this.layers.layer3.getOverlays();
for (var i = 0; i < overlays.length; i++) {
let id = overlays[i].getExtData().id;
if(id == "围栏text" || id == "区域text") {
overlays[i].setStyle({
'font-size': '14px',
'text-align': 'center',
'color': '#62E1FA',
'line-height': '24px',
'letter-spacing': '2px',
'white-space': 'nowrap',
})
} else if(id == "区域polygon") {
overlays[i].setOptions({
strokeOpacity: 0,
strokeColor: '#FF0000',
fillColor: '#FF0000',
fillOpacity:0.38,
})
} else if(id == "围栏polygon") {
overlays[i].setOptions({
strokeOpacity: 0.9,
strokeColor: "#62E1FA",
fillColor: "#62E1FA",
fillOpacity: 0.3,
})
}
}
this.map.setMapStyle("amap://styles/d02b66b0a7f190d5a1556a3f59c86518")
} else {
this.visible = true;
// 修改一级网格背景
this.layers.layer.setOptions ({
strokeColor: '#0084FF',
fillColor: '#40AFFF',
fillOpacity: 0.8,
editable:false,
visible:true,
})
// 修改一级网格字体颜色
let text = this.layers.text.getOverlays();
for (let i = 0; i < text.length; i++) {
text[i].setStyle({
'font-size': '16px',
'font-weight': 'bold',
'text-align': 'center',
'color': '#DFFAFF',
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
'white-space': 'nowrap',
})
}
// // 修改二级网格背景
// this.layers.layer2.setOptions ({
// strokeColor: '#FF8400',
// fillColor: '#FF911A',
// strokeOpacity: 1,
// fillOpacity: 0.4,
// })
// 修改围栏区域文本样式
var overlays = this.layers.layer3.getOverlays();
for (var i = 0; i < overlays.length; i++) {
let id = overlays[i].getExtData().id;
// console.log(id,'id');
if(id == "围栏text" || id == "区域text") {
overlays[i].setStyle({
'font-size': '14px',
'text-align': 'center',
'color': '#E4ECFF',
'line-height': '24px',
'letter-spacing': '2px',
'white-space': 'nowrap',
})
} else if(id == "区域polygon") {
overlays[i].setOptions({
strokeOpacity: 0,
strokeColor: '#FF0000',
fillColor: '#FF0000',
fillOpacity:0.6,
})
} else if(id == "围栏polygon") {
overlays[i].setOptions({
strokeOpacity: 1,
strokeColor: "#00B7FF",
fillColor: "#001AFF",
fillOpacity: 0.5,
})
}
}
// this.layers.text.setOptions ({
// setStyle:{
// 'font-size': '16px',
// 'font-weight': 'bold',
// 'text-align': 'center',
// 'color': '#DFFAFF',
// 'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
// 'white-space': 'nowrap',
// }
// })
this.map.setMapStyle("amap://styles/whitesmoke")
}
},
// 搜索数据
querySearch(queryString, cb){
this.input = queryString;
// 执法人员搜索
if(this.actionMap == 1) {
dwgjList({nickName:queryString}).then(res=>{
var restaurants = res.data;
let a = [];
restaurants.forEach((per=>{
let item = { value: per.nickName, imei: per.imei };
a.push(item);
}))
cb(a);
})
} else if (this.actionMap == 2) {
// 事件的搜索
let data = {'queryValue' : [{colCode:"name",queryValue:queryString}], "myInstanceClassify" : "all", "parameterValue":[], fks: []}
ViewListPage({viewCode:'event-all-list', pageNo: 1, pageSize:10}, data).then(res=>{
// console.log(res,"事件信息");
var restaurants = res.result.records;
let a = [];
restaurants.forEach((per=>{
let item = { value: per.name, location: per.location ? per.location : "" ,info: per };
a.push(item);
}))
cb(a);
})
} else if (this.actionMap == 3) {
// 车辆的搜索
} else if(this.actionMap == 4) {
// 监控视频搜索
} else if(this.actionMap == 5) {
// 店铺的搜索
getStreetShopList({shopName:queryString,pageSize:20,pageNum:1}).then(res=>{
// console.log(res,"店铺信息")
var restaurants = res.rows;
let a = [];
restaurants.forEach((per=>{
let item = { value: per.shopName, info: per, longitude:per.longitude, latitude:per.latitude };
a.push(item);
}))
cb(a);
})
}
},
// 点击事件
handleSelect(item){
// console.log(item,"item");
// console.log(this.actionMap,"this.actionMap");
this.getMarkers(this.actionMap);
if(this.actionMap == 1) {
if(item.imei) {
// 根据imei查询设备
getDeviceList({imei:item.imei}).then(res=>{
if(res.code == 200 && res.data.msg == "操作成功") {
// if(this.cluster) {
// this.cluster.setMap(null)
// }
// this.map.setZoomAndCenter(16,[res.data.obj[0].longitude,res.data.obj[0].latitude]);
getUserByImei({imei:item.imei}).then(resTwo=>{
if(resTwo.code == 200) {
this.map.setZoomAndCenter(18,[res.data.obj[0].longitude,res.data.obj[0].latitude]);
setTimeout(()=>{
this.personInfo.position = [res.data.obj[0].longitude,res.data.obj[0].latitude];
this.personInfo.info = res.data.obj[0];
this.personInfo.personinfo = resTwo.data[0];
this.personInfo.visible = true;
},2500)
}
})
return getUserByImei({imei:item.imei})
}
})
}
} else if (this.actionMap == 2) {
if(item.location) {
let location = item.location?.split(',');
this.map.setZoomAndCenter(18,[location[0],location[1]]);
setTimeout(()=>{
this.eventInfo.position = [location[0],location[1]];
this.eventInfo.info = item.info;
this.eventInfo.visible = true;
},1500)
}
} else if (this.actionMap == 3) {
// 车辆的搜索
} else if(this.actionMap == 4) {
// 监控视频搜索
} else if(this.actionMap == 5) {
// 店铺的搜索
if(item.longitude && item.latitude) {
let longitude = item.longitude
let latitude = item.latitude
this.map.setZoomAndCenter(18,[longitude,latitude]);
setTimeout(()=>{
this.shopInfo.position = [longitude,latitude];
this.shopInfo.info = item.info;
this.shopInfo.visible = true;
},1500)
}
}
},
// 新增事件的点击事件
createdTask() {
this.$refs.newEvent.open();
},
// 地图扎点的点击事件
positioning() {
this.isPositioning = true;
// this.$refs.videoWall.open();
},
// 弹框点击取消事件
cancel(marker){
this.layers.layer4.removeOverlay(marker);
},
confirm() {
// 事件新增完毕重新请求事件列表及经纬度
this.getMarkers(2);
},
// 切换地图事件
changeMap(id) {
this.MyInput = true;
this.zadian = false;
this.actionMap = id;
this.input = "";
this.personInfo.visible = false;
this.eventInfo.visible = false;
this.carInfo.visible = false;
this.monitoringInfo.visible = false;
this.shopInfo.visible = false;
if (id == 1) {
this.markerOffset = new AMap.Pixel(-35, -123);
} else if (id == 2) {
this.zadian = true;
this.markerOffset = new AMap.Pixel(-13.5, -15);
} else if (id == 3) {
this.markerOffset = new AMap.Pixel(-30.5, -48.5);
} else if (id == 4) {
this.MyInput = false;
this.markerOffset = new AMap.Pixel(-27, -94);
} else if (id == 5) {
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);
},
// 视频切换
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() {
setTimeout(() => {
this.leftAnimationData = !this.leftAnimationData;
}, 200);
this.$emit("leftAnimationAction");
},
// 隐藏地图右侧
rightAnimation() {
setTimeout(() => {
this.rightAnimationData = !this.rightAnimationData;
}, 200);
this.$emit("rightAnimationAction");
},
// 获取车辆信息
getCarList(){
getCarManageList({pageNum: 1,pageSize: 10}).then(res=>{
// console.log('车辆',res);
this.carLine = res.rows
})
},
// 定时器
markerInterval(){
let timer
if(this.actionMap == 1) {
timer = setInterval(() => {
for(let i = 0; i < this.personMarkers.length; i++) {
for(let j = i+1; j < this.personMarkers.length; j++) {
if(this.personMarkers[i].imei == this.personMarkers[j].imei) {
this.personMarkers.splice(i,1);
}
}
}
console.log("this.personMarkers",this.personMarkers);
getDeviceList().then(res=>{
if(res.code == 200) {
res.data.obj.forEach((item,index)=>{
this.personMarkers.forEach((per)=>{
if(item.imei == per.imei) {
per.markers.setPosition(new AMap.LngLat(item.longitude,item.latitude))
}
})
})
}
})
}, 10000);
} else {
clearInterval(timer)
}
},
// 模拟登录获取token
getrobotToken(){
robotLogin({username:"superAdmin",password:"3ER4#er$@2024"}).then(res=>{
// console.log(res,"登录信息");
if(res.code == 200) {
// setRobotToken(res.result.token)
localStorage.setItem('robotToken',res.result.token)
}
})
},
// 获取在线和离线人员的图标
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/offLine1.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);
}
})
},
// 坐标转换
wgs84togcj02(lng, lat) {
// 定义一些常量
var PI = 3.1415926535897932384626;
var a = 6378245.0;
var ee = 0.00669342162296594323;
var lat = +lat;
var lng = +lng;
// 判断是否在国内，不在国内则不做偏移
if (!(lng > 73.66 && lng < 135.05 && lat > 3.86 && lat < 53.55)) {
return [lng, lat]
} else {
// 转换lat
var dlatplng = lng - 105.0, dlatplat = lat - 35.0;
var dlat = -100.0 + 2.0 * dlatplng + 3.0 * dlatplat + 0.2 * dlatplat * dlatplat + 0.1 * dlatplng * dlatplat + 0.2 * Math.sqrt(Math.abs(dlatplng));
dlat += (20.0 * Math.sin(6.0 * dlatplng * PI) + 20.0 * Math.sin(2.0 * dlatplng * PI)) * 2.0 / 3.0;
dlat += (20.0 * Math.sin(dlatplat * PI) + 40.0 * Math.sin(dlatplat / 3.0 * PI)) * 2.0 / 3.0;
dlat += (160.0 * Math.sin(dlatplat / 12.0 * PI) + 320 * Math.sin(dlatplat * PI / 30.0)) * 2.0 / 3.0;
// 转换lng
var dlngplng = lng - 105.0, dlngplat = lat - 35.0;
var dlng = 300.0 + dlngplng + 2.0 * dlngplat + 0.1 * dlngplng * dlngplng + 0.1 * dlngplng * dlngplat + 0.1 * Math.sqrt(Math.abs(dlngplng));
dlng += (20.0 * Math.sin(6.0 * dlngplng * PI) + 20.0 * Math.sin(2.0 * dlngplng * PI)) * 2.0 / 3.0;
dlng += (20.0 * Math.sin(dlngplng * PI) + 40.0 * Math.sin(dlngplng / 3.0 * PI)) * 2.0 / 3.0;
dlng += (150.0 * Math.sin(dlngplng / 12.0 * PI) + 300.0 * Math.sin(dlngplng / 30.0 * PI)) * 2.0 / 3.0;
var radlat = lat / 180.0 * PI;
var magic = Math.sin(radlat);
magic = 1 - ee * magic * magic;
var sqrtmagic = Math.sqrt(magic);
dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
var mglat = lat + dlat;
var mglng = lng + dlng;
return [mglng, mglat]
}
}
},
mounted() {
// this.getPersonIcon();
this.getCarList();
this.getrobotToken();
window.addEventListener('beforeunload', e => this.beforeunloadHandler(e));
window.addEventListener('unload', e => this.unloadHandler(e));
// this.markerInterval();
},
destroyed(){
window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
window.removeEventListener('unload', e => this.unloadHandler(e));
},
};
</script>
<style lang="scss" scoped>
.map-main {
width: 100%;
height: 100%;
position: relative;
.map-mengcheng {
position: absolute;
top: 0;
}
.left-animationMap-enter-active,
.left-animationMap-leave-active {
transition: all 1s;
}
.left-animationMap-enter,
.left-animationMap-leave-to {
/* 进入的初始状态和离开的最终状态 */
opacity: 0;
transform: translateX(-510px);
}
.right-animationMap-enter-active,
.right-animationMap-leave-active {
transition: all 1s;
}
.right-animationMap-enter,
.right-animationMap-leave-to {
/* 进入的初始状态和离开的最终状态 */
opacity: 0;
transform: translateX(510px);
}
.left-bg {
position: absolute;
left: 20px;
top: 0;
width: 11px;
height: 95%;
padding: 20px 0 0 0;
z-index: 600;
.bgt {
width: 100%;
height: 100%;
background-image: url("../../../assets/images/broadside-bg.png");
background-size: 100% 100%;
}
}
.right-bg {
position: absolute;
top: 0;
right: 20px;
width: 11px;
height: 95%;
padding: 20px 0;
z-index: 600;
.bgt {
width: 100%;
height: 100%;
background-image: url("../../../assets/images/broadside2-bg.png");
background-size: 100% 100%;
}
}
.bottom-bg {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 20px;
z-index: 600;
.bgt {
width: 100%;
height: 100%;
background-image: url("../../../assets/images/bottom-bg.png");
background-size: 100% 100%;
}
}
.map-left {
position: absolute;
left: 47px;
top: 10px;
width: 460px;
height: 95%;
z-index: 600;
box-sizing: border-box;
// background: rgba(216,216,216,0.05);
}
.left-image {
z-index: 600;
position: absolute;
left: 527px;
bottom: 50%;
width: 40px;
cursor: pointer;
}
.left-image2 {
z-index: 600;
position: absolute;
left: 67px;
bottom: 50%;
width: 40px;
cursor: pointer;
}
.right-image {
z-index: 600;
position: absolute;
right: 527px;
bottom: 50%;
width: 40px;
cursor: pointer;
}
.right-image2 {
z-index: 600;
position: absolute;
right: 67px;
bottom: 50%;
width: 40px;
cursor: pointer;
}
.map-right {
position: absolute;
right: 47px;
top: 10px;
width: 460px;
height: 95%;
z-index: 600;
// margin: 10px 17px 0 10px;
// padding: 20px 0;
box-sizing: border-box;
}
.middle-top-left {
z-index: 600;
position: absolute;
left: 537px;
top: 10px;
display: flex;
.input-keyword {
::v-deep .el-input {
background-image: url("../../../assets/images/bgtongyong.png");
background-size: 100% 100%;
.el-input__inner {
background-color: transparent;
width: 222px;
height: 38px;
color: #fff;
border: none;
}
.el-input__inner::placeholder {
/* 在这里添加你想要修改的 placeholder 样式 */
font-size: 14px;
font-family: "Source Han Sans CN-Regular";
font-weight: 400;
color: #d3eef2;
line-height: 20px;
}
}
::v-deep .el-input__suffix {
line-height: 44px;
color: #d3eef2;
right: 10px;
cursor: pointer;
.el-icon-search:before {
font-size: 24px;
color: #d3eef2;
}
}
}
.laser-positioning,
.creation-task {
// height: 38px;
width: 130px;
margin-left: 8px;
background-image: url("../../../assets/images/bgtongyong.png");
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 9px 13px;
cursor: pointer;
span {
font-size: 14px;
font-family: "Source Han Sans CN-Regular";
font-weight: 400;
color: #d3eef2;
line-height: 20px;
margin-right: 12px;
}
img {
width: 20px;
}
}
}
.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 {
left: 67px;
}
.middle-bottom-left {
// 490
position: absolute;
left: 537px;
bottom: 40px;
// width: 200px;
z-index: 600;
padding: 5px 10px;
display: flex;
flex-direction: column;
.list {
margin-top: 10px;
display: flex;
align-items: center;
.leftbg {
display: flex;
align-items: center;
justify-content: center;
background-image: url("../../../assets/images/iconbg2.png");
background-size: 100% 100%;
width: 36px;
height: 36px;
cursor: pointer;
img {
width: 20px;
}
.images {
width: 30px;
}
}
.action-map {
background-image: url("../../../assets/images/iconbg1.png");
}
.rightbg {
padding-left: 6px;
margin-left: 2px;
background-image: url("../../../assets/images/right-icon.png");
background-repeat: no-repeat; /* 不平铺 */
width: 115px;
height: 36px;
display: flex;
align-items: center;
span {
font-size: 16px;
font-family: "Source Han Sans CN-Bold";
font-weight: 700;
color: #ffffff;
line-height: 26px;
text-shadow: 0px 0px 5px #0077ff;
}
}
.rightbgTwo {
width: 145px;
}
}
}
.middle-bottom-left2 {
left: 67px;
}
.middle-bottom-right {
position: absolute;
bottom: 40px;
right: 537px;
z-index: 600;
.btn-action {
display: flex;
span {
width: 142px;
height: 40px;
flex: 1;
display: inline-block;
text-align: center;
background-image: url("../../../assets/images/changeBtn2.png");
background-size: 100% 100%;
padding: 10px 33px;
font-size: 16px;
font-family: "Source Han Sans CN-Regular";
font-weight: 400;
line-height: 20px;
color: #d3eef2;
cursor: pointer;
// background: transparent;
// 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);
&:nth-child(1) {
margin-right: 10px;
}
}
.action {
color: #fff;
background-image: url("../../../assets/images/changeBtn1.png.png");
background-size: 100% 100%;
}
}
}
.middle-bottom-right2 {
right: 67px;
}
.showMap {
width: 100%;
height: 100%;
background-color: #00192e;
}
}
</style>
Reference in new issue View Git Blame Copy Permalink