样式调整

src/assets/css/home.scss

@@ -28,51 +28,46 @@
 // 点击模型弹出框
 .modelInfo {
     position: absolute;
-    padding: 10px;
-    padding-left: 20px;
-    border-radius: 10px;
     background: rgba(255, 255, 255, 0.17);
-    width: 206px;
-    height: 165px;
-    display: none;
+    border-radius: 10px;
     backdrop-filter: blur(30.5px);
-    z-index: 888;
+    z-index: 9988;
 
-    .model-detail {
-        position: absolute;
-        // border: 2px dashed #00CF78;
-        display: none;
+    // .model-detail {
+    //     position: absolute;
+    //     // border: 2px dashed #00CF78;
+    //     display: none;
 
-        display: flex;
-        justify-content: space-between;
-        flex-direction: column;
-        // flex-wrap: wrap;
-        // padding: 10px;
+    //     display: flex;
+    //     justify-content: space-between;
+    //     flex-direction: column;
+    //     // flex-wrap: wrap;
+    //     // padding: 10px;
 
 
-        span {
-            font-size: 16px;
+    //     span {
+    //         font-size: 16px;
 
-            width: 100%;
-            font-family: Microsoft YaHei UI;
+    //         width: 100%;
+    //         font-family: Microsoft YaHei UI;
 
-            // border: 1px solid red;
-            // margin: 6px;
-            margin: 6px 0;
-            font-weight: 400;
+    //         // border: 1px solid red;
+    //         // margin: 6px;
+    //         margin: 6px 0;
+    //         font-weight: 400;
 
-            .title {
-                color: #333;
-                font-weight: 700;
-            }
+    //         .title {
+    //             color: #333;
+    //             font-weight: 700;
+    //         }
 
-            .green {
-                color: #00C767;
-            }
+    //         .green {
+    //             color: #00C767;
+    //         }
 
-            .red {
-                color: #DB4A36;
-            }
-        }
-    }
+    //         .red {
+    //             color: #DB4A36;
+    //         }
+    //     }
+    // }
 }

src/components/CircleProgress.vue

@@ -13,7 +13,7 @@
             <circle r="38" cx="48" cy="48" fill="none" stroke-miterlimit="20" stroke-width="4" class="svg-progress"
                 style="stroke-dasharray: 275, 279.602; stroke: rgba(255, 255, 255, 0.19)"></circle>
             <circle r="38" transform="rotate(180 48 48)" cx="48" cy="48" fill="none" stroke-miterlimit="20" stroke-width="4"
-                class="svg-progress" :style="`stroke-dasharray: ${progressValue}, 279.602;stroke:${color};`"></circle>
+                class="svg-progress" :style="`stroke-dasharray: 240, 279.602;stroke:${color};`"></circle>
         </svg>
         <div class="mask">
             <slot></slot>
@@ -21,16 +21,19 @@
     </div>
 
     <div class="bottomNumber" v-if="textPosition == 'bottom'">
-        <ul class="flex">
+        <ul class="flex" style="width: 65px;display: flex;align-items: center;justify-content: center;">
             <!-- <ScrollNum v-for="(num, idx) of numArr" :key="idx" as="li" :i="num" :delay="idx + 1" /> -->
-            <count-to :useEasing="false" style="font-size: 0.08rem;"  :startVal='1' :endVal='targetValue' :duration='2000'></count-to>
-            <span> (人)</span>
+            <div style="color: #fff;font-weight: 600; ">
+                <count-to :useEasing="false" style="font-size: 0.08rem;"  :startVal='1' :endVal='targetValue' :duration='2000'></count-to>
+            </div>
+            <span style="color: antiquewhite;"   v-if="text.includes('课程')">(节)</span>
+            <span style="color: antiquewhite;" v-else>(个)</span>
         </ul>
 
     </div>
 </template>
 <script setup lang="ts">
-import { ref, computed, toRefs, watch, onMounted } from 'vue';
+import { ref, computed, toRefs, watch, onMounted,reactive  } from 'vue';
 import ScrollNum from './roll.vue';
 import { CountTo } from 'vue3-count-to';
 
