<template>
  <div class="AuHiViewBody">

    <div class="AuHiTop">
      <div style="font-size:20px;font-weight:600;">环境监测实时数据查询搜索</div>
      <div style="margin-top:10px;display:flex;">
        <div>
          <template>
            <el-select v-model="feijishebei.value" placeholder="请选择风机设备">
              <el-option
                v-for="item in feijishebei.options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </template>
        </div>
        <div style="margin-left:20px;">
          <template>
            <el-select v-model="jiancexiang.value" placeholder="请选择监测项">
              <el-option
                v-for="item in jiancexiang.options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </template>
        </div>
        <div style="margin-left:20px;">
          <template>
              <el-date-picker
                v-model="selectDate1.value"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
          </template>
        </div>
        <div style="margin:0px 20px;">
          <template>
              <el-date-picker
                v-model="selectDate2.value"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
          </template>
        </div>
        <el-button type="primary" icon="el-icon-upload2" @click="daochu()">导出</el-button>
        <el-button icon="el-icon-printer" @click="dayin()">打印</el-button>
      </div>
    </div>

    <div class="AuHiBottom">
      <div style="margin-bottom:20px;display: flex;justify-content: space-between;">
        <div style="font-size:20px;font-weight:600;">{{bottomTitle}}</div>
        <el-button type="primary" round size="small" @click="switchBtn1()">{{switchBtn}}</el-button>
      </div>
      <div v-show="'趋势图' == switchBtn">
        <template>
          <el-table :data="automatedReportData" height="700" border style="width: 100%" :row-style="tableRowStyle">
            <el-table-column prop="equipment" label="产品设备" align="center"></el-table-column>
            <el-table-column prop="name" label="指标名称" align="center"></el-table-column>
            <el-table-column prop="numerical" label="数值" align="center"></el-table-column>
            <el-table-column prop="alarmLevel" label="报警级别" align="center"></el-table-column>
            <el-table-column prop="time" label="时间" align="center"></el-table-column>
            <el-table-column prop="status" label="处理状态" align="center"></el-table-column>
          </el-table>
        </template>
      </div>
      <div id="sensor1" v-show="'表格图' == switchBtn" style="width:1500px;height:700px;"></div>
    </div>

  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      bottomTitle:"实时数据列表",
      switchBtn:"趋势图",
      feijishebei:{
        options: [{
          value: '1号风机设备',
          label: '1号风机设备'
        }, {
          value: '2号风机设备',
          label: '2号风机设备'
        }, {
          value: '3号风机设备',
          label: '3号风机设备'
        }, {
          value: '4号风机设备',
          label: '4号风机设备'
        }, {
          value: '5号风机设备',
          label: '5号风机设备'
        }],
        value: ''
      },
      jiancexiang:{
        options: [{
          value: '选项1',
          label: '111'
        }, {
          value: '选项2',
          label: '222'
        }, {
          value: '选项3',
          label: '333'
        }, {
          value: '选项4',
          label: '444'
        }, {
          value: '选项5',
          label: '555'
        }],
        value: ''
      },
      selectDate1:{
        value:""
      },
      selectDate2:{
        value:""
      },
      automatedReportData:[{
        equipment: '2016-05-02',
        name: '王小虎',
        numerical: '上海市普陀区金沙江路 1518 弄',
        alarmLevel: '2016-05-02',
        time: '王小虎',
        status: '上海市普陀区金沙江路 1518 弄'
      },{
        equipment: '2016-05-02',
        name: '王小虎',
        numerical: '上海市普陀区金沙江路 1518 弄',
        alarmLevel: '2016-05-02',
        time: '王小虎',
        status: '上海市普陀区金沙江路 1518 弄'
      },{
        equipment: '2016-05-02',
        name: '王小虎',
        numerical: '上海市普陀区金沙江路 1518 弄',
        alarmLevel: '2016-05-02',
        time: '王小虎',
        status: '上海市普陀区金沙江路 1518 弄'
      },{
        equipment: '2016-05-02',
        name: '王小虎',
        numerical: '上海市普陀区金沙江路 1518 弄',
        alarmLevel: '2016-05-02',
        time: '王小虎',
        status: '上海市普陀区金沙江路 1518 弄'
      },{
        equipment: '2016-05-02',
        name: '王小虎',
        numerical: '上海市普陀区金沙江路 1518 弄',
        alarmLevel: '2016-05-02',
        time: '王小虎',
        status: '上海市普陀区金沙江路 1518 弄'
      },{
        equipment: '2016-05-02',
        name: '王小虎',
        numerical: '上海市普陀区金沙江路 1518 弄',
        alarmLevel: '2016-05-02',
        time: '王小虎',
        status: '上海市普陀区金沙江路 1518 弄'
      },{
        equipment: '2016-05-02',
        name: '王小虎',
        numerical: '上海市普陀区金沙江路 1518 弄',
        alarmLevel: '2016-05-02',
        time: '王小虎',
        status: '上海市普陀区金沙江路 1518 弄'
      },{
        equipment: '2016-05-02',
        name: '王小虎',
        numerical: '上海市普陀区金沙江路 1518 弄',
        alarmLevel: '2016-05-02',
        time: '王小虎',
        status: '上海市普陀区金沙江路 1518 弄'
      }],

    }
  },
  mounted(){
    const that = this;
    var myChart1 = echarts.init(document.querySelector('#sensor1'));
    var option1 = {
      legend: {
          data: ['温数据', '警戒线'],
          y:'bottom', 
      },
      tooltip: {
              trigger: 'axis'
      },
      xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号', '9号', '10号',
                '11号', '12号', '13号', '14号', '15号', '16号', '17号', '18号', '19号', '20号',
                '21号', '22号', '23号', '24号', '25号', '26号', '27号', '28号', '29号', '30号', '31号'
          ],
      },
      yAxis: {
          type: 'value',
          min:0,
          max:250,
          splitNumber : 20,
          splitLine:{
              show:true,
          },
          name:"高度(米)",
      },
      series: [{
          name:"温数据",
          data: [24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
                52, 58, 78, 68, 58, 42, 10, 5, 28, 58,
                200, 100, 150, 85, 153, 186, 196, 120, 36, 14, 100,
          ],
          type: 'line',
          areaStyle: {},
          smooth: true
      },{
          name:"警戒线",
          data: [240, 240, 240, 240, 240, 240, 240, 240, 240, 240,
                240, 240, 240, 240, 240, 240, 240, 240, 240, 240,
                240, 240, 240, 240, 240, 240, 240, 240, 240, 240, 240,
          ],
          type: 'line',
          itemStyle: {
						normal: {
							color: "red", //折线点的颜色
							lineStyle: {
								color: "red" //折线的颜色
							}
						}
					},
      },]
    };
    option1 && myChart1.setOption(option1);
  },
  methods:{
    switchBtn1(){
      if(this.switchBtn == "趋势图"){
        this.switchBtn = "表格图";
      }else{
        this.switchBtn = "趋势图";
      }
    },
    tableRowStyle({row, rowIndex}) {
      // if (row.name == "王小虎") {
      //   return 'background: rgb(255,232,232);';
      // }
    },
    daochu(){
      //获取表格
      var exportFileContent = document.querySelector(".el-table").outerHTML;           
      //设置格式为Excel，表格内容通过btoa转化为base64，此方法只在文件较小时使用(小于1M)
      //exportFileContent=window.btoa(unescape(encodeURIComponent(exportFileContent)));
      //var link = "data:"+MIMEType+";base64," + exportFileContent;
      //使用Blob
      var blob = new Blob([exportFileContent], {type: "text/plain;charset=utf-8"});     	//解决中文乱码问题
      blob =  new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});
      //设置链接
      var link = window.URL.createObjectURL(blob); 
      var a = document.createElement("a");    //创建a标签
      a.download = "生产自动化系统实时数据表.xls";  //设置被下载的超链接目标（文件名）
      a.href = link;                            //设置a标签的链接
      document.body.appendChild(a);            //a标签添加到页面
      a.click();                                //设置a标签触发单击事件
      document.body.removeChild(a);            //移除a标签
    },
    dayin(){
      var tableToPrint = document.querySelector(".el-table");//将要被打印的表格
      var newWin= window.open("");//新打开一个空窗口
      newWin.document.write(tableToPrint.outerHTML);//将表格添加进新的窗口
      newWin.document.close();//在IE浏览器中使用必须添加这一句
      newWin.focus();//在IE浏览器中使用必须添加这一句
      newWin.print();//打印
      newWin.close();//关闭窗口
    },
  }
}
</script>

<style scoped>
.AuHiViewBody{
  width: 100%;
  height:100%;
  background-color: rgb(245,246,251);
  padding: 30px;
  box-sizing: border-box;
}
.AuHiTop{
  height: 110px;
  background-color: white;
  border-radius: 10px;
  padding: 18px 20px 0px ;
  box-sizing: border-box;
}
.AuHiBottom{
  width: 100%;
  background-color: white;
  padding: 30px;
  box-sizing: border-box;
  height: 810px;
  margin-top: 20px;
}
.el-table .warning{
  background: red !important;
}
.el-table .success-row {
  background: blue;
}
</style>