diff --git a/src/views/coastalMap/components/floorInform.vue b/src/views/coastalMap/components/floorInform.vue
new file mode 100644
index 0000000..4ecf581
--- /dev/null
+++ b/src/views/coastalMap/components/floorInform.vue
@@ -0,0 +1,553 @@
+<template>
+  <div class="add" v-if="show">
+    <!-- 户室信息 -->
+    <div class="X2" @click="deleteinfo"></div>
+    <div class="build_title">
+      <div class="header_icon"></div>
+      <div class="title_text">户室信息</div>
+    </div>
+    <!-- 室内图片 -->
+    <div class="build_picture">
+      <div class="picture_left"></div>
+      <div class="picture_right">
+        <div class="build_box_for">
+          <div class="left">
+            <div class="build_box_left">地址</div>
+            <div class="build_box_left">所在网格</div>
+            <div class="build_box_left">房屋类型</div>
+            <div class="build_box_left">是否出租</div>
+            <div class="build_box_left">所在警务区</div>
+          </div>
+          <div class="right">
+            <div
+              class="build_box_right"
+              :style="{ color: back_change() }"
+              :title="roll_list.homeInfo.address"
+            >
+              {{ roll_list.homeInfo.address }}
+            </div>
+            <div class="build_box_right" :style="{ color: back_change() }">
+              {{ houseValue.policeStationCode || '320924760101' }}
+            </div>
+            <div class="build_box_right" :style="{ color: back_change('1') }">
+              {{ roll_list.homeInfo.type }}
+            </div>
+            <div class="build_box_right" :style="{ color: back_change('2') }">
+              {{ roll_list.homeInfo.isRent }}
+            </div>
+            <div class="build_box_right" :style="{ color: back_change() }">
+              {{ houseValue.policeDistrictCode || '320924760101' }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 房主信息 -->
+    <div class="build_title">
+      <div class="header_icon"></div>
+      <div class="title_text">房主信息</div>
+    </div>
+    <!-- 照片信息 -->
+    <div class="housepeople_info">
+      <img
+        v-if="roll_list.actualUserInfo?.userPic"
+        class="housepeople_info_left"
+        :src="baseUrl + roll_list.actualUserInfo.userPic"
+      />
+      <img v-else class="housepeople_info_left" :src="img" />
+      <div class="housepeople_info_right">
+        <div class="info_right_for">
+          <div class="for_left">姓名</div>
+          <div class="for_right">
+            {{ roll_list.actualUserInfo?.userName || '' }}
+          </div>
+        </div>
+        <div class="info_right_for">
+          <div class="for_left">联系电话</div>
+          <div class="for_right">
+            {{ roll_list.actualUserInfo?.phone || '' }}
+          </div>
+        </div>
+        <div class="info_right_for">
+          <div class="for_left">证件号码</div>
+          <div
+            class="for_right"
+            @click="jumpRecord(roll_list.actualUserInfo?.idCard)"
+          >
+            {{ roll_list.actualUserInfo?.idCard || '' }}
+          </div>
+        </div>
+        <div class="info_right_for">
+          <div class="for_left">户籍地址</div>
+          <div class="for_right">
+            {{ roll_list.actualUserInfo?.houseHoldAddress || '' }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 实有人口 重点人员 户在人不在 -->
+    <div class="people_bottom">
+      <div class="people1">
+        <div class="dit"></div>
+        <div class="people1_text">实有人口</div>
+        <div class="people1_number">
+          {{ roll_list.userInfos === null ? 0 : roll_list.userInfos.length }}
+        </div>
+      </div>
+      <div class="people1">
+        <div class="dit"></div>
+        <div class="people1_text">重点人员</div>
+        <div class="people1_number">
+          {{
+            roll_list.impUserInfos === null ? 0 : roll_list.impUserInfos.length
+          }}
+        </div>
+      </div>
+      <div class="people1">
+        <div class="dit"></div>
+        <div class="people1_text">户在人不在</div>
+        <div class="people1_number">
+          {{
+            roll_list.householdInUserInfos === null
+              ? 0
+              : roll_list.householdInUserInfos.length
+          }}
+        </div>
+      </div>
+    </div>
+    <!-- 滚动 -->
+    <div class="roll_body" v-if="roll_list.userInfos !== null">
+      <ul class="marquee-list" :class="{ 'animate-up': animateUp }">
+        <li
+          v-for="item in roll_list.userInfos"
+          :key="item.id"
+          @mouseenter="stop()"
+          @mouseleave="start()"
+        >
+          <div class="roll_item_left">
+            <div class="roll_item_pic">
+              <img
+                class="peopleImg"
+                :src="item.userPic ? `${baseUrl + item.userPic}` : img"
+                alt=""
+              />
+            </div>
+          </div>
+          <div class="roll_item_right">
+            <div class="person_type one_type" v-if="item.actualUserTypeCn">
+              {{ item.actualUserTypeCn }}
+            </div>
+            <!-- 信息展示 -->
+            <div class="right_text">
+              <div class="right_text_item">人员姓名:</div>
+              <div class="right_text_item">联系电话:</div>
+              <div class="right_text_item">证件号码:</div>
+              <div class="right_text_item">户籍地址:</div>
+            </div>
+            <div class="right_value">
+              <div class="right_value_item">{{ item.userName }}</div>
+              <div class="right_value_item">{{ item.phone }}</div>
+              <div class="right_value_item" @click="jumpRecord(item.idCard)">
+                {{ item.idCard }}
+              </div>
+              <div class="right_value_item">
+                {{ item.houseHoldAddress }}
+              </div>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div class="roll_body" v-else>
+      <ul class="marquee-list">
+        <li>
+          <div class="roll_item_left">
+            <div class="roll_item_pic">
+              <img class="peopleImg" :src="img" />
+            </div>
+          </div>
+          <div class="roll_item_right">
+            <div class="right_text">
+              <div class="right_text_item">人员姓名:</div>
+              <div class="right_text_item">联系电话:</div>
+              <div class="right_text_item">证件号码:</div>
+              <div class="right_text_item">户籍地址:</div>
+            </div>
+            <div class="right_value">
+              <div class="right_value_item"></div>
+              <div class="right_value_item"></div>
+              <div class="right_value_item"></div>
+              <div class="right_value_item"></div>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import { jumpSyetem } from '@/utils/jumpSystem'
+
+export default {
+  name: 'FloorInform',
+  props: {
+    houseValue: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      show: false,
+      animateUp: false,
+      baseUrl: 'http://50.146.63.224:8118',
+      roll_list: {},
+      img: require('@/assets/picture/icon_householder.png'),
+      timer: null,
+      unit: null
+    }
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    open(val, roomInfo) {
+      console.log(val, roomInfo, '户室组件接收的数据')
+      this.unit = val
+      this.roll_list = roomInfo
+      this.show = true
+      if (roomInfo.userInfos && roomInfo.userInfos.length > 2) {
+        this.clearTimer()
+        this.scrollAnimate()
+      }
+    },
+    back_change(type) {
+      switch (type) {
+        case '1':
+          return `#37FDC7`
+        case '2':
+          return `#00F5FF`
+      }
+    },
+    scrollAnimate() {
+      console.log(
+        this.roll_list.userInfos !== null && this.roll_list.userInfos.length > 2
+      )
+      if (
+        this.roll_list.userInfos !== null &&
+        this.roll_list.userInfos.length > 2
+      ) {
+        this.timer = setInterval(() => {
+          this.animateUp = true
+          setTimeout(() => {
+            this.roll_list.userInfos.push(this.roll_list.userInfos[0])
+            this.roll_list.userInfos.shift()
+            this.animateUp = false
+          }, 500)
+        }, 4000)
+      } else {
+        this.timer = null
+      }
+    },
+    clearTimer() {
+      if (this.timer) {
+        clearInterval(this.timer)
+        this.timer = null
+      }
+    },
+    deleteinfo() {
+      this.show = false
+      clearInterval(this.timer)
+    },
+    stop() {
+      clearInterval(this.timer)
+    },
+    start() {
+      if (this.roll_list.userInfos && this.roll_list.userInfos.length > 2) {
+        this.scrollAnimate()
+      }
+    },
+    jumpRecord(card) {
+      jumpSyetem(card)
+    }
+  },
+  beforeDestroy() {
+    this.clearTimer()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.add {
+  position: absolute;
+  top: 0vh;
+  left: 20vw;
+  width: 20vw;
+  height: 72vh;
+  background: $popupBack url('@/assets/house-hza/bg7.png') no-repeat;
+  background-size: 100% 100%;
+  padding-left: 1vw;
+
+  .X2 {
+    width: 0.8vw;
+    height: 1.8vh;
+    position: absolute;
+    top: 0.5vh;
+    right: 0.5vw;
+    background-image: url('@/assets/house-hza/bg9.png');
+    background-size: 100% 100%;
+    &:hover {
+      background-color: #07e2d0;
+    }
+  }
+  .build_title {
+    width: 18vw;
+    height: 3.5vh;
+    display: flex;
+    .header_icon {
+      width: 1vw;
+      height: 2vh;
+      margin-top: 1.7vh;
+      background-image: url('@/assets/house-hza/bg17.png');
+      background-size: 100% 100%;
+    }
+    .title_text {
+      width: 20vw;
+      height: 3.5vh;
+      color: antiquewhite;
+      margin-left: 1vw;
+      font-size: 16px;
+      font-weight: 700;
+      line-height: 3.5vh;
+      text-shadow: 0px 0px 10px #0b4672;
+      letter-spacing: 2px;
+      margin-top: 1vh;
+    }
+  }
+  .build_picture {
+    width: 18vw;
+    height: 18vh;
+    margin-top: 1vh;
+    display: flex;
+    margin-bottom: 1vh;
+    .picture_left {
+      width: 6vw;
+      height: 18vh;
+      background: url('@/assets/icon_house_slices/icon_house@2x.png') no-repeat;
+      background-size: 100% 100%;
+      text-align: center;
+    }
+    .picture_right {
+      width: 11.5vw;
+      height: 18vh;
+      margin-left: 0.5vw;
+
+      .build_box_for {
+        display: flex;
+        width: 11vw;
+        .left {
+          width: 4vw;
+          height: 18vh;
+        }
+        .build_box_left {
+          width: 4vw;
+          height: 3.2vh;
+          background-color: #04548a;
+          padding-left: 0.5vw;
+          color: antiquewhite;
+          padding-top: 0.5vh;
+          font-size: 12px;
+        }
+        .build_box_right {
+          width: 7.5vw;
+          height: 3.2vh;
+          font-size: 0.8rem;
+          background-image: url('@/assets/house-hza/bg10.png');
+          background-size: 100% 100%;
+          padding-top: 0.5vh;
+          padding-left: 0.5vw;
+          color: antiquewhite;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  .housepeople_info {
+    width: 18vw;
+    height: 13vh;
+    background-color: #05385d;
+    margin-top: 1vh;
+    padding-top: 1vh;
+    padding-left: 1vh;
+    display: flex;
+    .housepeople_info_left {
+      width: 4vw;
+      height: 11vh;
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      object-fit: cover;
+    }
+    .housepeople_info_right {
+      width: 13vw;
+      height: 11vh;
+      padding-left: 0.5vw;
+    }
+    .info_right_for {
+      height: 2vh;
+      width: 12.5vw;
+      display: flex;
+      margin-bottom: 1vh;
+      .for_left {
+        width: 3.5vw;
+        height: 2vh;
+        color: #ecf4f9;
+      }
+      .for_right {
+        height: 2vh;
+        width: 8vw;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: #fff;
+      }
+    }
+  }
+  .people_bottom {
+    width: 18vw;
+    height: 4vh;
+    margin-left: 0;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 1vh;
+    .people1 {
+      width: 5.5vw;
+      height: 4vh;
+      background-image: url('@/assets/house-hza/bg-6.png');
+      background-size: 100% 100%;
+      text-align: center;
+      display: flex;
+      .people1_text {
+        font-size: 0.6vw;
+        margin-top: 1vh;
+        margin-left: 0.2vw;
+        color: #fff;
+      }
+      .people1_number {
+        margin-left: 0.8vw;
+        margin-top: 0.5vh;
+        font-size: 1.3rem;
+        color: #fff;
+      }
+
+      .dit {
+        width: 0.3vw;
+        height: 0.6vh;
+        border-radius: 50%;
+        background-color: #00f5ff;
+        margin-top: 0.8vw;
+        margin-left: 0.5vw;
+      }
+    }
+  }
+  .roll_body {
+    width: 18vw;
+    height: 24vh;
+    overflow: hidden;
+    margin-top: 1vh;
+    .marquee-list {
+      padding: 0;
+      width: 18vw;
+      height: 24vh;
+
+      li {
+        width: 100%;
+        background: url('@/assets/house-hza/bg-6.png') no-repeat;
+        background-size: 100% 100%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        list-style: none;
+        text-align: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 0.5vh;
+        .roll_item_left {
+          width: 5vw;
+          height: 11vh;
+          margin-left: 0.5vw;
+          .roll_item_pic {
+            width: 4vw;
+            height: 9vh;
+            margin-top: 1vh;
+            .peopleImg {
+              width: 4vw;
+              height: 9vh;
+            }
+          }
+        }
+        .roll_item_right {
+          width: 14vw;
+          height: 9vh;
+          position: relative;
+          display: flex;
+          .person_type {
+            position: absolute;
+            width: 3.5vw;
+            height: 2vh;
+            top: 0px;
+            right: 0px;
+            color: #061122;
+            text-align: center;
+            line-height: 2vh;
+            font-size: 0.6vw;
+          }
+          .one_type {
+            background: #ffc426;
+          }
+          .two_type {
+            background: #00f5ff;
+          }
+          .three_type {
+            background: #a357ff;
+          }
+          .right_text {
+            width: 5vw;
+            height: 9vh;
+            .right_text_item {
+              width: 5vw;
+              height: 2.6vh;
+              color: #ecf4f9;
+              font-size: 10px;
+            }
+          }
+          .right_value {
+            width: 8vw;
+            height: 10vh;
+            .right_value_item {
+              width: 8vw;
+              height: 2.6vh;
+              color: #edf1f7;
+              font-size: 12px;
+              text-align: left;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              overflow: hidden;
+              cursor: pointer;
+              &:nth-child(3) {
+                color: #00f5ff;
+              }
+            }
+          }
+        }
+      }
+    }
+    .animate-up {
+      transition: all 0.8s ease-in-out;
+      transform: translateY(-20vh);
+    }
+  }
+}
+</style>
diff --git a/src/views/coastalMap/components/travel.vue b/src/views/coastalMap/components/travel.vue
new file mode 100644
index 0000000..b533354
--- /dev/null
+++ b/src/views/coastalMap/components/travel.vue
@@ -0,0 +1,113 @@
+<template>
+  <div class="detail">
+    <div class="contents">
+      <div class="fy-center row">
+        <div class="label fy-center">人员姓名</div>
+        <div class="content line-1">{{ data.impUserName }}</div>
+      </div>
+
+      <div class="fy-center row">
+        <div class="label fy-center">证件号码</div>
+        <div class="content line-1">{{ data.impUserIdCard }}</div>
+      </div>
+      <div class="fy-center row">
+        <div class="label fy-center">人员类型</div>
+        <div class="content line-1">{{ data.impUserSubTypeCn }}</div>
+      </div>
+      <div class="fy-center row">
+        <div class="label fy-center">定位时间</div>
+        <div class="content line-1">
+          {{ data.kv.定位时间 || data.warningTime }}
+        </div>
+      </div>
+      <!-- <div class="fy-center row">
+        <div class="label fy-center">经过位置</div>
+        <div class="content line-1">{{ data}}</div>
+      </div> -->
+      <div class="fy-center row">
+        <div class="label fy-center">活动信息</div>
+        <div class="content line-1">{{ data.activityMessage }}</div>
+      </div>
+      <div class="fy-center row">
+        <div class="label fy-center warning">异常信息</div>
+        <div class="content line-1 warning">{{ data.kv.异常信息 }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    data: Object
+  },
+  data() {
+    return {}
+  },
+  created() {},
+  methods: {}
+}
+</script>
+<style lang="scss" scoped>
+.detail {
+  position: relative;
+  color: white;
+  overflow: hidden;
+  display: flex;
+  .contents {
+    width: 100%;
+    .row {
+      margin-top: 0.4vh;
+      display: flex;
+      .grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-gap: 5px;
+      }
+
+      .label {
+        width: 6vw;
+        height: 44px;
+        background-color: #093979;
+        margin-right: 1px;
+        padding-left: 12px;
+      }
+      .content {
+        padding-left: 12px;
+        height: 44px;
+        line-height: 44px;
+        background-color: rgba(9, 57, 121, 0.3);
+        &.even {
+          background-color: rgba(9, 57, 121, 0.5);
+        }
+      }
+
+      &:first-child {
+        margin-top: 0;
+      }
+      &:last-child .warning {
+        height: auto;
+      }
+      &:last-child .line-1 {
+        overflow: auto;
+        text-overflow: clip;
+        white-space: normal;
+        flex: 1;
+        width: 1px;
+      }
+    }
+  }
+
+  // .h-144 {
+  //   height: 14.4vh;
+  // }
+  // .w-530 {
+  //   width: 530px;
+  // }
+  // .ml-12 {
+  //   margin-left: 0.6vw;
+  // }
+  // .overflow-auto {
+  //   // overflow: auto;
+  // }
+}
+</style>