jiangyy
4 years ago
57 changed files with 6808 additions and 2350 deletions
@ -1,5 +1,5 @@ |
|||
NODE_ENV=production |
|||
VUE_APP_API_SERVER = https://epmet-test.elinkservice.cn/api |
|||
# VUE_APP_API_SERVER = http://192.168.1.140/api |
|||
# VUE_APP_API_SERVER = https://epmet-test.elinkservice.cn/api |
|||
VUE_APP_API_SERVER = http://192.168.1.140/api |
|||
VUE_APP_NODE_ENV=prod:sit |
|||
VUE_APP_PUBLIC_PATH=epmet-oper |
|||
|
After Width: | Height: | Size: 51 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
@ -0,0 +1,71 @@ |
|||
@import "../../c/config"; |
|||
@import "../../c/function"; |
|||
@import "./c/common"; |
|||
|
|||
.g-cpt { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: space-between; |
|||
margin-top: 5px; |
|||
} |
|||
|
|||
.m-sizer { |
|||
width: 195px; |
|||
margin: 10px 0; |
|||
margin-left: auto; |
|||
|
|||
> span { |
|||
font-size: 16px; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
::v-deep .el-input { |
|||
width: 140px; |
|||
height: 36px; |
|||
.el-input__inner { |
|||
height: 100%; |
|||
padding: 0 10px; |
|||
color: #fff; |
|||
line-height: 36px; |
|||
background: #06186d; |
|||
border: 1px solid #1a64cc; |
|||
} |
|||
.el-icon-arrow-up:before { |
|||
content: "\e78f"; |
|||
} |
|||
} |
|||
::v-deep .el-date-editor { |
|||
.el-input__prefix { |
|||
left: unset; |
|||
right: 5px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.m-tb { |
|||
width: 33%; |
|||
.title { |
|||
padding: 10px; |
|||
font-size: 22px; |
|||
font-family: PingFang SC; |
|||
font-weight: 800; |
|||
color: #ffffff; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
img { |
|||
display: block; |
|||
margin-right: 5px; |
|||
} |
|||
span { |
|||
display: block; |
|||
} |
|||
} |
|||
.tb { |
|||
height: calc(100vh - 230px); |
|||
overflow-y: auto; |
|||
@include scrollBar; |
|||
} |
|||
} |
|||
@ -0,0 +1,384 @@ |
|||
@import '../../c/config'; |
|||
@import '../../c/function'; |
|||
@import './c/common'; |
|||
|
|||
.m-pop { |
|||
@include shield; |
|||
background-color: rgba(#000, 0.9); |
|||
overflow-y: auto; |
|||
|
|||
.wrap { |
|||
position: relative; |
|||
margin: 120px auto; |
|||
width: 1020px; |
|||
|
|||
.title { |
|||
padding: 10px; |
|||
font-size: 22px; |
|||
font-family: PingFang SC; |
|||
font-weight: 800; |
|||
color: #ffffff; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
img { |
|||
display: block; |
|||
margin-right: 5px; |
|||
} |
|||
span { |
|||
display: block; |
|||
} |
|||
} |
|||
|
|||
.btn-close { |
|||
position: absolute; |
|||
top: -15px; |
|||
right: -15px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.line { |
|||
margin: 20px auto; |
|||
width: 900px; |
|||
height: 1px; |
|||
border: 1px dashed #1257c9; |
|||
} |
|||
|
|||
.tabs { |
|||
margin-top: 30px; |
|||
display: flex; |
|||
align-items: center; |
|||
padding-left: 20px; |
|||
padding-left: 58px; |
|||
|
|||
.tab-btn { |
|||
width: 30px; |
|||
text-align: center; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.tab { |
|||
margin: 0 5px; |
|||
min-width: 76px; |
|||
padding: 0 5px; |
|||
height: 30px; |
|||
background: rgba(255, 255, 255, 0); |
|||
border: 1px solid #1257c9; |
|||
box-shadow: 0 0 10px 0 inset #1257c9; |
|||
border-radius: 2px; |
|||
text-align: center; |
|||
font-size: 14px; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
line-height: 30px; |
|||
cursor: pointer; |
|||
transition: all ease 0.5s; |
|||
&.z-on { |
|||
background: linear-gradient(90deg, #1a5afd, #009cff); |
|||
box-shadow: none; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.m-info { |
|||
padding-left: 62px; |
|||
font-size: 14px; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
line-height: 24px; |
|||
width: 500px; |
|||
|
|||
.info-title { |
|||
margin-top: 30px; |
|||
font-size: 20px; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: #ffffff; |
|||
line-height: 30px; |
|||
} |
|||
.info-content { |
|||
margin: 20px 0; |
|||
} |
|||
.info-pics { |
|||
display: flex; |
|||
margin: 20px 0; |
|||
img { |
|||
display: block; |
|||
width: 32%; |
|||
height: 90px; |
|||
margin-right: 9px; |
|||
object-fit: cover; |
|||
} |
|||
} |
|||
|
|||
.info-prop { |
|||
position: relative; |
|||
margin: 10px 0; |
|||
display: flex; |
|||
padding-left: 15px; |
|||
.info-title-2 { |
|||
width: 70px; |
|||
flex: 0 0 1; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
> span, |
|||
> div { |
|||
display: block; |
|||
max-width: 300px; |
|||
} |
|||
|
|||
&::before { |
|||
content: ''; |
|||
display: block; |
|||
position: absolute; |
|||
top: 9px; |
|||
left: 0; |
|||
width: 7px; |
|||
height: 7px; |
|||
background: #0c81fe; |
|||
border-radius: 3px; |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.m-case { |
|||
@include scrollBar; |
|||
height: 600px; |
|||
padding: 20px 0 20px 0; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.m-row { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.m-yanpan { |
|||
padding-left: 62px; |
|||
padding-right: 0; |
|||
min-height: 300px; |
|||
} |
|||
|
|||
.m-hint { |
|||
position: relative; |
|||
height: 300px; |
|||
|
|||
// 暂无数据 |
|||
img { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
margin: auto; |
|||
} |
|||
} |
|||
|
|||
.m-line { |
|||
min-width: 400px; |
|||
|
|||
.stat { |
|||
margin: 20px 0 10px; |
|||
display: flex; |
|||
.stat-item { |
|||
width: 33%; |
|||
text-align: center; |
|||
|
|||
div { |
|||
font-size: 17px; |
|||
font-family: Source Han Serif SC; |
|||
font-weight: 500; |
|||
color: rgba(#fff, 0.5); |
|||
line-height: 24px; |
|||
&.z-weak { |
|||
font-size: 12px; |
|||
font-family: Source Han Serif SC; |
|||
font-weight: 500; |
|||
color: rgba(#fff, 0.5); |
|||
line-height: 24px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.m-tb { |
|||
padding-left: 62px; |
|||
padding-right: 40px; |
|||
} |
|||
|
|||
.m-pagination { |
|||
box-sizing: border-box; |
|||
margin-top: 20px; |
|||
width: 100%; |
|||
height: 40px; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
|
|||
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active { |
|||
background: #0266d1; |
|||
color: #000d3f; |
|||
} |
|||
|
|||
/deep/ .el-pagination .el-pager li { |
|||
background: #002e74; |
|||
} |
|||
|
|||
/deep/ .el-pagination .btn-prev { |
|||
background: #002e74; |
|||
} |
|||
|
|||
/deep/ .el-pagination .btn-next { |
|||
background: #002e74; |
|||
} |
|||
} |
|||
|
|||
.m-process { |
|||
width: 400px; |
|||
|
|||
.process-title { |
|||
margin-bottom: 25px; |
|||
margin-left: -5px; |
|||
font-size: 16px; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: #ffffff; |
|||
line-height: 18px; |
|||
} |
|||
|
|||
.list { |
|||
position: relative; |
|||
box-sizing: border-box; |
|||
margin-top: 30px/2; |
|||
margin-left: 50px/2; |
|||
padding: 0 0 0 30px/2; |
|||
width: 680px/2; |
|||
border-left: 3px solid #0c81fe; |
|||
padding-right: 10px; |
|||
|
|||
&::before { |
|||
content: ''; |
|||
position: absolute; |
|||
z-index: 1; |
|||
display: block; |
|||
top: -2px/2; |
|||
left: -2px/2; |
|||
width: 5px/2; |
|||
height: 20px/2; |
|||
background-color: #ffffff; |
|||
} |
|||
|
|||
.item { |
|||
position: relative; |
|||
z-index: 2; |
|||
margin-bottom: 8px; |
|||
padding-bottom: 8px; |
|||
font-size: 16px; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #fefefe; |
|||
line-height: 24px; |
|||
padding-left: 20px; |
|||
padding-top: 1px; |
|||
|
|||
&::before { |
|||
content: ''; |
|||
display: block; |
|||
position: absolute; |
|||
top: -5px; |
|||
left: -11px; |
|||
width: 18px; |
|||
height: 18px; |
|||
background: #0c81fe; |
|||
border: 4px solid lighten(#0c81fe, 15); |
|||
border-radius: 100%; |
|||
} |
|||
|
|||
&.z-on { |
|||
&::before { |
|||
background: #e08400; |
|||
border-color: lighten(#e08400, 15); |
|||
} |
|||
} |
|||
|
|||
&:last-child { |
|||
margin-bottom: 0; |
|||
padding-bottom: 0; |
|||
border-bottom: none; |
|||
} |
|||
|
|||
.item-row { |
|||
margin-top: -10px; |
|||
margin-bottom: 10px; |
|||
display: flex; |
|||
} |
|||
|
|||
.name { |
|||
position: relative; |
|||
padding: 0 10px; |
|||
font-size: 12px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #fefefe; |
|||
line-height: 22px; |
|||
height: 22px; |
|||
border-radius: 10px 0 10px 0; |
|||
background-color: #0c81fe; |
|||
// background-color: #e08400; |
|||
} |
|||
|
|||
.date { |
|||
margin-left: 10px; |
|||
font-size: 12px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #7ca1d2; |
|||
line-height: 25px; |
|||
} |
|||
|
|||
.detail { |
|||
@include cs; |
|||
font-size: 16px; |
|||
line-height: 20px; |
|||
margin-bottom: 5px; |
|||
display: flex; |
|||
|
|||
.detail-field { |
|||
width: 22%; |
|||
text-align: justify; |
|||
text-align-last: justify; |
|||
} |
|||
.detail-value { |
|||
width: 78%; |
|||
.detail-link { |
|||
display: inline; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.attachement-list { |
|||
padding-left: 80px; |
|||
a { |
|||
display: block; |
|||
cursor: pointer; |
|||
color: #4df0ff; |
|||
font-size: 14px; |
|||
|
|||
i { |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.m-top { |
|||
display: flex; |
|||
} |
|||
@ -0,0 +1,139 @@ |
|||
@import '../../c/config'; |
|||
@import '../../c/function'; |
|||
@import './c/common'; |
|||
|
|||
.m-pop { |
|||
@include shield; |
|||
background-color: rgba(#000, 0.9); |
|||
overflow-y: auto; |
|||
|
|||
.wrap { |
|||
position: relative; |
|||
margin: 120px auto; |
|||
width: 1020px; |
|||
|
|||
.title { |
|||
padding: 10px; |
|||
font-size: 22px; |
|||
font-family: PingFang SC; |
|||
font-weight: 800; |
|||
color: #ffffff; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
img { |
|||
display: block; |
|||
margin-right: 5px; |
|||
} |
|||
span { |
|||
display: block; |
|||
} |
|||
} |
|||
|
|||
.btn-close { |
|||
position: absolute; |
|||
top: -10px; |
|||
right: -10px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.line { |
|||
margin: 20px auto; |
|||
width: 900px; |
|||
height: 1px; |
|||
border: 1px dashed #1257c9; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.m-content { |
|||
display: flex; |
|||
} |
|||
|
|||
.m-info { |
|||
padding-left: 62px; |
|||
font-size: 16px; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
line-height: 24px; |
|||
width: 50%; |
|||
|
|||
.info-title { |
|||
margin-top: 30px; |
|||
font-size: 20px; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: #ffffff; |
|||
line-height: 30px; |
|||
} |
|||
|
|||
.info-prop { |
|||
position: relative; |
|||
margin: 10px 0; |
|||
display: flex; |
|||
padding-left: 15px; |
|||
.info-title-2 { |
|||
width: 90px; |
|||
flex: 0 0 1; |
|||
font-size: 14px; |
|||
} |
|||
.info-pics { |
|||
display: flex; |
|||
margin: 10px 0; |
|||
img { |
|||
display: block; |
|||
width: 32%; |
|||
height: 90px; |
|||
margin-right: 9px; |
|||
object-fit: cover; |
|||
} |
|||
} |
|||
> span, |
|||
> div { |
|||
display: block; |
|||
max-width: 300px; |
|||
} |
|||
|
|||
&::before { |
|||
content: ''; |
|||
display: block; |
|||
position: absolute; |
|||
top: 9px; |
|||
left: 0; |
|||
width: 7px; |
|||
height: 7px; |
|||
background: #0c81fe; |
|||
border-radius: 3px; |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.m-line { |
|||
width: 50%; |
|||
|
|||
.stat { |
|||
margin: 20px 0 10px; |
|||
display: flex; |
|||
.stat-item { |
|||
width: 33%; |
|||
text-align: center; |
|||
|
|||
div { |
|||
font-size: 17px; |
|||
font-family: Source Han Serif SC; |
|||
font-weight: 500; |
|||
color: rgba(#fff, 0.5); |
|||
line-height: 24px; |
|||
&.z-weak { |
|||
font-size: 12px; |
|||
font-family: Source Han Serif SC; |
|||
font-weight: 500; |
|||
color: rgba(#fff, 0.5); |
|||
line-height: 24px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,135 @@ |
|||
<template> |
|||
<div class="m-fold_text" :class="initOk ? '' : 'z-init'"> |
|||
<div |
|||
id="cnt" |
|||
ref="foldSlot" |
|||
class="fold_text-cnt" |
|||
:class="isFolded ? 'z-fold-' + row : ''" |
|||
> |
|||
<slot></slot> |
|||
</div> |
|||
<div v-if="!noNeedFold" class="fold_text-btn" @click="shiftFold"> |
|||
{{ isFolded ? "展开" : "收起" }} |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import nextTick from "dai-js/tools/nextTick"; |
|||
|
|||
export default { |
|||
name: "ResiSearch", |
|||
props: { |
|||
row: { |
|||
type: Number, |
|||
default: 2, |
|||
}, |
|||
lineHeight: { |
|||
type: Number, |
|||
default: 24, |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
initOk: false, |
|||
|
|||
isFolded: false, |
|||
|
|||
noNeedFold: false, |
|||
}; |
|||
}, |
|||
computed: {}, |
|||
watch: {}, |
|||
created() { |
|||
this.init(); |
|||
}, |
|||
methods: { |
|||
async init() { |
|||
await nextTick(); |
|||
|
|||
const height = await this.$refs.foldSlot.offsetHeight; |
|||
const { row, lineHeight } = this; |
|||
|
|||
let noNeedFold = height / row < lineHeight; |
|||
|
|||
this.noNeedFold = noNeedFold; |
|||
this.isFolded = !noNeedFold; |
|||
this.initOk = true; |
|||
}, |
|||
|
|||
shiftFold() { |
|||
let { isFolded } = this; |
|||
this.isFolded = !isFolded; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scope> |
|||
// 清除容器自身浮动 |
|||
@mixin cs { |
|||
&::after { |
|||
display: block; |
|||
visibility: hidden; |
|||
clear: both; |
|||
overflow: hidden; |
|||
height: 0; |
|||
content: ""; |
|||
} |
|||
} |
|||
|
|||
// 不换行显示省略号 |
|||
@mixin toe { |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
word-wrap: normal; |
|||
} |
|||
|
|||
// 强制文本换行 多行 |
|||
@mixin toeM($num) { |
|||
display: -webkit-box; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
-webkit-line-clamp: $num; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
|
|||
.m-fold_text { |
|||
@include cs; |
|||
|
|||
&.z-init { |
|||
background-color: rgba(#000, 0.05); |
|||
> view { |
|||
visibility: hidden; |
|||
} |
|||
} |
|||
|
|||
.fold_text-cnt { |
|||
&.z-fold-1 { |
|||
@include toe; |
|||
} |
|||
&.z-fold-2 { |
|||
@include toeM(2); |
|||
} |
|||
&.z-fold-3 { |
|||
@include toeM(3); |
|||
} |
|||
&.z-fold-4 { |
|||
@include toeM(4); |
|||
} |
|||
&.z-fold-5 { |
|||
@include toeM(5); |
|||
} |
|||
} |
|||
|
|||
.fold_text-btn { |
|||
float: right; |
|||
margin-right: -4px; |
|||
padding: 0 5px; |
|||
line-height: 20px; |
|||
color: #0c81fe; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,503 +0,0 @@ |
|||
<template> |
|||
<div class="m-pop"> |
|||
<div class="wrap"> |
|||
<cpt-card> |
|||
<div class="title"> |
|||
<img src="@/assets/img/shuju/title-tip.png" /> |
|||
<span>更多信息</span> |
|||
</div> |
|||
|
|||
<div class="btn-close" @click="handleClose"> |
|||
<img src="@/assets/img/shuju/people/close.png" /> |
|||
</div> |
|||
|
|||
<div |
|||
:key="'fieldSubList' + index" |
|||
v-for="(fieldSubList, index) in fieldList" |
|||
> |
|||
<div class="list"> |
|||
<div class="item" v-if="index == 0"> |
|||
<span class="item-field">所属网格：</span> |
|||
<span>{{ gridName }}</span> |
|||
</div> |
|||
<div class="item" v-if="index == 0"> |
|||
<span class="item-field">所属小区：</span> |
|||
<span>{{ xiaoquName }}</span> |
|||
</div> |
|||
<div class="item" v-if="index == 0"> |
|||
<span class="item-field">所属楼宇：</span> |
|||
<span>{{ louName }}-{{ danyuanName }}</span> |
|||
</div> |
|||
<div class="item" v-if="index == 0"> |
|||
<span class="item-field">所属家庭：</span> |
|||
<span>{{ homeName }}</span> |
|||
</div> |
|||
<div class="item" :key="field.itemId" v-for="field in fieldSubList"> |
|||
<span class="item-field">{{ field.label }}：</span> |
|||
|
|||
<span |
|||
v-if=" |
|||
field.itemType == 'select' || |
|||
field.itemType == 'radio' || |
|||
field.itemType == 'checkbox' || |
|||
field.itemType == 'cascader' |
|||
" |
|||
>{{ |
|||
info[field.columnName] == null |
|||
? "--" |
|||
: getOptionLabel( |
|||
field.options, |
|||
info[field.columnName], |
|||
field.itemType |
|||
) |
|||
}}</span |
|||
> |
|||
|
|||
<span v-else>{{ |
|||
info[field.columnName] == null ? "--" : info[field.columnName] |
|||
}}</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="line"></div> |
|||
</div> |
|||
|
|||
<div class="tabs"> |
|||
<div |
|||
class="tab-btn" |
|||
@click="subStartGroupIndex" |
|||
v-if="groupList.length > 9" |
|||
> |
|||
<img src="@/assets/img/shuju/people/arrow-double-left.png" /> |
|||
</div> |
|||
<div |
|||
v-show="index >= startGroupIndex && index < startGroupIndex + 9" |
|||
class="tab" |
|||
:class="groupIndex % groupList.length == index ? 'z-on' : ''" |
|||
:key="'tab' + index" |
|||
@click="groupIndex = index" |
|||
v-for="(item, index) in groupList" |
|||
> |
|||
{{ item.label }} |
|||
</div> |
|||
<div |
|||
class="tab-btn" |
|||
@click="addStartGroupIndex" |
|||
v-if="groupList.length > 9" |
|||
> |
|||
<img src="@/assets/img/shuju/people/arrow-double-right.png" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<div |
|||
:key="'group' + index" |
|||
v-show="groupIndex % groupList.length == index" |
|||
v-for="(group, index) in groupList" |
|||
> |
|||
<div v-if="group.tableName == 'ic_resi_demand' && Array.isArray(allInfo.ic_resi_demand) && allInfo.ic_resi_demand.length>0"> |
|||
<div |
|||
class="list" |
|||
:key="'ic_resi_demand' + infoIndex" |
|||
v-for="(infoItem, infoIndex) in allInfo.ic_resi_demand" |
|||
> |
|||
<div |
|||
class="item" |
|||
:key="field.itemId" |
|||
v-for="field in group.itemList" |
|||
> |
|||
<span class="item-field">{{ field.label }}：</span> |
|||
<span |
|||
v-if=" |
|||
field.itemType == 'select' || |
|||
field.itemType == 'radio' || |
|||
field.itemType == 'checkbox' || |
|||
field.itemType == 'cascader' |
|||
" |
|||
>{{ |
|||
infoItem[field.columnName] == null |
|||
? "--" |
|||
: getOptionLabel( |
|||
field.options, |
|||
infoItem[field.columnName], |
|||
field.itemType |
|||
) |
|||
}}</span |
|||
> |
|||
|
|||
<span v-else>{{ |
|||
infoItem[field.columnName] == null |
|||
? "--" |
|||
: infoItem[field.columnName] |
|||
}}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="list" v-else> |
|||
<div |
|||
class="item" |
|||
:key="field.itemId" |
|||
v-for="field in group.itemList" |
|||
> |
|||
<span class="item-field">{{ field.label }}：</span> |
|||
<span |
|||
v-if=" |
|||
field.itemType == 'select' || |
|||
field.itemType == 'radio' || |
|||
field.itemType == 'checkbox' || |
|||
field.itemType == 'cascader' |
|||
" |
|||
>{{ |
|||
!allInfo[group.tableName] || |
|||
allInfo[group.tableName][0][field.columnName] == null |
|||
? "--" |
|||
: getOptionLabel( |
|||
field.options, |
|||
allInfo[group.tableName][0][field.columnName], |
|||
field.itemType |
|||
) |
|||
}}</span |
|||
> |
|||
|
|||
<span v-else>{{ |
|||
!allInfo[group.tableName] || |
|||
allInfo[group.tableName][0][field.columnName] == null |
|||
? "--" |
|||
: allInfo[group.tableName][0][field.columnName] |
|||
}}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</cpt-card> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import cptCard from "@/views/modules/visual/cpts/card"; |
|||
import { requestPost } from "@/js/dai/request"; |
|||
|
|||
export default { |
|||
name: "demandInfo", |
|||
props: { |
|||
userId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
gridName: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}, |
|||
|
|||
components: { |
|||
cptCard, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
fieldList: [], |
|||
groupList: [], |
|||
groupIndex: 0, |
|||
startGroupIndex: 0, |
|||
info: {}, |
|||
allInfo: {}, |
|||
|
|||
xiaoquList: [], |
|||
louList: [], |
|||
danyuanList: [], |
|||
homeList: [], |
|||
}; |
|||
}, |
|||
|
|||
computed: { |
|||
xiaoquName() { |
|||
const { |
|||
xiaoquList, |
|||
info: { VILLAGE_ID }, |
|||
} = this; |
|||
if (Array.isArray(xiaoquList) && xiaoquList.length > 0 && VILLAGE_ID) { |
|||
let item = xiaoquList.find((item) => item.value == VILLAGE_ID); |
|||
if (item) { |
|||
return item.label; |
|||
} |
|||
} |
|||
return ""; |
|||
}, |
|||
louName() { |
|||
const { |
|||
louList, |
|||
info: { BUILD_ID }, |
|||
} = this; |
|||
if (Array.isArray(louList) && louList.length > 0 && BUILD_ID) { |
|||
let item = louList.find((item) => item.value == BUILD_ID); |
|||
if (item) { |
|||
return item.label; |
|||
} |
|||
} |
|||
return ""; |
|||
}, |
|||
danyuanName() { |
|||
const { |
|||
danyuanList, |
|||
info: { UNIT_ID }, |
|||
} = this; |
|||
if (Array.isArray(danyuanList) && danyuanList.length > 0 && UNIT_ID) { |
|||
let item = danyuanList.find((item) => item.value == UNIT_ID); |
|||
if (item) { |
|||
return item.label; |
|||
} |
|||
} |
|||
return ""; |
|||
}, |
|||
danyuanName() { |
|||
const { |
|||
danyuanList, |
|||
info: { UNIT_ID }, |
|||
} = this; |
|||
if (Array.isArray(danyuanList) && danyuanList.length > 0 && UNIT_ID) { |
|||
let item = danyuanList.find((item) => item.value == UNIT_ID); |
|||
if (item) { |
|||
return item.label; |
|||
} |
|||
} |
|||
return ""; |
|||
}, |
|||
homeName() { |
|||
const { |
|||
homeList, |
|||
info: { HOME_ID }, |
|||
} = this; |
|||
if (Array.isArray(homeList) && homeList.length > 0 && HOME_ID) { |
|||
let item = homeList.find((item) => item.value == HOME_ID); |
|||
if (item) { |
|||
return item.label; |
|||
} |
|||
} |
|||
return ""; |
|||
}, |
|||
}, |
|||
|
|||
watch: { |
|||
userId() { |
|||
this.getApiData(); |
|||
}, |
|||
}, |
|||
|
|||
mounted() { |
|||
this.getApiData(); |
|||
}, |
|||
|
|||
methods: { |
|||
addStartGroupIndex() { |
|||
const { startGroupIndex, groupList } = this; |
|||
if (startGroupIndex < groupList.length - 9) { |
|||
this.startGroupIndex = startGroupIndex + 1; |
|||
} else { |
|||
this.startGroupIndex = groupList.length - 9; |
|||
} |
|||
}, |
|||
subStartGroupIndex() { |
|||
const { startGroupIndex, groupList } = this; |
|||
if (startGroupIndex > 0) { |
|||
this.startGroupIndex = startGroupIndex - 1; |
|||
} else { |
|||
this.startGroupIndex = 0; |
|||
} |
|||
}, |
|||
handleClose() { |
|||
this.$emit("close"); |
|||
}, |
|||
|
|||
async getApiData() { |
|||
await this.getField(); |
|||
await this.getInfo(); |
|||
this.getXiaoquList(); |
|||
this.getLouList(); |
|||
this.getDanyuanList(); |
|||
this.getHomeList(); |
|||
}, |
|||
|
|||
getOptionLabel(options, value, type = "") { |
|||
if (Array.isArray(options)) { |
|||
let valueArr = value.split(","); |
|||
if (type == "cascader") { |
|||
if (valueArr.length > 0) { |
|||
let level1 = options.find((item) => item.value == valueArr[0]); |
|||
if (level1) { |
|||
if (valueArr.length > 1 && level1.children) { |
|||
let level2 = level1.children.find( |
|||
(item) => item.value == valueArr[1] |
|||
); |
|||
if (level2) { |
|||
return level1.label + "-" + level2.label; |
|||
} |
|||
} |
|||
return level1.label; |
|||
} |
|||
} |
|||
} else { |
|||
return valueArr |
|||
.map((val) => { |
|||
let item = options.find((item) => item.value == val); |
|||
if (item && item.label) { |
|||
return item.label; |
|||
} |
|||
return "--"; |
|||
}) |
|||
.join("、"); |
|||
} |
|||
} |
|||
return "--"; |
|||
}, |
|||
|
|||
//加载组织数据 |
|||
async getField() { |
|||
const url = "/oper/customize/icform/getcustomerform"; |
|||
|
|||
const { data, code, msg } = await requestPost(url, { |
|||
dynamic: true, |
|||
formCode: "resi_base_info", |
|||
}); |
|||
|
|||
if (code === 0) { |
|||
this.groupList = data.groupList; |
|||
this.fieldList = (function (arr) { |
|||
let col = []; |
|||
let ele = []; |
|||
for (let i = 0; i < arr.length; i++) { |
|||
let item = arr[i]; |
|||
if (item.itemType == "divider" || i == arr.length - 1) { |
|||
col.push([...ele]); |
|||
ele = []; |
|||
} else { |
|||
ele.push(item); |
|||
} |
|||
} |
|||
return col; |
|||
})(data.itemList); |
|||
|
|||
this.fieldList.forEach((subList, index) => { |
|||
subList.forEach(async (item, subIndex) => { |
|||
if (item.optionSourceType == "remote" && item.optionSourceValue) { |
|||
this.fieldList[index][subIndex].options = await this.getOptions( |
|||
item.optionSourceValue |
|||
); |
|||
} |
|||
}); |
|||
}); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
//加载组织数据 |
|||
async getInfo() { |
|||
const url = "/epmetuser/icresiuser/detail"; |
|||
|
|||
const { data, code, msg } = await requestPost(url, { |
|||
icResiUserId: this.userId, |
|||
formCode: "resi_base_info", |
|||
}); |
|||
|
|||
if (code === 0) { |
|||
this.info = data.ic_resi_user[0]; |
|||
this.allInfo = data; |
|||
|
|||
this.fieldList.forEach((subList, index) => { |
|||
subList.forEach((item, subIndex) => { |
|||
if ( |
|||
item.itemType == "radio" && |
|||
item.childGroup && |
|||
this.allInfo[item.tableName] && |
|||
this.allInfo[item.tableName][0][item.columnName] == "1" |
|||
) { |
|||
this.groupList = [...this.groupList, item.childGroup]; |
|||
} |
|||
}); |
|||
}); |
|||
console.log("1111111111111111111111111", this.groupList); |
|||
|
|||
this.groupList.forEach((subList, index) => { |
|||
subList.itemList.forEach(async (item, subIndex) => { |
|||
if (item.optionSourceType == "remote" && item.optionSourceValue) { |
|||
this.groupList[index].itemList[subIndex].options = |
|||
await this.getOptions(item.optionSourceValue); |
|||
} |
|||
}); |
|||
}); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
//加载组织数据 |
|||
async getOptions(url) { |
|||
if (!url) return []; |
|||
|
|||
const { data, code, msg } = await requestPost(url, {}); |
|||
|
|||
if (code === 0) { |
|||
return data; |
|||
} else { |
|||
return []; |
|||
} |
|||
}, |
|||
|
|||
async getXiaoquList() { |
|||
const url = "/gov/org/icneighborhood/neighborhoodoption"; |
|||
|
|||
const { data, code, msg } = await requestPost(url, { |
|||
agencyId: this.info.AGENCY_ID, |
|||
gridId: this.info.GRID_ID, |
|||
}); |
|||
|
|||
if (code === 0) { |
|||
this.xiaoquList = data; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
async getLouList() { |
|||
const url = "/gov/org/icbuilding/buildingoption"; |
|||
|
|||
const { data, code, msg } = await requestPost(url, { |
|||
neighborHoodId: this.info.VILLAGE_ID, |
|||
}); |
|||
|
|||
if (code === 0) { |
|||
this.louList = data; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
async getDanyuanList() { |
|||
const url = "/gov/org/icbuildingunit/unitoption"; |
|||
|
|||
const { data, code, msg } = await requestPost(url, { |
|||
buildingId: this.info.BUILD_ID, |
|||
}); |
|||
|
|||
if (code === 0) { |
|||
this.danyuanList = data; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
async getHomeList() { |
|||
const url = "/gov/org/ichouse/houseoption"; |
|||
|
|||
const { data, code, msg } = await requestPost(url, { |
|||
unitId: this.info.UNIT_ID, |
|||
}); |
|||
|
|||
if (code === 0) { |
|||
this.homeList = data; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" src="@/assets/scss/modules/visual/people.scss" scoped></style> |
|||
@ -0,0 +1,231 @@ |
|||
<template> |
|||
<div class="m-pop"> |
|||
<div class="wrap"> |
|||
<cpt-card> |
|||
<div class="title"> |
|||
<img src="@/assets/img/shuju/title-tip.png" /> |
|||
<span>议题详情</span> |
|||
</div> |
|||
|
|||
<div class="btn-close" |
|||
@click="handleClose"> |
|||
<img src="@/assets/img/shuju/people/close.png" /> |
|||
</div> |
|||
<div class="m-content"> |
|||
<div class="m-info"> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-2">议题标题：</span> |
|||
<span>{{ info.issueTitle }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">议题建议：</span> |
|||
<span>{{ info.issueSuggestion }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-2">话题内容：</span> |
|||
<div> |
|||
<div>{{ info.topicInfo.topicContent }}</div> |
|||
<div v-if="info.topicInfo.topicImgs&&info.topicInfo.topicImgs.length>0" |
|||
class="info-pics"> |
|||
<img :src="src" |
|||
:key="src" |
|||
v-for="src in info.topicInfo.topicImgs" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">转议题时间：</span> |
|||
<span>{{ info.shiftIssueTime}}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">所属网格：</span> |
|||
<span>{{ info.belongsGridName}}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">话题发表人：</span> |
|||
<span>{{ info.topicInfo.publishedUser}}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">议题发起人：</span> |
|||
<span>{{ info.issueInitiator}}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">话题来源：</span> |
|||
<span>{{ info.topicInfo.groupName}}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">话题发表时间：</span> |
|||
<span>{{ info.topicInfo.publishedTimeShow}}</span> |
|||
</div> |
|||
</div> |
|||
<div class="m-line"> |
|||
<div class="stat"> |
|||
<div class="stat-item"> |
|||
<div> |
|||
{{ issueTrend.realityVoteCount }}/{{ |
|||
issueTrend.shouldVoteCount |
|||
}} |
|||
</div> |
|||
<div class="z-weak">已表决/应表决</div> |
|||
</div> |
|||
<div class="stat-item"> |
|||
<div>{{ issueTrend.supportAmount }}</div> |
|||
<div class="z-weak">支持</div> |
|||
</div> |
|||
<div class="stat-item"> |
|||
<div>{{ issueTrend.oppositionAmount }}</div> |
|||
<div class="z-weak">反对</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<line-chart :list="issueChartData" /> |
|||
</div> |
|||
</div> |
|||
</cpt-card> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import cptCard from "@/views/modules/visual/cpts/card"; |
|||
import screenLoading from "@/views/modules/visual/cpts/loading"; |
|||
import { requestPost } from "@/js/dai/request"; |
|||
import lineChart from "@/views/modules/visual/cpts/line-chart"; |
|||
import dateFormat from "dai-js/tools/dateFormat"; |
|||
|
|||
export default { |
|||
name: "demandInfo", |
|||
props: { |
|||
issueId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
|
|||
}, |
|||
|
|||
components: { |
|||
cptCard, |
|||
lineChart, |
|||
screenLoading, |
|||
}, |
|||
|
|||
data () { |
|||
return { |
|||
info: { |
|||
attitude: "", |
|||
belongsGridName: "", |
|||
issueIdea: "", |
|||
issueInitiator: "", |
|||
issueStatus: "", |
|||
issueSuggestion: "", |
|||
issueTitle: "", |
|||
joinVote: false, |
|||
projectId: "", |
|||
projectStatus: true, |
|||
publishIdeaFlag: false, |
|||
shiftIssueTime: "", |
|||
topicInfo: { |
|||
groupId: "", |
|||
groupName: "", |
|||
groupType: "", |
|||
publishedTime: "", |
|||
publishedUser: "", |
|||
topicContent: "", |
|||
topicId: "", |
|||
topicImgs: null, |
|||
}, |
|||
}, |
|||
issueTrend: {}, |
|||
issueChartData: [], |
|||
|
|||
}; |
|||
}, |
|||
|
|||
computed: {}, |
|||
|
|||
watch: { |
|||
issueId () { |
|||
this.getApiData(); |
|||
}, |
|||
}, |
|||
|
|||
mounted () { |
|||
this.getApiData(); |
|||
}, |
|||
|
|||
methods: { |
|||
|
|||
handleClose () { |
|||
this.$emit("close"); |
|||
}, |
|||
|
|||
async getApiData () { |
|||
|
|||
await this.getInfo(); |
|||
await this.getIssueTrend() |
|||
}, |
|||
|
|||
//加载组织数据 |
|||
async getInfo () { |
|||
const url = "/resi/hall/issue/detail"; |
|||
// const url = "http://yapi.elinkservice.cn/mock/245/gov/issue/issue/resibuzz"; |
|||
let params = { |
|||
issueId: this.issueId, |
|||
}; |
|||
|
|||
const { data, code, msg } = await requestPost(url, params); |
|||
|
|||
if (code === 0) { |
|||
this.info = data |
|||
|
|||
this.info.topicInfo.publishedTimeShow = dateFormat(new Date(this.info.topicInfo.publishedTime * 1000), "yyyy-MM-dd") |
|||
|
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
//加载组织数据 |
|||
async getIssueTrend () { |
|||
const url = "/resi/hall/issue/votingtrend"; |
|||
|
|||
const { data, code, msg } = await requestPost(url, { |
|||
issueId: this.issueId, |
|||
}); |
|||
|
|||
if (code === 0) { |
|||
this.issueTrend = data; |
|||
let chartData = []; |
|||
data.polyLine.forEach((item) => { |
|||
let date = dateFormat(new Date(item.voteDate * 1000), "yyyy-MM-dd"); |
|||
console.log("date:" + date); |
|||
chartData.push( |
|||
{ |
|||
date, |
|||
value: item.supportIncrement, |
|||
type: "支持", |
|||
}, |
|||
{ |
|||
date, |
|||
value: item.oppositionIncrement, |
|||
type: "反对", |
|||
} |
|||
); |
|||
}); |
|||
this.issueChartData = chartData; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style |
|||
lang="scss" |
|||
src="@/assets/scss/modules/visual/issue-info.scss" |
|||
scoped |
|||
></style> |
|||
@ -0,0 +1,696 @@ |
|||
<template> |
|||
<div class="m-pop"> |
|||
<div class="wrap"> |
|||
<cpt-card> |
|||
<div class="title"> |
|||
<img src="@/assets/img/shuju/title-tip.png" /> |
|||
<span>项目详情</span> |
|||
</div> |
|||
|
|||
<div class="btn-close" |
|||
@click="handleClose"> |
|||
<img src="@/assets/img/shuju/people/close.png" /> |
|||
</div> |
|||
<div class="m-top"> |
|||
<div class="m-info"> |
|||
<div class="info-prop"> |
|||
<span>项目标题：</span> |
|||
<span>{{ projectInfo.projectTitle }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span>项目背景：</span> |
|||
<span>{{ projectInfo.backGround }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span>项目方案：</span> |
|||
<span>{{ projectInfo.projectTitle }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span>内部备注：</span> |
|||
<span>{{ projectInfo.internalRemark || "--" }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span>当前处理部门：</span> |
|||
<span>{{ projectInfo.departmentNameList.join("、") }}</span> |
|||
</div> |
|||
<div class="info-prop" |
|||
v-if="projectCate.length > 0"> |
|||
<span>分类：</span> |
|||
<fold-text :row="3"> |
|||
<div :key="item.name" |
|||
v-for="item in projectCate"> |
|||
{{ item.name }} |
|||
</div> |
|||
</fold-text> |
|||
</div> |
|||
<div class="info-prop" |
|||
v-if="projectTag.length > 0"> |
|||
<span>标签：</span> |
|||
<fold-text :row="3"> |
|||
<div :key="item.name" |
|||
v-for="item in projectTag"> |
|||
{{ item.name }} |
|||
</div> |
|||
</fold-text> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="m-process" |
|||
v-if="projectProcess.length > 0"> |
|||
<div class="process-title">处理进展</div> |
|||
<div class="list"> |
|||
<div class="item" |
|||
:class="index === 0 ? 'z-on' : ''" |
|||
:key="item.processId" |
|||
v-for="(item, index) in projectProcess"> |
|||
<div class="item-row"> |
|||
<div class="name">{{ item.processName }}</div> |
|||
<div class="date"> |
|||
{{ item.processTime }} |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="detail"> |
|||
<div class="detail-field">处理部门：</div> |
|||
<div class="detail-value">{{ item.departmentName }}</div> |
|||
</div> |
|||
|
|||
<div class="detail" |
|||
v-if="item.processName != '转项目' && item.publicReply"> |
|||
<div class="detail-field">说 明：</div> |
|||
<div class="detail-value"> |
|||
<fold-text :row="3">{{ item.publicReply }}</fold-text> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="detail" |
|||
v-if="item.processName != '转项目' && item.internalRemark"> |
|||
<div class="detail-field">内部备注：</div> |
|||
<div class="detail-value"> |
|||
<fold-text :row="3">{{ |
|||
item.internalRemark |
|||
}}</fold-text> |
|||
</div> |
|||
</div> |
|||
<div class="detail"> |
|||
<div class="attachement-list"> |
|||
<a :href="att.url" |
|||
target="_blank" |
|||
:key="att.url" |
|||
v-for="att in item.internalFile"> |
|||
<i class="el-icon-folder-opened"></i> |
|||
{{ att.name }} |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div v-if="projectInfo.origin!=='agency'" |
|||
class="tabs"> |
|||
<div class="tab-btn" |
|||
@click="subStartGroupIndex" |
|||
v-if="groupList.length > 9"> |
|||
<img src="@/assets/img/shuju/people/arrow-double-left.png" /> |
|||
</div> |
|||
<div v-show="index >= startGroupIndex && index < startGroupIndex + 9" |
|||
class="tab" |
|||
:class="groupIndex % groupList.length == index ? 'z-on' : ''" |
|||
:key="'tab' + index" |
|||
@click="groupIndex = index" |
|||
v-for="(item, index) in groupList"> |
|||
{{ item.label }} |
|||
</div> |
|||
<div class="tab-btn" |
|||
@click="addStartGroupIndex" |
|||
v-if="groupList.length > 9"> |
|||
<img src="@/assets/img/shuju/people/arrow-double-right.png" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="m-case" |
|||
v-if="projectInfo.origin!=='agency'"> |
|||
<div class="m-yanpan" |
|||
v-if="groupIndex == 0"> |
|||
<div v-if="projectId"> |
|||
<analyse v-if="yanPan.loading" |
|||
singleTitle="楼院小组" |
|||
:userList="yanPan.homeUserList" |
|||
:userName="yanPan.icUserName" |
|||
:singleList="yanPan.singleList" |
|||
:hasEvent="yanPan.hasEvent" |
|||
:moreList="yanPan.moreList" |
|||
@user="toUserInfo" |
|||
@project="toProjectInfo" /> |
|||
<screen-loading v-else>加载中</screen-loading> |
|||
</div> |
|||
<div v-else |
|||
class="m-hint"> |
|||
<img src="@/assets/img/modules/visual/noData.png" |
|||
class="no-data-img" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<div v-if="groupIndex == 1"> |
|||
<div class="m-row" |
|||
v-if="projectInfo.originId"> |
|||
<div v-if="projectInfo.origin==='issue'" |
|||
class="m-info"> |
|||
<div class="info-prop"> |
|||
<span>议题标题：</span> |
|||
<span>{{ issueInfo.issueTitle }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span>议题建议：</span> |
|||
<span>{{ issueInfo.issueSuggestion }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span>所属网格：</span> |
|||
<span>{{ issueInfo.belongsGridName || "--" }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span>议题发起人：</span> |
|||
<span>{{ issueInfo.issueInitiator }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span>议题来源：</span> |
|||
<span>{{ issueInfo.topicInfo.groupName }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span>转议题时间：</span> |
|||
<span>{{ issueInfo.shiftIssueTime }}</span> |
|||
</div> |
|||
</div> |
|||
<div v-if="projectInfo.origin==='resi_event'" |
|||
class="m-info"> |
|||
<div class="info-title">事件内容</div> |
|||
<div class="info-content">{{ info.eventContent }}</div> |
|||
<div class="info-pics"> |
|||
<img :src="src" |
|||
:key="src" |
|||
v-for="src in info.eventImgs" |
|||
@click="watchImg(src)" /> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">提交时间：</span> |
|||
<span>{{ info.eventTime }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">报事人：</span> |
|||
<span>{{ info.eventPeopleName }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">所属网格：</span> |
|||
<span>{{ info.gridName }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">提报给：</span> |
|||
<div> |
|||
<div>{{ info.eventPersonShow}}</div> |
|||
<div>{{ info.eventOrgShow}}</div> |
|||
</div> |
|||
|
|||
<!-- <span>{{ info.eventPerson.join("、") || "--" }}</span> --> |
|||
</div> |
|||
</div> |
|||
|
|||
<div v-if="projectInfo.origin==='issue'" |
|||
class="m-line"> |
|||
<div class="stat"> |
|||
<div class="stat-item"> |
|||
<div> |
|||
{{ issueTrend.realityVoteCount }}/{{ |
|||
issueTrend.shouldVoteCount |
|||
}} |
|||
</div> |
|||
<div class="z-weak">已表决/应表决</div> |
|||
</div> |
|||
<div class="stat-item"> |
|||
<div>{{ issueTrend.supportAmount }}</div> |
|||
<div class="z-weak">支持</div> |
|||
</div> |
|||
<div class="stat-item"> |
|||
<div>{{ issueTrend.oppositionAmount }}</div> |
|||
<div class="z-weak">反对</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<line-chart v-if="issueChartData.length > 0" |
|||
:list="issueChartData" /> |
|||
</div> |
|||
</div> |
|||
<div v-else |
|||
class="m-hint"> |
|||
<img src="@/assets/img/modules/visual/noData.png" |
|||
class="no-data-img" /> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</cpt-card> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import cptCard from "@/views/modules/visual/cpts/card"; |
|||
import screenLoading from "@/views/modules/visual/cpts/loading"; |
|||
import { requestPost } from "@/js/dai/request"; |
|||
import cptTb from "@/views/modules/visual/cpts/tb"; |
|||
import lineChart from "@/views/modules/visual/cpts/line-chart"; |
|||
import analyse from "@/views/modules/visual/cpts/analyse"; |
|||
import foldText from "@/views/components/foldText"; |
|||
import dateFormat from "dai-js/tools/dateFormat"; |
|||
|
|||
function iniData () { |
|||
return { |
|||
projectIdCopy: this.projectId, |
|||
groupList: [ |
|||
{ label: "研判分析" }, |
|||
{ label: "项目来源" }, |
|||
], |
|||
groupIndex: 0, |
|||
startGroupIndex: 0, |
|||
|
|||
projectProcess: [], |
|||
|
|||
projectInfo: { |
|||
backGround: "", |
|||
departmentList: [ |
|||
// { departmentName: "南宁社区-南宁第二网格", staffList: ["周相成"] }, |
|||
], |
|||
departmentNameList: [], |
|||
internalRemark: "", |
|||
isSend: false, |
|||
locateAddress: "", |
|||
locateDimension: "", |
|||
locateLongitude: "", |
|||
origin: "", |
|||
originId: "", |
|||
platformIds: [], |
|||
processable: false, |
|||
projectId: "", |
|||
projectStatus: "pending", |
|||
projectTitle: "", |
|||
publicReply: "", |
|||
returnable: false, |
|||
}, |
|||
|
|||
issueInfo: { |
|||
attitude: "", |
|||
belongsGridName: "", |
|||
issueIdea: "", |
|||
issueInitiator: "", |
|||
issueStatus: "", |
|||
issueSuggestion: "", |
|||
issueTitle: "", |
|||
joinVote: true, |
|||
projectId: "", |
|||
projectStatus: false, |
|||
publishIdeaFlag: false, |
|||
}, |
|||
|
|||
issueTrend: {}, |
|||
issueChartData: [], |
|||
|
|||
eventInfo: { |
|||
eventTime: "", |
|||
eventContent: "", |
|||
eventAddress: "", |
|||
gridName: "", |
|||
isClosed: true, |
|||
isResolve: true, |
|||
isRollback: true, |
|||
eventImgs: [], |
|||
eventPerson: [], |
|||
eventOrg: [], |
|||
eventPeopleName: "", |
|||
projectInfo: { |
|||
projectId: "", |
|||
operationName: "", |
|||
operationTime: "", |
|||
projectDeclare: "", |
|||
}, |
|||
}, |
|||
|
|||
projectCate: [], |
|||
projectTag: [], |
|||
|
|||
yanPan: { |
|||
loading: false, |
|||
|
|||
icResiUserId: "", |
|||
houseId: "", |
|||
icUserName: "", |
|||
|
|||
homeUserList: [ |
|||
// { |
|||
// homeId: '', |
|||
// icUserId: '', |
|||
// icUserName: '', |
|||
// } |
|||
], |
|||
singleList: [],//楼院小组 |
|||
projectData: [ |
|||
// { |
|||
// firstCategoryCode: '', |
|||
// firstCategoryName: '', |
|||
// projectList: [], |
|||
// } |
|||
], |
|||
hasEvent: false, |
|||
moreList: [],// |
|||
|
|||
}, |
|||
}; |
|||
} |
|||
|
|||
export default { |
|||
name: "demandInfo", |
|||
props: { |
|||
projectId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
userId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
categoryCodes: { |
|||
type: Array, |
|||
default: [], |
|||
}, |
|||
|
|||
}, |
|||
|
|||
components: { |
|||
cptCard, |
|||
cptTb, |
|||
analyse, |
|||
screenLoading, |
|||
lineChart, |
|||
foldText, |
|||
}, |
|||
|
|||
data: iniData, |
|||
|
|||
computed: {}, |
|||
|
|||
watch: { |
|||
projectId () { |
|||
let data = iniData(); |
|||
Object.keys(data).forEach((k) => { |
|||
this[k] = data[k]; |
|||
}); |
|||
this.getApiData(); |
|||
}, |
|||
// projectIdCopy () { |
|||
|
|||
|
|||
// }, |
|||
}, |
|||
|
|||
mounted () { |
|||
console.log(this.projectIdCopy) |
|||
this.getApiData(); |
|||
}, |
|||
|
|||
methods: { |
|||
watchImg (src) { |
|||
window.open(src); |
|||
}, |
|||
|
|||
addStartGroupIndex () { |
|||
const { startGroupIndex, groupList } = this; |
|||
if (startGroupIndex < groupList.length - 9) { |
|||
this.startGroupIndex = startGroupIndex + 1; |
|||
} else { |
|||
this.startGroupIndex = groupList.length - 9; |
|||
} |
|||
}, |
|||
subStartGroupIndex () { |
|||
const { startGroupIndex, groupList } = this; |
|||
if (startGroupIndex > 0) { |
|||
this.startGroupIndex = startGroupIndex - 1; |
|||
} else { |
|||
this.startGroupIndex = 0; |
|||
} |
|||
}, |
|||
handleClose () { |
|||
this.$emit("close"); |
|||
}, |
|||
|
|||
async getApiData () { |
|||
|
|||
await this.getProjectInfo() |
|||
this.getProjectCate(); |
|||
this.getProjectProcess(); |
|||
if (this.projectInfo.origin === 'issue') { |
|||
this.getIssueInfo(); |
|||
this.getIssueTrend(); |
|||
} else if (this.projectInfo.origin === 'resi_event') { |
|||
this.getEventInfo() |
|||
} |
|||
if (this.projectInfo.origin !== 'agency') { |
|||
await this.getYanPan(); |
|||
|
|||
} |
|||
}, |
|||
|
|||
//加载组织数据 |
|||
async getProjectInfo () { |
|||
|
|||
const url = "/gov/project/trace/projectdetail"; |
|||
|
|||
const { data, code, msg } = await requestPost(url, { |
|||
projectId: this.projectIdCopy, |
|||
}); |
|||
|
|||
if (code === 0) { |
|||
this.projectInfo = data; |
|||
|
|||
|
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
//加载组织数据 |
|||
async getIssueInfo () { |
|||
|
|||
const url = "/resi/hall/issue/detail"; |
|||
|
|||
const { data, code, msg } = await requestPost(url, { |
|||
issueId: this.projectInfo.originId, |
|||
}); |
|||
|
|||
if (code === 0) { |
|||
this.issueInfo = data; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
//加载组织数据 |
|||
async getIssueTrend () { |
|||
|
|||
const url = "/resi/hall/issue/votingtrend"; |
|||
|
|||
const { data, code, msg } = await requestPost(url, { |
|||
issueId: this.projectInfo.originId, |
|||
}); |
|||
|
|||
if (code === 0) { |
|||
this.issueTrend = data; |
|||
let chartData = []; |
|||
data.polyLine.forEach((item) => { |
|||
let date = dateFormat(new Date(item.voteDate * 1000), "yyyy-MM-dd"); |
|||
console.log("date:" + date); |
|||
chartData.push( |
|||
{ |
|||
date, |
|||
value: item.supportIncrement, |
|||
type: "支持", |
|||
}, |
|||
{ |
|||
date, |
|||
value: item.oppositionIncrement, |
|||
type: "反对", |
|||
} |
|||
); |
|||
}); |
|||
this.issueChartData = chartData; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
//加载组织数据 |
|||
async getEventInfo () { |
|||
const url = "/gov/project/resievent/eventdetail-icdata"; |
|||
|
|||
const { data, code, msg } = await requestPost(url, { |
|||
resiEventId: this.projectInfo.originId, |
|||
}); |
|||
|
|||
if (code === 0) { |
|||
|
|||
if (data.eventOrg && data.eventOrg.length > 0) { |
|||
data.eventOrgShow = data.eventOrg.join('、') |
|||
} |
|||
if (data.eventPerson && data.eventPerson.length > 0) { |
|||
data.eventPersonShow = data.eventPerson.join('、') |
|||
} |
|||
this.info = { ...data }; |
|||
|
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
//加载组织数据 |
|||
async getProjectProcess () { |
|||
|
|||
const url = "/gov/project/trace/processlist-v2"; |
|||
|
|||
const { data, code, msg } = await requestPost(url, { |
|||
projectId: this.projectIdCopy, |
|||
}); |
|||
|
|||
if (code === 0) { |
|||
this.projectProcess = data.map((item) => { |
|||
item.processTime = dateFormat( |
|||
new Date(item.processTime * 1000), |
|||
"yyyy-MM-dd hh:mm" |
|||
); |
|||
return item; |
|||
}); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
async getProjectCate () { |
|||
|
|||
const url = "/gov/project/projectcategory/categorytaglist"; |
|||
|
|||
const { data, code, msg } = await requestPost(url, { |
|||
projectId: this.projectIdCopy, |
|||
}); |
|||
|
|||
if (code === 0) { |
|||
this.projectCate = data.categoryList; |
|||
this.projectTag = data.tagList; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
//加载组织数据 |
|||
async getYanPan () { |
|||
const url = "/data/aggregator/project/projectanalysis"; |
|||
|
|||
const { data, code, msg } = await requestPost(url, { |
|||
categoryCodeList: this.categoryCodes, |
|||
userId: this.userId, |
|||
projectId: this.projectIdCopy |
|||
}); |
|||
|
|||
if (code === 0) { |
|||
data.icResiUserId = data.icUserId |
|||
data.homeUserList.forEach(item => { |
|||
item.icResiUserId = item.icUserId |
|||
}); |
|||
|
|||
let array1 = [] |
|||
let array2 = [] |
|||
|
|||
//楼院小组、居民上报都存在是，研判分析显示两个分支 |
|||
if (data.groupProjectList && data.groupProjectList.length > 0 && data.eventProjectList && data.eventProjectList.length > 0) { |
|||
this.yanPan.hasEvent = true |
|||
array1 = [...data.groupProjectList] |
|||
array2 = [...data.eventProjectList] |
|||
} else { |
|||
this.yanPan.hasEvent = false |
|||
if (data.groupProjectList && data.groupProjectList.length > 0) { |
|||
array1 = [...data.groupProjectList] |
|||
} else if (data.eventProjectList && data.eventProjectList.length > 0) { |
|||
array1 = [...data.eventProjectList] |
|||
} else { |
|||
array1 = [] |
|||
} |
|||
|
|||
} |
|||
|
|||
if (array1.length > 0) { |
|||
data.singleList = array1.map((item) => { |
|||
return { |
|||
categoryCode: item.categoryCode, |
|||
categoryName: item.categoryName, |
|||
showItem: true, |
|||
projectList: item.projectList.map((subItem) => { |
|||
return { |
|||
title: subItem.title, |
|||
status: subItem.status, |
|||
statusName: |
|||
subItem.status == "pending" ? "待处理" : "结案", |
|||
projectId: subItem.projectId, |
|||
}; |
|||
}), |
|||
}; |
|||
}); |
|||
} |
|||
if (array2.length > 0) { |
|||
data.moreList = array2.map((item) => { |
|||
return { |
|||
categoryCode: item.categoryCode, |
|||
categoryName: item.categoryName, |
|||
showItem: true, |
|||
projectList: item.projectList.map((subItem) => { |
|||
return { |
|||
title: subItem.title, |
|||
status: subItem.status, |
|||
statusName: |
|||
subItem.status == "pending" ? "待处理" : "结案", |
|||
projectId: subItem.projectId, |
|||
}; |
|||
}), |
|||
}; |
|||
}); |
|||
} |
|||
|
|||
|
|||
|
|||
this.yanPan = { ...this.yanPan, ...data }; |
|||
console.log(this.yanPan) |
|||
this.yanPan.loading = true; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
toUserInfo (item) { |
|||
this.$router.push({ |
|||
path: `/main-shuju/visual-basicinfo-people/${item.icResiUserId}`, |
|||
}); |
|||
}, |
|||
|
|||
toProjectInfo (item) { |
|||
console.log(item); |
|||
this.projectIdCopy = item.projectId; |
|||
// let data = iniData(); |
|||
// Object.keys(data).forEach((k) => { |
|||
// this[k] = data[k]; |
|||
// }); |
|||
this.getApiData(); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style |
|||
lang="scss" |
|||
src="@/assets/scss/modules/visual/incident-info.scss" |
|||
scoped |
|||
></style> |
|||
@ -0,0 +1,34 @@ |
|||
<template> |
|||
<div class="empty"> |
|||
<div class="icon"></div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data () { |
|||
return {} |
|||
}, |
|||
methods: {} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss" rel="stylesheet/scss"> |
|||
.empty { |
|||
width: 100%; |
|||
height: calc(100% - 37px); |
|||
margin: 15px 0; |
|||
|
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
.icon { |
|||
width: 100%; |
|||
height: 160px; |
|||
background: url("../../../../../assets/img/modules/visual/noData.png") |
|||
no-repeat; |
|||
background-size: contain; |
|||
background-position: 50% 50%; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,588 @@ |
|||
<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">{{ singleTitle }}</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">{{ moreTitle }}</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 analys-col-more 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" |
|||
@click="handleShow(item)"> |
|||
<img src="../../../../assets/img/shuju/measure/gantanhao.png" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<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 cate-col-w100"> |
|||
<div class="cate-list-w0" |
|||
:class="item.showItem && 'cate-list-w100'"> |
|||
<div class="list list-wr"> |
|||
<template v-if="item.projectList && item.projectList.length > 0"> |
|||
<div v-for="(n, i) in item.projectList" |
|||
:key="i" |
|||
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> |
|||
</template> |
|||
<div v-else class="no-data">暂无数据</div> |
|||
<!-- <div class="item"> |
|||
<div class="item-status">已结案</div> |
|||
<div class="item-content">合肥路与安宁路交合肥路与安宁路交</div> |
|||
</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">{{ singleTitle }}</div> |
|||
<div class="tips">(反应渠道)</div> |
|||
<!-- <div class="icon"> |
|||
<img src="../../../../assets/img/shuju/measure/gantanhao.png" /> |
|||
</div> --> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="analys-col"> |
|||
<img v-if="tempList.length > 1" |
|||
class="analys-up" |
|||
src="../../../../assets/img/shuju/measure/up-right.png" /> |
|||
<img v-if="tempList.length != 2" |
|||
class="analys-arrow" |
|||
src="../../../../assets/img/shuju/measure/you@2x.png" /> |
|||
<img v-if="tempList.length > 1" |
|||
class="analys-up analys-down" |
|||
src="../../../../assets/img/shuju/measure/down-right.png" /> |
|||
</div> |
|||
|
|||
<div class="analys-col list-wr" |
|||
:class="tempList.length > 2 && 'analys-col-wr' || 'analys-single'" |
|||
:style="'padding-top:' + (tempList.length - 3) * 190 + 'px;'"> |
|||
<div class="cate-list"> |
|||
<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" |
|||
@click="handleShow(item)"> |
|||
<img src="../../../../assets/img/shuju/measure/gantanhao.png" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<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 cate-col-w100"> |
|||
<div class="cate-list-w0" |
|||
:class="item.showItem && 'cate-list-w100'"> |
|||
<div class="list list-wr"> |
|||
<template v-if="item.projectList && item.projectList.length > 0"> |
|||
<div v-for="(n, i) in item.projectList" |
|||
:key="i" |
|||
class="item" |
|||
@click="handleProject(n)"> |
|||
<div class="item-status" |
|||
:class="'item-status-'+n.status"> |
|||
{{ n.statusName || filterStatus(n.status)}} |
|||
</div> |
|||
<div class="item-content">{{n.title}}</div> |
|||
</div> |
|||
</template> |
|||
<div v-else class="no-data">暂无数据</div> |
|||
<!-- <div class="item"> |
|||
<div class="item-status">已结案</div> |
|||
<div class="item-content">合肥路与安宁路交合肥路与安宁路交</div> |
|||
</div> --> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
// singleList: [ |
|||
// { |
|||
// categoryName: '辨明服务', |
|||
// categoryCode: '1', |
|||
// showItem: true, |
|||
// projectList: [ |
|||
// { |
|||
// title: '不知道写了什么哈哈哈', |
|||
// status: 'closed', |
|||
// statusName: '', |
|||
// projectId: '1' |
|||
// } |
|||
// ] |
|||
// } |
|||
// ] |
|||
export default { |
|||
name: 'Analyse', |
|||
props: { |
|||
hasEvent: { |
|||
type: Boolean, // 楼院小组和事件上报同时存在时 为 true |
|||
default: false |
|||
}, |
|||
moreTitle: String, // hasEvent 为true 时 传入 |
|||
moreList: Array, // hasEvent 为true 时 传入 |
|||
singleTitle: { // 默认，必传 单个来源或多个来源 |
|||
type: String, |
|||
default: '楼院小组' |
|||
}, |
|||
userList: Array, // 默认，必传 单个来源或多个来源 |
|||
userName: String, // 默认，必传 单个来源或多个来源 |
|||
singleList: Array, // 默认，必传 单个来源或多个来源 |
|||
|
|||
}, |
|||
data () { |
|||
return { |
|||
sourceTab: 'group', |
|||
tempList: [] |
|||
} |
|||
}, |
|||
created () { |
|||
this.tempList = [...this.singleList] |
|||
|
|||
}, |
|||
methods: { |
|||
filterStatus (status) { |
|||
const statusObj = { |
|||
pending: '待处理', |
|||
closed: '已结案' |
|||
} |
|||
return statusObj[status] |
|||
}, |
|||
handleTabs (type) { |
|||
if (type === 'group') this.tempList = [...this.singleList] |
|||
else if (type === 'event') this.tempList = [...this.moreList] |
|||
this.sourceTab = type |
|||
const _dom = document.getElementById('scroll-wr') |
|||
_dom.scrollTop = 0 |
|||
}, |
|||
handleProject (item) { |
|||
this.$emit('project', item) |
|||
}, |
|||
handleUser (item) { |
|||
this.$emit('user', item) |
|||
}, |
|||
handleShow (item) { |
|||
item.showItem = !item.showItem |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.analyse-container { |
|||
color: #fff; |
|||
.analyse-wr { |
|||
display: flex; |
|||
align-items: center; |
|||
width: 100%; |
|||
max-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-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 0.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 0.2s; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.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; |
|||
color: #fff; |
|||
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, |
|||
&-canceled { |
|||
background: rgba(224, 84, 0, 1); |
|||
} |
|||
&-assigned, |
|||
&-have_order { |
|||
background: rgba(9, 163, 125, 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-more { |
|||
height: 560px; |
|||
} |
|||
.analys-single { |
|||
.list { |
|||
height: 235px; |
|||
} |
|||
.cate-list { |
|||
.cate-row { |
|||
margin-bottom: 0; |
|||
} |
|||
} |
|||
} |
|||
.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; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.no-data { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
height: 100%; |
|||
color: #fff; |
|||
text-align: center; |
|||
line-height: 100%; |
|||
} |
|||
.pad10 { |
|||
padding-top: 10px; |
|||
} |
|||
.list-wr::-webkit-scrollbar { |
|||
width: 8px; |
|||
// background: linear-gradient(270deg, #0063FE, #0095FF); |
|||
} |
|||
|
|||
.list-wr::-webkit-scrollbar-corner, |
|||
/* 滚动条角落 */ |
|||
.list-wr::-webkit-scrollbar-thumb, |
|||
.list-wr::-webkit-scrollbar-track { |
|||
/*滚动条的轨道*/ |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
.list-wr::-webkit-scrollbar-corner, |
|||
.list-wr::-webkit-scrollbar-track { |
|||
/* 滚动条轨道 */ |
|||
|
|||
background: rgba(12, 129, 254, 0.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> |
|||
@ -0,0 +1,222 @@ |
|||
<template> |
|||
<div class="m-chart"> |
|||
<canvas id="myChart" :width="width" :height="height" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import nextTick from "dai-js/tools/nextTick"; |
|||
// ios下字体渲染有bug |
|||
const fontFamily = "PingFang SC"; |
|||
const fontSize = 14; |
|||
|
|||
let chart; |
|||
let srcData = []; |
|||
|
|||
let textShapeList = []; |
|||
const addTextShape = () => { |
|||
if (textShapeList.length > 0) { |
|||
textShapeList.forEach((item) => { |
|||
item.remove(true); |
|||
}); |
|||
textShapeList = []; |
|||
} |
|||
// 添加折线上文本 |
|||
const canvas = chart.get("canvas"); |
|||
const group = canvas.addGroup(); |
|||
const shapes = {}; |
|||
|
|||
function addFn(list) { |
|||
const listLength = list.length; |
|||
list.forEach(function (obj, index) { |
|||
// 避免显示太多，乱七八糟 |
|||
if (listLength > 7 && index > 0 && index < listLength - 1) { |
|||
if (index % Math.ceil(listLength / 5) != 0) { |
|||
return; |
|||
} |
|||
} |
|||
|
|||
const offsetX = 6; |
|||
const offsetY = 1; |
|||
const point = chart.getPosition(obj); |
|||
const text = group.addShape("text", { |
|||
attrs: { |
|||
x: obj.type === "支持" ? point.x + 2 * offsetX : point.x - offsetX, |
|||
y: point.y + offsetY, |
|||
text: obj.value, |
|||
textAlign: "center", |
|||
textBaseline: "bottom", |
|||
fill: "#333", |
|||
fontWeight: 500, |
|||
fontFamily, |
|||
fontSize, |
|||
}, |
|||
}); |
|||
|
|||
textShapeList.push(text); // 缓存该 shape, 便于后续查找 |
|||
}); |
|||
} |
|||
srcData.sort((a, b) => { |
|||
return new Date(a.date).getTime() - new Date(b.date).getTime(); |
|||
}); |
|||
let supData = srcData.filter((item) => item.type == "支持"); |
|||
let oppData = srcData.filter((item) => item.type == "反对"); |
|||
addFn(supData); |
|||
addFn(oppData); |
|||
}; |
|||
|
|||
const iniChart = function (config, srcData) { |
|||
chart = new window.F2.Chart({ |
|||
id: "myChart", |
|||
...config, |
|||
}); |
|||
|
|||
const supColor = "#FFDA0E"; |
|||
const oppColor = "#00E5ED"; |
|||
|
|||
chart.source(srcData, { |
|||
date: { |
|||
range: [0, 1], |
|||
type: "timeCat", |
|||
mask: "MM-DD", |
|||
}, |
|||
value: { |
|||
// type: "linear", |
|||
}, |
|||
}); |
|||
// 设置坐标轴 |
|||
chart.axis("date", { |
|||
line: { |
|||
lineWidth: 1, |
|||
stroke: "#E7EEEE", |
|||
}, |
|||
label: { |
|||
fontWeight: 500, |
|||
fontSize, |
|||
fill: "#B5B7BF", |
|||
textBaseline: "middle", |
|||
}, |
|||
labelOffset: 25, |
|||
country: { |
|||
range: [0.1, 0.9], // 配置 range 范围，使左右两边不留边距 |
|||
}, |
|||
grid: null, |
|||
}); |
|||
chart.axis("value", { |
|||
line: { |
|||
lineWidth: 1, |
|||
stroke: "#E7EEEE", |
|||
}, |
|||
labelOffset: 20, |
|||
label: { |
|||
fontWeight: 500, |
|||
fontSize, |
|||
fill: "#B5B7BF", |
|||
}, |
|||
}); |
|||
// 类别标识区 |
|||
chart.legend({ |
|||
position: "bottom", |
|||
align: "center", |
|||
offsetY: -30, |
|||
custom: true, |
|||
nameStyle: { |
|||
fill: "#999", |
|||
fontWeight: 500, |
|||
fontSize, |
|||
}, |
|||
itemWidth: 150, |
|||
wordSpace: 25, |
|||
items: [ |
|||
{ |
|||
name: "支持", |
|||
marker(x, y, r, ctx) { |
|||
ctx.lineWidth = 10; |
|||
ctx.strokeStyle = supColor; |
|||
ctx.moveTo(x - r - 15, y); |
|||
ctx.lineTo(x + r + 15, y); |
|||
ctx.stroke(); |
|||
ctx.fill(); |
|||
}, |
|||
}, |
|||
{ |
|||
name: "反对", |
|||
marker(x, y, r, ctx) { |
|||
ctx.lineWidth = 10; |
|||
ctx.strokeStyle = oppColor; |
|||
ctx.moveTo(x - r - 15, y); |
|||
ctx.lineTo(x + r + 15, y); |
|||
ctx.stroke(); |
|||
ctx.fill(); |
|||
}, |
|||
}, |
|||
], |
|||
}); |
|||
// 添加折线 |
|||
chart |
|||
.line() |
|||
.position("date*value") |
|||
.color("type", (type) => { |
|||
if (type === "支持") { |
|||
return supColor; |
|||
} |
|||
return oppColor; |
|||
}) |
|||
.style("type", { |
|||
lineWidth: 1, |
|||
}) |
|||
.animate(); |
|||
chart.render(); |
|||
|
|||
addTextShape(); |
|||
|
|||
// 注意：需要把chart return 出来 |
|||
return chart; |
|||
}; |
|||
|
|||
export default { |
|||
name: "chart", |
|||
props: { |
|||
list: { |
|||
type: Array, |
|||
default: () => { |
|||
return []; |
|||
}, |
|||
}, |
|||
config: { |
|||
type: Object, |
|||
default: () => { |
|||
return {}; |
|||
}, |
|||
}, |
|||
width: { |
|||
type: Number, |
|||
default: 400, |
|||
}, |
|||
height: { |
|||
type: Number, |
|||
default: 260, |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
iniLoading: false, |
|||
}; |
|||
}, |
|||
watch: { |
|||
list(data) { |
|||
chart.changeData(data); |
|||
srcData = data; |
|||
addTextShape(); |
|||
}, |
|||
}, |
|||
async created() { |
|||
await nextTick(200); |
|||
iniChart(this.config, this.list); |
|||
await nextTick(200); |
|||
this.iniLoading = true; |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped></style> |
|||
@ -0,0 +1,309 @@ |
|||
<template> |
|||
<div> |
|||
<div class="m-sizer"> |
|||
<span>时间：</span> |
|||
<el-date-picker |
|||
v-model="monthId" |
|||
type="month" |
|||
:clearable="false" |
|||
prefix-icon="el-icon-caret-bottom" |
|||
placeholder="选择日期" |
|||
value-format="yyyyMM" |
|||
> |
|||
</el-date-picker> |
|||
</div> |
|||
|
|||
<div class="g-cpt"> |
|||
<div class="m-tb"> |
|||
<cpt-card> |
|||
<div class="title"> |
|||
<img src="@/assets/img/shuju/title-tip.png" /> |
|||
<span>公益达人</span> |
|||
</div> |
|||
|
|||
<div class="tb"> |
|||
<cpt-tb |
|||
:highlight-top3="true" |
|||
:col-list="tb3.colList" |
|||
:loading="tb3.loading" |
|||
:header="tb3.header" |
|||
:list="tb3.list" |
|||
></cpt-tb> |
|||
</div> |
|||
</cpt-card> |
|||
</div> |
|||
|
|||
<div class="m-tb"> |
|||
<cpt-card> |
|||
<div class="title"> |
|||
<img src="@/assets/img/shuju/title-tip.png" /> |
|||
<span>党员先锋</span> |
|||
</div> |
|||
|
|||
<div class="tb"> |
|||
<cpt-tb |
|||
:highlight-top3="true" |
|||
:col-list="tb2.colList" |
|||
:loading="tb2.loading" |
|||
:header="tb2.header" |
|||
:list="tb2.list" |
|||
></cpt-tb> |
|||
</div> |
|||
</cpt-card> |
|||
</div> |
|||
|
|||
<div class="m-tb"> |
|||
<cpt-card> |
|||
<div class="title"> |
|||
<img src="@/assets/img/shuju/title-tip.png" /> |
|||
<span>动力网格</span> |
|||
</div> |
|||
|
|||
<div class="tb"> |
|||
<cpt-tb |
|||
:highlight-top3="true" |
|||
:col-list="tb1.colList" |
|||
:loading="tb1.loading" |
|||
:header="tb1.header" |
|||
:list="tb1.list" |
|||
></cpt-tb> |
|||
</div> |
|||
</cpt-card> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { Loading } from "element-ui"; //引入Loading服务 |
|||
import { requestPost } from "@/js/dai/request"; |
|||
import cptCard from "@/views/modules/visual/cpts/card"; |
|||
import cptTb from "@/views/modules/visual/cpts/tb"; |
|||
import nextTick from "dai-js/tools/nextTick"; |
|||
|
|||
export default { |
|||
name: "heart", |
|||
data() { |
|||
return { |
|||
agencyId: "", |
|||
areaCode: "", |
|||
|
|||
monthId: "", |
|||
|
|||
// 先进网格/支部 |
|||
tb1: { |
|||
loading: true, |
|||
colList: [ |
|||
{ |
|||
align: "center", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "center", |
|||
width: "60%", |
|||
}, |
|||
{ |
|||
align: "center", |
|||
width: "30", |
|||
}, |
|||
], |
|||
header: ["序号", "网格名称", "活力值"], |
|||
list: [], |
|||
srcList: [], |
|||
currentIndex: 0, |
|||
}, |
|||
|
|||
// 先进网格/支部 |
|||
tb2: { |
|||
loading: true, |
|||
colList: [ |
|||
{ |
|||
align: "center", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "center", |
|||
width: "30%", |
|||
}, |
|||
{ |
|||
align: "center", |
|||
width: "40%", |
|||
}, |
|||
{ |
|||
align: "center", |
|||
width: "20", |
|||
}, |
|||
], |
|||
header: ["序号", "党员姓名", "所属网格", "积分总数"], |
|||
list: [], |
|||
srcList: [], |
|||
currentIndex: 0, |
|||
}, |
|||
|
|||
// 先进网格/支部 |
|||
tb3: { |
|||
loading: true, |
|||
colList: [ |
|||
{ |
|||
align: "center", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "center", |
|||
width: "30%", |
|||
}, |
|||
{ |
|||
align: "center", |
|||
width: "40%", |
|||
}, |
|||
{ |
|||
align: "center", |
|||
width: "20", |
|||
}, |
|||
], |
|||
header: ["序号", "居民姓名", "所属网格", "积分总数"], |
|||
list: [], |
|||
srcList: [], |
|||
currentIndex: 0, |
|||
}, |
|||
}; |
|||
}, |
|||
|
|||
props: {}, |
|||
|
|||
computed: {}, |
|||
|
|||
components: { |
|||
cptCard, |
|||
cptTb, |
|||
}, |
|||
|
|||
watch: { |
|||
monthId() { |
|||
this.getApiData(); |
|||
}, |
|||
}, |
|||
|
|||
async mounted() { |
|||
this.userId = this.uid; |
|||
await nextTick(100); |
|||
this.getApiData(); |
|||
}, |
|||
|
|||
methods: { |
|||
handleSearch() {}, |
|||
|
|||
async getApiData() { |
|||
await this.getAgencyInfo(); |
|||
this.getTb1(); |
|||
this.getTb2(); |
|||
this.getTb3(); |
|||
}, |
|||
|
|||
toUserInfo(uid) { |
|||
this.$router.push({ path: `/main-shuju/visual-basicinfo-people/${uid}` }); |
|||
}, |
|||
|
|||
// 获取当前组织信息 |
|||
async getAgencyInfo() { |
|||
const { data, code, msg } = await requestPost( |
|||
"/data/report/screen/agency/agencydetail-multic", |
|||
{ |
|||
agencyId: this.$store.state.user.agencyId, |
|||
} |
|||
); |
|||
if (msg === "success" && code === 0) { |
|||
this.agencyId = data.agencyId; |
|||
this.areaCode = data.areaCode; |
|||
} |
|||
}, |
|||
|
|||
//加载组织数据 |
|||
async getTb1() { |
|||
const { agencyId, areaCode } = this; |
|||
const url = "/data/report/screen/index/advancedbranchrank"; |
|||
let params = { |
|||
agencyId, |
|||
areaCode, |
|||
monthId: this.monthId, |
|||
orgType: "agency", |
|||
topNum: 50, |
|||
}; |
|||
|
|||
const { data, code, msg } = await requestPost(url, params); |
|||
this.tb1.loading = false; |
|||
|
|||
if (code === 0) { |
|||
this.tb1.list = data.map((item) => { |
|||
return [{ type: "index" }, item.name, item.scroe]; |
|||
}); |
|||
this.tb1.srcList = data; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
//加载组织数据 |
|||
async getTb2() { |
|||
const { agencyId, areaCode } = this; |
|||
const url = "/data/report/screen/user/partypointrank"; |
|||
let params = { |
|||
orgId: agencyId, |
|||
areaCode, |
|||
monthId: this.monthId, |
|||
orgType: "agency", |
|||
topNum: 50, |
|||
}; |
|||
|
|||
const { data, code, msg } = await requestPost(url, params); |
|||
this.tb2.loading = false; |
|||
|
|||
if (code === 0) { |
|||
this.tb2.list = data.map((item) => { |
|||
return [ |
|||
{ type: "index" }, |
|||
item.userName, |
|||
item.gridName, |
|||
item.pointTotal, |
|||
]; |
|||
}); |
|||
this.tb2.srcList = data; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
//加载组织数据 |
|||
async getTb3() { |
|||
const { agencyId, areaCode } = this; |
|||
const url = "/data/report/screen/user/userpointrank/withoutpartymember"; |
|||
let params = { |
|||
orgId: agencyId, |
|||
areaCode, |
|||
monthId: this.monthId, |
|||
orgType: "agency", |
|||
topNum: 50, |
|||
}; |
|||
|
|||
const { data, code, msg } = await requestPost(url, params); |
|||
this.tb3.loading = false; |
|||
|
|||
if (code === 0) { |
|||
this.tb3.list = data.map((item) => { |
|||
return [ |
|||
{ type: "index" }, |
|||
item.userName, |
|||
item.gridName, |
|||
item.pointTotal, |
|||
]; |
|||
}); |
|||
this.tb3.srcList = data; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" src="@/assets/scss/modules/visual/heart.scss" scoped></style> |
|||
@ -0,0 +1,305 @@ |
|||
<template> |
|||
<div class="m-pop"> |
|||
<div class="wrap"> |
|||
<cpt-card> |
|||
<div class="title"> |
|||
<img src="@/assets/img/shuju/title-tip.png" /> |
|||
<span>需求详情</span> |
|||
</div> |
|||
|
|||
<div class="btn-close" @click="handleClose"> |
|||
<img src="@/assets/img/shuju/people/close.png" /> |
|||
</div> |
|||
<div class="list-title">需求内容</div> |
|||
<div class="list-wr"> |
|||
<div class="list"> |
|||
<div class="item-desc"> |
|||
<!-- <span class="item-field">所属网格：</span> --> |
|||
<span>{{ info.content }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="item-field">所属网格：</span> |
|||
<span>{{ info.gridName }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="item-field">需求类型：</span> |
|||
<span>{{ info.categoryName }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="item-field">需求状态：</span> |
|||
<span>{{ info.statusName }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="item-field">上报类型：</span> |
|||
<span>{{ info.reportTypeName }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="item-field">上 报 人：</span> |
|||
<span>{{ info.reportUserName }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="item-field">上报人联系方式：</span> |
|||
<span>{{ info.reportUserMobile }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="item-field">上报时间：</span> |
|||
<span>{{ info.reportTime }}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="item-field">服务时间：</span> |
|||
<span>{{ info.wantServiceTime }}</span> |
|||
</div> |
|||
</div> |
|||
<div class="list"> |
|||
<div class="item" v-if="info.serviceShowFlag"> |
|||
<span class="item-field">服务方：</span> |
|||
<span>{{ info.serviceShowName }}</span> |
|||
</div> |
|||
<template v-if="info.status == 'finished'"> |
|||
<div class="item"> |
|||
<span class="item-field">实际服务时间：</span> |
|||
<span v-if="info.serviceStartTime" |
|||
>{{ info.serviceStartTime }} 至 <br /> |
|||
{{ info.serviceEndTime }}</span |
|||
> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="item-field">完成情况：</span> |
|||
<span |
|||
>{{ info.finishResult == "resolved" ? "已解决" : "未解决" }} |
|||
<br /> |
|||
{{ info.finishDesc }}</span |
|||
> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="item-field">评价：</span> |
|||
<span> |
|||
<el-rate :value="info.score" disabled></el-rate> |
|||
</span> |
|||
</div> |
|||
</template> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
<div class="tabs"> |
|||
<div class="tab-btn"> |
|||
<img src="@/assets/img/shuju/people/arrow-double-left.png" /> |
|||
</div> |
|||
<div class="tab z-on">研判分析</div> |
|||
<div class="tab-btn"> |
|||
<img src="@/assets/img/shuju/people/arrow-double-right.png" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<div style="padding: 30px 0"> |
|||
<analyse |
|||
v-if="!loading" |
|||
:single-list="demandList" |
|||
:single-title="'需求上报'" |
|||
:more-title="'事件上报'" |
|||
:user-list="userLists" |
|||
:user-name="info.demandUserName" |
|||
:has-event="false" |
|||
:more-list="eventList" |
|||
@project="handleToProject" |
|||
@user="handleToUser" |
|||
/> |
|||
</div> |
|||
</cpt-card> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import cptCard from "@/views/modules/visual/cpts/card"; |
|||
import analyse from "../cpts/analyse.vue"; |
|||
import { requestPost } from "@/js/dai/request"; |
|||
|
|||
export default { |
|||
name: "dialogInfo", |
|||
props: { |
|||
userId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
demandId: String, |
|||
queryOrigin: String, |
|||
// info: Object, |
|||
}, |
|||
|
|||
components: { |
|||
cptCard, |
|||
analyse, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
loading: false, |
|||
info: {}, |
|||
demandList: [ |
|||
// { |
|||
// categoryName: '辨明服务', |
|||
// categoryCode: '1', |
|||
// showItem: false, |
|||
// projectList: [ |
|||
// { |
|||
// title: '不知道写了什么哈哈哈', |
|||
// status: 'closed', |
|||
// projectId: '1' |
|||
// } |
|||
// |
|||
// ] |
|||
// }, |
|||
|
|||
], |
|||
userLists: [ |
|||
// { |
|||
// homeId: "1", |
|||
// icUserId: "1", |
|||
// icUserName: "沾上干", |
|||
// } |
|||
], |
|||
userName: "王亚男哈", |
|||
eventList: [ |
|||
// { |
|||
// categoryName: "辨明服务", |
|||
// categoryCode: "1", |
|||
// projectList: [ |
|||
// { |
|||
// title: "不知道写了什么哈哈哈", |
|||
// status: "closed", |
|||
// projectId: "1", |
|||
// }, |
|||
|
|||
// ], |
|||
// }, |
|||
|
|||
] |
|||
}; |
|||
}, |
|||
|
|||
async mounted() { |
|||
await this.getInfo(this.demandId); |
|||
}, |
|||
|
|||
methods: { |
|||
handleClose() { |
|||
this.$emit("close"); |
|||
}, |
|||
async getInfo(demandId) { |
|||
// const url = "/gov/org/customeragency/staffinagencylist"; |
|||
const url = "/heart/userdemand/demandDetail"; |
|||
let params = { |
|||
demandRecId: demandId, |
|||
}; |
|||
const { data, code, msg } = await requestPost(url, params); |
|||
if (code === 0) { |
|||
// console.log('data-org----dict', data) |
|||
this.info = data; |
|||
this.getAnalyse(demandId); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
async getAnalyse(demandId) { |
|||
// const url = "/gov/org/customeragency/staffinagencylist"; |
|||
this.loading = true; |
|||
const url = "/heart/userdemand/demand-research-analysis"; |
|||
let params = { |
|||
firstCategoryCode: this.info.firstCategoryCode, |
|||
demandRecId: demandId, |
|||
icResiUserId: this.info.icResiUserId, |
|||
epmetUserIdList: [this.info.epmetUserId], |
|||
queryOrigin: this.queryOrigin, |
|||
}; |
|||
const { data, code, msg } = await requestPost(url, params); |
|||
if (code === 0) { |
|||
console.log("data-org----a", data); |
|||
this.userLists = data.houseUserList.map((item) => { |
|||
return { |
|||
...item, |
|||
icUserId: item.icResiUserId, |
|||
}; |
|||
}); |
|||
this.demandList = data.demandData.map((item) => { |
|||
return { |
|||
...item, |
|||
showItem: true, |
|||
categoryName: item.firstCategoryName, |
|||
categoryCode: item.firstCategoryCode, |
|||
projectList: item.demandList.map((n) => { |
|||
return { |
|||
...n, |
|||
title: n.content, |
|||
status: n.status, |
|||
statusName: n.statusName, |
|||
projectId: n.demandRecId, |
|||
}; |
|||
}), |
|||
}; |
|||
}); |
|||
console.log("demandList-dd", this.demandList); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
this.loading = false; |
|||
}, |
|||
handleToProject(val) { |
|||
console.log("val---v", val); |
|||
this.getInfo(val.projectId); |
|||
}, |
|||
handleToUser(val) { |
|||
console.log("val-uuu", val); |
|||
|
|||
this.$router.push({ |
|||
path: `/main-shuju/visual-basicinfo-people/${val.icUserId}`, |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style |
|||
lang="scss" |
|||
src="@/assets/scss/modules/visual/people.scss" |
|||
scoped |
|||
></style> |
|||
<style lang="scss" scoped> |
|||
.m-pop { |
|||
color: #fff; |
|||
.wrap { |
|||
.list { |
|||
display: block; |
|||
width: 50%; |
|||
.item { |
|||
display: flex; |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
margin-top: 0; |
|||
margin-bottom: 15px; |
|||
font-size: 16px; |
|||
cursor: pointer; |
|||
} |
|||
.item-desc { |
|||
font-size: 16px; |
|||
color: #fff; |
|||
margin-bottom: 10px; |
|||
line-height: 24px; |
|||
} |
|||
} |
|||
} |
|||
.list-title { |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
padding: 20px 0 10px 62px; |
|||
font-size: 20px; |
|||
color: #fff; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
.list-wr { |
|||
display: flex; |
|||
padding: 0 32px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue