户人的新增/修改/删除

src/api/home/index.js

@@ -66,6 +66,13 @@ export function inputSearch(params) {
     params,
   });
 }
+export function inputSearch2(params) {
+  return request({
+    url: "/taicangpop/data/sszx",
+    method: "GET",
+    params,
+  });
+}
 
 //网格员帅选简介
 export function getNectWorkOffice(params) {

src/assets/styles/index.scss

@@ -196,9 +196,62 @@ aside {
   width: 140px;
 }
 
-.taicang-dialog {
+.taicang-dialog,
+.taicang-dialog-small {
   width: 1100px !important;
   .el-dialog__close {
     color: #fff;
   }
+
+  .el-badge__content.is-fixed {
+    z-index: 10;
+  }
+  .el-dialog {
+    background: transparent;
+  }
+  .el-dialog__header {
+    padding: 0;
+  }
+  .el-dialog__body {
+    background: #009bf4;
+    // border-radius: 12px;
+    padding: 1px;
+  }
+  .el-dialog:not(.is-fullscreen) {
+    margin-top: 6.5vh !important;
+  }
+  .dialog-main {
+    min-height: 700px;
+    display: flex;
+    flex-direction: column;
+    background: #031c3c;
+    //border-radius: 12px;
+    padding: 20px;
+    .dialog-title {
+      display: flex;
+      align-items: center;
+      span {
+        display: inline-block;
+        height: 17px;
+        width: 5px;
+        background: #00a8ff;
+        margin-right: 10px;
+      }
+      font-size: 18px;
+      color: #f4f8fa;
+      font-weight: 500;
+      font-family: "Alibaba-PuHuiTi-Medium.otf";
+    }
+  }
+  .dialog-btn-group {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+.taicang-dialog-small {
+  width: 850px !important;
+  .dialog-main {
+    min-height: 500px;
+  }
 }

src/assets/styles/isTable.scss

@@ -81,6 +81,7 @@
     font-family: "Alibaba-PuHuiTi-Regular.otf";
   }
 }
+
 .activeItme {
   color: #ffffff !important;
   border: 1px solid #006cc5 !important;

src/components/NavigationBar/index.vue

@@ -20,7 +20,7 @@
       <div class="navigation-right" v-show="showRight">
         <div class="reset"></div>
         <el-button type="text">后台管理</el-button>
-        <el-button type="text" v-show="showStreet">美丽街区</el-button>
+        <!-- <el-button type="text" v-show="showStreet">美丽街区</el-button> -->
         <el-button type="text" @click="handleBack()" v-show="!showStreet"
           >返回街道</el-button
         >
@@ -29,7 +29,7 @@
       <!-- 四个中心 -->
       <el-dialog
         :visible.sync="open"
-        :modal="false"
+        append-to-body
         custom-class="taicang-dialog"
       >
         <div class="dialog-main">
@@ -125,6 +125,7 @@ export default {
   width: 100%;
 }
 .navigation-bar {
+  position: relative;
   height: 100%;
   width: 100%;
   background: url("~@/assets/images/ui/navigation.png");
@@ -137,6 +138,8 @@ export default {
   .navigation-left {
     padding-top: 20px;
     padding-left: 25px;
+
+    background-size: cover;
   }
   .navigation-title {
     text-align: center;
@@ -189,46 +192,5 @@ export default {
     padding: 12px 20px 14px 20px;
     font-family: "Alibaba-PuHuiTi-Regular.otf";
   }
-
-  .dialog-main {
-    min-height: 700px;
-    display: flex;
-    flex-direction: column;
-    background: #031c3c;
-    border-radius: 12px;
-    padding: 20px;
-    .dialog-title {
-      display: flex;
-      align-items: center;
-      span {
-        display: inline-block;
-        height: 17px;
-        width: 5px;
-        background: #00a8ff;
-        margin-right: 10px;
-      }
-      font-size: 18px;
-      color: #f4f8fa;
-      font-weight: 500;
-      font-family: "Alibaba-PuHuiTi-Medium.otf";
-    }
-  }
-}
-::v-deep .el-badge__content.is-fixed {
-  z-index: 10;
-}
-::v-deep .el-dialog {
-  background: transparent;
-}
-::v-deep .el-dialog__header {
-  padding: 0;
-}
-::v-deep .el-dialog__body {
-  background: #009bf4;
-  border-radius: 12px;
-  padding: 1px;
-}
-::v-deep .el-dialog:not(.is-fullscreen) {
-  margin-top: 6vh !important;
 }
 </style>

src/components/NavigationBar/peopleCentre.vue

@@ -154,7 +154,8 @@
     <div class="result-list">
       <div class="list-header">
         <div class="header-left-total">
-          搜索结果列表 {{ houseTotal }}户 {{ total }}人
+          搜索结果列表
+          <!-- {{ houseTotal }}户 {{ total }}人 -->
         </div>
         <div class="header-rigth-total">共{{ total }}条数据</div>
       </div>
@@ -204,7 +205,7 @@
 </template>
 
 <script>
-import { inputSearch } from "@/api/home/index.js";
+import { inputSearch2 } from "@/api/home/index.js";
 import { handleTreeId } from "@/utils/findTreeId.js";
 import { treeselect } from "@/api/system/dept"; //部门
 import { mapGetters } from "vuex";
@@ -288,9 +289,9 @@ export default {
   },
   mounted() {
     this.show_shequ_xiaoqu = this.$auth.hasRoleOr(["admin", "leader"]); //超级管理员 - 领导
-    this.show_net = this.$auth.authRoleNet("network"); //网格员
+    // this.show_net = this.$auth.authRoleNet("network"); //网格员
 
-    console.log(this.show_shequ_xiaoqu, this.show_net);
+    // console.log(this.show_shequ_xiaoqu, this.show_net);
 
     this.queryParams.shequId = this.queryParamsIndex.shequId;
     this.getDeptList();
@@ -427,7 +428,7 @@ export default {
      */
     async getList() {
       this.loading = true;
-      let result = await inputSearch(this.queryParams);
+      let result = await inputSearch2(this.queryParams);
       let handleColor = this.handleColor(result.data.xinxilist.rows);
       this.list = [...this.list, ...handleColor];
       this.houseTotal = result.data.count;

src/components/NavigationBar/userModel.vue

@@ -36,7 +36,8 @@ export default {
       })
         .then(() => {
           this.$store.dispatch("LogOut").then(() => {
-            location.href = "/index";
+            // location.href = "/index";
+            this.$router.replace("/login");
           });
         })
         .catch(() => {});

src/components/imageButton/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="image-button" :class="size" @click="clickBtn">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    // medium、small、mini
+    size: {
+      type: String,
+      default: "mini",
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    clickBtn() {
+      this.$emit("handlerClcik");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.image-button {
+  display: inline-block;
+  cursor: pointer;
+  color: #fff;
+  margin: 0 0 0 10px;
+  font-size: 14px;
+  background: url("~@/assets/images/ui/tab1.png");
+  background-size: 100% 100%;
+}
+.small {
+  padding: 3px 16px 5px 16px;
+}
+.mini {
+  padding: 2px 11px 4px 11px;
+}
+</style>

src/main.js

@@ -40,6 +40,8 @@ import {
   selectDictLabels,
   handleTree,
 } from "@/utils/ruoyi";
+//自定义按钮
+import imageButton from "@/components/imageButton";
 // 分页组件
 import Pagination from "@/components/Pagination";
 // 自定义表格工具组件
@@ -71,6 +73,7 @@ Vue.prototype.download = download;
 Vue.prototype.handleTree = handleTree;
 
 // 全局组件挂载
+Vue.component("imageButton", imageButton);
 Vue.component("DictTag", DictTag);
 Vue.component("Pagination", Pagination);
 Vue.component("RightToolbar", RightToolbar);

src/utils/request.js

@@ -1,114 +1,150 @@
-import axios from 'axios'
-import { Notification, MessageBox, Message, Loading } from 'element-ui'
-import store from '@/store'
-import { getToken } from '@/utils/auth'
-import errorCode from '@/utils/errorCode'
+import axios from "axios";
+import { Notification, MessageBox, Message, Loading } from "element-ui";
+import store from "@/store";
+import { getToken } from "@/utils/auth";
+import errorCode from "@/utils/errorCode";
 import { tansParams, blobValidate } from "@/utils/ruoyi";
-import cache from '@/plugins/cache'
-import { saveAs } from 'file-saver'
+import cache from "@/plugins/cache";
+import { saveAs } from "file-saver";
+import router from "@/router";
 
 let downloadLoadingInstance;
 // 是否显示重新登录
 export let isRelogin = { show: false };
 
-axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
+axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
 // 创建axios实例
 const service = axios.create({
   // axios中请求配置有baseURL选项，表示请求URL公共部分
   baseURL: process.env.VUE_APP_BASE_API,
   // 超时
-  timeout: 10000
-})
+  timeout: 10000,
+});
 
 // request拦截器
-service.interceptors.request.use(config => {
-  // 是否需要设置 token
-  const isToken = (config.headers || {}).isToken === false
-  // 是否需要防止数据重复提交
-  const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
-  if (getToken() && !isToken) {
-    config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
-  }
-  // get请求映射params参数
-  if (config.method === 'get' && config.params) {
-    let url = config.url + '?' + tansParams(config.params);
-    url = url.slice(0, -1);
-    config.params = {};
-    config.url = url;
-  }
-  if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
-    const requestObj = {
-      url: config.url,
-      data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
-      time: new Date().getTime()
+service.interceptors.request.use(
+  (config) => {
+    // 是否需要设置 token
+    const isToken = (config.headers || {}).isToken === false;
+    // 是否需要防止数据重复提交
+    const isRepeatSubmit = (config.headers || {}).repeatSubmit === false;
+    if (getToken() && !isToken) {
+      config.headers["Authorization"] = "Bearer " + getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
     }
-    const requestSize = Object.keys(JSON.stringify(requestObj)).length; // 请求数据大小
-    const limitSize = 5 * 1024 * 1024; // 限制存放数据5M
-    if (requestSize >= limitSize) {
-      console.warn(`[${config.url}]: ` + '请求数据大小超出允许的5M限制，无法进行防重复提交验证。')
-      return config;
+    // get请求映射params参数
+    if (config.method === "get" && config.params) {
+      let url = config.url + "?" + tansParams(config.params);
+      url = url.slice(0, -1);
+      config.params = {};
+      config.url = url;
     }
-    const sessionObj = cache.session.getJSON('sessionObj')
-    if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
-      cache.session.setJSON('sessionObj', requestObj)
-    } else {
-      const s_url = sessionObj.url;                  // 请求地址
-      const s_data = sessionObj.data;                // 请求数据
-      const s_time = sessionObj.time;                // 请求时间
-      const interval = 1000;                         // 间隔时间(ms)，小于此时间视为重复提交
-      if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
-        const message = '数据正在处理，请勿重复提交';
-        console.warn(`[${s_url}]: ` + message)
-        return Promise.reject(new Error(message))
+    if (
+      !isRepeatSubmit &&
+      (config.method === "post" || config.method === "put")
+    ) {
+      const requestObj = {
+        url: config.url,
+        data:
+          typeof config.data === "object"
+            ? JSON.stringify(config.data)
+            : config.data,
+        time: new Date().getTime(),
+      };
+      const requestSize = Object.keys(JSON.stringify(requestObj)).length; // 请求数据大小
+      const limitSize = 5 * 1024 * 1024; // 限制存放数据5M
+      if (requestSize >= limitSize) {
+        console.warn(
+          `[${config.url}]: ` +
+            "请求数据大小超出允许的5M限制，无法进行防重复提交验证。"
+        );
+        return config;
+      }
+      const sessionObj = cache.session.getJSON("sessionObj");
+      if (
+        sessionObj === undefined ||
+        sessionObj === null ||
+        sessionObj === ""
+      ) {
+        cache.session.setJSON("sessionObj", requestObj);
       } else {
-        cache.session.setJSON('sessionObj', requestObj)
+        const s_url = sessionObj.url; // 请求地址
+        const s_data = sessionObj.data; // 请求数据
+        const s_time = sessionObj.time; // 请求时间
+        const interval = 1000; // 间隔时间(ms)，小于此时间视为重复提交
+        if (
+          s_data === requestObj.data &&
+          requestObj.time - s_time < interval &&
+          s_url === requestObj.url
+        ) {
+          const message = "数据正在处理，请勿重复提交";
+          console.warn(`[${s_url}]: ` + message);
+          return Promise.reject(new Error(message));
+        } else {
+          cache.session.setJSON("sessionObj", requestObj);
+        }
       }
     }
+    return config;
+  },
+  (error) => {
+    console.log(error);
+    Promise.reject(error);
   }
-  return config
-}, error => {
-    console.log(error)
-    Promise.reject(error)
-})
+);
 
 // 响应拦截器
-service.interceptors.response.use(res => {
+service.interceptors.response.use(
+  (res) => {
     // 未设置状态码则默认成功状态
     const code = res.data.code || 200;
     // 获取错误信息
-    const msg = errorCode[code] || res.data.msg || errorCode['default']
+    const msg = errorCode[code] || res.data.msg || errorCode["default"];
     // 二进制数据则直接返回
-    if (res.request.responseType ===  'blob' || res.request.responseType ===  'arraybuffer') {
-      return res.data
+    if (
+      res.request.responseType === "blob" ||
+      res.request.responseType === "arraybuffer"
+    ) {
+      return res.data;
     }
     if (code === 401) {
       if (!isRelogin.show) {
         isRelogin.show = true;
-        MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
-          isRelogin.show = false;
-          store.dispatch('LogOut').then(() => {
-            location.href = '/index';
+        MessageBox.confirm(
+          "登录状态已过期，您可以继续留在该页面，或者重新登录",
+          "系统提示",
+          {
+            confirmButtonText: "重新登录",
+            cancelButtonText: "取消",
+            type: "warning",
+          }
+        )
+          .then(() => {
+            isRelogin.show = false;
+            store.dispatch("LogOut").then(() => {
+              // location.href = '/index';
+              router.replace("/login");
+            });
           })
-      }).catch(() => {
-        isRelogin.show = false;
-      });
-    }
-      return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
+          .catch(() => {
+            isRelogin.show = false;
+          });
+      }
+      return Promise.reject("无效的会话，或者会话已过期，请重新登录。");
     } else if (code === 500) {
-      Message({ message: msg, type: 'error' })
-      return Promise.reject(new Error(msg))
+      Message({ message: msg, type: "error" });
+      return Promise.reject(new Error(msg));
     } else if (code === 601) {
-      Message({ message: msg, type: 'warning' })
-      return Promise.reject('error')
+      Message({ message: msg, type: "warning" });
+      return Promise.reject("error");
     } else if (code !== 200) {
-      Notification.error({ title: msg })
-      return Promise.reject('error')
+      Notification.error({ title: msg });
+      return Promise.reject("error");
     } else {
-      return res.data
+      return res.data;
     }
   },
-  error => {
-    console.log('err' + error)
+  (error) => {
+    console.log("err" + error);
     let { message } = error;
     if (message == "Network Error") {
       message = "后端接口连接异常";
@@ -117,36 +153,48 @@ service.interceptors.response.use(res => {
     } else if (message.includes("Request failed with status code")) {
       message = "系统接口" + message.substr(message.length - 3) + "异常";
     }
-    Message({ message: message, type: 'error', duration: 5 * 1000 })
-    return Promise.reject(error)
+    Message({ message: message, type: "error", duration: 5 * 1000 });
+    return Promise.reject(error);
   }
-)
+);
 
 // 通用下载方法
 export function download(url, params, filename, config) {
-  downloadLoadingInstance = Loading.service({ text: "正在下载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
-  return service.post(url, params, {
-    transformRequest: [(params) => { return tansParams(params) }],
-    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    responseType: 'blob',
-    ...config
-  }).then(async (data) => {
-    const isBlob = blobValidate(data);
-    if (isBlob) {
-      const blob = new Blob([data])
-      saveAs(blob, filename)
-    } else {
-      const resText = await data.text();
-      const rspObj = JSON.parse(resText);
-      const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
-      Message.error(errMsg);
-    }
-    downloadLoadingInstance.close();
-  }).catch((r) => {
-    console.error(r)
-    Message.error('下载文件出现错误，请联系管理员！')
-    downloadLoadingInstance.close();
-  })
+  downloadLoadingInstance = Loading.service({
+    text: "正在下载数据，请稍候",
+    spinner: "el-icon-loading",
+    background: "rgba(0, 0, 0, 0.7)",
+  });
+  return service
+    .post(url, params, {
+      transformRequest: [
+        (params) => {
+          return tansParams(params);
+        },
+      ],
+      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      responseType: "blob",
+      ...config,
+    })
+    .then(async (data) => {
+      const isBlob = blobValidate(data);
+      if (isBlob) {
+        const blob = new Blob([data]);
+        saveAs(blob, filename);
+      } else {
+        const resText = await data.text();
+        const rspObj = JSON.parse(resText);
+        const errMsg =
+          errorCode[rspObj.code] || rspObj.msg || errorCode["default"];
+        Message.error(errMsg);
+      }
+      downloadLoadingInstance.close();
+    })
+    .catch((r) => {
+      console.error(r);
+      Message.error("下载文件出现错误，请联系管理员！");
+      downloadLoadingInstance.close();
+    });
 }
 
-export default service
+export default service;

src/views/components/xiaoqu/building.vue

@@ -50,27 +50,42 @@ export default {
       "houseItem",
     ]),
     groupedRooms() {
-      // 初始化每层楼的数组
-      let floors = Array.from({ length: this.info.floor }, () => []);
+      console.log(this.list.length, "总房屋数");
+      if (this.info.deptname == "嘉华园") {
+        // 对房间数据进行排序
+        const sortedRooms = this.list.sort((a, b) => {
+          a.keyId = uuidv4();
+          b.keyId = uuidv4();
+          a = this.handleColor(a);
+          b = this.handleColor(b);
+          // 提取房间号的后半部分进行比较
+          let roomA = parseInt(a.name.split("-")[1]);
+          let roomB = parseInt(b.name.split("-")[1]);
+          return roomA - roomB;
+        });
+        return [sortedRooms];
+      } else {
+        // 初始化每层楼的数组
+        let floors = Array.from({ length: this.info.floor }, () => []);
 
-      // 遍历房间数据
-      this.list.forEach((room) => {
-        // 提取房间号前几位作为楼层号
-        let floor = (parseInt(room.name) / 100) | 0;
-        room.keyId = uuidv4();
-        // 将房间加入对应楼层数组
-        if (floor > 0 && floor <= this.info.floor) {
-          floors[floor - 1].push(this.handleColor(room));
-        }
-      });
+        // 遍历房间数据
+        this.list.forEach((room) => {
+          // 提取房间号前几位作为楼层号
+          let floor = (parseInt(room.name) / 100) | 0;
+          room.keyId = uuidv4();
+          // 将房间加入对应楼层数组
+          if (floor > 0 && floor <= this.info.floor) {
+            floors[floor - 1].push(this.handleColor(room));
+          }
+        });
 
-      // 对每层楼的房间进行排序
-      floors.forEach((floorRooms) => {
-        floorRooms.sort((a, b) => parseInt(a.name) - parseInt(b.name));
-      });
+        // 对每层楼的房间进行排序
+        floors.forEach((floorRooms) => {
+          floorRooms.sort((a, b) => parseInt(a.name) - parseInt(b.name));
+        });
 
-      // 返回对象，键为楼层号（从1开始），值为对应的房间数组
-      return floors;
+        return floors.reverse();
+      }
     },
   },
   components: {

src/views/components/xiaoqu/house.vue

@@ -1,193 +1,327 @@
 <template>
-  <transition>
-    <div class="house-container" :style="{ width: handlerWidth }" v-show="show">
-      <div class="house-header">
-        <div class="houser-data">
-          <div class="house-main-row">
-            <div class="house-name">
-              <span class="number-font">{{ houseItem.name }}</span>
-              室（共<span class="number-font"> {{ total }} </span>人）
-            </div>
-            <div class="house-type">{{ houseItem.typename }}</div>
-            <ColorCell :item="houseItem"
-              ><span class="house-color">
-                {{ houseItem.color }}</span
-              ></ColorCell
-            >
-            <div
-              class="house-is"
-              style="border: 1px solid #81204e; color: #e73388"
-              v-show="houseItem.isD == 1"
-            >
-              中共党员
-            </div>
-            <div
-              class="house-is"
-              style="border: 1px solid #734700; color: #e09100"
-              v-show="houseItem.isK == 1"
-            >
-              帮扶对象
-            </div>
-            <div
-              class="house-is"
-              style="border: 1px solid #00694c; color: #00c185"
-              v-show="houseItem.isX == 1"
-            >
-              重点人群
-            </div>
-            <div
-              class="house-is"
-              style="border: 1px solid #006382; color: #02b4e7"
-              v-show="houseItem.isJ == 1"
-            >
-              退伍军人
+  <div class="house-container" :style="{ width: handlerWidth }" v-show="show">
+    <transition>
+      <div>
+        <div class="house-header">
+          <div class="houser-data">
+            <div class="house-main-row">
+              <div class="house-name">
+                <span class="number-font">{{ houseItem.name }}</span>
+                室（共<span class="number-font"> {{ total }} </span>人）
+              </div>
+              <div class="house-type">{{ houseData.typename }}</div>
+              <ColorCell :item="houseData"
+                ><span class="house-color">
+                  {{ houseData.color }}</span
+                ></ColorCell
+              >
+              <div
+                class="house-is"
+                style="border: 1px solid #81204e; color: #e73388"
+                v-show="houseData.isD == 1"
+              >
+                中共党员
+              </div>
+              <div
+                class="house-is"
+                style="border: 1px solid #734700; color: #e09100"
+                v-show="houseData.isK == 1"
+              >
+                帮扶对象
+              </div>
+              <div
+                class="house-is"
+                style="border: 1px solid #00694c; color: #00c185"
+                v-show="houseData.isX == 1"
+              >
+                重点人群
+              </div>
+              <div
+                class="house-is"
+                style="border: 1px solid #006382; color: #02b4e7"
+                v-show="houseData.isJ == 1"
+              >
+                退伍军人
+              </div>
             </div>
-          </div>
-          <div class="btn-group">
-            <div class="btn-gather" v-show="houseItem.color == 'NO'">
-              确认空关
+            <div class="btn-group">
+              <div class="btn-gather" v-show="houseData.color == 'NO'">
+                确认空关
+              </div>
+              <!-- <div class="btn-add"></div> -->
+              <imageButton size="small" @handlerClcik="addPerson()"
+                >添加居民</imageButton
+              >
+              <div class="btn-close" @click="handleClose()">关闭</div>
             </div>
-            <div class="btn-gather">房屋信息采集</div>
-            <div class="btn-add">添加居民</div>
-            <div class="btn-close" @click="handleClose()">关闭</div>
           </div>
+          <div class="house-address">公安地址：{{ houseData.address }}</div>
         </div>
-        <div class="house-address">公安地址：{{ houseItem.address }}</div>
-      </div>
-      <div class="house-list" v-if="total > 0">
-        <div class="list-item" v-for="item in list" :key="item.id">
-          <div class="person-icon">
-            <img :src="filterIcon(item.credentialNo)" alt="" />
-            <div class="person-name">{{ item.name }}</div>
-          </div>
-          <div class="person-data">
-            <div class="data-row">
-              <div class="row-item">
-                <div class="row-item-lable">
-                  性別：{{ getGender(item.credentialNo) }}
-                </div>
-                <div class="row-item-value"></div>
-              </div>
-              <div class="row-item">
-                <div class="row-item-lable">身份证号：</div>
-                <div class="row-item-value">{{ item.credentialNo }}</div>
-              </div>
-              <div class="row-item">
-                <div class="row-item-lable">户籍：</div>
-                <div
-                  class="row-item-value"
-                  :style="{ color: item.type == 1 ? '#00C185' : '#E73388' }"
-                >
-                  {{ item.typename }}
-                </div>
-              </div>
+        <div class="house-list" v-if="total > 0">
+          <div class="list-item" v-for="item in list" :key="item.id">
+            <div class="person-icon">
+              <img :src="filterIcon(item.credentialNo)" alt="" />
+              <div class="person-name">{{ item.name }}</div>
             </div>
-            <div class="data-row">
-              <div class="row-item">
-                <div class="row-item-lable">年龄：</div>
-                <div class="row-item-value">
-                  {{ calculateAge(item.credentialNo) }}岁
+            <div class="person-data">
+              <div class="data-row">
+                <div class="row-item">
+                  <div class="row-item-lable">
+                    性別：{{ getGender(item.credentialNo) }}
+                  </div>
+                  <div class="row-item-value"></div>
                 </div>
-              </div>
-              <div class="row-item">
-                <div class="row-item-lable">手机号：</div>
-                <div class="row-item-value">{{ item.phone }}</div>
-              </div>
-              <div class="row-item">
-                <div class="row-item-lable">分色：</div>
-                <div class="row-item-value">
-                  <ColorCell :item="item" size="small"
-                    ><span class="house-color">
-                      {{ item.color }}</span
-                    ></ColorCell
+                <div class="row-item">
+                  <div class="row-item-lable">身份证号：</div>
+                  <div class="row-item-value">{{ item.credentialNo }}</div>
+                </div>
+                <div class="row-item">
+                  <div class="row-item-lable">户籍：</div>
+                  <div
+                    class="row-item-value"
+                    :style="{ color: item.type == 1 ? '#00C185' : '#E73388' }"
                   >
+                    {{ item.typename }}
+                  </div>
                 </div>
               </div>
-            </div>
-            <div class="data-row">
-              <div class="row-item">
-                <div class="row-item-lable">出生年月：</div>
-                <div class="row-item-value">
-                  {{ extractBirthMonth(item.credentialNo) }}
+              <div class="data-row">
+                <div class="row-item">
+                  <div class="row-item-lable">年龄：</div>
+                  <div class="row-item-value">
+                    {{ calculateAge(item.credentialNo) }}岁
+                  </div>
                 </div>
-              </div>
-              <div class="row-item">
-                <div class="row-item-lable">数据更新时间：</div>
-                <div class="row-item-value" style="color: #ffb82f">
-                  {{ item.updateTime }}
+                <div class="row-item">
+                  <div class="row-item-lable">手机号：</div>
+                  <div class="row-item-value">{{ item.phone }}</div>
                 </div>
-              </div>
-              <div class="row-item">
-                <div class="row-item-lable">更新人员：</div>
-                <div class="row-item-value" style="color: #ffb82f">
-                  {{ item.updateBy }}
+                <div class="row-item">
+                  <div class="row-item-lable">分色：</div>
+                  <div class="row-item-value">
+                    <ColorCell :item="item" size="small"
+                      ><span class="house-color">
+                        {{ item.color }}</span
+                      ></ColorCell
+                    >
+                  </div>
                 </div>
               </div>
-            </div>
-            <div class="data-row last-row">
-              <div class="is-list">
-                <div
-                  class="house-is"
-                  style="border: 1px solid #81204e; color: #e73388"
-                  v-show="item.isD == 1"
-                >
-                  中共党员
-                </div>
-                <div
-                  class="house-is"
-                  style="border: 1px solid #734700; color: #e09100"
-                  v-show="item.isK == 1"
-                >
-                  帮扶对象
+              <div class="data-row">
+                <div class="row-item">
+                  <div class="row-item-lable">出生年月：</div>
+                  <div class="row-item-value">
+                    {{ extractBirthMonth(item.credentialNo) }}
+                  </div>
                 </div>
-                <div
-                  class="house-is"
-                  style="border: 1px solid #00694c; color: #00c185"
-                  v-show="item.isX == 1"
-                >
-                  重点人群
+                <div class="row-item">
+                  <div class="row-item-lable">数据更新时间：</div>
+                  <div class="row-item-value" style="color: #ffb82f">
+                    {{ item.updateTime }}
+                  </div>
                 </div>
-                <div
-                  class="house-is"
-                  style="border: 1px solid #006382; color: #02b4e7"
-                  v-show="item.isJ == 1"
-                >
-                  退伍军人
+                <div class="row-item">
+                  <div class="row-item-lable">更新人员：</div>
+                  <div class="row-item-value" style="color: #ffb82f">
+                    {{ item.updateBy }}
+                  </div>
                 </div>
               </div>
-              <div class="row-btn">
-                <div>删除</div>
-
-                <div>修改</div>
-                <div>设为户主</div>
+              <div class="data-row last-row">
+                <div class="is-list">
+                  <div
+                    class="house-is"
+                    style="border: 1px solid #81204e; color: #e73388"
+                    v-show="item.isD == 1"
+                  >
+                    中共党员
+                  </div>
+                  <div
+                    class="house-is"
+                    style="border: 1px solid #734700; color: #e09100"
+                    v-show="item.isK == 1"
+                  >
+                    帮扶对象
+                  </div>
+                  <div
+                    class="house-is"
+                    style="border: 1px solid #00694c; color: #00c185"
+                    v-show="item.isX == 1"
+                  >
+                    重点人群
+                  </div>
+                  <div
+                    class="house-is"
+                    style="border: 1px solid #006382; color: #02b4e7"
+                    v-show="item.isJ == 1"
+                  >
+                    退伍军人
+                  </div>
+                </div>
+                <div class="row-btn">
+                  <imageButton @handlerClcik="delPerson(item.id)"
+                    >删除</imageButton
+                  >
+                  <imageButton @handlerClcik="getPersonInfo(item.id)"
+                    >修改</imageButton
+                  >
+                </div>
               </div>
             </div>
           </div>
-          <div class="item-key" v-show="houseItem.holderId == item.id">
-            <span>户主</span>
-          </div>
+        </div>
+        <div v-else class="no-data">
+          <el-empty
+            :image="require('@/assets/images/ui/noData.png')"
+            description="暂无居民"
+          ></el-empty>
         </div>
       </div>
-      <div v-else class="no-data">
-        <el-empty
-          :image="require('@/assets/images/ui/noData.png')"
-          description="暂无居民"
-        ></el-empty>
+    </transition>
+    <!-- 添加修改居民 -->
+    <el-dialog
+      :visible.sync="open"
+      append-to-body
+      custom-class="taicang-dialog-small"
+    >
+      <div class="dialog-main">
+        <div class="dialog-title"><span></span> {{ title }}</div>
+        <el-form ref="form" :rules="rules" :model="form" label-position="top">
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="姓名" prop="name">
+                <el-input v-model="form.name"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="人员类型">
+                <el-checkbox-group v-model="multiple">
+                  <el-checkbox label="中共党员"></el-checkbox>
+                  <el-checkbox label="帮扶对象"></el-checkbox>
+                  <el-checkbox label="重点人群"></el-checkbox>
+                  <el-checkbox label="退伍军人"></el-checkbox>
+                </el-checkbox-group>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="身份证" prop="credentialNo">
+                <el-input v-model="form.credentialNo"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="工作单位">
+                <el-input v-model="form.workunit"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="手机号" prop="phone">
+                <el-input v-model="form.phone"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12"> </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="户籍" prop="color">
+                <el-radio-group v-model="form.color">
+                  <el-radio
+                    :label="dict.value"
+                    v-for="dict in dict.type.b_census_color_type"
+                    :key="dict.value"
+                    >{{ dict.value }}</el-radio
+                  >
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="流动" prop="color">
+                <el-radio-group v-model="form.color">
+                  <el-radio
+                    :label="dict.value"
+                    v-for="dict in dict.type.b_flow_color_type"
+                    :key="dict.value"
+                    >{{ dict.value }}</el-radio
+                  >
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="24">
+              <el-form-item label="备注">
+                <el-input type="textarea" v-model="form.remark"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <div class="dialog-btn-group">
+            <imageButton size="small" @handlerClcik="confirm()"
+              >确 定</imageButton
+            >
+            <imageButton size="small">取 消</imageButton>
+          </div>
+        </el-form>
       </div>
-    </div>
-  </transition>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
 import { mapGetters } from "vuex";
 import { getHouse } from "@/api/taicangpop/house.js";
-import { listPerson } from "@/api/taicangpop/person.js";
+import {
+  listPerson,
+  addPerson,
+  updatePerson,
+  delPerson,
+  getPerson,
+} from "@/api/taicangpop/person.js";
 import { pxToVw, handleColor } from "@/utils/myFuntion.js";
 import ColorCell from "@/components/ColorCell";
+
 export default {
   components: { ColorCell },
+  dicts: ["b_census_color_type", "b_flow_color_type"],
   data() {
     return {
+      houseData: {},
+      form: {
+        name: undefined,
+        credentialNo: undefined,
+        workunit: undefined,
+        phone: undefined,
+        color: undefined,
+        remark: undefined,
+        isD: undefined,
+        isK: undefined,
+        isJ: undefined,
+        isX: undefined,
+        userId: undefined,
+        houseId: undefined,
+        buildingId: undefined,
+        deptId: undefined,
+      },
+      rules: {
+        name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
+        credentialNo: [
+          { required: true, message: "身份证不能为空", trigger: "blur" },
+        ],
+        phone: [{ required: true, message: "手机号不能为空", trigger: "blur" }],
+        workunit: [
+          {
+            required: true,
+            message: "工作单位不能为空",
+            trigger: "change",
+          },
+        ],
+        color: [{ required: true, message: "分色不能为空", trigger: "change" }],
+      },
+      multiple: [],
+      title: "",
+      open: false,
       show: false,
       total: 0,
       list: [],
@@ -204,13 +338,98 @@ export default {
   },
 
   computed: {
-    ...mapGetters(["houseItem", "queryParamsXiaoqu"]),
+    ...mapGetters(["houseItem", "queryParamsXiaoqu", "userId"]),
     handlerWidth() {
       return pxToVw(this.houseItem.buildingWidth);
     },
   },
   created() {},
   methods: {
+    reset() {
+      this.form = {
+        id: null,
+        name: undefined,
+        credentialNo: undefined,
+        workunit: undefined,
+        phone: undefined,
+        color: undefined,
+        remark: undefined,
+        isD: undefined,
+        isK: undefined,
+        isJ: undefined,
+        isX: undefined,
+        userId: undefined,
+        houseId: undefined,
+        buildingId: undefined,
+        deptId: undefined,
+      };
+      this.multiple = [];
+    },
+    async getPersonInfo(id) {
+      let res = await getPerson(id);
+      this.reset();
+      this.title = "修改居民";
+      res.data.isD == "1" ? this.multiple.push("中共党员") : "";
+      res.data.isJ == "1" ? this.multiple.push("退伍军人") : "";
+      res.data.isK == "1" ? this.multiple.push("帮扶对象") : "";
+      res.data.isX == "1" ? this.multiple.push("重点人群") : "";
+
+      this.form = res.data;
+      this.open = true;
+    },
+    delPerson(ids) {
+      this.$modal
+        .confirm('是否确认删除居民管理编号为"' + ids + '"的数据项？')
+        .then(function () {
+          return delPerson(ids);
+        })
+        .then(() => {
+          this.getPersonList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
+    },
+    confirm() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          this.form.isD = this.multiple.some((item) => item == "中共党员")
+            ? 1
+            : 0;
+          this.form.isK = this.multiple.some((item) => item == "帮扶对象")
+            ? 1
+            : 0;
+          this.form.isJ = this.multiple.some((item) => item == "退伍军人")
+            ? 1
+            : 0;
+          this.form.isX = this.multiple.some((item) => item == "重点人群")
+            ? 1
+            : 0;
+          if (this.form.id != null) {
+            updatePerson(this.form).then((response) => {
+              this.open = false;
+              this.getPersonList();
+              this.$modal.msgSuccess("修改成功");
+            });
+          } else {
+            this.form.userId = this.userId;
+            this.form.buildingId = this.houseItem.buildingId;
+            this.form.houseId = this.houseItem.id;
+            this.form.deptId = this.houseItem.deptId;
+            addPerson(this.form).then((res) => {
+              this.open = false;
+              this.getPersonList();
+              this.$modal.msgSuccess("新增成功");
+            });
+          }
+        }
+      });
+    },
+    addPerson() {
+      this.reset();
+      this.title = "添加居民";
+      this.open = true;
+    },
+
     filterIcon(credentialNo) {
       let sex = this.getGender(credentialNo);
       if (sex == "男") {
@@ -226,8 +445,12 @@ export default {
     },
     async getPersonList() {
       let result = await getHouse(this.houseItem.id);
-      this.houseItem.holderId = result.data.holderId; //户主
-      this.houseItem.address = result.data.address;
+      this.houseData = handleColor([result.data])[0];
+
+      this.getList();
+    },
+
+    async getList() {
       let res = await listPerson({
         buildingId: this.houseItem.buildingId,
         houseId: this.houseItem.id,
@@ -351,15 +574,20 @@ div {
   top: 75px;
   left: 0;
   height: calc(100% - 75px);
-  display: flex;
-  overflow-y: auto;
-  background: #113666;
-  border: 1px solid #2d6cad;
-  border-right: 0px;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  padding: 15px;
+
+  & > div {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    overflow-y: auto;
+    background: #113666;
+    border: 1px solid #2d6cad;
+    border-right: 0px;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    padding: 15px;
+  }
   .house-header {
     .houser-data {
       display: flex;
@@ -478,26 +706,11 @@ div {
       display: flex;
       align-items: center;
     }
-    .is-list > div {
-      margin-right: 10px;
-    }
     .row-btn {
       flex-direction: row-reverse;
-
-      & > div {
-        cursor: pointer;
-        color: #fff;
-        margin: 0 0 0 10px;
-        font-size: 14px;
-
-        background: url("~@/assets/images/ui/btn_1@2x.png");
-        background-size: 100% 100%;
-        padding: 3px 15px;
-      }
-      & > div:last-child {
-        background: url("~@/assets/images/ui/tab1.png");
-        background-size: 100% 100%;
-      }
+    }
+    .is-list > div {
+      margin-right: 10px;
     }
   }
   .house-is {
@@ -567,4 +780,31 @@ div {
 ::-webkit-scrollbar-track {
   background: transparent;
 }
+::v-deep .el-form-item__label {
+  color: #7ff7ff;
+}
+::v-deep .el-form-item__content {
+  background: #162841;
+}
+::v-deep .el-checkbox-group {
+  padding-left: 10px;
+  .el-checkbox__label {
+    padding-left: 3px;
+    color: #aabace;
+  }
+  .el-checkbox {
+    margin-right: 12px;
+  }
+}
+
+::v-deep .el-radio-group {
+  padding-left: 10px;
+  .el-radio__label {
+    padding-left: 3px;
+    color: #aabace;
+  }
+  .el-radio {
+    margin-right: 12px;
+  }
+}
 </style>

src/views/components/xiaoqu/map/index.vue

@@ -73,13 +73,13 @@ export default {
     mapLoad(map) {
       let _this = this;
       this.map = map;
-
-      map.centerAt(this.config.viewHome, {
-        complete: function () {
-          //加载图层数据
-          _this.addMapLayer();
-        },
+      map.setSceneOptions({
+        center: this.config.viewHome,
+      });
+      this.map.on(mars3d.EventType.load, () => {
+        this.addMapLayer();
       });
+
       map.on(mars3d.EventType.click, function (e) {
         if (!e.id) {
           if (_this.geoJsonLayerDTH && _this.geoJsonLayerDTH.length > 0)
@@ -118,7 +118,6 @@ export default {
       ) {
         this.addGardenLayer();
       }
-
       this.addbuildingLayer();
     },
     //商铺面

src/views/components/xiaoqu/rightData/realTimeList.vue

@@ -105,10 +105,10 @@ export default {
 
       if (process.env.NODE_ENV === "development") return;
       this.timer = setInterval(() => {
-        if (this.items.length > 1000) {
-          //考虑dom太多影响到性能,每十秒删除后面100条数据,最后保留一千条
-          this.items.splice(-100);
-        }
+        // if (this.items.length > 1000) {
+        //   //考虑dom太多影响到性能,每十秒删除后面100条数据,最后保留一千条
+        //   this.items.splice(-100);
+        // }
         this.getList(true);
       }, 10000);
     },
@@ -130,7 +130,8 @@ export default {
             }, 500 * index);
           });
         } else {
-          this.items = res.data.list;
+          // this.items = res.data.list;
+          this.items = res.data.list.slice(0, 100);
         }
         this.totalData.houseCount =
           this.totalData.houseCount + res.data.houseCount;

src/views/index.vue

@@ -152,6 +152,15 @@ export default {
       let _this = this;
       this.map = map;
 
+      map.setSceneOptions({
+        cameraController: {
+          // enableZoom: false,
+          // enableTranslate: true,
+          // enableRotate: false,
+          enableTilt: false,
+        },
+      });
+
       map.on(mars3d.EventType.wheel, function (e) {
         _this.zoomChange();
       });

src/views/login.vue

@@ -207,7 +207,7 @@ export default {
   margin: 0px auto 30px auto;
   text-align: center;
   color: #00d8ff;
-  font-size: 30px;
+  font-size: 25px;
   font-family: "xiniu";
 }
 
@@ -215,26 +215,26 @@ export default {
   border-radius: 6px;
   background-image: url("../assets/images/ui/img_frame.png");
   background-size: 100% 100%;
-  width: 500px;
+  width: 450px;
   padding: 30px 35px 5px 35px;
   .el-input {
-    height: 50px;
+    height: 45px;
     input {
-      height: 50px;
-      font-size: 18px;
+      height: 45px;
+      font-size: 16px;
       color: #d8dde6;
       font-family: "Alibaba-PuHuiTi-Regular.otf";
       background: rgba(9, 27, 52, 0.2);
       border-color: #1489cc;
     }
     input::placeholder {
-      font-size: 18px;
+      font-size: 16px;
     }
   }
 
   .input-icon {
-    height: 50px;
-    width: 18px;
+    height: 45px;
+    width: 16px;
     margin-left: 2px;
     color: #1adcff;
   }
@@ -243,7 +243,7 @@ export default {
   color: #d8dde6;
 }
 .logo-btn {
-  height: 50px;
+  height: 45px;
   background: linear-gradient(
     0deg,
     rgba(7, 39, 64, 0.9) 0%,
@@ -268,10 +268,10 @@ export default {
 
 .login-code {
   width: 33%;
-  height: 50px;
+  height: 45px;
   float: right;
   img {
-    height: 50px;
+    height: 100%;
     width: 100%;
     cursor: pointer;
     vertical-align: middle;