@@ -44,6 +47,10 @@ const props = defineProps({
         type: String,
         default: '#4c7cee',
     },
+    text: {
+        type: String,
+        default: -1,
+    },
     width: {
         type: String,
         default: '54.6px',
@@ -58,7 +65,7 @@ const props = defineProps({
         default: 'top',
     }
 });
-const { height, width, color, targetValue, textPosition } = toRefs(props);
+const { height, width, color, targetValue, textPosition,text } = toRefs(props);
 
 // let showProgress = ref<number>(0);
 const numArr = computed(() => {
@@ -98,6 +105,8 @@ const circleValue = () => {
 
 onMounted(() => {
     circleValue()
+
+ 
 })
 
 // const progressValue = ref(0)
@@ -105,6 +114,8 @@ watch(textPosition, (newValue) => {
     console.log("监听一下现在的位置", newValue)
     // progressValue.value = 360;
 });
+
+
 </script>
 <style lang="scss" scoped>
 .progress {

src/components/home.vue

@@ -10,15 +10,24 @@
             </div>
 
         </el-container>
-        <div ref="popoverRef" id="popoverRef" class="modelInfo">
-            <div class="model-detail">
-                <span v-for="item in classDeviceInfo">
-
-                    <span class="title">{{ item && item.name }}： </span>
-                    <span :class="item.online ? 'green' : item.online == 'false' ? 'red' : ''">{{ item && item.value }}
-                    </span>
-
-                </span>
+        <div ref="popoverRef" id="popoverRef" class="modelInfo" >
+            <div class="model-detail" >
+                <div v-for="item in classDeviceInfo"  style="margin-bottom: 5px;">
+                    
+                    <div style="width: 180px;text-align: center;height: 30px;line-height: 30px;font-size: 12px;color: #fff; background-color: #49484890;: blur(20px);">
+                    {{ item[0].value }}
+                    </div>
+                    <div v-for="item2 in item"  style="width: 180px;height: 30px;display: flex;align-items: center;">
+                        
+                       <span style="color: #fff;margin-left: 5px; font-weight: 700;"> {{ item2.name }} :</span>
+                       <span v-if="item2.value!='在线'" style=" font-family: 100; margin-left: 5px;color: #ffffffeb;">{{ item2.value }}</span>
+                       <span v-else style=" font-family: 100; margin-left: 5px;color: #10C383;">{{ item2.value }}</span>
+                    </div>
+                   
+                    <!-- <span :class="item.online ? 'green' : item.online == 'false' ? 'red' : ''">213
+                    </span> -->
+
+                </div>
             </div>
         </div>
 
@@ -144,13 +153,13 @@ export default ({
         })
         const classDeviceInfo = ref([])
         const classDataLoaded = ref(false)
-        const classDevice = async function (deviceCode) {
-            let res = await getClassDetail(deviceCode)
-            console.log("获取到了当前点击物体得详情", res)
-            classDeviceInfo.value = res.data;
-            classDataLoaded.value = true
+        // const classDevice = async function (deviceCode) {
+        //     let res = await getClassDetail(deviceCode)
+        //     console.log("获取到了当前点击物体得详情", res)
+        //     classDeviceInfo.value = res.data;
+        //     classDataLoaded.value = true
 
-        }
+        // }
         const clickData1 = ref({})
         const mouseClick = function (e) {
             // console.log("屏幕点击位置看", e)
@@ -186,15 +195,18 @@ export default ({
                 console.log('sadasd',json.deviceCode);
                 let replacedStr = json.deviceCode.replace("/", "A");
                 getClassDetail(replacedStr).then(res => {
+                    console.log('sad21312',res);
                     classDeviceInfo.value = res.data;
-                    classDeviceInfo.value.map(i => {
-                        if (i.value == "在线") {
-                            i.online = true
-                        }
-                        if (i.value == "离线") {
-                            i.online = false
-                        }
-                    })
+
+                    console.log('asd2121',classDeviceInfo.value);
+                    // classDeviceInfo.value.map(i => {
+                    //     if (i.value == "在线") {
+                    //         i.online = true
+                    //     }
+                    //     if (i.value == "离线") {
+                    //         i.online = false
+                    //     }
+                    // })
                     console.log("json.y ", json,);
                     linedomRef.value.style.top = (clickData.value.y) + "px";
                     linedomRef.value.style.left = (clickData.value.x) + "px";
@@ -214,7 +226,7 @@ export default ({
                             popoverRef.value.style.left = (json.x - 120) + 'px'
                             break;
                         case "Right":
-                            popoverRef.value.style.top = (Number(json.y)) + 'px'
+                            popoverRef.value.style.top = (Number(json.y)) -100+ 'px'
                             popoverRef.value.style.left = Number(json.x) + 100 + 'px'
 
                             break;

src/components/left.vue

@@ -25,7 +25,7 @@
             </div>
             <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">
+                    <CircleProgress :target-value="item.number" :color="item.color" :text="item.text" text-position="bottom">
                         <img :src="leftimg + item.imgnumber + '.png'" alt="">
                     </CircleProgress>
                     <div class="text">{{ item.text }}</div>

src/components/right.vue

@@ -156,12 +156,15 @@ export default ({
         //获取页面数据
         const getDeviceData = async () => {
             let res = await getDevice()
+            console.log('s12312123',res);
             if (res.code !== 200) {
                 ElMessage.error("数据请求出错");
             }
             let { category, monitor, status } = res.data
             // 物联设备类型数据
-            interDevice.value = category;
+            console.log('sadui12u31',category);
+            //截取数组前6项
+            interDevice.value = category.slice(0,6);
             // 互动教室
             carouselData.value = monitor
             //物联设备统计