江河点位修正
This commit is contained in:
@@ -55,8 +55,11 @@ const waterVillage = function (data) { // 农村
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const updateRiverCorrectLocation = function (data) { // 江河水质数据查询
|
const updateRiverCorrectLocation = function (data) { //
|
||||||
return axios.post("/water/visualiz/updatePointLocation", data)
|
return axios.post("/water/visualiz/updateRiverPointLocation", data)
|
||||||
|
}
|
||||||
|
const updateLakeCorrectLocation = function (data) { //
|
||||||
|
return axios.post("/water/visualiz/updateLakePointLocation", data)
|
||||||
}
|
}
|
||||||
export {
|
export {
|
||||||
getLakePlace,
|
getLakePlace,
|
||||||
@@ -71,5 +74,6 @@ export {
|
|||||||
waterCity,
|
waterCity,
|
||||||
waterCounty,
|
waterCounty,
|
||||||
waterVillage,
|
waterVillage,
|
||||||
updateRiverCorrectLocation
|
updateRiverCorrectLocation,
|
||||||
|
updateLakeCorrectLocation
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -25,6 +25,11 @@
|
|||||||
<mapNominal :param="nominalList"></mapNominal>
|
<mapNominal :param="nominalList"></mapNominal>
|
||||||
<!-- <map-table-center :rowData="pointData"></map-table-center>-->
|
<!-- <map-table-center :rowData="pointData"></map-table-center>-->
|
||||||
<map-table :rowData="pointData"></map-table>
|
<map-table :rowData="pointData"></map-table>
|
||||||
|
<a-modal @ok="updateCorrectLocation" :closable="false" :destroy-on-close="true" :width="1000" :body-style="{height:'700px'}"
|
||||||
|
v-model:visible="visibleRoadMap" :title="roadMapTitle"
|
||||||
|
>
|
||||||
|
<div style="width: 100%;height: 100%;" ref="roadMap" id="roadMap"></div>
|
||||||
|
</a-modal>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
@@ -32,7 +37,8 @@ import {
|
|||||||
getLakePlace,
|
getLakePlace,
|
||||||
getLakePlaceInnerCity,
|
getLakePlaceInnerCity,
|
||||||
getLakeYear,
|
getLakeYear,
|
||||||
getInnerLakeYear
|
getInnerLakeYear,
|
||||||
|
updateLakeCorrectLocation
|
||||||
} from "@/api/gis/gisApi";
|
} from "@/api/gis/gisApi";
|
||||||
// import {
|
// import {
|
||||||
// getColumnOptions,
|
// getColumnOptions,
|
||||||
@@ -100,7 +106,11 @@ export default {
|
|||||||
value: '',
|
value: '',
|
||||||
result: [],
|
result: [],
|
||||||
searchKey: "",
|
searchKey: "",
|
||||||
searchId: -1
|
searchId: -1,
|
||||||
|
// 字典表单
|
||||||
|
visibleRoadMap: false,
|
||||||
|
roadMapTitle: "选择坐标",
|
||||||
|
form: {},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
@@ -255,6 +265,12 @@ export default {
|
|||||||
that.currentY = 0
|
that.currentY = 0
|
||||||
that.tipFlag = false
|
that.tipFlag = false
|
||||||
},true)
|
},true)
|
||||||
|
myCompOverlay.addEventListener('contextmenu',function (e){
|
||||||
|
let currentId = e.target.getAttribute("id")
|
||||||
|
const {longitude, latitude, correctLng, correctLat,placeDictId} = that.pointData[currentId.substring(2, currentId.length)]
|
||||||
|
that.form = {longitude, latitude, correctLng, correctLat,placeDictId}
|
||||||
|
that.showRoadMap(that.form);
|
||||||
|
})
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
whereChange(e) {
|
whereChange(e) {
|
||||||
@@ -298,7 +314,10 @@ export default {
|
|||||||
'regionLevel': item.regionLevel,
|
'regionLevel': item.regionLevel,
|
||||||
'longitude': item.longitude,
|
'longitude': item.longitude,
|
||||||
'latitude': item.latitude,
|
'latitude': item.latitude,
|
||||||
'waterType' : item.waterType
|
'waterType' : item.waterType,
|
||||||
|
placeDictId: item.placeDictId,
|
||||||
|
correctLng: item.correctLng,
|
||||||
|
correctLat:item.correctLat
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@@ -323,7 +342,10 @@ export default {
|
|||||||
'regionLevel': item.regionLevel,
|
'regionLevel': item.regionLevel,
|
||||||
'longitude': item.longitude,
|
'longitude': item.longitude,
|
||||||
'latitude': item.latitude,
|
'latitude': item.latitude,
|
||||||
'waterType' : item.waterType
|
'waterType' : item.waterType,
|
||||||
|
placeDictId: item.placeDictId,
|
||||||
|
correctLng: item.correctLng,
|
||||||
|
correctLat:item.correctLat
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@@ -333,6 +355,83 @@ export default {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
showRoadMap(form) {
|
||||||
|
const {longitude, latitude, correctLng, correctLat} = form
|
||||||
|
this.visibleRoadMap = true
|
||||||
|
// this.roadMapTitle = "选择修正后的道路坐标"
|
||||||
|
this.$nextTick(() => {
|
||||||
|
console.log(this.$refs.roadMap)
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
var map = new BMap.Map(this.$refs.roadMap); // 创建Map实例
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
map.addControl(new BMap.NavigationControl()); //初始化地图控件
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
map.addControl(new BMap.ScaleControl());
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
map.addControl(new BMap.OverviewMapControl());
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
var point = new BMap.Point(correctLng ? correctLng : longitude ? longitude : 108.33, correctLat ? correctLat : latitude ? latitude : 22.84);
|
||||||
|
// var point = new BBMap.Point(form.longitude ? form.longitude : 108.33, form.latitude ? form.latitude : 22.84);
|
||||||
|
map.centerAndZoom(point, 13);//初始化地图中心点
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
var marker = new BMap.Marker(point); //初始化地图标记
|
||||||
|
marker.enableDragging(); //标记开启拖拽
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
var gc = new BMap.Geocoder();//地址解析类
|
||||||
|
//添加标记拖拽监听
|
||||||
|
marker.addEventListener("dragend", (e) => {
|
||||||
|
//获取地址信息
|
||||||
|
this.form['correctLng'] = e.point.lng
|
||||||
|
this.form['correctLat'] = e.point.lat
|
||||||
|
|
||||||
|
gc.getLocation(e.point, function (rs) {
|
||||||
|
showLocationInfo(e.point, rs);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
//添加标记点击监听
|
||||||
|
marker.addEventListener("click", function (e) {
|
||||||
|
gc.getLocation(e.point, function (rs) {
|
||||||
|
showLocationInfo(e.point, rs);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
map.centerAndZoom(point, 15); //设置中心点坐标和地图级别
|
||||||
|
map.addOverlay(marker); //将标记添加到地图中
|
||||||
|
//显示地址信息窗口
|
||||||
|
function showLocationInfo(pt, rs) {
|
||||||
|
var opts = {
|
||||||
|
width: 250, //信息窗口宽度
|
||||||
|
height: 100, //信息窗口高度
|
||||||
|
title: "" //信息窗口标题
|
||||||
|
}
|
||||||
|
var addComp = rs.addressComponents;
|
||||||
|
var addr = "当前位置:" + addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber + "<br/>";
|
||||||
|
addr += "纬度: " + pt.lat + ", " + "经度:" + pt.lng;
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
var infoWindow = new BMap.InfoWindow(addr, opts); //创建信息窗口对象
|
||||||
|
marker.openInfoWindow(infoWindow);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
updateCorrectLocation(){
|
||||||
|
const {correctLng, correctLat,placeDictId} = that.form;
|
||||||
|
const reqData = {correctLng, correctLat,id:placeDictId};
|
||||||
|
console.log(that.form)
|
||||||
|
if(this.where.type == "0"){
|
||||||
|
reqData.type = "city"
|
||||||
|
}else{
|
||||||
|
reqData.type = "special"
|
||||||
|
}
|
||||||
|
updateLakeCorrectLocation(reqData).then(res=>{
|
||||||
|
if(res.data.code == 0){
|
||||||
|
this.visibleRoadMap = false
|
||||||
|
this.whereChange();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -297,7 +297,7 @@ export default {
|
|||||||
|
|
||||||
})
|
})
|
||||||
// eslint-disable-next-line no-undef
|
// eslint-disable-next-line no-undef
|
||||||
var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(Number(item.longitude), Number(item.latitude)), index, color);
|
var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(Number(item.correctLng?item.correctLng: item.longitude), Number(item.correctLat?item.correctLat:item.latitude)), index, color);
|
||||||
that.map.addOverlay(myCompOverlay);//将标注添加到地图中
|
that.map.addOverlay(myCompOverlay);//将标注添加到地图中
|
||||||
myCompOverlay.addEventListener('mouseover', function (e) {
|
myCompOverlay.addEventListener('mouseover', function (e) {
|
||||||
let currentId = e.target.getAttribute("id")
|
let currentId = e.target.getAttribute("id")
|
||||||
@@ -480,6 +480,7 @@ export default {
|
|||||||
updateRiverCorrectLocation(reqData).then(res=>{
|
updateRiverCorrectLocation(reqData).then(res=>{
|
||||||
if(res.data.code == 0){
|
if(res.data.code == 0){
|
||||||
this.requestFun()
|
this.requestFun()
|
||||||
|
this.visibleRoadMap = false
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -56,6 +56,23 @@
|
|||||||
<a-form-item label="纬度" name="latitude">
|
<a-form-item label="纬度" name="latitude">
|
||||||
<a-input v-model:value="form.latitude" placeholder="请输入点位纬度" allow-clear />
|
<a-input v-model:value="form.latitude" placeholder="请输入点位纬度" allow-clear />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
|
<a-form-item label="修正位置" name="correctLocation">
|
||||||
|
<a-input-search @search="showRoadMap(form)"
|
||||||
|
:value="`[${form.correctLng},${form.correctLat}]`" placeholder="`[${form.longitude},${form.latitude}]`" allow-clear>
|
||||||
|
<template #enterButton>
|
||||||
|
<a-button>选择位置</a-button>
|
||||||
|
</template>
|
||||||
|
</a-input-search>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-modal :closable="false" :destroy-on-close="true" :width="1000" :body-style="{height:'700px'}"
|
||||||
|
v-model:visible="visibleRoadMap" :title="roadMapTitle"
|
||||||
|
>
|
||||||
|
<div style="width: 100%;height: 100%;" ref="roadMap" id="roadMap"></div>
|
||||||
|
<template #footer>
|
||||||
|
<a-button key="submit" type="primary" @click="visibleRoadMap = false">确定</a-button>
|
||||||
|
</template>
|
||||||
|
</a-modal>
|
||||||
<a-form-item label="类别" name="type">
|
<a-form-item label="类别" name="type">
|
||||||
<a-input v-model:value="form.type" placeholder="请输入类别" allow-clear />
|
<a-input v-model:value="form.type" placeholder="请输入类别" allow-clear />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
@@ -156,6 +173,8 @@
|
|||||||
title: "点位纬度",
|
title: "点位纬度",
|
||||||
dataIndex: "latitude",
|
dataIndex: "latitude",
|
||||||
},
|
},
|
||||||
|
{title: "修正经度", dataIndex: "correctLng"},
|
||||||
|
{title: "修正纬度", dataIndex: "correctLat"},
|
||||||
{
|
{
|
||||||
title: "类别",
|
title: "类别",
|
||||||
dataIndex: "type",
|
dataIndex: "type",
|
||||||
@@ -220,6 +239,8 @@
|
|||||||
showNYear: false,
|
showNYear: false,
|
||||||
cYear: undefined,
|
cYear: undefined,
|
||||||
nYear: undefined,
|
nYear: undefined,
|
||||||
|
visibleRoadMap: false,
|
||||||
|
roadMapTitle: "选择坐标",
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
@@ -369,7 +390,67 @@
|
|||||||
|
|
||||||
let sheet = XLSX.utils.aoa_to_sheet(arr);
|
let sheet = XLSX.utils.aoa_to_sheet(arr);
|
||||||
this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
|
this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
|
||||||
|
},
|
||||||
|
showRoadMap(form) {
|
||||||
|
const {longitude,latitude,correctLng,correctLat} = form
|
||||||
|
this.visibleRoadMap = true
|
||||||
|
this.roadMapTitle = "选择修正后的道路坐标"
|
||||||
|
this.$nextTick(() => {
|
||||||
|
console.log(this.$refs.roadMap)
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
var map = new BMap.Map(this.$refs.roadMap); // 创建Map实例
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
map.addControl(new BMap.NavigationControl()); //初始化地图控件
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
map.addControl(new BMap.ScaleControl());
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
map.addControl(new BMap.OverviewMapControl());
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
var point = new BMap.Point(correctLng?correctLng:longitude?longitude:108.33,correctLat?correctLat:latitude?latitude:22.84);
|
||||||
|
// var point = new BBMap.Point(form.longitude ? form.longitude : 108.33, form.latitude ? form.latitude : 22.84);
|
||||||
|
map.centerAndZoom(point, 13);//初始化地图中心点
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
var marker = new BMap.Marker(point); //初始化地图标记
|
||||||
|
marker.enableDragging(); //标记开启拖拽
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
var gc = new BMap.Geocoder();//地址解析类
|
||||||
|
//添加标记拖拽监听
|
||||||
|
marker.addEventListener("dragend", (e) => {
|
||||||
|
//获取地址信息
|
||||||
|
this.form['correctLng'] = e.point.lng
|
||||||
|
this.form['correctLat'] = e.point.lat
|
||||||
|
|
||||||
|
gc.getLocation(e.point, function (rs) {
|
||||||
|
showLocationInfo(e.point, rs);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
//添加标记点击监听
|
||||||
|
marker.addEventListener("click", function (e) {
|
||||||
|
gc.getLocation(e.point, function (rs) {
|
||||||
|
showLocationInfo(e.point, rs);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
map.centerAndZoom(point, 15); //设置中心点坐标和地图级别
|
||||||
|
map.addOverlay(marker); //将标记添加到地图中
|
||||||
|
//显示地址信息窗口
|
||||||
|
function showLocationInfo(pt, rs) {
|
||||||
|
var opts = {
|
||||||
|
width: 250, //信息窗口宽度
|
||||||
|
height: 100, //信息窗口高度
|
||||||
|
title: "" //信息窗口标题
|
||||||
}
|
}
|
||||||
|
var addComp = rs.addressComponents;
|
||||||
|
var addr = "当前位置:" + addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber + "<br/>";
|
||||||
|
addr += "纬度: " + pt.lat + ", " + "经度:" + pt.lng;
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
var infoWindow = new BMap.InfoWindow(addr, opts); //创建信息窗口对象
|
||||||
|
marker.openInfoWindow(infoWindow);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -20,13 +20,14 @@
|
|||||||
</a-col>
|
</a-col>
|
||||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||||
<a-form-item label="点位名称:">
|
<a-form-item label="点位名称:">
|
||||||
<a-input v-model:value.trim="where.sectionName" placeholder="请输入" allow-clear />
|
<a-input v-model:value.trim="where.sectionName" placeholder="请输入" allow-clear/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||||
<a-space>
|
<a-space>
|
||||||
<a-button type="primary" @click="reload">查询</a-button>
|
<a-button type="primary" @click="reload">查询</a-button>
|
||||||
<a-button @click="reset" style="background: #FFA200FF; border-color: #FFA200FF;color: #FFFFFF">重置</a-button>
|
<a-button @click="reset" style="background: #FFA200FF; border-color: #FFA200FF;color: #FFFFFF">重置
|
||||||
|
</a-button>
|
||||||
</a-space>
|
</a-space>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
@@ -49,7 +50,7 @@
|
|||||||
:wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
|
:wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
|
||||||
>
|
>
|
||||||
<a-form-item label="新年份" name="nYear">
|
<a-form-item label="新年份" name="nYear">
|
||||||
<a-input-number id="inputNumber" v-model:value="nYear" :min="1970" :max="2050" />
|
<a-input-number id="inputNumber" v-model:value="nYear" :min="1970" :max="2050"/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-form>
|
</a-form>
|
||||||
</a-modal>
|
</a-modal>
|
||||||
@@ -69,32 +70,32 @@
|
|||||||
:wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
|
:wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
|
||||||
>
|
>
|
||||||
<a-form-item label="年份" name="year">
|
<a-form-item label="年份" name="year">
|
||||||
<a-input-number v-model:value="form.year" :min="1970" :max="2050" />
|
<a-input-number v-model:value="form.year" :min="1970" :max="2050"/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="测站名称" name="testSiteName">
|
<a-form-item label="测站名称" name="testSiteName">
|
||||||
<a-input v-model:value="form.testSiteName" placeholder="请输入测站名称" allow-clear />
|
<a-input v-model:value="form.testSiteName" placeholder="请输入测站名称" allow-clear/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="测站代码" name="testSiteCode">
|
<a-form-item label="测站代码" name="testSiteCode">
|
||||||
<a-input v-model:value="form.testSiteCode" placeholder="请输入测站代码" allow-clear />
|
<a-input v-model:value="form.testSiteCode" placeholder="请输入测站代码" allow-clear/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="湖库名称" name="lakeReservoirName">
|
<a-form-item label="湖库名称" name="lakeReservoirName">
|
||||||
<a-input v-model:value="form.lakeReservoirName" placeholder="请输入湖库名称" allow-clear />
|
<a-input v-model:value="form.lakeReservoirName" placeholder="请输入湖库名称" allow-clear/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
|
|
||||||
<a-form-item label="湖库代码" name="lakeReservoirCode" >
|
<a-form-item label="湖库代码" name="lakeReservoirCode">
|
||||||
<a-input v-model:value="form.lakeReservoirCode" placeholder="请输入湖库代码" allow-clear />
|
<a-input v-model:value="form.lakeReservoirCode" placeholder="请输入湖库代码" allow-clear/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="断面名称" name="sectionName">
|
<a-form-item label="断面名称" name="sectionName">
|
||||||
<a-input v-model:value="form.sectionName" placeholder="请输入断面名称" allow-clear />
|
<a-input v-model:value="form.sectionName" placeholder="请输入断面名称" allow-clear/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="断面代码" name="sectionCode">
|
<a-form-item label="断面代码" name="sectionCode">
|
||||||
<a-input v-model:value="form.sectionCode" placeholder="请输入断面代码" allow-clear />
|
<a-input v-model:value="form.sectionCode" placeholder="请输入断面代码" allow-clear/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="控制属性" name="contrAttr" >
|
<a-form-item label="控制属性" name="contrAttr">
|
||||||
<a-input v-model:value="form.contrAttr" placeholder="请输入控制属性" allow-clear />
|
<a-input v-model:value="form.contrAttr" placeholder="请输入控制属性" allow-clear/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="所属流域" name="watershed">
|
<a-form-item label="所属流域" name="watershed">
|
||||||
<a-input v-model:value="form.watershed" placeholder="请输入所属流域" allow-clear />
|
<a-input v-model:value="form.watershed" placeholder="请输入所属流域" allow-clear/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="采样时间" name="samplingTime">
|
<a-form-item label="采样时间" name="samplingTime">
|
||||||
<a-date-picker
|
<a-date-picker
|
||||||
@@ -105,19 +106,37 @@
|
|||||||
</a-form-item>
|
</a-form-item>
|
||||||
|
|
||||||
<a-form-item label="水期代码" name="waterCode">
|
<a-form-item label="水期代码" name="waterCode">
|
||||||
<a-input v-model:value="form.waterCode" placeholder="请输入水期代码" allow-clear />
|
<a-input v-model:value="form.waterCode" placeholder="请输入水期代码" allow-clear/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="经度" name="longitude">
|
<a-form-item label="经度" name="longitude">
|
||||||
<a-input v-model:value="form.longitude" placeholder="请输入点位经度" allow-clear />
|
<a-input v-model:value="form.longitude" placeholder="请输入点位经度" allow-clear/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="纬度" name="latitude">
|
<a-form-item label="纬度" name="latitude">
|
||||||
<a-input v-model:value="form.latitude" placeholder="请输入点位纬度" allow-clear />
|
<a-input v-model:value="form.latitude" placeholder="请输入点位纬度" allow-clear/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
|
<a-form-item label="修正位置" name="correctLocation">
|
||||||
|
<a-input-search @search="showRoadMap(form)"
|
||||||
|
:value="`[${form.correctLng},${form.correctLat}]`"
|
||||||
|
placeholder="`[${form.longitude},${form.latitude}]`" allow-clear>
|
||||||
|
<template #enterButton>
|
||||||
|
<a-button>选择位置</a-button>
|
||||||
|
</template>
|
||||||
|
</a-input-search>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-modal :closable="false" :destroy-on-close="true" :width="1000" :body-style="{height:'700px'}"
|
||||||
|
v-model:visible="visibleRoadMap" :title="roadMapTitle"
|
||||||
|
>
|
||||||
|
<div style="width: 100%;height: 100%;" ref="roadMap" id="roadMap"></div>
|
||||||
|
<template #footer>
|
||||||
|
<a-button key="submit" type="primary" @click="visibleRoadMap = false">确定</a-button>
|
||||||
|
</template>
|
||||||
|
</a-modal>
|
||||||
<a-form-item label="类别" name="type">
|
<a-form-item label="类别" name="type">
|
||||||
<a-input v-model:value="form.type" placeholder="请输入类别" allow-clear />
|
<a-input v-model:value="form.type" placeholder="请输入类别" allow-clear/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="排序" name="sort">
|
<a-form-item label="排序" name="sort">
|
||||||
<a-input-number v-model:value="form.sort" placeholder="请输入排序" allow-clear />
|
<a-input-number v-model:value="form.sort" placeholder="请输入排序" allow-clear/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-form>
|
</a-form>
|
||||||
</a-modal>
|
</a-modal>
|
||||||
@@ -163,7 +182,8 @@
|
|||||||
>删除
|
>删除
|
||||||
</a-button>
|
</a-button>
|
||||||
</a-popconfirm>
|
</a-popconfirm>
|
||||||
<a-button @click="exportData" style="background: #2FA524FF; border-color: #2FA524FF;color: #FFFFFF">导出</a-button>
|
<a-button @click="exportData" style="background: #2FA524FF; border-color: #2FA524FF;color: #FFFFFF">导出
|
||||||
|
</a-button>
|
||||||
</a-space>
|
</a-space>
|
||||||
</template>
|
</template>
|
||||||
<template #action="{ record }">
|
<template #action="{ record }">
|
||||||
@@ -173,7 +193,8 @@
|
|||||||
type="primary"
|
type="primary"
|
||||||
shape="round"
|
shape="round"
|
||||||
size="small"
|
size="small"
|
||||||
>修改</a-button
|
>修改
|
||||||
|
</a-button
|
||||||
>
|
>
|
||||||
<a-popconfirm
|
<a-popconfirm
|
||||||
:title="`确认删除这条数据吗?`"
|
:title="`确认删除这条数据吗?`"
|
||||||
@@ -182,7 +203,8 @@
|
|||||||
@confirm="remove(record)"
|
@confirm="remove(record)"
|
||||||
>
|
>
|
||||||
<a-button type="primary" danger shape="round" size="small"
|
<a-button type="primary" danger shape="round" size="small"
|
||||||
>删除</a-button
|
>删除
|
||||||
|
</a-button
|
||||||
>
|
>
|
||||||
</a-popconfirm>
|
</a-popconfirm>
|
||||||
</a-space>
|
</a-space>
|
||||||
@@ -204,6 +226,7 @@ import {
|
|||||||
} from "@/api/ecology/water/lake/special";
|
} from "@/api/ecology/water/lake/special";
|
||||||
import {DownOutlined} from '@ant-design/icons-vue';
|
import {DownOutlined} from '@ant-design/icons-vue';
|
||||||
import XLSX from "xlsx";
|
import XLSX from "xlsx";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "autonomous",
|
name: "autonomous",
|
||||||
components: {DownOutlined},
|
components: {DownOutlined},
|
||||||
@@ -270,6 +293,8 @@ export default {
|
|||||||
title: "点位纬度",
|
title: "点位纬度",
|
||||||
dataIndex: "latitude",
|
dataIndex: "latitude",
|
||||||
},
|
},
|
||||||
|
{title: "修正经度", dataIndex: "correctLng"},
|
||||||
|
{title: "修正纬度", dataIndex: "correctLat"},
|
||||||
{
|
{
|
||||||
title: "类别",
|
title: "类别",
|
||||||
dataIndex: "type",
|
dataIndex: "type",
|
||||||
@@ -302,8 +327,8 @@ export default {
|
|||||||
loading: false,
|
loading: false,
|
||||||
rules: {
|
rules: {
|
||||||
year: [{required: true, message: '请输入年份'}],
|
year: [{required: true, message: '请输入年份'}],
|
||||||
sectionName:[{
|
sectionName: [{
|
||||||
required:true,message: "请输入点位名称",
|
required: true, message: "请输入点位名称",
|
||||||
}],
|
}],
|
||||||
longitude: [{
|
longitude: [{
|
||||||
required: true,
|
required: true,
|
||||||
@@ -323,16 +348,18 @@ export default {
|
|||||||
}],
|
}],
|
||||||
},
|
},
|
||||||
yearOptions: [],
|
yearOptions: [],
|
||||||
showNYear:false,
|
showNYear: false,
|
||||||
cYear: undefined,
|
cYear: undefined,
|
||||||
nYear:undefined,
|
nYear: undefined,
|
||||||
|
visibleRoadMap: false,
|
||||||
|
roadMapTitle: "选择坐标",
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.getOptions();
|
this.getOptions();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
minLeqChange(e){
|
minLeqChange(e) {
|
||||||
console.log(e)
|
console.log(e)
|
||||||
},
|
},
|
||||||
/* 刷新表格 */
|
/* 刷新表格 */
|
||||||
@@ -400,7 +427,7 @@ export default {
|
|||||||
/* 删除单个 */
|
/* 删除单个 */
|
||||||
remove(row) {
|
remove(row) {
|
||||||
const hide = this.$message.loading('请求中..', 0);
|
const hide = this.$message.loading('请求中..', 0);
|
||||||
batchRemove({'lakeSpecialDictIds':[row.lakeSpecialDictId]}).then((res) => {
|
batchRemove({'lakeSpecialDictIds': [row.lakeSpecialDictId]}).then((res) => {
|
||||||
hide();
|
hide();
|
||||||
if (res.data.code === 0) {
|
if (res.data.code === 0) {
|
||||||
this.$message.success(res.data.msg);
|
this.$message.success(res.data.msg);
|
||||||
@@ -417,7 +444,7 @@ export default {
|
|||||||
removeBatch() {
|
removeBatch() {
|
||||||
const hide = this.$message.loading('请求中..', 0);
|
const hide = this.$message.loading('请求中..', 0);
|
||||||
const ids = this.selectionList.map((item) => item.lakeSpecialDictId);
|
const ids = this.selectionList.map((item) => item.lakeSpecialDictId);
|
||||||
batchRemove({'lakeSpecialDictIds':ids}).then((res) => {
|
batchRemove({'lakeSpecialDictIds': ids}).then((res) => {
|
||||||
if (res.data.code === 0) {
|
if (res.data.code === 0) {
|
||||||
this.$message.success(res.data.msg);
|
this.$message.success(res.data.msg);
|
||||||
this.reload();
|
this.reload();
|
||||||
@@ -430,7 +457,7 @@ export default {
|
|||||||
hide();
|
hide();
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
getOptions(){
|
getOptions() {
|
||||||
getYear().then(res => {
|
getYear().then(res => {
|
||||||
if (res.data.code == 0) {
|
if (res.data.code == 0) {
|
||||||
this.yearOptions = res.data.data.years.map(item => {
|
this.yearOptions = res.data.data.years.map(item => {
|
||||||
@@ -442,13 +469,13 @@ export default {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
setCYear(e){
|
setCYear(e) {
|
||||||
this.cYear = e.key;
|
this.cYear = e.key;
|
||||||
this.showNYear = true;
|
this.showNYear = true;
|
||||||
},
|
},
|
||||||
copyBatch(){
|
copyBatch() {
|
||||||
const hide = this.$message.loading('请求中..', 0);
|
const hide = this.$message.loading('请求中..', 0);
|
||||||
specialDictCopy({copyYear:Number(this.cYear),newYear:this.nYear}).then(res=>{
|
specialDictCopy({copyYear: Number(this.cYear), newYear: this.nYear}).then(res => {
|
||||||
if (res.data.code === 0) {
|
if (res.data.code === 0) {
|
||||||
this.$message.success(res.data.msg);
|
this.$message.success(res.data.msg);
|
||||||
this.reload();
|
this.reload();
|
||||||
@@ -462,8 +489,8 @@ export default {
|
|||||||
hide();
|
hide();
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
exportData(){
|
exportData() {
|
||||||
const columns = this.columns.filter(item=>item.dataIndex);
|
const columns = this.columns.filter(item => item.dataIndex);
|
||||||
const arr = [];
|
const arr = [];
|
||||||
const th = columns.map((item) => item.title);
|
const th = columns.map((item) => item.title);
|
||||||
arr.push(th);
|
arr.push(th);
|
||||||
@@ -474,7 +501,67 @@ export default {
|
|||||||
|
|
||||||
let sheet = XLSX.utils.aoa_to_sheet(arr);
|
let sheet = XLSX.utils.aoa_to_sheet(arr);
|
||||||
this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
|
this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
|
||||||
|
},
|
||||||
|
showRoadMap(form) {
|
||||||
|
const {longitude,latitude,correctLng,correctLat} = form
|
||||||
|
this.visibleRoadMap = true
|
||||||
|
this.roadMapTitle = "选择修正后的道路坐标"
|
||||||
|
this.$nextTick(() => {
|
||||||
|
console.log(this.$refs.roadMap)
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
var map = new BMap.Map(this.$refs.roadMap); // 创建Map实例
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
map.addControl(new BMap.NavigationControl()); //初始化地图控件
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
map.addControl(new BMap.ScaleControl());
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
map.addControl(new BMap.OverviewMapControl());
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
var point = new BMap.Point(correctLng?correctLng:longitude?longitude:108.33,correctLat?correctLat:latitude?latitude:22.84);
|
||||||
|
// var point = new BBMap.Point(form.longitude ? form.longitude : 108.33, form.latitude ? form.latitude : 22.84);
|
||||||
|
map.centerAndZoom(point, 13);//初始化地图中心点
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
var marker = new BMap.Marker(point); //初始化地图标记
|
||||||
|
marker.enableDragging(); //标记开启拖拽
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
var gc = new BMap.Geocoder();//地址解析类
|
||||||
|
//添加标记拖拽监听
|
||||||
|
marker.addEventListener("dragend", (e) => {
|
||||||
|
//获取地址信息
|
||||||
|
this.form['correctLng'] = e.point.lng
|
||||||
|
this.form['correctLat'] = e.point.lat
|
||||||
|
|
||||||
|
gc.getLocation(e.point, function (rs) {
|
||||||
|
showLocationInfo(e.point, rs);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
//添加标记点击监听
|
||||||
|
marker.addEventListener("click", function (e) {
|
||||||
|
gc.getLocation(e.point, function (rs) {
|
||||||
|
showLocationInfo(e.point, rs);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
map.centerAndZoom(point, 15); //设置中心点坐标和地图级别
|
||||||
|
map.addOverlay(marker); //将标记添加到地图中
|
||||||
|
//显示地址信息窗口
|
||||||
|
function showLocationInfo(pt, rs) {
|
||||||
|
var opts = {
|
||||||
|
width: 250, //信息窗口宽度
|
||||||
|
height: 100, //信息窗口高度
|
||||||
|
title: "" //信息窗口标题
|
||||||
}
|
}
|
||||||
|
var addComp = rs.addressComponents;
|
||||||
|
var addr = "当前位置:" + addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber + "<br/>";
|
||||||
|
addr += "纬度: " + pt.lat + ", " + "经度:" + pt.lng;
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
var infoWindow = new BMap.InfoWindow(addr, opts); //创建信息窗口对象
|
||||||
|
marker.openInfoWindow(infoWindow);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user