样式修改

xiangpei

2024-05-24 48989b78e9d4ecab178fb0ba00117cda8029919c

样式修改

 src/views/answer/sheetStatistics.vue

@@ -14,8 +14,89 @@
      <el-form-item>
        <el-button type="primary" @click="submitForm">查询</el-button>
      </el-form-item>

    </el-form>

    <el-row :gutter="20">
      <el-col :xl="24" class="echarts-row">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card>
              <div class="data-item">
                <div class="data-icon" :style="{ 'background-color': iconList[0].color }">
                  <i class="el-icon-tickets"></i>
                </div>
                <div class="data-info">
                  <div class="data-label">
                    总考试次数
                  </div>
                  <div class="data-num">
                    {{ totalInfo.examTotal }}
                  </div>
                </div>
              </div>
            </el-card>

          </el-col>

          <el-col :span="6">
            <el-card>
              <div class="data-item">
                <div class="data-icon" :style="{ 'background-color': iconList[1].color }">
                  <i class="el-icon-s-claim"></i>
                </div>
                <div class="data-info">
                  <div class="data-label">
                    参考人数
                  </div>
                  <div class="data-num">
                    {{ totalInfo.factPeopleTotal }}
                  </div>
                </div>
              </div>
            </el-card>

          </el-col>

          <el-col :span="6">
            <el-card>
              <div class="data-item">
                <div class="data-icon" :style="{ 'background-color': iconList[2].color }">
                  <i class="el-icon-edit"></i>
                </div>
                <div class="data-info">
                  <div class="data-label">
                    平均分
                  </div>
                  <div class="data-num">
                    {{ totalInfo.averageScore }}
                  </div>
                </div>
              </div>
            </el-card>

          </el-col>

          <el-col :span="6">
            <el-card>
              <div class="data-item">
                <div class="data-icon" :style="{ 'background-color': iconList[3].color }">
                  <i class="el-icon-s-data"></i>
                </div>
                <div class="data-info">
                  <div class="data-label">
                    参考人数百分比
                  </div>
                  <div class="data-num">
                    {{ totalInfo.referencePercentage }}%
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :xl="12" class="echarts-row">
        <el-card>
@@ -29,16 +110,6 @@
        <el-card>
          <div class="card-chart-container">
            <div id="scoreChart" ref="scoreChart" class="chart-style" v-loading="chartLoading2" />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :xl="24">
        <el-card>
          <div class="card-chart-container">
            <div id="peopleChart" ref="peopleChart" class="chart-style" v-loading="chartLoading3" />
          </div>
        </el-card>
      </el-col>
@@ -70,6 +141,13 @@
  'totalAttended': '参与考试',
  'totalAbsent': '未参与考试'
};

const dataKeyMap = {
  'factPeopleTotal': '参考人数',
  'averageScore': '平均分',
  'referencePercentage': '参考人数百分比',
};

let ageChart = null;
let scroeChart = null;
let peopleChart = null;
@@ -77,10 +155,22 @@
export default {
  data() {
    return {
      totalInfo: {
        examTotal: 0,
        factPeopleTotal: 0,
        averageScore: 0,
        referencePercentage: 0
      },
      iconList: [
        { icon: 'el-icon-tickets', color: '#7868d9' },
        { icon: 'el-icon-s-claim', color: '#3eba45' },
        { icon: 'el-icon-edit', color: '#3da7f8' },
        { icon: 'el-icon-warning', color: '#ffbe40' },
        { icon: 'el-icon-error', color: '#fe640d' },
      ],
      examPaperList: [],
      chartLoading1: false,
      chartLoading2: false,
      chartLoading3: false,
      queryParam: {
        examPaperId: '',
        departmentId: []
@@ -94,7 +184,6 @@
    }
    ageChart = echarts.init(this.$refs.ageChart);
    scroeChart = echarts.init(this.$refs.scoreChart);
    peopleChart = echarts.init(this.$refs.peopleChart);
    dashboardApi.examPaperList().then(res => {
      this.examPaperList = res.response;
      this.queryParam.examPaperId = this.examPaperList[0].id
@@ -106,21 +195,17 @@
    getChartData() {
      this.chartLoading1 = true;
      this.chartLoading2 = true;
      this.chartLoading3 = true;
      dashboardApi.getData(this.queryParam).then(re => {
        const { age, score, examPeopleNum } = re.response;

        const { age, score, total } = re.response;
        this.totalInfo = total;
        const ageOption = this.barOption('年龄段统计', age, ageLabel);
        const scoreOption = this.barOption('分数段统计', score, scoreLabel);
        const peopleOption = this.pieOption('考试人数', examPeopleNum, pieLabel);

        ageChart.setOption(ageOption, true);
        scroeChart.setOption(scoreOption, true);
        peopleChart.setOption(peopleOption, true);

        this.chartLoading1 = false;
        this.chartLoading2 = false;
        this.chartLoading3 = false;
      });
    },
    barOption(title, data, labelList) {
@@ -164,43 +249,6 @@
      };

    },
    pieOption(title, data, labelList) {
      const pieData = data.map(item => {
        return {
          name: labelList[Object.keys(item)[0]],
          value: Object.values(item)[0]
        };
      });
      return {
        title: {
          text: title,
          x: 'left'
        },
        color: ['#E74C3C', '#3498DB',  '#F1C40F', '#95A5A6', '#8E44AD', '#F39C12', '#D35400'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'horizontal',
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: pieData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]

      };

    },
    submitForm() {
      this.getChartData();
    },
@@ -221,9 +269,6 @@
      }
      if (scroeChart) {
        scroeChart.resize();
      }
      if (peopleChart) {
        peopleChart.resize();
      }
    }
  },
@@ -249,9 +294,37 @@
  height: 400px;
}


.chart-style {
  width: 100%;
  height: 100%;
}

.data-item {
  width: 100%;
  display: flex;
  align-items: center;
  border-radius: 10px;
  overflow: hidden;

  .data-icon {
    font-size: 70px;
    padding: 20px 30px;
    color: #fff;
    border-radius: 10px;
    overflow: hidden;
    margin-right: 20px;
  }

  .data-info {
    .data-label {
      font-size: 18px;
      margin-bottom: 10px;
      color: #707070;
    }

    .data-num {
      font-size: 28px;
    }
  }
}
</style>