<template>
    <div class="main">
        <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="admittance_chart"></div>
        </div>
        <div class="main_b">
            <!--查询条件-->
            <el-form :model="editForm" ref="queryParams" class="form-box" :inline="true" style="margin:20px;">
                <el-form-item label="实验室" prop="searchValue" label-width="98px">
                    <el-input
                            maxLength="30"
                            v-model="editForm.searchValue"
                            placeholder="实验室/房间号"
                    />
                </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="onSearch" native-type="submit">查询</el-button>
                    <el-button @click="resetForm('searchForm')">重置</el-button>
                </el-form-item>
            </el-form>
            <!--列表-->
            <el-table :data="tableData" style="width: 100%;" height="430" :row-class-name="tableRowClassName">
                <el-table-column align="center" header-align='center' type="index" :index="indexMethod" label="序号"
                                 width="60"></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="classTypeNames" label="安全分类"></el-table-column>
                <el-table-column align="center" header-align='center' prop="classLevelName" label="安全分级"></el-table-column>
                <el-table-column align="center" header-align='center' prop="applyNum" label="申请准入人数"></el-table-column>
                <el-table-column align="center" header-align='center' prop="approvalNum"
                                 label="准入通过人数"></el-table-column>
                <el-table-column align="center" header-align='center' prop="percent" label="通过率" width="420">
                    <template slot-scope="scope">
                        <el-progress :percentage="Number(scope.row.percent)" :stroke-width="20"></el-progress>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    style="margin-top: 14px"
                    background
                    @current-change="handleCurrentChange"
                    :page-sizes="[10, 20, 30, 40]"
                    :current-page.sync="editForm.page"
                    :page-size="editForm.pageSize"
                    layout="total,prev, pager, next"
                    :total="totalNum">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import {applyListCollege, applyListCollegeColumn, departmentsList, getSubjectDict} from "../../api/http"
    import Header from '@/components/header.vue'

    import { laboratoryBigViewListCollegeApplyColumn,laboratoryBigViewListCollege } from "@/api/index"
    export default {
        components: {
            Header
        },
        data() {
            return {
                logoImg: localStorage.getItem('logoImg'),
                editForm: {
                    searchValue: '',
                    page: 1,
                    pageSize: 10
                },
                subjectOptions: [],//院系
                labList: [],//实验室
                dateRange: [],//时间
                totalNum: 0,
                tableData: [],

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

                    return 'warning-row';
                }
            },
            indexMethod(index) {
                return (this.editForm.page - 1) * this.editForm.pageSize + index + 1;
            },
            //请求列表
            getAjaxList: function () {
                let _this = this;
                let obj = JSON.parse(JSON.stringify(this.editForm))
                if (this.dateRange[0]) {
                    obj.startTime = this.dateRange[0] + 'T00:00:00';
                    obj.endTime = this.dateRange[1] + 'T23:59:59';
                } else {
                    obj.startTime = '';
                    obj.endTime = '';
                }
                laboratoryBigViewListCollege(obj).then((res) => {
                    if (res.code == 200) {
                        let data = res.data.records;
                        if (data && data.length > 0) {
                            _this.tableData = data;
                            _this.totalNum = parseInt(res.data.total);
                        } else {
                            _this.tableData = [];
                            _this.totalNum = 0;
                        }
                    }
                })
            },
            /*查询*/
            onSearch() {

                if (this.dateRange.length > 0) {
                    this.editForm.beginTimeStr = this.dateRange[0];
                    this.editForm.endTimeStr = this.dateRange[1];
                }
                this.editForm.page = 1;
                this.getAjaxList();
            },
            /*重置*/
            resetForm() {
                this.editForm.searchValue = "";
                this.dateRange = [];
                this.onSearch();
            },
            handleCurrentChange(val) {
                this.editForm.page = val;
                this.getAjaxList();
            },
            laboratoryBigViewListCollegeApplyColumn() {
                let self = this;
                laboratoryBigViewListCollegeApplyColumn({}).then((res) =>{
                    if(res.code==200){
                        let illegalX=[];
                        let illegalData=[];
                        let data=res.data.listTg;
                        if(data.length<=0){
                            for (let i = 0; i <4; i++) {
                                illegalX.push('其他')
                                illegalData.push(0)
                            }
                        }else{
                            data.forEach(function (item) {
                                illegalX.push(item.applyMonth)
                                illegalData.push(item.applyNum)
                            })
                        }
                        this.admittanceFun(illegalX,illegalData)
                    }
                })
            },
            /*安全隐患详情图表*/
            admittanceFun: function (dataX, dataY) {
                //const sideData = data.map(item => item + 4.5)//侧边主体高度
                let planOption = {
                    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: '#007EFF'},

                                            {offset: 1, color: '#3FFFEA'}
                                        ]
                                    )
                                },

                            },
                            type: 'bar',
                            barWidth: '34px',
                            data: dataY
                        }
                    ]
                };
                var plan_chart = this.$echarts.init(document.getElementById('admittance_chart'));
                plan_chart.setOption(planOption);
            }
        },
        mounted() {
            this.laboratoryBigViewListCollegeApplyColumn();
            this.getAjaxList()
        },
    }
</script>

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

    .main {
        width: 1920px;
        height: 1080px;
        position: relative;
        left: 0;
        top: 0;
        z-index: 50;

        background: #062338;

        .header {
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
            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);
            /*  background: rgba(9, 55, 81, 0.6px;*/
            width: 1852px;
            /*  height: 352px;*/
            position: absolute;
            left: 34px;
            top: 100px;
            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: 606px;
            position: absolute;
            left: 34px;
            top: 443px;
            z-index: 200;
        }
    }
</style>
<style lang="scss">
    li {
        list-style: none
    }

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

    body {
        margin: 0
    }
</style>
