4 changed files with 577 additions and 89 deletions
@ -0,0 +1,417 @@ |
|||||
|
<template> |
||||
|
<div class=""> |
||||
|
<el-cascader |
||||
|
v-model="formData.agencyId" |
||||
|
:options="orgOptions" |
||||
|
:props="{ |
||||
|
value: 'agencyId', |
||||
|
label: 'agencyName', |
||||
|
children: 'subAgencyList', |
||||
|
}" |
||||
|
:clearable="true" |
||||
|
:change-on-select="true" |
||||
|
:filterable="false" |
||||
|
:multiple="false" |
||||
|
placeholder="请选择" |
||||
|
@change="handleChangeCascader" |
||||
|
class="cascader" |
||||
|
/> |
||||
|
|
||||
|
<el-date-picker |
||||
|
v-model="formData.period" |
||||
|
type="month" |
||||
|
value-format="yyyy-MM" |
||||
|
class="cascader" |
||||
|
placeholder="选择日期" |
||||
|
style="width: 202px" |
||||
|
clearable |
||||
|
@change="handleChangePicker" |
||||
|
> |
||||
|
</el-date-picker> |
||||
|
<div style="padding-left: 10px; margin-top: 10px"> |
||||
|
本月已参与调研人数 {{ personQty }}人 |
||||
|
</div> |
||||
|
<section class="content_box"> |
||||
|
<div class="left"> |
||||
|
<img src="../../../../assets/img/satisfaction/zhdf.png" alt="Image" /> |
||||
|
<div class="left_right"> |
||||
|
<div> |
||||
|
{{ synthesisScore < 0 ? Math.abs(synthesisScore) : synthesisScore }} |
||||
|
</div> |
||||
|
<div>综合得分</div> |
||||
|
</div> |
||||
|
<div class="right_box"> |
||||
|
<div :class="synthesisState ? 'up' : 'down'"> |
||||
|
<img |
||||
|
src="@/assets/images/index/up.png" |
||||
|
alt="" |
||||
|
v-if="synthesisState && synthesisScoreBtLastMonth != 0" |
||||
|
/> |
||||
|
<img |
||||
|
src="@/assets/images/index/down.png" |
||||
|
alt="" |
||||
|
v-if=" |
||||
|
!synthesisState && |
||||
|
synthesisScoreBtLastMonth != 0 && |
||||
|
synthesisScoreBtLastMonth != null |
||||
|
" |
||||
|
/> |
||||
|
<span>{{ |
||||
|
synthesisScoreBtLastMonth < 0 |
||||
|
? Math.abs(synthesisScoreBtLastMonth) |
||||
|
: synthesisScoreBtLastMonth |
||||
|
}}</span> |
||||
|
</div> |
||||
|
<div style="color: #999">较上月</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="right"> |
||||
|
<div class="box" v-for="(item, index) in score" :key="index"> |
||||
|
<div class="card"> |
||||
|
<img :src="item.imgUrl" alt="Image" /> |
||||
|
<div class="right_right"> |
||||
|
<div>{{ item.score }}</div> |
||||
|
<div>{{ item.satisfactionCategoryName }}</div> |
||||
|
</div> |
||||
|
<div class="right_box"> |
||||
|
<div> |
||||
|
<img |
||||
|
src="@/assets/images/index/up.png" |
||||
|
alt="" |
||||
|
v-if="item.state && item.scoreDiffBtLastMonth != 0" |
||||
|
/> |
||||
|
<img |
||||
|
src="@/assets/images/index/down.png" |
||||
|
alt="" |
||||
|
v-if="!item.state && item.scoreDiffBtLastMonth != 0" |
||||
|
/> |
||||
|
<span :class="item.state ? 'up' : 'down'"> |
||||
|
{{ |
||||
|
item.scoreDiffBtLastMonth < 0 |
||||
|
? Math.abs(item.scoreDiffBtLastMonth) |
||||
|
: item.scoreDiffBtLastMonth |
||||
|
}} |
||||
|
</span> |
||||
|
</div> |
||||
|
<div style="color: #999">较上月</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
<section class="bto-box"> |
||||
|
<div id="myCharts"></div> |
||||
|
</section> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { requestGet } from "@/js/dai/request"; |
||||
|
import * as echarts from "echarts"; |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
personQty: "", //人数 |
||||
|
myChart: {}, |
||||
|
option: { |
||||
|
tooltip: { |
||||
|
trigger: "axis", |
||||
|
}, |
||||
|
legend: { |
||||
|
data: ["满意", "基本满意", "不满意"], |
||||
|
bottom: "10%", |
||||
|
icon: "rect", |
||||
|
itemWidth: 20, |
||||
|
itemHeight: 5, |
||||
|
itemGap: 20, |
||||
|
}, |
||||
|
grid: { |
||||
|
left: "3%", |
||||
|
right: "4%", |
||||
|
bottom: "25%", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
toolbox: {}, |
||||
|
|
||||
|
xAxis: { |
||||
|
type: "category", |
||||
|
boundaryGap: true, |
||||
|
axisLine: { |
||||
|
show: true, |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: false, |
||||
|
}, |
||||
|
data: [], // 请将yourDataArray替换为您的x轴数据数组 |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
width: 60, // 设置阴影的宽度 |
||||
|
color: "#000", |
||||
|
opacity: 0, |
||||
|
}, |
||||
|
// 控制间隔，这里设置为2表示左右两侧有间隔，可以根据需要调整 |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
yAxis: { |
||||
|
type: "value", |
||||
|
name: "单位(个)", |
||||
|
min: 0, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "满意", |
||||
|
type: "bar", |
||||
|
data: [], |
||||
|
barWidth: 16, // 设置柱子宽度 |
||||
|
itemStyle: { |
||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
||||
|
{ offset: 0, color: "#2c7cf2" }, // 从顶部开始 |
||||
|
{ offset: 1, color: "#80b3ff" }, // 到底部结束 |
||||
|
]), |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: "基本满意", |
||||
|
type: "bar", |
||||
|
data: [], |
||||
|
barWidth: 16, // 设置柱子宽度 |
||||
|
itemStyle: { |
||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
||||
|
{ offset: 0, color: "#3ca267" }, // 从顶部开始 |
||||
|
{ offset: 1, color: "#82cca0" }, // 到底部结束 |
||||
|
]), |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: "不满意", |
||||
|
type: "bar", |
||||
|
data: [], |
||||
|
barWidth: 16, // 设置柱子宽度 |
||||
|
itemStyle: { |
||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
||||
|
{ offset: 0, color: "#edb42d" }, // 从顶部开始 |
||||
|
{ offset: 1, color: "#ffd981" }, // 到底部结束 |
||||
|
]), |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
satisfactionCategory: [], //类目 |
||||
|
satisfactionCategoryName: [], |
||||
|
score: [], //得分 |
||||
|
|
||||
|
synthesisScore: "", |
||||
|
synthesisScoreBtLastMonth: "", |
||||
|
synthesisState: false, |
||||
|
|
||||
|
formData: { |
||||
|
period: "", |
||||
|
agencyId: "", |
||||
|
}, |
||||
|
orgOptions: [], |
||||
|
selectedOptions: "", |
||||
|
}; |
||||
|
}, |
||||
|
props: { |
||||
|
communityId: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
period: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
satisfaction_category: { |
||||
|
type: Array, |
||||
|
default: () => [], |
||||
|
}, |
||||
|
}, |
||||
|
created() {}, |
||||
|
async mounted() { |
||||
|
this.formData.period = this.period; |
||||
|
this.formData.agencyId = this.communityId; |
||||
|
this.initEcharts(); |
||||
|
await this.getCharts(this.communityId); |
||||
|
await this.getOrgTreeList(); |
||||
|
}, |
||||
|
methods: { |
||||
|
async getCharts() { |
||||
|
let url = "/governance/satisfaction/communitySelfInsp/stats/synthesis"; |
||||
|
const { formData } = this; |
||||
|
const { data, code, msg } = await requestGet(url, { |
||||
|
...formData, |
||||
|
}); |
||||
|
if (code == 0) { |
||||
|
this.score = []; |
||||
|
this.option.series.forEach((series) => (series.data = [])); |
||||
|
this.option.xAxis.data = []; |
||||
|
this.satisfactionCategory = []; |
||||
|
this.synthesisScore = data.synthesisScore; |
||||
|
this.synthesisScoreBtLastMonth = data.synthesisScoreBtLastMonth; |
||||
|
this.synthesisState = this.synthesisScoreBtLastMonth >= 0; |
||||
|
if (this.synthesisScoreBtLastMonth < 0) { |
||||
|
this.synthesisScoreBtLastMonth = Math.abs( |
||||
|
this.synthesisScoreBtLastMonth |
||||
|
); |
||||
|
} |
||||
|
this.personQty = data.personQty; |
||||
|
|
||||
|
const allowedCategories = this.satisfaction_category.map( |
||||
|
(item) => item.value |
||||
|
); |
||||
|
for (const item of data.categoryDatas) { |
||||
|
if (allowedCategories.includes(item.satisfactionCategory)) { |
||||
|
this.option.series[0].data.push(item.veryGoodQty); |
||||
|
this.option.series[1].data.push(item.goodQty); |
||||
|
this.option.series[2].data.push(item.badQty); |
||||
|
this.option.xAxis.data.push(item.satisfactionCategoryName); |
||||
|
this.satisfactionCategory.push(item.satisfactionCategory); |
||||
|
this.score.push({ |
||||
|
score: item.score, |
||||
|
satisfactionCategoryName: item.satisfactionCategoryName, |
||||
|
imgUrl: require(`@/assets/img/satisfaction/${item.satisfactionCategory}.png`), |
||||
|
scoreDiffBtLastMonth: item.scoreDiffBtLastMonth, |
||||
|
state: item.scoreDiffBtLastMonth >= 0, |
||||
|
}); |
||||
|
if (item.scoreDiffBtLastMonth < 0) { |
||||
|
item.scoreDiffBtLastMonth = Math.abs(item.scoreDiffBtLastMonth); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
this.myChart.setOption(this.option); |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
initEcharts() { |
||||
|
this.myChart = echarts.init(document.getElementById("myCharts")); |
||||
|
this.myChart.setOption(this.option); |
||||
|
let than = this; |
||||
|
this.myChart.on("click", function (params) { |
||||
|
than.handelClickChart(params.name, params.seriesName); |
||||
|
}); |
||||
|
}, |
||||
|
handelClickChart(name, seriesName) { |
||||
|
this.$emit("handelClickChart", name, seriesName); |
||||
|
}, |
||||
|
getOrgTreeList() { |
||||
|
this.$http |
||||
|
.post("/gov/org/customeragency/agencygridtree", {}) |
||||
|
.then(({ data: res }) => { |
||||
|
if (res.code !== 0) { |
||||
|
return this.$message.error(res.msg); |
||||
|
} else { |
||||
|
let rowData = res.data.subAgencyList.map((item) => ({ |
||||
|
agencyId: item.agencyId, |
||||
|
agencyName: item.agencyName, |
||||
|
subAgencyList: null, |
||||
|
})); |
||||
|
res.data.subAgencyList = rowData; |
||||
|
this.orgOptions = [res.data]; |
||||
|
} |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
return this.$message.error("网络错误"); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
handleChangeCascader(val) { |
||||
|
this.formData.agencyId = val[1]; |
||||
|
this.getCharts(); |
||||
|
}, |
||||
|
handleChangePicker() { |
||||
|
this.getCharts(); |
||||
|
}, |
||||
|
}, |
||||
|
components: {}, |
||||
|
computed: {}, |
||||
|
watch: {}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style scoped lang="scss"> |
||||
|
.cascader { |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
.content_box { |
||||
|
display: flex; |
||||
|
height: 160px; |
||||
|
margin-top: 10px; |
||||
|
padding: 0 10px; |
||||
|
box-sizing: border-box; |
||||
|
.left { |
||||
|
background: #f7faff; |
||||
|
margin-right: 10px; |
||||
|
min-width: 300px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
border-radius: 5px; |
||||
|
padding: 10px; |
||||
|
box-sizing: border-box; |
||||
|
img { |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
img { |
||||
|
width: 50px; |
||||
|
height: 50px; |
||||
|
margin-right: 15px; |
||||
|
} |
||||
|
|
||||
|
.left_right, |
||||
|
.right_right { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
flex: 1; |
||||
|
:nth-child(1) { |
||||
|
font-size: 18px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
|
} |
||||
|
|
||||
|
:nth-child(2) { |
||||
|
font-size: 14px; |
||||
|
font-family: PingFang SC; |
||||
|
color: #666666; |
||||
|
} |
||||
|
} |
||||
|
.right_box { |
||||
|
img { |
||||
|
margin: 0; |
||||
|
width: 10px; |
||||
|
height: 14px; |
||||
|
} |
||||
|
} |
||||
|
.right { |
||||
|
flex: 1; |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(4, 1fr); |
||||
|
|
||||
|
.box { |
||||
|
height: 75px; |
||||
|
margin: 0 10px 10px 0; |
||||
|
|
||||
|
.card { |
||||
|
background: #f7faff; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
border-radius: 5px; |
||||
|
padding: 20px; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
#myCharts { |
||||
|
width: 1200px; |
||||
|
height: 400px; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue