测试完成

WXL (wul)

4 天以前 cf6a793701438b44dd4acf407bf55d80c73e3d71

测试完成

 src/views/outsideChainwtnew copy.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,849 @@
<template>
  <div class="questionnaire-optimized">
    <div class="content-wrapper" v-if="!accomplish">
      <div class="questionnaire-container">
        <!-- é—®å·æ ‡é¢˜åŒºåŸŸ -->
        <div class="questionnaire-header">
          <h1 class="questionnaire-title">
            {{ taskname ? taskname : "问卷" }}
          </h1>
          <div class="questionnaire-description">
            {{
              kcb
                ? kcb
                : "亲爱的患者-家属，我们是医院的医护人员，为了更好地了解您的康复情况，请您抽一点宝贵时间，完成这份随访问卷。"
            }}
          </div>
        </div>

        <el-divider class="custom-divider"></el-divider>

        <!-- é—®å·é¢˜ç›®åŒºåŸŸ -->
        <div class="questions-section">
          <div
            class="question-item"
            v-for="(item, index) in visibleQuestions"
            :key="item.id"
            :class="{
              'has-warning':
                item.prompt &&
                item.scriptResult &&
                (item.scriptType !== 2 || item.scriptResult.length > 0),
            }"
          >
            <!-- é¢˜ç›®é¢˜å¹² -->
            <div class="question-stem">
              <span class="question-number"
                >{{ getVisibleQuestionIndex(index) }}.</span
              >
              <span class="question-text">{{ item.scriptContent }}</span>
              <span class="question-type-tag">
                {{
                  item.scriptType === 1
                    ? "[单选]"
                    : item.scriptType === 2
                    ? "[多选]"
                    : "[问答]"
                }}
              </span>
            </div>

            <!-- å•é€‰é¢˜ç›® -->
            <div
              class="question-options"
              v-if="item.scriptType == 1 && !item.ishide"
            >
              <el-radio-group class="options-group" v-model="item.scriptResult">
                <el-radio
                  v-for="(
                    option, optionIndex
                  ) in item.svyTaskTemplateTargetoptions"
                  :key="optionIndex"
                  :label="option.optioncontent"
                  :class="{
                    'abnormal-option':
                      option.isabnormal &&
                      item.scriptResult == option.optioncontent,
                  }"
                  @click.native.prevent="
                    handleRadioToggle(
                      item,
                      index,
                      item.svyTaskTemplateTargetoptions,
                      option.optioncontent
                    )
                  "
                  class="option-radio"
                >
                  <span class="option-text">{{ option.optioncontent }}</span>
                </el-radio>
              </el-radio-group>
            </div>

            <!-- å¤šé€‰é¢˜ç›® -->
            <div class="question-options" v-if="item.scriptType == 2">
              <el-checkbox-group
                class="options-group"
                v-model="item.scriptResult"
              >
                <el-checkbox
                  v-for="(
                    option, optionIndex
                  ) in item.svyTaskTemplateTargetoptions"
                  :key="optionIndex"
                  :label="option.optioncontent"
                  :class="{
                    'abnormal-option': option.isabnormal,
                  }"
                  @change="$forceUpdate()"
                  class="option-checkbox"
                >
                  <span class="option-text">{{ option.optioncontent }}</span>
                </el-checkbox>
              </el-checkbox-group>
            </div>

            <!-- å¡«ç©ºé¢˜ç›® -->
            <div class="question-input" v-if="item.scriptType == 4">
              <el-input
                type="textarea"
                :rows="3"
                placeholder="请输入您的回答"
                v-model="item.scriptResult"
                clearable
                class="answer-textarea"
              ></el-input>
            </div>

            <!-- æç¤ºä¿¡æ¯ -->
            <div
              class="question-warning"
              v-show="
                item.prompt &&
                item.scriptResult &&
                (item.scriptType !== 2 || item.scriptResult.length > 0)
              "
            >
              <el-alert
                :title="item.prompt"
                type="warning"
                :closable="false"
                class="warning-alert"
              ></el-alert>
            </div>
          </div>
        </div>

        <!-- æäº¤æŒ‰é’® -->
        <div class="submit-section">
          <el-button type="primary" @click="cache(true)" class="submit-button">
            æäº¤é—®å·
          </el-button>
        </div>
      </div>
    </div>

    <!-- å®Œæˆé¡µé¢ -->
    <div class="completion-page" v-else>
      <div class="completion-content">
        <div class="completion-icon">✓</div>
        <h2 class="completion-title">感谢您的配合!</h2>
        <p class="completion-message">
          {{
            jsy
              ? jsy
              : "生活上要劳逸结合，注意休息和营养，适当锻炼，戒烟限酒，保持心情舒畅，定期复诊。那本次回访就到这里，祝您身体健康！"
          }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getExternalfollowup,
  getCachequestionnaire,
  Cachequestionnaire,
  Submitaquestionnaire,
  geturlinfo,
} from "@/api/AiCentre/index";
import JSEncrypt from "jsencrypt";
export default {
  data() {
    return {
      taskid: 355,
      patid: 265823,
      kcb: "",
      excep: 0,
      isabnormal: 0,
      taskname: "",
      questionList: [],
      jsy: null,
      dialogVisible: false,
      Endornot: true,
      accomplish: false,
      // å‰ç«¯å…¬é’¥
      publicKey:
        "MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKR0yHv0rbJWQE+Sc7/FwpW66qMd9qX2k6z+SDgkSdxWh/1GbBoAP7bDQQRF6vXmoKsD2ya42H6XRLSDXAoayuMCAwEAAQ== ",
      // åŽç«¯ç§é’¥
      privateKey:
        " MIIBUwIBADANBgkqhkiG9w0BAQEFAASCAT0wggE5AgEAAkEAtDOpbUQhcEoYy77agRhIHmAzs7H+KHJhN56gTTI9fWq23j77nI055MFV3oQQziIrNUTNaPpEQhZXBpI0+f9K9QIDAQABAkB3n0fcWfrcoMN/FU3VnrnZOEF6CzFNxkgU9P8y36QECWKZ9JhYQkNpKrMC9oXlN3VSaRigV7B+L/I/a0Rs1W+tAiEA4jx7xcXJ4y4BNwAmVHt6NNiEkzIwWnwC/0qsEu8NsOsCIQDL6MMn1D2uznC6OuOWpxDCkBh1JL1NzZTZeH2G+hj7nwIgKGAC9tjFnvWm4dn0/T7MIIJDpsFeP8fCAS2iZ/6hwuECIAS/eLvWr1EAsZNEh8QcQ8GkBU3E+ztyjAK8UX/xFt/VAiBf79/1tDErX4/DChecM8w3c3DhbBcjuE3fHZn7p6/UKg==",
      formData: {
        question1: "",
        question2: "",
        question3: "",
      },
    };
  },
  mounted() {
    // window.addEventListener("beforeunload", this.cache);
  },
  beforeDestroy() {
    // window.removeEventListener("beforeunload", this.cache);
  },
  created() {
    this.geturlinfo();
  },
  computed: {
    // è®¡ç®—属性：获取所有可见的题目
    visibleQuestions() {
      if (!Array.isArray(this.questionList)) {
        return [];
      }
      return this.questionList.filter((question) => !question.ishide);
    },
  },
  methods: {
    // è§£æžurlid
    geturlinfo() {
      // let url = window.location.href;
      let url = this.$route.query.p;
      console.log(url, "url");
      // let url = 'http://218.108.11.22:8093/sf/003';
      // let urlid = this.extractLastSegmentFromUrl(url);

      geturlinfo(url).then((res) => {
        if (res.code == 200) {
          this.getQuestionnaire(
            res.data.param1,
            res.data.param2,
            res.data.param3,
            res.data.param5
          );
        }
      });
    },
    //     extractLastSegmentFromUrl(url) {
    //     // æ‰¾åˆ°æœ€åŽä¸€ä¸ª'/'的位置
    //     const lastSlashIndex = url.lastIndexOf('/');
    //     // å¦‚果找到了'/'，截取其后的所有字符
    //     if (lastSlashIndex !== -1) {
    //         return url.substring(lastSlashIndex + 1);
    //     }
    //     // å¦‚果没有找到'/'，返回空字符串
    //     return '';
    // },

    // èŽ·å–数据
    getQuestionnaire(param1, param2, param3) {
      this.taskid = decodeURIComponent(param1);
      this.patid = decodeURIComponent(param2);
      this.taskname = decodeURIComponent(param3);
      // let taskid =
      //   "OFp7tn/B6x7IzKJetvGWHdSWBj7msRlnlj6am9dyuHTH6sEt4uBbVCUXs5kcF/e4O2W6vqHf2Bz9K3/evbYDmw==";
      // let patid =
      //   "CVk0j8O86AeCqhV5WPsBBYDg9fec0wDoDlP9imYK4wDBNIkxywZzMJEGlPagOxnq6qr2WYZo0U8MUGWRGnq8ZA==";
      // this.taskid = this.decrypt(taskid);
      // this.patid = this.decrypt(patid);
      // let taskids = this.encrypt(this.taskid);
      // let patids = this.encrypt(this.patid);
      // å…ˆå–缓存
      getCachequestionnaire({ param1: this.taskid, param2: this.patid }).then(
        (res) => {
          if (res.code == 200) {
            this.questionList = res.data.result;
            this.accomplish = res.data.submit;
            if (this.questionList[0]) {
              this.questionList.forEach((item) => {
                if (item.scriptResult && item.scriptType != 2) {
                  item.scriptResult = JSON.parse(item.scriptResult);
                } else if (item.scriptResult && item.scriptType == 2) {
                  item.scriptResult = item.scriptResult.split("&");
                }
              });
              return;
            } else {
              this.getExternalfollowup();
            }
          } else {
            this.getExternalfollowup();
          }
        }
      );
    },
    // èŽ·å–数据
    getExternalfollowup() {
      getExternalfollowup({ param1: this.taskid, param2: this.patid }).then(
        (res) => {
          if (res.code == 200) {
            this.questionList = res.data.script;
            this.jsy = res.data.jsy;
            this.kcb = res.data.kcb;
            // å¤„理题目收集结果格式
            this.questionList.forEach((item) => {
              item.nextScriptno = Number(item.nextScriptno);
              if (item.scriptType == 2) {
                item.scriptResult = [];
              }
            });
          }
        }
      );
    },
    // åŠ å¯†å‡½æ•°
    encrypt(txt) {
      const encryptor = new JSEncrypt();
      encryptor.setPublicKey(this.publicKey); // è®¾ç½®å…¬é’¥
      return encryptor.encrypt(txt); // å¯¹æ•°æ®è¿›è¡ŒåŠ å¯†
    },
    // è§£å¯†å‡½æ•°
    decrypt(txt) {
      const encryptor = new JSEncrypt();
      encryptor.setPrivateKey(this.privateKey); // è®¾ç½®ç§é’¥
      return encryptor.decrypt(txt); // å¯¹æ•°æ®è¿›è¡Œè§£å¯†
    },
    // æäº¤
    submitForm() {
      // æäº¤è¡¨å•é€»è¾‘
      let form = {
        param1: this.taskid,
        param2: this.patid,
        excep: this.excep,
        isabnormal: this.isabnormal,
        serviceSubtaskDetailList: [],
      };
      console.log(form.isabnormal, "formisabnormal");

      const arr = structuredClone(this.questionList);
      // arr.forEach((item) => {
      //   item.asrtext = JSON.stringify(item.scriptResult);
      //   if (item.scriptType == 2 && item.scriptResult[0]) {
      //     item.scriptResult = item.scriptResult.join("&");
      //   }
      // });
      form.serviceSubtaskDetailList = arr;
      Submitaquestionnaire(form).then((res) => {
        if (res.code == 200) {
          if (this.jsy) {
            this.dialogVisible = true;
          }
          this.accomplish = true;
          this.$modal.msgSuccess("提交成功");
        }
      });
    },
    // ç¼“å­˜
    cache(subm) {
      console.log("进入缓存");
      let form = {
        param1: this.taskid,
        param2: this.patid,
        svyTaskTemplateScriptVOS: [],
      };
      const arr = structuredClone(this.questionList);
      arr.forEach((item) => {
        item.ishide = item.ishide ? 1 : 0;
      });
      arr.forEach((item, index) => {
        if (item.scriptType == 1 && item.scriptResult) {
          var obj = item.svyTaskTemplateTargetoptions.find(
            (items) => items.optioncontent == item.scriptResult
          );
          console.log(item);

          console.log(obj, "obj");
          if (obj.sendTaskid) {
            item.sendTaskname = obj.sendTaskname;
            item.sendTaskid = obj.sendTaskid;
            console.log(String(obj.sendTaskid).split(","));
            item.sendTaskids = String(obj.sendTaskid).split(",");
          }
          if (obj) {
            form.excep = obj.isabnormal;
            form.isabnormal = obj.isabnormal;
            if (this.isabnormal != 1 && obj.isabnormal) {
              this.excep = obj.isabnormal;
              this.isabnormal = obj.isabnormal;
            }
            console.log(obj.isabnormal);
          }
        }
      });

      arr.forEach((item) => {
        if (item.scriptType == 2 && item.scriptResult[0]) {
          item.scriptResult = item.scriptResult.join("&");
        } else if (item.scriptType != 2 && item.scriptResult) {
          item.scriptResult = JSON.stringify(item.scriptResult);
        }
      });
      form.svyTaskTemplateScriptVOS = arr;
      form.type = 2;
      Cachequestionnaire(form).then((res) => {
        if (res.code == 200) {
          if (subm) {
            this.submitForm();
          }
        }
      });
    },
    // èŽ·å–可见题目的正确序号（解决跳题后序号不连续的问题）
    getVisibleQuestionIndex(index) {
      return index + 1;
    },
    // æ–°å¢žçš„切换选中/取消选中方法
    handleRadioToggle(questionItem, index, options, optionValue) {
      // ä¿å­˜å½“前状态以便后续比较
      const previousState = JSON.parse(JSON.stringify(this.questionList));

      // åŽŸæœ‰çš„处理逻辑
      if (questionItem.scriptResult === optionValue) {
        questionItem.scriptResult = "";
        questionItem.isabnormal = 0;
        questionItem.showAppendInput = false;
      } else {
        questionItem.scriptResult = optionValue;
        this.handleOptionChange(optionValue, index, options, questionItem);
      }

      // å¤„理完成后，确保重新计算可见题目的序号
      this.$forceUpdate();
    },

    // åœ¨methods部分，修改handleOptionChange方法:
    handleOptionChange(selectedOption, questionIndex, options, a) {
      console.log(selectedOption, questionIndex, options, a, "888");

      if (document.activeElement) {
        document.activeElement.blur();
      }

      // æ‰¾åˆ°è¢«é€‰ä¸­çš„选项对象
      const selectedOptionObj = options.find(
        (item) => item.optioncontent == selectedOption
      );
      if (selectedOptionObj) {
        this.questionList[questionIndex].nextScriptno =
          selectedOptionObj.nextQuestion;
        this.questionList[questionIndex].score = selectedOptionObj.score;
        this.questionList[questionIndex].prompt = selectedOptionObj.prompt;
      }
      // å¤„理异常状态高亮
      this.questionList[questionIndex].isabnormal =
        selectedOptionObj.isabnormal;
      // å¤„理附加输入框显示

      this.questionList[questionIndex].showAppendInput =
        selectedOptionObj.appendflag == 1;
      console.log(this.questionList);

      // if (!this.questionList[questionIndex].showAppendInput) {
      //   this.questionList[questionIndex].answerps = ""; // æ¸…除附加信息
      // }
      // ä¿å­˜å½“前题目之前已经隐藏的题目状态
      const previouslyHiddenBeforeCurrent = this.questionList
        .slice(0, questionIndex)
        .map((item, index) => (item.ishide ? index : -1))
        .filter((index) => index !== -1);

      // ä¿å­˜ä¹‹å‰å› nextQuestion=0而隐藏的题目范围
      const previouslyHiddenByEnd = this.questionList
        .map((item, index) => (item.hiddenByEnd ? index : -1))
        .filter((index) => index !== -1);

      // å¦‚æžœbranchFlag为1，处理题目跳转
      if (a.branchFlag == 1) {
        if (selectedOptionObj.nextQuestion == 0) {
          // ç»“束问答 - éšè—åŽé¢æ‰€æœ‰é¢˜ç›®å¹¶æ ‡è®°
          this.questionList = this.questionList.map((item, index) => ({
            ...item,
            ishide: index > questionIndex,
            hiddenByEnd: index > questionIndex, // æ ‡è®°è¿™äº›é¢˜ç›®æ˜¯è¢«ç»“束问答隐藏的
          }));
        } else {
          // æ­£å¸¸è·³è½¬é€»è¾‘
          const nextQuestionIndex = selectedOptionObj.nextQuestion - 1;
          console.log(nextQuestionIndex, 4);
          console.log(selectedOptionObj);

          this.questionList = this.questionList.map((item, index) => {
            // ä¿ç•™å½“前题目之前的隐藏状态
            if (index < questionIndex) {
              return {
                ...item,
                ishide: previouslyHiddenBeforeCurrent.includes(index),
                hiddenByEnd: false, // æ¸…除结束标记
              };
            }

            // å½“前题目总是可见
            if (index === questionIndex) {
              return { ...item, ishide: 0, hiddenByEnd: false };
            }

            // æ˜¾ç¤ºç›®æ ‡ä¸‹ä¸€é¢˜
            if (index === nextQuestionIndex) {
              return { ...item, ishide: 0, hiddenByEnd: false };
            }

            // å¦‚果是之前被结束问答隐藏的题目，现在应该恢复显示
            if (item.hiddenByEnd) {
              return { ...item, ishide: 0, hiddenByEnd: false };
            }

            // éšè—å½“前题和目标题之间的题目
            if (index > questionIndex && index < nextQuestionIndex) {
              return { ...item, ishide: 1, hiddenByEnd: false };
            }

            // å…¶ä»–情况保持原状
            return item;
          });
        }
      } else {
        // å¦‚果没有跳转，只需确保下一题可见
        this.questionList = this.questionList.map((item, index) => ({
          ...item,
          ishide: index === questionIndex + 1 ? 0 : item.ishide,
          hiddenByEnd: index === questionIndex + 1 ? false : item.hiddenByEnd,
        }));
      }

      // åœ¨å¤„理完题目显示/隐藏后，强制更新视图以确保序号正确
      this.$nextTick(() => {
        this.$forceUpdate();
      });
    },
    // å¤„理单选选项
    // handleOptionChange(selectedvalue, index, arr) {
    //   // æŸ¥æ‰¾é€‰ä¸­çš„选项对象
    //   const selectedOption = arr.svyTaskTemplateTargetoptions.find(
    //     (option) => option.optioncontent == selectedvalue
    //   );
    //   if (selectedOption) {
    //     this.questionList[index].nextScriptno = selectedOption.nextQuestion;
    //     this.questionList[index].score = selectedOption.score;
    //     this.questionList[index].prompt = selectedOption.prompt;
    //   }
    // },
    // å¤„理多选选项
    // updateScore(selectedvalues, index, arr) {
    //   // ï¿½ï¿½åŠ åˆ†æ•°
    //   let score = 0;
    //   selectedvalues.forEach((value) => {
    //     const selectedOption = arr.svyTaskTemplateTargetoptions.find(
    //       (option) => option.optioncontent == value
    //     );
    //     if (selectedOption) {
    //       score += Number(selectedOption.score);
    //     }
    //   });
    //   this.questionList[index].score = score;
    // },
  },
};
</script>

