From b9b627eaa8d048e5491903bc78f4a3c26cce81e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BB=B2=E4=B9=88=E4=BA=86?= Date: Tue, 14 Feb 2023 13:34:00 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BD=91=E5=85=B3=E5=88=87=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- common/css/base.scss | 32 +++- pages/device/new.vue | 17 +- pages/gateway/list.vue | 19 ++- pages/gateway/new.vue | 160 ++++++++++++++++++- pages/gateway/newDevice.vue | 305 +++++++++++++++++++++++++++++++++++- 5 files changed, 503 insertions(+), 30 deletions(-) diff --git a/common/css/base.scss b/common/css/base.scss index 42665a2..f5091bc 100644 --- a/common/css/base.scss +++ b/common/css/base.scss @@ -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; } \ No newline at end of file diff --git a/pages/device/new.vue b/pages/device/new.vue index a535f3d..36e8223 100644 --- a/pages/device/new.vue +++ b/pages/device/new.vue @@ -36,7 +36,7 @@ - + {{ item.pointName }} @@ -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; +} \ No newline at end of file diff --git a/pages/gateway/list.vue b/pages/gateway/list.vue index c5c0bb5..4604179 100644 --- a/pages/gateway/list.vue +++ b/pages/gateway/list.vue @@ -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 { } } } - \ No newline at end of file diff --git a/pages/gateway/new.vue b/pages/gateway/new.vue index b72a5d2..f3b0760 100644 --- a/pages/gateway/new.vue +++ b/pages/gateway/new.vue @@ -1,10 +1,59 @@ \ No newline at end of file diff --git a/pages/gateway/newDevice.vue b/pages/gateway/newDevice.vue index f9ec246..92ab985 100644 --- a/pages/gateway/newDevice.vue +++ b/pages/gateway/newDevice.vue @@ -2,7 +2,7 @@ - + @@ -10,12 +10,73 @@ + + + + + + + + + + + {{ item2.pointName }} + + + + + + + - 添加 + 添加 提交 + + + + + + 取消 + 确定 + + + + + + + + + + + + + + + + + + + + + 请拖动图中的蓝色定位图标选择监测点位置(左上角) + + + + + 取消 + 确定 + + + + @@ -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; +} \ No newline at end of file