From 5c603618d3ec73c20a7cf60afdf3d62c5e44ebb5 Mon Sep 17 00:00:00 2001
From: zhoulinf <2507241354@qq.com>
Date: Wed, 16 Jul 2025 16:00:55 +0800
Subject: [PATCH] =?UTF-8?q?story#6735=20task#7361=20=E8=BD=A6=E8=BE=86?=
 =?UTF-8?q?=E6=8A=A5=E8=AD=A6=E5=88=97=E8=A1=A8=E9=9D=99=E6=80=81=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/alarm_one.png                      | Bin 0 -> 2217 bytes
 src/assets/alarm_three.png                    | Bin 0 -> 1502 bytes
 src/assets/alarm_two.png                      | Bin 0 -> 2121 bytes
 src/router/index.js                           |   8 +
 .../vehicle-alarm-list.vue                    | 153 ++++++++++++++++++
 5 files changed, 161 insertions(+)
 create mode 100644 src/assets/alarm_one.png
 create mode 100644 src/assets/alarm_three.png
 create mode 100644 src/assets/alarm_two.png
 create mode 100644 src/views/vehicle-maintenance/vehicle-alarm-list.vue

diff --git a/src/assets/alarm_one.png b/src/assets/alarm_one.png
new file mode 100644
index 0000000000000000000000000000000000000000..d21944ffd17bca9812720c0de930708f2e38dcd9
GIT binary patch
literal 2217
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

literal 0
HcmV?d00001

