From b9698fdce1734673e847ee5f62244dfd27077027 Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期三, 11 一月 2023 15:33:36 +0800
Subject: [PATCH] 地图功能
---
src/views/systemSetting/device/grid/components/components/dialogForm.vue | 23 +++++++
src/views/systemSetting/device/grid/components/components/map.vue | 122 +++++++++++++++++++++++++++++-----------
src/views/systemSetting/device/grid/components/main/index.vue | 28 ++++-----
3 files changed, 121 insertions(+), 52 deletions(-)
diff --git a/src/views/systemSetting/device/grid/components/components/dialogForm.vue b/src/views/systemSetting/device/grid/components/components/dialogForm.vue
index 3f2ca32..7dba592 100644
--- a/src/views/systemSetting/device/grid/components/components/dialogForm.vue
+++ b/src/views/systemSetting/device/grid/components/components/dialogForm.vue
@@ -39,7 +39,8 @@
</el-form-item>
<el-form-item class="optionItem" label="鎻忚堪:" prop="description">
- <el-input type="textarea"
+ <el-input
+ type="textarea"
v-model="form.description"
placeholder="璇峰～鍐欐弿杩�"
:rows="4"
@@ -48,7 +49,10 @@
<el-form-item class="optionItem" label="璐ｄ换鍖哄煙:" prop="region">
<Map
- style="width: 400px; height: 300px"
+ :point="point"
+ :zoom="zoom"
+ @getRegion="getRegion"
+ style="width: 600px; height: 400px"
:region="form.region"
></Map>
</el-form-item>
@@ -111,11 +115,18 @@
children: "children",
label: "departName",
},
+ point: { x: "119.27179890", y: "28.59027084" },
+ zoom: 15,
};
},
created() {
// 鍒濆鍖栨暟鎹�
this.form = this.info;
+ if (this.info.center) {
+ var center = JSON.parse(this.info.center);
+ this.point = { x: center[0], y: center[1] };
+ this.zoom = this.info.zoom;
+ }
},
watch: {
@@ -152,6 +163,14 @@
}
});
},
+ getRegion(e) {
+ this.form.center = JSON.stringify([
+ e.map.getCenter().lng,
+ e.map.getCenter().lat,
+ ]);
+ this.form.zoom = e.map.getZoom();
+ this.form.region = JSON.stringify(e.path);
+ },
},
props: ["info", "closeDialog"],
};
diff --git a/src/views/systemSetting/device/grid/components/components/map.vue b/src/views/systemSetting/device/grid/components/components/map.vue
index 0a4fd03..b954da3 100644
--- a/src/views/systemSetting/device/grid/components/components/map.vue
+++ b/src/views/systemSetting/device/grid/components/components/map.vue
@@ -1,5 +1,27 @@
<template>
- <div id="container"></div>
+ <div>
+ <div id="container"></div>
+ <div class="optionBtn">
+ <el-button
+ type="primary"
+ class="btn submit"
+ @click.native.prevent="handleRanging"
+ >娴嬭窛
+ </el-button>
+ <el-button
+ type="primary"
+ class="btn submit"
+ @click.native.prevent="handleDraw"
+ >鐢荤嚎
+ </el-button>
+ <el-button
+ type="primary"
+ class="btn submit"
+ @click.native.prevent="handleDelete"
+ >鍒犻櫎
+ </el-button>
+ </div>
+ </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
@@ -7,33 +29,56 @@
data() {
return {
map: null,
+ mouseTool: null,
+ ruler: null,
_point: { x: "119.27179890", y: "28.59027084" },
_zoom: 15,
};
},
- created() {
- },
+ created() {},
methods: {
locationMap() {
const that = this;
- that.map.setZoomAndCenter(that.zoom, [that.point.x, that.point.y]);
- if (that.mark) {
- // 鍒涘缓涓�涓� Marker 瀹炰緥锛�
- var marker = new AMap.Marker({
- position: new AMap.LngLat(that._point.x, that._point.y), // 缁忕含搴﹀璞★紝涔熷彲浠ユ槸缁忕含搴︽瀯鎴愮殑涓�缁存暟缁刐116.39, 39.9]
- title: that.mark.title,
- });
+ that.zoom = that.zoom || that._zoom;
+ that.point = that.point || that._point;
+ that.map.setZoomAndCenter(that.zoom, [that.point.x, that.point.y]);
- // 灏嗗垱寤虹殑鐐规爣璁版坊鍔犲埌宸叉湁鐨勫湴鍥惧疄渚嬶細
- that.map.add(marker);
- marker.on('click',function(e){
- console.log('666')
- that.$emit('fatherMethod')
- // that.$parent.fatherMethod();
+ if (this.region) {
+ let polygon = new AMap.Polygon({
+ path: eval(this.region),
+ fillColor: "#ccebc5",
+ strokeOpacity: 1,
+ fillOpacity: 0.5,
+ strokeColor: "#2b8cbe",
+ strokeWeight: 1,
+ strokeStyle: "dashed",
+ strokeDasharray: [5, 5],
+ });
- })
- }
-
+ that.map.add(polygon);
+ } else {
+ that.mouseTool.polygon({
+ fillColor: "#00b0ff",
+ strokeColor: "#80d8ff",
+ //鍚孭olygon鐨凮ption璁剧疆
+ });
+ }
+ },
+ handleRanging() {
+ this.ruler.turnOn();
+ this.mouseTool.close(false);
+ },
+ handleDraw() {
+ this.ruler.turnOff();
+ this.mouseTool.close(false);
+ this.mouseTool.polygon({
+ fillColor: "#00b0ff",
+ strokeColor: "#80d8ff",
+ //鍚孭olygon鐨凮ption璁剧疆
+ });
+ },
+ handleDelete() {
+ this.map.clearMap();
},
},
mounted() {
@@ -41,28 +86,22 @@
AMapLoader.load({
key: "091ade377d4db40f68cc78cb9658ce8d", // 鐢宠濂界殑Web绔紑鍙戣�匥ey锛岄娆¤皟鐢� load 鏃跺繀濉�
version: "2.0", // 鎸囧畾瑕佸姞杞界殑 JSAPI 鐨勭増鏈紝缂虹渷鏃堕粯璁や负 1.4.15
- plugins: [], // 闇�瑕佷娇鐢ㄧ殑鐨勬彃浠跺垪琛紝濡傛瘮渚嬪昂'AMap.Scale'绛�
+ plugins: ["AMap.MouseTool", "AMap.RangingTool"], // 闇�瑕佷娇鐢ㄧ殑鐨勬彃浠跺垪琛紝濡傛瘮渚嬪昂'AMap.Scale'绛�
})
.then((AMap) => {
- that.map = new AMap.Map("container");
+ that.map = new AMap.Map("container",{resizeEnable: true});
+ that.mouseTool = new AMap.MouseTool(that.map);
+ that.mouseTool.on("draw", function (e) {
+ //缁樺埗瀹屾垚鍚庡皢鏁扮粍浼犲叆琛ㄥ崟
+ that.$emit("getRegion", e.obj.getOptions());
+ });
+ //榛樿鏍峰紡
+ that.ruler = new AMap.RangingTool(that.map);
that.locationMap();
})
.catch((e) => {
console.log(e);
});
- // const that = this;
- // debugger
- // that.map.setZoomAndCenter(that._zoom, [that._point.x, that._point.y]);
- // if (that.mark) {
- // // 鍒涘缓涓�涓� Marker 瀹炰緥锛�
- // var marker = new AMap.Marker({
- // position: new AMap.LngLat(that._point.x, that._point.y), // 缁忕含搴﹀璞★紝涔熷彲浠ユ槸缁忕含搴︽瀯鎴愮殑涓�缁存暟缁刐116.39, 39.9]
- // title: that.mark.title,
- // });
-
- // // 灏嗗垱寤虹殑鐐规爣璁版坊鍔犲埌宸叉湁鐨勫湴鍥惧疄渚嬶細
- // that.map.add(marker);
- // }
},
watch: {
point(newval, oldval) {
@@ -73,7 +112,7 @@
this._zoom = newval;
},
},
- props: ["point", "zoom", "mark"],
+ props: ["point", "zoom", "region"],
};
</script>
<style lang="scss" scoped>
@@ -81,4 +120,17 @@
width: 100%;
height: 100%;
}
+.optionBtn {
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ z-index: 9;
+}
+.el-button {
+ width: 70px;
+ margin-bottom: 5px;
+ margin-left: 10px;
+}
</style>
diff --git a/src/views/systemSetting/device/grid/components/main/index.vue b/src/views/systemSetting/device/grid/components/main/index.vue
index c8639ee..b2164c1 100644
--- a/src/views/systemSetting/device/grid/components/main/index.vue
+++ b/src/views/systemSetting/device/grid/components/main/index.vue
@@ -25,10 +25,14 @@
</header>
<!-- 鏁版嵁灞曠ず -->
<el-table
- border
- stripe
+ border
+ stripe
ref="multipleTable"
- :header-cell-style="{'background':'#F5F5F5', 'font-weight': '650', 'line-height': '45px' }"
+ :header-cell-style="{
+ background: '#F5F5F5',
+ 'font-weight': '650',
+ 'line-height': '45px',
+ }"
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName"
@@ -175,22 +179,16 @@
// 鑾峰彇鍒楄〃
getList() {
const that = this;
- const { currentPage, pageSize, context } = this;
+ const { currentPage, pageSize, context } = this;
this.getOrgGridList({
currentPage,
pageSize,
name: context,
- })
- .then((res) => {
- if (res.code === 200) {
- res.data.records.forEach((item) => {
- item.status === 1 ? (item.status = true) : (item.status = false);
- });
- that.totalNum = res.data.total;
- that.tableData = res.data.records;
- this.renderFlag = true;
- }
- });
+ }).then((res) => {
+ that.totalNum = res.total;
+ that.tableData = res.records;
+ this.renderFlag = true;
+ });
},
handleAdd() {
this.handheldGrid = {
--
Gitblit v1.8.0