20 changed files with 1653 additions and 0 deletions
|
After Width: | Height: | Size: 9.4 KiB |
|
After Width: | Height: | Size: 9.3 KiB |
|
After Width: | Height: | Size: 9.7 KiB |
|
After Width: | Height: | Size: 47 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
@ -0,0 +1,56 @@ |
|||||
|
<template> |
||||
|
<div class="tabs"> |
||||
|
<div class="tab" :class="value2 === item.value?'cur':''" v-for="(item,index) in list" @click="tabClick(index)" :key="index"> |
||||
|
{{item.label}} |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "Tabs", |
||||
|
props: { |
||||
|
list:{ |
||||
|
type: Array, |
||||
|
default: () => [] |
||||
|
}, |
||||
|
value:{ |
||||
|
type: [String,Number], |
||||
|
default: '' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
value2: this.value, |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.value2 = this.value |
||||
|
}, |
||||
|
methods: { |
||||
|
tabClick(index) { |
||||
|
this.value2 = this.list[index].value |
||||
|
this.$emit('changeVal',this.value) |
||||
|
this.$emit('changeLabel',this.list[index].label) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.tabs { |
||||
|
display: flex; |
||||
|
.tab { |
||||
|
cursor: pointer; |
||||
|
padding: 10px 11px; |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
color: #FFFFFF; |
||||
|
background: url("@/assets/images/manyidu/tab.png") repeat-x top left; |
||||
|
margin-right: 4px; |
||||
|
&.cur { |
||||
|
background: url("@/assets/images/manyidu/tab_cur.png") repeat-x top left; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,58 @@ |
|||||
|
<template> |
||||
|
<div class="title"> |
||||
|
<span class="text"> |
||||
|
<span class="txt">{{ text }}</span> |
||||
|
<span class="text-shadow">{{ text }}</span> |
||||
|
</span> |
||||
|
<slot></slot> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "Title", |
||||
|
props: { |
||||
|
text: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
|
||||
|
.title { |
||||
|
background: linear-gradient(90deg, rgba(31, 126, 255, 0.28) 0%, rgba(13, 113, 248, 0) 70%); |
||||
|
padding: 10px 8px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.text { |
||||
|
position: relative; |
||||
|
font-size: 22px; |
||||
|
font-family: HYShuYuanHeiJ; |
||||
|
font-weight: 400; |
||||
|
|
||||
|
.txt { |
||||
|
color: #1F79FF; |
||||
|
background: linear-gradient(0deg, #2DC1FF 0%, #FFFFFF 58.5205078125%); |
||||
|
-webkit-background-clip: text; |
||||
|
-webkit-text-fill-color: transparent; |
||||
|
position: relative; |
||||
|
z-index: 2; |
||||
|
} |
||||
|
|
||||
|
.text-shadow { |
||||
|
top: 4px; |
||||
|
left: 3px; |
||||
|
position: absolute; |
||||
|
color: #020F21; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,93 @@ |
|||||
|
<template> |
||||
|
<div class="satisfaction-eval"> |
||||
|
<el-row :gutter="20"> |
||||
|
<el-col :span="8"> |
||||
|
<div class="bg"> |
||||
|
<Title text="不满意事项类型分析"> |
||||
|
<div class="more"> |
||||
|
查看详细 <i class="el-icon-arrow-right"></i> |
||||
|
</div> |
||||
|
</Title> |
||||
|
|
||||
|
<TypesOfDissatisfaction/> |
||||
|
</div> |
||||
|
<div class="bg"> |
||||
|
<Title text="不满意风险人员统计及回访情况"/> |
||||
|
<RiskStatistics/> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
<EventSituation/> |
||||
|
<div class="bg2"> |
||||
|
<Title text="不满意事项及满意度自查走势"/> |
||||
|
<SelfTrend/> |
||||
|
</div> |
||||
|
<div class="bg2"> |
||||
|
<Title text="下级网格不满意事项统计"/> |
||||
|
<EventStatistics/> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
<div class="bg2"> |
||||
|
<Title text="不满意人员画像"/> |
||||
|
<PersonnelPortrait/> |
||||
|
</div> |
||||
|
|
||||
|
<div class="bg2"> |
||||
|
<Title text="潜在不满意人数"/> |
||||
|
<PotentialPeople/> |
||||
|
</div> |
||||
|
|
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import TypesOfDissatisfaction from "./modules/TypesOfDissatisfaction"; |
||||
|
import RiskStatistics from "./modules/RiskStatistics" |
||||
|
import Title from "@/views/dataBoard/satisfactionEval/components/Title" |
||||
|
import EventSituation from "@/views/dataBoard/satisfactionEval/modules/EventSituation"; |
||||
|
import SelfTrend from "@/views/dataBoard/satisfactionEval/modules/SelfTrend"; |
||||
|
import EventStatistics from "@/views/dataBoard/satisfactionEval/modules/EventStatistics"; |
||||
|
import PersonnelPortrait from "@/views/dataBoard/satisfactionEval/modules/PersonnelPortrait"; |
||||
|
import PotentialPeople from "@/views/dataBoard/satisfactionEval/modules/PotentialPeople"; |
||||
|
|
||||
|
export default { |
||||
|
name: "satisfactionEvaluation", |
||||
|
components: { |
||||
|
EventStatistics, |
||||
|
SelfTrend, |
||||
|
EventSituation, |
||||
|
TypesOfDissatisfaction, |
||||
|
RiskStatistics, |
||||
|
Title, |
||||
|
PersonnelPortrait, |
||||
|
PotentialPeople |
||||
|
}, |
||||
|
data() { |
||||
|
return {} |
||||
|
}, |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.satisfaction-eval { |
||||
|
padding: 24px 20px; |
||||
|
} |
||||
|
|
||||
|
.more { |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
color: #A0CDFF; |
||||
|
} |
||||
|
|
||||
|
.bg2 { |
||||
|
background: linear-gradient(180deg, rgba(46, 164, 255, 0.1) 0%, rgba(13, 143, 243, 0) 100%); |
||||
|
} |
||||
|
|
||||
|
.bg { |
||||
|
background: linear-gradient(144deg, rgba(46, 164, 255, 0.1) 0%, rgba(13, 143, 243, 0) 100%); |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,175 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="title">12345政务热线事件办理情况</div> |
||||
|
|
||||
|
<div class="current"> |
||||
|
<div class="cur-month"> |
||||
|
<span>{{ curMonth }}</span> 月 |
||||
|
</div> |
||||
|
<div class="cur-month-list"> |
||||
|
<div class="cur-month-item"> |
||||
|
<div class="txt">事件总数</div> |
||||
|
<div class="num blue">52</div> |
||||
|
</div> |
||||
|
<div class="cur-month-item"> |
||||
|
<div class="txt">处理中</div> |
||||
|
<div class="num orange">13</div> |
||||
|
</div> |
||||
|
<div class="cur-month-item"> |
||||
|
<div class="txt">已办结</div> |
||||
|
<div class="num green">28</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="his-month"> |
||||
|
<div class="his-month-item" v-for="(item,index) in eventList" :key="index"> |
||||
|
<div class="month">{{ item.month }}月</div> |
||||
|
<div class="num">{{ item.num }}</div> |
||||
|
<div class="event">{{ item.env }}事件数</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "EventSituation", |
||||
|
data() { |
||||
|
return { |
||||
|
eventList: [], |
||||
|
curMonth: '' |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.curMonth = new Date().getMonth() - 0 + 1 |
||||
|
let eventList = [] |
||||
|
for (let i = 5; i >= 0; i--) { |
||||
|
eventList.push({ |
||||
|
month: this.curMonth - i, |
||||
|
num: 10, |
||||
|
env: 11, |
||||
|
}) |
||||
|
} |
||||
|
this.eventList = eventList |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.title { |
||||
|
font-size: 26px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: bold; |
||||
|
color: #FFFFFF; |
||||
|
text-shadow: 0px 0px 20px #8FD4FF; |
||||
|
background: linear-gradient(0deg, #8FD4FF 0%, #FFFFFF 64.0380859375%); |
||||
|
-webkit-background-clip: text; |
||||
|
-webkit-text-fill-color: transparent; |
||||
|
|
||||
|
text-align: center; |
||||
|
letter-spacing: 5px; |
||||
|
} |
||||
|
.current { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding: 20px 60px 15px 50px; |
||||
|
} |
||||
|
.cur-month { |
||||
|
font-size: 18px; |
||||
|
font-weight: 400; |
||||
|
color: #3AB7FF; |
||||
|
width: 130px; |
||||
|
padding-top: 14px; |
||||
|
box-sizing: border-box; |
||||
|
height: 88px; |
||||
|
background: url("@/assets/images/manyidu/month.png"); |
||||
|
text-align: center; |
||||
|
|
||||
|
span { |
||||
|
font-size: 32px; |
||||
|
font-weight: bold; |
||||
|
font-style: italic; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.cur-month-list { |
||||
|
display: flex; |
||||
|
.cur-month-item { |
||||
|
margin-left: 71px; |
||||
|
.txt { |
||||
|
font-size: 16px; |
||||
|
font-weight: 400; |
||||
|
color: #FFFFFF; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
.num { |
||||
|
font-size: 36px; |
||||
|
font-weight: bold; |
||||
|
font-style: italic; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.blue { |
||||
|
color: #3CF5FF; |
||||
|
} |
||||
|
|
||||
|
.orange { |
||||
|
color: #F95619; |
||||
|
} |
||||
|
|
||||
|
.green { |
||||
|
color: #08EBAE; |
||||
|
} |
||||
|
|
||||
|
.his-month { |
||||
|
display: flex; |
||||
|
background: linear-gradient(-90deg, rgba(14, 121, 213, 0.10) 0%, rgba(17, 124, 213, 0) 100%); |
||||
|
padding: 20px; |
||||
|
margin-bottom: 28px; |
||||
|
.his-month-item { |
||||
|
flex: 1; |
||||
|
position: relative; |
||||
|
padding-left: 25px; |
||||
|
|
||||
|
&:after { |
||||
|
content: ''; |
||||
|
display: block; |
||||
|
position: absolute; |
||||
|
top: calc(50% - 63px / 2); |
||||
|
right: 0; |
||||
|
width: 1px; |
||||
|
height: 63px; |
||||
|
background: rgba(50, 151, 255, 0.55); |
||||
|
|
||||
|
|
||||
|
} |
||||
|
&:last-child:after { |
||||
|
display: none; |
||||
|
} |
||||
|
.month { |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
color: #C1E8FF; |
||||
|
opacity: 0.75; |
||||
|
} |
||||
|
|
||||
|
.num { |
||||
|
font-size: 26px; |
||||
|
font-weight: bold; |
||||
|
color: #3AB7FF; |
||||
|
margin: 13px 0 6px; |
||||
|
} |
||||
|
|
||||
|
.event { |
||||
|
font-size: 12px; |
||||
|
font-weight: 400; |
||||
|
color: #4B9FCF; |
||||
|
opacity: 0.75; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,259 @@ |
|||||
|
<template> |
||||
|
<div class="event-statistics"> |
||||
|
<div id="eventStatisticsChart" style="height: 293px;"></div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from "echarts"; |
||||
|
|
||||
|
export default { |
||||
|
name: "EventStatistics", |
||||
|
data() { |
||||
|
return { |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.initCharts() |
||||
|
}, |
||||
|
methods: { |
||||
|
initCharts() { |
||||
|
let div = document.getElementById('eventStatisticsChart'); |
||||
|
this.myChart = echarts.init(div); |
||||
|
|
||||
|
let xData = ['XX社区第一网格','XX社区第二网格','XX社区第三网格','XX社区第四网格',]; |
||||
|
let tq1 = [12, 20, 30, 60]; |
||||
|
let tq2 = [10, 50, 50, 27]; |
||||
|
let tq3 = [300, 90, 48, 39]; |
||||
|
const max = Math.max(...tq1, ...tq2, ...tq3) |
||||
|
|
||||
|
let barArray = new Array(xData.length).fill((parseInt(max / 100) + 1) * 100) |
||||
|
var option = { |
||||
|
title: { |
||||
|
show: false, |
||||
|
text: '', |
||||
|
x: 'center', |
||||
|
top: '15px', |
||||
|
textStyle: { |
||||
|
color: '#333333', |
||||
|
fontWeight: 500, |
||||
|
fontSize: 18, |
||||
|
}, |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
backgroundColor: 'rgba(13, 64, 71, 0.50)', |
||||
|
borderColor: 'rgba(143, 225, 252, 0.60)', |
||||
|
padding: 8, |
||||
|
textStyle: { |
||||
|
color: '#fff', |
||||
|
}, |
||||
|
formatter: function (params) { |
||||
|
console.log(params) |
||||
|
var res='<div"><p>'+params[0].name+'</p></div>' |
||||
|
for(var i=0;i<params.length;i++){ |
||||
|
if(params[i].seriesName!=""){ |
||||
|
res+='<p>'+params[i].seriesName+':'+params[i].data+'</p>' |
||||
|
} |
||||
|
} |
||||
|
return res; |
||||
|
}, |
||||
|
}, |
||||
|
legend: { |
||||
|
// icon: 'circle', |
||||
|
data: ['12345投诉', '省满意度调查', '社区满意度自查'], |
||||
|
itemGap: 20, |
||||
|
itemWidth: 6, |
||||
|
itemHeight: 6, |
||||
|
x: 'right', |
||||
|
top: '3%', |
||||
|
textStyle: { |
||||
|
color: '#fff', |
||||
|
fontSize: 14, |
||||
|
// padding:[0, 10, 0, 10], |
||||
|
} |
||||
|
}, |
||||
|
grid: { |
||||
|
top: '18%', |
||||
|
left: '2%', |
||||
|
right: '4%', |
||||
|
bottom: '8%', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
xAxis: [ |
||||
|
{ |
||||
|
type: 'category', |
||||
|
axisTick: { |
||||
|
show: false, |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
color: '#323c41' |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
align: 'center', |
||||
|
textStyle: { |
||||
|
fontSize: 12, |
||||
|
color: '#A3B9DA' |
||||
|
} |
||||
|
}, |
||||
|
boundaryGap: true, |
||||
|
data: xData, |
||||
|
},{ |
||||
|
type: 'category', |
||||
|
data: xData, |
||||
|
axisLine: {show:false}, |
||||
|
axisLabel: { |
||||
|
show: false, |
||||
|
}, |
||||
|
boundaryGap:true, |
||||
|
|
||||
|
} |
||||
|
], |
||||
|
|
||||
|
yAxis: [ |
||||
|
{ |
||||
|
type: 'value', |
||||
|
name: '单位：人', |
||||
|
nameLocation: 'end', |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
color: 'rgba(4,187,255,0.18)', |
||||
|
type: 'dashed' |
||||
|
}, |
||||
|
}, |
||||
|
nameTextStyle: { |
||||
|
color: '#A3B9DA', |
||||
|
textStyle: { |
||||
|
fontSize: 12 |
||||
|
}, |
||||
|
align: 'center' |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
show: true, |
||||
|
color: '#A3B9DA', |
||||
|
textStyle: { |
||||
|
fontSize: 12 |
||||
|
} |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: false |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '12345投诉', |
||||
|
type: 'bar', |
||||
|
barWidth: 14, |
||||
|
itemStyle: { |
||||
|
opacity: 1, |
||||
|
color: new echarts.graphic.LinearGradient( |
||||
|
0, |
||||
|
1, |
||||
|
0, |
||||
|
0, |
||||
|
[ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: 'rgba(152, 72, 255, 0)' // 0% 处的颜色 |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: '#A962FF' // 100% 处的颜色 |
||||
|
} |
||||
|
], |
||||
|
false |
||||
|
) |
||||
|
}, |
||||
|
data: tq1, |
||||
|
}, |
||||
|
{ |
||||
|
name: '省满意度调查', |
||||
|
type: 'bar', |
||||
|
barWidth: 14, |
||||
|
itemStyle: { |
||||
|
// lenged文本 |
||||
|
opacity: 1, // 这个是 透明度 |
||||
|
color: new echarts.graphic.LinearGradient( |
||||
|
0, |
||||
|
1, |
||||
|
0, |
||||
|
0, |
||||
|
[ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: 'rgba(255, 228, 102, 0)' // 0% 处的颜色 |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: 'rgba(255, 228, 102, 1)' // 100% 处的颜色 |
||||
|
} |
||||
|
], |
||||
|
false |
||||
|
) |
||||
|
}, |
||||
|
data: tq2, //data.values |
||||
|
}, |
||||
|
{ |
||||
|
name: '社区满意度自查', |
||||
|
type: 'bar', |
||||
|
barWidth: 14, |
||||
|
itemStyle: { |
||||
|
// lenged文本 |
||||
|
opacity: 1, // 这个是 透明度 |
||||
|
color: new echarts.graphic.LinearGradient( |
||||
|
0, |
||||
|
1, |
||||
|
0, |
||||
|
0, |
||||
|
[ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: 'rgba(0, 84, 255, 0)' // 0% 处的颜色 |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: 'rgba(38, 244, 248, 1)' // 100% 处的颜色 |
||||
|
} |
||||
|
], |
||||
|
false |
||||
|
) |
||||
|
}, |
||||
|
data: tq3, //data.values |
||||
|
}, |
||||
|
{ |
||||
|
name: '', |
||||
|
type: 'bar', |
||||
|
|
||||
|
barWidth:100, |
||||
|
barGap: '-60%', |
||||
|
data: barArray, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
color: 'rgba(22,153,152, 0.1)' |
||||
|
} |
||||
|
}, |
||||
|
zlevel: -1, |
||||
|
xAxisIndex: 1, |
||||
|
} |
||||
|
], |
||||
|
}; |
||||
|
this.myChart.setOption(option); |
||||
|
window.addEventListener("resize", () => this.myChart.resize()); |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.event-statistics { |
||||
|
padding: 16px 16px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,267 @@ |
|||||
|
<template> |
||||
|
<div class="personnel-portrait"> |
||||
|
<Tabs v-model="resultType" :list="resultTypeList" @changeVal="resultTypeChange"/> |
||||
|
<div class="screen"> |
||||
|
<div class="txt">不满意人员画像</div> |
||||
|
<el-select v-model="typeCondition" placeholder="请选择" class="select"> |
||||
|
<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"><div class="text">第一网格</div></div> |
||||
|
<div class="tag blue"><div class="text">30-40岁</div></div> |
||||
|
<div class="tag red"><div class="text">流动人员</div></div> |
||||
|
<div class="tag light"><div class="text">月收入5000以下</div></div> |
||||
|
<div class="tag green"><div class="text">专科</div></div> |
||||
|
<div class="tag orange"><div class="text">已婚</div></div> |
||||
|
<div class="tag purple"><div class="text">男</div></div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="btn"> |
||||
|
<div>按画像匹配到同类：<span> <b>372</b>人</span></div> |
||||
|
<i class="el-icon-arrow-right"></i> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Tabs from "@/views/dataBoard/satisfactionEval/components/Tabs/index.vue"; |
||||
|
|
||||
|
export default { |
||||
|
name: "PersonnelPortrait", |
||||
|
components: {Tabs}, |
||||
|
data() { |
||||
|
return { |
||||
|
resultType: 1, |
||||
|
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: 6 |
||||
|
}, { |
||||
|
label: '社会救助', |
||||
|
value: 7 |
||||
|
}, |
||||
|
], |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
resultTypeChange() { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
$yellow: #ef9700; |
||||
|
$blue: #1a95ff; |
||||
|
$red: #ee3030; |
||||
|
$light: #2ab6be; |
||||
|
$green: #1b7d47; |
||||
|
$orange: #f95619; |
||||
|
$purple: #6642fd; |
||||
|
.personnel-portrait { |
||||
|
padding: 16px 16px 40px; |
||||
|
} |
||||
|
|
||||
|
.screen { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin: 25px 0 47px; |
||||
|
|
||||
|
.txt { |
||||
|
font-size: 16px; |
||||
|
font-weight: 500; |
||||
|
color: #FFFFFF; |
||||
|
line-height: 22px; |
||||
|
margin-right: 25px; |
||||
|
} |
||||
|
|
||||
|
/deep/ .el-input__inner { |
||||
|
width: 110px !important; |
||||
|
height: 24px !important; |
||||
|
background: #021C49 !important; |
||||
|
border: 1px solid #125AAA !important; |
||||
|
border-radius: 12px !important; |
||||
|
color: #A0CDFF; |
||||
|
} |
||||
|
|
||||
|
/deep/ .el-input__icon { |
||||
|
line-height: 24px !important; |
||||
|
color: #A0CDFF; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.portrait { |
||||
|
width: 388px; |
||||
|
height: 345px; |
||||
|
position: relative; |
||||
|
background: url("@/assets/images/manyidu/hx_bg.png") no-repeat center; |
||||
|
margin: 0 auto; |
||||
|
cursor: pointer; |
||||
|
.tag { |
||||
|
position: absolute; |
||||
|
width: 76px; |
||||
|
height: 76px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
.text { |
||||
|
width: 60px; |
||||
|
height: 60px; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
color: #fff; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
&:after { |
||||
|
content: ""; |
||||
|
opacity: .3; |
||||
|
display: block; |
||||
|
width: 76px; |
||||
|
height: 76px; |
||||
|
position: absolute; |
||||
|
border-radius: 50%; |
||||
|
|
||||
|
} |
||||
|
&:nth-of-type(1) { |
||||
|
left: 162px; |
||||
|
top: 0; |
||||
|
} |
||||
|
&:nth-of-type(2) { |
||||
|
left: 297px; |
||||
|
top: 73px; |
||||
|
} |
||||
|
&:nth-of-type(3) { |
||||
|
left: 316px; |
||||
|
top: 203px; |
||||
|
} |
||||
|
&:nth-of-type(4) { |
||||
|
left: 228px; |
||||
|
top: 269px; |
||||
|
} |
||||
|
&:nth-of-type(5) { |
||||
|
left: 77px; |
||||
|
top: 257px; |
||||
|
} |
||||
|
&:nth-of-type(6) { |
||||
|
left: 0px; |
||||
|
top: 158px; |
||||
|
} |
||||
|
&:nth-of-type(7) { |
||||
|
left: 48px; |
||||
|
top: 57px; |
||||
|
} |
||||
|
} |
||||
|
.yellow { |
||||
|
.text { |
||||
|
background: $yellow; |
||||
|
} |
||||
|
&:after { |
||||
|
background: $yellow; |
||||
|
} |
||||
|
} |
||||
|
.blue { |
||||
|
.text { |
||||
|
background: $blue; |
||||
|
} |
||||
|
&:after { |
||||
|
background: $blue; |
||||
|
} |
||||
|
} |
||||
|
.red { |
||||
|
.text { |
||||
|
background: $red; |
||||
|
} |
||||
|
&:after { |
||||
|
background: $red; |
||||
|
} |
||||
|
} |
||||
|
.light { |
||||
|
.text { |
||||
|
background: $light; |
||||
|
} |
||||
|
&:after { |
||||
|
background: $light; |
||||
|
} |
||||
|
} |
||||
|
.green { |
||||
|
.text { |
||||
|
background: $green; |
||||
|
} |
||||
|
&:after { |
||||
|
background: $green; |
||||
|
} |
||||
|
} |
||||
|
.orange { |
||||
|
.text { |
||||
|
background: $orange; |
||||
|
} |
||||
|
&:after { |
||||
|
background: $orange; |
||||
|
} |
||||
|
} |
||||
|
.purple { |
||||
|
.text { |
||||
|
background: $purple; |
||||
|
} |
||||
|
&:after { |
||||
|
background: $purple; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.btn { |
||||
|
width: 240px; |
||||
|
height: 46px; |
||||
|
border: 1px solid #125AAA; |
||||
|
border-radius: 23px; |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
color: #FFFFFF; |
||||
|
line-height: 46px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding: 0 20px; |
||||
|
margin: 33px auto 0; |
||||
|
span { |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,103 @@ |
|||||
|
<template> |
||||
|
<div class="potential-people"> |
||||
|
<div class="potential-people-item"> |
||||
|
<div class="icon"> |
||||
|
<img src="@/assets/images/manyidu/qz_wjj.png" alt=""> |
||||
|
</div> |
||||
|
<div class="txt"> |
||||
|
事件未解决 <br> |
||||
|
上报人数 |
||||
|
</div> |
||||
|
<div class="num"><span class="orange">78</span>人</div> |
||||
|
</div> |
||||
|
<div class="potential-people-item"> |
||||
|
<div class="icon"> |
||||
|
<img src="@/assets/images/manyidu/qz_wmz.png" alt=""> |
||||
|
</div> |
||||
|
<div class="txt"> |
||||
|
需求未满足 <br> |
||||
|
人数 |
||||
|
</div> |
||||
|
<div class="num"><span class="green">128</span>人</div> |
||||
|
</div> |
||||
|
<div class="potential-people-item"> |
||||
|
<div class="icon"> |
||||
|
<img src="@/assets/images/manyidu/qz_wx.png" alt=""> |
||||
|
</div> |
||||
|
<div class="txt"> |
||||
|
应享未享 <br> |
||||
|
服务人数 |
||||
|
</div> |
||||
|
<div class="num"><span class="light">527</span>人</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "PotentialPeople" |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.potential-people { |
||||
|
padding: 16px 36px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.potential-people-item { |
||||
|
margin: 14px; |
||||
|
text-align: center; |
||||
|
flex: 1; |
||||
|
border: 1px solid rgba(28, 67, 111, 0.22); |
||||
|
background: linear-gradient(0deg, rgba(31, 121, 255, 0.22) 0%, rgba(31,121,255,0) 100%); |
||||
|
padding: 26px 0 31px; |
||||
|
.icon { |
||||
|
width: 86px; |
||||
|
height: 86px; |
||||
|
margin: 0 auto; |
||||
|
|
||||
|
img { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.txt { |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
color: #A3B9DA; |
||||
|
line-height: 24px; |
||||
|
margin: 11px 0 22px; |
||||
|
} |
||||
|
|
||||
|
.num { |
||||
|
font-size: 14px; |
||||
|
font-weight: 500; |
||||
|
color: #A3B9DA; |
||||
|
|
||||
|
span { |
||||
|
font-size: 32px; |
||||
|
font-weight: bold; |
||||
|
font-style: italic; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.orange { |
||||
|
color: #FFB73C; |
||||
|
} |
||||
|
|
||||
|
.green { |
||||
|
color: #08EBAE; |
||||
|
} |
||||
|
|
||||
|
.light { |
||||
|
color: #7FCEFF; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,158 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="number-list"> |
||||
|
<div class="number-item"> |
||||
|
<div class="img"> |
||||
|
<img src="@/assets/images/manyidu/hf_ts.png" alt=""> |
||||
|
</div> |
||||
|
<div> |
||||
|
<div class="txt"> |
||||
|
12345热线 <br> |
||||
|
投诉人数 |
||||
|
</div> |
||||
|
<div class="num"><span>7</span> 人</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
<div class="number-item"> |
||||
|
<div class="img"> |
||||
|
<img src="@/assets/images/manyidu/hf_bmy.png" alt=""> |
||||
|
</div> |
||||
|
<div> |
||||
|
<div class="txt"> |
||||
|
省满意度调查 <br> |
||||
|
不满意人数 |
||||
|
</div> |
||||
|
<div class="num"><span>7</span> 人</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
<div class="number-item"> |
||||
|
<div class="img"> |
||||
|
<img src="@/assets/images/manyidu/hf_zpbmy.png" alt=""> |
||||
|
</div> |
||||
|
<div> |
||||
|
<div class="txt"> |
||||
|
社区满意度自评 <br> |
||||
|
不满意人数 |
||||
|
</div> |
||||
|
<div class="num"><span>7</span> 人</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="number-list2"> |
||||
|
<div class="number-item"> |
||||
|
<div class="txt"> |
||||
|
本月回访 <br> |
||||
|
次数 |
||||
|
</div> |
||||
|
<div class="num"><span class="grey">112</span> 人</div> |
||||
|
</div> |
||||
|
<div class="number-item"> |
||||
|
<div class="txt"> |
||||
|
本月回访消除 <br> |
||||
|
风险人员数 |
||||
|
</div> |
||||
|
<div class="num"><span class="green">112</span> 人</div> |
||||
|
</div> |
||||
|
<div class="number-item"> |
||||
|
<div class="txt"> |
||||
|
累计回访 <br> |
||||
|
次数 |
||||
|
</div> |
||||
|
<div class="num"><span class="purple">112</span> 人</div> |
||||
|
</div> |
||||
|
<div class="number-item"> |
||||
|
<div class="txt"> |
||||
|
累计回访消除 <br> |
||||
|
风险人员数 |
||||
|
</div> |
||||
|
<div class="num"><span class="blue">112</span> 人</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "RiskStatistics" |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.number-list { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
margin: 40px 0; |
||||
|
padding: 0 15px 0 8px; |
||||
|
|
||||
|
.number-item { |
||||
|
display: flex; |
||||
|
|
||||
|
.image { |
||||
|
width: 98px; |
||||
|
height: 70px; |
||||
|
} |
||||
|
|
||||
|
.txt { |
||||
|
font-size: 16px; |
||||
|
font-weight: 400; |
||||
|
color: #FFFFFF; |
||||
|
line-height: 24px; |
||||
|
margin-bottom: 22px; |
||||
|
} |
||||
|
|
||||
|
.num { |
||||
|
font-size: 14px; |
||||
|
font-weight: 500; |
||||
|
color: #A3B9DA; |
||||
|
|
||||
|
span { |
||||
|
font-size: 32px; |
||||
|
font-weight: bold; |
||||
|
font-style: italic; |
||||
|
color: #3AB7FF; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.number-list2 { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
padding: 0 30px 39px; |
||||
|
.number-item { |
||||
|
.txt { |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
color: #A3B9DA; |
||||
|
line-height: 24px; |
||||
|
margin-bottom: 16px; |
||||
|
} |
||||
|
.num { |
||||
|
font-size: 14px; |
||||
|
font-weight: 500; |
||||
|
color: #A3B9DA; |
||||
|
|
||||
|
span { |
||||
|
font-size: 32px; |
||||
|
font-weight: bold; |
||||
|
font-style: italic; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.grey { |
||||
|
color: #78C4F3; |
||||
|
} |
||||
|
.green { |
||||
|
color: #08EBAE; |
||||
|
} |
||||
|
.purple { |
||||
|
color: #A761FD; |
||||
|
} |
||||
|
.blue { |
||||
|
color: #356EFF; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,249 @@ |
|||||
|
<template> |
||||
|
<div class="self-trend"> |
||||
|
<div class="screen"> |
||||
|
<Tabs v-model="trendType" :list="trendTypeList" @changeVal="trendTypeChange"/> |
||||
|
</div> |
||||
|
<div id="selfTrendChart" style="height: 243px;"></div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from "echarts"; |
||||
|
import Tabs from "@/views/dataBoard/satisfactionEval/components/Tabs/index.vue"; |
||||
|
|
||||
|
export default { |
||||
|
name: "SelfTrend", |
||||
|
components: {Tabs}, |
||||
|
data() { |
||||
|
return { |
||||
|
trendType: 1, |
||||
|
trendTypeList: [{ |
||||
|
label: '不满意事项走势', |
||||
|
value: 1 |
||||
|
|
||||
|
}, { |
||||
|
label: '社区自查结果走势', |
||||
|
value: 2 |
||||
|
|
||||
|
}], |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.initCharts() |
||||
|
}, |
||||
|
methods: { |
||||
|
trendTypeChange(data) { |
||||
|
|
||||
|
}, |
||||
|
initCharts() { |
||||
|
let div = document.getElementById('selfTrendChart'); |
||||
|
this.myChart = echarts.init(div); |
||||
|
|
||||
|
let xData = ['2022-10', '2022-11', '2022-12', '2023-01', '2023-02', '2023-03', '2023-04', '2023-05', '2023-06', '2023-07', '2023-08', '2023-09']; |
||||
|
let tq1 = [12, 20, 30, 60, 49, 18, 90, 48, 39, 30, 27, 40, 48, 39, 27, 49]; |
||||
|
let tq2 = [10, 50, 50, 27, 49, 58, 80, 80, 19, 60, 30, 30, 49, 18, 90, 20]; |
||||
|
let tq3 = [300, 90, 48, 39, 30, 27, 49, 18, 90, 39, 27, 49, 30, 100, 49, 100]; |
||||
|
const max = Math.max(...tq1, ...tq2, ...tq3) |
||||
|
|
||||
|
let barArray = new Array(xData.length).fill((parseInt(max / 100) + 1) * 100) |
||||
|
var option = { |
||||
|
title: { |
||||
|
show: false, |
||||
|
text: '', |
||||
|
x: 'center', |
||||
|
top: '15px', |
||||
|
textStyle: { |
||||
|
color: '#333333', |
||||
|
fontWeight: 500, |
||||
|
fontSize: 18, |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
legend: { |
||||
|
// icon: 'circle', |
||||
|
data: ['12345投诉事件数', '省调查不满意数', '社区自查不满意数'], |
||||
|
itemGap: 20, |
||||
|
itemWidth: 16, |
||||
|
itemHeight: 6, |
||||
|
x: 'right', |
||||
|
top: '3%', |
||||
|
textStyle: { |
||||
|
color: '#fff', |
||||
|
fontSize: 14, |
||||
|
// padding:[0, 10, 0, 10], |
||||
|
} |
||||
|
}, |
||||
|
grid: { |
||||
|
top: '18%', |
||||
|
left: '2%', |
||||
|
right: '4%', |
||||
|
bottom: '8%', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
xAxis: [ |
||||
|
{ |
||||
|
type: 'category', |
||||
|
axisTick: { |
||||
|
show: false, |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
color: '#323c41' |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
interval: 0, |
||||
|
align: 'center', |
||||
|
rotate: '40', |
||||
|
margin: '25', |
||||
|
textStyle: { |
||||
|
fontSize: 12, |
||||
|
color: '#A3B9DA' |
||||
|
} |
||||
|
}, |
||||
|
boundaryGap: true, |
||||
|
data: xData, |
||||
|
}, |
||||
|
], |
||||
|
|
||||
|
yAxis: [ |
||||
|
{ |
||||
|
type: 'value', |
||||
|
name: '单位：人', |
||||
|
nameLocation: 'end', |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
color: 'rgba(4,187,255,0.18)', |
||||
|
type: 'dashed' |
||||
|
}, |
||||
|
}, |
||||
|
nameTextStyle: { |
||||
|
color: '#A3B9DA', |
||||
|
textStyle: { |
||||
|
fontSize: 12 |
||||
|
}, |
||||
|
align: 'center' |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
show: true, |
||||
|
color: '#A3B9DA', |
||||
|
textStyle: { |
||||
|
fontSize: 12 |
||||
|
} |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
], |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '12345投诉事件数', |
||||
|
type: 'line', |
||||
|
showAllSymbol: true, |
||||
|
symbol: 'circle', |
||||
|
symbolSize: 6, |
||||
|
lineStyle: { |
||||
|
normal: { |
||||
|
color: '#F95619', |
||||
|
}, |
||||
|
}, |
||||
|
label: { |
||||
|
show: false, |
||||
|
position: 'top', |
||||
|
textStyle: { |
||||
|
color: '#F95619', |
||||
|
}, |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
color: '#F95619', |
||||
|
borderColor: '#F95619', |
||||
|
borderWidth: 2, |
||||
|
}, |
||||
|
data: tq1, |
||||
|
}, |
||||
|
{ |
||||
|
name: '省调查不满意数', |
||||
|
type: 'line', |
||||
|
showAllSymbol: true, |
||||
|
symbol: 'circle', |
||||
|
symbolSize: 6, |
||||
|
lineStyle: { |
||||
|
normal: { |
||||
|
color: '#F9E066', |
||||
|
}, |
||||
|
}, |
||||
|
label: { |
||||
|
show: false, |
||||
|
position: 'top', |
||||
|
textStyle: { |
||||
|
color: '#F9E066', |
||||
|
}, |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
color: '#F9E066', |
||||
|
borderColor: '#F9E066', |
||||
|
borderWidth: 2, |
||||
|
}, |
||||
|
data: tq2, //data.values |
||||
|
}, |
||||
|
{ |
||||
|
name: '社区自查不满意数', |
||||
|
type: 'line', |
||||
|
yIndex: 0, |
||||
|
showAllSymbol: true, |
||||
|
symbol: 'circle', |
||||
|
symbolSize: 6, |
||||
|
lineStyle: { |
||||
|
normal: { |
||||
|
color: '#25F0F6', |
||||
|
}, |
||||
|
}, |
||||
|
label: { |
||||
|
show: false, |
||||
|
position: 'top', |
||||
|
textStyle: { |
||||
|
color: '#25F0F6', |
||||
|
}, |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
color: '#25F0F6', |
||||
|
borderColor: '#25F0F6', |
||||
|
borderWidth: 2, |
||||
|
}, |
||||
|
data: tq3, //data.values |
||||
|
}, |
||||
|
{ |
||||
|
// name: '占位背景', |
||||
|
type: 'bar', |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
show: true, |
||||
|
color: 'rgba(89,130,194,0.12)', |
||||
|
}, |
||||
|
}, |
||||
|
silent: true, |
||||
|
barWidth: '50%', |
||||
|
barGap: 0, |
||||
|
data: barArray, |
||||
|
animation: false, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
this.myChart.setOption(option); |
||||
|
window.addEventListener("resize", () => this.myChart.resize()); |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.self-trend { |
||||
|
padding: 16px 16px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,235 @@ |
|||||
|
<template> |
||||
|
<div class="types-dissatisfaction"> |
||||
|
<div class="screen"> |
||||
|
<Tabs v-model="resultType" :list="resultTypeList" @changeVal="resultTypeChange"/> |
||||
|
<el-select v-model="typeCondition" placeholder="请选择" class="select"> |
||||
|
<el-option |
||||
|
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> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from "echarts"; |
||||
|
import Tabs from "@/views/dataBoard/satisfactionEval/components/Tabs/index.vue"; |
||||
|
|
||||
|
export default { |
||||
|
name: "TypesOfDissatisfaction", |
||||
|
components: {Tabs}, |
||||
|
data() { |
||||
|
return { |
||||
|
resultType: 1, |
||||
|
resultTypeList: [{ |
||||
|
label: ' 按省调查/社区自查结果', |
||||
|
value: 1 |
||||
|
|
||||
|
}, { |
||||
|
label: '按12345热线投诉结果', |
||||
|
value: 2 |
||||
|
|
||||
|
}], |
||||
|
typeCondition: 1, |
||||
|
typeConditionList: [ |
||||
|
{ |
||||
|
label: '本月', |
||||
|
value: 1 |
||||
|
}, { |
||||
|
label: '上月', |
||||
|
value: 2 |
||||
|
}, { |
||||
|
label: '近3月', |
||||
|
value: 3 |
||||
|
}, { |
||||
|
label: '近半年', |
||||
|
value: 4 |
||||
|
}, { |
||||
|
label: '近1年', |
||||
|
value: 5 |
||||
|
}, |
||||
|
], |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.initCharts() |
||||
|
}, |
||||
|
methods: { |
||||
|
resultTypeChange(data) { |
||||
|
|
||||
|
}, |
||||
|
initCharts() { |
||||
|
let div = document.getElementById('typeConditionChart'); |
||||
|
this.myChart = echarts.init(div); |
||||
|
var dataname = ['老有所养', '社会治安', '生态环境', '体育设施', '社会救助', '文化设施', '基础教育', '病有所医'] |
||||
|
var datamax = [20, 20, 20, 20, 20, 20, 20, 20] |
||||
|
var datavaule = [10, 16, 18, 15, 12, 18, 18, 18] |
||||
|
var datavaule2 = [12, 17, 20, 16, 13, 19, 19, 19] |
||||
|
var indicator = [] |
||||
|
for (var i = 0; i < dataname.length; i++) { |
||||
|
indicator.push({ |
||||
|
name: dataname[i], |
||||
|
max: datamax[i], |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
function contains(arrays, obj) { |
||||
|
var i = arrays.length; |
||||
|
while (i--) { |
||||
|
if (arrays[i] === obj) { |
||||
|
return i; |
||||
|
} |
||||
|
} |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
var option = { |
||||
|
tooltip: { |
||||
|
show: false, |
||||
|
trigger: "item", |
||||
|
}, |
||||
|
legend: { |
||||
|
show: true, |
||||
|
textStyle: { |
||||
|
color: '#ffffff', |
||||
|
rich: { |
||||
|
name: { |
||||
|
fontSize: 14, |
||||
|
lineHeight: 22, |
||||
|
padding: [24, 0, 0, 0] |
||||
|
}, |
||||
|
} |
||||
|
}, |
||||
|
itemWidth: 6, |
||||
|
itemHeight: 6, |
||||
|
y: 0, |
||||
|
x: 'right', |
||||
|
formatter: name => { |
||||
|
return `{name|${name}}` |
||||
|
}, |
||||
|
data: ['省满意度调查\n各项不满意人数', '社区满意度自查\n各项不满意人数'], |
||||
|
}, |
||||
|
radar: { |
||||
|
center: ["50%", "60%"], |
||||
|
radius: "50%", |
||||
|
startAngle: 90, |
||||
|
splitNumber: 5, |
||||
|
/* splitArea: { |
||||
|
areaStyle: { |
||||
|
color: [ |
||||
|
'rgba(0,96,208, 0.1)', 'rgba(0,96,208, 0.2)', |
||||
|
'rgba(0,96,208, 0.4)', 'rgba(0,96,208, 0.6)', |
||||
|
'rgba(0,96,208, 0.8)', 'rgba(0,96,208, 1)' |
||||
|
].reverse() |
||||
|
} |
||||
|
},*/ |
||||
|
splitArea: { |
||||
|
areaStyle: { |
||||
|
color: 'transparent' |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
show: false, |
||||
|
}, |
||||
|
axisLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
color: "transparent" |
||||
|
} |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
color: "#527AA8" |
||||
|
} |
||||
|
}, |
||||
|
name: { |
||||
|
textStyle: { |
||||
|
color: '#ffffff', |
||||
|
fontSize: '16', |
||||
|
borderRadius: 3, |
||||
|
padding: [3, 5] |
||||
|
} |
||||
|
}, |
||||
|
indicator: indicator |
||||
|
}, |
||||
|
|
||||
|
series: [{ |
||||
|
name: "省满意度调查\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] |
||||
|
}, { |
||||
|
name: "社区满意度自查\n各项不满意人数", |
||||
|
type: "radar", |
||||
|
symbol: "circle", |
||||
|
symbolSize: 7, |
||||
|
areaStyle: { |
||||
|
normal: { |
||||
|
color: 'rgba(170, 216, 255, 0)', |
||||
|
} |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
color: '#EB8E16', |
||||
|
borderColor: '#EF9700', |
||||
|
borderWidth: 1, |
||||
|
}, |
||||
|
lineStyle: { |
||||
|
normal: { |
||||
|
color: "#EF9700", |
||||
|
width: 2 |
||||
|
} |
||||
|
}, |
||||
|
data: [datavaule2] |
||||
|
}] |
||||
|
}; |
||||
|
this.myChart.setOption(option); |
||||
|
window.addEventListener("resize", () => this.myChart.resize()); |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.types-dissatisfaction { |
||||
|
padding: 16px 32px; |
||||
|
} |
||||
|
.screen { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
/deep/ .el-input__inner { |
||||
|
width: 90px!important; |
||||
|
height: 24px!important; |
||||
|
background: #021C49!important; |
||||
|
border: 1px solid #125AAA!important; |
||||
|
border-radius: 12px!important; |
||||
|
color: #A0CDFF; |
||||
|
} |
||||
|
/deep/ .el-input__icon { |
||||
|
line-height: 24px!important; |
||||
|
color: #A0CDFF; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue