ECS5 / ECS5.0Web · Files

<template>
  <div class="app-container">
    <el-form
      :model="queryConfig"
      ref="queryConfig"
      label-width="110px"
      style="margin-top: 15px"
      class="demo-queryConfig"
    >
      <el-row :gutter="10">
        <el-col :span="4">
          <el-form-item label="设备编码：" prop="">
            <el-input
              v-model="queryConfig.equipmentCode"
              placeholder="请选择设备编码"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="设备名称：" prop="">
            <el-input
              v-model="queryConfig.equipmentName"
              placeholder="请选择设备名称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="设备状态：" prop="">
            <el-select
              v-model="queryConfig.equipmentStatus"
              placeholder="请选择设备类型"
            >
              <el-option
                v-for="item in deviceType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="记录状态：" prop="">
            <el-select
              v-model="queryConfig.recordStatus"
              placeholder="请选择设备类型"
            >
              <el-option
                v-for="item in recordStatus"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="开始时间">
            <el-date-picker
              v-model="queryConfig.startTime"
              type="datetime"
              placeholder="选择日期时间"
              style="width: 99%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="结束时间">
            <el-date-picker
              v-model="queryConfig.endTime"
              type="datetime"
              placeholder="选择日期时间"
              style="width: 99%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="23" class="button-col">
          <el-form-item label="" prop="">
            <el-button
              icon="el-icon-search"
              class="T1"
              @click="btnAction()"
              type="primary"
              size="small"
              >查询</el-button
            >
            <el-button
              class="T1"
              size="small"
              icon="el-icon-download"
              @click="ExportList()"
              >导出</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="table">
      <el-table
        :data="tableData"
        border
        highlight-current-row
        :height="TableHeight"
        @selection-change="handleSelectionChange"
        :header-cell-style="{ color: '#000000' }"
      >
        <el-table-column prop="id" label="id" width="80"> </el-table-column>
        <el-table-column prop="equipmentCode" label="设备编码">
        </el-table-column>
        <el-table-column prop="equipmentName" label="设备名称">
        </el-table-column>
        <el-table-column prop="equipmentStatus" label="设备状态">
        </el-table-column>
        <el-table-column prop="isEnd" label="是否结束"> </el-table-column>
        <el-table-column prop="duration" label="持续时间" width="160">
        </el-table-column>
        <el-table-column prop="startTime" label="开始时间" width="160">
        </el-table-column>
        <el-table-column prop="endTime" label="结束时间" width="160">
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          style="margin-top: 15px"
          align="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryConfig.currentPage"
          :page-sizes="[20, 50, 100]"
          :page-size="queryConfig.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        />
      </div>
    </div>
  </div>
</template>
<script>
import {
  GetDictWithDetailsLangs,
  GetEquipmentStatusRecordDtosByPage,
} from "@/api/deviceManage/deviceStateManage";
import downloadFile from "@/api/user";
export default {
  data() {
    return {
      activeName: "alarmMessage",
      tableData: [],
      tableDataTwo: [],
      //查询条件
      queryConfig: {
        currentPage: 1,
        pageSize: 20,
        equipmentCode: "",
        equipmentName: "",
        equipmentStatus: "",
        recordStatus: "",
        startTime: this.$moment()
          .subtract(7, "days")
          .format("YYYY-MM-DD 00:00:00"),
        endTime: this.$moment().add(1, "days").format("YYYY-MM-DD 23:59:59"),
      },
      //新增修改条件
      elAddDialog: {
        code: "",
        name: "",
        equipmentTypeId: 0,
        connectName: "",
        ip: "",
        destinationArea: "",
        description: "",
        disable: false,
        recordType: "",
      },
      total: 0,
      deviceType: [],
      recordStatus: [],
      multipleSelection: [],
      export: "http://localhost:5221/api/Equipment/ExportEquipmentStatusRecord",
    };
  },
  created() {
    this.dictionary("EquipmentStatuses");
    this.dictionary("RecordStatuses");
    this.getTableList();
  },
  computed: {
    TableHeight() {
      return `calc(100vh - 350px )`;
    },
  },
  methods: {
    btnAction() {
      this.getTableList();
    },
    dictionary(data) {
      let params = { Code: data };
      GetDictWithDetailsLangs(params).then((response) => {
        response.data.dictDetails.forEach((x) => {
          if (data == "EquipmentStatuses") {
            this.deviceType.push({ value: x.value, label: x.name });
            if (this.deviceType.length > 0) {
              this.queryConfig.equipmentStatus = this.deviceType[0].value;
            }
          } else if (data == "RecordStatuses") {
            this.recordStatus.push({ value: x.value, label: x.name });
            if (this.recordStatus.length > 0) {
              this.queryConfig.recordStatus = this.recordStatus[0].value;
            }
          }
        });
      });
    },
    //表格数据
    getTableList() {
      const params = {
        pageNumber: this.queryConfig.currentPage,
        perPageCount: this.queryConfig.pageSize,
        queryConfig: this.queryConfig,
      };
      this.listLoading = true;
      GetEquipmentStatusRecordDtosByPage(params).then((response) => {
        this.total = response.data.totalCount;
        response.data.data.forEach((x) => {
          if (x.isEnd == true) {
            x.isEnd = "是";
          } else {
            x.isEnd = "否";
          }
        });
        this.tableData = response.data.data;
        this.listLoading = false;
      });
    },
    //d导出
    ExportList() {
      const params = {
        pageNumber: this.queryConfig.currentPage,
        perPageCount: this.queryConfig.pageSize,
        queryConfig: this.queryConfig,
      };
      let text = "设备状态信息数据.xlsx";
      // 调用下载函数
      downloadFile(this.export, params, text);
    },
    //获取表格行数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //分页
    handleSizeChange(val) {
      this.queryConfig.pageSize = val;
      this.queryConfig.currentPage = 1;
      this.getTableList();
    },
    handleCurrentChange(val) {
      this.queryConfig.currentPage = val;
      this.getTableList();
    },
  },
};
</script>
<style>
.el-row {
  margin-bottom: 5px;
}
.table {
  border: 1px solid #e5e9f2;
}
.T1 {
  border: 1px solid #b3d8ff;
}
.pagination-container {
  text-align: center; /* 使分页组件靠右 */
  margin-top: 20px; /* 添加顶部间距 */
}
.button-col {
  display: flex;
  justify-content: flex-end; /* 按钮靠右对齐 */
}
.custom-input .el-input__inner {
  background-color: #ffeb3b; /* 设置输入框背景颜色为黄色 */
}
</style>