调整页面
This commit is contained in:
parent
7aacecfe6c
commit
d0ead1dc82
|
@ -3,7 +3,7 @@
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
background-image: url("../img/center/54bg.png");
|
background-image: url("../img/center/54bg.png");
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 100%;
|
background-size: 120%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -306,24 +306,24 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 60vh;
|
height: 60vh;
|
||||||
}
|
}
|
||||||
.main_wrap .main_footer_center{
|
.main_footer_center{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 28vh;
|
height: 28vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
.main_wrap .main_footer_center .center_footer_item{
|
.center_footer_item{
|
||||||
width: 50%;
|
width: 50%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
.main_wrap .main_footer_center .center_footer_item .center_footer_content{
|
.center_footer_content{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 24vh;
|
height: 24vh;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.main_wrap .main_footer_center .center_footer_item .item_inline{
|
.item_inline{
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
|
|
|
@ -37,9 +37,9 @@
|
||||||
<div class="main_footer">
|
<div class="main_footer">
|
||||||
<div class="echarts_title">
|
<div class="echarts_title">
|
||||||
<span></span>
|
<span></span>
|
||||||
<span>部门完成情况</span>
|
<span>重点工作进度</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="echarts_footer_wrap" id="bottom_left_echarts"></div>
|
<div class="center_footer_content" id="center_footer_one"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="main_center">
|
<div class="main_center">
|
||||||
|
@ -96,17 +96,20 @@
|
||||||
<div class="center_footer_item">
|
<div class="center_footer_item">
|
||||||
<div class="echarts_title">
|
<div class="echarts_title">
|
||||||
<span></span>
|
<span></span>
|
||||||
<span>重点工作进度</span>
|
<span>部门完成情况</span>
|
||||||
</div>
|
|
||||||
<div class="center_footer_content" id="center_footer_one">
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="echarts_footer_wrap" id="bottom_left_echarts"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="center_footer_item">
|
<div class="center_footer_item">
|
||||||
<div class="echarts_title">
|
<div class="echarts_title">
|
||||||
<span></span>
|
<span></span>
|
||||||
<span>业务数据统计</span>
|
<span>资源交易数据统计</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="center_footer_content" id="center_footer_two">
|
<div style="margin: 2% 0 2% 5%;color: #fff;font-size: 12px">
|
||||||
|
<span class="trade_all_num">全年累计交易数:0</span>
|
||||||
|
<span class="trade_all_money">全年累计交易额:0</span>
|
||||||
|
</div>
|
||||||
|
<div class="center_footer_content" style="height: 20vh" id="center_footer_two">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -142,7 +145,6 @@
|
||||||
<th:block th:include="include :: footer" />
|
<th:block th:include="include :: footer" />
|
||||||
<script type="text/javascript" th:inline="javascript">
|
<script type="text/javascript" th:inline="javascript">
|
||||||
let _peopleData = [];
|
let _peopleData = [];
|
||||||
let _deptData = [];
|
|
||||||
|
|
||||||
var ctx = [[@{/}]];
|
var ctx = [[@{/}]];
|
||||||
var prefix = ctx + "base/affairs";
|
var prefix = ctx + "base/affairs";
|
||||||
|
@ -361,6 +363,9 @@
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '',
|
name: '',
|
||||||
|
axisLabel:{
|
||||||
|
color:'#fff'
|
||||||
|
}
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
|
@ -702,27 +707,71 @@
|
||||||
|
|
||||||
//加载指标汇总数据
|
//加载指标汇总数据
|
||||||
function loadDepData(){
|
function loadDepData(){
|
||||||
_deptData = [];
|
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url:'/base/affairs/labelTotal',
|
url:'/base/index/tradeEcharts',
|
||||||
type:'post',
|
type:'post',
|
||||||
dataType:'json',
|
dataType:'json',
|
||||||
success(res){
|
success(res){
|
||||||
let _data = res.data;
|
let _data = res.data;
|
||||||
let _strHtml = "";
|
let _yData = [],_sData1 = [],_sData2 = [];
|
||||||
_deptData = res.data;
|
$('.trade_all_num').text('全年累计交易数:'+_data.yearCount);
|
||||||
_data.forEach(item => {
|
$('.trade_all_money').text('全年累计交易额:'+_data.yearMoney.toFixed(2));
|
||||||
_strHtml += '<div class="item_inline">' +
|
_data.list.forEach(item => {
|
||||||
'<p>'+item.type+':'+item.shotName+'</p>' +
|
_yData.push(item.month);
|
||||||
'<p>目前完成度:'+item.percent+'%</p>' +
|
_sData1.push(item.count);
|
||||||
'</div>';
|
_sData2.push(item.trade.toFixed(2))
|
||||||
});
|
})
|
||||||
$('#center_footer_two').append(_strHtml);
|
let chart = echarts.init(document.getElementById('center_footer_two'));
|
||||||
if(_deptData.length > 5){
|
let option = {
|
||||||
setInterval(function () {
|
color:['#02abe0','#05f3b4'],
|
||||||
setTimeout(autoScroll("#center_footer_two"),0)
|
tooltip: {
|
||||||
},1000)
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
bottom:'bottom',
|
||||||
|
textStyle: {
|
||||||
|
color: "#ffffff"
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: "5%",
|
||||||
|
left: '5%',
|
||||||
|
right: '5%',
|
||||||
|
bottom: '15%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'value',
|
||||||
|
boundaryGap: [0, 0.01],
|
||||||
|
axisLabel:{
|
||||||
|
color:'#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: _yData,
|
||||||
|
axisLabel:{
|
||||||
|
color:'#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '交易数',
|
||||||
|
type: 'bar',
|
||||||
|
data: _sData1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '交易额',
|
||||||
|
type: 'bar',
|
||||||
|
data: _sData2
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
// 使用刚指定的配置项和数据显示图表。
|
||||||
|
chart.setOption(option);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue