FE_python_dataclean/src/components/codemirror.vue

<template>
  <div style="display:flex;">
    <div class="left">
      <codemirror
        v-model="exampleData"
        :value="codeid"
        :options="cmOption"
        class="code-mirror"
        @ready="onCmReady3"
        @focus="onCmFocus"
        @input="onCmCodeChange"
        ref="myCmGenerate"
      ></codemirror>
      <div v-if="isSubmit" class="code-mask"></div>

      <el-button
        class="func-btn"
        type="warning"
        @click="AnswerTips()"
        :disabled="isAnswerTips"
      >运行</el-button>
    </div>
    <div class="code-right answer">
      <p class="text-wrapper">{{modifys}}</p>
      <div class="pic-wrap" v-if="picSrc">
        <div style="margin-bottom: 5px;text-align: center">
          <img class="pic" :src="picSrc" alt="">
        </div>
        <el-button class="download-btn" type="primary" size="mini" @click="$refs.picLink.click()">下载图片</el-button>
        <a ref="picLink" style="display: none;" download="运行结果.png" :href="picSrc">下载图片</a>
      </div>
      <div class="code_yes" v-show="this.isError == 0">
        <img src="../assets/img/yes.png" alt />运行成功
      </div>
      <div class="code_error" v-show="this.isError == 1">
        <img src="../assets/img/error.png" alt />
        第{{num}}行出现错误
        <!-- <el-button
          style="color:rgba(255,49,49,1);background:rgba(255,255,255,1);margin-left:80px"
        >求助</el-button>-->
        <el-button class="tips-btn" @click="getQueryAnswer()" v-show="ShowAssessmentId">提示</el-button>
        <el-dialog title="答案提示" center :visible.sync="error">
          <el-tabs>
            <el-tab-pane label="参考答案">
              <div class="answer-wrap" v-html="answer"></div>
            </el-tab-pane>
          </el-tabs>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import newmain from "../util/newMain";
