hfln_miniprogram/src/pagesA/healthAlarm/healthAlarm.vue

<template>
    <view class="home-warpTwo">
        <view class="airbody">
            <view class="module">
                <view class="device-bottom">
                    <view
                        class="info-box"
                        v-for="(item, index) in selectedPlan"
                        :key="index"
                    >
                        <view class="info-text">
                            <text>{{ item.name }}</text>
                        </view>
                        <view class="edit_del">
                            <image
                                @click="deleteItem(item)"
                                src="../../static/delete.png"
                                alt=""
                            ></image>
                            <image
                                @click="editItem(item)"
                                style="margin-left: 10rpx"
                                src="../../static/edit.png"
                                alt=""
                            ></image>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="bottomTwo">
            <view class="addNewAlarm" @click="addNewAlarm">新增守护计划</view>
        </view>

        <!-- 选择守护计划遮罩层 -->
        <view v-if="showPopup" class="mask" @click="showPopup = false"></view>

        <view v-if="showPopup" class="popup">
            <view class="popup-body">
                <picker
                    mode="selector"
                    :range="planListName"
                    @change="bindPickerChange"
                    :value="selectedIndex"
                >
                    <view class="picker-text">
                        {{
                            planListName[selectedIndex] ||
                            "点击此处选择守护计划"
                        }}
                    </view>
                </picker>
            </view>
            <view class="popup-footer">
                <view class="cancel-btn" @click="showPopup = false">
                    取消
                </view>
                <view type="primary" @click="confirmSelect" class="sure-btn">
                    确定
                </view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            devInfo: {},
            showPopup: false,
            planList: [],
            planListName: [],
            selectedIndex: null,
            // 已经新增的守护计划
            selectedPlan: [],
        };
    },
    computed: {},
    methods: {
        getPlanList() {
            this.$http
                .post("wap/alarm/plan/queryTpl", {
                    eventVal: "",
                    name: "",
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        if (res.data.data.length > 0) {
                            this.planList = res.data.data;
                            this.planListName = res.data.data.map(
                                (ele) => ele.name
                            );
                            console.log(this.planList, 99999);
                        }
                    }
                });
        },
        confirmSelect() {
            if (this.selectedIndex !== null) {
                let selectedPlan = this.planList.find(
                    (plan) => plan.name == this.planListName[this.selectedIndex]
                );
                selectedPlan.clientId = this.devInfo.clientId;
                if (!selectedPlan.alarmTimePlan) {
                    this.$set(selectedPlan, "alarmTimePlan", {});
                }
                selectedPlan.alarmTimePlan.startDate = this.$time(
                    new Date(),
                    1
                );
                selectedPlan.alarmTimePlan.stopDate = this.$time(
                    new Date(
                        new Date().setFullYear(new Date().getFullYear() + 1)
                    ),
                    1
                );

                this.$http
                    .post(
                        "wap/alarm/plan/save",
                        {
                            ...selectedPlan,
                        },
                        {
                            header: {
                                "Content-Type":
                                    "application/json;charset=UTF-8",
                                token: uni.getStorageSync("tokenValue") || "",
                            },
                        }
                    )
                    .then((res) => {
                        if (res.data.code == 200) {
                            uni.showToast({
                                title: "添加计划成功",
                                icon: "success",
                                duration: 1500,
                            });
                        } else {
                            uni.showToast({
                                title: res.data.message,
                                icon: "none",
                                duration: 1500,
                            });
                        }
                        this.getSelectPlan();
                    });
                this.showPopup = false;
            }
        },
        bindPickerChange(e) {
            this.selectedIndex = e.detail.value;
        },
        addNewAlarm() {
            this.showPopup = true;
        },
        getSelectPlan() {
            this.$http
                .post(
                    "wap/alarm/plan/query",
                    {
                        clientId: this.devInfo.clientId,
                    },
                    {
                        header: {
                            "Content-Type": "application/json;charset=UTF-8",
                            token: uni.getStorageSync("tokenValue") || "",
                        },
                    }
                )
                .then((res) => {
                    if (res.data.code == 200) {
                        if (res.data.data.length > 0) {
                            this.selectedPlan = res.data.data;
                        }
                    }
                });
        },
        deleteItem(item) {
            uni.showModal({
                content: "是否删除该计划",
                complete: (res) => {
                    if (res.confirm) {
                        this.$http
                            .post(
                                "wap/alarm/plan/del",
                                {
                                    id: item.id,
                                },
                                {
                                    header: {
                                        "Content-Type":
                                            "application/json;charset=UTF-8",
                                        token:
                                            uni.getStorageSync("tokenValue") ||
                                            "",
                                    },
                                }
                            )
                            .then((res) => {
                                if (res.data.code == 200) {
                                    uni.showToast({
                                        title: "守护计划删除成功",
                                        icon: "success",
                                        duration: 1500,
                                    });
                                } else {
                                    uni.showToast({
                                        title: res.data.message,
                                        icon: "none",
                                        duration: 1500,
                                    });
                                }
                                this.getSelectPlan();
                            });
                    }
                    if (res.cancel) {
                    }
                    return;
                },
            });
        },
        editItem(item) {
            console.log(item, 88888);
        },
    },
    onLoad(options) {
        this.devInfo = JSON.parse(options.devInfo);
        this.getSelectPlan();
    },
    onShow() {
        this.getPlanList();
    },
};
</script>
<style lang="less" scoped>
.home-warpTwo {
    position: relative;
    height: 100vh;
    background: linear-gradient(180deg, #ffdfdf 0%, #ffffff 30.3%);
    box-sizing: border-box;
    width: 750rpx;
    border-bottom-left-radius: 35rpx;
    border-bottom-right-radius: 35rpx;
    background: linear-gradient(180deg, #faede2 0%, #ffffff 100%);
    .airCantInfo {
        margin: 30rpx auto 0 auto;
        border: 18rpx solid #1f1f1f;
        position: relative;
    }
    .airbody {
        background: #ffffff;
        box-sizing: border-box;
        .header_top {
            // padding: 0rpx 40rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .airTitle {
                font-weight: 500;
                color: #784c41;
                font-size: 32rpx;
                padding-left: 20rpx;
                padding-top: 20rpx;
            }
            .addfnt {
                display: flex;
                align-items: center;
                image {
                    margin-top: 7rpx;
                    width: 25rpx;
                    height: 25rpx;
                }
                .add_btn {
                    margin-left: 10rpx;
                    font-size: 32rpx;
                }
            }
        }

        .module {
            bottom: 0;
            box-sizing: border-box;
            width: 100%;
            background: #ffffff;
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            .device-bottom {
                .no-data {
                    text-align: center;
                }
                .info-box {
                    display: flex;
                    align-items: center;
                    // width: 620rpx;
                    padding: 0 30rpx;
                    height: 110rpx;
                    background: #f8f8f8;
                    border-radius: 38rpx;
                    border-radius: 20rpx 20rpx 20rpx 20rpx;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 26rpx;
                    .info-text {
                        display: flex;
                        flex-direction: column;
                        margin-left: 20rpx;
                    }
                    image {
                        margin-bottom: 10rpx;
                        width: 75rpx;
                        height: 75rpx;
                    }
                    .edit_del {
                        margin-left: auto;
                        image {
                            width: 40rpx;
                            height: 40rpx;
                        }
                    }
                }
                .info-box:not(:first-child) {
                    margin-top: 20rpx;
                }
            }
        }
    }
    .bottomTwo {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 750rpx;
        height: 120rpx;
        background: #f3e2dd;
        .addNewAlarm {
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 700rpx;
            height: 94rpx;
            background: #ffebe4;
            border-radius: 28rpx;
            font-weight: 500;
            color: #111111;
            font-size: 32rpx;
            text-align: center;
        }
    }

    .mask {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 99;
    }
    .popup {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 500rpx;
        background: #fff;
        border-radius: 16rpx;
        padding: 20rpx;
        z-index: 100;
        .popup-body {
            text-align: center;
            margin-bottom: 20rpx;

            .picker-text {
                padding: 20rpx;
                border-radius: 8rpx;
            }
        }
        .popup-footer {
            display: flex;
            justify-content: space-around;
            margin-top: 40rpx;
            .cancel-btn {
                width: 200rpx;
                height: 75rpx;
                background: #ffebe4;
                line-height: 75rpx;
                border-radius: 28rpx;
                font-weight: 500;
                color: #111111;
                font-size: 32rpx;
                text-align: center;
            }
            .sure-btn {
                width: 200rpx;
                height: 75rpx;
                background: #4f372e;
                line-height: 75rpx;
                border-radius: 28rpx;
                font-weight: 500;
                color: #ffffff;
                font-size: 32rpx;
                text-align: center;
            }
        }
    }
}
</style>