1
guanqb
2024-01-20 f13afcb61276061871b30bce17a7877287df0b67
src/views/home/components/rightContainer.vue
@@ -6,13 +6,33 @@
                    <div>值班信息(当日)</div>
                </div>
                <div class="duty-information-box">
                <div class="duty-information-box" v-show="!showMJL">
                    <div v-for="item in schedulingList" :key="item.id">
                        <div>
                            <span>{{ item.type }}</span>
                        </div>
                        <div>
                            <span>{{ item.person }}</span>
                        </div>
                    </div>
                    <div v-if="schedulingList.length == 0" class="no-zb-data">暂无值班数据</div>
                </div>
                <div class="duty-information-box" v-show="showMJL">
                    <div>
                        <div>
                            <span>值班</span>
                        </div>
                        <div>
                            <span>徐星逸,任圣日,娄永攀,蔡善龙,陈小强,刘开勇,梅祥,吕镇,付建冬</span>
                        </div>
                    </div>
                    <div>
                        <div>
                            <span>副班、巡逻</span>
                        </div>
                        <div>
                            <span>章正椿,夏文翔,叶江明,黄俊龙,苏茯林,王顺祥</span>
                        </div>
                    </div>
                    <div v-if="schedulingList.length == 0" class="no-zb-data">暂无值班数据</div>
@@ -45,7 +65,10 @@
                            <div class="tab-title-small">警情变化趋势</div>
                        </div>
                        <div class="tab" :class="{ 'select-on-tab': caseInfoType == 1 }" @click="initEventChangeEcharts(1)">
                            <div class="tab-title-small">警情排行</div>
                            <div class="tab-title-small">社区警情排行</div>
                        </div>
                        <div class="tab" :class="{ 'select-on-tab': caseInfoType == 2 }" @click="initEventChangeEcharts(2)">
                            <div class="tab-title-small">辖区警情排行</div>
                        </div>
                    </div>
                    <div id="EventChangeEcharts" class="echarts-box"></div>
@@ -141,7 +164,7 @@
import { getSchedulingList, getSchedulingDeptList } from "@/api/home/index.js"
import { fontSize } from "@/utils/fontSize.js"
import { getCaseAll, getCaseRanking, getEquipment } from "@/api/home/index.js"
import { getCaseAll, getCaseRanking, getCaseRankingArea, getEquipment } from "@/api/home/index.js"
const timeEvents = []
@@ -199,6 +222,7 @@
            schedulingList: [],
            schedulingDeptList: [1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6],
            policeStaionID: "",
            showMJL: false,
            originTitle: ['值班', '副班、巡逻'],
            transTitle: [{ label: '人员', width: '28%', align: 'center' }, { label: '人员', width: '', align: 'left' },],
            caseInfoType: 0
@@ -280,25 +304,62 @@
        getSchedulingList () {
            this.schedulingLoading = true
            const params = {
                sameday: 1,
                isPage: 1
            }
            getSchedulingList(params).then((res) => {
                this.schedulingList = res.data.data
            })
            setTimeout(() => {
            if (this.userInfo.dept_id == "1596020515064381442") {
                this.schedulingNoDataText = '  '
                this.schedulingLoading = false
                if (!this.schedulingList.length) {
                    setTimeout(() => {
                        this.schedulingNoDataText = '暂无值班数据'
                    }, 200)
                const data = [
                    {
                        person:
                            "徐星逸,任圣日,娄永攀,蔡善龙,陈小强,刘开勇,梅祥,吕镇,付建冬",
                        patrol: "章正椿,夏文翔,叶江明,黄俊龙,苏茯林,王顺祥",
                    }
                ]
                const matrixData = data.map((row) => {
                    let arr = []
                    for (let key in row) {
                        arr.push(row[key])
                    }
                    return arr
                })
                setTimeout(() => {
                    this.schedulingList = matrixData[0].map((col, i) => {
                        return [this.originTitle[i], ...matrixData.map((row) => {
                            return row[i]
                        })]
                    })
                    this.schedulingLoading = false
                }, 1000)
                this.$nextTick(() => {
                    this.tableHeight =
                        this.$refs.Container.offsetHeight -
                        this.$refs.caseBox.offsetHeight -
                        this.$refs.crowdBox.offsetHeight -
                        this.$refs.alertBoxTitle.offsetHeight
                })
                this.showMJL = true
            } else {
                const params = {
                    sameday: 1,
                    isPage: 1
                }
            }, 500)
                this.showMJL = false
                getSchedulingList(params).then((res) => {
                    this.schedulingList = res.data.data
                })
                setTimeout(() => {
                    this.schedulingNoDataText = '  '
                    this.schedulingLoading = false
                    if (!this.schedulingList.length) {
                        setTimeout(() => {
                            this.schedulingNoDataText = '暂无值班数据'
                        }, 200)
                    }
                }, 500)
            }
        },
        echartsResize () {
@@ -315,18 +376,14 @@
            })
            eventchangemychart.clear()
            const optionsData = await this.getCaseAll(date[0], date[1])
            eventchangemychart.showLoading({
                text: '拼命加载中',
                color: '#c23531',
                textColor: '#FFF',
                maskColor: 'rgba(0, 0, 0, 0.2)',
                zlevel: 0,
            })
            setTimeout(() => {
                eventchangemychart.hideLoading()
                eventchangemychart.setOption(this.initEventChangeOption(optionsData.xData, optionsData.yDataList))
            }, 500)
            if (this.caseInfoType == 0) {
                this.getCaseAll(date[0], date[1])
            } else if (this.caseInfoType == 1) {
                this.getCaseRanking(date[0], date[1])
            } else {
                this.getCaseRankingArea(date[0], date[1])
            }
        },
        // 设置默认时间
