677 lines
23 KiB
HTML
677 lines
23 KiB
HTML
<!--#
|
|
layout("/layouts/platform.html"){
|
|
#-->
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#app {
|
|
height: 100%;
|
|
background-color: #0b0f28;
|
|
}
|
|
|
|
#app {
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.header2 {
|
|
height: 80px;
|
|
max-height: 80px;
|
|
margin-bottom: 5px;
|
|
background: url("/assets/platform/img/visual/1.jpg") no-repeat;
|
|
background-size: contain;
|
|
}
|
|
|
|
.content {
|
|
height: calc(100% - 80px);
|
|
max-height: calc(100% - 80px);
|
|
flex-flow: column;
|
|
}
|
|
|
|
.small_box {
|
|
background: url(5.jpg) no-repeat;
|
|
background-size: contain;
|
|
flex: 1;
|
|
background-color: rgb(16 22 56);
|
|
}
|
|
|
|
.middle_box {
|
|
flex: 2;
|
|
background-color: rgb(16 22 56);
|
|
}
|
|
|
|
.mr5 {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.ml5 {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.mb5 {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.box_0 {
|
|
/* background: url(2.jpg) no-repeat;
|
|
background-size: cover;
|
|
background-position: center 0; */
|
|
background: linear-gradient(#050d53, #01106f);
|
|
border: 1px solid #2243a7;
|
|
}
|
|
|
|
.box_0 > div > div {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.box_1 {
|
|
/* background: url(5.jpg) no-repeat; */
|
|
/* background-size: cover;
|
|
background-position: center 0; */
|
|
background: linear-gradient(#050d53, #01106f);
|
|
border: 1px solid #2243a7;
|
|
}
|
|
|
|
.box_2 {
|
|
background: linear-gradient(#050d53, #01106f);
|
|
border: 1px solid #2243a7;
|
|
}
|
|
|
|
.box_3 {
|
|
padding: 0 30px 30px 30px;
|
|
background: linear-gradient(#050d53, #01106f);
|
|
border: 1px solid #2243a7;
|
|
|
|
}
|
|
|
|
.card_title {
|
|
color: #fff;
|
|
font-size: 18px;
|
|
text-align: center;
|
|
width: 100%;
|
|
height: 35px;
|
|
line-height: 55px;
|
|
letter-spacing: 2px;
|
|
font-weight: 100;
|
|
}
|
|
|
|
.el-table {
|
|
border-top: 1px solid #2243a7;
|
|
}
|
|
|
|
.el-table th, .el-table tr, .el-table, .el-table__expanded-cell {
|
|
background-color: transparent !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
.el-table td, .el-table th.is-leaf {
|
|
border-bottom: unset !important;
|
|
}
|
|
|
|
.el-table--enable-row-hover .el-table__body tr:hover > td {
|
|
background-color: unset !important;
|
|
}
|
|
|
|
.el-table--border::after, .el-table--group::after, .el-table::before {
|
|
background-color: unset !important;
|
|
}
|
|
|
|
.el-table thead {
|
|
color: #fff !important;
|
|
}
|
|
|
|
.mr20 {
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.activity_table::-webkit-scrollbar { /*滚动条整体样式*/
|
|
width: 6px;
|
|
}
|
|
|
|
.activity_table::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
|
|
border-radius: 5px;
|
|
background-color: #c1c1c1;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.union_table::-webkit-scrollbar-thumb {
|
|
border-radius: 5px;
|
|
background-color: #c1c1c1;
|
|
}
|
|
|
|
|
|
.union_table::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
|
|
.activity_table, .union_table {
|
|
color: #FFFFFF;
|
|
margin: 20px;
|
|
overflow-y: auto;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.text-left {
|
|
text-align: left;
|
|
}
|
|
|
|
.activity_table .el-col, .union_table .el-col {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.zz {
|
|
width: 30px;
|
|
height: 40px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
border-left: 2px solid #EBEBEB;
|
|
border-top: 2px solid #EBEBEB;
|
|
}
|
|
|
|
.xx {
|
|
width: 10px;
|
|
height: 10px;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
border-right: 2px solid #EBEBEB;
|
|
border-top: 2px solid #EBEBEB;
|
|
}
|
|
|
|
.cc {
|
|
width: 10px;
|
|
height: 10px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
border-bottom: 2px solid #EBEBEB;
|
|
border-left: 2px solid #EBEBEB;
|
|
}
|
|
|
|
.vv {
|
|
width: 10px;
|
|
height: 10px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
border-right: 2px solid #EBEBEB;
|
|
border-bottom: 2px solid #EBEBEB;
|
|
}
|
|
|
|
.proposal_box {
|
|
width: 200px;
|
|
height: 100px;
|
|
position: relative;
|
|
margin: 10px 0px 0 5px;
|
|
}
|
|
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app">
|
|
<el-row class="header2" type="flex"></el-row>
|
|
|
|
<div style="height: calc(100% - 80px);display: flex;flex-flow: column">
|
|
<el-row style="height: 66%;margin-bottom: 20px" type="flex">
|
|
<el-col :span="7" class=" mr20" style="height: 100%;display:flex;flex-flow: column">
|
|
<el-row class="box_0" style="flex:1;margin-bottom: 20px;background-image: url('/assets/platform/img/visual/2.jpg');
|
|
background-size: 100% 100%;position: relative"
|
|
type="flex">
|
|
<div class="card_title">提案详情</div>
|
|
<div style="display: flex;flex-flow: column;
|
|
position: absolute;
|
|
left: 130px;
|
|
top:75px;
|
|
color: #fff">
|
|
<div>{{proposalNum.all}}</div>
|
|
<div>提案总数</div>
|
|
</div>
|
|
<div style="display: flex;flex-flow: column;
|
|
position: absolute;
|
|
left: 350px;
|
|
top:75px;
|
|
color: #fff">
|
|
<div>{{proposalNum.determine}}</div>
|
|
<div>确定立案</div>
|
|
</div>
|
|
<div style="display: flex;flex-flow: column;
|
|
position: absolute;
|
|
left: 130px;
|
|
top:165px;
|
|
color: #fff">
|
|
<div>{{proposalNum.undertaking}}</div>
|
|
<div>提案办理中</div>
|
|
</div>
|
|
<div style="display: flex;flex-flow: column;
|
|
position: absolute;
|
|
left: 350px;
|
|
top:165px;
|
|
color: #fff">
|
|
<div>{{proposalNum.finish}}</div>
|
|
<div>提案完结</div>
|
|
</div>
|
|
|
|
</el-row>
|
|
<el-row class="box_1" style="flex:1;flex-flow: column;" type="flex">
|
|
<div class="card_title">荣誉统计</div>
|
|
<div id="honor_box"></div>
|
|
</el-row>
|
|
</el-col>
|
|
<el-col :span="10" class=" mr20" style="height: 100%;display:flex;flex-flow: column">
|
|
<el-row class="box_3" style="flex:1;margin-bottom: 20px;flex-flow: column;" type="flex">
|
|
<div class="card_title">提案类型分析</div>
|
|
<div id="proposal_box" style="height: calc(100% - 40px);margin-top: 10px;"></div>
|
|
</el-row>
|
|
<el-row class="box_1" style="flex:1;flex-flow: column;" type="flex">
|
|
<div class="card_title">资产统计</div>
|
|
<div id="asset_box"></div>
|
|
</el-row>
|
|
</el-col>
|
|
<el-col :span="7" class="box_1" style="height: 100%">
|
|
<el-row class="box_2" style="flex:1;flex-flow: column;max-height: 100%" type="flex">
|
|
<div class="card_title">会员分析</div>
|
|
<div id="unionMember_box" style="height: 200px;margin-top: 10px;"></div>
|
|
<div class="union_table" style="max-height: calc(100% - 250px);">
|
|
<el-row class="mb5">
|
|
<el-col :span="2" class="text-center">序号</el-col>
|
|
<el-col :span="12" class="text-left">分工会</el-col>
|
|
<el-col :span="8" class="text-center">人数</el-col>
|
|
</el-row>
|
|
<el-row class="mb5" v-for="(o,index) in memberTableData">
|
|
<el-col :span="2" class="text-center">{{index + 1}}</el-col>
|
|
<el-col :span="12" class="text-left">{{o.unionname}}</el-col>
|
|
<el-col :span="8" class="text-center">{{o.value}}</el-col>
|
|
</el-row>
|
|
</div>
|
|
</el-row>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row style="height: 33%" type="flex">
|
|
<el-col :span="24" class="box_1 mr20" style="height: 100%;flex-flow: column;">
|
|
|
|
<div class="card_title">年度慰问详情</div>
|
|
<div id="condolence_box" style="height: calc(100% - 40px);margin-top: 10px;"></div>
|
|
</el-col>
|
|
<!-- <el-col :span="10" class="box_3 mr20" style="height: 100%">
|
|
<div class="card_title">大病互助统计</div>
|
|
<div id="helpOther_box" style="height: calc(100% - 40px);margin-top: 10px;"></div>
|
|
</el-col>
|
|
<el-col :span="7" class="box_1" style="height: 100%;max-height: 100%">
|
|
<el-row style="height: 100%;max-height: 100%;">
|
|
<div class="card_title">校活动计划</div>
|
|
<div class="activity_table" style="max-height: calc(100% - 75px);height: calc(100% - 75px);">
|
|
<el-row class="mb5">
|
|
<el-col :span="3" class="text-center">序号</el-col>
|
|
<el-col :span="8" class="text-center">活动名称</el-col>
|
|
<el-col :span="8" class="text-center">活动时间</el-col>
|
|
<el-col :span="5" class="text-center">执行情况</el-col>
|
|
</el-row>
|
|
<el-row class="mb5" v-for="(o,index) in activityTableData">
|
|
<el-col :span="3" class="text-center">{{index + 1}}</el-col>
|
|
<el-col :span="8" class="text-center">{{o.name}}</el-col>
|
|
<el-col :span="8" class="text-center">{{o.time}}</el-col>
|
|
<el-col :span="5" class="text-center">{{!o.carryOut ? '未执行' : '已执行'}}</el-col>
|
|
</el-row>
|
|
</div>
|
|
</el-row>
|
|
|
|
</el-col>-->
|
|
</el-row>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</body>
|
|
<script>
|
|
$(document).keydown(function (event) {
|
|
//event.metaKey mac的command键
|
|
//mac下chrome: - 189, + 187 firefox: - 173, + 61,
|
|
//数字键盘: + 107, - 109
|
|
if ((event.ctrlKey === true || event.metaKey === true) &&
|
|
(event.which === 189 || event.which === 187
|
|
|| event.which === 173 || event.which === 61
|
|
|| event.which === 107 || event.which === 109)) {
|
|
event.preventDefault();
|
|
}
|
|
});
|
|
// $(window).bind('mousewheel DOMMouseScroll', function (event) {
|
|
// if (event.ctrlKey === true || event.metaKey) {
|
|
// event.preventDefault();
|
|
// }
|
|
// });
|
|
window.addEventListener('mousewheel', function (event) {
|
|
if (event.ctrlKey === true || event.metaKey) {
|
|
event.preventDefault();
|
|
}
|
|
}, {passive: false});
|
|
|
|
//firefox
|
|
window.addEventListener('DOMMouseScroll', function (event) {
|
|
if (event.ctrlKey === true || event.metaKey) {
|
|
event.preventDefault();
|
|
}
|
|
}, {passive: false});
|
|
|
|
</script>
|
|
<script>
|
|
let proposalPlot = null
|
|
let condolencePlot = null
|
|
let unionMemberPlot = null
|
|
|
|
new Vue({
|
|
el: '#app',
|
|
data() {
|
|
return {
|
|
selected: false,
|
|
allJdhOptions: [],
|
|
meetingId: '',
|
|
memberTableData: [],
|
|
activityTableData: [],
|
|
year: new Date().getFullYear(),
|
|
proposalNum: {}
|
|
}
|
|
},
|
|
methods: {
|
|
async renderProposal() {
|
|
const {data} = await $.post('/platform/proposal/statistics/board/getChatData', {meetingId: this.meetingId})
|
|
|
|
const proposalPlot = new G2Plot.Area('proposal_box', {
|
|
data,
|
|
forceFit: true,
|
|
xField: 'typeName',
|
|
yField: 'num',
|
|
seriesField: 'type',
|
|
legend: {
|
|
"position": "top-right",
|
|
"flipPage": false
|
|
},
|
|
theme: {
|
|
styleSheet: {
|
|
backgroundColor: 'transparent'
|
|
}
|
|
},
|
|
columnStyle: {
|
|
fill: '#5fd8b5'
|
|
}
|
|
});
|
|
proposalPlot.render();
|
|
},
|
|
async renderCondolence() {
|
|
const {data} = await $.post('/platform/fw/condolence/statistics/condolencesType2', {year: this.year})
|
|
if (condolencePlot == null) {
|
|
condolencePlot = new G2Plot.Column('condolence_box', {
|
|
data,
|
|
autoFit: true,
|
|
xField: 'name',
|
|
yField: 'value',
|
|
label: {
|
|
position: 'middle',
|
|
style: {
|
|
fill: '#FFFFFF',
|
|
opacity: 0.6,
|
|
},
|
|
content: v => v.value + '次'
|
|
},
|
|
theme: {
|
|
styleSheet: {
|
|
backgroundColor: 'transparent'
|
|
}
|
|
},
|
|
columnStyle: {
|
|
fill: '#5fd8b5'
|
|
},
|
|
xAxis: {
|
|
label: {
|
|
autoHide: true,
|
|
autoRotate: false,
|
|
},
|
|
},
|
|
meta: {
|
|
label: {
|
|
alias: '类型',
|
|
},
|
|
value: {
|
|
alias: '慰问数',
|
|
},
|
|
},
|
|
});
|
|
condolencePlot.render()
|
|
} else {
|
|
condolencePlot.changeData(data)
|
|
}
|
|
},
|
|
async renderUnionMember() {
|
|
const {data} = await $.post('/platform/member/inquire/board/unionMember')
|
|
this.memberTableData = data.tableData
|
|
const chartData = data.chartData
|
|
const labels = chartData.map(v => v.unionname)
|
|
const values = chartData.map(v => v.value)
|
|
|
|
const unionMemberPlot = new G2Plot.TinyArea('unionMember_box', {
|
|
autoFit: false,
|
|
data: values,
|
|
smooth: true,
|
|
theme: {
|
|
styleSheet: {
|
|
backgroundColor: 'transparent'
|
|
}
|
|
},
|
|
columnStyle: {
|
|
fill: '#FFFFFF'
|
|
},
|
|
tooltip: {
|
|
customContent: function (i, data) {
|
|
if (labels[i]) {
|
|
return labels[i] + '- ' + data[0]?.data?.y + '人';
|
|
}
|
|
return ''
|
|
}
|
|
},
|
|
})
|
|
unionMemberPlot.render()
|
|
},
|
|
async renderHonor() {
|
|
const {data} = await $.post('/platfotm/ry/ryfx/data', {year: this.year})
|
|
const piePlot = new G2Plot.Pie('honor_box', {
|
|
width: 200,
|
|
height: 200,
|
|
appendPadding: 10,
|
|
data,
|
|
angleField: 'value',
|
|
colorField: 'name',
|
|
radius: 0.9,
|
|
|
|
label: {
|
|
type: 'inner',
|
|
offset: '-30%',
|
|
content: ({value}) => {
|
|
return value + '人'
|
|
},
|
|
style: {
|
|
color: '#fff',
|
|
fontSize: 14,
|
|
textAlign: 'center',
|
|
},
|
|
},
|
|
interactions: [{type: 'element-active'}],
|
|
});
|
|
piePlot.render();
|
|
},
|
|
async renderAsset() {
|
|
const {data: {zttj}} = await $.post('/platform/zcgl/sjkb/data')
|
|
const status = zttj[0]
|
|
let data = []
|
|
Object.keys(status).map(v => {
|
|
switch (v) {
|
|
case 'zy':
|
|
data.push({type: '在用', value: status[v]})
|
|
break
|
|
case 'xz':
|
|
data.push({type: '闲置', value: status[v]})
|
|
break
|
|
case 'wsy':
|
|
data.push({type: '未使用', value: status[v]})
|
|
break
|
|
case 'dbf':
|
|
data.push({type: '待报废', value: status[v]})
|
|
break
|
|
case 'xwzr':
|
|
data.push({type: '校外转入', value: status[v]})
|
|
break
|
|
case 'xnzr':
|
|
data.push({type: '校内转入', value: status[v]})
|
|
break
|
|
case '其它':
|
|
data.push({type: 'qt', value: status[v]})
|
|
break
|
|
}
|
|
})
|
|
const asset = new G2Plot.Pie('asset_box', {
|
|
appendPadding: 10,
|
|
data,
|
|
width: 200,
|
|
height: 200,
|
|
angleField: 'value',
|
|
colorField: 'type',
|
|
radius: 1,
|
|
innerRadius: 0.6,
|
|
label: {
|
|
type: 'inner',
|
|
offset: '-50%',
|
|
content: '{value}',
|
|
style: {
|
|
textAlign: 'center',
|
|
fontSize: 14,
|
|
},
|
|
},
|
|
interactions: [{type: 'element-selected'}, {type: 'element-active'}],
|
|
statistic: {
|
|
title: false,
|
|
content: {
|
|
style: {
|
|
whiteSpace: 'pre-wrap',
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
},
|
|
},
|
|
},
|
|
});
|
|
asset.render()
|
|
// const piePlot = new G2Plot.Pie('asset_box', {
|
|
// width: 200,
|
|
// height: 200,
|
|
// appendPadding: 10,
|
|
// data,
|
|
// angleField: 'value',
|
|
// colorField: 'type',
|
|
// radius: 0.9,
|
|
//
|
|
// label: {
|
|
// type: 'inner',
|
|
// offset: '-30%',
|
|
// content: ({value}) => {
|
|
// return value
|
|
// },
|
|
// style: {
|
|
// color: '#fff',
|
|
// fontSize: 14,
|
|
// textAlign: 'center',
|
|
// },
|
|
// },
|
|
// interactions: [{type: 'element-active'}],
|
|
// });
|
|
// piePlot.render();
|
|
},
|
|
async renderActivityPlan() {
|
|
const params = {pageNumber: 1, pageSize: 20, year: this.year}
|
|
const {data} = await $.post('/platform/activity/school/plan/pageData', params)
|
|
/* for (let i = 0; i < 10; i++) {
|
|
this.activityTableData = this.activityTableData.concat(data.list)
|
|
}*/
|
|
this.activityTableData = data.list
|
|
},
|
|
async renderProposalNum() {
|
|
const {data} = await $.post('/platform/proposal/statistics/board/numData', {meetingId: this.meetingId})
|
|
this.proposalNum = data
|
|
},
|
|
async renderHelpOther() {
|
|
const res = await $.post('/platform/visualization/dbhztj')
|
|
const helpOtherPlot = new G2Plot.Column('helpOther_box', {
|
|
data: res,
|
|
autoFit: true,
|
|
xField: 'year',
|
|
yField: 'total',
|
|
label: {
|
|
position: 'middle',
|
|
style: {
|
|
fill: '#FFFFFF',
|
|
opacity: 1,
|
|
},
|
|
content: v => v.total + '元'
|
|
},
|
|
xAxis: {
|
|
label: {
|
|
autoRotate: false,
|
|
autoHide: true,
|
|
},
|
|
},
|
|
slider: {
|
|
start: 0,
|
|
end: 1,
|
|
},
|
|
theme: {
|
|
styleSheet: {
|
|
backgroundColor: 'transparent'
|
|
}
|
|
},
|
|
columnStyle: {
|
|
fill: '#7666f9'
|
|
},
|
|
meta: {
|
|
year: {
|
|
alias: '年度',
|
|
},
|
|
total: {
|
|
alias: '总额'
|
|
},
|
|
},
|
|
});
|
|
|
|
helpOtherPlot.render();
|
|
}
|
|
},
|
|
async mounted() {
|
|
this.allJdhOptions = await proposal.getAllMeeting()
|
|
this.meetingId = this.allJdhOptions.length ? this.allJdhOptions[0].id : ''
|
|
this.renderProposal()
|
|
this.renderCondolence()
|
|
this.renderUnionMember()
|
|
this.renderHonor()
|
|
this.renderAsset()
|
|
this.renderActivityPlan()
|
|
this.renderProposalNum()
|
|
this.renderHelpOther()
|
|
}
|
|
})
|
|
</script>
|
|
<!--#
|
|
}
|
|
#-->
|