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

src/api/order.js

@@ -112,3 +112,43 @@ export function correctionHandle(data) {
     data
   })
 }
+
+
+// 获取报警列表
+export function getAlarmList(data) {
+  return request({
+    url: '/supplierAppV2/dispatchApp/alarm/alarmList',
+    method:'POST',
+    contentType: 'application/json',
+    data
+  })
+}
+
+// 获取报警数目
+export function getAlarmCount(data) {
+  return request({
+    url: '/supplierAppV2/dispatchApp/alarm/alarmCount',
+    method:'POST',
+    data
+  })
+}
+
+// 获取报警详情
+export function getAlarmByCode(data) {
+  return request({
+    url: '/supplierAppV2/dispatchApp/alarm/getAlarmByCode',
+    method:'POST',
+    data
+  })
+}
+
+// 处理报警
+export function dealWithAlarm(data) {
+  return request({
+    url: '/supplierAppV2/dispatchApp/alarm/handAlarm',
+    method:'POST',
+    data
+  })
+}
+
+

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

@@ -3,36 +3,32 @@
     <div class="alarm_info">
       <div class="alarm_title">
         <div class="title_left">
-          <span class="car_title">设备离线</span>
+          <span class="car_title">{{info.alarmTypeString}}</span>
-          <!--            <img class="alarm_level" src="@/assets/alarm_one.png" alt="">-->
+          <img class="alarm_level" v-if="info.level == 1" src="@/assets/alarm_one.png" alt="">
-          <!--            <img class="alarm_level" src="@/assets/alarm_two.png" alt="">-->
+          <img class="alarm_level" v-if="info.level == 2" src="@/assets/alarm_two.png" alt="">
-          <img class="alarm_level" src="@/assets/alarm_three.png" alt="">
+          <img class="alarm_level" v-if="info.level == 3" src="@/assets/alarm_three.png" alt="">
         </div>
-        <div class="status">未处理</div>
+        <div class="status">{{info.handStatusString}}</div>
       </div>
       <div class="content_list">
         <div class="alarm_content">
           <div class="label">报警时间:</div>
-          <div class="content">2025-06-18 10:00</div>
+          <div class="content">{{info.startTime}}</div>
         </div>
         <div class="alarm_content">
           <div class="label">报警详情:</div>
-          <div class="content">APP未到达C点，车斗状态识别为空车</div>
+          <div class="content">{{info.alarmRemark}}</div>
         </div>
         <div class="alarm_content">
           <div class="label">报警照片:</div>
           <div class="content">
-            <img class="photo" src="@/assets/love.jpg" alt="">
+            <img class="photo" v-if="info.url" :src="info.url" alt="">
-            <img class="photo" src="@/assets/love.jpg" alt="">
-            <img class="photo" src="@/assets/love.jpg" alt="">
-            <img class="photo" src="@/assets/love.jpg" alt="">
-            <img class="photo" src="@/assets/love.jpg" alt="">
           </div>
         </div>
         <div class="alarm_content">
           <div class="label">报警通道:</div>
           <div class="content content_flex">
-            <span>浙A7H1M2_1</span>
+            <span>{{ info.plateNumber + '_' + (info?.channel || '') }} <!--浙A7H1M2_1--></span>
             <span class="btn">查看监控</span>
           </div>
         </div>
@@ -44,31 +40,105 @@
       </div>
       <div class="car_map">
         <div class="map_title">
-          <span class="driver_name">GZ103大板 / 粤A10111</span>
+          <span class="driver_name">{{info.vehicleName}} / {{info.plateNumber}}</span>
-          <span class="driver_name">司机：杨建 <a href="tel:181027411111">181027411111</a></span>
+          <span class="driver_name">司机：{{info.onlineDriverName}} <a :href="'tel:' + info.onlinePhone">{{info.onlinePhone}}</a></span>
         </div>
         <div class="map_cover" id="container"></div>
       </div>
     </div>
-    <div class="deal_btn">处理</div>
+    <div class="deal_btn" v-if="[0, 3].includes(info.handStatus)" @click="dealWithShow = true">处理</div>
+    <van-popup v-model="dealWithShow" round position="center">
+      <div class="dialog_wrap">
+        <div class="dialog_title">报警处理</div>
+        <div>
+          <van-radio-group v-model="radio" @change="change" class="horizontal-radio-group">
+            <van-radio v-for="item in radioList" :key="item.value" :name="item.value" :disabled="item.disabled" class="item">
+              <span :style="{ color: radio === item.value ? '#393230' : 'rgba(0, 0, 0, 0.5)' }">
+                {{ item.name }}
+              </span>
+              <img
+                slot="icon"
+                class="icon"
+                slot-scope="props"
+                :src="props.checked ? activeIcon : inactiveIcon"
+              >
+            </van-radio>
+          </van-radio-group>
+          <div class="alarm_text">
+            <textarea class="alarm_textarea" id="text-input" rows="6" placeholder="处理结果：" v-model.trim="remark"></textarea>
+          </div>
+          <div class="btn_wrap">
+            <div class="btn_confirm" @click="noMultipleClicks(operatorHandle)">确认</div>
+            <div class="btn_close" @click="dealWithShow = false">关闭</div>
+          </div>
+        </div>
+      </div>
+    </van-popup>
   </div>
 </template>
 
 <script>
