From cee790c4fc0cb3c07f90c3e9e2fc079c6543625b Mon Sep 17 00:00:00 2001
From: copper <copper.w@foxmail.com>
Date: Sun, 29 Nov 2020 21:30:37 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=AE=9A=E4=BD=8D=E4=B8=8E?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/poi.png                            | Bin 0 -> 1539 bytes
 src/assets/water.png                          | Bin 0 -> 1698 bytes
 src/components/Login.vue                      |  13 +-
 src/components/Main.vue                       |   6 +-
 src/components/admin/forms/DeviceDetail.vue   |  38 ++++-
 src/components/admin/forms/PasswordChange.vue |   2 +-
 src/components/admin/forms/PositionSelect.vue | 135 ++++++++++++++++++
 src/components/admin/forms/ProjectDetail.vue  |   2 +-
 src/components/admin/forms/SensorDetai.vue    |   2 +-
 src/components/admin/forms/UserDetail.vue     |   2 +-
 src/components/map/Index.vue                  |  99 +++++++++++--
 src/components/utils/olInteraction.js         | 109 ++++++++++++++
 src/utils/http.js                             |   4 +-
 13 files changed, 391 insertions(+), 21 deletions(-)
 create mode 100644 src/assets/poi.png
 create mode 100644 src/assets/water.png
 create mode 100644 src/components/admin/forms/PositionSelect.vue
 create mode 100644 src/components/utils/olInteraction.js

