首页值班合并判断茅家岭

guanqb

2023-06-26 fce42ace6a03256bdf29dfbb7a37e3a4b1d3f088

首页值班合并判断茅家岭

 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>
@@ -202,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
@@ -283,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 () {

 src/views/home/components/rightContainer值班回滚前.vue

New file
@@ -0,0 +1,1507 @@
<template>
    <div class="container" ref="Container">
        <div class="case-box" ref="caseBox">
            <div class="box">
                <div class="title" ref="alertBoxTitle">
                    <div>值班信息(当日)</div>
                </div>

                <div class="duty-information-box">
                    <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>

            <svg class="border-svg">
                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                </use>
            </svg>
        </div>

        <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>
                <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">
                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                </use>
            </svg>
        </div>

        <!-- <div class="alert-box" ref="alertBox">
            <div class="title" ref="alertBoxTitle">
                <div>电子沙盘</div>
                <div class="title-tab">
                    <span :class="{ choosed: acttype == 0 }" @click="actTabClick(0)">正在进行</span>/
                    <span :class="{ choosed: acttype == 1 }" @click="actTabClick(1)">历史活动</span>
                </div>
            </div>
            <div id="peopleList" class="echarts-box">
                <el-table
                    size="small"
                    :height="tableHeight"
                    :data="acttype == 0 ? underwayArr : historyArr"
                    style="width: 100%"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                    :row-class-name="tableRowClassName"
                    ref="activityTable"
                    @row-click="activityRowClick"
                >
                    <el-table-column prop="activityName" label="活动名称"></el-table-column>
                    <el-table-column prop="startTime" label="开始时间"></el-table-column>
                    <el-table-column prop="endTime" label="结束时间"></el-table-column>
                    <el-table-column prop="scale" label="规模"></el-table-column>
                </el-table>
            </div>
        </div>-->

        <div class="crowd-box" ref="crowdBox">
            <div class="box">
                <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 style="overflow: hidden" id="EquipmentEcharts" class="echarts-box"></div>
                </el-main>
            </div>

            <svg class="border-svg">
                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                </use>
            </svg>
        </div>
    </div>
</template>
 
<script>
const oneColor = ["#4caf50", "#2979ff", "#ffd600", "#0d47a1", "#b71c1c"]
const twoColor = [
    "#5470FE",
    "#91cc75",
    "#fac858",
    "#ee6666",
    "#73c0de",
    "#3ba272",
    "#fc8452",
    "#9a60b4",
    "#ea7ccc",
]

let rightTiming = null
let equipmentmyChart = null
let eventchangemychart = null
let timer
let equimentDataLength = 0

import recorderArr from "@/assets/data/equimentsDate/recorder.js"
import { getSchedulingList, getSchedulingDeptList } from "@/api/home/index.js"
import { fontSize } from "@/utils/fontSize.js"

import { getCaseAll, getCaseRanking, getCaseRankingArea, getEquipment } from "@/api/home/index.js"

const timeEvents = []

export default {
    inject: ["userInfo"],
    data () {
        return {
            eventTime: [],
            equipmentEchartsLoading: false,
            eventChangeEchartsLoading: false,
            schedulingNoDataText: ' ',
            schedulingLoading: false,
            pickerOptions: {
                shortcuts: [
                    {
                        text: '最近一周',
                        onClick (picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                            picker.$emit('pick', [start, end])
                        }
                    },
                    {
                        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])
                        }
                    },
                    {
                        text: '最近三个月',
                        onClick (picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                            picker.$emit('pick', [start, end])
                        }
                    }]
            },
            regionTotal: 0,
            linetype: 0,
            tableHeight: 0,
            schedulingList: [],
            schedulingDeptList: [1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6],
            policeStaionID: "",
            originTitle: ['值班', '副班、巡逻'],
            transTitle: [{ label: '人员', width: '28%', align: 'center' }, { label: '人员', width: '', align: 'left' },],
            caseInfoType: 0
        }
    },

    created () {
        this.pickerOptions = {
            ...this.pickerOptions,
            disabledDate (time) {
                // 设置可选择的日期为今天之后的一个月内
                let curDate = new Date().getTime()
                return time.getTime() > curDate
            },
        }

        this.defaultDate()

        this.getSchedulingList()

        this.getSchedulingDeptList()
    },

    mounted () {
        this.getHomeAllData()

        this.$nextTick(() => {
            window.addEventListener("resize", this.echartsResize)
            this.tableHeight =
                this.$refs.Container.offsetHeight -
                this.$refs.caseBox.offsetHeight -
                this.$refs.crowdBox.offsetHeight -
                this.$refs.alertBoxTitle.offsetHeight -
                55
        })
    },

    methods: {
        //获取值班列表信息
        getSchedlingList (item) {
            this.$emit("showschedulingdetail", item.dept, item.dept, "type")
        },

        //获取值班单位信息
        getSchedulingDeptList () {
            getSchedulingDeptList().then((res) => {
                this.schedulingDeptList = res.data.data
            })
        },

        // actTabClick (type) {
        //     this.acttype = type
        //     this.$refs.activityTable.bodyWrapper.scrollTop = 0
        //     this.$emit('changeActivityType', type)
        //     this.$emit('activityChange')
        // },

        /**
         * @description: 获取当前组件内所有数据
         * @return {*}
         */
        getHomeAllData (id = "") {
            this.policeStaionID = id

            this.initEventChangeEcharts(this.caseInfoType)

            this.initEquipmentEcharts(this.linetype)

            if (rightTiming != null) {
                clearInterval(rightTiming)
                rightTiming = null
            }

            rightTiming = setInterval(async () => {
                this.initEventChangeEcharts(this.caseInfoType)
                this.initEquipmentEcharts(this.linetype)
            }, 600000)
        },

        getSchedulingList () {
            this.schedulingLoading = true

            const params = {
                sameday: 1,
                isPage: 1
            }

            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 () {
            equipmentmyChart && equipmentmyChart != null && equipmentmyChart.resize()
            eventchangemychart &&
                eventchangemychart != null &&
                eventchangemychart.resize()
        },

        // 警情统计中时间变化
        async caseTimeChange (e) {
            const date = e.map((item) => {
                return this.dateFormat(item)
            })

            eventchangemychart.clear()

            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])
            }
        },

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

            var seven = new Date(current.getTime() - 7 * 24 * 60 * 60 * 1000)

            this.eventTime = [seven, current] //将值设置给插件绑定的数据
        },

        // 获取当前日期
        dateFormat (dateData) {
            var date = new Date(dateData)
            var y = date.getFullYear()
            var m = date.getMonth() + 1
            m = m < 10 ? "0" + m : m
            var d = date.getDate()
            d = d < 10 ? "0" + d : d
            const time = y + "-" + m + "-" + d
            return time
        },

        // 获取警情统计值
        getCaseAll (start, end) {
            getCaseAll(
                start,
                end,
                this.policeStaionID != "" ? this.policeStaionID : this.userInfo.dept_id
            ).then((res) => {
                let obj = {}
                if (res.data.timeList) {
                    console.log(res.data, 1111)
                    let yDataList = {}
                    yDataList.dqList = res.data.dqList.reduce(
                        (previous, current) => {
                            previous.push(current.count)
                            return previous
                        },
                        []
                    )
                    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 {
                    obj = { xData: [], yDataList: {} }
                }

                eventchangemychart.setOption(this.initEventChangeOption(obj.xData, obj.yDataList))

                setTimeout(() => {
                    this.eventChangeEchartsLoading = false
                }, 500)
            })
        },

        // 获取警情社区排行统计值
        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) => a.value - b.value)
                    res.data.data = res.data.data.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) => a.value - b.value)
                    res.data.data = res.data.data.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
                    }).sort((a, b) => b.value - a.value)

                    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)
            })

            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, yDataList) {
            let option
            if (xData.length == 0) {
                //暂无数据
                option = {
                    title: {
                        text: "暂无警情数据",
                        x: "center",
                        y: "center",
                        textStyle: {
                            color: "#fff",
                            fontSize: fontSize(14),
                            fontWeight: "normal",
                        },
                    },
                }
            } else {
                option = {
                    color: ['#5470C6', '#73C0DE', '#EE6666', '#FAC858'],
                    tooltip: {
                        trigger: "item",
                        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: "category",
                        data: xData,
                        axisLabel: {
                            color: "#fff",
                            fontSize: fontSize(14),
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#fff",
                            },
                        },
                    },
                    legend: {
                        data: ['盗窃', '涉诈', '纠纷', '其他', '求助', '涉毒', '涉赌', '涉黄'],
                        textStyle: {
                            color: "#fff"
                        }
                    },
                    yAxis: {
                        type: "value",

                        minInterval: 1,

                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            color: "#fff",
                            fontSize: fontSize(14),
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#fff",
                            },
                        },
                    },
                    series: [
                        {
                            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)", //改变折线颜色
                            //         },
                            //     },
                            // },
                        },
                        {
                            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: "24%",
                        left: "3%",
                        right: "2%",
                        bottom: "4%",
                        containLabel: true,
                    },
                }
            }

            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: "车辆",
                monitorCount: "摄像头",
                phoneCount: "执法记录仪",
                recorderCount: "手台",
            }

            const typeIndexData = {
                车辆: 0,
                摄像头: 1,
                手台: 2,
                执法记录仪: 3,
            }

            let data = []
            this.regionTotal = 0
            let dataAll = null
            dataAll = getEquipment(
                this.policeStaionID != "" ? this.policeStaionID : this.userInfo.dept_id
            ).then((res) => {
                if (this.linetype == 0) {
                    data = res.data.map((item, index) => {
                        this.regionTotal += item.count

                        return {
                            equimentType: typeIndexData[item.type],
                            name: item.type,
                            value: Number(item.count),
                            working: Number(item.online),
                            fault: Number(item.offline),
                            label: twoColor[index],
                        }
                    })

                    equimentDataLength = data.length

                    return data
                } else {
                    let normalData = {
                        value: 0,
                        name: "在线",
                        color: "#4caf50",
                        online: true,
                        label: { color: oneColor[0] },
                    }
                    let faultData = {
                        value: 0,
                        name: "离线",
                        color: "#ffd600",
                        online: false,
                        label: { color: oneColor[2] },
                    }

                    res.data.forEach((item) => {
                        this.regionTotal = Number(this.regionTotal) + Number(item.count)

                        normalData.value = Number(normalData.value) + Number(item.online)

                        for (let key in typeData) {
                            if (item.type == typeData[key]) {
                                normalData[key] = Number(item.online)
                                faultData[key] = Number(item.offline)
                            }
                        }

                        faultData.value = Number(faultData.value) + Number(item.offline)
                    })

                    data = [normalData, faultData]

                    equimentDataLength = data.length

                    return data
                }
            }).catch(res => {
                dataAll = '请求错误'
            })

            return dataAll
        },

        // 现有设备饼图初始化
        async initEquipmentEcharts (type) {
            this.linetype = type
            this.equipmentEchartsLoading = true

            if (
                equipmentmyChart != null &&
                equipmentmyChart != "" &&
                equipmentmyChart != undefined
            ) {
                equipmentmyChart.dispose()
                equipmentmyChart.off("click")
            }

            var chartDom = document.getElementById("EquipmentEcharts")
            equipmentmyChart = this.$echarts.init(chartDom)

            const data = await this.getEquipment()

            if (data == '请求错误') {
                setTimeout(() => {
                    this.equipmentEchartsLoading = false
                }, 500)
            }
            const newData = data.filter((item) => {
                if (item.value != 0) {
                    return item
                }
            })

            equipmentmyChart.setOption(this.initEquipmentOptions(newData))

            this.clickEquimentChart()

            if (newData.length > 1) {
                this.equipmentEchartsCarousel()
            } else {
                clearInterval(timer)
                equipmentmyChart.off("mouseover")
                equipmentmyChart.off("mouseout")
            }
            setTimeout(() => {
                this.equipmentEchartsLoading = false
            }, 500)
        },

        // 现有设备options饼图数据
        initEquipmentOptions (dataArr) {
            return {
                tooltip: {
                    trigger: "item",
                    confine: true,
                    formatter: function (params) {
                        let tipHtml = ``

                        if (
                            "carCount" in params.data ||
                            "monitorCount" in params.data ||
                            "phoneCount" in params.data ||
                            "recorderCount" in params.data
                        ) {
                            tipHtml = `
                            ${params.marker} 
                            <strong style="color: ${params.color}">${params.data.name} ${params.data.value}台</strong>
                            <br />
                            <strong style="margin-left:10px;color:#5c7bd9">占比：${params.percent}%</strong>
                            <br />
                            <span style="color:#5470c6">警车：${params.data.carCount}台</span>
                            <br />
                            <span style="margin-left:10px;color:#91cc75">摄像头：${params.data.monitorCount}台</span>
                            <br />
                            <span style="margin-left:10px;color:#fac858">执法记录仪：${params.data.phoneCount}台</span>
                            <br />
                            <span style="margin-left:10px;color:#ee6666">手台：${params.data.recorderCount}台</span>
                            `
                        } else {
                            tipHtml = `${params.marker} 
                            <strong style="color: ${params.color}">${params.data.name
                                } ${params.data.value}台</strong>
                            <br />
                            <span style="color:#4caf50">在线：${params.data.working
                                }台</span>
                            <br />
                            <span style="color:#ccc">离线：${params.data.fault
                                }台</span>
                            <br />
                            <span style="margin-left:10px;color:#ccc">设备离线率：${Math.floor(
                                    (params.data.fault /
                                        (params.data.working + params.data.fault)) *
                                    100
                                )}%</span><br />`
                        }
                        return tipHtml
                    },
                    backgroundColor: "rgba(8, 56, 185, 0.9)",
                    borderColor: "rgba(8, 56, 185, 0.9)",
                    textStyle: {
                        fontSize: fontSize(14),
                    },
                },
                graphic: {
                    type: "text",
                    // left: "36.5%",
                    top: "40%",
                    left: "center",
                    style: {
                        text: "设备总数",
                        textAlign: "center",
                        fill: "#fff",
                        fontSize: fontSize(18),
                        fontWeight: 700,
                    },
                },
                title: {
                    text: `${this.regionTotal}`,
                    top: "52%",
                    left: "center",
                    textStyle: {
                        color: "#27D9C8",
                        fontSize: fontSize(20),
                        fontWeight: 700,
                        align: "center",
                    },
                },
                series: [
                    {
                        name: "",
                        type: "pie",
                        radius: ["90%", "136%"],
                        top: "middle",
                        left: "center",
                        data: dataArr,
                        avoidLabelOverlap: false,
                        labelLine: {
                            normal: {
                                length: fontSize(15),
                                lineStyle: {
                                    width: fontSize(3),
                                },
                            },
                        },
                        emphasis: {
                            label: {
                                color: "red",
                                fontSize: fontSize(16),
                            },
                        },
                        label: {
                            formatter: '{b} {c}',
                            color: function (params) {
                                let colorList = []
                                if ("carCount" in params.data) {
                                    colorList = ["#4caf50", "#787878", "#fac858", "#d766ee"]
                                } else {
                                    colorList = [
                                        "#5470FE",
                                        "#91cc75",
                                        "#fac858",
                                        "#ee6666",
                                        "#73c0de",
                                        "#3ba272",
                                        "#fc8452",
                                        "#9a60b4",
                                        "#ea7ccc",
                                    ]
                                }
                                return colorList[params.dataIndex]
                            },
                            fontSize: fontSize(16),
                        },
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    let colorList = []
                                    if ("carCount" in params.data) {
                                        colorList = ["#4caf50", "#787878", "#fac858", "#d766ee"]
                                    } else {
                                        colorList = [
                                            "#5470FE",
                                            "#91cc75",
                                            "#fac858",
                                            "#ee6666",
                                            "#73c0de",
                                            "#3ba272",
                                            "#fc8452",
                                            "#9a60b4",
                                            "#ea7ccc",
                                        ]
                                    }
                                    return colorList[params.dataIndex]
                                },
                            },
                        },
                    },
                ],
            }
        },

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

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

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

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

        // 现有设备的点击事件（显示弹窗表格）
        clickEquimentChart () {
            equipmentmyChart.on("click", (params) => {
                // 设备类型，摄像头弹窗显示，其他弹窗显示，【记录仪列显示，警车列显示，手台列显示】，遍历数组
                if ("equimentType" in params.data) {
                    this.$emit(
                        "showequimentdetail",
                        params.data.name,
                        params.data.equimentType,
                        "type"
                    )
                } else {
                    this.$emit(
                        "showequimentdetail",
                        params.data.name,
                        params.data.online,
                        "online"
                    )
                }
            })
        },
    },

    destroyed () {
        window.removeEventListener("resize", this.echartsResize)

        if (equipmentmyChart) {
            equipmentmyChart.dispose()
            equipmentmyChart = null
        }

        if (eventchangemychart) {
            eventchangemychart.dispose()
            eventchangemychart = null
        }

        if (timer) {
            clearInterval(timer)
            timer = null
        }

        if (rightTiming != null) {
            clearInterval(rightTiming)
            rightTiming = null
        }
    },
}
</script>
 
