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

@@ -1,18 +1,11 @@
 <template>
-  <section
+  <section class="header_title" :style="{ '--titleContentW': titleContentW + 'px', '--itemW': itemW + 'px', '--gap': gap + 'px' }">
-    class="header_title"
-    :style="{
-      '--titleContentW': titleContentW + 'px',
-      '--itemW': itemW + 'px',
-      '--gap': gap + 'px',
-    }"
-  >
     <el-icon v-if="props.titles.length > 6" icon="el-icon-arrow-left" class="left_btn" @click="handleTitleBtn(1)">
       <ArrowLeftBold />
     </el-icon>
     <el-icon v-if="props.titles.length > 6" icon="el-icon-arrow-right" class="right_btn" @click="handleTitleBtn(-1)"><ArrowRightBold /></el-icon>
     <section class="left_titles_container">
-      <section v-if="route.name != 'home'" class="title_content" :style="{ left: `-${position}px` }">
+      <section class="title_content" :style="{ left: `-${position}px` }">
         <section
           v-for="(item, i) in leftTitles"
           :key="`left_title_${i}`"
@@ -23,9 +16,9 @@
         </section>
       </section>
     </section>
-    <section class="sys_name">{{ route.name != 'home' ? '政务云数字农业智慧大屏' : '数字农业智慧大脑' }}</section>
+    <section class="sys_name">政务云数字农业智慧大屏</section>
     <section class="right_titles_container">
-      <section v-if="route.name != 'home'" class="title_content" :style="{ left: `${right ? right + 'px' : '-' + position + 'px'}` }">
+      <section class="title_content" :style="{ left: `${right ? right + 'px' : '-' + position + 'px'}` }">
         <section
           v-for="(item, i) in rightTitles"
           :key="`right_title_${i}`"
@@ -41,9 +34,8 @@
 
 <script setup>
 import { ref, watch, onMounted } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { useRouter } from 'vue-router';
 const router = useRouter();
