本周课程统计替换成教室统计

public/config.js

@@ -9,7 +9,8 @@
 window.g = {
     // 获取数据请求地址
     // BASE_API: "https://weizhi.huanghuai.edu.cn/yyzioc-server/",//prod
-    BASE_API: "https://weizhi.huanghuai.edu.cn/jsioc-server/",//dev
+    BASE_API: "https://weizhi.huanghuai.edu.cn/yyzioc-server/",//prod
+    // BASE_API: "https://782y5867q3.vicp.fun/ioc-server/",//dev
     // BASE_API: "https://test.lqkj.top//cmioc3-server",
 
     // BASE_API: "http://192.168.4.219:12397/ioc-server",

src/assets/css/left.scss

@@ -17,6 +17,7 @@
     flex-direction: column;
     padding: 11px 10px 15px 10px; //教室分类统计
     pointer-events: auto;
+
     .left_top {
         box-sizing: border-box;
         width: 392px;
@@ -73,12 +74,12 @@
         box-sizing: border-box;
         height: 219px;
         width: 392px;
-        height: 188px;
+        height: 178px;
 
         //  border: 2px solid #5F7BDC;
         .content {
             display: flex;
-            
+            padding: 19px 0px;
             .count {
                 display: flex;
                 flex-direction: column;
@@ -138,6 +139,98 @@
                 //     width: 60px;
                 // }
             }
+
+            .content-item {
+                flex: 1;
+                margin: 8px;
+                background-size: 100% 100%;
+                background-repeat: no-repeat;
+                padding: 10px 8px;
+
+                &:nth-child(1) {
+                    background-image: url('/public/img/duomeiti-total-bg.png');
+
+                }
+
+                &:nth-child(2) {
+                    background-image: url('/public/img/zhihuijiaoshi-total-bg.png');
+                    background-size: 100% 100%;
+                }
+
+                .content-item-header {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    // width: 100%;
+                    // margin-bottom: 10px;
+                    .item-header-title {
+                        color: #FFF;
+                        font-size: 13px;
+                        font-weight: 400;
+                        line-height: 20px;
+                    }
+
+                    .item-header-total-num {
+                        color: #FFF;
+                        font-size: 18px;
+                        font-style: normal;
+                        font-weight: 600;
+                        line-height: 20px;
+
+                        span {
+                            font-size: 12px;
+                            
+                        }
+                    }
+                }
+
+                .content-item-body {
+                    display: flex;
+
+                    .body-left-icon {
+                        width: 44px;
+                        height: 44px;
+                        margin-right: 4px;
+                    }
+
+                    .body-right-text {
+                        flex: 1;
+                        height: 44px;
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: space-between;
+                        .total-box,
+                        .online-box {
+                            display: flex;
+                            align-items: center;
+                            justify-content: space-between;
+                            width: 100%;
+                            font-size: 10px;
+                            color: #fff;
+                            
+                            .num1,
+                            .num2 {
+                                font-family: D-DIN;
+                                font-size: 14px;
+                                font-weight: 700;
+                                line-height: normal;
+                                font-weight: 700;
+                                span{
+                                    font-size: 10px;
+                                    font-family: "Alibaba PuHuiTi 2.0";
+                                }
+                            }
+                            .num1{
+                                color: #28FFCD;
+                            }
+                            .num2{
+                                color: #FF9B28;
+
+                            }
+                        }
+                    }
+                }
+            }
         }
 
     }
@@ -167,6 +260,7 @@
             height: 100%;
             display: flex;
             flex-direction: column;
+
             .th {
                 font-weight: 700;
                 display: flex;
@@ -333,7 +427,8 @@
                     cursor: pointer;
                     display: flex;
                     align-items: center;
-                    .cureet-text{
+
+                    .cureet-text {
                         max-width: 100px;
                         overflow: hidden;
                         white-space: nowrap;
@@ -343,9 +438,11 @@
                 }
 
             }
-            .scroll-container{
+
+            .scroll-container {
                 flex: 1;
-                .empty-container{
+
+                .empty-container {
                     margin-top: 10px;
                     display: flex;
                     justify-content: center;
@@ -412,11 +509,12 @@
 
                     .item-content-left {
                         flex: 1;
+
                         .position {
-                           width: 150px;
-                           white-space: nowrap;
-                           text-overflow: ellipsis;
-                           overflow: hidden;
+                            width: 150px;
+                            white-space: nowrap;
+                            text-overflow: ellipsis;
+                            overflow: hidden;
                         }
                     }
 

src/components/Header.vue

@@ -15,7 +15,7 @@
       </div>
       <el-divider direction="vertical" />
       <div class="right-weatherInfo">
-        <img class="weather-icon" :src="sun" alt="" />
+        <img class="weather-icon" :src="wether+ + weatherInfo.code + '@2x.png'" alt="" />
         <div class="info">
           <div class="text">{{ weatherInfo.text }}</div>
           <div class="temp">{{ weatherInfo.temperature }} <span>°C</span></div>
@@ -80,6 +80,7 @@ onUnmounted(() => {
 const headImg = ref("./img/head.png");
 const headLogo = ref("./img/logo.png");
 const sun = ref("./img/sun.png");
+const wether = ref("./img/weather/");
 </script>
 <style scoped lang="scss">
 .header {
@@ -153,8 +154,8 @@ const sun = ref("./img/sun.png");
       align-items: center;
       // height: 100%;
       .weather-icon {
-        width: 30px;
-        height: 30px;
+        width: 28px;
+        height: 28px;
       }
       .info {
         flex: 1;

src/components/left.vue

@@ -46,16 +46,79 @@
     </div>
     <div class="left-center">
       <div class="title" :style="{ background: `url(${frame})` }">
-        <div class="text">本周课程统计</div>
+        <div class="text">教室统计</div>
       </div>
       <div class="content">
-        <div class="count" v-for="(item, index) in classCount" :key="index">
+        <div class="content-item">
+          <div class="content-item-header">
+            <div class="item-header-title">多媒体教室总数</div>
+            <div class="item-header-total-num">
+              <countTo :startVal="0" :endVal="summaryStatistic.mdeiaClassroomCount" :decimals="0" :duration="3000">
+              </countTo>
+              <span>间</span>
+            </div>
+          </div>
+          <div class="content-item-body">
+            <img class="body-left-icon" src="/public/img/duomeiti-left-icon.png" alt="" srcset="" />
+            <div class="body-right-text">
+              <div class="total-box">
+                <div>总物联数量</div>
+                <div class="num1">
+                  <countTo :startVal="0" :endVal="summaryStatistic.mediaClassroomDeviceCount" :decimals="0"
+                    :duration="3000">
+                  </countTo><span>个</span>
+                </div>
+              </div>
+              <div class="online-box">
+                <div>在线物联数量</div>
+                <div class="num2">
+                  <countTo :startVal="0" :endVal="summaryStatistic.mediaClassroomOnlineDeviceCount" :decimals="0"
+                    :duration="3000">
+                  </countTo><span>个</span>
+                </div>
+              </div>
+            </div>
+
+          </div>
+        </div>
+        <div class="content-item">
+          <div class="content-item-header">
+            <div class="item-header-title">智慧教室总数</div>
+            <div class="item-header-total-num">
+              <countTo :startVal="0" :endVal="summaryStatistic.wiseClassroomCount" :decimals="0" :duration="3000">
+              </countTo><span>间</span>
+            </div>
+          </div>
+          <div class="content-item-body">
+            <img class="body-left-icon" src="/public/img/zhihuijiaoshi-left-icon.png" alt="" srcset="" />
+            <div class="body-right-text">
+              <div class="total-box">
+                <div>总物联数量</div>
+                <div class="num1">
+                  <countTo :startVal="0" :endVal="summaryStatistic.wiseClassroomDeviceCount" :decimals="0"
+                    :duration="3000">
+                  </countTo><span>个</span>
+                </div>
+              </div>
+              <div class="online-box">
+                <div>在线物联数量</div>
+                <div class="num2">
+                  <countTo :startVal="0" :endVal="summaryStatistic.wiseClassroomOnlineDeviceCount" :decimals="0"
+                    :duration="3000">
+                  </countTo><span>个</span>
+                </div>
+              </div>
+            </div>
+
+          </div>
+        </div>
+        <!-- <div class="count" v-for="(item, index) in classCount" :key="index">
           <CircleProgress :target-value="item.number" :color="item.color" :text="item.text" :index="index"
             text-position="bottom">
             <img :src="leftimg + item.imgnumber + '.png'" alt="" />
           </CircleProgress>
           <div class="text">{{ item.text }}</div>
-        </div>
+        </div> -->
       </div>
     </div>
 
@@ -275,7 +338,7 @@ import {
   ElIcon,
 } from "element-plus";
 import { Search, ArrowDown } from "@element-plus/icons-vue";
-import { getClass, classSelections, queryClassroom } from "../request/api";
+import { getClass, classSelections, queryClassroom, summaryStatisticV3Api } from "../request/api";
 import CircleProgress from "./CircleProgress.vue";
 
 import {
@@ -288,6 +351,9 @@ import Scroll from "./ScrollView.vue";
 // import { callUIInteraction } from "../webrtcVideo";
 import Tag from "./Tag.vue";
 
+import axios from 'axios'
+import { CountTo } from "vue3-count-to";
+
 
 export default {
   name: "Histogram",
@@ -299,7 +365,7 @@ export default {
     ElCarouselItem,
     CircleProgress,
     Tag,
-
+    CountTo,
     Vue3SeamlessScroll,
     VerticalScroll,
     Scroll,
@@ -632,6 +698,8 @@ export default {
         getClassSelections();
         //获取教室列表数据
         getClassRoomList();
+        getSummaryStatisticV3()
+
       }, 30000);
     };
     onMounted(() => {
@@ -640,6 +708,9 @@ export default {
       getClassSelections();
       //获取教室列表数据
       getClassRoomList();
+      // 获取教师统计数据
+      getSummaryStatisticV3()
+      summaryStatisticV3Api
       scrollContainerHeight.value = scrollContainerRef.value.clientHeight;
 
       clearTimeoutTimer();//清除定时器
@@ -648,6 +719,22 @@ export default {
 
 
     });
+    let summaryStatistic = ref({
+      mdeiaClassroomCount: 0,
+      mediaClassroomOnlineDeviceCount: 0,
+      mediaClassroomDeviceCount: 0,
+      wiseClassroomCount: 0,
+      wiseClassroomDeviceCount: 0,
+      wiseClassroomOnlineDeviceCount: 0
+    });
+    const getSummaryStatisticV3 = () => {
+      axios.get("https://weizhi.huanghuai.edu.cn/ioc-server/summaryStatisticV3/1").then(res => {
+        console.log("教室统计数据s", res)
+        if (res.data.code == 200) {
+          summaryStatistic.value = res.data.data.wiseClassroom
+        }
+      })
+    }
 
     onBeforeUnmount(() => {
       clearTimeout(timer.value);
@@ -656,46 +743,8 @@ export default {
       clearTimeout(timer.value);
     });
 
-    function testMove() {
-      clearTimeout(timer.value);
-    }
-    function MarqueeTest() {
-      return;
-      let test1 = testMain.value;
-
-      //判断组件是否渲染完成
-      if (test1.offsetHeight == 0) {
-        test1 = testMain.value;
-      } else {
-        //如果列表数量过少不进行滚动
-        // console.log("test1", test1.childNodes)
-        if (test1.childNodes.length < 6) {
-          clearTimeout(timer.value);
-          return;
-        }
-        //组件进行滚动
-        test1.scrollTop += 1;
-
-        //判断滚动条是否滚动到底部
-        if (test1.scrollTop == test1.scrollHeight - test1.clientHeight) {
-          //获取组件第一个节点
-          let a = test1.childNodes[0];
-          //删除节点
-          test1.removeChild(a);
-          //将该节点拼接到组件最后
-          test1.append(a);
-        }
-      }
-    }
 
-    // 定时刷新教师统计数据
-    let classRoomInterval = ref(null);
-    const starttimeInterval = () => {
-      clearTimeout(classRoomInterval.value);
-      classRoomInterval.value = setInterval(() => {
-        getClassData();
-      }, 5000);
-    };
+
 
     // 占用教室数量
     const occupiedClassroomsCount = computed(() => {
@@ -710,7 +759,7 @@ export default {
       return (((occupied / total) * 100).toFixed(2)) == 'NaN' ? 0 : (((occupied / total) * 100).toFixed(2));
     });
 
-    // 获取教师下拉选择
+    // 获取教室下拉选择
     let buildings = ref({});
     let categoryType = ref({});
     let leafs = ref({});
@@ -806,7 +855,6 @@ export default {
       classRoom,
       interDevice,
       handleRoom,
-      testMove,
       testMain,
       popoverRef,
       classRoomCount,
@@ -848,7 +896,8 @@ export default {
       scrollContainerHeight,
       scrollContainerRef,
       noData,
-      isShhow
+      isShhow,
+      summaryStatistic
     };
   },
 };

src/request/api.js

@@ -41,4 +41,8 @@ export const queryClassroom = (data) => service.post(`/wisdomClass/queryClassroo
 
 export const equipmentDetailsApi = (data) => service.get(`/wisdomClass/equipmentDetails?classroomCode=${data}`)
 
+export const summaryStatisticV3Api = (zoneId) => service.get(`/summaryStatisticV3/${zoneId}`)
+
+
+