页面调整

src/views/home/album_compoents/albumCarousel.vue

@@ -31,8 +31,10 @@
                     <div class="box-title">总体档案</div>
                     <div class="base-data">
                         <div class="base-item" v-for="item in photoBaseData" :key="item.label">
+                            <template v-if="item.value">
                             <span class="label">{{ item.label }}</span>
                             <div class="value">{{ item.value }}</div>
+                            </template>
                         </div>
                     </div>
                     <div class="list">
@@ -56,8 +58,10 @@
                             @click="toggleAcitve(item.name)"
                             :class="{ active: activeOuput === item.name }"
                         >
+                          <template v-if="item.value">
                             <div class="item-name">{{ item.name }}</div>
                             <div class="item-val">{{ item.value }}</div>
+                          </template>
                         </div>
                     </div>
                 </div>
@@ -72,8 +76,10 @@
                             @click="toggleAcitve(item.name)"
                             :class="{ active: activeOuput === item.name }"
                         >
-                            <div class="item-name">{{ item.name }}</div>
-                            <div class="item-val">{{ item.value }}</div>
+                          <template v-if="item.value">
+                              <div class="item-name">{{ item.name }}</div>
+                              <div class="item-val">{{ item.value }}</div>
+                          </template>
                         </div>
                     </div>
                 </div>
@@ -110,17 +116,42 @@ eventBus.on("change:watermark",function(name){
   nameRef.value = name
 })
 
-const outputBox = ref([
-    { id: 1, name: "产量估计", value: "" },
-    { id: 2, name: "高质果率", value: "" },
-    { id: 3, name: "坐果率", value: "" },
-]);
+const outputBox = ref([]);
+const qualityBox = ref([]);
+const photoBaseData = ref([]);
+
+
+function resetData() {
+    outputBox.value = [
+        { id: 1, name: "产量估计", value: "" },
+        { id: 2, name: "高质果率", value: "" },
+        { id: 3, name: "坐果率", value: "" },
+    ];
+    qualityBox.value = [
+        { id: 5, name: "通风率", value: "" },
+        { id: 6, name: "透光率", value: "" },
+        { id: 7, name: "病虫比例", value: "" },
+    ];
+    photoBaseData.value = [
+        {
+            label: "品种",
+            value: "--",
+        },
+        {
+            label: "冠幅表面积",
+            value: "--",
+        },
+        {
+            label: "总枝条",
+            value: "--",
+        },
+        {
+            label: "树龄",
+            value: "--",
+        },
+    ];
+}
 
