大屏完善
This commit is contained in:
duxp
parent
456c3e1f3c
commit
1d3a182d9b
|
|
@ -16,7 +16,7 @@ ruoyi:
|
|||
# 开发环境配置
|
||||
server:
|
||||
# 服务器的HTTP端口，默认为80
|
||||
port: 8088
|
||||
port: 8101
|
||||
servlet:
|
||||
# 应用的访问路径
|
||||
context-path: /
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 237 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 213 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 150 KiB After Width: | Height: | Size: 79 KiB |
|
|
@ -9,145 +9,8 @@
|
|||
<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>
|
||||
<style>
|
||||
.main_wrap {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-image: url("../img/index_bg2.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.main_wrap .main_left, .main_wrap .main_right {
|
||||
width: 25%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.main_wrap .main_center {
|
||||
width: 50%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.main_wrap .main_left .main_left_item {
|
||||
width: 100%;
|
||||
height: 35vh;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
background-color: rgba(11, 40, 49, 0.2);
|
||||
}
|
||||
|
||||
.main_wrap .main_center .main_center_item, .main_wrap .main_right .main_right_item {
|
||||
width: 100%;
|
||||
height: 70vh;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.main_wrap .main_right .main_right_item{
|
||||
background-color: rgba(11, 40, 49, 0.2);
|
||||
}
|
||||
|
||||
.main_wrap .main_footer {
|
||||
width: 100%;
|
||||
height: 30vh;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
background-color: rgba(11, 40, 49, 0.2);
|
||||
}
|
||||
|
||||
.main_left_item .left_switch_btn {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.main_right_item .right_switch_btn {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.main_wrap .echarts_title {
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.main_wrap .echarts_title span:first-child {
|
||||
width: 0;
|
||||
border: 4px solid #0096ff;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.main_wrap .btn_echarts_wrap {
|
||||
width: 100%;
|
||||
height: 25vh;
|
||||
}
|
||||
|
||||
.main_wrap .echarts_wrap {
|
||||
width: 100%;
|
||||
height: 28vh;
|
||||
}
|
||||
|
||||
.main_wrap .echarts_footer_wrap {
|
||||
width: 100%;
|
||||
height: 24vh;
|
||||
}
|
||||
|
||||
.main_wrap .echarts_right_top_wrap{
|
||||
width: 100%;
|
||||
height: 60vh;
|
||||
}
|
||||
.main_wrap .main_footer_center{
|
||||
width: 100%;
|
||||
height: 28vh;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.main_wrap .main_footer_center .center_footer_item{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
.main_wrap .center_footer_content{
|
||||
width: 100%;
|
||||
height: 24vh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.main_wrap .footer_content_item{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
animation: scroll 20s linear infinite;
|
||||
}
|
||||
.main_wrap .footer_content_item .item_inline{
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.main_wrap .footer_content_item .item_inline .inline_content{
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
}
|
||||
@keyframes scroll {
|
||||
0%{
|
||||
transform: translateY(0);
|
||||
}
|
||||
100%{
|
||||
transform: translateY(-80%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body class="gray-bg">
|
||||
<div class="main_wrap">
|
||||
<div class="main_left">
|
||||
|
|
@ -179,7 +42,54 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="main_center">
|
||||
<div class="main_center_item" id="main_center_echarts"></div>
|
||||
<div class="main_center_item">
|
||||
<div class="data1">
|
||||
<span>部门年度考核完成情况</span>
|
||||
<p>日常考核总分：100分</p>
|
||||
<p>当前分数：76分</p>
|
||||
</div>
|
||||
<div class="data2">
|
||||
<span>党风廉政建设</span>
|
||||
<p>日常考核总分：100分</p>
|
||||
<p>当前分数：86分</p>
|
||||
</div>
|
||||
<div class="data3">
|
||||
<span>党务及意识形态</span>
|
||||
<p>日常考核总分：100分</p>
|
||||
<p>当前分数：79分</p>
|
||||
</div>
|
||||
<div class="data4">
|
||||
<span>部门日常考核完成情况</span>
|
||||
<p>日常考核总分：100分</p>
|
||||
<p>当前分数：80分</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>89%</span>
|
||||
<p>部门年度考核完成情况</p>
|
||||
</div>
|
||||
<div class="cicle9">
|
||||
<span>89%</span>
|
||||
<p>党风廉政建设</p>
|
||||
</div>
|
||||
<div class="cicle10">
|
||||
<span>89%</span>
|
||||
<p>党务及意识形态</p>
|
||||
</div>
|
||||
<div class="cicle11">
|
||||
<span>89%</span>
|
||||
<p>部门日常考核完成情况</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main_footer">
|
||||
<div class="main_footer_center">
|
||||
<div class="center_footer_item">
|
||||
|
|
@ -272,7 +182,7 @@
|
|||
<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>
|
||||
<!--<script th:src="@{/js/index.js}"></script>-->
|
||||
<script type="text/javascript">
|
||||
//echarts初始化
|
||||
loadEchartsOne();
|
||||
|
|
@ -280,7 +190,7 @@
|
|||
loadEchartsThree();
|
||||
loadEchartsFour();
|
||||
loadEchartsFive();
|
||||
initContentMenu();
|
||||
loadCenterFn();
|
||||
|
||||
//先进成员假数据
|
||||
let _strHtml = '';
|
||||
|
|
@ -573,6 +483,119 @@
|
|||
// 使用刚指定的配置项和数据显示图表。
|
||||
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()
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue