提交
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>
|
||||
Reference in New Issue
Block a user