-const qualityBox = ref([
-    { id: 5, name: "通风率", value: "" },
-    { id: 6, name: "透光率", value: "" },
-    { id: 7, name: "病虫比例", value: "" },
-]);
 const showTag = ref(false)
 eventBus.on("click:point",function({farmId,sampleId, data}){
   sampleId = data.id;
@@ -160,7 +191,7 @@ function toggleActiveImg(index) {
 }
 
 const getSampleFiles = (geoHash) => {
-    // photoList.value = [];
+    resetData()
     const farmId = sessionStorage.getItem("farmId");
     VE_API.mini_farm.getSampleFiles({ geoHashSample: geoHash,farmId }).then(({data,extData}) => {
         photoBaseData.value[0].value = data.meta_info.type_id;
@@ -210,24 +241,6 @@ const getSampleFiles = (geoHash) => {
     });
 };
 
-const photoBaseData = ref([
-    {
-        label: "品种",
-        value: "--",
-    },
-    {
-        label: "冠幅表面积",
-        value: "--",
-    },
-    {
-        label: "总枝条",
-        value: "--",
-    },
-    {
-        label: "树龄",
-        value: "--",
-    },
-]);
 
 const photoList = ref([
     {key: "病虫", statement: "--"},

src/views/home/components/homeFile.vue

@@ -14,30 +14,32 @@
             <div class="overview-file">
                 <div class="box-title">总体档案</div>
                 <div class="base-data">
-                    <div
-                        class="base-item"
-                        v-for="(item, index) in photoBaseData"
-                        :key="item.label"
-                        @click.stop="toggleFileItem(item.label, index)"
-                    >
-                        <span class="label">{{ item.label }}</span>
-                        <div v-if="index === 0" class="value">
-                            <el-select
-                                v-model="item.speciesItemId"
-                                size="small"
-                                @change="changeSelect"
-                                class="type-select"
-                            >
-                                <el-option
-                                    v-for="item in selectOptions"
-                                    :key="item.speciesItemId"
-                                    :label="item.speciesItemName"
-                                    :value="item.speciesItemId"
-                                />
-                            </el-select>
+                    <template  v-for="(item, index) in photoBaseData"
+                               :key="index">
+                        <div
+                            v-if="index === 0 || item.value!== '--'"
+                            class="base-item"
+                            @click.stop="toggleFileItem(item.label, index)"
+                        >
+                            <span class="label">{{ item.label }}</span>
+                            <div v-if="index === 0" class="value">
+                                <el-select
+                                    v-model="item.speciesItemId"
+                                    size="small"
+                                    @change="changeSelect"
+                                    class="type-select"
+                                >
+                                    <el-option
+                                        v-for="item in selectOptions"
+                                        :key="item.speciesItemId"
+                                        :label="item.speciesItemName"
+                                        :value="item.speciesItemId"
+                                    />
+                                </el-select>
+                            </div>
+                            <div v-else class="value">{{ item.value }}</div>
                         </div>
-                        <div v-else class="value">{{ item.value }}</div>
-                    </div>
+                    </template>
                 </div>
                 <div class="list">
                     <div class="list-item" v-for="item in photoList" :key="item.key">
@@ -54,36 +56,40 @@
                 <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, item.field)"
-                            :class="{ active: activeOuput === item.name }"
-                        >
+                      <template  v-for="(item, index) in outputBox"
+                                 :key="index">
+                          <div
+                              v-if="item.value!== '--'"
+                              class="box-item"
+                              @click="toggleAcitve(item.name, item.field)"
+                              :class="{ active: activeOuput === item.name }"
+                          >
                             <div class="item-name">{{ item.name }}</div>
                             <div class="item-val">
-                                {{ item.value }}<span>{{ item.unit }}</span>
+                              {{ item.value }}<span>{{ item.unit }}</span>
                             </div>
-                        </div>
+                          </div>
+                      </template>
                     </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="toggleAcitve(item.name, item.field)"
-                            :class="{ active: activeOuput === item.name }"
-                        >
-                            <div class="item-name">{{ item.name }}</div>
-                            <div class="item-val">
+                        <template  v-for="(item, index) in qualityBox"
+                                   :key="index">
+                            <div
+                                v-if="item.value!== '--'"
+                                class="box-item"
+                                @click="toggleAcitve(item.name, item.field)"
+                                :class="{ active: activeOuput === item.name }"
+                            >
+                              <div class="item-name">{{ item.name }}</div>
+                              <div class="item-val">
                                 {{ item.value }}<span>{{ item.unit }}</span>
+                              </div>
                             </div>
-                        </div>
+                        </template>
                     </div>
                 </div>
             </div>
@@ -94,19 +100,28 @@
 <script setup>
 import eventBus from "@/api/eventBus";
 import { onMounted, ref, onBeforeUnmount, reactive } from "vue";
-const outputBox = ref([
+const outputBox = ref([]);
+const qualityBox = ref([]);
+const photoBaseData = ref([]);
+
+const photoList = ref([
+    { key: "物候", statement: "--" },
+    { key: "病虫", statement: "--" },
+    { key: "异常", statement: "--" },
+    { key: "农事", statement: "--" },
+]);
+function resetFiles(){
+  outputBox.value = [
     { id: 1, name: "产量估计", field: "cl", value: "--", unit: "斤/亩" },
     { id: 2, name: "高质果率", field: "spgl", value: "--", unit: "%" },
     { id: 3, name: "挂果数", field: "zuoguo_ratio",value: "--", unit: "颗/枝条" },
-]);
-
-const qualityBox = ref([
+  ]
+  qualityBox.value = [
     { id: 5, name: "通风率", field: "tfl", value: "--", unit: "%" },
     { id: 6, name: "透光率", field: "tgl", value: "--", unit: "%" },
     { id: 7, name: "病虫比例", value: "--", unit: "%" },
-]);
-
-const photoBaseData = ref([
+  ]
+  photoBaseData.value = [
     {
         label: "品种",
         value: "--",
@@ -123,14 +138,9 @@ const photoBaseData = ref([
         label: "平均树龄",
         value: "--",
     },
-]);
+  ]
 
-const photoList = ref([
-    { key: "物候", statement: "--" },
-    { key: "病虫", statement: "--" },
-    { key: "异常", statement: "--" },
-    { key: "农事", statement: "--" },
-]);
+}
 
 const activeOuput = ref(1);
 
@@ -198,6 +208,7 @@ function getFileData(farmId, regionId) {
     if(!farmId){
       return;
     }
+    resetFiles();
     VE_API.farm.getFarmFiles({ farmId, regionId: regionId ? regionId : undefined }).then(({ data, extData }) => {
         allTypeData.value = data;
         console.log("getFileData", allTypeData.value);