feat:前端页面优化

admin.ui.plus-master/src/api/admin/reportManagement/BlackBox/BlackBoxdto.ts

@@ -8,6 +8,13 @@
   msg?: string | null
   /** 数据 */
  data?:PageOutputBlackBoxDto[] | null
+   /** 安全装置状态 */
+   deviceStatus?: string
+      /** 序列号 */
+      serialNumber?: string
+         /** 加油站名称 */
+         stationName?: string
+ 
 }
     export interface PageOutputBlackBoxDto{
       /**

admin.ui.plus-master/src/components/StatusBox.vue

@@ -76,6 +76,8 @@
           case "已灌注": return 'yelbluevioletlow'
           case "已备案": return 'gray'
           
+          // 电子档案-安全装置
+          case "已出厂注册": return 'blue'
 
           default: return 'red'
         }
@@ -127,6 +129,10 @@
           case "已灌注": return 'yelbluevioletlow'
           case "已备案": return 'gray'
           
+          // 电子档案-安全装置
+          case "已出厂注册": return 'blue'
+
+
           default: return 'red'
         }
       }
@@ -136,15 +142,17 @@
   
   <style scoped>
   .status-box {
-    width: 60px;
-    height: 30px;
+    width: 100%;
+    height: 100%;
     background-color: white;
     border: 1px solid;
     border-radius: 15px;
+    padding: 4px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     display: flex;
     justify-content: center;
     align-items: center;
-    font-weight: 500;
+    font-weight: 400;
   }
   
   .status-box.green {

admin.ui.plus-master/src/components/my-upload-file/index.vue

@@ -1,10 +1,11 @@
 <template>
+<div class="upload-container">
   <el-upload
     class="upload-demo"
     v-model:file-list="fileList"
     drag
-    :headers="{ Authorization:  'Bearer ' + useUserInfoStores.getToken()}"
-    :action='baseUrl+"/api/admin/file/upload-file"'
+    :headers="{ Authorization: 'Bearer ' + useUserInfoStores.getToken() }"
+    :action="baseUrl + '/api/admin/file/upload-file'"
     :on-success="handleAvatarSuccess"
     :before-upload="beforeAvatarUpload"
   >
@@ -13,11 +14,28 @@
       将文件拖到此处/<em>点击上传</em>
     </div>
     <template #tip>
-      <div class="el-upload__tip">
-        软件包上传
-      </div>
+      <div class="el-upload__tip">软件包上传</div>
     </template>
   </el-upload>
+
+  <el-upload
+    class="upload-demo"
+    v-model:file-list="fileList"
+    drag
+    :headers="{ Authorization: 'Bearer ' + useUserInfoStores.getToken() }"
+    :action="baseUrl + '/api/admin/file/upload-file'"
+    :on-success="handleAvatarSuccess"
+    :before-upload="beforeAvatarUpload"
+  >
+    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+    <div class="el-upload__text">
+      将文件拖到此处/<em>点击上传</em>
+    </div>
+    <template #tip>
+      <div class="el-upload__tip">ECN文件上传</div>
+    </template>
+  </el-upload>
+</div>
 </template>
 
 <script setup lang="ts">
@@ -87,5 +105,22 @@ const onSure = async () => {
 </script>
 
 <style scoped lang="scss">
+.upload-container {
+  font-size: 0; /* 消除 inline-block 的默认空隙 */
+}
 
+.upload-demo {
+  display: inline-block;
+  width: 48%; 
+  margin-top:2%;
+  margin-right: 4%; 
+}
+
+.upload-demo:last-child {
+  margin-right: 0; 
+}
+
+.el-upload__tip{
+  text-align:center
+}
 </style>

admin.ui.plus-master/src/composables/useDynamicPageSize.ts

@@ -0,0 +1,47 @@
+import { reactive, onMounted, onUnmounted } from "vue";
+
+export function useDynamicPageSize(defaultSize = 10, largeSize = 15) {
+  // 定义分页状态
+  const state = reactive({
+    pageInput: {
+      currentPage: 1,
+      pageSize: defaultSize, // 默认分页大小
+    },
+  });
+
+  // 获取页面大小
+  const getPageSizeByResolution = () => {
+    const screenWidth = window.innerWidth || document.documentElement.clientWidth;
+
+    // 判断是否是 2K 分辨率（通常 2K 分辨率宽度 >= 2560）
+    if (screenWidth >= 2560) {
+      return largeSize; // 2K 分辨率下每页显示 largeSize 条数据
+    }
+
+    // 默认情况下显示 defaultSize 条数据
+    return defaultSize;
+  };
+
+  // 更新页面大小
+  const updatePageSize = () => {
+    state.pageInput.pageSize = getPageSizeByResolution();
+  };
+
+  // 初始化时设置页面大小
+  updatePageSize();
+
+  // 监听窗口大小变化
+  const handleResize = () => {
+    updatePageSize();
+  };
+
+  onMounted(() => {
+    window.addEventListener("resize", handleResize);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener("resize", handleResize);
+  });
+
+  return state;
+}

admin.ui.plus-master/src/views/admin/PCBA/boardFunctionResult/index.vue

@@ -67,6 +67,9 @@
               </el-row>
             </el-form-item>
           </el-form>
+
+          <hr class="fengexian">
+
           <div class="my-flex my-flex-start" style="margin-top: -35px;">
             <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
           </div>
@@ -107,8 +110,8 @@
           </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"
+                v-model:currentPage="pageState.pageInput.currentPage"
+                v-model:page-size="pageState.pageInput.pageSize"
                 :total="state.total"
                 :page-sizes="[10, 15, 20, 50, 100]"
                 small
@@ -132,6 +135,10 @@ import type { pageInput } from "/@/api/admin/shareDto/shareDto";
 import { useGlobalCacheStore } from "/@/stores/globalCacheStore";
 import { getCurrentInstance } from 'vue';
 import StatusBox from "/@/components/StatusBox.vue";
+import { useDynamicPageSize } from "/@/composables/useDynamicPageSize";
+
+// 使用组合式函数获取分页状态
+const pageState = useDynamicPageSize(10, 15);
 
 const { proxy: ctx } = getCurrentInstance();
 
