feat:调整路由

src/components/centerMap.vue

@@ -12,34 +12,21 @@
         @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>
 import { isEmpty, getAssetsFile } from '@/utils';
 import { ref, reactive, onMounted } from 'vue';
+import geoJsonData from '../components/530926geo.json'; // 根据实际情况调整路径
 var aspectScale = 0.8807505292367753;
 // var iconUrl = 'http://localhost:9529/sub-government-screen-service/src/assets/images/vsualized/home/partbg.png';
 // var iconUrl = getAssetsFile('images/vsualized/gmmap.png').href;
 var iconUrl = getAssetsFile('images/vsualized/gmmap2.png').href;
+
 const isShow = ref(false);
-import geoJsonData from '../components/530926geo.json'; // 根据实际情况调整路径
 let geoData = geoJsonData;
 let mapName = ref('ZJ');
+const info = ref({});
 const chartsData = reactive({
   option: {
     title: {
@@ -248,11 +235,6 @@ const mapClick = (data) => {
   isShow.value = true;
   console.info('mapClick', data);
 };
-
-const infoHide = () => {
-  isShow.value = false;
-};
-
 onMounted(() => {
   console.info('iconUrl', iconUrl);
 });
@@ -285,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,12 +92,14 @@ watch(
 );
 function handleWidth() {
   let ld = document.querySelector('.left_titles_container');
-  let w = ld.clientWidth;
-  itemW.value = (w - 2 * gap.value) / 3;
-  titleContentW.value = itemW.value * leftTitles.value.length + leftTitles.value.length * gap.value;
-  if (props.titles.length > 3 && props.titles.length < 6) {
-    let l = 3 - (props.titles.length - 3);
-    right.value = l * itemW.value + (l - 1) * gap.value;
+  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;
+    if (props.titles.length > 3 && props.titles.length < 6) {
+      let l = 3 - (props.titles.length - 3);
+      right.value = l * itemW.value + (l - 1) * gap.value;
+    }
   }
 }
 function handleTitleBtn(t = -1) {
@@ -165,7 +168,7 @@ function handleTitleClick(val) {
     width: 30%;
     height: 100%;
     overflow: hidden;
-    line-height: 60px;
+    line-height: 90px;
     .title_content {
       position: absolute;
       top: 10px;

src/components/subTop.vue

@@ -7,7 +7,7 @@
       }"
       class="title-top-bg"
     ></div>
-    <span class="title-top-content" :style="{ 'text-align': left }">{{ topTitle || '--' }}</span>
+    <span class="title-top-content" :style="{ 'text-align': props.left }">{{ topTitle || '--' }}</span>
   </div>
 </template>
 <script setup>

src/layouts/index.vue

@@ -58,11 +58,14 @@ onMounted(() => {
   &-header {
     width: 100%;
     height: 60px;
-    margin-bottom: 60px;
+    // margin-bottom: 60px;
   }
   &-main {
     flex: 1;
     min-height: calc(100vh - 60px);
   }
+  .base-laytout-header {
+    height: 90px;
+  }
 }
 </style>

src/router/index.js

@@ -2,6 +2,8 @@ import { createRouter, createWebHistory } from 'vue-router';
 import Layout from '@/layouts/index.vue';
 
 import demoRouters from './modules/demo';
+import path from 'path-browserify';
+import v2 from './modules/v2';
 
 export const constantRoutes = [
   // {
@@ -20,60 +22,61 @@ export const constantRoutes = [
     path: '/',
     name: 'layout',
     component: Layout,
-    // redirect: '/home',
+    redirect: '/home',
     meta: { title: '首页', icon: 'House' },
-    children: [
-      {
-        path: '/home',
-        component: () => import('@/views/home/index.vue'),
-        name: 'home',
-        meta: { title: '首页', icon: 'House' },
-      },
-      {
-        path: '/land',
-        component: () => import('@/views/land/index.vue'),
-        name: 'land',
-        meta: { title: '土地资源', icon: 'House' },
-      },
-      {
-        path: '/inputs',
-        name: 'inputs',
-        component: () => import('@/views/inputs/index.vue'),
-        hidden: true,
-      },
-      {
-        path: '/entities',
-        name: 'entities',
-        component: () => import('@/views/entities/index.vue'),
-        hidden: true,
-      },
-      {
-        path: '/breed',
-        name: 'breed',
-        component: () => import('@/views/breed/index.vue'),
-        hidden: true,
-      },
-      {
-        path: '/plant',
-        name: 'plant',
-        component: () => import('@/views/plant/index.vue'),
-        hidden: true,
-      },
-      {
-        path: '/trace',
-        name: 'trace',
-        component: () => import('@/views/trace/index.vue'),
-        hidden: true,
-      },
-      {
-        path: '/early',
-        name: 'early',
-        component: () => import('@/views/early/index.vue'),
-        hidden: true,
-      },
-    ],
+    // children: [
+    //   {
+    //     path: '/home',
+    //     component: () => import('@/views/home/index.vue'),
+    //     name: 'home',
+    //     meta: { title: '首页', icon: 'House' },
+    //   },
+    //   {
+    //     path: '/land',
+    //     component: () => import('@/views/land/index.vue'),
+    //     name: 'land',
+    //     meta: { title: '土地资源', icon: 'House' },
+    //   },
+    //   {
+    //     path: '/inputs',
+    //     name: 'inputs',
+    //     component: () => import('@/views/inputs/index.vue'),
+    //     hidden: true,
+    //   },
+    //   {
+    //     path: '/entities',
+    //     name: 'entities',
+    //     component: () => import('@/views/entities/index.vue'),
+    //     hidden: true,
+    //   },
+    //   {
+    //     path: '/breed',
+    //     name: 'breed',
+    //     component: () => import('@/views/breed/index.vue'),
+    //     hidden: true,
+    //   },
+    //   {
+    //     path: '/plant',
+    //     name: 'plant',
+    //     component: () => import('@/views/plant/index.vue'),
+    //     hidden: true,
+    //   },
+    //   {
+    //     path: '/trace',
+    //     name: 'trace',
+    //     component: () => import('@/views/trace/index.vue'),
+    //     hidden: true,
+    //   },
+    //   {
+    //     path: '/early',
+    //     name: 'early',
+    //     component: () => import('@/views/early/index.vue'),
+    //     hidden: true,
+    //   },
+    // ],
   },
   ...demoRouters,
+  v2,
   {
     path: '/test',
     name: 'test',

src/router/modules/v2.js

@@ -0,0 +1,59 @@
+import Layout from '@/layouts/index.vue';
+
+export default {
+  path: '/v2',
+  name: 'layout',
+  component: Layout,
+  redirect: '/v2/home',
+  meta: { title: '首页', icon: 'House' },
+  children: [
+    {
+      path: 'home',
+      component: () => import('@/views/home/index.vue'),
+      name: 'home',
+      meta: { title: '首页', icon: 'House' },
+    },
+    {
+      path: 'land',
+      component: () => import('@/views/land/index.vue'),
+      name: 'land',
+      meta: { title: '土地资源', icon: 'House' },
+    },
+    {
+      path: 'inputs',
+      name: 'inputs',
+      component: () => import('@/views/inputs/index.vue'),
+      hidden: true,
+    },
+    {
+      path: 'entities',
+      name: 'entities',
+      component: () => import('@/views/entities/index.vue'),
+      hidden: true,
+    },
+    {
+      path: 'breed',
+      name: 'breed',
+      component: () => import('@/views/breed/index.vue'),
+      hidden: true,
+    },
+    {
+      path: 'plant',
+      name: 'plant',
+      component: () => import('@/views/plant/index.vue'),
+      hidden: true,
+    },
+    {
+      path: 'trace',
+      name: 'trace',
+      component: () => import('@/views/trace/index.vue'),
+      hidden: true,
+    },
+    {
+      path: 'early',
+      name: 'early',
+      component: () => import('@/views/early/index.vue'),
+      hidden: true,
+    },
+  ],
+};

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;
@@ -35,4 +38,26 @@
   -webkit-line-clamp: 2;
   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;