天天看點
傳回

#DAYU200體驗官#基于鴻蒙的惡性皮膚惡性良性腫瘤檢測系統

“1+1>2”—DAYU200開發闆和惡性皮膚惡性良性腫瘤檢測系統的有效融合

項目背景

惡性皮膚惡性良性腫瘤，是一種起源于表皮基底細胞或毛囊外根鞘的低度惡性惡性良性腫瘤。臨床有兩種類型，即基底細胞癌、鱗狀細胞癌，均來源于角化細胞。常見的惡性皮膚惡性良性腫瘤有Bowen病、Paget病、基底細胞癌、鱗狀細胞癌、惡性黑素瘤等。惡性皮膚惡性良性腫瘤大部分生長于原發部位，但也有轉移和不明方向的惡性良性腫瘤發生。惡性皮膚惡性良性腫瘤的發生率和死亡率逐年升高，通常診斷出患有惡性皮膚惡性良性腫瘤的患者年齡在65-74歲，惡性皮膚惡性良性腫瘤造成患者死亡的高發年齡為75-84歲。

惡性皮膚惡性良性腫瘤多發生于皮膚，也可見于黏膜和内髒，如果在患病初期就進行治療，那麼5年之内的存活率可以顯著提高7倍。目前醫院臨床主要依靠皮膚鏡或者病理組織切片來确診惡性皮膚惡性良性腫瘤。但這種方式存在一定的問題，比如皮膚鏡中圖像對比度低，肉眼難以區分；人工檢查費時費力；專家數量不足，偏遠地區醫患比達1:70000等。

團隊介紹

識瘤者團隊是一家專注于惡性皮膚惡性良性腫瘤識别技術研發的在校創新創業團隊，旨在利用我們的裝置幫助患者更早的發現病情，為國家的基礎醫療做出自己的貢獻。

識瘤者團隊來自于梅科爾工作室，目前梅科爾工作室已經形成了一個跨多專業深入融合的平台，研究方向覆寫醫療器械、五軸數 控機床裝備研發、3D列印、軟體機器人、人工智能、機器人、大資料、物聯網、新能源等多個領域，目前有10個研發小組和上百個在研項目。并且工作室還多次承擔國家級大學生創新創業項目，參加各個級别比賽，至今獲得國際獎項27項、國家級獎項158項、省級獎項412項。

::: hljs-center

#DAYU200體驗官#基于鴻蒙的惡性皮膚惡性良性腫瘤檢測系統

:::

應用場景

面向客戶分為大三類：醫院及醫保公司、醫療軟體服務商、個人使用者。

  1. 針對醫院及醫保公司提供兩種解決方案，一是由Qt應用程式主導的S款售賣模式，二是由DAYU200開發闆主導H款售賣模式。兩者都使用皮膚鏡采集圖像，圖像展示在裝置界面，在端側對圖檔進行預處理，調用部署到ESC的模型識别病竈區域，将資料歸檔至資料庫和OBS對象存儲服務中，持久化存儲；
  2. 針對醫療軟體服務商提供API，識瘤者将惡性皮膚惡性良性腫瘤圖像噪聲消除、紋理特征提取分割能力作為後端服務，供客戶調用模型進行二次開發；

  3. 針對個人使用者提供鴻蒙APP自測、檢視曆史診療記錄等功能。

    本項目采用MaskRCNN算法，在ModelArts平台對皮膚病圖像訓練，将訓練好的模型部署到華為雲ECS伺服器中。

設計思路

本檢測系統首先采集病竈區域圖像資訊，随後對圖像進行預處理，即去毛和濾波等處理，接着采用對比度調整、移動裁剪和顔色平衡調整等方法進行資料增強，随後進行模型的訓練、封裝，模型部署後，通過采集患者的資訊，可以檢測相應的圖檔及回報相應的分級檢測結果，如圖所示：

::: hljs-center

#DAYU200體驗官#基于鴻蒙的惡性皮膚惡性良性腫瘤檢測系統

:::

在DAYU200開發闆上，也有較好的表現力：

登入界面

hml源碼

<div class="container">

    <image src="../../common/image_st/logo.png" class="image-mode" ></image>

    <div class="content">
        <input id="id" class="input" type="number" value="{{id}}" maxlength="20" enterkeytype="next"
               placeholder="手機号/郵箱/賬号" onchange="idChange" >
        </input>
        <input id="password" class="input" type="password" value="{{password}}" maxlength="20" enterkeytype="done"
                placeholder="請輸入密碼" onchange="pswChange">
        </input>

    <!--        <div>-->
    <!--            <button class="button" type="capsule" value="登入" onclick="login"></button>-->
    <!--            <button class="button" type="capsule" value="注冊" onclick="register"></button>-->
    <!--        </div>-->
        <div class="div_button">
            <div class="login_button"  onclick="login">
                <text class="div_login_button_text">
                    登入
                </text>
            </div>
            <div class="register_button" onclick="register">
                <text class="div_register_button_text">
                    新增賬號
                </text>
            </div>
        </div>

    </div>

    <div class="problem_privacy">
        <button class="problem" type="text" value="幫助"
                @click="clickfun('help')"></button>
        <button class="privacy" type="text" value="隐私聲明"
                @click="clickfun('privacy statement')"></button>
    </div>
</div>

CSS源碼

