|
|
@@ -5,6 +5,8 @@ defineOptions({
|
|
|
});
|
|
|
import { watch } from "vue";
|
|
|
import { useUserStore } from "@/store/modules/user";
|
|
|
+import { ClassList } from "@/api/school/types";
|
|
|
+import { CaretBottom } from "@element-plus/icons-vue";
|
|
|
const userStore = useUserStore();
|
|
|
watch(
|
|
|
() => userStore.schoolId,
|
|
|
@@ -12,13 +14,448 @@ watch(
|
|
|
console.log(newValue, oldValue);
|
|
|
}
|
|
|
);
|
|
|
+let equipmentInfo = ref("");
|
|
|
+// 教师编号
|
|
|
+let teacherNumber = ref(0);
|
|
|
+const teacherData = ref<ClassList[]>([
|
|
|
+ {
|
|
|
+ id: 0,
|
|
|
+ school_id: 0,
|
|
|
+ name: "全部",
|
|
|
+ },
|
|
|
+]);
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <div class="container">
|
|
|
- <h1>设备管理</h1>
|
|
|
- <div>{{ userStore.schoolId }}</div>
|
|
|
+ <div class="equipment-container">
|
|
|
+ <!-- 设备查找 -->
|
|
|
+ <div class="equipment-search">
|
|
|
+ <el-select
|
|
|
+ v-model="teacherNumber"
|
|
|
+ placeholder="请选择使用者名称"
|
|
|
+ size="large"
|
|
|
+ :suffix-icon="CaretBottom"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in teacherData"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <el-input
|
|
|
+ v-model="equipmentInfo"
|
|
|
+ size="large"
|
|
|
+ placeholder="请输入设备编号"
|
|
|
+ />
|
|
|
+ <el-button size="large" type="primary">查找</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="equipment-box">
|
|
|
+ <div class="title"><span>水母星球脑机</span><b>5</b>台</div>
|
|
|
+ <el-row :gutter="15">
|
|
|
+ <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">AI30200274</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="15" class="info">
|
|
|
+ <div class="label mb-2">固件版本</div>
|
|
|
+ <div class="value mb-4">1.06-5-85E3FEB</div>
|
|
|
+ <div class="label mb-2">绑定时间</div>
|
|
|
+ <div class="value mb-4">2023-07-12 13:22</div>
|
|
|
+ <div class="label mb-2">使用者</div>
|
|
|
+ <div class="value mb-2">松阪老师</div>
|
|
|
+ <div class="value">13766278827</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <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">AI30200274</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="15" class="info">
|
|
|
+ <div class="label mb-2">固件版本</div>
|
|
|
+ <div class="value mb-4">1.06-5-85E3FEB</div>
|
|
|
+ <div class="label mb-2">绑定时间</div>
|
|
|
+ <div class="value mb-4">2023-07-12 13:22</div>
|
|
|
+ <div class="label mb-2">使用者</div>
|
|
|
+ <div class="value mb-2">松阪老师</div>
|
|
|
+ <div class="value">13766278827</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <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">AI30200274</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="15" class="info">
|
|
|
+ <div class="label mb-2">固件版本</div>
|
|
|
+ <div class="value mb-4">1.06-5-85E3FEB</div>
|
|
|
+ <div class="label mb-2">绑定时间</div>
|
|
|
+ <div class="value mb-4">2023-07-12 13:22</div>
|
|
|
+ <div class="label mb-2">使用者</div>
|
|
|
+ <div class="value mb-2">松阪老师</div>
|
|
|
+ <div class="value">13766278827</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <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">AI30200274</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="15" class="info">
|
|
|
+ <div class="label mb-2">固件版本</div>
|
|
|
+ <div class="value mb-4">1.06-5-85E3FEB</div>
|
|
|
+ <div class="label mb-2">绑定时间</div>
|
|
|
+ <div class="value mb-4">2023-07-12 13:22</div>
|
|
|
+ <div class="label mb-2">使用者</div>
|
|
|
+ <div class="value mb-2">松阪老师</div>
|
|
|
+ <div class="value">13766278827</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <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">AI30200274</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="15" class="info">
|
|
|
+ <div class="label mb-2">固件版本</div>
|
|
|
+ <div class="value mb-4">1.06-5-85E3FEB</div>
|
|
|
+ <div class="label mb-2">绑定时间</div>
|
|
|
+ <div class="value mb-4">2023-07-12 13:22</div>
|
|
|
+ <div class="label mb-2">使用者</div>
|
|
|
+ <div class="value mb-2">松阪老师</div>
|
|
|
+ <div class="value">13766278827</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <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">AI30200274</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="15" class="info">
|
|
|
+ <div class="label mb-2">固件版本</div>
|
|
|
+ <div class="value mb-4">1.06-5-85E3FEB</div>
|
|
|
+ <div class="label mb-2">绑定时间</div>
|
|
|
+ <div class="value mb-4">2023-07-12 13:22</div>
|
|
|
+ <div class="label mb-2">使用者</div>
|
|
|
+ <div class="value mb-2">松阪老师</div>
|
|
|
+ <div class="value">13766278827</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="equipment-box">
|
|
|
+ <div class="title"><span>智脑水舞</span><b>5</b>台</div>
|
|
|
+ <el-row :gutter="15">
|
|
|
+ <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">AI30200274</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="15" class="info">
|
|
|
+ <div class="label mb-2">固件版本</div>
|
|
|
+ <div class="value mb-4">1.06-5-85E3FEB</div>
|
|
|
+ <div class="label mb-2">绑定时间</div>
|
|
|
+ <div class="value mb-4">2023-07-12 13:22</div>
|
|
|
+ <div class="label mb-2">使用者</div>
|
|
|
+ <div class="value mb-2">松阪老师</div>
|
|
|
+ <div class="value">13766278827</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="equipment-box">
|
|
|
+ <div class="title"><span>智脑碰碰车</span><b>5</b>台</div>
|
|
|
+ <el-row :gutter="15">
|
|
|
+ <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">AI30200274</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="15" class="info">
|
|
|
+ <div class="label mb-2">固件版本</div>
|
|
|
+ <div class="value mb-4">1.06-5-85E3FEB</div>
|
|
|
+ <div class="label mb-2">绑定时间</div>
|
|
|
+ <div class="value mb-4">2023-07-12 13:22</div>
|
|
|
+ <div class="label mb-2">使用者</div>
|
|
|
+ <div class="value mb-2">松阪老师</div>
|
|
|
+ <div class="value">13766278827</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="equipment-box">
|
|
|
+ <div class="title"><span>智脑赛车</span><b>5</b>台</div>
|
|
|
+ <el-row :gutter="15">
|
|
|
+ <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">AI30200274</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="15" class="info">
|
|
|
+ <div class="label mb-2">固件版本</div>
|
|
|
+ <div class="value mb-4">1.06-5-85E3FEB</div>
|
|
|
+ <div class="label mb-2">绑定时间</div>
|
|
|
+ <div class="value mb-4">2023-07-12 13:22</div>
|
|
|
+ <div class="label mb-2">使用者</div>
|
|
|
+ <div class="value mb-2">松阪老师</div>
|
|
|
+ <div class="value">13766278827</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="equipment-box">
|
|
|
+ <div class="title"><span>智脑恐龙</span><b>5</b>台</div>
|
|
|
+ <el-row :gutter="15">
|
|
|
+ <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">AI30200274</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="15" class="info">
|
|
|
+ <div class="label mb-2">固件版本</div>
|
|
|
+ <div class="value mb-4">1.06-5-85E3FEB</div>
|
|
|
+ <div class="label mb-2">绑定时间</div>
|
|
|
+ <div class="value mb-4">2023-07-12 13:22</div>
|
|
|
+ <div class="label mb-2">使用者</div>
|
|
|
+ <div class="value mb-2">松阪老师</div>
|
|
|
+ <div class="value">13766278827</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="equipment-box">
|
|
|
+ <div class="title"><span>智脑SUV</span><b>5</b>台</div>
|
|
|
+ <el-row :gutter="15">
|
|
|
+ <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">AI30200274</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="15" class="info">
|
|
|
+ <div class="label mb-2">固件版本</div>
|
|
|
+ <div class="value mb-4">1.06-5-85E3FEB</div>
|
|
|
+ <div class="label mb-2">绑定时间</div>
|
|
|
+ <div class="value mb-4">2023-07-12 13:22</div>
|
|
|
+ <div class="label mb-2">使用者</div>
|
|
|
+ <div class="value mb-2">松阪老师</div>
|
|
|
+ <div class="value">13766278827</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="equipment-box">
|
|
|
+ <div class="title"><span>智脑UFO</span><b>5</b>台</div>
|
|
|
+ <el-row :gutter="15">
|
|
|
+ <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">AI30200274</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="15" class="info">
|
|
|
+ <div class="label mb-2">固件版本</div>
|
|
|
+ <div class="value mb-4">1.06-5-85E3FEB</div>
|
|
|
+ <div class="label mb-2">绑定时间</div>
|
|
|
+ <div class="value mb-4">2023-07-12 13:22</div>
|
|
|
+ <div class="label mb-2">使用者</div>
|
|
|
+ <div class="value mb-2">松阪老师</div>
|
|
|
+ <div class="value">13766278827</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="equipment-box">
|
|
|
+ <div class="title"><span>智脑积木</span><b>5</b>台</div>
|
|
|
+ <el-row :gutter="15">
|
|
|
+ <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">AI30200274</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="15" class="info">
|
|
|
+ <div class="label mb-2">固件版本</div>
|
|
|
+ <div class="value mb-4">1.06-5-85E3FEB</div>
|
|
|
+ <div class="label mb-2">绑定时间</div>
|
|
|
+ <div class="value mb-4">2023-07-12 13:22</div>
|
|
|
+ <div class="label mb-2">使用者</div>
|
|
|
+ <div class="value mb-2">松阪老师</div>
|
|
|
+ <div class="value">13766278827</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
-<style lang="scss" scoped></style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.equipment-container {
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+}
|
|
|
+/* 自定义 el-select 样式 */
|
|
|
+:deep(.el-input__wrapper) {
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 12px;
|
|
|
+}
|
|
|
+:deep(.el-input__wrapper) {
|
|
|
+ box-shadow: none !important;
|
|
|
+}
|
|
|
+:deep(.el-select) {
|
|
|
+ --el-select-input-focus-border-color: 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;
|
|
|
+}
|
|
|
+.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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
