feat(device): support longitude and latitude

src/utils/validate.js

@@ -34,3 +34,11 @@ export function validIPv6 (ip) {
       return false
   }
 }
+
+export function validLongitude (longitude) {
+  return /^[-+]?(0(\.\d{1,8})?|([1-9](\d)?)(\.\d{1,8})?|1[0-7]\d{1}(\.\d{1,8})?|180(([.][0]{1,8})?))$/.test(longitude)
+}
+
+export function validLatitude (latitude) {
+  return /^[-+]?((0|([1-8]\d?))(\.\d{1,10})?|90(\.0{1,10})?)$/.test(latitude)
+}

src/views/device/detail/components/DeviceInfo.vue

@@ -68,9 +68,25 @@
           maxlength="50"
           clearable
         />
+        <span class="c-grid-form__label required">经度：</span>
+        <div class="l-flex--row c-grid-form__option">
+          <el-input
+            v-model.trim="info.longitude"
+            class="l-flex__fill c-sibling-item"
+            placeholder="-180 ~ +180"
+            maxlength="13"
+          />
+          <span class="c-sibling-item far c-grid-form__label required">纬度：</span>
+          <el-input
+            v-model.trim="info.latitude"
+            class="l-flex__fill c-sibling-item"
+            placeholder="-90 ~ +90"
+            maxlength="12"
+          />
+        </div>
         <span class="c-grid-form__label required">地址：</span>
         <el-input
-          v-model="info.address"
+          v-model.trim="info.address"
           type="textarea"
           maxlength="100"
           :rows="3"
@@ -84,6 +100,10 @@
 <script>
 import { updateDevice } from '@/api/device'
 import { Access } from '@/constant'
+import {
+  validLongitude,
+  validLatitude
+} from '@/utils/validate'
 import ContentProtection from './external/ContentProtection'
 
 export default {
@@ -109,10 +129,8 @@ export default {
   },
   methods: {
     onEdit () {
-      this.info = {
-        name: this.device.name,
-        address: this.device.address
-      }
+      const { name, longitude, latitude, address } = this.device
+      this.info = { name, longitude, latitude, address }
       this.$refs.editDialog.show()
     },
     onSave (done) {
@@ -130,7 +148,26 @@ export default {
         })
         return
       }
-      if (this.info.name === this.device.name && this.info.address === this.device.address) {
+      if (!validLongitude(this.info.longitude)) {
+        this.$message({
+          type: 'warning',
+          message: '经度格式错误，-180 ~ +180'
+        })
+        return
+      }
+      if (!validLatitude(this.info.latitude)) {
+        this.$message({
+          type: 'warning',
+          message: '纬度格式错误，-90 ~ +90'
+        })
+        return
+      }
+      if (
+        this.info.name === this.device.name
+        && this.info.longitude === this.device.longitude
+        && this.info.latitude === this.device.latitude
+        && this.info.address === this.device.address
+      ) {
         done()
         return
       }

src/views/realm/device/Device.vue

@@ -39,9 +39,25 @@
           maxlength="17"
           clearable
         />
+        <span class="c-grid-form__label required">经度：</span>
+        <div class="l-flex--row c-grid-form__option">
+          <el-input
+            v-model.trim="currObj.longitude"
+            class="l-flex__fill c-sibling-item"
+            placeholder="-180 ~ +180"
+            maxlength="13"
+          />
+          <span class="c-sibling-item far c-grid-form__label required">纬度：</span>
+          <el-input
+            v-model.trim="currObj.latitude"
+            class="l-flex__fill c-sibling-item"
+            placeholder="-90 ~ +90"
+            maxlength="12"
+          />
+        </div>
         <span class="c-grid-form__label required">地址：</span>
         <el-input
-          v-model="currObj.address"
+          v-model.trim="currObj.address"
           type="textarea"
           maxlength="100"
           :rows="3"
@@ -67,7 +83,11 @@ import {
   deactivateDevice,
   getProducts
 } from '@/api/device'
-import { validMAC } from '@/utils/validate'
+import {
+  validMAC,
+  validLongitude,
+  validLatitude
+} from '@/utils/validate'
 import { bind as bindDevice } from '@/api/external'
 
 export default {
@@ -139,10 +159,10 @@ export default {
                   : '未激活'
               }
           }, on: this.onTagClick },
-          { type: 'invoke', width: 240, render: [
-            { label: '绑定设备', render ({ empty }) { return !empty }, on: this.onBindDevice },
+          { type: 'invoke', width: 280, render: [
             { label: '查看', render ({ empty }) { return !empty }, on: this.onViewDevice },
             { label: '添加备份', render ({ isMaster }) { return isMaster }, on: this.onAddSubDevice },
+            { label: '绑定摄像头', render ({ empty }) { return !empty }, on: this.onBindDevice },
             { label: '删除', render ({ empty }) { return !empty }, on: this.onDelDevice }
           ] }
         ]
@@ -193,6 +213,8 @@ export default {
         productId: this.$master?.productId,
         serialNumber: '',
         mac: '',
+        longitude: '',
+        latitude: '',
         address: '',
         tenant: this.group.path
       }
@@ -257,6 +279,20 @@ export default {
         })
         return false
       }
+      if (!validLongitude(item.longitude)) {
+        this.$message({
+          type: 'warning',
+          message: '经度格式错误，-180 ~ +180'
+        })
+        return false
+      }
+      if (!validLatitude(item.latitude)) {
+        this.$message({
+          type: 'warning',
+          message: '纬度格式错误，-90 ~ +90'
+        })
+        return false
+      }
       return true
     },
     onViewDevice (item) {
@@ -339,12 +375,10 @@ export default {
       this.$refs.bindDeviceDialog.show()
     },
     onBindDeviceChoosen ({ value, done }) {
-      console.log(bindDevice)
       this.$confirm(
-        `确定绑定设备 ？`,
+        `绑定 ${[null, 'LED屏画面监测摄像头', '人流量监测摄像头'][value.cameraType]} ${value.name} ？`,
         { type: 'warning' }
       ).then(() => {
-        console.log(bindDevice)
         bindDevice(this.$device.id, value.deviceType, value.id).then(done)
       })
     }