.container {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.image-mode{
    margin-top: 100px;
    margin-bottom: 30px;
    width: 80%;
/*    object-fit: cover;*/
    height: 190px;
}

.title {
    margin-top: 10px;
    font-size: 30px;
    color: #1216D8;
}

/* 輸入框 */
.content {
    margin-left: 10%;
    margin-right: 10%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.input {
    placeholder-color: gray;
    margin-top: 20px;
    justify-content: center;
    align-items: center;
}

/* 對class#EB0F54n"的元件設定樣式 */
.button {
    width: 100px;
    height: 50px;
    background-color: #4c5cf1;
    font-size: 20px;
    text-color: #FFFFFF;
    margin: 20px;
    margin-top: 10px;
}


.problem_privacy {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 30%;
}

.div_button {
/*    width: 90%;*/
    flex-direction: column;  /* 按照列排 */
    align-items: center;  /* 在X軸方向上居中 */
    top:50px;
}

.div_login_button_text {
    left: 250px;
    top: 25px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 40px;
    font-weight: normal;
    color: #FFFFFF;
}

.div_register_button_text {
    left: 210px;
    top: 25px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 40px;
    font-weight: normal;
    color: #5868E8;
}

/* 對class#EB0F54n"的元件設定樣式 */
.login_button {
    border-radius: 50px;
    width: 100%;
    height: 100px;
    background-color: #5868E8;
    margin-bottom: 16px;
}

/* 對class#EB0F54n"的元件設定樣式 */
.register_button {
    border-radius: 50px;
    width: 100%;
    height: 100px;
    background-color: #e0dad4;
}

js源碼

import router from '@system.router';

export default {
    login() {
        router.push ({
            uri:'pages/first/first', // 跳轉到注冊頁面
        })
    },
    register(){
      router.push({
          uri:'pages/register/register',
      })
    },
    data: {
        title: "",
    },
}

注冊界面

hml源碼

<div class="container">
    <image src="../../common/image_st/logo.png" class="image-mode" ></image>

<!-- 手機号和密碼 -->
    <div class ="input-container">
        <input class="input-text" type="number" placeholder="請輸入手機号" onchange="getPhone"></input>
    </div>

    <div class ="input-container">
        <input class="input-text" type="password" placeholder="請輸入密碼" onchange="getPsw"></input>
    </div>

    <div class ="input-container">
        <input class="input-text" type="text" placeholder="請輸入姓名" onchange="getName"></input>
    </div>

    <div class ="input-container">
        <input class="input-text" type="number" placeholder="請輸入身份證号" onchange="getIdNumber"></input>
    </div>
<!--    <div class ="input-container">-->
<!--        <input class="input-text" type="number" placeholder="短信驗證碼" onchange="getName"></input>-->
<!--        <button type="capsule" value="擷取驗證碼" class="idbtn">-->
<!--        </button>-->
<!--    </div>-->

<!-- gender -->
    <div class ="item-container1">
        <text class="item-title">性别</text>
        <div>
            <label target="radio1" style="font-size: 40px;">男:</label>
            <input id="radio1" type="radio" name="radio" value="male" onchange="getMaleGender" checked="true"></input>
            <label target="radio2" style="font-size: 40px;">女:</label>
            <input id="radio2" type="radio" name="radio" value="female" onchange="getFemaleGender"></input>
        </div>
    </div>

<!-- 生日 -->
    <div class="item-container2">
        <text class="item-title">生日</text>
        <div class="item-content">
            <picker type="date" end="2021-10-01" selected="1990-01-01" value="{{date}}" onchange="getDate"></picker>
        </div>
    </div>

<!-- area -->
    <div class ="item-container3">
        <text class="item-title">地區</text>
        <select class="select" onchange="getArea">
            <option value="亞洲" selected="true">亞洲</option>
            <option value="歐洲">歐洲</option>
            <option value="美洲">美洲</option>
            <option value="非洲">非洲</option>
            <option value="大洋洲">大洋洲</option>
        </select>
    </div>

    <div class="content1_1">
        <div class="button" onclick="onRegister">
            <text class="button_text">注冊</text>
        </div>
        <div class="button" onclick="last">
            <text class="button_text">傳回</text>
        </div>
    </div>
    <dialog class="sureDialog" id="hintDialog">
        <div class="dialog-div">
            <text class="text">确定注冊?</text>
            <div class="dialog-div">
                <button type="text" value="确定" onclick="sethintDialog" class="btn-txt"></button>
            </div>
        </div>
    </dialog>

</div>

CSS源碼

@import "../../common/css/common.css";
.container {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.page-title-wrap {
    padding-top: 30px;
    justify-content: center;
}

.image-mode{
    margin-end: 50px;
    margin-top: 50px;
    margin-bottom: 30px;
    width: 80%;
    object-fit: cover;
}

.input-container{
    justify-content: center;
    margin-bottom: 30px;
}
.input-text {
    placeholder-color: gray;
    margin-left: 30px;
    margin-right: 30px;
    height: 100px;
}
.idbtn{
    width: 200fp;
    margin-right: 30px;
    font-size: 15px;
    background-color: #2d6dea;
}
.item-container {
    margin-left: 30px;
    margin-bottom: 20px;
}
.item-container1 {
    margin-left: -130px;
    margin-bottom: 20px;
}
.item-container2 {
    margin-left: -160px;
    margin-bottom: 20px;
}
.item-container3 {
    margin-left: -190px;
    margin-bottom: 20px;
}


.item-title {
    font-size: 40px;
    padding-left: 30px;
    padding-right: 20px;
    color: #aaaaaa;
    text-align: left;
}

.item-content {
    width: 300px;
    height: 60px;
    border-radius: 30px;
    background-color: aliceblue;
    justify-content: center;
    text-align: left;
}


.select{
    text-align: left;
}

.content1_1 {
    margin-top: 10px;
    justify-content: center;
    align-items: center;
}

/* 對class#EB0F54n"的元件設定樣式 */
.button {
    width: 200px;
    height: 100px;
    background-color: #5768e4;
    font-size: 20px;
    text-color: #FFFFFF;
    margin: 10px;
    border-radius: 50px;
}

.button_text {
    left: 60px;
    top: 27px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 40px;
    font-weight: normal;
    color: #FFFFFF;
}

.sureDialog{
    height: 30%;
    width: 80%;
    align-content: center;
}

.dialog-div{
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
    margin-bottom: 20px;
}

js源碼

import storage from '@system.storage';
import prompt from '@system.prompt'
import router from '@system.router'
import http from '@ohos.net.http'
export default {
    data: {
        phone: '',
        psw: '',
        name: '',
        idNumber: '',
        date: '1990-01-01',
        gender: 'male',
        area: '亞洲',
    },

    getPhone(e) {
        this.phone = e.value;
        console.info("phone=" + this.phone)
    },

    getPsw(e){
        this.psw = e.value;
    },

    getName(e){
        this.name = e.value;
    },

    getIdNumber(e){
        this.idNumber = e.value;
    },

    getDate(e) {
        this.date = e.year + '-' + (e.month + 1) + '-' + e.day;
        console.info("date=" + this.date)
    },

    getFemaleGender(e) {
        if (e.checked) {
            this.gender = 'female'
        }
    },

    getMaleGender(e) {
        if (e.checked) {
            this.gender = 'male'
        }
    },

    getArea(e) {
        this.area = e.newValue;
        console.info("area=" + this.area)
    },

    onRegister() {
        const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
        if(!reg.test(this.phone)){
            prompt.showToast({  // 提示請求錯誤
                message: '手機号非法',
                duration: 3000,
            })
            return;
        }

        if (this.psw.length < 6) {
            prompt.showToast({
                message: this.$t('密碼至少為6位')
            })
            return;
        }

        if (this.name.length == 0) {
            prompt.showToast({
                message: this.$t('姓名不能為空')
            })
            return;
        }

        if (this.date.length == 0) {
            prompt.showToast({
                message: this.$t('日期不能為空')
            })
            return;
        }

        let _IDRe18 = /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
        let _IDRe15 =  /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/

        if(!_IDRe18.test(this.idNumber) && !_IDRe15.test(this.idNumber)){
            prompt.showToast({  // 提示請求錯誤
                message: '身份證号非法'+this.idNumber,
                duration: 3000,
            })
            return;
        }
        this.$element('hintDialog').show()
    },

    sethintDialog(e) {
        this.$element('hintDialog').close()
        // let聲明的變量的作用域是塊或者子塊
        let httpRequest = http.createHttp();
        // 建立一個http，裡面包括發起請求、中斷請求、訂閱/取消訂閱HTTP Response Header 事件。
        // 每一個HttpRequest對象對應一個Http請求。如需發起多個Http請求，須為每個Http請求建立對應HttpRequest對象。
        //傳回一個HttpRequest對象，裡面包括request、destroy、on和off方法。

        let url = "http://124.70.109.103:8000/userRegister/";

        httpRequest.request(url, {
            // 注意請求方法：http.POST
            method: 'POST',
            extraData: {
                phone: this.phone,
                password: this.psw,
                name: this.name,
                gender: this.gender,
                date: this.date,
                idNumber: this.idNumber,
            },
        }, (err, data)=> {  // 判斷是否請求成功
            if (!err) {  // 請求成功
                this.returnContent = JSON.parse(data.result);  //JSON.parse(字元串)——将字元串轉換成json資料格式
                var code = this.returnContent.code;  //使用json将province指派給code
                if(code==400){
                    prompt.showToast({  // 提示請求錯誤
                        message: this.returnContent.errmsg,
                        duration: 3000,
                    })
                }

                if(code==200){

                    storage.set({
                        key: 'id',
                        value: this.phone,
                    });

                    storage.set({
                        key: 'psw',
                        value: this.psw,
                    });

                    router.push ({
                        uri:'pages/index/index',  //跳轉到指定頁面
                    })
                    prompt.showToast({  // 提示資訊
                        message: this.returnContent.message,
                        duration: 3000,
                    })
                }

            } else {  // 請求失敗
                prompt.showToast({
                    message: data.result,
                    duration: 3000,
                });
            }
        })
    },

    last() {
        router.push({
            uri:'pages/login/login', // 指定要跳轉的頁面
        })
    },


    //    // 生日選擇器
    //    chooseBirthday(e) {
    //        let month = (e.month + 1) + "";
    //        if (month.length == 1) {
    //            month = "0" + month;
    //        }
    //        let day = e.day + "";
    //        if (day.length == 1) {
    //  tex          day = "0" + day;
    //        }
    //        let birthday = e.year + "-" + month + "-" + day;
    //        this.birthday = birthday;
    //        this.birthdayVal = birthday;
    //    },

}

首頁界面

::: hljs-center

#DAYU200體驗官#基于鴻蒙的惡性皮膚惡性良性腫瘤檢測系統

:::

hml源碼

<!--<element name='comp' src='../../pages/nav/nav.hml'></element>-->
<element name="slz-tabber" src="../../common/components/tabber/tabber.hml"></element>
<div id="wrapper">

    <div class="input1">/*搜尋服務*/
        <search hint="智慧醫療" searchbutton="搜尋" @search="search"></search>
    </div>

    <div class="containerC">/*提示服務*/
        <swiper id="swiperImage" class="swiper-style">
            <image src="{{$item}}" class="image-mode" for="{{imageList}}"></image>/*輪播圖*/
        </swiper>
    </div>

    <div class="container">
        <text class="title">點選了解相關資訊</text>
        <list class="list">
            <list-item class="listItem" onclick="text1">
                <div>
                    <image src="../../common/images/1.png" class="tp"></image>
                    <div class="text1">
                        <text class="text2" >什麼是黑色素瘤</text>
                        <text class="text3">具體展開談論</text>
                    </div>
                </div>
            </list-item>
            <list-item class="listItem" onclick="text2">
                <div>
                    <image src="../../common/images/2.png" class="tp"></image>
                    <div class="text1">
                        <text class="text2" >黑色素瘤早知道</text>
                        <text class="text3">早發現，早就診</text>
                    </div>
                </div>
            </list-item>
            <list-item class="listItem" onclick="text3">
                <div>
                    <image src="../../common/images/3.png" class="tp"></image>
                    <div class="text1">
                        <text class="text2" >黑色素瘤耐受性</text>
                        <text class="text3">耐受性發生的新機制</text>
                    </div>
                </div>
            </list-item>
            <list-item class="listItem" onclick="text4">
                <div>
                    <image src="../../common/images/4.png" class="tp"></image>
                    <div class="text1">
                        <text class="text2" >黑色素瘤的免疫治療</text>
                        <text class="text3">黑色素瘤患者指南</text>
                    </div>
                </div>
            </list-item>
        </list>
    </div>
    <slz-tabber index="0"></slz-tabber>
</div>

CSS源碼

#wrapper {
    flex-direction: column;
}

#div7 {
    width: 100%;
    height: 50px;
    background-color: #bb96f3;
}

.input1{
    margin-top: 30%;
    width: 90%;
    height: 100px;
    margin-left: 5%;
}

.containerC{
    width: 90%;
    height: 200fp;
    margin-left: 5%;
}

.swiper-style {
    indicator-color: #8388f8;/*輪播圖*/
    indicator-selected-color: #9ebbde;
    indicator-size: 5px;
    margin-top: 15px;
}

.image-mode{
    object-fit: contain;
}

.remin{
    width: 90%;
    margin-left: 7%;
    margin-top: 2%;
    border-color: black;
    border-width: 2px;
}

.ld{
    top: 7px;
    width: 40px;
    height: 40px;
}

.ts{
    width:80%;
    text-align: center;
}

.introduce{
    font-size: 25px;
    font-family: HYQiHei-65S;
    margin-top: 3px;
    padding: 0px;
}

.tp{
    width: 200px;
    height: 150px;
    border-radius: 5px 5px 5px 5px;
    box-shadow:  1px 1px 1px 1px #d6d6d6;
    margin-right: 10px;
}

.container {
    flex-direction: column;
    width: 100%;
}

.title{
    height: 50px;
    font-size: 25px;
    color: grey;
    margin-top: 0px;
    margin-left: 30px;
}

.text1{
    flex-direction: column;
    margin-left: 12px;
    width: 70%;
    text-align: left;
}

.text2{
    font-size: 23fp;
    display: grid;
}

.text3{
    font-size: 20fp;
    font-weight:500;
    color: darkgrey;
    width:237px;
    display: grid;
}

.list{
    width: 96%;
    margin-left: 5%;
/*    height: 1000px;*/
/*    columns: 1;*/
}

.listItem{
    width: 100%;
    height: 200px;
    border-bottom: 1px solid #DEDEDE;
    align-items: center;
    font-size: 20px;
}

js源碼

import router from '@system.router';

export default {
    launch() {
        router.push ({
            uri1:'pages/page2/page2', // 指定要跳轉的頁面
        })
    },
    by() {
        router.push ({
            uri:'pages/page1/page1', // 跳轉到注冊頁面
        })
    },
    text1() {
        router.push ({
            uri:'pages/text1/text1', // 跳轉到注冊頁面
        })
    },
    text2() {
        router.push ({
            uri:'pages/text2/text2', // 跳轉到注冊頁面
        })
    },
    text3() {
        router.push ({
            uri:'pages/text3/text3', // 跳轉到注冊頁面
        })
    },
    text4() {
        router.push ({
            uri:'pages/text4/text4', // 跳轉到注冊頁面
        })
    },
    data: {
        title: "",

        fresh:false,
        //        descriptionFirstParagraph:'右上方進行拍照識别，分級診療。\n下方是一下關于黑色素瘤的知識。',
        //不能大寫
        //輪播圖檔
        imageList: ['/common/images/p11.png', '/common/images/p12.png', '/common/images/p13.png', '/common/images/p14.png', '/common/images/p15.png'],
        scrollAmount: 5,
        loop: -1,
        marqueeDir: 'left',
        //        marqueeCustomData: '右上方進行拍照識别，進行分級診療。\n下方是一下關于黑色素瘤的知識。',
        //将["","","","",""...]結構的資料轉化為[["","",""],["",""],["","",""]...]結構
        //       ["one","two"],
        datas:[
            ["three","four","five"],
            ["six","seven"],
            ["eight","nine","ten"]]

    },
    //輸入框内容改變時執行
    searchChange(e){
        //将輸入框中的值賦給變量 id
        this.id = e.value;
    },
    closeSecond(e) {
        this.second = false;
    }
}

科普文章

::: hljs-center

#DAYU200體驗官#基于鴻蒙的惡性皮膚惡性良性腫瘤檢測系統
#DAYU200體驗官#基于鴻蒙的惡性皮膚惡性良性腫瘤檢測系統

:::

部分代碼

hml源碼

<div id="wrapper">

    <div id="div1">
        <image id="image0" src="../../common/images/8.png" onclick="back"></image>
    </div>

    <text id="text1">什麼是黑色素瘤？</text>
    <div class="author">
        <text id="text3">黃園清</text>
        <text id="text4">2022-03-07-19：56</text>
    </div>

    <text id="text5">
        我們在之前的欄目中，介紹過皮膚癌的相關資訊，今天，我們來具體展開談論一下，皮膚癌中惡性程度很高的一個種類——黑色素瘤。
        黑色素瘤，又稱惡性黑色素瘤，是一種從黑色素細胞發展而來的癌症，是皮膚癌中罕見的癌症。好發于皮膚但也可能出現在口腔、腸道或眼睛中。女性患者的黑色素瘤最常出現在腿，而男性患者則最常出現在背部。有時黑色素瘤是由痣轉變發展而來，有這種轉變的痣外觀上的改變包括尺寸變大、邊緣變得不規則、顔色改變、發癢、或皮膚破壞。</text>
    <image id="image3" src="../../common/images/7.png"></image>

    <div id="div3">
        <text id="text2">對于膚色較淺的人而言，紫外線暴露是造成黑色素瘤的主因。太陽或日曬床都是可能的紫外線來源。大約有25%的黑色素瘤是從痣發展而來。有很多痣、家中曾有人得過黑色素瘤，以及免疫力低下的人，罹患黑色素瘤的風險都較高。一些罕見的基因缺陷，例如着色性幹皮症，也會增加罹患的風險。診斷方法是對可疑的皮膚病變部位進行切片檢查。
            避免紫外線暴露以及使用防曬油可以預防黑色素瘤的産生。治療方法通常是手術切除。對于黑色素瘤較大的病患，會檢測鄰近的淋巴結來判斷是否發生轉移。若沒有轉移的話大部分的病患可被治愈。對于黑色素瘤已發生轉移的病患，免疫療法、生物性治療、放射線治療或化學治療可能可以增加存活率在美國，病患在接受治療後，若隻有局部病變五年存活率為98%，若已發生轉移，五年存活率則為17%。複發或轉移的可能性取決于該黑色素瘤厚度、細胞分裂速度、以及覆寫其上的皮膚是否被破壞，近年發展的免疫療法對于該病症頗有效果，能夠提高治愈率。</text>
    </div>

    <image id="image1" src="../../common/images/11.png"></image>

</div>

CSS源碼

#wrapper {
    flex-direction: column;
    margin-left: 3%;
    margin-right: 3%;
    height: 3200px;
}

