Browse Source

管理平台地图

feature
jiangyy 3 years ago
parent
commit
d85228cc2a
  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

@ -147,13 +147,7 @@ import { Loading } from 'element-ui' // 引入Loading服务
import { requestPost } from '@/js/dai/request'
import daiMap from "@/utils/dai-map";
var map
var search
var markers
var infoWindowList
var geocoder //
let loading //
export default {

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

@ -38,7 +38,7 @@
<span class="info-title-2">地图位置</span>
<div class="div_map">
<div id="app_detail"></div>
<div id="app_detail_fwzz"></div>
</div>
</div>
@ -66,6 +66,7 @@ import { mapGetters } from "vuex";
import { requestPost } from "@/js/dai/request";
import { Loading } from 'element-ui' // Loading
import nextTick from "dai-js/tools/nextTick";
import daiMap from "@/utils/dai-map";
var map;
var search;
@ -114,7 +115,7 @@ export default {
diaDestroy () {
if (map) {
map.destroy()
// map.destroy()
}
},
async initForm () {
@ -123,20 +124,8 @@ export default {
await this.getInfo();
this.initLoading = true
console.log(this.fmData)
// await nextTick(200)
this.$nextTick(() => {
this.initMap()
})
this.endLoading()
},
// init
initMap () {
let { latitude, longitude } = this.$store.state.user;
console.log('lat' + latitude + ',lon' + longitude)
if (this.fmData.latitude && this.fmData.longitude) {
latitude = this.fmData.latitude
longitude = this.fmData.longitude
@ -145,91 +134,39 @@ export default {
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(); //
this.$nextTick(() => {
// if (!map) {
this.initMap(latitude, longitude)
// } else {
// map.setCenter(latitude, longitude);
// map.setMarker(latitude, longitude);
// }
})
this.endLoading()
//
map.on("panend", (e) => {
this.handleMoveCenter(e);
});
this.handleMoveCenter();
},
// init
initMap (latitude, longitude) {
setMarker (lat, lng) {
markers.setGeometries([]);
markers.add([
map = new daiMap(
document.getElementById("app_detail_fwzz"),
{ latitude, longitude },
{
id: "4",
styleId: "marker",
position: new TMap.LatLng(lat, lng),
properties: {
title: "marker4",
},
},
]);
},
zoom: 16.2, //
pitch: 43.5, //
rotation: 45, //
}
);
handleSearchMap () {
infoWindowList.forEach((infoWindow) => {
infoWindow.close();
});
infoWindowList.length = 0;
markers.setGeometries([]);
//
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("未检索到相关位置坐标");
}
});
},
//
// map.on("dragend", (e) => {
// this.handleMoveCenter(e);
// });
map.setCenter(latitude, longitude);
map.setMarker(latitude, longitude);
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 () {
@ -247,10 +184,7 @@ export default {
serviceTypeArr: data.serviceType.split(","),
};
await nextTick(800);
if (map) {
map.setCenter(new TMap.LatLng(data.latitude, data.longitude));
}
} else {
this.$message.error(msg);
}

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

@ -1,191 +1,158 @@
<template>
<div>
<div class="dialog-h-content scroll-h">
<el-form
ref="ref_form"
:inline="true"
:model="fmData"
:rules="dataRule"
:disabled="formType === 'watch'"
class="form"
>
<el-form-item
label="服务类别 "
prop="serviceTypeArr"
label-width="150px"
style="display: block"
>
<el-select
v-if="formType == 'add' || formType == 'edit'"
v-model="fmData.serviceTypeArr"
placeholder="请选择"
clearable
multiple
>
<el-option
v-for="item in categoryOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
<el-form ref="ref_form"
:inline="true"
:model="fmData"
:rules="dataRule"
:disabled="formType === 'watch'"
class="form">
<el-form-item label="服务类别 "
prop="serviceTypeArr"
label-width="150px"
style="display: block">
<el-select v-if="formType == 'add' || formType == 'edit'"
v-model="fmData.serviceTypeArr"
placeholder="请选择"
clearable
multiple>
<el-option v-for="item in categoryOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</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
label="服务组织名称"
prop="orgName"
label-width="150px"
style="display: block"
>
<el-input
v-if="formType == 'add' || formType == 'edit'"
class="item_width_1"
maxlength="100"
show-word-limit
placeholder="请输入项目名称"
v-model="fmData.orgName"
>
<el-form-item label="服务组织名称"
prop="orgName"
label-width="150px"
style="display: block">
<el-input v-if="formType == 'add' || formType == 'edit'"
class="item_width_1"
maxlength="100"
show-word-limit
placeholder="请输入项目名称"
v-model="fmData.orgName">
</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
label="组织描述"
prop="orgDescribe"
label-width="150px"
style="display: block"
>
<el-input
v-if="formType == 'add' || formType == 'edit'"
class="item_width_1"
type="textarea"
maxlength="1000"
show-word-limit
:rows="3"
placeholder="请输入服务内容,不超过1000字"
v-model="fmData.orgDescribe"
></el-input>
<div style="width: 610px" v-else>
<el-form-item label="组织描述"
prop="orgDescribe"
label-width="150px"
style="display: block">
<el-input v-if="formType == 'add' || formType == 'edit'"
class="item_width_1"
type="textarea"
maxlength="1000"
show-word-limit
:rows="3"
placeholder="请输入服务内容,不超过1000字"
v-model="fmData.orgDescribe"></el-input>
<div style="width: 610px"
v-else>
{{ fmData.orgDescribe || "--" }}
</div>
</el-form-item>
<el-form-item
label="负责人姓名"
prop="principalName"
label-width="150px"
style="display: block"
>
<el-input
v-if="formType == 'add' || formType == 'edit'"
class="item_width_1"
maxlength="100"
show-word-limit
placeholder="请输入负责人姓名"
v-model="fmData.principalName"
></el-input>
<div style="width: 610px" v-else>
<el-form-item label="负责人姓名"
prop="principalName"
label-width="150px"
style="display: block">
<el-input v-if="formType == 'add' || formType == 'edit'"
class="item_width_1"
maxlength="100"
show-word-limit
placeholder="请输入负责人姓名"
v-model="fmData.principalName"></el-input>
<div style="width: 610px"
v-else>
{{ fmData.principalName || "--" }}
</div>
</el-form-item>
<el-form-item
label="联系方式"
prop="principalMobile"
label-width="150px"
style="display: block"
>
<el-input
v-if="formType == 'add' || formType == 'edit'"
class="item_width_1"
maxlength="11"
show-word-limit
placeholder="请输入联系方式"
v-model="fmData.principalMobile"
></el-input>
<div style="width: 610px" v-else>
<el-form-item label="联系方式"
prop="principalMobile"
label-width="150px"
style="display: block">
<el-input v-if="formType == 'add' || formType == 'edit'"
class="item_width_1"
maxlength="11"
show-word-limit
placeholder="请输入联系方式"
v-model="fmData.principalMobile"></el-input>
<div style="width: 610px"
v-else>
{{ fmData.principalMobile || "--" }}
</div>
</el-form-item>
<el-form-item
label="位置坐标"
prop="longitude"
label-width="150px"
style="display: block"
>
<el-form-item label="地图位置"
prop="longitude"
label-width="150px"
style="display: block">
<div style="width: 500px">
<el-input
class="item_width_4"
maxlength="100"
style="width: 430px"
show-word-limit
placeholder="请输入所在地址"
v-model="fmData.address"
>
</el-input>
<el-button
style="margin-left: 10px"
type="default"
size="small"
@click="handleSearchMap"
>查询</el-button
>
<div id="app" 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>
<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_fwzz"
class="div_map"></div>
</div>
</el-form-item>
<el-form-item
label="备注"
prop="remark"
label-width="150px"
style="display: block"
>
<el-input
v-if="formType == 'add' || formType == 'edit'"
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 label="详细地址"
prop="address"
label-width="150px"
style="display: block">
<el-input class="item_width_1"
v-model="fmData.address">
</el-input>
</el-form-item>
<el-form-item label="备注"
prop="remark"
label-width="150px"
style="display: block">
<el-input v-if="formType == 'add' || formType == 'edit'"
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>
</div>
<div class="div_btn resi-btns">
<el-button size="small" @click="handleCancle"> </el-button>
<el-button
v-if="formType != 'watch'"
type="primary"
size="small"
:disabled="btnDisable"
@click="handleComfirm"
> </el-button
>
<el-button size="small"
@click="handleCancle"> </el-button>
<el-button v-if="formType != 'watch'"
type="primary"
size="small"
:disabled="btnDisable"
@click="handleComfirm"> </el-button>
</div>
</div>
</template>
@ -195,6 +162,7 @@ import { mapGetters } from "vuex";
import { requestPost } from "@/js/dai/request";
import formVltHelper from "dai-js/tools/formVltHelper";
import nextTick from "dai-js/tools/nextTick";
import daiMap from "@/utils/dai-map";
var map;
var search;
@ -214,8 +182,13 @@ export default {
},
},
data() {
data () {
return {
searchOptions: [],
searchValue: '',
resultList: [],
loading: false,
uploadUrl: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadqrcodeV2",
customerId: localStorage.getItem("customerId"),
@ -239,7 +212,7 @@ export default {
},
components: {},
computed: {
dataRule() {
dataRule () {
return {
serviceTypeArr: [
{ required: true, message: "服务类别不能为空", trigger: "blur" },
@ -258,112 +231,125 @@ export default {
},
watch: {},
async mounted() {
async mounted () {
this.initForm();
},
methods: {
async initForm() {
async initForm () {
let { latitude, longitude } = this.$store.state.user;
this.initMap();
this.getCategoryOpitons();
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
initMap() {
//
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, //
});
initMap (latitude, longitude) {
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_fwzz"),
{ latitude, longitude },
{
zoom: 16.2, //
pitch: 43.5, //
rotation: 45, //
}
);
//
map.on("panend", (e) => {
map.on("dragend", (e) => {
this.handleMoveCenter(e);
});
this.handleMoveCenter();
},
setMarker(lat, lng) {
markers.setGeometries([]);
markers.add([
{
id: "4",
styleId: "marker",
position: new TMap.LatLng(lat, lng),
properties: {
title: "marker4",
},
},
]);
},
map.setCenter(latitude, longitude);
map.setMarker(latitude, longitude);
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 = center.getLat();
const lng = center.getLng();
const { lat, lng } = map.getCenter();
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;
});
map.setMarker(lat, lng);
let { msg, data } = await map.getAddress(lat, lng);
if (msg == "success") {
this.fmData.address = data.address
this.searchValue = data.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 params = {
@ -378,16 +364,12 @@ export default {
serviceTypeArr: data.serviceType.split(","),
};
await nextTick(800);
if (map) {
map.setCenter(new TMap.LatLng(data.latitude, data.longitude));
}
} else {
this.$message.error(msg);
}
},
async getCategoryOpitons() {
async getCategoryOpitons () {
const url = "/sys/dict/data/dictlist";
const params = {
dictType: "ic_service_type",
@ -400,11 +382,11 @@ export default {
}
},
watchImg(src) {
watchImg (src) {
window.open(src);
},
async handleComfirm() {
async handleComfirm () {
this.btnDisable = true;
setTimeout(() => {
this.btnDisable = false;
@ -419,7 +401,7 @@ export default {
});
},
async submit() {
async submit () {
let url = "";
let params = {
...this.fmData,
@ -439,6 +421,7 @@ export default {
type: "success",
message: "操作成功",
});
this.resetData()
this.$emit("afterEdit");
this.btnDisable = false;
} else {
@ -447,7 +430,8 @@ export default {
}
},
handleCancle() {
handleCancle () {
this.resetData()
this.$emit("close");
},
},

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

@ -5,7 +5,7 @@
:rules="dataRule"
ref="dataForm"
@keyup.enter.native="dataFormSubmitHandle()"
label-width="120px">
label-width="150px">
<el-form-item label="所属组织名称"
prop="orgId">
<el-select v-model="dataForm.orgId"
@ -41,60 +41,37 @@
:change="check_num()"
:disabled="dialogTitle == '查看'"></el-input>
</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="检测点地址"
prop="address">
<el-input v-model="dataForm.address"
placeholder="例:青岛市时代国际广场"
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>
<div class="submit">
@ -108,6 +85,8 @@
<script>
import debounce from "lodash/debounce";
import daiMap from "@/utils/dai-map";
import { requestPost, requestGet } from "@/js/dai/request";
var map;
var search;
var markers;
@ -116,6 +95,10 @@ var infoWindowList;
export default {
data () {
return {
searchOptions: [],
searchValue: '',
resultList: [],
loading: false,
dataForm: {
id: "",
customerId: "",
@ -213,7 +196,13 @@ export default {
},
},
methods: {
resetData () {
this.searchValue = ''
this.searchOptions = []
this.resultList = []
},
closeSubmit () {
this.resetData()
this.$emit("closeDialog");
},
orgChangeHandle (val) {
@ -225,132 +214,84 @@ export default {
}
},
// init
initMap () {
//
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);
initMap (latitude, longitude) {
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", () => {
this.handleMoveCenter();
map.on("dragend", (e) => {
this.handleMoveCenter(e);
});
// this.handleMoveCenter()
this.convert();
map.setCenter(latitude, longitude);
map.setMarker(latitude, longitude);
},
handleMoveCenter () {
async handleMoveCenter () {
//
const center = map.getCenter();
const lat = center.getLat();
const lng = center.getLng();
const { lat, lng } = map.getCenter();
this.dataForm.latitude = lat;
this.dataForm.longitude = lng;
this.setMarker(lat, lng);
this.convert(lat, lng);
map.setMarker(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));
this.setMarker(lat, lng);
this.dataForm.latitude = lat;
this.dataForm.longitude = lng;
this.convert();
} else {
this.$message.error("未检索到相关位置坐标");
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}` };
});
}
});
},
convert (lat, lng) {
markers.setGeometries([]);
// var input = document.getElementById('location').value.split(',');
let location;
if (lat && lng) {
location = new TMap.LatLng(lat, lng);
} else {
this.searchOptions = [
{
value: '0',
label: '未检索到结果'
}
]
}
} else {
location = new TMap.LatLng(
this.dataForm.latitude,
this.dataForm.longitude
);
this.searchOptions = [];
}
// 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) {
markers.setGeometries([]);
markers.add([
{
id: "4",
styleId: "marker",
position: new TMap.LatLng(lat, lng),
properties: {
title: "marker4",
},
},
]);
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.dataForm.latitude = lonlat[1];
this.dataForm.longitude = lonlat[0];
this.dataForm.address = selPosition.address + selPosition.name
},
//
getFormInfo () {
@ -364,33 +305,54 @@ export default {
})
.catch(() => { });
},
init () {
this.$nextTick(() => {
this.$refs["dataForm"].resetFields();
if (this.dataForm.id) {
this.getInfo();
} else {
async init () {
let { latitude, longitude } = this.$store.state.user;
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 () {
this.$http
.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,
};
this.initMap();
})
.catch(() => { });
async getInfo () {
let url = `/epmetuser/icPointNucleicMonitoring/${this.dataForm.id}`
const { data, code, msg } = await requestGet(url)
if (code === 0) {
this.dataForm = {
...this.dataForm,
...data,
};
} else {
this.$message.error(msg)
}
// this.$http
// .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(
@ -412,6 +374,7 @@ export default {
type: "success",
duration: 500,
onClose: () => {
this.$emit("refreshDataList");
this.closeSubmit();
},
@ -447,4 +410,9 @@ export default {
.form-class .el-textarea {
width: 75% !important;
}
.div_map {
position: relative;
margin-top: 5px;
}
</style>

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

@ -34,7 +34,7 @@
<span class="info-title-2">地图位置</span>
<div class="div_map">
<div id="app_detail"></div>
<div id="app_detail_hsjcd"></div>
</div>
</div>
@ -55,6 +55,7 @@
<script>
import { Loading } from 'element-ui' // Loading
import { requestPost, requestGet } from '@/js/dai/request'
import daiMap from "@/utils/dai-map";
var map;
var search;
@ -85,7 +86,7 @@ export default {
methods: {
diaDestroy () {
if (map) {
map.destroy()
// map.destroy()
}
},
closeSubmit () {
@ -100,9 +101,25 @@ export default {
this.dataForm.id = id
await this.getInfo();
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.initMap()
// if (!map) {
this.initMap(latitude, longitude)
// } else {
// map.setCenter(latitude, longitude);
// map.setMarker(latitude, longitude);
// }
})
this.endLoading()
@ -121,132 +138,27 @@ export default {
this.$message.error(msg)
}
},
// init
initMap () {
//
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
);
}
initMap (latitude, longitude) {
// map.setCenter(location);
markers.updateGeometries([
map = new daiMap(
document.getElementById("app_detail_hsjcd"),
{ latitude, longitude },
{
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);
});
},
zoom: 16.2, //
pitch: 43.5, //
rotation: 45, //
}
);
// //
// map.on("dragend", (e) => {
// this.handleMoveCenter(e);
// });
map.setCenter(latitude, longitude);
map.setMarker(latitude, longitude);
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

@ -5,7 +5,7 @@
:rules="dataRule"
ref="dataForm"
@keyup.enter.native="dataFormSubmitHandle()"
label-width="130px">
label-width="150px">
<!--<el-form-item label="所属组织名称" prop="orgName">-->
<!--<el-select v-model="dataForm.orgName" placeholder="所属组织名称">-->
<!--<el-option-->
@ -86,60 +86,37 @@
:disabled="dialogTitle == '查看'"
placeholder="咨询电话"></el-input>
</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="接种点地址"
prop="address">
<el-input v-model="dataForm.address"
placeholder="例:青岛市时代国际广场"
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>
<div class="submit">
@ -153,6 +130,8 @@
<script>
import debounce from "lodash/debounce";
import daiMap from "@/utils/dai-map";
import { requestPost, requestGet } from "@/js/dai/request";
var map;
var search;
var markers;
@ -161,6 +140,10 @@ var infoWindowList;
export default {
data () {
return {
searchOptions: [],
searchValue: '',
resultList: [],
loading: false,
visible: false,
dataForm: {
id: "",
@ -312,130 +295,93 @@ export default {
}
},
closeSubmit () {
this.resetData()
this.$emit("closeDialog");
},
resetData () {
this.searchValue = ''
this.searchOptions = []
this.resultList = []
},
// init
initMap () {
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);
initMap (latitude, longitude) {
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", () => {
this.handleMoveCenter();
map.on("dragend", (e) => {
this.handleMoveCenter(e);
});
// this.handleMoveCenter()
this.convert();
map.setCenter(latitude, longitude);
map.setMarker(latitude, longitude);
},
handleMoveCenter () {
async handleMoveCenter () {
//
const center = map.getCenter();
const lat = center.getLat();
const lng = center.getLng();
const { lat, lng } = map.getCenter();
this.dataForm.latitude = lat;
this.dataForm.longitude = lng;
this.setMarker(lat, lng);
this.convert(lat, lng);
map.setMarker(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));
this.setMarker(lat, lng);
this.dataForm.latitude = lat;
this.dataForm.longitude = lng;
this.convert();
} else {
this.$message.error("未检索到相关位置坐标");
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}` };
});
}
});
},
convert (lat, lng) {
markers.setGeometries([]);
// var input = document.getElementById('location').value.split(',');
let location;
if (lat && lng) {
location = new TMap.LatLng(lat, lng);
} else {
this.searchOptions = [
{
value: '0',
label: '未检索到结果'
}
]
}
} else {
location = new TMap.LatLng(
this.dataForm.latitude,
this.dataForm.longitude
);
this.searchOptions = [];
}
// 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) {
markers.setGeometries([]);
markers.add([
{
id: "4",
styleId: "marker",
position: new TMap.LatLng(lat, lng),
properties: {
title: "marker4",
},
},
]);
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.dataForm.latitude = lonlat[1];
this.dataForm.longitude = lonlat[0];
this.dataForm.address = selPosition.address + selPosition.name
},
//
// getFormInfo() {
@ -449,38 +395,67 @@ export default {
// })
// .catch(() => {});
// },
init () {
async init () {
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.$refs["dataForm"].resetFields();
if (this.dataForm.id) {
this.getInfo();
} else {
this.initMap();
}
});
// 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 () {
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];
}
this.initMap();
})
.catch(() => { });
async getInfo () {
let url = `/epmetuser/icPointVaccinesInoculation/${this.dataForm.id}`
const { data, code, msg } = await requestGet(url)
if (code === 0) {
this.dataForm = {
...this.dataForm,
...data,
};
if (data.moStartTime !== "") {
this.morningTime = [data.moStartTime, data.moEndTime];
}
if (data.afStartTime !== "") {
this.afterTime = [data.afStartTime, data.afEndTime];
}
} else {
this.$message.error(msg)
}
// 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(
@ -525,6 +500,7 @@ export default {
type: "success",
duration: 500,
onClose: () => {
this.resetData()
this.visible = false;
this.$emit("refreshDataList");
this.closeSubmit();
@ -573,4 +549,8 @@ export default {
left: 42px;
top: 10px;
}
.div_map {
position: relative;
margin-top: 5px;
}
</style>

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

@ -52,7 +52,7 @@
<span class="info-title-2">地图位置</span>
<div class="div_map">
<div id="app_detail"></div>
<div id="app_detail_ymjzd"></div>
</div>
</div>
@ -74,6 +74,7 @@
import { Loading } from 'element-ui' // Loading
import { requestPost, requestGet } from '@/js/dai/request'
import daiMap from "@/utils/dai-map";
var map;
var search;
@ -107,7 +108,7 @@ export default {
diaDestroy () {
if (map) {
map.destroy()
// map.destroy()
}
},
closeSubmit () {
@ -121,9 +122,25 @@ export default {
this.dataForm.id = id
await this.getInfo();
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.initMap()
// if (!map) {
this.initMap(latitude, longitude)
// } else {
// map.setCenter(latitude, longitude);
// map.setMarker(latitude, longitude);
// }
})
this.endLoading()
@ -152,130 +169,26 @@ export default {
// init
initMap () {
//
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
);
}
initMap (latitude, longitude) {
// map.setCenter(location);
markers.updateGeometries([
map = new daiMap(
document.getElementById("app_detail_ymjzd"),
{ latitude, longitude },
{
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);
});
},
zoom: 16.2, //
pitch: 43.5, //
rotation: 45, //
}
);
// //
// map.on("dragend", (e) => {
// this.handleMoveCenter(e);
// });
map.setCenter(latitude, longitude);
map.setMarker(latitude, longitude);
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

@ -633,8 +633,11 @@ const vueGis = {
gaodeMapLayer = new TileLayer({
title: "地图",
// source: new XYZ({
// url: "http://t4.tianditu.com/DataServer?T=vec_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}"
// }),
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({
// //url

Loading…
Cancel
Save