<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>大数据综合展示</title>
<link rel="stylesheet" type="text/css" href="static/big/css/app.css" />
<link rel="stylesheet" type="text/css" href="static/big/css/power-float/common.css" />
<link rel="stylesheet" type="text/css" href="static/big/css/power-float/powerFloat.css" />
</head>
<body>
<header id="header">
<h3 class="header-title">西安建工资管集团大数据综合展示</h3>
<div class="header-info header-info-l">数据来源：西安建工 & 资管集团</div>
<div class="header-info header-info-r">数据日期：<span id="nowDate"></span></div>
</header>
<footer id="footer"></footer>
<div id="container">
<div id="flexCon">
<div class="flex-row">
<div class="flex-cell flex-cell-c" style="padding-right:0;">
<div class="chart-wrapper">
<h3 class="chart-title">年度经营数据(万元)</h3>
<div class="chart-div chart-done">
<table class="data-t">
<tr>
<th><img onclick="dataClick(1)" src="static/big/img/icon-03.png" style="cursor: pointer"/></th>
<td>
<p><span onclick="dataClick(1)" id="financeYearTask" style="cursor: pointer">0</span></p>
<p>年度利润任务</p>
</td>
<th><img onclick="dataClick(1)" src="static/big/img/11.png" style="cursor: pointer" /></th>
<td>
<p><span onclick="dataClick(1)" id="financeYearRatio" style="cursor: pointer">0</span></p>
<p>年度利润完成率</p>
</td>
</tr>
<tr>
<th><img onclick="dataClick(2)" src="static/big/img/icon-03.png" style="cursor: pointer"/></th>
<td>
<p><span onclick="dataClick(2)" id="financingYearTask" style="cursor: pointer">0</span></p>
<p>年度融资任务</p>
</td>
<th><img onclick="dataClick(2)" src="static/big/img/11.png" style="cursor: pointer" /></th>
<td>
<p><span onclick="dataClick(2)" id="financingYearRatio" style="cursor: pointer">0</span></p>
<p>年度融资完成率</p>
</td>
</tr>
<tr>
<th><img onclick="dataClick(3)" src="static/big/img/icon-03.png" style="cursor: pointer"/></th>
<td>
<p><span onclick="dataClick(3)" id="investYearTask" style="cursor: pointer">0</span></p>
<p>年度投资任务</p>
</td>
<th><img onclick="dataClick(3)" src="static/big/img/11.png" style="cursor: pointer" /></th>
<td>
<p><span onclick="dataClick(3)" id="investYearRatio" style="cursor: pointer">0</span></p>
<p>年度投资完成率</p>
</td>
</tr>
<tr>
<th><img onclick="dataClick(4)" style="cursor: pointer" src="static/big/img/icon-03.png" /></th>
<td>
<p><span onclick="dataClick(4)" style="cursor: pointer" id="liquidateYearTask">0</span></p>
<p>年度清收任务</p>
</td>
<th><img onclick="dataClick(4)" style="cursor: pointer" src="static/big/img/11.png" /></th>
<td>
<p><span onclick="dataClick(4)" style="cursor: pointer" id="liquidateYearRatio">0</span></p>
<p>年度清收完成率</p>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="flex-cell flex-cell-c" style="padding-right:0;">
<div class="chart-wrapper">
<h3 class="chart-title">季度经营数据(万元)</h3>
<div class="chart-div chart-done">
<table class="data-t">
<tr>
<th><img onclick="dataClick(1)" style="cursor: pointer" src="static/big/img/icon-03.png" /></th>
<td>
<p><span onclick="dataClick(1)" style="cursor: pointer" id="financeQuarterTask">0</span></p>
<p>季度利润累计任务</p>
</td>
<th><img onclick="dataClick(1)" style="cursor: pointer" src="static/big/img/11.png" /></th>
<td>
<p><span onclick="dataClick(1)" style="cursor: pointer" id="financeQuarterRatio">0</span></p>
<p>季度利润累计完成率</p>
</td>
</tr>
<tr>
<th><img onclick="dataClick(2)" style="cursor: pointer" src="static/big/img/icon-03.png" /></th>
<td>
<p><span onclick="dataClick(2)" style="cursor: pointer" id="financingQuarterTask">0</span></p>
<p>季度融资累计任务</p>
</td>
<th><img onclick="dataClick(2)" style="cursor: pointer" src="static/big/img/11.png" /></th>
<td>
<p><span onclick="dataClick(2)" style="cursor: pointer" id="financingQuarterRatio">0</span></p>
<p>季度融资累计完成率</p>
</td>
</tr>
<tr>
<th><img onclick="dataClick(3)" style="cursor: pointer" src="static/big/img/icon-03.png" /></th>
<td>
<p><span onclick="dataClick(3)" style="cursor: pointer" id="investQuarterTask">0</span></p>
<p>季度投资累计任务</p>
</td>
<th><img onclick="dataClick(3)" style="cursor: pointer" src="static/big/img/11.png" /></th>
<td>
<p><span onclick="dataClick(3)" style="cursor: pointer" id="investQuarterRatio">0</span></p>
<p>季度投资累计完成率</p>
</td>
</tr>
<tr>
<th><img onclick="dataClick(4)" style="cursor: pointer" src="static/big/img/icon-03.png" /></th>
<td>
<p><span onclick="dataClick(4)" style="cursor: pointer" id="liquidateQuarterTask">0</span></p>
<p>季度清收累计任务</p>
</td>
<th><img onclick="dataClick(4)" style="cursor: pointer" src="static/big/img/11.png" /></th>
<td>
<p><span onclick="dataClick(4)" style="cursor: pointer" id="liquidateQuarterRatio">0</span></p>
<p>季度清收累计完成率</p>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="flex-cell flex-cell-c" style="padding-right:0;">
<div class="chart-wrapper">
<h3 class="chart-title">月度经营数据(万元)</h3>
<div class="chart-div chart-done">
<table class="data-t">
<tr>
<th><img onclick="dataClick(1)" style="cursor: pointer" src="static/big/img/icon-03.png" /></th>
<td>
<p><span onclick="dataClick(1)" style="cursor: pointer" id="financeMonthTask">0</span></p>
<p>月度利润累计任务</p>
</td>
<th><img onclick="dataClick(1)" style="cursor: pointer" src="static/big/img/11.png" /></th>
<td>
<p><span onclick="dataClick(1)" style="cursor: pointer" id="financeMonthRatio">0</span></p>
<p>月度利润累计完成率</p>
</td>
</tr>
<tr>
<th><img onclick="dataClick(2)" style="cursor: pointer" src="static/big/img/icon-03.png" /></th>
<td>
<p><span onclick="dataClick(2)" style="cursor: pointer" id="financingMonthTask">0</span></p>
<p>月度融资累计任务</p>
</td>
<th><img onclick="dataClick(2)" style="cursor: pointer" src="static/big/img/11.png" /></th>
<td>
<p><span onclick="dataClick(2)" style="cursor: pointer" id="financingMonthRatio">0</span></p>
<p>月度融资累计完成率</p>
</td>
</tr>
<tr>
<th><img onclick="dataClick(3)" style="cursor: pointer" src="static/big/img/icon-03.png" /></th>
<td>
<p><span onclick="dataClick(3)" style="cursor: pointer" id="investMonthTask">0</span></p>
<p>月度投资累计任务</p>
</td>
<th><img onclick="dataClick(3)" style="cursor: pointer" src="static/big/img/11.png" /></th>
<td>
<p><span onclick="dataClick(3)" style="cursor: pointer" id="investMonthRatio">0</span></p>
<p>月度投资累计完成率</p>
</td>
</tr>
<tr>
<th><img onclick="dataClick(4)" style="cursor: pointer" src="static/big/img/icon-03.png" /></th>
<td>
<p><span onclick="dataClick(4)" style="cursor: pointer" id="liquidateMonthTask">0</span></p>
<p>月度清收累计任务</p>
</td>
<th><img onclick="dataClick(4)" style="cursor: pointer" src="static/big/img/11.png" /></th>
<td>
<p><span onclick="dataClick(4)" style="cursor: pointer" id="liquidateMonthRatio">0</span></p>
<p>月度清收累计完成率</p>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="flex-cell flex-cell-c" style="padding-right:0;">
<div class="chart-wrapper">
<h3 class="chart-title">财务数据(万元)</h3>
<div class="chart-div chart-done">
<table class="data-t">
<tr>
<th><img onclick="dataClick(1)" style="cursor: pointer" src="static/big/img/icon-03.png" /></th>
<td>
<p><span onclick="dataClick(1)" style="cursor: pointer" id="accountZjc">0</span></p>
<p>资金池总额</p>
</td>
<th><img onclick="dataClick(1)" style="cursor: pointer" src="static/big/img/icon-03.png" /></th>
<td>
<p><span onclick="dataClick(1)" style="cursor: pointer" id="accountFzjc">0</span></p>
<p>非资金池总额</p>
</td>
</tr>
<tr>
<th><img onclick="dataClick(1)" style="cursor: pointer" src="static/big/img/icon-03.png" /></th>
<td id="planInTdShow" rel="planInTdShowBox">
<p><span onclick="dataClick(1)" style="cursor: pointer" id="planIn">0</span></p>
<p>本月计划收入</p>
</td>
<th><img onclick="dataClick(1)" style="cursor: pointer" src="static/big/img/icon-03.png" /></th>
<td id="realInTdShow" rel="realInTdShowBox">
<p><span onclick="dataClick(1)" style="cursor: pointer" id="realIn">0</span></p>
<p>本月实际收入</p>
</td>
</tr>
<tr>
<th><img onclick="dataClick(1)" style="cursor: pointer" src="static/big/img/icon-03.png" /></th>
<td id="planOutTdShow" rel="planOutTdShowBox">
<p><span onclick="dataClick(1)" style="cursor: pointer" id="planOut">0</span></p>
<p>本月计划支出</p>
</td>
<th><img onclick="dataClick(1)" style="cursor: pointer" src="static/big/img/icon-03.png" /></th>
<td id="realOutTdShow" rel="realOutTdShowBox">
<p><span onclick="dataClick(1)" style="cursor: pointer" id="realOut">0</span></p>
<p>本月实际支出</p>
</td>
</tr>
<tr>
<th><img onclick="dataClick(2)" style="cursor: pointer" src="static/big/img/icon-03.png" /></th>
<td>
<p><span onclick="dataClick(2)" style="cursor: pointer" id="rongzidaifu">0</span></p>
<p>本月融资待还</p>
</td>
<th><img onclick="dataClick(2)" style="cursor: pointer" src="static/big/img/icon-03.png" /></th>
<td>
<p><span onclick="dataClick(2)" style="cursor: pointer" id="rongziyifu">0</span></p>
<p>本月融资已还</p>
</td>
</tr>
</table>
</div>
</div>
</div>
<!--<div class="flex-cell flex-cell-r" style="padding-left:0;">
<div class="chart-wrapper">
<h3 class="chart-title" style="display: inline-block;cursor: pointer" onclick="dataClick(7)" >融资月度汇总（万元）</h3>
<!–<h3 class="chart-title" id="qs-type" style="display: inline-block;float: right;margin-right: 35px">展期项目</h3>–>
<div class="chart-div" id="qsChart">
<div class="chart-loader"><div class="loader"></div></div>
</div>
</div>
</div>-->
</div>
<div class="flex-row">
<!-- <div class="flex-cell flex-cell-lc" style="padding-bottom:0;">
<div class="chart-wrapper">
<h3 class="chart-title" style="display: inline-block;cursor: pointer" onclick="dataClick(4)">利润月度汇总（万元）</h3>
<!–<h3 class="chart-title" id="project-type" style="display: inline-block;float: right;margin-right: 35px">融资项目</h3>–>
<div class="chart-div" id="trendChart">
<div class="chart-loader"><div class="loader"></div></div>
</div>
</div>
</div>-->
<div class="flex-cell flex-cell-r" style="padding-bottom:0;">
<div class="chart-wrapper">
<h3 class="chart-title" onclick="dataClick(1)" style="display: inline-block;cursor: pointer">利润月度汇总（万元）</h3>
<div class="chart-div" id="financeChart">
<div class="chart-loader"><div class="loader"></div></div>
</div>
</div>
</div>
<div class="flex-cell flex-cell-r" style="padding-bottom:0;">
<div class="chart-wrapper">
<h3 class="chart-title" onclick="dataClick(2)" style="display: inline-block;cursor: pointer">融资月度汇总（万元）</h3>
<div class="chart-div" id="financingChart">
<div class="chart-loader"><div class="loader"></div></div>
</div>
</div>
</div>
<div class="flex-cell flex-cell-r" style="padding-bottom:0;">
<div class="chart-wrapper">
<h3 class="chart-title" onclick="dataClick(3)" style="display: inline-block;cursor: pointer">投资月度汇总（万元）</h3>
<div class="chart-div" id="investChart">
<div class="chart-loader"><div class="loader"></div></div>
</div>
</div>
</div>
<div class="flex-cell flex-cell-r" style="padding-bottom:0;">
<div class="chart-wrapper">
<h3 class="chart-title" onclick="dataClick(4)" style="display: inline-block;cursor: pointer">清收月度汇总（万元）</h3>
<div class="chart-div" id="liquidateChart">
<div class="chart-loader"><div class="loader"></div></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--rgba(0,0,0,0.6)-->
<div id="planInTdShowBox" class="shadow target_box dn background-show-box">
<div class="target_list">
<p style="padding-top: 15px;padding-left: 15px;padding-right: 15px">计划经营回款: <span id="planBackAmount">0</span></p>
<p style="padding: 15px;"> 计划融资款: <span id="planFinancingAmount">0</span></p>
</div>
</div>
<div id="realInTdShowBox" class="shadow target_box dn background-show-box">
<div class="target_list">
<p style="padding-top: 15px;padding-left: 15px;padding-right: 15px">实际已回款: <span id="realBackAmount">0</span></p>
<p style="padding-top: 15px;padding-left: 15px;">实际融资款: <span id="realFinancingAmount">0</span></p>
</div>
</div>
<div id="planOutTdShowBox" class="shadow target_box dn background-show-box">
<div class="target_list">
<p style="padding-top: 15px;padding-left: 15px;padding-right: 15px">项目计划支出: <span id="planExpendAmount">0</span></p>
<p style="padding: 15px;"> 需还贷: <span id="planRepayLoan">0</span></p>
</div>
</div>
<div id="realOutTdShowBox" class="shadow target_box dn background-show-box">
<div class="target_list">
<p style="padding-top: 15px;padding-left: 15px;padding-right: 15px">项目实际支出: <span id="realExpendAmount">0</span></p>
<p style="padding: 15px;"> 实际还贷: <span id="realRepayLoan">0</span></p>
</div>
</div>
<script type="text/javascript" src="static/big/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="static/big/js/countUp.min.js"></script>
<script type="text/javascript" src="static/big/js/echarts.min.js"></script>
<script type="text/javascript" src="static/big/js/echarts-map-china.js"></script>
<script type="text/javascript" src="static/big/js/echarts-theme-shine.js"></script>
<script type="text/javascript" src="static/common/base.js"></script>
<script type="text/javascript" src="static/big/js/power-float/jquery-powerFloat-min.js"></script>
<script type="text/javascript">
const ACCESS_TOKEN = 'Access-Token'
const VUE_STORE_BASE = 'pro__'
$(function() {
//获取当天日期
(function() {
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth()+1;
const day = now.getDate();
$("#nowDate").html(year+"年"+month+"月"+day+"日");
$("#planInTdShow").powerFloat();
$("#realInTdShow").powerFloat();
$("#planOutTdShow").powerFloat();
$("#realOutTdShow").powerFloat();
})();
// 经营数据
countData()
const financingChart = financingProject()
const investChart = investProject()
const financeChart = financeProject()
const liquidateChart = liquidateProject()
//浏览器窗口大小变化时，重置报表大小
$(window).resize(function() {
financingChart.resize();
investChart.resize();
financeChart.resize();
liquidateChart.resize();
});
});
/**
* 获取vue token
* @returns {string}
*/
function getToken(){
const storeTokenJson = JSON.parse(localStorage.getItem(VUE_STORE_BASE+ACCESS_TOKEN))
return 'Bearer ' + storeTokenJson.value
}
function getHeader(){
return {
Authorization: getToken(),
// accept: "application/json; charset=utf-8",
// "Access-Control-Allow-Origin": "http://localhost:5000",
// "Access-Control-Allow-Headers":"Origin, X-Requested-With, Content-Type, Accept"
}
}
function ajaxError(xhr){
if (xhr.status === 401) {
// 跳转登录页面
window.parent.location.href = '/user/login'
} else{
// 调用外部的error
error && error(xhr,textStatus,errorThrown);
}
}
function dataClick (type) {
if(type === 1){
jumpUrl('/dashboard/analysisFinance')
}
if(type === 2){
jumpUrl('/dashboard/analysisFinancing')
// jumpUrl('/finance/daily/profit')
}
if(type === 3){
jumpUrl('/dashboard/analysisInvest')
}
if(type === 4){
jumpUrl('/dashboard/analysisLiquidate')
}
if(type === 5){
jumpUrl('/finance/capital/task')
}
if(type === 6){
jumpUrl('/finance/capital/task')
}
if(type === 7){
jumpUrl('/financing/yearly/task')
}
if(type === 8){
jumpUrl('/financing/loan/ledger')
}
if(type === 9){
jumpUrl('/invest/yearly/task')
}
if(type === 10){
jumpUrl('/invest/project/manager')
}
if(type === 11){
jumpUrl('/invest/loan/liquidate')
}
if(type === 12){
jumpUrl('/invest/loan/liquidate')
}
}
function jumpUrl (url) {
window.parent.location.href = url
}
/**
* 经营数据
*/
function countData(){
$.ajax({
type: "get",
url: "/api/big/screens/count-data",
headers: getHeader(),
success: function (response) {
const data = response.data
const code = response.code
if(code === 0){
rollNum("accountZjc", 0,divTenThousand(data.companyAccountSumVO.zjc), 2); // 账户总额
//$('#zjc-amount').text('账户总额（资金池:'+divTenThousand(data.companyAccountSumVO.zjc)+'万元）'); // 资金池金额
rollNum("accountFzjc", 0,divTenThousand(data.companyAccountSumVO.fzjc), 2); // 资金池金额
rollNum("planIn", 0, divTenThousand(data.financeCapitalMonthTaskTotalVO.planIncomeAmountSum), 2); // 本月计划收入
rollNum("realIn", 0, divTenThousand(data.financeCapitalMonthTaskTotalVO.realIncomeAmountSum), 2); // 本月实际收入
rollNum("planOut", 0, divTenThousand(data.financeCapitalMonthTaskTotalVO.planExpendAmountSum), 2); // 本月计划支出
rollNum("realOut", 0, divTenThousand(data.financeCapitalMonthTaskTotalVO.realExpendAmountSum), 2); // 本月实际支出
rollNum("rongzidaifu", 0, divTenThousand(data.financingRepaySum.repayPrincipal), 2);// 本月计划还付金额
rollNum("rongziyifu", 0, divTenThousand(data.financingRepaySum.repaidPrincipal), 2);// 本月融资已付
// rollNum("listedCompany", 0, divTenThousand(data.profitTaskYearly.newAmount),2);// 年度利润
// rollNum("listedSecurity", 0, divTenThousand(data.profitTaskYearly.amount),2);// 累计完成利润
$('#planBackAmount').text(divScale(divTenThousand(data.financeCapitalMonthTaskTotalVO.planBackAmount))); // 本月实际支出
$('#planFinancingAmount').text(divScale(divTenThousand(data.financeCapitalMonthTaskTotalVO.planFinancingAmount))); // 本月实际支出
$('#realBackAmount').text(divScale(divTenThousand(data.financeCapitalMonthTaskTotalVO.realBackAmount))); // 本月实际支出
$('#realFinancingAmount').text(divScale(divTenThousand(data.financeCapitalMonthTaskTotalVO.realFinancingAmount))); // 本月实际支出
$('#planExpendAmount').text(divScale(divTenThousand(data.financeCapitalMonthTaskTotalVO.planExpendAmount))); // 本月实际支出
$('#planRepayLoan').text(divScale(divTenThousand(data.financeCapitalMonthTaskTotalVO.planRepayLoan))); // 本月实际支出
$('#realExpendAmount').text(divScale(divTenThousand(data.financeCapitalMonthTaskTotalVO.realExpendAmount))); // 本月实际支出
$('#realRepayLoan').text(divScale(divTenThousand(data.financeCapitalMonthTaskTotalVO.realRepayLoan))); // 本月实际支出
//$('#yhf-amount').text('本月融资待付（已付：'+divTenThousand(data.financingRepaySum.repaidPrincipal)+'万元）'); // 本月计划还付金额
}
},
error: function (xhr,textStatus,errorThrown) {
ajaxError(xhr);
}
});
}
// 利润
function financeProject() {
const myDate=new Date()
const trendChart = echarts.init(document.getElementById("financeChart"), "shine");
const trendChartOpt = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "none"
}
},
legend: {
left: "center",
bottom: 3,
itemWidth: 15,
itemHeight: 10,
textStyle: {
fontSize: 12,
color: "#b0c2f9"
},
data: ["累计新增任务", "累计完成", "累计完成比例(%)"]
},
grid: {
top: 40,
bottom: 50,
left: 100,
right: 60
},
xAxis: {
type: "category",
axisLine: {
lineStyle: { color: "#b0c2f9" }
},
axisTick: { show: false },
axisLabel: {
fontSize: 12,
color: "#b0c2f9"
}
},
yAxis: [{
name: "金额",
type: "value",
splitNumber: 5,
axisLine: {
lineStyle: { color: "#b0c2f9" }
},
splitLine: { show: false },
axisTick: { color: "#b0c2f9" },
axisLabel: {
fontSize: 12,
color: "#b0c2f9",
formatter: function(value, index) {
return parseInt(value) + "万";
}
}
}, {
name: "累计完成比例(%)",
type: "value",
// splitNumber: 5,
// maxInterval: 10000,
// minInterval: 0,
// interval: 5,
axisLine: {
lineStyle: { color: "#b0c2f9" }
},
splitLine: { show: false },
axisTick: { color: "#b0c2f9" },
axisLabel: {
fontSize: 12,
color: "#b0c2f9",
formatter: function(value, index) {
return value + "%";
}
}
}],
visualMap: {
show: false,
seriesIndex: 2,
dimension: 0,
pieces: [{
lte: 9,
color: "rgba(176, 58, 91, 1)"
}, {
gt: 9,
lte: 11,
color: "rgba(176, 58, 91, 0.5)"
}]
},
series: [{
name: "累计新增任务",
type: "bar",
symbol: 'path://d="M150 50 L130 130 L170 130 Z"',
barCategoryGap: "40%",
itemStyle: {
color:"rgba(119, 96, 246, 1)"
},
}, {
name: "累计完成",
type: "bar",
symbol: 'path://d="M150 50 L130 130 L170 130 Z"',
barCategoryGap: "40%",
itemStyle: {
color:"rgb(230, 182, 0)"
},
},{
name: "累计完成比例(%)",
type: "line",
yAxisIndex: 1
}]
};
trendChart.setOption(trendChartOpt);
const params = {
type: 3,
startYear: myDate.getFullYear(),
endYear: myDate.getFullYear()
}
$.ajax({
type: "get",
url: "/api/task/yearly_tasks/finance/profits?type="+
params.type+"&startYear="+params.startYear+"&endYear="+params.endYear,
headers: getHeader(),
success: function (response) {
const data = response.data
const code = response.code
if(code === 0){
setCountData(data,'finance')
const xData = [];
const yData2 = [];
const yDataAdd = [];
const yData3 = [];
for (let i = 0; i < data.length; i++) {
let item = data[i];
xData.push(item.targetName+"月");
// 累计新增任务
yData2.push(divTenThousand(item.newAmountSum));
// 累计完成
yDataAdd.push(divTenThousand(item.amountSum));
// 完成率
yData3.push(item.sumRatio);
}
trendChart.setOption({
xAxis: {
data: xData,
},
series: [{
name: "累计新增任务",
data: yData2
}, {
name: "累计完成",
data: yDataAdd
}, {
name: "累计完成比例(%)",
data: yData3
}]
});
}
},
error: function (xhr,textStatus,errorThrown) {
ajaxError(xhr);
}
});
return trendChart;
}
/**
* 存放任务经营指标
* @param financeYearData ：
* @param yearId ：
* @param quarterId ：
* @param monthId ：
*/
function setCountData (financeYearData,typeId) {
let dataMap = {};
for (let i = 0; i < financeYearData.length; i++) {
let data = financeYearData[i];
dataMap[data.targetName] = data;
}
const myDate=new Date();
// 当前月度
const month = myDate.getMonth()+1;
// 当前季度
// myDate.getMonth(); //获取当前月份(0-11,0代表1月)
// const currQuarter = Math.floor( ( month % 3 === 0 ? ( month / 3 ) : ( month / 3 + 1 ) ) );
// 获取年度
let yearData = dataMap[12];
rollNum(typeId+'YearTask', 0, divTenThousand(yearData.newAmountSum), 2);
rollNum(typeId+'YearRatio', 0, yearData.sumRatio, 2);
// 获取季度
let quarterData = null;
if(month<=3){
quarterData = dataMap[3];
}else if(month<=6){
quarterData = dataMap[6];
}else if(month<=9){
quarterData = dataMap[9];
}else {
quarterData = dataMap[12];
}
rollNum(typeId+'QuarterTask', 0, divTenThousand(quarterData.newAmountSum), 2);
rollNum(typeId+'QuarterRatio', 0, quarterData.sumRatio, 2);
// 获取月度
let monthData = dataMap[month];
rollNum(typeId+'MonthTask', 0, divTenThousand(monthData.newAmountSum), 2);
rollNum(typeId+'MonthRatio', 0, monthData.sumRatio, 2);
console.log(111, yearData, quarterData, monthData)
}
//项目
function investProject() {
const myDate=new Date()
const trendChart = echarts.init(document.getElementById("investChart"), "shine");
const trendChartOpt = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "none"
}
},
legend: {
left: "center",
bottom: 3,
itemWidth: 15,
itemHeight: 10,
textStyle: {
fontSize: 12,
color: "#b0c2f9"
},
data: ["累计新增任务", "累计完成", "累计完成比例(%)"]
},
grid: {
top: 40,
bottom: 50,
left: 80,
right: 60
},
xAxis: {
type: "category",
axisLine: {
lineStyle: { color: "#b0c2f9" }
},
axisTick: { show: false },
axisLabel: {
fontSize: 12,
color: "#b0c2f9"
}
},
yAxis: [{
name: "金额",
type: "value",
splitNumber: 5,
axisLine: {
lineStyle: { color: "#b0c2f9" }
},
splitLine: { show: false },
axisTick: { color: "#b0c2f9" },
axisLabel: {
fontSize: 12,
color: "#b0c2f9",
formatter: function(value, index) {
return parseInt(value) + "万";
}
}
}, {
name: "累计完成比例(%)",
type: "value",
// splitNumber: 5,
// maxInterval: 10000,
// minInterval: 0,
// interval: 5,
axisLine: {
lineStyle: { color: "#b0c2f9" }
},
splitLine: { show: false },
axisTick: { color: "#b0c2f9" },
axisLabel: {
fontSize: 12,
color: "#b0c2f9",
formatter: function(value, index) {
return value + "%";
}
}
}],
visualMap: {
show: false,
seriesIndex: 2,
dimension: 0,
pieces: [{
lte: 9,
color: "rgba(176, 58, 91, 1)"
}, {
gt: 9,
lte: 11,
color: "rgba(176, 58, 91, 0.5)"
}]
},
series: [{
name: "累计新增任务",
type: "bar",
symbol: 'path://d="M150 50 L130 130 L170 130 Z"',
barCategoryGap: "40%",
itemStyle: {
color:"rgba(119, 96, 246, 1)"
},
}, {
name: "累计完成",
type: "bar",
symbol: 'path://d="M150 50 L130 130 L170 130 Z"',
barCategoryGap: "40%",
itemStyle: {
color:"rgb(230, 182, 0)"
},
},{
name: "累计完成比例(%)",
type: "line",
yAxisIndex: 1
}]
};
trendChart.setOption(trendChartOpt);
const params = {
type: 3,
startYear: myDate.getFullYear(),
endYear: myDate.getFullYear()
}
$.ajax({
type: "get",
url: "/api/task/yearly_tasks/invest/new-amounts?type="+
params.type+"&startYear="+params.startYear+"&endYear="+params.endYear,
headers: getHeader(),
success: function (response) {
const data = response.data
const code = response.code
if(code === 0){
setCountData(data,'invest')
const xData = [];
const yData2 = [];
const yDataAdd = [];
const yData3 = [];
for (let i = 0; i < data.length; i++) {
let item = data[i];
xData.push(item.targetName+"月");
// 累计新增任务
yData2.push(divTenThousand(item.newAmountSum));
// 累计完成
yDataAdd.push(divTenThousand(item.amountSum));
// 完成率
yData3.push(item.sumRatio);
}
trendChart.setOption({
xAxis: {
data: xData,
},
series: [{
name: "累计新增任务",
data: yData2
}, {
name: "累计完成",
data: yDataAdd
}, {
name: "累计完成比例(%)",
data: yData3
}]
});
}
},
error: function (xhr,textStatus,errorThrown) {
ajaxError(xhr);
}
});
return trendChart;
}
//项目
function financingProject() {
const myDate=new Date()
const trendChart = echarts.init(document.getElementById("financingChart"), "shine");
const trendChartOpt = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "none"
}
},
legend: {
left: "center",
bottom: 3,
itemWidth: 15,
itemHeight: 10,
textStyle: {
fontSize: 12,
color: "#b0c2f9"
},
data: ["累计新增任务", "累计完成", "累计完成比例(%)"]
},
grid: {
top: 40,
bottom: 50,
left: 100,
right: 60
},
xAxis: {
type: "category",
axisLine: {
lineStyle: { color: "#b0c2f9" }
},
axisTick: { show: false },
axisLabel: {
fontSize: 12,
color: "#b0c2f9"
}
},
yAxis: [{
name: "金额",
type: "value",
splitNumber: 5,
axisLine: {
lineStyle: { color: "#b0c2f9" }
},
splitLine: { show: false },
axisTick: { color: "#b0c2f9" },
axisLabel: {
fontSize: 12,
color: "#b0c2f9",
formatter: function(value, index) {
return parseInt(value) + "万";
}
}
}, {
name: "累计完成比例(%)",
type: "value",
// splitNumber: 5,
// maxInterval: 10000,
// minInterval: 0,
// interval: 5,
axisLine: {
lineStyle: { color: "#b0c2f9" }
},
splitLine: { show: false },
axisTick: { color: "#b0c2f9" },
axisLabel: {
fontSize: 12,
color: "#b0c2f9",
formatter: function(value, index) {
return value + "%";
}
}
}],
visualMap: {
show: false,
seriesIndex: 2,
dimension: 0,
pieces: [{
lte: 9,
color: "rgba(176, 58, 91, 1)"
}, {
gt: 9,
lte: 11,
color: "rgba(176, 58, 91, 0.5)"
}]
},
series: [{
name: "累计新增任务",
type: "bar",
symbol: 'path://d="M150 50 L130 130 L170 130 Z"',
barCategoryGap: "40%",
itemStyle: {
color:"rgba(119, 96, 246, 1)"
},
}, {
name: "累计完成",
type: "bar",
symbol: 'path://d="M150 50 L130 130 L170 130 Z"',
barCategoryGap: "40%",
itemStyle: {
color:"rgb(230, 182, 0)"
},
},{
name: "累计完成比例(%)",
type: "line",
yAxisIndex: 1
}]
};
trendChart.setOption(trendChartOpt);
const params = {
type: 3,
startYear: myDate.getFullYear(),
endYear: myDate.getFullYear()
}
$.ajax({
type: "get",
url: "/api/task/yearly_tasks/financing/new-amounts?type="+
params.type+"&startYear="+params.startYear+"&endYear="+params.endYear,
headers: getHeader(),
success: function (response) {
const data = response.data
const code = response.code
if(code === 0){
setCountData(data,'financing')
const xData = [];
const yData2 = [];
const yDataAdd = [];
const yData3 = [];
for (let i = 0; i < data.length; i++) {
let item = data[i];
xData.push(item.targetName+"月");
// 累计新增任务
yData2.push(divTenThousand(item.newAmountSum));
// 累计完成
yDataAdd.push(divTenThousand(item.amountSum));
// 完成率
yData3.push(item.sumRatio);
}
trendChart.setOption({
xAxis: {
data: xData,
},
series: [{
name: "累计新增任务",
data: yData2
}, {
name: "累计完成",
data: yDataAdd
}, {
name: "累计完成比例(%)",
data: yData3
}]
});
}
},
error: function (xhr,textStatus,errorThrown) {
ajaxError(xhr);
}
});
return trendChart;
}
//项目
function liquidateProject() {
const myDate=new Date()
const trendChart = echarts.init(document.getElementById("liquidateChart"), "shine");
const trendChartOpt = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "none"
}
},
legend: {
left: "center",
bottom: 3,
itemWidth: 15,
itemHeight: 10,
textStyle: {
fontSize: 12,
color: "#b0c2f9"
},
data: ["累计新增任务", "累计完成", "累计完成比例(%)"]
},
grid: {
top: 40,
bottom: 50,
left: 100,
right: 60
},
xAxis: {
type: "category",
axisLine: {
lineStyle: { color: "#b0c2f9" }
},
axisTick: { show: false },
axisLabel: {
fontSize: 12,
color: "#b0c2f9"
}
},
yAxis: [{
name: "金额",
type: "value",
splitNumber: 5,
axisLine: {
lineStyle: { color: "#b0c2f9" }
},
splitLine: { show: false },
axisTick: { color: "#b0c2f9" },
axisLabel: {
fontSize: 12,
color: "#b0c2f9",
formatter: function(value, index) {
return parseInt(value) + "万";
}
}
}, {
name: "累计完成比例(%)",
type: "value",
// splitNumber: 5,
// maxInterval: 10000,
// minInterval: 0,
// interval: 5,
axisLine: {
lineStyle: { color: "#b0c2f9" }
},
splitLine: { show: false },
axisTick: { color: "#b0c2f9" },
axisLabel: {
fontSize: 12,
color: "#b0c2f9",
formatter: function(value, index) {
return value + "%";
}
}
}],
visualMap: {
show: false,
seriesIndex: 2,
dimension: 0,
pieces: [{
lte: 9,
color: "rgba(176, 58, 91, 1)"
}, {
gt: 9,
lte: 11,
color: "rgba(176, 58, 91, 0.5)"
}]
},
series: [{
name: "累计新增任务",
type: "bar",
symbol: 'path://d="M150 50 L130 130 L170 130 Z"',
barCategoryGap: "40%",
itemStyle: {
color:"rgba(119, 96, 246, 1)"
},
}, {
name: "累计完成",
type: "bar",
symbol: 'path://d="M150 50 L130 130 L170 130 Z"',
barCategoryGap: "40%",
itemStyle: {
color:"rgb(230, 182, 0)"
},
},{
name: "累计完成比例(%)",
type: "line",
yAxisIndex: 1
}]
};
trendChart.setOption(trendChartOpt);
const params = {
type: 3,
startYear: myDate.getFullYear(),
endYear: myDate.getFullYear()
}
$.ajax({
type: "get",
url: "/api/liquidate/tasks/task-analysis?type="+
params.type+"&startYear="+params.startYear+"&endYear="+params.endYear,
headers: getHeader(),
success: function (response) {
const data = response.data
const code = response.code
if(code === 0){
setCountData(data,'liquidate')
const xData = [];
const yData2 = [];
const yDataAdd = [];
const yData3 = [];
for (let i = 0; i < data.length; i++) {
let item = data[i];
xData.push(item.targetName+"月");
// 累计新增任务
yData2.push(divTenThousand(item.newAmountSum));
// 累计完成
yDataAdd.push(divTenThousand(item.amountSum));
// 完成率
yData3.push(item.sumRatio);
}
trendChart.setOption({
xAxis: {
data: xData,
},
series: [{
name: "累计新增任务",
data: yData2
}, {
name: "累计完成",
data: yDataAdd
}, {
name: "累计完成比例(%)",
data: yData3
}]
});
}
},
error: function (xhr,textStatus,errorThrown) {
ajaxError(xhr);
}
});
return trendChart;
}
//数字变化特效
function rollNum(elId, startVal, endVal, decimalNum) {
let n = decimalNum || 0;
let countUp = new CountUp(elId, startVal, endVal, n, 2.5, {
useEasing: true,
useGrouping: true,
separator: ',',
decimal: '.'
});
if(!countUp.error) {
countUp.start();
}else {
console.error(countUp.error);
}
}
// 日期格式转化 dateFormat("YYYY-mm-dd HH:MM", date)
function dateFormat(fmt, date) {
let ret;
const opt = {
"Y+": date.getFullYear().toString(), // 年
"m+": (date.getMonth() + 1).toString(), // 月
"d+": date.getDate().toString(), // 日
"H+": date.getHours().toString(), // 时
"M+": date.getMinutes().toString(), // 分
"S+": date.getSeconds().toString() // 秒
// 有其他格式化字符需求可以继续添加，必须转化成字符串
};
for (let k in opt) {
ret = new RegExp("(" + k + ")").exec(fmt);
if (ret) {
fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
};
};
return fmt;
}
</script>
</body>
</html>