hfln_miniprogram/src/pagesA/OTA/OTA.vue

<template>
    <view class="box">
        <view
            class="OTA-info"
            v-if="devsClientId.length > 0 && otaList.length > 0"
        >
            <view class="meauList">
                <view class="title">OTA信息</view>
                <view class="menu-item">
                    <view class="meanLeft"> 设备序列号 </view>
                    <view class="meanRight">
                        <picker
                            @change="bindPickerChange"
                            :value="index"
                            :range="devsClientId"
                        >
                            <view class="uni-input">{{
                                devsClientId[index]
                            }}</view>
                        </picker>
                        <image
                            src="../../static/rightArrow.png"
                            alt=""
                            @click="showPicker"
                        ></image>
                    </view>
                </view>
                <view class="menu-item" bind:tap="gotoPath">
                    <view class="meanLeft">
                        <text>设备名称</text>
                    </view>
                    <view class="meanRight">
                        {{ devs[index].devName }}
                    </view>
                </view>
                <view class="menu-item" bind:tap="logout">
                    <view class="meanLeft">
                        <text>雷达型号</text>
                    </view>
                    <view class="meanRight">
                        {{ devs[index].devType }}
                    </view>
                </view>
                <view class="menu-item" bind:tap="logout">
                    <view class="meanLeft">
                        <text>当前版本</text>
                    </view>
                    <view class="meanRight">
                        {{ devs[index].hardware }}
                    </view>
                </view>
            </view>

            <view class="meauList">
                <view class="title">OTA版本</view>
                <view class="menu-item">
                    <view class="meanLeft">OTA版本</view>
                    <view class="meanRight">
                        <picker
                            @change="bindPickerChangeTwo"
                            :value="otaIndex"
                            :range="otaListName"
                        >
                            <view class="uni-input">{{ otaListName[0] }}</view>
                        </picker>
                        <image
                            src="../../static/rightArrow.png"
                            alt=""
                            @click="showPicker"
                        ></image>
                    </view>
                </view>
            </view>
        </view>

        <view
            class="updateOta"
            @click="freshOTA()"
            v-if="devsClientId.length > 0 && otaList.length > 0"
            >更新OTA</view
        >
    </view>
</template>

<script>
export default {
    data() {
        return {
            ota: "",
            devs: [],
            devsClientId: [],
            index: 0,
            selectClientId: "",
            // ota部分
            otaList: [],
            otaListName: [],
            otaIndex: 0,
        };
    },
    methods: {
        queryList() {
            this.$http
                .post("wap/device/deviceList", {
                    userId: uni.getStorageSync("userId"),
                    keyword: "",
                    status: "",
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        let devs = res.data.data;
                        for (let i = 0; i < devs.length; i++) {
                            if (
                                devs[i].installPosition == "Toilet" &&
                                devs[i].stayTimes?.length > 0
                            ) {
                                devs[i].wcTimes = devs[i].stayTimes.length;
                            } else {
                                devs[i].wcTimes = 0;
                            }
                            const signalTime = devs[i].signal_time;
                            const currentTime = Date.now();
                        }
                        this.devs = devs;
                        this.devsClientId = this.devs.map(
                            (ele) => ele.clientId
                        );
                    } else {
                        uni.showModal({
                            content: res.data.message,
                            showCancel: false,
                        });
                    }
                });
        },
        freshOTA() {
            if (this.devs[this.index].online == 0) {
                uni.showModal({
                    content: "设备离线，无法升级",
                    complete: (res) => {
                        if (res.confirm) {
                        } else {
                        }
                    },
                });
                return;
            }
            let clientIds = [];
            clientIds.push(this.devs[this.index].clientId);
            let ossUrl = this.otaList[this.otaIndex].ossUrl;
            this.$http
                .post(
                    "pub/OTA/update",
                    { clientIds: clientIds, ossUrl: ossUrl },
                    {
                        header: {
                            "Content-Type": "application/json;charset=UTF-8",
                        },
                    }
                )
                .then((res) => {
                    if (res.data.code == 200) {
                        uni.showToast({
                            title: "OTA升级成功",
                            icon: "success",
                            duration: 1500,
                        });
                    } else {
                        uni.showToast({
                            title: res.data.message,
                            icon: "none",
                            duration: 1500,
                        });
                    }
                });
        },
        bindPickerChange(e) {
            this.index = e.detail.value;
        },
        // OTA部分
        bindPickerChangeTwo(e) {
            this.otaIndex = e.detail.value;
        },
        queryOtaList() {
            this.$http.get("pub/OTA/query", {}).then((res) => {
                this.otaList = res.data.data;
                this.otaListName = this.otaList.map((ele) => ele.fileName);
            });
        },
    },
    onLoad() {},
    onShow() {
        this.queryList();
        this.queryOtaList();
    },
};
</script>

<style lang="less" scoped>
.box {
    padding: 10rpx 18rpx;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(180deg, #faede2 0%, #f4f4f4 100%);
    box-sizing: border-box;
    .meauList {
        .title {
            padding-top: 20rpx;
            margin-left: 25rpx;
            font-weight: 500;
            color: #784c41;
            font-size: 32rpx;
        }
        width: 710rpx;
        margin: 18rpx auto 0 auto;
        background: #fff;
        border-radius: 37rpx;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
        padding: 0;
        box-sizing: border-box;

        .menu-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 0 32rpx;
            padding: 32rpx 0;
            border-bottom: 1rpx solid #f0f0f0;

            &:last-child {
                border-bottom: none;
            }

            .meanLeft {
                display: flex;
                align-items: center;
                justify-content: center;

                image {
                    width: 38rpx;
                    height: 38rpx;
                }

                text {
                    margin-left: 10rpx;
                    color: #111111;
                    font-size: 32rpx;
                }
            }
            .meanRight {
                display: flex;
                align-items: center;
            }

            .meanRight image {
                margin-left: 4rpx;
                width: 16rpx;
                height: 26rpx;
            }
        }
    }

    .updateOta {
        width: 710rpx;
        margin: 48rpx auto 0 auto;
        height: 88rpx;
        background: #fff;
        color: #b48a7c;
        font-size: 32rpx;
        border-radius: 30rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
    }
}
</style>