训练详情

src/views/trainStatistics/api.js

@@ -1,18 +1,35 @@
-import request from '@/helpers/request'
+import request from "@/helpers/request";
 // 训练统计
 export const countStudentTrain = (data) => {
-    return request({
-        url: '/cloudStudy/countStudentTrain',
-        method: 'get',
-        params: data
-    })
-}
+  return request({
+    url: "/cloudStudy/countStudentTrain",
+    method: "get",
+    params: data,
+  });
+};
 
 // 评测详情
 export const queryMusicCompareRecord = (data) => {
-    return request({
-        url: '/cloudStudy/queryMusicCompareRecord',
-        method: 'get',
-        params: data
-    })
-}
+  return request({
+    url: "/cloudStudy/queryMusicCompareRecord",
+    method: "get",
+    params: data,
+  });
+};
+// 获取老师关联的乐团列表
+export const queryTeacherMusicGroup = (data) => {
+  return request({
+    url: "/teacher/queryTeacherMusicGroup",
+    method: "get",
+    params: data,
+  });
+};
+// 获取老师所在乐团的班级列表
+export const queryTeacherMusicClass = (data) => {
+  return request({
+    url: "/teacher/queryTeacherMusicClass",
+    method: "get",
+    hideLoading: true,
+    params: data,
+  });
+};

src/views/trainStatistics/trainModel.vue

@@ -10,15 +10,52 @@
       <template #left>
         <van-dropdown-menu style="padding-right: 0.1rem" :close-on-click-outside="false" active-color="#01C1B5">
           <van-dropdown-item title="筛选" ref="item" class="visitTime">
-            <van-cell title="日期" is-link @click="showCalendar = true" title-style="font-size: .14rem;" :value="calendarValue" value-class="calendarColor"></van-cell>
-            <van-cell title="学员类型" title-style="font-size: .14rem;" class="studentCell">
-              <van-radio-group v-model="memberFlag" direction="horizontal">
+            <div class="search-group">
+              <van-cell title="日期" is-link @click="showCalendar = true" title-style="font-size: .15rem;font-weight: 600" :value="calendarValue" value-class="calendarColor" class="studentCell"></van-cell>
+              <van-cell title="是否学员" title-style="font-size: .15rem;font-weight: 600" class="studentCell">
+                <!-- <van-radio-group v-model="memberFlag" direction="horizontal">
                 <van-radio name="">全部学员</van-radio>
                 <van-radio name="1">会员学员</van-radio>
                 <van-radio name="0">普通学员</van-radio>
-              </van-radio-group>
-            </van-cell>
-            <div style="padding: 14px 16px; display: flex">
+              </van-radio-group> -->
+                <template slot="label"
+                  ><div class="btn-group">
+                    <van-button :plain="memberFlag === ''" round :type="memberFlag === '' ? 'info' : 'default'" @click="onCheckType('member', '')">全部学员</van-button>
+                    <van-button :plain="memberFlag === '1'" :type="memberFlag === '1' ? 'info' : 'default'" round @click="onCheckType('member', '1')">会员学员</van-button>
+                    <van-button :plain="memberFlag === '0'" :type="memberFlag === '0' ? 'info' : 'default'" round @click="onCheckType('member', '0')">普通学员</van-button>
+                  </div>
+                </template>
+              </van-cell>
+              <van-cell title="学员类型" title-style="font-size: .15rem;font-weight: 600" class="studentCell">
+                <template slot="label">
+                  <div class="btn-group">
+                    <van-button round :plain="studentType === ''" :type="studentType === '' ? 'info' : 'default'" @click="onCheckType('type', '')">全部学员</van-button>
+                    <van-button :plain="studentType === '1'" :type="studentType === '1' ? 'info' : 'default'" round @click="onCheckType('type', '1')">乐团学员</van-button>
+                    <van-button :plain="studentType === '2'" :type="studentType === '2' ? 'info' : 'default'" round @click="onCheckType('type', '2')">已结束小课学员</van-button>
+                    <van-button :plain="studentType === '3'" :type="studentType === '3' ? 'info' : 'default'" round @click="onCheckType('type', '3')">进行中小课学员</van-button>
+                  </div>
+                </template>
+              </van-cell>
+              <van-cell title="乐团" is-link @click="showMusicGroup = true" title-style="font-size: .15rem;font-weight: 600" :value="musicGroupName" value-class="calendarColor" class="studentCell"></van-cell>
+              <van-cell
+                title="班级"
+                is-link
+                @click="
+                  () => {
+                    if (!musicGroupId) {
+                      $toast('请选择乐团');
+                      return;
+                    }
+                    showClass = true;
+                  }
+                "
+                title-style="font-size: .15rem;font-weight: 600"
+                :value="className"
+                value-class="calendarColor"
+                class="studentCell"
+              ></van-cell>
+            </div>
+            <div class="submit-group van-hairline--top">
               <van-button block round @click="onReset" style="margin-right: 12px"> 重置 </van-button>
               <van-button type="primary" block round @click="onSubmit"> 确认 </van-button>
             </div>
