添加定位

src/helpers/constant.ts

@@ -12,28 +12,43 @@ export const teacherAttendanceStatus = {
   NO_COURSE: '无课'
 } as any;
 
+// 班级类型
+// NORMAL("NORMAL", "声部班"), MIX("MIX", "合奏班"), HIGH("HIGH", "基础技能班"), HIGH_ONLINE("HIGH_ONLINE", "线上基础技能班"),
+// MUSIC_NETWORK("MUSIC_NETWORK", "乐团网管课");
+export const orchestraClassType = {
+  NORMAL: '声部班',
+  MIX: '合奏班',
+  HIGH: '基础技能班',
+  HIGH_ONLINE: '线上基础技能班',
+  MUSIC_NETWORK: '乐团网管课'
+} as any;
+
 // 课程类型
 export const coursesType = {
-  // NORMAL: '声部课',
+  // SINGLE: '声部课',
+  // MIX: '合奏课',
+  // HIGH: '基础技能课',
+  // VIP: 'VIP课',
+  // DEMO: '试听课',
+  // COMPREHENSIVE: '综合课',
+  // ENLIGHTENMENT: '启蒙课',
+  // TRAINING_SINGLE: '集训声部课',
+  // TRAINING_MIX: '集训合奏课',
+  // CLASSROOM: '课堂课',
+  // PRACTICE: '网管课',
+  // COMM: '对外课',
+  // HIGH_ONLINE: '线上基础技能课',
+  // MUSIC_NETWORK: '乐团网管课'
+
   SINGLE: '声部课',
   MIX: '合奏课',
   HIGH: '基础技能课',
-  VIP: 'VIP课',
-  DEMO: '试听课',
   COMPREHENSIVE: '综合课',
-  ENLIGHTENMENT: '启蒙课',
-  // TRAINING: '集训课',
   TRAINING_SINGLE: '集训声部课',
   TRAINING_MIX: '集训合奏课',
   CLASSROOM: '课堂课',
-  PRACTICE: '网管课',
-  COMM: '对外课',
-  // MUSIC: '乐团课',
   HIGH_ONLINE: '线上基础技能课',
   MUSIC_NETWORK: '乐团网管课'
-  // MAINTENANCE: '乐器保养',
-  // CLOUD_TEACHER: '云教练',
-  // CLOUD_TEACHER_PLUS: '云教练+'
 } as any;
 
 // 评价类型

src/styles/index.less

@@ -116,9 +116,21 @@ body {
   }
 }
 
+.myClassM2 {
+  .amap-marker-label {
+    background: #FF5A56;
+  }
+}
 
 // 地图样式
 .amap-marker-label {
+  // border: 0;
+  background: #00B2A7;
   border: 0;
-  background: transparent;
+  color: #fff;
+  line-height: 18px;
+  font-size: 12px;
+  padding: 2px 4px;
+  border-radius: 4px;
+
 }

src/views/school-register/index.tsx

@@ -178,7 +178,7 @@ export default defineComponent({
             }}
           </Field>
 
-          <Cell>
+          <Cell border={false}>
             <div class={styles.tips}>
               <img src={iconTips} class={styles.iconTips} />
               提示：手机号码将成为您管乐迷学校端登录账户

src/views/teacher-attendance/amap-gps.module.less

@@ -1,10 +0,0 @@
-.info {
-  padding: 0;
-  background: #00B2A7;
-  border: 0;
-  color: #fff;
-  line-height: 18px;
-  font-size: 12px;
-  padding: 2px 4px;
-  border-radius: 4px;
-}

src/views/teacher-attendance/amap-gps.tsx

@@ -1,8 +1,10 @@
-import { defineComponent, onMounted, reactive, ref, shallowRef } from 'vue';
+import { defineComponent, onMounted, reactive, shallowRef } from 'vue';
 import styles from './amap-gps.module.less';
 import AMapLoader from '@amap/amap-jsapi-loader';
 import MHeader from '@/components/m-header';
 import MSticky from '@/components/m-sticky';
