样式调整

src/assets/css/home.scss

@@ -31,12 +31,12 @@
     padding: 10px;
     padding-left: 20px;
     border-radius: 10px;
-    background: rgb(255, 255, 255);
+    background: rgba(255, 255, 255, 0.17);
     width: 206px;
     height: 165px;
     display: none;
-
-    z-index: 999;
+    backdrop-filter: blur(30.5px);
+    z-index: 888;
 
     .model-detail {
         position: absolute;

src/components/CircleProgress.vue

@@ -28,7 +28,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { ref, computed, toRefs, watch, onMounted, nextTick } from 'vue';
+import { ref, computed, toRefs, watch, onMounted } from 'vue';
 import ScrollNum from './roll.vue'
 
 const props = defineProps({
@@ -57,7 +57,7 @@ const props = defineProps({
 });
 const { height, width, color, targetValue, textPosition } = toRefs(props);
 
-let showProgress = ref<number>(0);
+// let showProgress = ref<number>(0);
 const numArr = computed(() => {
     const str = String(targetValue.value)
     let arr = <any>[]
@@ -78,16 +78,16 @@ const circleValue = () => {
             return
         }
         (timer as any) = setInterval(() => {
-            progressValue.value += 10
-        }, 2000)
+            progressValue.value += 5
+        }, 3000)
     } else {
         if (progressValue.value = 120) {
             timer.value = null
             return
         }
         (timer as any) = setInterval(() => {
-            progressValue.value += 10
-        }, 2000)
+            progressValue.value += 5
+        }, 3000)
     }
 }
 

src/components/home.vue

@@ -160,7 +160,7 @@ export default ({
             console.log("当前鼠标点击的坐标", e, e.clientX, e.clientY);
         }
         const handleResponseFunction = (data) => {
-            // console.log("从UE返回过来的值", data)
+            console.log("从UE返回过来的值", data)
             let json = eval("(" + data + ")");//转对象
 
             console.log("clickData---点击的数据", json)
@@ -237,7 +237,7 @@ export default ({
         }
         const windowSize = function () {
             // console.log("监听一下窗口是不是改了--click", lineContainer);
-            callUIInteraction("windowSizeChange")
+            callUIInteraction("windowSize")
         }
 
 

src/components/left.vue

@@ -23,16 +23,13 @@
             <div class="title">
                 <div class="text">本周课程统计</div>
             </div>
-            <!-- <Number numm="1234" :numLen="4" /> -->
             <div class="content">
                 <div class="count" v-for="(item, index) in classCount" :key="index">
                     <CircleProgress :target-value="item.number" :color="item.color" text-position="bottom">
                         <img :src="leftimg + item.imgnumber + '.png'" alt="">
-                        <!-- <img :src="'src/assets/img/' + item.imgnumber + '.png'" alt=""> -->
                     </CircleProgress>
                     <div class="text">{{ item.text }}</div>
 
-                    <!-- <Number :numm="item.text" :numLen="4" /> -->
                 </div>
             </div>
         </div>
@@ -103,19 +100,9 @@ export default ({
     name: 'Histogram',
     components: { ElScrollbar, ElPagination, ElDialog, ElCarousel, ElCarouselItem, CircleProgress },
     setup() {
+        // 教室分类统计
+        const classRoomCount = ref([])
 
-        const pieData = reactive([{
-            value: 1048,
-            name: '基础型'
-        },
-        {
-            value: 735,
-            name: '扩展型'
-        },
-        {
-            value: 580,
-            name: '其他'
-        }])
         const classPie = reactive({
             option: {
                 color: ['#4ED2E4', '#5E91F6', '#67F0A8'],
@@ -135,28 +122,28 @@ export default ({
                         formatter: () => { // 格式化要展示的文本
                             return `总计\n\n1430间`
                         },
+
                         // formatter: '{total|' + 200 + '}' + '\n\r' + '{active|共发布活动}',
                         // 等着获取了数据在给样式
-                        rich: {
-                            total: {
-                                fontSize: 35,
-                                fontFamily: "微软雅黑",
-                                color: '#454c5c'
-                            },
-                            active: {
-                                fontFamily: "微软雅黑",
-                                fontSize: 16,
-                                color: '#6c7a89',
-                                lineHeight: 30,
-                            },
-                        }
-
+                        // rich: {
+                        //     total: {
+                        //         fontSize: 35,
+                        //         fontFamily: "微软雅黑",
+                        //         color: '#454c5c'
+                        //     },
+                        //     active: {
+                        //         fontFamily: "微软雅黑",
+                        //         fontSize: 16,
+                        //         color: '#6c7a89',
+                        //         lineHeight: 30,
+                        //     },
+                        // }
 
                     },
                     labelLine: {
                         show: false
                     },
-                    data: pieData
+                    data: classRoomCount
 
                 }]
             },
@@ -210,8 +197,7 @@ export default ({
 
 
 
-        // 教室分类统计
-        const classRoomCount = ref([])
+
         // 本周课程统计数据
         const classCount = ref([])
         // 智慧教室使用数据
@@ -224,7 +210,9 @@ export default ({
             let { course, classroomDetail, category } = res.data;
             classRoomCount.value = category;
 
-
+            if (classRoomCount.value) {
+                initeCharts()
+            }
             classCount.value = course;
             console.log("看一下颜色", classCount.value)
             classRoom.value = classroomDetail
@@ -234,7 +222,7 @@ export default ({
         let timer = ref(null)
         let testMain = ref(null)
         onMounted(() => {
-            initeCharts()
+
             getClassData()
             start()
         })

src/components/roll.vue

@@ -86,8 +86,9 @@ export default {
 }
 
 .animate {
-    animation: move .3s linear infinite,
-        bounce-in-down 1s calc(var(--delay) * 1s) forwards;
+    animation: move 1s linear forwards
+        /* animation: move .3s linear infinite, */
+        /* bounce-in-down 1s calc(var(--delay) * 1s) forwards; */
 
 }