diff --git a/src/assets/poi.png b/src/assets/poi.png
new file mode 100644
index 0000000000000000000000000000000000000000..0b0d82355937caf5558d1d319c11635607eeb04c
GIT binary patch
literal 1539
zcmV+e2K@PnP)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF000HbNkl<ZcwX&V
zTZ|M%6g{_RrW;7)#~69c^n$`p?~>?;7$1?>hX^V}KTI@6Km!T}Bfg@4u74U|7%`xb
z2%4yg9~xgg{1C+Wi0g+Y?)CtYothONi9eX&cF#;-)59!`i@R1;SI<bGlKt7-bMCEE
zw{G2<F2XrJ=p3Iv&I@op1KOm(;hB^3^=y3+nCF9N78tXD#$P;!Ko|n^5QzFSwakIJ
zKmRq{j?hxw0)F1Uj5EB(0$t0Dt5haLgl{77msF>n-f;MX3RcB76#)ijPwKL2(MAw9
z0+^%{(7)J@fUzaYT3dRLj+7H}odGv4fM3Y1XF?x=E;bn~gMTANpI51FGs$aI0N>4R
z1!%p=0MF#&ZJwxZFy+IT0Di&V4Z<>0flbK6*yB~g<tBU?5n!+@_dGE@Y$7084kmt~
zr(AtR)_y#@!~zU-<<?qE+mi;OgO7;U^_HtUbg-kCL;@Ugotq=@he-lRinTy1x<&Aj
zE>9u>eAoT}zzSXGhHxKxB3!A<r7gh!Vf9BRog@pi1u(Jt3>=9kLBJf{6>Q?Pvp`FL
zfkJknMb-hGpb6N;z{i<-=Bv?uzj05<)UP4nCI(jP@J1Xh>aEm1SH)@x;Jdla06nPa
z><<7NJQ2P-5zcq*+W>3@aG@GMzvPMPCN)eW`_xCtwFLtO1>~Qe2&XF8!*}iD04|Wl
z5Kt+K(3Q2<J_ZN#*~Mg8pQ$+FC|c4pT-&dLX_p`63>YZbw^)St<R?QrJQ1vuw?A#^
zyUuoi*UDle#;v`T@O@ePW&u_)2L=ndHAM8fEXpF>*<B9blC^KO8+3E`66jS~EHmHT
zQ>pHhwbv40z;!lR;1^|`uw~8e85$Xqwf~0zirXy$J=80L%__c>w?N6YpJbp<(#cUz
zgqKL#o?&))8ZN5a_V2QI0{V&~d`i|{D+5YyZWV)eNjmw-6XB(jwgv>?)kRT#L&cwZ
z1{AUjm@MgrqaM-RdBZ`Y<5L}~CjoJ^uvn=bRPm!M!1psJ=bcQwBJG6v9<NfBE}E^p
zr9$q0CVEBIS5VIsE?4|DSy_NM7~i!60JcnE1p1;Vf(0_RV{J;VbCAK;Nn%4!gpQ=`
zDKlLGd;mpxXX<ULM!Q||MCi%Kbkb5wfKr$JHZyKlaps9o$(Qfitin%(cZ%ik4i${H
z0Dj(C28(yAI%DvCJ)-*BL^##v=M+~&%e~=Xk7`UxtI|sDyY?>trl~pv@EtRM4WJ*H
z%*p#fy}lU0d?LCUz!e&tzj`8^u7T6r0?k7BG=Rr-oTh+z#uMQaI=tE$@M9snAfwO^
z=maN=sdKb&p5pmG%B?LxGYh_rQ&%?7l<fLF5nidwok#%1dx36@6XJCG|5n080t|Ic
znLfg`egHF4ncaVr9-Bnj`LoI=;)1L-5(yA{>|_=sU4897pjGM)W<lcBHzGi%vcSaZ
z8xx=dSzu)KjS0~1EHJhDMg?HNI^;V08LV~nl`Y`}I@m3O#RNpMn2GEXp8~Dq1Fmzu
z1>R>Ou<<w|(9&KJd}_*vQ30CWVVZXY?Vf);!Hf%VYzC$r&)V^aQ`0SS|I}KzXvQ&|
zFtz$dYd~vIgRZlJ!13b=V}n5}dqiOTHHz^J7@e_Su%89tQ6ma4p7Sc<V@9~fkfbI+
zvmWdPury)d`#cfekdR|sc)9|_Z-p)1r~7KO@j5i3rDxq+;a0gzZtgAyDSfRO#S?f{
zQB>bdYxPqrf@1^Lss}0V`_}kU-2$zSeAiZ~2dVD+&Ilk`58AQsJ0d{rRHh!ZW8Zg7
zfX2}{QGd{;ecw?5n*Bli1!wHpzSk3Bd!F03DA2Yd*sA)Gyfdd}as1LO-~9h@HlihS
zG~W><IVL+IK%*XXIm?;(lg3$0bYrm`D1U2AGV#;Bh6xr;jzg~VKn(2`!ONNyiD4bf
pfW(m-A~-LAAtBFNnsYt_{svFX1z$uB^gsXr002ovPDHLkV1jCH+W7zg

literal 0
HcmV?d00001

diff --git a/src/assets/water.png b/src/assets/water.png
new file mode 100644
index 0000000000000000000000000000000000000000..10e7af5892e6cdaf7fdf19d6de12cf9e39d41629
GIT binary patch
literal 1698
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

literal 0
HcmV?d00001

diff --git a/src/components/Login.vue b/src/components/Login.vue
index 41ed719..26a0432 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -78,7 +78,7 @@
 
 <script>
 
-import { login, logout } from "@/utils/http";
+import { getData, login, logout, URL_MAP } from "@/utils/http";
 
 export default {
   data() {
@@ -121,6 +121,17 @@ export default {
         // }
         let data = await login(this.form.utel, this.form.upass, 'tt', 'tt');
         this.$store.commit("login", data);
+        /**
+         * 初始化设备数据、传感器数据
+         */
+        let results = [ 
+          getData(URL_MAP.DEVICE_LIST),
+          getData(URL_MAP.SENSOR_LIST)
+        ]
+        data = await Promise.all(results)
+        this.$store.commit('deviceList', data[0].data)
+        this.$store.commit('sensorList', data[1].data)
+      
         let path = decodeURIComponent(this.$route.query.redirect || "/");
         this.$router.push({ path: path });
       } catch (e) {
diff --git a/src/components/Main.vue b/src/components/Main.vue
index 22c2d11..fd75131 100644
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -11,6 +11,9 @@
               <p v-if="!isAnyone" style="cursor: pointer;" @click="changePasswd">
                 更改密码
               </p>
+              <p style="cursor: pointer;" @click="logout">
+                登出
+              </p>
             </template>
             <a-avatar :size="48" icon="user" />
           </a-popover>
@@ -39,7 +42,7 @@
       </a-row>
     </a-layout-header>
     <a-layout-content>
-     <keep-alive>
+     <keep-alive exclude="map-layout">
       <component :is="currentComp"/>
       </keep-alive>
     </a-layout-content>
@@ -53,6 +56,7 @@
         @ok="logout"
         @cancle="passwd_visible = false"
       />
+      
     </a-modal>
   </a-layout>
 </template>
diff --git a/src/components/admin/forms/DeviceDetail.vue b/src/components/admin/forms/DeviceDetail.vue
index 8e591c0..4f03682 100644
--- a/src/components/admin/forms/DeviceDetail.vue
+++ b/src/components/admin/forms/DeviceDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <a-form-model :model="form">
+    <a-form-model :model="form" :label-col="{span:4}" :wrapper-col="{span:14}">
       <a-form-model-item label="设备ID">
         <a-input :disabled="isCreate" v-model="form._id" />
       </a-form-model-item>
@@ -41,6 +41,9 @@
           </a-select-option>
         </a-select>
       </a-form-model-item>
+      <a-form-model-item label="位置">
+        <p>{{position.detail}}<a-button @click="visible=true" >点击选择</a-button></p>
+      </a-form-model-item>
       <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
         <a-button type="primary" @click="onSubmit"> 确认 </a-button>
         <a-button style="margin-left: 10px" @click="$emit('cancle')">
@@ -48,14 +51,28 @@
         </a-button>
       </a-form-model-item>
     </a-form-model>
+     <a-modal
+      v-model="visible"
+      :title="'选择位置'"
+      :destroyOnClose="true"
+      :footer="null"
+    >
+      <position-select style="height:520px;"
+      :detail="position"
+      @ok="handlePosOk"
+      @cancle="visible=false"
+      />
+    </a-modal>
   </div>
 </template>
 
 <script>
 import { mergeList } from "@/utils/utils";
 import { getData, URL_MAP } from "@/utils/http";
+import PositionSelect from './PositionSelect.vue';
 
 export default {
+  components: { PositionSelect },
   data() {
     return {
       form: {
@@ -70,8 +87,10 @@ export default {
       },
       sensors: [],
       projects: [],
+      position: {},
       fetching: false,
       isCreate: true,
+      visible: false
     };
   },
   props: {
@@ -107,6 +126,11 @@ export default {
         this.fetching = false;
       }
     },
+    handlePosOk(pos) {
+      this.form.position = pos._id
+      this.position = pos
+      this.visible = false
+    }
   },
   mounted() {
     for (let key in this.form) {
@@ -128,6 +152,18 @@ export default {
         this.form.project = null
         this.projects = []
     }
+    if(this.detail.position) {
+      this.form.position = this.detail.position._id
+      this.position = this.detail.position
+    }
+    else{
+      this.form.position = ''
+      this.position = {
+        detail:'',
+        position:'',
+        _id:''
+      }
+    }
   },
 };
 </script>
diff --git a/src/components/admin/forms/PasswordChange.vue b/src/components/admin/forms/PasswordChange.vue
index 17bbf79..9ccb8f8 100644
--- a/src/components/admin/forms/PasswordChange.vue
+++ b/src/components/admin/forms/PasswordChange.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <a-spin :spinning="loading">
-      <a-form-model :model="form">
+      <a-form-model :model="form" :label-col="{span:4}" :wrapper-col="{span:14}">
         <a-form-model-item label="旧密码">
           <a-input type="password" v-model="form.old" />
         </a-form-model-item>
diff --git a/src/components/admin/forms/PositionSelect.vue b/src/components/admin/forms/PositionSelect.vue
new file mode 100644
index 0000000..6504961
--- /dev/null
+++ b/src/components/admin/forms/PositionSelect.vue
@@ -0,0 +1,135 @@
+<template>
+  <div>
+    <a-spin :spinning="loading">
+      <div id="map-pos-select" style="height: 460px; width: 100%"></div>
+      <a-row style="margin-top: 20px">
+        <a-col :span="4" :offset="8">
+          <a-button @click="handleOk" type="primary">确认</a-button>
+        </a-col>
+        <a-col :span="4">
+          <a-button @click="$emit('cancle')">取消</a-button>
+        </a-col>
+      </a-row>
+      <a-modal
+        v-model="visible"
+        title="输入名称"
+        @ok="handleDetailOk"
+        ok-text="确认"
+        cancel-text="取消"
+      >
+        <a-input v-model="posDetail" />
+      </a-modal>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import "ol/ol.css";
+import Feature from "ol/Feature";
+import Map from "ol/Map";
+import View from "ol/View";
+import OSM from "ol/source/OSM";
+import Projection from "ol/proj/Projection";
+import { fromLonLat, toLonLat } from "ol/proj.js";
+import { Fill, Icon, Stroke, Style } from "ol/style";
+import { LineString, Point, Polygon } from "ol/geom";
+import GeoJSON from "ol/format/GeoJSON";
+import {
+  Pointer as PointerInteraction,
+  defaults as defaultInteractions,
+} from "ol/interaction";
+import { TileJSON, Vector as VectorSource } from "ol/source";
+import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
+import { Drag } from "@/components/utils/olInteraction";
+import { deleteJSON, postJSON, URL_MAP } from "@/utils/http";
+export default {
+  data() {
+    return {
+      pointFeature: "",
+      posDetail: "",
+      visible: false,
+      projection: null,
+      loading: false,
+      posId: "",
+    };
+  },
+  props: {
+    detail: Object,
+  },
+  methods: {
+    init() {
+      var osm = new OSM();
+      var layer = new TileLayer({
+        source: osm,
+        wrapX: false,
+      });
+      this.projection = osm.getProjection();
+      var map = new Map({
+        interactions: defaultInteractions().extend([new Drag()]),
+        layers: [
+          layer,
+          new VectorLayer({
+            source: new VectorSource({
+              features: [this.pointFeature],
+            }),
+            style: new Style({
+              image: new Icon({
+                anchor: [0.5, 0.5],
+                anchorXUnits: "fraction",
+                anchorYUnits: "fraction",
+                opacity: 0.95,
+                scale: 0.6,
+                src: require("@/assets/poi.png"),
+              }),
+            }),
+          }),
+        ],
+        target: "map-pos-select",
+        view: new View({
+          center: fromLonLat([114.3, 30.6]),
+          zoom: 10,
+        }),
+      });
+    },
+    handleOk() {
+      this.visible = true;
+    },
+    async handleDetailOk() {
+      this.visible = false;
+      this.loading = true;
+      try {
+        let f = new GeoJSON().writeFeatureObject(this.pointFeature, {
+          dataProjection: this.projection,
+        });
+
+        let coors = f.geometry.coordinates;
+        f.geometry.coordinates = toLonLat(coors, this.projection);
+        let data = await postJSON(URL_MAP.POSITION_LIST, {
+          detail: this.posDetail,
+          position: JSON.stringify(f.geometry),
+        });
+        this.$emit("ok", data);
+      } catch (e) {
+        console.log(e);
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  mounted() {
+    this.posId = this.detail._id;
+    this.posDetail = this.detail.detail;
+    if (this.detail.position) {
+      let g = JSON.parse(this.detail.position.replace(/'/g, '"'));
+      g.coordinates = fromLonLat(g.coordinates);
+      this.pointFeature = new Feature(new GeoJSON().readGeometry(g));
+    } else {
+      this.pointFeature = new Feature(new Point(fromLonLat([114.3, 30.6])));
+    }
+    this.init();
+  },
+};
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/components/admin/forms/ProjectDetail.vue b/src/components/admin/forms/ProjectDetail.vue
index dad3b57..636b217 100644
--- a/src/components/admin/forms/ProjectDetail.vue
+++ b/src/components/admin/forms/ProjectDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <a-form-model :model="form">
+    <a-form-model :model="form" :label-col="{span:4}" :wrapper-col="{span:14}">
       <a-form-model-item label="项目名">
         <a-input v-model="form.name" />
       </a-form-model-item>
diff --git a/src/components/admin/forms/SensorDetai.vue b/src/components/admin/forms/SensorDetai.vue
index f62873e..91eef8b 100644
--- a/src/components/admin/forms/SensorDetai.vue
+++ b/src/components/admin/forms/SensorDetai.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <a-form-model :model="form">
+    <a-form-model :model="form" :label-col="{span:4}" :wrapper-col="{span:14}">
       <a-form-model-item label="名称">
         <a-input v-model="form.name" />
       </a-form-model-item>
diff --git a/src/components/admin/forms/UserDetail.vue b/src/components/admin/forms/UserDetail.vue
index 2fa554a..a6a5ce2 100644
--- a/src/components/admin/forms/UserDetail.vue
+++ b/src/components/admin/forms/UserDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <a-form-model :model="form">
+    <a-form-model :model="form" :label-col="{span:4}" :wrapper-col="{span:14}">
       <a-form-model-item label="用户名">
         <a-input v-model="form.username" />
       </a-form-model-item>
diff --git a/src/components/map/Index.vue b/src/components/map/Index.vue
index 1a212aa..fc5c0a5 100644
--- a/src/components/map/Index.vue
+++ b/src/components/map/Index.vue
@@ -1,41 +1,114 @@
 <template>
   <div>
-    <div id="map" ref="map" style="height:calc(100vh - 110px);"></div>
+    <div id="map" ref="map" style="height: calc(100vh - 110px)"></div>
+    <a-button
+      style="position: absolute; top: 120px; right: 10px"
+      shape="circle"
+      icon="sync"
+      type="primary"
+      @click="loadBaseData"
+    ></a-button>
   </div>
 </template>
 
 <script>
-import { Map, Tile, View } from "ol";
+import { Map, View } from "ol";
 import OSM from "ol/source/OSM";
 import { fromLonLat, toLonLat } from "ol/proj.js";
-import TileLayer from "ol/layer/Tile";
+import { Fill, Icon, Stroke, Style } from "ol/style";
+import { TileJSON, Vector as VectorSource } from "ol/source";
+import { LineString, Point, Polygon } from "ol/geom";
+import GeoJSON from "ol/format/GeoJSON";
+import Feature from "ol/Feature";
 import "ol/ol.css";
+import { getData, login, logout, URL_MAP } from "@/utils/http";
+import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
+
+let map = null;
 
 export default {
   data() {
-    return {};
+    return {
+      view: new View({
+        center: fromLonLat([114.3, 30.6]),
+        zoom: 10,
+      }),
+      waterLayer: '',
+      projection: "",
+    };
+  },
+  computed: {
+    deviceList() {
+      return this.$store.getters.deviceList;
+    },
+    sensorList() {
+      return this.$store.getters.sensorList;
+    },
   },
   methods: {
     mapinit() {
-      var map = this.$refs.map;
-
+      var osm = new OSM();
       var layer = new TileLayer({
-        source: new OSM(),
+        source: osm,
         wrapX: false,
       });
-      new Map({
+      this.projection = osm.getProjection();
+      this.waterLayer = this.getDeviceVectorLayer();
+      map = new Map({
         target: "map",
         layers: [layer],
-        view: new View({
+        view: this.view,
+      });
+      map.addLayer(this.waterLayer);
+    },
+    getDeviceVectorLayer() {
+      let devices = this.deviceList.filter((d) => !!d.position);
+      let features = []
+      devices.forEach((d) => {
+        let g = JSON.parse(d.position.position.replace(/'/g, '"'));
+        g.coordinates = fromLonLat(g.coordinates, this.projection);
+        features.push(new Feature(new GeoJSON().readGeometry(g)));
+      });
+      console.log(features);
+      let style = new Style({
+        image: new Icon({
+                anchor: [0.5, 0.5],
+                anchorXUnits: "fraction",
+                anchorYUnits: "fraction",
+                opacity: 0.95,
+                scale: 0.6,
+                src: require("@/assets/water.png"),
+              }),
+      });
+      return new VectorLayer({
+        source: new VectorSource({
+          features: features,
+        }),
+        style: style,
+      });
+    },
+    async loadBaseData() {
+      let results = [
+        getData(URL_MAP.DEVICE_LIST),
+        getData(URL_MAP.SENSOR_LIST),
+      ];
+      let data = await Promise.all(results);
+      this.$store.commit("deviceList", data[0].data);
+      this.$store.commit("sensorList", data[1].data);
+      map.setView(
+        new View({
           center: fromLonLat([114.3, 30.6]),
           zoom: 10,
-        }),
-      });
+        })
+      );
+      map.removeLayer(this.waterLayer)
+      this.waterLayer = this.getDeviceVectorLayer()
+      map.addLayer(this.waterLayer)
     },
   },
   mounted() {
-    this.mapinit()
-  }
+    this.mapinit();
+  },
 };
 </script>
 
diff --git a/src/components/utils/olInteraction.js b/src/components/utils/olInteraction.js
new file mode 100644
index 0000000..cf36175
--- /dev/null
+++ b/src/components/utils/olInteraction.js
@@ -0,0 +1,109 @@
+import {
+    Pointer as PointerInteraction,
+    defaults as defaultInteractions,
+  } from 'ol/interaction';
+
+export const Drag = /*@__PURE__*/(function (PointerInteraction) {
+    function Drag() {
+      PointerInteraction.call(this, {
+        handleDownEvent: handleDownEvent,
+        handleDragEvent: handleDragEvent,
+        handleMoveEvent: handleMoveEvent,
+        handleUpEvent: handleUpEvent,
+      });
+  
+      /**
+       * @type {import("../src/ol/coordinate.js").Coordinate}
+       * @private
+       */
+      this.coordinate_ = null;
+  
+      /**
+       * @type {string|undefined}
+       * @private
+       */
+      this.cursor_ = 'pointer';
+  
+      /**
+       * @type {Feature}
+       * @private
+       */
+      this.feature_ = null;
+  
+      /**
+       * @type {string|undefined}
+       * @private
+       */
+      this.previousCursor_ = undefined;
+    }
+  
+    if ( PointerInteraction ) Drag.__proto__ = PointerInteraction;
+    Drag.prototype = Object.create( PointerInteraction && PointerInteraction.prototype );
+    Drag.prototype.constructor = Drag;
+  
+    return Drag;
+  }(PointerInteraction));
+  
+  /**
+   * @param {import("../src/ol/MapBrowserEvent.js").default} evt Map browser event.
+   * @return {boolean} `true` to start the drag sequence.
+   */
+  function handleDownEvent(evt) {
+    var map = evt.map;
+  
+    var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
+      return feature;
+    });
+  
+    if (feature) {
+      this.coordinate_ = evt.coordinate;
+      this.feature_ = feature;
+    }
+  
+    return !!feature;
+  }
+  
+  /**
+   * @param {import("../src/ol/MapBrowserEvent.js").default} evt Map browser event.
+   */
+  function handleDragEvent(evt) {
+    var deltaX = evt.coordinate[0] - this.coordinate_[0];
+    var deltaY = evt.coordinate[1] - this.coordinate_[1];
+  
+    var geometry = this.feature_.getGeometry();
+    geometry.translate(deltaX, deltaY);
+  
+    this.coordinate_[0] = evt.coordinate[0];
+    this.coordinate_[1] = evt.coordinate[1];
+  }
+  
+  /**
+   * @param {import("../src/ol/MapBrowserEvent.js").default} evt Event.
+   */
+  function handleMoveEvent(evt) {
+    if (this.cursor_) {
+      var map = evt.map;
+      var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
+        return feature;
+      });
+      var element = evt.map.getTargetElement();
+      if (feature) {
+        if (element.style.cursor != this.cursor_) {
+          this.previousCursor_ = element.style.cursor;
+          element.style.cursor = this.cursor_;
+        }
+      } else if (this.previousCursor_ !== undefined) {
+        element.style.cursor = this.previousCursor_;
+        this.previousCursor_ = undefined;
+      }
+    }
+  }
+  
+  /**
+   * @return {boolean} `false` to stop the drag sequence.
+   */
+  function handleUpEvent() {
+    this.coordinate_ = null;
+    this.feature_ = null;
+    return false;
+  }
\ No newline at end of file
diff --git a/src/utils/http.js b/src/utils/http.js
index ef384ce..6071b63 100644
--- a/src/utils/http.js
+++ b/src/utils/http.js
@@ -18,7 +18,9 @@ export const URL_MAP = {
     USER_LIST: 'user/',
     USER_DETAIL: 'user/detail/',
     CHANGE_PASSWD: 'current/chpass/',
-    RESET_PASSWD: 'passwd/reset/'
+    RESET_PASSWD: 'passwd/reset/',
+    POSITION_LIST: 'position/',
+    POSITION_DETAIL: 'position/detail/'
 
 }