DY-JMXF/dy_app
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始提交

Browse Source
This commit is contained in:
DEV_ZZ
2025-09-04 16:35:14 +08:00
commit 5cd52c4d2c
735 changed files with 155784 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
src/pages/views/CanVehicle/components/checkPeople.vue Normal file
View File

@ -0,0 +1,155 @@
<template>
<div class="container">
<!-- 盘人 -->
<van-popup v-model:show="peoplePopupShow" round :style="{ width: '80%' }" close-icon="close" :overlay="true"
@close="handlePClose">
<div class="checkPeoplePopup">
<div class="select-box">
<div class="item-boxs" v-for="(item, index) in checkPList" :key="index" @click="getPItem(item, index)">
<span :class="pCheckFlag === item.value ? 'checkText' : ''">{{
item.label
}}</span>
</div>
</div>
<div class="content-box">
<van-field v-model="form.sfzh" placeholder="请输入身份证号" v-if="pCheckFlag === 'sfzh'" right-icon="photograph"
:rules="[{ required: true, message: '请输入身份证号码' }]">
</van-field>
<van-field v-model="form.value" placeholder="请输入手机号" right-icon="graphic" v-if="pCheckFlag === 'phoneNum'"
:rules="[{ required: true, message: '请输入手机号码' }]">
</van-field>
<div v-if="pCheckFlag === 'photo'">
<img :src="require('../../../../assets/images/new/photoin.png')" alt="" width="100" height="100" />
</div>
<div v-if="pCheckFlag === 'scanf'">
<!-- <van-icon name="scan" /> -->
</div>
<!-- 综合 -->
<div v-if="pCheckFlag === 'comprehensive'" style="width: 100%">
<van-field v-model="form.value" placeholder="请输入姓名" :rules="[{ required: true, message: '请输入姓名' }]"
right-icon="user-o">
</van-field>
<!-- <van-field
v-model="value"
readonly
name="calendar"
placeholder="请输入出生日期"
@click="showCalendar = true"
>
<template #right-icon>
<i class="iconfontorange">&#xe613;</i>
</template>
</van-field> -->
<van-field v-model="form.value" name="csrq" placeholder="请输入生日,格式为2020-01-01" right-icon="calendar-o"
@touchstart.stop="showDateKeyboard = true" :rules="[
{
pattern: /\d{4}-\d{2}-\d{2}/,
required: true,
message: '请输入生日,格式为2020-01-01',
},
]">
</van-field>
<van-field v-model="form.result" name="picker" clickable placeholder="请选择性别" right-icon="award-o"
@click="getCommonPop('sex')">
</van-field>
</div>
</div>
<div class="checkPeopleSubmit" @click="checkP(pCheckFlag)" v-if="pCheckFlag != 'photo'">
<div class="sub-btn">
<img :src="require('../../../../assets/images/new/faceR.png')" alt="" width="17"
height="17" />&nbsp;&nbsp;盘查人员
</div>
</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,
reactive,
watch,
defineProps,
defineEmits,
defineExpose,
toRefs,
toRef,
} from "vue";
import { hintToast } from "../../../../utils/tools.js";
import { useRouter } from "vue-router";
const router = useRouter();
const peoplePopupShow = ref(false);
function handleOpen() {
peoplePopupShow.value = true;
}
function handlePClose() {
peoplePopupShow.value = false;
}
defineExpose({
handleOpen,
});
const form = ref({
sfzh: "",
lxdh: "",
});
// 盘人
function checkP(e) {
switch (e) {
case "sfzh":
if (form.value.sfzh) {
router.push({
path: "/quarantinePersonnel",
query: {
sfzh: form.value.sfzh,
pcsrlx: "2",
},
});
} else {
hintToast("请输入身份证号码");
}
break;
}
}
// 盘人弹框按钮List
const checkPList = [
{ label: "身份证", value: "sfzh" },
{ label: "手机号", value: "phoneNum" },
// { label: "人像", value: "photo" },
// { label: "扫码", value: "scanf" },
// { label: "综合", value: "comprehensive" },
];
const pCheckFlag = ref("sfzh");
function getPItem(item, index) {
pCheckFlag.value = item.value;
}
// 弹出层数据
const columns = ref(["测试1", "测试2", "测试3"]);
const isShowCommonPicker = ref(false);
function getCommonPop(val) {
switch (val) {
case "cllx":
columns.value = ["1", "2", "3"];
break;
case "sex":
columns.value = ["男", "女", "未知"];
break;
}
isShowCommonPicker.value = true;
}
</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_s);
}
</style>

776
src/pages/views/CanVehicle/index.vue Normal file
View File

