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

<template>
  <div class="layout-pd">
    <el-row>
      <!--操作-->
      <el-col :xs="24">
        <el-card class="mt8" shadow="hover">
          <el-form :model="oilEngineData.filterModel" @submit.stop.prevent>
            <el-form-item prop="name" style="width:100%">
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                <el-form-item label="油机号">
                  <el-input v-model="oilEngineData.filterModel.name" placeholder="请输入油机号" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                <el-form-item label="加油站">
                  <el-input v-model="oilEngineData.filterModel.gasStation" placeholder="请输入加油站" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                <el-form-item label="加油机机型">
                  <el-input v-model="oilEngineData.filterModel.model" placeholder="请输入加油机机型" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                <el-form-item label="设备状态">
                  <el-select v-model="oilEngineData.filterModel.deviceStatus" placeholder="请输入设备状态">
                    <el-option label="所有" :value="''"></el-option>
                    <el-option v-for="(value, key) in FuelDispenserEnum" :key="key" :label="value" :value="key" />
                  </el-select>
                  <!-- <el-input v-model="oilEngineData.filterModel.deviceStatus" placeholder="请输入设备状态" clearable></el-input> -->
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                <el-form-item label="在线状态">
                  <el-select v-model="oilEngineData.filterModel.onlineStatus" placeholder="请输入在线状态">
                    <el-option label="所有" :value="''"></el-option>
                    <el-option v-for="(value, key) in OnlineStatus" :key="key" :label="value" :value="key" />
                  </el-select>
                  <!-- <el-input v-model="oilEngineData.filterModel.onlineStatus" placeholder="请输入在线状态" clearable></el-input> -->
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                <el-form-item label="序列号">
                  <el-input v-model="oilEngineData.filterModel.serialNumber" placeholder="请输入序列号" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                <el-form-item label="安装时间">
                  <el-date-picker
                  v-model="oilEngineData.filterModel.createTimeRange"
                  value-format="YYYY-MM-DD"
                     type="daterange"
                     range-separator="To"
                     start-placeholder="开始时间"
                     end-placeholder="结束时间"
                     :clearable="false"
                   ></el-date-picker>
                 </el-form-item>
               </el-col>   

            </el-form-item>
          </el-form>

          <hr>

          <!-- 按钮 -->
          <el-row justify="space-between" class="submit-button" style="margin-bottom:-6px">
            <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-button  type="primary" icon="ele-Document" @click="exportDataToExcel"> 导出 </el-button>
          </el-row>
        </el-card>
      </el-col>
      <!--列表-->
      <el-col :xs="24">
        <el-card class="my-fill mt8" shadow="hover">
          <el-table v-loading="oilEngineData.loading" stripe :data="oilEngineData.tableModel" row-key="id"
            style="width: 100%" id="myTable" ref="myTable">
            <el-table-column prop="name" label="油机号" />
            <el-table-column prop="oilCompany" label="石油公司" />
            <el-table-column prop="gasStation" label="加油站" />
            <el-table-column prop="serialNumber" label="序列号" />
            <el-table-column prop="model" label="加油机机型" />
            <el-table-column prop="gunCount" label="加油机枪数量" />
            <!-- <el-table-column prop="manufacturer"  label="加油机厂商" /> -->
            <el-table-column prop="manufactureDate" label="出厂时间" />
            <el-table-column prop="startupDate" label="启动时间" />
            <el-table-column prop="installationDate" label="安装时间" />
            <el-table-column prop="deviceStatus" label="设备状态">
              <template #default="{ row }">
                <div :style="{ color: getColor(getOilEngineStatus(row.deviceStatus)) }" class="bold-font">
                <StatusBox :status="getOilEngineStatus(row.deviceStatus)" />

                  <!-- {{ getOilEngineStatus(row.deviceStatus) }} -->
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="onlineStatus" label="在线状态">
              <template #default="{ row }">
                <div :style="{ color: getColor(getOilEngineStatus(row.onlineStatus)) }" class="bold-font">
                <StatusBox :status="getOilEngineStatus(row.onlineStatus)" />


                  <!-- {{ getOilEngineStatus(row.onlineStatus) }} -->
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" header-align="center" align="center" class="right-operation"
              width="100">
              <template #default="{ row }">
                <el-link class="my-el-link mr12 ml12" @click="toPage(row)" type="primary" icon="ele-Tickets"
                  :underline="false" target="_blank">详情</el-link>
              </template>
            </el-table-column>
          </el-table>
          <div class="my-flex my-flex-end" style="margin-top: 20px">
             <el-pagination 
              v-model:currentPage="pageState.pageInput.currentPage"
              v-model:page-size="pageState.pageInput.pageSize"
              :total="oilEngineData.total"
              :page-sizes="[5, 10, 15, 20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="onSizeChange"
              @current-change="onCurrentChange"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">

