diff --git a/src/assets/coastalMap/box_back03.png b/src/assets/coastalMap/box_back03.png
new file mode 100644
index 0000000..88915dd
Binary files /dev/null and b/src/assets/coastalMap/box_back03.png differ
diff --git a/src/assets/coastalMap/policeStatus/rank_one.png b/src/assets/coastalMap/policeStatus/rank_one.png
new file mode 100644
index 0000000..b8181ef
Binary files /dev/null and b/src/assets/coastalMap/policeStatus/rank_one.png differ
diff --git a/src/assets/coastalMap/policeStatus/rank_three.png b/src/assets/coastalMap/policeStatus/rank_three.png
new file mode 100644
index 0000000..da1c323
Binary files /dev/null and b/src/assets/coastalMap/policeStatus/rank_three.png differ
diff --git a/src/assets/coastalMap/policeStatus/rank_two.png b/src/assets/coastalMap/policeStatus/rank_two.png
new file mode 100644
index 0000000..29ed20d
Binary files /dev/null and b/src/assets/coastalMap/policeStatus/rank_two.png differ
diff --git a/src/views/coastalMap/components/keyPerson.vue b/src/views/coastalMap/components/keyPerson.vue
index dbb1c85..5552251 100644
--- a/src/views/coastalMap/components/keyPerson.vue
+++ b/src/views/coastalMap/components/keyPerson.vue
@@ -122,10 +122,10 @@
 <script>
 import * as echarts from 'echarts'
 import EleResize from '@/utils/esresize'
