Commit 3fc2929ea24d92d75cb3fd0d20c97bd42ab4bed4
1 parent
d66883ac
Exists in
dev
fix:区域添加搜索、定位、修复编辑问题
Showing
3 changed files
with
402 additions
and
318 deletions
Show diff stats
1.21 KB
frontend/front/src/views/pages/carMap/index.vue
... | ... | @@ -369,7 +369,7 @@ export default { |
369 | 369 | } |
370 | 370 | } |
371 | 371 | // 创建并添加标记集群 |
372 | - new T.MarkerClusterer(this.map, { markers: this.markers }); | |
372 | + // new T.MarkerClusterer(this.map, { markers: this.markers }); | |
373 | 373 | // 更新加载状态 |
374 | 374 | this.loading = false; |
375 | 375 | // ===========天地图代码============== | ... | ... |
frontend/front/src/views/pages/regionalManage/components/regionManage.vue
... | ... | @@ -5,10 +5,10 @@ |
5 | 5 | <el-form :model="queryForm" ref="queryForm" :inline="true" style="display: flex; justify-content: space-between"> |
6 | 6 | <div> |
7 | 7 | <el-form-item label="区域名称:"> |
8 | - <el-input v-model="queryForm.regionalName" placeholder="请输入姓名" clearable></el-input> | |
8 | + <el-input v-model="queryForm.regionalName" placeholder="请输入姓名" clearable></el-input> | |
9 | 9 | </el-form-item> |
10 | 10 | <el-form-item label="区域类型:"> |
11 | - <el-select v-model="queryForm.regionalType" placeholder="请选择状态" clearable> | |
11 | + <el-select v-model="queryForm.regionalType" placeholder="请选择状态" clearable> | |
12 | 12 | <el-option v-for="item in regionalTypeOptions" :key="item.KEY_" :label="item.NAME_" :value="item.KEY_"> |
13 | 13 | </el-option> |
14 | 14 | </el-select> |
... | ... | @@ -16,77 +16,50 @@ |
16 | 16 | </div> |
17 | 17 | <el-form-item> |
18 | 18 | <el-button type="primary" icon="el-icon-refresh" |
19 | - style="border: 1px solid #5875eb; background: #ffffff; color: #5875eb; border-radius: 5px;" | |
20 | - @click="handleReset" plain>重置 | |
19 | + style="border: 1px solid #5875eb; background: #ffffff; color: #5875eb; border-radius: 5px;" | |
20 | + @click="handleReset" plain>重置 | |
21 | 21 | </el-button> |
22 | 22 | <el-button type="primary" style="background: #5875eb; border: 1px solid #5875eb; border-radius: 5px;" |
23 | - icon="el-icon-search" @click="handleSearch"> 查询 | |
23 | + icon="el-icon-search" @click="handleSearch"> 查询 | |
24 | 24 | </el-button> |
25 | 25 | </el-form-item> |
26 | 26 | </el-form> |
27 | 27 | </el-col> |
28 | 28 | <el-col :span="24" style="margin-bottom: 10px;"> |
29 | - <el-button type="primary" style="background: #5875eb; border: 1px solid #5875eb; border-radius: 5px;" | |
30 | - icon="el-icon-plus" @click=" hanleOpt('add')"> 新增 | |
31 | - </el-button> | |
29 | + <el-button type="primary" style="background: #5875eb; border: 1px solid #5875eb; border-radius: 5px;" | |
30 | + icon="el-icon-plus" @click=" hanleOpt('add')"> 新增 | |
31 | + </el-button> | |
32 | 32 | </el-col> |
33 | 33 | <el-col :span="24" style="height: calc(100% - 95px);overflow: auto;"> |
34 | - <el-table | |
35 | - style="width: 100%" | |
36 | - v-loading="loading" | |
37 | - :data="tableData"> | |
38 | - <el-table-column | |
39 | - type="index" | |
40 | - label="序号"> | |
34 | + <el-table style="width: 100%" v-loading="loading" :data="tableData"> | |
35 | + <el-table-column type="index" label="序号"> | |
41 | 36 | </el-table-column> |
42 | - <el-table-column | |
43 | - prop="f_ssqymc" | |
44 | - label="企业名称"> | |
37 | + <el-table-column prop="f_ssqymc" label="企业名称"> | |
45 | 38 | </el-table-column> |
46 | - <el-table-column | |
47 | - prop="f_name" | |
48 | - label="区域名称"> | |
39 | + <el-table-column prop="f_name" label="区域名称"> | |
49 | 40 | </el-table-column> |
50 | - <el-table-column | |
51 | - prop="f_regional_type" | |
52 | - label="类型"> | |
41 | + <el-table-column prop="f_regional_type" label="类型"> | |
53 | 42 | </el-table-column> |
54 | - <el-table-column | |
55 | - prop="f_shape" | |
56 | - label="区域形状"> | |
43 | + <el-table-column prop="f_shape" label="区域形状"> | |
57 | 44 | </el-table-column> |
58 | - <el-table-column | |
59 | - prop="f_remark" | |
60 | - label="备注"> | |
45 | + <el-table-column prop="f_remark" label="备注"> | |
61 | 46 | </el-table-column> |
62 | - <el-table-column | |
63 | - prop="opt" | |
64 | - width="100" | |
65 | - label="操作"> | |
47 | + <el-table-column prop="opt" width="100" label="操作"> | |
66 | 48 | <template slot-scope="scope"> |
67 | - <el-button type="text" @click="hanleOpt('edit',scope.row)">编辑</el-button> | |
68 | - <el-button type="text" style="color: red;" @click="hanleOpt('delete',scope.row)">删除</el-button> | |
49 | + <el-button type="text" @click="hanleOpt('edit', scope.row)">编辑</el-button> | |
50 | + <el-button type="text" style="color: red;" @click="hanleOpt('delete', scope.row)">删除</el-button> | |
69 | 51 | </template> |
70 | 52 | </el-table-column> |
71 | 53 | </el-table> |
72 | 54 | </el-col> |
73 | 55 | <el-col :span="24"> |
74 | - <el-pagination | |
75 | - style="float: right; margin-top: 10px;" | |
76 | - @size-change="handleSizeChange" | |
77 | - @current-change="handleCurrentChange" | |
78 | - :current-page="pageParam.page" | |
79 | - :page-sizes="[10, 20, 30, 50]" | |
80 | - :page-size="pageParam.size" | |
81 | - layout="total, sizes, prev, pager, next, jumper" | |
82 | - :total="pageParam.total"> | |
56 | + <el-pagination style="float: right; margin-top: 10px;" @size-change="handleSizeChange" | |
57 | + @current-change="handleCurrentChange" :current-page="pageParam.page" :page-sizes="[10, 20, 30, 50]" | |
58 | + :page-size="pageParam.size" layout="total, sizes, prev, pager, next, jumper" :total="pageParam.total"> | |
83 | 59 | </el-pagination> |
84 | 60 | </el-col> |
85 | 61 | </el-row> |
86 | - <el-dialog | |
87 | - :title="dialogParams.title" | |
88 | - :visible.sync="dialogParams.dialogVisible" | |
89 | - width="80%" | |
62 | + <el-dialog :title="dialogParams.title" :visible.sync="dialogParams.dialogVisible" width="80%" | |
90 | 63 | @close="handleDialogClose"> |
91 | 64 | <el-form :model="dialogParams" :inline="true" :rules="dialogRules" ref="dialogParams"> |
92 | 65 | <el-form-item label="区域名称:" prop="regionalName"> |
... | ... | @@ -94,45 +67,43 @@ |
94 | 67 | </el-form-item> |
95 | 68 | <el-form-item label="区域类型:" prop="regionalType"> |
96 | 69 | <el-select v-model="dialogParams.regionalType" clearable placeholder="请选择"> |
97 | - <el-option | |
98 | - v-for="item in regionalTypeOptions" | |
99 | - :key="item.KEY_" | |
100 | - :label="item.NAME_" | |
101 | - :value="item.KEY_"> | |
70 | + <el-option v-for="item in regionalTypeOptions" :key="item.KEY_" :label="item.NAME_" :value="item.KEY_"> | |
102 | 71 | </el-option> |
103 | 72 | </el-select> |
104 | 73 | </el-form-item> |
105 | 74 | <el-form-item label="备注:"> |
106 | - <el-input | |
107 | - clearable | |
108 | - style="width: 100%;" | |
109 | - type="textarea" | |
110 | - placeholder="请输入内容" | |
111 | - v-model="dialogParams.fRemark"> | |
75 | + <el-input clearable style="width: 100%;" type="textarea" placeholder="请输入内容" v-model="dialogParams.fRemark"> | |
112 | 76 | </el-input> |
113 | 77 | </el-form-item> |
114 | 78 | <el-form-item> |
115 | - <el-button :class="[dialogParams.fShape == '多边形'?'clickBtn':'','btn']" @click="draw('polygon','多边形')" style="margin-bottom: 5px">绘制多边形</el-button> | |
116 | - <el-button :class="[dialogParams.fShape == '矩形'?'clickBtn':'','btn']" @click="draw('rectangle','矩形')" style="margin-bottom: 5px">绘制矩形</el-button> | |
117 | - <el-button :class="[dialogParams.fShape == '圆形'?'clickBtn':'','btn']" @click="draw('circle','圆形')" style="margin-bottom: 5px">绘制圆形</el-button> | |
118 | - <el-button @click="closeDraw" v-if="dialogParams.dialogType == 'edit'" style="margin-bottom: 5px">结束编辑</el-button> | |
79 | + <el-button :class="[dialogParams.fShape == '多边形' ? 'clickBtn' : '', 'btn']" @click="draw('polygon', '多边形')" | |
80 | + style="margin-bottom: 5px">绘制多边形</el-button> | |
81 | + <el-button :class="[dialogParams.fShape == '矩形' ? 'clickBtn' : '', 'btn']" @click="draw('rectangle', '矩形')" | |
82 | + style="margin-bottom: 5px">绘制矩形</el-button> | |
83 | + <el-button :class="[dialogParams.fShape == '圆形' ? 'clickBtn' : '', 'btn']" @click="draw('circle', '圆形')" | |
84 | + style="margin-bottom: 5px">绘制圆形</el-button> | |
85 | + <el-button @click="closeDraw" v-if="dialogParams.dialogType == 'edit'" | |
86 | + style="margin-bottom: 5px">结束编辑</el-button> | |
119 | 87 | </el-form-item> |
120 | 88 | </el-form> |
121 | 89 | <el-row> |
122 | 90 | <el-col :span="24"> |
123 | - <div id="mapContainer" style="width: 100%; height: 500px;"></div> | |
91 | + <div id="mainMap"> | |
92 | + <div ref="mapContainer" id="mapContainer" style="width: 100%; height: 500px;"></div> | |
93 | + </div> | |
124 | 94 | </el-col> |
125 | 95 | </el-row> |
126 | 96 | <span slot="footer" class="dialog-footer"> |
127 | - <el-button @click="dialogParams.dialogVisible = false">取 消</el-button> | |
128 | - <el-button type="primary" @click="handleSubmit('dialogParams')">确 定</el-button> | |
129 | - </span> | |
97 | + <el-button @click="dialogParams.dialogVisible = false">取 消</el-button> | |
98 | + <el-button type="primary" @click="handleSubmit('dialogParams')">确 定</el-button> | |
99 | + </span> | |
130 | 100 | </el-dialog> |
131 | 101 | </div> |
132 | 102 | </template> |
133 | 103 | |
134 | 104 | <script> |
135 | 105 | import AMapLoader from '@amap/amap-jsapi-loader'; |
106 | +import locationImg from '@/assets/qpxx/locationImg.png' | |
136 | 107 | import { |
137 | 108 | regionalTablePort, |
138 | 109 | regionalAddEditPort, |
... | ... | @@ -143,120 +114,120 @@ import { |
143 | 114 | } from '@/api/regionalManage' |
144 | 115 | export default { |
145 | 116 | name: "regionManage", |
146 | - props:{ | |
147 | - rowData:{ | |
148 | - type:Object, | |
149 | - default:()=>{} | |
117 | + props: { | |
118 | + rowData: { | |
119 | + type: Object, | |
120 | + default: () => { } | |
150 | 121 | } |
151 | 122 | }, |
152 | 123 | async mounted() { |
153 | 124 | await this.getDataList(); |
154 | 125 | await this.getRegionTypeList(); |
155 | 126 | }, |
156 | - data(){ | |
127 | + data() { | |
157 | 128 | return { |
158 | - loading:false, | |
159 | - tableData:[], | |
160 | - regionalTypeOptions:[ | |
129 | + loading: false, | |
130 | + tableData: [], | |
131 | + regionalTypeOptions: [ | |
161 | 132 | { |
162 | - label:'经营区域', | |
163 | - value:'经营区域' | |
133 | + label: '经营区域', | |
134 | + value: '经营区域' | |
164 | 135 | }, |
165 | 136 | { |
166 | - label:'流动区域', | |
167 | - value:'流动区域' | |
137 | + label: '流动区域', | |
138 | + value: '流动区域' | |
168 | 139 | } |
169 | 140 | ], |
170 | - dialogRules:{ | |
171 | - regionalName:[ | |
172 | - {required:true,message:'请输入区域名称',trigger:'blur'} | |
141 | + dialogRules: { | |
142 | + regionalName: [ | |
143 | + { required: true, message: '请输入区域名称', trigger: 'blur' } | |
173 | 144 | ], |
174 | - regionalType:[ | |
175 | - {required:true,message:'请选择区域类型',trigger:'change'} | |
145 | + regionalType: [ | |
146 | + { required: true, message: '请选择区域类型', trigger: 'change' } | |
176 | 147 | ] |
177 | 148 | }, |
178 | - queryForm:{ | |
179 | - regionalType:'', | |
180 | - regionalName:'', | |
181 | - orgId:'', | |
182 | - tabType:'region' | |
149 | + queryForm: { | |
150 | + regionalType: '', | |
151 | + regionalName: '', | |
152 | + orgId: '', | |
153 | + tabType: 'region' | |
183 | 154 | }, |
184 | - dialogParams:{ | |
185 | - title:'新增区域', | |
186 | - radius:'',//圆形半径 | |
187 | - dialogVisible:false, | |
188 | - fSsczid:'', | |
189 | - fShape:'', | |
190 | - fRemark:'', | |
191 | - id:'', | |
192 | - dialogType:'', | |
193 | - regionalType:'', | |
194 | - regionalName:'', | |
195 | - rectangleNothPoint:[], | |
196 | - rectangleSouthPoint:[], | |
197 | - polygonPoint:[],//多边形坐标点 | |
198 | - centerOfCircle:[],//圆形中心点坐标 | |
155 | + dialogParams: { | |
156 | + title: '新增区域', | |
157 | + radius: '',//圆形半径 | |
158 | + dialogVisible: false, | |
159 | + fSsczid: '', | |
160 | + fShape: '', | |
161 | + fRemark: '', | |
162 | + id: '', | |
163 | + dialogType: '', | |
164 | + regionalType: '', | |
165 | + regionalName: '', | |
166 | + rectangleNothPoint: [], | |
167 | + rectangleSouthPoint: [], | |
168 | + polygonPoint: [],//多边形坐标点 | |
169 | + centerOfCircle: [],//圆形中心点坐标 | |
199 | 170 | }, |
200 | 171 | polygon: null, |
201 | - map:null, | |
202 | - mapEditor:null, | |
203 | - mouseTool:null, | |
204 | - overlays:[], | |
205 | - circleOverlays:[],//圆形中心点的坐标 | |
206 | - centerPoint:[116.403322, 39.920255], | |
207 | - pageParam:{ | |
208 | - page:1, | |
209 | - size:10, | |
210 | - total:0 | |
172 | + map: null, | |
173 | + mapEditor: null, | |
174 | + mouseTool: null, | |
175 | + overlays: [], | |
176 | + circleOverlays: [],//圆形中心点的坐标 | |
177 | + centerPoint: [116.403322, 39.920255], | |
178 | + pageParam: { | |
179 | + page: 1, | |
180 | + size: 10, | |
181 | + total: 0 | |
211 | 182 | }, |
212 | - handler:null, | |
183 | + handler: null, | |
213 | 184 | |
214 | 185 | } |
215 | 186 | }, |
216 | - methods:{ | |
187 | + methods: { | |
217 | 188 | //初始化区域类型的接口数据 |
218 | - async getRegionTypeList(){ | |
219 | - let params =[ | |
189 | + async getRegionTypeList() { | |
190 | + let params = [ | |
220 | 191 | { |
221 | 192 | "key": "PARENT_ID_", |
222 | 193 | "value": "1828635308418162688" |
223 | 194 | } |
224 | 195 | ] |
225 | - await regionTypePort(params).then((res)=>{ | |
196 | + await regionTypePort(params).then((res) => { | |
226 | 197 | const { rows } = res; |
227 | 198 | this.regionalTypeOptions = rows; |
228 | 199 | }) |
229 | 200 | }, |
230 | - async getRegionDetailInfoData(id){ | |
231 | - await regionalDetailInfo({id:id}).then((res)=>{ | |
232 | - console.log('打印详情res======>',res); | |
201 | + async getRegionDetailInfoData(id) { | |
202 | + await regionalDetailInfo({ id: id }).then((res) => { | |
203 | + console.log('打印详情res======>', res); | |
233 | 204 | const { value } = res; |
234 | - const { fShape,fName,fRemark,radius,fBoundary,centerOfCircle,fRegionalType} = value; | |
205 | + const { fShape, fName, fRemark, radius, fBoundary, centerOfCircle, fRegionalType } = value; | |
235 | 206 | this.dialogParams.fRemark = fRemark; |
236 | 207 | this.dialogParams.regionalName = fName; |
237 | 208 | this.dialogParams.regionalType = fRegionalType; |
238 | 209 | this.dialogParams.radius = radius; |
239 | 210 | this.dialogParams.fShape = fShape; |
240 | - console.log('打印fBoundary',JSON.parse(fBoundary)); | |
241 | - this.dialogParams.centerOfCircle = centerOfCircle?centerOfCircle.split(','):[]; | |
211 | + console.log('打印fBoundary', JSON.parse(fBoundary)); | |
212 | + this.dialogParams.centerOfCircle = centerOfCircle ? centerOfCircle.split(',') : []; | |
242 | 213 | let pointfBoundary = JSON.parse(fBoundary).coordinates; |
243 | - if(this.dialogParams.fShape == '矩形'){ | |
244 | - this.dialogParams.rectangleNothPoint =pointfBoundary[0][0]; | |
214 | + if (this.dialogParams.fShape == '矩形') { | |
215 | + this.dialogParams.rectangleNothPoint = pointfBoundary[0][0]; | |
245 | 216 | this.dialogParams.rectangleSouthPoint = pointfBoundary[0][2]; |
246 | 217 | // console.log('打印this.dialogParams.rectangleNothPoint ',this.dialogParams.rectangleNothPoint ,this.dialogParams.rectangleSouthPoint ) |
247 | - }else if(this.dialogParams.fShape == '多边形'){ | |
248 | - console.log('pointfBoundary',pointfBoundary[0]) | |
218 | + } else if (this.dialogParams.fShape == '多边形') { | |
219 | + console.log('pointfBoundary', pointfBoundary[0]) | |
249 | 220 | let array = pointfBoundary.pop(); |
250 | - console.log('打印array',array); | |
221 | + console.log('打印array', array); | |
251 | 222 | this.dialogParams.polygonPoint = array; |
252 | - console.log('打印this.this.dialogParams.polygonPoint ',this.dialogParams.polygonPoint ); | |
223 | + console.log('打印this.this.dialogParams.polygonPoint ', this.dialogParams.polygonPoint); | |
253 | 224 | } |
254 | 225 | |
255 | 226 | }) |
256 | 227 | }, |
257 | 228 | //初始化数据接口 |
258 | - async getDataList(){ | |
259 | - let params= { | |
229 | + async getDataList() { | |
230 | + let params = { | |
260 | 231 | pageBean: { |
261 | 232 | page: this.pageParam.page, |
262 | 233 | pageSize: this.pageParam.size, |
... | ... | @@ -264,7 +235,7 @@ export default { |
264 | 235 | }, |
265 | 236 | querys: [] |
266 | 237 | } |
267 | - if(this.queryForm.regionalName){ | |
238 | + if (this.queryForm.regionalName) { | |
268 | 239 | params.querys.push({ |
269 | 240 | property: "f_name", |
270 | 241 | value: this.queryForm.regionalName, |
... | ... | @@ -273,7 +244,7 @@ export default { |
273 | 244 | operation: "LIKE" |
274 | 245 | }) |
275 | 246 | } |
276 | - if(this.queryForm.regionalType){ | |
247 | + if (this.queryForm.regionalType) { | |
277 | 248 | params.querys.push({ |
278 | 249 | property: "f_regional_type", |
279 | 250 | value: this.queryForm.regionalType, |
... | ... | @@ -282,7 +253,7 @@ export default { |
282 | 253 | operation: "LIKE" |
283 | 254 | }) |
284 | 255 | } |
285 | - if(this.rowData.orgId){ | |
256 | + if (this.rowData.orgId) { | |
286 | 257 | params.querys.push({ |
287 | 258 | property: "orgId", |
288 | 259 | value: this.rowData.orgId, |
... | ... | @@ -292,14 +263,14 @@ export default { |
292 | 263 | }) |
293 | 264 | } |
294 | 265 | this.loading = true; |
295 | - await regionalTablePort(params).then((res)=>{ | |
296 | - console.log('打印区域管理中res====>',res); | |
297 | - const { rows,total } = res; | |
266 | + await regionalTablePort(params).then((res) => { | |
267 | + console.log('打印区域管理中res====>', res); | |
268 | + const { rows, total } = res; | |
298 | 269 | this.tableData = rows; |
299 | 270 | this.pageParam.total = total; |
300 | - setTimeout(()=>{ | |
301 | - this.loading = false; | |
302 | - },500) | |
271 | + setTimeout(() => { | |
272 | + this.loading = false; | |
273 | + }, 500) | |
303 | 274 | }) |
304 | 275 | }, |
305 | 276 | //强调说明:自定义的dom是基于地图对象生成的,并不能像vue一样绑定事件,这里采用jQuery的方式出发的事件。如下 |
... | ... | @@ -340,7 +311,7 @@ export default { |
340 | 311 | AMapLoader.load({ |
341 | 312 | "key": "65f6591039d0e723f91a2bfab50712f7",// 申请好的Web端开发者Key,首次调用 load 时必填 |
342 | 313 | "version": "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15 |
343 | - "plugins": ['AMap.ToolBar', 'AMap.Driving','AMap.InfoWindow', | |
314 | + "plugins": ['AMap.ToolBar', 'AMap.Driving', 'AMap.InfoWindow', | |
344 | 315 | 'AMap.ContextMenu', |
345 | 316 | 'AMap.Heatmap', |
346 | 317 | 'AMap.MouseTool', |
... | ... | @@ -361,13 +332,13 @@ export default { |
361 | 332 | Loca: { |
362 | 333 | version: '2.0' //数据可视化 |
363 | 334 | } |
364 | - }).then((AMap)=>{ | |
365 | - console.log('打印AMap====>',AMap); | |
335 | + }).then((AMap) => { | |
336 | + console.log('打印AMap====>', AMap); | |
366 | 337 | let that = this; |
367 | - if(!this.map){ | |
338 | + if (!this.map) { | |
368 | 339 | // 防止二次初始化导致拖拽失效 |
369 | - this.map = new T.Map('mapContainer',{ | |
370 | - projection: 'EPSG:900913' | |
340 | + this.map = new T.Map('mapContainer', { | |
341 | + projection: 'EPSG:900913' | |
371 | 342 | }); |
372 | 343 | } |
373 | 344 | this.map.clearOverLays(); |
... | ... | @@ -380,13 +351,48 @@ export default { |
380 | 351 | }, 500); |
381 | 352 | |
382 | 353 | var config = { |
383 | - showLabel: true, | |
384 | - color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5 | |
354 | + showLabel: true, | |
355 | + color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5 | |
385 | 356 | }; |
386 | 357 | //创建标注工具对象 |
387 | 358 | this.polygonTool = new T.PolygonTool(this.map, config); |
388 | 359 | |
389 | 360 | |
361 | + // 自定义控件 左上角搜索 | |
362 | + this.newControl = new T.Control({ position: T_ANCHOR_TOP_LEFT }); | |
363 | + this.newControl.onAdd = function (map) { | |
364 | + var container = document.createElement("div"); | |
365 | + var searchInput = document.createElement("input"); | |
366 | + searchInput.placeholder = "输入地点..."; | |
367 | + searchInput.style.cssText = "font-size:12px;margin:5px;background:#fff;padding: 10px;border:none;"; | |
368 | + | |
369 | + var searchButton = that.createButton("搜索", "搜索", 'search', container, "cursor:pointer;"); | |
370 | + searchButton.onclick = function () { | |
371 | + var keyword = searchInput.value; | |
372 | + that.searchLocation(keyword); | |
373 | + }; | |
374 | + | |
375 | + container.appendChild(searchInput); | |
376 | + container.appendChild(searchButton); | |
377 | + return container; | |
378 | + }; | |
379 | + console.log("newControl", this.newControl); | |
380 | + this.map.addControl(this.newControl); | |
381 | + | |
382 | + // 添加定位按钮 右下角定位 | |
383 | + this.locationControl = new T.Control({ position: T_ANCHOR_BOTTOM_RIGHT }); | |
384 | + this.locationControl.onAdd = function (map) { | |
385 | + var container = document.createElement("div"); | |
386 | + var locationButton = that.createButton("", "", 'location', container, "cursor:pointer;",locationImg); | |
387 | + locationButton.onclick = function () { | |
388 | + that.getCurrentLocation(); | |
389 | + }; | |
390 | + container.appendChild(locationButton); | |
391 | + return container; | |
392 | + }; | |
393 | + | |
394 | + this.map.addControl(this.locationControl); | |
395 | + | |
390 | 396 | // this.map = new AMap.Map('mapContainer', {//设置地图容器id |
391 | 397 | // viewMode: '2D', //是否为3D地图模式 |
392 | 398 | // zoom: 16, //初始化地图层级 |
... | ... | @@ -399,7 +405,7 @@ export default { |
399 | 405 | // this.contextMenu.open(this.map, e.lnglat); |
400 | 406 | // this.contextMenuPositon = e.lnglat; //右键菜单位置 |
401 | 407 | // }); |
402 | - | |
408 | + | |
403 | 409 | // let that = this; |
404 | 410 | // this.mouseTool = new AMap.MouseTool(this.map); |
405 | 411 | // this.mouseTool.on('draw',function (e){ |
... | ... | @@ -427,22 +433,28 @@ export default { |
427 | 433 | // that.overlays.push(e.obj); |
428 | 434 | // console.log('打印that.overlays',that.overlays); |
429 | 435 | // }) |
430 | - if(this.dialogParams.dialogType == 'edit'){ | |
436 | + if (this.dialogParams.dialogType == 'edit') { | |
437 | + console.log('dialogParams',JSON.parse(JSON.stringify(this.dialogParams))); | |
431 | 438 | // var editShap = null; |
432 | - if(this.dialogParams.fShape == '圆形'){ | |
439 | + if (this.dialogParams.fShape == '圆形') { | |
433 | 440 | this.handler = new T.Circle(new T.LngLat( |
434 | - this.dialogParams.centerOfCircle[0], | |
441 | + this.dialogParams.centerOfCircle[0], | |
435 | 442 | this.dialogParams.centerOfCircle[1]), |
436 | - parseInt(this.dialogParams.radius),{ | |
437 | - color:"blue", | |
438 | - weight:5, | |
439 | - opacity:0.5, | |
440 | - fillColor:"#FFFFFF", | |
441 | - fillOpacity:0.5, | |
442 | - lineStyle:"solid"}); | |
443 | - this.handler.enableEdit(); | |
444 | - this.handler.on("edit",this.editPointsDrawCircle); | |
445 | - this.map.addOverLay(this.handler); | |
443 | + parseInt(this.dialogParams.radius), { | |
444 | + color: "blue", | |
445 | + weight: 5, | |
446 | + opacity: 0.5, | |
447 | + fillColor: "#FFFFFF", | |
448 | + fillOpacity: 0.5, | |
449 | + lineStyle: "solid" | |
450 | + }); | |
451 | + this.handler.enableEdit(); | |
452 | + this.handler.on("edit", this.editPointsDrawCircle); | |
453 | + const LngLat = new T.LngLat( | |
454 | + this.dialogParams.centerOfCircle[0], | |
455 | + this.dialogParams.centerOfCircle[1]); //圆形中心 | |
456 | + this.map.panTo(LngLat); | |
457 | + this.map.addOverLay(this.handler); | |
446 | 458 | // editShap = new AMap.Circle({ |
447 | 459 | // center: this.dialogParams.centerOfCircle, |
448 | 460 | // radius: this.dialogParams.radius, //半径 |
... | ... | @@ -459,7 +471,7 @@ export default { |
459 | 471 | // zIndex: 50, |
460 | 472 | // }); |
461 | 473 | // this.mapEditor = new AMap.CircleEditor(this.map, editShap); |
462 | - }else if(this.dialogParams.fShape == '矩形'){ | |
474 | + } else if (this.dialogParams.fShape == '矩形') { | |
463 | 475 | // var southWest = new AMap.LngLat(this.dialogParams.rectangleSouthPoint[0], this.dialogParams.rectangleSouthPoint[1]) |
464 | 476 | // var northEast = new AMap.LngLat(this.dialogParams.rectangleNothPoint[0], this.dialogParams.rectangleNothPoint[1]) |
465 | 477 | // var bounds = new AMap.Bounds(southWest, northEast) |
... | ... | @@ -479,15 +491,17 @@ export default { |
479 | 491 | // }); |
480 | 492 | // this.mapEditor = new AMap.RectangleEditor(this.map, editShap); |
481 | 493 | var bounds = new T.LngLatBounds(new T.LngLat( |
482 | - this.dialogParams.rectangleSouthPoint[0], | |
483 | - this.dialogParams.rectangleSouthPoint[1]), | |
484 | - new T.LngLat( | |
485 | - this.dialogParams.rectangleNothPoint[0], | |
486 | - this.dialogParams.rectangleNothPoint[1] | |
487 | - )); | |
494 | + this.dialogParams.rectangleSouthPoint[0], | |
495 | + this.dialogParams.rectangleSouthPoint[1]), | |
496 | + new T.LngLat( | |
497 | + this.dialogParams.rectangleNothPoint[0], | |
498 | + this.dialogParams.rectangleNothPoint[1] | |
499 | + )); | |
488 | 500 | this.handler = new T.Rectangle(bounds); |
489 | 501 | this.handler.enableEdit(); |
490 | - this.handler.on("edit",this.editPointsDrawRectangle); | |
502 | + this.handler.on("edit", this.editPointsDrawRectangle); | |
503 | + const LngLat = bounds.getCenter(); //矩形中心 | |
504 | + this.map.panTo(LngLat); | |
491 | 505 | this.map.addOverLay(this.handler); |
492 | 506 | } else { |
493 | 507 | // editShap = new AMap.Polygon({ |
... | ... | @@ -501,36 +515,37 @@ export default { |
501 | 515 | // }); |
502 | 516 | // this.mapEditor = new AMap.PolyEditor(this.map, editShap); |
503 | 517 | var points = []; |
504 | - this.dialogParams.polygonPoint.map(item =>{ | |
518 | + this.dialogParams.polygonPoint.map(item => { | |
505 | 519 | points.push(new T.LngLat(item[0], item[1])); |
506 | 520 | }) |
507 | - this.handler = new T.Polygon(points,{ | |
508 | - color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5 | |
521 | + this.handler = new T.Polygon(points, { | |
522 | + color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5 | |
509 | 523 | }); |
510 | 524 | //向地图上添加面 |
511 | - this.handler.enableEdit(); | |
512 | - this.handler.on("edit",this.editPointsDrawPolygon); | |
513 | - this.map.addOverLay(this.handler); | |
525 | + this.handler.enableEdit(); | |
526 | + this.handler.on("edit", this.editPointsDrawPolygon); | |
527 | + this.map.setViewport(points); | |
528 | + this.map.addOverLay(this.handler); | |
514 | 529 | } |
515 | 530 | return |
516 | 531 | editShap.setMap(this.map); |
517 | 532 | // 缩放地图到合适的视野级别 |
518 | - this.map.setFitView([ editShap ]); | |
533 | + this.map.setFitView([editShap]); | |
519 | 534 | this.mapEditor.open(); |
520 | - this.mapEditor.on('end', function(event) { | |
521 | - if(that.dialogParams.fShape == '圆形'){ | |
535 | + this.mapEditor.on('end', function (event) { | |
536 | + if (that.dialogParams.fShape == '圆形') { | |
522 | 537 | let editCircleCenterPoint = event.target.getCenter(); //获取圆形坐标点 |
523 | 538 | let editCircleRadius = event.target.getRadius();//获取半径 |
524 | 539 | that.dialogParams.radius = editCircleRadius; |
525 | 540 | let editCirclePointList = [ |
526 | 541 | { |
527 | - jd:editCircleCenterPoint.lng, | |
528 | - wd:editCircleCenterPoint.lat | |
542 | + jd: editCircleCenterPoint.lng, | |
543 | + wd: editCircleCenterPoint.lat | |
529 | 544 | } |
530 | 545 | ]; |
531 | 546 | that.circleOverlays = editCirclePointList; |
532 | - }else if(that.dialogParams.fShape == '矩形'){ | |
533 | - console.log('触发事件: end=====>',event); | |
547 | + } else if (that.dialogParams.fShape == '矩形') { | |
548 | + console.log('触发事件: end=====>', event); | |
534 | 549 | } |
535 | 550 | that.overlays.push(event.target); |
536 | 551 | // event.target 即为编辑后的圆形对象 |
... | ... | @@ -538,38 +553,82 @@ export default { |
538 | 553 | } |
539 | 554 | }) |
540 | 555 | }, |
556 | + createButton(title, label, className, container, cssText,backgroundImageUrl) { | |
557 | + var button = document.createElement("button"); | |
558 | + button.title = title; | |
559 | + button.innerHTML = label; | |
560 | + button.className = className; | |
561 | + button.style.cssText = cssText + `; background-image: url(${backgroundImageUrl}); background-size: cover;`; | |
562 | + container.appendChild(button); | |
563 | + return button; | |
564 | + }, | |
565 | + // 点击搜索 | |
566 | + searchLocation(keyword) { | |
567 | + this.map.clearOverLays(); | |
568 | + var geocoder = new T.Geocoder(); | |
569 | + geocoder.getPoint(keyword, this.searchResult); | |
570 | + }, | |
571 | + searchResult(result) { | |
572 | + let that = this; | |
573 | + console.log("搜索结果", result); | |
574 | + if (result.getStatus() == 0) { | |
575 | + that.map.panTo(result.getLocationPoint(), 16); | |
576 | + //创建标注对象 | |
577 | + var marker = new T.Marker(result.getLocationPoint()); | |
578 | + console.log("marker", marker); | |
579 | + //向地图上添加标注 | |
580 | + that.map.addOverLay(marker); | |
581 | + } else { | |
582 | + alert(result.getMsg()); | |
583 | + } | |
584 | + }, | |
585 | + getCurrentLocation() { | |
586 | + if (navigator.geolocation) { | |
587 | + navigator.geolocation.getCurrentPosition(function (position) { | |
588 | + console.log("position", position); | |
589 | + var lng = position.coords.longitude; | |
590 | + var lat = position.coords.latitude; | |
591 | + this.map.setCenter(new T.LngLat(lng, lat)); | |
592 | + }, function (res) { | |
593 | + console.log("定位失败", res); | |
594 | + alert("定位失败,请允许位置权限。", res); | |
595 | + }); | |
596 | + } else { | |
597 | + alert("浏览器不支持定位。"); | |
598 | + } | |
599 | + }, | |
541 | 600 | //结束编辑 |
542 | - closeDraw(){ | |
601 | + closeDraw() { | |
543 | 602 | // this.mapEditor.close(); |
544 | 603 | this.handler.disableEdit(); |
545 | 604 | }, |
546 | - getPointsDrawPolygon(e){ | |
605 | + getPointsDrawPolygon(e) { | |
547 | 606 | let that = this; |
548 | 607 | let arry = e.currentLnglats; |
549 | 608 | arry.forEach(item => { |
550 | - that.overlays.push({ | |
551 | - jd:item.lng, | |
552 | - wd:item.lat | |
609 | + that.overlays.push({ | |
610 | + jd: item.lng, | |
611 | + wd: item.lat | |
553 | 612 | }); |
554 | 613 | }); |
555 | 614 | that.overlays.push(that.overlays[0]) |
556 | - console.log('多边形overlays===',JSON.parse(JSON.stringify(this.overlays))); | |
615 | + console.log('多边形overlays===', JSON.parse(JSON.stringify(this.overlays))); | |
557 | 616 | }, |
558 | 617 | // 编辑多边形 |
559 | - editPointsDrawPolygon(e){ | |
618 | + editPointsDrawPolygon(e) { | |
560 | 619 | let that = this; |
561 | 620 | let lines = this.handler.getLngLats(); |
562 | 621 | let arry = lines[0]; |
563 | 622 | arry.forEach(item => { |
564 | - that.overlays.push({ | |
565 | - jd:item.lng, | |
566 | - wd:item.lat | |
623 | + that.overlays.push({ | |
624 | + jd: item.lng, | |
625 | + wd: item.lat | |
567 | 626 | }); |
568 | 627 | }); |
569 | 628 | that.overlays.push(that.overlays[0]) |
570 | - console.log('编辑多边形overlays===',JSON.parse(JSON.stringify(this.overlays))); | |
629 | + console.log('编辑多边形overlays===', JSON.parse(JSON.stringify(this.overlays))); | |
571 | 630 | }, |
572 | - getPointsDrawRectangle(e){ | |
631 | + getPointsDrawRectangle(e) { | |
573 | 632 | let that = this; |
574 | 633 | let arry = e.currentBounds; |
575 | 634 | let southwest = { jd: arry.Lq.lng, wd: arry.Lq.lat }; // 西南角 |
... | ... | @@ -578,11 +637,11 @@ export default { |
578 | 637 | let southeast = { jd: arry.Lq.lng, wd: arry.Lq.lat }; // 东南角 |
579 | 638 | // 将四个角点推入 overlays 数组 |
580 | 639 | that.overlays = [southwest, northwest, northeast, southeast]; |
581 | - console.log("矩形===",this.overlays); | |
640 | + console.log("矩形===", this.overlays); | |
582 | 641 | }, |
583 | 642 | //编辑矩形 |
584 | - editPointsDrawRectangle(e){ | |
585 | - console.log("编辑矩形",e); | |
643 | + editPointsDrawRectangle(e) { | |
644 | + console.log("编辑矩形", e); | |
586 | 645 | // console.log("矩形范围",this.handler.getBounds()); |
587 | 646 | let that = this; |
588 | 647 | let arry = e.target.Qr; |
... | ... | @@ -592,77 +651,78 @@ export default { |
592 | 651 | let southeast = { jd: arry.Lq.lng, wd: arry.Lq.lat }; // 东南角 |
593 | 652 | // 将四个角点推入 overlays 数组 |
594 | 653 | that.overlays = [southwest, northwest, northeast, southeast]; |
595 | - console.log("矩形===",this.overlays); | |
654 | + console.log("矩形===", this.overlays); | |
596 | 655 | }, |
597 | - getPointsDrawCircle(e){ | |
598 | - console.log("圆形",e); | |
656 | + getPointsDrawCircle(e) { | |
657 | + console.log("圆形", e); | |
599 | 658 | let arry = e.currentCenter; |
600 | 659 | let circleRadius = e.currentRadius |
601 | - this.overlays = [{jd:arry.lng, wd:arry.lat}] | |
602 | - this.circleOverlays = [{jd:arry.lng, wd:arry.lat}] | |
660 | + this.overlays = [{ jd: arry.lng, wd: arry.lat }] | |
661 | + this.circleOverlays = [{ jd: arry.lng, wd: arry.lat }] | |
603 | 662 | this.dialogParams.radius = circleRadius |
604 | 663 | }, |
605 | 664 | // 编辑圆形 |
606 | - editPointsDrawCircle(e){ | |
607 | - console.log("编辑圆形e",e); | |
608 | - let center,radius; | |
665 | + editPointsDrawCircle(e) { | |
666 | + console.log("编辑圆形e", e); | |
667 | + let center, radius; | |
609 | 668 | center = this.handler.getCenter(); |
610 | 669 | radius = this.handler.getRadius(); |
611 | - this.overlays = [{jd:center.lng, wd:center.lat}]; | |
612 | - this.circleOverlays = [{jd:center.lng, wd:center.lat}]; | |
670 | + this.overlays = [{ jd: center.lng, wd: center.lat }]; | |
671 | + this.circleOverlays = [{ jd: center.lng, wd: center.lat }]; | |
613 | 672 | this.dialogParams.radius = radius; |
614 | 673 | }, |
615 | 674 | //draw 绘制圆形,矩形,多边形 |
616 | - draw(type,shapType){ | |
617 | - if(this.dialogParams.dialogType == 'edit'){ | |
618 | - if(this.handler){ | |
619 | - this.handler.close(); | |
620 | - } | |
675 | + draw(type, shapType) { | |
676 | + if (this.dialogParams.dialogType == 'edit') { | |
677 | + // if (this.handler) { | |
678 | + // this.handler.close(); | |
679 | + // } | |
680 | + this.map.clearOverLays(); | |
621 | 681 | // this.handler.clear(); |
622 | 682 | // this.mapEditor.close(); |
623 | 683 | } |
624 | 684 | this.overlays = []; |
625 | 685 | this.dialogParams.fShape = shapType; |
626 | - switch (type){ | |
627 | - case 'polygon':{ | |
628 | - if (this.handler) { | |
629 | - this.handler.close(); | |
630 | - this.handler.clear(); | |
631 | - } | |
686 | + switch (type) { | |
687 | + case 'polygon': { | |
688 | + // if (this.handler) { | |
689 | + // this.handler.close(); | |
690 | + // this.handler.clear(); | |
691 | + // } | |
632 | 692 | this.handler = new T.PolygonTool(this.map); |
633 | 693 | this.handler.open(); |
634 | - this.handler.addEventListener("draw",this.getPointsDrawPolygon); | |
635 | - | |
694 | + this.handler.addEventListener("draw", this.getPointsDrawPolygon); | |
695 | + | |
636 | 696 | // this.mouseTool.polygon({ |
637 | 697 | // fillColor:'#00b0ff', |
638 | 698 | // strokeColor:'#80d8ff' |
639 | 699 | // }); |
640 | 700 | break; |
641 | 701 | } |
642 | - case 'rectangle':{ | |
643 | - if (this.handler) { | |
644 | - this.handler.close(); | |
645 | - this.handler.clear(); | |
646 | - } | |
647 | - this.handler = new T.RectangleTool(this.map, {follow: true}); | |
702 | + case 'rectangle': { | |
703 | + // if (this.handler) { | |
704 | + // this.handler.close(); | |
705 | + // this.handler.clear(); | |
706 | + // } | |
707 | + this.handler = new T.RectangleTool(this.map, { follow: true }); | |
648 | 708 | this.handler.open(); |
649 | - this.handler.addEventListener("draw",this.getPointsDrawRectangle); | |
650 | - | |
709 | + this.handler.addEventListener("draw", this.getPointsDrawRectangle); | |
710 | + | |
651 | 711 | // this.mouseTool.rectangle({ |
652 | 712 | // fillColor:'#00b0ff', |
653 | 713 | // strokeColor:'#80d8ff' |
654 | 714 | // }); |
655 | 715 | break; |
656 | 716 | } |
657 | - case 'circle':{ | |
658 | - if (this.handler) { | |
659 | - this.handler.close(); | |
660 | - this.handler.clear(); | |
661 | - } | |
662 | - this.handler = new T.CircleTool(this.map, {follow: true}); | |
717 | + case 'circle': { | |
718 | + // if (this.handler) { | |
719 | + // this.handler.close(); | |
720 | + // this.handler.clear(); | |
721 | + // } | |
722 | + this.handler = new T.CircleTool(this.map, { follow: true }); | |
663 | 723 | this.handler.open(); |
664 | - this.handler.addEventListener("draw",this.getPointsDrawCircle); | |
665 | - | |
724 | + this.handler.addEventListener("draw", this.getPointsDrawCircle); | |
725 | + | |
666 | 726 | // this.mouseTool.circle({ |
667 | 727 | // fillColor:'#00b0ff', |
668 | 728 | // strokeColor:'#80d8ff' |
... | ... | @@ -672,95 +732,104 @@ export default { |
672 | 732 | } |
673 | 733 | }, |
674 | 734 | //提交事件 |
675 | - async handleSubmit(formName){ | |
676 | - this.$refs[formName].validate(async (valid) => { | |
677 | - if (valid) { | |
678 | - console.log('打印this.overlays',this.overlays) | |
679 | - if(this.overlays.length<=0){ | |
680 | - this.$message.warning('请规划区域!'); | |
681 | - return; | |
682 | - } | |
683 | - // let jwdDTOListArray = this.overlays[0].getPath().map((item)=>{ | |
684 | - // console.log("item222",item); | |
685 | - // return { | |
686 | - // jd:item.lng, | |
687 | - // wd:item.lat | |
688 | - // } | |
689 | - // }); | |
735 | + async handleSubmit(formName) { | |
736 | + this.$refs[formName].validate(async (valid) => { | |
737 | + if (valid) { | |
738 | + console.log('打印this.overlays', this.overlays) | |
739 | + if (this.overlays.length <= 0) { | |
740 | + this.$message.warning('请规划区域!'); | |
741 | + return; | |
742 | + } | |
743 | + // let jwdDTOListArray = this.overlays[0].getPath().map((item)=>{ | |
744 | + // console.log("item222",item); | |
745 | + // return { | |
746 | + // jd:item.lng, | |
747 | + // wd:item.lat | |
748 | + // } | |
749 | + // }); | |
690 | 750 | // jwdDTOListArray.push(jwdDTOListArray); |
691 | - let jwdDTOListArray = this.overlays | |
692 | - console.log("jwdDTOListArray",jwdDTOListArray); | |
693 | - let params= { | |
694 | - id:this.dialogParams.id, | |
695 | - fName: this.dialogParams.regionalName, | |
696 | - fSsczid: this.dialogParams.fSsczid, | |
697 | - fRegionalType: this.dialogParams.regionalType, | |
698 | - fShape: this.dialogParams.fShape, | |
699 | - fRemark:this.dialogParams.fRemark, | |
700 | - jwdDTOList:this.dialogParams.fShape == '圆形'?this.circleOverlays:jwdDTOListArray | |
701 | - } | |
702 | - if(this.dialogParams.fShape == '圆形'){ | |
703 | - params ={ | |
704 | - ...params, | |
705 | - radius:this.dialogParams.radius | |
706 | - } | |
707 | - } | |
708 | - console.log("params",params); | |
709 | - // return; | |
710 | - await regionalAddEditPort(params).then((res)=>{ | |
711 | - this.dialogParams.dialogVisible = false; | |
712 | - // this.mouseTool.close(true); | |
713 | - this.overlays = []; | |
714 | - this.handleSearch(); | |
715 | - this.pageParam.page = 1; | |
716 | - }) | |
717 | - } else { | |
718 | - return false; | |
719 | - } | |
720 | - }); | |
751 | + let jwdDTOListArray = this.overlays | |
752 | + console.log("jwdDTOListArray", jwdDTOListArray); | |
753 | + let params = { | |
754 | + id: this.dialogParams.id, | |
755 | + fName: this.dialogParams.regionalName, | |
756 | + fSsczid: this.dialogParams.fSsczid, | |
757 | + fRegionalType: this.dialogParams.regionalType, | |
758 | + fShape: this.dialogParams.fShape, | |
759 | + fRemark: this.dialogParams.fRemark, | |
760 | + jwdDTOList: this.dialogParams.fShape == '圆形' ? this.circleOverlays : jwdDTOListArray | |
761 | + } | |
762 | + if (this.dialogParams.fShape == '圆形') { | |
763 | + params = { | |
764 | + ...params, | |
765 | + radius: this.dialogParams.radius | |
766 | + } | |
767 | + } | |
768 | + console.log("params", params); | |
769 | + // return; | |
770 | + await regionalAddEditPort(params).then((res) => { | |
771 | + this.dialogParams.dialogVisible = false; | |
772 | + // this.mouseTool.close(true); | |
773 | + this.overlays = []; | |
774 | + this.handleSearch(); | |
775 | + this.pageParam.page = 1; | |
776 | + }) | |
777 | + } else { | |
778 | + return false; | |
779 | + } | |
780 | + }); | |
721 | 781 | }, |
722 | 782 | //弹窗关闭 |
723 | - handleDialogClose(){ | |
783 | + handleDialogClose() { | |
784 | + let that = this; | |
724 | 785 | this.$refs.dialogParams.resetFields(); |
725 | 786 | this.dialogParams.dialogVisible = false; |
726 | 787 | // this.mouseTool.close(true); |
727 | - this.overlays = []; | |
728 | - | |
788 | + this.overlays = []; | |
789 | + if (this.map) { | |
790 | + console.log("this.map",this.map); | |
791 | + this.map.clearOverLays(); // 清除覆盖物 | |
792 | + this.map.clearLayers(); | |
793 | + this.map.removeControl(this.newControl); | |
794 | + this.map.removeControl(this.locationControl); | |
795 | + // this.map = null; // 释放地图实例 | |
796 | + } | |
797 | + // this.$refs.mapContainer.remove(); | |
729 | 798 | }, |
730 | 799 | //分页功能的size改变事件 |
731 | - handleSizeChange(val){ | |
800 | + handleSizeChange(val) { | |
732 | 801 | this.pageParam.size = val; |
733 | 802 | this.handleSearch(); |
734 | 803 | }, |
735 | 804 | //分页功能page改变事件 |
736 | - handleCurrentChange(val){ | |
805 | + handleCurrentChange(val) { | |
737 | 806 | this.pageParam.page = val; |
738 | 807 | this.handleSearch(); |
739 | 808 | }, |
740 | 809 | //操作栏按钮 |
741 | - hanleOpt(type,row){ | |
742 | - console.log('打印row=====>',row); | |
743 | - this.dialogParams.dialogType= type; | |
744 | - switch (type){ | |
810 | + hanleOpt(type, row) { | |
811 | + console.log('打印row=====>', row); | |
812 | + this.dialogParams.dialogType = type; | |
813 | + switch (type) { | |
745 | 814 | case 'add': |
746 | 815 | this.handler = null; |
747 | 816 | this.dialogParams.fSsczid = this.rowData.fSsczid; |
748 | - this.dialogParams.id =''; | |
817 | + this.dialogParams.id = ''; | |
749 | 818 | this.dialogParams.radius = ''; |
750 | 819 | this.dialogParams.fShape = ''; |
751 | 820 | this.dialogParams.fRemark = ''; |
752 | - this.dialogParams.regionalType =''; | |
753 | - this.dialogParams.regionalName =''; | |
754 | - this.dialogParams.rectangleNothPoint =[]; | |
755 | - this.dialogParams.rectangleSouthPoint=[]; | |
821 | + this.dialogParams.regionalType = ''; | |
822 | + this.dialogParams.regionalName = ''; | |
823 | + this.dialogParams.rectangleNothPoint = []; | |
824 | + this.dialogParams.rectangleSouthPoint = []; | |
756 | 825 | this.dialogParams.polygonPoint = [];//多边形坐标点 |
757 | 826 | this.dialogParams.centerOfCircle = [];//圆形中心点坐标 |
758 | - this.dialogParams.title='新增区域'; | |
827 | + this.dialogParams.title = '新增区域'; | |
759 | 828 | break; |
760 | 829 | case 'edit': |
761 | 830 | this.dialogParams.fSsczid = row.f_ssczid; |
762 | 831 | this.dialogParams.id = row.id_; |
763 | - this.dialogParams.title='编辑区域'; | |
832 | + this.dialogParams.title = '编辑区域'; | |
764 | 833 | this.getRegionDetailInfoData(row.id_); |
765 | 834 | break; |
766 | 835 | case 'delete': |
... | ... | @@ -768,9 +837,9 @@ export default { |
768 | 837 | confirmButtonText: '确定', |
769 | 838 | cancelButtonText: '取消', |
770 | 839 | type: 'warning', |
771 | - }).then(async() => { | |
772 | - await regionDeletePort(row.id_).then((res)=>{ | |
773 | - if(res.code == 200){ | |
840 | + }).then(async () => { | |
841 | + await regionDeletePort(row.id_).then((res) => { | |
842 | + if (res.code == 200) { | |
774 | 843 | this.$message.success('删除区域成功!'); |
775 | 844 | } |
776 | 845 | this.handleSearch(); |
... | ... | @@ -778,33 +847,33 @@ export default { |
778 | 847 | }) |
779 | 848 | break |
780 | 849 | } |
781 | - if(!this.rowData.fSsczid && type == 'add'){ | |
850 | + if (!this.rowData.fSsczid && type == 'add') { | |
782 | 851 | this.$message.warning('请选择气站!') |
783 | 852 | return |
784 | 853 | } |
785 | - if(type !=='delete'){ | |
854 | + if (type !== 'delete') { | |
786 | 855 | this.dialogParams.dialogVisible = true; |
787 | - this.$nextTick(()=>{ | |
856 | + this.$nextTick(() => { | |
788 | 857 | this.initializeMap(); |
789 | 858 | }) |
790 | 859 | } |
791 | 860 | console.log('打印是否触发新增功能'); |
792 | 861 | }, |
793 | 862 | //重置按钮事件 |
794 | - handleReset(){ | |
795 | - this.queryForm.regionalType =''; | |
796 | - this.queryForm.regionalName =''; | |
863 | + handleReset() { | |
864 | + this.queryForm.regionalType = ''; | |
865 | + this.queryForm.regionalName = ''; | |
797 | 866 | this.pageParam.page = 1; |
798 | 867 | this.handleSearch(); |
799 | 868 | }, |
800 | 869 | //查询按钮事件 |
801 | - handleSearch(){ | |
870 | + handleSearch() { | |
802 | 871 | this.getDataList(); |
803 | 872 | }, |
804 | 873 | //新增用户事件 |
805 | - handleAdd(){ | |
874 | + handleAdd() { | |
806 | 875 | this.showDialog = true; |
807 | - this.$nextTick(()=>{ | |
876 | + this.$nextTick(() => { | |
808 | 877 | this.$refs.showDialog.open('add'); |
809 | 878 | }) |
810 | 879 | } |
... | ... | @@ -813,13 +882,28 @@ export default { |
813 | 882 | </script> |
814 | 883 | |
815 | 884 | <style lang="scss" scoped> |
816 | -.clickBtn{ | |
817 | - background-color:#5875eb; | |
885 | +.clickBtn { | |
886 | + background-color: #5875eb; | |
818 | 887 | color: #ffffff; |
819 | 888 | } |
820 | -.componentSty{ | |
889 | +::v-deep .location{ | |
890 | + width: 30px; | |
891 | + height: 30px; | |
892 | + border: none; | |
893 | + background:rgba(0,0,0,0); | |
894 | +} | |
895 | + | |
896 | +::v-deep .search{ | |
897 | + width:50px; | |
898 | + padding: 10px; | |
899 | + border: 1px solid #fff; | |
900 | + border-radius: 5px; | |
901 | + color: #000; | |
902 | + background:#fff; | |
903 | +} | |
904 | + | |
905 | +.componentSty { | |
821 | 906 | height: 100%; |
822 | 907 | width: calc(100% - 2px); |
823 | 908 | } |
824 | - | |
825 | 909 | </style> | ... | ... |