ZongYue / lpg

Download as
Browse Code »

Commit 3fc2929ea24d92d75cb3fd0d20c97bd42ab4bed4

Authored by 郭伟龙
1 parent d66883ac
Exists in dev

fix:区域添加搜索、定位、修复编辑问题

Showing 3 changed files with 402 additions and 318 deletions   Show diff stats
frontend/front/src/assets/qpxx/locationImg.png 0 → 100644
View file @3fc2929

1.21 KB
frontend/front/src/views/pages/carMap/index.vue
  Diff comments   View file @3fc2929
... ... @@ -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
  Diff comments   View file @3fc2929
... ... @@ -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>
... ...