<!-- 实验室使用走势图 -->
<template>
    <div class="subComponents">
      <title-page-img-components :propsData="propsData"></title-page-img-components>
      <div class="eCharts-max-big-box">
        <div id="subComponentsECharts"></div>
      </div>
    </div>
</template>
<script>
  import {
    reportReportBigDataLabStateStatistics,
  } from "@/api/index";
  import titlePageImgComponents from '@/components/titlePageImgComponents.vue'
  export default {
    name: 'subComponents',
    components: {
      titlePageImgComponents,
    },
    data() {
      return {
        propsData:{
          title:'实验室使用走势图',
        },
        //eCharts定时器
        eChartsTimer:null,
        deptId:0,
      }
    },
    created() {

    },
    mounted() {
      this.getData();
      this.timedRefresh();
    },
    methods: {
      timedRefresh(){
        let self = this;
        this.echartsTimer = window.setInterval(showTime, 180000);
        function showTime() {
          self.getList();
        }
      },
      getData(){
        reportReportBigDataLabStateStatistics({deptId:this.deptId}).then( response => {
          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);
      },
    },
    beforeDestroy() {
      //清除定时器
      window.clearInterval(this.echartsTimer);
    },
    destroyed() {
      //清除定时器
      window.clearInterval(this.echartsTimer);
    }
  }
</script>
<style scoped lang="scss">
    .subComponents {
      width: 652px;
      height: 401px;
      overflow: hidden;
      .eCharts-max-big-box{
        width: 652px;
        height: 331px;
        background: linear-gradient( 180deg, rgba(4,117,129,0.2) 0%, rgba(0,15,22,0) 100%);
        #subComponentsECharts{
          width: 642px;
          height: 311px;
        }
      }
    }
</style>
