diff --git a/src/api/index/propertyIndexApi.js b/src/api/index/propertyIndexApi.js
new file mode 100644
index 000000000..a7003a495
--- /dev/null
+++ b/src/api/index/propertyIndexApi.js
@@ -0,0 +1,101 @@
+import request from '@/utils/request'
+
+// 查询物业资产指标
+export function getPropertyAssetsIndex(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/propertyIndex.queryPropertyAssetsIndex',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '查询物业资产指标失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询记事本列表
+export function getNotepadList(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/notepad.listNotepad',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '查询记事本列表失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询报修指标
+export function getRepairIndex(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/propertyIndex.queryRepairIndex',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '查询报修指标失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询投诉指标
+export function getComplaintIndex(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/propertyIndex.queryComplaintIndex',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '查询投诉指标失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询业主注册指标
+export function getOwnerRegisterIndex(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/propertyIndex.queryOwnerRegisterIndex',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '查询业主注册指标失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/components/index/index-property.vue b/src/components/index/index-property.vue
new file mode 100644
index 000000000..b14c6a589
--- /dev/null
+++ b/src/components/index/index-property.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="property-index-container">
+    <div class="vc-index-nav">
+      <span><i class="el-icon-s-home margin-right-sm"></i>{{ $t('propertyIndex.home') }}</span>
+      <span class="margin-left-sm margin-right-sm">/</span>
+      <span>{{ $t('propertyIndex.dashboard') }}</span>
+    </div>
+
+    <el-row class="vc-index-1" :gutter="20">
+      <el-col :span="15">
+        <index-community ref="indexCommunity" />
+      </el-col>
+      <el-col :span="9">
+        <index-notice ref="indexNotice" />
+      </el-col>
+    </el-row>
+
+    <el-row class="vc-index-1" :gutter="20">
+      <el-col :span="15">
+        <index-repair-complaint ref="indexRepairComplaint" />
+      </el-col>
+      <el-col :span="9">
+        <index-owner-room ref="indexOwnerRoom" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import IndexCommunity from '@/components/index/indexCommunity'
+import IndexNotice from '@/components/index/indexNotice'
+import IndexRepairComplaint from '@/components/index/indexRepairComplaint'
+import IndexOwnerRoom from '@/components/index/indexOwnerRoom'
+
+export default {
+  name: 'PropertyIndexList',
+  components: {
+    IndexCommunity,
+    IndexNotice,
+    IndexRepairComplaint,
+    IndexOwnerRoom
+  },
+  mounted() {
+    this.initData()
+  },
+  methods: {
+    initData() {
+      this.$refs.indexCommunity._loadPropertyIndexAssets()
+      this.$refs.indexNotice._loadPropertyIndexNotices()
+      this.$refs.indexRepairComplaint.initData()
+      this.$refs.indexOwnerRoom._loadIndexOwnerRegisterData()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.property-index-container {
+
+
+  .vc-index-nav {
+    padding: 10px;
+    font-size: 16px;
+    text-align: left;
+  }
+
+  .margin-right-sm {
+    margin-right: 5px;
+  }
+
+  .margin-left-sm {
+    margin-left: 5px;
+  }
+
+  .margin-top-lg {
+    margin-top: 15px;
+  }
+
+  .margin-bottom {
+    margin-bottom: 20px;
+  }
+
+  .vc-index-1 {
+    margin-bottom: 20px;
+
+    .index-1-left,
+    .index-1-right {
+      height: 100%;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/index/indexCommunity.vue b/src/components/index/indexCommunity.vue
new file mode 100644
index 000000000..512310b98
--- /dev/null
+++ b/src/components/index/indexCommunity.vue
@@ -0,0 +1,217 @@
+<template>
+  <div class="index-1-left-1">
+    <div class="index-title">
+      <span>{{ $t('propertyIndex.communityInfo') }}</span>
+    </div>
+    <div class="flex justify-between border-bottom index-1-left-1-content">
+      <div v-for="(item, index) in stats" :key="index" class="flex justify-center" >
+        <div class="index-1-left-img">
+          <i :class="item.icon"></i>
+        </div>
+        <div>
+          <div class="index-number">{{ indexCommunityViewInfo[item.key] }}</div>
+          <div class="index-number-describe">{{ $t(`propertyIndex.${item.label}`) }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="flex justify-between index-1-left-1-bottom">
+      <div class="flex justify-between index-1-left-1-bottom-item">
+        <div class="text-center">
+          <div class="index-name">{{ $t('propertyIndex.residentReg') }}</div>
+          <div class="index-name-ico">
+            <i class="el-icon-user"></i>
+          </div>
+        </div>
+        <div class="text-center">
+          <div class="index-number">{{ indexCommunityViewInfo.ownerCount }}
+            <span class="index-number-unit">{{ $t('propertyIndex.unit') }}</span>
+          </div>
+          <div class="index-number-describe margin-top-sm" @click="_toOwner">
+            {{ $t('propertyIndex.registerResident') }} >
+          </div>
+        </div>
+      </div>
+      <div class="flex justify-between index-1-left-1-bottom-item">
+        <div class="text-center">
+          <div class="index-name">{{ $t('propertyIndex.vehicle') }}</div>
+          <div class="index-name-ico">
+            <i class="el-icon-truck"></i>
+          </div>
+        </div>
+        <div class="text-center">
+          <div class="index-number">{{ indexCommunityViewInfo.carCount }}
+            <span class="index-number-unit">{{ $t('propertyIndex.unit') }}</span>
+          </div>
+          <div class="index-number-describe margin-top-sm" @click="_toCar">
+            {{ $t('propertyIndex.viewVehicle') }} >
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getPropertyAssetsIndex } from '@/api/index/propertyIndexApi'
+
+export default {
+  name: 'IndexCommunity',
+  data() {
+    return {
+      indexCommunityViewInfo: {
+        floorCount: 0,
+        roomCount: 0,
+        shopCount: 0,
+        ownerCount: 0,
+        spaceCount: 0,
+        carCount: 0,
+      },
+      stats: [
+        { key: 'floorCount', label: 'building', icon: 'el-icon-office-building' },
+        { key: 'roomCount', label: 'house', icon: 'el-icon-house' },
+        { key: 'shopCount', label: 'shop', icon: 'el-icon-shopping-bag-2' },
+        { key: 'spaceCount', label: 'parkingSpace', icon: 'el-icon-truck' }
+      ]
+    }
+  },
+  created() {
+  },
+  methods: {
+    _loadPropertyIndexAssets() {
+      const param = {
+        page: 1,
+        row: 10,
+        communityId: this.getCommunityId()
+      }
+
+      getPropertyAssetsIndex(param)
+        .then(res => {
+          if (res.code === 0) {
+            Object.assign(this.indexCommunityViewInfo, res.data)
+          }
+        })
+        .catch(err => {
+          console.error('请求失败处理', err)
+        })
+    },
+    _toOwner() {
+      this.$router.push('/property/listOwner?tab=ownerInfo')
+    },
+    _toCar() {
+      this.$router.push('/property/listOwnerCar?tab=ownerCar')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.index-1-left-1 {
+  background: #fff;
+  border-radius: 4px;
+  padding: 15px;
+  
+  .index-title {
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 15px;
+    text-align: left;
+    color: #333;
+  }
+  
+  .index-1-left-1-content {
+    padding: 50px 0;
+    border-bottom: 1px solid #eee;
+    
+    > div {
+      width: 25%;
+      text-align: center;
+    }
+    
+    .index-1-left-img {
+      width: 40px;
+      height: 40px;
+      background: #f0f7ff;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 10px;
+      
+      i {
+        font-size: 20px;
+        color: #409EFF;
+      }
+    }
+    
+    .index-number {
+      font-size: 24px;
+      font-weight: bold;
+      color: #333;
+    }
+    
+    .index-number-describe {
+      font-size: 12px;
+      color: #999;
+    }
+  }
+  
+  .index-1-left-1-bottom {
+    padding: 28px 40px;
+    
+    .index-1-left-1-bottom-item {
+      width: 40%;
+      border-radius: 4px;
+      padding: 10px;
+      padding-left:30px;
+      padding-right:30px;
+      
+      .index-name {
+        font-size: 16px;
+        font-weight: bold;
+        color: #333;
+      }
+      
+      .index-name-ico {
+        width: 40px;
+        height: 40px;
+        background: #e6f7ff;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 10px auto;
+        
+        i {
+          font-size: 20px;
+          color: #1890ff;
+        }
+      }
+      
+      .index-number {
+        font-size: 24px;
+        font-weight: bold;
+        color: #333;
+        
+        .index-number-unit {
+          font-size: 14px;
+          color: #999;
+        }
+      }
+      
+      .index-number-describe {
+        font-size: 12px;
+        color: #1890ff;
+        cursor: pointer;
+        
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+  
+  .margin-top-sm {
+    margin-top: 5px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/index/indexNotice.vue b/src/components/index/indexNotice.vue
new file mode 100644
index 000000000..53050838a
--- /dev/null
+++ b/src/components/index/indexNotice.vue
@@ -0,0 +1,174 @@
+<template>
+  <div class="index-1-right-1">
+    <div class="index-title text-left">
+      <span>{{ $t('propertyIndex.ownerFeedback') }}</span>
+    </div>
+    <ul id="pool" class="notice-list">
+      <li v-if="!indexNoticeInfo.notices || indexNoticeInfo.notices.length < 1" 
+          class="flex justify-between padding-top-sm no-data">
+        <div class="vc-index-notice-title">
+          {{ $t('propertyIndex.noFeedback') }}
+        </div>
+      </li>
+      <li v-else v-for="(item, index) in indexNoticeInfo.notices" :key="index" 
+          class="flex justify-between padding-top-sm notice-item">
+        <div class="vc-index-notice-title">
+          {{ item.objName }}({{ item.roomName }}){{ $t('propertyIndex.feedback') }}{{ item.title }}
+          ({{ item.state === 'F' ? $t('propertyIndex.completed') : $t('propertyIndex.followingUp') }}<span v-if="item.thridId">-{{ $t('propertyIndex.transferRepair') }}</span>)
+        </div>
+        <div class="vc-index-notice-time">
+          {{ item.createTime }}
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import { getNotepadList } from '@/api/index/propertyIndexApi'
+
+export default {
+  name: 'IndexNotice',
+  data() {
+    return {
+      indexNoticeInfo: {
+        notices: [],
+        scrollInterval: null,
+        scrollTopValue: 0,
+        scrollDirection: true,
+      }
+    }
+  },
+  created() {
+  },
+  mounted() {
+    this.$nextTick(() => {
+      window.addEventListener('resize', this.checkPoolScroll)
+    })
+  },
+  beforeDestroy() {
+    if (this.indexNoticeInfo.scrollInterval) {
+      clearInterval(this.indexNoticeInfo.scrollInterval)
+    }
+    window.removeEventListener('resize', this.checkPoolScroll)
+  },
+  methods: {
+    async _loadPropertyIndexNotices() {
+      const param = {
+        page: 1,
+        row: 10,
+        communityId: this.getCommunityId()
+      }
+
+      try {
+        const res = await getNotepadList(param)
+        this.indexNoticeInfo.notices = res.data
+        this.$nextTick(() => {
+          this.checkPoolScroll()
+        })
+      } catch (error) {
+        console.error('请求失败处理', error)
+      }
+    },
+    checkPoolScroll() {
+      const element = document.getElementById('pool')
+      if (!element) return
+      
+      const clientHeight = element.clientHeight
+      const scrollHeight = element.scrollHeight
+      
+      if (scrollHeight > clientHeight) {
+        if (!this.indexNoticeInfo.scrollInterval) {
+          this.indexNoticeInfo.scrollInterval = setInterval(this.poolScroll, 5000)
+        }
+      } else {
+        clearInterval(this.indexNoticeInfo.scrollInterval)
+        this.indexNoticeInfo.scrollInterval = null
+      }
+    },
+    poolScroll() {
+      const element = document.getElementById('pool')
+      if (!element) return
+      
+      const clientHeight = element.clientHeight
+      const scrollHeight = element.scrollHeight
+      const canScrollHeight = scrollHeight - clientHeight
+      
+      if (this.indexNoticeInfo.scrollTopValue <= 0) {
+        this.indexNoticeInfo.scrollDirection = true
+      }
+      
+      if (this.indexNoticeInfo.scrollDirection) {
+        this.indexNoticeInfo.scrollTopValue += canScrollHeight / 1200
+      } else {
+        this.indexNoticeInfo.scrollTopValue -= canScrollHeight / 1200
+      }
+      
+      if (canScrollHeight <= this.indexNoticeInfo.scrollTopValue) {
+        this.indexNoticeInfo.scrollDirection = !this.indexNoticeInfo.scrollDirection
+      }
+      
+      element.scrollTop = this.indexNoticeInfo.scrollTopValue
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.index-1-right-1 {
+  background: #fff;
+  border-radius: 4px;
+  padding: 15px;
+  height: 100%;
+  
+  .index-title {
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 15px;
+    color: #333;
+  }
+  
+  .notice-list {
+    height: 300px;
+    overflow-y: auto;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    
+    .no-data {
+      color: #999;
+      text-align: center;
+      padding: 20px 0;
+    }
+    
+    .notice-item {
+      padding: 8px 0;
+      border-bottom: 1px solid #eee;
+      
+      &:last-child {
+        border-bottom: none;
+      }
+      
+      .vc-index-notice-title {
+        font-size: 14px;
+        color: #333;
+        width: 70%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      
+      .vc-index-notice-time {
+        font-size: 12px;
+        color: #999;
+        width: 30%;
+        text-align: right;
+      }
+    }
+  }
+  
+  .padding-top-sm {
+    padding-top: 5px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/index/indexOwnerRoom.vue b/src/components/index/indexOwnerRoom.vue
new file mode 100644
index 000000000..82d038e32
--- /dev/null
+++ b/src/components/index/indexOwnerRoom.vue
@@ -0,0 +1,179 @@
+<template>
+  <div class="owner-room-container">
+    <div class="bg-white index-1-right-item">
+      <div class="index-title"><span>{{ $t('propertyIndex.residentRegStats') }}</span></div>
+      <div id="ownerRoomCount" style="height:250px"></div>
+      <div class="flex justify-between text-center stats-container">
+        <div v-for="(item, index) in stats" :key="index">
+          <div class="index-bottom-number">{{ item.value }}</div>
+          <div class="index-bottom-number-desc">{{ $t(`propertyIndex.${item.label}`) }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { getOwnerRegisterIndex } from '@/api/index/propertyIndexApi'
+
+export default {
+  name: 'IndexOwnerRoom',
+  data() {
+    return {
+      indexOwnerRoomInfo: {
+        unbindCount: 0,
+        bindCount: 0,
+        unbindRoomCount: 0,
+        bindRoomCount: 0,
+      },
+      ownerRoomChart: null
+    }
+  },
+  computed: {
+    stats() {
+      return [
+        { label: 'unregistered', value: this.indexOwnerRoomInfo.unbindCount },
+        { label: 'registered', value: this.indexOwnerRoomInfo.bindCount },
+        { label: 'unboundRoom', value: this.indexOwnerRoomInfo.unbindRoomCount },
+        { label: 'boundRoom', value: this.indexOwnerRoomInfo.bindRoomCount }
+      ]
+    }
+  },
+  created() {
+  },
+  mounted() {
+    window.addEventListener('resize', this.handleResize)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize)
+    if (this.ownerRoomChart) {
+      this.ownerRoomChart.dispose()
+    }
+  },
+  methods: {
+    handleResize() {
+      if (this.ownerRoomChart) {
+        this.ownerRoomChart.resize()
+      }
+    },
+    async _loadIndexOwnerRegisterData() {
+      const param = {
+        page: 1,
+        row: 10,
+        communityId: this.getCommunityId()
+      }
+
+      try {
+        const res = await getOwnerRegisterIndex(param)
+        Object.assign(this.indexOwnerRoomInfo, res.data)
+        
+        this.$nextTick(() => {
+          const dom = document.getElementById('ownerRoomCount')
+          if (!dom) return
+          
+          if (this.ownerRoomChart) {
+            this.ownerRoomChart.dispose()
+          }
+          this.ownerRoomChart = echarts.init(dom)
+          this._initOwnerEcharts(
+            this.ownerRoomChart,
+            this.indexOwnerRoomInfo.bindCount,
+            this.indexOwnerRoomInfo.unbindCount,
+            this.$t('propertyIndex.residentInfo'),
+            this.$t('propertyIndex.registered'),
+            this.$t('propertyIndex.unregistered'),
+            '#4B7AF0',
+            '#E2EDF6'
+          )
+        })
+      } catch (error) {
+        console.error('请求失败处理', error)
+      }
+    },
+    _initOwnerEcharts(chart, userCount, freeCount, _title, _userCountName, _freeCountName, userColor, freeColor) {
+      const option = {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b}: {c} ({d}%)'
+        },
+        legend: {
+          orient: 'vertical',
+          right: 10,
+          top: 'center',
+          textStyle: {
+            color: '#606266'
+          },
+          data: [_userCountName, _freeCountName]
+        },
+        color: [userColor, freeColor],
+        series: [{
+          name: _title,
+          type: 'pie',
+          radius: ['40%', '65%'],
+          avoidLabelOverlap: false,
+          label: {
+            show: false,
+            position: 'center'
+          },
+          emphasis: {
+            label: {
+              show: true,
+              fontSize: '16',
+              fontWeight: 'bold'
+            }
+          },
+          labelLine: {
+            show: false
+          },
+          data: [
+            { value: userCount, name: _userCountName },
+            { value: freeCount, name: _freeCountName }
+          ]
+        }]
+      }
+      
+      chart.setOption(option)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.owner-room-container {
+  .index-1-right-item {
+    background: #fff;
+    border-radius: 4px;
+    padding: 15px;
+    height: 100%;
+    
+    .index-title {
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 15px;
+      color: #333;
+    }
+    
+    .stats-container {
+      padding-top: 15px;
+      border-top: 1px solid #eee;
+      
+      > div {
+        flex: 1;
+      }
+      
+      .index-bottom-number {
+        font-size: 20px;
+        font-weight: bold;
+        color: #333;
+      }
+      
+      .index-bottom-number-desc {
+        font-size: 12px;
+        color: #999;
+        margin-top: 5px;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/index/indexRepairComplaint.vue b/src/components/index/indexRepairComplaint.vue
new file mode 100644
index 000000000..690602840
--- /dev/null
+++ b/src/components/index/indexRepairComplaint.vue
@@ -0,0 +1,253 @@
+<template>
+  <div class="repair-complaint-container">
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <div class="bg-white index-1-left-item">
+          <div class="index-title"><span>{{ $t('propertyIndex.repairStats') }}</span></div>
+          <div id="repairCount" style="height:250px"></div>
+          <div class="flex justify-between text-center stats-container">
+            <div v-for="(item, index) in repairStats" :key="index">
+              <div class="index-bottom-number">{{ item.value }}</div>
+              <div class="index-bottom-number-desc">{{ $t(`propertyIndex.${item.label}`) }}</div>
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div class="bg-white index-1-left-item">
+          <div class="index-title"><span>{{ $t('propertyIndex.complaintStats') }}</span></div>
+          <div id="complaintCount" style="height:250px"></div>
+          <div class="flex justify-around text-center stats-container">
+            <div v-for="(item, index) in complaintStats" :key="index">
+              <div class="index-bottom-number">{{ item.value }}</div>
+              <div class="index-bottom-number-desc">{{ $t(`propertyIndex.${item.label}`) }}</div>
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { getRepairIndex, getComplaintIndex } from '@/api/index/propertyIndexApi'
+
+export default {
+  name: 'IndexRepairComplaint',
+  data() {
+    return {
+      indexRepairComplaintInfo: {
+        allCount: 0,
+        waitCount: 0,
+        doingCount: 0,
+        finishCount: 0,
+        allComplaintCount: 0,
+        waitComplaintCount: 0,
+        finishComplaintCount: 0,
+      },
+      repairChart: null,
+      complaintChart: null
+    }
+  },
+  computed: {
+    repairStats() {
+      return [
+        { label: 'allRepair', value: this.indexRepairComplaintInfo.allCount },
+        { label: 'toBeDispatched', value: this.indexRepairComplaintInfo.waitCount },
+        { label: 'processing', value: this.indexRepairComplaintInfo.doingCount },
+        { label: 'processed', value: this.indexRepairComplaintInfo.finishCount }
+      ]
+    },
+    complaintStats() {
+      return [
+        { label: 'allComplaint', value: this.indexRepairComplaintInfo.allComplaintCount },
+        { label: 'processing', value: this.indexRepairComplaintInfo.waitComplaintCount },
+        { label: 'processed', value: this.indexRepairComplaintInfo.finishComplaintCount }
+      ]
+    }
+  },
+  created() {
+
+  },
+  mounted() {
+    window.addEventListener('resize', this.handleResize)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize)
+    if (this.repairChart) {
+      this.repairChart.dispose()
+    }
+    if (this.complaintChart) {
+      this.complaintChart.dispose()
+    }
+  },
+  methods: {
+    initData() {
+      this._loadIndexRepairData()
+      this._loadIndexComplaintData()
+    },
+    handleResize() {
+      if (this.repairChart) {
+        this.repairChart.resize()
+      }
+      if (this.complaintChart) {
+        this.complaintChart.resize()
+      }
+    },
+    async _loadIndexRepairData() {
+      const param = {
+        page: 1,
+        row: 10,
+        communityId: this.getCommunityId()
+      }
+
+      try {
+        const res = await getRepairIndex(param)
+        Object.assign(this.indexRepairComplaintInfo, res.data)
+
+        this.$nextTick(() => {
+          const dom = document.getElementById('repairCount')
+          if (!dom) return
+
+          if (this.repairChart) {
+            this.repairChart.dispose()
+          }
+          this.repairChart = echarts.init(dom)
+          this._initEcharts(
+            this.repairChart,
+            this.indexRepairComplaintInfo.finishCount,
+            this.indexRepairComplaintInfo.allCount - this.indexRepairComplaintInfo.finishCount,
+            this.$t('propertyIndex.repairInfo'),
+            this.$t('propertyIndex.processed'),
+            this.$t('propertyIndex.unprocessed'),
+            '#4B7AF0',
+            '#E2EDF6'
+          )
+        })
+      } catch (error) {
+        console.error('请求失败处理', error)
+      }
+    },
+    async _loadIndexComplaintData() {
+      const param = {
+        page: 1,
+        row: 10,
+        communityId: this.getCommunityId()
+      }
+
+      try {
+        const res = await getComplaintIndex(param)
+        Object.assign(this.indexRepairComplaintInfo, res.data)
+
+        this.$nextTick(() => {
+          const dom = document.getElementById('complaintCount')
+          if (!dom) return
+
+          if (this.complaintChart) {
+            this.complaintChart.dispose()
+          }
+          this.complaintChart = echarts.init(dom)
+          this._initEcharts(
+            this.complaintChart,
+            this.indexRepairComplaintInfo.finishComplaintCount,
+            this.indexRepairComplaintInfo.allComplaintCount - this.indexRepairComplaintInfo.finishComplaintCount,
+            this.$t('propertyIndex.complaintStats'),
+            this.$t('propertyIndex.processed'),
+            this.$t('propertyIndex.unprocessed'),
+            '#01C36D',
+            '#E2EDF6'
+          )
+        })
+      } catch (error) {
+        console.error('请求失败处理', error)
+      }
+    },
+    _initEcharts(chart, userCount, freeCount, _title, _userCountName, _freeCountName, userColor, freeColor) {
+      const option = {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b}: {c} ({d}%)'
+        },
+        legend: {
+          orient: 'vertical',
+          right: 10,
+          top: 'center',
+          textStyle: {
+            color: '#606266'
+          },
+          data: [_userCountName, _freeCountName]
+        },
+        color: [userColor, freeColor],
+        series: [{
+          name: _title,
+          type: 'pie',
+          radius: ['40%', '65%'],
+          avoidLabelOverlap: false,
+          label: {
+            show: false,
+            position: 'center'
+          },
+          emphasis: {
+            label: {
+              show: true,
+              fontSize: '16',
+              fontWeight: 'bold'
+            }
+          },
+          labelLine: {
+            show: false
+          },
+          data: [
+            { value: userCount, name: _userCountName },
+            { value: freeCount, name: _freeCountName }
+          ]
+        }]
+      }
+
+      chart.setOption(option)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.repair-complaint-container {
+
+}
+
+.index-1-left-item {
+  background: #fff;
+  border-radius: 4px;
+  padding: 15px;
+
+  .index-title {
+    text-align: left;
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 15px;
+    color: #333;
+  }
+
+  .stats-container {
+    padding-top: 15px;
+    border-top: 1px solid #eee;
+
+    >div {
+      flex: 1;
+    }
+
+    .index-bottom-number {
+      font-size: 20px;
+      font-weight: bold;
+      color: #333;
+    }
+
+    .index-bottom-number-desc {
+      font-size: 12px;
+      color: #999;
+      margin-top: 5px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/index/index.vue b/src/views/index/index.vue
index 9420dd2e9..6c413d3d0 100644
--- a/src/views/index/index.vue
+++ b/src/views/index/index.vue
@@ -7,6 +7,9 @@
         <div v-if="storeInfo.storeTypeCd == '800900000001'">
             <index-admin></index-admin>
         </div>
+        <div v-if="storeInfo.storeTypeCd == '800900000003'">
+            <index-property></index-property>
+        </div>
     </div>
   </template>
   
@@ -15,12 +18,14 @@
   import {deepCopy} from "@/utils/vc"
   import indexDev from "@/components/index/index-dev.vue"
   import indexAdmin from "@/components/index/index-admin.vue"
+  import indexProperty from '@/components/index/index-property.vue'
   
   export default {
     name: 'index',
     components: {
         indexDev,
-        indexAdmin
+        indexAdmin,
+        indexProperty
     },
     data() {
       return {
diff --git a/src/views/index/indexLang.js b/src/views/index/indexLang.js
index d545819c7..24990de84 100644
--- a/src/views/index/indexLang.js
+++ b/src/views/index/indexLang.js
@@ -8,6 +8,41 @@ export const messages = {
         repairCount: 'Repair Count',
         communityFeeStats: 'Community Fee Statistics',
         communityRepairStats: 'Community Repair Statistics'
+      },
+      propertyIndex: {
+        home: 'Home',
+        dashboard: 'Dashboard',
+        communityInfo: 'Community Information',
+        building: 'Building',
+        house: 'House',
+        shop: 'Shop',
+        parkingSpace: 'Parking Space',
+        residentReg: 'Resident Registration',
+        registerResident: 'Register Resident',
+        vehicle: 'Vehicle',
+        viewVehicle: 'View Vehicles',
+        unit: 'unit',
+        ownerFeedback: 'Owner Feedback',
+        noFeedback: 'No feedback content currently',
+        feedback: 'feedback',
+        completed: 'Completed',
+        followingUp: 'Following up',
+        transferRepair: 'Transferred to repair order',
+        repairStats: 'Repair Statistics',
+        allRepair: 'All Repairs',
+        toBeDispatched: 'To be dispatched',
+        processing: 'Processing',
+        processed: 'Processed',
+        complaintStats: 'Complaint Statistics',
+        allComplaint: 'All Complaints',
+        repairInfo: 'Repair Info',
+        unprocessed: 'Unprocessed',
+        residentRegStats: 'Resident Registration Statistics',
+        unregistered: 'Unregistered',
+        registered: 'Registered',
+        unboundRoom: 'Unbound Room',
+        boundRoom: 'Bound Room',
+        residentInfo: 'Resident Info'
       }
     },
     zh: {
@@ -19,6 +54,41 @@ export const messages = {
         repairCount: '报修单数',
         communityFeeStats: '小区缴费统计',
         communityRepairStats: '小区报修统计'
+      },
+      propertyIndex: {
+        home: '首页',
+        dashboard: '控制台',
+        communityInfo: '小区信息',
+        building: '楼宇',
+        house: '房屋',
+        shop: '商铺',
+        parkingSpace: '车位',
+        residentReg: '住户登记',
+        registerResident: '登记住户',
+        vehicle: '车辆',
+        viewVehicle: '查看车辆',
+        unit: '个',
+        ownerFeedback: '业主反馈',
+        noFeedback: '当前没有业主反馈内容',
+        feedback: '反馈',
+        completed: '完成',
+        followingUp: '跟进中',
+        transferRepair: '已转报修单',
+        repairStats: '报修统计',
+        allRepair: '全部报修',
+        toBeDispatched: '待派单',
+        processing: '处理中',
+        processed: '已处理',
+        complaintStats: '投诉统计',
+        allComplaint: '全部投诉',
+        repairInfo: '报修信息',
+        unprocessed: '未处理',
+        residentRegStats: '住户注册统计',
+        unregistered: '未注册',
+        registered: '已注册',
+        unboundRoom: '未绑定房屋',
+        boundRoom: '已绑定房屋',
+        residentInfo: '住户信息'
       }
     }
   }
\ No newline at end of file