dali-ms/src/pages/questionnaire/questionnaireResult.vue

<template>
  <div>
    <main-top :crumb="crumbData" :questionBack="true">
      <div slot="con"></div>
    </main-top>
    <div class="table-interface">
      <div class="top-body">
        <div class="desc">
          <div class="desc-title">
            <div class="txt">问卷名称:&nbsp;&nbsp;{{ detail.name }}</div>
            <div class="time">发布时间:&nbsp;&nbsp;{{ detail.createTime }}</div>
          </div>
          <div class="desc-data">
            显示数据:&nbsp;&nbsp;
            <el-radio v-model="showDataType" label="0">百分比</el-radio>
            <el-radio v-model="showDataType" label="1">计数</el-radio>
          </div>
        </div>
        <el-table
          :data="tableData"
          height="61vh"
          class="collection-con"
          :tree-props="{ children: 'children' }"
          row-key="id"
          style="width: 100%"
        >
          <el-table-column prop="num" label="题号"></el-table-column>
          <el-table-column
            :prop="key"
            :label="key"
            v-for="(value, key) in maxObject"
            :key="key"
          >
            <template slot-scope="scope">
              {{ handleData(scope.row[key])}}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import MainTop from "@/components/main-top";
const crumbData = [
  {
    name: "问卷调查结果",
    id: 5 - 2,
  },
];

export default {
  components: {
    MainTop,
  },
  data() {
    return {
      crumbData,
      detail: {},
      tableData: [],
      showDataType: "0",
      questionGroupId: "",
      maxObject: [],
    };
  },
  computed: {},
  watch: {
    showDataType: {
      handler() {
        this.getInformation();
      },
    },
  },
  created() {
    this.questionGroupId =
      (this.$route.params && this.$route.params.questionGroupId) || "";
    this.getInformation();
  },
  mounted() {},

  methods: {
    handleData(data) {
      return (data !== 0 && (!data || data === 'null' )) ? '-': this.showDataType==='0'? String(data*100).slice(0,4)+'%' :data
    },
    async getInformation() {
      let result = await this.$http({
        method: "get",
        url: `/manage/countAnswer/detail/${this.questionGroupId}/${this.showDataType}`,
      });
      if (result.code !== 0) {
        return;
      }
      this.detail = result.data;
      this.tableData = this.detail.answer;
      let maxLen = 0;
      let maxNum = 0;
      let maxArr = [];
      this.tableData.map((item) => {
        if (Object.entries(item).length > maxLen) {
          maxLen = Object.entries(item).length;
          maxNum = item.num;
        }
      });
      maxArr = this.tableData.filter((item) => item.num === maxNum);
      this.maxObject = { ...maxArr[0] };
      delete this.maxObject.num;
    },
  },
};
</script>

<style lang="less" scoped>
.top-body {
  border-top: 0.0625rem solid #e6e6e6;
  line-height: 1.5;
  padding: 0 1.25rem 1.25rem;
  align-items: center;
  box-sizing: border-box;
  background: #fff;
  margin: 1rem 0;
}

.table-interface {
  height: calc(100% - 3rem);
  overflow: auto;
}

.info-top {
  padding: 1.25rem 0;
  display: flex;
  justify-content: space-between;
  border-bottom: 0.0625rem #a5a5a5 solid;
}
.desc {
  padding: 20px;
  .desc-title {
    margin-bottom: 20px;
    display: flex;
    .txt {
      margin-right: 50px;
    }
    .time {
    }
  }
}
</style>