566 lines
21 KiB
HTML
566 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Title</title>
|
|
<link rel="stylesheet" href="${base!}/assets/platform/css/datav/proposal.css">
|
|
<script src="${base!}/assets/platform/plugins/vue/vue.min.js"></script>
|
|
<script src="${base!}/assets/platform/plugins/datav/datav.map.vue.js"></script>
|
|
<script src="${base!}/assets/platform/plugins/jquery/jquery-1.11.1.min.js"></script>
|
|
<script src="${base!}/assets/platform/plugins/vue-loader/httpVueLoader.js"></script>
|
|
<!-- <script src="${base!}/assets/platform/plugins/g2/g2.min.js?v=4.1.9"></script>-->
|
|
<!-- <script src="${base!}/assets/platform/plugins/g2/data-set.js"></script>-->
|
|
<!-- <script src="${base!}/assets/platform/plugins/g2/g2plot.js?v=1.0.0"></script>-->
|
|
|
|
<script src="https://cdn.staticfile.org/g2plot/2.4.31/g2plot.min.js"></script>
|
|
|
|
<script src="https://cdn.staticfile.org/echarts/5.2.2/echarts.js"></script>
|
|
<script src="https://cdn.staticfile.org/echarts/5.2.2/i18n/langZH.js"></script>
|
|
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div id="data-view">
|
|
<div id="top-header">
|
|
<dv-decoration-8 class="header-left-decoration"></dv-decoration-8>
|
|
<dv-decoration-5 class="header-center-decoration"></dv-decoration-5>
|
|
<dv-decoration-8 class="header-right-decoration" :reverse="true"></dv-decoration-8>
|
|
<div class="center-title">提案</div>
|
|
</div>
|
|
<div id="main-content" style="">
|
|
<dv-border-box-9 class="box1">
|
|
<div class="box-title">
|
|
提案类型统计
|
|
</div>
|
|
<div id="proposalTypeChart" style="height:calc((100vh - 160px) / 3)"></div>
|
|
</dv-border-box-9>
|
|
<dv-border-box-3 class="box2">
|
|
<div class="middle">
|
|
<dv-scroll-board :config="scrollBoardConfig"
|
|
style="width:100%;padding:50px;height:35%;box-sizing: border-box"></dv-scroll-board>
|
|
|
|
<div class="ball ball1">
|
|
<div class="title">代表人数</div>
|
|
<div class="num">{{comprehensiveData.representativesNum || 0}}</div>
|
|
</div>
|
|
<div class="ball ball2">
|
|
<div class="title">提案总数</div>
|
|
<div class="num">{{comprehensiveData.proposalSum || 0}}</div>
|
|
</div>
|
|
<div class="ball ball3">
|
|
<div class="title">个人提案</div>
|
|
<div class="num">{{comprehensiveData.personalProposalNum || 0}}</div>
|
|
</div>
|
|
<div class="ball ball4">
|
|
<div class="title">代表团提案</div>
|
|
<div class="num">{{comprehensiveData.delegationProposalNum || 0}}</div>
|
|
</div>
|
|
<div class="cicle1"></div>
|
|
</div>
|
|
</dv-border-box-3>
|
|
<dv-border-box-9 class="box3">
|
|
<div class="box-title">
|
|
提案满意度
|
|
</div>
|
|
<div id="satisfiedChart" style="height:calc((100vh - 160px) / 2)"></div>
|
|
</dv-border-box-9>
|
|
<dv-border-box-9 class="box4">
|
|
<div class="box-title">
|
|
提案立案率
|
|
</div>
|
|
<div id="caseRateChart" style="height:calc((100vh - 160px) / 3)"></div>
|
|
</dv-border-box-9>
|
|
<!-- <dv-border-box-9 class="box5">-->
|
|
<!-- <div id="relationChart" style="height:calc((100vh - 160px) / 3)"></div>-->
|
|
<!-- </dv-border-box-9>-->
|
|
<dv-border-box-9 class="box6">
|
|
<div class="box-title">
|
|
提案代表团人数/提案数
|
|
</div>
|
|
<div id="delegationChart" style="height:calc((100vh - 160px) / 3)"></div>
|
|
</dv-border-box-9>
|
|
<dv-border-box-9 class="box7">
|
|
<div class="box-title">
|
|
承办单位承办提统计
|
|
</div>
|
|
<div id="underTakeChart" style="height:calc((100vh - 160px) / 3);"></div>
|
|
</dv-border-box-9>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data() {
|
|
return {
|
|
comprehensiveData: {
|
|
representativesNum: 0,
|
|
proposalNum: 0
|
|
},
|
|
proposalNames: [],
|
|
scrollBoardConfig: {},
|
|
meetingId: '2b0c15egeeg8lo74lgaiu2cgev'
|
|
}
|
|
},
|
|
methods: {
|
|
renderProposalTypeCount() {
|
|
$.get('/platform/datav/proposal/typeData', {meetingId: this.meetingId}).then(res => {
|
|
const data = res.data
|
|
const chart = new G2Plot.Column('proposalTypeChart', {
|
|
data,
|
|
padding: 50,
|
|
autoFit: true,
|
|
xField: 'type',
|
|
yField: 'value',
|
|
meta: {
|
|
type: {
|
|
alias: '类别',
|
|
},
|
|
sales: {
|
|
alias: '数量',
|
|
},
|
|
},
|
|
xAxis: {
|
|
label: {
|
|
autoRotate: true,
|
|
autoHide: false,
|
|
autoEllipsis: false,
|
|
style: {
|
|
fill: '#fff', // 文字颜色
|
|
}
|
|
},
|
|
},
|
|
yAxis: {
|
|
label: {
|
|
style: {
|
|
fill: '#fff',
|
|
},
|
|
},
|
|
},
|
|
});
|
|
chart.render()
|
|
})
|
|
},
|
|
renderProposalSatisfied() {
|
|
$.get('/platform/datav/proposal/satisfiedData', {meetingId: this.meetingId}).then(res => {
|
|
const data = res.data
|
|
const chart = new G2Plot.Pie('satisfiedChart', {
|
|
data,
|
|
padding: 30,
|
|
autoFit: true,
|
|
angleField: 'num',
|
|
colorField: 'name',
|
|
radius: 0.65,
|
|
color: ['#9661BC', '#5B8FF9', '#61DDAA'],
|
|
label: {
|
|
type: 'spider',
|
|
labelHeight: 28,
|
|
content: '{name}\n{percentage}',
|
|
style: {
|
|
fill: '#fff', // 文字颜色：红色
|
|
}
|
|
},
|
|
interactions: [{type: 'element-selected'}, {type: 'element-active'}],
|
|
legend: {
|
|
position: 'bottom', // 图例位置：右边
|
|
offsetY: -25, // 在 y 轴上向下偏移 20px
|
|
itemName: {
|
|
style: {
|
|
fill: '#fff', // 文字颜色：红色
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
chart.render();
|
|
})
|
|
},
|
|
renderProposalCaseRate() {
|
|
$.get('/platform/datav/proposal/caseRate', {meetingId: this.meetingId}).then(res => {
|
|
const data = res.data
|
|
const chart = new G2Plot.Radar('caseRateChart', {
|
|
data,
|
|
xField: 'name',
|
|
yField: 'value',
|
|
padding: 60,
|
|
seriesField: 'type',
|
|
meta: {
|
|
num: {
|
|
alias: '数量',
|
|
min: 0
|
|
},
|
|
},
|
|
xAxis: {
|
|
line: null,
|
|
tickLine: null,
|
|
grid: {
|
|
line: {
|
|
style: {
|
|
lineDash: null,
|
|
},
|
|
},
|
|
},
|
|
label: {
|
|
style: {
|
|
fill: '#fff', // 文字颜色：红色
|
|
},
|
|
},
|
|
},
|
|
yAxis: {
|
|
line: null,
|
|
tickLine: null,
|
|
grid: {
|
|
line: {
|
|
type: 'line',
|
|
style: {
|
|
lineDash: null,
|
|
},
|
|
},
|
|
},
|
|
label: {
|
|
style: {
|
|
fill: '#fff', // 文字颜色：红色
|
|
},
|
|
},
|
|
},
|
|
label: {
|
|
style: {
|
|
fill: '#fff'
|
|
}
|
|
},
|
|
area: {},
|
|
point: {
|
|
size: 2,
|
|
},
|
|
legend: false
|
|
});
|
|
|
|
chart.render();
|
|
})
|
|
},
|
|
renderProposalDelegationCount() {
|
|
$.get('/platform/datav/proposal/delegationCount', {meetingId: this.meetingId}).then(res => {
|
|
const data = res.data
|
|
const chart = new G2Plot.Column('delegationChart', {
|
|
data,
|
|
padding: 50,
|
|
xField: 'name',
|
|
yField: 'value',
|
|
seriesField: 'type',
|
|
isGroup: 'true',
|
|
forceFit: true,
|
|
columnStyle: {
|
|
radius: [20, 20, 0, 0],
|
|
},
|
|
xAxis: {
|
|
label: {
|
|
autoRotate: true,
|
|
autoHide: true,
|
|
autoEllipsis: true,
|
|
style: {
|
|
fill: '#fff', // 文字颜色：红色
|
|
}
|
|
},
|
|
},
|
|
yAxis: {
|
|
label: {
|
|
style: {
|
|
fill: '#fff',
|
|
},
|
|
},
|
|
},
|
|
legend: {
|
|
position: 'right', // 图例位置：下边
|
|
offsetX: -10,
|
|
itemName: {
|
|
style: {
|
|
fill: '#fff', // 文字颜色：红色
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
chart.render();
|
|
})
|
|
},
|
|
renderProposalUnderTakeCount() {
|
|
$.get('/platform/datav/proposal/underTakeCount', {meetingId: this.meetingId}).then(res => {
|
|
let data = res.data
|
|
const chart = new G2Plot.Column(document.getElementById('underTakeChart'), {
|
|
forceFit: true,
|
|
data,
|
|
padding: 50,
|
|
xField: 'name',
|
|
yField: 'value',
|
|
columnStyle: {
|
|
radius: [20, 20, 0, 0],
|
|
},
|
|
xAxis: {
|
|
label: {
|
|
autoHide: true,
|
|
style: {
|
|
fill: '#fff', // 文字颜色：红色
|
|
}
|
|
},
|
|
},
|
|
yAxis: {
|
|
label: {
|
|
visible: true,
|
|
formatter: (v) => v,
|
|
style: {
|
|
fill: '#fff',
|
|
},
|
|
},
|
|
},
|
|
interactions: [
|
|
{
|
|
type: 'scrollbar',
|
|
},
|
|
],
|
|
});
|
|
chart.render();
|
|
|
|
})
|
|
},
|
|
getComprehensiveData() {
|
|
$.get('/platform/datav/proposal/comprehensiveData', {meetingId: this.meetingId}).then(res => {
|
|
this.comprehensiveData = res.data
|
|
})
|
|
},
|
|
getProposalNames() {
|
|
$.get('/platform/datav/proposal/proposalNames', {meetingId: this.meetingId}).then(res => {
|
|
this.proposalNames = res.data
|
|
this.scrollBoardConfig = {
|
|
header: ['提案名称'],
|
|
data: res.data,
|
|
index: true,
|
|
columnWidth: [50],
|
|
align: ['center'],
|
|
waitTime: 2000
|
|
}
|
|
})
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
async created() {
|
|
this.renderProposalTypeCount()
|
|
this.renderProposalSatisfied()
|
|
this.renderProposalCaseRate()
|
|
this.renderProposalDelegationCount()
|
|
this.renderProposalUnderTakeCount()
|
|
this.getComprehensiveData()
|
|
this.getProposalNames()
|
|
|
|
/*************** 关系图 **************/
|
|
//初始化echarts实例
|
|
const relationChart = echarts.init(document.getElementById("relationChart"));
|
|
const relationOpt = {
|
|
animationDurationUpdate: 1500,
|
|
animationEasingUpdate: 'quinticInOut',
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
textStyle: {
|
|
fontSize: 12
|
|
}
|
|
}
|
|
},
|
|
series: [{
|
|
type: 'graph',
|
|
symbolSize: 45,
|
|
focusNodeAdjacency: true,
|
|
roam: true,
|
|
layout: 'force',
|
|
force: {
|
|
repulsion: 320 //斥力因子，值越大，斥力越大
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
textStyle: {
|
|
fontSize: 12
|
|
},
|
|
}
|
|
},
|
|
edgeSymbolSize: [4, 50],
|
|
edgeLabel: {
|
|
normal: {
|
|
show: true,
|
|
textStyle: {
|
|
fontSize: 10
|
|
},
|
|
formatter: "{c}"
|
|
}
|
|
},
|
|
categories: [{
|
|
name: '全栈',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#f2637b'
|
|
}
|
|
}
|
|
}, {
|
|
name: '前端',
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#eaa674",
|
|
}
|
|
}
|
|
}, {
|
|
name: '移动端',
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#3aa1ff",
|
|
}
|
|
}
|
|
}, {
|
|
name: '服务端',
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#4ecb73",
|
|
}
|
|
}
|
|
}],
|
|
data: [{
|
|
name: '全栈',
|
|
category: 0,
|
|
draggable: true
|
|
}, {
|
|
name: '前端',
|
|
category: 1,
|
|
draggable: true
|
|
}, {
|
|
name: '移动端',
|
|
category: 2,
|
|
draggable: true
|
|
}, {
|
|
name: '服务端',
|
|
category: 3,
|
|
draggable: true
|
|
}, {
|
|
name: 'HTML',
|
|
category: 1,
|
|
draggable: true,
|
|
}, {
|
|
name: 'CSS',
|
|
category: 1,
|
|
draggable: true,
|
|
}, {
|
|
name: 'JavaScript',
|
|
category: 1,
|
|
draggable: true,
|
|
}, {
|
|
name: 'TypeScript',
|
|
category: 1,
|
|
draggable: true,
|
|
}, {
|
|
name: 'Java',
|
|
category: 3,
|
|
draggable: true,
|
|
}, {
|
|
name: 'PHP',
|
|
category: 3,
|
|
draggable: true,
|
|
}, {
|
|
name: 'Python',
|
|
category: 3,
|
|
draggable: true,
|
|
}, {
|
|
name: 'Andriod',
|
|
category: 2,
|
|
draggable: true,
|
|
}, {
|
|
name: 'Object-C',
|
|
category: 2,
|
|
draggable: true,
|
|
}, {
|
|
name: 'Swift',
|
|
category: 2,
|
|
draggable: true,
|
|
}],
|
|
links: [{
|
|
source: 0,
|
|
target: 1,
|
|
value: ''
|
|
}, {
|
|
source: 0,
|
|
target: 2,
|
|
value: ''
|
|
}, {
|
|
source: 0,
|
|
target: 3,
|
|
value: ''
|
|
}, {
|
|
source: 1,
|
|
target: 4,
|
|
value: ''
|
|
}, {
|
|
source: 1,
|
|
target: 5,
|
|
value: ''
|
|
}, {
|
|
source: 1,
|
|
target: 6,
|
|
value: ''
|
|
}, {
|
|
source: 1,
|
|
target: 7,
|
|
value: ''
|
|
}, {
|
|
source: 6,
|
|
target: 7,
|
|
value: '超集'
|
|
}, {
|
|
source: 3,
|
|
target: 8,
|
|
value: ''
|
|
}, {
|
|
source: 3,
|
|
target: 9,
|
|
value: ''
|
|
}, {
|
|
source: 3,
|
|
target: 10,
|
|
value: ''
|
|
}, {
|
|
source: 9,
|
|
target: 10,
|
|
value: '脚本'
|
|
}, {
|
|
source: 2,
|
|
target: 11,
|
|
value: ''
|
|
}, {
|
|
source: 2,
|
|
target: 12,
|
|
value: ''
|
|
}, {
|
|
source: 2,
|
|
target: 13,
|
|
value: ''
|
|
}, {
|
|
source: 12,
|
|
target: 13,
|
|
value: 'iOS'
|
|
}],
|
|
lineStyle: {
|
|
normal: {
|
|
opacity: 0.9,
|
|
width: 1,
|
|
curveness: 0
|
|
}
|
|
}
|
|
}]
|
|
};
|
|
relationChart.setOption(relationOpt);
|
|
|
|
}
|
|
})
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html> |