人房统计磐石

src/assets/scss/modules/visual/people.scss

@@ -375,6 +375,10 @@
         height: 78px;
         width: 128px;
       }
+      .rel-bg-panshi {
+        height: 68px;
+        width: 128px;
+      }
 
       .rel-text {
         @include toe;

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

@@ -0,0 +1,750 @@
+<template>
+  <div class="warning-box">
+    <!-- 组织路由 -->
+    <div class="div_top">
+      <div class="router_line"></div>
+      <div class="div_router">
+        <span class="router_parents"
+              v-for="(item,index) in runAgencyArray"
+              @click="handleClickAgency(index)"
+              :key="index">{{item.orgName}}<span class="arrow">></span></span>
+
+        <span class="router_child">{{orgName}}</span>
+      </div>
+    </div>
+    <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" />
+        <div class="title-label">
+          人房概览数据统计
+
+        </div>
+      </div>
+      <div class="card-left-title">本级人房概览数据统计</div>
+      <div class="card-echart">
+
+        <div class="card-left">
+          <div v-if="!dataLoading"
+               class="div-chart">
+            <screen-echarts-frame class="echart-wr"
+                                  @myChartMethod="housePieInitOk"
+                                  ref="housePieChart"></screen-echarts-frame>
+
+            <div class="div-tip">
+              <div :class="['legend_item',{'item_last':index===legendArray.length-1}]"
+                   v-for="(item,index) in legendArray"
+                   :key="index">
+                <div class="item_name">{{item.name}}</div>
+                <img :src="item.url" />
+
+              </div>
+            </div>
+
+          </div>
+
+          <div v-if="!dataLoading"
+               class="pie-table">
+            <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 "
+                 @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 "
+                 @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 "
+                 @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 "
+                 @click="handleClickHouse('3')">
+              <div class="pie-table-total-count wsc">{{houseData.wscHouseTotal}}</div>
+              <div class="pie-table-title">未出售房屋数</div>
+            </div>
+          </div>
+
+          <div class="loading-status"
+               v-if="dataLoading">
+            <screen-loading>加载中</screen-loading>
+          </div>
+
+        </div>
+
+        <div class="card-left">
+          <div v-if="!dataLoading"
+               class="div-chart">
+            <screen-echarts-frame class="echart-wr"
+                                  @myChartMethod="userPieInitOk"
+                                  ref="userPieChart"></screen-echarts-frame>
+
+            <div class="div-tip2">
+              <div class="cz-tip">
+                <div class="cz-tip-dot"></div>
+                <span>常住人口数</span>
+              </div>
+              <div class="ld-tip">
+                <div class="ld-tip-dot"></div>
+                <span>流动人口数</span>
+              </div>
+            </div>
+
+          </div>
+
+          <div v-if="!dataLoading"
+               class="pie-table">
+            <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 "
+                 @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 "
+                 @click="handleClickPeople('ld')">
+              <div class="pie-table-total-count cz">{{userData.ldUserTotal}}</div>
+              <div class="pie-table-title">流动人口数</div>
+            </div>
+
+          </div>
+
+          <div class="loading-status"
+               v-if="dataLoading">
+            <screen-loading>加载中</screen-loading>
+          </div>
+
+        </div>
+      </div>
+      <div v-if="orgType!=='village'">
+
+        <div class="card-left-title">下级人房概览数据统计</div>
+
+        <div v-if="subList.length>0"
+             class="card-table">
+          <div v-for="(item,index) in subList"
+               :key="index"
+               :class="['table_item',index%2 === 0?'item_dark':'']">
+            <div class="item_name"
+                 @click="handleToSubAgency(item)">
+              <img src="@/assets/img/shuju/logo1.png" />
+              <span>{{item.orgName}}</span>
+            </div>
+
+            <div class="item_data">
+              <div class="item_left">
+                <div class="pie-table-total">
+                  <div class="pie-table-total-count"
+                       @click="handleClickHouse('',item)">{{item.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-count colorwhite"
+                       @click="handleClickHouse('0',item)">{{item.zzHouseTotal}}</div>
+                  <div class="pie-table-title table-table-title">{{item.zzHouseRatio+'%'}}</div>
+                  <div class="pie-table-title table-table-title">自住房屋数</div>
+                </div>
+                <div class="pie-table-total ">
+                  <div class="pie-table-total-count colorwhite"
+                       @click="handleClickHouse('1',item)">{{item.czHouseTotal}}</div>
+                  <div class="pie-table-title table-table-title">{{item.czHouseRatio+'%'}}</div>
+                  <div class="pie-table-title table-table-title">出租房屋数</div>
+                </div>
+                <div class="pie-table-total ">
+                  <div class="pie-table-total-count colorwhite"
+                       @click="handleClickHouse('2',item)">{{item.xzHouseTotal}}</div>
+                  <div class="pie-table-title table-table-title">{{item.xzHouseRatio+'%'}}</div>
+                  <div class="pie-table-title table-table-title">闲置房屋数</div>
+                </div>
+                <div class="pie-table-total ">
+                  <div class="pie-table-total-count colorwhite"
+                       @click="handleClickHouse('3',item)">{{item.wscHouseTotal}}</div>
+                  <div class="pie-table-title table-table-title">{{item.wscHouseRatio+'%'}}</div>
+                  <div class="pie-table-title table-table-title">未出售房屋数</div>
+                </div>
+              </div>
+              <div class="item_right">
+                <div class="pie-table-total">
+                  <div class="pie-table-total-count"
+                       @click="handleClickPeople('all',item)">{{item.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-count colorwhite"
+                       @click="handleClickPeople('cz',item)">{{item.czUserTotal}}</div>
+                  <div class="pie-table-title table-table-title">{{item.czUserRatio+'%'}}</div>
+                  <div class="pie-table-title table-table-title">常住人口数</div>
+                </div>
+                <div class="pie-table-total ">
+                  <div class="pie-table-total-count colorwhite"
+                       @click="handleClickPeople('ld',item)">{{item.ldUserTotal}}</div>
+                  <div class="pie-table-title table-table-title">{{item.ldUserRatio+'%'}}</div>
+                  <div class="pie-table-title table-table-title">流动人口数</div>
+                </div>
+
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="subList.length===0"
+             class="no-data">
+
+          <img src="@/assets/img/modules/visual/noData.png"
+               class="no-data-img" />
+
+        </div>
+
+      </div>
+
+    </cpt-card>
+
+    <house-list v-if="showHouseList "
+                :orgId="selOrgId"
+                :orgType="selOrgType"
+                :rentType="rentType"
+                @close="showHouseList = false">
+
+    </house-list>
+    <people-list v-if="showPeopleList "
+                 :orgId="selOrgId"
+                 :orgType="selOrgType"
+                 :type="type"
+                 @close="showPeopleList = false">
+
+    </people-list>
+  </div>
+</template>
+
+<script>
+import { requestPost } from "@/js/dai/request";
+import screenTable from "../../components/screen-table/index";
+import cptCard from "@/views/modules/visual/cpts/card";
+import nextTick from "dai-js/tools/nextTick";
+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 {
+  name: "warning-box",
+  components: {
+    cptCard,
+    screenTable,
+    screenEchartsFrame,
+    ScreenLoading,
+    houseList,
+    peopleList
+  },
+  data () {
+    return {
+      dataLoading: true,
+      orgId: '',
+      orgType: '',
+      orgName: this.$store.state.user.agencyName,
+      // orgShowName: this.$store.state.user.agencyName,//面包屑显示当前组织名称
+
+
+      housePieChartS: null,
+      housePieChart: '',
+      housePieOption: {},
+      housePieInitState: false,
+      houseData: {
+        orgId: '',//组织、网格、小区Id	
+        orgType: '',//组织、网格、小区类型 agency  grid   village	
+        houseTotal: 198000,//房屋总数	
+        zzHouseTotal: 2000,//房屋自住总数	
+        zzHouseRatio: '90%',//房屋自住总数占比（保留两位小数，带百分号的）	
+        czHouseTotal: 30,//房屋出租总数		
+        czHouseRatio: '5%',//房屋出租总数占比（保留两位小数，带百分号的）	
+        xzHouseTotal: 200,//房屋闲置总数		
+        xzHouseRatio: '70%',//房屋闲置总数占比（保留两位小数，带百分号的）	
+        wscHouseTotal: 100,//房屋未售出总数
+        wscHouseRatio: '20%',//房屋未售出总数占比
+      },
+      houseColorArray: ['#3dda83', '#e43c26', '#fac126', '#fc8452'],
+      housePieData: [],
+
+      legendArray: [
+        {
+          name: '自住房屋数',
+          url: require('../../../../../assets/img/shuju/measure/lv@2x.png')
+        },
+        {
+          name: '出租房屋数',
+          url: require('../../../../../assets/img/shuju/measure/hong@2x.png')
+        },
+        {
+          name: '闲置房屋数',
+          url: require('../../../../../assets/img/shuju/measure/huang@2x.png')
+        },
+        {
+          name: '未出售房屋数',
+          url: require('../../../../../assets/img/shuju/measure/cheng.png')
+        }
+      ],
+
+      userPieChartS: null,
+      userPieChart: '',
+      userPieOption: {},
+      userPieInitState: false,
+      userData: {
+        orgId: '',//组织、网格、小区Id	
+        orgType: '',//组织、网格、小区类型 agency  grid   village	
+        userTotal: 198000,//居民总数	
+        czUserTotal: 2000,//常住居民总数	
+        czUserRatio: '90%',//常住居民总数占比	
+        ldUserTotal: 30,//流动居民总数		
+        ldUserRatio: '5%',//流动居民总数占比	
+
+      },
+      userColorArray: ['#3dda83', '#e43c26'],
+      userPieData: [],
+
+      subList: [],
+
+      //下钻层级记录
+      runNum: 0,
+      runAgencyArray: [],
+      selUserId: '',
+      center: [],
+      zoom: null,
+      parentPolygon: [],
+
+      rentType: '',//点击房屋数类型
+      type: '',//点击人员数类型
+      showPeopleList: false,
+      showHouseList: false,
+      selOrgId: '',
+      selOrgType: '',
+
+    };
+  },
+  async mounted () {
+
+    await this.getApiData()
+
+  },
+  methods: {
+    async getApiData () {
+      this.dataLoading = true
+
+      this.housePieInitState = false
+      this.userPieInitState = false
+      await this.getHousechart()
+      await this.getUserchart()
+      await this.getSubuserhouselist()
+      this.dataLoading = false
+
+      await nextTick(500)
+
+      this.getHousePie()
+      this.getUserPie()
+
+    },
+
+    //点击房屋数
+    handleClickHouse (rentType, item) {
+      if (item) {
+        this.selOrgId = item.orgId
+        this.selOrgType = item.orgType
+      } else {
+        this.selOrgId = this.houseData.orgId
+        this.selOrgType = this.houseData.orgType
+      }
+      this.toSubAgency('house')
+      this.rentType = rentType
+      this.showHouseList = true
+    },
+    //点击人员数
+    handleClickPeople (type, item) {
+      if (item) {
+        this.selOrgId = item.orgId
+        this.selOrgType = item.orgType
+      } else {
+        this.selOrgId = this.houseData.orgId
+        this.selOrgType = this.houseData.orgType
+      }
+      this.toSubAgency('people')
+      this.type = type
+      this.showPeopleList = true
+    },
+
+    housePieInitOk (dom) {
+      console.log('pie准备好了', dom)
+      this.housePieChartS = dom
+      // this.housePieInitState = true
+
+    },
+    userPieInitOk (dom) {
+      console.log('pie准备好了', dom)
+      this.userPieChartS = dom
+      // this.userPieInitState = true
+
+    },
+
+    async getHousechart (node, resolve) {
+      if (this.$refs.housePieChart) {
+        this.$refs.housePieChart.showLoading()
+      }
+
+      // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/house/housechart";
+      const url = '/gov/org/house/housechart'
+      let params = {
+        orgId: this.orgId,
+        orgType: this.orgType
+      };
+      const { data, code, msg } = await requestPost(url, params);
+      if (code === 0) {
+        this.houseData = data
+        if (this.$refs.housePieChart) {
+          this.$refs.housePieChart.hideLoading()
+        }
+
+      } else {
+        this.houseData = {}
+        this.$message.error(msg);
+      }
+      this.housePieInitState = true
+    },
+
+    getHousePie () {
+      if (this.housePieInitState) {
+        this.assignHousePieChart()
+      } else {
+        setTimeout(() => {
+          this.getHousePie()
+        }, 500)
+      }
+    },
+
+    assignHousePieChart () {
+
+      if (this.houseData) {
+        this.$refs.housePieChart.setNoData(false)
+        this.$refs.housePieChart.clear()
+        this.housePieData = []
+
+        const _that = this
+        // 获取pieChart配置
+        this.housePieOption = housePieOption(this.housePieChartS)
+        // let maxValue = this.housePieData[0].total
+        // let maxIndex = 0
+
+        let obj1 = {
+          name: '自住房屋数',
+          value: this.houseData.zzHouseRatio,
+          selected: true
+        }
+        let obj2 = {
+          name: '出租房屋数',
+          value: this.houseData.czHouseRatio
+        }
+        let obj3 = {
+          name: '闲置房屋数',
+          value: this.houseData.xzHouseRatio
+        }
+        let obj4 = {
+          name: '未出售房屋数',
+          value: this.houseData.wscHouseRatio
+        }
+
+        this.housePieData.push(obj1)
+        this.housePieData.push(obj2)
+        this.housePieData.push(obj3)
+        this.housePieData.push(obj4)
+
+        this.housePieOption.title.text = this.houseData.houseTotal
+        this.housePieOption.series[1].itemStyle = {
+          color: function (params) {
+            return _that.houseColorArray[params.dataIndex]
+          }
+        }
+
+        let fun = function (params) {
+          _that.clickHousePie(params.dataIndex)
+
+        }
+        this.$refs.housePieChart.handleClick(fun)
+        this.clickHousePie(0)
+      } else {
+        this.$refs.housePieChart.setNoData(true)
+      }
+    },
+
+    async getUserchart (node, resolve) {
+      if (this.$refs.userPieChart) {
+        this.$refs.userPieChart.showLoading()
+      }
+      // const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/icresiuser/userchart";
+      const url = '/epmetuser/icresiuser/userchart'
+      let params = {
+        orgId: this.orgId,
+        orgType: this.orgType
+      };
+      const { data, code, msg } = await requestPost(url, params);
+      if (code === 0) {
+        this.userData = data
+        if (this.$refs.userPieChart) {
+          this.$refs.userPieChart.hideLoading()
+        }
+      } else {
+        this.userData = {}
+        this.$message.error(msg);
+      }
+      this.userPieInitState = true
+    },
+
+    getUserPie () {
+      if (this.userPieInitState) {
+        this.assignUserPieChart()
+      } else {
+        setTimeout(() => {
+          this.getUserPie()
+        }, 500)
+      }
+    },
+
+    assignUserPieChart () {
+
+      if (this.userData) {
+        this.$refs.userPieChart.setNoData(false)
+        this.$refs.userPieChart.clear()
+        this.userPieData = []
+
+        const _that = this
+        // 获取pieChart配置
+        this.userPieOption = userPieOption(this.userPieChartS)
+        // let maxValue = this.userPieData[0].total
+        // let maxIndex = 0
+
+        let obj1 = {
+          name: '常住人口数',
+          value: this.userData.czUserRatio,
+          selected: true
+        }
+        let obj2 = {
+          name: '流动人口数',
+          value: this.userData.ldUserRatio
+        }
+
+        this.userPieData.push(obj1)
+        this.userPieData.push(obj2)
+
+        this.userPieOption.title.text = this.userData.userTotal
+        this.userPieOption.series[1].itemStyle = {
+          color: function (params) {
+            return _that.userColorArray[params.dataIndex]
+          }
+        }
+
+        let fun = function (params) {
+          _that.clickUserPie(params.dataIndex)
+
+        }
+        this.$refs.userPieChart.handleClick(fun)
+        this.clickUserPie(0)
+      } else {
+        this.$refs.userPieChart.setNoData(true)
+      }
+    },
+
+    async getSubuserhouselist (node, resolve) {
+      // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/house/subuserhouselist";
+      const url = '/gov/org/house/subuserhouselist'
+      let params = {
+        orgId: this.orgId,
+        orgType: this.orgType
+      };
+      const { data, code, msg } = await requestPost(url, params);
+      if (code === 0) {
+        this.subList = data
+
+
+      } else {
+      }
+    },
+
+    async clickHousePie (seriesIndex) {
+      this.housePieData.forEach((element, index) => {
+        if (index === seriesIndex) {
+          element.label = {
+            show: true,
+
+          };
+          element.labelLine = {
+            show: true,
+            lineStyle: {
+              opacity: 1,
+            }
+
+          };
+          console.log('zhilma')
+
+        } else {
+          element.label = {
+            show: false,
+
+          };
+          element.labelLine = {
+            show: false,
+            lineStyle: {
+              opacity: 0,
+              color: 'rgba(255,255,255,0)'
+            }
+
+          };
+
+        }
+      });
+      this.housePieOption.series[1].data = this.housePieData
+      // this.$refs.housePieChart.hideLoading()
+      this.$refs.housePieChart.setOption(this.housePieOption)
+
+
+    },
+
+    async clickUserPie (seriesIndex) {
+      this.userPieData.forEach((element, index) => {
+        if (index === seriesIndex) {
+          element.label = {
+            show: true,
+
+          };
+          element.labelLine = {
+            show: true,
+            lineStyle: {
+              opacity: 1,
+            }
+
+          };
+          console.log('zhilma')
+
+        } else {
+          element.label = {
+            show: false,
+
+          };
+          element.labelLine = {
+            show: false,
+            lineStyle: {
+              opacity: 0,
+              color: 'rgba(255,255,255,0)'
+            }
+
+          };
+
+        }
+      });
+      this.userPieOption.series[1].data = this.userPieData
+      // this.$refs.userPieChart.hideLoading()
+      this.$refs.userPieChart.setOption(this.userPieOption)
+
+      // this.getTable()
+    },
+
+    async handleToSubAgency (item) {
+      if (!this.dataLoading) {
+        this.toSubAgency('subAgency', item)
+
+        await this.getApiData()
+      }
+
+    },
+
+    //下钻到下一级 
+    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 = '人员列表'
+      }
+
+    },
+
+
+    //返回所选组织
+    handleClickAgency (index) {
+
+
+      const cutNum = this.runAgencyArray.length - index//要减去的长度
+      this.runNum = this.runNum - cutNum
+
+      let orgData = this.runAgencyArray[index]
+      console.log('----------------', orgData)
+
+      for (let i = 0; i < cutNum; i++) {
+        this.runAgencyArray.pop()
+      }
+
+      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()
+
+
+    },
+
+  },
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/warning.scss"
+  scoped
+></style>
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/basicInfoMain.scss"
+  scoped
+></style>
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/houseStatic.scss"
+  scoped
+></style>
+

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

@@ -148,7 +148,7 @@
               <div class="rel z-zuo-2"
                    @click="toUserInfo(houseInfo.userList[0].userId)"
                    v-if="houseInfo.userList[0]">
-                <img class="rel-bg"
+                <img :class="['rel-bg',{'rel-bg-panshi':isPanshi}]"
                      src="@/assets/img/shuju/people/huzhu-kuang-zuo.png" />
                 <img class="rel-line"
                      src="@/assets/img/shuju/people/huzhu-line/zuo2.png" />
@@ -160,7 +160,8 @@
                   <div class="rel-name">
                     {{ houseInfo.userList[0].userName }}
                   </div>
-                  <div class="rel-name">
+                  <div v-if="!isPanshi"
+                       class="rel-name">
                     {{ houseInfo.userList[0].renHuCondition }}
                   </div>
                 </div>
@@ -169,7 +170,7 @@
               <div class="rel z-you-2"
                    @click="toUserInfo(houseInfo.userList[1].userId)"
                    v-if="houseInfo.userList[1]">
-                <img class="rel-bg"
+                <img :class="['rel-bg',{'rel-bg-panshi':isPanshi}]"
                      src="@/assets/img/shuju/people/huzhu-kuang-you.png" />
                 <img class="rel-line"
                      src="@/assets/img/shuju/people/huzhu-line/you2.png" />
@@ -181,7 +182,8 @@
                   <div class="rel-name">
                     {{ houseInfo.userList[1].userName }}
                   </div>
-                  <div class="rel-name">
+                  <div v-if="!isPanshi"
+                       class="rel-name">
                     {{ houseInfo.userList[1].renHuCondition }}
                   </div>
                 </div>
@@ -190,7 +192,7 @@
               <div class="rel z-zuo-1"
                    @click="toUserInfo(houseInfo.userList[2].userId)"
                    v-if="houseInfo.userList[2]">
-                <img class="rel-bg"
+                <img :class="['rel-bg',{'rel-bg-panshi':isPanshi}]"
                      src="@/assets/img/shuju/people/huzhu-kuang-zuo.png" />
                 <img class="rel-line"
                      src="@/assets/img/shuju/people/huzhu-line/zuo1.png" />
@@ -202,7 +204,8 @@
                   <div class="rel-name">
                     {{ houseInfo.userList[2].userName }}
                   </div>
-                  <div class="rel-name">
+                  <div v-if="!isPanshi"
+                       class="rel-name">
                     {{ houseInfo.userList[2].renHuCondition }}
                   </div>
                 </div>
@@ -211,7 +214,7 @@
               <div class="rel z-you-1"
                    @click="toUserInfo(houseInfo.userList[3].userId)"
                    v-if="houseInfo.userList[3]">
-                <img class="rel-bg"
+                <img :class="['rel-bg',{'rel-bg-panshi':isPanshi}]"
                      src="@/assets/img/shuju/people/huzhu-kuang-you.png" />
                 <img class="rel-line"
                      src="@/assets/img/shuju/people/huzhu-line/you1.png" />
@@ -223,7 +226,8 @@
                   <span class="rel-name">{{
                     houseInfo.userList[3].userName
                   }}</span>
-                  <div class="rel-name">
+                  <div v-if="!isPanshi"
+                       class="rel-name">
                     {{ houseInfo.userList[3].renHuCondition }}
                   </div>
                 </div>
@@ -232,7 +236,7 @@
               <div class="rel z-zuo-3"
                    @click="toUserInfo(houseInfo.userList[4].userId)"
                    v-if="houseInfo.userList[4]">
-                <img class="rel-bg"
+                <img :class="['rel-bg',{'rel-bg-panshi':isPanshi}]"
                      src="@/assets/img/shuju/people/huzhu-kuang-zuo.png" />
                 <img class="rel-line"
                      src="@/assets/img/shuju/people/huzhu-line/zuo3.png" />
@@ -244,7 +248,8 @@
                   <div class="rel-name">
                     {{ houseInfo.userList[4].userName }}
                   </div>
-                  <div class="rel-name">
+                  <div v-if="!isPanshi"
+                       class="rel-name">
                     {{ houseInfo.userList[4].renHuCondition }}
                   </div>
                 </div>
@@ -253,7 +258,7 @@
               <div class="rel z-you-3"
                    @click="toUserInfo(houseInfo.userList[5].userId)"
                    v-if="houseInfo.userList[5]">
-                <img class="rel-bg"
+                <img :class="['rel-bg',{'rel-bg-panshi':isPanshi}]"
                      src="@/assets/img/shuju/people/huzhu-kuang-you.png" />
                 <img class="rel-line"
                      src="@/assets/img/shuju/people/huzhu-line/you3.png" />
@@ -265,7 +270,8 @@
                   <div class="rel-name">
                     {{ houseInfo.userList[5].userName }}
                   </div>
-                  <div class="rel-name">
+                  <div v-if="!isPanshi"
+                       class="rel-name">
                     {{ houseInfo.userList[5].renHuCondition }}
                   </div>
                 </div>
@@ -590,6 +596,10 @@ export default {
         showedInfo: false,
         currentIndex: 0,
       },
+
+      isPanshi: false,
+      customerId: '',
+
     };
   },
 
@@ -628,6 +638,15 @@ export default {
   },
 
   async mounted () {
+    //磐石街道：1580460084738760705
+    this.customerId = localStorage.getItem("customerId");
+    this.isPanshi = false
+
+    if (this.customerId === '1580460084738760705') {
+      this.isPanshi = true
+
+    }
+
     this.userId = this.uid;
     console.log(this.$router);
     this.getApiData();