51CTO首页
AI.x社区
博客
学堂
精品班
软考社区
免费课
企业培训
鸿蒙开发者社区
WOT技术大会
IT证书
公众号矩阵
移动端
短视频免费课程课程排行直播课软考学堂
全部课程厂商认证IT技术24年11月软考PMP项目管理免费题库
在线学习
文章资源问答课堂专栏直播
51CTO
鸿蒙开发者社区
51CTO技术栈
51CTO官微
51CTO学堂
51CTO博客
CTO训练营
鸿蒙开发者社区订阅号
51CTO软考
51CTO学堂APP
51CTO学堂企业版APP
鸿蒙开发者社区视频号
51CTO软考题库
活动 短视频 专栏 极客Show 鸿蒙技术特刊

#DAYU200体验官#丢失儿童寻找系统 原创 精华

剩余价值
发布于 2022-7-6 12:33
浏览
6收藏
最新收录于
润和DAYU200体验官活动
查看专栏

丢失儿童寻找系统

项目背景

根据“团圆”系统数据显示，儿童失踪原因主要有被拐卖、离家出走、迷路走失、意外身亡等原因。走失事件往往容易转变为拐卖等恶劣的刑事案件，有很多孩子，或者遇到了拐卖儿童的人贩子，或者受到了意外伤害，最终给家庭带来毁灭性灾难。现在社会中层出不穷的骗入手段、骗子不断更新的骗人技巧，不得不让每一位孩子的家长担心自己孩子的安危。根据《中国走失人口白皮书(2020)》，在整个2020年期间，我国走失人次达到了100万。其中未成年人占7.4%，也就是说，儿童走失人口近74000人，而失踪后找回来的大概只占到0.1%。按照国务委员、公安部部长、国务院反拐部国际联席会议总召集人赵克志，公安部党委书记、分管日常工作的副部长王小洪部署要求，公安部决定自3月1日起至12月31日开展打击拐卖妇女儿童犯罪专项行动。我们的产品应运而生，能够帮助专项行动打出声威、打出实效，切实维护妇女儿童合法权益。

团队介绍

追寻者团队于2021年6月在郑州轻工业大学梅科尔工作室成立，致力于寻找丢失儿童，使其阖家团圆。团队成员之间优势互补、配合默契，分别负责算法设计、前后端开发、App开发、硬件开发，在各自负责的领域发光发热。在深度学习和机器视觉方面，本团队成员具有浓厚的兴趣和较为丰富的学习经验，致力于跨年龄人脸识别技术的学习和探索，将丢失儿童的识别和身份确认作为项目发展方向。身为大学生的我们将社会责任牢记心中，在努力提升自身知识储备和能力的同时，为寻找丢失儿童事业竭尽心力。梅科尔工作室的老师和同学们在极为有限的条件下让价值最大化，工作室在老龄化、老年人康复、特殊人群关爱等方向发展良好，总计参与到60余个医疗项目的联合创新开发中。
#DAYU200体验官#丢失儿童寻找系统-鸿蒙开发者社区

项目简介

项目采用pytorch和华为开源自研AI框架MindSpore，可以根据警方或他人提供的图片判断其是否为丢失儿童。同时还可以根据丢失儿童的时间长短，通过用户上传儿童的照片进行预估并生成当下的照片，更加便于家庭和警方寻找丢失儿童，帮助丢失儿童早日回归家庭。
项目主要分为算法端、硬件端、基于HarmonyOS的App以及Vue前端，主要用到的软件有pycharm、idea、anaconda等。
算法端分为跨年龄人脸识别算法和人脸变老预测算法。跨年龄人脸识别算法通过使用MTCNN（多任务卷积神经网络）设计三层级联架构的 CNN 算法进行检测，提取出不受年龄干扰的身份特征，以此达到跨年龄人脸识别。人脸变老预测算法以GAN 为基础，并按照年龄、性别和语义分割对其进行标记，预测一个人在未来的样貌，或者他在过去的样貌。
网页端是Vue前端，源代码在gitee上开源，用户可通过网站查看上传、搜寻以及查看丢失儿童信息，并且可以与我们进行联系和反馈。网页端偏向信息查看等功能，更多的操作需要进一步在App进行使用。
移动端目前为App。相对于微信小程序来说，App可以离线进行部分功能操作，提高了产品的适应面。通过网络连接将信息存储到服务器中，以达到多端信息互通。