import { onBeforeMount, onMounted, reactive, ref, watch } from "vue";
import { ListOfOilEnginesApi } from "/@/api/admin/reportManagement/listOfOilEngines/listOfOilEnginesApi";
import { FuelDispenserDto_SearchFilter, PageInputFuelDispenserDto, FuelDispenserDto } from "/@/api/admin/reportManagement/listOfOilEngines/listOfOilEnginesDto";
import eventBus from "/@/utils/mitt";
import { useGlobalCacheStore } from "/@/stores/globalCacheStore";
import router from "/@/router";
import StatusBox from "../../../../components/StatusBox.vue";
import { BoardListApi } from '/@/api/admin/PCBA/boardListApi';
import dayjs from 'dayjs';
import { useDynamicPageSize } from "/@/composables/useDynamicPageSize";


// 使用组合式函数获取分页状态
const pageState = useDynamicPageSize(10, 15);

/**获取全局缓存*/
const globalCacheStore = useGlobalCacheStore()
// /**油机列表 - 列表状态 */
// const oilEngineStatusType = ref(globalCacheStore.getGlobalStore().get('oilEngineStatusType'))
/**油机列表 - 列表设备状态、在线状态 */
const oilEngineStatus = ref(globalCacheStore.getGlobalStore().get('oilEngineStatus'))



/**
 * 油机列表数据对象
 */
const oilEngineData = reactive({
  time:'',
  loading: false,
  filterModel: {
    /**油机号*/
    name: "",
    oilCompany:"",
    /**加油站*/
    gasStation: "",
    createTimeRange: [], // 新增属性，用于存储时间范围
    /**加油机机型*/
    model: "",
    /**设备状态*/
    deviceStatus: "",
    /**在线状态*/
    onlineStatus: "",
    /**序列号*/
    serialNumber: "",
    /**开始时间*/
    startDate: null,
    /**结束时间*/
    endDate:null,
    installationDate:"",
    startupDate:"",
  } as FuelDispenserDto_SearchFilter,
  total: 0,
  pageInput: {
    currentPage: 1,
    pageSize: 10,
  } as PageInputFuelDispenserDto,
  tableModel: [] as Array<FuelDispenserDto>
})
/**设备状态*/
enum FuelDispenserEnum {
  enable = '启用',
  register = '备案',
  disable = '维修',
  factory = '出产注册'
}
/**在线状态*/
enum OnlineStatus {
  online = '在线',
  offline = '离线'
}
/**将filterModel对象成.的连接方式*/
const flattenObject = (obj, parentKey = '') => {
  const result = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      const newKey = parentKey ? `${parentKey}.${key}` : key;
      if (typeof obj[key] === 'object' && !Array.isArray(obj[key])) {
        const flattened = flattenObject(obj[key], newKey);
        Object.assign(result, flattened);
      } else {
        result[newKey] = obj[key];
      }
    }
  }

  return result;
}

/** 导出 */
const exportDataToExcel = async () => {
  const res: any = await new ListOfOilEnginesApi().onExportExcel({ ...oilEngineData.pageInput, filter: oilEngineData.filterModel })
}

