首页框架初步

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

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

src/layouts/index.vue

@@ -1,7 +1,12 @@
 <template>
   <section
     class="base-laytout"
-    :style="{ width: `${state.style.width}px`, height: `${state.style.height}px`, transform: `${state.style.transform}` }"
+    :style="{
+      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">
@@ -11,7 +16,9 @@
 </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

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

src/views/home/index copy.vue

@@ -0,0 +1,105 @@
+<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,69 +1,20 @@
 <template>
   <div class="data-home-index">
-    <el-row style="width: 100%; height: 100%">
+    <template v-for="(n, index) in homeList" :key="n.name">
-      <el-col :span="6" class="left-charts">
+      <div class="home-enter-item" :style="n.style" @click="itemClick(index)">
-        <div class="left-charts-item">
+        <div class="name">
-          <customBack top-title="综合数据统计" :top-postion="'left'">
+          <span>{{ n.title || '--' }}</span>
-            <template #back>
-              <comprehensive></comprehensive>
-            </template>
-          </customBack>
         </div>
-        <div class="left-charts-item">
+        <div class="img-icon" :style="n.imgstyle"><img :src="getAssetsFile(n.img)" /></div>
-          <customBack top-title="土地分布数据统计" :top-postion="'left'">
+      </div>
-            <template #back>
+    </template>
-              <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 { ref, reactive } from 'vue';
-import comprehensive from './components/comprehensive.vue';
+import { getAssetsFile } from '@/utils';
-import plantBreedCharts from './components/plantBreedCharts.vue';
+import { useRouter } from 'vue-router';
-import entitiesCharts from './components/entitiesCharts.vue';
+const router = useRouter();
-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 },
@@ -74,32 +25,92 @@ 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%;
-  .left-charts {
+  .home-enter-item {
-    display: flex;
+    position: fixed;
-    justify-content: space-around;
+    z-index: 2;
-    height: 100%;
+    text-align: center;
-    flex-direction: column;
+    padding: 16px 0;
-  }
+    cursor: pointer;
-  .left-charts-item {
+    .name {
-    width: calc(100% - 5px);
+      color: #fff;
-    height: calc((100% - 30px) / 3);
+      font-family: 'JinBuTi';
-  }
+      margin: 24px 0;
+      background: linear-gradient(180deg, #01fefd, rgba(1, 254, 253, 0));
+      border: 2px solid #01fefd;
+      border-radius: 8px;
 
-  .right-charts {
+      padding: 0 24px;
-    display: flex;
+      span {
-    justify-content: space-around;
+        backdrop-filter: blur(8px);
-    height: 100%;
+        line-height: 40px;
-    flex-direction: column;
+        text-shadow: 0px 4px 8px 0px #01fefd;
-  }
+        font-size: 28px;
-  .right-charts-item {
+      }
-    width: calc(100% - 5px);
+    }
-    height: calc((100% - 30px) / 3);
+    .img-icon {
+      margin: auto;
+      img {
+        height: 100%;
+        width: 100%;
+      }
+    }
   }
 }
 </style>