webapp / GreenwayWeb

<template>
  <div style="margin-bottom:20px;border: 1px solid #dddfe5;padding:20px;">
    <div style="font-size:16px;margin-bottom:20px;">({{tixingtype}}){{ title }}</div>
    <div style="display: flex;">
      <div style="width: 45%;display: flex;justify-content: space-evenly;">
        <div ref="chart" style="width:500px; height: 300px;"></div>
      </div>
      <div style="width: 55%;">
        <el-table :data="tiList"
          :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
          <el-table-column label="选项" min-width="50%" prop="title">
            <template slot-scope="scope">
              {{scope.row.title}}
            </template>
          </el-table-column>
          <el-table-column label="选择次数" min-width="20%">
            <template slot-scope="scope">
              <span v-if="scope.row.numci!=0"> {{scope.row.numci.countAnswer }}</span>
              <span v-else>0</span>
            </template>
          </el-table-column>
          <el-table-column prop="percentage" label="百分比" min-width="20%">
            <template slot-scope="scope">
              <span v-if="scope.row.numci !=0"> {{scope.row.numci.percentage}}%</span>
              <span v-else> 0%</span>
              <!-- {{scope.row.numci.percentage==''?0:scope.row.numci.percentage}}% -->
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import {
    Table,
    TableColumn
  } from 'element-ui';

  export default {
    name: 'DynamicChartTable',
    components: {
      'el-table': Table,
      'el-table-column': TableColumn
    },
    props: {
      title: {
        type: String,
        required: true
      },
      tixingtype:{
        type: String,
        required: true
      },
      tableData: {
        type: Object,
        required: true
      },
      index: {
        type: String,
        required: true
      },
    },
    data() {
      return {
        dataList: [],
        tiList: [],
        selectedQuestion: []
      }
    },
    watch: {
      // 监听 tableData 的变化
      tableData: {
        handler(newVal, oldVal) {
          let obj = {
            timu: '',

          }


          // this.initChart();
        },
        deep: true // 开启深度监听，以便监听对象内部属性的变化
      }
    },
    mounted() {



      this.loadQuestionByIndex(this.index)
      this.tubiao()
      // this.processData()
    },
    onload() {

    },
    methods: {
      init(data){
        this.tableData = data;
        console.log('initdata',data);
        this.loadQuestionByIndex(this.index)
        this.tubiao()
      },
      loadQuestionByIndex(index) {

        var tiIndex = Number(index);
        const {
          groupKeys,
          cereQuestionnaireTable
        } = this.tableData;

        var list = []; // 用于存储结果

        var table = JSON.parse(cereQuestionnaireTable.question); // 解析问卷中的问题数据

        console.log(JSON.parse(cereQuestionnaireTable.question)); // 打印问题的原始数据
        // 遍历 groupKeys 中的每个条目
        // for (let i = 0; i < groupKeys.length; i++) {
        //     for (var key in table) {
        //         if (groupKeys[i].questionNumber == key) {  // 匹配 questionNumber
        //             console.log(table[key]);  // 打印当前匹配的问题

        //             // 确保该问题有选项，并且 options 数组不为空
        //             if (table[key].options && table[key].options.length != 0) {
        //                 // 遍历每个选项
        //                 for (let j = 0; j < table[key].options.length; j++) {
        //                     // 如果当前选项索引和 groupKeys[i].answer 匹配
        //                     if (j + 1 == groupKeys[i].answer) {
        //                         var info1 = {};  // 创建一个新的 info1 对象，避免引用问题
        //                         info1.title = table[key].options[j].answer;  // 选项的答案
        //                         info1.numci = groupKeys[i].countAnswer;  // 统计该选项的回答次数
        //                         info1.baifenbi = groupKeys[i].percentage;  // 该选项的百分比
        //                         list.push(info1);  // 将 info1 添加到 list 数组
        //                     }
        //                 }
        //             }
        //         }
        //     }
        // }

        var list = [{}];
            for (let key in table) {

              var itemdata = {};
              var timu =  table[parseInt(key)];
               var option = {};
               // if(timu.type =='文本') continue;
               for (let o in timu.options)
               {
                 option[parseInt( o )+ 1] = timu.options[o].answer;
               }
               // option.push({
               //   index: parseInt( o )+ 1,
               //   answer: timu.options[o].answer
               // });
               // itemdata[key] = {tikuTitle:timu.title,optionSettings: JSON.stringify(option)};
               list.push({tikuTitle:timu.title,optionSettings: JSON.stringify(option)})
               // list.push(itemdata)


            }
            console.log('list',list)

        // var querytabel = Object.keys(table).map((key, index) => {
        //     const item = table[key];

        //     const optionSettings = item.options.map((acc, index) => {
        //       index = acc.answer;
        //       return acc;
        //     }, {});
        //     const score = item.options.reduce((acc, option) => {
        //       acc[option.score] = option.score;
        //       return acc;
        //     }, {});




        //   return {
        //     id: (index + 1).toString(),
        //     questionType: item.type,
        //     questionBank: index === 0 ? "用户端题库" : "公共端题库",
        //     isRequired: item.required,
        //     questionDescription: "",
        //     optionSettings: JSON.stringify(optionSettings),
        //     tikuTitle: item.title,
        //     createDate: new Date().toISOString().slice(0, 19).replace("T", " "),
        //     createUser: "",
        //     questionCode: "",
        //     score: JSON.stringify(score),
        //     pageSize: 0,
        //     pageNumber: 0
        //   };
        // });

      // const filteredQueryTable = Object.values(querytabel);
      // 假设 this.index 是从1开始的序号
      const arrayIndex = Number(this.index); // 将序号转换为数组索引

      const question = list[arrayIndex]; // 索引是从1开始的

      const optionStats = this.initOptionStats(question.optionSettings);

      // 统计选项选择次数
      groupKeys.forEach((group) => {

        if (group.questionNumber == tiIndex) {
          const optionId = group.answer;
          const countAnswer = group.countAnswer;

          // 如果选项存在，将选择次数累加，并计算百分比
          if (optionStats[optionId]) {
            optionStats[optionId].countAnswer += countAnswer;
          } else {
            optionStats[optionId] = {
              countAnswer,
              percentage: group.percentage
            };
          }
        }

      });

      // 设置为当前选择的问题
      this.selectedQuestion = {
        ...question,
        optionStats
      }

      const optionlist = []
      // this.selectedQuestion.optionStats
      for (var key in this.selectedQuestion.optionStats) {

        const info2 = {
          tihao: 0,
          title: '',
          numci: 0,
          baifenbi: 0
        }
        const optionSettings = {
          ...JSON.parse(this.selectedQuestion.optionSettings)
        }
        info2.tihao = key
        info2.title = optionSettings[key]
        info2.numci = this.selectedQuestion.optionStats[key]
        console.log(this.selectedQuestion.optionStats[key], info2)
        optionlist.push(info2);

      }

      this.tiList = [];
      this.tiList = optionlist

    },
    // 初始化选项统计，确保每个选项都有统计数据
    initOptionStats(optionSettings) {
      console.log('1111111111111111111', optionSettings)
      const options = JSON.parse(optionSettings); // 解析 JSON 字符串

      const optionStats = {};
      for (const key in options) {
        optionStats[key] = 0; // 初始值为0
      }

      return optionStats;

    },

    // 根据选项ID获取选项描述
    getOptionDescription(optionId) {
      const optionSettings = JSON.parse(this.selectedQuestion.optionSettings);
      return optionSettings[optionId] || "无描述"; // 如果没有描述，返回"无描述"
    },

    tubiao() {
      const res = this.tiList.map(function(item) {
        return {
          name: item.title,
          value: item.numci.countAnswer || 0 /////
        }
      })
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          //  bottom: '30',
          // left: 'center',
          x: 'right', // 可设定图例在左、右、居中
          y: 'bottom', // 可设定图例在上、下、居中
          left: 'center'
        },
        series: [{
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center',

          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          color: ['#3f9b6a', 'rgb(61,182,211)', 'rgb(126, 211, 146)', 'rgb(200, 40, 211)', 'rgb(171, 184, 211)',
            'rgb(211, 169, 150)', 'rgb(185, 211, 16)'
          ],
          data: res,
        }]
      }
      const chartDom = this.$refs.chart;
      const myChart = echarts.init(chartDom);
      option && myChart.setOption(option);
    }
  },
  beforeDestroy() {
    if (this.$refs.chart) {
      const myChart = echarts.getInstanceByDom(this.$refs.chart);
      if (myChart) {
        window.removeEventListener('resize', myChart.resize);
        myChart.dispose();
      }
    }
  }
  };
</script>

<style scoped>
  /* 添加一些基本样式 */
</style>