hfln_miniprogram/src/pages/home/home.vue

<template>
    <view class="home-warp">
        <view class="header">
            <view class="headerPng" @click="gotoPath('/pagesA/my/my')">
                <image :src="imageUrl" mode="widthFix" />
            </view>
            <view class="title">健康雷达</view>
        </view>
        <view class="leineng">
            <view>
                <image
                    src="https://hflnxx.oss-cn-shanghai.aliyuncs.com/IMAGE/20250919/home_ln.png"
                    mode=""
                />
            </view>
            <view class="right">
                <view
                    class="rightItem"
                    @click="gotoDevice('/pagesA/devices/devices')"
                >
                    <view class="rightTitle">全部设备</view>
                    <view class="rightContent"
                        ><text>{{ devNum }}</text
                        >台</view
                    >
                </view>
                <view
                    class="rightItem"
                    @click="gotoDevice('/pagesA/homeManage/homeManage')"
                >
                    <view class="rightTitle">我的家庭</view>
                    <view class="rightContent"
                        ><text>{{ groupNum }}</text
                        >家</view
                    >
                </view>
                <view class="rightItem" @click="goAbnormalInfo()">
                    <view class="rightTitle">异常信息</view>
                    <view class="rightContent" v-if="warnNum == 0"
                        ><text>0</text>条</view
                    >
                    <view class="rightAlarm" v-else
                        ><text>{{ warnNum }}</text
                        >条</view
                    >
                </view>
            </view>
        </view>

        <view class="content">
            <view
                class="card"
                @click="gotoPath('/pagesA/adNewDevice/adNewDevice')"
            >
                <view class="contentTitle">
                    <text>添加设备</text>
                    <image src="../../static/rightArrow.png" />
                </view>
                <view class="contentCenter"> 家庭陪伴探测器 </view>
                <view class="contentImg">
                    <image src="../../static/smalLn.png" mode="" />
                </view>
            </view>
            <view
                class="card"
                @click="gotoDevice('/pagesA/homeManage/homeManage')"
            >
                <view class="contentTitle">
                    <text>我的家庭</text>
                    <image src="../../static/rightArrow.png" />
                </view>
                <view class="contentCenter"> 点击进入我的家 </view>
                <view class="contentImg">
                    <image src="../../static/myHome.png" mode="" />
                </view>
            </view>
        </view>

        <view class="bottom">
            <image src="../../static/linkService.png" mode="" />
            <button open-type="contact">联系客服</button>
        </view>

        <!-- <movable-area class="movable-area" direction="all">
            <movable-view
                class="movable-button"
                :x="pos.x"
                :y="pos.y"
                direction="all"
                @change="onChange"
                @touchend="onTouchEnd"
                v-if="showService"
            >
                <image src="../../static/linkService.png" class="icon" />
                <span class="pulse"></span>
                <span class="pulse"></span>
                <button open-type="contact" class="contact-btn"></button>
            </movable-view>
        </movable-area> -->

        <view class="bot_version"> v3.0.17</view>
        <view
            class="shareInfo"
            @click="goDeviceShare()"
            v-if="shareNum > 0"
            :style="{ top: warnNum > 0 ? '280rpx' : '210rpx' }"
        >
            <image src="../../static/ln_small.png" class="shareimage"></image>
            <text class="sharetitle"
                >您有<text class="sharenum">{{ shareNum }}</text
                >台设备待授权</text
            >
            <image src="../../static/arrTwo.png" class="arrimage"></image>
        </view>

        <view
            class="warmInfo"
            @click="goAbnormalInfo()"
            v-if="alarmRetentionLists.length > 0"
        >
            <image src="../../static/warmImage.png" class="shareImage"></image>
            <view class="shareTitleContainer">
                <view
                    class="shareTitleList"
                    v-if="alarmRetentionLists.length > 1"
                >
                    <view
                        class="shareTitle"
                        v-for="item in alarmRetentionLists"
                        :key="item.clientId"
                    >
                        {{ item.devName }}检测到有{{
                            getEventTypeName(item.eventType)
                        }}
                    </view>
                    <view
                        class="shareTitle"
                        v-for="item in alarmRetentionLists"
                        :key="item.clientId"
                    >
                        {{ item.devName }}检测到有{{
                            getEventTypeName(item.eventType)
                        }}
                    </view>
                </view>
                <view class="shareTitleTwo" v-else>
                    <template v-if="alarmRetentionLists.length == 1">
                        <view class="shareTitle">
                            {{ alarmRetentionLists[0].devName }}检测到有{{
                                getEventTypeName(
                                    alarmRetentionLists[0].eventType
                                )
                            }}
                        </view>
                    </template>
                </view>
            </view>
            <image src="../../static/arrFour.png" class="warmImage"></image>
        </view>
        <tenMinutes v-if="isIniTenMinutes" />
        <alarModel v-if="showModle" />
    </view>
</template>
<script>
export default {
    name: "my",
    data() {
        return {
            notices: [],
            groupNum: 0,
            shareNum: 0,
            devNum: 0,
            warnNum: 0,
            imageUrl: "../../static/headerInfo.jpg",
            devDevice: "",
            warmNum: "",
            warmDetail: [],
            alarmRetentionLists: [],
            warmTypeList: [],
            isIniTenMinutes: false,
            showModle: false,
            // 修改我的客服点位
            pos: { x: 0, y: 0 },
            selectX: 0,
            selectY: 0,
            screenWidth: 0,
            screenHeight: 0,
            btnWidth: 80,
            btnHeight: 80,
            margin: 0, // 边距
            windowWidth: 0,
            dragTimer: null,
            showService: false,
        };
    },
    computed: {},
    methods: {
        gotoPath(path) {
            if (uni.getStorageSync("userId")) {
                uni.navigateTo({
                    url: path,
                });
            } else {
                uni.showToast({
                    title: "暂未登录，请先登录",
                    icon: "none",
                    duration: 1500,
                });
                uni.reLaunch({
                    url: "/pagesA/loginNew/loginNew",
                });
            }
        },
        gotoDevice(url) {
            if (uni.getStorageSync("userId")) {
                if (this.devDevice.length == 1) {
                    uni.setStorageSync("devIdDetail", this.devDevice[0].devId);
                    uni.setStorageSync(
                        "clientIDetail",
                        this.devDevice[0].clientId
                    );
                    uni.navigateTo({
                        url:
                            "/pagesA/deviceDetail/deviceDetail?devItem=" +
                            JSON.stringify(this.devDevice[0]),
                    });
                } else {
                    uni.navigateTo({
                        url: url,
                    });
                }
            } else {
                uni.showToast({
                    title: "暂未登录，请先登录",
                    icon: "none",
                    duration: 1500,
                });
                uni.reLaunch({
                    url: "/pagesA/loginNew/loginNew",
                });
            }
        },
        goAbnormalInfo() {
            if (uni.getStorageSync("userId")) {
                if (this.warnNum <= 0) {
                    uni.showToast({
                        title: "暂无异常信息",
                        icon: "none",
                        duration: 1500,
                    });
                    return;
                }
                uni.navigateTo({
                    url: "/pagesA/abnormalInfo/abnormalInfo",
                });
                return;
            }
            uni.reLaunch({
                url: "/pagesA/loginNew/loginNew",
            });
        },
        goDeviceShare() {
            uni.setStorageSync("shareStatus", "authorized");
            uni.navigateTo({
                url: "/pagesA/shareList/shareList",
            });
        },
        getperSonInfo() {
            this.$http
                .get("wap/home/homeInfo", {
                    userId: uni.getStorageSync("userId"),
                })
                .then((res) => {
                    if (res.data.data) {
                        const { groupNum, devNum, warnNum } = res.data.data;
                        this.groupNum = groupNum;
                        this.devNum = devNum;
                        this.warnNum = warnNum;
                        this.devDevice = res.data.data.deviceList;
                    }
                });
        },
        getShareNum() {
            this.$http
                .post("wap/share/queryDevShare", {
                    userId: uni.getStorageSync("userId"),
                    state: 0,
                })
                .then((res) => {
                    this.shareNum = res.data.data?.length || 0;
                });
        },

        // 异常信息处理
        getWarnList() {
            this.$http
                .post(
                    "wap/stats/alarmEventsQuery",
                    {
                        pageNo: 1,
                        pageSize: 3,
                        createTimeStart: this.$time(new Date()),
                        createTimeEnd: this.$time(new Date()),
                    },
                    {
                        header: {
                            "Content-Type": "application/json;charset=UTF-8",
                            token: uni.getStorageSync("tokenValue") || "",
                        },
                    }
                )
                .then((res) => {
                    if (res.data.data) {
                        this.alarmRetentionLists = res.data.data.rows;
                    }
                });
        },
        getwarmType() {
            this.$http.get("wap/stats/queryEventType").then((res) => {
                if (res.data.data) {
                    this.warmTypeList = res.data.data;
                }
            });
        },
        getEventTypeName(eventType) {
            return (
                this.warmTypeList.find((item) => item.eventVal == eventType)
                    ?.eventDesc || "未知"
            );
        },
        onChange(e) {
            this.selectX = e.detail.x;
            this.selectY = e.detail.y;
        },
        onTouchEnd() {
            uni.getSystemInfo({
                success: (res) => {
                    this.windowWidth = Number(res.windowWidth / 2);
                },
            });
            // console.log(this.selectX, this.selectY, "777777");
            // if (this.selectX >= this.windowWidth) {
            //     this.selectX = 0;
            // } else {
            //     this.selectX = 0;
            // }
            this.selectX = 0;
            this.pos.x = this.selectX;
            this.pos.y = this.selectY;
            uni.setStorageSync("posLocationX", this.pos.x);
            uni.setStorageSync("posLocationY", this.pos.y);
        },
    },
    onLoad() {
        // const sys = uni.getSystemInfoSync();
        // this.windowWidth = sys.windowWidth;
        // this.windowHeight = sys.windowHeight;

        // // 初始化位置：右下角
        // this.pos.x = this.windowWidth - this.btnWidth - this.margin;
        // this.pos.y = this.windowHeight - this.btnHeight - this.margin;

        // // 如果之前存储过位置，用存储覆盖
        // const savedX = uni.getStorageSync("posLocationX");
        // const savedY = uni.getStorageSync("posLocationY");
        // if (savedX !== "" && savedX !== undefined) this.pos.x = savedX;
        // if (savedY !== "" && savedY !== undefined) this.pos.y = savedY;

        if (
            !uni.getStorageSync("posLocationX") ||
            !uni.getStorageSync("posLocationY")
        ) {
            this.pos = { x: 0, y: 0 };
        }
        this.pos.x = uni.getStorageSync("posLocationX");
        this.pos.y = uni.getStorageSync("posLocationY");
    },
    onShow() {
        if (uni.getStorageSync("userId")) {
            this.getperSonInfo();
            this.getShareNum();
            this.getwarmType();
            this.getWarnList();
            this.showModle = true;
            this.isIniTenMinutes = true;
            this.showService = true;
        }
        // 配置服务器
        let selectedService = uni.getStorageSync("sercviceChoice");
        if (!selectedService) {
            uni.setStorageSync("sercviceChoice", "aloneServe");
        }
    },
    onHide() {
        this.showModle = false;
        this.isIniTenMinutes = false;
    },
    onUnload() {
        // this.isIniTenMinutes = false;
    },

    onShareAppMessage() {
        return {
            title: "好友向您分享雷能守护",
            path: "/pages/home/home",
        };
    },
};
</script>
<style lang="less" scoped>
.home-warp {
    position: relative;
    height: 100vh;
    background: linear-gradient(180deg, #faede2 0%, #f4f4f4 100%);
    /* padding: 24rpx 30rpx 20rpx; */
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 90rpx 80rpx;
}

.headerPng {
    z-index: 1;
}

.headerPng image {
    width: 70rpx;
    height: 70rpx;
    border-radius: 50%;
}

.title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #111111;
    font-size: 32rpx;
}

.leineng {
    position: absolute;
    top: -100rpx;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100vw;
    height: 100vh;
}

.leineng image {
    position: absolute;
    top: 10%;
    left: 0;
    width: 700rpx;
    height: 1200rpx;
}

.right {
    z-index: 2;
    padding-right: 100rpx;
}

.right .rightItem {
    margin-bottom: 80rpx;
    color: #666666;
}

.right .rightItem .rightTitle {
    font-size: 23.44rpx;
    text-align: center;
}

.right .rightItem .rightContent {
    display: flex;
    justify-content: center;
    align-items: baseline;
    margin-top: 17rpx;
    font-size: 24rpx;
    font-weight: bold;
}

.right .rightItem .rightContent text {
    font-weight: 700;
    font-size: 66rpx;
}

.right .rightItem .rightAlarm {
    margin-top: 17rpx;
    font-size: 24rpx;
    font-weight: bold;
    color: #f55050;
}

.right .rightItem .rightAlarm text {
    font-weight: 700;
    font-size: 66rpx;
    color: #f55050;
}

.content {
    position: absolute;
    bottom: 200rpx;
    width: 100vw;
    display: flex;
    justify-content: space-around;
}

.card {
    width: 350rpx;
    height: 300rpx;
    border: 2rpx solid #ffffff;
    border-radius: 37rpx;
    background: #ffffff;
    padding: 38rpx 30rpx;
    box-sizing: border-box;
}

.contentTitle {
    display: flex;
    align-items: center;
    font-size: 32rpx;
    color: #111111;
}

.contentTitle image {
    width: 28rpx;
    height: 28rpx;
    margin-left: 8rpx;
}

.contentCenter {
    margin-top: 14rpx;
    font-size: 24rpx;
    color: #999999;
}

.contentImg image {
    margin-top: 60rpx;
    width: 94rpx;
    height: 94rpx;
}

.bottom {
    position: absolute;
    bottom: 80rpx;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
}
.bottom image {
    width: 28rpx;
    height: 28rpx;
}

.bottom button {
    all: unset;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    text-align: inherit;
    line-height: normal;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    margin-left: 6rpx;
    color: #a1aab4;
    font-size: 28rpx;
}

.bot_version {
    opacity: 0.4;
    position: absolute;
    bottom: 20rpx;
    left: 50%;
    font-size: 28rpx;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.shareInfo {
    width: 100%;
    padding: 0 16rpx;
    color: #ffffff;
    display: flex;
    align-items: center;
    font-size: 28rpx;
    position: absolute;
    // top:210rpx;
    // top: 400rpx;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    background: linear-gradient(
        to right,
        #6f4e37 0%,
        rgba(210, 180, 140, 0.3) 100%
    );
    .shareimage {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
    }
    .sharetitle {
        margin-left: 20rpx;
        font-size: 28rpx;
        color: #ffffff;
        letter-spacing: 4rpx;
    }
    .sharenum {
        font-weight: bold;
        font-size: 28rpx;
        color: #ffffff;
    }
    .arrimage {
        width: 20rpx;
        height: 30rpx;
        margin-left: auto;
    }
}

.warmInfo {
    width: 100%;
    padding: 0rpx 10rpx;
    color: #ffffff;
    display: flex;
    align-items: center;
    font-size: 28rpx;
    position: absolute;
    top: 210rpx;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    background: linear-gradient(
        to right,
        #f9e0d7 0%,
        #ff6262 45%,
        #ff6262 55%,
        #f9e0d7 100%
    );
    border-radius: 12rpx;
}

.shareImage {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
}

.warmImage {
    width: 30rpx;
    height: 30rpx;
    margin-left: auto;
}

.shareTitleContainer {
    flex: 1;
    overflow: hidden;
    height: 40rpx;
    margin-left: 20rpx;
    display: flex;
    align-items: center;
}

/* 内层列表：滚动 */
.shareTitleList {
    display: flex;
    flex-direction: column;
    animation: scrollUp 7s linear infinite;
}
.shareTitleTwo {
    display: flex;
    flex-direction: column;
}
.shareTitle {
    font-size: 28rpx;
    color: #ffffff;
    letter-spacing: 4rpx;
    height: 40rpx;
    line-height: 40rpx;
    white-space: nowrap;
}
.movable-area {
    position: fixed;
    width: 100%;
    height: 80%;
}

.movable-button {
    display: flex;
    justify-content: center;
    z-index: 999;
    align-items: center;
    width: 80rpx;
    height: 80rpx;
}

.movable-button .icon {
    pointer-events: none;
    width: 80rpx;
    height: 80rpx;
}

.movable-button .contact-btn {
    position: absolute;
    width: 80rpx;
    height: 80rpx;
    background: none;
    border: none;
    padding: 0;
    top: 0;
    left: 0;
    z-index: 10;
}

/* 去掉伪元素 after 样式 */
.movable-button .contact-btn::after,
.movable-button .contact-btn::before,
wx-button::after,
wx-button::before {
    content: none !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.pulse {
    position: absolute;
    pointer-events: none;
    top: 50%;
    left: 50%;
    width: 80rpx;
    height: 80rpx;
    border: 2px solid #ffd700; /* 黄色边框 */
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
    animation: pulseAnim 2s ease-out infinite;
    z-index: 4;
}

/* 第二个 pulse 动画延迟，产生连续效果 */
.pulse:nth-child(2) {
    animation-delay: 0.75s;
}

@keyframes pulseAnim {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    70% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}
/* 无限无缝滚动 */
@keyframes scrollUp {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
    }
}
</style>