xy-frontend/src/views/photographicDevice/components/workStatus.vue

<template>
  <el-dialog
    class="workStatus"
    title="工作状态"
    :visible.sync="isShow"
    :close-on-click-modal="false"
    width="1280px"
  >
    <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"
    >
      <template slot="empty">
        <el-empty :image-size="160" description="暂无数据"></el-empty>
      </template>
      <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
      >
        <template slot-scope="scope">{{
          scope.row.name == 0 ? "充电" : "放电"
        }}</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="100"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="name"
        label="网络连接状态"
        min-width="100"
        show-overflow-tooltip
      >
        <template slot-scope="scope">{{
          scope.row.name == 0 ? "已连接" : "未连接"
        }}</template>
      </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>
    <div slot="footer" class="dialog-footer">
      <el-button @click="isShow = false">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getLineListJoggle } from "@/utils/api/index";
export default {
  data() {
    return {
      isShow: false,
      formdata: {},
      listData: [
        {
          name: "测试",
        },
        {
          name: "测试2",
        },
      ],
      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">
.workStatus {
  .pageNation {
    justify-content: flex-start;
    margin-top: 16px;
    .el-pagination {
      padding: 0px;
      .el-select .el-input {
        margin-left: 0px;
      }
    }
  }
}
</style>