<template>
    <div class="main" v-cloak>

        <Header/>
        <div class="main_t">
            <div class="main_t_t">
                <i class="main_t_t_l">当前位置：首页 &gt;</i>
                <i>人员违规统计</i>
            </div>
            <div class="main_t_b" id="illegal_chart"></div>
        </div>
        <div class="main_b">
            <!--查询条件-->
            <el-form :model="queryParams" ref="queryParams" class="form-box" :inline="true" style="margin:20px;">
                <el-form-item label="实验室" prop="dangerId" label-width="98px">
                    <el-input
                            maxLength="30"
                            v-model="queryParams.searchValue"
                            placeholder="实验室/房间号"
                    />
                </el-form-item>
                <el-form-item label="违规原因" prop="dangerId" label-width="98px">
                    <el-select v-model="queryParams.violationType" popper-class="select-big-data" placeholder="请选择违规原因">
                        <el-option
                                v-for="item in causeList"
                                :key="item.id"
                                :label="item.violationName"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="日期" prop="dateRange" label-width="68px">
                    <el-date-picker
                            popper-class="select-big-data-time"
                            v-model="dateRange"
                            size="small"
                            style="width: 240px"
                            value-format="yyyy-MM-dd"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label-width="0">
                    <el-button type="primary" @click.native.prevent="handleQuery" native-type="submit">查询</el-button>
                    <el-button @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
            <!--列表-->
            <el-table :data="dataList" style="width: 100%" height="420" :row-class-name="tableRowClassName">
                <el-table-column label="序号" type="index" align="center" width="50"></el-table-column>
                <el-table-column align="center" header-align='center' prop="subName" label="实验室"></el-table-column>
                <el-table-column align="center" header-align='center' prop="typeName" label="安全分类"></el-table-column>
                <el-table-column align="center" header-align='center' prop="classifiedName"
                                 label="安全分级"></el-table-column>
                <el-table-column align="center" header-align='center' prop="content" label="违规原因"></el-table-column>
                <el-table-column align="center" header-align='center' prop="num" label="违规次数"></el-table-column>
            </el-table>
            <pagination :page-sizes="[20, 30, 40, 50]"
                        :total="total"
                        :page.sync="queryParams.page"
                        :limit.sync="queryParams.pageSize"
                        @pagination="getList"
            />
        </div>
    </div>
</template>

<script>
    import {
        departmentsList,
        detailColumnar,
        detailSubList,
        getDictViolation,
        getSubjectDict,
    } from "../../api/http"
    import Header from '@/components/header.vue'
    import {
        examBigViewDetailColumnar,
        examBigViewDetailSubList, examViolationSiteGetListByType,
        laboratoryBigViewSubHazardBarChartCount,
        securityBigViewCheckOptionChartDetails
    } from "@/api";

    export default {
        components: {
            Header
        },
        data() {
            return {
                //查询条件
                param: {
                    pageNum: 1,
                    pageSize: 5
                },
                editForm: {
                    pageNum: 1,
                    pageSize: 5,
                    deptLevel: '',//这个是登陆后，刘波给你的院校的类型
                    subId: '',//实验室
                    violationType: '',//违规类型
                    beginTimeStr: '',//开始时间
                    endTimeStr: '',//结束时间
                },
                subjectOptions: [],//院系
                causeList: [],//违规原因
                dateRange: [],//时间
                totalNum: 0,
                tableData: [],
                labList: [],//实验室
                endDay: new Date(2019, 11, 0).getDate(),

                queryParams: {
                    page: 1,
                    pageSize: 10,
                    searchValue: '',
                    beginTimeStr: '',
                    endTimeStr: '',
                },
                dataList: [],
                total: 0,
            }
        },
        mounted() {
            this.getList();
            this.examBigViewDetailColumnar();
            this.examViolationSiteGetListByType();


        },
        methods: {
            getList() {
                this.$set(this, 'loading', true);
                let obj = JSON.parse(JSON.stringify(this.queryParams))
                if (this.dateRange[0]) {
                    obj.beginTimeStr = this.dateRange[0]
                    obj.endTimeStr = this.dateRange[1]
                } else {
                    obj.beginTimeStr = "";
                    obj.endTimeStr = "";
                }
                examBigViewDetailSubList(obj).then(response => {
                    this.$set(this, 'loading', false);
                    this.$set(this, 'dataList', response.data.records);
                    this.$set(this, 'total', response.data.total);
                });
            },
            //柱状图
            examBigViewDetailColumnar() {
                let self = this;
                examBigViewDetailColumnar({}).then(response => {
                    let dataY = [];
                    let dataX = [];
                    for(let i=0;i<response.data.length;i++){
                        dataY.push(response.data[i].violationCount);
                        dataX.push(response.data[i].reason)
                    }
                    self.illegalDetailFun(dataY, dataX)
                });
            },
            //违规原因
            examViolationSiteGetListByType() {
                examViolationSiteGetListByType().then(response => {
                    this.causeList = response.data
                });
            },
            //查询按钮
            handleQuery() {
                this.$set(this.queryParams, 'page', 1);
                this.getList();
            },
            //重置按钮
            resetQuery() {
                this.$set(this, 'dateRange', []);
                this.$set(this, 'queryParams', {
                    page: 1,
                    pageSize: 10,
                    searchValue: '',
                });
                this.getList();
            },

            back() {
                this.$router.push('/home')
            },
            tableRowClassName({rowIndex}) {
                if (rowIndex % 2 === 0) {
                    return 'success-row';
                } else {

                    return 'warning-row';
                }
            },
            /*安全隐患详情图表*/
            illegalDetailFun: function (dataY, dataX) {
                let illegalOption = {
                    color: ['#3398DB'],
                    tooltip: {
                        /* trigger: 'axis',
                         axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                             type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                         }*/
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: dataX,
                            axisLabel: {
                                textStyle: {//改变X轴字体颜色
                                    color: '#fff',

                                },
                                formatter: function (value) {
                                    var ret = "";//拼接加\n返回的类目项
                                    var maxLength = 4;//每项显示文字个数
                                    var valLength = value.length;//X轴类目项的文字个数
                                    var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                                    if (rowN > 1)//如果类目项的文字大于5,
                                    {
                                        for (var i = 0; i < rowN; i++) {
                                            var temp = "";//每次截取的字符串
                                            var start = i * maxLength;//开始截取的位置
                                            var end = start + maxLength;//结束截取的位置
                                            //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                                            temp = value.substring(start, end) + "\n";
                                            ret += temp; //凭借最终的字符串
                                        }
                                        return ret;
                                    }
                                    else {
                                        return value;
                                    }
                                }
                            },
                            axisTick: {//去掉X轴刻度
                                show: false,
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    "color": "#486CC2",
                                    width: 2,
                                }
                            },
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',


                            splitLine: {           // 分隔线
                                show: false,        // 默认显示，属性show控制显示与否
                                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                    color: ['#fff'],
                                    width: 1,
                                    type: 'solid',
                                    opacity: 0.15
                                },

                            },
                            axisLabel: {
                                textStyle: {//改变X轴字体颜色
                                    color: '#fff',

                                },
                            },
                            axisTick: {//去掉X轴刻度
                                show: false,
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    "color": "#486CC2",
                                    width: 2,
                                }
                            },

                        }

                    ],
                    series: [
                        {
                            name: '违规统计',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top',
                                    textStyle: {
                                        color: '#fff',
                                    }
                                }
                            },
                            itemStyle: {

                                normal: {
                                    borderRadius: 4,
                                    color: new this.$echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            {offset: 0, color: '#A3ECFF'},

                                            {offset: 1, color: '#05A3CD'}
                                        ]
                                    )
                                },

                            },
                            type: 'bar',
                            barWidth: '34px',
                            data: dataY
                        }
                    ]
                };
                var illegal_chart = this.$echarts.init(document.getElementById('illegal_chart'));
                illegal_chart.setOption(illegalOption);
            }
        },


    }
</script>
<style lang="scss" scoped>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    .main {
        width: 1920px;
        height: 1080px;
        /* background: url("../img/index_bg.png") no-repeat;
         background-size: 100% 100%;*/
        position: relative;
        left: 0;
        top: 0;
        z-index: 50;

        background: #062338;

        .header {
            width: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: 100;
            display: flex;
            justify-content: flex-start;

            .header_l {
                width: 182px;
                height: 44px;
                margin: 10px 0 0 40px;
            }
            .header_c {
                width: 1180px;
                height: 152px;
                margin-left: 136px;
                background: url("~@/assets/image/index_icon2.png") no-repeat;
                background-size: 100% 100%;
                font-size: 30px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                color: #FFFFFF;
                line-height: 30px;
                text-align: center;
                padding-top: 26px;
            }
            .header_r {
                margin-left: 264px;
                width: 82px;
                height: 32px;
                margin-top: 18px;
            }
        }
        .main_t {
            background: rgba(9, 55, 81, 0.6);
            width: 1852px;
            height: 352px;
            position: absolute;
            left: 34px;
            top: 86px;
            z-index: 200;
            .main_t_t {
                margin: 20px 0 0 18px;
                > i {
                    font-size: 16px;
                    font-family: Microsoft YaHei;
                    font-weight: bold;
                    color: #FFFFFF;
                    line-height: 16px;
                }
                > i:nth-of-type(1) {

                }
                > i:nth-of-type(2) {
                    color: #1ED0F8;
                }
            }
            .main_t_b {
                width: 1852px;
                height: 302px;
            }
        }
        .main_b {
            background: rgba(9, 55, 81, 0.6);
            padding: 0 32px;
            width: 1852px;
            height: 582px;
            position: absolute;
            left: 34px;
            top: 468px;
            z-index: 200;
        }
    }
</style>
<style lang="scss">
    li {
        list-style: none
    }

    i, em, b {
        font-style: normal;
        font-weight: 100;
    }

    body {
        margin: 0
    }
</style>
