index.vue

<template lang='pug'>
    el-container(style="padding:0px;" :style="{height:currentHeight-65+'px'}")
        el-aside( width="18vw" v-loading="leftLoading" style="z-index:1000;")
            div.left_aside(style="height:auto")
                el-header.left_header 报警统计
                el-main.left_main
                    div.left_main_body(v-for="item in eventList")
                        div.left_col_header {{item.systemName}}
                        el-row.row_style
                            el-col(:span="8")
                                div(style="color:#F56C6C;font-size:18px;font-weight:400;font-family:Microsoft YaHei;") {{item.oneCount}}
                                div(style="font-size:12px;color:#656565;font-family:Microsoft YaHei;font-weight:400;") 特别重大
                            el-col(:span="8")
                                div(style="color:#E6A23C;font-size:18px;font-weight:400;font-family:Microsoft YaHei;")  {{item.twoCount}}
                                div(style="font-size:12px;color:#656565;font-family:Microsoft YaHei;font-weight:400;") 重大
                            el-col(:span="8")
                                div(style="color:#409EFF;font-size:18px;font-weight:400;font-family:Microsoft YaHei;")  {{item.threeCount}}
                                div(style="font-size:12px;color:#656565;font-family:Microsoft YaHei;font-weight:400;") 一般
            div.left_aside(style="height:auto;margin-bottom:0px;")
                el-header.left_header 等级分布
                div(id="myCharts" style="height:232px;background:#ffffff")
                    //ve-pie.untreated_canvas(:data="chartData" :extend="chartExtend" legend-position="bottom" width="260px"  height="350px"  )
        el-main(style="padding:0px;z-index:1001;" :style="{height:currentHeight-45+'px'}" class="alarms-untreated-main")
            el-tabs(v-model="activeName" type="border-card" @tab-click="handleClick")
                el-tab-pane(label="全部" name="0")
                    query-list(v-if="activeName == 0" ref="queryList")
                el-tab-pane(label="视频监控系统" name="438c30d3d7f241b573f22a1a36c60485")
                    query-list(v-if="activeName == '438c30d3d7f241b573f22a1a36c60485'" ref="queryList")
                el-tab-pane(label="出入口控制系统" name="ed401f7d9291b508d411d8192b016c6e")
                    query-list(v-if="activeName == 'ed401f7d9291b508d411d8192b016c6e'" ref="queryList")
                el-tab-pane(label="入侵报警系统" name="75c7c11716713edfd2ce3581f5e7c193")
                    query-list(v-if="activeName == '75c7c11716713edfd2ce3581f5e7c193'" ref="queryList")
                el-tab-pane(label="安全检查及探测系统" name="3a64b86b1a5dead8ff9d2ad913744e50")
                    query-list(v-if="activeName == '3a64b86b1a5dead8ff9d2ad913744e50'" ref="queryList")
</template>
<script>
    import QueryList from '../untreated/query-list'
    export default {
        computed: {
            currentHeight() {
            return this.$store.state.d2admin.currentHeight.height
            }
        },
        data() {
            return {
                leftLoading: false,
                activeName: '0',
                eventList: [],
                chartData: null
            }
        },
        components: {
            QueryList
        },
        created() {
            this.eventList = []
            this.$nextTick(() => {
                this.$refs.queryList.init('0')
            })
            this.getGroupList()
        },
        methods: {
            groupInit() {
                let dom = document.getElementById('myCharts')
                if (!dom) return
                let myCharts = this.$echarts.init(dom)
                let option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'horizontal',
                        bottom: 10,
                        data: ['特别重大', '重大', '一般']
                    },
                    series: [
                        {
                            bottom: 30,
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                formatter: (element) => {
                                    //自定义文字
                                    //return element.name + '：' + element.value + '(' + element.percent + '%)'
                                    return element.percent + '%'
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        //自定义颜色
                                        let colorList = [
                                            '#F56C6C', '#E6A23C', '#409EFF'
                                        ]
                                        return colorList[params.dataIndex]
                                    }
                                }
                            },
                            labelLine: {
                                show: true
                            },
                            data: this.chartData
                        }
                    ]
                }
                myCharts.setOption(option)
            },
            //获取按报警等级统计信息
            getGroupList() {
                this.leftLoading = true
                this.$http({
                    url: this.$http.adornUrlAlarm(`/alarmsInfo/queryGroupUntreated`),
                    method: 'get',
                    params: this.$http.adornParams({
                        stationId: localStorage.getItem('stationId')
                    })
                }).then(data => {
                    this.leftLoading = false
                    if (data && data.code === 0) {
                        this.eventList = data.list
                        let oneCount, twoCount, threeCount
                        oneCount = twoCount = threeCount = 0
                        for (let i in this.eventList) {
                            oneCount += this.eventList[i].oneCount
                            twoCount += this.eventList[i].twoCount
                            threeCount += this.eventList[i].threeCount
                        }

                        this.chartData = [
                            { value: oneCount, name: '特别重大' },
                            { value: twoCount, name: '重大' },
                            { value: threeCount, name: '一般' }
                        ]
                        this.groupInit()
                    }
                })
            },
            handleClick(tab, event) {
                this.$nextTick(() => {
                    this.$refs.queryList.init(this.activeName)
                })
            }
        }
    }
</script>
<style lang='scss' scoped>
    .left_aside {
        margin-bottom: 10px;
        border: 1px #DCDFE6 solid;
        background: #f4f4f4;
        box-shadow: 2px 0px 8px 0px rgba(0, 0, 0, 0.2);
    }

    .left_header {
        line-height: 40px;
        height: 40px !important;
        background-color: #E1EDF4;
        border-bottom: 1px #E4E7ED solid;
        font-size:16px;
        font-family:Microsoft YaHei;
        font-weight:bold;
    }

    .left_main {
        padding: 0rem 1rem 1rem 1rem;
        overflow: hidden;
        background: #FFFFFF;
    }

    .left_main_char {
        /*padding:0rem 1rem 1rem 1rem;*/
        /*overflow: hidden;*/
        background: #FFFFFF;
        /*height: 300px;*/
        .untreated_canvas {
            margin: 0 auto;
            /*transform: translateY(-80px);*/
            top: -80px

        }
    }

    .left_main_body {
        margin-top: 1rem;
        border: 1px #D1D1D1 solid;
        /*height:120px;*/
        background: #fff;
    }

    .left_col_header {
        background-color: #E1EDF4;
        height: 30px;
        line-height: 30px;
        color: #000000;
        text-align: center;
        font-size:15px;
        font-family:Adobe Heiti Std;
        font-weight:bold;
    }

    .row_style {
        line-height: 24px;
        text-align: center;
        /*height:60px;*/
        /*padding:3px;*/
    }

    .alarms-untreated-main > .el-tabs {
        box-shadow: none;
        border: none;
    }

    .alarms-untreated-main > .el-tabs > .el-tabs__content {
        padding: 0 !important;
        margin-top: 10px;
    }

    .el-tanle th {
        background: #EEF8FF !important
    }

    .el-tabs__nav-scroll {
        height: 42px;
        /*padding-top: 10px;*/
        /*padding-left: 10px;*/
        line-height:42px;
        background: #f4f4f4;
        border-bottom: 1px solid rgba(196, 196, 196, 1);
        .el-tabs__item {
            border-top-color: #DCDFE6 !important;
        }
    }

</style>