elink-star
/
epmet-work-pc
17
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

问题修改

V1.0
张若晨 2 years ago
parent
04aa8963c3
commit
fe74d20aed
2 changed files with 249 additions and 175 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 115
      src/views/dataBoard/satisfactionEval/modules/PersonnelPortrait/index.vue
  2. 309
      src/views/dataBoard/satisfactionEval/modules/TypesOfDissatisfaction/index.vue

115
src/views/dataBoard/satisfactionEval/modules/PersonnelPortrait/index.vue
View File

@ -1,26 +1,37 @@
<template> <template>
<div class="personnel-portrait" <div
v-loading="loading" class="personnel-portrait"
element-loading-text="加载中..." v-loading="loading"
element-loading-spinner="el-icon-loading" element-loading-text="加载中..."
element-loading-background="rgba(0,0,0,0.5)"> element-loading-spinner="el-icon-loading"
<Tabs v-model="resultType" :list="resultTypeList" @changeVal="resultTypeChange"/> element-loading-background="rgba(0,0,0,0.5)"
>
<Tabs
v-model="resultType"
:list="resultTypeList"
@changeVal="resultTypeChange"
/>
<div class="screen"> <div class="screen">
<div class="txt">不满意人员画像</div> <div class="txt">不满意人员画像</div>
<!-- <el-select v-model="typeCondition" @change="getData" placeholder="请选择" class="select" popper-class="selectPopClass"> <el-select
<el-option v-if="resultType == 'provinceAndSelf'"
v-for="item in typeConditionList" v-model="typeCondition"
:key="item.value" @change="getData"
:label="item.label" placeholder="请选择"
:value="item.value"> class="select"
</el-option> popper-class="selectPopClass"
</el-select>--> >
<el-option
v-for="item in typeConditionList"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div> </div>
<div <div class="portrait">
class="portrait">
<div class="tag yellow" v-if="gridName"> <div class="tag yellow" v-if="gridName">
<div class="text">{{ gridName }}</div> <div class="text">{{ gridName }}</div>
</div> </div>
@ -40,7 +51,17 @@
<div class="text">{{ marriageName }}</div> <div class="text">{{ marriageName }}</div>
</div> </div>
<div class="tag purple" v-if="gender"> <div class="tag purple" v-if="gender">
<div class="text">{{ gender === "1" ? "男" : gender === "2" ? "女" : gender === "0" ? "未知" : "" }}</div> <div class="text">
{{
gender === "1"
? "男"
: gender === "2"
? "女"
: gender === "0"
? "未知"
: ""
}}
</div>
</div> </div>
</div> </div>
@ -49,7 +70,7 @@
按画像匹配到同类：<span> 按画像匹配到同类：<span>
<b>{{ matchPeopleNum ? matchPeopleNum : 0 }}</b <b>{{ matchPeopleNum ? matchPeopleNum : 0 }}</b
>人</span >人</span
> >
</div> </div>
<i class="el-icon-arrow-right"></i> <i class="el-icon-arrow-right"></i>
</div> </div>
@ -61,7 +82,7 @@ import Tabs from "@/views/dataBoard/satisfactionEval/components/Tabs/index.vue";
export default { export default {
name: "PersonnelPortrait", name: "PersonnelPortrait",
components: {Tabs}, components: { Tabs },
data() { data() {
return { return {
resultType: "provinceAndSelf", resultType: "provinceAndSelf",
@ -86,7 +107,7 @@ export default {
residentTagName: "", residentTagName: "",
matchPeopleNum: 0, matchPeopleNum: 0,
searchParams: "", searchParams: "",
loading: true loading: true,
}; };
}, },
watch: { watch: {
@ -99,7 +120,7 @@ export default {
}, },
mounted() { mounted() {
if (this.$store.state.chooseArea.chooseName.orgId) { if (this.$store.state.chooseArea.chooseName.orgId) {
// this.getDisKey() this.getDisKey();
this.getData(); this.getData();
} }
}, },
@ -109,34 +130,44 @@ export default {
this.getData(); this.getData();
}, },
gotopage() { gotopage() {
this.$router.push("/dataBoard/satisfactionEval/dissatisfiedPersonnel?searchParams=" + this.searchParams); this.$router.push(
"/dataBoard/satisfactionEval/dissatisfiedPersonnel?searchParams=" +
this.searchParams
);
}, },
getDisKey() { getDisKey() {
this.$http.post("/sys/dict/data/dictlist", {dictType: "satisfaction_category"}).then(({data: {data}}) => { this.$http
this.typeCondition = data[0].value; .post("/sys/dict/data/dictlist", { dictType: "satisfaction_category" })
this.typeConditionList = data; .then(({ data: { data } }) => {
}); this.typeCondition = data[0].value;
this.typeConditionList = data;
});
}, },
getData() { getData() {
this.loading = true this.loading = true;
let params = { let params = {
level: this.$store.state.chooseArea.chooseName.level, level: this.$store.state.chooseArea.chooseName.level,
orgId: this.$store.state.chooseArea.chooseName.orgId, orgId: this.$store.state.chooseArea.chooseName.orgId,
queryType: this.resultType, queryType: this.resultType,
category: this.typeCondition, category: this.resultType == "provinceAndSelf" ? this.typeCondition : null,
}; };
this.$http.get("/governance/satisfactionOverview/satisfactionCrowdPortrait?" + this.$paramsFormat(params)).then(({data: {data}}) => { this.$http
this.gender = data.gender; .get(
this.marriageName = data.marriageName; "/governance/satisfactionOverview/satisfactionCrowdPortrait?" +
this.ageClassification = data.ageClassification; this.$paramsFormat(params)
this.cultureName = data.cultureName; )
this.gridName = data.gridName; .then(({ data: { data } }) => {
this.monthIncomeLevel = data.monthIncomeLevel; this.gender = data.gender;
this.residentTagName = data.residentTagName; this.marriageName = data.marriageName;
this.matchPeopleNum = data.matchPeopleNum; this.ageClassification = data.ageClassification;
this.loading = false this.cultureName = data.cultureName;
this.searchParams = JSON.stringify({...data, ...params}); 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 });
});
}, },
}, },
}; };

