diff --git a/src/assets/newImgs/HMScreen/20240624154343.png b/src/assets/newImgs/HMScreen/20240624154343.png
new file mode 100644
index 0000000..0e1a29d
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/20240624154343.png
Binary files differ

diff --git a/src/assets/newImgs/HMScreen/20240624154343.png b/src/assets/newImgs/HMScreen/20240624154343.png
new file mode 100644
index 0000000..0e1a29d
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/20240624154343.png
Binary files differ
diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index 2c1ad72..bbbcf07 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -488,7 +488,7 @@
   overflow-y: auto;
 }
 .publicRightHM {
-  height: calc(100vh - 150px);
+  height: calc(100vh - 140px);
   // border: 1px solid red;
   overflow-y: auto;
   position: absolute;

diff --git a/src/assets/newImgs/HMScreen/20240624154343.png b/src/assets/newImgs/HMScreen/20240624154343.png
new file mode 100644
index 0000000..0e1a29d
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/20240624154343.png
Binary files differ
diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index 2c1ad72..bbbcf07 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -488,7 +488,7 @@
   overflow-y: auto;
 }
 .publicRightHM {
-  height: calc(100vh - 150px);
+  height: calc(100vh - 140px);
   // border: 1px solid red;
   overflow-y: auto;
   position: absolute;
diff --git a/src/views/sponeScreen/longYW/InspectionTasks.vue b/src/views/sponeScreen/longYW/InspectionTasks.vue
index 3071390..d5ed358 100644
--- a/src/views/sponeScreen/longYW/InspectionTasks.vue
+++ b/src/views/sponeScreen/longYW/InspectionTasks.vue
@@ -22,11 +22,10 @@
         <p>巡查状态</p>
         <p>操作</p>
       </div>
-      <Vue3SeamlessScroll :list="tableData" :singleHeight="53" :singleWaitTime="1500" :hover="true" class="scroll">
+      <Vue3SeamlessScroll :list="tableData" :singleHeight="50" :singleWaitTime="1500" :hover="true" class="scroll">
         <div class="scrollCont flex" v-for="item in tableData" :key="item.id">
           <p class="ellipsis">{{ item.start }}</p>
           <p class="ellipsis">{{ item.end }}</p>
-          <p class="ellipsis">{{ item.yq }}</p>
           <p class="ellipsis">{{ item.num }}mm</p>
           <p class="ellipsis reports" @click="checkReport(item)">详情</p>
         </div>
@@ -38,8 +37,12 @@
 <script setup>
 import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
 const tableData = ref([
-  { start: '海绵项目1', end: '李强', yq: '小雨', num: '正在巡查', id: 1 },
-  { start: '海绵项目2', end: '李强', yq: '大雨', num: '结束巡查', id: 1 },
+  { start: '海绵项目1', end: '李强', num: '正在巡查', id: 1 },
+  { start: '海绵项目2', end: '李强', num: '已结束', id: 1 },
+  { start: '海绵项目3', end: '李强', num: '正在巡查', id: 1 },
+  { start: '海绵项目4', end: '李强', num: '已结束', id: 1 },
+  { start: '海绵项目5', end: '李强', num: '已结束', id: 1 },
+  { start: '海绵项目6', end: '李强', num: '已结束', id: 1 },
 ]);
 const AllData = reactive({
   queryParams: {},
@@ -52,6 +55,26 @@
   width: 100%;
   height: 30%;
   background: #07347f;
+  opacity: 0.8;
+  padding: 10px;
+  margin: auto;
+  .scrollMapHM {
+    height: 100%;
+    position: relative;
+    top: 10px;
+    p {
+      width: 23%;
+    }
+    .reports {
+      color: #3afff8;
+    }
+    .scroll {
+      width: 100%;
+      height: calc(100% - 20%);
+      overflow: hidden;
+      display: inline-block;
+    }
+  }
 }
 .head-right {
   cursor: pointer;
@@ -60,7 +83,6 @@
   top: -33px;
   width: 150px;
   height: 32px;
-
   // background: red;
 }
 </style>

diff --git a/src/assets/newImgs/HMScreen/20240624154343.png b/src/assets/newImgs/HMScreen/20240624154343.png
new file mode 100644
index 0000000..0e1a29d
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/20240624154343.png
Binary files differ
diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index 2c1ad72..bbbcf07 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -488,7 +488,7 @@
   overflow-y: auto;
 }
 .publicRightHM {
-  height: calc(100vh - 150px);
+  height: calc(100vh - 140px);
   // border: 1px solid red;
   overflow-y: auto;
   position: absolute;
diff --git a/src/views/sponeScreen/longYW/InspectionTasks.vue b/src/views/sponeScreen/longYW/InspectionTasks.vue
index 3071390..d5ed358 100644
--- a/src/views/sponeScreen/longYW/InspectionTasks.vue
+++ b/src/views/sponeScreen/longYW/InspectionTasks.vue
@@ -22,11 +22,10 @@
         <p>巡查状态</p>
         <p>操作</p>
       </div>
-      <Vue3SeamlessScroll :list="tableData" :singleHeight="53" :singleWaitTime="1500" :hover="true" class="scroll">
+      <Vue3SeamlessScroll :list="tableData" :singleHeight="50" :singleWaitTime="1500" :hover="true" class="scroll">
         <div class="scrollCont flex" v-for="item in tableData" :key="item.id">
           <p class="ellipsis">{{ item.start }}</p>
           <p class="ellipsis">{{ item.end }}</p>
-          <p class="ellipsis">{{ item.yq }}</p>
           <p class="ellipsis">{{ item.num }}mm</p>
           <p class="ellipsis reports" @click="checkReport(item)">详情</p>
         </div>
@@ -38,8 +37,12 @@
 <script setup>
 import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
 const tableData = ref([
-  { start: '海绵项目1', end: '李强', yq: '小雨', num: '正在巡查', id: 1 },
-  { start: '海绵项目2', end: '李强', yq: '大雨', num: '结束巡查', id: 1 },
+  { start: '海绵项目1', end: '李强', num: '正在巡查', id: 1 },
+  { start: '海绵项目2', end: '李强', num: '已结束', id: 1 },
+  { start: '海绵项目3', end: '李强', num: '正在巡查', id: 1 },
+  { start: '海绵项目4', end: '李强', num: '已结束', id: 1 },
+  { start: '海绵项目5', end: '李强', num: '已结束', id: 1 },
+  { start: '海绵项目6', end: '李强', num: '已结束', id: 1 },
 ]);
 const AllData = reactive({
   queryParams: {},
@@ -52,6 +55,26 @@
   width: 100%;
   height: 30%;
   background: #07347f;
+  opacity: 0.8;
+  padding: 10px;
+  margin: auto;
+  .scrollMapHM {
+    height: 100%;
+    position: relative;
+    top: 10px;
+    p {
+      width: 23%;
+    }
+    .reports {
+      color: #3afff8;
+    }
+    .scroll {
+      width: 100%;
+      height: calc(100% - 20%);
+      overflow: hidden;
+      display: inline-block;
+    }
+  }
 }
 .head-right {
   cursor: pointer;
@@ -60,7 +83,6 @@
   top: -33px;
   width: 150px;
   height: 32px;
-
   // background: red;
 }
 </style>
diff --git a/src/views/sponeScreen/longYW/ManualSampling.vue b/src/views/sponeScreen/longYW/ManualSampling.vue
index 8ad12b7..1fd91ab 100644
--- a/src/views/sponeScreen/longYW/ManualSampling.vue
+++ b/src/views/sponeScreen/longYW/ManualSampling.vue
@@ -1,11 +1,123 @@
 <template>
   <div class="longYW">
     <div class="partTitleHM">人工采样</div>
-    <div class="ConstrucClass">人工采样</div>
+    <div class="ConstrucClass">
+      <div class="HeadContent">
+        <div class="head-center">
+          <div
+            class="head-item"
+            v-for="(item, index) in CurrentIssuesrList"
+            :key="item"
+            :class="activedname == item.name ? 'activedright' : ''"
+            @click="CurrentIssuesrclick(item, index)"
+          >
+            {{ item.name }}
+          </div>
+        </div>
+      </div>
+      <div class="box-body">
+        <div class="scrollMapHM">
+          <div class="scrollTitle flex" v-if="activedname == '土壤'">
+            <p>采样地点</p>
+            <p>渗透系数</p>
+            <p>孔隙度</p>
+            <p>土壤容重</p>
+            <p>采样时间</p>
+          </div>
+
+          <div class="scrollTitle flex" v-if="activedname == '下垫面'">
+            <p>下垫面名称</p>
+            <p>PH</p>
+            <p>SS</p>
+            <p>COD</p>
+            <p>TN</p>
+            <p>TP</p>
+            <p>氨氮</p>
+            <p>采样时间</p>
+          </div>
+
+          <div class="scrollTitle flex" v-if="activedname == '海绵设施'">
+            <p>设施名称</p>
+            <p>PH</p>
+            <p>SS</p>
+            <p>COD</p>
+            <p>TN</p>
+            <p>TP</p>
+            <p>氨氮</p>
+            <p>采样时间</p>
+          </div>
+
+          <Vue3SeamlessScroll :list="tableData" :singleHeight="53" :singleWaitTime="1500" :hover="true" class="scroll">
+            <div class="scrollCont flex" v-for="item in tableData" :key="item.id" v-if="activedname == '土壤'">
+              <p class="ellipsis">{{ item.start }}</p>
+              <p class="ellipsis">{{ item.num }}</p>
+              <p class="ellipsis">{{ item.porosity }}</p>
+              <p class="ellipsis">{{ item.Soilbulk }}</p>
+              <p class="ellipsis">{{ item.time }}</p>
+            </div>
+            <div class="scrollCont flex" v-for="item in tableData" :key="item.id" v-if="activedname == '下垫面'">
+              <p class="ellipsis">{{ item.start }}</p>
+              <p class="ellipsis">{{ item.Ph }}</p>
+              <p class="ellipsis">{{ item.ss }}</p>
+              <p class="ellipsis">{{ item.COD }}</p>
+              <p class="ellipsis">{{ item.TN }}</p>
+
+              <p class="ellipsis">{{ item.TP }}</p>
+              <p class="ellipsis">{{ item.AN }}</p>
+              <p class="ellipsis">{{ item.time }}</p>
+            </div>
+            <div class="scrollCont flex" v-for="item in tableData" :key="item.id" v-if="activedname == '海绵设施'">
+              <p class="ellipsis">{{ item.start }}</p>
+              <p class="ellipsis">{{ item.Ph }}</p>
+              <p class="ellipsis">{{ item.ss }}</p>
+              <p class="ellipsis">{{ item.COD }}</p>
+              <p class="ellipsis">{{ item.TN }}</p>
+
+              <p class="ellipsis">{{ item.TP }}</p>
+              <p class="ellipsis">{{ item.AN }}</p>
+              <p class="ellipsis">{{ item.time }}</p>
+            </div>
+          </Vue3SeamlessScroll>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+const tableData = ref([
+  { start: '惠济河1号', num: '2', porosity: '1.3', Soilbulk: '12', time: '2024-04-10', id: 1 },
+  { start: '马家河2号', num: '2.4', porosity: '0.6', Soilbulk: '23', time: '2024-04-10', id: 1 },
+]);
+const activedname = ref('土壤');
+const CurrentIssuesrList = ref([
+  { name: '土壤', value: 1 },
+  { name: '下垫面', value: 2 },
+  { name: '海绵设施', value: 3 },
+]);
+
+// 点击事件
+function CurrentIssuesrclick(val) {
+  activedname.value = val.name;
+  if (activedname.value == '土壤') {
+    tableData.value = [
+      { start: '惠济河1号', num: '2', porosity: '1.3', Soilbulk: '12', time: '2024-04-10', id: 1 },
+      { start: '马家河2号', num: '2.4', porosity: '0.6', Soilbulk: '23', time: '2024-04-10', id: 1 },
+    ];
+  } else if (activedname.value == '下垫面') {
+    tableData.value = [
+      { start: '惠济河1号', Ph: '7.2', ss: '1.3', COD: '12', TN: '34', TP: '12', AN: '120', time: '2024-06-10', id: 1 },
+      { start: '马家河2号', Ph: '6.7', ss: '0.6', COD: '23', TN: '45', TP: '12', AN: '90', time: '2024-06-10', id: 1 },
+    ];
+  } else {
+    tableData.value = [
+      { start: '惠济河1号', Ph: '7.2', ss: '1.3', COD: '12', TN: '34', TP: '12', AN: '120', time: '2024-06-10', id: 1 },
+      { start: '马家河2号', Ph: '6.7', ss: '0.6', COD: '23', TN: '45', TP: '12', AN: '90', time: '2024-06-10', id: 1 },
+    ];
+  }
+}
+</script>
 
 <style lang="scss" scoped>
 .longYW {
@@ -13,7 +125,64 @@
   width: 100%;
   height: 31%;
   background: #07347f;
-}
-.ConstrucClass {
+  .ConstrucClass {
+    height: 90%;
+    opacity: 0.8;
+    // background: red;
+    .HeadContent {
+      width: 100%;
+      height: 30px;
+      // background: #2270ff;
+      align-items: center;
+      line-height: 25px;
+      margin-top: 5px;
+
+      .head-center {
+        height: 30px;
+        cursor: pointer;
+        font-size: 14px;
+        display: flex;
+        overflow: hidden;
+        overflow-x: auto;
+        color: #ffffff;
+        .head-item {
+          margin-left: 10px;
+          padding: 2px 3px;
+          border: 1px solid #0dc9ff;
+          background: #013a73;
+          height: 30px;
+          text-align: center;
+          min-width: 100px;
+          border: 1px solid #2270ff;
+        }
+        .activedright {
+          border: 1px solid #2cfce9;
+          color: #0dc9ff;
+          background: #166f84;
+        }
+      }
+    }
+    .box-body {
+      height: 88%;
+      // background: yellowgreen;
+      padding: 10px;
+      .scrollMapHM {
+        height: 100%;
+        p {
+          width: 18%;
+          // background: red;
+        }
+        .reports {
+          color: #3afff8;
+        }
+        .scroll {
+          width: 100%;
+          height: calc(100% - 30%);
+          overflow: hidden;
+          display: inline-block;
+        }
+      }
+    }
+  }
 }
 </style>

diff --git a/src/assets/newImgs/HMScreen/20240624154343.png b/src/assets/newImgs/HMScreen/20240624154343.png
new file mode 100644
index 0000000..0e1a29d
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/20240624154343.png
Binary files differ
diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index 2c1ad72..bbbcf07 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -488,7 +488,7 @@
   overflow-y: auto;
 }
 .publicRightHM {
-  height: calc(100vh - 150px);
+  height: calc(100vh - 140px);
   // border: 1px solid red;
   overflow-y: auto;
   position: absolute;
diff --git a/src/views/sponeScreen/longYW/InspectionTasks.vue b/src/views/sponeScreen/longYW/InspectionTasks.vue
index 3071390..d5ed358 100644
--- a/src/views/sponeScreen/longYW/InspectionTasks.vue
+++ b/src/views/sponeScreen/longYW/InspectionTasks.vue
@@ -22,11 +22,10 @@
         <p>巡查状态</p>
         <p>操作</p>
       </div>
-      <Vue3SeamlessScroll :list="tableData" :singleHeight="53" :singleWaitTime="1500" :hover="true" class="scroll">
+      <Vue3SeamlessScroll :list="tableData" :singleHeight="50" :singleWaitTime="1500" :hover="true" class="scroll">
         <div class="scrollCont flex" v-for="item in tableData" :key="item.id">
           <p class="ellipsis">{{ item.start }}</p>
           <p class="ellipsis">{{ item.end }}</p>
-          <p class="ellipsis">{{ item.yq }}</p>
           <p class="ellipsis">{{ item.num }}mm</p>
           <p class="ellipsis reports" @click="checkReport(item)">详情</p>
         </div>
@@ -38,8 +37,12 @@
 <script setup>
 import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
 const tableData = ref([
-  { start: '海绵项目1', end: '李强', yq: '小雨', num: '正在巡查', id: 1 },
-  { start: '海绵项目2', end: '李强', yq: '大雨', num: '结束巡查', id: 1 },
+  { start: '海绵项目1', end: '李强', num: '正在巡查', id: 1 },
+  { start: '海绵项目2', end: '李强', num: '已结束', id: 1 },
+  { start: '海绵项目3', end: '李强', num: '正在巡查', id: 1 },
+  { start: '海绵项目4', end: '李强', num: '已结束', id: 1 },
+  { start: '海绵项目5', end: '李强', num: '已结束', id: 1 },
+  { start: '海绵项目6', end: '李强', num: '已结束', id: 1 },
 ]);
 const AllData = reactive({
   queryParams: {},
@@ -52,6 +55,26 @@
   width: 100%;
   height: 30%;
   background: #07347f;
+  opacity: 0.8;
+  padding: 10px;
+  margin: auto;
+  .scrollMapHM {
+    height: 100%;
+    position: relative;
+    top: 10px;
+    p {
+      width: 23%;
+    }
+    .reports {
+      color: #3afff8;
+    }
+    .scroll {
+      width: 100%;
+      height: calc(100% - 20%);
+      overflow: hidden;
+      display: inline-block;
+    }
+  }
 }
 .head-right {
   cursor: pointer;
@@ -60,7 +83,6 @@
   top: -33px;
   width: 150px;
   height: 32px;
-
   // background: red;
 }
 </style>
diff --git a/src/views/sponeScreen/longYW/ManualSampling.vue b/src/views/sponeScreen/longYW/ManualSampling.vue
index 8ad12b7..1fd91ab 100644
--- a/src/views/sponeScreen/longYW/ManualSampling.vue
+++ b/src/views/sponeScreen/longYW/ManualSampling.vue
@@ -1,11 +1,123 @@
 <template>
   <div class="longYW">
     <div class="partTitleHM">人工采样</div>
-    <div class="ConstrucClass">人工采样</div>
+    <div class="ConstrucClass">
+      <div class="HeadContent">
+        <div class="head-center">
+          <div
+            class="head-item"
+            v-for="(item, index) in CurrentIssuesrList"
+            :key="item"
+            :class="activedname == item.name ? 'activedright' : ''"
+            @click="CurrentIssuesrclick(item, index)"
+          >
+            {{ item.name }}
+          </div>
+        </div>
+      </div>
+      <div class="box-body">
+        <div class="scrollMapHM">
+          <div class="scrollTitle flex" v-if="activedname == '土壤'">
+            <p>采样地点</p>
+            <p>渗透系数</p>
+            <p>孔隙度</p>
+            <p>土壤容重</p>
+            <p>采样时间</p>
+          </div>
+
+          <div class="scrollTitle flex" v-if="activedname == '下垫面'">
+            <p>下垫面名称</p>
+            <p>PH</p>
+            <p>SS</p>
+            <p>COD</p>
+            <p>TN</p>
+            <p>TP</p>
+            <p>氨氮</p>
+            <p>采样时间</p>
+          </div>
+
+          <div class="scrollTitle flex" v-if="activedname == '海绵设施'">
+            <p>设施名称</p>
+            <p>PH</p>
+            <p>SS</p>
+            <p>COD</p>
+            <p>TN</p>
+            <p>TP</p>
+            <p>氨氮</p>
+            <p>采样时间</p>
+          </div>
+
+          <Vue3SeamlessScroll :list="tableData" :singleHeight="53" :singleWaitTime="1500" :hover="true" class="scroll">
+            <div class="scrollCont flex" v-for="item in tableData" :key="item.id" v-if="activedname == '土壤'">
+              <p class="ellipsis">{{ item.start }}</p>
+              <p class="ellipsis">{{ item.num }}</p>
+              <p class="ellipsis">{{ item.porosity }}</p>
+              <p class="ellipsis">{{ item.Soilbulk }}</p>
+              <p class="ellipsis">{{ item.time }}</p>
+            </div>
+            <div class="scrollCont flex" v-for="item in tableData" :key="item.id" v-if="activedname == '下垫面'">
+              <p class="ellipsis">{{ item.start }}</p>
+              <p class="ellipsis">{{ item.Ph }}</p>
+              <p class="ellipsis">{{ item.ss }}</p>
+              <p class="ellipsis">{{ item.COD }}</p>
+              <p class="ellipsis">{{ item.TN }}</p>
+
+              <p class="ellipsis">{{ item.TP }}</p>
+              <p class="ellipsis">{{ item.AN }}</p>
+              <p class="ellipsis">{{ item.time }}</p>
+            </div>
+            <div class="scrollCont flex" v-for="item in tableData" :key="item.id" v-if="activedname == '海绵设施'">
+              <p class="ellipsis">{{ item.start }}</p>
+              <p class="ellipsis">{{ item.Ph }}</p>
+              <p class="ellipsis">{{ item.ss }}</p>
+              <p class="ellipsis">{{ item.COD }}</p>
+              <p class="ellipsis">{{ item.TN }}</p>
+
+              <p class="ellipsis">{{ item.TP }}</p>
+              <p class="ellipsis">{{ item.AN }}</p>
+              <p class="ellipsis">{{ item.time }}</p>
+            </div>
+          </Vue3SeamlessScroll>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+const tableData = ref([
+  { start: '惠济河1号', num: '2', porosity: '1.3', Soilbulk: '12', time: '2024-04-10', id: 1 },
+  { start: '马家河2号', num: '2.4', porosity: '0.6', Soilbulk: '23', time: '2024-04-10', id: 1 },
+]);
+const activedname = ref('土壤');
+const CurrentIssuesrList = ref([
+  { name: '土壤', value: 1 },
+  { name: '下垫面', value: 2 },
+  { name: '海绵设施', value: 3 },
+]);
+
+// 点击事件
+function CurrentIssuesrclick(val) {
+  activedname.value = val.name;
+  if (activedname.value == '土壤') {
+    tableData.value = [
+      { start: '惠济河1号', num: '2', porosity: '1.3', Soilbulk: '12', time: '2024-04-10', id: 1 },
+      { start: '马家河2号', num: '2.4', porosity: '0.6', Soilbulk: '23', time: '2024-04-10', id: 1 },
+    ];
+  } else if (activedname.value == '下垫面') {
+    tableData.value = [
+      { start: '惠济河1号', Ph: '7.2', ss: '1.3', COD: '12', TN: '34', TP: '12', AN: '120', time: '2024-06-10', id: 1 },
+      { start: '马家河2号', Ph: '6.7', ss: '0.6', COD: '23', TN: '45', TP: '12', AN: '90', time: '2024-06-10', id: 1 },
+    ];
+  } else {
+    tableData.value = [
+      { start: '惠济河1号', Ph: '7.2', ss: '1.3', COD: '12', TN: '34', TP: '12', AN: '120', time: '2024-06-10', id: 1 },
+      { start: '马家河2号', Ph: '6.7', ss: '0.6', COD: '23', TN: '45', TP: '12', AN: '90', time: '2024-06-10', id: 1 },
+    ];
+  }
+}
+</script>
 
 <style lang="scss" scoped>
 .longYW {
@@ -13,7 +125,64 @@
   width: 100%;
   height: 31%;
   background: #07347f;
-}
-.ConstrucClass {
+  .ConstrucClass {
+    height: 90%;
+    opacity: 0.8;
+    // background: red;
+    .HeadContent {
+      width: 100%;
+      height: 30px;
+      // background: #2270ff;
+      align-items: center;
+      line-height: 25px;
+      margin-top: 5px;
+
+      .head-center {
+        height: 30px;
+        cursor: pointer;
+        font-size: 14px;
+        display: flex;
+        overflow: hidden;
+        overflow-x: auto;
+        color: #ffffff;
+        .head-item {
+          margin-left: 10px;
+          padding: 2px 3px;
+          border: 1px solid #0dc9ff;
+          background: #013a73;
+          height: 30px;
+          text-align: center;
+          min-width: 100px;
+          border: 1px solid #2270ff;
+        }
+        .activedright {
+          border: 1px solid #2cfce9;
+          color: #0dc9ff;
+          background: #166f84;
+        }
+      }
+    }
+    .box-body {
+      height: 88%;
+      // background: yellowgreen;
+      padding: 10px;
+      .scrollMapHM {
+        height: 100%;
+        p {
+          width: 18%;
+          // background: red;
+        }
+        .reports {
+          color: #3afff8;
+        }
+        .scroll {
+          width: 100%;
+          height: calc(100% - 30%);
+          overflow: hidden;
+          display: inline-block;
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/src/views/sponeScreen/longYW/MonitoringStation.vue b/src/views/sponeScreen/longYW/MonitoringStation.vue
index 3017c97..cb76a21 100644
--- a/src/views/sponeScreen/longYW/MonitoringStation.vue
+++ b/src/views/sponeScreen/longYW/MonitoringStation.vue
@@ -1,11 +1,71 @@
 <template>
   <div class="longYW">
     <div class="partTitleHM">监测站点统计</div>
-    <div class="ConstrucClass">监测站点统计</div>
+    <div class="ConstrucClass">
+      <div class="HeadContent">
+        <div class="one">
+          <div class="iconTwo bgcBlue"></div>
+          <span>总计</span>
+          <span class="bgcBlue">86</span>
+          个
+        </div>
+        <div class="two">
+          <div class="iconTwo bgcgreen"></div>
+          <span>在线</span>
+          <span class="bgcgreen">80</span>
+          个
+        </div>
+        <div class="three">
+          <div class="iconTwo bgcRed"></div>
+          <span>离线</span>
+          <span class="bgcRed">5</span>
+          个
+        </div>
+        <div class="four">
+          <div class="iconTwo bgcYellow"></div>
+          <span>故障</span>
+          <span class="bgcYellow">1</span>
+          个
+        </div>
+      </div>
+      <div class="box-body">
+        <div class="scrollMapHM">
+          <div class="scrollTitle flex">
+            <p>站点名称</p>
+            <p>监测类型</p>
+            <p>通讯时间</p>
+            <p>状态</p>
+          </div>
+
+          <Vue3SeamlessScroll :list="tableData" :singleHeight="50" :singleWaitTime="1500" :hover="true" class="scroll">
+            <div class="scrollCont flex" v-for="item in tableData" :key="item.id">
+              <p class="ellipsis">{{ item.start }}</p>
+              <p class="ellipsis">{{ item.num }}</p>
+              <p class="ellipsis">{{ item.time }}</p>
+              <p class="ellipsis reports" @click="checkReport(item)">{{ item.zt }}</p>
+            </div>
+          </Vue3SeamlessScroll>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+
+const tableData = ref([
+  { start: '汴京路雨量站', num: '雨量站', time: '06-07  16:00', zt: '在线', id: 1 },
+  { start: '汴京路雨量站', num: '雨量站', time: '06-07  16:00', zt: '在线', id: 1 },
+  { start: '汴京路雨量站', num: '雨量站', time: '06-07  16:00', zt: '在线', id: 1 },
+  { start: '汴京路雨量站', num: '雨量站', time: '06-07  16:00', zt: '在线', id: 1 },
+  { start: '汴京路雨量站', num: '雨量站', time: '06-07  16:00', zt: '在线', id: 1 },
+  { start: '汴京路雨量站', num: '雨量站', time: '06-07  16:00', zt: '在线', id: 1 },
+  { start: '汴京路雨量站', num: '雨量站', time: '06-07  16:00', zt: '在线', id: 1 },
+  { start: '汴京路雨量站', num: '雨量站', time: '06-07  16:00', zt: '离线', id: 1 },
+  { start: '汴京路雨量站', num: '雨量站', time: '06-07  16:00', zt: '故障', id: 1 },
+]);
+</script>
 
 <style lang="scss" scoped>
 .longYW {
@@ -15,5 +75,79 @@
   background: #07347f;
 }
 .ConstrucClass {
+  height: 83%;
+  opacity: 0.8;
+  // background: red;
+  .HeadContent {
+    width: 100%;
+    height: 23%;
+    // background: #2270ff;
+    align-items: center;
+    line-height: 25px;
+    margin-top: 2px;
+    display: flex;
+    .one,
+    .two,
+    .three,
+    .four {
+      width: 24.5%;
+      height: 100%;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      font-size: 15px;
+      font-family: SourceHanSansCN-Regular;
+      font-weight: 600;
+      // background: red;
+    }
+  }
+  .box-body {
+    height: 80%;
+    // background: yellowgreen;
+    padding: 10px;
+    .scrollMapHM {
+      height: 100%;
+      p {
+        width: 18%;
+        // background: red;
+      }
+      .reports {
+        color: #3afff8;
+      }
+      .scroll {
+        width: 100%;
+        height: calc(100% - 30%);
+        overflow: hidden;
+        display: inline-block;
+      }
+    }
+  }
+}
+.iconTwo {
+  display: inline-block;
+  // border-color: #18e87a;
+  border-style: solid;
+  border-width: 2px;
+  width: 0;
+  height: 0;
+  position: relative;
+  top: -2px;
+  -moz-transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  transform: rotate(45deg);
+  margin-left: 15px;
+}
+.bgcBlue {
+  color: #619bff;
+}
+.bgcgreen {
+  color: #2ceea7;
+}
+.bgcRed {
+  color: #fa5959;
+}
+.bgcYellow {
+  color: #ffcf2a;
 }
 </style>

diff --git a/src/assets/newImgs/HMScreen/20240624154343.png b/src/assets/newImgs/HMScreen/20240624154343.png
new file mode 100644
index 0000000..0e1a29d
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/20240624154343.png
Binary files differ
diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index 2c1ad72..bbbcf07 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -488,7 +488,7 @@
   overflow-y: auto;
 }
 .publicRightHM {
-  height: calc(100vh - 150px);
+  height: calc(100vh - 140px);
   // border: 1px solid red;
   overflow-y: auto;
   position: absolute;
diff --git a/src/views/sponeScreen/longYW/InspectionTasks.vue b/src/views/sponeScreen/longYW/InspectionTasks.vue
index 3071390..d5ed358 100644
--- a/src/views/sponeScreen/longYW/InspectionTasks.vue
+++ b/src/views/sponeScreen/longYW/InspectionTasks.vue
@@ -22,11 +22,10 @@
         <p>巡查状态</p>
         <p>操作</p>
       </div>
-      <Vue3SeamlessScroll :list="tableData" :singleHeight="53" :singleWaitTime="1500" :hover="true" class="scroll">
+      <Vue3SeamlessScroll :list="tableData" :singleHeight="50" :singleWaitTime="1500" :hover="true" class="scroll">
         <div class="scrollCont flex" v-for="item in tableData" :key="item.id">
           <p class="ellipsis">{{ item.start }}</p>
           <p class="ellipsis">{{ item.end }}</p>
-          <p class="ellipsis">{{ item.yq }}</p>
           <p class="ellipsis">{{ item.num }}mm</p>
           <p class="ellipsis reports" @click="checkReport(item)">详情</p>
         </div>
@@ -38,8 +37,12 @@
 <script setup>
 import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
 const tableData = ref([
-  { start: '海绵项目1', end: '李强', yq: '小雨', num: '正在巡查', id: 1 },
-  { start: '海绵项目2', end: '李强', yq: '大雨', num: '结束巡查', id: 1 },
+  { start: '海绵项目1', end: '李强', num: '正在巡查', id: 1 },
+  { start: '海绵项目2', end: '李强', num: '已结束', id: 1 },
+  { start: '海绵项目3', end: '李强', num: '正在巡查', id: 1 },
+  { start: '海绵项目4', end: '李强', num: '已结束', id: 1 },
+  { start: '海绵项目5', end: '李强', num: '已结束', id: 1 },
+  { start: '海绵项目6', end: '李强', num: '已结束', id: 1 },
 ]);
 const AllData = reactive({
   queryParams: {},
@@ -52,6 +55,26 @@
   width: 100%;
   height: 30%;
   background: #07347f;
+  opacity: 0.8;
+  padding: 10px;
+  margin: auto;
+  .scrollMapHM {
+    height: 100%;
+    position: relative;
+    top: 10px;
+    p {
+      width: 23%;
+    }
+    .reports {
+      color: #3afff8;
+    }
+    .scroll {
+      width: 100%;
+      height: calc(100% - 20%);
+      overflow: hidden;
+      display: inline-block;
+    }
+  }
 }
 .head-right {
   cursor: pointer;
@@ -60,7 +83,6 @@
   top: -33px;
   width: 150px;
   height: 32px;
-
   // background: red;
 }
 </style>
diff --git a/src/views/sponeScreen/longYW/ManualSampling.vue b/src/views/sponeScreen/longYW/ManualSampling.vue
index 8ad12b7..1fd91ab 100644
--- a/src/views/sponeScreen/longYW/ManualSampling.vue
+++ b/src/views/sponeScreen/longYW/ManualSampling.vue
@@ -1,11 +1,123 @@
 <template>
   <div class="longYW">
     <div class="partTitleHM">人工采样</div>
-    <div class="ConstrucClass">人工采样</div>
+    <div class="ConstrucClass">
+      <div class="HeadContent">
+        <div class="head-center">
+          <div
+            class="head-item"
+            v-for="(item, index) in CurrentIssuesrList"
+            :key="item"
+            :class="activedname == item.name ? 'activedright' : ''"
+            @click="CurrentIssuesrclick(item, index)"
+          >
+            {{ item.name }}
+          </div>
+        </div>
+      </div>
+      <div class="box-body">
+        <div class="scrollMapHM">
+          <div class="scrollTitle flex" v-if="activedname == '土壤'">
+            <p>采样地点</p>
+            <p>渗透系数</p>
+            <p>孔隙度</p>
+            <p>土壤容重</p>
+            <p>采样时间</p>
+          </div>
+
+          <div class="scrollTitle flex" v-if="activedname == '下垫面'">
+            <p>下垫面名称</p>
+            <p>PH</p>
+            <p>SS</p>
+            <p>COD</p>
+            <p>TN</p>
+            <p>TP</p>
+            <p>氨氮</p>
+            <p>采样时间</p>
+          </div>
+
+          <div class="scrollTitle flex" v-if="activedname == '海绵设施'">
+            <p>设施名称</p>
+            <p>PH</p>
+            <p>SS</p>
+            <p>COD</p>
+            <p>TN</p>
+            <p>TP</p>
+            <p>氨氮</p>
+            <p>采样时间</p>
+          </div>
+
+          <Vue3SeamlessScroll :list="tableData" :singleHeight="53" :singleWaitTime="1500" :hover="true" class="scroll">
+            <div class="scrollCont flex" v-for="item in tableData" :key="item.id" v-if="activedname == '土壤'">
+              <p class="ellipsis">{{ item.start }}</p>
+              <p class="ellipsis">{{ item.num }}</p>
+              <p class="ellipsis">{{ item.porosity }}</p>
+              <p class="ellipsis">{{ item.Soilbulk }}</p>
+              <p class="ellipsis">{{ item.time }}</p>
+            </div>
+            <div class="scrollCont flex" v-for="item in tableData" :key="item.id" v-if="activedname == '下垫面'">
+              <p class="ellipsis">{{ item.start }}</p>
+              <p class="ellipsis">{{ item.Ph }}</p>
+              <p class="ellipsis">{{ item.ss }}</p>
+              <p class="ellipsis">{{ item.COD }}</p>
+              <p class="ellipsis">{{ item.TN }}</p>
+
+              <p class="ellipsis">{{ item.TP }}</p>
+              <p class="ellipsis">{{ item.AN }}</p>
+              <p class="ellipsis">{{ item.time }}</p>
+            </div>
+            <div class="scrollCont flex" v-for="item in tableData" :key="item.id" v-if="activedname == '海绵设施'">
+              <p class="ellipsis">{{ item.start }}</p>
+              <p class="ellipsis">{{ item.Ph }}</p>
+              <p class="ellipsis">{{ item.ss }}</p>
+              <p class="ellipsis">{{ item.COD }}</p>
+              <p class="ellipsis">{{ item.TN }}</p>
+
+              <p class="ellipsis">{{ item.TP }}</p>
+              <p class="ellipsis">{{ item.AN }}</p>
+              <p class="ellipsis">{{ item.time }}</p>
+            </div>
+          </Vue3SeamlessScroll>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+const tableData = ref([
+  { start: '惠济河1号', num: '2', porosity: '1.3', Soilbulk: '12', time: '2024-04-10', id: 1 },
+  { start: '马家河2号', num: '2.4', porosity: '0.6', Soilbulk: '23', time: '2024-04-10', id: 1 },
+]);
+const activedname = ref('土壤');
+const CurrentIssuesrList = ref([
+  { name: '土壤', value: 1 },
+  { name: '下垫面', value: 2 },
+  { name: '海绵设施', value: 3 },
+]);
+
+// 点击事件
+function CurrentIssuesrclick(val) {
+  activedname.value = val.name;
+  if (activedname.value == '土壤') {
+    tableData.value = [
+      { start: '惠济河1号', num: '2', porosity: '1.3', Soilbulk: '12', time: '2024-04-10', id: 1 },
+      { start: '马家河2号', num: '2.4', porosity: '0.6', Soilbulk: '23', time: '2024-04-10', id: 1 },
+    ];
+  } else if (activedname.value == '下垫面') {
+    tableData.value = [
+      { start: '惠济河1号', Ph: '7.2', ss: '1.3', COD: '12', TN: '34', TP: '12', AN: '120', time: '2024-06-10', id: 1 },
+      { start: '马家河2号', Ph: '6.7', ss: '0.6', COD: '23', TN: '45', TP: '12', AN: '90', time: '2024-06-10', id: 1 },
+    ];
+  } else {
+    tableData.value = [
+      { start: '惠济河1号', Ph: '7.2', ss: '1.3', COD: '12', TN: '34', TP: '12', AN: '120', time: '2024-06-10', id: 1 },
+      { start: '马家河2号', Ph: '6.7', ss: '0.6', COD: '23', TN: '45', TP: '12', AN: '90', time: '2024-06-10', id: 1 },
+    ];
+  }
+}
+</script>
 
 <style lang="scss" scoped>
 .longYW {
@@ -13,7 +125,64 @@
   width: 100%;
   height: 31%;
   background: #07347f;
-}
-.ConstrucClass {
+  .ConstrucClass {
+    height: 90%;
+    opacity: 0.8;
+    // background: red;
+    .HeadContent {
+      width: 100%;
+      height: 30px;
+      // background: #2270ff;
+      align-items: center;
+      line-height: 25px;
+      margin-top: 5px;
+
+      .head-center {
+        height: 30px;
+        cursor: pointer;
+        font-size: 14px;
+        display: flex;
+        overflow: hidden;
+        overflow-x: auto;
+        color: #ffffff;
+        .head-item {
+          margin-left: 10px;
+          padding: 2px 3px;
+          border: 1px solid #0dc9ff;
+          background: #013a73;
+          height: 30px;
+          text-align: center;
+          min-width: 100px;
+          border: 1px solid #2270ff;
+        }
+        .activedright {
+          border: 1px solid #2cfce9;
+          color: #0dc9ff;
+          background: #166f84;
+        }
+      }
+    }
+    .box-body {
+      height: 88%;
+      // background: yellowgreen;
+      padding: 10px;
+      .scrollMapHM {
+        height: 100%;
+        p {
+          width: 18%;
+          // background: red;
+        }
+        .reports {
+          color: #3afff8;
+        }
+        .scroll {
+          width: 100%;
+          height: calc(100% - 30%);
+          overflow: hidden;
+          display: inline-block;
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/src/views/sponeScreen/longYW/MonitoringStation.vue b/src/views/sponeScreen/longYW/MonitoringStation.vue
index 3017c97..cb76a21 100644
--- a/src/views/sponeScreen/longYW/MonitoringStation.vue
+++ b/src/views/sponeScreen/longYW/MonitoringStation.vue
@@ -1,11 +1,71 @@
 <template>
   <div class="longYW">
     <div class="partTitleHM">监测站点统计</div>
-    <div class="ConstrucClass">监测站点统计</div>
+    <div class="ConstrucClass">
+      <div class="HeadContent">
+        <div class="one">
+          <div class="iconTwo bgcBlue"></div>
+          <span>总计</span>
+          <span class="bgcBlue">86</span>
+          个
+        </div>
+        <div class="two">
+          <div class="iconTwo bgcgreen"></div>
+          <span>在线</span>
+          <span class="bgcgreen">80</span>
+          个
+        </div>
+        <div class="three">
+          <div class="iconTwo bgcRed"></div>
+          <span>离线</span>
+          <span class="bgcRed">5</span>
+          个
+        </div>
+        <div class="four">
+          <div class="iconTwo bgcYellow"></div>
+          <span>故障</span>
+          <span class="bgcYellow">1</span>
+          个
+        </div>
+      </div>
+      <div class="box-body">
+        <div class="scrollMapHM">
+          <div class="scrollTitle flex">
+            <p>站点名称</p>
+            <p>监测类型</p>
+            <p>通讯时间</p>
+            <p>状态</p>
+          </div>
+
+          <Vue3SeamlessScroll :list="tableData" :singleHeight="50" :singleWaitTime="1500" :hover="true" class="scroll">
+            <div class="scrollCont flex" v-for="item in tableData" :key="item.id">
+              <p class="ellipsis">{{ item.start }}</p>
+              <p class="ellipsis">{{ item.num }}</p>
+              <p class="ellipsis">{{ item.time }}</p>
+              <p class="ellipsis reports" @click="checkReport(item)">{{ item.zt }}</p>
+            </div>
+          </Vue3SeamlessScroll>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+
+const tableData = ref([
+  { start: '汴京路雨量站', num: '雨量站', time: '06-07  16:00', zt: '在线', id: 1 },
+  { start: '汴京路雨量站', num: '雨量站', time: '06-07  16:00', zt: '在线', id: 1 },
+  { start: '汴京路雨量站', num: '雨量站', time: '06-07  16:00', zt: '在线', id: 1 },
+  { start: '汴京路雨量站', num: '雨量站', time: '06-07  16:00', zt: '在线', id: 1 },
+  { start: '汴京路雨量站', num: '雨量站', time: '06-07  16:00', zt: '在线', id: 1 },
+  { start: '汴京路雨量站', num: '雨量站', time: '06-07  16:00', zt: '在线', id: 1 },
+  { start: '汴京路雨量站', num: '雨量站', time: '06-07  16:00', zt: '在线', id: 1 },
+  { start: '汴京路雨量站', num: '雨量站', time: '06-07  16:00', zt: '离线', id: 1 },
+  { start: '汴京路雨量站', num: '雨量站', time: '06-07  16:00', zt: '故障', id: 1 },
+]);
+</script>
 
 <style lang="scss" scoped>
 .longYW {
@@ -15,5 +75,79 @@
   background: #07347f;
 }
 .ConstrucClass {
+  height: 83%;
+  opacity: 0.8;
+  // background: red;
+  .HeadContent {
+    width: 100%;
+    height: 23%;
+    // background: #2270ff;
+    align-items: center;
+    line-height: 25px;
+    margin-top: 2px;
+    display: flex;
+    .one,
+    .two,
+    .three,
+    .four {
+      width: 24.5%;
+      height: 100%;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      font-size: 15px;
+      font-family: SourceHanSansCN-Regular;
+      font-weight: 600;
+      // background: red;
+    }
+  }
+  .box-body {
+    height: 80%;
+    // background: yellowgreen;
+    padding: 10px;
+    .scrollMapHM {
+      height: 100%;
+      p {
+        width: 18%;
+        // background: red;
+      }
+      .reports {
+        color: #3afff8;
+      }
+      .scroll {
+        width: 100%;
+        height: calc(100% - 30%);
+        overflow: hidden;
+        display: inline-block;
+      }
+    }
+  }
+}
+.iconTwo {
+  display: inline-block;
+  // border-color: #18e87a;
+  border-style: solid;
+  border-width: 2px;
+  width: 0;
+  height: 0;
+  position: relative;
+  top: -2px;
+  -moz-transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  transform: rotate(45deg);
+  margin-left: 15px;
+}
+.bgcBlue {
+  color: #619bff;
+}
+.bgcgreen {
+  color: #2ceea7;
+}
+.bgcRed {
+  color: #fa5959;
+}
+.bgcYellow {
+  color: #ffcf2a;
 }
 </style>
diff --git a/src/views/sponeScreen/longYW/PromotionTraining.vue b/src/views/sponeScreen/longYW/PromotionTraining.vue
index 9c3e21a..2a36bc5 100644
--- a/src/views/sponeScreen/longYW/PromotionTraining.vue
+++ b/src/views/sponeScreen/longYW/PromotionTraining.vue
@@ -2,23 +2,44 @@
   <div class="longYW">
     <div class="partTitleHM">宣传培训</div>
     <div class="ConstrucClass">
-      <div class="PublicityContent">
-        <div class="PublicityContentZP">照片</div>
+      <!-- <Vue3SeamlessScroll :list="tableData" :singleHeight="110" :singleWaitTime="1500" :hover="true" class="scroll"> -->
+      <div class="PublicityContent" v-for="item in tableData" @click="zpClck(item)">
+        <div class="PublicityContentZP">
+          <div class="zp"></div>
+        </div>
         <div class="PublicityContentlR">
           <div class="PublicityContentXM">
-            <span>开封市打造出一批海绵城市示范项目</span>
+            <span>{{ item.name }}</span>
           </div>
           <div class="PublicityContentTime">
             <span>发布时间</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-            <span>2024-06-22 15:16:18</span>
+            <span>{{ item.time }}</span>
           </div>
         </div>
       </div>
+      <!-- </Vue3SeamlessScroll> -->
     </div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+
+const tableData = ref([
+  { name: '海绵城市建设服务中心开展活动', time: '2023-02-22 09:18:31', lj: 'https://www.kf.cn/c/2023-02-22/785725.shtml' },
+  { name: '开封市海绵城市建设管理条例宣传进社区', time: '2023-09-21 17:25:23', lj: 'https://www.kf.cn/c/2023-09-21/851453.shtml' },
+  {
+    name: '开封市海绵城市建设管理条例宣传活动启动仪式举行',
+    time: '2023-08-15 19:56:41',
+    lj: 'https://www.kf.cn/c/2023-08-15/846349.shtml',
+  },
+]);
+
+// 照片点击
+function zpClck(val) {
+  window.open(val.lj);
+}
+</script>
 
 <style lang="scss" scoped>
 .longYW {
@@ -28,26 +49,43 @@
   background: #07347f;
   .ConstrucClass {
     height: calc(100% - 18%);
+    overflow: hidden;
+    overflow-y: auto;
     // background: red;
+    .scroll {
+      margin-top: 5px;
+      width: 100%;
+      height: calc(100% - 10%);
+      overflow: hidden;
+      display: inline-block;
+    }
   }
   .PublicityContent {
     margin: auto;
     width: 95%;
     height: 90px;
     background: #123f86;
-
     position: relative;
     top: 5px;
     display: flex;
-    // margin-top: 10px;
     .PublicityContentZP {
       width: 20%;
       height: 90px;
-      background: yellow;
+      // background: yellow;
+      .zp {
+        width: 80px;
+        height: 80px;
+        margin: auto;
+        margin-top: 5px;
+        background: url('@/assets/newImgs/HMScreen/20240624154343.png') no-repeat;
+        background-size: 100% 100%;
+      }
     }
     .PublicityContentlR {
       width: 80%;
       height: 90px;
+      margin-left: 5px;
+      cursor: pointer;
       // background: blueviolet;
       .PublicityContentXM {
         width: 100%;
@@ -55,10 +93,13 @@
         // background: blue;
         display: flex;
         align-items: center;
-        // justify-content: center;
         span {
+          height: 60%;
           font-size: 16px;
           color: #e4f5ff;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
         }
       }
       .PublicityContentTime {

diff --git a/src/assets/newImgs/HMScreen/20240624154343.png b/src/assets/newImgs/HMScreen/20240624154343.png
new file mode 100644
index 0000000..0e1a29d
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/20240624154343.png
Binary files differ
diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index 2c1ad72..bbbcf07 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -488,7 +488,7 @@
   overflow-y: auto;
 }
 .publicRightHM {
-  height: calc(100vh - 150px);
+  height: calc(100vh - 140px);
   // border: 1px solid red;
   overflow-y: auto;
   position: absolute;
diff --git a/src/views/sponeScreen/longYW/InspectionTasks.vue b/src/views/sponeScreen/longYW/InspectionTasks.vue
index 3071390..d5ed358 100644
--- a/src/views/sponeScreen/longYW/InspectionTasks.vue
+++ b/src/views/sponeScreen/longYW/InspectionTasks.vue
@@ -22,11 +22,10 @@
         <p>巡查状态</p>
         <p>操作</p>
       </div>
-      <Vue3SeamlessScroll :list="tableData" :singleHeight="53" :singleWaitTime="1500" :hover="true" class="scroll">
+      <Vue3SeamlessScroll :list="tableData" :singleHeight="50" :singleWaitTime="1500" :hover="true" class="scroll">
         <div class="scrollCont flex" v-for="item in tableData" :key="item.id">
           <p class="ellipsis">{{ item.start }}</p>
           <p class="ellipsis">{{ item.end }}</p>
-          <p class="ellipsis">{{ item.yq }}</p>
           <p class="ellipsis">{{ item.num }}mm</p>
           <p class="ellipsis reports" @click="checkReport(item)">详情</p>
         </div>
@@ -38,8 +37,12 @@
 <script setup>
 import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
 const tableData = ref([
-  { start: '海绵项目1', end: '李强', yq: '小雨', num: '正在巡查', id: 1 },
-  { start: '海绵项目2', end: '李强', yq: '大雨', num: '结束巡查', id: 1 },
+  { start: '海绵项目1', end: '李强', num: '正在巡查', id: 1 },
+  { start: '海绵项目2', end: '李强', num: '已结束', id: 1 },
+  { start: '海绵项目3', end: '李强', num: '正在巡查', id: 1 },
+  { start: '海绵项目4', end: '李强', num: '已结束', id: 1 },
+  { start: '海绵项目5', end: '李强', num: '已结束', id: 1 },
+  { start: '海绵项目6', end: '李强', num: '已结束', id: 1 },
 ]);
 const AllData = reactive({
   queryParams: {},
@@ -52,6 +55,26 @@
   width: 100%;
   height: 30%;
   background: #07347f;
+  opacity: 0.8;
+  padding: 10px;
+  margin: auto;
+  .scrollMapHM {
+    height: 100%;
+    position: relative;
+    top: 10px;
+    p {
+      width: 23%;
+    }
+    .reports {
+      color: #3afff8;
+    }
+    .scroll {
+      width: 100%;
+      height: calc(100% - 20%);
+      overflow: hidden;
+      display: inline-block;
+    }
+  }
 }
 .head-right {
   cursor: pointer;
@@ -60,7 +83,6 @@
   top: -33px;
   width: 150px;
   height: 32px;
-
   // background: red;
 }
 </style>
diff --git a/src/views/sponeScreen/longYW/ManualSampling.vue b/src/views/sponeScreen/longYW/ManualSampling.vue
index 8ad12b7..1fd91ab 100644
--- a/src/views/sponeScreen/longYW/ManualSampling.vue
+++ b/src/views/sponeScreen/longYW/ManualSampling.vue
@@ -1,11 +1,123 @@
 <template>
   <div class="longYW">
     <div class="partTitleHM">人工采样</div>
-    <div class="ConstrucClass">人工采样</div>
+    <div class="ConstrucClass">
+      <div class="HeadContent">
+        <div class="head-center">
+          <div
+            class="head-item"
+            v-for="(item, index) in CurrentIssuesrList"
+            :key="item"
+            :class="activedname == item.name ? 'activedright' : ''"
+            @click="CurrentIssuesrclick(item, index)"
+          >
+            {{ item.name }}
+          </div>
+        </div>
+      </div>
+      <div class="box-body">
+        <div class="scrollMapHM">
+          <div class="scrollTitle flex" v-if="activedname == '土壤'">
+            <p>采样地点</p>
+            <p>渗透系数</p>
+            <p>孔隙度</p>
+            <p>土壤容重</p>
+            <p>采样时间</p>
+          </div>
+
+          <div class="scrollTitle flex" v-if="activedname == '下垫面'">
+            <p>下垫面名称</p>
+            <p>PH</p>
+            <p>SS</p>
+            <p>COD</p>
+            <p>TN</p>
+            <p>TP</p>
+            <p>氨氮</p>
+            <p>采样时间</p>
+          </div>
+
+          <div class="scrollTitle flex" v-if="activedname == '海绵设施'">
+            <p>设施名称</p>
+            <p>PH</p>
+            <p>SS</p>
+            <p>COD</p>
+            <p>TN</p>
+            <p>TP</p>
+            <p>氨氮</p>
+            <p>采样时间</p>
+          </div>
+
+          <Vue3SeamlessScroll :list="tableData" :singleHeight="53" :singleWaitTime="1500" :hover="true" class="scroll">
+            <div class="scrollCont flex" v-for="item in tableData" :key="item.id" v-if="activedname == '土壤'">
+              <p class="ellipsis">{{ item.start }}</p>
+              <p class="ellipsis">{{ item.num }}</p>
+              <p class="ellipsis">{{ item.porosity }}</p>
+              <p class="ellipsis">{{ item.Soilbulk }}</p>
+              <p class="ellipsis">{{ item.time }}</p>
+            </div>
+            <div class="scrollCont flex" v-for="item in tableData" :key="item.id" v-if="activedname == '下垫面'">
+              <p class="ellipsis">{{ item.start }}</p>
+              <p class="ellipsis">{{ item.Ph }}</p>
+              <p class="ellipsis">{{ item.ss }}</p>
+              <p class="ellipsis">{{ item.COD }}</p>
+              <p class="ellipsis">{{ item.TN }}</p>
+
+              <p class="ellipsis">{{ item.TP }}</p>
+              <p class="ellipsis">{{ item.AN }}</p>
+              <p class="ellipsis">{{ item.time }}</p>
+            </div>
+            <div class="scrollCont flex" v-for="item in tableData" :key="item.id" v-if="activedname == '海绵设施'">
+              <p class="ellipsis">{{ item.start }}</p>
+              <p class="ellipsis">{{ item.Ph }}</p>
+              <p class="ellipsis">{{ item.ss }}</p>
+              <p class="ellipsis">{{ item.COD }}</p>
+              <p class="ellipsis">{{ item.TN }}</p>
+
+              <p class="ellipsis">{{ item.TP }}</p>
+              <p class="ellipsis">{{ item.AN }}</p>
+              <p class="ellipsis">{{ item.time }}</p>
+            </div>
+          </Vue3SeamlessScroll>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+const tableData = ref([
+  { start: '惠济河1号', num: '2', porosity: '1.3', Soilbulk: '12', time: '2024-04-10', id: 1 },
+  { start: '马家河2号', num: '2.4', porosity: '0.6', Soilbulk: '23', time: '2024-04-10', id: 1 },
+]);
+const activedname = ref('土壤');
+const CurrentIssuesrList = ref([
+  { name: '土壤', value: 1 },
+  { name: '下垫面', value: 2 },
+  { name: '海绵设施', value: 3 },
+]);
+
+// 点击事件
+function CurrentIssuesrclick(val) {
+  activedname.value = val.name;
+  if (activedname.value == '土壤') {
+    tableData.value = [
+      { start: '惠济河1号', num: '2', porosity: '1.3', Soilbulk: '12', time: '2024-04-10', id: 1 },
+      { start: '马家河2号', num: '2.4', porosity: '0.6', Soilbulk: '23', time: '2024-04-10', id: 1 },
+    ];
+  } else if (activedname.value == '下垫面') {
+    tableData.value = [
+      { start: '惠济河1号', Ph: '7.2', ss: '1.3', COD: '12', TN: '34', TP: '12', AN: '120', time: '2024-06-10', id: 1 },
+      { start: '马家河2号', Ph: '6.7', ss: '0.6', COD: '23', TN: '45', TP: '12', AN: '90', time: '2024-06-10', id: 1 },
+    ];
+  } else {
+    tableData.value = [
+      { start: '惠济河1号', Ph: '7.2', ss: '1.3', COD: '12', TN: '34', TP: '12', AN: '120', time: '2024-06-10', id: 1 },
+      { start: '马家河2号', Ph: '6.7', ss: '0.6', COD: '23', TN: '45', TP: '12', AN: '90', time: '2024-06-10', id: 1 },
+    ];
+  }
+}
+</script>
 
 <style lang="scss" scoped>
 .longYW {
@@ -13,7 +125,64 @@
   width: 100%;
   height: 31%;
   background: #07347f;
-}
-.ConstrucClass {
+  .ConstrucClass {
+    height: 90%;
+    opacity: 0.8;
+    // background: red;
+    .HeadContent {
+      width: 100%;
+      height: 30px;
+      // background: #2270ff;
+      align-items: center;
+      line-height: 25px;
+      margin-top: 5px;
+
+      .head-center {
+        height: 30px;
+        cursor: pointer;
+        font-size: 14px;
+        display: flex;
+        overflow: hidden;
+        overflow-x: auto;
+        color: #ffffff;
+        .head-item {
+          margin-left: 10px;
+          padding: 2px 3px;
+          border: 1px solid #0dc9ff;
+          background: #013a73;
+          height: 30px;
+          text-align: center;
+          min-width: 100px;
+          border: 1px solid #2270ff;
+        }
+        .activedright {
+          border: 1px solid #2cfce9;
+          color: #0dc9ff;
+          background: #166f84;
+        }
+      }
+    }
+    .box-body {
+      height: 88%;
+      // background: yellowgreen;
+      padding: 10px;
+      .scrollMapHM {
+        height: 100%;
+        p {
+          width: 18%;
+          // background: red;
+        }
+        .reports {
+          color: #3afff8;
+        }
+        .scroll {
+          width: 100%;
+          height: calc(100% - 30%);
+          overflow: hidden;
+          display: inline-block;
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/src/views/sponeScreen/longYW/MonitoringStation.vue b/src/views/sponeScreen/longYW/MonitoringStation.vue
index 3017c97..cb76a21 100644
--- a/src/views/sponeScreen/longYW/MonitoringStation.vue
+++ b/src/views/sponeScreen/longYW/MonitoringStation.vue
@@ -1,11 +1,71 @@
 <template>
   <div class="longYW">
     <div class="partTitleHM">监测站点统计</div>
-    <div class="ConstrucClass">监测站点统计</div>
+    <div class="ConstrucClass">
+      <div class="HeadContent">
+        <div class="one">
+          <div class="iconTwo bgcBlue"></div>
+          <span>总计</span>
+          <span class="bgcBlue">86</span>
+          个
+        </div>
+        <div class="two">
+          <div class="iconTwo bgcgreen"></div>
+          <span>在线</span>
+          <span class="bgcgreen">80</span>
+          个
+        </div>
+        <div class="three">
+          <div class="iconTwo bgcRed"></div>
+          <span>离线</span>
+          <span class="bgcRed">5</span>
+          个
+        </div>
+        <div class="four">
+          <div class="iconTwo bgcYellow"></div>
+          <span>故障</span>
+          <span class="bgcYellow">1</span>
+          个
+        </div>
+      </div>
+      <div class="box-body">
+        <div class="scrollMapHM">
+          <div class="scrollTitle flex">
+            <p>站点名称</p>
+            <p>监测类型</p>
+            <p>通讯时间</p>
+            <p>状态</p>
+          </div>
+
+          <Vue3SeamlessScroll :list="tableData" :singleHeight="50" :singleWaitTime="1500" :hover="true" class="scroll">
+            <div class="scrollCont flex" v-for="item in tableData" :key="item.id">
+              <p class="ellipsis">{{ item.start }}</p>
+              <p class="ellipsis">{{ item.num }}</p>
+              <p class="ellipsis">{{ item.time }}</p>
+              <p class="ellipsis reports" @click="checkReport(item)">{{ item.zt }}</p>
+            </div>
+          </Vue3SeamlessScroll>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+
+const tableData = ref([
+  { start: '汴京路雨量站', num: '雨量站', time: '06-07  16:00', zt: '在线', id: 1 },
+  { start: '汴京路雨量站', num: '雨量站', time: '06-07  16:00', zt: '在线', id: 1 },
+  { start: '汴京路雨量站', num: '雨量站', time: '06-07  16:00', zt: '在线', id: 1 },
+  { start: '汴京路雨量站', num: '雨量站', time: '06-07  16:00', zt: '在线', id: 1 },
+  { start: '汴京路雨量站', num: '雨量站', time: '06-07  16:00', zt: '在线', id: 1 },
+  { start: '汴京路雨量站', num: '雨量站', time: '06-07  16:00', zt: '在线', id: 1 },
+  { start: '汴京路雨量站', num: '雨量站', time: '06-07  16:00', zt: '在线', id: 1 },
+  { start: '汴京路雨量站', num: '雨量站', time: '06-07  16:00', zt: '离线', id: 1 },
+  { start: '汴京路雨量站', num: '雨量站', time: '06-07  16:00', zt: '故障', id: 1 },
+]);
+</script>
 
 <style lang="scss" scoped>
 .longYW {
@@ -15,5 +75,79 @@
   background: #07347f;
 }
 .ConstrucClass {
+  height: 83%;
+  opacity: 0.8;
+  // background: red;
+  .HeadContent {
+    width: 100%;
+    height: 23%;
+    // background: #2270ff;
+    align-items: center;
+    line-height: 25px;
+    margin-top: 2px;
+    display: flex;
+    .one,
+    .two,
+    .three,
+    .four {
+      width: 24.5%;
+      height: 100%;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      font-size: 15px;
+      font-family: SourceHanSansCN-Regular;
+      font-weight: 600;
+      // background: red;
+    }
+  }
+  .box-body {
+    height: 80%;
+    // background: yellowgreen;
+    padding: 10px;
+    .scrollMapHM {
+      height: 100%;
+      p {
+        width: 18%;
+        // background: red;
+      }
+      .reports {
+        color: #3afff8;
+      }
+      .scroll {
+        width: 100%;
+        height: calc(100% - 30%);
+        overflow: hidden;
+        display: inline-block;
+      }
+    }
+  }
+}
+.iconTwo {
+  display: inline-block;
+  // border-color: #18e87a;
+  border-style: solid;
+  border-width: 2px;
+  width: 0;
+  height: 0;
+  position: relative;
+  top: -2px;
+  -moz-transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  transform: rotate(45deg);
+  margin-left: 15px;
+}
+.bgcBlue {
+  color: #619bff;
+}
+.bgcgreen {
+  color: #2ceea7;
+}
+.bgcRed {
+  color: #fa5959;
+}
+.bgcYellow {
+  color: #ffcf2a;
 }
 </style>
diff --git a/src/views/sponeScreen/longYW/PromotionTraining.vue b/src/views/sponeScreen/longYW/PromotionTraining.vue
index 9c3e21a..2a36bc5 100644
--- a/src/views/sponeScreen/longYW/PromotionTraining.vue
+++ b/src/views/sponeScreen/longYW/PromotionTraining.vue
@@ -2,23 +2,44 @@
   <div class="longYW">
     <div class="partTitleHM">宣传培训</div>
     <div class="ConstrucClass">
-      <div class="PublicityContent">
-        <div class="PublicityContentZP">照片</div>
+      <!-- <Vue3SeamlessScroll :list="tableData" :singleHeight="110" :singleWaitTime="1500" :hover="true" class="scroll"> -->
+      <div class="PublicityContent" v-for="item in tableData" @click="zpClck(item)">
+        <div class="PublicityContentZP">
+          <div class="zp"></div>
+        </div>
         <div class="PublicityContentlR">
           <div class="PublicityContentXM">
-            <span>开封市打造出一批海绵城市示范项目</span>
+            <span>{{ item.name }}</span>
           </div>
           <div class="PublicityContentTime">
             <span>发布时间</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-            <span>2024-06-22 15:16:18</span>
+            <span>{{ item.time }}</span>
           </div>
         </div>
       </div>
+      <!-- </Vue3SeamlessScroll> -->
     </div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+
+const tableData = ref([
+  { name: '海绵城市建设服务中心开展活动', time: '2023-02-22 09:18:31', lj: 'https://www.kf.cn/c/2023-02-22/785725.shtml' },
+  { name: '开封市海绵城市建设管理条例宣传进社区', time: '2023-09-21 17:25:23', lj: 'https://www.kf.cn/c/2023-09-21/851453.shtml' },
+  {
+    name: '开封市海绵城市建设管理条例宣传活动启动仪式举行',
+    time: '2023-08-15 19:56:41',
+    lj: 'https://www.kf.cn/c/2023-08-15/846349.shtml',
+  },
+]);
+
+// 照片点击
+function zpClck(val) {
+  window.open(val.lj);
+}
+</script>
 
 <style lang="scss" scoped>
 .longYW {
@@ -28,26 +49,43 @@
   background: #07347f;
   .ConstrucClass {
     height: calc(100% - 18%);
+    overflow: hidden;
+    overflow-y: auto;
     // background: red;
+    .scroll {
+      margin-top: 5px;
+      width: 100%;
+      height: calc(100% - 10%);
+      overflow: hidden;
+      display: inline-block;
+    }
   }
   .PublicityContent {
     margin: auto;
     width: 95%;
     height: 90px;
     background: #123f86;
-
     position: relative;
     top: 5px;
     display: flex;
-    // margin-top: 10px;
     .PublicityContentZP {
       width: 20%;
       height: 90px;
-      background: yellow;
+      // background: yellow;
+      .zp {
+        width: 80px;
+        height: 80px;
+        margin: auto;
+        margin-top: 5px;
+        background: url('@/assets/newImgs/HMScreen/20240624154343.png') no-repeat;
+        background-size: 100% 100%;
+      }
     }
     .PublicityContentlR {
       width: 80%;
       height: 90px;
+      margin-left: 5px;
+      cursor: pointer;
       // background: blueviolet;
       .PublicityContentXM {
         width: 100%;
@@ -55,10 +93,13 @@
         // background: blue;
         display: flex;
         align-items: center;
-        // justify-content: center;
         span {
+          height: 60%;
           font-size: 16px;
           color: #e4f5ff;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
         }
       }
       .PublicityContentTime {
diff --git a/src/views/sponeScreen/longYW/SewageBOD.vue b/src/views/sponeScreen/longYW/SewageBOD.vue
index 8813666..c3d0cb0 100644
--- a/src/views/sponeScreen/longYW/SewageBOD.vue
+++ b/src/views/sponeScreen/longYW/SewageBOD.vue
@@ -4,7 +4,7 @@
       污水厂进口BOD
       <div class="head-right" style="">
         <el-form-item prop="date" style="width: 55%">
-          <el-select v-model="riverIndex"> </el-select>
+          <el-select v-model="riverIndex" size="small"> </el-select>
         </el-form-item>
         <el-form-item style="width: 41%; margin-left: 10px">
           <el-date-picker
@@ -13,6 +13,7 @@
             value-format="YYYY"
             placeholder="请选择年"
             style="width: 100%"
+            size="small"
           ></el-date-picker>
         </el-form-item>
       </div>
@@ -49,7 +50,7 @@
     cursor: pointer;
     position: relative;
     left: 180px;
-    top: -36px;
+    top: -33px;
     width: 210px;
     height: 32px;
     display: flex;