<template>
  <div class="max-big-box">
    <!--返回按钮-->
    <div class="out-page-button cursor_pointer" @click="outButton">
      <img src="~@/assets/images/icon_25.png">
      <p>返回</p>
    </div>
    <div class="eCharts-max-big-box">
      <div class="eCharts-left-box" id="eCharts-one"></div>
      <div class="eCharts-right-box" id="eCharts-two"></div>
    </div>
  </div>
</template>

<script>
  import { temperatureOrHumidity } from '@/api/userApi'
  export default {
    name: "temperatureAndHumidityMonitoringInformationOne",//温湿度监控信息(近24小时)
    props:["repertory_id"],
    data () {
      return {
        id:"",
        //时间数据
        timeList:[],
        //左侧数据列表
        leftList:[],
        //右侧数据列表
        rightList:[]
      }
    },

    created(){

    },
    mounted() {
      this.id = this.repertory_id
      this.getListData();
    },
    methods: {
      //数据列表
      async getListData () {
        let self = this;
        let obj={
          repertoryId :self.id,
        };
        const { data } = await temperatureOrHumidity(obj);
        if(data.code==200){
          let newTime = [];
          let left = [];
          let Right = [];
          for(let i=0;i<data.data.length;i++){
            let playTime = data.data[i].time1.split(" ");
            playTime = playTime[1].split(":");
            let endTime = data.data[i].time2.split(" ");
            endTime = endTime[1].split(":");
            let time = playTime[0] + '-' + endTime[0];
            newTime.push(time);
            left.push(data.data[i].temperature);
            Right.push(data.data[i].humidity);
          }
          this.timeList = newTime;
          this.leftList = left;
          this.rightList = Right;
          this.eChartsOne();
          this.eChartsTwo();
        }
      },
      // eCharts上图表
      eChartsOne(){
        let self = this;
        let myChart = this.$echarts.init(document.getElementById('eCharts-one'));
        let option = {
          title: {
            text: '近24小时温度变化',
            textStyle: {
              align: 'center',
              color: '#FFF',
              fontSize: 14,
            },
            top: '8%',
            left: '7%',
          },
          legend: {
            right: "7%",
            top: "8%",
            textStyle: {
              align: 'center',
              color: '#FFF',
              fontSize: 14,
            },
          },
          grid: {
            top: '25%',
            bottom: '10%',
            left: '10%',
            right: '8%'
          },
          tooltip: {
            trigger: 'axis',
            label: {
              show: true
            }
          },
          xAxis: {
            name: 'h',
            boundaryGap: true, //默认，坐标轴留白策略
            axisLine: {
              lineStyle: {
                color: "#fff",
              }
            },
            axisLabel: {
              interval:0,
              rotate:45
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false,
              alignWithLabel: true
            },
            data: self.timeList
          },
          yAxis: {
            type: "value",
            name: '°C',
            axisLine: {
              lineStyle: {
                color: "#fff"
              }
            },
            axisTick: {
              show: false
            },
            splitArea: {
              show: false
            }
          },
          series: [{
            name:'温度',
            type: 'line',
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
              color: '#fb9a00',
            },
            itemStyle: {
              color: '#fb9a00',
              borderWidth: 1,
              borderColor: '#FFF'
            },
            data: self.leftList
          }]
        };
        myChart.setOption(option);
      },
      // eCharts下图表
      eChartsTwo(){
        let self = this;
        let myChart = this.$echarts.init(document.getElementById('eCharts-two'));
        let option = {
          title: {
            text: '近24小时湿度变化',
            textStyle: {
              align: 'center',
              color: '#FFF',
              fontSize: 14,
            },
            top: '8%',
            left: '7%',
          },
          legend: {
            right: "7%",
            top: "8%",
            textStyle: {
              align: 'center',
              color: '#FFF',
              fontSize: 14,
            },
          },
          grid: {
            top: '25%',
            bottom: '10%',
            left: '10%',
            right: '8%'
          },
          tooltip: {
            trigger: 'axis',
            label: {
              show: true
            }
          },
          xAxis: {
            name: 'h',
            boundaryGap: true, //默认，坐标轴留白策略
            axisLine: {
              lineStyle: {
                color: "#fff",
              }
            },
            axisLabel: {
              interval:0,
              rotate:45
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false,
              alignWithLabel: true
            },
            data: self.timeList
          },
          yAxis: {
            type: "value",
            name: 'φ',
            axisLine: {
              lineStyle: {
                color: "#fff"
              }
            },
            axisTick: {
              show: false
            },
            splitArea: {
              show: false
            }
          },
          series: [{
            name:'湿度',
            type: 'line',
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
              color: '#03bcea',
            },
            itemStyle: {
              color: '#03bcea',
              borderWidth: 1,
              borderColor: '#FFF'
            },
            data: self.rightList
          }]
        };
        myChart.setOption(option);
      },
      // 调用父组件方法退出当前页面
      outButton(){
        this.$parent.outPage();
      },
    }
  }
</script>

<style scoped lang="stylus">
  .max-big-box
    height:100%;
    width:100%;
    //返回按钮
    .out-page-button
      height:30px;
      width:93px;
      margin:0 0 20px 106px;
      background:url("~@/assets/images/button_02.png");
      background-size 100% 100%
      display flex
      img
        display block
        height:12px;
        width:7px;
        margin:9px 10px 0 22px;
      p
        line-height:30px;
        font-size:$font_12;
        color:$color_ff;
        text-align left
    .eCharts-max-big-box
      display flex
      width:1300px;
      margin:100px auto;
      .eCharts-left-box
        height:383px;
        width:598px;
        background:url("~@/assets/images/min_back_07.png") no-repeat;
        background-size: 100% 100%
        margin-right:104px;
      .eCharts-right-box
        height:383px;
        width:598px;
        background:url("~@/assets/images/min_back_07.png") no-repeat;
        background-size: 100% 100%

</style>
