地图模式

resources/js/api/map.js

@@ -14,3 +14,10 @@ export function users() {
     method: 'get',
   });
 }
+
+export function deviceinfo(id) {
+  return request({
+    url: '/devices/device_info/' + id,
+    method: 'get',
+  });
+}

resources/js/views/map/index.vue

@@ -35,6 +35,7 @@
       ></el-amap-circle-marker>
       <!-- 右上角设备和用户切换按钮 -->
       <div class="toolbar">
+        <el-button type="primary" size="mini" round @click="allDevices">全部设备</el-button>
         <el-switch
           v-model="markersDeviceVisible"
           active-text="设备"
@@ -65,7 +66,7 @@
       <el-collapse v-model="activeNames">
         <el-collapse-item name="1">
           <template slot="title">
-            设备列表<i class="header-icon el-icon-info"></i>
+            设备列表 - {{ leftDeviceName }}
           </template>
           <el-table :data="markersDevice" style="100%" max-height="700">
             <el-table-column property="devicenum" label="设备编号" width="200px"></el-table-column>
@@ -89,7 +90,7 @@
 import Vue from 'vue';
 import VueAMap from 'vue-amap';
 import { AMapManager } from 'vue-amap';
-import { devices, users } from '@/api/map';
+import { devices, users, deviceinfo } from '@/api/map';
 
 Vue.use(VueAMap);
 
@@ -125,7 +126,6 @@ export default {
         return '';
       }
       mapcenter = mapcenter.replace(/\s*/g, '');
-      // console.log(mapcenter.split(','));
       return mapcenter.split(',');
     },
     deviceLocationFilter(center) {
@@ -179,9 +179,7 @@ export default {
         'moveend': () => {
         },
         'zoomchange': () => {
-          // console.log('zoom:', _this.$refs.map);
           _this.zoom = this.$refs.map.$$getInstance().getZoom();
-          console.log(_this.zoom);
         },
         'click': (e) => {
           // alert('map clicked');
@@ -206,6 +204,8 @@ export default {
       deviceListVisible: true, // 用户设备列表是否显示
       activeNames: ['1'], // 左侧设备列表默认打开
       markerUserZIndex: 100,
+      deviceAll: undefined,
+      leftDeviceName: '全部设备',
     };
   },
   watch: {
@@ -217,16 +217,22 @@ export default {
     // const users = devices.users();
     users()
       .then(res => {
-        console.log(res.data);
         this.markers = res.data;
       });
     devices({})
       .then(res => {
-        console.log(res.data);
         this.markersDevice = res.data;
       });
   },
   methods: {
+    allDevices() {
+      devices()
+        .then(res => {
+          this.leftDeviceName = '全部设备';
+          this.markersDevice = res.data;
+          this.zoom = 6;
+        });
+    },
     getUserDevices(center) {
       // alert(userid);
       this.zoom = 12;
@@ -234,18 +240,14 @@ export default {
       this.markerVisible = true;
       this.markersDeviceVisible = true;
     },
-    getDeviceInfo(device) {
-      console.log(device);
-      alert('deviceInfo');
-    },
     rebuildEvent(marker) {
       var mapcenter = marker.mapcenter.replace(/\s*/g, '');
-      // console.log(mapcenter);
       const that = this;
       const position = mapcenter.split(',');
       return {
         click(e) {
           // alert(that.zoom);
+          that.leftDeviceName = marker.nickname;
           that.getUserDevices(position);
           that.deviceListVisible = true;
           that.markerUserZIndex = 1000;
@@ -257,20 +259,7 @@ export default {
       const that = this;
       return {
         click(e) {
-          console.log(marker);
-          // const position = marker.devicecoord.replace(/\s*/g, '');
-          // console.log(position.split(','));
-          that.gridData = [
-            {
-              title: '设备编号',
-              content: marker.devicenum,
-            },
-            {
-              title: '坐标',
-              content: marker.devicecoord,
-            },
-          ];
-          that.dialogTableVisible = true;
+          that.getUserDeviceInfo(marker.id);
         },
       };
     },
@@ -278,10 +267,55 @@ export default {
     getUserDeviceList(uid) {
       devices({ uid: uid })
         .then(res => {
-          console.log(res.data);
           this.markersDevice = res.data;
         });
     },
+    // 获取设备详细信息
+    getUserDeviceInfo(id) {
+      deviceinfo(id)
+        .then(res => {
+          this.dialogTableVisible = true;
+          const deviceInfo = res.data;
+          this.gridData = [
+            {
+              title: '设备编号',
+              content: deviceInfo.devicenum,
+            },
+            {
+              title: '坐标',
+              content: deviceInfo.devicecoord,
+            },
+            {
+              title: '设备类型',
+              content: deviceInfo.tname,
+            },
+            {
+              title: '用户',
+              content: deviceInfo.usernickname,
+            },
+            {
+              title: '检测介质',
+              content: deviceInfo.gas,
+            },
+            {
+              title: '状态',
+              content: deviceInfo.status_name,
+            },
+            {
+              title: '安装位置',
+              content: deviceInfo.deviceinfo,
+            },
+            {
+              title: '联系人',
+              content: deviceInfo.devicelinkman,
+            },
+            {
+              title: '电话',
+              content: deviceInfo.devicephone,
+            },
+          ];
+        });
+    },
   },
 };
 </script>