first commit
This commit is contained in:
@@ -0,0 +1,207 @@
|
||||
<!--#
|
||||
layout("/mobile/platform.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
.chart-card {
|
||||
background-color: #FFFFFF;
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app" v-clock>
|
||||
<van-nav-bar
|
||||
@click-left="location.href='/mobile/index/toHome?type=民主管理'"
|
||||
fixed
|
||||
left-arrow
|
||||
placeholder
|
||||
title="提案分析"
|
||||
></van-nav-bar>
|
||||
<van-dropdown-menu>
|
||||
<van-dropdown-item :options="sessionList" @change="getData()"
|
||||
v-model="pageForm.sessionId"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
|
||||
<div class="chart-card">
|
||||
<div class="van-sidebar-item van-sidebar-item--select ml15 p10">
|
||||
提案类型
|
||||
</div>
|
||||
<div id="pieDiv"></div>
|
||||
</div>
|
||||
|
||||
<div class="chart-card">
|
||||
<div class="van-sidebar-item van-sidebar-item--select ml15 p10"
|
||||
style="display: flex;align-items: center;justify-content: space-between">
|
||||
<div>
|
||||
<span>【{{clickTypeName}}】分析</span>
|
||||
<span style="font-size: 10px;color: orange">点击饼图查看详细信息</span>
|
||||
</div>
|
||||
<van-button @click="renderColumnData(null)" plain size="mini" type="info">全部类型</van-button>
|
||||
</div>
|
||||
<div id="columnDiv"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script src="https://cdn.staticfile.org/echarts/5.2.2/echarts.js"></script>
|
||||
|
||||
<script>
|
||||
const vue = new Vue({
|
||||
el: '#app',
|
||||
mixins: [mobileMixins],
|
||||
data() {
|
||||
return {
|
||||
pageForm: {
|
||||
sessionId: ''
|
||||
},
|
||||
sessionList: [],
|
||||
clickTypeName: '全部类型',
|
||||
reqData: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getData() {
|
||||
this.mLoading = true
|
||||
const {data} = await $.get('/mobile/proposal/analysis/getData', this.pageForm)
|
||||
this.reqData = data
|
||||
const pieData = data.map(v => {
|
||||
const o = {}
|
||||
o.code = v.typeCode
|
||||
o.name = v.typeName
|
||||
o.value = v.totalCount
|
||||
return o
|
||||
})
|
||||
|
||||
this.renderPieData(pieData)
|
||||
this.renderColumnData(null)
|
||||
},
|
||||
renderPieData(data) {
|
||||
const myPie = echarts.init(document.getElementById('pieDiv'), null, {
|
||||
height: 580
|
||||
})
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
top: '5%',
|
||||
left: 'center'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '提案类型',
|
||||
type: 'pie',
|
||||
radius: ['35%', '55%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '20',
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data
|
||||
}
|
||||
]
|
||||
}
|
||||
myPie.setOption(option)
|
||||
window.onresize = function () {
|
||||
myPie.resize();
|
||||
};
|
||||
|
||||
myPie.on('click', (params) => {
|
||||
this.renderColumnData(params.data)
|
||||
console.log(params)
|
||||
});
|
||||
},
|
||||
renderColumnData(params) {
|
||||
const data = []
|
||||
if (params == null) {
|
||||
this.clickTypeName = '全部类型'
|
||||
let laCount = 0, jyCount = 0, caCount = 0, myCount = 0, ybCount = 0, bmyCount = 0;
|
||||
data.push(this.reqData.reduce((laCount, item) => laCount + item.laCount, 0))
|
||||
data.push(this.reqData.reduce((jyCount, item) => jyCount + item.jyCount, 0))
|
||||
data.push(this.reqData.reduce((caCount, item) => caCount + item.caCount, 0))
|
||||
data.push(this.reqData.reduce((myCount, item) => myCount + item.myCount, 0))
|
||||
data.push(this.reqData.reduce((ybCount, item) => ybCount + item.ybCount, 0))
|
||||
data.push(this.reqData.reduce((bmyCount, item) => bmyCount + item.bmyCount, 0))
|
||||
console.log(data)
|
||||
} else {
|
||||
const {code, name} = params
|
||||
this.clickTypeName = name
|
||||
const clickTypeData = this.reqData.find(v => v.typeCode === code)
|
||||
data.push(clickTypeData.laCount)
|
||||
data.push(clickTypeData.jyCount)
|
||||
data.push(clickTypeData.caCount)
|
||||
data.push(clickTypeData.myCount)
|
||||
data.push(clickTypeData.ybCount)
|
||||
data.push(clickTypeData.bmyCount)
|
||||
}
|
||||
|
||||
const myColumn = echarts.init(document.getElementById('columnDiv'), null, {
|
||||
height: 350
|
||||
});
|
||||
let option = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['立案数', '作为建议、意见', '不予立案', '评分满意', '评分一般', '评分不满意'],
|
||||
axisLabel: {//坐标轴刻度标签的相关设置。
|
||||
interval: 0,
|
||||
rotate: "45"
|
||||
}
|
||||
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data,
|
||||
type: 'bar',
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: 'rgba(180, 180, 180, 0.2)'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
myColumn.setOption(option);
|
||||
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
async created() {
|
||||
this.mLoading = true
|
||||
this.sessionList = await mProposal.getAllSession()
|
||||
if (this.sessionList && this.sessionList.length > 0) {
|
||||
this.pageForm.sessionId = this.sessionList[0].value
|
||||
this.getData()
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
Reference in New Issue
Block a user