<template>
  <div class="app-container">
    <div id="tendencyChart" class="tendencyChart boxShadow"></div>
    <div class="warnning">
      <div class="warnning-item">
        <div class="title"><span>2022-02-15</span></div>
        <div class="list">
          <div class="list-item">
            <div class="colorRed">1号仓粮温检测存在异常</div>
            <div>异常温度: <strong class="colorRed">最高温30℃</strong> </div>
          </div>
          <div class="list-item">
            <div class="colorRed">1号仓粮温检测存在异常</div>
            <div>异常温度: <strong class="colorRed">最高温30℃</strong> </div>
          </div>
          <div class="list-item">
            <div class="colorRed">1号仓粮温检测存在异常</div>
            <div>异常温度: <strong class="colorRed">最高温30℃</strong> </div>
          </div>
        </div>
      </div>
      <div class="warnning-item">
        <div class="title"><span>2022-02-15</span></div>
        <div class="list">
          <div class="list-item">
            <div class="colorRed">1号仓粮温检测存在异常</div>
            <div>异常温度: <strong class="colorRed">最高温30℃</strong> </div>
          </div>
          <div class="list-item">
            <div class="colorRed">1号仓粮温检测存在异常</div>
            <div>异常温度: <strong class="colorRed">最高温30℃</strong> </div>
          </div>
          <div class="list-item">
            <div class="colorRed">1号仓粮温检测存在异常</div>
            <div>异常温度: <strong class="colorRed">最高温30℃</strong> </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  data () {
    return {

    }
  },
  created () {
    // console.log(this.$route.query, 'query')
  },
  mounted () {
    this.initChart()
  },
  methods: {
    initChart () {
      var chartDom = document.getElementById('tendencyChart');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        color: ['#ff6161', '#09e96f', '#28b6ff'],
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          right: "2%",
          top: "20%",
          itemGap: 18,
          icon: 'path://M904 476H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z',
          orient: "vertical",
          data: ['最高温', '最低温', '平均温']
        },
        grid: {
          left: '3%',
          right: '14%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2-01', '2-02', '2-03', '2-04', '2-05', '2-06', '2-07', '2-08', '2-09', '2-10', '2-11', '2-12', '2-13', '2-14', '2-15']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '最高温',
            type: 'line',
            // stack: 'Total',
            smooth: true,
            data: [12, 13, 10, 13, 9, 23, 21, 12, 13, 10, 13, 9, 23, 21, 29]
          },
          {
            name: '最低温',
            type: 'line',
            // stack: 'Total',
            smooth: true,
            data: [5, 18, 19, 23, 29, 33, 31, 14, 16, 20, 18, 16, 26, 23, 15]
          },
          {
            name: '平均温',
            type: 'line',
            // stack: 'Total',
            smooth: true,
            data: [15, 23, 20, 15, 19, 33, 21, 15, 13, 24, 22, 10, 14, 24, 22]
          }
        ]
      };

      option && myChart.setOption(option);
      // 屏幕宽度变化，图表自适应变化
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.tendencyChart {
  width: 100%;
  height: 370px;
  border-radius: 15px;
  background-color: #fff;
}
.warnning  {
  margin-top: 10px;
  .warnning-item {
    background-color: #fff;
    border-radius: 15px;
    padding: 10px 15px;
    .title {
      font-size: 16px;
      font-weight: 600;

    }
    .list {
      padding-top: 10px;
      .list-item {
        font-size: 14px;
        
        padding-bottom: 8px;
        display: flex;
        justify-content: flex-start;
        .colorRed {
          color: #d45353;
          font-weight: bolder;
        }
        div {
          width: 25%;
        }
      }
       .list-item:nth-last-child(1) {
        padding-bottom: 0;
       }
    }
  }
  .warnning-item:nth-child(n-1) {
    margin-top: 10px;
  }
}
</style>
