提交
This commit is contained in:
给我
289
src/pages/spsHome/components/checkCar.vue
Normal file
289
src/pages/spsHome/components/checkCar.vue
Normal file
@ -0,0 +1,289 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<!-- 盘车 -->
|
||||
<van-popup v-model:show="peopleCarShow" round :style="{ width: '90%' }" close-icon="close" :overlay="true"
|
||||
@close="handleClose">
|
||||
<div class="checkPeoplePopup">
|
||||
<div class="select-box">
|
||||
<div class="item-boxs" v-for="(item, index) in checkCList" :key="index" @click="getCItem(item, index)">
|
||||
<span :class="cCheckFlag === item.value ? 'checkText' : ''">{{ item.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-boxs">
|
||||
<div v-if="cCheckFlag === 'plateNum'">
|
||||
<div class="plateNum">
|
||||
<van-field v-model="from.value" readonly is-link placeholder="请选择车辆类型"
|
||||
@click="isShowCommonPicker = true;">
|
||||
</van-field>
|
||||
<van-icon @click="ocrSb" style="padding: 0 12px" name="photograph" color="#969799" />
|
||||
</div>
|
||||
<div class="input-number flex">
|
||||
<div class="p_div" v-for="(item, index) in cpList.licensePlateNumber" :key="index"
|
||||
:class="{ current: cpList.currentValIndex === index }" @click="showKeyboardFn(index)">
|
||||
{{ item }}
|
||||
</div>
|
||||
<div class="add-number" v-if="from.hplx == '02'"
|
||||
@click="cpList.licensePlateNumber.push(''), from.hplx = '52'">
|
||||
<van-icon name="plus" color="rgb(34,146,254)" />
|
||||
<span style="font-size: 12px">新能源</span>
|
||||
</div>
|
||||
|
||||
<div class="add-number" v-if="from.hplx == '52'"
|
||||
@click="cpList.licensePlateNumber.pop(0), from.hplx = '02'">
|
||||
<van-icon name="plus" color="rgb(34,146,254)" />
|
||||
<span style="font-size: 12px">汽车</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<van-field v-model="from.value" placeholder="请输入车辆识别码" v-if="cCheckFlag === 'plateCode'"
|
||||
:rules="[{ required: true, message: '请输入车辆识别码' }]" right-icon="photograph">
|
||||
</van-field>
|
||||
<svg-icon icon="chuzu" />
|
||||
</div>
|
||||
<div class="footBtn">
|
||||
<van-button native-type="submit" @click="checkC('sd')" type="primary" round block>查询</van-button>
|
||||
<div class="toolsTip">请根据工作需求使用功能，您的每次查询将记录日志！</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
<van-popup v-model:show="isShowCommonPicker" round position="bottom">
|
||||
<van-picker :columns="D_BZ_HPZL" @cancel="isShowCommonPicker = false" @confirm="onConfirm" />
|
||||
</van-popup>
|
||||
<!-- 车牌键盘 -->
|
||||
<VehicleKeyboard ref="vehicleKeyboards" @setValue="setValue" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Toast } from "vant";
|
||||
import VehicleKeyboard from "../../../components/VehicleKeyboard.vue";
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
watch,
|
||||
defineProps,
|
||||
defineEmits,
|
||||
defineExpose,
|
||||
toRefs,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
} from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { getDictList, setDict } from "../../../utils/dict";
|
||||
const { D_BZ_HPZL } = getDictList("D_BZ_HPZL");
|
||||
const router = useRouter();
|
||||
const peopleCarShow = ref(false);
|
||||
const props = defineProps({
|
||||
zlId: String,
|
||||
});
|
||||
const baseInfo = ref({
|
||||
baseImage: '',//回显图片
|
||||
})
|
||||
function handleOpen() {
|
||||
peopleCarShow.value = true;
|
||||
window.addEventListener("message", receivePost);
|
||||
}
|
||||
function handleClose() {
|
||||
peopleCarShow.value = false;
|
||||
window.removeEventListener("message", receivePost);
|
||||
}
|
||||
defineExpose({
|
||||
handleOpen,
|
||||
});
|
||||
const from = reactive({
|
||||
value: "小型汽车号牌",
|
||||
hplx: "02",
|
||||
pcsrlx: "2",
|
||||
});
|
||||
const vehicleKeyboards = ref();
|
||||
const cpList = reactive({
|
||||
licensePlateNumber: ["", "", "", "", "", "", ""],
|
||||
currentValIndex: 0,
|
||||
});
|
||||
function showKeyboardFn(index) {
|
||||
cpList.currentValIndex = index;
|
||||
const showProvince = index === 0;
|
||||
const showNumber = index > 1;
|
||||
if (index === cpList.licensePlateNumber.length) {
|
||||
vehicleKeyboards.value.changeDialogShow(false, showProvince, showNumber);
|
||||
} else {
|
||||
vehicleKeyboards.value.changeDialogShow(true, showProvince, showNumber);
|
||||
}
|
||||
}
|
||||
function setValue(val) {
|
||||
if (val === "delete") {
|
||||
if (cpList.currentValIndex > 2) {
|
||||
cpList.licensePlateNumber[cpList.currentValIndex] = "";
|
||||
cpList.currentValIndex--;
|
||||
} else {
|
||||
cpList.licensePlateNumber[cpList.currentValIndex] = "";
|
||||
}
|
||||
} else {
|
||||
cpList.licensePlateNumber[cpList.currentValIndex] = val;
|
||||
cpList.currentValIndex += 1;
|
||||
showKeyboardFn(cpList.currentValIndex);
|
||||
}
|
||||
}
|
||||
function ocrSb() {
|
||||
try {
|
||||
bridge.pZ("pzsbcphm");
|
||||
} catch (error) {
|
||||
window.setcphm("川RRF435");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//接收postMessage消息
|
||||
function receivePost(mes) {
|
||||
var str = "";
|
||||
try {
|
||||
str = mes.data.type;
|
||||
} catch (error) { }
|
||||
switch (str) {
|
||||
case 'PHOTO':
|
||||
let str = mes.data.data;
|
||||
baseInfo.value.baseImage = str;
|
||||
break;
|
||||
case "cphm":
|
||||
try {
|
||||
getCphm(mes.data.data);
|
||||
} catch (error) { }
|
||||
break;
|
||||
case "color":
|
||||
try {
|
||||
console.log(mes.data);
|
||||
getColor(mes.data.data);
|
||||
} catch (error) { }
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
//通过ocr获取车牌
|
||||
function getCphm(data) {
|
||||
var cparr = ["", "", "", "", "", "", ""];
|
||||
try {
|
||||
if (data && data.length > 6) {
|
||||
cparr = data.split("");
|
||||
} else {
|
||||
Toast.fail("OCR识别失败");
|
||||
}
|
||||
} catch (error) { }
|
||||
cpList.licensePlateNumber = cparr;
|
||||
}
|
||||
|
||||
//ocr获取车牌颜色
|
||||
function getColor(val) {
|
||||
D_BZ_HPZL.value.forEach(item => {
|
||||
if (item.dm == val) {
|
||||
from.hplx = item.dm;
|
||||
from.value = item.zdmc
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 盘车
|
||||
function checkC(val) {
|
||||
let hphm = cpList.licensePlateNumber.join("");
|
||||
let hplx = from.hplx;
|
||||
let pcsrlx = val ? '2' : '7' //有参数是手动盘查，没有是ocr识别
|
||||
peopleCarShow.value = false
|
||||
router.push({
|
||||
path: "/canVehicle",
|
||||
query: { hphm: hphm, hplx: hplx, pcsrlx: pcsrlx, zlId: props.zlId, }
|
||||
});
|
||||
}
|
||||
function onConfirm(val) {
|
||||
isShowCommonPicker.value = false;
|
||||
from.value = val.text;
|
||||
from.hplx = val.value;
|
||||
}
|
||||
const checkCList = [
|
||||
{ label: "车牌", value: "plateNum" },
|
||||
{ label: "车辆识别码", value: "plateCode" },
|
||||
];
|
||||
const cCheckFlag = ref("plateNum");
|
||||
function getCItem(item, index) {
|
||||
cCheckFlag.value = item.value;
|
||||
console.log(D_BZ_HPZL.value);
|
||||
}
|
||||
// 弹出层数据
|
||||
const columns = ref(["测试1", "测试2", "测试3"]);
|
||||
const isShowCommonPicker = ref(false);
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.input-number {
|
||||
height: 7vh;
|
||||
// line-height: 6vh;
|
||||
overflow: hidden;
|
||||
margin: 10px 5vw 0;
|
||||
text-align: center;
|
||||
|
||||
// border-radius: 5px;
|
||||
// border: 1px rgb(81, 81, 81) solid;
|
||||
.p_div {
|
||||
background-color: #f5f5f5;
|
||||
height: 7vh;
|
||||
line-height: 7vh;
|
||||
width: 12%;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-left: 1px #e5e5e5 solid;
|
||||
border-top: 1px #e5e5e5 solid;
|
||||
border-bottom: 1px #e5e5e5 solid;
|
||||
background: #f5f5f5;
|
||||
// border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.p_div:nth-child(8) {
|
||||
border: 1px #e5e5e5 solid;
|
||||
}
|
||||
|
||||
.add-number {
|
||||
width: 52px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #1143ca;
|
||||
border: 1px solid #1143ca;
|
||||
}
|
||||
|
||||
.p_div.current {
|
||||
border: 1px solid #66aef6;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.plateNum {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
margin: 0 5vw;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.plateNum .van-cell {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.footBtn {
|
||||
margin: 10px 5vw;
|
||||
|
||||
.toolsTip {
|
||||
color: red;
|
||||
font-size: 12px;
|
||||
// transform: scale(.9);
|
||||
margin: 1vw 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
298
src/pages/spsHome/components/checkCarNew.vue
Normal file
298
src/pages/spsHome/components/checkCarNew.vue
Normal file
@ -0,0 +1,298 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<!-- 盘车 -->
|
||||
<!-- <van-popup v-model:show="peopleCarShow" round :style="{ width: '90%' }" close-icon="close" :overlay="true"
|
||||
@close="handleClose"> -->
|
||||
<div class="checkPeoplePopup">
|
||||
<!-- <div class="select-box">
|
||||
<div class="item-boxs" v-for="(item, index) in checkCList" :key="index" @click="getCItem(item, index)">
|
||||
<span :class="cCheckFlag === item.value ? 'checkText' : ''">{{ item.label }}</span>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="content-boxs">
|
||||
<div v-if="cCheckFlag === 'plateNum'">
|
||||
<div class="plateNum">
|
||||
<van-field v-model="from.value" readonly is-link placeholder="请选择车辆类型"
|
||||
@click="isShowCommonPicker = true;">
|
||||
</van-field>
|
||||
<van-icon @click="ocrSb" style="padding: 0 12px" name="photograph" color="#969799" />
|
||||
</div>
|
||||
<div class="input-number flex">
|
||||
<div class="p_div" v-for="(item, index) in cpList.licensePlateNumber" :key="index"
|
||||
:class="{ current: cpList.currentValIndex === index }" @click="showKeyboardFn(index)">
|
||||
{{ item }}
|
||||
</div>
|
||||
<div class="add-number" v-if="from.hplx == '02'"
|
||||
@click="cpList.licensePlateNumber.push(''), from.hplx = '52'">
|
||||
<van-icon name="plus" color="rgb(34,146,254)" />
|
||||
<span style="font-size: 12px">新能源</span>
|
||||
</div>
|
||||
|
||||
<div class="add-number" v-if="from.hplx == '52'"
|
||||
@click="cpList.licensePlateNumber.pop(0), from.hplx = '02'">
|
||||
<van-icon name="plus" color="rgb(34,146,254)" />
|
||||
<span style="font-size: 12px">汽车</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<van-field v-model="from.value" placeholder="请输入车辆识别码" v-if="cCheckFlag === 'plateCode'"
|
||||
:rules="[{ required: true, message: '请输入车辆识别码' }]" right-icon="photograph">
|
||||
</van-field>
|
||||
<svg-icon icon="chuzu" />
|
||||
</div>
|
||||
<div class="footBtn">
|
||||
<van-button native-type="submit" @click="checkC('sd')" type="primary" round block>查询</van-button>
|
||||
<div class="toolsTip">请根据工作需求使用功能，您的每次查询将记录日志！</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </van-popup> -->
|
||||
<van-popup v-model:show="isShowCommonPicker" round position="bottom">
|
||||
<van-picker :columns="D_BZ_HPZL" @cancel="isShowCommonPicker = false" @confirm="onConfirm" />
|
||||
</van-popup>
|
||||
<!-- 车牌键盘 -->
|
||||
<VehicleKeyboard ref="vehicleKeyboards" @setValue="setValue" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Toast } from "vant";
|
||||
import VehicleKeyboard from "../../../components/VehicleKeyboard.vue";
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
watch,
|
||||
defineProps,
|
||||
defineEmits,
|
||||
defineExpose,
|
||||
toRefs,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
} from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { getDictList, setDict } from "../../../utils/dict";
|
||||
import emitter from "@/utils/eventBus";
|
||||
const { D_BZ_HPZL } = getDictList("D_BZ_HPZL");
|
||||
const router = useRouter();
|
||||
const peopleCarShow = ref(false);
|
||||
const props = defineProps({
|
||||
zlId: String,
|
||||
});
|
||||
const baseInfo = ref({
|
||||
baseImage: '',//回显图片
|
||||
})
|
||||
function handleOpen() {
|
||||
peopleCarShow.value = true;
|
||||
window.addEventListener("message", receivePost);
|
||||
}
|
||||
function handleClose() {
|
||||
peopleCarShow.value = false;
|
||||
window.removeEventListener("message", receivePost);
|
||||
}
|
||||
onMounted(()=>{
|
||||
emitter.on('closeCarJp',(res)=>{
|
||||
console.log(res,'res');
|
||||
vehicleKeyboards.value.changeDialogShow(false, 0, 0);
|
||||
})
|
||||
})
|
||||
defineExpose({
|
||||
handleOpen,
|
||||
});
|
||||
const from = reactive({
|
||||
value: "小型汽车号牌",
|
||||
hplx: "02",
|
||||
pcsrlx: "2",
|
||||
});
|
||||
const vehicleKeyboards = ref();
|
||||
const cpList = reactive({
|
||||
licensePlateNumber: ["", "", "", "", "", "", ""],
|
||||
currentValIndex: 0,
|
||||
});
|
||||
function showKeyboardFn(index) {
|
||||
cpList.currentValIndex = index;
|
||||
const showProvince = index === 0;
|
||||
const showNumber = index > 1;
|
||||
if (index === cpList.licensePlateNumber.length) {
|
||||
vehicleKeyboards.value.changeDialogShow(false, showProvince, showNumber);
|
||||
} else {
|
||||
vehicleKeyboards.value.changeDialogShow(true, showProvince, showNumber);
|
||||
}
|
||||
}
|
||||
function setValue(val) {
|
||||
if (val === "delete") {
|
||||
if (cpList.currentValIndex > 2) {
|
||||
cpList.licensePlateNumber[cpList.currentValIndex] = "";
|
||||
cpList.currentValIndex--;
|
||||
} else {
|
||||
cpList.licensePlateNumber[cpList.currentValIndex] = "";
|
||||
}
|
||||
} else {
|
||||
cpList.licensePlateNumber[cpList.currentValIndex] = val;
|
||||
cpList.currentValIndex += 1;
|
||||
showKeyboardFn(cpList.currentValIndex);
|
||||
}
|
||||
}
|
||||
function ocrSb() {
|
||||
try {
|
||||
bridge.pZ("pzsbcphm");
|
||||
} catch (error) {
|
||||
window.setcphm("川RRF435");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//接收postMessage消息
|
||||
function receivePost(mes) {
|
||||
var str = "";
|
||||
try {
|
||||
str = mes.data.type;
|
||||
} catch (error) { }
|
||||
switch (str) {
|
||||
case 'PHOTO':
|
||||
let str = mes.data.data;
|
||||
baseInfo.value.baseImage = str;
|
||||
break;
|
||||
case "cphm":
|
||||
try {
|
||||
getCphm(mes.data.data);
|
||||
} catch (error) { }
|
||||
break;
|
||||
case "color":
|
||||
try {
|
||||
console.log(mes.data);
|
||||
getColor(mes.data.data);
|
||||
} catch (error) { }
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
//通过ocr获取车牌
|
||||
function getCphm(data) {
|
||||
var cparr = ["", "", "", "", "", "", ""];
|
||||
try {
|
||||
if (data && data.length > 6) {
|
||||
cparr = data.split("");
|
||||
} else {
|
||||
Toast.fail("OCR识别失败");
|
||||
}
|
||||
} catch (error) { }
|
||||
cpList.licensePlateNumber = cparr;
|
||||
}
|
||||
|
||||
//ocr获取车牌颜色
|
||||
function getColor(val) {
|
||||
D_BZ_HPZL.value.forEach(item => {
|
||||
if (item.dm == val) {
|
||||
from.hplx = item.dm;
|
||||
from.value = item.zdmc
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 盘车
|
||||
function checkC(val) {
|
||||
let hphm = cpList.licensePlateNumber.join("");
|
||||
let hplx = from.hplx;
|
||||
let pcsrlx = val ? '2' : '7' //有参数是手动盘查，没有是ocr识别
|
||||
peopleCarShow.value = false
|
||||
router.push({
|
||||
path: "/canVehicle",
|
||||
query: { hphm: hphm, hplx: hplx, pcsrlx: pcsrlx, zlId: props.zlId, }
|
||||
});
|
||||
}
|
||||
function onConfirm(val) {
|
||||
isShowCommonPicker.value = false;
|
||||
from.value = val.text;
|
||||
from.hplx = val.value;
|
||||
}
|
||||
const checkCList = [
|
||||
{ label: "车牌", value: "plateNum" },
|
||||
// { label: "车辆识别码", value: "plateCode" },
|
||||
];
|
||||
const cCheckFlag = ref("plateNum");
|
||||
function getCItem(item, index) {
|
||||
cCheckFlag.value = item.value;
|
||||
console.log(D_BZ_HPZL.value);
|
||||
}
|
||||
// 弹出层数据
|
||||
const columns = ref(["测试1", "测试2", "测试3"]);
|
||||
const isShowCommonPicker = ref(false);
|
||||
onUnmounted(()=>{
|
||||
emitter.off('closeCarJp')
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.input-number {
|
||||
height: 7vh;
|
||||
// line-height: 6vh;
|
||||
overflow: hidden;
|
||||
margin: 10px 5vw 0;
|
||||
text-align: center;
|
||||
|
||||
// border-radius: 5px;
|
||||
// border: 1px rgb(81, 81, 81) solid;
|
||||
.p_div {
|
||||
background-color: #f5f5f5;
|
||||
height: 7vh;
|
||||
line-height: 7vh;
|
||||
width: 12%;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-left: 1px #e5e5e5 solid;
|
||||
border-top: 1px #e5e5e5 solid;
|
||||
border-bottom: 1px #e5e5e5 solid;
|
||||
background: #f5f5f5;
|
||||
// border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.p_div:nth-child(8) {
|
||||
border: 1px #e5e5e5 solid;
|
||||
}
|
||||
|
||||
.add-number {
|
||||
width: 52px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #1143ca;
|
||||
border: 1px solid #1143ca;
|
||||
}
|
||||
|
||||
.p_div.current {
|
||||
border: 1px solid #66aef6;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.plateNum {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
margin: 0 5vw;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.plateNum .van-cell {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.footBtn {
|
||||
margin: 10px 5vw;
|
||||
|
||||
.toolsTip {
|
||||
color: red;
|
||||
font-size: 12px;
|
||||
// transform: scale(.9);
|
||||
margin: 1vw 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
210
src/pages/spsHome/components/checkPeople.vue
Normal file
210
src/pages/spsHome/components/checkPeople.vue
Normal file
@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<!-- 盘人 -->
|
||||
<van-popup v-model:show="peoplePopupShow" round :style="{ width: '90%' }" close-icon="close" :overlay="true"
|
||||
@close="handleClose">
|
||||
<div class="checkPeoplePopup">
|
||||
<div class="select-box">
|
||||
<div class="item-boxs" v-for="(item, index) in checkPList" :key="index" @click="pCheckFlag = item.value">
|
||||
<span :class="pCheckFlag === item.value ? 'checkText' : ''">{{ item.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-box">
|
||||
<van-form @submit="onSubmit">
|
||||
<van-field class="border" v-model="form.sfzh" placeholder="请输入身份证号" v-if="pCheckFlag === 'sfzh'"
|
||||
right-icon="photograph" @click-right-icon="handleOCR" :rules="sfzhRuls">
|
||||
</van-field>
|
||||
<van-field class="border" v-model="form.value" placeholder="请输入手机号" right-icon="graphic"
|
||||
v-if="pCheckFlag === 'phoneNum'" :rules="dhhmRuls">
|
||||
</van-field>
|
||||
<div class="photo" v-if="pCheckFlag === 'photo'" @click="takePhoto">
|
||||
<img :src="require('../../../assets/images/new/photoin.png')" alt="" width="100" height="100" />
|
||||
<span>开始拍照</span>
|
||||
</div>
|
||||
<div class="footBtn" v-if="pCheckFlag != 'photo'">
|
||||
<van-button native-type="submit" type="primary" round block>查询</van-button>
|
||||
</div>
|
||||
<div class="toolsTip">请根据工作需求使用功能，您的每次查询将记录日志！</div>
|
||||
</van-form>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</van-popup>
|
||||
<van-popup v-model:show="isShowCommonPicker" round position="bottom">
|
||||
<van-picker :columns="columns" @cancel="isShowCommonPicker = false" @confirm="onConfirm" />
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineProps, defineExpose } from "vue";
|
||||
import { Toast } from "vant";
|
||||
import { useRouter } from "vue-router";
|
||||
import { IdCardValidator, phoneValidator } from "../../../utils/rules.js"
|
||||
import { login } from "@/api/user.js";
|
||||
const props = defineProps({ zlId: String });
|
||||
const router = useRouter();
|
||||
const peoplePopupShow = ref(false);
|
||||
const form = ref({
|
||||
sfzh: "",
|
||||
lxdh: "",
|
||||
});
|
||||
const pCheckFlag = ref("sfzh");
|
||||
// 弹出层数据
|
||||
const columns = ref(["测试1", "测试2", "测试3"]);
|
||||
const checkPList = [
|
||||
{ label: "身份证", value: "sfzh" },
|
||||
{ label: "手机号", value: "phoneNum" },
|
||||
{ label: "人像", value: "photo" },
|
||||
];// 盘人弹框按钮List
|
||||
const isShowCommonPicker = ref(false);
|
||||
const sfzhRuls = ref([
|
||||
{ required: true, message: '身份证号码不能为空', trigger: 'onChange/onBlur' },
|
||||
{ validator: (value) => { return IdCardValidator(value) }, trigger: 'onChange/onBlur' }
|
||||
])
|
||||
const dhhmRuls = ref([
|
||||
{ required: true, message: '电话号码不能为空', trigger: 'onChange/onBlur' },
|
||||
{ validator: (value) => { return phoneValidator(value) }, trigger: 'onChange/onBlur' }
|
||||
])
|
||||
|
||||
// 打开弹窗
|
||||
function handleOpen() {
|
||||
peoplePopupShow.value = true;
|
||||
window.addEventListener("message", receivePost);
|
||||
}
|
||||
function handleClose() {
|
||||
peoplePopupShow.value = false
|
||||
window.removeEventListener("message", receivePost);
|
||||
}
|
||||
|
||||
// 处理人OCR
|
||||
function handleOCR() {
|
||||
try {
|
||||
window.bridge.openOcrDiscern();
|
||||
} catch (error) { }
|
||||
}
|
||||
//接收postMessage消息
|
||||
function receivePost(mes) {
|
||||
var str = "";
|
||||
try {
|
||||
str = mes.data.type;
|
||||
} catch (error) { }
|
||||
|
||||
switch (str) {
|
||||
case 'PHOTO':
|
||||
try {
|
||||
if (mes.data.data) {
|
||||
let str = mes.data.data
|
||||
router.push({ path: "/peopleList", query: { info: str, pcsrlx: "5" } });
|
||||
} else {
|
||||
Toast.fail("人像识别失败");
|
||||
}
|
||||
} catch (error) { }
|
||||
break;
|
||||
case "sfzh":
|
||||
try {
|
||||
if (mes.data.data) {
|
||||
let info = JSON.parse(mes.data.data)
|
||||
localStorage.setItem('OCR', mes.data.data)
|
||||
let data = { sfzh: info.num, pcsrlx: 7, zlId: props.zlId }
|
||||
router.push({ path: "/quarantinePersonnel", query: data });
|
||||
} else {
|
||||
Toast.fail("OCR识别失败");
|
||||
}
|
||||
} catch (error) { }
|
||||
break;
|
||||
case "NFC":
|
||||
try {
|
||||
if (mes.data.data) {
|
||||
let obj = mes.data.data
|
||||
let data = { sfzh: obj.data.sfzh, pcsrlx: 1, zlId: props.zlId }
|
||||
window.localStorage.setItem("NFC", JSON.stringify(mes.data.data));
|
||||
router.push({ path: "/quarantinePersonnel", query: data });
|
||||
} else {
|
||||
Toast.fail("NFC识别失败");
|
||||
}
|
||||
} catch (error) { }
|
||||
break;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// 人像
|
||||
function takePhoto() {
|
||||
try {
|
||||
bridge.pZ('pz_system_rxsb_yk')
|
||||
} catch (error) { }
|
||||
}
|
||||
|
||||
// 盘人提交按钮
|
||||
function onSubmit(values) {
|
||||
switch (pCheckFlag.value) {
|
||||
case "sfzh":
|
||||
let data = { sfzh: form.value.sfzh, pcsrlx: "2", zlId: props.zlId }
|
||||
localStorage.setItem('NFC', JSON.stringify(data))
|
||||
router.push({ path: "/quarantinePersonnel", query: data });
|
||||
break;
|
||||
case "phoneNum":
|
||||
let prams = { dhhm: form.value.value, isPc: 1, pcsrlx: "6" }
|
||||
router.push({ path: "/yyzx/dhcr", query: prams });
|
||||
break;
|
||||
}
|
||||
peoplePopupShow.value = false;
|
||||
}
|
||||
|
||||
defineExpose({ handleOpen });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../assets/styles/mixin.scss";
|
||||
|
||||
.item-boxs {
|
||||
@include font_size($font_medium_s);
|
||||
}
|
||||
|
||||
.sub-btn {
|
||||
@include font_size($font_medium);
|
||||
}
|
||||
|
||||
.border {
|
||||
border: 1px solid #ccc;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.photo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-bottom: 4vh;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
line-height: 2em;
|
||||
color: #ec6b2b;
|
||||
@include font_size($font_medium);
|
||||
font-weight: bold;
|
||||
font-family: PingFang SC;
|
||||
}
|
||||
}
|
||||
|
||||
.footBtn {
|
||||
margin: 10px 0px;
|
||||
}
|
||||
|
||||
.van-form {
|
||||
width: 83%;
|
||||
}
|
||||
|
||||
::v-deep .van-uploader__wrapper {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toolsTip {
|
||||
color: red;
|
||||
font-size: 12px;
|
||||
margin: 2vw 0;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
210
src/pages/spsHome/components/checkPeopleNew.vue
Normal file
210
src/pages/spsHome/components/checkPeopleNew.vue
Normal file
@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<!-- 盘人 -->
|
||||
<!-- <van-popup v-model:show="peoplePopupShow" round :style="{ width: '90%' }" close-icon="close" :overlay="true"
|
||||
@close="handleClose"> -->
|
||||
<div class="checkPeoplePopup">
|
||||
<!-- <div class="select-box">
|
||||
<div class="item-boxs" v-for="(item, index) in checkPList" :key="index" @click="pCheckFlag = item.value">
|
||||
<span :class="pCheckFlag === item.value ? 'checkText' : ''">{{ item.label }}</span>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="content-box">
|
||||
<van-form @submit="onSubmit">
|
||||
<van-field class="border" v-model="form.sfzh" placeholder="请输入身份证号" v-if="pCheckFlag === 'sfzh'"
|
||||
right-icon="photograph" @click-right-icon="handleOCR" :rules="sfzhRuls">
|
||||
</van-field>
|
||||
<van-field class="border" v-model="form.value" placeholder="请输入手机号" right-icon="graphic"
|
||||
v-if="pCheckFlag === 'phoneNum'" :rules="dhhmRuls">
|
||||
</van-field>
|
||||
<div class="photo" v-if="pCheckFlag === 'photo'" @click="takePhoto">
|
||||
<img :src="require('../../../assets/images/new/photoin.png')" alt="" width="100" height="100" />
|
||||
<span>开始拍照</span>
|
||||
</div>
|
||||
<div class="footBtn" v-if="pCheckFlag != 'photo'">
|
||||
<van-button native-type="submit" type="primary" round block>查询</van-button>
|
||||
</div>
|
||||
<div class="toolsTip">请根据工作需求使用功能，您的每次查询将记录日志！</div>
|
||||
</van-form>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<!-- </van-popup> -->
|
||||
<van-popup v-model:show="isShowCommonPicker" round position="bottom">
|
||||
<van-picker :columns="columns" @cancel="isShowCommonPicker = false" @confirm="onConfirm" />
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineProps, defineExpose } from "vue";
|
||||
import { Toast } from "vant";
|
||||
import { useRouter } from "vue-router";
|
||||
import { IdCardValidator, phoneValidator } from "../../../utils/rules.js"
|
||||
import { login } from "@/api/user.js";
|
||||
const props = defineProps({ zlId: String });
|
||||
const router = useRouter();
|
||||
const peoplePopupShow = ref(false);
|
||||
const form = ref({
|
||||
sfzh: "",
|
||||
lxdh: "",
|
||||
});
|
||||
const pCheckFlag = ref("sfzh");
|
||||
// 弹出层数据
|
||||
const columns = ref(["测试1", "测试2", "测试3"]);
|
||||
const checkPList = [
|
||||
{ label: "身份证", value: "sfzh" },
|
||||
// { label: "手机号", value: "phoneNum" },
|
||||
// { label: "人像", value: "photo" },
|
||||
];// 盘人弹框按钮List
|
||||
const isShowCommonPicker = ref(false);
|
||||
const sfzhRuls = ref([
|
||||
{ required: true, message: '身份证号码不能为空', trigger: 'onChange/onBlur' },
|
||||
{ validator: (value) => { return IdCardValidator(value) }, trigger: 'onChange/onBlur' }
|
||||
])
|
||||
const dhhmRuls = ref([
|
||||
{ required: true, message: '电话号码不能为空', trigger: 'onChange/onBlur' },
|
||||
{ validator: (value) => { return phoneValidator(value) }, trigger: 'onChange/onBlur' }
|
||||
])
|
||||
|
||||
// 打开弹窗
|
||||
function handleOpen() {
|
||||
peoplePopupShow.value = true;
|
||||
window.addEventListener("message", receivePost);
|
||||
}
|
||||
function handleClose() {
|
||||
peoplePopupShow.value = false
|
||||
window.removeEventListener("message", receivePost);
|
||||
}
|
||||
|
||||
// 处理人OCR
|
||||
function handleOCR() {
|
||||
try {
|
||||
window.bridge.openOcrDiscern();
|
||||
} catch (error) { }
|
||||
}
|
||||
//接收postMessage消息
|
||||
function receivePost(mes) {
|
||||
var str = "";
|
||||
try {
|
||||
str = mes.data.type;
|
||||
} catch (error) { }
|
||||
|
||||
switch (str) {
|
||||
case 'PHOTO':
|
||||
try {
|
||||
if (mes.data.data) {
|
||||
let str = mes.data.data
|
||||
router.push({ path: "/peopleList", query: { info: str, pcsrlx: "5" } });
|
||||
} else {
|
||||
Toast.fail("人像识别失败");
|
||||
}
|
||||
} catch (error) { }
|
||||
break;
|
||||
case "sfzh":
|
||||
try {
|
||||
if (mes.data.data) {
|
||||
let info = JSON.parse(mes.data.data)
|
||||
localStorage.setItem('OCR', mes.data.data)
|
||||
let data = { sfzh: info.num, pcsrlx: 7, zlId: props.zlId }
|
||||
router.push({ path: "/quarantinePersonnel", query: data });
|
||||
} else {
|
||||
Toast.fail("OCR识别失败");
|
||||
}
|
||||
} catch (error) { }
|
||||
break;
|
||||
case "NFC":
|
||||
try {
|
||||
if (mes.data.data) {
|
||||
let obj = mes.data.data
|
||||
let data = { sfzh: obj.data.sfzh, pcsrlx: 1, zlId: props.zlId }
|
||||
window.localStorage.setItem("NFC", JSON.stringify(mes.data.data));
|
||||
router.push({ path: "/quarantinePersonnel", query: data });
|
||||
} else {
|
||||
Toast.fail("NFC识别失败");
|
||||
}
|
||||
} catch (error) { }
|
||||
break;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// 人像
|
||||
function takePhoto() {
|
||||
try {
|
||||
bridge.pZ('pz_system_rxsb_yk')
|
||||
} catch (error) { }
|
||||
}
|
||||
|
||||
// 盘人提交按钮
|
||||
function onSubmit(values) {
|
||||
switch (pCheckFlag.value) {
|
||||
case "sfzh":
|
||||
let data = { sfzh: form.value.sfzh, pcsrlx: "2", zlId: props.zlId }
|
||||
localStorage.setItem('NFC', JSON.stringify(data))
|
||||
router.push({ path: "/quarantinePersonnel", query: data });
|
||||
break;
|
||||
case "phoneNum":
|
||||
let prams = { dhhm: form.value.value, isPc: 1, pcsrlx: "6" }
|
||||
router.push({ path: "/yyzx/dhcr", query: prams });
|
||||
break;
|
||||
}
|
||||
peoplePopupShow.value = false;
|
||||
}
|
||||
|
||||
defineExpose({ handleOpen });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../assets/styles/mixin.scss";
|
||||
|
||||
.item-boxs {
|
||||
@include font_size($font_medium_s);
|
||||
}
|
||||
|
||||
.sub-btn {
|
||||
@include font_size($font_medium);
|
||||
}
|
||||
|
||||
.border {
|
||||
border: 1px solid #ccc;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.photo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-bottom: 4vh;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
line-height: 2em;
|
||||
color: #ec6b2b;
|
||||
@include font_size($font_medium);
|
||||
font-weight: bold;
|
||||
font-family: PingFang SC;
|
||||
}
|
||||
}
|
||||
|
||||
.footBtn {
|
||||
margin: 10px 0px;
|
||||
}
|
||||
|
||||
.van-form {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
::v-deep .van-uploader__wrapper {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toolsTip {
|
||||
color: red;
|
||||
font-size: 12px;
|
||||
margin: 2vw 0;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
125
src/pages/spsHome/components/peopleList.vue
Normal file
125
src/pages/spsHome/components/peopleList.vue
Normal file
@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div style="padding-top: 13vw">
|
||||
<TopNav navTitle="人员列表" :showRight="false" :showLeft="true" />
|
||||
<ul class="people-box">
|
||||
<li class="people-item boxItem" v-for="(item, index) in dataList" @click="lookDetail(item)" :key="index">
|
||||
<div class="text">相似度{{ item.xsd }}%</div>
|
||||
<div class="item-left">
|
||||
<van-image @click.stop="ImagePreview([item.baseUrl])" :src="item.baseUrl">
|
||||
<template v-slot:loading>
|
||||
<van-loading type="spinner" size="20" />
|
||||
</template>
|
||||
</van-image>
|
||||
</div>
|
||||
<div class="item-right">
|
||||
<div class="info">姓名 ：{{ item.xm }}</div>
|
||||
<div class="info">性别 ：{{ item.xbdm == "1" ? "男" : "女" }}</div>
|
||||
<div class="info">出生日期 ：{{ item.csrq }}</div>
|
||||
<div class="info">身份证号 ：{{ item.sfzh }}</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "peopleList",
|
||||
};
|
||||
</script>
|
||||
<script setup>
|
||||
import TopNav from "../../../components/topNav.vue";
|
||||
import { onMounted, ref } from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import { selectRx } from "../../../api/common.js";
|
||||
import { ImagePreview } from "vant";
|
||||
import { hintToast, getBase64 } from "../../../utils/tools.js";
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const dataList = ref([]);
|
||||
onMounted(() => {
|
||||
let str = route.query.info;
|
||||
let data = new FormData();
|
||||
data.append("base64Str", str);
|
||||
selectRx(data).then((res) => {
|
||||
if (res && res.length > 0) {
|
||||
dataList.value = res.slice(0, 10);
|
||||
dataList.value.forEach((item) => {
|
||||
getBase64((url) => {
|
||||
item.baseUrl = url;
|
||||
}, item.url);
|
||||
});
|
||||
} else {
|
||||
hintToast("未查到人员信息");
|
||||
}
|
||||
});
|
||||
});
|
||||
//获取base64地址
|
||||
function _getBase64(item) {
|
||||
getBase64((res) => {
|
||||
item.baseUrl = res;
|
||||
}, item.url);
|
||||
}
|
||||
// 查看详情
|
||||
function lookDetail(item) {
|
||||
router.push({
|
||||
path: "/quarantinePersonnel",
|
||||
query: { sfzh: item.sfzh, pcsrlx: "5" },
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.people-box {
|
||||
padding: 4vw;
|
||||
box-sizing: border-box;
|
||||
|
||||
.people-item {
|
||||
display: flex;
|
||||
border: 1px solid #e9e9e9;
|
||||
padding: 2vw;
|
||||
border-radius: 1vw;
|
||||
margin-bottom: 2vw;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.text {
|
||||
position: absolute;
|
||||
right: -21px;
|
||||
top: 17px;
|
||||
width: 106px;
|
||||
text-align: center;
|
||||
height: 22px;
|
||||
line-height: 24px;
|
||||
background: red;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
transform: rotate(42deg);
|
||||
}
|
||||
|
||||
.item-left {
|
||||
width: 22vw;
|
||||
margin-right: 2vw;
|
||||
text-align: center;
|
||||
|
||||
::v-deep .van-image {
|
||||
width: 22vw;
|
||||
max-height: 27vw;
|
||||
|
||||
img {
|
||||
width: 22vw;
|
||||
max-height: 27vw;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.item-right {
|
||||
flex: 1;
|
||||
|
||||
.info {
|
||||
line-height: 7vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
95
src/pages/spsHome/components/prpcPopup.vue
Normal file
95
src/pages/spsHome/components/prpcPopup.vue
Normal file
@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<!-- 盘人 -->
|
||||
<van-popup v-model:show="peoplePopupShow" round :style="{ width: '90%' }" teleport="body" close-icon="close" :overlay="true"
|
||||
@close="handleClose">
|
||||
<van-tabs v-model:active="active" @change="tabChange">
|
||||
<van-tab title="盘人">
|
||||
<CheckPeople />
|
||||
</van-tab>
|
||||
<van-tab title="盘车">
|
||||
<CheckCar />
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineProps, defineExpose } from "vue";
|
||||
import { Toast } from "vant";
|
||||
import { useRouter } from "vue-router";
|
||||
import CheckCar from "./checkCarNew.vue";
|
||||
import CheckPeople from "./checkPeopleNew.vue";
|
||||
import { login } from "@/api/user.js";
|
||||
import emitter from "@/utils/eventBus";
|
||||
const props = defineProps({ zlId: String });
|
||||
const router = useRouter();
|
||||
const peoplePopupShow = ref(false);
|
||||
const active=ref('0')
|
||||
// 打开弹窗
|
||||
function handleOpen() {
|
||||
peoplePopupShow.value = true;
|
||||
}
|
||||
function handleClose() {
|
||||
peoplePopupShow.value = false
|
||||
}
|
||||
const tabChange=()=>{
|
||||
emitter.emit('closeCarJp',false)
|
||||
}
|
||||
|
||||
defineExpose({ handleOpen });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../assets/styles/mixin.scss";
|
||||
|
||||
.item-boxs {
|
||||
@include font_size($font_medium_s);
|
||||
}
|
||||
|
||||
.sub-btn {
|
||||
@include font_size($font_medium);
|
||||
}
|
||||
|
||||
.border {
|
||||
border: 1px solid #ccc;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.photo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-bottom: 4vh;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
line-height: 2em;
|
||||
color: #ec6b2b;
|
||||
@include font_size($font_medium);
|
||||
font-weight: bold;
|
||||
font-family: PingFang SC;
|
||||
}
|
||||
}
|
||||
|
||||
.footBtn {
|
||||
margin: 10px 0px;
|
||||
}
|
||||
|
||||
.van-form {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
::v-deep .van-uploader__wrapper {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toolsTip {
|
||||
color: red;
|
||||
font-size: 12px;
|
||||
margin: 2vw 0;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user