App/app-govern
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

设备注册

Browse Source
This commit is contained in:
仲么了
2023-02-13 14:27:19 +08:00
parent 51f9add37c
commit 061ad5222d
9 changed files with 603 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
common/css/base.scss
View File

@@ -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;

248
pages/device/new.vue
View File

@@ -1,19 +1,97 @@
<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="请输入设备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>
</uni-forms-item>
</uni-forms>
</view>
<view class="new-btn" @click="register"> 发起注册 </view>
</template>
<template v-else>
<view class="content" v-for="(item, index) in formData" :key="index">
<uni-forms>
<uni-forms-item label="位置">
<view style="display:flex;">
<uni-easyinput :clearable="false" type="text" v-model="address" placeholder="请输入地址" />
<uni-icons type="location" color="#007aff" size="30" class="ml20" @click="chooseLocation"></uni-icons>
<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>
<view class="new-btn" @click="submit"> 提交 </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="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('提交成功')
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>

18
pages/mine/user.vue
View File

@@ -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('用户点击取消')
}
}
})
}
}
}

BIN
static/point.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

13
uni_modules/uni-drawer/changelog.md Normal file
View File

@@ -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目录规范

45
uni_modules/uni-drawer/components/uni-drawer/keypress.js Normal file
View File

@@ -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

183
uni_modules/uni-drawer/components/uni-drawer/uni-drawer.vue Normal file
View File

@@ -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>

87
uni_modules/uni-drawer/package.json Normal file
View File

@@ -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"
}
}
}
}
}

10
uni_modules/uni-drawer/readme.md Normal file
View File

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