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

32
common/css/base.scss
View File

@@ -36,11 +36,13 @@ page {
padding-left: #{$i}rpx;
}
}
.center{
.center {
display: flex;
align-items: center;
justify-content: center;
}
.hide-txt {
overflow-x: hidden;
white-space: nowrap;
@@ -109,7 +111,8 @@ page {
min-height: 100rpx;
background: $uni-theme-white;
}
.item-title{
.item-title {
background: unset;
}
}
@@ -123,7 +126,7 @@ page {
}
.grid-card-content-6 {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
}
@@ -154,4 +157,27 @@ 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;
}

17
pages/device/new.vue
View File

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

19
pages/gateway/list.vue
View File

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

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>

305
pages/gateway/newDevice.vue
View File

@@ -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 () {
this.formData.push({
addDevice () {
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)
// uni.navigateBack({ delta: 1 })
this.$util.toast('提交成功')
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>