右侧图表增加点击事件，点击后首页弹窗显示弹窗详情

shuishen

2025-11-12 14c90ab9da107adb4749d6cc145379bc122382d3

右侧图表增加点击事件，点击后首页弹窗显示弹窗详情

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

New file
@@ -0,0 +1,181 @@
<!--
 * @Author       : yuan
 * @Date         : 2025-11-12 17:45:28
 * @LastEditors  : yuan
 * @LastEditTime : 2025-11-12 17:45:40
 * @FilePath     : \src\views\home\components\dialog\landDetailsBox copy.vue
 * @Description  : 
 * Copyright 2025 OBKoro1, All Rights Reserved. 
 * 2025-11-12 17:45:28
-->
<template>
    <el-dialog :title="landTitle" :visible.sync="landVisible" :before-close="landBeforeClose" :modal="true"
        :modal-append-to-body="false" :close-on-click-modal="false" class="land-details-box">
        <div class="header">
            <div v-show="landType == 2">
                小区名称：
                <input type="text" v-model="landSearchAoiName" placeholder="请输入小区名称" />
            </div>
            <div v-show="landType == 1">
                责任区名称：
                <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="curLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.5)" 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' }">
                <template slot="empty">
                    <div>{{ landEmptyText }}</div>
                </template>
                <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="landType == 1"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="aoiName" label="小区名称"
                    v-if="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 {
            curLoading: false,
            landEmptyText: '',
            landVisible: false,
            landTitle: '',
            landType: '',
            landDetailArr: [],
            callPhone: '',
            landPage: {
                total: 0,
                pageSize: 12,
                currentPage: 1
            },
            // 现有小区搜索条件-小区名称
            landSearchAoiName: '',
            policeName: '',
        }
    },

    methods: {
        /**
        * @description: 显示现有小区弹窗列表
        * @param {*} name
        * @param {*} type
        * @param {*} id
        * @return {*}
        */
        showcountBydetail (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.curLoading = true
            this.landEmptyText = ''

            const name = type == 1 ? {
                name: aoiName
            } : {
                aoiName
            }

            getLandDetail({
                type,
                policeStationId: this.policeStaionID == '1123598813738675201' || this.policeStaionID == '' ? id : '',
                areaId: this.policeStaionID != '1123598813738675201' && this.policeStaionID != '' ? id : '',
                current,
                policeName,
                phone,
                ...name,
                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
                    this.landEmptyText = ''
                } else {
                    this.landDetailArr = []
                    this.landPage.total = 0
                    this.landEmptyText = type == 1 ? '暂无小区数据' : '暂无责任区数据'
                }
                setTimeout(() => {
                    this.curLoading = false
                }, 500)
            })
        },

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

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

 src/views/home/components/rightContainer.vue

@@ -422,27 +422,27 @@
                let echartsData = [
                    {
                        type: 'unit',
                        num: 0,
                        value: 0,
                        name: '单元牌'
                    },
                    {
                        type: 'road_no',
                        num: 0,
                        value: 0,
                        name: '中门牌'
                    },
                    {
                        type: 'aoi',
                        num: 0,
                        value: 0,
                        name: '大门牌'
                    },
                    {
                        type: 'room',
                        num: 0,
                        value: 0,
                        name: '户室牌'
                    },
                    {
                        type: 'building',
                        num: 0,
                        value: 0,
                        name: '楼栋牌'
                    },
                ]
@@ -455,7 +455,7 @@
                    })
                })

                this.initCountByTypeEcharts(echartsData.map(i => i.name), echartsData.map(i => i.num), 2)
                this.initCountByTypeEcharts(echartsData.map(i => i.name), echartsData, 2)
            })
        },

@@ -466,6 +466,14 @@
                countByTypeMyChart = this.$echarts.init(chartDom)
                countByTypeMyChart.setOption(this.initCountyByOptions(xDate, yDate))

                countByTypeMyChart.on('click', params => {
                    if (this.tabTypeThree == 0) {
                        this.$emit('showcountBydetail', params.name, 2, params.data.id)
                    } else {
                        this.$emit('showcountBydetail', params.name, 1, params.data.id)
                    }
                })

                this.CountByTypeEchartsLoading = false
            } else {
                var chartMpDom = document.getElementById('CountByTypeMpEcharts')
@@ -473,6 +481,14 @@
                countByTypeMpMyChart = this.$echarts.init(chartMpDom)
                countByTypeMpMyChart.setOption(this.initCountyByOptions(xDate, yDate, '#3498db'))

                countByTypeMpMyChart.on('click', params => {
                    if (this.tabTypeThree == 0) {
                        this.$emit('showcountBydetail', params.name, 2, params.data.id)
                    } else {
                        this.$emit('showcountBydetail', params.name, 1, params.data.id)
                    }
                })

                this.CountByTypeMpEchartsLoading = false
            }
        },

 src/views/home/index.vue

@@ -17,7 +17,8 @@

        <right-container v-show="isShowHomeContent" class="right-container" @showequimentdetail="showequimentdetail"
            @showschedulingdetail="showschedulingdetail" @selectPoliceChangeEventData="selectPoliceChangeEventData"
            @changeActivityType="changeActivityType" ref="rightContainer"></right-container>
            @changeActivityType="changeActivityType" @showcountBydetail="showcountBydetail"
            ref="rightContainer"></right-container>

        <bottom-container v-show="isShowHomeContent" class="bottom-container" ref="bottomContainer"
            @changePoliceSituationHistoryType="changePoliceSituationHistoryType"
@@ -635,6 +636,8 @@

        <map-address-search-box></map-address-search-box>


        <count-by-details-box ref="countByDetailsBox" :policeStaionID="policeStaionID"></count-by-details-box>
        <land-details-box ref="landDetailsBox" :policeStaionID="policeStaionID"></land-details-box>
        <area-details-box ref="areaDetailsBox" :policeStaionID="policeStaionID"></area-details-box>
        <place-details-box ref="placeDetailsBox" :policeStaionID="policeStaionID"></place-details-box>
@@ -777,6 +780,8 @@
import { getTalkEquimentPage, getPoliceCameraEquimentPage } from '@/api/home/equiment.js'

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

import areaDetailsBox from './components/dialog/areaDetailsBox.vue'
import placeDetailsBox from './components/dialog/placeDetailsBox.vue'
import otherPlaceDetailsBox from './components/dialog/otherPlaceDetailsBox.vue'
@@ -961,6 +966,7 @@
        bottomContainer,
        schedulingList,
        landDetailsBox,
        countByDetailsBox,
        placeDetailsBox,
        otherPlaceDetailsBox,
        areaDetailsBox,
@@ -2912,6 +2918,10 @@
            this.$refs.landDetailsBox.showlanddetail(name, type, id)
        },

        showcountBydetail (name, type, id) {
            this.$refs.countByDetailsBox.showcountBydetail(name, type, id)
        },

        // 首页显示隐藏页面进入跳转逻辑
        showHomeContentBtnStyle () {
            if (!this.$store.state.popupParams.isShowHomeContent) {