#div1 {
    width: 100px;
    height: 100px;
}

#image0 {
    width: 90px;
    height: 90px;
    top: 10px;
    right: -10px;
}

#image2 {
    height: 40px;
    top: 15px;
    right: -250px;
}

#text1 {
    font-size: 25fp;
    margin-bottom: 10px;
}

.author {
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 10px;
}

#text3 {
    font-size: 40px;
    color: rgba(0,0,0,0.56);
    margin-right: 50px;
}

#text4 {
    font-size: 20px;
    color: rgba(0,0,0,0.56);
}

#text5 {
    font-size: 40px;
}

#image3 {
    width: 95%;
    height: 400px;
/*    top: -150px;*/
}

#div3 {
    height: 1300px;
}

#text2 {
/*    width: 335.518308406395px;*/
/*    height: 996.6529138731304px;*/
/*    top: -150px;*/
    right: -10px;
    font-size: 40px;
}

#image1 {
/*    width: 350px;*/
    width: 95%;
    height: 400px;
}

js源碼

import router from '@system.router';
// xxx.js
export default {
    data: {
        title: 'World'
    },

    back(){
        router.push ({
            uri:'pages/first/first', // 跳轉到注冊頁面
        })
    }

}

曆史記錄

::: hljs-center

#DAYU200體驗官#基于鴻蒙的惡性皮膚惡性良性腫瘤檢測系統

