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-14 13:34:00 +08:00
parent 061ad5222d
commit b9b627eaa8
5 changed files with 503 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
pages/gateway/new.vue
View File

@@ -1,10 +1,59 @@
<template>
<view class='new'>
<view style="display:flex">
<uni-easyinput type="number" v-model="code" placeholder="请输入设备NDID" />
<uni-icons type="camera" color="#007aff" size="30" class="ml20" @click="scanCode"></uni-icons>
</view>
<view class="new-btn" @click="submit"> 提交 </view>
<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="26" class="ml20"
@click="scanCode"></uni-icons>
</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('提交成功')
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;
@@ -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>