设备注册

common/css/base.scss

@@ -36,7 +36,11 @@ page {
         padding-left: #{$i}rpx;
     }
 }
-
+.center{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
 .hide-txt {
     overflow-x: hidden;
     white-space: nowrap;

pages/device/new.vue

@@ -1,19 +1,97 @@
 <template>
     <view class='new'>
         <template v-if="type == 1">
-            <view style="display:flex">
+            <view class="content">
-                <uni-easyinput type="number" v-model="code" placeholder="请输入设备DID" />
+                <uni-forms>
-
+                    <uni-forms-item label="设备DID">
-                <uni-icons type="camera" color="#007aff" size="30" class="ml20" @click="scanCode"></uni-icons>
+                        <view style="display:flex">
+                            <uni-easyinput type="number" v-model="code" placeholder="请输入设备DID" />
+                            <uni-icons type="camera" color="#007aff" size="26" class="ml20"
+                                @click="scanCode"></uni-icons>
+                        </view>
+                    </uni-forms-item>
+                </uni-forms>
             </view>
             <view class="new-btn" @click="register"> 发起注册 </view>
         </template>
         <template v-else>
-            <view style="display:flex;">
+
-                <uni-easyinput :clearable="false" type="text" v-model="address" placeholder="请输入地址" />
+            <view class="content" v-for="(item, index) in formData" :key="index">
-                <uni-icons type="location" color="#007aff" size="30" class="ml20" @click="chooseLocation"></uni-icons>
+                <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-item label="监测点" v-if="pointList.length">
+                        <view style="display:flex;" class="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>
+                            <uni-icons type="compose" color="#007aff" size="26" class="ml20"
+                                @click="editPoint(index)"></uni-icons>
+                        </view>
+                    </uni-forms-item>
+                </uni-forms>
+
             </view>
-            <view class="new-btn" @click="submit"> 提交 </view>
+            <view class="btn-wrap">
+                <view class="btn-wrap-item" @click="add"> 添加监测点 </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="closeDrawer"> 确定 </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="addPoint"> 确定 </view>
+                        </view>
+                    </view>
+                </scroll-view>
+            </uni-drawer>
         </template>
     </view>
 </template>
@@ -23,10 +101,18 @@ export default {
         return {
             loading: false,
             code: '',
-            type: 1,
+            type: 2,
             formData: {
                 address: '',
             },
+            point: {
+                x: 170,
+                y: 100,
+            },
+            pointName: '',
+            pointList: [],
+            activeGplot: 1,
+            editIndex: -1,
         }
     },
     methods: {
@@ -52,16 +138,75 @@ export default {
                 }
             });
         },
-        submit(){
+        chooseGplot () {
+            this.$refs.gplot.open()
+        },
+        closeDrawer () {
+            this.pointName = ''
+            this.point = {
+                x: 170,
+                y: 100,
+            }
+            this.$refs.gplot.close()
+            this.$refs.point.close()
+        },
+        add () {
+            this.$refs.point.open()
+        },
+        addPoint () {
+            if (!this.pointName) {
+                this.$util.toast('请输入监测点名称')
+                return
+            }
+            if (this.editIndex > -1) {
+                this.pointList[this.editIndex] = {
+                    x: this.point.x,
+                    y: this.point.y,
+                    pointName: this.pointName,
+                }
+                this.editIndex = -1
+            } else {
+                let arr = this.pointList.filter(item => item.pointName == this.pointName)
+                if (arr.length > 0) {
+                    this.$util.toast('监测点名称已存在')
+                    return
+                }
+                this.pointList.push({
+                    x: this.point.x,
+                    y: this.point.y,
+                    pointName: this.pointName,
+                })
+            }
+            console.log(this.pointList);
+            this.closeDrawer()
+        },
+        deletePoint (index) {
+            this.pointList.splice(index, 1)
+        },
+        editPoint (index) {
+            this.editIndex = index
+            this.point.x = this.pointList[index].x
+            this.point.y = this.pointList[index].y
+            this.pointName = this.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 () {
             this.$util.toast('提交成功')
-            uni.navigateBack({ delta: 1 })
+            setTimeout(() => {
+                uni.navigateBack({ delta: 1 })
+            }, 1500);
         },
     }
 }
 </script>
 <style lang='scss'>
 .new {
-    padding: 100rpx 100rpx 0;
+    padding: 34rpx;
 
     .new-btn {
         display: flex;
@@ -74,5 +219,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/mine/user.vue

@@ -5,13 +5,13 @@
                 <uni-list>
                     <uni-list-item title="张三" note="2023-02-10 14:55" thumb="/static/head.png" thumb-size="lg">
                         <template v-slot:footer>
-                            <view class="footer-btn mt20" style="background:#e47470">移除</view>
+                            <view class="footer-btn mt20" style="background:#e47470" @click="del">移除</view>
                             <view class="footer-btn mt20 ml10" @click="jump">查看</view>
                         </template>
                     </uni-list-item>
                     <uni-list-item title="李四" note="2023-02-10 14:55" thumb="/static/head.png" thumb-size="lg">
                         <template v-slot:footer>
-                            <view class="footer-btn mt20" style="background:#e47470">移除</view>
+                            <view class="footer-btn mt20" style="background:#e47470" @click="del">移除</view>
                             <view class="footer-btn mt20 ml10" @click="jump">查看</view>
                         </template>
                     </uni-list-item>
@@ -33,6 +33,20 @@ export default {
             uni.navigateTo({
                 url: '/pages/mine/userDetail'
             })
+        },
+        del () {
+            console.log('del');
+            uni.showModal({
+                title: '提示',
+                content: '确定要移除该成员吗？',
+                success: function (res) {
+                    if (res.confirm) {
+                        console.log('用户点击确定')
+                    } else if (res.cancel) {
+                        console.log('用户点击取消')
+                    }
+                }
+            })
         }
     }
 }

uni_modules/uni-drawer/changelog.md

@@ -0,0 +1,13 @@
+## 1.2.1（2021-11-22）
+- 修复 vue3中个别scss变量无法找到的问题
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-drawer](https://uniapp.dcloud.io/component/uniui/uni-drawer)
+## 1.1.1（2021-07-30）
+- 优化 vue3下事件警告的问题
+## 1.1.0（2021-07-13）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.7（2021-05-12）
+- 新增 组件示例地址
+## 1.0.6（2021-02-04）
+- 调整为uni_modules目录规范

uni_modules/uni-drawer/components/uni-drawer/keypress.js

@@ -0,0 +1,45 @@
+// #ifdef H5
+export default {
+  name: 'Keypress',
+  props: {
+    disable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted () {
+    const keyNames = {
+      esc: ['Esc', 'Escape'],
+      tab: 'Tab',
+      enter: 'Enter',
+      space: [' ', 'Spacebar'],
+      up: ['Up', 'ArrowUp'],
+      left: ['Left', 'ArrowLeft'],
+      right: ['Right', 'ArrowRight'],
+      down: ['Down', 'ArrowDown'],
+      delete: ['Backspace', 'Delete', 'Del']
+    }
+    const listener = ($event) => {
+      if (this.disable) {
+        return
+      }
+      const keyName = Object.keys(keyNames).find(key => {
+        const keyName = $event.key
+        const value = keyNames[key]
+        return value === keyName || (Array.isArray(value) && value.includes(keyName))
+      })
+      if (keyName) {
+        // 避免和其他按键事件冲突
+        setTimeout(() => {
+          this.$emit(keyName, {})
+        }, 0)
+      }
+    }
+    document.addEventListener('keyup', listener)
+    // this.$once('hook:beforeDestroy', () => {
+    //   document.removeEventListener('keyup', listener)
+    // })
+  },
+	render: () => {}
+}
+// #endif

uni_modules/uni-drawer/components/uni-drawer/uni-drawer.vue

@@ -0,0 +1,183 @@
+<template>
+	<view v-if="visibleSync" :class="{ 'uni-drawer--visible': showDrawer }" class="uni-drawer" @touchmove.stop.prevent="clear">
+		<view class="uni-drawer__mask" :class="{ 'uni-drawer__mask--visible': showDrawer && mask }" @tap="close('mask')" />
+		<view class="uni-drawer__content" :class="{'uni-drawer--right': rightMode,'uni-drawer--left': !rightMode, 'uni-drawer__content--visible': showDrawer}" :style="{width:drawerWidth+'px'}">
+			<slot />
+		</view>
+		<!-- #ifdef H5 -->
+		<keypress @esc="close('mask')" />
+		<!-- #endif -->
+	</view>
+</template>
+
+<script>
+	// #ifdef H5
+	import keypress from './keypress.js'
+	// #endif
+	/**
+	 * Drawer 抽屉
+	 * @description 抽屉侧滑菜单
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=26
+	 * @property {Boolean} mask = [true | false] 是否显示遮罩
+	 * @property {Boolean} maskClick = [true | false] 点击遮罩是否关闭
+	 * @property {Boolean} mode = [left | right] Drawer 滑出位置
+	 * 	@value left 从左侧滑出
+	 * 	@value right 从右侧侧滑出
+	 * @property {Number} width 抽屉的宽度 ，仅 vue 页面生效
+	 * @event {Function} close 组件关闭时触发事件
+	 */
+	export default {
+		name: 'UniDrawer',
+		components: {
+			// #ifdef H5
+			keypress
+			// #endif
+		},
+		emits:['change'],
+		props: {
+			/**
+			 * 显示模式（左、右），只在初始化生效
+			 */
+			mode: {
+				type: String,
+				default: ''
+			},
+			/**
+			 * 蒙层显示状态
+			 */
+			mask: {
+				type: Boolean,
+				default: true
+			},
+			/**
+			 * 遮罩是否可点击关闭
+			 */
+			maskClick:{
+				type: Boolean,
+				default: true
+			},
+			/**
+			 * 抽屉宽度
+			 */
+			width: {
+				type: Number,
+				default: 220
+			}
+		},
+		data() {
+			return {
+				visibleSync: false,
+				showDrawer: false,
+				rightMode: false,
+				watchTimer: null,
+				drawerWidth: 220
+			}
+		},
+		created() {
+			// #ifndef APP-NVUE
+			this.drawerWidth = this.width
+			// #endif
+			this.rightMode = this.mode === 'right'
+		},
+		methods: {
+			clear(){},
+			close(type) {
+				// fixed by mehaotian 抽屉尚未完全关闭或遮罩禁止点击时不触发以下逻辑
+				if((type === 'mask' && !this.maskClick) || !this.visibleSync) return
+				this._change('showDrawer', 'visibleSync', false)
+			},
+			open() {
+				// fixed by mehaotian 处理重复点击打开的事件
+				if(this.visibleSync) return
+				this._change('visibleSync', 'showDrawer', true)
+			},
+			_change(param1, param2, status) {
+				this[param1] = status
+				if (this.watchTimer) {
+					clearTimeout(this.watchTimer)
+				}
+				this.watchTimer = setTimeout(() => {
+					this[param2] = status
+					this.$emit('change',status)
+				}, status ? 50 : 300)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	$uni-mask: rgba($color: #000000, $alpha: 0.4) ;
+	// 抽屉宽度
+	$drawer-width: 220px;
+
+	.uni-drawer {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		overflow: hidden;
+		z-index: 999;
+	}
+
+	.uni-drawer__content {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		position: absolute;
+		top: 0;
+		width: $drawer-width;
+		bottom: 0;
+		background-color: $uni-bg-color;
+		transition: transform 0.3s ease;
+	}
+
+	.uni-drawer--left {
+		left: 0;
+		/* #ifdef APP-NVUE */
+		transform: translateX(-$drawer-width);
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		transform: translateX(-100%);
+		/* #endif */
+	}
+
+	.uni-drawer--right {
+		right: 0;
+		/* #ifdef APP-NVUE */
+		transform: translateX($drawer-width);
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		transform: translateX(100%);
+		/* #endif */
+	}
+
+	.uni-drawer__content--visible {
+		transform: translateX(0px);
+	}
+
+
+	.uni-drawer__mask {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		opacity: 0;
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		background-color: $uni-mask;
+		transition: opacity 0.3s;
+	}
+
+	.uni-drawer__mask--visible {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		opacity: 1;
+	}
+</style>

uni_modules/uni-drawer/package.json

@@ -0,0 +1,87 @@
+{
+  "id": "uni-drawer",
+  "displayName": "uni-drawer 抽屉",
+  "version": "1.2.1",
+  "description": "抽屉式导航，用于展示侧滑菜单，侧滑导航。",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "drawer",
+    "抽屉",
+    "侧滑导航"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}

uni_modules/uni-drawer/readme.md

@@ -0,0 +1,10 @@
+
+
+## Drawer 抽屉
+> **组件名：uni-drawer**
+> 代码块： `uDrawer`
+
+抽屉侧滑菜单。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-drawer)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839