:::

hml源碼

<element name="slz-tabber" src="../../common/components/tabber/tabber.hml"></element>
<div class="container">
<!--    </div>-->
        <list class="listA">
            <list-item-group>
                <list-item><text class="groupA">2022-03-21 09:04:58</text></list-item>
                <list-item>
                    <div class="container_1">
                        <div id="div1">
                            <text id="text2">結果與分析</text>
                        </div>
                        <div id="div3">
                            <div id="div5">
                                <text id="text3">皮膚病病竈\r\n區域拟合圖</text>
                            </div>
                            <image id="image2" src="../../common/image_a/1.png"></image>
                        </div>
                        <div class="z1">
                            <image id="image3" src="../../common/image_a/a.bmp"></image>
                            <text id="text4">檢測報告</text>
                        </div>
                        <div class="z2">
                            <div class="z3">
                                <text id="text5">
                                    類别：色素性皮膚病
                                </text>
                            </div>
                            <div class="z4">
                                <image id="image5" src="../../common/image_a/2.png"></image>
                            <!--                        <image id="image5" src="data:image/jpg;base64,{{ $item.detection_result_img}}"></image>-->
                                <div class="z5">
                                    <text id="text6">置信度：0.9846</text>
                                    <slider id="slider1" value="984.6"></slider>
                                </div>
                            </div>
                        <!--                    <image id="image5" src="common/images/4.jpg"></image>-->
                            <div class="z6">
                                <image id="image7" src="../../common/images/筆記本.png"></image>
                                <div class="z6_1">
                                    <text id="text8">疾病概括</text>
                                    <text id="text9">
                                        色素性皮膚病由色素減少或增多引起皮膚顔色改變。
                                    </text>
                                </div>
                            </div>
                            <div class="z7">
                                <image id="image8" src="../../common/images/分析.png"></image>
                                <div class="z7_1">
                                    <text id="text10">病因分析</text>
                                    <text id="text11" >
                                        黑素細胞和黑素生成異常造成，可由遺傳及環境因素引起，它是皮膚病中的一類常見疾病
                                    </text>
                                </div>
                            </div>
                            <div class="z8">
                                <image id="image9" src="../../common/images/緊急.png"></image>
                                <div class="z8_1">
                                    <text id="text12">定期觀察</text>
                                    <text id="text13">如情況惡化及時就醫</text>
                                </div>
                            </div>
                        </div>
                    </div>
                </list-item>
            </list-item-group>
            <list-item-group>
                <list-item><text class="groupA">2022-03-21 09:12:20</text></list-item>
                <list-item>
                    <div class="container_1">
                        <div id="div1">
                            <text id="text2">結果與分析</text>
                        </div>
                        <div id="div3">
                            <div id="div5">
                                <text id="text3">皮膚病病竈\r\n區域拟合圖</text>
                            </div>
                            <image id="image2" src="../../common/image_a/3.png"></image>
                        </div>
                        <div class="z1">
                            <image id="image3" src="../../common/image_a/a.bmp"></image>
                            <text id="text4">檢測報告</text>
                        </div>
                        <div class="z2">
                            <div class="z3">
                                <text id="text5">
                                    類别：痣
                                </text>
                            </div>
                            <div class="z4">
                                <image id="image5" src="../../common/image_a/4.png"></image>
                            <!--                        <image id="image5" src="data:image/jpg;base64,{{ $item.detection_result_img}}"></image>-->
                                <div class="z5">
                                    <text id="text6">置信度：0.3853</text>
                                    <slider id="slider1" value="984.6"></slider>
                                </div>
                            </div>

                            <div class="z6">
                                <image id="image7" src="../../common/images/筆記本.png"></image>
                                <div class="z6_1">
                                    <text id="text8">疾病概括</text>
                                    <text id="text9">
                                        黑色素痣是一群良性的黑色素細胞，聚集在表皮與真皮的交界産生的。
                                    </text>
                                </div>
                            </div>
                            <div class="z7">
                                <image id="image8" src="../../common/images/分析.png"></image>
                                <div class="z7_1">
                                    <text id="text10">病因分析</text>
                                    <text id="text11" >
                                        紫外線使黑色素瘤形成的一大主因，日常生活做好防曬。新老角質交替過慢也是黑色素形成的原因。
                                    </text>
                                </div>
                            </div>
                            <div class="z8">
                                <image id="image9" src="../../common/images/緊急.png"></image>
                                <div class="z8_1">
                                    <text id="text12">定期觀察</text>
                                    <text id="text13">如情況惡化及時就醫</text>
                                </div>
                            </div>
                        </div>
                    </div>
                </list-item>
            </list-item-group>
            <list-item-group>
                <list-item><text class="groupA">2022-03-21 15:04:42</text></list-item>
                <list-item>
                    <div class="container_1">
                        <div id="div1">
                            <text id="text2">結果與分析</text>
                        </div>
                        <div id="div3">
                            <div id="div5">
                                <text id="text3">皮膚病病竈\r\n區域拟合圖</text>
                            </div>
                            <image id="image2" src="../../common/image_a/5.png"></image>
                        </div>
                        <div class="z1">
                            <image id="image3" src="../../common/image_a/a.bmp"></image>
                            <text id="text4">檢測報告</text>
                        </div>
                        <div class="z2">
                            <div class="z3">
                                <text id="text5">
                                    類别：痣
                                </text>
                            </div>
                            <div class="z4">
                                <image id="image5" src="../../common/image_a/6.png"></image>
                            <!--                        <image id="image5" src="data:image/jpg;base64,{{ $item.detection_result_img}}"></image>-->
                                <div class="z5">
                                    <text id="text6">置信度：0.9423</text>
                                    <slider id="slider1" value="984.6"></slider>
                                </div>
                            </div>
                        <!--                    <image id="image5" src="common/images/4.jpg"></image>-->
                            <div class="z6">
                                <image id="image7" src="../../common/images/筆記本.png"></image>
                                <div class="z6_1">
                                    <text id="text8">疾病概括</text>
                                    <text id="text9">
                                        黑色素痣是一群良性的黑色素細胞，聚集在表皮與真皮的交界産生的。
                                    </text>
                                </div>
                            </div>
                            <div class="z7">
                                <image id="image8" src="../../common/images/分析.png"></image>
                                <div class="z7_1">
                                    <text id="text10">病因分析</text>
                                    <text id="text11" >
                                        紫外線使黑色素瘤形成的一大主因，日常生活做好防曬。新老角質交替過慢也是黑色素形成的原因。
                                    </text>
                                </div>
                            </div>
                            <div class="z8">
                                <image id="image9" src="../../common/images/緊急.png"></image>
                                <div class="z8_1">
                                    <text id="text12">定期觀察</text>
                                    <text id="text13">如情況惡化及時就醫</text>
                                </div>
                            </div>
                        </div>
                    </div>
                </list-item>
            </list-item-group>
            <list-item-group>
                <list-item><text class="groupA">2022-03-21 14:01:17</text></list-item>
                <list-item>
                    <div class="container_1">
                        <div id="div1">
                            <text id="text2">結果與分析</text>
                        </div>
                        <div id="div3">
                            <div id="div5">
                                <text id="text3">皮膚病病竈\r\n區域拟合圖</text>
                            </div>
                            <image id="image2" src="../../common/image_a/7.png"></image>
                        </div>
                        <div class="z1">
                            <image id="image3" src="../../common/image_a/a.bmp"></image>
                            <text id="text4">檢測報告</text>
                        </div>
                        <div class="z2">
                            <div class="z3">
                                <text id="text5">
                                    類别：痣
                                </text>
                            </div>
                            <div class="z4">
                                <image id="image5" src="../../common/image_a/8.png"></image>
                                <div class="z5">
                                    <text id="text6">置信度：0.4497</text>
                                    <slider id="slider1" value="984.6"></slider>
                                </div>
                            </div>
                            <div class="z6">
                                <image id="image7" src="../../common/images/筆記本.png"></image>
                                <div class="z6_1">
                                    <text id="text8">疾病概括</text>
                                    <text id="text9">
                                        黑色素痣是一群良性的黑色素細胞，聚集在表皮與真皮的交界産生的。
                                    </text>
                                </div>
                            </div>
                            <div class="z7">
                                <image id="image8" src="../../common/images/分析.png"></image>
                                <div class="z7_1">
                                    <text id="text10">病因分析</text>
                                    <text id="text11" >
                                        紫外線使黑色素瘤形成的一大主因，日常生活做好防曬。新老角質交替過慢也是黑色素形成的原因。
                                    </text>
                                </div>
                            </div>
                            <div class="z8">
                                <image id="image9" src="../../common/images/緊急.png"></image>
                                <div class="z8_1">
                                    <text id="text12">定期觀察</text>
                                    <text id="text13">如情況惡化及時就醫</text>
                                </div>
                            </div>
                        </div>
                    </div>
                </list-item>
            </list-item-group>
        </list>
    <slz-tabber index="1"></slz-tabber>
</div>

CSS源碼

.container {
    margin-top: 10px;
    flex-direction: column;
    margin-left: 3%;
    margin-right: 3%;
}

.listdiv{
    width: 100%;
/*    height: 100%;*/
    font-size: 25px;
    margin-top: 20px;
    margin-bottom: 20px;
    color: #000000;
    opacity: 0.9;
    font-size: 28px;
}

.list-item{
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 5px;
    border-bottom: 1px solid black;
    border-width: 2px;
    border-color: black;
}

.textdiv{
    font-size: 30px;
    font-weight: bold;
}


.imputdiv{
    width: 100%;
    height: 35%;
}
.button1{
    width: 100%;
    height: 60%;
    display: flex;
    flex-direction: row;
}
.listG{
    height: 100px;
    border-color: black;
    border-width: 2px;
    z-index: 1;
}
.listItem{
    width: 100%;
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #DEDEDE;
    align-items: center;
    font-size: 20px;
}
.group{
    width: 96%;
    height: 600px;
    padding-left: 3%;
    margin-left: 2%;
    display: flex;
/*    border-bottom: 1px solid #DEDEDE;*/
    border-width: 1px;
    border-color: black;
    border-radius: 15px;
    box-shadow:  3px 3px 3px 3px #d6d6d6;
    font-size: 20px;
    font-weight:500;
    z-index: 1;
}
.group1{
    width: 96%;
    height: 60px;
    padding-left: 3%;
    margin-left: 6%;
    z-index:2;
}

.groupValue{
    font-size: 16px;
    width: 95%;
    height: 60px;
    margin-left: 15%;
    border-bottom: 1px solid  #DEDEDE;
}

.head{
    width: 100%;
    height: 50px;
    background-color: #6f7ee9;
}

.head_text{
    align-items: center;
    text-align:center;
    justify-content: center;
    font-size: 25px;
    color: #f8f4f4;
}

.listA{
    height: 4000px;
}

.listItem{
    width: 100%;
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #DEDEDE;
    align-items: center;
    font-size: 20px;
    border-width: 1px;
    border-color: black;
    border-radius: 15px;
    box-shadow:  3px 3px 3px 3px #d6d6d6;
}
.groupA{
    width: 96%;
    height: 150px;
/*    background-color: darkgrey;*/
    padding-left: 3%;
    margin-left: 6%;
    border-bottom: 1px solid #DEDEDE;
    font-size: 40px;
    font-weight:500;
}
.groupValueA{
    font-size: 16px;
    width: 95%;
    height: 60px;
    margin-left: 15%;
    border-bottom: 1px solid  #DEDEDE;
}

#wrapper {
    width: 100%;
    flex-direction: column;
}

#div1 {
    width: 100%;
    height: 200px;
    background-color: #5768e4;
}

#div_image2{
    flex-direction: row-reverse;
    margin-right: 10px;
}