309
src/views/dataBoard/satisfactionEval/modules/TypesOfDissatisfaction/index.vue
View File

@ -1,26 +1,34 @@
<template> <template>
<div class="types-dissatisfaction" <div
v-loading="loading" class="types-dissatisfaction"
element-loading-text="加载中..." v-loading="loading"
element-loading-spinner="el-icon-loading" element-loading-text="加载中..."
element-loading-background="rgba(0,0,0,0.5)" element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0,0,0,0.5)"
> >
<div class="screen"> <div class="screen">
<Tabs v-model="resultType" :list="resultTypeList" @changeVal="resultTypeChange"/> <Tabs
<el-select v-model="typeCondition" v-model="resultType"
popper-class="selectPopClass" :list="resultTypeList"
placeholder="请选择" @changeVal="resultTypeChange"
class="select" />
@change="timeChange"> <el-select
v-model="typeCondition"
popper-class="selectPopClass"
placeholder="请选择"
class="select"
@change="timeChange"
>
<el-option <el-option
v-for="item in typeConditionList" v-for="item in typeConditionList"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value"
>
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
<div id="typeConditionChart" style="height: 542px;"></div> <div id="typeConditionChart" style="height: 542px"></div>
</div> </div>
</template> </template>
@ -30,47 +38,52 @@ import Tabs from "@/views/dataBoard/satisfactionEval/components/Tabs/index.vue";
export default { export default {
name: "TypesOfDissatisfaction", name: "TypesOfDissatisfaction",
components: {Tabs}, components: { Tabs },
data() { data() {
return { return {
resultType: 1, resultType: 1,
resultTypeList: [{ resultTypeList: [
label: ' 按省调查/社区自查结果', {
value: 1 label: " 按省调查/社区自查结果",
value: 1,
}, { },
label: '按12345热线投诉结果', {
value: 2 label: "按12345热线投诉结果",
value: 2,
}], },
],
typeCondition: 1, typeCondition: 1,
typeConditionList: [ typeConditionList: [
{ {
label: '本月', label: "本月",
value: 1 value: 1,
}, { },
label: '上月', {
value: 2 label: "上月",
}, { value: 2,
label: '近三月', },
value: 3 {
}, { label: "近三月",
label: '近半年', value: 3,
value: 4 },
}, { {
label: '近一年', label: "近半年",
value: 5 value: 4,
},
{
label: "近一年",
value: 5,
}, },
], ],
loading: true loading: true,
} };
}, },
watch: { watch: {
"$store.state.chooseArea.chooseName"(val) { "$store.state.chooseArea.chooseName"(val) {
if (val.orgId) { if (val.orgId) {
this.getData(); this.getData();
} }
} },
}, },
mounted() { mounted() {
if (this.$store.state.chooseArea.chooseName.orgId) { if (this.$store.state.chooseArea.chooseName.orgId) {
@ -80,99 +93,124 @@ export default {
methods: { methods: {
resultTypeChange(val) { resultTypeChange(val) {
if (val !== this.resultType) { if (val !== this.resultType) {
this.resultType = val this.resultType = val;
this.getData() this.getData();
} }
}, },
timeChange() { timeChange() {
let startTime = '', endTime = '' let startTime = "",
endTime = "";
if (this.typeCondition === 1) { if (this.typeCondition === 1) {
startTime = this.$moment().startOf('month').format('YYYY-MM-DD') startTime = this.$moment().startOf("month").format("YYYY-MM-DD");
} }
if (this.typeCondition === 2) { if (this.typeCondition === 2) {
startTime = this.$moment().subtract(1, 'months').startOf('month').format('YYYY-MM-DD') startTime = this.$moment()
.subtract(1, "months")
.startOf("month")
.format("YYYY-MM-DD");
} }
if (this.typeCondition === 3) { if (this.typeCondition === 3) {
startTime = this.$moment().subtract(2, 'months').startOf('month').format('YYYY-MM-DD') startTime = this.$moment()
.subtract(2, "months")
.startOf("month")
.format("YYYY-MM-DD");
} }
if (this.typeCondition === 4) { if (this.typeCondition === 4) {
startTime = this.$moment().subtract(5, 'months').startOf('month').format('YYYY-MM-DD') startTime = this.$moment()
.subtract(5, "months")
.startOf("month")
.format("YYYY-MM-DD");
} }
if (this.typeCondition === 5) { if (this.typeCondition === 5) {
startTime = this.$moment().subtract(11, 'months').startOf('month').format('YYYY-MM-DD') startTime = this.$moment()
.subtract(11, "months")
.startOf("month")
.format("YYYY-MM-DD");
} }
if (this.typeCondition === 2) { if (this.typeCondition === 2) {
endTime = this.$moment().subtract(1, 'months').endOf('month').format('YYYY-MM-DD') endTime = this.$moment()
.subtract(1, "months")
.endOf("month")
.format("YYYY-MM-DD");
} else { } else {
endTime = this.$moment().endOf('month').format('YYYY-MM-DD') endTime = this.$moment().endOf("month").format("YYYY-MM-DD");
} }
this.getData(startTime, endTime) this.getData(startTime, endTime);
this.$emit('timeChange', {startTime, endTime}) this.$emit("timeChange", { startTime, endTime });
}, },
getData(startTime, endTime) { getData(startTime, endTime) {
this.loading = true this.loading = true;
let params = { let params = {
level: this.$store.state.chooseArea.chooseName.level, level: this.$store.state.chooseArea.chooseName.level,
orgId: this.$store.state.chooseArea.chooseName.orgId, orgId: this.$store.state.chooseArea.chooseName.orgId,
startTime, startTime,
endTime endTime,
} };
params = this.$paramsFormat(params) params = this.$paramsFormat(params);
let url = '/governance/satisfactionOverview/satisfactionGroup' let url = "/governance/satisfactionOverview/satisfactionGroup";
if (this.resultType === 2) { if (this.resultType === 2) {
url = '/governance/satisfactionOverview/event12345Group' url = "/governance/satisfactionOverview/event12345Group";
} }
this.$http.get(url + '?' + params).then(({data: {data}}) => { this.$http.get(url + "?" + params).then(({ data: { data } }) => {
this.initCharts(data) this.initCharts(data);
}) });
}, },
initCharts(data) { initCharts(data) {
let div = document.getElementById('typeConditionChart'); let div = document.getElementById("typeConditionChart");
this.myChart = echarts.init(div); this.myChart = echarts.init(div);
var dataname = data.map(item => item.name) var dataname = data.map((item) => item.name);
var datavaule = data.map(item => item.blueNum ? item.blueNum : 0) var datavaule = data.map((item) => (item.blueNum ? item.blueNum : 0));
var datavaule2 = data.map(item => item.yellowNum ? item.yellowNum : 0) var datavaule2 = data.map((item) =>
var indicator = [] item.yellowNum ? item.yellowNum : 0
let max = Math.max(...datavaule, ...datavaule2) );
console.log(max) var indicator = [];
var datamax = new Array(datavaule.length).fill(max) let max = Math.max(...datavaule, ...datavaule2);
console.log(max);
var datamax = new Array(datavaule.length).fill(max);
for (var i = 0; i < dataname.length; i++) { for (var i = 0; i < dataname.length; i++) {
indicator.push({ indicator.push({
name: dataname[i], name: dataname[i],
max: datamax[i], max: datamax[i],
}) });
} }
let legendName = ['省满意度调查\n各项不满意人数', '社区满意度自查\n各项不满意人数'] let legendName = [
let series = [{ "省满意度调查\n各项不满意人数",
name: this.resultType === 2 ? '12345热线\n事件上报人数' : "省满意度调查\n各项不满意人数", "社区满意度自查\n各项不满意人数",
type: "radar", ];
symbol: "circle", let series = [
symbolSize: 7, {
areaStyle: { name:
normal: { this.resultType === 2
color: 'rgba(58,128,231,0.36)', ? "12345热线\n事件上报人数"
} : "省满意度调查\n各项不满意人数",
}, type: "radar",
itemStyle: { symbol: "circle",
color: '#3A80E7', symbolSize: 7,
borderColor: '#3AB7FF', areaStyle: {
borderWidth: 1, normal: {
}, color: "rgba(58,128,231,0.36)",
lineStyle: { },
normal: { },
color: "#3AB7FF", itemStyle: {
width: 2 color: "#3A80E7",
} borderColor: "#3AB7FF",
borderWidth: 1,
},
lineStyle: {
normal: {
color: "#3AB7FF",
width: 2,
},
},
data: [datavaule],
}, },
data: [datavaule] ];
}]
if (this.resultType === 2) { if (this.resultType === 2) {
legendName = ['12345热线\n事件上报人数'] legendName = ["12345热线\n事件上报人数"];
} else { } else {
series.push({ series.push({
name: "社区满意度自查\n各项不满意人数", name: "社区满意度自查\n各项不满意人数",
@ -181,46 +219,51 @@ export default {
symbolSize: 7, symbolSize: 7,
areaStyle: { areaStyle: {
normal: { normal: {
color: 'rgba(170, 216, 255, 0)', color: "rgba(170, 216, 255, 0)",
} },
}, },
itemStyle: { itemStyle: {
color: '#EB8E16', color: "#EB8E16",
borderColor: '#EF9700', borderColor: "#EF9700",
borderWidth: 1, borderWidth: 1,
}, },
lineStyle: { lineStyle: {
normal: { normal: {
color: "#EF9700", color: "#EF9700",
width: 2 width: 2,
} },
}, },
data: [datavaule2] data: [datavaule2],
}) });
} }
var option = { var option = {
tooltip: { tooltip: {
show: false,
trigger: "item", trigger: "item",
backgroundColor: 'rgba(13,33,71,0.5)',
borderColor: 'rgba(143,174,252,0.6)',
padding: 8,
textStyle: {
color: '#fff',
},
}, },
legend: { legend: {
show: true, show: true,
textStyle: { textStyle: {
color: '#ffffff', color: "#ffffff",
rich: { rich: {
name: { name: {
fontSize: 14, fontSize: 14,
lineHeight: 22, lineHeight: 22,
padding: [24, 0, 0, 0] padding: [24, 0, 0, 0],
}, },
} },
}, },
itemWidth: 6, itemWidth: 6,
itemHeight: 6, itemHeight: 6,
y: 0, y: 0,
x: 'right', x: "right",
formatter: name => { formatter: (name) => {
return `{name|${name}}` return `{name|${name}}`;
}, },
data: legendName, data: legendName,
}, },
@ -231,8 +274,8 @@ export default {
splitNumber: 5, splitNumber: 5,
splitArea: { splitArea: {
areaStyle: { areaStyle: {
color: 'transparent' color: "transparent",
} },
}, },
axisLabel: { axisLabel: {
show: false, show: false,
@ -240,33 +283,33 @@ export default {
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "transparent" color: "transparent",
} },
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "#527AA8" color: "#527AA8",
} },
}, },
name: { name: {
textStyle: { textStyle: {
color: '#ffffff', color: "#ffffff",
fontSize: '16', fontSize: "16",
borderRadius: 3, borderRadius: 3,
padding: [3, 5] padding: [3, 5],
} },
}, },
indicator: indicator indicator: indicator,
}, },
series series,
}; };
this.myChart.setOption(option, true); this.myChart.setOption(option, true);
window.addEventListener("resize", () => this.myChart.resize()); window.addEventListener("resize", () => this.myChart.resize());
this.loading = false this.loading = false;
}, },
} },
} };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@ -281,15 +324,15 @@ export default {
/deep/ .el-input__inner { /deep/ .el-input__inner {
width: 90px !important; width: 90px !important;
height: 24px !important; height: 24px !important;
background: #021C49 !important; background: #021c49 !important;
border: 1px solid #125AAA !important; border: 1px solid #125aaa !important;
border-radius: 12px !important; border-radius: 12px !important;
color: #A0CDFF; color: #a0cdff;
} }
/deep/ .el-input__icon { /deep/ .el-input__icon {
line-height: 24px !important; line-height: 24px !important;
color: #A0CDFF; color: #a0cdff;
} }
} }
</style> </style>

Write Preview
Loading…
Cancel
Save