技术架构

#DAYU200体验官#丢失儿童寻找系统-鸿蒙开发者社区

开发环境

DevEco Studio for OpenHarmony3.0.0.900
OpenHarmony版本：3.1_Release
开发板：DAYU200

开发过程

首页

#DAYU200体验官#丢失儿童寻找系统-鸿蒙开发者社区
hml源码：

<element name='comp' src='../../components/tabbar/tabbar.hml'></element>
<div class="container">
    <div class="text">
        <text>丢失儿童寻找</text>
    </div>
    <div class="container1">
        <swiper autoplay="true" class="swiper">
            <image src="{{$item}}" for="{{imageList}}" class="img"></image>
        </swiper>
    </div>
    <div class="text1">
        <div class="line_y"></div>
        <text>今日推荐</text>
    </div>
    <image class="img1" src="../../common/images/a1.jpg"></image>
    <image class="img1" src="../../common/images/a3.jpg"></image>
    <comp index="0"></comp>
</div>

css源码：

.container {
    flex-direction: column;
    align-items: center;
}
.text {
    display: flex;
    position: fixed;
    padding: 5px 250px 15px 251px;
    background-color: #000000;
}
.text text {
    margin-left: 75px;
    line-height: 50px;
    color: #FFFFFF;
    font-size: 24px;
    align-content: center;
}
.container1 {
    flex-direction: column;
    margin-top: 70px;
    width: 100%;
    display: flex;
    align-items: center;
}
.swiper {
    flex-direction: column;
    align-content: center;
    align-items: center;
    width: 100%;
    height: 270px;
    border: 1px solid #000000;
}
.img {
    object-fit: fill;
}
.text1 {
    margin-top: 6px;
    display: flex;
    align-items: center;
    position: relative;
    padding: 10px 10px 10px 12px;
}
.text1 text {
    margin-left: 10px;
    line-height: 30px;
    font-size: 25px;
    color: #656565;
}
.line_y {
    width: 4px;
    height: 60px;
    background-color: #09bb07;
}
.img1 {
    margin-top: 3px;
    object-fit: fill;
    height: 330px;
    border: 1px solid gray;
    padding: 1px;
}

js源码：

export default {
    data: {
        title: "",
        imageList:['/common/images/2.jpg','/common/images/1.jpg','/common/images/3.jpg']
    },
    onInit() {
        this.title = this.$t('strings.world');
    },
    swipeToIndex(index) {
        this.$element('swiperImage').swipeTo({index: index});
    }
}

信息上传

#DAYU200体验官#丢失儿童寻找系统-鸿蒙开发者社区
hml源码：

<element name='comp' src='../../components/tabbar/tabbar.hml'></element>
<div class="container">
    <div class="text">
        <text>丢失儿童寻找</text>
    </div>
    <text class="title">走失人员信息</text>
    <div class="input-item">
        <div class="color">
            <text class="input-title">姓名</text>
            <input class="input" type="text" placeholder="请输入文本"></input>
        </div>
    </div>
    <div class="input-item">
        <div class="color">
            <text class="length-title input-title">年龄</text>
            <input class="input" type="text" placeholder="请输入走失时的年龄" maxlength="20" showcounter="false"></input>
        </div>
    </div>
    <div class="input-item">
        <div class="color">
            <text class="input-title">性别</text>
            <div class="radio-div">
                <select @change="changeFruit">
                    <option value="bananaValue">
                        男
                    </option>
                    <option value="appleValue" selected="true">
                        女
                    </option>
                </select>
            </div>
        </div>
    </div>
    <div class="input-item">
        <div class="color">
            <text class="input-title">走失日期</text>
            <input class="input" type="date" placeholder="如：2021-11-27"></input>
        </div>
    </div>
    <div class="container2">
        <text class="title2">您的详细信息</text>
        <div class="input-item">
            <div class="color">
                <text class="input-title">姓名</text>
                <input class="input" type="text" placeholder="请输入文本"></input>
            </div>
        </div>

        <div class="input-item">
            <div class="color">
                <text class="input-title">性别</text>
                <div class="radio-div2">
                    <select @change="changeFruit">
                        <option value="bananaValue">
                            男
                        </option>
                        <option value="appleValue" selected="true">
                            女
                        </option>
                    </select>
                </div>
            </div>
        </div>
        <div class="input-item">
            <div class="color">
                <text class="input-title">走失人员与您的关系</text>
                <div class="checkbox-div">
                    <select @change="changeFruit">
                        <option value="bananaValue">
                            父子
                        </option>
                        <option value="appleValue" selected="true">
                            母子
                        </option>
                        <option value="pearValue">
                            父女
                        </option>
                        <option value="pearValue2">
                            母女
                        </option>
                    </select>
                </div>
            </div>
        </div>

        <div class="input-item">
            <div class="color">
                <text class="input-title">是否报警</text>
                <switch showtext="true" texton="是" textoff="否" checked="true" @change="switchChange">
                </switch>
            </div>
        </div>

        <div class="input-item">
            <div class="color">
                <text class="input-title">您的邮箱</text>
                <input class="input" type="email" placeholder="方便我们联系您"></input>
            </div>
        </div>

        <div class="input-item">
            <div class="color">
                <text class="message-title input-title">请输入手机号</text>
                <input class="message-input" type="number" placeholder="请输入手机号码"></input>
            </div>
        </div>


        <div class="color">
            <input class="message-input" type="number" placeholder="请输入验证码"></input>
            <input class="message-button" type="button" value="获取验证码"></input>
        </div>


    </div>

    <div class="input-item">
        <div class="color">
            <image class="img" src="../../common/images/camera.png"></image>
            <button class="message-button" type="capsule" value="上传图片" @click="jump"></button>

        </div>
    </div>
    <div class="input-item">
        <input class="confirm-button" type="button" value="确认"></input>
        <div class="text2">致力于帮助丢失儿童家庭寻找丢失儿童，让宝贝早日回家</div>
        <button class="message-button" type="capsule" value="提交" @click="jump2"></button>
    </div>

    <comp index="1"></comp>

</div>

css源码：

