<template>
|
<div class="pr" style="height:100%;width:100%;">
|
<a-map ref="aMap" newId="amap" :zoomSize="12" @toDetails="toDetails" @updatePos="updatePos"></a-map>
|
<div class="list clearfix">
|
<div class="flex-center">
|
<span style="color:#5cc9e9">未标记:{{deviceList.length}}</span>
|
</div>
|
<div>
|
<dragger-box
|
:class="['float-left',item.isZindex?'zIndex1':'zIndex0']"
|
:style="`top:${item.top}px;left:${item.left}px;position:absolute`"
|
:data="item"
|
toDOMId="amap"
|
@_getContainerRect="addMapIconIteam"
|
v-for="item in deviceList"
|
:key="item.id"
|
>
|
<div class="cursor-move" @focus="focusChange(item)" tabindex="-1">
|
<div
|
:style="`background-image: url(${item.url});`"
|
:class="item.isActive?'img-icon2':'img-icon'"
|
></div>
|
</div>
|
</dragger-box>
|
</div>
|
</div>
|
<mapDeviceModel ref="mapModelRef"></mapDeviceModel>
|
<div class="status">
|
<el-row class="pt10" :gutter="10">
|
<el-col :span="8" class="flex-center">
|
<div class="iconClass flex-center mr10">
|
<specia-button>
|
<i class="ion d-block ion-ios-videocam"></i>
|
</specia-button>
|
</div>
|
<span class="spanfontright fb">{{okDeviceNum}}</span>
|
<span style="font-size: 18px;">|</span>
|
<span class="spanfontleft fb">{{exDeviceNum}}</span>
|
</el-col>
|
<!-- <el-col :span="8" class="flex-center">
|
<div class="iconClass flex-center mr10">
|
<specia-button>
|
<i class="ion d-block ion-ios-videocam"></i>
|
</specia-button>
|
</div>
|
<span class="spanfontright fb">{{2}}</span>
|
<span style="font-size: 18px;">|</span>
|
<span class="spanfontleft fb">{{0}} </span>
|
</el-col>-->
|
<el-col :span="8" class="flex-center">
|
<div class="iconClass flex-center mr10">
|
<specia-button>
|
<i class="d-block fas fa-hdd"></i>
|
</specia-button>
|
</div>
|
<span class="spanfontright fb">{{okServerNum}}</span>
|
<span style="font-size: 18px;">|</span>
|
<span class="spanfontleft fb">{{exServerNum}}</span>
|
</el-col>
|
</el-row>
|
<!-- <div class="p10 flex-box">
|
<div class="flex-center status-ok mr10 p10">
|
<a style="color:#ffffff">正常（{{okDeviceNum}}）</a>
|
</div>
|
<div class="flex-center status-et ml10 p10">
|
<a style="color:#ffffff">异常（{{exDeviceNum}}）</a>
|
</div>
|
</div>-->
|
</div>
|
</div>
|
</template>
|
<script>
|
import { Row, Col, Dialog, Button } from 'element-ui'
|
import aMap from './AMap'
|
import draggerBox from './draggerBox'
|
import vxg from './vxg'
|
import mapDeviceModel from './mapDeviceModel'
|
import {
|
findAllDevices,
|
updatePosById,
|
getLocalDeviceList,
|
getColonyList
|
} from '@/server/home.js'
|
import speciaButton from '@/components/specialButton/speciaButton.vue'
|
// import { findInArrJson } from '@/components/common/util.js'
|
export default {
|
components: {
|
elDialog: Dialog,
|
elRow: Row,
|
elCol: Col,
|
elButton: Button,
|
mapDeviceModel,
|
vxg,
|
draggerBox,
|
aMap,
|
speciaButton
|
},
|
props: {
|
currentOrgItem: {
|
default: () => ({ id: '0', type: 'MENU', name: '平台设备' }),
|
type: Object
|
},
|
searchName: {
|
default: '',
|
type: String
|
},
|
currentColonyItem: {
|
default: () => ({ id: '0', type: '1', name: '集群设备' }),
|
type: Object
|
}
|
},
|
data() {
|
return {
|
// 查询类型
|
searchType: '',
|
result: [],
|
// 存储临时的设备信息
|
tempDevice: {},
|
// 未使用的设备列表
|
deviceList: [],
|
// 临时存储百度地图的坐标
|
bPoint: {},
|
// 用于存放临时标记点
|
markerObject: {},
|
// 接收正常摄像头设备数量
|
okDeviceNum: 0,
|
// 接收异常摄像头设备数量
|
exDeviceNum: 0,
|
// 正常服务器设备数量
|
okServerNum: 0,
|
// 异常服务器设备数量
|
exServerNum: 0
|
}
|
},
|
methods: {
|
showModel(data) {
|
this.$refs.mapModelRef.showModel(data)
|
},
|
toDetails(data) {
|
console.log(data, '接收点击详情后回调函数 toDetails')
|
if (data) {
|
this.showModel(data)
|
}
|
},
|
/** 查询所有设备 */
|
async findAllDevice() {
|
let res = await findAllDevices()
|
if (res) {
|
if (res.success) {
|
// 存储正常数量
|
let n1 = 0
|
// 存储异常数量
|
let n2 = 0
|
// 没有坐标信息的设备，存入左下角
|
let noPosList = res.data.noPosList
|
// this.deviceList = noPosList
|
if (noPosList.length !== 0) {
|
noPosList.forEach(item => {
|
if (item.status === 0) {
|
n1 += 1
|
if (item.type === '101') {
|
this.okDeviceNum += 1
|
} else if (item.type === '103') {
|
this.okServerNum += 1
|
}
|
} else {
|
n2 += 1
|
if (item.type === '101') {
|
this.exDeviceNum += 1
|
} else if (item.type === '103') {
|
this.exServerNum += 1
|
}
|
}
|
})
|
}
|
this.createPic(noPosList)
|
// 有坐标信息的设备，在地图上进行打点
|
let posList = res.data.posList
|
if (posList.length !== 0) {
|
posList.forEach(item => {
|
if (item.status === 0) {
|
n1 += 1
|
} else {
|
n2 += 1
|
}
|
})
|
}
|
this.okDeviceNum = n1
|
this.exDeviceNum = n2
|
this.$refs.aMap.amapCreateMarker(posList)
|
} else {
|
this.$toast({
|
type: 'error',
|
message: '查询设备信息失败！'
|
})
|
}
|
}
|
},
|
// 地图 添加设备
|
addMapIconIteam({ x, y, data, index, tags }) {
|
/* 默认返回的x,y为画板坐标 */
|
console.log(data, 'addMapIconIteam data', { x, y, data, index, tags })
|
if (x > 160 && 790 - y > 120) {
|
if (Object.keys(data).length !== 0) {
|
if (Object.keys(this.tempDevice).length !== 0) {
|
if (data.id === this.tempDevice.id) {
|
this.$refs.aMap.receveLnglat(data)
|
}
|
}
|
}
|
}
|
},
|
// 地图 设备移动
|
iconIteamDrag({ x, y, data }) {
|
let deviceArr = this.deviceArr.map(iteam => {
|
if (iteam.id === data.id) {
|
iteam.position = JSON.stringify({ x, y })
|
}
|
return iteam
|
})
|
this.deviceArr = deviceArr
|
},
|
// 获取拖放物的坐标
|
getPoint(data) {
|
console.log(data, '放置的百度地图坐标')
|
this.bPoint = {}
|
if (data) {
|
this.bPoint = data
|
// this.$nextTick(() => {
|
if (Object.keys(this.markerObject).length !== 0) {
|
this.markerObject.lat = data.lat
|
this.markerObject.lng = data.lng
|
console.log(this.markerObject, 'this.markerObject')
|
let arr = []
|
arr.push(this.markerObject)
|
this.setMarker(arr)
|
/** 打点成功后从未使用设备列表中去掉该设备 */
|
let newArr = this.deviceList.filter((item, index) => {
|
if (this.markerObject.id === item.id) {
|
return false
|
} else {
|
return true
|
}
|
})
|
console.log(newArr, '----------------newArr', this.deviceList)
|
this.markerObject = {}
|
}
|
// })
|
}
|
},
|
// 拖拽成功后在地图上打点
|
setMarker(arr) {
|
this.$refs.baiduMap.bmapCreateMarker(arr)
|
},
|
// 获取随机数
|
getRandomNum(limit, isTop) {
|
let num
|
while (true) {
|
num = Math.random() * 1000
|
if (isTop === 'top') {
|
if (num <= limit && num > 20) {
|
break
|
}
|
} else {
|
if (num <= limit && num > 0) {
|
break
|
}
|
}
|
}
|
return parseInt(num)
|
},
|
// 渲染图片
|
createPic(arr) {
|
if (arr.length !== 0) {
|
arr.forEach((item, index) => {
|
let y = this.getRandomNum(80, 'top')
|
let x = this.getRandomNum(130, 'left')
|
this.$set(item, 'top', y)
|
this.$set(item, 'left', x)
|
|
if (item.status === 0) {
|
if (item.type === '101') {
|
this.$set(item, 'url', '/static/img/icon/green_camer.png')
|
this.$set(item, 'isZindex', false)
|
this.$set(item, 'isActive', false)
|
} else if (item.type === '103') {
|
this.$set(item, 'url', '/static/img/icon/green_server.png')
|
this.$set(item, 'isActive', false)
|
this.$set(item, 'isZindex', false)
|
}
|
} else if (item.status === 1) {
|
if (item.type === '101') {
|
this.$set(item, 'url', '/static/img/icon/red_camer.png')
|
this.$set(item, 'isActive', false)
|
this.$set(item, 'isZindex', false)
|
} else if (item.type === '103') {
|
this.$set(item, 'url', '/static/img/icon/red_server.png')
|
this.$set(item, 'isActive', false)
|
this.$set(item, 'isZindex', false)
|
}
|
} else if (item.status === -1) {
|
if (item.type === '101') {
|
this.$set(item, 'url', '/static/img/icon/gray_camer.png')
|
this.$set(item, 'isActive', false)
|
this.$set(item, 'isZindex', false)
|
} else if (item.type === '103') {
|
this.$set(item, 'url', '/static/img/icon/gray_server.png')
|
this.$set(item, 'isActive', false)
|
this.$set(item, 'isZindex', false)
|
}
|
}
|
})
|
// console.log(arr, 'arr')
|
this.deviceList = arr
|
}
|
},
|
/** 保存设备经纬度 */
|
async updatePos(marker) {
|
console.log(marker, '===========marker')
|
let json = {
|
id: marker.data.id,
|
type: marker.data.type,
|
longitude: marker.Mg.position.lng,
|
latitude: marker.Mg.position.lat
|
}
|
let res = await updatePosById(json)
|
if (res && res.success) {
|
let noPosList = this.deviceList.filter(
|
item => item.id !== marker.data.id
|
)
|
if (this.deviceList !== noPosList.length) {
|
this.createPic(noPosList)
|
if (noPosList.length === 0) {
|
this.deviceList = noPosList
|
}
|
}
|
this.$toast({
|
type: 'success',
|
message: '更新设备坐标成功！'
|
})
|
/* 更新成功后，通知home页进行tree刷新 */
|
this.$emit('upTreeData')
|
} else {
|
this.$toast({
|
type: 'error',
|
message: '更新设备坐标失败！'
|
})
|
}
|
},
|
/** 根据选择的树和搜索条件查询地图上的设备 */
|
async findDeviceByParams() {
|
let res
|
if (this.searchType === 'currentOrgItem') {
|
res = await getLocalDeviceList({
|
orgId: this.currentOrgItem.id,
|
type: this.currentOrgItem.type,
|
length: 9999,
|
start: 0,
|
condition: this.searchName
|
})
|
} else if (this.searchType === 'currentColonyItem') {
|
const { type = '1', id = '0' } = this.currentColonyItem
|
res = await getColonyList({
|
id: id,
|
type: type,
|
condition: this.searchName
|
})
|
}
|
|
if (res && res.data) {
|
if (
|
this.currentOrgItem.id === '0' &&
|
this.currentColonyItem.id === '0'
|
) {
|
this.$refs.aMap.removeActiveDeviceMarkers()
|
} else {
|
if (res && res.data.length !== 0) {
|
this.$refs.aMap.removeActiveDeviceMarkers()
|
// 通过判断是否有child来判断是选择的平台设备还是集群设备
|
if (res.data[0].child === undefined) {
|
this.$refs.aMap.setActiveDeviceMarkers(res.data)
|
this.setActiveForNoPos(res.data)
|
} else {
|
this.Iteart(res.data)
|
this.$refs.aMap.setActiveDeviceMarkers(this.result)
|
this.setActiveForNoPos(this.result)
|
}
|
} else {
|
this.$refs.aMap.removeActiveDeviceMarkers()
|
this.setActiveForNoPos(res.data)
|
}
|
}
|
} else {
|
this.$toast({
|
type: 'error',
|
message: res && res.msg ? res.msg : '设备查询失败！'
|
})
|
}
|
},
|
/** 迭代函数 */
|
Iteart(arr) {
|
this.result = []
|
arr.forEach((item, index) => {
|
this.result.push(item)
|
if (item.child !== null && item.child.length !== 0) {
|
this.Iteart(item.child)
|
}
|
})
|
},
|
/** 未标记的点高亮设置 */
|
setActiveForNoPos(arr) {
|
let idArr = arr || []
|
let markers = this.deviceList || []
|
/** 在设置高亮之前先把之前设置的高亮去掉 */
|
if (idArr.length === 0) {
|
for (let item of markers) {
|
if (item.status === 0) {
|
if (item.type === '101') {
|
this.$set(item, 'url', '/static/img/icon/green_camer.png')
|
this.$set(item, 'isActive', false)
|
} else if (item.type === '103') {
|
this.$set(item, 'url', '/static/img/icon/green_server.png')
|
this.$set(item, 'isActive', false)
|
}
|
} else if (item.status === 1) {
|
if (item.type === '101') {
|
this.$set(item, 'url', '/static/img/icon/red_camer.png')
|
this.$set(item, 'isActive', false)
|
} else if (item.type === '103') {
|
this.$set(item, 'url', '/static/img/icon/red_server.png')
|
this.$set(item, 'isActive', false)
|
}
|
} else if (item.status === -1) {
|
if (item.type === '101') {
|
this.$set(item, 'url', '/static/img/icon/gray_camer.png')
|
this.$set(item, 'isActive', false)
|
} else if (item.type === '103') {
|
this.$set(item, 'url', '/static/img/icon/gray_server.png')
|
this.$set(item, 'isActive', false)
|
}
|
}
|
}
|
return false
|
}
|
let activeDevices = []
|
// 遍历id查找高亮
|
idArr.forEach((idItem, index) => {
|
for (let item of markers) {
|
if (item.id === idItem.id) {
|
activeDevices.push(item)
|
} else {
|
console.log('回复')
|
if (item.status === 0) {
|
if (item.type === '101') {
|
this.$set(item, 'url', '/static/img/icon/green_camer.png')
|
this.$set(item, 'isActive', false)
|
this.$set(item, 'isZindex', false)
|
} else if (item.type === '103') {
|
this.$set(item, 'url', '/static/img/icon/green_server.png')
|
this.$set(item, 'isActive', false)
|
this.$set(item, 'isZindex', false)
|
}
|
} else if (item.status === 1) {
|
if (item.type === '101') {
|
this.$set(item, 'url', '/static/img/icon/red_camer.png')
|
this.$set(item, 'isActive', false)
|
this.$set(item, 'isZindex', false)
|
} else if (item.type === '103') {
|
this.$set(item, 'url', '/static/img/icon/red_server.png')
|
this.$set(item, 'isActive', false)
|
this.$set(item, 'isZindex', false)
|
}
|
} else if (item.status === -1) {
|
if (item.type === '101') {
|
this.$set(item, 'url', '/static/img/icon/gray_camer.png')
|
this.$set(item, 'isActive', false)
|
this.$set(item, 'isZindex', false)
|
} else if (item.type === '103') {
|
this.$set(item, 'url', '/static/img/icon/gray_server.png')
|
this.$set(item, 'isActive', false)
|
this.$set(item, 'isZindex', false)
|
}
|
}
|
}
|
}
|
})
|
// 设置高亮图标
|
for (let item of activeDevices) {
|
console.log(item, '设置左下角高亮')
|
if (item.status === 0) {
|
if (item.type === '101') {
|
this.$set(item, 'url', '/static/img/icon/green_camer_active.gif')
|
this.$set(item, 'isActive', true)
|
this.$set(item, 'isZindex', true)
|
} else if (item.type === '103') {
|
this.$set(item, 'url', '/static/img/icon/green_server_active.gif')
|
this.$set(item, 'isActive', true)
|
this.$set(item, 'isZindex', true)
|
}
|
} else if (item.status === 1) {
|
if (item.type === '101') {
|
this.$set(item, 'url', '/static/img/icon/red_camer_active.gif')
|
this.$set(item, 'isActive', true)
|
this.$set(item, 'isZindex', true)
|
} else if (item.type === '103') {
|
this.$set(item, 'url', '/static/img/icon/red_server_active.gif')
|
this.$set(item, 'isActive', true)
|
this.$set(item, 'isZindex', true)
|
}
|
} else if (item.status === -1) {
|
if (item.type === '101') {
|
this.$set(item, 'url', '/static/img/icon/gray_camer_active.gif')
|
this.$set(item, 'isActive', true)
|
this.$set(item, 'isZindex', true)
|
} else if (item.type === '103') {
|
this.$set(item, 'url', '/static/img/icon/gray_server_active.gif')
|
this.$set(item, 'isActive', true)
|
this.$set(item, 'isZindex', true)
|
}
|
}
|
}
|
},
|
/** 获取焦点后修改层级关系 */
|
focusChange(data) {
|
// console.log(data, '获取焦点的元素')
|
this.tempDevice = data
|
}
|
},
|
mounted() {
|
// this.$refs.aMap.InitMap()
|
this.findAllDevice()
|
},
|
watch: {
|
currentOrgItem: {
|
handler(newVal, oldVal) {
|
if (newVal !== oldVal) {
|
// 触发 org 查询平台设备列表
|
this.searchType = 'currentOrgItem'
|
this.findDeviceByParams()
|
}
|
},
|
deep: true,
|
immediate: true
|
},
|
currentColonyItem: {
|
handler(newVal, oldVal) {
|
if (newVal !== oldVal) {
|
// 触发 org 查询平台设备列表
|
this.searchType = 'currentColonyItem'
|
this.findDeviceByParams()
|
}
|
},
|
deep: true,
|
immediate: true
|
}
|
}
|
}
|
</script>
|
<style>
|
.list {
|
width: 160px;
|
height: 140px;
|
background-color: beige;
|
position: absolute;
|
left: 0;
|
bottom: 0;
|
}
|
.dialog {
|
width: 60%;
|
height: 800px;
|
}
|
.status {
|
width: 300px;
|
height: 50px;
|
border: 1px solid rgba(130, 130, 130, 0.4);
|
background-color: #ffffff;
|
opacity: 0.8;
|
position: absolute;
|
left: 0;
|
top: 0;
|
}
|
.iconClass {
|
width: 30px;
|
height: 30px;
|
border-radius: 50%;
|
overflow: hidden;
|
}
|
.dragger-content {
|
line-height: 30px;
|
/* 抑制选中 */
|
-moz-user-select: none;
|
-webkit-user-select: none;
|
user-select: none;
|
}
|
.cursor-move {
|
cursor: move;
|
/* 抑制选中 */
|
-moz-user-select: none;
|
-webkit-user-select: none;
|
user-select: none;
|
}
|
|
.img-icon {
|
width: 30px;
|
height: 30px;
|
/* background-image: url('/static/assets/img/noneImg.png'); */
|
background-size: cover;
|
/* 抑制选中 */
|
-moz-user-select: none;
|
-webkit-user-select: none;
|
user-select: none;
|
}
|
.img-icon2 {
|
width: 48px;
|
height: 48px;
|
/* background-image: url('/static/assets/img/noneImg.png'); */
|
background-size: cover;
|
/* 抑制选中 */
|
-moz-user-select: none;
|
-webkit-user-select: none;
|
user-select: none;
|
}
|
.status-ok {
|
width: 100px;
|
height: 38;
|
background: #2d7110;
|
border-radius: 5px;
|
}
|
.status-et {
|
width: 100px;
|
height: 38;
|
background: #686868;
|
border-radius: 5px;
|
}
|
.spanfontleft {
|
font-size: 18px;
|
color: #686868;
|
padding-left: 5px;
|
}
|
.spanfontright {
|
font-size: 18px;
|
color: #2d7110;
|
padding-right: 5px;
|
}
|
.zIndex0 {
|
z-index: 0;
|
}
|
.zIndex1 {
|
z-index: 1;
|
}
|
</style>
|
