浏览代码

修改点击过快提醒和长时间不动提醒

plg 1 周之前
父节点
当前提交
fd09500990
共有 4 个文件被更改,包括 235 次插入17 次删除
  1. 102 0
      src/components/CpdmTip.vue
  2. 7 1
      src/components/CpmdHeader.vue
  3. 126 8
      src/views/Scale.vue
  4. 0 8
      src/views/ScaleDetail.vue

+ 102 - 0
src/components/CpdmTip.vue

@@ -0,0 +1,102 @@
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue'
+import { useRouter } from 'vue-router';
+const router = useRouter()
+const open = (val: any) => {
+    type.value = val.type;
+    message.value = val.message
+    visible.value = true
+
+    if (type.value == 2) {
+        timeP.value = setTimeout(() => {
+            //跳转到计划页面
+            router.push({ name: 'plan' })
+        }, 1000 * 120)
+        // 1000 * 120
+    }
+}
+
+//定时器方法
+const timeP = ref<any>()
+//
+
+defineExpose({ open })
+const visible = ref<boolean>(false)
+const message = ref<string>('')
+const type = ref<number>(1)
+const closeFun = () => {
+    visible.value = false
+    if (type.value == 2) {
+        clearTimeout(timeP.value);
+    }
+
+}
+onMounted(() => {
+
+})
+onUnmounted(() => {
+    console.log('----------------------')
+    clearTimeout(timeP.value)
+})
+
+</script>
+<template>
+    <div>
+        <el-dialog v-model="visible" width="500" style="border-radius: 20px;" class="dig_kg"
+            :close-on-click-modal="false">
+            <template #header="{ close, titleId, titleClass }">
+                <div class="my-header" style="text-align: center;">
+                    <div class="exit_login_title">温馨提示</div>
+                    <div class="exit_login_info">{{ message }}</div>
+                    <div class="start_button_out">
+                        <div class="start_button_self" @click="closeFun">
+                            确定
+                        </div>
+                    </div>
+
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+
+
+</template>
+<style lang="scss" scoped>
+.exit_login_title {
+    text-align: center;
+    color: #222222;
+    font-weight: 700;
+    font-size: 20px;
+    letter-spacing: 3px;
+}
+
+.exit_login_info {
+    text-align: center;
+    letter-spacing: 3px;
+    font-size: 18px;
+    margin-top: 20px;
+}
+
+.start_button_out {
+    margin-top: 40px;
+    // margin-bottom: 40px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+
+    .start_button_self {
+        cursor: pointer;
+        // width: 100px;
+        border-radius: 12px;
+        border: 3px solid #48D68E;
+        color: #ffffff;
+        background-color: #000000;
+        // margin-right: 20px;
+        padding: 5px 50px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+
+    }
+}
+</style>

+ 7 - 1
src/components/CpmdHeader.vue

