<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="editForm" ref="queryParams" class="form-box" :inline="true" style="margin:20px;">

                <el-form-item label="实验室" prop="dangerId" label-width="98px">
                    <el-select v-model="editForm.subId" popper-class="select-big-data" placeholder="请选择实验室">
                        <el-option
                                v-for="item in labList"
                                :key="item.id"
                                :label="item.name"
                                :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="结束日期"
                            @change="ceshi"
                    ></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="420"   :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="typeName" label="安全分类"></el-table-column>
                <el-table-column align="center" header-align='center' prop="levelName" label="安全分级"></el-table-column>
                <el-table-column align="center" header-align='center' prop="planNum" label="计划执行数"></el-table-column>
                <el-table-column align="center" header-align='center' prop="finishedNum" label="实际执行数"></el-table-column>
                <el-table-column align="center" header-align='center' prop="rateNum" label="执行率" width="420">
                    <template  slot-scope="scope">
                        <el-progress :percentage="Number(scope.row.rateNum)" :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.pageNum"
                    :page-size="editForm.pageSize"
                    layout="total,prev, pager, next"
                    :total="totalNum">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import {chartDetails, departmentsList, getSubjectDict, workCharts} from "../../api/http"
import Header from '@/components/header.vue'
export default {
  components: {
    Header
  },
  data() {
    return {
      editForm:{
        deptLevel:'',//这个是登陆后，刘波给你的院校的类型
        groupDeptId:'',//院系id
        subId:'',//实验室类型
        beginTimeStr:'',//开始时间
        endTimeStr:'',//结束时间
        pageNum:1,
        pageSize:10
      },
      subjectOptions:[],//院系
      labList:[],//实验室
      dateRange:[],//时间
      totalNum:0,
      tableData:[],

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

        return 'warning-row';
      }
    },
    indexMethod(index) {
      return (this.editForm.pageNum - 1) * this.editForm.pageSize + index + 1;
    },
    //请求列表
    getAjaxList:function (){
      let _this=this;
      let obj={
        'subId':this.editForm.subId,
        'type':localStorage.getItem('deptLevel'),
        'pageNum':this.editForm.pageNum,
        'pageSize':this.editForm.pageSize,
        'startTime':this.editForm.beginTimeStr,
        'endTime':this.editForm.endTimeStr,
      }
      //列表
      chartDetails(obj).then((res) =>{
        if(res.code==200){
          let data = res.rows;
          if(data && data.length>0){
            _this.tableData = data;
            _this.totalNum = parseInt(res.total);
          }else{
            _this.tableData = [];
            _this.totalNum = 0;
          }
          console.log(_this.tableData)
        }
      })

    },
    getAjaxData: function () {
      let _this=this;
      //图表
      workCharts().then((res) =>{
        if(res.code==200){
          let dataX= ['product', '计划执行', '实际执行',]
          let dataValue=[];
          let data=res.data;
          dataValue=data
          dataValue.unshift(dataX)

          console.log(dataValue)
          _this.illegalDetailFun(dataValue)

        }
      })
      //查询院系
      departmentsList().then((res) =>{
        if(res.code==200){
          let data=res.data;
          _this.subjectOptions=data
        }
      })
      //查询实验室
      getSubjectDict().then((res) =>{
        if(res.code==200){
          let data=res.data;
          _this.labList=data

        }
      })
    },
    /*查询*/
    onSearch() {

      if(this.dateRange.length>0){
        this.editForm.beginTimeStr = this.dateRange[0];
        this.editForm.endTimeStr = this.dateRange[1];
      }
      this.editForm.pageNum =1;
      this.getAjaxList();
      this.getAjaxData();
    },
    /*重置*/
    resetForm() {

      this.editForm.subId = "";
      this.editForm.groupDeptId = "";
      this.editForm.beginTimeStr = "";
      this.editForm.endTimeStr = "";
      this.dateRange = [];
      this.onSearch();
    },
    handleCurrentChange(val) {
      this.editForm.pageNum = val;
      this.getAjaxList();
    },
    /*安全隐患详情图表*/
     illegalDetailFun:function(dataValue) {
      let illegalOption = {

        color: ['#E47732','#1D67EE',],
        legend: {
          type: 'scroll',

          itemGap:20,
          itemWidth :14,
          textStyle:{
            color:'#fff'
          },
          right: '5%',
          top: '4%',
        },
        tooltip: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        dataset: {
          source:dataValue
          /* source: [
               ['product', '计划执行', '实际执行',],
               ['星期一 - 1月1日', 43.3, 85.8, ],
               ['星期二 - 1月2日', 83.1, 73.4,],
               ['星期三 - 1月4日', 86.4, 65.2, ],
               ['星期四 - 1月4日', 72.4, 53.9, ]
           ]*/
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            textStyle: {//改变X轴字体颜色
              color: '#fff',

            }
          },
          axisTick:{//去掉X轴刻度
            show:false,
          },
          axisLine:{
            lineStyle:{
              color:'#0D1F43',//改变X轴颜色

            }
          },




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

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

          },
          axisTick:{//去掉X轴刻度
            show:false,
          },
          axisLine:{
            show:true,
            lineStyle:{
              color:'#0D1F43',//改变X轴颜色

            }
          },
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          { type: 'bar',barWidth: '10%', itemStyle: { normal: { barBorderRadius: 8}},"label": {
              "normal": {
                "show": true,
                "position": "top",
                fontSize: 14,
                fontWeight: '500',
                color: '#fff',
                padding:[2,2,2,0],
              }
            },},
          { type: 'bar' ,barWidth: '10%', itemStyle: { normal: { barBorderRadius: 8}},"label": {
              "normal": {
                "show": true,
                "position": "top",
                fontSize: 14,
                fontWeight: '500',
                color: '#fff',
                padding:[2,2,2,0],
              }
            },},
        ]
      };
      var illegal_chart = this.$echarts.init(document.getElementById('illegal_chart'));
      illegal_chart.setOption(illegalOption);
}
  },
  mounted() {
    this.getAjaxData()
    this.getAjaxList()
  },


}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<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: 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);
            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: 602px;
            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>
