11

src/views/modules/visual/basicinfo/houseStatic/houseList.vue

@@ -0,0 +1,236 @@
+<template>
+  <div class="div_people_search">
+
+    <div class="list_box">
+      <div class="info_tip">
+        <img src="@/assets/img/shuju/title-tip.png"
+             alt />
+        <div class="tip_title">{{tableTitle}}</div>
+      </div>
+      <div class="warning-table">
+        <div class="table">
+          <div class="table-header">
+            <div class="td td1">序号</div>
+            <div class="td td2">所属小区</div>
+            <div class="td td2">所属楼栋</div>
+            <div class="td td1">单元号</div>
+            <div class="td td1">门牌号</div>
+            <div class="td td1">房屋类型</div>
+            <div class="td td1">房屋用途</div>
+            <div class="td td1">房屋状态</div>
+            <div class="td td1">房主姓名</div>
+            <div class="td td2">房主电话</div>
+            <div class="td td2">身份证号</div>
+            <div class="td td1">操作</div>
+
+          </div>
+          <div v-if="!loading && tableData.length> 0"
+               class="table-body">
+            <div class="table-body-tr"
+                 v-for="(item,index) in tableData"
+                 :key='index'>
+              <div class="td td1">{{index+1}} </div>
+              <div class="td td2">{{item.neighborHoodName}} </div>
+              <div class="td td2">{{item.buildingName}} </div>
+              <div class="td td1">{{item.unitNum}} </div>
+              <!-- <div class="td td1">{{item.buildNum}} </div> -->
+              <div class="td td1">{{item.doorName}} </div>
+              <div class="td td1">{{item.houseType==='1'?'楼房':item.houseType==='2'?'平方':'别墅'}} </div>
+              <div class="td td1">{{item.purpose}} </div>
+              <div class="td td1">{{item.rentFlag==='1'?'出租':item.rentFlag==='0'?'自住':item.rentFlag==='2'?'闲置':'未出售'}} </div>
+              <div class="td td1">{{item.ownerName}} </div>
+              <div class="td td2">{{item.ownerPhone}} </div>
+              <div class="td td2">{{item.ownerIdCard}} </div>
+              <div @click="handleToHouse(item)"
+                   class="td td1 btn_detail">{{'查看'}} </div>
+
+            </div>
+          </div>
+
+          <div class="table-status"
+               v-if="loading">
+            <screen-loading>加载中</screen-loading>
+          </div>
+
+          <div class="table-status"
+               v-if="tableData.length == 0 && !loading">
+            <div class="no-data">
+              <img src="@/assets/img/modules/visual/noData.png"
+                   class="no-data-img" />
+            </div>
+          </div>
+
+        </div>
+
+      </div>
+      <div class="pagination">
+        <el-pagination hide-on-single-page
+                       background
+                       layout="prev, pager, next, total"
+                       :current-page="pageNo"
+                       :page-size="pageSize"
+                       :total="total"
+                       @current-change="pageCurrentChangeHandle">
+        </el-pagination>
+      </div>
+    </div>
+
+    <house-more v-show="showedMoreInfo"
+                @close="showedMoreInfo = false" />
+  </div>
+
+</template>
+
+<script>
+import { requestPost } from "@/js/dai/request";
+
+import ScreenLoading from "@/views/modules/visual/cpts/loading";
+import houseMore from "./houseMore";
+
+export default {
+  name: "people-list",
+  components: {
+    ScreenLoading, houseMore
+  },
+  data () {
+    return {
+      showedMoreInfo: false,
+      tableTitle: '房屋列表',
+      loading: false,
+
+      tableData: [],
+
+      pageSize: 10,
+      pageNo: 1,
+      total: 0,
+      info: {}
+    };
+  },
+  mounted () {
+
+    this.tableData = []
+
+    this.loadList()
+
+  },
+  deactivated () {
+
+  },
+
+  methods: {
+
+    async loadList () {
+      this.loading = true
+      const url = "/gov/org/house/housestatislistdetail"
+      let params = {
+        orgId: this.orgId,
+        orgType: this.orgType,
+        rentType: this.rentType,
+        pageSize: this.pageSize,
+        pageNo: this.pageNo
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+      this.loading = false
+      if (code === 0) {
+        this.total = data.total
+        this.tableData = data.list
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+    //点击查看
+    handleToHouse (item) {
+
+      // this.toSubAgency('people', this.tableData[index].userId)
+      this.info = { ...item }
+      this.showedMoreInfo = true
+    },
+
+    pageCurrentChangeHandle (val) {
+      this.pageNo = val
+      this.loadList()
+    },
+
+
+  },
+  destroyed () {
+    console.log("我已经离开了！");
+
+  },
+
+  props: {
+    orgId: {
+      type: String,
+      default: "",
+    },
+    orgType: {
+      type: String,
+      default: "",
+    },
+    rentType: {
+      type: String,
+      default: "",
+    },
+  },
+
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/basicInfoMain.scss"
+  scoped
+></style>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/searchPerson.scss"
+  scoped
+></style>
+
+
+
+<style lang="scss" scoped>
+.div_search_list {
+  .el-input__inner[WarningColor="warning"] {
+    border-radius: 8px 0 0 8px;
+    height: 53px;
+    background-color: #01106800;
+    border: 2px solid #0082fb;
+    padding-left: 70px;
+    font-size: 18px;
+    font-family: PingFang SC;
+    font-weight: 400;
+    color: #ffffff;
+  }
+}
+.list_box {
+  width: 100%;
+  height: 780px;
+  margin: 0 auto;
+}
+.warning-table {
+  height: 640px;
+}
+.pagination {
+  padding-right: 0;
+  margin-top: 0;
+  text-align: right;
+}
+.g-bread {
+  padding: 10px 10px 15px;
+  ::v-deep .el-breadcrumb__item {
+    font-size: 16px;
+    .el-breadcrumb__inner {
+      color: #fff;
+    }
+  }
+  ::v-deep .el-breadcrumb__item:first-child {
+    .el-breadcrumb__inner {
+      color: #a0c3d9;
+    }
+  }
+}
+</style>

src/views/modules/visual/basicinfo/houseStatic/houseMore.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="m-pop">
+    <div class="wrap">
+      <cpt-card>
+        <div class="title">
+          <img src="@/assets/img/shuju/title-tip.png" />
+          <span>更多信息</span>
+        </div>
+
+        <div class="btn-close"
+             @click="handleClose">
+          <img src="@/assets/img/shuju/people/close.png" />
+        </div>
+
+        <div class="list">
+          <div class="item">
+            <span class="item-field">所属网格：</span>
+            <span>{{ 11 }}</span>
+          </div>
+          <div class="item">
+            <span class="item-field">所属小区：</span>
+            <span>{{ 11 }}</span>
+          </div>
+          <div class="item">
+            <span class="item-field">所属楼栋：</span>
+            <span>{{ 11 }}-{{ 11 }}</span>
+          </div>
+          <div class="item">
+            <span class="item-field">所属家庭：</span>
+            <span>{{ 11 }}</span>
+          </div>
+          <div class="item">
+            <span class="item-field">所属家庭：</span>
+            <span>{{ 11 }}</span>
+          </div>
+          <div class="item">
+            <span class="item-field">所属家庭：</span>
+            <span>{{ 11 }}</span>
+          </div>
+          <div class="item">
+            <span class="item-field">所属家庭：</span>
+            <span>{{ 11 }}</span>
+          </div>
+          <div class="item">
+            <span class="item-field">所属家庭：</span>
+            <span>{{ 11 }}</span>
+          </div>
+
+        </div>
+
+      </cpt-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import cptCard from "@/views/modules/visual/cpts/card";
+import { requestPost } from "@/js/dai/request";
+import cptTb from "@/views/modules/visual/cpts/tb";
+
+export default {
+  name: "peopleMore",
+  props: {
+    info: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+
+  },
+
+  components: {
+    cptCard,
+    cptTb,
+  },
+
+  data () {
+    return {
+
+    };
+  },
+
+  computed: {
+
+  },
+
+  watch: {
+
+  },
+
+  mounted () {
+
+  },
+
+  methods: {
+
+    handleClose () {
+      this.$emit("close");
+    },
+
+
+  },
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/people.scss"
+  scoped
+></style>

src/views/modules/visual/basicinfo/houseStatic/houseStatic.vue

@@ -12,7 +12,8 @@
         <span class="router_child">{{orgName}}</span>
       </div>
     </div>
-    <cpt-card :min-full-screen="true">
+    <cpt-card v-if="!showHouseList&&!showPeopleList"
+              :min-full-screen="true">
       <div class="card-title">
         <img class="title-icon"
              src="@/assets/img/shuju/title-tip.png" />
@@ -45,24 +46,29 @@
 
           <div v-if="!dataLoading"
                class="pie-table">
-            <div class="pie-table-total">
+            <div class="pie-table-total"
+                 @click="handleClickHouse('')">
               <div class="pie-table-total-count">{{houseData.houseTotal}}</div>
               <div class="pie-table-title">房屋总数</div>
             </div>
             <div class="pie-table-line"></div>
-            <div class="pie-table-total ">
+            <div class="pie-table-total "
+                 @click="handleClickHouse('0')">
               <div class="pie-table-total-count zz">{{houseData.zzHouseTotal}}</div>
               <div class="pie-table-title">自住房屋数</div>
             </div>
-            <div class="pie-table-total ">
+            <div class="pie-table-total "
+                 @click="handleClickHouse('1')">
               <div class="pie-table-total-count cz">{{houseData.czHouseTotal}}</div>
               <div class="pie-table-title">出租房屋数</div>
             </div>
-            <div class="pie-table-total ">
+            <div class="pie-table-total "
+                 @click="handleClickHouse('2')">
               <div class="pie-table-total-count xz">{{houseData.xzHouseTotal}}</div>
               <div class="pie-table-title">闲置房屋数</div>
             </div>
-            <div class="pie-table-total ">
+            <div class="pie-table-total "
+                 @click="handleClickHouse('3')">
               <div class="pie-table-total-count wsc">{{houseData.wscHouseTotal}}</div>
               <div class="pie-table-title">未出售房屋数</div>
             </div>
@@ -97,16 +103,19 @@
 
           <div v-if="!dataLoading"
                class="pie-table">
-            <div class="pie-table-total">
+            <div class="pie-table-total"
+                 @click="handleClickPeople('all')">
               <div class="pie-table-total-count">{{userData.userTotal}}</div>
               <div class="pie-table-title">居民总数</div>
             </div>
             <div class="pie-table-line"></div>
-            <div class="pie-table-total ">
+            <div class="pie-table-total "
+                 @click="handleClickPeople('cz')">
               <div class="pie-table-total-count zz">{{userData.czUserTotal}}</div>
               <div class="pie-table-title">常住人口数</div>
             </div>
-            <div class="pie-table-total ">
+            <div class="pie-table-total "
+                 @click="handleClickPeople('ld')">
               <div class="pie-table-total-count cz">{{userData.ldUserTotal}}</div>
               <div class="pie-table-title">流动人口数</div>
             </div>
@@ -196,6 +205,21 @@
       </div>
 
     </cpt-card>
+
+    <house-list v-if="showHouseList "
+                :orgId="orgId"
+                :orgType="orgType"
+                :rentType="rentType"
+                @close="showHouseList = false">
+
+    </house-list>
+    <people-list v-if="showPeopleList "
+                 :orgId="orgId"
+                 :orgType="orgType"
+                 :type="type"
+                 @close="showPeopleList = false">
+
+    </people-list>
   </div>
 </template>
 
@@ -208,6 +232,8 @@ import screenEchartsFrame from "../../components/screen-echarts-frame";
 import ScreenLoading from "@/views/modules/visual/components/screen-loading";
 import { housePieOption } from './options'
 import { userPieOption } from './userOptions'
+import houseList from './houseList'
+import peopleList from './peopleList'
 
 import * as echarts from 'echarts';
 export default {
@@ -216,7 +242,9 @@ export default {
     cptCard,
     screenTable,
     screenEchartsFrame,
-    ScreenLoading
+    ScreenLoading,
+    houseList,
+    peopleList
   },
   data () {
     return {
@@ -293,6 +321,11 @@ export default {
       zoom: null,
       parentPolygon: [],
 
+      rentType: '',//点击房屋数类型
+      type: '',//点击人员数类型
+      showPeopleList: false,
+      showHouseList: false
+
     };
   },
   async mounted () {
@@ -316,9 +349,21 @@ export default {
       this.getHousePie()
       this.getUserPie()
 
+    },
 
-
+    //点击房屋数
+    handleClickHouse (rentType) {
+      this.toSubAgency('house')
+      this.rentType = rentType
+      this.showHouseList = true
     },
+    //点击人员数
+    handleClickPeople (type) {
+      this.toSubAgency('people')
+      this.type = type
+      this.showPeopleList = true
+    },
+
     housePieInitOk (dom) {
       console.log('pie准备好了', dom)
       this.housePieChartS = dom
@@ -350,6 +395,9 @@ export default {
           this.$refs.housePieChart.hideLoading()
         }
 
+        this.orgId = data.orgId
+        this.orgType = data.orgType
+
 
       } else {
         this.houseData = {}
@@ -595,33 +643,36 @@ export default {
 
     async handleToSubAgency (item) {
       if (!this.dataLoading) {
-        this.toSubAgency(item)
+        this.toSubAgency('subAgency', item)
 
         await this.getApiData()
       }
 
-
-
-
     },
 
     //下钻到下一级 
-    async toSubAgency (item) {
+    async toSubAgency (type, item) {
-
       this.runNum++
       let obj = {
         orgId: this.orgId,
         orgType: this.orgType,
         orgName: this.orgName,
+        type: type
       }
-
-
       this.runAgencyArray.push(obj)
 
+      if (type === 'subAgency') {
+
         this.orgId = item.orgId
         this.orgType = item.orgType
         this.orgName = item.orgName
 
+      } else if (type === 'house') {
+
+        this.orgName = '房屋列表'
+      } else if (type === 'people') {
+        this.orgName = '人员列表'
+      }
 
     },
 
@@ -629,6 +680,7 @@ export default {
     //返回所选组织
     handleClickAgency (index) {
 
+
       const cutNum = this.runAgencyArray.length - index//要减去的长度
       this.runNum = this.runNum - cutNum
 
@@ -642,6 +694,14 @@ export default {
       this.orgId = orgData.orgId
       this.orgType = orgData.orgType
       this.orgName = orgData.orgName
+      this.showHouseList = false
+      this.showPeopleList = false
+      // if (orgData.type === 'house') {
+      //   this.showHouseList = false
+      // }
+      // if (orgData.type === 'people') {
+      //   this.showPeopleList = false
+      // }
 
       this.getApiData()
 

src/views/modules/visual/basicinfo/houseStatic/peopleList.vue

@@ -0,0 +1,235 @@
+<template>
+  <div class="div_people_search">
+
+    <div class="list_box">
+      <div class="info_tip">
+        <img src="@/assets/img/shuju/title-tip.png"
+             alt />
+        <div class="tip_title">{{tableTitle}}</div>
+      </div>
+      <div class="warning-table">
+        <div class="table">
+          <div class="table-header">
+            <div class="td td1">序号</div>
+            <div class="td td1">姓名</div>
+            <div class="td td3">所属网格</div>
+            <div class="td td3">所属房屋</div>
+            <div class="td td2">手机</div>
+            <div class="td td3">身份证</div>
+            <div class="td td1">性别</div>
+            <div class="td td2">出生日期</div>
+            <div class="td td1">操作</div>
+
+          </div>
+          <div v-if="!loading && tableData.length> 0"
+               class="table-body">
+            <div class="table-body-tr"
+                 v-for="(item,index) in tableData"
+                 :key='index'>
+              <div class="td td1">{{item.sort}} </div>
+              <div class="td td1">{{item.name}} </div>
+              <div class="td td3">{{item.gridName}} </div>
+              <div class="td td3">{{item.neighborHoodName + item.buildNum}} </div>
+              <!-- <div class="td td1">{{item.buildNum}} </div> -->
+              <div class="td td2">{{item.mobile}} </div>
+              <div class="td td3">{{item.idCard}} </div>
+              <div class="td td1">{{item.gender}} </div>
+              <div class="td td2">{{item.birthday}} </div>
+              <div @click="handelToPeople(item)"
+                   class="td td1 btn_detail">{{'查看'}} </div>
+
+            </div>
+          </div>
+
+          <div class="table-status"
+               v-if="loading">
+            <screen-loading>加载中</screen-loading>
+          </div>
+
+          <div class="table-status"
+               v-if="tableData.length == 0 && !loading">
+            <div class="no-data">
+              <img src="@/assets/img/modules/visual/noData.png"
+                   class="no-data-img" />
+            </div>
+          </div>
+
+        </div>
+
+      </div>
+      <div class="pagination">
+        <el-pagination hide-on-single-page
+                       background
+                       layout="prev, pager, next, total"
+                       :current-page="pageNo"
+                       :page-size="pageSize"
+                       :total="total"
+                       @current-change="pageCurrentChangeHandle">
+        </el-pagination>
+      </div>
+
+    </div>
+
+    <people-more v-show="showedMoreInfo"
+                 v-if="info.userId"
+                 :userId="info.userId"
+                 :gridName="info.gridName"
+                 @close="showedMoreInfo = false" />
+  </div>
+
+</template>
+
+<script>
+import { requestPost } from "@/js/dai/request";
+
+import ScreenLoading from "@/views/modules/visual/cpts/loading";
+import peopleMore from "@/views/modules/visual/basicinfo/cpts/people-more";
+
+export default {
+  name: "people-list",
+  components: {
+    ScreenLoading, peopleMore
+  },
+  data () {
+    return {
+      showedMoreInfo: false,
+      tableTitle: '人员列表',
+      loading: false,
+
+      tableData: [],
+
+      pageSize: 10,
+      pageNo: 1,
+      total: 0,
+      info: {},
+
+    };
+  },
+  mounted () {
+
+    this.tableData = []
+
+    this.loadList()
+
+  },
+  deactivated () {
+
+  },
+
+  methods: {
+
+    async loadList () {
+      this.loading = true
+      const url = "/epmetuser/icresiuser/icuserstatislist"
+      let params = {
+        orgId: this.orgId,
+        orgType: this.orgType,
+        type: this.type,
+        pageSize: this.pageSize,
+        pageNo: this.pageNo
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+      this.loading = false
+      if (code === 0) {
+        this.total = data.total
+        this.tableData = data.list
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+    //点击查看
+    handelToPeople (item) {
+      // this.toSubAgency('people', this.tableData[index].userId)
+      this.info = { ...item }
+      this.showedMoreInfo = true
+    },
+
+    pageCurrentChangeHandle (val) {
+      this.pageNo = val
+      this.loadList()
+    },
+
+
+  },
+  destroyed () {
+    console.log("我已经离开了！");
+
+  },
+
+
+  props: {
+    orgId: {
+      type: String,
+      default: "",
+    },
+    orgType: {
+      type: String,
+      default: "",
+    },
+    type: {
+      type: String,
+      default: "",
+    },
+  },
+
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/basicInfoMain.scss"
+  scoped
+></style>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/searchPerson.scss"
+  scoped
+></style>
+
+
+
+<style lang="scss" scoped>
+.div_search_list {
+  .el-input__inner[WarningColor="warning"] {
+    border-radius: 8px 0 0 8px;
+    height: 53px;
+    background-color: #01106800;
+    border: 2px solid #0082fb;
+    padding-left: 70px;
+    font-size: 18px;
+    font-family: PingFang SC;
+    font-weight: 400;
+    color: #ffffff;
+  }
+}
+.list_box {
+  width: 100%;
+  height: 780px;
+  margin: 0 auto;
+}
+.warning-table {
+  height: 640px;
+}
+.pagination {
+  padding-right: 0;
+  margin-top: 0;
+  text-align: right;
+}
+.g-bread {
+  padding: 10px 10px 15px;
+  ::v-deep .el-breadcrumb__item {
+    font-size: 16px;
+    .el-breadcrumb__inner {
+      color: #fff;
+    }
+  }
+  ::v-deep .el-breadcrumb__item:first-child {
+    .el-breadcrumb__inner {
+      color: #a0c3d9;
+    }
+  }
+}
+</style>