网关切图

common/css/base.scss

@@ -36,11 +36,13 @@ page {
         padding-left: #{$i}rpx;
     }
 }
+
 .center {
     display: flex;
     align-items: center;
     justify-content: center;
 }
+
 .hide-txt {
     overflow-x: hidden;
     white-space: nowrap;
@@ -109,6 +111,7 @@ page {
             min-height: 100rpx;
             background: $uni-theme-white;
         }
+
         .item-title {
             background: unset;
         }
@@ -155,3 +158,26 @@ page {
         }
     }
 }
+
+.btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    background: $uni-theme-blue;
+    color: #fff;
+    height: 80rpx;
+    border-radius: 12rpx;
+}
+
+.btn-small {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 40rpx;
+    background: $uni-theme-blue;
+    color: #fff;
+    height: 60rpx;
+    font-size: 24rpx;
+    border-radius: 12rpx;
+}

pages/device/new.vue

@@ -36,7 +36,7 @@
                         </view>
                     </uni-forms-item>
                     <uni-forms-item label="监测点" v-if="pointList.length">
-                        <view style="display:flex;" class="center" v-for="(item, index) in pointList" :key="index">
+                        <view class="point-item  center" v-for="(item, index) in pointList" :key="index">
                             <view style="flex:1" class="center">{{ item.pointName }}</view>
                             <uni-icons type="trash" color="#007aff" size="26" class="ml20"
                                 @click="deletePoint(index)"></uni-icons>
@@ -101,7 +101,7 @@ export default {
         return {
             loading: false,
             code: '',
-            type: 2,
+            type: 1,
             formData: {
                 address: '',
             },
@@ -307,4 +307,17 @@ export default {
 /deep/ .uni-drawer__content {
     width: 100vw !important;
 }
+
+.point-item {
+    height: 72rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-top: 2rpx solid #e5e5e5;
+    border-color: rgb(229, 229, 229);
+}
+
+.point-item:first-of-type {
+    border-top: none;
+}
 </style>

pages/gateway/list.vue

@@ -23,16 +23,16 @@ export default {
     },
     methods: {
         newDevice () {
-            uni.scanCode({
+            // uni.scanCode({
-                success: function (res) {
+            //     success: function (res) {
-                    console.log('条码类型：' + res.scanType);
+            //         console.log('条码类型：' + res.scanType);
-                    console.log('条码内容：' + res.result);
+            //         console.log('条码内容：' + res.result);
+
+            //     }
+            // });
             uni.navigateTo({
                 url: '/pages/gateway/newDevice'
             })
-                }
-            });
-
         },
     }
 }
@@ -56,5 +56,4 @@ export default {
         }
     }
 }
-
 </style>

pages/gateway/new.vue

@@ -1,10 +1,59 @@
 <template>
     <view class='new'>
+        <template v-if="type == 1">
+            <view class="content">
+                <uni-forms>
+                    <uni-forms-item label="设备DID">
                         <view style="display:flex">
-            <uni-easyinput type="number" v-model="code" placeholder="请输入设备NDID" />
+                            <uni-easyinput type="number" v-model="code" placeholder="请输入设备DID" />
-            <uni-icons type="camera" color="#007aff" size="30" class="ml20" @click="scanCode"></uni-icons>
+                            <uni-icons type="camera" color="#007aff" size="26" class="ml20"
+                                @click="scanCode"></uni-icons>
                         </view>
-        <view class="new-btn" @click="submit"> 提交 </view>
+                    </uni-forms-item>
+                </uni-forms>
+            </view>
+            <view class="btn-wrap">
+                <view class="btn-wrap-item" @click="register"> 发起注册 </view>
+            </view>
+        </template>
+        <template v-else>
+            <view class="content">
+                <uni-forms>
+                    <uni-forms-item label="位置">
+                        <view style="display:flex;">
+                            <uni-easyinput :clearable="false" type="textarea" autoHeight v-model="formData.address"
+                                placeholder="请输入位置信息" />
+                            <uni-icons type="location" color="#007aff" size="26" class="ml20"
+                                @click="chooseLocation"></uni-icons>
+                        </view>
+                    </uni-forms-item>
+                    <uni-forms-item label="拓扑图">
+                        <view style="display:flex;">
+                            <view style="flex:1">
+                                <image class="gplot" src="/static/test2.pic.jpg" mode="aspectFill" />
+                            </view>
+                            <uni-icons type="image" color="#007aff" size="26" class="ml20"
+                                @click="chooseGplot"></uni-icons>
+                        </view>
+                    </uni-forms-item>
+                </uni-forms>
+            </view>
+            <view class="btn-wrap">
+                <view class="btn-wrap-item" @click="submit"> 提交 </view>
+            </view>
+        </template>
+        <uni-drawer ref="gplot" mode="right" :mask-click="false">
+            <scroll-view style="height: 100%;" scroll-y="true">
+                <view class="content">
+                    <image class="gplot gplot-box" mode="aspectFill" :class="{ 'gplot-active': key == activeGplot }"
+                        src="/static/test2.pic.jpg" @click="activeGplot = key" v-for="(item, key) in 3" :key="key" />
+                    <view class="btn-wrap">
+                        <view class="btn-wrap-item" @click="closeDrawer"> 取消 </view>
+                        <view class="btn-wrap-item ml20" @click="closeDrawer"> 确定 </view>
+                    </view>
+                </view>
+            </scroll-view>
+        </uni-drawer>
     </view>
 </template>
 <script>
