feat: 区域级数据看板初始化

.prettierrc.cjs

@@ -13,8 +13,10 @@ module.exports = {
   insertPragma: false,
   // 在 JSX 中使用单引号替代双引号，默认false
   jsxSingleQuote: false,
+  // HTML、Vue 和 JSX 中每行强制使用单个属性
+  singleAttributePerLine: false,
   // 每行最多字符数量，超出换行(默认80)
-  printWidth: 80,
+  printWidth: 160,
   // 超出打印宽度 (always | never | preserve )
   proseWrap: "preserve",
   // 对象属性是否使用引号(as-needed | consistent | preserve;默认as-needed:对象的属性需要加引号才添加;)

src/layout/admin.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, watchEffect } from "vue";
 import { useWindowSize } from "@vueuse/core";
-import { AppMain, Navbar, TagsView } from "./components/index";
+import { AppMain, TagsView, AdminNavbar } from "./components/index";
 import Sidebar from "./components/Sidebar/index.vue";
 
 import { useAppStore } from "@/store/modules/app";
@@ -54,17 +54,13 @@ function handleOutsideClick() {
 <template>
   <div :class="classObj" class="app-wrapper">
     <!-- 手机设备侧边栏打开遮罩层 -->
-    <div
-      v-if="classObj.mobile && classObj.openSidebar"
-      class="drawer-bg"
-      @click="handleOutsideClick"
-    ></div>
+    <div v-if="classObj.mobile && classObj.openSidebar" class="drawer-bg" @click="handleOutsideClick"></div>
 
     <Sidebar class="sidebar-container" />
 
     <div :class="{ hasTagsView: showTagsView }" class="main-container">
       <div :class="{ 'fixed-header': fixedHeader }">
-        <navbar />
+        <AdminNavbar />
         <tags-view v-if="showTagsView" />
       </div>
 

src/layout/components/Navbar.vue

@@ -1,244 +0,0 @@
-<script setup lang="ts">
-import { storeToRefs } from "pinia";
-import { useRoute, useRouter } from "vue-router";
-import { useAppStore } from "@/store/modules/app";
-import { useTagsViewStore } from "@/store/modules/tagsView";
-import { useUserStore } from "@/store/modules/user";
-import { SchoolList } from "@/api/school/types";
-import { getSchoolSelect } from "@/api/school";
-import { watch } from "vue";
-import SvgIcon from "@/components/SvgIcon/index.vue";
-import { CaretBottom } from "@element-plus/icons-vue";
-const appStore = useAppStore();
-const tagsViewStore = useTagsViewStore();
-const userStore = useUserStore();
-const route = useRoute();
-const router = useRouter();
-const { device } = storeToRefs(appStore); // 设备类型：desktop-宽屏设备 || mobile-窄屏设备
-
-/**
- * 左侧菜单栏显示/隐藏
- */
-function toggleSideBar() {
-  appStore.toggleSidebar(true);
-}
-/**
- * vueUse 全屏
- */
-const { isFullscreen, toggle } = useFullscreen();
-/**
- * 注销
- */
-function logout() {
-  ElMessageBox.confirm("确定退出系统吗？", "提示", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  }).then(() => {
-    userStore
-      .logout()
-      .then(() => {
-        tagsViewStore.delAllViews();
-      })
-      .then(() => {
-        router.push(`/login?redirect=${route.fullPath}`);
-      });
-  });
-}
-/**
- * 学校数据
- */
-const schoolData = ref<SchoolList[]>();
-const schoolId = ref(0);
-const schoolNum = ref("");
-async function getSchoolData() {
-  getSchoolSelect()
-    .then(({ data }) => {
-      schoolData.value = data;
-      if (schoolId.value == 0) {
-        schoolId.value = data[0].school_id;
-        schoolNum.value = data[0].num;
-        userStore.changeSchool(schoolId.value, schoolNum.value);
-      }
-    })
-    .catch((error) => {
-      console.log(error);
-    });
-}
-onMounted(() => {
-  getSchoolData();
-});
-watch(
-  () => schoolId.value,
-  (newValue, oldValue) => {
-    let num: string = "";
-    schoolData.value?.some((school) => {
-      if (newValue == school.school_id) {
-        num = school.num;
-        return true;
-      }
-    });
-    //console.log("school", newValue, num);
-    userStore.changeSchool(newValue, num);
-  }
-);
-</script>
-
-<template>
-  <!-- 顶部导航栏 -->
-  <div class="navbar">
-    <!-- 左侧面包屑 -->
-    <div class="flex">
-      <Hamburger
-        :is-active="appStore.sidebar.opened"
-        @toggle-click="toggleSideBar"
-      />
-      <Breadcrumb />
-    </div>
-    <!-- 右侧导航设置 -->
-    <div class="flex">
-      <!-- 导航栏设置(窄屏隐藏)-->
-      <div v-if="device !== 'mobile'" class="setting-container">
-        <!--全屏 -->
-        <div class="setting-item" @click="toggle">
-          <svg-icon
-            :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
-            size="16px"
-          />
-        </div>
-      </div>
-      <!-- 学校选择下拉框 -->
-      <div class="nav-select">
-        <el-select
-          v-model="schoolId"
-          size="large"
-          placeholder="请选择学校"
-          :suffix-icon="CaretBottom"
-        >
-          <el-option
-            v-for="item in schoolData"
-            :key="item.school_id"
-            :label="item.name"
-            :value="item.school_id"
-          />
-        </el-select>
-      </div>
-      <!-- 用户头像 -->
-      <div class="avatar-container">
-        <span>学校编码：{{ userStore.schoolNum }}</span>
-        <span class="spl">|</span>
-        <img src="../../assets/login/avatar.png" alt="头像" />
-        <span class="">{{ userStore.nickname + " " + userStore.phone }}</span>
-        <span @click="logout"
-          ><svg-icon icon-class="exit" color="#006eff" size="20px"
-        /></span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.navbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 70px;
-  background-color: #fff;
-  box-shadow: 0 0 1px #0003;
-
-  .setting-container {
-    display: flex;
-    align-items: center;
-
-    .setting-item {
-      display: inline-block;
-      width: 30px;
-      height: 70px;
-      line-height: 70px;
-      color: #5a5e66;
-      text-align: center;
-      cursor: pointer;
-
-      &:hover {
-        background: rgb(249 250 251 / 100%);
-      }
-    }
-  }
-  .avatar-container {
-    display: flex;
-    align-items: center;
-    justify-items: center;
-    margin: 0 20px 0 0;
-    cursor: pointer;
-    img {
-      width: 40px;
-      height: 40px;
-      line-height: 40px;
-      text-align: center;
-      border-radius: 20px;
-      background: #494949;
-    }
-    span {
-      margin-left: 12px;
-      font-size: 16px;
-      color: #494949;
-      &.spl {
-        margin: 0 12px 0 12px;
-        color: #d7d8d8;
-      }
-    }
-  }
-  .svg-icon {
-    margin-bottom: -2px;
-  }
-  .el-select {
-    padding: 15px 0;
-    width: 280px;
-    margin-left: 12px;
-  }
-}
-/* 自定义 el-select 样式 */
-:deep(.el-input__wrapper) {
-  background: #efefef;
-  border-radius: 12px;
-}
-
-/* el-select 各种边框线隐藏**/
-:deep(.el-select) {
-  --el-select-input-focus-border-color: none !important;
-}
-:deep(.el-input__wrapper) {
-  box-shadow: none !important;
-}
-:deep(.el-select .el-input.is-focus .el-input__wrapper) {
-  box-shadow: none !important;
-}
-:deep(.el-select .el-input__wrapper.is-focus) {
-  box-shadow: none !important;
-}
-:deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) {
-  box-shadow: none !important;
-}
-//移动端兼容
-.mobile {
-  .navbar {
-    .nav-select {
-      position: absolute;
-      left: 0;
-      top: 80px;
-      z-index: 1;
-      width: 100%;
-      box-sizing: border-box;
-      padding: 0 24px;
-      .el-select {
-        width: 100%;
-        padding: 0;
-        margin: 0;
-      }
-      :deep(.el-input__wrapper) {
-        background: #ffffff;
-      }
-    }
-  }
-}
-</style>