/**重置 */
const onReset = () => {
  resetQuery()
  init()
}
/**条件查询 */
const onQuery = () => {
  init()
}
// 修改分页处理方法
const onSizeChange = (val: number) => {
  pageState.pageInput.pageSize = val
  oilEngineData.pageInput.pageSize = val
  oilEngineData.pageInput.currentPage = 1 // 通常切换size会回到第一页
  init()
}

const onCurrentChange = (val: number) => {
  pageState.pageInput.currentPage = val
  oilEngineData.pageInput.currentPage = val
  init()
}
const toPage = (row) => {
  router.push({ path: `/statement/${row.fuelId}` })
}

/**
 * 监听时间变换
 */
 watch(
  () => oilEngineData.filterModel.createTimeRange,
  (newVal) => {
    if (newVal && newVal.length === 2) {
      oilEngineData.filterModel.startDate = newVal[0]; // yyyy-MM-dd 格式
      oilEngineData.filterModel.endDate = newVal[1];
    } else {
      oilEngineData.filterModel.startDate = null;
      oilEngineData.filterModel.endDate = null;
    }
  }
);

// /**油机列表 - 列表状态 */
// const getOilEngineStatusType = (val) => {
//   val = String(val)
//   if(oilEngineStatusType.value?.has(val)){
//     return oilEngineStatusType.value.get(val)
//   }else {
//     return val
//   }
// }
/**油机列表 - 列表设备状态、在线状态 */
const getOilEngineStatus = (val) => {
  val = String(val)
  if (oilEngineStatus.value.has(val)) {
    return oilEngineStatus.value.get(val)
  } else {
    return val
  }
}
/**初始化 */
const init = async () => {
  oilEngineData.loading = true
  try {
    const res = await new ListOfOilEnginesApi().getPage({
      currentPage: oilEngineData.pageInput.currentPage,  // 使用小写
      pageSize: oilEngineData.pageInput.pageSize,      // 使用小写
      filter: oilEngineData.filterModel
    })
    console.log('API Response:', res)
    oilEngineData.tableModel = res?.data?.list ?? []
    oilEngineData.total = res?.data?.total ?? 0
  } finally {
    oilEngineData.loading = false
  }
}

/**重置查询条件 */
const resetQuery = () => {
  oilEngineData.filterModel.name = ''
  oilEngineData.filterModel.gasStation = ''
  oilEngineData.filterModel.model = ''
  oilEngineData.filterModel.deviceStatus = ''
  oilEngineData.filterModel.onlineStatus = ''
  oilEngineData.filterModel.installationDate = ''
  oilEngineData.filterModel.serialNumber = ''
  oilEngineData.filterModel.createTimeRange = null
}

//设置不同设备状态、在线状态字体颜色
const getColor = (value: string): string => {
  if (value === '在线' || value === '启用') {
    return '#41b584';
  } else if (value === '出厂注册') {
    return '#409eff';
  } else if (value === '备案') {
    return '#E6A23C';
  } else {
    return '#F34D37'
  }
}
// /**油机列表 - 列表状态 */
// const getOilEngineStatusType = (val) => {
//   val = String(val)
//   if(oilEngineStatusType.value?.has(val)){
//     return oilEngineStatusType.value.get(val)
//   }else {
//     return val
//   }
// }


onMounted(() => {
 // 初始化分页大小
  oilEngineData.pageInput.pageSize = pageState.pageInput.pageSize;
  oilEngineData.pageInput.currentPage = 1; // 初始化时重置为第一页
  init()
  eventBus.off('refreshView')
  eventBus.on('refreshView', async () => {
    await init()
  })
})
onBeforeMount(() => {
  eventBus.off('refreshView')
})



</script>

<style scoped lang="scss">
.el-input,
.el-select,
 {
  width: 240px;
}

.el-date-picker {
  width: 240px !important;
}


/* 输入框标签固定四个字符宽度 */
::v-deep .el-form-item__label {
  // 字体大小14，5个字符，12px右间距
  width: 14*5px+12px;
  justify-content: start;
}

/* 数据表头 设置灰色样式 */
::v-deep .el-table th.el-table__cell {
  background-color: #F6F6F6;
}
</style>