task#7363 车辆报警详情处理页面静态页

src/router/index.js

@@ -259,6 +259,14 @@ const routes = [
             title:'车辆报警'
         }
     },
+    {
+        path: '/vehicleAlarmDetail',
+        name: 'vehicleAlarmDetail',
+        component:()=>import('@/views/vehicle-maintenance/vehicle-alarm-detail.vue'),
+        meta: {
+            title:'报警详情'
+        }
+    },
     {
         path: '/maintenanceApplication',
         name: 'maintenanceApplication',

src/utils/http.js

@@ -24,8 +24,8 @@ service.interceptors.request.use(
         config.data = qs.stringify(config.data, {arrayFormat: 'indices', allowDots: true})
       }
       config.headers['Content-Type'] = config.contentType || 'application/x-www-form-urlencoded'
-      let token = localStorage.getItem('token');
-      // let token='eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJBTkNIQU5HIiwidXNlcklkIjo0NTY3MSwibmFtZSI6IuWuieeVhSIsInVzZXJOYW1lIjoiQU5DSEFORyIsInN1cHBsaWVySWQiOjExMjgsImlzWmQiOjAsImV4cCI6MTc1MjEzNDc2M30.q1O7C8thZzEMVKYDhBQ-N_14Fh9Bqejj7j11EKLF5Aw'
+      // let token = localStorage.getItem('token');
+      let token='eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJBTkNIQU5HIiwidXNlcklkIjo0NTY3MSwibmFtZSI6IuWuieeVhSIsInVzZXJOYW1lIjoiQU5DSEFORyIsInN1cHBsaWVySWQiOjExMjgsImlzWmQiOjAsImV4cCI6MTc1NTIzOTMyNH0.Zn1NaVKRIho6ncATghr74PDoMir6xaftK9b7RHg70Z8'
       // let token='eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJTSEhQWEIiLCJ1c2VySWQiOjU0NzI2LCJuYW1lIjoiI-a1i-ivleWwj-eZveeZvSIsInVzZXJOYW1lIjoiU0hIUFhCIiwic3VwcGxpZXJJZCI6MTAwMDE2NSwiZXhwIjoxNzQ0NTEwNzkwfQ.JPk0OA7slYJN3FIi_uhW4Y0CiWRvl6R1dK8MRTbyhD8'
        if(!(reqUrl=='/supplier/supplierTraining/trainingTask' || reqUrl=='/supplier/supplierTraining/normalList' || reqUrl=='/supplier/supplierTraining/trainingList')){
          if(token) {

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

@@ -0,0 +1,222 @@
+<template>
+  <div class="wrap">
+    <div class="alarm_info">
+      <div class="alarm_title">
+        <div class="title_left">
+          <span class="car_title">设备离线</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="">
+        </div>
+        <div class="status">未处理</div>
+      </div>
+      <div class="content_list">
+        <div class="alarm_content">
+          <div class="label">报警时间:</div>
+          <div class="content">2025-06-18 10:00</div>
+        </div>
+        <div class="alarm_content">
+          <div class="label">报警详情:</div>
+          <div class="content">APP未到达C点，车斗状态识别为空车</div>
+        </div>
+        <div class="alarm_content">
+          <div class="label">报警照片:</div>
+          <div class="content">
+            <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="">
+            <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 class="btn">查看监控</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="alarm_info car_info">
+      <div class="car_title title">
+        车辆位置
+      </div>
+      <div class="car_map">
+        <div class="map_title">
+          <span class="driver_name">GZ103大板 / 粤A10111</span>
+          <span class="driver_name">司机：杨建 <a href="tel:181027411111">181027411111</a></span>
+        </div>
+        <div class="map_cover" id="container"></div>
+      </div>
+    </div>
+    <div class="deal_btn">处理</div>
+  </div>
+</template>
+
+<script>
+  import minePosition from "@/assets/realApoint.png";
+  export default {
+    name: "vehicleAlarmDetail",
+    data() {
+      return {
+        map: null,
+        lng: 121.553376,
+        lat: 31.247998,
+      }
+    },
+    mounted() {
+      this.initMap();
+    },
+    methods: {
+      initMap() {
+        this.map = new AMap.Map('container',{
+          zoom:14,//级别(缩放比例 3-20 )
+          center: [this.lng, this.lat],//中心点坐标
+          viewMode:'2D',//使用3D视图
+        })
+        this.map.on('complete', () => {
+          this.mapMarkers();
+        });
+      },
+      mapMarkers() {
+        let marker = new AMap.Marker({
+          position: [this.lng, this.lat],
+          icon: new AMap.Icon({
+            image: minePosition, // 图片的相对路径
+            size: new AMap.Size(43, 43),  // 图标的尺寸
+            imageSize: new AMap.Size(43, 43)  // 图片的实际尺寸
+          }),
+        });
+        this.map.add(marker);
+      }
+    }
+  }
+</script>
+<style scoped lang="scss">
+  .wrap {
+    width: 100%;
+    height: 100%;
+    background-color: #F4F5F7 !important;
+    box-sizing: border-box;
+    overflow-y: auto;
+    padding: 0 12px;
+    box-sizing: border-box;
+  }
+  .alarm_info {
+    padding-top: 12px;
+    padding-bottom: 16px;
+    background: #FFFFFF;
+    box-shadow: 0px 1px 4px 0px rgba(39,52,125,0.05);
+    border-radius: 6px;
+    backdrop-filter: blur(5.602678571428572px);
+    margin-top: 10px;
+    .alarm_title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid rgba(233, 233, 234, 0.6);
+      padding: 3px 20px 10px 18px;
+      .title_left {
+        display: flex;
+        align-items: center;
+        .alarm_level {
+          width: 32px;
+          height: 14px;
+          margin-left: 7px;
+        }
+      }
+      .status {
+        font-size: 11px;
+        color: #FA8D14;
+        font-weight: bold;
+      }
+    }
+    .content_list {
+      padding: 12px 18px 0px;
+    }
+    .alarm_content {
+      display: flex;
+      margin-bottom: 6px;
+      .content {
+        margin-left: 10px;
+        font-size: 12px;
+        color: rgba(0, 0, 0, 0.75);
+        flex: 1;
+        .btn {
+          /*display: inline-block;*/
+          padding: 5px 12px;
+          background: #FA8236;
+          border-radius: 3px;
+          color: #fff;
+          font-size: 12px;
+        }
+        .photo {
+          width: 75px;
+          height: 55px;
+          margin-right: 6px;
+          margin-bottom: 6px;
+        }
+      }
+    }
+  }
+
+  .label {
+    color: rgba(0, 0, 0, 0.5);
+  }
+  .content_flex {
+    display: flex;
+    justify-content: space-between;
+  }
+  .car_title {
+    font-size: 14px;
+    font-weight: bold;
+    color: rgba(0, 0, 0, 0.85);
+  }
+  .title {
+    padding-left: 18px;
+    margin-bottom: 8px;
+  }
+  .car_info {
+    padding: 12px 4px 5px 4px;
+  }
+  .car_map {
+    width: 100%;
+    /*height: 204px;*/
+    border-radius: 4px;
+    border: 1px solid #F0F0F0;
+    background-color: #F9FCFF;
+    box-sizing: border-box;
+    .map_title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10px 8px 10px 15px;
+      .driver_name {
+        font-size: 12px;
+        color: #000000;
+        a {
+          color: #377BE6;
+        }
+      }
+    }
+    .map_cover {
+      width: 100%;
+      height: 174px;
+      background-color: #fff;
+    }
+  }
+  .deal_btn {
+    width: calc(100% - 38px);
+    height: 48px;
+    text-align: center;
+    line-height: 48px;
+    position: fixed;
+    bottom: 10px;
+    left: 19px;
+    font-size: 15px;
+    color: #fff;
+    background: #354D93;
+    border-radius: 5px;
+  }
+</style>