@@ -130,7 +130,7 @@ const formatterName = (val: string) => {
                 <span v-if="!userInfo.userInfo?.userName">登录账号</span>
 
             </div>
-            <el-dialog v-model="visible" :show-close="true" width="500" style="border-radius: 20px;">
+            <el-dialog v-model="visible" :show-close="true" width="500" style="border-radius: 20px;" class="dig_kg">
                 <template #header="{ close, titleId, titleClass }">
                     <div class="my-header" style="text-align: center;">
                         <div class="exit_login_title">退出登录</div>
@@ -144,11 +144,17 @@ const formatterName = (val: string) => {
                     </div>
                 </template>
 
+
             </el-dialog>
         </div>
     </div>
 
 </template>
+<style scoped>
+:deep(.dig_kg> .el-dialog__header) {
+    padding-right: 0px !important;
+}
+</style>
 <style lang="scss" scoped>
 .el-menu {
     background-color: transparent !important

+ 126 - 8
src/views/Scale.vue

@@ -13,6 +13,7 @@ import { ElMessage } from 'element-plus';
 import { useRouter, useRoute } from 'vue-router';
 import { getCurrentTimeApi, getScaleApi, queryScaleDetailApi, saveScaleApi } from '@/api/plan';
 import { userInfoStore } from '@/stores'
+import CpdmTip from "@/components/CpdmTip.vue";
 //调用子组件的ref
 // 加一个锁表示不能重复点击
 const isLock = ref<boolean>(false)
@@ -26,7 +27,7 @@ const route = useRoute()
 // import { menuStatusStore } from '@/stores'
 // const menuStatus = menuStatusStore();
 // menuStatus.saveActiveIndex('3')
-
+const cpdmTip = ref<any>()
 //当前量表是否已经提交
 const isCompleted = ref<boolean>(false)
 
@@ -91,6 +92,10 @@ const listAnxiety = ref<any>([])
 
 //下一题的方法
 const nextTopic = () => {
+
+    //应该需要个防抖函数
+    //记录一个索引
+
     //当前选项的flag //是多少题
     //判断当前索引下的数组中是否有isCheck为空
     //先判断这个是不是
@@ -261,6 +266,51 @@ const subScaleData = async (data: any, flag: string) => {
     //     })
     // }, 1500)
 }
+
+//查看scl90是否已经完成了
+const sclIsCom = async () => {
+    if (userInfo.token) {
+
+        let userNo = ''
+        //登录的话
+        //判断当前是否有后台管理
+
+        userNo = userInfo.userInfo.userNo
+        //调用根据用户查询计划的API
+        let res: any = await userPlanApi(userNo)
+
+        for (let i = 0; i < res.data.length; i++) {
+            if (res.data[i].id = planId.value) {
+                planObj.value = res.data[i]
+            }
+
+        }
+        //将list赋值进去
+        planObj.value.list = [];
+        let params = {
+            planId: planObj.value.id,
+            userNo: userInfo.userInfo.userNo
+        }
+        //调用详细的API
+        let temp: any = await userPlanDetailApi(params)
+        planObj.value.list = temp.data
+        //判断是否需要
+        //判断量表中有几个是必须测试的且不显示的
+
+        for (let i = 0; i < planObj.value.list.length; i++) {
+            //先判断类型--在判断必做且不显示的---将这个写存储在数组
+            if (planObj.value.list[i].flag == '20210617140713') {
+                if (planObj.value.list[i].isCompleted == '1') {
+                    isComplate.value = '2';
+                }
+                if (planObj.value.list[i].isCompleted == '0') {
+                    isComplate.value = '0';
+                }
+            }
+        }
+    }
+}
+
 //根据计划ID查询问题
 const queryNeedScale = async () => {
     //
@@ -276,7 +326,6 @@ const queryNeedScale = async () => {
         //调用根据用户查询计划的API
         let res: any = await userPlanApi(userNo)
         //
-
         for (let i = 0; i < res.data.length; i++) {
             if (res.data[i].id = planId.value) {
                 planObj.value = res.data[i]
@@ -393,28 +442,92 @@ const lastTopic = () => {
     }
     topicIndex.value--
 }
+//定义时间间隔数组
+const timeNum = ref<number>(0)
+//定义数组一个空数组
+const listTime = ref<any>([])
+
+//再记录一个计数器
+const countTime = ref<number>(0)
+//获取当前时间
 //点击选中选项的事件
 const radioFun = () => {
+    overTimeFun()
+    countTime.value += 1
+    //获取新时间
+    let currentTime = new Date().getTime();
+    //获取时间差
+    let difference = currentTime - timeNum.value;
+    timeNum.value = currentTime;
+    listTime.value.push(difference)
+    console.log(listTime.value)
+    if (countTime.value == 5) {
+        //当计数器等于5时
+        //设置计数器为0;
+        //先判断时间差
+        //如果时间差小于5秒就弹出框,
+
+        //如果大于5秒了,就将计数器重置为0--且数组重置为空
+        if (listTime.value.length == 5) {
+            let timeTotal = 0
+            for (let i = 0; i < listTime.value.length; i++) {
+                timeTotal += listTime.value[i]
+            }
+            console.log(timeTotal)
+            if (timeTotal < 1000 * 5) {
+                //需要弹出框
+                cpdmTip.value.open({ type: 1, message: '请认真答题' })
+                countTime.value = 0;
+                listTime.value = []
+            } else {
+                //将计时器清空
+                countTime.value = 0;
+                listTime.value = []
+            }
+        }
+
+    }
+
     nextTopic()
 }
 
 
 
-
+const overTime = ref()
+//定义一个超时的方法
+const overTimeFun = () => {
+    clearTimeout(overTime.value)
+    overTime.value = setTimeout(() => {
+        //弹出框进行提示
+        cpdmTip.value.open({ type: 2, message: '离开太久了,请尽快做题!' })
+    }, 1000 * 300)
+    // 1000 * 300
+}
 //刚进入页面就将高度设置为页面需要的
-onMounted(() => {
+onMounted(async () => {
+    overTimeFun()
+    //刚到页面就创建个定时器
 
 
+    //得到进度设置
+    //看看是不是scl90 如果是的话
+    //如果flag是scal90的话----需要看看scal90是否是完成了
+    //如果完成了---判断是否还有附加题--如果有将flag设置为
+
+    //需要做的应该及就是判断scl90的量表是否是做完了
+
+    timeNum.value = new Date().getTime()
     flag.value = route.params.flag as string;
     planId.value = route.params.planId as string
     planName.value = route.params.planName as string
     flagName.value = route.params.flagName as string
-    num.value = route.params.num as string
     isComplate.value = route.params.isComplate as string
     //进到界面开始轮询
-
     // 判断是否SCL90
     if (flag.value == '20210617140713') {
+        //在这里判断scl90是否是已完成
+
+        await sclIsCom()
         //如果是的话--判断scl90的状态
         if (isComplate.value == '0') {
             getScaleFun(flag.value)
@@ -457,7 +570,7 @@ const getScaleFun = async (val: string) => {
 
 //退出页面销毁 方法
 onUnmounted(() => {
-
+    clearTimeout(overTime.value)
 })
 
 
@@ -524,11 +637,16 @@ onUnmounted(() => {
             </div>
 
         </div>
-
+        <CpdmTip ref="cpdmTip" />
     </div>
 
 
 </template>
+<style scoped>
+:deep(.dig_kg> .el-dialog__header) {
+    padding-right: 0px !important;
+}
+</style>
 <style lang="scss" scoped>
 :deep(.el-progress-bar__outer) {
     background-color: #f3f3f3;

+ 0 - 8
src/views/ScaleDetail.vue

@@ -183,14 +183,6 @@ const startText = () => {
                             <div>{{ item }}</div>
                         </div>
                     </div>
-                    <!-- <div class=" scale_button">
-                        <el-row>
-                            <el-col :span="24" class="scale_button_inner">
-
-                                <div class="scale_button_self" @click="startText">开始测试</div>
-                            </el-col>
-                        </el-row>
-                    </div> -->
                 </div>
             </div>
         </div>