app-govern/pages/gateway/newDevice.vue

<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;
}
</style>