#image1 {
    width: 40px;
    height: 40px;
    top: 10px;
    right: -10px;
}

#text1 {
    width: 68.62300154718928px;
    height: 43.27488396080454px;
    top: 10px;
    right: -15px;
    color: #f8f4f4;
}

#text2 {
    width: 180px;
    height: 50px;
    top: 10px;
    margin-left: 90px;
    right: 80px;
    font-size: 35px;
    color: #f8f4f4;
}

#div3 {
    width: 89%;
    height: 200px;
    border-width: 1px;
    border-color: #000000;
    border-radius: 20px;
    box-shadow:  3px 3px 3px 3px #d6d6d6;
    background-color: #ffffff;
    flex-shrink: -1;
    top: -100px;
    right: -20px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}

#div5 {
    width: 250px;
    height: 90px;
    border-width: 0.05px;
    border-radius: 50px;
    background-color: #eeebeb;
    margin-top: 50px;
    left: -60px;
}

#text3 {
    left: 15px;
    top:2px;
    font-size: 35px;
}

#image2 {
    margin-top: 20px;
    width: 200px;
    height: 150px;
/*    top:-10px;*/
    left: 5px;
}

#image3 {
    width: 30px;
    height: 28px;
    top:6px;
    left: 5px;
/*    margin-top: 10px;*/
/*    border-width: 2px;*/
/*    border-color: black;*/
}

