社区感知户室详情中 消防检查、九小场所、反诈宣防等列表布局样式调整 单行详情数据样式调整

shuishen

2024-12-18 b6fe0d66cd2b1349d357d0a105300fe2ac3b7bc0

社区感知户室详情中
消防检查、九小场所、反诈宣防等列表布局样式调整
单行详情数据样式调整

 src/styles/media/index.scss

@@ -1981,9 +1981,13 @@
              right: countSizeVw(10, 1920);
            }

            .el-dialog__body {
              display: flex;
              height: countSizeVh(360);

            .house-info-box {
              width: countSizeVw(240, 1920);
              height: countSizeVh(288);
                height: 100%;

              .house-title {
                font-size: countSizeVh(18);
@@ -1999,8 +2003,11 @@
            }

            .table-box {
              width: countSizeVw(820, 1920);
              height: countSizeVh(288);
                display: flex;
                flex-direction: column;
                width: 0;
                flex: 1;
                height: 100%;

              .type-tab-box {
                height: countSizeVh(28);
@@ -2017,11 +2024,64 @@
              }

              .el-table {
                height: countSizeVh(260);
                  height: 0;
                  flex: 1;
                }

                .pay-info-box {
                  height: 0;
                  flex: 1;

                  .table-box-w {
                    height: 100%;

                    .list-box {
                      display: flex;
                      flex-direction: column;
                      height: 100%;

                      .el-table {
                        height: 0;
                        flex: 1;
                      }

                      .pages {
                        height: countSizeVh(40);

                        &>div {
                          display: flex;
                          align-items: center;
                          justify-content: center;

                          &>button {
                            width: countSizeVh(32);
                            height: countSizeVh(32);

                            &>i {
                              font-size: countSizeVh(16);
              }
            }

                          &>ul {
                            display: flex;
                            align-items: center;

                            li {
                              width: countSizeVh(32);
                              height: countSizeVh(32);
                              line-height: countSizeVh(32);
                              font-size: countSizeVh(16);
                            }
                          }
                        }

                      }

                    }
                  }
                }
              }
            }
          }

          .panorama-details-box {
@@ -3497,4 +3557,76 @@
      }
    }
  }

  .resident-details-box-details {
    position: fixed !important;
    top: countSizeVh(60) !important;
    left: auto !important;
    right: 0 !important;
    width: countSizeVw(400, 1920) !important;
    height: calc(100% - countSizeVh(60)) !important;
    z-index: 98 !important;
    transform: translate(0, 0) !important;

    .el-dialog {
      width: 100% !important;
      height: 100% !important;
    }

    .el-dialog__header {
      display: none;
    }

    .el-dialog__body {
      padding: 0;
      width: 100%;
      height: 100%;

      .detail-box {
        display: flex;
        flex-direction: column;
        height: 100%;
        // width: 400px;

        .detail-title-box {
          position: relative;
          font-weight: bold;
          text-align: center;
          line-height: 32px;

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

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

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

        .detail-content-box {
          padding: countSizeVh(10);
          padding-top: 0;

          height: 0;
          flex: 1;
          overflow-y: auto;

          .detail-row {
            line-height: countSizeVh(40);
            // text-align: left;
            // margin-left: 10px;
          }
        }
      }
    }
  }
}

 src/views/house/components/antiFraud.vue

@@ -1,7 +1,7 @@
<!--  -->
<template>
    <div class="table-box-w">
        <div>
    <div class="list-box">

            <div class="btn-box-box">
                <!-- 出租屋按钮，居住证申请按钮，租客按钮 -->
@@ -28,18 +28,19 @@
                <el-table-column align="center" prop="policemanPhone" label="民警联系方式"> </el-table-column>
                <el-table-column align="center" prop="pcsName" label="宣防单位"> </el-table-column>
            </el-table>



        </div>

        <!-- 详情页面 -->
        <div class="detail-box" v-if="detailBox">
            <div v-if="current == 1">
    <el-dialog class="resident-details-box-details" :modal="false" :close-on-click-modal="false" :append-to-body="true"
      :visible.sync="detailBox">
      <div class="detail-box">
        <template v-if="current == 1">
                <div class="detail-title-box">
                    <div class="detail-title">反诈宣防详情</div>
            <div class="close" @click="detailBox = false" title="关闭"></div>
                </div>

          <div class="detail-content-box">
                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">宣防人姓名</div>
@@ -112,7 +113,6 @@
                    </el-col>
                </el-row>


                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">宣防照片</div>