<style lang="scss" scoped>
.questionnaire-optimized {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
  padding: 20px 0;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

.content-wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 15px;
}

.questionnaire-container {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  padding: 30px;
  margin-bottom: 30px;
}

.questionnaire-header {
  text-align: center;
  margin-bottom: 25px;
}

.questionnaire-title {
  color: #175997;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 15px;
  line-height: 1.3;
}

.questionnaire-description {
  font-size: 18px;
  color: #5a6c84;
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto;
}

.custom-divider {
  margin: 25px 0;
  background-color: #eaeef2;
}

.questions-section {
  margin-bottom: 40px;
}

.question-item {
  margin-bottom: 35px;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #eaeef2;
  transition: all 0.3s ease;

  &:hover {
    border-color: #d1e0f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  &.has-warning {
    border-left: 4px solid #e6a23c;
  }
}

.question-stem {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  font-size: 18px;
}

.question-number {
  font-weight: 600;
  color: #175997;
  margin-right: 8px;
  min-width: 24px;
}

.question-text {
  flex: 1;
  line-height: 1.5;
  color: #2c3e50;
  font-weight: 500;
}

.question-type-tag {
  color: #3ba2f7;
  font-size: 14px;
  margin-left: 10px;
  font-weight: 500;
}

.question-options {
  margin: 15px 0;
}

