首页现有地弹框更改

shuishen

2023-04-01 de68a30c71578ec3d8b9c4d928edf3f59a399856

首页现有地弹框更改

 src/styles/media/index.scss

@@ -3017,41 +3017,45 @@
                }
            }

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

            .pages {
                display: flex;
                align-items: center;
                justify-content: center;
                height: countSizeVh(40);
                .el-table {
                    margin-bottom: countSizeVh(10);
                    height: calc(100% - countSizeVh(40));
                }

                &>div {
                    &>button {
                        width: countSizeVh(32);
                        height: countSizeVh(32);
                .pages {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: countSizeVh(40);

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

                    &>ul {
                        li {
                    &>div {
                        &>button {
                            width: countSizeVh(32);
                            height: countSizeVh(32);
                            line-height: countSizeVh(32);
                            font-size: countSizeVh(16);

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

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

                .el-pagination__total {
                    color: #fff;
                }
                    .el-pagination__total {
                        color: #fff;
                    }

                }
            }
        }
    }

 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

@@ -45,10 +45,10 @@
                <defs>
                    <path id="border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                        d="M0.27,0.03c52.66,0,105.34,0,158,0c1.67,2,3.33,4,5,6c1,0.33,2,0.67,3,1c1.33,1.67,2.67,3.33,4,5
                                                                                                                                                                                                                                                                                            c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0
                                                                                                                                                                                                                                                                                            c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0
                                                                                                                                                                                                                                                                                            c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
                                                                                                                                                                                                                                                                                            c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z"
                                                                                                                                                                                                                                                                                                                        c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0
                                                                                                                                                                                                                                                                                                                        c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0
                                                                                                                                                                                                                                                                                                                        c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
                                                                                                                                                                                                                                                                                                                        c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z"
                        fill="transparent" />
                    <radialGradient id="border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c" cx="50%" cy="50%" r="50%">
                        <stop offset="0%" stop-color="#fff" stop-opacity="1" />
@@ -58,10 +58,10 @@
                        <circle cx="0" cy="0" r="150" fill="url(#border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c)">
                            <animateMotion dur="8s"
                                path="M0.27,0.03c52.66,0,105.34,0,158,0c1.67,2,3.33,4,5,6c1,0.33,2,0.67,3,1c1.33,1.67,2.67,3.33,4,5
                                                                                                                                                                                                                                                                                                    c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0
                                                                                                                                                                                                                                                                                                    c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0
                                                                                                                                                                                                                                                                                                    c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
                                                                                                                                                                                                                                                                                                    c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z"
                                                                                                                                                                                                                                                                                                                                c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0
                                                                                                                                                                                                                                                                                                                                c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0
                                                                                                                                                                                                                                                                                                                                c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
                                                                                                                                                                                                                                                                                                                                c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z"
                                rotate="auto" repeatCount="indefinite" />
                        </circle>
                    </mask>
@@ -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"
@@ -130,17 +131,17 @@
    <el-dialog :title="keyPersonTitle" :modal="true" :visible.sync="keyPersonVisible" :before-close="personInfoClose"
        :close-on-click-modal="true" class="keyPerson-details-box">
        <!-- <div class="header" v-show="!isMaoJiaLin">
                                                                                                                                                                                                                                                    <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>
                                                                                                                                                                                                                                                                                            人员名称：
                                                                                                                                                                                                                                                                                            <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-table :data="keyPersonDetailArr" style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
@@ -168,10 +169,10 @@
            </el-table>

            <!-- <div class="pages all-pagination-sty" ref="tablePagination" v-show="!isMaoJiaLin">
                                                                                                                                                                                                                                   <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> -->
                                                                                                                                                                                                                                                                       <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> -->
        </el-dialog>

        <el-dialog :title="equimentTitle" :modal="true" :visible.sync="equimentVisible" :before-close="equimentBeforeClose"
@@ -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 () {