修改样式

src/components/o-empty/index.tsx

@@ -1,108 +1,111 @@
-import { defineComponent, PropType } from 'vue'
-import styles from './index.module.less'
-import empty from '@common/images/icon_nodata.png'
-import { Button, Empty, Image } from 'vant'
-import { postMessage } from '@/helpers/native-message'
-
-export const getAssetsHomeFile = (fileName: string) => {
-  const path = `./images/${fileName}`
-  const modules = import.meta.globEager('./images/*')
-  return modules[path].default
-}
-
-export default defineComponent({
-  name: 'o-empty',
-  props: {
-    tips: {
-      type: String
-    },
-    type: {
-      // 空 | 达人认证 | 音乐人认证 | 直播认证
-      type: String as PropType<
-        'empty' | 'error' | 'network' | 'search' | 'emptyContent' | 'notFond'
-      >,
-      default: 'empty'
-    },
-    classImgSize: {
-      type: String as PropType<'CERT' | 'SMALL'>,
-      default: ''
-    },
-    imageSize: {
-      type: Number,
-      default: 0
-    },
-    plain: {
-      type: Boolean,
-      default: false
-    },
-    btnStatus: {
-      type: Boolean,
-      default: false
-    },
-    buttonText: {
-      type: String,
-      default: '我知道了'
-    },
-    onClick: Function
-  },
-  methods: {
-    onResult() {
-      if (this.onClick) {
-        this.onClick()
-      } else {
-        postMessage({ api: 'back', content: {} })
-      }
-    }
-  },
-  computed: {
-    image() {
-      let image = null as any
-      switch (this.type) {
-        case 'emptyContent':
-          image = getAssetsHomeFile('emptyContent.png')
-          break
-        case 'error':
-          image = 'error'
-          break
-        case 'network':
-          image = getAssetsHomeFile('network.png')
-          break
-        case 'search':
-          image = 'search'
-          break
-        case 'notFond':
-          image = getAssetsHomeFile('notFond.png')
-          break
-        default:
-          image = getAssetsHomeFile('empty.png')
-          break
-      }
-      return image
-    }
-  },
-  render() {
-    return (
-      <div class={[styles['col-result'], 'o-result-container']}>
-        <Empty
-          image={this.image}
-          imageSize={this.imageSize || ''}
-          class={styles[this.classImgSize]}
-          description={this.tips}
-        />
-
-        {this.btnStatus ? (
-          <Button
-            class={styles.btn}
-            round
-            block
-            type="primary"
-            plain={this.plain}
-            onClick={this.onResult}
-          >
-            {this.buttonText}
-          </Button>
-        ) : null}
-      </div>
-    )
-  }
-})
+import { defineComponent, PropType } from 'vue'
+import styles from './index.module.less'
+import empty from '@common/images/icon_nodata.png'
+import { Button, Empty, Image } from 'vant'
+import { postMessage } from '@/helpers/native-message'
+
+export const getAssetsHomeFile = (fileName: string) => {
+  const path = `./images/${fileName}`
+  const modules = import.meta.globEager('./images/*')
+  return modules[path].default
+}
+
+export default defineComponent({
+  name: 'o-empty',
+  props: {
+    tips: {
+      type: String
+    },
+    type: {
+      // 空 | 达人认证 | 音乐人认证 | 直播认证
+      type: String as PropType<
+        'empty' | 'error' | 'network' | 'search' | 'emptyContent' | 'notFond' | 'emptyDefault'
+      >,
+      default: 'empty'
+    },
+    classImgSize: {
+      type: String as PropType<'CERT' | 'SMALL'>,
+      default: ''
+    },
+    imageSize: {
+      type: Number,
+      default: 0
+    },
+    plain: {
+      type: Boolean,
+      default: false
+    },
+    btnStatus: {
+      type: Boolean,
+      default: false
+    },
+    buttonText: {
+      type: String,
+      default: '我知道了'
+    },
+    onClick: Function
+  },
+  methods: {
+    onResult() {
+      if (this.onClick) {
+        this.onClick()
+      } else {
+        postMessage({ api: 'back', content: {} })
+      }
+    }
+  },
+  computed: {
+    image() {
+      let image = null as any
+      switch (this.type) {
+        case 'emptyContent':
+          image = getAssetsHomeFile('emptyContent.png')
+          break
+        case 'emptyDefault':
+          image = getAssetsHomeFile('emptyDefault.png')
+          break
+        case 'error':
+          image = 'error'
+          break
+        case 'network':
+          image = getAssetsHomeFile('network.png')
+          break
+        case 'search':
+          image = 'search'
+          break
+        case 'notFond':
+          image = getAssetsHomeFile('notFond.png')
+          break
+        default:
+          image = getAssetsHomeFile('empty.png')
+          break
+      }
+      return image
+    }
+  },
+  render() {
+    return (
+      <div class={[styles['col-result'], 'o-result-container']}>
+        <Empty
+          image={this.image}
+          imageSize={this.imageSize || ''}
+          class={styles[this.classImgSize]}
+          description={this.tips}
+        />
+
+        {this.btnStatus ? (
+          <Button
+            class={styles.btn}
+            round
+            block
+            type="primary"
+            plain={this.plain}
+            onClick={this.onResult}
+          >
+            {this.buttonText}
+          </Button>
+        ) : null}
+      </div>
+    )
+  }
+})