.options-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.option-radio,
.option-checkbox {
  margin: 0;
  padding: 12px 15px;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  transition: all 0.2s;

  &:hover {
    border-color: #c0c4cc;
    background-color: #f8fafc;
  }
}

:deep(.option-radio .el-radio__label),
:deep(.option-checkbox .el-checkbox__label) {
  display: flex;
  align-items: center;
  font-size: 16px;
}

.option-text {
  margin-right: 5px;
}

.abnormal-indicator {
  color: #f56c6c;
  font-weight: bold;
}

.abnormal-option {
  :deep(.el-radio__inner) {
    border-color: #f56c6c;
  }

  :deep(.el-checkbox__inner) {
    border-color: #f56c6c;
  }
}

.question-input {
  margin: 15px 0;
}

.answer-textarea {
  :deep(.el-textarea__inner) {
    font-size: 16px;
    line-height: 1.5;
  }
}

.question-warning {
  margin-top: 15px;
}

.warning-alert {
  :deep(.el-alert__title) {
    font-size: 15px;
    line-height: 1.4;
  }
}

.submit-section {
  text-align: center;
  padding: 20px 0 10px;
}

.submit-button {
  width: 100%;
  max-width: 300px;
  height: 50px;
  font-size: 18px;
  font-weight: 500;
  border-radius: 8px;
  background: linear-gradient(135deg, #175997 0%, #2a77c9 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(23, 89, 151, 0.3);
  transition: all 0.3s;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(23, 89, 151, 0.4);
  }

  &:active {
    transform: translateY(0);
  }
}

