feat

src/components/centerMap.vue

@@ -12,21 +12,6 @@
         @click="mapClick"
       />
     </div>
-    <section class="line_info" :style="{ '--top': isShow ? '18vh' : '140vh' }">
-      <i class="el-icon-close" @click="infoHide"></i>
-      <section>
-        <section class="info_box">
-          <div>
-            <span>产品名称</span>
-            <span>{{}}</span>
-          </div>
-          <div>
-            <span>产品批次号</span>
-            <span>{{}}</span>
-          </div>
-        </section>
-      </section>
-    </section>
   </div>
 </template>
 <script setup>
@@ -250,11 +235,6 @@ const mapClick = (data) => {
   isShow.value = true;
   console.info('mapClick', data);
 };
-
-const infoHide = () => {
-  isShow.value = false;
-};
-
 onMounted(() => {
   console.info('iconUrl', iconUrl);
 });
@@ -287,97 +267,5 @@ div {
     left: 50%;
     transform: translateX(-50%);
   }
-  .line_info {
-    position: fixed;
-    padding: 32px 10px 20px 20px;
-    left: 60px;
-    top: var(--top);
-    max-height: 74vh;
-    width: 400px;
-    color: #fff;
-    background-color: rgb(42 125 235 / 40%);
-    border-radius: 8px;
-    backdrop-filter: blur(4px);
-    z-index: 9999;
-    transition: all 0.8s cubic-bezier(0.58, 0.15, 0.4, 1.42);
-    .el-icon-close {
-      position: absolute;
-      right: 8px;
-      top: 8px;
-      cursor: pointer;
-      font-size: 16px;
-    }
-    > section {
-      padding-right: 10px;
-      height: 100%;
-      overflow-y: auto;
-      &::-webkit-scrollbar {
-        width: 6px;
-      }
-      &::-webkit-scrollbar-track {
-        background-color: #dddddd;
-        border-radius: 6px;
-      }
-      &::-webkit-scrollbar-thumb {
-        background-color: #959191;
-        border-radius: 6px;
-      }
-      &::-webkit-scrollbar-thumb:hover {
-        background-color: #a0a0a0;
-      }
-      .info_box {
-        > div {
-          margin-bottom: 12px;
-          display: grid;
-          grid-template-columns: 40% 60%;
-          span {
-            &:last-child {
-              text-align: right;
-            }
-          }
-        }
-      }
-      .route_box {
-        padding: 0 34px;
-        > div {
-          position: relative;
-          padding-bottom: 16px;
-          &::after {
-            content: '';
-            position: absolute;
-            top: 12px;
-            left: -11px;
-            height: 100%;
-            border: 1px solid #fff;
-          }
-          &:last-child {
-            &::after {
-              display: none;
-            }
-          }
-          > div {
-            position: relative;
-            padding-left: 12px;
-          }
-          ._circle {
-            position: absolute;
-            top: 4px;
-            left: -16px;
-            width: 12px;
-            height: 12px;
-            border-radius: 50%;
-            background-color: #fff;
-            box-shadow: 0 0 3px #fff;
-          }
-          ._name {
-            margin-bottom: 6px;
-            font-size: 20px;
-            font-weight: bold;
-            font-family: '黑体';
-          }
-        }
-      }
-    }
-  }
 }
 </style>

src/components/custom-scroll-title/index.vue

@@ -38,6 +38,7 @@ import { useRouter } from 'vue-router';
 const router = useRouter();
 onMounted(() => {
   handleWidth();
+  activeTitle.value = router.currentRoute.value.name;
 });
 // const emit = defineEmits(['changeTitle']);
 const props = defineProps({
@@ -91,6 +92,7 @@ watch(
 );
 function handleWidth() {
   let ld = document.querySelector('.left_titles_container');
+  if (ld) {
     let w = ld.clientWidth;
     itemW.value = (w - 2 * gap.value) / 3;
     titleContentW.value = itemW.value * leftTitles.value.length + leftTitles.value.length * gap.value;
@@ -98,6 +100,7 @@ function handleWidth() {
       let l = 3 - (props.titles.length - 3);
       right.value = l * itemW.value + (l - 1) * gap.value;
     }
+  }
 }
 function handleTitleBtn(t = -1) {
   if (props.titles.length > 6) {

src/layouts/index.vue

@@ -31,6 +31,8 @@ const scale = ref(1);
     height: 60px;
   }
   ._content {
+    box-sizing: border-box;
+    padding: 40px 40px 20px;
     height: calc(100vh - 60px);
     overflow-y: auto;
     &::-webkit-scrollbar {
@@ -44,6 +46,7 @@ const scale = ref(1);
     width: 100vw;
     height: 60px;
     background: url('../assets/images/basic/footerBG.png');
+    pointer-events: none;
   }
 }
 </style>

src/styles/style.scss

@@ -10,6 +10,9 @@
   -moz-osx-font-smoothing: grayscale;
   background-color: #000;
 }
+* {
+  box-sizing: border-box;
+}
 .el-dialog__body {
   overflow: hidden auto;
   height: auto;
@@ -36,3 +39,25 @@
   line-height: 1.5;
   max-height: calc(1.5em * 2);
 }
+._scroll {
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  &::-webkit-scrollbar-track {
+    background-color: #dddddd;
+    border-radius: 6px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: #959191;
+    border-radius: 6px;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: #a0a0a0;
+  }
+}
+.w100 {
+  width: 100%;
+}
+.h100 {
+  height: 100%;
+}

src/views/land/components/LandAera.vue

@@ -0,0 +1,135 @@
+<template>
+  <section class="land_area_all">
+    <section class="_left">
+      <section class="_circle"></section>
+      <section class="_text"></section>
+    </section>
+    <section class="_right _scroll">
+      <section v-for="(item, i) in list" :key="`right_${i}`" class="list_item w100" :class="[item.id == ac ? 'active' : '']">
+        <span class="_label">
+          <span class="_spot" :style="{ background: item.color }"></span>
+          {{ item.label }}
+        </span>
+        <span class="_value">{{ item.value }}</span>
+      </section>
+    </section>
+  </section>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => {
+      return [
+        { value: 60.8, label: '望天田' },
+        { value: 60.6, label: '水浇地' },
+        { value: 58.9, label: '灌溉水田' },
+        { value: 56.1, label: '基地地' },
+        { value: 56.0, label: '果园' },
+        { value: 52.4, label: '草地' },
+        { value: 32.6, label: '林地' },
+        { value: 25.8, label: '育苗地' },
+        { value: 6.3, label: '观测用地' },
+        { value: 6.1, label: '监测用地' },
+      ];
+    },
+  },
+});
+const list = ref([]);
+const ac = ref(0);
+watch(
+  () => props.data,
+  () => {
+    list.value = props.data.map((v, i) => {
+      return {
+        id: i,
+        ...v,
+        color: randomColor(),
+      };
+    });
+    console.log('list', list.value);
+  },
+  {
+    immediate: true,
+  }
+);
+function randomColor() {
+  let obj = {
+    r: 0,
+    g: 0,
+    b: 0,
+  };
+  Object.keys(obj).forEach((key) => {
+    obj[key] = Math.floor(Math.random() * 256);
+  });
+  return `rgb(${obj.r},${obj.g},${obj.b})`;
+}
+</script>
+
+<style lang="scss" scoped>
+.land_area_all {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px;
+  height: 100%;
+  ._left {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    height: 100%;
+    ._circle {
+      width: 80%;
+      aspect-ratio: 1/1;
+      border-radius: 50%;
+      background: url('../../../assets/images/land/countCircleBG.png') no-repeat center center / cover;
+    }
+    ._text {
+      width: 100%;
+      height: 40px;
+      background: url('../../../assets/images/land/countTextBG.png') no-repeat center center / cover;
+      text-align: center;
+      line-height: 40px;
+    }
+  }
+  ._right {
+    height: 100%;
+    overflow-y: auto;
+    .list_item {
+      padding: 0 24px;
+      position: relative;
+      display: flex;
+      grid-template-columns: 60% 40%;
+      justify-content: space-between;
+      align-items: center;
+      height: 32px;
+      color: #fff;
+      .active {
+        background-color: rgba($color: #008f32, $alpha: 0.4);
+        box-shadow: 0 0 1px rgba($color: #008f32, $alpha: 08);
+        ._label,
+        ._value {
+          transform: scale(1.2);
+        }
+      }
+      ._label {
+        ._spot {
+          display: inline-block;
+          position: absolute;
+          left: 8px;
+          top: 50%;
+          transform: translateY(-25%);
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+        }
+      }
+      ._value {
+        text-align: right;
+      }
+    }
+  }
+}
+</style>

src/views/land/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-row style="width: 100%; height: 100%" class="data-home-index">
+  <el-row class="data-home-index">
     <el-col :span="6" class="left-charts">
       <div class="left-charts-item">
         <customBack top-title="耕地面积统计" :top-postion="'left'">
@@ -28,9 +28,9 @@
     </el-col>
     <el-col :span="6" class="right-charts">
       <div class="right-charts-item">
-        <customBack top-title="农用地数据统计" :top-postion="'right'">
+        <customBack top-title="全县耕地面积" :top-postion="'right'">
           <template #back>
-            <landuseCharts></landuseCharts>
+            <LandAera />
           </template>
         </customBack>
       </div>
@@ -59,9 +59,12 @@ import landareaCharts from './components/landareaCharts.vue';
 import landCirculation from './components/landCirculation.vue';
 import landPlan from './components/landPlan.vue';
 import landPatrol from './components/landPatrol.vue';
+import LandAera from './components/LandAera.vue';
 </script>
 <style lang="scss" scoped>
 .data-home-index {
+  width: 100%;
+  height: 100%;
   .left-charts {
     display: flex;
     justify-content: space-around;