Merge branch 'map_model'

# Conflicts:
#	app/Http/Controllers/DevicesController.php

app/Http/Controllers/DevicesController.php

@@ -125,19 +125,12 @@ class DevicesController extends Controller
     public function adddevice(Request $request)
     {
         //验证用户提交表单
-        $addDeviceData = $request->all();
-        $validator = Validator::make($addDeviceData, $this->getValidationRulesdevice(false));
+        $validator = Validator::make($request->all(), $this->getValidationRulesdevice(false));
         if ($validator->fails()) {
             return response()->json(['errors' => $validator->errors()], 403);
         }
-        foreach ($addDeviceData as $k => $v) {
-            if ($k == 'isadmin') {
-                unset($addDeviceData[$k]);
-            }
-        }
         $type = new Device();
-        return $this->jsonSuccessData($type->adddevice($addDeviceData, $request->input('isadmin') == 1 ? 1 : 2));
-
+        return $this->jsonSuccessData($type->adddevice($request->all()));
     }
 
 
@@ -195,7 +188,7 @@ class DevicesController extends Controller
             ->leftjoin('gas as g', "device.status", '=', 'g.id')
             ->leftjoin('BackgroundUser as u', "device.uid", '=', 'u.id')
             ->leftjoin('status as p', "device.devicepolice", '=', 'p.id')
-            ->select('dy.tname', 'g.gas', 'device.*', 'p.status_name', 'u.nickname as usernickname')
+            ->select('dy.tname', 'g.gas', 'device.*', 'p.status_name','u.nickname as usernickname')
             ->orderBy('device.id', 'desc')
             ->offset($pagenNum)
             ->limit($limit)
@@ -237,7 +230,7 @@ class DevicesController extends Controller
             ->leftjoin('gas as g', "device.status", '=', 'g.id')
             ->leftjoin('BackgroundUser as u', "device.uid", '=', 'u.id')
             ->leftjoin('status as p', "device.devicepolice", '=', 'p.id')
-            ->select('dy.tname', 'g.gas', 'device.*', 'p.status_name', 'u.nickname as usernickname')
+            ->select('dy.tname', 'g.gas', 'device.*', 'p.status_name','u.nickname as usernickname')
             ->orderBy('device.id', 'desc')
             ->offset($pagenNum)
             ->limit($limit)
@@ -257,7 +250,7 @@ class DevicesController extends Controller
     public function deviceDataInfo($id)
     {
         $devicedata = Device::where('device.id', '=', $id)
-            ->leftjoin('contactsuser as c', 'c.contactsid', '=', 'device.id')
+            ->leftjoin('contactsuser as c', 'c.contactsid', '=', 'device.contactsid')
             ->select('c.*', 'device.deviceuuid', 'device.devicelinkman', 'device.devicephone', 'device.devicecoord')
             ->get();
         $devicedatainfo = Device::where('id', '=', $id)
@@ -265,20 +258,17 @@ class DevicesController extends Controller
             ->get();
         return $this->jsonSuccessData(['devicedata' => $devicedata, 'devicedatainfo' => $devicedatainfo]);
     }
-
 //    返回设备地图详情信息
