经纬度拾取
This commit is contained in:
parent
c1df1fee6d
commit
b7148d9a54
|
|
@ -1,32 +1,34 @@
|
|||
<template>
|
||||
<el-dialog v-model.trim="addShow" :title="title" width="30%" draggable :close-on-click-modal="false">
|
||||
<el-form :model="form" ref="ruleFormRef" label-width="102px" :rules="formRules" style="padding: 0 80px 0px 0;">
|
||||
<el-dialog v-model.trim="addShow" :title="title" width="480px" draggable :close-on-click-modal="false">
|
||||
<el-form :model="form" ref="ruleFormRef" label-width="102px" :rules="formRules" style="padding: 0 0px 0px 0;">
|
||||
<el-form-item label="地址名称：" prop="v_addressName">
|
||||
<el-input v-model.trim="form.v_addressName" placeholder="请输入企业类型" clearable maxlength="30" />
|
||||
<el-input v-model.trim="form.v_addressName" placeholder="请输入地址名称" clearable maxlength="30" />
|
||||
</el-form-item>
|
||||
<el-form-item label="经度：" prop="v_lon">
|
||||
<el-input v-model.trim="form.v_lon" placeholder="请输入企业类型" clearable maxlength="30" />
|
||||
<el-input v-model.trim="form.v_lon" placeholder="请输入经度" clearable maxlength="30" />
|
||||
</el-form-item>
|
||||
<el-form-item label="维度：" prop="v_lat">
|
||||
<el-input v-model.trim="form.v_lat" placeholder="请输入企业类型" clearable maxlength="30" />
|
||||
<el-form-item label="纬度：" prop="v_lat">
|
||||
<el-input v-model.trim="form.v_lat" placeholder="请输入纬度" clearable maxlength="30" />
|
||||
</el-form-item>
|
||||
<el-form-item label="装备类型：" prop="deviceType">
|
||||
<el-select placeholder="请选择装备类型" clearable v-model.trim="form.deviceType" @change="changeType">
|
||||
<el-option v-for="item in deviceTypeInfo.list" :key="item.id" :label="item.name" :value="item.name"></el-option>
|
||||
<el-option v-for="item in deviceTypeInfo.list" :key="item.value" :label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="装备型号：" prop="equipType">
|
||||
<el-input v-model.trim="form.equipType" placeholder="请输入企业类型" clearable maxlength="30" />
|
||||
<el-form-item label="装备型号：" prop="deviceCode">
|
||||
<el-input v-model.trim="form.deviceCode" placeholder="请输入装备型号" clearable maxlength="30" />
|
||||
</el-form-item>
|
||||
<el-form-item label="设备状态：" prop="deviceStatus">
|
||||
<el-input v-model.trim="form.deviceStatus" placeholder="请输入企业类型" clearable maxlength="30" />
|
||||
<el-form-item label="装备规格：" prop="deviceSize">
|
||||
<el-input v-model.trim="form.deviceSize" placeholder="请输入装备规格" clearable maxlength="30" />
|
||||
</el-form-item>
|
||||
<el-form-item label="装备状态：" prop="deviceStatus">
|
||||
<el-radio-group v-model="form.deviceStatus">
|
||||
<el-radio :label="item.value" v-for="(item,index) in deviceStatusInfo.list">{{ item.label }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="GPS编号：" prop="GPScode">
|
||||
<el-radio-group v-model.trim="GPScode">
|
||||
<el-radio :label="3">Option A</el-radio>
|
||||
<el-radio :label="6">Option B</el-radio>
|
||||
<el-radio :label="9">Option C</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-model.trim="form.gpsCode" placeholder="请输入GPS编号" clearable maxlength="30" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
|
|
@ -54,24 +56,37 @@ const form = reactive({
|
|||
v_lon: '',
|
||||
v_lat: '',
|
||||
deviceType: '',
|
||||
enterprise: '',
|
||||
isEnable: '',
|
||||
enterprise: '',
|
||||
isEnable: '',
|
||||
deviceCode: '',
|
||||
deviceSize: '',
|
||||
deviceStatus: '',
|
||||
gpsCode: '',
|
||||
|
||||
})
|
||||
|
||||
const deviceTypeInfo = reactive({
|
||||
list: [{
|
||||
|
||||
value: 'Option1',
|
||||
label: 'Option1',
|
||||
},
|
||||
{
|
||||
value: 'Option2',
|
||||
label: 'Option2',
|
||||
value: 'Option1',
|
||||
label: 'Option1',
|
||||
},
|
||||
{
|
||||
value: 'Option2',
|
||||
label: 'Option2',
|
||||
|
||||
}]
|
||||
}]
|
||||
})
|
||||
|
||||
const deviceStatusInfo = reactive({
|
||||
list: [{
|
||||
|
||||
value: 'Option1',
|
||||
label: 'Option1',
|
||||
},
|
||||
{
|
||||
value: 'Option2',
|
||||
label: 'Option2',
|
||||
|
||||
}]
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -87,12 +102,7 @@ const publishFn = () => {
|
|||
if (!ruleFormRef) return
|
||||
ruleFormRef.value.validate((valid: any) => {
|
||||
if (valid) {
|
||||
if (form.linkUrl && linkReg.test(form.linkUrl)) {
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: "请输入正确格式的跳转链接"
|
||||
})
|
||||
}
|
||||
|
||||
console.log('submit!')
|
||||
} else {
|
||||
console.log('error submit!')
|
||||
|
|
@ -106,15 +116,9 @@ const cancelFn = (formEl: FormInstance | undefined) => {
|
|||
ruleFormRef.value.resetFields()
|
||||
addShow.value = false
|
||||
}
|
||||
|
||||
|
||||
const beforeChange = (ev: any) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
resolve(true)
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
const changeType =()=>{
|
||||
const changeType = () => {
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div :id="'equipmentIdMap' + domId" class="map">
|
||||
<div :id="'equipmentIdMap' + domId" class="map">
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -8,9 +8,9 @@
|
|||
|
||||
|
||||
let map: any = null
|
||||
|
||||
|
||||
let domId = ref("0")
|
||||
let viewPortList:any = []
|
||||
let viewPortList: any = []
|
||||
let props = defineProps({
|
||||
lineStyle: {
|
||||
type: Object,
|
||||
|
|
@ -19,17 +19,17 @@ let props = defineProps({
|
|||
strokeWeight: 4
|
||||
}
|
||||
},
|
||||
scaleControlProps:{
|
||||
scaleControlProps: {
|
||||
type: Object,
|
||||
default: {
|
||||
anchor:"BMAP_ANCHOR_TOP_LEFT"
|
||||
anchor: "BMAP_ANCHOR_TOP_LEFT"
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
zoomControlProps:{
|
||||
zoomControlProps: {
|
||||
type: Object,
|
||||
default: {
|
||||
anchor:"BMAP_ANCHOR_TOP_LEFT"
|
||||
anchor: "BMAP_ANCHOR_TOP_LEFT"
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -44,10 +44,10 @@ const initMap = () => {
|
|||
map = new BMapGL.Map("equipmentIdMap" + domId.value);
|
||||
map.centerAndZoom(new BMapGL.Point(116.3944, 39.9063), 18);
|
||||
map.enableScrollWheelZoom(true);
|
||||
const scaleCtrl = new BMapGL.ScaleControl(props.scaleControlProps);
|
||||
const scaleCtrl = new BMapGL.ScaleControl(props.scaleControlProps);
|
||||
scaleCtrl.setAnchor(BMAP_ANCHOR_BOTTOM_LEFT)
|
||||
map.addControl(scaleCtrl);
|
||||
|
||||
|
||||
const zoomCtrl = new BMapGL.ZoomControl(props.zoomControlProps); // 添加缩放控件
|
||||
zoomCtrl.setAnchor(BMAP_ANCHOR_TOP_LEFT)
|
||||
map.addControl(zoomCtrl);
|
||||
|
|
@ -55,48 +55,54 @@ const initMap = () => {
|
|||
createMarkerInfo()
|
||||
}
|
||||
|
||||
const createMarkerInfo =()=>{
|
||||
const createMarkerInfo = () => {
|
||||
createDot(116.3944, 39.9063)
|
||||
}
|
||||
|
||||
|
||||
const createDot=(lon,lat)=>{
|
||||
const point =new BMapGL.Point(lon,lat)
|
||||
const marker = new BMapGL.Marker(point);
|
||||
map.addOverlay(marker);
|
||||
const createDot = (lon: any, lat: any) => {
|
||||
const point = new BMapGL.Point(lon, lat)
|
||||
const marker = new BMapGL.Marker(point);
|
||||
map.addOverlay(marker);
|
||||
viewPortList.push(marker)
|
||||
createInfoWindow("标题" ,"合肥市-太湖县=大家好",marker,point)
|
||||
createInfoWindow("标题", "合肥市-太湖县=大家好", marker, point)
|
||||
}
|
||||
|
||||
const createInfoWindow=(title:any ,addressText:any,marker:any,point:any)=>{
|
||||
const opts = {
|
||||
width : 200, // 信息窗口宽度
|
||||
height: 100, // 信息窗口高度
|
||||
title : title , // 信息窗口标题
|
||||
message:'66666666666666合肥市-太湖县=大家好'
|
||||
}
|
||||
const infoWindow = new BMapGL.InfoWindow(addressText, opts); // 创建信息窗口对象
|
||||
marker.addEventListener("click", function(){
|
||||
map.openInfoWindow(infoWindow, point); //开启信息窗口
|
||||
});
|
||||
viewPortList.push(infoWindow)
|
||||
setViewPortFn(viewPortList)
|
||||
const createInfoWindow = (title: any, addressText: any, marker: any, point: any) => {
|
||||
try {
|
||||
const opts = {
|
||||
width: 200, // 信息窗口宽度
|
||||
height: 100, // 信息窗口高度
|
||||
title: title, // 信息窗口标题
|
||||
message: '66666666666666合肥市-太湖县=大家好'
|
||||
}
|
||||
console.log("createInfoWindowcreateInfoWindow", point)
|
||||
const infoWindow = new BMapGL.InfoWindow(addressText, opts); // 创建信息窗口对象
|
||||
marker.addEventListener("click", function () {
|
||||
map.openInfoWindow(infoWindow, point); //开启信息窗口
|
||||
});
|
||||
viewPortList.push(infoWindow)
|
||||
setViewPortFn(viewPortList)
|
||||
} catch (error) {
|
||||
console.log("error", error)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const setViewPortFn = (boundList:any) => {
|
||||
|
||||
|
||||
const setViewPortFn = (boundList: any) => {
|
||||
map.setViewport(boundList)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
defineExpose({
|
||||
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
@sort="sortFn"
|
||||
@add="addFn"
|
||||
></headerTop>
|
||||
<addCom ref="addComRef"></addCom>
|
||||
<addCom ref="addComRRef"></addCom>
|
||||
<el-card shadow="always" class="content_body_row">
|
||||
<mapCom></mapCom>
|
||||
</el-card>
|
||||
|
|
@ -15,29 +15,14 @@
|
|||
import headerTop from "./com/headerTop.vue"
|
||||
import addCom from "./com/addCom.vue"
|
||||
import mapCom from "./com/mapCom.vue"
|
||||
|
||||
const addComRRef = ref()
|
||||
import {ElConfirmBeforeOpert} from "utils/elementCom"
|
||||
const addComRef = ref()
|
||||
const paginationInfo = reactive({
|
||||
currentPage: 1,
|
||||
pageSize: 15
|
||||
})
|
||||
const tableData = [
|
||||
|
||||
|
||||
]
|
||||
|
||||
let tableListInfo = reactive({
|
||||
list: tableData
|
||||
})
|
||||
|
||||
|
||||
const editRowFn =(row:any)=>{
|
||||
addComRef.value.edit({
|
||||
a:"111"
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
const deleteItem = (row:any)=>{
|
||||
const itemID =row.v_id
|
||||
|
|
@ -57,7 +42,7 @@ const deleteRowFn =(row:any)=>{
|
|||
}
|
||||
|
||||
const searchFn =()=>{
|
||||
|
||||
addComRRef.value.open()
|
||||
}
|
||||
|
||||
const resetFn =()=>{
|
||||
|
|
@ -89,6 +74,9 @@ const initTableList =()=>{
|
|||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue