gxt_app/pages/index/index.uvue

<template>
	<uni-navbar-lite :showLeft=false title="首页"></uni-navbar-lite>
    <view class="page-container">
        <!-- 背景图 -->
        <!-- <image class="bg-image" src="/static/images/index/1.png" mode="widthFix"></image> -->

        <!-- <view class="bg-color"></view> -->
        <scroll-view class="page-content">
			
			<view class="db-view">
				<view class="db-box">
					<view class="db-block">
						<view class="db-center-1">
							<image class="db-image" src="/static/images/map/1.png"></image>
						</view>
					</view>
					<text class="db-text">待处理工单</text>
				</view>
				<view class="db-box">
					<view class="db-block">
						<view class="db-center-2">
							<image class="db-image" src="/static/images/map/2.png"></image>
						</view>
					</view>
					<text class="db-text">评分工单</text>
				</view>
				<view class="db-box">
					<view class="db-block">
						<view class="db-center-3">
							<image class="db-image" src="/static/images/map/2.png"></image>
						</view>
					</view>
					<text class="db-text">超时工单</text>
				</view>
			</view>
			
            <!-- 支流出库流量图表 -->
           <!-- <view class="chart-section">
                <text class="section-title">支流出库流量 (m³/s)</text>
                <flow-chart />
            </view> -->
			
			<view>
				<button @click="handlePush">通知</button>
			</view>
			
        </scroll-view>

        <!-- 底部 TabBar -->
        <custom-tabbar :current="0" />
    </view>
</template>

<script setup lang="uts">
    import { ref, onMounted } from 'vue'
    import { getUserInfo } from '../../utils/storage'
    import FlowChart from '../../components/index/flow-chart/flow-chart.uvue'

    // 用户名
    const userName = ref<string>('用户')
	
	const handleCreateChannel = (showToast : boolean) => {
	  // #ifdef APP-ANDROID
	  const manager = uni.getPushChannelManager()
	  manager.setPushChannel({
	    channelId: "msg-pass",
	    channelDesc: "留言审核通过",
	    soundName: "#填写配置的声音文件名#",
	    enableLights: true,
	    enableVibration: true,
	    importance: 4,
	    lockscreenVisibility: 1
	  } as SetPushChannelOptions)
	  if (showToast) {
	    uni.showToast({
	      title: "设置渠道成功"
	    })
	  }
	  // #endif
	}
	
	const handleCreateLocalNotification = () => {
	  if (uni.getAppAuthorizeSetting().notificationAuthorized == "authorized") {
	    handleCreateChannel(false)
	    const date = new Date();
	    const hour = date.getHours()
	    const minute = date.getMinutes()
	    const second = date.getSeconds()
	    const formateTime = (target : number) : string => {
	      return target < 10 ? `0${target}` : `${target}`
	    }
	    uni.createPushMessage({
	      title: "主标题(title)",
	      content: `内容(content)，创建时间: ${formateTime(hour)}:${formateTime(minute)}:${formateTime(second)}`,
	      cover: false,
	      channelId: "msg-pass",
	      when: Date.now() + 10000,
	      icon: "/static/uni.png",
	      sound: "system",
	      delay: 1,
	      payload: {
	        pkey: "pvalue1"
	      },
	      // #ifdef APP-HARMONY
	      category: "SOCIAL_COMMUNICATION",
	      // #endif
	      // #ifndef APP-HARMONY
	      category: "IM",
	      // #endif
	      success(res) {
	        console.log("res: " + res);
	        uni.hideToast()
	        uni.showToast({
	          title: "创建本地通知消息成功"
	        })
	      },
	      fail(e) {
	        console.log("fail :" + e);
	        uni.hideToast()
	        uni.showToast({
	          title: "创建本地通知消息失败",
	          icon: "error"
	        })
	      }
	    })
	  } else {
	    uni.showToast({
	      title: "请在设置中开启通知权限",
	      icon: "error"
	    })
	  }
	}
	
	const handlePush =  () => {
		// uni.navigateTo({
		//     url: '/pages/push/index',
		//     fail: (err: any) => {
		//         console.log('导航失败', err)
		//     }
		// })
		handleCreateLocalNotification();
	};

    // 初始化
    onMounted(() => {
        const userInfo = getUserInfo()
        if (userInfo != null) {
            const realName = userInfo['nickName'] as string | null
            userName.value = realName ?? '用户'
        }
    })
</script>

<style lang="scss">
    .page-container {
        position: relative;
        flex: 1;
        padding-top: env(safe-area-inset-top);
		background-color: #e8f0f9;
    }

    .bg-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    .bg-color {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background: #71a6e4;
    }

    .page-content {
        position: relative;
        flex: 1;
        margin-bottom: 150rpx;
        padding: 20rpx;
        z-index: 10;
    }

    .header {
		flex-direction: row;
		height: 40px;
		
        &-title {
            font-size: 40rpx;
            color: #ffffff;
            font-weight: bold;
            margin-bottom: 15rpx;
        }

        &-greeting {
            font-size: 28rpx;
            color: rgba(255, 255, 255, 0.9);
        }
    }

    .section-title {
        font-size: 32rpx;
        color: #333333;
        font-weight: bold;
        margin-bottom: 20rpx;
    }

    /* 图表区域 */
    .chart-section {
        padding: 30rpx;
        margin-bottom: 20rpx;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.9) 100%);
        box-shadow: 0 0 16rpx 0 rgba(0, 0, 0, 0.1);
        border-radius: 16rpx;
    }
	
	.db-view{
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 5px;
		
		.db-box{
			background-color: #fff;
			width:80px;
			height: 80px;
			justify-content: center;
			align-items: center;
			margin-left: 3px;
			border-radius: 5px;
			.db-text{
				font-size:10px;
			}
			.db-center-1{
				justify-content: center;
				align-items: center;
				background-color: #DBEAFE;
				border-radius: 100px;
				width:50px;
				height:50px;
			}
			.db-center-2{
				justify-content: center;
				align-items: center;
				background-color: #DCFCE7;
				border-radius: 100px;
				width:50px;
				height:50px;
			}
			.db-center-3{
				justify-content: center;
				align-items: center;
				background-color: #F3E8FF;
				border-radius: 100px;
				width:50px;
				height:50px;
			}
		}
		.db-image{
			width:20px;
			height:20px;
		}
	}
</style>