|
|
@ -1,121 +1,152 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div class="g-add"> |
|
|
<div class="g-add"> |
|
|
<div class="g-add-page"> |
|
|
<div class="g-add-page"> |
|
|
|
|
|
|
|
|
<div class="g-left"> |
|
|
<div class="g-left"> |
|
|
<el-form ref="ref_form1" |
|
|
<el-form |
|
|
|
|
|
ref="ref_form1" |
|
|
:inline="true" |
|
|
:inline="true" |
|
|
:model="formData" |
|
|
:model="formData" |
|
|
:rules="dataRule" |
|
|
:rules="dataRule" |
|
|
class="form"> |
|
|
class="form" |
|
|
<el-form-item label="所属网格 " |
|
|
> |
|
|
|
|
|
<el-form-item |
|
|
|
|
|
label="所属网格 " |
|
|
prop="gridId" |
|
|
prop="gridId" |
|
|
label-width="150px" |
|
|
label-width="150px" |
|
|
style="display: block"> |
|
|
style="display: block" |
|
|
<el-select v-model.trim="formData.gridId" |
|
|
> |
|
|
|
|
|
<el-select |
|
|
|
|
|
v-model.trim="formData.gridId" |
|
|
placeholder="请选择" |
|
|
placeholder="请选择" |
|
|
clearable |
|
|
clearable |
|
|
class="cell-width-1"> |
|
|
class="cell-width-1" |
|
|
<el-option v-for="item in gridList" |
|
|
> |
|
|
|
|
|
<el-option |
|
|
|
|
|
v-for="item in gridList" |
|
|
:key="item.value" |
|
|
:key="item.value" |
|
|
:label="item.label" |
|
|
:label="item.label" |
|
|
:value="item.value"> |
|
|
:value="item.value" |
|
|
|
|
|
> |
|
|
</el-option> |
|
|
</el-option> |
|
|
</el-select> |
|
|
</el-select> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
|
|
|
|
|
|
<el-form-item label="报事人" |
|
|
<el-form-item |
|
|
|
|
|
label="报事人" |
|
|
prop="name" |
|
|
prop="name" |
|
|
label-width="150px" |
|
|
label-width="150px" |
|
|
style="display: block"> |
|
|
style="display: block" |
|
|
|
|
|
> |
|
|
<el-input class="cell-width-1" |
|
|
<el-input |
|
|
|
|
|
class="cell-width-1" |
|
|
maxlength="10" |
|
|
maxlength="10" |
|
|
placeholder="请输入报事人姓名" |
|
|
placeholder="请输入报事人姓名" |
|
|
v-model="formData.name"> |
|
|
v-model="formData.name" |
|
|
|
|
|
> |
|
|
</el-input> |
|
|
</el-input> |
|
|
<div> |
|
|
<div> |
|
|
<el-button style="margin-top: 10px" |
|
|
<el-button |
|
|
|
|
|
style="margin-top: 10px" |
|
|
type="primary" |
|
|
type="primary" |
|
|
size="mini" |
|
|
size="mini" |
|
|
@click="handleShowPersonList">居民信息中选择</el-button> |
|
|
@click="handleShowPersonList" |
|
|
|
|
|
>居民信息中选择</el-button |
|
|
|
|
|
> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
<el-form-item label="手机号" |
|
|
<el-form-item |
|
|
|
|
|
label="手机号" |
|
|
prop="mobile" |
|
|
prop="mobile" |
|
|
label-width="150px" |
|
|
label-width="150px" |
|
|
style="display: block"> |
|
|
style="display: block" |
|
|
<el-input class="cell-width-1" |
|
|
> |
|
|
|
|
|
<el-input |
|
|
|
|
|
class="cell-width-1" |
|
|
maxlength="30" |
|
|
maxlength="30" |
|
|
placeholder="请输入手机号 " |
|
|
placeholder="请输入手机号 " |
|
|
v-model="formData.mobile"> |
|
|
v-model="formData.mobile" |
|
|
|
|
|
> |
|
|
</el-input> |
|
|
</el-input> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
|
|
|
|
|
|
<el-form-item label="身份证号" |
|
|
<el-form-item |
|
|
|
|
|
label="身份证号" |
|
|
prop="idCard" |
|
|
prop="idCard" |
|
|
label-width="150px" |
|
|
label-width="150px" |
|
|
style="display: block"> |
|
|
style="display: block" |
|
|
<el-input class="cell-width-1" |
|
|
> |
|
|
|
|
|
<el-input |
|
|
|
|
|
class="cell-width-1" |
|
|
maxlength="30" |
|
|
maxlength="30" |
|
|
placeholder="请输入身份证号" |
|
|
placeholder="请输入身份证号" |
|
|
v-model="formData.idCard"></el-input> |
|
|
v-model="formData.idCard" |
|
|
|
|
|
></el-input> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
|
|
|
|
|
|
<el-form-item label="反应渠道" |
|
|
<el-form-item label="反应渠道" label-width="150px" prop="sourceType"> |
|
|
label-width="150px" |
|
|
<el-select |
|
|
prop="sourceType"> |
|
|
v-model="formData.sourceType" |
|
|
<el-select v-model="formData.sourceType" |
|
|
|
|
|
placeholder="请选择" |
|
|
placeholder="请选择" |
|
|
size="small" |
|
|
size="small" |
|
|
clearable |
|
|
clearable |
|
|
class="cell-width-1"> |
|
|
class="cell-width-1" |
|
|
<el-option v-for="item in qudaoArray" |
|
|
> |
|
|
|
|
|
<el-option |
|
|
|
|
|
v-for="item in qudaoArray" |
|
|
:key="item.value" |
|
|
:key="item.value" |
|
|
:label="item.label" |
|
|
:label="item.label" |
|
|
:value="item.value"> |
|
|
:value="item.value" |
|
|
|
|
|
> |
|
|
</el-option> |
|
|
</el-option> |
|
|
</el-select> |
|
|
</el-select> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
|
|
|
|
|
|
<el-form-item label="发生时间" |
|
|
<el-form-item |
|
|
|
|
|
label="发生时间" |
|
|
prop="happenTime" |
|
|
prop="happenTime" |
|
|
label-width="150px" |
|
|
label-width="150px" |
|
|
style="display: block"> |
|
|
style="display: block" |
|
|
<el-date-picker v-model="formData.happenTime" |
|
|
> |
|
|
|
|
|
<el-date-picker |
|
|
|
|
|
v-model="formData.happenTime" |
|
|
class="cell-width-1" |
|
|
class="cell-width-1" |
|
|
type="datetime" |
|
|
type="datetime" |
|
|
placeholder="发生时间" |
|
|
placeholder="发生时间" |
|
|
value-format="yyyy-MM-dd hh:mm:ss"> |
|
|
value-format="yyyy-MM-dd hh:mm:ss" |
|
|
|
|
|
> |
|
|
</el-date-picker> |
|
|
</el-date-picker> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
|
|
|
|
|
|
<el-form-item label="事件内容" |
|
|
<el-form-item |
|
|
|
|
|
label="事件内容" |
|
|
prop="eventContent" |
|
|
prop="eventContent" |
|
|
label-width="150px" |
|
|
label-width="150px" |
|
|
style="display: block"> |
|
|
style="display: block" |
|
|
<el-input class="cell-width-2" |
|
|
> |
|
|
|
|
|
<el-input |
|
|
|
|
|
class="cell-width-2" |
|
|
type="textarea" |
|
|
type="textarea" |
|
|
maxlength="500" |
|
|
maxlength="500" |
|
|
show-word-limit |
|
|
show-word-limit |
|
|
:rows="5" |
|
|
:rows="5" |
|
|
placeholder="请输入事件内容，不超过500字" |
|
|
placeholder="请输入事件内容，不超过500字" |
|
|
v-model="formData.eventContent"></el-input> |
|
|
v-model="formData.eventContent" |
|
|
|
|
|
></el-input> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
|
|
|
|
|
|
</el-form> |
|
|
</el-form> |
|
|
</div> |
|
|
</div> |
|
|
<div class="g-right"> |
|
|
<div class="g-right"> |
|
|
<el-form ref="ref_form2" |
|
|
<el-form |
|
|
|
|
|
ref="ref_form2" |
|
|
:inline="true" |
|
|
:inline="true" |
|
|
:model="formData" |
|
|
:model="formData" |
|
|
:rules="dataRule" |
|
|
:rules="dataRule" |
|
|
class="form"> |
|
|
class="form" |
|
|
<el-form-item label="图片" |
|
|
> |
|
|
label-width="150px" |
|
|
<el-form-item label="图片" label-width="150px" style="display: block"> |
|
|
style="display:block"> |
|
|
<el-upload |
|
|
<el-upload :class="['avatar-uploader', {'hide': hideUploadBtn}] " |
|
|
:headers="$getElUploadHeaders()" |
|
|
|
|
|
:class="['avatar-uploader', { hide: hideUploadBtn }]" |
|
|
ref="uploadPic" |
|
|
ref="uploadPic" |
|
|
:action="uploadUlr" |
|
|
:action="uploadUlr" |
|
|
list-type="picture-card" |
|
|
list-type="picture-card" |
|
|
@ -124,44 +155,49 @@ |
|
|
:file-list="replayImgList" |
|
|
:file-list="replayImgList" |
|
|
:on-change="handleEditChange" |
|
|
:on-change="handleEditChange" |
|
|
:on-success="handleSuccess" |
|
|
:on-success="handleSuccess" |
|
|
:limit="3"> |
|
|
:limit="3" |
|
|
|
|
|
> |
|
|
<span class="font-14">选择图片</span> |
|
|
<span class="font-14">选择图片</span> |
|
|
<div slot="tip" |
|
|
<div slot="tip" class="upload_tip"> |
|
|
class="upload_tip">最多上传3张图片，图片支持jpg、jpeg、bmp、git或png格式</div> |
|
|
最多上传3张图片，图片支持jpg、jpeg、bmp、git或png格式 |
|
|
|
|
|
</div> |
|
|
</el-upload> |
|
|
</el-upload> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
|
|
|
|
|
|
<el-form-item label="地理位置" |
|
|
<el-form-item |
|
|
|
|
|
label="地理位置" |
|
|
prop="address" |
|
|
prop="address" |
|
|
label-width="150px" |
|
|
label-width="150px" |
|
|
style="display: block"> |
|
|
style="display: block" |
|
|
|
|
|
> |
|
|
<el-input class="cell-width-1" |
|
|
<el-input class="cell-width-1" v-model="formData.address"> |
|
|
v-model="formData.address"> |
|
|
|
|
|
</el-input> |
|
|
</el-input> |
|
|
|
|
|
|
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
<el-form-item label="位置坐标" |
|
|
<el-form-item |
|
|
|
|
|
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"> |
|
|
|
|
|
|
|
|
<div class="div_map"> |
|
|
<div class="div_map"> |
|
|
<div id="app"> |
|
|
<div id="app"></div> |
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="div_searchmap"> |
|
|
<div class="div_searchmap"> |
|
|
<el-input class="cell-width-map" |
|
|
<el-input |
|
|
|
|
|
class="cell-width-map" |
|
|
maxlength="50" |
|
|
maxlength="50" |
|
|
size="mini" |
|
|
size="mini" |
|
|
placeholder="请输入关键字" |
|
|
placeholder="请输入关键字" |
|
|
v-model="keyWords"> |
|
|
v-model="keyWords" |
|
|
|
|
|
> |
|
|
</el-input> |
|
|
</el-input> |
|
|
<el-button style="margin-left: 10px" |
|
|
<el-button |
|
|
|
|
|
style="margin-left: 10px" |
|
|
type="primary" |
|
|
type="primary" |
|
|
size="mini" |
|
|
size="mini" |
|
|
@click="handleSearchMap">查询</el-button> |
|
|
@click="handleSearchMap" |
|
|
|
|
|
>查询</el-button |
|
|
|
|
|
> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
@ -181,14 +217,13 @@ |
|
|
</div> --> |
|
|
</div> --> |
|
|
</div> |
|
|
</div> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
|
|
|
|
|
|
</el-form> |
|
|
</el-form> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<!-- 新增弹出框 --> |
|
|
<!-- 新增弹出框 --> |
|
|
<el-dialog :visible.sync="personTableShow" |
|
|
<el-dialog |
|
|
|
|
|
:visible.sync="personTableShow" |
|
|
:close-on-click-modal="false" |
|
|
:close-on-click-modal="false" |
|
|
:close-on-press-escape="false" |
|
|
:close-on-press-escape="false" |
|
|
:destroy-on-close="true" |
|
|
:destroy-on-close="true" |
|
|
@ -196,53 +231,56 @@ |
|
|
width="550px" |
|
|
width="550px" |
|
|
top="5vh" |
|
|
top="5vh" |
|
|
class="dialog-h" |
|
|
class="dialog-h" |
|
|
@closed="diaClose"> |
|
|
@closed="diaClose" |
|
|
|
|
|
> |
|
|
<div style="padding: 10px 30px"> |
|
|
<div style="padding: 10px 30px"> |
|
|
<el-form :inline="false" |
|
|
<el-form :inline="false" ref="ref_formSearch" :label-width="'90px'"> |
|
|
ref="ref_formSearch" |
|
|
<el-form-item label="所属网格" label-width="150px"> |
|
|
:label-width="'90px'"> |
|
|
<el-select |
|
|
<el-form-item label="所属网格" |
|
|
class="cell-width-1" |
|
|
label-width="150px"> |
|
|
|
|
|
<el-select class="cell-width-1" |
|
|
|
|
|
v-model.trim="selGridId" |
|
|
v-model.trim="selGridId" |
|
|
placeholder="请选择" |
|
|
placeholder="请选择" |
|
|
clearable> |
|
|
clearable |
|
|
<el-option v-for="item in gridList" |
|
|
> |
|
|
|
|
|
<el-option |
|
|
|
|
|
v-for="item in gridList" |
|
|
@click.native="handleChangeGrid" |
|
|
@click.native="handleChangeGrid" |
|
|
:key="item.value" |
|
|
:key="item.value" |
|
|
:label="item.label" |
|
|
:label="item.label" |
|
|
:value="item.value"> |
|
|
:value="item.value" |
|
|
|
|
|
> |
|
|
</el-option> |
|
|
</el-option> |
|
|
</el-select> |
|
|
</el-select> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
<el-form-item label="居民" |
|
|
<el-form-item label="居民" label-width="150px" prop="selPersonIndex"> |
|
|
label-width="150px" |
|
|
<el-select |
|
|
prop="selPersonIndex"> |
|
|
v-model="selPersonIndex" |
|
|
|
|
|
|
|
|
<el-select v-model="selPersonIndex" |
|
|
|
|
|
class="cell-width-1" |
|
|
class="cell-width-1" |
|
|
filterable |
|
|
filterable |
|
|
placeholder="请选择" |
|
|
placeholder="请选择" |
|
|
clearable> |
|
|
clearable |
|
|
<el-option v-for="(item,index) in demandUserList" |
|
|
> |
|
|
|
|
|
<el-option |
|
|
|
|
|
v-for="(item, index) in demandUserList" |
|
|
:key="item.demandUserId" |
|
|
:key="item.demandUserId" |
|
|
:label="item.label" |
|
|
:label="item.label" |
|
|
:value="index"> |
|
|
:value="index" |
|
|
|
|
|
> |
|
|
</el-option> |
|
|
</el-option> |
|
|
</el-select> |
|
|
</el-select> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
|
|
|
|
|
|
</el-form> |
|
|
</el-form> |
|
|
<div class="div-btn"> |
|
|
<div class="div-btn"> |
|
|
|
|
|
<el-button |
|
|
<el-button style="margin-left:20px" |
|
|
style="margin-left: 20px" |
|
|
type="primary" |
|
|
type="primary" |
|
|
size="small" |
|
|
size="small" |
|
|
@click="handleComfirmSelPerson">确定</el-button> |
|
|
@click="handleComfirmSelPerson" |
|
|
|
|
|
>确定</el-button |
|
|
|
|
|
> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</el-dialog> |
|
|
</el-dialog> |
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
@ -254,27 +292,27 @@ import formVltHelper from "dai-js/tools/formVltHelper"; |
|
|
import { isCard } from "@/utils/validate"; |
|
|
import { isCard } from "@/utils/validate"; |
|
|
|
|
|
|
|
|
let loading; // 加载动画 |
|
|
let loading; // 加载动画 |
|
|
var map |
|
|
var map; |
|
|
var search |
|
|
var search; |
|
|
var markers |
|
|
var markers; |
|
|
var infoWindowList |
|
|
var infoWindowList; |
|
|
var geocoder // 新建一个正逆地址解析类 |
|
|
var geocoder; // 新建一个正逆地址解析类 |
|
|
|
|
|
|
|
|
function iniFmData() { |
|
|
function iniFmData() { |
|
|
return { |
|
|
return { |
|
|
gridId: '',//所属网格 |
|
|
gridId: "", //所属网格 |
|
|
reportUserId: '',// 报事人ID |
|
|
reportUserId: "", // 报事人ID |
|
|
name: '',// 报事人姓名 |
|
|
name: "", // 报事人姓名 |
|
|
mobile: '',// 手机号 |
|
|
mobile: "", // 手机号 |
|
|
idCard: '',// 身份证号 |
|
|
idCard: "", // 身份证号 |
|
|
sourceType: '',// 反映渠道 |
|
|
sourceType: "", // 反映渠道 |
|
|
happenTime: '',//发生时间 |
|
|
happenTime: "", //发生时间 |
|
|
eventContent: '',// 事件内容 |
|
|
eventContent: "", // 事件内容 |
|
|
imageList: [], // 图片集合 |
|
|
imageList: [], // 图片集合 |
|
|
// categoryList: [],// 二类分类Id |
|
|
// categoryList: [],// 二类分类Id |
|
|
address: '',//事件地址 |
|
|
address: "", //事件地址 |
|
|
latitude: '',// 经度 |
|
|
latitude: "", // 经度 |
|
|
longitude: '',//维度 |
|
|
longitude: "", //维度 |
|
|
// operationType: '',// 处理方式 |
|
|
// operationType: '',// 处理方式 |
|
|
// content: '',//回复内容 |
|
|
// content: '',//回复内容 |
|
|
// status: '',// 处理中：processing；已办结：closed_case |
|
|
// status: '',// 处理中：processing；已办结：closed_case |
|
|
@ -290,7 +328,6 @@ export default { |
|
|
gridList: [], //所属网格list--场所区域 |
|
|
gridList: [], //所属网格list--场所区域 |
|
|
|
|
|
|
|
|
qudaoArray: [ |
|
|
qudaoArray: [ |
|
|
|
|
|
|
|
|
{ |
|
|
{ |
|
|
value: "1", |
|
|
value: "1", |
|
|
label: "多媒体反应", |
|
|
label: "多媒体反应", |
|
|
@ -311,32 +348,30 @@ export default { |
|
|
|
|
|
|
|
|
formData: iniFmData(), |
|
|
formData: iniFmData(), |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//地图相关 |
|
|
//地图相关 |
|
|
keyWords: '', |
|
|
keyWords: "", |
|
|
isFirst: true, //地图是否首次加载，首次加载不给地址赋值 |
|
|
isFirst: true, //地图是否首次加载，首次加载不给地址赋值 |
|
|
|
|
|
|
|
|
//图片相关 oss/file/uploadvariedfile |
|
|
//图片相关 oss/file/uploadvariedfile |
|
|
dialogImageUrl: 'oss/file/uploadvariedfile', |
|
|
dialogImageUrl: "oss/file/uploadvariedfile", |
|
|
uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadvariedfile', |
|
|
uploadUlr: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadvariedfile", |
|
|
// upload_url: '', // 上传URL |
|
|
// upload_url: '', // 上传URL |
|
|
upload_name: '', // 图片或视频名称 |
|
|
upload_name: "", // 图片或视频名称 |
|
|
replayImgList: [], |
|
|
replayImgList: [], |
|
|
|
|
|
|
|
|
okflag: false, |
|
|
okflag: false, |
|
|
|
|
|
|
|
|
formDataSearch: { |
|
|
formDataSearch: { |
|
|
gridId: '', |
|
|
gridId: "", |
|
|
name: '' |
|
|
name: "", |
|
|
}, |
|
|
}, |
|
|
personTableShow: false, |
|
|
personTableShow: false, |
|
|
selGridId: '', |
|
|
selGridId: "", |
|
|
selPersonIndex: '', |
|
|
selPersonIndex: "", |
|
|
selPerson: {}, |
|
|
selPerson: {}, |
|
|
demandUserList: [], |
|
|
demandUserList: [], |
|
|
|
|
|
|
|
|
hideUploadBtn: false |
|
|
hideUploadBtn: false, |
|
|
}; |
|
|
}; |
|
|
}, |
|
|
}, |
|
|
components: {}, |
|
|
components: {}, |
|
|
@ -357,10 +392,10 @@ export default { |
|
|
gridId: [ |
|
|
gridId: [ |
|
|
{ required: true, message: "所属网格不能为空", trigger: "blur" }, |
|
|
{ required: true, message: "所属网格不能为空", trigger: "blur" }, |
|
|
], |
|
|
], |
|
|
name: [ |
|
|
name: [{ required: true, message: "报事人不能为空", trigger: "blur" }], |
|
|
{ required: true, message: "报事人不能为空", trigger: "blur" }, |
|
|
mobile: [ |
|
|
|
|
|
{ required: true, message: "手机号不能为空", trigger: "blur" }, |
|
|
], |
|
|
], |
|
|
mobile: [{ required: true, message: "手机号不能为空", trigger: "blur" }], |
|
|
|
|
|
// idCard: [ |
|
|
// idCard: [ |
|
|
// { required: true, message: "身份证号不能为空", trigger: "blur" }, |
|
|
// { required: true, message: "身份证号不能为空", trigger: "blur" }, |
|
|
// { required: true, validator: checkIdCard, trigger: "blur" }, |
|
|
// { required: true, validator: checkIdCard, trigger: "blur" }, |
|
|
@ -382,353 +417,329 @@ export default { |
|
|
], |
|
|
], |
|
|
}; |
|
|
}; |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
props: {}, |
|
|
props: {}, |
|
|
watch: { |
|
|
watch: { |
|
|
"formData.name": function (val) { |
|
|
"formData.name": function (val) { |
|
|
this.$emit("changeName", val) |
|
|
this.$emit("changeName", val); |
|
|
}, |
|
|
}, |
|
|
"formData.mobile": function (val) { |
|
|
"formData.mobile": function (val) { |
|
|
this.$emit("changeMobile", val) |
|
|
this.$emit("changeMobile", val); |
|
|
}, |
|
|
}, |
|
|
"formData.reportUserId": function (val) { |
|
|
"formData.reportUserId": function (val) { |
|
|
this.$emit("changeUserId", val) |
|
|
this.$emit("changeUserId", val); |
|
|
}, |
|
|
}, |
|
|
"formData.gridId": function (val) { |
|
|
"formData.gridId": function (val) { |
|
|
this.selGridId = val |
|
|
this.selGridId = val; |
|
|
this.$emit("changeGridId", val) |
|
|
this.$emit("changeGridId", val); |
|
|
} |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
async mounted() { |
|
|
async mounted() { |
|
|
const { user } = this.$store.state |
|
|
const { user } = this.$store.state; |
|
|
this.agencyId = user.agencyId |
|
|
this.agencyId = user.agencyId; |
|
|
let { latitude, longitude } = this.$store.state.user; |
|
|
let { latitude, longitude } = this.$store.state.user; |
|
|
if (!latitude || latitude == "" || latitude == "0") { |
|
|
if (!latitude || latitude == "" || latitude == "0") { |
|
|
latitude = 39.9088810666821; |
|
|
latitude = 39.9088810666821; |
|
|
longitude = 116.39743841556731; |
|
|
longitude = 116.39743841556731; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
this.formData.latitude = latitude |
|
|
this.formData.latitude = latitude; |
|
|
this.formData.longitude = longitude |
|
|
this.formData.longitude = longitude; |
|
|
|
|
|
|
|
|
this.initMap() |
|
|
this.initMap(); |
|
|
this.loadGrid(); |
|
|
this.loadGrid(); |
|
|
this.getCategoryList() |
|
|
this.getCategoryList(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
methods: { |
|
|
methods: { |
|
|
async handleShowPersonList() { |
|
|
async handleShowPersonList() { |
|
|
if (this.formData.gridId) { |
|
|
if (this.formData.gridId) { |
|
|
await this.handleChangeGrid() |
|
|
await this.handleChangeGrid(); |
|
|
this.personTableShow = true |
|
|
this.personTableShow = true; |
|
|
} else { |
|
|
} else { |
|
|
this.$message.info("请先选择网格"); |
|
|
this.$message.info("请先选择网格"); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
diaClose() { |
|
|
diaClose() { |
|
|
this.personTableShow = false; |
|
|
this.personTableShow = false; |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
handleComfirmSelPerson() { |
|
|
handleComfirmSelPerson() { |
|
|
|
|
|
|
|
|
if (this.selPersonIndex === 0 || this.selPersonIndex) { |
|
|
if (this.selPersonIndex === 0 || this.selPersonIndex) { |
|
|
let selPerson = this.demandUserList[this.selPersonIndex] |
|
|
let selPerson = this.demandUserList[this.selPersonIndex]; |
|
|
this.formData.name = selPerson.demandUserName |
|
|
this.formData.name = selPerson.demandUserName; |
|
|
this.formData.mobile = selPerson.demandUserMobile |
|
|
this.formData.mobile = selPerson.demandUserMobile; |
|
|
this.formData.reportUserId = selPerson.demandUserId |
|
|
this.formData.reportUserId = selPerson.demandUserId; |
|
|
this.formData.idCard = selPerson.idCard |
|
|
this.formData.idCard = selPerson.idCard; |
|
|
|
|
|
|
|
|
this.personTableShow = false; |
|
|
this.personTableShow = false; |
|
|
|
|
|
|
|
|
} else { |
|
|
} else { |
|
|
this.$message.info("请选择人员"); |
|
|
this.$message.info("请选择人员"); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
async handleChangeGrid() { |
|
|
async handleChangeGrid() { |
|
|
|
|
|
const url = "/epmetuser/icresiuser/demandusers"; |
|
|
const url = "/epmetuser/icresiuser/demandusers" |
|
|
|
|
|
// const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/epidemicPrevention/page" |
|
|
// const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/epidemicPrevention/page" |
|
|
let params = { |
|
|
let params = { |
|
|
agencyId: '', |
|
|
agencyId: "", |
|
|
gridId: this.selGridId, |
|
|
gridId: this.selGridId, |
|
|
name: "", |
|
|
name: "", |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
const { data, code, msg } = await requestPost(url, params) |
|
|
const { data, code, msg } = await requestPost(url, params); |
|
|
|
|
|
|
|
|
if (code === 0) { |
|
|
if (code === 0) { |
|
|
this.demandUserList = data; |
|
|
this.demandUserList = data; |
|
|
|
|
|
|
|
|
} else { |
|
|
} else { |
|
|
this.$message.error(msg) |
|
|
this.$message.error(msg); |
|
|
} |
|
|
} |
|
|
this.tableLoading = false |
|
|
this.tableLoading = false; |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
async loadGrid() { |
|
|
async loadGrid() { |
|
|
const url = "/gov/org/customergrid/gridoption" |
|
|
const url = "/gov/org/customergrid/gridoption"; |
|
|
|
|
|
|
|
|
let params = { |
|
|
let params = { |
|
|
agencyId: this.agencyId, |
|
|
agencyId: this.agencyId, |
|
|
purpose: "addorupdate" |
|
|
purpose: "addorupdate", |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
const { data, code, msg } = await requestPost(url, params) |
|
|
const { data, code, msg } = await requestPost(url, params); |
|
|
|
|
|
|
|
|
if (code === 0) { |
|
|
if (code === 0) { |
|
|
this.gridList = data |
|
|
this.gridList = data; |
|
|
|
|
|
|
|
|
} else { |
|
|
} else { |
|
|
this.$message.error(msg) |
|
|
this.$message.error(msg); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
async getCategoryList() { |
|
|
async getCategoryList() { |
|
|
const url = "/gov/issue/issueprojectcategorydict/list" |
|
|
const url = "/gov/issue/issueprojectcategorydict/list"; |
|
|
|
|
|
|
|
|
let params = {} |
|
|
let params = {}; |
|
|
|
|
|
|
|
|
const { data, code, msg } = await requestPost(url, params) |
|
|
const { data, code, msg } = await requestPost(url, params); |
|
|
|
|
|
|
|
|
if (code === 0) { |
|
|
if (code === 0) { |
|
|
|
|
|
let treeDataNew = this.filterTree(data); |
|
|
let treeDataNew = this.filterTree(data) |
|
|
|
|
|
// this.categrayList = data |
|
|
// this.categrayList = data |
|
|
//组织级联数据 |
|
|
//组织级联数据 |
|
|
++this.iscascaderShow |
|
|
++this.iscascaderShow; |
|
|
this.casOptions = [] |
|
|
this.casOptions = []; |
|
|
this.selCategoryArray = [] |
|
|
this.selCategoryArray = []; |
|
|
|
|
|
|
|
|
this.casOptions = treeDataNew |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.casOptions = treeDataNew; |
|
|
} else { |
|
|
} else { |
|
|
this.$message.error(msg) |
|
|
this.$message.error(msg); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
//重构树，去除网格 |
|
|
//重构树，去除网格 |
|
|
filterTree(arr) { |
|
|
filterTree(arr) { |
|
|
let childs = arr |
|
|
let childs = arr; |
|
|
for (let i = childs.length; i--; i > 0) { |
|
|
for (let i = childs.length; i--; i > 0) { |
|
|
if (childs[i].subCategory) { |
|
|
if (childs[i].subCategory) { |
|
|
if (childs[i].subCategory.length) { |
|
|
if (childs[i].subCategory.length) { |
|
|
this.filterTree(childs[i].subCategory) |
|
|
this.filterTree(childs[i].subCategory); |
|
|
} else { |
|
|
} else { |
|
|
delete childs[i].subCategory |
|
|
delete childs[i].subCategory; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
return arr |
|
|
return arr; |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
handleChangeAgency(value) { |
|
|
handleChangeAgency(value) { |
|
|
// this.agencyName = this.$refs["myCascader"].getCheckedNodes()[0].label |
|
|
// this.agencyName = this.$refs["myCascader"].getCheckedNodes()[0].label |
|
|
// this.orgId = this.selCategoryArray.length > 0 ? this.selCategoryArray[this.selCategoryArray.length - 1] : '' |
|
|
// this.orgId = this.selCategoryArray.length > 0 ? this.selCategoryArray[this.selCategoryArray.length - 1] : '' |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
async getEventInfo() { |
|
|
async getEventInfo() { |
|
|
this.okflag = false |
|
|
this.okflag = false; |
|
|
this.$refs["ref_form1"].validate((valid, messageObj) => { |
|
|
this.$refs["ref_form1"].validate((valid, messageObj) => { |
|
|
|
|
|
|
|
|
if (!valid) { |
|
|
if (!valid) { |
|
|
app.util.validateRule(messageObj); |
|
|
app.util.validateRule(messageObj); |
|
|
return false |
|
|
return false; |
|
|
|
|
|
|
|
|
} else { |
|
|
} else { |
|
|
this.$refs["ref_form2"].validate((valid, messageObj) => { |
|
|
this.$refs["ref_form2"].validate((valid, messageObj) => { |
|
|
|
|
|
|
|
|
if (!valid) { |
|
|
if (!valid) { |
|
|
app.util.validateRule(messageObj); |
|
|
app.util.validateRule(messageObj); |
|
|
return false |
|
|
return false; |
|
|
} else { |
|
|
} else { |
|
|
if (!formVltHelper.userOrMobile(this.formData.mobile)) { |
|
|
if (!formVltHelper.userOrMobile(this.formData.mobile)) { |
|
|
this.$message({ |
|
|
this.$message({ |
|
|
type: "error", |
|
|
type: "error", |
|
|
message: "手机号格式有误", |
|
|
message: "手机号格式有误", |
|
|
}); |
|
|
}); |
|
|
return false |
|
|
return false; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const regCard = /(^\d{15}$)|(^\d{17}(\d|X)$)/; //身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X |
|
|
const regCard = /(^\d{15}$)|(^\d{17}(\d|X)$)/; //身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X |
|
|
if (this.formData.idCard && regCard.test(this.formData.idCard) === false) { |
|
|
if ( |
|
|
|
|
|
this.formData.idCard && |
|
|
|
|
|
regCard.test(this.formData.idCard) === false |
|
|
|
|
|
) { |
|
|
this.$message({ |
|
|
this.$message({ |
|
|
type: 'warning', |
|
|
type: "warning", |
|
|
message: '请输入正确的身份证号码' |
|
|
message: "请输入正确的身份证号码", |
|
|
}) |
|
|
}); |
|
|
return false; |
|
|
return false; |
|
|
} |
|
|
} |
|
|
this.okflag = true |
|
|
this.okflag = true; |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
removePic(file, fileList) { |
|
|
removePic(file, fileList) { |
|
|
|
|
|
this.formData.imageList.splice( |
|
|
this.formData.imageList.splice(this.formData.imageList.findIndex(item => item === file.url), 1) |
|
|
this.formData.imageList.findIndex((item) => item === file.url), |
|
|
this.replayImgList.splice(this.replayImgList.findIndex(item => item.uid === file.uid), 1) |
|
|
1 |
|
|
|
|
|
); |
|
|
|
|
|
this.replayImgList.splice( |
|
|
|
|
|
this.replayImgList.findIndex((item) => item.uid === file.uid), |
|
|
|
|
|
1 |
|
|
|
|
|
); |
|
|
this.hideUploadBtn = fileList.length >= 3; |
|
|
this.hideUploadBtn = fileList.length >= 3; |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
// 最多上传3张图，超过时隐藏上传按钮 |
|
|
// 最多上传3张图，超过时隐藏上传按钮 |
|
|
handleEditChange(file, fileList) { |
|
|
handleEditChange(file, fileList) { |
|
|
|
|
|
|
|
|
this.hideUploadBtn = fileList.length >= 3; |
|
|
this.hideUploadBtn = fileList.length >= 3; |
|
|
}, |
|
|
}, |
|
|
exceedPic() { |
|
|
exceedPic() { |
|
|
this.$message.warning("最多上传3张预览图片") |
|
|
this.$message.warning("最多上传3张预览图片"); |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
handleSuccess(response, file, fileList) { |
|
|
handleSuccess(response, file, fileList) { |
|
|
this.replayImgList.push(file) |
|
|
this.replayImgList.push(file); |
|
|
this.formData.imageList.push(response.data.url) |
|
|
this.formData.imageList.push(response.data.url); |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义 |
|
|
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义 |
|
|
initMap() { |
|
|
initMap() { |
|
|
// 定义地图中心点坐标 |
|
|
// 定义地图中心点坐标 |
|
|
var center = new window.TMap.LatLng(this.formData.latitude, this.formData.longitude) |
|
|
var center = new window.TMap.LatLng( |
|
|
|
|
|
this.formData.latitude, |
|
|
|
|
|
this.formData.longitude |
|
|
|
|
|
); |
|
|
// 定义map变量，调用 TMap.Map() 构造函数创建地图 |
|
|
// 定义map变量，调用 TMap.Map() 构造函数创建地图 |
|
|
map = new window.TMap.Map(document.getElementById('app'), { |
|
|
map = new window.TMap.Map(document.getElementById("app"), { |
|
|
center: center, // 设置地图中心点坐标 |
|
|
center: center, // 设置地图中心点坐标 |
|
|
zoom: 17.2, // 设置地图缩放级别 |
|
|
zoom: 17.2, // 设置地图缩放级别 |
|
|
pitch: 43.5, // 设置俯仰角 |
|
|
pitch: 43.5, // 设置俯仰角 |
|
|
rotation: 45 // 设置地图旋转角度 |
|
|
rotation: 45, // 设置地图旋转角度 |
|
|
}) |
|
|
}); |
|
|
|
|
|
|
|
|
search = new window.TMap.service.Search({ pageSize: 10 }) |
|
|
search = new window.TMap.service.Search({ pageSize: 10 }); |
|
|
// 新建一个地点搜索类 |
|
|
// 新建一个地点搜索类 |
|
|
markers = new TMap.MultiMarker({ |
|
|
markers = new TMap.MultiMarker({ |
|
|
map: map, |
|
|
map: map, |
|
|
geometries: [] |
|
|
geometries: [], |
|
|
}) |
|
|
}); |
|
|
infoWindowList = Array(10) |
|
|
infoWindowList = Array(10); |
|
|
|
|
|
|
|
|
geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类 |
|
|
geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类 |
|
|
|
|
|
|
|
|
// 监听地图平移结束 |
|
|
// 监听地图平移结束 |
|
|
map.on('panend', () => { |
|
|
map.on("panend", () => { |
|
|
this.handleMoveCenter() |
|
|
this.handleMoveCenter(); |
|
|
}) |
|
|
}); |
|
|
this.handleMoveCenter() |
|
|
this.handleMoveCenter(); |
|
|
// this.convert() |
|
|
// this.convert() |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
setMarker(lat, lng) { |
|
|
setMarker(lat, lng) { |
|
|
markers.setGeometries([]) |
|
|
markers.setGeometries([]); |
|
|
markers.add([ |
|
|
markers.add([ |
|
|
{ |
|
|
{ |
|
|
id: '4', |
|
|
id: "4", |
|
|
styleId: 'marker', |
|
|
styleId: "marker", |
|
|
position: new TMap.LatLng(lat, lng), |
|
|
position: new TMap.LatLng(lat, lng), |
|
|
properties: { |
|
|
properties: { |
|
|
title: 'marker4' |
|
|
title: "marker4", |
|
|
} |
|
|
}, |
|
|
} |
|
|
}, |
|
|
]) |
|
|
]); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
handleSearchMap() { |
|
|
handleSearchMap() { |
|
|
infoWindowList.forEach((infoWindow) => { |
|
|
infoWindowList.forEach((infoWindow) => { |
|
|
infoWindow.close() |
|
|
infoWindow.close(); |
|
|
}) |
|
|
}); |
|
|
infoWindowList.length = 0 |
|
|
infoWindowList.length = 0; |
|
|
markers.setGeometries([]) |
|
|
markers.setGeometries([]); |
|
|
// 在地图显示范围内以给定的关键字搜索地点 |
|
|
// 在地图显示范围内以给定的关键字搜索地点 |
|
|
search |
|
|
search |
|
|
.searchRectangle({ |
|
|
.searchRectangle({ |
|
|
keyword: this.keyWords, |
|
|
keyword: this.keyWords, |
|
|
bounds: map.getBounds() |
|
|
bounds: map.getBounds(), |
|
|
}) |
|
|
}) |
|
|
.then((result) => { |
|
|
.then((result) => { |
|
|
let { data } = result |
|
|
let { data } = result; |
|
|
if (Array.isArray(data) && data.length > 0) { |
|
|
if (Array.isArray(data) && data.length > 0) { |
|
|
const { |
|
|
const { |
|
|
location: { lat, lng } |
|
|
location: { lat, lng }, |
|
|
} = data[0] |
|
|
} = data[0]; |
|
|
|
|
|
|
|
|
|
|
|
map.setCenter(new TMap.LatLng(lat, lng)); |
|
|
map.setCenter(new TMap.LatLng(lat, lng)) |
|
|
this.setMarker(lat, lng); |
|
|
this.setMarker(lat, lng) |
|
|
this.formData.latitude = lat; |
|
|
this.formData.latitude = lat |
|
|
this.formData.longitude = lng; |
|
|
this.formData.longitude = lng |
|
|
this.convert(); |
|
|
this.convert() |
|
|
|
|
|
} else { |
|
|
} else { |
|
|
this.$message.error('未检索到相关位置坐标') |
|
|
this.$message.error("未检索到相关位置坐标"); |
|
|
} |
|
|
} |
|
|
}) |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
handleMoveCenter() { |
|
|
handleMoveCenter() { |
|
|
//修改地图中心点 |
|
|
//修改地图中心点 |
|
|
const center = map.getCenter() |
|
|
const center = map.getCenter(); |
|
|
const lat = center.getLat() |
|
|
const lat = center.getLat(); |
|
|
const lng = center.getLng() |
|
|
const lng = center.getLng(); |
|
|
this.formData.latitude = lat |
|
|
this.formData.latitude = lat; |
|
|
this.formData.longitude = lng |
|
|
this.formData.longitude = lng; |
|
|
this.setMarker(lat, lng) |
|
|
this.setMarker(lat, lng); |
|
|
this.convert(lat, lng) |
|
|
this.convert(lat, lng); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
convert(lat, lng) { |
|
|
convert(lat, lng) { |
|
|
markers.setGeometries([]); |
|
|
markers.setGeometries([]); |
|
|
// var input = document.getElementById('location').value.split(','); |
|
|
// var input = document.getElementById('location').value.split(','); |
|
|
let location |
|
|
let location; |
|
|
if (lat && lng) { |
|
|
if (lat && lng) { |
|
|
location = new TMap.LatLng(lat, lng); |
|
|
location = new TMap.LatLng(lat, lng); |
|
|
} else { |
|
|
} else { |
|
|
location = new TMap.LatLng(this.formData.latitude, this.formData.longitude); |
|
|
location = new TMap.LatLng( |
|
|
|
|
|
this.formData.latitude, |
|
|
|
|
|
this.formData.longitude |
|
|
|
|
|
); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// map.setCenter(location); |
|
|
// map.setCenter(location); |
|
|
markers.updateGeometries([ |
|
|
markers.updateGeometries([ |
|
|
{ |
|
|
{ |
|
|
id: 'main', // 点标注数据数组 |
|
|
id: "main", // 点标注数据数组 |
|
|
position: location, |
|
|
position: location, |
|
|
}, |
|
|
}, |
|
|
]); |
|
|
]); |
|
|
geocoder |
|
|
geocoder |
|
|
.getAddress({ location: location }) // 将给定的坐标位置转换为地址 |
|
|
.getAddress({ location: location }) // 将给定的坐标位置转换为地址 |
|
|
.then((result) => { |
|
|
.then((result) => { |
|
|
|
|
|
if (!this.isFirst) { |
|
|
if (!this.isFirst) {//再次查询时再赋值 |
|
|
//再次查询时再赋值 |
|
|
this.formData.address = result.result.address |
|
|
this.formData.address = result.result.address; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if (this.isFirst) { |
|
|
if (this.isFirst) { |
|
|
this.isFirst = false |
|
|
this.isFirst = false; |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
resetData() { |
|
|
resetData() { |
|
|
|
|
|
|
|
|
this.formData = iniFmData(); |
|
|
this.formData = iniFmData(); |
|
|
this.replayImgList = [] |
|
|
this.replayImgList = []; |
|
|
}, |
|
|
}, |
|
|
// 开启加载动画 |
|
|
// 开启加载动画 |
|
|
startLoading() { |
|
|
startLoading() { |
|
|
@ -754,7 +765,6 @@ export default { |
|
|
scoped |
|
|
scoped |
|
|
></style> |
|
|
></style> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
<style lang="scss"> |
|
|
.el-dialog__body { |
|
|
.el-dialog__body { |
|
|
padding: 0 10px 20px !important; |
|
|
padding: 0 10px 20px !important; |
|
|
|
jiangyy
3 years ago