交叉分析导出

src/components/HistogramHorizontal.vue

@@ -24,7 +24,6 @@ export default {
   },
   methods: {
     drawChart: function() {
-      console.log("XXXXSSSS", this.chartId);
       // Step 1: 创建 Chart 对象
       this.chart = new Chart({
         container: this.chartId, // 指定图表容器 ID

src/components/HistogramHorizontals.vue

@@ -24,7 +24,6 @@ export default {
   },
   methods: {
     drawChart: function() {
-      console.log("XXXXSSSS", this.chartId);
       // Step 1: 创建 Chart 对象
       this.chart = new Chart({
         container: this.chartId,
@@ -57,6 +56,21 @@ export default {
             name: type,
             value: value + " (" + total + "%)"
           };
+        })
+        .label("value", val => {
+          if (val < 10) {
+            return null;
+          }
+          return {
+            position: "middle",
+            offset: 0,
+            content: originData => {
+              return originData.total + "%";
+            },
+            style: {
+              stroke: "#fff"
+            }
+          };
         });
       this.chart.render();
     }

src/views/previewPage/previewPage.html

@@ -8,55 +8,81 @@
       </div>
     </div>
     <div class="filterResult" v-if="filterStr">已为您筛选出【{{filterStr}}】共{{answerData.answerAll}}人，此条件下的用户题目答题情况如下：</div>
-    <!-- 答题统计->表格 -->
-    <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="item.answerTotal==0?0:((optionItem.answerCount/item.answerTotal)*100).toFixed(0)"
-                  color="#4E5DFF" :stroke-width="8">
-                </el-progress>
+    <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="tableRow">
-            <div class="option">总计</div>
-            <div class="numbers">{{item.answerTotal}}</div>
-            <div class="percent">_ _</div>
+          <div class="chartData">
+            <HistogramHorizontal :id="'c1'" :chartId="'c'+item.questionId" :chart-data="item.data">
+            </HistogramHorizontal>
           </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 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="chartData">
-          <HistogramHorizontal :id="'c1'" :chartId="'c'+item.questionId" :chart-data="item.data">
-          </HistogramHorizontal>
+        <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>

src/views/previewPage/previewPage.js

@@ -1,8 +1,9 @@
 import timeFormat from '../../util/time'
 import HistogramHorizontal from "../../components/HistogramHorizontal";
+import HistogramHorizontals from "../../components/HistogramHorizontals";
 export default {
   components: {
-    HistogramHorizontal
+    HistogramHorizontal, HistogramHorizontals
   },
 
   data() {
@@ -12,7 +13,9 @@ export default {
       chartData: null,
       options: null,
       filterStr: null,
-      isShowTable: null
+      isShowTable: null,
+      isCrossAnalyse: null,
+      crossAnalyse: null,
     }
   },
   created() {
@@ -22,7 +25,12 @@ export default {
     this.options = this.$route.params.options
     this.filterStr = this.$route.params.filterStr
     this.isShowTable = this.$route.params.isShowTable
+    this.isCrossAnalyse = this.$route.params.isCrossAnalyse
+    this.crossAnalyse = this.$route.params.crossAnalyse
     console.log("xXXXX", this.$route.params);
+
+    const routerParams = this.$route.query.filterStr;
+    console.log("接受的pdf的值：", routerParams);
   },
   methods: {
     xxxxx() {

src/views/previewPage/previewPage.scss

@@ -215,4 +215,147 @@
       }
     }
   }
+  .crossAnalyse {
+    width: 100%;
+    background: white;
+    border-radius:6px;
+    padding: 24px 120px;
+    box-sizing: border-box;
+    .crossFilter{
+      background:rgba(250,250,250,1);
+      border-radius:6px;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      flex-wrap:wrap;
+      .xyFilter {
+        width: 360px;
+        .el-cascader {
+          width: 320px;
+          background:rgba(241,241,241,1);
+          line-height: 30px;
+          font-size:14px;
+          color:rgba(51,51,51,1);
+          .el-input__inner {
+            height: 30px;
+            line-height: 30px;
+            background:rgba(241,241,241,1);
+          }
+          .el-input__icon {
+            line-height: 30px;
+          }
+        }
+        .addfilter{
+          width:320px;
+          height:30px;
+          border:1px dashed rgba(202,204,210,1);
+          margin-top: 8px;
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          align-items: center;
+          cursor: pointer;
+          .addfilterIcon {
+            width: 74px;
+            height: 18px;
+          }
+        }
+      }
+      .crossFilterTitle {
+        font-size:14px;
+        font-family:PingFangSC-Medium,PingFang SC;
+        font-weight:500;
+        color:rgba(51,51,51,1);
+        line-height:20px;
+      }
+      .crossFilterSubTitle {
+        font-size:12px;
+        font-family:PingFangSC-Regular,PingFang SC;
+        font-weight:400;
+        color:rgba(51,51,51,1);
+        line-height:20px;
+      }
+      .analyse {
+        width: 100%;
+        margin: 16px 0px;
+        display: flex;
+        flex-direction: row;
+        .startAnalyse {
+          margin-left: 90px;
+          width:80px;
+          height:28px;
+          background:rgba(78,93,255,1);
+          border-radius:14px;
+          font-size:14px;
+          font-family:PingFangSC-Medium,PingFang SC;
+          font-weight:500;
+          color:rgba(255,255,255,1);
+          line-height:28px;
+          text-align: center;
+          cursor: pointer;
+        }
+        .analyseTip {
+          font-size:12px;
+          font-family:PingFangSC-Regular,PingFang SC;
+          font-weight:400;
+          color:rgba(255,0,0,1);
+          line-height:28px;
+          margin-left: 8px;
+        }
+      }
+    }
+    .crossAnalyseTable {
+      .crossAnalyseTitle {
+        font-size:18px;
+        font-family:PingFangSC-Medium,PingFang SC;
+        font-weight:500;
+        color:rgba(51,51,51,1);
+        line-height:25px;
+        margin-top: 32px;
+      }
+      .crossAnalyseChart {
+        width: 100%;
+        margin: 8px 0px;
+      }
+      .table{
+        border-radius:4px;
+        border-top:1px solid rgba(232,232,232,1); 
+        border-left:1px solid rgba(232,232,232,1); 
+      }
+      .caTable {
+        display: flex;
+        flex-direction: row;
+        .headerRow {
+          background:rgba(250,250,250,1);
+          border-radius:4px 0px 0px 0px;
+          font-size:14px;
+          font-family:PingFangSC-Medium,PingFang SC;
+          font-weight:500;
+          color:rgba(0,0,0,0.85);
+          line-height:21px;
+          align-items:flex-end;
+          padding-top: 8px;
+          padding-bottom: 12px;
+          box-sizing: border-box;
+          border-bottom: 1px solid #E8E8E8;
+          border-right: 1px solid #E8E8E8;
+        }
+        .tabkeRow {
+          font-size:14px;
+          font-family:PingFangSC-Regular,PingFang SC;
+          font-weight:400;
+          color:rgba(0,0,0,0.65);
+          line-height:21px;
+          align-items:flex-end;
+          padding-top: 8px;
+          padding-bottom: 1px;
+          padding-left: 5px;
+          box-sizing: border-box;
+          border-bottom: 1px solid #E8E8E8;
+          border-right: 1px solid #E8E8E8;
+        }
+        
+      }
+    }
+  }
 }

src/views/testData/testData.html

@@ -138,7 +138,7 @@
               <div class="percent">
                 <div style="width: 100%;">
                   <el-progress
-                    :percentage="item.answerTotal==0?0:((optionItem.answerCount/item.answerTotal)*100).toFixed(0)"
+                    :percentage="parseInt(item.answerTotal==0?0:((optionItem.answerCount/item.answerTotal)*100).toFixed(0))"
                     color="#4E5DFF" :stroke-width="8">
                   </el-progress>
                 </div>

src/views/testData/testData.js

@@ -570,7 +570,6 @@ export default {
         for (var j = 0; j < question.length; j++) {
           var option = question[j];
           var questionObj = this.questionListSel[i];
-          console.log("SSSSSS", option, questionObj);
           checkList.push({ subOptionContent: option.content, subOptionId: option.optionId, subQuestionContent: questionObj.content, subQuestionId: questionObj.questionId })
         }
       }
@@ -673,7 +672,7 @@ export default {
             result.push(arrs);
           }
 
-          console.log("AAAAAA", result);
+          // console.log("AAAAAA", result);
 
           for (var x = 0; x < result.length; x++) {
             var qqq = result[x];
@@ -683,14 +682,14 @@ export default {
             }
             this.crossAnalyse.push({ table: sss, data: [], question: null, name: null });
           }
-          console.log("SSSSS", this.crossAnalyse);
+          // console.log("SSSSS", this.crossAnalyse);
 
           for (var x = 0; x < this.crossAnalyse.length; x++) {
             var data = [];
             var top = this.crossAnalyse[x].table;
             for (var y = 0; y < top.length; y++) {
               var one = top[y].value;
-              console.log("one", top[y].name)
+              // console.log("one", top[y].name)
               var total = 0;
               for (var z = 0; z < one.length; z++) {
                 var two = one[z];
@@ -707,10 +706,10 @@ export default {
             this.crossAnalyse[x].question = data;
 
             const found = this.optionsY.find(element => element.id == this.optionsYValue[x][0]);
-            console.log("XXXXXXXXXfound", found);
+            // console.log("XXXXXXXXXfound", found);
             if (found) {
               const children = found.children.find(element => element.value == this.optionsYValue[x][1]);
-              console.log("XXXXXXXXXchildren", children);
+              // console.log("XXXXXXXXXchildren", children);
               if (children) {
                 this.crossAnalyse[x].name = children.label
               }
@@ -725,11 +724,7 @@ export default {
       });
     },
     goToPreviewPage() {
-      // let routeUrl = this.$router.resolve({
-      //   name: "previewPage",
-      //   params: { id: 0 }
-      // });
-      // window.open(routeUrl.href, "_blank");
+
       this.$router.push({
         name: 'previewPage',
         params: {
@@ -738,7 +733,9 @@ export default {
           currentDate: this.currentDate,
           options: this.options,
           filterStr: this.filterStr,
-          isShowTable: this.isShowTable
+          isShowTable: this.isShowTable,
+          isCrossAnalyse: this.isCrossAnalyse,
+          crossAnalyse: this.crossAnalyse
         }
       })
     }