import { codemirror } from "vue-codemirror";
import "codemirror/theme/ambiance.css"; // 这里引入的是主题样式
import "codemirror/mode/javascript/javascript.js";
import "codemirror/lib/codemirror.css";
// require active-line.js
import "codemirror/addon/selection/active-line.js";
// styleSelectedText
import "codemirror/addon/selection/mark-selection.js";
// hint
import "codemirror/addon/hint/show-hint.js";
import "codemirror/addon/hint/sql-hint.js";
import "codemirror/addon/hint/show-hint.css";
import "codemirror/addon/hint/javascript-hint.js";
// highlightSelectionMatches
import "codemirror/addon/scroll/annotatescrollbar.js";
import "codemirror/addon/search/matchesonscrollbar.js";
import "codemirror/addon/search/match-highlighter.js";
// keyMap
import "codemirror/mode/clike/clike.js";
import "codemirror/mode/sql/sql.js";
import "codemirror/addon/edit/matchbrackets.js";
import "codemirror/addon/comment/comment.js";
import "codemirror/addon/dialog/dialog.js";
import "codemirror/addon/dialog/dialog.css";
import "codemirror/addon/search/searchcursor.js";
import "codemirror/addon/search/search.js";
import "codemirror/keymap/sublime.js";
// foldGutter
import "codemirror/addon/fold/foldgutter.css";
import "codemirror/addon/fold/brace-fold.js";
import "codemirror/addon/fold/comment-fold.js";
import "codemirror/addon/fold/foldcode.js";
import "codemirror/addon/fold/foldgutter.js";
import "codemirror/addon/fold/indent-fold.js";
import "codemirror/addon/fold/markdown-fold.js";
import "codemirror/addon/fold/xml-fold.js";
// 编辑的主题文件
import "codemirror/theme/monokai.css";
import "codemirror/theme/base16-light.css";
import * as $ from "jquery";
import { Loading } from 'element-ui';
export default {
  props: ["workbench1", "code", "codeid", "projectId"],
  data() {
    return {
      datas: [],
      ShowAssessmentId: false,
      answer: "",
      exampleData: this.code,
      codeId: this.codeid,
      codes: [],
      submit: "",
      modifys: "", //运行后返回的
      isError: 2,
      timer: "",
      after: "",
      num: "",
      studentId: "",
      isSubmit: "", //提交按钮
      isAnswerTips: false,
      error: false,
      picVisible: false,
      picSrc: '',
      loadIns: null,
      submiting: false,
      cmOption: {
        scrollbarStyle: "native",
        tabSize: 2, // tab
        styleActiveLine: true, // 高亮选中行
        lineNumbers: true, // 显示行号
        styleSelectedText: true,
        line: true,
        foldGutter: true, // 块槽
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
        highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true }, // 可以启用该选项来突出显示当前选中的内容的所有实例
        mode: {
          // 模式, 可查看 codemirror/mode 中的所有模式
          name: "javascript",
          json: true
        },
        lineWrapping: true, //代码折叠
        // hint.js options
        hintOptions: {
          // 当匹配只有一项的时候是否自动补全
          completeSingle: false
        },
        // 快捷键 可提供三种模式 sublime、emacs、vim
        keyMap: "sublime",
        matchBrackets: true,
        showCursorWhenSelecting: true,
        theme: "monokai", // 主题
        extraKeys: { Ctrl: "autocomplete" } // 可以用于为编辑器指定额外的键绑定，以及keyMap定义的键绑定
      }
    };
  },
  components: {
    codemirror
  },
  watch: {
    list() {
      this.timer();
    },
    exampleData(val) {
      this.$emit("update:code", val);
    },
    codeId(val) {
      this.$emit("update:codeid", val);
    }
  },
  mounted() {
    this.assessmentId = this.getCookie("assessmentId");
    if (!this.assessmentId) {
      this.ShowAssessmentId = true;
    }

    //兄弟组件传值
    newmain.$on("isSubmit", isSubmit => {
      this.isSubmit = isSubmit;
    });
  },

  methods: {
    onCmReady3() {
      this.$refs.myCmGenerate.codemirror.setSize("auto", "calc(100vh - 167px)");
    },
    onCmFocus(instance, event) {},
    getCookie(cookie_name) {
      //获取cookie中指定key的value
      var allcookies = document.cookie; //索引长度，开始索引的位置
      var cookie_pos = allcookies.indexOf(cookie_name); // 如果找到了索引，就代表cookie存在,否则不存在

      if (cookie_pos != -1) {
        // 把cookie_pos放在值的开始，只要给值加1即可
        //计算取cookie值得开始索引，加的1为“=”
        cookie_pos = cookie_pos + cookie_name.length + 1; //计算取cookie值得结束索引
        var cookie_end = allcookies.indexOf(";", cookie_pos);

        if (cookie_end == -1) {
          cookie_end = allcookies.length;
        } //得到想要的cookie的值
        var value = unescape(allcookies.substring(cookie_pos, cookie_end));
      }
      return value;
    },

    onCmCodeChange(instance, obj) {
      if(!this.submiting){
        this.submiting = true
        this.submit = 0;
        this.projectId = this.projectId;
        this.userId = this.getCookie("userId");
        this.studentId = this.getCookie("studentId");
        //新增编辑器代码
        if (this.codeId == "") {
          this.$post(this.api.AddCode, {
            code: this.exampleData,
            projectId: this.projectId,
            // projectId: 305,
            judgmentPointsId: this.workbench1,
            userId: parseInt(this.userId),
            studentId: this.studentId,
            // studentId: 54,
            submit: this.submit
          })
            .then(res => {
              this.codeId = res.message;
              this.submiting = false
              newmain.$emit("codeid", this.codeId);
            })
            .catch(err => {});
        } else {
          // 这是一个定时器
          // this.timer = setTimeout(this.UpdateCode, 300000);
          this.submit = 0;
        }
      }
    },
    downloadFile(fileName,url) {
      var x = new XMLHttpRequest()
      x.open("GET", url, true)
      x.responseType = 'blob'
      x.onload=function(e) {
          var url = window.URL.createObjectURL(x.response)
          var a = document.createElement('a')
          a.href = url
          a.download = fileName
          a.click()
      }
      x.send()
    },
    AnswerTips() {
      // this.$post(this.api.AddCode, {
      //   // headers: {code: "#-*-coding:utf-8-*-↵发动机开始"},
      //   code: "#-*-coding:utf-8-*-↵发动机开始",
      //   codeId: this.codeId,
      //   submit: this.submit //是否点击运行(0未运行,1已运行)
      // })
      //   .then(res => {
          
      //   })
      //   .catch(err => {});

      // return false
      if (this.isSubmit == "") {
        this.submit = 1;
        if (this.codeid == "") {
          this.$message({
            message: "警告哦，内容为空不可运行",
            type: "warning"
          });
        } else {
          // if (/^((?!#).*?(,|\(|\[|\{|\s)+)?input(?!\w)(,|\(|\)|\[|\]|\{|\}|\s)?/m.test(this.exampleData)) {
          if (false) {
            this.$prompt("请输入...", "提示", {
              confirmButtonText: "确定"
            }).then(({ value }) => {
              this.datas = [];
              this.datas.push(value); 
              this.$post(this.api.ChangeCode, {
                datas: this.datas,
                code: this.exampleData
              })
                .then(res => {
                  this.exampleData = res.message;
                })
                .catch(err => {
                  console.log(err);
                });
            }).catch(err => {})
          } else {
            this.loadIns = Loading.service({
              background: 'transparent'
            })
            //实时更新编辑器代码(修改代码)
            this.$post(this.api.UpdateCode, {
              code: this.exampleData,
              codeId: this.codeId,
              submit: this.submit //是否点击运行(0未运行,1已运行)
            })
              .then(res => {
                this.loadIns.close()
                this.picSrc = ''
                if(typeof res.message == 'string'){
                  this.isError = res.message.isError;
                  this.modifys = ''
                  this.picSrc = `${res.message}?id=${new Date().getTime()}`
                  newmain.$emit("updateJud",{
                    id: res.data.judgmentPointsId,
                    isError: res.data.isError
                  })
                }else{
                  this.isError = res.message.isError;
                  newmain.$emit("updateJud",{
                    id: res.data.judgmentPointsId,
                    isError: res.data.isError
                  })
                  var modify = res.message.result;
                  this.modifys = modify;
                  this.after = modify.substring(
                    modify.indexOf("line") + 4,
                    modify.length 
                  );
                  this.num = parseInt(this.after);
                  if(this.projectId == 593){
                    let str = /\d+\.\d+/.exec(modify)
                    if(str.length){
                      this.modifys = str[0]
                    }
                  }
                }
              })
              .catch(res => {
                res.status == 500 && this.$message.error('检测到代码里有非法代码，请检查是否有调用系统命令。')
                this.loadIns.close()
              });
            clearTimeout(this.timer);
          }
        }
      } else {
        this.isAnswerTips = true;
        this.$message({
          message: "警告哦，已提交不可再运行",
          type: "warning"
        });
      }
    },
    UpdateCode() {
      //实时更新编辑器代码(修改代码)
      this.$post(this.api.UpdateCode, {
        code: this.exampleData,
        codeId: this.codeId,
        submit: this.submit //是否点击运行(0未运行,1已运行)
      })
        .then(res => {})
        .catch(err => {});
      clearTimeout(this.timer);
    },

    getQueryAnswer() {
      this.error = true;
      //提示答案
      this.$get(this.api.QueryAnswer, {
        judgmentPointsId: this.workbench1
      })
        .then(res => {
          this.answer = res.message;
        })
        .catch(err => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.left{
  position: relative;
  width: calc(100% - 400px);
}
.text-wrapper {
  white-space: pre-wrap;
}
//答案提示
.answer ::v-deep .el-tab-pane {
  padding: 0 10px;
  height: 340px;
  overflow: hidden;
  overflow-y: auto;
  white-space: pre-wrap;
}
.answer ::v-deep .el-dialog--center {
  width: 500px;
  height: 500px;
}
.answer ::v-deep .el-dialog__title {
  font-size: 22px;
  font-weight: 500;
}
.answer ::v-deep .el-tabs__nav-wrap::after {
  background-color: #333;
}
.answer ::v-deep .el-tabs__active-bar {
  background-color: #fff;
  height: 0;
}
.answer ::v-deep .el-tabs__header {
  background-color: #333;
}
.answer ::v-deep .el-dialog--center .el-dialog__body {
  padding: 0;
}
.answer ::v-deep .el-tabs__item {
  color: #fff;
  width: 80px;
}
.answer ::v-deep .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 20px;
}
.answer ::v-deep .el-tabs__item.is-active {
  color: #fff !important;
  background-color: #333 !important;
}

::v-deep .CodeMirror-wrap pre.CodeMirror-line,
.CodeMirror-wrap pre.CodeMirror-line-like {
  height: 30px;
  line-height: 30px;
}

.cm-s-monokai .CodeMirror-linenumber {
  height: 30px;
  line-height: 30px;
}
.code-right ::v-deep .tips-btn {
  margin-top: 10px;
  height: 40px;
  width: 90px;
  border: none;
  position: absolute;
  right: 0;
  background: rgba(255, 49, 49, 1);
  color: rgba(255, 255, 255, 1);
}
.code-right ::v-deep .tips-btn:hover,
.tips-btn:focus,
.tips-btn:active {
  background: rgba(255, 49, 49, 1);
  color: rgba(255, 255, 255, 1);
}
.code_error img {
  width: 40px;
  height: 40px;
  margin-top: 5px;
  margin-right: 10px;
}
.code_yes img {
  width: 40px;
  height: 40px;
  margin-top: 5px;
  margin-right: 10px;
}
.code_yes {
  color: $main-color;
  background-color: rgba(43, 40, 22, 1);
}
.code_error {
  background-color: rgba(43, 22, 22, 1);
  color: red;
}
.code_error,
.code_yes {
  display: flex;
  bottom: 10px;
  position: absolute;
  left: 20px;
  right: 20px;
  padding: 0 10px;
  box-sizing: border-box;
}
.code-right p {
  font-size: 18px;
  margin: 10px;
  position: absolute;
  height: calc(100vh - 230px);
  overflow: auto;
}
.code-right {
  width: 500px;
  color: #ffffff;
  background: #1b1b1b;
  display: inline-block;
  position: relative;
  overflow-x: auto;
}
.button ::v-deep .el-button--warning:hover,
.el-button--warning:focus,
.el-button--warning:active {
  background: $main-color;
  color: #333;
}
.flex {
  display: flex;
}
// 滚动条的宽度
.scrollbar ::-webkit-scrollbar {
  width: 2px; // 横向滚动条
  height: 6px; // 纵向滚动条 必写
}
// 滚动条的滑块
.scrollbar ::-webkit-scrollbar-thumb {
  background-color: $main-color;
  border-radius: 3px;
  box-shadow: inset 0 0 5px #dddddd;
}
.scrollbar ::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px #dddddd;
  border-radius: 0;
  background: #dddddd;
}
.pic-wrap{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  text-align: center;
  .pic{
    max-width: 80%;
    vertical-align: middle;
  }
}
.code-mask{
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.func-btn{
  width:100px;
  position:absolute;
  z-index:99;
  background:$main-color;
  color:#fff !important;
  right: 50px;
  bottom:15px;
  border-color: $main-color;
}
.download-btn{
  background:$main-color;
  color:#fff;
  border-color: $main-color
}
/deep/.answer-wrap{
  pre{
    width: 100%;
    white-space: pre-wrap;
    // height: 320px;
    // overflow-x: scroll;
  }
  img{
    max-width: 100%;
  }
}
</style>