1
guanqb
2024-01-20 f13afcb61276061871b30bce17a7877287df0b67
src/views/home/components/rightContainer.vue
@@ -6,35 +6,36 @@
                    <div>值班信息(当日)</div>
                </div>
                <div class="table-box" v-show="!showMJL">
                    <el-table size="small" :height="tableHeight" :data="schedulingList" style="width: 100%"
                        :header-cell-style="{ 'text-align': 'center' }"
                        :cell-style="{ 'text-align': 'center', borderColor: '#324e75' }" :row-class-name="tableRowClassName"
                        empty-text="暂无值班信息">
                        <el-table-column prop="dept" label="值班单位"></el-table-column>
                        <el-table-column prop="person" label="姓名"></el-table-column>
                        <el-table-column prop="contact" label="联系方式"></el-table-column>
                    </el-table>
                    <div class="pointList">
                        <el-tooltip class="item" effect="dark" :content="item.dept" placement="top"
                            v-for="(item, index) in schedulingDeptList" :key="index">
                            <div class="point" @click="getSchedlingList(item)"></div>
                        </el-tooltip>
                <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="table-box" v-show="showMJL">
                    <el-table size="small" :height="tableHeight" :data="schedulingList" style="width: 100%"
                        :show-header="false" :header-cell-style="{ 'text-align': 'center' }"
                        :cell-style="{ 'text-align': 'center', borderColor: '#324e75' }"
                        :row-class-name="tableRowClassName">
                        <el-table-column :show-overflow-tooltip="true" v-for="(item, index) in transTitle" :label="item"
                            :key="index" align="center">
                            <template slot-scope="scope">
                                {{ scope.row[index] }}
                            </template>
                        </el-table-column>
                    </el-table>
                <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>
                </div>
            </div>
@@ -50,14 +51,28 @@
        <div class="alert-box" ref="alertBox ">
            <div class="box">
                <div class="title">
                    案件统计
                    警情统计
                    <div class="timer">
                        <el-date-picker :clearable="false" v-model="eventTime" type="daterange" align="right" unlink-panels
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="caseTimeChange"
                            :picker-options="pickerOptions"></el-date-picker>
                    </div>
                </div>
                <div id="EventChangeEcharts" class="echarts-box"></div>
                <el-main v-loading="eventChangeEchartsLoading" element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                    <div class="sub-tab">
                        <div class="tab" :class="{ 'select-on-tab': caseInfoType == 0 }" @click="initEventChangeEcharts(0)">
                            <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>
                        <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>
                </el-main>
            </div>
            <svg class="border-svg">
@@ -99,14 +114,19 @@
        <div class="crowd-box" ref="crowdBox">
            <div class="box">
                <div class="title">
                    <div>现有设备</div>
                    <div class="title-tab">
                        <span :class="{ choosed: linetype == 0 }" @click="initEquipmentEcharts(0)">设备种类</span>/
                        <span :class="{ choosed: linetype == 1 }" @click="initEquipmentEcharts(1)">设备状态</span>
                <div class="title">现有设备</div>
                <el-main v-loading="equipmentEchartsLoading" element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                    <div class="sub-tab">
                        <div class="tab" :class="{ 'select-on-tab': linetype == 0 }" @click="initEquipmentEcharts(0)">
                            <div class="tab-title-small">设备种类</div>
                        </div>
                        <div class="tab" :class="{ 'select-on-tab': linetype == 1 }" @click="initEquipmentEcharts(1)">
                            <div class="tab-title-small">设备状态</div>
                        </div>
                    </div>
                </div>
                <div style="overflow: hidden" id="EquipmentEcharts" class="echarts-box"></div>
                    <div style="overflow: hidden" id="EquipmentEcharts" class="echarts-box"></div>
                </el-main>
            </div>
            <svg class="border-svg">
