fix: 首页、果园页

src/components/chartBox.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="chart-box" :class="color">
+    <img class="title-bg" v-if="name" src="@/assets/images/common/title-bg.png" />
     <div class="chart-title" v-if="name">
       <div class="name">
-        <img :src="require(`@/assets/images/common/chart-${color || 'icon'}.png`)" alt="" />
+        <!-- <img :src="require(`@/assets/images/common/chart-${color || 'icon'}.png`)" alt="" /> -->
         <span>{{name}}</span>
         <slot name="title-left"></slot>
       </div>
@@ -12,9 +13,6 @@
     </div>
     <slot v-else name="title-name"></slot>
     <div class="chart-content">
-        <div v-show="arrow" :class="['arrow',arrow]" @click="handleShrink">
-            <el-icon class="icon" color="#141414"><DArrowLeft /></el-icon>
-        </div>
         <slot></slot>
     </div>
   </div>
@@ -49,26 +47,34 @@ const handleShrink = () =>{
   height: 100%;
   box-sizing: border-box;
   border-radius: 4px;
-  background: #232323;
-  border: 0.6px solid rgb(255, 255, 255,0.4);
+  background: rgba(255, 255, 255, 0.06);
+  position: relative;
+  // border: 0.6px solid rgb(255, 255, 255,0.4);
+  .title-bg {
+    position: absolute;
+    top: -10px;
+    left: 0;
+  }
 
   .chart-title {
+    position: relative;
+    top: -12px;
     width: 100%;
     height: 38px;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    border-bottom: 0.6px solid rgb(255, 255, 255, 0.4);
+    // border-bottom: 0.6px solid rgb(255, 255, 255, 0.4);
     padding: 0 12px;
     box-sizing: border-box;
+    // background: url("@/assets/images/common/title-bg.png") no-repeat left center;
     .name {
       display: flex;
       align-items: center;
       padding: 0 12px;
       span{
         font-size: 18px;
-        margin-left: 6px;
-        font-family: 'SOURCEHANTIFINE';
+        margin-left: 22px;
         margin-right: 8px;
       }
     }

src/components/charts/options/barOption.js

@@ -50,11 +50,11 @@ const styleName1 = {
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
           {
             offset: 0,
-            color: "#BBA269",
+            color: "#40DFCA",
           },
           {
             offset: 1,
-            color: "#3D3523",
+            color: "#0D3C33",
           },
         ]),
         borderRadius: [2, 2, 0, 0],
@@ -116,11 +116,11 @@ const styleName2 = {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: "#ff0000",
+              color: "#27B9DD",
             },
             {
               offset: 1,
-              color: "#B81500",
+              color: "#00617E",
             },
           ]),
         },
@@ -137,7 +137,7 @@ const styleName2 = {
       stack: "total",
       itemStyle: {
         normal:{
-          color: "rgba(56,56,56,0.94)",
+          color: "#25403F",
         },
         emphasis: {
           color: '#B81500' // 高亮时的颜色
@@ -209,11 +209,11 @@ const styleName3 = {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: "#bb7d4c",
+              color: "#40DFCA",
             },
             {
               offset: 1,
-              color: "#90603a",
+              color: "#0D3C33",
             },
           ]),
         },

src/components/charts/options/oneLineOption.js

@@ -95,12 +95,12 @@ export const oneLine = {
             symbol: "none",
             itemStyle: { color: "#FF7219" },
             lineStyle: {
-                color: "#FF7219", // 折线颜色为红色
+                color: "#3FFFF2", // 折线颜色为红色
                 width: 2, // 线条宽度
             },
             areaStyle: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    { offset: 0, color: "#F0AC37" }, // 渐变起始颜色
+                    { offset: 0, color: "rgba(3, 234, 207, 0.6)" }, // 渐变起始颜色
                     { offset: 1, color: "rgba(35, 35, 35, 0)" }, // 渐变结束颜色
                 ]),
             },

src/components/fnHeader.vue

@@ -192,7 +192,7 @@ onUnmounted(()=>{
   top: 0;
   width: 100%;
   height: 200px;
-  background: linear-gradient( 0deg, rgba(0, 21, 31,0), #00151f);
+  background: linear-gradient( 0deg, rgba(0, 21, 31,0), rgba(0, 24, 31, 0.8) 50%, #00181F);
 }
 .bg-right{
   top: 0;
@@ -224,7 +224,7 @@ onUnmounted(()=>{
         box-shadow: 0px 0px 12px rgba(255, 212, 137, 0.3);
         .el-select-dropdown__item {
             background: none;
-            color: rgba(255, 212, 137, 0.6);
+            color: rgba(9, 243, 200, 0.6);
         }
         .el-select-dropdown__item.is-selected {
             background: rgba(255, 212, 137, 0.2);

src/components/timeLine.vue

@@ -216,7 +216,7 @@ const restActive = () => {
         position: relative;
         z-index: 2;
         .active-line {
-            background: linear-gradient(30deg, #eccd9b 0% ,#F3C11D 100%,);
+            background: linear-gradient(30deg, #eccd9b 0% ,#3FFFF2 100%,);
             position: absolute;
             top: 0;
             left: 0;
@@ -256,7 +256,7 @@ const restActive = () => {
                 text-align: center;
                 line-height: 20px;
                 border-radius: 5px;
-                background: linear-gradient(180deg,#F3C11D 0%,#715803 100%);
+                background: linear-gradient(180deg,#3FFFF2 0%,#715803 100%);
                 &::before{
                     content: '';
                     position: absolute;
@@ -311,12 +311,12 @@ const restActive = () => {
             }
 
             &.cur-category{
-                color: #F3C11D;
+                color: #3FFFF2;
                 .color{
-                    color: #F3C11D;
+                    color: #3FFFF2;
                 }
                 .dot{
-                    background: #f3c11d;
+                    background: #3FFFF2;
                     &::after{
                         border: 2px solid rgba(243,193,29,0.2);
                     }

src/styles/common.scss

@@ -361,6 +361,10 @@ div{
     font-style: normal; /* 字体风格 */  
 }
 
+.PangMenZhengDao-FONT {
+    font-family: 'PangMenZhengDao'; /* 定义字体名称 */  
+}
+
 @font-face {  
     font-family: 'SOURCEHANTIFINE'; /* 定义字体名称 */  
     src: url('@/assets/font/SOURCEHANSANSCN-NORMAL.OTF') format('truetype');

src/views/home/album/index.vue

@@ -135,7 +135,7 @@
                                                 <span class="desc-title">指导专家：</span>
                                                 <span class="expert-link" @click="toExpert(card.expertName)">
                                                     {{ card.expertName }}
-                                                    <el-icon color="#F0AC37" class="icon" size="12"><Link /></el-icon>
+                                                    <el-icon color="#09F3C8" class="icon" size="12"><Link /></el-icon>
                                                 </span>
                                             </div>
                                         </div>
@@ -625,9 +625,9 @@ function addNsRecord(){
                         align-items: flex-end;
                         justify-content: space-between;
                         .edit-btn {
-                            border: 1px solid #F0AC37;
+                            border: 1px solid #09F3C8;
                             border-radius: 5px;
-                            color: #F0AC37;
+                            color: #09F3C8;
                             text-align: center;
                             padding: 4px 2px;
                             font-size: 9px;
@@ -688,7 +688,7 @@ function addNsRecord(){
                     box-shadow: 0 2px 4px #ccc;
                     .btn-box {
                         height: 100%;
-                        background: linear-gradient(0deg,#FFFBF2 0%, #FF9500 31% , #FF9500 78%);
+                        background: linear-gradient(45deg, #51E0C4 0%, #00AE91 91%);
                         border-radius: 30px;
                         display: flex;
                         align-items: center;
@@ -755,16 +755,16 @@ function addNsRecord(){
                                 }
                                 &.is-active {
                                     background: transparent;
-                                    color: #F0AC37;
+                                    color: #09F3C8;
                                     .menu-name {
                                         // color: #666666;
                                     }
                                 }
                                 &.active {
                                     background: #232323;
-                                    color: #F0AC37;
+                                    color: #09F3C8;
                                     .menu-name {
-                                        color: #F0AC37;
+                                        color: #09F3C8;
                                     }
                                 }
                             }
@@ -777,7 +777,7 @@ function addNsRecord(){
                         color: rgba(33, 153, 248, 1);
                     }
                     .onTime {
-                        color: rgba(255, 212, 137, 0.6);
+                        color: rgba(9, 243, 200, 0.6);
                     }
                 }
                 ::v-deep {
@@ -797,7 +797,7 @@ function addNsRecord(){
                     height: 100%;
                     overflow: auto;
                     .common-btn {
-                        background: #F0AC37;
+                        background: #09F3C8;
                         border-radius: 4px;
                         color: #fff;
                         padding: 8px 10px;
@@ -828,8 +828,8 @@ function addNsRecord(){
                         // background: #001917;
                         border-radius: 8px;
                         padding: 0 8px 8px 8px;
-                        border: 1px solid rgba(255, 218, 102, 0.3);
-                        background: rgba(105, 73, 13, 0.1);
+                        border: 1px solid #00B78D;
+                        background: rgba(255, 255, 255, 0.06);
                         &.push {
                             padding: 0 8px 12px 8px;
                             // margin-bottom: 8px;
@@ -859,7 +859,7 @@ function addNsRecord(){
                                 padding-bottom: 8px;
                                 .serve-btn {
                                     padding: 3px 10px;
-                                    background: #F0AC37;
+                                    background: #09F3C8;
                                     border-radius: 22px;
                                     color: #fff;
                                     text-align: center;
@@ -882,7 +882,7 @@ function addNsRecord(){
                                     background: rgba(243, 163, 2, 0.2);
                                     border: 1px solid transparent;
                                     &.blue {
-                                        color: #F0AC37;
+                                        color: #09F3C8;
                                         background: rgba(33, 153, 248, 0.2);
                                     }
                                     &.good-wrap {
@@ -895,9 +895,9 @@ function addNsRecord(){
                                         }
                                     }
                                     &.standard {
-                                        color: #F0AC37;
+                                        color: #09F3C8;
                                         background: #232323;
-                                        border-color: #F0AC37;
+                                        border-color: #09F3C8;
                                     }
                                     &.advice {
                                         color: rgba(252, 167, 3, 0.9);
@@ -917,7 +917,7 @@ function addNsRecord(){
                                         position: absolute;
                                         right: -8px;
                                         top: 0;
-                                        background: #55E5C6;
+                                        background: #00CF9F;
                                         color: #fff;
                                         font-size: 12px;
                                         border-radius: 0 8px 0 8px;
@@ -927,7 +927,7 @@ function addNsRecord(){
                                             background: #494949;
                                         }
                                         &.recheck {
-                                            background: #f3c11d;
+                                            background: #3FFFF2;
                                         }
                                     }
                                     .tag {
@@ -979,7 +979,7 @@ function addNsRecord(){
                                 .expert-link {
                                     display: inline-flex;
                                     align-items: center;
-                                    color: #F0AC37;
+                                    color: #09F3C8;
                                     .icon {
                                         padding-left: 4px;
                                     }
@@ -995,13 +995,13 @@ function addNsRecord(){
                                 flex-direction: column;
                                 align-items: center;
                                 justify-content: center;
-                                color: #A46700;
+                                color: #fff;
                                 font-size: 12px;
                                 position: absolute;
                                 right: 6px;
                                 top: 20px;
                                 .expert-name {
-                                    background: #55E5C6;
+                                    background: #00CF9F;
                                     border-radius: 4px;
                                     padding: 2px 6px 3px 10px;
                                     margin-top: 4px;
@@ -1048,7 +1048,7 @@ function addNsRecord(){
                             background: #232323;
                             border-radius: 8px;
                             color: #55E5C6;
-                            border: 1px solid rgba(255, 212, 137, 0.3);
+                            border: 1px solid #00B78D;
                             .log-title {
                                 font-family: "PangMenZhengDao";
                                 position: relative;
@@ -1096,7 +1096,7 @@ function addNsRecord(){
                     left: -2px;
                     width: 100%;
                     height: calc(100% - 2px);
-                    border: 2px solid #F0AC37;
+                    border: 2px solid #00B78D;
                     animation: flash 0.4s infinite alternate;
                     border-radius: 8px;
                     pointer-events: none;
@@ -1105,12 +1105,12 @@ function addNsRecord(){
 
             @keyframes flash {
                 0% {
-                    box-shadow: 0 0 5px #F0AC37;
-                    border-color: #F0AC37;
+                    box-shadow: 0 0 5px #00B78D;
+                    border-color: #00B78D;
                 }
                 100% {
-                    box-shadow: 0 0 20px #F0AC37;
-                    border: 2px solid #F0AC37;
+                    box-shadow: 0 0 20px #00B78D;
+                    border: 2px solid #00B78D;
                 }
             }
         }
@@ -1157,7 +1157,7 @@ function addNsRecord(){
                         color: #fff;
                     }
                     .num {
-                        color: #f3c11d;
+                        color: #3FFFF2;
                         margin-left: 2px;
                     }
                 }

src/views/home/components/homePage.vue

@@ -2,13 +2,22 @@
   <div class="chart-list">
     <div class="chart-item">
       <chart-box name="气象预警" arrow="left">
-        <template #title-right>
+        <!-- <template #title-right>
           <div class="button" @click="gybg">果园报告</div>
-        </template>
+        </template> -->
         <div class="base-wrap">
-          <!-- <div class="base-item">111</div> -->
-          <img src="@/assets/images/home/base1.png" alt="">
-        </div>
+              <div
+                  :class="['base-item']"
+                  v-for="(item, index) in reportData.rates"
+                  :key="index"
+              >
+                  <div class="label width" v-if="item.name==='花芽冻伤'">{{ item.name }}风险</div>
+                  <div class="label" v-else>{{ item.name }}</div>
+                  <div class="value" :style="{ marginLeft: item.increase != null ? '-12px' : 0 }">
+                     <span class="font-val">{{item.rate}}</span> %
+                  </div>
+              </div>
+          </div>
         <one-line-chart class="line-chart"></one-line-chart>
       </chart-box>
     </div>
@@ -119,6 +128,26 @@ const phenologyYData = [{
   endColor:"#4e442e"
 }]
 
+const reportData = {
+  rates:[
+    {
+        "increase": null,
+        "name": "长花穗率",
+        "rate": 85
+    },
+    {
+        "increase": null,
+        "name": "花带叶率",
+        "rate": 78
+    },
+    {
+        "increase": null,
+        "name": "啃食虫害",
+        "rate": 0
+    }
+]
+}
+
 // 病虫测报
 const diseasesBtnGroup = ["病害1","病害2","病害3"]
 const active = ref(0)
@@ -161,7 +190,7 @@ const gybg= ()=>{
 
 <style lang="scss" scoped>
 .chart-list {
-  width: calc(100% - 54px - 10px);
+  width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -170,7 +199,7 @@ const gybg= ()=>{
     width: 100%;
     height: calc(100% / 4);
     box-sizing: border-box;
-    margin-bottom: 10px;
+    margin-bottom: 14px;
     .button{
       border: 1px solid rgba(255, 255, 255, 0.4);
       border-radius: 4px;
@@ -180,15 +209,72 @@ const gybg= ()=>{
     &.chart-item:last-child {
       margin: 0;
     }
-    .base-wrap{
-      width: 100%;
-      height: 65px;
-      margin-top: 4px;
-      img{
-        width: 100%;
-        height: 100%;
-      }
-    }
+    .base-wrap {
+            width: 100%;
+            height: auto;
+            margin-bottom: 6px;
+            display: flex;
+            justify-content: space-evenly;
+            pointer-events: none;
+            .base-item {
+                width: 78px;
+                height: 68px;
+                font-size: 12px;
+                text-align: center;
+                box-sizing: border-box;
+                color: #3FFFF2;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                margin: 0 8px;
+                background: url("@/assets/images/home/scale-bg.png") no-repeat center center / 100% 100%;
+                .label {
+                    width: 70px;
+                    height: 20px;
+                    line-height: 20px;
+                    margin-bottom: 3px;
+                    color: #fff;
+                    background: #00B78D;
+                    border-radius: 0 5px 0 5px;
+                    &.width{
+                        width: 86px;
+                    }
+                }
+                .value {
+                    position: relative;
+                    margin-left: -12px;
+                    .font-val {
+                      font-size: 20px;
+                      font-family: "PangMenZhengDao";
+                    }
+                    .variation {
+                        position: absolute;
+                        top: 4px;
+                        right: -46px;
+                        width: 38px;
+                        background: #3e3e3e;
+                        border: 1px solid rgba(255, 255, 255, 0.4);
+                        border-radius: 20px;
+                        color: rgba(255, 255, 255, 0.7);
+                        font-family: "PangMenZhengDao";
+                        font-size: 9px;
+                        display: flex;
+                        align-items: baseline;
+                        justify-content: center;
+                        &.position {
+                            right: -30px;
+                        }
+                        span {
+                            font-size: 11px;
+                        }
+                        img {
+                            width: 8px;
+                            height: 10px;
+                        }
+                    }
+                }
+            }
+        }
     .line-chart{
         height: calc(100% - 55px);
       }

src/views/home/index.vue

@@ -1,103 +1,107 @@
 <template>
-  <div class="base-container no-events">
-    <fnHeader showDate></fnHeader>
-    <div class="content">
-      <navigation></navigation>
-      <div class="left yes-events">
-        <tool-list
-          direction="left"
-          :list="leftToolList"
-          @handleActive="handleActiveLeft"
-        ></tool-list>
-        <component :is="components[currentComponent]" />
-      </div>
-      <div class="home-bottom">
-        <div class="log-box yes-events">
-          <chart-box class="overflow">
-            <template #title-name>
-              <div class="box-name" @click="handleSelectArea">果园日志</div>
-            </template>
-            <div class="log-content">
-              2月13日，共抽样193棵树，拍摄了193张照片，{{indicatorChartData.content}}
-            </div>
-            <div class="chart-wrap">
-              <indicator-chart :key="0 + 'log'" type="feature" :chartData="indicatorChartData"></indicator-chart>
-              <!-- <img class="line" src="@/assets/images/home/time1.png" alt=""> -->
-              <!-- <img src="@/assets/images/home/text.png" alt=""> -->
-            </div>
-          </chart-box>
-        </div>
-        <div class="file-box yes-events">
-          <chart-box name="果园档案">
-            <template #title-right>
-              <el-icon class="arrow-icon cursor-pointer" color="#141414"
-                ><DArrowLeft
-              /></el-icon>
-              <div class="edit-btn cursor-pointer" @click="toFilePage">编辑</div>
-            </template>
-            <!-- <file-bar></file-bar> -->
-            <img src="@/assets/images/home/line-data.png" alt="">
-          </chart-box>
+    <div class="base-container no-events">
+        <fnHeader showDate></fnHeader>
+        <div class="back btn yes-evetns" @click="goBack">
+          <img class="icon" src="@/assets/images/common/back-icon.png" alt="" />
+          <span>返回</span>
         </div>
-      </div>
-      <div class="right yes-events">
-        <div class="list">
-          <chart-box name="农事列表" arrow="arrow-left" :class="{'list-wrap': rightIndex===0}">
-            <template v-if="rightIndex===0">
-              <album></album>
-              <!-- <img class="tabs" src="@/assets/images/home/ns-tabs.png" alt="">
+        <div class="content">
+            <!-- <navigation></navigation> -->
+            <div class="left yes-events">
+                <!-- <tool-list direction="left" :list="leftToolList" @handleActive="handleActiveLeft"></tool-list> -->
+                <component :is="components[currentComponent]" />
+            </div>
+            <!-- <div class="home-bottom">
+                <div class="log-box yes-events">
+                    <chart-box class="overflow">
+                        <template #title-name>
+                            <div class="box-name" @click="handleSelectArea">果园日志</div>
+                        </template>
+                        <div class="log-content">
+                            2月13日，共抽样193棵树，拍摄了193张照片，{{ indicatorChartData.content }}
+                        </div>
+                        <div class="chart-wrap">
+                            <indicator-chart
+                                :key="0 + 'log'"
+                                type="feature"
+                                :chartData="indicatorChartData"
+                            ></indicator-chart>
+                        </div>
+                    </chart-box>
+                </div>
+                <div class="file-box yes-events">
+                    <chart-box name="果园档案">
+                        <template #title-right>
+                            <el-icon class="arrow-icon cursor-pointer" color="#141414"><DArrowLeft /></el-icon>
+                            <div class="edit-btn cursor-pointer" @click="toFilePage">编辑</div>
+                        </template>
+                        <img src="@/assets/images/home/line-data.png" alt="" />
+                    </chart-box>
+                </div>
+            </div> -->
+            <div class="right yes-events">
+                <div class="list">
+                    <chart-box name="农情动态" arrow="arrow-left" :class="{ 'list-wrap': rightIndex === 0 }">
+                        <template v-if="rightIndex === 0">
+                          <!-- <div class="sub-title">
+                            <img src="@/assets/images/common/title-icon.png" />
+                            <span>农情动态</span>
+                          </div> -->
+                            <album></album>
+                            <!-- <img class="tabs" src="@/assets/images/home/ns-tabs.png" alt="">
               <div class="img-box">
                 <img @click="handleAct(item)" v-for="item in 2" :key="item" :src="require(`@/assets/images/home/0${act<=2&&act==item?item+'-act':item}.png`)" alt="">
               </div> -->
-            </template>
-            <template v-if="rightIndex===1">
-              <div class="img-box1">
-                <img  src="@/assets/images/home/fh01.png" alt="">
-                <img src="@/assets/images/home/fh02.png" alt="">
-              </div>
-            </template>
-            <template v-if="rightIndex===2">
-              <div class="btn-wrap">
-                <div :class="{active:btnIndex===0}" @click="handleBtn(0)">{{btnIndex===0&&btnName!=''?'采样分区：'+ btnName:'选择采样分区'}}</div>
-                <div :class="{active:btnIndex===1}" @click="handleBtn(1)">{{btnIndex===1&&btnName!=''?'单树编号：'+ btnName:'选择树'}}</div>
-              </div>
-                <div class="img-box2" v-show="showPoint">
-                  <img v-if="showType==='point'" src="@/assets/images/home/line-chart.png" alt="">
-                  <img v-else src="@/assets/images/home/line-chart2.png" alt="">
-                  <img src="@/assets/images/home/fh01.png" alt="">
-                </div>
-                <div class="img-box2" v-show="!showPoint">
-                  <img v-if="showType==='point'" src="@/assets/images/home/line-chart1.png" alt="">
-                  <img v-else src="@/assets/images/home/line-chart3.png" alt="">
-                  <img src="@/assets/images/home/fh02.png" alt="">
+                        </template>
+                        <template v-if="rightIndex === 1">
+                            <div class="img-box1">
+                                <img src="@/assets/images/home/fh01.png" alt="" />
+                                <img src="@/assets/images/home/fh02.png" alt="" />
+                            </div>
+                        </template>
+                        <template v-if="rightIndex === 2">
+                            <div class="btn-wrap">
+                                <div :class="{ active: btnIndex === 0 }" @click="handleBtn(0)">
+                                    {{ btnIndex === 0 && btnName != "" ? "采样分区：" + btnName : "选择采样分区" }}
+                                </div>
+                                <div :class="{ active: btnIndex === 1 }" @click="handleBtn(1)">
+                                    {{ btnIndex === 1 && btnName != "" ? "单树编号：" + btnName : "选择树" }}
+                                </div>
+                            </div>
+                            <div class="img-box2" v-show="showPoint">
+                                <img v-if="showType === 'point'" src="@/assets/images/home/line-chart.png" alt="" />
+                                <img v-else src="@/assets/images/home/line-chart2.png" alt="" />
+                                <img src="@/assets/images/home/fh01.png" alt="" />
+                            </div>
+                            <div class="img-box2" v-show="!showPoint">
+                                <img v-if="showType === 'point'" src="@/assets/images/home/line-chart1.png" alt="" />
+                                <img v-else src="@/assets/images/home/line-chart3.png" alt="" />
+                                <img src="@/assets/images/home/fh02.png" alt="" />
+                            </div>
+                        </template>
+                    </chart-box>
                 </div>
-            </template>
-          </chart-box>
-        </div>
-        <tool-list direction="right" :list="rightToolList" @handleActive="handleActiveRight"></tool-list>
-      </div>
+                <!-- <tool-list direction="right" :list="rightToolList" @handleActive="handleActiveRight"></tool-list> -->
+            </div>
 
-      <!-- 图例 -->
-      <img class="legend yes-events" src="@/assets/images/home/legend.png" alt="">
+            <!-- 图例 -->
+            <img class="legend yes-events" src="@/assets/images/home/legend.png" alt="" />
+        </div>
     </div>
-  </div>
-  <div ref="mapRef" class="bottom-map"></div>
+    <div ref="mapRef" class="bottom-map"></div>
 
-  <!-- 图片弹窗 -->
-  <PicturePreview
-    :imageUrl="urls"
-    :curIndex="urlsIndex"
-  ></PicturePreview>
+    <!-- 图片弹窗 -->
+    <PicturePreview :imageUrl="urls" :curIndex="urlsIndex"></PicturePreview>
     <album-carousel></album-carousel>
-  <PdfDialog title="果园报告" ></PdfDialog>
+    <PdfDialog title="果园报告"></PdfDialog>
 </template>
 
 <script setup>
 import { onMounted, ref } from "vue";
-import config from "@/api/config.js"
+import config from "@/api/config.js";
 import PicturePreview from "@/components/PicturePreview.vue";
 import fnHeader from "@/components/fnHeader.vue";
-import navigation from "@/components/navigation.vue";
+// import navigation from "@/components/navigation.vue";
 import chartBox from "@/components/chartBox.vue";
 import toolList from "@/components/toolList.vue";
 import fileBar from "@/components/fileBar.vue";
@@ -108,456 +112,478 @@ import phenologyPage from "./components/phenologyPage.vue";
 import indicatorChart from "./components/indicatorChart.vue";
 import { useRouter } from "vue-router";
 import SamplePointLayer from "./map/samplePointLayer";
-import {useStore} from "vuex";
+import { useStore } from "vuex";
 import RegionLayer from "./map/regionLayer";
 import eventBus from "@/api/eventBus";
 import AlbumCarousel from "./album_compoents/albumCarousel.vue";
 import album from "./album/index.vue";
-import PdfDialog from "../../components/PdfDialog"
-let store = useStore()
+import PdfDialog from "../../components/PdfDialog";
+let store = useStore();
 const components = {
-  homePage,
-  weatherPage,
-  phenologyPage,
+    homePage,
+    weatherPage,
+    phenologyPage,
 };
 //当前农场
 const currentFarm = {
-  id: store.getters.userinfo.curFarmId,
-  name: store.getters.userinfo.curFarmName,
-}
+    id: store.getters.userinfo.curFarmId,
+    name: store.getters.userinfo.curFarmName,
+};
 //当前区域
 const currentRegion = {
-  id: null,
-  name: null
-}
+    id: null,
+    name: null,
+};
 let homeMap = new HomeMap();
-let samplePointLayer = null
-let regionLayer = null
+let samplePointLayer = null;
+let regionLayer = null;
 const router = useRouter();
 const mapRef = ref();
 onMounted(() => {
-  homeMap.initMap("POINT(113.61448114737868 23.585550924763083)", mapRef.value);
-  // homeMap.initMap(store.getters.userinfo.location, mapRef.value);
-  samplePointLayer = new SamplePointLayer(homeMap.kmap.map, currentFarm, currentRegion)
-  regionLayer = new RegionLayer(homeMap.kmap.map, currentFarm, currentRegion)
+    homeMap.initMap("POINT(113.61448114737868 23.585550924763083)", mapRef.value);
+    // homeMap.initMap(store.getters.userinfo.location, mapRef.value);
+    samplePointLayer = new SamplePointLayer(homeMap.kmap.map, currentFarm, currentRegion);
+    regionLayer = new RegionLayer(homeMap.kmap.map, currentFarm, currentRegion);
 
-  getYellow()
-  getFarmLog()
+    getYellow();
+    getFarmLog();
 });
 
-const indicatorChartData = ref({})
-const blueZone = ref('ws0y1meyhxp4')
+const indicatorChartData = ref({});
+const blueZone = ref("ws0y1meyhxp4");
 
-const getFarmLog = () =>{
-  const params = {
-    id: null,
-    farmId: 766,
-    blueZone:blueZone.value
-  }
-  VE_API.warning.fetchFarmLog(params).then(({data}) => {
-        indicatorChartData.value = data || {}
-        eventBus.emit('chart:updateOption',data)
-    })
-}
+const getFarmLog = () => {
+    const params = {
+        id: null,
+        farmId: 766,
+        blueZone: blueZone.value,
+    };
+    VE_API.warning.fetchFarmLog(params).then(({ data }) => {
+        indicatorChartData.value = data || {};
+        eventBus.emit("chart:updateOption", data);
+    });
+};
 
-const urls = ref([])
-const urlsIndex = ref(0)
-const getYellow = () =>{
-  VE_API.home.getYellowList().then(res =>{
-    // urls.value = res.data.map(item =>{
-    //   return {
-    //     ...item,
-    //     imgPath:config.base_img_url2+item.cloudFilename
-    //   }
-    // })
-    // urls.value = [
-    //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-07.jpg",
-    //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-08.jpg",
-    //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-09.jpg",
-    //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-10.jpg",
-    //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-11.jpg",
-    //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-12.jpg",
-    //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-13.jpg",
-    // ]
-  })
-}
+const urls = ref([]);
+const urlsIndex = ref(0);
+const getYellow = () => {
+    VE_API.home.getYellowList().then((res) => {
+        // urls.value = res.data.map(item =>{
+        //   return {
+        //     ...item,
+        //     imgPath:config.base_img_url2+item.cloudFilename
+        //   }
+        // })
+        // urls.value = [
+        //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-07.jpg",
+        //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-08.jpg",
+        //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-09.jpg",
+        //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-10.jpg",
+        //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-11.jpg",
+        //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-12.jpg",
+        //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-13.jpg",
+        // ]
+    });
+};
 
-const btnIndex = ref(null)
-const btnName = ref("")
-const handleBtn = (e) =>{
-  btnName.value = ""
-  btnIndex.value = e
-  eventBus.emit("clear:area")
-  samplePointLayer.updateAreaStatus(e===0?true:false)
-  regionLayer.resetData()
-  samplePointLayer.resetPoint()
-}
+const btnIndex = ref(null);
+const btnName = ref("");
+const handleBtn = (e) => {
+    btnName.value = "";
+    btnIndex.value = e;
+    eventBus.emit("clear:area");
+    samplePointLayer.updateAreaStatus(e === 0 ? true : false);
+    regionLayer.resetData();
+    samplePointLayer.resetPoint();
+};
 
 //点击果园日志
-const handleSelectArea = () =>{
-  btnName.value = ""
-  btnIndex.value = null
-  eventBus.emit("clear:area")
-  regionLayer.resetData()
-  samplePointLayer.resetPoint()
-  samplePointLayer.updateAreaStatus(true)
-}
+const handleSelectArea = () => {
+    btnName.value = "";
+    btnIndex.value = null;
+    eventBus.emit("clear:area");
+    regionLayer.resetData();
+    samplePointLayer.resetPoint();
+    samplePointLayer.updateAreaStatus(true);
+};
 
 //农事点击高亮
-const act = ref(null)
-const handleAct = (v) =>{
-  act.value = v
-  samplePointLayer.resetPoint()
-  if(v===1){
-    regionLayer.selectAreaMultiple([
-      {value:2,color:"blue"},
-      {value:4,color:"blue1"},
-      {value:5,color:"blue2"},
-      {value:7,color:"blue"},
-      {value:13,color:"blue2"},
-    ])
-  }
-  if(v===2){
-    regionLayer.selectAreaMultiple([
-      {value:1,color:"blue"},
-      {value:2,color:"blue1"},
-      {value:9,color:"blue2"},
-      {value:12,color:"blue2"},
-    ])
-  }
-}
+const act = ref(null);
+const handleAct = (v) => {
+    act.value = v;
+    samplePointLayer.resetPoint();
+    if (v === 1) {
+        regionLayer.selectAreaMultiple([
+            { value: 2, color: "blue" },
+            { value: 4, color: "blue1" },
+            { value: 5, color: "blue2" },
+            { value: 7, color: "blue" },
+            { value: 13, color: "blue2" },
+        ]);
+    }
+    if (v === 2) {
+        regionLayer.selectAreaMultiple([
+            { value: 1, color: "blue" },
+            { value: 2, color: "blue1" },
+            { value: 9, color: "blue2" },
+            { value: 12, color: "blue2" },
+        ]);
+    }
+};
 
 //柱状图点击事件监听
-eventBus.on('echart:barClick',(e)=>{
-  btnName.value = ""
-  btnIndex.value = null
-  eventBus.emit("clear:area")
-  samplePointLayer.updateAreaStatus(false)
-  const arr =  ["花穗伸长", "啃食虫害","毛毡病"]
-  const isDraw = arr.includes(e)
-  const index = arr.indexOf(e)
-  if(isDraw){
-    if(index===0){
-      regionLayer.selectAreaMultiple([
-        {value:0,color:"green"},
-        {value:1,color:"green"},
-        {value:2,color:"green"},
-        {value:3,color:"green1"},
-        {value:4,color:"green1"},
-        {value:5,color:"green2"},
-        {value:6,color:"green1"},
-        {value:7,color:"green2"},
-        {value:8,color:"green2"},
-        {value:9,color:"green"},
-        {value:10,color:"green"},
-        {value:11,color:"green1"},
-        {value:12,color:"green2"},
-        {value:13,color:"green"},
-        {value:14,color:"green2"},
-      ])
-    }else if(index===1){
-      regionLayer.selectAreaMultiple([{value:6,color:"red"}])
-    }else{
-      regionLayer.selectAreaMultiple([
-        {value:12,color:"red2"},
-        {value:10,color:"red"},
-        {value:1,color:"red"}
-      ])
+eventBus.on("echart:barClick", (e) => {
+    btnName.value = "";
+    btnIndex.value = null;
+    eventBus.emit("clear:area");
+    samplePointLayer.updateAreaStatus(false);
+    const arr = ["花穗伸长", "啃食虫害", "毛毡病"];
+    const isDraw = arr.includes(e);
+    const index = arr.indexOf(e);
+    if (isDraw) {
+        if (index === 0) {
+            regionLayer.selectAreaMultiple([
+                { value: 0, color: "green" },
+                { value: 1, color: "green" },
+                { value: 2, color: "green" },
+                { value: 3, color: "green1" },
+                { value: 4, color: "green1" },
+                { value: 5, color: "green2" },
+                { value: 6, color: "green1" },
+                { value: 7, color: "green2" },
+                { value: 8, color: "green2" },
+                { value: 9, color: "green" },
+                { value: 10, color: "green" },
+                { value: 11, color: "green1" },
+                { value: 12, color: "green2" },
+                { value: 13, color: "green" },
+                { value: 14, color: "green2" },
+            ]);
+        } else if (index === 1) {
+            regionLayer.selectAreaMultiple([{ value: 6, color: "red" }]);
+        } else {
+            regionLayer.selectAreaMultiple([
+                { value: 12, color: "red2" },
+                { value: 10, color: "red" },
+                { value: 1, color: "red" },
+            ]);
+        }
     }
-  }
-})
+});
 
 //黄板点击事件监听
-eventBus.on('click:yellowBlock',(e)=>{
-  const arr = ["113.61396985128522","113.61390710255375","113.61491218688275"]
-  if(arr[0]==e){
-    urls.value = ["HB-ws0y1menggxv"]
-    urlsIndex.value = 0
-  }
-  if(arr[1]==e){
-    urls.value = ["HB-ws0y1mg0pvd" ]
-    urlsIndex.value = 3
-  }
-if(arr[2]==e){
-    urls.value = ["HB-ws0y1mg9wpcp"]
-    urlsIndex.value = 6
-  }
-  eventBus.emit('dialog:show',true)
-})
+eventBus.on("click:yellowBlock", (e) => {
+    const arr = ["113.61396985128522", "113.61390710255375", "113.61491218688275"];
+    if (arr[0] == e) {
+        urls.value = ["HB-ws0y1menggxv"];
+        urlsIndex.value = 0;
+    }
+    if (arr[1] == e) {
+        urls.value = ["HB-ws0y1mg0pvd"];
+        urlsIndex.value = 3;
+    }
+    if (arr[2] == e) {
+        urls.value = ["HB-ws0y1mg9wpcp"];
+        urlsIndex.value = 6;
+    }
+    eventBus.emit("dialog:show", true);
+});
 
-const showPoint = ref(true)
-const showType = ref("point")
+const showPoint = ref(true);
+const showType = ref("point");
 //地图点击事件
-eventBus.on('click:point',(e)=>{
-  showType.value = "point"
-  if(btnIndex.value===1){
-    btnName.value=e.name
-    if(e.value===1){
-      showPoint.value = true
-      samplePointLayer.updatePointStatus(true)
-    }else{
-      showPoint.value = false
+eventBus.on("click:point", (e) => {
+    showType.value = "point";
+    if (btnIndex.value === 1) {
+        btnName.value = e.name;
+        if (e.value === 1) {
+            showPoint.value = true;
+            samplePointLayer.updatePointStatus(true);
+        } else {
+            showPoint.value = false;
+        }
     }
-  }
-})
+});
 
 //地图点击区域事件
-eventBus.on('click:area',(e)=>{
-  showType.value = "area"
-  if(btnIndex.value===0){
-    btnName.value=e.name
-    if(e.value===1){
-      showPoint.value = true
-    }else{
-      showPoint.value = false
+eventBus.on("click:area", (e) => {
+    showType.value = "area";
+    if (btnIndex.value === 0) {
+        btnName.value = e.name;
+        if (e.value === 1) {
+            showPoint.value = true;
+        } else {
+            showPoint.value = false;
+        }
+        regionLayer.selectArea(e.name * 1 === 0 ? 0 : e.name * 1 - 1, "blue");
     }
-    regionLayer.selectArea((e.name*1)===0?0: (e.name*1) - 1,"blue")
-  }
-})
+});
 
-eventBus.on('click:updateArea',(e)=>{
-  blueZone.value = e.value
-  btnName.value=e.name
-  regionLayer.selectArea((e.name*1)===0?0: (e.name*1) - 1,"blue")
-  getFarmLog()
-})
+eventBus.on("click:updateArea", (e) => {
+    blueZone.value = e.value;
+    btnName.value = e.name;
+    regionLayer.selectArea(e.name * 1 === 0 ? 0 : e.name * 1 - 1, "blue");
+    getFarmLog();
+});
 
 const currentComponent = ref("homePage");
 const handleActiveLeft = (e) => {
-  currentComponent.value = e.componentName;
-  if(e.title==='首页'){
-    router.push('/warningHome')
-  }
+    currentComponent.value = e.componentName;
+    if (e.title === "首页") {
+        router.push("/warningHome");
+    }
 };
 const leftToolList = [
-  {
-    title: "首页",
-    name: "home",
-    componentName: "homePage",
-  },
-  {
-    title: "气象预警",
-    componentName: "weatherPage",
-  },
-  {
-    title: "物候调节",
-    componentName: "phenologyPage",
-  },
-  {
-    title: "病虫测报",
-  },
-  {
-    title: "营养评估",
-  },
+    {
+        title: "首页",
+        name: "home",
+        componentName: "homePage",
+    },
+    {
+        title: "气象预警",
+        componentName: "weatherPage",
+    },
+    {
+        title: "物候调节",
+        componentName: "phenologyPage",
+    },
+    {
+        title: "病虫测报",
+    },
+    {
+        title: "营养评估",
+    },
 ];
 
-const rightIndex = ref(0)
-const handleActiveRight = ({index}) => {
-    rightIndex.value = index
-    btnIndex.value = null
-    btnName.value = ""
-    samplePointLayer.updateAreaStatus(false)
-    regionLayer.resetData()
-    samplePointLayer.resetPoint()
-    if(index!==0){
-      act.value = null
+const rightIndex = ref(0);
+const handleActiveRight = ({ index }) => {
+    rightIndex.value = index;
+    btnIndex.value = null;
+    btnName.value = "";
+    samplePointLayer.updateAreaStatus(false);
+    regionLayer.resetData();
+    samplePointLayer.resetPoint();
+    if (index !== 0) {
+        act.value = null;
     }
 };
-const hanleRightIndex = (num) =>{
-  rightIndex.value = num
-  eventBus.emit('tool:updateAct',num)
-}
+const hanleRightIndex = (num) => {
+    rightIndex.value = num;
+    eventBus.emit("tool:updateAct", num);
+};
 const rightToolList = [
-  {
-    title: "农事列表",
-    index:0,
-  },
-  {
-    title: "处方分析",
-    index:2,
-  },
-  {
-    title: "复核对比",
-    index:1,
-  },
+    {
+        title: "农事列表",
+        index: 0,
+    },
+    {
+        title: "处方分析",
+        index: 2,
+    },
+    {
+        title: "复核对比",
+        index: 1,
+    },
 ];
 
 // 跳转果园档案
 const toFilePage = () => {
-  router.push('/garden-file')
-}
+    router.push("/garden-file");
+};
+
+// 返回
+const goBack = () => {
+    router.go(-1);
+};
 </script>
 
 <style lang="scss" scoped>
 .base-container {
-  width: 100%;
-  height: 100vh;
-  color: #fff;
-  position: absolute;
-  box-sizing: border-box;
-  z-index: 1;
-
-  .content {
     width: 100%;
-    height: calc(100% - 74px - 48px);
-    display: flex;
-    justify-content: space-between;
+    height: 100vh;
+    color: #fff;
+    position: absolute;
     box-sizing: border-box;
-    .left,
-    .right {
-      width: calc(376px + 54px);
-      height: 100%;
-      padding-top: 10px;
-      box-sizing: border-box;
+    z-index: 1;
+    .back {
+      position: absolute;
+      top: 52px;
+      left: 8px;
       display: flex;
+      align-items: center;
+      border: 1px solid rgba(255, 255, 255, 0.78);
+      padding: 4px 8px;
+      border-radius: 4px;
+      .icon {
+        width: 13px;
+        padding-right: 10px;
+      }
     }
-    .right {
-      .list {
+
+    .content {
         width: 100%;
-        height: 100%;
-        .btn-wrap{
-          width: 100%;
-          height: 25px;
-          line-height: 25px;
-          margin: 10px 0;
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          div{
-            width: 48%;
+        height: calc(100% - 74px - 48px);
+        display: flex;
+        justify-content: space-between;
+        box-sizing: border-box;
+        .left,
+        .right {
+            width: 376px;
             height: 100%;
-            color: #55E5C6;
-            border: 1px solid rgba(255,213,137,0.6);
-            border-radius: 2px;
-            text-align: center;
-            font-size: 12px;
-            cursor: pointer;
-            &.active{
-              background: #55E5C6;
-              color: #000;
-            }
-          }
-        }
-        .img-box{
-          width: 100%;
-          height: calc(100% - 35px);
-          overflow: auto;
-        }
-        .img-box1{
-          width: 100%;
-          height: calc(100% - 10px);
-          overflow: auto;
-          margin-top: 10px;
-        }
-        .img-box2{
-          width: 100%;
-          height: calc(100% - 45px);
-          overflow: auto;
-          margin-top: 10px;
-        }
-        img{
-          width: 100%;
-          height: auto;
-          object-fit: cover;
-          margin-bottom: 12px;
-          cursor: pointer;
+            box-sizing: border-box;
+            display: flex;
+            background: #141D1D;
+            border-radius: 4px;
+            border: 1px solid #444444;
         }
-        .mt{
-          margin-top: -12px;
+        .left {
+            margin-left: 8px;
+            padding: 7px 7px 0 7px;
         }
-        .list-wrap {
-          ::v-deep {
-            .chart-content {
-              padding: 16px 0 0 0;
-            }
+        .right {
+          margin-right: 8px;
+          .sub-title {
+            display: flex;
           }
+            .list {
+                width: 100%;
+                height: 100%;
+                .btn-wrap {
+                    width: 100%;
+                    height: 25px;
+                    line-height: 25px;
+                    margin: 10px 0;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    div {
+                        width: 48%;
+                        height: 100%;
+                        color: #55e5c6;
+                        border: 1px solid rgba(255, 213, 137, 0.6);
+                        border-radius: 2px;
+                        text-align: center;
+                        font-size: 12px;
+                        cursor: pointer;
+                        &.active {
+                            background: #55e5c6;
+                            color: #000;
+                        }
+                    }
+                }
+                .img-box {
+                    width: 100%;
+                    height: calc(100% - 35px);
+                    overflow: auto;
+                }
+                .img-box1 {
+                    width: 100%;
+                    height: calc(100% - 10px);
+                    overflow: auto;
+                    margin-top: 10px;
+                }
+                .img-box2 {
+                    width: 100%;
+                    height: calc(100% - 45px);
+                    overflow: auto;
+                    margin-top: 10px;
+                }
+                // img {
+                //     width: 100%;
+                //     height: auto;
+                //     object-fit: cover;
+                //     margin-bottom: 12px;
+                //     cursor: pointer;
+                // }
+                .mt {
+                    margin-top: -12px;
+                }
+            }
         }
-      }
-    }
-    .overflow{
-      overflow: auto;
-    }
-    .home-bottom {
-      display: flex;
-      align-items: flex-end;
-      width: calc(100% - 430px - 430px - 72px);
-      height: 100%;
-      align-self: flex-end;
-      .log-box {
-        height: 34%;
-        width: calc(100% - 340px - 28px);
-        margin-right: 28px;
-        .box-name{
-          width: 89px;
-          height: 22px;
-          text-align: center;
-          line-height: 22px;
-          border-radius: 20px;
-          margin: 10px 0 5px 6px;
-          cursor: pointer;
-          background: linear-gradient(0deg,#BBA269 0%, #3D3523 100%);
-        }
-        .log-content {
-          font-size: 12px;
-          line-height: 1.5;
-          padding: 0 18px;
-        }
-        .chart-wrap{
-          width: 100%;
-          height: calc(100% - 50px);
-          .line{
-            margin-top: 10px;
-            margin-bottom: 12px;
-          }
-          img{
-            width: 100%;
-            margin-bottom: 10px;
-          }
+        .overflow {
+            overflow: auto;
         }
-      }
+        .home-bottom {
+            display: flex;
+            align-items: flex-end;
+            width: calc(100% - 430px - 430px - 72px);
+            height: 100%;
+            align-self: flex-end;
+            .log-box {
+                height: 34%;
+                width: calc(100% - 340px - 28px);
+                margin-right: 28px;
+                .box-name {
+                    width: 89px;
+                    height: 22px;
+                    text-align: center;
+                    line-height: 22px;
+                    border-radius: 20px;
+                    margin: 10px 0 5px 6px;
+                    cursor: pointer;
+                    background: linear-gradient(0deg, #bba269 0%, #3d3523 100%);
+                }
+                .log-content {
+                    font-size: 12px;
+                    line-height: 1.5;
+                    padding: 0 18px;
+                }
+                .chart-wrap {
+                    width: 100%;
+                    height: calc(100% - 50px);
+                    .line {
+                        margin-top: 10px;
+                        margin-bottom: 12px;
+                    }
+                    img {
+                        width: 100%;
+                        margin-bottom: 10px;
+                    }
+                }
+            }
 
-      .file-box {
-        height: 25%;
-        min-height: 210px;
-        width: 340px;
-        position: relative;
-        img{
-          width: 100%;
-          margin-top: 12px;
-        }
-        .arrow-icon {
-          top: -32px;
-          left: 50%;
-          position: absolute;
-          background: #fff;
-          width: 16px;
-          height: 80px;
-          line-height: 80px;
-          border-radius: 5px 0 0 5px;
-          text-align: center;
-          transform: translateX(-50%) rotate(270deg);
+            .file-box {
+                height: 25%;
+                min-height: 210px;
+                width: 340px;
+                position: relative;
+                img {
+                    width: 100%;
+                    margin-top: 12px;
+                }
+                .arrow-icon {
+                    top: -32px;
+                    left: 50%;
+                    position: absolute;
+                    background: #fff;
+                    width: 16px;
+                    height: 80px;
+                    line-height: 80px;
+                    border-radius: 5px 0 0 5px;
+                    text-align: center;
+                    transform: translateX(-50%) rotate(270deg);
+                }
+                .edit-btn {
+                    padding: 2px 24px;
+                    background: #55e5c6;
+                    border-radius: 4px;
+                    color: #000;
+                }
+            }
         }
-        .edit-btn {
-          padding: 2px 24px;
-          background: #55E5C6;
-          border-radius: 4px;
-          color: #000;
+        .legend {
+            position: fixed;
+            bottom: 8px;
+            right: 64px;
+            width: 525px;
+            height: 16px;
         }
-      }
     }
-    .legend{
-      position: fixed;
-      bottom: 8px;
-      right: 64px;
-      width: 525px;
-      height: 16px;
-    }
-  }
 }
 .bottom-map {
-  width: 100%;
-  height: 100vh;
-  position: absolute;
-  z-index: 0;
+    width: 100%;
+    height: 100vh;
+    position: absolute;
+    z-index: 0;
 }
 </style>

src/views/warningHome/components/album.vue

@@ -602,9 +602,9 @@ const showDetail = (card) => {
                                 }
                                 &.active {
                                     background: #232323;
-                                    color: #f0ac37;
+                                    color: #09F3C8;
                                     .menu-name {
-                                        color: #f0ac37;
+                                        color: #09F3C8;
                                     }
                                 }
                             }
@@ -617,7 +617,7 @@ const showDetail = (card) => {
                         color: rgba(33, 153, 248, 1);
                     }
                     .onTime {
-                        color: rgba(255, 212, 137, 0.6);
+                        color: rgba(9, 243, 200, 0.6);
                     }
                 }
                 ::v-deep {

src/views/warningHome/components/timeLine.vue

@@ -179,7 +179,7 @@ defineExpose({ restActive });
         position: relative;
         top: -4px;
         .active-line {
-            background: linear-gradient(30deg, #eccd9b 0% ,#F3C11D 100%,);
+            background: linear-gradient(30deg, #eccd9b 0% ,#3FFFF2 100%,);
             position: absolute;
             top: 0;
             left: 0;
@@ -218,7 +218,7 @@ defineExpose({ restActive });
                 height: 6px;
                 margin: -2px 0 5px 14px;
                 position: relative;
-                background: #F3C11D;
+                background: #3FFFF2;
                 
                 &::after{
                     content: '';
@@ -232,7 +232,7 @@ defineExpose({ restActive });
                 }
             }
             .text {
-                // color: #F3C11D;
+                // color: #3FFFF2;
                 background: #ED9E1E;
                 padding: 1px 10px;
                 border-radius: 36px;

src/views/warningHome/index.vue

@@ -22,7 +22,7 @@
                                 <el-select
                                     v-model="areaVal"
                                     placeholder="请选择"
-                                    style="width: 200px"
+                                    style="width: 180px"
                                     >
                                     <el-option
                                         v-for="item in areaOptions"
@@ -36,7 +36,7 @@
                                 <el-select
                                     v-model="typeVal"
                                     placeholder="请选择"
-                                    style="width: 200px"
+                                    style="width: 180px"
                                     >
                                     <el-option
                                         v-for="item in typeOptions"
@@ -187,6 +187,8 @@ const legendImg = ref("");
 const warningLayers = ref({})
 onMounted(() => {
     warningMap.initMap(store.getters.userinfo.location, mapRef.value);
+    console.log('store.getters.userinfo', store.getters.userinfo.userId)
+    warningMap.getGardenList(store.getters.userinfo.userId)
     alarmLayer = new AlarmLayer(warningMap.kmap);
     staticMapLayers = new StaticMapLayers(warningMap.kmap);
     staticMapPointLayers = new StaticMapPointLayers(warningMap.kmap);
@@ -420,6 +422,7 @@ const toggleBox = (name) => {
 
                 .select-wrap {
                     background: url("@/assets/images/warningHome/select-bg.png") no-repeat center;
+                    width: 200px;
                 }
 
                 ::v-deep {
@@ -442,11 +445,11 @@ const toggleBox = (name) => {
                         height: 40px;
                         line-height: 40px;
                         .el-select__caret {
-                            color: #55E5C6;
+                            color: #fff;
                         }
                     }
                     .el-select__placeholder {
-                        color: #55E5C6;
+                        color: #fff;
                         font-size: 20px;
                         font-family: "PangMenZhengDao";
                         text-align: center;
@@ -537,7 +540,7 @@ const toggleBox = (name) => {
         box-shadow: 0px 0px 12px rgba(255, 212, 137, 0.3);
         .el-select-dropdown__item {
             background: none;
-            color: rgba(255, 212, 137, 0.6);
+            color: rgba(9, 243, 200, 0.6);
         }
         .el-select-dropdown__item.is-selected {
             background: rgba(255, 212, 137, 0.2);
@@ -583,7 +586,7 @@ const toggleBox = (name) => {
         border-color: rgba(255, 212, 137, 0.3);
         box-shadow: 0px 0px 12px rgba(255, 212, 137, 0.3);
         .el-cascader-menu {
-            color: rgba(255, 212, 137, 0.6);
+            color: rgba(9, 243, 200, 0.6);
             border-color: rgba(255, 212, 137, 0.3);
         }
         .el-cascader-node.in-active-path,
@@ -604,7 +607,7 @@ const toggleBox = (name) => {
     }
     .el-radio__inner {
         background-color: rgba(255, 212, 137, 0.3);
-        border-color: rgba(255, 212, 137, 0.6);
+        border-color: rgba(9, 243, 200, 0.6);
     }
     &.el-popper.is-light .el-popper__arrow:before {
         background: #232323;

src/views/warningHome/map/mockFarmLayer.js

@@ -42,14 +42,16 @@ class MockFarmLayer {
             },
             zIndex:-1
         });
-        // eventBus.on("warningMap:init", function (kmap) {
-        //     that.initLayer(kmap)
-        //     VE_API.mini_farm.weatherRiskVirtualFarmList().then(res => {
-        //         if(res.code ===0){
-        //             that.setData(res.data)
-        //         }
-        //     })
-        // })
+        eventBus.on("warningMap:init", function ({kmap, data}) {
+            that.initLayer(kmap)
+            console.log('ddd', data);
+            that.setData(data)
+            // VE_API.mini_farm.weatherRiskVirtualFarmList().then(res => {
+            //     if(res.code ===0){
+            //         that.setData(res.data)
+            //     }
+            // })
+        })
 
         // eventBus.on("weatherTime:changeTime", function ({date}) {
         //     VE_API.mini_farm.weatherRiskVirtualFarmList({date: "2025-"+date}).then(res => {
@@ -89,7 +91,7 @@ class MockFarmLayer {
                 let disease = f.get("disease");
                 let grow = f.get("grow");
                 let phenology = "褪绿";
-                let img = f.get("img");
+                let img = f.get("img") || "https://birdseye-img.sysuimars.com/birdseye-look-mini/img_crop/%E8%80%81%E7%86%9F.png";
                 let name = f.get("name");
                 let id = f.get("mapId");
                 let styles = [that.pointStyle, that.cloudStyle(img), that.nameStyle(id, name)];

src/views/warningHome/warningMap.js

@@ -23,7 +23,7 @@ class HomeMap {
   initMap(location, target) {
     let level = 9;
     let coordinate = util.wktCastGeom(location).getFirstCoordinate();
-    this.kmap = new KMap.Map(target, level, coordinate[0], coordinate[1], null, 9, 22);
+    this.kmap = new KMap.Map(target, level, coordinate[0], coordinate[1], null, 6, 22);
     // eventBus.emit('warningMap:init', this.kmap);
     this.addMapListen()
      // 添加比例尺控件
@@ -47,14 +47,17 @@ class HomeMap {
     eventBus.on("map:destroyPopup", () => {
       that.popup.setPosition(undefined)
     })
+    const router = useRouter();
     that.kmap.on('singleclick', function (event) {
       let hasFeature = false
       let feature = that.kmap.map.forEachFeatureAtPixel(event.pixel, function (feature, layer) {
-        // if (layer instanceof VectorLayer && layer.get("name") === "MockFarmLayer") {
-        //   hasFeature = true
-        //   let fs = feature.get("features");
-        //   fs.length > 0 && eventBus.emit('MockFarmLayer:click', { sampleIdVal: fs[0].get("targetSampleId"), farmIdVal: fs[0].get("mockFarmId") });
-        // }
+        if (layer instanceof VectorLayer && layer.get("name") === "MockFarmLayer") {
+          hasFeature = true
+          let fs = feature.get("features");
+          console.log('fff', fs);
+          router.push({ name: "Home", query: {farmId:  fs[0].get("organId")} });
+          // fs.length > 0 && eventBus.emit('MockFarmLayer:click', { sampleIdVal: fs[0].get("targetSampleId"), farmIdVal: fs[0].get("mockFarmId") });
+        }
         if (layer instanceof VectorLayer && layer.get("name") === "pointLayer") {
           hasFeature = true
           eventBus.emit("chat:showTrackDialog", feature.get("url"))
@@ -99,10 +102,9 @@ class HomeMap {
 
   // 果园列表
   getGardenList(userId) {
-    VE_API.mini_farm.userGarden({userId, show3dFarm: false}).then(res => {
-        if(res.code ===0){
-            // that.setData(res.data)
-        }
+    VE_API.mini_farm.userGarden({userId, show3dFarm: false}).then(({data}) => {
+      console.log('aaa', data)
+      eventBus.emit('warningMap:init', {kmap: this.kmap, data});
     })
   }
 }

src/views/workDetail/components/commentBox.vue

@@ -131,7 +131,7 @@ const toComment = () => {
                 top: 2px;
             }
             .num {
-                color: #f3c11d;
+                color: #3FFFF2;
                 margin-left: 2px;
             }
         }