+import iconMap from './images/icon-map.png';
+import iconMapError from './images/icon-map-error.png';
 export default defineComponent({
   name: 'amap-gps',
   setup() {
@@ -11,7 +13,7 @@ export default defineComponent({
       attendance_range: 1000,
       lnglat: [114.343011, 30.55499] as any, // 教学点 A座
       address: '',
-      signInLongitudeLatitude: [114.341116, 30.552401], // 签到  B座
+      signInLongitudeLatitude: [114.333488, 30.547087], // 签到  B座
       signOutLongitudeLatitude: [114.34424, 30.556584], // 签退
       signInMark: null,
       signOutMark: null,
@@ -42,8 +44,8 @@ export default defineComponent({
           map.value = new AMap.Map('gpsContainer', {
             resizeEnable: true,
             zoom: 16,
-            zooms: [2, 22],
-            center: [114.34371, 30.55939]
+            zooms: [2, 22]
+            // center: [114.34371, 30.55939]
           });
           AMap.plugin(
             [
@@ -76,20 +78,20 @@ export default defineComponent({
               }
 
               // 加载签到点
-              // if (
-              //   selectMapAddress.signInLongitudeLatitude &&
-              //   selectMapAddress.signInLongitudeLatitude.length > 0
-              // ) {
-              //   console.log(
-              //     'signInLongitudeLatitude',
-              //     selectMapAddress.signInLongitudeLatitude
-              //   );
-              //   addMarker(
-              //     selectMapAddress.signInLongitudeLatitude,
-              //     '签到点',
-              //     'signInMark'
-              //   );
-              // }
+              if (
+                selectMapAddress.signInLongitudeLatitude &&
+                selectMapAddress.signInLongitudeLatitude.length > 0
+              ) {
+                console.log(
+                  'signInLongitudeLatitude',
+                  selectMapAddress.signInLongitudeLatitude
+                );
+                addMarker(
+                  selectMapAddress.signInLongitudeLatitude,
+                  '签到点',
+                  'signInMark'
+                );
+              }
               // 加载签退点
               if (
                 selectMapAddress.signOutLongitudeLatitude &&
@@ -110,8 +112,7 @@ export default defineComponent({
                 // 连线 设置签到点与教学点的距离
                 computeDis(
                   selectMapAddress.addressMark,
-                  selectMapAddress.signInMark,
-                  'top'
+                  selectMapAddress.signInMark
                 );
                 console.log('连线 设置签到点与教学点的距离');
               }
@@ -122,8 +123,7 @@ export default defineComponent({
                 // 连线 设置签退点与教学点的距离
                 computeDis(
                   selectMapAddress.addressMark,
-                  selectMapAddress.signOutMark,
-                  'bottom'
+                  selectMapAddress.signOutMark
                 );
                 console.log('连线 设置签退点与教学点的距离');
               }
@@ -137,26 +137,22 @@ export default defineComponent({
             type: 'signInMark' | 'signOutMark' | 'addressMark'
           ) {
             const Icon = new AMap.Icon({
-              size: [25, 34],
-              image: 'https://daya.ks3-cn-beijing.ksyun.com/202211/TO13VtW.png',
-              imageSize: [25, 34]
+              size: [27, 28],
+              image: iconMap,
+              imageSize: [27, 28]
             });
-            // const Icon = new AMap.Icon({
-            //   size: new AMap.Size([25, 34]), // 图标尺寸
-            //   image: 'https://daya.ks3-cn-beijing.ksyun.com/202211/TO13VtW.png', // Icon的图像
-            //   // imageOffset: new AMap.Pixel(0, -60), // 图像相对展示区域的偏移量，适于雪碧图等
-            //   imageSize: new AMap.Size([25, 34]) // 根据所设置的大小拉伸或压缩图片
-            // });
             marker = new AMap.Marker({
-              // icon: Icon,
-              // offset: new AMap.Pixel(-25, -14),
+              icon: Icon,
+              // offset: new AMap.Pixel(-14, -28),
+              anchor: 'bottom-center',
               position: new AMap.LngLat(...lnglat),
               title
             });
 
             marker.setLabel({
-              content: `<div class='${styles.info}' >${title}</div>`, //设置文本标注内容
-              direction: 'top'
+              content: `${title}`, //设置文本标注内容
+              direction: 'top',
+              offset: [0, -2]
             });
 
             selectMapAddress[type] = marker;
@@ -171,67 +167,88 @@ export default defineComponent({
             }
           }
           // 连线 写标记
-          function computeDis(m1: any, m2: any, type: string) {
-            const line = new AMap.Polyline({
-              strokeColor: '#01C1B5',
-              strokeWeight: 3,
-              isOutline: false,
-              outlineColor: '#01C1B5'
-            });
-            line.setMap(map.value);
-
+          function computeDis(m1: any, m2: any) {
+            console.log(m2, 'm1 m2');
             const p1 = m1.getPosition();
             const p2 = m2.getPosition();
             const textPos = p1.divideBy(2).add(p2.divideBy(2));
             const distance = Math.round(p1.distance(p2));
             const path = [p1, p2];
-            line.setPath(path);
+            const mainColor =
+              distance > selectMapAddress.attendance_range
+                ? '#FF5A56'
+                : '#01C1B5';
+            // 判断距离是否已经在圈外了
+            if (distance > selectMapAddress.attendance_range) {
+              m2.dom.classList.add('myClassM2');
+              m2.setIcon(iconMapError);
+            }
 
-            const a = calcAngle([p1.lng, p2.lng], [p2.lng, p1.lng]);
-            console.log(a, 'aaaaaaa');
+            const line = new AMap.Polyline({
+              strokeColor: mainColor,
+              strokeWeight: 2,
+              isOutline: true,
+              outlineColor: mainColor
+            });
+            line.setMap(map.value);
+            line.setPath(path);
 
-            if (type == 'top') {
-              console.log(p1, p2, textPos, distance, 'computed', type);
-              const text = new AMap.Text({
-                // text: '签到点距离学校' + distance + '米',
-                text: distance + 'M',
-                // angle: a,
-                style: {
-                  'font-size': '12px'
-                }
-                //设置文本标注方位
-              });
+            // const a = calcAngle([p1.lng, p2.lng], [p2.lng, p1.lng]);
+            // console.log(a, 'aaaaaaa');
+            const text = new AMap.Text({
+              text: distance + 'M',
+              style: {
+                'font-size': '12px',
+                color: '#fff',
+                border: 'none',
+                backgroundColor: mainColor
+              }
+              //设置文本标注方位
+            });
+            text.setPosition(textPos);
+            text.setMap(map.value);
+            // if (type == 'top') {
+            //   console.log(p1, p2, textPos, distance, 'computed', type);
+            //   const text = new AMap.Text({
+            //     // text: '签到点距离学校' + distance + '米',
+            //     text: distance + 'M',
+            //     // angle: a,
+            //     style: {
+            //       'font-size': '12px'
+            //     }
+            //     //设置文本标注方位
+            //   });
 
-              // text.setOffset(new AMap.Pixel(-40, -10));
-              text.setPosition(textPos);
-              text.setMap(map.value);
-            } else {
-              const text = new AMap.Text({
-                // text: '签退点距离学校' + distance + '米',
-                text: distance + 'M',
-                angle: a,
-                style: {
-                  'font-size': '12px'
-                }
-                //设置文本标注方位
-              });
-              // text.setOffset(new AMap.Pixel(-40, -50));
-              text.setPosition(textPos);
-              text.setMap(map.value);
-              // line.setPath(path);
-            }
+            //   // text.setOffset(new AMap.Pixel(-40, -10));
+            //   text.setPosition(textPos);
+            //   text.setMap(map.value);
+            // } else {
+            //   const text = new AMap.Text({
+            //     // text: '签退点距离学校' + distance + '米',
+            //     text: distance + 'M',
+            //     // angle: a,
+            //     style: {
+            //       'font-size': '12px'
+            //     }
+            //     //设置文本标注方位
+            //   });
+            //   // text.setOffset(new AMap.Pixel(-40, -50));
+            //   text.setPosition(textPos);
+            //   text.setMap(map.value);
+            //   // line.setPath(path);
+            // }
           }
 
           // 计算两点间的角度
-          function calcAngle(start: any, end: any) {
-            const p_start = map.value.lngLatToContainer(start),
-              p_end = map.value.lngLatToContainer(end);
+          // function calcAngle(start: any, end: any) {
+          //   const p_start = map.value.lngLatToContainer(start),
+          //     p_end = map.value.lngLatToContainer(end);
 
-            const diff_x = p_end.x - p_start.x,
-              diff_y = p_end.y - p_start.y;
-            console.log((360 * Math.atan2(diff_y, diff_x)) / (2 * Math.PI));
-            return (360 * Math.atan2(diff_y, diff_x)) / (2 * Math.PI) - 45;
-          }
+          //   const diff_x = p_end.x - p_start.x,
+          //     diff_y = p_end.y - p_start.y;
+          //   console.log((360 * Math.atan2(diff_y, diff_x)) / (2 * Math.PI));
+          //   return (360 * Math.atan2(diff_y, diff_x)) / (2 * Math.PI) - 45;
+          // }
         })
         .catch(() => {
           //

src/views/teacher-attendance/detail.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, reactive } from 'vue';
+import { defineComponent, onMounted, reactive, ref } from 'vue';
 import styles from './index.module.less';
 import SkeletionIndexModal from './skeletion-index-modal';
 import { Cell, CellGroup, DropdownItem, DropdownMenu, Icon, Image } from 'vant';
@@ -12,10 +12,12 @@ import { useRoute } from 'vue-router';
 import { coursesType, teacherAttendanceStatus } from '@/helpers/constant';
 import dayjs from 'dayjs';
 import MEmpty from '@/components/m-empty';
+import DropDownModal from '../site-management/drop-down-modal';
 
 export default defineComponent({
   name: 'teacher-attendance-detail',
   setup() {
+    const dropDownItemRef1 = ref();
     const route = useRoute();
     const forms = reactive({
       teacherId: route.query.teacherId,
@@ -31,11 +33,7 @@ export default defineComponent({
         { text: '正常', value: '1' },
         { text: '异常', value: '0' }
       ],
-      typeColumns: [
-        { text: '全部类型', value: '' },
-        { text: '声部课', value: 'TRAINING' },
-        { text: '集训声部课', value: 'TRAINING_SINGLE' }
-      ],
+      typeColumns: [{ text: '全部类型', value: '' }],
       params: {
         courseScheduleType: '',
         signInStatus: ''
@@ -44,6 +42,22 @@ export default defineComponent({
       list: []
     });
 
+    const onDropDownClose = (item: any) => {
+      item.value && item.value.toggle();
+    };
+
+    const formatName = (type: string) => {
+      if (type === 'orchestra') {
+        let name = '';
+        forms.typeColumns.forEach((item: any) => {
+          if (forms.params.courseScheduleType === item.value) {
+            name = item.text;
+          }
+        });
+        return name;
+      }
+    };
+
     // 老师详情
     const getTeacherInfo = async () => {
       try {
@@ -90,6 +104,15 @@ export default defineComponent({
       //   forms.listState.loading = false;
       //   forms.listState.loadingList = false;
       // }, 1000);
+      for (const key in coursesType) {
+        if (Object.prototype.hasOwnProperty.call(coursesType, key)) {
+          const text = coursesType[key];
+          forms.typeColumns.push({
+            text,
+            value: key
+          });
+        }
+      }
 
       getTeacherInfo();
       getList();
@@ -170,14 +193,21 @@ export default defineComponent({
               forms.list = [];
               getList();
             }}></DropdownItem>
-          <DropdownItem
-            v-model={forms.params.courseScheduleType}
-            options={forms.typeColumns as any}
-            onChange={() => {
-              forms.listState.dataShow = true;
-              forms.list = [];
-              getList();
-            }}></DropdownItem>
+          <DropdownItem ref={dropDownItemRef1} title={formatName('orchestra')}>
+            <DropDownModal
+              selectValues={forms.params.courseScheduleType}
+              columns={forms.typeColumns}
+              open={dropDownItemRef1.value.state.showPopup}
+              onDropDownClose={() => onDropDownClose(dropDownItemRef1)}
+              onDropDownConfirm={(values: any) => {
+                forms.params.courseScheduleType = values[0];
+                onDropDownClose(dropDownItemRef1);
+                forms.listState.dataShow = true;
+                forms.list = [];
+                getList();
+              }}
+            />
+          </DropdownItem>
         </DropdownMenu>
 
         <SkeletionDetailModal v-model:show={forms.listState.loadingList}>

src/views/teacher-attendance/index.tsx

@@ -10,7 +10,10 @@ import SkeletionIndexModal from './skeletion-index-modal';
 import { useRouter } from 'vue-router';
 import request from '@/helpers/request';
 import MFullRefresh from '@/components/m-full-refresh';
-import { teacherAttendanceStatus } from '@/helpers/constant';
+import {
+  orchestraClassType,
+  teacherAttendanceStatus
+} from '@/helpers/constant';
 import MEmpty from '@/components/m-empty';
 
 export default defineComponent({
@@ -62,7 +65,9 @@ export default defineComponent({
         const { data } = await request.post(
           '/api-web/schoolTeacherAttendance/queryTeacherAttendance',
           {
+            requestType: 'form',
             data: {
+              coopId: 3,
               ...forms.params
             }
           }
@@ -87,9 +92,7 @@ export default defineComponent({
     };
 
     onMounted(() => {
-      // setTimeout(() => {
-      //   forms.listState.loading = false;
-      // }, 2000);
+      // 考勤
       for (const key in teacherAttendanceStatus) {
         if (
           Object.prototype.hasOwnProperty.call(teacherAttendanceStatus, key)
@@ -102,6 +105,16 @@ export default defineComponent({
         }
       }
 
+      for (const key in orchestraClassType) {
+        if (Object.prototype.hasOwnProperty.call(orchestraClassType, key)) {
+          const text = orchestraClassType[key];
+          forms.classColumns.push({
+            text,
+            value: key
+          });
+        }
+      }
+
       getList();
     });
     return () => (
@@ -113,6 +126,7 @@ export default defineComponent({
             onSearch={(val: string) => {
               forms.params.search = val;
               forms.listState.dataShow = true;
+              forms.list = [];
               getList();
             }}
           />
@@ -123,6 +137,7 @@ export default defineComponent({
               options={forms.statusColumns as any}
               onChange={() => {
                 forms.listState.dataShow = true;
+                forms.list = [];
                 getList();
               }}></DropdownItem>
             <DropdownItem
@@ -137,6 +152,7 @@ export default defineComponent({
                   forms.params.classType = values[0];
                   onDropDownClose(dropDownItemRef1);
                   forms.listState.dataShow = true;
+                  forms.list = [];
                   getList();
                 }}
               />