212 lines
6.3 KiB
HTML
212 lines
6.3 KiB
HTML
<!--荣誉分析-->
|
|
<!--#
|
|
layout("/layouts/platform.html"){
|
|
#-->
|
|
<style>
|
|
.text {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.item {
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.clearfix {
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
.el-card__header {
|
|
/*ebb563*/
|
|
padding: 8px 10px;
|
|
border-bottom: 1px solid #EBEEF5;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.el-input--mini .el-input__inner {
|
|
height: 23px;
|
|
line-height: 23px;
|
|
}
|
|
|
|
.el-card__body {
|
|
padding: 5px;
|
|
}
|
|
|
|
.el-table-containera {
|
|
padding-top: 5px;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.picClass .el-dialog {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.picClass .el-dialog__headerbtn {
|
|
font-size: 70px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.picClass .el-dialog__body {
|
|
padding: 0;
|
|
}
|
|
|
|
.picClass .el-dialog__header {
|
|
padding: 0;
|
|
}
|
|
|
|
.picClass .el-dialog__headerbtn .el-dialog__close {
|
|
color: white;
|
|
}
|
|
|
|
|
|
</style>
|
|
<div id="app" v-cloak>
|
|
|
|
<el-row class="transition-row">
|
|
<transition name="el-zoom-in-center">
|
|
<div v-show="v=='index'" class="transition-item">
|
|
|
|
<el-row class="header navbar bg-white shadow" style="padding-left: 5px;padding-right: 5px;">
|
|
<div class="btn-group tool-button mt5">
|
|
<el-date-picker
|
|
v-model="pageForm.year"
|
|
type="year"
|
|
value-format="yyyy"
|
|
@change="pageData()"
|
|
:clearable="false"
|
|
placeholder="年份">
|
|
</el-date-picker>
|
|
</div>
|
|
</el-row>
|
|
<el-row class="el-table-containera" style="margin-top: 50px">
|
|
<div style="float: left;width: 100%;">
|
|
<el-card class="box-card">
|
|
<div class="text item" style="height: 700px;">
|
|
<div id="pie" style="height:100%;width: 100%"></div>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
</el-row>
|
|
</div>
|
|
</transition>
|
|
</el-row>
|
|
|
|
</div>
|
|
<script>
|
|
const vm = new Vue({
|
|
el: "#app",
|
|
data: function () {
|
|
return {
|
|
v: "index",
|
|
taid: '',
|
|
tabLoading: true,
|
|
pageForm: {
|
|
pageNumber: "1",
|
|
pageSize: "10",
|
|
totalCount: "",
|
|
jdhId: "",
|
|
stateName: "",
|
|
year:moment().format('YYYY')
|
|
},
|
|
tableData: [],
|
|
stateData: [],
|
|
names: [],
|
|
selected: {},
|
|
activeNames: ["1"],
|
|
pieData: [],
|
|
tabcol:[{prop:"username",label:"姓名"},{prop:"sex",label:"性别"},
|
|
{prop:"csrq",label:"出生年月"},{prop:"ghzw",label:"职务"},{prop:"unitname",label:"单位名称"}],
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods: {
|
|
//加载个人提案数据
|
|
pageData() {
|
|
sublime.showLoadingbar($(".main-content"));
|
|
$.post(base + "/platfotm/ry/ryfx/data", this.pageForm, (data) => {
|
|
this.tabLoading = false
|
|
if (data.code == 0) {
|
|
this.pieData = data.data
|
|
this.pieData.forEach((value) => {
|
|
this.selected[value.name] = value.value != '0'
|
|
this.names.push(value.name);
|
|
})
|
|
this.initTj(this.pieData)
|
|
} else {
|
|
this.$message({
|
|
message: data.msg,
|
|
type: "error"
|
|
});
|
|
|
|
}
|
|
}, "json");
|
|
sublime.closeLoadingbar($(".main-content"));
|
|
},
|
|
initTj: function (data) {
|
|
let dom = document.getElementById("pie");
|
|
let myChart = echarts.init(dom, 'light');
|
|
let optionsTj = {
|
|
title: {
|
|
text: '荣誉类型统计图',
|
|
x: 'center'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left',
|
|
data: this.names,
|
|
selected: this.selected
|
|
},
|
|
series: [
|
|
{
|
|
name: '荣誉类型',
|
|
type: 'pie',
|
|
radius: '75%',
|
|
center: ['50%', '60%'],
|
|
data: data,
|
|
itemStyle: {
|
|
emphasis: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
if (optionsTj && typeof optionsTj === "object") {
|
|
myChart.setOption(optionsTj, true);
|
|
}
|
|
if (myChart._$handlers.click) {
|
|
myChart._$handlers.click.length = 0;
|
|
}
|
|
myChart.on('click', (params) => {
|
|
console.log(params)
|
|
vm.pageForm.stateName = params.data.name
|
|
vm.pageData();
|
|
});
|
|
},
|
|
async getUnit(){
|
|
const {data} = await $.get("/platfotm/ry/gr/grsq/getUnit")
|
|
this.unitlist=data
|
|
},
|
|
},
|
|
async created() {
|
|
this.unionlist = await getUnion()
|
|
this.getUnit();
|
|
this.pageData();
|
|
},
|
|
})
|
|
|
|
</script>
|
|
<!--#
|
|
}
|
|
#--> |