首页现有地弹框更改

shuishen

2023-04-01 de68a30c71578ec3d8b9c4d928edf3f59a399856

首页现有地弹框更改

 src/styles/media/index.scss

@@ -3017,9 +3017,12 @@
                }
            }

            .body {
                height: calc(100% - countSizeVh(36));

            .el-table {
                margin-bottom: countSizeVh(10);
                height: calc(100% - countSizeVh(96));
                    height: calc(100% - countSizeVh(40));
            }

            .pages {
@@ -3055,6 +3058,7 @@
            }
        }
    }
    }

    .el-table {


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

New file
@@ -0,0 +1,155 @@
<template>
    <el-dialog :title="landTitle" :modal="true" :visible.sync="landVisible" :before-close="landBeforeClose"
        :close-on-click-modal="true" class="land-details-box">
        <div class="header">
            <div>
                责任区名称：
                <input type="text" v-model="landSearchAoiName" placeholder="请输入责任区名称" />
            </div>
            <div>
                负责人：
                <input type="text" v-model="policeName" placeholder="请输入负责人名称" />
            </div>
            <div>
                联系电话：
                <input type="text" v-model="callPhone" placeholder="请输入联系电话" />
            </div>
            <el-button type="primary" icon="el-icon-search" @click="searchLandDetail">搜索</el-button>
            <el-button type="primary" icon="el-icon-delete" @click="clearLandDetailSearchValue">清空</el-button>
        </div>
        <div v-loading="landLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.2)" class="body">

            <el-table :data="landDetailArr" style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }">
                <el-table-column label="序号" type="index" align="center">
                    <template slot-scope="scope">
                        <span>{{ (landPage.currentPage - 1) * landPage.pageSize + scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="name" label="责任区名称"
                    v-if="this.landType == 1"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="aoiName" label="小区名称"
                    v-if="this.landType == 2"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="policeName" label="负责人"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="phone" label="联系电话"></el-table-column>
            </el-table>

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

<script>
import { getLandDetail } from "@/api/home/index.js"

export default {
    props: ['policeStaionID'],

    data () {
        return {
            landLoading: false,
            landVisible: false,
            landTitle: '',
            landType: '',
            landDetailArr: [],
            callPhone: '',
            landPage: {
                total: 0,
                pageSize: 15,
                currentPage: 1
            },
            // 现有小区搜索条件-小区名称
            landSearchAoiName: '',
            policeName: '',
        }
    },

    methods: {
        /**
        * @description: 显示现有小区弹窗列表
        * @param {*} name
        * @param {*} type
        * @param {*} id
        * @return {*}
        */
        showlanddetail (name, type, id) {
            this.landVisible = true
            this.landTitle = name
            this.landType = type
            this.landDetailId = id
            this.landPage.currentPage = 1
            this.getLandDetail(type, id, this.landPage.currentPage)
        },

        /**
        * @description: 现有小区弹窗中搜索
        * @return {*}
        */
        searchLandDetail () {
            this.landPage.currentPage = 1
            this.getLandDetail(this.landType, this.landDetailId, this.landPage.currentPage, this.policeName, this.callPhone, this.landSearchAoiName)
        },


        clearLandDetailSearchValue () {
            this.policeName = ''
            this.callPhone = ''
            this.landSearchAoiName = ''
            this.landPage.currentPage = 1
            this.getLandDetail(this.landType, this.landDetailId, this.landPage.currentPage)
        },

        /**
        * @description: 现有小区详情弹窗分页
        * @param {*} currentPage 当前页数
        * @return {*}
        */
        landHandleCurrentChange (currentPage) {
            this.landPage.currentPage = currentPage
            this.getLandDetail(this.landType, this.landDetailId, this.landPage.currentPage, this.policeName, this.callPhone, this.landSearchAoiName)
        },


        getLandDetail (type, id, current, policeName = '', phone = '', aoiName = '') {
            this.landLoading = true

            getLandDetail({
                type,
                policeStationId: this.policeStaionID == '1123598813738675201' || this.policeStaionID == '' ? id : '',
                areaId: this.policeStaionID != '1123598813738675201' && this.policeStaionID != '' ? id : '',
                current,
                policeName,
                phone,
                aoiName,
                size: this.landPage.pageSize
            }).then(res => {
                this.landDetailArr = []
                this.landPage.total = 0

                if (res.data.data.records.length > 0) {
                    this.landDetailArr = res.data.data.records
                    this.landPage.total = res.data.data.total
                } else {
                    this.landDetailArr = []
                    this.landPage.total = 0
                }
                setTimeout(() => {
                    this.landLoading = false
                }, 500)
            })
        },

        landBeforeClose () {
            this.landVisible = false
        }
    },
}
</script>

<style lang="scss" scoped></style>

 src/views/home/components/leftContainer.vue

@@ -129,8 +129,6 @@
                </use>
            </svg>
        </div>


    </div>
</template>


 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: 2023-03-31 21:58:49
 * @LastEditTime: 2023-04-01 10:58:03
 * @FilePath: \srs-police-affairs\src\views\home\index.vue
 * @Description: 小区-栋-层-房屋
 *
@@ -11,8 +11,9 @@

<template>
    <div class="home-page container">
        <left-container class="left-container" @showpeopledetail="showpeopledetail" @showlanddetail="showlanddetail"
            @showkeypersondetail="showkeypersondetail" ref="leftContainer"></left-container>
        <left-container class="left-container" @showpeopledetail="showpeopledetail"
            @showkeypersondetail="showkeypersondetail" ref="leftContainer"
            @showlanddetail="showlanddetail"></left-container>

        <right-container class="right-container" @showequimentdetail="showequimentdetail"
            @showschedulingdetail="showschedulingdetail" @selectPoliceChangeEventData="selectPoliceChangeEventData"
@@ -227,51 +228,6 @@

        </el-dialog>

        <el-dialog :title="landTitle" :modal="true" :visible.sync="landVisible" :before-close="landBeforeClose"
            :close-on-click-modal="true" class="land-details-box">
            <div class="header">
                <div>
                    责任区名称：
                    <input type="text" v-model="landSearchAoiName" placeholder="请输入责任区名称" />
                </div>
                <div>
                    负责人：
                    <input type="text" v-model="policeName" placeholder="请输入负责人名称" />
                </div>
                <div>
                    联系电话：
                    <input type="text" v-model="callPhone" placeholder="请输入联系电话" />
                </div>
                <el-button type="primary" icon="el-icon-search" @click="searchLandDetail">搜索</el-button>
                <el-button type="primary" icon="el-icon-delete" @click="clearLandDetailSearchValue">清空</el-button>
            </div>
            <el-main v-loading="landLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.2)">
                <el-table :data="landDetailArr" style="width: 100%"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }"
                    v-show="!landLoading">
                    <el-table-column label="序号" type="index" align="center">
                        <template slot-scope="scope">
                            <span>{{ (landPage.currentPage - 1) * landPage.pageSize + scope.$index + 1 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="name" label="责任区名称"
                        v-if="this.landType == 1"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="aoiName" label="小区名称"
                        v-if="this.landType == 2"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="policeName" label="负责人"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="phone" label="联系电话"></el-table-column>
                </el-table>

                <div class="pages all-pagination-sty" ref="tablePagination" v-show="!landLoading">
                    <el-pagination background layout="prev, pager, next, total" :total="landPage.total"
                        :page-size="landPage.pageSize" :current-page="landPage.currentPage"
                        @current-change="landHandleCurrentChange"></el-pagination>
                </div>
            </el-main>

        </el-dialog>

        <el-dialog title="警情信息" :modal="true" :visible.sync="policeSituationVisible" :modal-append-to-body="false"
            :before-close="policeSituationBeforeClose" :close-on-click-modal="true" class="policeSituation-details-box">
@@ -429,6 +385,8 @@
                </el-table-column>
            </el-table>
        </el-dialog>

        <land-details-box ref="landDetailsBox" :policeStaionID="policeStaionID"></land-details-box>
    </div>
</template>

@@ -552,8 +510,10 @@
import { convertStringToList } from "@/utils/geometryStringTool"

import { getDevices } from '@/api/video/index.js'
import { getActAsPoliceList, getEquipmentPaging, getPoliceStationTree, getEquipmentAll, getLandDetail } from "@/api/home/index.js"
import { getActAsPoliceList, getEquipmentPaging, getPoliceStationTree, getEquipmentAll } from "@/api/home/index.js"
import { getTalkEquimentPage, getPoliceCameraEquimentPage } from '@/api/home/equiment.js'

import landDetailsBox from './components/dialog/landDetailsBox.vue'

export default {
    inject: ['userInfo'],
@@ -565,7 +525,6 @@
            houseArr: [],
            keyPeopleLoading: false,
            equimentLoading: false,
            landLoading: false,
            peopleKeypeopleLoading: false,
            // 是否显示辖区
            areaPolygonLayerShow: true,
@@ -581,13 +540,12 @@
            panoramaVrUrl: '',
            equimentTitle: '',
            keyPersonTitle: '',
            landTitle: '',
            panoramaVisible: false,
            equimentVisible: false,
            keyPersonVisible: false,
            policeSituationVisible: false,
            policeInformationType: '接警信息',
            landVisible: false,

            phoneDetails: {},
            phoneTitle: '',
            peopleTitle: '',
@@ -643,7 +601,6 @@
            dialogEquimentVideoTitle: '',
            dialogEquimentVideoVisible: false,

            landDetailArr: [],
            keyPersonDetailArr: [],
            timetype: 0,
            historyArr: [],
@@ -652,22 +609,14 @@
            policeSituationHistoryType: 0,
            policeSituationDetailObj: {},
            CJdata: {},
            landType: '',
            policeName: '',
            callPhone: '',
            landPage: {
                total: 0,
                pageSize: 15,
                currentPage: 1
            },

            peoplePoliceName: '',
            peopleCallPhone: '',

            // 当前下拉选中的ID
            policeStaionID: '',

            // 现有小区搜索条件-小区名称
            landSearchAoiName: '',


            flvPlayer: null,

@@ -676,7 +625,7 @@
        }
    },

    components: { leftContainer, rightContainer, bottomContainer, schedulingList },
    components: { leftContainer, rightContainer, bottomContainer, schedulingList, landDetailsBox },

    created () {
        const that = this
@@ -2072,78 +2021,13 @@
            return index + 1
        },

        /**
         * @description: 显示现有小区弹窗列表
         * @param {*} name
         * @param {*} type
         * @param {*} id
         * @return {*}
         */
        showlanddetail (name, type, id) {
            this.landVisible = true
            this.landLoading = true
            this.landTitle = name
            this.landType = type
            this.landDetailId = id
            this.landPage.currentPage = 1
            this.getLandDetail(type, id, this.landPage.currentPage)
        },

        clearLandDetailSearchValue () {
            this.landLoading = true
            this.policeName = ''
            this.callPhone = ''
            this.landSearchAoiName = ''
            this.landPage.currentPage = 1
            this.getLandDetail(this.landType, this.landDetailId, this.landPage.currentPage)
        },

        /**
         * @description: 现有小区弹窗中搜索
         * @return {*}
         */
        searchLandDetail () {
            this.landLoading = true
            this.landPage.currentPage = 1
            this.getLandDetail(this.landType, this.landDetailId, this.landPage.currentPage, this.policeName, this.callPhone, this.landSearchAoiName)
        },

        /**
         * @description: 现有小区详情弹窗分页
         * @param {*} currentPage 当前页数
         * @return {*}
         */
        landHandleCurrentChange (currentPage) {
            this.landPage.currentPage = currentPage
            this.getLandDetail(this.landType, this.landDetailId, this.landPage.currentPage, this.policeName, this.callPhone, this.landSearchAoiName)
        },

        getLandDetail (type, id, current, policeName = '', phone = '', aoiName = '') {
            getLandDetail({
                type,
                policeStationId: this.policeStaionID == '1123598813738675201' || this.policeStaionID == '' ? id : '',
                areaId: this.policeStaionID != '1123598813738675201' && this.policeStaionID != '' ? id : '',
                current,
                policeName,
                phone,
                aoiName,
                size: this.landPage.pageSize
            }).then(res => {
                this.landDetailArr = []
                this.landPage.total = 0

                if (res.data.data.records.length > 0) {
                    this.landDetailArr = res.data.data.records
                    this.landPage.total = res.data.data.total
                } else {
                    this.landDetailArr = []
                    this.landPage.total = 0
                }
                setTimeout(() => {
                    this.landLoading = false
                }, 500)
            })
        },



        /**
         * @description: 列表弹框中的搜索
@@ -2218,6 +2102,10 @@
                sitePitch: -45
            })
        },

        showlanddetail (name, type, id) {
            this.$refs.landDetailsBox.showlanddetail(name, type, id)
        }
    },

    destroyed () {