环境监测界面新增按钮，按钮active状态添加

src/api/tyler/hjjc.js

@@ -12,7 +12,15 @@ export function getRealData(query) {
 // 查询历史数据右上
 export function getRtData(query) {
   return request({
-    url: "/business/screen/env/deal",
+    url: "/business/screen/env/carouselLineChartUp",
+    method: "get",
+    params: query,
+  });
+}
+// 查询历史数据右中
+export function getRcData(query) {
+  return request({
+    url: "/business/screen/env/carouselLineChartDow",
     method: "get",
     params: query,
   });

src/views/Screen/index.vue

@@ -15,9 +15,24 @@
         <div class="header por">银洞坡金矿智能化综合管控平台</div>
         <div class="sub-header">
           <div class="sub-header-left">
-            <div class="sub-item" @click="changeMenu(1)"><p>人员定位</p></div>
-            <div class="sub-item"><p>环境监测</p></div>
-            <div class="sub-item"><p>排水系统</p></div>
+            <div
+              class="sub-item"
+              :class="showMenu == 1 ? 'active' : ''"
+              @click="changeMenu(1)"
+            >
+              <p>人员定位</p>
+            </div>
+            <div
+              class="sub-item"
+              @click="changeMenu(2)"
+              key=""
+              :class="showMenu == 2 ? 'active' : ''"
+            >
+              <p>环境监测</p>
+            </div>
+            <div class="sub-item" key="" :class="showMenu == 1 ? 'active' : ''">
+              <p>排水系统</p>
+            </div>
           </div>
           <div class="sub-header-mid">
             <div class="top-change">
@@ -34,6 +49,7 @@
         </div>
 
         <rydw v-if="showMenu === 1" style="pointer-events: auto"></rydw>
+        <hjjc v-if="showMenu === 2" style="pointer-events: auto"></hjjc>
 
         <!-- 底部 -->
         <!-- <div class="footer">
@@ -432,6 +448,10 @@ export default {
     justify-content: center;
     align-items: center;
     cursor: pointer;
+    &.active {
+      background: url("~@/assets/images/screen/click.png") no-repeat center;
+      background-size: 100%;
+    }
     p {
       font-family: Source Han Sans SC;
       font-weight: bold;

src/views/Screen/items/hjjc.vue

@@ -56,6 +56,13 @@
             </div>
           </div>
         </div>
+        <!-- 现实设备切换按钮 -->
+        <div class="toggle-button">
+          <el-checkbox-group v-model="checkList">
+            <el-checkbox label="1">监控</el-checkbox>
+            <el-checkbox label="2">监测设备</el-checkbox>
+          </el-checkbox-group>
+        </div>
       </div>
       <!-- 右侧 -->
       <div class="sidebar sidebar-right">
@@ -160,6 +167,7 @@ export default {
         singleHeight: 110,
         openTouch: true,
       },
+      checkList: ["1", "2"],
       classOption2: {
         singleHeight: 47,
         openTouch: true,
@@ -675,6 +683,26 @@ export default {
       }
     }
   }
+  .toggle-button {
+    width: 120px;
+    height: 90px;
+    background: RGBA(8, 27, 58, 1);
+    position: absolute;
+    bottom: 58px;
+    right: 0px;
+    .el-checkbox-group {
+      width: 100%;
+      height: 100%;
+      .el-checkbox {
+        margin-top: 16px;
+        color: #fdfeff;
+        font-size: 16px;
+        font-weight: 500;
+        &.is-checked {
+        }
+      }
+    }
+  }
 }
 
 /* 实时分布图区域 */