首页活动图标数据联动

guanqb

2022-10-31 1ec151d4f05f040ffe05c56732ee853b476b3b8a

 src/views/home/components/rightContainer.vue

@@ -57,6 +57,9 @@
let equipmentmyChart
let eventchangemychart

import historyArr from '@/assets/data/activitysData/history.js'
import underwayArr from '@/assets/data/activitysData/underway.js'

export default {
    data () {
        return {
@@ -91,134 +94,8 @@
            regionTotal: 0,
            acttype: 0,
            timetype: 0,
            underwayArr: [
                { 'activityName': '进行活动01', 'startTime': '2022-10-01', 'endTime': '2022-10-02', 'scale': '1000', 'policeStationName': '车站派出所' },
                { 'activityName': '进行活动02', 'startTime': '2022-10-03', 'endTime': '2022-10-04', 'scale': '1000', 'policeStationName': '沙溪派出所' },
                { 'activityName': '进行活动03', 'startTime': '2022-10-05', 'endTime': '2022-10-06', 'scale': '1000', 'policeStationName': '灵溪派出所' },
                { 'activityName': '进行活动04', 'startTime': '2022-10-07', 'endTime': '2022-10-08', 'scale': '1000', 'policeStationName': '北门派出所' },
                { 'activityName': '进行活动05', 'startTime': '2022-10-09', 'endTime': '2022-10-10', 'scale': '1000', 'policeStationName': '江光派出所' },
                { 'activityName': '进行活动06', 'startTime': '2022-10-01', 'endTime': '2022-10-02', 'scale': '1000', 'policeStationName': '车站派出所' },
                { 'activityName': '进行活动07', 'startTime': '2022-10-03', 'endTime': '2022-10-04', 'scale': '1000', 'policeStationName': '沙溪派出所' },
                { 'activityName': '进行活动08', 'startTime': '2022-10-05', 'endTime': '2022-10-06', 'scale': '1000', 'policeStationName': '灵溪派出所' },
                { 'activityName': '进行活动09', 'startTime': '2022-10-07', 'endTime': '2022-10-08', 'scale': '1000', 'policeStationName': '北门派出所' },
                { 'activityName': '进行活动10', 'startTime': '2022-10-09', 'endTime': '2022-10-10', 'scale': '1000', 'policeStationName': '江光派出所' },
                { 'activityName': '进行活动11', 'startTime': '2022-10-01', 'endTime': '2022-10-02', 'scale': '1000', 'policeStationName': '车站派出所' },
                { 'activityName': '进行活动12', 'startTime': '2022-10-03', 'endTime': '2022-10-04', 'scale': '1000', 'policeStationName': '沙溪派出所' },
                { 'activityName': '进行活动13', 'startTime': '2022-10-05', 'endTime': '2022-10-06', 'scale': '1000', 'policeStationName': '灵溪派出所' },
                { 'activityName': '进行活动14', 'startTime': '2022-10-07', 'endTime': '2022-10-08', 'scale': '1000', 'policeStationName': '北门派出所' },
                { 'activityName': '进行活动15', 'startTime': '2022-10-09', 'endTime': '2022-10-10', 'scale': '1000', 'policeStationName': '江光派出所' },
                { 'activityName': '进行活动16', 'startTime': '2022-10-01', 'endTime': '2022-10-02', 'scale': '1000', 'policeStationName': '车站派出所' },
                { 'activityName': '进行活动17', 'startTime': '2022-10-03', 'endTime': '2022-10-04', 'scale': '1000', 'policeStationName': '沙溪派出所' },
                { 'activityName': '进行活动18', 'startTime': '2022-10-05', 'endTime': '2022-10-06', 'scale': '1000', 'policeStationName': '灵溪派出所' },
                { 'activityName': '进行活动19', 'startTime': '2022-10-07', 'endTime': '2022-10-08', 'scale': '1000', 'policeStationName': '北门派出所' },
                { 'activityName': '进行活动20', 'startTime': '2022-10-09', 'endTime': '2022-10-10', 'scale': '1000', 'policeStationName': '江光派出所' },
                { 'activityName': '进行活动21', 'startTime': '2022-10-01', 'endTime': '2022-10-02', 'scale': '1000', 'policeStationName': '车站派出所' },
                { 'activityName': '进行活动22', 'startTime': '2022-10-03', 'endTime': '2022-10-04', 'scale': '1000', 'policeStationName': '沙溪派出所' },
                { 'activityName': '进行活动23', 'startTime': '2022-10-05', 'endTime': '2022-10-06', 'scale': '1000', 'policeStationName': '灵溪派出所' },
                { 'activityName': '进行活动24', 'startTime': '2022-10-07', 'endTime': '2022-10-08', 'scale': '1000', 'policeStationName': '北门派出所' },
                { 'activityName': '进行活动25', 'startTime': '2022-10-09', 'endTime': '2022-10-10', 'scale': '1000', 'policeStationName': '江光派出所' },
                { 'activityName': '进行活动26', 'startTime': '2022-10-01', 'endTime': '2022-10-02', 'scale': '1000', 'policeStationName': '车站派出所' },
                { 'activityName': '进行活动27', 'startTime': '2022-10-03', 'endTime': '2022-10-04', 'scale': '1000', 'policeStationName': '沙溪派出所' },
                { 'activityName': '进行活动28', 'startTime': '2022-10-05', 'endTime': '2022-10-06', 'scale': '1000', 'policeStationName': '灵溪派出所' },
                { 'activityName': '进行活动29', 'startTime': '2022-10-07', 'endTime': '2022-10-08', 'scale': '1000', 'policeStationName': '北门派出所' },
                { 'activityName': '进行活动30', 'startTime': '2022-10-09', 'endTime': '2022-10-10', 'scale': '1000', 'policeStationName': '江光派出所' },
            ],
            historyArr: [
                { 'activityName': '历史活动01', 'startTime': '2021-10-01', 'endTime': '2021-10-02', 'scale': '2000', 'policeStationName': '车站派出所' },
                { 'activityName': '历史活动02', 'startTime': '2021-10-03', 'endTime': '2021-10-04', 'scale': '2000', 'policeStationName': '沙溪派出所' },
                { 'activityName': '历史活动03', 'startTime': '2021-10-05', 'endTime': '2021-10-06', 'scale': '2000', 'policeStationName': '灵溪派出所' },
                { 'activityName': '历史活动04', 'startTime': '2021-10-07', 'endTime': '2021-10-08', 'scale': '2000', 'policeStationName': '北门派出所' },
                { 'activityName': '历史活动05', 'startTime': '2021-10-09', 'endTime': '2021-10-10', 'scale': '2000', 'policeStationName': '江光派出所' },
                { 'activityName': '历史活动06', 'startTime': '2021-10-01', 'endTime': '2021-10-02', 'scale': '2000', 'policeStationName': '车站派出所' },
                { 'activityName': '历史活动07', 'startTime': '2021-10-03', 'endTime': '2021-10-04', 'scale': '2000', 'policeStationName': '沙溪派出所' },
                { 'activityName': '历史活动08', 'startTime': '2021-10-05', 'endTime': '2021-10-06', 'scale': '2000', 'policeStationName': '灵溪派出所' },
                { 'activityName': '历史活动09', 'startTime': '2021-10-07', 'endTime': '2021-10-08', 'scale': '2000', 'policeStationName': '北门派出所' },
                { 'activityName': '历史活动10', 'startTime': '2021-10-09', 'endTime': '2021-10-10', 'scale': '2000', 'policeStationName': '江光派出所' },
                { 'activityName': '历史活动11', 'startTime': '2021-10-01', 'endTime': '2021-10-02', 'scale': '2000', 'policeStationName': '车站派出所' },
                { 'activityName': '历史活动12', 'startTime': '2021-10-03', 'endTime': '2021-10-04', 'scale': '2000', 'policeStationName': '沙溪派出所' },
                { 'activityName': '历史活动13', 'startTime': '2021-10-05', 'endTime': '2021-10-06', 'scale': '2000', 'policeStationName': '灵溪派出所' },
                { 'activityName': '历史活动14', 'startTime': '2021-10-07', 'endTime': '2021-10-08', 'scale': '2000', 'policeStationName': '北门派出所' },
                { 'activityName': '历史活动15', 'startTime': '2021-10-09', 'endTime': '2021-10-10', 'scale': '2000', 'policeStationName': '江光派出所' },
                { 'activityName': '历史活动16', 'startTime': '2021-10-01', 'endTime': '2021-10-02', 'scale': '2000', 'policeStationName': '车站派出所' },
                { 'activityName': '历史活动17', 'startTime': '2021-10-03', 'endTime': '2021-10-04', 'scale': '2000', 'policeStationName': '沙溪派出所' },
                { 'activityName': '历史活动18', 'startTime': '2021-10-05', 'endTime': '2021-10-06', 'scale': '2000', 'policeStationName': '灵溪派出所' },
                { 'activityName': '历史活动19', 'startTime': '2021-10-07', 'endTime': '2021-10-08', 'scale': '2000', 'policeStationName': '北门派出所' },
                { 'activityName': '历史活动20', 'startTime': '2021-10-09', 'endTime': '2021-10-10', 'scale': '2000', 'policeStationName': '江光派出所' },
                { 'activityName': '历史活动21', 'startTime': '2021-10-01', 'endTime': '2021-10-02', 'scale': '2000', 'policeStationName': '车站派出所' },
                { 'activityName': '历史活动22', 'startTime': '2021-10-03', 'endTime': '2021-10-04', 'scale': '2000', 'policeStationName': '沙溪派出所' },
                { 'activityName': '历史活动23', 'startTime': '2021-10-05', 'endTime': '2021-10-06', 'scale': '2000', 'policeStationName': '灵溪派出所' },
                { 'activityName': '历史活动24', 'startTime': '2021-10-07', 'endTime': '2021-10-08', 'scale': '2000', 'policeStationName': '北门派出所' },
                { 'activityName': '历史活动25', 'startTime': '2021-10-09', 'endTime': '2021-10-10', 'scale': '2000', 'policeStationName': '江光派出所' },
                { 'activityName': '历史活动26', 'startTime': '2021-10-01', 'endTime': '2021-10-02', 'scale': '2000', 'policeStationName': '车站派出所' },
                { 'activityName': '历史活动27', 'startTime': '2021-10-03', 'endTime': '2021-10-04', 'scale': '2000', 'policeStationName': '沙溪派出所' },
                { 'activityName': '历史活动28', 'startTime': '2021-10-05', 'endTime': '2021-10-06', 'scale': '2000', 'policeStationName': '灵溪派出所' },
                { 'activityName': '历史活动29', 'startTime': '2021-10-07', 'endTime': '2021-10-08', 'scale': '2000', 'policeStationName': '北门派出所' },
                { 'activityName': '历史活动30', 'startTime': '2021-10-09', 'endTime': '2021-10-10', 'scale': '2000', 'policeStationName': '江光派出所' },
            ],
            underwaySaveArr: [
                { 'activityName': '进行活动01', 'startTime': '2022-10-01', 'endTime': '2022-10-02', 'scale': '1000', 'policeStationName': '车站派出所' },
                { 'activityName': '进行活动02', 'startTime': '2022-10-03', 'endTime': '2022-10-04', 'scale': '1000', 'policeStationName': '沙溪派出所' },
                { 'activityName': '进行活动03', 'startTime': '2022-10-05', 'endTime': '2022-10-06', 'scale': '1000', 'policeStationName': '灵溪派出所' },
                { 'activityName': '进行活动04', 'startTime': '2022-10-07', 'endTime': '2022-10-08', 'scale': '1000', 'policeStationName': '北门派出所' },
                { 'activityName': '进行活动05', 'startTime': '2022-10-09', 'endTime': '2022-10-10', 'scale': '1000', 'policeStationName': '江光派出所' },
                { 'activityName': '进行活动06', 'startTime': '2022-10-01', 'endTime': '2022-10-02', 'scale': '1000', 'policeStationName': '车站派出所' },
                { 'activityName': '进行活动07', 'startTime': '2022-10-03', 'endTime': '2022-10-04', 'scale': '1000', 'policeStationName': '沙溪派出所' },
                { 'activityName': '进行活动08', 'startTime': '2022-10-05', 'endTime': '2022-10-06', 'scale': '1000', 'policeStationName': '灵溪派出所' },
                { 'activityName': '进行活动09', 'startTime': '2022-10-07', 'endTime': '2022-10-08', 'scale': '1000', 'policeStationName': '北门派出所' },
                { 'activityName': '进行活动10', 'startTime': '2022-10-09', 'endTime': '2022-10-10', 'scale': '1000', 'policeStationName': '江光派出所' },
                { 'activityName': '进行活动11', 'startTime': '2022-10-01', 'endTime': '2022-10-02', 'scale': '1000', 'policeStationName': '车站派出所' },
                { 'activityName': '进行活动12', 'startTime': '2022-10-03', 'endTime': '2022-10-04', 'scale': '1000', 'policeStationName': '沙溪派出所' },
                { 'activityName': '进行活动13', 'startTime': '2022-10-05', 'endTime': '2022-10-06', 'scale': '1000', 'policeStationName': '灵溪派出所' },
                { 'activityName': '进行活动14', 'startTime': '2022-10-07', 'endTime': '2022-10-08', 'scale': '1000', 'policeStationName': '北门派出所' },
                { 'activityName': '进行活动15', 'startTime': '2022-10-09', 'endTime': '2022-10-10', 'scale': '1000', 'policeStationName': '江光派出所' },
                { 'activityName': '进行活动16', 'startTime': '2022-10-01', 'endTime': '2022-10-02', 'scale': '1000', 'policeStationName': '车站派出所' },
                { 'activityName': '进行活动17', 'startTime': '2022-10-03', 'endTime': '2022-10-04', 'scale': '1000', 'policeStationName': '沙溪派出所' },
                { 'activityName': '进行活动18', 'startTime': '2022-10-05', 'endTime': '2022-10-06', 'scale': '1000', 'policeStationName': '灵溪派出所' },
                { 'activityName': '进行活动19', 'startTime': '2022-10-07', 'endTime': '2022-10-08', 'scale': '1000', 'policeStationName': '北门派出所' },
                { 'activityName': '进行活动20', 'startTime': '2022-10-09', 'endTime': '2022-10-10', 'scale': '1000', 'policeStationName': '江光派出所' },
                { 'activityName': '进行活动21', 'startTime': '2022-10-01', 'endTime': '2022-10-02', 'scale': '1000', 'policeStationName': '车站派出所' },
                { 'activityName': '进行活动22', 'startTime': '2022-10-03', 'endTime': '2022-10-04', 'scale': '1000', 'policeStationName': '沙溪派出所' },
                { 'activityName': '进行活动23', 'startTime': '2022-10-05', 'endTime': '2022-10-06', 'scale': '1000', 'policeStationName': '灵溪派出所' },
                { 'activityName': '进行活动24', 'startTime': '2022-10-07', 'endTime': '2022-10-08', 'scale': '1000', 'policeStationName': '北门派出所' },
                { 'activityName': '进行活动25', 'startTime': '2022-10-09', 'endTime': '2022-10-10', 'scale': '1000', 'policeStationName': '江光派出所' },
                { 'activityName': '进行活动26', 'startTime': '2022-10-01', 'endTime': '2022-10-02', 'scale': '1000', 'policeStationName': '车站派出所' },
                { 'activityName': '进行活动27', 'startTime': '2022-10-03', 'endTime': '2022-10-04', 'scale': '1000', 'policeStationName': '沙溪派出所' },
                { 'activityName': '进行活动28', 'startTime': '2022-10-05', 'endTime': '2022-10-06', 'scale': '1000', 'policeStationName': '灵溪派出所' },
                { 'activityName': '进行活动29', 'startTime': '2022-10-07', 'endTime': '2022-10-08', 'scale': '1000', 'policeStationName': '北门派出所' },
                { 'activityName': '进行活动30', 'startTime': '2022-10-09', 'endTime': '2022-10-10', 'scale': '1000', 'policeStationName': '江光派出所' },
            ],
            historySaveArr: [
                { 'activityName': '历史活动01', 'startTime': '2021-10-01', 'endTime': '2021-10-02', 'scale': '2000', 'policeStationName': '车站派出所' },
                { 'activityName': '历史活动02', 'startTime': '2021-10-03', 'endTime': '2021-10-04', 'scale': '2000', 'policeStationName': '沙溪派出所' },
                { 'activityName': '历史活动03', 'startTime': '2021-10-05', 'endTime': '2021-10-06', 'scale': '2000', 'policeStationName': '灵溪派出所' },
                { 'activityName': '历史活动04', 'startTime': '2021-10-07', 'endTime': '2021-10-08', 'scale': '2000', 'policeStationName': '北门派出所' },
                { 'activityName': '历史活动05', 'startTime': '2021-10-09', 'endTime': '2021-10-10', 'scale': '2000', 'policeStationName': '江光派出所' },
                { 'activityName': '历史活动06', 'startTime': '2021-10-01', 'endTime': '2021-10-02', 'scale': '2000', 'policeStationName': '车站派出所' },
                { 'activityName': '历史活动07', 'startTime': '2021-10-03', 'endTime': '2021-10-04', 'scale': '2000', 'policeStationName': '沙溪派出所' },
                { 'activityName': '历史活动08', 'startTime': '2021-10-05', 'endTime': '2021-10-06', 'scale': '2000', 'policeStationName': '灵溪派出所' },
                { 'activityName': '历史活动09', 'startTime': '2021-10-07', 'endTime': '2021-10-08', 'scale': '2000', 'policeStationName': '北门派出所' },
                { 'activityName': '历史活动10', 'startTime': '2021-10-09', 'endTime': '2021-10-10', 'scale': '2000', 'policeStationName': '江光派出所' },
                { 'activityName': '历史活动11', 'startTime': '2021-10-01', 'endTime': '2021-10-02', 'scale': '2000', 'policeStationName': '车站派出所' },
                { 'activityName': '历史活动12', 'startTime': '2021-10-03', 'endTime': '2021-10-04', 'scale': '2000', 'policeStationName': '沙溪派出所' },
                { 'activityName': '历史活动13', 'startTime': '2021-10-05', 'endTime': '2021-10-06', 'scale': '2000', 'policeStationName': '灵溪派出所' },
                { 'activityName': '历史活动14', 'startTime': '2021-10-07', 'endTime': '2021-10-08', 'scale': '2000', 'policeStationName': '北门派出所' },
                { 'activityName': '历史活动15', 'startTime': '2021-10-09', 'endTime': '2021-10-10', 'scale': '2000', 'policeStationName': '江光派出所' },
                { 'activityName': '历史活动16', 'startTime': '2021-10-01', 'endTime': '2021-10-02', 'scale': '2000', 'policeStationName': '车站派出所' },
                { 'activityName': '历史活动17', 'startTime': '2021-10-03', 'endTime': '2021-10-04', 'scale': '2000', 'policeStationName': '沙溪派出所' },
                { 'activityName': '历史活动18', 'startTime': '2021-10-05', 'endTime': '2021-10-06', 'scale': '2000', 'policeStationName': '灵溪派出所' },
                { 'activityName': '历史活动19', 'startTime': '2021-10-07', 'endTime': '2021-10-08', 'scale': '2000', 'policeStationName': '北门派出所' },
                { 'activityName': '历史活动20', 'startTime': '2021-10-09', 'endTime': '2021-10-10', 'scale': '2000', 'policeStationName': '江光派出所' },
                { 'activityName': '历史活动21', 'startTime': '2021-10-01', 'endTime': '2021-10-02', 'scale': '2000', 'policeStationName': '车站派出所' },
                { 'activityName': '历史活动22', 'startTime': '2021-10-03', 'endTime': '2021-10-04', 'scale': '2000', 'policeStationName': '沙溪派出所' },
                { 'activityName': '历史活动23', 'startTime': '2021-10-05', 'endTime': '2021-10-06', 'scale': '2000', 'policeStationName': '灵溪派出所' },
                { 'activityName': '历史活动24', 'startTime': '2021-10-07', 'endTime': '2021-10-08', 'scale': '2000', 'policeStationName': '北门派出所' },
                { 'activityName': '历史活动25', 'startTime': '2021-10-09', 'endTime': '2021-10-10', 'scale': '2000', 'policeStationName': '江光派出所' },
                { 'activityName': '历史活动26', 'startTime': '2021-10-01', 'endTime': '2021-10-02', 'scale': '2000', 'policeStationName': '车站派出所' },
                { 'activityName': '历史活动27', 'startTime': '2021-10-03', 'endTime': '2021-10-04', 'scale': '2000', 'policeStationName': '沙溪派出所' },
                { 'activityName': '历史活动28', 'startTime': '2021-10-05', 'endTime': '2021-10-06', 'scale': '2000', 'policeStationName': '灵溪派出所' },
                { 'activityName': '历史活动29', 'startTime': '2021-10-07', 'endTime': '2021-10-08', 'scale': '2000', 'policeStationName': '北门派出所' },
                { 'activityName': '历史活动30', 'startTime': '2021-10-09', 'endTime': '2021-10-10', 'scale': '2000', 'policeStationName': '江光派出所' },
            ],
            underwayArr: [],
            historyArr: [],
            carArr: [
                { 'carID': '#11111', 'carType': '大众', 'policeStation': '车站派出所', 'area': '责任区1' },
                { 'carID': '#22222', 'carType': '宝马', 'policeStation': '车站派出所', 'area': '责任区1' },
@@ -291,11 +168,15 @@
        this.initEquipmentEcharts()
        this.initEventChangeEcharts()
        this.clickEquimentChart()
        this.historyArr = historyArr
        this.underwayArr = underwayArr
    },
    methods: {
        actTabClick (type) {
            this.acttype = type
            this.$refs.activityTable.bodyWrapper.scrollTop = 0
            this.$emit('changeActivityType', type)
            this.$emit('activityChange')
        },

        initEquipmentEcharts () {
@@ -424,21 +305,21 @@
            if (police != '全部') {
                let arr1 = []
                let arr2 = []
                this.underwaySaveArr.some(item => {
                underwayArr.some(item => {
                    if (item.policeStationName == police) {
                        arr1.push(item)
                    }
                })
                this.underwayArr = arr1
                this.historySaveArr.some(item => {
                historyArr.some(item => {
                    if (item.policeStationName == police) {
                        arr2.push(item)
                    }
                })
                this.historyArr = arr2
            } else {
                this.underwayArr = this.underwaySaveArr
                this.historyArr = this.historySaveArr
                this.underwayArr = underwayArr
                this.historyArr = historyArr
            }
            equipmentmyChart.setOption(this.initEquipmentOptions(this.getEquimentChartData(police)), true)
        },
@@ -494,7 +375,7 @@
            ]
            this.regionTotal = phoneCount + monitor + carCount + recorderCount
            return dataArr
        }
        },