zy_oyj/jg_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新页面，对接接口

Browse Source
This commit is contained in:
Esacpe
2026-04-23 19:58:52 +08:00
parent 76819af5ad
commit 5766bfaff5
8 changed files with 216 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/traffic.js
View File

@ -23,7 +23,7 @@ export function getTrafficEventDetail(taskId) {
return service({
url: `/traffic/eventTask/detail/${taskId}`,
// url: `/traffic/event/info/2/${taskId}`,
method: 'get'
method: 'get',
});
}

3
src/pages/login/index.vue
View File

@ -102,8 +102,7 @@ function _idCardlogin() {
isLoading.value = true;
// form.userName = userinfo.app_sfzh;
const encryptedIdCard = encryptAES(sfzh);
idCardlogin({ username: encryptedIdCard })
.then((res) => {
idCardlogin({ username: encryptedIdCard }).then((res) => {
if(res){
const token = res.accessToken;

36
src/pages/map/index.vue
View File

@ -9,20 +9,8 @@
<!-- 预警类型切换按钮 -->
<div class="type-tabs">
<button
class="type-tab"
:class="{ active: activeAlertType === 'road' }"
@click="activeAlertType = 'road'"
>
路况预警
</button>
<button
class="type-tab"
:class="{ active: activeAlertType === 'violation' }"
@click="activeAlertType = 'violation'"
>
违章预警
</button>
<button class="type-tab" :class="{ active: activeAlertType === 'road' }" @click="activeAlertType = 'road'">路况预警</button>
<button class="type-tab" :class="{ active: activeAlertType === 'violation' }" @click="activeAlertType = 'violation'" >违章预警</button>
</div>
<!-- 地图区域 -->
@ -31,12 +19,8 @@
<!-- 右下角浮动按钮 -->
<div class="float-buttons">
<div class="float-btn" @click="handleLocationClick">
<van-icon name="location" />
</div>
<div class="float-btn">
<van-icon name="layer" />
</div>
<div class="float-btn" @click="handleLocationClick"><van-icon name="location" /></div>
<div class="float-btn"><van-icon name="layer" /></div>
</div>
<!-- 标记详情卡片 -->
@ -99,7 +83,7 @@
</template>
<script setup>
import { ref, computed, onMounted, watch, nextTick } from "vue";
import { ref, onMounted, watch, nextTick } from "vue";
import { useRouter } from "vue-router";
import BottomTabs from "@/components/bottomTabs.vue";
import GdMap from "@/components/GdMap/index.vue";
@ -123,11 +107,6 @@ const alertTypeOptions = [
{ value: "emergency", label: "紧急任务" }
];
// 我的位置
const myLocation = ref({
top: "60%",
left: "40%"
});
// 标记点数据（从接口获取）
const markers = ref([]);
@ -226,11 +205,6 @@ function goBack() {
router.back();
}
// 标记点点击
function handleMarkerClick(marker) {
selectedMarker.value = marker;
}
// 定位点击
function handleLocationClick() {
console.log("定位到当前位置");

53
src/pages/newHome/index.vue
View File

@ -72,15 +72,15 @@
<div v-for="alert in alertList" :key="alert.id" class="alert-item" @click="handleAlertClick(alert)">
<!-- 类型和等级 -->
<div class="alert-header">
<span class="alert-type">{{ alert.type }}</span>
<span class="alert-priority" :class="alert.priorityColor">
{{ alert.priority }}
<span class="alert-type">{{ alert.eventType }}</span>
<span class="alert-priority" :class="getLevelClass(alert.eventLevel)">
{{ getStatusText(alert.eventLevel) }}
</span>
</div>
<!-- 违章预警显示车牌信息 -->
<div class="alert-vehicle">
<van-icon name="cart" class="vehicle-icon" />
<van-icon name="logistics" />
<span>{{ alert.plateNo }}</span>
<span class="separator">|</span>
<span>{{ alert.vehicleColor }}</span>
@ -90,14 +90,14 @@
<!-- 检测点位 -->
<div class="alert-location">
<van-icon name="location" class="info-icon" />
<van-icon name="location-o" />
<span class="label">检测点位：</span>
<span>{{ alert.siteName }}</span>
</div>
<!-- 检测时间 -->
<div class="alert-time">
<van-icon name="clock" class="info-icon" />
<van-icon name="clock-o" />
<span class="label">检测时间：</span>
<span>{{ alert.passTime }}</span>
</div>
@ -233,7 +233,7 @@ function goToReport() {
// 跳转到预警列表
function goToAlertList() {
router.push("/traffic-alerts");
router.push("/warningList");
}
// 处理卡片点击
@ -251,7 +251,7 @@ function handleAlertClick(alert) {
} else {
router.push({
path: "/violation-detail",
query: { id: alert.id, status: alert.status }
query: { id: alert.taskId, status: alert.status }
});
}
}
@ -281,6 +281,27 @@ async function fetchTaskStats() {
console.error("获取任务统计数据失败:", error);
}
}
// 等级样式
function getLevelClass(level) {
const map = {
1: "level-red",
2: "level-orange",
// 3: "level-yellow",
3: "level-blue",
};
return map[level] || "level-blue";
}
// 状态样式
function getStatusText(status) {
const map = {
1: "一级",
2: "二级",
3: "三级",
};
return map[status] || "三级";
}
</script>
<style lang="scss" scoped>
@ -571,6 +592,22 @@ async function fetchTaskStats() {
background: #fee2e2;
color: #dc2626;
}
&.level-red {
background: #ffe2e2;
color: #e8101a;
}
&.level-orange {
background: #fff3e0;
color: #ff9800;
}
&.level-yellow {
background: #fffde7;
color: #ffc107;
}
&.level-blue {
background: #e3f2fd;
color: #2196f3;
}
}
}

42
src/pages/trafficAlerts/detail.vue
View File

@ -27,10 +27,12 @@
</div>
<!-- 图片 -->
<div class="card-image" v-if="alertDetail.image">
<div class="card-image">
<van-image
:src="alertDetail.imgUrl"
:error-icon="defaultImg"
fit="cover"
lazy-load
class="alert-img"
/>
</div>
@ -55,7 +57,7 @@
<!-- 视频展示按钮 -->
<div class="video-btn-wrapper" v-if="alertDetail.videoUrls && alertDetail.videoUrls.length > 0">
<van-button block round class="video-btn" @click="openVideo(alertDetail.videoUrls[0])">
<van-button block round color="#2a7efe" class="video-btn" @click="openVideo(alertDetail.videoUrls[0])">
<van-icon name="video-o" class="video-icon" />
视频展示
</van-button>
@ -70,20 +72,25 @@
<!-- 蓝色边框卡片 -->
<div class="execution-box">
<!-- 绿色边框内层卡片 -->
<div class="info-box" v-if="taskDetail">
<div class="info-box">
<div class="info-row">
<span class="info-label">要求任务完成时间：</span>
<span class="info-value">{{ taskDetail.eventTime }}</span>
</div>
<div class="info-row">
<span class="info-text">{{ taskDetail.deptName }}</span>
<span class="info-divider" v-if="taskDetail.deptName">|</span>
<span class="info-text">联系电话：{{ taskDetail.phoneNumber }}</span>
</div>
<div class="info-row">
<span class="info-label">任务地点：</span>
<span class="info-value">{{ taskDetail.clickAddress }}</span>
</div>
<div class="info-row" v-if="taskDetail.deptName">
<span class="info-text">{{ taskDetail.deptName }}</span>
<span class="info-divider" v-if="taskDetail.phoneNumber">|</span>
<span class="info-text" v-if="taskDetail.phoneNumber">联系电话：{{ taskDetail.phoneNumber }}</span>
</div>
</div>
<!-- 任务描述 -->
<div class="task-desc" v-if="taskDetail">
<div class="task-desc">
{{ taskDetail.taskContent }}
</div>
@ -119,6 +126,7 @@
:key="index"
block
round
color="#00c84f"
class="feedback-btn success"
@click="showFeedback(index + 1)"
>
@ -128,6 +136,7 @@
v-if="allDetail.taskStatus == '1'"
block
round
color="#2a7efe"
type="primary"
class="action-btn"
@click="handleFeedback"
@ -158,7 +167,11 @@
:src="img"
fit="cover"
class="feedback-img"
/>
>
<template v-slot:error>
<van-image :src="defaultImg" fit="cover" class="feedback-img" />
</template>
</van-image>
</div>
</div>
<!-- 现场照片 -->
@ -205,6 +218,7 @@ import { ref, computed, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getTrafficEventDetail } from "@/api/traffic";
import { ImagePreview } from 'vant';
import defaultImg from "@/assets/error.png";
const router = useRouter();
const route = useRoute();
@ -289,7 +303,8 @@ const fetchDetail = async () => {
const data = res.data || res;
// 处理详情数据
alertDetail.value = data.eventDetailVO;
taskDetail.value = data.eventDetailVO.tasksVo;
taskDetail.value = data.eventDetailVO.tasksVo || {};
console.log(data,'=============00');
allDetail.value = data
// 处理打卡记录
@ -563,14 +578,14 @@ onMounted(() => {
.execution-box {
background: #eff6ff;
border: 2px solid #2563eb;
border: 1px solid #2563eb;
border-radius: 16px;
padding: 16px;
}
.info-box {
background: #f0fdf4;
border: 2px solid #16a34a;
border: 1px solid #16a34a;
border-radius: 12px;
padding: 10px;
@ -586,6 +601,7 @@ onMounted(() => {
.info-label {
color: #64748b;
letter-spacing: 2px;
}
.info-value {

2
src/pages/videoMonitor/index.vue
View File

@ -292,7 +292,7 @@ function goBack() {
// 前往地图
function goToMap() {
router.push("/map");
router.push("/videoMonitorMap");
}
// 选择监控点

312
src/pages/violationAlerts/detail.vue
View File

@ -6,164 +6,143 @@
<h1 class="nav-title">违章详情</h1>
<div class="nav-placeholder"></div>
</div>
<!-- 加载状态 -->
<van-loading v-if="loading" class="loading-state" color="#2563eb">加载中...</van-loading>
<template v-else>
<!-- 违章信息卡片 -->
<div class="detail-card">
<!-- 车牌号和状态 -->
<div class="card-header">
<div class="vehicle-info">
<van-icon name="cart" class="vehicle-icon" />
<span class="plate-number">{{ violationDetail.plateNo }}</span>
<span class="plate-color">{{ violationDetail.plateColor }}</span>
<span class="separator">|</span>
<span class="vehicle-type">{{ violationDetail.vehicleType }}</span>
</div>
<span class="status-tag" :class="getStatusClass(allDetail.taskStatus)">
{{ statusMap[allDetail.taskStatus] }}
</span>
</div>
<!-- 等级和标题 -->
<div class="title-row">
<span class="level-tag" :class="getLevelClass(violationDetail.eventLevel)">
{{ levelMap[violationDetail.eventLevel] }}
</span>
<span class="alert-title">{{ violationDetail.eventContent }}</span>
</div>
<!-- 图片 -->
<div class="card-image" v-if="violationDetail.imgUrl">
<van-image :src="violationDetail.imgUrl" fit="cover" class="alert-img" />
</div>
<!-- 检测信息 -->
<div class="card-details">
<div class="detail-item">
<van-icon name="location" class="detail-icon" />
<span class="label">检测点位：</span>
<span class="value">{{ violationDetail.siteName }}</span>
</div>
<div class="detail-item">
<van-icon name="clock" class="detail-icon" />
<span class="label">检测时间：</span>
<span class="value">{{ violationDetail.eventTime }}</span>
</div>
<!-- 违章信息卡片 -->
<div class="detail-card">
<!-- 车牌号和状态 -->
<div class="card-header">
<div class="vehicle-info">
<van-icon name="cart" class="vehicle-icon" />
<span class="plate-number">{{ violationDetail.plateNo }}</span>
<span class="plate-color">{{ violationDetail.plateColor }}</span>
<span class="separator">|</span>
<span class="vehicle-type">{{ violationDetail.vehicleType }}</span>
</div>
<span class="status-tag" :class="getStatusClass(allDetail.taskStatus)"> {{ statusMap[allDetail.taskStatus] }} </span>
</div>
<!-- 打卡情况 - 执行中和已完成状态显示 -->
<div v-if="allDetail.taskStatus == '1' || allDetail.taskStatus == '2'" class="checkin-card">
<div class="checkin-time-row">
<span class="checkin-date">{{allDetail.clickTime}}</span>
<span class="checkin-type">【定位打卡】</span>
</div>
<div class="checkin-row">
<span class="checkin-label">打卡账号：</span>
<span class="checkin-value">21515800</span>
</div>
<div class="checkin-row checkin-location">
<van-icon name="location" class="location-icon" />
<span>{{allDetail.clickAddress}}</span>
</div>
<!-- 未拦截成功标识 -->
<div v-if="violationId !== '1' && violationId !== '3' && allDetail.taskStatus === '1'" class="intercept-status">
<span v-if="violationId === '6'" class="result-btn" @click="goToResult">
处罚结果
</span>
<span v-else class="fail-tag">未拦截成功</span>
</div>
<!-- 等级和标题 -->
<div class="title-row">
<span class="level-tag" :class="getLevelClass(violationDetail.eventLevel)">
{{ levelMap[violationDetail.eventLevel] }}
</span>
<span class="alert-title">{{ violationDetail.eventContent }}</span>
</div>
<!-- 卡口预警折叠面板 -->
<van-collapse v-model="activeNames" :border="false" class="alert-collapse">
<van-collapse-item name="1" :border="false">
<template #title>
<div class="collapse-title">卡口预警</div>
</template>
<van-list
v-model:loading="alertLoading"
:finished="alertFinished"
finished-text="没有更多了"
@load="onLoadAlerts"
:immediate-check="false"
>
<div class="alert-list">
<div v-for="(item, index) in checkinAlerts" :key="item.id" class="alert-item">
<!-- 顶部序号和基本信息 -->
<div class="item-header">
<div class="item-index">{{ index + 1 }}</div>
<div class="item-info">
<div class="info-row">
<van-icon name="location-o" class="info-icon" />
<span class="label">检测点位：</span>
<span class="value">{{ item.siteName }}</span>
</div>
<div class="info-row">
<van-icon name="clock-o" class="info-icon" />
<span class="label">检测时间：</span>
<span class="value">{{ item.eventTime }}</span>
</div>
</div>
</div>
<!-- 图片 -->
<div class="card-image">
<van-image :src="violationDetail.imgUrls" fit="cover" class="alert-img" />
</div>
<!-- 抓拍图片区域 -->
<div class="capture-section">
<div class="section-title">抓拍图片：</div>
<van-image :src="item.imgUrl" fit="cover" class="capture-img" radius="12" />
</div>
<!-- 检测信息 -->
<div class="card-details">
<div class="detail-item">
<van-icon name="location" class="detail-icon" />
<span class="label">检测点位：</span>
<span class="value">{{ violationDetail.siteName }}</span>
</div>
<div class="detail-item">
<van-icon name="clock" class="detail-icon" />
<span class="label">检测时间：</span>
<span class="value">{{ violationDetail.eventTime }}</span>
</div>
</div>
</div>
<!-- 详细网格信息 -->
<div class="detail-grid">
<div class="grid-item">
<span class="label">速度：</span>
<span class="value">{{ item.speed }}</span>
<!-- 打卡情况 - 执行中和已完成状态显示 -->
<div v-if="allDetail.taskStatus == '1' || allDetail.taskStatus == '2'" class="checkin-card">
<div class="checkin-time-row">
<span class="checkin-date">{{allDetail.clickTime}}</span>
<span class="checkin-type">【定位打卡】</span>
</div>
<div class="checkin-row">
<span class="checkin-label">打卡账号：</span>
<span class="checkin-value">21515800</span>
</div>
<div class="checkin-row checkin-location">
<van-icon name="location" class="location-icon" />
<span>{{allDetail.clickAddress}}</span>
</div>
<!-- 未拦截成功标识 -->
<div v-if="violationId !== '1' && violationId !== '3' && allDetail.taskStatus === '1'" class="intercept-status">
<span v-if="violationId === '6'" class="result-btn" @click="goToResult">处罚结果</span>
<span v-else class="fail-tag">未拦截成功</span>
</div>
</div>
<!-- 卡口预警折叠面板 -->
<van-collapse v-model="activeNames" :border="false" class="alert-collapse">
<van-collapse-item name="1" :border="false">
<template #title><div class="collapse-title">卡口预警</div></template>
<van-list :finished="true" finished-text="没有更多了" >
<div class="alert-list">
<div v-for="(item, index) in checkinAlerts" :key="item.id" class="alert-item">
<!-- 顶部序号和基本信息 -->
<div class="item-header">
<div class="item-index">{{ index + 1 }}</div>
<div class="item-info">
<div class="info-row">
<van-icon name="location-o" class="info-icon" />
<span class="label">检测点位：</span>
<span class="value">{{ item.siteName }}</span>
</div>
<div class="grid-item">
<span class="label">车道号：</span>
<span class="value">{{ item.laneNo }}</span>
</div>
<div class="grid-item">
<span class="label">方向：</span>
<span class="value">{{ item.direction }}</span>
</div>
<div class="grid-item">
<van-icon name="user-o" class="grid-icon" />
<span class="label">执法人员：</span>
<span class="value">{{ item.person }}</span>
</div>
<div class="grid-item">
<span class="label">工号：</span>
<span class="value">{{ item.workNo }}</span>
<div class="info-row">
<van-icon name="clock-o" class="info-icon" />
<span class="label">检测时间：</span>
<span class="value">{{ item.passTime }}</span>
</div>
</div>
<!-- 分割线 -->
<div v-if="index < checkinAlerts.length - 1" class="item-divider"></div>
</div>
<!-- 抓拍图片区域 -->
<div class="capture-section">
<div class="section-title">抓拍图片：</div>
<van-image :src="item.imgUrl" fit="cover" class="capture-img" radius="12" />
</div>
<!-- 详细网格信息 -->
<div class="detail-grid">
<div class="grid-item">
<span class="label">速度：</span>
<span class="value">{{ item.speed }}</span>
</div>
<div class="grid-item">
<span class="label">车道号：</span>
<span class="value">{{ item.laneNo }}</span>
</div>
<div class="grid-item">
<span class="label">方向：</span>
<span class="value">{{ item.direction }}</span>
</div>
<div class="grid-item">
<van-icon name="user-o" class="grid-icon" />
<span class="label">执法人员：</span>
<span class="value">{{ item.userName }}</span>
</div>
<div class="grid-item">
<span class="label">工号：</span>
<span class="value">{{ item.workNo }}</span>
</div>
</div>
<!-- 分割线 -->
<div v-if="index < checkinAlerts.length - 1" class="item-divider"></div>
</div>
</van-list>
</van-collapse-item>
</van-collapse>
</div>
</van-list>
</van-collapse-item>
</van-collapse>
<!-- 底部按钮 - 未执行状态 -->
<div v-if="allDetail.taskStatus == '0'" class="action-bar">
<van-button block round type="primary" class="action-btn" @click="handleCheckIn">
定位打卡
</van-button>
</div>
<!-- 底部按钮 - 未执行状态 -->
<div v-if="allDetail.taskStatus == '0'" class="action-bar">
<van-button block round type="primary" class="action-btn" @click="handleCheckIn">定位打卡</van-button>
</div>
<!-- 底部按钮 - 执行中状态 -->
<div v-if="allDetail.taskStatus == '1'" class="action-bar">
<van-button block round type="primary" class="action-btn" @click="showResultDialog">
执行结果
</van-button>
</div>
</template>
<!-- 底部按钮 - 执行中状态 -->
<div v-if="allDetail.taskStatus == '1'" class="action-bar">
<van-button block round type="primary" class="action-btn" @click="showResultDialog">执行结果</van-button>
</div>
<!-- 执行结果弹框 -->
<van-popup v-model:show="showMatchDialog" round class="result-popup">
@ -188,7 +167,6 @@
import { ref, computed, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getTrafficEventDetail, interceptNotSuccess } from "@/api/traffic";
import { ImagePreview } from 'vant';
const router = useRouter();
const route = useRoute();
@ -220,50 +198,8 @@ const taskDetail = ref({})
// 卡口预警模拟数据
const checkinAlerts = ref([])
const alertLoading = ref(false)
const alertFinished = ref(false)
const alertPage = ref(1) // 分页当前页码
const activeNames = ref(['1']) // 默认展开第一个面板
// 模拟加载卡口预警数据
const onLoadAlerts = () => {
// 模拟异步请求
setTimeout(() => {
const newData = [
{
id: checkinAlerts.value.length + 1,
siteName: '解放大道循礼门路口东',
eventTime: '2026-03-27 09:15:32',
imgUrl: 'https://img0.baidu.com/it/u=2535738879,1652433069&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
speed: '65 km/h',
laneNo: '2',
direction: '由东向西',
person: '张伟',
workNo: '210001'
},
{
id: checkinAlerts.value.length + 2,
siteName: '解放大道循礼门路口东',
eventTime: '2026-03-27 09:15:35',
imgUrl: 'https://img0.baidu.com/it/u=2535738879,1652433069&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
speed: '68 km/h',
laneNo: '2',
direction: '由东向西',
person: '张伟',
workNo: '210001'
}
];
checkinAlerts.value.push(...newData);
alertLoading.value = false;
alertPage.value++;
// 模拟加载 5 页后结束
if (alertPage.value > 5) {
alertFinished.value = true;
}
}, 1000);
};
// 获取详情数据
const fetchDetail = async () => {
@ -277,6 +213,7 @@ const fetchDetail = async () => {
violationDetail.value = data.eventDetailVO;
taskDetail.value = data.eventDetailVO.tasksVo;
allDetail.value = data
checkinAlerts.value = data.interceptWarns || [];
}
} catch (error) {
console.error("获取详情失败:", error);
@ -356,7 +293,6 @@ function handlePlateMatch(matched) {
// 页面初始化
onMounted(() => {
fetchDetail();
onLoadAlerts(); // 初始化加载预警数据
});
</script>

10
src/router/index.js
View File

@ -552,6 +552,16 @@ const routes = [
name: "video-monitor",
component: () => import("../pages/videoMonitor/index.vue"),
},
{
path: "/videoMonitorMap",
name: "videoMonitorMap",
component: () => import("../pages/videoMonitorMap/index.vue"),
},
{
path: "/warningList",
name: "warningList",
component: () => import("../pages/warningList/index.vue"),
},
// 新增：Greeting message 完整转换页面
{
path: "/keyDetection",