增加设备添加

app/Console/Commands/swooleMqtt.php

+<?php
+
+namespace App\Console\Commands;
+
+use App\Http\Controllers\Auth\SwooleCommandController;
+use Illuminate\Console\Command;
+use Illuminate\Support\Facades\Log;
+
+class swooleMqtt extends Command
+{
+    public $mqtt;
+    protected $signature = 'swooleMqtt {action?}';
+    protected $description = 'swooleMqtt';
+    public function __construct()
+    {
+        parent::__construct();
+    }
+    public function handle()
+    {
+        $action = $this->argument('action');
+        switch ($action) {
+            case 'close':
+                break;
+            default:
+                $this->start();//开启mqtt服务
+                break;
+        }
+
+    }
+   public function decodeValue($data)
+    {
+        return 256 * ord($data[0]) + ord($data[1]);
+    }
+
+    public function decodeString($data)
+    {
+        $length = $this->decodeValue($data);
+        return substr($data, 2, $length);
+    }
+
+    public function mqttGetHeader($data)
+    {
+        $byte = ord($data[0]);
+
+        $header['type'] = ($byte & 0xF0) >> 4;
+        $header['dup'] = ($byte & 0x08) >> 3;
+        $header['qos'] = ($byte & 0x06) >> 1;
+        $header['retain'] = $byte & 0x01;
+
+        return $header;
+    }
+
+    public function eventConnect($header, $data)
+    {
+        $connect_info['protocol_name'] = $this->decodeString($data);
+        $offset = strlen($connect_info['protocol_name']) + 2;
+
+        $connect_info['version'] = ord(substr($data, $offset, 1));
+        $offset += 1;
+
+        $byte = ord($data[$offset]);
+        $connect_info['willRetain'] = ($byte & 0x20 == 0x20);
+        $connect_info['willQos'] = ($byte & 0x18 >> 3);
+        $connect_info['willFlag'] = ($byte & 0x04 == 0x04);
+        $connect_info['cleanStart'] = ($byte & 0x02 == 0x02);
+        $offset += 1;
+
+        $connect_info['keepalive'] = $this->decodeValue(substr($data, $offset, 2));
+        $offset += 2;
+        $connect_info['clientId'] = $this->decodeString(substr($data, $offset));
+        return $connect_info;
+    }
+    public function start()
+    {
+        $this->mqtt = new \swoole_server("0.0.0.0", 9506, SWOOLE_BASE);
+        $this->mqtt->set([
+            'open_mqtt_protocol' => true, // 启用 mqtt 协议
+            'worker_num' => 1,
+        ]);
+        $this->mqtt->on('connect', function ($server, $fd) {
+            echo "Client:Connect.\n";
+        });
+        $this->mqtt->on('receive', function ($server, $fd, $from_id, $data) {
+            $header = $this->mqttGetHeader($data);
+            if ($header['type'] == 1) {
+                $resp = chr(32) . chr(2) . chr(0) . chr(0);
+                $this->eventConnect($header, substr($data, 2));
+                print_r($resp);
+                $this->mqtt->send($fd, $resp);
+            } elseif ($header['type'] == 3) {
+                $resp = chr(32) . chr(2) . chr(0) . chr(0);
+                $this->eventConnect($header, substr($data, 2));
+                $this->mqtt->send($fd, $resp);
+                print_r($data);
+                //file_put_contents(__DIR__.'/data.log', $data);
+            }
+            echo "received length=" . strlen($data) . "\n";
+        });
+
+        $this->mqtt->on('close', function ($server, $fd) {
+            echo "Client: Close.\n";
+        });
+        $this->mqtt->start();
+    }
+}
\ No newline at end of file

app/Http/Controllers/UserController.php

@@ -326,7 +326,6 @@ class UserController extends Controller
             ->select('b.username','b.id', 'b.add_time' , 'b.nickname', 'b.email', 'b.state', 'a.area_name as area', 'c.area_name as city', 'p.area_name as province')
             ->get();
         $davicenum = DB::table('BackgroundUser')
-            //->where('state', '>', '1')
             ->select('id')
             ->get()->toArray();
         $data = [];
@@ -422,7 +421,6 @@ class UserController extends Controller
             }
             $userdata = Users::where('id', '=', $userid)
                 ->select('username', 'nickname', 'email', 'title', 'company', 'mapcenter')
-               // ->where('state', '>', '1')
                 ->first();
             if ($userdata) {
                 return $this->jsonSuccessData($userdata);
@@ -472,7 +470,7 @@ class UserController extends Controller
         } else {
             $data['isadmin'] = 2;
         }
-        $data['contactsid'] = Auth::id();
+//        $data['contactsid'] = Auth::id();
         $isadmin = DB::table('contactsuser')->insert($data);
         return $this->jsonSuccessData($isadmin);
     }

app/Laravue/Models/Device.php

@@ -7,6 +7,7 @@ use Illuminate\Foundation\Auth\User as Authenticatable;
 use Laravel\Passport\HasApiTokens;
 use Spatie\Permission\Traits\HasRoles;
 use Illuminate\Support\Facades\Auth;
+
 class Device extends Authenticatable
 {
     use Notifiable, HasRoles, HasApiTokens;
@@ -14,7 +15,7 @@ class Device extends Authenticatable
     public $timestamps = false;
 
     //用户添加设备
-    public function adddevice($datadevice = []): string
+    public function adddevice($datadevice = [], $type): string
     {
         foreach ($datadevice as $k => $value) {
             if (is_null($k)) {
@@ -23,12 +24,13 @@ class Device extends Authenticatable
         }
         $datadevice['deviceaddtime'] = time();
         $datadevice['deviceuuid'] = $this->guid();
-        $datadevice['uid'] = Auth::id();
+        $type == 1 ? '' : $datadevice['uid'] = Auth::id();
+        $datadevice['ipaddr'] = $this->get_client_ip();
         return $this->insertGetId($datadevice);
     }
 
     //生成uid
-    private function guid() :string
+    private function guid(): string
     {
         if (function_exists('com_create_guid')) {
             return com_create_guid();
@@ -46,4 +48,18 @@ class Device extends Authenticatable
             return $uuid;
         }
     }
+
+    private function get_client_ip()
+    {
+        if ($_SERVER['REMOTE_ADDR']) {
+            $cip = $_SERVER['REMOTE_ADDR'];
+        } elseif (getenv("REMOTE_ADDR")) {
+            $cip = getenv("REMOTE_ADDR");
+        } elseif (getenv("HTTP_CLIENT_IP")) {
+            $cip = getenv("HTTP_CLIENT_IP");
+        } else {
+            $cip = "unknown";
+        }
+        return $cip;
+    }
 }

composer.json

@@ -28,7 +28,8 @@
         "league/flysystem-aws-s3-v3": "^1.0",
         "predis/predis": "^1.1",
         "spatie/laravel-permission": "^3.0",
-        "swooletw/laravel-swoole": "^2.6"
+        "swooletw/laravel-swoole": "^2.6",
+        "try-to/swoole_mqtt": "^0.0.5"
     },
     "require-dev": {
         "beyondcode/laravel-dump-server": "^1.0",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "809662c9fbf54c5c1c358939e50d474b",
+    "content-hash": "2afb5db88798cc6ab2d4e8a7e00b3b73",
     "packages": [
         {
             "name": "aws/aws-sdk-php",
@@ -4503,6 +4503,43 @@
             "homepage": "https://github.com/tijsverkoyen/CssToInlineStyles",
             "time": "2019-10-24T08:53:34+00:00"
         },
+        {
+            "name": "try-to/swoole_mqtt",
+            "version": "v0.0.5",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/try-to/swoole_mqtt.git",
+                "reference": "d66f30b34e8105b065bb823d604aa9844a26ce8e"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/try-to/swoole_mqtt/zipball/d66f30b34e8105b065bb823d604aa9844a26ce8e",
+                "reference": "d66f30b34e8105b065bb823d604aa9844a26ce8e",
+                "shasum": ""
+            },
+            "require": {
+                "ext-swoole": ">=2.1",
+                "php": ">=7.0.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "TrytoMqtt\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "try-to",
+                    "email": "w@tryto.cn"
+                }
+            ],
+            "description": "swoole mqtt client",
+            "time": "2018-12-14T06:41:54+00:00"
+        },
         {
             "name": "vlucas/phpdotenv",
             "version": "v4.1.4",

public/latlge.html

+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <title>输入提示后查询</title>
+    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
+    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=2719fe261fee06a08dcb4980990879da&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
+    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
+    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
+</head>
+<body>
+<div id="container"></div>
+<div id="myPageTop">
+    <table>
+        <tr>
+            <td>
+                <label>请输入关键字：</label>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <input id="tipinput"/>
+            </td>
+        </tr>
+    </table>
+    <div class="input-card">
+        <h4>左击获取经纬度：</h4>
+        <div class="input-item">
+          <input type="text" readonly="true" id="lnglat">
+        </div>
+    </div>
+</div>
+<script type="text/javascript">
+    //地图加载
+    var map = new AMap.Map("container", {
+        resizeEnable: true
+    });
+    //输入提示
+    var autoOptions = {
+        input: "tipinput"
+    };
+    var auto = new AMap.Autocomplete(autoOptions);
+    var placeSearch = new AMap.PlaceSearch({
+        map: map
+    });  //构造地点查询类
+    AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
+    function select(e) {
+        placeSearch.setCity(e.poi.adcode);
+        placeSearch.search(e.poi.name);  //关键字查询查询
+        document.getElementById("lnglat").value = e.poi.location.lng + ',' + e.poi.location.lat
+    }
+    map.on('click', function(e) {
+      document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
+    });
+</script>
+</body>
+</html>

resources/js/api/device.js

@@ -99,9 +99,32 @@ export function deviceLocation() {
   });
 }
 
