story#6735 中道救援系统及调度APP中新增报警模块 接口

src/views/vehicle-maintenance/vehicle-alarm-list.vue

@@ -6,40 +6,79 @@
         <span class="numTip" style="opacity: 1 !important;" v-if="item.num > 0">{{item.num}}</span>
       </div>
     </div>
-    <div class="content_wrap">
-      <div class="alarm_wrap" v-for="i in 6" :key="i">
-        <div class="alarm_title">
-          <div class="title_left">
-            <span>设备离线 {{i}}</span>
-<!--            <img class="alarm_level" src="@/assets/alarm_one.png" alt="">-->
-<!--            <img class="alarm_level" src="@/assets/alarm_two.png" alt="">-->
-            <img class="alarm_level" src="@/assets/alarm_three.png" alt="">
+    <van-pull-refresh class="refresh" v-model="isLoading" @refresh="onRefresh" v-show="!show">
+      <van-list
+        v-model="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+        @load="onLoad"
+      >
+        <div class="content_wrap">
+          <div class="alarm_wrap" v-for="(item, index) in pageList" :key="index" @click="goDetail(item)">
+            <div class="alarm_title">
+              <div class="title_left">
+                <span>{{item.alarmTypeString}}</span>
+                <img class="alarm_level" v-if="item.level == 1" src="@/assets/alarm_one.png" alt="">
+                <img class="alarm_level" v-if="item.level == 2" src="@/assets/alarm_two.png" alt="">
+                <img class="alarm_level" v-if="item.level == 3" src="@/assets/alarm_three.png" alt="">
+              </div>
+              <div class="label">{{item.startTime}}</div>
+            </div>
+            <div class="alarm_content">
+              <div class="label">车辆名称:</div>
+              <div class="content">{{item.vehicleName}}</div>
+            </div>
+            <div class="alarm_content">
+              <div class="label">报警详情:</div>
+              <div class="content">{{item.alarmRemark}}</div>
+            </div>
           </div>
-          <div class="label">2025-06-18 10:00</div>
         </div>
-        <div class="alarm_content">
-          <div class="label">车辆名称:</div>
-          <div class="content">GZ103大板</div>
-        </div>
-        <div class="alarm_content">
-          <div class="label">报警详情:</div>
-          <div class="content">APP未到达C点，车斗状态识别为空车</div>
-        </div>
-      </div>
+      </van-list>
+    </van-pull-refresh>
+    <div class="bgEmptyImg" v-show="show" >
+      <img src="@/assets/empty.png" />
     </div>
   </div>
 </template>
 
 <script>
+  import {myMixins} from "@/utils/myMixins"
+  import { getAlarmList, getAlarmCount } from "@/api/order"
   export default {
     name: "vehicleAlarmList",
     data() {
       return {
-        tabArr: [{ name: '未处理', status: 2, num: 6 }, { name: '技术处理中', status: 2, num: 0 }, {name: '处理中', status: 2, num: 3 }],
+        tabArr: [{ name: '未处理',  num: 0 }, { name: '技术处理中', num: 0 }, {name: '处理中', num: 1 }],
         activeIndex: 0,
+        pageNum:1,
+        pageSize:10,
+        total:'',
+        pageList: [],
+        isLoading: '',
+        loading: false,
+        finished: false,
       }
     },
+    mixins: [ myMixins ],
+    computed:{
+      show() {
+        return (this.pageList.length < 0 || this.pageList.length == 0); // 判断数组长度是否大于 0
+      },
+    },
+    async mounted() {
+      await this.getList()
+    },
     methods: {
+      goDetail(item) {
+        this.goPage('vehicleAlarmDetail', { code: item.code })
+      },
+      async getCount() {
+        let res = await getAlarmCount();
+        this.tabArr[0].num = res?.data?.alarmCount || 0
+        this.tabArr[1].num = res?.data?.jxCount || 0
+        this.tabArr[2].num = res?.data?.yyCount || 0
+      },
       async changeTab(index) {
         this.activeIndex = index
         this.pageNum = 1
@@ -47,8 +86,37 @@
         this.total= 0
         await this.getList()
       },
-      getList() {
-
+      async getList() {
+        let res = await getAlarmList({
+          pageNum:this.pageNum,
+          pageSize:this.pageSize,
+          handStatus: this.activeIndex
+        })
+        this.total = res.total
+        if(this.pageNum == 1){// 第一页直接赋值
+          this.pageList=res.data
+        }else{// 第二页数据拼接
+          let preList = this.pageList;
+          let arr = res.data;
+          this.pageList = preList.concat(arr)
+        }
+        await this.getCount();
+      },
+      async onLoad(){
+        this.pageNum++;
+        await this.getList()
+        this.loading = false;
+        if (this.pageList.length >= this.total) {
+          this.finished = true;
+        }
+      },
+      async onRefresh() {
+        this.pageNum=1
+        await this.getList()
+        setTimeout(() => {
+          this.$toast('刷新成功');
+          this.isLoading = false;
+        }, 1000);
       },
     }
   }
@@ -71,6 +139,7 @@
   top: 0;
   left: 0;
   background-color: #F4F5F7;
+  z-index: 100;
   .item_wrap {
     display: flex;
     align-items: center;
@@ -150,4 +219,15 @@
       }
     }
   }
+
+  .bgEmptyImg{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 90% ;
+    background-color: #F4F5F7;
+    img{
+      width: 100%;
+    }
+  }
 </style>