FE_python_trial/src/components/TestPanel.vue

<template>
  <div class="panel">
    <el-container class="scrollbar" v-if="pannelVisible">
      <el-header>
        <div class="panel-header">
          <div class="project">
            <p>实训项目</p>
            <el-select
              v-model="projectId"
              placeholder="请选择"
              class="select"
              :disabled="projectPermissions != 0"
              @change="selectProject"
              style="flex: 1"
            >
              <el-option
                v-for="item in projectList"
                :key="item.projectId"
                :label="item.projectName"
                :value="item.projectId"
              ></el-option>
            </el-select>
          </div>
          <div class="item">
            <div class="count">
              实训{{text}}时间
              <span>{{day}}</span>天
              <span>{{hour}}</span>小时
              <span>{{minutes}}</span>分
              <span>{{seconds}}</span>秒
            </div>
          </div>
          <div class="item">
            <div>
              总得分：
              <span class="total-score">{{grade}}</span>
            </div>
          </div>
          <div>
            <el-button class="reload" @click="reload" v-show="projectPermissions == 0">重新开始</el-button>
            <el-button type="primary" class="submit btn" @click="confirmSubmit" :disabled="isSubmit || !projectList.length">提交</el-button>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="30%">
          <div class="aside-header">
            <div :class="['p-title color', 'system' + systemId]">
              <i class="el-icon-s-order"></i>
              <p>实验目标</p>
            </div>
            <div class="goal">
              <div class="break-all" v-html="experimentTarget"></div>
            </div>
          </div>
          <div class="aside-footer">
            <div :class="['p-title color', 'system' + systemId]">
              <i class="el-icon-s-management"></i>
              <p>实验任务</p>
            </div>
            <div>
              <el-row>
                <el-col :span="24">
                  <el-card shadow="hover">
                    <el-table :data="taskList" :stripe="true">
                      <el-table-column type="index"></el-table-column>
                      <el-table-column prop="name" label="判分点" align="center"></el-table-column>
                      <el-table-column prop="score" label="分值" width="60" align="center"></el-table-column>
                      <el-table-column label="结果" width="60" align="center">
                        <template slot-scope="scope">
                          <template v-if="isSubmit">
                            <i
                              v-if="scope.row.finishedResult"
                              class="el-icon-check right"
                            ></i>
                            <i
                              v-else
                              class="el-icon-close wrong"
                            ></i>
                          </template>
                        </template>
                      </el-table-column>
                      <el-table-column prop="score" label="得分" width="60" align="center">
                        <template slot-scope="scope">
                          <template v-if="isSubmit">{{ scope.row.examScore }}</template>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-aside>
        <el-main>
          <el-tabs v-model="pannelTab" type="card">
            <el-tab-pane label="案例" name="first">
              <div class="break-all des" v-html="experimentDescription"></div>
            </el-tab-pane>
            <el-tab-pane label="实验要求" name="second">
              <el-collapse v-model="curReq">
                <el-collapse-item v-for="item in points" :name="item.judgmentId" :key="item.judgmentId">
                  <template slot="title">
                    <i class="el-icon-s-ticket"></i>
                    <div class="break-all des" v-html="item.name"></div>
                  </template>
                  <div class="break-all des" v-html="item.experimentalRequirements"></div>
                </el-collapse-item>
              </el-collapse>
            </el-tab-pane>
            <el-tab-pane label="实验提示" name="fifth" v-if="hintOpen">
              <div class="break-all des" v-html="experimentHint"></div>
            </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>
    </el-container>

    <div :class="['toggle-panel', {active: pannelVisible}]">
      <div @click="togglePannel">
        <img :src="require(`@/assets/images/system/${$config.defaultSystem}/left.png`)" alt class="c-p" v-if="pannelVisible" />
        <img :src="require(`@/assets/images/system/${$config.defaultSystem}/right.png`)" alt class="c-p" v-if="!pannelVisible" />
      </div>
    </div>
  </div>
</template>