@@ -127,12 +127,15 @@
                    </el-col>
                </el-row>
            </div>
        </template>

            <div v-if="current == 2">
        <template v-if="current == 2">
                <div class="detail-title-box">
                    <div class="detail-title">反诈预警处置详情</div>
            <div class="close" @click="detailBox = false" title="关闭"></div>
                </div>

          <div class="detail-content-box">
                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">民警姓名</div>
@@ -187,7 +190,6 @@
                    </el-col>
                </el-row>


                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">宣防照片</div>
@@ -202,8 +204,9 @@
                    </el-col>
                </el-row>
            </div>

        </template>
        </div>
    </el-dialog>
    </div>
</template>

@@ -237,7 +240,7 @@

            },

        };
    }
    },
    //监听属性 类似于data概念
    computed: {
@@ -313,29 +316,6 @@
        .btn-box {
            margin: 2px 5px;
        }
    }

    .detail-box {
        height: 700px;
        position: absolute;
        right: -410px;
        top: -80%;
        background-color: rgba(35, 50, 167, 0.7);
        width: 400px;
        padding: 10px;

        .detail-title-box {
            margin-bottom: 10px;
            font-weight: bold;
            text-align: center;
        }
    }

    .detail-row {
        line-height: 40px;
        // text-align: left;
        // margin-left: 10px;

    }
}
</style>

 src/views/house/components/employees.vue

@@ -1,7 +1,7 @@
<!--  -->
<template>
    <div class="table-box-w">
        <div>
    <div class="list-box">
            <el-table :data="dataList.records" style="width: 100%" @cell-click="cellClick">
                <!-- 包含了姓名、性别、民族、身份证号码、手机号、现居住地、岗位、从业人员照片等。 -->
                <el-table-column align="center" prop="name" label="姓名"> </el-table-column>
@@ -20,12 +20,16 @@
        </div>

        <!-- 详情页面 -->
        <div class="detail-box" v-if="detailBox">
    <el-dialog class="resident-details-box-details" :modal="false" :close-on-click-modal="false" :append-to-body="true"
      :visible.sync="detailBox">
      <div class="detail-box">
            <!-- popelList[0]  详情页面 包含了姓名、性别、民族、身份证号码、手机号、现居住地、岗位、从业人员照片等-->
            <div class="detail-title-box">
                <div class="detail-title">从业人员详情</div>
          <div class="close" @click="detailBox = false" title="关闭"></div>
            </div>

        <div class="detail-content-box">
            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">场所名称</div>
@@ -52,6 +56,7 @@
                    <div class="detail-row">{{ row.principalPhone }}</div>
                </el-col>
            </el-row>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">场所地址</div>
@@ -60,7 +65,6 @@
                    <div class="">{{ row.location }}</div>
                </el-col>
            </el-row>


            <el-row class="">
                <el-col :span="6">
@@ -79,6 +83,7 @@
                    <div class="detail-row">{{ row.gender == 1 ? '男' : '女' }}</div>
                </el-col>
            </el-row>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">民族</div>
@@ -87,6 +92,7 @@
                    <div class="detail-row">{{ row.ethnicity }}</div>
                </el-col>
            </el-row>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">身份证号码</div>
@@ -95,6 +101,7 @@
                    <div class="detail-row">{{ row.idCard }}</div>
                </el-col>
            </el-row>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">手机号</div>
@@ -103,6 +110,7 @@
                    <div class="detail-row">{{ row.telephone }}</div>
                </el-col>
            </el-row>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">现居住地</div>
@@ -111,6 +119,7 @@
                    <div class="detail-row">{{ row.tempAddress }}</div>
                </el-col>
            </el-row>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">岗位</div>
@@ -151,9 +160,9 @@
                    </div>
                </el-col>
            </el-row>


        </div>
      </div>
    </el-dialog>
    </div>
</template>

