修改最后问题，剩下浓度未修改

package-lock.json

@@ -1970,6 +1970,16 @@
           "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
           "dev": true
         },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
         "cacache": {
           "version": "13.0.1",
           "resolved": "https://registry.npm.taobao.org/cacache/download/cacache-13.0.1.tgz",
@@ -1996,6 +2006,53 @@
             "unique-filename": "^1.1.1"
           }
         },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
@@ -2012,6 +2069,16 @@
             "minipass": "^3.1.1"
           }
         },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
         "terser-webpack-plugin": {
           "version": "2.3.8",
           "resolved": "https://registry.npm.taobao.org/terser-webpack-plugin/download/terser-webpack-plugin-2.3.8.tgz?cache=0&sync_timestamp=1603881839307&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fterser-webpack-plugin%2Fdownload%2Fterser-webpack-plugin-2.3.8.tgz",
@@ -2028,6 +2095,18 @@
             "terser": "^4.6.12",
             "webpack-sources": "^1.4.3"
           }
+        },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.1.2",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.2.tgz",
+          "integrity": "sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          }
         }
       }
     },
@@ -12319,87 +12398,6 @@
         }
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.1.2",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.2.tgz",
-      "integrity": "sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "vue-router": {
       "version": "3.4.9",
       "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.4.9.tgz?cache=0&sync_timestamp=1607347184356&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.4.9.tgz",

src/views/Home.vue

@@ -39,6 +39,7 @@
               <p class="utils" v-else>(mg/L)</p>
             </div>
             <point-qulity :dataList="pointParamsData"></point-qulity>
+            <p class="pointId">点号</p>
           </div>
 
         
@@ -91,7 +92,7 @@
                 <el-menu-item-group>
                     <template slot="title">反演结果</template>
                     <el-menu-item v-for="($item, $index) in item.item"
-                    :key="$index" :index="index + $index+1+''" @click="selectParams($item.type, $item.value, index, $index)">{{$item.name}}: {{ $item.cf }}</el-menu-item>
+                    :key="$index" :index="index + $index+1+''" @click="selectParams($item.type, $item.value, index, $index)" :class="{paramsActive:checkedParamsActive==$item.type}">{{$item.name}}: {{ $item.cf }}</el-menu-item>
                 </el-menu-item-group>
                 <el-menu-item-group>
                   <template slot="title">风险源</template>
@@ -153,7 +154,7 @@
           <input type="checkbox" id="google" :checked="isChecked == 'google'" />
         </div>
       <div class="mapItem">
-        <label class="mapText" for="UAV" :class="{ mapActive: isUAV }"
+        <label class="unaMap" for="UAV" :class="{ mapActive: isUAV }"
           >无人机影像图</label
         >
         <input type="checkbox" id="UAV" :checked="isUAV" />
@@ -236,6 +237,7 @@ export default {
       showColor: false, // 控制色带显示影藏
       checkedRiver: 0, // 当前河道
       checkedParams: 'cod', // 当前参数
+      checkedParamsActive: '', // 当前选中参数高亮显示
       checkedRef: false, // 当前主题，是否被选中
       checkedPointParams: 0, // 当前采样点参数
       isChecked: "google", //
@@ -890,7 +892,8 @@ export default {
       this.sourceDong4.updateParams({ layers: "show:" + id });
       // 2.显示色带以及相应的值
       this.showColor = true;
-      this.checkedParams = type
+      this.checkedParams = type;
+      this.checkedParamsActive = type
       let l = 4 * this.checkedRiver;
       for (let i = l; i < l + 4; i++) {
         this.colorList.push(this.allcolorList[i]);
@@ -901,6 +904,7 @@ export default {
     // 选择河道
     selectRiver(index) {
       this.isParams = 'cod'
+      this.checkedParamsActive = ''
       this.checkedPointParams = 0
       // 初始化this.colorList 东风河
       // 1.根据所选河道变换对应的位置以及缩放信息
@@ -1217,7 +1221,7 @@ body {
 .cancelChart {
   width: 100%;
   padding: 10px 20px 0 0;
-  font-size: 20px;
+  font-size: 16px;
   color: rgba(51, 51, 51, 0.822);
   text-align: end;
 }
@@ -1254,6 +1258,13 @@ body {
   text-align: start;
   padding-left: 40px;
 }
+.pointId {
+  font-size: 12px;
+  color: #666;
+  text-align: end;
+  padding-right: 30px;
+  margin-bottom: 15px;
+}
 .placeChart {
   width: 100%;
   /* padding: 10px; */
@@ -1301,14 +1312,26 @@ body {
   justify-content: space-around;
   align-items: center;
 }
+.mapItem {
+  display: flex;
+}
 .mapText {
   width: 60px;
   height: 24px;
-  padding: 4px 8px;
   color: #333333;
   font-size: 12px;
   font-weight: 600;
-  line-height: 20px;
+  line-height: 24px;
+  background-color: #ffffff;
+  cursor: pointer;
+}
+.unaMap {
+  width: 90px;
+  height: 24px;
+  color: #333333;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 24px;
   background-color: #ffffff;
   cursor: pointer;
 }
@@ -1348,7 +1371,7 @@ body {
 
 /* 高亮显示 */
 .btnActive {
-  background-color: #2b7b8a;
+  background-color: #0091FF;
 }
 .riverActive {
   background-image: url("../assets/img/gisdemo/river-h.png");
@@ -1359,7 +1382,7 @@ body {
   background-size: cover;
 }
 .paramsActive {
-  background-color: #2b7b8a;
+  background-color: #0091FF !important;
 }
 .mapActive {
   color: #fff;

src/views/leftCompoents/landUse.vue

@@ -38,9 +38,9 @@ export default {
     const chart = new Chart({
     container: 'landUse',
   //   autoFit: true,
-    width: 320,
+    width: 330,
     height: 230,
-    padding: [0, 30, 10, 60],
+    padding: [0, 40, 10, 60],
 });
 chart.data(data);
 chart.scale('ratio', {

src/views/leftCompoents/outletComponents.vue

@@ -74,7 +74,7 @@ export default {
     #outletComponents .paramsList {
       width: 100%;
       margin: 10 auto;
-      padding: 10px;
+      padding: 0 10px;
       list-style: none;
       display: flex;
       flex-direction: column;
@@ -82,7 +82,7 @@ export default {
       align-items: flex-start;  
     }
     .value {
-      width: 80%;
+      width: 100%;
       margin-top: 8px;
       display: flex;
       flex-direction: column;
@@ -94,7 +94,7 @@ export default {
     }
     .imgtitle {
       margin: 8px 0px;
-      font-weight: 600;
+      font-size: 14px;
     }
     .closePopup {
       width: 12px;

src/views/leftCompoents/pointQulity.vue

@@ -40,7 +40,7 @@ export default {
       container: "pointQulity",
       width: 300,
       height: 200,
-      padding: [10, 30, 40, 50],
+      padding: [10, 10, 20, 40],
     });
 
     chart.data(data);