Web/admin.ui.plus-master/src/views/admin/statement/partsManagement/encoder/index.vue

<template>
  <div class="layout-pd">
    <el-row>
      <!--操作-->
      <el-col :xs="24">
        <el-card class="mt8" shadow="hover">
          <el-form :model="Data.Filter" @submit.stop.prevent>
            <el-form-item prop="name" style="width: 100%">
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
                <el-form-item label="序列号">
                  <el-input v-model="Data.Filter.sn" placeholder="请输入序列号" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
                <el-form-item label="在线状态">
                  <el-select v-model="Data.Filter.onlineStatus" placeholder="请选择在线状态">
                    <el-option v-for="(value, key) in selectList.Online" :key="key" :label="value" :value="key" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
                <el-form-item label="设备状态">
                  <el-select v-model="Data.Filter.deviceStatus" placeholder="请选择设备状态">
                    <el-option v-for="(value, key) in selectList.Device" :key="key" :label="value" :value="key" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
                <el-form-item label="报警级别">
                  <el-select v-model="Data.Filter.deviceAlarmLevel" placeholder="请选择报警级别">
                    <el-option v-for="(value, key) in selectList.Level" :key="key" :label="value" :value="key" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-form>

          <hr>

          <!-- 按钮 -->
          <el-row justify="space-between" class="submit-button">
            <el-row>
              <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
              <el-button type="primary" icon="ele-RefreshRight" @click="onReset"> 重置 </el-button>
            </el-row>
          </el-row>
        </el-card>
      </el-col>
      <!--表格-->
      <el-col :xs="24">
        <el-card style="height: 70vh" class="my-fill mt8" shadow="hover">
          <el-table ref="multipleTableRef" v-loading="Data.loading" stripe :data="Data.tableModel" row-key="id"
            style="width: 100%">
            <el-table-column v-for="column in Data.dynamicColumns" :key="column.prop" :prop="column.prop"
              :label="column.label" />
          </el-table>
          <div class="my-flex my-flex-end" style="margin-top: 20px">
            <el-pagination v-model:currentPage="Data.pageInput.CurrentPage" v-model:page-size="Data.pageInput.PageSize"
              :total="Data.total" :page-sizes="[5, 10, 20, 50, 100]" small background @size-change="onSizeChange"
              @current-change="onCurrentChange" layout="total, sizes, prev, pager, next, jumper" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>

</template>

<script setup lang="ts" name="partsManagement/encoder">
import { onMounted, reactive, ref, watch } from "vue";
import { encoderFilterModel_SearchFilter, encoderFilterModel, PageInputEncoderFilterModel } from "/@/api/admin/reportManagement/encoder/encoderDto";
import { encoderApi } from "/@/api/admin/reportManagement/encoder/encoderApi";

/** 页面对象 */
const Data = reactive({

  /**加载显示 */
  loading: false,
  /**条件查询模块 */
  Filter: {
    /**设备类型 */
    deviceType: "encoderControls",
    /**在线状态 */
    onlineStatus: "",
    /**设备状态 */
    deviceStatus: "",
    /**序列号 */
    sn: "",
    /**设备报警级别 */
    deviceAlarmLevel: ""
  } as encoderFilterModel_SearchFilter,

  /**表格信息 */
  tableModel: [] as Array<encoderFilterModel>,
  /**动态表头 */
  dynamicColumns: [
    { prop: 'sn', label: '序列号' },
    { prop: 'companyName', label: '石油公司' },
    { prop: 'stationName', label: '加油站名称' },
    { prop: 'supplierName', label: '加油机厂商' },
    { prop: 'manufacturerName', label: '编码器厂商' },
    { prop: 'nozzleconName', label: '油枪号' },
    { prop: 'uuid', label: '编码器编号' },
    { prop: 'deviceStatus', label: '编码器状态' },
    { prop: 'onlineStatus', label: '在线状态' },
    { prop: 'soldTime', label: '安装时间' },
    { prop: 'productTime', label: '出厂时间' },
  ],
  /**分页标识 */
  pageInput: {
    CurrentPage: 1,
    PageSize: 10,
  } as PageInputEncoderFilterModel,
  /**分页总数 */
  total: 0,
})
/** 选择框列表 */
const selectList = reactive({
  Online: ["在线", "离线"],
  Device: [
    "启用",
    "备案",
    "维修",
    "出厂注册"],
  Level: [1, 2, 3, 4, 5]
})

onMounted(() => {
  init()
})

/**初始化 */
const init = async () => {
  Data.loading = true
  const res: any = await new encoderApi().getPage({ ...Data.pageInput, filter: Data.Filter })
  Data.tableModel = res?.data ?? []
  Data.total = res?.data?.length ?? 0
  Data.loading = false

}

/**条件查询 */
const onQuery = () => {
  init()
}
/**重置查询条件 */
const resetQuery = () => {
  Data.Filter.onlineStatus = ''
  Data.Filter.deviceStatus = ''
  Data.Filter.sn = ''
  Data.Filter.deviceAlarmLevel = ''
  Data.pageInput.PageSize = 10
  Data.pageInput.CurrentPage = 1
}

/**重置 */
const onReset = () => {
  resetQuery()
  init()
}

/**
* 页条变化
* @param val
*/
const onSizeChange = (val: number) => {
  Data.pageInput.PageSize = val
  onQuery()
}

/**
 * 页数 变化
 * @param val
 */
const onCurrentChange = (val: number) => {
  Data.pageInput.CurrentPage = val
  onQuery()
}

/**
 * 监听时间变换
 */
// watch(() => [Data.time1,Data.time2], (newVal ) => {
//   if(newVal.length === 0){
//     return
//   }
//   Data.Filter.OutBeginTime = newVal?.[0]?.[0]
//   Data.Filter.OutEndTime = newVal?.[0]?.[1]
//   Data.Filter.CreateBeginTime = newVal?.[1]?.[0]
//   Data.Filter.CreateEndTime = newVal?.[1]?.[0]
// })

</script>

<style scoped lang="scss">
@import '/@/theme/tableStyle.scss';

</style>