first commit
This commit is contained in:
@@ -0,0 +1,565 @@
|
||||
<!--数据看板 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>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
Reference in New Issue
Block a user