|
@@ -0,0 +1,398 @@
|
|
|
|
+<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>
|