@@ -227,6 +234,8 @@ const state = reactive({
 });
 
 onMounted(() => {
+  // 初始化分页大小
+state.pageInput.PageSize = pageState.pageInput.pageSize;
   init();
   eventBus.off('refreshView');
   eventBus.on('refreshView', async () => {
@@ -278,5 +287,8 @@ const init = async () => {
 };
 </script>
 <style scoped lang="scss">
-
+.fengexian{
+  margin-top:-3vh;
+  margin-bottom:5vh;
+}
 </style>    

admin.ui.plus-master/src/views/admin/PCBA/boardFunctionSummary/index.vue

@@ -34,6 +34,9 @@
               </el-col>
 </el-form-item>
           </el-form>
+
+          <hr class="fengexian">
+
       <div class="my-flex my-flex-start" style="margin-top: -38px;">
 <el-button  type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
 <el-button  type="primary" icon="ele-Document" @click="exportDataToExcel"> 导出 </el-button>
@@ -87,8 +90,8 @@
 </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"
+              v-model:currentPage="pageState.pageInput.currentPage"
+              v-model:page-size="pageState.pageInput.pageSize"
               :total="state.total"
               :page-sizes="[10, 15, 20, 50, 100]"
               small
@@ -113,6 +116,10 @@ import { useGlobalCacheStore } from "/@/stores/globalCacheStore";
 import { getCurrentInstance } from 'vue';
 import { saveAs } from 'file-saver';
 import * as ExcelJS from 'exceljs';
+import { useDynamicPageSize } from "/@/composables/useDynamicPageSize";
+
+// 使用组合式函数获取分页状态
+const pageState = useDynamicPageSize(10, 15);
 
 const { proxy: ctx } = getCurrentInstance();
 
@@ -176,6 +183,8 @@ tableModel: [] as BoardFunctionSummaryOutput,
     total: 0,
 })
   onMounted(() => {
+    // 初始化分页大小
+state.pageInput.PageSize = pageState.pageInput.pageSize;
     init()
     eventBus.off('refreshView')
     eventBus.on('refreshView', async () => {
@@ -281,4 +290,8 @@ const tableData = ctx.$refs.myTable.data;
 
 </script>
 <style scoped lang="scss">
+.fengexian{
+  margin-top:-3vh;
+  margin-bottom:5vh;
+}
   </style>

admin.ui.plus-master/src/views/admin/PCBA/boardList/index.vue

@@ -51,8 +51,14 @@
               </el-col>
             </el-form-item>
           </el-form>
+
+          <hr class="fengexian">
+
+
           <div class="my-flex my-flex-start" style="margin-top:-38px">
             <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
+                      <hr class="fengexian">
+
           </div>
         </el-card>
       </el-col>
@@ -91,8 +97,8 @@
           </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"
+              v-model:currentPage="pageState.pageInput.currentPage"
+              v-model:page-size="pageState.pageInput.pageSize"
               :total="state.total"
               :page-sizes="[10, 15, 20, 50, 100]"
               small
@@ -115,6 +121,10 @@ import { BoardListDto } from '/@/api/admin/PCBA/boardListDto';
 import type { pageInput } from "/@/api/admin/shareDto/shareDto";
 import { useGlobalCacheStore } from "/@/stores/globalCacheStore";
 import  StatusBox from "/@/components/StatusBox.vue"
+import { useDynamicPageSize } from "/@/composables/useDynamicPageSize";
+
+// 使用组合式函数获取分页状态
+const pageState = useDynamicPageSize(10, 15);
 
 /**获取全局缓存*/
 const globalCacheStore = useGlobalCacheStore();
@@ -190,6 +200,8 @@ const getTestStateText = (state: number): string => {
 };
 
 onMounted(() => {
+  // 初始化分页大小
+state.pageInput.PageSize = pageState.pageInput.pageSize;
   init();
   eventBus.off('refreshView');
   eventBus.on('refreshView', async () => {
@@ -241,4 +253,8 @@ const init = async () => {
 };
 </script>
 <style scoped lang="scss">
+.fengexian{
+  margin-top:-3vh;
+  margin-bottom:5vh;
+}
   </style>    

admin.ui.plus-master/src/views/admin/PCBA/boardSummary/index.vue

@@ -33,6 +33,9 @@
               </el-col>
             </el-form-item>
           </el-form>
+
+          <hr class="fengexian">
+
           <div class="my-flex my-flex-start" style="margin-top: -38px;">
             <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
             <el-button type="primary" icon="ele-Document" @click="exportDataToExcel"> 导出 </el-button>
@@ -76,8 +79,8 @@
           </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"
+              v-model:currentPage="pageState.pageInput.currentPage"
+              v-model:page-size="pageState.pageInput.pageSize"
               :total="state.total"
               :page-sizes="[10, 15, 20, 50, 100]"
               small
@@ -103,6 +106,10 @@ import { useGlobalCacheStore } from "/@/stores/globalCacheStore";
 import { getCurrentInstance } from 'vue';
 import { saveAs } from 'file-saver';
 import * as ExcelJS from 'exceljs';
+import { useDynamicPageSize } from "/@/composables/useDynamicPageSize";
+
+// 使用组合式函数获取分页状态
+const pageState = useDynamicPageSize(10, 15);
 
 const { proxy: ctx } = getCurrentInstance();
 
@@ -157,6 +164,8 @@ const state = reactive({
 });
 
 onMounted(() => {
+  // 初始化分页大小
+state.pageInput.PageSize = pageState.pageInput.pageSize;
   init();
   eventBus.off('refreshView');
   eventBus.on('refreshView', async () => {
@@ -241,4 +250,8 @@ const onCurrentChange = () => {
 </script>
 
 <style scoped lang="scss">
+.fengexian{
+  margin-top:-3vh;
+  margin-bottom:5vh;
+}
 </style>

admin.ui.plus-master/src/views/admin/PCBA/boardTestRecord/index.vue

@@ -71,6 +71,9 @@
               </el-col>
             </el-form-item>
           </el-form>
+
+          <hr class="fengexian">
+
           <div class="my-flex my-flex-start" style="margin-top: -35px;">
             <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
           </div>
@@ -114,8 +117,8 @@
           </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"
+              v-model:currentPage="pageState.pageInput.currentPage"
+              v-model:page-size="pageState.pageInput.pageSize"
               :total="state.total"
               :page-sizes="[10, 15, 20, 50, 100]"
               small
@@ -139,6 +142,10 @@ import type { pageInput } from "/@/api/admin/shareDto/shareDto";
 import { useGlobalCacheStore } from "/@/stores/globalCacheStore";
 import { getCurrentInstance } from 'vue';
 import StatusBox from "../../../../components/StatusBox.vue";
+import { useDynamicPageSize } from "/@/composables/useDynamicPageSize";
+
+// 使用组合式函数获取分页状态
+const pageState = useDynamicPageSize(10, 15);
 
 const { proxy: ctx } = getCurrentInstance();
 
@@ -246,6 +253,8 @@ const state = reactive({
 });
 
 onMounted(() => {
+  // 初始化分页大小
+state.pageInput.PageSize = pageState.pageInput.pageSize;
   init();
   eventBus.off('refreshView');
   eventBus.on('refreshView', async () => {
@@ -297,4 +306,8 @@ const init = async () => {
 };
 </script>
 <style scoped lang="scss">
+.fengexian{
+  margin-top:-3vh;
+  margin-bottom:5vh;
+}
   </style>

admin.ui.plus-master/src/views/admin/application/fuelingFTP/index.vue

@@ -52,10 +52,10 @@
           </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"
+              v-model:currentPage="pageState.pageInput.currentPage"
+              v-model:page-size="pageState.pageInput.pageSize"
               :total="state.total"
-              :page-sizes="[10, 20, 50, 100]"
+              :page-sizes="[10, 15, 20, 50, 100]"
               small
               background
               @size-change="onSizeChange"
@@ -79,6 +79,11 @@ import { FuelFtpPswRecordDto } from '/@/api/admin/deviceAuthorization/fuelingFTP
 import Clipboard from 'clipboard'
 import type {pageInput} from "/@/api/admin/shareDto/shareDto";
 import { AuthApi } from '/@/api/admin/Auth'
+import { useDynamicPageSize } from "/@/composables/useDynamicPageSize";
+
+
+// 使用组合式函数获取分页状态
+const pageState = useDynamicPageSize(10, 15);
 
 const multipleTableRef=ref<InstanceType<typeof ElTable>>()
 /**FTP申请页面对象 */
@@ -141,6 +146,8 @@ const init = async () => {
 }
 
 onMounted(() => {
+   // 初始化分页大小
+   state.pageInput.PageSize = pageState.pageInput.pageSize;
   init()
   eventBus.off('refreshView')
   eventBus.on('refreshView', async () => {

admin.ui.plus-master/src/views/admin/application/fuelingFTPofDate/index.vue

@@ -62,7 +62,7 @@
                 v-model:currentPage="state.pageInput.CurrentPage"
                 v-model:page-size="state.pageInput.PageSize"
                 :total="state.total"
-                :page-sizes="[10, 20, 50, 100]"
+                :page-sizes="[10, 15, 20, 50, 100]"
                 small
                 background
                 @size-change="onSizeChange"

admin.ui.plus-master/src/views/admin/application/softwarePackageManagement/components/form-edit.vue

@@ -33,7 +33,7 @@
             </el-form-item>
           </el-col>
           <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-            <el-form-item label="说明" prop="explain">
+            <el-form-item label="软件包更新说明" prop="explain">
               <el-input v-model="formData.editData.explain" placeholder="请输入说明" rows="6" clearable type="textarea"></el-input>
             </el-form-item>
           </el-col>

admin.ui.plus-master/src/views/admin/authorize/dispenserAuthCode/index.vue

@@ -64,8 +64,8 @@
               :label="column.label" />
           </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" :page-sizes="[10,15, 20, 50, 100]" small
+            <el-pagination v-model:currentPage="pageState.pageInput.currentPage"
+              v-model:page-size="pageState.pageInput.pageSize" :total="state.total" :page-sizes="[10,15, 20, 50, 100]" small
               background @size-change="onSizeChange" @current-change="onCurrentChange"
               layout="total, sizes, prev, pager, next, jumper" />
           </div>
@@ -85,6 +85,10 @@ import { FuelAuthCodeRecordDto } from '/@/api/admin/deviceAuthorization/dispense
 import Clipboard from 'clipboard'
 import type { pageInput } from "/@/api/admin/shareDto/shareDto";
 import { AuthApi } from '/@/api/admin/Auth'
+import { useDynamicPageSize } from "/@/composables/useDynamicPageSize";
+
+// 使用组合式函数获取分页状态
+const pageState = useDynamicPageSize(10, 15);
 
 const multipleTableRef = ref<InstanceType<typeof ElTable>>()
 /**FTP申请页面对象 */
@@ -151,6 +155,8 @@ const init = async () => {
 }
 
 onMounted(() => {
+  // 初始化分页大小
+state.pageInput.PageSize = pageState.pageInput.pageSize;
   init()
   eventBus.off('refreshView')
   eventBus.on('refreshView', async () => {

admin.ui.plus-master/src/views/admin/authorize/fuelingFTP/index.vue

@@ -64,8 +64,8 @@
               :label="column.label" />
           </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" :page-sizes="[10, 15, 20, 50, 100]" small
+            <el-pagination v-model:currentPage="pageState.pageInput.currentPage"
+              v-model:page-size="pageState.pageInput.pageSize" :total="state.total" :page-sizes="[10, 15, 20, 50, 100]" small
               background @size-change="onSizeChange" @current-change="onCurrentChange"
               layout="total, sizes, prev, pager, next, jumper" />
           </div>
@@ -85,6 +85,10 @@ import { FuelFtpPswRecordDto } from '/@/api/admin/deviceAuthorization/fuelingFTP
 import Clipboard from 'clipboard'
 import type { pageInput } from "/@/api/admin/shareDto/shareDto";
 import { AuthApi } from '/@/api/admin/Auth'
+import { useDynamicPageSize } from "/@/composables/useDynamicPageSize";
+
+// 使用组合式函数获取分页状态
+const pageState = useDynamicPageSize(10, 15);
 
 const multipleTableRef = ref<InstanceType<typeof ElTable>>()
 /**FTP申请页面对象 */
@@ -147,6 +151,8 @@ const init = async () => {
 }
 
 onMounted(() => {
+  // 初始化分页大小
+state.pageInput.pageSize = pageState.pageInput.pageSize;
   init()
   eventBus.off('refreshView')
   eventBus.on('refreshView', async () => {

admin.ui.plus-master/src/views/admin/authorize/fuelingFTPofDate/index.vue

@@ -66,8 +66,8 @@
               :label="column.label" />
           </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" :page-sizes="[10, 15, 20, 50, 100]" small
+            <el-pagination v-model:currentPage="pageState.pageInput.currentPage"
+              v-model:page-size="pageState.pageInput.pageSize" :total="state.total" :page-sizes="[10, 15, 20, 50, 100]" small
               background @size-change="onSizeChange" @current-change="onCurrentChange"
               layout="total, sizes, prev, pager, next, jumper" />
           </div>
@@ -87,6 +87,10 @@ import { FuelFtpPswRecordDto } from '/@/api/admin/deviceAuthorization/fuelingFTP
 import Clipboard from 'clipboard'
 import type { pageInput } from "/@/api/admin/shareDto/shareDto";
 import { AuthApi } from '/@/api/admin/Auth'
+import { useDynamicPageSize } from "/@/composables/useDynamicPageSize";
+
+// 使用组合式函数获取分页状态
+const pageState = useDynamicPageSize(10, 15);
 
 const multipleTableRef = ref<InstanceType<typeof ElTable>>()
 /**FTP申请页面对象 */
@@ -153,6 +157,8 @@ const init = async () => {
 }
 
 onMounted(() => {
+  // 初始化分页大小
+state.pageInput.PageSize = pageState.pageInput.pageSize;
   init()
   eventBus.off('refreshView')
   eventBus.on('refreshView', async () => {

admin.ui.plus-master/src/views/admin/authorize/softwarePackageManagement/index.vue

@@ -107,8 +107,8 @@
             </el-table-column>
           </el-table>
           <div class="my-flex my-flex-end" style="margin-top: 20px">
-            <el-pagination v-model:currentPage="softwareData.pageInput.CurrentPage"
-              v-model:page-size="softwareData.pageInput.PageSize" :total="softwareData.total"
+            <el-pagination v-model:currentPage="pageState.pageInput.currentPage"
+              v-model:page-size="pageState.pageInput.pageSize" :total="softwareData.total"
               :page-sizes="[10, 15, 20, 50, 100]" small background @size-change="onSizeChange"
               @current-change="onCurrentChange" layout="total, sizes, prev, pager, next, jumper" />
           </div>
@@ -138,6 +138,10 @@ import { SoftwarePackageManagementApi } from "/@/api/admin/deviceAuthorization/s
 import { storeToRefs } from 'pinia'
 import { useUserInfo } from '/@/stores/userInfo'
 import StatusBox from "/@/components/StatusBox.vue";
+import { useDynamicPageSize } from "/@/composables/useDynamicPageSize";
+
+// 使用组合式函数获取分页状态
+const pageState = useDynamicPageSize(10, 15);
 
 /**引入组件*/
 const EditDialog = defineAsyncComponent(() => import('./components/form-edit.vue'))
@@ -185,13 +189,13 @@ const softwareData = reactive({
     { prop: 'equipmentType', label: '设备类型' },
     { prop: 'softwareName', label: '软件名称' },
     { prop: 'version', label: '版本号' },
-    { prop: 'explain', label: '说明' },
     { prop: 'state', label: '状态' },
     { prop: 'numberOfDownloads', label: '下载次数' },
     { prop: 'remark', label: '备注' },
     { prop: 'releaseTime', label: '发布日期' },
     { prop: 'uploadTime', label: '上传日期' },
     { prop: 'digitalSignature', label: '数字签名' },
+    { prop: 'explain', label: '软件包更新说明' },
   ],
   /**分页标识 */
   pageInput: {
@@ -238,6 +242,8 @@ const init = async () => {
 }
 
 onMounted(() => {
+  // 初始化分页大小
+  softwareData.pageInput.PageSize = pageState.pageInput.pageSize;
   init()
   eventBus.off('refreshView')
   eventBus.on('refreshView', async () => {

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

@@ -71,8 +71,8 @@
             <el-table-column prop="remark" label="备注" />
           </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" :default-page-size="5"
+            <el-pagination v-model:currentPage="pageState.pageInput.currentPage"
+              v-model:page-size="pageState.pageInput.pageSize" :total="state.total" :default-page-size="5"
               :page-sizes="[5, 10, 15, 20, 50, 100]" small background @size-change="onSizeChange"
               @current-change="onCurrentChange" layout="total, sizes, prev, pager, next, jumper" />
           </div>
@@ -93,6 +93,10 @@ import { ref } from "vue-demi";
 import { useGlobalCacheStore } from "/@/stores/globalCacheStore";
 import { GroupLogoKeyApi } from "/@/api/admin/productionManagement/groupLogoKeyApi";
 import StatusBox from "/@/components/StatusBox.vue";
+import { useDynamicPageSize } from "/@/composables/useDynamicPageSize";
+
+// 使用组合式函数获取分页状态
+const pageState = useDynamicPageSize(10, 15);
 
 /**
  * 团标密钥查询时需要的参数
@@ -184,6 +188,8 @@ const onQuery = async () => {
 
 
 onMounted(() => {
+// 初始化分页大小
+state.pageInput.pageSize = pageState.pageInput.pageSize;
   onQuery()
 })
 

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

@@ -118,6 +118,7 @@ import { useGlobalCacheStore } from "/@/stores/globalCacheStore";
 import StatusBox from "/@/components/StatusBox.vue";
 
 
+
 /**引入组件*/
 const FileEditDialog = defineAsyncComponent(() => import('./components/qrbook-edit.vue'))
 const fileEditRef = ref()
@@ -154,7 +155,7 @@ const qrBookData = reactive({
     /**分页标识 */
     PageInput: {
         CurrentPage: 1,
-        PageSize: 10,
+        PageSize: 15,
     } as pageInput,
     /**分页总数 */
     total: 0

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

@@ -155,8 +155,8 @@
             </el-table-column>
           </el-table>
           <div class="my-flex my-flex-end" style="margin-top: 20px">
-            <el-pagination v-model:currentPage="bomModel.pageInput.currentPage"
-              v-model:page-size="bomModel.pageInput.pageSize" :total="bomModel.total" :page-sizes="[10, 15, 20, 50, 100]"
+            <el-pagination v-model:currentPage="pageState.pageInput.currentPage"
+              v-model:page-size="pageState.pageInput.pageSize" :total="bomModel.total" :page-sizes="[10, 15, 20, 50, 100]"
               small background @size-change="onSizeChange" @current-change="onCurrentChange"
               layout="total, sizes, prev, pager, next, jumper" />
           </div>
@@ -178,6 +178,11 @@ import router from "/@/router";
 
 import { useGlobalCacheStore } from "/@/stores/globalCacheStore";
 import StatusBox from '/@/components/StatusBox.vue';
+import { useDynamicPageSize } from '/@/composables/useDynamicPageSize';
+
+
+// 使用组合式函数获取分页状态
+const pageState = useDynamicPageSize(10, 15);
 
 /**获取全局缓存*/
 const globalCacheStore = useGlobalCacheStore()
@@ -255,6 +260,8 @@ const getColor = (value: string): string => {
 //})
 
 onMounted(async () => {
+   // 初始化分页大小
+   bomModel.pageInput.pageSize = pageState.pageInput.pageSize;
   await onQuery()
 })
 

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

@@ -112,8 +112,8 @@
             </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" :default-page-size="5"
+            <el-pagination v-model:currentPage="pageState.pageInput.currentPage"
+              v-model:page-size="pageState.pageInput.pageSize" :total="state.total" :default-page-size="5"
               :page-sizes="[5, 10, 15, 20, 50, 100]" small background @size-change="onSizeChange"
               @current-change="onCurrentChange" layout="total, sizes, prev, pager, next, jumper" />
           </div>
@@ -137,7 +137,10 @@ import { ComponentGetPageDto } from "/@/api/admin/productionManagement/Component
 import { Picture as IconPicture } from '@element-plus/icons-vue'
 import { useGlobalCacheStore } from "/@/stores/globalCacheStore";
 import StatusBox from '/@/components/StatusBox.vue';
+import { useDynamicPageSize } from '/@/composables/useDynamicPageSize';
 
+// 使用组合式函数获取分页状态
+const pageState = useDynamicPageSize(10, 15);
 
 /**引入组件*/
 const EditDialog = defineAsyncComponent(() => import('../components/form-edit.vue'))
@@ -302,6 +305,8 @@ const onCurrentChange = (val: number) => {
  * 挂载时
  */
 onMounted(async () => {
+     // 初始化分页大小
+     state.pageInput.pageSize = pageState.pageInput.pageSize;
   // await initLocalType()
   // await initLocalState()
   await onQuery()

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

@@ -6,40 +6,48 @@
       <el-col :xs="24" >
         <el-card class="mt8"  shadow="hover" >
 <el-form :model="state.filter" :inline="true" @submit.stop.prevent>
-            <el-form-item prop="name" style="width: 100%">
+            <el-form-item prop="name" style="width: 100%;">
+<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb20">
+                <el-form-item label="加油站名称">
+                  <el-input v-model="state.filter.stationName" 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="state.filter.OilCompanyName" placeholder="单行输入" clearable></el-input>
+                  <el-input v-model="state.filter.OilCompanyName" placeholder="请输入石油公司" clearable></el-input>
                 </el-form-item>
               </el-col>
-<!-- <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                 <el-form-item label="序列号">
-                  <el-input v-model="state.filter.SerialNumber" placeholder="单行输入" clearable></el-input>
+                  <el-input v-model="state.filter.SerialNumber" placeholder="请输入序列号" clearable></el-input>
                 </el-form-item>
               </el-col>
-<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+<!-- <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                 <el-form-item label="绑定加油机厂商">
                   <el-input v-model="state.filter.BindingDispenserManufacturer" placeholder="单行输入" clearable></el-input>
                 </el-form-item>
-              </el-col>
+              </el-col> -->
 <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                 <el-form-item label="安全装置状态">
-                  <el-input v-model="state.filter.DeviceStatus" placeholder="单行输入" clearable></el-input>
+                  <el-select v-model="state.filter.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-form-item>
               </el-col>
 <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-            <el-form-item label="选择时间">
+            <el-form-item label="选择安装时间">
                   <el-date-picker
                     v-model="state.filter.FixTime"
                     type="datetimerange"
                     value-format="YYYY-MM-DD HH:mm:ss"
                     range-separator="To"
-                    start-placeholder="Start date"
-                    end-placeholder="End date"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
                   />
                 </el-form-item>
               </el-col>
-<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+<!-- <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
             <el-form-item label="选择时间">
                   <el-date-picker
                     v-model="state.filter.SoldTime"
@@ -53,8 +61,15 @@
               </el-col> -->
 </el-form-item>
           </el-form>
+          <hr class="fenge">
 <div class="my-flex my-flex-start" >
-<el-button  type="primary" icon="ele-CirclePlus" @click="onQuery"> 查询 </el-button>
+          <!-- 按钮 -->
+          <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="resetQuery"> 重置 </el-button>
+            </el-row>
+          </el-row>
 </div>
 </el-card>
       </el-col>
@@ -75,10 +90,10 @@
 </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"
+              v-model:currentPage="pageState.pageInput.currentPage"
+              v-model:page-size="pageState.pageInput.pageSize"
               :total="state.total"
-              :page-sizes="[10, 20, 50, 100]"
+              :page-sizes="[10, 15, 20, 50, 100]"
               small
               background
               @size-change="onSizeChange"
@@ -97,7 +112,23 @@
   import { PageInput,BlackBoxDto } from "/@/api/admin/reportManagement/BlackBox/BlackBoxdto";
   import {Api} from "/@/api/admin/reportManagement/BlackBox/BlackBoxapi";
   import StatusBox from "/@/components/StatusBox.vue";
+import { useDynamicPageSize } from "/@/composables/useDynamicPageSize";
+
+
+// 使用组合式函数获取分页状态
+const pageState = useDynamicPageSize(10, 15);
+
 
+  // 在 script setup 的顶部定义枚举
+const FuelDispenserEnum = {
+  unregister: '未备案',
+  produce: '已生产',
+  register: '已备案',
+  bind: '已绑定油机',
+  factory: '已出厂注册',
+  enable: '已启用',
+  disable: '维修中'
+} as const; // 使用 as const 确保类型安全
 
 /**数据对象*/
   const state = reactive({
@@ -115,17 +146,19 @@
         DeviceStatus: "",
 /**安装时间 */
         FixTime: "",
+// 加油站名称
+        stationName:"",
 /**出厂时间 */
         SoldTime: "",},
   /**表格信息 */
 tableModel: [] as BlackBoxDto,
     /**动态表头 */
     dynamicColumns: [
+{ prop: 'stationName', label: '加油站名称' },
 { prop: 'oilCompanyName', label: '石油公司' },
 { prop: 'softwareVersion', label: '软件版本号' },
 { prop: 'hardwareVersion', label: '硬件版本号' },
 { prop: 'serialNumber', label: '序列号' },
-{ prop: 'stationName', label: '加油站名称' },
 { prop: 'safetyDeviceManufacturer', label: '安全装置厂家' },
 { prop: 'dispenserNumber', label: '油机号' },
 { prop: 'nozzleNumber', label: '油枪号' },
@@ -134,6 +167,8 @@ tableModel: [] as BlackBoxDto,
 { prop: 'soldTime', label: '出厂时间' },
 { prop: 'bindingDispenserManufacturer', label: '绑定加油机厂商' },
 { prop: 'componentManufacturer', label: '部件出厂加油机厂商' },],
+
+
 /**分页标识 */
     pageInput:{
       currentPage: 1,
@@ -143,6 +178,8 @@ tableModel: [] as BlackBoxDto,
     total: 0,
 })
   onMounted(() => {
+      // 初始化分页大小
+  state.pageInput.pageSize = pageState.pageInput.pageSize;
     init()
     eventBus.off('refreshView')
     eventBus.on('refreshView', async () => {
@@ -161,14 +198,79 @@ tableModel: [] as BlackBoxDto,
           const onQuery = () => {
           init()
         }
-        /**初始化 */
         const init = async () => {
-          state.loading = true
-const res:any = await new Api().getList({...state.pageInput, Filter:state.filter})
-            state.total = res?.data?.total ?? 0
-state.tableModel = res?.data?.list ?? []
-          state.loading = false
-        }
+  state.loading = true;
+
+  try {
+    const res: any = await new Api().getList({
+      ...state.pageInput, // 使用 state.pageInput 中的分页参数
+      Filter: state.filter,
+    });
+    state.total = res?.data?.total ?? 0;
+    state.tableModel = res?.data?.list ?? [];
+  } catch (error) {
+    console.error("数据加载失败：", error);
+  } finally {
+    state.loading = false;
+  }
+};
+
+        /**重置查询条件 */
+const resetQuery = () => {
+  state.filter.OilCompanyName = ''
+  state.filter.SerialNumber = ''
+  state.filter.BindingDispenserManufacturer = ''
+  state.filter.DeviceStatus = ''
+  state.filter.FixTime = ''
+  state.filter.stationName=''
+  // state.filter.createTimeRange = null
+
+    // 重置分页参数
+    state.pageInput.currentPage = 1; // 回到第一页
+  state.pageInput.pageSize = 10;   // 恢复默认每页显示条数
+
+  // 重新加载数据
+  init();
+}
+
+/** 分页大小变化 */
+const onSizeChange = (size: number) => {
+  state.pageInput.pageSize = size; // 更新每页显示条数
+  state.pageInput.currentPage = 1; // 切换分页大小时回到第一页
+  init(); // 重新加载数据
+};
+
+/** 当前页码变化 */
+const onCurrentChange = (page: number) => {
+  state.pageInput.currentPage = page; // 更新当前页码
+  init(); // 重新加载数据
+};
 </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*6px+12px;
+  justify-content: start;
+}
+
+/* 数据表头 设置灰色样式 */
+::v-deep .el-table th.el-table__cell {
+  background-color: #F6F6F6;
+}
+
+.fenge{
+  margin-top:-35px
+}
   </style>

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

@@ -34,7 +34,7 @@
               :label="column.label" />
           </el-table>
           <div class="my-flex my-flex-end" style="margin-top: 20px">
-            <el-pagination v-model:currentPage="Data.pageInput.currentPage" v-model:page-size="Data.pageInput.pageSize"
+            <el-pagination v-model:currentPage="pageState.pageInput.currentPage" v-model:page-size="pageState.pageInput.pageSize"
               :total="Data.total" :page-sizes="[10, 15, 20, 50, 100]" small background @size-change="onSizeChange"
               @current-change="onCurrentChange" layout="total, sizes, prev, pager, next, jumper" />
           </div>
@@ -52,6 +52,10 @@ import { onMounted, reactive } from "vue";
 import { ElTable } from 'element-plus'
 import { associationFilterModel_SearchFilter, associationFilterModel, PageInputAssociationFilterModel } from "/@/api/admin/reportManagement/association/associationDto";
 import { AssociationApi } from "/@/api/admin/reportManagement/association/associationApi";
+import { useDynamicPageSize } from "/@/composables/useDynamicPageSize";
+
+// 使用组合式函数获取分页状态
+const pageState = useDynamicPageSize(10, 15);
 
 /**页面对象 */
 const Data = reactive({
@@ -87,13 +91,14 @@ const Data = reactive({
 const init = async () => {
   Data.loading = true
   const res: any = await new AssociationApi().getPage({ ...Data.pageInput, filter: Data.Filter })
-  console.log(Data.Filter)
   Data.tableModel = res?.data ?? []
   Data.total = res?.length ?? 0
   Data.loading = false
 }
 
 onMounted(() => {
+  // 初始化分页大小
+Data.pageInput.pageSize = pageState.pageInput.pageSize;
   init()
 })
 

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

@@ -99,10 +99,10 @@
           </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"
+              v-model:currentPage="pageState.pageInput.currentPage"
+              v-model:page-size="pageState.pageInput.pageSize"
               :total="state.total"
-              :page-sizes="[10, 20, 50, 100]"
+              :page-sizes="[10, 15, 20, 50, 100]"
               small
               background
               @size-change="onSizeChange"
@@ -121,7 +121,10 @@
   import { PageInput,encodercontrolsDto } from "/@/api/admin/reportManagement/displayControl/displayControldto";
   import {Api} from "/@/api/admin/reportManagement/displayControl/displayControlapi";
   import StatusBox from "/@/components/StatusBox.vue";
+import { useDynamicPageSize } from "/@/composables/useDynamicPageSize";
 
+  // 使用组合式函数获取分页状态
+const pageState = useDynamicPageSize(10, 15);
 
 /**数据对象*/
   const state = reactive({
@@ -188,6 +191,8 @@ enum FuelDispenserEnum {
 }
 
   onMounted(() => {
+    // 初始化分页大小
+state.pageInput.pageSize = pageState.pageInput.pageSize;
     init()
     eventBus.off('refreshView')
     eventBus.on('refreshView', async () => {

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

@@ -106,10 +106,10 @@
           </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"
+              v-model:currentPage="pageState.pageInput.currentPage"
+              v-model:page-size="pageState.pageInput.pageSize"
               :total="state.total"
-              :page-sizes="[10, 20, 50, 100]"
+              :page-sizes="[10, 15, 20, 50, 100]"
               small
               background
               @size-change="onSizeChange"
@@ -128,7 +128,10 @@
   import { PageInput,encodercontrolsDto } from "/@/api/admin/reportManagement/encodercontrols/encodercontrolsdto";
   import {Api} from "/@/api/admin/reportManagement/encodercontrols/encodercontrolsapi";
   import StatusBox from "/@/components/StatusBox.vue";
+import { useDynamicPageSize } from "/@/composables/useDynamicPageSize";
 
+  // 使用组合式函数获取分页状态
+const pageState = useDynamicPageSize(10, 15);
 
 /**数据对象*/
   const state = reactive({
@@ -177,6 +180,8 @@ tableModel: [] as encodercontrolsDto,
     total: 0,
 })
   onMounted(() => {
+    // 初始化分页大小
+state.pageInput.pageSize = pageState.pageInput.pageSize;
     init()
     eventBus.off('refreshView')
     eventBus.on('refreshView', async () => {

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

@@ -65,8 +65,8 @@
 </el-table-column>
           </el-table>
           <div class="my-flex my-flex-end" style="margin-top: 20px">
-            <el-pagination v-model:currentPage="Data.pageInput.currentPage" v-model:page-size="Data.pageInput.pageSize"
-              :total="Data.total" :page-sizes="[10, 15, 20, 50, 100]" small background @size-change="onSizeChange"
+            <el-pagination v-model:currentPage="pageState.pageInput.currentPage" v-model:page-size="Data.pageInput.pageSize"
+              :total="pageState.total" :page-sizes="[10, 15, 20, 50, 100]" small background @size-change="onSizeChange"
               @current-change="onCurrentChange" layout="total, sizes, prev, pager, next, jumper" />
           </div>
         </el-card>
@@ -81,6 +81,11 @@ import { onMounted, reactive, ref, watch } from "vue";
 import { ElTable } from 'element-plus'
 import { gasStationFilterModel_SearchFilter, gasStationFilterModel, PageInputgasStationFilterModel } from "/@/api/admin/reportManagement/gasStation/gasStationDto";
 import { gasStationApi } from "/@/api/admin/reportManagement/gasStation/gasStationApi";
+import { useDynamicPageSize } from "/@/composables/useDynamicPageSize";
+
+// 使用组合式函数获取分页状态
+const pageState = useDynamicPageSize(10, 15);
+
 /**引入组件*/
 
 // 安装日期假数据
@@ -145,6 +150,8 @@ const init = async () => {
 }
 
 onMounted(() => {
+  // 初始化分页大小
+Data.pageInput.pageSize = pageState.pageInput.pageSize;
   init()
 })
 

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

@@ -116,8 +116,8 @@
             </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"
+            <el-pagination v-model:currentPage="pageState.pageInput.currentPage"
+              v-model:page-size="pageState.pageInput.pageSize" :total="oilEngineData.total" :default-page-size="5"
               :page-sizes="[5, 10, 15, 20, 50, 100]" small background @size-change="onSizeChange"
               @current-change="onCurrentChange" layout="total, sizes, prev, pager, next, jumper" />
           </div>
@@ -138,8 +138,12 @@ 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()
 // /**油机列表 - 列表状态 */
@@ -294,8 +298,6 @@ const resetQuery = () => {
   oilEngineData.filterModel.installationDate = ''
   oilEngineData.filterModel.serialNumber = ''
   oilEngineData.filterModel.createTimeRange = null
-
-  
 }
 
 //设置不同设备状态、在线状态字体颜色
@@ -322,6 +324,8 @@ const getColor = (value: string): string => {
 
 
 onMounted(() => {
+ // 初始化分页大小
+ oilEngineData.pageInput.PageSize = pageState.pageInput.pageSize;
   init()
   eventBus.off('refreshView')
   eventBus.on('refreshView', async () => {

admin.ui.plus-master/src/views/admin/statement/moreOilEngineDetails/component/main.vue

@@ -1,60 +1,61 @@
 <template>
-  <div class="all-con" style="position: relative;">
-      <el-icon style="position: absolute;left: -15px;top: 17px;">
-          <component style="color:#fff;background-color: #3d3dff;height: 2.5em;border-radius:5px 0 0 5px;"
-              :is="showicon ? CaretLeft : CaretRight" @click="onShowHide" />
-      </el-icon>
-      <el-card class="oilInfo-bottom one">
-          <el-row :gutter="10" style="text-align: center;line-height: 2em;height: 2em">
-
-              <el-col :span="1">
-                  <div :style="isDisplay == 1 ? 'border-bottom:1px solid blue' : 'border:none'" @click="display(1)">概览
-                  </div>
-              </el-col>
-              <el-col :span="2">
-                  <div :style="isDisplay == 2 ? 'border-bottom:1px solid blue' : 'border:none'" @click="display(2)">报警
-                  </div>
-              </el-col>
-              <el-col :span="3" class="oilInfo-bottom">
-                  <div :style="isDisplay == 3 ? 'border-bottom:1px solid blue' : 'border:none'" @click="display(3)">
-                      ECQS编码状态
-                  </div>
-              </el-col>
-              <el-col :span="3" class="oilInfo-bottom">
-                  <div :style="isDisplay == 4 ? 'border-bottom:1px solid blue' : 'border:none'" @click="display(4)">
-                      维修记录
-                  </div>
-              </el-col>
-              <el-row :span="15" class="oilInfo-bottom to-flex" style="position: absolute;right: 0;">
-                  <div style="margin-right: 1em;">
-                      图例：
-                  </div>
-                  <div style="margin-right: 2em;">
-                      <div class="status-point" style="background-color:#5b53f9;right: 18.5em;top: 0.75em;" />
-                      在线
-                  </div>
-                  <div style="margin-right: 0.75em;">
-                      <div class="status-point" style="background-color:#9f9fa3;right: 14.5em;top: 0.75em;" />
-                      离线
-                  </div>
-                  <div style="margin-right: 0.75em;">
-                      <img :src="uurl" style="width: 1em;margin-right: 0.25em;">
-                      校验成功
-                  </div>
-                  <div style="margin-right: 2em;">
-                      <img :src="urrl" style="width: 1em;margin-right: 0.25em;">
-                      校验失败
-                  </div>
-              </el-row>
-          </el-row>
-      </el-card>
-      <div class="tip-con">
-          <el-alert v-if="detailsData.list.onlineStatus === '离线'" title="加油机长时间离线" type="error"
-              class="mb15"></el-alert>
-          <el-alert v-if="detailsData.list.onlineStatus === '在线'" title="加油机长时间在线" type="success"
-              class="mb15"></el-alert>
-      </div>
+    <div class="all-con" style="position: relative;">
+        <el-icon style="position: absolute;left: -15px;top: 17px;">
+            <component style="color:#fff;background-color: #3d3dff;height: 2.5em;border-radius:5px 0 0 5px;"
+                :is="showicon ? CaretLeft : CaretRight" @click="onShowHide" />
+        </el-icon>
+        <el-card class="oilInfo-bottom one">
+            <el-row :gutter="10" style="text-align: center;line-height: 2em;height: 2em">
+
+                <el-col :span="1">
+                    <div :style="isDisplay == 1 ? 'border-bottom:1px solid blue' : 'border:none'" @click="display(1)">概览
+                    </div>
+                </el-col>
+                <el-col :span="2">
+                    <div :style="isDisplay == 2 ? 'border-bottom:1px solid blue' : 'border:none'" @click="display(2)">报警
+                    </div>
+                </el-col>
+                <el-col :span="3" class="oilInfo-bottom">
+                    <div :style="isDisplay == 3 ? 'border-bottom:1px solid blue' : 'border:none'" @click="display(3)">
+                        ECQS编码状态
+                    </div>
+                </el-col>
+                <el-col :span="3" class="oilInfo-bottom">
+                    <div :style="isDisplay == 4 ? 'border-bottom:1px solid blue' : 'border:none'" @click="display(4)">
+                        维修记录
+                    </div>
+                </el-col>
+                <el-row :span="15" class="oilInfo-bottom to-flex" style="position: absolute;right: 0;">
+                    <div style="margin-right: 1em;">
+                        图例：
+                    </div>
+                    <div style="margin-right: 2em;">
+                        <div class="status-point" style="background-color:#5b53f9;right: 18.5em;top: 0.75em;" />
+                        在线
+                    </div>
+                    <div style="margin-right: 0.75em;">
+                        <div class="status-point" style="background-color:#9f9fa3;right: 14.5em;top: 0.75em;" />
+                        离线
+                    </div>
+                    <div style="margin-right: 0.75em;">
+                        <img :src="uurl" style="width: 1em;margin-right: 0.25em;">
+                        校验成功
+                    </div>
+                    <div style="margin-right: 2em;">
+                        <img :src="urrl" style="width: 1em;margin-right: 0.25em;">
+                        校验失败
+                    </div>
+                </el-row>
+            </el-row>
+        </el-card>
+        <div class="tip-con">
+            <el-alert v-if="detailsData.list.onlineStatus === '离线'" title="加油机长时间离线" type="error"
+                class="mb15"></el-alert>
+            <el-alert v-if="detailsData.list.onlineStatus === '在线'" title="加油机长时间在线" type="success"
+                class="mb15"></el-alert>
+        </div>
         <!-- 油机内容 -->
+        <el-text tag="b" style="color: #000">油机详情</el-text>
         <el-card class="oilInfo-con oilInfo-bottom">
             <el-row class='oilInfo-bottom'>
                 <img class="oilInfo-img" :src="url">
@@ -104,42 +105,68 @@
                 </el-row>
             </div>
         </el-card>
-      <!-- 油枪信息 -->
-      <el-row :gutter="16" style="margin-top:10px;" :key="flagData.keyData">
-          <el-col :span="8" v-for="(item, index) in oilListData.firstList" v-bind:key="index">
-              <el-card class="oilInfo-msg oilInfo-bottom"
-                  @click="toParts(item.name, item.mainBoard_NozzleNo, item.onlineStatus, item.fuelName, item.alarming, item.code)">
-                  <el-row class="oilInfo-bottom">
-                      <img :src="url" class="oilInfo-img">
-                      <div>
-                          <el-col :span="24" class="oilInfo-bottom">
-                              <el-text tag="b">逻辑枪号：{{ item.name }}</el-text>
-                              <div style="position: absolute;right: 10%;top: 5%;">
-                                  <div class="status-point"
-                                      :style="item.onlineStatus == '在线' ? 'background-color:#5b53f9' : 'background-color:#9f9fa3'">
-                                  </div>
-                                  <img :src="uurl" style="width: 1em;">
-                              </div>
-                          </el-col>
-                          <el-col :span="24" class="oilInfo-bottom">
-                              <span class="oilInfo-item-two">物理枪号：</span>{{
-                                  item.mainBoard_NozzleNo }}
-                          </el-col>
-                          <el-col :span="24" class="oilInfo-bottom">
-                              <span class="oilInfo-item-two">自锁功能：</span>{{ item.alarming }}
-                          </el-col>
-                      </div>
-                  </el-row>
-                  <el-row class="oilInfo-bottom">
-                      <span class="oilInfo-item-two">油品：</span>{{ item.fuelName }}
-                  </el-row>
-                  <el-row>
-                      <span class="oilInfo-item-two">ECQS编码：</span>{{ item.code }}
-                  </el-row>
-              </el-card>
-          </el-col>
-      </el-row>
-  </div>
+        <el-row :gutter="10" class="oilInfo-bottom">
+            <el-col :span="0.5" class="oilInfo-bottom">
+                <el-text tag="b" style="color: #000">油枪列表</el-text>
+            </el-col>
+            <el-col :span="0.5" class="oilInfo-bottom">
+                <div class="oilLabel-con" @click="isOnline('所有')"
+                    :style="flagData.isFlag == '所有' ? 'background-color:#4d4dff' : 'background-color:#89898b'">
+                    所有
+                </div>
+            </el-col>
+            <el-col :span="0.5" class="oilInfo-bottom">
+                <div class="oilLabel-con" @click="isOnline('在线')"
+                    :style="flagData.isFlag == '在线' ? 'background-color:#4d4dff' : 'background-color:#89898b'">
+                    在线</div>
+            </el-col>
+            <el-col :span="0.5" class="oilInfo-bottom">
+                <div class="oilLabel-con" @click="isOnline('离线')"
+                    :style="flagData.isFlag == '离线' ? 'background-color:#4d4dff' : 'background-color:#89898b'">
+                    离线</div>
+            </el-col>
+            <el-col :span="0.5" class="oilInfo-bottom">
+                <div class="oilLabel-con" style="background-color: #89898b;  width: 6em;">校验通过</div>
+            </el-col>
+            <el-col :span="0.5" class="oilInfo-bottom">
+                <div class="oilLabel-con" style="background-color: #89898b;  width: 6em;">校验失败</div>
+            </el-col>
+        </el-row>
+        <el-row :gutter="16" style="margin-top:10px;" :key="flagData.keyData">
+            <el-col :span="8" v-for="(item, index) in listcom" v-bind:key="index">
+                <el-card class="oilInfo-msg oilInfo-bottom"
+                    @click="toParts(item.name, item.mainBoard_NozzleNo, item.onlineStatus, item.fuelName, item.alarming, item.code)">
+                    <el-row class="oilInfo-bottom">
+                        <img :src="url" class="oilInfo-img">
+                        <div>
+                            <el-col :span="24" class="oilInfo-bottom">
+                                <el-text tag="b">逻辑枪号：{{ item.name }}</el-text>
+                                <div style="position: absolute;right: 10%;top: 5%;">
+                                    <div class="status-point"
+                                        :style="item.onlineStatus == '在线' ? 'background-color:#5b53f9' : 'background-color:#9f9fa3'">
+                                    </div>
+                                    <img :src="uurl" style="width: 1em;">
+                                </div>
+                            </el-col>
+                            <el-col :span="24" class="oilInfo-bottom">
+                                <span class="oilInfo-item-two">物理枪号：</span>{{
+                                    item.mainBoard_NozzleNo }}
+                            </el-col>
+                            <el-col :span="24" class="oilInfo-bottom">
+                                <span class="oilInfo-item-two">自锁功能：</span>{{ item.alarming }}
+                            </el-col>
+                        </div>
+                    </el-row>
+                    <el-row class="oilInfo-bottom">
+                        <span class="oilInfo-item-two">油品：</span>{{ item.fuelName }}
+                    </el-row>
+                    <el-row>
+                        <span class="oilInfo-item-two">ECQS编码：</span>{{ item.code }}
+                    </el-row>
+                </el-card>
+            </el-col>
+        </el-row>
+    </div>
 
 </template>
 
@@ -160,7 +187,6 @@ import {
     CaretRight,
     CaretLeft,
 } from '@element-plus/icons-vue'
-import { da } from "element-plus/es/locale";
 
 /******************************数据对象***************************************/
 
@@ -198,9 +224,7 @@ const detailsData = reactive({
  */
 const oilListData = reactive({
     loading: false,
-    list: [] as Array<NozzlecontrolDtl>,
-    firstList : [] as Array<NozzlecontrolDtl>,
-    lastList : [] as Array<NozzlecontrolDtl>
+    list: [] as Array<NozzlecontrolDtl>
 })
 /**
  * 油机列表初始ID
@@ -215,8 +239,6 @@ const toPage = () => {
  * 油枪列表相关数据
  */
 let listcom = JSON.parse(JSON.stringify(oilListData.list))
-
-
 let flagData = reactive({
     keyData: 0,
     isFlag: '所有'
@@ -284,8 +306,6 @@ const initOilListData = async () => {
     const fuelId = props.id
     const { data } = await new MoreOilEngineDetailsApi().getOilListData({ Fuelid: fuelId })
     oilListData.list = data
-    oilListData.firstList = data.slice(0,4)
-    oilListData.lastList = data.slice(4)
     oilListData.loading = false
     listcom = data
     flagData.keyData = Math.random()
@@ -358,10 +378,6 @@ onMounted(() => {
 
 // 路由跳转 -- 部件信息图
 const toParts = ((name: any, NozzleNo: any, status: any, fuelName: any, alarming: any, code: any) => {
-
-  console.log("原油枪列表",listcom)
-  console.log("第一个油枪列表",oilListData.firstList);
-  return;
     router.push({
         path: `/statement/partInformation`,
         query: {

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

@@ -80,7 +80,7 @@
             </el-table-column>
           </el-table>
           <div class="my-flex my-flex-end" style="margin-top: 20px">
-            <el-pagination v-model:currentPage="Data.pageInput.currentPage" v-model:page-size="Data.pageInput.pageSize"
+            <el-pagination v-model:currentPage="pageState.pageInput.currentPage" v-model:page-size="pageState.pageInput.pageSize"
               :total="Data.total" :page-sizes="[5, 10, 15, 20, 50, 100]" small background @size-change="onSizeChange"
               @current-change="onCurrentChange" layout="total, sizes, prev, pager, next, jumper" />
           </div>
@@ -96,7 +96,10 @@ import { onMounted, reactive, watch } from "vue";
 import { oilGunFilterModel_SearchFilter, oilGunFilterModel, PageInputoilGunFilterModel } from "/@/api/admin/reportManagement/oilGun/oilGunDto";
 import { OilGunApi } from "/@/api/admin/reportManagement/oilGun/oilGunApi";
 import StatusBox from "/@/components/StatusBox.vue";
+import { useDynamicPageSize } from "/@/composables/useDynamicPageSize";
 
+// 使用组合式函数获取分页状态
+const pageState = useDynamicPageSize(10, 15);
 
 /**页面对象 */
 const Data = reactive({
@@ -167,6 +170,8 @@ const selectList = reactive({
 })
 
 onMounted(() => {
+  // 初始化分页大小
+Data.pageInput.pageSize = pageState.pageInput.pageSize;
   init()
 })
 

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

@@ -111,10 +111,10 @@
           </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"
+              v-model:currentPage="pageState.pageInput.currentPage"
+              v-model:page-size="pageState.pageInput.pageSize"
               :total="state.total"
-              :page-sizes="[10, 20, 50, 100]"
+              :page-sizes="[10, 15, 20, 50, 100]"
               small
               background
               @size-change="onSizeChange"
@@ -133,7 +133,10 @@
   import { PageInput,encodercontrolsDto } from "/@/api/admin/reportManagement/taxcontrol/taxcontroldto";
   import {Api} from "/@/api/admin/reportManagement/taxcontrol/taxcontrolapi";
   import StatusBox from "/@/components/StatusBox.vue";
+import { useDynamicPageSize } from "/@/composables/useDynamicPageSize";
 
+  // 使用组合式函数获取分页状态
+const pageState = useDynamicPageSize(10, 15);
 
 /**数据对象*/
   const state = reactive({
@@ -197,6 +200,8 @@ enum OnlineStatus {
 }
 
   onMounted(() => {
+    // 初始化分页大小
+state.pageInput.pageSize = pageState.pageInput.pageSize;
     init()
     eventBus.off('refreshView')
     eventBus.on('refreshView', async () => {

admin.ui.plus-master/src/views/admin/workbench/index.vue

@@ -25,13 +25,13 @@
         </div>
       </el-col>
     </el-row>
-    <el-row :gutter="10" class="home-card-two mb15">
-      <el-col :xs="24" :sm="14" :md="14" :lg="14" :xl="14">
+    <el-row :gutter="15" class="home-card-two mb15">
+      <el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16">
         <div class="home-card-item">
           <div style="height: 100%" ref="homeLineRef"></div>
         </div>
       </el-col>
-      <el-col :xs="24" :sm="12" :md="12" :lg="10" :xl="10" class="home-media">
+      <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="8" class="home-media">
         <div class="home-card-item">
           <div style="height: 100%" ref="homePieRef"></div>
         </div>
@@ -62,9 +62,9 @@
 <!--        </div>-->
 <!--      </el-col>-->
 <!--    </el-row>-->
-  </div>
-  <div class="version">
-    托肯恒山科技有限公司  V 4.1.1  
+<div class="version">
+  托肯恒山科技有限公司  V 4.1.1  
+</div>
   </div>
 </template>
 
@@ -99,7 +99,7 @@ const state = reactive({
     {
       num1: 0,
       // num2: '-12.32',
-      num3: '国标备案主板',
+      num3: '团标备案主板',
       num4: 'fa fa-microchip',
       color1: '#FF6462',
       color2: '--next-color-primary-lighter',
@@ -220,13 +220,13 @@ const lineChart = ref({
   option : {
     backgroundColor: state.charts.bgColor,
     title: {
-      text: '国标灌注',
+      text: '团标灌注',
       x: 'left',
       textStyle: { fontSize: '15', color: state.charts.color },
     },
-    grid: { top: 50, right: 30, bottom: 40, left: 40 },
+    grid: { top: 70, right: 20, bottom: 30, left: 30 },
     tooltip: { trigger: 'axis' },
-    legend: { data: ['ECVR-FM', '国标主板', '国标备案主板', 'ECVR-FM备案'], right: 0 },
+    legend: { data: ['ECVR-FM', '团标主板', '团标备案主板', 'ECVR-FM备案'], right: 0 },
     xAxis: {
       data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
     },
@@ -255,7 +255,7 @@ const lineChart = ref({
         },
       },
       {
-        name: '国标主板',
+        name: '团标主板',
         type: 'line',
         symbolSize: 6,
         symbol: 'circle',
@@ -271,7 +271,7 @@ const lineChart = ref({
         },
       },
       {
-        name: '国标备案主板',
+        name: '团标备案主板',
         type: 'line',
         symbolSize: 6,
         symbol: 'circle',
@@ -327,11 +327,11 @@ const initPieChart = () => {
   for (var i = 0; i < pieChart.getName.length; i++) {
     data.push({ name: pieChart.getName[i], value: pieChart.getValue[i] })
   }
-  const colorList = ['#E720E8', '#36C78B', '#FEC279', '#968AF5', '#B0C54EFF','#51A3FC','#E710E8','#e44040','#d0ff00','#b11eeb','#030396','#00566b','#ff05ac']
+  const colorList = ['#51A3FC', '#36C78B', '#FEC279', '#968AF5', '#B0C54EFF','#E720E8','#E710E8']
   const option = {
     backgroundColor: state.charts.bgColor,
     title: {
-      text: '国标灌注',
+      text: '团标灌注',
       x: 'left',
       textStyle: { fontSize: '15', color: state.charts.color },
     },
@@ -740,13 +740,11 @@ $homeNavLengh: 8;
       height: 16vh;
     }
   }
-
-}
-
-.version{
+  .version{
   display: flex;
   justify-content: center;
   margin-top: 6vh;
   font-size: 15px;
 }
-</style>
+}
+</style>