首页-人口不能自动弹出详情框处理

shuishen

2024-12-20 188095bb08c684595b692c9ed56cbd2477fbdb1a

首页-人口不能自动弹出详情框处理

 src/components/map/components/architecturePopup.vue

@@ -1,311 +1,365 @@
<template>
    <div>
        <div v-if="architecturePopup" class="divForms-dom" id="architectureDivElementDom">
            <div style="width: 100%; height: 100%; transform: translate(0, 50%);">
                <div class="divForms divForms-theme" :class="{ 'scale-dom': scaleDomFlag }">
                    <div class="divForms-wrap">
                        <div class="area">
                            <div class="arrow-lt"></div>
                            <div class="b-t"></div>
                            <div class="b-r"></div>
                            <div class="b-b"></div>
                            <div class="b-l"></div>
                            <div class="arrow-rb"></div>
                            <div class="label-wrap">
                                <div class="title">
                                    详细信息
                                    <div class="close" @click="closePopup" title="关闭"></div>
                                </div>
                                <div v-show="architectureDataPopup.curDataType == '学校'" class="label-content">
                                    <div class="item">
                                        <div>校园名:</div>
                                        <div>{{ architectureDataPopup.unitName }}</div>
                                    </div>
                                    <div class="item">
                                        <div>在校教职工人数:</div>
                                        <div>{{ architectureDataPopup.teacherScale }}</div>
                                    </div>
                                    <div class="item">
                                        <div>在校学生数量:</div>
                                        <div>{{ architectureDataPopup.studentScale }}</div>
                                    </div>
                                    <div class="item">
                                        <div>办学区域:</div>
                                        <div>{{ architectureDataPopup.officeArea }}</div>
                                    </div>
                                    <div class="item">
                                        <div>学校类型:</div>
                                        <div>{{ architectureDataPopup.attentionType }}</div>
                                    </div>
                                    <div class="item">
                                        <div>办学主体:</div>
                                        <div>{{ architectureDataPopup.officeMain }}</div>
                                    </div>
                                </div>

                                <div v-show="architectureDataPopup.curDataType == '危爆品'" class="label-content">
                                    <div class="item">
                                        <div>单位名称:</div>
                                        <div>{{ architectureDataPopup.unitName }}</div>
                                    </div>
                                    <div class="item">
                                        <div>危险物品名称:</div>
                                        <div>{{ architectureDataPopup.hazardousGoodsName }}</div>
                                    </div>
                                </div>
                                <div v-show="architectureDataPopup.curDataType == '医院'" class="label-content">
                                    <div class="item">
                                        <div>医院名称:</div>
                                        <div>{{ architectureDataPopup.unitName }}</div>
                                    </div>
                                </div>
                                <div v-show="architectureDataPopup.curDataType == '党政机关' || architectureDataPopup.curDataType == '银行'"
                                    class="label-content">
                                    <div class="item">
                                        <div>单位名称:</div>
                                        <div>{{ architectureDataPopup.unitName }}</div>
                                    </div>
                                    <div class="item">
                                        <div>关注类型:</div>
                                        <div>{{ architectureDataPopup.attentionType }}</div>
                                    </div>
                                </div>
                                <div v-show="architectureDataPopup.curDataType == '其它重点单位'" class="label-content">
                                    <div class="item">
                                        <div>单位名称:</div>
                                        <div>{{ architectureDataPopup.unitName }}</div>
                                    </div>
                                </div>
                                <div v-show="architectureDataPopup.curDataType == '油气站'" class="label-content">
                                    <div class="item">
                                        <div>单位名称:</div>
                                        <div>{{ architectureDataPopup.unitName }}</div>
                                    </div>
                                    <div class="item">
                                        <div>关注类型:</div>
                                        <div>{{ architectureDataPopup.attentionType }}</div>
                                    </div>
                                    <div class="item">
                                        <div>规模:</div>
                                        <div>{{ architectureDataPopup.scale }}</div>
                                    </div>
                                    <div class="item">
                                        <div>状态:</div>
                                        <div>{{ architectureDataPopup.status }}</div>
                                    </div>
                                </div>
                                <div v-show="architectureDataPopup.curDataType == '旅馆酒店公寓'" class="label-content">
                                    <div class="item">
                                        <div>单位名称:</div>
                                        <div>{{ architectureDataPopup.unitName }}</div>
                                    </div>
                                    <div class="item">
                                        <div>座机:</div>
                                        <div>{{ architectureDataPopup.tel }}</div>
                                    </div>
                                </div>
                                <div class="label-content public" v-show="architectureDataPopup.curDataType != '茅家岭派出所'">
                                    <div class="item">
                                        <div>地址:</div>
                                        <div>{{ architectureDataPopup.address }}</div>
                                    </div>
                                    <div class="item">
                                        <div>辖区派出所:</div>
                                        <div>{{ architectureDataPopup.policeStationName }}</div>
                                    </div>
                                    <div class="item">
                                        <div>责任人:</div>
                                        <div>{{ architectureDataPopup.person }}</div>
                                    </div>
                                    <div class="item">
                                        <div>责任人职务:</div>
                                        <div>{{ architectureDataPopup.job }}</div>
                                    </div>
                                    <div class="item">
                                        <div>责任人电话:</div>
                                        <div>{{ architectureDataPopup.phone }}</div>
                                    </div>
                                    <div class="item">
                                        <div>责任民警:</div>
                                        <div>{{ architectureDataPopup.policeman }}</div>
                                    </div>
                                    <div class="item">
                                        <div>责任民警电话:</div>
                                        <div>{{ architectureDataPopup.policemanPhone }}</div>
                                    </div>
                                    <div class="item">
                                        <div>安保级别:</div>
                                        <div>{{ architectureDataPopup.securityLevel }}</div>
                                    </div>
                                    <div class="item">
                                        <div>备注:</div>
                                        <div>{{ architectureDataPopup.remark }}</div>
                                    </div>
                                </div>
                                <div v-show="architectureDataPopup.curDataType == '茅家岭派出所'">
                                    <div v-show="architectureDataPopup.curDataTitle == '学校'" class="label-content">
                                        <div class="item">
                                            <div>县（市、区）:</div>
                                            <div>{{ architectureDataPopup.ZXXSQ }}</div>
                                        </div>
                                        <div class="item">
                                            <div>辖区派出所:</div>
                                            <div>{{ architectureDataPopup.XQPCS }}</div>
                                        </div>
                                        <div class="item">
                                            <div>校园名:</div>
                                            <div>{{ architectureDataPopup.XXMC }}</div>
                                        </div>
                                        <div class="item">
                                            <div>地址:</div>
                                            <div>{{ architectureDataPopup.JZDZ }}</div>
                                        </div>
                                        <div class="item">
                                            <div>在校教职工人数:</div>
                                            <div>{{ architectureDataPopup.ZXZG }}</div>
                                        </div>
                                        <div class="item">
                                            <div>在校学生数量:</div>
                                            <div>{{ architectureDataPopup.ZXXS }}</div>
                                        </div>
                                        <div class="item">
                                            <div>责任民警:</div>
                                            <div>{{ architectureDataPopup.BGMJ }}</div>
                                        </div>
                                    </div>

                                    <div v-show="architectureDataPopup.curDataTitle == '宾馆酒店'" class="label-content">
                                        <div class="item">
                                            <div>宾馆名称:</div>
                                            <div>{{ architectureDataPopup.JDMC }}</div>
                                        </div>
                                        <div class="item">
                                            <div>法人姓名:</div>
                                            <div>{{ architectureDataPopup.JDFR }}</div>
                                        </div>
                                        <div class="item">
                                            <div>法人身份证号码:</div>
                                            <div>{{ architectureDataPopup.FRSFZ }}</div>
                                        </div>
                                        <div class="item">
                                            <div>法人电话号码:</div>
                                            <div>{{ architectureDataPopup.FRLXDH }}</div>
                                        </div>
                                        <div class="item">
                                            <div>警务对接人姓名:</div>
                                            <div>{{ architectureDataPopup.JWDJ }}</div>
                                        </div>
                                        <div class="item">
                                            <div>警务对接人身份证号码:</div>
                                            <div>{{ architectureDataPopup.JWDJSFZ }}</div>
                                        </div>
                                        <div class="item">
                                            <div>警务对接人号码:</div>
                                            <div>{{ architectureDataPopup.JWDJLXFS }}</div>
                                        </div>
                                        <div class="item">
                                            <div>具体地址:</div>
                                            <div>{{ architectureDataPopup.JDDZ }}</div>
                                        </div>
                                        <div class="item">
                                            <div>现有员工数:</div>
                                            <div>{{ architectureDataPopup.JDYGS }}</div>
                                        </div>
                                        <div class="item">
                                            <div>房间数:</div>
                                            <div>{{ architectureDataPopup.JDFJS }}</div>
                                        </div>
                                    </div>

                                    <div v-show="architectureDataPopup.curDataTitle == '医院'" class="label-content">
                                        <div class="item">
                                            <div>医院名称:</div>
                                            <div>{{ architectureDataPopup.YYMC }}</div>
                                        </div>
                                        <div class="item">
                                            <div>社区:</div>
                                            <div>{{ architectureDataPopup.JZSQ }}</div>
                                        </div>
                                        <div class="item">
                                            <div>法人姓名:</div>
                                            <div>{{ architectureDataPopup.JZFR }}</div>
                                        </div>
                                        <div class="item">
                                            <div>身份证号码:</div>
                                            <div>{{ architectureDataPopup.FRSFZ }}</div>
                                        </div>
                                        <div class="item">
                                            <div>电话号码:</div>
                                            <div>{{ architectureDataPopup.JZDH }}</div>
                                        </div>
                                        <div class="item">
                                            <div>警务对接人员:</div>
                                            <div>{{ architectureDataPopup.JWDJ }}</div>
                                        </div>
                                        <div class="item">
                                            <div>警务对接人员身份证:</div>
                                            <div>{{ architectureDataPopup.JWDJSFZ }}</div>
                                        </div>
                                        <div class="item">
                                            <div>电话号码:</div>
                                            <div>{{ architectureDataPopup.JWDJLXFS }}</div>
                                        </div>
                                        <div class="item">
                                            <div>医院地址:</div>
                                            <div>{{ architectureDataPopup.JZDZ }}</div>
                                        </div>
                                    </div>

                                    <div v-show="architectureDataPopup.curDataTitle == '重点人员'" class="label-content">
                                        <div class="item">
                                            <div>姓名:</div>
                                            <div>{{ architectureDataPopup.realName }}</div>
                                        </div>
                                        <div class="item">
                                            <div>证件号码:</div>
                                            <div>{{ architectureDataPopup.realNameSFZ }}</div>
                                        </div>
                                        <div class="item">
                                            <div>性别:</div>
                                            <div>{{ architectureDataPopup.realNameXB }}</div>
                                        </div>
                                        <div class="item">
                                            <div>重点人员类别:</div>
                                            <div>{{ architectureDataPopup.zdryxl }}</div>
                                        </div>
                                        <div class="item">
                                            <div>户籍地详址:</div>
                                            <div>{{ architectureDataPopup.address }}</div>
                                        </div>
                                        <div class="item">
                                            <div>联系电话:</div>
                                            <div>{{ architectureDataPopup.phone }}</div>
                                        </div>
                                        <div class="item">
                                            <div>责任人:</div>
                                            <div>{{ architectureDataPopup.zdryzry }}</div>
                                        </div>
                                        <div class="item">
                                            <div>街道责任领导:</div>
                                            <div>{{ architectureDataPopup.zdrtjdld }}</div>
                                        </div>
                                        <div class="item">
                                            <div>列管事由:</div>
                                            <div>{{ architectureDataPopup.realNameLGSY }}</div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="b-t-l"></div>
                        <div class="b-b-r"></div>
                    </div>
                    <div class="arrow"></div>
  <div>
    <div v-if="architecturePopup" class="divForms-dom" id="architectureDivElementDom">
      <div style="width: 100%; height: 100%; transform: translate(0, 50%);">
        <div class="divForms divForms-theme" :class="{ 'scale-dom': scaleDomFlag }">
          <div class="divForms-wrap">
            <div class="area">
              <div class="arrow-lt"></div>
              <div class="b-t"></div>
              <div class="b-r"></div>
              <div class="b-b"></div>
              <div class="b-l"></div>
              <div class="arrow-rb"></div>
              <div class="label-wrap">
                <div class="title">
                  详细信息
                  <div class="close" @click="closePopup" title="关闭"></div>
                </div>

                <div v-show="architectureDataPopup.curDataType == '学校'" class="label-content">
                  <div class="item">
                    <div>校园名:</div>
                    <div>{{ architectureDataPopup.unitName }}</div>
                  </div>
                  <div class="item">
                    <div>在校教职工人数:</div>
                    <div>{{ architectureDataPopup.teacherScale }}</div>
                  </div>
                  <div class="item">
                    <div>在校学生数量:</div>
                    <div>{{ architectureDataPopup.studentScale }}</div>
                  </div>
                  <div class="item">
                    <div>办学区域:</div>
                    <div>{{ architectureDataPopup.officeArea }}</div>
                  </div>
                  <div class="item">
                    <div>学校类型:</div>
                    <div>{{ architectureDataPopup.attentionType }}</div>
                  </div>
                  <div class="item">
                    <div>办学主体:</div>
                    <div>{{ architectureDataPopup.officeMain }}</div>
                  </div>
                </div>

                <div v-show="architectureDataPopup.curDataType == '危爆品'" class="label-content">
                  <div class="item">
                    <div>单位名称:</div>
                    <div>{{ architectureDataPopup.unitName }}</div>
                  </div>
                  <div class="item">
                    <div>危险物品名称:</div>
                    <div>{{ architectureDataPopup.hazardousGoodsName }}</div>
                  </div>
                </div>

                <div v-show="architectureDataPopup.curDataType == '医院'" class="label-content">
                  <div class="item">
                    <div>医院名称:</div>
                    <div>{{ architectureDataPopup.unitName }}</div>
                  </div>
                </div>

                <div v-show="architectureDataPopup.curDataType == '党政机关' || architectureDataPopup.curDataType == '银行'"
                  class="label-content">
                  <div class="item">
                    <div>单位名称:</div>
                    <div>{{ architectureDataPopup.unitName }}</div>
                  </div>
                  <div class="item">
                    <div>关注类型:</div>
                    <div>{{ architectureDataPopup.attentionType }}</div>
                  </div>
                </div>

                <div v-show="architectureDataPopup.curDataType == '其它重点单位'" class="label-content">
                  <div class="item">
                    <div>单位名称:</div>
                    <div>{{ architectureDataPopup.unitName }}</div>
                  </div>
                </div>

                <div v-show="architectureDataPopup.curDataType == '油气站'" class="label-content">
                  <div class="item">
                    <div>单位名称:</div>
                    <div>{{ architectureDataPopup.unitName }}</div>
                  </div>
                  <div class="item">
                    <div>关注类型:</div>
                    <div>{{ architectureDataPopup.attentionType }}</div>
                  </div>
                  <div class="item">
                    <div>规模:</div>
                    <div>{{ architectureDataPopup.scale }}</div>
                  </div>
                  <div class="item">
                    <div>状态:</div>
                    <div>{{ architectureDataPopup.status }}</div>
                  </div>
                </div>

                <div v-show="architectureDataPopup.curDataType == '旅馆酒店公寓'" class="label-content">
                  <div class="item">
                    <div>单位名称:</div>
                    <div>{{ architectureDataPopup.unitName }}</div>
                  </div>
                  <div class="item">
                    <div>座机:</div>
                    <div>{{ architectureDataPopup.tel }}</div>
                  </div>
                </div>

                <div v-show="architectureDataPopup.curDataType == '户籍-实有人口'" class="label-content">
                  <div class="item">
                    <div>姓名:</div>
                    <div>{{ architectureDataPopup.realName }}</div>
                  </div>
                  <div class="item">
                    <div>证件号码:</div>
                    <div>{{ architectureDataPopup.cardNo }}</div>
                  </div>

                  <div class="item">
                    <div>性别:</div>
                    <div>{{ architectureDataPopup.sex }}</div>
                  </div>

                  <div class="item">
                    <div>地址:</div>
                    <div>{{ architectureDataPopup.address }}</div>
                  </div>

                  <div class="item">
                    <div>新地址:</div>
                    <div>{{ architectureDataPopup.reAddress.replace('江西省上饶市', '') }}</div>
                  </div>

                  <div class="item">
                    <div>联系电话:</div>
                    <div>{{ architectureDataPopup.phone }}</div>
                  </div>

                  <div class="item">
                    <div>与户主关系:</div>
                    <div>{{ architectureDataPopup.relation }}</div>
                  </div>

                  <div class="item">
                    <div>社区局村委会:</div>
                    <div>{{ architectureDataPopup.neightborhoood }}</div>
                  </div>

                  <div class="item">
                    <div>重点人员细类:</div>
                    <div>{{ architectureDataPopup.zdryxl }}</div>
                  </div>
                </div>

                <div class="label-content public"
                  v-show="architectureDataPopup.curDataType != '茅家岭派出所' && architectureDataPopup.showPublic">
                  <div class="item">
                    <div>地址:</div>
                    <div>{{ architectureDataPopup.address }}</div>
                  </div>
                  <div class="item">
                    <div>辖区派出所:</div>
                    <div>{{ architectureDataPopup.policeStationName }}</div>
                  </div>
                  <div class="item">
                    <div>责任人:</div>
                    <div>{{ architectureDataPopup.person }}</div>
                  </div>
                  <div class="item">
                    <div>责任人职务:</div>
                    <div>{{ architectureDataPopup.job }}</div>
                  </div>
                  <div class="item">
                    <div>责任人电话:</div>
                    <div>{{ architectureDataPopup.phone }}</div>
                  </div>
                  <div class="item">
                    <div>责任民警:</div>
                    <div>{{ architectureDataPopup.policeman }}</div>
                  </div>
                  <div class="item">
                    <div>责任民警电话:</div>
                    <div>{{ architectureDataPopup.policemanPhone }}</div>
                  </div>
                  <div class="item">
                    <div>安保级别:</div>
                    <div>{{ architectureDataPopup.securityLevel }}</div>
                  </div>
                  <div class="item">
                    <div>备注:</div>
                    <div>{{ architectureDataPopup.remark }}</div>
                  </div>
                </div>

                <div v-show="architectureDataPopup.curDataType == '茅家岭派出所'">
                  <div v-show="architectureDataPopup.curDataTitle == '学校'" class="label-content">
                    <div class="item">
                      <div>县（市、区）:</div>
                      <div>{{ architectureDataPopup.ZXXSQ }}</div>
                    </div>
                    <div class="item">
                      <div>辖区派出所:</div>
                      <div>{{ architectureDataPopup.XQPCS }}</div>
                    </div>
                    <div class="item">
                      <div>校园名:</div>
                      <div>{{ architectureDataPopup.XXMC }}</div>
                    </div>
                    <div class="item">
                      <div>地址:</div>
                      <div>{{ architectureDataPopup.JZDZ }}</div>
                    </div>
                    <div class="item">
                      <div>在校教职工人数:</div>
                      <div>{{ architectureDataPopup.ZXZG }}</div>
                    </div>
                    <div class="item">
                      <div>在校学生数量:</div>
                      <div>{{ architectureDataPopup.ZXXS }}</div>
                    </div>
                    <div class="item">
                      <div>责任民警:</div>
                      <div>{{ architectureDataPopup.BGMJ }}</div>
                    </div>
                  </div>

                  <div v-show="architectureDataPopup.curDataTitle == '宾馆酒店'" class="label-content">
                    <div class="item">
                      <div>宾馆名称:</div>
                      <div>{{ architectureDataPopup.JDMC }}</div>
                    </div>
                    <div class="item">
                      <div>法人姓名:</div>
                      <div>{{ architectureDataPopup.JDFR }}</div>
                    </div>
                    <div class="item">
                      <div>法人身份证号码:</div>
                      <div>{{ architectureDataPopup.FRSFZ }}</div>
                    </div>
                    <div class="item">
                      <div>法人电话号码:</div>
                      <div>{{ architectureDataPopup.FRLXDH }}</div>
                    </div>
                    <div class="item">
                      <div>警务对接人姓名:</div>
                      <div>{{ architectureDataPopup.JWDJ }}</div>
                    </div>
                    <div class="item">
                      <div>警务对接人身份证号码:</div>
                      <div>{{ architectureDataPopup.JWDJSFZ }}</div>
                    </div>
                    <div class="item">
                      <div>警务对接人号码:</div>
                      <div>{{ architectureDataPopup.JWDJLXFS }}</div>
                    </div>
                    <div class="item">
                      <div>具体地址:</div>
                      <div>{{ architectureDataPopup.JDDZ }}</div>
                    </div>
                    <div class="item">
                      <div>现有员工数:</div>
                      <div>{{ architectureDataPopup.JDYGS }}</div>
                    </div>
                    <div class="item">
                      <div>房间数:</div>
                      <div>{{ architectureDataPopup.JDFJS }}</div>
                    </div>
                  </div>

                  <div v-show="architectureDataPopup.curDataTitle == '医院'" class="label-content">
                    <div class="item">
                      <div>医院名称:</div>
                      <div>{{ architectureDataPopup.YYMC }}</div>
                    </div>
                    <div class="item">
                      <div>社区:</div>
                      <div>{{ architectureDataPopup.JZSQ }}</div>
                    </div>
                    <div class="item">
                      <div>法人姓名:</div>
                      <div>{{ architectureDataPopup.JZFR }}</div>
                    </div>
                    <div class="item">
                      <div>身份证号码:</div>
                      <div>{{ architectureDataPopup.FRSFZ }}</div>
                    </div>
                    <div class="item">
                      <div>电话号码:</div>
                      <div>{{ architectureDataPopup.JZDH }}</div>
                    </div>
                    <div class="item">
                      <div>警务对接人员:</div>
                      <div>{{ architectureDataPopup.JWDJ }}</div>
                    </div>
                    <div class="item">
                      <div>警务对接人员身份证:</div>
                      <div>{{ architectureDataPopup.JWDJSFZ }}</div>
                    </div>
                    <div class="item">
                      <div>电话号码:</div>
                      <div>{{ architectureDataPopup.JWDJLXFS }}</div>
                    </div>
                    <div class="item">
                      <div>医院地址:</div>
                      <div>{{ architectureDataPopup.JZDZ }}</div>
                    </div>
                  </div>

                  <div v-show="architectureDataPopup.curDataTitle == '重点人员'" class="label-content">
                    <div class="item">
                      <div>姓名:</div>
                      <div>{{ architectureDataPopup.realName }}</div>
                    </div>
                    <div class="item">
                      <div>证件号码:</div>
                      <div>{{ architectureDataPopup.realNameSFZ }}</div>
                    </div>
                    <div class="item">
                      <div>性别:</div>
                      <div>{{ architectureDataPopup.realNameXB }}</div>
                    </div>
                    <div class="item">
                      <div>重点人员类别:</div>
                      <div>{{ architectureDataPopup.zdryxl }}</div>
                    </div>
                    <div class="item">
                      <div>户籍地详址:</div>
                      <div>{{ architectureDataPopup.address }}</div>
                    </div>
                    <div class="item">
                      <div>联系电话:</div>
                      <div>{{ architectureDataPopup.phone }}</div>
                    </div>
                    <div class="item">
                      <div>责任人:</div>
                      <div>{{ architectureDataPopup.zdryzry }}</div>
                    </div>
                    <div class="item">
                      <div>街道责任领导:</div>
                      <div>{{ architectureDataPopup.zdrtjdld }}</div>
                    </div>
                    <div class="item">
                      <div>列管事由:</div>
                      <div>{{ architectureDataPopup.realNameLGSY }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="b-t-l"></div>
            <div class="b-b-r"></div>
          </div>
          <div class="arrow"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
@@ -314,86 +368,86 @@
import { getActAsPoliceList } from "@/api/home/index.js"

export default {
    name: 'mapPopup',
  name: 'mapPopup',

    inject: ["getWidth", 'userInfo'],
  inject: ["getWidth", 'userInfo'],

    data () {
        return {
            CJdata: {},
            scaleDomFlag: false
        }
    },

    computed: {
        ...mapGetters([
            'architecturePopup',
            'architectureDataPopup'
        ])
    },

    mounted () {

        if (this.getWidth() > 7000) {
            this.scaleDomFlag = true
        } else {
            this.scaleDomFlag = false
        }

    },

    methods: {
        closePopup () {
            this.$store.commit('SET_ARCHITECTUREPOPUP', false)
        }
  data () {
    return {
      CJdata: {},
      scaleDomFlag: false
    }
  },

  computed: {
    ...mapGetters([
      'architecturePopup',
      'architectureDataPopup'
    ])
  },

  mounted () {

    if (this.getWidth() > 7000) {
      this.scaleDomFlag = true
    } else {
      this.scaleDomFlag = false
    }

  },

  methods: {
    closePopup () {
      this.$store.commit('SET_ARCHITECTUREPOPUP', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.divForms-dom {
    position: fixed;
    left: 0;
    z-index: 1 !important;
  position: fixed;
  left: 0;
  z-index: 1 !important;

    .scale-dom {
        transform: scale(3);
        transform-origin: left;
    }
  .scale-dom {
    transform: scale(3);
    transform-origin: left;
  }
}

.divForms .arrow {
    position: absolute;
    bottom: 50%;
    left: 0;
    width: 45px;
    height: 2px;
    transform: rotate(-45deg) translate(5px, -15px);
    background-color: #28bbf0;
  position: absolute;
  bottom: 50%;
  left: 0;
  width: 45px;
  height: 2px;
  transform: rotate(-45deg) translate(5px, -15px);
  background-color: #28bbf0;
}

.divForms-theme .area {
    background-image: linear-gradient(135deg,
            transparent 30px,
            #1831a79a 30px,
            #3f487ba6 50%,
            transparent 50%),
        linear-gradient(-45deg,
            transparent 30px,
            #1831a79a 30px,
            #3f487ba6 50.1%,
            transparent 50%);
  background-image: linear-gradient(135deg,
      transparent 30px,
      #1831a79a 30px,
      #3f487ba6 50%,
      transparent 50%),
    linear-gradient(-45deg,
      transparent 30px,
      #1831a79a 30px,
      #3f487ba6 50.1%,
      transparent 50%);
}

.divForms .area {
    position: relative;
    min-width: 360px;
  position: relative;
  min-width: 360px;
}

.divForms-wrap {
    position: relative;
    overflow: hidden;
    padding: 30px;
  position: relative;
  overflow: hidden;
  padding: 30px;
}

.divForms-theme .b-b,
@@ -402,191 +456,192 @@
.divForms-theme .b-r,
.divForms-theme .b-t,
.divForms-theme .b-t-l {
    background-color: #1831a7;
    box-shadow: 0 0 10px 2px #1831a7;
  background-color: #1831a7;
  box-shadow: 0 0 10px 2px #1831a7;
}

.divForms .b-t {
    position: absolute;
    top: 0;
    left: 44px;
    right: 0;
    height: 1px;
    z-index: 10;
  position: absolute;
  top: 0;
  left: 44px;
  right: 0;
  height: 1px;
  z-index: 10;
}

.divForms .b-r {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 44px;
    width: 1px;
    z-index: 10;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 44px;
  width: 1px;
  z-index: 10;
}

.divForms .b-l {
    position: absolute;
    top: 44px;
    left: 0;
    bottom: 0;
    width: 1px;
    z-index: 10;
  position: absolute;
  top: 44px;
  left: 0;
  bottom: 0;
  width: 1px;
  z-index: 10;
}

.divForms .b-b {
    position: absolute;
    left: 0;
    right: 44px;
    bottom: 0;
    height: 1px;
    z-index: 10;
  position: absolute;
  left: 0;
  right: 44px;
  bottom: 0;
  height: 1px;
  z-index: 10;
}

.divForms .b-b-r {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 1px;
    height: 62px;
    transform: rotate(45deg) translate(-52px, 22px);
    z-index: 10;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1px;
  height: 62px;
  transform: rotate(45deg) translate(-52px, 22px);
  z-index: 10;
}

.divForms .b-t-l {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 62px;
    transform: rotate(45deg) translate(52px, -22px);
    z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 62px;
  transform: rotate(45deg) translate(52px, -22px);
  z-index: 10;
}

.divForms .label-wrap {
    padding: 0 12px;
    color: #fff;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
  padding: 0 12px;
  color: #fff;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;

    .change-btn {
        margin-top: 6px;
        display: flex;
        align-items: center;
        justify-content: space-around;
  .change-btn {
    margin-top: 6px;
    display: flex;
    align-items: center;
    justify-content: space-around;

        &>div {
            width: 36%;
            height: 36px;
            line-height: 36px;
            cursor: pointer;
        }

        &>div.on {
            color: #3d95f3;
            border-bottom: 2px solid #3d95f3;
        }
    &>div {
      width: 36%;
      height: 36px;
      line-height: 36px;
      cursor: pointer;
    }

    .label-content {
        padding: 10px 0;

        .item {
            display: flex;
            flex-direction: row;
            width: calc(100% - 20px);
            height: 30px;
            line-height: 30px;
            margin: 0 10px;
            text-align: left;

            &>div:first-child {
                min-width: 112px;
                text-align: justify;
                display: inline-block;
                text-align-last: justify;
                margin-right: 20px;
            }

            &>div:nth-of-type(2) {
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    &>div.on {
      color: #3d95f3;
      border-bottom: 2px solid #3d95f3;
    }
  }

    .public {
        padding-top: 0;
        margin-top: -10px;
    }
  .label-content {
    padding: 10px 0;

    .label-content.no-data {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 240px;
    .item {
      display: flex;
      flex-direction: row;
      width: calc(100% - 20px);
      margin: 0 10px;
      text-align: left;

      &>div:first-child {
        min-width: 112px;
        text-align: justify;
        display: inline-block;
        text-align-last: justify;
        margin-right: 20px;
        line-height: 30px;
      }

      &>div:nth-of-type(2) {
        flex: 1;
        max-width: 240px;
        // overflow: hidden;
        // text-overflow: ellipsis;
        white-space: wrap;
        line-height: 30px;
      }
    }
  }

  .public {
    padding-top: 0;
    margin-top: -10px;
  }

  .label-content.no-data {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
  }
}

.divForms .title {
    position: relative;
    margin-top: 20px;
    padding: 0 12px 0 30px;
    height: 36px;
    line-height: 36px;
  position: relative;
  margin-top: 20px;
  padding: 0 12px 0 30px;
  height: 36px;
  line-height: 36px;

    .details-btn {
        position: absolute;
        top: 0;
        right: 28px;
        height: 100%;
        cursor: pointer;
  .details-btn {
    position: absolute;
    top: 0;
    right: 28px;
    height: 100%;
    cursor: pointer;

        span {
            font-size: 14px;
        }
    span {
      font-size: 14px;
    }
  }

    .details-btn:hover {
        color: #3d95f3;
    }
  .details-btn:hover {
    color: #3d95f3;
  }

    .close {
        position: absolute;
        right: 5px;
        top: 0;
    }
  .close {
    position: absolute;
    right: 5px;
    top: 0;
  }

    .close::before {
        font-family: element-icons;
        content: '\e6db';
        cursor: pointer;
        font-size: 16px;
    }
  .close::before {
    font-family: element-icons;
    content: '\e6db';
    cursor: pointer;
    font-size: 16px;
  }

    .close:hover::before {
        color: #3d95f3;
    }
  .close:hover::before {
    color: #3d95f3;
  }
}

.divForms-theme .title {
    background-image: linear-gradient(135deg, transparent 25px, #1c309e9a 25px);
  background-image: linear-gradient(135deg, transparent 25px, #1c309e9a 25px);
}

.divForms-theme .arrow,
.divForms-theme .title::before {
    background-color: #1c309e;
  background-color: #1c309e;
}

.divForms .title::before {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    z-index: 10;
    height: 2px;
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  z-index: 10;
  height: 2px;
}
</style>

 src/views/home/components/dialog/areaDetailsBox.vue

@@ -1,65 +1,64 @@
<template>
    <!-- 户籍人口 -->
    <el-dialog :title="peopleTitle" :visible.sync="peopleVisible" :before-close="personInfoClose" :modal="true"
        :modal-append-to-body="false" :close-on-click-modal="false" class="area-details-box">
        <div class="header">
            <div>
                人员名称：
                <input type="text" v-model="peoplePoliceName" placeholder="请输入人员名称" />
            </div>
            <div>
                联系电话：
                <input type="text" v-model="peopleCallPhone" placeholder="请输入联系电话" />
            </div>
            <div>
                身份证号：
                <input type="text" v-model="peopleCardID" placeholder="请输入身份证号" />
            </div>
            <el-button type="primary" icon="el-icon-search" @click="searchPeopleDetail">搜索</el-button>
            <el-button type="primary" icon="el-icon-delete" @click="clearPeopleDetailSearchValue">清空</el-button>
        </div>
  <!-- 户籍人口 -->
  <el-dialog :title="peopleTitle" :visible.sync="peopleVisible" :before-close="personInfoClose" :modal="true"
    :modal-append-to-body="false" :close-on-click-modal="false" class="area-details-box">
    <div class="header">
      <div>
        人员名称：
        <input type="text" v-model="peoplePoliceName" placeholder="请输入人员名称" />
      </div>
      <div>
        联系电话：
        <input type="text" v-model="peopleCallPhone" placeholder="请输入联系电话" />
      </div>
      <div>
        身份证号：
        <input type="text" v-model="peopleCardID" placeholder="请输入身份证号" />
      </div>
      <el-button type="primary" icon="el-icon-search" @click="searchPeopleDetail">搜索</el-button>
      <el-button type="primary" icon="el-icon-delete" @click="clearPeopleDetailSearchValue">清空</el-button>
    </div>

        <div v-loading="curLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.5)" class="body">
            <el-table :data="peopleInfoList" style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }">
                <template slot="empty">
                    <div>{{ peopleEmptyText }}</div>
                </template>
                <el-table-column label="序号" type="index" align="center">
                    <template slot-scope="scope">
                        <span>{{ (peoplePage.currentPage - 1) * peoplePage.pageSize + scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="realName" label="姓名"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="reAddress" label="地址"
                    min-width="240%"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="phone" label="电话"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="policeStationName" label="所属派出所"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="areaName" label="所属责任区"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="personType" label="人口类型">
                    <template slot-scope="scope">
                        {{ scope.row.personType == 1 ? '户籍人口' : '实有人口' }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button :disabled="positionDisabled(scope.row)" @click="rowClick(scope.row)" type="text"
                            size="small" title="定位">
                            <i class="el-icon-location" :style="{ color: positionColor(scope.row) }"></i>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
    <div v-loading="curLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.5)" class="body">
      <el-table :data="peopleInfoList" style="width: 100%"
        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }">
        <template slot="empty">
          <div>{{ peopleEmptyText }}</div>
        </template>
        <el-table-column label="序号" type="index" align="center">
          <template slot-scope="scope">
            <span>{{ (peoplePage.currentPage - 1) * peoplePage.pageSize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="realName" label="姓名"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="reAddress" label="地址" min-width="240%"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="phone" label="电话"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="policeStationName" label="所属派出所"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="areaName" label="所属责任区"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="personType" label="人口类型">
          <template slot-scope="scope">
            {{ scope.row.personType == 1 ? '户籍人口' : '实有人口' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button :disabled="positionDisabled(scope.row)" @click="rowClick(scope.row)" type="text" size="small"
              title="定位">
              <i class="el-icon-location" :style="{ color: positionColor(scope.row) }"></i>
            </el-button>
          </template>
        </el-table-column>
      </el-table>

            <div class="pages all-pagination-sty" ref="tablePagination">
                <el-pagination background layout="prev, pager, next, total" :page-size="peoplePage.pageSize"
                    :total="peoplePage.total" :current-page="peoplePage.currentPage"
                    @current-change="handlePeopleCurrentChange"></el-pagination>
            </div>
        </div>
    </el-dialog>
      <div class="pages all-pagination-sty" ref="tablePagination">
        <el-pagination background layout="prev, pager, next, total" :page-size="peoplePage.pageSize"
          :total="peoplePage.total" :current-page="peoplePage.currentPage"
          @current-change="handlePeopleCurrentChange"></el-pagination>
      </div>
    </div>
  </el-dialog>
</template>

<script>
@@ -67,176 +66,199 @@
import { getPersonInfoPage } from '@/api/dept/index.js'

export default {
    inject: ['userInfo'],
  inject: ['userInfo'],

    props: ['policeStaionID'],
  props: ['policeStaionID'],

    data () {
        return {
            curLoading: false,
            peopleEmptyText: "",
  data () {
    return {
      curLoading: false,
      peopleEmptyText: "",

            peopleTitle: '',
            peopleVisible: false,
      peopleTitle: '',
      peopleVisible: false,

            peoplePoliceName: '',
            peopleCallPhone: '',
            peopleCardID: '',
            peopleInfoList: [],
            peoplePage: {
                total: 0,
                pageSize: 12,
                currentPage: 1
            },
            peopleSearchQuery: {
                id: "",
                policeName: "",
                phone: "",
            },
      peoplePoliceName: '',
      peopleCallPhone: '',
      peopleCardID: '',
      peopleInfoList: [],
      peoplePage: {
        total: 0,
        pageSize: 12,
        currentPage: 1
      },
      peopleSearchQuery: {
        id: "",
        policeName: "",
        phone: "",
      },
    }
  },

  computed: {
    positionColor () {
      return (row) => {
        if (row.X && row.X != 0 || row.lng && row.lng != 0 || row.longitude && row.longitude != 0 || row.x && row.x != 0) {
          return "#1AFA29"
        } else {
          return "#ccc"
        }
      }
    },

    computed: {
        positionColor () {
            return (row) => {
                if (row.X && row.X != 0 || row.lng && row.lng != 0 || row.longitude && row.longitude != 0 || row.x && row.x != 0) {
                    return "#1AFA29"
                } else {
                    return "#ccc"
                }
            }
        },

        positionDisabled () {
            return (row) => {
                if (row.X && row.X != 0 || row.lng && row.lng != 0 || row.longitude && row.longitude != 0 || row.x && row.x != 0) {
                    return false
                } else {
                    return true
                }
            }
        },
    },

    methods: {
        rowClick (row) {
            console.log('rowClick', row)
            this.$EventBus.$emit('toPosition', {
                siteJd: row.lng,
                siteWd: row.lat,
                siteGd: 200
            })
            this.peopleVisible = false
        },

        /**
         * @description: 现有人员和重点人员列表弹窗关闭的事件
         * @return {*}
         */
        personInfoClose () {
            this.peoplePoliceName = ''
            this.peopleCallPhone = ''
            this.peopleCardID = ''
            this.peoplePage.currentPage = 1

            this.peopleInfoList = []

            this.peopleVisible = false
        },

        /**
         * @description: 列表弹框中的搜索
         * @return {*}
         */
        searchPeopleDetail () {
            this.peoplePage.currentPage = 1
            this.peopleInfoList = []
            this.getPersonInfoPage(1)
        },

        /**
         * @description: 列表弹框中的清除
         * @return {*}
         */
        clearPeopleDetailSearchValue () {
            this.peoplePoliceName = ''
            this.peopleCallPhone = ''
            this.peopleCardID = ''
            this.peoplePage.currentPage = 1
            this.peopleInfoList = []
            this.getPersonInfoPage(1)
        },
        /**
         * @description: 户籍人口列表分页切换
         * @param {*} currentPage
         * @return {*}
         */
        handlePeopleCurrentChange (currentPage) {
            this.peoplePage.currentPage = currentPage
            this.peopleInfoList = []
            this.getPersonInfoPage(1)
        },

        /**
         * @description: 获取重点人员列表信息
         * @return {*}
         */
        getPersonInfoPage (status) {
            this.curLoading = true
            this.peopleEmptyText = ""

            getPersonInfoPage({
                status,
                // deptId: this.userInfo.dept_id,
                deptId: this.peopleSearchQuery.dept_id,
                areaId: this.peopleSearchQuery.id,
                realName: this.peoplePoliceName,
                phone: this.peopleCallPhone,
                cardNo: this.peopleCardID,
                current: this.peoplePage.currentPage,
                size: this.peoplePage.pageSize
            }).then(res => {
                this.peoplePage.total = 0
                console.log('getPersonInfoPage', res)

                if (res.data.data.records.length > 0) {
                    this.peoplePage.total = res.data.data.total
                    setTimeout(() => {
                        this.peopleInfoList = res.data.data.records
                    }, 200)

                } else {
                    this.peopleInfoList = []
                    this.peoplePage.total = 0
                    this.peopleEmptyText = "暂无户籍人口数据"
                }

                setTimeout(() => {
                    this.curLoading = false
                }, 500)
            })
        },

        showpeopledetail (id, name, isIncludeKeypeople, deptId) {
            this.peopleTitle = name
            this.peopleSearchQuery.id = id
            if (deptId) {
                this.peopleSearchQuery.dept_id = deptId
            } else {
                this.peopleSearchQuery.dept_id = this.userInfo.dept_id
            }
            this.peopleVisible = true
            this.peopleInfoList = []
            console.log('id, name, isIncludeKeypeople,deptId', id, name, isIncludeKeypeople, deptId)
            if (isIncludeKeypeople == 'includeKeypeople') {
                this.getPersonInfoPage()
            } else if (isIncludeKeypeople == 'onlyKeypeople') {
                this.getPersonInfoPage(2)
            } else {
                this.getPersonInfoPage()
            }
    positionDisabled () {
      return (row) => {
        if (row.X && row.X != 0 || row.lng && row.lng != 0 || row.longitude && row.longitude != 0 || row.x && row.x != 0) {
          return false
        } else {
          return true
        }
      }
    },
  },

  methods: {
    rowClick (row) {
      this.$EventBus.$emit('toPosition', {
        siteJd: row.x,
        siteWd: row.y,
        siteGd: 200
      })

      this.$store.commit('SET_ARCHITECTUREPOPUP', true)

      this.$store.commit('SET_ARCHITECTUREDATAPOPUP', { ...row, curDataType: '户籍-实有人口', showPublic: false })

      // eslint-disable-next-line no-redeclare
      var popup = new global.DC.DivForms(global.viewer, {
        domId: 'architectureDivElementDom',
        position: [
          global.DC.Transform.transformWGS84ToCartesian(
            new global.DC.Position(
              Number(row.x),
              Number(row.y),
              0
            )
          )
        ]
      })

      this.peopleVisible = false
    },

    /**
     * @description: 现有人员和重点人员列表弹窗关闭的事件
     * @return {*}
     */
    personInfoClose () {
      this.peoplePoliceName = ''
      this.peopleCallPhone = ''
      this.peopleCardID = ''
      this.peoplePage.currentPage = 1

      this.peopleInfoList = []

      this.peopleVisible = false
    },

    /**
     * @description: 列表弹框中的搜索
     * @return {*}
     */
    searchPeopleDetail () {
      this.peoplePage.currentPage = 1
      this.peopleInfoList = []
      this.getPersonInfoPage(1)
    },

    /**
     * @description: 列表弹框中的清除
     * @return {*}
     */
    clearPeopleDetailSearchValue () {
      this.peoplePoliceName = ''
      this.peopleCallPhone = ''
      this.peopleCardID = ''
      this.peoplePage.currentPage = 1
      this.peopleInfoList = []
      this.getPersonInfoPage(1)
    },
    /**
     * @description: 户籍人口列表分页切换
     * @param {*} currentPage
     * @return {*}
     */
    handlePeopleCurrentChange (currentPage) {
      this.peoplePage.currentPage = currentPage
      this.peopleInfoList = []
      this.getPersonInfoPage(1)
    },

    /**
     * @description: 获取重点人员列表信息
     * @return {*}
     */
    getPersonInfoPage (status) {
      this.curLoading = true
      this.peopleEmptyText = ""

      getPersonInfoPage({
        status,
        // deptId: this.userInfo.dept_id,
        deptId: this.peopleSearchQuery.dept_id,
        areaId: this.peopleSearchQuery.id,
        realName: this.peoplePoliceName,
        phone: this.peopleCallPhone,
        cardNo: this.peopleCardID,
        current: this.peoplePage.currentPage,
        size: this.peoplePage.pageSize
      }).then(res => {
        this.peoplePage.total = 0
        console.log('getPersonInfoPage', res)

        if (res.data.data.records.length > 0) {
          this.peoplePage.total = res.data.data.total
          setTimeout(() => {
            this.peopleInfoList = res.data.data.records.map(item => {
              return {
                ...item,
                lng: 120,
                lat: 24
              }
            })
          }, 200)
        } else {
          this.peopleInfoList = []
          this.peoplePage.total = 0
          this.peopleEmptyText = "暂无户籍人口数据"
        }

        setTimeout(() => {
          this.curLoading = false
        }, 500)
      })
    },

    showpeopledetail (id, name, isIncludeKeypeople, deptId) {
      this.peopleTitle = name
      this.peopleSearchQuery.id = id
      if (deptId) {
        this.peopleSearchQuery.dept_id = deptId
      } else {
        this.peopleSearchQuery.dept_id = this.userInfo.dept_id
      }
      this.peopleVisible = true
      this.peopleInfoList = []
      console.log('id, name, isIncludeKeypeople,deptId', id, name, isIncludeKeypeople, deptId)
      if (isIncludeKeypeople == 'includeKeypeople') {
        this.getPersonInfoPage()
      } else if (isIncludeKeypeople == 'onlyKeypeople') {
        this.getPersonInfoPage(2)
      } else {
        this.getPersonInfoPage()
      }
    }
  },
}
</script>


 src/views/home/components/dialog/keyPersonBox.vue

@@ -1,58 +1,58 @@
<template>
    <!-- 重点人员 -->
    <el-dialog :title="keyPersonTitle" :visible.sync="keyPersonVisible" :before-close="personInfoClose" :modal="true"
        :modal-append-to-body="false" :close-on-click-modal="false" class="keyPerson-details-box">
        <div class="header" v-show="userInfo.dept_id != '1596020515064381442'">
            <div>
                人员名称：
                <input type="text" v-model="peoplePoliceName" placeholder="请输入人员名称" />
            </div>
            <div>
                联系电话：
                <input type="text" v-model="peopleCallPhone" placeholder="请输入联系电话" />
            </div>
            <el-button type="primary" icon="el-icon-search" @click="searchPeopleDetail">搜索</el-button>
            <el-button type="primary" icon="el-icon-delete" @click="clearPeopleDetailSearchValue">清空</el-button>
        </div>
  <!-- 重点人员 -->
  <el-dialog :title="keyPersonTitle" :visible.sync="keyPersonVisible" :before-close="personInfoClose" :modal="true"
    :modal-append-to-body="false" :close-on-click-modal="false" class="keyPerson-details-box">
    <div class="header" v-show="userInfo.dept_id != '1596020515064381442'">
      <div>
        人员名称：
        <input type="text" v-model="peoplePoliceName" placeholder="请输入人员名称" />
      </div>
      <div>
        联系电话：
        <input type="text" v-model="peopleCallPhone" placeholder="请输入联系电话" />
      </div>
      <el-button type="primary" icon="el-icon-search" @click="searchPeopleDetail">搜索</el-button>
      <el-button type="primary" icon="el-icon-delete" @click="clearPeopleDetailSearchValue">清空</el-button>
    </div>

        <div v-loading="curLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.5)" class="body">
            <el-table :data="keyPersonDetailArr" style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }">
                <template slot="empty">
                    <div>{{ keyPersonEmptyText }}</div>
                </template>
                <el-table-column label="序号" type="index" align="center">
                    <template slot-scope="scope">
                        <span>{{ (peoplePage.currentPage - 1) * peoplePage.pageSize + scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="realName" label="姓名"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="address" label="地址" min-width="240%"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="phone" label="联系电话"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="zdryzry" label="责任人"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="zdrtjdld" label="街道责任领导"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="zdryxl" label="重点人员类型"></el-table-column>
                <!-- <el-table-column :show-overflow-tooltip="true" prop="policeStationName" label="所属派出所"></el-table-column> -->
                <!-- <el-table-column :show-overflow-tooltip="true" prop="areaName" label="所属责任区"></el-table-column> -->
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button :disabled="positionDisabled(scope.row)" @click="rowClick(scope.row)" type="text"
                            size="small" title="定位">
                            <i class="el-icon-location" :style="{ color: positionColor(scope.row) }"></i>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
    <div v-loading="curLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.5)" class="body">
      <el-table :data="keyPersonDetailArr" style="width: 100%"
        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }">
        <template slot="empty">
          <div>{{ keyPersonEmptyText }}</div>
        </template>
        <el-table-column label="序号" type="index" align="center">
          <template slot-scope="scope">
            <span>{{ (peoplePage.currentPage - 1) * peoplePage.pageSize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="realName" label="姓名"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="address" label="地址" min-width="240%"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="phone" label="联系电话"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="zdryzry" label="责任人"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="zdrtjdld" label="街道责任领导"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="zdryxl" label="重点人员类型"></el-table-column>
        <!-- <el-table-column :show-overflow-tooltip="true" prop="policeStationName" label="所属派出所"></el-table-column> -->
        <!-- <el-table-column :show-overflow-tooltip="true" prop="areaName" label="所属责任区"></el-table-column> -->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button :disabled="positionDisabled(scope.row)" @click="rowClick(scope.row)" type="text" size="small"
              title="定位">
              <i class="el-icon-location" :style="{ color: positionColor(scope.row) }"></i>
            </el-button>
          </template>
        </el-table-column>
      </el-table>

            <div class="pages all-pagination-sty" ref="tablePagination" v-show="userInfo.dept_id != '1596020515064381442'">
                <el-pagination background layout="prev, pager, next, total" :page-size="peoplePage.pageSize"
                    :total="peoplePage.total" :current-page="peoplePage.currentPage"
                    @current-change="handlePersonPageChange"></el-pagination>
            </div>
        </div>
    </el-dialog>
      <div class="pages all-pagination-sty" ref="tablePagination" v-show="userInfo.dept_id != '1596020515064381442'">
        <el-pagination background layout="prev, pager, next, total" :page-size="peoplePage.pageSize"
          :total="peoplePage.total" :current-page="peoplePage.currentPage"
          @current-change="handlePersonPageChange"></el-pagination>
      </div>
    </div>
  </el-dialog>
</template>

<script>
@@ -61,208 +61,214 @@
import { getPersonInfoPage } from '@/api/dept/index.js'

export default {
    inject: ['userInfo'],
  inject: ['userInfo'],

    props: ['policeStaionID'],
  props: ['policeStaionID'],

    data () {
        return {
            curLoading: false,
            keyPersonEmptyText: "",
  data () {
    return {
      curLoading: false,
      keyPersonEmptyText: "",

            peoplePoliceName: '',
      peoplePoliceName: '',


            keyPersonTitle: '',
            keyPersonVisible: false,
            keyPersonDetailArr: [],
      keyPersonTitle: '',
      keyPersonVisible: false,
      keyPersonDetailArr: [],

            peoplePage: {
                total: 0,
                pageSize: 15,
                currentPage: 1
            },
      peoplePage: {
        total: 0,
        pageSize: 15,
        currentPage: 1
      },
    }
  },

  computed: {
    positionColor () {
      return (row) => {
        if (row.X && row.X != 0 || row.lng && row.lng != 0 || row.longitude && row.longitude != 0 || row.x && row.x != 0) {
          return "#1AFA29"
        } else {
          return "#ccc"
        }
      }
    },

    computed: {
        positionColor () {
            return (row) => {
                if (row.X && row.X != 0 || row.lng && row.lng != 0 || row.longitude && row.longitude != 0 || row.x && row.x != 0) {
                    return "#1AFA29"
                } else {
                    return "#ccc"
                }
    positionDisabled () {
      return (row) => {
        if (row.X && row.X != 0 || row.lng && row.lng != 0 || row.longitude && row.longitude != 0 || row.x && row.x != 0) {
          return false
        } else {
          return true
        }
      }
    },
  },

  methods: {
    showkeypersondetail (name) {
      this.curLoading = true
      this.keyPersonEmptyText = ""
      this.keyPersonDetailArr = []

      this.keyPersonVisible = true
      this.keyPersonTitle = name

      if (this.userInfo.dept_id == '1596020515064381442') {
        if (name == '征地拆迁群体') {
          this.keyPersonDetailArr = keypeopleJSON.filter(item => {
            return item.zdryxl == '征地拆迁群体'
          })
        } else if (name == '非涉法涉诉重点个访人员') {
          this.keyPersonDetailArr = keypeopleJSON.filter(item => {
            return item.zdryxl == '非涉法涉诉重点个访人员'
          })
        } else if (name == '涉法涉诉重点个访人员') {
          this.keyPersonDetailArr = keypeopleJSON.filter(item => {
            return item.zdryxl == '涉法涉诉重点个访人员'
          })
        } else if (name == '楼盘业主维权群体') {
          this.keyPersonDetailArr = keypeopleJSON.filter(item => {
            return item.zdryxl == '楼盘业主维权群体'
          })
        }

        setTimeout(() => {
          this.curLoading = false
        }, 500)
      } else {
        this.getPersonInfoPage(2)
      }
    },

    rowClick (row) {
      this.$EventBus.$emit('toPosition', {
        siteJd: row.x,
        siteWd: row.y,
        siteGd: 200
      })

      this.$store.commit('SET_ARCHITECTUREPOPUP', true)

      this.$store.commit('SET_ARCHITECTUREDATAPOPUP', { ...row, curDataTitle: '重点人员', curDataType: '茅家岭派出所' })

      // eslint-disable-next-line no-redeclare
      var popup = new global.DC.DivForms(global.viewer, {
        domId: 'architectureDivElementDom',
        position: [
          global.DC.Transform.transformWGS84ToCartesian(
            new global.DC.Position(
              Number(row.x),
              Number(row.y),
              0
            )
          )
        ]
      })

      this.keyPersonVisible = false
    },

    /**
     * @description: 现有人员和重点人员列表弹窗关闭的事件
     * @return {*}
     */
    personInfoClose () {
      this.peoplePoliceName = ''
      this.peopleCallPhone = ''
      this.peoplePage.currentPage = 1

      this.keyPersonDetailArr = []


      this.keyPersonVisible = false
    },

    /**
     * @description: 列表弹框中的搜索
     * @return {*}
     */
    searchPeopleDetail () {
      this.curLoading = true
      this.keyPersonDetailArr = []
      this.keyPersonEmptyText = ""
      this.peoplePage.currentPage = 1
      this.getPersonInfoPage(2)
    },

    /**
     * @description: 列表弹框中的清除
     * @return {*}
     */
    clearPeopleDetailSearchValue () {
      this.curLoading = true
      this.keyPersonDetailArr = []
      this.keyPersonEmptyText = ""
      this.peoplePoliceName = ''
      this.peopleCallPhone = ''
      this.peoplePage.currentPage = 1

      this.getPersonInfoPage(2)
    },

    /**
     * @description: 重点人员列表分页切换
     * @param {*} current 当前页
     * @return {*}
     */
    handlePersonPageChange (current) {
      this.curLoading = true
      this.keyPersonDetailArr = []
      this.keyPersonEmptyText = ""
      this.peoplePage.currentPage = current

      this.getPersonInfoPage(2)
    },

    /**
     * @description: 获取重点人员列表信息
     * @return {*}
     */
    getPersonInfoPage (status) {
      getPersonInfoPage({
        status,
        depaId: this.userInfo.dept_id,
        zdryxl: this.keyPersonTitle,
        realName: this.peoplePoliceName,
        phone: this.peopleCallPhone,
        current: this.peoplePage.currentPage,
        size: this.peoplePage.pageSize
      }).then(res => {
        this.keyPersonDetailArr = []
        this.peoplePage.total = 0

        if (res.data.data.records.length > 0) {
          this.keyPersonEmptyText = ""
          this.peoplePage.total = res.data.data.total
          this.keyPersonDetailArr = res.data.data.records.map(item => {
            return {
              ...item,
              lng: 120,
              lat: 24
            }
        },

        positionDisabled () {
            return (row) => {
                if (row.X && row.X != 0 || row.lng && row.lng != 0 || row.longitude && row.longitude != 0 || row.x && row.x != 0) {
                    return false
                } else {
                    return true
                }
            }
        },
          })
        } else {
          this.keyPersonEmptyText = "暂无重点人员数据"
          this.keyPersonDetailArr = []
          this.peoplePage.total = 0
        }
        setTimeout(() => {
          this.curLoading = false
        }, 500)
      })
    },
  },

    methods: {
        showkeypersondetail (name) {
            this.curLoading = true
            this.keyPersonEmptyText = ""
            this.keyPersonDetailArr = []

            this.keyPersonVisible = true
            this.keyPersonTitle = name

            if (this.userInfo.dept_id == '1596020515064381442') {
                if (name == '征地拆迁群体') {
                    this.keyPersonDetailArr = keypeopleJSON.filter(item => {
                        return item.zdryxl == '征地拆迁群体'
                    })
                } else if (name == '非涉法涉诉重点个访人员') {
                    this.keyPersonDetailArr = keypeopleJSON.filter(item => {
                        return item.zdryxl == '非涉法涉诉重点个访人员'
                    })
                } else if (name == '涉法涉诉重点个访人员') {
                    this.keyPersonDetailArr = keypeopleJSON.filter(item => {
                        return item.zdryxl == '涉法涉诉重点个访人员'
                    })
                } else if (name == '楼盘业主维权群体') {
                    this.keyPersonDetailArr = keypeopleJSON.filter(item => {
                        return item.zdryxl == '楼盘业主维权群体'
                    })
                }

                setTimeout(() => {
                    this.curLoading = false
                }, 500)
            } else {
                this.getPersonInfoPage(2)
            }
        },

        rowClick (row) {
            this.$EventBus.$emit('toPosition', {
                siteJd: row.x,
                siteWd: row.y,
                siteGd: 200
            })

            this.$store.commit('SET_ARCHITECTUREPOPUP', true)

            this.$store.commit('SET_ARCHITECTUREDATAPOPUP', { ...row, curDataTitle: '重点人员', curDataType: '茅家岭派出所' })

            // eslint-disable-next-line no-redeclare
            var popup = new global.DC.DivForms(global.viewer, {
                domId: 'architectureDivElementDom',
                position: [
                    global.DC.Transform.transformWGS84ToCartesian(
                        new global.DC.Position(
                            Number(row.x),
                            Number(row.y),
                            0
                        )
                    )
                ]
            })

            this.keyPersonVisible = false
        },

        /**
         * @description: 现有人员和重点人员列表弹窗关闭的事件
         * @return {*}
         */
        personInfoClose () {
            this.peoplePoliceName = ''
            this.peopleCallPhone = ''
            this.peoplePage.currentPage = 1

            this.keyPersonDetailArr = []


            this.keyPersonVisible = false
        },

        /**
         * @description: 列表弹框中的搜索
         * @return {*}
         */
        searchPeopleDetail () {
            this.curLoading = true
            this.keyPersonDetailArr = []
            this.keyPersonEmptyText = ""
            this.peoplePage.currentPage = 1
            this.getPersonInfoPage(2)
        },

        /**
         * @description: 列表弹框中的清除
         * @return {*}
         */
        clearPeopleDetailSearchValue () {
            this.curLoading = true
            this.keyPersonDetailArr = []
            this.keyPersonEmptyText = ""
            this.peoplePoliceName = ''
            this.peopleCallPhone = ''
            this.peoplePage.currentPage = 1

            this.getPersonInfoPage(2)
        },

        /**
         * @description: 重点人员列表分页切换
         * @param {*} current 当前页
         * @return {*}
         */
        handlePersonPageChange (current) {
            this.curLoading = true
            this.keyPersonDetailArr = []
            this.keyPersonEmptyText = ""
            this.peoplePage.currentPage = current

            this.getPersonInfoPage(2)
        },

        /**
         * @description: 获取重点人员列表信息
         * @return {*}
         */
        getPersonInfoPage (status) {
            getPersonInfoPage({
                status,
                depaId: this.userInfo.dept_id,
                zdryxl: this.keyPersonTitle,
                realName: this.peoplePoliceName,
                phone: this.peopleCallPhone,
                current: this.peoplePage.currentPage,
                size: this.peoplePage.pageSize
            }).then(res => {
                this.keyPersonDetailArr = []
                this.peoplePage.total = 0

                if (res.data.data.records.length > 0) {
                    this.keyPersonEmptyText = ""
                    this.peoplePage.total = res.data.data.total
                    this.keyPersonDetailArr = res.data.data.records
                } else {
                    this.keyPersonEmptyText = "暂无重点人员数据"
                    this.keyPersonDetailArr = []
                    this.peoplePage.total = 0
                }
                setTimeout(() => {
                    this.curLoading = false
                }, 500)
            })
        },
    },

    destroyed () {
        this.$store.commit('SET_ARCHITECTUREPOPUP', false)
    },
  destroyed () {
    this.$store.commit('SET_ARCHITECTUREPOPUP', false)
  },
}
</script>


 src/views/home/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-12-19 16:37:54
 * @LastEditTime: 2024-12-20 17:44:13
 * @FilePath: \srs-police-affairs\src\views\home\index.vue
 * @Description: 小区-栋-层-房屋
 *
@@ -1222,7 +1222,7 @@
        siteGd: 200
      })
      this.$store.commit('SET_ARCHITECTUREPOPUP', true)
      this.$store.commit('SET_ARCHITECTUREDATAPOPUP', { ...row, curDataType: row.type })
      this.$store.commit('SET_ARCHITECTUREDATAPOPUP', { ...row, curDataType: row.type, showPublic: true })
      var popup = new global.DC.DivForms(global.viewer, {
        domId: 'architectureDivElementDom',
        position: [