-import PersonScroll from './keypersonScroll.vue'
+// import PersonScroll from './keypersonScroll.vue'
 export default {
   name: 'KeyPerson',
-  components: { PersonScroll },
+  // components: { PersonScroll },
   data() {
     return {
       title_text: "重点人员",
diff --git a/src/views/coastalMap/components/policeSpread.vue b/src/views/coastalMap/components/policeSpread.vue
index fcdc278..0686b00 100644
--- a/src/views/coastalMap/components/policeSpread.vue
+++ b/src/views/coastalMap/components/policeSpread.vue
@@ -11,8 +11,8 @@
         :key="index"
       >
         <div class="police_body_box_title">{{ item.text }}</div>
-        <div class="police_body_box_num" :style="{ color: item.color }">
-          2,362
+        <div class="police_body_box_num">
+          {{ item.num }}
         </div>
       </div>
     </div>
@@ -26,9 +26,9 @@ export default {
     return {
       // * 警力分布假数据
       policeData: [
-        { color: '#00f5ff', text: '派出所' },
-        { color: '#ffc426', text: '警务室' },
-        { color: '#00f5ff', text: '执法警员' }
+        { num: '321', text: '派出所' },
+        { num: '123', text: '警务室' },
+        { num: '645', text: '执法警员' }
       ]
     }
   }
@@ -37,21 +37,24 @@ export default {
 
 <style lang="scss" scoped>
 .police {
-  width: 18vw;
-  height: 18vh;
-
+  width: 20vw;
+  height: 17.5vh;
   .police_title {
-    height: 4vh;
+    width: 20vw;
+    height: 3.5vh;
     background-image: url('@/assets/picture/bg_small_title.png');
     background-repeat: no-repeat;
     background-size: 100% 100%;
-
     .police_title_text {
+      width: 18vw;
+      height: 3.5vh;
+      color: antiquewhite;
       margin-left: 2vw;
-      font-size: 1vw;
-      color: #edf1f7;
-      line-height: 4vh;
-      text-shadow: 0 0 10px #0b4672;
+      font-size: 16px;
+      font-weight: 700;
+      line-height: 3.5vh;
+      text-shadow: 0px 0px 10px #0b4672;
+      letter-spacing: 2px;
     }
   }
 
@@ -59,40 +62,44 @@ export default {
     display: flex;
     justify-content: space-around;
     align-items: center;
-    height: 15vh;
-    background-image: url('@/assets/picture/bg_right.png');
+    height: 12vh;
+    background-image: url('@/assets/coastalMap/box_back.png');
     background-repeat: no-repeat;
     background-size: 100% 100%;
-
     .police_body_box {
       width: 5vw;
-      height: 10vh;
+      height: 9vh;
       background-image: url('@/assets/picture/bg_police_nor.png');
       background-repeat: no-repeat;
       background-size: 100% 100%;
+      cursor: pointer;
 
       &:hover {
         background-image: url('@/assets/picture/bg_police_hover.png');
         background-repeat: no-repeat;
         background-size: 100% 100%;
+        cursor: pointer;
       }
 
       .police_body_box_title {
-        height: 3vh;
+        height: 2.4vh;
         text-align: center;
-        font-size: 1vw;
+        font-size: 1.2rem;
         color: #edf1f7;
-        line-height: 2.7vh;
+        line-height: 2.4vh;
       }
 
       .police_body_box_num {
-        font-size: 1vw;
+        font-size: 2rem;
         font-family: D-DIN, D-DIN;
         font-weight: bold;
         color: #00f5ff;
         text-align: center;
         line-height: 7vh;
       }
+      .police_body_box_num:hover {
+        color: #FFC426;
+      }
     }
   }
 }
diff --git a/src/views/coastalMap/components/policeStatus.vue b/src/views/coastalMap/components/policeStatus.vue
index 3cf9947..9644071 100644
--- a/src/views/coastalMap/components/policeStatus.vue
+++ b/src/views/coastalMap/components/policeStatus.vue
@@ -5,63 +5,360 @@
       <div class="police_status_text">警情统计</div>
     </div>
     <div class="police_status_body">
-      <div class="police_status_body_charts"></div>
-      <div class="police_status_body_scroll">
-        <PoliceScroll></PoliceScroll>
+      <!-- 包含排名以及横向柱状图 -->
+      <div class="police_status_body_charts">
+        <div class="police_status_box">
+          <!-- 左边占比 -->
+          <div class="rank_left">
+            <div class="rank_left_item one">1</div>
+            <div class="rank_left_item two">2</div>
+            <div class="rank_left_item three">3</div>
+          </div>
+          <div class="charts_right" id="charts_right"></div>
+        </div>
+      </div>
+      <!-- 滚动 -->
+      <div class="roll_body">
+        <!-- <PoliceScroll></PoliceScroll> -->
+        <ul class="marquee-list" :class="{ 'animate-up': animateUp }">
+          <li v-for="item in roll_list" :key="item.id">
+            <div class="roll_item">
+              <div class="time_box">{{ item.police_time }}</div>
+              <div class="roll_item_left">
+                <div class="roll_item_text">警情类型</div>
+                <div class="roll_item_text">接警单位</div>
+                <div class="roll_item_text">事发地址</div>
+                <div class="roll_item_text">报警内容</div>
+              </div>
+              <div class="roll_item_right">
+                <div class="roll_item_value">{{ item.type }}</div>
+                <div class="roll_item_value">{{ item.unit }}</div>
+                <div class="roll_item_value">{{ item.address }}</div>
+                <div class="roll_item_value" :title="item.now_address">{{ item.now_address }}</div>
+              </div>
+            </div>
+          </li>
+        </ul>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import PoliceScroll from './policeScroll.vue'
+// import PoliceScroll from "./policeScroll.vue";
+import * as echarts from "echarts";
+import EleResize from "@/utils/esresize";
 export default {
-  name: 'PoliceStatus',
-  components: { PoliceScroll },
+  name: "PoliceStatus",
+  components: {
+    //PoliceScroll
+  },
   data() {
-    return
+    return {
+      y_data: ["调解案件", "行政处罚案件", "当场处罚案件"], // y轴文字
+      chart_data: ["145", "29", "101"], // chart表数据
+      roll_list: [
+        {
+          id:'1',
+          type: "机动车",
+          unit:'射阳公安局',
+          address:'建湖县明星路与冠华路交界处北边',
+          police_time: "2023-11-24 13:21:17",
+          now_address:'报警人萧婷在建湖县明星路与冠华路交界处北边轿车苏J8MZ63、苏J3KC06相撞。(建湖64号,内线(86158110)) '
+        },
+        {
+          id:'2',
+          type: "机动车",
+          unit:'射阳公安局',
+          address:'建湖县明星路与冠华路交界处北边',
+          police_time: "2023-11-22 14:20:17",
+          now_address:'报警人萧婷在建湖县明星路与冠华路交界处北边轿车苏J8MZ63、苏J3KC06相撞。(建湖64号,内线(86158110)) '
+        },
+        {
+          id:'3',
+          type: "机动车",
+          unit:'射阳公安局',
+          address:'建湖县明星路与冠华路交界处北边',
+          police_time: "2023-11-21 09:20:17",
+          now_address:'报警人萧婷在建湖县明星路与冠华路交界处北边轿车苏J8MZ63、苏J3KC06相撞。(建湖64号,内线(86158110)) '
+        },
+        {
+          id:'4',
+          type: "机动车",
+          unit:'射阳公安局',
+          address:'建湖县明星路与冠华路交界处北边',
+          police_time: "2023-12-03 14:35:17",
+          now_address:'报警人萧婷在建湖县明星路与冠华路交界处北边轿车苏J8MZ63、苏J3KC06相撞。(建湖64号,内线(86158110)) '
+        },
+        {
+          id:'5',
+          type: "机动车",
+          unit:'射阳公安局',
+          address:'建湖县明星路与冠华路交界处北边',
+          police_time: "2023-12-02 13:21:16",
+          now_address:'报警人萧婷在建湖县明星路与冠华路交界处北边轿车苏J8MZ63、苏J3KC06相撞。(建湖64号,内线(86158110)) '
+        },
+        {
+          id:'6',
+          type: "机动车",
+          unit:'射阳公安局',
+          address:'建湖县明星路与冠华路交界处北边',
+          police_time: "2023-12-04 13:20:17",
+          now_address:'报警人萧婷在建湖县明星路与冠华路交界处北边轿车苏J8MZ63、苏J3KC06相撞。(建湖64号,内线(86158110)) '
+        },
+        {
+          id:'7',
+          type: "机动车",
+          unit:'射阳公安局',
+          address:'建湖县明星路与冠华路交界处北边',
+          police_time: "2023-11-15 13:23:17",
+          now_address:'报警人萧婷在建湖县明星路与冠华路交界处北边轿车苏J8MZ63、苏J3KC06相撞。(建湖64号,内线(86158110)) '
+        }
+      ],
+      animateUp: false,
+      timer: null,
+    };
   },
-  mounted() {},
-  methods: {},
-  computed: {}
-}
+  mounted() {
+    this.init_charts();
+    this.timer = setInterval(this.scrollAnimate, 1500);
+  },
+  methods: {
+    init_charts() {
+      let charts = document.getElementById("charts_right");
+      let resize_div = document.getElementById("charts_right");
+      let myChart = echarts.init(charts);
+      // echarts表自适应
+      EleResize.on(resize_div, () => {
+        myChart.resize();
+      });
+      let option = {
+        grid: {
+          top: "3%",
+          left: "3%",
+          right: "10%",
+          bottom: "3%",
+          containLabel: true, // 距离是包含坐标轴上的文字
+        },
+        xAxis: {
+          show: false,
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: false,
+          },
+        },
+        yAxis: {
+          type: "category",
+          data: this.y_data,
+          inverse: true, // 倒叙
+          axisLabel: {
+            color: "#fff",
+          },
+          axisLine: {
+            show: false, // 轴线
+          },
+          axisTick: {
+            show: false, // 刻度线
+          },
+        },
+        series: [
+          {
+            data: this.chart_data,
+            type: "bar",
+            showBackground: true,
+            itemStyle: {
+              color: {
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#1A416B", // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "#019FFA", // 100% 处的颜色
+                  },
+                ],
+              },
+            },
+            backgroundStyle: {
+              color: "rgba(180, 180, 180, 0.2)",
+            },
+            label: {
+              show: true,
+              position: "right",
+              color: "white",
+            },
+          },
+        ],
+      };
+
+      option && myChart.setOption(option);
+    },
+    // 滚动播放
+    scrollAnimate() {
+      this.animateUp = true;
+      setTimeout(() => {
+        this.roll_list.push(this.roll_list[0]);
+        this.roll_list.shift();
+        this.animateUp = false;
+      }, 500);
+    },
+  },
+};
 </script>
 
 <style lang="scss">
 .police_status {
-  margin-top: 2vh;
+  margin-top: 1.5vh;
   width: 18vw;
-  height: 47vh;
+  height: 50vh;
   // background-color: #fff;
-
   .police_status_header {
-    height: 4vh;
-    background-image: url('@/assets/picture/bg_small_title.png');
+    width: 20vw;
+    height: 3.5vh;
+    background-image: url("@/assets/picture/bg_small_title.png");
     background-repeat: no-repeat;
     background-size: 100% 100%;
-
     .police_status_text {
+      width: 18vw;
+      height: 3.5vh;
+      color: antiquewhite;
       margin-left: 2vw;
-      font-size: 1vw;
-      color: #edf1f7;
-      line-height: 4vh;
-      text-shadow: 0 0 10px #0b4672;
+      font-size: 16px;
+      font-weight: 700;
+      line-height: 3.5vh;
+      text-shadow: 0px 0px 10px #0b4672;
+      letter-spacing: 2px;
     }
   }
-
   .police_status_body {
-    height: 43vh;
-    background-image: url('@/assets/picture/bg_5.png');
+    width: 20vw;
+    height: 46.5vh;
+    background-image: url("@/assets/picture/bg_5.png");
     background-repeat: no-repeat;
     background-size: 100% 100%;
-
     .police_status_body_charts {
-      height: 15vh;
-      // background-color: #fb3f3f;
+      width: 20vw;
+      height: 19vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .police_status_box {
+        width: 19vw;
+        height: 18vh;
+        background: #0b4672;
+        display: flex;
+        .rank_left {
+          width: 3vw;
+          height: 18vh;
+          .rank_left_item {
+            width: 3vw;
+            height: 6vh;
+            color: #ecf4f9;
+            font-size: 18px;
+            font-weight: 600;
+            text-align: center;
+            line-height: 6vh;
+          }
+          .one {
+            background: url("~@/assets/coastalMap/policeStatus/rank_one.png")
+              no-repeat;
+            background-size: 100% 100%;
+          }
+          .two {
+            background: url("~@/assets/coastalMap/policeStatus/rank_two.png")
+              no-repeat;
+            background-size: 100% 100%;
+          }
+          .three {
+            background: url("~@/assets/coastalMap/policeStatus/rank_three.png")
+              no-repeat;
+            background-size: 100% 100%;
+          }
+        }
+        .charts_right {
+          width: 16vw;
+        }
+      }
     }
-
-    .police_status_body_scroll {
-      height: 28vh;
+    // .police_status_body_scroll {
+    //   height: 28vh;
+    // }
+    .roll_body {
+      width: 20vw;
+      height: 27vh;
+      overflow: hidden;
+      .marquee-list {
+        width: 20vw;
+        height: 27vh;
+        padding: 0px;
+        li {
+          margin-left: 2%;
+          margin-right: 2%;
+          width: 96%;
+          height: 12.5vh;
+          background: url("~@/assets/coastalMap/keyPerson/key_li_back.png")
+            no-repeat;
+          background-size: 100% 100%;
+          margin-top: 1vh;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          list-style: none;
+          text-align: center;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          .roll_item {
+            display: flex;
+            position: relative;
+            width: 100%;
+            height: 12.5vh;
+            .time_box {
+              position: absolute;
+              width: 7vw;
+              height: 2vh;
+              top: 0px;
+              right: 0px;
+              color: #fff;
+              text-align: center;
+              line-height: 2vh;
+            }
+            .roll_item_left {
+              width: 5vw;
+              height: 12.5vh;
+              .roll_item_text {
+                color: #ECF4F9;
+                height: 25%;
+                text-align: center;
+                line-height: 3vh;
+              }
+            }
+            .roll_item_right {
+              width: 10vw;
+              height: 12.5vh;
+              .roll_item_value {
+                color: #EDF1F7;
+                height: 25%;
+                text-align: left;
+                line-height: 3vh;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+              }
+            }
+          }
+        }
+      }
+      .animate-up {
+        transition: all 0.8s ease-in-out;
+        transform: translateY(-20vh);
+      }
     }
   }
 }
diff --git a/src/views/coastalMap/components/resource.vue b/src/views/coastalMap/components/resource.vue
index f005503..9e64c86 100644
--- a/src/views/coastalMap/components/resource.vue
+++ b/src/views/coastalMap/components/resource.vue
@@ -112,7 +112,7 @@ export default {
         color: aliceblue;
         text-align: right;
         line-height: 4vh;
-        font-size: 0.8rem;
+        font-size: 1rem;
         font-weight: 500;
       }
       .box_item_value {
@@ -121,7 +121,7 @@ export default {
         text-align: center;
         line-height: 4vh;
         color: #00f5ff;
-        font-size: 0.8rem;
+        font-size: 1rem;
         font-weight: 800;
       }
     }
diff --git a/src/views/coastalMap/components/seaElement.vue b/src/views/coastalMap/components/seaElement.vue
index d083f35..0bae93c 100644
--- a/src/views/coastalMap/components/seaElement.vue
+++ b/src/views/coastalMap/components/seaElement.vue
@@ -52,22 +52,24 @@ export default {
 
 <style lang="scss" scoped>
 .sea {
-  margin-top: 2vh;
-  width: 18vw;
+  width: 20vw;
   height: 20vh;
-
   .sea_title {
-    height: 4vh;
+    width: 20vw;
+    height: 3.5vh;
     background-image: url('@/assets/picture/bg_small_title.png');
     background-repeat: no-repeat;
     background-size: 100% 100%;
-
     .sea_title_text {
+      width: 18vw;
+      height: 3.5vh;
+      color: antiquewhite;
       margin-left: 2vw;
-      color: #edf1f7;
-      font-size: 1vw;
-      line-height: 4vh;
-      text-shadow: 0 0 10px #0b4672;
+      font-size: 16px;
+      font-weight: 700;
+      line-height: 3.5vh;
+      text-shadow: 0px 0px 10px #0b4672;
+      letter-spacing: 2px;
     }
   }
 
@@ -77,8 +79,8 @@ export default {
     align-items: center;
     justify-content: space-around;
     height: 16vh;
-    background-image: url('@/assets/picture/bg_5.png');
-
+    background: url('~@/assets/coastalMap/box_back03.png') no-repeat;
+    background-size: 100% 100%;
     .sea_body_box {
       display: flex;
       flex-direction: column;
@@ -88,7 +90,6 @@ export default {
       height: 6vh;
       background-repeat: no-repeat;
       background-size: 100% auto;
-
       .sea_body_box_num {
         margin-left: 1vw;
         color: #00f5ff;
@@ -102,7 +103,7 @@ export default {
         color: #fff;
         font-family: PingFangSC;
         font-weight: 500;
-        font-size: 1vw;
+        font-size: 1.2rem;
       }
     }
   }
diff --git a/src/views/coastalMap/index.vue b/src/views/coastalMap/index.vue
index 7667c65..53443f8 100644
--- a/src/views/coastalMap/index.vue
+++ b/src/views/coastalMap/index.vue
@@ -23,11 +23,11 @@
     <!-- 左边区域 -->
     <div class="left_box">
       <Resource ref="resource"></Resource>
-      <KeyPerson ref="priority"></KeyPerson>
+      <KeyPerson ref="keyPerson"></KeyPerson>
     </div>
     <!-- 右边区域 -->
     <div class="right_box">
-      <PoliceSpread ref="police"></PoliceSpread>
+      <PoliceSpread ref="policeSpread"></PoliceSpread>
       <SeaElement ref="sea"></SeaElement>
       <PoliceStatus ref="PoliceStatus"></PoliceStatus>
     </div>
@@ -44,11 +44,13 @@
       </div>
     </div>
     <!-- 弹窗组件 -->
-    <KeyInformantion v-if="play" @cardClose="onCardClose"></KeyInformantion>
-    <div v-else></div>
+    <!-- <KeyInformantion v-if="play" @cardClose="onCardClose"></KeyInformantion> -->
+    <!-- <div v-else></div> -->
     <!-- 自定义遮罩层 -->
-    <div class="overlay" v-if="play"></div>
-    <div v-else></div>
+    <!-- <div class="overlay" v-if="play"></div>
+    <div v-else></div> -->
+    <!-- -->
+    <div class="turn_btn"></div>
   </div>
 </template>
 <script>
@@ -61,7 +63,7 @@ import KeyPerson from './components/keyPerson' // * 重点人员
 import PoliceSpread from './components/policeSpread.vue' // * 警力分布
 import SeaElement from './components/seaElement.vue' // * 涉海要素
 import PoliceStatus from './components/policeStatus.vue' // * 警情统计
-import KeyInformantion from './components/keyInformantion.vue' //弹窗组件
+// import KeyInformantion from './components/keyInformantion.vue' //弹窗组件
 export default {
   name: 'CoastalMap',
   components: {
@@ -71,7 +73,7 @@ export default {
     PoliceSpread,
     SeaElement,
     PoliceStatus,
-    KeyInformantion
+    //KeyInformantion
   },
   data() {
     return {
@@ -216,31 +218,31 @@ export default {
     position: absolute;
     top: 10vh;
     right: 1vw;
-    width: 18vw;
+    width: 20vw;
     height: 89vh;
     // background: #ad337f;
   }
   .point_list {
     position: absolute;
     top: 10vh;
-    right: 20vw;
+    right: 21vw;
     width: 5vw;
-    height: 25vw;
+    height: 20vh;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
 
     .point_list_item {
-      width: 5vw;
-      height: 5vw;
+      width: 4vw;
+      height: 4vw;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       align-items: center;
 
       .point_icon {
-        width: 5vw;
-        height: 5vw;
+        width: 4vw;
+        height: 4vw;
         background-image: url('@/assets/picture/bg_point.png');
         background-size: 100% 100%;
         background-repeat: no-repeat;
@@ -249,8 +251,8 @@ export default {
         align-items: center;
 
         .icon_body {
-          width: 2vw;
-          height: 3vw;
+          width: 1.2vw;
+          height: 4vh;
           background-size: 100% 100%;
           background-repeat: no-repeat;
         }