<template>
  <el-dialog class="setimgDialog" title="运行状态" :visible.sync="isShow" :close-on-click-modal="false" width="70%">
    <el-form :inline="true" :model="formdata" class="demo-form-inline">
      <el-form-item label="开始日期">
        <el-date-picker
          v-model="formdata.starttime"
          type="datetime"
          placeholder="开始日期"
          value-format="timestamp"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束日期">
        <el-date-picker
          v-model="formdata.endtime"
          type="datetime"
          default-time="23:59:59"
          placeholder="结束日期"
          value-format="timestamp"
          class="ml10"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary">导出</el-button>
      </el-form-item>
    </el-form>
    <el-table
      ref="multipleTable"
      :data="listData"
      stripe
      tooltip-effect="dark"
      style="width: 100%"
      v-loading="loading"
    >
      <el-table-column min-width="45" label="序号">
        <template slot-scope="scope">
          <span>{{ (page - 1) * pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="采集时间" min-width="120" show-overflow-tooltip></el-table-column>
      <el-table-column prop="name" label="设备名称" min-width="80" show-overflow-tooltip></el-table-column>
      <el-table-column prop="name" label="设备编号" min-width="120" show-overflow-tooltip></el-table-column>
      <el-table-column prop="name" label="装置名称" min-width="80" show-overflow-tooltip></el-table-column>
      <el-table-column prop="name" label="装置型号" min-width="80" show-overflow-tooltip></el-table-column>
      <el-table-column prop="name" label="装置版本号" min-width="80" show-overflow-tooltip></el-table-column>
      <el-table-column prop="name" label="生产厂家" min-width="100" show-overflow-tooltip></el-table-column>
      <el-table-column prop="name" label="生产日期" min-width="120" show-overflow-tooltip></el-table-column>
      <el-table-column prop="name" label="出厂编号" min-width="100" show-overflow-tooltip></el-table-column>
    </el-table>
    <div class="pageNation">
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :current-page="page"
        :page-size="pageSize"
        layout="sizes, prev, pager, next, jumper,total"
        :total="total"
        background
      >
      </el-pagination>
    </div>
  </el-dialog>
</template>
<script>
import {
  getLineListJoggle
} from "@/utils/api/index";
export default {
  data() {
    return {
      isShow: false,
      formdata: {},
      listData: [],
      loading: false,
      seltermid: "", //装置id
      selcmdId: "", //cmdId
      requestId: "",
      page: 1, // 当前页数
      pageSize: 20, // 每页数量
      total: 0, //总条数
    };
  },
  mounted() {},
  methods: {
    //查询
    onSubmit() {
      if (this.formdata.starttime > this.formdata.endtime) {
        return this.$message({
          duration: 1500,
          showClose: true,
          message: "开始日期不能大于结束日期",
          type: "warning",
        });
      }
      this.getlistnr();
    },
    //获取数据
    getlistnr(val) {
      console.log(val);
      this.seltermid = val.id;
      this.selcmdId = val.cmdid;
      this.loading = true;
      getLineListJoggle({
        pageindex: this.page,
        pagesize: this.pageSize,
      })
        .then((res) => {
          this.listData = res.data.list;
          this.total = res.data.total;
          this.loading = false;
        })
    },
    //点击分页
    handleCurrentChange(val) {
      this.page = val;
      this.getlistnr();
    },
    //每页条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.getlistnr();
    },
    display() {
      this.isShow = true;
    },
    hide() {
      this.isShow = false;
    }
  },
};
</script>
<style lang="less" scoped>

</style>
