李劲龙 5 months ago
commit 21340f1e19

@ -1,6 +1,6 @@
<template>
<div >
<section class="app-main" v-if="isShow" >
<section class="app-main" :class="$route.meta.title == '重点人员详情' ? 'app-main-two':''" v-if="isShow" >
<transition name="fade-transform" mode="out-in">
<keep-alive :include="cachedViews">
<router-view v-if="!$route.meta.link" :key="key" />
@ -69,6 +69,10 @@ export default {
background: #ffffff;
padding: 10px;
}
.app-main-two {
padding: 0px;
background-color: transparent;
}
.fixed-header+.app-main {
padding-top: 50px;

@ -0,0 +1,4 @@
export { default as tabOne } from './tabOne'
export { default as tabTwo } from './tabTwo'
export { default as tabThree } from './tabThree'
export { default as tabFour } from './tabFour'

@ -0,0 +1,96 @@
<template>
<div class="money-schedule">
<div class="schedule-timeline">
<el-timeline v-loading="loading">
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
color="#192A92"
>
{{ activity.content }}
</el-timeline-item>
</el-timeline>
</div>
</div>
</template>
<script>
export default {
name:"tabThree",
props:{
id:{
type:Number,
default:null,
}
},
data() {
return {
/**
* {
size: 'large',
icon: 'icon iconfont icon-jc-kong-yuan',
status: 2,
}, {
icon: 'icon iconfont icon-jc-kong-yuan',
size: 'large',
status: 1,
}, {
size: 'large',
icon: 'icon iconfont icon-jc-kong-yuan',
status: 0,
}
*
*/
activities: [
{
content:"2024-09-21 08:50:08 XXXXX超出边界"
},{
content:"2024-08-21 08:50:08 XXXXX超出边界"
},{
content:"2024-07-21 08:50:08 XXXXX超出边界"
},
],
loading:false,
}
},
mounted(){
},
methods:{
//
getList() {
this.loading = true;
jProjectFund(this.id).then(res=>{
let arr = [];
res.data.forEach(element => {
let obj = {};
obj.size = 'large';
obj.icon = 'icon iconfont icon-jc-kong-yuan';
obj.fundAmount = element.fundAmount;
obj.appropriationTime = element.appropriationTime;
arr.push(obj);
});
this.activities = arr;
this.loading = false;
}).catch((err)=>{
// console.log(err);
this.activities = [];
this.loading = false;
})
},
formatDate(dateString,id) {
const year = dateString.slice(0, 4);
const month = dateString.slice(4, 6);
const day = dateString.slice(6, 8);
if(id == 1) {
return `${year}${month}${day}`;
} else {
return `${year}-${month}-${day}`;
}
}
},
}
</script>
<style lang="scss" scoped>
.money-schedule {
padding: 20px 0px;
}
</style>

@ -0,0 +1,94 @@
<template>
<div class="project-info-box">
<div class="enterprise-header">
<span class="dataCloudMap-birght"></span>
<div class="enterprise-header-title">详细信息</div>
</div>
<el-descriptions :column="3" size="medium" border>
<el-descriptions-item labelClassName="tabOneLabel" contentClassName="tabOneContent" label="人员姓名">
张三
</el-descriptions-item>
<el-descriptions-item labelClassName="tabOneLabel" contentClassName="tabOneContent" label="性别">
</el-descriptions-item>
<el-descriptions-item labelClassName="tabOneLabel" contentClassName="tabOneContent" label="出生年月">
1975年7月
</el-descriptions-item>
<el-descriptions-item labelClassName="tabOneLabel" contentClassName="tabOneContent" label="身份证号">
320815154649782452
</el-descriptions-item>
<el-descriptions-item labelClassName="tabOneLabel" contentClassName="tabOneContent" label="联系方式">
13856699875
</el-descriptions-item>
<el-descriptions-item labelClassName="tabOneLabel" contentClassName="tabOneContent" label="工作单位">
XXXXXXXX
</el-descriptions-item>
<el-descriptions-item labelClassName="tabOneLabel" contentClassName="tabOneContent" label="家庭住址">
XXXXXXXXXXXXXXXXXXXX
</el-descriptions-item>
</el-descriptions>
</div>
</template>
<script>
export default {
name:"tabOne",
props:{
detailedInfo:{
type:Object,
default:()=>{
return {};
}
},
fileJson:{
type:Object,
default:()=>{
return {};
}
},
enterInfo:{
type:Object,
default:()=>{
return {}
}
}
},
data() {
return {
info:[],
fileInfo:[],
loading:false,
VUE_APP_BASE_API:process.env.VUE_APP_BASE_API,
}
},
mounted() {
// console.log(this.info,"tabOne");
// this.loading = true;
},
methods:{
},
}
</script>
<style scoped lang='scss'>
.project-info-box {
padding: 10px;
.enterprise-header {
display: flex;
align-items: center;
margin-bottom: 10px;
.dataCloudMap-birght {
width: 6px;
height: 18px;
background: #0086FF;
box-shadow: 3px 0 3px 0px #0086FF;
border-radius: 5px 5px 5px 5px;
}
.enterprise-header-title {
font-family: AlibabaPuHuiTiB;
margin: 0 10px;
font-weight: bold;
font-size: 18px;
color: #333333;
}
}
}
</style>

@ -0,0 +1,214 @@
<template>
<div class="three-box">
<el-row class="row-one">
<div class="search">
<div class="content">
时间范围
<div class="time-query">
<div class="interval-select">
<div class="star-time">
<el-time-picker
v-model="queryTime.fromTime"
align="right"
:clearable="false"
format="HH:mm:ss"
value-format="HH:mm:ss"
placeholder="开始时间"
>
</el-time-picker>
</div>
<div class="symbol">~</div>
<div class="end-time">
<el-time-picker
v-model="queryTime.toTime"
align="right"
:clearable="false"
format="HH:mm:ss"
value-format="HH:mm:ss"
placeholder="结束时间"
>
</el-time-picker>
</div>
</div>
</div>
</div>
</div>
<div class="searchBtn">
<el-button
type="primary"
size="mini"
icon="el-icon-search"
@click="searchList"
>查询</el-button
>
<el-button size="mini" icon="el-icon-refresh-left" @click="resetTwo"
>重置</el-button
>
</div>
</el-row>
<el-row style="margin-top: 20px;">
<div style="display: flex;">
<div>轨迹地图</div>
<div id="gjMap"></div>
</div>
</el-row>
</div>
</template>
<script>
export default {
name:"tabThree",
props:{
id:{
type:Number,
default:null,
}
},
data() {
return {
activities: [],
loading:false,
queryTime:{
fromTime:"",
toTime:""
},
}
},
mounted(){
},
methods:{
searchList() {
},
//
resetTwo() {
},
//
getList() {
this.loading = true;
jProjectFund(this.id).then(res=>{
let arr = [];
res.data.forEach(element => {
let obj = {};
obj.size = 'large';
obj.icon = 'icon iconfont icon-jc-kong-yuan';
obj.fundAmount = element.fundAmount;
obj.appropriationTime = element.appropriationTime;
arr.push(obj);
});
this.activities = arr;
this.loading = false;
}).catch((err)=>{
// console.log(err);
this.activities = [];
this.loading = false;
})
},
formatDate(dateString,id) {
const year = dateString.slice(0, 4);
const month = dateString.slice(4, 6);
const day = dateString.slice(6, 8);
if(id == 1) {
return `${year}${month}${day}`;
} else {
return `${year}-${month}-${day}`;
}
}
},
}
</script>
<style lang="scss" scoped>
.three-box {
padding: 10px 20px;
.row-one {
display: flex;
align-items: center;
}
.content {
display: flex;
align-items: center;
font-size: 16px;
font-weight: 500;
// line-height: 20px;
margin-right: 40px;
.time-query {
height: 30px;
background-size: 100% 100%;
.interval-select {
display: flex;
align-items: center;
::v-deep .el-input__prefix {
display: none;
}
.star-time,
.end-time {
position: relative;
.data_icon {
position: absolute;
right: 5px;
top: 8px;
width: 20px;
}
::v-deep .el-date-editor {
// background-color: transparent;
width: 150px;
.el-input__inner {
// background-color: transparent;
// border: none;
width: 100%;
height: 30px;
font-size: 14px;
font-weight: 500;
text-align: center;
}
// .el-input__inner::placeholder {
// /* placeholder */
// font-size: 14px;
// font-family: "Source Han Sans CN-Regular";
// font-weight: 400;
// color: #d3eef2;
// -webkit-background-clip: text;
// -webkit-text-fill-color: rgba(211, 238, 242, 0.2);
// }
}
}
.symbol {
width: 14px;
// height: 6px;
line-height: 15px;
margin: 0 5px;
background-size: 100% 100%;
}
}
}
.btns {
width: 92px;
height: 35px;
background-image: url("../../../../../../assets/images/inquirebg.png");
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
img {
width: 24px;
margin-right: 5px;
}
span {
font-size: 14px;
font-family: "Source Han Sans CN-Regular";
font-weight: 400;
color: #ffffff;
line-height: 20px;
}
}
.reset {
background-image: url("../../../../../../assets/images/resetbg.png");
margin: 0 20px;
}
}
}
#gjMap {
width: 700px;
height: 400px;
background-color: red;
}
</style>

