<template>
  <div class="viewBody">
      <div class="topBox">
        <div style="color:#00164D;font-weight:600;">|降雨量监测</div>
        <div style="display:flex;justify-content: space-between;">
          <div style="margin-left:50px;">
            <img src="../../imgs/jiangyuliang.png" width="300">
            <div style="padding: 10px;border: 1px solid #0C1D4A;font-size:20px;color:#0E2256;font-weight: 600;border-radius: 5px;text-align: center;">当前降雨量：{{rainfallNum}}</div>
          </div>
          <div id="sensor1"></div>
        </div>
      </div>
      <div class="bottomBox">
        <div style="display:flex;justify-content: space-between;margin-top:20px;">
          <div id="sensor2"></div>
          <div>
            <div style="color:#00164D;font-weight:600;margin-bottom:10px;width: 800px;text-align: center;">降雨量详细记录</div>
            <template>
              <el-table :data="rainfallDetailsData" border style="width: 801px" height="300">
                  <el-table-column prop="time" label="时间" width="400" align="center"></el-table-column>
                  <el-table-column prop="rainfall" label="降雨量" width="400" align="center"></el-table-column>
                </el-table>
              </template>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  data(){
    return{
      aerialViewData:[{
        name:"坝体表面位移10-4",
        about:"左右(-0.00398) 前后(-0.0069)",
        coordinate:"X:3330231654.799 Y:1254684586 Z:254687",
      },{
        name:"坝体表面位移10-4",
        about:"左右(-0.00398) 前后(-0.0069)",
        coordinate:"X:3330231654.799 Y:1254684586 Z:254687",
      },{
        name:"坝体表面位移10-4",
        about:"左右(-0.00398) 前后(-0.0069)",
        coordinate:"X:3330231654.799 Y:1254684586 Z:254687",
      },{
        name:"坝体表面位移10-4",
        about:"左右(-0.00398) 前后(-0.0069)",
        coordinate:"X:3330231654.799 Y:1254684586 Z:254687",
      }],
      sensorID:"传感器编号--坝体表面位移0-7",
      rainfallNum:"100mm",
      rainfallDetailsData:[{
          time: '2016-05-02',
          rainfall: 'dddd'
        }, {
          time: '2016-05-04',
          rainfall: '王小虎',
        }, {
          time: '2016-05-01',
          rainfall: '王小虎',
        }, {
          time: '2016-05-03',
          rainfall: '王小虎',
      }]
    }
  },
  mounted(){
    const that = this;
    var myChart1 = echarts.init(document.querySelector('#sensor1'));
    var option1 = {
        title: {
            text: '降雨量过去24小时',
            left:"center",
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00','14:00', '16:00', '18:00', '20:00', '22:00', '24:00']
        },
        yAxis: {
            type: 'value',
            min:0,
            max:100,
            splitNumber : 10,
            splitLine:{
             show:true,
            },
            name:"高度(米)",
        },
        series: [{
            data: [50, 23, 24, 21, 13, 14, 26, 50, 23, 24, 21, 13, 14],
            type: 'line'
        }]
    };
    option1 && myChart1.setOption(option1);
    var myChart2 = echarts.init(document.querySelector('#sensor2'));
    var option2 = {
        title: {
            text: '降雨量当月累计',
            left:"center",
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value',
            name:"单位(mm)",
            min:0,
            max:8,
            splitNumber : 4,
        },
        series: [{
            data: [1, 2, 1, 8, 7, 5, 3],
            type: 'bar',
            barWidth: 20, // 柱图宽度
            barMaxWidth: 20, // 最大宽度
            itemStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
								offset: 0,
								color: "#1268f3" // 0% 处的颜色
							}, {
								offset: 0.6,
								color: "#08a4fa" // 60% 处的颜色
							}, {
								offset: 1,
								color: "#01ccfe" // 100% 处的颜色
							}], false)
						}
					},
        }]
    };
    option2 && myChart2.setOption(option2);
  }
}

</script>

<style scoped>
*{
  
  margin: 0;
  padding: 0;
}
.viewBody{
  overflow: auto;
  height: 100%;
  width: 100%;
  background-color: rgb(245,246,251);
  padding: 20px;
  box-sizing: border-box;
  
}
.viewBody::-webkit-scrollbar {
    display: none;
}
.topBox{
  width: 100%;
  height: 420px;
  background-color: white;
  padding: 5px 15px 0px;
  box-sizing: border-box;
  margin-bottom: 30px;
}
.bottomBox{
  width: 100%;
  height: 420px;
  background-color: white;
  padding: 5px 15px 0px;
  box-sizing: border-box;
}
#sensor1{
  width: 1200px;
  height: 400px;
}
#sensor2{
  width: 750px;
  height: 370px;
}
</style>