-const route = useRoute();
 onMounted(() => {
   handleWidth();
   activeTitle.value = router.currentRoute.value.name;

src/layouts/index.vue

@@ -1,12 +1,7 @@
 <template>
   <section
     class="base-laytout"
-    :style="{
+    :style="{ width: `${state.style.width}px`, height: `${state.style.height}px`, transform: `${state.style.transform}` }"
-      width: `${state.style.width}px`,
-      height: `${state.style.height}px`,
-      transform: `${state.style.transform}`,
-      background: route.name == 'home' ? 'url(' + getAssetsFile('images/vsualized/homeb.png') + ')' : '',
-    }"
   >
     <custom-scroll-title class="base-laytout-header" />
     <section class="base-laytout-main">
@@ -16,9 +11,7 @@
 </template>
 <script setup>
 import { onMounted, reactive } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+
-import { getAssetsFile } from '@/utils';
-const route = useRoute();
 const state = reactive({
   style: {
     width: '1920',

src/router/modules/v2.js

@@ -7,12 +7,12 @@ export default {
   redirect: '/v2/home',
   meta: { title: '首页', icon: '' },
   children: [
-    {
+    // {
-      path: '/v2/home',
+    //   path: '/v2/home',
-      component: () => import('@/views/home/index.vue'),
+    //   component: () => import('@/views/home/index.vue'),
-      name: 'home',
+    //   name: 'home',
-      meta: { title: '首页', icon: '' },
+    //   meta: { title: '首页', icon: '' },
-    },
+    // },
     {
       path: '/v2/land',
       component: () => import('@/views/land/index.vue'),

src/views/entities/components/entitiesStatistics.vue

@@ -19,10 +19,10 @@ const state = reactive({
   ],
   option: {
     grid: {
-      left: '3%',
+      left: '5%',
-      right: '10%',
+      right: '5%',
-      bottom: '10%',
+      bottom: '5%',
-      top: '15%',
+      top: '10%',
       containLabel: true,
     },
     tooltip: {

src/views/home/index copy.vue

@@ -1,105 +0,0 @@
-<template>
-  <div class="data-home-index">
-    <el-row style="width: 100%; height: 100%">
-      <el-col :span="6" class="left-charts">
-        <div class="left-charts-item">
-          <customBack top-title="综合数据统计" :top-postion="'left'">
-            <template #back>
-              <comprehensive></comprehensive>
-            </template>
-          </customBack>
-        </div>
-        <div class="left-charts-item">
-          <customBack top-title="土地分布数据统计" :top-postion="'left'">
-            <template #back>
-              <rolllist :items="rollDataList"></rolllist>
-            </template>
-          </customBack>
-        </div>
-        <div class="left-charts-item">
-          <customBack top-title="种养殖数据统计" :top-postion="'left'">
-            <template #back>
-              <plantBreedCharts></plantBreedCharts>
-            </template>
-          </customBack>
-        </div>
-      </el-col>
-      <el-col :span="12">
-        <centerMap></centerMap>
-      </el-col>
-      <el-col :span="6" class="right-charts">
-        <div class="right-charts-item">
-          <customBack top-title="使用投入品数据统计" :top-postion="'left'">
-            <template #back>
-              <inputs></inputs>
-            </template>
-          </customBack>
-        </div>
-        <div class="right-charts-item">
-          <customBack top-title="经营主体数据统计" :top-postion="'left'">
-            <template #back>
-              <entitiesCharts></entitiesCharts>
-            </template>
-          </customBack>
-        </div>
-        <div class="right-charts-item">
-          <customBack top-title="溯源赋码与扫码数据统计" :top-postion="'left'">
-            <template #back>
-              <traceCharts></traceCharts>
-            </template>
-          </customBack>
-        </div>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-<script setup>
-import centerMap from '@/components/centerMap.vue';
-import comprehensive from './components/comprehensive.vue';
-import plantBreedCharts from './components/plantBreedCharts.vue';
-import entitiesCharts from './components/entitiesCharts.vue';
-import inputs from './components/inputs.vue';
-import traceCharts from './components/traceCharts.vue';
-import rolllist from './components/rolllist.vue';
-import { isEmpty, getAssetsFile } from '@/utils';
-import { ref, reactive, onMounted, onUnmounted } from 'vue';
-
-let rollDataList = reactive([
-  { title: '勐腊镇', value: 533.1 },
-  { title: '孟定镇', value: 1069.2 },
-  { title: '孟永镇', value: 411.8 },
-  { title: '耿马镇', value: 429.4 },
-  { title: '大兴乡', value: 162.7 },
-  { title: '勐简乡', value: 2309.9 },
-  // 更多项...
-]);
-
-// });
-</script>
-<style lang="scss" scoped>
-.data-home-index {
-  height: 100%;
-  width: 100%;
-  .left-charts {
-    display: flex;
-    justify-content: space-around;
-    height: 100%;
-    flex-direction: column;
-  }
-  .left-charts-item {
-    width: calc(100% - 5px);
-    height: calc((100% - 30px) / 3);
-  }
-
-  .right-charts {
-    display: flex;
-    justify-content: space-around;
-    height: 100%;
-    flex-direction: column;
-  }
-  .right-charts-item {
-    width: calc(100% - 5px);
-    height: calc((100% - 30px) / 3);
-  }
-}
-</style>

src/views/home/index.vue

@@ -1,20 +1,69 @@
 <template>
   <div class="data-home-index">
-    <template v-for="(n, index) in homeList" :key="n.name">
+    <el-row style="width: 100%; height: 100%">
-      <div class="home-enter-item" :style="n.style" @click="itemClick(index)">
+      <el-col :span="6" class="left-charts">
-        <div class="name">
+        <div class="left-charts-item">
-          <span>{{ n.title || '--' }}</span>
+          <customBack top-title="综合数据统计" :top-postion="'left'">
-        </div>
+            <template #back>
-        <div class="img-icon" :style="n.imgstyle"><img :src="getAssetsFile(n.img)" /></div>
+              <comprehensive></comprehensive>
-      </div>
             </template>
+          </customBack>
+        </div>
+        <div class="left-charts-item">
+          <customBack top-title="土地分布数据统计" :top-postion="'left'">
+            <template #back>
+              <rolllist :items="rollDataList"></rolllist>
+            </template>
+          </customBack>
+        </div>
+        <div class="left-charts-item">
+          <customBack top-title="种养殖数据统计" :top-postion="'left'">
+            <template #back>
+              <plantBreedCharts></plantBreedCharts>
+            </template>
+          </customBack>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <centerMap></centerMap>
+      </el-col>
+      <el-col :span="6" class="right-charts">
+        <div class="right-charts-item">
+          <customBack top-title="使用投入品数据统计" :top-postion="'left'">
+            <template #back>
+              <inputs></inputs>
+            </template>
+          </customBack>
+        </div>
+        <div class="right-charts-item">
+          <customBack top-title="经营主体数据统计" :top-postion="'left'">
+            <template #back>
+              <entitiesCharts></entitiesCharts>
+            </template>
+          </customBack>
+        </div>
+        <div class="right-charts-item">
+          <customBack top-title="溯源赋码与扫码数据统计" :top-postion="'left'">
+            <template #back>
+              <traceCharts></traceCharts>
+            </template>
+          </customBack>
+        </div>
+      </el-col>
+    </el-row>
   </div>
 </template>
 <script setup>
-import { ref, reactive } from 'vue';
+import centerMap from '@/components/centerMap.vue';
-import { getAssetsFile } from '@/utils';
+import comprehensive from './components/comprehensive.vue';
-import { useRouter } from 'vue-router';
+import plantBreedCharts from './components/plantBreedCharts.vue';
-const router = useRouter();
+import entitiesCharts from './components/entitiesCharts.vue';
+import inputs from './components/inputs.vue';
+import traceCharts from './components/traceCharts.vue';
+import rolllist from './components/rolllist.vue';
+import { isEmpty, getAssetsFile } from '@/utils';
+import { ref, reactive, onMounted, onUnmounted } from 'vue';
+
 let rollDataList = reactive([
   { title: '勐腊镇', value: 533.1 },
   { title: '孟定镇', value: 1069.2 },
@@ -25,92 +74,32 @@ let rollDataList = reactive([
   // 更多项...
 ]);
 
-let homeList = reactive([
-  {
-    title: '产业运营管理后台',
-    name: 'operationM',
-    linkType: 0,
-    url: '',
-    img: 'images/vsualized/home1.png',
-    style: 'left: 20%;bottom:300px;',
-    imgstyle: 'width:100px;height:100px',
-  },
-  {
-    title: '产业运营平台',
-    name: 'operation',
-    linkType: 0,
-    url: '',
-    img: 'images/vsualized/home2.png',
-    style: 'left: 20%;bottom: 64px;',
-    imgstyle: 'width:160px;height:160px',
-  },
-  {
-    title: '数据大屏',
-    name: 'dataV',
-    linkType: 1,
-    url: '/v2/land',
-    img: 'images/vsualized/home3.png',
-    style: 'right: 20%;bottom:300px;',
-    imgstyle: 'width:100px;height:100px',
-  },
-  {
-    title: '政务院平台',
-    name: 'gov',
-    linkType: 0,
-    url: '',
-    img: 'images/vsualized/home4.png',
-    style: 'right: 20%;bottom: 64px;',
-    imgstyle: 'width:160px;height:160px',
-  },
-  // 更多项...
-]);
-
-const itemClick = (index) => {
-  if (index != undefined) {
-    let val = homeList[index] || null;
-    if (val && val.url != '') {
-      if (val.linkType == 1) {
-        router.push({ path: val.url });
-      }
-    }
-  }
-};
-
 // });
 </script>
 <style lang="scss" scoped>
 .data-home-index {
   height: 100%;
   width: 100%;
-  .home-enter-item {
+  .left-charts {
-    position: fixed;
+    display: flex;
-    z-index: 2;
+    justify-content: space-around;
-    text-align: center;
-    padding: 16px 0;
-    cursor: pointer;
-    .name {
-      color: #fff;
-      font-family: 'JinBuTi';
-      margin: 24px 0;
-      background: linear-gradient(180deg, #01fefd, rgba(1, 254, 253, 0));
-      border: 2px solid #01fefd;
-      border-radius: 8px;
-
-      padding: 0 24px;
-      span {
-        backdrop-filter: blur(8px);
-        line-height: 40px;
-        text-shadow: 0px 4px 8px 0px #01fefd;
-        font-size: 28px;
-      }
-    }
-    .img-icon {
-      margin: auto;
-      img {
     height: 100%;
-        width: 100%;
+    flex-direction: column;
   }
+  .left-charts-item {
+    width: calc(100% - 5px);
+    height: calc((100% - 30px) / 3);
   }
+
+  .right-charts {
+    display: flex;
+    justify-content: space-around;
+    height: 100%;
+    flex-direction: column;
+  }
+  .right-charts-item {
+    width: calc(100% - 5px);
+    height: calc((100% - 30px) / 3);
   }
 }
 </style>