build: "图片压缩"

.env.production

@@ -2,4 +2,4 @@
 
 VITE_APP_TITLE = 'shuimuai-dashboard-h5'
 VITE_APP_PORT = 3000
-VITE_APP_BASE_API = '/prod-api'
+VITE_APP_BASE_API = 'http://devapi.shuimuai.com/'

.env.staging

@@ -3,4 +3,4 @@ NODE_ENV='staging'
 
 VITE_APP_TITLE = 'shuimuai-dashboard-h5'
 VITE_APP_PORT = 3000
-VITE_APP_BASE_API = '/prod--api'
+VITE_APP_BASE_API = 'http://devapi.shuimuai.com/'

src/api/areaboard/index.ts

@@ -24,11 +24,14 @@ export function getAreaAddress(id: number): AxiosPromise<Area> {
  * 获取学校
  * /board/v1/get-school?province_id=&city_id=
  */
-export function getAreaSchool(params: AddressId): AxiosPromise<Area> {
+export function getAreaSchool(
+  province_id: number,
+  city_id: number
+): AxiosPromise<Area> {
   return request({
     url: "/board/v1/get-school",
     method: "get",
-    params: params,
+    params: { province_id: province_id, city_id: city_id },
   });
 }
 
@@ -36,11 +39,11 @@ export function getAreaSchool(params: AddressId): AxiosPromise<Area> {
  * 获取区域级数据卡片
  * /board/v1/record-top?start_time=1672502400&end_time=1688349643&school_id=95&grade_id=35
  */
-export function getAreaCard(id: number): AxiosPromise<AreaCard> {
+export function getAreaCard(params: AreaParams): AxiosPromise<AreaCard> {
   return request({
     url: "/board/v1/record-top",
     method: "get",
-    params: { school_id: id },
+    params: params,
   });
 }
 /**

src/api/areaboard/types.ts

@@ -7,6 +7,8 @@ export interface AddressId {
   city_id: number;
 }
 export interface AreaParams {
+  province_id: number;
+  city_id: number;
   school_id: number;
   grade_id: number;
   start_time: number;

src/views/areaboard/index.vue

@@ -36,6 +36,8 @@ const address: AddressId = reactive({
   city_id: 0,
 });
 const dataParams: AreaParams = reactive({
+  province_id: 0,
+  city_id: 0,
   school_id: 0,
   grade_id: 0,
   start_time: Math.ceil(Date.parse("2023/1/1 00:00") / 1000),
@@ -49,13 +51,13 @@ async function getAddressData(id: number) {
     .then(({ data }) => {
       if (id == 0) {
         provinceData.value = data;
-        provinceData.value.unshift({ area_id: 0, area_name: "全部省" });
+        provinceData.value?.unshift({ area_id: 0, area_name: "全部省" });
       } else {
         cityData.value = data;
-        cityData.value.unshift({ area_id: 0, area_name: "全部市" });
+        cityData.value?.unshift({ area_id: 0, area_name: "全部市" });
       }
       // 重新获取学校
-      getSchoolData(address);
+      getSchoolData(dataParams);
     })
     .catch((error) => {
       console.log(error);
@@ -71,8 +73,8 @@ async function getAddressData(id: number) {
  * 获取学校
  */
 const schoolData = ref<SchoolList[]>();
-async function getSchoolData(address: AddressId) {
-  getAreaSchool(address)
+async function getSchoolData(params: AreaParams) {
+  getAreaSchool(params.province_id, params.city_id)
     .then(({ data }) => {
       schoolData.value = data;
       schoolData.value?.unshift({ num: "", school_id: 0, name: "全部学校" });
@@ -109,8 +111,8 @@ function changeDate() {
  */
 const cardStatus = ref(false);
 const cards = ref<AreaCard>();
-async function getDataCard(schoolId: number) {
-  getAreaCard(schoolId)
+async function getDataCard(params: AreaParams) {
+  getAreaCard(params)
     .then(({ data }) => {
       cards.value = data;
       cardStatus.value = true;
@@ -152,8 +154,8 @@ async function getLineChartData(params: AreaParams) {
       lineChartData.value = data;
       // 柱状图
       averageData.value = [];
-      averageData.value.push(lineChartData.value?.frontNum);
-      averageData.value.push(lineChartData.value?.afterNum);
+      averageData.value?.push(lineChartData.value?.frontNum || []);
+      averageData.value?.push(lineChartData.value?.afterNum || []);
       lineStatus.value = true;
     })
     .catch((error) => {
@@ -167,7 +169,7 @@ async function getLineChartData(params: AreaParams) {
  */
 function getPageData() {
   // 数据卡片
-  getDataCard(dataParams.school_id);
+  getDataCard(dataParams);
   // 饼图数据
   getPieChartData(dataParams);
   // 折线图数据
@@ -178,7 +180,7 @@ onMounted(() => {
   getAddressData(0);
   cityData.value = [{ area_id: 0, area_name: "全部市" }];
   // 获取学校
-  getSchoolData(address);
+  getSchoolData(dataParams);
   gradeData.value = [{ id: 0, name: "全部班级" }];
   // 获取页面数据
   getPageData();
@@ -190,10 +192,10 @@ onMounted(() => {
     <div class="area-top">
       <div class="search-box">
         <el-select
-          v-model="address.province_id"
+          v-model="dataParams.province_id"
           placeholder="全部省"
           size="large"
-          @change="getAddressData(address.province_id)"
+          @change="getAddressData(dataParams.province_id)"
         >
           <el-option
             v-for="item in provinceData"
@@ -203,10 +205,10 @@ onMounted(() => {
           />
         </el-select>
         <el-select
-          v-model="address.city_id"
+          v-model="dataParams.city_id"
           placeholder="全部市"
           size="large"
-          @change="getSchoolData(address)"
+          @change="getSchoolData(dataParams)"
         >
           <el-option
             v-for="item in cityData"
@@ -236,9 +238,9 @@ onMounted(() => {
         <template v-if="cardStatus">
           <AreaDataCard
             :key="cards.toString()"
-            :schools="cards.school"
-            :games="cards.game"
-            :students="cards.student"
+            :schools="cards?.school || 0"
+            :games="cards?.game || 0"
+            :students="cards?.student || 0"
           />
         </template>
       </div>
@@ -279,82 +281,84 @@ onMounted(() => {
         <el-col :xs="24" :span="8">
           <div class="charts-item">
             <p class="title">学员专注力平均值整体对比分析</p>
-            <el-row justify="space-between">
-              <el-col :span="12">
-                <div v-if="pieStatus" class="item">
-                  <LiquidChart
-                    id="liquidChart1"
-                    :key="pieChartData.frontAverage"
-                    :data="
-                      pieChartData.frontAverage ? pieChartData.frontAverage : 0
-                    "
-                    height="200px"
-                    width="200px"
-                    color="#3a7fc2"
-                    bg-color="#accded"
-                    class="chart"
-                  />
-                  <p>全体学员初期</p>
-                  <p>专注力评估均值</p>
-                </div>
-              </el-col>
-              <el-col :span="12">
-                <div v-if="pieStatus" class="item">
-                  <LiquidChart
-                    id="liquidChart2"
-                    :key="pieChartData.afterAverage"
-                    :data="
-                      pieChartData.afterAverage ? pieChartData.afterAverage : 0
-                    "
-                    height="200px"
-                    width="200px"
-                    color="#5563ac"
-                    bg-color="#cacce6"
-                    class="chart"
-                  />
-                  <p>全体学员训练近期</p>
-                  <p>专注力评估均值</p>
-                </div>
-              </el-col>
-            </el-row>
-            <el-row justify="space-between">
-              <el-col :span="12">
-                <div v-if="pieStatus" class="item">
-                  <CircleChart
-                    id="circleChart1"
-                    :key="pieChartData.front"
-                    :data="pieChartData.front ? pieChartData.front : 0"
-                    height="200px"
-                    width="200px"
-                    color="#3a7fc2"
-                    bg-color="#e4e7f4"
-                    font-color="#3a7fc2"
-                    font-size="30px"
-                    :round-cap="Boolean(true)"
-                  />
-                  <p>初期训练</p>
-                  <p>专注力50以上人数比例</p>
-                </div>
-              </el-col>
-              <el-col :span="12">
-                <div v-if="pieStatus" class="item">
-                  <CircleChart
-                    id="circleChart2"
-                    :key="pieChartData.after.toString()"
-                    :data="pieChartData.after ? pieChartData.after : 0"
-                    height="200px"
-                    width="200px"
-                    color="#5563ac"
-                    bg-color="#e4e7f4"
-                    font-color="#5563ac"
-                    font-size="30px"
-                    :round-cap="Boolean(true)"
-                  />
-                  <p>近期训练</p>
-                  <p>专注力50以上人数比例</p>
-                </div>
-              </el-col>
-            </el-row>
+            <template v-if="pieStatus">
+              <el-row justify="space-between">
+                <el-col :span="12">
+                  <div class="item">
+                    <LiquidChart
+                      id="liquidChart1"
+                      :key="pieChartData?.frontAverage"
+                      :data="pieChartData?.frontAverage || 0"
+                      height="200px"
+                      width="200px"
+                      color="#3a7fc2"
+                      bg-color="#accded"
+                      class="chart"
+                    />
+                    <p>全体学员初期</p>
+                    <p>专注力评估均值</p>
+                  </div>
+                </el-col>
+                <el-col :span="12">
+                  <div class="item">
+                    <LiquidChart
+                      id="liquidChart2"
+                      :key="pieChartData?.afterAverage"
+                      :data="pieChartData?.afterAverage || 0"
+                      height="200px"
+                      width="200px"
+                      color="#5563ac"
+                      bg-color="#cacce6"
+                      class="chart"
+                    />
+                    <p>全体学员训练近期</p>
+                    <p>专注力评估均值</p>
+                  </div>
+                </el-col>
+              </el-row>
+              <el-row justify="space-between">
+                <el-col :span="12">
+                  <div class="item">
+                    <CircleChart
+                      id="circleChart1"
+                      :key="pieChartData?.front"
+                      :data="pieChartData?.front || 0"
+                      height="200px"
+                      width="200px"
+                      color="#3a7fc2"
+                      bg-color="#e4e7f4"
+                      font-color="#3a7fc2"
+                      font-size="30px"
+                      :round-cap="Boolean(true)"
+                    />
+                    <p>初期训练</p>
+                    <p>专注力50以上人数比例</p>
+                  </div>
+                </el-col>
+                <el-col :span="12">
+                  <div class="item">
+                    <CircleChart
+                      id="circleChart2"
+                      :key="pieChartData?.after"
+                      :data="pieChartData?.after || 0"
+                      height="200px"
+                      width="200px"
+                      color="#5563ac"
+                      bg-color="#e4e7f4"
+                      font-color="#5563ac"
+                      font-size="30px"
+                      :round-cap="Boolean(true)"
+                    />
+                    <p>近期训练</p>
+                    <p>专注力50以上人数比例</p>
+                  </div>
+                </el-col>
+              </el-row>
+            </template>
+            <div v-else class="empty">
+              <img src="../../assets/empty.png" alt="数据为空" />
+              <p>{{ pieMessage }}</p>
+            </div>
           </div>
         </el-col>
         <!-- 学员专注力评分分级占比分析 -->
@@ -369,6 +373,10 @@ onMounted(() => {
                 height="558px"
               />
             </template>
+            <div v-else class="empty">
+              <img src="../../assets/empty.png" alt="数据为空" />
+              <p>{{ lineMessage }}</p>
+            </div>
           </div>
         </el-col>
       </el-row>
@@ -388,6 +396,10 @@ onMounted(() => {
                 class="chart"
               />
             </template>
+            <div v-else class="empty">
+              <img src="../../assets/empty.png" alt="数据为空" />
+              <p>{{ lineMessage }}</p>
+            </div>
             <el-row :gutter="15" class="bottom">
               <el-col :span="12">
                 <p class="l">
@@ -410,36 +422,40 @@ onMounted(() => {
         <el-col :xs="24" :span="16">
           <div class="charts-item">
             <p class="title">学员专注力评分分级占比分析</p>
-            <el-row justify="space-between">
+            <el-row v-if="pieStatus" justify="space-between">
               <el-col :xs="24" :span="12">
-                <div v-if="pieStatus" class="bar">
+                <div class="bar">
                   <PercentBarChart
                     id="barChart1"
-                    :key="pieChartData.frontProportion.toString()"
+                    :key="pieChartData?.frontProportion.toString()"
                     width="400px"
                     height="500px"
                     title="全体学员初期训练专注力评分占比"
-                    :percent="pieChartData.frontProportion.percentage"
-                    :data="pieChartData.frontProportion.num"
+                    :percent="pieChartData?.frontProportion.percentage"
+                    :data="pieChartData?.frontProportion.num"
                     class="chart"
                   />
                 </div>
               </el-col>
               <el-col :xs="24" :span="12">
-                <div v-if="pieStatus" class="bar">
+                <div class="bar">
                   <PercentBarChart
                     id="barChart2"
-                    :key="pieChartData.afterProportion.toString()"
+                    :key="pieChartData?.afterProportion.toString()"
                     width="400px"
                     height="500px"
                     title="全体学员训练近期专注力评分平均占比"
-                    :percent="pieChartData.afterProportion.percentage"
-                    :data="pieChartData.afterProportion.num"
+                    :percent="pieChartData?.afterProportion.percentage"
+                    :data="pieChartData?.afterProportion.num"
                     class="chart"
                   />
                 </div>
               </el-col>
             </el-row>
+            <div v-else class="empty">
+              <img src="../../assets/empty.png" alt="数据为空" />
+              <p>{{ pieMessage }}</p>
+            </div>
           </div>
         </el-col>
       </el-row>
@@ -605,4 +621,8 @@ onMounted(() => {
 .mobile .el-col {
   margin-bottom: 10px;
 }
+
+.empty {
+  padding: 200px 0;
+}
 </style>

src/views/dashboard/index.vue

@@ -110,11 +110,11 @@ watch(
     <template v-if="cardStatus">
       <DataCard
         :key="cards.toString()"
-        :classes="cards.grade"
-        :teachers="cards.teacher"
-        :students="cards.student"
-        :equipments="cards.equipment"
-        :trainings="cards.game"
+        :classes="cards?.grade || 0"
+        :teachers="cards?.teacher || 0"
+        :students="cards?.student || 0"
+        :equipments="cards?.equipment || 0"
+        :trainings="cards?.game || 0"
       />
     </template>
 
@@ -146,8 +146,8 @@ watch(
               <div class="item">
                 <LiquidChart
                   id="liquidChart1"
-                  :key="chartData.frontAverage"
-                  :data="chartData.frontAverage || 0"
+                  :key="chartData?.frontAverage"
+                  :data="chartData?.frontAverage || 0"
                   height="200px"
                   width="200px"
                   color="#3a7fc2"
@@ -162,8 +162,8 @@ watch(
               <div class="item">
                 <LiquidChart
                   id="liquidChart2"
-                  :key="chartData.afterAverage"
-                  :data="chartData.afterAverage ? chartData.afterAverage : 0"
+                  :key="chartData?.afterAverage"
+                  :data="chartData?.afterAverage || 0"
                   height="200px"
                   width="200px"
                   color="#5563ac"
@@ -180,8 +180,8 @@ watch(
               <div class="item">
                 <CircleChart
                   id="circleChart1"
-                  :key="chartData.front"
-                  :data="chartData.front ? chartData.front : 0"
+                  :key="chartData?.front"
+                  :data="chartData?.front || 0"
                   height="200px"
                   width="200px"
                   color="#3a7fc2"
@@ -198,8 +198,8 @@ watch(
               <div class="item">
                 <CircleChart
                   id="circleChart2"
-                  :key="chartData.after.toString()"
-                  :data="chartData.after ? chartData.after : 0"
+                  :key="chartData?.after.toString()"
+                  :data="chartData?.after || 0"
                   height="200px"
                   width="200px"
                   color="#5563ac"
@@ -224,12 +224,12 @@ watch(
               <div class="bar">
                 <PercentBarChart
                   id="barChart1"
-                  :key="chartData.frontProportion.toString()"
+                  :key="chartData?.frontProportion.toString()"
                   width="400px"
                   height="500px"
                   title="全体学员初期训练专注力评分占比"
-                  :percent="chartData.frontProportion.percentage"
-                  :data="chartData.frontProportion.num"
+                  :percent="chartData?.frontProportion.percentage"
+                  :data="chartData?.frontProportion.num"
                   class="chart"
                 />
               </div>
@@ -238,12 +238,12 @@ watch(
               <div class="bar">
                 <PercentBarChart
                   id="barChart2"
-                  :key="chartData.afterProportion.toString()"
+                  :key="chartData?.afterProportion.toString()"
                   width="400px"
                   height="500px"
                   title="全体学员训练近期专注力评分平均占比"
-                  :percent="chartData.afterProportion.percentage"
-                  :data="chartData.afterProportion.num"
+                  :percent="chartData?.afterProportion.percentage"
+                  :data="chartData?.afterProportion.num"
                   class="chart"
                 />
               </div>

src/views/equipment/index.vue

@@ -1,28 +1,28 @@
 <script setup lang="ts">
-import {watch} from "vue";
-import {useUserStore} from "@/store/modules/user";
-import {TeacherList, TeacherManage} from "@/api/teacher/types";
-import {getTeacherList} from "@/api/teacher";
-import {EquipmentManage, EquipmentParams} from "@/api/equipment/types";
-import {getEquipmentLists} from "@/api/equipment";
+import { watch } from "vue";
+import { useUserStore } from "@/store/modules/user";
+import { TeacherList, TeacherManage } from "@/api/teacher/types";
+import { getTeacherList } from "@/api/teacher";
+import { EquipmentManage, EquipmentParams } from "@/api/equipment/types";
+import { getEquipmentLists } from "@/api/equipment";
 const userStore = useUserStore();
 defineOptions({
-	name: "EquipmentIndex",
-	inheritAttrs: false,
+  name: "EquipmentIndex",
+  inheritAttrs: false,
 });
 
 // 获取教师
 const teacherSelect = ref<TeacherList[]>();
 async function getTeacherData(schoolId: number) {
-	getTeacherList(schoolId)
-			.then(({data}) => {
-				const temp: TeacherManage = data;
-				teacherSelect.value = temp.lists;
-				teacherSelect.value?.unshift({id: 0, name: "全部教师"})
-			})
-			.catch((error) => {
-				console.log(error);
-			});
+  getTeacherList(schoolId)
+    .then(({ data }) => {
+      const temp: TeacherManage = data;
+      teacherSelect.value = temp.lists;
+      teacherSelect.value?.unshift({ id: 0, name: "全部教师" });
+    })
+    .catch((error) => {
+      console.log(error);
+    });
 }
 
 // 获取设备
@@ -30,441 +30,482 @@ const pageParams: EquipmentParams = reactive({});
 let equipmentData: EquipmentManage = reactive({});
 const equipmentStatus = ref(false);
 const dataStatus = reactive({
-	AI: false,
-	SW: false,
-	KL: false,
-	PP: false,
-	SU: false,
-	SC: false,
-	UF: false,
-	JM: false,
+  AI: false,
+  SW: false,
+  KL: false,
+  PP: false,
+  SU: false,
+  SC: false,
+  UF: false,
+  JM: false,
 });
 const dataMessage = ref("加载中...");
 
 async function getEquipmentData(schoolId: number) {
-	pageParams.school_id = schoolId;
-	getEquipmentLists(pageParams)
-			.then(({data}) => {
-				equipmentData = <EquipmentManage>{...data};
-				dataStatus.AI = equipmentData?.AI.length > 0 || false;
-				dataStatus.SW = equipmentData?.SW.length > 0 || false;
-				dataStatus.KL = equipmentData?.KL.length > 0 || false;
-				dataStatus.PP = equipmentData?.PP.length > 0 || false;
-				dataStatus.SU = equipmentData?.SU.length > 0 || false;
-				dataStatus.SC = equipmentData?.SC.length > 0 || false;
-				dataStatus.UF = equipmentData?.UF.length > 0 || false;
-				dataStatus.JM = equipmentData?.JM.length > 0 || false;
-				equipmentStatus.value = dataStatus.AI || dataStatus.SW || dataStatus.KL || dataStatus.PP || dataStatus.SU || dataStatus.SC || dataStatus.UF || dataStatus.JM;
-				if (!equipmentStatus.value) {
-					dataMessage.value = "没有符合条件的搜索记录或该学校未绑定任何设备！";
-				}
-			})
-			.catch((error) => {
-				dataMessage.value = error.message;
-				console.log(error);
-			});
+  pageParams.school_id = schoolId;
+  getEquipmentLists(pageParams)
+    .then(({ data }) => {
+      equipmentData = <EquipmentManage>{ ...data };
+      dataStatus.AI = equipmentData?.AI.length > 0 || false;
+      dataStatus.SW = equipmentData?.SW.length > 0 || false;
+      dataStatus.KL = equipmentData?.KL.length > 0 || false;
+      dataStatus.PP = equipmentData?.PP.length > 0 || false;
+      dataStatus.SU = equipmentData?.SU.length > 0 || false;
+      dataStatus.SC = equipmentData?.SC.length > 0 || false;
+      dataStatus.UF = equipmentData?.UF.length > 0 || false;
+      dataStatus.JM = equipmentData?.JM.length > 0 || false;
+      equipmentStatus.value =
+        dataStatus.AI ||
+        dataStatus.SW ||
+        dataStatus.KL ||
+        dataStatus.PP ||
+        dataStatus.SU ||
+        dataStatus.SC ||
+        dataStatus.UF ||
+        dataStatus.JM;
+      if (!equipmentStatus.value) {
+        dataMessage.value = "没有符合条件的搜索记录或该学校未绑定任何设备！";
+      }
+    })
+    .catch((error) => {
+      dataMessage.value = error.message;
+      console.log(error);
+    });
 }
 
 function getEquipmentSearch() {
-	getEquipmentData(userStore.schoolId);
+  getEquipmentData(userStore.schoolId);
 }
 
 onMounted(() => {
-	getTeacherData(userStore.schoolId);
-	getEquipmentData(userStore.schoolId);
+  getTeacherData(userStore.schoolId);
+  getEquipmentData(userStore.schoolId);
 });
 watch(
-		() => userStore.schoolId,
-		(newValue) => {
-			// 学校切换后重新获取
-			pageParams.school_id = newValue;
-			pageParams.teacher_id = 0;
-			pageParams.sn = "";
-			getTeacherData(newValue);
-			getEquipmentData(newValue);
-		}
+  () => userStore.schoolId,
+  (newValue) => {
+    // 学校切换后重新获取
+    pageParams.school_id = newValue;
+    pageParams.teacher_id = 0;
+    pageParams.sn = "";
+    getTeacherData(newValue);
+    getEquipmentData(newValue);
+  }
 );
 </script>
 
 <template>
-	<div class="equipment-container">
-		<!-- 设备查找 -->
-		<div class="equipment-search">
-			<el-select
-					v-model="pageParams.teacher_id"
-					placeholder="请选择使用者名称"
-					size="large"
-			>
-				<el-option
-						v-for="item in teacherSelect"
-						:key="item.id"
-						:label="item.name"
-						:value="item.id"
-				/>
-			</el-select>
-			<el-input
-					v-model="pageParams.sn"
-					size="large"
-					placeholder="请输入设备编号"
-			/>
-			<el-button size="large" type="primary" @click="getEquipmentSearch()">查找</el-button>
-		</div>
-		<template v-if="equipmentStatus">
-			<div v-if="dataStatus.AI" class="equipment-box">
-				<div class="title"><span>水母星球脑机</span><b>{{ equipmentData.AI.length }}</b>台</div>
-				<el-row :gutter="15">
-					<template v-for="item in equipmentData.AI" :key="item.sn">
-						<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
-							<div class="box-card">
-								<el-row>
-									<el-col :span="9" class="img">
-										<div class="i nj"></div>
-										<div class="value">{{ item.sn }}</div>
-									</el-col>
-									<el-col :span="15" class="info">
-										<div class="label mb-2">固件版本</div>
-										<div class="value mb-4">{{ item.software_version }}</div>
-										<div class="label mb-2">绑定时间</div>
-										<div class="value mb-4">{{ item.create_time }}</div>
-										<div class="label mb-2">使用者</div>
-										<div class="value mb-2">{{ item.name }}</div>
-										<div class="value">{{ item.phone }}</div>
-									</el-col>
-								</el-row>
-							</div>
-						</el-col>
-					</template>
-				</el-row>
-			</div>
-			<div v-if="dataStatus.SW" class="equipment-box">
-				<div class="title"><span>智脑水舞</span><b>{{ equipmentData.SW.length }}</b>台</div>
-				<el-row :gutter="15">
-					<template v-for="item in equipmentData.SW" :key="item.sn">
-						<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
-							<div class="box-card">
-								<el-row>
-									<el-col :span="9" class="img">
-										<div class="i sw"></div>
-										<div class="value">{{ item.sn }}</div>
-									</el-col>
-									<el-col :span="15" class="info">
-										<div class="label mb-2">固件版本</div>
-										<div class="value mb-4">{{ item.software_version }}</div>
-										<div class="label mb-2">绑定时间</div>
-										<div class="value mb-4">{{ item.create_time }}</div>
-										<div class="label mb-2">使用者</div>
-										<div class="value mb-2">{{ item.name }}</div>
-										<div class="value">{{ item.phone }}</div>
-									</el-col>
-								</el-row>
-							</div>
-						</el-col>
-					</template>
-				</el-row>
-			</div>
-			<div v-if="dataStatus.KL" class="equipment-box">
-				<div class="title"><span>智脑恐龙</span><b>{{ equipmentData.KL.length }}</b>台</div>
-				<el-row :gutter="15">
-					<template v-for="item in equipmentData.KL" :key="item.sn">
-						<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
-							<div class="box-card">
-								<el-row>
-									<el-col :span="9" class="img">
-										<div class="i sc"></div>
-										<div class="value">{{ item.sn }}</div>
-									</el-col>
-									<el-col :span="15" class="info">
-										<div class="label mb-2">固件版本</div>
-										<div class="value mb-4">{{ item.software_version }}</div>
-										<div class="label mb-2">绑定时间</div>
-										<div class="value mb-4">{{ item.create_time }}</div>
-										<div class="label mb-2">使用者</div>
-										<div class="value mb-2">{{ item.name }}</div>
-										<div class="value">{{ item.phone }}</div>
-									</el-col>
-								</el-row>
-							</div>
-						</el-col>
-					</template>
-				</el-row>
-			</div>
-			<div v-if="dataStatus.PP" class="equipment-box">
-				<div class="title"><span>智脑碰碰车</span><b>{{ equipmentData.PP.length }}</b>台</div>
-				<el-row :gutter="15">
-					<template v-for="item in equipmentData.PP" :key="item.sn">
-						<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
-							<div class="box-card">
-								<el-row>
-									<el-col :span="9" class="img">
-										<div class="i ppc"></div>
-										<div class="value">{{ item.sn }}</div>
-									</el-col>
-									<el-col :span="15" class="info">
-										<div class="label mb-2">固件版本</div>
-										<div class="value mb-4">{{ item.software_version }}</div>
-										<div class="label mb-2">绑定时间</div>
-										<div class="value mb-4">{{ item.create_time }}</div>
-										<div class="label mb-2">使用者</div>
-										<div class="value mb-2">{{ item.name }}</div>
-										<div class="value">{{ item.phone }}</div>
-									</el-col>
-								</el-row>
-							</div>
-						</el-col>
-					</template>
-				</el-row>
-			</div>
-			<div v-if="dataStatus.SU" class="equipment-box">
-				<div class="title"><span>智脑SUV</span><b>{{ equipmentData.SU.length }}</b>台</div>
-				<el-row :gutter="15">
-					<template v-for="item in equipmentData.SU" :key="item.sn">
-						<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
-							<div class="box-card">
-								<el-row>
-									<el-col :span="9" class="img">
-										<div class="i kl"></div>
-										<div class="value">{{ item.sn }}</div>
-									</el-col>
-									<el-col :span="15" class="info">
-										<div class="label mb-2">固件版本</div>
-										<div class="value mb-4">{{ item.software_version }}</div>
-										<div class="label mb-2">绑定时间</div>
-										<div class="value mb-4">{{ item.create_time }}</div>
-										<div class="label mb-2">使用者</div>
-										<div class="value mb-2">{{ item.name }}</div>
-										<div class="value">{{ item.phone }}</div>
-									</el-col>
-								</el-row>
-							</div>
-						</el-col>
-					</template>
-				</el-row>
-			</div>
-			<div v-if="dataStatus.SC" class="equipment-box">
-				<div class="title"><span>智脑赛车</span><b>{{ equipmentData.SC.length }}</b>台</div>
-				<el-row :gutter="15">
-					<template v-for="item in equipmentData.SC" :key="item.sn">
-						<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
-							<div class="box-card">
-								<el-row>
-									<el-col :span="9" class="img">
-										<div class="i suv"></div>
-										<div class="value">{{ item.sn }}</div>
-									</el-col>
-									<el-col :span="15" class="info">
-										<div class="label mb-2">固件版本</div>
-										<div class="value mb-4">{{ item.software_version }}</div>
-										<div class="label mb-2">绑定时间</div>
-										<div class="value mb-4">{{ item.create_time }}</div>
-										<div class="label mb-2">使用者</div>
-										<div class="value mb-2">{{ item.name }}</div>
-										<div class="value">{{ item.phone }}</div>
-									</el-col>
-								</el-row>
-							</div>
-						</el-col>
-					</template>
-				</el-row>
-			</div>
-			<div v-if="dataStatus.UF" class="equipment-box">
-				<div class="title"><span>智脑UFO</span><b>{{ equipmentData.UF.length }}</b>台</div>
-				<el-row :gutter="15">
-					<template v-for="item in equipmentData.UF" :key="item.sn">
-						<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
-							<div class="box-card">
-								<el-row>
-									<el-col :span="9" class="img">
-										<div class="i ufo"></div>
-										<div class="value">{{ item.sn }}</div>
-									</el-col>
-									<el-col :span="15" class="info">
-										<div class="label mb-2">固件版本</div>
-										<div class="value mb-4">{{ item.software_version }}</div>
-										<div class="label mb-2">绑定时间</div>
-										<div class="value mb-4">{{ item.create_time }}</div>
-										<div class="label mb-2">使用者</div>
-										<div class="value mb-2">{{ item.name }}</div>
-										<div class="value">{{ item.phone }}</div>
-									</el-col>
-								</el-row>
-							</div>
-						</el-col>
-					</template>
-				</el-row>
-			</div>
-			<div v-if="dataStatus.JM" class="equipment-box">
-				<div class="title"><span>智脑积木</span><b>{{ equipmentData.JM.length }}</b>台</div>
-				<el-row :gutter="15">
-					<template v-for="item in equipmentData.JM" :key="item.sn">
-						<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
-							<div class="box-card">
-								<el-row>
-									<el-col :span="9" class="img">
-										<div class="i jm"></div>
-										<div class="value">{{ item.sn }}</div>
-									</el-col>
-									<el-col :span="15" class="info">
-										<div class="label mb-2">固件版本</div>
-										<div class="value mb-4">{{ item.software_version }}</div>
-										<div class="label mb-2">绑定时间</div>
-										<div class="value mb-4">{{ item.create_time }}</div>
-										<div class="label mb-2">使用者</div>
-										<div class="value mb-2">{{ item.name }}</div>
-										<div class="value">{{ item.phone }}</div>
-									</el-col>
-								</el-row>
-							</div>
-						</el-col>
-					</template>
-				</el-row>
-			</div>
-		</template>
-		<template v-else>
-			<div class="empty">
-				<img src="../../assets/empty.png" alt="数据为空">
-				<p>{{ dataMessage }}</p>
-			</div>
-		</template>
-	</div>
+  <div class="equipment-container">
+    <!-- 设备查找 -->
+    <div class="equipment-search">
+      <el-select
+        v-model="pageParams.teacher_id"
+        placeholder="请选择使用者名称"
+        size="large"
+      >
+        <el-option
+          v-for="item in teacherSelect"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        />
+      </el-select>
+      <el-input
+        v-model="pageParams.sn"
+        size="large"
+        placeholder="请输入设备编号"
+      />
+      <el-button size="large" type="primary" @click="getEquipmentSearch()"
+        >查找</el-button
+      >
+    </div>
+    <template v-if="equipmentStatus">
+      <div v-if="dataStatus.AI" class="equipment-box">
+        <div class="title">
+          <span>水母星球脑机</span><b>{{ equipmentData.AI.length }}</b
+          >台
+        </div>
+        <el-row :gutter="15">
+          <template v-for="item in equipmentData.AI" :key="item.sn">
+            <el-col :xs="12" :span="6">
+              <div class="box-card">
+                <el-row>
+                  <el-col :span="9" class="img">
+                    <div class="i nj"></div>
+                    <div class="value">{{ item.sn }}</div>
+                  </el-col>
+                  <el-col :span="15" class="info">
+                    <div class="label mb-2">固件版本</div>
+                    <div class="value mb-4">{{ item.software_version }}</div>
+                    <div class="label mb-2">绑定时间</div>
+                    <div class="value mb-4">{{ item.create_time }}</div>
+                    <div class="label mb-2">使用者</div>
+                    <div class="value mb-2">{{ item.name }}</div>
+                    <div class="value">{{ item.phone }}</div>
+                  </el-col>
+                </el-row>
+              </div>
+            </el-col>
+          </template>
+        </el-row>
+      </div>
+      <div v-if="dataStatus.SW" class="equipment-box">
+        <div class="title">
+          <span>智脑水舞</span><b>{{ equipmentData.SW.length }}</b
+          >台
+        </div>
+        <el-row :gutter="15">
+          <template v-for="item in equipmentData.SW" :key="item.sn">
+            <el-col :xs="12" :span="6">
+              <div class="box-card">
+                <el-row>
+                  <el-col :span="9" class="img">
+                    <div class="i sw"></div>
+                    <div class="value">{{ item.sn }}</div>
+                  </el-col>
+                  <el-col :span="15" class="info">
+                    <div class="label mb-2">固件版本</div>
+                    <div class="value mb-4">{{ item.software_version }}</div>
+                    <div class="label mb-2">绑定时间</div>
+                    <div class="value mb-4">{{ item.create_time }}</div>
+                    <div class="label mb-2">使用者</div>
+                    <div class="value mb-2">{{ item.name }}</div>
+                    <div class="value">{{ item.phone }}</div>
+                  </el-col>
+                </el-row>
+              </div>
+            </el-col>
+          </template>
+        </el-row>
+      </div>
+      <div v-if="dataStatus.KL" class="equipment-box">
+        <div class="title">
+          <span>智脑恐龙</span><b>{{ equipmentData.KL.length }}</b
+          >台
+        </div>
+        <el-row :gutter="15">
+          <template v-for="item in equipmentData.KL" :key="item.sn">
+            <el-col :xs="12" :span="6">
+              <div class="box-card">
+                <el-row>
+                  <el-col :span="9" class="img">
+                    <div class="i sc"></div>
+                    <div class="value">{{ item.sn }}</div>
+                  </el-col>
+                  <el-col :span="15" class="info">
+                    <div class="label mb-2">固件版本</div>
+                    <div class="value mb-4">{{ item.software_version }}</div>
+                    <div class="label mb-2">绑定时间</div>
+                    <div class="value mb-4">{{ item.create_time }}</div>
+                    <div class="label mb-2">使用者</div>
+                    <div class="value mb-2">{{ item.name }}</div>
+                    <div class="value">{{ item.phone }}</div>
+                  </el-col>
+                </el-row>
+              </div>
+            </el-col>
+          </template>
+        </el-row>
+      </div>
+      <div v-if="dataStatus.PP" class="equipment-box">
+        <div class="title">
+          <span>智脑碰碰车</span><b>{{ equipmentData.PP.length }}</b
+          >台
+        </div>
+        <el-row :gutter="15">
+          <template v-for="item in equipmentData.PP" :key="item.sn">
+            <el-col :xs="12" :span="6">
+              <div class="box-card">
+                <el-row>
+                  <el-col :span="9" class="img">
+                    <div class="i ppc"></div>
+                    <div class="value">{{ item.sn }}</div>
+                  </el-col>
+                  <el-col :span="15" class="info">
+                    <div class="label mb-2">固件版本</div>
+                    <div class="value mb-4">{{ item.software_version }}</div>
+                    <div class="label mb-2">绑定时间</div>
+                    <div class="value mb-4">{{ item.create_time }}</div>
+                    <div class="label mb-2">使用者</div>
+                    <div class="value mb-2">{{ item.name }}</div>
+                    <div class="value">{{ item.phone }}</div>
+                  </el-col>
+                </el-row>
+              </div>
+            </el-col>
+          </template>
+        </el-row>
+      </div>
+      <div v-if="dataStatus.SU" class="equipment-box">
+        <div class="title">
+          <span>智脑SUV</span><b>{{ equipmentData.SU.length }}</b
+          >台
+        </div>
+        <el-row :gutter="15">
+          <template v-for="item in equipmentData.SU" :key="item.sn">
+            <el-col :xs="12" :span="6">
+              <div class="box-card">
+                <el-row>
+                  <el-col :span="9" class="img">
+                    <div class="i kl"></div>
+                    <div class="value">{{ item.sn }}</div>
+                  </el-col>
+                  <el-col :span="15" class="info">
+                    <div class="label mb-2">固件版本</div>
+                    <div class="value mb-4">{{ item.software_version }}</div>
+                    <div class="label mb-2">绑定时间</div>
+                    <div class="value mb-4">{{ item.create_time }}</div>
+                    <div class="label mb-2">使用者</div>
+                    <div class="value mb-2">{{ item.name }}</div>
+                    <div class="value">{{ item.phone }}</div>
+                  </el-col>
+                </el-row>
+              </div>
+            </el-col>
+          </template>
+        </el-row>
+      </div>
+      <div v-if="dataStatus.SC" class="equipment-box">
+        <div class="title">
+          <span>智脑赛车</span><b>{{ equipmentData.SC.length }}</b
+          >台
+        </div>
+        <el-row :gutter="15">
+          <template v-for="item in equipmentData.SC" :key="item.sn">
+            <el-col :xs="12" :span="6">
+              <div class="box-card">
+                <el-row>
+                  <el-col :span="9" class="img">
+                    <div class="i suv"></div>
+                    <div class="value">{{ item.sn }}</div>
+                  </el-col>
+                  <el-col :span="15" class="info">
+                    <div class="label mb-2">固件版本</div>
+                    <div class="value mb-4">{{ item.software_version }}</div>
+                    <div class="label mb-2">绑定时间</div>
+                    <div class="value mb-4">{{ item.create_time }}</div>
+                    <div class="label mb-2">使用者</div>
+                    <div class="value mb-2">{{ item.name }}</div>
+                    <div class="value">{{ item.phone }}</div>
+                  </el-col>
+                </el-row>
+              </div>
+            </el-col>
+          </template>
+        </el-row>
+      </div>
+      <div v-if="dataStatus.UF" class="equipment-box">
+        <div class="title">
+          <span>智脑UFO</span><b>{{ equipmentData.UF.length }}</b
+          >台
+        </div>
+        <el-row :gutter="15">
+          <template v-for="item in equipmentData.UF" :key="item.sn">
+            <el-col :xs="12" :span="6">
+              <div class="box-card">
+                <el-row>
+                  <el-col :span="9" class="img">
+                    <div class="i ufo"></div>
+                    <div class="value">{{ item.sn }}</div>
+                  </el-col>
+                  <el-col :span="15" class="info">
+                    <div class="label mb-2">固件版本</div>
+                    <div class="value mb-4">{{ item.software_version }}</div>
+                    <div class="label mb-2">绑定时间</div>
+                    <div class="value mb-4">{{ item.create_time }}</div>
+                    <div class="label mb-2">使用者</div>
+                    <div class="value mb-2">{{ item.name }}</div>
+                    <div class="value">{{ item.phone }}</div>
+                  </el-col>
+                </el-row>
+              </div>
+            </el-col>
+          </template>
+        </el-row>
+      </div>
+      <div v-if="dataStatus.JM" class="equipment-box">
+        <div class="title">
+          <span>智脑积木</span><b>{{ equipmentData.JM.length }}</b
+          >台
+        </div>
+        <el-row :gutter="15">
+          <template v-for="item in equipmentData.JM" :key="item.sn">
+            <el-col :xs="12" :span="6">
+              <div class="box-card">
+                <el-row>
+                  <el-col :span="9" class="img">
+                    <div class="i jm"></div>
+                    <div class="value">{{ item.sn }}</div>
+                  </el-col>
+                  <el-col :span="15" class="info">
+                    <div class="label mb-2">固件版本</div>
+                    <div class="value mb-4">{{ item.software_version }}</div>
+                    <div class="label mb-2">绑定时间</div>
+                    <div class="value mb-4">{{ item.create_time }}</div>
+                    <div class="label mb-2">使用者</div>
+                    <div class="value mb-2">{{ item.name }}</div>
+                    <div class="value">{{ item.phone }}</div>
+                  </el-col>
+                </el-row>
+              </div>
+            </el-col>
+          </template>
+        </el-row>
+      </div>
+    </template>
+    <template v-else>
+      <div class="empty">
+        <img src="../../assets/empty.png" alt="数据为空" />
+        <p>{{ dataMessage }}</p>
+      </div>
+    </template>
+  </div>
 </template>
 
 <style lang="scss" scoped>
 .equipment-container {
-	position: relative;
-	padding: 20px 30px;
+  position: relative;
+  padding: 20px 30px;
 }
 
 .equipment-search {
-	margin-bottom: 20px;
-	font-size: 16px;
-
-	.el-select {
-		width: 180px;
-		margin: 0 20px 0 0;
-	}
-
-	.el-input {
-		width: 180px;
-		margin: 0;
-	}
-
-	:deep(.el-input__inner) {
-		font-size: 16px;
-	}
-
-	.el-button {
-		font-size: 16px;
-		padding: 0 26px;
-		margin: 0 20px;
-		border-radius: 12px;
-	}
+  margin-bottom: 20px;
+  font-size: 16px;
+
+  .el-select {
+    width: 180px;
+    margin: 0 20px 0 0;
+  }
+
+  .el-input {
+    width: 180px;
+    margin: 0;
+  }
+
+  :deep(.el-input__inner) {
+    font-size: 16px;
+  }
+
+  .el-button {
+    padding: 0 26px;
+    margin: 0 20px;
+    font-size: 16px;
+    border-radius: 12px;
+  }
 }
-.empty{
-	padding:200px 0;
-}
-/* 自定义 el-select 样式 */
-:deep(.el-input__wrapper) {
-	background: #ffffff;
-	border-radius: 12px;
+
+.empty {
+  padding: 200px 0;
 }
 
+/* 自定义 el-select 样式 */
 :deep(.el-input__wrapper) {
-	box-shadow: none !important;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: none !important;
 }
 
 :deep(.el-select) {
-	--el-select-input-focus-border-color: none !important;
+  --el-select-input-focus-border-color: none !important;
 }
 
 :deep(.el-select .el-input__wrapper.is-focus) {
-	box-shadow: none !important;
+  box-shadow: none !important;
 }
 
 :deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) {
-	box-shadow: none !important;
+  box-shadow: none !important;
 }
 
 .equipment-box {
-	.title {
-		font-size: 16px;
-		color: #4284f2;
-		text-indent: 0.5em;
-
-		span {
-			font-size: 24px;
-			display: inline-block;
-			min-width: 180px;
-		}
-
-		b {
-			font-size: 28px;
-		}
-	}
-
-	.box-card {
-		background: #ffffff;
-		border-radius: 30px;
-		border: 1px solid #e6e8eb;
-		position: relative;
-		padding: 20px 0;
-		font-size: 14px;
-		margin-bottom: 10px;
-
-		.info {
-			border-left: 1px solid #e0e6f1;
-			padding-left: 28px;
-			line-height: 14px;
-
-			.label {
-				color: #999999;
-			}
-
-			.value {
-				color: #23283c;
-			}
-		}
-
-		.img {
-			text-align: center;
-
-			.i {
-				width: 120px;
-				height: 120px;
-				margin: 0 auto;
-
-				&.nj {
-					background: url("../../assets/equipment/NJ.png") center center no-repeat;
-				}
-
-				&.sw {
-					background: url("../../assets/equipment/SW.png") center center no-repeat;
-				}
-
-				&.kl {
-					background: url("../../assets/equipment/KL.png") center center no-repeat;
-				}
-
-				&.suv {
-					background: url("../../assets/equipment/SUV.png") center center no-repeat;
-				}
-
-				&.ufo {
-					background: url("../../assets/equipment/UFO.png") center center no-repeat;
-				}
-
-				&.ppc {
-					background: url("../../assets/equipment/PPC.png") center center no-repeat;
-				}
-
-				&.sc {
-					background: url("../../assets/equipment/SC.png") center center no-repeat;
-				}
-
-				&.jm {
-					background: url("../../assets/equipment/JM.png") center center no-repeat;
-				}
-			}
-		}
-	}
+  .title {
+    font-size: 16px;
+    color: #4284f2;
+    text-indent: 0.5em;
+
+    span {
+      display: inline-block;
+      min-width: 180px;
+      font-size: 24px;
+    }
+
+    b {
+      font-size: 28px;
+    }
+  }
+
+  .box-card {
+    position: relative;
+    padding: 20px 0;
+    margin-bottom: 10px;
+    font-size: 14px;
+    background: #fff;
+    border: 1px solid #e6e8eb;
+    border-radius: 30px;
+
+    .info {
+      padding-left: 28px;
+      line-height: 14px;
+      border-left: 1px solid #e0e6f1;
+
+      .label {
+        color: #999;
+      }
+
+      .value {
+        color: #23283c;
+      }
+    }
+
+    .img {
+      text-align: center;
+
+      .i {
+        width: 120px;
+        height: 120px;
+        margin: 0 auto;
+
+        &.nj {
+          background: url("../../assets/equipment/NJ.png") center center
+            no-repeat;
+        }
+
+        &.sw {
+          background: url("../../assets/equipment/SW.png") center center
+            no-repeat;
+        }
+
+        &.kl {
+          background: url("../../assets/equipment/KL.png") center center
+            no-repeat;
+        }
+
+        &.suv {
+          background: url("../../assets/equipment/SUV.png") center center
+            no-repeat;
+        }
+
+        &.ufo {
+          background: url("../../assets/equipment/UFO.png") center center
+            no-repeat;
+        }
+
+        &.ppc {
+          background: url("../../assets/equipment/PPC.png") center center
+            no-repeat;
+        }
+
+        &.sc {
+          background: url("../../assets/equipment/SC.png") center center
+            no-repeat;
+        }
+
+        &.jm {
+          background: url("../../assets/equipment/JM.png") center center
+            no-repeat;
+        }
+      }
+    }
+  }
 }
 </style>