重点人员饼图tooltip轮播

guanqb

2023-04-04 bb572714dc0aef40891c542ec28dcbc2219b2e70

重点人员饼图tooltip轮播

 src/views/home/components/bottomContainer.vue

@@ -57,7 +57,7 @@
                </ul>

                <!-- <vue-seamless-scroll v-if="policeSituationRealtimeArr.length > 0" :data="policeSituationRealtimeArr"
                            class="warp" :class-option="classOption"> -->
                                class="warp" :class-option="classOption"> -->
                <div v-if="policeSituationRealtimeArr.length > 0" :data="policeSituationRealtimeArr" class="warp"
                    :class-option="classOption">
                    <el-carousel indicator-position="none" direction="vertical" @change="changeAlarm">
@@ -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">
@@ -160,7 +160,7 @@
export default {
    inject: ["getWidth", 'userInfo'],

    data() {
    data () {
        return {
            alarmPageCount: 1,
            alarmPageSize: 6,
@@ -182,7 +182,7 @@
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                    onClick (picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
@@ -190,7 +190,7 @@
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                    onClick (picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
@@ -198,7 +198,7 @@
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                    onClick (picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
@@ -223,7 +223,7 @@
    //     vueSeamlessScroll
    // },

    created() {
    created () {
        this.getHomeAllData()

        this.defaultDate()
@@ -231,7 +231,7 @@
        // disabledDate 为true表示不可选,false表示可选
        this.pickerOptions = {
            ...this.pickerOptions,
            disabledDate(time) {
            disabledDate (time) {
                // 设置可选择的日期为今天之后的一个月内
                let curDate = (new Date()).getTime()
                return time.getTime() > curDate
@@ -241,7 +241,7 @@
        window.addEventListener('resize', this.setTableHeight)
    },

    mounted() {
    mounted () {
        if (this.getWidth() > 7000) {
            this.classOption.step = 8
        }
@@ -252,14 +252,14 @@
         * @description: 获取当前组件内所有数据
         * @return {*}
         */
        getHomeAllData(id = '') {
        getHomeAllData (id = '') {
            this.policeStaionID = id

            this.historyTabClick(0)
        },

        // 获取table高度
        setTableHeight() {
        setTableHeight () {
            this.$nextTick(() => {
                if (this.$refs.ElTableBox && this.$refs.ElPagination) {
                    this.currentTableHeight = this.$refs.ElTableBox.offsetHeight - this.$refs.ElPagination.offsetHeight
@@ -268,7 +268,7 @@
        },

        // table行点击事件
        rowClick(row) {
        rowClick (row) {
            this.policeSituationClick(row)
        },

@@ -295,10 +295,10 @@
            }

        },
        


        // 设置默认时间
        defaultDate() {
        defaultDate () {
            var current = new Date()

            var seven = new Date(current.getTime() - 7 * 24 * 60 * 60 * 1000)
@@ -307,7 +307,7 @@
        },

        // 时间改变事件
        datePickerChange(e) {
        datePickerChange (e) {
            // this.timetype
            this.currentPage = 1

@@ -331,7 +331,7 @@
        },

        // 获取当前日期
        dateFormat(dateData) {
        dateFormat (dateData) {
            var date = new Date(dateData)
            var y = date.getFullYear()
            var m = date.getMonth() + 1
@@ -343,31 +343,31 @@
        },

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

        // 获取实时接警记录
        getAnswerPolices() {
        getAnswerPolices () {

            getAnswerPolices({ deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id }).then(res => {
                this.policeSituationRealtimeArr = []

                if (res.data && res.data.length) {
                     // 计算页数
                    this.alarmPageCount = Math.ceil(res.data.length/this.alarmPageSize)
                    // 计算页数
                    this.alarmPageCount = Math.ceil(res.data.length / this.alarmPageSize)
                    this.policeSituationRealtimeAllArr = res.data.map((item, index) => {
                        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 = []
                }
                

                this.$emit('policeSituationChange')
            })

@@ -458,7 +458,7 @@
            // this.policeSituationRealtimeAllArr = arr.map((item, index) => {
            //     return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB, position: item.ZDDWYZB ? '有' : '无' }
            // })
            

            // // 数据处理
            // this.alarmDataHanlder(1);
            // this.$emit('policeSituationChange')
@@ -468,21 +468,21 @@
         * 实时警情数据处理（滚动）
         * @param {*} index 
         */
        alarmDataHanlder(index){
        alarmDataHanlder (index) {
            this.policeSituationRealtimeArr = []
            //计算序号
            var start =  (index-1)*this.alarmPageSize
            var end =  index*this.alarmPageSize
            var start = (index - 1) * this.alarmPageSize
            var end = index * this.alarmPageSize
            // 获取第 index 页数据
            this.policeSituationRealtimeAllArr.forEach((item, index) => {
                if(index<Number(end) && index>=Number(start)){
                if (index < Number(end) && index >= Number(start)) {
                    this.policeSituationRealtimeArr.push(item)
                }
            })
        },

        // 获取历史接警记录
        getAlarmList(params) {
        getAlarmList (params) {
            getAlarmList({ ...params, size: this.pagesize, jjdwbh: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id }).then(res => {
                this.pagesCount = res.data.data.pages

@@ -589,7 +589,7 @@
        },

        // 周月选择
        timeTabClick(type) {
        timeTabClick (type) {
            this.timetype = type

            this.currentPage = 1
@@ -616,7 +616,7 @@
        },

        // 实时历史选择
        async historyTabClick(type) {
        async historyTabClick (type) {
            console.log('historyTabClick')
            this.historytype = type

@@ -651,16 +651,16 @@

        },

        chooseRealData() {
        chooseRealData () {
            return this.policeSituationRealtimeArr
        },

        chooseTimeDate() {
        chooseTimeDate () {
            return this.policeSituationHistoryArr
        },

        // 列表行选择
        handleSelectClick(e) {
        handleSelectClick (e) {
            let element
            for (let i = 0; i < e.path.length; i++) {
                if (e.path[i].className == "row") {
@@ -675,7 +675,7 @@
        },

        // 点击定位或者显示弹窗
        policeSituationClick(item) {
        policeSituationClick (item) {
            if (item.ZDDWXZB && item.ZDDWXZB != 0 && item.ZDDWYZB && item.ZDDWYZB != 0) {
                this.$EventBus.$emit('toPosition', {
                    layerName: 'policeSituationyLayers',
@@ -708,7 +708,7 @@
        }
    },

    destroyed() {
    destroyed () {
        window.removeEventListener('resize', this.setTableHeight)

        if (alarmTiming != null) {

 src/views/home/components/leftContainer.vue

@@ -41,10 +41,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" />
@@ -54,10 +54,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>
@@ -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