修改色带等问题

src/views/Home.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="home" style="position: relative" id="home">
     <!-- nav -->
-    <div class="nav"></div>
+    <img class="nav" src="../assets/img/gisdemo/top.png">
     <!-- 地图 -->
     <div id="map"></div>
     
@@ -83,7 +83,6 @@
           <el-menu
             class="menu-vertical-demo"
             @open="selectRiver"
-            :default-active="checkedRiver + ''"
             :unique-opened="true"
           >
             <el-submenu
@@ -99,7 +98,7 @@
                   <el-submenu :index="index+'-1'">
                     <template slot="title">反演结果</template>
                     <el-menu-item v-for="($item, $index) in item.item"
-                    :key="$index" :index="index + '-1' + $index" @click="selectParams($item.value, index, $index)">{{$item.name}}: {{ $item.type.toUpperCase() }}</el-menu-item>
+                    :key="$index" :index="index + '-1' + $index" @click="selectParams($item.value, $index)">{{$item.name}}: {{ $item.type.toUpperCase() }}</el-menu-item>
                   </el-submenu>
                 </el-menu-item-group>
                 <el-menu-item-group>
@@ -126,8 +125,8 @@
       <div class="colorMain">
         <p class="colorImg" alt=""></p>
         <p class="colorValue">
-          <span>{{colorHL.value.low}}</span>
-          <span>{{colorHL.value.high}}</span>
+          <span>{{colorHL&&colorHL.value.low}}</span>
+          <span>{{colorHL&&colorHL.value.high}}</span>
         </p>
       </div>
     </div>
@@ -140,7 +139,7 @@
       </div>
       <div class="mapItem">
         <label class="mapText" for="google" :class="{ mapActive: isChecked == 'google' }"
-          >google</label
+          >Google</label
         >
         <input type="checkbox" id="google" :checked="isChecked == 'google'" />
       </div>
@@ -507,7 +506,6 @@ export default {
         }); // 土地占比数据
         this.allLanduseList = landData;
         this.landuseList = this.allLanduseList[1]; // 设置土地占比初始值
-        console.log(this.landuseList);
       });
 
     this.place = new VectorLayer({
@@ -704,7 +702,6 @@ export default {
       if (e.selected.length > 0) {
         let properties = e.selected[0].getProperties();
         if (properties.geom instanceof Point) {
-          console.log('++++++++++++++')
           this.map.removeOverlay(this.overlayPlace);
           if(properties.river) { // 表示为采样点数据
             this.popupData = properties;
@@ -715,7 +712,6 @@ export default {
             this.map.addOverlay(this.overlay);
           } else { // 表示为排口数据
             this.popupOutlet = properties
-            console.log(this.popupOutlet);
             let coordinate = e.mapBrowserEvent.coordinate;
             this.overlayOutlet.setPosition(coordinate);
             this.overlayOutlet.setOffset([140, -10]);
@@ -726,9 +722,7 @@ export default {
         }
 
         if (properties.geom instanceof MultiPolygon) {
-          console.log('================');
           this.popupPlace = properties;
-          console.log(this.popupPlace);
           let coordinate = e.mapBrowserEvent.coordinate;
           this.overlayPlace.setPosition(coordinate);
           this.overlayPlace.setOffset([140, -10]);
@@ -830,8 +824,9 @@ export default {
     },
 
     // 选择反演参数
-    selectParams(id, index, $index) {
+    selectParams(id, $index) {
       // 1.显示四参数的图层并展示对应的图层
+      console.log(this.checkedRiver);
       this.tileDong.setVisible(true);
       this.sourceDong4.updateParams({ layers: "show:" + id });
       // 2.显示色带以及相应的值
@@ -841,6 +836,7 @@ export default {
         this.colorList.push(this.allcolorList[i]);
       }
       this.colorHL = this.colorList[$index];
+      console.log(this.colorList);
     },
 
     // 选择河道
@@ -848,7 +844,8 @@ export default {
       // 初始化this.colorList 东风河
       // 1.根据所选河道变换对应的位置以及缩放信息
       // 设置当前河道值为index
-      this.checkedRiver = index;
+      console.log(parseInt(index.slice(0,1)));
+      this.checkedRiver = parseInt(index.slice(0,1));
       if (index == 0) {
         this.view.animate(
           {zoom:15},
@@ -979,9 +976,7 @@ body {
 .nav {
   z-index: 99;
   width: 100%;
-  height: 50px;
-  background-image: url('../assets/img/gisdemo/top.png');
-  background-size: cover;
+  height: auto;
   position: absolute;
   top: 0px;
 }
@@ -1073,7 +1068,9 @@ body {
   color: #666666;
 }
 
-/deep/ .el-menu-item,
+/deep/ .el-menu-item {
+  padding-left: 20px;
+}
 /deep/ .el-submenu__title {
   height: 40px;
   line-height: 40px;
@@ -1136,9 +1133,9 @@ body {
   align-items: center;
 }
 .parmasItem {
-  width: 60px;
-  height: 26px;
-  background-color: #D8D8D8;
+  width: 50px;
+  height: 23px;
+  background-color: #eeeeee;
   display: flex;
   justify-content: space-around;
   align-items: center;
@@ -1249,8 +1246,8 @@ body {
   background-color: #0091FF;
 }
 .pointParamsActive {
-  width: 60px;
-  height: 26px;
+  width: 50px;
+  height: 23px;
   color: #fff;
   font-size: 12px;
   background: #0091FF;

src/views/leftCompoents/landUse.vue

@@ -39,7 +39,7 @@ export default {
     container: 'landUse',
   //   autoFit: true,
     width: 300,
-    height: 300,
+    height: 230,
     padding: [0, 30, 10, 30],
 });
 chart.data(data);
@@ -111,7 +111,7 @@ chart
   .tooltip('lc*ratio', (lc,ratio) => {
     return {
       name:lc,
-      value:ratio,
+      value: parseFloat(ratio).toFixed(2) + '公顷',
     };
   });
 

src/views/leftCompoents/outletComponents.vue

@@ -28,7 +28,6 @@ export default {
     },
   },
   mounted() {
-    console.log(this.dataList);
   },
   methods: {
     closeOutlet() {

src/views/leftCompoents/placeComponent.vue

@@ -2,7 +2,7 @@
   <div id="placeComponent">
     <!-- 点数据 -->
     <p class="popupNav">
-      <p class="title">土地利用详情</p>
+      <span class="title">土地利用详情</span>
       <img class="closePopup" src="../../assets/img/gisdemo/close.png" alt="" @click="closeOverlay">
     </p>
     <ul class="paramsList">