133 lines
5.2 KiB
HTML
133 lines
5.2 KiB
HTML
<!--#
|
|
layout("/layouts/platform.html"){
|
|
#-->
|
|
<style>
|
|
.chart-card .el-card__header {
|
|
border: none;
|
|
/*padding: 20px;*/
|
|
}
|
|
|
|
</style>
|
|
<div id="app" v-cloak>
|
|
<guava>
|
|
<el-row class="chart-card" v-loading="chartOneLoading">
|
|
<el-card class="box-card" shadow="never">
|
|
<div slot="header" class="clearfix">
|
|
<div style="float:left">
|
|
<span style="font-weight: bold">提案综合统计</span><br>
|
|
<span style="font-size: 12px">单位（个）</span>
|
|
</div>
|
|
<div style="float: right;z-index: 999">
|
|
<span style="margin-right: 50px" v-if="searchForm.switchType === 'delegation'">
|
|
<el-select v-model="searchForm.meetingId" placeholder="请选择教代会" filterable style="width: 400px"
|
|
@change="getData">
|
|
<el-option
|
|
v-for="item in meetingOptions"
|
|
:label="item.jdhallname"
|
|
:value="item.id">
|
|
</el-option>
|
|
</el-select>
|
|
</span>
|
|
<span style="margin-right: 50px">
|
|
<el-radio-group v-model="searchForm.switchType" @change="getData">
|
|
<el-radio-button label="type">提案类型</el-radio-button>
|
|
<el-radio-button label="union">工会</el-radio-button>
|
|
<el-radio-button label="unit">单位</el-radio-button>
|
|
<el-radio-button label="delegation">代表团</el-radio-button>
|
|
</el-radio-group>
|
|
</span>
|
|
<span>
|
|
<el-date-picker
|
|
class="year"
|
|
style="width: 120px;"
|
|
v-model="searchForm.startYear"
|
|
type="year" :clearable="false"
|
|
value-format="yyyy"
|
|
@change="getData()"
|
|
placeholder="选择年">
|
|
</el-date-picker>
|
|
至
|
|
<el-date-picker
|
|
class="year"
|
|
style="width: 120px;"
|
|
v-model="searchForm.endYear"
|
|
type="year" :clearable="false"
|
|
value-format="yyyy"
|
|
@change="getData()"
|
|
placeholder="选择年">
|
|
</el-date-picker>
|
|
</span>
|
|
|
|
</div>
|
|
</div>
|
|
<div id="chart" style="width: 100%;height: 600px"></div>
|
|
</el-card>
|
|
</el-row>
|
|
</guava>
|
|
</div>
|
|
|
|
<script>
|
|
let chart
|
|
var vue = new Vue({
|
|
el: '#app',
|
|
data: () => {
|
|
return {
|
|
meetingOptions: [],
|
|
chartOneLoading: false,
|
|
searchForm: {
|
|
switchType: 'type',
|
|
startYear: new Date().getFullYear() - 3 + '',
|
|
endYear: new Date().getFullYear() + '',
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
async getData() {
|
|
this.chartOneLoading = true
|
|
const resp = await $.post(loc() + "/getData", this.searchForm)
|
|
this.chartOneLoading = false
|
|
if(resp.code===0){
|
|
if (!chart) {
|
|
chart = new G2Plot.Area('chart', {
|
|
data,
|
|
xField: "name",
|
|
yField: "num",
|
|
seriesField: "type",
|
|
forceFit: true,
|
|
legend: {
|
|
"position": "top-right",
|
|
"flipPage": false
|
|
},
|
|
xAxis: {
|
|
label: {
|
|
autoRotate: true,
|
|
autoHide: false,
|
|
autoEllipsis: false,
|
|
},
|
|
}
|
|
});
|
|
chart.render();
|
|
} else {
|
|
chart.changeData(data)
|
|
}
|
|
}else{
|
|
this.notifyWarning(resp.msg)
|
|
}
|
|
},
|
|
async getMeetingByYear() {
|
|
const {startYear, endYear} = this.searchForm
|
|
const {data} = await $.post(loc() + "/getMeetingByYear", {startYear, endYear})
|
|
return data
|
|
}
|
|
},
|
|
async created() {
|
|
this.meetingOptions = await this.getMeetingByYear()
|
|
this.$set(this.searchForm, "meetingId", this.meetingOptions.length ? this.meetingOptions[0].id : '')
|
|
this.getData()
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<!--#
|
|
}
|
|
#--> |