#text4 {
    height: 42px;
    font-size: 40px;
    left: 7px;
    margin-end: 20px;
/*    margin-top: 12px;*/
/*    border-width: 2px;*/
/*    border-color: black;*/
}

#div6 {
    width: 91%;
    height: 389px;
    border-width: 1px;
    border-color: #000000;
    border-radius: 30px;
    box-shadow:  3px 3px 3px 3px #d6d6d6;
    top: -140px;
    right: -15px;
}

#text5 {
    height: 45.68849922640536px;
    right: -20px;
    font-size: 35px;
}

#text_class{
    font-size: 20px;
}

#text6 {
    width: 180px;
    height: 200px;
    font-size: 20px;
    left: 35px;
}

#image5 {
    width: 150px;
    height: 100px;
    left: 10px;
}

#slider1 {
    width: 150px;
    height: 44px;
    left: -25px;
}

#image7 {
    width: 35px;
    height: 33px;
    top:10px;
    left: 10px;
}

#text8 {
    width: 300px;
    height: 50px;
    font-size: 35px;
    left: 8px;
}

#text9 {
    height: 80px;
    top:-5px;
    font-size: 20px;
    left: 8px;
}

#image8 {
    width: 40px;
    height: 20px;
    top:10px;
    left: 10px;
}

#text10 {
    width: 300px;
    height: 40px;
    font-size: 35px;
    left: 8px;
}

#text11 {
    width: 550px;
    font-size: 20px;
    left: 8px;
}

#image9 {
    width: 35px;
    height: 33px;
    top:10px;
    left: 10px;
}

#text12 {
    width: 300px;
    height: 40px;
    font-size: 35px;
    left: 8px;
}

#text13 {
    width: 550px;
    font-size: 20px;
    left: 8px;
}

#div7 {
    width: 100%;
    height: 50px;
}


.container_1{
    width: 100%;
    height: 1000px;
    flex-direction: column;
}

.z1{
    width: 100%;
    height: 40px;
    top:-100px;
/*    border-width: 1px;*/
/*    border-color: black;*/
}

.z2{
    flex-direction: column;
    width: 91%;
    height: 500px;
    border-width: 1px;
    border-color: #000000;
    border-radius: 30px;
    box-shadow:  3px 3px 3px 3px #d6d6d6;
    top:-95px;
    right: -15px;
}

.z3{
    width: 400px;
    height: 50px;
}

.z4{
    flex-direction: row;
    width: 300px;
    height: 150px;
    top:5px;

}

.z5{
    flex-direction: column;
    width: 200px;
    left: 10px;
}

.z6{
    height: 300px;
    flex-direction: row;
    height: 90px;
    top:5px;
}
.z6_1{
    flex-direction:column;
    width: 550px;
    height: 200px;
    left: 10px;
}

.z7{
    flex-direction: row;
    height: 100px;
    top:5px;
}
.z7_1{
    flex-direction:column;
    height: 100px;
    left: 10px;
}

.z8{
    flex-direction: row;
    height: 100px;
    top:5px;
}
.z8_1{
    flex-direction:column;
    width: 248px;
    height: 100px;
    left: 10px;
}

識别過程界面

::: hljs-center

#DAYU200體驗官#基于鴻蒙的惡性皮膚惡性良性腫瘤檢測系統
#DAYU200體驗官#基于鴻蒙的惡性皮膚惡性良性腫瘤檢測系統
#DAYU200體驗官#基于鴻蒙的惡性皮膚惡性良性腫瘤檢測系統

:::

還有部分源碼，如果感興趣的話可以私聊我。

視訊連結

附件連結：https://ost.51cto.com/resource/2181

鴻蒙 DAYU200 惡性皮膚惡性良性腫瘤檢測
上一篇: 做什麼事會使人空虛焦慮
下一篇: 程式員的焦慮-職業（中年）危機

繼續閱讀