@@ -184,7 +193,7 @@

            },

        };
    }
    },
    //监听属性 类似于data概念
    computed: {
@@ -243,28 +252,5 @@
.table-box-w {
    // position: relative;
    // background-color: rgba(228, 17, 17, 0.5);

    .detail-box {
        height: 700px;
        position: absolute;
        right: -410px;
        top: -60%;
        background-color: rgba(35, 50, 167, 0.7);
        width: 400px;
        padding: 10px;

        .detail-title-box {
            margin-bottom: 10px;
            font-weight: bold;
            text-align: center;
        }
    }

    .detail-row {
        line-height: 40px;
        // text-align: left;
        // margin-left: 10px;

    }
}
</style>

 src/views/house/components/nineSmallPlaces.vue

@@ -1,8 +1,7 @@
<!--  -->
<template>
    <div class="table-box-w">
        <div>

    <div class="list-box">
            <div class="btn-box-box">
                <!-- 出租屋按钮，居住证申请按钮，租客按钮 -->
                <div class="btn-box">
@@ -39,22 +38,23 @@
                </el-table-column>
            </el-table>

            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage4" :page-sizes="[10, 20, 30, 40]" :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper" :total="dataList.total">
                </el-pagination>
      <div class="pages">
        <el-pagination background layout="prev, pager, next" :page-size="100" :total="dataList.total"
          :current-page="currentPage4" @current-change="handleCurrentChange"></el-pagination>
            </div>
        </div>

        <!-- 详情页面 -->
        <div class="detail-box" v-if="detailBox">

            <div v-if="current == 1">
    <el-dialog class="resident-details-box-details" :modal="false" :close-on-click-modal="false" :append-to-body="true"
      :visible.sync="detailBox">
      <div class="detail-box">
        <template v-if="current == 1">
                <div class="detail-title-box">
                    <div class="detail-title">消防检查详情</div>
            <div class="close" @click="detailBox = false" title="关闭"></div>
                </div>

          <div class="detail-content-box">
                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">场所名称</div>
@@ -90,6 +90,7 @@
                        <div class="detail-row">{{ row.createTime }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">地址</div>
@@ -158,10 +159,8 @@
                            <div class="question-name">
                                <div class="key"> {{ item.title }}</div>
                                <div class="value">
                                    <el-radio v-show="item.state == 0" v-model="item.state" :label="0"
                                        disabled>存在</el-radio>
                                    <el-radio v-show="item.state == 1" v-model="item.state" :label="1"
                                        disabled>不存在</el-radio>
                      <el-radio v-show="item.state == 0" v-model="item.state" :label="0" disabled>存在</el-radio>
                      <el-radio v-show="item.state == 1" v-model="item.state" :label="1" disabled>不存在</el-radio>
                                </div>
                            </div>
                            <div v-show="item.state == 0" class="yh-pic-box">
@@ -187,10 +186,8 @@
                                    整改后图片：
                                </div>
                                <div class="yh-pic-list">
                                    <div class="pic-item" v-for="(pic, picIndex)  in getRectificationImageUrls(item)"
                                        :key="picIndex">
                                        <el-image :src="pic" :fit="fit"
                                            :preview-src-list="getRectificationImageUrls(item)"></el-image>
                      <div class="pic-item" v-for="(pic, picIndex)  in getRectificationImageUrls(item)" :key="picIndex">
                        <el-image :src="pic" :fit="fit" :preview-src-list="getRectificationImageUrls(item)"></el-image>
                                    </div>
                                </div>
                            </div>
@@ -205,16 +202,18 @@
                        </div>
                    </div>
                </div>

            </div>
        </template>


            <div v-if="current == 2">

        <template v-if="current == 2">
                <div class="detail-title-box">
                    <div class="detail-title">消防自查详情</div>

            <div class="close" @click="detailBox = false" title="关闭"></div>
                </div>

          <div class="detail-content-box">
                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">场所名称</div>
@@ -327,10 +326,8 @@
                                    整改后图片：
                                </div>
                                <div class="yh-pic-list">
                                    <div class="pic-item" v-for="(pic, picIndex)  in getRectificationImageUrls(item)"
                                        :key="picIndex">
                                        <el-image :src="pic" :fit="fit"
                                            :preview-src-list="getRectificationImageUrls(item)"></el-image>
                      <div class="pic-item" v-for="(pic, picIndex)  in getRectificationImageUrls(item)" :key="picIndex">
                        <el-image :src="pic" :fit="fit" :preview-src-list="getRectificationImageUrls(item)"></el-image>
                                    </div>
                                </div>
                            </div>
@@ -346,8 +343,9 @@
                    </div>
                </div>
            </div>

        </template>
        </div>
    </el-dialog>
    </div>
</template>

@@ -386,7 +384,7 @@
            },
            patrolGroupDTOList: []

        };
    }
    },
    //监听属性 类似于data概念
    computed: {
@@ -397,24 +395,24 @@
    methods: {
        // 写一个方法，把阿拉伯数字转换中文的大写
        getUpperCase(num) {
            const chineseNumbers = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
            const units = ['', '十', '百', '千', '万'];
            let str = '';
            num = num.toString(); // 确保输入是字符串
      const chineseNumbers = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']
      const units = ['', '十', '百', '千', '万']
      let str = ''
      num = num.toString() // 确保输入是字符串
            for (let i = 0; i < num.length; i++) {
                str += chineseNumbers[num.charAt(i)] + units[num.length - i - 1];
        str += chineseNumbers[num.charAt(i)] + units[num.length - i - 1]
            }
            let numResult = str.replace(/零[千百十]/g, '零').replace(/^零/, '');
      let numResult = str.replace(/零[千百十]/g, '零').replace(/^零/, '')
            console.log(numResult)
            return numResult
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
      console.log(`每页 ${val} 条`)
            this.pageparm.pageSize = val
            this.changeData(this.current)
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
      console.log(`当前页: ${val}`)
            this.pageparm.current = val
            this.changeData(this.current)
        },
@@ -539,29 +537,5 @@
            margin: 2px 5px;
        }
    }

    .detail-box {
        height: 700px;
        position: absolute;
        right: -410px;
        top: -70%;
        background-color: rgba(35, 50, 167, 0.7);
        // width: 400px;
        padding: 10px;

        .detail-title-box {
            margin-bottom: 10px;
            font-weight: bold;
            text-align: center;
        }
    }

    .detail-row {
        line-height: 40px;
        // text-align: left;
        // margin-left: 10px;

    }

}
</style>

 src/views/house/components/noFraudAuthentication.vue

