diff --git a/src/assets/newImgs/ps.png b/src/assets/newImgs/ps.png
new file mode 100644
index 0000000..408bf43
--- /dev/null
+++ b/src/assets/newImgs/ps.png
Binary files differ

diff --git a/src/assets/newImgs/ps.png b/src/assets/newImgs/ps.png
new file mode 100644
index 0000000..408bf43
--- /dev/null
+++ b/src/assets/newImgs/ps.png
Binary files differ
diff --git a/src/assets/newImgs/ql.png b/src/assets/newImgs/ql.png
new file mode 100644
index 0000000..de05837
--- /dev/null
+++ b/src/assets/newImgs/ql.png
Binary files differ

diff --git a/src/assets/newImgs/ps.png b/src/assets/newImgs/ps.png
new file mode 100644
index 0000000..408bf43
--- /dev/null
+++ b/src/assets/newImgs/ps.png
Binary files differ
diff --git a/src/assets/newImgs/ql.png b/src/assets/newImgs/ql.png
new file mode 100644
index 0000000..de05837
--- /dev/null
+++ b/src/assets/newImgs/ql.png
Binary files differ
diff --git a/src/assets/newImgs/rq.png b/src/assets/newImgs/rq.png
new file mode 100644
index 0000000..0877055
--- /dev/null
+++ b/src/assets/newImgs/rq.png
Binary files differ

diff --git a/src/assets/newImgs/ps.png b/src/assets/newImgs/ps.png
new file mode 100644
index 0000000..408bf43
--- /dev/null
+++ b/src/assets/newImgs/ps.png
Binary files differ
diff --git a/src/assets/newImgs/ql.png b/src/assets/newImgs/ql.png
new file mode 100644
index 0000000..de05837
--- /dev/null
+++ b/src/assets/newImgs/ql.png
Binary files differ
diff --git a/src/assets/newImgs/rq.png b/src/assets/newImgs/rq.png
new file mode 100644
index 0000000..0877055
--- /dev/null
+++ b/src/assets/newImgs/rq.png
Binary files differ
diff --git a/src/assets/newImgs/sd.png b/src/assets/newImgs/sd.png
new file mode 100644
index 0000000..be77643
--- /dev/null
+++ b/src/assets/newImgs/sd.png
Binary files differ

diff --git a/src/assets/newImgs/ps.png b/src/assets/newImgs/ps.png
new file mode 100644
index 0000000..408bf43
--- /dev/null
+++ b/src/assets/newImgs/ps.png
Binary files differ
diff --git a/src/assets/newImgs/ql.png b/src/assets/newImgs/ql.png
new file mode 100644
index 0000000..de05837
--- /dev/null
+++ b/src/assets/newImgs/ql.png
Binary files differ
diff --git a/src/assets/newImgs/rq.png b/src/assets/newImgs/rq.png
new file mode 100644
index 0000000..0877055
--- /dev/null
+++ b/src/assets/newImgs/rq.png
Binary files differ
diff --git a/src/assets/newImgs/sd.png b/src/assets/newImgs/sd.png
new file mode 100644
index 0000000..be77643
--- /dev/null
+++ b/src/assets/newImgs/sd.png
Binary files differ
diff --git a/src/assets/newImgs/yxjcE.png b/src/assets/newImgs/yxjcE.png
new file mode 100644
index 0000000..ec62b9d
--- /dev/null
+++ b/src/assets/newImgs/yxjcE.png
Binary files differ

