206 lines
7.2 KiB
HTML
206 lines
7.2 KiB
HTML
<!--#
|
|
layout("/mobile/platform.html"){
|
|
#-->
|
|
|
|
<style>
|
|
.chart-card {
|
|
background-color: #FFFFFF;
|
|
margin: 10px;
|
|
}
|
|
</style>
|
|
|
|
<div id="app" v-clock>
|
|
<van-nav-bar
|
|
title="提案分析"
|
|
left-arrow
|
|
placeholder
|
|
fixed
|
|
@click-left="history.back()"
|
|
></van-nav-bar>
|
|
<van-dropdown-menu>
|
|
<van-dropdown-item v-model="pageForm.sessionId" :options="sessionList"
|
|
@change="getData()"></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 size="mini" plain type="info" @click="renderColumnData(null)">全部类型</van-button>
|
|
</div>
|
|
<div id="columnDiv"></div>
|
|
</div>
|
|
|
|
</div>
|
|
<script src="https://cdn.staticfile.org/echarts/5.2.2/echarts.js"></script>
|
|
|
|
<script>
|
|
var 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>
|
|
|
|
<!--#
|
|
}
|
|
#--> |