-    public function device_info($id)
-    {
+    public function device_info($id){
         $devicedata = Device::where('device.id', '=', $id)
             ->leftjoin('device_type as dy', "device.dtype", '=', 'dy.tid')
             ->leftjoin('gas as g', "device.status", '=', 'g.id')
             ->leftjoin('BackgroundUser as u', "device.uid", '=', 'u.id')
             ->leftjoin('status as p', "device.devicepolice", '=', 'p.id')
-            ->select('dy.tname', 'g.gas', 'device.*', 'p.status_name', 'u.nickname as usernickname')
+            ->select('dy.tname', 'g.gas', 'device.*', 'p.status_name','u.nickname as usernickname')
             ->first();
         return $this->jsonSuccessData($devicedata);
     }
-
     //搜索设备账号
     public function deviceDataSearch(Request $request)
     {
@@ -308,23 +298,21 @@ class DevicesController extends Controller
                 $this->devicemkdir($data); //写入文件
             }
             $devicelistopen = $this->devicelistopen();
-        if ($devicelistopen != 105) {
+            if($devicelistopen != 105){
                 return $this->jsonSuccessData($devicelistopen);
-        } else {
-            return $this->jsonErrorData(105, '暂无数据');
+            }else{
+                return $this->jsonErrorData(105,'暂无数据');
             }
 
     }
-
     //历史数据查询
-    public function detedevice(Request $request)
-    {
+    public function detedevice(Request $request){
         $dete = $request->input('dete');
         $devicetime =  $this->devicetime($dete);
-        if ($devicetime != 105) {
+        if($devicetime != 105){
             return $this->jsonSuccessData($devicetime);
-        } else {
-            return $this->jsonErrorData(105, '暂无数据');
+        }else{
+            return $this->jsonErrorData(105,'暂无数据');
         }
     }
 
@@ -346,11 +334,6 @@ class DevicesController extends Controller
         return $this->jsonSuccessData(DB::table('device')->where('delete', '=', '1')->count());
     }
 
-    public function addUserDevice()
-    {
-        return $this->jsonSuccessData(DB::table('BackgroundUser')->where('state', '=', '2')->select('nickname', 'id')->get());
-    }
-
     //返回设备废纸篓和禁用设备
     public function deviceBasketList()
     {
@@ -387,12 +370,20 @@ class DevicesController extends Controller
         return $this->jsonSuccessData(DB::table('device_type')->where('tid', '=', $id)->delete());
     }
 
-    public function deviceLocation()
+    public function deviceLocation(Request $request)
     {
+        $where = [];
+        if($request->has('uid')) {
+            $user_id = $request->get('uid');
+            $where['uid'] = $user_id;
+        }
+        $data = DB::table('device')
+            ->select('id','uid','nd','deviceinfo','devicenum','devicecoord','devicepolice','deviceremark','devicelinkman')
+            ->where($where)
+            ->get();
         //返回用户安装位置
-        return $this->jsonSuccessData(DB::table('device')->select('id', 'uid', 'nd', 'deviceinfo', 'devicenum', 'devicecoord', 'devicepolice', 'deviceremark', 'devicelinkman')->get());
+        return $this->jsonSuccessData($data);
     }
-
     //返回消防监测
     public function control(Request $request)
     {
@@ -402,11 +393,11 @@ class DevicesController extends Controller
         if ($pagenNum === '' || $limit == '' || $type === '') {
             return $this->jsonErrorData(105, '页数或limit不能为空');
         }
-        if ($type == 1) {//返回消防监测
-            $wherein = [2, 4, 6, 7, 8, 9, 11];
-        } else {
+        if($type ==1){//返回消防监测
+            $wherein = [2,4,6,7,8,9,11];
+        }else{
             //返回危化
-            $wherein = [1, 5, 10];
+            $wherein = [1,5,10];
         }
         $databadevice = DB::table('device');
         $devicelist = $databadevice
@@ -420,7 +411,7 @@ class DevicesController extends Controller
             ->limit($limit)
             ->get()->toArray();
         $count = $databadevice
-            ->whereIn('dtype', $wherein)
+            ->whereIn('dtype',$wherein)
             ->count();
         return $this->jsonSuccessData(['devicelist' => $devicelist, 'count' => $count]);
     }
@@ -444,7 +435,7 @@ class DevicesController extends Controller
             'devicecoord' => 'sometimes|required',
             'contactsid' => 'sometimes|required',//绑定联系人id
             'deviceinfo' => 'sometimes|required',
-            'devicenumber' => 'sometimes|required|unique:device,devicenumber|max:40'
+            'devicenumber' => 'required|unique:device,devicenumber|max:40'
         ];
     }
 
@@ -468,8 +459,8 @@ class DevicesController extends Controller
 
     private function devicemkdir($data)
     {
-        $path = public_path() . '/device/' . date('Y-m-d' . '/');
-        if (!is_dir($path)) {
+        $path = public_path().'/device/' . date('Y-m-d' . '/');
+        if (!is_dir($path)){
             mkdir($path);
         }
             file_put_contents($path . "devicelistdata.text", json_encode($data) . PHP_EOL, FILE_APPEND);
@@ -477,10 +468,10 @@ class DevicesController extends Controller
         $this->devicelistopen($path);
     }
 
-    private function devicelistopen(): array
+    private function devicelistopen() :array
     {
-        $path = public_path() . '/device/' . date('Y-m-d' . '/');
-        if (is_file($path . 'devicelistdata.text')) {
+        $path = public_path().'/device/' . date('Y-m-d' . '/');
+        if (is_file( $path . 'devicelistdata.text')) {
             $myfile = file_get_contents($path . 'devicelistdata.text');
             $exp = explode("\n", $myfile);
             $datadevice = [];
@@ -490,15 +481,14 @@ class DevicesController extends Controller
                 array_push($datadevice, json_decode($newstring1, true));
             }
             return $datadevice;
-        } else {
+        }else{
             return 105;
         }
     }
 
-    private function devicetime($dete)
-    {
-        $path = public_path() . '/device/' . $dete . '/';
-        if (is_file($path . 'devicelistdata.text')) {
+    private function devicetime($dete) {
+        $path = public_path().'/device/' . $dete . '/';
+        if (is_file( $path . 'devicelistdata.text')) {
             $myfile = file_get_contents($path . 'devicelistdata.text');
             $exp = explode("\n", $myfile);
             $datadevice = [];
@@ -508,7 +498,7 @@ class DevicesController extends Controller
                 array_push($datadevice, json_decode($newstring1, true));
             }
             return $datadevice;
-        } else {
+        }else{
             return 105;
         }
     }

package-lock.json

@@ -3373,34 +3373,6 @@
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
       "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
     },
-    "bmaplib.curveline": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/bmaplib.curveline/-/bmaplib.curveline-1.0.0.tgz",
-      "integrity": "sha512-9wcFMVhiYxNPqpvsLDAADn3qDhNzXp2mA6VyHSHg2XOAgSooC7ZiujdFhy0sp+0QYjTfJ/MjmLuNoUg2HHxH4Q=="
-    },
-    "bmaplib.heatmap": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/bmaplib.heatmap/-/bmaplib.heatmap-1.0.4.tgz",
-      "integrity": "sha512-rmhqUARBpUSJ9jXzUI2j7dIOqnc38bqubkx/8a349U2qtw/ulLUwyzRD535OrA8G7w5cz4aPKm6/rNvUAarg/Q=="
-    },
-    "bmaplib.lushu": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/bmaplib.lushu/-/bmaplib.lushu-1.0.7.tgz",
-      "integrity": "sha512-LVvgpESPii6xGxyjnQjq8u+ic4NjvhdCPV/RiSS/PGTUdZKeTDS7prSpleJLZH3ES0+oc0gYn8bw0LtPYUSz2w=="
-    },
-    "bmaplib.markerclusterer": {
-      "version": "1.0.13",
-      "resolved": "https://registry.npmjs.org/bmaplib.markerclusterer/-/bmaplib.markerclusterer-1.0.13.tgz",
-      "integrity": "sha512-VrLyWSiuDEVNi0yUfwOhFQ6z1oEEHS4w36GNu3iASu6p52QIx9uAXMUkuSCHReNR0bj2Cp9SA1dSx5RpojXajQ==",
-      "requires": {
-        "bmaplib.texticonoverlay": "^1.0.2"
-      }
-    },
-    "bmaplib.texticonoverlay": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/bmaplib.texticonoverlay/-/bmaplib.texticonoverlay-1.0.2.tgz",
-      "integrity": "sha512-4ZTWr4ZP3B6qEWput5Tut16CfZgII38YwM3bpyb4gFTQyORlKYryFp9WHWrwZZaHlOyYDAXG9SX0hka43jTADg=="
-    },
     "bn.js": {
       "version": "4.11.8",
       "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.8.tgz",
@@ -8514,11 +8486,6 @@
       "integrity": "sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g==",
       "dev": true
     },