diff --git a/src/assets/newImgs/ps.png b/src/assets/newImgs/ps.png
new file mode 100644
index 0000000..408bf43
--- /dev/null
+++ b/src/assets/newImgs/ps.png
Binary files differ
diff --git a/src/assets/newImgs/ql.png b/src/assets/newImgs/ql.png
new file mode 100644
index 0000000..de05837
--- /dev/null
+++ b/src/assets/newImgs/ql.png
Binary files differ
diff --git a/src/assets/newImgs/rq.png b/src/assets/newImgs/rq.png
new file mode 100644
index 0000000..0877055
--- /dev/null
+++ b/src/assets/newImgs/rq.png
Binary files differ
diff --git a/src/assets/newImgs/sd.png b/src/assets/newImgs/sd.png
new file mode 100644
index 0000000..be77643
--- /dev/null
+++ b/src/assets/newImgs/sd.png
Binary files differ
diff --git a/src/assets/newImgs/yxjcE.png b/src/assets/newImgs/yxjcE.png
new file mode 100644
index 0000000..ec62b9d
--- /dev/null
+++ b/src/assets/newImgs/yxjcE.png
Binary files differ
diff --git a/src/views/oneMap/OverallOverview/LeftBox.vue b/src/views/oneMap/OverallOverview/LeftBox.vue
new file mode 100644
index 0000000..5bf9e9d
--- /dev/null
+++ b/src/views/oneMap/OverallOverview/LeftBox.vue
@@ -0,0 +1,471 @@
+<template>
+  <!-- 基础设施 -->
+  <div class="infrastructure">
+    <div class="ListBoxHeader">
+      <div class="ListBoxHeader_font">基础设施</div>
+    </div>
+    <div class="jcssTop">
+      <div class="subRightBox">
+        <div
+          class="headcenter"
+          v-for="(item, index) in categoryList"
+          :key="item"
+          :class="activedname == item.name ? 'activedright' : ''"
+          @click="categoryclick(item, index)"
+        >
+          {{ item.name }}
+        </div>
+      </div>
+      <div class="jcssBox flex">
+        <div class="jcssTp">
+          <img :src="riskData[0].Imgurl" alt="" class="NewImg" />
+        </div>
+        <div class="jcssContent">
+          <div class="jcssContent_z">
+            <div class="ListContent flex flex-align-center">
+              <div class="icon"></div>
+              <div class="gw">{{ riskData[0].name1 }}</div>
+              <div class="NumClass">{{ riskData[0].num1 }}</div>
+              <div class="gl">{{ riskData[0].dw1 }}</div>
+            </div>
+            <div class="ListContent flex flex-align-center">
+              <div class="icon"></div>
+              <div class="gw">{{ riskData[0].name2 }}</div>
+              <div class="NumClass">{{ riskData[0].num2 }}</div>
+              <div class="gl">{{ riskData[0].dw2 }}</div>
+            </div>
+            <div class="ListContent flex flex-align-center">
+              <div class="icon"></div>
+              <div class="gw">{{ riskData[0].name3 }}</div>
+              <div class="NumClass">{{ riskData[0].num3 }}</div>
+              <div class="gl">{{ riskData[0].dw3 }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- 运行监测 -->
+  <div class="Operationmonitoring">
+    <div class="ListBoxHeader">
+      <div class="ListBoxHeader_font">运行监测</div>
+    </div>
+    <div class="yxjcTop">
+      <div class="topVehicl flex">
+        <div class="icon"></div>
+        <div class="text">车辆调度</div>
+
+        <div class="yxjcList">
+          <div class="head-right" style="">
+            <div
+              class="head-item"
+              v-for="(item, index) in yearList"
+              :key="item"
+              :class="yxjcname == item.name ? 'activedright' : ''"
+              @click="yearclick(item, index)"
+            >
+              {{ item.name }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="yxjcEcharts"></div>
+    </div>
+  </div>
+  <!-- 实时监测 -->
+  <div class="Realtime">
+    <div class="ListBoxHeader">
+      <div class="ListBoxHeader_font">实时监测</div>
+    </div>
+    <Vue3SeamlessScroll :list="FXJCData" :singleHeight="60" :singleWaitTime="1500" :hover="true" class="tableBody">
+      <div class="tableBodyList" v-for="item in FXJCData">
+        <span class="tableBodyList_span1">{{ item.num }}</span>
+        <span class="tableBodyList_span2">{{ item.sz }} </span>
+        <span class="tableBodyList_span3">{{ item.bm }}</span>
+        <span class="tableBodyList_span4">{{ item.zb }} </span>
+        <span class="tableBodyList_span5">
+          <el-tag type="danger" v-if="item.zk == '异常'">异 常</el-tag>
+          <el-tag type="success" v-if="item.zk == '正常'">正 常</el-tag>
+        </span>
+      </div>
+    </Vue3SeamlessScroll>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+import ranqi_icon from '@/assets/newImgs/rq.png'; //燃气
+import qiaoliang from '@/assets/newImgs/ql.png'; //桥梁
+import sd_icon from '@/assets/newImgs/sd.png'; //隧道
+import ps_icon from '@/assets/newImgs/ps.png'; //排水
+const categoryList = ref([
+  { name: '燃气', value: 1 },
+  { name: '排水', value: 2 },
+  { name: '桥梁', value: 3 },
+  { name: '隧道', value: 4 },
+]);
+const yearList = ref([
+  { name: '7天', value: 1 },
+  { name: '15天', value: 2 },
+  { name: '30天', value: 3 },
+]);
+const FXJCData = ref([
+  {
+    num: '01',
+    zb: '永安路',
+    sz: '排水',
+    bm: 'BM234454',
+    zk: '异常',
+  },
+  { num: '01', zb: '管网病管', sz: '排水', bm: 'BM234454', zk: '正常' },
+  { num: '03', zb: '结构', sz: '隧道', bm: 'BM234454', zk: '正常' },
+  { num: '04', zb: '老化', sz: '桥梁', bm: 'BM234454', zk: '正常' },
+  { num: '05', zb: '管网病管', sz: '排水', bm: 'BM234454', zk: '异常' },
+  { num: '06', zb: '管线是否泄露', sz: '排水', bm: 'BM234454', zk: '正常' },
+]);
+const yxjcname = ref('7天');
+function yearclick(val) {
+  yxjcname.value = val.name;
+}
+const riskData = ref([
+  {
+    name1: '管网',
+    name2: '传感器',
+    name3: '窨井',
+    num1: '234',
+    num2: '12',
+    num3: '12',
+    Imgurl: ranqi_icon,
+    dw1: '公里',
+    dw2: '套',
+    dw3: '口',
+  },
+]);
+
+const activedname = ref('燃气');
+// 点击事件
+function categoryclick(val) {
+  console.log(val.name, '1');
+  activedname.value = val.name;
+  if (activedname.value == '燃气') {
+    riskData.value = [
+      {
+        name1: '管网',
+        name2: '传感器',
+        name3: '窨井',
+        num1: '234',
+        num2: '12',
+        num3: '12',
+        Imgurl: ranqi_icon,
+        dw1: '公里',
+        dw2: '套',
+        dw3: '口',
+      },
+    ];
+  } else if (activedname.value == '排水') {
+    riskData.value = [
+      {
+        name1: '管网',
+        name2: '检查口',
+        name3: '感知设备',
+        num1: '234',
+        num2: '234',
+        num3: '18',
+        Imgurl: ps_icon,
+        dw1: '公里',
+        dw2: '处',
+        dw3: '套',
+      },
+    ];
+  } else if (activedname.value == '桥梁') {
+    riskData.value = [
+      {
+        name1: '数量',
+        name2: '长度',
+        name3: '感知设备',
+        num1: '1',
+        num2: '204',
+        num3: '92',
+        Imgurl: qiaoliang,
+        dw1: '座',
+        dw2: '米',
+        dw3: '套',
+      },
+    ];
+  } else {
+    riskData.value = [
+      {
+        name1: '数量',
+        name2: '长度',
+        name3: '感知设备',
+        num1: '1',
+        num2: '750',
+        num3: '111',
+        Imgurl: sd_icon,
+        dw1: '座',
+        dw2: '米',
+        dw3: '套',
+      },
+    ];
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.infrastructure {
+  width: 450px;
+  height: 28%;
+  // background: red;
+  .jcssTop {
+    width: 450px;
+    height: calc(100% - 55px);
+    margin: 8px auto;
+    .subRightBox {
+      width: 450px;
+      margin: 0 auto;
+      height: 35px;
+      display: flex;
+      cursor: pointer;
+      font-size: 14px;
+      color: #ffffff;
+      .headcenter {
+        width: 100px;
+        height: 26px;
+        padding: 2px 3px;
+        background: #00344f;
+        text-align: center;
+        margin-top: 5px;
+        margin-left: 10px;
+      }
+      .activedright {
+        border: 1px solid #2cfce9;
+        color: #e4f5ff;
+        background: #166f84;
+      }
+    }
+    .jcssBox {
+      margin-top: 2px;
+      width: 450px;
+      height: calc(100% - 40px);
+      // background: blanchedalmond;
+      .jcssTp {
+        width: 43%;
+        height: 100%;
+        .NewImg {
+          position: relative;
+          top: 13%;
+          left: 25%;
+          width: 88px;
+          height: 111px;
+        }
+      }
+      .jcssContent {
+        width: 52%;
+        height: 100%;
+        // background: yellowgreen;
+        .jcssContent_z {
+          position: relative;
+          top: 20%;
+          width: 100%;
+          height: 100px;
+          // background: red;
+          .ListContent {
+            height: 30px;
+            margin-top: 5px;
+            // background: yellow;
+            .icon {
+              width: 25px;
+              height: 25px;
+              background: url('@/assets/newImgs/xtb_img.png') no-repeat;
+            }
+            .gw {
+              font-family: Source Han Sans CN;
+              font-weight: bold;
+              font-size: 14px;
+              color: #85d2d4;
+              padding-left: 5px;
+              // background: yellow;
+              width: 70px;
+            }
+            .NumClass {
+              width: 70px;
+              text-align: right;
+              font-family: Source Han Sans CN;
+              font-weight: bold;
+              font-size: 26px;
+              color: #12f9ff;
+              padding-left: 20px;
+            }
+            .gl {
+              font-family: Source Han Sans CN;
+              font-weight: bold;
+              font-size: 14px;
+              color: #34909f;
+              padding-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.Operationmonitoring {
+  // background: blue;
+  width: 450px;
+  height: 33%;
+  .yxjcTop {
+    width: 450px;
+    height: calc(100% - 60px);
+    margin: 10px auto;
+    // background: red;
+    .topVehicl {
+      height: 26px;
+      .icon {
+        position: relative;
+        left: 10px;
+        width: 25px;
+        height: 25px;
+        background: url('@/assets/newImgs/xtb_img.png') no-repeat;
+      }
+      .text {
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 14px;
+        color: #ebfeff;
+        line-height: 25px;
+        position: relative;
+        left: 12px;
+        box-shadow: inset 0px -7px 10px -5px #47eef38a;
+      }
+      .yxjcList {
+        position: relative;
+        left: 150px;
+        display: flex;
+        width: 46%;
+        // background: rgb(92, 122, 96);
+        .head-right {
+          margin-top: 2px;
+          cursor: pointer;
+          font-size: 14px;
+          color: #ffffff;
+          display: flex;
+          line-height: 18px;
+          .head-item {
+            width: 60px;
+            margin-right: 10px;
+            padding: 2px 3px;
+            background: #00344f;
+            height: 23px;
+            text-align: center;
+          }
+          .activedright {
+            border: 1px solid #2cfce9;
+            color: #e4f5ff;
+            background: #166f84;
+          }
+        }
+      }
+    }
+    .yxjcEcharts {
+      margin: 10px auto;
+      width: 430px;
+      height: calc(100% - 40px);
+      background: url('@/assets/newImgs/yxjcE.png') no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+}
+.Realtime {
+  width: 450px;
+  height: 35%;
+  .tableBody {
+    width: 432px;
+    height: calc(100% - 50px);
+    overflow: hidden;
+    margin: 0 auto;
+    .tableBodyList {
+      height: 60px;
+      line-height: 60px;
+      width: 100%;
+      display: flex;
+      /* 选择偶数行 */
+      &:nth-child(even) {
+        background: linear-gradient(0deg, #008599 0%, #08596d 100%);
+      }
+
+      .tableBodyList_span1 {
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 16px;
+        color: #00f2ff;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+        width: 10%;
+        // background: #217e8cff;
+      }
+      .tableBodyList_span2 {
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        font-size: 14px;
+        color: #ffffff;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+        width: 10%;
+      }
+      .tableBodyList_span3 {
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        font-size: 14px;
+        color: #ffffff;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+        width: 25%;
+      }
+
+      .tableBodyList_span4 {
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        font-size: 14px;
+        color: #ffffff;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+        width: 35%;
+      }
+
+      .tableBodyList_span5 {
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        font-size: 14px;
+        color: #ffffff;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+        width: 20%;
+      }
+    }
+  }
+}
+.ListBoxHeader {
+  height: 44px;
+  line-height: 50px;
+  width: 98%;
+  background: url('@/assets/newImgs/partBg.png') no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 7px 0px 0px 8px;
+  .ListBoxHeader_font {
+    font-family: PangMenZhengDao;
+    font-weight: 400;
+    font-size: 23px;
+    color: #ebfeff;
+    padding-left: 34px;
+  }
+}
+</style>

diff --git a/src/assets/newImgs/ps.png b/src/assets/newImgs/ps.png
new file mode 100644
index 0000000..408bf43
--- /dev/null
+++ b/src/assets/newImgs/ps.png
Binary files differ
diff --git a/src/assets/newImgs/ql.png b/src/assets/newImgs/ql.png
new file mode 100644
index 0000000..de05837
--- /dev/null
+++ b/src/assets/newImgs/ql.png
Binary files differ
diff --git a/src/assets/newImgs/rq.png b/src/assets/newImgs/rq.png
new file mode 100644
index 0000000..0877055
--- /dev/null
+++ b/src/assets/newImgs/rq.png
Binary files differ
diff --git a/src/assets/newImgs/sd.png b/src/assets/newImgs/sd.png
new file mode 100644
index 0000000..be77643
--- /dev/null
+++ b/src/assets/newImgs/sd.png
Binary files differ
diff --git a/src/assets/newImgs/yxjcE.png b/src/assets/newImgs/yxjcE.png
new file mode 100644
index 0000000..ec62b9d
--- /dev/null
+++ b/src/assets/newImgs/yxjcE.png
Binary files differ
diff --git a/src/views/oneMap/OverallOverview/LeftBox.vue b/src/views/oneMap/OverallOverview/LeftBox.vue
new file mode 100644
index 0000000..5bf9e9d
--- /dev/null
+++ b/src/views/oneMap/OverallOverview/LeftBox.vue
@@ -0,0 +1,471 @@
+<template>
+  <!-- 基础设施 -->
+  <div class="infrastructure">
+    <div class="ListBoxHeader">
+      <div class="ListBoxHeader_font">基础设施</div>
+    </div>
+    <div class="jcssTop">
+      <div class="subRightBox">
+        <div
+          class="headcenter"
+          v-for="(item, index) in categoryList"
+          :key="item"
+          :class="activedname == item.name ? 'activedright' : ''"
+          @click="categoryclick(item, index)"
+        >
+          {{ item.name }}
+        </div>
+      </div>
+      <div class="jcssBox flex">
+        <div class="jcssTp">
+          <img :src="riskData[0].Imgurl" alt="" class="NewImg" />
+        </div>
+        <div class="jcssContent">
+          <div class="jcssContent_z">
+            <div class="ListContent flex flex-align-center">
+              <div class="icon"></div>
+              <div class="gw">{{ riskData[0].name1 }}</div>
+              <div class="NumClass">{{ riskData[0].num1 }}</div>
+              <div class="gl">{{ riskData[0].dw1 }}</div>
+            </div>
+            <div class="ListContent flex flex-align-center">
+              <div class="icon"></div>
+              <div class="gw">{{ riskData[0].name2 }}</div>
+              <div class="NumClass">{{ riskData[0].num2 }}</div>
+              <div class="gl">{{ riskData[0].dw2 }}</div>
+            </div>
+            <div class="ListContent flex flex-align-center">
+              <div class="icon"></div>
+              <div class="gw">{{ riskData[0].name3 }}</div>
+              <div class="NumClass">{{ riskData[0].num3 }}</div>
+              <div class="gl">{{ riskData[0].dw3 }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- 运行监测 -->
+  <div class="Operationmonitoring">
+    <div class="ListBoxHeader">
+      <div class="ListBoxHeader_font">运行监测</div>
+    </div>
+    <div class="yxjcTop">
+      <div class="topVehicl flex">
+        <div class="icon"></div>
+        <div class="text">车辆调度</div>
+
+        <div class="yxjcList">
+          <div class="head-right" style="">
+            <div
+              class="head-item"
+              v-for="(item, index) in yearList"
+              :key="item"
+              :class="yxjcname == item.name ? 'activedright' : ''"
+              @click="yearclick(item, index)"
+            >
+              {{ item.name }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="yxjcEcharts"></div>
+    </div>
+  </div>
+  <!-- 实时监测 -->
+  <div class="Realtime">
+    <div class="ListBoxHeader">
+      <div class="ListBoxHeader_font">实时监测</div>
+    </div>
+    <Vue3SeamlessScroll :list="FXJCData" :singleHeight="60" :singleWaitTime="1500" :hover="true" class="tableBody">
+      <div class="tableBodyList" v-for="item in FXJCData">
+        <span class="tableBodyList_span1">{{ item.num }}</span>
+        <span class="tableBodyList_span2">{{ item.sz }} </span>
+        <span class="tableBodyList_span3">{{ item.bm }}</span>
+        <span class="tableBodyList_span4">{{ item.zb }} </span>
+        <span class="tableBodyList_span5">
+          <el-tag type="danger" v-if="item.zk == '异常'">异 常</el-tag>
+          <el-tag type="success" v-if="item.zk == '正常'">正 常</el-tag>
+        </span>
+      </div>
+    </Vue3SeamlessScroll>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+import ranqi_icon from '@/assets/newImgs/rq.png'; //燃气
+import qiaoliang from '@/assets/newImgs/ql.png'; //桥梁
+import sd_icon from '@/assets/newImgs/sd.png'; //隧道
+import ps_icon from '@/assets/newImgs/ps.png'; //排水
+const categoryList = ref([
+  { name: '燃气', value: 1 },
+  { name: '排水', value: 2 },
+  { name: '桥梁', value: 3 },
+  { name: '隧道', value: 4 },
+]);
+const yearList = ref([
+  { name: '7天', value: 1 },
+  { name: '15天', value: 2 },
+  { name: '30天', value: 3 },
+]);
+const FXJCData = ref([
+  {
+    num: '01',
+    zb: '永安路',
+    sz: '排水',
+    bm: 'BM234454',
+    zk: '异常',
+  },
+  { num: '01', zb: '管网病管', sz: '排水', bm: 'BM234454', zk: '正常' },
+  { num: '03', zb: '结构', sz: '隧道', bm: 'BM234454', zk: '正常' },
+  { num: '04', zb: '老化', sz: '桥梁', bm: 'BM234454', zk: '正常' },
+  { num: '05', zb: '管网病管', sz: '排水', bm: 'BM234454', zk: '异常' },
+  { num: '06', zb: '管线是否泄露', sz: '排水', bm: 'BM234454', zk: '正常' },
+]);
+const yxjcname = ref('7天');
+function yearclick(val) {
+  yxjcname.value = val.name;
+}
+const riskData = ref([
+  {
+    name1: '管网',
+    name2: '传感器',
+    name3: '窨井',
+    num1: '234',
+    num2: '12',
+    num3: '12',
+    Imgurl: ranqi_icon,
+    dw1: '公里',
+    dw2: '套',
+    dw3: '口',
+  },
+]);
+
+const activedname = ref('燃气');
+// 点击事件
+function categoryclick(val) {
+  console.log(val.name, '1');
+  activedname.value = val.name;
+  if (activedname.value == '燃气') {
+    riskData.value = [
+      {
+        name1: '管网',
+        name2: '传感器',
+        name3: '窨井',
+        num1: '234',
+        num2: '12',
+        num3: '12',
+        Imgurl: ranqi_icon,
+        dw1: '公里',
+        dw2: '套',
+        dw3: '口',
+      },
+    ];
+  } else if (activedname.value == '排水') {
+    riskData.value = [
+      {
+        name1: '管网',
+        name2: '检查口',
+        name3: '感知设备',
+        num1: '234',
+        num2: '234',
+        num3: '18',
+        Imgurl: ps_icon,
+        dw1: '公里',
+        dw2: '处',
+        dw3: '套',
+      },
+    ];
+  } else if (activedname.value == '桥梁') {
+    riskData.value = [
+      {
+        name1: '数量',
+        name2: '长度',
+        name3: '感知设备',
+        num1: '1',
+        num2: '204',
+        num3: '92',
+        Imgurl: qiaoliang,
+        dw1: '座',
+        dw2: '米',
+        dw3: '套',
+      },
+    ];
+  } else {
+    riskData.value = [
+      {
+        name1: '数量',
+        name2: '长度',
+        name3: '感知设备',
+        num1: '1',
+        num2: '750',
+        num3: '111',
+        Imgurl: sd_icon,
+        dw1: '座',
+        dw2: '米',
+        dw3: '套',
+      },
+    ];
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.infrastructure {
+  width: 450px;
+  height: 28%;
+  // background: red;
+  .jcssTop {
+    width: 450px;
+    height: calc(100% - 55px);
+    margin: 8px auto;
+    .subRightBox {
+      width: 450px;
+      margin: 0 auto;
+      height: 35px;
+      display: flex;
+      cursor: pointer;
+      font-size: 14px;
+      color: #ffffff;
+      .headcenter {
+        width: 100px;
+        height: 26px;
+        padding: 2px 3px;
+        background: #00344f;
+        text-align: center;
+        margin-top: 5px;
+        margin-left: 10px;
+      }
+      .activedright {
+        border: 1px solid #2cfce9;
+        color: #e4f5ff;
+        background: #166f84;
+      }
+    }
+    .jcssBox {
+      margin-top: 2px;
+      width: 450px;
+      height: calc(100% - 40px);
+      // background: blanchedalmond;
+      .jcssTp {
+        width: 43%;
+        height: 100%;
+        .NewImg {
+          position: relative;
+          top: 13%;
+          left: 25%;
+          width: 88px;
+          height: 111px;
+        }
+      }
+      .jcssContent {
+        width: 52%;
+        height: 100%;
+        // background: yellowgreen;
+        .jcssContent_z {
+          position: relative;
+          top: 20%;
+          width: 100%;
+          height: 100px;
+          // background: red;
+          .ListContent {
+            height: 30px;
+            margin-top: 5px;
+            // background: yellow;
+            .icon {
+              width: 25px;
+              height: 25px;
+              background: url('@/assets/newImgs/xtb_img.png') no-repeat;
+            }
+            .gw {
+              font-family: Source Han Sans CN;
+              font-weight: bold;
+              font-size: 14px;
+              color: #85d2d4;
+              padding-left: 5px;
+              // background: yellow;
+              width: 70px;
+            }
+            .NumClass {
+              width: 70px;
+              text-align: right;
+              font-family: Source Han Sans CN;
+              font-weight: bold;
+              font-size: 26px;
+              color: #12f9ff;
+              padding-left: 20px;
+            }
+            .gl {
+              font-family: Source Han Sans CN;
+              font-weight: bold;
+              font-size: 14px;
+              color: #34909f;
+              padding-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.Operationmonitoring {
+  // background: blue;
+  width: 450px;
+  height: 33%;
+  .yxjcTop {
+    width: 450px;
+    height: calc(100% - 60px);
+    margin: 10px auto;
+    // background: red;
+    .topVehicl {
+      height: 26px;
+      .icon {
+        position: relative;
+        left: 10px;
+        width: 25px;
+        height: 25px;
+        background: url('@/assets/newImgs/xtb_img.png') no-repeat;
+      }
+      .text {
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 14px;
+        color: #ebfeff;
+        line-height: 25px;
+        position: relative;
+        left: 12px;
+        box-shadow: inset 0px -7px 10px -5px #47eef38a;
+      }
+      .yxjcList {
+        position: relative;
+        left: 150px;
+        display: flex;
+        width: 46%;
+        // background: rgb(92, 122, 96);
+        .head-right {
+          margin-top: 2px;
+          cursor: pointer;
+          font-size: 14px;
+          color: #ffffff;
+          display: flex;
+          line-height: 18px;
+          .head-item {
+            width: 60px;
+            margin-right: 10px;
+            padding: 2px 3px;
+            background: #00344f;
+            height: 23px;
+            text-align: center;
+          }
+          .activedright {
+            border: 1px solid #2cfce9;
+            color: #e4f5ff;
+            background: #166f84;
+          }
+        }
+      }
+    }
+    .yxjcEcharts {
+      margin: 10px auto;
+      width: 430px;
+      height: calc(100% - 40px);
+      background: url('@/assets/newImgs/yxjcE.png') no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+}
+.Realtime {
+  width: 450px;
+  height: 35%;
+  .tableBody {
+    width: 432px;
+    height: calc(100% - 50px);
+    overflow: hidden;
+    margin: 0 auto;
+    .tableBodyList {
+      height: 60px;
+      line-height: 60px;
+      width: 100%;
+      display: flex;
+      /* 选择偶数行 */
+      &:nth-child(even) {
+        background: linear-gradient(0deg, #008599 0%, #08596d 100%);
+      }
+
+      .tableBodyList_span1 {
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 16px;
+        color: #00f2ff;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+        width: 10%;
+        // background: #217e8cff;
+      }
+      .tableBodyList_span2 {
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        font-size: 14px;
+        color: #ffffff;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+        width: 10%;
+      }
+      .tableBodyList_span3 {
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        font-size: 14px;
+        color: #ffffff;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+        width: 25%;
+      }
+
+      .tableBodyList_span4 {
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        font-size: 14px;
+        color: #ffffff;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+        width: 35%;
+      }
+
+      .tableBodyList_span5 {
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        font-size: 14px;
+        color: #ffffff;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+        width: 20%;
+      }
+    }
+  }
+}
+.ListBoxHeader {
+  height: 44px;
+  line-height: 50px;
+  width: 98%;
+  background: url('@/assets/newImgs/partBg.png') no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 7px 0px 0px 8px;
+  .ListBoxHeader_font {
+    font-family: PangMenZhengDao;
+    font-weight: 400;
+    font-size: 23px;
+    color: #ebfeff;
+    padding-left: 34px;
+  }
+}
+</style>
diff --git a/src/views/oneMap/components/FHPL.vue b/src/views/oneMap/components/FHPL.vue
index 0ff3bff..99d2db9 100644
--- a/src/views/oneMap/components/FHPL.vue
+++ b/src/views/oneMap/components/FHPL.vue
@@ -86,6 +86,7 @@
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-shadow: inset 0 0 5px 5px #47eef38a;
+    z-index: 111;
   }
   .RightBox {
     width: 450px;

diff --git a/src/assets/newImgs/ps.png b/src/assets/newImgs/ps.png
new file mode 100644
index 0000000..408bf43
--- /dev/null
+++ b/src/assets/newImgs/ps.png
Binary files differ
diff --git a/src/assets/newImgs/ql.png b/src/assets/newImgs/ql.png
new file mode 100644
index 0000000..de05837
--- /dev/null
+++ b/src/assets/newImgs/ql.png
Binary files differ
diff --git a/src/assets/newImgs/rq.png b/src/assets/newImgs/rq.png
new file mode 100644
index 0000000..0877055
--- /dev/null
+++ b/src/assets/newImgs/rq.png
Binary files differ
diff --git a/src/assets/newImgs/sd.png b/src/assets/newImgs/sd.png
new file mode 100644
index 0000000..be77643
--- /dev/null
+++ b/src/assets/newImgs/sd.png
Binary files differ
diff --git a/src/assets/newImgs/yxjcE.png b/src/assets/newImgs/yxjcE.png
new file mode 100644
index 0000000..ec62b9d
--- /dev/null
+++ b/src/assets/newImgs/yxjcE.png
Binary files differ
diff --git a/src/views/oneMap/OverallOverview/LeftBox.vue b/src/views/oneMap/OverallOverview/LeftBox.vue
new file mode 100644
index 0000000..5bf9e9d
--- /dev/null
+++ b/src/views/oneMap/OverallOverview/LeftBox.vue
@@ -0,0 +1,471 @@
+<template>
+  <!-- 基础设施 -->
+  <div class="infrastructure">
+    <div class="ListBoxHeader">
+      <div class="ListBoxHeader_font">基础设施</div>
+    </div>
+    <div class="jcssTop">
+      <div class="subRightBox">
+        <div
+          class="headcenter"
+          v-for="(item, index) in categoryList"
+          :key="item"
+          :class="activedname == item.name ? 'activedright' : ''"
+          @click="categoryclick(item, index)"
+        >
+          {{ item.name }}
+        </div>
+      </div>
+      <div class="jcssBox flex">
+        <div class="jcssTp">
+          <img :src="riskData[0].Imgurl" alt="" class="NewImg" />
+        </div>
+        <div class="jcssContent">
+          <div class="jcssContent_z">
+            <div class="ListContent flex flex-align-center">
+              <div class="icon"></div>
+              <div class="gw">{{ riskData[0].name1 }}</div>
+              <div class="NumClass">{{ riskData[0].num1 }}</div>
+              <div class="gl">{{ riskData[0].dw1 }}</div>
+            </div>
+            <div class="ListContent flex flex-align-center">
+              <div class="icon"></div>
+              <div class="gw">{{ riskData[0].name2 }}</div>
+              <div class="NumClass">{{ riskData[0].num2 }}</div>
+              <div class="gl">{{ riskData[0].dw2 }}</div>
+            </div>
+            <div class="ListContent flex flex-align-center">
+              <div class="icon"></div>
+              <div class="gw">{{ riskData[0].name3 }}</div>
+              <div class="NumClass">{{ riskData[0].num3 }}</div>
+              <div class="gl">{{ riskData[0].dw3 }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- 运行监测 -->
+  <div class="Operationmonitoring">
+    <div class="ListBoxHeader">
+      <div class="ListBoxHeader_font">运行监测</div>
+    </div>
+    <div class="yxjcTop">
+      <div class="topVehicl flex">
+        <div class="icon"></div>
+        <div class="text">车辆调度</div>
+
+        <div class="yxjcList">
+          <div class="head-right" style="">
+            <div
+              class="head-item"
+              v-for="(item, index) in yearList"
+              :key="item"
+              :class="yxjcname == item.name ? 'activedright' : ''"
+              @click="yearclick(item, index)"
+            >
+              {{ item.name }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="yxjcEcharts"></div>
+    </div>
+  </div>
+  <!-- 实时监测 -->
+  <div class="Realtime">
+    <div class="ListBoxHeader">
+      <div class="ListBoxHeader_font">实时监测</div>
+    </div>
+    <Vue3SeamlessScroll :list="FXJCData" :singleHeight="60" :singleWaitTime="1500" :hover="true" class="tableBody">
+      <div class="tableBodyList" v-for="item in FXJCData">
+        <span class="tableBodyList_span1">{{ item.num }}</span>
+        <span class="tableBodyList_span2">{{ item.sz }} </span>
+        <span class="tableBodyList_span3">{{ item.bm }}</span>
+        <span class="tableBodyList_span4">{{ item.zb }} </span>
+        <span class="tableBodyList_span5">
+          <el-tag type="danger" v-if="item.zk == '异常'">异 常</el-tag>
+          <el-tag type="success" v-if="item.zk == '正常'">正 常</el-tag>
+        </span>
+      </div>
+    </Vue3SeamlessScroll>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+import ranqi_icon from '@/assets/newImgs/rq.png'; //燃气
+import qiaoliang from '@/assets/newImgs/ql.png'; //桥梁
+import sd_icon from '@/assets/newImgs/sd.png'; //隧道
+import ps_icon from '@/assets/newImgs/ps.png'; //排水
+const categoryList = ref([
+  { name: '燃气', value: 1 },
+  { name: '排水', value: 2 },
+  { name: '桥梁', value: 3 },
+  { name: '隧道', value: 4 },
+]);
+const yearList = ref([
+  { name: '7天', value: 1 },
+  { name: '15天', value: 2 },
+  { name: '30天', value: 3 },
+]);
+const FXJCData = ref([
+  {
+    num: '01',
+    zb: '永安路',
+    sz: '排水',
+    bm: 'BM234454',
+    zk: '异常',
+  },
+  { num: '01', zb: '管网病管', sz: '排水', bm: 'BM234454', zk: '正常' },
+  { num: '03', zb: '结构', sz: '隧道', bm: 'BM234454', zk: '正常' },
+  { num: '04', zb: '老化', sz: '桥梁', bm: 'BM234454', zk: '正常' },
+  { num: '05', zb: '管网病管', sz: '排水', bm: 'BM234454', zk: '异常' },
+  { num: '06', zb: '管线是否泄露', sz: '排水', bm: 'BM234454', zk: '正常' },
+]);
+const yxjcname = ref('7天');
+function yearclick(val) {
+  yxjcname.value = val.name;
+}
+const riskData = ref([
+  {
+    name1: '管网',
+    name2: '传感器',
+    name3: '窨井',
+    num1: '234',
+    num2: '12',
+    num3: '12',
+    Imgurl: ranqi_icon,
+    dw1: '公里',
+    dw2: '套',
+    dw3: '口',
+  },
+]);
+
+const activedname = ref('燃气');
+// 点击事件
+function categoryclick(val) {
+  console.log(val.name, '1');
+  activedname.value = val.name;
+  if (activedname.value == '燃气') {
+    riskData.value = [
+      {
+        name1: '管网',
+        name2: '传感器',
+        name3: '窨井',
+        num1: '234',
+        num2: '12',
+        num3: '12',
+        Imgurl: ranqi_icon,
+        dw1: '公里',
+        dw2: '套',
+        dw3: '口',
+      },
+    ];
+  } else if (activedname.value == '排水') {
+    riskData.value = [
+      {
+        name1: '管网',
+        name2: '检查口',
+        name3: '感知设备',
+        num1: '234',
+        num2: '234',
+        num3: '18',
+        Imgurl: ps_icon,
+        dw1: '公里',
+        dw2: '处',
+        dw3: '套',
+      },
+    ];
+  } else if (activedname.value == '桥梁') {
+    riskData.value = [
+      {
+        name1: '数量',
+        name2: '长度',
+        name3: '感知设备',
+        num1: '1',
+        num2: '204',
+        num3: '92',
+        Imgurl: qiaoliang,
+        dw1: '座',
+        dw2: '米',
+        dw3: '套',
+      },
+    ];
+  } else {
+    riskData.value = [
+      {
+        name1: '数量',
+        name2: '长度',
+        name3: '感知设备',
+        num1: '1',
+        num2: '750',
+        num3: '111',
+        Imgurl: sd_icon,
+        dw1: '座',
+        dw2: '米',
+        dw3: '套',
+      },
+    ];
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.infrastructure {
+  width: 450px;
+  height: 28%;
+  // background: red;
+  .jcssTop {
+    width: 450px;
+    height: calc(100% - 55px);
+    margin: 8px auto;
+    .subRightBox {
+      width: 450px;
+      margin: 0 auto;
+      height: 35px;
+      display: flex;
+      cursor: pointer;
+      font-size: 14px;
+      color: #ffffff;
+      .headcenter {
+        width: 100px;
+        height: 26px;
+        padding: 2px 3px;
+        background: #00344f;
+        text-align: center;
+        margin-top: 5px;
+        margin-left: 10px;
+      }
+      .activedright {
+        border: 1px solid #2cfce9;
+        color: #e4f5ff;
+        background: #166f84;
+      }
+    }
+    .jcssBox {
+      margin-top: 2px;
+      width: 450px;
+      height: calc(100% - 40px);
+      // background: blanchedalmond;
+      .jcssTp {
+        width: 43%;
+        height: 100%;
+        .NewImg {
+          position: relative;
+          top: 13%;
+          left: 25%;
+          width: 88px;
+          height: 111px;
+        }
+      }
+      .jcssContent {
+        width: 52%;
+        height: 100%;
+        // background: yellowgreen;
+        .jcssContent_z {
+          position: relative;
+          top: 20%;
+          width: 100%;
+          height: 100px;
+          // background: red;
+          .ListContent {
+            height: 30px;
+            margin-top: 5px;
+            // background: yellow;
+            .icon {
+              width: 25px;
+              height: 25px;
+              background: url('@/assets/newImgs/xtb_img.png') no-repeat;
+            }
+            .gw {
+              font-family: Source Han Sans CN;
+              font-weight: bold;
+              font-size: 14px;
+              color: #85d2d4;
+              padding-left: 5px;
+              // background: yellow;
+              width: 70px;
+            }
+            .NumClass {
+              width: 70px;
+              text-align: right;
+              font-family: Source Han Sans CN;
+              font-weight: bold;
+              font-size: 26px;
+              color: #12f9ff;
+              padding-left: 20px;
+            }
+            .gl {
+              font-family: Source Han Sans CN;
+              font-weight: bold;
+              font-size: 14px;
+              color: #34909f;
+              padding-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.Operationmonitoring {
+  // background: blue;
+  width: 450px;
+  height: 33%;
+  .yxjcTop {
+    width: 450px;
+    height: calc(100% - 60px);
+    margin: 10px auto;
+    // background: red;
+    .topVehicl {
+      height: 26px;
+      .icon {
+        position: relative;
+        left: 10px;
+        width: 25px;
+        height: 25px;
+        background: url('@/assets/newImgs/xtb_img.png') no-repeat;
+      }
+      .text {
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 14px;
+        color: #ebfeff;
+        line-height: 25px;
+        position: relative;
+        left: 12px;
+        box-shadow: inset 0px -7px 10px -5px #47eef38a;
+      }
+      .yxjcList {
+        position: relative;
+        left: 150px;
+        display: flex;
+        width: 46%;
+        // background: rgb(92, 122, 96);
+        .head-right {
+          margin-top: 2px;
+          cursor: pointer;
+          font-size: 14px;
+          color: #ffffff;
+          display: flex;
+          line-height: 18px;
+          .head-item {
+            width: 60px;
+            margin-right: 10px;
+            padding: 2px 3px;
+            background: #00344f;
+            height: 23px;
+            text-align: center;
+          }
+          .activedright {
+            border: 1px solid #2cfce9;
+            color: #e4f5ff;
+            background: #166f84;
+          }
+        }
+      }
+    }
+    .yxjcEcharts {
+      margin: 10px auto;
+      width: 430px;
+      height: calc(100% - 40px);
+      background: url('@/assets/newImgs/yxjcE.png') no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+}
+.Realtime {
+  width: 450px;
+  height: 35%;
+  .tableBody {
+    width: 432px;
+    height: calc(100% - 50px);
+    overflow: hidden;
+    margin: 0 auto;
+    .tableBodyList {
+      height: 60px;
+      line-height: 60px;
+      width: 100%;
+      display: flex;
+      /* 选择偶数行 */
+      &:nth-child(even) {
+        background: linear-gradient(0deg, #008599 0%, #08596d 100%);
+      }
+
+      .tableBodyList_span1 {
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 16px;
+        color: #00f2ff;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+        width: 10%;
+        // background: #217e8cff;
+      }
+      .tableBodyList_span2 {
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        font-size: 14px;
+        color: #ffffff;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+        width: 10%;
+      }
+      .tableBodyList_span3 {
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        font-size: 14px;
+        color: #ffffff;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+        width: 25%;
+      }
+
+      .tableBodyList_span4 {
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        font-size: 14px;
+        color: #ffffff;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+        width: 35%;
+      }
+
+      .tableBodyList_span5 {
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        font-size: 14px;
+        color: #ffffff;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+        width: 20%;
+      }
+    }
+  }
+}
+.ListBoxHeader {
+  height: 44px;
+  line-height: 50px;
+  width: 98%;
+  background: url('@/assets/newImgs/partBg.png') no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 7px 0px 0px 8px;
+  .ListBoxHeader_font {
+    font-family: PangMenZhengDao;
+    font-weight: 400;
+    font-size: 23px;
+    color: #ebfeff;
+    padding-left: 34px;
+  }
+}
+</style>
diff --git a/src/views/oneMap/components/FHPL.vue b/src/views/oneMap/components/FHPL.vue
index 0ff3bff..99d2db9 100644
--- a/src/views/oneMap/components/FHPL.vue
+++ b/src/views/oneMap/components/FHPL.vue
@@ -86,6 +86,7 @@
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-shadow: inset 0 0 5px 5px #47eef38a;
+    z-index: 111;
   }
   .RightBox {
     width: 450px;
diff --git a/src/views/oneMap/components/FXHG.vue b/src/views/oneMap/components/FXHG.vue
index d48afd9..4032f68 100644
--- a/src/views/oneMap/components/FXHG.vue
+++ b/src/views/oneMap/components/FXHG.vue
@@ -85,6 +85,7 @@
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-shadow: inset 0 0 5px 5px #47eef38a;
+    z-index: 120;
   }
   .BottomBox {
     width: 900px;

diff --git a/src/assets/newImgs/ps.png b/src/assets/newImgs/ps.png
new file mode 100644
index 0000000..408bf43
--- /dev/null
+++ b/src/assets/newImgs/ps.png
Binary files differ
diff --git a/src/assets/newImgs/ql.png b/src/assets/newImgs/ql.png
new file mode 100644
index 0000000..de05837
--- /dev/null
+++ b/src/assets/newImgs/ql.png
Binary files differ
diff --git a/src/assets/newImgs/rq.png b/src/assets/newImgs/rq.png
new file mode 100644
index 0000000..0877055
--- /dev/null
+++ b/src/assets/newImgs/rq.png
Binary files differ
diff --git a/src/assets/newImgs/sd.png b/src/assets/newImgs/sd.png
new file mode 100644
index 0000000..be77643
--- /dev/null
+++ b/src/assets/newImgs/sd.png
Binary files differ
diff --git a/src/assets/newImgs/yxjcE.png b/src/assets/newImgs/yxjcE.png
new file mode 100644
index 0000000..ec62b9d
--- /dev/null
+++ b/src/assets/newImgs/yxjcE.png
Binary files differ
diff --git a/src/views/oneMap/OverallOverview/LeftBox.vue b/src/views/oneMap/OverallOverview/LeftBox.vue
new file mode 100644
index 0000000..5bf9e9d
--- /dev/null
+++ b/src/views/oneMap/OverallOverview/LeftBox.vue
@@ -0,0 +1,471 @@
+<template>
+  <!-- 基础设施 -->
+  <div class="infrastructure">
+    <div class="ListBoxHeader">
+      <div class="ListBoxHeader_font">基础设施</div>
+    </div>
+    <div class="jcssTop">
+      <div class="subRightBox">
+        <div
+          class="headcenter"
+          v-for="(item, index) in categoryList"
+          :key="item"
+          :class="activedname == item.name ? 'activedright' : ''"
+          @click="categoryclick(item, index)"
+        >
+          {{ item.name }}
+        </div>
+      </div>
+      <div class="jcssBox flex">
+        <div class="jcssTp">
+          <img :src="riskData[0].Imgurl" alt="" class="NewImg" />
+        </div>
+        <div class="jcssContent">
+          <div class="jcssContent_z">
+            <div class="ListContent flex flex-align-center">
+              <div class="icon"></div>
+              <div class="gw">{{ riskData[0].name1 }}</div>
+              <div class="NumClass">{{ riskData[0].num1 }}</div>
+              <div class="gl">{{ riskData[0].dw1 }}</div>
+            </div>
+            <div class="ListContent flex flex-align-center">
+              <div class="icon"></div>
+              <div class="gw">{{ riskData[0].name2 }}</div>
+              <div class="NumClass">{{ riskData[0].num2 }}</div>
+              <div class="gl">{{ riskData[0].dw2 }}</div>
+            </div>
+            <div class="ListContent flex flex-align-center">
+              <div class="icon"></div>
+              <div class="gw">{{ riskData[0].name3 }}</div>
+              <div class="NumClass">{{ riskData[0].num3 }}</div>
+              <div class="gl">{{ riskData[0].dw3 }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- 运行监测 -->
+  <div class="Operationmonitoring">
+    <div class="ListBoxHeader">
+      <div class="ListBoxHeader_font">运行监测</div>
+    </div>
+    <div class="yxjcTop">
+      <div class="topVehicl flex">
+        <div class="icon"></div>
+        <div class="text">车辆调度</div>
+
+        <div class="yxjcList">
+          <div class="head-right" style="">
+            <div
+              class="head-item"
+              v-for="(item, index) in yearList"
+              :key="item"
+              :class="yxjcname == item.name ? 'activedright' : ''"
+              @click="yearclick(item, index)"
+            >
+              {{ item.name }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="yxjcEcharts"></div>
+    </div>
+  </div>
+  <!-- 实时监测 -->
+  <div class="Realtime">
+    <div class="ListBoxHeader">
+      <div class="ListBoxHeader_font">实时监测</div>
+    </div>
+    <Vue3SeamlessScroll :list="FXJCData" :singleHeight="60" :singleWaitTime="1500" :hover="true" class="tableBody">
+      <div class="tableBodyList" v-for="item in FXJCData">
+        <span class="tableBodyList_span1">{{ item.num }}</span>
+        <span class="tableBodyList_span2">{{ item.sz }} </span>
+        <span class="tableBodyList_span3">{{ item.bm }}</span>
+        <span class="tableBodyList_span4">{{ item.zb }} </span>
+        <span class="tableBodyList_span5">
+          <el-tag type="danger" v-if="item.zk == '异常'">异 常</el-tag>
+          <el-tag type="success" v-if="item.zk == '正常'">正 常</el-tag>
+        </span>
+      </div>
+    </Vue3SeamlessScroll>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+import ranqi_icon from '@/assets/newImgs/rq.png'; //燃气
+import qiaoliang from '@/assets/newImgs/ql.png'; //桥梁
+import sd_icon from '@/assets/newImgs/sd.png'; //隧道
+import ps_icon from '@/assets/newImgs/ps.png'; //排水
+const categoryList = ref([
+  { name: '燃气', value: 1 },
+  { name: '排水', value: 2 },
+  { name: '桥梁', value: 3 },
+  { name: '隧道', value: 4 },
+]);
+const yearList = ref([
+  { name: '7天', value: 1 },
+  { name: '15天', value: 2 },
+  { name: '30天', value: 3 },
+]);
+const FXJCData = ref([
+  {
+    num: '01',
+    zb: '永安路',
+    sz: '排水',
+    bm: 'BM234454',
+    zk: '异常',
+  },
+  { num: '01', zb: '管网病管', sz: '排水', bm: 'BM234454', zk: '正常' },
+  { num: '03', zb: '结构', sz: '隧道', bm: 'BM234454', zk: '正常' },
+  { num: '04', zb: '老化', sz: '桥梁', bm: 'BM234454', zk: '正常' },
+  { num: '05', zb: '管网病管', sz: '排水', bm: 'BM234454', zk: '异常' },
+  { num: '06', zb: '管线是否泄露', sz: '排水', bm: 'BM234454', zk: '正常' },
+]);
+const yxjcname = ref('7天');
+function yearclick(val) {
+  yxjcname.value = val.name;
+}
+const riskData = ref([
+  {
+    name1: '管网',
+    name2: '传感器',
+    name3: '窨井',
+    num1: '234',
+    num2: '12',
+    num3: '12',
+    Imgurl: ranqi_icon,
+    dw1: '公里',
+    dw2: '套',
+    dw3: '口',
+  },
+]);
+
+const activedname = ref('燃气');
+// 点击事件
+function categoryclick(val) {
+  console.log(val.name, '1');
+  activedname.value = val.name;
+  if (activedname.value == '燃气') {
+    riskData.value = [
+      {
+        name1: '管网',
+        name2: '传感器',
+        name3: '窨井',
+        num1: '234',
+        num2: '12',
+        num3: '12',
+        Imgurl: ranqi_icon,
+        dw1: '公里',
+        dw2: '套',
+        dw3: '口',
+      },
+    ];
+  } else if (activedname.value == '排水') {
+    riskData.value = [
+      {
+        name1: '管网',
+        name2: '检查口',
+        name3: '感知设备',
+        num1: '234',
+        num2: '234',
+        num3: '18',
+        Imgurl: ps_icon,
+        dw1: '公里',
+        dw2: '处',
+        dw3: '套',
+      },
+    ];
+  } else if (activedname.value == '桥梁') {
+    riskData.value = [
+      {
+        name1: '数量',
+        name2: '长度',
+        name3: '感知设备',
+        num1: '1',
+        num2: '204',
+        num3: '92',
+        Imgurl: qiaoliang,
+        dw1: '座',
+        dw2: '米',
+        dw3: '套',
+      },
+    ];
+  } else {
+    riskData.value = [
+      {
+        name1: '数量',
+        name2: '长度',
+        name3: '感知设备',
+        num1: '1',
+        num2: '750',
+        num3: '111',
+        Imgurl: sd_icon,
+        dw1: '座',
+        dw2: '米',
+        dw3: '套',
+      },
+    ];
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.infrastructure {
+  width: 450px;
+  height: 28%;
+  // background: red;
+  .jcssTop {
+    width: 450px;
+    height: calc(100% - 55px);
+    margin: 8px auto;
+    .subRightBox {
+      width: 450px;
+      margin: 0 auto;
+      height: 35px;
+      display: flex;
+      cursor: pointer;
+      font-size: 14px;
+      color: #ffffff;
+      .headcenter {
+        width: 100px;
+        height: 26px;
+        padding: 2px 3px;
+        background: #00344f;
+        text-align: center;
+        margin-top: 5px;
+        margin-left: 10px;
+      }
+      .activedright {
+        border: 1px solid #2cfce9;
+        color: #e4f5ff;
+        background: #166f84;
+      }
+    }
+    .jcssBox {
+      margin-top: 2px;
+      width: 450px;
+      height: calc(100% - 40px);
+      // background: blanchedalmond;
+      .jcssTp {
+        width: 43%;
+        height: 100%;
+        .NewImg {
+          position: relative;
+          top: 13%;
+          left: 25%;
+          width: 88px;
+          height: 111px;
+        }
+      }
+      .jcssContent {
+        width: 52%;
+        height: 100%;
+        // background: yellowgreen;
+        .jcssContent_z {
+          position: relative;
+          top: 20%;
+          width: 100%;
+          height: 100px;
+          // background: red;
+          .ListContent {
+            height: 30px;
+            margin-top: 5px;
+            // background: yellow;
+            .icon {
+              width: 25px;
+              height: 25px;
+              background: url('@/assets/newImgs/xtb_img.png') no-repeat;
+            }
+            .gw {
+              font-family: Source Han Sans CN;
+              font-weight: bold;
+              font-size: 14px;
+              color: #85d2d4;
+              padding-left: 5px;
+              // background: yellow;
+              width: 70px;
+            }
+            .NumClass {
+              width: 70px;
+              text-align: right;
+              font-family: Source Han Sans CN;
+              font-weight: bold;
+              font-size: 26px;
+              color: #12f9ff;
+              padding-left: 20px;
+            }
+            .gl {
+              font-family: Source Han Sans CN;
+              font-weight: bold;
+              font-size: 14px;
+              color: #34909f;
+              padding-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.Operationmonitoring {
+  // background: blue;
+  width: 450px;
+  height: 33%;
+  .yxjcTop {
+    width: 450px;
+    height: calc(100% - 60px);
+    margin: 10px auto;
+    // background: red;
+    .topVehicl {
+      height: 26px;
+      .icon {
+        position: relative;
+        left: 10px;
+        width: 25px;
+        height: 25px;
+        background: url('@/assets/newImgs/xtb_img.png') no-repeat;
+      }
+      .text {
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 14px;
+        color: #ebfeff;
+        line-height: 25px;
+        position: relative;
+        left: 12px;
+        box-shadow: inset 0px -7px 10px -5px #47eef38a;
+      }
+      .yxjcList {
+        position: relative;
+        left: 150px;
+        display: flex;
+        width: 46%;
+        // background: rgb(92, 122, 96);
+        .head-right {
+          margin-top: 2px;
+          cursor: pointer;
+          font-size: 14px;
+          color: #ffffff;
+          display: flex;
+          line-height: 18px;
+          .head-item {
+            width: 60px;
+            margin-right: 10px;
+            padding: 2px 3px;
+            background: #00344f;
+            height: 23px;
+            text-align: center;
+          }
+          .activedright {
+            border: 1px solid #2cfce9;
+            color: #e4f5ff;
+            background: #166f84;
+          }
+        }
+      }
+    }
+    .yxjcEcharts {
+      margin: 10px auto;
+      width: 430px;
+      height: calc(100% - 40px);
+      background: url('@/assets/newImgs/yxjcE.png') no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+}
+.Realtime {
+  width: 450px;
+  height: 35%;
+  .tableBody {
+    width: 432px;
+    height: calc(100% - 50px);
+    overflow: hidden;
+    margin: 0 auto;
+    .tableBodyList {
+      height: 60px;
+      line-height: 60px;
+      width: 100%;
+      display: flex;
+      /* 选择偶数行 */
+      &:nth-child(even) {
+        background: linear-gradient(0deg, #008599 0%, #08596d 100%);
+      }
+
+      .tableBodyList_span1 {
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 16px;
+        color: #00f2ff;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+        width: 10%;
+        // background: #217e8cff;
+      }
+      .tableBodyList_span2 {
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        font-size: 14px;
+        color: #ffffff;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+        width: 10%;
+      }
+      .tableBodyList_span3 {
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        font-size: 14px;
+        color: #ffffff;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+        width: 25%;
+      }
+
+      .tableBodyList_span4 {
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        font-size: 14px;
+        color: #ffffff;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+        width: 35%;
+      }
+
+      .tableBodyList_span5 {
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        font-size: 14px;
+        color: #ffffff;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+        width: 20%;
+      }
+    }
+  }
+}
+.ListBoxHeader {
+  height: 44px;
+  line-height: 50px;
+  width: 98%;
+  background: url('@/assets/newImgs/partBg.png') no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 7px 0px 0px 8px;
+  .ListBoxHeader_font {
+    font-family: PangMenZhengDao;
+    font-weight: 400;
+    font-size: 23px;
+    color: #ebfeff;
+    padding-left: 34px;
+  }
+}
+</style>
diff --git a/src/views/oneMap/components/FHPL.vue b/src/views/oneMap/components/FHPL.vue
index 0ff3bff..99d2db9 100644
--- a/src/views/oneMap/components/FHPL.vue
+++ b/src/views/oneMap/components/FHPL.vue
@@ -86,6 +86,7 @@
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-shadow: inset 0 0 5px 5px #47eef38a;
+    z-index: 111;
   }
   .RightBox {
     width: 450px;
diff --git a/src/views/oneMap/components/FXHG.vue b/src/views/oneMap/components/FXHG.vue
index d48afd9..4032f68 100644
--- a/src/views/oneMap/components/FXHG.vue
+++ b/src/views/oneMap/components/FXHG.vue
@@ -85,6 +85,7 @@
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-shadow: inset 0 0 5px 5px #47eef38a;
+    z-index: 120;
   }
   .BottomBox {
     width: 900px;
diff --git a/src/views/oneMap/components/ZTGL.vue b/src/views/oneMap/components/ZTGL.vue
index b128ad4..c685786 100644
--- a/src/views/oneMap/components/ZTGL.vue
+++ b/src/views/oneMap/components/ZTGL.vue
@@ -1,6 +1,8 @@
 <template>
   <div id="ZTGL">
-    <div :class="['LeftBox', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']"></div>
+    <div :class="['LeftBox', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
+      <LeftBox />
+    </div>
     <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
       <RightBox />
     </div>
@@ -10,6 +12,7 @@
 <script setup name="ZTGL">
 import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
 const AllData = reactive({});
+import LeftBox from '@/views/oneMap/OverallOverview/LeftBox.vue';
 import RightBox from '@/views/oneMap/OverallOverview/RightBox.vue';
 import testProjection from '@/assets/testProjection.json';
 import testProjectionLabel from '@/assets/testProjectionLabel.json';
@@ -73,8 +76,8 @@
     position: absolute;
     left: 10px;
     top: 70px;
-    background: url('@/assets/images/LeftContent.png') no-repeat;
-    // background: linear-gradient(0deg, rgba(0, 93, 114, 0.8) 0%, rgba(0, 93, 114, 0.8) 100%);
+    // background: url('@/assets/images/LeftContent.png') no-repeat;
+    background: linear-gradient(0deg, rgba(0, 93, 114, 0.8) 0%, rgba(0, 93, 114, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-shadow: inset 0 0 5px 5px #47eef38a;