fix: 果园档案

src/components/fileBar.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="file-chart">
     <div v-for="(item, index) in fileData" :key="index" class="item-container">
-      <div class="file-label">{{ item.name }}</div>
+      <div class="file-label cursor-pointer" :class="{'active': activeIndex === index}" @click="toggleActive(index)">{{ item.name }}</div>
       <div class="file-bar">
         <div
           v-for="(value, subIndex) in item.data"
@@ -50,24 +50,25 @@ const fileData = ref([
   {
     name: "休养-幼树",
     data: [
-      { value: 380, level: 0, tag: "新嫁接1年 380棵" },
-      { value: 330, level: 0, tag: "2年 330棵" },
-      { value: 200, level: 0, tag: "3年 200棵" },
+      { value: 380, level: 0, tag: "已调养 <1年" },
+      { value: 330, level: 0, tag: "已治愈 >1年" },
+      { value: 200, level: 0, tag: "未治愈" },
     ],
   },
   {
     name: "休养-病虫",
     data: [
-      { value: 380, level: 3, tag: "蒂蛀虫 380棵" },
-      { value: 380, level: 1, tag: "其他病 380棵" },
+      { value: 380, level: 3, tag: "已治愈 <1年" },
+      { value: 380, level: 1, tag: "已治愈 >1年" },
+      { value: 140, level: 0, tag: "未治愈" },
     ],
   },
   {
     name: "休养-生长",
     data: [
-      { value: 400, level: 2, tag: "花芽 400棵" },
-      { value: 380, level: 2, tag: "花穗 380棵" },
-      { value: 420, level: 2, tag: "小果 420棵" },
+      { value: 400, level: 2, tag: "已休养<1年" },
+      { value: 380, level: 2, tag: "已休养1-2年" },
+      { value: 420, level: 2, tag: "已休养>2年" },
     ],
   },
 ]);
@@ -86,10 +87,16 @@ const computedWidths = computed(() => {
   return fileData.value.map((item) => {
     // 258是右侧容器总宽度
     return item.data.map((dataPoint) =>
-      ((dataPoint.value / max) * 240).toFixed(0)
+      ((dataPoint.value / max) * 230).toFixed(0)
     ); // 保留两位小数
   });
 });
+
+// 设置选中
+const activeIndex = ref(0)
+const toggleActive = (index) => {
+  activeIndex.value = index
+}
 </script>
 
 <style lang="scss" scoped>