src/school/train-report/modal/index.module.less

@@ -164,6 +164,7 @@
     }
 
     .overWorkType {
+      display: inline-block;
       box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.62);
       border-radius: 12px;
       padding: 4px 8px;
@@ -211,6 +212,28 @@
     }
   }
 
+  .echartsContainer {
+    height: 210px;
+    width: 100%;
+    position: relative;
+
+    .oEmtpy {
+      position: absolute;
+      inset: 0;
+      overflow: hidden;
+
+      :global {
+        .van-empty {
+          // padding-bottom: 0 !important;
+        }
+
+        .van-empty__description {
+          margin-top: 2px;
+        }
+      }
+    }
+  }
+
   .classEcharts {
     height: 210px;
     width: 100%;

src/school/train-report/modal/student-attendance.tsx

@@ -22,6 +22,7 @@ import { LineChart } from 'echarts/charts'
 import { LabelLayout, UniversalTransition } from 'echarts/features'
 import { CanvasRenderer } from 'echarts/renderers'
 import { reportCourseType } from '../week-report'
+import OEmpty from '@/components/o-empty'
 // type EChartsOption = echarts.EChartsOption
 
 // 注册必须的组件
@@ -54,7 +55,8 @@ export default defineComponent({
   },
   setup(props) {
     const forms = reactive({
-      total: 0
+      total: 0,
+      valueList: []
     })
 
     watch(
@@ -95,6 +97,8 @@ export default defineComponent({
         }
       }
 
+      forms.valueList = valueList
+
       const chartDom = document.getElementById('studentEcharts')
       myChart = echarts.init(chartDom as HTMLDivElement)
       const option = {
@@ -210,7 +214,15 @@ export default defineComponent({
             <div class={styles.calssEchartTitle}>
               <span class={styles.unit}>单位：%</span>
             </div>
-            <div id="studentEcharts" class={styles.classEcharts}></div>
+
+            <div class={styles.echartsContainer}>
+              <div id="studentEcharts" class={styles.classEcharts}></div>
+              {forms.valueList.length <= 0 && (
+                <div class={styles.oEmtpy}>
+                  <OEmpty classImgSize={'SMALL'} type="emptyDefault" tips={'暂无数据'} />
+                </div>
+              )}
+            </div>
           </div>
         </div>
       </div>

src/school/train-report/modal/teacher-attendance.tsx

@@ -21,6 +21,7 @@ import { LineChart } from 'echarts/charts'
 import { LabelLayout, UniversalTransition } from 'echarts/features'
 import { CanvasRenderer } from 'echarts/renderers'
 import { reportCourseType } from '../week-report'
+import OEmpty from '@/components/o-empty'
 // type EChartsOption = echarts.EChartsOption
 
 // 注册必须的组件
@@ -59,7 +60,8 @@ export default defineComponent({
     const forms = reactive({
       total: 0,
       total2: 0,
-      type: ['YES', 'NOT']
+      type: ['YES', 'NOT'],
+      valueList: [] as any
     })
 
     watch(
@@ -112,6 +114,9 @@ export default defineComponent({
           // valueList2.push(dataNot[i])
         }
       }
+
+      forms.valueList = [...valueList, ...valueList2]
+
       if (forms.type.includes('YES')) {
         seriesList.push({
           name: '出勤课时数',
@@ -201,15 +206,20 @@ export default defineComponent({
         tooltip: {
           trigger: 'axis',
           axisPointer: {
-            type: 'shadow'
-            // label: {
-            //   formatter: (params: any) => {
-            //     console.log(params)
-            //   }
-            // }
+            type: 'shadow',
+            label: {
+              formatter: (params: any) => {
+                if (params.value.length > 11) {
+                  return params.value.substring(0, 11) + '...'
+                }
+                return params.value
+              }
+            }
           },
           textStyle: {
-            color: '#131415'
+            color: '#131415',
+            width: 100,
+            overflow: 'truncate'
           }
         },
         grid: {
@@ -299,7 +309,15 @@ export default defineComponent({
                 </span>
               </div>
             </div>
-            <div id="teacherEcharts" class={styles.classEcharts}></div>
+
+            <div class={styles.echartsContainer}>
+              <div id="teacherEcharts" class={styles.classEcharts}></div>
+              {forms.valueList.length <= 0 && (
+                <div class={styles.oEmtpy}>
+                  <OEmpty classImgSize={'SMALL'} type="emptyDefault" tips={'暂无数据'} />
+                </div>
+              )}
+            </div>
           </div>
         </div>
       </div>

src/school/train-report/modal/train-class.tsx

@@ -23,6 +23,7 @@ import { PieChart } from 'echarts/charts'
 import { LabelLayout, UniversalTransition } from 'echarts/features'
 import { CanvasRenderer } from 'echarts/renderers'
 import { reportCourseType } from '../week-report'
+import OEmpty from '@/components/o-empty'
 // type EChartsOption = echarts.EChartsOption
 
 // 注册必须的组件
@@ -56,7 +57,8 @@ export default defineComponent({
   },
   setup(props) {
     const forms = reactive({
-      total: 0
+      total: 0,
+      valueList: []
     })
 
     watch(
@@ -88,6 +90,7 @@ export default defineComponent({
           }
         }
       }
+      forms.valueList = valueList
 
       const chartDom = document.getElementById('classEcharts')
       myChart = echarts.init(chartDom as HTMLDivElement)
@@ -203,7 +206,15 @@ export default defineComponent({
               <span class={styles.unit}>单位：课时</span>
               <span class={styles.unitType}>本{props.type === 'month' ? '月' : '周'}训练</span>
             </div>
-            <div id="classEcharts" class={styles.classEcharts}></div>
+
+            <div class={styles.echartsContainer}>
+              <div id="classEcharts" class={styles.classEcharts}></div>
+              {forms.valueList.length <= 0 && (
+                <div class={styles.oEmtpy}>
+                  <OEmpty classImgSize={'SMALL'} type="emptyDefault" tips={'暂无数据'} />
+                </div>
+              )}
+            </div>
           </div>
         </div>
       </div>

src/school/train-report/modal/train-over-work.tsx

@@ -23,6 +23,7 @@ import { PieChart } from 'echarts/charts'
 import { LabelLayout, UniversalTransition } from 'echarts/features'
 import { CanvasRenderer } from 'echarts/renderers'
 import { reportCourseType } from '../week-report'
+import OEmpty from '@/components/o-empty'
 // type EChartsOption = echarts.EChartsOption
 
 // 注册必须的组件
@@ -57,6 +58,7 @@ export default defineComponent({
   setup(props) {
     const forms = reactive({
       total: 0,
+      valueList: [],
       type: 'target' as 'target' | 'submitted',
       workTarget: {} as any, //作业完成率
       workSubmitted: {} as any //作业提交率
@@ -95,6 +97,7 @@ export default defineComponent({
           }
         }
       }
+      forms.valueList = valueList
 
       const chartDom = document.getElementById('overWorkEcharts')
       myChart = echarts.init(chartDom as HTMLDivElement)
@@ -237,7 +240,14 @@ export default defineComponent({
                 </span>
               </div>
             </div>
-            <div id="overWorkEcharts" class={styles.classEcharts}></div>
+            <div class={styles.echartsContainer}>
+              <div id="overWorkEcharts" class={styles.classEcharts}></div>
+              {forms.valueList.length <= 0 && (
+                <div class={styles.oEmtpy}>
+                  <OEmpty classImgSize={'SMALL'} type="emptyDefault" tips={'暂无数据'} />
+                </div>
+              )}
+            </div>
           </div>
         </div>
       </div>

src/school/train-report/report.module.less

@@ -53,12 +53,15 @@
   padding-top: 16px;
   padding-left: 17px;
   margin-bottom: 50px;
+
   &.teacherHeaderContant {
     .orchestra {
       color: #3e0ed7;
     }
+
     .trainTimer {
       color: #3a17fd;
+
       &::before,
       &::after {
         background: url('./images/month/teacher-icon-point.png') no-repeat center;
@@ -66,6 +69,7 @@
       }
     }
   }
+
   .orchestra {
     padding: 3px 7px;
     display: inline-flex;
@@ -73,6 +77,7 @@
     border-radius: 12px;
     font-size: 12px;
     color: #ffffff;
+
     span {
       max-width: 200px;
       white-space: nowrap;
@@ -80,16 +85,19 @@
       text-overflow: ellipsis;
     }
   }
+
   .iconOrchestra {
     width: 14px;
     height: 14px;
     margin-right: 4px;
   }
+
   .iconTrainWeek {
     height: 38px;
     width: 156px;
     padding: 18px 0 8px;
   }
+
   .trainTimer {
     display: flex;
     align-items: center;
@@ -135,6 +143,7 @@
     height: 42px;
     margin-right: 5px;
   }
+
   span {
     padding: 0 4px;
     color: #41ffe2;
@@ -157,6 +166,7 @@
   border-radius: 16px 100px 100px 18px;
   border: 3px solid #99ffdd;
   overflow: hidden;
+
   &::after {
     position: absolute;
     right: -40px;
@@ -173,14 +183,17 @@
     height: 42px;
     margin-right: 5px;
   }
+
   span {
     padding: 0 4px;
     color: #41ffe2;
     font-family: DINA;
   }
+
   .subjectTips {
     line-height: 20px;
   }
+
   .subjectNames {
     padding-top: 2px;
     font-weight: 600;
@@ -189,6 +202,7 @@
     font-size: 14px;
   }
 }
+
 .teacherTrainClass {
   background: rgba(92, 72, 239, 0.71);
   box-shadow: inset 4px 4px 0px 0px #7765ef;
@@ -207,6 +221,7 @@
     background-color: #ffffff;
     border-radius: 8px;
     overflow: hidden;
+
     .popupWeekBanner {
       width: 100%;
       position: absolute;
@@ -226,10 +241,12 @@
       padding-left: 18px;
 
       .trainTimer {
+
         &::before,
         &::after {
           display: none;
         }
+
         .point {
           margin-left: 4px;
           margin-right: 4px;
@@ -256,6 +273,7 @@
       font-weight: 600;
       color: #ffffff;
     }
+
     .codeQr {
       position: relative;
       margin: 108px auto 0;
@@ -267,6 +285,7 @@
       border-radius: 11px;
       overflow: hidden;
       box-sizing: border-box;
+
       img {
         width: 100%;
         height: 100%;
@@ -284,12 +303,10 @@
     .codeBtnText {
       margin: 20px auto 0;
       display: inline-block;
-      background: linear-gradient(
-        132deg,
-        rgba(199, 239, 243, 0.25) 0%,
-        rgba(229, 206, 251, 0.25) 40%,
-        rgba(147, 194, 254, 0.25) 100%
-      );
+      background: linear-gradient(132deg,
+          rgba(199, 239, 243, 0.25) 0%,
+          rgba(229, 206, 251, 0.25) 40%,
+          rgba(147, 194, 254, 0.25) 100%);
       box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.62);
       border-radius: 18px;
       padding: 6px 16px;
@@ -306,11 +323,13 @@
       text-align: center;
     }
   }
+
   .close {
     position: absolute;
     top: 12px;
     right: 15px;
   }
+
   .codeBottom {
     position: relative;
     margin-top: 32px;
@@ -318,12 +337,14 @@
     border-radius: 20px 20px 0px 0px;
     padding-bottom: 10px;
   }
+
   .title {
     font-size: 16px;
     font-weight: 600;
     color: #333333;
     line-height: 22px;
     padding: 15px 15px 0;
+
     i {
       display: inline-block;
       margin-right: 6px;
@@ -333,14 +354,16 @@
       border-radius: 2px;
     }
   }
+
   .shareImg {
     width: 47px;
     height: 47px;
   }
+
   .shareText {
     padding-top: 6px;
     font-size: 14px;
     color: #333333;
     line-height: 20px;
   }
-}
+}