用户设备管理

resources/js/views/userdevice/index.vue

@@ -161,21 +161,23 @@
           </el-form>
         </el-card>
       </el-drawer>
-      <el-drawer title="编辑设备" :visible.sync="drawerup" :direction="directionup" :before-close="handleCloseup">
+      <el-drawer title="编辑设备" :visible.sync="drawerup" :direction="directionup" :before-close="handleCloseup" custom-class="zl-drawer">
         <el-card class="box-card">
           <el-form ref="updevicedata" :model="updevicedata" label-width="80px">
-            <el-form-item label="设备编号" label-width="92px">
+            <el-form-item label="设备编号" label-width="100px">
               <el-input v-model="updevicedata.devicenum" :disabled="disabled" style="width: 80%;"></el-input>
             </el-form-item>
-            <el-form-item label="用户名称" label-width="92px">
+            <el-form-item label="用户名称" label-width="100px">
               <el-input v-model="updevicedata.name" :disabled="disabled" style="width: 80%;"></el-input>
             </el-form-item>
-            <el-form-item label="设备名称" label-width="92px">
+            <el-form-item label="设备名称" label-width="100px">
               <el-input v-model="updevicedata.username" style="width: 80%;"></el-input>
             </el-form-item>
             <el-form-item label="设备坐标" label-width="100px">
-              <el-input v-model="updevicedata.devicecoord" style="width: 80%;"></el-input>
-              <el-button type="primary" style="left: 18px;z-index: 999;width: 54px;" @click="accuracy"><span style="left: -22px;position: relative;">拾取坐标</span></el-button>
+              <el-input v-model="updevicedata.devicecoord" style="width: 50%;"></el-input>
+              <el-button type="primary" @click="drawerMap = true">
+                拾取坐标
+              </el-button>
             </el-form-item>
             <el-form-item label="设备联系人" label-width="100px">
               <el-input v-model="updevicedata.devicelinkman" style="width: 80%;"></el-input>
@@ -200,6 +202,9 @@
             </el-form-item>
           </el-form>
         </el-card>
+        <el-drawer title="拾取坐标" :visible.sync="drawerMap" :modal="false" :direction="directionMap" :before-close="handleClose" size="70%" :with-header="false">
+          <div><CoordinateMap @map-confirm="mapConfirmData" @giveLnglat="getLnglat"></CoordinateMap></div>
+        </el-drawer>
       </el-drawer>
     </div>
   </div>
@@ -212,12 +217,15 @@ import waves from '@/directive/waves'; // 水波纹效果
 import clip from '@/utils/clipboard';
 import checkPermission from '@/utils/permission';
 import { parseTime } from '@/utils';
+import CoordinateMap from '@/components/coordinateMap';
 export default {
   name: 'Devicetype',
-  components: { Pagination },
+  components: { Pagination, CoordinateMap },
   directives: { waves },
   data() {
     return {
+      drawerMap: false,
+      directionMap: 'rtl',
       tableKey: 0,
       downloadLoading: false,
       pvData: [],
@@ -261,6 +269,18 @@ export default {
   },
 
   methods: {
+    mapConfirmData(text) {
+      if (text.state === true) {
+        this.updevicedata.devicecoord = text.location;
+        this.drawerMap = false;
+      }
+      if (text.state === false) {
+        this.drawerMap = false;
+      }
+    },
+    getLnglat(lnglnt) {
+      console.log(lnglnt);
+    },
     checkPermission,
     getList() {
       deviceTypeList()
@@ -513,4 +533,7 @@ export default {
     margin-bottom: 0;
     width: 50%;
   }
+  .zl-drawer .el-drawer__body {
+    overflow-y: auto !important;
+  }
 </style>