修改测试问题
This commit is contained in:
guanj
@@ -1,219 +1,219 @@
|
||||
<template>
|
||||
<view class='new'>
|
||||
<template v-if="type == 1">
|
||||
<view class="content">
|
||||
<uni-forms>
|
||||
<uni-forms-item label="网关识别码">
|
||||
<view style="display:flex">
|
||||
<uni-easyinput type="number" v-model="code" placeholder="请输入网关识别码" />
|
||||
<!-- <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="项目">
|
||||
<uni-data-select v-model="formData.project" :localdata="projectRange"></uni-data-select>
|
||||
</uni-forms-item>
|
||||
<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.png" 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.png" @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>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
code: '',
|
||||
type: 1,
|
||||
formData: {
|
||||
address: '',
|
||||
project:""
|
||||
},
|
||||
projectRange: [
|
||||
{ value: 1, text: "监测", point: 1 },
|
||||
{ value: 2, text: "治理", point: 2 },
|
||||
{ value: 3, text: "用能", point: 1 },
|
||||
],
|
||||
activeGplot: 1,
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
chooseGplot () {
|
||||
this.$refs.gplot.open()
|
||||
},
|
||||
closeDrawer () {
|
||||
this.$refs.gplot.close()
|
||||
},
|
||||
scanCode () {
|
||||
uni.scanCode({
|
||||
success: function (res) {
|
||||
console.log('条码类型：' + res.scanType);
|
||||
console.log('条码内容：' + res.result);
|
||||
}
|
||||
});
|
||||
},
|
||||
register () {
|
||||
this.type = 2
|
||||
},
|
||||
// chooseLocation () {
|
||||
// uni.chooseLocation({
|
||||
// success: function (res) {
|
||||
// this.address = res.name
|
||||
// console.log('位置名称：' + res.name);
|
||||
// console.log('详细地址：' + res.address);
|
||||
// console.log('纬度：' + res.latitude);
|
||||
// console.log('经度：' + res.longitude);
|
||||
// }
|
||||
// });
|
||||
// },
|
||||
submit () {
|
||||
this.$util.toast('提交成功')
|
||||
setTimeout(() => {
|
||||
uni.navigateBack({ delta: 1 })
|
||||
}, 1500);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.new {
|
||||
padding: 34rpx;
|
||||
|
||||
.new-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 80rpx auto 0;
|
||||
width: 320rpx;
|
||||
background: $uni-theme-color;
|
||||
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-color;
|
||||
// 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-color;
|
||||
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-drawer__content {
|
||||
width: 100vw !important;
|
||||
}
|
||||
<template>
|
||||
<view class='new'>
|
||||
<template v-if="type == 1">
|
||||
<view class="content">
|
||||
<uni-forms>
|
||||
<uni-forms-item label="网关识别码">
|
||||
<view style="display:flex">
|
||||
<uni-easyinput type="number" v-model="code" placeholder="请输入网关识别码" />
|
||||
<!-- <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="项目">
|
||||
<uni-data-select v-model="formData.project" :localdata="projectRange"></uni-data-select>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="位置">
|
||||
<view style="display:flex;">
|
||||
<uni-easyinput :clearable="false" maxlength="250" 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.png" 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.png" @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>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
code: '',
|
||||
type: 1,
|
||||
formData: {
|
||||
address: '',
|
||||
project:""
|
||||
},
|
||||
projectRange: [
|
||||
{ value: 1, text: "监测", point: 1 },
|
||||
{ value: 2, text: "治理", point: 2 },
|
||||
{ value: 3, text: "用能", point: 1 },
|
||||
],
|
||||
activeGplot: 1,
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
chooseGplot () {
|
||||
this.$refs.gplot.open()
|
||||
},
|
||||
closeDrawer () {
|
||||
this.$refs.gplot.close()
|
||||
},
|
||||
scanCode () {
|
||||
uni.scanCode({
|
||||
success: function (res) {
|
||||
console.log('条码类型：' + res.scanType);
|
||||
console.log('条码内容：' + res.result);
|
||||
}
|
||||
});
|
||||
},
|
||||
register () {
|
||||
this.type = 2
|
||||
},
|
||||
// chooseLocation () {
|
||||
// uni.chooseLocation({
|
||||
// success: function (res) {
|
||||
// this.address = res.name
|
||||
// console.log('位置名称：' + res.name);
|
||||
// console.log('详细地址：' + res.address);
|
||||
// console.log('纬度：' + res.latitude);
|
||||
// console.log('经度：' + res.longitude);
|
||||
// }
|
||||
// });
|
||||
// },
|
||||
submit () {
|
||||
this.$util.toast('提交成功')
|
||||
setTimeout(() => {
|
||||
uni.navigateBack({ delta: 1 })
|
||||
}, 1500);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.new {
|
||||
padding: 34rpx;
|
||||
|
||||
.new-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 80rpx auto 0;
|
||||
width: 320rpx;
|
||||
background: $uni-theme-color;
|
||||
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-color;
|
||||
// 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-color;
|
||||
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-drawer__content {
|
||||
width: 100vw !important;
|
||||
}
|
||||
</style>
|
||||
@@ -1,403 +1,403 @@
|
||||
<template>
|
||||
<Cn-page :loading='loading'>
|
||||
<view slot='body'>
|
||||
<view class='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"
|
||||
@change="typeChange(item)"></uni-data-select>
|
||||
</uni-forms-item>
|
||||
<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.png" 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="监测点" v-if="item.pointList.length">
|
||||
<view class="point-item" v-for="(item2, index2) in item.pointList" :key="index2"
|
||||
@click="editPoint(item, index2)">
|
||||
<view style="flex:1" v-if="item2.pointName">{{ item2.pointName }}</view>
|
||||
<view style="flex:1;color:#999" v-else>请选择监测点</view>
|
||||
<uni-icons type="compose" color="#007aff" size="26" class="ml20"></uni-icons>
|
||||
</view>
|
||||
</uni-forms-item> -->
|
||||
</uni-forms>
|
||||
</view>
|
||||
<view class="btn-wrap">
|
||||
<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.png" @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.png" />
|
||||
<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>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
deviceList: [
|
||||
{
|
||||
type: '',
|
||||
address: '',
|
||||
pointList: [],
|
||||
gplot: 1,
|
||||
}
|
||||
],
|
||||
range: [
|
||||
{ value: 1, text: "POS-882AX", point: 1 },
|
||||
{ value: 2, text: "NPOS-681", point: 2 },
|
||||
{ value: 3, text: "NPOS-681", point: 1 },
|
||||
{ value: 4, text: "POV-500", point: 2 },
|
||||
{ value: 5, text: "PQV-300", point: 1 },
|
||||
{ value: 6, text: "NPOS-571W", point: 3 },
|
||||
{ value: 7, text: "NPQS-572W", point: 3 },
|
||||
{ value: 8, text: "POS-882B6", point: 2 },
|
||||
{ value: 9, text: "PQS-882B5", point: 1 },
|
||||
{ value: 10, text: "POS-882B4", point: 2 },
|
||||
{ value: 11, text: "PQS-882B2", point: 1 },
|
||||
{ value: 12, text: "POS-882A", point: 2 },
|
||||
{ value: 13, text: "POS-883A", point: 1 },
|
||||
{ value: 14, text: "NPOS-581", point: 2 },
|
||||
{ value: 15, text: "PQS-681", point: 1 },
|
||||
{ value: 16, text: "POS-8825", point: 3 },
|
||||
{ value: 17, text: "PQS-782", point: 1 },
|
||||
{ value: 18, text: "POS-880X", point: 3 },
|
||||
{ value: 19, text: "NPQS-580", point: 1 },
|
||||
{ value: 20, text: "NPOS-572", point: 2 },
|
||||
],
|
||||
point: {
|
||||
x: 170,
|
||||
y: 100,
|
||||
},
|
||||
pointName: '',
|
||||
activeGplot: 1,
|
||||
nowDevice: {},
|
||||
nowDeviceEditIndex: -1,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
typeChange (item) {
|
||||
console.log(item.type);
|
||||
setTimeout(() => {
|
||||
if (!item.type) return
|
||||
let rangeIndex = this.range.findIndex((v) => v.value == item.type)
|
||||
item.pointList = []
|
||||
for (let index = 0; index < this.range[rangeIndex].point; index++) {
|
||||
item.pointList.push({
|
||||
name: '',
|
||||
x: 170,
|
||||
y: 100,
|
||||
})
|
||||
}
|
||||
}, 100);
|
||||
},
|
||||
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 () {
|
||||
this.$util.toast('提交成功')
|
||||
setTimeout(() => {
|
||||
uni.navigateBack({ delta: 1 })
|
||||
}, 1500);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.index {
|
||||
padding: 20rpx;
|
||||
|
||||
.content {
|
||||
margin-bottom: 20rpx;
|
||||
padding: 34rpx;
|
||||
background: $uni-theme-white;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.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-color;
|
||||
color: #fff;
|
||||
height: 80rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.index {
|
||||
padding: 20rpx;
|
||||
|
||||
.new-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 80rpx auto 0;
|
||||
width: 320rpx;
|
||||
background: $uni-theme-color;
|
||||
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-color;
|
||||
// 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-color;
|
||||
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-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;
|
||||
}
|
||||
<template>
|
||||
<Cn-page :loading='loading'>
|
||||
<view slot='body'>
|
||||
<view class='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"
|
||||
@change="typeChange(item)"></uni-data-select>
|
||||
</uni-forms-item>
|
||||
<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.png" 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="监测点" v-if="item.pointList.length">
|
||||
<view class="point-item" v-for="(item2, index2) in item.pointList" :key="index2"
|
||||
@click="editPoint(item, index2)">
|
||||
<view style="flex:1" v-if="item2.pointName">{{ item2.pointName }}</view>
|
||||
<view style="flex:1;color:#999" v-else>请选择监测点</view>
|
||||
<uni-icons type="compose" color="#007aff" size="26" class="ml20"></uni-icons>
|
||||
</view>
|
||||
</uni-forms-item> -->
|
||||
</uni-forms>
|
||||
</view>
|
||||
<view class="btn-wrap">
|
||||
<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.png" @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.png" />
|
||||
<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" maxlength="24" 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>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
deviceList: [
|
||||
{
|
||||
type: '',
|
||||
address: '',
|
||||
pointList: [],
|
||||
gplot: 1,
|
||||
}
|
||||
],
|
||||
range: [
|
||||
{ value: 1, text: "POS-882AX", point: 1 },
|
||||
{ value: 2, text: "NPOS-681", point: 2 },
|
||||
{ value: 3, text: "NPOS-681", point: 1 },
|
||||
{ value: 4, text: "POV-500", point: 2 },
|
||||
{ value: 5, text: "PQV-300", point: 1 },
|
||||
{ value: 6, text: "NPOS-571W", point: 3 },
|
||||
{ value: 7, text: "NPQS-572W", point: 3 },
|
||||
{ value: 8, text: "POS-882B6", point: 2 },
|
||||
{ value: 9, text: "PQS-882B5", point: 1 },
|
||||
{ value: 10, text: "POS-882B4", point: 2 },
|
||||
{ value: 11, text: "PQS-882B2", point: 1 },
|
||||
{ value: 12, text: "POS-882A", point: 2 },
|
||||
{ value: 13, text: "POS-883A", point: 1 },
|
||||
{ value: 14, text: "NPOS-581", point: 2 },
|
||||
{ value: 15, text: "PQS-681", point: 1 },
|
||||
{ value: 16, text: "POS-8825", point: 3 },
|
||||
{ value: 17, text: "PQS-782", point: 1 },
|
||||
{ value: 18, text: "POS-880X", point: 3 },
|
||||
{ value: 19, text: "NPQS-580", point: 1 },
|
||||
{ value: 20, text: "NPOS-572", point: 2 },
|
||||
],
|
||||
point: {
|
||||
x: 170,
|
||||
y: 100,
|
||||
},
|
||||
pointName: '',
|
||||
activeGplot: 1,
|
||||
nowDevice: {},
|
||||
nowDeviceEditIndex: -1,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
typeChange (item) {
|
||||
console.log(item.type);
|
||||
setTimeout(() => {
|
||||
if (!item.type) return
|
||||
let rangeIndex = this.range.findIndex((v) => v.value == item.type)
|
||||
item.pointList = []
|
||||
for (let index = 0; index < this.range[rangeIndex].point; index++) {
|
||||
item.pointList.push({
|
||||
name: '',
|
||||
x: 170,
|
||||
y: 100,
|
||||
})
|
||||
}
|
||||
}, 100);
|
||||
},
|
||||
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 () {
|
||||
this.$util.toast('提交成功')
|
||||
setTimeout(() => {
|
||||
uni.navigateBack({ delta: 1 })
|
||||
}, 1500);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.index {
|
||||
padding: 20rpx;
|
||||
|
||||
.content {
|
||||
margin-bottom: 20rpx;
|
||||
padding: 34rpx;
|
||||
background: $uni-theme-white;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.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-color;
|
||||
color: #fff;
|
||||
height: 80rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.index {
|
||||
padding: 20rpx;
|
||||
|
||||
.new-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 80rpx auto 0;
|
||||
width: 320rpx;
|
||||
background: $uni-theme-color;
|
||||
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-color;
|
||||
// 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-color;
|
||||
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-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>
|
||||
Reference in New Issue
Block a user