elink-star
/
ShibeiWorkPlatform_Frontend
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

研判分析组件

shibei_master
13176889840 4 years ago
parent
1322d237ee
commit
45b90df1c7
3 changed files with 623 additions and 2 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/views/modules/visual/communityParty/community.vue
  2. 2
      src/views/modules/visual/communityParty/dialogInfo.vue
  3. 621
      src/views/modules/visual/cpts/analyse.vue

2
src/views/modules/visual/communityParty/community.vue
View File

@ -126,7 +126,7 @@ export default {
data () { data () {
return { return {
showedMoreInfo: false, showedMoreInfo: true,
tableLoading: false, tableLoading: false,
warningList: [], warningList: [],
headerList: [ headerList: [

2
src/views/modules/visual/communityParty/dialogInfo.vue
View File

@ -68,7 +68,7 @@
<div class="item"> <div class="item">
<span class="item-field">评价：</span> <span class="item-field">评价：</span>
<span> <span>
<el-rate value="4" disabled></el-rate> <el-rate :value="4" disabled></el-rate>
</span> </span>
</div> </div>
</div> </div>

621
src/views/modules/visual/cpts/analyse.vue
View File

@ -0,0 +1,621 @@
<template>
<div class="analyse-container">
<div class="analyse-wr list-wr">
<div class="analys-col">
<div class="analys-family">
<div class="family-title">(家属)</div>
<div v-for="(item, index) in userList" :key="index" class="family-item" @click="handleUser(item)">{{item.icUserName}}</div>
<!-- <div class="family-item">王亚男哈</div>
<div class="family-item">王亚男</div>
<div class="family-item">王亚男哈</div>
<div class="family-item">王亚</div> -->
</div>
</div>
<div class="analys-col">
<img class="analys-arrow" src="../../../../assets/img/shuju/measure/zuo@2x.png" />
</div>
<div class="analys-col">
<div class="analys-person">
<div class="personal-name">{{userName}}</div>
<div class="personal-tips">(案件居民)</div>
</div>
</div>
<template v-if="hasEvent">
<div class="analys-col analys-col-posi">
<img class="analys-up" src="../../../../assets/img/shuju/measure/up-right.png" />
<img class="analys-up analys-down" src="../../../../assets/img/shuju/measure/down-right.png" />
</div>
<div class="analys-col">
<div class="cate-list cate-list-more">
<div class="cate-row">
<div class="analys-col">
<div class="analys-cate" @click="handleTabs('group')">
<div class="label">楼院小组</div>
<div class="tips">(反应渠道)</div>
<div class="icon">
<img src="../../../../assets/img/shuju/measure/gantanhao.png" />
</div>
</div>
</div>
<div v-if="sourceTab === 'group'" class="analys-col">
<img class="analys-arrow" src="../../../../assets/img/shuju/measure/you@2x.png" />
</div>
</div>
<div class="cate-row">
<div class="analys-col">
<div class="analys-cate" @click="handleTabs('event')">
<div class="label">事件上报</div>
<div class="tips">(反应渠道)</div>
<div class="icon">
<img src="../../../../assets/img/shuju/measure/gantanhao.png" />
</div>
</div>
</div>
<div v-if="sourceTab === 'event'" class="analys-col">
<img class="analys-arrow" src="../../../../assets/img/shuju/measure/you@2x.png" />
</div>
</div>
</div>
</div>
<div class="analys-col analys-col-wr list-wr" id="scroll-wr">
<div class="cate-list cate-list-child">
<div v-for="(item, index) in tempList" :key="index" class="cate-row">
<div class="cate-col">
<div class="analys-cate">
<div class="label">{{item.categoryName}}</div>
<div class="tips">(同类案件)</div>
<div class="icon">
<img src="../../../../assets/img/shuju/measure/gantanhao.png" />
</div>
</div>
</div>
<img class="analys-arrow" src="../../../../assets/img/shuju/measure/you@2x.png" />
<div class="cate-col">
<div class="list list-wr">
<div v-for="(n, i) in item.projectList" :key="index" class="item" @click="handleProject(n)">
<div class="item-status" :class="'item-status-'+n.status">{{filterStatus(n.status)}}</div>
<div class="item-content">{{n.title}}</div>
</div>
<!-- <div class="item">
<div class="item-status">已结案</div>
<div class="item-content">合肥路与安宁路交合肥路与安宁路交</div>
</div> -->
</div>
</div>
</div>
</div>
</div>
</template>
<template v-else>
<div class="analys-col">
<img class="analys-arrow" src="../../../../assets/img/shuju/measure/you@2x.png" />
</div>
<div class="analys-col">
<div class="analys-cate">
<div class="label">楼院小组</div>
<div class="tips">(反应渠道)</div>
<div class="icon">
<img src="../../../../assets/img/shuju/measure/gantanhao.png" />
</div>
</div>
</div>
<div class="analys-col">
<img class="analys-up" src="../../../../assets/img/shuju/measure/up-right.png" />
<img class="analys-arrow" src="../../../../assets/img/shuju/measure/you@2x.png" />
<img class="analys-up analys-down" src="../../../../assets/img/shuju/measure/down-right.png" />
</div>
<div class="analys-col analys-col-wr list-wr">
<div class="cate-list pad10">
<div v-for="(item, index) in tempList" :key="index" class="cate-row">
<div class="cate-col">
<div class="analys-cate">
<div class="label">{{item.categoryName}}</div>
<div class="tips">(同类案件)</div>
<div class="icon">
<img src="../../../../assets/img/shuju/measure/gantanhao.png" />
</div>
</div>
</div>
<img class="analys-arrow" src="../../../../assets/img/shuju/measure/you@2x.png" />
<div class="cate-col">
<div class="list list-wr">
<div v-for="(n, i) in item.projectList" :key="index" class="item" @click="handleProject(n)">
<div class="item-status" :class="'item-status-'+n.status">{{filterStatus(n.status)}}</div>
<div class="item-content">{{n.title}}</div>
</div>
<!-- <div class="item">
<div class="item-status">已结案</div>
<div class="item-content">合肥路与安宁路交合肥路与安宁路交</div>
</div> -->
</div>
</div>
</div>
<!-- <div class="cate-row">
<div class="cate-col">
<div class="analys-cate">
<div class="label">楼院小组</div>
<div class="tips">(同类案件)</div>
<div class="icon">
<img src="../../../../assets/img/shuju/measure/gantanhao.png" />
</div>
</div>
</div>
<img class="analys-arrow" src="../../../../assets/img/shuju/measure/you@2x.png" />
<div class="cate-col">
<div class="list list-wr">
<div class="item">
<div class="item-status">已结案</div>
<div class="item-content">合肥路与安宁路交合肥路与安宁路交</div>
</div>
<div class="item">
<div class="item-status">已结案</div>
<div class="item-content">合肥路与安宁路交合肥路与安宁路交</div>
</div>
<div class="item">
<div class="item-status">已结案</div>
<div class="item-content">合肥路与安宁路交合肥路与安宁路交</div>
</div>
<div class="item">
<div class="item-status">已结案</div>
<div class="item-content">合肥路与安宁路交合肥路与安宁路交</div>
</div>
<div class="item">
<div class="item-status">已结案</div>
<div class="item-content">合肥路与安宁路交合肥路与安宁路交</div>
</div>
</div>
</div>
</div> -->
</div>
</div>
</template>
</div>
</div>
</template>
<script>
export default {
name: 'Analyse',
props: {
hasEvent: {
type: Boolean,
default: false
}
},
data () {
return {
sourceTab: 'group',
userList: [
{
homeId: '1',
icUserId: '1',
icUserName: '沾上干'
},
{
homeId: '2',
icUserId: '2',
icUserName: '李四'
},
{
homeId: '3',
icUserId: '3',
icUserName: '王五哈哈'
}
],
userName: '王亚男哈',
groupList: [
{
categoryName: '哈哈哈',
categoryCode: '1',
projectList: [
{
title: '我也不知道该谢谢什么啊啊啊',
status: 'pending',
projectId: '10'
}
]
},
{
categoryName: '啊啊啊啊',
categoryCode: '2',
projectList: [
{
title: '我也不知道该谢谢什么啊啊啊',
status: 'pending',
projectId: '12'
}
]
},
{
categoryName: '啦啦啦',
categoryCode: '3',
projectList: [
{
title: '我也不知道该谢谢什么啊啊啊',
status: 'closed',
projectId: '13'
}
]
},
{
categoryName: '为民服务',
categoryCode: '4',
projectList: [
{
title: '我也不知道该谢谢什么啊啊啊',
status: 'pending',
projectId: '14'
}
]
}
],
eventList: [
{
categoryName: '辨明服务',
categoryCode: '1',
projectList: [
{
title: '不知道写了什么哈哈哈',
status: 'closed',
projectId: '1'
},
{
title: '罗里吧嗦写了什么哈哈哈',
status: 'closed',
projectId: '2'
},
{
title: '胡说八道写了什么哈哈哈',
status: 'closed',
projectId: '1=3'
},
{
title: '费眼飞鱼不知道写了什么哈哈哈',
status: 'closed',
projectId: '1=4'
},
{
title: '狗屁不通不知道写了什么哈哈哈',
status: 'closed',
projectId: '5'
},
{
title: '啦啦啦不知道写了什么哈哈哈',
status: 'closed',
projectId: '6'
}
]
},
{
categoryName: '水煮鱼辨明服务辨明服务',
categoryCode: '4',
projectList: [
{
title: '熟煮雨不知道写了什么哈哈哈',
status: 'pending',
projectId: '4'
}
]
},
{
categoryName: '开心麻花',
categoryCode: '2',
projectList: [
{
title: '不知道开心麻花写了什么哈哈哈',
status: 'closed',
projectId: '1'
}
]
},
{
categoryName: '酸菜鱼',
categoryCode: '3',
projectList: [
{
title: '不知道酸菜鱼写了什么哈哈哈',
status: 'pending',
projectId: '3'
}
]
}
],
tempList: []
}
},
created() {
this.tempList = [...this.groupList]
},
methods: {
filterStatus(status) {
const statusObj = {
pending: '待处理',
closed: '已结案'
}
return statusObj[status]
},
handleTabs(type) {
if (type === 'group') this.tempList = [ ...this.groupList ]
else if (type === 'event') this.tempList = [ ...this.eventList ]
this.sourceTab = type
const _dom = document.getElementById('scroll-wr')
_dom.scrollTop = 0
},
handleProject(item) {
this.$emit('project', item)
},
handleUser(item) {
this.$emit('user', item)
}
}
}
</script>
<style lang="scss" scoped>
.analyse-container {
.analyse-wr {
display: flex;
align-items: center;
width: 100%;
height: 560px;
box-sizing: border-box;
overflow: auto;
.analys-col {
position: relative;
cursor: pointer;
.analys-family {
text-align: center;
.family-title {
margin-bottom: 8px;
}
.family-item {
width: 76px;
box-sizing: border-box;
margin-bottom: 28px;
padding: 8px 0;
font-size: 14px;
color: #fff;
text-align: center;
background: rgba(255, 255, 255, 0);
border: 1px solid #1257C9;
border-radius: 2px;
box-shadow: 0 0 5px 2px rgba(18, 87, 201, 1) inset;
}
}
.analys-up {
display: block;
width: 64px;
height: 99px;
box-sizing: border-box;
margin-bottom: 85px;
}
.analys-down {
margin-top: 85px;
margin-bottom: 0;
}
.analys-arrow {
display: block;
width: 32px;
height: 18px;
box-sizing: border-box;
margin: 0 6px;
}
.analys-person {
width: 154px;
height: 152px;
box-sizing: border-box;
padding-top: 60px;
color: #fff;
text-align: center;
background: url('../../../../assets/img/shuju/measure/zhuhu@2x.png') no-repeat center;
background-size: cover;
.personal-name {
font-size: 18px;
font-weight: 500;
}
.personal-tips {
margin-top: 6px;
font-size: 14px;
}
}
.analys-cate {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
width: 120px;
min-height: 64px;
box-sizing: border-box;
padding: 14px 20px;
text-align: center;
color: #fff;
cursor: pointer;
background: rgba(255, 255, 255, 0);
border: 1px solid #1257C9;
border-radius: 4px;
box-shadow: 1px 1px 10px 5px rgba(18, 87, 201, 1) inset;
.label {
font-size: 18px;
font-weight: 500;
}
.tips {
margin-top: 6px;
font-size: 14px;
}
.icon {
position: absolute;
right: 4px;
bottom: 4px;
width: 12px;
height: 12px;
img {
display: block;
width: 100%;
height: 100%;
}
}
}
.cate-list {
// padding-top: 200px;
// display: flex;
// flex-direction: column;
// justify-content: space-between;
.cate-row {
display: flex;
align-items: center;
margin-bottom: 20px;
// margin-top: 0;
}
}
.cate-list-more {
// padding-top: 300px;
.cate-row {
margin-bottom: 200px;
// margin-top: 0;
}
.cate-row:last-child {
margin-bottom: 0;
}
}
.cate-list-child {
padding-top: 60px;
}
.list {
width: 230px;
height: 165px;
box-sizing: border-box;
padding: 4px 14px 10px;
background: rgba(255, 255, 255, 0);
border: 1px solid #1257C9;
overflow: auto;
border-radius: 4px;
box-shadow: 1px 1px 10px 5px rgba(18, 87, 201, 1) inset;
.item {
display: flex;
align-items: center;
width: 100%;
box-sizing: border-box;
padding: 8px 0;
border-bottom: 1px dashed rgba(131, 152, 217, 1);
.item-status {
min-width: 50px;
// height: 15px;
box-sizing: border-box;
margin-right: 8px;
padding: 4px 0 2px;
font-size: 10px;
text-align: center;
// line-height: 15px;
background: #0C5CFE;
border-radius: 2px;
&-pending {
background: rgba(224, 84, 0, 1);
}
}
.item-content {
font-size: 14px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
}
}
.analys-col-wr {
height: 100%;
box-sizing: border-box;
padding-right: 30px;
overflow: auto;
}
.analys-col-posi {
// .analys-up, .analys-down {
// position: absolute;
// }
.analys-up {
// top: -200px;
// left: -30px;
// margin-bottom: 160px;
}
.analys-down {
// margin-top: 160px;
// margin-bottom: 0;
// top: unset;
// bottom: -200px;
// left: -30px;
}
}
}
}
.pad10 {
padding-top: 10px;
}
.list-wr::-webkit-scrollbar {
width: 8px;
// background: linear-gradient(270deg, #0063FE, #0095FF);
}
.list-wr::-webkit-scrollbar-corner,
/* 滚动条角落 */
.list::-webkit-scrollbar-thumb,
.scroll-container::-webkit-scrollbar-track { /*滚动条的轨道*/
border-radius: 4px;
}
.list-wr::-webkit-scrollbar-corner,
.list-wr::-webkit-scrollbar-track {
/* 滚动条轨道 */
background: rgba(12, 129, 254, .24);
// box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
}
.list-wr::-webkit-scrollbar-thumb {
/* 滚动条手柄 */
background: linear-gradient(270deg, #0063FE, #0095FF);
}
</style>
Write Preview
Loading…
Cancel
Save