app-govern/pages/device/new.vue

<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="型号">
                        <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"
                                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-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"
                                @click="deletePoint(index)"></uni-icons>
                            <uni-icons type="compose" color="#007aff" size="26" class="ml20"
                                @click="editPoint(index)"></uni-icons>
                        </view>
                    </uni-forms-item> -->
                </uni-forms>

            </view>
            <view class="btn-wrap">
                <!-- <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.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>
            <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="addPoint"> 确定 </view>
                        </view>
                    </view>
                </scroll-view>
            </uni-drawer>
        </template>
    </view>
</template>
<script>
export default {
    data () {
        return {
            loading: false,
            code: '',
            type: 1,
            formData: {
                address: '',
                type: '',
                project: '',
            },
            projectRange: [
                { value: 1, text: "项目1", point: 1 },
                { value: 2, text: "项目2", point: 2 },
                { value: 3, text: "项目3", 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: [{
                name: '',
                x: 170,
                y: 100,
            }, {
                name: '',
                x: 170,
                y: 100,
            }],
            activeGplot: 0,
            editIndex: -1,
        }
    },
    methods: {
        projectChange (e) {
        },
        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);
                }
            });
        },
        chooseGplot () {
            this.$refs.gplot.open()
        },
        closeDrawer () {
            this.pointName = ''
            this.point = {
                x: 170,
                y: 100,
            }
            this.$refs.gplot.close()
            this.$refs.point.close()
        },
        add () {
            this.$refs.point.open()
        },
        addPoint () {
            if (!this.pointName) {
                this.$util.toast('请输入监测点名称')
                return
            }
            if (this.editIndex > -1) {
                this.pointList[this.editIndex] = {
                    x: this.point.x,
                    y: this.point.y,
                    pointName: this.pointName,
                }
                this.editIndex = -1
            } else {
                let arr = this.pointList.filter(item => item.pointName == this.pointName)
                if (arr.length > 0) {
                    this.$util.toast('监测点名称已存在')
                    return
                }
                this.pointList.push({
                    x: this.point.x,
                    y: this.point.y,
                    pointName: this.pointName,
                })
            }
            console.log(this.pointList);
            this.closeDrawer()
        },
        deletePoint (index) {
            this.pointList.splice(index, 1)
        },
        editPoint (item, index) {
            this.editIndex = index
            this.point.x = item.x
            this.point.y = item.y
            this.pointName = item.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'>
.new {
    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-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;
}
</style>