@@ -144,7 +164,7 @@
import { getSchedulingList, getSchedulingDeptList } from "@/api/home/index.js"
import { fontSize } from "@/utils/fontSize.js"
import { getCaseAll, getEquipment } from "@/api/home/index.js"
import { getCaseAll, getCaseRanking, getCaseRankingArea, getEquipment } from "@/api/home/index.js"
const timeEvents = []
@@ -153,36 +173,48 @@
    data () {
        return {
            eventTime: [],
            equipmentEchartsLoading: false,
            eventChangeEchartsLoading: false,
            schedulingNoDataText: ' ',
            schedulingLoading: false,
            pickerOptions: {
                shortcuts: [
                    {
                        text: "最近一周",
                        text: '最近一周',
                        onClick (picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                            picker.$emit("pick", [start, end])
                        },
                            picker.$emit('pick', [start, end])
                        }
                    },
                    {
                        text: "最近一个月",
                        text: '最近两周',
                        onClick (picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 14)
                            picker.$emit('pick', [start, end])
                        }
                    },
                    {
                        text: '最近一个月',
                        onClick (picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                            picker.$emit("pick", [start, end])
                        },
                            picker.$emit('pick', [start, end])
                        }
                    },
                    {
                        text: "最近三个月",
                        text: '最近三个月',
                        onClick (picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                            picker.$emit("pick", [start, end])
                        },
                    },
                ],
                            picker.$emit('pick', [start, end])
                        }
                    }]
            },
            regionTotal: 0,
            linetype: 0,
@@ -191,8 +223,9 @@
            schedulingDeptList: [1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6],
            policeStaionID: "",
            showMJL: false,
            originTitle: ['值班人员', '副班、巡逻人员'],
            transTitle: ['', '人员', '人员'],
            originTitle: ['值班', '副班、巡逻'],
            transTitle: [{ label: '人员', width: '28%', align: 'center' }, { label: '人员', width: '', align: 'left' },],
            caseInfoType: 0
        }
    },
@@ -223,7 +256,7 @@
                this.$refs.caseBox.offsetHeight -
                this.$refs.crowdBox.offsetHeight -
                this.$refs.alertBoxTitle.offsetHeight -
                86
                55
        })
    },
@@ -254,7 +287,7 @@
        getHomeAllData (id = "") {
            this.policeStaionID = id
            this.initEventChangeEcharts()
            this.initEventChangeEcharts(this.caseInfoType)
            this.initEquipmentEcharts(this.linetype)
@@ -264,29 +297,21 @@
            }
            rightTiming = setInterval(async () => {
                this.initEventChangeEcharts(this.caseInfoType)
                this.initEquipmentEcharts(this.linetype)
            }, 600000)
        },
        getSchedulingList () {
            console.log(this.userInfo, 4567)
            this.schedulingLoading = true
            if (this.userInfo.dept_id == "1596020515064381442") {
                this.schedulingNoDataText = '  '
                const data = [
                    {
                        person:
                            "徐星逸、任圣日、娄永攀、蔡善龙、陈小强、梅祥、吕镇、刘开勇、付建冬",
                            "徐星逸,任圣日,娄永攀,蔡善龙,陈小强,刘开勇,梅祥,吕镇,付建冬",
                        patrol: "章正椿,夏文翔,叶江明,黄俊龙,苏茯林,王顺祥",
                    },
                    {
                        person:
                            "矢裕忠、戴饶平、余传公、杨敏、苏浩男、周安云、蒋丁岩、陈圣俊、雷智荐",
                        patrol: "潘林彬,刘志祥,李志强,杨俊浩,黄天行,叶子淳",
                    },
                    {
                        person:
                            "齐光华、周静、吕来城、周骏、邓道群、沈强、王岳、魏霄峰、夏添、李道福",
                        patrol: "余梦宝,徐宝盛,李仁豪,付涵,周林,王宗强",
                    },
                    }
                ]
                const matrixData = data.map((row) => {
@@ -296,12 +321,14 @@
                    }
                    return arr
                })
                this.schedulingList = matrixData[0].map((col, i) => {
                    return [this.originTitle[i], ...matrixData.map((row) => {
                        return row[i]
                    })]
                })
                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 =
