完成小区相关的接口对接

2026-04-07 18:02:18 +08:00
parent ee55b4dca7
commit b87a594d4e
32 changed files with 913 additions and 384 deletions
--- a/.env.development
+++ b/.env.development
@@ -1,6 +1,7 @@
 # 页面标题
-VITE_APP_TITLE =
-VITE_APP_LOGO_TITLE = RuoYi-Vue-Plus
+VITE_APP_TITLE =  智慧物业后台管理系统
+
+VITE_APP_LOGO_TITLE = 智慧物业后台管理系统

 # 开发环境配置
 VITE_APP_ENV = 'development'
@@ -17,7 +18,7 @@ VITE_APP_MONITOR_ADMIN = 'http://192.168.0.222/admin/applications'
 # SnailJob 控制台地址
 VITE_APP_SNAILJOB_ADMIN = 'http://192.168.0.222/snail-job'

-VITE_APP_PORT = 80
+VITE_APP_PORT = 5173

 # 接口加密功能开关(如需关闭 后端也必须对应关闭)
 VITE_APP_ENCRYPT = true
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
    "axios": "1.13.6",
    "crypto-js": "4.2.0",
    "echarts": "6.0.0",
+    "element-china-area-data": "^6.1.0",
    "element-plus": "2.13.5",
    "file-saver": "2.0.5",
    "highlight.js": "11.11.1",
--- a/src/api/system/community/index.ts
+++ b/src/api/system/community/index.ts
@@ -0,0 +1,59 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { communitylist_rows_type } from './type';
+
+// 查询小区列表
+export function getCommunitylistAPI(): AxiosPromise<communitylist_rows_type[]> {
+  return request({
+    url: '/village/list',
+    method: 'get'
+  });
+}
+/** 通过小区id获取小区信息 */
+export function getVillageByIdAPI(id: string): AxiosPromise<communitylist_rows_type> {
+  return request({
+    url: `/village/${id}`,
+    method: 'get'
+  });
+}
+/** 删除小区 */
+export function deleteVillageByIdAPI(id: number): AxiosPromise<null> {
+  return request({
+    url: `/village/${id}`,
+    method: 'delete'
+  });
+}
+/** 上传小区图片 */
+export function uploadVillageImageAPI(formdata: FormData): AxiosPromise<{ fileName: string; url: string; ossId: string }[]> {
+  return request({
+    url: `/village/uploadImages`,
+    method: 'post',
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    },
+    data: formdata
+  });
+}
+/** 添加小区 */
+export function addVillageAPI<T>(data: T) {
+  return request({
+    url: `/village`,
+    method: 'post',
+    data: data
+  });
+}
+/** 添加小区 */
+export function editVillageAPI<T>(data: T) {
+  return request({
+    url: `/village`,
+    method: 'put',
+    data: data
+  });
+}
+/**切换小区 */
+export function switchVillageAPI(villageId: number) {
+  return request({
+    url: `/village/switchVillage/${villageId}`,
+    method: 'POST'
+  });
+}
--- a/src/api/system/community/type.ts
+++ b/src/api/system/community/type.ts
@@ -0,0 +1,20 @@
+export interface communitylist_rows_type {
+  villageId?: number;
+  villageName: string;
+  villageCode: string;
+  address: string;
+  houseUse: number | null;
+  villageArea: number;
+  remark: string;
+  parkingSpaceCount: number;
+  villageImageUrl: string;
+  city: string | string[];
+  status: '0' | '1';
+  manageName: string;
+  managePhone: string;
+  manageVx: string;
+  manageEmail: string;
+  manageQq: string;
+  completDate: string;
+  choiceStatus: 0 | 1;
+}
--- a/src/api/system/house/index.ts
+++ b/src/api/system/house/index.ts
@@ -0,0 +1,24 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { BuildingUnit, BuildingVo } from './type';
+
+// 楼栋---------------------------------------------------------------------------------------
+// 根据 小区id 和 类型 查询楼栋信息
+export function getBuildinglistAPI(villageId: number, buildingUse: number): AxiosPromise<BuildingVo[]> {
+  return request({
+    url: '/building/byVillage',
+    method: 'get',
+    params: {
+      villageId: villageId,
+      buildingUse: buildingUse
+    }
+  });
+}
+
+// 房屋----------------------------------------------------------------------------------------------
+export function getHouselistAPI(buildingId: number): AxiosPromise<BuildingUnit[]> {
+  return request({
+    url: `/house/groupByUnitTree/${buildingId}`,
+    method: 'get'
+  });
+}
--- a/src/api/system/house/type.ts
+++ b/src/api/system/house/type.ts
@@ -0,0 +1,65 @@
+export interface BuildingVo {
+  /**
+   * 楼栋名称/编号
+   */
+  buildingName: string;
+  /**
+   * 0住宅 1办公 2商用 3公寓
+   */
+  buildingUse: number;
+  /**
+   * 楼栋结构
+   */
+  buildStructure?: string;
+  /**
+   * 楼高
+   */
+  buildTall?: string;
+  /**
+   * 楼栋朝向
+   */
+  buildToward?: string;
+  /**
+   * 层数
+   */
+  floorCount?: number;
+  /**
+   * 楼栋ID
+   */
+  id: number;
+  /**
+   * 备注
+   */
+  remark?: string;
+  /**
+   * 单元数
+   */
+  unitCount?: number;
+  /**
+   * 所属小区ID
+   */
+  villageId?: number;
+  villageName?: string;
+}
+
+// 楼栋
+export interface BuildingUnit {
+  actualFloorCount: number;
+  buildingFloorCount: number;
+  buildingId: number;
+  buildingName: string;
+  totalHouses: number;
+  unitNo: string;
+  floors: string;
+  floors_Json?: FloorsType[];
+}
+// 楼层
+export interface FloorsType {
+  floorNo: string;
+  houses: HouseType[];
+}
+// 房间
+export interface HouseType {
+  houseId: number;
+  houseNo: string;
+}
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -17,15 +17,6 @@ body {
  background: var(--el-bg-color-page);
  font-family: 'MiSans', 'HarmonyOS Sans SC', 'PingFang SC', 'Source Han Sans SC', 'Noto Sans SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
 }
-/* 图片统一初始化 */
-img {
-  border: none;
-  vertical-align: middle;
-  max-width: 100%;
-  height: auto;
-  -webkit-user-drag: none;
-  user-select: none;
-}
 label {
  font-weight: 600;
 }
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
@@ -38,7 +38,6 @@ const getBreadcrumb = () => {
    matched = [{ path: '/index', meta: { title: '首页' } }].concat(matched);
  }
  levelList.value = matched.filter((item) => item.meta && item.meta.title && item.meta.breadcrumb !== false);