-    "js-md5": {
-      "version": "0.7.3",
-      "resolved": "https://registry.npmjs.org/js-md5/-/js-md5-0.7.3.tgz",
-      "integrity": "sha512-ZC41vPSTLKGwIRjqDh8DfXoCrdQIyBgspJVPXHBGu4nZlAEvG3nf+jO9avM9RmLiGakg7vz974ms99nEV0tmTQ=="
-    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -11798,11 +11765,6 @@
       "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=",
       "dev": true
     },
-    "qqmap": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/qqmap/-/qqmap-1.0.1.tgz",
-      "integrity": "sha1-Rieej5zWgALi4MxaX8FV9wH0AdM="
-    },
     "qs": {
       "version": "6.7.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
@@ -14545,7 +14507,7 @@
     },
     "uppercamelcase": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/uppercamelcase/-/uppercamelcase-1.1.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/uppercamelcase/download/uppercamelcase-1.1.0.tgz",
       "integrity": "sha1-Mk2YprOvx+iolT4QZBUJsOTiP5c=",
       "requires": {
         "camelcase": "^1.2.1"
@@ -14553,7 +14515,7 @@
       "dependencies": {
         "camelcase": {
           "version": "1.2.1",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz",
+          "resolved": "https://registry.npm.taobao.org/camelcase/download/camelcase-1.2.1.tgz",
           "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk="
         }
       }
@@ -14744,38 +14706,12 @@
     },
     "vue-amap": {
       "version": "0.5.10",
-      "resolved": "https://registry.npmjs.org/vue-amap/-/vue-amap-0.5.10.tgz",
-      "integrity": "sha512-9ViNCev1vx32+zZ5RvF/TmUZNbwL9QrdA2/OnD2GlXMfQBkJy7D08Vb7379t6guqnopDPtWJ8K6gg72h9+4GUg==",
+      "resolved": "https://registry.npm.taobao.org/vue-amap/download/vue-amap-0.5.10.tgz",
+      "integrity": "sha1-RkUWIDrwwIXUBL2Kyr8kAeSjb/Y=",
       "requires": {
         "uppercamelcase": "^1.1.0"
       }
     },
