修改用户端UI修改

src/components/CpdmMessage.vue

@@ -0,0 +1,148 @@
+<script lang="ts" setup>
+import { ref, defineExpose } from 'vue'
+import { useRouter } from 'vue-router'
+import { userInfoStore } from '@/stores'
+import { ElMessage } from 'element-plus';
+import { pubMsgApi } from '@/api/plan';
+const router = useRouter()
+
+//获取缓存用户信息
+const userInfo = userInfoStore();
+//留言显示的标志
+const pub_visible = ref<boolean>(false)
+//留言的内容
+const des_input = ref<string>('')
+//用户的姓名
+const userName = ref<string>('')
+//用户的编号
+const userNo = ref<string>('');
+//用户的性别
+const userSex = ref<string>('')
+//防止重复点
+const isLock = ref<boolean>(false)
+
+const open = () => {
+    userName.value = userInfo.userInfo.userName;
+    userNo.value = userInfo.userInfo.userNo;
+    userSex.value = userInfo.userInfo.gender;
+    pub_visible.value = true
+}
+
+
+//点击进行发布信息
+const pubMsg = async () => {
+    //判断用户是否登陆了
+    if (!userInfo.token) {
+        ElMessage({
+            message: '尚未登录',
+            type: 'warning'
+        })
+        return
+    }
+    if (des_input.value == '') {
+        ElMessage({
+            message: '留言不能为空',
+            type: 'warning'
+        })
+        return
+    }
+    if (isLock.value) {
+        return
+    }
+    isLock.value = true
+    let params = {
+        userNo: userNo.value,
+        userName: userName.value,
+        commentContent: des_input.value
+    }
+    let res: any = await pubMsgApi(params)
+    if (res.code == 200) {
+        ElMessage({
+            message: '留言成功',
+            type: 'success'
+        })
+        des_input.value = ''
+        isLock.value = false
+        pub_visible.value = false
+        //开始跳转到页面测试记录页面
+        router.push({ name: 'testRecord' })
+    } else {
+        ElMessage({
+            message: res.msg,
+            type: 'error'
+        })
+    }
+    //调用新增留言的方法
+}
+//点击关闭弹出框
+const colseMessage = () => {
+    router.push({ name: 'testRecord' })
+}
+defineExpose({ open })
+</script>
+<template>
+
+
+    <el-dialog v-model="pub_visible" :show-close="true" @closed="colseMessage" width="60%"
+        style="border-radius: 40px;  ">
+        <template #header="{ close, titleId, titleClass }">
+            <div class="my-header">
+                <div class="msg_dig">
+                    <img width="40px" v-show="userSex == '1'" src="../assets/kepu/man.png" />
+                    <img width="40px" v-show="userSex == '0'" src="../assets/kepu/woman.png" />
+                    <div style="margin-left:20px">{{ userName }}</div>
+                </div>
+
+                <!-- <textarea ref="des_input" rows="5" cols="43" placeholder="写下你珍贵的留言" /> -->
+                <el-input type="textarea" style="margin-top: 20px;" :autosize="{ minRows: 6 }" placeholder="写下你珍贵的留言"
+                    v-model="des_input">
+                </el-input>
+
+                <div class="home_mid_plan_button">
+
+                    <div class="pub_button" @click="pubMsg"> 发布留言
+                    </div>
+                </div>
+
+            </div>
+        </template>
+    </el-dialog>
+</template>
+<style lang="scss" scoped>
+:deep(.el-textarea__inner) {
+    background-color: #F7F7F7 !important;
+    border: none !important;
+    border-radius: 20px;
+    border: none !important;
+    box-shadow: none !important;
+}
+
+.msg_dig {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.home_mid_plan_button {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: end;
+    margin-top: 40px;
+
+    // text-align: right;
+    .pub_button {
+        cursor: pointer;
+        // width: 100px;
+        border-radius: 12px;
+        border: 3px solid #48D68E;
+        color: #ffffff;
+        background-color: #000000;
+
+        padding: 8px 30px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+    }
+}
+</style>

src/components/CpmdQuestionnaire.vue

@@ -5,7 +5,7 @@ import Plan from '@/views/Plan.vue';
 import { Model } from 'echarts';
 import { ElMessage } from 'element-plus';
 import { format } from 'date-fns/format';
-import { ref, defineExpose, reactive } from 'vue'
+import { ref, defineExpose, reactive, defineEmits } from 'vue'
 import { useRouter } from 'vue-router'
 const router = useRouter()
 const userInfo = userInfoStore()
@@ -40,6 +40,10 @@ const ruleForm = reactive<any>({
     confused: false
 
 })
+//子组件调用父组件的方法
+const emit = defineEmits(['continueFun'])
+
+const visible = ref<boolean>(false)
 const questionList = ref<any>()
 //调用接口  查询问卷调查项的接口
 const queryQuestion = async (planId: string) => {
@@ -89,21 +93,59 @@ const submitQuestion = () => {
     saveQuesQuestion()
 
 
+}
+const comT = () => {
+    if (transmitType.value == '0') {
+        //跳转到测试计划页面
+        router.push({ name: 'plan' })
+    } else if (transmitType.value == '1') {
+        //调用父组件接口
+        emit('continueFun')
+    } else {
+        //跳转到测试计划页面
+        router.push({ name: 'plan' })
+    }
+
 }
 //保存问卷接口
 const saveQuesQuestion = async () => {
     let res: any = await sqveQuesQuestionApi(questionList.value)
     if (res.code == 200) {
         //跳转到测试计划
+        ElMessage({
+            type: 'success',
+            message: '提交完成'
+        })
         dialogVisible.value = false
-        router.push({ name: 'plan' })
+        visible.value = true
     }
-}
 
-const open = (planId: string) => {
+    //当前的标志是---为0时   需要
+    // if (transmitType.value == '0') {
+    //     //都需要弹出--弹出框
+
+    // }
+
+
+
+    //提交完成后、弹出框提示是进入测试计划页面----还是直接开始测试页面
+
+
+    //弹出框进行提示
+    //是否跳转到测试计划页面
+
+    //是否弹出测试计划页面
+
+    //是否弹出开始测试弹出框
 
+}
+
+const transmitType = ref('')
+const open = (planId: string, type: string) => {
     dialogVisible.value = true
 
+    transmitType.value = type
+
     //拿到登录用户的信息
 
     queryQuestion(planId)
@@ -112,11 +154,15 @@ const open = (planId: string) => {
 defineExpose({ open })
 </script>
 <template>
-    <el-dialog v-model="dialogVisible" title="问卷填写" width="600px" top="15vh">
-        <span style="height: 60vh;display: flex;overflow-y: auto;">
+    <el-dialog v-model="dialogVisible" title="" width="600px" top="15vh">
+        <template #header>
+            <p style="text-align: center;font-weight: 700;">问卷填写</p>
+        </template>
+
+        <span style="height: 60vh;display: flex;overflow-y: auto;padding:0px 20px">
             <div v-if="questionList.length > 0">
                 <div v-for="item, index in questionList" :key="item.id" class="question_out">
-                    <div class="title_out">
+                    <div class="title_out">{{ index + 1 }}:
                         <span class="xing">{{ item.idMandatory == '1' ? '*' : '' }}</span><span>{{
                             item.quesName }}</span>
                     </div>
@@ -125,22 +171,140 @@ defineExpose({ open })
                         <el-radio :label="ch" v-for="ch in item.mulValue" :key="ch"></el-radio>
                         <!-- <el-radio label="线下场地免费"></el-radio> -->
                     </el-radio-group>
-                    <el-date-picker v-model="item.optionValue" type="date" placeholder="选择日期" class="question_radio"
+                    <el-date-picker v-model="item.optionValue" type="date" placeholder="选择出生年月" class="question_radio"
                         v-if="item.topicType == '3'" />
                 </div>
             </div>
         </span>
         <template #footer>
-            <div class="dialog-footer">
-                <el-button @click="dialogVisible = false">关闭</el-button>
-                <el-button type="primary" @click="submitQuestion">
+            <div class="footer_cus">
+                <div class="start_button_out_close">
+                    <div class="start_button_self_close" @click="dialogVisible = false">
+                        <span>关闭</span>
+                    </div>
+                </div>
+                <!-- <el-button type="primary" @click="submitQuestion">
                     提交
-                </el-button>
+                </el-button> -->
+                <div class="start_button_out">
+                    <div class="start_button_self" @click="submitQuestion">
+                        <span>提交</span>
+                    </div>
+                </div>
+                <!-- <div>
+                    提交
+                </div> -->
+            </div>
+        </template>
+    </el-dialog>
+    <!-- //另一个框 弹出确认是否跳转 -->
+    <el-dialog v-model="visible" :show-close="true" width="500" style="border-radius: 20px;">
+        <template #header>
+            <div class="my-header" style="text-align: center;">
+                <div class="exit_login_title">提示</div>
+                <div class="exit_login_info" v-if="transmitType == '0'">是否跳转到测试计划页面?</div>
+                <div class="exit_login_info" v-if="transmitType == '1'">是否直接开始测试计划?</div>
+                <div class="start_button_out" style="margin-top:20px;display: flex;justify-content: space-around;">
+                    <div class="start_button_self_close" @click="visible = false">
+                        取消
+                    </div>
+                    <div class="start_button_self" @click="comT">
+                        确定
+                    </div>
+                </div>
+
             </div>
         </template>
+
     </el-dialog>
+
+
 </template>
 <style lang="scss">
+.el-dialog {
+    border-radius: 20px;
+}
+
+.footer_cus {
+    display: flex;
+    justify-content: space-around;
+}
+
+.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: end;
+
+    .start_button_self_close {
+        cursor: pointer;
+        // width: 100px;
+        border-radius: 12px;
+        border: 1px solid #dddddd;
+        color: #000000;
+        background-color: #ffffff;
+        margin-right: 20px;
+        padding: 8px 20px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+    }
+
+    .start_button_self {
+        cursor: pointer;
+        // width: 100px;
+        border-radius: 12px;
+        border: 3px solid #48D68E;
+        color: #ffffff;
+        background-color: #000000;
+        margin-right: 20px;
+        padding: 8px 20px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+    }
+}
+
+.start_button_out_close {
+    // margin-top: 40px;
+    // margin-bottom: 40px;
+    display: flex;
+    flex-direction: row;
+    justify-content: end;
+
+    .start_button_self_close {
+        cursor: pointer;
+        // width: 100px;
+        border-radius: 12px;
+        border: 1px solid #dddddd;
+        color: #000000;
+        background-color: #ffffff;
+        margin-right: 20px;
+        padding: 8px 20px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+    }
+}
+
+
 .question_out {
     display: flex;
     flex-direction: column;
@@ -149,16 +313,16 @@ defineExpose({ open })
         display: flex;
 
         .xing {
-            width: 30px;
+            width: 10px;
             text-align: right;
             color: red;
         }
     }
 
     .question_radio {
-        margin-top: 10px;
+        margin-top: 5px;
         margin-bottom: 10px;
-        margin-left: 30px;
+        margin-left: 10px;
     }
 }
 </style>

src/views/HomeView.vue

@@ -42,7 +42,7 @@ const taskCircleFlag = ref<boolean>(true)
 const openSquare = () => {
   // taskSequareFlag.value = true
   // goView()
-  question.value.open(planId.value)
+  question.value.open(planId.value, '0')
 }
 //点击关闭按钮触发
 const closeSquare = () => {
@@ -170,6 +170,7 @@ const planNumGet = async () => {
   <!-- <div class="home_header_out" ref="homeHeaderOut" :style="{ height: height + 'px' }"> -->
   <div class="home_header_out" ref="homeHeaderOut">
     <div class="home_header_inner">
+
       <CpmdHeader />
       <!-- <div :style="{ height: xlts + 'px' }"> -->
       <!-- <div :style="{ height: xlts + 'px' }"> -->

src/views/Plan.vue

@@ -23,6 +23,9 @@ const isFinshed = ref<boolean>(false)
 const planList = ref<any>([
 
 ])
+
+//临时存储数组的
+const tempPlanList = ref<any>({})
 //时间格式化 1000  60  60
 // const formatterTi = (val: number) => {
 //     let mill = Math.floor(val / 1000)
@@ -32,8 +35,16 @@ const planList = ref<any>([
 //     let hour = Math.floor(val / 1000 / 60 / 60)
 //     return hour + ':时'
 // }
+//调用--接口
+//紧接着开始
+const continueFun = () => {
+    startPlan(tempPlanList.value);
+}
+
+
 //点击了开始测试--跳转到测试页面
 const startPlan = async (val: any) => {
+    tempPlanList.value = val
     //先判断
     //是否做了问卷
     //如果未做问卷需要弹出问卷的弹出框
@@ -42,7 +53,7 @@ const startPlan = async (val: any) => {
     if (res.data != null) {
         //此时是问卷未做
         //调用问卷组件打开
-        question.value.open(res.data)
+        question.value.open(res.data, '1')
         return
     }
     let nextFlag = '';
@@ -134,7 +145,6 @@ const planNumGet = async () => {
 
         //调用根据用户查询计划的API
         let res: any = await userPlanApi(userNo)
-
         userInfo.savePlanCurrentNum(res.data.length)
         planList.value = res.data
 
@@ -164,7 +174,6 @@ const planNumGet = async () => {
                         && planList.value[i].list[j].isCompleted == '0') {
                         flag = true
                     }
-
                     //判断是否是SCL90的flag
                     //如果是SCL的Flag则判断其完成状态
                     //如果完成状态是0则正常开始
@@ -327,115 +336,10 @@ onUnmounted(() => {
                         </div>
                     </div>
                     <!-- 测试记录列表 -->
-                    <!-- <div class="test_record_out" v-for="item in planList">
-                        <div class="record_tip">
-                            <span class="record_tip_out"><span class="record_tip_inner">创建时间：</span>{{ item.createTime
-                                }}</span>
-                            <span><span class="record_tip_inner">结束时间：</span>{{ item.planEndTime }}</span>
-                        </div>
-                        <div class="test_record">
-                            <img src="../assets/kepu/task_1.png" />
-                            <span>{{ item.planName }}</span>
-                        </div>
-                        <div class="test_time">
-                            <span>请根据您最近一个月的实际情况，选择最符合自己的选项。所有陈述都无正确和错误之分。所以请您不要再三思考，要根据第一反应诚实作答。</span>
-
-                        </div>
-                        <div class="record_out" v-if="item.list">
-                            <div class="record_img_out">
-                                <img class="record_img" v-show="item.list[0].isCompleted != 0"
-                                    src="../assets/kepu/xlwht_active.png">
-                                <img class="record_img" v-show="item.list[0].isCompleted == 0"
-                                    src="../assets/kepu/xlwht_default.png">
-                                <div class="record_img_inner_name">
-                                    <span class="test_des_name"
-                                        :style="{ color: item.list[0].isCompleted != 0 ? '#ffffff' : '#000000' }">情绪晴雨表</span>
-                                </div>
-                                <div v-show="item.list[0].isCompleted != 0" class="record_img_inner">
-                                    <span class="test_des">测试时间：</span>
-                                    <span class="test_time1">{{ item.list[0].createTime }}</span>
-                                    <span style="display: flex;align-items: center;"><span
-                                            class="test_des">测试用时:</span><span class="test_time1">{{
-                                                item.list[0].useTime
-                                            }}
-                                        </span></span>
-
-                                </div>
-                            </div>
-                            <img class="record_diceng" v-show="item.list[0].isCompleted != 0"
-                                src="../assets/kepu/diceng_active.png">
-                            <img class="record_diceng" v-show="item.list[0].isCompleted == 0"
-                                src="../assets/kepu/diceng_default.png">
-                            <div class="record_img_out">
-                                <img class="record_img" v-show="item.list[1].isCompleted != 0"
-                                    src="../assets/kepu/czscz_active.png">
-                                <img class="record_img" v-show="item.list[1].isCompleted == 0"
-                                    src="../assets/kepu/czscz_default.png">
-                                <div class="record_img_inner_name">
-                                    <span class="test_des_name"
-                                        :style="{ color: item.list[1].isCompleted != 0 ? '#ffffff' : '#000000' }">成长三重奏</span>
-                                </div>
-                                <div v-show="item.list[1].isCompleted != 0" class="record_img_inner">
-                                    <span class="test_des">测试时间：</span>
-                                    <span class="test_time1">{{ item.list[1].createTime }}</span>
-                                    <span style="display: flex;align-items: center;"><span
-                                            class="test_des">测试用时:</span><span class="test_time1">{{
-                                                item.list[1].useTime }}</span></span>
-
-                                </div>
-                            </div>
-                            <img class="record_diceng" v-show="item.list[1].isCompleted != 0"
-                                src="../assets/kepu/diceng_active.png">
-                            <img class="record_diceng" v-show="item.list[1].isCompleted == 0"
-                                src="../assets/kepu/diceng_default.png">
-                            <div class="record_img_out">
-                                <img class="record_img" v-show="item.list[2].isCompleted != 0"
-                                    src="../assets/kepu/cdzkds_active.png">
-                                <img class="record_img" v-show="item.list[2].isCompleted == 0"
-                                    src="../assets/kepu/cdzkds_default.png">
-                                <div class="record_img_inner_name">
-                                    <span class="test_des_name"
-                                        :style="{ color: item.list[2].isCompleted != 0 ? '#ffffff' : '#000000' }">冲动掌控大师</span>
-                                </div>
-                                <div v-show="item.list[2].isCompleted != 0" class="record_img_inner">
-                                    <span class="test_des">测试时间：</span>
-                                    <span class="test_time1">{{ item.list[2].createTime }}</span>
-                                    <span style="display: flex;align-items: center;"><span
-                                            class="test_des">测试用时:</span><span class="test_time1">{{
-                                                item.list[2].useTime }}</span></span>
-                                </div>
-                            </div>
-
-                            <img class="record_diceng" v-show="item.list[2].isCompleted != 0"
-                                src="../assets/kepu/diceng_active.png">
-                            <img class="record_diceng" v-show="item.list[2].isCompleted == 0"
-                                src="../assets/kepu/diceng_default.png">
-                            <div class="record_img_out">
-                                <img class="record_img" v-show="item.list[3].isCompleted != 0"
-                                    src="../assets/kepu/qxbd_active.png">
-                                <img class="record_img" v-show="item.list[3].isCompleted == 0"
-                                    src="../assets/kepu/qxbd_default.png">
-                                <div class="record_img_inner_name">
-                                    <span class="test_des_name"
-                                        :style="{ color: item.list[3].isCompleted != 0 ? '#ffffff' : '#000000' }">情绪波动探测器</span>
-                                </div>
-                                <div v-show="item.list[3].isCompleted != 0" class="record_img_inner">
-                                    <span class="test_des">测试时间：</span>
-                                    <span class="test_time1">{{ item.list[3].createTime }}</span>
-                                    <span style="display: flex;align-items: center;"><span
-                                            class="test_des">测试用时:</span><span class="test_time1">{{
-                                                item.list[3].useTime }}</span></span>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="start_button_out">
-                            <div class="start_button_self" @click="startPlan(item)">开始测试</div>
-                        </div>
-                    </div> -->
                 </div>
             </div>
         </div>
-        <CpmdQuestionnaire ref="question" />
+        <CpmdQuestionnaire ref="question" @continueFun="continueFun" />
     </div>
 </template>
 <style lang="scss" scoped>
@@ -529,7 +433,7 @@ onUnmounted(() => {
                 align-items: center;
 
                 img {
-                    width: 70px;
+                    width: 50px;
                 }
 
                 span {

src/views/TestRecord.vue

@@ -369,12 +369,12 @@ onUnmounted(() => {
                     align-items: center;
 
                     img {
-                        width: 70px;
+                        width: 50px;
                     }
 
                     span {
                         margin-left: 20px;
-                        font-size: 28px;
+                        font-size: 22px;
                         font-weight: 700;
                         letter-spacing: 3px;
                     }
@@ -390,7 +390,7 @@ onUnmounted(() => {
                     span {
                         color: #000000;
                         opacity: 0.4;
-                        font-size: 20px;
+                        font-size: 18px;
                     }
 
                     div {

src/views/shapeIntuition_random.vue

@@ -11,6 +11,7 @@
         <!-- <div class="scale" @click.stop="screen">
           <img src="../../assets/small-big.png" alt="" />
         </div> -->
+        <!-- <el-button @click="messageFun">弹出留言框</el-button> -->
         <el-progress class="main_progress" color="linear-gradient(to right, #ffd650, #ff8431)" :stroke-width="48"
           :text-inside="true" :format="format" :percentage="(imgIndex * 100) / 120" v-if="testTypeCode == 1"
           style="width:50%;margin-top:10px"></el-progress>
@@ -29,6 +30,7 @@
         </div> -->
     </div>
   </div>
+  <CpdmMessage ref="cpdmMe" />
 </template>
 <script>
 // import cognitiveAbilityTaskList from "@/assets/data/cognitiveAbilityData.js";
@@ -40,9 +42,11 @@ import { userInfoStore } from '@/stores';
 import { saveEggRecordApi } from '@/api/record'
 import { format as myFormat } from 'date-fns';
 import { userPlanDetailApi } from '@/api/home';
+import CpdmMessage from '@/components/CpdmMessage.vue';
 const userInfo = userInfoStore()
 
 export default {
+  components: { CpdmMessage },
   data() {
     return {
       userId: "",
@@ -115,6 +119,9 @@ export default {
     clearTimeout(this.timeTwo);
   },
   methods: {
+    // messageFun() {
+    //   this.$refs.cpdmMe.open()
+    // },
     requireImg(name) {
       return new URL(`../assets/cognize/shapeIntuition/${name}.jpg`, import.meta.url).href
     },
@@ -292,15 +299,13 @@ export default {
           if (listP.length > 0) {
             this.$router.push({ name: 'plan' })
           } else {
-            this.$router.push({ name: 'testRecord' })
+            //当测试完了以后--需要弹出确认的弹出框
+            //把弹出框的内容   及用户信息 进行处理 进行发布
+            this.$refs.cpdmMe.open()
+            // this.$router.push({ name: 'testRecord' })
           }
-
-
-
-
           //如果后边没有--则测试跳转到报告页
           //需要跳转到
-
         }
       }
     },