@@ -57,6 +94,13 @@
       </van-col>
     </van-row>
     <van-calendar v-model="showCalendar" :minDate="minDate" :default-date="defaultDate" :first-day-of-week="1" :formatter="formatterDay" color="#01C1B5" type="range" get-container="body" @select="selectDate" @confirm="onConfirm" @close="onClose" />
+
+    <van-popup v-model="showMusicGroup" position="bottom" round>
+      <van-picker :columns="musicGroupList" show-toolbar @cancel="showMusicGroup = false" @confirm="onSetMusicGroup" />
+    </van-popup>
+    <van-popup v-model="showClass" position="bottom" round>
+      <van-picker :columns="classList" show-toolbar @cancel="showClass = false" @confirm="onSetClass" />
+    </van-popup>
   </div>
 </template>
 
@@ -64,6 +108,7 @@
 import Search from "@/components/Search";
 import dayjs from "dayjs";
 import { getNowDateAndMonday, getNowDateAndSunday } from "@/common/common";
+import { queryTeacherMusicGroup, queryTeacherMusicClass } from "./api";
 export default {
   props: {
     active: {
@@ -87,9 +132,14 @@ export default {
   data() {
     return {
       showCalendar: false,
+      showMusicGroup: false,
+      musicGroupList: [],
+      showClass: false,
+      classList: [],
       minDate: new Date(2000, 0, 1),
       defaultDate: [],
       memberFlag: "",
+      studentType: "", // 1 -> musicFlag，2 -> hasEndVipFlag，3 -> hasNotStartVipFlag
       // 类型为全部时
       startDay: null,
       endDay: null,
@@ -102,6 +152,10 @@ export default {
         trainDay: null,
         recordNum: null,
       },
+      musicGroupId: "",
+      musicGroupName: "全部乐团",
+      classId: "",
+      className: "全部班级",
     };
   },
   async mounted() {
@@ -121,6 +175,7 @@ export default {
     this.endDay = endTime;
 
     this.onSort();
+    this.getOrchestraList();
   },
   computed: {
     calendarValue() {
@@ -131,6 +186,70 @@ export default {
     },
   },
   methods: {
+    async getOrchestraList() {
+      // this.orchestraLoading = true;
+      try {
+        const { data } = await queryTeacherMusicGroup({});
+        const result = data || [];
+        const tempList = [
+          {
+            text: "全部乐团",
+            value: "",
+          },
+        ];
+        result.forEach((item) => {
+          tempList.push({
+            text: item.name,
+            value: item.id,
+          });
+        });
+        this.musicGroupList = tempList;
+      } catch {
+        //
+      }
+      // this.orchestraLoading = false;
+    },
+    async getClassList() {
+      try {
+        const { data } = await queryTeacherMusicClass({
+          musicGroupId: this.musicGroupId,
+        });
+        const result = data || [];
+        const tempList = [
+          {
+            text: "全部乐团",
+            value: "",
+          },
+        ];
+        result.forEach((item) => {
+          tempList.push({
+            text: item.name,
+            value: item.id,
+          });
+        });
+        this.classList = tempList;
+      } catch {
+        //
+      }
+    },
+    onSetMusicGroup(val) {
+      this.musicGroupId = val.value;
+      this.musicGroupName = val.text;
+      this.showMusicGroup = false;
+      this.getClassList();
+    },
+    onSetClass(val) {
+      this.classId = val.value;
+      this.className = val.text;
+      this.showClass = false;
+    },
+    onCheckType(type, value) {
+      if (type === "member") {
+        this.memberFlag = value;
+      } else if (type === "type") {
+        this.studentType = value;
+      }
+    },
     onSort(type) {
       let searchArray = this.searchArray;
       searchArray.forEach((item, index) => {
@@ -164,11 +283,17 @@ export default {
         }
       });
       const searchType = ["totalPlayTime", "trainNum", "trainDay", "recordNum"];
+      // 1 -> musicFlag,2 -> hasEndVipFlag,3 -> hasNotStartVipFlag
       let params = {
         search: this.search,
         memberFlag: this.memberFlag,
+        musicFlag: this.studentType === "1" ? true : false,
+        hasEndVipFlag: this.studentType === "2" ? true : false,
+        hasNotStartVipFlag: this.studentType === "3" ? true : false,
         startTime: this.startDay,
         endTime: this.endDay,
+        classGroupId: this.classId,
+        musicGroupId: this.musicGroupId,
         page: 1,
         sort: searchType[currentIndex],
         order: currentType,
@@ -239,6 +364,11 @@ export default {
       this.startDay = startTime;
       this.endDay = endTime;
       this.memberFlag = "";
+      this.studentType = "";
+      this.musicGroupId = "";
+      this.musicGroupName = "全部乐团";
+      this.classId = "";
+      this.className = "全部班级";
       this.onSubmit();
     },
     onClose() {
@@ -260,11 +390,25 @@ export default {
 
 <style lang="less" scoped>
 /deep/.van-dropdown-menu__title::after {
+  border-color: transparent transparent #aaaaaa #aaaaaa;
+}
+/deep/.van-dropdown-menu__title--active::after {
   border-color: transparent transparent #01c1b5 #01c1b5;
 }
+/deep/.van-dropdown-item__content {
+  border-radius: 0px 0px 12px 12px;
+}
+.search-group {
+  max-height: 4rem;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
 .calendarColor {
-  color: #333;
-  font-size: 0.14rem;
+  font-size: 15px;
+  color: #333333;
+}
+.studentCell {
+  padding: 0.18rem 0.13rem;
 }
 .visit-tips {
   background-color: #fff;
@@ -327,9 +471,35 @@ export default {
   /deep/.van-cell__value {
     flex: 1 auto;
   }
-  /deep/.van-radio-group--horizontal {
-    justify-content: flex-end;
-    font-size: 0.12rem;
+}
+
+.btn-group {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  // gap: 0 10px;
+  margin: 0 -0.05rem;
+
+  /deep/.van-button {
+    margin: 0.1rem 0.05rem 0;
+    padding: 0;
+    font-weight: 400;
+    font-size: 0.13rem;
+    width: calc(33.3% - 0.1rem);
+    height: 0.34rem;
+  }
+
+  /deep/.van-button--default {
+    background: #f6f6f6;
+    border-color: #f6f6f6;
+  }
+}
+.submit-group {
+  padding: 0.14rem 0.16rem;
+  display: flex;
+  /deep/.van-button {
+    font-size: 0.16rem;
+    height: 0.44rem;
   }
 }
 </style>

vue.config.js

@@ -1,4 +1,4 @@
-let targetUrl = "https://mteatest.dayaedu.com";
+let targetUrl = "https://mteadev.dayaedu.com";
 // let targetUrl = "http://192.168.3.26:8000";
 // let targetUrl = 'http://192.168.3.20:8000'
 // let targetUrl = 'https://online.dayaedu.com'