@ -0,0 +1,776 @@
<template>
<div class="container" style="padding-top: 13vw">
<TopNav navTitle="车辆盘查" :showRight="false" :showLeft="true" />
<div class="tip_text">
盘查结果：{{ clxx.pcbqsm }}
</div>
<!-- <div class="head-nav-banner" v-if="clxx.jdcsyr"></div>
<div class="top" v-if="clxx.jdcsyr">
<div class="basic-info">
<div class="img-box">
<img :class="_getBase64(clxx)" :src="clxx.baseUrl" width="60" />
</div>
<div class="IDcard-info">
<div class="text">{{ clxx.hphm }}</div>
<div>所有人: {{ clxx.jdcsyr }}</div>
<div>车主身份证：{{ clxx.jdcsyrsfzh }}</div>
<div>识别代码: {{ clxx.clsbdh }}</div>
</div>
</div>
</div>
<div class="bg_ban"></div>
<div class="center" v-if="clxx.jdcsyr">
<div class="associated-information">
<div class="sign-title">关联信息</div>
<div class="content1">
<div class="item-box" @click="goCanTrack">
<div class="ass-item-box">
<div class="circlebox bg2"></div>
<span>盘查轨迹</span>
</div>
</div>
</div>
</div>
<div class="pick-up-information">
<div class="sign-title">采集信息</div>
<div class="pick-box">
<van-badge class="pick-item-box pbg3" :content="wpdjList.length" @click="isShowSignIn = true">
<div>物品登记</div>
<div class="tp"></div>
</van-badge>
<van-popup v-model:show="isShowSignIn" :style="{ width: '90vw' }">
<van-form @submit="onSubmitWp">
<van-cell-groub>
<van-field name="uploader" label="物品图片">
<template #input>
<van-uploader v-model="wpTpIdList" multiple :max-count="3" :after-read="upLoadImg2" />
</template>
</van-field>
</van-cell-groub>
<van-cell-groub>
<van-field v-model="wpdjForm.wpms" label="物品描述" placeholder="物品描述" rows="2" maxlength="50"
show-word-limit></van-field>
</van-cell-groub>
<van-cell-groub>
<van-field :rules="[{ required: true, message: '请填写物品数量' }]" v-model="wpdjForm.wpsl" label="物品数量"
placeholder="物品数量" type="number"></van-field>
</van-cell-groub>
<van-cell-groub>
<van-field :rules="[{ required: true, message: '请选择物品类型' }]" readonly is-link v-model="wpdjForm.wplx"
label="物品类型" placeholder="选择物品类型" @click="showPicker = true"></van-field>
</van-cell-groub>
<div style="margin: 16px">
<van-button round block type="primary" native-type="submit" size="small">提交</van-button>
</div>
</van-form>
</van-popup>
</div>
</div>
<div class="vehicular">
<div class="sign-title">
<span>同乘人员</span><span class="chooseP" @click="isWithStaff = true;">选择人员</span>
</div>
<div class="ry_item">
<div v-if="rypcidList.length === 0" style="text-align: center">
暂无数据
</div>
<div v-else>
<div class="item_flex" v-for="(item, index) in rypcidList" :key="index + 'ryid'">
<van-badge>
<div class="item_tcry">
<span style="width: 15vw">{{
rypcOptions.filter((e) => e.value === item)[0].xm
}}</span>
&emsp;
<span>{{
rypcOptions.filter((e) => e.value === item)[0].sfzh
}}</span>
</div>
<template #content>
<van-icon name="cross" class="badge-icon" @click="deleterypc(index)" />
</template>
</van-badge>
<van-button v-if="
rypcOptions.filter((e) => e.value === item)[0].pcclJg == 1
" round class="fxBtn" type="default" style="padding: 0 12px" size="mini">放行</van-button>
<van-button v-else-if="
rypcOptions.filter((e) => e.value === item)[0].pcclJg == 2
" round class="yjBtn" style="padding: 0 12px" type="default" size="mini">移交</van-button>
<van-button v-else round class="fxBtn" style="padding: 0 12px" type="default" size="mini">盘查</van-button>
</div>
</div>
</div>
<van-popup v-model:show="isWithStaff" :style="{ height: '55%', width: '70%', borderRadius: '8px' }">
<div class="staff-title">选择同乘人员</div>
<div class="staff-content">
<div style="text-align: center; margin-top: 16px" v-if="rypcOptions.length === 0">
暂无同乘人员~
</div>
<div v-else>
<van-checkbox-group v-model="rypcidList">
<van-cell-group inset>
<van-cell v-for="(item, index) in rypcOptions" :key="index + 'rypcid'" :title="item.xm"
@click="toggle(index)">
<template #right-icon>
<van-checkbox :name="item.value" :ref="(el) => (checkboxRefs[index] = el)"
@click.stop></van-checkbox>
</template>
</van-cell>
</van-cell-group>
</van-checkbox-group>
</div>
</div>
<div class="staff-sure">
<van-button size="small" class="yjBtn" type="default" block @click="prLoad">盘人</van-button>
<van-button size="small" class="fxBtn" type="default" @click="onOkTcry" block>确认</van-button>
</div>
</van-popup>
<div class="veh-box">
<div class="no-veh">暂无乘坐车辆~</div>
</div>
</div>
</div>
<div class="bg_ban"></div>
<div class="upload" v-if="clxx.jdcsyr">
<div class="tsxx" v-show="fileList.length === 0">
点击上传图片
<br />
最多可上传 3 张照片
</div>
<van-uploader v-model="fileList" multiple :max-count="3" :after-read="upLoadImg">
<van-button class="up_btn" icon="plus"></van-button>
</van-uploader>
</div> -->
<!-- <div class="bg_ban" style="height: 100px"></div> -->
<div class="bottom-box">
<div @click="save('1')">
<img src="../../../assets/images/new/fangxing.png" />
放行
</div>
<div @click="save('2')" class="yj">
<img src="../../../assets/images/new/yijiao.png" />
移交
</div>
</div>
<van-popup v-model:show="showPicker" position="bottom">
<van-picker :columns="D_BZ_BPCRCWP" @confirm="onConfirmWp" @cancel="showPicker = false" />
</van-popup>
<!-- 移交弹窗 -->
<van-popup v-model:show="showYj" round :style="{ width: '90vw' }">
<van-form @submit="onYj">
<van-cell-groub>
<van-field :rules="[{ required: true, message: '请填写移交单位' }]" v-model="yjForm.pcclYjdw" label="移交单位"
placeholder="移交单位"></van-field>
</van-cell-groub>
<van-cell-groub>
<van-field :rules="[{ required: true, message: '请选择移交原因' }]" readonly is-link v-model="yjForm.pcclYjyy"
label="移交原因" placeholder="选择移交原因" @click="showYjyy = true"></van-field>
</van-cell-groub>
<div style="margin: 16px">
<van-button round block type="primary" native-type="submit" size="small">移交</van-button>
</div>
</van-form>
</van-popup>
<!-- 移交原因 -->
<van-popup round v-model:show="showYjyy" position="bottom">
<van-picker :columns="D_BZ_BPCCLYJYY" @cancel="showYjyy = false" @confirm="onConfirmYjyy"></van-picker>
</van-popup>
<checkedPeople ref="peo" />
</div>
</template>
<script setup>
import ImageCompressor from "image-compressor.js";
import TopNav from "../../../components/topNav";
import checkedPeople from "./components/checkPeople";
import { ref, reactive, onMounted, onBeforeUpdate, watch } from "vue";
import { useRouter } from "vue-router";
import { selectCl, saveBpccl, upImage, getClry2h } from "../../../api/common";
import { getDictList, setDict } from "../../../utils/dict";
import { zlPrPc } from "../../../api/zlzx.js";
import { getBase64, hintToast } from "../../../utils/tools.js";
const router = useRouter();
//移交表单
const { D_BZ_BPCRCWP, D_BZ_BPCCLYJYY } = getDictList("D_BZ_BPCRCWP", "D_BZ_BPCCLYJYY");
const yjForm = ref({});
const zlId = ref("");
const loading = ref(true);
const showEmpty = ref(false);
const copyCphm = ref("");
const wpTpIdList = ref([]);
const peo = ref(null);
const fileList = ref([]);
const isWithStaff = ref(false);
const showYj = ref(false);
const gps = ref({});
const clxx = ref({});
const showYjyy = ref(false);
const rypcidList = ref([]);//人员盘查id集合
const rypcOptions = ref([]);
const checkboxRefs = ref([]);
const wpdjList = ref([]);//物品登记数据
const wpdjForm = ref({
wpms: "",
wpTpIdList: [],
wpsl: 1,
wplx: "",
});
const tpIdList = ref([]);
const isShowSignIn = ref(false);// 物品登记
const addfileList = ref([]);
const result = ref("");
const showPicker = ref(false);
onBeforeUpdate(() => {
checkboxRefs.value = [];
});
onMounted(() => {
zlId.value = router.currentRoute.value.query.zlId;
copyCphm.value = router.currentRoute.value.query.hphm;
getTcry();
try {
gps = JSON.parse(bridge.getLocation());
} catch (error) { }
let hphm = router.currentRoute.value.query.hphm;
if (hphm) {
clxxQueryDetail(hphm);
} else {
hintToast("无车辆信息,请重试！");
showEmpty.value = true;
loading.value = false;
}
});
function toggle(index) {
checkboxRefs.value[index].toggle();
}
function onOkTcry() {
isWithStaff.value = false;
}
//获取base64地址
function _getBase64(item) {
getBase64((res) => { item.baseUrl = res; }, `http://10.64.201.128:2366/xlpcAdminNew/requestservice/czrk/ryxp.jpg?sfzh=${item.jdcsyrsfzh}`);
}
// 盘查人员
function prLoad() {
peo.value.handleOpen();
}
// 移交原因
function onConfirmYjyy(val) {
showYjyy.value = false;
yjForm.value.pcclYjyy = val.text;
}
function deleterypc(e) {
rypcidList.value.splice(e, 1);
}
function onSubmitWp() {
isShowSignIn.value = false;
wpdjList.value.push({
wpms: wpdjForm.value.wpms,
wpTpIdList: wpdjForm.value.wpTpIdList,
wplx: wpdjForm.value.wplxdm,
wpsl: wpdjForm.value.wpsl,
});
wpTpIdList.value = [];
wpdjForm.value = {
wpms: "",
wpTpIdList: [],
wpsl: 1,
wplx: "",
};
}
function onConfirmWp(val) {
showPicker.value = false;
wpdjForm.value.wplx = val.text;
wpdjForm.value.wplxdm = val.dm;
}
function getTcry() {
getClry2h().then((res) => {
rypcOptions.value = res.map((item) => {
return {
xm: item.xm,
value: item.id,
sfzh: item.sfzh,
pcclJg: item.pcclJg,
};
});
});
}
function clxxQueryDetail(hphm) {
let hplx = router.currentRoute.value.query.hplx
selectCl({
hphm: hphm,
hpzl: hplx,
jd: gps.app_x,
wd: gps.app_y,
sjly: "",
zdxh: gps.zdxh,
pcsrlx: router.currentRoute.value.query.pcsrlx,
zdch: gps.zdch,
zdsim: gps.zdsim,
glxtdm: "",
glxtid: "",
jzid: "",
bbid: "",
pcfs: "",
}).then((res) => {
loading.value = false;
if (res) {
clxx.value = res;
} else {
hintToast("查无此车,请核对信息！");
router.go(-1);
}
//如果是指令页面跳转过来 嗲用
if (zlId.value) {
zlPrPc({ pclxdm: 2, pcryclId: clxx.value.id, zlId: zlId.value }).then((res) => { });
}
});
}
// 关联信息
function goCanTrack() {
router.push({
path: "/TrackInventory", query: { hphm: clxx.value.hphm },
});
}
// 放行移交
function save(val) {
if (val === "1") {
clxx.value.pcclJg = val;
clxx.value.pcclJgmc = "放行";
clxx.value.jd = gps.app_x;
clxx.value.wd = gps.app_y;
const formData = {
id: clxx.value.id,
pcclJg: "1",
pcclJgmc: "放行",
tpIdList: tpIdList.value,
clWpList: wpdjList.value,
rypcidList: rypcidList.value,
};
saveBpccl(formData).then((res) => {
hintToast("放行成功！");
router.go(-1);
});
} else {
clxx.value.pcclJg = val;
clxx.value.pcclJgmc = "移交";
showYj.value = true;
}
}
// 移交
function onYj() {
const formData = {
id: clxx.value.id,
pcclJg: "2",
pcclJgmc: "移交",
pcclYjdw: yjForm.value.pcclYjdw,
pcclYjyy: yjForm.value.pcclYjyy,
tpIdList: tpIdList.value,
clWpList: wpdjList.value,
rypcidList: rypcidList.value,
};
saveBpccl(formData).then((res) => {
hintToast("移交成功！");
router.go(-1);
});
}
// 上传图片
async function upLoadImg(file) {
file.message = "上传中...";
let fileBlob = await _compressImage(file.file);
let fileData = new File([fileBlob], fileBlob.name, { type: fileBlob.type });
const data = new FormData();
data.append("file", fileData);
upImage(data).then((res) => {
file.status = "done";
file.message = "上传成功";
if (!tpIdList.value.includes(res)) tpIdList.value.push(res);
});
}
// 上传图片
async function upLoadImg2(file) {
file.message = "上传中...";
let fileBlob = await _compressImage(file.file);
let fileData = new File([fileBlob], fileBlob.name, { type: fileBlob.type });
const data = new FormData();
data.append("file", fileData);
upImage(data).then((res) => {
file.status = "done";
file.message = "上传成功";
if (!wpdjForm.value.wpTpIdList.includes(res)) wpdjForm.value.wpTpIdList.push(res);
});
}
//压缩图片
const _compressImage = (file) => {
return new Promise((resolve, reject) => {
new ImageCompressor(file, {
quality: 0.6, //压缩质量
success(res) {
resolve(res);
},
error(e) {
reject(e);
},
});
});
};
</script>
<style lang="scss" scoped>
@import "../../../assets/styles/mixin.scss";
.bg_ban {
background: #eff0f5;
height: 12px;
}
.container {
// height: 100vh;
margin-bottom: 8vh;
}
.top {
background-image: url("../../../assets/images/new/cl_bg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
height: 22vw;
padding: 3vh 5vw;
margin: 0 4vw 12px;
position: relative;
z-index: 2;
}
.basic-info {
color: #4d4d4d;
display: flex;
flex-direction: row;
.img-box {
flex: 1;
>img {
border-radius: 5px;
border: 1px solid #1143ca;
overflow: hidden;
}
}
.IDcard-info {
flex: 3;
@include font_size($font_medium_s);
.text {
// @include font_size($font_large);
@include font_size($font_medium);
font-weight: bold;
color: #1f6cec;
}
}
}
.contact-way {
margin-top: 3vh;
line-height: 3vh;
@include font_size($font_medium_s);
.one-line {
display: flex;
.phoneNum {
width: 50%;
}
}
}
.fxBtn {
background: linear-gradient(148deg, #5897ff, #1862de);
color: #f2f2f2;
}
.yjBtn {
background: linear-gradient(148deg, #ffbb6b, #ff7a45);
color: #f2f2f2;
}
.center {
padding: 0 3vw;
.sign-title {
padding-left: 14px;
position: relative;
line-height: 3vh;
@include font_size($font_medium);
font-weight: bold;
display: flex;
justify-content: space-between;
margin: 1vh 0;
.chooseP {
@include font_size($font_medium_s);
color: rgb(0, 102, 255);
font-weight: normal;
}
}
.sign-title::after {
content: "";
position: absolute;
left: 0;
top: 2px;
bottom: 2px;
width: 4px;
background: linear-gradient(0deg, #7ec2ff 0%, #0e8aff 100%);
border-radius: 1px;
}
.associated-information {
@include font_size($font_medium_s);
@include font_color($font-color-theme);
.item-box {
margin: 2vw 4vw;
display: flex;
.ass-item-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
.content1 {
display: flex;
.circlebox {
width: 15vw;
height: 15vw;
// border-radius: 15vw;
text-align: center;
line-height: 15vw;
margin-bottom: 2vw;
}
.bg1 {
background: url("../../../assets/images/new/zhda.png");
background-size: contain;
background-repeat: no-repeat;
}
.bg2 {
background: url("../../../assets/images/new/pcgj.png");
background-size: contain;
background-repeat: no-repeat;
}
.bg3 {
background: url("../../../assets/images/new/tcry.png");
background-size: contain;
background-repeat: no-repeat;
}
}
}
.pick-up-information {
@include font_size($font_medium_s);
@include font_color($font-color-theme);
.pick-box {
display: flex;
justify-content: flex-start;
margin: 3vw 0;
}
.pick-item-box {
padding: 3vw 3vw 10vw;
width: 30%;
margin-right: 2vw;
// border-radius: 3vw;
position: relative;
.tp {
position: absolute;
bottom: 0;
right: 0;
}
}
.pbg1 {
background: url("../../../assets/images/new/bg-blue.png") no-repeat;
background-size: cover;
}
.pbg2 {
background: url("../../../assets/images/new/bg-orgin.png") no-repeat;
background-size: cover;
}
.pbg3 {
color: #397361;
background: url("../../../assets/images/new/wpdj.png") no-repeat;
background-size: 100% 100%;
}
}
.vehicular {
@include font_color($font-color-theme);
.no-veh {
text-align: center;
}
.veh-box {
margin: 1vh 0;
}
}
}
.line1 {
width: 100vw;
background-color: #eee;
height: 1vh;
}
.upload {
padding: 1vh 3vw;
height: 80px;
position: relative;
.tsxx {
position: absolute;
color: #a8a8a8;
top: 0;
left: 30%;
bottom: 0;
padding: 8% 0;
font-size: 14px;
}
.up_btn {
height: 80px;
width: 80px;
color: #a8a8a8;
font-size: 24px;
background: #f2f2f2 url("../../../assets/images/new/upimg_bg.png") no-repeat;
background-size: 100% 100%;
}
}
.bottom-box {
text-align: center;
background: #fff;
border-top: 1px solid #ddddde;
position: fixed;
bottom: 0;
width: 100vw;
height: 6vh;
line-height: 6vh;
display: flex;
>div {
height: 6vh;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
>img {
width: 20px;
margin-right: 8px;
}
}
.yj {
background: #f0f0f0;
}
}
.upload-box {
margin: 1vh 3vw;
}
.ry_item {
background: #f8f8f8;
opacity: 0.7;
margin-bottom: 16px;
line-height: 1.8em;
}
.staff-title {
height: 6vh;
background-color: rgb(13, 106, 245);
text-align: center;
line-height: 6vh;
color: #fff;
}
.staff-sure {
position: fixed;
bottom: 5vw;
right: 5vw;
left: 5vw;
.yjBtn {
margin-bottom: 12px;
border-radius: 8px;
}
.fxBtn {
border-radius: 8px;
}
}
.head-nav-banner {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 35vw;
z-index: 1;
background: #1143ca;
}
::v-deep .headBlue {
background-color: #1143ca !important;
}
.navTitle {
position: absolute;
top: 0;
color: #fff;
// @include font_size($font_large);
font-size: 5.5vw;
text-align: center;
width: 100%;
padding: 3vw 0;
}
.item_tcry {
padding: 2px 24px;
background: #d2e3ff;
border-radius: 8px;
>span {
display: inline-block;
}
}
.badge-icon {
display: block;
font-size: 10px;
line-height: 16px;
}
.item_flex {
padding: 6px 0;
display: flex;
justify-content: space-between;
}
.tip_text{
font-size: 18px;
margin-top: 10px;
}
</style>

240
src/pages/views/Declaration/addEdit copy.vue Normal file
View File

@ -0,0 +1,240 @@
<template>
<div style="padding-top: 13vw">
<TopNav :navTitle="title" />
<van-form @submit="onSubmit" style="height: calc(100vh - 13vw);">
<div class="infoBox">
<ul class="cardInfo">
<li class="item">
<van-field v-model="normalForm.sbsj" required name="申报时间" readonly label="申报时间" input-align="right"
:rules="[{ required: true, message: '请选择时间' }]" />
</li>
<li class="item">
<van-field v-model="normalForm.sblxmc" required name="申报类型" is-link readonly label="申报类型" placeholder="点击设置"
input-align="right" :rules="[{ required: true, message: '请选择申报类型' }]" @click="getCommonPop('sblx')" />
</li>
<li class="item">
<van-field required name="申报原因" readonly label="申报原因" />
</li>
<van-field placeholder="请输入相关内容" v-model="normalForm.sbyy" rows="4" autosize accept=".txt,.png,.zip,jpg,jpeg"
maxlength="500" show-word-limit type="textarea"></van-field>
<li class="item">
<div><span class="mark"></span>添加附件</div>
</li>
<!-- 附件 -->
<div class="fjBox">
<van-uploader v-model="fileList" multiline :max-count="3" :after-read="afterRead"></van-uploader>
</div>
</ul>
<div class="footer">
<van-button round block type="primary" native-type="submit" :loading="isLoading" loading-type="spinner"
loading-text="登录中...">提交</van-button>
</div>
</div>
</van-form>
<!-- 弹窗 -->
<van-popup v-model:show="isShowCommonPicker" round position="bottom">
<van-picker v-if="clickType == 'sblx'" :columns="columns" @cancel="isShowCommonPicker = false"
@confirm="onConfirm" />
</van-popup>
</div>
</template>
<script setup>
import { baseUrl2 } from "@/utils/request.js";
import { upImage } from "@/api/common";
import ImageCompressor from "image-compressor.js";
import TopNav from "../../../components/topNav.vue";
import { getDictList, setDict } from "@/utils/dict";
import { timeValidate ,hintToast} from "@/utils/tools.js";
import { zgDetail, editDataZg, addDataZg } from "../../../api/xfgl.js";
import { useRouter, useRoute } from "vue-router";
import { ref, onMounted, reactive, defineProps } from "vue";
const urlImg = `${baseUrl2}/mosty-api/mosty-base/minio/image/download/`;
const { D_SB_SBLX } = getDictList("D_SB_SBLX");
const route = useRoute();
const router = useRouter();
const message = ref("");
const normalForm = ref({
sbsj:timeValidate(),
ssbmdm:JSON.parse(window.localStorage.getItem("userInfo")).deptList[0].deptCode
});
const isLoading = ref(false)
const isShowCommonPicker = ref(false);
const clickType = ref('');
const columns = ref([]);
const fileList = ref([])
const wpTpIdList = ref([])
const title = ref('')
onMounted(()=>{
title.value = route.query.id ? "编辑战果申报" : "新增战果申报";
if (route.query.id) {
_getDetailById(); //根据id获取详情
}
})
//根据id获取详情
function _getDetailById() {
zgDetail(route.query.id).then((res) => {
D_SB_SBLX.value.forEach((element) => {
if (element.dm == res.sblx) res.sblxmc = element.text;
});
let ids = res.sbfjid.split(',')
fileList.value = []
ids.forEach(item => {
let img = baseUrl2 + "/mosty-api/mosty-base/minio/image/download/" + item;
let obj = {
url: img,
codeId: item,
isImage: true,
status: "done",
message: "上传成功",
};
fileList.value.push(obj)
});
normalForm.value = res;
});
}
// 选择
function getCommonPop(val) {
clickType.value = val;
switch (val) {
case "sblx":
columns.value = D_SB_SBLX.value;
break;
}
isShowCommonPicker.value = true;
}
// 确定选择
function onConfirm(val) {
isShowCommonPicker.value = false;
switch (clickType.value) {
case "sblx":
normalForm.value.sblx = val.dm;
normalForm.value.sblxmc = val.zdmc;
break;
}
}
// 提交
function onSubmit(){
let params = { ...normalForm.value }
delete params.sblxmc
let ids1 = fileList.value.filter(item=>{return item.codeId}).map(v=>{return v.codeId})
let ids2 = wpTpIdList.value.join(',')
params.sbfjid = (ids1.concat(ids2)).join(',')
isLoading.value = true;
if(title.value == '编辑战果申报'){
editDataZg(params).then(res=>{
hintToast('编辑成功')
router.go(-1);
})
}else{
addDataZg(params).then(res=>{
hintToast('新增成功')
router.go(-1);
})
}
}
// 文件预览
async function afterRead(file) {
file.message = "上传中...";
let fileBlob = await _compressImage(file.file);
let fileData = new File([fileBlob], fileBlob.name, { type: fileBlob.type });
const data = new FormData();
data.append("file", fileData);
file.status = "uploading";
upImage(data).then((res) => {
file.status = "done";
file.message = "上传成功";
if (!wpTpIdList.value.includes(res)) wpTpIdList.value.push(res);
});
}
//压缩图片
const _compressImage = (file) => {
return new Promise((resolve, reject) => {
new ImageCompressor(file, {
quality: 0.6, //压缩质量
success(res) {
resolve(res);
},
error(e) {
reject(e);
},
});
});
};
</script>
<style lang="less" scoped>
.infoBox {
height: 100%;
position: relative;
.cardInfo {
height: calc(100vh - 13vw);
padding: 1vw 4vw;
box-sizing: border-box;
overflow: hidden;
overflow-y: auto;
.item {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
height: 8vw;
width: 100%;
border-bottom: 1px solid #e5e5e5;
.mark {
margin: 0 10px;
color: red;
font-size: 16px;
}
.text {
color: #767676;
}
}
.item::before {
position: absolute;
content: "";
left: 0;
top: 50%;
transform: translateY(-50%);
background: #0066ff;
width: 2px;
height: 12px;
z-index: 11;
}
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
text-align: center;
.btn {
padding: 2vw 6vw;
background: #1989fa;
color: #fff;
border-radius: 4px;
}
}
}
::v-deep .van-field__control {
background: #f8fafd;
padding-left: 4px;
}
.fjBox {
padding: 4vw;
box-sizing: border-box;
}
</style>

529
src/pages/views/Declaration/addEdit.vue Normal file
View File

@ -0,0 +1,529 @@
<template>
<div style="padding-top: 13vw">
<TopNav :navTitle="title" />
<van-form @submit="onSubmit" style="height: calc(100vh - 13vw);">
<div class="infoBox">
<ul class="cardInfo">
<li class="item">
<van-field v-model="normalForm.xfsj" required name="时间" is-link readonly label="时间" placeholder="点击设置"
input-align="right" :rules="[{ required: true, message: '请选择时间' }]" />
</li>
<li class="item">
<van-field v-model="normalForm.xfzzXm" required name="巡访主责人" is-link readonly label="巡访主责人"
placeholder="点击设置" input-align="right" :rules="[{ required: true, message: '请选择巡访主责人' }]"
@click="showDialogfn('xfzz')" />
</li>
<li class="item">
<van-field v-model="normalForm.xfzzSfzh" required name="身份证号" readonly input-align="right" label="身份证号"
:rules="[{ required: true, message: '请输入组长身份证号' }]" />
</li>
<li class="item">
<van-field v-model="normalForm.xfmj" name="巡访同行人(民警)" is-link label-width="108px" readonly label="巡访同行人(民警)"
placeholder="点击设置" input-align="right" @click="showDialogfn('xfmj')" />
</li>
<li class="item">
<van-field v-model="normalForm.xffj" name="巡访同行人(辅警)" is-link label-width="108px" readonly label="巡访同行人(辅警)"
placeholder="点击设置" input-align="right" @click="showDialogfn('xffj')" />
</li>
<li class="item">
<van-field v-model="normalForm.sfdw" name="巡访单位" is-link readonly label="巡访单位" placeholder="点击设置"
input-align="right" required :rules="[{ required: true, message: '请选择巡访单位' }]"
@click="showDialogfn('xfdw')" />
</li>
<li class="item">
<van-field v-model="normalForm.dz" required name="巡访地点" label="巡访地点" placeholder="输入地点" input-align="right"
:rules="[{ required: true, message: '请选择巡访地点' }]" />
</li>
<li class="item">
<van-field v-model="normalForm.xflxmc" required name="巡访类型" is-link readonly label="巡访类型" placeholder="点击设置"
input-align="right" :rules="[{ required: true, message: '请选择巡访类型' }]" @click="getCommonPop('xflx')" />
</li>
<li class="item">
<van-field v-model="normalForm.rwztmc" name="任务状态" is-link readonly label="任务状态" placeholder="选择任务状态"
input-align="right" @click="getCommonPop('rwzt')" />
</li>
<li class="item">
<van-field name="巡访内容" @click="showDialogfn('xfnr')" readonly label="巡访内容" />
</li>
<div class="textarea">
<van-field placeholder="请输相关内容" v-model="normalForm.xfnr" rows="4" autosize maxlength="500" show-word-limit
type="textarea"></van-field>
</div>
<li class="item">
<div class="itemlabel"><span class="mark"></span>拍照打卡</div>
</li>
<!-- 附件 -->
<div class="fjBox">
<van-uploader v-model="fileList" multiline :max-count="3" :after-read="afterRead"
:before-delete="deleteFj"></van-uploader>
</div>
<li class="item">
<van-field v-model="sbsj" required name="申报时间" readonly label="申报时间" input-align="right"
:rules="[{ required: true, message: '请选择时间' }]" />
</li>
<li class="item">
<van-field v-model="normalForm.sblxmc" required name="申报类型" is-link readonly label="申报类型" placeholder="点击设置"
input-align="right" :rules="[{ required: true, message: '请选择申报类型' }]" @click="getCommonPop('sblx')" />
</li>
<li class="item">
<van-field required name="申报原因" readonly label="申报原因" />
</li>
<van-field placeholder="请输入相关内容" v-model="normalForm.sbyy" rows="4" autosize accept=".txt,.png,.zip,jpg,jpeg"
maxlength="500" show-word-limit type="textarea"></van-field>
<li class="item">
<div class="itemlabel"><span class="mark"></span>添加附件</div>
</li>
<!-- 附件 -->
<div class="fjBox">
<van-uploader v-model="fjData" multiline :max-count="3" accept="" :after-read="afterReadFjsb"
:before-delete="beforeDeletefJ">
</van-uploader>
</div>
<li class="item">
<div class="itemlabel"><span class="mark"></span>附件列表</div>
</li>
<div class="fjBox">
<div v-for="(it, idex) in fileBoxs" :key="idex" class="listitem">
<span class="name">{{ it.name }}</span>
<span> <van-icon name="close" color="#ff0000" @click="deletDate(it, idex)"></van-icon> </span>
</div>
</div>
</ul>
<div class="footer">
<van-button round block type="primary" native-type="submit" :loading="isLoading" loading-type="spinner"
loading-text="登录中...">提交</van-button>
</div>
</div>
</van-form>
<!-- 弹窗 -->
<van-popup v-model:show="isShowCommonPicker" round position="bottom">
<van-picker :columns="columns" @cancel="isShowCommonPicker = false" @confirm="onConfirm" />
</van-popup>
<!-- 弹窗 -->
<Select v-if="showSelect" :checked="r_checked" :selectType="selectType" :show="showSelect"
:checkedList="hasCheckedList" @update:cancel="showSelect = false" @update:confirm="onComfirm"
:key="selectIndex" />
</div>
</template>
<script setup>
import { baseUrl2 } from "@/utils/request.js";
import ImageCompressor from "image-compressor.js";
import { upImage } from "@/api/common";
import Select from "./components/Select.vue";
import { hintToast, timeValidate } from "../../../utils/tools";
import { rwDetail, eidtRw, addRw } from "../../../api/xfgl.js";
import TopNav from "../../../components/topNav.vue";
import { useRouter, useRoute } from "vue-router";
import { getDictList, setDict } from "../../../utils/dict";
import { ref, onMounted, reactive, defineProps, nextTick } from "vue";
const { D_BZ_XFLX, D_BZ_RWZT, D_SB_SBLX } = getDictList("D_BZ_XFLX", "D_BZ_RWZT", "D_SB_SBLX");
const route = useRoute();
const router = useRouter();
const fileList = ref([]);
const fjData = ref([]) //附件
const normalForm = ref({
xfsj: timeValidate(),
sbsj: timeValidate(),
rwztmc: '正常',
rwzt: 0,
ssbmdm: JSON.parse(window.localStorage.getItem("userInfo")).deptList[0].deptCode
});
const sbsj = timeValidate()
const title = ref("新增巡防任务");
const clickType = ref(""); //点击选择
const columns = ref([]);
const time = ref();
const isShowCommonPicker = ref(false);
const showSelect = ref(false);
const selectType = ref(""); //选择的类型
const r_checked = ref(""); //选择的类型
const hasCheckedList = ref([]); //选择的类型
const selectIndex = ref(1); //选择器组件KEY
const wpTpIdList = ref([]);
const sbTpIdList = ref([]);
const isLoading = ref(false)
const fileBoxs = ref([]) //附件其他类型
const urlImg = `${baseUrl2}/mosty-api/mosty-base/minio/image/download/`;
const dataList = reactive({
fzrList: [], //巡访组长
nrList: [], //巡访内容
mjList: [], //组员民警
fjList: [], //组员辅警
xfdwList: [],//巡访单位
});
onMounted(() => {
title.value = route.query.id ? "编辑战果申报" : "新增战果申报";
if (route.query.id) {
nextTick(() => {
_getDetailById(); //根据id获取详情
});
}
});
// 打开弹窗
function showDialogfn(type) {
selectType.value = type; //选取的类型
showSelect.value = true; //打开弹窗
hasCheckedList.value = [];
r_checked.value = "";
selectIndex.value++;
hasChooseData();
}
// 已经选取的数据回显
function hasChooseData() {
switch (selectType.value) {
case "xfzz":
if (!dataList.fzrList.length) return false;
r_checked.value = dataList.fzrList[0].key;
break;
case "xfnr":
if (!dataList.nrList.length) return false;
r_checked.value = dataList.nrList[0].key;
break;
case "xfmj":
if (!dataList.mjList.length) return false;
hasCheckedList.value = dataList.mjList.map((item) => {
return item.key;
});
break;
case "xffj":
if (!dataList.fjList.length) return false;
hasCheckedList.value = dataList.fjList.map((item) => {
return item.key;
});
break;
case "xfdw":
if (!dataList.xfdwList.length) return false;
hasCheckedList.value = dataList.xfdwList.map((item) => {
return item.key;
});
break;
}
}
//确认选择
function onComfirm(val) {
if (val.length <= 0) return false;
switch (selectType.value) {
case "xfzz":
dataList.fzrList = val; //选取的负责人数据
normalForm.value.xfzzXm = val[0].xm;
normalForm.value.xfzzSfzh = val[0].sfzh;
break;
case "xfnr":
dataList.nrList = val; //巡防内容
normalForm.value.xfnr = val[0].nr;
break;
case "xfmj":
dataList.mjList = val; //选取的组员民警
normalForm.value.xfmj = val.map(v => { return v.xm }).join(',')
break;
case "xffj":
dataList.fjList = val; //选取的组员辅警
normalForm.value.xffj = val.map(v => { return v.xm }).join(',')
break;
case "xfdw":
dataList.xfdwList = val; //选取的单位
normalForm.value.sfdw = val.map(v => { return v.dwmc }).join(',')
normalForm.value.dz = val[0].dz
break;
}
}
//根据id获取详情
function _getDetailById() {
rwDetail(route.query.id).then((res) => {
let List = JSON.parse(res.xfzy);
dataList.mjList = List.filter(v => { return v.fl == '01' })
res.xfmj = dataList.mjList.map(it => { return it.xm }).join(',')
dataList.fjList = List.filter(v => { return v.fl == '02' })
res.xffj = dataList.fjList.map(it => { return it.xm }).join(',')
dataList.xfdwList = JSON.parse(res.xfdw)
res.sfdw = dataList.xfdwList.map(it => { return it.dwmc }).join(',')
res.dz = dataList.xfdwList.length > 0 ? dataList.xfdwList[0].dz : '';
let ids = res.xfzp ? res.xfzp.split(',') : []
fileList.value = []
wpTpIdList.value = []
ids.forEach(item => {
wpTpIdList.value.push(item)
let img = baseUrl2 + "/mosty-api/mosty-base/minio/image/download/" + item;
let obj = {
url: img,
codeId: item,
isImage: true,
status: "done",
message: "上传成功",
};
fileList.value.push(obj)
});
fjData.value = []
fileBoxs.value = []
sbTpIdList.value = []
let fjarr = res.sbfj ? JSON.parse(res.sbfj) : [];
let imgType = ['image/png', 'image/jpeg', 'image/jpg']
fjarr.forEach(item => {
sbTpIdList.value.push(item)
if (imgType.includes(item.type)) {
let img1 = baseUrl2 + "/mosty-api/mosty-base/minio/image/download/" + item.id;
let obj1 = {
url: img1,
codeId: item.id,
isImage: true,
status: "done",
message: "上传成功",
};
fjData.value.push(obj1)
} else {
fileBoxs.value.push(item)
}
})
normalForm.value = res;
setTimeout(() => {
D_SB_SBLX.value.forEach((element) => {
if (element.dm == res.sblx) normalForm.value.sblxmc = element.text;
});
D_BZ_XFLX.value.forEach((element) => {
if (element.dm == res.xflx) normalForm.value.xflxmc = element.text;
});
D_BZ_RWZT.value.forEach((element) => {
if (element.dm == res.rwzt) normalForm.value.rwztmc = element.text;
});
}, 500)
});
}
// 删除其他文件
function deletDate(it, idex) {
fileBoxs.value.splice(idex, 1)
let index = sbTpIdList.value.findIndex(item => {
return item.id == it.id
})
if (index != -1) sbTpIdList.value.splice(index, 1)
}
// 打开弹窗
function getCommonPop(val) {
clickType.value = val;
switch (val) {
case "xflx":
columns.value = D_BZ_XFLX.value;
break;
case "rwzt":
columns.value = D_BZ_RWZT.value;
break;
case "sblx":
columns.value = D_SB_SBLX.value;
break;
}
isShowCommonPicker.value = true;
}
// 确定选择
function onConfirm(val) {
isShowCommonPicker.value = false;
switch (clickType.value) {
case "xflx":
normalForm.value.xflxmc = val.text;
normalForm.value.xflx = val.dm;
break;
case "rwzt":
normalForm.value.rwztmc = val.text;
normalForm.value.rwzt = val.dm;
break;
case "sblx":
normalForm.value.sblx = val.dm;
normalForm.value.sblxmc = val.zdmc;
break;
}
}
// 删除神宝宝附件
const beforeDeletefJ = (url, val) => {
fjData.value.splice(val.index, 1)
let index = sbTpIdList.value.findIndex(item => {
return item.id == url.codeId
})
if (index != -1) sbTpIdList.value.splice(index, 1)
}
// 申报附件
async function afterReadFjsb(file) {
file.message = "上传中...";
let imgType = ['image/png', 'image/jpeg', 'image/jpg']
let type = file.file.type;
const data = new FormData();
if (imgType.includes(type)) {
let fileBlob = await _compressImage(file.file);
let fileData = new File([fileBlob], fileBlob.name, { type: fileBlob.type });
data.append("file", fileData);
} else {
data.append("file", file.file);
}
file.status = "uploading";
upImage(data).then((res) => {
file.status = "done";
file.message = "上传成功";
sbTpIdList.value.push({ id: res, type: type, name: file.file.name });
});
}
// 删除照片上传
const deleteFj = (url, val) => {
fileList.value.splice(val.index, 1)
wpTpIdList.value.splice(val.index, 1)
}
// 文件预览
async function afterRead(file) {
file.message = "上传中...";
let fileBlob = await _compressImage(file.file);
let fileData = new File([fileBlob], fileBlob.name, { type: fileBlob.type });
const data = new FormData();
data.append("file", fileData);
file.status = "uploading";
upImage(data).then((res) => {
file.status = "done";
file.message = "上传成功";
if (!wpTpIdList.value.includes(res)) wpTpIdList.value.push(res);
});
}
//压缩图片
const _compressImage = (file) => {
return new Promise((resolve, reject) => {
new ImageCompressor(file, {
quality: 0.6, //压缩质量
success(res) {
resolve(res);
},
error(e) {
reject(e);
},
});
});
};
// 提交
function onSubmit() {
let arr = [...dataList.mjList, ...dataList.fjList]
let params = {
...normalForm.value,
xfzy: JSON.stringify(arr),
xfdw: JSON.stringify(dataList.xfdwList),
}
params.xfzp = wpTpIdList.value.join(',')
params.sbfj = JSON.stringify(sbTpIdList.value)
isLoading.value = true;
if (title.value == '编辑战果申报') {
eidtRw(params).then(res => {
hintToast('编辑成功')
router.go(-1);
}).catch(() => {
isLoading.value = false
})
} else {
addRw(params).then(res => {
hintToast('新增成功')
router.go(-1);
}).catch(() => {
isLoading.value = false
})
}
}
</script>
<style lang="less" scoped>
.infoBox {
height: 100%;
position: relative;
.cardInfo {
height: calc(100vh - 13vw);
padding: 1vw 4vw;
box-sizing: border-box;
overflow: hidden;
overflow-y: auto;
.item {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
border-bottom: 1px solid #e5e5e5;
.itemlabel {
height: 30px;
line-height: 30px;
font-size: 14px;
color: #646566;
}
.mark {
margin: 0 10px;
font-size: 16px;
}
.text {
color: #767676;
}
}
.item::before {
position: absolute;
content: "";
left: 0;
top: 32%;
background: #0066ff;
width: 2px;
height: 12px;
z-index: 11;
}
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
text-align: center;
.btn {
padding: 2vw 6vw;
background: #1989fa;
color: #fff;
border-radius: 4px;
}
}
}
.textarea {
::v-deep .van-field__control {
background: #f8fafd;
padding-left: 4px;
}
}
.fjBox {
padding: 4vw;
box-sizing: border-box;
.listitem {
display: flex;
justify-content: space-between;
margin-bottom: 4vw;
font-size: 16px;
.name {
color: blue;
}
}
}
</style>

213
src/pages/views/Declaration/addEditCyry.vue Normal file
View File

@ -0,0 +1,213 @@
<template>
<div style="padding-top: 13vw">
<TopNav :navTitle="title" />
<van-form @submit="onSubmit" style="height: calc(100vh - 13vw);">
<div class="infoBox">
<ul class="cardInfo">
<li class="item">
<van-field v-model="normalForm.xm" required name="姓名" label="姓名" :disabled="disabled" placeholder="输入姓名"
input-align="right" :rules="[{ required: true, message: '请输入姓名' }]" />
</li>
<li class="item">
<van-field v-model="normalForm.sfzh" required :disabled="disabled" name="身份证号" label="身份证号"
placeholder="输入身份证号" input-align="right" :rules="sfzhRuls" />
</li>
<li class="item">
<van-field v-model="normalForm.xbmc" required :disabled="disabled" name="性别" label="性别" placeholder="请选择性别"
input-align="right" readonly :rules="[{ required: true, message: '请选择性别' }]"
@click="getCommonPop('sex')" />
</li>
<li class="item">
<van-field v-model="normalForm.csrq" :disabled="disabled" required name="出生日期" label="出生日期"
placeholder="点击设置" input-align="right" :rules="[{ required: true, message: '请选择出生日期' }]"
@click="getCommonPop('time')" />
</li>
<li class="item">
<van-field v-model="normalForm.lxdh" required name="联系电话" label="联系电话" placeholder="请输入联系电话"
input-align="right" :rules="lxdhRuls" />
</li>
<li class="item">
<van-field v-model="normalForm.xxdz" required name="现住址" label="现住址" placeholder="请输入住址名称"
input-align="right" :rules="[{ required: true, message: '请输入住址名称' }]" />
</li>
<li class="item">
<van-field name="备注" readonly label="备注" />
</li>
<div class="textarea">
<van-field placeholder="请输备注" v-model="normalForm.bz" rows="4" autosize maxlength="500" show-word-limit
type="textarea"></van-field>
</div>
</ul>
<div class="footer">
<van-button round block type="primary" native-type="submit" :loading="isLoading" loading-type="spinner"
loading-text="登录中...">提交</van-button>
</div>
</div>
</van-form>
</div>
<!-- 弹窗 -->
<van-popup v-model:show="isShowCommonPicker" round position="bottom">
<van-picker v-if="clickType == 'sex'" :columns="columns" @cancel="isShowCommonPicker = false" @confirm="onConfirm" />
<van-datetime-picker @cancel="isShowCommonPicker = false" @confirm="onConfirm" v-if="clickType == 'time'" v-model="time" type="date" title="选择年月日">
</van-datetime-picker>
</van-popup>
</template>
<script setup>
import { IdCardValidator, phoneValidator } from "../../../utils/rules.js"
import { cyryDetail, editDetail, addDetail } from "../../../api/xfgl.js";
import { useRouter, useRoute } from "vue-router";
import TopNav from "../../../components/topNav.vue";
import { hintToast, timeValidate } from "../../../utils/tools";
import { getDictList, setDict } from "../../../utils/dict";
import { ref, onMounted, reactive, defineProps } from "vue";
const { D_BZ_XB } = getDictList("D_BZ_XB");
const route = useRoute();
const router = useRouter();
const message = ref("");
const normalForm = ref({});
const columns = ref([]);
const time = ref();
const isLoading = ref(false);
const disabled = ref(false)
const isShowCommonPicker = ref(false);
const clickType = ref(""); //点击选择
const title = ref("新增人员");
const sfzhRuls = ref([
{ required: true, message: '身份证号码不能为空', trigger: 'onChange/onBlur' },
{ validator: (value) => { return IdCardValidator(value) }, trigger: 'onChange/onBlur' }
])
const lxdhRuls = ref([
{ required: true, message: '联系电话不能为空', trigger: 'onChange/onBlur' },
{ validator: (value) => { return phoneValidator(value) }, trigger: 'onChange/onBlur' }
])
onMounted(() => {
title.value = route.query.id ? "编辑人员" : "新增人员";
disabled.value = route.query.id ? true : false;
if (route.query.id) _getDetailById(); //根据id获取详情
});
//根据id获取详情
function _getDetailById() {
cyryDetail(route.query.id).then((res) => {
normalForm.value = res;
D_BZ_XB.value.forEach((element) => {
if (element.dm == res.xb) normalForm.value.xbmc = element.text;
});
});
}
// 选择性别
function getCommonPop(val) {
if (disabled.value) return false;
clickType.value = val;
switch (val) {
case "sex":
columns.value = D_BZ_XB.value;
break;
}
isShowCommonPicker.value = true;
}
// 确定选择
function onConfirm(val) {
isShowCommonPicker.value = false;
switch (clickType.value) {
case "sex":
normalForm.value.xbmc = val.text;
normalForm.value.xb = val.dm;
break;
case "time":
normalForm.value.csrq = timeValidate(val, "ymd");
break;
}
}
// 提交
function onSubmit() {
isLoading.value = true;
delete normalForm.value.xbmc
if (title.value == '编辑人员') {
editDetail(normalForm.value).then(res => {
hintToast('编辑成功')
router.go(-1);
})
} else {
addDetail(normalForm.value).then(res => {
hintToast('新增成功')
router.go(-1);
})
}
}
</script>
<style lang="less" scoped>
.infoBox {
height: 100%;
position: relative;
.cardInfo {
height: calc(100vh - 13vw);
padding: 1vw 4vw;
box-sizing: border-box;
overflow: hidden;
overflow-y: auto;
.item {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
// height: 8vw;
width: 100%;
border-bottom: 1px solid #e5e5e5;
.mark {
margin: 0 10px;
color: red;
font-size: 16px;
}
.text {
color: #767676;
}
}
.item::before {
position: absolute;
content: "";
left: 0;
top: 20%;
// transform: translateY(-50%);
background: #0066ff;
width: 2px;
height: 12px;
z-index: 11;
}
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
text-align: center;
.btn {
padding: 2vw 6vw;
background: #1989fa;
color: #fff;
border-radius: 4px;
}
}
}
.textarea {
::v-deep .van-field__control {
background: #f8fafd;
padding-left: 4px;
}
}
.fjBox {
padding: 4vw;
box-sizing: border-box;
}
</style>

348
src/pages/views/Declaration/addEditDw.vue Normal file
View File

@ -0,0 +1,348 @@
<template>
<div style="padding-top: 13vw">
<TopNav :navTitle="title" />
<van-form @submit="onSubmit" style="height: calc(100vh - 13vw);">
<div class="infoBox">
<ul class="cardInfo">
<li class="item">
<van-field v-model="normalForm.dwlxmc" required name="单位类型" label="单位类型" :disabled="disabled"
placeholder="请选择单位类型" input-align="right" readonly is-link
:rules="[{ required: true, message: '请选择单位类型' }]" @click="getCommonPop('dwlx')" />
</li>
<li class="item">
<van-field v-model="normalForm.dwmc" required name="单位名称" label="单位名称" :disabled="disabled"
placeholder="请输入单位名称" input-align="right" :rules="[{ required: true, message: '请输入单位名称' }]" />
</li>
<li class="item">
<van-field v-model="normalForm.dwflmc" required name="单位分类" label="单位分类" is-link :disabled="disabled"
placeholder="请选择单位分类" input-align="right" readonly :rules="[{ required: true, message: '请选择单位分类' }]"
@click="getCommonPop('dwfl')" />
</li>
<li class="item">
<van-field v-model="normalForm.lxdh" required :disabled="disabled" name="联系电话" label="联系电话"
placeholder="请输入联系电话" input-align="right" :rules="[{ required: true, message: '请输入联系电话' }]" />
</li>
<li class="item">
<van-field v-model="normalForm.dws" required :disabled="disabled" name="单位数" label="单位数"
placeholder="请输入单位数" input-align="right" type="digit" :rules="[{ required: true, message: '请输入单位数' }]" />
</li>
<li class="item">
<van-field v-model="normalForm.addreess" required :disabled="disabled" name="地址" label="地址" readonly />
<div @click="addDz"><van-icon name="location" color="#4788e1" size="6vw" /></div>
</li>
<ul>
<li class="item-li" v-for="(it, idx) in dzList" :key="idx">
<span class="text">地址{{ idx + 1 }}：</span>
<span class="info"><van-field v-model="it.dz" /></span>
<span @click="deletItem('dz', idx)" class="iconClose"><van-icon name="close" color="red" size="6vw" /></span>
</li>
</ul>
<li class="item">
<van-field v-model="normalForm.addreess" required :disabled="disabled" name="从业人员" label="从业人员" readonly />
<div @click="showDialogfn('cyry')"><van-icon name="add-o" color="#4788e1" size="6vw" /></div>
</li>
<ul>
<li class="item-li" v-for="(it, idx) in dataList.ryList" :key="idx">
<span class="text">人员：</span>
<span class="info"><van-field readonly v-model="it.info" /></span>
<span @click="deletItem('ry', idx)" class="iconClose"><van-icon name="close" color="red" size="6vw" /></span>
</li>
</ul>
<li class="item">
<van-field name="备注" readonly label="备注" />
</li>
<div class="textarea">
<van-field placeholder="请输备注" v-model="normalForm.bz" :disabled="disabled" rows="4" autosize maxlength="500" show-word-limit type="textarea"></van-field>
</div>
</ul>
<div class="footer">
<van-button round block type="primary" native-type="submit" :loading="isLoading" loading-type="spinner" loading-text="登录中...">提交</van-button>
</div>
</div>
</van-form>
</div>
<!-- 弹窗 -->
<van-popup v-model:show="isShowCommonPicker" round position="bottom">
<van-picker v-if="clickType == 'dwlx' || clickType == 'dwfl'" :columns="columns"
@cancel="isShowCommonPicker = false" @confirm="onConfirm" />
</van-popup>
<!-- 弹窗 -->
<Select v-if="showSelect" :checked="r_checked" :selectType="selectType" :show="showSelect"
:checkedList="hasCheckedList" @update:cancel="showSelect = false" @update:confirm="onComfirm" :key="selectIndex" />
</template>
<script setup>
import Select from "./components/Select.vue";
import { dwglDetail, editDwgl, addDwgl } from "../../../api/xfgl.js";
import { useRouter, useRoute } from "vue-router";
import TopNav from "../../../components/topNav.vue";
import { hintToast, timeValidate } from "../../../utils/tools";
import { getDictList, setDict } from "../../../utils/dict";
import { ref, onMounted, reactive, defineProps } from "vue";
const { D_BZ_DWLX, D_BZ_DWFL } = getDictList("D_BZ_DWLX", "D_BZ_DWFL");
const route = useRoute();
const router = useRouter();
const message = ref("");
const normalForm = ref({
ssbmdm: JSON.parse(window.localStorage.getItem("userInfo")).deptList[0].deptCode
});
const columns = ref([]);
const isLoading = ref(false);
const disabled = ref(false)
const isShowCommonPicker = ref(false);
const clickType = ref(""); //点击选择
const showSelect = ref(false);
const r_checked = ref(""); //选择的类型
const hasCheckedList = ref([]); //选择的类型
const selectIndex = ref(1); //选择器组件KEY
const title = ref("新增单位");
const dzList = ref([])
const selectType = ref('')
const dataList = reactive({
ryList: [], //人员
});
onMounted(() => {
title.value = route.query.id ? "编辑单位" : "新增单位";
// disabled.value = route.query.id ? true : false;
if (route.query.id) _getDetailById(); //根据id获取详情
});
//根据id获取详情
function _getDetailById() {
dwglDetail(route.query.id).then((res) => {
normalForm.value = res;
D_BZ_DWLX.value.forEach((element) => {
if (element.dm == res.dwlx) normalForm.value.dwlxmc = element.text;
});
D_BZ_DWFL.value.forEach((element) => {
if (element.dm == res.dwfl) normalForm.value.dwflmc = element.text;
});
let list = res.cyry ? JSON.parse(res.cyry) : []
dataList.ryList = list.map(item => {
if (!item.info) item.xm + '(' + item.sfzh + ')'
return item
})
hasCheckedList.value = dataList.ryList.map((item) => {
return item.key;
});
dzList.value = []
for (let key in res) {
if (key.search('dz') != -1) dzList.value.push({ dz: res[key] });
}
});
}
// 新增地址
function addDz() {
if (disabled.value) return false;
dzList.value.push({ dz: '' })
}
// 打开弹窗
function showDialogfn(type) {
if (disabled.value) return false;
selectType.value = type; //选取的类型
showSelect.value = true; //打开弹窗
hasCheckedList.value = [];
r_checked.value = "";
selectIndex.value++;
hasChooseData();
}
// 已经选取的数据回显
function hasChooseData() {
switch (selectType.value) {
case "cyry":
if (!dataList.ryList.length) return false;
hasCheckedList.value = dataList.ryList.map((item) => {
return item.key;
});
break;
}
}
//确认选择
function onComfirm(val) {
if (val.length <= 0) return false;
switch (selectType.value) {
case "cyry":
dataList.ryList = val.map(v => {
v.info = v.xm + '(' + v.sfzh + ')'
return v
}); //选取的组员
normalForm.value.cyry = JSON.stringify(val)
break;
}
}
// 选择
function getCommonPop(val) {
if (disabled.value) return false;
clickType.value = val;
switch (val) {
case "dwlx":
columns.value = D_BZ_DWLX.value;
break;
case "dwfl":
columns.value = D_BZ_DWFL.value;
break;
}
isShowCommonPicker.value = true;
}
// 确定选择
function onConfirm(val) {
isShowCommonPicker.value = false;
switch (clickType.value) {
case "dwlx":
normalForm.value.dwlxmc = val.text;
normalForm.value.dwlx = val.dm;
break;
case "dwfl":
normalForm.value.dwflmc = val.text;
normalForm.value.dwfl = val.dm;
break;
}
}
// 删除选择的人员-地址
function deletItem(type, index) {
if (disabled.value) return false;
switch (type) {
case 'dz':
dzList.value.splice(index, 1)
break;
case 'cyry':
dataList.ryList.splice(index, 1);
hasCheckedList.value = dataList.ryList.map((item) => {
return item.key;
});
normalForm.value.cyry = JSON.stringify(dataList.ryList)
break;
}
}
// 提交
function onSubmit() {
let pramas = {
...normalForm.value
}
dzList.value.forEach((item, idex) => {
if (idex > 0) {
pramas['dz' + idex] = item.dz
} else {
pramas['dz'] = item.dz
}
})
isLoading.value = true;
if (title.value == '编辑单位') {
editDwgl(pramas).then(res => {
hintToast('编辑成功')
router.push({ path: "/Declaration" });
})
} else {
addDwgl(pramas).then(res => {
hintToast('新增成功')
router.push({ path: "/Declaration" });
})
}
}
</script>
<style lang="less" scoped>
.infoBox {
height: 100%;
position: relative;
.cardInfo {
height: calc(100vh - 13vw);
padding: 1vw 4vw;
box-sizing: border-box;
overflow: hidden;
overflow-y: auto;
.item {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
// height: 8vw;
width: 100%;
border-bottom: 1px solid #e5e5e5;
.mark {
margin: 0 10px;
color: red;
font-size: 16px;
}
.text {
color: #767676;
}
}
.item::before {
position: absolute;
content: "";
left: 0;
top: 50%;
transform: translateY(-50%);
background: #0066ff;
width: 2px;
height: 12px;
z-index: 11;
}
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
text-align: center;
.btn {
padding: 2vw 6vw;
background: #1989fa;
color: #fff;
border-radius: 4px;
}
}
}
.item-li {
display: flex;
justify-content: space-between;
padding: 2vw 4vw;
box-sizing: border-box;
.info {
margin: 0 10px;
flex: 1;
::v-deep .van-cell__value {
background: #e5eff5;
padding-left: 10px;
box-sizing: border-box;
}
::v-deep .van-cell {
padding: 0;
}
}
.text {
color: #8b8b94;
width: 16vw;
}
.iconClose {
display: inline-block;
width: 6vw;
}
}
.textarea {
::v-deep .van-field__control {
background: #f8fafd;
padding-left: 4px;
}
}
</style>

386
src/pages/views/Declaration/addEditRw.vue Normal file
View File

@ -0,0 +1,386 @@
<template>
<div style="padding-top: 13vw">
<TopNav :navTitle="title" />
<van-form @submit="onSubmit" style="height: calc(100vh - 13vw);">
<div class="infoBox">
<ul class="cardInfo">
<li class="item">
<van-field v-model="normalForm.xfsj" required name="时间" is-link readonly label="时间" placeholder="点击设置"
input-align="right" :rules="[{ required: true, message: '请选择时间' }]" />
</li>
<li class="item">
<van-field v-model="normalForm.xfzzXm" required name="巡访主责人" is-link readonly label="巡访主责人"
placeholder="点击设置" input-align="right" :rules="[{ required: true, message: '请选择巡访主责人' }]"
@click="showDialogfn('xfzz')" />
</li>
<li class="item">
<van-field v-model="normalForm.xfzzSfzh" required name="身份证号" readonly input-align="right" label="身份证号"
:rules="[{ required: true, message: '请输入组长身份证号' }]" />
</li>
<li class="item">
<van-field v-model="normalForm.xfmj" name="巡访同行人(民警)" is-link label-width="108px" readonly label="巡访同行人(民警)"
placeholder="点击设置" input-align="right" @click="showDialogfn('xfmj')" />
</li>
<li class="item">
<van-field v-model="normalForm.xffj" name="巡访同行人(辅警)" is-link label-width="108px" readonly label="巡访同行人(辅警)"
placeholder="点击设置" input-align="right" @click="showDialogfn('xffj')" />
</li>
<li class="item">
<van-field v-model="normalForm.sfdw" name="巡访单位" is-link readonly label="巡访单位" placeholder="点击设置"
input-align="right" required :rules="[{ required: true, message: '请选择巡访单位' }]"
@click="showDialogfn('xfdw')" />
</li>
<li class="item">
<van-field v-model="normalForm.dz" required name="巡访地点" label="巡访地点" placeholder="输入地点" input-align="right"
:rules="[{ required: true, message: '请选择巡访地点' }]" />
</li>
<li class="item">
<van-field v-model="normalForm.xflxmc" required name="巡访类型" is-link readonly label="巡访类型" placeholder="点击设置"
input-align="right" :rules="[{ required: true, message: '请选择巡访类型' }]" @click="getCommonPop('xflx')" />
</li>
<li class="item">
<van-field v-model="normalForm.rwztmc" name="任务状态" is-link readonly label="任务状态" placeholder="选择任务状态"
input-align="right" @click="getCommonPop('rwzt')" />
</li>
<li class="item">
<van-field name="巡访内容" @click="showDialogfn('xfnr')" readonly label="巡访内容" />
</li>
<div class="textarea">
<van-field placeholder="请输相关内容" v-model="normalForm.xfnr" rows="4" autosize maxlength="500" show-word-limit type="textarea"></van-field>
</div>
<li class="item">
<div><span class="mark"></span>拍照打卡</div>
</li>
<!-- 附件 -->
<div class="fjBox">
<van-uploader v-model="fileList" multiline :max-count="3" :after-read="afterRead"></van-uploader>
</div>
</ul>
<div class="footer">
<van-button round block type="primary" native-type="submit" :loading="isLoading" loading-type="spinner" loading-text="登录中...">提交</van-button>
</div>
</div>
</van-form>
<!-- 弹窗 -->
<van-popup v-model:show="isShowCommonPicker" round position="bottom">
<van-picker :columns="columns" @cancel="isShowCommonPicker = false" @confirm="onConfirm" />
</van-popup>
<!-- 弹窗 -->
<Select v-if="showSelect" :checked="r_checked" :selectType="selectType" :show="showSelect"
:checkedList="hasCheckedList" @update:cancel="showSelect = false" @update:confirm="onComfirm"
:key="selectIndex" />
</div>
</template>
<script setup>
import { baseUrl2 } from "@/utils/request.js";
import ImageCompressor from "image-compressor.js";
import { upImage } from "@/api/common";
import Select from "./components/Select.vue";
import { hintToast, timeValidate } from "../../../utils/tools";
import { rwDetail, eidtRw, addRw } from "../../../api/xfgl.js";
import TopNav from "../../../components/topNav.vue";
import { useRouter, useRoute } from "vue-router";
import { getDictList, setDict } from "../../../utils/dict";
import { ref, onMounted, reactive, defineProps, nextTick } from "vue";
const { D_BZ_XFLX, D_BZ_RWZT } = getDictList("D_BZ_XFLX", "D_BZ_RWZT");
const route = useRoute();
const router = useRouter();
const fileList = ref([]);
const normalForm = ref({
xfsj: timeValidate(),
rwztmc: '正常',
rwzt: 0
});
const title = ref("新增巡防任务");
const clickType = ref(""); //点击选择
const columns = ref([]);
const time = ref();
const isShowCommonPicker = ref(false);
const showSelect = ref(false);
const selectType = ref(""); //选择的类型
const r_checked = ref(""); //选择的类型
const hasCheckedList = ref([]); //选择的类型
const selectIndex = ref(1); //选择器组件KEY
const wpTpIdList = ref([]);
const isLoading = ref(false)
const urlImg = `${baseUrl2}/mosty-api/mosty-base/minio/image/download/`;
const dataList = reactive({
fzrList: [], //巡访组长
nrList: [], //巡访内容
mjList: [], //组员民警
fjList: [], //组员辅警
xfdwList: [],//巡访单位
});
onMounted(() => {
title.value = route.query.id ? "编辑巡防任务" : "新增巡防任务";
if (route.query.id) {
nextTick(() => {
_getDetailById(); //根据id获取详情
});
}
});
// 打开弹窗
function showDialogfn(type) {
selectType.value = type; //选取的类型
showSelect.value = true; //打开弹窗
hasCheckedList.value = [];
r_checked.value = "";
selectIndex.value++;
hasChooseData();
}
// 已经选取的数据回显
function hasChooseData() {
switch (selectType.value) {
case "xfzz":
if (!dataList.fzrList.length) return false;
r_checked.value = dataList.fzrList[0].key;
break;
case "xfnr":
if (!dataList.nrList.length) return false;
r_checked.value = dataList.nrList[0].key;
break;
case "xfmj":
if (!dataList.mjList.length) return false;
hasCheckedList.value = dataList.mjList.map((item) => {
return item.key;
});
break;
case "xffj":
if (!dataList.fjList.length) return false;
hasCheckedList.value = dataList.fjList.map((item) => {
return item.key;
});
break;
case "xfdw":
if (!dataList.xfdwList.length) return false;
hasCheckedList.value = dataList.xfdwList.map((item) => {
return item.key;
});
break;
}
}
//确认选择
function onComfirm(val) {
if (val.length <= 0) return false;
switch (selectType.value) {
case "xfzz":
dataList.fzrList = val; //选取的负责人数据
normalForm.value.xfzzXm = val[0].xm;
normalForm.value.xfzzSfzh = val[0].sfzh;
break;
case "xfnr":
dataList.nrList = val; //巡防内容
normalForm.value.xfnr = val[0].nr;
break;
case "xfmj":
dataList.mjList = val; //选取的组员民警
normalForm.value.xfmj = val.map(v => { return v.xm }).join(',')
break;
case "xffj":
dataList.fjList = val; //选取的组员辅警
normalForm.value.xffj = val.map(v => { return v.xm }).join(',')
break;
case "xfdw":
dataList.xfdwList = val; //选取的单位
normalForm.value.sfdw = val.map(v => { return v.dwmc }).join(',')
normalForm.value.dz = val[0].dz
break;
}
}
//根据id获取详情
function _getDetailById() {
rwDetail(route.query.id).then((res) => {
let List = JSON.parse(res.xfzy);
dataList.mjList = List.filter(v => { return v.fl == '01' })
res.xfmj = dataList.mjList.map(it => { return it.xm }).join(',')
dataList.fjList = List.filter(v => { return v.fl == '02' })
res.xffj = dataList.fjList.map(it => { return it.xm }).join(',')
D_BZ_XFLX.value.forEach((element) => {
if (element.dm == res.xflx) res.xflxmc = element.text;
});
D_BZ_RWZT.value.forEach((element) => {
if (element.dm == res.rwzt) res.rwztmc = element.text;
});
dataList.xfdwList = JSON.parse(res.xfdw)
res.sfdw = dataList.xfdwList.map(it => { return it.dwmc }).join(',')
res.dz = dataList.xfdwList.length > 0 ? dataList.xfdwList[0].dz : '';
let ids = res.xfzp.split(',')
fileList.value = []
ids.forEach(item => {
let img = baseUrl2 + "/mosty-api/mosty-base/minio/image/download/" + item;
let obj = {
url: img,
codeId: item,
isImage: true,
status: "done",
message: "上传成功",
};
fileList.value.push(obj)
});
normalForm.value = res;
});
}
// 打开弹窗
function getCommonPop(val) {
clickType.value = val;
switch (val) {
case "xflx":
columns.value = D_BZ_XFLX.value;
break;
case "rwzt":
columns.value = D_BZ_RWZT.value;
break;
}
isShowCommonPicker.value = true;
}
// 确定选择
function onConfirm(val) {
isShowCommonPicker.value = false;
switch (clickType.value) {
case "xflx":
normalForm.value.xflxmc = val.text;
normalForm.value.xflx = val.dm;
break;
case "rwzt":
normalForm.value.rwztmc = val.text;
normalForm.value.rwzt = val.dm;
break;
}
}
// 文件预览
async function afterRead(file) {
file.message = "上传中...";
let fileBlob = await _compressImage(file.file);
let fileData = new File([fileBlob], fileBlob.name, { type: fileBlob.type });
const data = new FormData();
data.append("file", fileData);
file.status = "uploading";
upImage(data).then((res) => {
file.status = "done";
file.message = "上传成功";
if (!wpTpIdList.value.includes(res)) wpTpIdList.value.push(res);
});
}
//压缩图片
const _compressImage = (file) => {
return new Promise((resolve, reject) => {
new ImageCompressor(file, {
quality: 0.6, //压缩质量
success(res) {
resolve(res);
},
error(e) {
reject(e);
},
});
});
};
// 提交
function onSubmit() {
let arr = [...dataList.mjList, ...dataList.fjList]
let params = {
...normalForm.value,
xfzy: JSON.stringify(arr),
xfdw: JSON.stringify(dataList.xfdwList),
}
let ids1 = fileList.value.filter(item => { return item.codeId }).map(v => { return v.codeId })
let ids2 = wpTpIdList.value.join(',')
params.xfzp = (ids1.concat(ids2)).join(',')
isLoading.value = true;
if (title.value == '编辑巡防任务') {
eidtRw(params).then(res => {
hintToast('编辑成功')
router.go(-1);
})
} else {
addRw(params).then(res => {
hintToast('新增成功')
router.go(-1);
})
}
}
</script>
<style lang="less" scoped>
.infoBox {
height: 100%;
position: relative;
.cardInfo {
height: calc(100vh - 13vw);
padding: 1vw 4vw;
box-sizing: border-box;
overflow: hidden;
overflow-y: auto;
.item {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
border-bottom: 1px solid #e5e5e5;
.mark {
margin: 0 10px;
color: red;
font-size: 16px;
}
.text {
color: #767676;
}
}
.item::before {
position: absolute;
content: "";
left: 0;
top: 32%;
background: #0066ff;
width: 2px;
height: 12px;
z-index: 11;
}
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
text-align: center;
.btn {
padding: 2vw 6vw;
background: #1989fa;
color: #fff;
border-radius: 4px;
}
}
}
.textarea {
::v-deep .van-field__control {
background: #f8fafd;
padding-left: 4px;
}
}
.fjBox {
padding: 4vw;
box-sizing: border-box;
}
</style>

327
src/pages/views/Declaration/components/Select.vue Normal file
View File

@ -0,0 +1,327 @@
<template>
<van-popup v-model:show="props.show" style="width: 90%">
<div class="popupTitle">{{ popupTitle }}</div>
<van-search v-model="kwd" :placeholder="placeholder" @search="onUpdate" @clear="onClear" />
<div class="check-data-box" ref="listBox" :loading="loading">
<!-- 单选 -->
<van-radio-group v-model="radioChecked" v-if="isRadio">
<van-cell-group>
<van-cell v-for="item in list.mulChooseList" clickable :key="item" :title="`${item.value}`" :border="false">
<template #right-icon>
<van-radio :name="item.key" @click="onRadionChange(item.key)" />
</template>
</van-cell>
</van-cell-group>
</van-radio-group>
<!-- 多选 -->
<van-checkbox-group v-model="checkedLists" v-else @change="onCheckboxnChange">
<van-cell-group>
<van-cell v-for="item in list.mulChooseList" clickable :key="item" :title="`${item.value}`">
<template #right-icon>
<van-checkbox shape="square" :name="item.key" />
</template>
<template #label v-if="title === '选择警用器械'">
数量：
<van-stepper v-model="item.sl" integer />
</template>
</van-cell>
</van-cell-group>
</van-checkbox-group>
<van-empty description="没有数据" image="default" v-if="list.mulChooseList.length <= 0 && showEmpty" />
</div>
<div class="popbtn-box">
<van-button style="flex: 1" type="default" @click="onCancel">取消
</van-button>
<van-button style="flex: 1" type="primary" @click="onConfirm">确定</van-button>
</div>
</van-popup>
</template>
<script setup>
import { getBBData } from "@/api/xfbbAndZbbb.js";
import { defineProps, ref, defineEmits, watch, reactive, onMounted } from "vue";
import { dateFormat, hintToast } from "@/utils/tools";
const props = defineProps({
selectType: String, //查询的类型 详情见watch 监听
show: Boolean, //是否显示
checkedList: Array, //默认选中 多选
checked: String, //单选
});
const emits = defineEmits([
"update:cancel",
"update:confirm",
"update:kwd",
"update:tabs",
"update:tag",
]);
const hasChoosZb = ref([]);
const listBox = ref(null);
const page = ref(1);
const size = ref(10);
const total = ref(0);
const radioChecked = ref("");
const checkedLists = ref([]);
const loading = ref(false);
const finished = ref(false);
const selectObj = ref([]); //选中的数据
const tagCode = ref(""); //智能设备选中状态
const placeholder = ref(""); //占位字符
const showEmpty = ref(false);
const kwd = ref(""); //选择器关键字
const selectType = ref(""); //选择的类型
const znzbCode = ref(""); //智能装备类型筛选
const popupTitle = ref(""); //标题
const isRadio = ref(false); //是否是单选
const list = reactive({
mulChooseList: []
});
watch(
() => props.selectType,
(newValue) => {
checkedLists.value = props.checkedList;
radioChecked.value = props.checked;
},
{ immediate: true, deep: true }
);
onMounted(() => {
_getSelectData(props.selectType);
scroll();
});
//触底加载
function scroll() {
let scrollTargetBox = listBox.value;
if (!scrollTargetBox) return false;
scrollTargetBox.onscroll = (e) => {
var scrollHeight = scrollTargetBox.scrollHeight; //251
var scrollTop = scrollTargetBox.scrollTop; //0-18
var clientHeight = scrollTargetBox.clientHeight; //233
if (scrollHeight - clientHeight == scrollTop) {
//滚动条滚到最底部
if (list.mulChooseList.length < total.value) {
page.value++;
_getSelectData(props.selectType);
}
}
};
}
//获取数据
function _getSelectData(val) {
let obj = {}; //亲求路径及参数
switch (val) {
case "xfzz":
case "xfmj":
case "xffj":
popupTitle.value = "选择民警";
placeholder.value = "请输入姓名";
obj["url"] = "/mosty-jcgl/tbJcglXfll/getXfllList";
obj["jllx"] = "01";
if (val == 'xffj') {
popupTitle.value = "选择辅警";
obj["jllx"] = "02";
}
isRadio.value = false;
if (val == "xfzz") isRadio.value = true;
break;
case "xfdw":
popupTitle.value = "选择巡访单位";
placeholder.value = "请输入单位名称";
obj["url"] = "/mosty-jcgl/tbJcglXfDwgl";
isRadio.value = false;
break;
case "xfnr":
popupTitle.value = "选择巡访内容";
placeholder.value = "请输入巡访内容";
obj["url"] = "/mosty-jcgl/tbJcglXfNrmb";
isRadio.value = true;
break;
case "cyry":
popupTitle.value = "选择从业人员";
placeholder.value = "选择从业人员";
obj["url"] = "/mosty-jcgl/tbJcglXfCyry";
isRadio.value = false;
break;
}
if (Object.keys(obj).length > 0) _getBBData(obj, val);
}
//获取数据
function _getBBData(obj, type) {
//url 请求地址，jllx 警力类型 有需要就传，scode 智能装备筛选条件 有需要就传
let { url, jllx, xz } = obj;
loading.value = true;
let data = { keyword: kwd.value, jllx, pageCurrent: page.value, pageSize: size.value };
if (type == 'xfnr') {
data = { nr: kwd.value, pageCurrent: page.value, pageSize: size.value }
}
getBBData(url, data)
.then((res) => {
loading.value = false;
total.value = res.total;
if (jllx) {
if (res && res.records && res.records.length > 0) {
_setData(res.records, type);
} else {
showEmpty.value = true;
}
} else {
if (res && res.length > 0 && !res.records) {
_setData(res, type);
} else if (res && res.records) {
_setData(res.records, type);
} else {
showEmpty.value = true;
}
}
})
.catch((err) => {
loading.value = false;
showEmpty.value = true;
});
}
//搜索关键词
function onUpdate(val) {
page.value = 1;
list.mulChooseList = [];
_getSelectData(props.selectType);
}
//清空关键字
function onClear() {
list.mulChooseList = [];
_getSelectData(props.selectType);
}
//关闭弹窗
function onCancel() {
emits("update:cancel", false);
}
//点击单选
function onRadionChange(val) {
_backData(val);
}
//点击多选
function onCheckboxnChange(val) {
_backData(val);
}
//确认选择
function onConfirm() {
emits("update:confirm", selectObj.value);
emits("update:cancel", false);
}
//处理返回父组件数据
function _backData(val) {
if (typeof val == "string") {
//单选数据
let obj = list.mulChooseList.find((item) => {
return item.key == val;
});
selectObj.value = [obj];
} else {
//多选数据
let arr = [];
for (let i = 0; i < val.length; i++) {
for (let j = 0; j < list.mulChooseList.length; j++) {
if (val[i] == list.mulChooseList[j].key) {
arr.push(list.mulChooseList[j]);
}
}
}
selectObj.value = arr;
}
}
//设置数据
function _setData(res, type) {
for (let i = 0; i < res.length; i++) {
switch (type) {
case "xfzz":
case "xfzy":
case "xfmj":
res[i].value = `${res[i].ssbm}-${res[i].xm}`;
res[i].key = res[i].ryid;
break;
case "xffj":
res[i].value = `${res[i].ssbm}-${res[i].xm}`;
res[i].key = res[i].id;
break;
case "xfdw":
res[i].value = `${res[i].dwmc}（电话：${res[i].lxdh}）`;
res[i].key = res[i].id;
break;
case "xfnr":
res[i].value = `${res[i].nr}`;
res[i].key = res[i].id;
break;
case "cyry":
res[i].value = `${res[i].xm}（${res[i].sfzh}）`;
res[i].key = res[i].id;
break;
}
}
if (page.value == 1) {
list.mulChooseList = res;
} else {
list.mulChooseList = list.mulChooseList.concat(res);
}
loading.value = false;
}
</script>
<style lang="scss" scoped>
@import "@/assets/styles/mixin.scss";
.popupTitle {
text-align: center;
background-color: rgb(11, 137, 247);
height: 6vh;
line-height: 6vh;
color: #fff;
}
.popbtn-box {
width: 100%;
display: flex;
justify-content: space-around;
padding-top: 2vw;
}
.check-data-box {
height: 100vw;
overflow: auto;
}
::v-deep .van-stepper__input {
width: 100px;
}
.zn_tag_select {
padding: 2vw 3.5vw;
display: flex;
align-items: center;
.squre {
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #cccccc;
border-radius: 4px;
margin-left: 10px;
text-align: center;
line-height: 20px;
}
.isActiveAll {
background: #1989fa;
}
}
::v-deep .van-cell {
align-items: flex-start;
}
::v-deep .van-cell__title,
.van-cell__value {
margin-right: 1vw;
}
</style>

71
src/pages/views/Declaration/components/cyryItem.vue Normal file
View File

@ -0,0 +1,71 @@
<template>
<van-swipe-cell>
<div class="XFItem-box">
<div class="name">
{{props.data.xm}}
<span v-for="v in props.dic.D_BZ_XB " :key="v">
<span class="xb" v-if="v.dm == props.data.xb">{{v.text}}</span>
</span>
</div>
<div class="text">
身份证号：<span class="mess">{{props.data.sfzh}}</span>
</div>
<div class="text">籍贯：<span class="mess">{{props.data.jg}}</span></div>
<div class="text">联系电话：<span class="mess">{{props.data.lxdh}}</span></div>
</div>
<template #right>
<van-button style="height: 100%; width: 60px" type="primary" @click="gotoEdit">编辑</van-button>
<van-button style="height: 100%; width: 60px" type="danger" @click="deleteItem" >删除</van-button>
</template>
</van-swipe-cell>
</template>
<script setup>
import { useRouter } from "vue-router";
import { ref, onMounted, reactive, defineEmits, defineProps } from "vue";
const emits = defineEmits(["deletedata"]);
const router = useRouter();
const props = defineProps({
data: {
type: Object,
default: {},
},
dic:{
type: Object,
default: {},
}
});
// 编辑
function gotoEdit() {
localStorage.setItem('XF_Active',0)
router.push({ path: "/Declaration/addEditCyry", query: { id: props.data.id } });
}
// 删除
function deleteItem() {
emits("deletedata", props.data.id);
}
</script>
<style lang="scss" scoped>
.XFItem-box {
padding: 3vw 4vw;
box-sizing: border-box;
background-color: #f6fafd;
position: relative;
.name {
color: #4788e1;
line-height: 6vw;
.xb {
margin: 0 14px;
}
}
.text {
color: #9f9f9f;
line-height: 6vw;
.mess {
color: #000;
}
}
}
</style>

96
src/pages/views/Declaration/components/dwglItem.vue Normal file
View File

@ -0,0 +1,96 @@
<template>
<van-swipe-cell>
<div class="XFItem-box">
<div class="item-tip" :class="changeBq(props.data.dwlx)">{{ setDict(props.data.dwlx, props.dic.D_BZ_DWLX) }}</div>
<div class="text">归属单位：<span class="mess">{{props.data.dwmc}}</span></div>
<div class="text">单位名称：<span class="mess">{{props.data.ssbm}}</span></div>
<div class="text">单位地址：<span class="mess">{{props.data.dz}}</span></div>
<div class="text">单位分类：<span class="mess">{{ setDict(props.data.dwfl, props.dic.D_BZ_DWFL) }}</span></div>
</div>
<template #right>
<van-button style="height:100%;width:60px;" type="primary" @click="gotoEdit">编辑</van-button>
<van-button style="height:100%;width:60px;" type="danger" @click="deleteItem">删除</van-button>
</template>
</van-swipe-cell>
</template>
<script setup>
import { useRouter } from "vue-router";
import { setDict } from "../../../../utils/dict";
import { ref, onMounted, reactive, defineEmits,defineProps } from "vue";
const emits = defineEmits(['deletedata'])
const router = useRouter();
const props = defineProps({
data:{
type:Object,
default:{}
},
dic:{
type:Object,
default:{}
}
});
// 编辑
function gotoEdit(){
localStorage.setItem('XF_Active',1)
router.push({path: "/Declaration/addEditDw", query: {id:props.data.id}});
}
// 删除
function deleteItem(){
emits('deletedata',props.data.id)
}
// 标签
function changeBq(val){
switch(val){
case '02':
return 'green';
break;
case '01':
return 'blue';
break;
default:
return 'blue';
}
}
</script>
<style lang="scss" scoped>
.XFItem-box {
padding: 3vw 4vw;
box-sizing: border-box;
background-color: #f6fafd;
position: relative;
.item-tip {
position: absolute;
top: 0;
right: 0;
width: 60px;
height: 26px;
color: #fff;
text-align: center;
line-height: 26px;
font-size: 14px;
}
.red {
background: url("../../../../assets/images/red.png") no-repeat;
}
.green {
background: url("../../../../assets/images/green.png") no-repeat;
}
.blue {
background: url("../../../../assets/images/blue.png") no-repeat;
}
.orange {
background: url("../../../../assets/images/orange.png") no-repeat;
}
.text {
color: #9f9f9f;
line-height: 6vw;
.mess {
color: #000;
}
}
}
</style>

81
src/pages/views/Declaration/components/rwItem.vue Normal file
View File

@ -0,0 +1,81 @@
<template>
<van-swipe-cell>
<div class="XFItem-box">
<div class="time"><van-icon name="clock-o" />{{props.data.xfsj}}</div>
<div class="text">巡防主责人：<span class="mess">{{props.data.xfzzXm}}</span></div>
<div class="text">巡防商铺：
<span class="mess">
<span class="tag" v-for="it in props.data.xfdw" :key="it.id" style="margin:0 4px;">{{it.dwmc}}</span>
</span>
</div>
<div class="text">巡防类型：
<span class="mess">{{ setDict(props.data.xflx, props.dic.D_BZ_XFLX) }}</span></div>
<div class="text text_detail">
巡防内容：<span class="mess">{{props.data.xfnr}}</span>
</div>
</div>
<template #right>
<van-button style="height:100%;width:60px;" type="primary" @click="gotoEdit">编辑</van-button>
<van-button style="height:100%;width:60px;" type="danger" @click="deleteItem">删除</van-button>
</template>
</van-swipe-cell>
</template>
<script setup>
import { setDict } from "../../../../utils/dict";
import { useRouter } from "vue-router";
import { ref, onMounted, reactive, defineEmits,defineProps } from "vue";
const emits = defineEmits(['deletedata'])
const router = useRouter();
const props = defineProps({
data:{
type:Object,
default:{}
},
dic:{
type:Object,
default:{}
}
});
// 编辑
function gotoEdit(){
localStorage.setItem('XF_Active',2)
router.push({path: "/Declaration/addEditRw", query: {id:props.data.id}});
}
// 删除
function deleteItem(){
emits('deletedata',props.data.id)
}
</script>
<style lang="scss" scoped>
.XFItem-box {
padding: 3vw 4vw;
box-sizing: border-box;
background-color: #f6fafd;
position: relative;
.time {
font-size: 16px;
line-height: 5vw;
.van-icon-clock-o {
margin-right: 2vw;
font-size: 16px;
}
}
.text {
color: #9f9f9f;
line-height: 6vw;
.mess {
color: #000;
}
}
}
.tag{
border: 1px solid #5e9fdd;
border-radius: 4px;
font-size: 14px;
color: #409eff;
padding: 1px 4px;
}
</style>

110
src/pages/views/Declaration/components/zgItem copy.vue Normal file
View File

@ -0,0 +1,110 @@
<template>
<van-swipe-cell>
<div class="XFItem-box">
<!-- <div class="item-tip" :class="changeBq(props.data.lx)">{{props.data.ztmc}}</div> -->
<div class="time"><van-icon name="clock-o" />{{props.data.sbsj}}</div>
<div class="text">申报类型：<span class="mess">{{ setDict(props.data.sblx, props.dic.D_SB_SBLX) }}</span></div>
<div class="text text_detail">
申报内容：<span class="mess">{{props.data.sbyy}}</span>
</div>
</div>
<template #right>
<van-button style="height:100%;width:60px;" type="primary" @click="gotoEdit">编辑</van-button>
<van-button style="height:100%;width:60px;" type="danger" @click="deleteItem">删除</van-button>
</template>
</van-swipe-cell>
</template>
<script setup>
import { useRouter } from "vue-router";
import { setDict } from "../../../../utils/dict";
import { ref, onMounted, reactive, defineEmits,defineProps } from "vue";
const emits = defineEmits(['deletedata'])
const router = useRouter();
const props = defineProps({
data:{
type:Object,
default:{lx:0}
} ,
dic:{
type:Object,
default:{}
}
});
// 标签
function changeBq(val){
switch(val){
case 0:
return 'orange';
break;
case 1:
return 'green';
break;
case 2:
return 'red';
break;
case 3:
return 'blue';
break;
default:
return 'blue';
}
}
// 编辑
function gotoEdit(){
localStorage.setItem('XF_Active',3)
router.push({path: "/Declaration/addEdit", query: {id:props.data.id}});
}
// 删除
function deleteItem(){
emits('deletedata',props.data.id)
}
</script>
<style lang="scss" scoped>
.XFItem-box {
padding: 3vw 4vw;
box-sizing: border-box;
background-color: #f6fafd;
position: relative;
.time {
font-size: 16px;
line-height: 5vw;
.van-icon-clock-o {
margin-right: 2vw;
font-size: 16px;
}
}
.text {
color: #9f9f9f;
line-height: 6vw;
.mess {
color: #000;
}
}
.item-tip {
position: absolute;
top: 0;
right: 0;
width: 60px;
height: 26px;
color: #fff;
text-align: center;
line-height: 26px;
font-size: 14px;
}
.red {
background: url("../../../../assets/images/red.png") no-repeat;
}
.green {
background: url("../../../../assets/images/green.png") no-repeat;
}
.blue {
background: url("../../../../assets/images/blue.png") no-repeat;
}
.orange {
background: url("../../../../assets/images/orange.png") no-repeat;
}
}
</style>

100
src/pages/views/Declaration/components/zgItem.vue Normal file
View File

@ -0,0 +1,100 @@
<template>
<van-swipe-cell>
<div class="XFItem-box" @click.stop="handleItem(props.data)">
<div class="isCheck" v-show="props.data.isCheck" :class="props.data.isCheck ? 'isCheck-y':''"><van-icon name="success" color="#ffffff"></van-icon></div>
<div class="time"><van-icon name="clock-o" />{{props.data.xfsj}}</div>
<div class="text">巡防主责人：<span class="mess">{{props.data.xfzzXm}}</span></div>
<div class="text">巡防商铺：
<span class="mess">
<span class="tag" v-for="it in props.data.xfdw" :key="it.id" style="margin:0 4px;">{{it.dwmc}}</span>
</span>
</div>
<div class="text">巡防类型：
<span class="mess">{{ setDict(props.data.xflx, props.dic.D_BZ_XFLX) }}</span></div>
<div class="text text_detail">
巡防内容：<span class="mess">{{props.data.xfnr}}</span>
</div>
</div>
<template #right>
<van-button style="height:100%;width:60px;" type="primary" @click="gotoEdit">编辑</van-button>
<van-button style="height:100%;width:60px;" type="danger" @click="deleteItem">删除</van-button>
</template>
</van-swipe-cell>
</template>
<script setup>
import { setDict } from "../../../../utils/dict";
import { useRouter } from "vue-router";
import { ref, onMounted, reactive, defineEmits,defineProps } from "vue";
const emits = defineEmits(['deletedata','chooseData'])
const router = useRouter();
const props = defineProps({
data:{
type:Object,
default:{}
},
dic:{
type:Object,
default:{}
}
});
// 编辑
function gotoEdit(){
localStorage.setItem('XF_Active',3)
router.push({path: "/Declaration/addEdit", query: {id:props.data.id}});
}
// 删除
function deleteItem(){
emits('deletedata',props.data.id)
}
// 点击
function handleItem(item){
emits('chooseData',item)
}
</script>
<style lang="scss" scoped>
.XFItem-box {
padding: 3vw 4vw;
box-sizing: border-box;
background-color: #f6fafd;
position: relative;
.isCheck{
position: absolute;
top: 0vw;
right: 0vw;
width: 6vw;
height: 6vw;
border-radius: 50%;
border: 1px solid #c8c9cc;
text-align: center;
line-height: 6vw;
}
.isCheck-y{
background: #1989fa;
}
.time {
font-size: 16px;
line-height: 5vw;
.van-icon-clock-o {
margin-right: 2vw;
font-size: 16px;
}
}
.text {
color: #9f9f9f;
line-height: 6vw;
.mess {
color: #000;
}
}
}
.tag{
border: 1px solid #5e9fdd;
border-radius: 4px;
font-size: 14px;
color: #409eff;
padding: 1px 4px;
}
</style>

515
src/pages/views/Declaration/index.vue Normal file
View File

@ -0,0 +1,515 @@
<template>
<div class="container">
<TopNav navTitle="巡访管理" :rightTitle="rightTitle" @clickRight="clickRight" />
<div>
<Tabs :checked="isActive" :list="zdModule" @onYjjb="changeTab" />
<Search placeholder="请输入关键字" v-model="keyWord" :isSx="true" @update:sx="handleSx" @update:modelValue="onSearch">
</Search>
<SxPopup :showPopup="showPopup" :list="sxList" :p_top="145" :showTime="isShowTime" @update:close="showPopup = false" @update:onConfirm="onConfirm" @reset="reset">
</SxPopup>
<!-- 列表数据 -->
<ul class="listBox" :loading="isLoading" ref="dateScroll">
<li style="margin-bottom: 2vw" v-for="(item, idex) in list" :key="idex">
<CyryItem v-if="isActive == 0" @deletedata="deletedata" :dic="{ D_BZ_XB }" :data="item" />
<DwglItem v-if="isActive == 1" @deletedata="deletedata" :dic="{ D_BZ_DWLX, D_BZ_DWFL }" :data="item" />
<RwItem v-if="isActive == 2" @deletedata="deletedata" :data="item" :dic="{ D_BZ_XFLX }" />
<ZgItem v-if="isActive == 3" @deletedata="deletedata" @chooseData="chooseData" :data="item"
:dic="{ D_BZ_XFLX }" />
<!-- <ZgItem v-if="isActive == 3" @deletedata="deletedata" :data="item" :dic="{D_SB_SBLX}" /> -->
</li>
</ul>
</div>
</div>
</template>
<script setup>
import TopNav from "../../../components/topNav.vue";
import Tabs from "../../../components/tabs.vue";
import Search from "../../../components/search.vue";
import SxPopup from "../../../components/SxPopupNew.vue";
import ZgItem from "./components/zgItem.vue";
import CyryItem from "./components/cyryItem.vue";
import RwItem from "./components/rwItem.vue";
import DwglItem from "./components/dwglItem.vue";
import { useRouter, useRoute } from "vue-router";
import { Dialog, Notify } from "vant";
import { getdataCyry, deletedataCyry, getdataDwgl, deletedataDw, deletedataZg, getdataRw, plsbData, deletedataRw, getdataZg } from "../../../api/xfgl.js";
import { getDictList, setDict } from "../../../utils/dict";
import { setTimeQuantum, dateFormat, hintToast } from "../../../utils/tools.js";
import { ref, reactive, watch, onMounted, nextTick } from "vue";
const { D_BZ_XB, D_BZ_DWFL, D_BZ_DWLX, D_BZ_XFLX, D_SB_SBLX } = getDictList("D_BZ_XB", "D_BZ_DWFL", "D_BZ_DWLX", "D_BZ_XFLX", "D_SB_SBLX");
const router = useRouter();
const route = useRoute();
const dateScroll = ref(null)
const isLoading = ref(false) //加载
const zdModule = ref([
{ name: "从业人员管理" },
{ name: "单位管理" },
{ name: "巡防任务" },
{ name: "战果管理" },
]);
const keyWord = ref(""); //关键字搜索
const showPopup = ref(false); //赛选条件窗口
const dateForm = ref({
sblxmc: "",
sblxdm: "",
});
const isShowTime = ref(true);
const selectList = ref([]); //选择类型
const List1 = ref([
{ label: "类型1", value: "01" },
{ label: "类型2", value: "02" },
{ label: "类型3", value: "03" },
]);
const chooseType = ref(false); //选择类型
const rightTitle = ref('新增')
const sxList = ref([]); //筛选条件数据
const pageCurrent = ref(1); //分页
const total = ref(0); //总数
const showEmpty = ref(false); //数据状态
const list = ref([]); //列表数据
const searchDate = ref({}); //查询条件
const isActive = ref(); //当前位置
const haschooseList = ref([]) //已选中的数据
onMounted(() => {
let ac = localStorage.getItem('XF_Active')
isActive.value = ac ? parseInt(ac) : 0;
rightTitle.value = isActive.value == 3 ? '批量申报' : '新增'
nextTick(() => { getOtherDate(); })
scroll()
});
//触底加载
function scroll() {
let scrollTargetBox = dateScroll.value;
if (!scrollTargetBox) return false;
scrollTargetBox.onscroll = (e) => {
var scrollHeight = scrollTargetBox.scrollHeight; //251
var scrollTop = scrollTargetBox.scrollTop; //0-18
var clientHeight = scrollTargetBox.clientHeight; //233
if (scrollHeight - clientHeight == scrollTop) {
//滚动条滚到最底部
if (list.value.length < total.value) {
pageCurrent.value++;
getOtherDate(); //根据不同类型掉接口
}
}
};
}
// 处理筛选
function handleSx() {
isShowTime.value = true;
switch (isActive.value) {
case 0: //从业人员管理
isShowTime.value = false;
sxList.value = [
{
title: "身份证号",
type: "input",
lebel: "sfzh",
placeholder: "请输入身份证号",
},
{
title: "姓名",
type: "input",
lebel: "xm",
placeholder: "请输入姓名",
},
];
break;
case 1: //单位管理
D_BZ_DWFL.value.forEach((element) => {
element.isCheck = false;
element.key = element.dm;
});
D_BZ_DWLX.value.forEach((element) => {
element.isCheck = false;
element.key = element.dm;
});
isShowTime.value = false;
sxList.value = [
{
title: "单位名称",
type: "input",
lebel: "dwmc",
placeholder: "请输入单位名称",
},
{
title: "单位分类",
isCheckBox: false,
type: "checkBox",
lebel: "dwfl",
array: D_BZ_DWFL.value,
},
{
title: "单位类型",
isCheckBox: false,
type: "checkBox",
lebel: "dwlx",
array: D_BZ_DWLX.value,
},
];
break;
case 2: //寻巡访任务
D_BZ_XFLX.value.forEach((element) => {
element.isCheck = false;
element.key = element.dm;
});
sxList.value = [
{ type: "checkBox", ...setTimeQuantum() },
{
type: "checkBox",
title: "巡防类型",
array: D_BZ_XFLX.value,
},
];
break;
case 3: //战果申报
sxList.value = [
{ type: "checkBox", ...setTimeQuantum() },
{
title: "申报类型",
type: "checkBox",
lebel: "sblx",
array: [
{ isCheck: false, name: "类型1", value: "01", key: "fl1" },
{ isCheck: false, name: "类型2", value: "02", key: "fl2" },
],
},
];
selectList.value = List1.value;
break;
}
showPopup.value = !showPopup.value;
}
// 搜索
function onConfirm(val) {
searchDate.value = val;
getOtherDate();
}
// 选择类型
function changeTab(val) {
pageCurrent.value = 1
isActive.value = val;
showPopup.value = false;
list.value = []
rightTitle.value = val == 3 ? '批量申报' : '新增'
getOtherDate() //获取列表数据
}
// 更具类型获取数据
function getOtherDate() {
switch (isActive.value) {
case 0:
_getList_Cyry(); //从业人员管理
break;
case 1:
_getList_Dwgl()//单位管理
break;
case 2:
_getList_Rw()//寻巡访任务
break;
case 3:
_getList_Rw()//寻巡访任务
// _getList_Zg()//战果申报
break;
}
}
// 获取从业人员列表
function _getList_Cyry() {
let pramas = {
pageSize: 10,
pageCurrent: pageCurrent.value,
...searchDate.value.data,
};
if (!searchDate.value.data) pramas.xm = keyWord.value;
if (searchDate.value.data && !searchDate.value.data.xm) pramas.xm = keyWord.value;
isLoading.value = true
getdataCyry(pramas).then((res) => {
let arr = res.records || [];
isLoading.value = false;
list.value = pageCurrent.value == 1 ? arr : list.value.concat(arr);
total.value = res.total;
}).catch(() => {
isLoading.value = false;
});
}
// 获取单位管理
function _getList_Dwgl() {
let pramas = {
pageSize: 10,
pageCurrent: pageCurrent.value,
...searchDate.value.data,
};
let brr = searchDate.value.list ? searchDate.value.list : []
let arr = brr.filter(item => {
return item.type == 'checkBox'
})
arr.forEach(v => {
v.array.forEach(it => {
if (it.isCheck) pramas[v.lebel] = it.value
})
})
if (!searchDate.value.data || (searchDate.value.data && !searchDate.value.data.dwmc)) {
pramas.dwmc = keyWord.value;
}
isLoading.value = true;
getdataDwgl(pramas).then((res) => {
let arr = res.records || [];
list.value = pageCurrent.value == 1 ? arr : list.value.concat(arr);
total.value = res.total;
isLoading.value = false;
}).catch(() => {
isLoading.value = false;
});
}
// 获取任务
function _getList_Rw() {
let pramas = {
pageSize: 10,
pageCurrent: pageCurrent.value,
...searchDate.value,
};
if (!searchDate.value.data) pramas.xfdw = keyWord.value;
if (searchDate.value.data && !searchDate.value.xfdw) pramas.xfdw = keyWord.value;
if (isActive.value == 2) {
pramas.xfnr = keyWord.value;
delete pramas.xfdw;
delete pramas.data;
}
if (pramas.list) {
let arr = pramas.list[0].array
let obj = arr.find(item => { return item.isCheck == true })
pramas.rwzt = obj.dm
}
isLoading.value = true;
getdataRw(pramas).then((res) => {
let arr = res.records || [];
isLoading.value = false;
arr.forEach(item => {
item.isCheck = false
item.xfdw = JSON.parse(item.xfdw)
item.xfzy = JSON.parse(item.xfzy)
})
list.value = pageCurrent.value == 1 ? arr : list.value.concat(arr);
total.value = res.total;
}).catch(() => {
isLoading.value = false;
});
}
// 点击内容
function chooseData(item) {
if (isActive.value == 3) {
list.value.forEach(it => {
if (it.id == item.id) it.isCheck = !it.isCheck;
})
haschooseList.value = list.value.filter(v => { return v.isCheck == true })
}
}
// 获取任务
function _getList_Zg() {
let pramas = {
pageSize: 10,
pageCurrent: pageCurrent.value,
};
if (searchDate.value) {
let kssj = searchDate.value.startTime
let jssj = searchDate.value.startTime
pramas.kssj = kssj ? kssj + ' 00:00:00' : '';
pramas.kssj = jssj ? jssj + ' 23:59:59' : '';
let arr = searchDate.value.list
if (arr) {
let list = arr[0].array.filter(v => { return v.isCheck == true }).map(it => { return it.value })
pramas.sblx = list.join(',');
}
}
isLoading.value = true;
getdataZg(pramas).then((res) => {
let arr = res.records || [];
isLoading.value = false;
list.value = pageCurrent.value == 1 ? arr : list.value.concat(arr);
total.value = res.total;
}).catch(() => {
isLoading.value = false;
});
}
// 点击新增
function clickRight() {
localStorage.setItem('XF_Active', isActive.value)
switch (isActive.value) {
case 0: //从业人员管理
router.push({ path: "/Declaration/addEditCyry" });
break;
case 1: //单位管理
router.push({ path: "/Declaration/addEditDw" });
break;
case 2: //寻巡访任务
router.push({ path: "/Declaration/addEditRw" });
break;
case 3: //战果申报
plsbDate()// 批量申报
// router.push({ path: "/Declaration/addEdit"});
break;
}
}
// 批量申报
function plsbDate() {
if (haschooseList.value.length == 0) return Notify({ type: 'warning', message: '请选择申报的内容' });
let isTrue = true; //判断内容是否填完
haschooseList.value.forEach(item => {
if (!item.sbyy) isTrue = false
})
if (!isTrue) Notify({ type: 'warning', message: '请核实申报数据核实原因是否填写!' });
if (isTrue) {
let ids = haschooseList.value.map(it => { return it.id })
plsbData(ids).then(res => {
hintToast('申报成功')
_getList_Rw()
})
// 查询接口
}
}
//关键字查询
function onSearch(e) {
keyWord.value = e;
pageCurrent.value = 1;
showEmpty.value = false;
getOtherDate();//更具类型获取数据
}
// 选择类型
function chooseItem(val) {
dateForm.value.sblxmc = val.label;
dateForm.value.sblxdm = val.value;
chooseType.value = false;
}
// 重置
function reset() {
dateForm.value.sblxmc = "";
dateForm.value.sblxdm = "";
searchDate.value = {};
keyWord.value = ''
getOtherDate();
}
// 删除数据
function deletedata(id) {
Dialog.confirm({
title: "提示",
message: "是否确认删除该数据！",
confirmButtonColor: "#3e6ee8",
}).then((res) => {
switch (isActive.value) {
case 0: //从业人员管理
deletedataCyry([id]).then(res => {
hintToast('删除成功')
_getList_Cyry()
})
break;
case 1: //单位管理
deletedataDw([id]).then(res => {
hintToast('删除成功')
_getList_Dwgl()
})
break;
case 2: //寻巡访任务
case 3: //战果申报
deletedataRw([id]).then(res => {
hintToast('删除成功')
_getList_Rw()
})
break;
// case 3: //战果申报
// deletedataZg([id]).then(res=>{
// hintToast('删除成功')
// _getList_Zg()
// })
// break;
}
});
}
</script>
<style lang="less" scoped>
.chooseBox {
position: relative;
display: flex;
width: 100%;
justify-content: space-between;
align-content: center;
padding: 2vw 1vw;
box-sizing: border-box;
border: 1px solid #507ce9;
border-radius: 4px;
color: #d3d0d0;
font-size: 14px;
.outBox {
width: 100%;
position: absolute;
top: 38px;
background: #fff;
padding-top: 4vw;
z-index: 999;
border-radius: 4px;
.selectBox {
width: 100%;
padding: 4vw;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
.selectItem {
padding-left: 4vw;
box-sizing: border-box;
border-bottom: 1px solid #e9e9e9;
line-height: 30px;
color: #4a4646;
}
}
.selectBox::before {
position: absolute;
content: "";
top: -4px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border: 10px solid;
border-color: transparent transparent #ccc transparent;
}
}
.hoverClose {
display: none;
}
}
.listBox {
height: calc(100vh - 20vw);
overflow: hidden;
overflow-y: auto;
padding: 1vw 4vw;
padding-bottom: 0;
box-sizing: border-box;
.listItem {
background-color: rgba(241, 241, 241, 0.5);
padding: 2vw;
border: 1px solid;
}
}
</style>

40
src/pages/views/QuarantinePersonnel/drivinglicence.vue Normal file
View File

@ -0,0 +1,40 @@
<template>
<div class="container containerLicence" style="padding-top: 13vw; box-sizing: border-box">
<TopNav navTitle="核查驾驶证" />
<van-steps direction="vertical" active-color="#969799" :active="0">
<van-step>
<p>驾驶证号: 511525199910238410</p>
<p>姓名:周正伟</p>
<p>性别:男性</p>
<p>出生日期:1999年10月23日</p>
<p>国籍:</p>
<p>准驾车型: C1</p>
<p>发证机关:川Q</p>
<p>初次领证日期:2018-08-02 00:00:00</p>
<p>有效期限:2018-08-02 00:00:00-2024-08-02 00:00:00</p>
<p>住址:</p>
<p>现住址详址:四川省高县胜天镇马鞍村2组46号</p>
</van-step>
</van-steps>
</div>
</template>
<script setup>
import TopNav from "../../../components/topNav.vue";
import { ref, reactive, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
</script>
<style lang="scss" scoped>
</style>
<style>
.containerLicence .van-icon{
color: #148aec!important;
}
.containerLicence .van-step__line{
background-color: #148aec!important;
}
</style>

122
src/pages/views/QuarantinePersonnel/featureInfo.vue Normal file
View File

@ -0,0 +1,122 @@
<template>
<div class="container" style="padding-top: 13vw">
<TopNav navTitle="特征信息" />
<van-collapse v-model="activeName" @change="activeJs = false" accordion>
<van-collapse-item v-for="(item, i) in D_BZ_RYTZBQLB" :key="item.id" :title="item.py">
<span :class="it.zt === 1 ? 'coll_item active' : 'coll_item'" v-for="(it, index) in item.bqList" :key="index"
@click="checkBq(i, index, it.zt)">
{{ it.tzsx }}
</span>
<div class="coll_item_js" @click="activeJs = !activeJs">
查看代码解释>>>
</div>
<span :class="it.zt === 1 ? 'coll_item active' : 'coll_item'" v-show="activeJs" class="coll_item"
v-for="(it, index) in item.bqList" :key="index">
{{ it.tzbqmc }}
</span>
</van-collapse-item>
</van-collapse>
<div class="popbtn-box">
<van-button style="width: 100%" type="primary" @click="submit">确定</van-button>
</div>
</div>
</template>
<script setup>
import TopNav from "../../../components/topNav.vue";
import { getDictList } from "../../../utils/dict";
import { selectRytzbqList } from "../../../api/common";
import { ref, reactive, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
// 字典信息
const { D_BZ_RYTZBQLB } = getDictList("D_BZ_RYTZBQLB");
const router = useRouter();
const activeJs = ref(false);
const activeName = ref("");
const checkList = ref([]);
function checkBq(i, index, zt) {
if (zt == 1) {
D_BZ_RYTZBQLB.value[i].bqList[index].zt = 0;
} else {
D_BZ_RYTZBQLB.value[i].bqList[index].zt = 1;
}
}
function submit() {
const data = [];
D_BZ_RYTZBQLB.value.forEach((v) => {
v.bqList.forEach((v2) => {
if (v2.zt == 1) {
data.push({
tzbqdm: v2.tzbqdm,
tzbqlb: v2.tzbqlb,
tzbqmc: v2.tzbqmc,
});
}
});
});
try {
setStorage("LIST", JSON.stringify(data));
} catch (error) {
setStorage("LIST", data);
}
router.go(-1);
}
watch(
() => D_BZ_RYTZBQLB.value.length,
() => {
D_BZ_RYTZBQLB.value.forEach((item) => {
selectRytzbqList({ tzbqlb: item.dm }).then((res) => {
item.bqList = res;
item.bqList.forEach((v) => {
if (checkList.value.includes(v.tzbqdm)) {
v.zt = 1;
} else {
v.zt = 0;
}
});
});
});
}
);
onMounted(() => {
let item;
try {
item = JSON.parse(getStorage("LIST"));
} catch (error) {
item = getStorage("LIST");
}
checkList.value = item.map((item) => item.tzbqdm);
});
</script>
<style lang="scss" scoped>
.coll_item {
display: inline-block;
width: 30%;
text-align: center;
margin: 0 0 12px 3%;
padding: 2px 0;
background: #eee;
border-radius: 4px;
}
.coll_item.active {
background: #2698e4;
color: #fff;
}
.coll_item_js {
text-align: center;
color: #2698e4;
margin: 1px 0px 5px 0px;
}
.popbtn-box {
position: fixed;
bottom: 0;
right: 0;
left: 0;
}
</style>

958
src/pages/views/QuarantinePersonnel/index.vue Normal file
View File

@ -0,0 +1,958 @@
<template>
<div class="container" style="padding-top: 13vw; box-sizing: border-box">
<TopNav navTitle="人员盘查" :showRight="false" :showLeft="true" />
<div class="tip_text">
盘查结果：{{ ryxx.pcbqsm }}
</div>
<div class="head-nav-banner" v-if="ryxx.xm"></div>
<!-- <div class="top" v-if="ryxx.xm">
<div class="basic-info">
<div class="IDcard-info">
<div class="info-item">
<span class="bt">姓名</span>
<span>{{ ryxx.xm }}</span>
</div>
<div class="info-item">
<span class="bt">性别</span>
<span class="text">{{ setDict(ryxx.xbdm, D_BZ_XB) }}</span>&emsp;
<span class="bt">民族</span>
<span>{{ setDict(ryxx.mzdm, D_BZ_MZ) || "汉" }}</span>
</div>
<div class="info-item">
<span class="bt">出生</span>{{ ryxx.csrq }}
</div>
<div class="info-item">
<span class="bt">住址</span>
<span class="text">{{ ryxx.zzxz }}</span>
</div>
</div>
<div class="img-box">
<img :src="ryxx.baseUrl" width="75" />
</div>
</div>
<div class="sfzh">
<span class="bt">公民身份证号码</span>
<span class="idNumber">{{ ryxx.sfzh }}</span>
</div>
</div>
<div class="ry_xgxx">
<div class="contact-way">
<div>
人员标签：
<span v-if="ryxx.bqxxsj">
<span class="rybq" v-for="(e, i) in ryxx.bqxxsj.split(',')" :key="i + 'bq'">{{ e }}</span>
</span>
<span style="color: #808080" v-else>暂无标签</span>
</div>
</div>
<div>
联系电话 :<span>{{ ryxx.lxdh || "未知" }}</span>
</div>
<div>从业单位 :<span>未知</span></div>
</div>
<div class="bg_ban"></div>
<div class="center" v-if="ryxx.xm">
<div class="associated-information">
<div class="sign-title">关联信息</div>
<div class="content1">
<div class="item-box" @click="goCanTrack">
<div class="ass-item-box">
<div class="circlebox bg2"></div>
<span>盘查轨迹</span>
</div>
</div>
<div class="item-box">
<div class="ass-item-box" @click="goLicence">
<div class="circlebox bg4"></div>
<span>核查驾驶证</span>
</div>
</div>
<div class="item-box" @click="goVhicol">
<div class="ass-item-box">
<div class="circlebox bg5"></div>
<span>核查机动车</span>
</div>
</div>
</div>
</div>
<div class="pick-up-information">
<div class="sign-title">采集信息</div>
<div class="pick-box">
<div class="pick-item-box pbg2" @click="goFeatureInfo">
<div>特征信息</div>
</div>
<van-badge @click="showWpdj = true" class="pick-item-box pbg3" :content="wpdjList.length">
<div>物品登记</div>
</van-badge>
</div>
</div>
<div class="vehicular">
<div class="sign-title">
乘坐车辆
<span @click="showCar" style="color: #153fba; font-size: 12px; font-weight: normal">手动输入</span>
</div>
<div class="veh-box">
<div @click="onConfirmCzcl(item)" v-for="item in clList"
:class="ryxx.pcclId === item.id ? 'active cp_item' : 'cp_item'" :key="item.id">
{{ item.text.substr(0, 2) }}
<span></span>
{{ item.text.substr(2, item.text.length - 2) }}
</div>
<div v-if="clList.length === 0" class="no-veh">暂无乘坐车辆~</div>
</div>
</div>
</div> -->
<!-- 物品登记弹窗 -->
<van-popup v-model:show="showWpdj" round :style="{ width: '90vw' }">
<van-form @submit="onSubmit">
<van-cell-groub>
<van-field name="uploader" label="物品图片">
<template #input>
<van-uploader v-model="wpTpIdList" multiple :max-count="3" :after-read="upLoadImg2" />
</template>
</van-field>
</van-cell-groub>
<van-cell-groub>
<van-field v-model="wpForm.wpms" label="物品描述" placeholder="物品描述" rows="2" maxlength="50"
show-word-limit></van-field>
</van-cell-groub>
<van-cell-groub>
<van-field v-model="wpForm.wpsl" label="物品数量" placeholder="物品数量" type="number"
:rules="[{ required: true, message: '请填写物品数量' }]"></van-field>
</van-cell-groub>
<van-cell-groub>
<van-field v-model="wpForm.wplx" label="物品类型" @click="showWplx = true" readonly is-link placeholder="选择物品类型"
:rules="[{ required: true, message: '请选择物品类型' }]"></van-field>
</van-cell-groub>
<div style="margin: 16px">
<van-button round block type="primary" native-type="submit" size="small">提交</van-button>
</div>
</van-form>
</van-popup>
<!-- 移交弹窗 -->
<van-popup v-model:show="showYj" round :style="{ width: '90vw' }">
<van-form @submit="onYj">
<van-cell-groub>
<van-field v-model="yjForm.pcclYjdw" label="移交单位" placeholder="移交单位"
:rules="[{ required: true, message: '请填写移交单位' }]"></van-field>
</van-cell-groub>
<van-cell-groub>
<van-field v-model="yjForm.pcclYjyy" label="移交原因" placeholder="选择移交原因" @click="showYjyy = true" readonly
is-link :rules="[{ required: true, message: '请选择移交原因' }]"></van-field>
</van-cell-groub>
<div style="margin: 16px">
<van-button round block type="primary" native-type="submit" size="small">移交</van-button>
</div>
</van-form>
</van-popup>
<!-- 物品类型 -->
<van-popup round v-model:show="showWplx" position="bottom">
<van-picker :columns="D_BZ_BPCRCWP" @cancel="showWplx = false" @confirm="onConfirmWplx"></van-picker>
</van-popup>
<!-- 移交原因 -->
<van-popup round v-model:show="showYjyy" position="bottom">
<van-picker :columns="D_BZ_BPCRYYJYY" @cancel="showYjyy = false" @confirm="onConfirmYjyy"></van-picker>
</van-popup>
<div class="bg_ban"></div>
<!-- <div class="upload" v-if="ryxx.xm">
<div class="tsxx" v-show="fileList.length === 0">
点击上传图片 <br />
最多可上传 3 张照片
</div>
<van-uploader v-model="fileList" multiple :max-count="3" :after-read="afterRead">
<van-button class="up_btn" icon="plus"></van-button>
</van-uploader>
</div>
<div class="foot_ban"></div> -->
<div class="bottom-box">
<div @click="save('1')">
<img src="../../../assets/images/new/fangxing.png" />放行
</div>
<div @click="save('2')" class="yj">
<img src="../../../assets/images/new/yijiao.png" /> 移交
</div>
</div>
<van-loading type="spinner" style="padding: 20vw 0; text-align: center" v-if="loading" />
<van-empty image="network" description="错误，请稍后再试" v-if="showEmpty" />
<!-- 盘车 -->
<checkedCar ref="car" />
</div>
</template>
<script setup>
import ImageCompressor from "image-compressor.js";
import TopNav from "../../../components/topNav";
import checkedCar from "../../spsHome/components/checkCar.vue";
import { ref, reactive, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import {
selectRy,
selectRybq,
saveBpcry,
upImage,
getClOf2h,
} from "../../../api/common";
import { getDictList, setDict } from "../../../utils/dict";
import { zlPrPc, saveNFC } from "../../../api/zlzx.js";
import { getBase64, hintToast } from "../../../utils/tools.js";
const { D_BZ_BPCRCWP, D_BZ_MZ, D_BZ_BPCRYYJYY, D_BZ_XB } = getDictList(
"D_BZ_BPCRCWP",
"D_BZ_MZ",
"D_BZ_BPCRYYJYY",
"D_BZ_XB"
);
const clList = ref([]);
const router = useRouter();
const loading = ref(true);
const showEmpty = ref(false);
const car = ref(); //盘查车辆组件对象
const zlId = ref("");
const yjForm = ref({});
const showYjyy = ref(false);
const showCzcl = ref(false); //乘坐车辆数据
const czclHp = ref(null);
const wpdjList = ref([]); //物品登记集合
const showYj = ref(false);
const tpIdList = ref([]); //图片id集合
const wpTpIdList = ref([]);
const showWpdj = ref(false);
const showWplx = ref(false);
const fileList = ref([]);
const wpForm = ref({
wpms: "",
wpTpIdList: [],
wpsl: 1,
wplx: "",
});
const gps = ref({});
const gps1 = ref({});
const ryxx = ref({
sfzh: "",
xm: "",
xbdm: "",
xb: "",
csrq: "",
zzxz: "",
pcclId: "",
});
const bbinfo = ref({}); //报备数据
const userInfo = JSON.parse(getStorage("userInfo"));
const pcsrlx = ref(null);
onMounted(() => {
zlId.value = router.currentRoute.value.query.zlId;
getClDict(); //获取是否有乘坐车辆
let sfzh = router.currentRoute.value.query.sfzh;
pcsrlx.value = router.currentRoute.value.query.pcsrlx;
bbinfo.value = localStorage.getItem("GET_BBINFO")
? JSON.parse(localStorage.getItem("GET_BBINFO"))
: "";
try {
gps = JSON.parse(bridge.getLocation());
gps1 = JSON.parse(bridge.getPhoneInfo());
} catch (error) { }
if (sfzh) {
if (pcsrlx.value == 2 || pcsrlx.value == 6 || pcsrlx.value == 5) {
czrkQueryDetail(sfzh); //获取人员信息
} else if (pcsrlx.value == 7) {
let data = localStorage.getItem("OCR");
if (data) {
// let obj = JSON.parse(data).data;
// saveNFCData(obj);
}
} else if (pcsrlx.value == 1) {
let data = localStorage.getItem("NFC");
if (data) {
let obj = JSON.parse(data).data;
saveNFCData(obj);
}
}
} else {
hintToast("身份证为空,请重试！");
showEmpty.value = true;
loading.value = false;
}
});
// NFC保存
function saveNFCData(obj) {
let pramas = {
xm: obj.xm,
sfzh: obj.sfzh,
csrq: obj.csrq,
xbdm: obj.xb,
mzdm: obj.mz,
jgdm: obj.jgssx,
zzxz: obj.zzxz,
bbid: bbinfo.value ? bbinfo.value.id : "",
jd: gps.app_x,
wd: gps.app_y,
pcsrlx: "1",
pcfs: "02",
xjzdz: obj.zzxz,
zdch: gps.app_tfSn,
zdsim: gps1.zdlmei,
zdxh: gps.zdxh,
};
loading.value = true;
saveNFC(pramas)
.then((res) => {
ryxx.value = res;
// ryxx.value.baseUrl = "data:image/png;base64," + obj.zp;
ryxx.value.baseUrl =
"http://10.64.201.128:2366/xlpcAdminNew/requestservice/czrk/ryxp.jpg?sfzh=" +
res.sfzh;
loading.value = false;
// getPersonBq(res.id);
})
.catch(() => {
loading.value = false;
});
}
// 获取人员信息
function czrkQueryDetail(sfzh) {
let params = {
sfzh: sfzh,
jd: gps.app_x,
wd: gps.app_y,
sjly: "",
zdxh: gps.zdxh,
zdch: gps.app_tfSn,
zdsim: gps1.zdlmei,
pcsrlx: pcsrlx.value,
glxtdm: "",
glxtid: "",
jzid: "",
bbid: bbinfo.value ? bbinfo.value.id : "",
pcfs: "",
};
loading.value = true;
selectRy(params)
.then((res) => {
loading.value = false;
if (res) {
ryxx.value = res;
ryxx.value.baseUrl =
"http://10.64.201.128:2366/xlpcAdminNew/requestservice/czrk/ryxp.jpg?sfzh=" +
res.sfzh;
// getPersonBq(res.id); //获取人员标签
} else {
hintToast("查无此人,请核对人员信息！");
router.go(-1);
}
})
.catch(() => {
loading.value = false;
});
//如果是指令页面跳转过来调用
if (zlId.value) {
zlPrPc({
pclxdm: 1,
pcryclId: ryxx.value.id,
zlId: zlId.value,
}).then((res) => { });
}
}
// 获取人员标签
function getPersonBq(id) {
selectRybq({ id }).then((res1) => {
ryxx.value.bqxxsj = res1.bqxxsj;
});
}
// 获取是否有乘坐车辆
function getClDict() {
getClOf2h().then((res) => {
clList.value = res.map((item) => {
return { id: item.id, text: item.hphm };
});
});
}
// 核查驾驶证
function goLicence() {
router.push({ path: "/drivinglicence", query: { sfzh: ryxx.value.sfzh } });
}
// 核查机动车
function goVhicol() {
router.push({ path: "/motorVehicle", query: { sfzh: ryxx.value.sfzh } });
}
// 关联信息
function goCanTrack() {
router.push({ path: "/TrackInventory", query: { sfzh: ryxx.value.sfzh } });
}
// 移交原因
function onConfirmYjyy(val) {
showYjyy.value = false;
yjForm.value.pcclYjyy = val.text;
}
// 物品类型
function onConfirmWplx(val) {
showWplx.value = false;
wpForm.value.wplx = val.text;
}
// 特征信息
function goFeatureInfo() {
router.push("/featureInfo");
}
// 打开查询车辆弹窗
function showCar() {
car.value.handleOpen();
}
function onConfirmCzcl(val) {
czclHp.value = val.text;
if (ryxx.value.pcclId === val.id) {
ryxx.value.pcclId = "";
} else {
ryxx.value.pcclId = val.id;
}
}
// 物品登记提交
function onSubmit() {
wpdjList.value.push(wpForm.value);
showWpdj.value = false;
wpForm.value = { wpms: "", wpTpIdList: [], wpsl: 1, wplx: "" };
}
//获取文件
async function afterRead(file) {
file.message = "上传中...";
let fileBlob = await _compressImage(file.file);
let fileData = new File([fileBlob], fileBlob.name, { type: fileBlob.type });
const data = new FormData();
data.append("file", fileData);
upImage(data).then((res) => {
file.status = "done";
file.message = "上传成功";
if (!tpIdList.value.includes(res)) tpIdList.value.push(res);
});
}
// 上传图片
async function upLoadImg2(file) {
file.message = "上传中...";
let fileBlob = await _compressImage(file.file);
let fileData = new File([fileBlob], fileBlob.name, { type: fileBlob.type });
const data = new FormData();
data.append("file", fileData);
file.status = "uploading";
upImage(data).then((res) => {
file.status = "done";
file.message = "上传成功";
if (!wpForm.value.wpTpIdList.includes(res))
wpForm.value.wpTpIdList.push(res);
});
}
//压缩图片
const _compressImage = (file) => {
return new Promise((resolve, reject) => {
new ImageCompressor(file, {
quality: 0.6, //压缩质量
success(res) {
resolve(res);
},
error(e) {
reject(e);
},
});
});
};
// 移交或者放行
function save(val) {
if (val === "1") {
const formData = {
pcclId: ryxx.value.pcclId,
id: ryxx.value.id,
pcclJg: "1",
pcclJgmc: "放行",
pcclYjdw: yjForm.value.pcclYjdw,
ryWpList: wpdjList.value,
tpIdList: tpIdList.value,
tzbqList: ryxx.value.tzList,
};
// if (pcsrlx.value != 7 && pcsrlx.value != 1 && fileList.value.length == 0) {
// return hintToast("非刷二代证件盘查，必须采集照片！");
// }
saveBpcry(formData).then((res) => {
if (pcsrlx.value == "6" || pcsrlx.value == "5") {
router.go(-2); //保存成功退回上一级
} else {
router.go(-1); //保存成功退回上一级
}
hintToast("放行成功！");
});
} else {
ryxx.value.pcclJg = val;
ryxx.value.pcclJgmc = "移交";
showYj.value = true;
}
}
//移交表单
function onYj() {
const formData = {
pcclId: ryxx.value.pcclId,
id: ryxx.value.id,
pcclJg: "2",
pcclJgmc: "移交",
pcclYjdw: yjForm.value.pcclYjdw,
ryWpList: wpdjList.value,
tpIdList: tpIdList.value,
tzbqList: ryxx.value.tzList,
};
// if (pcsrlx.value != 7 || (pcsrlx.value != 1 && fileList.value.length == 0)) {
// return hintToast("非刷二代证件盘查，必须采集照片！");
// }
saveBpcry(formData).then((res) => {
hintToast("移交成功！"); //保存成功退回上一级
if (pcsrlx.value == "6" || pcsrlx.value == "5") {
router.go(-2); //保存成功退回上一级
} else {
router.go(-1); //保存成功退回上一级
}
});
}
//获取base64地址
function _getBase64(item) {
getBase64((res) => {
item.baseUrl = res;
}, `http://10.64.201.128:2366/xlpcAdminNew/requestservice/czrk/ryxp.jpg?sfzh=${item.sfzh}`);
}
</script>
<style lang="scss" scoped>
@import "../../../assets/styles/mixin.scss";
.bg_ban {
background: #eff0f5;
height: 12px;
}
.foot_ban {
height: 12px;
background: #eff0f5;
}
.container {
margin-bottom: 6vh;
}
.top {
background-image: url("../../../assets/images/new/id_card.png");
background-size: 100% 100%;
background-repeat: no-repeat;
min-height: 28vw;
padding: 2vh 0 2vh 5vw;
margin: 0 2vw;
position: relative;
z-index: 2;
.basic-info {
color: #4d4d4d;
display: flex;
justify-content: space-between;
.IDcard-info {
flex: 1;
@include font_size($font_medium_s);
.info-item {
line-height: 6vw;
.bt {
display: inline-block;
width: 34px;
text-align-last: justify;
color: #1f6cec;
margin-right: 10px;
}
}
}
.img-box {
margin-right: 12px;
width: 74px;
height: 94px;
>img {
border-radius: 5px;
border: 1px solid #e5e5e5;
overflow: hidden;
}
}
}
.sfzh {
@include font_size($font_medium_s);
margin-top: 1vw;
.bt {
color: #1f6cec;
margin-right: 10px;
}
.idNumber {
font-size: 16px;
font-weight: bold;
}
}
}
.ry_xgxx {
margin: 0 2vw 12px;
background: #f3f6fe;
padding: 12px;
@include font_size($font_medium_s);
.bq {
margin-bottom: 8px;
>span {
display: inline-block;
padding: 2px 4px;
border: 1px solid #3a9687;
border-radius: 3px;
margin-right: 8px;
background: #e7f5f3;
}
}
div {
line-height: 1.8em;
>span {
color: #013791;
}
}
.contact-way {
line-height: 2vh;
@include font_size($font_medium_s);
.one-line {
display: flex;
.phoneNum {
width: 50%;
}
}
}
}
.fxBtn {
background: linear-gradient(148deg, #5897ff, #1862de);
color: #f2f2f2;
}
.yjBtn {
background: linear-gradient(148deg, #ffbb6b, #ff7a45);
color: #f2f2f2;
}
.center {
padding: 0 3vw;
.sign-title {
padding-left: 14px;
line-height: 3vh;
@include font_size($font_medium);
font-weight: bold;
display: flex;
position: relative;
justify-content: space-between;
margin: 1vh 0;
.chooseP {
@include font_size($font_medium_s);
color: rgb(0, 102, 255);
font-weight: normal;
}
}
.sign-title::after {
content: "";
position: absolute;
left: 0;
top: 2px;
bottom: 2px;
width: 4px;
background: linear-gradient(0deg, #7ec2ff 0%, #0e8aff 100%);
border-radius: 1px;
}
.associated-information {
@include font_size($font_medium_s);
@include font_color($font-color-theme);
.item-box {
margin: 2vw 4vw;
display: flex;
.ass-item-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
.content1 {
display: flex;
.circlebox {
width: 15vw;
height: 15vw;
text-align: center;
line-height: 15vw;
margin-bottom: 2vw;
}
.bg1 {
background: url("../../../assets/images/new/sydj_bg.png");
background-size: contain;
background-repeat: no-repeat;
}
.bg2 {
background: url("../../../assets/images/new/pcgj.png");
background-size: contain;
background-repeat: no-repeat;
}
.bg3 {
background: url("../../../assets/images/new/tcry.png");
background-size: contain;
background-repeat: no-repeat;
}
.bg4 {
background: url("../../../assets/images/new/hcjsz.png");
background-size: contain;
background-repeat: no-repeat;
}
.bg5 {
background: url("../../../assets/images/new/hcjdc.png");
background-size: contain;
background-repeat: no-repeat;
}
}
}
.pick-up-information {
@include font_size($font_medium_s);
@include font_color($font-color-theme);
.pick-box {
display: flex;
justify-content: flex-start;
margin: 3vw 0;
}
.pick-item-box {
padding: 3vw 3vw 10vw;
width: 30%;
margin-right: 2vw;
// border-radius: 3vw;
position: relative;
.tp {
position: absolute;
bottom: 0;
right: 0;
}
}
.pbg1 {
background: url("../../../assets/images/new/bg-blue.png") no-repeat;
background-size: cover;
}
.pbg2 {
background: url("../../../assets/images/new/tzxx_bg.png") no-repeat;
background-size: 100% 100%;
color: #464d82;
}
.pbg3 {
color: #397361;
background: url("../../../assets/images/new/wpdj.png") no-repeat;
background-size: 100% 100%;
}
}
.vehicular {
@include font_color($font-color-theme);
.no-veh {
text-align: center;
@include font_size($font_medium_s);
color: #cccccc;
margin: 4vw 0;
}
.veh-box {
margin: 1vh 0;
.cp_item {
display: inline-block;
text-align: center;
line-height: 2em;
@include font_size($font_medium_s);
width: 31.33%;
margin-right: 2%;
background: url("../../../assets/images/new/cp_bg.png") no-repeat;
background-size: 100% 100%;
>span {
display: inline-block;
width: 4px;
height: 4px;
border-radius: 50%;
background: #333;
margin-bottom: 4%;
}
}
.active.cp_item {
background: url("../../../assets/images/new/cp_bg_active.png") no-repeat;
background-size: 100% 100%;
color: #fff;
>span {
background: #fff;
}
}
}
}
}
.line1 {
width: 100vw;
background-color: #eee;
height: 1vh;
}
.upload {
padding: 1vh 3vw;
height: 80px;
position: relative;
.tsxx {
position: absolute;
color: #a8a8a8;
top: 0;
left: 30%;
bottom: 0;
padding: 8% 0;
font-size: 14px;
}
.up_btn {
height: 80px;
width: 80px;
color: #a8a8a8;
font-size: 24px;
background: #f2f2f2 url("../../../assets/images/new/upimg_bg.png") no-repeat;
background-size: 100% 100%;
}
}
.bottom-box {
text-align: center;
background: #fff;
border-top: 1px solid #ddddde;
position: fixed;
bottom: 0;
width: 100vw;
height: 6vh;
line-height: 6vh;
display: flex;
>div {
height: 6vh;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
>img {
width: 20px;
margin-right: 8px;
}
}
.yj {
background: #f0f0f0;
}
}
.upload-box {
margin: 1vh 3vw;
}
.staff-title {
height: 5vh;
background-color: rgb(13, 106, 245);
text-align: center;
line-height: 5vh;
}
.staff-sure {
position: fixed;
bottom: 0;
width: 100%;
}
.head-nav-banner {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 35vw;
z-index: 1;
background: #1143ca;
}
::v-deep .headBlue {
background-color: #1143ca !important;
}
.navTitle {
position: absolute;
top: 0;
color: #fff;
font-size: 5.5vw;
text-align: center;
width: 100%;
padding: 3vw 0;
}
.rybq {
display: inline-block;
padding: 0 4px;
background: #f00;
color: #f2f2f2;
border-radius: 4px;
margin: 4px;
}
.no-veh_cp {
display: flex;
>span {
flex: 1;
}
}
.tip_text{
font-size: 18px;
margin-top: 10px;
}
</style>

43
src/pages/views/QuarantinePersonnel/motorVehicle.vue Normal file
View File

@ -0,0 +1,43 @@
<template>
<div class="container containerLicence" style="padding-top: 13vw; box-sizing: border-box">
<TopNav navTitle="核查机动车" />
<van-steps direction="vertical" active-color="#969799" :active="0">
<van-step>
<p>号牌种类 : 小型车辆</p>
<p>号牌号码 : 穿A88888</p>
<p>车辆识别代码 : LVHR98545869852</p>
<p>发动机型号 : RWED12</p>
<p>发动机号 : 124525</p>
<p>车身颜色 : </p>
<p>车辆品牌 : </p>
<p>核定载重量 : </p>
<p>排量 : </p>
<p>功率 ：</p>
<p>载重量 : </p>
<p>机动车所有人 : </p>
<p>机动车所有人身份证号 : </p>
<p>登记住址详址 : </p>
</van-step>
</van-steps>
</div>
</template>
<script setup>
import TopNav from "../../../components/topNav.vue";
import { ref, reactive, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
</script>
<style lang="scss" scoped>
</style>
<style>
.containerLicence .van-icon{
color: #148aec!important;
}
.containerLicence .van-step__line{
background-color: #148aec!important;
}
</style>

311
src/pages/views/QuarantinePersonnel/pestilenceRelated.vue Normal file
View File

@ -0,0 +1,311 @@
<template>
<div class="container" style="padding-top: 13vw">
<TopNav navTitle="涉疫登记" />
<div class="card">
<van-image class="img_van" :class="_getBase64(ryxx)" :src="ryxx.baseUrl"></van-image>
<div class="card_main">
<div>
<span class="main_one">姓名：{{ ryxx.xm }}</span>
<span>性别：{{ setDict(ryxx.sex, D_BZ_XB) }}</span>
</div>
<div>
<span class="main_one">出生年月：{{ ryxx.bird }}</span>
<span>民族：{{ setDict(ryxx.mz, D_BZ_MZ) }}</span>
</div>
<div>
<span>证件号码：{{ ryxx.sfzh }}</span>
</div>
<div>
<span>家庭住址：{{ ryxx.jtzz }}</span>
</div>
</div>
</div>
<div class="title_tag">天府健康码核验</div>
<div class="fydj_main">
<van-radio-group direction="horizontal" v-model="form.jkmzt">
<van-radio name="1" shape="square">
<template #default>
<span style="color: #4cdf58">绿码</span>
</template>
</van-radio>
<van-radio name="2" shape="square">
<template #default>
<span style="color: #e69529">黄码</span>
</template>
</van-radio>
<van-radio name="3" shape="square">
<template #default>
<span style="color: #ff0000">红码</span>
</template>
</van-radio>
</van-radio-group>
</div>
<div class="title_tag">疫苗接种情况</div>
<div class="fydj_main">
<van-radio-group v-model="form.ymjzqk" direction="horizontal">
<van-radio v-for="item in D_BZ_YMJZQK" :key="item.value" shape="square" :name="item.value" class="m_radio">{{
item.text }}</van-radio>
</van-radio-group>
</div>
<div class="title_tag">来源地与目的地</div>
<div class="fydj_main_n">
<div>
<div style="color: #1565eb; text-align: center">来源地</div>
<van-field readonly @click="show = true" class="bg" v-model="form.lz" placeholder="请输入来源地" type="textarea"
rows="2"></van-field>
</div>
<van-icon class="fy_icon" name="arrow"></van-icon>
<div>
<div style="color: #1565eb; text-align: center">目的地</div>
<van-field readonly class="bg" @click="showEnd = true" placeholder="请输入目的地" v-model="form.qw" type="textarea"
rows="2"></van-field>
</div>
</div>
<div class="title_tag">通行大数据行程卡是否带*</div>
<div class="fydj_main">
<van-radio-group v-model="form.txxck" direction="horizontal">
<van-radio v-for="item in D_BZ_SF" :key="item.value" shape="square" :name="item.value" class="m_radio">{{
item.text }}</van-radio>
</van-radio-group>
</div>
<div class="title_tag_s">14天内到达或途径城市</div>
<div class="fydj_main">
<van-field class="bg" v-model="form.ddhtjcs"></van-field>
</div>
<div class="title_tag">上传照片</div>
<div class="fydj_main">
<van-uploader v-model="imgList" multiple :max-count="3" :after-read="upLoadImg" />
</div>
<div style="margin: 16px">
<van-button round block type="primary" @click="onSubmit">提交</van-button>
</div>
<van-popup v-model:show="show" round position="bottom">
<van-cascader close-icon="success" v-model="cascaderVakue.city" title="请选择来源地" :options="city" @close="close"
@finish="onFinish"></van-cascader>
<van-field v-model="cascaderVakue.text" label="详细地址" placeholder="请输入详细地址"></van-field>
</van-popup>
<van-popup v-model:show="showEnd" round position="bottom">
<van-cascader close-icon="success" v-model="cascaderVakueEnd.city" title="请选择目的地" :options="city"
@close="closeEnd" @finish="onFinishEnd"></van-cascader>
<van-field v-model="cascaderVakueEnd.text" label="详细地址" placeholder="请输入详细地址"></van-field>
</van-popup>
</div>
</template>
<script setup>
import TopNav from "../../../components/topNav.vue";
import { useRouter } from "vue-router";
import { upImage, getRySydjInfo, saveSydj } from "../../../api/common";
import { ref, onMounted } from "vue";
// import city from "../../../assets/jsonData/city.json";
import { getBase64, hintToast } from "../../../utils/tools.js";
import { getDictList, setDict } from "../../../utils/dict";
import { baseUrl2 } from "../../../utils/request.js";
const { D_BZ_YMJZQK, D_BZ_SF, D_BZ_XB, D_BZ_MZ } = getDictList(
"D_BZ_YMJZQK",
"D_BZ_SF",
"D_BZ_XB",
"D_BZ_MZ"
);
const router = useRouter();
const url = baseUrl2 + "/mosty-api/mosty-base/minio/image/download/";
const show = ref(false);
const showEnd = ref(false);
const cascaderVakue = ref({
city: "",
text: "",
});
const cascaderVakueEnd = ref({
city: "",
text: "",
});
const form = ref({
ddhtjcs: "", //14天内到达或途径城市
jkmzt: "", //天府健康码状态
lz: "", //来自哪里
pcid: "", //盘查id
qw: "", //去往哪里
ryxm: "", //人员姓名
sfzh: "", //身份证号
tpid: "", //图片Id
txxck: "", //通讯行程卡是否带*
ymjzqk: "",
});
100;
const imgList = ref([]);
const ryxx = ref({
imgUrl: "",
xm: router.currentRoute.value.query.ryxm,
sfzh: router.currentRoute.value.query.sfzh,
sex: router.currentRoute.value.query.xbdm,
bird: router.currentRoute.value.query.csrq,
mz: router.currentRoute.value.query.mzdm,
jtzz: router.currentRoute.value.query.zzxz,
});
//获取base64地址
function _getBase64(item) {
getBase64((res) => {
item.baseUrl = res;
}, `http://10.64.201.128:2366/xlpcAdminNew/requestservice/czrk/ryxp.jpg?sfzh=${item.sfzh}`);
}
function close() {
show.value = false;
form.value.lz += cascaderVakue.value.text;
}
function onFinish({ selectedOptions }) {
form.value.lz = selectedOptions.map((item) => item.text).join("/");
}
function closeEnd() {
showEnd.value = false;
form.value.qw += cascaderVakueEnd.value.text;
}
function onFinishEnd({ selectedOptions }) {
form.value.qw = selectedOptions.map((item) => item.text).join("/");
}
function upLoadImg(file) {
const data = new FormData();
data.append("file", file.file);
file.status = "uploading";
file.message = "上传中...";
upImage(data)
.then((res) => {
file.status = "done";
file.message = "上传成功";
file.id = res;
})
.catch(() => {
file.status = "failed";
file.message = "上传失败";
});
}
function onSubmit() {
form.value.pcid = router.currentRoute.value.query.pcid;
form.value.ryxm = router.currentRoute.value.query.ryxm;
form.value.sfzh = router.currentRoute.value.query.sfzh;
form.value.tpid = imgList.value.map((item) => item.id).join(",");
saveSydj(form.value).then(() => {
hintToast("保存成功")
router.go(-1);
});
}
function getSydjInfo() {
const data = {
pcid: router.currentRoute.value.query.pcid,
sfzh: router.currentRoute.value.query.sfzh,
};
getRySydjInfo(data).then((res) => {
form.value = res;
if (res.tpid) {
imgList.value = res.tpid.split(",").map((item) => {
return {
url: url + item,
id: item,
isImage: true,
};
});
}
});
}
onMounted(() => {
getSydjInfo();
});
</script>
<style lang="scss" scoped>
@import "../../../assets/styles/mixin.scss";
.card {
margin: 5vw;
width: 90vw;
@include font_color($font-color-theme);
border-radius: 2.5vw;
@include bg_color($background-color-theme);
@include border_outer_color($border-outer-color-theme);
display: flex;
font-size: 12px;
padding: 3vw;
box-sizing: border-box;
.img_van {
width: 65px;
height: 76px;
margin-right: 12px;
}
.card_main {
flex: 1;
>div {
display: flex;
line-height: 1.5em;
.main_one {
width: 65%;
}
}
}
}
.title_tag_s {
@include font_color($font-color-theme);
position: relative;
padding-left: 12px;
margin: 12px 5vw;
}
.title_tag {
position: relative;
padding-left: 12px;
margin: 12px 5vw;
@include font_color($font-color-theme);
}
.title_tag::after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 4px;
background: #1666eb;
border-radius: 2px;
}
.fydj_main {
box-sizing: border-box;
padding: 0 6vw;
.m_radio {
width: 50%;
margin: 6px 0;
}
}
.fydj_main_n {
box-sizing: border-box;
padding: 0 6vw;
display: flex;
align-items: center;
.bg {
background: #f0f0f0;
border-radius: 4px;
margin-top: 8px;
}
.fy_icon {
margin: 24px 5vw 0;
color: #1666eb;
}
}
.bg {
background: #f0f0f0;
border-radius: 4px;
}
::v-deep .van-radio__label {
@include font_color($font-color-theme);
color: #333;
}
</style>

118
src/pages/views/TrackInventory/index.vue Normal file
View File

@ -0,0 +1,118 @@
<template>
<div class="container" style="padding-top: 13vw">
<TopNav :navTitle="title" />
<van-list v-model:loading="loading" :finished='finished' finished-text='沒有更多了' @load="onLoad">
<van-cell v-for="(item,index) in list" :key="index+'rygj'">
<div v-if="title==='人员轨迹'" class="item_main item_box">
<div style="color:#027db4">{{item.pcsj}}</div>
<div>姓名：{{item.xm}} <span style="color:f00">{{item.bqxxsj}}</span></div>
<div>性别：{{item.xbdm==1?'男':'女'}}</div>
<div>身份证号：{{item.sfzh}}</div>
<div>所属单位：{{item.ssbm}}</div>
<div>所乘车辆：暂无</div>
<div @click="preview(item.tpList)">照片数量：{{item.tpList.length}}</div>
<div>盘查特征：{{item.tzList==null?'暂无':item.tzList.join(',')}}</div>
<div>盘查物品：
<span v-for="(e,index) in item.wpVoList"
:key="index+'pctp'">{{setDict(e.wplx,D_BZ_WPLX)+'*'+e.wpsl}}</span>
<span v-show="item.wpVoList.length===0">暂无</span>
</div>
<div>处理结果：
<span v-show="item.pcclJg==1">放行</span>
<span v-show="item.pcclJg==2">移交</span>
<span v-show="item.pcclJg==9">盘查</span>
</div>
</div>
<div v-else class="item_main item_box">
<div style="color:#027db4">{{item.pcsj}}</div>
<div>车牌号：{{item.hphm}}</div>
<div>车主姓名：{{item.jdcsyr}}</div>
<div>身份证号：{{item.jdcsyrsfzh}}</div>
<div>号牌种类：{{setDict(item.hpzl,D_BZ_HPZL)}}</div>
<div>盘查结果：{{item.pcclJg==1?'放行':'移交'}}</div>
<div>盘查方式：{{item.pcfs=='01'?'车牌设备自动':'民警手动'}}</div>
<div>盘查物品：
<span v-for="(e,index) in item.wpVoList"
:key="index+'pctp'">{{setDict(e.wplx,D_BZ_WPLX)+'*'+e.wpsl}}</span>
<span v-show="item.wpVoList.length===0">暂无</span>
</div>
<div>处理结果：
<span v-show="item.pcclJg==1">放行</span>
<span v-show="item.pcclJg==2">移交</span>
<span v-show="item.pcclJg==9">盘查</span>
</div>
</div>
</van-cell>
</van-list>
</div>
</template>
<script setup>
import { ref,onMounted } from 'vue'
import { useRouter } from "vue-router";
import TopNav from "../../../components/topNav.vue";
import {getDictList,setDict} from '../../../utils/dict'
import { getRypcList,getClpcList } from '../../../api/common'
import { ImagePreview } from 'vant'
const { D_BZ_WPLX,D_BZ_HPZL } = getDictList('D_BZ_WPLX','D_BZ_HPZL')
const router = useRouter();
const loading = ref(false)
const finished = ref(false)
const total=ref(0)
const title = router.currentRoute.value.query.sfzh?'人员轨迹':"车辆轨迹"
const url = '/mosty-api/mosty-base/minio/image/download/'
const queryList = ref({
pageCurrent:1,
pageSize:10,
sfzh:router.currentRoute.value.query.sfzh,
hphm:router.currentRoute.value.query.hphm
})
const list = ref([])
function preview(e){
const imgIdList = e.map(e=>url+e.id)
if(imgIdList.length>0){
ImagePreview({imgIdList,closeable:true})
}
}
function onLoad(){
if(router.currentRoute.value.query.sfzh){
getRypcList(queryList.value).then(res=>{
list.value.push(...res.records)
total.value = res.total
loading.value = false
queryList.value.pageCurrent++
if(list.value.length>=res.total){
finished.value = true
}
})
}else{
getClpcList(queryList.value).then(res=>{
list.value.push(...res.records)
total.value = res.total
loading.value = false
queryList.value.pageCurrent++
if(list.value.length>=res.total){
finished.value = true
}
})
}
}
onMounted(()=>{})
</script>
<style lang="scss" scoped>
@import "../../../assets/styles/mixin.scss";
.item_main {
box-sizing: border-box;
padding: 2.5vw;
border-radius: 4px;
margin: 16px 2.5vw;
}
.van-cell {
background-color: rgba(0, 0, 0, 0);
}</style>

677
src/pages/views/jqfx/compareFx.vue Normal file
View File

@ -0,0 +1,677 @@
<template>
<div class="compare" v-if="showPage">
<div class="title-box">
<div class="title">
<span @click="isShowJqType = true">{{ jqTitle }}</span>
<img src="../../../assets/images/xiala.png" width class="img" alt="" @click="isShowJqType = true" />
<van-action-sheet v-model:show="isShowJqType">
<van-picker :columns="jqTypeList" @confirm="onJqChange" @cancel="isShowJqType = false" />
</van-action-sheet>
</div>
</div>
<div class="zst-box">
<div class="zst-title-box">
<div class="zst-title-left">分局{{ jqTitle }}走势图</div>
</div>
<jqChart :data1="jqzs.data1" :data2="jqzs.data2" :data3="jqzs.data3" :timeList="jqzs.timeList" :jqType="jqType"
v-if="jqzs.timeList.length > 0" />
</div>
<div class="zst-box">
<div class="zst-title-box">
<div class="zst-title-left">城区分局{{ jqTitle }}环比</div>
</div>
<div class="all-box" v-if="m2List.length > 0">
<percent :list="m2List" :day="dqTime" :yesterday="sygTime" />
</div>
<div style="height: 10vh; text-align: center; line-height: 10vh" v-else>
没有数据
</div>
</div>
<div class="zst-box">
<div class="zst-title-box">
<div class="zst-title-left">城区分局{{ jqTitle }}类别环比</div>
</div>
<div v-if="list3.length <= 0" style="height: 10vh; text-align: center; line-height: 10vh">
没有数据
</div>
<div class="fjAndCqfj-box" v-else>
<div class="first-line">
<div class="first-line-item"></div>
<div class="first-line-item" v-for="(item, index) in list3" :key="index">
{{ item.name }}
</div>
</div>
<div class="right-box">
<div class="right-box-line-item" v-for="(_item, i) in list3Title" :key="i">
<div class="right-line-box" v-if="_item">
<div class="first-line-item-right">{{ _item }}</div>
<div class="first-line-item-right" v-for="(item, index) in list3" :key="index + 'cc'">
<span v-if="_item == '对比'" :style="{
color:
item['高新区'] - item[list3Title[i - 1]] < 0
? 'green'
: 'red',
}">{{ item["高新区"] - item[list3Title[i - 1]] }}</span>
<span v-else>{{ item[_item] }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="zst-box">
<div class="zst-title-box">
<div class="zst-title-left">派出所{{ jqTitle }}环比</div>
</div>
<div v-if="m4List.length > 0">
<percent :list="m4List" :day="dqTime" :yesterday="sygTime" />
</div>
<div v-else style="height: 10vh; text-align: center; line-height: 10vh">
没有数据
</div>
</div>
<div class="zst-box">
<div class="zst-title-box">
<div class="zst-title-left">派出所{{ jqTitle }}类别环比</div>
</div>
<div v-if="list5.length <= 0" style="height: 10vh; text-align: center; line-height: 10vh">
没有数据
</div>
<div class="fjAndCqfj-box" v-else>
<div class="first-line">
<div class="first-line-item"></div>
<div class="first-line-item"></div>
<div class="first-line-item" v-for="(item, index) in list5" :key="index">
{{ item.name }}
</div>
</div>
<div class="right-box">
<div class="right-box-line-item" v-for="(_item, i) in list5Title" :key="i">
<div class="right-line-box" v-if="_item" style="width: 45vw">
<div class="first-line-item-right">{{ _item }}</div>
<div class="first-line-item-right lb_title" style="color: #3e6ee8">
<span>{{ dqTime }}</span>
<span>{{ sygTime }}</span>
<span>环比</span>
</div>
<div class="first-line-item-right lb_title" v-for="(item, index) in list5" :key="index + 'cc'">
<template v-for="(val, key) in item" :key="val">
<template v-if="
_item === key.split('_')[0] && _item + '_data2' == key
">
<span>{{ item[_item + "_data1"] }}</span>
<span>{{ item[_item + "_data2"] }}</span>
<span :style="{
color:
item[_item + '_data1'] - item[_item + '_data2'] <= 0
? 'green'
: 'red',
}">
{{ item[_item + "_data1"] - item[_item + "_data2"] }}
</span>
</template>
</template>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import jqChart from "./components/lineChart.vue";
import percent from "./percent.vue";
import * as echarts from "echarts";
import { jqfxCorrelation } from "../../../api/jqfxApi.js";
import { Toast } from "vant";
export default {
components: {
jqChart,
percent,
},
props: ["timeActive"],
watch: {
timeActive: {
handler(val) {
this.list3 = [];
this.list5 = [];
switch (val) {
case 0:
this.sygTime = "昨日";
this.dqTime = "今日";
break;
case 1:
this.sygTime = "上个7日";
this.dqTime = "近7日";
break;
case 2:
this.sygTime = "上个30日";
this.dqTime = "近30日";
break;
case 3:
this.sygTime = "上个90日";
this.dqTime = "近90日";
break;
}
this.tiemType = val + 1;
this._allRequest();
this.keyIndex += 1;
},
immediate: true,
deep: true,
},
},
data() {
return {
showPage: false,
keyIndex: 1,
sygTime: "昨日",
dqTime: "今日",
tiemType: 0, //时间查询类型
jqType: 1, //警情类型
zlShow: false,
isShowJqType: false,
jqTitle: "总警情",
jqTypeList: ["总警情", "街面警情", "违法犯罪警情"],
//警情走势图数据
jqzs: {
data1: [],
data2: [],
data3: [],
timeList: [],
},
//城区总警情类别环比标题
list3Title: [
"",
"高新区",
"青羊区",
"对比",
"锦江区",
"对比",
"金牛区",
"对比",
"武侯区",
"对比",
"成华区",
"对比",
"天府新区",
"对比",
],
list3: [], //城区总警情类别环比
list5: [], //派出所总警情类别环比
list5Title: [
"",
"中和派出所",
"合作派出所",
"和平派出所",
"新会展派出所",
"新川派出所",
"新益州派出所",
"桂溪派出所",
"石羊派出所",
"肖家河派出所",
"芳草街派出所",
"西园派出所",
], //派出所总警情类别环比标题
m2List: [], //城区分局总警情环比
m4List: [], //派出所警情环比
};
},
mounted() {
try {
if (this.$route.query.jqlx === "jmjq") {
this.onJqChange("街面警情");
} else if (this.$route.query.jqlx === "zjq") {
this.onJqChange("总警情");
} else if (this.$route.query.jqlx === "wffzjq") {
this.onJqChange("违法犯罪警情");
}
} catch (error) {
this._allRequest();
}
},
methods: {
//切换警情类型
onJqChange(val) {
switch (val) {
case "总警情":
this.jqType = 1;
this.jqTitle = "总警情";
break;
case "违法犯罪警情":
this.jqType = 3;
this.jqTitle = "违法犯罪警情";
break;
case "街面警情":
this.jqType = 2;
this.jqTitle = "街面警情";
break;
}
this._allRequest();
this.isShowJqType = false;
this.keyIndex += 1;
},
//
_allRequest() {
Toast.loading({
message: "加载...",
forbidClick: true,
loadingType: "spinner",
duration: 0,
});
Promise.all([
this._getCqjqfjhbData(),
this._getCqjqlbhbData(),
this._getPcsjqhbData(),
this._getPcsjqlbhbData(),
this._getFjjqzstData(),
]).then((res) => {
setTimeout(() => {
this.showPage = true;
Toast.clear();
}, 4e3);
});
},
//获取分局警情走势图
_getFjjqzstData() {
let data = {
type: this.tiemType,
ssfjdm: "510109000000",
jqType: this.jqType,
};
jqfxCorrelation("/tbJq/jqtjDbFjjqzs", data).then((res) => {
if (res) this.jqzs = res;
});
},
//派出所警情类别环比
_getPcsjqlbhbData() {
let data = {
type: this.tiemType,
jqType: this.jqType,
ssfjdm: "510109000000",
};
jqfxCorrelation("/tbJq/jqtjDbPcsHbTable", data).then((res) => {
this.list5 = res;
});
},
//派出所警情环比
_getPcsjqhbData() {
let data = {
type: this.tiemType,
jqType: this.jqType,
ssfjdm: "510109000000",
};
jqfxCorrelation("/tbJq/jqtjDbPcsHb", data).then((res) => {
for (let i = 0; i < res.length; i++) {
res[i].orgname = res[i].orgname.replace("派出所", "");
}
this.m4List = res;
});
},
//获取城区总警情类别环比
_getCqjqlbhbData() {
let data = {
type: this.tiemType,
jqType: this.jqType,
};
jqfxCorrelation("/tbJq/jqtjDbCqfjhbTable", data).then((res) => {
this.list3 = res;
});
},
//获取城区总警情环比
_getCqjqfjhbData() {
let data = {
type: this.tiemType,
jqType: this.jqType,
};
jqfxCorrelation("/tbJq/jqtjDbCqfjhb", data).then((res) => {
this.m2List = res;
});
},
},
};
</script>
<style lang="scss" scoped>
@import "../../../assets/styles/mixin.scss";
.title-box {
display: flex;
justify-content: center;
}
.title {
width: 92vw;
height: 4vw;
background: url("../../../assets/images/bigTitle@2x.png");
background-size: 100% 100%;
margin-top: 10px;
text-align: center;
line-height: 4vw;
@include font_color($font-color-theme);
@include font_size($font_medium_s);
}
::v-deep .nav-box[data-v-19978886] {
border-bottom: 1px solid #203967;
}
.zst-box {
@include font_color($font-color-theme);
@include font_size($font_medium_s);
}
.zst-title-box {
width: 100vw;
margin-top: 20px;
display: flex;
justify-content: space-between;
}
.zst-title-left {
background: url("../../../assets/images/lanmu-title.png") no-repeat;
background-size: 100% 100%;
flex: 2;
height: 28px;
line-height: 28px;
padding-left: 10px;
@include font_color($font-color-theme);
@include font_size($font_medium);
}
.zst-title-right {
flex: 1;
span-align: right;
height: 28px;
line-height: 28px;
padding-right: 10px;
color: #47b8ff;
text-align: right;
}
.zst-title-right1 {
flex: 1;
height: 28px;
line-height: 28px;
padding-right: 10px;
/* color: #47B8FF; */
}
.sendZL {
width: 70px;
height: 26px;
border-radius: 5px;
background-image: linear-gradient(#00c0fa, #015eea);
span-align: center;
margin-left: 16vw;
color: #fff;
font-size: 14px;
text-align: center;
line-height: 26px;
}
.img {
margin-left: 3px;
}
.assess-box {
padding: 10px;
line-height: 18px;
// @include font_size($font_medium_s);
// @include font_color($font-color-theme);
}
.fjAndCqfj-box {
margin: 0 auto;
width: 95vw;
/* height: 40vh; */
margin-top: 10px;
display: flex;
flex-direction: row;
}
.first-line {
flex: 1;
overflow: auto;
border: 1px solid #333;
display: flex;
flex-direction: column;
// justify-content: space-between;
align-items: center;
background-color: rgb(51, 157, 255, 0.2);
}
.first-line :first-child {
border-top: unset;
}
.first-line :last-child {
border-bottom: unset;
}
.first-line-item {
flex: 1;
height: 3.5vh;
border-bottom: 1px solid #333;
display: flex;
align-items: center;
width: 100%;
padding-left: 1.5vw;
white-space: nowrap;
overflow-x: scroll;
}
.right-box {
flex: 4.5;
display: flex;
border-top: 1px solid #333;
border-bottom: 1px solid #333;
border-right: 1px solid #333;
overflow: auto;
}
.right-box-line-item {
/* width: 33vw; */
border-right: 1px solid #333;
display: flex;
position: relative;
}
.right-line-box-m5 {
display: flex;
justify-content: center;
align-items: center;
width: 42vw;
}
.right-line-box-m5 :last-child {
border-right: unset;
}
.table-content-m5 {
display: flex;
width: 42vw;
}
.right-line-box {
width: 14vw;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.first-line-item-right {
// flex: 1;
height: 3.5vh;
border-bottom: 1px solid #333;
// border-right: 1px solid #18325e;
span-align: center;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
// padding-left: 1.5vw;
}
.lb_title {
display: flex;
justify-content: space-between;
}
.lb_title>span {
width: 33.3%;
text-align: center;
border-right: 1px solid #333;
height: 3.5vh;
line-height: 3.6vh;
}
.lb_title>span:last-child {
border: none;
}
.first-line-item-rightsss {
height: 3.5vh;
border-bottom: 1px solid #333;
span-align: center;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.first-line-item-rightsss:last-child {
border-bottom: none;
// border-right:none;
}
.first-line-item-right:last-child {
border-bottom: none;
// border-right:none;
}
.first-line-item-right-m5 {
height: 3.5vh;
border-top: 1px solid #333;
border-bottom: 0.5px solid #333;
span-align: center;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding-left: 1.5vw;
}
.first-line-item-right-m5:last-child {
// border-bottom:none;
border-right: none;
}
/* .right-line-box :first-child {
border-right: unset;
} */
.right-title-box {
width: 42vw;
// span-align: center;
text-align: center;
line-height: 3.6vh;
white-space: nowrap;
overflow-x: scroll;
}
/* echarts */
#jqChart {
width: 100%;
height: 40vh;
}
#chainChart1 {
width: 100%;
height: 43vh;
}
.zhanbi1 {
margin-top: 4.5vh;
height: 33.5vh;
display: flex;
flex-direction: column;
align-items: center;
line-height: 4.5vh;
}
.zhanbi1-item {
flex: 1;
}
.all-box {
display: flex;
}
.pop-box {
padding: 2vw 4vw;
}
.span-zhanbi {
color: #ff7327;
font-size: 18px;
}
.slot-content {
padding: 2vw;
@include font_size($font_medium_s);
@include font_color($font-color-theme);
}
.first-Line-content {
margin-bottom: 10px;
}
.other-content {
// height: 161px;
// background-color: #293647;
// overflow: auto;
padding: 2vw;
border-radius: 5px;
white-space: pre-line;
@include border_outer_color($border-outer-color-theme);
}
.empty-box {
line-height: 8vh;
span-align: center;
}
.content-module5 {
display: flex;
flex-direction: column;
}
.db_span {
color: #ed0000;
}
::v-deep .modal-box .u-popup__content[data-v-3a231fda] {
background-color: #333 !important;
}
::v-deep .modal-box .u-line {
border-right-color: #333 !important;
border-top-color: #333 !important;
border-left-color: #333 !important;
border-bottom: #333 !important;
}
::v-deep .modal-box .u-modal__button-group__wrapper__span[data-v-0156a215] {
color: #fff !important;
}
</style>

112
src/pages/views/jqfx/components/TopArea.vue Normal file
View File

@ -0,0 +1,112 @@
<template>
<view class="box" v-if="ayList.length > 0">
<view class="total_box" v-for="(item,index) in list" :key="index">
<view class="total_name">
<span>{{item.ay ? _getayName(item.ay) : item.name}}</span>
<view v-if="item.text">{{item.text}}</view>
</view>
<view class="total_num">
<view class="percent" :class="index > 1 ? 'orange' : 'red'" style="width: 100%;" v-if="index == 0">
</view>
<view class="percent" :class="index > 1 ? 'orange' : 'red'"
:style="{width:item.sl / list[0].sl * 100 + '%'}" v-else></view>
<span>{{item.sl}}</span>
</view>
</view>
</view>
</template>
<script>
import { jqfxCorrelation } from "../../../../api/jqfxApi.js";
export default {
props: ["list"],
watch: {
list: {
handler(val) {
this._getAjlxData()
},
immediate: true,
deep: true
}
},
data() {
return {
ayList: [],//案由数据
totalList:[],//统计数据
}
},
created() {
},
methods: {
/**
* 获取案由
* @param {Object} code 字典代码
*/
_getAjlxData(code) {
jqfxCorrelation('/xtzd/aylx',{}).then(res => {
this.ayList = res
this.totalList = this.list
})
},
//获取案由名称
_getayName(code) {
let name = ''
let info = this.ayList.find(item => {
return code == item.code
})
if (info) {
name = info.name
return name
}
return code
}
}
}
</script>
<style scoped>
.box {
width: 100%;
height: 100%;
}
.total_box {
display: flex;
width: 100%;
margin-bottom: 5vw;
}
.total_name {
flex: 1;
}
.total_name>view {
color: #999;
}
.total_num {
border: 1px solid #264479;
border: 1px solid #e0e0e0;
flex: 4.5;
display: flex;
align-items: center;
height: 8vw;
padding: 1vw;
justify-content: space-between;
}
.total_num .percent {
width: 92%;
height: 5vw;
}
.total_num .red {
background-image: linear-gradient(to right, #b6359c, #ef0a6a);
}
.total_num .orange {
background-image: linear-gradient(to right, #f28e26, #fd644f);
}
</style>

165
src/pages/views/jqfx/components/barEcharts.vue Normal file
View File

@ -0,0 +1,165 @@
<template>
<div :id="echid" class="gfChart"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
props: ["datas"],
watch: {
datas: {
handler(val) {
this.hamdlegfChart();
},
immediate: true,
deep: true,
},
},
data() {
return {
echid: "",
};
},
created() {
this.echid = "ech_" + new Date().getTime();
},
mounted() {
// this.titles = this.titles
// this.datas = this.datas
this.hamdlegfChart();
},
methods: {
hamdlegfChart() {
if (document.getElementById(this.echid)) {
let myechart = echarts.init(document.getElementById(this.echid));
myechart.setOption({
tooltip: {},
grid: {
left: "5",
right: "5",
bottom: "0",
top: "35",
containLabel: true,
},
legend: {
textStyle: {
color: "#333",
},
},
dataset: {
// dimensions: ['product', '警情', '时长', '里程'],
source: this.datas,
},
xAxis: {
type: "category",
},
yAxis: {
type: "value",
splitLine: {
show: true,
lineStyle: {
// color: "#224465",
},
},
},
series: [
{
type: "bar",
barWidth: 9,
itemStyle: {
normal: {
barBorderRadius: [5, 5, 5, 5],
},
},
color: [
{
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#ff887c",
},
{
offset: 1,
color: "#b6325f",
},
],
},
],
},
{
type: "bar",
barWidth: 9,
itemStyle: {
normal: {
barBorderRadius: [5, 5, 5, 5],
},
},
color: [
{
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#205ddb",
},
{
offset: 1,
color: "#1bdffc",
},
],
},
],
},
{
type: "bar",
barWidth: 9,
itemStyle: {
normal: {
barBorderRadius: [5, 5, 5, 5],
},
},
color: [
{
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#98e05f",
},
{
offset: 1,
color: "#0de3ac",
},
],
},
],
},
],
});
}
},
},
};
</script>
<style scoped>
.gfChart {
margin-top: 1vw;
height: 65vw;
width: 95vw;
margin: 0 auto;
}
</style>

172
src/pages/views/jqfx/components/barEcharts1.vue Normal file
View File

@ -0,0 +1,172 @@
<template>
<div :id="echid" class="gfChart"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
props: ["datas"],
watch: {
datas: {
handler(val) {
this.hamdlegfChart();
},
immediate: true,
deep: true,
},
},
data() {
return {
echid: "",
};
},
created() {
this.echid = "ech_" + new Date().getTime();
},
mounted() {
// this.titles = this.titles
// this.datas = this.datas
this.hamdlegfChart();
},
methods: {
hamdlegfChart() {
if (document.getElementById(this.echid)) {
let myechart = echarts.init(document.getElementById(this.echid));
myechart.setOption({
tooltip: {},
grid: {
left: "10",
right: "20",
bottom: "0",
top: "35",
containLabel: true,
},
legend: {
textStyle: {
color: "#333",
},
},
xAxis: {
type: "value",
splitLine: {
show: true,
lineStyle: {
// color: "#224465",
},
},
},
yAxis: {
type: "category",
data: this.datas.titles,
},
series: [
{
name: "刑事",
type: "bar",
stack: "total",
label: {
show: true,
color: "#fff",
fontSize: 12,
},
emphasis: {
focus: "series",
},
data: this.datas.xsList,
color: [
{
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#015eea",
},
{
offset: 1,
color: "#00c0fa",
},
],
},
],
},
{
name: "行政",
type: "bar",
stack: "total",
label: {
show: true,
color: "#fff",
},
emphasis: {
focus: "series",
},
data: this.datas.xzList,
color: [
{
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#b6325f",
},
{
offset: 1,
color: "#ff887c",
},
],
},
],
},
// {
// name: '总数',
// type: 'bar',
// stack: 'total',
// label: {
// show: false,
// color: '#000'
// },
// emphasis: {
// focus: 'series'
// },
// data: this.datas.zsList,
// color: [{
// type: 'linear',
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [{
// offset: 0,
// color: '#ecc801'
// },
// {
// offset: 1,
// color: '#feef45'
// }
// ]
// }]
// },
],
});
}
},
},
};
</script>
<style scoped>
.gfChart {
margin-top: 1vw;
height: 65vw;
width: 95vw;
margin: 0 auto;
}
</style>

138
src/pages/views/jqfx/components/barEcharts2.vue Normal file
View File

@ -0,0 +1,138 @@
<template>
<div :id="echid" class="gfChart"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
props: ["datas"],
watch: {
datas: {
handler(val) {
this.hamdlegfChart();
},
immediate: true,
deep: true,
},
},
data() {
return {
echid: "",
};
},
created() {
this.echid = "ech_" + new Date().getTime();
},
mounted() {
// this.titles = this.titles
// this.datas = this.datas
this.hamdlegfChart();
},
methods: {
hamdlegfChart() {
if (document.getElementById(this.echid)) {
let myechart = echarts.init(document.getElementById(this.echid));
myechart.setOption({
tooltip: {},
grid: {
left: "5",
right: "5",
bottom: "0",
top: "35",
containLabel: true,
},
legend: {
textStyle: {
color: "#333",
},
},
dataset: {
// dimensions: ['product', '警情', '时长', '里程'],
source: this.datas,
},
xAxis: {
type: "category",
},
yAxis: {
type: "value",
splitLine: {
show: true,
lineStyle: {
// color: "#224465",
},
},
},
series: [
{
type: "bar",
barWidth: 9,
itemStyle: {
normal: {
barBorderRadius: [5, 5, 5, 5],
},
},
color: [
{
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#b6325f",
},
{
offset: 1,
color: "#ff887c",
},
],
},
],
barGap: "50%",
},
{
type: "bar",
barWidth: 9,
itemStyle: {
normal: {
barBorderRadius: [5, 5, 5, 5],
},
},
color: [
{
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#205ddb",
},
{
offset: 1,
color: "#1bdffc",
},
],
},
],
},
],
});
}
},
},
};
</script>
<style scoped>
.gfChart {
margin-top: 1vw;
height: 65vw;
width: 95vw;
margin: 0 auto;
}
</style>

168
src/pages/views/jqfx/components/casePerson.vue Normal file
View File

@ -0,0 +1,168 @@
<template>
<div class="cntBox">
<div class="box-left">
<div class="left-item" v-for="(v,index) in list" :key="index">
<div class="title">
{{index+1}}.{{v.name}}
</div>
<div class="number">
{{v.todayNum}}
<img src="../../../../assets/images/leader/arrow-up@2x.png" v-if="v.todayNum > v.lastNum"/>
<img src="../../../../assets/images/leader/arrow-down@2x.png" v-else/>
</div>
</div>
</div>
<div class="box-right">
<div class="sircle-one">
<div class="sircle-one-middle">
<div class="sircle-one-small">前科</div>
<div class="sircle-two">吸毒</div>
<div class="sircle-three">本区</div>
<div class="sircle-four">精神病人</div>
<div class="sircle-five">外省</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{name:'前科',todayNum:180,lastNum:20},
{name:'吸毒',todayNum:180,lastNum:1120},
{name:'本区',todayNum:180,lastNum:20},
{name:'外省',todayNum:180,lastNum:1120},
{name:'精神病人',todayNum:180,lastNum:20}
]
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@import "../../../../assets/styles/mixin.scss";
.cntBox{
width: 100%;
height: 25vh;
}
.box-left{
width: 35%;
height: 100%;
float: left;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.left-item{
flex: 1;
}
.title{
float: left;
}
.number{
float: right;
}
.box-right{
width: 65%;
height: 100%;
float: right;
position: relative;
@include font_size($font_medium_s);
}
.sircle-one{
position: absolute;
width: 21vw;
height: 21vw;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
border: 1px solid #1565cb;
border-radius:50%;
}
.sircle-one-middle{
width: 18vw;
height: 18vw;
border: 1px solid #1874E7;
border-radius:50%;
margin: 0 auto;
top: 1.25vw;
position: relative;
}
.sircle-one-small{
position: absolute;
width: 15vw;
height: 15vw;
border: 1px solid #1874E7;
border-radius:50%;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
box-shadow: inset 0 0 10px #1874E7;
background: rgba(12,76,180,.3);
text-align: center;
line-height: 16vw;
}
.sircle-two{
position: absolute;
width: 18vw;
height: 18vw;
left: -17vw;
bottom: -1px;
border: 1px solid #E5E718;
box-shadow: inset 0 0 20px #E5E718;
border-radius:50%;
text-align: center;
line-height: 18vw;
}
.sircle-three{
position: absolute;
width: 17vw;
height: 17vw;
bottom: 16.5vw;
border: 1px solid #E78D18;
box-shadow: inset 0 0 20px #E78D18;
border-radius:50%;
text-align: center;
line-height: 17vw;
}
.sircle-four{
position: absolute;
width: 16vw;
height: 16vw;
left: 20vw;
bottom: 8vw;
border: 1px solid #14F5F2;
box-shadow: inset 0 0 20px #14F5F2;
border-radius:50%;
text-align: center;
line-height: 16vw;
}
.sircle-five{
position: absolute;
width: 15vw;
height: 15vw;
left: 12vw;
bottom: -11vw;
border: 1px solid #14A3F5;
box-shadow: inset 0 0 20px #14A3F5;
border-radius:50%;
text-align: center;
line-height: 15vw;
}
img{
width: 2vw;
margin-left: 2vw;
}
</style>

140
src/pages/views/jqfx/components/lineChart.vue Normal file
View File

@ -0,0 +1,140 @@
<template>
<div :id="echid" class="gfChart"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
props: {
data1: Array,
data2: Array,
data3: Array,
timeList: Array,
jqType: Number,
},
data() {
return {
echid: "",
};
},
created() {
this.echid = "ech2_" + new Date().getTime();
},
watch: {
data2: {
handler(val) {
this.hamdleJqChart();
},
immediate: true,
deep: true,
},
},
mounted() {
this.hamdleJqChart();
},
methods: {
hamdleJqChart() {
if (document.getElementById(this.echid)) {
let myechart = echarts.init(document.getElementById(this.echid));
myechart.setOption({
color:
this.jqType == 1
? ["#268bff", "#FF1A1A", "#FF7B1A"]
: ["#FF1A1A", "#268bff"],
tooltip: {
trigger: "axis",
axiosPointer: {
type: "cross",
crossStyle: {
color: "#888",
},
lineStyle: {
type: "dashed",
},
},
},
grid: {
left: "10",
right: "10",
bottom: "0",
top: "60",
containLabel: true,
},
legend: {
data:
this.jqType == 1
? ["总警情", "违法犯罪", "街面警情"]
: ["刑事", "行政"],
orient: "horizontal",
show: true,
top: 25,
},
xAxis: {
type: "category",
data: this.timeList,
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: {
type: "value",
axisLabel: {
color: "#888",
textStyle: {
fontSize: 12,
},
},
splitLine: {
show: true,
lineStyle: {
// color: "#224465",
},
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
series: [
{
name: this.jqType == 1 ? "总警情" : "刑事",
type: "line",
smooth: true,
data: this.data1,
},
{
name: this.jqType == 1 ? "违法犯罪" : "行政",
type: "line",
smooth: true,
data: this.data2,
},
{
name: "街面警情",
type: "line",
smooth: true,
data: this.data3,
},
],
});
}
},
},
};
</script>
<style scoped>
.gfChart {
margin-top: 1vw;
height: 65vw;
width: 100vw;
margin: 0 auto;
}
</style>

1020
src/pages/views/jqfx/dqscFx.vue Normal file
View File

File diff suppressed because it is too large Load Diff

621
src/pages/views/jqfx/fourTallFx.vue Normal file
View File

@ -0,0 +1,621 @@
<template>
<div class="compare">
<div class="title-box">
<div class="title">
{{ jqTitle }}
<img src="../../../assets/images/xiala.png" width class="img" alt="" @click="isShowJqType = true" />
<van-action-sheet v-model:show="isShowJqType">
<van-picker :columns="jqTypeList" @confirm="groupChange" @cancel="isShowJqType = false" />
</van-action-sheet>
</div>
</div>
<div class="zst-box">
<div class="zst-title-box">
<div class="zst-title-left">高发时段分析</div>
<div class="zst-title-right">
{{ gfsdTime }}
<img src="../../../assets/images/xiala.png" width class="img" alt="" @click="chooseTime('gfsd')" />
<van-action-sheet v-model:show="isShowDataCount1">
<van-picker :columns="timeList" @confirm="change_data_count" @cancel="isShowDataCount1 = false" />
</van-action-sheet>
</div>
</div>
<div class="tag_box">
<van-tag v-for="(item, index) in tags" @click="changeTime(item)" :key="index" plain
:color="isTimeActive == item ? '#3c9cff' : ''" style="margin-right: 1vw">{{ item }}
</van-tag>
</div>
<Bar :datas="pcsfaList" />
</div>
<div class="zst-box">
<div class="zst-title-box">
<div class="zst-title-left">高发区域TOP5</div>
<div class="zst-title-right">
{{ gfqyTime }}
<img src="../../../assets/images/xiala.png" width class="img" alt="" @click="chooseTime('gfqy')" />
<van-action-sheet v-model:show="isShowDataCount2">
<van-picker :columns="timeList" @confirm="change_data_count" @cancel="isShowDataCount2 = false" />
</van-action-sheet>
</div>
</div>
<div class="fjChart">
<TopArea :list="gfqyLIst" v-if="gfqyLIst.length > 0" />
<div v-else style="height: 10vh; text-align: center; line-height: 10vh">
没有数据
</div>
</div>
<!-- <div class="but_box" v-if="gfqyLIst.length > 0">
<span>发送指令</span>
<span>以地图展示</span>
</div> -->
</div>
<div class="zst-box">
<div class="zst-title-box">
<div class="zst-title-left">高发类型TOP5</div>
<div class="zst-title-right">
{{ gflxTime }}
<img src="../../../assets/images/xiala.png" width class="img" alt="" @click="chooseTime('gflx')" />
<van-action-sheet v-model:show="isShowDataCount3">
<van-picker :columns="timeList" @confirm="change_data_count" @cancel="isShowDataCount3 = false" />
</van-action-sheet>
</div>
</div>
<div class="fjChart">
<TopArea :list="gflxList" v-if="gflxList.length > 0" />
<div v-else style="height: 10vh; text-align: center; line-height: 10vh">
没有数据
</div>
</div>
</div>
<div class="zst-box">
<div class="zst-title-box">
<div class="zst-title-left">高发对象-作案人员(模拟)</div>
<div class="zst-title-right">
今日
<img src="../../../assets/images/xiala.png" width class="img" alt="" />
</div>
</div>
<div class="fjChart">
<CasePerson></CasePerson>
</div>
</div>
<div class="zst-box">
<div class="zst-title-box">
<div class="zst-title-left">高发对象-受害人(模拟)</div>
<div class="zst-title-right">
今日
<img src="../../../assets/images/xiala.png" width class="img" alt="" />
</div>
</div>
<div class="fjChart">
<CasePerson></CasePerson>
</div>
</div>
</div>
</template>
<script>
import Bar from "./components/barEcharts.vue";
import TopArea from "./components/TopArea.vue";
import CasePerson from "./components/casePerson.vue";
import {
timeValidate,
getRecentDay,
getnRencebtMonth,
} from "../../../utils/tools.js";
import { jqfxCorrelation } from "../../../api/jqfxApi.js";
export default {
components: {
Bar,
TopArea,
CasePerson,
},
data() {
return {
isShowJqType: false,
jqTitle: "总警情",
jqTypeList: ["总警情", "街面警情", "违法犯罪警情"],
//时间段选择数据
timeList: ["今日", "近7日", "近7周", "近7月"],
count: 0,
isTimeActive: "6时段",
tags: ["3时段", "4时段", "6时段", "8时段"],
pcsfaListCopy: [],
pcsfaList: [],
gflxList: [], //高发类型数据
gfqyLIst: [], //高发区域
isShowDataCount1: false, //日期选择
isShowDataCount2: false, //日期选择
isShowDataCount3: false, //日期选择
submitType: "", //选择的模块
gfsdTime: "今日",
gfqyTime: "今日",
gflxTime: "今日",
gfdxTime: "今日",
gfsdTime: "今日",
};
},
mounted() {
this.get_gfsdfx_data();
this.get_gflx_zjq_data(); //高发类别TOP5
this._getgfquData();
},
methods: {
// 时间选择
change_data_count(val) {
this._getTimeSelectData(val);
this.isShowDataCount1 = false;
this.isShowDataCount2 = false;
this.isShowDataCount3 = false;
},
//根据时间查询的数据
_getTimeSelectData(time) {
switch (this.submitType) {
case "gfsd":
this.gfsdTime = time;
this.get_gfsdfx_data();
break;
case "gflx":
this.gflxTime = time;
this.get_gflx_zjq_data();
break;
case "gfqy":
this.gfqyTime = time;
this._getgfquData();
break;
}
},
// 选择时间段
chooseTime(type) {
this.submitType = type; //选择那个模块时间
switch (type) {
case "gfsd":
this.isShowDataCount1 = true;
break;
case "gfqy":
this.isShowDataCount2 = true;
break;
case "gflx":
this.isShowDataCount3 = true;
break;
}
},
// 下拉切换 总警情、违法犯罪警情、街面警情
groupChange(val) {
switch (val.value[0]) {
case "总警情":
this.jqTitle = "总警情";
break;
case "违法犯罪警情":
this.jqTitle = "违法犯罪警情";
break;
case "街面警情":
this.jqTitle = "街面警情";
break;
}
this.isShowJqType = false;
this.get_gfsdfx_data(); //高发时段分析
this.get_gflx_zjq_data(); //高发类别TOP5
this._getgfquData(); //高发区域
},
// 高发时段分析
get_gfsdfx_data() {
let params = {
ssxgajdm: "1",
};
switch (this.gfsdTime) {
case "今日":
params.ksrq = timeValidate(new Date(), "ymd");
params.jsrq = timeValidate(new Date(), "ymd");
break;
case "近7日":
params.ksrq = getRecentDay(-7);
params.jsrq = timeValidate(new Date(), "ymd");
break;
case "近7周":
params.ksrq = getRecentDay(-49);
params.jsrq = timeValidate(new Date(), "ymd");
break;
default:
params.ksny = getnRencebtMonth(6);
params.jsny = getnRencebtMonth(0);
break;
}
// 总警情
if (this.jqTitle == "总警情") {
if (this.gfsdTime == "近7月") {
this._getJqData("/sgfx/gfsdfx/yzjq", params);
} else {
this._getJqData("/sgfx/gfsdfx/zjq", params);
}
}
if (this.jqTitle == "违法犯罪警情") {
if (this.gfsdTime == "近7月") {
this._getJqData("/sgfx/gfsdfx/ywffzjq", params);
} else {
this._getJqData("/sgfx/gfsdfx/wffzjq", params);
}
}
// 街面警情
if (this.jqTitle == "街面警情") {
if (this.gfsdTime == "近7月") {
this._getJqData("/sgfx/gfsdfx/yjmjq", params);
} else {
this._getJqData("/sgfx/gfsdfx/jmjq", params);
}
}
},
//请求高发地图警情数据
_getJqData(url, params) {
jqfxCorrelation(url, params).then((res) => {
let timeArr = [];
for (var i = 0; i < 24; i++) {
let obj = {
product: i,
警情: 0,
时长: 0,
里程: 0,
};
for (var j = 0; j < res.length; j++) {
let item = res[j];
if (i == item.jqfsksxs) {
obj["警情"] = item.sl;
}
}
timeArr.push(obj);
}
this.pcsfaListCopy = timeArr;
this.changeTime("6时段");
});
},
// 高发时段分析时段切换
changeTime(value) {
this.isTimeActive = value;
if (value == "3时段") {
this.pcsfaList = this.getGroup(3);
}
if (value == "4时段") {
this.pcsfaList = this.getGroup(4);
}
if (value == "6时段") {
this.pcsfaList = this.getGroup(6);
}
if (value == "8时段") {
this.pcsfaList = this.getGroup(8);
}
},
// 时间分组
getGroup(val) {
let arr = [];
let num = 24 / val;
if (arr.length < num) {
for (let j = 1; j <= num; j++) {
let obj = {
product: "",
警情: 0,
时长: 0,
里程: 0,
};
for (let t = 0; t < this.pcsfaListCopy.length; t++) {
let it = this.pcsfaListCopy[t];
if ((j - 1) * val <= t && t < j * val) {
let objs = JSON.parse(JSON.stringify(obj));
objs.product = (j - 1) * val + "-" + (it.product + 1);
this.count = this.count + it["警情"];
if (t % val == val - 1) {
objs["警情"] = this.count;
this.count = 0;
arr.push(objs);
break;
}
}
}
}
}
return arr;
},
//高发区域 TOP5
_getgfquData() {
let params = {
ssxgajdm: "1", //分县局代码
};
switch (this.gfqyTime) {
case "今日":
params.ksrq = timeValidate(new Date(), "ymd");
params.jsrq = timeValidate(new Date(), "ymd");
break;
case "近7日":
params.ksrq = getRecentDay(-7);
params.jsrq = timeValidate(new Date(), "ymd");
break;
case "近7周":
params.ksrq = getRecentDay(-49);
params.jsrq = timeValidate(new Date(), "ymd");
break;
default:
params.ksny = getnRencebtMonth(6);
params.jsny = getnRencebtMonth(0);
break;
}
if (this.jqTitle == "总警情") {
params.type = 1;
}
if (this.jqTitle == "违法犯罪警情") {
params.type = 3;
}
if (this.jqTitle == "街面警情") {
params.type = 2;
}
this.gfqyLIst = [];
jqfxCorrelation("/tbJq/querySgfx", params).then((res) => {
if (res && res.length > 0) {
res.forEach((item) => {
if (!item.error) {
item.name = item.address.road || item.display_name.split(",")[0];
item.sl = item.jqsl;
this.gfqyLIst.push(item);
}
});
}
});
},
// 高发类型TOP5
get_gflx_zjq_data() {
let params = {
ssxgajdm: "1", //分县局代码
};
switch (this.gflxTime) {
case "今日":
params.ksrq = timeValidate(new Date(), "ymd");
params.jsrq = timeValidate(new Date(), "ymd");
break;
case "近7日":
params.ksrq = getRecentDay(-7);
params.jsrq = timeValidate(new Date(), "ymd");
break;
case "近7周":
params.ksrq = getRecentDay(-49);
params.jsrq = timeValidate(new Date(), "ymd");
break;
default:
params.ksny = getnRencebtMonth(6);
params.jsny = getnRencebtMonth(0);
break;
}
// 总警情
if (this.jqTitle == "总警情") {
if (this.gflxTime == "近7月") {
this._getGflxData("/sgfx/gflx/yzjq", params);
} else {
this._getGflxData("/sgfx/gflx/zjq", params);
}
}
// 违法犯罪警情
if (this.jqTitle == "违法犯罪警情") {
if (this.gflxTime == "近7月") {
this._getGflxData("/sgfx/gflx/yzwffzjq", params);
} else {
this._getGflxData("/sgfx/gflx/wffzjq", params);
}
}
// 街面警情
if (this.jqTitle == "街面警情") {
if (this.gflxTime == "近7月") {
this._getGflxData("/sgfx/gflx/yjmjq", params);
} else {
this._getGflxData("/sgfx/gflx/jmjq", params);
}
}
},
//获取高发类型数据
_getGflxData(url, params) {
jqfxCorrelation(url, params).then((res) => {
if (res && res.length > 0) {
this.gflxList = res.slice(0, 5);
}
});
},
},
};
</script>
<style lang="scss" scoped>
@import "../../../assets/styles/mixin.scss";
.compare {
padding-bottom: 3vw;
}
.title-box {
display: flex;
justify-content: center;
}
.title {
width: 92vw;
height: 4vw;
background: url("../../../assets/images/bigTitle@2x.png");
background-size: 100% 100%;
margin-top: 10px;
text-align: center;
line-height: 4vw;
@include font_color($font-color-theme);
@include font_size($font_medium_s);
}
::v-deep .nav-box[data-v-19978886] {
border-bottom: 1px solid #203967;
}
.zst-box {
@include font_color($font-color-theme);
@include font_size($font_medium_s);
}
.zst-title-box {
margin-top: 20px;
display: flex;
justify-content: space-between;
@include font_color($font-color-theme);
}
.zst-title-left {
background: url("../../../assets/images/lanmu-title.png") no-repeat;
background-size: 100% 100%;
flex: 2;
height: 28px;
line-height: 28px;
padding-left: 10px;
@include font_size($font_medium);
}
.zst-title-right {
flex: 1;
text-align: right;
height: 28px;
line-height: 28px;
padding-right: 10px;
color: #47b8ff;
}
.zst-title-right1 {
flex: 1;
display: flex;
justify-content: flex-end;
height: 28px;
line-height: 28px;
padding-right: 10px;
/* color: #47B8FF; */
}
.sendZL {
width: 70px;
height: 26px;
border-radius: 5px;
background-image: linear-gradient(#00c0fa, #015eea);
text-align: center;
}
.img {
margin-left: 3px;
}
.fjChart {
/* width: 80vw; */
padding: 3.5vw 3.5vw 0 3.5vw;
/* height: 30vh; */
}
.assess-box {
padding: 10px;
line-height: 18px;
font-size: 12px;
color: #e3e3e3;
}
.fjAndCqfj-box {
width: 100%;
/* height: 40vh; */
margin-top: 10px;
display: flex;
flex-direction: row;
}
.first-line {
width: 11vw;
border: 1px solid #178bed;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
background-color: rgb(51, 157, 255, 0.2);
}
.first-line :last-child {
border-bottom: unset;
}
.first-line-item {
flex: 1;
border: 1px solid #18325e;
text-align: center;
display: flex;
align-items: center;
width: 100%;
padding-left: 1.5vw;
}
.right-box {
display: flex;
border-top: 1px solid #178bed;
border-bottom: 1px solid #178bed;
width: 89vw;
overflow: auto;
}
.right-box-line-item {
width: 33vw;
border-right: 1px solid #178bed;
display: flex;
position: relative;
}
.right-line-box {
width: 11vw;
height: 40vh;
/* border: 0.5px solid #18325E; */
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.first-line-item-right {
flex: 1;
border-bottom: 0.5px solid #18325e;
border-right: 1px solid #18325e;
text-align: center;
display: flex;
align-items: center;
width: 100%;
padding-left: 1.5vw;
}
.right-line-box :first-child {
border-right: unset;
}
.right-title-box {
position: absolute;
top: 0;
text-align: center;
width: 100%;
line-height: 4vh;
}
/* echarts */
#gfChart {
width: 100%;
height: 40vh;
}
.tag_box {
display: flex;
padding: 3vw;
@include font_color($font-color-theme);
@include font_size($font_medium);
}
.but_box {
text-align: center;
}
.but_box>span {
display: inline-block;
padding: 1.5vw 3vw;
margin: 0 1.5vw;
border-radius: 5px;
background-image: linear-gradient(to top, #015eea, #00c0fa);
}
</style>

83
src/pages/views/jqfx/jqAnsisy.vue Normal file
View File

@ -0,0 +1,83 @@
<template>
<div style="padding-top: 14vw">
<TopNav navTitle="警情分析" />
<TopSelectTime @chenge:time="onSelectTime" />
<div class="jqfx_box">
<compareFx :timeActive="timeActive" :keyIndex="keyIndex" />
<!-- <van-tabs
v-model:active="active"
@click-tab="getNav"
title-active-color="rgb(60, 156, 255)"
color="rgb(60, 156, 255)"
:background="backgroundColor"
:title-inactive-color="inactive"
>
<van-tab title="对比分析">
<compareFx :timeActive="timeActive" :keyIndex="keyIndex" />
</van-tab>
<van-tab title="四高分析">
<fourTallFx :timeActive="timeActive" :keyIndex="keyIndex" />
</van-tab>
<van-tab title="专题分析">
<dqscFx :timeActive="timeActive" :keyIndex="keyIndex" />
</van-tab>
</van-tabs> -->
<!-- <u-tabs :list="navList" @click="getNav" :activeStyle="{color: '#fff'}"
:inactiveStyle="{color:'#7188AF'}"
itemStyle="display:flex;justify-content: space-around;padding-left:15px;padding-right:15px; height:42.5px;">
</u-tabs> -->
<!-- </van-sticky> -->
</div>
</div>
</template>
<script setup>
import dqscFx from "./dqscFx.vue";
import compareFx from "./compareFx.vue";
import fourTallFx from "./fourTallFx.vue";
import TopNav from "../../../components/topNav.vue";
import TopSelectTime from "../../../components/topSelectTime.vue";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
const keyIndex = ref(1);
const active = ref(0);
const backgroundColor = ref("#fff");
const inactive = ref("#333");
const timeActive = ref(0);
// onActivated(() => {
// const route = useRoute();
// try {
// if (route.query.jqlx == "jmjq") {
// keyIndex.value++;
// }
// } catch (error) {}
// });
onMounted(() => {
if (getStorage("themeSetting") == "light") {
backgroundColor.value = "#fff";
inactive.value = "#333";
} else {
backgroundColor.value = "#041634";
inactive.value = "#fff";
}
});
function getNav(item) {
active.value = item.name;
}
function onSelectTime(val) {
timeActive.value = val;
}
</script>
<style lang="scss" scoped>
@import "../../../assets/styles/mixin.scss";
.jqfx_box {
padding-bottom: 2vw;
}
::v-deep .van-tabs__nav {
@include bg_color($background-color-theme);
}
::v-deep .van-tabs__nav--card {
margin: 0 1vw;
}
</style>

165
src/pages/views/jqfx/percent.vue Normal file
View File

@ -0,0 +1,165 @@
<template>
<div class="container">
<div class="title-box">
<div class="one-box">
<div class="react-box onebg"></div>
<span>{{ day }}</span>
</div>
<div class="one-box">
<div class="react-box twobg"></div>
<span>{{ yesterday }}</span>
</div>
</div>
<div class="content-box" v-for="(item, index) in dataList" :key="index">
<div class="front-box">
<div class="top-span">{{ item.orgname }}</div>
<div class="bottom-tex" :style="{ color: item.hb <= 0 ? 'green' : 'red' }">
环比:{{ item.hb }}
</div>
</div>
<div class="center-box">
<div class="center-x">
<div class="line-box onebg" :style="'width:' +
(
item.count /
(item.count + item.count1 == 0 ? 1 : item.count + item.count1)
).toFixed(2) *
100 +
'%;'
"></div>
<span>{{ item.count }}</span>
</div>
<div class="center-x">
<div class="line-box twobg" :style="'width:' +
(
item.count1 /
(item.count + item.count1 == 0 ? 1 : item.count + item.count1)
).toFixed(2) *
100 +
'%;'
"></div>
<span>{{ item.count1 }}</span>
</div>
</div>
<div class="right-box">
<div>占比</div>
<span class="span-zhanb">{{ item.zb }}</span>
</div>
</div>
</div>
</template>
<script>
import { compare } from "../../../utils/tools.js";
export default {
props: {
list: Array,
day: String,
yesterday: String,
},
watch: {
list: {
handler(val) {
for (let i = 0; i < val.length; i++) {
let item = val[i];
item.zb = (
(item.count / (item.count2 == 0 ? 1 : item.count2)) *
100
).toFixed(2);
item.hb = item.count - item.count1;
}
this.dataList = val.sort(compare("zb", true));
},
immediate: true,
deep: true,
},
},
data() {
return {
dataList: [],
};
},
methods: {},
};
</script>
<style lang="scss" scoped>
@import "../../../assets/styles/mixin.scss";
.title-box {
margin: 3vh 0;
width: 100vw;
display: flex;
justify-content: center;
@include font_color($font-color-theme);
}
.one-box {
display: flex;
margin-right: 2vw;
height: 4vw;
line-height: 4vw;
}
.react-box {
width: 8vw;
height: 4vw;
border-radius: 1vw;
margin-right: 1vw;
}
.onebg {
background: linear-gradient(#0bbafb, #4285ec);
}
.twobg {
background: linear-gradient(#98e05f, #0de3ac);
}
.content-box {
font-size: 11px;
margin: 3vw;
border-bottom: 1px dashed #224465;
display: flex;
padding-bottom: 2vw;
@include font_color($font-color-theme);
}
.center-x {
display: flex;
align-items: center;
}
.line-box {
/* width: 10vw; */
height: 2vw;
border-radius: 1vw;
margin-right: 1vw;
}
.front-box {
flex: 1;
}
.center-box {
flex: 3;
}
.right-box {
flex: 1;
margin-left: 2vw;
text-align: right;
}
.span-zhanb {
color: #ff7327;
font-size: 18px;
span-align: center;
line-height: 6vw;
}
.bottom-tex {
color: #e82929;
font-size: 11px;
}
</style>

1350
src/pages/views/report/components/normalReport.vue Normal file
View File

File diff suppressed because it is too large Load Diff

1370
src/pages/views/report/components/specialReport.vue Normal file
View File

File diff suppressed because it is too large Load Diff

49
src/pages/views/report/index.vue Normal file
View File

@ -0,0 +1,49 @@
<template>
<div class="container" style="padding-top: 13vw">
<TopNav :navTitle="route.query.zt==0?'报备':'报备信息'" />
<div class="nav_tab">
<span @click="active='a'" :class="active==='a'?'tab active':'tab'">正常报备</span>
<span @click="active='b'" :class="active==='b'?'tab active':'tab'">特殊勤务报备</span>
</div>
<normalReport v-if="active==='a'" />
<specialReport v-else/>
</div>
</template>
<script setup>
import TopNav from "../../../components/topNav.vue";
import normalReport from "./components/normalReport";
import specialReport from "./components/specialReport";
import { computed, ref, reactive, watch, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Toast } from "vant";
const router = useRouter();
const route = useRoute();
const active = ref('a')
</script>
<style lang="scss" scoped>
.container {
margin-top: 2vw;
}
.nav_tab{
padding: 2vw;
display: flex;
justify-content: space-around;
.tab{
background: #a4aec8;
color: #fff;
height: 32px;
line-height: 32px;
width: 40vw;
text-align: center;
border-radius: 16px 16px 16px 0;
}
.tab.active{
background: #517cea;
}
}
</style>