|
@@ -1,6 +1,7 @@
|
|
|
<template>
|
|
|
<div class="board-container">
|
|
|
- <div class="header">
|
|
|
+ <div :style="listLoading?mask:''">
|
|
|
+ <div class="header">
|
|
|
<img src="../assets/logo.png" style="margin-left: 10px; margin-top: 10px;">
|
|
|
</div>
|
|
|
<div class="title_info">
|
|
@@ -82,6 +83,16 @@
|
|
|
<i class="el-icon-s-custom" style="color: green; font-size: xx-large;"></i>
|
|
|
</span>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ <div id="page" v-if="listLoading">
|
|
|
+ <div id="container">
|
|
|
+ <div id="ring"></div>
|
|
|
+ <div id="ring"></div>
|
|
|
+ <div id="ring"></div>
|
|
|
+ <div id="ring"></div>
|
|
|
+ <div id="h3">LOADING</div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -120,6 +131,7 @@ export default {
|
|
|
{ prop: 'element1', label: '一级因子' },
|
|
|
{ prop: 'element2', label: '二级因子' },
|
|
|
],
|
|
|
+ mask:'opacity: 0.3;'
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
@@ -138,7 +150,7 @@ export default {
|
|
|
if (data != undefined) {
|
|
|
if (data.data != null) {
|
|
|
this.getAnalysisList();
|
|
|
- this.getOriginList();
|
|
|
+ //this.getOriginList();
|
|
|
}
|
|
|
if (data.userSize != undefined) {
|
|
|
this.userSize = (data.userSize) - 1;
|
|
@@ -165,18 +177,25 @@ export default {
|
|
|
console.log("您的浏览器不支持socket")
|
|
|
} else {
|
|
|
// 创建 WebSocketClient 实例并连接到服务端 API 接口
|
|
|
- this.client = new WebSocketClient('wss://kps.scdayou.com/ws/apo/ws')
|
|
|
+ this.client = new WebSocketClient('wss://kps.scdayou.com/ws/apo/ws')
|
|
|
+ //this.client = new WebSocketClient('ws://127.0.0.1:8090/apo/ws')
|
|
|
this.client.connect()
|
|
|
}
|
|
|
},
|
|
|
getAnalysisList() {
|
|
|
+
|
|
|
const that = this
|
|
|
+ that.listLoading = true;
|
|
|
this.$api.dashboard.getMergeData()
|
|
|
.then((res) => {
|
|
|
that.analysisData = res.data.analysisData;
|
|
|
that.itemName = res.data.itemName;
|
|
|
that.cycleName = res.data.cycleName;
|
|
|
that.type = res.data.typeName;
|
|
|
+ setTimeout(()=>{
|
|
|
+ that.listLoading = false
|
|
|
+ },2000)
|
|
|
+
|
|
|
})
|
|
|
.catch(() => {
|
|
|
that.listLoading = false
|
|
@@ -222,6 +241,9 @@ export default {
|
|
|
position: relative;
|
|
|
width: 100%;
|
|
|
}
|
|
|
+.mask{
|
|
|
+ opacity: 0.3;
|
|
|
+}
|
|
|
.left {
|
|
|
margin: 0;
|
|
|
padding-left: 10px;
|
|
@@ -288,4 +310,93 @@ export default {
|
|
|
top: 1%;
|
|
|
height: 40px;
|
|
|
}
|
|
|
+
|
|
|
+#page {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+#container {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+#h3 {
|
|
|
+ color: black;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+#ring {
|
|
|
+ width: 190px;
|
|
|
+ height: 190px;
|
|
|
+ border: 1px solid transparent;
|
|
|
+ border-radius: 50%;
|
|
|
+ position: absolute;
|
|
|
+}
|
|
|
+
|
|
|
+#ring:nth-child(1) {
|
|
|
+ border-bottom: 8px solid rgb(255, 141, 249);
|
|
|
+ animation: rotate1 2s linear infinite;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes rotate1 {
|
|
|
+ from {
|
|
|
+ transform: rotateX(50deg) rotateZ(110deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ transform: rotateX(50deg) rotateZ(470deg);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+#ring:nth-child(2) {
|
|
|
+ border-bottom: 8px solid rgb(255,65,106);
|
|
|
+ animation: rotate2 2s linear infinite;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes rotate2 {
|
|
|
+ from {
|
|
|
+ transform: rotateX(20deg) rotateY(50deg) rotateZ(20deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ transform: rotateX(20deg) rotateY(50deg) rotateZ(380deg);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+#ring:nth-child(3) {
|
|
|
+ border-bottom: 8px solid rgb(0,255,255);
|
|
|
+ animation: rotate3 2s linear infinite;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes rotate3 {
|
|
|
+ from {
|
|
|
+ transform: rotateX(40deg) rotateY(130deg) rotateZ(450deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ transform: rotateX(40deg) rotateY(130deg) rotateZ(90deg);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+#ring:nth-child(4) {
|
|
|
+ border-bottom: 8px solid rgb(252, 183, 55);
|
|
|
+ animation: rotate4 2s linear infinite;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes rotate4 {
|
|
|
+ from {
|
|
|
+ transform: rotateX(70deg) rotateZ(270deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ transform: rotateX(70deg) rotateZ(630deg);
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|