feiniao-farm-h5/src/views/old_mini/home/subPages/recognize.vue

<template>
    <div class="diseases-dictionary-detail">
        <div class="page-title" @click="goBack">
            <el-icon class="title-icon" color="rgba(0, 0, 0, 0.8)" size="16"><ArrowLeftBold /></el-icon>
            识别结果
        </div>
        <div class="detail-content">
            <div class="detail-img">
                <div class="card-item">

                    <div class="ing-wrap" v-if="isRecognize">
                        <div>
                            <el-icon size="20" class="is-loading">
                                <Loading />
                            </el-icon>
                        </div>
                        正在识别，请稍后...
                    </div>
                    <!-- <img class="card-bg" src="@/assets/img/diseases/1.jpg" /> -->
                    <img class="card-bg" :src="base_img_url2 + imgKey + resize" />
                    <div class="card-content" v-if="!isRecognize && !noData">
                        <div class="title-ques">
                            <div class="ques-text">病虫名称：{{recoginizeResult?.name}}</div>
                        </div>
                        <div class="dialog-famous">管理方法：</div>
                        <div class="dialog-answer" v-html="recoginizeResult?.cure">

                        </div>
                        <div class="info">基本信息：</div>
                        <div class="desc">
                            {{recoginizeResult?.info}}
                        </div>
                        <div class="famous-info">
                            <img src="@/assets/img/home/link-icon.png" />
                            <span class="type-name">{{recoginizeResult?.name}}</span>
                            <span>合作专家：韦帮稳</span>
                        </div>
                    </div>
                    <div class="card-content no-data" v-if="!isRecognize && noData">
                        <img src="@/assets/img/home/good-fill.png" />
                        长势良好，并未发现病虫害
                    </div>
                </div>
            </div>
            <div class="btn-wrap" v-if="!isRecognize">
                <div class="btn share" @click="toPage">咨询专家</div>
                <div class="btn primary" @click="triggerRecord">触发农事</div>
            </div>
            <!-- <div class="recognizing-box" v-if="isRecognize">正在识别，请稍等~</div> -->
        </div>
    </div>
    
    
    <Popup v-model:show="tipsShow" class="tips-popup">
        <div class="right-icon">
            <img class="right-img" src="@/assets/img/home/right.png" alt="">
        </div>
        <div class="no-popup-title">
            <span>农事已触发成功</span>
            <div class="no-popup-title-sub">您可以在 农场监测-农事任务 看到农事状态</div>
        </div>
        <div class="no-popup-btn" @click="tipsShow = false">我知道了</div>
    </Popup>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { base_img_url2 } from "@/api/config.js";
import { Popup } from "vant";
import wx from "weixin-js-sdk";

import MqttClient from "@/plugins/MqttClient";


let resize = '?x-oss-process=image/resize,w_1300'
const route = useRoute();
// const json = JSON.parse(route.query.json);
const json = {
"imgKey":"16926861-1e20-4cbd-8bf2-90208db5a2d0/806080da-1a30-4b5b-b64b-b22e722c6cb6/DJI_202509010800_001_806080da-1a30-4b5b-b64b-b22e722c6cb6/DJI_20250901080536_0045_V_code-ws0fsmge97gh.jpeg",
"imgId":431600}
const imgKey = json.imgKey;
const imgId = json.imgId;

const isRecognize = ref(false);
const recoginizeResult = ref({
    name: "蒂蛀虫",
    cure: " (1) 化学农药喷洒，如：乙醇草酸酯乳油‌。 <br/>(2) 最佳喷药时间：荔枝成熟期要防治蒂蛀虫，一般建议在荔枝成熟前5-8天进行喷药。 <br/>(3) 使用剂量‌：喷药时应按照说明书上的使用剂量进行使用，不要过量使用。",
    info: "又称蛀蒂虫，属于鳞翅目细蛾科，主要危害荔枝和龙眼的果实、嫩茎、嫩叶和花穗。",
});
const noData = ref(false);
onMounted(() => {
    console.log("img", imgId, imgKey);

    // 使用示例
    const topics = ["phone/image/update/" + imgId]; // 订阅的主题数组
    const mqttClient = new MqttClient(topics, (topic, message) => {
          let res = message.toString();
          console.log("接收推送信息：", res);
          let status = JSON.parse(res).status;
          console.log("status", status);
          if (status === "recog_ing") {
            console.log("recog_ing");
          }
          if (status === "recog_finished") {
            let resData =  JSON.parse(message)
            console.log("recog_finished",resData.data);
            isRecognize.value = false;
            if (resData.data && resData.data.length) {
              noData.value = false
              const formData = new FormData();
              formData.append('code', resData.data[0]);
              VE_API.disease.fetchDiseaseDetail(formData).then(({data}) => {
                recoginizeResult.value = data;
              })
            } else {
              noData.value = true
            }
          }
    });
    mqttClient.connect();
});

const router = useRouter();
const goBack = () => {
    // router.go(-1);
    router.push('/diseases_dictionary')
};

const toDetail = () => {
    router.push("/diseases_dictionary_detail");
};

