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