elink-star
/
epmet-work-pc-chengyang
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

管理平台地图

feature
jiangyy 3 years ago
parent
46b9d95275
commit
d85228cc2a
8 changed files with 658 additions and 970 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      src/views/modules/communityParty/regionalParty/unitsForm.vue
  2. 128
      src/views/modules/communityService/fuwuzuzhi/cpts/detail.vue
  3. 478
      src/views/modules/communityService/fuwuzuzhi/cpts/edit.vue
  4. 336
      src/views/modules/plugins/point/icpointnucleicmonitoring-add-or-update.vue
  5. 164
      src/views/modules/plugins/point/icpointnucleicmonitoring-detail.vue
  6. 348
      src/views/modules/plugins/point/icpointvaccinesinoculation-add-or-update.vue
  7. 163
      src/views/modules/plugins/point/icpointvaccinesinoculation-detail.vue
  8. 5
      src/views/modules/workSys/mapConfig.vue

6
src/views/modules/communityParty/regionalParty/unitsForm.vue
View File

@ -147,13 +147,7 @@ import { Loading } from 'element-ui' // 引入Loading服务
import { requestPost } from '@/js/dai/request' import { requestPost } from '@/js/dai/request'
import daiMap from "@/utils/dai-map"; import daiMap from "@/utils/dai-map";
var map var map
var search
var markers
var infoWindowList
var geocoder // 新建一个正逆地址解析类
let loading // 加载动画 let loading // 加载动画
export default { export default {

128
src/views/modules/communityService/fuwuzuzhi/cpts/detail.vue
View File

@ -38,7 +38,7 @@
<span class="info-title-2">地图位置：</span> <span class="info-title-2">地图位置：</span>
<div class="div_map"> <div class="div_map">
<div id="app_detail"></div> <div id="app_detail_fwzz"></div>
</div> </div>
</div> </div>
@ -66,6 +66,7 @@ import { mapGetters } from "vuex";
import { requestPost } from "@/js/dai/request"; import { requestPost } from "@/js/dai/request";
import { Loading } from 'element-ui' // 引入Loading服务 import { Loading } from 'element-ui' // 引入Loading服务
import nextTick from "dai-js/tools/nextTick"; import nextTick from "dai-js/tools/nextTick";
import daiMap from "@/utils/dai-map";
var map; var map;
var search; var search;
@ -114,7 +115,7 @@ export default {
diaDestroy () { diaDestroy () {
if (map) { if (map) {
map.destroy() // map.destroy()
} }
}, },
async initForm () { async initForm () {
@ -123,20 +124,8 @@ export default {
await this.getInfo(); await this.getInfo();
this.initLoading = true this.initLoading = true
console.log(this.fmData) console.log(this.fmData)
// await nextTick(200)
this.$nextTick(() => {
this.initMap()
})
this.endLoading()
},
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义
initMap () {
let { latitude, longitude } = this.$store.state.user; let { latitude, longitude } = this.$store.state.user;
console.log('lat' + latitude + ',lon' + longitude) console.log('lat' + latitude + ',lon' + longitude)
if (this.fmData.latitude && this.fmData.longitude) { if (this.fmData.latitude && this.fmData.longitude) {
latitude = this.fmData.latitude latitude = this.fmData.latitude
longitude = this.fmData.longitude longitude = this.fmData.longitude
@ -145,91 +134,39 @@ export default {
latitude = 39.9088810666821; latitude = 39.9088810666821;
longitude = 116.39743841556731; longitude = 116.39743841556731;
} }
// 定义地图中心点坐标 this.$nextTick(() => {
var center = new window.TMap.LatLng(latitude, longitude) // if (!map) {
// 定义map变量，调用 TMap.Map() 构造函数创建地图 this.initMap(latitude, longitude)
map = new window.TMap.Map(document.getElementById("app_detail"), { // } else {
center: center, // 设置地图中心点坐标 // map.setCenter(latitude, longitude);
zoom: 17.2, // 设置地图缩放级别 // map.setMarker(latitude, longitude);
pitch: 43.5, // 设置俯仰角
rotation: 45, // 设置地图旋转角度 // }
}); })
this.endLoading()
search = new window.TMap.service.Search({ pageSize: 10 });
// 新建一个地点搜索类
markers = new TMap.MultiMarker({
map: map,
geometries: [],
});
infoWindowList = Array(10);
geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
// 监听地图平移结束
map.on("panend", (e) => {
this.handleMoveCenter(e);
});
this.handleMoveCenter();
}, },
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义
initMap (latitude, longitude) {
setMarker (lat, lng) { map = new daiMap(
markers.setGeometries([]); document.getElementById("app_detail_fwzz"),
markers.add([ { latitude, longitude },
{ {
id: "4", zoom: 16.2, // 设置地图缩放级别
styleId: "marker", pitch: 43.5, // 设置俯仰角
position: new TMap.LatLng(lat, lng), rotation: 45, // 设置地图旋转角度
properties: { }
title: "marker4", );
},
},
]);
},
handleSearchMap () { // 监听地图平移结束
infoWindowList.forEach((infoWindow) => { // map.on("dragend", (e) => {
infoWindow.close(); // this.handleMoveCenter(e);
}); // });
infoWindowList.length = 0;
markers.setGeometries([]); map.setCenter(latitude, longitude);
// 在地图显示范围内以给定的关键字搜索地点 map.setMarker(latitude, longitude);
search
.searchRectangle({
keyword: this.fmData.address,
bounds: map.getBounds(),
})
.then((result) => {
let { data } = result;
if (Array.isArray(data) && data.length > 0) {
const {
location: { lat, lng },
} = data[0];
map.setCenter(new TMap.LatLng(lat, lng));
this.setMarker(lat, lng);
this.fmData.latitude = lat;
this.fmData.longitude = lng;
} else {
this.$message.error("未检索到相关位置坐标");
}
});
},
handleMoveCenter (e) {
//修改地图中心点
const center = map.getCenter();
const lat = center.getLat();
const lng = center.getLng();
this.fmData.latitude = lat;
this.fmData.longitude = lng;
this.setMarker(lat, lng);
if (e && e.originalEvent) {
geocoder
.getAddress({ location: new TMap.LatLng(lat, lng) }) // 将给定的坐标位置转换为地址
.then((result) => {
this.fmData.address = result.result.address;
});
}
}, },
async getInfo () { async getInfo () {
@ -247,10 +184,7 @@ export default {
serviceTypeArr: data.serviceType.split(","), serviceTypeArr: data.serviceType.split(","),
}; };
await nextTick(800);
if (map) {
map.setCenter(new TMap.LatLng(data.latitude, data.longitude));
}
} else { } else {
this.$message.error(msg); this.$message.error(msg);
} }

478
src/views/modules/communityService/fuwuzuzhi/cpts/edit.vue
View File

@ -1,191 +1,158 @@
<template> <template>
<div> <div>
<div class="dialog-h-content scroll-h"> <div class="dialog-h-content scroll-h">
<el-form <el-form ref="ref_form"
ref="ref_form" :inline="true"
:inline="true" :model="fmData"
:model="fmData" :rules="dataRule"
:rules="dataRule" :disabled="formType === 'watch'"
:disabled="formType === 'watch'" class="form">
class="form" <el-form-item label="服务类别 "
> prop="serviceTypeArr"
<el-form-item label-width="150px"
label="服务类别 " style="display: block">
prop="serviceTypeArr" <el-select v-if="formType == 'add' || formType == 'edit'"
label-width="150px" v-model="fmData.serviceTypeArr"
style="display: block" placeholder="请选择"
> clearable
<el-select multiple>
v-if="formType == 'add' || formType == 'edit'" <el-option v-for="item in categoryOptions"
v-model="fmData.serviceTypeArr" :key="item.value"
placeholder="请选择" :label="item.label"
clearable :value="item.value">
multiple
>
<el-option
v-for="item in categoryOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option> </el-option>
</el-select> </el-select>
<div style="width: 610px" v-else>{{ fmData.serviceTypeName }}</div> <div style="width: 610px"
v-else>{{ fmData.serviceTypeName }}</div>
</el-form-item> </el-form-item>
<el-form-item <el-form-item label="服务组织名称"
label="服务组织名称" prop="orgName"
prop="orgName" label-width="150px"
label-width="150px" style="display: block">
style="display: block" <el-input v-if="formType == 'add' || formType == 'edit'"
> class="item_width_1"
<el-input maxlength="100"
v-if="formType == 'add' || formType == 'edit'" show-word-limit
class="item_width_1" placeholder="请输入项目名称"
maxlength="100" v-model="fmData.orgName">
show-word-limit
placeholder="请输入项目名称"
v-model="fmData.orgName"
>
</el-input> </el-input>
<div style="width: 610px" v-else>{{ fmData.orgName || "--" }}</div> <div style="width: 610px"
v-else>{{ fmData.orgName || "--" }}</div>
</el-form-item> </el-form-item>
<el-form-item <el-form-item label="组织描述"
label="组织描述" prop="orgDescribe"
prop="orgDescribe" label-width="150px"
label-width="150px" style="display: block">
style="display: block" <el-input v-if="formType == 'add' || formType == 'edit'"
> class="item_width_1"
<el-input type="textarea"
v-if="formType == 'add' || formType == 'edit'" maxlength="1000"
class="item_width_1" show-word-limit
type="textarea" :rows="3"
maxlength="1000" placeholder="请输入服务内容，不超过1000字"
show-word-limit v-model="fmData.orgDescribe"></el-input>
:rows="3" <div style="width: 610px"
placeholder="请输入服务内容，不超过1000字" v-else>
v-model="fmData.orgDescribe"
></el-input>
<div style="width: 610px" v-else>
{{ fmData.orgDescribe || "--" }} {{ fmData.orgDescribe || "--" }}
</div> </div>
</el-form-item> </el-form-item>
<el-form-item <el-form-item label="负责人姓名"
label="负责人姓名" prop="principalName"
prop="principalName" label-width="150px"
label-width="150px" style="display: block">
style="display: block" <el-input v-if="formType == 'add' || formType == 'edit'"
> class="item_width_1"
<el-input maxlength="100"
v-if="formType == 'add' || formType == 'edit'" show-word-limit
class="item_width_1" placeholder="请输入负责人姓名"
maxlength="100" v-model="fmData.principalName"></el-input>
show-word-limit <div style="width: 610px"
placeholder="请输入负责人姓名" v-else>
v-model="fmData.principalName"
></el-input>
<div style="width: 610px" v-else>
{{ fmData.principalName || "--" }} {{ fmData.principalName || "--" }}
</div> </div>
</el-form-item> </el-form-item>
<el-form-item <el-form-item label="联系方式"
label="联系方式" prop="principalMobile"
prop="principalMobile" label-width="150px"
label-width="150px" style="display: block">
style="display: block" <el-input v-if="formType == 'add' || formType == 'edit'"
> class="item_width_1"
<el-input maxlength="11"
v-if="formType == 'add' || formType == 'edit'" show-word-limit
class="item_width_1" placeholder="请输入联系方式"
maxlength="11" v-model="fmData.principalMobile"></el-input>
show-word-limit <div style="width: 610px"
placeholder="请输入联系方式" v-else>
v-model="fmData.principalMobile"
></el-input>
<div style="width: 610px" v-else>
{{ fmData.principalMobile || "--" }} {{ fmData.principalMobile || "--" }}
</div> </div>
</el-form-item> </el-form-item>
<el-form-item <el-form-item label="地图位置"
label="位置坐标" prop="longitude"
prop="longitude" label-width="150px"
label-width="150px" style="display: block">
style="display: block"
>
<div style="width: 500px"> <div style="width: 500px">
<el-input <el-select v-model="searchValue"
class="item_width_4" filterable
maxlength="100" style="width: 500px"
style="width: 430px" remote
show-word-limit :reserve-keyword="true"
placeholder="请输入所在地址" placeholder="请输入关键词"
v-model="fmData.address" :remote-method="remoteMethod"
> :loading="loading">
</el-input> <el-option v-for="(item,index) in searchOptions"
<el-button @click.native="handleClickKey(index)"
style="margin-left: 10px" :key="item.value"
type="default" :label="item.label"
size="small" :value="item.value">
@click="handleSearchMap" </el-option>
>查询</el-button </el-select>
> <div id="app_fwzz"
<div id="app" class="div_map"></div> class="div_map"></div>
<div style="margin-top: 10px">
<span>经度</span>
<el-input
class="item_width_3"
maxlength="50"
placeholder="请输入经度"
v-model="fmData.longitude"
>
</el-input>
<span style="margin-left: 20px">纬度</span>
<el-input
class="item_width_3"
maxlength="50"
placeholder="请输入纬度"
v-model="fmData.latitude"
>
</el-input>
</div>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item <el-form-item label="详细地址"
label="备注" prop="address"
prop="remark" label-width="150px"
label-width="150px" style="display: block">
style="display: block"
> <el-input class="item_width_1"
<el-input v-model="fmData.address">
v-if="formType == 'add' || formType == 'edit'" </el-input>
class="item_width_1"
type="textarea" </el-form-item>
maxlength="500"
show-word-limit <el-form-item label="备注"
:rows="3" prop="remark"
placeholder="请输入备注，不超过500字" label-width="150px"
v-model="fmData.remark" style="display: block">
></el-input> <el-input v-if="formType == 'add' || formType == 'edit'"
<div style="width: 610px" v-else>{{ fmData.remark || "--" }}</div> class="item_width_1"
type="textarea"
maxlength="500"
show-word-limit
:rows="3"
placeholder="请输入备注，不超过500字"
v-model="fmData.remark"></el-input>
<div style="width: 610px"
v-else>{{ fmData.remark || "--" }}</div>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<div class="div_btn resi-btns"> <div class="div_btn resi-btns">
<el-button size="small" @click="handleCancle">取 消</el-button> <el-button size="small"
<el-button @click="handleCancle">取 消</el-button>
v-if="formType != 'watch'" <el-button v-if="formType != 'watch'"
type="primary" type="primary"
size="small" size="small"
:disabled="btnDisable" :disabled="btnDisable"
@click="handleComfirm" @click="handleComfirm">确 定</el-button>
>确 定</el-button
>
</div> </div>
</div> </div>
</template> </template>
@ -195,6 +162,7 @@ import { mapGetters } from "vuex";
import { requestPost } from "@/js/dai/request"; import { requestPost } from "@/js/dai/request";
import formVltHelper from "dai-js/tools/formVltHelper"; import formVltHelper from "dai-js/tools/formVltHelper";
import nextTick from "dai-js/tools/nextTick"; import nextTick from "dai-js/tools/nextTick";
import daiMap from "@/utils/dai-map";
var map; var map;
var search; var search;
@ -214,8 +182,13 @@ export default {
}, },
}, },
data() { data () {
return { return {
searchOptions: [],
searchValue: '',
resultList: [],
loading: false,
uploadUrl: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadqrcodeV2", uploadUrl: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadqrcodeV2",
customerId: localStorage.getItem("customerId"), customerId: localStorage.getItem("customerId"),
@ -239,7 +212,7 @@ export default {
}, },
components: {}, components: {},
computed: { computed: {
dataRule() { dataRule () {
return { return {
serviceTypeArr: [ serviceTypeArr: [
{ required: true, message: "服务类别不能为空", trigger: "blur" }, { required: true, message: "服务类别不能为空", trigger: "blur" },
@ -258,112 +231,125 @@ export default {
}, },
watch: {}, watch: {},
async mounted() { async mounted () {
this.initForm(); this.initForm();
}, },
methods: { methods: {
async initForm() { async initForm () {
let { latitude, longitude } = this.$store.state.user;
this.initMap(); this.initMap();
this.getCategoryOpitons(); this.getCategoryOpitons();
if (this.formId && this.formType != "add") { if (this.formId && this.formType != "add") {
this.getInfo(); await this.getInfo();
} else {
this.fmData.latitude = latitude
this.fmData.longitude = longitude
} }
this.$nextTick(() => {
if (!map) {
this.initMap(this.fmData.latitude, this.fmData.longitude);
} else {
map.setCenter(this.fmData.latitude, this.fmData.longitude);
map.setMarker(this.fmData.latitude, this.fmData.longitude);
}
})
}, },
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义 // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
initMap() { initMap (latitude, longitude) {
// 定义地图中心点坐标
var center = new window.TMap.LatLng(36.0722275, 120.38945519);
// 定义map变量，调用 TMap.Map() 构造函数创建地图
map = new window.TMap.Map(document.getElementById("app"), {
center: center, // 设置地图中心点坐标
zoom: 16.2, // 设置地图缩放级别
pitch: 43.5, // 设置俯仰角
rotation: 45, // 设置地图旋转角度
});
search = new window.TMap.service.Search({ pageSize: 10 }); map = new daiMap(
// 新建一个地点搜索类 document.getElementById("app_fwzz"),
markers = new TMap.MultiMarker({ { latitude, longitude },
map: map, {
geometries: [], zoom: 16.2, // 设置地图缩放级别
}); pitch: 43.5, // 设置俯仰角
infoWindowList = Array(10); rotation: 45, // 设置地图旋转角度
}
geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类 );
// 监听地图平移结束 // 监听地图平移结束
map.on("panend", (e) => { map.on("dragend", (e) => {
this.handleMoveCenter(e); this.handleMoveCenter(e);
}); });
this.handleMoveCenter();
},
setMarker(lat, lng) { map.setCenter(latitude, longitude);
markers.setGeometries([]); map.setMarker(latitude, longitude);
markers.add([
{
id: "4",
styleId: "marker",
position: new TMap.LatLng(lat, lng),
properties: {
title: "marker4",
},
},
]);
},
handleSearchMap() {
infoWindowList.forEach((infoWindow) => {
infoWindow.close();
});
infoWindowList.length = 0;
markers.setGeometries([]);
// 在地图显示范围内以给定的关键字搜索地点
search
.searchNearby({
keyword: this.fmData.address,
radius: 1000,
autoExtend: true,
center: map.getCenter(),
})
.then((result) => {
let { data } = result;
if (Array.isArray(data) && data.length > 0) {
const {
location: { lat, lng },
} = data[0];
map.setCenter(new TMap.LatLng(lat, lng));
this.setMarker(lat, lng);
this.fmData.latitude = lat;
this.fmData.longitude = lng;
} else {
this.$message.error("未检索到相关位置坐标");
}
});
}, },
handleMoveCenter(e) {
async handleMoveCenter () {
//修改地图中心点 //修改地图中心点
const center = map.getCenter(); const { lat, lng } = map.getCenter();
const lat = center.getLat();
const lng = center.getLng();
this.fmData.latitude = lat; this.fmData.latitude = lat;
this.fmData.longitude = lng; this.fmData.longitude = lng;
this.setMarker(lat, lng); map.setMarker(lat, lng);
if (e && e.originalEvent) { let { msg, data } = await map.getAddress(lat, lng);
geocoder if (msg == "success") {
.getAddress({ location: new TMap.LatLng(lat, lng) }) // 将给定的坐标位置转换为地址 this.fmData.address = data.address
.then((result) => { this.searchValue = data.address
this.fmData.address = result.result.address; this.searchOptions = []
});
}
},
async remoteMethod (query) {
if (query !== '') {
this.loading = true;
const { msg, data } = await map.searchNearby(query);
this.loading = false;
this.resultList = []
if (msg == "success" && data.resultList && data.resultList.length > 0) {
if (data.resultList && data.resultList.length > 0) {
this.resultList = data.resultList
this.searchOptions = this.resultList.map(item => {
return { value: `${item.hotPointID}`, label: `${item.address + item.name}` };
});
}
} else {
this.searchOptions = [
{
value: '0',
label: '未检索到结果'
}
]
}
} else {
this.searchOptions = [];
} }
}, },
async getInfo() { handleClickKey (index) {
let selPosition = this.resultList[index]
let lonlat = selPosition.lonlat.split(" ")
map.setCenter(lonlat[1], lonlat[0]);
map.setMarker(lonlat[1], lonlat[0]);
this.fmData.latitude = lonlat[1];
this.fmData.longitude = lonlat[0];
this.fmData.address = selPosition.address + selPosition.name
},
resetData () {
this.searchValue = ''
this.searchOptions = []
this.resultList = []
},
async getInfo () {
const url = "/heart/icServiceOrg/detail"; const url = "/heart/icServiceOrg/detail";
const params = { const params = {
@ -378,16 +364,12 @@ export default {
serviceTypeArr: data.serviceType.split(","), serviceTypeArr: data.serviceType.split(","),
}; };
await nextTick(800);
if (map) {
map.setCenter(new TMap.LatLng(data.latitude, data.longitude));
}
} else { } else {
this.$message.error(msg); this.$message.error(msg);
} }
}, },
async getCategoryOpitons() { async getCategoryOpitons () {
const url = "/sys/dict/data/dictlist"; const url = "/sys/dict/data/dictlist";
const params = { const params = {
dictType: "ic_service_type", dictType: "ic_service_type",
@ -400,11 +382,11 @@ export default {
} }
}, },
watchImg(src) { watchImg (src) {
window.open(src); window.open(src);
}, },
async handleComfirm() { async handleComfirm () {
this.btnDisable = true; this.btnDisable = true;
setTimeout(() => { setTimeout(() => {
this.btnDisable = false; this.btnDisable = false;
@ -419,7 +401,7 @@ export default {
}); });
}, },
async submit() { async submit () {
let url = ""; let url = "";
let params = { let params = {
...this.fmData, ...this.fmData,
@ -439,6 +421,7 @@ export default {
type: "success", type: "success",
message: "操作成功", message: "操作成功",
}); });
this.resetData()
this.$emit("afterEdit"); this.$emit("afterEdit");
this.btnDisable = false; this.btnDisable = false;
} else { } else {
@ -447,7 +430,8 @@ export default {
} }
}, },
handleCancle() { handleCancle () {
this.resetData()
this.$emit("close"); this.$emit("close");
}, },
}, },

336
src/views/modules/plugins/point/icpointnucleicmonitoring-add-or-update.vue
View File

@ -5,7 +5,7 @@
:rules="dataRule" :rules="dataRule"
ref="dataForm" ref="dataForm"
@keyup.enter.native="dataFormSubmitHandle()" @keyup.enter.native="dataFormSubmitHandle()"
label-width="120px"> label-width="150px">
<el-form-item label="所属组织名称" <el-form-item label="所属组织名称"
prop="orgId"> prop="orgId">
<el-select v-model="dataForm.orgId" <el-select v-model="dataForm.orgId"
@ -41,60 +41,37 @@
:change="check_num()" :change="check_num()"
:disabled="dialogTitle == '查看'"></el-input> :disabled="dialogTitle == '查看'"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="地图位置"
prop="longitude"
style="display: block">
<div style="width: 500px">
<el-select v-model="searchValue"
filterable
style="width: 500px"
remote
:reserve-keyword="true"
placeholder="请输入关键词"
:remote-method="remoteMethod"
:loading="loading">
<el-option v-for="(item,index) in searchOptions"
@click.native="handleClickKey(index)"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<div id="app_hsjcd"
class="div_map"></div>
</div>
</el-form-item>
<el-form-item label="检测点地址" <el-form-item label="检测点地址"
prop="address"> prop="address">
<el-input v-model="dataForm.address" <el-input v-model="dataForm.address"
placeholder="例:青岛市时代国际广场" placeholder="例:青岛市时代国际广场"
style="width:65%;"></el-input> style="width:65%;"></el-input>
<el-button style="margin-left: 10px"
type="primary"
size="small"
@click="handleSearchMap">查询</el-button>
</el-form-item>
<el-form-item label="位置坐标"
prop="longitude"
style="display: block"
class="position_label">
<div>
<!-- <el-input
class="item_width_4"
maxlength="50"
placeholder="例:青岛市时代国际广场"
v-model="keyWords"
style="width: 200px"
:disabled='dialogTitle == "查看"'
>
</el-input>
<el-button
style="margin-left: 10px"
type="primary"
size="small"
@click="handleSearchMap"
>查询</el-button
> -->
<div id="map_add"
class="div_map"
style="width: 500px; height: 300px; margin-top: 20px"></div>
<div style="margin-top: 10px"
v-show="false">
<span>经度</span>
<el-input class="item_width_3"
maxlength="50"
placeholder="请输入经度"
v-model="dataForm.longitude"
disabled
style="width: 200px; margin-left: 20px">
</el-input>
<span style="margin-left: 20px">纬度</span>
<el-input class="item_width_3"
maxlength="50"
placeholder="请输入纬度"
v-model="dataForm.latitude"
disabled
style="width: 200px; margin-left: 20px">
</el-input>
</div>
</div>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="submit"> <div class="submit">
@ -108,6 +85,8 @@
<script> <script>
import debounce from "lodash/debounce"; import debounce from "lodash/debounce";
import daiMap from "@/utils/dai-map";
import { requestPost, requestGet } from "@/js/dai/request";
var map; var map;
var search; var search;
var markers; var markers;
@ -116,6 +95,10 @@ var infoWindowList;
export default { export default {
data () { data () {
return { return {
searchOptions: [],
searchValue: '',
resultList: [],
loading: false,
dataForm: { dataForm: {
id: "", id: "",
customerId: "", customerId: "",
@ -213,7 +196,13 @@ export default {
}, },
}, },
methods: { methods: {
resetData () {
this.searchValue = ''
this.searchOptions = []
this.resultList = []
},
closeSubmit () { closeSubmit () {
this.resetData()
this.$emit("closeDialog"); this.$emit("closeDialog");
}, },
orgChangeHandle (val) { orgChangeHandle (val) {
@ -225,132 +214,84 @@ export default {
} }
}, },
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义 // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
initMap () { initMap (latitude, longitude) {
// 定义地图中心点坐标
let { latitude, longitude } = this.$store.state.user;
console.log('lat' + latitude + ',lon' + longitude)
if (this.dataForm.latitude && this.dataForm.longitude) {
latitude = this.dataForm.latitude
longitude = this.dataForm.longitude
}
if (!latitude || latitude == "" || latitude == "0") {
latitude = 39.9088810666821;
longitude = 116.39743841556731;
}
var center = new window.TMap.LatLng(latitude, longitude)
// 定义map变量，调用 TMap.Map() 构造函数创建地图
map = new window.TMap.Map(document.getElementById("map_add"), {
center: center, // 设置地图中心点坐标
zoom: 17.2, // 设置地图缩放级别
pitch: 43.5, // 设置俯仰角
rotation: 45, // 设置地图旋转角度
});
search = new window.TMap.service.Search({ pageSize: 10 });
// 新建一个地点搜索类
markers = new TMap.MultiMarker({
map: map,
geometries: [],
});
infoWindowList = Array(10);
geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类 map = new daiMap(
document.getElementById("app_hsjcd"),
{ latitude, longitude },
{
zoom: 16.2, // 设置地图缩放级别
pitch: 43.5, // 设置俯仰角
rotation: 45, // 设置地图旋转角度
}
);
// 监听地图平移结束 // 监听地图平移结束
map.on("panend", () => { map.on("dragend", (e) => {
this.handleMoveCenter(); this.handleMoveCenter(e);
}); });
// this.handleMoveCenter()
this.convert(); map.setCenter(latitude, longitude);
map.setMarker(latitude, longitude);
}, },
handleMoveCenter () {
async handleMoveCenter () {
//修改地图中心点 //修改地图中心点
const center = map.getCenter(); const { lat, lng } = map.getCenter();
const lat = center.getLat();
const lng = center.getLng();
this.dataForm.latitude = lat; this.dataForm.latitude = lat;
this.dataForm.longitude = lng; this.dataForm.longitude = lng;
this.setMarker(lat, lng); map.setMarker(lat, lng);
this.convert(lat, lng);
let { msg, data } = await map.getAddress(lat, lng);
if (msg == "success") {
this.dataForm.address = data.address
this.searchValue = data.address
this.searchOptions = []
}
}, },
// 地图查询
handleSearchMap () {
infoWindowList.forEach((infoWindow) => {
infoWindow.close();
});
infoWindowList.length = 0;
markers.setGeometries([]);
// 在地图显示范围内以给定的关键字搜索地点
search
.searchNearby({
keyword: this.dataForm.address,
radius: 1000,
autoExtend: true,
center: map.getCenter(),
})
.then((result) => {
let { data } = result;
if (Array.isArray(data) && data.length > 0) {
const {
location: { lat, lng },
} = data[0];
map.setCenter(new TMap.LatLng(lat, lng)); async remoteMethod (query) {
this.setMarker(lat, lng);
this.dataForm.latitude = lat; if (query !== '') {
this.dataForm.longitude = lng; this.loading = true;
this.convert();
} else { const { msg, data } = await map.searchNearby(query);
this.$message.error("未检索到相关位置坐标"); this.loading = false;
this.resultList = []
if (msg == "success" && data.resultList && data.resultList.length > 0) {
if (data.resultList && data.resultList.length > 0) {
this.resultList = data.resultList
this.searchOptions = this.resultList.map(item => {
return { value: `${item.hotPointID}`, label: `${item.address + item.name}` };
});
} }
}); } else {
}, this.searchOptions = [
convert (lat, lng) { {
markers.setGeometries([]); value: '0',
// var input = document.getElementById('location').value.split(','); label: '未检索到结果'
let location; }
if (lat && lng) { ]
location = new TMap.LatLng(lat, lng); }
} else { } else {
location = new TMap.LatLng( this.searchOptions = [];
this.dataForm.latitude,
this.dataForm.longitude
);
} }
// map.setCenter(location);
markers.updateGeometries([
{
id: "main", // 点标注数据数组
position: location,
},
]);
geocoder
.getAddress({ location: location }) // 将给定的坐标位置转换为地址
.then((result) => {
this.dataForm.address =
this.dataForm.address !== "" &&
this.dataForm.address !== null &&
(this.dataForm.longitude === "" || this.dataForm.longitude === null)
? this.dataForm.address
: result.result.address;
// 显示搜索到的地址
console.log(this.dataForm.address);
});
}, },
setMarker (lat, lng) { handleClickKey (index) {
markers.setGeometries([]); let selPosition = this.resultList[index]
markers.add([ let lonlat = selPosition.lonlat.split(" ")
{ map.setCenter(lonlat[1], lonlat[0]);
id: "4", map.setMarker(lonlat[1], lonlat[0]);
styleId: "marker", this.dataForm.latitude = lonlat[1];
position: new TMap.LatLng(lat, lng), this.dataForm.longitude = lonlat[0];
properties: { this.dataForm.address = selPosition.address + selPosition.name
title: "marker4",
},
},
]);
}, },
// 获取所属组织列表 // 获取所属组织列表
getFormInfo () { getFormInfo () {
@ -364,33 +305,54 @@ export default {
}) })
.catch(() => { }); .catch(() => { });
}, },
init () { async init () {
this.$nextTick(() => { let { latitude, longitude } = this.$store.state.user;
this.$refs["dataForm"].resetFields();
if (this.dataForm.id) {
this.getInfo();
} else {
this.initMap(); this.$refs["dataForm"].resetFields();
} if (this.dataForm.id) {
}); await this.getInfo();
} else {
this.dataForm.latitude = latitude
this.dataForm.longitude = longitude
}
this.$nextTick(() => {
// if (!map) {
this.initMap(this.dataForm.latitude, this.dataForm.longitude);
// } else {
// map.setCenter(this.dataForm.latitude, this.dataForm.longitude);
// map.setMarker(this.dataForm.latitude, this.dataForm.longitude);
// }
})
}, },
// 获取信息 // 获取信息
getInfo () { async getInfo () {
this.$http let url = `/epmetuser/icPointNucleicMonitoring/${this.dataForm.id}`
.get(`/epmetuser/icPointNucleicMonitoring/${this.dataForm.id}`) const { data, code, msg } = await requestGet(url)
.then(({ data: res }) => { if (code === 0) {
if (res.code !== 0) { this.dataForm = {
return this.$message.error(res.msg); ...this.dataForm,
} ...data,
this.dataForm = { };
...this.dataForm, } else {
...res.data, this.$message.error(msg)
}; }
this.initMap();
}) // this.$http
.catch(() => { }); // .get(`/epmetuser/icPointNucleicMonitoring/${this.dataForm.id}`)
// .then(({ data: res }) => {
// if (res.code !== 0) {
// return this.$message.error(res.msg);
// }
// this.dataForm = {
// ...this.dataForm,
// ...res.data,
// };
// })
// .catch(() => { });
}, },
// 表单提交 // 表单提交
dataFormSubmitHandle: debounce( dataFormSubmitHandle: debounce(
@ -412,6 +374,7 @@ export default {
type: "success", type: "success",
duration: 500, duration: 500,
onClose: () => { onClose: () => {
this.$emit("refreshDataList"); this.$emit("refreshDataList");
this.closeSubmit(); this.closeSubmit();
}, },
@ -447,4 +410,9 @@ export default {
.form-class .el-textarea { .form-class .el-textarea {
width: 75% !important; width: 75% !important;
} }
.div_map {
position: relative;
margin-top: 5px;
}
</style> </style>

164
src/views/modules/plugins/point/icpointnucleicmonitoring-detail.vue
View File

@ -34,7 +34,7 @@
<span class="info-title-2">地图位置：</span> <span class="info-title-2">地图位置：</span>
<div class="div_map"> <div class="div_map">
<div id="app_detail"></div> <div id="app_detail_hsjcd"></div>
</div> </div>
</div> </div>
@ -55,6 +55,7 @@
<script> <script>
import { Loading } from 'element-ui' // 引入Loading服务 import { Loading } from 'element-ui' // 引入Loading服务
import { requestPost, requestGet } from '@/js/dai/request' import { requestPost, requestGet } from '@/js/dai/request'
import daiMap from "@/utils/dai-map";
var map; var map;
var search; var search;
@ -85,7 +86,7 @@ export default {
methods: { methods: {
diaDestroy () { diaDestroy () {
if (map) { if (map) {
map.destroy() // map.destroy()
} }
}, },
closeSubmit () { closeSubmit () {
@ -100,9 +101,25 @@ export default {
this.dataForm.id = id this.dataForm.id = id
await this.getInfo(); await this.getInfo();
this.initLoading = true this.initLoading = true
let { latitude, longitude } = this.$store.state.user;
console.log('lat' + latitude + ',lon' + longitude)
if (this.dataForm.latitude && this.dataForm.longitude) {
latitude = this.dataForm.latitude
longitude = this.dataForm.longitude
}
if (!latitude || latitude == "" || latitude == "0") {
latitude = 39.9088810666821;
longitude = 116.39743841556731;
}
this.$nextTick(() => { this.$nextTick(() => {
this.initMap() // if (!map) {
this.initMap(latitude, longitude)
// } else {
// map.setCenter(latitude, longitude);
// map.setMarker(latitude, longitude);
// }
}) })
this.endLoading() this.endLoading()
@ -121,132 +138,27 @@ export default {
this.$message.error(msg) this.$message.error(msg)
} }
}, },
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义 // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
initMap () { initMap (latitude, longitude) {
// 定义地图中心点坐标
let { latitude, longitude } = this.$store.state.user;
console.log('lat' + latitude + ',lon' + longitude)
if (this.dataForm.latitude && this.dataForm.longitude) {
latitude = this.dataForm.latitude
longitude = this.dataForm.longitude
}
if (!latitude || latitude == "" || latitude == "0") {
latitude = 39.9088810666821;
longitude = 116.39743841556731;
}
var center = new window.TMap.LatLng(latitude, longitude)
// 定义map变量，调用 TMap.Map() 构造函数创建地图
map = new window.TMap.Map(document.getElementById("app_detail"), {
center: center, // 设置地图中心点坐标
zoom: 17.2, // 设置地图缩放级别
pitch: 43.5, // 设置俯仰角
rotation: 45, // 设置地图旋转角度
});
search = new window.TMap.service.Search({ pageSize: 10 });
// 新建一个地点搜索类
markers = new TMap.MultiMarker({
map: map,
geometries: [],
});
infoWindowList = Array(10);
geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
// 监听地图平移结束
map.on("panend", () => {
this.handleMoveCenter();
});
this.handleMoveCenter()
this.convert();
},
handleMoveCenter () {
//修改地图中心点
const center = map.getCenter();
const lat = center.getLat();
const lng = center.getLng();
this.dataForm.latitude = lat;
this.dataForm.longitude = lng;
this.setMarker(lat, lng);
this.convert(lat, lng);
},
// 地图查询
handleSearchMap () {
infoWindowList.forEach((infoWindow) => {
infoWindow.close();
});
infoWindowList.length = 0;
markers.setGeometries([]);
// 在地图显示范围内以给定的关键字搜索地点
search
.searchRectangle({
keyword: this.dataForm.address,
bounds: map.getBounds(),
})
.then((result) => {
let { data } = result;
if (Array.isArray(data) && data.length > 0) {
const {
location: { lat, lng },
} = data[0];
map.setCenter(new TMap.LatLng(lat, lng));
this.setMarker(lat, lng);
this.dataForm.latitude = lat;
this.dataForm.longitude = lng;
this.convert();
} else {
this.$message.error("未检索到相关位置坐标");
}
});
},
convert (lat, lng) {
markers.setGeometries([]);
// var input = document.getElementById('location').value.split(',');
let location;
if (lat && lng) {
location = new TMap.LatLng(lat, lng);
} else {
location = new TMap.LatLng(
this.dataForm.latitude,
this.dataForm.longitude
);
}
// map.setCenter(location); map = new daiMap(
markers.updateGeometries([ document.getElementById("app_detail_hsjcd"),
{ latitude, longitude },
{ {
id: "main", // 点标注数据数组 zoom: 16.2, // 设置地图缩放级别
position: location, pitch: 43.5, // 设置俯仰角
}, rotation: 45, // 设置地图旋转角度
]); }
geocoder );
.getAddress({ location: location }) // 将给定的坐标位置转换为地址
.then((result) => { // // 监听地图平移结束
this.dataForm.address = // map.on("dragend", (e) => {
this.dataForm.address !== "" && // this.handleMoveCenter(e);
this.dataForm.address !== null && // });
(this.dataForm.longitude === "" || this.dataForm.longitude === null)
? this.dataForm.address map.setCenter(latitude, longitude);
: result.result.address; map.setMarker(latitude, longitude);
// 显示搜索到的地址
console.log(this.dataForm.address);
});
},
setMarker (lat, lng) {
markers.setGeometries([]);
markers.add([
{
id: "4",
styleId: "marker",
position: new TMap.LatLng(lat, lng),
properties: {
title: "marker4",
},
},
]);
}, },
// 开启加载动画 // 开启加载动画

348
src/views/modules/plugins/point/icpointvaccinesinoculation-add-or-update.vue
View File

@ -5,7 +5,7 @@
:rules="dataRule" :rules="dataRule"
ref="dataForm" ref="dataForm"
@keyup.enter.native="dataFormSubmitHandle()" @keyup.enter.native="dataFormSubmitHandle()"
label-width="130px"> label-width="150px">
<!--<el-form-item label="所属组织名称" prop="orgName">--> <!--<el-form-item label="所属组织名称" prop="orgName">-->
<!--<el-select v-model="dataForm.orgName" placeholder="所属组织名称">--> <!--<el-select v-model="dataForm.orgName" placeholder="所属组织名称">-->
<!--<el-option--> <!--<el-option-->
@ -86,60 +86,37 @@
:disabled="dialogTitle == '查看'" :disabled="dialogTitle == '查看'"
placeholder="咨询电话"></el-input> placeholder="咨询电话"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="地图位置"
prop="longitude"
style="display: block">
<div style="width: 500px">
<el-select v-model="searchValue"
filterable
style="width: 500px"
remote
:reserve-keyword="true"
placeholder="请输入关键词"
:remote-method="remoteMethod"
:loading="loading">
<el-option v-for="(item,index) in searchOptions"
@click.native="handleClickKey(index)"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<div id="app_ymjzd"
class="div_map"></div>
</div>
</el-form-item>
<el-form-item label="接种点地址" <el-form-item label="接种点地址"
prop="address"> prop="address">
<el-input v-model="dataForm.address" <el-input v-model="dataForm.address"
placeholder="例:青岛市时代国际广场" placeholder="例:青岛市时代国际广场"
style="width: 65%"></el-input> style="width: 65%"></el-input>
<el-button style="margin-left: 10px"
type="primary"
size="small"
@click="handleSearchMap">查询</el-button>
</el-form-item>
<el-form-item label="位置坐标"
class="position_label"
prop="longitude"
style="display: block">
<div>
<!-- <el-input
class="item_width_4"
maxlength="50"
placeholder="例:青岛市时代国际广场"
v-model="keyWords"
style="width: 200px"
:disabled='dialogTitle == "查看"'
>
</el-input>
<el-button
style="margin-left: 10px"
type="primary"
size="small"
@click="handleSearchMap"
>查询</el-button
> -->
<div id="map_add"
class="div_map"
style="width: 500px; height: 300px; margin-top: 20px"></div>
<div style="margin-top: 10px"
v-show="false">
<span>经度</span>
<el-input class="item_width_3"
maxlength="50"
placeholder="请输入经度"
v-model="dataForm.longitude"
disabled
style="width: 200px; margin-left: 20px">
</el-input>
<span style="margin-left: 20px">纬度</span>
<el-input class="item_width_3"
maxlength="50"
placeholder="请输入纬度"
v-model="dataForm.latitude"
disabled
style="width: 200px; margin-left: 20px">
</el-input>
</div>
</div>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="submit"> <div class="submit">
@ -153,6 +130,8 @@
<script> <script>
import debounce from "lodash/debounce"; import debounce from "lodash/debounce";
import daiMap from "@/utils/dai-map";
import { requestPost, requestGet } from "@/js/dai/request";
var map; var map;
var search; var search;
var markers; var markers;
@ -161,6 +140,10 @@ var infoWindowList;
export default { export default {
data () { data () {
return { return {
searchOptions: [],
searchValue: '',
resultList: [],
loading: false,
visible: false, visible: false,
dataForm: { dataForm: {
id: "", id: "",
@ -312,130 +295,93 @@ export default {
} }
}, },
closeSubmit () { closeSubmit () {
this.resetData()
this.$emit("closeDialog"); this.$emit("closeDialog");
}, },
resetData () {
this.searchValue = ''
this.searchOptions = []
this.resultList = []
},
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义 // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
initMap () { initMap (latitude, longitude) {
let { latitude, longitude } = this.$store.state.user;
// 定义地图中心点坐标
if (!latitude || latitude == "" || latitude == "0") {
latitude = 39.9088810666821;
longitude = 116.39743841556731;
}
console.log(latitude, longitude);
var center = new window.TMap.LatLng(latitude, longitude);
// 定义map变量，调用 TMap.Map() 构造函数创建地图
map = new window.TMap.Map(document.getElementById("map_add"), {
center: center, // 设置地图中心点坐标
zoom: 17.2, // 设置地图缩放级别
pitch: 43.5, // 设置俯仰角
rotation: 45, // 设置地图旋转角度
});
search = new window.TMap.service.Search({ pageSize: 10 });
// 新建一个地点搜索类
markers = new TMap.MultiMarker({
map: map,
geometries: [],
});
infoWindowList = Array(10);
geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类 map = new daiMap(
document.getElementById("app_ymjzd"),
{ latitude, longitude },
{
zoom: 16.2, // 设置地图缩放级别
pitch: 43.5, // 设置俯仰角
rotation: 45, // 设置地图旋转角度
}
);
// 监听地图平移结束 // 监听地图平移结束
map.on("panend", () => { map.on("dragend", (e) => {
this.handleMoveCenter(); this.handleMoveCenter(e);
}); });
// this.handleMoveCenter()
this.convert(); map.setCenter(latitude, longitude);
map.setMarker(latitude, longitude);
}, },
handleMoveCenter () {
async handleMoveCenter () {
//修改地图中心点 //修改地图中心点
const center = map.getCenter(); const { lat, lng } = map.getCenter();
const lat = center.getLat();
const lng = center.getLng();
this.dataForm.latitude = lat; this.dataForm.latitude = lat;
this.dataForm.longitude = lng; this.dataForm.longitude = lng;
this.setMarker(lat, lng); map.setMarker(lat, lng);
this.convert(lat, lng);
let { msg, data } = await map.getAddress(lat, lng);
if (msg == "success") {
this.dataForm.address = data.address
this.searchValue = data.address
this.searchOptions = []
}
}, },
// 地图查询
handleSearchMap () {
infoWindowList.forEach((infoWindow) => {
infoWindow.close();
});
infoWindowList.length = 0;
markers.setGeometries([]);
// 在地图显示范围内以给定的关键字搜索地点
search
.searchNearby({
keyword: this.dataForm.address,
radius: 1000,
autoExtend: true,
center: map.getCenter(),
})
.then((result) => {
let { data } = result;
if (Array.isArray(data) && data.length > 0) {
const {
location: { lat, lng },
} = data[0];
map.setCenter(new TMap.LatLng(lat, lng)); async remoteMethod (query) {
this.setMarker(lat, lng);
this.dataForm.latitude = lat; if (query !== '') {
this.dataForm.longitude = lng; this.loading = true;
this.convert();
} else { const { msg, data } = await map.searchNearby(query);
this.$message.error("未检索到相关位置坐标"); this.loading = false;
this.resultList = []
if (msg == "success" && data.resultList && data.resultList.length > 0) {
if (data.resultList && data.resultList.length > 0) {
this.resultList = data.resultList
this.searchOptions = this.resultList.map(item => {
return { value: `${item.hotPointID}`, label: `${item.address + item.name}` };
});
} }
}); } else {
}, this.searchOptions = [
convert (lat, lng) { {
markers.setGeometries([]); value: '0',
// var input = document.getElementById('location').value.split(','); label: '未检索到结果'
let location; }
if (lat && lng) { ]
location = new TMap.LatLng(lat, lng); }
} else { } else {
location = new TMap.LatLng( this.searchOptions = [];
this.dataForm.latitude,
this.dataForm.longitude
);
} }
// map.setCenter(location);
markers.updateGeometries([
{
id: "main", // 点标注数据数组
position: location,
},
]);
geocoder
.getAddress({ location: location }) // 将给定的坐标位置转换为地址
.then((result) => {
this.dataForm.address =
this.dataForm.address !== "" &&
this.dataForm.address !== null &&
(this.dataForm.longitude === "" || this.dataForm.longitude === null)
? this.dataForm.address
: result.result.address;
// 显示搜索到的地址
console.log(this.dataForm.address);
});
}, },
setMarker (lat, lng) { handleClickKey (index) {
markers.setGeometries([]); let selPosition = this.resultList[index]
markers.add([ let lonlat = selPosition.lonlat.split(" ")
{ map.setCenter(lonlat[1], lonlat[0]);
id: "4", map.setMarker(lonlat[1], lonlat[0]);
styleId: "marker", this.dataForm.latitude = lonlat[1];
position: new TMap.LatLng(lat, lng), this.dataForm.longitude = lonlat[0];
properties: { this.dataForm.address = selPosition.address + selPosition.name
title: "marker4",
},
},
]);
}, },
// 获取所属组织列表 // 获取所属组织列表
// getFormInfo() { // getFormInfo() {
@ -449,38 +395,67 @@ export default {
// }) // })
// .catch(() => {}); // .catch(() => {});
// }, // },
init () { async init () {
this.visible = true; this.visible = true;
let { latitude, longitude } = this.$store.state.user;
this.$refs["dataForm"].resetFields();
if (this.dataForm.id) {
await this.getInfo();
} else {
this.dataForm.latitude = latitude
this.dataForm.longitude = longitude
}
this.$nextTick(() => { this.$nextTick(() => {
this.$refs["dataForm"].resetFields(); // if (!map) {
if (this.dataForm.id) { this.initMap(this.dataForm.latitude, this.dataForm.longitude);
this.getInfo(); // } else {
} else { // map.setCenter(this.dataForm.latitude, this.dataForm.longitude);
this.initMap(); // map.setMarker(this.dataForm.latitude, this.dataForm.longitude);
} // }
}); })
}, },
// 获取信息 // 获取信息
getInfo () { async getInfo () {
this.$http
.get(`/epmetuser/icPointVaccinesInoculation/${this.dataForm.id}`) let url = `/epmetuser/icPointVaccinesInoculation/${this.dataForm.id}`
.then(({ data: res }) => { const { data, code, msg } = await requestGet(url)
if (res.code !== 0) { if (code === 0) {
return this.$message.error(res.msg); this.dataForm = {
} ...this.dataForm,
this.dataForm = { ...data,
...this.dataForm, };
...res.data, if (data.moStartTime !== "") {
}; this.morningTime = [data.moStartTime, data.moEndTime];
if (res.data.moStartTime !== "") { }
this.morningTime = [res.data.moStartTime, res.data.moEndTime]; if (data.afStartTime !== "") {
} this.afterTime = [data.afStartTime, data.afEndTime];
if (res.data.afStartTime !== "") { }
this.afterTime = [res.data.afStartTime, res.data.afEndTime]; } else {
} this.$message.error(msg)
this.initMap(); }
})
.catch(() => { }); // this.$http
// .get(`/epmetuser/icPointVaccinesInoculation/${this.dataForm.id}`)
// .then(({ data: res }) => {
// if (res.code !== 0) {
// return this.$message.error(res.msg);
// }
// this.dataForm = {
// ...this.dataForm,
// ...res.data,
// };
// if (res.data.moStartTime !== "") {
// this.morningTime = [res.data.moStartTime, res.data.moEndTime];
// }
// if (res.data.afStartTime !== "") {
// this.afterTime = [res.data.afStartTime, res.data.afEndTime];
// }
// })
// .catch(() => { });
}, },
// 表单提交 // 表单提交
dataFormSubmitHandle: debounce( dataFormSubmitHandle: debounce(
@ -525,6 +500,7 @@ export default {
type: "success", type: "success",
duration: 500, duration: 500,
onClose: () => { onClose: () => {
this.resetData()
this.visible = false; this.visible = false;
this.$emit("refreshDataList"); this.$emit("refreshDataList");
this.closeSubmit(); this.closeSubmit();
@ -573,4 +549,8 @@ export default {
left: 42px; left: 42px;
top: 10px; top: 10px;
} }
.div_map {
position: relative;
margin-top: 5px;
}
</style> </style>

163
src/views/modules/plugins/point/icpointvaccinesinoculation-detail.vue
View File

@ -52,7 +52,7 @@
<span class="info-title-2">地图位置：</span> <span class="info-title-2">地图位置：</span>
<div class="div_map"> <div class="div_map">
<div id="app_detail"></div> <div id="app_detail_ymjzd"></div>
</div> </div>
</div> </div>
@ -74,6 +74,7 @@
import { Loading } from 'element-ui' // 引入Loading服务 import { Loading } from 'element-ui' // 引入Loading服务
import { requestPost, requestGet } from '@/js/dai/request' import { requestPost, requestGet } from '@/js/dai/request'
import daiMap from "@/utils/dai-map";
var map; var map;
var search; var search;
@ -107,7 +108,7 @@ export default {
diaDestroy () { diaDestroy () {
if (map) { if (map) {
map.destroy() // map.destroy()
} }
}, },
closeSubmit () { closeSubmit () {
@ -121,9 +122,25 @@ export default {
this.dataForm.id = id this.dataForm.id = id
await this.getInfo(); await this.getInfo();
this.initLoading = true this.initLoading = true
let { latitude, longitude } = this.$store.state.user;
console.log('lat' + latitude + ',lon' + longitude)
if (this.dataForm.latitude && this.dataForm.longitude) {
latitude = this.dataForm.latitude
longitude = this.dataForm.longitude
}
if (!latitude || latitude == "" || latitude == "0") {
latitude = 39.9088810666821;
longitude = 116.39743841556731;
}
this.$nextTick(() => { this.$nextTick(() => {
this.initMap() // if (!map) {
this.initMap(latitude, longitude)
// } else {
// map.setCenter(latitude, longitude);
// map.setMarker(latitude, longitude);
// }
}) })
this.endLoading() this.endLoading()
@ -152,130 +169,26 @@ export default {
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义 // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
initMap () { initMap (latitude, longitude) {
// 定义地图中心点坐标
let { latitude, longitude } = this.$store.state.user;
console.log('lat' + latitude + ',lon' + longitude)
if (this.dataForm.latitude && this.dataForm.longitude) {
latitude = this.dataForm.latitude
longitude = this.dataForm.longitude
}
if (!latitude || latitude == "" || latitude == "0") {
latitude = 39.9088810666821;
longitude = 116.39743841556731;
}
var center = new window.TMap.LatLng(latitude, longitude)
// 定义map变量，调用 TMap.Map() 构造函数创建地图
map = new window.TMap.Map(document.getElementById("app_detail"), {
center: center, // 设置地图中心点坐标
zoom: 17.2, // 设置地图缩放级别
pitch: 43.5, // 设置俯仰角
rotation: 45, // 设置地图旋转角度
});
search = new window.TMap.service.Search({ pageSize: 10 });
// 新建一个地点搜索类
markers = new TMap.MultiMarker({
map: map,
geometries: [],
});
infoWindowList = Array(10);
geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
// 监听地图平移结束
map.on("panend", () => {
this.handleMoveCenter();
});
// this.handleMoveCenter()
this.convert();
},
handleMoveCenter () {
//修改地图中心点
const center = map.getCenter();
const lat = center.getLat();
const lng = center.getLng();
this.dataForm.latitude = lat;
this.dataForm.longitude = lng;
this.setMarker(lat, lng);
this.convert(lat, lng);
},
// 地图查询
handleSearchMap () {
infoWindowList.forEach((infoWindow) => {
infoWindow.close();
});
infoWindowList.length = 0;
markers.setGeometries([]);
// 在地图显示范围内以给定的关键字搜索地点
search
.searchRectangle({
keyword: this.dataForm.address,
bounds: map.getBounds(),
})
.then((result) => {
let { data } = result;
if (Array.isArray(data) && data.length > 0) {
const {
location: { lat, lng },
} = data[0];
map.setCenter(new TMap.LatLng(lat, lng));
this.setMarker(lat, lng);
this.dataForm.latitude = lat;
this.dataForm.longitude = lng;
this.convert();
} else {
this.$message.error("未检索到相关位置坐标");
}
});
},
convert (lat, lng) {
markers.setGeometries([]);
// var input = document.getElementById('location').value.split(',');
let location;
if (lat && lng) {
location = new TMap.LatLng(lat, lng);
} else {
location = new TMap.LatLng(
this.dataForm.latitude,
this.dataForm.longitude
);
}
// map.setCenter(location); map = new daiMap(
markers.updateGeometries([ document.getElementById("app_detail_ymjzd"),
{ latitude, longitude },
{ {
id: "main", // 点标注数据数组 zoom: 16.2, // 设置地图缩放级别
position: location, pitch: 43.5, // 设置俯仰角
}, rotation: 45, // 设置地图旋转角度
]); }
geocoder );
.getAddress({ location: location }) // 将给定的坐标位置转换为地址
.then((result) => { // // 监听地图平移结束
this.dataForm.address = // map.on("dragend", (e) => {
this.dataForm.address !== "" && // this.handleMoveCenter(e);
this.dataForm.address !== null && // });
(this.dataForm.longitude === "" || this.dataForm.longitude === null)
? this.dataForm.address map.setCenter(latitude, longitude);
: result.result.address; map.setMarker(latitude, longitude);
// 显示搜索到的地址
console.log(this.dataForm.address);
});
},
setMarker (lat, lng) {
markers.setGeometries([]);
markers.add([
{
id: "4",
styleId: "marker",
position: new TMap.LatLng(lat, lng),
properties: {
title: "marker4",
},
},
]);
}, },

5
src/views/modules/workSys/mapConfig.vue
View File

@ -633,8 +633,11 @@ const vueGis = {
gaodeMapLayer = new TileLayer({ gaodeMapLayer = new TileLayer({
title: "地图", title: "地图",
// source: new XYZ({
// url: "http://t4.tianditu.com/DataServer?T=vec_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}"
// }),
source: new XYZ({ source: new XYZ({
url: "http://t4.tianditu.com/DataServer?T=vec_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}" url: "http://api.tianditu.gov.cn/api?v=4.0&tk=c4dc987b442bd141a887d8d4a5d07926&x={x}&y={y}&l={z}"
}), }),
// source: new XYZ({ // source: new XYZ({
// //指定url瓦片 // //指定url瓦片

Write Preview
Loading…
Cancel
Save