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" :inline="true" @submit.stop.prevent>
            <el-form-item prop="name" style="width:100%">
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" 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="6" :xl="4" 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="6" :xl="4" 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="6" :xl="4" class="mb20">
                <el-form-item label="设备状态">
                  <el-select  v-model="oilEngineData.filterModel.deviceStatus" placeholder="请输入设备状态" >
                    <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="6" :xl="4" class="mb20">
                <el-form-item label="在线状态">
                  <el-select  v-model="oilEngineData.filterModel.onlineStatus" placeholder="请输入在线状态" >
                    <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="6" :xl="4" class="mb20">
                <el-form-item>
                  <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
                  <el-button type="primary" icon="ele-RefreshRight" @click="onReset"> 重置 </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 v-loading="oilEngineData.loading" stripe :data="oilEngineData.tableModel" row-key="id" style="width: 100%">
            <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">
                  {{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">
                  {{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"
                  size="small"
                  :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="oilEngineData.pageInput.currentPage"
              v-model:page-size="oilEngineData.pageInput.pageSize"
              :total="oilEngineData.total"
              :default-page-size="5"
              :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">

import { onBeforeMount, onMounted, reactive,ref } 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";

/**获取全局缓存*/
const globalCacheStore = useGlobalCacheStore()
// /**油机列表 - 列表状态 */
// const oilEngineStatusType = ref(globalCacheStore.getGlobalStore().get('oilEngineStatusType'))
/**油机列表 - 列表设备状态、在线状态 */
const oilEngineStatus = ref(globalCacheStore.getGlobalStore().get('oilEngineStatus'))
/**
 * 油机列表数据对象
 */
  const oilEngineData = reactive({
  loading: false,
  filterModel: {
    /**油机号*/
    name: "",
     /**加油站*/
    gasStation:"",
    /**加油机机型*/
    model: "",
    /**设备状态*/
    deviceStatus: "",
    /**在线状态*/
    onlineStatus: "",
  }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 onReset = () => {
  resetQuery()
  init()
}
/**条件查询 */
const onQuery = () => {
  init()
}
/**页条数变化*/
const onSizeChange = () => {
  init()
}

/**页数变化*/
const onCurrentChange = () =>{
  init()
}
const toPage = (row) => {
  router.push({path:`/statement/${row.fuelId}`})
}
// /**油机列表 - 列表状态 */
// 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
  const query = flattenObject({ filterModel: oilEngineData.filterModel})
  const res:any = await new ListOfOilEnginesApi().getPage({...oilEngineData.pageInput, filter:oilEngineData.filterModel})
  oilEngineData.tableModel = res?.data?.list ?? []
  oilEngineData.total = res?.data?.total ?? 0
  oilEngineData.loading = false
}
/**重置查询条件 */
const resetQuery = () => {
  oilEngineData.filterModel.name = ''
  oilEngineData.filterModel.gasStation = ''
  oilEngineData.filterModel.model = ''
  oilEngineData.filterModel.deviceStatus = ''
  oilEngineData.filterModel.onlineStatus = ''
}

//设置不同设备状态、在线状态字体颜色
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(() => {
  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;
}
</style>