357 lines
9.2 KiB
Vue
357 lines
9.2 KiB
Vue
<template>
|
||
<div class="map-content">
|
||
<div class="map-box" id="mapContainer" @drop="handleMapDrop" @dragover.prevent></div>
|
||
<div class="device-box">
|
||
<div class="box-content">
|
||
<div class="box-title">
|
||
<span>场内布点</span>
|
||
<el-button type="primary" @click="addPoint" size="medium">添加点位</el-button>
|
||
</div>
|
||
<!-- <vue-scroll :ops="{ scrollPanel: { overflowX: false } }">
|
||
<div style="margin: 5px 0"></div>
|
||
<div
|
||
v-for="item in pointList"
|
||
:key="item.devSn"
|
||
class="point-item"
|
||
draggable="true"
|
||
@dragstart="handleDragStart(item)"
|
||
@click="handleClick(item)"
|
||
>
|
||
<div class="point-name">{{ item.name }}</div>
|
||
<div @click="deletePoint(item)" class="delete-point" v-if="item.lng && item.lat">
|
||
<i class="el-icon-delete"></i>
|
||
清除位置
|
||
</div>
|
||
</div>
|
||
</vue-scroll> -->
|
||
<el-table :data="pointList">
|
||
<el-table-column label="点位名称" prop="name"></el-table-column>
|
||
<el-table-column label="图标" prop="coverImage" width="50px">
|
||
<template #default="scope">
|
||
<img
|
||
v-if="scope.row.coverImage"
|
||
:src="$store.state.FILEURL + scope.row.coverImage"
|
||
alt=""
|
||
style="width: 20px; height: 20px"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="备注" prop="remark"></el-table-column>
|
||
<el-table-column label="操作" prop="operation">
|
||
<template #default="scope">
|
||
<div class="operation-box">
|
||
<i class="el-icon-edit" @click="editPoint(scope.row)"></i>
|
||
<i class="el-icon-delete" @click="deletePoint(scope.row)"></i>
|
||
<el-link v-if="scope.row.lat && scope.row.lng" type="danger" :underline="false" @click="clearPoint(scope.row)"
|
||
>清除位置</el-link
|
||
>
|
||
<el-link v-else type="primary" :underline="false" @click="goPoint(scope.row)">去标点</el-link>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
|
||
<add-point-dialog :visible.sync="dialogVisible" :data-info="dialogDataInfo" @refresh="getPointList()"></add-point-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import addPointDialog from './components/addPointDialog.vue'
|
||
import {
|
||
getDevListApi,
|
||
editDevicePositionApi,
|
||
clearLocateApi,
|
||
addDevicePositionApi,
|
||
deleteDevicePositionApi
|
||
} from '@/assets/js/api/smartSafeHat/smartSafeHat'
|
||
|
||
var mouseTool
|
||
var map
|
||
export default {
|
||
components: {
|
||
addPointDialog
|
||
},
|
||
data() {
|
||
return {
|
||
dialogVisible: false,
|
||
dialogDataInfo: null,
|
||
deviceType: 3, // 类别(1、视频监控；2、扬尘设备；3、场站；11、塔吊；12、架桥机；13、龙门吊；14、升降机；)
|
||
addForm: {
|
||
locationList: [
|
||
{
|
||
fenceId: 0,
|
||
id: 0,
|
||
latitude: '',
|
||
longitude: '',
|
||
sortNum: 0
|
||
}
|
||
],
|
||
projectSn: '',
|
||
enterpriseId: ''
|
||
},
|
||
pointList: [],
|
||
markers: {},
|
||
curItem: {},
|
||
selectPointStatus: false
|
||
}
|
||
},
|
||
mounted() {
|
||
this.initMap()
|
||
this.getPointList(true)
|
||
},
|
||
methods: {
|
||
// 围栏定位地图
|
||
initMap() {
|
||
var that = this
|
||
//地图加载
|
||
map = new AMap.Map('mapContainer', {
|
||
resizeEnable: true
|
||
})
|
||
map.on('click', e => {
|
||
if (!this.selectPointStatus) {
|
||
return
|
||
}
|
||
console.log('您在 [ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ] 的位置单击了地图！')
|
||
this.curItem.lng = e.lnglat.getLng()
|
||
this.curItem.lat = e.lnglat.getLat()
|
||
this.addMarker(this.curItem)
|
||
this.savePointPosition(this.curItem)
|
||
console.log('当前位置列表', this.locationList)
|
||
})
|
||
},
|
||
addPoint() {
|
||
this.dialogVisible = true
|
||
this.dialogDataInfo = null
|
||
},
|
||
editPoint(data) {
|
||
this.dialogDataInfo = data
|
||
this.dialogVisible = true
|
||
},
|
||
handleClick(item) {
|
||
if (item.lng && item.lat) {
|
||
map.setCenter([item.lng, item.lat])
|
||
}
|
||
},
|
||
handleDragStart(item) {
|
||
// 将拖拽数据存储在事件中
|
||
event.dataTransfer.setData('text/plain', JSON.stringify(item))
|
||
},
|
||
|
||
handleMapDrop(event) {
|
||
// 获取拖拽数据
|
||
const item = JSON.parse(event.dataTransfer.getData('text/plain'))
|
||
// 获取地图坐标
|
||
const { lng, lat } = map.getCenter()
|
||
|
||
console.log('handleMapDrop', event, item)
|
||
|
||
// 检查是否已存在marker
|
||
if (this.markers[item.devSn]) {
|
||
this.$message.warning('设备已存在')
|
||
} else {
|
||
item.lng = lng
|
||
item.lat = lat
|
||
this.addMarker(item)
|
||
// 保存位置信息
|
||
this.savePointPosition(item)
|
||
}
|
||
},
|
||
async savePointPosition(item) {
|
||
const api = item.monitorId ? editDevicePositionApi : addDevicePositionApi
|
||
api({ ...item, projectSn: this.$store.state.projectSn }).then(res => {
|
||
if (res.success) {
|
||
this.$message.success(res.message)
|
||
this.getPointList()
|
||
}
|
||
})
|
||
},
|
||
deletePoint(item) {
|
||
deleteDevicePositionApi({ monitorId: item.monitorId }).then(res => {
|
||
if (res.success) {
|
||
this.$message.success(res.message)
|
||
if (this.markers[item.devSn]) {
|
||
map.remove(this.markers[item.devSn])
|
||
delete this.markers[item.devSn]
|
||
}
|
||
this.getPointList()
|
||
}
|
||
})
|
||
},
|
||
clearPoint(item) {
|
||
clearLocateApi({ monitorId: item.monitorId }).then(res => {
|
||
if (res.success) {
|
||
this.$message.success(res.message)
|
||
map.remove(this.markers[item.devSn])
|
||
delete this.markers[item.devSn]
|
||
this.getPointList()
|
||
}
|
||
})
|
||
},
|
||
goPoint(data) {
|
||
this.curItem = data
|
||
this.selectPointStatus = true
|
||
},
|
||
getPointList(loadMap = false) {
|
||
let data = {
|
||
category: this.deviceType,
|
||
projectSn: this.$store.state.projectSn
|
||
}
|
||
getDevListApi(data).then(res => {
|
||
if (res.success) {
|
||
this.pointList = res.result
|
||
console.log('围栏', this.pointList)
|
||
if (loadMap) {
|
||
this.markers = {}
|
||
this.clearFn()
|
||
this.initAllMarker()
|
||
}
|
||
}
|
||
})
|
||
},
|
||
//清空地图
|
||
clearFn() {
|
||
map.clearMap()
|
||
},
|
||
//添加点标记
|
||
addMarker(item) {
|
||
// 创建新marker
|
||
const marker = new AMap.Marker({
|
||
position: [item.lng, item.lat],
|
||
draggable: true
|
||
})
|
||
this.markers[item.devSn] = marker
|
||
marker.setMap(map)
|
||
marker.on('dragend', e => {
|
||
console.log('拖拽结束', e)
|
||
item.lng = e.lnglat.lng
|
||
item.lat = e.lnglat.lat
|
||
// 保存位置信息
|
||
this.savePointPosition(item)
|
||
})
|
||
marker.setLabel({
|
||
offset: new AMap.Pixel(0, -8), //设置文本标注偏移量
|
||
content: item.name, //设置文本标注内容
|
||
direction: 'top' //设置文本标注方位
|
||
})
|
||
this.selectPointStatus = false;
|
||
},
|
||
initAllMarker() {
|
||
this.pointList.forEach(item => {
|
||
if (item.lng && item.lat) {
|
||
this.addMarker(item)
|
||
}
|
||
})
|
||
map.setFitView()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.map-content {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
}
|
||
#mapContainer {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
// 围栏弹窗
|
||
.device-box {
|
||
position: absolute;
|
||
background: #fff;
|
||
box-sizing: border-box;
|
||
padding: 25px;
|
||
left: 2%;
|
||
top: 20px;
|
||
width: 550px;
|
||
height: 500px;
|
||
z-index: 1;
|
||
.fence-dialog-modal {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0%;
|
||
left: 0%;
|
||
z-index: 3;
|
||
background: rgba(39, 45, 69, 0.5);
|
||
}
|
||
.close-icon {
|
||
position: absolute;
|
||
top: 0px;
|
||
right: 0px;
|
||
cursor: pointer;
|
||
}
|
||
.box-title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
span {
|
||
border-left: 4px solid #5c81ee;
|
||
font-size: 15px;
|
||
color: #272d45;
|
||
padding-left: 10px;
|
||
font-weight: 600;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
}
|
||
}
|
||
}
|
||
.box-content {
|
||
position: relative;
|
||
.fence-tool {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding: 0 25px;
|
||
.tool {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 80px;
|
||
height: 33px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
background: #ffffff;
|
||
color: #5181f6;
|
||
border-radius: 2px 2px 2px 2px;
|
||
border: 1px solid #5181f6;
|
||
}
|
||
}
|
||
.box-select {
|
||
margin: 15px 0;
|
||
}
|
||
.box-list {
|
||
height: 160px;
|
||
}
|
||
}
|
||
.point-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 10px;
|
||
cursor: move;
|
||
.point-name {
|
||
font-size: 14px;
|
||
color: #272d45;
|
||
flex: 1;
|
||
}
|
||
.delete-point {
|
||
font-size: 14px;
|
||
color: #ea3941;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.operation-box {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
i {
|
||
cursor: pointer;
|
||
color: #5181f6;
|
||
}
|
||
}
|
||
</style>
|