测试完成

WXL (wul)

2 天以前 4879058b6fb8fd51ba2b4d87f241defb7c9f04fc

 src/views/satisfaction.vue

@@ -1,5 +1,44 @@
<template>
  <div class="questionnaire" :class="'survey-type-' + surveyType">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-state">
      <div class="loading-spinner">
        <i class="el-icon-loading"></i>
        <p>问卷加载中...</p>
      </div>
    </div>

    <!-- 无数据状态 -->
    <div v-else-if="isEmptyData" class="empty-state">
      <div class="empty-content">
        <i class="el-icon-document" style="font-size: 64px; color: #909399"></i>
        <h3>暂无问卷数据</h3>
        <p>当前没有可用的问卷，请联系管理员或稍后重试</p>
        <el-button
          type="primary"
          @click="loadSurveyData"
          icon="el-icon-refresh"
        >
          重新加载
        </el-button>
      </div>
    </div>

    <!-- 错误状态 -->
    <div v-else-if="hasError" class="error-state">
      <div class="error-content">
        <i class="el-icon-warning" style="font-size: 64px; color: #f56c6c"></i>
        <h3>数据加载失败</h3>
        <p>{{ errorMessage }}</p>
        <el-button
          type="primary"
          @click="loadSurveyData"
          icon="el-icon-refresh"
        >
          重新尝试
        </el-button>
      </div>
    </div>
    <div class="CONTENT" v-if="!accomplish">
      <div class="preview-left">
        <div class="toptitle">
@@ -178,7 +217,10 @@
        param5: "",
        param6: "30001002",
      },

      isEmptyData: false, // 新增：无数据状态
      hasError: false, // 新增：错误状态
      loading: false, // 新增：加载状态
      errorMessage: "", // 新增：错误信息
      // 测试数据
      testData: {
        1: {
@@ -360,6 +402,10 @@
    },
    // 加载调查数据
    loadSurveyData() {
      this.loading = true;
      this.isEmptyData = false;
      this.hasError = false;
      this.errorMessage = "";
      // 调用接口获取问卷数据
      // 根据问卷类型设置不同的参数
      let encryptedParams = {
@@ -385,6 +431,14 @@
          if (res.code === 200) {
            if (res.data.result) {
              this.accomplish = res.data.result;
              return;
            }
            if (
              !res.data.svyLibTemplateScriptVOS ||
              res.data.svyLibTemplateScriptVOS.length === 0
            ) {
              this.isEmptyData = true;
              this.$message.warning("暂无问卷数据");
              return;
            }
            // 处理接口返回的数据
@@ -423,12 +477,20 @@
            }
          } else {
            // 接口无数据或失败，使用测试数据
            this.useTestData(this.surveyType);
            // this.useTestData(this.surveyType);
          }
        })
        .catch(() => {
          console.error("数据获取失败:", error);
          this.hasError = true;
          this.errorMessage =
            error.message || "问卷数据加载失败，请检查网络连接后重试";
          this.$message.error("数据加载失败");
          // 接口调用失败，使用测试数据
          this.useTestData(this.surveyType);
          // this.useTestData(this.surveyType);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleDeptChange(value) {
@@ -840,7 +902,99 @@
    }
  }
}
.loading-state {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  padding: 40px;

  .loading-spinner {
    text-align: center;

    .el-icon-loading {
      font-size: 48px;
      color: var(--primary-color);
      margin-bottom: 16px;
      animation: rotating 2s linear infinite;
    }

    p {
      color: #666;
      font-size: 16px;
    }
  }
}

.empty-state,
.error-state {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  padding: 40px;

  .empty-content,
  .error-content {
    text-align: center;
    max-width: 400px;

    h3 {
      color: #666;
      font-size: 20px;
      margin: 16px 0 12px;
      font-weight: 500;
    }

    p {
      color: #999;
      font-size: 14px;
      margin-bottom: 24px;
      line-height: 1.6;
    }
  }
}

.error-state {
  .error-content {
    h3 {
      color: #f56c6c;
    }
  }
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .loading-state,
  .empty-state,
  .error-state {
    padding: 20px;
    min-height: 50vh;

    .el-icon-loading,
    .el-icon-document,
    .el-icon-warning {
      font-size: 40px !important;
    }

    h3 {
      font-size: 18px !important;
    }

    p {
      font-size: 13px !important;
    }
  }
}
::v-deep {
  .el-checkbox-group {
    display: flex;