@@ -101,15 +108,30 @@ const computedWidths = computed(() => {
   align-items: center;
   justify-content: center;
   position: relative;
+  &::after {
+    content: "";
+    position: absolute;
+    top: 6px;
+    left: 76px;
+    width: 1px;
+    height: calc(100% - 24px);
+    background: rgba(255, 255, 255, 0.08);
+  }
   .item-container {
     display: flex;
     width: 100%;
     color: #ffffff;
     margin-bottom: 12px;
     .file-label {
-      width: 60px;
-      text-align: right;
+      width: 68px;
+      text-align: center;
       font-size: 12px;
+      padding: 0 4px;
+      box-sizing: border-box;
+      &.active {
+        background: #2199F8;
+        border-radius: 22px;
+      }
     }
     .file-bar {
       width: calc(100% - 56px);

src/styles/common.scss

@@ -355,101 +355,6 @@ div{
     display: none;
 }
 
-// 自定义popper样式  复核对比
-.v-select-popper {
-    background: linear-gradient(0deg, #2a746c 0%, #22569c 100%);
-    .el-select-dropdown__item{
-        color: #fff;
-        text-align: center;
-        font-size: 16px;
-        position: relative;
-        &::after{
-            content: '';
-            position: absolute;
-            bottom: 0;
-            left: 10%;
-            width: 80%;
-            height: 1px;
-            background: url("@/assets/img/checkComparison/select_line.png")
-                no-repeat center center / 100% 100%;
-        }
-    }
-    .el-select-dropdown__item:last-child{
-        &::after{
-            background: none;
-        }
-    }
-    .el-select-dropdown__item.is-hovering{
-        background: linear-gradient(0deg, #94d0ff 0%, #2a746c 100%);
-    }
-    .el-popper__arrow:before{
-        background: #22569C !important;
-    }
-}
-
-// 自定义popper样式  编辑农事
-.v-select-popper-ns {
-    background: #032c39;
-    .el-select-dropdown__item{
-        color: #00FFF0;
-    }
-    .el-select-dropdown__item.is-hovering{
-        background: #032c39;
-    }
-    .is-selected{
-        color: #00FFF0 !important;
-        background-color: rgba(81, 233, 240, 0.1) !important;
-    }
-    .el-popper__arrow:before{
-        background: #032c39 !important;
-    }
-}
-
-// 农事自定义dialog样式
-.v-dialog{
-    background: rgba(12,41,50,1);
-    border: 1px solid #06a0c2;
-    padding: 0;
-    // height: 89%;
-    .el-dialog__header{
-        padding-bottom: 0;
-    }
-    .dialog-header {
-        font-weight: normal;
-        font-size: 17px;
-        color: #00fff0;
-        border-bottom: 1px solid rgba(6, 160, 194, 0.5);
-        background: #004054;
-        padding: 10px 17px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        .close-icon{
-          cursor: pointer;
-        }
-      }
-    .el-dialog__footer{
-        padding-top: 0;
-    }
-}
-
-//态势tootip样式
-.v-echarts-tooltip{
-    text-align: center;
-    font-weight: bold;
-    div{
-        color: #00FFF0;
-        font-size: 11px;
-        padding: 4px 8px 2px 8px;
-        background: rgba(32, 64, 73, 0.8);
-    }
-    span{
-        font-size: 12px;
-        display: inline-block;
-        padding: 2px 8px 4px 8px;
-    }
-}
-
 @font-face {  
     font-family: 'PangMenZhengDao'; /* 定义字体名称 */  
     src: url('@/assets/font/PangMenZhengDao.TTF') format('truetype');
@@ -469,213 +374,21 @@ div{
     src: url('@/assets/font/HANTI.TTF') format('truetype');
     font-weight: normal; /* 字体粗细 */  
     font-style: normal; /* 字体风格 */  
-  } 
-.watermark {
-    position: absolute;
-    bottom: 0;
-    background: rgba(20, 46, 1, 0.34);
-    width: 100%;
-    padding: 6px 22px;
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
-    color: #ffffff;
-    justify-content: center;
-    .region {
-      background: url("@/assets/img/round_bg.png") no-repeat center center /
-        100% 100%;
-      width: 83px;
-      height: 83px;
-      font-size: 28px;
-      text-stroke: 2px #003c4e;
-      -webkit-text-stroke: 2px #003c4e;
-      font-weight: bold;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-right: 1%;
-    }
-    .center {
-      color: #fffffe;
-      display: flex;
-      align-items: center;
-      -webkit-text-stroke: 1.4px #003c4e;
-      margin-right: 1.5%;
+  }
 
-      .line {
-        width: 2px;
-        height: 60px;
-        background: #ffffff;
-        border-radius: 0px 6px 0px 0px;
-        border: 2px solid #003c4e;
-        margin-right: 1.5%;
-      }
-      .time {
-        font-size: 20px;
-        font-weight: 400;
-        margin-right: 3%;
-        .year {
-          -webkit-text-stroke: 1.2px #003c4e;
-        }
-        .divider {
-          width: 42px;
-          height: 1px;
-          background: #ffffff;
-          border: 1.5px solid #003c4e;
-        }
-        .date {
-          font-size: 52px;
-          -webkit-text-stroke: 2px #003c4e;
-        }
-      }
-      .code {
-        font-weight: bold;
-        font-size: 28px;
-        padding-left: 15px;
-        margin-right: 1.5%;
-        width: 288px;
-        div {
-          position: relative;
-          &::before {
-            content: "";
-            position: absolute;
-            left: -20px;
-            top: 15px;
-            width: 9px;
-            height: 9px;
-            background: linear-gradient(0deg, #4facfe 0%, #00f2fe 100%);
-            border-radius: 50%;
-            border: 1.5px solid #003c4e;
-          }
-        }
-      }
-      .weather {
-        font-weight: bold;
-        font-size: 30px;
-        display: flex;
-        .temperature {
-          display: flex;
-          align-items: center;
-          .num {
-            margin-left: 5px;
-            line-height: 24px;
-            img {
-              height: 9px;
-              margin-bottom: 5px;
-            }
-          }
-        }
-      }
-    }
-    .right {
-      display: flex;
-      .circle {
-        width: 98px;
-        height: 98px;
-        border-radius: 50%;
-        text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.6);
-        font-size: 25px;
-        color: #fffefe;
-        box-sizing: border-box;
-        padding: 12px;
-        text-align: center;
-        margin-left: 10px;
-      }
-      .yellow {
-        padding: 12px 9px;
-        line-height: 65px;
-        border: 2px solid #ffc000;
-        background: rgba(116, 96, 83, 0.4);
-      }
-      .blue {
-        border: 2px solid #b9e1ff;
-        background: rgba(16, 89, 119, 0.4);
-      }
-    }
-}
-
-.watermark-style {
-    position: absolute;
-    background: rgba(20, 46, 1, 0.34);
+// 图表右上角
+.common-select {
+    min-width: 46px;
     width: 100%;
-    bottom: 0;
-    padding: 12px 18px 8px 18px;
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
-    color: #ffffff;
-    justify-content: space-between;
-    .left{
-      display: flex;
-      align-items: center;
-    }
-    .region {
-      width: 50px;
-      height: 50px;
-      font-size: 17px;
-      background: url("@/assets/img/round_bg.png") no-repeat center center /
-      100% 100%;
-      line-height: 50px;
-      text-align: center;
-      margin-right: 15px;
-    }
-    .date{
-      font-size: 30px;
-      color: #FFFFFE;
-      font-weight: bold;
-      -webkit-text-stroke: 0.6px #003c4e;
-      margin-right: 12px;
-    }
-    .whq{
-        font-size: 22px;
-    }
-    .code{
-        display: flex;
-        margin-right: 14px;
-        .code-txt{
-          font-weight: bold;
-          font-size: 22px;
-          margin-left: 25px;
-          position: relative;
-          &::before{
-            content: '';
-            position: absolute;
-            left: -15px;
-            top: 12px;
-            width: 6px;
-            height: 6px;
-            background: linear-gradient(0deg, #4FACFE 0%, #00F2FE 100%);
-            border-radius: 50%;
-            border: 2px solid #21494f;
-          }
+    .el-select__wrapper {
+        background: none;
+        box-shadow: 0 0 0 1px rgba(102, 102, 102, 0.4) inset;
+        &.is-hovering:not(.is-focused) {
+            box-shadow: 0 0 0 1px rgba(102, 102, 102, 0.4) inset;
         }
-    }
-    .weather{
-        display: flex;
-        
-        .temperature{
-          display: flex;
-          align-items: center;
-          font-size: 22px;
-          margin-right: 10px;
-          img{
-            width: 28px;
-            height: 28px;
-            margin-right: 4px;
-          }
-        }
-    }
-
-    .right{
-      display: flex;
-      font-size: 17px;
-      .block{
-        border: 1px solid rgba(255, 255, 255, 0.64);
-        border-radius: 4px;
-        padding: 8px 12px;
-        &.mr{
-          margin-right: 8px;
+        .el-select__placeholder {
+            color: #fff;
+            display: contents;
         }
-      }
     }
 }

src/views/file/index.vue

@@ -6,13 +6,14 @@
       <div class="left yes-events">
         <div class="chart-list">
           <div class="chart-item">
-            <chart-box name="地形风险" arrow="left">
-              <template #title-right>
+            <chart-box name="光照效能" arrow="left">
+              <!-- <template #title-right>
                 <div>
                   <el-select
                     v-model="topographicValue"
                     placeholder="请选择"
                     style="width: 86px"
+                    size="small"
                   >
                     <el-option
                       v-for="item in topographicOptions"
@@ -22,39 +23,37 @@
                     />
                   </el-select>
                 </div>
-              </template>
+              </template> -->
               <div class="topographic-content">
                 <bar-chart
                   styleName="styleName1"
                   :xData="evaluateXData"
                   :yData="evaluateYData"
                 ></bar-chart>
-                <div class="text-list box-bg">
+                <!-- <div class="text-list box-bg">
                     <div class="text-item" v-for="item in 3" :key="item">
                     <div class="circle"></div>
                     <div class="txt">
                         高温Ⅰ级<span>26</span>棵
                     </div>
                     </div>
-                </div>
+                </div> -->
               </div>
             </chart-box>
           </div>
           <div class="chart-item">
             <chart-box name="气象预警" arrow="left">
-                <div class="topographic-content">
+              <div class="topographic-content">
                 <bar-chart
                   styleName="styleName1"
                   :xData="evaluateXData"
                   :yData="evaluateYData"
                 ></bar-chart>
                 <div class="text-list box-bg">
-                    <div class="text-item" v-for="item in 3" :key="item">
+                  <div class="text-item" v-for="item in 3" :key="item">
                     <div class="circle"></div>
-                    <div class="txt">
-                        桂味<span>15626</span>棵(树龄3.5年)
-                    </div>
-                    </div>
+                    <div class="txt">桂味<span>15626</span>棵(树龄3.5年)</div>
+                  </div>
                 </div>
               </div>
             </chart-box>
@@ -90,10 +89,64 @@
       <div class="right yes-events">
         <div class="chart-list">
           <div class="chart-item">
-            <chart-box name="气象预警" arrow="arrow-left"></chart-box>
+            <chart-box name="病害历史" arrow="arrow-left">
+              <template #title-right>
+                <el-select
+                  v-model="pestHistoryValue"
+                  placeholder="请选择"
+                  size="small"
+                  class="common-select"
+                  popper-class="common-select-popper"
+                >
+                  <el-option
+                    v-for="item in pestHistoryOptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </template>
+              <div class="pest-history">
+                <bar-chart
+                  styleName="styleName1"
+                  :xData="evaluateXData"
+                  :yData="evaluateYData"
+                ></bar-chart>
+              </div>
+            </chart-box>
           </div>
           <div class="chart-item">
-            <chart-box name="气象预警" arrow="arrow-left"></chart-box>
+            <chart-box name="虫害历史" arrow="arrow-left">
+              <template #title-right>
+                <el-select
+                  v-model="pestHistoryValue"
+                  placeholder="请选择"
+                  size="small"
+                  class="common-select"
+                  popper-class="common-select-popper"
+                >
+                  <el-option
+                    v-for="item in pestHistoryOptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </template>
+              <div class="topographic-content">
+                <bar-chart
+                  styleName="styleName1"
+                  :xData="evaluateXData"
+                  :yData="evaluateYData"
+                ></bar-chart>
+                <div class="text-list box-bg">
+                  <div class="text-item" v-for="item in 3" :key="item">
+                    <div class="circle"></div>
+                    <div class="txt">桂味<span>15626</span>棵(树龄3.5年)</div>
+                  </div>
+                </div>
+              </div>
+            </chart-box>
           </div>
           <div class="chart-item">
             <chart-box name="气象预警" arrow="arrow-left"></chart-box>
@@ -127,8 +180,17 @@ const topographicOptions = ref([
   { label: "阴雨寡照", value: "阴雨寡照" },
 ]);
 
+// 右1-病害历史
+const pestHistoryValue = ref("品种");
+const pestHistoryOptions = ref([
+  { label: "品种", value: "品种" },
+  { label: "品种1", value: "品种1" },
+  { label: "品种2", value: "品种2" },
+  { label: "品种3", value: "品种3" },
+]);
+
 // 地形风险
-const evaluateXData = ["Ⅰ级", "Ⅱ级", "Ⅲ级"];
+const evaluateXData = ["区域1", "区域2", "区域3"];
 const evaluateYData = [33, 41, 43];
 
 onMounted(() => {
@@ -164,7 +226,6 @@ const goBack = () => {
       padding-top: 10px;
       box-sizing: border-box;
       display: flex;
-      padding-left: 15px;
       .chart-list {
         width: 100%;
         height: 100%;
@@ -208,36 +269,46 @@ const goBack = () => {
             rgb(35, 35, 35, 1) 100%
           );
         }
-    }
-    .text-list {
+      }
+      .text-list {
         flex: none;
         margin: 0 16px;
-      .text-item {
-        display: flex;
-        align-items: center;
-        margin-bottom: 5px;
-        .circle {
-          width: 4px;
-          height: 4px;
-          background: rgba(255, 255, 255, 0.44);
-          border-radius: 50%;
-          margin-right: 6px;
-        }
-        .txt {
-          font-size: 12px;
-          span{
-            margin: 0 2px 0 6px;
-            color: #E8BA52;
+        .text-item {
+          display: flex;
+          align-items: center;
+          margin-bottom: 5px;
+          .circle {
+            width: 4px;
+            height: 4px;
+            background: rgba(255, 255, 255, 0.44);
+            border-radius: 50%;
+            margin-right: 6px;
+          }
+          .txt {
+            font-size: 12px;
+            span {
+              margin: 0 2px 0 6px;
+              color: #e8ba52;
             }
+          }
         }
       }
     }
+    .left {
+      padding-left: 20px;
     }
     .right {
+      padding-right: 20px;
       .list {
         width: 100%;
         height: 100%;
       }
+      .pest-history {
+        width: 100%;
+        height: 100%;
+        padding: 6px 8px 20px 20px;
+        box-sizing: border-box;
+      }
     }
     .home-bottom {
       display: flex;