<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="danger_chart"></div>
    </div>
<!--    <div class="main_btn">
      <i :key="index"  :class='currentIndex==index?"active":""'  v-for="(item,index) in btnList" @click="btnFun(index)">{{item}}</i>
    </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.id" popper-class="select-big-data" placeholder="请选择隐患类型">
            <el-option
                v-for="item in dangerList"
                :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="结束日期"
          ></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="optionName" label="隐患类型"></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="count" 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 Header from '@/components/header.vue'
import {
  securityBigViewCheckOptionChartDetails, securityBigViewCheckOptionCharts, securityCheckOptionList
} from "@/api/index";
export default {
  components: {
    Header
  },
  data() {
    return {
      editForm:{
        deptLevel:'',//这个是登陆后，刘波给你的院校的类型
        schoolDeptId:'',//院系id
        optionId:'',//隐患类型
        subId:'',//实验室类型
        beginTimeStr:'',//开始时间
        endTimeStr:'',//结束时间
        pageNum:1,
        pageSize:10
      },

      subjectOptions:[],//院系
      dangerList:[],//隐患类型
      labList:[],//实验室
      dateRange:[],//时间
      totalNum:0,
      tableData:[],
      btnList:['按隐患类型统计','按实验室统计'],
      currentIndex:0,

      queryParams:{
        page:1,
        pageSize:10,
        id:'',
        searchValue:'',
        startDate:'',
        endDate:'',
      },
      dataList:[],
      total:0,
    }
  },
  mounted() {
    this.getList();
    this.securityCheckOptionList();
    this.securityBigViewCheckOptionCharts();
  },
  methods: {
    getList(){
      this.$set(this,'loading',true);
      let obj = JSON.parse(JSON.stringify(this.queryParams))
      if(this.dateRange[0]){
        obj.startDate = this.dateRange[0]+'T00:00:00'
        obj.endDate = this.dateRange[1]+'T23:59:59'
      }else{
        obj.startDate = "";
        obj.endDate = "";
      }
      securityBigViewCheckOptionChartDetails(obj).then(response => {
        this.$set(this,'loading',false);
        this.$set(this,'dataList',response.data.records);
        this.$set(this,'total',response.data.total);
      });
    },
    //查询按钮
    handleQuery(){
      this.$set(this.queryParams,'page',1);
      this.getList();
    },
    //重置按钮
    resetQuery(){
      this.$set(this,'queryParams',{
        page:1,
        pageSize:10,
        id:'',
        searchValue:'',
        startDate:'',
        endDate:'',
      });
      this.getList();
    },
    securityCheckOptionList(){
      securityCheckOptionList({}).then(response => {
        this.$set(this,'dangerList',response.data);
      });
    },
    securityBigViewCheckOptionCharts(){
      let self=this;
      securityBigViewCheckOptionCharts({}).then(response => {
        //this.$set(this,'dangerList',response.data);
        if(response.code==200){
          let dataX=[];
          let dataCount=[];
          let data=response.data.list;
          for (var i = 0; i < data.length; i++) {
            dataX.push( data[i].optionName)
            dataCount.push(data[i].count)
          }
          self.safetyDetailFun(dataX,dataCount,false)

        }
      });
    },

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

        return 'warning-row';
      }
    },
    /*安全隐患详情图表*/
    safetyDetailFun:function (dataX,dataCount,SlideType) {
      let safetydetailOption = {

        color: ['#3398DB'],
        tooltip : {
          /* trigger: 'axis',
           axisPointer : {            // 坐标轴指示器，坐标轴触发有效
               type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
           }*/
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '8%',
          containLabel: true
        },
        xAxis : [
          {
            type : 'category',
            data : dataX,
            axisLabel: {
              textStyle: {//改变X轴字体颜色
                color: '#fff',

              },
              //设置一行显示几个字,自己设置
              formatter: function (params) {
                var newParamsName = "";
                var paramsNameNumber = params.length;
                var provideNumber = 6;
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                if (paramsNameNumber > provideNumber) {
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = "";
                    var start = p * provideNumber;
                    var end = start + provideNumber;
                    if (p == rowNumber - 1) {
                      tempStr = params.substring(start, paramsNameNumber);
                    } else {
                      tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr;
                  }
                } else {
                  newParamsName = params;
                }
                return newParamsName;
              }
            },
            lineStyle: {
              "color": "#486CC2",
              width:2,
            },
            axisTick: {
              show: false,

            },
            axisLine:{
              lineStyle:{
                color:'#2E4C74',//改变X轴颜色
                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:'#2E4C74',//改变X轴颜色
                width: '2',

              }
            },

          }

        ],
        dataZoom: [
          {
            type: "slider",
            show: SlideType,
            xAxisIndex: [0],
            start: 0,
            end: 50,
            bottom:'-4%',
            textStyle:{
              color:"#ccd7d7"
            }
          },
        ],


        series : [
          {
            name:'安全隐患',
            label: {
              normal: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#fff',
                }
              }
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {offset: 0, color: 'rgba(22, 31, 63, 0.5)'},

                      {offset: 1, color: '#00D1FF'}
                    ]
                )
              },

            },
            type:'bar',
            barWidth: '30px',
            data:dataCount
          }
        ]
      };
      var danger_chart = this.$echarts.init(document.getElementById('danger_chart'));
      danger_chart.setOption(safetydetailOption);
    }
  },



}
</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;
    .main_btn{
      position: absolute;
      top: 140px;
      right: 102px;
      z-index: 1000;
      width: 260px;
      height: 40px;
      border: 1px solid #1ED0F8;
      border-radius: 0 4px 4px 0;
      display: flex;
      overflow: hidden;
      >i{
        flex: 1;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #999999;
        background: none;
        line-height:40px;
        text-align: center;
      }
      .active{
        color: #FFFFFF;
        background: #1ED0F8;
      }
    }

    .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{
      width: 1852px;
      height: 352px;
      position: absolute;
      left: 34px;
      top: 86px;
      z-index: 200;
      background: rgba(9, 55, 81, 0.6);
      .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>
