左侧及头部(未完成)修改

src/assets/scss/common.scss

@@ -5,7 +5,7 @@ body,
     --padding-right: 24px;
     --main-color: rgb(2, 238, 255);
     --title-color: #58c96b;
-    --header-height: 66px;
+    --header-height: 85px;
     --s: 6; // 轮播的个数
     --h: 36; // 单个 li 容器的高度
     --speed: 3s; // 单次动画的时长
@@ -26,6 +26,16 @@ body {
     padding-left: var(--padding-left);
 }
 
+.ntitle{
+    height: 38px;
+    line-height: 38px;
+    text-align: left;
+    background: url(../img/ntitle.png) no-repeat;
+    background-size: 100% 100%;
+    text-indent: 50px;
+    margin-bottom: 40px;
+}
+
 // 更改下拉框颜色
 .el-select-dropdown.el-popper{
     background-color: rgba(0,166,208,0.3);
@@ -59,11 +69,26 @@ body {
 .left-wrap {
     position: absolute;
     left: calc(1vw + 1em + 48px + 20px);
-        // height: calc(100vh - var(--header-height) - 24px);
-        top: calc(var(--header-height) + 24px);
+    height: calc(100vh - var(--header-height) - 24px);
+    top: calc(var(--header-height) + 24px);
     width: 23vw;
+    // min-width: 463px;
     // padding: 15px;
     box-sizing: border-box;
+    // display: flex;
+    // flex-direction: column;
+    .left-item{
+        // flex: 1;
+        height: calc( ( 100vh - var(--header-height) - 24px - 50px ) / 3 );
+        @include mbg(0.3);
+        // border: 1px solid var(--main-color);
+        background: rgba(11,21,17,.6);
+        // border-radius: 8px;
+        margin-bottom: 17px;
+        &.chart-wrap .ntitle{
+            margin-bottom: 10px;
+        }
+    }
 }
 .right-wrap {
     pointer-events: none;
@@ -77,7 +102,7 @@ body {
 
     .scroll-board-wrap {
         margin-left: auto;
-        width: 20vw;
+        width: 380px;
         border-radius: 8px;
         overflow: hidden;
         .dv-scroll-board .header{
@@ -87,7 +112,7 @@ body {
 }
 .xiaoban{
     margin: 20px 0;
-    width: 20vw;
+    width: 380px;
     margin-left: auto;
     color: var(--main-color);
      .el-input .el-input__inner{

src/components/echarts.vue

@@ -3,8 +3,10 @@
 -->
 <!-- https://blog.csdn.net/zyz13883658166/article/details/124430938 -->
 <template>
-  <div>
+  <div ref="wrap">
     <!-- <div>{{mid}}</div> -->
+    <div class="ntitle">{{option.title.text}}</div>
+    <div class="addr">{{$store.state.addr.selectAddr}}</div>
     <div :id="mid" class="echarts" :style="style"></div>
   </div>
   
@@ -19,7 +21,7 @@ export default {
   props: {
     height: {
       type: String,
-      default: "30vh",
+      default: null,
     },
     width: {
       type: String,
@@ -38,13 +40,22 @@ export default {
     return {
       uuid: null,
       myChart: null,
+      domHeight:null,
     };
   },
   created() {
     this.uuid = idGen();
-    // console.log('this.uuid',this.uuid);
+    // console.log('this.option',this.option);
+    
   },
   watch: {
+    // '$store.state.addr.mapLevel': {
+    //   handler:function (newVal, oldVal) {
+    //       console.log('newVal',newVal);
+    //       console.log('oldVal',oldVal);
+    //   },
+    //   immediate: true
+    // },
     width() {
       //如果实例可用
       if (this.myChart) {
@@ -69,7 +80,7 @@ export default {
   computed: {
     style() {
       return {
-        height: this.height,
+        height: this.height?this.height:this.domHeight-57 +'px',
         width: this.width,
       };
     },
@@ -86,10 +97,28 @@ export default {
     }
   },
   mounted() {
+    console.log('height',this.height);
+    let obj = this.$refs.wrap;
+    let h = window.getComputedStyle(obj).height;
+    console.log('h',h);
+    this.domHeight = h.slice(0, -2);
+     console.log('domHeight',this.domHeight);
+     console.log('style',this.style);
     console.log('echarts mounted');
     // echarts.init(document.getElementById('echarts')).dispose();//销毁前一个实例
-    this.myChart = echarts.init(document.getElementById(this.mid));
-    this.myChart.setOption(this.option);
+    this.$nextTick(()=>{
+      this.myChart = echarts.init(document.getElementById(this.mid));
+      this.myChart.setOption(this.option);
+
+    })
+    
   },
 };
-</script>
+</script>
+<style lang='scss' scoped>
+.addr{
+  text-align: right;
+  padding-right: 24px;
+  font-size: 14px;
+}
+</style>

src/components/header.vue

@@ -3,7 +3,7 @@
  * @Author: wangcc
  * @Date: 2022-06-14 18:11:54
  * @LastEditors: gcz
- * @LastEditTime: 2022-06-17 11:01:45
+ * @LastEditTime: 2022-06-27 14:22:40
  * @FilePath: \castgroup_bigscreen\src\components\header.vue
  * @Copyright: Copyright (c) 2016~2022 by wangcc, All Rights Reserved. 
 -->
@@ -105,7 +105,7 @@ import timeFormat from '@/utils/timeFormat'
   top: 0;
   left: 0;
   right: 0;
-  height: 66px;
+  height: 85px;
   background-image: url('../assets/img/index-top.png');
   background-size: 100% 100%;
   background-repeat: no-repeat;
@@ -113,18 +113,19 @@ import timeFormat from '@/utils/timeFormat'
   h2 {
     margin: 0;
     line-height: 48px;
-    color: #08eeff;
+    color: transparent;
     position: absolute;
     width: 100%;
     top: 0;
     text-align: center;
   }
   span {
-    color: #43a7ec;
+    color: #0a7786;
     font-size: 1.2em;
     position: absolute;
     line-height: 36px;
     left: 7%;
+    top: 40px;
   }
   img {
     width: 30px;
@@ -132,13 +133,18 @@ import timeFormat from '@/utils/timeFormat'
     cursor: pointer;
     position: absolute;
     top: 5px;
-    right: 5%;
+    right: 10px;
+    top: 40px;
   }
   .weather {
+    /deep/ .s-sticker >div{
+        color: #0a7786!important;
+    }
     position: absolute;
     line-height: 40px;
     width: 120px;
-    right: 13%;
+    right: 100px;
+    top: 40px;
   }
 }
 </style>

src/components/numerical.vue

@@ -3,10 +3,13 @@
 -->
 <template>
     <div class="numerical">
-        <div class="numerical-item u-flex" v-for="(item,index) in data" :key="item.name+index">
-            <span class="cell name">{{item.name}}：</span>
-            <span class="cell number">{{item.number}}</span>
-            <span class="cell unit">{{item.unit}}</span>
+        <div class="ntitle">{{ntitle}}</div>
+        <div class="item-wrap u-flex u-flex-wrap">
+            <div class="numerical-item" v-for="(item,index) in data" :key="item.name+index">
+                <div class="cell name">{{item.name}}：</div>
+                <span class="cell number">{{item.number}}</span>
+                <span class="cell unit">{{item.unit}}</span>
+            </div>
         </div>
     </div>
 </template>
@@ -20,6 +23,10 @@
                 type: Array,
                 default: null,
             },
+            ntitle:{
+                type: String,
+                default: '数据概况',
+            },
         },
         components: {},
         data () {
@@ -35,20 +42,34 @@
 </script>
 
 <style lang='scss' scoped>
+@import url('https://fonts.font.im/css?family=Rubik');
 .numerical{
-    box-sizing: border-box;
-    margin-bottom: 2vh;
-    border-radius: 10px;
-    padding: 20px 24px;
-    border: 1px solid var(--main-color);
-    .numerical-item{
-        & +  .numerical-item{
-            margin-top: 15px;
-        }
-        .number{
-            color: var(--main-color);
-            font-size: 1.5em;
-            margin-right: 5px;
+    // box-sizing: border-box;
+    // margin-bottom: 2vh;
+    // border-radius: 10px;
+    // padding: 20px 24px;
+    // border: 1px solid var(--main-color);
+    .item-wrap{
+        .numerical-item{
+            padding: 0 0 15px 15px;
+            box-sizing: border-box;
+            width: 50%;
+            text-align: left;
+            .name{
+                font-size: 18px;
+                color: #a6b7bf;
+                margin-bottom: 5px;
+            }
+            .number{
+                color: var(--main-color);
+                font-size: 39px;
+                margin-right: 5px;
+                font-family: 'Rubik', sans-serif;
+            }
+            .unit{
+                font-size: 17px;
+                color: var(--main-color);
+            }
         }
     }
 }

src/dataSchema/page1Char1Schema.js

@@ -7,14 +7,20 @@ let page1Char1Schema = {
         text: '蓄积量(立方米)',
         textStyle: {
             color: themeColor.mainColor,
-        }
+            fontSize: 0,
+            height: 0
+        },
+        show: false
 
     },
     tooltip: {},
-    // grid: {//斜着放显示不全
-    //     left: '18%',
-    //     bottom: '38%'
-    // },
+    grid: {
+        containLabel: true,
+        top: "20px",
+        left: '10px',
+        bottom: '20px',
+        right: '24px'
+    },
     xAxis: {
         data: ['清镇林场', '三都林场', '榕江林场', '水东林场', '甜蜜林场', '贵阳林场'],
         axisLabel: {

src/dataSchema/page1Char2Schema.js

@@ -7,10 +7,18 @@ let page1Char2Schema = {
         text: '面积统计(万亩)',
         textStyle: {
             color: themeColor.mainColor,
-        }
+        },
+        show: false
 
     },
     tooltip: {},
+    grid: {
+        containLabel: true,
+        top: "20px",
+        left: '10px',
+        bottom: '20px',
+        right: '24px'
+    },
     xAxis: {
         data: ['清镇林场', '三都林场', '榕江林场', '水东林场', '甜蜜林场', '贵阳林场'],
         axisLabel: {

src/dataSchema/page2Char1Schema.js

@@ -8,12 +8,20 @@ let page2Char1Schema = {
         left: 'center',
         textStyle: {
             color: themeColor.mainColor,
-        }
+        },
+        show: false
     },
     tooltip: {
         trigger: 'item',
         formatter: '{b} : {c} ({d}%)'
     },
+    grid: {
+        containLabel: true,
+        top: "20px",
+        left: '10px',
+        bottom: '20px',
+        right: '24px'
+    },
     legend: {
         show: false,
         orient: 'vertical',

src/dataSchema/page2Char2Schema.js

@@ -8,7 +8,15 @@ let page2Char2Schema = {
         text: '树种分布统计',
         textStyle: {
             color: themeColor.mainColor,
-        }
+        },
+        show: false
+    },
+    grid: {
+        containLabel: true,
+        top: "20px",
+        left: '10px',
+        bottom: '20px',
+        right: '24px'
     },
     tooltip: {
         trigger: 'axis',

src/dataSchema/page6Char1Schema.js

@@ -12,7 +12,15 @@ let page6Char1Schema = {
         text: '事件统计(件)',
         textStyle: {
             color: themeColor.mainColor,
-        }
+        },
+        show: false
+    },
+    grid: {
+        containLabel: true,
+        top: "20px",
+        left: '10px',
+        bottom: '20px',
+        right: '24px'
     },
     tooltip: {
         trigger: 'axis'

src/store/addr/index.js

@@ -20,6 +20,7 @@ const addr = {
     selectCity: {},
     selectDistrict: {},
     selectStreet: {},
+    selectAddr: '贵州省',
     // 获取小班边界地图
     smallClassMapArr: []
   },
@@ -52,6 +53,30 @@ const addr = {
     changeSelectStreet(state, streetData) {
       state.selectStreet = streetData;
     },
+    changeSelectAddr(state, mapLevel) {
+      console.log('mapLevelmapLevel', mapLevel);
+      switch (mapLevel) {
+        case 'province':
+          state.selectAddr = '贵州省';
+          break;
+        case 'city':
+          state.selectAddr = `贵州省 · ${state.selectCity.label}`;
+          break;
+
+        case 'district':
+          state.selectAddr = `贵州省 · ${state.selectCity.label} · ${state.selectDistrict.label}`;
+          break;
+
+        case 'treet':
+          state.selectAddr = `贵州省 · ${state.selectCity.label} · ${state.selectDistrict.label} · ${state.selectStreet.label}`;
+          break;
+
+        default:
+          state.selectAddr = '贵州省';
+          break;
+      }
+      // state.selectAddr = streetData;
+    },
     // 改变省市县级联选择获取数据
     changeParentId(state, n) {
         state.parentId = n.parentId;
@@ -73,6 +98,7 @@ const addr = {
 
           commit("changeSelectDistrict", {});
           commit("changeSelectStreet", {});
+
         } else if (params.mapLevel == "district") {
           commit("changeStreetList", res.data);
           commit("changeSelectStreet", {});
@@ -82,7 +108,8 @@ const addr = {
           commit("changeSelectDistrict", {});
           commit("changeSelectStreet", {});
         }
-        commit("changeParentId", params)
+        commit("changeParentId", params);
+        commit("changeSelectAddr", params.mapLevel);
       });
     },
     // 获取小班边界

src/store/getters.js

@@ -10,6 +10,7 @@ const getters = {
     selectCity: state => state.addr.selectCity,
     selectDistrict: state => state.addr.selectDistrict,
     selectStreet: state => state.addr.selectStreet,
+    selectAddr: state => state.addr.selectAddr,
     smallClassMapArr: state => state.addr.smallClassMapArr
 }
 

src/views/index.vue

@@ -1,8 +1,9 @@
 <!--
- * @LastEditors: wangcc
+ * @LastEditors: gcz
 -->
 <template>
   <div class>
+    <dv-full-screen-container>
     <Map></Map>
     <Header></Header>
 
@@ -19,71 +20,64 @@
     <Alarm v-if="page==6&&alarmData.length>=1" :data="alarmData" />
 
     <section class="left-wrap" v-if="$store.state.addr.page=='forest'">
-      <Numerical class :data="page1numerical" />
+      <Numerical class="left-item" :data="page1numerical" />
       <MyEcharts
-        class="blur-wrap u-p-t"
+        class="left-item chart-wrap"
         mid="page1Char1"
         ref="page1Char1"
         :option="page1Char1"
-        height="30vh"
-        style="padding-left:20px"
+        style=""
       />
       <MyEcharts
-        class="blur-wrap u-m-t u-p-t"
+        class="left-item chart-wrap"
         mid="page1Char2"
         ref="page1Char2"
         :option="page1Char2"
-        height="30vh"
-        style="padding-left:20px"
+        style=""
       />
     </section>
 
     <section class="left-wrap" v-if="$store.state.addr.page=='treeSpecies'">
       <MyEcharts
-        class="blur-wrap u-p-t"
+        class="left-item chart-wrap"
         mid="page2Char1"
         :option="page2Char1"
         ref="page2Char1"
-        height="30vh"
       />
       <MyEcharts
-        class="blur-wrap u-m-t u-p-t"
+        class="left-item chart-wrap"
         mid="page2Char2"
         :option="page2Char2"
         ref="page2Char2"
-        height="40vh"
       />
     </section>
 
     <!-- 林业经济 -->
     <section class="left-wrap" v-if="$store.state.addr.page=='economics'">
-      <Typeslide :data="typeSlideData" />
-      <Numerical class :data="page5numerical" />
+      <!-- <Typeslide :data="typeSlideData" /> -->
+      <Numerical class="left-item" :data="page5numerical" />
       <MyEcharts
-        class="blur-wrap u-p-t"
+        class="left-item chart-wrap"
         mid="page5Char1"
         ref="page5Char1"
         :option="page5Char1"
-        height="30vh"
       />
       <MyEcharts
-        class="blur-wrap u-m-t u-p-t"
+        class="left-item chart-wrap"
         mid="page5Char2"
         ref="page5Char2"
         :option="page5Char2"
-        height="30vh"
       />
     </section>
 
     <!-- 事件信息 -->
     <section class="left-wrap" v-if="$store.state.addr.page=='event'">
-      <Numerical class :data="page6numerical" />
+      <Numerical class="left-item" :data="page6numerical" />
       <MyEcharts
-        class="blur-wrap u-p-t"
+        class="left-item chart-wrap"
         mid="page6Char1"
         ref="page6Char1"
         :option="page6Char1"
-        height="30vh"
       />
     </section>
 
@@ -106,6 +100,7 @@
         />
       </section>
     </section>
+    </dv-full-screen-container>
   </div>
 </template>