校对画刊字幕时间

src/components/Upload.vue

@@ -92,7 +92,7 @@ export default {
   watch: {
     datafileList: {
       handler(val, oldVal) {
-        this.initUpload();
+        // this.initUpload();
       },
       // 深度观察监听
       deep: true,

src/views/content_manage/pictorial_manage/CreatePictorial.vue

@@ -413,6 +413,18 @@
                     @click="genTokens"
                     >生成字幕</el-button
                   >
+                  <el-button
+                    v-if="
+                      pages[picActiveId] &&
+                      pages[picActiveId].hotspots &&
+                      pages[picActiveId].hotspots[0] &&
+                      pages[picActiveId].hotspots[0].tokens
+                    "
+                    type="primary"
+                    size="small"
+                    @click="handleSentencesTime"
+                    >校对句子时间</el-button
+                  >
                 </div>
                 <div class="hotspots-top-left">
                   <label>视频</label>
@@ -478,6 +490,12 @@
                     >保存</el-button
                   >
                   <el-button
+                    type="primary"
+                    size="small"
+                    @click="handleSentenceTime(indexh, itemh.id)"
+                    >校对时间</el-button
+                  >
+                  <el-button
                     type="danger"
                     size="small"
                     @click="deletehotspots(indexh)"
@@ -491,15 +509,104 @@
       </div>
     </div>
     <el-dialog
-      :visible.sync="previewBook"
-      :show-close="false"
+      :visible.sync="editSentencesTimeFlag"
+      :show-close="true"
+      :close-on-click-modal="false"
+      :append-to-body="true"
+      width="700px"
+      title="校对句子时间"
+      v-if="editSentencesTimeFlag"
+    >
+      <table class="edit-sentences-time">
+        <tr>
+          <th style="width: 480px">句子</th>
+          <th style="width: 100px">开始时间</th>
+          <th style="width: 100px">结束时间</th>
+        </tr>
+        <tr v-for="(item, index) in editSentencesTimeData" :key="index + 'sen'">
+          <td>{{ item.text }}</td>
+          <td>
+            <input
+              v-model="item.s"
+              @change="changeTime(item, 's')"
+              type="text"
+              maxlength="200"
+              show-word-limit
+            />
+          </td>
+          <td>
+            <input
+              v-model="item.e"
+              @change="changeTime(item, 'e')"
+              type="text"
+              maxlength="200"
+              show-word-limit
+            />
+          </td>
+        </tr>
+      </table>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="editSentencesTimeFlag = false"
+          >取 消</el-button
+        >
+        <el-button
+          size="small"
+          :loading="compareloading"
+          type="primary"
+          @click="saveSentencesTime"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+    <el-dialog
+      :visible.sync="editSentenceTimeFlag"
+      :show-close="true"
       :close-on-click-modal="false"
       :append-to-body="true"
-      width="100%"
-      top="0"
-      class="login-dialog"
-      v-if="previewBook"
+      width="700px"
+      title="校对单词时间"
+      v-if="editSentenceTimeFlag"
     >
+      <table class="edit-sentences-time">
+        <tr>
+          <th style="width: 480px">单词</th>
+          <th style="width: 100px">开始时间</th>
+          <th style="width: 100px">结束时间</th>
+        </tr>
+        <tr v-for="(item, index) in editSentenceTimeData" :key="index + 'sen'">
+          <td>{{ item.w }}</td>
+          <td>
+            <input
+              v-model="item.s"
+              @change="changeTime(item, 's')"
+              type="text"
+              maxlength="200"
+              show-word-limit
+            />
+          </td>
+          <td>
+            <input
+              v-model="item.e"
+              @change="changeTime(item, 'e')"
+              type="text"
+              maxlength="200"
+              show-word-limit
+            />
+          </td>
+        </tr>
+      </table>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="editSentenceTimeFlag = false"
+          >取 消</el-button
+        >
+        <el-button
+          size="small"
+          :loading="compareloading"
+          type="primary"
+          @click="saveSentenceTime"
+          >确 定</el-button
+        >
+      </span>
     </el-dialog>
   </div>
 </template>
@@ -677,7 +784,7 @@ export default {
       issueId: "",
       drag: false,
       loading: false,
-      previewBook: false,
+      editSentencesTimeFlag: false,
       pageIds: [],
       pages: {},
       picObj: {},
@@ -697,6 +804,10 @@ export default {
       endY: 0,
       hotspotsActiveIndex: null, // 当前编辑热区索引
       genloading: false, // 字幕节点loading
+      compareloading: false, // 校对字幕节点loading
+      editSentencesTimeData: [], // 校对句子时间字幕数据
+      editSentenceTimeData: [], // 校对单条句子时间字幕数据
+      editSentenceTimeFlag: false,
     };
   },
   //计算属性 类似于data概念
@@ -1096,13 +1207,6 @@ export default {
         this.hotspotsActiveIndex = null;
       }
     },
-    // 预览栏目
-    previewBookItem() {
-      this.previewBook = true;
-    },
-    closePreview() {
-      this.previewBook = false;
-    },
     //开始拖拽事件
     onStart(val) {
       this.drag = true;
@@ -1133,6 +1237,7 @@ export default {
           this.genloading = false;
           if (res.status === 1) {
             this.$message.success("字幕生成成功");
+            this.getPicArticleInfo();
           }
         })
         .catch(() => {
@@ -1236,6 +1341,70 @@ export default {
       }
       this.savePageInfo("", "del");
     },
+    // 点击校对句子时间按钮
+    handleSentencesTime() {
+      this.compareloading = false;
+      this.editSentencesTimeData = JSON.parse(
+        JSON.stringify(this.pages[this.picActiveId].hotspots)
+      );
+      this.editSentencesTimeFlag = true;
+    },
+    changeTime(item, type) {
+      item[type] = item[type] * 1;
+    },
+    // 保存校对句子数据
+    saveSentencesTime() {
+      this.compareloading = true;
+      let MethodName =
+        "/PaperServer/Manager/PicArticleManager/UpdatePicArticleSentencesSrtTime";
+      let data = {
+        issId: this.id ? this.id : this.issueId,
+        sentences: this.editSentencesTimeData,
+      };
+      getLogin(MethodName, data)
+        .then((res) => {
+          this.compareloading = false;
+          if (res.status === 1) {
+            this.editSentencesTimeFlag = false;
+            this.getPicArticleInfo();
+          }
+        })
+        .catch(() => {
+          this.compareloading = false;
+        });
+    },
+    // 点击校对单词时间按钮
+    handleSentenceTime(index, sentId) {
+      this.compareloading = false;
+      this.editSentenceTimeData = JSON.parse(
+        JSON.stringify(this.pages[this.picActiveId].hotspots[index].tokens)
+      );
+      this.sentId = sentId;
+      this.editSentenceTimeFlag = true;
+    },
+    // 保存校对单词数据
+    saveSentenceTime() {
+      this.compareloading = true;
+      let MethodName =
+        "/PaperServer/Manager/PicArticleManager/UpdatePicArticleSentenceTokensSrtTime";
+      let data = {
+        issId: this.id ? this.id : this.issueId,
+        pageId: this.picActiveId,
+        sentId: this.sentId,
+        tokens: this.editSentenceTimeData,
+      };
+      getLogin(MethodName, data)
+        .then((res) => {
+          this.compareloading = false;
+          if (res.status === 1) {
+            this.editSentenceTimeFlag = false;
+            this.getPicArticleInfo();
+          }
+        })
+        .catch(() => {
+          this.compareloading = false;
+        });
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   async created() {
@@ -1705,6 +1874,9 @@ export default {
         }
       }
     }
+    :deep .el-button + .el-button {
+      margin-left: 0;
+    }
   }
 }
 </style>
@@ -1792,4 +1964,28 @@ export default {
     }
   }
 }
+.edit-sentences-time {
+  border-collapse: collapse;
+  tr {
+    > :nth-child(2) {
+      text-align: center;
+    }
+    > :nth-child(3) {
+      text-align: center;
+    }
+    td {
+      border: 1px solid black;
+      height: 50px;
+      word-break: break-word;
+      input {
+        border: none;
+        outline: none;
+      }
+    }
+    th {
+      height: 50px;
+      border: 1px solid black;
+    }
+  }
+}
 </style>