|
@@ -1,29 +1,31 @@
|
|
<template>
|
|
<template>
|
|
<div class="body">
|
|
<div class="body">
|
|
- <div class="db_header">
|
|
|
|
- <!-- <div class="logoTop">Logo</div> -->
|
|
|
|
- <div class="db_header_title">
|
|
|
|
- <div v-if="type == 1">综合数据中心</div>
|
|
|
|
- <div v-if="type == 2">课程数据中心</div>
|
|
|
|
- <div v-if="type == 3">学生数据中心</div>
|
|
|
|
- <div v-if="type == 5">项目数据中心</div>
|
|
|
|
- <div v-if="type == 4">教师数据中心</div>
|
|
|
|
|
|
+ <div class="db_bg">
|
|
|
|
+ <div class="db_header">
|
|
|
|
+ <!-- <div class="logoTop">Logo</div> -->
|
|
|
|
+ <div class="db_header_title">
|
|
|
|
+ <!-- <div v-if="type == 1">综合数据中心</div>
|
|
|
|
+ <div v-if="type == 2">课程数据中心</div>
|
|
|
|
+ <div v-if="type == 3">学生数据中心</div>
|
|
|
|
+ <div v-if="type == 5">项目数据中心</div>
|
|
|
|
+ <div v-if="type == 4">教师数据中心</div> -->
|
|
|
|
+ </div>
|
|
|
|
+ <div class="db_check">
|
|
|
|
+ <div :class="{ active: type == 1 }" @click="setType(1)">综合数据</div>
|
|
|
|
+ <div :class="{ active: type == 2 }" @click="setType(2)">课程数据</div>
|
|
|
|
+ <div :class="{ active: type == 5 }" @click="setType(5)" v-if="scourseLength > 0">项目数据</div>
|
|
|
|
+ <div :class="{ active: type == 3 }" @click="setType(3)">学生数据</div>
|
|
|
|
+ <div :class="{ active: type == 4 }" @click="setType(4)">教师数据</div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
- <div class="db_check">
|
|
|
|
- <div :class="{ active: type == 1 }" @click="setType(1)">综合数据</div>
|
|
|
|
- <div :class="{ active: type == 2 }" @click="setType(2)">课程数据</div>
|
|
|
|
- <div :class="{ active: type == 5 }" @click="setType(5)" v-if="scourseLength > 0">项目数据</div>
|
|
|
|
- <div :class="{ active: type == 3 }" @click="setType(3)">学生数据</div>
|
|
|
|
- <div :class="{ active: type == 4 }" @click="setType(4)">教师数据</div>
|
|
|
|
|
|
+ <div class="db_body">
|
|
|
|
+ <school v-if="type == 1" :oid="oid" :org="org"></school>
|
|
|
|
+ <course v-if="type == 2" :oid="oid" :org="org"></course>
|
|
|
|
+ <project v-if="type == 5" :oid="oid" :org="org"></project>
|
|
|
|
+ <student v-if="type == 3" :oid="oid" :org="org"></student>
|
|
|
|
+ <teacher v-if="type == 4" :oid="oid" :org="org"></teacher>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div class="db_body">
|
|
|
|
- <school v-if="type == 1" :oid="oid" :org="org"></school>
|
|
|
|
- <course v-if="type == 2" :oid="oid" :org="org"></course>
|
|
|
|
- <project v-if="type == 5" :oid="oid" :org="org"></project>
|
|
|
|
- <student v-if="type == 3" :oid="oid" :org="org"></student>
|
|
|
|
- <teacher v-if="type == 4" :oid="oid" :org="org"></teacher>
|
|
|
|
- </div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
@@ -65,7 +67,7 @@ export default {
|
|
.post(this.$store.state.api + "getCourseLength", params)
|
|
.post(this.$store.state.api + "getCourseLength", params)
|
|
.then((res) => {
|
|
.then((res) => {
|
|
this.isLoading = false;
|
|
this.isLoading = false;
|
|
-
|
|
|
|
|
|
+
|
|
this.scourseLength = res.data[0][0].count;
|
|
this.scourseLength = res.data[0][0].count;
|
|
this.$forceUpdate();
|
|
this.$forceUpdate();
|
|
})
|
|
})
|
|
@@ -75,7 +77,7 @@ export default {
|
|
});
|
|
});
|
|
},
|
|
},
|
|
},
|
|
},
|
|
- mounted () {
|
|
|
|
|
|
+ mounted() {
|
|
this.getData();
|
|
this.getData();
|
|
},
|
|
},
|
|
};
|
|
};
|
|
@@ -87,6 +89,20 @@ export default {
|
|
width: 100%;
|
|
width: 100%;
|
|
min-width: 1550px;
|
|
min-width: 1550px;
|
|
min-height: 750px;
|
|
min-height: 750px;
|
|
|
|
+ background: #e7f3fe;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.db_bg {
|
|
|
|
+ width: calc(100% - 30px);
|
|
|
|
+ height: calc(100% - 30px);
|
|
|
|
+ /* padding: 10px; */
|
|
|
|
+ border-radius: 8px;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ border: 2px solid #3681FC3D;
|
|
|
|
+ box-shadow: 20px 20px 80px 0px #3681FC3D inset;
|
|
}
|
|
}
|
|
|
|
|
|
.db_header {
|
|
.db_header {
|
|
@@ -95,7 +111,7 @@ export default {
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
position: relative;
|
|
- background: #fff;
|
|
|
|
|
|
+ /* background: #fff; */
|
|
align-items: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
|
|
@@ -105,14 +121,22 @@ export default {
|
|
}
|
|
}
|
|
|
|
|
|
.db_header_title {
|
|
.db_header_title {
|
|
- font-weight: bold;
|
|
|
|
- font-size: 20px;
|
|
|
|
|
|
+ background-image: url("../../../assets/icon/test/data_title.png");
|
|
|
|
+ width: 290px;
|
|
|
|
+ height: 100%;
|
|
|
|
+ background-size: 100% 100%;
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 0;
|
|
|
|
+ /* font-weight: bold;
|
|
|
|
+ font-size: 20px; */
|
|
}
|
|
}
|
|
-.db_header_title > div {
|
|
|
|
|
|
+
|
|
|
|
+/* .db_header_title>div {
|
|
position: relative;
|
|
position: relative;
|
|
z-index: 9;
|
|
z-index: 9;
|
|
-}
|
|
|
|
-.db_header_title > div:after {
|
|
|
|
|
|
+} */
|
|
|
|
+
|
|
|
|
+/* .db_header_title > div:after {
|
|
content: "";
|
|
content: "";
|
|
position: absolute;
|
|
position: absolute;
|
|
width: 250px;
|
|
width: 250px;
|
|
@@ -125,31 +149,51 @@ export default {
|
|
-webkit-transform: skew(20deg);
|
|
-webkit-transform: skew(20deg);
|
|
transform: skew(359deg);
|
|
transform: skew(359deg);
|
|
z-index: 1;
|
|
z-index: 1;
|
|
|
|
+} */
|
|
|
|
+
|
|
|
|
+.db_header:after {
|
|
|
|
+ content: "";
|
|
|
|
+ position: absolute;
|
|
|
|
+ width: calc(100% - 300px);
|
|
|
|
+ height: 2px;
|
|
|
|
+ bottom: 0.5px;
|
|
|
|
+ left: 264px;
|
|
|
|
+ z-index: 1;
|
|
|
|
+ background: linear-gradient(90deg, #9ac1fd 0%, rgba(134, 179, 253, 0) 91.13%);
|
|
}
|
|
}
|
|
|
|
|
|
.db_check {
|
|
.db_check {
|
|
display: flex;
|
|
display: flex;
|
|
align-items: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
position: absolute;
|
|
- right: 30px;
|
|
|
|
- height: 100%;
|
|
|
|
|
|
+ left: 320px;
|
|
|
|
+ height: calc(100% - 12px);
|
|
|
|
+ top: 0;
|
|
}
|
|
}
|
|
|
|
|
|
-.db_check > div {
|
|
|
|
- padding: 14px 20px;
|
|
|
|
|
|
+.db_check>div {
|
|
|
|
+ padding: 10px 20px;
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
|
+ font-weight: 700;
|
|
|
|
+ font-style: italic;
|
|
|
|
+ color: #00000099;
|
|
}
|
|
}
|
|
|
|
|
|
-.db_check > div:hover {
|
|
|
|
- background: #edf4ff;
|
|
|
|
|
|
+.db_check>div:hover {
|
|
|
|
+ /* background: #edf4ff; */
|
|
|
|
+ background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 44.48%, rgba(255, 255, 255, 0) 99.69%);
|
|
|
|
+ color: #000000;
|
|
}
|
|
}
|
|
|
|
|
|
-.db_check > div.active {
|
|
|
|
- font-weight: 700;
|
|
|
|
- color: #297bff;
|
|
|
|
|
|
+.db_check>div.active {
|
|
|
|
+ /* font-weight: 700; */
|
|
|
|
+ /* color: #297bff; */
|
|
|
|
+ color: #000000;
|
|
background: #edf4ff;
|
|
background: #edf4ff;
|
|
- border-top: 2px solid #297bff;
|
|
|
|
|
|
+ /* border-top: 2px solid #297bff; */
|
|
|
|
+ border-bottom: 3px solid #3681FC;
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
|
|
+ background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 44.48%, rgba(255, 255, 255, 0) 99.69%);
|
|
}
|
|
}
|
|
|
|
|
|
/* .db_check > div + div {
|
|
/* .db_check > div + div {
|
|
@@ -160,6 +204,6 @@ export default {
|
|
height: calc(100% - 50px);
|
|
height: calc(100% - 50px);
|
|
width: 100%;
|
|
width: 100%;
|
|
overflow: auto;
|
|
overflow: auto;
|
|
- background: rgb(231, 242, 252);
|
|
|
|
|
|
+ /* background: rgb(231, 242, 252); */
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|