.completion-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 70vh;
  padding: 20px;
}

.completion-content {
  text-align: center;
  max-width: 600px;
  padding: 40px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.completion-icon {
  font-size: 80px;
  color: #52c41a;
  margin-bottom: 20px;
}

.completion-title {
  color: #175997;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
}

.completion-message {
  font-size: 18px;
  color: #5a6c84;
  line-height: 1.6;
}

/* å“åº”式设计 */
@media (max-width: 768px) {
  .content-wrapper {
    padding: 0 10px;
  }

  .questionnaire-container {
    padding: 20px 15px;
  }

  .questionnaire-title {
    font-size: 24px;
  }

  .questionnaire-description {
    font-size: 16px;
  }

  .question-stem {
    font-size: 16px;
    flex-direction: column;
    align-items: flex-start;
  }

  .question-type-tag {
    margin-left: 0;
    margin-top: 5px;
  }

  .question-item {
    padding: 15px;
  }

  .completion-content {
    padding: 30px 20px;
  }

  .completion-title {
    font-size: 28px;
  }

  .completion-message {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .questionnaire-title {
    font-size: 22px;
  }

  .completion-title {
    font-size: 24px;
  }

  .completion-icon {
    font-size: 60px;
  }
}
</style>

 src/views/outsideChainwtnew.vue

@@ -1,146 +1,162 @@
<template>
  <div class="questionnaire">
    <div class="CONTENT" v-if="!accomplish">
      <div class="preview-left">
        <div class="toptitle">
          <div class="title">{{ taskname ? taskname : "问卷" }}</div>
          <div style="font-size: 22px; margin-bottom: 20px; line-height: 1.5">
  <div class="questionnaire-optimized">
    <div class="content-wrapper" v-if="!accomplish">
      <div class="questionnaire-container">
        <!-- é—®å·æ ‡é¢˜åŒºåŸŸ -->
        <div class="questionnaire-header">
          <h1 class="questionnaire-title">
            {{ taskname ? taskname : "问卷" }}
          </h1>
          <div class="questionnaire-description">
            {{
              kcb
                ? kcb
                : "亲爱的患者-家属，您好！我们是无锡儿童医院的医护人员，为了更好地了解您的康复情况，请您抽一点宝贵时间，完成这份随访问卷。"
                : "亲爱的患者-家属，我们是医院的医护人员，为了更好地了解您的康复情况，请您抽一点宝贵时间，完成这份随访问卷。"
            }}
            <!-- äº²çˆ±çš„患者/家属您好，为了更好的了解您出院后的康复情况，给您适当及时的健康指导，请您抽一点宝贵时间，完成这份出院随访问卷调查。 -->
          </div>
        </div>
        <el-divider></el-divider>
        <!-- å•é€‰ -->
        <div
          class="topic-dev"
          v-for="(item, index) in questionList"
          :key="item.aaa"
        >
          <div class="scriptTopic-dev" :key="index" v-if="item.scriptType == 1">
            <div class="dev-text">
              {{ index + 1 }}、<span style="line-height: 1.5"
                >{{ item.scriptContent }}
                <span style="color: #3ba2f7">[单选]</span></span

        <el-divider class="custom-divider"></el-divider>

        <!-- é—®å·é¢˜ç›®åŒºåŸŸ -->
        <div class="questions-section">
          <div
            class="question-item"
            v-for="(item, index) in visibleQuestions"
            :key="item.id"
            :class="{
              'has-warning':
                item.prompt &&
                item.scriptResult &&
                (item.scriptType !== 2 || item.scriptResult.length > 0),
            }"
          >
            <!-- é¢˜ç›®é¢˜å¹² -->
            <div class="question-stem">
              <span class="question-number"
                >{{ getVisibleQuestionIndex(index) }}.</span
              >
              <span class="question-text">{{ item.scriptContent }}</span>
              <span class="question-type-tag">
                {{
                  item.scriptType === 1
                    ? "[单选]"
                    : item.scriptType === 2
                    ? "[多选]"
                    : "[问答]"
                }}
              </span>
            </div>
            <div class="dev-xx">
              <el-radio-group
                class="custom-radio"
                v-model="item.scriptResult"
                @change="handleOptionChange($event, index, item)"
              >

            <!-- å•é€‰é¢˜ç›® -->
            <div
              class="question-options"
              v-if="item.scriptType == 1 && !item.ishide"
            >
              <el-radio-group class="options-group" v-model="item.scriptResult">
                <el-radio
                  border
                  v-for="(items, index) in item.svyLibTemplateTargetoptions"
                  :class="
                    items.isabnormal && item.scriptResult == items.optioncontent
                      ? 'red-star'
                      : ''
                  v-for="(
                    option, optionIndex
                  ) in item.svyTaskTemplateTargetoptions"
                  :key="optionIndex"
                  :label="option.optioncontent"
                  :class="{
                    'abnormal-option':
                      option.isabnormal &&
                      item.scriptResult == option.optioncontent,
                  }"
                  @click.native.prevent="
                    handleRadioToggle(
                      item,
                      index,
                      item.svyTaskTemplateTargetoptions,
                      option.optioncontent
                    )
                  "
                  :key="index"
                  :label="items.optioncontent"
                  >{{ items.optioncontent }}</el-radio
                  class="option-radio"
                >
                  <span class="option-text">{{ option.optioncontent }}</span>
                </el-radio>
              </el-radio-group>
            </div>
            <div v-show="item.prompt">
              <el-alert :title="item.prompt" type="warning"> </el-alert>
            </div>
          </div>
          <!-- å¤šé€‰ -->
          <div class="scriptTopic-dev" :key="index" v-if="item.scriptType == 2">
            <div class="dev-text">
              {{ index + 1 }}、<span style="line-height: 1.5"
                >{{ item.scriptContent }}
                <span style="color: #3ba2f7">[多选]</span></span
              >
            </div>
            <div class="dev-xx">

            <!-- å¤šé€‰é¢˜ç›® -->
            <div class="question-options" v-if="item.scriptType == 2">
              <el-checkbox-group
                class="custom-radio"
                class="options-group"
                v-model="item.scriptResult"
              >
                <el-checkbox
                  border
                  v-for="(
                    option, optionIndex
                  ) in item.svyTaskTemplateTargetoptions"
                  :key="optionIndex"
                  :label="option.optioncontent"
                  :class="{
                    'abnormal-option': option.isabnormal,
                  }"
                  @change="$forceUpdate()"
                  v-for="(items, indexs) in item.svyLibTemplateTargetoptions"
                  :key="indexs"
                  :label="items.optioncontent"
                  class="option-checkbox"
                >
                  {{ items.optioncontent }}
                  <span class="option-text">{{ option.optioncontent }}</span>
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <!-- :class="items.isabnormal ? 'red-star' : ''" -->
            <div v-show="item.prompt && item.scriptResult[0]">
              <el-alert :title="item.prompt" type="warning"> </el-alert>
            </div>
          </div>
          <!-- å¡«ç©º -->
          <div class="scriptTopic-dev" :key="index" v-if="item.scriptType == 4">
            <div class="dev-text">
              {{ index + 1 }}、<span style="line-height: 1.5"
                >{{ item.scriptContent
                }}<span style="color: #3ba2f7">[问答]</span></span
              >
            </div>
            <div class="dev-xx">

            <!-- å¡«ç©ºé¢˜ç›® -->
            <div class="question-input" v-if="item.scriptType == 4">
              <el-input
                type="textarea"
                :rows="3"
                placeholder="请输入答案"
                placeholder="请输入您的回答"
                v-model="item.scriptResult"
                clearable
              >
              </el-input>
                class="answer-textarea"
              ></el-input>
            </div>

            <!-- æç¤ºä¿¡æ¯ -->
            <div
              class="question-warning"
              v-show="
                item.prompt &&
                item.scriptResult &&
                (item.scriptType !== 2 || item.scriptResult.length > 0)
              "
            >
              <el-alert
                :title="item.prompt"
                type="warning"
                :closable="false"
                class="warning-alert"
              ></el-alert>
            </div>
          </div>
        </div>
        <div class="bottom-fixed">
          <el-button
            type="primary"
            style="width: 80%; font-size: 20px"
            @click="cache(true)"
            >提交问卷</el-button
          >

        <!-- æäº¤æŒ‰é’® -->
        <div class="submit-section">
          <el-button type="primary" @click="cache(true)" class="submit-button">
            æäº¤é—®å·
          </el-button>
        </div>
      </div>
    </div>
    <div class="CONTENT" v-else>
      <div class="preview-lefts">
        <div
          style="
            text-align: center;
            padding-top: 50px;
            font-size: 24px;
            color: #175997;
            font-weight: 600;
            margin-bottom: 10px;
          "
        >
          æ„Ÿè°¢æ‚¨çš„配合!
        </div>
        <div style="font-size: 20px">

    <!-- å®Œæˆé¡µé¢ -->
    <div class="completion-page" v-else>
      <div class="completion-content">
        <div class="completion-icon">✓</div>
        <h2 class="completion-title">感谢您的配合!</h2>
        <p class="completion-message">
          {{
            jsy
              ? jsy
              : "感谢您参与本次随访。您的反馈帮助我们更好地了解宝宝的适应情况，并为您提供更精准的护理建议与健康指导。祝您和宝宝健康快乐"
              : "生活上要劳逸结合，注意休息和营养，适当锻炼，戒烟限酒，保持心情舒畅，定期复诊。那本次回访就到这里，祝您身体健康！"
          }}
        </div>
        </p>
      </div>
    </div>
    <!-- <el-dialog
      :visible.sync="dialogVisible"
      width="50%"
    >
      <div>
        <el-alert :title="jsy" type="success"> </el-alert>
      </div>
    </el-dialog> -->
  </div>
