Web/admin.ui.plus-master/src/views/admin/statement/alarmManagement/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="8" :xl="4" class="mb20">
                  <el-form-item label="加油站">
                    <el-input v-model="sdkData.Filter.GasStation"  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-input v-model="sdkData.Filter.AlarmType" 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="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-input v-model="sdkData.Filter.OilEnginesId" 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>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="8" :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>
                  </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: "",
      /**加油站 */
      GasStation: "",
      /**报警类型*/
      AlarmType: "",
      /**加油机厂商*/
      Manufacturer: "",
      /**加油机序列号 */
      OilEnginesId: "",
      /**创建开始的时间 */
      CreateBeginTime: null,
      /**创建结束的时间 */
      CreateEndTime: null,
    } ,
    /**表格信息 */
    tableModel: [] ,
    /**动态表头 */
    dynamicColumns: [
      { prop: 'guid', label: '编号' },
      { prop: 'oilCompanies', label: '石油公司' },
      { prop: 'gasStation', label: '加油站名称' },
      { prop: 'manufacturer', label: '加油机厂商' },
      { prop: 'oilEngines', label: '加油机' },
      { prop: 'oilEnginesType', label: '加油机型号' },
      { prop: 'oilEnginesId', label: '加油机序列号' },
      { prop: 'oilGun', label: '油枪' },
      { prop: 'alarm', label: '报警设备' },
      { prop: 'alarmType', label: '报警类型' },
      { prop: 'describe', label: '报警描述' },
      { prop: 'source', label: '来源' },
      { prop: 'alarmTime', 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>