feat: 添加实时通知

src/api/traffic-violation/traffic-act.ts

@@ -66,3 +66,18 @@ export function exportActViolation(data: ActTableQuery) {
     },
   );
 }
+
+export function updateRealtimeNotice(data: { realtimeNotice: boolean; speedLimit: number }) {
+  return http.request({
+    url: '/trafficViolation/updateRealtimeNoticeConfig',
+    method: 'post',
+    data,
+  });
+}
+
+export function getRealtimeNoticeConfig() {
+  return http.request<{ realtimeNotice: boolean; speedLimit: number | null }>({
+    url: '/trafficViolation/queryRealtimeNoticeConfig',
+    method: 'get',
+  });
+}

src/views/traffic/violation/act/Act.vue

@@ -6,7 +6,7 @@
     <main class="safety-platform-container__main">
       <div class="search-table-container">
         <header>
-          <div>
+          <div style="position: relative">
             <el-button type="primary" class="search-table-container--button" :icon="Plus" @click="handleCreateAct">
               新建记录
             </el-button>

src/views/traffic/violation/act/components/RealtimeNotice.vue

@@ -1,10 +1,80 @@
 <template>
-  <div class="realtime-notice"> </div>
+  <div class="realtime-notice">
+    <el-tooltip effect="light" content="开启后，将推送符合通知条件的违规行为至车主" placement="top">
+      <img src="@/assets/icons/help.png" alt="" />
+    </el-tooltip>
+    <span class="label">实时通知</span>
+    <el-switch v-model="switchVal" class="switch" @change="handleRealtimeNoticeChange" />
+    <span class="condition" v-if="switchVal">条件：车速≥{{ speed }}km/h</span>
+    <el-popconfirm
+      width="300"
+      hide-icon
+      placement="bottom-end"
+      title="设置通知条件"
+      @confirm="handleRealtimeNoticeChange(true)"
+    >
+      <template #reference>
+        <img style="margin: 0 10px; cursor: pointer" src="@/assets/icons/edit_2.png" alt="" />
+      </template>
+      <template #actions="{ confirm, cancel }">
+        <div class="popconfirm-container"></div>
+        <el-form label-width="50px">
+          <el-form-item label="车速">
+            <el-input v-model="speedEdit" type="number" min="0">
+              <template #suffix>km/h</template>
+            </el-input>
+          </el-form-item>
+        </el-form>
+        <el-button @click="cancel">取消</el-button>
+        <el-button type="primary" @click="confirm">确定</el-button>
+      </template>
+    </el-popconfirm>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import { onMounted, ref } from 'vue';
+
+  import { updateRealtimeNotice, getRealtimeNoticeConfig } from '@/api/traffic-violation/traffic-act';
+
+  const switchVal = ref(false);
+  const speed = ref(45);
+  const speedEdit = ref(45);
+
+  async function handleRealtimeNoticeChange(val: boolean) {
+    await updateRealtimeNotice({ realtimeNotice: val, speedLimit: speedEdit.value });
+    getRealtimeNoticeConfig().then((res) => {
+      switchVal.value = res.realtimeNotice;
+      speed.value = res.speedLimit ? res.speedLimit : 45;
+    });
+  }
+
+  onMounted(() => {
+    getRealtimeNoticeConfig().then((res) => {
+      switchVal.value = res.realtimeNotice;
+      speed.value = res.speedLimit ? res.speedLimit : 45;
+    });
+  });
+</script>
 
 <style scoped>
   .realtime-notice {
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    display: flex;
+    align-items: center;
+  }
+  .label {
+    padding: 0 10px;
+    color: rgba(0, 0, 0, 0.85);
+    font-size: 14px;
+  }
+  .condition {
+    width: 180px;
+    padding-right: 10px;
+    text-align: end;
+    color: rgba(0, 0, 0, 0.7);
+    font-size: 14px;
   }
 </style>