fix: 增加收缩，指标对比退出清除数据

src/components/toolList.vue

@@ -52,9 +52,11 @@ defineExpose({ resetActive });
     width: 54px;
     height: 100%;
     background: #232323;
-    border: 0.6px solid rgb(255, 255, 255, 0.4);
+    border: 0.6px solid #444444;
+    border-top: none;
+    border-bottom: none;
     box-sizing: border-box;
-    border-radius: 4px;
+    // border-radius: 4px;
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
@@ -65,7 +67,7 @@ defineExpose({ resetActive });
     }
     &.tool-right {
         margin-left: 10px;
-        border-right: none;
+        // border-right: none;
     }
     .tool-item {
         font-size: 20px;

src/views/home/components/spaceTime/index.vue

@@ -11,10 +11,10 @@
                         <div class="right-btn">
                             <el-select
                                 class="select-item common-dark-select"
-                                popper-class="common-dark-select-popper"
                                 v-model="yearVal"
                                 @change="changeSelect"
                                 placeholder="请选择"
+                                popper-class="focus-farm-select"
                                 style="width: 126px"
                             >
                                 <el-option
@@ -524,6 +524,25 @@ onMounted(() => {
         border: 1px solid rgba(255, 212, 137, 0.5);
         border-radius: 8px;
         border-top: 1px solid rgba(255, 212, 137, 0.8);
+        ::v-deep {
+            .el-select__wrapper {
+                background: rgba(0, 0, 0, 0.3);
+                box-shadow: 0 0 0 1px #FFD489 inset;
+                height: 32px;
+                line-height: 32px;
+                .el-select__caret {
+                    color: #ffd489;
+                }
+            }
+            .el-select__placeholder {
+                color: #f7be5a;
+                font-size: 16px;
+                text-align: center;
+            }
+            .el-select__input {
+                color: #f7be5a;
+            }
+        }
     }
     .table-box {
         padding: 9px 16px;

src/views/home/index.vue

@@ -4,51 +4,79 @@
         <div class="content">
             <navigation style="margin-left: 50px" @handleTab="handleTab" @updateLegend="updateLegend"></navigation>
             <div class="left yes-events" :class="{ 'collapsed-left': isLeftShrink }">
-                <div class="home-btn">
-                    <div class="btn" @click="changeLeftComponent(0)" :class="{ active: activeBtn === 0 }">实时感知</div>
-                    <div class="btn" @click="changeLeftComponent(1)" :class="{ active: activeBtn === 1 }">诊断识别</div>
-                </div>
-                <tool-list
-                    direction="left"
-                    ref="leftTool"
-                    :list="leftToolList[activeBtn]"
-                    @handleActive="handleActiveLeft"
-                ></tool-list>
-                <component :is="components[currentComponent]" />
-                <!-- 箭头 -->
-                <div class="arrow" @click="handleShrink('left')">
-                    <el-icon class="icon" :class="{ 'arrow-left': isLeftShrink }" color="#141414"
-                        ><DArrowLeft
-                    /></el-icon>
+                <div class="left-wrap">
+                    <div class="home-btn">
+                        <div class="btn" @click="changeLeftComponent(0)" :class="{ active: activeBtn === 0 }">
+                            实时感知
+                        </div>
+                        <div class="btn" @click="changeLeftComponent(1)" :class="{ active: activeBtn === 1 }">
+                            诊断识别
+                        </div>
+                    </div>
+                    <div class="left-content">
+                        <tool-list
+                            direction="left"
+                            ref="leftTool"
+                            :list="leftToolList[activeBtn]"
+                            @handleActive="handleActiveLeft"
+                        ></tool-list>
+                        <component :is="components[currentComponent]" />
+                        <!-- 箭头 -->
+                        <div class="arrow" @click="handleShrink('left')">
+                            <el-icon class="icon" :class="{ 'arrow-left': isLeftShrink }" color="#141414"
+                                ><DArrowLeft
+                            /></el-icon>
+                        </div>
+                    </div>
                 </div>
             </div>
             <div class="home-bottom">
-                <img v-if="!showSpaceTime" class="img yes-events" @click="handlePage" src="@/assets/images/home/table-btn-sk.png" alt="" />
-                <space-time v-if="showSpaceTime" @collapse="handleSpaceTimeCollapse" :class="{ 'expanded': showSpaceTime }"></space-time>
+                <img
+                    v-if="!showSpaceTime"
+                    class="img yes-events"
+                    @click="handlePage"
+                    src="@/assets/images/home/table-btn-sk.png"
+                    alt=""
+                />
+                <space-time
+                    v-if="showSpaceTime"
+                    @collapse="handleSpaceTimeCollapse"
+                    :class="{ expanded: showSpaceTime }"
+                ></space-time>
             </div>
             <div class="right yes-events" :class="{ 'collapsed-right': isRightShrink }">
-                <div class="home-btn">
-                    <div class="btn" @click="changeRightComponent(0)" :class="{ active: activeRightBtn === 0 }">
-                        精细农事
+                <div class="left-wrap">
+                    <div class="home-btn right-btn">
+                        <div class="btn" @click="changeRightComponent(0)" :class="{ active: activeRightBtn === 0 }">
+                            精细农事
+                        </div>
+                        <div class="btn" @click="changeRightComponent(1)" :class="{ active: activeRightBtn === 1 }">
+                            人机执行
+                        </div>
                     </div>
-                    <div class="btn" @click="changeRightComponent(1)" :class="{ active: activeRightBtn === 1 }">
-                        人机执行
+                    <div class="left-content">
+                        <component
+                            :is="components[currentRightComponent]"
+                            @airLineCallback="airLineCallback"
+                            @startEditLine="startEditLine"
+                        />
+                        <tool-list
+                            direction="right"
+                            ref="rightTool"
+                            :list="rightToolList[activeRightBtn]"
+                            @handleActive="handleActiveRight"
+                        ></tool-list>
+                        <!-- 箭头 -->
+                        <div class="arrow" @click="handleShrink('right')">
+                            <el-icon class="icon" :class="{ 'arrow-right': isRightShrink }" color="#141414"
+                                ><DArrowLeft
+                            /></el-icon>
+                        </div>
                     </div>
                 </div>
-                <component :is="components[currentRightComponent]" @airLineCallback="airLineCallback" @startEditLine="startEditLine" />
-                <tool-list
-                    direction="right"
-                    ref="rightTool"
-                    :list="rightToolList[activeRightBtn]"
-                    @handleActive="handleActiveRight"
-                ></tool-list>
-                <!-- 箭头 -->
-                <div class="arrow" @click="handleShrink('right')">
-                    <el-icon class="icon" :class="{ 'arrow-right': isRightShrink }" color="#141414"><DArrowLeft /></el-icon>
-                </div>
             </div>
 
-            <div v-if="isEditLine"  class="map-bg map-legend" style="right: 580px" @click="deleteLine">删除</div>
+            <div v-if="isEditLine" class="map-bg map-legend" style="right: 580px" @click="deleteLine">删除</div>
 
             <!-- 图例 -->
             <!-- <img class="legend yes-events" src="@/assets/images/home/legend-img.png" alt="" /> -->
@@ -268,6 +296,10 @@ function handleCompare(v) {
     if (v === false) {
         showCompareBtn.value = v;
     }
+    if (samplePointLayer) {
+        samplePointLayer.clearComparePoints && samplePointLayer.clearComparePoints();
+    }
+    compareData.value = [];
 }
 
 const showSpaceTime = ref(false);
@@ -330,13 +362,13 @@ const organId = ref(null);
 const regionId = ref(null);
 const tabName = ref("");
 const tabId = ref(0);
-function updateLegend(matchedData,parsedLegendConfig,isInit) {
+function updateLegend(matchedData, parsedLegendConfig, isInit) {
     legendArr.value = parsedLegendConfig;
     // 将匹配的数据传递给samplePointLayer进行点位颜色更新
     if (samplePointLayer && matchedData && matchedData.length > 0) {
         if (isInit) {
-            samplePointLayer.initData(organId.value, regionId.value,true,matchedData);
-        }else{
+            samplePointLayer.initData(organId.value, regionId.value, true, matchedData);
+        } else {
             samplePointLayer.updatePointColors(matchedData);
         }
     }
@@ -484,11 +516,11 @@ const leftToolList = [
         },
         {
             title: "病虫指标",
-            componentName: "leftDiseases"
+            componentName: "leftDiseases",
         },
         {
             title: "营养评估",
-            componentName: "leftNutrition"
+            componentName: "leftNutrition",
         },
     ],
 ];
@@ -561,19 +593,18 @@ const airLineCallback = (data) => {
     }
 };
 
-const isEditLine = ref(false)
+const isEditLine = ref(false);
 function startEditLine() {
-    isEditLine.value = true
+    isEditLine.value = true;
     // 监听选中要素变化
-      airLineStringLayer.selectInteraction.on('select', (event) => {
-        console.log('event.selected.length', event.selected.length);
-      });
-      airLineStringLayer.enterEditMode();
-      
+    airLineStringLayer.selectInteraction.on("select", (event) => {
+        console.log("event.selected.length", event.selected.length);
+    });
+    airLineStringLayer.enterEditMode();
 }
 
 function deleteLine() {
-airLineStringLayer.deleteSelectedPoints();
+    airLineStringLayer.deleteSelectedPoints();
 }
 
 const rightToolList = [
@@ -659,15 +690,16 @@ const photoList = ref([
 
     .content {
         width: 100%;
-        height: calc(100% - 74px - 48px - 54px);
+        height: calc(100% - 48px - 54px);
         display: flex;
         justify-content: space-between;
         box-sizing: border-box;
-        margin-top: 60px;
+        margin-top: 10px;
+        overflow: hidden;
         .home-btn {
-            position: absolute;
-            top: -60px;
-            left: 0;
+            // position: absolute;
+            // top: -60px;
+            // left: 0;
             height: 54px;
             display: flex;
             border: 1px solid #444444;
@@ -675,7 +707,10 @@ const photoList = ref([
             border-radius: 0 8px 8px 0;
             padding: 8px;
             box-sizing: border-box;
-            width: 429px;
+            width: calc(100% - 2px);
+            &.right-btn {
+                border-radius: 8px 0 0 8px;
+            }
             .btn {
                 flex: 1;
                 background: rgba(79, 79, 79, 0.6);
@@ -700,11 +735,25 @@ const photoList = ref([
         .right {
             width: calc(376px + 54px);
             height: 100%;
-            margin-top: 10px;
+            margin-top: 0px;
             box-sizing: border-box;
             display: flex;
-            position: relative;
+            // position: relative;
             transition: transform 0.3s;
+            .left-content {
+                height: calc(100% - 54px - 8px);
+                width: 100%;
+                position: relative;
+                margin-top: 6px;
+                display: flex;
+                background: #101010;
+                border-radius: 4px;
+                border: 1px solid #444444;
+            }
+            .left-wrap {
+                width: 100%;
+                height: 100%;
+            }
         }
         .collapsed-left {
             transform: translateX(-430px);
@@ -718,10 +767,8 @@ const photoList = ref([
         .arrow-right {
             transform: rotate(-180deg);
         }
-        .left,.right {
-            background: #101010;
-            border-radius: 4px;
-            border: 1px solid #444444;
+        .left,
+        .right {
             .arrow {
                 position: absolute;
                 right: -16px;
@@ -804,7 +851,7 @@ const photoList = ref([
                     }
                 }
             }
-            .arrow{
+            .arrow {
                 left: -16px;
                 transform: rotate(180deg);
             }
@@ -1005,11 +1052,15 @@ const photoList = ref([
 <style lang="less">
 .file-wrap {
     &.map-file {
-        width: 367px;
+        // width: 367px;
+        width: fit-content;
         position: relative;
-        background: url("@/assets/images/home/file-bg.png") no-repeat top center / 100% 100%;
+        // background: url("@/assets/images/home/file-bg.png") no-repeat top center / 100% 100%;
+        background: linear-gradient(180deg, #3d3a2f 6%, rgba(10, 10, 10, 1) 50%, rgba(10, 10, 10, 1) 100%);
+        border-radius: 12px;
+        border: 1px solid #bbbbbb;
         margin-left: 12px;
-        padding: 12px;
+        padding: 12px 12px 20px 12px;
         .file-title {
             font-size: 20px;
             color: #ffd489;
@@ -1111,7 +1162,7 @@ const photoList = ref([
             display: flex;
             .box-item {
                 // flex: 1;
-                min-width: 109px;
+                min-width: 90px;
                 display: flex;
                 flex-direction: column;
                 justify-content: center;
@@ -1160,5 +1211,4 @@ const photoList = ref([
     width: 96% !important;
     margin: 0 auto;
 }
-
 </style>

src/views/home/map/samplePointLayer.js

@@ -99,6 +99,23 @@ class SamplePointLayer {
     })
 
   }
+
+  clearComparePoints() {
+    try {
+      // Reset visual state on previously selected features
+      if (this.comparePointArr && this.comparePointArr.length) {
+        this.comparePointArr.forEach((feature) => {
+          feature && feature.set && feature.set("activeCompare", false);
+        });
+      }
+      // Clear internal array and emit update to hide compare button upstream
+      this.comparePointArr = [];
+      eventBus.emit("clickToCompare:point", this.comparePointArr);
+    } catch (e) {
+      // no-op
+    }
+  }
+
   getIconStyle(feature) {
     const showFightStatus = feature.get('showFightStatus')
     if(showFightStatus){
@@ -652,7 +669,7 @@ class SamplePointLayer {
 
   // 清除聚合图层，解除绑定
   clearCluster() {
-    if (this.treeClusterLayer && this.treeClusterLayer.layer.getSource().getSource()) {
+    if (this.treeClusterLayer && this.treeClusterLayer.layer.getSource() && this.treeClusterLayer.layer.getSource().getSource()) {
       this.treeClusterLayer.layer.getSource().getSource().clear()
     }
   }

src/views/workDetail/index.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="base-container">
+        <fnHeader :hideSwitch="true" :hideShadow="true" showDate></fnHeader>
         <div class="content">
             <div class="content-left">
                 <div class="btn" @click="goBack">