css3加js 3d旋转动画 围绕旋转 根据请求后台的数据动态渲染
·
3d旋转动画
<style>
body {
height: auto !important;
background-color: #020432;
}
html{
height: auto !important
}
.bgcolor{
min-width: 1200px;
height: auto !important;
background-size: 100% 100%;
}
/*旋转部分、、、、、、、、、、、、、、、、、、、、、、、、、、*/
.section3 {
width: 100%;
height: 800px;
margin: 200px auto 0px;
background: url(../img/mainImg/bg.png) no-repeat center;
background-size: 100% 100%;
}
.u_p3d {
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.section3 .ui_base {
position: absolute;
left: 50%;
top: 100px;
transform: translate(-50%, 300px);
width: 400px;
height: 0px;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
-webkit-perspective-origin: 50% 0%;
-moz-perspective-origin: 50% 0%;
-o-perspective-origin: 50% 0%;
-ms-perspective-origin: 50% 0%;
perspective-origin: 50% 50%;
}
.section3 .ball_c {
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
position: absolute;
width: 225px;
height: 157px;
line-height: 157px;
text-align: center;
background: url(../img/zfzs.png) no-repeat;
left: 90px;
top: 100px;
}
.ball_c {}
.section3 .ball_c img {
width: 125px;
height: 125px;
border-radius: 10px;
}
.section3 .ball_c p {
margin-top: -70px;
}
.section3 .ball_c p a {
font-size: 19px;
font-family: ""
}
.section3 .base {
-webkit-transform: rotateX(80deg) rotateY(-10deg);
-moz-transform: rotateX(80deg) rotateY(-10deg);
-o-transform: rotateX(80deg) rotateY(-10deg);
-ms-transform: rotateX(80deg) rotateY(-10deg);
transform: rotateX(80deg) rotateY(-10deg);
position: relative;
width: 350px;
height: 350px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
top: -120px;
left: 30px;
}
.section3 .ball_base {
-webkit-transform-origin: 225px 0px;
-moz-transform-origin: 225px 0px;
-ms-transform-origin: 225px 0px;
-o-transform-origin: 225px 0px;
transform-origin: 225px 0px;
position: absolute;
top: 175px;
left: -50px;
width: 225px;
height: 127px
}
.section3 .ball {
display: flex;
flex-direction: column;
align-items: center;
-webkit-transition: all 2s ease-out 0ms;
-o-transition: all 2s ease-out 0ms;
-moz-transition: all 2s ease-out 0ms;
-ms-transition: all 2s ease-out 0ms;
transition: all 2s ease-out 0ms;
-webkit-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
transform-origin: 50% 50%;
position: absolute;
left: -250px;
top: -60px;
/* overflow: hidden; */
}
.section3 .ball .img {
width: 100px;
height: 100px;
}
@keyframes cir {
0% {
transform: rotateX(80deg) rotateY(0) rotateZ(0deg)
}
100% {
transform: rotateX(80deg) rotateY(0) rotateZ(-360deg)
}
}
@-webkit-keyframes cir {
0% {
-webkit-transform: rotateX(80deg) rotateY(0) rotateZ(0deg)
}
100% {
-webkit-transform: rotateX(80deg) rotateY(0) rotateZ(-360deg)
}
}
.spin_box_item {
position: relative;
}
.spin_box_item .spin_box_item_img{
display: flex;
justify-content: center;
align-items: center;
width: 120px;
height: 120px;
border-radius: 50%;
}
.spin_box_item_img img{
width: 50px;
height: 50px;
}
.spin_box_item .spin_box_item_children {
position: absolute;
left: -250px;
top: 0;
/* overflow:inherit */
}
.spin_box_item .spin_box_item_children .corner {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: -20px;
top: -20px;
transform: translate(50%, 50%);
width: 20px;
height: 20px;
border-radius: 50%;
/* border: 1px solid #148460;
background-color: rgba(5, 88, 87, .5); */
}
.spin_box_item .spin_box_item_children .corner .circle {
width: 12px;
height: 12px;
border-radius: 50%;
/* border: 1px solid #148460;
background-color: rgba(5, 88, 87, .5); */
}
.spin_box_item .spin_box_item_children .content_box {
padding: 8px;
/* 实现四个边角切割 */
clip-path: polygon(15px 0px, calc(100% - 20px) 0, 100% 0, 100% calc(100% - 29px), calc(100% - 29px) 100%, 0 100%, 0 calc(100% - 20px), 0 0);
}
.spin_box_item .spin_box_item_children .content_box ul {
margin: 0;
padding: 10px;
clip-path: polygon(0% 0%, 80% 0%, 100% 0%, 100% 195px, 252px 100%, 0% 100%, 0% 80%, 0% 20%);
}
.spin_box_item .spin_box_item_children .content_box ul li {
display: flex;
align-items: center;
padding: 5px 0;
margin-left: 20px;
margin-right: 20px;
}
.spin_box_item .spin_box_item_children .content_box ul li>div {
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 10px;
}
.spin_box_item .spin_box_item_children .content_box ul li a {}
.display_block {
display: block;
}
.display_none {
display: none;
}
.qiu {
position: absolute;
left: 50%;
/* top: 50%; */
transform: translate(-42%, -76%);
animation: yuan 5s linear 0s infinite
}
@keyframes yuan {
0% {
transform: translate(-46%, -76%)
}
50% {
transform: translate(-46%, -66%)
}
100% {
transform: translate(-46%, -76%)
}
}
.guang{
animation: cir11 20s linear 0s infinite;
transform: rotateX(-90deg) rotateY(72deg) translateY(-70px)
}
@keyframes cir11 {
0% {
transform: rotateY(0deg) rotateZ(0)
}
100% {
transform: rotateY(0) rotateZ(-360deg)
}
}
@keyframes guang {
0% {
transform: rotateX(80deg) rotateY(0) rotateZ(0)
}
100% {
transform: rotateX(80deg) rotateY(0) rotateZ(-360deg);
}
}
</style>
<div class="section3">
<div class="ui_base u_p3d">
<div class="qiu">
<img src="../img/mainImg/yuan.png" alt="">
</div>
<div class="base u_p3d" id="base">
</div>
</div>
</div>
返回的数据
// var data = [{
// name: '其他',
// img: '../img/mainImg/icon5.png',
// // color: 'rgba(242,58,58)',
// lucency: '',
// children: [{
// name: '合同管理系统',
// path: 'http://www.baidu.com'
// }, {
// name: '档案资料管理系统',
// path: 'http://www.baidu.com'
// }]
// }, {
// name: '安全部',
// img: '../img/mainImg/icon4.png',
// children: [{
// name: '合同管理系统',
// path: 'http://www.baidu.com'
// }, {
// name: '档案资料管理系统',
// path: 'http://www.baidu.com'
// }]
// }, {
// name: '质检部',
// img: '../img/mainImg/icon3.png',
// children: [{
// name: '合同管理系统',
// path: 'http://www.baidu.com'
// }, {
// name: '档案资料管理系统',
// path: 'http://www.baidu.com'
// }]
// }, {
// name: '工程部',
// img: '../img/mainImg/icon2.png',
// children: [{
// name: '合同管理系统',
// path: 'http://www.baidu.com'
// }, {
// name: '档案资料管理系统',
// path: 'http://www.baidu.com'
// }]
// }, {
// name: '办公室',
// img: '../img/mainImg/icon1.png',
// color: 'rgb(33,208,120)',
// children: [{
// name: '合同管理系统',
// path: 'http://www.baidu.com'
// }, {
// name: '档案资料管理系统',
// path: 'http://www.baidu.com'
// }]
// }]
var base = document.getElementById('base')
// 列表弹窗
function ListShowFn(event) {
var listBox = event.lastChild
if (listBox.className.indexOf('display_none') != -1) {
listBox.setAttribute('class', 'spin_box_item_children display_block')
listBox.style = `left:${ -listBox.clientWidth - 10 }px`
var ul = event.getElementsByClassName('ul')[0]
var style = ul.getAttribute('style')
ul.style = style + `clip-path:polygon(0% 0%, 80% 0%, 100% 0%, 100% ${ul.clientHeight - 25}px, ${ul.clientWidth - 25}px 100%, 0% 100%, 0% 80%, 0% 20%)`
} else {
listBox.setAttribute('class', 'spin_box_item_children display_none')
}
}
// 动画停止与开始
base.addEventListener('mouseenter', function () {
this.style = 'animation-play-state: paused'
for (var i = 0; i < this.children.length; i++) {
this.children[i].children[0].style = this.children[i].children[0].getAttribute('style') + ';animation-play-state: paused'
}
})
base.addEventListener('mouseleave', function () {
this.style = 'animation-play-state: inherit'
for (var i = 0; i < this.children.length; i++) {
this.children[i].children[0].style = this.children[i].children[0].getAttribute('style') + ';animation-play-state: inherit'
}
})
function colorFn(val){
// 16进制颜色值的正则
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
// 把颜色值变成小写
var color = val.toLowerCase();
if (reg.test(color)) {
// 如果只有三位的值，需变成六位，如：#fff => #ffffff
if (color.length === 4) {
var colorNew = "#";
for (var i = 1; i < 4; i += 1) {
colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
}
color = colorNew;
}
// 处理六位的颜色值，转为RGB
var colorChange = [];
for (var i = 1; i < 7; i += 2) {
colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
}
return "RGB(" + colorChange.join(",") + ")";
} else {
return color;
}
}
//请求后台接口
$.ajax({
type: "GET",
url: "http://xxx.com",
dataType: 'json',
success: function(res) {
var data = res
var num = 360 / data.length
var delay = 100
var style = document.createElement('style');
style.type = 'text/css';
var styleVal = ''
for(var i=0;i<data.length;i++) {
styleVal += `
@keyframes cir${i + 1} {
0% {
transform: rotateY(-${num * i}deg) rotateZ(0)
}
100% {
transform: rotateY(-${(num * i) + 360}deg) rotateZ(0)
}
}`
}
style.innerHTML= styleVal
document.getElementsByTagName('head').item(0).appendChild(style);
var dom = ''
for (var i = 0; i < data.length; i++) {
// 没有bgColor 接收‘#365236’，不能写rgba(52,36,54,1)
if (!data[i].bgColor) {
data[i].color = 'rgb(40,247,255)'
}else {
data[i].color = data[i].bgColor
}
// if(data[i].color.indexOf('rgb') !== '-1'){
// data[i].color = data[i].color
// }else {
data[i].color = colorFn(data[i].color)
// 颜色渲染
if (data[i].color) {
var colorVal = data[i].color.split(',')[2]
var kuohao = colorVal.substr(colorVal.length - 1, 1)
data[i].bgc = data[i].color.split(',')[0] + ',' + data[i].color.split(',')[1] + ',' + colorVal.split(
')')[0] + ',' + (data[i].lucency ? data[i].lucency : '0.5') + kuohao
data[i].bgcBor = data[i].color.split(',')[0] + ',' + data[i].color.split(',')[1] + ',' + colorVal.split(
')')[0] + ',' + '0.05' + kuohao
data[i].bgcBorxiantao1 = data[i].color.split(',')[0] + ',' + data[i].color.split(',')[1] + ',' +
colorVal.split(')')[0] + ',' + '1' + kuohao
data[i].bgcBorxiantao2 = data[i].color.split(',')[0] + ',' + data[i].color.split(',')[1] + ',' +
colorVal.split(')')[0] + ',' + '0' + kuohao
}
// dom渲染
delay += 200
dom += `<div class="ball_base u_p3d ball_${i + 1}" style="cursor: pointer;transform:rotateX(-90deg) rotateY(${num * i}deg) translateY(-70px);">`
dom += `<div class="ball spin_box_item" style="color:${data[i].color};transition-delay: ${delay}ms;animation: cir${i + 1} 28s linear 0s infinite;transform: rotateY(${num * i}deg) rotateZ(0)" οnclick="ListShowFn(this)">`
dom += `<div class="spin_box_item_img" style="background-color: ${data[i].bgc};border: 1px dashed ${data[i].color}">`
dom += `<img src="${data[i].iconPath}"></img>`
dom += `</div>`
dom += `<p style="color:${data[i].color};margin-top: 10px;font-size: 18px">${data[i].name}</p>`
dom +=
`<div style="width:4px;height:120px;background:linear-gradient(${data[i].bgcBorxiantao1} 0%, ${data[i].bgcBorxiantao2} 100%)"></div>`
// 系统列表
if (data[i].clientInfoVos) {
dom += `<div class="spin_box_item_children display_none">`
dom +=
`<div class="corner" style="border: 1px solid ${data[i].color};background-color: ${data[i].bgc}">`
dom +=
`<div class="circle" style="border: 1px solid ${data[i].color};background-color: ${data[i].bgc}"></div>`
dom += `</div>`
// background: linear-gradient(-45deg, #4C829A 20px, rgba(5, 28, 65, 0.05) 0) bottom right;
// clip-path:'${polygon(0% 0%, 80% 0%, 100% 0%, 100% 85px, 209px 100%, 0% 100%, 0% 80%, 0% 20%)}';
dom +=
`<div class="content_box" style="background: linear-gradient(-45deg, ${data[i].color} 20px, ${data[i].bgcBor} 0) bottom right;border: solid 1px ${data[i].color};box-shadow: 0 0 20px 10px ${data[i].color};">`
dom += `<ul class="ul" style="box-shadow: 0 0 20px 5px ${data[i].color} inset;">`
for (var j = 0; j < data[i].clientInfoVos.length; j++) {
dom +=
`<li style="color:${data[i].color}"><div style="background-color: ${data[i].color};"></div><a style="color: ${data[i].color};" href="${data[i].clientInfoVos[j].path}">${data[i].clientInfoVos[j].name}</a></li>`
}
dom += `</ul>`
dom += `</div>`
dom += `</div>`
}
dom += `</div>`
dom += `</div>`
}
base.innerHTML = dom
}
})
下面是源代码
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta name="renderer" content="webkit">
<title>汾石高速建设项目综合管控平台</title>
<meta name="keywords" content="汾石高速建设项目综合管控平台">
<meta name="description" content="汾石高速建设项目综合管控平台首页">
<!--[if lt IE 9]>
<meta http-equiv="refresh" content="0;ie.html"/>
<![endif]-->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<!-- <link th:href="@{favicon.ico}" rel="stylesheet"/>-->
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
<link th:href="@{/css/jquery.contextMenu.min.css}" rel="stylesheet"/>
<link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
<link th:href="@{/css/animate.css}" rel="stylesheet"/>
<link th:href="@{/css/style.css}" rel="stylesheet"/>
<link th:href="@{/css/otherIndex.css}" rel="stylesheet"/>
<link th:href="@{/css/skins.css}" rel="stylesheet"/>
<link th:href="@{/ruoyi/css/ry-ui.css?v=3.4.0}" rel="stylesheet"/>
<style>
body {
height: auto;
}
.enlarge{
cursor: pointer;
transition: all 0.6s;
}
.enlarge:hover{
transform: scale(1.13);
}
/*background-size: 100% 100%;*/
.bj{background:url(../img/mainImg/bg1.png) no-repeat center;filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";-moz-background-size: 100% 100%;
}
.header{width:100%;height:1.15rem;padding-top:0.3rem;display:flex;position:relative;}
.header_center{width:5.8rem;height:0.36rem;}
.header_center img{width:5.8rem;}
.header_left{flex:1;margin-top:-0.05rem;background:url(../img/left_h.png) no-repeat center right;filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";-moz-background-size: 100% 100%;color:#ffffff;
line-height:0.9rem;}
.header_right{flex:1;margin-top:-0.05rem;background:url(../img/left_r.png) no-repeat center left;filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";-moz-background-size: 100% 100%;color:#ffffff;
line-height:0.9rem;}
.left{float:left;display:block;}
.header_right a{margin-right:0.5rem;color:#ffffff;}
.header_right a>img{width:0.22rem;height:0.22rem;}
.header_right a .user_icon{width:0.18rem;height:0.22rem;}
.right{float:right;display:block;}
.clearfix{clear:both;overflow: hidden;content:'';}
#rq{margin-left:0.2rem;}
#datetime{text-indent: 0.3rem;}
.list_tk{width:1.35rem;flex-direction:column;display:flex;position:absolute;top:1rem;right:0.68rem;background:url(../img/setuptk.png) no-repeat 100% 100%;background-size:100% 100%;padding:0.15rem 0;padding-bottom:0.05rem;display:none;z-index:100;}
.list_tk a{display:block;color:#ffffff;text-align:center;font-size:0.18rem;height:0.4rem;line-height:0.4rem;}
.list_tk a:hover{color:#8ff2ff;}
</style>
<style>
body {
height: auto !important;
background-color: #020432;
}
html{
min-height: 100% !important;
overflow-y: hidden;
overflow-x: hidden;
}
.bgcolor{
min-width: 1.2rem;
height: auto !important;
background-size: 100% 100%;
}
/*旋转部分、、、、、、、、、、、、、、、、、、、、、、、、、、*/
.section3 {
width: 100%;
height: 8rem;
margin: 0 auto 0;
/*background: url(../img/mainImg/bg.png) no-repeat center;*/
background-size: 100% 100%;
}
.section3 > img{
width: 100%;
height: 100%;
}
.u_p3d {
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.section3 .ui_base {
position: absolute;
left: 50%;
top: 1.5rem;
transform: translate(-50%, 3rem);
width: 4rem;
height: 0;
-webkit-perspective: 10rem;
-moz-perspective: 10rem;
-ms-perspective: 10rem;
-o-perspective: 10rem;
perspective: 10rem;
-webkit-perspective-origin: 50% 0%;
-moz-perspective-origin: 50% 0%;
-o-perspective-origin: 50% 0%;
-ms-perspective-origin: 50% 0%;
perspective-origin: 50% 50%;
}
.section3 .ball_c {
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
position: absolute;
width: 2.25rem;
height: 1.57rem;
line-height: 1.57rem;
text-align: center;
background: url(../img/zfzs.png) no-repeat;
left: 0.90rem;
top: 1rem;
}
.ball_c {}
.section3 .ball_c img {
width: 1.25rem;
height: 1.25rem;
border-radius: 0.10rem;
}
.section3 .ball_c p {
margin-top: -0.70rem;
}
.section3 .ball_c p a {
font-size: 0.19rem;
font-family: ""
}
.section3 .base {
-webkit-transform: rotateX(80deg) rotateY(-10deg);
-moz-transform: rotateX(80deg) rotateY(-10deg);
-o-transform: rotateX(80deg) rotateY(-10deg);
-ms-transform: rotateX(80deg) rotateY(-10deg);
transform: rotateX(80deg) rotateY(-10deg);
position: relative;
width: 3.50rem;
height: 3.50rem;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
top: -1.20rem;
left: 0.30rem;
}
.section3 .ball_base {
-webkit-transform-origin: 2.25rem 0rem;
-moz-transform-origin: 2.25rem 0rem;
-ms-transform-origin: 2.25rem 0rem;
-o-transform-origin: 2.25rem 0rem;
transform-origin: 2.25rem 0rem;
position: absolute;
top: 1.75rem;
left: -0.50rem;
width: 2.25rem;
height: 1.27rem
}
.section3 .ball {
display: flex;
flex-direction: column;
align-items: center;
-webkit-transition: all 2s ease-out 0ms;
-o-transition: all 2s ease-out 0ms;
-moz-transition: all 2s ease-out 0ms;
-ms-transition: all 2s ease-out 0ms;
transition: all 2s ease-out 0ms;
-webkit-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
transform-origin: 50% 50%;
position: absolute;
left: -2.50rem;
top: -0.60rem;
/* overflow: hidden; */
}
.section3 .ball .img {
width: 0.8rem;
height: 0.8rem;
}
.section3 .base {
-webkit-animation: cir 28s linear 0s infinite;
-o-animation: cir 28s linear 0s infinite;
-ms-animation: cir 28s linear 0s infinite;
-mozanimation: cir 28s linear 0s infinite;
animation: cir 28s linear 0s infinite
}
@keyframes cir {
0% {
transform: rotateX(80deg) rotateY(0) rotateZ(0deg)
}
100% {
transform: rotateX(80deg) rotateY(0) rotateZ(-360deg)
}
}
@-webkit-keyframes cir {
0% {
-webkit-transform: rotateX(80deg) rotateY(0) rotateZ(0deg)
}
100% {
-webkit-transform: rotateX(80deg) rotateY(0) rotateZ(-360deg)
}
}
.spin_box_item {
position: relative;
}
.spin_box_item .spin_box_item_img{
display: flex;
justify-content: center;
align-items: center;
width: 1rem;
height: 1rem;
border-radius: 50%;
}
.spin_box_item_img img{
width: 0.40rem;
height: 0.40rem;
}
.spin_box_item .spin_box_item_children {
position: absolute;
left: -2.50rem;
top: 0;
/* overflow:inherit */
}
.spin_box_item .spin_box_item_children .corner {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: -0.20rem;
top: -0.20rem;
transform: translate(50%, 50%);
width: 0.20rem;
height: 0.20rem;
border-radius: 50%;
}
.spin_box_item .spin_box_item_children .corner .circle {
width: 0.12rem;
height: 0.12rem;
border-radius: 50%;
/* border: 1px solid #148460;
background-color: rgba(5, 88, 87, .5); */
}
.spin_box_item .spin_box_item_children .content_box {
min-width: 2rem;
max-width: 3.2rem;
padding: 0.08rem;
/* 实现四个边角切割 */
/* background-size: 300px 200px;
background-repeat: no-repeat; */
clip-path: polygon(0.15rem 0rem, calc(100% - 0.20rem) 0, 100% 0, 100% calc(100% - 0.29rem), calc(100% - 0.29rem) 100%, 0 100%, 0 calc(100% - 0.20rem), 0 0);
/* border: solid 1rem #4C829A; */
/* box-shadow: 0 0 20rem 10rem #0D5957; */
}
.spin_box_item .spin_box_item_children .content_box ul {
/* width: 100%;
height: 100%; */
margin: 0;
padding: 0.10rem;
clip-path: polygon(0% 0%, 80% 0%, 100% 0%, 100% 1.95rem, 2.52rem 100%, 0% 100%, 0% 80%, 0% 20%);
}
.spin_box_item .spin_box_item_children .content_box ul li {
display: flex;
align-items: center;
padding: 0.05rem 0;
margin-left: 0.20rem;
margin-right: 0.20rem;
}
.spin_box_item .spin_box_item_children .content_box ul li>div {
}
.spin_box_item .spin_box_item_children .content_box ul li>div>div{
width: 0.1rem;
height: 0.1rem;
border-radius: 50%;
margin-right: 0.10rem;
}
.spin_box_item .spin_box_item_children .content_box ul li a {}
.display_block {
display: block;
}
.display_none {
display: none;
}
.fj{
position: absolute;
left: 50%;
/* top: 50%; */
transform: translate(-50%, -10%);
/*animation: yuan 5s linear 0s infinite;*/
width: 18rem;
height: 7rem;
}
.fj img{
width: 100%;
height: 100%;
}
.qiu {
position: absolute;
left: 50%;
/* top: 50%; */
transform: translate(-46%, -76%);
animation: yuan 5s linear 0s infinite;
width: 3.5rem;
height: 3.5rem;
cursor: pointer;
}
.qiu img{
width: 100%;
height: 100%;
}
@keyframes yuan {
0% {
transform: translate(-46%, -2rem)
}
50% {
transform: translate(-46%, -2.4rem)
}
100% {
transform: translate(-46%, -2rem)
}
}
.guang{
/* position: absolute;
top: 117rem;
left: -164rem; */
animation: cir11 20s linear 0s infinite;
transform: rotateX(-90deg) rotateY(72deg) translateY(-0.70rem)
}
@keyframes cir11 {
0% {
transform: rotateY(0deg) rotateZ(0)
}
100% {
transform: rotateY(0) rotateZ(-360deg)
}
}
@keyframes guang {
0% {
transform: rotateX(80deg) rotateY(0) rotateZ(0)
}
100% {
transform: rotateX(80deg) rotateY(0) rotateZ(-360deg);
}
}
</style>
</head>
<body class="bgcolor bj" th:classappend="${@config.getKey('sys.index.skinName')}">
<div class="header">
<div class="list_tk">
<!-- -->
<a th:href="@{/visual/index/xmjs}">建设理念</a>
<a th:href="@{/visual/index/kshgl}">可视化界面</a>
<a th:href="@{/webIndex}">工作台</a>
<a th:href="@{/index}">单点登录</a>
<!-- <a th:href="@{/client/info}">客户系统管理</a>
<a th:if="${session.isAdmin}" th:href="@{/system/dept}">组织机构</a>
<a th:if="${session.isAdmin}" th:href="@{/system/user}">用户管理</a>
<a th:if="${session.isAdmin}" th:href="@{/system/post}">岗位信息</a>
<a th:if="${session.isAdmin}" th:href="@{/monitor/operlog}">操作日志</a>
<a th:if="${session.isAdmin}" th:href="@{/datainterface/fenlei}">分类</a>
<a th:if="${session.isAdmin}" th:href="@{/datainterface/shujuyuan}">数据源</a>
<a th:if="${session.isAdmin}" th:href="@{/datainterface/sqlver}">sql配置版本</a> -->
</div>
<div class="header_left clearfix">
<div class="left" id="datetime"></div>
<div class="left" id="rq"></div>
</div>
<div class="header_center">
<img th:src="@{/img/sylogo.png}" />
</div>
<div class="header_right">
<a class="right" th:href="@{/logout}">
<img th:src="@{/img/logout.png}" />
</a>
<a class="right" href="javascript:;" id="setUp" type="1">
<img th:src="@{/img/sz.png}" />
</a>
<a class="right" th:href="@{/system/user/profile}">
<img class="left user_icon" style="margin-right:0.09rem;margin-top:0.30rem;" th:src="@{/img/user_icon.png}" />
<span class="left" style="margin-right:0.01rem;">当前用户:</span>
<span class="left" style="margin-right:0.01rem;" th:title="${session.user.deptName}" th:if="${session.user.deptName}">
[[${session.user.deptName}]]
</span>
<span class="left">
[[${session.user.userName}]]
</span>
</a>
</div>
</div>
<div class="section3">
<div class="ui_base u_p3d">
<div class="fj">
<img src="../img/mainImg/bg.png">
</div>
<div class="qiu">
<img src="../img/mainImg/yuan.png" alt="" title="可视化">
</div>
<div class="base u_p3d" id="base">
</div>
</div>
</div>
<!-- <th:block th:include="include :: headerHtmlRem"/>-->
<!-- <div class="index_content_box"></div>-->
<!-- 全局js -->
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/plugins/metisMenu/jquery.metisMenu.js}"></script>
<script th:src="@{/js/plugins/slimscroll/jquery.slimscroll.min.js}"></script>
<script th:src="@{/js/jquery.contextMenu.min.js}"></script>
<script th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/ruoyi/js/ry-ui.js?v=3.4.0}"></script>
<script th:src="@{/ruoyi/index.js}"></script>
<script th:src="@{/ajax/libs/fullscreen/jquery.fullscreen.js}"></script>
<script>
</script>
<script th:inline="javascript">
var ctx = [[@{/}]];
$(function () {
var whei = document.documentElement.clientWidth || window.innerWidth;
$("html").css({ fontSize: whei / 20 });
$(window).resize(function () {
var whei = document.documentElement.clientWidth || window.innerWidth;
$("html").css({ fontSize: whei / 20 })
});
// $('#setUp').click(function(){
// var type=$(this).attr('type');
// if(type==1){
// $('.list_tk').css('display','flex');
// $(this).attr('type',2);
// }else{
// $('.list_tk').css('display','none');
// $(this).attr('type',1);
// }
// })
$("#setUp").on("click", function(e){
$('.list_tk').css('display','flex');
$(document).one("click", function(){
$('.list_tk').css('display','none');
});
e.stopPropagation();
});
$(".list_tk").on("click", function(e){
e.stopPropagation();
});
var daterq=['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
getItem();
setInterval(()=>{
let date= new Date();
let y = date.getFullYear();
let MM = date.getMonth() + 1;
MM = MM < 10 ? ('0' + MM) : MM;
let d = date.getDate();
d = d < 10 ? ('0' + d) : d;
let h = date.getHours();
h = h < 10 ? ('0' + h) : h;
let m = date.getMinutes();
m = m < 10 ? ('0' + m) : m;
let s = date.getSeconds();
s = s < 10 ? ('0' + s) : s;
var rq=date.getDay()-1
// y + '-' + MM + '-' + d + ' ' +
var updateTime = h + ':' + m + ':' + s;
var datetime=y+'年'+MM+'月'+d+'日'+' '+updateTime
$('.header_left_time').html(updateTime);
$('#datetime').html(datetime);
$('#rq').html(daterq[rq]);
},1000);
});
/*用户管理-重置密码*/
function resetPwd() {
var url = ctx + 'system/user/profile/resetPwd';
$.modal.open("重置密码", url, '800', '500');
}
// // 获取当前时间
// function getNowTime () {
// var dateTime;
// var yy = new Date().getFullYear();
// var mm = new Date().getMonth() + 1;
// var dd = new Date().getDate();
// var hh = new Date().getHours();
// var mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes(): new Date().getMinutes();
// var ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds():new Date().getSeconds();
// dateTime = hh + ':' + mf + ':' + ss
//
// return dateTime
// }
// //定时执行setTime
// setInterval("getNowTime()",500);
// function setTime() {
// $('.header_left_time').html(getNowTime());
// }
//获取数据
function getItem(){
var prefix = ctx + "client/info/all/main";
$.ajax({
type: "GET",
url: prefix,
dataType: 'json',
success: function(res) {
for (let i in res) {
let color=["#96e358","#96a5ff","#fca980","#9fd59c","#74a2e7","#fd9580"];
let imgPath=["img/bangong.png","img/yunying.png","img/map-ruler.png","img/yingjijiuhu.png","img/caiwu.png","img/database.png"];
let outer = "<div class='home_content'>"
+ "<div class='home_first' >"
+ "<div class='first_box' style='background-color:" + res[i].bgColor + " !important;'><div class='home_first_left'>"
+ "<img src='" + res[i].iconPath + " '>"
+ "</div>"
+ "<div class='home_first_right' >"
+ " <div class='first_right_top'>" + res[i].name + "</div>"
+ " <div class='first_right_bottom'>" + res[i].nameEn + " </div>"
+ "</div></div>"
+ "</div><div class='home_item home_item"+i+"'>"
$(".index_content_box").append(outer);
let code = res[i].clientInfoVos;
let core="";
let color2=""
for (let j in code) {
console.log(code)
if(code[j].status=='2'){
code[j].loginUrl="javascript:void(0);"
color2="#e0e0e0";
core += "<div class='home_cox' style='background-color:" + color2 + " !important;'>"
+ "<div class='top'><img src='"+ code[j].iconPath +"' ></div>"
+ "<div class='bottom' style='color:#828282 !important; ' title='" + code[j].shortName + "'>" + code[j].shortName + "</div></div>"
}else {
core += "<div class='home_cox enlarge' οnclick='toLogin("+ code[j].id+",\""+code[j].name+"\")'>"
+ "<div class='top'><img src='"+ code[j].iconPath +"' ></div>"
+ "<div class='bottom' title='" + code[j].shortName + "'>" + code[j].shortName + "</div></div>"
}
core+="</div></div>"
}
$('.home_item'+i).append(core);
}
}
});
}
function toLogin(id,name){
$.post(ctx +"client/login",{clientId:id},function (res){
if(res.code == 0) {
if(res.data.errCode != '1000'){
layer.alert(res.data.errMsg, {
icon: $.modal.icon(modal_status.FAIL),
title: "系统提示",
btn: ['确认'],
btnclass: ['btn btn-primary']
});
}else if (res.data.open == '3') {
window.open(res.data.clientLoginUrl, '_blank');
} else {
//应急系统,要求不进行urlencode
// if (res.data.clientInfo.paramEncode == '2') {
// openPostWindow(res.data.clientLoginUrl, res.data.authName, res.data.authorization);
// } else
// openPostWindow(res.data.clientLoginUrl, res.data.authName,
// res.data.clientInfo.paramEncode == '1'?
// encodeURIComponent(res.data.authorization):res.data.authorization
// );
if(res.data.clientInfo.program == '1') {
window.open(res.data.clientLoginUrl + "?" + res.data.authName + "=" + (res.data.clientInfo.paramEncode == '1' ?
encodeURIComponent(res.data.authorization) : res.data.authorization), '_blank');
}else{
openPostWindow(res.data.clientLoginUrl, res.data.authName,
res.data.clientInfo.paramEncode == '1'?
encodeURIComponent(res.data.authorization):res.data.authorization
);
}
}
}else {
if (res.data == 'C1301') { //未配置公钥信息
layer.alert(res.msg, {
icon: $.modal.icon(modal_status.WARNING),
title: "系统提示",
btn: ['确认'],
btnclass: ['btn btn-primary']
});
} else if (res.data == 'C1202') { //未绑定用户信息
// $.modal.alertErrorUrl(res.msg);
// if(res.msg= ){
// }
//
layer.alert(res.msg, {
icon: $.modal.icon(modal_status.WARNING),
title: "系统提示",
btn: ['确认', '取消'],
btnclass: ['btn btn-primary'],
yes: function (index) {
var Aurl = `client/info/user/bind?clientId=` + id;
if([[${bindUserOpenWindow}]] == true){
$.modal.open("客户端系统绑定用户【"+name+"】",Aurl,600,380);
layer.close(index);
}else
window.open(Aurl, '_self');
}
});
} else { //其他错误提示
layer.alert(res.msg, {
icon: $.modal.icon(modal_status.FAIL),
title: "系统提示",
btn: ['确认'],
btnclass: ['btn btn-primary']
});
}
}
});
}
function openPostWindow(url,paramName, params) {
var newWin = window.open();
//设置样式为隐藏，打开新标签再跳转页面前，如果有可现实的表单选项，用户会看到表单内容数据
var formStr = '<form style="visibility:hidden;" method="POST" action="' + url + '">' +
'<input type="hidden" name="'+paramName+'" value="' + params + '" />' +
'</form>' +
'';
newWin.document.body.innerHTML = formStr;
newWin.document.forms[0].submit();
return newWin;
}
// var data = [{
// name: '其他',
// img: '../img/mainImg/icon5.png',
// // color: 'rgba(242,58,58)',
// lucency: '',
// children: [{
// name: '合同管理系统',
// path: 'http://www.baidu.com'
// }, {
// name: '档案资料管理系统',
// path: 'http://www.baidu.com'
// }]
// }, {
// name: '安全部',
// img: '../img/mainImg/icon4.png',
// children: [{
// name: '合同管理系统',
// path: 'http://www.baidu.com'
// }, {
// name: '档案资料管理系统',
// path: 'http://www.baidu.com'
// }]
// }, {
// name: '质检部',
// img: '../img/mainImg/icon3.png',
// children: [{
// name: '合同管理系统',
// path: 'http://www.baidu.com'
// }, {
// name: '档案资料管理系统',
// path: 'http://www.baidu.com'
// }]
// }, {
// name: '工程部',
// img: '../img/mainImg/icon2.png',
// children: [{
// name: '合同管理系统',
// path: 'http://www.baidu.com'
// }, {
// name: '档案资料管理系统',
// path: 'http://www.baidu.com'
// }]
// }, {
// name: '办公室',
// img: '../img/mainImg/icon1.png',
// color: 'rgb(33,208,120)',
// children: [{
// name: '合同管理系统',
// path: 'http://www.baidu.com'
// }, {
// name: '档案资料管理系统',
// path: 'http://www.baidu.com'
// }]
// }]
var qiu = document.querySelector('.qiu')
qiu.addEventListener('click',function () {
location.href = '/visual/index/kshyzt'
})
var prefix = ctx + "client/info/all/main";
var base = document.getElementById('base')
// 列表弹窗
function ListShowFn(event) {
var listBox = event.lastChild
if (listBox.className.indexOf('display_none') != -1) {
listBox.setAttribute('class', 'spin_box_item_children display_block')
listBox.style = `left:${ -listBox.clientWidth - 20}px`
var ul = event.getElementsByClassName('ul')[0]
var style = ul.getAttribute('style')
ul.style = style + `clip-path:polygon(0% 0%, 80% 0%, 100% 0%, 100% ${ul.clientHeight - 25}px, ${ul.clientWidth - 25}px 100%, 0% 100%, 0% 80%, 0% 20%)`
} else {
listBox.setAttribute('class', 'spin_box_item_children display_none')
}
}
// 动画停止与开始
base.addEventListener('mouseenter', function () {
this.style = 'animation-play-state: paused'
for (var i = 0; i < this.children.length; i++) {
this.children[i].children[0].style = this.children[i].children[0].getAttribute('style') + ';animation-play-state: paused'
}
})
base.addEventListener('mouseleave', function () {
this.style = 'animation-play-state: inherit'
for (var i = 0; i < this.children.length; i++) {
this.children[i].children[0].style = this.children[i].children[0].getAttribute('style') + ';animation-play-state: inherit'
}
})
function colorFn(val){
// 16进制颜色值的正则
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
// 把颜色值变成小写
var color = val.toLowerCase();
if (reg.test(color)) {
// 如果只有三位的值，需变成六位，如：#fff => #ffffff
if (color.length === 4) {
var colorNew = "#";
for (var i = 1; i < 4; i += 1) {
colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
}
color = colorNew;
}
// 处理六位的颜色值，转为RGB
var colorChange = [];
for (var i = 1; i < 7; i += 2) {
colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
}
return "RGB(" + colorChange.join(",") + ")";
} else {
return color;
}
}
$.ajax({
type: "GET",
url: prefix,
dataType: 'json',
success: function(res) {
// var spinchi = spin.getElementsByClassName('spin_box_item_img')
var data = res
var num = 360 / data.length
var delay = 100
var dom = ''
// dom += ` <div class="guang ball_base u_p3d ">
// <img src="./img/guang.png" alt="">
// </div>`
var style = document.createElement('style');
style.type = 'text/css';
var styleVal = ''
for(var i=0;i<data.length;i++) {
styleVal += `
@keyframes cir${i + 1} {
0% {
transform: rotateY(-${num * i}deg) rotateZ(0)
}
100% {
transform: rotateY(-${(num * i) + 360}deg) rotateZ(0)
}
}`
}
style.innerHTML= styleVal
document.getElementsByTagName('head').item(0).appendChild(style);
for (var i = 0; i < data.length; i++) {
// 没有bgColor
if (!data[i].bgColor) {
data[i].color = 'rgb(40,247,255)'
}else {
data[i].color = data[i].bgColor
}
// if(data[i].color.indexOf('rgb') !== '-1'){
// data[i].color = data[i].color
// }else {
data[i].color = colorFn(data[i].color)
// }
// 颜色渲染
if (data[i].color) {
var colorVal = data[i].color.split(',')[2]
var kuohao = colorVal.substr(colorVal.length - 1, 1)
data[i].bgc = data[i].color.split(',')[0] + ',' + data[i].color.split(',')[1] + ',' + colorVal.split(
')')[0] + ',' + (data[i].lucency ? data[i].lucency : '0.5') + kuohao
data[i].bgcBor = data[i].color.split(',')[0] + ',' + data[i].color.split(',')[1] + ',' + colorVal.split(
')')[0] + ',' + '0.05' + kuohao
data[i].bgcBor1 = data[i].color.split(',')[0] + ',' + data[i].color.split(',')[1] + ',' + colorVal.split(
')')[0] + ',' + '0.2' + kuohao
data[i].bgcBorxiantao1 = data[i].color.split(',')[0] + ',' + data[i].color.split(',')[1] + ',' +
colorVal.split(')')[0] + ',' + '1' + kuohao
data[i].bgcBorxiantao2 = data[i].color.split(',')[0] + ',' + data[i].color.split(',')[1] + ',' +
colorVal.split(')')[0] + ',' + '0' + kuohao
}
// dom渲染
delay += 200
dom += `<div class="ball_base u_p3d ball_${i + 1}" style="cursor: pointer;transform:rotateX(-90deg) rotateY(${num * i}deg) translateY(-0.70rem);">`
dom += `<div class="ball spin_box_item" style="color:${data[i].color};transition-delay: ${delay}ms;animation: cir${i + 1} 28s linear 0s infinite;transform: rotateY(${num * i}deg) rotateZ(0)" οnclick="ListShowFn(this)">`
dom += `<div class="spin_box_item_img" style="background-color: ${data[i].bgc};border: 0.01rem dashed ${data[i].color}">`
dom += `<img src="${data[i].iconPath}"></img>`
dom += `</div>`
// dom += `<img class="img" src="${data[i].img}" alt="">`
dom += `<p style="color:${data[i].color};margin-top: 0.10rem;font-size: 0.18rem">${data[i].name}</p>`
// dom += `<img src="./img/矩形2拷贝5.png" alt="">`
dom +=
`<div style="width:0.04rem;height:1.20rem;background:linear-gradient(${data[i].bgcBorxiantao1} 0%, ${data[i].bgcBorxiantao2} 100%)"></div>`
// 系统列表
if (data[i].clientInfoVos) {
dom += `<div class="spin_box_item_children display_none">`
dom +=
`<div class="corner" style="border: 0.01rem solid ${data[i].color};background-color: ${data[i].bgc}">`
dom +=
`<div class="circle" style="border: 0.01rem solid ${data[i].color};background-color: ${data[i].bgc}"></div>`
dom += `</div>`
// background: linear-gradient(-45deg, #4C829A 20px, rgba(5, 28, 65, 0.05) 0) bottom right;
// clip-path:'${polygon(0% 0%, 80% 0%, 100% 0%, 100% 85px, 209px 100%, 0% 100%, 0% 80%, 0% 20%)}';
dom +=
`<div class="content_box" style="background: linear-gradient(-45deg, ${data[i].color} 0.20rem, ${data[i].bgcBor} 0) bottom right;border: solid 0.01rem ${data[i].color};box-shadow: 0 0 0.20rem 0.10rem ${data[i].color};">`
dom += `<ul class="ul" style="box-shadow: 0 0 0.20rem 0.05rem ${data[i].color} inset;background-color:${ data[i].bgcBor1};">`
for (var j = 0; j < data[i].clientInfoVos.length; j++) {
if(data[i].clientInfoVos[j].status=='2'){
// dom += `<li style="color:${data[i].bgc}"><div><div style="background-color: ${data[i].bgc};"></div></div><a href="javascript:void(0);" style="color: ${data[i].bgc};font-size: 0.12rem">${data[i].clientInfoVos[j].name}</a></li>`
dom += `<li style="color:${data[i].bgc}"><div><div style="background-color: ${data[i].bgc};"></div></div><a href="javascript:void(0);" style="color: ${data[i].bgc};font-size: 0.12rem;font-weight:900">${data[i].clientInfoVos[j].name}</a></li>`
}else{
// dom += `<li style="color:${data[i].color}"><div><div style="background-color: ${data[i].color};"></div></div><a style="color: ${data[i].color};font-size: 0.12rem" οnclick='toLogin("${data[i].clientInfoVos[j].id}",\"${data[i].clientInfoVos[j].name}\")'>${data[i].clientInfoVos[j].name}</a></li>`
dom += `<li style="color:${data[i].color}"><div><div style="background-color: ${data[i].color};"></div></div><a style="color: ${data[i].color};;font-size: 0.12rem;font-weight:900" οnclick='toLogin("${data[i].clientInfoVos[j].id}",\"${data[i].clientInfoVos[j].name}\")'>${data[i].clientInfoVos[j].name}</a></li>`
}
}
dom += `</ul>`
dom += `</div>`
dom += `</div>`
}
dom += `</div>`
dom += `</div>`
}
base.innerHTML = dom
}
})
</script>
</body>
</html>
DAMO开发者矩阵，由阿里巴巴达摩院和中国互联网协会联合发起，致力于探讨最前沿的技术趋势与应用成果，搭建高质量的交流与分享平台，推动技术创新与产业应用链接，围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)