<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">
      <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>
</template>

<script>
export default {
  data() {
    return {
      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 弄'
      }],

    }
  },
  methods:{
    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: 750px;
  margin-top: 20px;
}
.el-table .warning{
  background: red !important;
}
.el-table .success-row {
  background: blue;
}
</style>