@@ -1,7 +1,7 @@
<!--  -->
<template>
    <div class="table-box-w">
        <div>
    <div class="list-box">
            <el-table :data="dataList.records" style="width: 100%" @cell-click="cellClick">

                <el-table-column align="center" prop="placeName" label="场所名称"> </el-table-column>
@@ -16,21 +16,22 @@
                <el-table-column align="center" prop="addressName" show-overflow-tooltip label="地址"> </el-table-column>
            </el-table>

            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage4" :page-sizes="[10, 20, 30, 40]" :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper" :total="dataList.total">
                </el-pagination>
      <div class="pages">
        <el-pagination background layout="prev, pager, next" :page-size="100" :total="dataList.total"
          :current-page="currentPage4" @current-change="handleCurrentChange"></el-pagination>
            </div>
        </div>

        <!-- 详情页面 -->
        <div class="detail-box" v-if="detailBox">

    <el-dialog class="resident-details-box-details" :modal="false" :close-on-click-modal="false" :append-to-body="true"
      :visible.sync="detailBox">
      <div class="detail-box">
            <div class="detail-title-box">
                <div class="detail-title">无诈申报详情</div>
          <div class="close" @click="detailBox = false" title="关闭"></div>
            </div>

        <div class="detail-content-box">
            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">场所名称</div>
@@ -94,7 +95,6 @@
                </el-col>
            </el-row>


            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">经纬度</div>
@@ -135,9 +135,9 @@
                    </div>
                </el-col>
            </el-row>


        </div>
      </div>
    </el-dialog>
    </div>
</template>

@@ -184,7 +184,7 @@
                current: 1
            }

        };
    }
    },
    //监听属性 类似于data概念
    computed: {
@@ -205,12 +205,12 @@
        },

        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
      console.log(`每页 ${val} 条`)
            this.pageparm.pageSize = val
            this.init()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
      console.log(`当前页: ${val}`)
            this.pageparm.current = val
            this.init()

@@ -272,29 +272,6 @@
        .btn-box {
            margin: 2px 5px;
        }
    }

    .detail-box {
        height: 700px;
        position: absolute;
        right: -410px;
        top: -70%;
        background-color: rgba(35, 50, 167, 0.7);
        width: 400px;
        padding: 10px;

        .detail-title-box {
            margin-bottom: 10px;
            font-weight: bold;
            text-align: center;
        }
    }

    .detail-row {
        line-height: 40px;
        // text-align: left;
        // margin-left: 10px;

    }
}
</style>

 src/views/house/components/positionTrading.vue

@@ -1,7 +1,7 @@
<!--  -->
<template>
    <div class="table-box-w">
        <div>
    <div class="list-box">
            <el-table :data="dataList.records" style="width: 100%" @cell-click="cellClick">
                <!-- 包含了场所名称、阵地类型、交易人员姓名、手机号、身份证号码、物品名称、交易数量、交易金额、校验过程、交易物品图片等 -->
                <el-table-column align="center" prop="labelName" label="阵地类型"> </el-table-column>
