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