src/layout/components/Navbar/Admin/index.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { useAppStore } from "@/store/modules/app";
+import Fullscreen from "@/layout/components/Navbar/Fullscreen.vue";
+import UserInfo from "@/layout/components/Navbar/UserInfo.vue";
+
+const appStore = useAppStore();
+/**
+ * 左侧菜单栏显示/隐藏
+ */
+function toggleSideBar() {
+  appStore.toggleSidebar(true);
+}
+</script>
+
+<template>
+  <!-- 顶部导航栏 -->
+  <div class="navbar">
+    <!-- 左侧面包屑 -->
+    <div class="flex">
+      <Hamburger :is-active="appStore.sidebar.opened" @toggle-click="toggleSideBar" />
+      <Breadcrumb />
+    </div>
+    <!-- 右侧导航设置 -->
+    <div class="flex">
+      <!-- 导航栏设置(窄屏隐藏),全屏等-->
+      <Fullscreen />
+      <!-- 用户信息 -->
+      <UserInfo />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 70px;
+  background-color: #fff;
+  box-shadow: 0 0 1px #0003;
+}
+</style>

src/layout/components/Navbar/Fullscreen.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import SvgIcon from "@/components/SvgIcon/index.vue";
+import { storeToRefs } from "pinia";
+import { useAppStore } from "@/store/modules/app";
+
+const appStore = useAppStore();
+const { device } = storeToRefs(appStore); // 设备类型：desktop-宽屏设备 || mobile-窄屏设备
+/**
+ * vueUse 全屏
+ */
+const { isFullscreen, toggle } = useFullscreen();
+</script>
+
+<template>
+  <!-- 导航栏设置(窄屏隐藏)-->
+  <div v-if="device !== 'mobile'" class="setting-container">
+    <!--全屏 -->
+    <div class="setting-item" @click="toggle">
+      <svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" size="16px" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.setting-container {
+  display: flex;
+  align-items: center;
+  .setting-item {
+    display: inline-block;
+    width: 30px;
+    height: 70px;
+    line-height: 70px;
+    color: #5a5e66;
+    text-align: center;
+    cursor: pointer;
+    &:hover {
+      background: rgb(249 250 251 / 100%);
+    }
+  }
+}
+</style>