-  import minePosition from "@/assets/realApoint.png";
+  import {myMixins} from "@/utils/myMixins"
+  import { getAlarmByCode, dealWithAlarm } from "@/api/order"
+  import trailerPosition from "@/assets/alarm_trailer.png";
+  import repairPosition from "@/assets/alarm_repair.png";
   export default {
     name: "vehicleAlarmDetail",
+    mixins: [ myMixins ],
     data() {
       return {
+        noClick: true,
         map: null,
         lng: 121.553376,
         lat: 31.247998,
+        radio: '',
+        activeIcon: require('@/assets/alarm_check.png'),
+        inactiveIcon: require('@/assets/alarm_unCheck.png'),
+        dealWithShow: false,
+        radioList: [{ name: '开始处理', value: 3, disabled: false }, { name: '处理完成', value: 5, disabled: false }],
+        remark: '',
+        code: '',
+        info: {}
       }
     },
     mounted() {
+      this.code = this.$route.query.code;
+      this.getAlarmDetail();
       this.initMap();
     },
     methods: {
+      async operatorHandle() {
+        try {
+          await dealWithAlarm({
+            alarmId: this.info.id,
+            handleStatus: this.radio,
+            remark: this.remark
+          })
+          this.$toast('操作成功')
+        } finally {
+          this.dealWithShow = false;
+           await this.getAlarmDetail();
+        }
+      },
+      change(e) {
+        this.radio = e
+      },
+      async getAlarmDetail() {
+        let res = await getAlarmByCode({
+          code: this.code
+        });
+        if(!res.data) {
+          this.$router.push({
+            name: 'vehicleAlarmList',
+            replace: true  // 关键：替换当前路由，而不是新增历史记录
+          });
+        }
+        this.info = res?.data;
+        if(this.info.handStatus == 3) {
+          this.radioList[0].disabled = true
+        }
+
+      },
       initMap() {
         this.map = new AMap.Map('container',{
           zoom:14,//级别(缩放比例 3-20 )
@@ -80,12 +150,13 @@
         });
       },
       mapMarkers() {
+        let url = String(this.info.vehicleType) == '5' ? repairPosition : trailerPosition
         let marker = new AMap.Marker({
           position: [this.lng, this.lat],
           icon: new AMap.Icon({
-            image: minePosition, // 图片的相对路径
+            image: url, // 图片的相对路径
-            size: new AMap.Size(43, 43),  // 图标的尺寸
+            size: new AMap.Size(42, 50),  // 图标的尺寸
-            imageSize: new AMap.Size(43, 43)  // 图片的实际尺寸
+            imageSize: new AMap.Size(42, 50)  // 图片的实际尺寸
           }),
         });
         this.map.add(marker);
@@ -219,4 +290,78 @@
     background: #354D93;
     border-radius: 5px;
   }
+  .dialog_wrap {
+    width: 325px;
+    border-radius: 13px;
+    .dialog_title {
+      height: 68px;
+      line-height: 82px;
+      background: linear-gradient( 180deg, #FFE8DA 0%, rgba(255,233,233,0) 100%);
+      font-size: 18px;
+      color: #E0481E;
+      text-align: center;
+      font-weight: bold;
+    }
+    .horizontal-radio-group {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-around;
+      .icon {
+        width: 16px;
+        height: 16px;
+      }
+      .item {
+        font-size: 14px;
+        margin-bottom: 8px;
+        display: flex;
+        align-items: center;
+      }
+    }
+    .alarm_text {
+      width: 100%;
+      padding: 15px 25px;
+      box-sizing: border-box;
+      .alarm_textarea {
+        width: 100%;
+        background: #FFFBFB;
+        border-radius: 3px;
+        border: 1px solid #F97C64;
+        backdrop-filter: blur(10px);
+        padding: 10px;
+        color: #FF5D3B;
+        box-sizing: border-box;
+      }
+      .alarm_textarea::placeholder {
+        color: rgba(255, 93, 59, 0.8);
+      }
+    }
+    .btn_wrap {
+      .btn_confirm {
+        width: 173px;
+        height: 42px;
+        line-height: 42px;
+        color: #FFFFFF;
+        font-size: 15px;
+        font-weight: bold;
+        text-align: center;
+        background: #F16363;
+        border-radius: 23px;
+        margin: 0 auto;
+      }
+      .btn_close {
+        margin-top: 12px;
+        margin-bottom: 22px;
+        font-size: 14px;
+        color: rgba(44, 65, 85, 0.6);
+        text-align: center;
+      }
+    }
+  }
+  ::v-deep .van-radio__icon {
+    display: flex;
+    align-items: center;
+  }
+  ::v-deep .van-radio__label--disabled {
+    opacity: 0.5;
+  }
 </style>

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>
+    <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="i in 6" :key="i">
+          <div class="alarm_wrap" v-for="(item, index) in pageList" :key="index" @click="goDetail(item)">
             <div class="alarm_title">
               <div class="title_left">
-            <span>设备离线 {{i}}</span>
+                <span>{{item.alarmTypeString}}</span>
-<!--            <img class="alarm_level" src="@/assets/alarm_one.png" alt="">-->
+                <img class="alarm_level" v-if="item.level == 1" src="@/assets/alarm_one.png" alt="">
-<!--            <img class="alarm_level" src="@/assets/alarm_two.png" alt="">-->
+                <img class="alarm_level" v-if="item.level == 2" src="@/assets/alarm_two.png" alt="">
-            <img class="alarm_level" src="@/assets/alarm_three.png" alt="">
+                <img class="alarm_level" v-if="item.level == 3" src="@/assets/alarm_three.png" alt="">
               </div>
-          <div class="label">2025-06-18 10:00</div>
+              <div class="label">{{item.startTime}}</div>
             </div>
             <div class="alarm_content">
               <div class="label">车辆名称:</div>
-          <div class="content">GZ103大板</div>
+              <div class="content">{{item.vehicleName}}</div>
             </div>
             <div class="alarm_content">
               <div class="label">报警详情:</div>
-          <div class="content">APP未到达C点，车斗状态识别为空车</div>
+              <div class="content">{{item.alarmRemark}}</div>
             </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>