diff --git a/src/assets/alarm_three.png b/src/assets/alarm_three.png
new file mode 100644
index 0000000000000000000000000000000000000000..46c44ac83b3cb35faa7dfab97d1ed0d3389c8259
GIT binary patch
literal 1502
zcmV<41tI#0P)<h;3K|Lk000e1NJLTq002M$000~a1^@s6(IvT300001b5ch_0Itp)
z=>Px)m`OxIR9HvlS$k|#RT%%B+xGUoZr#>(W!+$G5ZPcTfekSP8Tg7pbZSgAF(yEw
z4uTOBd<0NPl(;|wN)%#*L=z=oVito@a3Ba96B!I~Fx}X?J~q0IzMuD+a|U}F(_5C<
zW#3=D?eDwi`+nzpol}BQa{arik~k->;y{**Kt2HdXv_qA_7b2&fcT?KAP0(99Jw;w
zesbsG$~VvOa*a>};AH@^3Fc&?=Eec+iv_sXOP)O(p-PN^+s=Ovpfb@nO>o@tSb%$s
zlE4UPsjb=rpn8HkCDr`BGao;)me8CRI5ee7*vnN$q**KB={$j0$Su_=Dfl=ipp5)k
z`_wK1vR;bjaID%m3!GdnSzU;S5p*|?(aW0oJd8z8BI0+V{p32BN>?Mz^1y$--`TVm
zK4-mT8$^h^$+g<5W)UcntbJRd=%GX46dK9ulz`S_F8~k+bqU8~+R~39S7xC5k1x>Q
zRtt04TIenJ14ITwIEX@YXsz4d*&BDl=W38_0|Bm(mf9-M-L$%?i+6+Lb&?ksVnMXm
ztsSA4mbU~sb6!O}+|PEOVmO5ka-{+Ji#`M=SAp(!sQ)^MOa*JjHh>V^IQ1H$fo{n*
z0Ps=*hPEJ?SB#Sm;S?xXTmxQ{i|(rj;d7it_N<rS?K%aY>pY4cKE#~vIP(U=x7wh}
zm;vj;?TAM_`1_~TBO*zPNhw2sA%8hcrE3uJ+0b$NO_*k{fgx`Rg1uK^tKWv{%RUE@
z@woBJMnrs_NH2H<rqWgLIU8XAZKo8UM_^Ne09D3JwwqK!eJudtpiVD_AVkn{W;0@;
zJ`^tfghfDC!*&F2HnCJOSRX{#+lgqvg{a?wo~s8X6Oj@GsEsAatJuPd+;DNX9)-K*
zD=0L%EIl|G5BK%Ma9{fxh06{=u1p_<hi<i@<MhV=hk%U2mC%_NB)qu4yAi#uM~A9E
zk;7R0G~$t4(3<8!lT|j53THM!jEC8CUimw0aE<sKXg|3gn#>Z=x?#v)23^j4^xyaa
z-Oc+Gw&4zNTq3|+Rt;Lg6BUpBG@QTh9s^ez3SnLNK8plf{d+9`socqTQJ|wd&~<(X
z0yi(Q&r_G|1+O*3d1)U!oyQY3VTk<k=mP4@QYdwK2`?V;bs^xsJOZy!n=qyPT_`j;
z@Yw2DtJ7r8M%dHFzN0(sb2UPnJr}{g7TC^h0jnJqTOo>ZwEbMo+NV?*mk5x$=xDr*
z*P~$ZE|$}xC;*}W!pRw|xAj}-EsLPgnBcs)2kBEEg)(g#oK1T`I|oe#N{qengQUzz
z2?D6Ig_WPNp@-&tJmQ7F=ORLV*ANZ%u>7aQwAZZzugk-f`J359NZTSr5nT;C#za)2
zY@`GM)L3<92}B`=h~Ew&;suc@q10QUGcSa3`V$Dan_)Y*mHCxBZzJ^Pa`xHlI0wgt
zj}rBF3@&8|ptC-&vp{7ih9-Lsv{`c@2w`v>&mzNhnHISd(3#8G`GAhaR6_l&uwSS_
zEZCD22}u*6N-swCJufD;=x`-EywCzjr#k8sZEaKr4m}(QCu1i=Tm4oTr>}&;TFEeU
zIHJGF_%t>Mxh{V?*cqf4mGogqms<hLeH)~#^{-gEdz?&#oH?&Rj0c&sboQqNWX*Vv
z_5PbJUm~M$#o*u*_O!EIm&vuT%-=LnJcTG+&HGuDNDyz*$6>kJ1iiT;=|c!Jl5p@k
z&N9boWvAgR!~*OmxhfM=7Q7AGG94FckUMV!wAuHfzx^0`|2hgG>Ss7!Ye7y~H54i%
zI(~f%u~2Wq{<Guo-Cl?!yjl`KN<u8$$J!z%*DzA(L1?tl3mKU*15v+S(kkpiB-O6O
zBzbUm;DIYK`i@C`DM|^L^w;9UNSK^|j0{hu$@bUSKY!v|t=L?RTL1t607*qoM6N<$
Ef{y{i=>Px#

literal 0
HcmV?d00001

diff --git a/src/assets/alarm_two.png b/src/assets/alarm_two.png
new file mode 100644
index 0000000000000000000000000000000000000000..7199eb8698803c887f26b246d55e95b4d5560644
GIT binary patch
literal 2121
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

literal 0
HcmV?d00001

diff --git a/src/router/index.js b/src/router/index.js
index 628ff4d8..4d59b7f3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -251,6 +251,14 @@ const routes = [
             title:'车辆维保'
         }
     },
+    {
+        path: '/vehicleAlarmList',
+        name: 'vehicleAlarmList',
+        component:()=>import('@/views/vehicle-maintenance/vehicle-alarm-list.vue'),
+        meta: {
+            title:'车辆报警'
+        }
+    },
     {
         path: '/maintenanceApplication',
         name: 'maintenanceApplication',
diff --git a/src/views/vehicle-maintenance/vehicle-alarm-list.vue b/src/views/vehicle-maintenance/vehicle-alarm-list.vue
new file mode 100644
index 00000000..77c9bba0
--- /dev/null
+++ b/src/views/vehicle-maintenance/vehicle-alarm-list.vue
@@ -0,0 +1,153 @@
+<template>
+  <div class="wrap">
+    <div class="tab_wrap">
+      <div class="item_wrap" v-for="(item, index) in tabArr" :key="index" @click="changeTab(index)">
+        <span class="alpha" :class="{'active' : activeIndex == index }"> {{ item.name }}</span>
+        <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="">
+          </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>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "vehicleAlarmList",
+    data() {
+      return {
+        tabArr: [{ name: '未处理', status: 2, num: 6 }, { name: '技术处理中', status: 2, num: 0 }, {name: '处理中', status: 2, num: 3 }],
+        activeIndex: 0,
+      }
+    },
+    methods: {
+      async changeTab(index) {
+        this.activeIndex = index
+        this.pageNum = 1
+        this.pageList = [];
+        this.total= 0
+        await this.getList()
+      },
+      getList() {
+
+      },
+    }
+  }
+</script>
+<style scoped lang="scss">
+  .wrap{
+    width: 100%;
+    height: 100%;
+    background-color: #F4F5F7 !important;
+    box-sizing: border-box;
+    overflow-y: auto;
+  }
+.tab_wrap {
+  display: flex;
+  justify-content: space-around;
+  padding-top: 15px;
+  padding-bottom: 10px;
+  position: fixed;
+  width: 100%;
+  top: 0;
+  left: 0;
+  background-color: #F4F5F7;
+  .item_wrap {
+    display: flex;
+    align-items: center;
+  }
+  .alpha {
+    color: rgba(115, 115, 115, 0.7);
+    font-size: 13px;
+    line-height: 13px;
+  }
+  .active {
+    font-size: 14px;
+    color: #3678FF;
+    position: relative;
+  }
+  .active:after {
+    content: '';
+    display: block;
+    width: 18px;
+    height: 3px;
+    background: linear-gradient( 270deg, #33A3FF 0%, #176AFE 100%);
+    border-radius: 2px;
+    position: absolute;
+    margin-top: 3px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  .numTip {
+    border-radius: 4px;
+    background: #F95B45;
+    display: inline-block;
+    padding: 2px 4px;
+    font-weight: 600;
+    font-size: 11px;
+    color: #FFFFFF;
+    margin-left: 5px;
+  }
+}
+  .content_wrap {
+    padding: 50px 12px 0;
+    .alarm_wrap {
+      margin-top: 10px;
+      background: #FFFFFF;
+      box-shadow: 0px 2px 10px 0px rgba(216,216,216,0.5);
+      border-radius: 6px;
+      padding: 13px 13px 17px 18px;
+      box-sizing: border-box;
+      .alarm_title {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .label {
+        color: rgba(0, 0, 0, 0.5);
+      }
+      .title_left {
+        display: flex;
+        align-items: center;
+        span {
+          font-size: 14px;
+          font-weight: bold;
+          color: rgba(0, 0, 0, 0.85);
+        }
+        .alarm_level {
+          width: 32px;
+          height: 14px;
+          margin-left: 7px;
+        }
+      }
+      .alarm_content {
+        display: flex;
+        margin-top: 10px;
+        .content {
+          margin-left: 10px;
+          font-size: 13px;
+          color: rgba(0, 0, 0, 0.75);
+        }
+      }
+    }
+  }
+</style>