|
|
@@ -0,0 +1,522 @@
|
|
|
+<template>
|
|
|
+ <el-dialog
|
|
|
+ v-model="dialogVisible"
|
|
|
+ width="80%"
|
|
|
+ align-center
|
|
|
+ class="picture-preview-wrap v-dialog"
|
|
|
+ :show-close="false"
|
|
|
+ append-to-body
|
|
|
+ @close="closeCompare"
|
|
|
+ >
|
|
|
+ <div class="picture-file">
|
|
|
+ <div class="compare-l">
|
|
|
+ <div class="left-img">
|
|
|
+ <album-carousel-item
|
|
|
+ lbum-carousel-item
|
|
|
+ v-if="images"
|
|
|
+ :key="nameRef"
|
|
|
+ :name="nameRef"
|
|
|
+ :farmId="farmId"
|
|
|
+ :images="images"
|
|
|
+ :lock="lock"
|
|
|
+ ></album-carousel-item>
|
|
|
+ </div>
|
|
|
+ <div class="file-wrap">
|
|
|
+ <div class="file-title">
|
|
|
+ <img src="@/assets/images/common/chart-yellow.png" alt="" />
|
|
|
+ 果树档案
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="box-wrap">
|
|
|
+ <div class="overview-file">
|
|
|
+ <div class="box-title">总体档案</div>
|
|
|
+ <div class="base-data">
|
|
|
+ <div class="base-item" v-for="item in photoBaseData" :key="item.label">
|
|
|
+ <span class="label">{{ item.label }}</span>
|
|
|
+ <div class="value">{{ item.value }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <div class="list-item" v-for="item in photoList" :key="item.key">
|
|
|
+ <div class="list-name">
|
|
|
+ <img src="@/assets/images/common/title-icon.png" alt="" />
|
|
|
+ {{ item.key }}
|
|
|
+ </div>
|
|
|
+ {{ item.statement }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="box-r">
|
|
|
+ <div class="overview-file">
|
|
|
+ <div class="box-title">产量详情</div>
|
|
|
+ <div class="box-wrap">
|
|
|
+ <div
|
|
|
+ class="box-item"
|
|
|
+ v-for="(item, index) in outputBox"
|
|
|
+ :key="index"
|
|
|
+ @click="toggleAcitve(item.name)"
|
|
|
+ :class="{ active: activeOuput === item.name }"
|
|
|
+ >
|
|
|
+ <div class="item-name">{{ item.name }}</div>
|
|
|
+ <div class="item-val">{{ item.value }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="overview-file">
|
|
|
+ <div class="box-title">质量详情</div>
|
|
|
+ <div class="box-wrap">
|
|
|
+ <div
|
|
|
+ class="box-item"
|
|
|
+ v-for="(item, index) in qualityBox"
|
|
|
+ :key="index"
|
|
|
+ @click="toggleQualityAcitve(item.name)"
|
|
|
+ :class="{ active: activeOuput === item.name }"
|
|
|
+ >
|
|
|
+ <div class="item-name">{{ item.name }}</div>
|
|
|
+ <div class="item-val">{{ item.value }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="compare-r">
|
|
|
+ <album-carousel-item
|
|
|
+ lbum-carousel-item
|
|
|
+ v-if="images2"
|
|
|
+ :key="nameRef + '2'"
|
|
|
+ :name="nameRef"
|
|
|
+ :farmId="farmId2"
|
|
|
+ :images="images2"
|
|
|
+ :lock="lock"
|
|
|
+ ></album-carousel-item>
|
|
|
+ <div class="file-wrap">
|
|
|
+ <div class="file-title">
|
|
|
+ <img src="@/assets/images/common/chart-yellow.png" alt="" />
|
|
|
+ 果树档案
|
|
|
+ </div>
|
|
|
+ <div class="box-wrap">
|
|
|
+ <div class="overview-file">
|
|
|
+ <div class="box-title">总体档案</div>
|
|
|
+ <div class="base-data">
|
|
|
+ <div class="base-item" v-for="item in photoBaseData2" :key="item.label">
|
|
|
+ <span class="label">{{ item.label }}</span>
|
|
|
+ <div class="value">{{ item.value }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <div class="list-item" v-for="item in photoList" :key="item.key">
|
|
|
+ <div class="list-name">
|
|
|
+ <img src="@/assets/images/common/title-icon.png" alt="" />
|
|
|
+ {{ item.key }}
|
|
|
+ </div>
|
|
|
+ {{ item.statement }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-r">
|
|
|
+ <div class="overview-file">
|
|
|
+ <div class="box-title">产量详情</div>
|
|
|
+ <div class="box-wrap">
|
|
|
+ <div
|
|
|
+ class="box-item"
|
|
|
+ v-for="(item, index) in outputBox2"
|
|
|
+ :key="index"
|
|
|
+ @click="toggleAcitve2(item.name)"
|
|
|
+ :class="{ active: activeOuput2 === item.name }"
|
|
|
+ >
|
|
|
+ <div class="item-name">{{ item.name }}</div>
|
|
|
+ <div class="item-val">{{ item.value }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="overview-file">
|
|
|
+ <div class="box-title">质量详情</div>
|
|
|
+ <div class="box-wrap">
|
|
|
+ <div
|
|
|
+ class="box-item"
|
|
|
+ v-for="(item, index) in qualityBox2"
|
|
|
+ :key="index"
|
|
|
+ @click="toggleQualityAcitve2(item.name)"
|
|
|
+ :class="{ active: activeOuput2 === item.name }"
|
|
|
+ >
|
|
|
+ <div class="item-name">{{ item.name }}</div>
|
|
|
+ <div class="item-val">{{ item.value }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, computed, onMounted, onUnmounted } from "vue";
|
|
|
+import "./cacheImg.js";
|
|
|
+import AlbumCarouselItem from "./albumCarouselItem";
|
|
|
+import { dateFormat } from "@/utils/date_util.js";
|
|
|
+import eventBus from "@/api/eventBus";
|
|
|
+
|
|
|
+const lock = ref(false);
|
|
|
+const farmId = ref(766);
|
|
|
+const farmId2 = ref(766);
|
|
|
+const nameRef = ref("");
|
|
|
+
|
|
|
+const isLoadingImg = ref(true);
|
|
|
+const images = ref(null);
|
|
|
+const images2 = ref(null);
|
|
|
+const dialogVisible = ref(false);
|
|
|
+// 获取当前日期
|
|
|
+const currentDate = new Date();
|
|
|
+// 获取当前日期的前一个月
|
|
|
+const startDate = new Date(currentDate);
|
|
|
+startDate.setMonth(currentDate.getMonth() - 1);
|
|
|
+
|
|
|
+// 格式化日期
|
|
|
+const formattedStartDate = dateFormat(startDate, "YY-mm-dd");
|
|
|
+const formattedEndDate = dateFormat(currentDate, "YY-mm-dd");
|
|
|
+
|
|
|
+eventBus.on("change:watermark", function (name) {
|
|
|
+ nameRef.value = name;
|
|
|
+});
|
|
|
+
|
|
|
+const outputBox = ref([
|
|
|
+ { id: 1, name: "花穗率", value: "" },
|
|
|
+ { id: 2, name: "总枝条数", value: "" },
|
|
|
+ { id: 3, name: "开花率", value: "" },
|
|
|
+ { id: 4, name: "雄花比例", value: "" },
|
|
|
+]);
|
|
|
+
|
|
|
+const qualityBox = ref([
|
|
|
+ { id: 5, name: "通风率", value: "" },
|
|
|
+ { id: 6, name: "透光率", value: "" },
|
|
|
+ { id: 7, name: "地形条件", value: "" },
|
|
|
+]);
|
|
|
+const outputBox2 = ref([
|
|
|
+ { id: 1, name: "花穗率", value: "" },
|
|
|
+ { id: 2, name: "总枝条数", value: "" },
|
|
|
+ { id: 3, name: "开花率", value: "" },
|
|
|
+ { id: 4, name: "雄花比例", value: "" },
|
|
|
+]);
|
|
|
+
|
|
|
+const qualityBox2 = ref([
|
|
|
+ { id: 5, name: "通风率", value: "" },
|
|
|
+ { id: 6, name: "透光率", value: "" },
|
|
|
+ { id: 7, name: "地形条件", value: "" },
|
|
|
+]);
|
|
|
+eventBus.on("showCompareDialog", function (compareArr) {
|
|
|
+ console.log("compareArr", compareArr);
|
|
|
+ compareArr.map((item, index) => {
|
|
|
+ dialogVisible.value = true;
|
|
|
+ if (index === 0) {
|
|
|
+ farmId.value = item.farmId
|
|
|
+ VE_API.miniimage.list({ farmId: item.farmId, sampleId: item.sampleId }).then((res) => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ images.value = res.data;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ const data = item.data;
|
|
|
+ photoBaseData.value[0].value = data.pz;
|
|
|
+ photoBaseData.value[1].value = data.sgbmj + "米";
|
|
|
+ photoBaseData.value[2].value = data.cl + "斤";
|
|
|
+ photoBaseData.value[3].value = data.spgl + "%";
|
|
|
+ outputBox.value[0].value = data.hsl ? data.hsl + "%" : "--";
|
|
|
+ outputBox.value[1].value = data.zzts ? data.zzts : "--";
|
|
|
+ outputBox.value[2].value = data.khl ? data.khl + "%" : "--";
|
|
|
+ outputBox.value[3].value = data.xhl ? data.xhl + "%" : "--";
|
|
|
+ qualityBox.value[0].value = data.tfl ? data.tfl + "%" : "--";
|
|
|
+ qualityBox.value[1].value = data.tgl ? data.tgl + "%" : "--";
|
|
|
+ qualityBox.value[2].value = data.dxtj ? data.dxtj + "%" : "--";
|
|
|
+ } else {
|
|
|
+ farmId2.value = item.farmId
|
|
|
+ VE_API.miniimage.list({ farmId: item.farmId, sampleId: item.sampleId }).then((res) => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ images2.value = res.data;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ const data = item.data;
|
|
|
+ photoBaseData2.value[0].value = data.pz;
|
|
|
+ photoBaseData2.value[1].value = data.sgbmj + "米";
|
|
|
+ photoBaseData2.value[2].value = data.cl + "斤";
|
|
|
+ photoBaseData2.value[3].value = data.spgl + "%";
|
|
|
+ outputBox2.value[0].value = data.hsl ? data.hsl + "%" : "--";
|
|
|
+ outputBox2.value[1].value = data.zzts ? data.zzts : "--";
|
|
|
+ outputBox2.value[2].value = data.khl ? data.khl + "%" : "--";
|
|
|
+ outputBox2.value[3].value = data.xhl ? data.xhl + "%" : "--";
|
|
|
+ qualityBox2.value[0].value = data.tfl ? data.tfl + "%" : "--";
|
|
|
+ qualityBox2.value[1].value = data.tgl ? data.tgl + "%" : "--";
|
|
|
+ qualityBox2.value[2].value = data.dxtj ? data.dxtj + "%" : "--";
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // isLoadingImg.value = true
|
|
|
+ // let params = {sampleId,farmId}
|
|
|
+ // dialogVisible.value = true
|
|
|
+ // VE_API.miniimage.list(params).then(res => {
|
|
|
+ // if(res.code === 0){
|
|
|
+ // images.value = res.data
|
|
|
+ // isLoadingImg.value = false
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // photoBaseData.value[0].value = data.pz;
|
|
|
+ // photoBaseData.value[1].value = data.sgbmj + "米";
|
|
|
+ // photoBaseData.value[2].value = data.cl + "斤";
|
|
|
+ // photoBaseData.value[3].value = data.spgl + "%";
|
|
|
+ // outputBox.value[0].value = data.hsl ? (data.hsl + "%") : "--";
|
|
|
+ // outputBox.value[1].value = data.zzts? data.zzts : "--";
|
|
|
+ // outputBox.value[2].value = data.khl? (data.khl + "%") : "--";
|
|
|
+ // outputBox.value[3].value = data.xhl? (data.xhl + "%") : "--";
|
|
|
+ // qualityBox.value[0].value = data.tfl? (data.tfl + "%") : "--";
|
|
|
+ // qualityBox.value[1].value = data.tgl? (data.tgl + "%") : "--";
|
|
|
+ // qualityBox.value[2].value = data.dxtj? (data.dxtj + "%") : "--";
|
|
|
+});
|
|
|
+
|
|
|
+eventBus.off("albumCarousel", toggleActiveImg);
|
|
|
+eventBus.on("albumCarousel", toggleActiveImg);
|
|
|
+
|
|
|
+const currentIndex = ref(0);
|
|
|
+function toggleActiveImg(index) {
|
|
|
+ currentIndex.value = index;
|
|
|
+}
|
|
|
+
|
|
|
+const photoBaseData = ref([
|
|
|
+ {
|
|
|
+ label: "品种",
|
|
|
+ value: "桂味",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "冠幅",
|
|
|
+ value: "10米",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "预估产量",
|
|
|
+ value: "2000斤",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "高质果率",
|
|
|
+ value: "72棵",
|
|
|
+ },
|
|
|
+]);
|
|
|
+
|
|
|
+const photoBaseData2 = ref([
|
|
|
+ {
|
|
|
+ label: "品种",
|
|
|
+ value: "桂味",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "冠幅",
|
|
|
+ value: "10米",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "预估产量",
|
|
|
+ value: "2000斤",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "高质果率",
|
|
|
+ value: "72棵",
|
|
|
+ },
|
|
|
+]);
|
|
|
+
|
|
|
+const photoList = ref([
|
|
|
+ {key: "病虫", statement: "病虫 2025年02月19日，发现毛毡病异常1级"},
|
|
|
+ {key: "异常", statement: "2025年03月17日，发现花量大异常3级"},
|
|
|
+ {key: "营养", statement: "无营养异常"},
|
|
|
+]);
|
|
|
+
|
|
|
+const activeOuput = ref(1);
|
|
|
+const activeOuput2 = ref(1);
|
|
|
+
|
|
|
+// 产量详情
|
|
|
+function toggleAcitve(name) {
|
|
|
+ activeOuput.value = name;
|
|
|
+ toggleNamePic(name)
|
|
|
+}
|
|
|
+
|
|
|
+function toggleNamePic(name) {
|
|
|
+ if (name.indexOf("开花") > -1) {
|
|
|
+ eventBus.emit("change:watermark", "开花目标框");
|
|
|
+ } else if (name.indexOf("花穗") > -1) {
|
|
|
+ eventBus.emit("change:watermark", "花穗目标框");
|
|
|
+ } else if (name.indexOf("雄花") > -1) {
|
|
|
+ eventBus.emit("change:watermark", "雄花目标框");
|
|
|
+ } else if (name.indexOf("枝条数") > -1) {
|
|
|
+ eventBus.emit("change:watermark", "");
|
|
|
+ } else {
|
|
|
+ eventBus.emit("change:watermark", "");
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+// 质量详情
|
|
|
+function toggleQualityAcitve() {}
|
|
|
+function toggleQualityAcitve2() {}
|
|
|
+
|
|
|
+function toggleAcitve2 (name){
|
|
|
+ activeOuput.value = name;
|
|
|
+ toggleNamePic(name)
|
|
|
+}
|
|
|
+
|
|
|
+function closeCompare() {
|
|
|
+ eventBus.emit("closeCompare")
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+@import "src/styles/index";
|
|
|
+.picture-file {
|
|
|
+ display: flex;
|
|
|
+ .left-img {
|
|
|
+ // min-width: 500px;
|
|
|
+ }
|
|
|
+ .compare-l {
|
|
|
+ padding-right: 60px;
|
|
|
+ }
|
|
|
+ .file-wrap {
|
|
|
+ margin-top: 16px;
|
|
|
+ background: url("@/assets/images/home/file-bg-w.png") no-repeat top center / 100% 100%;
|
|
|
+ margin-left: 12px;
|
|
|
+ padding: 12px;
|
|
|
+ .file-title {
|
|
|
+ font-size: 20px;
|
|
|
+ color: #ffd489;
|
|
|
+ }
|
|
|
+ .box-wrap {
|
|
|
+ display: flex;
|
|
|
+ .box-r {
|
|
|
+ padding-left: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .overview-file {
|
|
|
+ padding-top: 20px;
|
|
|
+ .box-title {
|
|
|
+ font-size: 16px;
|
|
|
+ padding-left: 13px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ color: #fff;
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 3px;
|
|
|
+ width: 3px;
|
|
|
+ height: 16px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 11px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ color: #f3c11d;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: "PangMenZhengDao";
|
|
|
+ margin-bottom: 20px;
|
|
|
+ .big {
|
|
|
+ width: 13px;
|
|
|
+ height: 13px;
|
|
|
+ margin: -10px 0 0 4px;
|
|
|
+ }
|
|
|
+ .small {
|
|
|
+ width: 7px;
|
|
|
+ height: 7px;
|
|
|
+ margin-left: -3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .base-data {
|
|
|
+ background: rgba(207, 207, 207, 0.1);
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 6px 0;
|
|
|
+ display: flex;
|
|
|
+ .base-item {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ .label {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666666;
|
|
|
+ width: max-content;
|
|
|
+ }
|
|
|
+ .value {
|
|
|
+ padding-top: 2px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #ffffff;
|
|
|
+ width: max-content;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .base-item + .base-item {
|
|
|
+ border-left: 1px solid rgba(102, 102, 102, 0.42);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list {
|
|
|
+ margin-top: 15px;
|
|
|
+ width: max-content;
|
|
|
+ font-size: 14px;
|
|
|
+ .list-item {
|
|
|
+ color: #bbbbbb;
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ .list-name {
|
|
|
+ color: #f3c11d;
|
|
|
+ margin-right: 6px;
|
|
|
+ img {
|
|
|
+ width: 17px;
|
|
|
+ height: 13px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .overview-file + .overview-file {
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+ .box-wrap {
|
|
|
+ display: flex;
|
|
|
+ .box-item {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 6px 16px;
|
|
|
+ background: rgba(207, 207, 207, 0.1);
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid rgba(207, 207, 207, 0.1);
|
|
|
+ cursor: pointer;
|
|
|
+ .item-name {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666666;
|
|
|
+ width: max-content;
|
|
|
+ }
|
|
|
+ .item-val {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #fff;
|
|
|
+ width: max-content;
|
|
|
+ padding-top: 3px;
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ background: rgba(255, 212, 137, 0.16);
|
|
|
+ border: 1px solid #ffd489;
|
|
|
+ .item-name {
|
|
|
+ color: #bbbbbb;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-item + .box-item {
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.picture-preview-wrap {
|
|
|
+ background: none;
|
|
|
+}
|
|
|
+</style>
|
wangsisi