@ -0,0 +1,89 @@
<template>
<div class="L-unitInfo">
<el-row>
<el-col :span="12" class="left-img-box">
<div class="img-top-box">
<div class="enterprise-header">
<span class="dataCloudMap-birght"></span>
<div class="enterprise-header-title">正面照</div>
</div>
</div>
<div class="img-bottom-box">
<div class="enterprise-header">
<span class="dataCloudMap-birght"></span>
<div class="enterprise-header-title">其他照片</div>
</div>
</div>
</el-col>
<el-col :span="12" class="right-img-box">
<div class="enterprise-header">
<span class="dataCloudMap-birght"></span>
<div class="enterprise-header-title">身份证照片</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name:"tabTwo",
data() {
return {
// 01 02
userType: this.$store.state.user.userType,
}
},
props:{
info:{
type:Object,
default:()=>{
return {}
}
}
},
methods:{
goEnterprice(creditCode){
// console.log(creditCode);
if(this.userType == '01') {
this.$router.push({
name: 'EenterInfo',
query: { userId: this.info.id, creditCode: creditCode }
})
} else {
this.$router.push({
name: 'enterpriselibraryInfo',
query: { userId: this.info.id, creditCode: creditCode }
})
}
},
},
}
</script>
<style lang="scss" scoped>
.L-unitInfo {
padding: 10px;
.enterprise-header {
display: flex;
align-items: center;
margin-bottom: 10px;
.dataCloudMap-birght {
width: 6px;
height: 18px;
background: #0086FF;
box-shadow: 3px 0 3px 0px #0086FF;
border-radius: 5px 5px 5px 5px;
}
.enterprise-header-title {
font-family: AlibabaPuHuiTiB;
margin: 0 10px;
font-weight: bold;
font-size: 18px;
color: #333333;
}
}
.left-img-box {
display: flex;
flex-direction: column;
}
}
</style>

