style(部件类型):修改"添加"按钮位置

feat(油机列表):对接油机列表API
style(油机列表):隐藏“操作”列，修改“设备状态”、“在线状态”列的字体样式

admin.ui.plus-master/src/api/admin/reportManagement/listOfOilEngines/listOfOilEnginesApi.ts

@@ -1,4 +1,5 @@
-import {HttpClient} from "/@/api/admin/http-client";
+import {ContentType, HttpClient, RequestParams} from "/@/api/admin/http-client";
+import {PageInputFuelDispenserDto,ResultOutputPageOutputFuelDispenserDto} from "/@/api/admin/reportManagement/listOfOilEngines/listOfOilEnginesDto";;
 
 export class ListOfOilEnginesApi <SecurityDataType = unknown> extends HttpClient<SecurityDataType> {
 
@@ -8,13 +9,22 @@ export class ListOfOilEnginesApi <SecurityDataType = unknown> extends HttpClient
   * @tags List
   * @name GetPage
   * @summary 查询分页
-  * @request GET:
+  * @request POST:
   * @secure
   */
 
   timer = 200
-
-  getPage = () =>
+  getPage = (data: PageInputFuelDispenserDto, params: RequestParams = {}) =>
+    this.request<ResultOutputPageOutputFuelDispenserDto, any>({
+      path: `/api/app/fuel-dispenser/get-download-record`,
+      method: 'POST',
+      body: data,
+      secure: true,
+      type: ContentType.Json,
+      format: 'json',
+      ...params,
+    })
+  getPage2 = () =>
     new Promise(resolve => {
       setTimeout(() => {
         resolve({

admin.ui.plus-master/src/api/admin/reportManagement/listOfOilEngines/listOfOilEnginesDto.ts

@@ -0,0 +1,102 @@
+/**
+ * And=0,Or=1
+ * @format int32
+ */
+export type DynamicFilterLogic = 0 | 1
+
+/**
+ * Contains=0,StartsWith=1,EndsWith=2,NotContains=3,NotStartsWith=4,NotEndsWith=5,Equal=6,Equals=7,Eq=8,NotEqual=9,GreaterThan=10,GreaterThanOrEqual=11,LessThan=12,LessThanOrEqual=13,Range=14,DateRange=15,Any=16,NotAny=17,Custom=18
+ * @format int32
+ */
+export type DynamicFilterOperator = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18
+export interface DynamicFilterInfo {
+  field?: string | null
+  /** Contains=0,StartsWith=1,EndsWith=2,NotContains=3,NotStartsWith=4,NotEndsWith=5,Equal=6,Equals=7,Eq=8,NotEqual=9,GreaterThan=10,GreaterThanOrEqual=11,LessThan=12,LessThanOrEqual=13,Range=14,DateRange=15,Any=16,NotAny=17,Custom=18 */
+  operator?: DynamicFilterOperator
+  value?: string
+  /** And=0,Or=1 */
+  logic?: DynamicFilterLogic
+  filters?: DynamicFilterInfo[] | null
+}
+/**
+ * 油机列表查询信息
+ */
+export  interface FuelDispenserDto_SearchFilter{
+  /**加油机名称*/
+  name?: string,
+  /**加油机机型*/
+  model?: string,
+  /**设备状态*/
+  deviceStatus?: string,
+  /**在线状态*/
+  onlineStatus?: string,
+}
+
+/**
+ * 油机列表信息
+ */
+export  interface FuelDispenserDto{
+  /**加油机名称*/
+  name?: string,
+  /**石油公司*/
+  oilCompany?: string,
+  /**加油站*/
+  gasStation?: string,
+  /**序列号*/
+  serialNumber?: string,
+  /**加油机机型*/
+  model?: string,
+  /**加油机枪数量*/
+  gunCount?: number,
+  /**加油机厂商*/
+  manufacturer?: string,
+  /**出厂时间*/
+  manufactureDate?: string,
+  /**启动时间*/
+  startupDate?: string,
+  /**安装时间*/
+  installationDate?: string,
+  /**设备状态*/
+  deviceStatus?: string,
+  /**在线状态*/
+  onlineStatus?: string
+}
+
+/** 分页信息输出*/
+export interface PageOutputFuelDispenserDto{
+  /**
+   * 数据总数
+   * @format int64
+   */
+  total?: number
+  /** 数据 */
+  list?: FuelDispenserDto[] | null
+}
+
+/**结果输出*/
+export interface ResultOutputPageOutputFuelDispenserDto{
+  /** 是否成功标记 */
+  success?: boolean
+  /** 编码 */
+  code?: string | null
+  /** 消息 */
+  msg?: string | null
+  /** 分页信息输出 */
+  data?: PageOutputFuelDispenserDto
+}
+
+/** 分页信息输入 */
+export interface PageInputFuelDispenserDto{
+  /**
+   * 当前页标
+   * @format int32
+   */
+  CurrentPage?: number
+  /**
+   * 每页大小
+   * @format int32
+   */
+  PageSize?: number
+  dynamicFilter?: DynamicFilterInfo
+  filter?: FuelDispenserDto_SearchFilter
+}

admin.ui.plus-master/src/stores/globalCacheStore.ts

@@ -17,7 +17,8 @@ const arr =
     'groupKeyGroupStatus',
     'softwareType',
     'equipmentType',
-    'softwarePackageStatus'
+    'softwarePackageStatus',
+    'oilEngineStatus'
   ]
 
 export const useGlobalCacheStore = defineStore('globalCacheStore', {

admin.ui.plus-master/src/views/admin/product/type/index.vue

@@ -32,10 +32,8 @@
               </el-col>
             </el-form-item>
           </el-form>
-            <div class="my-flex my-flex-start">
-              <el-button  type="primary" icon="ele-CirclePlus" @click="onAdd"> 添加 </el-button>
-            </div>
             <div class="my-flex my-flex-end">
+              <el-button  type="primary" icon="ele-CirclePlus" @click="onAdd"> 添加 </el-button>
               <el-button type="primary" icon="ele-UploadFilled" @click="uploadFiles"> 批量导入 </el-button>
               <el-button type="primary" icon="ele-Document" @click="exportTable"> 导出表格 </el-button>
             </div>

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

@@ -4,11 +4,26 @@
       <!--操作-->
       <el-col :xs="24">
         <el-card class="mt8" shadow="hover">
-          <el-form :model="oilEngineOnQuery.filter" :inline="true" @submit.stop.prevent>
+          <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="GUID">
-                  <el-input v-model="oilEngineOnQuery.filter.guid" placeholder="请输入GUID" clearable></el-input>
+                <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.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-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-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">
@@ -24,29 +39,32 @@
       <!--列表-->
       <el-col :xs="24">
         <el-card style="height: 70vh"  class="my-fill mt8" shadow="hover">
-          <el-table  v-loading="state.loading" stripe :data="state.list" row-key="id" style="width: 100%">
-            <el-table-column type="index" label="序号" width="60"/>
-            <el-table-column prop="id" label="GUID"  />
-            <el-table-column prop="name" label="名称"  >
+          <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 }">
-                {{ row.name}}
+                <div :style="{color:getColor(getOilEngineStatus(row.deviceStatus))}" class="bold-font">
+                  {{getOilEngineStatus(row.deviceStatus)}}
+                </div>
               </template>
             </el-table-column>
-            <el-table-column prop="oilCompanies" label="石油公司"  >
+            <el-table-column prop="onlineStatus" label="在线状态" >
               <template #default="{ row }">
-                {{ row.oilCompanies}}
+                <div :style="{color:getColor(getOilEngineStatus(row.onlineStatus))}" class="bold-font">
+                  {{getOilEngineStatus(row.onlineStatus)}}
+                </div>
               </template>
             </el-table-column>
-            <el-table-column prop="gasStation" label="加油站"  />
-            <el-table-column prop="serialNumber" label="序列号" />
-            <el-table-column prop="model" label="加油机机型" />
-            <el-table-column prop="quantity" label="加油机枪数量" />
-            <el-table-column prop="manufacturer" label="加油机厂商" />
-            <el-table-column prop="factoryTime" label="出厂时间" />
-            <el-table-column prop="startTime" label="启动时间" />
-            <el-table-column prop="equipmentStatus" label="设备状态" />
-            <el-table-column prop="onlineStatus" label="在线状态" />
-            <el-table-column label="操作"  fixed="right" header-align="center" align="center" class="right-operation" width="100">
+            <!-- <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"
@@ -58,13 +76,13 @@
                   target="_blank"
                 >详情</el-link>
               </template>
-            </el-table-column>
+            </el-table-column> -->
           </el-table>
           <div class="my-flex my-flex-end" style="margin-top: 20px">
             <el-pagination
-              v-model:currentPage="state.pageInput.currentPage"
-              v-model:page-size="state.pageInput.pageSize"
-              :total="state.total"
+              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
@@ -82,76 +100,152 @@
 
 <script setup lang="ts">
 
-import {onMounted, reactive} from "vue";
+import { onBeforeMount, onMounted, reactive,ref } from "vue";
 import {ListOfOilEnginesApi} from "/@/api/admin/reportManagement/listOfOilEngines/listOfOilEnginesApi";
-import router from "/@/router";
-
-/**
- * 油机列表查询时的参数
- */
-const oilEngineOnQuery = reactive({
-  filter: {
-    guid:''
-  }
-})
+import {FuelDispenserDto_SearchFilter,PageInputFuelDispenserDto,FuelDispenserDto} from "/@/api/admin/reportManagement/listOfOilEngines/listOfOilEnginesDto";
+import eventBus from "/@/utils/mitt";
+import {useGlobalCacheStore} from "/@/stores/globalCacheStore";
 
+/**获取全局缓存*/
+const globalCacheStore = useGlobalCacheStore()
+// /**油机列表 - 列表状态 */
+// const oilEngineStatusType = ref(globalCacheStore.getGlobalStore().get('oilEngineStatusType'))
+/**油机列表 - 列表设备状态、在线状态 */
+const oilEngineStatus = ref(globalCacheStore.getGlobalStore().get('oilEngineStatus'))
 /**
  * 油机列表数据对象
  */
-const state = reactive({
+  const oilEngineData = reactive({
   loading: false,
-  list:  [] ,
-  pageInput:{
+  filterModel: {
+    /**加油机名称*/
+    name: "",
+    /**加油机机型*/
+    model: "",
+    /**设备状态*/
+    deviceStatus: "",
+    /**在线状态*/
+    onlineStatus: "",
+  }as FuelDispenserDto_SearchFilter,
+  total: 0,
+  pageInput: {
     currentPage: 1,
     pageSize: 10,
-  },
-  total: 0
+  } as PageInputFuelDispenserDto,
+  tableModel: [] as Array<FuelDispenserDto>,
+  // /**动态表头 */
+  // dynamicColumns: [
+  //   { prop: 'name', label: '加油机名称' },
+  //   { prop: 'oilCompany', label: '石油公司' },
+  //   { prop: 'gasStation', label: '加油站' },
+  //   { prop: 'serialNumber', label: '序列号' },
+  //   { prop: 'model', label: '加油机机型' },
+  //   { prop: 'gunCount', label: '加油机枪数量' },
+  //   //{ prop: ' manufacturer', label: '加油机厂商' },
+  //   { prop: 'manufactureDate', label: '出厂时间' },
+  //   { prop: 'startupDate', label: '启动时间' },
+  //   { prop: 'installationDate', label: '安装时间' },
+  //   { prop: 'deviceStatus', label: '设备状态' },
+  //   { prop: 'onlineStatus', label: '在线状态' },
+  // ]
 })
-
-const resetForm = () => {
-  oilEngineOnQuery.filter = {
-    guid:''
+/**将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];
+      }
+    }
   }
-}
 
-const onReset = () => {
-  resetForm()
-  state.pageInput.currentPage = 1
-  onQuery()
+  return result;
 }
 
-/**
- * 页条变化
- * @param val
- */
-const onSizeChange = (val: number) => {
-  state.pageInput.pageSize = val
-  onQuery()
+/**初始化 */
+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.model = ''
+  oilEngineData.filterModel.deviceStatus = ''
+  oilEngineData.filterModel.onlineStatus = ''
 }
 
-/**
- * 页数 变化
- * @param val
- */
-const onCurrentChange = (val: number) => {
-  state.pageInput.currentPage = val
-  onQuery()
+/**重置 */
+const onReset = () => {
+  resetQuery()
+  init()
+}
+/**条件查询 */
+const onQuery = () => {
+  init()
+}
+/**页条数变化*/
+const onSizeChange = () => {
+  init()
 }
 
-const onQuery =  async () => {
-  state.loading = true
-  const { total, list } = await new ListOfOilEnginesApi().getPage()
-  state.list = list
-  state.total = total
-  state.loading = false
+/**页数变化*/
+const onCurrentChange = () =>{
+  init()
+}
+// const toPage = (row) => {
+//   router.push({path:`/statement/${row.id}`})
+// }
+// /**油机列表 - 列表状态 */
+// 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 toPage = (row) => {
-  router.push({path:`/statement/${row.id}`})
+//设置不同设备状态、在线状态字体颜色
+const getColor = (value: string): string => {
+  if (value === '在线'||value === '启用') {
+    return '#41b584';
+  } else if (value === '出厂注册') {
+      return '#409eff';
+  } else if(value === '备案') {
+    return '#E6A23C';
+  }else{
+    return '#F34D37'
+  }
 }
 
 onMounted(() => {
-  onQuery()
+  init()
+  eventBus.off('refreshView')
+  eventBus.on('refreshView', async () => {
+    await init()
+  })
+})
+onBeforeMount(() => {
+  eventBus.off('refreshView')
 })
 
 </script>