feat：首页平台添加区域分区和品种确权功能

src/components/navigation.vue

@@ -1,5 +1,8 @@
 <template>
     <div class="navigation yes-events">
+        <el-select class="select" v-model="value" size="large">
+            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
         <div class="tabs" v-for="(ele, idx) in list" :key="idx">
             <div
                 class="tab-item"
@@ -11,7 +14,12 @@
                 {{ item.name }}
             </div>
         </div>
-        <el-checkbox-group v-show="childrenData" class="checkbox-group" v-model="checkedChildren" @change="handleCheckedChange">
+        <el-checkbox-group
+            v-show="childrenData"
+            class="checkbox-group"
+            v-model="checkedChildren"
+            @change="handleCheckedChange"
+        >
             <el-checkbox v-for="item in childrenData" :key="item" :label="item" :value="item">
                 {{ item }}
             </el-checkbox>
@@ -25,8 +33,17 @@ import { useRouter } from "vue-router";
 import { ref } from "vue";
 const router = useRouter();
 
-const checkedChildren = ref(["品种"]);
-const childrenData = ref(["品种", "树高", "冠幅"])
+const value = ref("Option1");
+
+const options = [
+    {
+        value: "Option1",
+        label: "2区",
+    }
+];
+
+const checkedChildren = ref(["树高"]);
+const childrenData = ref(["树高", "冠幅"]);
 const handleCheckedChange = (e) => {
     console.log("e", e);
 };
@@ -35,7 +52,7 @@ const active = ref(1);
 const handleTab = ({ id, children }) => {
     active.value = id;
     childrenData.value = children;
-    checkedChildren.value = [children[0]]
+    checkedChildren.value = [children[0]];
 };
 
 const list = ref([
@@ -85,6 +102,29 @@ const toPage = () => {
     display: flex;
     justify-content: center;
     align-items: center;
+    .select{
+        width: 120px;
+        height: 50px;
+        margin-right: 21px;
+        ::v-deep{
+            .el-select__wrapper{
+                height: 100%;
+                background: rgba(0, 0, 0, 0.3);
+                box-shadow: 0 0 0 1px #F7BE5A;
+                border-radius: 2px;
+                text-align: center;
+            }
+            .el-select__placeholder{
+                color: #F7BE5A;
+                font-size: 20px;
+                font-family: "PangMenZhengDao";
+            }
+            .el-select__caret{
+                color: #F7BE5A;
+                font-size: 20px;
+            }
+        }
+    }
     .tabs {
         background: rgba(35, 35, 35, 0.8);
         border: 1px solid #555555;
@@ -112,34 +152,34 @@ const toPage = () => {
         margin-left: 12px;
     }
 
-    .checkbox-group{
-      position: absolute;
-      top: 74px;
-      right: 30px;
-      background: rgba(35, 35, 35,0.8);
-      border-radius: 8px;
-      border: 1px solid #555555;
-      padding: 10px 20px;
-      display: flex;
-      flex-direction: column;
-      ::v-deep{
-        .el-checkbox{
-          margin-right: 0;
-        }
-        .el-checkbox__input.is-checked+.el-checkbox__label{
-          color: #FFD489;
-        }
-        .el-checkbox__input.is-checked .el-checkbox__inner{
-          background-color: #FFD489;
-          border-color: #FFD489;
-          &::after{
-            border-color: #1d1d1d;
-          }
-        }
-        .el-checkbox__label{
-          color: #fff;
+    .checkbox-group {
+        position: absolute;
+        top: 74px;
+        right: 30px;
+        background: rgba(35, 35, 35, 0.8);
+        border-radius: 8px;
+        border: 1px solid #555555;
+        padding: 10px 20px;
+        display: flex;
+        flex-direction: column;
+        ::v-deep {
+            .el-checkbox {
+                margin-right: 0;
+            }
+            .el-checkbox__input.is-checked + .el-checkbox__label {
+                color: #ffd489;
+            }
+            .el-checkbox__input.is-checked .el-checkbox__inner {
+                background-color: #ffd489;
+                border-color: #ffd489;
+                &::after {
+                    border-color: #1d1d1d;
+                }
+            }
+            .el-checkbox__label {
+                color: #fff;
+            }
         }
-      }
     }
 
     .btn {

src/views/home/album/index.vue

@@ -441,6 +441,7 @@ const getSecondLastIndex = (data) => {
         });
     } else {
         secondLastIndex.value = -1; // 如果没有足够的项，设置为 -1
+        farmWorkList.value = data
     }
 };
 

src/views/home/components/homePage.vue

@@ -17,11 +17,17 @@
         <template #title-right>
           <tabs :list="btnGroup"></tabs>
         </template>
-        <bar-chart class="bar-chart" styleName="styleName3" :xData="phenologyXData" :yData="phenologyYData"></bar-chart>
+        <!-- <bar-chart class="bar-chart" styleName="styleName3" :xData="phenologyXData" :yData="phenologyYData"></bar-chart>
         <div class="tips box-bg">
           <div class="text" v-for="item in 3" :key="item">
             桂味：<span>占比30％，分布在2区、5区</span>
           </div>
+        </div> -->
+        <div class="box-flex">
+          <div class="box-card">
+            <div class="box-desc">当前分区无品种信息，请确权</div>
+            <div class="box-button">立即确权</div>
+          </div>
         </div>
       </chart-box>
     </div>
@@ -97,7 +103,7 @@ import {useStore} from "vuex";
 let store = useStore()
 
 //基本指标
-const btnGroup = ["品种","树高","冠幅"]
+const btnGroup = ["树高","冠幅"]
 // 物候指标
 const phenologyBtnGroup = ["花穗长度","单数花穗率"]
 const phenologyXData = ["花芽萌动","花蕾抽出","花穗伸长","开花期"]
@@ -177,6 +183,36 @@ const gybg= ()=>{
     height: calc(100% / 4.15);
     box-sizing: border-box;
     margin-bottom: 10px;
+    .box-flex{
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .box-card{
+        background: rgba(255, 255, 255, 0.1);
+        border-radius: 5px;
+        width: 292px;
+        height: 92px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        .box-desc{
+          font-size: 16px;
+          font-family: "PangMenZhengDao";
+          margin-bottom: 8px;
+        }
+        .box-button{
+          font-size: 13px;
+          border-radius: 20px;
+          padding: 3px 27px;
+          cursor: pointer;
+          border: 1px solid rgba(255, 255, 255, 0.45);
+          background: linear-gradient(180deg,#FFD887,#ED9E1E);
+        }
+      }
+    }
     .button{
       border: 1px solid rgba(255, 255, 255, 0.4);
       border-radius: 4px;