src/layout/components/Navbar/School/index.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { useAppStore } from "@/store/modules/app";
+import Fullscreen from "@/layout/components/Navbar/Fullscreen.vue";
+import SchoolSelect from "@/layout/components/Navbar/SchoolSelect.vue";
+import UserInfo from "@/layout/components/Navbar/UserInfo.vue";
+
+const appStore = useAppStore();
+/**
+ * 左侧菜单栏显示/隐藏
+ */
+function toggleSideBar() {
+  appStore.toggleSidebar(true);
+}
+</script>
+
+<template>
+  <!-- 顶部导航栏 -->
+  <div class="navbar">
+    <!-- 左侧面包屑 -->
+    <div class="flex">
+      <Hamburger :is-active="appStore.sidebar.opened" @toggle-click="toggleSideBar" />
+      <Breadcrumb />
+    </div>
+    <!-- 右侧导航设置 -->
+    <div class="flex">
+      <!-- 导航栏设置(窄屏隐藏),全屏等-->
+      <Fullscreen />
+      <!-- 学校选择 -->
+      <SchoolSelect />
+      <!-- 用户信息 -->
+      <UserInfo />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 70px;
+  background-color: #fff;
+  box-shadow: 0 0 1px #0003;
+}
+</style>

src/layout/components/Navbar/SchoolSelect.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { CaretBottom } from "@element-plus/icons-vue";
+import { SchoolList } from "@/api/school/types";
+import { getSchoolSelect } from "@/api/school";
+import { watch } from "vue";
+import { useUserStore } from "@/store/modules/user";
+
+const userStore = useUserStore();
+/**
+ * 学校数据
+ */
+const schoolData = ref<SchoolList[]>();
+const schoolId = ref(0);
+const schoolNum = ref("");
+async function getSchoolData() {
+  getSchoolSelect()
+    .then(({ data }) => {
+      schoolData.value = data;
+      if (schoolId.value == 0) {
+        schoolId.value = data[0].school_id;
+        schoolNum.value = data[0].num;
+        userStore.changeSchool(schoolId.value, schoolNum.value);
+      }
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+}
+onMounted(() => {
+  getSchoolData();
+});
+watch(
+  () => schoolId.value,
+  (newValue) => {
+    let num: string = "";
+    schoolData.value?.some((school) => {
+      if (newValue == school.school_id) {
+        num = school.num;
+        return true;
+      }
+    });
+    userStore.changeSchool(newValue, num);
+  }
+);
+</script>
+<template>
+  <!-- 学校选择下拉框 -->
+  <div class="nav-select">
+    <el-select v-model="schoolId" size="large" placeholder="请选择学校" :suffix-icon="CaretBottom">
+      <el-option v-for="item in schoolData" :key="item.school_id" :label="item.name" :value="item.school_id" />
+    </el-select>
+    <span class="school">学校编码：{{ userStore.schoolNum }}</span>
+  </div>
+</template>
+<style scoped lang="scss">
+.nav-select {
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  .school {
+    padding-left: 15px;
+  }
+}
+.svg-icon {
+  margin-bottom: -2px;
+}
+.el-select {
+  padding: 15px 0;
+  width: 280px;
+  margin-left: 12px;
+}
+//移动端兼容
+.mobile {
+  .navbar {
+    .nav-select {
+      position: absolute;
+      left: 0;
+      top: 80px;
+      z-index: 1;
+      width: 100%;
+      box-sizing: border-box;
+      padding: 0 24px;
+      .el-select {
+        width: 100%;
+        padding: 0;
+        margin: 0;
+      }
+      :deep(.el-input__wrapper) {
+        background: #ffffff;
+      }
+    }
+  }
+}
+/* 自定义 el-select 样式 */
+:deep(.el-input__wrapper) {
+  background: #efefef;
+  border-radius: 12px;
+}
+/* el-select 各种边框线隐藏**/
+:deep(.el-select) {
+  --el-select-input-focus-border-color: none !important;
+}
+:deep(.el-input__wrapper) {
+  box-shadow: none !important;
+}
+:deep(.el-select .el-input.is-focus .el-input__wrapper) {
+  box-shadow: none !important;
+}
+:deep(.el-select .el-input__wrapper.is-focus) {
+  box-shadow: none !important;
+}
+:deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) {
+  box-shadow: none !important;
+}
+</style>

src/layout/components/Navbar/UserInfo.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import SvgIcon from "@/components/SvgIcon/index.vue";
+import { useUserStore } from "@/store/modules/user";
+import { useTagsViewStore } from "@/store/modules/tagsView";
+import { useRoute, useRouter } from "vue-router";
+
+const userStore = useUserStore();
+const tagsViewStore = useTagsViewStore();
+const route = useRoute();
+const router = useRouter();
+/**
+ * 注销
+ */
+function logout() {
+  ElMessageBox.confirm("确定退出系统吗？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(() => {
+    userStore
+      .logout()
+      .then(() => {
+        tagsViewStore.delAllViews();
+      })
+      .then(() => {
+        router.push(`/login?redirect=${route.fullPath}`);
+      });
+  });
+}
+</script>
+
+<template>
+  <!-- 用户头像 -->
+  <div class="avatar-container">
+    <span class="spl">|</span>
+    <img src="../../../assets/login/avatar.png" alt="头像" />
+    <span class="">{{ userStore.nickname + " " + userStore.phone }}</span>
+    <span @click="logout"><svg-icon icon-class="exit" color="#006eff" size="20px" /></span>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.avatar-container {
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  margin: 0 20px 0 0;
+  cursor: pointer;
+  img {
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    border-radius: 20px;
+    background: #494949;
+  }
+  span {
+    margin-left: 12px;
+    font-size: 16px;
+    color: #494949;
+    &.spl {
+      margin: 0 12px 0 12px;
+      color: #d7d8d8;
+    }
+  }
+}
+</style>