<style scoped lang="scss">
.container {
    display: flex;
    position: relative;
    height: 100%;
    width: 100%;

    .case-box,
    .alert-box,
    .crowd-box {
        position: relative;
        margin: 8px;
        flex: 1;
        display: flex;
        flex-direction: column;
        // background: $bg-color;

        background-image: url(/img/box/box-bg.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;

        // .title::after {
        //     content: '';
        //     position: absolute;
        //     top: 13px;
        //     left: 6px;
        //     width: 10px;
        //     height: 10px;
        //     border-radius: 50%;
        //     background: #43bafe;
        //     box-shadow: 0px 0px 8px 2px #43bafe;
        //     margin-left: 8px;
        // }

        :deep(.el-main) {
            padding: 0;
        }

        .box {
            display: flex;
            position: absolute;
            flex-direction: column;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 11;
        }

        .title {
            display: flex;
            align-items: center;
            justify-content: space-between;

            padding: 0 18px 0 18px;
            position: relative;

            font-size: 16px;
            font-weight: bold;
            font-style: oblique;
            letter-spacing: 2px;
            color: #fff;
            // background-image: linear-gradient(to right, #2e4aba, #010d3e);

            .title-tab {
                color: #99cccc;

                span {
                    cursor: pointer;
                }

                span.choosed {
                    color: #fff;
                }
            }

            .timer {
                width: 250px;
            }

            .regionTotal {
                color: #fff;
                font-size: 22px;
                font-weight: 700;
                margin-left: 50%;
                letter-spacing: 1px;
            }
        }

        .sub-title {
            display: flex;
            justify-content: space-between;
            height: 36px;
        }

        .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: 22px;
                    line-height: 22px;
                    white-space: nowrap;
                }
            }
        }

        .echarts-box {
            padding: 12px;
            flex: 1;
            // height: 100%;
            // width: 100%;
        }

        .table-box {
            padding: 0 12px;
            flex: 1;

            .pointList {
                width: 100%;
                display: flex;
                justify-content: space-evenly;
                margin-top: -10px;

                .point {
                    width: 12px;
                    height: 12px;
                    border-radius: 50px;
                    background-color: #006699;
                    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 {
            height: 100%;
        }
    }

    .alert-box {
        margin-top: 0;
        margin-bottom: 0;

        .title {
            height: 54px;
            line-height: 54px;
        }

        .echarts-box {
            overflow-x: hidden;
            overflow-y: auto;
        }

        :deep(.el-table__header-wrapper) {
            height: 40px;
        }
    }

    .border-svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
}
</style>