页面切图

This commit is contained in:
仲么了
2023-02-22 08:43:52 +08:00
parent 5e69ab1da6
commit 95db305cee
6 changed files with 102 additions and 43 deletions

View File

@@ -6,8 +6,7 @@
<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>
<uni-icons type="camera" color="#007aff" size="26" class="ml20" @click="scanCode"></uni-icons>
</view>
</uni-forms-item>
</uni-forms>
@@ -18,8 +17,15 @@
</template>
<template v-else>
<view class="content" v-for="(item, index) in formData" :key="index">
<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="型号">
<uni-data-select v-model="formData.type" :localdata="typeRange"
@change="typeChange(item)"></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"
@@ -33,11 +39,18 @@
<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>
<uni-icons type="image" color="#007aff" size="26" class="ml20" @click="chooseGplot"></uni-icons>
</view>
</uni-forms-item>
<uni-forms-item label="监测点" v-if="pointList.length">
<view class="point-item" v-for="(item2, index2) in pointList" :key="index2"
@click="editPoint(item2, 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-item label="监测点" v-if="pointList.length">
<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"
@@ -45,20 +58,19 @@
<uni-icons type="compose" color="#007aff" size="26" class="ml20"
@click="editPoint(index)"></uni-icons>
</view>
</uni-forms-item>
</uni-forms-item> -->
</uni-forms>
</view>
<view class="btn-wrap">
<view class="btn-wrap-item" @click="add"> 添加监测点 </view>
<!-- <view class="btn-wrap-item" @click="add"> 添加监测点 </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" />
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>
@@ -106,18 +118,57 @@ export default {
type: 1,
formData: {
address: '',
type: '',
project: '',
},
projectRange: [
{ value: 1, text: "监测", point: 1 },
{ value: 2, text: "治理", point: 2 },
{ value: 3, text: "用能", point: 1 },
],
// typeRange: [
// { 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: '',
pointList: [],
activeGplot: 1,
pointList: [{
name: '',
x: 170,
y: 100,
}, {
name: '',
x: 170,
y: 100,
}],
activeGplot: 0,
editIndex: -1,
}
},
methods: {
projectChange (e) {
},
scanCode () {
uni.scanCode({
success: function (res) {
@@ -185,11 +236,11 @@ export default {
deletePoint (index) {
this.pointList.splice(index, 1)
},
editPoint (index) {
editPoint (item, index) {
this.editIndex = index
this.point.x = this.pointList[index].x
this.point.y = this.pointList[index].y
this.pointName = this.pointList[index].pointName
this.point.x = item.x
this.point.y = item.y
this.pointName = item.pointName
this.$refs.point.open()
},
dragPoint (e) {
@@ -208,7 +259,7 @@ export default {
</script>
<style lang='scss'>
.new {
padding: 34rpx;
padding: 34rpx;
.new-btn {
display: flex;
@@ -230,7 +281,7 @@ export default {
}
margin-bottom: 20rpx;
padding: 34rpx;
padding: 34rpx;
background: $uni-theme-white;
border-radius: 12rpx;
}