.container {
    width: 100%;
    flex-direction: column;
    padding: 0 0 5% 0;
    background-color: #F7F8FA;
}
.container2{
    width: 100%;
    flex-direction: column;
    padding: 0 0 5% 0;
    background-color: #F7F8FA;
}
.radio{
    font-size: 24px;
}
.title {
    color: #6D7278;
    font-size: 24px;
    font-family: HarmonyHeiTi;
    margin: 80px 0 10px 14px;
}
.title2 {
    color: #6D7278;
    font-size: 24px;
    font-family: HarmonyHeiTi;
    margin: 20px 0 10px 14px;
}
.color {
    margin: 0 4% 0 4% ;
    width: 92%;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
.title,.input-title,.message-title,.length-title {
    width: 32%;
}
.input-item {
    width: 100%;
}
.input-title {
    color: #121317;
    font-family: HarmonyHeiTi;
}
.input {
    width: 70%;
}
.message-input {
    width: 45%;
}
.message-button {
    font-size: 15px;
    width: 31%;
    height: 30px;
    border-radius: 5px;
    margin-top: 5px;
}
.checkbox-div,.radio-div,.radio-div2 {
    padding: 0 38px 0 2px;
    font-size: 20px;
}
.search-item {
    border-radius: 25px;
    margin:6px 4% 6px 4%;
}
.search {
    width: 80%;
    height: 33px;
}
.button {
    width: 88px;
    height: 27px;
    margin: 4px 4px 4px 0;
}
.search,.message-input,.input,.input-title {
    font-size: 20px;
}
.input-item,.input,.message-input {
    background-color: white;
}
.input,.message-input,.search {
    placeholder-color: rgba(0,0,0,0.1);
}
.message-button,.button {
    background-color: #317AFF;
    font-size: 20px;
}
.search,.search-item {
    background-color: #F1F3F5;
}
.checkbox {
    color: #317AFF;
}
.confirm-button{
    margin-top: 20%;
    margin-left: 30% ;
    width: 60%;
    background-color: #317AFF;
    font-size: 20px;

}
.message-button{
    margin-left: 10% ;
}
switch{
    texton-color:#002aff;
    textoff-color:silver;
    text-padding:15px;
}
.img{
    width: 20%;
    margin-top: 5px;
    margin-left: 20px;
}
.text2 {
    margin-top: 70px;
    display: flex;
    align-items: center;
    position: relative;
    padding: 40px 10px 10px 12px;

}
.text2 text {
    font-size: 20px;
    color: #000000;
}

.text {
    display: flex;
    position: fixed;
    padding: 5px 250px 15px 251px;
    background-color: #000000;
}
.text text {
    margin-left: 75px;
    line-height: 50px;
    color: #FFFFFF;
    font-size: 24px;
    align-content: center;
}

js源码：

import router from '@system.router';
export default {
    data: {
        title: ""
    },
    onInit() {
        this.title = this.$t('strings.world');
    }，
    jump(){
        router.push({
            uri: 'pages/takePhoto/index',
        });

    },
    jump2(){
        router.push({
            uri: 'pages/submit/index',
        });

    }
}

更多功能

#DAYU200体验官#丢失儿童寻找系统-鸿蒙开发者社区
hml源码：

<element name='comp' src='../../components/tabbar/tabbar.hml'></element>
<div class="container">
    <div class="text">
        <text>丢失儿童寻找</text>
    </div>
    <text class="title">功能</text>
    <text class="title1">服务电话：4000000000</text>
    <image class="img" src="../../common/images/000.png"></image>
    <comp index="2"></comp>
</div>

css源码：

.container {
    flex-direction: column;
    align-items: center;
}
.text {
    display: flex;
    position: fixed;
    padding: 5px 259px 15px 260px;
    background-color: #000000;
}
.text text {
    margin-left: 75px;
    line-height: 50px;
    color: #FFFFFF;
    font-size: 21px;
}

.title {
    margin-top: 130px;
    margin-right: 200px;
    font-size: 33px;
}
.title1 {
    margin-top: 5px;
    margin-right: 65px;
    font-size: 19px;
    color: #888888;
}
.img {
    padding: 0px 10px 0px 10px;
    margin-top:50px;
    object-fit: fill;

}

js源码：

export default {
    data: {
        title: ""
    },
    onInit() {
        this.title = this.$t('strings.world');
    }

}

关于我们

#DAYU200体验官#丢失儿童寻找系统-鸿蒙开发者社区
hml源码：

<element name='comp' src='../../components/tabbar/tabbar.hml'></element>
<div class="container">
    <div class="text">
        <text>丢失儿童寻找</text>
    </div>
    <image class="img" src="../../common/images/gy1.jpg"></image>
    <div class="text1">
        <div class="line_y"></div>
        <text>团队介绍</text>
    </div>
    <div class="text2">
        <text>致力于帮助丢失儿童家庭寻找丢失儿童，让宝贝早日回家。

统一服务电话：

                 400-0000-000</text>
    </div>
    <button class="button" value="点击拨打客服电话" onclick="calling"></button>
    <comp index="3"></comp>
</div>

css源码：

.container {
    flex-direction: column;
    align-items: center;
}
.text {
    display: flex;
    position: fixed;
    padding: 5px 259px 15px 260px;
    background-color: #000000;
}
.text text {
    margin-left: 75px;
    line-height: 50px;
    color: #FFFFFF;
    font-size: 21px;
}
.img {
    margin-top: 71px;
}
.text1 {
    height: 60px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    position: relative;
    padding: 10px 10px 10px 12px;
    background-color: #ccc;
}
.text1 text {
    margin-left: 10px;
    line-height: 30px;
    font-size: 25px;
    color: #656565;
}
.line_y {
    width: 4px;
    height: 35px;
    background-color: #09bb07;
}
.text2 {
    display: flex;
    align-items: center;
    position: relative;
    padding: 40px 10px 10px 12px;
}
.text2 text {
    font-size: 21px;
    color: #656565;
}
.button {
    margin-top: 20px;
    border-radius: 7px;
    margin-bottom: 150px;
    width: 100%;
    height: 55px;
    border: 1px solid #ccc;
    background-color: #FFFFFF;
    text-color: #1C1C1C;
    font-size: 25px;
}

js源码：

export default {
    data: {
        title: ""
    },
    onInit() {
        this.title = this.$t('strings.world');
    }
}

导航栏

export default [
    {
        img:'common/images/icon1.png',
        simg:'common/images/icon2.png',
        name:'首页'
    },
    {
        img:'common/images/upload.png',
        simg:'common/images/upload-1.png',
        name:'信息上传'
    },
    {
        img:'common/images/icon3.png',
        simg:'common/images/icon4.png',
        name:'更多功能'
    },
    {
        img:'common/images/us.png',
        simg:'common/images/us-1.png',
        name:'关于我们'
    },
]

演示视频

目前项目基本框架已经实现，还有部分功能在完善中，近期会继续更新文档。

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任
分类
卡片开发
三方库
IDE
标签
OpenHarmony
entry-default-signed.hap 2.64M 52次下载
已于2022-11-22 10:45:24修改
赞 30
收藏 6
回复
举报
18条回复
按时间正序
/
按时间倒序
mb62c57fef1cae7
mb62c57fef1cae7

666

 

1
回复
2022-7-6 20:29:19
CR822
CR822

666

1
回复
2022-7-6 20:35:49
逝缘Dreamer
逝缘Dreamer

不错，赞！

2
回复
2022-7-6 20:54:50
wx62c58d8e32b70
wx62c58d8e32b70

优秀的技术

1
回复
2022-7-6 21:28:45
wx62c59526d755e
wx62c59526d755e

厉害👍🏻

回复
2022-7-6 21:59:31
喜静
喜静

很不错！

回复
2022-7-6 22:06:29
mb62c596ff9f6f1
mb62c596ff9f6f1

膜拜666

回复
2022-7-6 22:08:31
wx62c59dfa425b8
wx62c59dfa425b8

这个代码真不错啊

 

回复
2022-7-6 22:38:22
李琎
李琎

立意很好

回复
2022-7-7 00:26:31
Bittersweet.
Bittersweet.

好好好👍🏻

回复
2022-7-7 00:30:05
mb62c5b97e333c8
mb62c5b97e333c8

yyds👍

回复
2022-7-7 00:35:19
wx62c61a41e1dd5
wx62c61a41e1dd5

这个技术好先进。

回复
2022-7-7 07:28:20
郑州在逃大学生
郑州在逃大学生

哇，真的是太牛了

回复
2022-7-7 08:12:58
mb62c637c3a68fa
mb62c637c3a68fa

创意很不错

回复
2022-7-7 09:33:57
wx62c63a1e05241
wx62c63a1e05241

好好好

回复
2022-7-7 09:47:03
Tuer白晓明
Tuer白晓明

👍👍👍👍👍

回复
2022-7-7 12:17:05
梅科尔工作室lnn
梅科尔工作室lnn

好棒！

回复
2022-7-7 17:21:39
梅科尔IoT阿阳
梅科尔IoT阿阳

太棒啦！加油加油

回复
2022-7-7 20:19:21
回复
    相关推荐
    剩余价值
    这个用户很懒，还没有个人简介
    帖子
    视频
    声望
    粉丝
    热门推荐
    OpenHarmony之跟随弹窗CustomDialog（详细代码实现+运行实例，Let Go） 10回复
    按钮颜色渐变和阴影效果 5回复
    服务卡片开发指南：打造更便捷的用户体验 （基于ArkTs UI 的卡片开发）基础步骤 3回复
    深入解析：ArkUI与Axios构建安全高效的登录注册流程 3回复
    图片滑动和点击切换效果和轮播组件Swiper 2回复
    相关问题
    #DAYU200体验官# 关于rk3568烧录到3.1 Release时的零碎问题与解答Q and A 1回答
    LubanCat刷Dayu200镜像后不断重启 0回答
    dayu200 HDMI接口如何适配大屏显示器 1回答
    dayu200开发板如何录屏，或者投屏 0回答
    关于ohos rk3568（dayu200） hdf wifi驱动的疑问 2回答
    社区精华内容

    目录