页面切图

This commit is contained in:
仲么了
2023-02-20 14:19:28 +08:00
parent 7d28b3476a
commit 5e69ab1da6
50 changed files with 1136 additions and 213 deletions

View File

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