@@ -17,9 +66,17 @@ export default {
             formData: {
                 address: '',
             },
+            activeGplot: 1,
+
         }
     },
     methods: {
+        chooseGplot () {
+            this.$refs.gplot.open()
+        },
+        closeDrawer () {
+            this.$refs.gplot.close()
+        },
         scanCode () {
             uni.scanCode({
                 success: function (res) {
@@ -44,14 +101,16 @@ export default {
         },
         submit () {
             this.$util.toast('提交成功')
+            setTimeout(() => {
                 uni.navigateBack({ delta: 1 })
+            }, 1500);
         },
     }
 }
 </script>
 <style lang='scss'>
 .new {
-    padding: 100rpx 100rpx 0;
+    padding: 34rpx;
 
     .new-btn {
         display: flex;
@@ -64,5 +123,92 @@ export default {
         height: 80rpx;
         border-radius: 12rpx;
     }
+
+    .content {
+        .content-des {
+            font-size: 28rpx;
+            color: #666;
+            margin-bottom: 20rpx;
+        }
+
+        margin-bottom: 20rpx;
+        padding: 34rpx;
+        background: $uni-theme-white;
+        border-radius: 12rpx;
+    }
+
+    .gplot {
+        position: relative;
+        width: 100%;
+        height: 188rpx;
+    }
+
+    .gplot-box {
+        height: 280rpx;
+        margin: 0 auto;
+    }
+
+    .gplot-active::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        border: 8rpx solid $uni-theme-blue;
+        // background: rgba(3, 3, 3, .5);
+    }
+
+    .btn-wrap {
+        margin-top: 40rpx;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .btn-wrap-item {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex: 1;
+            background: $uni-theme-blue;
+            color: #fff;
+            height: 80rpx;
+            border-radius: 12rpx;
+        }
+    }
+}
+
+.map-pin-box {
+    position: relative;
+    width: 375px;
+    margin: 0 auto;
+
+    .map-pin-box-area {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+    }
+
+    .point {
+        height: 100rpx;
+        width: 100rpx;
+
+        image {
+            width: 100%;
+            height: 100%;
+        }
+    }
+}
+
+
+/deep/ .uni-forms-item:last-of-type {
+    margin-bottom: 0;
+}
+
+/deep/ .uni-drawer__content {
+    width: 100vw !important;
 }
 </style>

pages/gateway/newDevice.vue

@@ -2,7 +2,7 @@
     <Cn-page :loading='loading'>
         <view slot='body'>
             <view class='index'>
-                <view class="content" v-for="(item, index) in formData" :key="index">
+                <view class="content" v-for="(item, index) in deviceList" :key="index">
                     <uni-forms :label-width="80">
                         <uni-forms-item label="类型">
                             <uni-data-select v-model="item.type" :localdata="range"></uni-data-select>
@@ -10,12 +10,73 @@
                         <uni-forms-item label="MAC地址">
                             <uni-easyinput type="text" v-model="item.address" placeholder="请输入设备MAC地址" />
                         </uni-forms-item>
+                        <uni-forms-item label="拓扑图">
+                            <view style="display:flex;">
+                                <view style="flex:1">
+                                    <image class="gplot" src="/static/test2.pic.jpg" mode="aspectFill" />
+                                </view>
+                                <uni-icons type="image" color="#007aff" size="26" class="ml20"
+                                    @click="chooseGplot(item)"></uni-icons>
+                            </view>
+                        </uni-forms-item>
+                        <uni-forms-item label="监测点">
+                            <view class="point-item" v-for="(item2, index2) in item.pointList" :key="index2">
+                                <view style="flex:1">{{ item2.pointName }}</view>
+                                <uni-icons type="trash" color="#007aff" size="26" class="ml20"
+                                    @click="deletePoint(item, index2)"></uni-icons>
+                                <uni-icons type="compose" color="#007aff" size="26" class="ml20"
+                                    @click="editPoint(item, index2)"></uni-icons>
+                            </view>
+                            <view class="add-point" @click="addNewPoint(item)">
+                                <uni-icons type="plusempty" color="#999" size="20" class="ml20"></uni-icons>
+                            </view>
+                        </uni-forms-item>
                     </uni-forms>
                 </view>
                 <view class="btn-wrap">
-                    <view class="btn-wrap-item" @click="add"> 添加 </view>
+                    <view class="btn-wrap-item" @click="addDevice"> 添加 </view>
                     <view class="btn-wrap-item ml20" @click="submit"> 提交 </view>
                 </view>
+                <uni-drawer ref="gplot" mode="right" :mask-click="false">
+                    <scroll-view style="height: 100%;" scroll-y="true">
+                        <view class="content">
+                            <image class="gplot gplot-box" mode="aspectFill"
+                                :class="{ 'gplot-active': key == activeGplot }" src="/static/test2.pic.jpg"
+                                @click="activeGplot = key" v-for="(item, key) in 3" :key="key" />
+                            <view class="btn-wrap">
+                                <view class="btn-wrap-item" @click="closeDrawer"> 取消 </view>
+                                <view class="btn-wrap-item ml20" @click="confirmGplot"> 确定 </view>
+                            </view>
+                        </view>
+                    </scroll-view>
+                </uni-drawer>
+                <uni-drawer ref="point" mode="right" :mask-click="false">
+                    <scroll-view style="height: 100%;" scroll-y="true">
+                        <view style="background:#fff">
+                            <view class="map-pin-box">
+                                <image class="gplot" mode="widthFix" src="/static/test2.pic.jpg" />
+                                <movable-area class="map-pin-box-area">
+                                    <movable-view :x="point.x" :y="point.y" direction="all" @change="dragPoint">
+                                        <view class="point center">
+                                            <image src="/static/point.png" mode="scaleToFill" />
+                                            <!-- <uni-icons type="map-pin" color="#007aff" size="26" class="ml20"></uni-icons> -->
+                                        </view>
+                                    </movable-view>
+                                </movable-area>
+                            </view>
+                        </view>
+                        <view class="content">
+                            <view class="content-des">请拖动图中的蓝色定位图标选择监测点位置(左上角)</view>
+                            <uni-forms>
+                                <uni-easyinput type="text" v-model="pointName" placeholder="请输入设监测点名称" />
+                            </uni-forms>
+                            <view class="btn-wrap">
+                                <view class="btn-wrap-item" @click="closeDrawer"> 取消 </view>
+                                <view class="btn-wrap-item ml20" @click="savePoint"> 确定 </view>
+                            </view>
+                        </view>
+                    </scroll-view>
+                </uni-drawer>
             </view>
         </view>
     </Cn-page>
@@ -25,29 +86,128 @@ export default {
     data () {
         return {
             loading: false,
-            formData: [
+            deviceList: [
                 {
                     type: '',
                     address: '',
+                    pointList: [],
+                    gplot: 1,
                 }
             ],
             range: [
                 { value: 0, text: "DVR" },
                 { value: 1, text: "APF" },
             ],
-
+            point: {
+                x: 170,
+                y: 100,
+            },
+            pointName: '',
+            activeGplot: 1,
+            nowDevice: {},
+            nowDeviceEditIndex: -1,
         }
     },
     methods: {
-        add () {
+        addDevice () {
-            this.formData.push({
+            console.log(this.formData);
+            this.deviceList.push({
                 type: '',
                 address: '',
+                pointList: [],
+                gplot: 1,
             })
         },
+        chooseGplot (item) {
+            this.activeGplot = item.gplot
+            this.nowDevice = item
+            this.$refs.gplot.open()
+        },
+        confirmGplot () {
+            this.nowDevice.gplot = this.activeGplot
+            this.$refs.gplot.close()
+        },
+        closeDrawer () {
+            this.pointName = ''
+            this.point = {
+                x: 170,
+                y: 100,
+            }
+            this.$refs.gplot.close()
+            this.$refs.point.close()
+        },
+        // 添加新的监测点
+        addNewPoint (item) {
+            this.nowDevice = item
+            this.$refs.point.open()
+        },
+        // 保存监测点
+        savePoint () {
+            if (!this.pointName) {
+                this.$util.toast('请输入监测点名称')
+                return
+            }
+            if (this.nowDeviceEditIndex > -1) {
+                let arr = this.nowDevice.pointList.filter((item, index) => {
+                    if (index == this.nowDeviceEditIndex) {
+                        return false
+                    }
+                    return item.pointName == this.pointName
+                })
+                if (arr.length > 0) {
+                    this.$util.toast('监测点名称已存在')
+                    return
+                }
+                this.nowDevice.pointList[this.nowDeviceEditIndex] = {
+                    x: this.point.x,
+                    y: this.point.y,
+                    pointName: this.pointName,
+                }
+                this.nowDeviceEditIndex = -1
+            } else {
+                let arr = this.nowDevice.pointList.filter((item, index) => {
+                    if (index == this.nowDeviceEditIndex) {
+                        return false
+                    }
+                    return item.pointName == this.pointName
+                })
+                if (arr.length > 0) {
+                    this.$util.toast('监测点名称已存在')
+                    return
+                }
+                this.nowDevice.pointList.push({
+                    x: this.point.x,
+                    y: this.point.y,
+                    pointName: this.pointName,
+                })
+            }
+            console.log(this.pointList);
+            this.closeDrawer()
+        },
+        // 删除一个监测点
+        deletePoint (item, index) {
+            console.log(item, index);
+            item.pointList.splice(index, 1)
+        },
+        // 编辑监测点
+        editPoint (item, index) {
+            this.nowDeviceEditIndex = index
+            this.nowDevice = item
+            this.point.x = item.pointList[index].x
+            this.point.y = item.pointList[index].y
+            this.pointName = item.pointList[index].pointName
+            this.$refs.point.open()
+        },
+        dragPoint (e) {
+            console.log(e)
+            this.point.x = e.detail.x
+            this.point.y = e.detail.y
+        },
         submit () {
-            console.log(this.formData)
+            this.$util.toast('提交成功')
-            // uni.navigateBack({ delta: 1 })
+            setTimeout(() => {
+                uni.navigateBack({ delta: 1 })
+            }, 1500);
         },
     }
 }
@@ -85,4 +245,133 @@ export default {
 /deep/ .uni-forms-item:last-of-type {
     margin-bottom: 0;
 }
+
+.index {
+    padding: 34rpx;
+
+    .new-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 80rpx auto 0;
+        width: 320rpx;
+        background: $uni-theme-blue;
+        color: #fff;
+        height: 80rpx;
+        border-radius: 12rpx;
+    }
+
+    .content {
+        .content-des {
+            font-size: 28rpx;
+            color: #666;
+            margin-bottom: 20rpx;
+        }
+
+        margin-bottom: 20rpx;
+        padding: 34rpx;
+        background: $uni-theme-white;
+        border-radius: 12rpx;
+    }
+
+    .gplot {
+        position: relative;
+        width: 100%;
+        height: 188rpx;
+    }
+
+    .gplot-box {
+        height: 280rpx;
+        margin: 0 auto;
+    }
+
+    .gplot-active::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        border: 8rpx solid $uni-theme-blue;
+        // background: rgba(3, 3, 3, .5);
+    }
+
+    .btn-wrap {
+        margin-top: 40rpx;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .btn-wrap-item {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex: 1;
+            background: $uni-theme-blue;
+            color: #fff;
+            height: 80rpx;
+            border-radius: 12rpx;
+        }
+    }
+}
+
+.map-pin-box {
+    position: relative;
+    width: 375px;
+    margin: 0 auto;
+
+    .map-pin-box-area {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+    }
+
+    .point {
+        height: 100rpx;
+        width: 100rpx;
+
+        image {
+            width: 100%;
+            height: 100%;
+        }
+    }
+}
+
+
+/deep/ .uni-forms-item:last-of-type {
+    margin-bottom: 0;
+}
+
+/deep/ .uni-drawer__content {
+    width: 100vw !important;
+}
+
+.add-point {
+    height: 72rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2rpx solid #ccc;
+    border-radius: 12rpx;
+    font-size: 28rpx;
+    border-color: rgb(229, 229, 229);
+    background-color: rgb(255, 255, 255);
+    color: #999;
+}
+
+.point-item {
+    height: 72rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-top: 2rpx solid #e5e5e5;
+    border-color: rgb(229, 229, 229);
+}
+
+.point-item:first-of-type {
+    border-top: none;
+}
 </style>