@@ -17,12 +17,16 @@
        </div>

        <!-- 详情页面 -->
        <div class="detail-box" v-if="detailBox">
    <el-dialog class="resident-details-box-details" :modal="false" :close-on-click-modal="false" :append-to-body="true"
      :visible.sync="detailBox">
      <div class="detail-box">
            <!-- 包含了场所名称、阵地类型、交易人员姓名、手机号、身份证号码、物品名称、交易数量、交易金额、校验过程、交易物品图片等 -->
            <div class="detail-title-box">
                <div class="detail-title">阵地交易详情</div>
          <div class="close" @click="detailBox = false" title="关闭"></div>
            </div>

        <div class="detail-content-box">
            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">场所名称</div>
@@ -49,6 +53,7 @@
                    <div class="detail-row">{{ row.principalPhone }}</div>
                </el-col>
            </el-row>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">场所地址</div>
@@ -57,7 +62,6 @@
                    <div class="">{{ row.location }}</div>
                </el-col>
            </el-row>


            <el-row class="">
                <el-col :span="6">
@@ -76,7 +80,6 @@
                    <div class="detail-row">{{ row.transactionObject }}</div>
                </el-col>
            </el-row>


            <el-row class="">
                <el-col :span="6">
@@ -150,8 +153,9 @@
                    </div>
                </el-col>
            </el-row>

        </div>
      </div>
    </el-dialog>
    </div>
</template>

@@ -183,7 +187,7 @@

            },

        };
    }
    },
    //监听属性 类似于data概念
    computed: {
@@ -239,27 +243,5 @@
.table-box-w {
    // position: relative;
    // background-color: rgba(228, 17, 17, 0.5);

    .detail-box {
        height: 800px;
        position: absolute;
        right: -410px;
        top: -60%;
        background-color: rgba(35, 50, 167, 0.7);
        width: 400px;
        padding: 10px;

        .detail-title-box {
            margin-bottom: 10px;
            font-weight: bold;
            text-align: center;
        }
    }

    .detail-row {
        line-height: 40px;
        // text-align: left;
        // margin-left: 10px;
    }
}
</style>

 src/views/house/components/rentalHouse.vue

@@ -1,7 +1,7 @@
<!--  -->
<template>
    <div class="table-box-w">
        <div>
    <div class="list-box">

            <!-- <div class="btn-box-box">
               
@@ -64,22 +64,23 @@
                <el-table-column align="center" prop="phoneNumber" label="联系方式"> </el-table-column>
            </el-table>

            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage4" :page-sizes="[10, 20, 30, 40]" :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper" :total="dataList.total">
                </el-pagination>
      <div class="pages">
        <el-pagination background layout="prev, pager, next" :page-size="100" :total="dataList.total"
          :current-page="currentPage4" @current-change="handleCurrentChange"></el-pagination>
            </div>
        </div>

        <!-- 详情页面 -->
        <div class="detail-box" v-if="detailBox">

            <div v-if="current == 1">
    <el-dialog class="resident-details-box-details" :modal="false" :close-on-click-modal="false" :append-to-body="true"
      :visible.sync="detailBox">
      <div class="detail-box">
        <template v-if="current == 1">
                <div class="detail-title-box">
                    <div class="detail-title">出租屋详情</div>
            <div class="close" @click="detailBox = false" title="关闭"></div>
                </div>

          <div class="detail-content-box">
                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">租户名称</div>
@@ -115,6 +116,7 @@
                        <div class="detail-row">{{ row.dueTime }}</div>
                    </el-col>
                </el-row>

                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">地址</div>
@@ -142,14 +144,16 @@
                        <div class="detail-row"> {{ row.houseStatus == 1 ? '部分出租' : '全部出租' }}</div>
                    </el-col>
                </el-row>

            </div>
        </template>

            <div v-if="current == 2">
        <template v-if="current == 2">
                <div class="detail-title-box">
                    <div class="detail-title">居住证申请详情</div>
            <div class="close" @click="detailBox = false" title="关闭"></div>
                </div>

          <div class="detail-content-box">
                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">姓名</div>
@@ -232,13 +236,15 @@
                    </el-col>
                </el-row>
            </div>
        </template>


            <div v-if="current == 3">
        <template v-if="current == 3">
                <div class="detail-title-box">
                    <div class="detail-title">租客详情</div>
            <div class="close" @click="detailBox = false" title="关闭"></div>
                </div>

          <div class="detail-content-box">
                <el-row class="">
                    <el-col :span="6">
                        <div class="detail-row">名称</div>
@@ -256,7 +262,6 @@
                        <div class="detail-row">{{ row.idCard }}</div>
                    </el-col>
                </el-row>


                <el-row class="">
                    <el-col :span="6">
@@ -285,9 +290,9 @@
                    </el-col>
                </el-row>
            </div>


        </template>
        </div>
    </el-dialog>
    </div>
</template>

@@ -325,7 +330,7 @@
                current: 1
            }

        };
    }
    },
    //监听属性 类似于data概念
    computed: {
@@ -335,12 +340,12 @@
    //方法集合
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
      console.log(`每页 ${val} 条`)
            this.pageparm.pageSize = val
            this.changeData(this.current)
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
      console.log(`当前页: ${val}`)
            this.pageparm.current = val
            this.changeData(this.current)

@@ -423,29 +428,6 @@
        .btn-box {
            margin: 2px 5px;
        }
    }

    .detail-box {
        height: 700px;
        position: absolute;
        right: -410px;
        top: -70%;
        background-color: rgba(35, 50, 167, 0.7);
        width: 400px;
        padding: 10px;

        .detail-title-box {
            margin-bottom: 10px;
            font-weight: bold;
            text-align: center;
        }
    }

    .detail-row {
        line-height: 40px;
        // text-align: left;
        // margin-left: 10px;

    }
}
</style>

 src/views/house/components/scanCodeAlarm.vue

