From b6fe0d66cd2b1349d357d0a105300fe2ac3b7bc0 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 18 Dec 2024 18:00:45 +0800
Subject: [PATCH] 社区感知户室详情中 消防检查、九小场所、反诈宣防等列表布局样式调整 单行详情数据样式调整
---
src/views/house/components/scanCodeAlarm.vue | 356 ++++++++++++++++++++++++++++-------------------------------
1 files changed, 168 insertions(+), 188 deletions(-)
diff --git a/src/views/house/components/scanCodeAlarm.vue b/src/views/house/components/scanCodeAlarm.vue
index cd71afd..eb1b6f6 100644
--- a/src/views/house/components/scanCodeAlarm.vue
+++ b/src/views/house/components/scanCodeAlarm.vue
@@ -1,216 +1,196 @@
<!-- -->
<template>
- <div class="table-box-w">
- <div>
- <el-table :data="dataList.records" style="width: 100%" @cell-click="cellClick">
- <!-- 包含了姓名、性别、民族、身份证号码、手机号、现居住地、岗位、从业人员照片等。 -->
- <el-table-column align="center" prop="policeName" label="民警"> </el-table-column>
- <el-table-column align="center" prop="pcsName" label="单位"> </el-table-column>
- <el-table-column align="center" prop="createTime" label="报警时间"> </el-table-column>
- <el-table-column align="center" prop="address" show-overflow-tooltip label="地址"> </el-table-column>
- <el-table-column align="center" prop="injuryFlag" label="是否受伤">
- <template slot-scope="scope">
- {{ scope.row.injuryFlag == 1 ? '是' : '否' }}
- </template>
- </el-table-column>
- </el-table>
+ <div class="table-box-w">
+ <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>
+ <el-table-column align="center" prop="pcsName" label="单位"> </el-table-column>
+ <el-table-column align="center" prop="createTime" label="报警时间"> </el-table-column>
+ <el-table-column align="center" prop="address" show-overflow-tooltip label="地址"> </el-table-column>
+ <el-table-column align="center" prop="injuryFlag" label="是否受伤">
+ <template slot-scope="scope">
+ {{ scope.row.injuryFlag == 1 ? '是' : '否' }}
+ </template>
+ </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>
- </div>
-
- <!-- 详情页面 -->
- <div class="detail-box" v-if="detailBox">
- <!-- popelList[0] 详情页面 包含了姓名、性别、民族、身份证号码、手机号、现居住地、岗位、从业人员照片等-->
- <div class="detail-title-box">
- <div class="detail-title">扫码报警详情</div>
- </div>
-
- <el-row class="">
- <el-col :span="6">
- <div class="detail-row">民警</div>
- </el-col>
- <el-col :span="18">
- <div class="detail-row">{{ row.policeName }}</div>
- </el-col>
- </el-row>
-
- <el-row class="">
- <el-col :span="6">
- <div class="detail-row">单位</div>
- </el-col>
- <el-col :span="18">
- <div class="detail-row">{{ row.pcsName }}</div>
- </el-col>
- </el-row>
-
- <el-row class="">
- <el-col :span="6">
- <div class="detail-row">是否受伤</div>
- </el-col>
- <el-col :span="18">
- <div class="detail-row">{{ row.gender == 1 ? '是' : '否' }}</div>
- </el-col>
- </el-row>
-
- <el-row class="">
- <el-col :span="6">
- <div class="detail-row">报警时间</div>
- </el-col>
- <el-col :span="18">
- <div class="detail-row">{{ row.createTime }}</div>
- </el-col>
- </el-row>
- <el-row class="">
- <el-col :span="6">
- <div class="detail-row">地址</div>
- </el-col>
- <el-col :span="18">
- <div class="">{{ row.address }}</div>
- </el-col>
- </el-row>
-
- <el-row class="">
- <el-col :span="6">
- <div class="detail-row">经纬度</div>
- </el-col>
- <el-col :span="18">
- <div class="detail-row">{{ row.longitude }},{{ row.latitude }}</div>
- </el-col>
- </el-row>
-
-
- </div>
+ <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>
+
+ <!-- 详情页面 -->
+ <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>
+ </el-col>
+ <el-col :span="18">
+ <div class="detail-row">{{ row.policeName }}</div>
+ </el-col>
+ </el-row>
+
+ <el-row class="">
+ <el-col :span="6">
+ <div class="detail-row">单位</div>
+ </el-col>
+ <el-col :span="18">
+ <div class="detail-row">{{ row.pcsName }}</div>
+ </el-col>
+ </el-row>
+
+ <el-row class="">
+ <el-col :span="6">
+ <div class="detail-row">是否受伤</div>
+ </el-col>
+ <el-col :span="18">
+ <div class="detail-row">{{ row.gender == 1 ? '是' : '否' }}</div>
+ </el-col>
+ </el-row>
+
+ <el-row class="">
+ <el-col :span="6">
+ <div class="detail-row">报警时间</div>
+ </el-col>
+ <el-col :span="18">
+ <div class="detail-row">{{ row.createTime }}</div>
+ </el-col>
+ </el-row>
+
+ <el-row class="">
+ <el-col :span="6">
+ <div class="detail-row">地址</div>
+ </el-col>
+ <el-col :span="18">
+ <div class="">{{ row.address }}</div>
+ </el-col>
+ </el-row>
+
+ <el-row class="">
+ <el-col :span="6">
+ <div class="detail-row">经纬度</div>
+ </el-col>
+ <el-col :span="18">
+ <div class="detail-row">{{ row.longitude }},{{ row.latitude }}</div>
+ </el-col>
+ </el-row>
+ </div>
+ </div>
+ </el-dialog>
+ </div>
</template>
<script>
import {
- getPoliceAlarmRecordsPage
+ getPoliceAlarmRecordsPage
} from "@/api/dept/newIndex.js"
export default {
- name: 'tableFromPop',
+ name: 'tableFromPop',
- props: {
- hushiPeoTy: {
- type: String,
- default: ''
- },
+ props: {
+ hushiPeoTy: {
+ type: String,
+ default: ''
},
- //import引入的组件需要注入到对象中才能使用
- components: {},
- data() {
- //这里存放数据
- return {
- row: {},
- detailBox: false,
- dataList: {
- total: 1,
- records: []
+ },
+ //import引入的组件需要注入到对象中才能使用
+ components: {},
+ data () {
+ //这里存放数据
+ return {
+ row: {},
+ detailBox: false,
+ dataList: {
+ total: 1,
+ records: []
- },
- pageparm: {
- pageSize: 10,
- current: 1
- }
+ },
+ pageparm: {
+ pageSize: 10,
+ current: 1
+ }
- };
+ }
+ },
+ //监听属性 类似于data概念
+ computed: {
+ },
+ //监控data中的数据变化
+ watch: {},
+ //方法集合
+ methods: {
+ handleSizeChange (val) {
+ console.log(`每页 ${val} 条`)
+ this.pageparm.pageSize = val
+ this.init()
},
- //监听属性 类似于data概念
- computed: {
- },
- //监控data中的数据变化
- watch: {},
- //方法集合
- methods: {
- handleSizeChange(val) {
- console.log(`每页 ${val} 条`);
- this.pageparm.pageSize = val
- this.init()
- },
- handleCurrentChange(val) {
- console.log(`当前页: ${val}`);
- this.pageparm.current = val
- this.init()
-
- },
- init() {
- getPoliceAlarmRecordsPage(123456, this.pageparm.pageSize, this.pageparm.current).then((res) => {
- this.dataList.total = res.data.data.total
- this.dataList.records = res.data.data.records
- })
- },
- cellClick(row, column, cell, event) {
- row.employerImg = this.getImgUrls(row.employerImg)
- this.row = row
- this.detailBox = !this.detailBox
- console.log('cellClick', row, column, cell, event)
- },
- // // 图片转换
- getImgUrls(imageUrls) {
- if (imageUrls && imageUrls != '' && imageUrls.length > 0) {
- imageUrls = imageUrls.split(',').filter(ele => ele != '').map(ele => {
- // return 'http://10.141.11.11/place/' + ele
- return 'https://srgdjczzxtpt.com:2080/gminio/jczz/' + ele
- })
- }
- return imageUrls || []
- },
+ handleCurrentChange (val) {
+ console.log(`当前页: ${val}`)
+ this.pageparm.current = val
+ this.init()
},
- //生命周期 - 创建完成（可以访问当前this实例）
- created() {
- console.log('tableFromPop mounted', this.hushiPeoTy)
-
+ init () {
+ getPoliceAlarmRecordsPage(123456, this.pageparm.pageSize, this.pageparm.current).then((res) => {
+ this.dataList.total = res.data.data.total
+ this.dataList.records = res.data.data.records
+ })
},
- //生命周期 - 挂载完成（可以访问DOM元素）
- mounted() {
- console.log('tableFromPop mounted', this.hushiPeoTy)
- this.init()
-
+ cellClick (row, column, cell, event) {
+ row.employerImg = this.getImgUrls(row.employerImg)
+ this.row = row
+ this.detailBox = !this.detailBox
+ console.log('cellClick', row, column, cell, event)
},
- beforeCreate() { }, //生命周期 - 创建之前
- beforeMount() { }, //生命周期 - 挂载之前
- beforeUpdate() { }, //生命周期 - 更新之前
- updated() { }, //生命周期 - 更新之后
- beforeDestroy() { }, //生命周期 - 销毁之前
- destroyed() { }, //生命周期 - 销毁完成
- activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
+ // // 图片转换
+ getImgUrls (imageUrls) {
+ if (imageUrls && imageUrls != '' && imageUrls.length > 0) {
+ imageUrls = imageUrls.split(',').filter(ele => ele != '').map(ele => {
+ // return 'http://10.141.11.11/place/' + ele
+ return 'https://srgdjczzxtpt.com:2080/gminio/jczz/' + ele
+ })
+ }
+ return imageUrls || []
+ },
+
+ },
+ //生命周期 - 创建完成（可以访问当前this实例）
+ created () {
+ console.log('tableFromPop mounted', this.hushiPeoTy)
+
+ },
+ //生命周期 - 挂载完成（可以访问DOM元素）
+ mounted () {
+ console.log('tableFromPop mounted', this.hushiPeoTy)
+ this.init()
+
+ },
+ beforeCreate () { }, //生命周期 - 创建之前
+ beforeMount () { }, //生命周期 - 挂载之前
+ beforeUpdate () { }, //生命周期 - 更新之前
+ updated () { }, //生命周期 - 更新之后
+ beforeDestroy () { }, //生命周期 - 销毁之前
+ destroyed () { }, //生命周期 - 销毁完成
+ activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang="scss">
.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;
-
- }
+ // position: relative;
+ // background-color: rgba(228, 17, 17, 0.5);
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3