@@ -315,12 +342,23 @@
            } else {
                const params = {
                    sameday: 1,
                    isPage: 1
                }
                this.showMJL = false
                getSchedulingList(1, 100, params).then((res) => {
                    this.schedulingList = res.data.data.records
                getSchedulingList(params).then((res) => {
                    this.schedulingList = res.data.data
                })
                setTimeout(() => {
                    this.schedulingNoDataText = '  '
                    this.schedulingLoading = false
                    if (!this.schedulingList.length) {
                        setTimeout(() => {
                            this.schedulingNoDataText = '暂无值班数据'
                        }, 200)
                    }
                }, 500)
            }
        },
@@ -331,25 +369,21 @@
                eventchangemychart.resize()
        },
        // 案件统计中时间变化
        // 警情统计中时间变化
        async caseTimeChange (e) {
            const date = e.map((item) => {
                return this.dateFormat(item)
            })
            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.yData))
            }, 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])
            }
        },
        // 设置默认时间
@@ -373,70 +407,225 @@
            return time
        },
        // 获取案件统计值
        // 获取警情统计值
        getCaseAll (start, end) {
            const caseAll = getCaseAll(
            getCaseAll(
                start,
                end,
                this.policeStaionID != "" ? this.policeStaionID : this.userInfo.dept_id
            ).then((res) => {
                if (res.data.length > 0) {
                    return res.data.reduce(
                let obj = {}
                if (res.data.timeList) {
                    console.log(res.data, 1111)
                    let yDataList = {}
                    yDataList.dqList = res.data.dqList.reduce(
                        (previous, current) => {
                            previous.xData.push(current.days)
                            previous.yData.push(current.cout)
                            previous.push(current.count)
                            return previous
                        },
                        { xData: [], yData: [] }
                        []
                    )
                    yDataList.zpList = res.data.zpList.reduce(
                        (previous, current) => {
                            previous.push(current.count)
                            return previous
                        },
                        []
                    )
                    yDataList.jfList = res.data.jfList.reduce(
                        (previous, current) => {
                            previous.push(current.count)
                            return previous
                        },
                        []
                    )
                    yDataList.qtList = res.data.qtList.reduce(
                        (previous, current) => {
                            previous.push(current.count)
                            return previous
                        },
                        []
                    )
                    yDataList.qjList = res.data.qjList.reduce(
                        (previous, current) => {
                            previous.push(current.count)
                            return previous
                        },
                        []
                    )
                    yDataList.sdList = res.data.sdList.reduce(
                        (previous, current) => {
                            previous.push(current.count)
                            return previous
                        },
                        []
                    )
                    yDataList.sduList = res.data.sduList.reduce(
                        (previous, current) => {
                            previous.push(current.count)
                            return previous
                        },
                        []
                    )
                    yDataList.shList = res.data.shList.reduce(
                        (previous, current) => {
                            previous.push(current.count)
                            return previous
                        },
                        []
                    )
                    let xData = res.data.timeList.map(item => item.slice(5, 10))
                    obj = { xData, yDataList }
                } else {
                    return { xData: [], yData: [] }
                    obj = { xData: [], yDataList: {} }
                }
            })
            return caseAll
                eventchangemychart.setOption(this.initEventChangeOption(obj.xData, obj.yDataList))
                setTimeout(() => {
                    this.eventChangeEchartsLoading = false
                }, 500)
            })
        },
        // 初始化案件统计
        async initEventChangeEcharts () {
            var chartDom = document.getElementById("EventChangeEcharts")
        // 获取警情社区排行统计值
        getCaseRanking (start, end) {
            getCaseRanking(
                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.value - a.value)
                    res.data.data = res.data.data.filter((item, index) => index < 8).map((item, index) => {
                        item.value = item.count
                        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
                    }).sort((a, b) => b.value - a.value)
                    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 {
                    data = []
                }
                eventchangemychart.setOption(this.initRankingOption(data))
                setTimeout(() => {
                    this.eventChangeEchartsLoading = false
                }, 500)
            })
        },
        // 初始化警情数量统计
        async initEventChangeEcharts (type) {
            this.caseInfoType = type
            this.eventChangeEchartsLoading = true
            if (
                eventchangemychart != null &&
                eventchangemychart != "" &&
                eventchangemychart != undefined
            )
            ) {
                eventchangemychart.clear()
                eventchangemychart.dispose()
            }
            var chartDom = document.getElementById("EventChangeEcharts")
            eventchangemychart = this.$echarts.init(chartDom)
            const date = this.eventTime.map((item) => {
                return this.dateFormat(item)
            })
            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.yData))
            }, 500)
            if (type == 0) {
                this.getCaseAll(date[0], date[1])
            } else if (type == 1) {
                this.getCaseRanking(date[0], date[1])
            } else {
                this.getCaseRankingArea(date[0], date[1])
            }
        },
        // 案件统计的options
        initEventChangeOption (xData, yData) {
        // 警情数量统计的options
        initEventChangeOption (xData, yDataList) {
            let option
            if (xData.length == 0) {
                //暂无数据
                option = {
                    title: {
                        text: "暂无案件数据",
                        text: "暂无警情数据",
                        x: "center",
                        y: "center",
                        textStyle: {
@@ -448,6 +637,7 @@
                }
            } else {
                option = {
                    color: ['#5470C6', '#73C0DE', '#EE6666', '#FAC858'],
                    tooltip: {
                        trigger: "item",
                        formatter:
@@ -465,6 +655,12 @@
                                color: "#fff",
                            },
                        },
                    },
                    legend: {
                        data: ['盗窃', '涉诈', '纠纷', '其他', '求助', '涉毒', '涉赌', '涉黄'],
                        textStyle: {
                            color: "#fff"
                        }
                    },
                    yAxis: {
                        type: "value",
@@ -486,44 +682,88 @@
                    },
                    series: [
                        {
                            data: yData,
                            name: '盗窃',
                            data: yDataList.dqList,
                            type: "line",
                            smooth: true,
                            areaStyle: {
                                normal: {
                                    //渐变色
                                    color: new this.$echarts.graphic.LinearGradient(
                                        0,
                                        0,
                                        0,
                                        1,
                                        [
                                            {
                                                //波形图渐变色样式
                                                offset: 0,
                                                color: "rgba(3, 108, 255, 0.7)",
                                            },
                                            {
                                                offset: 0.8,
                                                color: "rgba(3, 108, 255, 0.1)",
                                            },
                                        ],
                                        false
                                    ),
                                },
                            },
                            itemStyle: {
                                normal: {
                                    color: "red", //改变折线点的颜色
                                    lineStyle: {
                                        color: "rgba(3, 108, 255, 1)", //改变折线颜色
                                    },
                                },
                            },
                            // areaStyle: {
                            //     normal: {
                            //         //渐变色
                            //         color: new this.$echarts.graphic.LinearGradient(
                            //             0,
                            //             0,
                            //             0,
                            //             1,
                            //             [
                            //                 {
                            //                     //波形图渐变色样式
                            //                     offset: 0,
                            //                     color: "rgba(3, 108, 255, 0.7)",
                            //                 },
                            //                 {
                            //                     offset: 0.8,
                            //                     color: "rgba(3, 108, 255, 0.1)",
                            //                 },
                            //             ],
                            //             false
                            //         ),
                            //     },
                            // },
                            // itemStyle: {
                            //     normal: {
                            //         color: "red", //改变折线点的颜色
                            //         lineStyle: {
                            //             color: "rgba(3, 108, 255, 1)", //改变折线颜色
                            //         },
                            //     },
                            // },
                        },
                        {
                            name: '涉诈',
                            data: yDataList.zpList,
                            type: "line",
                            smooth: true,
                        },
                        {
                            name: '纠纷',
                            data: yDataList.jfList,
                            type: "line",
                            smooth: true,
                        },
                        {
                            name: '其他',
                            data: yDataList.qtList,
                            type: "line",
                            smooth: true,
                        },
                        {
                            name: '求助',
                            data: yDataList.qjList,
                            type: "line",
                            smooth: true,
                        },
                        {
                            name: '涉毒',
                            data: yDataList.sduList,
                            type: "line",
                            smooth: true,
                        },
                        {
                            name: '涉赌',
                            data: yDataList.sdList,
                            type: "line",
                            smooth: true,
                        },
                        {
                            name: '涉黄',
                            data: yDataList.shList,
                            type: "line",
                            smooth: true,
                        }
                    ],
                    grid: {
                        top: "4%",
                        top: "24%",
                        left: "3%",
                        right: "2%",
                        bottom: "4%",
@@ -535,17 +775,168 @@
            return option
        },
        // 警情排行统计的options
        initRankingOption (dataArr) {
            let option
            if (dataArr.length == 0) {
                //暂无数据
                option = {
                    title: {
                        text: "暂无警情排行数据",
                        x: "center",
                        y: "center",
                        textStyle: {
                            color: "#fff",
                            fontSize: fontSize(14),
                            fontWeight: "normal",
                        },
                    },
                }
            } else {
                let seriesData = dataArr.map(item => {
                    return { value: item.value, itemStyle: item.itemStyle }
                })
                let xData = dataArr.map((item) => {
                    if (item.name.length > 5) {
                        let name = item.name.substring(0, 6) + '…'
                        return name
                    } else {
                        return item.name
                    }
                })
                option = {
                    tooltip: {
                        trigger: "item",
                        confine: true,
                        formatter:
                            ' <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> {b0}<strong style="margin-left:10px;color:#5c7bd9">{c0}起</strong>',
                    },
                    xAxis: {
                        type: "value",
                        splitLine: { show: false },
                        axisLabel: { show: false },
                        axisTick: { show: false },
                        axisLine: { show: false }
                    },
                    yAxis: [
                        {
                            type: "category",
                            inverse: true,
                            axisLine: { show: false },
                            axisTick: { show: false },
                            data: dataArr.map(item => item.name),
                            axisLabel: {
                                rich: {
                                    nt1: {
                                        color: "#fff",
                                        backgroundColor: '#EB3B5A',
                                        width: fontSize(12),
                                        height: fontSize(12),
                                        fontSize: fontSize(10),
                                        align: "center",
                                        borderRadius: fontSize(50),
                                        padding: [0, 1, 2, 1]
                                    },
                                    nt2: {
                                        color: "#fff",
                                        backgroundColor: '#FA8231',
                                        width: fontSize(12),
                                        height: fontSize(12),
                                        fontSize: fontSize(10),
                                        align: "center",
                                        borderRadius: fontSize(50),
                                        padding: [0, 1, 2, 1]
                                    },
                                    nt3: {
                                        color: "#fff",
                                        backgroundColor: '#F7B731',
                                        width: fontSize(12),
                                        height: fontSize(12),
                                        fontSize: fontSize(10),
                                        align: "center",
                                        borderRadius: fontSize(50),
                                        padding: [0, 1, 2, 1]
                                    },
                                    nt: {
                                        color: "#fff",
                                        backgroundColor: '#00a9c8',
                                        width: fontSize(12),
                                        height: fontSize(12),
                                        fontSize: fontSize(10),
                                        align: "center",
                                        borderRadius: fontSize(50),
                                        padding: [0, 1, 2, 1]
                                    }
                                },
                                formatter: function (value, index) {
                                    let idx = index + 1
                                    if (idx <= 3) {
                                        return ["{nt" + idx + "|" + idx + "}"].join("\n")
                                    } else {
                                        return ["{nt|" + idx + "}"].join("\n")
                                    }
                                }
                            }
                        },
                        {//名称
                            type: 'category',
                            offset: -10,
                            position: "left",
                            axisLine: { show: false },
                            axisTick: { show: false },
                            axisLabel: {
                                color: '#fff',
                                align: "left",
                                verticalAlign: "bottom",
                                lineHeight: fontSize(24),
                                fontSize: fontSize(10)
                            },
                            data: xData.reverse(),
                        },
                    ],
                    series: [
                        {
                            zlevel: 1,
                            type: "bar",
                            barWidth: fontSize(10),
                            data: seriesData,
                            itemStyle: {
                                normal: {
                                    barBorderRadius: fontSize(5)
                                }
                            },
                            label: {
                                show: true,
                                fontSize: fontSize(10),
                                color: "#fff"
                            }
                        }
                    ],
                    grid: {
                        top: "3%",
                        left: "-14%",
                        right: "2%",
                        bottom: "3%",
                        containLabel: true,
                    }
                }
            }
            return option
        },
        // 现有设备统计
        getEquipment () {
            const typeData = {
                carCount: "车辆",
                carCount: "警车",
                monitorCount: "摄像头",
                phoneCount: "执法记录仪",
                recorderCount: "手台",
            }
            const typeIndexData = {
                车辆: 0,
                警车: 0,
                摄像头: 1,
                手台: 2,
                执法记录仪: 3,
@@ -553,8 +944,8 @@
            let data = []
            this.regionTotal = 0
            const dataAll = getEquipment(
            let dataAll = null
            dataAll = getEquipment(
                this.policeStaionID != "" ? this.policeStaionID : this.userInfo.dept_id
            ).then((res) => {
                if (this.linetype == 0) {
@@ -611,6 +1002,8 @@
                    return data
                }
            }).catch(res => {
                dataAll = '请求错误'
            })
            return dataAll
@@ -619,6 +1012,7 @@
        // 现有设备饼图初始化
        async initEquipmentEcharts (type) {
            this.linetype = type
            this.equipmentEchartsLoading = true
            if (
                equipmentmyChart != null &&
@@ -634,24 +1028,18 @@
            const data = await this.getEquipment()
            if (data == '请求错误') {
                setTimeout(() => {
                    this.equipmentEchartsLoading = false
                }, 500)
            }
            const newData = data.filter((item) => {
                if (item.value != 0) {
                    return item
                }
            })
            equipmentmyChart.showLoading({
                text: '拼命加载中',
                color: '#c23531',
                textColor: '#FFF',
                maskColor: 'rgba(0, 0, 0, 0.2)',
                zlevel: 0,
            })
            setTimeout(() => {
                equipmentmyChart.hideLoading()
                equipmentmyChart.setOption(this.initEquipmentOptions(newData))
            }, 500)
            equipmentmyChart.setOption(this.initEquipmentOptions(newData))
            this.clickEquimentChart()
@@ -662,6 +1050,9 @@
                equipmentmyChart.off("mouseover")
                equipmentmyChart.off("mouseout")
            }
            setTimeout(() => {
                this.equipmentEchartsLoading = false
            }, 500)
        },
        // 现有设备options饼图数据
@@ -816,7 +1207,7 @@
            }
        },
        // 饼图轮播
        // 设备饼图轮播
        equipmentEchartsCarousel () {
            let curIndex = 0
            if (timer) {
@@ -956,6 +1347,10 @@
        //     margin-left: 8px;
        // }
        :deep(.el-main) {
            padding: 0;
        }
        .box {
            display: flex;
            position: absolute;
@@ -1016,16 +1411,25 @@
        .sub-tab {
            padding: 10px;
            display: flex;
            color: #99cccc;
            .tab {
                display: flex;
                justify-content: center;
                margin: 0 10px;
                flex: 1;
                background: $sub-tab-bg-color;
                border-radius: 8px;
                cursor: pointer;
                height: 22px;
                display: flex;
                align-items: center;
                justify-content: center;
                &>div {
                    height: 26px;
                    line-height: 26px;
                    height: 22px;
                    line-height: 22px;
                    white-space: nowrap;
                }
            }
        }
@@ -1033,6 +1437,8 @@
        .echarts-box {
            padding: 12px;
            flex: 1;
            // height: 100%;
            // width: 100%;
        }
        .table-box {
@@ -1043,7 +1449,7 @@
                width: 100%;
                display: flex;
                justify-content: space-evenly;
                margin-top: 15px;
                margin-top: -10px;
                .point {
                    width: 12px;
@@ -1053,6 +1459,75 @@
                    cursor: pointer;
                }
            }
            :deep(.el-table) {
                .cell {
                    // white-space: pre-line;
                    white-space: pre-wrap;
                    height: 100% !important;
                    line-height: 3.2 !important;
                }
                .el-table__body-wrapper {
                    height: 100% !important;
                    overflow: hidden;
                    .el-table__body {
                        width: 100% !important;
                        height: 100% !important;
                        tbody {
                            width: 100% !important;
                            height: 100% !important;
                            td {
                                flex: 1;
                            }
                        }
                    }
                }
            }
        }
        .duty-information-box {
            height: 100%;
            &>div:first-child {
                background: $table-body-tr-n-color;
            }
            &>div:last-child {
                background: $table-body-tr-2n-color;
            }
            &>div {
                display: flex;
                height: 50%;
                &>div {
                    display: flex;
                    align-items: center;
                }
                &>div:first-child {
                    width: 28%;
                    justify-content: center;
                }
                &>div:last-child {
                    width: 72%;
                    text-align: left;
                }
            }
            .no-zb-data {
                width: 100%;
                height: 100%;
                background: transparent !important;
                align-items: center;
                display: flex;
                justify-content: center;
            }
        }
        #peopleList {