页面调整

src/components/ImageDialog.vue

@@ -0,0 +1,98 @@
+<template>
+  <el-dialog
+      class="my-dialog yse-events"
+      :align-center="true"
+      with-header="false"
+      destroy-on-close
+      :model-value="showDialog"
+      @close="closeDialog()"
+      :modal="true"
+  >
+    <div class="dialog-box">
+      <div class="title">
+        <div class="myclose cursor-pointer" @click="closeDialog"></div>
+      </div>
+      <div class="my-body">
+        <img  :src="src" id="my-pdf" />
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup>
+import {onMounted, toRefs, ref,watch} from "vue";
+import {base_img_url2} from "../api/config"
+import vueshowpdf from 'vueshowpdf'
+import eventBus from "@/api/eventBus";
+
+const title = ref(null)
+const src=ref()
+const showDialog=ref(false);
+
+
+onMounted(async () => {
+})
+
+function closeDialog(){
+  showDialog.value = false;
+}
+function gybgListener(e){
+  showDialog.value = true;
+  src.value = e.filename;
+  title.value = e.title;
+}
+eventBus.off("homePage:image",gybgListener)
+eventBus.on("homePage:image",gybgListener)
+
+</script>
+
+<style lang="scss" scoped>
+$title-height:44px;
+$body-height:calc(100% - $title-height);
+
+.dialog-box{
+  font-family: PingFangSC-Regular, PingFang SC;
+  position: fixed;
+  left: calc(50% - 700px);
+  top:0px;
+  width: 80%;
+  height: calc(100% - 100px);
+  background: rgba(1,17,22,0.8);
+  box-shadow: 0px 0px 20px 0px #232323;
+  border-radius: 4px;
+  border: 2px solid #232323;
+  z-index: 99999;
+
+
+  .title{
+    position: relative;
+    width: 100%;
+    height: $title-height;
+    box-sizing: border-box;
+    background: #232323;
+    border-radius: 4px 4px 0px 0px;
+    border-bottom: 2px solid #232323;
+    .myclose{
+      position: absolute;
+      right: 0px;
+      top: calc($title-height / 2 - 8px);
+      margin-right: 20px;
+      width: 16px;
+      height: 16px;
+      background-image: url("@/assets/img/close.png");
+      background-size: 100% 100%;
+    }
+  }
+  .my-body{
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+  }
+
+}
+
+</style>

src/components/PdfDialog.vue

@@ -10,11 +10,9 @@
   >
     <div class="dialog-box">
       <div class="title">
-        <div class="btn" @click="handleExport">导出</div>
         <div class="myclose cursor-pointer" @click="closeDialog"></div>
       </div>
        <iframe class="my-body" :src="src" id="my-pdf"></iframe>
-<!--      <iframe class="my-body" src="/ts.pdf" id="my-pdf"></iframe>-->
     </div>
   </el-dialog>
 </template>

src/views/home/components/homeFile.vue

@@ -56,19 +56,20 @@
                     <div class="box-wrap">
                         <div
                             class="box-item"
-                            v-for="(item, index) in outputBox"
+                            v-for="index in 3"
                             :key="index"
-                            @click="toggleAcitve(item.name, item.field)"
-                            :class="{ active: activeOuput === item.name }"
+                            @click="toggleAcitve(outputBox[index].name, outputBox[index].field)"
+                            :class="{ active: activeOuput === outputBox[index].name }"
                         >
-                            <div class="item-name">{{ item.name }}</div>
+                            <div class="item-name">{{ outputBox[index].name }}</div>
                             <div class="item-val">
-                                {{ item.value }}<span>{{ item.unit }}</span>
+                                {{ outputBox[index].value }}<span>{{ outputBox[index].unit }}</span>
                             </div>
                         </div>
                     </div>
                 </div>
 
+
                 <div class="overview-file">
                     <div class="box-title">生态评估</div>
                     <div class="box-wrap">
@@ -98,6 +99,9 @@ const outputBox = ref([
     { id: 1, name: "种植面积", field: "area", value: "6800", unit: "亩" },
     { id: 2, name: "亩产估计", field: "cl", value: "1610", unit: "斤/亩" },
     { id: 3, name: "产量估计", field: "zuoguo_ratio",value: "1094.8", unit: "万斤" },
+    { id: 4, name: "高质果率", field: "zuoguo_ratio",value: "1094.8", unit: "万斤" },
+    { id: 5, name: "坐果率", field: "zuoguo_ratio",value: "1094.8", unit: "万斤" },
+    { id: 6, name: "", field: "",value: "", unit: "" },
 ]);
 
 const qualityBox = ref([

src/views/home/components/homePage.vue

@@ -3,7 +3,7 @@
         <div class="chart-item weather-item">
             <chart-box name="气象预警">
                 <template #title-right>
-                    <div class="button" @click="gybg">果园报告</div>
+                    <div class="button" @click="gybg">溯源报告</div>
                 </template>
                 <div class="base-wrap">
                     <div class="base-item" v-for="(item, index) in baseData.labels" :key="index">
@@ -270,8 +270,8 @@ const growObj = ref({});
 const ecologyObj = ref({});
 
 const gybg = () => {
-    VE_API.farm_files.last({ farmId: sessionStorage.getItem("farmId"), key: "pdf_report" }).then(({ data }) => {
-      eventBus.emit("homePage:gybg", { filename: data.path, title: "果园报告" });
+    VE_API.farm_files.last({ farmId: sessionStorage.getItem("farmId"), key: "qcode" }).then(({ data }) => {
+      eventBus.emit("homePage:image", { filename: data.path, title: "溯源报告" });
     });
 };
 </script>

src/views/home/index.vue

@@ -71,6 +71,7 @@
     <PicturePreview :imageUrl="urls" :curIndex="urlsIndex"></PicturePreview>
     <album-carousel></album-carousel>
     <PdfDialog title="果园报告"></PdfDialog>
+    <ImageDialog title="溯源报告"></ImageDialog>
 
     <!-- 对比 -->
     <compareDialog></compareDialog>
@@ -154,6 +155,8 @@ import adoptList from "./components/foster/adoptList.vue";
 import clientList from "./components/foster/clientList.vue";
 import applyList from "./components/foster/applyList.vue";
 import addressList from "./components/foster/addressList.vue";
+import ImageDialog from "../../components/ImageDialog";
+
 let store = useStore();
 const components = {
     homePage,