@@ -431,7 +488,7 @@
            })
        },
        // 获取警情排行统计值
        // 获取警情社区排行统计值
        getCaseRanking (start, end) {
            getCaseRanking(
                start,
@@ -441,8 +498,8 @@
                let data = []
                if (res.data.data) {
                    res.data.data = res.data.data.sort((a, b) => a.value - b.value)
                    res.data.data = res.data.data.map((item, index) => {
                    res.data.data = res.data.data.sort((a, b) => b.value - a.value)
                    res.data.data = res.data.data.filter((item, index) => index < 8).map((item, index) => {
                        item.value = item.count
                        if (index == 0) {
@@ -466,7 +523,55 @@
                        return item
                    }).sort((a, b) => b.value - a.value)
                    console.log(res.data.data, 465)
                    data = res.data.data
                } else {
                    data = []
                }
                eventchangemychart.setOption(this.initRankingOption(data))
                setTimeout(() => {
                    this.eventChangeEchartsLoading = false
                }, 500)
            })
        },
        // 获取警情辖区排行统计值
        getCaseRankingArea (start, end) {
            getCaseRankingArea(
                start,
                end,
                this.policeStaionID != "" ? this.policeStaionID : this.userInfo.dept_id
            ).then((res) => {
                let data = []
                if (res.data.data) {
                    res.data.data = res.data.data.sort((a, b) => b.num - a.num)
                    res.data.data = res.data.data.filter((item) => {
                        return 'num' in item && 'police_station_name' in item
                    }).filter((item, index) => index < 8).map((item, index) => {
                        item.value = item.num
                        item.name = item.police_station_name
                        if (index == 0) {
                            item.itemStyle = {
                                color: '#EB3C5A'
                            }
                        } else if (index == 1) {
                            item.itemStyle = {
                                color: '#FA8331'
                            }
                        } else if (index == 2) {
                            item.itemStyle = {
                                color: '#F7B833'
                            }
                        } else {
                            item.itemStyle = {
                                color: '#395FFD'
                            }
                        }
                        return item
                    })
                    data = res.data.data
                } else {
@@ -506,10 +611,11 @@
            if (type == 0) {
                this.getCaseAll(date[0], date[1])
            } else {
            } else if (type == 1) {
                this.getCaseRanking(date[0], date[1])
            } else {
                this.getCaseRankingArea(date[0], date[1])
            }
        },
        // 警情数量统计的options
@@ -691,9 +797,13 @@
                    return { value: item.value, itemStyle: item.itemStyle }
                })
                let xData = dataArr.map((item) => {
                    let name = item.name.substring(0, 6) + '…'
                    if (item.name.length > 5) {
                        let name = item.name.substring(0, 6) + '…'
                    return name
                        return name
                    } else {
                        return item.name
                    }
                })
                option = {
                    tooltip: {
@@ -805,7 +915,7 @@
                    ],
                    grid: {
                        top: "3%",
                        left: "-20%",
                        left: "-14%",
                        right: "2%",
                        bottom: "3%",
                        containLabel: true,
@@ -819,14 +929,14 @@
        // 现有设备统计
        getEquipment () {
            const typeData = {
                carCount: "车辆",
                carCount: "警车",
                monitorCount: "摄像头",
                phoneCount: "执法记录仪",
                recorderCount: "手台",
            }
            const typeIndexData = {
                车辆: 0,
                警车: 0,
                摄像头: 1,
                手台: 2,
                执法记录仪: 3,