|
|
|
@ -1,38 +1,92 @@ |
|
|
|
<template> |
|
|
|
<div class="personnel-portrait" v-loading="loading" element-loading-text="加载中..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0,0,0,0.5)"> |
|
|
|
<Tabs v-model="resultType" :list="resultTypeList" @changeVal="resultTypeChange" /> |
|
|
|
<div |
|
|
|
class="personnel-portrait" |
|
|
|
v-loading="loading" |
|
|
|
element-loading-text="加载中..." |
|
|
|
element-loading-spinner="el-icon-loading" |
|
|
|
element-loading-background="rgba(0,0,0,0.5)" |
|
|
|
> |
|
|
|
<Tabs |
|
|
|
v-model="resultType" |
|
|
|
:list="resultTypeList" |
|
|
|
@changeVal="resultTypeChange" |
|
|
|
/> |
|
|
|
<div class="screen"> |
|
|
|
<div class="txt">不满意人员画像</div> |
|
|
|
<el-select v-if="resultType == 'provinceAndSelf'" v-model="typeCondition" @change="getData" placeholder="请选择" class="select" popper-class="selectPopClass"> |
|
|
|
<el-option v-for="item in typeConditionList" :key="item.value" :label="item.label" :value="item.value"> </el-option> |
|
|
|
<el-select |
|
|
|
v-if="resultType == 'provinceAndSelf'" |
|
|
|
v-model="typeCondition" |
|
|
|
@change="getData" |
|
|
|
placeholder="请选择" |
|
|
|
class="select" |
|
|
|
popper-class="selectPopClass" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in typeConditionList" |
|
|
|
:key="item.value" |
|
|
|
:label="item.label" |
|
|
|
:value="item.value" |
|
|
|
> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="portrait"> |
|
|
|
<div class="tag yellow" v-if="gridName"> |
|
|
|
<div :class="[gridName.length > 5 ? 'smallSize' : '', 'text']">{{ gridName }}</div> |
|
|
|
<div :class="[gridName.length > 5 ? 'smallSize' : '', 'text']"> |
|
|
|
{{ gridName }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="tag blue" v-if="ageClassification"> |
|
|
|
<div :class="[ageClassification.length > 5 ? 'smallSize' : '', 'text']">{{ ageClassification }}</div> |
|
|
|
<div :class="[ageClassification.length > 5 ? 'smallSize' : '', 'text']"> |
|
|
|
{{ ageClassification }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="tag red" v-if="residentTagName"> |
|
|
|
<div :class="[residentTagName.length > 5 ? 'smallSize' : '', 'text']">{{ residentTagName }}</div> |
|
|
|
<div :class="[residentTagName.length > 5 ? 'smallSize' : '', 'text']"> |
|
|
|
{{ residentTagName }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="tag light" v-if="monthIncomeLevel"> |
|
|
|
<div :class="[monthIncomeLevel.length > 5 ? 'smallSize' : '', 'text']">{{ monthIncomeLevel }}</div> |
|
|
|
<div :class="[monthIncomeLevel.length > 5 ? 'smallSize' : '', 'text']"> |
|
|
|
{{ monthIncomeLevel }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="tag green" v-if="cultureName"> |
|
|
|
<div :class="[cultureName.length > 5 ? 'smallSize' : '', 'text']">{{ cultureName }}</div> |
|
|
|
<div :class="[cultureName.length > 5 ? 'smallSize' : '', 'text']"> |
|
|
|
{{ cultureName }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="tag orange" v-if="marriageName"> |
|
|
|
<div :class="[marriageName.length > 5 ? 'smallSize' : '', 'text']">{{ marriageName }}</div> |
|
|
|
<div :class="[marriageName.length > 5 ? 'smallSize' : '', 'text']"> |
|
|
|
{{ marriageName }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="tag purple" v-if="gender"> |
|
|
|
<div class="text"> |
|
|
|
{{ gender === "1" ? "男" : gender === "2" ? "女" : gender === "0" ? "未知" : "" }} |
|
|
|
{{ |
|
|
|
gender === "1" |
|
|
|
? "男" |
|
|
|
: gender === "2" |
|
|
|
? "女" |
|
|
|
: gender === "0" |
|
|
|
? "未知" |
|
|
|
: "" |
|
|
|
}} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="portrait1"> |
|
|
|
<img class="daqipao qipao1" src="@/assets/images/overview/qipao.png" /> |
|
|
|
<img class="xiaoqipao qipao2" src="@/assets/images/overview/qipao-xiao.png" /> |
|
|
|
<img class="daqipao qipao3" src="@/assets/images/overview/qipao.png" /> |
|
|
|
<img class="xiaoqipao qipao4" src="@/assets/images/overview/qipao-xiao.png" /> |
|
|
|
<img class="daqipao qipao5" src="@/assets/images/overview/qipao.png" /> |
|
|
|
<img class="xiaoqipao qipao6" src="@/assets/images/overview/qipao-xiao.png" /> |
|
|
|
<img class="daqipao qipao7" src="@/assets/images/overview/qipao.png" /> |
|
|
|
<img class="xiaoqipao qipao8" src="@/assets/images/overview/qipao-xiao.png" /> |
|
|
|
</div> |
|
|
|
<div style="display: flex"> |
|
|
|
<div class="btn" @click="gotopage"> |
|
|
|
<div> |
|
|
|
@ -100,13 +154,18 @@ export default { |
|
|
|
this.getData(); |
|
|
|
}, |
|
|
|
gotopage() { |
|
|
|
this.$router.push("/dataBoard/satisfactionEval/dissatisfiedPersonnel?searchParams=" + this.searchParams); |
|
|
|
this.$router.push( |
|
|
|
"/dataBoard/satisfactionEval/dissatisfiedPersonnel?searchParams=" + |
|
|
|
this.searchParams |
|
|
|
); |
|
|
|
}, |
|
|
|
getDisKey() { |
|
|
|
this.$http.post("/sys/dict/data/dictlist", { dictType: "satisfaction_category" }).then(({ data: { data } }) => { |
|
|
|
this.typeCondition = data[0].value; |
|
|
|
this.typeConditionList = data; |
|
|
|
}); |
|
|
|
this.$http |
|
|
|
.post("/sys/dict/data/dictlist", { dictType: "satisfaction_category" }) |
|
|
|
.then(({ data: { data } }) => { |
|
|
|
this.typeCondition = data[0].value; |
|
|
|
this.typeConditionList = data; |
|
|
|
}); |
|
|
|
}, |
|
|
|
getData() { |
|
|
|
this.loading = true; |
|
|
|
@ -114,20 +173,26 @@ export default { |
|
|
|
level: this.$store.state.chooseArea.chooseName.level, |
|
|
|
orgId: this.$store.state.chooseArea.chooseName.orgId, |
|
|
|
queryType: this.resultType, |
|
|
|
category: this.resultType == "provinceAndSelf" ? this.typeCondition : null, |
|
|
|
category: |
|
|
|
this.resultType == "provinceAndSelf" ? this.typeCondition : null, |
|
|
|
}; |
|
|
|
this.$http.get("/governance/satisfactionOverview/satisfactionCrowdPortrait?" + this.$paramsFormat(params)).then(({ data: { data } }) => { |
|
|
|
this.gender = data.gender; |
|
|
|
this.marriageName = data.marriageName; |
|
|
|
this.ageClassification = data.ageClassification; |
|
|
|
this.cultureName = data.cultureName; |
|
|
|
this.gridName = data.gridName; |
|
|
|
this.monthIncomeLevel = data.monthIncomeLevel; |
|
|
|
this.residentTagName = data.residentTagName; |
|
|
|
this.matchPeopleNum = data.matchPeopleNum; |
|
|
|
this.loading = false; |
|
|
|
this.searchParams = JSON.stringify({ ...data, ...params }); |
|
|
|
}); |
|
|
|
this.$http |
|
|
|
.get( |
|
|
|
"/governance/satisfactionOverview/satisfactionCrowdPortrait?" + |
|
|
|
this.$paramsFormat(params) |
|
|
|
) |
|
|
|
.then(({ data: { data } }) => { |
|
|
|
this.gender = data.gender; |
|
|
|
this.marriageName = data.marriageName; |
|
|
|
this.ageClassification = data.ageClassification; |
|
|
|
this.cultureName = data.cultureName; |
|
|
|
this.gridName = data.gridName; |
|
|
|
this.monthIncomeLevel = data.monthIncomeLevel; |
|
|
|
this.residentTagName = data.residentTagName; |
|
|
|
this.matchPeopleNum = data.matchPeopleNum; |
|
|
|
this.loading = false; |
|
|
|
this.searchParams = JSON.stringify({ ...data, ...params }); |
|
|
|
}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
@ -173,11 +238,82 @@ $purple: #6642fd; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.portrait1 { |
|
|
|
width: 500px; |
|
|
|
height: 345px; |
|
|
|
margin-top: -345px; |
|
|
|
padding-left: 80px; |
|
|
|
overflow: hidden; |
|
|
|
img { |
|
|
|
margin: 30px; |
|
|
|
} |
|
|
|
.daqipao { |
|
|
|
width: 8px; |
|
|
|
height: 48px; |
|
|
|
} |
|
|
|
|
|
|
|
.xiaoqipao { |
|
|
|
width: 8px; |
|
|
|
height: 34px; |
|
|
|
} |
|
|
|
.qipao1 { |
|
|
|
animation: scrollmyd 5s linear infinite; |
|
|
|
} |
|
|
|
|
|
|
|
.qipao2 { |
|
|
|
animation: scrollmyd1 7s linear infinite; |
|
|
|
} |
|
|
|
|
|
|
|
.qipao3 { |
|
|
|
animation: scrollmyd 6s linear infinite; |
|
|
|
} |
|
|
|
|
|
|
|
.qipao4 { |
|
|
|
animation: scrollmyd1 8s linear infinite; |
|
|
|
} |
|
|
|
|
|
|
|
.qipao5 { |
|
|
|
animation: scrollmyd 5s linear infinite; |
|
|
|
} |
|
|
|
|
|
|
|
.qipao6 { |
|
|
|
animation: scrollmyd1 7s linear infinite; |
|
|
|
} |
|
|
|
|
|
|
|
.qipao7 { |
|
|
|
animation: scrollmyd 4s linear infinite; |
|
|
|
} |
|
|
|
|
|
|
|
.qipao8 { |
|
|
|
animation: scrollmyd1 6s linear infinite; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes scrollmyd { |
|
|
|
0% { |
|
|
|
transform: translatey(700%); |
|
|
|
} |
|
|
|
|
|
|
|
100% { |
|
|
|
transform: translatey(-200%); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes scrollmyd1 { |
|
|
|
0% { |
|
|
|
transform: translatey(900%); |
|
|
|
} |
|
|
|
|
|
|
|
100% { |
|
|
|
transform: translatey(-200%); |
|
|
|
} |
|
|
|
} |
|
|
|
.portrait { |
|
|
|
width: 388px; |
|
|
|
height: 345px; |
|
|
|
position: relative; |
|
|
|
background: url("@/assets/images/manyidu/hx_bg.png") no-repeat center; |
|
|
|
background-size: 234px 186px; |
|
|
|
margin: 0 auto; |
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
|
