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

研判分析组件111

shibei_master
13176889840 4 years ago
parent
fe41c7f4d7
commit
07b8028c6d
2 changed files with 309 additions and 218 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. 208
      src/views/modules/visual/communityParty/dialogInfo.vue
  2. 319
      src/views/modules/visual/cpts/analyse.vue

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

@ -92,7 +92,11 @@
</div> </div>
</div> </div>
<analyse /> <div style="padding: 30px 0;">
<analyse :single-list="demandList" :single-title="'需求上报'" :more-title="'事件上报'" :user-list="userLists"
:user-name="userName" :has-event="false" :more-list="eventList" />
</div>
</cpt-card> </cpt-card>
</div> </div>
@ -135,6 +139,208 @@ export default {
louList: [], louList: [],
danyuanList: [], danyuanList: [],
homeList: [], homeList: [],
demandList: [
{
categoryName: '辨明服务',
categoryCode: '1',
showItem: false,
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: '1',
showItem: false,
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: '1',
showItem: false,
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'
}
]
}
],
userLists: [
{
homeId: '1',
icUserId: '1',
icUserName: '沾上干'
},
{
homeId: '2',
icUserId: '2',
icUserName: '李四'
},
{
homeId: '3',
icUserId: '3',
icUserName: '王五哈哈'
}
],
userName: '王亚男哈',
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'
}
]
}
],
}; };
}, },

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

@ -36,7 +36,7 @@
<div class="analys-col"> <div class="analys-col">
<div class="analys-cate" @click="handleTabs('group')"> <div class="analys-cate" @click="handleTabs('group')">
<div class="label">楼院小组</div> <div class="label">{{ singleTitle }}</div>
<div class="tips">(反应渠道)</div> <div class="tips">(反应渠道)</div>
<div class="icon"> <div class="icon">
<img src="../../../../assets/img/shuju/measure/gantanhao.png" /> <img src="../../../../assets/img/shuju/measure/gantanhao.png" />
@ -54,7 +54,7 @@
<div class="analys-col"> <div class="analys-col">
<div class="analys-cate" @click="handleTabs('event')"> <div class="analys-cate" @click="handleTabs('event')">
<div class="label">事件上报</div> <div class="label">{{ moreTitle }}</div>
<div class="tips">(反应渠道)</div> <div class="tips">(反应渠道)</div>
<div class="icon"> <div class="icon">
<img src="../../../../assets/img/shuju/measure/gantanhao.png" /> <img src="../../../../assets/img/shuju/measure/gantanhao.png" />
@ -71,7 +71,7 @@
</div> </div>
<div class="analys-col analys-col-wr list-wr" id="scroll-wr"> <div class="analys-col analys-col-wr analys-col-more list-wr" id="scroll-wr">
<div class="cate-list cate-list-child"> <div class="cate-list cate-list-child">
<div v-for="(item, index) in tempList" :key="index" class="cate-row"> <div v-for="(item, index) in tempList" :key="index" class="cate-row">
@ -79,25 +79,29 @@
<div class="analys-cate"> <div class="analys-cate">
<div class="label">{{item.categoryName}}</div> <div class="label">{{item.categoryName}}</div>
<div class="tips">(同类案件)</div> <div class="tips">(同类案件)</div>
<div class="icon"> <div class="icon" @click="handleShow(item)">
<img src="../../../../assets/img/shuju/measure/gantanhao.png" /> <img src="../../../../assets/img/shuju/measure/gantanhao.png" />
</div> </div>
</div> </div>
</div> </div>
<img class="analys-arrow" src="../../../../assets/img/shuju/measure/you@2x.png" /> <div class="cate-col cate-col-arrow">
<img v-show="item.showItem" class="analys-arrow" src="../../../../assets/img/shuju/measure/you@2x.png" />
</div>
<div class="cate-col"> <div class="cate-col cate-col-w100">
<div class="list list-wr"> <div class="cate-list-w0" :class="item.showItem && 'cate-list-w100'">
<div v-for="(n, i) in item.projectList" :key="index" class="item" @click="handleProject(n)"> <div class="list list-wr">
<div class="item-status" :class="'item-status-'+n.status">{{filterStatus(n.status)}}</div> <div v-for="(n, i) in item.projectList" :key="i" class="item" @click="handleProject(n)">
<div class="item-content">{{n.title}}</div> <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 class="item">
<div class="item-status">已结案</div>
<div class="item-content">合肥路与安宁路交合肥路与安宁路交</div>
</div> -->
</div> </div>
</div> </div>
@ -115,91 +119,56 @@
<div class="analys-col"> <div class="analys-col">
<div class="analys-cate"> <div class="analys-cate">
<div class="label">楼院小组</div> <div class="label">{{ singleTitle }}</div>
<div class="tips">(反应渠道)</div> <div class="tips">(反应渠道)</div>
<div class="icon"> <!-- <div class="icon">
<img src="../../../../assets/img/shuju/measure/gantanhao.png" /> <img src="../../../../assets/img/shuju/measure/gantanhao.png" />
</div> </div> -->
</div> </div>
</div> </div>
<div class="analys-col"> <div class="analys-col">
<img class="analys-up" src="../../../../assets/img/shuju/measure/up-right.png" /> <img v-if="tempList.length > 1" class="analys-up" src="../../../../assets/img/shuju/measure/up-right.png" />
<img class="analys-arrow" src="../../../../assets/img/shuju/measure/you@2x.png" /> <img v-if="tempList.length != 2" 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" /> <img v-if="tempList.length > 1"
class="analys-up analys-down" src="../../../../assets/img/shuju/measure/down-right.png" />
</div> </div>
<div class="analys-col analys-col-wr list-wr"> <div class="analys-col list-wr" :class="tempList.length > 2 && 'analys-col-wr' || 'analys-single'">
<div class="cate-list pad10"> <div class="cate-list">
<div v-for="(item, index) in tempList" :key="index" class="cate-row"> <div v-for="(item, index) in tempList" :key="index" class="cate-row">
<div class="cate-col"> <div class="cate-col">
<div class="analys-cate"> <div class="analys-cate">
<div class="label">{{item.categoryName}}</div> <div class="label">{{item.categoryName}}</div>
<div class="tips">(同类案件)</div> <div class="tips">(同类案件)</div>
<div class="icon"> <div class="icon" @click="handleShow(item)">
<img src="../../../../assets/img/shuju/measure/gantanhao.png" /> <img src="../../../../assets/img/shuju/measure/gantanhao.png" />
</div> </div>
</div> </div>
</div> </div>
<div class="cate-col cate-col-arrow">
<img class="analys-arrow" src="../../../../assets/img/shuju/measure/you@2x.png" /> <img v-show="item.showItem" 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 class="cate-col cate-col-w100">
<!-- <div class="cate-row"> <div class="cate-list-w0" :class="item.showItem && 'cate-list-w100'">
<div class="list list-wr">
<div class="cate-col"> <div v-for="(n, i) in item.projectList" :key="i" class="item" @click="handleProject(n)">
<div class="analys-cate"> <div class="item-status" :class="'item-status-'+n.status">{{filterStatus(n.status)}}</div>
<div class="label">楼院小组</div> <div class="item-content">{{n.title}}</div>
<div class="tips">(同类案件)</div> </div>
<div class="icon"> <!-- <div class="item">
<img src="../../../../assets/img/shuju/measure/gantanhao.png" /> <div class="item-status">已结案</div>
<div class="item-content">合肥路与安宁路交合肥路与安宁路交</div>
</div> -->
</div> </div>
</div> </div>
</div> </div>
<img class="analys-arrow" src="../../../../assets/img/shuju/measure/you@2x.png" /> </div>
<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>
</div> </div>
@ -216,151 +185,25 @@ export default {
hasEvent: { hasEvent: {
type: Boolean, type: Boolean,
default: false default: false
} },
singleTitle: {
type: String,
default: '楼院小组'
},
moreTitle: String,
userList: Array,
userName: String,
singleList: Array,
moreList: Array
}, },
data () { data () {
return { return {
sourceTab: 'group', 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: [] tempList: []
} }
}, },
created() { created() {
this.tempList = [...this.groupList] this.tempList = [...this.singleList]
}, },
methods: { methods: {
filterStatus(status) { filterStatus(status) {
@ -371,8 +214,8 @@ export default {
return statusObj[status] return statusObj[status]
}, },
handleTabs(type) { handleTabs(type) {
if (type === 'group') this.tempList = [ ...this.groupList ] if (type === 'group') this.tempList = [ ...this.singleList ]
else if (type === 'event') this.tempList = [ ...this.eventList ] else if (type === 'event') this.tempList = [ ...this.moreList ]
this.sourceTab = type this.sourceTab = type
const _dom = document.getElementById('scroll-wr') const _dom = document.getElementById('scroll-wr')
_dom.scrollTop = 0 _dom.scrollTop = 0
@ -382,6 +225,9 @@ export default {
}, },
handleUser(item) { handleUser(item) {
this.$emit('user', item) this.$emit('user', item)
},
handleShow(item) {
item.showItem = !item.showItem
} }
} }
} }
@ -393,7 +239,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 560px; max-height: 560px;
box-sizing: border-box; box-sizing: border-box;
overflow: auto; overflow: auto;
@ -506,6 +352,37 @@ export default {
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: 20px;
// margin-top: 0; // margin-top: 0;
.cate-col-arrow {
width: 32px;
height: 18px;
// box-sizing: border-box;
margin: 0 6px;
.analys-arrow {
display: block;
width: 32px;
height: 100%;
box-sizing: border-box;
margin: 0 auto;
}
}
.cate-col-w100 {
width: 230px;
.cate-list-w0 {
width: 0;
transition: width .2s;
overflow: hidden;
// border: 0;
// padding: 0;
}
.cate-list-w100 {
width: 230px;
// padding: 4px 14px 10px;
// // background: rgba(255, 255, 255, 0);
// border: 1px solid #1257C9;
// overflow: auto;
transition: width .2s;
}
}
} }
} }
.cate-list-more { .cate-list-more {
@ -571,6 +448,14 @@ export default {
padding-right: 30px; padding-right: 30px;
overflow: auto; overflow: auto;
} }
.analys-col-more {
height: 560px;
}
.analys-single {
.list {
height: 235px;
}
}
.analys-col-posi { .analys-col-posi {
// .analys-up, .analys-down { // .analys-up, .analys-down {
// position: absolute; // position: absolute;
@ -578,7 +463,7 @@ export default {
.analys-up { .analys-up {
// top: -200px; // top: -200px;
// left: -30px; // left: -30px;
// margin-bottom: 160px; // margin-bottom: 160px;
} }
.analys-down { .analys-down {
// margin-top: 160px; // margin-top: 160px;

Write Preview
Loading…
Cancel
Save