|
@ -1,283 +1,232 @@ |
|
|
<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="dataForm" |
|
|
:model="dataForm" |
|
|
:rules="dataRule" |
|
|
:rules="dataRule" |
|
|
:disabled="formType === 'detail'" |
|
|
:disabled="formType === 'detail'" |
|
|
class="form"> |
|
|
class="form" |
|
|
<el-form-item label="中心名称 " |
|
|
> |
|
|
prop="centerName" |
|
|
<el-form-item |
|
|
label-width="150px" |
|
|
label="中心名称 " |
|
|
style="display: block"> |
|
|
prop="centerName" |
|
|
<el-input class="item_width_1" |
|
|
label-width="150px" |
|
|
maxlength="50" |
|
|
style="display: block" |
|
|
show-word-limit |
|
|
> |
|
|
placeholder="请输入中心名称 " |
|
|
<el-input |
|
|
v-model="dataForm.centerName"> |
|
|
class="item_width_1" |
|
|
|
|
|
maxlength="50" |
|
|
|
|
|
show-word-limit |
|
|
|
|
|
placeholder="请输入中心名称 " |
|
|
|
|
|
v-model="dataForm.centerName" |
|
|
|
|
|
> |
|
|
|
|
|
</el-input> |
|
|
</el-input> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
|
|
|
|
|
|
<el-form-item |
|
|
<el-form-item label="办公电话" |
|
|
label="办公电话" |
|
|
prop="workPhone" |
|
|
prop="workPhone" |
|
|
label-width="150px" |
|
|
label-width="150px" |
|
|
style="display: block"> |
|
|
style="display: block" |
|
|
<el-input class="item_width_1" |
|
|
> |
|
|
maxlength="50" |
|
|
<el-input |
|
|
show-word-limit |
|
|
class="item_width_1" |
|
|
placeholder="请输入办公电话" |
|
|
maxlength="50" |
|
|
v-model="dataForm.workPhone"> |
|
|
show-word-limit |
|
|
|
|
|
placeholder="请输入办公电话" |
|
|
|
|
|
v-model="dataForm.workPhone" |
|
|
|
|
|
> |
|
|
|
|
|
</el-input> |
|
|
</el-input> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
|
|
|
|
|
|
<el-form-item |
|
|
<el-form-item label="社区地址" |
|
|
label="社区地址" |
|
|
prop="address" |
|
|
prop="address" |
|
|
label-width="150px" |
|
|
label-width="150px" |
|
|
style="display: block"> |
|
|
style="display: block" |
|
|
<el-input class="item_width_1" |
|
|
> |
|
|
maxlength="50" |
|
|
<el-input |
|
|
show-word-limit |
|
|
class="item_width_1" |
|
|
placeholder="请输入社区地址 " |
|
|
maxlength="50" |
|
|
v-model="dataForm.address"> |
|
|
show-word-limit |
|
|
|
|
|
placeholder="请输入社区地址 " |
|
|
|
|
|
v-model="dataForm.address" |
|
|
|
|
|
> |
|
|
|
|
|
</el-input> |
|
|
</el-input> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
|
|
|
|
|
|
<el-form-item |
|
|
<el-form-item label="办公时间" |
|
|
label="办公时间" |
|
|
prop="amStartTime" |
|
|
prop="amStartTime" |
|
|
label-width="150px" |
|
|
label-width="150px" |
|
|
style="display: block"> |
|
|
style="display: block" |
|
|
|
|
|
> |
|
|
|
|
|
<div class="row"> |
|
|
<div class="row"> |
|
|
<span>上午</span> |
|
|
<span>上午</span> |
|
|
<el-time-select |
|
|
<el-time-select style="margin-left: 10px" |
|
|
style="margin-left: 10px" |
|
|
v-model="dataForm.amStartTime" |
|
|
v-model="dataForm.amStartTime" |
|
|
:picker-options="{ |
|
|
:picker-options="{ |
|
|
|
|
|
start: '00:00', |
|
|
start: '00:00', |
|
|
step: '00:30', |
|
|
step: '00:30', |
|
|
end: '12:00', |
|
|
end: '12:00', |
|
|
}" |
|
|
}" |
|
|
placeholder="开始时间" |
|
|
placeholder="开始时间"> |
|
|
> |
|
|
|
|
|
</el-time-select> |
|
|
</el-time-select> |
|
|
<span style="margin: 0 5px">至</span> |
|
|
<span style="margin: 0 5px">至</span> |
|
|
<el-time-select |
|
|
<el-time-select v-model="dataForm.amEndTime" |
|
|
v-model="dataForm.amEndTime" |
|
|
:picker-options="{ |
|
|
:picker-options="{ |
|
|
|
|
|
start: '00:00', |
|
|
start: '00:00', |
|
|
step: '00:30', |
|
|
step: '00:30', |
|
|
end: '12:00', |
|
|
end: '12:00', |
|
|
minTime: dataForm.amStartTime, |
|
|
minTime: dataForm.amStartTime, |
|
|
}" |
|
|
}" |
|
|
placeholder="结束时间" |
|
|
placeholder="结束时间"> |
|
|
> |
|
|
|
|
|
</el-time-select> |
|
|
</el-time-select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="row" style="margin-top: 5px"> |
|
|
<div class="row" |
|
|
|
|
|
style="margin-top: 5px"> |
|
|
<span>下午</span> |
|
|
<span>下午</span> |
|
|
<el-time-select |
|
|
<el-time-select style="margin-left: 10px" |
|
|
style="margin-left: 10px" |
|
|
v-model="dataForm.pmStartTime" |
|
|
v-model="dataForm.pmStartTime" |
|
|
:picker-options="{ |
|
|
:picker-options="{ |
|
|
|
|
|
start: '12:00', |
|
|
start: '12:00', |
|
|
step: '00:30', |
|
|
step: '00:30', |
|
|
end: '24:00', |
|
|
end: '24:00', |
|
|
}" |
|
|
}" |
|
|
placeholder="开始时间" |
|
|
placeholder="开始时间"> |
|
|
> |
|
|
|
|
|
</el-time-select> |
|
|
</el-time-select> |
|
|
<span style="margin: 0 5px">至</span> |
|
|
<span style="margin: 0 5px">至</span> |
|
|
<el-time-select |
|
|
<el-time-select v-model="dataForm.pmEndTime" |
|
|
v-model="dataForm.pmEndTime" |
|
|
:picker-options="{ |
|
|
:picker-options="{ |
|
|
|
|
|
start: '12:00', |
|
|
start: '12:00', |
|
|
step: '00:30', |
|
|
step: '00:30', |
|
|
end: '24:00', |
|
|
end: '24:00', |
|
|
minTime: dataForm.pmStartTime, |
|
|
minTime: dataForm.pmStartTime, |
|
|
}" |
|
|
}" |
|
|
placeholder="结束时间" |
|
|
placeholder="结束时间"> |
|
|
> |
|
|
|
|
|
</el-time-select> |
|
|
</el-time-select> |
|
|
</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="50" |
|
|
style="width: 500px" |
|
|
placeholder="请输入关键字" |
|
|
remote |
|
|
v-model="dataForm.locationAddress" |
|
|
:reserve-keyword="true" |
|
|
> |
|
|
placeholder="请输入关键词" |
|
|
</el-input> |
|
|
:remote-method="remoteMethod" |
|
|
<el-button |
|
|
:loading="loading"> |
|
|
style="margin-left: 10px" |
|
|
<el-option v-for="(item,index) in searchOptions" |
|
|
type="primary" |
|
|
@click.native="handleClickKey(index)" |
|
|
size="small" |
|
|
:key="item.value" |
|
|
@click="handleSearchMap" |
|
|
:label="item.label" |
|
|
>查询</el-button |
|
|
:value="item.value"> |
|
|
> |
|
|
</el-option> |
|
|
<div id="app" class="div_map"></div> |
|
|
</el-select> |
|
|
<div style="margin-top: 10px" v-show="false"> |
|
|
<div id="app_dqfwzx" |
|
|
<span>经度</span> |
|
|
class="div_map"></div> |
|
|
<el-input |
|
|
|
|
|
class="item_width_3" |
|
|
|
|
|
maxlength="50" |
|
|
|
|
|
placeholder="请输入经度" |
|
|
|
|
|
v-model="dataForm.longitude" |
|
|
|
|
|
> |
|
|
|
|
|
</el-input> |
|
|
|
|
|
<span style="margin-left: 20px">纬度</span> |
|
|
|
|
|
<el-input |
|
|
|
|
|
class="item_width_3" |
|
|
|
|
|
maxlength="50" |
|
|
|
|
|
placeholder="请输入纬度" |
|
|
|
|
|
v-model="dataForm.latitude" |
|
|
|
|
|
> |
|
|
|
|
|
</el-input> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
|
|
|
<el-form-item label="详细地址 " |
|
|
|
|
|
prop="address" |
|
|
|
|
|
label-width="150px" |
|
|
|
|
|
style="display: block"> |
|
|
|
|
|
<el-input class="item_width_1" |
|
|
|
|
|
maxlength="50" |
|
|
|
|
|
show-word-limit |
|
|
|
|
|
placeholder="请输入位置 " |
|
|
|
|
|
v-model="formData.address"> |
|
|
|
|
|
</el-input> |
|
|
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
|
<el-form-item |
|
|
<el-form-item label="可预约事项" |
|
|
label="可预约事项" |
|
|
prop="matterList" |
|
|
prop="matterList" |
|
|
label-width="150px" |
|
|
label-width="150px" |
|
|
style="display: block"> |
|
|
style="display: block" |
|
|
|
|
|
> |
|
|
|
|
|
<div class="m-staffs"> |
|
|
<div class="m-staffs"> |
|
|
<div |
|
|
<div class="item" |
|
|
class="item" |
|
|
:key="'staff' + index" |
|
|
:key="'staff' + index" |
|
|
v-for="(item, index) in dataForm.matterList"> |
|
|
v-for="(item, index) in dataForm.matterList" |
|
|
|
|
|
> |
|
|
|
|
|
<div class="item-info"> |
|
|
<div class="item-info"> |
|
|
<el-input |
|
|
<el-input class="item_width_1" |
|
|
class="item_width_1" |
|
|
style="width: 150px" |
|
|
style="width: 150px" |
|
|
maxlength="50" |
|
|
maxlength="50" |
|
|
show-word-limit |
|
|
show-word-limit |
|
|
placeholder="事项名" |
|
|
placeholder="事项名" |
|
|
v-model="item.matterName" |
|
|
v-model="item.matterName" |
|
|
:disabled="item.matterId != undefined" /> |
|
|
:disabled="item.matterId != undefined" |
|
|
<el-upload :headers="$getElUploadHeaders()" |
|
|
/> |
|
|
:disabled="item.matterId != undefined" |
|
|
<el-upload :headers="$getElUploadHeaders()" |
|
|
class="avatar-uploader" |
|
|
:disabled="item.matterId != undefined" |
|
|
:action="uploadUlr" |
|
|
class="avatar-uploader" |
|
|
:data="{ customerId: customerId }" |
|
|
:action="uploadUlr" |
|
|
:show-file-list="false" |
|
|
:data="{ customerId: customerId }" |
|
|
:on-success=" |
|
|
:show-file-list="false" |
|
|
|
|
|
:on-success=" |
|
|
|
|
|
(response, file, fileList) => |
|
|
(response, file, fileList) => |
|
|
handleImgSuccess(index, response, file, fileList) |
|
|
handleImgSuccess(index, response, file, fileList) |
|
|
" |
|
|
" |
|
|
:before-upload="beforeImgUpload" |
|
|
:before-upload="beforeImgUpload"> |
|
|
> |
|
|
<img v-if="item.matterImg" |
|
|
<img |
|
|
:src="item.matterImg" |
|
|
v-if="item.matterImg" |
|
|
style="width: 36px; height: 36px" |
|
|
:src="item.matterImg" |
|
|
class="function-icon" /> |
|
|
style="width: 36px; height: 36px" |
|
|
<i v-else |
|
|
class="function-icon" |
|
|
class="el-icon-plus avatar-uploader-icon"></i> |
|
|
/> |
|
|
|
|
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i> |
|
|
|
|
|
</el-upload> |
|
|
</el-upload> |
|
|
|
|
|
|
|
|
<div class="hint">(事项封面,图片小于1M)</div> |
|
|
<div class="hint">(事项封面,图片小于1M)</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="item-pic"> |
|
|
<div class="item-pic"> |
|
|
<el-select |
|
|
<el-select style="width: 150px; margin-left: 0" |
|
|
style="width: 150px; margin-left: 0" |
|
|
v-model="item.appointmentType" |
|
|
v-model="item.appointmentType" |
|
|
filterable |
|
|
filterable |
|
|
placeholder="预约类型" |
|
|
placeholder="预约类型" |
|
|
:disabled="item.matterId != undefined"> |
|
|
:disabled="item.matterId != undefined" |
|
|
<el-option v-for="item in appointmentTypeOptions" |
|
|
> |
|
|
:key="item.value" |
|
|
<el-option |
|
|
:label="item.label" |
|
|
v-for="item in appointmentTypeOptions" |
|
|
:value="item.value"> |
|
|
:key="item.value" |
|
|
|
|
|
:label="item.label" |
|
|
|
|
|
:value="item.value" |
|
|
|
|
|
> |
|
|
|
|
|
</el-option> |
|
|
</el-option> |
|
|
</el-select> |
|
|
</el-select> |
|
|
|
|
|
|
|
|
<el-time-select |
|
|
<el-time-select style="width: 120px; margin-left: 20px" |
|
|
style="width: 120px; margin-left: 20px" |
|
|
v-model="item.startTime" |
|
|
v-model="item.startTime" |
|
|
:picker-options="{ |
|
|
:picker-options="{ |
|
|
|
|
|
start: '00:00', |
|
|
start: '00:00', |
|
|
step: '00:30', |
|
|
step: '00:30', |
|
|
end: '24:00', |
|
|
end: '24:00', |
|
|
}" |
|
|
}" |
|
|
placeholder="开始时间" |
|
|
placeholder="开始时间" |
|
|
:disabled="item.matterId != undefined" |
|
|
:disabled="item.matterId != undefined"> |
|
|
> |
|
|
|
|
|
</el-time-select> |
|
|
</el-time-select> |
|
|
<span style="margin: 0 5px">至</span> |
|
|
<span style="margin: 0 5px">至</span> |
|
|
<el-time-select |
|
|
<el-time-select style="width: 120px" |
|
|
style="width: 120px" |
|
|
v-model="item.endTime" |
|
|
v-model="item.endTime" |
|
|
:picker-options="{ |
|
|
:picker-options="{ |
|
|
|
|
|
start: '00:00', |
|
|
start: '00:00', |
|
|
step: '00:30', |
|
|
step: '00:30', |
|
|
end: '24:00', |
|
|
end: '24:00', |
|
|
minTime: item.startTime, |
|
|
minTime: item.startTime, |
|
|
}" |
|
|
}" |
|
|
placeholder="结束时间" |
|
|
placeholder="结束时间" |
|
|
:disabled="item.matterId != undefined" |
|
|
:disabled="item.matterId != undefined"> |
|
|
> |
|
|
|
|
|
</el-time-select> |
|
|
</el-time-select> |
|
|
<el-button |
|
|
<el-button style="margin-left: 20px" |
|
|
style="margin-left: 20px" |
|
|
size="small" |
|
|
size="small" |
|
|
@click="handleDelStaff(index)">删除</el-button> |
|
|
@click="handleDelStaff(index)" |
|
|
|
|
|
>删除</el-button |
|
|
|
|
|
> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="item-add"> |
|
|
<div class="item-add"> |
|
|
<el-button size="small" type="warning" @click="handleAddStaff" |
|
|
<el-button size="small" |
|
|
>添加</el-button |
|
|
type="warning" |
|
|
> |
|
|
@click="handleAddStaff">添加</el-button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
</el-form> |
|
|
</el-form> |
|
|
</div> |
|
|
</div> |
|
|
<div class="div_btn"> |
|
|
<div class="div_btn"> |
|
|
<el-button size="small" @click="handleCancle">取 消</el-button> |
|
|
<el-button size="small" |
|
|
<el-button |
|
|
@click="handleCancle">取 消</el-button> |
|
|
size="small" |
|
|
<el-button size="small" |
|
|
v-if="formType != 'detail'" |
|
|
v-if="formType != 'detail'" |
|
|
type="primary" |
|
|
type="primary" |
|
|
:disabled="btnDisable" |
|
|
:disabled="btnDisable" |
|
|
@click="handleComfirm" |
|
|
@click="handleComfirm">确 定</el-button> |
|
|
>确 定</el-button |
|
|
|
|
|
> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
@ -286,6 +235,7 @@ |
|
|
import { mapGetters } from "vuex"; |
|
|
import { mapGetters } from "vuex"; |
|
|
import { Loading } from "element-ui"; // 引入Loading服务 |
|
|
import { Loading } from "element-ui"; // 引入Loading服务 |
|
|
import { requestPost } from "@/js/dai/request"; |
|
|
import { requestPost } from "@/js/dai/request"; |
|
|
|
|
|
import daiMap from "@/utils/dai-map"; |
|
|
|
|
|
|
|
|
var map; |
|
|
var map; |
|
|
var search; |
|
|
var search; |
|
@ -295,12 +245,15 @@ let loading; // 加载动画 |
|
|
var geocoder; // 新建一个正逆地址解析类 |
|
|
var geocoder; // 新建一个正逆地址解析类 |
|
|
|
|
|
|
|
|
export default { |
|
|
export default { |
|
|
data() { |
|
|
data () { |
|
|
return { |
|
|
return { |
|
|
uploadUlr: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadqrcodeV2", |
|
|
uploadUlr: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadqrcodeV2", |
|
|
customerId: "", |
|
|
customerId: "", |
|
|
|
|
|
|
|
|
formType: "add", //表单操作类型 add新增,edit编辑,detail详情 |
|
|
formType: "add", //表单操作类型 add新增,edit编辑,detail详情 |
|
|
|
|
|
searchOptions: [], |
|
|
|
|
|
searchValue: '', |
|
|
|
|
|
resultList: [], |
|
|
|
|
|
|
|
|
btnDisable: false, |
|
|
btnDisable: false, |
|
|
|
|
|
|
|
@ -339,7 +292,7 @@ export default { |
|
|
}, |
|
|
}, |
|
|
components: {}, |
|
|
components: {}, |
|
|
computed: { |
|
|
computed: { |
|
|
dataRule() { |
|
|
dataRule () { |
|
|
return { |
|
|
return { |
|
|
centerName: [ |
|
|
centerName: [ |
|
|
{ required: true, message: "中心名称 不能为空", trigger: "blur" }, |
|
|
{ required: true, message: "中心名称 不能为空", trigger: "blur" }, |
|
@ -375,13 +328,13 @@ export default { |
|
|
props: {}, |
|
|
props: {}, |
|
|
watch: {}, |
|
|
watch: {}, |
|
|
|
|
|
|
|
|
async mounted() { |
|
|
async mounted () { |
|
|
this.customerId = localStorage.getItem("customerId"); |
|
|
this.customerId = localStorage.getItem("customerId"); |
|
|
this.initMap(); |
|
|
this.initMap(); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
methods: { |
|
|
methods: { |
|
|
handleImgSuccess(index, res, file) { |
|
|
handleImgSuccess (index, res, file) { |
|
|
if (res.code === 0 && res.msg === "success") { |
|
|
if (res.code === 0 && res.msg === "success") { |
|
|
console.log("res.data.url", res.data.url); |
|
|
console.log("res.data.url", res.data.url); |
|
|
this.dataForm.matterList[index].matterImg = res.data.url; |
|
|
this.dataForm.matterList[index].matterImg = res.data.url; |
|
@ -390,7 +343,7 @@ export default { |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
beforeImgUpload(file) { |
|
|
beforeImgUpload (file) { |
|
|
const isLt1M = file.size / 1024 / 1024 < 1; |
|
|
const isLt1M = file.size / 1024 / 1024 < 1; |
|
|
|
|
|
|
|
|
if (!isLt1M) { |
|
|
if (!isLt1M) { |
|
@ -399,7 +352,7 @@ export default { |
|
|
return isLt1M; |
|
|
return isLt1M; |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
handleAddStaff() { |
|
|
handleAddStaff () { |
|
|
this.dataForm.matterList = [ |
|
|
this.dataForm.matterList = [ |
|
|
...this.dataForm.matterList, |
|
|
...this.dataForm.matterList, |
|
|
{ |
|
|
{ |
|
@ -411,7 +364,7 @@ export default { |
|
|
}, |
|
|
}, |
|
|
]; |
|
|
]; |
|
|
}, |
|
|
}, |
|
|
async handleDelStaff(index) { |
|
|
async handleDelStaff (index) { |
|
|
const { matterList } = this.dataForm; |
|
|
const { matterList } = this.dataForm; |
|
|
let list = [...matterList]; |
|
|
let list = [...matterList]; |
|
|
let delItem = list.splice(index, 1); |
|
|
let delItem = list.splice(index, 1); |
|
@ -428,7 +381,7 @@ export default { |
|
|
|
|
|
|
|
|
this.dataForm.matterList = list; |
|
|
this.dataForm.matterList = list; |
|
|
}, |
|
|
}, |
|
|
async delStaff(matterId) { |
|
|
async delStaff (matterId) { |
|
|
const { data, code, msg } = await requestPost( |
|
|
const { data, code, msg } = await requestPost( |
|
|
"/gov/org/icpartyservicecenter/delmatter", |
|
|
"/gov/org/icpartyservicecenter/delmatter", |
|
|
{ |
|
|
{ |
|
@ -438,104 +391,90 @@ export default { |
|
|
return code === 0; |
|
|
return code === 0; |
|
|
}, |
|
|
}, |
|
|
// 地图初始化函数,本例取名为init,开发者可根据实际情况定义 |
|
|
// 地图初始化函数,本例取名为init,开发者可根据实际情况定义 |
|
|
initMap() { |
|
|
initMap (latitude, longitude) { |
|
|
let { latitude, longitude } = this.$store.state.user; |
|
|
|
|
|
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"), { |
|
|
|
|
|
center: center, // 设置地图中心点坐标 |
|
|
|
|
|
zoom: 16.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_ggfw"), |
|
|
|
|
|
{ latitude, longitude }, |
|
|
|
|
|
{ |
|
|
|
|
|
zoom: 16.2, // 设置地图缩放级别 |
|
|
|
|
|
pitch: 43.5, // 设置俯仰角 |
|
|
|
|
|
rotation: 45, // 设置地图旋转角度 |
|
|
|
|
|
} |
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
// 监听地图平移结束 |
|
|
// 监听地图平移结束 |
|
|
map.on("panend", (e) => { |
|
|
map.on("dragend", (e) => { |
|
|
this.handleMoveCenter(e); |
|
|
this.handleMoveCenter(e); |
|
|
}); |
|
|
}); |
|
|
// this.handleMoveCenter(); |
|
|
|
|
|
|
|
|
map.setCenter(latitude, longitude); |
|
|
|
|
|
map.setMarker(latitude, longitude); |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
setMarker(lat, lng) { |
|
|
|
|
|
markers.setGeometries([]); |
|
|
async handleMoveCenter () { |
|
|
markers.add([ |
|
|
//修改地图中心点 |
|
|
{ |
|
|
const { lat, lng } = map.getCenter(); |
|
|
id: "4", |
|
|
this.formData.latitude = lat; |
|
|
styleId: "marker", |
|
|
this.formData.longitude = lng; |
|
|
position: new TMap.LatLng(lat, lng), |
|
|
map.setMarker(lat, lng); |
|
|
properties: { |
|
|
|
|
|
title: "marker4", |
|
|
let { msg, data } = await map.getAddress(lat, lng); |
|
|
}, |
|
|
if (msg == "success") { |
|
|
}, |
|
|
this.formData.address = data.address |
|
|
]); |
|
|
this.searchValue = data.address |
|
|
|
|
|
this.searchOptions = [] |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
handleSearchMap() { |
|
|
async remoteMethod (query) { |
|
|
infoWindowList.forEach((infoWindow) => { |
|
|
|
|
|
infoWindow.close(); |
|
|
if (query !== '') { |
|
|
}); |
|
|
this.loading = true; |
|
|
infoWindowList.length = 0; |
|
|
|
|
|
markers.setGeometries([]); |
|
|
const { msg, data } = await map.searchNearby(query); |
|
|
// 在地图显示范围内以给定的关键字搜索地点 |
|
|
this.loading = false; |
|
|
search |
|
|
this.resultList = [] |
|
|
.searchNearby({ |
|
|
|
|
|
keyword: this.dataForm.locationAddress, |
|
|
if (msg == "success" && data.resultList && data.resultList.length > 0) { |
|
|
radius: 1000, |
|
|
|
|
|
autoExtend: true, |
|
|
if (data.resultList && data.resultList.length > 0) { |
|
|
center: map.getCenter(), |
|
|
this.resultList = data.resultList |
|
|
}) |
|
|
this.searchOptions = this.resultList.map(item => { |
|
|
.then((result) => { |
|
|
return { value: `${item.hotPointID}`, label: `${item.address + item.name}` }; |
|
|
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; |
|
|
|
|
|
} else { |
|
|
|
|
|
this.$message.error("未检索到相关位置坐标"); |
|
|
|
|
|
} |
|
|
} |
|
|
}); |
|
|
} else { |
|
|
|
|
|
this.searchOptions = [ |
|
|
|
|
|
{ |
|
|
|
|
|
value: '0', |
|
|
|
|
|
label: '未检索到结果' |
|
|
|
|
|
} |
|
|
|
|
|
] |
|
|
|
|
|
} |
|
|
|
|
|
} else { |
|
|
|
|
|
this.searchOptions = []; |
|
|
|
|
|
} |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
handleMoveCenter(e) { |
|
|
handleClickKey (index) { |
|
|
//修改地图中心点 |
|
|
let selPosition = this.resultList[index] |
|
|
const center = map.getCenter(); |
|
|
let lonlat = selPosition.lonlat.split(" ") |
|
|
const lat = center.getLat(); |
|
|
map.setCenter(lonlat[1], lonlat[0]); |
|
|
const lng = center.getLng(); |
|
|
map.setMarker(lonlat[1], lonlat[0]); |
|
|
this.dataForm.latitude = lat; |
|
|
this.formData.latitude = lonlat[1]; |
|
|
this.dataForm.longitude = lng; |
|
|
this.formData.longitude = lonlat[0]; |
|
|
this.setMarker(lat, lng); |
|
|
this.formData.address = selPosition.address + selPosition.name |
|
|
|
|
|
|
|
|
if (e && e.originalEvent) { |
|
|
|
|
|
geocoder |
|
|
|
|
|
.getAddress({ location: new TMap.LatLng(lat, lng) }) // 将给定的坐标位置转换为地址 |
|
|
|
|
|
.then((result) => { |
|
|
|
|
|
this.dataForm.locationAddress = result.result.address; |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
async initForm(type, row) { |
|
|
|
|
|
this.$refs.ref_form.resetFields(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
async initForm (type, row) { |
|
|
|
|
|
this.$refs.ref_form.resetFields(); |
|
|
|
|
|
let { latitude, longitude } = this.$store.state.user; |
|
|
this.formType = type; |
|
|
this.formType = type; |
|
|
console.log(row); |
|
|
console.log(row); |
|
|
if (row) { |
|
|
if (row) { |
|
@ -545,7 +484,7 @@ export default { |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
async handleComfirm() { |
|
|
async handleComfirm () { |
|
|
this.btnDisable = true; |
|
|
this.btnDisable = true; |
|
|
setTimeout(() => { |
|
|
setTimeout(() => { |
|
|
this.btnDisable = false; |
|
|
this.btnDisable = false; |
|
@ -560,7 +499,7 @@ export default { |
|
|
}); |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
async submit() { |
|
|
async submit () { |
|
|
let url = ""; |
|
|
let url = ""; |
|
|
if (this.formType === "add") { |
|
|
if (this.formType === "add") { |
|
|
url = "/gov/org/icpartyservicecenter/addpartyservicecenter"; |
|
|
url = "/gov/org/icpartyservicecenter/addpartyservicecenter"; |
|
@ -609,11 +548,11 @@ export default { |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
handleCancle() { |
|
|
handleCancle () { |
|
|
this.resetData(); |
|
|
this.resetData(); |
|
|
this.$emit("dialogCancle"); |
|
|
this.$emit("dialogCancle"); |
|
|
}, |
|
|
}, |
|
|
resetData() { |
|
|
resetData () { |
|
|
this.partyServiceCenterId = ""; |
|
|
this.partyServiceCenterId = ""; |
|
|
this.dataForm = { |
|
|
this.dataForm = { |
|
|
centerName: "", |
|
|
centerName: "", |
|
@ -631,7 +570,7 @@ export default { |
|
|
}; |
|
|
}; |
|
|
}, |
|
|
}, |
|
|
// 开启加载动画 |
|
|
// 开启加载动画 |
|
|
startLoading() { |
|
|
startLoading () { |
|
|
loading = Loading.service({ |
|
|
loading = Loading.service({ |
|
|
lock: true, // 是否锁定 |
|
|
lock: true, // 是否锁定 |
|
|
text: "正在加载……", // 加载中需要显示的文字 |
|
|
text: "正在加载……", // 加载中需要显示的文字 |
|
@ -639,7 +578,7 @@ export default { |
|
|
}); |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
// 结束加载动画 |
|
|
// 结束加载动画 |
|
|
endLoading() { |
|
|
endLoading () { |
|
|
// clearTimeout(timer); |
|
|
// clearTimeout(timer); |
|
|
if (loading) { |
|
|
if (loading) { |
|
|
loading.close(); |
|
|
loading.close(); |
|
|