src/layout/components/index.ts

@@ -1,3 +1,4 @@
-export { default as Navbar } from "./Navbar.vue";
 export { default as AppMain } from "./AppMain.vue";
 export { default as TagsView } from "./TagsView/index.vue";
+export { default as AdminNavbar } from "./Navbar/Admin/index.vue";
+export { default as SchoolNavbar } from "./Navbar/School/index.vue";

src/layout/school.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, watchEffect } from "vue";
 import { useWindowSize } from "@vueuse/core";
-import { AppMain, Navbar, TagsView } from "./components/index";
+import { AppMain, TagsView, SchoolNavbar } from "./components/index";
 import Sidebar from "./components/Sidebar/index.vue";
 
 import { useAppStore } from "@/store/modules/app";
@@ -54,17 +54,13 @@ function handleOutsideClick() {
 <template>
   <div :class="classObj" class="app-wrapper">
     <!-- 手机设备侧边栏打开遮罩层 -->
-    <div
-      v-if="classObj.mobile && classObj.openSidebar"
-      class="drawer-bg"
-      @click="handleOutsideClick"
-    ></div>
+    <div v-if="classObj.mobile && classObj.openSidebar" class="drawer-bg" @click="handleOutsideClick"></div>
 
     <Sidebar class="sidebar-container" />
 
     <div :class="{ hasTagsView: showTagsView }" class="main-container">
       <div :class="{ 'fixed-header': fixedHeader }">
-        <navbar />
+        <SchoolNavbar />
         <tags-view v-if="showTagsView" />
       </div>
 

src/store/modules/permission.ts

@@ -19,7 +19,7 @@ const adminRoutes: RouteRecordRaw[] = JSON.parse(
       path: "/areaboard",
       component: "AdminIndex",
       redirect: "/areaboard/index",
-      meta: { title: "数据看板", name: "Dashboard" },
+      meta: { title: "区域级数据看板", name: "Dashboard" },
       children: [
         {
           path: "index",

src/views/teacher/index.vue

@@ -3,11 +3,7 @@ import { watch } from "vue";
 import { useUserStore } from "@/store/modules/user";
 import { CaretBottom } from "@element-plus/icons-vue";
 import { TeacherItem, TeacherList } from "@/api/school/types";
-import {
-  getTeacherEquipment,
-  getTeacherGrade,
-  getTeacherList,
-} from "@/api/school";
+import { getTeacherEquipment, getTeacherGrade, getTeacherList } from "@/api/school";
 
 const userStore = useUserStore();
 defineOptions({
@@ -88,14 +84,8 @@ watch(
   <div class="teacher-container">
     <!-- 教师查找 -->
     <div class="teacher-search">
-      <el-input
-        v-model="searchKeyword"
-        size="large"
-        placeholder="请输入教师名称或手机号码"
-      />
-      <el-button size="large" type="primary" @click="teacherSearch()"
-        >查找</el-button
-      >
+      <el-input v-model="searchKeyword" size="large" placeholder="请输入教师名称或手机号码" />
+      <el-button size="large" type="primary" @click="teacherSearch()">查找</el-button>
       <span
         >共<b>{{ teacherCount }}</b
         >人</span
@@ -111,14 +101,7 @@ watch(
               <span>注册时间：{{ teacher.create_time }}</span>
               <span class="blue fr"
                 >负责班级 & 绑定设备
-                <el-icon
-                  :class="
-                    teacher.active && teacher.active.includes(teacher.id)
-                      ? 'is-active'
-                      : ''
-                  "
-                  ><CaretBottom
-                /></el-icon>
+                <el-icon :class="teacher.active && teacher.active.includes(teacher.id) ? 'is-active' : ''"><CaretBottom /></el-icon>
               </span>
             </div>
           </template>
@@ -126,109 +109,49 @@ watch(
             <el-col :span="19">
               <el-row>
                 <el-col :span="3">
-                  <el-table
-                    :data="teacher.equipment ? teacher.equipment.AI : []"
-                    empty-text="-"
-                    style="width: 100%"
-                  >
-                    <el-table-column
-                      prop="sn"
-                      label="水母星球脑机"
-                      align="center"
-                    />
+                  <el-table :data="teacher.equipment ? teacher.equipment.AI : []" empty-text="-" style="width: 100%">
+                    <el-table-column prop="sn" label="水母星球脑机" align="center" />
                   </el-table>
                 </el-col>
                 <el-col :span="3">
-                  <el-table
-                    :data="teacher.equipment ? teacher.equipment.SW : []"
-                    empty-text="-"
-                    style="width: 100%"
-                  >
-                    <el-table-column
-                      prop="sn"
-                      label="智脑水舞"
-                      align="center"
-                    />
+                  <el-table :data="teacher.equipment ? teacher.equipment.SW : []" empty-text="-" style="width: 100%">
+                    <el-table-column prop="sn" label="智脑水舞" align="center" />
                   </el-table>
                 </el-col>
                 <el-col :span="3">
-                  <el-table
-                    :data="teacher.equipment ? teacher.equipment.KL : []"
-                    empty-text="-"
-                    style="width: 100%"
-                  >
-                    <el-table-column
-                      prop="sn"
-                      label="智脑恐龙"
-                      align="center"
-                    />
+                  <el-table :data="teacher.equipment ? teacher.equipment.KL : []" empty-text="-" style="width: 100%">
+                    <el-table-column prop="sn" label="智脑恐龙" align="center" />
                   </el-table>
                 </el-col>
                 <el-col :span="3">
-                  <el-table
-                    :data="teacher.equipment ? teacher.equipment.PP : []"
-                    empty-text="-"
-                    style="width: 100%"
-                  >
-                    <el-table-column
-                      prop="sn"
-                      label="智脑碰碰车"
-                      align="center"
-                    />
+                  <el-table :data="teacher.equipment ? teacher.equipment.PP : []" empty-text="-" style="width: 100%">
+                    <el-table-column prop="sn" label="智脑碰碰车" align="center" />
                   </el-table>
                 </el-col>
                 <el-col :span="3">
-                  <el-table
-                    :data="teacher.equipment ? teacher.equipment.UF : []"
-                    empty-text="-"
-                    style="width: 100%"
-                  >
+                  <el-table :data="teacher.equipment ? teacher.equipment.UF : []" empty-text="-" style="width: 100%">
                     <el-table-column prop="sn" label="智脑UFO" align="center" />
                   </el-table>
                 </el-col>
                 <el-col :span="3">
-                  <el-table
-                    :data="teacher.equipment ? teacher.equipment.SU : []"
-                    empty-text="-"
-                    style="width: 100%"
-                  >
+                  <el-table :data="teacher.equipment ? teacher.equipment.SU : []" empty-text="-" style="width: 100%">
                     <el-table-column prop="sn" label="智脑SUV" align="center" />
                   </el-table>
                 </el-col>
                 <el-col :span="3">
-                  <el-table
-                    :data="teacher.equipment ? teacher.equipment.SC : []"
-                    empty-text="-"
-                    style="width: 100%"
-                  >
-                    <el-table-column
-                      prop="sn"
-                      label="智脑赛车"
-                      align="center"
-                    />
+                  <el-table :data="teacher.equipment ? teacher.equipment.SC : []" empty-text="-" style="width: 100%">
+                    <el-table-column prop="sn" label="智脑赛车" align="center" />
                   </el-table>
                 </el-col>
                 <el-col :span="3">
-                  <el-table
-                    :data="teacher.equipment ? teacher.equipment.JM : []"
-                    empty-text="-"
-                    style="width: 100%"
-                  >
-                    <el-table-column
-                      prop="sn"
-                      label="智脑积木"
-                      align="center"
-                    />
+                  <el-table :data="teacher.equipment ? teacher.equipment.JM : []" empty-text="-" style="width: 100%">
+                    <el-table-column prop="sn" label="智脑积木" align="center" />
                   </el-table>
                 </el-col>
               </el-row>
             </el-col>
             <el-col :span="5" class="grade">
-              <el-table
-                :data="teacher.grades"
-                empty-text="-"
-                style="width: 100%"
-              >
+              <el-table :data="teacher.grades" empty-text="-" style="width: 100%">
                 <el-table-column prop="name" label="负责班级" align="center" />
               </el-table>
             </el-col>