<template>
  <div class="viewBody">
      <div class="topBox">
        <div style="color:#00164D;font-weight:600;">|坝体表面水平位移鸟瞰图</div>
        <div style="display:flex;justify-content: space-between;">
          <img src="../../imgs/batitu.png" width="50%">
          <div style="width:40%;">
            <div v-for="(item,index) in aerialViewData" :key="index" style="margin-bottom:20px;color:#1B3D5D;">
                <span class="iconfont icon-dian"></span>
                <span>{{item.name}}：{{item.about}}</span>
                <div style="margin-left:17px;">{{item.coordinate}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottomBox">
        <div style="color:#00164D;font-weight:600;">|{{sensorID}}</div>
        <div style="display:flex;justify-content: space-between;margin-top:20px;">
          <div id="sensor1"></div>
          <div id="sensor2"></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",
    }
  },
  mounted(){
    const that = this;
    var myChart1 = echarts.init(document.querySelector('#sensor1'));
    var option1 = {
        title: {
            text: '坝体表面位移0-7传感器位置变化量',
            left:"center",
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['坝体表面位移0-7(左右)', '坝体表面位移0-7(前后)', '橙色警戒线', '红色警戒线'],
            y:'bottom', 
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            splitLine:{  
             show:true 
            }
        },
        yAxis: {
            type: 'value',
            name:"毫米",
            max:40,
            min:-10,
            splitLine:{
             show:true,
            }
        },
        series: [
            {
                name: '坝体表面位移0-7(左右)',
                type: 'line',
                data: [0, 0, 0, 0, 0, 0, 0]
            },
            {
                name: '坝体表面位移0-7(前后)',
                type: 'line',
                data: [1, 1, 1, 1, 1, 1, 1]
            },
            {
                name: '橙色警戒线',
                type: 'line',
                data: [25, 25, 25, 25, 25, 25, 25]
            },
            {
                name: '红色警戒线',
                type: 'line',
                data: [30, 30, 30, 30, 30, 30, 30]
            },
        ]
    };
    option1 && myChart1.setOption(option1);
    var myChart2 = echarts.init(document.querySelector('#sensor2'));
    var option2 = {
        title: {
            text: '坝体表面位移0-8传感器位置变化量',
            left:"center",
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['坝体表面位移0-7(左右)', '坝体表面位移0-7(前后)', '橙色警戒线', '红色警戒线'],
            y:'bottom', 
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            splitLine:{  
             show:true 
            }
        },
        yAxis: {
            type: 'value',
            name:"毫米",
            max:40,
            min:-10,
            splitLine:{
             show:true,
            }
        },
        series: [
            {
                name: '坝体表面位移0-7(左右)',
                type: 'line',
                data: [0, 0, 0, 0, 0, 0, 0]
            },
            {
                name: '坝体表面位移0-7(前后)',
                type: 'line',
                data: [1, 1, 1, 1, 1, 1, 1]
            },
            {
                name: '橙色警戒线',
                type: 'line',
                data: [25, 25, 25, 25, 25, 25, 25]
            },
            {
                name: '红色警戒线',
                type: 'line',
                data: [30, 30, 30, 30, 30, 30, 30]
            },
        ]
    };
    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: 450px;
  background-color: white;
  padding: 5px 15px 0px;
  box-sizing: border-box;
  margin-bottom: 30px;
}
.bottomBox{
  width: 100%;
  height: 450px;
  background-color: white;
  padding: 5px 15px 0px;
  box-sizing: border-box;
}
#sensor1{
  width: 750px;
  height: 370px;
}
#sensor2{
  width: 750px;
  height: 370px;
}
</style>