页面切图
This commit is contained in:
@@ -5,7 +5,8 @@
|
||||
<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>
|
||||
<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地址" />
|
||||
@@ -19,16 +20,12 @@
|
||||
@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>
|
||||
<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>
|
||||
@@ -40,9 +37,9 @@
|
||||
<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" />
|
||||
<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>
|
||||
@@ -95,8 +92,27 @@ export default {
|
||||
}
|
||||
],
|
||||
range: [
|
||||
{ value: 0, text: "DVR" },
|
||||
{ value: 1, text: "APF" },
|
||||
{ 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,
|
||||
@@ -109,6 +125,21 @@ export default {
|
||||
}
|
||||
},
|
||||
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({
|
||||
@@ -214,11 +245,11 @@ export default {
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.index {
|
||||
padding: 34rpx;
|
||||
padding: 20rpx;
|
||||
|
||||
.content {
|
||||
margin-bottom: 20rpx;
|
||||
padding: 34rpx;
|
||||
padding: 34rpx;
|
||||
background: $uni-theme-white;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
@@ -242,12 +273,10 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .uni-forms-item:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
.index {
|
||||
padding: 34rpx;
|
||||
padding: 20rpx;
|
||||
|
||||
.new-btn {
|
||||
display: flex;
|
||||
@@ -269,7 +298,7 @@ export default {
|
||||
}
|
||||
|
||||
margin-bottom: 20rpx;
|
||||
padding: 34rpx;
|
||||
padding: 34rpx;
|
||||
background: $uni-theme-white;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
@@ -341,9 +370,7 @@ export default {
|
||||
}
|
||||
|
||||
|
||||
/deep/ .uni-forms-item:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
/deep/ .uni-drawer__content {
|
||||
width: 100vw !important;
|
||||
|
||||
Reference in New Issue
Block a user