新增随手拍功能
This commit is contained in:
给我
@ -185,6 +185,7 @@ const onSubmit = (e) => {
|
|||||||
function _getUserInfo() {
|
function _getUserInfo() {
|
||||||
getUserOrFjInfo({}).then((res) => {
|
getUserOrFjInfo({}).then((res) => {
|
||||||
store.commit("userStatus", res);
|
store.commit("userStatus", res);
|
||||||
|
window.localStorage.setItem('userInfo', JSON.stringify(res));
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
isLoading.value = false;
|
isLoading.value = false;
|
||||||
router.replace("/Home");
|
router.replace("/Home");
|
||||||
|
|||||||
@ -4,14 +4,14 @@
|
|||||||
<div class="header-section">
|
<div class="header-section">
|
||||||
<div class="user-info">
|
<div class="user-info">
|
||||||
<div class="avatar">
|
<div class="avatar">
|
||||||
<span>{{ userNameChar }}</span>
|
<span>{{ userInfo.nickName?userInfo.nickName?.charAt(0):"" }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-content">
|
<div class="info-content">
|
||||||
<h2 class="user-name">{{ userInfo.userName || '张警官' }}</h2>
|
<h2 class="user-name">{{ userInfo.nickName || '未登录' }}</h2>
|
||||||
<p class="dept-name">{{ userInfo.deptName || '交警支队一大队' }}</p>
|
<p class="dept-name">{{ userInfo.departName || '' }}</p>
|
||||||
<div class="user-tags">
|
<div class="user-tags">
|
||||||
<span class="tag">民警</span>
|
<span class="tag">民警</span>
|
||||||
<span class="work-id">工号: JC2024001</span>
|
<span class="work-id">工号: {{ userInfo.workNo || '-' }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -108,8 +108,8 @@ const router = useRouter();
|
|||||||
// 用户信息
|
// 用户信息
|
||||||
const userInfo = ref({});
|
const userInfo = ref({});
|
||||||
const userNameChar = computed(() => {
|
const userNameChar = computed(() => {
|
||||||
const name = userInfo.value.userName || '张';
|
const name = userInfo.value?.userName;
|
||||||
return name.charAt(0);
|
return name ? name.charAt(0) : '?';
|
||||||
});
|
});
|
||||||
|
|
||||||
// 预警语音开关
|
// 预警语音开关
|
||||||
|
|||||||
@ -49,10 +49,21 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 随手拍功能区 -->
|
||||||
|
<div class="ssp-section" @click="goToReport">
|
||||||
|
<div class="ssp-icon">
|
||||||
|
<van-icon name="photograph" class="ssp-icon-inner" />
|
||||||
|
</div>
|
||||||
|
<div class="ssp-content">
|
||||||
|
<div class="ssp-title">随手拍</div>
|
||||||
|
<div class="ssp-desc">随时随地上报违规</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 最新预警列表 -->
|
<!-- 最新预警列表 -->
|
||||||
<div class="alerts-section">
|
<div class="alerts-section">
|
||||||
<div class="section-header">
|
<div class="section-header">
|
||||||
<h2 class="section-title">最新预警</h2>
|
<h2 class="section-title">拦截预警</h2>
|
||||||
<div class="section-action" @click="goToAlertList">
|
<div class="section-action" @click="goToAlertList">
|
||||||
<span>查看全部</span>
|
<span>查看全部</span>
|
||||||
<span class="arrow">></span>
|
<span class="arrow">></span>
|
||||||
@ -130,6 +141,9 @@ const userNameChar = computed(() => {
|
|||||||
return name.charAt(0);
|
return name.charAt(0);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 随手拍待处理数量
|
||||||
|
const sspPendingCount = ref(12);
|
||||||
|
|
||||||
// 当前位置
|
// 当前位置
|
||||||
const currentLocation = ref("");
|
const currentLocation = ref("");
|
||||||
|
|
||||||
@ -137,7 +151,7 @@ const currentLocation = ref("");
|
|||||||
const functionCards = [
|
const functionCards = [
|
||||||
{
|
{
|
||||||
icon: "warning",
|
icon: "warning",
|
||||||
label: "路况预警",
|
label: "路况任务",
|
||||||
subtitle: "应急处理数据信息",
|
subtitle: "应急处理数据信息",
|
||||||
count: 236,
|
count: 236,
|
||||||
countLabel: "未执行",
|
countLabel: "未执行",
|
||||||
@ -146,7 +160,7 @@ const functionCards = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "todo-list",
|
icon: "todo-list",
|
||||||
label: "违章预警",
|
label: "违规任务",
|
||||||
subtitle: "违章车辆数据信息",
|
subtitle: "违章车辆数据信息",
|
||||||
count: 128,
|
count: 128,
|
||||||
countLabel: "未执行",
|
countLabel: "未执行",
|
||||||
@ -335,6 +349,11 @@ function onLoad() {
|
|||||||
}, 500);
|
}, 500);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 跳转到随手拍上报页面
|
||||||
|
function goToReport() {
|
||||||
|
router.push("/ssp-report");
|
||||||
|
}
|
||||||
|
|
||||||
// 跳转到预警列表
|
// 跳转到预警列表
|
||||||
function goToAlertList() {
|
function goToAlertList() {
|
||||||
router.push("/traffic-alerts");
|
router.push("/traffic-alerts");
|
||||||
@ -427,6 +446,64 @@ function handleAlertClick(alert) {
|
|||||||
padding: 16px;
|
padding: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ssp-section {
|
||||||
|
margin: 12px 16px;
|
||||||
|
background: linear-gradient(135deg, #34c759, #28a745);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 16px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 14px;
|
||||||
|
box-shadow: 0 2px 12px rgba(40, 167, 69, 0.3);
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ssp-icon {
|
||||||
|
.ssp-icon-inner {
|
||||||
|
font-size: 24px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ssp-content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
|
||||||
|
.ssp-title {
|
||||||
|
color: white;
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ssp-desc {
|
||||||
|
color: rgba(255, 255, 255, 0.85);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ssp-badge {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
min-width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
padding: 0 6px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.ssp-badge-num {
|
||||||
|
color: #34c759;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.card-item {
|
.card-item {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
|
|||||||
928
src/pages/sspReport/index.vue
Normal file
928
src/pages/sspReport/index.vue
Normal file
@ -0,0 +1,928 @@
|
|||||||
|
<template>
|
||||||
|
<div class="ssp-report-page">
|
||||||
|
<!-- 顶部导航 -->
|
||||||
|
<div class="top-nav">
|
||||||
|
<div class="nav-left" @click="goBack">
|
||||||
|
<van-icon name="arrow-left" />
|
||||||
|
</div>
|
||||||
|
<div class="nav-title">随手拍</div>
|
||||||
|
<div class="nav-right" @click="handleSubmit">
|
||||||
|
提交
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 表单内容 -->
|
||||||
|
<div class="form-content">
|
||||||
|
<!-- 设备信息 -->
|
||||||
|
<div class="section-card">
|
||||||
|
<div class="section-header" @click="toggleSection('device')">
|
||||||
|
<div class="section-title-box">
|
||||||
|
<span class="section-icon">▶</span>
|
||||||
|
<span class="section-title">设备信息</span>
|
||||||
|
</div>
|
||||||
|
<van-icon :name="openSections.device ? 'arrow-up' : 'arrow-down'" />
|
||||||
|
</div>
|
||||||
|
<div class="section-body" v-show="openSections.device">
|
||||||
|
<van-cell-group :border="false">
|
||||||
|
<van-field v-model="formData.sbbh" is-link readonly name="设备编号" label="设备编号" placeholder="请选择"
|
||||||
|
@click="openPicker({ columns: deviceColumns, title: '选择设备编号', onConfirm: onDeviceConfirm })" />
|
||||||
|
<van-field v-model="formData.zfmj" is-link readonly name="执法民警" label="执法民警" placeholder="请选择"
|
||||||
|
@click="openPicker({ columns: officerColumns, title: '选择执法民警', onConfirm: onOfficerConfirm })" />
|
||||||
|
</van-cell-group>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 车辆信息 -->
|
||||||
|
<div class="section-card">
|
||||||
|
<div class="section-header" @click="toggleSection('vehicle')">
|
||||||
|
<div class="section-title-box">
|
||||||
|
<span class="section-icon">▶</span>
|
||||||
|
<span class="section-title">车辆信息</span>
|
||||||
|
</div>
|
||||||
|
<van-icon :name="openSections.vehicle ? 'arrow-up' : 'arrow-down'" />
|
||||||
|
</div>
|
||||||
|
<div class="section-body" v-show="openSections.vehicle">
|
||||||
|
<van-cell-group :border="false">
|
||||||
|
<van-field v-model="formData.clfl" is-link readonly name="车辆分类" label="车辆分类" placeholder="请选择"
|
||||||
|
@click="openPicker({ columns: clflColumns, title: '选择车辆分类', onConfirm: onClflConfirm })" />
|
||||||
|
<van-field v-model="formData.hpzl" is-link readonly name="号牌种类" label="号牌种类" placeholder="请选择"
|
||||||
|
@click="openPicker({ columns: hpzlColumns, title: '选择号牌种类', onConfirm: onHpzlConfirm })" />
|
||||||
|
<van-field v-model="formData.hppch" name="号牌牌号" label="号牌牌号" placeholder="请输入" maxlength="10" />
|
||||||
|
</van-cell-group>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 违法信息 -->
|
||||||
|
<div class="section-card">
|
||||||
|
<div class="section-header" @click="toggleSection('violation')">
|
||||||
|
<div class="section-title-box">
|
||||||
|
<span class="section-icon">▶</span>
|
||||||
|
<span class="section-title">违法信息</span>
|
||||||
|
</div>
|
||||||
|
<van-icon :name="openSections.violation ? 'arrow-up' : 'arrow-down'" />
|
||||||
|
</div>
|
||||||
|
<div class="section-body" v-show="openSections.violation">
|
||||||
|
<van-cell-group :border="false">
|
||||||
|
<van-field v-model="formData.wgxzq" is-link readonly name="非法行政区划" label="非法行政区划" placeholder="请输入非法行政区划"
|
||||||
|
@click="openPicker({ columns: xzqhColumns, title: '选择行政区划', onConfirm: onXzqhConfirm })" />
|
||||||
|
<van-field v-model="formData.wgdd" name="违法地点" label="违法地点" placeholder="请输入违法地点" />
|
||||||
|
<van-field v-model="formData.ldmkms" name="路段码公里数" label="路段码公里数" placeholder="请输入路段码公里数" />
|
||||||
|
<van-field v-model="formData.ddmcs" name="地点米数" label="地点米数" placeholder="请输入地点米数" />
|
||||||
|
<van-field v-model="formData.wfdz" name="违法地址" label="违法地址" placeholder="请输入违法地址" />
|
||||||
|
<van-field v-model="formData.wffssj" is-link readonly name="违法发生时间" label="违法发生时间" placeholder="请选择违法发生时间"
|
||||||
|
@click="showWffssjPicker = true" />
|
||||||
|
<van-field v-model="formData.wfsj" name="违法时间" label="违法时间" placeholder="HH:mm:ss" />
|
||||||
|
<van-field v-model="formData.scz" name="实测值" label="实测值" placeholder="请输入实测值" />
|
||||||
|
<van-field v-model="formData.bzz" name="标准值" label="标准值" placeholder="请输入标准值" />
|
||||||
|
<van-field v-model="formData.wffxjg" name="违法发现机关" label="违法发现机关" placeholder="请输入违法发现机关" />
|
||||||
|
</van-cell-group>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 照片信息 -->
|
||||||
|
<div class="section-card">
|
||||||
|
<div class="section-header" @click="toggleSection('photo')">
|
||||||
|
<div class="section-title-box">
|
||||||
|
<span class="section-icon">▶</span>
|
||||||
|
<span class="section-title">照片信息</span>
|
||||||
|
</div>
|
||||||
|
<van-icon :name="openSections.photo ? 'arrow-up' : 'arrow-down'" />
|
||||||
|
</div>
|
||||||
|
<div class="section-body" v-show="openSections.photo">
|
||||||
|
<!-- 照片上传卡片 -->
|
||||||
|
<div class="photo-upload-list">
|
||||||
|
<div class="photo-upload-item" v-for="(photo, index) in photoList" :key="index">
|
||||||
|
<div style="text-align: left;">照片{{ index + 1 }}</div>
|
||||||
|
<van-uploader :max-count="1" :after-read="(file) => onPhotoRead(file, index)" :preview-size="200"
|
||||||
|
:show-upload="!photo.url">
|
||||||
|
<div class="photo-upload-content" v-if="!photo.url">
|
||||||
|
<van-icon name="photograph" class="photo-icon" />
|
||||||
|
<div class="photo-text">点击拍照/上传</div>
|
||||||
|
</div>
|
||||||
|
</van-uploader>
|
||||||
|
<van-image
|
||||||
|
v-if="photo.url"
|
||||||
|
:src="photo.url"
|
||||||
|
class="photo-preview-img"
|
||||||
|
width="100"
|
||||||
|
height="100"
|
||||||
|
fit="cover"
|
||||||
|
radius="6"
|
||||||
|
preview
|
||||||
|
:preview-src-list="[photo.url]"
|
||||||
|
/>
|
||||||
|
<van-icon name="cross" class="photo-delete" v-if="photo.url" @click.stop="deletePhoto(index)" />
|
||||||
|
<van-field v-model="photo.url" label="图片链接" placeholder="请输入图片链接" class="photo-link-field" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 照片基本信息 -->
|
||||||
|
<van-cell-group :border="false">
|
||||||
|
<van-field v-model="formData.zpsl" is-link readonly name="照片数量" label="照片数量 *" placeholder="请选择照片数量"
|
||||||
|
@click="openPicker({ columns: zpslColumns, title: '选择照片数量', onConfirm: onZpslConfirm })" />
|
||||||
|
<van-field v-model="formData.tpmc" name="图片文件名" label="图片文件名" placeholder="请输入图片文件名" />
|
||||||
|
<van-field v-model="formData.tpfs" is-link readonly name="图片方式" label="图片方式" placeholder="请选择图片方式"
|
||||||
|
@click="openPicker({ columns: tpfsColumns, title: '选择图片方式', onConfirm: onTpfsConfirm })" />
|
||||||
|
<van-field v-model="formData.wfspdz" name="违法视频地址" label="违法视频地址" placeholder="请输入违法视频地址" />
|
||||||
|
</van-cell-group>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 其他信息 -->
|
||||||
|
<div class="section-card">
|
||||||
|
<div class="section-header" @click="toggleSection('other')">
|
||||||
|
<div class="section-title-box">
|
||||||
|
<span class="section-icon">▶</span>
|
||||||
|
<span class="section-title">其他信息</span>
|
||||||
|
</div>
|
||||||
|
<van-icon :name="openSections.other ? 'arrow-up' : 'arrow-down'" />
|
||||||
|
</div>
|
||||||
|
<div class="section-body" v-show="openSections.other">
|
||||||
|
<van-cell-group :border="false">
|
||||||
|
<van-field v-model="formData.qtlx" is-link readonly name="通知书号" label="通知书号" placeholder="请输入通知书号"
|
||||||
|
@click="openPicker({ columns: qtlxColumns, title: '选择通知书号', onConfirm: onQtlxConfirm })" />
|
||||||
|
<van-field v-model="formData.bz" name="通知日期" label="通知日期" placeholder="请输入通知日期" />
|
||||||
|
</van-cell-group>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 底部提交按钮 -->
|
||||||
|
<div class="bottom-action">
|
||||||
|
<van-button type="primary" block round color="#2563eb" @click="handleSubmit">
|
||||||
|
提交
|
||||||
|
</van-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 通用选择器 -->
|
||||||
|
<van-popup v-model:show="pickerState.show" position="bottom">
|
||||||
|
<van-picker :columns="pickerState.columns" :title="pickerState.title" @confirm="onPickerConfirm" @cancel="pickerState.show = false" />
|
||||||
|
</van-popup>
|
||||||
|
|
||||||
|
<!-- 违法发生时间选择器 -->
|
||||||
|
<van-popup v-model:show="showWffssjPicker" position="bottom">
|
||||||
|
<van-datetime-picker v-model="currentDate" type="datetime" title="选择违法发生时间" :min-date="minDate"
|
||||||
|
:max-date="maxDate" @confirm="onWffssjConfirm" @cancel="showWffssjPicker = false" />
|
||||||
|
</van-popup>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, onMounted } from "vue";
|
||||||
|
import { useRouter } from "vue-router";
|
||||||
|
import { showToast, showConfirmDialog } from "vant";
|
||||||
|
import { upImage } from "@/api/common";
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
// 日期选择器
|
||||||
|
const currentDate = ref(new Date());
|
||||||
|
const minDate = ref(new Date(2020, 0, 1));
|
||||||
|
const maxDate = ref(new Date(new Date().getFullYear() + 10, 11, 31));
|
||||||
|
|
||||||
|
// 表单数据
|
||||||
|
const formData = reactive({
|
||||||
|
sbbh: "",
|
||||||
|
sbbhdm: "",
|
||||||
|
zfmj: "",
|
||||||
|
zfmjdm: "",
|
||||||
|
clfl: "",
|
||||||
|
clfldm: "",
|
||||||
|
hpzl: "",
|
||||||
|
hpzldm: "",
|
||||||
|
hppch: "",
|
||||||
|
wgxzq: "",
|
||||||
|
wgdd: "",
|
||||||
|
ldmkms: "",
|
||||||
|
ddmcs: "",
|
||||||
|
wfdz: "",
|
||||||
|
wffssj: "",
|
||||||
|
wfrq: "",
|
||||||
|
wfsj: "",
|
||||||
|
wffxjg: "",
|
||||||
|
zplj1: "",
|
||||||
|
zplj2: "",
|
||||||
|
zplj3: "",
|
||||||
|
zpsl: "3",
|
||||||
|
wfspdz: "",
|
||||||
|
tpfs: "",
|
||||||
|
tpfsdm: "",
|
||||||
|
tpmc: "",
|
||||||
|
qtlx: "",
|
||||||
|
qtlxdm: "",
|
||||||
|
bz: ""
|
||||||
|
});
|
||||||
|
|
||||||
|
// 图片列表
|
||||||
|
const fileList = ref([]);
|
||||||
|
|
||||||
|
// 区域展开状态
|
||||||
|
const openSections = reactive({
|
||||||
|
device: true,
|
||||||
|
vehicle: true,
|
||||||
|
violation: true,
|
||||||
|
photo: true,
|
||||||
|
video: true,
|
||||||
|
other: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// 照片列表
|
||||||
|
const photoList = ref([
|
||||||
|
{ label: "照片1", url: "", link: "" },
|
||||||
|
{ label: "照片2", url: "", link: "" },
|
||||||
|
{ label: "照片3", url: "", link: "" }
|
||||||
|
]);
|
||||||
|
const currentUploadIndex = ref(0);
|
||||||
|
const fileInputs = ref(null);
|
||||||
|
|
||||||
|
// 照片数量选择器选项
|
||||||
|
const zpslColumns = [
|
||||||
|
{ text: "1", value: "1" },
|
||||||
|
{ text: "2", value: "2" },
|
||||||
|
{ text: "3", value: "3" },
|
||||||
|
{ text: "4", value: "4" },
|
||||||
|
{ text: "5", value: "5" }
|
||||||
|
];
|
||||||
|
|
||||||
|
// 图片方式选择器选项
|
||||||
|
const tpfsColumns = [
|
||||||
|
{ text: "手机拍摄", value: "01" },
|
||||||
|
{ text: "相机拍摄", value: "02" },
|
||||||
|
{ text: "监控截图", value: "03" },
|
||||||
|
{ text: "行车记录仪", value: "04" }
|
||||||
|
];
|
||||||
|
|
||||||
|
// 选择器显示状态（通用）
|
||||||
|
const pickerState = reactive({
|
||||||
|
show: false,
|
||||||
|
columns: [],
|
||||||
|
onConfirm: null,
|
||||||
|
title: ""
|
||||||
|
});
|
||||||
|
|
||||||
|
function openPicker({ columns, onConfirm, title }) {
|
||||||
|
pickerState.columns = columns;
|
||||||
|
pickerState.title = title;
|
||||||
|
pickerState.onConfirm = onConfirm;
|
||||||
|
pickerState.show = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onPickerConfirm({ selectedOptions }) {
|
||||||
|
if (pickerState.onConfirm) {
|
||||||
|
pickerState.onConfirm(selectedOptions);
|
||||||
|
}
|
||||||
|
pickerState.show = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 选择器显示状态
|
||||||
|
const showWffssjPicker = ref(false);
|
||||||
|
|
||||||
|
// 选择器列数据（模拟数据）
|
||||||
|
const deviceColumns = [
|
||||||
|
{ text: "设备001", value: "001" },
|
||||||
|
{ text: "设备002", value: "002" },
|
||||||
|
{ text: "设备003", value: "003" }
|
||||||
|
];
|
||||||
|
|
||||||
|
const officerColumns = [
|
||||||
|
{ text: "张三", value: "001" },
|
||||||
|
{ text: "李四", value: "002" },
|
||||||
|
{ text: "王五", value: "003" }
|
||||||
|
];
|
||||||
|
|
||||||
|
const clflColumns = [
|
||||||
|
{ text: "小型汽车", value: "01" },
|
||||||
|
{ text: "大型汽车", value: "02" },
|
||||||
|
{ text: "摩托车", value: "03" },
|
||||||
|
{ text: "电动车", value: "04" }
|
||||||
|
];
|
||||||
|
|
||||||
|
const hpzlColumns = [
|
||||||
|
{ text: "蓝色", value: "01" },
|
||||||
|
{ text: "黄色", value: "02" },
|
||||||
|
{ text: "绿色", value: "03" },
|
||||||
|
{ text: "白色", value: "04" },
|
||||||
|
{ text: "黑色", value: "05" }
|
||||||
|
];
|
||||||
|
|
||||||
|
const qtlxColumns = [
|
||||||
|
{ text: "闯红灯", value: "01" },
|
||||||
|
{ text: "逆行", value: "02" },
|
||||||
|
{ text: "超速", value: "03" },
|
||||||
|
{ text: "违规停车", value: "04" },
|
||||||
|
{ text: "违规变道", value: "05" },
|
||||||
|
{ text: "其他", value: "99" }
|
||||||
|
];
|
||||||
|
|
||||||
|
// 行政区划列数据
|
||||||
|
const xzqhColumns = [
|
||||||
|
{ text: "北京市", value: "110000" },
|
||||||
|
{ text: "天津市", value: "120000" },
|
||||||
|
{ text: "河北省", value: "130000" },
|
||||||
|
{ text: "山西省", value: "140000" },
|
||||||
|
{ text: "内蒙古", value: "150000" },
|
||||||
|
{ text: "辽宁省", value: "210000" },
|
||||||
|
{ text: "吉林省", value: "220000" },
|
||||||
|
{ text: "黑龙江省", value: "230000" },
|
||||||
|
{ text: "上海市", value: "310000" },
|
||||||
|
{ text: "江苏省", value: "320000" },
|
||||||
|
{ text: "浙江省", value: "330000" },
|
||||||
|
{ text: "安徽省", value: "340000" },
|
||||||
|
{ text: "福建省", value: "350000" },
|
||||||
|
{ text: "江西省", value: "360000" },
|
||||||
|
{ text: "山东省", value: "370000" },
|
||||||
|
{ text: "河南省", value: "410000" },
|
||||||
|
{ text: "湖北省", value: "420000" },
|
||||||
|
{ text: "湖南省", value: "430000" },
|
||||||
|
{ text: "广东省", value: "440000" },
|
||||||
|
{ text: "广西", value: "450000" },
|
||||||
|
{ text: "海南省", value: "460000" },
|
||||||
|
{ text: "重庆市", value: "500000" },
|
||||||
|
{ text: "四川省", value: "510000" },
|
||||||
|
{ text: "贵州省", value: "520000" },
|
||||||
|
{ text: "云南省", value: "530000" },
|
||||||
|
{ text: "西藏", value: "540000" },
|
||||||
|
{ text: "陕西省", value: "610000" },
|
||||||
|
{ text: "甘肃省", value: "620000" },
|
||||||
|
{ text: "青海省", value: "630000" },
|
||||||
|
{ text: "宁夏", value: "640000" },
|
||||||
|
{ text: "新疆", value: "650000" },
|
||||||
|
{ text: "台湾省", value: "710000" },
|
||||||
|
{ text: "香港", value: "810000" },
|
||||||
|
{ text: "澳门", value: "820000" }
|
||||||
|
];
|
||||||
|
|
||||||
|
// 切换区域展开状态
|
||||||
|
function toggleSection(key) {
|
||||||
|
openSections[key] = !openSections[key];
|
||||||
|
}
|
||||||
|
|
||||||
|
// 选择器确认事件
|
||||||
|
function onDeviceConfirm({ selectedOptions }) {
|
||||||
|
formData.sbbh = selectedOptions[0].text;
|
||||||
|
formData.sbbhdm = selectedOptions[0].value;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onOfficerConfirm({ selectedOptions }) {
|
||||||
|
formData.zfmj = selectedOptions[0].text;
|
||||||
|
formData.zfmjdm = selectedOptions[0].value;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onClflConfirm({ selectedOptions }) {
|
||||||
|
formData.clfl = selectedOptions[0].text;
|
||||||
|
formData.clfldm = selectedOptions[0].value;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onHpzlConfirm({ selectedOptions }) {
|
||||||
|
formData.hpzl = selectedOptions[0].text;
|
||||||
|
formData.hpzldm = selectedOptions[0].value;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onQtlxConfirm({ selectedOptions }) {
|
||||||
|
formData.qtlx = selectedOptions[0].text;
|
||||||
|
formData.qtlxdm = selectedOptions[0].value;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onXzqhConfirm({ selectedOptions }) {
|
||||||
|
formData.wgxzq = selectedOptions[0].text;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onZpslConfirm({ selectedOptions }) {
|
||||||
|
formData.zpsl = selectedOptions[0].value;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onTpfsConfirm({ selectedOptions }) {
|
||||||
|
formData.tpfs = selectedOptions[0].text;
|
||||||
|
formData.tpfsdm = selectedOptions[0].value;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onWffssjConfirm(value) {
|
||||||
|
// 格式化日期时间
|
||||||
|
const date = new Date(value);
|
||||||
|
const year = date.getFullYear();
|
||||||
|
const month = String(date.getMonth() + 1).padStart(2, "0");
|
||||||
|
const day = String(date.getDate()).padStart(2, "0");
|
||||||
|
const hours = String(date.getHours()).padStart(2, "0");
|
||||||
|
const minutes = String(date.getMinutes()).padStart(2, "0");
|
||||||
|
const seconds = String(date.getSeconds()).padStart(2, "0");
|
||||||
|
|
||||||
|
const dateTimeStr = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||||
|
formData.wffssj = dateTimeStr;
|
||||||
|
formData.wfrq = `${year}-${month}-${day}`;
|
||||||
|
formData.wfsj = `${hours}:${minutes}:${seconds}`;
|
||||||
|
showWffssjPicker.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 触发上传
|
||||||
|
function triggerUpload(index) {
|
||||||
|
currentUploadIndex.value = index;
|
||||||
|
fileInputs.value.click();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 文件选择处理
|
||||||
|
function onFileChange(event) {
|
||||||
|
const file = event.target.files[0];
|
||||||
|
if (file) {
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onload = (e) => {
|
||||||
|
photoList.value[currentUploadIndex.value].url = e.target.result;
|
||||||
|
// 更新照片数量
|
||||||
|
const uploadedCount = photoList.value.filter(p => p.url).length;
|
||||||
|
formData.zpsl = uploadedCount.toString();
|
||||||
|
};
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
}
|
||||||
|
// 清空input值，允许重复选择同一张图片
|
||||||
|
event.target.value = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除照片
|
||||||
|
function deletePhoto(index) {
|
||||||
|
photoList.value[index].url = "";
|
||||||
|
const uploadedCount = photoList.value.filter(p => p.url).length;
|
||||||
|
formData.zpsl = uploadedCount.toString();
|
||||||
|
}
|
||||||
|
|
||||||
|
// vant upload上传后处理
|
||||||
|
function onPhotoRead(file, index) {
|
||||||
|
photoList.value[index].url = file.content;
|
||||||
|
const uploadedCount = photoList.value.filter(p => p.url).length;
|
||||||
|
formData.zpsl = uploadedCount.toString();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 图片上传后处理
|
||||||
|
function afterRead(file) {
|
||||||
|
// 如果是多个文件，遍历处理
|
||||||
|
if (Array.isArray(file)) {
|
||||||
|
file.forEach(item => {
|
||||||
|
uploadImage(item);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
uploadImage(file);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function uploadImage(file) {
|
||||||
|
// 模拟上传，实际项目中调用接口
|
||||||
|
file.status = "uploading";
|
||||||
|
file.message = "上传中...";
|
||||||
|
|
||||||
|
// 模拟上传成功
|
||||||
|
setTimeout(() => {
|
||||||
|
file.status = "success";
|
||||||
|
file.message = "";
|
||||||
|
showToast("图片上传成功");
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除图片前处理
|
||||||
|
function beforeDelete(file, item) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 返回上一页
|
||||||
|
function goBack() {
|
||||||
|
router.back();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 提交表单
|
||||||
|
function handleSubmit() {
|
||||||
|
// 表单验证
|
||||||
|
if (!formData.sbbh) {
|
||||||
|
showToast("请选择设备编号");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!formData.zfmj) {
|
||||||
|
showToast("请选择执法民警");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!formData.wgdd) {
|
||||||
|
showToast("请输入违法地点");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!formData.zpsl) {
|
||||||
|
showToast("请选择照片数量");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
showConfirmDialog({
|
||||||
|
title: "提示",
|
||||||
|
message: "确认提交随手拍信息？"
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
// 提交数据
|
||||||
|
const submitData = {
|
||||||
|
...formData,
|
||||||
|
photos: photoList.value.filter(p => p.url).map(p => p.url)
|
||||||
|
};
|
||||||
|
console.log("提交数据:", submitData);
|
||||||
|
showToast("提交成功");
|
||||||
|
router.back();
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
// 取消操作
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// 获取用户信息
|
||||||
|
const userInfo = JSON.parse(localStorage.getItem("userInfo") || "{}");
|
||||||
|
if (userInfo.userName) {
|
||||||
|
formData.zfmj = userInfo.userName;
|
||||||
|
formData.zfmjdm = userInfo.userId;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.ssp-report-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: #f5f5f5;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-nav {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 44px;
|
||||||
|
background: #2563eb;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 16px;
|
||||||
|
z-index: 100;
|
||||||
|
|
||||||
|
.nav-left {
|
||||||
|
color: white;
|
||||||
|
font-size: 18px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-title {
|
||||||
|
color: white;
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-right {
|
||||||
|
color: white;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-content {
|
||||||
|
padding-top: 44px;
|
||||||
|
padding: 44px 12px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-card {
|
||||||
|
background: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 12px 16px;
|
||||||
|
background: white;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
|
||||||
|
.section-title-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
|
||||||
|
.section-icon {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #2563eb;
|
||||||
|
transition: transform 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-body {
|
||||||
|
padding: 4px 0;
|
||||||
|
|
||||||
|
:deep(.van-cell-group) {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.van-cell) {
|
||||||
|
padding: 12px 16px;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
left: 16px;
|
||||||
|
right: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.van-field__label) {
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
width: 130px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.van-field__control) {
|
||||||
|
color: #333;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.van-field__body) {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-upload {
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
:deep(.van-uploader) {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.van-uploader__wrapper) {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.van-uploader__preview) {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.van-uploader__preview-image) {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.van-uploader__preview-delete) {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
background: rgba(0, 0, 0, 0.6);
|
||||||
|
border-radius: 50%;
|
||||||
|
top: -6px;
|
||||||
|
right: -6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-btn {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
background: #f5f5f5;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px dashed #dcdee0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 4px;
|
||||||
|
color: #969799;
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-upload-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-upload-item {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 12px;
|
||||||
|
background: #f9fafb;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
|
||||||
|
:deep(.van-uploader) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.van-uploader__wrapper) {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.van-uploader__preview) {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.van-uploader__preview-image) {
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 3/1;
|
||||||
|
border-radius: 6px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.van-uploader__preview-delete) {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
background: rgba(0, 0, 0, 0.6);
|
||||||
|
border-radius: 50%;
|
||||||
|
top: -6px;
|
||||||
|
right: -6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.van-uploader__upload) {
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 3/1;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px dashed #d1d5db;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.van-uploader__upload-icon) {
|
||||||
|
font-size: 28px;
|
||||||
|
color: #9ca3af;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.van-uploader__upload-text) {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #6b7280;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-upload-content {
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 3/1;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px dashed #d1d5db;
|
||||||
|
border-radius: 6px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 6px;
|
||||||
|
|
||||||
|
.photo-icon {
|
||||||
|
font-size: 32px;
|
||||||
|
color: #9ca3af;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-text {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #6b7280;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-preview-img {
|
||||||
|
width: 100px;
|
||||||
|
border-radius: 6px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-delete {
|
||||||
|
position: absolute;
|
||||||
|
top: 8px;
|
||||||
|
right: 8px;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background: rgba(0, 0, 0, 0.6);
|
||||||
|
border-radius: 50%;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-label {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #374151;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-link-field {
|
||||||
|
width: 100%;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 6px;
|
||||||
|
margin-top: 4px;
|
||||||
|
|
||||||
|
:deep(.van-field__label) {
|
||||||
|
width: 70px;
|
||||||
|
color: #6b7280;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.van-field__control) {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-address-input {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
margin: 16px;
|
||||||
|
padding: 12px;
|
||||||
|
background: #f5f5f5;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background: #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-icon {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-text {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-placeholder {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-address-dialog {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-item {
|
||||||
|
position: relative;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.photo-preview {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-placeholder {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: #f5f5f5;
|
||||||
|
border: 1px dashed #dcdee0;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 4px;
|
||||||
|
color: #969799;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-delete {
|
||||||
|
position: absolute;
|
||||||
|
top: 4px;
|
||||||
|
right: 4px;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: white;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-action {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: 12px 16px;
|
||||||
|
background: white;
|
||||||
|
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
|
:deep(.van-button) {
|
||||||
|
height: 44px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -588,6 +588,11 @@ const routes = [
|
|||||||
name: "dataReport",
|
name: "dataReport",
|
||||||
component: () => import("../pages/dataReport/index.vue"),
|
component: () => import("../pages/dataReport/index.vue"),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/ssp-report",
|
||||||
|
name: "ssp-report",
|
||||||
|
component: () => import("../pages/sspReport/index.vue"),
|
||||||
|
},
|
||||||
];
|
];
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
history: createWebHashHistory(),
|
history: createWebHashHistory(),
|
||||||
|
|||||||
Reference in New Issue
Block a user