重点人员饼图tooltip轮播

guanqb

2023-04-04 bb572714dc0aef40891c542ec28dcbc2219b2e70

重点人员饼图tooltip轮播

 src/views/home/components/bottomContainer.vue

@@ -85,7 +85,7 @@

                <!-- </vue-seamless-scroll> -->

                <div class="warp no-data" v-else>暂无数据</div>
                <div class="warp no-data" v-else>暂无警情数据</div>
            </div>

            <div class="current-table-body" ref="ElTableBox" v-if="historytype == 1">
@@ -344,9 +344,9 @@

        //  走马灯改变事件
        changeAlarm(index){
            index = index+1 ;
            index = index + 1
            // 改变数据
            this.alarmDataHanlder(index);
            this.alarmDataHanlder(index)
        },

        // 获取实时接警记录
@@ -362,9 +362,9 @@
                        return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB, position: item.ZDDWYZB && item.ZDDWYZB != 0 ? '有' : '无' }
                    })
                    // 数据处理
                    this.alarmDataHanlder(1);
                    this.alarmDataHanlder(1)
                } else {
                    this.alarmPageCount = 1;
                    this.alarmPageCount = 1
                    this.policeSituationRealtimeArr = []
                }
                

 src/views/home/components/leftContainer.vue

@@ -143,8 +143,10 @@
let keyPersonmyChart = null
let houseMyChart
let landMyChart
let timer

let leftTiming = null
let keyPeopleDataLength = 0

let myColor = ['#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC', '#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62']

@@ -202,6 +204,78 @@
    },

    methods: {
        // 设备饼图轮播
        keyPeopleEchartsCarousel () {
            let curIndex = 0
            if (timer) {
                clearInterval(timer)
            }

            timer = setInterval(() => {
                keyPersonmyChart.dispatchAction({
                    type: "downplay",
                    seriesIndex: 0,
                    dataIndex: curIndex,
                })
                curIndex = (curIndex + 1) % keyPeopleDataLength
                keyPersonmyChart.dispatchAction({
                    type: "highlight",
                    seriesIndex: 0,
                    dataIndex: curIndex,
                })
                keyPersonmyChart.dispatchAction({
                    type: "showTip",
                    seriesIndex: 0,
                    dataIndex: curIndex,
                })
            }, 1000)

            keyPersonmyChart.on("mouseover", function (param) {
                clearInterval(timer)
                keyPersonmyChart.dispatchAction({
                    type: "downplay",
                    seriesIndex: 0,
                    dataIndex: curIndex,
                })
                keyPersonmyChart.dispatchAction({
                    type: "highlight",
                    seriesIndex: 0,
                    dataIndex: param.dataIndex,
                })
                keyPersonmyChart.dispatchAction({
                    type: "showTip",
                    seriesIndex: 0,
                    dataIndex: curIndex,
                })
                curIndex = param.dataIndex
            })

            keyPersonmyChart.on("mouseout", function (param) {
                curIndex = param.dataIndex
                if (timer) {
                    clearInterval(timer)
                }
                timer = setInterval(() => {
                    keyPersonmyChart.dispatchAction({
                        type: "downplay",
                        seriesIndex: 0,
                        dataIndex: curIndex,
                    })
                    curIndex = (curIndex + 1) % keyPeopleDataLength
                    keyPersonmyChart.dispatchAction({
                        type: "highlight",
                        seriesIndex: 0,
                        dataIndex: curIndex,
                    })
                    keyPersonmyChart.dispatchAction({
                        type: "showTip",
                        seriesIndex: 0,
                        dataIndex: curIndex,
                    })
                }, 1000)
            })
        },

        /**
         * @description: 获取首页的所有数据
         * @return {*}
@@ -825,7 +899,7 @@
            keyPersonmyChart = this.$echarts.init(chartDom)

            let personInfo = await this.getPersonInfo()

            keyPeopleDataLength = personInfo.length
            if (this.userInfo.dept_id == '1596020515064381442') {
                personInfo = [{ count: 8, name: '征地拆迁群体', value: 8 }, { count: 4, name: '非涉法涉诉重点个访人员', value: 4 }, { count: 4, name: '涉法涉诉重点个访人员', value: 4 }, { count: 1, name: '楼盘业主维权群体', value: 1 }]
            }
@@ -833,6 +907,13 @@
            keyPersonmyChart.setOption(this.initkeyPersonOption(personInfo))

            this.clickkeyPersonChart()
            if (personInfo.length > 1) {
                this.keyPeopleEchartsCarousel()
            } else {
                clearInterval(timer)
                keyPersonmyChart.off("mouseover")
                keyPersonmyChart.off("mouseout")
            }
            setTimeout(() => {
                this.personEchartsLoading = false
            }, 500)
@@ -871,7 +952,7 @@
            if (dataArr.length == 0) {
                options = {
                    title: {
                        text: '暂无数据1',
                        text: '暂无重点人员数据',
                        x: 'center',
                        y: 'center',
                        textStyle: {
@@ -892,12 +973,12 @@
                            } else {
                                msg = params.value + '人'
                            }

                            msg = `<div style="color: #000;">${params.marker} ${params.name}：<strong style="margin-left:10px">${msg}</strong></div>`
                            msg = `<div style="color: #FFF;">${params.marker} ${params.name}：<strong style="margin-left:10px">${msg}</strong></div>`
                            return msg
                        },
                        backgroundColor: "rgba(8, 56, 185, 0.9)",
                        borderColor: "rgba(8, 56, 185, 0.9)",
                        textStyle: {
                            color: '#fff',
                            fontSize: fontSize(12)
                        },
                        confine: true

 src/views/home/components/rightContainer.vue

@@ -828,7 +828,7 @@
            }
        },

        // 饼图轮播
        // 设备饼图轮播
        equipmentEchartsCarousel () {
            let curIndex = 0
            if (timer) {

 vue.config.js

@@ -161,8 +161,8 @@
        proxy: {
            "/api": {
                // target用于配置你允许访问数据的计算机名称，即是你的api接口的服务器地址
                target: "http://localhost:82",
                // target: "http://192.168.0.100:82",
                // target: "http://localhost:82",
                target: "http://192.168.0.100:82",
                // target: "http://17.20.10.3:82",
                // target: "http://10.141.11.11:8081/api",
                // ws: true, //启用webSocket6566