<script>
import newmain from "../util/newMain";
import util from '@/util'
import Config from '@/config'
import Cookie from 'js-cookie'
export default {
  data() {
    return {
      token: Cookie.get('admin-token'),
      systemId: Cookie.get('admin-systemId') || 1,
      classId: Cookie.get('admin-classId'),
      className: Cookie.get('admin-className') ? decodeURI(Cookie.get('admin-className')) : '',
      courseId: Cookie.get('admin-courseId'),
      projectId: Cookie.get('admin-projectId') ? Number(Cookie.get('admin-projectId')) : '',
      assessmentId: Cookie.get('admin-assessmentId'),
      curriculumName: Cookie.get('admin-curriculumName') ? unescape(Cookie.get('admin-curriculumName')) : 'python', // 课程名称
      curSystemId: 1,
      projectPermissions: 0, // 项目权限(0、练习 1、考核 2、竞赛)
      isSubmit: false, // 是否提交的标识
      entryTime: new Date(),
      startTime: Cookie.get('admin-startTime'),
      endTime: Cookie.get('admin-stopTime'),
      pannelVisible: true, // 实验面板显示标识
      grade: '00', // 得分
      text: '', // 倒计时前面的文字，练习：所用；考核：剩余。练习是计时，考核是倒计时
      counterTimer: null, // 获取setInterval对象值
      day: 0, // 天数
      seconds: 0, // 秒数
      minutes: 0, // 分钟数
      hour: 0, // 小时数
      projectList: [], // 项目列表
      experimentTarget: '', //实验目标
      experimentDescription: '', //案例描述
      experimentHint: '', //实验提示
      hintOpen: 1, // 是否显示实验提示
      points: [], // 判分点列表
      judgmentId: '', // 当前判分点id
      curReq: [], // 当前实验要求
      taskList: [], // 实验任务列表
      pannelTab: 'first', // 面板信息切换值
      isSelected: false, // 是否选择过项目的标识，选择了会置为true
      statusTimer: null // 查询考核状态定时器
    };
  },
  mounted() {
    this.projectPermissions = this.assessmentId ? 1 : 0 // 1：考核，0：练习
    if(this.assessmentId){ // 考核（考核才会从外面带进来assessmentId，练习是默认显示第一个项目)
      this.getAssList()
    }else{ // 练习
      // 获取项目列表
      this.getList().then(() => {
        let cache = localStorage.getItem('codeCache') // 获取本地缓存
        // 如果有缓存，再调接口取上次运行的代码
        if (cache) {
          this.getCache(JSON.parse(cache))
        } else {
          this.getCache()
        }
      }).catch(res => {})
    }
  },
  methods: {
    // 获取项目列表
    getList(){
      let data = {
        systemId: this.systemId,
        cId: this.courseId, // 课程id
        permissions: this.projectPermissions // 练习/考核
      }
      return new Promise((resolve, reject) => {
        this.$get(`${this.api.queryTestProject}`,data).then(res => {
          const list = res.projects
          this.projectList = list
          if (!this.projectPermissions && !this.projectId) this.projectId = list ? list[0].projectId : 0 // 默认取第一个项目
          this.getProDetail().then(() => {
            resolve()
          }).catch(res => {
            reject()
          })
        }).catch(res => {
          reject()
        })
      })
    },
    // 获取项目详情
    getProDetail() {
      const projectId = this.projectId
      return new Promise((resolve, reject) => {
        this.$get(this.api.getProjectDetail, {
          projectId,
          stuAssessent: 1
        }).then(res => {
          const points = res.projectJudgmentVos
          const project = res.projectManage
          const curReq = []
          // 跳转银行
          if (project.systemId == 11) {
            return location.href = `${Config.bankPath}/#/index/list?curriculumName=${this.curriculumName}&token=${this.token}&cid=${this.courseId}&systemId=${this.systemId}&projectId=${projectId}&assessmentId=&classId=&stopTime=&test=true`
          }
          if (!points.length) {
            this.$message.error('该项目没有判分点，请换个项目重试')
            this.projectId = this.projectList[0].projectId
            this.getProDetail()
          }
          points.map((e, i) => {
            e.code = '' // 后端返回的字段没有code，要手动加上以存储运行的代码
            e.codeId = '' // 代码通过接口传给后端运行后，接口会返回一个codeId，提交的时候需要传这个codeId
            e.answer =  '' // 代码运行结果
            e.retResult =  '' // 返回结果(1为正确 0为错误)
            curReq.push(e.judgmentId)
          })
          if (this.projectPermissions) {
            this.projectList = [{
              projectId,
              projectName: project.projectName
            }]
          }
          const { systemId } = project
          this.curSystemId = systemId
          this.$parent.getModelStatus(systemId)
          this.curReq = curReq // 实验要求默认全部展开，通过judgmentId来选中item
          this.points = points
          this.taskList = points // 实验任务
          this.judgmentId = points[0].judgmentId // 默认取第一个判分点
          this.experimentTarget = project.experimentTarget
          this.experimentDescription = project.experimentDescription
          this.experimentHint = project.experimentHint
          this.hintOpen = !res.projectManage.hintOpen // 0显示，1不显示
          this.$emit('tell', projectId, systemId, this.points)
          const isAss = this.projectPermissions == 1 // 是否是考核
          this.text = isAss ? '剩余' : '已用'
          this.countVal = isAss ? (new Date(this.endTime).getTime() - Date.now()) / 1000 : 0 // 如果是考核，取考核的结束时间减去当前时间去做倒计时，练习则直接给0做计时
          this.startCount()
          resolve()
        }).catch(err => {
          reject()
        })
      })
    },
    // 关闭父页面的loading，并置加载完成状态为true
    closeLoad() {
      this.$parent.loadIns.close()
      this.$parent.loaded = true
    },
    // 获取考核列表来查询该考核是否已经考过
    getAssList(){
      this.$post(`${this.api.pageStuAssessment}`, {
        pageNum: 1,
        pageSize: 10000
      }).then(res => {
        const list = res.list
        const assessmentId = this.assessmentId
        let done = false
        const classId = this.classId
          // 匹配到该考核，并且已经提交过（有reportId则说明有实验记录），并且classId跟当前用户的classId相同，就提示提交了考核然后返回上一页
        if (list.find(e => e.assessmentId == assessmentId && e.reportId && e.classId == classId)) {
          done = true
          this.isSubmit = true
          newmain.$emit('isSubmit', this.isSubmit)
          this.$message.error('你已经提交过该考核！')
          setTimeout(_ => {
            history.back() // 直接返回上一页面
          }, 1500)
        }
        // 如果该考核没有提交过，则取获取项目列表进行考核
        if (!done) {
          this.getList().then(() => {
            this.getCache()
          }).catch(res => {})
          // 查询考核状态定时器
          this.statusTimer = setInterval(_ => {
            this.getStatus()
          }, 1000)
        }
      }).catch(res => {})
    },
    // 获取上次缓存记录
    getCache(cache) {
      const pId = cache ? cache.projectId : ''
      const projectId = Number(pId || this.projectId)
      const cid = this.courseId
      const assessmentId = this.assessmentId
      const list = this.projectList
      let points = []
      if (pId && cache.judgmentIdList && !Cookie.get('admin-projectId')) {
        cache.judgmentIdList.map(e => {
          points.push({
            judgmentId: e
          })
        })
      } else {
        // 深拷贝判分列表，下面接口获取到有缓存代码就直接存进去，如果用户选择了恢复代码，再用这个列表替换原来的判分列表
        points = JSON.parse(JSON.stringify(this.points))
      }
      // 如果是没有代码的缓存，则只需要恢复项目，否则，就调接口查询缓存代码
      if (cache && cache.empty && list.find(e => e.projectId === projectId) && !Cookie.get('admin-projectId')) {
        if (Cookie.get('admin-projectId')) {
          Cookie.remove('admin-projectId')
        } else {
          this.projectId = projectId
          this.getProDetail()
        }
        this.closeLoad()
        localStorage.removeItem('codeCache')
      } else {
        if (Cookie.get('admin-projectId')) {
          Cookie.remove('admin-projectId')
        }
        let newJudgmentId = '' // 要恢复到第一个有代码的判分规则，因为有代码的规则可能不是第一个，所以要判断如果这个为空，才把索引赋给该变量
        const promiseList = [] // promise数组
        let hasCache = 0 // 是否有缓存
        points.map((e, i) => {
          const judgmentId = e.judgmentId
          promiseList.push(new Promise((resolve,reject) => {
            this.$post(this.api.getLastCache, {
              assessmentId: assessmentId ? Number(assessmentId) : '',
              bcId: judgmentId,
              projectId, // 项目id，同上
              cid // 课程id
            }).then(res => {
              this.closeLoad()
              const code = res.getLastCache
              // 如果有缓存代码
              if (code) {
                hasCache = 1
                if (newJudgmentId === '') newJudgmentId = i
                e.code = code
              }
              resolve()
            }).catch(res => {
              reject()
              this.closeLoad()
            })
          }))
        })
        // 如果有缓存代码，再提示用户是否要继续上次的实验
        Promise.all(promiseList).then(_ => {
          hasCache && this.$confirm('是否要继续上次的实验？', '提示', {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'success'
          }).then(() => {
            localStorage.removeItem('codeCache') // 恢复代码后清除本地缓存
            this.projectId = projectId
            // 如果是本地缓存里有项目id，则要再次获取项目详情，取判分列表再次赋值；本地没有缓存则取只恢复第一个判分点的代码
            if (pId) {
              this.getProDetail().then(() => {
                this.points.map(e => {
                  const item = points.find(n => n.judgmentId === e.judgmentId)
                  if (item && item.code) this.$set(e, 'code', item.code)
                })
                this.$emit('tell', projectId, this.curSystemId, this.points)
                this.$emit('recoveryCode', newJudgmentId + '') // 切换为缓存的判分点，tab索引值要为字符串
              }).catch(res => {})
            } else {
              this.points.map(e => {
                const item = points.find(n => n.judgmentId === e.judgmentId)
                if (item && item.code) this.$set(e, 'code', item.code)
              })
              this.$emit('tell', projectId, this.curSystemId, this.points)
              this.$emit('recoveryCode')
            }
          }).catch(() => {
            // 选择了不继续上次的实验，则清除本地缓存，并删除服务器里缓存的代码
            localStorage.removeItem('codeCache')
            // 删除该项目下所有判分规则的缓存代码
            points.map(e => {
              e.code && this.$post(this.api.delCache, {
                assessmentId,
                bcId: e.judgmentId,
                projectId,
                cid
              }).then(res => {}).catch(() => {})
            })
          })
        })
      }
    },
    // 定时查询考核状态（只有考核才需要定时查，查到考核如果结束后，直接提交考核）
    getStatus() {
      // 未提交才需要查询状态
      this.isSubmit || this.$get(this.api.getDetailById, {
        id: this.assessmentId
      }).then(res => {
        const done = res.data ? res.data.status === 2 : false // 状态(0、待开始 1、进行中 2、已结束)
        // 如果考核已结束，则清除查询考核状态的定时器，并且自动提交
        if (done) {
          clearInterval(this.statusTimer)
          this.$alert('考核时间已到，系统已自动交卷', '提示', {
            confirmButtonText: '确定'
          })
          this.submit()
        }
      }).catch(res => {})
    },
    // 项目选择回调
    selectProject(){
      this.isSelected = true
      this.getProDetail().then(() => {
        this.getCache()
      }).catch(res => {})
      this.isSubmit = false
      this.countVal = 0
      this.grade = '00'
      this.pannelTab = 'first'
      this.$emit('recoveryCode') // 切换实训项目后回到第一个判分点
      newmain.$emit('isSubmit', this.isSubmit) // 选择项目后把提交状态重置为未提交
    },
    //重新开始
    reload() {
      this.reloadCount()
      this.grade = '00'
      localStorage.removeItem('codeCache')
      this.isSubmit = false
      newmain.$emit('isSubmit', this.isSubmit)
      const points = this.points
      // code和codeId,还有运行结果全部清空
      points.map(e => {
        e.code = ''
        e.codeId = ''
        e.answer = ''
        e.retResult = ''
      })
      this.$emit('tell', this.projectId, this.curSystemId, points)
      this.$emit('recoveryCode')
      this.startCount()
    },
    // 提交询问
    confirmSubmit() {
      const pointList = this.$parent.workbench
      let msg = '此操作将视为结束考试，是否继续？'
      if(pointList.find(e => !e.codeId && e.code)) msg = '有代码没有运行，该代码将不得分，确定提交？'
      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.submit()
      }).catch(() => {})
    },
    // 提交
    submit() {
      if (this.isSubmit) return false
      const pointList = this.$parent.workbench
      const date = new Date()
      const entryTime = this.entryTime
      const timeSum = Math.ceil((date.getTime() - entryTime.getTime()) / 60000) // 计算实验用时（分钟），向上取整
      const submitTime = util.formatDate('yyyy-MM-dd hh:mm:ss', date)
      const projectId = this.projectId
      const projectName = this.projectList.find(e => e.projectId == projectId).projectName // 获取项目名称
      this.reloadCount()
      // 判分点参数
      const attributesReqList = []
      pointList.map(e => {
        attributesReqList.push({
          codeId: e.codeId,
          bcId: e.judgmentId,
          isSubmit: e.codeId ? 1 : 0,
          answer: e.answer,
          retResult: e.retResult
        })
      })
      const data = {
        classId: this.classId ? this.classId : '',
        className: this.className ? this.className : '',
        curriculumId: this.courseId,
        startTime: this.projectPermissions ? this.startTime : util.formatDate('yyyy-MM-dd hh:mm:ss', entryTime), // 开始时间（考核：直接从职站取考核的开始时间；练习：取页面进入的时间）
        endTime: this.projectPermissions ? this.endTime : submitTime, // 结束时间（考核：直接从职站取考核的结束时间；练习：取提交时间）
        submitTime, // 提交时间，即当前时间（这3个时间都是传完整的日期时间格式）
        timeSum,
        projectId,
        projectName,
        assessmentId: this.assessmentId ? this.assessmentId : '',
        totalScore: 100, // 判分点总分固定为100
        systemId: this.curSystemId,
        purpose: this.experimentTarget, // 实验目的
        attributesReqList
      }
      this.$post(this.api.submit, data).then(res => {
        localStorage.removeItem('codeCache')
        this.isSubmit = true
        newmain.$emit('isSubmit', this.isSubmit)
        clearInterval(this.statusTimer)
        let list = res.retInfo
        let taskList = this.taskList
        let score = 0
        // 给判分列表添加分数和运行结果
        taskList.map(e => {
          let item = list.find(n => n.judgmentPointsId === e.judgmentId)
          if (item) {
            e.examScore = item.score
            e.finishedResult = item.finishedResult // 1：正确，2：错误
          } else {
            e.examScore = 0
          }
          score += e.examScore // 计算总分
        })
        this.grade = util.handleZero(score) // 前置加0
        this.editReport(res.reportId)
      }).catch(err => {})
    },
    // 编辑实验报告
    editReport(reportId) {
      const data = []
      const ans = []
      const promises = []
      this.taskList.map(e => {
        promises.push(new Promise((resolve, reject) => {
          data.push({
            judgmentId: e.judgmentId,
            judgmentName: e.name,
            answer: e.code,
            score: e.examScore,
          })
          // 获取参考答案
          this.$get(this.api.queryBcJudgmentPointByBcId, {
            bcId: e.judgmentId
          }).then(({ judgmentPoint }) => {
            ans.push(judgmentPoint)
            resolve()
          }).catch(err => {
            reject()
          })
        }))
      })
      Promise.all(promises).then(_ => {
        data.map(e => {
          const item = ans.find(n => n.bcId === e.judgmentId)
          e.referenceAnswer = item.experimentCode
        })
        this.$post(this.api.editExperimentalData, {
          reportId,
          data: JSON.stringify(data)
        }).then(res => {}).catch(err => {})
      })
    },
    // 实验面板显示隐藏
    togglePannel() {
      this.pannelVisible = !this.pannelVisible
    },
    // 倒计时
    timeFormat(param) {
      return param < 10 ? '0' + param : param
    },
    // 清除时间
    reloadCount() {
      clearInterval(this.counterTimer)
      this.countVal = ''
      this.day = '00'
      this.seconds = '00'
      this.minutes = '00'
      this.hour = '00'
    },
    // 计时器（考核是倒计时，练习是计时）
    counter(counterTime) {
      let leave1 = counterTime % (24 * 3600) //计算天数后剩余的毫秒数
      let leave2 = leave1 % 3600 //计算小时数后剩余的毫秒数
      let leave3 = leave2 % 60 //计算分钟数后剩余的毫秒数
      let day = Math.floor(counterTime / (24 * 3600)) //计算相差天数
      let hour = Math.floor(leave1 / 3600) //计算相差小时
      let minutes = Math.floor(leave2 / 60) //计算相差分钟
      let seconds = Math.round(leave3) //计算相差秒
      day = this.timeFormat(day)
      hour = this.timeFormat(hour)
      minutes = this.timeFormat(minutes)
      seconds = this.timeFormat(seconds)
      this.day = day
      this.hour = hour
      this.minutes = minutes
      this.seconds = seconds
    },
    // 启动倒计时
    startCount() {
      clearInterval(this.counterTimer)
      this.counterTimer = setInterval(() => {
        this.counter(this.projectPermissions ? this.countVal-- : this.countVal++)
      }, 1000)
    }
  }
};
</script>