</template>

@@ -159,94 +175,10 @@
      taskid: 355,
      patid: 265823,
      kcb: "",
      excep: "",
      questionList: [
        // {
        //   scriptType: 1,
        //   scriptContent: "您的年龄范围是？",
        //   scriptResult: null,
        //   svyLibTemplateTargetoptions: [
        //     { optioncontent: "18-25", value: "18-25", isabnormal: true },
        //     { optioncontent: "26-35", value: "26-35" },
        //     { optioncontent: "36-45", value: "36-45" },
        //     { optioncontent: "46-55", value: "46-55" },
        //     { optioncontent: "56+", value: "56+" },
        //   ],
        //   required: true,
        // },
        // {
        //   scriptType: 1,
        //   scriptContent: "您的职业是什么？",
        //   scriptResult: null,
        //   svyLibTemplateTargetoptions: [
        //     { optioncontent: "学生", value: "student" },
        //     { optioncontent: "教师", value: "teacher" },
        //     { optioncontent: "工程师", value: "engineer" },
        //     { optioncontent: "医生", value: "doctor" },
        //     { optioncontent: "其他", value: "other" },
        //   ],
        //   required: false,
        // },
        // {
        //   scriptType: 2,
        //   scriptContent: "您感兴趣的活动有哪些？",
        //   scriptResult: [],
        //   svyLibTemplateTargetoptions: [
        //     { optioncontent: "旅游", value: "travel", isabnormal: true },
        //     { optioncontent: "阅读", value: "reading", isabnormal: true },
        //     { optioncontent: "运动", value: "sports", isabnormal: true },
        //     { optioncontent: "音乐", value: "music" },
        //     { optioncontent: "电影", value: "movies" },
        //   ],
        //   required: false,
        // },
        // {
        //   scriptType: 1,
        //   scriptContent: "您的职业是什么？",
        //   scriptResult: null,
        //   svyLibTemplateTargetoptions: [
        //     { optioncontent: "学生", value: "student" },
        //     { optioncontent: "教师", value: "teacher" },
        //     { optioncontent: "工程师", value: "engineer" },
        //     { optioncontent: "医生", value: "doctor" },
        //     { optioncontent: "其他", value: "other" },
        //   ],
        //   required: false,
        // },
        // {
        //   scriptType: 1,
        //   scriptContent: "您的职业是什么？",
        //   scriptResult: null,
        //   svyLibTemplateTargetoptions: [
        //     { optioncontent: "学生", value: "student" },
        //     { optioncontent: "教师", value: "teacher" },
        //     { optioncontent: "工程师", value: "engineer", isabnormal: true },
        //     { optioncontent: "医生", value: "doctor" },
        //     { optioncontent: "其他", value: "other" },
        //   ],
        //   required: false,
        // },
        // {
        //   scriptType: 1,
        //   scriptContent: "您的职业是什么？",
        //   scriptResult: null,
        //   svyLibTemplateTargetoptions: [
        //     { optioncontent: "学生", value: "student" },
        //     { optioncontent: "教师", value: "teacher" },
        //     { optioncontent: "工程师", value: "engineer" },
        //     { optioncontent: "医生", value: "doctor" },
        //     { optioncontent: "其他", value: "other" },
        //   ],
        //   required: false,
        // },
        // {
        //   scriptType: 4,
        //   scriptContent: "您的姓名是什么？",
        //   scriptResult: "name",
        //   required: true,
        //   scriptResult: null,
        // },
      ],
      excep: 0,
      isabnormal: 0,
      taskname: "",
      questionList: [],
      jsy: null,
      dialogVisible: false,
      Endornot: true,