-    "vue-baidu-map": {
-      "version": "0.21.22",
-      "resolved": "https://registry.npmjs.org/vue-baidu-map/-/vue-baidu-map-0.21.22.tgz",
-      "integrity": "sha512-WQMPCih4UTh0AZCKKH/OVOYnyAWjfRNeK6BIeoLmscyY5aF8zzlJhz/NOHLb3mdztIpB0Z6aohn4Jd9mfCSjQw==",
-      "requires": {
-        "bmaplib.curveline": "^1.0.0",
-        "bmaplib.heatmap": "^1.0.4",
-        "bmaplib.lushu": "^1.0.7",
-        "bmaplib.markerclusterer": "^1.0.13",
-        "markdown-it": "^8.4.0"
-      },
-      "dependencies": {
-        "markdown-it": {
-          "version": "8.4.2",
-          "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-8.4.2.tgz",
-          "integrity": "sha512-GcRz3AWTqSUphY3vsUqQSFMbgR38a4Lh3GWlHRh/7MRwz8mcu9n2IO7HOh+bXHrR9kOPDl5RNCaEsrneb+xhHQ==",
-          "requires": {
-            "argparse": "^1.0.7",
-            "entities": "~1.1.1",
-            "linkify-it": "^2.0.0",
-            "mdurl": "^1.0.1",
-            "uc.micro": "^1.0.5"
-          }
-        }
-      }
-    },
     "vue-count-to": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/vue-count-to/-/vue-count-to-1.0.13.tgz",

package.json

@@ -77,21 +77,18 @@
     "file-saver": "^2.0.2",
     "fuse.js": "^3.6.1",
     "js-cookie": "^2.2.1",
-    "js-md5": "^0.7.3",
     "jsonlint": "^1.6.3",
     "jszip": "^3.2.2",
     "node-sass": "^4.13.1",
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
     "path-to-regexp": "^3.1.0",
-    "qqmap": "^1.0.1",
     "screenfull": "^4.2.1",
     "sortablejs": "^1.10.2",
     "tui-editor": "^1.4.6",
     "v-viewer": "^1.5.1",
     "vue": "2.6.10",
     "vue-amap": "^0.5.10",
-    "vue-baidu-map": "^0.21.22",
     "vue-count-to": "^1.0.13",
     "vue-i18n": "^8.15.5",
     "vue-loader": "^15.9.1",

resources/js/api/map.js

 import request from '@/utils/request';
 
-export function getmap(key) {
+export function devices(query) {
   return request({
-    url: 'https://webapi.amap.com/maps?v=1.4.15&key=' + key + '&callback=onLoad',
+    url: '/devices/deviceLocation',
     method: 'get',
+    params: query,
   });
 }
 
+export function users() {
+  return request({
+    url: '/user/userLocation',
+    method: 'get',
+  });
+}
+
+export function deviceinfo(id) {
+  return request({
+    url: '/devices/device_info/' + id,
+    method: 'get',
+  });
+}

resources/js/views/map/index.vue

 <template>
-  <div>
+  <div class="amap-page-container" style="height: calc(100vh - 84px);">
+    <el-amap
+      ref="map"
+      vid="amapDemo"
+      :amap-manager="amapManager"
+      :zoom="zoom"
+      :center="center"
+      :events="events"
+      class="amap-demo"
+    >
+      <!-- 用户标记 -->
+      <el-amap-marker
+        v-for="(marker, index) in markers"
+        :key="marker.id"
+        :position="marker.mapcenter | rebuildUserCenter(marker.mapcenter)"
+        :visible="markerVisible"
+        :content="marker.nickname | rebuildContent(marker.UserDaviceNum, marker.police)"
+        :vid="index"
+        :clickable="true"
+        :events="rebuildEvent(marker)"
+        :z-index="markerUserZIndex"
+      ></el-amap-marker>
+      <el-amap-circle-marker
+        v-for="marker in markersDevice"
+        :key="marker.id"
+        :visible="markersDeviceVisible"
+        :center="marker.devicecoord | deviceLocationFilter(marker.devicecoord)"
+        :radius="13"
+        :fill-color="marker.devicepolice | deviceStatusFilter('color')"
+        :fill-opacity="1"
+        :stroke-color="'#ccc'"
+        :stroke-opacity="0.9"
+        :events="markerClickEvent(marker)"
+      ></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="设备"
+        >
+        </el-switch>
+        <el-switch
+          v-model="markerVisible"
+          active-text="用户"
+        >
+        </el-switch>
+      </div>
+    </el-amap>
+    <!-- 点击地图标记打开的信息窗 -->
+    <el-dialog
+      :title="dialogTitle"
+      :visible.sync="dialogTableVisible"
+      width="20%"
+      :modal="false"
+      custom-class="zero-dialog"
+    >
+      <el-table :data="gridData" :show-header="false">
+        <el-table-column property="title"></el-table-column>
+        <el-table-column property="content"></el-table-column>
+      </el-table>
+    </el-dialog>
+    <!-- 用户的设备列表 -->
+    <div v-if="deviceListVisible" class="zero-user-devices">
+      <el-collapse v-model="activeNames">
+        <el-collapse-item name="1">
+          <template slot="title">
+            设备列表 - {{ leftDeviceName }}
+          </template>
+          <el-table :data="markersDevice" style="100%" max-height="700">
+            <el-table-column property="devicenum" label="设备编号" width="200px"></el-table-column>
+            <el-table-column property="deviceinfo" label="位置" width="200px"></el-table-column>
+            <el-table-column property="nd" label="值" width="40px"></el-table-column>
+            <el-table-column property="devicepolice" label="状态">
+              <template slot-scope="scope">
+                <el-tag effect="dark" :hit="false" style="border-color: #ffffff;" :color="scope.row.devicepolice | deviceStatusFilter('color')" size="mini">
+                  {{ scope.row.devicepolice | deviceStatusFilter('status') }}
+                </el-tag>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
   </div>
 </template>
 
 <script>
+import Vue from 'vue';
+import VueAMap from 'vue-amap';
+import { AMapManager } from 'vue-amap';
+import { devices, users, deviceinfo } from '@/api/map';
+
+Vue.use(VueAMap);
+
+// 初始化vue-amap
+VueAMap.initAMapApiLoader({
+  // 高德的key
+  key: '95cc1b89d62f020ce5a21ec503daef6c',
+  // 插件集合
+  plugin: [
+    'AMap.Autocomplete',
+    'AMap.PlaceSearch',
+    'AMap.Scale',
+    'AMap.OverView',
+    'AMap.ToolBar',
+    'AMap.MapType',
+    'AMap.PolyEditor',
+    'AMap.CircleEditor',
+  ],
+  // 高德 sdk 版本，默认为 1.4.4
+  v: '1.4.15',
+  uiVersion: '1.0.11',
+});
+
 export default {
-  data() {
+  filters: {
+    rebuildContent(company, deviceCount, alarmCount) {
+      let mcontent = '<div class="mapIcon"><span class="mapIcon_title">%name</span><span class="mapIcon_num_all">%num</span><span class="mapIcon_num">%alarm</span></div>';
+      mcontent = mcontent.replace(/%name/, company).replace(/%num/, deviceCount).replace(/%alarm/, alarmCount);
+      return mcontent;
+    },
+    rebuildUserCenter(mapcenter) {
+      if (mapcenter === null) {
+        return '';
+      }
+      mapcenter = mapcenter.replace(/\s*/g, '');
+      return mapcenter.split(',');
+    },
+    deviceLocationFilter(center) {
+      if (center === null) {
+        return '';
+      }
+      center = center.replace(/\s*/g, '');
+      return center.split(',');
+    },
+    deviceStatusFilter(status, cate) {
+      var statuses = [];
+      statuses[1] = { color: '#1c7a17', name: '正常' };
+      statuses[2] = { color: '#f6e032', name: '错误' };
+      statuses[3] = { color: '#f6e032', name: '传感器故障' };
+      statuses[4] = { color: '#f30016', name: '报警' };
+      statuses[5] = { color: '#f42f18', name: '低报' };
+      statuses[6] = { color: '#97000b', name: '高报' };
+      statuses[7] = { color: '#f6e032', name: '通信故障' };
+      statuses[8] = { color: '#f6e032', name: '超量程' };
+      statuses[9] = { color: '#747677', name: '离线' };
+      statuses[10] = { color: '#f6e032', name: '电量低' };
+      statuses[11] = { color: '#f6e032', name: '主电故障' };
+      statuses[12] = { color: '#f6e032', name: '备电故障' };
+      statuses[13] = { color: '#f6e032', name: '无此节点' };
+      statuses[14] = { color: '#f6e032', name: '低电压' };
+      statuses[15] = { color: '#f6e032', name: '故障' };
+      statuses[16] = { color: '#97000b', name: '报警联动' };
+      if (cate === 'color') {
+        return statuses[status].color;
+      } else if (cate === 'status') {
+        return statuses[status].name;
+      }
+    },
+  },
+  data(){
+    const _this = this;
     return {
-      type: 'permit',
+      map: {},
+      amapManager: new AMapManager(),
+      zoom: 6,
+      center: [114.505208, 38.045474],
+      events: {
+        init: (o) => {
+          o.setMapStyle('amap://styles/normal');
+          // console.log(o.getCenter());
+          // console.log(this.$refs.map.$$getInstance());
+          o.getCity(result => {
+            // console.log(result);
+          });
+        },
+        'moveend': () => {
+        },
+        'zoomchange': () => {
+          _this.zoom = this.$refs.map.$$getInstance().getZoom();
+        },
+        'click': (e) => {
+          // alert('map clicked');
+        },
+      },
+      plugin: ['ToolBar', {
+        pName: 'MapType',
+        defaultType: 0,
+        events: {
+          init(o) {
+            console.log(o);
+          },
+        },
+      }],
+      markers: [],
+      markerVisible: true,
+      markersDevice: [],
+      markersDeviceVisible: false,
+      gridData: {}, // 设备信息
+      dialogTitle: '设备信息', // 设备信息标题
+      dialogTableVisible: false, // 设备信息是否显示
+      deviceListVisible: true, // 用户设备列表是否显示
+      activeNames: ['1'], // 左侧设备列表默认打开
+      markerUserZIndex: 100,
+      deviceAll: undefined,
+      leftDeviceName: '全部设备',
     };
   },
+  watch: {
+  },
+  mounted() {
+  },
   created() {
-    this.getmap(); // 列表
+    this.$store.dispatch('app/toggleSideBar');
+    // const users = devices.users();
+    users()
+      .then(res => {
+        this.markers = res.data;
+      });
+    devices({})
+      .then(res => {
+        this.markersDevice = res.data;
+      });
   },
   methods: {
-    getmap() {
-      window.open('npm.html?type=' + this.compileStr(this.type));
+    allDevices() {
+      devices()
+        .then(res => {
+          this.leftDeviceName = '全部设备';
+          this.markersDevice = res.data;
+          this.zoom = 6;
+        });
     },
-    compileStr(code) {
-      var c = String.fromCharCode(code.charCodeAt(0) + code.length);
-      for (var i = 1; i < code.length; i++) {
-        c += String.fromCharCode(code.charCodeAt(i) + code.charCodeAt(i - 1));
-      }
-      return escape(c);
+    getUserDevices(center) {
+      // alert(userid);
+      this.zoom = 12;
+      this.center = center;
+      this.markerVisible = true;
+      this.markersDeviceVisible = true;
+    },
+    rebuildEvent(marker) {
+      var mapcenter = marker.mapcenter.replace(/\s*/g, '');
+      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;
+          that.getUserDeviceList(marker.id);
+        },
+      };
+    },
+    markerClickEvent(marker) {
+      const that = this;
+      return {
+        click(e) {
+          that.getUserDeviceInfo(marker.id);
+        },
+      };
+    },
+    // 获取单个用户下的设备
+    getUserDeviceList(uid) {
+      devices({ uid: uid })
+        .then(res => {
+          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>
 
 <style>
+.amap-demo {
+  height: 300px;
+}
+.mapIcon{
+  vertical-align: middle;
+  color: #555;
+  background-color: #fffeef;
+  font-size: 12px;
+  white-space: nowrap;
+  position: relative;
+  border: 1px solid #8e8e8e;
+  width: auto;
+  border-radius: 5px 5px 5px 0;
+  height: 23px;
+  line-height: 23px;
+  /* top: 25px; */
+  /* left: -37px; */
+}
+.mapIcon_title{
+  padding: 5px;
+  border-radius: 5px 0 0 0;
+}
+.mapIcon_num{
+  padding: 0 5px;
+  display: inline-block;
+  height: 100%;
+  color: #fff;
+  background-color: #dc3912;
+  border-radius: 0 5px 5px 0;
+}
+.mapIcon_num_all{
+  padding: 0 5px;
+  display: inline-block;
+  height: 100%;
+  color: #fff;
+  background-color: #23e610;
+  /* border-radius: 0 5px 5px 0; */
+}
+.mapIcon:before, .mapIcon:after{
+  content: '';
+  display: block;
+  position: absolute;
+  width: 0;
+  height: 0;
+  border: solid rgba(0,0,0,0);
+  border-width: 6px;
+  /* left: 40px; */
+}
+.mapIcon:before{
+  bottom: -13px;
+  border-top-color: #8e8e8e;
+}
+.mapIcon:after{
+  bottom: -12px;
+  border-top-color: #fffeef;
+}
+.toolbar{
+  position: fixed;
+  top: 120px;
+  right: 40px;
+}
+.zero-user-devices{
+  position: fixed;
+  top: 100px;
+  padding: 0px 10px 0px 10px;
+  background-color: #ffffff;
+}
 </style>