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

<template>
    <div class="layout-pd" >
      <el-row>
        <!--操作-->
        <el-col :xs="24" >
          <el-card class="mt8"  shadow="hover" >
            <el-form :model="sdkData.Filter" :inline="true" @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="sdkData.Filter.OilCompanies"  placeholder="请输入石油公司" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="12" :xl="4" class="mb20">
                  <el-form-item label="出厂时间">
                    <el-date-picker
                      v-model="sdkData.time"
                      type="datetimerange"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      range-separator="To"
                      start-placeholder="Start date"
                      end-placeholder="End date"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
                  <el-form-item label="站点地址">
                    <el-input v-model="sdkData.Filter.SiteAddress" placeholder="请输入站点地址" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="12" :xl="4" class="mb20">
                  <el-form-item label="安装时间">
                    <el-date-picker
                      v-model="sdkData.time"
                      type="datetimerange"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      range-separator="To"
                      start-placeholder="Start date"
                      end-placeholder="End date"
                    />
                  </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="sdkData.Filter.Manufacturer" placeholder="请选择加油机厂商" >
                        <el-option v-for="(value, key) in 1" :key="key" :label="1"  :value="1" />
                    </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="sdkData.Filter.State" placeholder="请选择监控微处理器状态" >
                        <el-option v-for="(value, key) in 1" :key="key" :label="1"  :value="1" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
                  <el-form-item>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" class="mb20">
                  <el-form-item>
                    <el-button type="primary" icon="ele-Search" @click="1"> 查询 </el-button>
                    <el-button type="primary" icon="ele-RefreshRight" @click="1"> 重置 </el-button>
                  </el-form-item>
                </el-col>
              </el-form-item>
            </el-form>
          </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="sdkData.loading"
              stripe :data="sdkData.tableModel"
              row-key="id"
              style="width: 100%" >
              <el-table-column type="selection" width="50"></el-table-column>
              <el-table-column v-for="column in sdkData.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="sdkData.pageInput.CurrentPage"
                v-model:page-size="sdkData.pageInput.PageSize"
                :total="sdkData.total"
                :page-sizes="[10000, 20000, 50000, 100000]"
                small
                background
                @size-change="1"
                @current-change="1"
                layout="total, sizes, prev, pager, next, jumper"
              />
            </div>
          </el-card>
        </el-col>
      </el-row>
      <EditDialog ref="editDialogRef" />
      <AuditDialog ref="auditDialogRef" />
    </div>
  
  </template>
  
  <script setup lang="ts" name="authorize/fuelingsdk">
  import {defineAsyncComponent, onMounted, reactive, ref, watch, onBeforeMount,getCurrentInstance} from "vue";
  import { ElTable } from 'element-plus'
  /**引入组件*/
  
  /**sdk授权页面对象 */
  const sdkData = reactive({
    time:'',
    /**加载显示 */
    loading: false,
    /**条件查询模块 */
    Filter: {
      /**石油公司 */
      OilCompanies: "",
      /**监控微处理器状态 */
      State: "",
      /**站点地址*/
      SiteAddress: "",
      /**加油机厂商*/
      Manufacturer: "",
      /**出厂开始的时间 */
      OutBeginTime: null,
      /**出厂结束的时间 */
      OutEndTime: null,
      /**安装开始的时间 */
      CreateBeginTime: null,
      /**安装结束的时间 */
      CreateEndTime: null,
    } ,
    /**表格信息 */
    tableModel: [] ,
    /**动态表头 */
    dynamicColumns: [
      { prop: 'guid', label: '编号' },
      { prop: 'oilCompanies', label: '石油公司' },
      { prop: 'gasStation', label: '加油站名称' },
      { prop: 'manufacturer', label: '加油机厂商' },
      { prop: 'monitorCpu', label: '监控微处理器厂商' },
      { prop: 'oilEnginesId', label: '油机号' },
      { prop: 'oilGunId', label: '油枪号' },
      { prop: 'monitorCpuNo', label: '监控微处理器版本号' },
      { prop: 'monitorCpuId', label: '监控微处理器编号' },
      { prop: 'monitorCpuState', label: '监控微处理器状态' },
      { prop: 'onlineState', label: '在线状态' },
      { prop: 'createTime', label: '安装时间' },
      { prop: 'outTime', label: '出厂时间' },
    ],
    /**分页标识 */
    pageInput:{
      CurrentPage: 1,
      PageSize: 10000,
    } ,
    /**分页总数 */
    total: 0,
  } )
  
//   /**初始化 */
//   const init = async () => {
//     sdkData.loading = true
//     const query = flattenObject({ Filter: sdkData.Filter})
//     const res:any = await new OilSdkAuthorAPI().getPageData({...sdkData.pageInput, ...query}).catch(() => {
//       sdkData.loading = false
//     })
//     sdkData.tableModel = res?.data?.list ?? []
//     sdkData.total = res?.data?.total ?? 0
//     sdkData.loading = false
//   }
  
//   onMounted(() => {
//     init()
//     eventBus.off('refreshView')
//     eventBus.on('refreshView', async () => {
//       init()
//     })
//   })
  
//   onBeforeMount(() => {
//     eventBus.off('refreshView')
//   })
  
//   /**
//    * 监听时间变换
//    */
//   watch(() => sdkData.time, (newVal ) => {
//     if(newVal.length === 0){
//       return
//     }
//     sdkData.Filter.BeginTime = newVal?.[0].toString()
//     sdkData.Filter.EndTime = newVal?.[1].toString()
//   })
  
//   /**条件查询 */
//   const onQuery = () => {
//     init()
//   }
  
  /**重置查询条件 */
//   const resetQuery = () => {
//     sdkData.Filter.OilCompanies = ''
//     sdkData.Filter.AntiCheatingState = ''
//     sdkData.Filter.OilGunState = ''
//     sdkData.Filter.SiteAddress = ''
//     sdkData.Filter.Manufacturer =  ''
//     sdkData.Filter.OutBeginTime = ''
//     sdkData.Filter.OutEndTime = ''
//     sdkData.Filter.CreateBeginTime = ''
//     sdkData.Filter.CreateEndTime = ''
//     sdkData.time = ''
//     sdkData.pageInput.CurrentPage = 1
//   }
  
//   /**重置 */
//   const onReset = () => {
//     resetQuery()
//     init()
//   }
  

  
  </script>
  
  <style scoped lang="scss">
  .my-el-link {
    font-size: 14px;
  }
  .el-form .el-col.mb20 {
    margin: 0 !important;
  }
  .el-input, .el-select {
    width: 240px;
  }
  </style>