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
Split 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>
<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-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>-->
<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="portrait">
<div class="tag yellow" v-if="gridName">
<div class="text">{{ gridName }}</div>
</div>
@ -40,7 +51,17 @@
<div class="text">{{ marriageName }}</div>
</div>
<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>
@ -49,7 +70,7 @@
按画像匹配到同类：<span>
<b>{{ matchPeopleNum ? matchPeopleNum : 0 }}</b
>人</span
>
>
</div>
<i class="el-icon-arrow-right"></i>
</div>
@ -61,7 +82,7 @@ import Tabs from "@/views/dataBoard/satisfactionEval/components/Tabs/index.vue";
export default {
name: "PersonnelPortrait",
components: {Tabs},
components: { Tabs },
data() {
return {
resultType: "provinceAndSelf",
@ -86,7 +107,7 @@ export default {
residentTagName: "",
matchPeopleNum: 0,
searchParams: "",
loading: true
loading: true,
};
},
watch: {
@ -99,7 +120,7 @@ export default {
},
mounted() {
if (this.$store.state.chooseArea.chooseName.orgId) {
// this.getDisKey()
this.getDisKey();
this.getData();
}
},
@ -109,34 +130,44 @@ 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
this.loading = true;
let params = {
level: this.$store.state.chooseArea.chooseName.level,
orgId: this.$store.state.chooseArea.chooseName.orgId,
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.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 });
});
},
},
};

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

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

Write Preview
Loading…
Cancel
Save