AIScoring/src/views/analysis/optionAnalysis.vue

<template>
  <ReportModule
    :showTitle="true"
    :titleList="[`1、${state.groupTitle}图`]"
    :showDescribe="true"
    tableOrChart="qita"
    :showPrintBtn="false"
    :showExportBtn="false"
  >
    <template #module_qita>
      <div class="module_chart_query">
        <div class="query_left">
          <span
            >满分：{{
              state.question?.resData?.[state.question.selectIndex]?.fullScore
                ? `${state.question.resData[state.question.selectIndex].fullScore}分`
                : "-"
            }}</span
          >
          <span
            >平均分：{{
              state.question?.resData?.[state.question.selectIndex]?.avgScore
                ? `${state.question.resData[state.question.selectIndex].avgScore}分`
                : "-"
            }}</span
          >
          <span
            >得分率：{{
              state.question?.resData?.[state.question.selectIndex]?.scoreRate
                ? `${state.question.resData[state.question.selectIndex].scoreRate}%`
                : "-"
            }}</span
          >
          <span
            >答案：{{
              state.question?.resData?.[state.question.selectIndex]
                ?.answerValue || "-"
            }}</span
          >
        </div>
        <div class="query_right report_button">
          <div class="select_question">
            <span>当前小题：</span>
            <el-select
              v-model="state.question.select"
              placeholder="请选择小题"
              style="width: 140px"
              @change="ChangeQuestionSelect"
            >
              <el-option
                v-for="item in state.question.questionList"
                :key="item?.questionId"
                :label="item?.questionName"
                :value="item?.questionId"
              ></el-option>
            </el-select>
          </div>
          <el-button
            class="select_btn"
            :disabled="state.question.selectIndex === 0"
            @click="PrevQuestion"
            >上一题</el-button
          >
          <el-button
            class="select_btn"
            :disabled="
              state.question.selectIndex === state.question.lastQuestionIndex
            "
            @click="NextQuestion"
            >下一题</el-button
          >
        </div>
      </div>
      <div class="module_content">
        <div class="content_left">
          <BarChart
            :datax="state.barChartData.datax"
            :datay="state.barChartData.datay"
            :isShowMarkLine="false"
            color=""
            typeName="人数"
            unit="人"
          ></BarChart>
        </div>
        <div class="content_right">
          <PieChart
            :key="state.pieKey"
            v-if="state.pieChart.data.length > 0"
            :data="state.pieChart.data"
            :refresh="state.pieChart.refresh"
            @refresh="GetPieRefresh"
            height="380"
          />
        </div>
      </div>
    </template>
    <template #module_describe>
      说明：柱图代表每个选项的选择人数，饼图代表每个选项选择人数的占比。通过分析选择题选项的人数和占比，可以评估试题的质量。如果某个选项的选择人数与预期不符，可能意味着试题存在质量问题，需要进一步分析和调整。
    </template>
  </ReportModule>
  <ReportModule
    ref="reportModuleRef"
    :showTitle="true"
    :titleList="[`2、${state.groupTitle}表`]"
    :showDescribe="false"
    tableOrChart="table"
    :showPrintBtn="false"
    :showExportBtn="true"
    :currentPage="state.objectiveAnalysisData.currentPage"
    :pageSize="state.objectiveAnalysisData.pageSize"
    :total="state.objectiveAnalysisData.total"
    @ChangePageSize="ChangePageSize"
    @ChangeCurrentPage="ChangeCurrentPage"
    @ExportExcel="ExportExcel"
  >
    <template #module_table_chart>
      <el-table
        :data="objectiveTable"
        border
        stripe
        align="left"
        row-key="showCode"
      >
        <el-table-column
          prop="questionName"
          label="题号"
          width="74"
          align="center"
          fixed
          show-overflow-tooltip
          v-if="state.objectiveAnalysisData.tableData.length"
        />
        <el-table-column
          prop="questionType"
          label="题型"
          width="114"
          align="center"
          fixed
          show-overflow-tooltip
          v-if="state.objectiveAnalysisData.tableData.length"
        />
        <el-table-column
          prop="answerScore"
          label="分数"
          width="80"
          align="center"
          fixed
          show-overflow-tooltip
          v-if="state.objectiveAnalysisData.tableData.length"
        />
        <el-table-column
          prop="averageScore"
          label="平均分"
          width="80"
          align="center"
          fixed
          show-overflow-tooltip
          v-if="state.objectiveAnalysisData.tableData.length"
        />
        <el-table-column
          prop="scoreRate"
          label="得分率"
          width="80"
          align="center"
          fixed
          show-overflow-tooltip
          v-if="state.objectiveAnalysisData.tableData.length"
        >
          <template #default="{ row: org }">
            <span>{{ org["scoreRate"] }}%</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="answerValue"
          label="答案"
          width="80"
          align="center"
          fixed
          show-overflow-tooltip
          v-if="state.objectiveAnalysisData.tableData.length"
        />
        <el-table-column
          label="各选项选择人数"
          align="center"
          v-if="state.objectiveAnalysisData.tableData.length"
        >
          <el-table-column
            align="center"
            v-for="key in state.objectiveAnalysisData.headLabels"
            :key="key"
            :label="key"
            min-width="70"
            show-overflow-tooltip
          >
            <template #default="{ row: org }">
              <span
                :style="{
                  color:
                    org?.['answerMap']?.[key]?.['studentNum'] &&
                    org?.['answerMap']?.[key]?.['studentNum'] !== '0' &&
                    org?.['answerMap']?.[key]?.['studentNum'] != '-'
                      ? '#2E64FA'
                      : '',
                  cursor:
                    org?.['answerMap']?.[key]?.['studentNum'] &&
                    org?.['answerMap']?.[key]?.['studentNum'] !== '0' &&
                    org?.['answerMap']?.[key]?.['studentNum'] != '-'
                      ? 'pointer'
                      : '',
                }"
                @click="
                  showDialogData(
                    org.questionCode,
                    org.questionId,
                    org?.['answerMap']?.[key]?.['name'],
                    org?.['answerMap']?.[key]?.['studentNum'],
                    org?.['answerMap']?.[key]?.['studentNames'],
                  )
                "
                >{{ org?.["answerMap"]?.[key]?.["studentNum"] ?? "-" }}</span
              >
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          label="各选项选择人数占比"
          align="center"
          v-if="state.objectiveAnalysisData.tableData.length"
        >
          <el-table-column
            align="center"
            v-for="key in state.objectiveAnalysisData.headLabels"
            :key="key"
            :label="key"
            min-width="70"
            show-overflow-tooltip
          >
            <template #default="{ row: org }">
              <span
                v-if="
                  org?.['answerMap']?.[key]?.['rate'] &&
                  org?.['answerMap']?.[key]?.['rate'] != '-'
                "
                >{{ org?.["answerMap"]?.[key]?.["rate"] }}%</span
              >
              <span v-else>{{
                org?.["answerMap"]?.[key]?.["rate"] ?? "-"
              }}</span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </template>
  </ReportModule>
  <!-- 各选项选择人数 弹框 -->
  <div class="page_dialog">
    <el-dialog :title="state.dialogData.title" v-model="state.dialogData.show">
      <div class="dialog_center" :key="state.dialogData.dialogKey">
        <div class="center_header">
          <div class="header_left left_center">
            <span class="left_count">总计：{{ state.dialogData.total }}人</span>
          </div>
          <div class="header_right report_button">
            <el-button
              class="button_task_select"
              :loading="state.dialogExportLoading"
              @click="DialogExportExcel()"
            >
              <img
                v-if="!state.dialogExportLoading"
                src="@/assets/icon/export_icon.webp"
                alt="导出Excel"
              />导出Excel
            </el-button>
          </div>
        </div>
        <div class="page_jg_20"></div>
        <div class="page_table table_row_42" style="width: 100%">
          <el-table
            :data="state.dialogData.list"
            height="471px"
            border
            stripe
            row-key="studentCode"
          >
            <el-table-column
              type="index"
              align="center"
              label="序号"
              width="50"
              fixed
            >
              <template #default="{ $index }">
                {{
                  (state.dialogData.currentPage - 1) *
                    state.dialogData.pageSize +
                  $index +
                  1
                }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              property="studentCode"
              label="学号"
              width="100"
              show-overflow-tooltip
              fixed
            ></el-table-column>
            <el-table-column
              align="center"
              property="studentName"
              label="姓名"
              width="80"
              show-overflow-tooltip
              fixed
            ></el-table-column>
            <el-table-column
              align="center"
              property="examCode"
              label="考号"
              width="80"
              show-overflow-tooltip
            >
              <template #default="{ row }">
                {{ row.examCode || "-" }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              property="className"
              label="行政班"
              width="80"
              show-overflow-tooltip
            >
              <template #default="{ row }">
                {{ row.className || "-" }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              property="teacherClassName"
              label="教学班"
              width="80"
              show-overflow-tooltip
            >
              <template #default="{ row }">
                {{ row.teacherClassName || "-" }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              v-for="(item, index) in state.dialogData.headerList"
              :key="item"
              :label="item"
              min-width="60"
              show-overflow-tooltip
            >
              <template #header>
                <div class="table_header">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="item"
                    placement="top"
                  >
                    <span>{{ item }}</span>
                  </el-tooltip>
                </div>
              </template>
              <template #default="scope">
                <span
                  :style="{
                    color:
                      scope.row.questionList?.[index]?.answerValue ===
                      scope.row.questionList?.[index]?.studentAnswer
                        ? '#606266'
                        : '#EE6666',
                  }"
                  >{{ scope.row.questionList[index].studentAnswer }}</span
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="page_pagination" v-if="state.dialogData.total > 10">
            <el-pagination
              @current-change="GetStudentTableDataChangePage"
              layout="prev, pager, next"
              :current-page="state.dialogData.currentPage"
              :page-size="state.dialogData.pageSize"
              :total="state.dialogData.total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import ReportModule from "@/components/ReportModule.vue";
import BarChart from "@/components/echarts/barChart.vue"; //单柱状图
import PieChart from "@/components/echarts/pieChart.vue";
import { onMounted, watch, computed, ref, reactive } from "vue";
import { useAnalysisStore } from "@/store/analysis";
import {
  selectQuestionAnalysis,
  selectQuestionAnalysisPage,
  selectQuestionStudentPageList,
  exportObjectAnalysis,
  publicExportSelectQuestion,
} from "@/api/analysis";
import {
  downloadExcel,
  GetExcelFileName,
  selectQuestionAnalysisStaticHeaderData,
  selectQuestionAnalysisDynamicsHeaderData,
} from "@/utils/exportExcel";
const analysisStore = useAnalysisStore();
const reportModuleRef = ref<any>(null);
const getExamName = computed(() => {
  return analysisStore.analysisExamInfo.examName || "";
});
const state = reactive({
  groupTitle: "选项分析",
  question: {
    resData: [] as any[], // 修复：显式声明为 any[]
    select: "",
    questionList: [] as any[], // 修复：显式声明为 any[]
    selectIndex: 0,
    lastQuestionIndex: null as number | null, // 修复：允许 number 或 null
  },
  barChartData: {
    datax: [] as string[], // 修复
    datay: [] as number[], // 修复
  },
  pieChart: {
    refresh: false,
    data: [] as any[], // 修复
  },
  objectiveAnalysisData: {
    tableData: [] as any[], // 修复
    originalTableData: [] as any[], // 修复
    data: [] as any[], // 修复
    headLabels: [] as string[], // 修复
    pageSize: 10,
    total: 0,
    currentPage: 1,
  },
  dialogData: {
    dialogKey: 1,
    title: "",
    questionId: "",
    answer: "",
    studentCodeList: [] as string[], // 修复
    show: false,
    pageSize: 10,
    total: 0,
    currentPage: 1,
    list: [] as any[], // 修复
    headerList: [] as string[], // 修复
    studentNum: 0,
  },
  exportLoading: false,
  dialogExportLoading: false,
  pieKey: 0,
});
const objectiveTable = computed(() => {
  const start =
    (state.objectiveAnalysisData.currentPage - 1) *
    state.objectiveAnalysisData.pageSize;
  const end = start + state.objectiveAnalysisData.pageSize;
  return state.objectiveAnalysisData.tableData.slice(start, end);
});
const PageInit = (isRefresh: boolean) => {
  state.objectiveAnalysisData.currentPage = 1;
  if (isRefresh) {
    state.pieChart.refresh = true;
  }
  GetSelectQuestionAnalysisChartData(); //客观题分析（选择题分析图）
  GetSelectQuestionAnalysisPage(); //客观题分析（选择题分析表-分页）
};
//客观题分析（选择题分析图）
const GetSelectQuestionAnalysisChartData = () => {
  selectQuestionAnalysis({ ...analysisStore.filterObject }).then((res) => {
    state.question.questionList = []; //小题下拉选项
    state.question.select = ""; //当前选择小题的值
    state.question.selectIndex = 0; //当前选择小题的索引
    state.question.lastQuestionIndex = null; //最后一题索引
    state.question.resData = [];
    if (res.code == 200 && res.data && res.data.length) {
      const resData = res.data || [];
      state.question.resData = resData;
      state.question.questionList = resData.map((item: any) => {
        return {
          questionId: item.questionId,
          questionName: item.questionName,
        };
      });
      if (state.question.questionList.length > 0) {
        state.question.select = state.question.questionList[0].questionId;
        state.question.lastQuestionIndex =
          state.question.questionList.length - 1; //最后一题索引
      } else {
        state.question.lastQuestionIndex = 0;
      }
      state.pieKey++;
      GetChartData(); //1、选择题分析图 柱状图
    } else {
      state.barChartData.datax = []; // 1、选择题分析图 柱状图 X轴
      state.barChartData.datay = []; // 1、选择题分析图 柱状图 Y轴
      state.pieChart.data = []; //1、选择题分析图 饼状图

      state.question.questionList = []; //小题下拉选项
      state.question.select = ""; //当前选择小题的值
      state.question.selectIndex = 0; //当前选择小题的索引
      state.question.lastQuestionIndex = null; //最后一题索引
      state.question.resData = [];
    }
  });
};
//切换小题下拉框
const ChangeQuestionSelect = () => {
  state.question.selectIndex = state.question.questionList.findIndex(
    (item) => item.questionId == state.question.select,
  );
  state.pieChart.refresh = true;
  GetChartData();
};
//上一题
const PrevQuestion = () => {
  if (state.question.selectIndex > 0) {
    state.question.selectIndex--;
    state.question.select =
      state.question.questionList[state.question.selectIndex].questionId;
    state.pieChart.refresh = true;
    GetChartData();
  }
};
//下一题
const NextQuestion = () => {
  if (state.question.selectIndex < state.question.lastQuestionIndex) {
    state.question.selectIndex++;
    state.question.select =
      state.question.questionList[state.question.selectIndex].questionId;
    state.pieChart.refresh = true;
    GetChartData();
  }
};
//获取当前选择的小题 柱状图 + 饼状图
const GetChartData = () => {
  const answerScoreData =
    state.question?.resData[state.question.selectIndex]?.answerScore || [];
  state.barChartData.datax = []; // 1、选择题分析图 柱状图 X轴
  state.barChartData.datay = []; // 1、选择题分析图 柱状图 Y轴
  state.pieChart.data = []; //1、选择题分析图 饼状图
  answerScoreData.forEach((item: any) => {
    state.barChartData.datax.push(item.name);
    state.barChartData.datay.push(item.studentNum);
    state.pieChart.data.push({
      value: item.rate,
      name: item.name,
    });
  });
};
const GetPieRefresh = (val: boolean) => {
  state.pieChart.refresh = val;
};
//客观题分析（选择题分析表-分页）
const GetSelectQuestionAnalysisPage = () => {
  selectQuestionAnalysisPage({
    ...analysisStore.filterObject,
    pageParam: {
      pageNum: state.objectiveAnalysisData.currentPage, //当前页码
      pageSize: 200, //每页显示行数
    },
  }).then((res) => {
    if (res.code == 200 && res.data) {
      const { total, records } = res.data;
      if (records?.length) {
        state.objectiveAnalysisData.tableData = records[0]?.pageResult || []; //表格数据
        state.objectiveAnalysisData.headLabels = records[0]?.label || []; //选项头部信息
        state.objectiveAnalysisData.total = Number(total); //总条数
      } else {
        state.objectiveAnalysisData.tableData = [];
        state.objectiveAnalysisData.headLabels = [];
        state.objectiveAnalysisData.total = 0;
      }
    } else {
      state.objectiveAnalysisData.tableData = [];
      state.objectiveAnalysisData.headLabels = [];
      state.objectiveAnalysisData.total = 0;
    }
  });
};
//分页切换
const ChangeCurrentPage = (val: number) => {
  state.objectiveAnalysisData.currentPage = val;
};
const ChangePageSize = (val: number) => {
  state.objectiveAnalysisData.pageSize = val;
  state.objectiveAnalysisData.currentPage = 1;
};
// 显示 各选项选择人数 弹框
const showDialogData = (
  questionCode: string,
  questionId: string,
  answer: string,
  studentNum: any,
  studentCodeList: any[], // 增加类型声明
) => {
  if (!studentNum || studentNum == "0" || studentNum == "-") {
    return false;
  }
  console.log("questionCode22");
  state.dialogData.title = `${questionCode} ${answer}选项人数`;
  state.dialogData.show = true;
  state.dialogData.currentPage = 1;
  state.dialogData.questionId = questionId;
  state.dialogData.answer = answer;
  state.dialogData.studentCodeList = studentCodeList || []; // 防止传入 undefined
  state.dialogData.studentNum = studentNum;
  GetSelectQuestionStudentPageList(studentCodeList || [], studentNum);
};

const GetSelectQuestionStudentPageList = (
  studentCodeList: any[],
  studentNum: any,
) => {
  state.dialogData.dialogKey += 1;
  const start = (state.dialogData.currentPage - 1) * state.dialogData.pageSize;
  const end = start + state.dialogData.pageSize;
  // 修复：使用可选链 ?. 防止 studentCodeList 为 undefined 时调用 slice 报错
  const studentCodeListData = studentCodeList?.slice(start, end) || [];
  state.dialogData.total = Number(studentNum);
  selectQuestionStudentPageList({
    ...analysisStore.filterObject,
    studentCodeList: studentCodeListData,
    pageParam: {
      pageNum: 1,
      pageSize: state.dialogData.pageSize,
    },
  }).then((res) => {
    const { code, data } = res;
    if (code == 200) {
      const { total, records } = data;
      state.dialogData.list = records[0]?.studentPageList || [];
      state.dialogData.headerList = records[0]?.headerList || [];
    }
  });
};
//弹框分页切换
const GetStudentTableDataChangePage = (val: number) => {
  state.dialogData.currentPage = val;
  GetSelectQuestionStudentPageList(
    state.dialogData.studentCodeList,
    state.dialogData.studentNum,
  );
};
//弹框导出
const DialogExportExcel = () => {
  state.dialogExportLoading = true;
  const examName = getExamName.value;
  const title = state.dialogData.title;
  const fileName = `${GetExcelFileName(examName, analysisStore.filterObject, `${state.groupTitle}表_${title.replace(/\s/g, "")}`)}`;
  const sheetName = title.replace(/\s/g, "");
  let params = {
    ...analysisStore.filterObject,
    studentCodeList: state.dialogData.studentCodeList,
    fileName,
    sheetName,
  };
  downloadExcel(publicExportSelectQuestion, params).finally(() => {
    state.dialogExportLoading = false;
  });
};
// 客观题分析表数据导出
const ExportExcel = () => {
  reportModuleRef.value?.SetExportLoading?.(true);
  const examName = getExamName.value;
  const staticHeaderData = selectQuestionAnalysisStaticHeaderData();
  const dynamicsHeaderData = selectQuestionAnalysisDynamicsHeaderData();
  const childHeaderData = state.objectiveAnalysisData.headLabels.map(
    (item: string) => ({
      label: item,
    }),
  );
  let dataList: any[][] = [];
  state.objectiveAnalysisData.tableData.forEach((row) => {
    const staticData = staticHeaderData.map((header) => {
      if (header.prop == "scoreRate") {
        return `${row["scoreRate"]}%`;
      } else {
        return row[header.prop];
      }
    });
    const studentNumData = childHeaderData.map((child) => {
      const value = row?.["answerMap"]?.[child.label]?.["studentNum"] ?? "-";
      if (child.label == row.answerValue) {
        return `${value}答案`;
      } else {
        return value;
      }
    });
    const rateData = childHeaderData.map((child) => {
      const value = `${row?.["answerMap"]?.[child.label]?.["rate"]}${row?.["answerMap"]?.[child.label]?.["rate"] && row?.["answerMap"]?.[child.label]?.["rate"] != "-" ? "%" : ""}`;
      if (child.label == row.answerValue) {
        return `${value}答案`;
      } else {
        return value;
      }
    });
    dataList.push([...staticData, ...studentNumData, ...rateData]);
  });
  let params = {
    fileName: `${GetExcelFileName(examName, analysisStore.filterObject, state.groupTitle)}`,
    examName: examName, //考试名称
    sheetName: state.groupTitle, //sheet页名称
    staticHeaderData: staticHeaderData, //静态表头
    dynamicsHeaderData: dynamicsHeaderData, //动态表头的一级表头
    childHeaderData: childHeaderData, //二级表头
    dataList: dataList, //数据
  };
  downloadExcel(exportObjectAnalysis, params).finally(() => {
    reportModuleRef.value?.SetExportLoading?.(false);
  });
};
// 监听筛选条件
watch(
  () => analysisStore.filterObject,
  async () => {
    PageInit(true);
  },
  { deep: true },
);

onMounted(() => {
  PageInit(false);
});
</script>

<style lang="scss" scoped>
:deep(.module_qita) {
  flex-direction: column;
  .module_chart_query {
    width: calc(100% - 40px);
    margin: auto;
    font-size: 14px;
    color: #333333;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    .query_left {
      display: inline-flex;
      flex: 1;
      span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 120px;
        padding: 0 8px;
        font-size: 14px;
        color: #2e64fa;
        box-sizing: border-box;
        height: 36px;
        background: rgba(46, 100, 250, 0.1);
        border-radius: 4px;
        margin-right: 20px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
    .query_right {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .select_question {
        color: #333333;
        font-size: 14px;
        font-weight: 400;
      }
    }
  }
  .report_button {
    gap: 10px;
    .select_btn {
      border: 1px solid #2e64fa;
      color: #2e64fa;
      margin-left: 0;
      &:hover {
        border-color: #2e64fa;
        background-color: rgba(46, 100, 250, 0.1);
      }
      &.is-disabled {
        color: #bbbbbb;
        border-color: #bbbbbb;
      }
    }
  }
  .module_content {
    display: flex;
    width: 100%;
    .content_left {
      width: 50%;
    }

    .content_right {
      width: 50%;
    }
  }
}
//页面表格公共样式
:deep(.page_table) {
  width: 100%;

  // 表格悬浮效果覆盖
  .el-table__body tr:hover > td {
    background-color: #eaf0ff !important; // 蓝色系悬浮背景
  }

  //表格竖着的边框线样式
  th.el-table__cell {
    border-right: 1px solid #e9e9e9;
  }
  .el-table th.el-table__cell.is-leaf,
  .el-table td.el-table__cell {
    border-bottom: 1px solid #e9e9e9;
  }

  .el-table {
    min-height: 463px;
    border: 0px;
  }
}
//表格42行高
.table_row_42 {
  :deep(.el-table) {
    thead {
      color: #333 !important;
      font-weight: 500;
      font-size: 14px;
      height: 42px !important;
    }
    .el-table__cell {
      padding: 0;
      height: 42px !important;
    }
  }
}
:deep(.report_button) {
  display: flex;
  gap: 10px;
  .el-input-group__append {
    .el-button {
      width: 100%;
      justify-content: center;
    }
  }

  .el-icon-loading {
    color: #666;
  }
  .el-button {
    margin-left: 0px;
    height: 36px;
    line-height: 36px;
    padding: 0 10px;
    display: flex;
    align-items: center;

    span {
      // padding: 0px 10px;
      display: flex;
      align-items: center;
    }

    img {
      width: 16px;
      height: 16px;
      margin-right: 4px;
    }
  }

  .el-button--default {
    color: #666;
    font-weight: 400;
    &.is-disabled {
      color: #bbbbbb;
      border-color: #bbbbbb;
    }
  }
  .el-button--primary.is-plain:hover {
    color: #2e64fa;
    background-color: #c0d1fe;
    font-size: 14px;
  }

  //其他按钮可在下面追加
  //对标任务选择按钮
  .button_task_select {
    // 去掉按钮点击后的样式
    &:active,
    &:focus {
      outline: none; // 去掉点击后的轮廓
      box-shadow: none; // 去掉点击后的阴影
      background-color: inherit; // 保持背景颜色不变
      color: #666666; // 保持文字颜色不变
      border: 1px solid #dcdfe6;
    }
  }

  .button_task_select:hover {
    background-color: #f9f9f9;
    border: 1px solid #dcdfe6;
    color: #666;
  }
}
</style>