@@ -265,45 +197,61 @@
    };
  },
  mounted() {
    window.addEventListener("beforeunload", this.cache);
    // window.addEventListener("beforeunload", this.cache);
  },
  beforeDestroy() {
    window.removeEventListener("beforeunload", this.cache);
    // window.removeEventListener("beforeunload", this.cache);
  },
  created() {
    this.geturlinfo();
  },
  computed: {
    // è®¡ç®—属性：获取所有可见的题目
    visibleQuestions() {
      if (!Array.isArray(this.questionList)) {
        return [];
      }
      return this.questionList.filter((question) => !question.ishide);
    },
  },
  methods: {
    // è§£æžurlid
    geturlinfo() {
       // let url = window.location.href;
       let url = this.$route.query.p;
       console.log(url,"url");
      // let url = window.location.href;
      let url = this.$route.query.p;
      console.log(url, "url");
      // let url = 'http://218.108.11.22:8093/sf/003';
      // let urlid = this.extractLastSegmentFromUrl(url);

      geturlinfo( url ).then((res) => {
       if (res.code==200) {
         this.getQuestionnaire(res.data.param1,res.data.param2,res.data.param3,res.data.param5,)
       }
      geturlinfo(url).then((res) => {
        if (res.code == 200) {
          this.getQuestionnaire(
            res.data.param1,
            res.data.param2,
            res.data.param3,
            res.data.param5
          );
        }
      });
    },
//     extractLastSegmentFromUrl(url) {
//     // æ‰¾åˆ°æœ€åŽä¸€ä¸ª'/'的位置
//     const lastSlashIndex = url.lastIndexOf('/');
//     // å¦‚果找到了'/'，截取其后的所有字符
//     if (lastSlashIndex !== -1) {
//         return url.substring(lastSlashIndex + 1);
//     }
//     // å¦‚果没有找到'/'，返回空字符串
//     return '';
// },
    //     extractLastSegmentFromUrl(url) {
    //     // æ‰¾åˆ°æœ€åŽä¸€ä¸ª'/'的位置
    //     const lastSlashIndex = url.lastIndexOf('/');
    //     // å¦‚果找到了'/'，截取其后的所有字符
    //     if (lastSlashIndex !== -1) {
    //         return url.substring(lastSlashIndex + 1);
    //     }
    //     // å¦‚果没有找到'/'，返回空字符串
    //     return '';
    // },

    // èŽ·å–数据
    getQuestionnaire(param1,param2,param3) {
      this.taskid = decodeURIComponent(param1);
      this.patid = decodeURIComponent(param2);
      this.taskname = decodeURIComponent(param3);
    getQuestionnaire(param1, param2, param3) {
      console.log(param1,'param1');

      this.taskid = param1;
      this.patid = param2;
      this.taskname = param3;
      // let taskid =
      //   "OFp7tn/B6x7IzKJetvGWHdSWBj7msRlnlj6am9dyuHTH6sEt4uBbVCUXs5kcF/e4O2W6vqHf2Bz9K3/evbYDmw==";
      // let patid =
@@ -316,7 +264,7 @@
      getCachequestionnaire({ param1: this.taskid, param2: this.patid }).then(
        (res) => {
          if (res.code == 200) {
            this.questionList = res.data;
            this.questionList = res.data.result;
            this.accomplish = res.data.submit;
            if (this.questionList[0]) {
              this.questionList.forEach((item) => {
@@ -374,8 +322,11 @@
        param1: this.taskid,
        param2: this.patid,
        excep: this.excep,
        isabnormal: this.isabnormal,
        serviceSubtaskDetailList: [],
      };
      console.log(form.isabnormal, "formisabnormal");

      const arr = structuredClone(this.questionList);
      // arr.forEach((item) => {
      //   item.asrtext = JSON.stringify(item.scriptResult);
@@ -400,21 +351,34 @@
      let form = {
        param1: this.taskid,
        param2: this.patid,
        svyLibTemplateScriptVOS: [],
        svyTaskTemplateScriptVOS: [],
      };
      const arr = structuredClone(this.questionList);
      console.log(arr, "srr");
      arr.forEach((item) => {
        item.ishide = item.ishide ? 1 : 0;
      });
      arr.forEach((item, index) => {
        var obj = item.svyLibTemplateTargetoptions.find(
          (items) => items.optioncontent == item.scriptResult
        );
        console.log(obj,'obj');
        if (item.scriptType == 1 && item.scriptResult) {
          var obj = item.svyTaskTemplateTargetoptions.find(
            (items) => items.optioncontent == item.scriptResult
          );
          console.log(item);

        if (obj) {
          if (obj.isabnormal) {
          console.log(obj, "obj");
          if (obj.sendTaskid) {
            item.sendTaskname = obj.sendTaskname;
            item.sendTaskid = obj.sendTaskid;
            console.log(String(obj.sendTaskid).split(","));
            item.sendTaskids = String(obj.sendTaskid).split(",");
          }
          if (obj) {
            form.excep = obj.isabnormal;
            form.isabnormal = obj.isabnormal;
            if (this.isabnormal != 1 && obj.isabnormal) {
              this.excep = obj.isabnormal;
              this.isabnormal = obj.isabnormal;
            }
            console.log(obj.isabnormal);
            form.excep = 1;
            this.excep = 1;
          }
        }
      });
@@ -426,7 +390,7 @@
          item.scriptResult = JSON.stringify(item.scriptResult);
        }
      });
      form.svyLibTemplateScriptVOS = arr;
      form.svyTaskTemplateScriptVOS = arr;
      form.type = 2;
      Cachequestionnaire(form).then((res) => {
        if (res.code == 200) {
@@ -436,25 +400,151 @@
        }
      });
    },
    // å¤„理单选选项
    handleOptionChange(selectedvalue, index, arr) {
      // æŸ¥æ‰¾é€‰ä¸­çš„选项对象
      const selectedOption = arr.svyLibTemplateTargetoptions.find(
        (option) => option.optioncontent == selectedvalue
      );
      if (selectedOption) {
        // å°†é€‰ä¸­çš„选项对象的 id èµ‹å€¼ç»™ obj.sonId
        this.questionList[index].nextScriptno = selectedOption.nextQuestion;
        this.questionList[index].score = selectedOption.score;
        this.questionList[index].prompt = selectedOption.prompt;
      }
    // èŽ·å–可见题目的正确序号（解决跳题后序号不连续的问题）
    getVisibleQuestionIndex(index) {
      return index + 1;
    },
    // æ–°å¢žçš„切换选中/取消选中方法
    handleRadioToggle(questionItem, index, options, optionValue) {
      // ä¿å­˜å½“前状态以便后续比较
      const previousState = JSON.parse(JSON.stringify(this.questionList));

      // åŽŸæœ‰çš„处理逻辑
      if (questionItem.scriptResult === optionValue) {
        questionItem.scriptResult = "";
        questionItem.isabnormal = 0;
        questionItem.showAppendInput = false;
      } else {
        questionItem.scriptResult = optionValue;
        this.handleOptionChange(optionValue, index, options, questionItem);
      }

      // å¤„理完成后，确保重新计算可见题目的序号
      this.$forceUpdate();
    },

    // åœ¨methods部分，修改handleOptionChange方法:
    handleOptionChange(selectedOption, questionIndex, options, a) {
      console.log(selectedOption, questionIndex, options, a, "888");

      if (document.activeElement) {
        document.activeElement.blur();
      }

      // æ‰¾åˆ°è¢«é€‰ä¸­çš„选项对象
      const selectedOptionObj = options.find(
        (item) => item.optioncontent == selectedOption
      );
      if (selectedOptionObj) {
        this.questionList[questionIndex].nextScriptno =
          selectedOptionObj.nextQuestion;
        this.questionList[questionIndex].score = selectedOptionObj.score;
        this.questionList[questionIndex].prompt = selectedOptionObj.prompt;
      }
      // å¤„理异常状态高亮
      this.questionList[questionIndex].isabnormal =
        selectedOptionObj.isabnormal;
      // å¤„理附加输入框显示

      this.questionList[questionIndex].showAppendInput =
        selectedOptionObj.appendflag == 1;
      console.log(this.questionList);

      // if (!this.questionList[questionIndex].showAppendInput) {
      //   this.questionList[questionIndex].answerps = ""; // æ¸…除附加信息
      // }
      // ä¿å­˜å½“前题目之前已经隐藏的题目状态
      const previouslyHiddenBeforeCurrent = this.questionList
        .slice(0, questionIndex)
        .map((item, index) => (item.ishide ? index : -1))
        .filter((index) => index !== -1);

      // ä¿å­˜ä¹‹å‰å› nextQuestion=0而隐藏的题目范围
      const previouslyHiddenByEnd = this.questionList
        .map((item, index) => (item.hiddenByEnd ? index : -1))
        .filter((index) => index !== -1);

      // å¦‚æžœbranchFlag为1，处理题目跳转
      if (a.branchFlag == 1) {
        if (selectedOptionObj.nextQuestion == 0) {
          // ç»“束问答 - éšè—åŽé¢æ‰€æœ‰é¢˜ç›®å¹¶æ ‡è®°
          this.questionList = this.questionList.map((item, index) => ({
            ...item,
            ishide: index > questionIndex,
            hiddenByEnd: index > questionIndex, // æ ‡è®°è¿™äº›é¢˜ç›®æ˜¯è¢«ç»“束问答隐藏的
          }));
        } else {
          // æ­£å¸¸è·³è½¬é€»è¾‘
          const nextQuestionIndex = selectedOptionObj.nextQuestion - 1;
          console.log(nextQuestionIndex, 4);
          console.log(selectedOptionObj);

          this.questionList = this.questionList.map((item, index) => {
            // ä¿ç•™å½“前题目之前的隐藏状态
            if (index < questionIndex) {
              return {
                ...item,
                ishide: previouslyHiddenBeforeCurrent.includes(index),
                hiddenByEnd: false, // æ¸…除结束标记
              };
            }

            // å½“前题目总是可见
            if (index === questionIndex) {
              return { ...item, ishide: 0, hiddenByEnd: false };
            }

            // æ˜¾ç¤ºç›®æ ‡ä¸‹ä¸€é¢˜
            if (index === nextQuestionIndex) {
              return { ...item, ishide: 0, hiddenByEnd: false };
            }

            // å¦‚果是之前被结束问答隐藏的题目，现在应该恢复显示
            if (item.hiddenByEnd) {
              return { ...item, ishide: 0, hiddenByEnd: false };
            }

            // éšè—å½“前题和目标题之间的题目
            if (index > questionIndex && index < nextQuestionIndex) {
              return { ...item, ishide: 1, hiddenByEnd: false };
            }

            // å…¶ä»–情况保持原状
            return item;
          });
        }
      } else {
        // å¦‚果没有跳转，只需确保下一题可见
        this.questionList = this.questionList.map((item, index) => ({
          ...item,
          ishide: index === questionIndex + 1 ? 0 : item.ishide,
          hiddenByEnd: index === questionIndex + 1 ? false : item.hiddenByEnd,
        }));
      }

      // åœ¨å¤„理完题目显示/隐藏后，强制更新视图以确保序号正确
      this.$nextTick(() => {
        this.$forceUpdate();
      });
    },
    // å¤„理单选选项
    // handleOptionChange(selectedvalue, index, arr) {
    //   // æŸ¥æ‰¾é€‰ä¸­çš„选项对象
    //   const selectedOption = arr.svyTaskTemplateTargetoptions.find(
    //     (option) => option.optioncontent == selectedvalue
    //   );
    //   if (selectedOption) {
    //     this.questionList[index].nextScriptno = selectedOption.nextQuestion;
    //     this.questionList[index].score = selectedOption.score;
    //     this.questionList[index].prompt = selectedOption.prompt;
    //   }
    // },
    // å¤„理多选选项
    // updateScore(selectedvalues, index, arr) {
    //   // ï¿½ï¿½åŠ åˆ†æ•°
    //   let score = 0;
    //   selectedvalues.forEach((value) => {
    //     const selectedOption = arr.svyLibTemplateTargetoptions.find(
    //     const selectedOption = arr.svyTaskTemplateTargetoptions.find(
    //       (option) => option.optioncontent == value
    //     );
    //     if (selectedOption) {
@@ -468,158 +558,294 @@
</script>

<style lang="scss" scoped>
.questionnaire {
  // background-image: url("../assets/images/chainbackground.jpg");
  background-color: #f9f9fb;
  background-size: cover;
  background-attachment: fixed; /* ä¿æŒèƒŒæ™¯å›ºå®š */
  background-position: center;
  font-family: Arial, sans-serif;
.questionnaire-optimized {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  .CONTENT {
    .title {
      color: #3769f3;
      font-size: 22px;
      font-weight: bold;
      margin-bottom: 20px;
      text-align: center;
    }
  }
}
.preview-left {
  margin: 10px;
  margin-bottom: 60px;
  background-color: #fff;
  border-radius: 5px;
  //   margin: 20px;
  padding: 10px;
  height: 100%;
  // background: #ffff;
  border: 1px solid #dcdfe6;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
    0 0 6px 0 rgba(0, 0, 0, 0.04);
  .topic-dev {
    margin-bottom: 25px;
    font-size: 20px !important;
    .dev-text {
      margin-bottom: 10px;
    }
  }
}
.preview-lefts {
  margin: 10px;
  background-color: #fff;
  border-radius: 5px;
  //   margin: 20px;
  padding: 10px;
  height: 95vh; // background: #ffff;
  border: 1px solid #dcdfe6;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
    0 0 6px 0 rgba(0, 0, 0, 0.04);
  .topic-dev {
    margin-bottom: 25px;
    font-size: 20px !important;
    .dev-text {
      margin-bottom: 10px;
    }
  }
  background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
  padding: 20px 0;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

.red-star {
  ::v-deep.el-radio__label {
    position: relative;
    padding-right: 10px; /* æ ¹æ®éœ€è¦è°ƒæ•´ */
  }
  ::v-deep.el-radio__label::after {
    content: "*";
    color: red;
    position: absolute;
    right: -5px; /* æ ¹æ®éœ€è¦è°ƒæ•´ */
    top: 0;
  }
  ::v-deep.el-checkbox__label {
    position: relative;
    padding-right: 10px; /* æ ¹æ®éœ€è¦è°ƒæ•´ */
  }
  ::v-deep.el-checkbox__label::after {
    content: "*";
    color: red;
    position: absolute;
    right: -5px; /* æ ¹æ®éœ€è¦è°ƒæ•´ */
    top: 0;
  }
}
::v-deep.el-checkbox-group {
  font-size: 0;
  display: flex;
  flex-direction: column;
  margin: 5px 0;
}
::v-deep.el-checkbox.is-bordered + .el-checkbox.is-bordered {
  margin-left: 0;
.content-wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 15px;
}

::v-deep.el-radio-group {
  display: flex;
  flex-direction: column;
  margin: 5px 0;
}
::v-deep.el-radio.is-bordered + .el-radio.is-bordered {
  /* margin-left: 10px; */
  margin-left: 0;
}
::v-deep.custom-radio .el-radio {
  margin: 2px 0;
.questionnaire-container {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  padding: 30px;
  margin-bottom: 30px;
}

.radio-option {
  flex: none; /* ä¸è®©é€‰é¡¹è‡ªåŠ¨å¡«å……空间 */
  white-space: nowrap; /* é˜²æ­¢é€‰é¡¹æ–‡æœ¬æ¢è¡Œ */
  margin: 0 10px; /* è®¾ç½®é€‰é¡¹å·¦å³çš„é—´éš” */
  font-size: 20px; /* å¢žå¤§å­—体大小 */
}

.el-radio__label {
  font-size: 20px; /* å¢žå¤§æ ‡ç­¾æ–‡å­—大小 */
}
.toptitle {
}
.bottom-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
.questionnaire-header {
  text-align: center;
  padding: 10px 0; /* æ ¹æ®éœ€è¦è°ƒæ•´å†…边距 */
  background: #fff; /* æ ¹æ®éœ€è¦è°ƒæ•´èƒŒæ™¯é¢œè‰² */
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* å¯é€‰çš„阴影效果 */
  z-index: 1000; /* ç¡®ä¿æŒ‰é’®åœ¨é¡µé¢æœ€ä¸Šå±‚ */
  margin-bottom: 25px;
}
::v-deep.el-alert--warning.is-light {
  background-color: #fbf9f3;
  color: #ffba00;

.questionnaire-title {
  color: #175997;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 15px;
  line-height: 1.3;
}
::v-deep {
  .el-alert__title {
    font-size: 20px;
    line-height: 18px;

.questionnaire-description {
  font-size: 18px;
  color: #5a6c84;
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto;
}

.custom-divider {
  margin: 25px 0;
  background-color: #eaeef2;
}

.questions-section {
  margin-bottom: 40px;
}

.question-item {
  margin-bottom: 35px;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #eaeef2;
  transition: all 0.3s ease;

  &:hover {
    border-color: #d1e0f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  &.has-warning {
    border-left: 4px solid #e6a23c;
  }
}
::v-deep.el-radio--medium.is-bordered .el-radio__label {
  font-size: 20px;

.question-stem {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  font-size: 18px;
}
::v-deep.el-radio--medium.is-bordered {
  padding: 5px 20px 0px 10px;
  border-radius: 4px;
  height: 36px;

.question-number {
  font-weight: 600;
  color: #175997;
  margin-right: 8px;
  min-width: 24px;
}
::v-deep.el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__label {
  line-height: 17px;
  font-size: 20px;

.question-text {
  flex: 1;
  line-height: 1.5;
  color: #2c3e50;
  font-weight: 500;
}
::v-deep.el-checkbox {
  margin-right: 0px;

.question-type-tag {
  color: #3ba2f7;
  font-size: 14px;
  margin-left: 10px;
  font-weight: 500;
}

.question-options {
  margin: 15px 0;
}

.options-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.option-radio,
.option-checkbox {
  margin: 0;
  padding: 12px 15px;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  transition: all 0.2s;

  &:hover {
    border-color: #c0c4cc;
    background-color: #f8fafc;
  }
}

:deep(.option-radio .el-radio__label),
:deep(.option-checkbox .el-checkbox__label) {
  display: flex;
  align-items: center;
  font-size: 16px;
}

.option-text {
  margin-right: 5px;
}

.abnormal-indicator {
  color: #f56c6c;
  font-weight: bold;
}

.abnormal-option {
  :deep(.el-radio__inner) {
    border-color: #f56c6c;
  }

  :deep(.el-checkbox__inner) {
    border-color: #f56c6c;
  }
}

.question-input {
  margin: 15px 0;
}

.answer-textarea {
  :deep(.el-textarea__inner) {
    font-size: 16px;
    line-height: 1.5;
  }
}

.question-warning {
  margin-top: 15px;
}

.warning-alert {
  :deep(.el-alert__title) {
    font-size: 15px;
    line-height: 1.4;
  }
}

.submit-section {
  text-align: center;
  padding: 20px 0 10px;
}

.submit-button {
  width: 100%;
  max-width: 300px;
  height: 50px;
  font-size: 18px;
  font-weight: 500;
  border-radius: 8px;
  background: linear-gradient(135deg, #175997 0%, #2a77c9 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(23, 89, 151, 0.3);
  transition: all 0.3s;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(23, 89, 151, 0.4);
  }

  &:active {
    transform: translateY(0);
  }
}

.completion-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 70vh;
  padding: 20px;
}

.completion-content {
  text-align: center;
  max-width: 600px;
  padding: 40px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.completion-icon {
  font-size: 80px;
  color: #52c41a;
  margin-bottom: 20px;
}

.completion-title {
  color: #175997;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
}

.completion-message {
  font-size: 18px;
  color: #5a6c84;
  line-height: 1.6;
}

/* å“åº”式设计 */
@media (max-width: 768px) {
  .content-wrapper {
    padding: 0 10px;
  }

  .questionnaire-container {
    padding: 20px 15px;
  }

  .questionnaire-title {
    font-size: 24px;
  }

  .questionnaire-description {
    font-size: 16px;
  }

  .question-stem {
    font-size: 16px;
    flex-direction: column;
    align-items: flex-start;
  }

  .question-type-tag {
    margin-left: 0;
    margin-top: 5px;
  }

  .question-item {
    padding: 15px;
  }

  .completion-content {
    padding: 30px 20px;
  }

  .completion-title {
    font-size: 28px;
  }

  .completion-message {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .questionnaire-title {
    font-size: 22px;
  }

  .completion-title {
    font-size: 24px;
  }

  .completion-icon {
    font-size: 60px;
  }
}
</style>