<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="plan_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="subId" label-width="80px">
                <el-input
                    maxLength="30"
                    v-model="queryParams.searchValue"
                    placeholder="实验室/房间号"
                />
              </el-form-item>
                <el-form-item label="危险源大分类" prop="bigTypeValue" label-width="98px">
                    <el-select v-model="queryParams.bigTypeValue" popper-class="select-big-data"  @change="bigClassifyChange()"  placeholder="请选择危险源">
                        <el-option
                                v-for="item in bigClassifyOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="危险源小分类" prop="smallTypeValue" label-width="98px">
                  <el-select v-model="queryParams.smallTypeValue" popper-class="select-big-data" @change="smallClassifyChange()" placeholder="请选择危险源">
                    <el-option
                        v-for="item in smallClassifyOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                  </el-select>
                </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="name" label="危险源"></el-table-column>
                <el-table-column align="center" header-align='center' prop="value" label="数量"></el-table-column>
                <el-table-column align="center" header-align='center' prop="gdp" label="占比" width="420">
                    <template  slot-scope="scope">
                        <el-progress  :percentage="Number(scope.row.gdp)" :stroke-width="20"></el-progress>
                    </template>
                </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 {
  laboratoryBigViewSubHazardBarChartCount,
  laboratoryBigViewSubHazardList,
  getDicts,
} from "@/api";
export default {
  components: {
    Header
  },
  data() {
    return {
      editForm:{
        deptLevel:'',//这个是登陆后，刘波给你的院校的类型
        groupDeptId:'',//院系id
        subId:'',//实验室
        hazardId:'',//危险源
        pageNum:1,
        pageSize:10
      },
      subjectOptions:[],//院系
      riskList:[],//危险源
      totalNum:0,

      labList:[],
      subOptions:[],
      queryParams:{
        page:1,
        pageSize:10,
        smallTypeValue:'',
        searchValue:'',
      },
      dataList:[],
      total:0,
      bigClassifyOptions:[],
      smallClassifyOptions:[],
    }
  },
  mounted() {
    this.getList();
    this.laboratoryBigViewSubHazardBarChartCount();
    this.getBigDicts();
    this.getSmallDicts();
    // this.getAjaxData()
    // this.getAjaxList()
  },
  methods: {
    back(){
        this.$router.push('/home')
    },
    tableRowClassName({ rowIndex}) {
      if (rowIndex%2 === 0) {
        return 'success-row';
      } else{

        return 'warning-row';
      }
    },
    getList(){
      this.$set(this,'loading',true);
      let obj = JSON.parse(JSON.stringify(this.queryParams))
      laboratoryBigViewSubHazardList(obj).then(response => {
        this.$set(this,'loading',false);
        this.$set(this,'dataList',response.data.records);
        this.$set(this,'total',response.data.total);
      });
    },
    laboratoryBigViewSubHazardBarChartCount(){
      this.$set(this,'loading',true);
      let obj = JSON.parse(JSON.stringify(this.queryParams))
      laboratoryBigViewSubHazardBarChartCount(obj).then(response => {
        let data=response.data;
        let dataX=[];
        let dataY=[];
        for (var i = 0; i < data.length; i++) {
          dataX.push(data[i].name)
          dataY.push(data[i].value)
        }
        this.riskDetailFun(dataX,dataY)
      });
    },
    //获取危险源类型
    //大分类字典
    getBigDicts(){
      getDicts('classify_dictionaries_all').then(response => {
        let list = response.data;
        getDicts('level_dictionaries_all').then(response => {
          list = list.concat(response.data)
          this.$set(this,'bigClassifyOptions',list);
        });
      });
    },
    //小分类字典
    getSmallDicts(val){
      getDicts(val).then(response => {
        this.$set(this,'smallClassifyOptions',response.data);
      });
    },
    //大分类选中
    bigClassifyChange(){
      for (let i=0;i<this.bigClassifyOptions.length;i++){
        if (this.queryParams.bigTypeValue==this.bigClassifyOptions[i].value){
          this.$set(this.queryParams,'bigTypeName',this.bigClassifyOptions[i].label);
        }
      }
      this.getSmallDicts(this.queryParams.bigTypeValue)
    },
    //小分类选中
    smallClassifyChange(){
      for (let i=0;i<this.smallClassifyOptions.length;i++){
        if (this.queryParams.smallTypeValue==this.smallClassifyOptions[i].value){
          this.$set(this.queryParams,'smallTypeName',this.smallClassifyOptions[i].label);
        }
      }
    },
    //查询按钮
    handleQuery(){
      this.$set(this.queryParams,'page',1);
      this.getList();
    },
    //重置按钮
    resetQuery(){
      this.$set(this,'queryParams',{
        page:1,
        pageSize:10,
        typeId:'',
        levelId:'',
        searchValue:'',
      });
      this.getList();
    },
    /*安全隐患详情图表*/
    riskDetailFun: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('plan_chart'));
      plan_chart.setOption(planOption);
    }
  },


}
</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: 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>
