问卷表单

src/sass/AppAskForm/Statistical.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="statistical">
+  <div class="statistical" v-if="pageShow">
     <div class="statistical-tab">
       <span :class="[currIndex === 0 ? 'active' : '']" @click="currIndex = 0">问卷统计</span>
       <span :class="[currIndex === 1 ? 'active' : '']" @click="currIndex = 1">人员统计</span>
@@ -8,25 +8,24 @@
       <div class="list-wrapper" v-show="currIndex === 0">
         <div class="top">
           <span>共</span>
-          <i>9</i>
+          <i>{{ subjectList.length }}</i>
-          <span>题，其中多选</span>
+          <span>题，其中</span>
-          <i>9</i>
+          <span v-for="(item, index) in fieldTypeCount" :key="index">
-          <span>题，其中多选</span>
+            {{ mapType(item.field_type) }}<i>{{ item.c }}</i>道{{ fieldTypeCount.length - 1 === index ? '' : '，' }}
-          <i>9</i>
+          </span>
-          <span>道</span>
         </div>
         <div class="topic-list">
-          <div class="topic-item" v-for="(item, i) in 10" :key="i">
+          <div class="topic-item" v-for="(item, index) in subjectList" :key="index">
-            <h2>一、您是否了解社会治理？(单选）</h2>
+            <h2>{{ item.fieldName }}（{{ item.fixedLabel }}）</h2>
             <div class="topic-item__wrapper">
-              <div class="option-item" v-for="(item, index) in 4" :key="index">
+              <div class="option-item" v-for="(filed, i) in item.options" :key="i" v-show="['radio', 'checkbox', 'select'].indexOf(item.fieldType) > -1">
                 <div class="option-item__left">
-                  <h2>A：</h2>
+                  <h2>{{ filed.label }}：</h2>
-                  <span>每周监测</span>
+                  <!-- <span>每周监测</span> -->
                 </div>
                 <div class="option-item__right">
-                  <span>10票</span>
+                  <span>{{ filed.c }}票</span>
-                  <span>40%</span>
+                  <span>{{ (((filed.c || 0) / fieldDataCount[`field_${index}`]) * 100).toFixed(2) }}%</span>
                 </div>
               </div>
             </div>
@@ -63,12 +62,95 @@
 
     data () {
       return {
-        currIndex: 0
+        id: '',
+        currIndex: 0,
+        targetList: [],
+        info: {},
+        subjectList: [],
+        tableData: [],
+        total: 0,
+        pageShow: false,
+        form: {},
+        fieldTypeCount: [],
+        fieldValueDistribution: [],
+        fieldDataCount: {},
+        isShowForm: false,
+        targetList: [],
+        formInfo: {}
       }
     },
 
-    onLoad () {
+    onLoad (query) {
+      this.$loading()
+      this.id = query.id
 
+      this.$nextTick(() => {
+        this.getInfo()
+        this.getFormInfo()
+      })
+    },
+
+    methods: {
+      getInfo () {
+        this.$http.post(`/app/appquestionnairetemplate/queryDetailById?id=${this.id}`).then(res => {
+          if (res.code == 0) {
+            this.info = res.data
+            this.targetList = res.data.fields.map(item => {
+              return JSON.parse(item.fieldInfo)
+            })
+          }
+        })
+      },
+
+      mapType(type) {
+        return {
+          upload: '上传图片',
+          input: '单行填空',
+          textarea: '多行填空',
+          radio: '单选',
+          checkbox: '多选',
+          select: '单下拉框'
+        }[type]
+      },
+
+      getFormInfo() {
+        this.$http.post(`/app/appquestionnairetemplate/statisticsTable?id=${this.id}`, null, {
+          params: {
+            ...this.search
+          }
+        }).then(res => {
+          this.$hideLoading()
+          if (res.code == 0) {
+            this.fieldDataCount = res.data.fieldDataCount
+            this.fieldTypeCount = res.data.fieldTypeCount
+            this.fieldValueDistribution = res.data.fieldValueDistribution
+            this.subjectList = res.data.appQuestionnaireTemplate.fields.map((item, index) => {
+              const fieldInfo = JSON.parse(item.fieldInfo)
+              let options = fieldInfo.options
+              if (['radio', 'checkbox', 'select'].indexOf(item.fieldType) > -1) {
+                options = fieldInfo.options.map(v => {
+                  res.data.fieldValueDistribution[`field_${index}`].forEach(info => {
+                    if (info.fieldValue === v.label) {
+                      v.c = info.c
+                    }
+                  })
+
+                  return v
+                })
+
+              }
+
+              return {
+                ...item,
+                ...fieldInfo,
+                options
+              }
+            })
+
+            this.pageShow = true
+          }
+        })
+      }
     }
   }
 </script>
@@ -78,6 +160,76 @@
     padding-top: 112px;
     padding-bottom: 60px;
 
+    .user-list {
+      padding: 0 32px;
+      background: #f5f5f5;
+
+      .user-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        height: 160px;
+        margin-top: 24px;
+        padding: 32px;
+        background: #FFFFFF;
+        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.02);
+        border-radius: 16px;
+
+        .user-item__right {
+          font-size: 30px;
+          text-align: center;
+
+          p {
+            line-height: 40px;
+            margin-bottom: 16px;
+            color: #333333;
+          }
+
+          div {
+            color: #1365DD;
+          }
+        }
+
+        .user-item__left {
+          display: flex;
+          align-items: center;
+
+          .right {
+            p {
+              color: #999999;
+              font-size: 30px;
+            }
+          }
+
+          .right-top {
+            display: flex;
+            align-items: center;
+            margin-bottom: 16px;
+            line-height: 40px;
+
+            h2 {
+              margin-right: 20px;
+              font-size: 30px;
+              color: #333;
+            }
+
+            span {
+              color: #999999;
+              font-size: 28px;
+            }
+          }
+
+          image {
+            width: 96px;
+            height: 96px;
+            margin-right: 16px;
+            border-radius: 50%;
+          }
+        }
+      }
+    }
+
     * {
       box-sizing: border-box;
     }
@@ -90,10 +242,8 @@
       padding-bottom: 40px;
 
       .top {
-        display: flex;
+        padding: 36px 32px 32px;
-        align-items: center;
+        text-align: justify;
-        height: 116px;
-        padding: 0 32px;
         font-size: 34px;
         color: #333;
         border-bottom: 4px solid #f3f6f9;
@@ -173,6 +323,7 @@
       width: 100%;
       height: 96px;
       padding: 0 32px;
+      border-bottom: 1px solid #D4D4D4;
       background: #fff;
 
       span {