bonus
/
mallBackend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

经纬度拾取

This commit is contained in:
13218645326 2023-12-12 14:45:59 +08:00
parent c1df1fee6d
commit b7148d9a54
3 changed files with 92 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
src/views/enterpriseManagement/lonLatPick/com/addCom.vue
View File

@ -1,32 +1,34 @@
<template> <template>
<el-dialog v-model.trim="addShow" :title="title" width="30%" draggable :close-on-click-modal="false"> <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 80px 0px 0;"> <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-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>
<el-form-item label="经度：" prop="v_lon"> <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>
<el-form-item label="维度：" prop="v_lat"> <el-form-item label="纬度：" prop="v_lat">
<el-input v-model.trim="form.v_lat" placeholder="请输入企业类型" clearable maxlength="30" /> <el-input v-model.trim="form.v_lat" placeholder="请输入纬度" clearable maxlength="30" />
</el-form-item> </el-form-item>
<el-form-item label="装备类型：" prop="deviceType"> <el-form-item label="装备类型：" prop="deviceType">
<el-select placeholder="请选择装备类型" clearable v-model.trim="form.deviceType" @change="changeType"> <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-select>
</el-form-item> </el-form-item>
<el-form-item label="装备型号：" prop="equipType"> <el-form-item label="装备型号：" prop="deviceCode">
<el-input v-model.trim="form.equipType" placeholder="请输入企业类型" clearable maxlength="30" /> <el-input v-model.trim="form.deviceCode" placeholder="请输入装备型号" clearable maxlength="30" />
</el-form-item> </el-form-item>
<el-form-item label="设备状态：" prop="deviceStatus"> <el-form-item label="装备规格：" prop="deviceSize">
<el-input v-model.trim="form.deviceStatus" placeholder="请输入企业类型" clearable maxlength="30" /> <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>
<el-form-item label="GPS编号：" prop="GPScode"> <el-form-item label="GPS编号：" prop="GPScode">
<el-radio-group v-model.trim="GPScode"> <el-input v-model.trim="form.gpsCode" placeholder="请输入GPS编号" clearable maxlength="30" />
<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-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
@ -54,24 +56,37 @@ const form = reactive({
v_lon: '', v_lon: '',
v_lat: '', v_lat: '',
deviceType: '', deviceType: '',
enterprise: '', deviceCode: '',
isEnable: '', deviceSize: '',
enterprise: '', deviceStatus: '',
isEnable: '', gpsCode: '',
}) })
const deviceTypeInfo = reactive({ const deviceTypeInfo = reactive({
list: [{ list: [{
value: 'Option1', value: 'Option1',
label: 'Option1', label: 'Option1',
}, },
{ {
value: 'Option2', value: 'Option2',
label: 'Option2', label: 'Option2',
}] }]
})
const deviceStatusInfo = reactive({
list: [{
value: 'Option1',
label: 'Option1',
},
{
value: 'Option2',
label: 'Option2',
}]
}) })
@ -87,12 +102,7 @@ const publishFn = () => {
if (!ruleFormRef) return if (!ruleFormRef) return
ruleFormRef.value.validate((valid: any) => { ruleFormRef.value.validate((valid: any) => {
if (valid) { if (valid) {
if (form.linkUrl && linkReg.test(form.linkUrl)) {
ElMessage({
type: 'warning',
message: "请输入正确格式的跳转链接"
})
}
console.log('submit!') console.log('submit!')
} else { } else {
console.log('error submit!') console.log('error submit!')
@ -106,15 +116,9 @@ const cancelFn = (formEl: FormInstance | undefined) => {
ruleFormRef.value.resetFields() ruleFormRef.value.resetFields()
addShow.value = false addShow.value = false
} }
const beforeChange = (ev: any) => { const changeType = () => {
return new Promise((resolve, reject) => {
resolve(true)
})
}
const changeType =()=>{
} }

76
src/views/enterpriseManagement/lonLatPick/com/mapCom.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div :id="'equipmentIdMap' + domId" class="map"> <div :id="'equipmentIdMap' + domId" class="map">
</div> </div>
</template> </template>
@ -8,9 +8,9 @@
let map: any = null let map: any = null
let domId = ref("0") let domId = ref("0")
let viewPortList:any = [] let viewPortList: any = []
let props = defineProps({ let props = defineProps({
lineStyle: { lineStyle: {
type: Object, type: Object,
@ -19,17 +19,17 @@ let props = defineProps({
strokeWeight: 4 strokeWeight: 4
} }
}, },
scaleControlProps:{ scaleControlProps: {
type: Object, type: Object,
default: { default: {
anchor:"BMAP_ANCHOR_TOP_LEFT" anchor: "BMAP_ANCHOR_TOP_LEFT"
} }
}, },
zoomControlProps:{ zoomControlProps: {
type: Object, type: Object,
default: { 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 = new BMapGL.Map("equipmentIdMap" + domId.value);
map.centerAndZoom(new BMapGL.Point(116.3944, 39.9063), 18); map.centerAndZoom(new BMapGL.Point(116.3944, 39.9063), 18);
map.enableScrollWheelZoom(true); map.enableScrollWheelZoom(true);
const scaleCtrl = new BMapGL.ScaleControl(props.scaleControlProps); const scaleCtrl = new BMapGL.ScaleControl(props.scaleControlProps);
scaleCtrl.setAnchor(BMAP_ANCHOR_BOTTOM_LEFT) scaleCtrl.setAnchor(BMAP_ANCHOR_BOTTOM_LEFT)
map.addControl(scaleCtrl); map.addControl(scaleCtrl);
const zoomCtrl = new BMapGL.ZoomControl(props.zoomControlProps); // 添加缩放控件 const zoomCtrl = new BMapGL.ZoomControl(props.zoomControlProps); // 添加缩放控件
zoomCtrl.setAnchor(BMAP_ANCHOR_TOP_LEFT) zoomCtrl.setAnchor(BMAP_ANCHOR_TOP_LEFT)
map.addControl(zoomCtrl); map.addControl(zoomCtrl);
@ -55,48 +55,54 @@ const initMap = () => {
createMarkerInfo() createMarkerInfo()
} }
const createMarkerInfo =()=>{ const createMarkerInfo = () => {
createDot(116.3944, 39.9063) createDot(116.3944, 39.9063)
} }
const createDot=(lon,lat)=>{ const createDot = (lon: any, lat: any) => {
const point =new BMapGL.Point(lon,lat) const point = new BMapGL.Point(lon, lat)
const marker = new BMapGL.Marker(point); const marker = new BMapGL.Marker(point);
map.addOverlay(marker); map.addOverlay(marker);
viewPortList.push(marker) viewPortList.push(marker)
createInfoWindow("标题" ,"合肥市-太湖县=大家好",marker,point) createInfoWindow("标题", "合肥市-太湖县=大家好", marker, point)
} }
const createInfoWindow=(title:any ,addressText:any,marker:any,point:any)=>{ const createInfoWindow = (title: any, addressText: any, marker: any, point: any) => {
const opts = { try {
width : 200, // 信息窗口宽度 const opts = {
height: 100, // 信息窗口高度 width: 200, // 信息窗口宽度
title : title , // 信息窗口标题 height: 100, // 信息窗口高度
message:'66666666666666合肥市-太湖县=大家好' title: title, // 信息窗口标题
} message: '66666666666666合肥市-太湖县=大家好'
const infoWindow = new BMapGL.InfoWindow(addressText, opts); // 创建信息窗口对象 }
marker.addEventListener("click", function(){ console.log("createInfoWindowcreateInfoWindow", point)
map.openInfoWindow(infoWindow, point); //开启信息窗口 const infoWindow = new BMapGL.InfoWindow(addressText, opts); // 创建信息窗口对象
}); marker.addEventListener("click", function () {
viewPortList.push(infoWindow) map.openInfoWindow(infoWindow, point); //开启信息窗口
setViewPortFn(viewPortList) });
viewPortList.push(infoWindow)
setViewPortFn(viewPortList)
} catch (error) {
console.log("error", error)
}
} }
const setViewPortFn = (boundList:any) => {
const setViewPortFn = (boundList: any) => {
map.setViewport(boundList) map.setViewport(boundList)
} }
defineExpose({ defineExpose({
}) })
</script> </script>

24
src/views/enterpriseManagement/lonLatPick/index.vue
View File

@ -5,7 +5,7 @@
@sort="sortFn" @sort="sortFn"
@add="addFn" @add="addFn"
></headerTop> ></headerTop>
<addCom ref="addComRef"></addCom> <addCom ref="addComRRef"></addCom>
<el-card shadow="always" class="content_body_row"> <el-card shadow="always" class="content_body_row">
<mapCom></mapCom> <mapCom></mapCom>
</el-card> </el-card>
@ -15,29 +15,14 @@
import headerTop from "./com/headerTop.vue" import headerTop from "./com/headerTop.vue"
import addCom from "./com/addCom.vue" import addCom from "./com/addCom.vue"
import mapCom from "./com/mapCom.vue" import mapCom from "./com/mapCom.vue"
const addComRRef = ref()
import {ElConfirmBeforeOpert} from "utils/elementCom" import {ElConfirmBeforeOpert} from "utils/elementCom"
const addComRef = ref() const addComRef = ref()
const paginationInfo = reactive({ const paginationInfo = reactive({
currentPage: 1, currentPage: 1,
pageSize: 15 pageSize: 15
}) })
const tableData = [
]
let tableListInfo = reactive({
list: tableData
})
const editRowFn =(row:any)=>{
addComRef.value.edit({
a:"111"
})
}
const deleteItem = (row:any)=>{ const deleteItem = (row:any)=>{
const itemID =row.v_id const itemID =row.v_id
@ -57,7 +42,7 @@ const deleteRowFn =(row:any)=>{
} }
const searchFn =()=>{ const searchFn =()=>{
addComRRef.value.open()
} }
const resetFn =()=>{ const resetFn =()=>{
@ -89,6 +74,9 @@ const initTableList =()=>{
} }
</script> </script>
<style scoped lang="scss"></style> <style scoped lang="scss"></style>