dd

src/components/form/ProvinceCity/index.vue

@@ -16,6 +16,7 @@ export default {
     name: 'ProvinceCity',
     data() {
         return {
+          value: '',
             options: city,
             props: {
                 label: 'n',

src/views/form/statistics/analysis.vue

@@ -4,7 +4,9 @@
       <div v-for="(item, index) in list" :key="index">
         <div class="content">
           <div class="title">
-                        <span style="font-size: 16px; font-weight: bold;">Q{{ index + 1 }} ：{{ item.label }}（{{ item.type }}）</span>
+            <span style="font-size: 16px; font-weight: bold"
+              >Q{{ index + 1 }} ：{{ item.label }}（{{ item.type }}）</span
+            >
 
             <!-- <div>
                             <span>图表类型：</span>
@@ -23,23 +25,29 @@
                         :chart-option="getCharData(item)"
                         :width="'90vw'"
                     /> -->
-                    <div v-if="computedCount(item.type)" class="cell-type">
+          <div v-if="computedCount(item.type)" class="cell-type" @click="handleOpen(item)">
             <span>共收集 {{ item.detail.collectionTotal }} 条，</span>
             <span>有效 {{ item.detail.validTotal }} 条</span>
-                        <span v-if="item.type === 'NUMBER_INPUT'">，总计 {{ item.detail.sumTotal }} </span>
+            <span v-if="item.type === 'NUMBER_INPUT'"
-                        <span v-if="item.type === 'SWITCH'">，开 {{ item.detail.openTotal }} 条，关 {{ item.detail.closedTotal }} 条</span>
+              >，总计 {{ item.detail.sumTotal }}
+            </span>
+            <span v-if="item.type === 'SWITCH'"
+              >，开 {{ item.detail.openTotal }} 条，关
+              {{ item.detail.closedTotal }} 条</span
+            >
           </div>
           <div v-else-if="item.type === 'RATE'" class="cell-rate">
-                      <div v-for="(n, i) in item.detail.maxStarNum" :key="i" class="rate-item">
+            <div
-                        <div class="rate-item-icon">
+              v-for="(n, i) in item.detail.maxStarNum"
-                          <el-rate
+              :key="i"
-                            :value="n"
+              class="rate-item"
-                            disabled
-                            text-color="#ff9900"
             >
-                          </el-rate>
+              <div class="rate-item-icon">
+                <el-rate :value="n" disabled text-color="#ff9900"> </el-rate>
+              </div>
+              <div class="rate-item-num">
+                {{ item.detail.starProfile[n] || 0 }} 次
               </div>
-                        <div class="rate-item-num">{{ item.detail.starProfile[n] || 0 }} 次</div>
             </div>
             <div class="rate-item">
               <div class="rate-item-avg">平均星数</div>
@@ -51,15 +59,25 @@
                 >
                 </el-rate>
               </div>
-                        
             </div>
           </div>
-                    <div v-else-if="item.type === 'RADIO' || item.type === 'CHECKBOX' || item.type === 'SELECT'" class="cell-wrapper">
+          <div
+            v-else-if="
+              item.type === 'RADIO' ||
+              item.type === 'CHECKBOX' ||
+              item.type === 'SELECT'
+            "
+            class="cell-wrapper"
+          >
             <div v-for="(n, i) in item.detail.options" :key="i" class="cell">
               <div class="cell-label">{{ n.label }}</div>
               <div class="cell-value">
                 <div class="cell-progress">
-                                    <el-progress :stroke-width="20" :show-text="false" :percentage="computedPercent(n.currentCount, item.detail.totalCount)" />
+                  <el-progress
+                    :stroke-width="20"
+                    :show-text="false"
+                    :percentage="computedPercent(n.currentCount, item.detail.totalCount)"
+                  />
                 </div>
                 <div class="cell-percent">
                   {{ computedPercent(n.currentCount, item.detail.totalCount).toFixed(2) }}%
@@ -73,6 +91,19 @@
       </div>
     </div>
     <data-empty v-else style="padding: 20px" desc="暂无数据分析" />
+
+    <el-dialog :title="dialogTitle" :visible.sync="dialogTableVisible" :close-on-click-modal="false" @close="handleClose">
+      <el-table :data="dialogData" max-height="400" border>
+        <el-table-column
+          type="index"
+          width="50">
+        </el-table-column>
+        <el-table-column v-for="item in dialogHeader" :key="item.formItemId" :prop="item.formItemId" :label="item.label" />
+        <!-- <el-table-column property="name" label="姓名" width="200"></el-table-column>
+        <el-table-column property="address" label="地址"></el-table-column> -->
+      </el-table>
+    </el-dialog>
+
   </div>
 </template>
 
@@ -84,6 +115,10 @@ export default {
   },
   data() {
     return {
+      dialogTableVisible: false,
+      dialogTitle: '',
+      dialogData: [],
+      dialogHeader: [],
       barChartOptionData: {
         tooltip: {
           trigger: 'axis',
@@ -159,7 +194,7 @@ export default {
         .post('/data/aggregator/questionnaire/analysisreport', {
           projectKey: this.$route.query.key
         })
-                .then(res => {
+        .then((res) => {
           this.list = res.data
         })
     },
@@ -226,19 +261,59 @@ export default {
           delete config.series[0].label
         } */
         config.series[0].data = []
-                Object.keys(data.map).forEach(key => {
+        Object.keys(data.map).forEach((key) => {
           config.series[0].data.push({ name: key, value: data.map[key] })
         })
         // config.series[0].data = data.map
       }
       return config
     },
+    getDetail(id, type) {
+      
+      this.$api
+        .post('/data/aggregator/questionnaire/itemresdetail-list', {
+          projectKey: this.$route.query.key,
+          formItemId: id,
+          type
+        })
+        .then((res) => {
+          this.dialogData = res.data.map(item => {
+            return {
+              [id]: item
+            }
+          })
+        })
+    },
+    async handleOpen(item) {
+      if (item.type === 'SWITCH' || item.type === 'NUMBER_INPUT') return false
+      this.dialogTitle = item.label
+      this.dialogHeader.push(item)
+      await this.getDetail(item.formItemId, item.type)
+      this.dialogTableVisible = true
+    },
+    handleClose() {
+      this.dialogHeader = []
+      this.dialogTitle = ''
+      this.dialogData = []
+      this.dialogTableVisible = false
+    },
     computedCount(type) {
-            const arr = ['PROVINCE_CITY', 'NUMBER_INPUT', 'SWITCH', 'INPUT', 'TEXTAREA', 'INPUT_MAP', 'TIME', 'DATE_RANGE', 'DATE', 'TIME_RANGE']
+      const arr = [
+        'PROVINCE_CITY',
+        'NUMBER_INPUT',
+        'SWITCH',
+        'INPUT',
+        'TEXTAREA',
+        'INPUT_MAP',
+        'TIME',
+        'DATE_RANGE',
+        'DATE',
+        'TIME_RANGE'
+      ]
       return arr.includes(type)
     },
     computedPercent(num, count) {
-            return ((num * 100) / count)
+      return (num * 100) / count
     }
   }
 }
@@ -275,7 +350,8 @@ export default {
 .cell-wrapper {
   width: 100%;
   border: 1px solid #eee;
-  .cell, .cell-value {
+  .cell,
+  .cell-value {
     widows: 100%;
     display: flex;
     align-items: center;
@@ -289,7 +365,6 @@ export default {
       width: 60%;
       box-sizing: border-box;
       padding-left: 10px;
-
     }
     .cell-value {
       width: 40%;
@@ -325,6 +400,5 @@ export default {
     font-size: 14rpx;
   }
 }
-
 </style>