<style lang="scss" scoped>
.el-main {
  width: 60%;
  background-color: #fff;
  color: #333;
  padding: 0;
  font-size: 16px;
  margin: 0px 20px 10px 10px;
  white-space: pre-wrap;
  overflow: hidden;
}
.toggle-panel {
  position: fixed;
  top: 50%;
  &.active {
    left: 85%;
  }
  img {
    height: 150px;
  }
}
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .project {
    display: inline-flex;
    align-items: center;
    width: 28%;
  }
  .item {
    font-size: 16px;
    margin: 0 10px;
    padding: 20px 0;
  }
  .count {
    margin-left: -40px;
    span {
      padding: 5px 15px;
      margin: 0 5px;
      color: #333;
      font-size: 14px;
      text-align: center;
      background: #fff;
      border-radius: 18px;
    }
  }
  .total-score {
    padding: 10px;
    font-size: 14px;
    text-align: center;
    border-radius: 6px;
  }
  .submit {
    width: 106px;
    font-size: 16px;
  }
  .reload {
    color: #d0d0d0;
    font-size: 16px;
    background-color: #202020;
  }
}
/deep/.des {
  font-size: 16px;
  font-family: "Microsoft YaHei";
  img {
    max-width: 100%;
  }
}
/deep/.el-collapse-item__wrap {
  border-bottom: none;
}
/deep/.el-collapse-item__header {
  border-bottom: none;
}
/deep/.el-tabs__content {
  margin: 0 20px;
  max-height: calc(60vh - 70px);
  overflow: auto;
}
/deep/.el-icon-s-ticket:before {
  padding: 5px;
  font-size: 16px;
}
/deep/.el-collapse-item__arrow {
  margin: 0 5px 0 0;
}
/deep/.el-tabs__item {
  font-size: 16px;
}
/deep/.el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: none;
}
/deep/.el-tabs--card > .el-tabs__header .el-tabs__item {
  border-left: none;
}
/deep/.el-tabs--card > .el-tabs__header {
  border-bottom: none;
}
/deep/.el-collapse {
  border-bottom: none;
  border-top: none;
}
/deep/.el-tabs__item.is-active {
  color: #fff;
}
/deep/.el-tabs__header {
  padding: 5px 20px;
}
.el-aside {
  margin-bottom: 10px;
  color: #333;
  background-color: #fff;
}
.el-aside /deep/[class*=" el-icon-"],
[class^="el-icon-"] {
  line-height: 40px;
  font-size: 16px;
}
.aside-header {
  margin: 0px 10px 10px 10px;
  background-color: #fff;
}
.aside-footer {
  margin: 0px 10px 10px 10px;
  background-color: #fff;
}
.p-title {
  display: flex;
  justify-content: center;
  height: 40px;
  &.system4 {
    background-size: 100% 58px;
  }
  &.system5, &.system7, &.system9 {
    background-size: 100% 57px;
  }
  &.system8, &.system6 {
    background-size: 100% 61px;
  }
  &.system10 {
    background-size: 104% 61px;
  }
  p {
    padding-left: 10px;
    line-height: 40px;
    font-size: 16px;
    color: #fff;
  }
  i {
    color: #fff;
  }
}
/deep/.el-card__body {
  padding: 0;
}
/deep/.el-table {
  font-size: 12px;
  thead {
    color: #fff;
    font-size: 10px;
  }
  th > .cell {
    font-weight: 100;
  }
  td,
  th.is-leaf {
    border-bottom: 0 !important;
  }
}
.goal {
  padding: 10px 0;
  margin: 0 10px;
  text-indent: 2em;
  font-size: 14px;
}
/deep/.select {
  .el-select__caret:before {
    content: "\e78f";
    padding: 3px;
    font-size: 16px;
    color: #fff;
    border-radius: 50%;
  }
  .el-input__icon {
    line-height: 60px;
  }
  .el-input {
    padding: 10px 0;
  }
  .el-input--suffix .el-input__inner {
    height: 40px !important;
    padding-right: 50px;
    margin-left: 15px;
    color: #333;
    font-size: 14px;
    border-radius: 30px;
    border: none;
    background-color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
/deep/.el-container {
  height: 80%;
  &.is-vertical {
    background-color: #f5f5f5;
    width: 85%;
    height: 70%;
    position: fixed;
    top: 200px;
    bottom: 20px;
    left: 0;
  }
}
.right {
  color: #00af00;
  font-size: 20px;
}
.wrong {
  color: #f00;
  font-size: 20px;
}
</style>