-  console.log(levelList.value);
 };
 const findPathNum = (str, char = '/') => {
  if (typeof str !== 'string' || str.length === 0) return 0;
--- a/src/components/ContextMenu/index.vue
+++ b/src/components/ContextMenu/index.vue
@@ -45,7 +45,6 @@ const open = async (e: MouseEvent, value: any) => {
  if (left + rect.width > window.innerWidth) {
    left = window.innerWidth - rect.width - 8;
  }
-  console.log('window', window.innerWidth);

  // 下边界碰撞
  if (top + rect.height > window.innerHeight) {
@@ -69,7 +68,6 @@ const open = async (e: MouseEvent, value: any) => {
 // 关闭
 const close = () => {
  show.value = false;
-  console.log('close');
  document.removeEventListener('click', close);
  document.removeEventListener('contextmenu', close);
 };
--- a/src/components/Pageheader/index.vue
+++ b/src/components/Pageheader/index.vue
@@ -14,8 +14,6 @@
 </template>

 <script setup lang="ts">
-import { ref } from 'vue';
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 import Breadcrumb from '@/components/Breadcrumb/index.vue';
 const slots = useSlots();
 const showSlot = computed(() => {
@@ -28,6 +26,10 @@ const props = defineProps({
    default: '房屋管理'
  }
 });
+
+defineSlots<{
+  content?: () => void;
+}>();
 </script>

 <style scoped lang="scss">
--- a/src/components/Process/submitVerify.vue
+++ b/src/components/Process/submitVerify.vue
@@ -271,7 +271,6 @@ const openDialog = async (id?: string) => {
  selectCopyUserList.value = task.value.copyList;
  selectCopyUserIds.value = task.value.copyList.map((e) => e.userId).join(',');
  varNodeList.value = task.value.varList;
-  console.log('varNodeList', varNodeList.value);
  buttonDisabled.value = false;
  try {
    const data = {
--- a/src/enums/RespEnum.ts
+++ b/src/enums/RespEnum.ts
@@ -56,9 +56,9 @@ export enum HttpStatus {
   */
  UNSUPPORTED_TYPE = 415,
  /**
-   * 系统内部错误
+   * 图片上传-全部失败
   */
-  SERVER_ERROR = 500,
+  UPLOAD_IMG_ALL_ERROR = 500,
  /**
   * 接口未实现
   */
@@ -84,7 +84,7 @@ export enum HttpStatus {
   */
  DATABASE_ERROR = 522,
  /**
-   * 系统警告消息
+   * 图片上传-部分失败
   */
-  WARN = 601
+  UPLOAD_IMG_ERROR = 601
 }
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,10 +1,7 @@
 <template>
  <div class="navbar" :class="'nav' + navType">
-    <!-- <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggle-click="toggleSideBar" /> -->
-    <!-- <breadcrumb v-if="navType == NavTypeEnum.LEFT" id="breadcrumb-container" class="breadcrumb-container" /> -->
    <div class="right-menu flex align-center">
      <template v-if="appStore.device !== 'mobile'">
-        <!-- 消息 -->
        <el-tooltip :content="proxy.$t('navbar.message')" effect="dark" placement="bottom">
          <div>
            <el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false">
@@ -31,12 +28,9 @@
              <el-dropdown-item divided command="changecommunity">
                <span>{{ proxy.$t('navbar.community') }}</span>
              </el-dropdown-item>
-              <router-link v-if="!dynamic" to="/user/profile">
+              <router-link to="/user/profile">
                <el-dropdown-item>{{ proxy.$t('navbar.personalCenter') }}</el-dropdown-item>
              </router-link>
-              <el-dropdown-item v-if="settingsStore.showSettings" command="setLayout">
-                <span>{{ proxy.$t('navbar.layoutSetting') }}</span>
-              </el-dropdown-item>
              <el-dropdown-item divided command="logout">
                <span>{{ proxy.$t('navbar.logout') }}</span>
              </el-dropdown-item>
@@ -93,7 +87,6 @@ const logout = async () => {

 const routerPush = useRouter();
 const changecommunity = () => {
-  console.log('change community');
  routerPush.push({
    path: '/community'
  });
@@ -152,8 +145,9 @@ watch(
  height: 50px;
  overflow: hidden;
  position: relative;
-  background: var(--el-bg-color);
-  border-bottom: 1px solid var(--el-border-color-lighter);
+  background: #1a75ff;
+  color: #fff;
+  border-bottom: 1px solid #1a75ff;
  box-shadow: none;
  display: flex;
  align-items: center;
@@ -218,16 +212,16 @@ watch(
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
-      color: var(--el-text-color-regular);
+      color: #fff;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;

-        &:hover {
-          background: var(--el-fill-color-lighter);
-        }
+        // &:hover {
+        //   background: var(--el-fill-color-lighter);
+        // }
      }
    }

--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="sidebar-logo-container"
-    :class="{ collapse: collapse }"
-  >
+  <div class="sidebar-logo-container" :class="{ collapse: collapse }">
    <transition :enter-active-class="proxy?.animate.logoAnimate.enter" mode="out-in">
      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
        <img v-if="logo" :src="logo" class="sidebar-logo" />
@@ -11,7 +8,6 @@
        </h1>
      </router-link>
      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo" />
        <h1 class="sidebar-title">
          {{ title }}
        </h1>
@@ -41,24 +37,24 @@ const sideTheme = computed(() => settingsStore.sideTheme);
 // 获取Logo背景色
 const getLogoBackground = computed(() => {
  if (settingsStore.isDark) {
-    return 'var(--sidebar-bg)'
+    return 'var(--sidebar-bg)';
  }
  if (settingsStore.navType == NavTypeEnum.TOP) {
-    return variables.menuLightBackground
+    return variables.menuLightBackground;
  }
-  return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBackground
-})
+  return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBackground;
+});

 // 获取Logo文字颜色
 const getLogoTextColor = computed(() => {
  if (settingsStore.isDark) {
-    return 'var(--sidebar-text)'
+    return 'var(--sidebar-text)';
  }
  if (settingsStore.navType == NavTypeEnum.TOP) {
-    return variables.logoLightTitleColor
+    return variables.logoLightTitleColor;
  }
-  return sideTheme.value === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor
-})
+  return sideTheme.value === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor;
+});
 </script>

 <style lang="scss" scoped>
@@ -75,9 +71,10 @@ const getLogoTextColor = computed(() => {
  position: relative;
  height: 50px;
  line-height: 50px;
-  background: v-bind(getLogoBackground);
+  background-color: #1a75ff;
  text-align: center;
  overflow: hidden;
+  box-shadow: none;

  & .sidebar-logo-link {
    height: 100%;
@@ -98,7 +95,12 @@ const getLogoTextColor = computed(() => {
      font-weight: 600;
      line-height: 50px;
      font-size: 14px;
-      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+      font-family:
+        Avenir,
+        Helvetica Neue,
+        Arial,
+        Helvetica,
+        sans-serif;
      vertical-align: middle;
    }
  }
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -50,7 +50,6 @@ const activeMenu = computed(() => {
  }
  return path;
 });
-
 const bgColor = computed(() => (sideTheme.value === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground));
 const textColor = computed(() => (sideTheme.value === 'theme-dark' ? variables.menuColor : variables.menuLightColor));
 </script>
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -12,7 +12,7 @@
        @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
        @contextmenu.prevent="openMenu(tag, $event)"
      >
-        <svg-icon v-if="tagsIcon && tag.meta && tag.meta.icon && tag.meta.icon !== '#'" :icon-class="tag.meta.icon"/>
+        <svg-icon v-if="tagsIcon && tag.meta && tag.meta.icon && tag.meta.icon !== '#'" :icon-class="tag.meta.icon" />
        <span class="tags-view-item-title">{{ tag.title }}</span>
        <span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)">
          <close class="el-icon-close" style="width: 1em; height: 1em; vertical-align: middle" />
@@ -52,7 +52,7 @@ const router = useRouter();
 const visitedViews = computed(() => useTagsViewStore().getVisitedViews());
 const routes = computed(() => usePermissionStore().getRoutes());
 const theme = computed(() => useSettingsStore().theme);
-const tagsIcon = computed(() => useSettingsStore().tagsIcon)
+const tagsIcon = computed(() => useSettingsStore().tagsIcon);

 watch(route, () => {
  addTags();
@@ -261,7 +261,11 @@ onMounted(() => {
      margin-left: 5px;
      margin-top: 4px;
      border-radius: var(--app-radius-md);
-      transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+      transition:
+        box-shadow 0.2s ease,
+        transform 0.2s ease,
+        border-color 0.2s ease,
+        color 0.2s ease;
      &:hover {
        color: var(--el-color-primary);
        border-color: var(--el-color-primary-light-5);
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -65,7 +65,7 @@ export const constantRoutes: RouteRecordRaw[] = [
        name: 'AddCommunity',
        hidden: true,
        meta: {
-          title: '新建小区'
+          title: '小区管理'
        },
        component: () => import('@/views/community/AddCommunity.vue')
      }
--- a/src/settings.ts
+++ b/src/settings.ts
@@ -12,7 +12,7 @@ const setting: DefaultSettings = {
  /**
   * 侧边栏主题 深色主题theme-dark，浅色主题theme-light
   */
-  sideTheme: 'theme-dark',
+  sideTheme: 'theme-light',
  /**
   * 是否系统布局配置
   */
--- a/src/store/modules/house.ts
+++ b/src/store/modules/house.ts
@@ -1,16 +1,55 @@
+import { getCommunitylistAPI } from '@/api/system/community';
+import { communitylist_rows_type } from '@/api/system/community/type';
+import { getBuildinglistAPI, getHouselistAPI } from '@/api/system/house';
+import { BuildingUnit, BuildingVo } from '@/api/system/house/type';
 import { defineStore } from 'pinia';
-import { reactive } from 'vue';

 export const useHouseStore = defineStore('house', () => {
-  const state = reactive({
-    // 小区信息
-    communityInfo: {},
-    // 楼栋信息
-    houseList: [],
-    // 房屋信息
-    houseInfo: {}
-  });
+  // 当前小区信息
+  const currentVilageInfo = ref<communitylist_rows_type>();
+
+  // 当前小区 所有楼栋信息
+  const currentBuildingInfoList = ref<BuildingVo[]>([]);
+  // 当前楼栋信息
+  const currentBuildingInfo = ref<BuildingVo>();
+
+  // 当前楼栋 所有房屋信息
+  const currentHouseInfoList = ref<BuildingUnit[]>([]);
+
+  // 初始化
+  const initHouse = async (buildingtype: number) => {
+    const res = await getCommunitylistAPI();
+    const currentVilage = res.rows.find((item) => item.choiceStatus === 0);
+    currentVilageInfo.value = currentVilage;
+    // 获取当前小区 所有楼栋信息
+    const res2 = await getBuildinglistAPI(currentVilage.villageId, buildingtype);
+    currentBuildingInfoList.value = res2.data;
+    // 获取当前小区 楼栋信息
+    currentBuildingInfo.value = res2.data[0];
+    // 获取当前楼栋 所有房屋信息
+    const res3 = await getHouselistAPI(currentBuildingInfo.value.id);
+    currentHouseInfoList.value = res3.data;
+  };
+
+  // 切换住宅类型
+  const switchHouseType = (housetype: 0 | 1 | 2 | 3) => {
+    getBuildinglistAPI(currentVilageInfo.value.villageId, housetype)
+      .then(() => ElMessage.success('切换成功'))
+      .catch(() => ElMessage.error('切换失败'));
+  };
+
+  // 切换楼栋
+  const switchBuilding = (buildingId: number) => {
+    getHouselistAPI(buildingId).then(() => ElMessage.success('切换成功'));
+  };
+
  return {
-    state
+    currentVilageInfo,
+    currentBuildingInfoList,
+    currentBuildingInfo,
+    currentHouseInfoList,
+    initHouse,
+    switchHouseType,
+    switchBuilding
  };
 });
--- a/src/store/modules/settings.ts
+++ b/src/store/modules/settings.ts
@@ -4,7 +4,6 @@ import { useDynamicTitle } from '@/utils/dynamicTitle';
 import { useStorage } from '@vueuse/core';
 import { ref } from 'vue';
 import { NavTypeEnum } from '@/enums/NavTypeEnum';
-
 export const useSettingsStore = defineStore('setting', () => {
  const storageSetting = useStorage<LayoutSetting>('layout-setting', {
    topNav: defaultSettings.topNav,
--- a/src/types/axios.d.ts
+++ b/src/types/axios.d.ts
@@ -4,6 +4,6 @@ declare module 'axios' {
    code: number;
    msg: string;
    rows: T;
-    total: number;
+    total?: number;
  }
 }
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -151,12 +151,14 @@ service.interceptors.response.use(
        });
      }
      return Promise.reject('无效的会话，或者会话已过期，请重新登录。');
-    } else if (code === HttpStatus.SERVER_ERROR) {
-      ElMessage({ message: msg, type: 'error' });
-      return Promise.reject(new Error(msg));
-    } else if (code === HttpStatus.WARN) {
-      ElMessage({ message: msg, type: 'warning' });
+      // 图片上传全部失败 500
+    } else if (code === HttpStatus.UPLOAD_IMG_ALL_ERROR) {
+      ElMessage({ message: '图片全部上传失败', type: 'error' });
      return Promise.reject(new Error(msg));
+      // 图片上传部分失败 601
+    } else if (code === HttpStatus.UPLOAD_IMG_ERROR) {
+      ElMessage({ message: '部分图片上传失败', type: 'warning' });
+      return Promise.reject(res.data);
    } else if (code !== HttpStatus.SUCCESS) {
      ElNotification.error({ title: msg });
      return Promise.reject('error');
--- a/src/utils/vartype.ts
+++ b/src/utils/vartype.ts
@@ -0,0 +1,9 @@
+// 判断是不是 File 文件
+function isFile(file) {
+  return file instanceof File;
+}
+
+// 判断是不是字符串
+function isString(str) {
+  return typeof str === 'string';
+}
--- a/src/views/community/AddCommunity.vue
+++ b/src/views/community/AddCommunity.vue
@@ -1,32 +1,39 @@
 <template>
-  <div class="container AddBuildingBox">
-    <PageHeader title="新建小区"></PageHeader>
-    <el-form inline class="formBody" ref="formRef" :model="form" :rules="rules" label-width="100px">
-      <div class="AddBuildingBody">
-        <div class="title">基本信息</div>
-        <div class="addBuildingFormBody">
-          <el-form-item label="小区名称" prop="buildingName">
-            <el-input v-model="form.buildingName" placeholder="请输入小区名称" />
-          </el-form-item>
-          <el-form-item label="小区编号" prop="buildingCode">
-            <el-input v-model="form.buildingCode" placeholder="请输入小区编号" />
-          </el-form-item>
-          <el-form-item label="所在城市" prop="buildingType">
-            <el-input v-model="form.buildingType" placeholder="请输入楼高(m)" />
-          </el-form-item>
-          <el-form-item label="详细地址" prop="buildingArea">
-            <el-input v-model="form.buildingArea" placeholder="请输入楼栋结构" />
-          </el-form-item>
-          <el-form-item label="建成时间" prop="buildingArea">
-            <el-date-picker v-model="builtTime" type="date" placeholder="选择建成时间" />
-          </el-form-item>
-          <el-form-item label="房屋用途" prop="buildingArea">
-            <el-input v-model="form.buildingArea" placeholder="请输入楼栋结构" />
-          </el-form-item>
-          <el-form-item label="小区面积" prop="buildingArea">
-            <el-input v-model="form.buildingArea" placeholder="请输入小区面积"><template #append>㎡</template> </el-input>
-          </el-form-item>
-          <el-form-item label="小区楼栋" prop="buildingArea">
+  <div class="box">
+    <div class="header">
+      <span>智慧物业后台管理系统</span>
+      <navbar ref="navbarRef" />
+    </div>
+    <div class="container AddBuildingBox">
+      <PageHeader :title="isedit ? '编辑小区' : '添加小区'"> </PageHeader>
+      <el-form inline class="formBody" ref="formRef" :model="form" :rules="rules" label-width="100px">
+        <div class="AddBuildingBody">
+          <div class="title">基本信息</div>
+          <div class="addBuildingFormBody">
+            <el-form-item label="小区名称" prop="villageName">
+              <el-input v-model.trim="form.villageName" placeholder="请输入小区名称" />
+            </el-form-item>
+            <el-form-item label="小区编号" prop="villageCode">
+              <el-input v-model.trim="form.villageCode" placeholder="请输入小区编号" />
+            </el-form-item>
+            <el-form-item label="所在城市" prop="city">
+              <el-cascader :options="pcaTextArrlist" v-model="city" @change="cityChange"> </el-cascader>
+            </el-form-item>
+            <el-form-item label="详细地址" prop="buildingArea">
+              <el-input v-model.trim="form.address" placeholder="请输入详细地址" />
+            </el-form-item>
+            <el-form-item label="建成时间" prop="buildingArea">
+              <el-date-picker v-model="builtTime" type="date" placeholder="选择建成时间" value-format="YYYY-MM-DD" @change="changeBuiltTime" />
+            </el-form-item>
+            <el-form-item label="房屋用途" prop="buildingArea">
+              <el-select v-model="form.houseUse" placeholder="请选择房屋用途" style="width: 240px">
+                <el-option v-for="item in houseUserList" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="小区面积" prop="villageArea">
+              <el-input v-model.trim.number="form.villageArea" placeholder="请输入小区面积"><template #append>㎡</template> </el-input>
+            </el-form-item>
+            <!-- <el-form-item label="小区楼栋" prop="buildingArea">
            <el-input v-model="form.buildingArea" placeholder="请输入小区楼栋"><template #append>栋</template> </el-input>
          </el-form-item>
          <el-form-item label="小区房屋" prop="buildingArea">
@@ -34,81 +41,339 @@
          </el-form-item>
          <el-form-item label="小区面积" prop="buildingArea">
            <el-input v-model="form.buildingArea" placeholder="请输入小区面积"><template #append>㎡</template> </el-input>
-          </el-form-item>
-          <el-form-item label="车位数量" prop="buildingArea">
-            <el-input v-model="form.buildingArea" placeholder="请输入车位数量">
-              <template #append>个</template>
-            </el-input>
-          </el-form-item>
-          <el-form-item style="width: 100%" label="小区图片" prop="buildingArea">
-            <el-input v-model="form.buildingArea" placeholder="请输入楼栋结构" />
-          </el-form-item>
-          <el-form-item style="width: 100%" label="小区简介" prop="buildingArea">
-            <el-input v-model="form.textarea" :rows="5" type="textarea" placeholder="小区简介" />
-          </el-form-item>
-        </div>
-      </div>
-      <div class="AddBuildingBody">
-        <div class="title">负责人信息</div>
-        <div class="addBuildingFormBody addBuildingForm_User_Body">
-          <el-form-item label="姓名" prop="buildingName">
-            <el-input v-model="form.buildingName" placeholder="请输入姓名" />
-          </el-form-item>
-          <el-form-item label="电话" prop="buildingCode">
-            <el-input v-model="form.buildingCode" placeholder="请输入电话" />
-          </el-form-item>
-          <el-form-item label="微信" prop="buildingArea">
-            <el-input v-model="form.buildingArea" placeholder="请输入微信"> </el-input>
-          </el-form-item>
-          <el-form-item label="QQ" prop="buildingArea">
-            <el-input v-model="form.buildingArea" placeholder="请输入QQ"> </el-input>
-          </el-form-item>
-          <el-form-item label="邮箱" prop="buildingArea">
-            <el-input v-model="form.buildingArea" placeholder="请输入邮箱"> </el-input>
-          </el-form-item>
-          <div class="pl-100px">
-            <el-button type="primary" @click="submitForm">提交</el-button>
-            <el-button @click="cancelForm">取消</el-button>
+          </el-form-item> -->
+            <el-form-item label="车位数量" prop="parkingSpaceCount">
+              <el-input v-model.trim.number="form.parkingSpaceCount" placeholder="请输入车位数量">
+                <template #append>个</template>
+              </el-input>
+            </el-form-item>
+            <el-form-item style="width: 100%" label="小区图片">
+              <el-upload
+                accept=".jpg, .png"
+                ref="uploadRef"
+                :action="uploadfileurl"
+                :headers="headerToken()"
+                list-type="picture-card"
+                :file-list="villageImg"
+                :auto-upload="false"
+                @change="handleUploadChange"
+                @before-upload="handleBeforeUpload"
+              >
+                <el-icon><Plus /></el-icon>
+                <template #file="{ file }">
+                  <div>
+                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
+                    <span class="el-upload-list__item-actions">
+                      <span class="el-upload-list__item-delete" @click="handleRemove(file)">
+                        <el-icon><Delete /></el-icon>
+                      </span>
+                    </span>
+                  </div>
+                </template>
+                <template #tip>
+                  <div class="el-upload__tip">支持jpg, png等格式文件上传，文件大小不超过10MB，可上传多张</div>
+                </template>
+              </el-upload>
+            </el-form-item>
+            <el-form-item style="width: 100%" label="小区简介">
+              <el-input v-model.trim="form.remark" :rows="5" type="textarea" placeholder="小区简介" />
+            </el-form-item>
          </div>
        </div>
-      </div>
-    </el-form>
+        <div class="AddBuildingBody">
+          <div class="title">负责人信息</div>
+          <div class="addBuildingFormBody addBuildingForm_User_Body">
+            <el-form-item label="姓名">
+              <el-input v-model.trim="form.manageName" placeholder="请输入姓名" />
+            </el-form-item>
+            <el-form-item label="电话">
+              <el-input v-model.trim="form.managePhone" placeholder="请输入电话" />
+            </el-form-item>
+            <el-form-item label="微信">
+              <el-input v-model.trim="form.manageVx" placeholder="请输入微信"> </el-input>
+            </el-form-item>
+            <el-form-item label="QQ">
+              <el-input v-model.trim="form.manageQq" placeholder="请输入QQ"> </el-input>
+            </el-form-item>
+            <el-form-item label="邮箱">
+              <el-input v-model.trim="form.manageEmail" placeholder="请输入邮箱"> </el-input>
+            </el-form-item>
+            <div class="pl-100px">
+              <el-button type="primary" @click="submitForm">提交</el-button>
+              <el-button @click="cancelForm">取消</el-button>
+            </div>
+          </div>
+        </div>
+      </el-form>
+    </div>
  </div>
 </template>

 <script setup lang="ts">
+import Navbar from '@/layout/components/Navbar.vue';
 import { ref } from 'vue';
 import PageHeader from '@/components/Pageheader/index.vue';
+import { pcaTextArr } from 'element-china-area-data';
+import type { DataItem } from 'element-china-area-data';
+import { useUserStore } from '@/store/modules/user';
+import { CascaderValue } from 'element-plus';
+import { addVillageAPI, editVillageAPI, getVillageByIdAPI, uploadVillageImageAPI } from '@/api/system/community/index';
+import { communitylist_rows_type } from '@/api/system/community/type';
+const route = useRoute();
+const router = useRouter();
+const editId = ref(route.query.id as string);
+const isedit = computed(() => Boolean(editId.value));
+
+const apipriex = import.meta.env.VITE_APP_BASE_API;
+const uploadfileurl = `${apipriex}/village/uploadImages`;
+// 获取省 市 区
+const pcaTextArrlist = ref<DataItem[]>(pcaTextArr);
+// 获取小区用途
+const houseUserList = ref([
+  {
+    value: 0,
+    label: '住宅'
+  },
+  {
+    value: 1,
+    label: '商住两用'
+  },
+  {
+    value: 2,
+    label: '商业'
+  },
+  {
+    value: 3,
+    label: '办公'
+  }
+]);
 const formRef = ref();
-const form = ref({
-  buildingName: '',
-  buildingCode: '',
-  buildingType: '',
-  buildingArea: '',
-  buildingAddress: null,
-  buildingDescription: null,
-  textarea: ''
+const uploadRef = ref();
+
+const form = ref<communitylist_rows_type>({
+  villageName: '',
+  villageCode: '',
+  address: '',
+  houseUse: null,
+  villageArea: 0,
+  remark: '',
+  parkingSpaceCount: 0,
+  villageImageUrl: '',
+  city: '',
+  status: '0',
+  choiceStatus: 1, // 0  选择 1未选择
+  manageName: '',
+  managePhone: '',
+  manageVx: '',
+  manageEmail: '',
+  manageQq: '',
+  completDate: ''
 });
 const builtTime = ref(null);
+const city = ref<string[]>([]);
+const villageImg = ref([]);
+
+// 表单验证
 const rules = ref({
-  buildingName: [{ required: true, message: '请输入楼栋名称', trigger: 'blur' }],
-  buildingAddress: [{ required: true, message: '请输入单元数', trigger: 'blur' }],
-  buildingDescription: [{ required: true, message: '请输入楼层', trigger: 'blur' }]
+  villageName: [{ required: true, message: '请输入小区名称', trigger: 'blur' }],
+  villageCode: [{ required: true, message: '请输入小区编号', trigger: 'blur' }],
+  city: [{ required: true, message: '请选择城市', trigger: 'blur' }]
 });

+/** 获取编辑小区的信息 */
+function getCommunityinfo() {
+  getVillageByIdAPI(editId.value).then((res) => {
+    city.value = (res.data.city as string).split('/');
+    if (res.data.villageImageUrl) {
+      villageImg.value = res.data.villageImageUrl
+        .split(',')
+        .filter((item) => item !== '')
+        .map((item) => {
+          return {
+            name: item.split('/').pop(),
+            url: item
+          };
+        });
+    }
+    builtTime.value = res.data.completDate.split(' ')[0];
+    form.value = {
+      ...res.data,
+      completDate: builtTime.value
+    };
+  });
+}
+if (isedit.value) {
+  getCommunityinfo();
+}
+// 请求头
+function headerToken() {
+  const useStore = useUserStore();
+  return {
+    Authorization: 'Bearer ' + useStore.token
+  };
+}
+
+/** 检测文件大小和格式 */
+function handleBeforeUpload(file: UploadFile): Promise<boolean | { file: UploadFile; type: string }> {
+  return new Promise((resolve, reject) => {
+    const isLt10M = file.size / 1024 / 1024 < 10;
+    if (!isLt10M) {
+      reject({
+        type: '文件大小错误',
+        file: file
+      });
+    } else if (file.raw.type !== 'image/jpeg' && file.raw.type !== 'image/png') {
+      reject({
+        type: '文件类型错误',
+        file: file
+      });
+    } else {
+      resolve(true);
+    }
+  });
+}
+/** 上传狗子 */
+async function handleUploadChange(file: UploadFile) {
+  const isupload = await handleBeforeUpload(file);
+  if (typeof isupload === 'object') {
+    ElMessage.error(isupload.type);
+    return;
+  } else if (typeof isupload === 'boolean' && isupload === true) {
+    villageImg.value.push(file.raw);
+  }
+}
+
+/** 移除钩子 */
+const handleRemove = (file: UploadFile) => {
+  villageImg.value = villageImg.value.filter((item) => item.uid !== file.uid);
+};
+
+// 改变时间
+const changeBuiltTime = (value: string) => {
+  form.value.completDate = value;
+};
+const cityChange = (value: CascaderValue[]) => {
+  form.value.city = value.join('/');
+};
+
+const reg = {
+  phone: /^1[3-9]\d{9}$/,
+  email: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
+  qq: /^[1-9]\d{4,11}$/,
+  wechat: /^[a-zA-Z][a-zA-Z0-9_-]{5,19}$/
+};
+
+// 使用
+reg.phone.test('13800138000');
+//  上传图片
 const submitForm = () => {
  formRef.value?.validate(async (valid: boolean) => {
    if (valid) {
-      console.log(form.value);
+      // 1) 将图片拆分为“新上传文件”和“已有图片URL”
+      const newFiles: File[] = [];
+      const existingUrls: string[] = [];
+      villageImg.value.forEach((item: any) => {
+        // 新增图片：handleUploadChange push 进来的是 File
+        if (item instanceof File) {
+          newFiles.push(item);
+          return;
+        }
+        // 编辑态已有图片：通常是 { name, url } 结构
+        if (item && typeof item === 'object' && typeof item.url === 'string') {
+          existingUrls.push(item.url);
+          return;
+        }
+        // 兜底：如果有字符串URL也兼容
+        if (typeof item === 'string') {
+          existingUrls.push(item);
+        }
+      });
+      // 2) 没有新文件：不调用上传接口，直接用已有URL提交
+      if (newFiles.length === 0) {
+        form.value.villageImageUrl = existingUrls.join(',');
+        submitFormInfo();
+        return;
+      }
+
+      // 3) 有新文件：先上传新文件，再与已有URL合并
+      const formdata = new FormData();
+      newFiles.forEach((file) => formdata.append('files', file));
+
+      uploadVillageImageAPI(formdata).then((res) => {
+        const uploadedUrls = res.data.map((x) => x.url).filter(Boolean);
+        // 4) 最终图片 = 已有图片 + 新上传图片（避免覆盖）
+        form.value.villageImageUrl = [...existingUrls, ...uploadedUrls].join(',');
+        submitFormInfo();
+      });
    }
  });
 };
+
+function submitFormInfo() {
+  if (form.value.managePhone.trim()) {
+    if (reg.phone.test(form.value.managePhone)) {
+      ElMessage.error('请输入正确的手机号码');
+      return;
+    }
+  }
+  if (form.value.manageVx.trim()) {
+    if (reg.wechat.test(form.value.manageVx)) {
+      ElMessage.error('请输入正确的微信号');
+      return;
+    }
+  }
+  if (form.value.manageQq.trim()) {
+    if (reg.qq.test(form.value.manageQq)) {
+      ElMessage.error('请输入正确的QQ号码');
+      return;
+    }
+  }
+  if (form.value.manageEmail.trim()) {
+    if (reg.email.test(form.value.manageEmail)) {
+      ElMessage.error('请输入正确的邮箱号码');
+      return;
+    }
+  }
+
+  if (isedit.value) {
+    editVillageAPI<communitylist_rows_type>(form.value).then((res) => {
+      ElMessage.success('编辑成功');
+      router.push({
+        path: '/community'
+      });
+    });
+  } else {
+    addVillageAPI<communitylist_rows_type>(form.value).then((res) => {
+      ElMessage.success('添加成功');
+      router.push({
+        path: '/community'
+      });
+    });
+  }
+}
 const cancelForm = () => {
  console.log('取消');
 };
 </script>

 <style scoped lang="scss">
+.box {
+  .header {
+    display: flex;
+    align-items: center;
+    height: 50px;
+    line-height: 50px;
+    background-color: #1a75ff;
+    & > div {
+      flex: 1;
+    }
+    & > span {
+      padding-left: 20px;
+      font-size: 20px;
+      color: white;
+    }
+  }
+}
 .AddBuildingBox {
  padding: 15px;
  height: 100%;
@@ -128,7 +393,7 @@ const cancelForm = () => {
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
    border-bottom: 1px solid #bbbbbb;
-    margin-bottom: 60px;
+    margin-bottom: 50px;
  }
  .addBuildingFormBody {
    width: 900px;
--- a/src/views/community/index.vue
+++ b/src/views/community/index.vue
@@ -1,76 +1,153 @@
 <template>
-  <div class="container">
-    <div class="community_nav_box">
-      <div class="currentbox">当前小区：xxxxxxxxxxxxx</div>
-      <div class="subtitle flex align-center">
-        <div class="line"></div>
-        <div class="changecommunity">切换小区</div>
-      </div>
+  <div class="box">
+    <div class="header">
+      <span class="">智慧物业后台管理系统</span>
+      <navbar ref="navbarRef" />
    </div>
-    <div class="communityBody">
-      <div
-        class="coummunity_card"
-        :class="{
-          activeCommunity: index === 2
-        }"
-        v-for="(item, index) in list"
-        :key="index"
-      >
-        <img src="https://picsum.photos/400/400" alt="" />
-        <div class="coummunityaction_box">
-          <div class="coummunityname">{{ item.name }}</div>
-          <div class="counmmunityaddress">{{ item.address }}</div>
-        </div>
-        <div class="actions flex">
-          <div>管理</div>
-          <div>编辑</div>
-          <div>删除</div>
+    <div class="container">
+      <div class="community_nav_box">
+        <div class="currentbox">当前小区:{{ currentViliageInfo && currentViliageInfo.villageName }}</div>
+        <div class="subtitle flex align-center">
+          <div class="line"></div>
+          <div class="changecommunity">切换小区</div>
        </div>
      </div>
-      <div @click="handleAdd" class="coummunity_card addActions flex flex-items-center justify-center">
-        <div class="addCoummunity">
-          <el-icon>
-            <AddLocation></AddLocation>
-          </el-icon>
-          <div>添加小区</div>
+      <div class="communityBody">
+        <div
+          class="coummunity_card"
+          :class="{
+            activeCommunity: item.choiceStatus === 0
+          }"
+          v-for="(item, index) in list"
+          :key="index"
+        >
+          <el-image :src="item.villageImageUrl ? item.villageImageUrl.split(',')[0] : ''">
+            <template #error>
+              <div class="image-viewer-slot image-slot">
+                <el-icon><Picture /></el-icon>
+              </div>
+            </template>
+          </el-image>
+          <div class="coummunityaction_box">
+            <div class="coummunityname">{{ item.villageName }}</div>
+            <div class="counmmunityaddress">{{ item.address }}</div>
+          </div>
+          <div class="actions flex">
+            <div
+              @click="handleclick(item)"
+              :style="{
+                color: item.choiceStatus === 0 ? 'green' : ''
+              }"
+            >
+              {{ item.choiceStatus === 0 ? '进入' : '管理' }}
+            </div>
+            <div @click="handleEdit(item)">编辑</div>
+            <div @click="handleDelete(item)">删除</div>
+          </div>
+        </div>
+        <div @click="handleAdd" class="coummunity_card addActions flex flex-items-center justify-center">
+          <div class="addCoummunity">
+            <el-icon>
+              <AddLocation></AddLocation>
+            </el-icon>
+            <div>添加小区</div>
+          </div>
        </div>
      </div>
    </div>
  </div>
 </template>
 <script lang="ts" setup>
-const list = ref([
-  {
-    name: '北境碧桂园小区',
-    address: '北境朝北市塔reek儿大道368号'
-  },
-  {
-    name: '北境碧桂园小区',
-    address: '北境朝北市塔reek儿大道368号'
-  },
-  {
-    name: '北境碧桂园小区',
-    address: '北境朝北市塔reek儿大道368号'
-  },
-  {
-    name: '北境碧桂园小区',
-    address: '北境朝北市塔reek儿大道368号'
-  },
-  {
-    name: '北境碧桂园小区',
-    address: '北境朝北市塔reek儿大道368号'
-  }
-]);
+import Navbar from '@/layout/components/Navbar.vue';
+import { deleteVillageByIdAPI, switchVillageAPI, getCommunitylistAPI } from '@/api/system/community/index';
+import type { communitylist_rows_type } from '@/api/system/community/type';
+import { Picture } from '@element-plus/icons-vue';

 const router = useRouter();
+const list = ref<communitylist_rows_type[]>([]);
+const currentViliageInfo = ref<communitylist_rows_type>();
+/** 获取小区列表 */
+function getlist() {
+  getCommunitylistAPI().then((res) => {
+    list.value = res.rows;
+    currentViliageInfo.value = res.rows.find((item) => item.choiceStatus === 0);
+    res.rows.forEach((item) => {
+      if (item.villageImageUrl) {
+        console.log(item.villageImageUrl.split(','));
+      }
+    });
+  });
+}
+getlist();
+/** 新增小区 */
 function handleAdd() {
-  console.log('add');
  router.push({
    path: '/community/AddCommunity'
  });
 }
+
+/** 删除小区 */
+function handleDelete(item: communitylist_rows_type) {
+  deleteVillageByIdAPI(item.villageId).then(() => {
+    const newlist = list.value.filter((listitem) => listitem.villageId !== item.villageId);
+    list.value = newlist;
+  });
+}
+
+/** 编辑小区 */
+function handleEdit(item: communitylist_rows_type) {
+  router.push({
+    path: '/community/AddCommunity',
+    query: {
+      id: item.villageId
+    }
+  });
+}
+
+/** 管理小区 */
+function handleclick(item: communitylist_rows_type) {
+  if (item.choiceStatus === 0) {
+    router.push({
+      path: '/index'
+    });
+  } else {
+    switchVillageAPI(item.villageId).then((res) => {
+      console.log('切换成小区---------------------');
+      ElMessage.success('切换小区成功');
+      router.push({
+        path: '/index'
+      });
+    });
+  }
+}
 </script>
 <style scoped lang="scss">
+.box {
+  .header {
+    display: flex;
+    align-items: center;
+    height: 50px;
+    line-height: 50px;
+    background-color: #1a75ff;
+    & > div {
+      flex: 1;
+    }
+    & > span {
+      padding-left: 20px;
+      font-size: 20px;
+      color: white;
+    }
+  }
+}
+.image-slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  font-size: 30px;
+  height: 200px;
+  background: #fff;
+}
 .container {
  width: 100%;
  margin: 0 auto;
@@ -106,30 +183,41 @@ function handleAdd() {
    }
  }
  .communityBody {
-    padding: 30px;
-
+    padding: 20px;
    color: #000;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
+    display: grid;
+    grid-template-columns: repeat(5, minmax(292px, 1fr));
+    @media (max-width: 1540px) {
+      grid-template-columns: repeat(4, minmax(292px, 1fr));
+    }
+    @media (max-width: 1280px) {
+      grid-template-columns: repeat(3, minmax(292px, 1fr));
+    }
+    @media (max-width: 1030px) {
+      grid-template-columns: repeat(2, minmax(292px, 1fr));
+    }
    .coummunity_card {
-      width: 330px;
-      height: 330px;
+      height: 300px;
      border: 1px solid #ccc;
      border-radius: 5px;
      background-color: rgba(255, 255, 255, 1);
-      margin-right: 15px;
+      margin-right: 10px;
      margin-bottom: 15px;
      overflow: hidden;
-
-      img {
+      display: flex;
+      flex-direction: column;
+      &:hover {
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+      }
+      .el-image {
        height: 200px;
        width: 100%;
        object-fit: cover;
      }
      .coummunityaction_box {
-        height: 100px;
-        padding: 10px 10px;
+        flex: 1;
+        padding: 10px 5px;
+        font-size: 15px;
        .counmmunityaddress {
          margin-top: 20px;
          font-size: small;
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -125,7 +125,6 @@ const handleLogin = () => {
        }
      }
    } else {
-      console.log('error submit!', fields);
    }
  });
 };
--- a/src/views/system/house/components/building.vue
+++ b/src/views/system/house/components/building.vue
@@ -8,14 +8,14 @@
    </div>
    <ul>
      <li
-        v-for="(item, index) in buildingList"
+        v-for="(item, index) in currentBuildingInfoList"
        :class="{
-          active: index === activeId
+          active: item.id === currentBuildingInfo.id
        }"
        :key="index"
-        @click="checkBuilding(index)"
+        @click="switchBuilding(item.id)"
      >
-        <div class="buildingname">{{ item.name }}</div>
+        <div class="buildingname">{{ item.villageName ?? '未知' }}</div>
        <div class="buildactions flex align-center justify-around">
          <el-icon class="pointer hover-color-blue"><Setting /></el-icon>
          <el-icon class="pointer hover-color-red"><Delete /></el-icon>
@@ -27,26 +27,11 @@

 <script setup lang="ts">
 import { ref } from 'vue';
-
+import { useHouseStore } from '@/store/modules/house';
+const houseStore = useHouseStore();
+const { switchBuilding } = houseStore; // 方法
+const { currentBuildingInfoList, currentBuildingInfo } = storeToRefs(houseStore); // 数据
 const router = useRouter();
-const activeId = ref(0);
-const buildingList = ref([
-  {
-    id: 1,
-    name: 'a栋'
-  },
-  {
-    id: 2,
-    name: 'b栋'
-  },
-  {
-    id: 3,
-    name: 'c栋'
-  }
-]);
-const checkBuilding = (index: number) => {
-  activeId.value = index;
-};

 const handleAddBuilding = () => {
  router.push({
--- a/src/views/system/house/components/components/houseItem.vue
+++ b/src/views/system/house/components/components/houseItem.vue
@@ -15,6 +15,8 @@ const props = defineProps<{
  unit: any;
  fIdx: number;
 }>();
+const houstlist = ref([]);
+props.unit;
 const router = useRouter();
 const checked = ref([]);
 // 菜单
@@ -28,7 +30,6 @@ const menuList = ref([
 const contextMenu = ref();
 // 点击事件
 const handleSelect = (val) => {
-  console.log('你选择了：', val);
  switch (val) {
    case 'edit':
      break;
@@ -50,10 +51,6 @@ function handleClick(house: any) {
 const emit = defineEmits<{
  change: string[];
 }>();
-
-function handleContextMenu(e) {
-  console.log(e);
-}
 </script>

 <style scoped lang="scss">
--- a/src/views/system/house/components/components/table.vue
+++ b/src/views/system/house/components/components/table.vue
@@ -1,14 +1,21 @@
 <template>
  <div class="TableBox p-5 h-full">
-    <el-table border :data="Array.from({ length: building.totalFloors }, (_, i) => i + 1)">
+    <el-table border :data="floorsSortList">
      <el-table-column align="center" fixed label="楼层\单元" width="85">
-        <template #default="{ $index }">
-          <span>{{ $index + 1 }}楼</span>
+        <template #default="{ $index, row }">
+          <span>{{ row }}楼</span>
        </template>
      </el-table-column>
-      <el-table-column min-width="160" class="column" align="center" :label="units.unitNo" v-for="(units, index) in building.units" :key="index">
-        <template #default="{ $index }">
-          <houseItem :unit="units.houses[$index]" :f-idx="$index"></houseItem>
+      <el-table-column
+        min-width="160"
+        class="column"
+        align="center"
+        :label="units.buildingName"
+        v-for="(units, index) in currentHouseInfoList"
+        :key="index"
+      >
+        <template #default="{ $index, row }">
+          <houseItem :unit="units.floors_Json" :f-idx="row"></houseItem>
        </template>
      </el-table-column>
    </el-table>
@@ -18,72 +25,38 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import houseItem from './houseItem.vue';
-import { build } from 'vite';
-// 房屋信息
-interface House {
-  id: string; // 唯一标识，如 B-1-101
-  roomNo: string; // 房号，如 101
-  checked: boolean; // 是否选中
-  // 可扩展：面积、户型、收费标准、状态等
+import { useHouseStore } from '@/store/modules/house';
+const houseStore = useHouseStore();
+const { currentHouseInfoList } = storeToRefs(houseStore); // 数据
+console.log(currentHouseInfoList);
+const maxFloors = ref(0);
+const maxUnits = ref(currentHouseInfoList.value.length);
+const floorslist = ref(new Set());
+const floorsSortList = computed(() => {
+  const list = Array.from(floorslist.value) as string[];
+  return list.sort(sortNumberStr);
+});
+function sortNumberStr(a, b) {
+  const numA = parseFloat(a);
+  const numB = parseFloat(b);
+
+  // 如果都是有效数字 → 按数字大小排（支持负数、小数）
+  if (!isNaN(numA) && !isNaN(numB)) {
+    return numA - numB;
+  }
+
+  // 否则按自然语言排
+  return a.localeCompare(b, 'zh-CN', { numeric: true });
 }

-// 单元信息
-interface Unit {
-  id: string; // 唯一标识，如 1
-  unitNo: string; // 单元号，如 1单元
-  houses: House[][]; // 按楼层分组的房屋，houses[0] 对应1楼，houses[1]对应2楼...
-}
-
-// 楼栋信息
-interface Building {
-  buildingNo: string; // 楼栋号，如 B栋
-  totalFloors: number; // 总楼层
-  units: Unit[]; // 单元列表
-}
-// 初始化B栋数据
-const building: Building = {
-  buildingNo: 'B栋',
-  totalFloors: 5, // 总楼层
-  // 栋-> 单元 -> 楼 -> 房间
-  units: []
-};
-
-function init(length) {
-  const arr = Array.from({ length: length }).map((_, index) => {
-    return {
-      id: index,
-      unitNo: index + 1 + '单元',
-      // 1单元
-      houses: [
-        // 1楼
-        [
-          // 一楼房屋
-          { id: 'B-3-301', roomNo: '101', checked: true },
-          { id: 'B-3-302', roomNo: '102', checked: false },
-          { id: 'B-3-303', roomNo: '103', checked: false },
-          { id: 'B-3-304', roomNo: '104', checked: false },
-          { id: 'B-3-305', roomNo: '105', checked: false },
-          { id: 'B-3-306', roomNo: '106', checked: false },
-          { id: 'B-3-307', roomNo: '107', checked: false },
-          { id: 'B-3-308', roomNo: '108', checked: false }
-        ],
-        [
-          { id: 'B-1-201', roomNo: '201', checked: true },
-          { id: 'B-1-202', roomNo: '202', checked: false },
-          { id: 'B-1-203', roomNo: '203', checked: false },
-          { id: 'B-1-204', roomNo: '204', checked: false },
-          { id: 'B-1-205', roomNo: '205', checked: false },
-          { id: 'B-1-206', roomNo: '206', checked: false },
-          { id: 'B-1-207', roomNo: '207', checked: false },
-          { id: 'B-1-208', roomNo: '208', checked: false }
-        ]
-      ]
-    };
-  }) as any;
-  console.log(arr);
-  building.units = arr;
-}
-init(20);
+currentHouseInfoList.value.forEach((item) => {
+  maxFloors.value = Math.max(maxFloors.value, item.actualFloorCount);
+  item.floors_Json = JSON.parse(`[${item.floors.replaceAll('\\', '')}]`);
+  console.log(item.floors_Json);
+  item.floors_Json.forEach((floor) => {
+    floorslist.value.add(floor.floorNo);
+  });
+});
 </script>

 <style scoped lang="scss">
--- a/src/views/system/house/components/unit.vue
+++ b/src/views/system/house/components/unit.vue
@@ -26,7 +26,6 @@ import { ref } from 'vue';
 import TableUnit from './components/table.vue';
 const router = useRouter();
 function handleAddHouse() {
-  console.log('add house');
  router.push({
    path: '/house/addHouse'
  });
--- a/src/views/system/house/index.vue
+++ b/src/views/system/house/index.vue
@@ -3,8 +3,8 @@
    <PageHeader>
      <template #content>
        <div class="houseAdressBox">
-          <span class="mr-50px">当前小区：北境碧桂园小区</span>
-          <span>小区地址：北境朝北市塔里克儿大道368号</span>
+          <span class="mr-50px">当前小区：{{ currentVilageInfo && currentVilageInfo.villageName }}</span>
+          <span>小区地址：{{ currentVilageInfo && currentVilageInfo.city }} {{ currentVilageInfo && currentVilageInfo.address }}</span>
        </div>
        <div class="houseTypeBox flex">
          <div
@@ -31,47 +31,19 @@
 import building from './components/building.vue';
 import unit from './components/unit.vue';
 import PageHeader from '@/components/Pageheader/index.vue';
-const housetypelist = ['住宅', '办公', '商用', '公寓'];
+import { useHouseStore } from '@/store/modules/house';
+const houseStore = useHouseStore();
+const { currentVilageInfo } = storeToRefs(houseStore);
+console.log(currentVilageInfo);

+const housetypelist = ['住宅', '办公', '商用', '公寓'];
 const active = ref(0);
 const changeHouseType = (index: number) => {
  active.value = index;
 };

-let ojb = {
-  'code': 200,
-  'msg': '操作成功',
-  'data': [
-    {
-      'unitNo': '1',
-      'houses': '{"houseId":5,"houseNo":"1201室"}, {"houseId":6,"houseNo":"1202室"}',
-      'houseCount': 2,
-      'floorNo': '12',
-      'buildingId': 54564
-    },
-    {
-      'unitNo': '1',
-      'houses': '{"houseId":1,"houseNo":"1301室"}, {"houseId":2,"houseNo":"1302室"}',
-      'houseCount': 2,
-      'floorNo': '13',
-      'buildingId': 54564
-    },
-    {
-      'unitNo': '2',
-      'houses': '{"houseId":7,"houseNo":"1201室"}',
-      'houseCount': 1,
-      'floorNo': '12',
-      'buildingId': 54564
-    },
-    {
-      'unitNo': '2',
-      'houses': '{"houseId":3,"houseNo":"1301室"}, {"houseId":4,"houseNo":"1302室"}',
-      'houseCount': 2,
-      'floorNo': '13',
-      'buildingId': 54564
-    }
-  ]
-};
+// 初始化数据
+houseStore.initHouse(active.value);
 </script>

 <style lang="scss" scoped>
--- a/src/views/system/storeroom/index.vue
+++ b/src/views/system/storeroom/index.vue
@@ -1,15 +1,12 @@
 <template>
  <div class="StoreRoomBox">
-    <PageHeader title="储藏室管理">
-      <template #container>
-        <div class="flex flex-items-center pb-3">
-          <div>储藏编号</div>
-          <el-input class="ml-10px mr-20px" placeholder="请输入" v-model="searchValue" />
-          <el-button class="mr-20px" type="primary">查询</el-button>
-          <el-button>重置</el-button>
-        </div>
-      </template>
-    </PageHeader>
+    <PageHeader title="储藏室管理"> </PageHeader>
+    <div class="nav flex flex-items-center pb-3">
+      <div class="title-text">储藏编号</div>
+      <el-input placeholder="请输入" v-model="searchValue" />
+      <el-button class="mr-10px" type="primary">查询</el-button>
+      <el-button>重置</el-button>
+    </div>
    <div class="StoreRoomBody">
      <div class="nav flex flex-items-center justify-between">
        <div class="title-text">储藏室列表</div>
@@ -19,42 +16,43 @@
        </div>
      </div>
      <div class="StoreRoomTablebox">
-        <el-table checked>
-          <el-table-column label="楼栋" width="100">
+        <el-table :data="datalist" checked>
+          <el-table-column align="center" type="selection"></el-table-column>
+          <el-table-column align="center" label="楼栋">
            <template #default="scope">
-              <div>{{ scope.row.id }}</div>
+              <div>{{ scope.row.floor }}栋</div>
            </template>
          </el-table-column>
-          <el-table-column label="单元" width="100">
+          <el-table-column align="center" label="单元">
+            <template #default="scope">
+              <div>{{ scope.row.name }}单元</div>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="储藏室号">
            <template #default="scope">
              <div>{{ scope.row.name }}</div>
            </template>
          </el-table-column>
-          <el-table-column label="储藏室号" width="100">
+          <el-table-column align="center" label="建筑面积">
            <template #default="scope">
-              <div>{{ scope.row.name }}</div>
+              <div>{{ scope.row.name }}㎡</div>
            </template>
          </el-table-column>
-          <el-table-column label="建筑面积" width="100">
+          <el-table-column align="center" label="公摊面积">
            <template #default="scope">
-              <div>{{ scope.row.name }}</div>
+              <div>{{ scope.row.name }}㎡</div>
            </template>
          </el-table-column>
-          <el-table-column label="公摊面积" width="100">
+          <el-table-column align="center" label="实用面积">
            <template #default="scope">
-              <div>{{ scope.row.name }}</div>
+              <div>{{ scope.row.name }}㎡</div>
            </template>
          </el-table-column>
-          <el-table-column label="实用面积" width="100">
-            <template #default="scope">
-              <div>{{ scope.row.name }}</div>
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" width="100">
+          <el-table-column align="center" label="操作">
            <template #default="scope">
              <div>
-                <el-button type="primary">编辑</el-button>
-                <el-button type="danger">删除</el-button>
+                <el-button text type="primary">编辑</el-button>
+                <el-button text type="danger">删除</el-button>
              </div>
            </template>
          </el-table-column>
@@ -68,12 +66,25 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 const searchValue = ref('');
+import PageHeader from '@/components/Pageheader/index.vue';

 const paginationOptions = ref({
  total: 100,
  page: 1,
  limit: 10
 });
+
+const datalist = ref([
+  {
+    units: 3,
+    name: 'A1',
+    storeroom: 'b123',
+    area: '1000',
+    commontArea: '222',
+    useArea: '333',
+    floor: '1'
+  }
+]);
 function handleSizeChange(val: number) {
  paginationOptions.value.limit = val;
 }
@@ -83,9 +94,39 @@ function hanlePageChange(val: number) {
 </script>

 <style scoped lang="scss">
-.StoreRoomBody {
+.StoreRoomBox {
  padding: 20px;
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+
+  .el-button {
+    width: 80px;
+    height: 35px;
+    border-radius: 5px;
+  }
+  & > .nav {
+    background-color: white;
+    padding: 20px 30px;
+    border-top: 1px solid #ccc;
+    & > .title-text {
+      width: 80px;
+    }
+    .el-input {
+      width: 300px;
+      margin-right: 30px;
+    }
+  }
+}
+.StoreRoomBody {
  $navHeight: 60px;
+  flex: 1;
+
+  padding: 20px;
+  // height: 785px;
+  border-radius: 5px;
+  margin-top: 20px;
+  background-color: #fff;
  .nav {
    height: $navHeight;
  }
@@ -93,6 +134,9 @@ function hanlePageChange(val: number) {
    padding: 0 10px;
    margin-top: 10px;
    height: calc(100% - $navHeight);
+    & > .el-table {
+      height: calc(100% - 70px);
+    }
  }
 }
 </style>