hzahza

src/api/facility.js

@@ -1,4 +1,4 @@
-import http from '@/utils/http'
+import request from '../utils/request'
 import { getToken } from '@/utils/token'
 import axios from 'axios'
 
@@ -6,7 +6,7 @@ const token = getToken()
 
 // * 登录接口获取 token
 export const login = () => {
-  return http.get('/api/v1/login', {
+  return request.get('/api/v1/login', {
     params: {
       username: 'admin',
       password: 'AF7548EEDFF8e737C0E4B2A669497290',
@@ -17,26 +17,26 @@ export const login = () => {
 
 // * 获取设备信息列表
 export const getDeviceListAPI = (params) => {
-  return http.get(
+  return request.get(
     `/api/v1/device/channellist?start=${params.start}&limit=${params.limit}&online=${params.online}&token=${token}`
   )
 }
 
 // * 获取视频列表
 export const getVideoListAPI = (channel) => {
-  return http.get(
+  return request.get(
     `/api/v1/stream/start?serial=${'32092400002005063063'}&channel=${channel}&timeout=${500}&check_channel_status=${true}&token=${token}`
   )
 }
 
 // * 退出登录
 export const logoutAPI = () => {
-  return http.get('/api/v1/logout')
+  return request.get('/api/v1/logout')
 }
 
 // * 关闭视频流
 export const getCloseVideoAPI = (channel) => {
-  return http.get(
+  return request.get(
     `/api/v1/stream/stop?serial=${'32092400002005063063'}&channel=${channel}&token=${token}`
   )
 }

src/utils/http.js

@@ -1,86 +1,39 @@
 import axios from 'axios'
+// import { getToken } from '@/utils/token'
 // * 海康平台
-import vm from '../main'
+// const baseURL = 'http://50.146.63.43:15000/'
+const baseURL = 'http://50.146.63.43:20000/'
 axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
 const http = axios.create({
-  // baseURL: 'http://50.146.63.43:1129/hjapi',
+  baseURL,
-  //baseURL: 'http://121.41.91.94:12002/hjapi',
+  timeout: 30000
-  //baseURL: `http://${window.location.host}/hjapi`,
-  // baseURL: 'http://121.41.91.94:12524/hjapi/', //外网
-  baseURL: 'http://50.146.63.43:20000/',
-  timeout: 50000,
-  headers: { 'content-type': 'application/json' }
 })
-// request拦截器
+// todo 封装基本拦截
+// * 请求拦截器
 http.interceptors.request.use(
   (config) => {
-    // // 是否需要设置 token
-    // const isToken = (config.headers || {}).isToken === false
-    // // 是否需要防止数据重复提交
-    // if (getToken() && !isToken) {
-    //   config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
-    // }
-    //防止重复提交
     if (config) {
+      // config.headers['Authorization'] = 'Bearer ' + getToken()
       return config
     }
   },
   (error) => {
-    console.log(error)
+    return Promise.reject(error)
-    Promise.reject(error)
   }
 )
-// response 拦截器
+
-// 可以在接口响应后统一处理结果
+// * 响应拦截器
 http.interceptors.response.use(
   (response) => {
-    if (response.data) {
+    if (response.status !== 200) {
-      switch (response.data.code) {
+      return Promise.reject(response.message)
-        case 200:
-          // 如果是返回的文件
-          if (response.config.responseType === 'blob') {
-            return response.data
-          }
-          // 兼容服务端返回的字符串数据
-          if (typeof response.data === 'string') {
-            response.data = response.data
-              ? JSON.parse(response.data)
-              : response.data
-          }
-          return response.data
-
-        case 401:
-          if (vm.$route.name !== 'login') {
-            vm.$message.warning({
-              content: '身份认证信息已失效，请重新登录。',
-              duration: 2,
-              onClose: () => {
-                vm.$router.push({ name: 'login' })
-              }
-            })
-          } else {
-            return Promise.reject()
-          }
-          break
-        case 403:
-          vm.$message.warning({
-            content: response.data.msg,
-            duration: 3
-          })
-          break
-        case 500:
-          // 如果是返回的文件
-          vm.$message.warning({
-            content: response.data.msg,
-            duration: 3
-          })
-          return response.data
-      }
     }
+    return response.data
   },
   (error) => {
-    console.log('err' + error) // for debug
+    if (axios.isCancel(error)) {
-
+      console.log(error)
+    }
     return Promise.reject(error)
   }
 )

src/utils/request.js

@@ -3,11 +3,10 @@ import vm from '../main'
 import { getToken } from '@/utils/auth'
 axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
 const request = axios.create({
-  baseURL: 'http://50.146.63.43:1129/hjapi',
+  // baseURL: 'http://50.146.63.43:1129/hjapi',
-  //baseURL: 'http://121.41.91.94:12002/hjapi',
+  // baseURL: 'http://121.41.91.94:12002/hjapi',
   //baseURL: `http://${window.location.host}/hjapi`,
-  // baseURL: 'http://121.41.91.94:12524/hjapi/', //外网
+  baseURL: 'http://121.41.91.94:12524/hjapi/', //外网
-  // baseURL: 'http://121.41.91.94:12524/hjapi/', //外网
   timeout: 50000,
   headers: { 'content-type': 'application/json' }
 })
@@ -49,7 +48,7 @@ request.interceptors.response.use(
 
         case 401:
           if (vm.$route.name !== 'login') {
-            vm.$message.warning({
+            vm.$Message.warning({
               content: '身份认证信息已失效，请重新登录。',
               duration: 2,
               onClose: () => {
@@ -61,14 +60,14 @@ request.interceptors.response.use(
           }
           break
         case 403:
-          vm.$message.warning({
+          vm.$Message.warning({
             content: response.data.msg,
             duration: 3
           })
           break
         case 500:
           // 如果是返回的文件
-          vm.$message.warning({
+          vm.$Message.warning({
             content: response.data.msg,
             duration: 3
           })

src/views/buildUse/html.html

@@ -1,371 +0,0 @@
-<!-- 民警工作台 -->
-<template>
-  <div class="bench_body">
-    <!-- 综合查询 -->
-    <div class="search">
-      <div class="search_item">
-        <div class="search_title">综合查询</div>
-        <!-- 下拉 input btn -->
-        <div class="search_body">
-          <!-- 下拉盒子 -->
-          <div class="select"></div>
-          <el-input
-            class="search_input"
-            placeholder="输入并搜索"
-            v-model="search"
-            clearable
-          ></el-input>
-          <el-button icon="el-icon-search"></el-button>
-        </div>
-        <!-- 最近搜索 -->
-        <div class="search_history">
-          <div class="history_title">最近搜索</div>
-          <!-- 展示最近搜索 -->
-          <div class="history_body"></div>
-        </div>
-      </div>
-    </div>
-    <!-- 菜单区域 -->
-    <div class="menu">
-      <div class="menu_box">
-        <div v-for="item in menu_list" :key="item.menuId" class="menu_item">
-          <div class="menu_icon">
-            <!-- 通过item.children.length判断是否含有子目录, 有无子目录导航展示方式不同 -->
-            <div
-              v-if="item.children.length == 0"
-              class="menu_icon_item"
-              :style="{ backgroundImage: back_change(item.icon) }"
-            ></div>
-            <!-- 该目录下有子目录 -->
-            <div v-else class="menu_icon_list" @click="check_menu(item)">
-              <!-- 子目录非放大展示 -->
-              <div
-                class="menu_icon_list_item_parent"
-                v-for="val in item.children"
-                :key="val.menuId"
-                :style="{ backgroundImage: color_change(item.menuName) }"
-              >
-                <div
-                  class="menu_icon_list_item"
-                  :style="{ backgroundImage: item_change(val.icon) }"
-                ></div>
-              </div>
-            </div>
-          </div>
-          <div class="menu_text">{{ item.menuName }}</div>
-        </div>
-      </div>
-    </div>
-    <!-- 一级目录有子目录展示详情弹窗 -->
-    <MenuDialog ref="menuDialog"></MenuDialog>
-  </div>
-</template>
-<script>
-import { get_menu } from "@/api/policeWorkbench";
-import { check_icon } from "./checkicon";
-import { check_back } from "./checkback"
-import MenuDialog from "./components/menuDialog";
-export default {
-  name: "policeWorkbench",
-  components: {
-    MenuDialog,
-  },
-  data() {
-    return {
-      search: "",
-      menu_list: [], // 导航数据
-    };
-  },
-  created() {
-    this.get_menu();
-  },
-  methods: {
-    get_menu() {
-      get_menu().then((res) => {
-        // console.log("res", res);
-        this.menu_list = this.change_tree(res.data);
-        console.log("this.menu_list", this.menu_list);
-      });
-    },
-    // 处理菜单数据,将数组转化成树形数据
-    change_tree(data) {
-      const obj = {}; // 重新存储数据
-      const res = []; // 存储最后结果
-      const len = data.length;
-      const menuId = "menuId";
-      const parentId = "parentId";
-      const children = "children";
-      // 遍历原始数据data，构造obj数据，键名为menuId，值为数据
-      for (let i = 0; i < len; i++) {
-        obj[data[i][menuId]] = data[i];
-      }
-      // 遍历原始数据
-      for (let j = 0; j < len; j++) {
-        const list = data[j];
-        // 通过每条数据的 pid 去obj中查询
-        const parentList = obj[list[parentId]];
-        if (parentList) {
-          // 根据 pid 找到的是父节点，list是子节点，
-          if (!parentList[children]) {
-            parentList[children] = [];
-          }
-          // 将子节点插入 父节点的 children 字段中
-          parentList[children].push(list);
-        } else {
-          // pid 找不到对应值，说明是根结点，直接插到根数组中
-          res.push(list);
-        }
-      }
-      return res;
-    },
-    // 根据后端返回字段对应不同背景图
-    back_change(text) {
-      // 实为不合理, 理应后端返回图片地址的, 此方法后续理应废除
-      switch (text) {
-        case "nested":
-          return `url(${require("@/assets/policeWorkbench/menu_daiban.png")})`;
-        case "eye-open":
-          return `url(${require("@/assets/policeWorkbench/menu_quanju.png")})`;
-        case "server":
-          return `url(${require("@/assets/policeWorkbench/menu_jingwu.png")})`;
-        case "druid":
-          return `url(${require("@/assets/policeWorkbench/menu_shuju.png")})`;
-        case "eye":
-          return `url(${require("@/assets/policeWorkbench/menu_yingjian.png")})`;
-        case "select":
-          return `url(${require("@/assets/policeWorkbench/menu_shipin.png")})`;
-      }
-    },
-    // 根据后端返回字段对应不同背景图
-    item_change(text) {
-      // 调取icon图片映射
-      let url = check_icon(text);
-      return url;
-    },
-    // 根据后端返回字段对应不同背景色
-    color_change(text) {
-      let url = check_back(text);
-      return url;
-    },
-    // 点击打开弹窗展示子目录详情
-    check_menu(item) {
-      console.log("item", item);
-      this.$refs.menuDialog.open(item);
-    },
-  },
-};
-</script>
-<style lang="less" scoped>
-.bench_body {
-  width: 100vw;
-  height: 84vh;
-  //   background: sandybrown;
-  .search {
-    width: 100vw;
-    height: 18vh;
-    // border: 0.1px solid #0164ca;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    .search_item {
-      width: 40vw;
-      height: 18vh;
-      //   border: 0.1px solid #0164ca;
-      /* 综合查询 */
-      .search_title {
-        width: 40vw;
-        height: 5vh;
-        text-align: center;
-        line-height: 5vh;
-        font-size: 30px;
-        color: aliceblue;
-        font-weight: 600;
-        letter-spacing: 2px;
-      }
-      .search_body {
-        width: 40vw;
-        height: 8vh;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        .select {
-          width: 5vw;
-          height: 6vh;
-          border: 1px solid #77c2fb;
-          border-radius: 4px 0px 0px 4px;
-          border-right: none;
-          background: #143983;
-        }
-        .el-button {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          font-size: 17px;
-          width: 4vw;
-          height: 6vh;
-          border-radius: 0px 4px 4px 0px;
-          color: #fff;
-          background: #0c276c;
-          border: 1px solid #77c2fb;
-          border-left: none;
-          position: relative;
-          overflow: hidden;
-          &:before {
-            content: "";
-            position: absolute;
-            top: -100%;
-            left: -50%;
-            width: 150%;
-            height: 2px;
-            background-color: #fff;
-            box-shadow: 0 0 4px 1px #fff;
-            transform: rotateZ(-45deg);
-          }
-          &:hover::before {
-            transition: 0.7s;
-            top: 200%;
-            left: 50%;
-          }
-        }
-        // .el-button:hover {
-        //   background: #0164ca;
-        // }
-        /deep/.search_input.el-input.el-input--suffix {
-          height: 6vh;
-          width: 30vw;
-        }
-        /deep/.search_input.el-input {
-          .el-input__inner {
-            color: #fff;
-            height: 6vh;
-            border: 1px solid #77c2fb;
-            border-radius: 0px 0px 0px 0px;
-            border-left: none;
-            border-right: none;
-            background: linear-gradient(
-              to right,
-              #143983,
-              #113078 20%,
-              #0c276c 80%
-            ) !important;
-          }
-        }
-      }
-      .search_history {
-        width: 39vw;
-        height: 3vh;
-        margin-left: 0.5vw;
-        display: flex;
-        .history_title {
-          color: aliceblue;
-          height: 3vh;
-          line-height: 3vh;
-        }
-      }
-    }
-  }
-  .menu {
-    width: 100vw;
-    height: 62vh;
-    // border: 0.1px solid #0164ca;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    .menu_box {
-      width: 45vw;
-      height: 60vh;
-      // border: 0.1px solid #0164ca;
-      overflow-y: scroll;
-      display: flex;
-      justify-content: flex-start;
-      align-content: flex-start;
-      flex-wrap: wrap;
-      .menu_item {
-        width: 6vw;
-        height: 15vh;
-        margin-left: 1.5vw;
-        margin-right: 1.5vw;
-        margin-top: 2.5vh;
-        margin-bottom: 2.5vh;
-        .menu_icon {
-          width: 6vw;
-          height: 12vh;
-          // border: 0.1px solid #0164ca;
-          cursor: pointer;
-          /*动态控制无子目录导航背景图 */
-          .menu_icon_item {
-            width: 6vw;
-            height: 12vh;
-            background-size: 100% 100%;
-          }
-          /*有子目录导航 */
-          .menu_icon_list {
-            width: 6vw;
-            height: 12vh;
-            overflow-y: scroll;
-            display: flex;
-            justify-content: flex-start;
-            align-content: flex-start;
-            flex-wrap: wrap;
-            background: url("~@/assets/policeWorkbench/menu_item_back.png")
-              no-repeat;
-            background-size: 100% 100%;
-            .menu_icon_list_item_parent {
-              width: 1.5vw;
-              height: 3vh;
-              // border: 0.1px solid #0164ca;
-              margin-top: 0.5vh;
-              margin-bottom: 0.5vh;
-              margin-left: 0.25vw;
-              margin-right: 0.25vw;
-              // background: url("~@/assets/policeWorkbench/menu_quanju.png")
-              //   no-repeat;
-              background-size: 100% 100%;
-              background-size: 100% 100%;
-            }
-            .menu_icon_list_item {
-              width: 1.5vw;
-              height: 3vh;
-              // border: 0.1px solid #0164ca;
-              // background: url("~@/assets/policeWorkbench/menu_quanju.png")
-              //   no-repeat;
-              background-size: 100% 100%;
-            }
-          }
-          .menu_icon_list::-webkit-scrollbar {
-            display: none;
-            width: 6px;
-            background-color: #5e666a;
-            border-radius: 4px;
-          }
-          .menu_icon_list::-webkit-scrollbar-thumb {
-            display: none;
-            width: 5px;
-            background-color: #3c4b4a;
-            border-radius: 4px;
-          }
-        }
-        .menu_text {
-          width: 6vw;
-          height: 3vh;
-          text-align: center;
-          line-height: 3vh;
-          color: aliceblue;
-        }
-      }
-    }
-    .menu_box::-webkit-scrollbar {
-      display: none;
-      width: 6px;
-      background-color: #5e666a;
-      border-radius: 4px;
-    }
-    .menu_box::-webkit-scrollbar-thumb {
-      display: none;
-      width: 5px;
-      background-color: #3c4b4a;
-      border-radius: 4px;
-    }
-  }
-}
-</style>

src/views/buildUse/index.vue

@@ -118,29 +118,29 @@ export default {
       console.log(id, 'lll')
       switch (id) {
         case '1':
-          return `url(${require('../../assets/building-picture-hza/icon1.png')})`
+          return `url(${require('@/assets/building-picture-hza/icon1.png')})`
         case '2':
-          return `url(${require('../../assets/building-picture-hza/icon6.png')})`
+          return `url(${require('@/assets/building-picture-hza/icon6.png')})`
         case '3':
-          return `url(${require('../../assets/building-picture-hza/icon5.png')})`
+          return `url(${require('@/assets/building-picture-hza/icon5.png')})`
         case '4':
-          return `url(${require('../../assets/building-picture-hza/icon4.png')})`
+          return `url(${require('@/assets/building-picture-hza/icon4.png')})`
         case '5':
-          return `url(${require('../../assets/building-picture-hza/icon3.png')})`
+          return `url(${require('@/assets/building-picture-hza/icon3.png')})`
         case '6':
-          return `url(${require('../../assets/building-picture-hza/icon2.png')})`
+          return `url(${require('@/assets/building-picture-hza/icon2.png')})`
         case '7':
-          return `url(${require('../../assets/building-picture-hza/icon1.png')})`
+          return `url(${require('@/assets/building-picture-hza/icon1.png')})`
         case '8':
-          return `url(${require('../../assets/building-picture-hza/icon1.png')})`
+          return `url(${require('@/assets/building-picture-hza/icon1.png')})`
         case '9':
-          return `url(${require('../../assets/building-picture-hza/icon1.png')})`
+          return `url(${require('@/assets/building-picture-hza/icon1.png')})`
         case '10':
-          return `url(${require('../../assets/building-picture-hza/icon1.png')})`
+          return `url(${require('@/assets/building-picture-hza/icon1.png')})`
         case '11':
-          return `url(${require('../../assets/building-picture-hza/icon1.png')})`
+          return `url(${require('@/assets/building-picture-hza/icon1.png')})`
         case '12':
-          return `url(${require('../../assets/building-picture-hza/icon1.png')})`
+          return `url(${require('@/assets/building-picture-hza/icon1.png')})`
       }
     }
   }

src/views/coastalMap/components/actualBuilding.vue

@@ -0,0 +1,169 @@
+<template>
+    <div>
+   <!-- 房屋小图标标题 -->
+    <div class="house_icon_title">
+      <div class="house_icon_title_box"></div>
+      <div class="house_text">实有房屋</div>
+      <div class="house_icon_number">总数: 40</div>
+    </div>
+    <!-- 房屋小图标 -->
+    <div class="house_icon_box_for">
+      <div
+        class="house_icon_box"
+        v-for="(item, index) in iconlist"
+        :key="index"
+      >
+        <div class="house_number">{{ item.number }}</div>
+
+        <div
+          class="house_icon"
+          :style="{ backgroundImage: back_change(item.id) }"
+        ></div>
+      </div>
+    </div>
+        <!-- 出租房，群组房 -->
+    <div class="icon_bottom_flex">
+      <div class="icon_bottom1">
+        <div class="icon_buttom1_text">出租房</div>
+        <div class="icon_bottom1_number">3</div>
+      </div>
+      <div class="icon_bottom2">
+        <div class="icon_buttom2_text">群租房</div>
+        <div class="icon_bottom2_number">3</div>
+      </div>
+    </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name:'ActualBuilding',
+        data(){
+            return{
+        iconlist: [
+        { id: '1', name: '住宅', number: '35' },
+        { id: '2', name: '商铺', number: '0' },
+        { id: '3', name: '商住两用', number: '2' },
+        { id: '4', name: '空置', number: '27' }
+      ],
+            }
+        },
+        methods:{
+                back_change(id) {
+      console.log(id, 'lll')
+      switch (id) {
+        case '1':
+          return `url(${require('@/assets/house-hza/bg13.png')})`
+        case '2':
+          return `url(${require('@/assets/house-hza/bg14.png')})`
+        case '3':
+          return `url(${require('@/assets/house-hza/bg16.png')})`
+        case '4':
+          return `url(${require('@/assets/house-hza/bg15.png')})`
+      }
+    },
+        }
+    }
+</script>
+
+<style lang="scss" >
+  .house_icon_title {
+    width: 18vw;
+    height: 3.5vh;
+    // background-color: #fff;
+    margin-left: 1vw;
+    margin-top: 1vh;
+    display: flex;
+    .house_icon_title_box {
+      width: 1vw;
+      height: 2vh;
+      background-image: url(@/assets/house-hza/bg17.png);
+      background-size: 100% 100%;
+    }
+    .house_text {
+      width: 5vw;
+      color: antiquewhite;
+      margin-left: 1vw;
+      font-size: 16px;
+      font-weight: 700;
+      // background-color: orange;
+    }
+    .house_icon_number {
+      height: 2.5vh;
+      width: 4vw;
+      margin-left: 9vw;
+      // background-color: pink;
+      color: #00f5ff;
+    }
+  }
+
+  .icon_bottom_flex {
+    display: flex;
+    margin-left: 1vw;
+    // margin-top: 1vh;
+    color: #fff;
+    .icon_bottom1 {
+      display: flex;
+      padding-left: 2.5vw;
+      width: 8.5vw;
+      height: 4vh;
+      background-image: url(@/assets/house-hza/bg-1.png);
+      background-size: 100% 100%;
+      padding-top: 1vh;
+      .icon_bottom1_number {
+        margin-left: 2vw;
+      }
+    }
+    .icon_bottom2 {
+      display: flex;
+      padding-left: 2.5vw;
+      width: 8.5vw;
+      height: 4vh;
+      background-image: url(@/assets/house-hza/bg-22.png);
+      background-size: 100% 100%;
+      margin-left: 1vw;
+      padding-top: 1vh;
+      .icon_bottom2_number {
+        margin-left: 2vw;
+      }
+    }
+  }
+    .house_icon_box_for {
+    display: flex;
+    height: 11vh;
+    width: 18vw;
+    margin-left: 1vw;
+    // background-color: orange;
+    // margin-top: 1vh;
+    .house_icon_box {
+
+      width: 4vw;
+      margin-right: 1vw;
+    
+    //   background-color: #fff;
+      text-align: center;
+      .house_number {
+        width: 1.5vw;
+        margin-left: 1vw;
+        height: 3vh;
+        // background-color: pink;
+        font-family: D-DIN Bold;
+        color: #e5f5f9;
+        font-size: 1.3rem;
+      }
+      .house_title {
+        // background-color: pink;
+        margin-top: 0.5vh;
+        font-size: 0.7rem;
+        color: #cbd2d7;
+      }
+      .house_icon {
+        width: 3.5vw;
+        height: 6vh;
+        // background-color: blue;
+        background-size: 100% 100%;
+        margin-top: 0.5vh;
+      }
+    }
+  }
+</style>

src/views/coastalMap/components/actualPeople.vue

@@ -0,0 +1,202 @@
+<template>
+    <div>
+    <div class="people_title">
+      <div class="people_icon"></div>
+      <div class="people_text">实有人口</div>
+    </div>
+    <!-- echarts -->
+    <div class="people_echarts">
+        <div class="echarts_icon"></div>
+       
+   <div class="people_type">
+        <div class="people_type_list">人户一致</div>
+        <div class="type_number">51</div>
+      </div>
+      <div class="people_type1">
+        <div class="people_type_list">人在户不在</div>
+        <div class="type_number">51</div>
+      </div>
+      <div class="people_type2">
+        <div class="people_type_list">户在人不在</div>
+        <div class="type_number">51</div>
+      </div>
+      <div class="people_type3">
+        <div class="people_type_list">境外人员</div>
+        <div class="type_number">51</div>
+      </div>
+      <div class="people_type4">
+        <div class="people_type_list">重点人员</div>
+        <div class="type_number">51</div>
+      </div>
+      <div class="people_type5">
+        <div class="people_type_list">关爱人员</div>
+        <div class="type_number">51</div>
+        </div>
+      
+   
+      <div class="list_number">80</div>
+      <div class="list_number_text">总数</div>
+    </div>
+    <!-- 常驻人口，暂住人口 ，流动人口-->
+    <div class="people_bottom">
+      <div class="people1">
+        <div class="dit"></div>
+        <div class="people1_text">常驻人口</div>
+        <div class="people1_number">5</div>
+      </div>
+      <div class="people1">
+        <div class="dit"></div>
+        <div class="people1_text">暂住人口</div>
+        <div class="people1_number">5</div>
+      </div>
+      <div class="people1">
+        <div class="dit"></div>
+        <div class="people1_text">流动人口</div>
+        <div class="people1_number">5</div>
+      </div>
+    </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name:"ActualPeople"
+    }
+</script>
+
+<style lang="scss" >
+
+  .people_title {
+    width: 18vw;
+    height: 3.5vh;
+    // background-color: #fff;
+    margin-left: 1vw;
+    margin-top: 1vh;
+    display: flex;
+    .people_icon {
+      width: 1vw;
+      height: 2.2vh;
+      background-image: url(@/assets/house-hza/bg17.png);
+      background-size: 100% 100%;
+      // background-color: pink;
+      margin-top: 0.5vh;
+    }
+    .people_text {
+      color: antiquewhite;
+      margin-left: 1vw;
+      font-size: 16px;
+      font-weight: 700;
+      line-height: 3.5vh;
+      text-shadow: 0px 0px 10px #0b4672;
+      letter-spacing: 2px;
+      // background-color: orange;
+    }
+  }
+  .people_echarts {
+    width: 18vw;
+    height: 15vh;
+    // background-color: pink;
+    margin-left: 1vw;
+    margin-top: 1vh;
+    position: relative;
+    color: #ffffff;
+   font-size: 10px;
+
+    .echarts_icon {
+      height: 15vh;
+      width: 10.5vw;
+      background-image: url(@/assets/house-hza/bg11.png);
+      background-size: 100% 100%;
+      margin-left: 4vw;
+    }
+    .people_type {
+      width: 3.2vw;
+      height: 5vh;
+      // background-color: #fff;
+      position: absolute;
+      top: 0;
+      .people_type_list{
+        font-size: 10px;
+      }
+    }
+    .people_type1 {
+      position: absolute;
+      top: 5vh;
+       
+    }
+    .people_type2 {
+      position: absolute;
+      top: 11vh;
+    }
+    .people_type3 {
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+    .people_type4 {
+      position: absolute;
+      top: 5vh;
+      right: 0;
+    }
+    .people_type5 {
+      position: absolute;
+      top: 11vh;
+      right: 0;
+    }
+    .list_number {
+      // background-color: #fff;
+      position: absolute;
+      top: 0;
+      font-size: 24px;
+      left: 8.2vw;
+      top: 5vh;
+    }
+    .list_number_text {
+      // background-color: #fff;
+      position: absolute;
+      top: 0;
+      left: 8.3vw;
+      top: 8.5vh;
+      font-size: 12px;
+    }
+  }
+  .people_bottom {
+    width: 18vw;
+    height: 4vh;
+    // background-color: orange;
+    margin-left: 1vw;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 1vh;
+    .people1 {
+      width: 5.5vw;
+      height: 4vh;
+      // background-color: #fff;
+      background-image: url(@/assets/house-hza/bg-6.png);
+      background-size: 100% 100%;
+      text-align: center;
+      display: flex;
+      .people1_text {
+        font-size: 0.8rem;
+        margin-top: 1vh;
+        margin-left: 0.2vw;
+        color: #ffffff;
+      }
+      .people1_number {
+        margin-left: 0.8vw;
+        margin-top: 0.5vh;
+        font-size: 1.3rem;
+        color: #ffffff;
+      }
+
+      .dit {
+        width: 0.3vw;
+        height: 0.6vh;
+        border-radius: 50%;
+        background-color: #00f5ff;
+        margin-top: 0.8vw;
+        margin-left: 0.5vw;
+      }
+    }
+  }
+</style>

src/views/coastalMap/components/buildingInform.vue

@@ -7,45 +7,377 @@
     </div>
     <!-- 模块内容 -->
     <div class="build_box">
-      <div class="build_box_left"></div>
+      <div>
+     <div class="build_box_left">地址</div>
+      <div class="build_box_left">所在网络</div>
+      <div class="build_box_left">所在警务区</div>
+      </div>
+ 
+      <div>
+   <div class="build_box_for" v-for="(item, index) in boxlist" :key="index">
+        <div class="build_box_right">{{ item.place }}</div>
+      </div>
+      </div>
+   
+    </div>
+ <!-- 实有房屋 -->
+<ActualBuildingVue></ActualBuildingVue>
+    <!-- 实有人口标题 -->
+<ActualPeopleVue></ActualPeopleVue>
+    <!-- 房屋结构 -->
+    <div class="structure">
+      <div class="structure_icon"></div>
+      <div class="structure_title">房屋结构</div>
+    </div>
+    <!-- 房屋类型 -->
+    <div class="structure_type">
+      <div class="type_name">房屋类型:</div>
+      <div class="type_list">
+        <div class="list1">-出租</div>
+        <div class="list2">-住宅</div>
+        <div class="list3">-商用</div>
+        <div class="list4">-空置</div>
+      </div>
+    </div>
+    <!-- 1-5楼的按钮标签 -->
+    <div class="floor">1-{{ floorlist.length }}楼</div>
+    <!-- 彩色楼层 -->
+    <div class="color_floor">
+      <div
+        class="color_floor_list"
+        v-for="(item, index) in floorlist"
+        :key="index"
+      >
+        <div class="f1">{{ item.floor1 }}</div>
+        <div
+          @click="floorinfo"
+          class="f2"
+          :style="{ backgroundImage: back_change1(item.type) }"
+        >
+          {{ item.floor2 }}
+        </div>
+        <div class="f3" :style="{ backgroundImage: back_change2(item.type1) }">
+          {{ item.floor3 }}
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-export default {}
+import ActualBuildingVue from './actualBuilding.vue'
+import ActualPeopleVue from './actualPeople.vue'
+
+export default {
+  components:{
+    ActualBuildingVue,
+    ActualPeopleVue
+  },
+  data() {
+    return {
+      play: '1',
+      boxlist: [
+        { name: '地址', place: '射阳县五星街道解放南路110-3号5幢' },
+        { name: '所在网络', place: '登达花苑社区第八网格' },
+        { name: '所在警务区', place: '五星派出所第九警务区' }
+      ],
+
+      floorlist: [
+        {
+          floor1: '7楼',
+          floor2: '701室',
+          floor3: '702室',
+          type: '1',
+          type1: '1'
+        },
+        {
+          floor1: '6楼',
+          floor2: '601室',
+          floor3: '602室',
+          type: '2',
+          type1: '3'
+        },
+        {
+          floor1: '5楼',
+          floor2: '501室',
+          floor3: '502室',
+          type: '4',
+          type1: '2'
+        },
+        {
+          floor1: '4楼',
+          floor2: '401室',
+          floor3: '402室',
+          type: '2',
+          type1: '1'
+        },
+        {
+          floor1: '3楼',
+          floor2: '301室',
+          floor3: '302室',
+          type: '3',
+          type1: '4'
+        },
+        {
+          floor1: '2楼',
+          floor2: '201室',
+          floor3: '202室',
+          type: '1',
+          type1: '2'
+        },
+        {
+          floor1: '1楼',
+          floor2: '101室',
+          floor3: '102室',
+          type: '3',
+          type1: '1'
+        }
+      ]
+    }
+  },
+  methods: {
+    back_change1(type) {
+      switch (type) {
+        case '1':
+          return `url(${require('@/assets/house-hza/bg22.png')})`
+        case '2':
+          return `url(${require('@/assets/house-hza/bg18.png')})`
+        case '3':
+          return `url(${require('@/assets/house-hza/bg19.png')})`
+        case '4':
+          return `url(${require('@/assets/house-hza/bg20.png')})`
+      }
+    },
+    back_change2(type1) {
+      switch (type1) {
+        case '1':
+          return `url(${require('@/assets/house-hza/bg22.png')})`
+        case '2':
+          return `url(${require('@/assets/house-hza/bg18.png')})`
+        case '3':
+          return `url(${require('@/assets/house-hza/bg19.png')})`
+        case '4':
+          return `url(${require('@/assets/house-hza/bg20.png')})`
+      }
+    },
+    floorinfo() {
+      console.log(123)
+      this.$emit('floorinfo')
+    }
+  }
+}
 </script>
 
 <style lang="scss">
+.people_type_list {
+  font-size: 12px;
+}
+.type_number {
+  font-size: 12px;
+  margin-top: 0.5vh;
+  margin-left: 2vw;
+}
+* {
+  margin: 0;
+  padding: 0;
+}
+
 .build_body {
   width: 20vw;
   height: 15vh;
-  background-color: #fff;
+  background-size: 100% 100%;
+
   .build_title {
-    width: 20vw;
+    width: 18vw;
     height: 3.5vh;
     display: flex;
     .header_icon {
       width: 1vw;
       height: 2vh;
-      background-color: pink;
+      margin-left: 1vw;
+      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: 2vw;
+      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_box {
-    width: 20vw;
+    margin-top: 1vh;
-    height: 11.5vh;
+    width: 18vw;
-    background-color: orange;
+    height: 12vh;
+    margin-left: 1vw;
+    display: flex;
+    // background-color: #fff;
+    .build_box_left {
+        width: 5vw;
+        height: 3.5vh;
+        background-color: #04548a;
+        padding-left: 0.5vw;
+        color: antiquewhite;
+        padding-top: 0.5vh;
+       margin-bottom: 0.5vh;
+       font-size: 12px;
+       align-items: center;
+      }
+    .build_box_for {
+      // background-color: orange;
+         width: 4vw;
+   
+      .build_box_right {
+        width: 13vw;
+        height: 3.5vh;
+        font-size: 12px;
+        background-image: url(@/assets/house-hza/bg10.png);
+        background-size: 100% 100%;
+        // padding-top: 1vh;
+        padding-left: 0.5vw;
+        color: antiquewhite;
+        margin-bottom: 0.5vh;
+        display: flex;
+         align-items: center;
+      }
+    }
+  }
+
+
+
+  .structure {
+    width: 18vw;
+    height: 4vh;
+    // background-color: orange;
+    margin-left: 1vw;
+    display: flex;
+
+    margin-top: 1vh;
+    .structure_icon {
+      width: 1vw;
+      height: 2.2vh;
+      background-image: url(@/assets/house-hza/bg17.png);
+      background-size: 100% 100%;
+      // background-color: pink;
+      margin-top: 0.6vh;
+    }
+    .structure_title {
+      color: antiquewhite;
+      margin-left: 1vw;
+      font-size: 16px;
+      font-weight: 700;
+      line-height: 4vh;
+      text-shadow: 0px 0px 10px #0b4672;
+      letter-spacing: 2px;
+      // background-color: #fff;
+    }
+  }
+  .structure_type {
+    height: 2vh;
+    width: 18vw;
+    // background-color: pink;
+    margin-left: 1vw;
+    display: flex;
+    .type_name {
+      width: 4vw;
+      height: 2vh;
+      color: #ffffff;
+      font-size: 14px;
+    }
+    .type_list {
+      width: 8vw;
+      height: 2vh;
+      // background-color: blueviolet;
+      display: flex;
+      font-size: 12px;
+      justify-content: space-between;
+      .list1 {
+        color: #00f5ff;
+      }
+      .list2 {
+        color: #37fdc7;
+      }
+      .list3 {
+        color: #ffc426;
+      }
+      .list4 {
+        color: #ff4042;
+      }
+    }
+  }
+  .floor {
+    width: 3.5vw;
+    height: 2.5vh;
+    background-color: #015f9c;
+    margin-left: 1vw;
+    margin-top: 1vh;
+    color: #ecf4f9;
+    font-size: 14px;
+    text-align: center;
+    line-height: 2.5vh;
+    justify-content: center;
+  }
+  .color_floor {
+    width: 18vw;
+    height: 15vh;
+    margin-left: 1vw;
+    overflow-y: auto;
+    color: #fff;
+    margin-top: 1vh;
+    /* 定义滚动条样式 */
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+      background-color: #0b88cd;
+    }
+    /*定义滚动条轨道 内阴影+圆角*/
+    &::-webkit-scrollbar-track {
+      box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
+      border-radius: 10px;
+      background-color: rgba(240, 240, 240, 0.5);
+    }
+    /*定义滑块 内阴影+圆角*/
+    &::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+      box-shadow: inset 0 0 0px rgba(37, 74, 237, 0.379);
+      background-color: #043a61;
+    }
+
+    .color_floor_list {
+      width: 9vw;
+      height: 3vh;
+      // background-color: blueviolet;
+      display: flex;
+
+      align-items: center;
+
+      .f1 {
+        font-size: 12px;
+      }
+      .f2 {
+        width: 3vw;
+        height: 2vh;
+        font-size: 12px;
+        margin-left: 0.5vw;
+        background-size: 100% 100%;
+        text-align: center;
+      }
+      .f3 {
+        width: 3vw;
+        height: 2vh;
+        background-size: 100% 100%;
+        font-size: 12px;
+        margin-left: 0.5vw;
+        text-align: center;
+      }
+    }
   }
 }
 </style>

src/views/coastalMap/components/floorInform.vue

@@ -0,0 +1,421 @@
+<template>
+  <div class="add">
+    <!-- 户室信息 -->
+    <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"
+          v-for="(item, index) in boxlist"
+          :key="index"
+        >
+          <div class="build_box_left">{{ item.name }}</div>
+          <div
+            class="build_box_right"
+            :style="{ color: back_change(item.type) }"
+          >
+            {{ item.place }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 房主信息 -->
+    <div class="build_title">
+      <div class="header_icon"></div>
+      <div class="title_text">房主信息</div>
+    </div>
+    <!-- 照片信息 -->
+    <div class="housepeople_info">
+      <div class="housepeople_info_left"></div>
+      <div class="housepeople_info_right">
+        <!--  -->
+          <div class="info_right_for" v-for="(item,index) in namelist" :key="index">
+            <div class="for_left">{{item.name}}</div>
+            <div class="for_right">{{item.place}}</div>
+          </div>
+        <!--  -->
+      </div>
+    </div>
+    <!-- 实有人口 重点人员 户在人不在 -->
+        <div class="people_bottom">
+      <div class="people1">
+        <div class="dit"></div>
+        <div class="people1_text">常驻人口</div>
+        <div class="people1_number">5</div>
+      </div>
+      <div class="people1">
+        <div class="dit"></div>
+        <div class="people1_text">常驻人口</div>
+        <div class="people1_number">5</div>
+      </div>
+      <div class="people1">
+        <div class="dit"></div>
+        <div class="people1_text">常驻人口</div>
+        <div class="people1_number">5</div>
+      </div>
+    </div>
+    <!-- 滚动 -->
+     <div class="roll_body">
+        <ul class="marquee-list" :class="{ 'animate-up': animateUp }">
+          <li v-for="item in roll_list" :key="item.id">
+            <div class="roll_item_left">
+              <div class="roll_item_pic">
+                <img src="item.userPic" alt="" />
+              </div>
+            
+            </div>
+            <div class="roll_item_right">
+              <div class="person_type one_type">
+                {{ item.type }}
+              </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" >
+                  {{ item.idcard }}
+                </div>
+                <div class="right_value_item" >
+                  {{ item.houseHoldAddress }}
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FloorInform',
+  data() {
+    return {
+          animateUp: false,
+      boxlist: [
+        { name: '地址', place: '射阳县五星街道解放南路110-3号5幢' },
+        { name: '所在网络', place: '登达花苑社区第八网格' },
+        { name: '所在警务区', place: '住宅', type: '1' },
+        { name: '所在警务区', place: '出租', type: '2' },
+        { name: '所在警务区', place: '五星派出所第九警务区' }
+      ],
+           namelist: [
+        { name: '姓名', place: '张三' },
+        { name: '联系电话', place: '13201754831' },
+        { name: '证件号码', place: '320723199912300059' },
+        { name: '户籍地址', place: '登达花苑社区西路' },
+      ],
+      roll_list:[
+        {username:'张三',phone:'13201754289',idcard:'320723199912300052',houseHoldAddress:'登达花苑社区西路'},
+        {username:'张三',phone:'13201754289',idcard:'320723199912300052',houseHoldAddress:'登达花苑社区西路'},
+        {username:'张三',phone:'13201754289',idcard:'320723199912300052',houseHoldAddress:'登达花苑社区西路'}
+      ]
+    }
+  },
+  mounted(){
+    this.timer = setInterval(this.scrollAnimate, 2500)
+  },
+  methods: {
+    back_change(type) {
+      switch (type) {
+        case '1':
+          return `#37FDC7`
+        case '2':
+          return `#00F5FF`
+      }
+    },
+       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">
+.add {
+  width: 20vw;
+  height: 72vh;
+  // background-color: #fff;
+  background-image: url(../../../assets/house-hza/bg7.png);
+  background-size: 100% 100%;
+  padding-left: 1vw;
+  .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;
+    // background-color: #fff;
+    margin-top: 1vh;
+    display: flex;
+    margin-bottom: 1vh;
+    .picture_left {
+      width: 6vw;
+      height: 18vh;
+      background-color: pink;
+      text-align: center;
+    }
+    .picture_right {
+      width: 11.5vw;
+      height: 18vh;
+      // background-color: blue;
+      margin-left: 0.5vw;
+
+      .build_box_for {
+        display: flex;
+        margin-bottom: 0.5vh;
+        .build_box_left {
+          width: 5vw;
+          height: 3.2vh;
+          background-color: #04548a;
+          padding-left: 0.5vw;
+          color: antiquewhite;
+          padding-top: 0.5vh;
+          font-size: 12px;
+          // text-align: center;
+        }
+        .build_box_right {
+          // background-color: #fff;
+          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;
+        }
+      }
+    }
+  }
+  .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-color: orange;
+    }
+    .housepeople_info_right{
+      width: 13vw;
+      height: 11vh;
+      // background-color: pink;
+      padding-left: 0.5vw;
+    }
+    .info_right_for{
+      height: 2vh;
+      width: 12.5vw;
+      // background-color: blue;
+      display: flex;
+      margin-bottom: 1vh;
+      .for_left{
+        width: 3.5vw;
+        height: 2vh;
+        // background-color: orange;
+        color: #ecf4f9;
+      }
+      .for_right{
+        height: 2vh;
+        width: 8vw;
+        // background-color: #fff;
+         overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          color: #fff;
+          
+      }
+    }
+  }
+    .people_bottom {
+    width: 18vw;
+    height: 4vh;
+    // background-color: orange;
+  margin-left: 0;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 1vh;
+    .people1 {
+      width: 5.5vw;
+      height: 4vh;
+      // background-color: #fff;
+      background-image: url(@/assets/house-hza/bg-6.png);
+      background-size: 100% 100%;
+      text-align: center;
+      display: flex;
+      .people1_text {
+        font-size: 12px;
+        margin-top: 1vh;
+        margin-left: 0.2vw;
+        color: #ffffff;
+      }
+      .people1_number {
+        margin-left: 0.8vw;
+        margin-top: 0.5vh;
+        font-size: 1.3rem;
+        color: #ffffff;
+      }
+
+      .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;
+      // background: #00f5ff;
+      overflow: hidden;
+      margin-top: 1vh;
+      .marquee-list {
+        width: 18vw;
+        height: 24vh;
+
+        li {
+          width: 100%;
+          height: 12vh;
+          background: url('../../../assets/house-hza/bg-6.png');
+           
+          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;
+          margin-bottom: 0.5vh;
+          .roll_item_left {
+            width: 5vw;
+            height: 11vh;
+            margin-left: 0.5vw;
+            .roll_item_pic {
+              width: 4vw;
+              height: 9vh;
+              background: #0b4672;
+              margin-top: 1vh;
+              // margin-top: 0.5vh;
+            }
+       
+          }
+          .roll_item_right {
+            width: 14vw;
+            height: 9vh;
+            position: relative;
+            display: flex;
+            // background-color: #fff;
+            
+            .person_type {
+              position: absolute;
+              width: 3vw;
+              height: 2vh;
+              top: 0px;
+              right: 0px;
+              color: #061122;
+              text-align: center;
+              line-height: 2vh;
+            }
+            .one_type {
+              background: #ffc426;
+            }
+            .two_type {
+              background: #00f5ff;
+            }
+            .three_type {
+              background: #a357ff;
+            }
+            .right_text {
+              width: 5vw;
+              height: 9vh;
+              // background-color: #fff;
+              .right_text_item {
+                width: 5vw;
+                // margin-bottom: 1vh;
+                height: 2.6vh;
+                color: #ecf4f9;
+                font-size: 10px;
+                // text-align: center;
+                // line-height: 2.6vh;
+                
+              }
+            }
+            .right_value {
+              width: 8vw;
+              height: 10vh;
+              .right_value_item {
+       
+                width: 8vw;
+                height: 2.6vh;
+                color: #edf1f7;
+                font-size: 12px;
+                text-align: left;
+                // line-height: 2.6vh;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+              }
+            }
+          }
+        }
+      }
+      .animate-up {
+        transition: all 0.8s ease-in-out;
+        transform: translateY(-20vh);
+      }
+    }
+}
+</style>

src/views/coastalMap/components/keyPerson.vue

@@ -73,45 +73,38 @@
           <li v-for="item in roll_list" :key="item.id">
             <div class="roll_item_left">
               <div class="roll_item_pic">
-                <img :src="item.userPic" alt="" />
+                <img src="item.userPic" alt="" />
               </div>
               <div class="roll_item_btn">查看详情</div>
             </div>
             <div class="roll_item_right">
-              <!-- // TODO 人员标签暂无 -->
+              <div class="person_type one_type">
-              <div v-if="item.per_type == '1'" class="person_type one_type">
+                {{ item.impUserType }}
-                {{ item.type_text }}
               </div>
-              <div
+              <div class="person_type two_type">
-                v-else-if="item.per_type == '2'"
+                {{ item.impUserType }}
-                class="person_type two_type"
-              >
-                {{ item.type_text }}
               </div>
-              <div
+              <div class="person_type three_type">
-                v-else-if="item.per_type == '3'"
+                {{ item.impUserType }}
-                class="person_type three_type"
-              >
-                {{ item.type_text }}
               </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 class="right_text_item">证件号码 :</div>
+                <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 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" :title="item.idCard">
+                <div class="right_value_item" :title="item.id_card">
                   {{ item.idCard }}
                 </div>
-                <div class="right_value_item" :title="item.houseHoldAddress">
+                <div class="right_value_item" :title="item.old_address">
                   {{ item.houseHoldAddress }}
                 </div>
-                <div class="right_value_item" :title="item.habitationAddress">
+                <div class="right_value_item" :title="item.new_address">
                   {{ item.habitationAddress }}
                 </div>
               </div>
@@ -126,19 +119,16 @@
 import * as echarts from 'echarts'
 import EleResize from '@/utils/esresize'
 import { keyPersonnelAPI, MetaImpUserInfo } from '@/api/coastalMap/resource'
+// import PersonScroll from './keypersonScroll.vue'
 export default {
   name: 'KeyPerson',
+  // components: { PersonScroll },
   data() {
     return {
-      // * 模块标题
       title_text: '重点人员',
-      // * 重点人员数据
       importpeople: {},
-      // * 滚动数据
       roll_list: [],
-      // * 动画开关
       animateUp: false,
-      // * 定时器ID
       timer: null
     }
   },
@@ -216,13 +206,12 @@ export default {
     async onkeyPersonnelAPI() {
       const res = await keyPersonnelAPI()
       this.importpeople = res.data
-      console.log(this.importpeople, '重点人员数据')
     },
     //重点人员信息(轮播)
     async onMetaImpUserInfo() {
       const res = await MetaImpUserInfo()
       this.roll_list = res.rows
-      console.log(this.roll_list, '重点人员信息')
+      console.log(this.roll_list, 'aaaa')
     }
   }
 }

src/views/coastalMap/components/policeStatus.vue

@@ -10,15 +10,9 @@
         <div class="police_status_box">
           <!-- 左边占比 -->
           <div class="rank_left">
-            <div class="rank_left_item">
+            <div class="rank_left_item one">1</div>
-              <div class="one">1</div>
+            <div class="rank_left_item two">2</div>
-            </div>
+            <div class="rank_left_item three">3</div>
-            <div class="rank_left_item">
-              <div class="two">2</div>
-            </div>
-            <div class="rank_left_item">
-              <div class="three">3</div>
-            </div>
           </div>
           <div class="charts_right" id="charts_right"></div>
         </div>
@@ -31,17 +25,18 @@
             <div class="roll_item">
               <div class="time_box">{{ item.createTime }}</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 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.alarmResponseTypeName }}
                 </div>
-                <div class="roll_item_value">{{ item.alarmResponseUnit }}</div>
+                <div class="roll_item_value">:{{ item.alarmResponseUnit }}</div>
-                <div class="roll_item_value">{{ item.alarmAddress }}</div>
+                <div class="roll_item_value">:{{ item.alarmAddress }}</div>
                 <div class="roll_item_value" :title="item.now_address">
                   {{ item.alarmResponseContent }}
                 </div>
@@ -69,7 +64,7 @@ export default {
     return {
       value: '1',
       y_data: ['其他纠纷', '家庭纠纷', '其他警情'], // y轴文字
-      chart_data: [], // chart表数据
+      chart_data: ['145', '29', '101'], // chart表数据
       roll_list: [
         // {
         //   id: '1',
@@ -139,24 +134,17 @@ export default {
       timer: null
     }
   },
-  created() {
-    this.onPoliceStatistics()
-    this.onMetaAlarmInfo()
-  },
   mounted() {
-    // this.init_charts()
+    this.init_charts()
     this.timer = setInterval(this.scrollAnimate, 1500)
   },
-  watch: {
+  created() {
-    chart_data: {
+    this.onPoliceStatistics()
-      handler(newData) {
+    this.onMetaAlarmInfo()
-        if (newData) this.init_charts(newData)
-      },
-      immediate: true
-    }
   },
+
   methods: {
-    init_charts(chart_data) {
+    init_charts() {
       let charts = document.getElementById('charts_right')
       let resize_div = document.getElementById('charts_right')
       let myChart = echarts.init(charts)
@@ -200,8 +188,7 @@ export default {
         },
         series: [
           {
-            data: chart_data,
+            data: this.chart_data,
-            barWidth: '20%',
             type: 'bar',
             showBackground: true,
             itemStyle: {
@@ -209,7 +196,6 @@ export default {
                 colorStops: [
                   {
                     offset: 0,
-                    barWidth: '30%',
                     color: '#1A416B' // 0% 处的颜色
                   },
                   {
@@ -248,15 +234,12 @@ export default {
       console.log(res, 'eacharts数据')
       this.chart_data = res.data.map((item) => item.count)
       console.log(this.chart_data)
-      // res.data.forEach((element) => {
-      //   this.y_data.push(element.alarmResponseTypeName)
-      // })
     },
     //警情信息表
     async onMetaAlarmInfo() {
       const res = await MetaAlarmInfo()
       this.roll_list = res.rows
-      // console.log(res, '警情信息表')
+      console.log(this.roll_listc, 'oooppp')
     }
   }
 }
@@ -292,7 +275,6 @@ export default {
     background-image: url('@/assets/picture/bg_5.png');
     background-repeat: no-repeat;
     background-size: 100% 100%;
-
     .police_status_body_charts {
       width: 20vw;
       height: 19vh;
@@ -310,47 +292,17 @@ export default {
           .rank_left_item {
             width: 3vw;
             height: 6vh;
-            display: flex;
+            color: #ecf4f9;
-            justify-content: center;
+            font-size: 18px;
-            align-items: center;
+            font-weight: 600;
-            .one {
+            text-align: center;
-              color: #ecf4f9;
+            line-height: 6vh;
-              font-size: 18px;
+          }
-              font-weight: 600;
+          .one {
-              text-align: center;
+            background: url('~@/assets/coastalMap/policeStatus/rank_one.png')
-              line-height: 4vh;
+              no-repeat;
-              width: 2vw;
+            background-size: 100% 100%;
-              height: 4vh;
-              background: url('~@/assets/coastalMap/policeStatus/rank_one.png')
-                no-repeat;
-              background-size: 100% 100%;
-            }
-            .two {
-              color: #ecf4f9;
-              font-size: 18px;
-              font-weight: 600;
-              text-align: center;
-              line-height: 4vh;
-              width: 2vw;
-              height: 4vh;
-              background: url('~@/assets/coastalMap/policeStatus/rank_two.png')
-                no-repeat;
-              background-size: 100% 100%;
-            }
-            .three {
-              color: #ecf4f9;
-              font-size: 18px;
-              font-weight: 600;
-              text-align: center;
-              line-height: 4vh;
-              width: 2vw;
-              height: 4vh;
-              background: url('~@/assets/coastalMap/policeStatus/rank_three.png')
-                no-repeat;
-              background-size: 100% 100%;
-            }
           }
-
           .two {
             background: url('~@/assets/coastalMap/policeStatus/rank_two.png')
               no-repeat;
@@ -404,8 +356,8 @@ export default {
               position: absolute;
               width: 7vw;
               height: 2vh;
-              top: 0.5vh;
+              top: 0px;
-              right: 0.5vw;
+              right: 0px;
               color: #fff;
               text-align: center;
               line-height: 2vh;

src/views/coastalMap/index.vue

@@ -26,6 +26,7 @@
         </div>
       </div>
     </div>
+
     <!-- 左边区域 -->
     <div class="left_box" v-if="isplay == '1'">
       <Resource ref="resource" :resourceData="resourceData"></Resource>
@@ -34,21 +35,26 @@
 
     <!-- 显示实有房屋弹窗 -->
     <div class="left_house_box" v-else-if="isplay == '2'">
-      <building-inform></building-inform>
+      <BuildingInform @floorinfo="floorinfo"></BuildingInform>
+    </div>
+    <div class="floorInform" v-if="only">
+    <floorInform></floorInform>
     </div>
-    <!-- 右边区域 -->
-    <!-- <div class="center_box">
-      <el-button @click="change"></el-button>
-    </div> -->
 
-    <div class="right_box">
+    <!-- 右边区域 -->
+    <div class="right_box" v-if="isplay == '1'">
       <PoliceSpread ref="policeSpread"></PoliceSpread>
       <SeaElement ref="sea"></SeaElement>
       <PoliceStatus ref="PoliceStatus"></PoliceStatus>
     </div>
     <!-- 四类打点 -->
     <div class="point_list">
-      <div class="point_list_item" v-for="(item, index) in back" :key="index">
+      <div
+        class="point_list_item"
+        @click="change"
+        v-for="(item, index) in back"
+        :key="index"
+      >
         <div class="point_icon">
           <div
             class="icon_body"
@@ -58,6 +64,7 @@
         <div class="point_icon_text">{{ item.text }}</div>
       </div>
     </div>
+
     <!-- 弹窗组件 -->
     <!-- <KeyInformantion v-if="play" @cardClose="onCardClose"></KeyInformantion> -->
     <!-- <div v-else></div> -->
@@ -65,7 +72,6 @@
     <!-- <div class="overlay" v-if="play"></div>
     <div v-else></div> -->
     <!-- -->
-    <div class="turn_btn"></div>
   </div>
 </template>
 <script>
@@ -75,6 +81,7 @@ import {
 } from '@/api/coastalMap/resource/index'
 // import { login, getDeviceListAPI } from '@/api/facility'
 import { dateFormat } from '@/utils/date'
+import floorInform from './components/floorInform.vue'
 import MapBody from './components/mapBody'
 import Resource from './components/resource' // * 资源概况
 import KeyPerson from './components/keyPerson' // * 重点人员
@@ -92,7 +99,8 @@ export default {
     PoliceSpread,
     SeaElement,
     PoliceStatus,
-    BuildingInform
+    BuildingInform,
+    floorInform
     //KeyInformantion
   },
   data() {
@@ -100,6 +108,7 @@ export default {
       title_text: '射阳沿海治安防控综合平台',
       play: true,
       isplay: 1,
+      only: false,
       // * 打点背景图数组
       back: [
         {
@@ -149,6 +158,8 @@ export default {
       //第一步实现左边隐藏
       this.isplay = 2
       //第二步显示实有房屋的盒子
+      document.getElementsByClassName('point_list')[0].style.right = '0'
+      document.getElementsByClassName('left_box')[0].style.left = '0'
     },
     timeStart() {
       this.timer = setInterval(() => {
@@ -160,12 +171,15 @@ export default {
     async onGetResource() {
       const res = await getResourceAPI()
       this.resourceData = res.data
-      // console.log(this.resourceData, '获取资源概况')
+      // console.log(this.resourceData)
     },
-    // * 获取重点人员 - 图例数据
+    // * 获取重点人员
     async onGetKeyPersonnel() {
       const res = await keyPersonnelAPI()
       console.log(res, '重点人员数据待更新')
+    },
+    floorinfo() {
+      this.only = true
     }
   }
 }
@@ -176,6 +190,13 @@ export default {
   height: 100vh;
   // background: #404eca;
   position: relative;
+  .floorInform {
+    position: absolute;
+    top: 10vh;
+    left: 21vw;
+  }
+
+
   .system_title {
     width: 100vw;
     height: 18vh;
@@ -284,6 +305,8 @@ export default {
     left: 1vw;
     width: 20vw;
     height: 89vh;
+    transform: translateY(-0.1%);
+    // transition: left 1s ease-in-out;
     // background: #ad337f;
     z-index: 3;
   }
@@ -293,7 +316,8 @@ export default {
     left: 1vw;
     width: 20vw;
     height: 89vh;
-    background: #ad337f;
+    background-image: url(../../assets/house-hza/bg7.png);
+    background-size: 100% 100%;
     z-index: 3;
   }
   .center_box {
@@ -321,7 +345,8 @@ export default {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-
+    transform: translateY(-1%);
+    transition: right 0.5s ease-in-out;
     .point_list_item {
       width: 4vw;
       height: 4vw;
@@ -329,7 +354,6 @@ export default {
       flex-direction: column;
       justify-content: space-between;
       align-items: center;
-      cursor: pointer;
 
       .point_icon {
         width: 4vw;
@@ -341,10 +365,6 @@ export default {
         justify-content: center;
         align-items: center;
 
-        &:hover {
-          filter: brightness(140%);
-        }
-
         .icon_body {
           width: 1.2vw;
           height: 4vh;
@@ -359,10 +379,6 @@ export default {
         text-align: center;
         line-height: 2vh;
         font-size: 1rem;
-
-        &:hover {
-          filter: brightness(140%);
-        }
       }
     }
   }

src/views/home/index.vue

@@ -5,7 +5,7 @@
       <div class="system_title_text">射阳沿海治安防控综合平台</div>
     </div> -->
     <!-- // * 底部导航按钮 - 跳转路由 -->
-    <div class="under_btn">
+    <div class="under_btn" v-if="play">
       <div class="under_btn_item">
         <div class="item_check" @click="toHome"></div>
       </div>
@@ -16,7 +16,7 @@
         <div class="item_check_back" @click="toDevice">感知设备</div>
       </div>
       <div class="under_btn_item">
-        <div class="item_check_back">建模应用</div>
+        <div class="item_check_back" @click="toBuild">建模应用</div>
       </div>
     </div>
     <router-view></router-view>
@@ -27,26 +27,36 @@ export default {
   // eslint-disable-next-line vue/multi-word-component-names
   name: 'Home',
   data() {
-    return {}
+    return {
+      play: true
+    }
   },
+
   methods: {
     toHome() {
       this.$router.push('/home/coastalMap')
+      this.play = true
     },
     toVideo() {
       this.$router.push('/home/videoMonitor')
+      this.play = true
     },
     toDevice() {
       this.$router.push('/home/sensingDevice')
+      this.play = true
+    },
+    toBuild() {
+      this.play = false
+      this.$router.push('/home/buildUse')
     }
   }
 }
 </script>
 <style lang="scss" scoped>
 .main {
-  position: relative;
   width: 100vw;
   height: 100vh;
+  background: #07204b;
   // .system_title {
   //   display: flex;
   //   justify-content: center;
@@ -80,9 +90,8 @@ export default {
 
   .under_btn {
     position: absolute;
-    left: 32.5vw;
-    right: 32.5vw;
     bottom: 5vh;
+    left: 35vw;
     width: 35vw;
     height: 12vh;
     // background: #33a59f;
@@ -92,15 +101,15 @@ export default {
     .under_btn_item {
       width: 13vw;
       height: 12vh;
-      // border: 1px solid #b1335d;
+      // border: 1px solid#b1335d;
       display: flex;
       justify-content: center;
       align-items: center;
 
       // * 导航样式
       .item_check {
-        width: 5.5vw;
+        width: 6vw;
-        height: 5.5vw;
+        height: 12vh;
         background-image: url('@/assets/picture/icon_home_nor.png');
         background-repeat: no-repeat;
         background-size: 100% 100%;
@@ -109,17 +118,17 @@ export default {
         &:hover {
           background-image: url('@/assets/picture/icon_home_sel.png');
           background-repeat: no-repeat;
-          background-size: 100% auto;
+          background-size: 100% 100%;
         }
       }
 
       .item_check_back {
-        width: 5.5vw;
+        width: 6vw;
-        height: 5.5vw;
+        height: 12vh;
         background-image: url('@/assets/picture/under_button.png');
         background-repeat: no-repeat;
         background-size: 100% 100%;
-        font-size: 1.2rem;
+        font-size: 1.3rem;
         font-family: PingFangSC, PingFang SC;
         font-weight: 500;
         color: #ecf4f9;
@@ -130,9 +139,6 @@ export default {
 
         &:hover {
           color: #00f5ff;
-          // * 强行增亮
-          filter: brightness(140%);
-          background-size: 100% auto;
         }
       }
     }

src/views/videoMonitor/index.vue

@@ -67,10 +67,9 @@
 
 <script>
 import { dateFormat } from '@/utils/date'
-import { login, getVideoListAPI } from '@/api/facility'
+import { login, getCloseVideoAPI } from '@/api/facility'
-// import { setToken } from '@/utils/token'
+import { setToken } from '@/utils/token'
-// import { getDeviceListAPI } from '@/api/videoMonitor/index'
+import { getDeviceListAPI } from '@/api/videoMonitor/index'
-import { getDeviceListAPI } from '@/api/facility'
 import { setDeviceLatlng } from '@/utils/latlng'
 import bus from '@/utils/bus'
 import MapPlayer from './components/livePlayer.vue'
@@ -87,23 +86,17 @@ export default {
       deviceName: '',
       // * 标题文本
       title_text: '射阳沿海治安防控综合平台',
-      // // * 监控设备所需分页
+      // * 监控设备所需分页
-      // params: {
+      params: {
-      //   pageSize: 3000,
+        pageSize: 3000,
-      //   pageNum: 1
+        pageNum: 1
-      // },
+      },
       // * 监控数据
       channelList: [],
       // * 时间集合
       timeArr: {},
       // * 用户名称
-      userName: '李警官',
+      userName: '李警官'
-      // * 监控设备所需分页
-      params: {
-        start: 0,
-        limit: 10000,
-        online: true
-      }
     }
   },
   created() {
@@ -119,36 +112,33 @@ export default {
     // * 登录获取海康 token
     async onGetLogin() {
       const res = await login()
-      // setToken(res.URLToken)
+      setToken(res.URLToken)
-      console.log(res)
     },
     // * 获取监控视频设备
     async onGetDeviceListAPI() {
-      // const res = await getDeviceListAPI(this.params)
-      // this.channelList = res.rows.filter((item) => item.longitude !== 0)
       const res = await getDeviceListAPI(this.params)
-      // this.channelList = res.rows.filter((item) => item.longitude !== 0)
+      this.channelList = res.rows.filter((item) => item.longitude !== 0)
       // console.log(this.channelList, '监控设备数据')
-      console.log(res)
       // * 存储到本地
       setDeviceLatlng(this.channelList)
     },
     // * 获取图层点击传递的数据
     handleDeviceBus() {
       bus.$on('deviceChannel', async (deviceData) => {
-        try {
-          const res = await getVideoListAPI(deviceData.channel)
-          console.log(res)
-        } catch (error) {
-          console.log(error)
-        }
         // try {
         //   const res = await getVideoListAPI(deviceData.channel)
         //   console.log(res)
         // } catch (error) {
         //   console.log(error)
         // }
-        console.log(deviceData)
+
+        try {
+          const res = await getCloseVideoAPI(deviceData.channel)
+          console.log(res)
+        } catch (error) {
+          console.log(error)
+        }
+        // console.log(deviceData)
       })
     },
     // * 获取时间