949 lines
36 KiB
HTML
949 lines
36 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
||
<head>
|
||
<th:block th:include="include :: header('驾驶舱')" />
|
||
<meta charset="utf-8">
|
||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||
<!--360浏览器优先以webkit内核解析-->
|
||
<title>鄂尔多斯市公共资源交易中心达拉特旗分中心绩效考核系统</title>
|
||
<link href="favicon.ico" rel="shortcut icon">
|
||
<link href="../static/css/bootstrap.min.css" rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
|
||
<link href="../static/css/font-awesome.min.css" rel="stylesheet" th:href="@{/css/font-awesome.min.css}"/>
|
||
<link href="../static/css/style.min.css" rel="stylesheet" th:href="@{/css/style.min.css}"/>
|
||
<link href="../static/css/style.min.css" rel="stylesheet" th:href="@{/css/main_center.css}"/>
|
||
</head>
|
||
<body class="gray-bg">
|
||
<div class="main_wrap">
|
||
<div class="main_left">
|
||
<div class="main_left_item">
|
||
<div class="left_switch_btn">
|
||
<span class="btn_item">党务及意识形态</span>
|
||
<span>|</span>
|
||
<span class="btn_item">党风廉政建设</span>
|
||
</div>
|
||
<div class="echarts_title">
|
||
<span></span>
|
||
<span style="cursor: pointer" onclick="openTab(1)">党务及意识形态</span>
|
||
</div>
|
||
<div class="btn_echarts_wrap" id="top_left_echarts"></div>
|
||
</div>
|
||
<div class="main_left_item">
|
||
<div class="echarts_title">
|
||
<span></span>
|
||
<span style="cursor: pointer" onclick="openTab(2)">党风廉政建设</span>
|
||
</div>
|
||
<div class="echarts_wrap" id="center_left_echarts"></div>
|
||
</div>
|
||
<div class="main_left_item">
|
||
<div class="echarts_title">
|
||
<span></span>
|
||
<span>重点工作进度</span>
|
||
</div>
|
||
<div class="echarts_wrap" id="center_footer_one"></div>
|
||
</div>
|
||
</div>
|
||
<div class="main_center">
|
||
<div class="main_center_item">
|
||
<div class="data1" onclick="openTab(5,'季度考核指标')">
|
||
<span style="font-weight:900;font-size: 18px" >季度考核情况</span>
|
||
<p class="all_num">达标分：0分</p>
|
||
<p class="curr_num">当前分数：0分</p>
|
||
</div>
|
||
<div class="data2" onclick="openTab(5,'党风廉政建设')">
|
||
<span style="font-weight:900;font-size: 18px" >党风廉政建设</span>
|
||
<p class="all_num">达标分：0分</p>
|
||
<p class="curr_num">当前分数：0分</p>
|
||
</div>
|
||
<div class="data3" onclick="openTab(5,'党务及意识形态')">
|
||
<span style="font-weight:900;font-size: 18px" >党务及意识形态</span>
|
||
<p class="all_num">达标分：0分</p>
|
||
<p class="curr_num">当前分数：0分</p>
|
||
</div>
|
||
<div class="data4" onclick="openTab(5,'日常考核指标')">
|
||
<span style="font-weight:900;font-size: 18px" >日常考核情况</span>
|
||
<p class="all_num">达标分：0分</p>
|
||
<p class="curr_num">当前分数：0分</p>
|
||
</div>
|
||
<canvas class="rain"></canvas>
|
||
<canvas class="dashed"></canvas>
|
||
<div class="sphere">
|
||
<div class="sphere-bg"></div>
|
||
</div>
|
||
<div class="cicle3"></div>
|
||
<div class="cicle4"></div>
|
||
<div class="cicle5"></div>
|
||
<div class="cicle6"></div>
|
||
<div class="cicle7"></div>
|
||
<div class="cicle8">
|
||
<span class="circle_num">0%</span>
|
||
<p>季度考核情况</p>
|
||
</div>
|
||
<div class="cicle9">
|
||
<span class="circle_num">0%</span>
|
||
<p>党风廉政建设</p>
|
||
</div>
|
||
<div class="cicle10">
|
||
<span class="circle_num">0%</span>
|
||
<p>党务及意识形态</p>
|
||
</div>
|
||
<div class="cicle11">
|
||
<span class="circle_num">0%</span>
|
||
<p>日常考核情况</p>
|
||
</div>
|
||
</div>
|
||
<div class="main_footer">
|
||
<div class="main_footer_center">
|
||
<div class="center_footer_item" style="width: 35%">
|
||
<div class="echarts_title">
|
||
<span></span>
|
||
<span>部门完成情况</span>
|
||
</div>
|
||
<div class="echarts_footer_wrap" id="bottom_left_echarts"></div>
|
||
</div>
|
||
<div class="center_footer_item" style="width: 65%">
|
||
<div class="echarts_title">
|
||
<span></span>
|
||
<span>资源交易数据统计</span>
|
||
</div>
|
||
<div style="margin: 1% 0;color: #fff;font-size: 12px;width: 100%;text-align: center">
|
||
<span class="trade_month_num">当月累计交易数：0</span>
|
||
<span class="trade_month_money" style="margin-left: 20px">当月累计交易额：0万元</span>
|
||
</div>
|
||
<div style="margin: 1% 0;color: #fff;font-size: 12px;width: 100%;text-align: center">
|
||
<span class="trade_year_num">全年累计交易数：0</span>
|
||
<span class="trade_year_money" style="margin-left: 20px">全年累计交易额：0万元</span>
|
||
</div>
|
||
<div style="margin: 1% 0;color: #fff;font-size: 12px;width: 100%;text-align: center">
|
||
<span class="trade_all_num">历年累计交易数：0</span>
|
||
<span class="trade_all_money" style="margin-left: 20px">历年累计交易额：0万元</span>
|
||
</div>
|
||
<div class="center_footer_content" id="center_footer_chart"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="main_right">
|
||
<div class="main_right_item">
|
||
<div class="right_switch_btn">
|
||
<span class="btn_item">日常考核指标</span>
|
||
<span>|</span>
|
||
<span class="btn_item">季度考核指标</span>
|
||
</div>
|
||
<div class="echarts_title">
|
||
<span></span>
|
||
<span style="cursor: pointer" onclick="openTab(3)">日常考核指标</span>
|
||
</div>
|
||
<div class="echarts_right_top_wrap" id="top_right_echarts"></div>
|
||
</div>
|
||
<div class="main_right_item_two">
|
||
<div class="echarts_title">
|
||
<span></span>
|
||
<span style="cursor: pointer" onclick="openTab(4)">季度考核指标</span>
|
||
</div>
|
||
<div class="main_right_item_two_div" id="bottom_right_echarts"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script th:src="@{/js/jquery.min.js}"></script>
|
||
<script th:src="@{/js/bootstrap.min.js}"></script>
|
||
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
|
||
<script th:src="@{/js/echarts.min.js}"></script>
|
||
<!--<script th:src="@{/js/index.js}"></script>-->
|
||
<th:block th:include="include :: footer" />
|
||
<script type="text/javascript" th:inline="javascript">
|
||
let _peopleData = [];
|
||
|
||
var ctx = [[@{/}]];
|
||
var prefix = ctx + "base/affairs";
|
||
function openTab(type,name){
|
||
switch (type){
|
||
case 1:
|
||
$.modal.openTab("党务及意识形态", prefix + '',true);
|
||
break;
|
||
case 2:
|
||
$.modal.openTab("党风廉政建设", prefix + '/partystyle',true);
|
||
break;
|
||
case 3:
|
||
$.modal.openTab("日常考核指标", prefix + '/day',true);
|
||
break;
|
||
case 4:
|
||
$.modal.openTab("季度考核指标", prefix + '/year',true);
|
||
break;
|
||
case 5:
|
||
window.parent._tab_name = name;
|
||
$.modal.openTab("指标完成情况汇总", prefix + '/finishedstatic',true);
|
||
break;
|
||
}
|
||
}
|
||
|
||
//echarts初始化
|
||
loadEchartsOne();
|
||
loadEchartsTwo();
|
||
loadEchartsThree();
|
||
loadEchartsFour();
|
||
loadEchartsFive();
|
||
loadCenterFn();
|
||
loadCenterData();
|
||
loadPeopleData();
|
||
loadDepData();
|
||
|
||
|
||
|
||
|
||
|
||
//加载左上角echarts
|
||
function loadEchartsOne() {
|
||
var year = new Date().getFullYear();
|
||
$.ajax({
|
||
url:'/base/index/dwysxt?year='+year,
|
||
type:'post',
|
||
dataType:'json',
|
||
success(res){
|
||
let _data = res.data;
|
||
let _xData = [],_sData = [];
|
||
_data.forEach(item => {
|
||
_xData.push(item.shot_name);
|
||
_sData.push(item.nowScore)
|
||
})
|
||
let chart = echarts.init(document.getElementById('top_left_echarts'));
|
||
let option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
formatter: '{b}:{c}分'
|
||
},
|
||
grid: {
|
||
top: "15%",
|
||
left: '5%',
|
||
right: '5%',
|
||
bottom: '5%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
data: _xData,
|
||
axisLabel: {
|
||
interval: 0,
|
||
color: '#FFFFFF'
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
name: '',
|
||
},
|
||
series: [
|
||
{
|
||
type: 'bar',
|
||
showBackground: true,
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{offset: 0, color: '#0096FF'},
|
||
{offset: 1, color: '#66F4FF'}
|
||
])
|
||
},
|
||
data: _sData,
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
color: '#FFFFFF',
|
||
formatter: '{c}分'
|
||
},
|
||
}
|
||
]
|
||
};
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
chart.setOption(option);
|
||
//通过点击事件，传递参数刷新中间表格数据
|
||
chart.on('click', function (params) {
|
||
window.parent._shotName = params.name;
|
||
$.modal.openTab("党务及意识形态", prefix + '',true);
|
||
})
|
||
}
|
||
})
|
||
};
|
||
|
||
//加载左边中间的echarts
|
||
function loadEchartsTwo() {
|
||
var year = new Date().getFullYear();
|
||
$.ajax({
|
||
url:'/base/index/dflzjs?year='+year,
|
||
type:'post',
|
||
dataType:'json',
|
||
success(res){
|
||
let _data = res.data;
|
||
let _sData = [];
|
||
_data.forEach(item => {
|
||
_sData.push({
|
||
value:item.nowScore,name:item.shot_name
|
||
})
|
||
})
|
||
let chart = echarts.init(document.getElementById('center_left_echarts'));
|
||
let option = {
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
top: 'center',
|
||
left: '0',
|
||
textStyle: {
|
||
color: "#ffffff"
|
||
},
|
||
type: 'scroll',
|
||
},
|
||
series: [
|
||
{
|
||
name: '',
|
||
type: 'pie',
|
||
radius: ['40%', '60%'],
|
||
center: ['70%', '50%'],
|
||
right: 20,
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: true,
|
||
formatter: '{c}分',
|
||
color: '#FFFFFF'
|
||
},
|
||
data: _sData
|
||
}
|
||
]
|
||
};
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
chart.setOption(option);
|
||
}
|
||
})
|
||
};
|
||
|
||
//加载左下角的echarts
|
||
function loadEchartsThree() {
|
||
var year = new Date().getFullYear();
|
||
$.ajax({
|
||
url:'/base/index/bmwcqk?year='+year,
|
||
type:'post',
|
||
dataType:'json',
|
||
success(res){
|
||
let _data = res.data;
|
||
let xData = [],sData1 = [],sData2 = [];
|
||
_data.forEach(item => {
|
||
xData.push(item.dept_name);
|
||
if(item.type === '日常考核指标'){
|
||
sData1.push(item.nowScore)
|
||
}else{
|
||
sData2.push(item.nowScore)
|
||
}
|
||
})
|
||
xData = unitArr(xData);
|
||
let chart = echarts.init(document.getElementById('bottom_left_echarts'));
|
||
let option = {
|
||
color:['#02abe0','#05f3b4'],
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
crossStyle: {
|
||
color: '#999'
|
||
}
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['日常考核指标', '季度考核指标'],
|
||
textStyle: {
|
||
color: "#ffffff"
|
||
},
|
||
},
|
||
grid: {
|
||
top: "15%",
|
||
left: '5%',
|
||
right: '5%',
|
||
bottom: '5%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
data: xData,
|
||
axisLabel:{
|
||
interval:0,
|
||
rotate:15,
|
||
color:'#FFFFFF'
|
||
},
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
}
|
||
],
|
||
yAxis: {
|
||
type: 'value',
|
||
name: '',
|
||
axisLabel:{
|
||
color:'#fff'
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
color: '#FFFFFF',
|
||
formatter: '{c}分'
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: '日常考核指标',
|
||
showBackground: true,
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{offset: 0, color: '#0096FF'},
|
||
{offset: 1, color: '#66F4FF'}
|
||
])
|
||
},
|
||
type: 'bar',
|
||
tooltip: {
|
||
valueFormatter: function (value) {
|
||
return value + ' 分';
|
||
}
|
||
},
|
||
data: sData1,
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
color: '#FFFFFF',
|
||
formatter: '{c}分'
|
||
},
|
||
},
|
||
{
|
||
name: '季度考核指标',
|
||
showBackground: true,
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{offset: 0, color: '#0096FF'},
|
||
{offset: 1, color: '#66F4FF'}
|
||
])
|
||
},
|
||
type: 'bar',
|
||
tooltip: {
|
||
valueFormatter: function (value) {
|
||
return value + ' 分';
|
||
}
|
||
},
|
||
data: sData2,
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
color: '#FFFFFF',
|
||
formatter: '{c}分'
|
||
},
|
||
},
|
||
]
|
||
};
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
chart.setOption(option);
|
||
}
|
||
})
|
||
|
||
};
|
||
|
||
//加载右上角的echarts
|
||
function loadEchartsFour(){
|
||
var year = new Date().getFullYear();
|
||
$.ajax({
|
||
url:'/base/index/rckhzb?year='+year,
|
||
type:'post',
|
||
dataType:'json',
|
||
success(res){
|
||
let _data = res.data;
|
||
let _xData = [],_sData = [];
|
||
_data.forEach(item => {
|
||
_xData.push(item.shot_name);
|
||
_sData.push(item.nowScore)
|
||
})
|
||
let chart = echarts.init(document.getElementById('top_right_echarts'));
|
||
let option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
grid: {
|
||
top: "0%",
|
||
left: '0%',
|
||
right: '10%',
|
||
bottom: '5%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
show:false
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
data: _xData,
|
||
axisLabel:{
|
||
color:'#FFFFFF'
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: '',
|
||
type: 'bar',
|
||
data: _sData,
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{offset: 0, color: '#0096FF'},
|
||
{offset: 1, color: '#66F4FF'}
|
||
])
|
||
},
|
||
label: {
|
||
show: true,
|
||
formatter: '{c}分',
|
||
color: '#FFFFFF',
|
||
position: 'right',
|
||
valueAnimation: true
|
||
},
|
||
}
|
||
]
|
||
};
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
chart.setOption(option);
|
||
chart.on('click', function (params) {
|
||
window.parent._shotName = params.name;
|
||
$.modal.openTab("日常考核指标", prefix + '/day',true);
|
||
})
|
||
}
|
||
})
|
||
};
|
||
|
||
//加载右下角的echarts
|
||
function loadEchartsFive(){
|
||
var year = new Date().getFullYear();
|
||
$.ajax({
|
||
url:'/base/index/ndkhbz?year='+year,
|
||
type:'post',
|
||
dataType:'json',
|
||
success(res){
|
||
let _data = res.data;
|
||
let _xData = [],_sData = [];
|
||
_data.forEach(item => {
|
||
_xData.push(item.shot_name);
|
||
_sData.push(item.nowScore)
|
||
})
|
||
let chart = echarts.init(document.getElementById('bottom_right_echarts'));
|
||
let option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: _xData,
|
||
axisLabel:{
|
||
interval:0,
|
||
rotate:15,
|
||
color:'#FFFFFF'
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel:{
|
||
color:'#fff'
|
||
}
|
||
},
|
||
grid: {
|
||
top: "15%",
|
||
left: '5%',
|
||
right: '5%',
|
||
bottom: '5%',
|
||
containLabel: true
|
||
},
|
||
series: [
|
||
{
|
||
data: _sData,
|
||
type: 'line',
|
||
areaStyle: {
|
||
color:'#02abe0'
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
color: '#FFFFFF',
|
||
formatter: '{c}分'
|
||
},
|
||
}
|
||
]
|
||
};
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
chart.setOption(option);
|
||
}
|
||
})
|
||
}
|
||
|
||
// 中间虚线
|
||
function loadCenterFn() {
|
||
var canvas = document.querySelector('.dashed')
|
||
var ctx = canvas.getContext('2d')
|
||
var w = canvas.width = document.querySelector('.main_center_item').clientWidth
|
||
var h = canvas.height = document.querySelector('.main_center_item').clientHeight / 3 * 2
|
||
ctx.lineWidth = 3
|
||
ctx.setLineDash([3, 3]);
|
||
ctx.fillStyle = '#93f8fb'
|
||
ctx.shadowOffsetX = 0;
|
||
// 阴影的y偏移
|
||
ctx.shadowOffsetY = 0;
|
||
// 阴影颜色
|
||
ctx.shadowColor = '#93f8fb';
|
||
// 阴影的模糊半径
|
||
ctx.shadowBlur = 15;
|
||
ctx.save() //缓存初始状态
|
||
// 绘制第一条曲线
|
||
ctx.beginPath()
|
||
var grd = ctx.createLinearGradient(w / 11 * 2, h / 3, w / 5 * 2, h);
|
||
grd.addColorStop(0, "#54e2e6");
|
||
grd.addColorStop(1, "#065261");
|
||
ctx.strokeStyle = grd;
|
||
ctx.moveTo(w / 5 * 2, h)
|
||
ctx.quadraticCurveTo(w / 5, h / 6 * 5, w / 11 * 2, h / 3);
|
||
ctx.stroke();
|
||
// 绘制第一条曲线上的圆光效果
|
||
ctx.beginPath()
|
||
ctx.moveTo(w / 11 * 2, h / 3)
|
||
ctx.arc(w / 11 * 2, h / 3, 5, 0, Math.PI * 2)
|
||
ctx.fill()
|
||
ctx.restore()
|
||
ctx.save()
|
||
// // 绘制第二条线
|
||
// ctx.beginPath()
|
||
// var grd = ctx.createLinearGradient(w / 11 * 3.3, h / 2, w / 3 * 1.1, h / 6 * 5);
|
||
// grd.addColorStop(0, "#e08d03");
|
||
// grd.addColorStop(1, "#2e6a5c");
|
||
// ctx.strokeStyle = grd;
|
||
// ctx.moveTo(w / 3 * 1.1, h / 6 * 5)
|
||
// ctx.quadraticCurveTo(w / 5 * 1.5, h / 6 * 4.2, w / 11 * 3.3, h / 2);
|
||
// ctx.stroke();
|
||
// // 绘制第二条曲线上的圆光效果
|
||
// ctx.beginPath()
|
||
// ctx.moveTo(w / 11 * 3.3, h / 2)
|
||
// ctx.arc(w / 11 * 3.3, h / 2, 5, 0, Math.PI * 2)
|
||
// ctx.fill()
|
||
// ctx.restore()
|
||
// ctx.save()
|
||
// 绘制第三条线
|
||
ctx.beginPath()
|
||
var grd = ctx.createLinearGradient(w / 3 * 1.4, h / 5, w / 5 * 2, h / 2);
|
||
grd.addColorStop(0, "#e08d03");
|
||
grd.addColorStop(1, "#2e6a5c");
|
||
ctx.strokeStyle = grd;
|
||
ctx.moveTo(w / 5 * 2, h / 2 )
|
||
ctx.quadraticCurveTo(w / 3 * 1.2, h / 4 * 1.4, w / 3 * 1.4, h / 5);
|
||
ctx.stroke();
|
||
// 绘制第三条曲线上的圆光效果
|
||
ctx.beginPath()
|
||
ctx.moveTo(w / 3 * 1.4, h / 5)
|
||
ctx.arc(w / 3 * 1.4, h / 5, 5, 0, Math.PI * 2)
|
||
ctx.fill()
|
||
ctx.restore()
|
||
ctx.save()
|
||
// // 绘制第四条线
|
||
// ctx.beginPath()
|
||
// var grd = ctx.createLinearGradient(w / 5 * 3.1, h / 3*1.2, w / 5 * 3.2, h / 2 * 1.5);
|
||
// grd.addColorStop(0, "#e08d03");
|
||
// grd.addColorStop(1, "#2e6a5c");
|
||
// ctx.strokeStyle = grd;
|
||
// ctx.moveTo(w / 5 * 3.2, h / 2 * 1.5)
|
||
// ctx.quadraticCurveTo(w / 5 * 3.35, h / 2 * 1.2, w / 5 * 3.1, h / 3*1.2);
|
||
// ctx.stroke();
|
||
// // 绘制第四条曲线上的圆光效果
|
||
// ctx.beginPath()
|
||
// ctx.moveTo( w / 5 * 3.1, h / 3*1.2)
|
||
// ctx.arc( w / 5 * 3.1, h / 3*1.2, 5, 0, Math.PI * 2)
|
||
// ctx.fill()
|
||
// ctx.restore()
|
||
// ctx.save()
|
||
// 绘制第五条线
|
||
ctx.beginPath()
|
||
var grd = ctx.createLinearGradient(w / 5 * 3.3, h / 4, w / 5 * 3.2, h / 2 * 1.9);
|
||
grd.addColorStop(0, "#e08d03");
|
||
grd.addColorStop(1, "#2e6a5c");
|
||
ctx.strokeStyle = grd;
|
||
ctx.moveTo(w / 5 * 3.03, h / 2 * 1.9)
|
||
ctx.quadraticCurveTo(w / 5 * 3.8, h / 2 * 1.2, w / 5 * 3.3, h / 4);
|
||
ctx.stroke();
|
||
// 绘制第五条曲线上的圆光效果
|
||
ctx.beginPath()
|
||
ctx.moveTo(w / 5 * 3.3, h / 4)
|
||
ctx.arc(w / 5 * 3.3, h / 4, 5, 0, Math.PI * 2)
|
||
ctx.fill()
|
||
ctx.restore()
|
||
ctx.save()
|
||
// 绘制第六条线
|
||
ctx.beginPath()
|
||
var grd = ctx.createLinearGradient(w / 5 * 3.8, h / 2*1.2, w / 5 * 2.9, h);
|
||
grd.addColorStop(0, "#e08d03");
|
||
grd.addColorStop(1, "#2e6a5c");
|
||
ctx.strokeStyle = grd;
|
||
ctx.moveTo(w / 5 * 2.9, h)
|
||
ctx.quadraticCurveTo(w / 5 * 3.7, h / 2 * 1.6, w / 5 * 3.8, h / 2*1.2);
|
||
ctx.stroke();
|
||
// 绘制第六条曲线上的圆光效果
|
||
ctx.beginPath()
|
||
ctx.moveTo(w / 5 * 3.8, h / 2*1.2)
|
||
ctx.arc(w / 5 * 3.8, h / 2*1.2, 5, 0, Math.PI * 2)
|
||
ctx.fill()
|
||
}
|
||
|
||
//加载中间数据
|
||
function loadCenterData(){
|
||
var year = new Date().getFullYear();
|
||
$.ajax({
|
||
url:'/base/index/groupAll?year='+year,
|
||
type:'post',
|
||
dataType:'json',
|
||
success(res){
|
||
let _data = res.data;
|
||
_data.forEach(item => {
|
||
switch (item.type) {
|
||
case "季度考核指标":
|
||
$(".data1").find('.all_num').text("达标分："+item.score+"分");
|
||
$(".data1").find('.curr_num').text("当前分数："+item.nowScore+"分");
|
||
$(".cicle8").find('.circle_num').text(item.percent+"%");
|
||
break;
|
||
case "党风廉政建设":
|
||
$(".data2").find('.all_num').text("达标分："+item.score+"分");
|
||
$(".data2").find('.curr_num').text("当前分数："+item.nowScore+"分");
|
||
$(".cicle9").find('.circle_num').text(item.percent+"%");
|
||
break;
|
||
case "党务及意识形态":
|
||
$(".data3").find('.all_num').text("达标分："+item.score+"分");
|
||
$(".data3").find('.curr_num').text("当前分数："+item.nowScore+"分");
|
||
$(".cicle10").find('.circle_num').text(item.percent+"%");
|
||
break;
|
||
case "日常考核指标":
|
||
$(".data4").find('.all_num').text("达标分："+item.score+"分");
|
||
$(".data4").find('.curr_num').text("当前分数："+item.nowScore+"分");
|
||
$(".cicle11").find('.circle_num').text(item.percent+"%");
|
||
break;
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
//加载重点工作进度数据
|
||
function loadPeopleData(){
|
||
_peopleData = [];
|
||
var year = new Date().getFullYear();
|
||
$.ajax({
|
||
url:'/base/affairs/importantWork?year='+year,
|
||
type:'post',
|
||
dataType:'json',
|
||
success(res){
|
||
let _data = res.data;
|
||
let _strHtml = "";
|
||
_peopleData = res.data;
|
||
_data.forEach(item => {
|
||
_strHtml += '<div class="item_inline">' +
|
||
'<p>'+item.type+'：'+item.shotName+'</p>' +
|
||
'<p>目前完成度：'+item.percent+'%</p>' +
|
||
'</div>';
|
||
});
|
||
$('#center_footer_one').append(_strHtml);
|
||
if(_peopleData.length > 5){
|
||
setInterval(function () {
|
||
setTimeout(autoScroll("#center_footer_one"),0)
|
||
},1000)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
//加载资源交易数据
|
||
function loadDepData(){
|
||
var year = new Date().getFullYear();
|
||
$.ajax({
|
||
url:'/base/index/tradeEcharts?year='+year,
|
||
type:'post',
|
||
dataType:'json',
|
||
success(res){
|
||
let _data = res.data;
|
||
let _yData = _data.type,_sData = [];
|
||
let _allNumData = _data.data;
|
||
$('.trade_month_num').text('当月累计交易数：'+_data.monthCount);
|
||
$('.trade_month_money').text('当月累计交易额：'+_data.monthMoney.toFixed(4)+'万元');
|
||
$('.trade_year_num').text('当年累计交易数：'+_data.yearCount);
|
||
$('.trade_year_money').text('当年累计交易额：'+_data.yearMoney.toFixed(4)+'万元');
|
||
$('.trade_all_num').text('历年累计交易数：'+_data.allCount);
|
||
$('.trade_all_money').text('历年累计交易额：'+_data.allMoney.toFixed(4)+'万元');
|
||
_data.data.forEach(item => {
|
||
_sData.push({
|
||
name: item.name,
|
||
type: 'bar',
|
||
barWidth:40,
|
||
stack: 'total',
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: item.array
|
||
})
|
||
})
|
||
//加载饼状图
|
||
loadCirCleData(_data,'center_footer_chart')
|
||
}
|
||
})
|
||
}
|
||
|
||
//加载饼状图
|
||
function loadCirCleData(data,dom){
|
||
let chart = echarts.init(document.getElementById(dom));
|
||
var source = []
|
||
source.push(['', '', 'Price', 'Year'])
|
||
var json = data.allTrade;
|
||
for (let key in json) {
|
||
source.push([key, Number(json[key]).toFixed(4), Number(json[key]).toFixed(4), 'all'])
|
||
}
|
||
var json1 = data.yearTrade;
|
||
for (let key in json1) {
|
||
source.push([key, json1[key], Number(json1[key]).toFixed(4), 'all'])
|
||
}
|
||
var json2 = data.monTrade;
|
||
for (let key in json2) {
|
||
source.push([key, json2[key], Number(json2[key]).toFixed(4), 'all'])
|
||
}
|
||
let option = {
|
||
title:[
|
||
{
|
||
subtext: '当月累计交易',
|
||
left: '24.5%',
|
||
top: '75%',
|
||
textAlign: 'center',
|
||
subtextStyle:{
|
||
color:'#fff'
|
||
}
|
||
},
|
||
{
|
||
subtext: '当年累计交易',
|
||
left: '49.5%',
|
||
top: '75%',
|
||
textAlign: 'center',
|
||
subtextStyle:{
|
||
color:'#fff'
|
||
}
|
||
},
|
||
{
|
||
subtext: '历年累计交易',
|
||
left: '74.5%',
|
||
top: '75%',
|
||
textAlign: 'center',
|
||
subtextStyle:{
|
||
color:'#fff'
|
||
}
|
||
},
|
||
],
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
legend: {
|
||
top: '5%',
|
||
left: 'center',
|
||
textStyle: {
|
||
color: "#ffffff"
|
||
},
|
||
},
|
||
dataset: [
|
||
{
|
||
source: source
|
||
},
|
||
{
|
||
transform: {
|
||
type: 'filter',
|
||
config: { dimension: 'Year', value: 'mon' }
|
||
}
|
||
},
|
||
{
|
||
transform: {
|
||
type: 'filter',
|
||
config: { dimension: 'Year', value: 'year' }
|
||
}
|
||
},
|
||
{
|
||
transform: {
|
||
type: 'filter',
|
||
config: { dimension: 'Year', value: 'all' }
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
radius: 50,
|
||
center: ['50%', '25%'],
|
||
datasetIndex: 1,
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
label: {
|
||
show: false,
|
||
},
|
||
},
|
||
{
|
||
type: 'pie',
|
||
radius: 50,
|
||
center: ['50%', '50%'],
|
||
datasetIndex: 2,
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
label: {
|
||
show: false,
|
||
},
|
||
},
|
||
{
|
||
type: 'pie',
|
||
radius: 50,
|
||
center: ['50%', '75%'],
|
||
datasetIndex: 3,
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
label: {
|
||
show: false,
|
||
},
|
||
}
|
||
],
|
||
// Optional. Only for responsive layout:
|
||
media: [
|
||
{
|
||
option: {
|
||
series: [
|
||
{ center: ['25%', '50%'] },
|
||
{ center: ['50%', '50%'] },
|
||
{ center: ['75%', '50%'] }
|
||
]
|
||
}
|
||
},
|
||
{
|
||
option: {
|
||
series: [
|
||
{ center: ['50%', '25%'] },
|
||
{ center: ['50%', '50%'] },
|
||
{ center: ['50%', '75%'] }
|
||
]
|
||
}
|
||
}
|
||
]
|
||
};
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
chart.setOption(option);
|
||
}
|
||
|
||
//文字上下滚动
|
||
function autoScroll(obj){
|
||
$(obj).find(".item_inline:first").animate({
|
||
marginTop:'-50px'
|
||
},500,function () {
|
||
$(this).css({marginTop: '0'}).find(".item_inline:first").appendTo(this);
|
||
})
|
||
}
|
||
|
||
//去重
|
||
function unitArr(arr){
|
||
return [...new Set(arr)]
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|