@ -1,24 +1,180 @@
<template>
<div>
详情
</div>
<div class="renyuan-box">
<div class="box-top">
<div class="enterprise-header">
<span class="dataCloudMap-birght"></span>
<div class="enterprise-header-title">基本信息</div>
</div>
<el-row class="base-info-box">
<el-col :span="5" style="margin-right: 40px;">
<div class="img-box">
<span>人员照片</span>
<img src="@/assets/images/yyzz.png" alt="">
</div>
</el-col>
<el-col :span="19">
<el-col :span="12">
<div class="info-items">
<div class="item">
<div>人员姓名</div>
<span>张三</span>
</div>
<div class="item">
<div>身份证号</div>
<span>364xxxxxxxxxxxxxxx</span>
</div>
</div>
<div class="info-cause">
<div>监控原因</div>
<div class="specific-cause">重点监控对象曾有违法行为</div>
</div>
</el-col>
<el-col :span="12">
<div class="info-items">
<div class="item">
<div>性别</div>
<span></span>
</div>
<div class="item">
<div>联系方式</div>
<span>139xxxx5657</span>
</div>
</div>
</el-col>
</el-col>
</el-row>
</div>
<el-row class="base-info-bootm-box">
<el-tabs
v-model="activeName"
@tab-click="handleClick"
style="color: #edeef0"
>
<el-tab-pane label="详细信息" name="first" />
<el-tab-pane label="人脸库" name="second" />
<el-tab-pane label="轨迹回放" name="third" />
<el-tab-pane label="边界预警" name="four" />
</el-tabs>
<div class="bottom-box-component">
<tab-one v-if="activeName =='first'"></tab-one>
<tab-two v-if="activeName =='second'"></tab-two>
<tab-three v-if="activeName =='third'"></tab-three>
<tab-four v-if="activeName =='four'"></tab-four>
</div>
</el-row>
</div>
</template>
<script>
import { tabOne, tabTwo, tabThree, tabFour, tabFive, } from "./components"
export default {
name: '',
components: {},
components:{
tabOne,
tabTwo,
tabThree,
tabFour,
tabFive,
},
data () {
return {
activeName: "first",
}
},
created () { },
mounted () { },
methods: { },
computed: {}
methods: {
handleClick(e) {
if (this.activeName == "first") {
} else if (this.activeName == "second") {
} else if (this.activeName == "third") {
} else if(this.activeName == "four") {
}
},
},
}
</script>
<style scoped lang='scss'>
.renyuan-box {
height: 100%;
display: flex;
flex-direction: column;
.box-top {
background-color: #fff;
border-radius: 5px;
padding: 10px;
margin-bottom: 20px;
}
.enterprise-header {
display: flex;
align-items: center;
margin-bottom: 10px;
.dataCloudMap-birght {
width: 6px;
height: 18px;
background: #0086FF;
box-shadow: 3px 0 3px 0px #0086FF;
border-radius: 5px 5px 5px 5px;
}
.enterprise-header-title {
font-family: AlibabaPuHuiTiB;
margin: 0 10px;
font-weight: bold;
font-size: 18px;
color: #333333;
}
}
.base-info-box {
margin: 20px 0;
padding: 0px 10px;
display: flex;
.img-box {
display: flex;
span {
}
img {
flex: 1;
height: 150px;
}
}
.info-items {
display: grid;
grid-template-columns: 1fr;
row-gap: 30px;
.item {
display: flex;
align-items: center;
span {
flex: 1;
}
}
}
.info-cause {
display: flex;
align-items: center;
margin-top: 20px;
div {
}
.specific-cause {
border-radius: 3px;
border: 1px solid #ccc;
padding: 5px 10px;
}
}
}
.base-info-bootm-box {
flex: 1;
background-color: #fff;
padding: 10px 0;
border-radius: 5px;
::v-deep .el-tabs {
.el-tabs__item {
width: 150px;
font-weight: bold;
text-align: center;
}
}
}
}
</style>

Loading…
Cancel
Save