生成多张图片

src/components/codemirror.vue

@@ -18,12 +18,13 @@
     </div>
     <div class="code-right answer">
       <p class="text-wrapper">{{ runResult }}</p>
-      <div class="pic-wrap" v-if="picSrc">
+      <div class="pic-wrap" v-if="picSrcList.length">
-        <div style="margin-bottom: 5px;text-align: center">
+        <div class="pic-item" v-for="(img, i) in picSrcList" :key="i">
-          <img class="pic" :src="picSrc" alt="">
+          <!-- <img class="pic" :src="picSrc" alt=""> -->
+          <img class="pic" :src="img" alt="">
+          <el-button class="download-btn btn" type="primary" size="mini" @click="downloadPic(i)">下载图片</el-button>
+          <a :ref="'picLink' + i" style="display: none;" download="运行结果.png" :href="img">下载图片</a>
         </div>
-        <el-button class="download-btn 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="result-right t-color" v-show="isError">
         <img :src="require(`@/assets/images/system/${systemId}/yes.png`)" alt />运行成功
@@ -109,6 +110,7 @@ export default {
       runEnable: false, // 是否禁用运行按钮
       tipsVisible: false, // 答案提示弹框显示标识
       picSrc: '', // 代码运行出来的图片url
+      picSrcList: [],
       loadIns: null, // loading实例
       cmOption: {
         scrollbarStyle: "native",
@@ -306,7 +308,8 @@ export default {
               const result = data.runResult
               this.$emit('cache') // 每次运行代码都要把代码传给后端做缓存
               this.loadIns.close()
-              this.picSrc = ''
+              // this.picSrc = ''
+              if (photo) this.picSrcList = photo.split(',')
               this.$emit('update:codeId', res.codeId) // 更新coddeId
               this.$emit('update:answer', result) // 更新运行结果
               this.$emit('update:retResult', data.retResult) // 更新返回结果
@@ -321,7 +324,8 @@ export default {
                 this.isError = '' // 对错隐藏
                 const text = result.replace(photo, '') // 结果里包含了图片路径，所以要把图片路径给去掉
                 this.runResult = text
-                this.picSrc = photo
+                // this.picSrc = photo
+                if (photo) this.picSrcList = photo.split(',')
               } else if (imgList instanceof Array && imgList.length && typeof firtImg === 'string' && (firtImg.includes('.jpg') || firtImg.includes('.png') || firtImg.includes('img'))) {
                 /**
                  * 这段是为要下载图片的项目案例写的，后端会返回图片名称的数组，前端负责循环这个数组，然后下载下来
@@ -351,6 +355,11 @@ export default {
         })
       }
     },
+    // 下载图片
+    downloadPic(i) {
+      console.log(11, this.$refs['picLink' + i][0])
+      this.$refs['picLink' + i][0].click()
+    },
     // 获取正式答案
     getTips() {
       this.tipsVisible = true
@@ -472,15 +481,24 @@ export default {
     overflow: auto;
   }
 }
-.pic-wrap{
+.pic-wrap {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 5px;
+  display: flex;
+  // justify-content: center;
+  max-width: calc(100% - 50px);
+  margin: 0 auto;
   text-align: center;
-  .pic{
+  overflow: auto;
-    max-width: 80%;
+  .pic-item {
-    vertical-align: middle;
+    margin: 0 5px 5px;
+  }
+  .pic {
+    display: block;
+    width: 100px;
+    margin: 0 auto 10px;
   }
 }
 .code-mask{

src/config/index.js

@@ -4,7 +4,7 @@ const isHh = location.host.includes('10.196.131.73') //是否是河海版本
 const isBeta = process.env.NODE_ENV === 'development' || location.host.includes('39.108.250.202') //是否是职站测试
 
 let host = location.origin + ':9000/'
-if (process.env.NODE_ENV === 'development') host = 'http://192.168.31.151:9000'
+if (process.env.NODE_ENV === 'development') host = 'http://39.108.250.202:9000'
 /**
  * python8个系统的id和名称
  * id即systemId，从cookie里取