@@ -1,7 +1,7 @@
<!--  -->
<template>
    <div class="table-box-w">
        <div>
    <div class="list-box">
            <el-table :data="dataList.records" style="width: 100%" @cell-click="cellClick">
                <!-- 包含了姓名、性别、民族、身份证号码、手机号、现居住地、岗位、从业人员照片等。 -->
                <el-table-column align="center" prop="policeName" label="民警"> </el-table-column>
@@ -15,21 +15,23 @@
                </el-table-column>
            </el-table>

            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage4" :page-sizes="[10, 20, 30, 40]" :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper" :total="dataList.total">
                </el-pagination>
      <div class="pages">
        <el-pagination background layout="prev, pager, next" :page-size="100" :total="dataList.total"
          :current-page="currentPage4" @current-change="handleCurrentChange"></el-pagination>
            </div>
        </div>

        <!-- 详情页面 -->
        <div class="detail-box" v-if="detailBox">
    <el-dialog class="resident-details-box-details" :modal="false" :close-on-click-modal="false" :append-to-body="true"
      :visible.sync="detailBox">
      <div class="detail-box">
            <!-- popelList[0]  详情页面 包含了姓名、性别、民族、身份证号码、手机号、现居住地、岗位、从业人员照片等-->
            <div class="detail-title-box">
                <div class="detail-title">扫码报警详情</div>
          <div class="close" @click="detailBox = false" title="关闭"></div>
            </div>

        <div class="detail-content-box">
            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">民警</div>
@@ -65,6 +67,7 @@
                    <div class="detail-row">{{ row.createTime }}</div>
                </el-col>
            </el-row>

            <el-row class="">
                <el-col :span="6">
                    <div class="detail-row">地址</div>
@@ -82,9 +85,9 @@
                    <div class="detail-row">{{ row.longitude }},{{ row.latitude }}</div>
                </el-col>
            </el-row>


        </div>
      </div>
    </el-dialog>
    </div>
</template>

@@ -119,7 +122,7 @@
                current: 1
            }

        };
    }
    },
    //监听属性 类似于data概念
    computed: {
@@ -129,12 +132,12 @@
    //方法集合
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
      console.log(`每页 ${val} 条`)
            this.pageparm.pageSize = val
            this.init()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
      console.log(`当前页: ${val}`)
            this.pageparm.current = val
            this.init()

@@ -189,28 +192,5 @@
.table-box-w {
    // position: relative;
    // background-color: rgba(228, 17, 17, 0.5);

    .detail-box {
        height: 700px;
        position: absolute;
        right: -410px;
        top: -70%;
        background-color: rgba(35, 50, 167, 0.7);
        width: 400px;
        padding: 10px;

        .detail-title-box {
            margin-bottom: 10px;
            font-weight: bold;
            text-align: center;
        }
    }

    .detail-row {
        line-height: 40px;
        // text-align: left;
        // margin-left: 10px;

    }
}
</style>