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