+export function addUserDevice() {
+  return request({
+    url: '/devices/addUserDevice',
+    method: 'get',
+  });
+}
+
 export function control(page, limit, type) {
   return request({
     url: 'devices/control?page=' + page + '&limit=' + limit + '&type=' + type,
     method: 'get',
   });
 }
+
+export function adddevice(data) {
+  return request({
+    url: '/devices/adddevice',
+    method: 'post',
+    data,
+  });
+}
+
+export function addcontactsuser(data) {
+  return request({
+    url: '/user/addcontactsuser',
+    method: 'post',
+    data,
+  });
+}

resources/js/components/coordinateMap/index.vue

+<template>
+  <div class="amap-page-container">
+    <el-amap-search-box class="search-box" style="top:52px" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
+    <el-amap vid="amapDemo" :center="mapCenter" :zoom="zoom" class="amap-demo" :events="events">
+      <el-amap-marker v-for="marker in markers" :key="marker.id" :position="marker"></el-amap-marker>
+    </el-amap>
+    <div class="toolbar">
+      position: {{ lng }}, {{ lat }}
+    </div>
+  </div>
+</template>
+<script>
+import Vue from 'vue';
+import VueAMap from 'vue-amap';
+Vue.use(VueAMap);
+VueAMap.initAMapApiLoader({
+  key: '2719fe261fee06a08dcb4980990879da',
+  plugin: ['AMap.Geocoder'],
+  v: '1.4.4',
+  uiVersion: '1.0.11',
+});
+export default {
+  data() {
+    return {
+      lng: 0,
+      lat: 0,
+      zoom: 13,
+      center: [114.512417, 38.061424],
+      markers: [
+        [121.59996, 31.197646],
+        [121.40018, 31.197622],
+        [121.69991, 31.207649],
+      ],
+      searchOption: {
+        city: '上海',
+        citylimit: true,
+      },
+      mapCenter: [114.512417, 38.061424],
+      address: '',
+      events: {
+        click(e) {
+          const self = this;
+          const { lng, lat } = e.lnglat;
+          self.lng = lng;
+          self.lat = lat;
+          // var geocoder = VueAMap.Geocoder({
+          //   radius: 1000,
+          //   extensions: 'all',
+          // });
+          // geocoder.getAddress([lng, lat], function(status, result) {
+          //   if (status === 'complete' && result.info === 'OK') {
+          //     if (result && result.regeocode) {
+          //       self.address = result.regeocode.formattedAddress;
+          //       self.$nextTick();
+          //     }
+          //   }
+          // });
+        },
+      },
+    };
+  },
+  created() {
+  },
+  methods: {
+    addMarker() {
+      const lng = 121.5 + Math.round(Math.random() * 1000) / 10000;
+      const lat = 31.197646 + Math.round(Math.random() * 500) / 10000;
+      this.markers.push([lng, lat]);
+    },
+    onSearchResult(pois) {
+      var latSum = 0;
+      var lngSum = 0;
+      if (pois.length > 0) {
+        pois.forEach(poi => {
+          const { lng, lat } = poi;
+          lngSum += lng;
+          latSum += lat;
+          this.markers.push([poi.lng, poi.lat]);
+        });
+        const center = {
+          lng: lngSum / pois.length,
+          lat: latSum / pois.length,
+        };
+        this.mapCenter = [center.lng, center.lat];
+        this.lng = center.lng;
+        this.lat = center.lat;
+      }
+    },
+  },
+};
+</script>
+
+<style>
+.amap-demo {
+  height: 600px !important;
+}
+.search-box {
+  position: absolute;
+  top: 25px;
+  left: 20px;
+}
+.amap-page-container {
+  position: relative;
+}
+</style>

resources/js/icons/svg/deviceadd.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1590631213882" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2708" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M900.7 432.2H548.4V109.3c0-20.2-16.5-36.7-36.7-36.7-20.2 0-36.7 16.5-36.7 36.7v322.9H122.8c-20.2 0-36.7 16.5-36.7 36.7 0 20.2 16.5 36.7 36.7 36.7h352.3v381.6c0 20.2 16.5 36.7 36.7 36.7 20.2 0 36.7-16.5 36.7-36.7V505.6h352.3c20.2 0 36.7-16.5 36.7-36.7-0.1-20.2-16.6-36.7-36.8-36.7z" fill="" p-id="2709"></path></svg>
\ No newline at end of file

resources/js/router/modules/device.js

@@ -30,6 +30,12 @@ const deviceRoutes = {
       name: 'DeviceStutus',
       meta: { title: '设备废纸篓', icon: 'devicestutus', permissions: ['manage user'] },
     },
+    {
+      path: 'addDevice',
+      component: () => import('@/views/device/addDevice'),
+      name: 'addDevice',
+      meta: { title: '添加设备', icon: 'deviceadd', permissions: ['manage user'] },
+    },
   ],
 };
 export default deviceRoutes;

resources/js/views/components-demo/coordinateMap.vue

+<template>
+  <div class="coordinateMap">
+    <div class="coordinateMap_input">
+      <el-input
+        v-model="lng"
+        placeholder="点击地图或输入经度"
+        @change="lnglatChange"
+      ></el-input>
+      <div style="width:50px"></div>
+      <el-input
+        v-model="lat"
+        placeholder="点击地图或输入纬度"
+        @change="lnglatChange"
+      ></el-input>
+    </div>
+    <div
+      id="map"
+      class="map"
+    >
+    </div>
+  </div>
+</template>
+<script src="https://webapi.amap.com/maps?v=1.4.15&key=2719fe261fee06a08dcb4980990879da"></script>
+<script>
+var map
+var mouseTool
+export default {
+  data() {
+    return {
+      lastDot: '',
+      marker: null,
+      lng: '',
+      lat: '',
+    }
+  },
+  mounted() {
+    this.initMap()
+    //监听用户的点击事件
+    map.on('click', (e) => {
+      this.lng = e.lnglat.getLng()
+      this.lat = e.lnglat.getLat()
+      this.addDot()
+    })
+  },
+  methods: {
+    initMap() {
+      map = new AMap.Map('map', {
+        resizeEnable: true, //是否监控地图容器尺寸变化
+        zoom: 11, //初始化地图层级
+        center: [116.46,39.92] //初始化地图中心点
+      });
+    },
+    lnglatChange() {
+      this.addDot()
+      //自适应中心点
+      map.setFitView();
+    },
+    //增加点标记
+    addDot(){
+       if (this.marker) {
+        this.marker.setMap(null);
+        this.marker = null;
+      }
+      this.marker = new AMap.Marker({
+        position: new AMap.LngLat(this.lng, this.lat)
+      });
+      let lnglat = {}
+      lnglat.lng = Number(this.lng)
+      lnglat.lat = Number(this.lat)
+      this.$emit("giveLnglat", lnglat);
+      map.add(this.marker);
+    },
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.coordinateMap {
+  width: 500px;
+  .coordinateMap_input {
+    display: flex;
+    margin-bottom: 15px;
+  }
+  .map {
+    width: 500px;
+    height: 300px;
+    border-radius:6px;
+  }
+}
+</style>

resources/js/views/device/addDevice.vue

+<template>
+  <div class="app-container">
+    <el-card class="box-card">
+      <el-form ref="form" :rules="rules" :model="form" label-width="80px">
+        <el-form-item label="设备名称" prop="username">
+          <el-input v-model="form.username" style="width: 50%;"></el-input>
+        </el-form-item>
+        <el-form-item label="设备编号" prop="devicenum">
+          <el-input v-model="form.devicenum" style="width: 50%;"></el-input>
+        </el-form-item>
+        <el-form-item label="设备类型" prop="dtype">
+          <el-select v-model="form.dtype" placeholder="请选择设备类型">
+            <el-option v-for="item in devicetype" :key="item.id" :label="item.tname" :value="item.tid"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="检测介质" prop="status">
+          <el-select v-model="form.status" placeholder="请选择检测介质">
+            <el-option v-for="item in gas" :key="item.id" :label="item.gas" :value="item.id"></el-option>
+          </el-select>
+          <span>/</span>
+          <el-select v-model="form.devicemonad" placeholder="请选择单位" prop="devicemonad">
+            <el-option v-for="item in danwei" :key="item.id" :label="item.danwei" :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="选择用户" prop="uid">
+          <el-select v-model="form.uid" placeholder="请选择用户">
+            <el-option v-for="item in addUserDevice" :key="item.id" :label="item.nickname" :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="设备联系人" prop="devicelinkman" label-width="92px">
+          <el-input v-model="form.devicelinkman" style="width: 50%;"></el-input>
+        </el-form-item>
+        <el-form-item label="设备手机号" prop="devicephone" label-width="92px">
+          <el-input v-model="form.devicephone" style="width: 50%;"></el-input>
+        </el-form-item>
+        <el-form-item label="设备坐标" prop="devicecoord">
+          <el-input v-model="form.devicecoord" style="width: 50%;"></el-input>
+          <el-button type="primary" style="position: relative;left: 51px;top: 57px;z-index: 999;" @click="drawer = true">拾取坐标</el-button>
+        </el-form-item>
+        <el-form-item label="设备详情,设备安装位置" prop="deviceinfo" label-width="167px">
+          <el-input v-model="form.deviceinfo" style="width: 50%;"></el-input>
+        </el-form-item>
+        <el-form-item label="设备备注" prop="deviceremark">
+          <el-input v-model="form.deviceremark" type="textarea"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
+          <el-button @click="resetForm('form')">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-drawer title="拾取坐标" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
+      <span style="color: #E6A23C;" @click="positionUrl">如果找不到坐标!请点击</span>
+      <div><CoordinateMap @giveLnglat="getLnglat"></CoordinateMap></div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import CoordinateMap from '@/components/coordinateMap';
+import { deviceTypeList, addUserDevice, adddevice } from '@/api/device';
+export default {
+  components: { CoordinateMap },
+  data() {
+    return {
+      drawer: false,
+      direction: 'rtl',
+      form: {
+        username: undefined, // 设备名称
+        devicenum: undefined, // 设备编号
+        dtype: undefined, // 设备类型对应device_type表
+        status: undefined, // 介质状态对应gas
+        devicemonad: undefined, // 设备单位对应danwei表
+        uid: undefined, // 用户id
+        devicelinkman: undefined, // 设备联系人
+        devicephone: undefined, // 设备手机号
+        devicecoord: undefined, // 设备坐标
+        deviceinfo: undefined, // 设备详情,设备安装位置
+        deviceremark: undefined, // 设备备注,
+        isadmin: 1, // 是否管理员添加
+      },
+      danwei: [],
+      devicetype: [],
+      gas: [],
+      addUserDevice: [],
+      rules: {
+        username: [
+          { required: true, message: '请输入设备名称', trigger: 'blur' },
+          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
+        ],
+        devicenum: [
+          { required: true, message: '请输入设备编号', trigger: 'blur' },
+          { min: 5, max: 22, message: '长度在 5 到 22 个字符', trigger: 'blur' },
+        ],
+        dtype: [
+          { type: 'integer', required: true, message: '请选择设备类型', trigger: 'change' },
+        ],
+        status: [
+          { type: 'integer', required: true, message: '请选择介质', trigger: 'change' },
+        ],
+        devicemonad: [
+          { type: 'integer', required: true, message: '请选择单位', trigger: 'change' },
+        ],
+        uid: [
+          { required: true, message: '请选择用户', trigger: 'change' },
+        ],
+        devicelinkman: [
+          { required: true, message: '请填设备联系人', trigger: 'blur' },
+          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' },
+        ],
+        devicephone: [
+          { required: true, message: '请填设备联系电话', trigger: 'blur' },
+          { min: 11, max: 11, message: '长度在 11 个字符', trigger: 'blur' },
+        ],
+        devicecoord: [
+          { required: true, message: '请填设备坐标', trigger: 'blur' },
+        ],
+        deviceinfo: [
+          { required: true, message: '请填设备详情,设备安装位置', trigger: 'blur' },
+        ],
+      },
+    };
+  },
+  created() {
+    this.deviceTypeList();
+    this.addUserDevices();
+  },
+  methods: {
+    onSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          adddevice(this.form)
+            .then(response => {
+              if (response.code === 200) {
+                this.$router.push({ path: '/device/device' });
+              }
+            })
+            .catch(err => {
+              console.log(err);
+            });
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+    getLnglat(lnglnt) {
+      console.log(lnglnt);
+    },
+    deviceTypeList() {
+      deviceTypeList()
+        .then(response => {
+          this.danwei = response.data.danwei;
+          this.devicetype = response.data.devicetype;
+          this.gas = response.data.gas;
+        })
+        .catch(err => {
+          console.log(err);
+        });
+    },
+    addUserDevices() {
+      addUserDevice()
+        .then(response => {
+          this.addUserDevice = response.data;
+        })
+        .catch(err => {
+          console.log(err);
+        });
+    },
+    positionUrl() {
+      window.open('latlge.html');
+      this.drawer = false;
+    },
+    handleClose(done) {
+      this.$confirm('确认关闭？')
+        .then(_ => {
+          done();
+        })
+        .catch(_ => {
+        });
+    },
+  },
+};
+</script>
+
+<style>
+</style>

resources/js/views/device/index.vue

@@ -73,6 +73,11 @@
           <span>{{ scope.row.deviceinfo }}</span>
         </template>
       </el-table-column>
+      <el-table-column align="center" label="添加着ip地址" width="170">
+        <template slot-scope="scope">
+          <span @click="handleCopy(scope.row.ipaddr,$event)">{{ scope.row.ipaddr }}</span>
+        </template>
+      </el-table-column>
       <el-table-column align="center" label="创建时间" width="170">
         <template slot-scope="scope">
           <span>{{ scope.row.deviceaddtime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
@@ -91,7 +96,7 @@
           <span v-if="scope.row.status_name!='正常' " :style="{color:( scope.row.status_name=='正常' ? '#67C23A' : '#F56C6C' )}">{{ scope.row.status_name=='正常' ? '正常' : '设备异常' }}</span>
         </template>
       </el-table-column>
-      <el-table-column align="center" label="操作" width="170">
+      <el-table-column align="center" label="操作" width="260px">
         <template slot-scope="scope">
           <el-popover width="160" trigger="click" placement="top">
             <p>此操作,分丢弃废纸篓,和禁用用户</p>
@@ -101,6 +106,7 @@
             </div>
             <el-button slot="reference" size="mini" type="danger" :disabled="scope.row.delete == 1 ? true : (scope.row.devicestatus > 1 ? true : false) ">操作</el-button>
           </el-popover>
+          <el-button slot="reference" size="mini" type="primary" @click="contactsuser(scope.row.id)">添加联系人</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -131,11 +137,33 @@
         <el-table-column label="设备手机号" prop="devicephone"></el-table-column>
       </el-table>
     </el-dialog>
+    <el-drawer title="添加联系人" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
+      <el-card class="box-card">
+        <el-form ref="contactsdata" :model="contactsdata" label-width="80px">
+          <el-form-item label="联系人名称" label-width="92px">
+            <el-input v-model="contactsdata.contacts_name" style="width: 80%;"></el-input>
+          </el-form-item>
+          <el-form-item label="联系人手机号" label-width="100px">
+            <el-input v-model="contactsdata.contacts_phone" style="width: 80%;"></el-input>
+          </el-form-item>
+          <el-form-item label="人员状态">
+            <el-radio-group v-model="contactsdata.isstatus">
+              <el-radio label="开启"></el-radio>
+              <el-radio label="禁用"></el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="oncontacts">立即创建</el-button>
+            <el-button @click="handleClose">取消</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </el-drawer>
   </div>
 </template>
 
 <script>
-import { deviceTypeList, deviceList, deviceDataInfo, deviceDataSearch, deviceBasket, deviceDelete } from '@/api/device';
+import { deviceTypeList, deviceList, deviceDataInfo, deviceDataSearch, deviceBasket, deviceDelete, addcontactsuser } from '@/api/device';
 import Pagination from '@/components/Pagination'; // 分页
 import waves from '@/directive/waves'; // 水波纹效果
 import clip from '@/utils/clipboard';
@@ -166,6 +194,14 @@ export default {
       type: '',
       total: 0,
       paper: undefined,
+      drawer: false,
+      direction: 'rtl',
+      contactsdata: {
+        contactsid: undefined,
+        contacts_name: undefined,
+        contacts_phone: undefined,
+        isstatus: undefined,
+      },
     };
   },
   created() {
@@ -232,6 +268,10 @@ export default {
     handleCopyphone(text, event){
       clip(text, event);
     },
+    // 添加设备
+    addDevice() {
+      this.$router.push({ path: '/device/addDevice' });
+    },
     handleDownload() {
       this.downloadLoading = true;
       import('@/vendor/Export2Excel').then(excel => {
@@ -288,6 +328,49 @@ export default {
           console.log(err);
         });
     },
+    contactsuser(id) {
+      const deviceid = id;
+      this.drawer = true; // 打开抽屉
+      this.contactsdata.contactsid = deviceid;
+    },
+    handleClose(done) {
+      this.drawer = false; // 关闭抽屉
+      this.contactsdata.contacts_name = undefined;
+      this.contactsdata.contacts_phone = undefined;
+      this.contactsdata.contactsid = undefined;
+      this.contactsdata.isstatus = undefined;
+    },
+    oncontacts() {
+      if (this.contactsdata.contacts_name === undefined) {
+        this.$message({
+          message: '联系人名称不能为空',
+          type: 'warning',
+        });
+      } else if (this.contactsdata.contacts_phone === undefined) {
+        this.$message({
+          message: '联系人手机号不能为空',
+          type: 'warning',
+        });
+      } else if (this.contactsdata.isstatus === undefined) {
+        this.$message({
+          message: '请选择用户状态',
+          type: 'warning',
+        });
+      } else {
+        this.contactsdata.isstatus === '开启' ? this.contactsdata.isstatus = 1 : this.contactsdata.isstatus = 2;
+        addcontactsuser(this.contactsdata)
+          .then(response => {
+            this.$message({
+              message: '添加成功',
+              type: 'success',
+            });
+            this.handleClose();
+          })
+          .catch(err => {
+            console.log(err);
+          });
+      }
+    },
     deviceDelete(id, type) {
       this.$confirm('是否将设备丢弃', '提示', {
         confirmButtonText: '确定',

resources/js/views/user/installer.vue

@@ -26,12 +26,12 @@
           <span>{{ scope.row.name }}</span>
         </template>
       </el-table-column>
-      <el-table-column prop="phone" label="手机号" width="150">
+      <el-table-column prop="phone" label="手机号">
         <template slot-scope="scope">
           <span @click="handleCopy(scope.row.phone,$event)">{{ scope.row.phone }}</span>
         </template>
       </el-table-column>
-      <el-table-column prop="email" label="邮箱" width="160">
+      <el-table-column prop="email" label="邮箱">
         <template slot-scope="scope">
           <span @click="handleCopy(scope.row.email,$event)">{{ scope.row.email }}</span>
         </template>

resources/js/views/user/userStatistics.vue

@@ -4,7 +4,7 @@
       <el-button>{{ item.tname }}</el-button>
     </el-tooltip>
     <el-badge :value="devicenum" class="item" type="primary">
-      <el-button size="small">总共设备</el-button>
+      <el-button size="small">用户总数</el-button>
     </el-badge>
     <el-table :data="countdata" stripe style="width: 100%">
       <el-table-column prop="date" label="姓名" width="180">

routes/api.php

@@ -93,6 +93,7 @@ Route::group(['middleware'=>'auth:api'],function (){
     Route::get('devices/addClassify/{data}','DevicesController@addClassify');//添加分类
     Route::get('devices/delteClassify/{id}','DevicesController@delteClassify');//删除分类
     Route::get('devices/detedevice','DevicesController@detedevice');//查看历史数据
+    Route::get('devices/addUserDevice','DevicesController@addUserDevice');//返回正常用户
     Route::get('devices/control','DevicesController@control');//返回消防监测
     Route::get('devices/deviceLocation','DevicesController@deviceLocation');//返回设备安装位置
     Route::get('devices/device_info/{id}','DevicesController@device_info');//返回设备地图详情信息