const toRecognize = () => {
    // router.push("/diseases_recognize")
    const gardenData = {
        organId: 25862,
    };
    wx.miniProgram.navigateTo({
        url: `/pages/subPages/recognize_carmera/index?gardenData=${JSON.stringify(gardenData)}`,
    });
};

const tipsShow = ref(false)
function triggerRecord() {
    tipsShow.value = true
}

function toPage() {
    router.push("/expert_list")
}
</script>

<style lang="scss" scoped>
.diseases-dictionary-detail {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #fff;

    .page-title {
        height: 44px;
        line-height: 44px;
        text-align: center;
        font-size: 17px;
        font-weight: bold;
        // border-bottom: 1px solid #ededed;
        .title-icon {
            cursor: pointer;
            position: absolute;
            left: 16px;
            top: 13px;
        }
    }
    .detail-content {
        height: calc(100% - 44px - 20px);
        overflow: auto;
        .detail-img {
            height: calc(100% - 100px);
            position: relative;
            padding: 4px 16px 30px 16px;
            .card-item {
                width: 100%;
                height: 100%;
                position: relative;
                .ing-wrap {
                    color: #fff;
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    margin: 0 auto;
                    background: rgba(0, 0, 0, 0.6);
                    border-radius: 12px;
                    width: 164px;
                    height: 95px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                }
                img {
                    border-radius: 24px 0 36px 4px;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
                .no-data {
                    color: #fff;
                    text-align: center;
                    padding-top: 26px;
                     img {
                        width: 26px;
                     }
                }
                .card-content {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    padding: 12px 12px 26px 12px;
                    border-radius: 24px 0 36px 4px;
                    color: #ffffff;
                    background: rgba(0, 0, 0, 0.6);
                    backdrop-filter: blur(4px);
                    max-height: calc(100% - 38px);
                    overflow: auto;
                    width: 100%;
                    box-sizing: border-box;
                    .ques-text {
                        color: #ffd786;
                        font-size: 18px;
                        position: relative;
                        padding-left: 12px;
                    }
                    .ques-text:after {
                        content: "";
                        position: absolute;
                        width: 4px;
                        height: 15px;
                        top: 5px;
                        left: 0;
                        border-radius: 2px;
                        background: #ffd186;
                    }
                    .dialog-famous {
                        padding: 8px 0 4px 0;
                        color: #ffd786;
                        font-size: 16px;
                    }
                    .dialog-answer {
                        line-height: 24px;
                    }
                    .info {
                        padding: 10px 10px 6px 0;
                        font-size: 15px;
                    }
                    .desc {
                        font-size: 14px;
                        line-height: 24px;
                    }
                    .famous-info {
                        display: flex;
                        align-items: center;
                        color: #ffd786;
                        font-size: 16px;
                        padding: 8px 0 0px 0;
                        .type-name {
                            padding: 0 4px 0 8px;
                        }
                        img {
                            width: 16px;
                        }
                    }
                }
            }
            .recognize-img {
                width: 100%;
            }
        }
        .btn-wrap {
            width: 100%;
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            padding: 0 16px;
            box-sizing: border-box;
            .btn {
                height: 40px;
                line-height: 40px;
                font-size: 16px;
                text-align: center;
                color: #000;
                border-radius: 24px;
                &.primary {
                    flex: 1;
                    color: #fff;
                    background: #2199f8;
                }
                &.share {
                    background: #fff;
                    min-width: 80px;
                    flex: 1;
                    text-align: center;
                    border: 1px solid #8E8E8E;
                }
            }
            .btn + .btn {
                margin-left: 15px;
            }
        }
        .recognizing-box {
            padding-top: 30px;
            text-align: center;
            font-size: 16px;
        }
        .box-title {
            font-size: 16px;
            font-weight: bold;
            color: #000;
            padding: 16px 2px 16px 0;
        }
        .padding-t {
            padding-top: 26px;
        }
        .expert-box {
            .expert-item {
                display: flex;
                justify-content: space-between;
            }
            .expert-l {
                display: inline-flex;
                align-items: center;
                .expert-name {
                    padding-left: 10px;
                }
                .expert-tag {
                    background: #f7ecc7;
                    padding: 2px 6px;
                    color: #ae7d22;
                    width: fit-content;
                    border-radius: 4px;
                    font-size: 12px;
                    display: flex;
                    align-items: center;
                    margin-left: 10px;
                }
                img {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                }
            }
            .line {
                margin: 16px;
                width: calc(100% - 32px);
                height: 1px;
                background: #f1f1f1;
            }
        }
    }
}

.tips-popup {
    width: 300px;
    border-radius: 14px;
    padding: 28px 15px 20px;
    box-sizing: border-box;
    .right-icon {
        text-align: center;
        padding-bottom: 12px;
        .right-img {
            width: 68px;
        }
    }
    .no-popup-title {
        font-size: 24px;
        font-weight: 500;
        text-align: center;
        .no-popup-title-sub{
            font-size: 14px;
            margin-top: 8px;
        }
    }
    .no-popup-btn {
        background-color: #2199F8;
        padding: 8px;
        border-radius: 20px;
        color: #fff;
        font-size: 16px;
        margin-top: 32px;
        text-align: center;
    }
}
</style>