surveyMaker/src/views/previewPage/previewPage.html

<div class="content">
  <div @click="xxxxx" class="dowload"> 下载到本地 </div>
  <div id="pdfDom" class="pdfContent">
    <div class="pHeader">
      <div class="projectTitle">项目答题数据</div>
      <div class="testList"> <span v-for="(item, index) in options" :key="index">【{{item.label}}】</span></div>
      <div class="tip">截止到{{currentDate}}，问卷共{{answerData.answerJoin || 0}}人参与，完成全部题目的有{{answerData.answerAll || 0}}人。
      </div>
    </div>
    <div class="filterResult" v-if="filterStr">已为您筛选出【{{filterStr}}】共{{answerData.answerCondition}}人，此条件下的用户题目答题情况如下：
    </div>
    <div v-if="!isCrossAnalyse">
      <!-- 答题统计->表格 -->
      <div class="result" v-if="isShowTable">
        <div class="resultItem" v-for="(item, index) in answerData.questionList" :key="index">
          <div class="testLable"
            v-if="index == 0 || answerData.questionList[index-1].belongTestOrder != answerData.questionList[index].belongTestOrder">
            测试{{item.belongTestOrder}}:{{item.lable}}</div>
          <div class="resultTitle"><img v-if="item.isFilter" style="width: 32px;height: 17px;margin-right: 5px;"
              src="https://dm.static.elab-plus.com/diaoyanbao/%E6%9D%A1%E4%BB%B6%E6%A0%87%E8%AE%B0@2x.png" alt="">
            题目{{index+1}}:{{item.content}}[{{item.chooseType == '1'? '单选':'多选'}}]<span
              v-if="item.testOrderList.length">（包含测试<span v-for="(testOrder,textIndex) in item.testOrderList"
                :key="index">{{testOrder}}<span
                  v-if="textIndex!=(item.testOrderList.length-1)">、</span></span>中的数据）</span></div>
          <div class="resultTable">
            <div class="tableHeader">
              <div class="option">选项</div>
              <div class="numbers">答题人数</div>
              <div class="percent">占该题总答题人数百分比</div>
            </div>
            <div class="tableRow" v-for="(optionItem, optionIndex) in item.optionList" :key="optionIndex">
              <div class="option">{{optionItem.content}}</div>
              <div class="numbers">{{optionItem.answerCount}}</div>
              <div class="percent">
                <div style="width: 100%;">
                  <el-progress
                    :percentage="parseInt(item.answerTotal==0?0:((optionItem.answerCount/item.answerTotal)*100).toFixed(0))"
                    color="#4E5DFF" :stroke-width="8">
                  </el-progress>
                </div>
              </div>
            </div>
            <div class="tableRow">
              <div class="option">总计</div>
              <div class="numbers">{{item.answerTotal}}</div>
              <div class="percent">_ _</div>
            </div>
          </div>
        </div>
      </div>
      <div class="chart" v-if="!isShowTable">
        <div class="chartItem" v-for="(item, index) in chartData" :key="index">
          <div class="chartTitle"><span v-if="item.isFilter"
              class="filterTag">条件</span>题目{{index+1}}:{{item.content}}[{{item.chooseType == '1'? '单选':'多选'}}]<span
              v-if="item.testOrderList.length">（包含测试<span v-for="(testOrder,textIndex) in item.testOrderList"
                :key="index">{{testOrder}}<span
                  v-if="textIndex!=(item.testOrderList.length-1)">、</span></span>中的数据）</span>
          </div>
          <div class="chartData">
            <HistogramHorizontal :id="'c1'" :chartId="'c'+item.questionId" :chart-data="item.data">
            </HistogramHorizontal>
          </div>
        </div>
      </div>
    </div>
    <div v-if="isCrossAnalyse" class="crossAnalyse">
      <div class="crossAnalyseTable" v-for="(item, index) in crossAnalyse" :key="index">
        <div class="crossAnalyseTitle">题目{{index+1}}:{{item.name}}</div>
        <div class="crossAnalyseChart">
          <HistogramHorizontals :id="'c2'" :chartId="'caaaaa'+index" :chart-data="item.data">
          </HistogramHorizontals>
        </div>
        <div class="table">
          <div class="caTable">
            <div class="headerRow" style="width: 100px;">X\Y</div>
            <div class="headerRow" v-for="(item1,index1) in item.table[0].title" :key="index1" v-if="index1"
              :style="`width:${740/(item.table[0].title.length-1 || 1)}px`">{{item1}}</div>
            <div class="headerRow" style="width: 100px;">总计（人次）</div>
          </div>
          <div class="caTable" v-for="(items,indexs) in item.table" :key="indexs">
            <div class="tabkeRow" style="width: 100px;">{{items.name}}</div>
            <div class="tabkeRow" v-for="(item0,index0) in items.value" :key="index0" v-if="index0"
              :style="`width:${740/(items.value.length-1 || 1)}px`">
              {{item0}} ({{items.value[0]==0?0:((item0 / items.value[0]) * 100).toFixed(0)}}%)</div>
            <div class="tabkeRow" style="width: 100px;">{{items.value[0]}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>