<!-- 实验室状态统计 -->
<template>
  <div class="subComponents">
    <title-page-img-components :propsData="propsData"></title-page-img-components>
    <div class="eCharts-max-big-box">
      <div class="sub-totality">
        <p class="sub-totality-name-left">实验室总数</p>
        <p class="sub-totality-num" v-for="(item,index) in totalityNum" :key="index">{{item}}</p>
        <p class="sub-totality-name-right">间</p>
      </div>
      <div class="sub-sort-num">
        <div class="sub-sort-num-min">
          <p class="sub-sort-num-name-left">使用数量:</p>
          <p class="sub-sort-num-p colorA">{{useTotal}}</p>
          <p class="sub-sort-num-name-right">间</p>
        </div>
        <div class="sub-sort-num-min">
          <p class="sub-sort-num-name-left">空闲数量:</p>
          <p class="sub-sort-num-p colorB">{{availableTotal}}</p>
          <p class="sub-sort-num-name-right">间</p>
        </div>
        <div class="sub-sort-num-min">
          <p class="sub-sort-num-name-left">异常数量:</p>
          <p class="sub-sort-num-p colorC">{{exceptionalTotal}}</p>
          <p class="sub-sort-num-name-right">间</p>
        </div>
      </div>
      <div id="subComponentsECharts"></div>
    </div>
    <checkSelectComponents :propsOption="propsOption" :placeholder="'全校'" class="position-check-select"></checkSelectComponents>
  </div>
</template>
<script>
  import {
    getDeptDropList,
    reportReportBigDataLabStateStatistics,
  } from "@/api/index";
  import titlePageImgComponents from '@/components/titlePageImgComponents.vue'
  import checkSelectComponents from "@/components/checkSelectComponents.vue";
  export default {
    name: 'subComponents',
    components: {
      titlePageImgComponents,
      checkSelectComponents
    },
    data () {
      return {
        propsData:{
          title:'实验室状态统计',
          checkType:'subComponents',
        },
        //eCharts定时器
        eChartsTimer:null,
        totalityNum:[],
        useTotal:0,//使用数量
        availableTotal:0,//空闲数量
        exceptionalTotal:0,//异常数量
        //选择器组件传参
        propsOption:[
          {label:'全校',value:'11'},
        ],
        deptId:0,
      }
    },
    created () {

    },
    mounted () {
      this.getDeptDropList();
      this.timedRefresh();
    },
    methods: {
      timedRefresh(){
        let self = this;
        self.getData();
        //定时动画
        window.clearInterval(self.eChartsTimer);
        self.eChartsTimer = setInterval(function(){
          self.getData();
        },1000*30);
      },
      //组件方法
      checkSelectData(value){
        if(this.deptId != value){
          this.$set(this,'deptId',value);
          this.getData();
        }
      },
      getData(){
        reportReportBigDataLabStateStatistics({deptId:this.deptId}).then( response => {
          let totalityNum = [];
          if(response.data.labTotal != '0'){
            response.data.labTotal = response.data.labTotal+'';
            for(let i=0;i<response.data.labTotal.length;i++){
              totalityNum.push(response.data.labTotal[i]);
            }
            this.$set(this,'totalityNum',totalityNum);
          }else{
            this.$set(this,'totalityNum',[0]);
          }
          this.$set(this,'useTotal',response.data.useTotal&&response.data.useTotal<10000?response.data.useTotal:(response.data.useTotal&&response.data.useTotal>9999?9999:0));
          this.$set(this,'availableTotal',response.data.availableTotal&&response.data.availableTotal<10000?response.data.availableTotal:(response.data.availableTotal&&response.data.availableTotal>9999?9999:0));
          this.$set(this,'exceptionalTotal',response.data.exceptionalTotal&&response.data.exceptionalTotal<10000?response.data.exceptionalTotal:(response.data.exceptionalTotal&&response.data.exceptionalTotal>9999?9999:0));
          let hour = [];
          let useTotal = [];
          let availableTotal = [];
          let exceptionalTotal = [];
          let num = 0;
          if(response.data.labStateSubs[0]){
            for(let i=0;i<response.data.labStateSubs.length;i++){
              hour.push(response.data.labStateSubs[i].hour)
              useTotal.push(response.data.labStateSubs[i].useTotal)
              availableTotal.push(response.data.labStateSubs[i].availableTotal)
              exceptionalTotal.push(response.data.labStateSubs[i].exceptionalTotal)
              if(response.data.labStateSubs[i].useTotal > num){
                num = response.data.labStateSubs[i].useTotal;
              }
              // if(response.data.labStateSubs[i].availableTotal > num){
              //   num = response.data.labStateSubs[i].availableTotal;
              // }
              if(response.data.labStateSubs[i].exceptionalTotal > num){
                num = response.data.labStateSubs[i].exceptionalTotal;
              }
            }
          }else{
            hour = ["0.00", "3.00", "6.00", "9.00", "12.00", "15.00", "18.00", "21.00", "24.00",];
            useTotal = [0, 0, 0, 0, 0, 0, 0, 0, 0];
            availableTotal = [0, 0, 0, 0, 0, 0, 0, 0, 0];
            exceptionalTotal = [0, 0, 0, 0, 0, 0, 0, 0, 0];
          }
          this.eChartsMethod(hour,useTotal,availableTotal,exceptionalTotal,num);
        });
      },
      eChartsMethod(hour,useTotal,availableTotal,exceptionalTotal,num){
        let option = {
          title: {
            text: "",
            textStyle: {
              fontWeight: "normal",
              fontSize: 16,
              color: "#F1F1F3",
            },
            left: "6%",
          },
          tooltip: {
            trigger: "axis",
            textStyle: {
              fontSize: 18
            },
            axisPointer: {
              lineStyle: {
                color: "#57617B",
              },
            },
          },
          legend: {
            show:false,
            icon: "rect",
            itemWidth: 14,
            itemHeight: 5,
            itemGap: 13,
            data: ["使用数量", "空闲数量", "异常数量"],
            right: "4%",
            textStyle: {
              fontSize: 18,
              color: "#F1F1F3",
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              boundaryGap: false,
              axisLabel: {
                textStyle: {
                  color: "#ffffff",
                  fontSize: 18,
                },
              },
              axisLine: {
                lineStyle: {
                  color: "#042226",
                },
              },
              data: hour,
            },
          ],
          yAxis: [
            {
              type: "value",
              //以下设置y轴刻度为整数代码  valueDataAll是数组源，从里面找最大值用的
              axisTick: {
                show: false,
              },
              axisLine: {
                lineStyle: {
                  fontSize: 18,
                  color: "#042226",
                },
              },
              axisLabel: {
                margin: 10,
                textStyle: {
                  color: "#ffffff",
                  fontSize: 18,
                },
              },
              splitLine: {
                lineStyle: {
                  color: "#57617B",
                },
              },
            },
          ],
          series: [
            {
              name: "使用数量",
              type: "line",
              smooth: true,
              symbol: "circle",
              symbolSize: 8,
              lineStyle: {
                normal: {
                  width: 2,
                },
              },
              areaStyle: {
                normal: {
                  color: {//渐变色
                    x: 1,
                    y: 0,
                    x2: 0,
                    y2: 0,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(1,131,250, 1)",
                      },
                      {
                        offset: 1,
                        color: "rgba(1,131,250, 0)",
                      },
                    ],
                  },
                  shadowColor: "rgba(0, 0, 0, 0.1)",
                  shadowBlur: 10,
                },
              },
              itemStyle: {
                normal: {
                  color: "rgb(1,131,250)",
                },
              },
              data: useTotal,
            },
            // {
            //   name: "空闲数量",
            //   type: "line",
            //   smooth: true,
            //   symbol: "circle",
            //   symbolSize: 8,
            //   lineStyle: {
            //     normal: {
            //       width: 2,
            //     },
            //   },
            //   areaStyle: {
            //     normal: {
            //       color: {//渐变色
            //         x: 1,
            //         y: 0,
            //         x2: 0,
            //         y2: 0,
            //         colorStops: [
            //           {
            //             offset: 0,
            //             color: "rgba(21,130,124, 1)",
            //           },
            //           {
            //             offset: 1,
            //             color: "rgba(21,130,124, 0)",
            //           },
            //         ],
            //       },
            //       shadowColor: "rgba(0, 0, 0, 0.1)",
            //       shadowBlur: 10,
            //     },
            //   },
            //   itemStyle: {
            //     normal: {
            //       color: "rgb(21,130,124)",
            //     },
            //   },
            //   data: availableTotal,
            // },
            {
              name: "异常数量",
              type: "line",
              smooth: true,
              symbol: "circle",
              symbolSize: 8,
              lineStyle: {
                normal: {
                  width: 2,
                },
              },
              areaStyle: {
                normal: {
                  color: {//渐变色
                    x: 1,
                    y: 0,
                    x2: 0,
                    y2: 0,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(255,132,0, 1)",
                      },
                      {
                        offset: 1,
                        color: "rgba(255,132,0, 0)",
                      },
                    ],
                  },
                  shadowColor: "rgba(0, 0, 0, 0.1)",
                  shadowBlur: 10,
                },
              },
              itemStyle: {
                normal: {
                  color: "rgb(255,132,0)",
                },
              },
              data: exceptionalTotal,
            },
          ],
        };
        if(num < 5){
          option.yAxis[0].max = 5;
        }else{
          option.yAxis[0].min= 0;
          option.yAxis[0].max= num; // 计算最大值
          option.yAxis[0].interval= Math.ceil(num / 5); // 平均分为5份
        }
        let echartsBox = this.$echarts.init(document.getElementById('subComponentsECharts'));
        echartsBox.clear();
        echartsBox.setOption(option);
      },
      getDeptDropList(){
        getDeptDropList({level: 2, deptType: 1 }).then(response => {
          let list = [{label:'全校',value:'0'}];
          for(let i=0;i<response.data.length;i++){
            list.push({
              label:response.data[i].deptShortName,
              value:response.data[i].deptId,
            })
          }
          this.$set(this,'propsOption',list);
        });
      },
    },
    beforeDestroy() {
      //清除定时器
      window.clearInterval(this.eChartsTimer);
    },
    destroyed() {
      //清除定时器
      window.clearInterval(this.eChartsTimer);
    }
  }
</script>
<style scoped lang="scss">
  .subComponents{
    height:457px;
    width:800px;
    position: relative;
    .eCharts-max-big-box{
      background: linear-gradient( 180deg, rgba(4,117,129,0.2) 0%, rgba(0,15,22,0) 100%);
      .sub-totality{
        height: 69px;
        display: flex;
        .sub-totality-name-left{
          width:130px;
          margin:21px 0 0 32px;
          font-size:24px;
          color:#fff;
          height:40px;
          line-height:40px;
        }
        .sub-totality-num{
          margin:21px 10px 0 0;
          color:#fff;
          font-size:24px;
          width:35px;
          height:40px;
          line-height:40px;
          text-align: center;
          background: no-repeat;
          background-image: url("../../../assets/ZDimages/img_bg_syszs@1x.png");
          background-size: 100%;
          font-family: 'alimmFonts', sans-serif;
        }
        .sub-totality-name-right{
          margin:21px 0 0 0;
          font-size:24px;
          color:#fff;
          height:40px;
          line-height:40px;
        }
      }
      .sub-sort-num{
        height:62px;
        display: flex;
        padding-left:22px;
        .sub-sort-num-min{
          display: flex;
          margin-right:10px;
          width:245px;
          height:62px;
          background: no-repeat;
          background-image: url("../../../assets/ZDimages/img_bg_sysl@1x.png");
          background-size: 100%;
          .sub-sort-num-name-left{
            font-size:18px;
            color:#fff;
            height:62px;
            line-height:62px;
            margin:0 0 0 14px;
          }
          .sub-sort-num-p{
            margin-top:15px;
            height:30px;
            line-height:30px;
            flex:1;
            text-align: right;
            font-size:30px;
            margin-right:10px;
            font-family: 'ysFonts', sans-serif;
          }
          .colorA{
            background: -webkit-linear-gradient(0deg, #FFFFFF, #0183FA); /* Chrome, Safari */
            background: linear-gradient(0deg, #FFFFFF, #0183FA); /* 标准语法 */
            -webkit-background-clip: text; /* Chrome, Safari */
            background-clip: text;
            -webkit-text-fill-color: transparent; /* Chrome, Safari */
            color: transparent; /* 其他浏览器 */
          }
          .colorB{
            background: -webkit-linear-gradient(0deg, #FFFFFF, #15827C); /* Chrome, Safari */
            background: linear-gradient(0deg, #FFFFFF, #15827C); /* 标准语法 */
            -webkit-background-clip: text; /* Chrome, Safari */
            background-clip: text;
            -webkit-text-fill-color: transparent; /* Chrome, Safari */
            color: transparent; /* 其他浏览器 */
          }
          .colorC{
            background: -webkit-linear-gradient(0deg, #FFFFFF, #FF9A1E ); /* Chrome, Safari */
            background: linear-gradient(0deg, #FFFFFF, #FF9A1E ); /* 标准语法 */
            -webkit-background-clip: text; /* Chrome, Safari */
            background-clip: text;
            -webkit-text-fill-color: transparent; /* Chrome, Safari */
            color: transparent; /* 其他浏览器 */
          }
          .sub-sort-num-name-right{
            font-size:18px;
            color:#fff;
            height:62px;
            line-height:62px;
            margin-right:14px;
          }
        }
      }
      #subComponentsECharts{
        width:800px;
        height:239px;
      }
    }
    .position-check-select{
      position: absolute;
      right:29px;
      top:80px;
    }
  }
</style>
