566 lines
23 KiB
HTML
566 lines
23 KiB
HTML
<!--数据看板 djx 2019-07-24-->
|
|
<!--#
|
|
layout("/layouts/platform.html"){
|
|
#-->
|
|
|
|
<style>
|
|
|
|
.clearfix {
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
.el-card__header {
|
|
background-color: #ebeef5;
|
|
/*ebb563*/
|
|
padding: 8px 10px;
|
|
border-bottom: 1px solid #EBEEF5;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.el-card__body {
|
|
padding: 15px 5px 5px 5px;
|
|
}
|
|
|
|
.el-card {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.el-calendar-table .el-calendar-day {
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
padding: 8px;
|
|
height: 200px;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div id="app" v-cloak>
|
|
|
|
<el-row class="header navbar bg-white shadow"
|
|
style="padding-left: 5px;padding-right: 5px;background-color: #e6f1fe;">
|
|
<div class="btn-group tool-button mt5" style="width: 100%">
|
|
<el-date-picker
|
|
v-model="year"
|
|
type="year"
|
|
style="width: 100%"
|
|
value-format="yyyy"
|
|
:clearable="true"
|
|
placeholder="选择年份">
|
|
</el-date-picker>
|
|
</div>
|
|
</el-row>
|
|
|
|
<!-- <div style="float: left;width: 100%;">-->
|
|
<!-- <el-card class="box-card" >-->
|
|
<!-- <div slot="header" class="clearfix" >-->
|
|
<!-- <span>活动日历：</span>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="text item" >-->
|
|
<!-- <el-calendar v-model="day">-->
|
|
<!-- <!– 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法–>-->
|
|
<!-- <template-->
|
|
<!-- slot="dateCell"-->
|
|
<!-- slot-scope="{date, data}">-->
|
|
<!-- <p :class="data.isSelected ? 'is-selected' : ''">-->
|
|
<!-- {{ data.day.split('-').slice(1).join('-') }}-->
|
|
<!-- </p>-->
|
|
<!-- <div v-for="item in yy">-->
|
|
<!-- <div v-if="data.day.toString()==item.lab.substring(0,10).toString()" style="font-size: 8px;margin-bottom: 10px">-->
|
|
<!-- <div >活动名称：{{item.val}}</div>-->
|
|
<!-- <div>开始时间：{{item.lab.substring(10,16)}}</div>-->
|
|
<!-- </div>-->
|
|
|
|
<!-- </div>-->
|
|
<!-- </template>-->
|
|
<!-- </el-calendar>-->
|
|
<!-- </div>-->
|
|
<!-- </el-card>-->
|
|
<!-- </div>-->
|
|
|
|
<div style="float: left;width: 50%;">
|
|
<el-card class="box-card">
|
|
<div slot="header" class="clearfix">
|
|
|
|
</div>
|
|
<div class="text item" style="height: 378px;">
|
|
<div id="container1" style="height:100%;width: 100%"></div>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
|
|
<div style="float: left;width: 50%;">
|
|
<el-card class="box-card">
|
|
<div slot="header" class="clearfix">
|
|
|
|
</div>
|
|
<div class="text item" style="height: 378px;">
|
|
<div id="container2" style="height:100%;width: 100%"></div>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
|
|
<div style="float: left;width: 100%;">
|
|
<el-card class="box-card">
|
|
<div slot="header" class="clearfix">
|
|
|
|
</div>
|
|
<div class="text item" style="height: 328px;">
|
|
<div id="container3" style="height:100%;width: 100%"></div>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<script>
|
|
|
|
var vue = new Vue({
|
|
el: "#app",
|
|
data: function () {
|
|
return {
|
|
/*列表*/
|
|
tableData: [],
|
|
year: "",
|
|
|
|
first: [],
|
|
xhdJf: [],
|
|
fhhdJf: [],
|
|
sthdJf: [],
|
|
|
|
hdxm: [],
|
|
xhd: [],
|
|
fhhd: [],
|
|
sthd: [],
|
|
|
|
xhdgs: [],
|
|
fhdgs: [],
|
|
sthdgs: [],
|
|
yylist: [],
|
|
yy: [],
|
|
day: ""
|
|
}
|
|
},
|
|
methods: {
|
|
container1: function () {
|
|
|
|
var self = this;
|
|
var dom = document.getElementById("container1");
|
|
var myChart = echarts.init(dom, 'westeros');
|
|
option = null;
|
|
$.post(base + "/platform/hdsjkb/first", {year: self.year}, function (data) {
|
|
|
|
if (data.code == 0) {
|
|
self.first = data.data.finally;
|
|
option = {
|
|
title: {
|
|
text: '活动统计',
|
|
subtext: '个数',
|
|
x: 'left',
|
|
textStyle: {
|
|
fontSize: 15,
|
|
fontWeight: 'normal',
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
|
},
|
|
toolbox: {
|
|
show: true,
|
|
feature: {
|
|
saveAsImage: {}
|
|
},
|
|
right: 16,
|
|
},
|
|
legend: {
|
|
right: 'center',
|
|
data: ['校工会活动', '基层工会活动', '协会活动']
|
|
},
|
|
series: [
|
|
{
|
|
name: '数据',
|
|
type: 'pie',
|
|
radius: '55%',
|
|
center: ['45%', '50%'],
|
|
data: self.first,
|
|
itemStyle: {
|
|
emphasis: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
if (option && typeof option === "object") {
|
|
myChart.setOption(option, true);
|
|
}
|
|
//完毕-----
|
|
|
|
} else {
|
|
self.$message({
|
|
message: data.msg,
|
|
type: 'error'
|
|
});
|
|
}
|
|
}, "json");
|
|
},
|
|
|
|
container2: function () {
|
|
|
|
var self = this;
|
|
var dom = document.getElementById("container2");
|
|
var myChart = echarts.init(dom, 'westeros');
|
|
option = null;
|
|
$.post(base + "/platform/hdsjkb/second", {year: self.year}, function (data) {
|
|
if (data.code == 0) {
|
|
self.xhdJf = data.data.xhd;
|
|
self.fhhdJf = data.data.fhhd;
|
|
self.sthdJf = data.data.sthd;
|
|
for (var i = 0; i < self.xhdJf.length; i++) {
|
|
if (self.xhdJf[i] == null || self.xhdJf[i] == "") {
|
|
self.xhdJf[i] = 0;
|
|
}
|
|
}
|
|
for (var i = 0; i < self.fhhdJf.length; i++) {
|
|
if (self.fhhdJf[i] == null || self.fhhdJf[i] == "") {
|
|
self.fhhdJf[i] = 0;
|
|
}
|
|
}
|
|
for (var i = 0; i < self.sthdJf.length; i++) {
|
|
if (self.sthdJf[i] == null || self.sthdJf[i] == "") {
|
|
self.sthdJf[i] = 0;
|
|
}
|
|
}
|
|
//加载折线图
|
|
option = {
|
|
title: {
|
|
text: '活动经费统计',
|
|
subtext: '费用',
|
|
textStyle: {
|
|
fontSize: 15,
|
|
fontWeight: 'normal',
|
|
}
|
|
},
|
|
height: 280,
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: ["校工会活动", "基层工会活动", "协会活动"],
|
|
|
|
},
|
|
toolbox: {
|
|
show: true,
|
|
feature: {
|
|
saveAsImage: {}
|
|
},
|
|
right: 16,
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['1~3月', '4~6月', '7~9月', '10~12月'],
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLabel: {
|
|
formatter: '{value}'
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: "校工会活动",
|
|
type: 'line',
|
|
data: self.xhdJf,
|
|
markPoint: {
|
|
data: [
|
|
{type: 'max', name: '最大值', symbolSize: [40, 40]},
|
|
{type: 'min', name: '最小值', symbolSize: [40, 40]}
|
|
]
|
|
},
|
|
markLine: {
|
|
data: [
|
|
{type: 'average', name: '平均值'}
|
|
]
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#94C2A5'
|
|
}
|
|
},
|
|
},
|
|
{
|
|
name: "基层工会活动",
|
|
type: 'line',
|
|
data: self.fhhdJf,
|
|
markPoint: {
|
|
data: [
|
|
{type: 'max', name: '最大值', symbolSize: [40, 40]},
|
|
{type: 'min', name: '最小值', symbolSize: [40, 40]}
|
|
]
|
|
},
|
|
markLine: {
|
|
data: [
|
|
{type: 'average', name: '平均值'}
|
|
]
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#5FC0DB'
|
|
}
|
|
},
|
|
},
|
|
{
|
|
name: "协会活动",
|
|
type: 'line',
|
|
data: self.sthdJf,
|
|
markPoint: {
|
|
data: [
|
|
{type: 'max', name: '最大值', symbolSize: [40, 40]},
|
|
{type: 'min', name: '最小值', symbolSize: [40, 40]}
|
|
]
|
|
},
|
|
markLine: {
|
|
data: [
|
|
{type: 'average', name: '平均值'}
|
|
]
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#ECACCF'
|
|
}
|
|
},
|
|
},
|
|
]
|
|
};
|
|
if (option && typeof option === "object") {
|
|
myChart.setOption(option, true);
|
|
}
|
|
;
|
|
//完毕-------------------
|
|
} else {
|
|
self.$message({
|
|
message: data.msg,
|
|
type: 'error'
|
|
});
|
|
}
|
|
}, "json");
|
|
},
|
|
|
|
container3: function () {
|
|
var self = this;
|
|
var dom = document.getElementById("container3");
|
|
var myChart = echarts.init(dom, 'westeros');
|
|
option = null;
|
|
$.post(base + "/platform/hdsjkb/third", {year: self.year}, function (data) {
|
|
if (data.code == 0) {
|
|
self.hdxm = data.data.hdxm;
|
|
self.xhd = data.data.xhd;
|
|
self.fhhd = data.data.fhhd;
|
|
self.sthd = data.data.sthd;
|
|
self.xhdgs = data.data.xhdgs;
|
|
self.fhdgs = data.data.fhdgs;
|
|
self.sthdgs = data.data.sthdgs;
|
|
for (var i = 0; i < self.xhd.length; i++) {
|
|
if (self.xhd[i] == null || self.xhd[i] == "") {
|
|
self.xhd[i] = 0;
|
|
}
|
|
}
|
|
for (var i = 0; i < self.fhhd.length; i++) {
|
|
if (self.fhhd[i] == null || self.fhhd[i] == "") {
|
|
self.fhhd[i] = 0;
|
|
}
|
|
}
|
|
for (var i = 0; i < self.sthd.length; i++) {
|
|
if (self.sthd[i] == null || self.sthd[i] == "") {
|
|
self.sthd[i] = 0;
|
|
}
|
|
}
|
|
//加载柱状图
|
|
option = {
|
|
title: {
|
|
text: '活动参与人数',
|
|
subtext: '人数',
|
|
textStyle: {
|
|
fontSize: 15,
|
|
fontWeight: 'normal',
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
}
|
|
},
|
|
legend: {
|
|
data: ["校工会活动参与人数", "基层工会活动参与人数", "协会活动参与人数", "校工会活动数量", "基层工会活动数量", "协会活动数量"],
|
|
},
|
|
toolbox: {
|
|
show: true,
|
|
feature: {
|
|
saveAsImage: {}
|
|
},
|
|
right: 16,
|
|
},
|
|
height: 240,
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
boundaryGap: true,
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: self.hdxm,
|
|
boundaryGap: true,
|
|
axisLabel: {
|
|
interval: 0
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: "校工会活动数量",
|
|
data: self.xhdgs,
|
|
type: 'bar',
|
|
stack: '校工会活动',
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'inside'
|
|
}
|
|
},
|
|
color: '#46AED8'
|
|
},
|
|
{
|
|
name: "校工会活动参与人数",
|
|
data: self.xhd,
|
|
type: 'bar',
|
|
stack: '校工会活动',
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'inside'
|
|
}
|
|
},
|
|
color: '#70E0B8'
|
|
},
|
|
{
|
|
name: "基层工会活动数量",
|
|
data: self.fhdgs,
|
|
type: 'bar',
|
|
stack: '基层工会活动',
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'inside'
|
|
}
|
|
},
|
|
color: '#676C8A'
|
|
},
|
|
{
|
|
name: "基层工会活动参与人数",
|
|
data: self.fhhd,
|
|
type: 'bar',
|
|
stack: '基层工会活动',
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'inside'
|
|
}
|
|
},
|
|
color: '#A2A4DB'
|
|
},
|
|
{
|
|
name: "协会活动数量",
|
|
data: self.sthdgs,
|
|
type: 'bar',
|
|
stack: '协会活动',
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'inside'
|
|
}
|
|
},
|
|
color: '#C5E5A5'
|
|
},
|
|
{
|
|
name: "协会活动参与人数",
|
|
data: self.sthd,
|
|
type: 'bar',
|
|
stack: '协会活动',
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'inside'
|
|
}
|
|
},
|
|
color: '#99D9DD'
|
|
},
|
|
]
|
|
};
|
|
if (option && typeof option === "object") {
|
|
myChart.setOption(option, true);
|
|
}
|
|
//完毕-------------------
|
|
} else {
|
|
self.$message({
|
|
message: data.msg,
|
|
type: 'error'
|
|
});
|
|
}
|
|
}, "json");
|
|
|
|
},
|
|
yyxx: function () {
|
|
var self = this;
|
|
$.post(base + "/platform/hdsjkb/getYyxx", function (data) {
|
|
self.yylist = data.data;
|
|
self.yylist.xhd.forEach(function (val) {
|
|
self.yy.push({"lab": val.hdkssj, val: val.xhdmc})
|
|
})
|
|
self.yylist.fhd.forEach(function (val) {
|
|
self.yy.push({"lab": val.hdkssj, val: val.fhdmc})
|
|
})
|
|
self.yylist.sthd.forEach(function (val) {
|
|
self.yy.push({"lab": val.hdkssj, val: val.hdmc})
|
|
})
|
|
})
|
|
}
|
|
},
|
|
created: function () {
|
|
// this.yyxx();
|
|
},
|
|
mounted: function () {
|
|
this.container1();
|
|
this.container2();
|
|
this.container3();
|
|
|
|
},
|
|
watch: {
|
|
"year": function (obj) {
|
|
this.container1();
|
|
this.container2();
|
|
this.container3();
|
|
},
|
|
"day": function (val, oldval) {
|
|
console.log(moment(val).format('YYYY-MM-DD'));
|
|
/*location.href=base+"/platform/hdsjkb/bm?day="+moment(val).format('YYYY-MM-DD')*/
|
|
}
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
<!--#
|
|
}
|
|
#-->
|