auto

src/assets/scss/common.scss

@@ -1,62 +1,76 @@
-html,body,:root {
-    --padding-left:24px;
-    --padding-right:24px;
-    --main-color:rgb(38,80,179);
-    --header-height:66px;
-    --s: 6;// 轮播的个数
+html,
+body,
+:root {
+    --padding-left: 24px;
+    --padding-right: 24px;
+    --main-color: rgb(38, 80, 179);
+    --header-height: 66px;
+    --s: 6; // 轮播的个数
     --h: 36; // 单个 li 容器的高度
-    --speed: 1.5s;// 单次动画的时长
+    --speed: 1.5s; // 单次动画的时长
 }
-html,body{
+html,
+body {
     margin: 0;
     padding: 0;
 }
-.page-padding-left{
+.u-m-t {
+    margin-top: 2vh;
+}
+.u-p-t {
+    padding-top: 1vh;
+}
+
+.page-padding-left {
     padding-left: var(--padding-left);
 }
-@mixin mbg($o){
-    background-color: rgba(38,80,179,$o);
+@mixin mbg($o) {
+    background-color: rgba(38, 80, 179, $o);
 }
-.blur-wrap{
+.blur-wrap {
     backdrop-filter: blur(6px);
     @include mbg(0.3);
 }
 
-.left-wrap{
+.left-wrap {
     position: absolute;
-    left: 10px;
-    height: calc( 100vh - var(--header-height) - 24px );
-    top: calc( var(--header-height) + 24px);
+    left: calc(1vw + 1em + 48px + 20px);
+        // height: calc(100vh - var(--header-height) - 24px);
+        top: calc(var(--header-height) + 24px);
     width: 23vw;
     // padding: 15px;
     box-sizing: border-box;
 }
-.right-wrap{
+.right-wrap {
     position: absolute;
-    top: calc( var(--header-height) + 24px);
+    top: calc(var(--header-height) + 24px);
     // height: calc( 100vh - var(--header-height) - 24px );
     right: 10px;
-    
-    .scroll-board-wrap{
+
+    .scroll-board-wrap {
         margin-left: auto;
         width: 20vw;
         border-radius: 8px;
         overflow: hidden;
     }
 }
-.nav-wrap{
+.nav-wrap {
     position: fixed;
-    right: 0;
-    bottom: 0;
-    padding-bottom: 3vh;
-    .nav-item{
-        margin-top: 1vh;
-        width: 260px;
-        background: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(2,4,6,1) 100%);
-        padding: 15px 0;
+    left: 1vw;
+        top: calc(var(--header-height) + 24px);
+    
+    .nav-item {
+        &:not(:first-of-type) {
+            margin-top: 1vh;
+        }
+
+        width: 1em;
+        background: url(../img/nav-item.png);
+        background-size: 100% 100%;
+        padding: 24px;
         cursor: pointer;
-        &.active{
-            background: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(0,150,255,1) 100%); 
+        &.active {
+            background-image: url(../img/nav-item-s.png);
         }
     }
-}
+}

src/components/echarts.vue

@@ -3,7 +3,7 @@
 -->
 <!-- https://blog.csdn.net/zyz13883658166/article/details/124430938 -->
 <template>
-  <div :id="uuid" :style="style"></div>
+  <div :id="uuid" class="echarts" :style="style"></div>
 </template>
 <script>
 import * as echarts from "echarts";
@@ -48,6 +48,7 @@ export default {
       }
     },
     option() {
+      // console.log('option',console.log('this.option',JSON.parse(JSON.stringify(this.option))));
       if (this.myChart) {
         //   notMerge这个方法，是表示配置不重复，但是目前这个分代码没有生效
         this.myChart.setOption(this.option),
@@ -65,7 +66,14 @@ export default {
       };
     },
   },
+  methods: {
+    intChar(){
+      console.log('intChar');
+    }
+  },
   mounted() {
+    console.log('echarts mounted');
+    // echarts.init(document.getElementById('echarts')).dispose();//销毁前一个实例
     this.myChart = echarts.init(document.getElementById(this.uuid));
     this.myChart.setOption(this.option);
   },

src/service/mock.js

@@ -3,25 +3,61 @@
  */
 import { callApi } from '../utils/request'
 
-export const echarts01 = () =>
+export const page1echarts01 = () =>
     callApi({
-        url: 'echarts01',
+        url: 'page1echarts01',
         prefixUrl: 'api1',
     })
 
-export const mockPostDel = (data) =>
+export const page1echarts02 = () =>
     callApi({
-        url: 'mock/postDel',
-        data,
-        method: 'post',
+        url: 'page1echarts02',
         prefixUrl: 'api1',
     })
 
-export const mockPostAdd = (data) =>
+export const page1numerical = () =>
     callApi({
-        url: 'mock/postAdd',
-        data,
-        method: 'post',
-        contentType: 'urlencoded',
+        url: 'page1numerical',
         prefixUrl: 'api1',
-    })
+    })
+
+export const rightScrollData = () =>
+    callApi({
+        url: 'rightScrollData',
+        prefixUrl: 'api1',
+    })
+
+export const alarmDataApi = () =>
+    callApi({
+        url: 'alarmData',
+        prefixUrl: 'api1',
+    })
+
+export const page2echarts01 = () =>
+    callApi({
+        url: 'page2echarts01',
+        prefixUrl: 'api1',
+    })
+
+export const page2echarts02 = () =>
+    callApi({
+        url: 'page2echarts02',
+        prefixUrl: 'api1',
+    })
+
+// export const mockPostDel = (data) =>
+//     callApi({
+//         url: 'mock/postDel',
+//         data,
+//         method: 'post',
+//         prefixUrl: 'api1',
+//     })
+
+// export const mockPostAdd = (data) =>
+//     callApi({
+//         url: 'mock/postAdd',
+//         data,
+//         method: 'post',
+//         contentType: 'urlencoded',
+//         prefixUrl: 'api1',
+//     })

src/views/index.vue

@@ -5,12 +5,32 @@
   <div class=''>
     <Map></Map> 
     <Header></Header>
-    <Alarm :data="alarmData" />
-    <section class="left-wrap blur-wrap">
-      <Numerical :data="numerical01" />
-      <MyEcharts :option="page1Char1" height="30vh" />
-      <MyEcharts :option="option" height="30vh" />
+
+    <section class="nav-wrap">
+      <div class="nav-item" :class="{active:(index+1)==page}" v-for="(item,index) in navList" @click="navClick(index+1)" :key="index">
+        {{item.text}}
+      </div>
+    </section>
+
+    <Alarm v-if="page==6&&alarmData.length>1" :data="alarmData" />
+
+    <section class="left-wrap " v-if="page==1">
+      <Numerical class="blur-wrap" :data="page1numerical" />
+      <MyEcharts class="blur-wrap u-p-t" :option="page1Char1" height="30vh" />
+      <MyEcharts class="blur-wrap u-m-t u-p-t" :option="page1Char2" height="30vh" />
+    </section>
+
+    <section class="left-wrap " v-if="page==2">
+      <MyEcharts class="blur-wrap u-p-t" :option="page2Char1" ref="page2Char1" height="30vh" />
+      <MyEcharts class="blur-wrap u-m-t u-p-t" :option="page2Char2" height="40vh" />
     </section>
+
+    <section class="left-wrap " v-if="page==5">
+      <Numerical class="blur-wrap" :data="page1numerical" />
+      <MyEcharts class="blur-wrap u-p-t" :option="page1Char1" height="30vh" />
+      <MyEcharts class="blur-wrap u-m-t u-p-t" :option="page1Char2" height="30vh" />
+    </section>
+    
     <section class="right-wrap">
       <PickerAddr />
       <!-- <el-cascader
@@ -23,11 +43,7 @@
         <dv-scroll-board class="scroll-board-01" :config="scrollBoardConfig" style="width:100%;height:25vh" />
       </section>
     </section>
-    <section class="nav-wrap">
-      <div class="nav-item" v-for="(item,index) in navList" :key="index">
-        {{item.text}}
-      </div>
-    </section>
+    
 
 
   </div>
@@ -41,9 +57,19 @@
   import Alarm from "../components/alarm";
   import PickerAddr from "../components/pickerAddr";
 
-  import {getQuery,echarts01} from "../service/index"
+  import { Message } from 'element-ui';
 
-  import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data';
+  import {
+    page1numerical,
+    page1echarts01,
+    page1echarts02,
+    rightScrollData,
+    alarmDataApi,
+    page2echarts01,
+    page2echarts02,
+  } from "../service/index"
+
+  // import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data';
   
   export default {
     name: '',
@@ -57,7 +83,8 @@
     },
     data () {
       return {
-        addrOptions: regionDataPlus,
+        page:1,
+        // addrOptions: regionDataPlus,
         addrSelectedOptions: ['520000',''],
         navList:[
           {text:'森林资源'},
@@ -86,18 +113,18 @@
           evenRowBGC:'transparent',//偶数行背景色	
           align:['center','center','center'],//列对齐方式
         },
-        numerical01:[
+        page1numerical:[
           {name:'储蓄量',number:'2309',unit:'立方米'},
           {name:'储蓄量',number:'2309',unit:'立方米'},
           {name:'占地面积',number:'55.4',unit:'万亩'}
         ],
         alarmData:[
-          {msg:'三都林场01小班于15：00：00发现火情，请尽快处理！'},
-          {msg:'测试1！'},
-          {msg:'测试22222222！'},
+          // {msg:'三都林场01小班于15：00：00发现火情，请尽快处理！'},
+          // {msg:'测试1！'},
+          // {msg:'测试22222222！'},
         ],
         page1Char1:{},
-        option:{
+        page1Char2:{
             title: {
             text: '储蓄量统计(立方米)',
             textStyle:{
@@ -125,20 +152,26 @@
                 
             }
             ]
-        }
+        },
+        page2Char1:{},
+        page2Char2:{},
       };
     },
     created(){
-      echarts01().then(res=>{
+      //第一屏统计
+      page1numerical().then(res=>{
         // console.log('res',res);
-        this.page1Char1 = res.data;
+        this.page1numerical = res.data;
       }).catch(err=>{
         console.log('echarts01 err',err);
       })
+      this.getPage1echarts01();
+      this.getPage1echarts02();
+      this.getRightScrollData();
+      this.getAlarmData();
 
-
-    //  let a =  echarts01();
-    //  console.log('a',a);
+      // this.getPage2echarts01();
+      // this.getPage2echarts02();
     },
     mounted(){
       
@@ -146,7 +179,74 @@
     methods: {
       addrChange(value){
         console.log('addrChange',value);
-      }
+      },
+      navClick(index){
+        // console.log('index',index);
+        if(index==3||index==4){
+           Message('暂未开放！')
+          return
+        }
+        this.page = index;
+        if(index==1){
+          this.getPage1echarts01();
+          this.getPage1echarts02();
+        }else if(index==2){
+          this.getPage2echarts01();
+          this.getPage2echarts02();
+        }
+      },
+      getPage1echarts01(){
+        page1echarts01().then(res=>{
+          // console.log('res',res);
+          this.page1Char1 = res.data;
+        }).catch(err=>{
+          console.log('echarts01 err',err);
+        })
+      },
+      getPage1echarts02(){
+        page1echarts02().then(res=>{
+          // console.log('res',res);
+          this.page1Char2 = res.data;
+        }).catch(err=>{
+          console.log('echarts01 err',err);
+        })
+      },
+      getRightScrollData(){
+        rightScrollData().then(res=>{
+          // console.log('res',res);
+          this.scrollBoardConfig = res.data;
+        }).catch(err=>{
+          console.log('echarts01 err',err);
+        })
+      },
+      getAlarmData(){
+        alarmDataApi().then(res=>{
+          // console.log('res',res);
+          this.alarmData = res.data;
+        }).catch(err=>{
+          console.log('echarts01 err',err);
+        })
+      },
+
+      getPage2echarts01(){
+        page2echarts01().then(res=>{
+          // console.log('res',res);
+          this.page2Char1 = res.data;
+          console.log('this.$refs.page2Char1',this.$refs.page2Char1);
+          this.$refs.page2Char1.intChar()
+        }).catch(err=>{
+          console.log('echarts01 err',err);
+        })
+      },
+      getPage2echarts02(){
+        page2echarts02().then(res=>{
+          // console.log('res',res);
+          this.page2Char2 = res.data;
+        }).catch(err=>{
+          console.log('echarts01 err',err);
+        })
+      },
+
     },
   }
 </script>