<template>
<div>
<div id="map" class="leaflet_container">
<div style="padding-left: 20px;padding-top: 20px">
<el-row class="title">
<el-col :span="6">
<div class="titlenumtext" @click="getlamp('1','','')">{{ status.openCount }}</div>
</el-col>
<el-col :span="6">
<div class="titlenumtext" @click="getlamp('2','','')">{{ status.closeCount }}</div>
</el-col>
<el-col :span="6">
<div class="titlenumtext" @click="getlamp('4','','')">{{ status.offlineCount }}</div>
</el-col>
<el-col :span="6">
<div class="titlenumtext" @click="getlamp('3','','')">{{ status.alarmCount }}</div>
</el-col>
</el-row>
<el-row class="title" style="padding-top: 5px">
<el-col :span="1">
<div class="icon-green"/>
</el-col>
<el-col :span="5">
<div class="titletext">开灯</div>
</el-col>
<el-col :span="1">
<div class="icon-gray"/>
</el-col>
<el-col :span="5">
<div class="titletext">灭灯</div>
</el-col>
<el-col :span="1">
<div class="icon-blue"/>
</el-col>
<el-col :span="5">
<div class="titletext">离线</div>
</el-col>
<el-col :span="1">
<div class="icon-red"/>
</el-col>
<el-col :span="5">
<div class="titletext">报警</div>
</el-col>
</el-row>
</div>
<div class="btn_bottom" style="margin-bottom: 10px">
<div style="width: 300px;position: relative;margin: 0px auto;text-align: center">
<el-radio-group v-model="bottombtn">
<el-radio-button label="lamp">
<el-image :src="require('../../assets/global_images/lamp-black.png')" fit="contain" class="image" style="width: 35px;height: 35px" @click="getlamp('','','')"/>
<div>路灯</div>
</el-radio-button>
<el-radio-button label="lampbox">
<el-image :src="require('../../assets/global_images/lampbox-black.png')" fit="contain" class="image" style="width: 35px;height: 35px;" @click="getlampbox"/>
<div>灯箱</div>
</el-radio-button>
<el-radio-button label="alarm">
<el-image :src="require('../../assets/global_images/alarm-black.png')" fit="contain" class="image" style="width: 35px;height: 35px;" @click="getalarm"/>
<div>报警</div>
</el-radio-button>
</el-radio-group>
</div>
</div>
</div>
<div class="list">
<div style="text-align: right;margin-right: 10px">
<el-button v-show="showtable" type="primary" size="mini" icon="el-icon-minus" circle @click="tableclick"/>
<el-button v-show="!showtable" type="primary" size="mini" icon="el-icon-plus" circle @click="tableclick"/>
</div>
<div v-show="showtable">
<el-tabs v-model="tab" type="border-card" @tab-click="tabClick">
<el-tab-pane label="路灯列表" name="lamp">
<div class="tab-block">
<el-row v-if="tab === 'lamp'" class="table-title" style="margin-top: -10px">
<el-col :span="7" style="margin-top:3px;margin-left: 5px">
<el-input v-model.trim="lampQuery.lampCode" size="small" placeholder="路灯编号" clearable />
</el-col>
<el-col :span="7" style="margin-top:3px;">
<el-select v-model="lampQuery.status" size="small" placeholder="路灯状态" clearable>
<el-option v-for="item in statusList" :key="item.value" :label="item.name" :value="item.value"/>
</el-select>
</el-col>
<el-col :span="3" style="margin-top:6px;">
<el-button class="edit_btn" size="mini" type="primary" @click="search">搜索</el-button>
</el-col>
<el-col :span="6" class="edit_btns" style="margin-top:6px;text-align: right;margin-left: 8px">
<el-button class="edit_btn" size="mini" type="primary" @click="controlLamp('','1')">开灯</el-button>
<el-button class="edit_btn" size="mini" type="primary" @click="controlLamp('','0')">关灯</el-button>
</el-col>
</el-row>
<el-table
v-loading="listLoading"
:row-style="{height: '33px'}"
:cell-style="{padding: '0px'}"
:data="list"
class="infinite-list"
border
infinite-scroll-disabled="disabled"
height="300px"
style="margin-top: -10px;"
@row-click="rowClick"
@selection-change="handleSelectionChange">
<el-table-column align="center" type="selection" width="55"/>
<el-table-column align="center" type="index" label="序号" width="50"/>
<el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
<template slot-scope="scope">
<span :class="column.class">{{ scope.row[column.value] }}</span>
</template>
</el-table-column>
</el-table>
</div>
</el-tab-pane>
<el-tab-pane label="回路列表" name="circuit">
<div class="tab-block">
<el-row v-if="tab === 'circuit'" class="table-title" style="margin-top: -10px">
<el-col :span="7" style="margin-top:3px;margin-left: 5px">
<el-input v-model.trim="circuitQuery.circuitCode" size="small" placeholder="回路编号" clearable />
</el-col>
<el-col :span="3" style="margin-top:6px;">
<el-button class="edit_btn" size="mini" type="primary" @click="search">搜索</el-button>
</el-col>
</el-row>
<el-table v-loading="listLoading" :row-style="{height: '33px'}" :cell-style="{padding: '0px'}" :data="list" class="infinite-list" border infinite-scroll-disabled="disabled" height="300px" style="margin-top: -10px;" @row-click="rowClick">
<el-table-column align="center" type="index" label="序号" width="50"/>
<el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
<template slot-scope="scope">
<span :class="column.class">{{ scope.row[column.value] }}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="80" align="center">
<template slot-scope="scope">
<el-button type="text" size="mini" style="padding: 0px;margin: 0px" @click.native.stop="controlLamp(scope.row,'1')">开灯</el-button>
<el-button type="text" size="mini" style="padding: 0px;margin: 0px" @click.native.stop="controlLamp(scope.row,'0')">关灯</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-tab-pane>
<el-tab-pane label="灯箱列表" name="lampbox">
<div class="tab-block">
<el-row v-if="tab === 'lampbox'" class="table-title" style="margin-top: -10px">
<el-col :span="7" style="margin-top:3px;margin-left: 5px">
<el-input v-model.trim="lampboxQuery.lampboxCode" size="small" placeholder="灯箱编号" clearable />
</el-col>
<el-col :span="7" style="margin-top:3px;">
<el-select v-model="lampboxQuery.streetId" size="small" placeholder="道路" filterable clearable>
<el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
</el-select>
</el-col>
<el-col :span="3" style="margin-top:6px;">
<el-button class="edit_btn" size="mini" type="primary" @click="search">搜索</el-button>
</el-col>
</el-row>
<el-table v-loading="listLoading" :row-style="{height: '33px'}" :cell-style="{padding: '0px'}" :data="list" class="infinite-list" border infinite-scroll-disabled="disabled" height="300px" style="margin-top: -10px;" @row-click="rowClick">
<el-table-column align="center" type="index" label="序号" width="50"/>
<el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
<template slot-scope="scope">
<span :class="column.class">{{ scope.row[column.value] }}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="80" align="center">
<template slot-scope="scope">
<el-button type="text" size="mini" style="padding: 0px;margin: 0px" @click.native.stop="controlLamp(scope.row,'1')">开灯</el-button>
<el-button type="text" size="mini" style="padding: 0px;margin: 0px" @click.native.stop="controlLamp(scope.row,'0')">关灯</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-tab-pane>
<el-tab-pane label="报警列表" name="alarm">
<div class="tab-block">
<el-row v-if="tab === 'alarm'" class="table-title" style="margin-top: -10px">
<el-col :span="7" style="margin-top:3px;margin-left: 5px">
<el-select v-model="alarmQuery.deviceType" size="small" placeholder="设备类型" filterable clearable>
<el-option v-for="item in deviceTypeList" :key="item.value" :label="item.name" :value="item.value"/>
</el-select>
</el-col>
<el-col :span="7" style="margin-top:3px;">
<el-select v-model="alarmQuery.alarmType" size="small" placeholder="报警类型" filterable clearable>
<el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
</el-select>
</el-col>
<el-col :span="3" style="margin-top:6px;">
<el-button class="edit_btn" size="mini" type="primary" @click="search">搜索</el-button>
</el-col>
</el-row>
<el-table v-loading="listLoading" :row-style="{height: '33px'}" :cell-style="{padding: '0px'}" :data="list" class="infinite-list" border infinite-scroll-disabled="disabled" height="300px" style="margin-top: -10px;" @row-click="rowClick">
<el-table-column align="center" type="index" label="序号" width="50"/>
<el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
<template slot-scope="scope">
<span :class="column.class">{{ scope.row[column.value] }}</span>
</template>
</el-table-column>
</el-table>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</div>
</template>
<script>
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import { getAllStreet } from '@/api/street'
import { getLampStatus, getLampList, getlampDetail, getCircuitList, getLampBoxList, getLampBoxDetail, getAlarmList, getAlarmDetail, lampControl } from '@/api/overview'
export default {
name: 'Overview',
data() {
return {
bottombtn: 'lamp',
listLoading: false, // 加载动画
TianDiTu: {
Normal: {
Map: 'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
Annotion: 'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
},
Satellite: {
Map: 'https://t{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
Annotion: 'https://t{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
},
Terrain: {
Map: 'https://t{s}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
Annotion: 'https://t{s}.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
},
Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
},
map: null,
tab: 'lamp',
showtable: true,
controlQuery: {
lampIds: [],
circuitId: '',
lampBoxId: '',
controlType: ''
},
columns: [
{
text: '路灯编号',
value: 'lampCode',
align: 'center'
},
{
text: '路灯名称',
value: 'lampName',
align: 'center'
},
{
text: '路灯状态',
value: 'statusName',
align: 'center',
width: 80
}
],
list: [],
multipleSelection: [], // 多选选中项
iconlist: [],
baselayer: [],
lamplist: [], // 路灯（map）
lampboxlist: [], // 灯箱（map）
alarmlist: [], // 报警 （map）
circuitlist: [], // 回路
statusList: [
{ value: '1', name: '开灯' }, { value: '2', name: '灭灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }
],
deviceTypeList: [
{ value: '1', name: '路灯控制器' },
{ value: '2', name: '灯杆' },
{ value: '3', name: '路灯' },
{ value: '4', name: '灯箱' },
{ value: '5', name: '回路' }
],
alarmTypeList: [
{ value: '1', name: '开灯异常' },
{ value: '2', name: '关灯异常' },
{ value: '3', name: '低电流告警' },
{ value: '4', name: '高电流告警' },
{ value: '5', name: '低电压告警' },
{ value: '6', name: '高电压告警' },
{ value: '7', name: '掉电告警' },
{ value: '8', name: '漏电告警' }
],
streetList: [],
status: {
alarmCount: 0,
offlineCount: 0,
closeCount: 0,
openCount: 0
},
lampQuery: {
lampCode: '',
status: '',
circuitId: '',
lampBoxId: ''
},
circuitQuery: {
circuitCode: ''
},
lampboxQuery: {
lampboxCode: '',
streetId: ''
},
alarmQuery: {
deviceType: '',
alarmType: ''
}
}
},
mounted() {
this.init()
this.initData()
},
methods: {
tableclick() {
this.showtable = !this.showtable
},
rowClick(row) {
if (this.tab === 'lamp') {
for (var i = 0; i < this.iconlist.length; i++) {
if (this.iconlist[i].options.id === row.lampId) {
console.log(this.iconlist[i])
this.map.setView(this.iconlist[i]._latlng, 17)
// this.map.setView({ lat: cenLat, lng: cenLng }, 18)
}
}
} else if (this.tab === 'circuit') {
this.getlamp('', row.id, '')
} else if (this.tab === 'lampbox') {
this.getlamp('', '', row.id)
} else if (this.tab === 'alarm') {
for (i = 0; i < this.iconlist.length; i++) {
if (this.iconlist[i].options.id === row.id) {
console.log(this.iconlist[i])
this.map.setView(this.iconlist[i]._latlng, 17)
// this.map.setView({ lat: cenLat, lng: cenLng }, 18)
}
}
}
},
async search() {
this.listLoading = true
if (this.tab === 'lamp') {
const detail = await getLampList(this.lampQuery)
this.lamplist = detail.data
this.list = this.lamplist
} else if (this.tab === 'circuit') {
const detail = await getCircuitList(this.circuitQuery)
this.ciulistlist = detail.data
this.list = this.ciulistlist
} else if (this.tab === 'lampbox') {
const detail = await getLampBoxList(this.lampboxQuery)
this.lampboxlist = detail.data
this.list = this.lampboxlist
} else if (this.tab === 'alarm') {
const detail = await getAlarmList(this.alarmQuery)
this.alarmlist = detail.data
this.list = this.alarmlist
}
this.listLoading = false
},
async tabClick(tab, event) {
this.listLoading = true
if (tab.name === 'lamp') {
this.bottombtn = 'lamp'
this.getlamp('', '', '')
this.lampQuery.status = ''
this.lampQuery.circuitId = ''
this.lampQuery.lampBoxId = ''
const resDetail = await getLampList(this.lampQuery)
this.lamplist = resDetail.data
this.list = this.lamplist
this.columns = [
{
text: '路灯编号',
value: 'lampCode',
align: 'center'
},
{
text: '路灯名称',
value: 'lampName',
align: 'center'
},
{
text: '路灯状态',
value: 'statusName',
align: 'center',
width: 80
}
]
} else if (tab.name === 'circuit') {
const circuitDetail = await getCircuitList()
this.circuitlist = circuitDetail.data
this.list = this.circuitlist
this.columns = [
{
text: '回路编号',
value: 'circuitCode',
align: 'center'
},
{
text: '回路名称',
value: 'circuitName',
align: 'center'
},
{
text: '关联灯箱名称',
value: 'lampboxName',
align: 'center'
}
]
} else if (tab.name === 'lampbox') {
this.bottombtn = 'lampbox'
this.getlampbox()
const lampboxDetail = await getLampBoxList()
this.lampboxlist = lampboxDetail.data
this.list = this.lampboxlist
this.columns = [
{
text: '灯箱编号',
value: 'lampboxCode',
align: 'center'
},
{
text: '灯箱名称',
value: 'lampboxName',
align: 'center'
},
{
text: '道路',
value: 'streetName',
align: 'center'
}, {
text: '地址',
value: 'address',
align: 'center'
}
]
} else if (tab.name === 'alarm') {
this.bottombtn = 'alarm'
this.getalarm()
const alarmDetail = await getAlarmList()
this.alarmlist = alarmDetail.data
this.list = this.alarmlist
this.columns = [
{
text: '报警设备',
value: 'deviceCode',
align: 'center',
width: 130
},
{
text: '设备类型',
value: 'deviceTypeName',
align: 'center'
},
{
text: '报警类型',
value: 'alarmTypeName',
align: 'center'
},
{
text: '报警值',
value: 'alarmValue',
align: 'center',
width: 70
}
]
}
this.listLoading = false
},
async initData() {
const resDetail = await getLampStatus()
this.status = resDetail.data
const lampDetail = await getLampList(this.lampQuery)
this.lamplist = lampDetail.data
this.list = this.lamplist
const circuitDetail = await getCircuitList()
this.circuitlist = circuitDetail.data
const lampboxDetail = await getLampBoxList()
this.lampboxlist = lampboxDetail.data
const alarmDetail = await getAlarmList()
this.alarmlist = alarmDetail.data
this.getlamp('', '', '')
// 获取道路列表
const streetList = await getAllStreet(null)
this.streetList = streetList.data
},
removemarkers() {
for (var i = 0; i < this.iconlist.length; i++) {
this.map.removeLayer(this.iconlist[i])
}
var base = this.baselayer
this.map.eachLayer(function(layer) {
if (layer !== base[0] && layer !== base[1]) {
layer.remove()
}
})
},
controlLamp(row, status) {
if (this.tab === 'circuit') {
this.control([], row.id, '', status)
} else if (this.tab === 'lampbox') {
this.control('', '', row.id, status)
} else if (this.tab === 'lamp') {
if (this.multipleSelection.length === 0) {
this.$message.warning('请选择路灯')
} else {
var selectlist = []
for (var i = 0; i < this.multipleSelection.length; i++) {
selectlist.push(this.multipleSelection[i].lampId)
}
this.control(selectlist, '', '', status)
}
// this.control(row, '', '', status)
}
},
async control(lampIds, circuitId, lampBoxId, controlType) {
this.controlQuery.lampIds = lampIds
this.controlQuery.circuitId = circuitId
this.controlQuery.lampBoxId = lampBoxId
this.controlQuery.controlType = controlType
const resDetail = await lampControl(this.controlQuery)
if (resDetail.code === 200) {
this.$message.success(resDetail.message)
} else {
this.$message.error(resDetail.message)
}
},
async getlamp(status, circuitId, lampBoxId) {
this.removemarkers()
this.lampQuery.status = status
this.lampQuery.circuitId = circuitId
this.lampQuery.lampBoxId = lampBoxId
const resDetail = await getLampList(this.lampQuery)
this.lamplist = resDetail.data
if (this.lamplist.length === 0) {
return
}
var Icon
var poslist = []
this.iconlist = []
for (var i = 0; i < this.lamplist.length; i++) {
if (this.lamplist[i].status === '1') {
Icon = L.icon({
iconUrl: require('../../assets/global_images/lamp-green.png'),
iconSize: [15, 15]
})
} else if (this.lamplist[i].status === '2') {
Icon = L.icon({
iconUrl: require('../../assets/global_images/lamp-gray.png'),
iconSize: [15, 15]
})
} else if (this.lamplist[i].status === '4') {
Icon = L.icon({
iconUrl: require('../../assets/global_images/lamp-blue.png'),
iconSize: [15, 15]
})
} else if (this.lamplist[i].status === '3') {
Icon = L.icon({
iconUrl: require('../../assets/global_images/lamp-red.png'),
iconSize: [15, 15]
})
}
var item = L.marker([this.lamplist[i].latitude, this.lamplist[i].longitude], {
icon: Icon,
id: this.lamplist[i].lampId
}).addTo(this.map)
item.on('click', function(e) {
if (e.target.dragging._marker._popup) {
e.target.dragging._marker.unbindPopup()
}
getlampDetail(e.target.options.id).then(response => {
var data = response.data
var str = '<div style="font-size: 14px;padding: 6px"> ' +
'<div style="font-size: 16px;font-weight: bold;padding-bottom: 10px">路灯详情信息</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">路灯编号：</label>' + data.lampCode + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">路灯类型：</label>' + data.lampTypeName + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">路灯状态：</label>' + data.statusName + '</div>' +
// '<div style="padding-bottom: 2px"><label style="padding-right: 5px">所属单位：</label>' + data.deptName + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">路灯分组：</label>' + data.groupName + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">路灯功率(W)：</label>' + data.power + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">控制器编号：</label>' + data.controllerCode + '</div>' +
// '<div style="padding-bottom: 2px"><label style="padding-right: 5px">控制器类型：</label>' + data.controllerTypeName + '</div>' +
// '<div style="padding-bottom: 2px"><label style="padding-right: 5px">控制器分组：</label>' + data.controllerGroupName + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">灯杆编号：</label>' + data.lamppostCode + '</div>' +
// '<div style="padding-bottom: 2px"><label style="padding-right: 5px">灯杆名称：</label>' + data.lamppostName + '</div>' +
// '<div style="padding-bottom: 2px"><label style="padding-right: 5px">灯杆类型：</label>' + data.lamppostTypeName + '</div>' +
// '<div style="padding-bottom: 2px"><label style="padding-right: 5px">灯杆分组：</label>' + data.postGroupName + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">回路编号：</label>' + data.circuitCode + '</div>' +
// '<div style="padding-bottom: 2px"><label style="padding-right: 5px">回路名称：</label>' + data.circuitName + '</div>' +
// '<div style="padding-bottom: 2px"><label style="padding-right: 5px">回路分组：</label>' + data.circuitGroupName + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">定位/高度(m)：</label>' + data.latitude + ';' + data.longitude + ' / ' + data.height + '</div>' +
// '<div style="padding-bottom: 2px"><label style="padding-right: 5px">高度：</label>' + data.height + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">最新电压(V)/电流值(A)：</label>' + data.latestVol + ' / ' + data.latestElec + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">最新功率(W)：</label>' + data.latestPower + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">上报时间：</label>' + data.latestTime + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">道路：</label>' + data.streetName + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">地址：</label>' + data.address + '</div>' +
'</div>'
var popup = L.popup().setContent(str)
e.target.dragging._marker.bindPopup(popup).openPopup()
e.target.dragging._marker.openPopup()
})
})
this.iconlist.push(item)
var pos = [Number(this.lamplist[i].latitude), Number(this.lamplist[i].longitude)]
poslist.push(pos)
}
if (this.lamplist.length !== 0) {
this.setZoom(poslist)
}
},
async getcircuit() {
const circuitDetail = await getCircuitList()
this.circuitlist = circuitDetail.data
},
async getlampbox() {
this.removemarkers()
const lampboxDetail = await getLampBoxList()
this.lampboxlist = lampboxDetail.data
var poslist = []
this.iconlist = []
for (var i = 0; i < this.lampboxlist.length; i++) {
var Icon = L.icon({
iconUrl: require('../../assets/global_images/lampbox-black.png'),
iconSize: [15, 15]
})
var item = L.marker([this.lampboxlist[i].latitude, this.lampboxlist[i].longitude], {
icon: Icon,
id: this.lampboxlist[i].id
}).addTo(this.map)
item.on('click', function(e) {
if (e.target.dragging._marker._popup) {
e.target.dragging._marker.unbindPopup()
}
getLampBoxDetail(e.target.options.id).then(response => {
var data = response.data
console.log(response.data)
var str = '<div style="font-size: 14px;padding: 6px"> ' +
'<div style="font-size: 16px;font-weight: bold;padding-bottom: 10px">灯箱详情信息</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">灯箱编号：</label>' + data.lampboxCode + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">灯箱名称：</label>' + data.lampboxName + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">所属单位：</label>' + data.deptName + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">定位：</label>' + data.latitude + ';' + data.longitude + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">A/B/C相电流(A)：</label>' + data.elecA + ' / ' + data.elecB + ' / ' + data.elecC + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">A/B/C相电压(V)：</label>' + data.volA + ' / ' + data.volB + ' / ' + data.volC + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">A/B/C相功率(W)：</label>' + data.powerA + ' / ' + data.powerB + ' / ' + data.powerC + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">上传时间：</label>' + data.upTime + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">道路：</label>' + data.streetName + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">地址：</label>' + data.address + '</div>' +
'</div>'
var popup = L.popup().setContent(str)
e.target.dragging._marker.bindPopup(popup).openPopup()
e.target.dragging._marker.openPopup()
})
})
this.iconlist.push(item)
var pos = [Number(this.lampboxlist[i].latitude), Number(this.lampboxlist[i].longitude)]
poslist.push(pos)
}
if (poslist.length !== 0) {
this.setZoom(poslist)
}
},
async getalarm() {
this.removemarkers()
const alarmDetail = await getAlarmList()
this.alarmlist = alarmDetail.data
var poslist = []
this.iconlist = []
for (var i = 0; i < this.alarmlist.length; i++) {
var Icon = L.icon({
iconUrl: require('../../assets/global_images/alarm-red.png'),
iconSize: [15, 15]
})
var item = L.marker([this.alarmlist[i].latitude, this.alarmlist[i].longitude], {
icon: Icon,
id: this.alarmlist[i].id
}).addTo(this.map)
item.on('click', function(e) {
if (e.target.dragging._marker._popup) {
e.target.dragging._marker.unbindPopup()
}
getAlarmDetail(e.target.options.id).then(response => {
var data = response.data
var str = '<div style="font-size: 14px;padding: 6px"> ' +
'<div style="font-size: 16px;font-weight: bold;padding-bottom: 10px">报警详情信息</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">设备编号：</label>' + data.deviceCode + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">设备名称：</label>' + data.deviceName + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">设备类型：</label>' + data.deviceTypeName + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">报警类型：</label>' + data.alarmTypeName + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">报警原因：</label>' + data.alarmReason + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">报警数值：</label>' + data.alarmValue + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">报警时间：</label>' + data.alarmTime + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">电流(A)：</label>' + data.electricity + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">电压(V)：</label>' + data.voltage + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">功率(W)：</label>' + data.power + '</div>' +
'<div style="padding-bottom: 2px"><label style="padding-right: 5px">定位：</label>' + data.latitude + ';' + data.longitude + '</div>' +
'</div>'
var popup = L.popup().setContent(str)
e.target.dragging._marker.bindPopup(popup).openPopup()
e.target.dragging._marker.openPopup()
})
})
this.iconlist.push(item)
var pos = [Number(this.alarmlist[i].latitude), Number(this.alarmlist[i].longitude)]
poslist.push(pos)
}
if (poslist.length !== 0) {
this.setZoom(poslist)
}
},
setZoom(points) {
if (points.length > 0) {
var maxLng = points[0][1]
var minLng = points[0][1]
var maxLat = points[0][0]
var minLat = points[0][0]
var res
for (var i = points.length - 1; i >= 0; i--) {
res = points[i]
if (res[1] > maxLng) maxLng = res[1]
if (res[1] < minLng) minLng = res[1]
if (res[0] > maxLat) maxLat = res[0]
if (res[0] < minLat) minLat = res[0]
}
var cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2
var cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2
var zoom = this.getZoom(maxLng, minLng, maxLat, minLat)
this.map.setView({ lat: cenLat, lng: cenLng }, zoom)
} else {
// 没有坐标，显示全中国
this.map.setView({ lat: 103.388611, lng: 35.563611 }, 5)
}
},
getZoom(maxLng, minLng, maxLat, minLat) {
var zoom = ['50', '100', '200', '500', '1000', '2000', '5000', '10000', '20000', '25000', '50000', '100000', '200000', '500000', '1000000', '2000000', '5000000']// 级别18到3。
var latlng = L.latLng(maxLat, maxLng)
var distance = latlng.distanceTo(L.latLng(minLat, minLng))
// var distance = pointA.distanceTo(pointB)// 获取两点距离,保留小数点后两位
for (var i = 0, zoomLen = zoom.length; i < zoomLen; i++) {
if (zoom[i] - distance > 0) {
return 18 - i + 2 // 之所以会多2，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
}
}
return 5
},
init() {
const map = L.map('map', {
minZoom: 2,
maxZoom: 18,
center: [27.75962, 116.06021],
zoom: 15,
zoomControl: false,
attributionControl: false,
crs: L.CRS.EPSG3857
})
map.doubleClickZoom.disable()
this.map = map // data上需要挂载
window.map = map
this.baselayer.push(L.tileLayer(
'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
{ subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
).addTo(map))
this.baselayer.push(L.tileLayer(
'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
{ subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
).addTo(map))
},
// 多选触发方法
handleSelectionChange(val) {
this.multipleSelection = val
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
$tableTitleHeight:48px;
.leaflet_container{
width: 100%;
height: 90vh;
}
.title{
height: 40px;
width: 280px;
padding-top: 10px;
padding-left: 5px;
z-index: 100000;
background-color: rgba(255, 255, 255, 0.91);
}
.titletext{
text-align: center;
font-size: 15px;
}
.titlenumtext{
text-align: center;
font-size: 19px;
}
.icon-red {
width: 10px;
height: 10px;
background-color: #d0021b;
margin-left: 10px;
margin-top: 5px;
border-radius: 50%;
}
.icon-green {
width: 10px;
height: 10px;
margin-top: 5px;
margin-left: 10px;
background-color: #00b238;
border-radius: 50%;
}
.icon-gray {
width: 10px;
height: 10px;
margin-left: 10px;
background-color: #8e8e93;
margin-top: 5px;
border-radius: 50%;
}
.icon-blue {
width: 10px;
height: 10px;
background-color: #8eb4f6;
margin-left: 10px;
margin-top: 5px;
border-radius: 50%;
}
.list{
text-align:center;
width: 500px;
height: 40px;
z-index: 10000;
position: absolute;
right:20px;
top:20px;
}
.btn_bottom{
text-align:center;
width: 100%;
height:70px;
z-index: 1000;
position: fixed; bottom: 0; left: 0;right:0;
}
.table-name{
position:relative;
width: 100px;
top:20px;
margin:-10px auto; //外面的div高度的一半
z-index: 100001;
}
.table-title{
background-color:rgba(243, 243, 243, 1);
height: $tableTitleHeight;
.title-header{
line-height:$tableTitleHeight;
color: #606266;
font-size: 15px;
i{
margin-left: 5px;
margin-right: 5px;
}
}
}
</style>
