fix-地图测距面积

public/index.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="format-detection" content="telephone=yes" />
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
     <script src="https://unpkg.com/video.js/dist/video.min.js"></script>

src/components/MultiTab/MultiTab.vue

@@ -4,10 +4,10 @@ import { i18nRender } from '@/locales'
 
 // 首页
 const homeRoute = {
-  fullPath: '/index',
-  path: '/index',
+  fullPath: '/cardiot',
+  path: '/cardiot',
   meta: {
-    title: '首页'
+    title: '车辆监测'
   }
 }
 export default {

src/config/router.config.js

@@ -17,12 +17,12 @@ import { UserLayout } from '@/layouts'
   }
  */
 export const indexRouterMap = [
-  {
-    path: '/index',
-    name: 'Index',
-    component: 'Index',
-    meta: { title: '首页', noCache: false, hidden: true, icon: 'dashboard', hiddenHeaderContent: true }
-  },
+  // {
+  //   path: '/index',
+  //   name: 'Index',
+  //   component: 'Index',
+  //   meta: { title: '首页', noCache: false, hidden: true, icon: 'dashboard', hiddenHeaderContent: true }
+  // },
   {
     path: '/account/center',
     name: 'Center',

src/views/cardIot/Map/index.vue

@@ -19,12 +19,14 @@ export default {
       depId: 239,
       markeList: null,
       timer: null,
-      ids:'',
-      ruler1:null
+      ids: '',
+      ruler1: null,
+      mouseTool: null,
     }
   },
   props: {
     idInfo: Object,
+    showRang: String,
   },
   watch: {
     idInfo: {
@@ -35,7 +37,7 @@ export default {
         if (this.timer) {
           clearTimeout(this.timer)
         }
-        if (val.key.indexOf('car')>=0) {
+        if (val.key.indexOf('car') >= 0) {
           this.ids = val.meta.id
           this.addCarMaker(this.AMap)
         } else {
@@ -48,11 +50,16 @@ export default {
   },
 
   methods: {
+    callback(fn) {
+      if (fn) {
+        fn(this)
+      }
+    },
     async initMap() {
       return AMapLoader.load({
         key: 'a09220a9ab56352435dd123abf0c37f6', // 申请好的Web端开发者Key，首次调用 load 时必填
         version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-        plugins: ['AMap.RangingTool'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等      AMap.RangingTool（测距）
+        plugins: ['AMap.RangingTool', 'AMap.MouseTool'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等      AMap.RangingTool（测距）
       })
         .then((AMap) => {
           this.AMap = AMap
@@ -65,8 +72,17 @@ export default {
             center: ['106.4754116', '29.6307097'],
           })
           // 测距
-          this. ruler1 = new AMap.RangingTool(this.map)
-//           this.ruler1.turnOn()
+          this.ruler1 = new AMap.RangingTool(this.map)
+          // 面积
+          this.mouseTool = new AMap.MouseTool(this.map)
+          this.mouseTool.measureArea({
+            strokeColor: '#80d8ff',
+            fillColor: '#80d8ff',
+            fillOpacity: 0.3,
+            //同 Polygon 的 Option 设置
+          })
+          this.mouseTool.close(true)
+          //           this.ruler1.turnOn()
           this.map.setDefaultCursor(`url(https://webapi.amap.com/theme/v1.3/openhand.cur),default`)
           this.map.on('mousedown', () => {
             this.map.setDefaultCursor(`url(https://webapi.amap.com/theme/v1.3/closedhand.cur),default`)

src/views/cardIot/components/FireStationDetails.vue

@@ -2,14 +2,14 @@
   <div>
     <div class="fire">
       <div class="car-in">车辆详情</div>
-      <div style="display: flex;justify-content: space-between;">
+      <div style="display: flex; justify-content: space-between">
         <div>
           车牌号：
           <span>{{ carinfo.plateNumber ? carinfo.plateNumber : '暂无' }}</span>
         </div>
         <div>
           车辆类型：
-          <span style="color: rgb(239, 66, 66);">{{ carinfo.cryName ? carinfo.cryName : '暂无' }}</span>
+          <span style="color: rgb(239, 66, 66)">{{ carinfo.cryName ? carinfo.cryName : '暂无' }}</span>
         </div>
       </div>
       <div>
@@ -24,13 +24,14 @@
         联系人电话：
         {{ carinfo.phone ? carinfo.phone : '暂无' }}
       </div>
+      <div>拨打电话</div>
       <div style="display: flex; justify-content: space-between">
         <div style="display: flex; flex-direction: column; width: 120px; text-align: center">
-          <span style="color: rgb(35, 130, 213);font-size: 20px;">5871天</span>
+          <span style="color: rgb(35, 130, 213); font-size: 20px">5871天</span>
           <span>安全运行天数</span>
         </div>
         <div style="display: flex; flex-direction: column; width: 120px; text-align: center">
-          <span style="color: rgb(35, 130, 213);font-size: 20px;">0次</span>
+          <span style="color: rgb(35, 130, 213); font-size: 20px">0次</span>
           <span>月使用次数</span>
         </div>
       </div>
@@ -71,7 +72,8 @@ export default {
   // color: #000;
   // color: #ccc;
   line-height: 27px;
-  .car-in{
+  pointer-events: all;
+  .car-in {
     width: 100%;
     border-bottom: 1px solid #74bff5;
     background: #74bff5;

src/views/cardIot/components/VehicleStatistics.vue

@@ -23,6 +23,39 @@
           <div>离线</div>
         </div>
       </div>
+      <!-- <div class="mj-box" :class="addClass('测距')" @click="Ranging('测距')">
+        <img src="../../../assets/images/cj1.png" alt="" />
+        <span>测距</span>
+      </div>
+      <div class="mj-box" :class="addClass('面积')" @click="Ranging('面积')">
+        <img src="../../../assets/images/mj1.png" alt="" />
+        <span>面积</span>
+      </div> -->
+      <div>
+        <a-dropdown>
+          <a class="ant-dropdown-link" @click="(e) => e.preventDefault()"> 工具箱 <a-icon type="down" /> </a>
+          <a-menu slot="overlay">
+            <a-menu-item>
+              <div class="mj-box" :class="addClass('测距')" @click="Ranging('测距')">
+                <img style="display: inline-block; width: 20px;height: 20px; margin-right: 6px;" src="../../../assets/images/cj1.png" alt="" />
+                <span>测距</span>
+              </div>
+            </a-menu-item>
+            <a-menu-item>
+              <div class="mj-box" :class="addClass('面积')" @click="Ranging('面积')">
+                <img style="display: inline-block; width: 20px;height: 20px; margin-right: 6px;" src="../../../assets/images/mj1.png" alt="" />
+                <span>面积</span>
+              </div>
+            </a-menu-item>
+            <a-menu-item>
+              <div @click="Ranging('清除')">
+                <a-icon type="delete" />
+                <span style="margin-left: 12px;">清除</span>
+                </div>
+            </a-menu-item>
+          </a-menu>
+        </a-dropdown>
+      </div>
     </div>
   </div>
 </template>
@@ -31,27 +64,35 @@
 // import { getStatistics } from '@/api/iot'
 import { getStatistics } from '@/api/iot'
 export default {
-  data () {
+  data() {
     return {
-      carInfo: {}
+      carInfo: {},
+      showRing: '',
     }
   },
   methods: {
-    getcarInfo () {
+    getcarInfo() {
       getStatistics(239).then((res) => {
         this.carInfo = res.data
       })
-    }
+    },
+    Ranging(val) {
+      this.showRing = val
+      this.$emit('rangEv', val)
+    },
+    addClass(nv) {
+      return nv == this.showRing ? 'mj-box active' : 'mj-box'
+    },
   },
-  created () {
+  created() {
     this.getcarInfo()
-  }
+  },
 }
 </script>
 
 <style lang="less" scoped>
 .sta-box {
-  width: 340px;
+  width: 390px;
   height: 60px;
   background: #fff;
   border-radius: 5px;
@@ -59,7 +100,8 @@ export default {
   align-items: center;
   justify-content: space-between;
   padding: 0 10px;
-  font-family: '宋体';
+  // font-family: 'Open Sans';
+  cursor: pointer;
   .imgs {
     width: 40px;
     height: 40px;
@@ -75,5 +117,21 @@ export default {
   .num-all {
     font-size: 20px;
   }
+  .mj-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding-top: 4px;
+    img {
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      margin-bottom: 6px;
+    }
+  }
+  .active {
+    color: rgb(17, 78, 222) !important;
+  }
 }
 </style>

src/views/cardIot/index.vue

@@ -1,11 +1,11 @@
 <template>
   <page-full-content>
-    <Map @clickCarItem="clickCarItem" :idInfo="idInfo" />
+    <Map @clickCarItem="clickCarItem" :idInfo="idInfo" ref="refMap" />
     <div class="tree-car">
       <TreeCar :carId="carId" @changeCar="changeCar" />
     </div>
     <div class="car-sta">
-      <VehicleStatistics />
+      <VehicleStatistics @rangEv="rangEv" />
     </div>
   </page-full-content>
 </template>
@@ -28,7 +28,8 @@ export default {
   data() {
     return {
       carId: '',
-      idInfo:{},
+      idInfo: {},
+      showRang: '',
     }
   },
   methods: {
@@ -41,6 +42,23 @@ export default {
     changeCar(node) {
       this.idInfo = node
     },
+    rangEv(val) {
+      this.$refs.refMap.callback((that) => {
+        if (val == '测距') {
+          that.mouseTool.rule()
+        }
+       else if(val == '面积'){
+          that.mouseTool.measureArea({
+            strokeColor: '#80d8ff',
+            fillColor: '#80d8ff',
+            fillOpacity: 0.3,
+            //同 Polygon 的 Option 设置
+          })
+        }else{
+          that.mouseTool.close(true)
+        }
+      })
+    },
   },
 }
 </script>