公务用车 分页

src/api/screen/service.js

@@ -944,25 +944,29 @@ export function getResource(appOrg) {
 }
 
 // 2025年度公务车车辆明细
-export function getCarDetail(appOrg, flag) {
+export function getCarDetail(appOrg, flag, pageSize, page) {
   return request({
     url: '/large/car/carDetail',
     method: 'get',
     params: {
       appOrg: appOrg,
-      flag: flag
+      flag: flag,
+      pageSize: pageSize,
+      page: page
     }
   })
 }
 
 // 公务车预警明细
-export function getWarnDetail(appOrg, alertType) {
+export function getWarnDetail(appOrg, alertType, pageSize, page) {
   return request({
     url: '/large/car/warnDetail',
     method: 'get',
     params: {
       appOrg: appOrg,
-      alertType: alertType
+      alertType: alertType,
+      pageSize: pageSize,
+      page: page
     }
   })
 }

src/views/screen/official/carCost.vue

@@ -24,6 +24,17 @@
         </div>
       </div>
     </div>
+    <!-- 分页组件 -->
+    <div style="width: 100%;display: flex;justify-content: center;align-items: center;margin-top: 40px;">
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        :current-page="currentPage"
+        :page-size="pageSize"
+        :total="total"
+        @current-change="handlePageChange">
+      </el-pagination>
+    </div>
   </div>
 </template>
 
@@ -34,6 +45,7 @@ import pinyin from "../data/pinyin.js";
 export default {
   name: "CarCost",
   props: {
+    total: Number,
     dataList: Array,
     week: {
       type: String,
@@ -46,10 +58,17 @@ export default {
   },
   data() {
     return {
+      currentPage: 1,
+      pageSize: 10
     };
   },
   mounted() {},
   methods: {
+    handlePageChange(page) {
+      this.currentPage = page; // 更新当前页码
+      this.$emit("handlePageChange", page-1, this.pageSize);
+    },
+
     choose(){
       this.$emit("choose");
     },
@@ -99,6 +118,7 @@ export default {
     flex-direction: column;
     padding: 15px 20px 0 15px;
     padding-top: 0 !important;
+    height: 480px;
   }
 }
 .flex-container {
@@ -158,158 +178,25 @@ export default {
 .el-select .el-input .el-select__caret {
   display: none;
 }
-.data-weeks-foods {
-  position: relative;
-  width: 1336px;
-  height: 864px;
-  background: url("../../../assets/images/main/dialog-bg.png") no-repeat;
-  background-size: cover;
-  .close-btn {
-    position: absolute;
-    right: 0;
-    top: 0;
-    width: 50px;
-    height: 50px;
-    cursor: pointer;
-  }
-  .choose-area {
-    position: absolute;
-    right: 100px;
-    top: 7px;
-    width: 80.05px;
-    height: 30px;
-    line-height: 30px;
-    padding-left: 15px;
-    font-size: 14px;
-    color: #00ffff;
-    background: url("../../../assets/images/main/choose_short.png") no-repeat;
-    cursor: pointer;
-  }
-  .choose-area.choose-week{
-    right: 200px;
-  }
-  .content-area {
-    display: flex;
-    flex-direction: column;
-    padding: 15px 20px 0 15px;
-    padding-top: 0 !important;
-  }
 
-  .content-title {
-    width: 515px;
-    height: 26px;
-    background: url("../../../assets/images/main/title_pro_long.png") no-repeat;
-    background-size: 100% 100%;
-    font-family: "PingFangSC";
-    font-size: 16px;
-    font-weight: bold;
-    color: #00ffff;
-    padding-left: 17px;
-    .title {
-      display: block;
-    }
-  }
 
-  .content {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    .data-list {
-      background: radial-gradient(
-          190% 71% at 50% 49%,
-          rgba(21, 105, 107, 0.54) 0%,
-          rgba(27, 95, 97, 0) 100%
-      );
-      width: 100%;
-      height: 492px;
-      padding: 20px;
-      overflow: auto;
-      white-space: pre-wrap;
-      .data-item {
-        display: inline-block;
-        color: #00ffff;
-        font-weight: bold;
-        margin: 0 20px 20px 0;
-        font-size: 14px;
-        img {
-          width: 80px;
-          height: 80px;
-          object-fit: cover;
-        }
-        .name {
-          width: 80px;
-          display: block;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          text-align: center;
-        }
-      }
-    }
-  }
-
-  .title-format {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    img {
-      width: 6px;
-      height: 24px;
-      margin-right: 6px;
-    }
-    .title-info {
-      display: flex;
-      flex-direction: column;
-      font-size: 12px;
-      color: #ffffff;
-      .title-en {
-        font-size: 8px;
-        color: #ffffff;
-        opacity: 0.4;
-      }
-    }
-  }
-
-  .choose-area {
-    .el-select {
-      width: 90%;
-    }
-    .el-input {
-      input {
-        background: rgba(255, 255, 255, 0);
-        color: #00ffff;
-        border: none;
-        padding: 0;
-        width: 30px;
-      }
-    }
-  }
-
-  .no-data{
-    text-align: center;
-    color: #62ffe5;
-    font-size: 25px;
-    margin-top: 150px;
-  }
-
-  ::-webkit-scrollbar {
-    width: 3px;
-    height: 3px;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    //滑块部分
-    // border-radius: 5px;
-    background-color: #58cbbb;
-  }
-
-  ::-webkit-scrollbar-track {
-    //轨道部分
-    // box-shadow: inset 0 0 5px #ddd;
-    background: #ddd;
-    // border-radius: 5px;
-  }
+::v-deep .btn-prev{
+  color: #00F6EC !important;
+  background-color: rgba(21, 105, 107, 0.35) !important;
+  border: 1px #15696b solid;
+}
+::v-deep .btn-next{
+  color: #00F6EC !important;
+  background-color: rgba(21, 105, 107, 0.35) !important;
+  border: 1px #15696b solid;
+}
+::v-deep .el-pager li.active{
+  background-color: #00ffff !important;
+  color: rgba(9, 8, 8, 0.68) !important;
+}
+::v-deep .el-pager li{
+  background-color: rgba(21, 105, 107, 0.35) !important;
+  color: #00ffff !important;
 }
 </style>
 

src/views/screen/official/carHealth.vue

@@ -24,6 +24,17 @@
         </div>
       </div>
     </div>
+    <!-- 分页组件 -->
+    <div style="width: 100%;display: flex;justify-content: center;align-items: center;margin-top: 40px;">
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        :current-page="currentPage"
+        :page-size="pageSize"
+        :total="total"
+        @current-change="handlePageChange">
+      </el-pagination>
+    </div>
   </div>
 </template>
 
@@ -34,6 +45,7 @@ import pinyin from "../data/pinyin.js";
 export default {
   name: "CarCost",
   props: {
+    total: Number,
     dataList: Array,
     week: {
       type: String,
@@ -46,11 +58,17 @@ export default {
   },
   data() {
     return {
-
+      currentPage: 1,
+      pageSize: 10
     };
   },
   mounted() {},
   methods: {
+    handlePageChange(page) {
+      this.currentPage = page; // 更新当前页码
+      this.$emit("handlePageChange", page-1, this.pageSize);
+    },
+
     choose(){
       this.$emit("choose");
     },
@@ -100,6 +118,7 @@ export default {
     flex-direction: column;
     padding: 15px 20px 0 15px;
     padding-top: 0 !important;
+    height: 480px;
   }
 }
 .flex-container {
@@ -158,163 +177,25 @@ export default {
 .el-select .el-input .el-select__caret {
   display: none;
 }
-.data-weeks-foods {
-  position: relative;
-  width: 1336px;
-  height: 864px;
-  background: url("../../../assets/images/main/dialog-bg.png") no-repeat;
-  background-size: cover;
-  .close-btn {
-    position: absolute;
-    right: 0;
-    top: 0;
-    width: 50px;
-    height: 50px;
-    cursor: pointer;
-  }
-  .choose-area {
-    position: absolute;
-    right: 100px;
-    top: 7px;
-    width: 80.05px;
-    height: 30px;
-    line-height: 30px;
-    padding-left: 15px;
-    font-size: 14px;
-    color: #00ffff;
-    background: url("../../../assets/images/main/choose_short.png") no-repeat;
-    cursor: pointer;
-  }
-  .choose-area.choose-week{
-    right: 200px;
-  }
-  .content-area {
-    display: flex;
-    flex-direction: column;
-    padding: 15px 20px 0 15px;
-    padding-top: 0 !important;
-  }
-
-  .content-title {
-    width: 515px;
-    height: 26px;
-    background: url("../../../assets/images/main/title_pro_long.png") no-repeat;
-    background-size: 100% 100%;
-    font-family: "PingFangSC";
-    font-size: 16px;
-    font-weight: bold;
-    color: #00ffff;
-    padding-left: 17px;
-    .title {
-      display: block;
-    }
-  }
 
-  .content {
-    background: radial-gradient(
-        190% 71% at 50% 49%,
-        rgba(21, 105, 107, 0.54) 0%,
-        rgba(27, 95, 97, 0) 100%
-    );
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    .data-list {
-      background: radial-gradient(
-          190% 71% at 50% 49%,
-          rgba(21, 105, 107, 0.54) 0%,
-          rgba(27, 95, 97, 0) 100%
-      );
-      width: 100%;
-      height: 492px;
-      padding: 20px;
-      overflow: auto;
-      white-space: pre-wrap;
-      .data-item {
-        display: inline-block;
-        color: #00ffff;
-        font-weight: bold;
-        margin: 0 20px 20px 0;
-        font-size: 14px;
-        img {
-          width: 80px;
-          height: 80px;
-          object-fit: cover;
-        }
-        .name {
-          width: 80px;
-          display: block;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          text-align: center;
-        }
-      }
-    }
-  }
 
-  .title-format {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    img {
-      width: 6px;
-      height: 24px;
-      margin-right: 6px;
-    }
-    .title-info {
-      display: flex;
-      flex-direction: column;
-      font-size: 12px;
-      color: #ffffff;
-      .title-en {
-        font-size: 8px;
-        color: #ffffff;
-        opacity: 0.4;
-      }
-    }
-  }
-
-  .choose-area {
-    .el-select {
-      width: 90%;
-    }
-    .el-input {
-      input {
-        background: rgba(255, 255, 255, 0);
-        color: #00ffff;
-        border: none;
-        padding: 0;
-        width: 30px;
-      }
-    }
-  }
-
-  .no-data{
-    text-align: center;
-    color: #62ffe5;
-    font-size: 25px;
-    margin-top: 150px;
-  }
-
-  ::-webkit-scrollbar {
-    width: 3px;
-    height: 3px;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    //滑块部分
-    // border-radius: 5px;
-    background-color: #58cbbb;
-  }
-
-  ::-webkit-scrollbar-track {
-    //轨道部分
-    // box-shadow: inset 0 0 5px #ddd;
-    background: #ddd;
-    // border-radius: 5px;
-  }
+::v-deep .btn-prev{
+  color: #00F6EC !important;
+  background-color: rgba(21, 105, 107, 0.35) !important;
+  border: 1px #15696b solid;
+}
+::v-deep .btn-next{
+  color: #00F6EC !important;
+  background-color: rgba(21, 105, 107, 0.35) !important;
+  border: 1px #15696b solid;
+}
+::v-deep .el-pager li.active{
+  background-color: #00ffff !important;
+  color: rgba(9, 8, 8, 0.68) !important;
+}
+::v-deep .el-pager li{
+  background-color: rgba(21, 105, 107, 0.35) !important;
+  color: #00ffff !important;
 }
 </style>
 

src/views/screen/official/main.vue

@@ -164,18 +164,24 @@
         <resource-list
           v-if="showRes === 1"
           :op = "op"
+          :total = "total"
           :dataList = "dataList"
           @close="onCloseRes"
+          @handlePageChange="handlePageChangeZ"
         ></resource-list>
         <car-cost
           :dataList = "dataList"
+          :total = "total"
           v-if="showCost === 1"
           @close="onCloseCost"
+          @handlePageChange="handlePageChangeY"
         ></car-cost>
         <car-health
+          :total = "total"
           :dataList = "dataList"
           v-if="showHealth === 1"
           @close="onCloseHealth"
+          @handlePageChange="handlePageChangeX"
         ></car-health>
       </div>
     </div>
@@ -232,6 +238,7 @@ export default {
   // },
   data() {
     return {
+      total: 0,
       dataList: [],
       mapData:[],
       flag: 0,
@@ -256,6 +263,7 @@ export default {
       showMap: true,
       showLocal: false,
       appOrg: "10001",
+      alertType: null,
       curCompany: [],
       company: company,
     };
@@ -270,6 +278,36 @@ export default {
   beforeDestroy() {},
   mounted() {},
   methods: {
+    handlePageChangeX(page, pageSize){
+      getCarDetail(this.appOrg, 1, pageSize, page).then(res => {
+        if (Number(res.code) === 200) {
+          this.dataList = res.data.list
+          this.showC = true
+          this.showHealth = 1
+        }
+      })
+    },
+
+    handlePageChangeY(page, pageSize){
+      getCarDetail(this.appOrg, 0, pageSize, page).then(res => {
+        if (Number(res.code) === 200) {
+          this.dataList = res.data.list
+          this.showC = true
+          this.showCost = 1
+        }
+      })
+    },
+
+    handlePageChangeZ(page, pageSize){
+      getWarnDetail(this.appOrg, this.alertType, pageSize, page).then(res => {
+        if (Number(res.code) === 200) {
+          this.dataList = res.data.list
+          this.showC = true
+          this.showRes = 1
+        }
+      })
+    },
+
     transmit(appOrg){
       this.appOrg = appOrg
       this.resource();
@@ -373,9 +411,11 @@ export default {
     chooseOp(title, alertType){
       this.op = title
       this.closeDialog()
-      getWarnDetail(this.appOrg, alertType).then(res => {
+      this.alertType = alertType
+      getWarnDetail(this.appOrg, alertType, 10, 0).then(res => {
         if (Number(res.code) === 200) {
-          this.dataList = res.data
+          this.dataList = res.data.list
+          this.total = res.data.total
           this.showC = true
           this.showRes = 1
         }
@@ -394,9 +434,10 @@ export default {
 
     chooseCost(){
       this.closeDialog()
-      getCarDetail(this.appOrg, 0).then(res => {
+      getCarDetail(this.appOrg, 0, 10, 0).then(res => {
         if (Number(res.code) === 200) {
-          this.dataList = res.data
+          this.dataList = res.data.list
+          this.total = res.data.total
           this.showC = true
           this.showCost = 1
         }
@@ -409,9 +450,10 @@ export default {
 
     chooseHealth(){
       this.closeDialog()
-      getCarDetail(this.appOrg, 1).then(res => {
+      getCarDetail(this.appOrg, 1, 10, 0).then(res => {
         if (Number(res.code) === 200) {
-          this.dataList = res.data
+          this.dataList = res.data.list
+          this.total = res.data.total
           this.showC = true
           this.showHealth = 1
         }

src/views/screen/official/resourceList.vue

@@ -25,6 +25,16 @@
         </div>
       </div>
     </div>
+    <div style="width: 100%;display: flex;justify-content: center;align-items: center;margin-top: 40px;">
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        :current-page="currentPage"
+        :page-size="pageSize"
+        :total="total"
+        @current-change="handlePageChange">
+      </el-pagination>
+    </div>
   </div>
 </template>
 
@@ -35,6 +45,7 @@ import pinyin from "../data/pinyin.js";
 export default {
   name: "CarCost",
   props: {
+    total: Number,
     dataList: Array,
     op: {
       type: String,
@@ -44,11 +55,17 @@ export default {
   },
   data() {
     return {
-
+      currentPage: 1,
+      pageSize: 10
     };
   },
   mounted() {},
   methods: {
+    handlePageChange(page) {
+      this.currentPage = page; // 更新当前页码
+      this.$emit("handlePageChange", page-1, this.pageSize);
+    },
+
     choose(){
       this.$emit("choose");
     },
@@ -98,6 +115,7 @@ export default {
     flex-direction: column;
     padding: 15px 20px 0 15px;
     padding-top: 0 !important;
+    height: 480px;
   }
 }
 .flex-container {
@@ -157,158 +175,25 @@ export default {
 .el-select .el-input .el-select__caret {
   display: none;
 }
-.data-weeks-foods {
-  position: relative;
-  width: 1336px;
-  height: 864px;
-  background: url("../../../assets/images/main/dialog-bg.png") no-repeat;
-  background-size: cover;
-  .close-btn {
-    position: absolute;
-    right: 0;
-    top: 0;
-    width: 50px;
-    height: 50px;
-    cursor: pointer;
-  }
-  .choose-area {
-    position: absolute;
-    right: 100px;
-    top: 7px;
-    width: 80.05px;
-    height: 30px;
-    line-height: 30px;
-    padding-left: 15px;
-    font-size: 14px;
-    color: #00ffff;
-    background: url("../../../assets/images/main/choose_short.png") no-repeat;
-    cursor: pointer;
-  }
-  .choose-area.choose-week{
-    right: 200px;
-  }
-  .content-area {
-    display: flex;
-    flex-direction: column;
-    padding: 15px 20px 0 15px;
-    padding-top: 0 !important;
-  }
-
-  .content-title {
-    width: 515px;
-    height: 26px;
-    background: url("../../../assets/images/main/title_pro_long.png") no-repeat;
-    background-size: 100% 100%;
-    font-family: "PingFangSC";
-    font-size: 16px;
-    font-weight: bold;
-    color: #00ffff;
-    padding-left: 17px;
-    .title {
-      display: block;
-    }
-  }
 
-  .content {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    .data-list {
-      background: radial-gradient(
-          190% 71% at 50% 49%,
-          rgba(21, 105, 107, 0.54) 0%,
-          rgba(27, 95, 97, 0) 100%
-      );
-      width: 100%;
-      height: 492px;
-      padding: 20px;
-      overflow: auto;
-      white-space: pre-wrap;
-      .data-item {
-        display: inline-block;
-        color: #00ffff;
-        font-weight: bold;
-        margin: 0 20px 20px 0;
-        font-size: 14px;
-        img {
-          width: 80px;
-          height: 80px;
-          object-fit: cover;
-        }
-        .name {
-          width: 80px;
-          display: block;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          text-align: center;
-        }
-      }
-    }
-  }
 
-  .title-format {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    img {
-      width: 6px;
-      height: 24px;
-      margin-right: 6px;
-    }
-    .title-info {
-      display: flex;
-      flex-direction: column;
-      font-size: 12px;
-      color: #ffffff;
-      .title-en {
-        font-size: 8px;
-        color: #ffffff;
-        opacity: 0.4;
-      }
-    }
-  }
-
-  .choose-area {
-    .el-select {
-      width: 90%;
-    }
-    .el-input {
-      input {
-        background: rgba(255, 255, 255, 0);
-        color: #00ffff;
-        border: none;
-        padding: 0;
-        width: 30px;
-      }
-    }
-  }
-
-  .no-data{
-    text-align: center;
-    color: #62ffe5;
-    font-size: 25px;
-    margin-top: 150px;
-  }
-
-  ::-webkit-scrollbar {
-    width: 3px;
-    height: 3px;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    //滑块部分
-    // border-radius: 5px;
-    background-color: #58cbbb;
-  }
-
-  ::-webkit-scrollbar-track {
-    //轨道部分
-    // box-shadow: inset 0 0 5px #ddd;
-    background: #ddd;
-    // border-radius: 5px;
-  }
+::v-deep .btn-prev{
+  color: #00F6EC !important;
+  background-color: rgba(21, 105, 107, 0.35) !important;
+  border: 1px #15696b solid;
+}
+::v-deep .btn-next{
+  color: #00F6EC !important;
+  background-color: rgba(21, 105, 107, 0.35) !important;
+  border: 1px #15696b solid;
+}
+::v-deep .el-pager li.active{
+  background-color: #00ffff !important;
+  color: rgba(9, 8, 8, 0.68) !important;
+}
+::v-deep .el-pager li{
+  background-color: rgba(21, 105, 107, 0.35) !important;
+  color: #00ffff !important;
 }
 </style>