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