index.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875
  1. <!-- -->
  2. <template>
  3. <div
  4. class="NPC-Book-Article Big-Book-Maxwidth"
  5. v-if="curQue"
  6. v-loading="loading"
  7. >
  8. <div class="adult-book-input-item">
  9. <span class="adult-book-lable">序号:</span>           
  10. <el-input
  11. style="width: 300px"
  12. placeholder="请输入序号"
  13. v-model="curQue.title"
  14. @blur="onBlur(curQue, 'number')"
  15. class="adult-book-input"
  16. maxlength="200"
  17. show-word-limit
  18. ></el-input>
  19. </div>
  20. <div class="Big-Book-img">
  21. <UploadArt
  22. :change-fill-id="changeImage"
  23. :datafile-list="fileCon.img_list"
  24. upload-type="image"
  25. class="article_pdf"
  26. :filleNumber="imageNumber"
  27. />
  28. <ul
  29. class="uploadArt_list"
  30. v-if="curQue.img_list && curQue.img_list.length > 0"
  31. >
  32. <li
  33. v-for="(artItem, artIndex) in curQue.img_list"
  34. :key="'articleImgList' + artIndex"
  35. >
  36. <img :src="artItem.url" style="width: 26px" />
  37. <span class="art_name">{{ artItem.name }}</span>
  38. <p>
  39. 图片放到第<el-input
  40. class="imgNumber"
  41. type="number"
  42. v-model="artItem.imgNumber"
  43. size="mini"
  44. @input="forceUpdate"
  45. maxlength="2"
  46. show-word-limit
  47. ></el-input
  48. >段落的后面
  49. </p>
  50. <img
  51. src="@/assets/adult/del-close.png"
  52. class="del-close"
  53. @click="delImage(artIndex)"
  54. />
  55. </li>
  56. </ul>
  57. </div>
  58. <div class="Big-Book-mp3">
  59. <Upload
  60. type="mp3"
  61. :changeFillId="changeMp3"
  62. :datafileList="fileCon.mp3_list"
  63. :filleNumber="mp3Number"
  64. :uploadType="'mp3'"
  65. :handleMp3Base64="handleChange"
  66. />
  67. </div>
  68. <div class="adult-book-input-item">
  69. <span class="adult-book-lable">功能配置:</span>
  70. <div class="adult-book-main" v-if="curQue.checkList">
  71. <el-checkbox-group v-model="curQue.checkList">
  72. <el-checkbox :label="1">显示生词功能</el-checkbox>
  73. <el-checkbox :label="2">语音练习模式</el-checkbox>
  74. <el-checkbox :label="3">取词功能</el-checkbox>
  75. </el-checkbox-group>
  76. </div>
  77. </div>
  78. <div class="adult-book-input-item">
  79. <span class="adult-book-lable">文章提示:</span>
  80. <el-input
  81. class="adult-book-input"
  82. type="textarea"
  83. :autosize="{ minRows: 2 }"
  84. placeholder="请输入文章提示"
  85. v-model="curQue.notice"
  86. @blur="onBlur(curQue, 'notice')"
  87. maxlength="200"
  88. show-word-limit
  89. ></el-input>
  90. </div>
  91. <div class="NPC-Book-role">
  92. <ul class="adult-book-input-role" v-if="curQue.roleList.length > 0">
  93. <li
  94. v-for="(rItem, rIndex) in curQue.roleList"
  95. :key="'roleList' + rIndex"
  96. >
  97. <div class="rItem" @click="editRole(rItem)">
  98. <span v-if="rItem.role" class="adult-book-input-roleText">{{
  99. rItem.role
  100. }}</span>
  101. <img
  102. v-else-if="rItem.img_list.length>0"
  103. :src="rItem.img_list[0] && rItem.img_list[0].url"
  104. class="adult-book-input-roleImg"
  105. />
  106. <img
  107. v-else-if="rItem.simpleHead!==''"
  108. :src="require('../../../../assets/NPC/simple'+(rItem.simpleHead+1)+'.png')"
  109. class="adult-book-input-roleImg"
  110. />
  111. <template v-if="rItem.detail.wordsList.length > 0">
  112. <span class="pinyin">{{
  113. rItem.detail.wordsList | handlePinyin
  114. }}</span>
  115. <span class="chs">{{ rItem.detail.wordsList | handleChs }}</span>
  116. </template>
  117. </div>
  118. <i class="el-icon-circle-close" @click="delRole(rIndex)"></i>
  119. </li>
  120. </ul>
  121. <el-button type="primary" @click="addRole">添加角色</el-button>
  122. </div>
  123. <div class="NPC-Book-article">
  124. <ArticleChs
  125. :curQue="curQue"
  126. :isPara="isPara"
  127. :changeIsPara="changeIsPara"
  128. />
  129. </div>
  130. <template
  131. v-if="
  132. curQue.mp3_list &&
  133. curQue.mp3_list.length > 0 &&
  134. curQue.mp3_list[0].source
  135. "
  136. >
  137. <div class="create_mp3_list">
  138. <span>引擎音频:</span>
  139. <span class="mp3_file_name">{{ curQue.mp3_list[0].name }}</span>
  140. <img
  141. src="../../../../assets/adult/del-close.png"
  142. class="mp3_del"
  143. @click="delMp3"
  144. />
  145. </div>
  146. </template>
  147. <template v-else>
  148. <el-button :loading="CreadMp3loading" size="small" @click="CreadMp3"
  149. >生成音频</el-button
  150. >
  151. </template>
  152. <div class="NPC-Book-Paragraph" v-if="isPara">
  153. <Paragraph :curQue="curQue" :isClause="isClause" :sureSeg="sureSeg" />
  154. </div>
  155. <div class="NPC-Book-model">
  156. <span class="adult-book-input-lable">拼音位置:</span>
  157. <el-radio-group v-model="curQue.pyPosition">
  158. <el-radio :label="'top'">字上面</el-radio>
  159. <el-radio :label="'bottom'">字下面</el-radio>
  160. </el-radio-group>
  161. </div>
  162. <!---上传rlc文件-->
  163. <!-- <div class="NPC-Book-Paragraph" v-if="isClause">
  164. <el-button
  165. type="warning"
  166. size="small"
  167. @click="uploadLRC"
  168. v-if="curQue.detail[0].timeList.length == 0"
  169. >上传lrc文件</el-button
  170. >
  171. <div v-else class="lrc-box">
  172. <span>已有字幕时间节点</span>
  173. <el-button type="text" @click="editTimeList">去编辑</el-button>
  174. </div>
  175. </div> -->
  176. <!---分句-->
  177. <div class="NPC-Book-Paragraph" v-if="isClause">
  178. <Clauseresult :curQue="curQue" :segByWord="segByWord" />
  179. </div>
  180. <div class="lrc-box">
  181. <div
  182. v-if="this.curQue.wordTime && this.curQue.wordTime.length > 0"
  183. class="lrc-box"
  184. >
  185. <span>已有字幕时间节点</span>
  186. <el-button type="text" @click="againWordTime">重新生成</el-button>
  187. <el-button @click="compareTime('句子')" size="medium"
  188. >校对句子字幕时间</el-button
  189. >
  190. <el-button @click="compareTime('文字')" size="medium"
  191. >校对文字字幕时间</el-button
  192. >
  193. </div>
  194. <template v-else>
  195. <el-button v-if="!isWordTime" size="medium" @click="createWordTime"
  196. >自动生成字幕节点</el-button
  197. >
  198. <p v-else>字幕节点生成中...请等待</p>
  199. </template>
  200. </div>
  201. <!---分词-->
  202. <div class="NPC-Book-Word" v-if="isByWord">
  203. <Segbyword :curQue="curQue" :paraIndex="paraIndex" :segList="segList" />
  204. </div>
  205. <el-dialog title="段落分句字幕打点" :visible.sync="cTVisible" width="30%">
  206. <Createtimelist ref="createtimelist" :curQue="curQue" />
  207. <span slot="footer" class="dialog-footer">
  208. <el-button @click="cTVisible = false">取 消</el-button>
  209. <el-button type="primary" @click="saveTimeList">保 存</el-button>
  210. </span>
  211. </el-dialog>
  212. <el-dialog
  213. :title="roleStatus == 1 ? '添加角色' : '编辑角色'"
  214. :visible.sync="roleVisible"
  215. width="60%"
  216. >
  217. <template v-if="roleStatus == 1">
  218. <RoleChs
  219. ref="createRolelist"
  220. :curRole="curQue.roleList[curQue.roleList.length - 1]"
  221. v-if="curQue.roleList[curQue.roleList.length - 1]"
  222. />
  223. </template>
  224. <template v-else>
  225. <RoleChs ref="createRolelist" :curRole="curRole" v-if="curRole" />
  226. </template>
  227. <span slot="footer" class="dialog-footer">
  228. <el-button @click="roleVisible = false">取 消</el-button>
  229. <el-button type="primary" @click="saveRoleList">保 存</el-button>
  230. </span>
  231. </el-dialog>
  232. <el-dialog
  233. title="校对字幕时间"
  234. :visible.sync="compareShow"
  235. width="50%"
  236. :before-close="handleClose"
  237. top="0"
  238. >
  239. <CompareTime
  240. :data="compareData"
  241. :type="compareType"
  242. :changewordsResultList="changewordsResultList"
  243. />
  244. <span slot="footer" class="dialog-footer">
  245. <el-button @click="handleClose">取 消</el-button>
  246. <el-button :loading="compareloading" type="primary" @click="saveCompare"
  247. >确 定</el-button
  248. >
  249. </span>
  250. </el-dialog>
  251. </div>
  252. </template>
  253. <script>
  254. import {
  255. segSentences,
  256. BatchSegContent,
  257. prepareTranscribe,
  258. getWordTime,
  259. compareSenTenceTime,
  260. getContentFile,
  261. textCreadMp3,
  262. } from "@/api/ajax";
  263. const Base64 = require("js-base64").Base64;
  264. import Upload from "../../common/Upload.vue";
  265. import UploadArt from "../../common/UploadArt.vue";
  266. import ArticleChs from "./components/ArticleChs.vue";
  267. import Paragraph from "./components/ParagraphChs.vue";
  268. import Clauseresult from "./components/ClauseresultChs.vue";
  269. import Segbyword from "./components/SegbywordChs.vue";
  270. import Createtimelist from "./components/CreatetimelistChs.vue";
  271. import RoleChs from "./components/RoleChs.vue";
  272. import CompareTime from "../ArticleTemChs/components/CompareTime.vue";
  273. export default {
  274. name: "DialogueAnswerChs",
  275. components: {
  276. Upload,
  277. UploadArt,
  278. ArticleChs,
  279. Paragraph,
  280. Clauseresult,
  281. Segbyword,
  282. Createtimelist,
  283. RoleChs,
  284. CompareTime,
  285. },
  286. props: ["curQue", "changeCurQue", "tmIndex"],
  287. filters: {
  288. handlePinyin(wordsList) {
  289. let str = "";
  290. wordsList.forEach((item, index) => {
  291. if (index < wordsList.length - 1) {
  292. str += item.pinyin + " ";
  293. } else {
  294. str += item.pinyin;
  295. }
  296. });
  297. return str;
  298. },
  299. handleChs(wordsList) {
  300. let str = "";
  301. wordsList.forEach((item, index) => {
  302. if (index < wordsList.length - 1) {
  303. str += item.chs + " ";
  304. } else {
  305. str += item.chs;
  306. }
  307. });
  308. return str;
  309. },
  310. },
  311. data() {
  312. return {
  313. imageNumber: 1000,
  314. mp3Number: 1,
  315. fileCon: {
  316. img_list: [],
  317. mp3_list: [],
  318. },
  319. isPara: false,
  320. isClause: false,
  321. isByWord: false,
  322. paraIndex: 0, //段落索引
  323. cTVisible: false,
  324. roleVisible: false,
  325. roleStatus: 1, //1添加;2是编辑
  326. curRole: null,
  327. loading: false,
  328. segList: null,
  329. data_structure: {
  330. type: "dialogue_article_chs",
  331. name: "课文",
  332. model: 1,
  333. pyPosition: "top", //top 拼音在上面;bottom 拼音在下面
  334. notice: "", //文章提示信息
  335. mp3_list: [],
  336. img_list: [],
  337. article: "",
  338. roleList: [],
  339. detail: [],
  340. wordTime: [],
  341. taskId: "",
  342. checkList: [1, 2, 3],
  343. },
  344. isWordTime: false,
  345. compareType: "", //校对类型
  346. compareShow: false,
  347. compareData: null,
  348. compareloading: false,
  349. CreadMp3loading: false,
  350. };
  351. },
  352. computed: {},
  353. watch: {},
  354. //方法集合
  355. methods: {
  356. // 得到文件流
  357. getfillLiu() {
  358. this.loading = true;
  359. let _this = this;
  360. return new Promise(function (resolve, reject) {
  361. if (
  362. _this.curQue.mp3_list &&
  363. _this.curQue.mp3_list.length > 0 &&
  364. _this.curQue.mp3_list[0].id
  365. ) {
  366. let Mname = "file_store_manager-GetFileByteBase64Text";
  367. let id = _this.curQue.mp3_list[0].id
  368. .replace("[FID##", "")
  369. .replace("##FID]", "");
  370. let data = {
  371. file_id: id,
  372. };
  373. getContentFile(Mname, data).then((res) => {
  374. let taskIddata = {
  375. fileName: _this.curQue.mp3_list[0].name,
  376. speechBase64: res.base64_text,
  377. language: "ch",
  378. };
  379. prepareTranscribe(taskIddata).then((res) => {
  380. _this.$set(_this.curQue, "taskId", res.data.taskId);
  381. _this.loading = false;
  382. resolve();
  383. });
  384. });
  385. } else {
  386. _this.$message.warning("请先上传音频");
  387. }
  388. });
  389. },
  390. // 根据文章生成MP3
  391. CreadMp3() {
  392. let _this = this;
  393. if (_this.curQue.mp3_list.length > 0) {
  394. _this.$message.warning("已有音频,请勿重复生成");
  395. return;
  396. }
  397. if (!_this.curQue.article) {
  398. _this.$message.warning("请先输入内容,在生成音频");
  399. return;
  400. }
  401. _this.CreadMp3loading = true;
  402. textCreadMp3({
  403. text: _this.curQue.article,
  404. }).then((res) => {
  405. res.data.fileInfo.id = "[FID##" + res.data.fileInfo.file_id + "##FID]";
  406. res.data.fileInfo.name = res.data.fileInfo.file_name;
  407. let fileList = [res.data.fileInfo];
  408. _this.$set(_this.curQue, "mp3_list", fileList);
  409. _this.CreadMp3loading = false;
  410. _this.$message.success("生成成功");
  411. });
  412. },
  413. //删除生成的mp3
  414. delMp3() {
  415. this.$confirm("确定要删除吗?", "提示", {
  416. confirmButtonText: "确定",
  417. cancelButtonText: "取消",
  418. type: "warning",
  419. })
  420. .then(() => {
  421. this.curQue.mp3_list.splice(0, 1);
  422. })
  423. },
  424. // 保存校对
  425. saveCompare() {
  426. this.compareloading = true;
  427. console.log(this.compareData);
  428. compareSenTenceTime({ matchList: JSON.stringify(this.compareData) }).then(
  429. (res) => {
  430. console.log(res);
  431. this.compareloading = false;
  432. this.curQue.wordTime = res.data.result;
  433. console.log(this.curQue.wordTime);
  434. }
  435. );
  436. },
  437. // 校对时间
  438. compareTime(type) {
  439. this.compareType = type;
  440. this.compareData = JSON.parse(JSON.stringify(this.curQue.wordTime));
  441. this.compareShow = true;
  442. },
  443. handleClose() {
  444. this.compareShow = false;
  445. this.compareData = null;
  446. this.compareType = "";
  447. },
  448. // 校对每个字的时间
  449. changewordsResultList(index, item) {
  450. this.curQue.wordTime[index].wordsResultList = JSON.parse(
  451. JSON.stringify(item)
  452. );
  453. },
  454. onBlur(item, field) {
  455. item[field] = item[field] ? item[field].trim() : "";
  456. },
  457. changeMp3(fileList) {
  458. const articleImgList = JSON.parse(JSON.stringify(fileList));
  459. const articleImgRes = [];
  460. articleImgList.forEach((item) => {
  461. if (item.response) {
  462. const obj = {
  463. name: item.name,
  464. duration: item.response.file_info_list[0].media_duration,
  465. url: item.response.file_info_list[0].file_url,
  466. id: "[FID##" + item.response.file_info_list[0].file_id + "##FID]",
  467. media_duration: item.response.file_info_list[0].media_duration, //音频时长
  468. };
  469. articleImgRes.push(obj);
  470. }
  471. });
  472. this.curQue.mp3_list = JSON.parse(JSON.stringify(articleImgRes));
  473. },
  474. changeImage(file) {
  475. console.log(file);
  476. if (file.response) {
  477. const obj = {
  478. name: file.name,
  479. url: file.response.file_info_list[0].file_url,
  480. id: "[FID##" + file.response.file_info_list[0].file_id + "##FID]",
  481. imgNumber: 0,
  482. };
  483. this.curQue.img_list.push(obj);
  484. this.$forceUpdate();
  485. }
  486. },
  487. forceUpdate() {
  488. this.$forceUpdate();
  489. },
  490. delImage(index) {
  491. this.curQue.img_list.splice(index, 1);
  492. this.fileCon.img_list.splice(index, 1);
  493. },
  494. //添加角色
  495. addRole() {
  496. this.roleVisible = true;
  497. this.roleStatus = 1;
  498. let id = Math.random().toString(36).substr(2);
  499. let roleCon = {
  500. id: id,
  501. role: "",
  502. img_list: [],
  503. detail: {
  504. fullName: "",
  505. seg_words: "",
  506. wordsList: [],
  507. },
  508. simpleHead: ""
  509. };
  510. this.curQue.roleList.push(JSON.parse(JSON.stringify(roleCon)));
  511. },
  512. //保存角色
  513. saveRoleList() {
  514. this.roleVisible = false;
  515. this.$message.success("保存成功!");
  516. console.log(this.curQue);
  517. },
  518. //删除角色
  519. delRole(index) {
  520. this.curQue.roleList.splice(index, 1);
  521. },
  522. //点击角色
  523. editRole(item) {
  524. this.roleVisible = true;
  525. this.roleStatus = 2;
  526. this.curRole = item;
  527. },
  528. changeIsPara() {
  529. this.isPara = true;
  530. },
  531. //生成分句
  532. sureSeg() {
  533. let detail = JSON.parse(JSON.stringify(this.curQue.detail));
  534. let leg = detail.length;
  535. let flag = false;
  536. for (let i = 0; i < leg; i++) {
  537. if (!detail[i].para) {
  538. flag = true;
  539. break;
  540. }
  541. }
  542. if (!flag) {
  543. let textList = [];
  544. detail.forEach((item) => {
  545. let str = Base64.encode(item.para);
  546. textList.push(str);
  547. });
  548. this.loading = true;
  549. let data = {
  550. textList: textList,
  551. };
  552. segSentences(data).then((res) => {
  553. this.loading = false;
  554. let result = res.data.result;
  555. result.forEach((item, index) => {
  556. this.$set(this.curQue.detail[index], "sentences", item);
  557. for (let i = 0; i < item.length; i++) {
  558. this.curQue.detail[index].sentencesEn.push("");
  559. }
  560. });
  561. this.isClause = true;
  562. });
  563. } else {
  564. this.$message.warning("段落不能为空");
  565. }
  566. },
  567. changeIsClause(isClause) {
  568. this.isClause = isClause;
  569. },
  570. //生成分词
  571. segByWord(sentences, paraIndex) {
  572. console.log(sentences);
  573. this.loading = true;
  574. let textList = [];
  575. sentences.forEach((item) => {
  576. let str = Base64.encode(item);
  577. textList.push(str);
  578. });
  579. let data = {
  580. textList: textList,
  581. };
  582. BatchSegContent(data).then((res) => {
  583. this.loading = false;
  584. let list = res.data.result.list;
  585. this.$set(this.curQue.detail[paraIndex], "segList", list);
  586. console.log(this.curQue);
  587. this.segList = list;
  588. this.isByWord = true;
  589. this.paraIndex = paraIndex;
  590. });
  591. },
  592. // 上传音频文件
  593. handleChange(file, fileList) {
  594. let _this = this;
  595. _this.getBase64(file.raw).then((res) => {
  596. let base_res = res.split("base64,");
  597. let data = {
  598. fileName: file.raw.name,
  599. speechBase64: base_res[1],
  600. language: "ch",
  601. };
  602. prepareTranscribe(data).then((reses) => {
  603. _this.$set(_this.curQue, "taskId", reses.data.taskId);
  604. });
  605. });
  606. },
  607. getBase64(file) {
  608. return new Promise(function (resolve, reject) {
  609. let reader = new FileReader();
  610. let imgResult = "";
  611. reader.readAsDataURL(file);
  612. reader.onload = function () {
  613. imgResult = reader.result;
  614. };
  615. reader.onerror = function (error) {
  616. reject(error);
  617. };
  618. reader.onloadend = function () {
  619. resolve(imgResult);
  620. };
  621. });
  622. },
  623. createWordTime() {
  624. this.getfillLiu().then(() => {
  625. if (this.curQue.taskId) {
  626. let verseList = [];
  627. this.curQue.detail.forEach((item) => {
  628. verseList = verseList.concat(item.sentences);
  629. });
  630. console.log(verseList);
  631. if (verseList.length > 0) {
  632. this.isWordTime = true;
  633. let data = {
  634. taskId: this.curQue.taskId,
  635. verseList: JSON.stringify(verseList),
  636. matchType: "chinese",
  637. language: "ch",
  638. };
  639. getWordTime(data).then((res) => {
  640. this.curQue.wordTime = res.data.result;
  641. this.isWordTime = false;
  642. });
  643. }
  644. } else {
  645. this.$message.warning("请先上传音频");
  646. }
  647. });
  648. },
  649. againWordTime() {
  650. this.isWordTime = false;
  651. this.$set(this.curQue, "wordTime", []);
  652. },
  653. uploadLRC() {
  654. this.cTVisible = true;
  655. },
  656. //保存字幕节点
  657. saveTimeList() {
  658. this.cTVisible = false;
  659. let detail = JSON.parse(JSON.stringify(this.$refs.createtimelist.detail));
  660. let detailRes = detail.map((item) => {
  661. let timeList = item.time_str.split("\n");
  662. item.timeList = this.handleTimeReg(timeList);
  663. return item;
  664. });
  665. this.curQue.detail = JSON.parse(JSON.stringify(detailRes));
  666. console.log(this.curQue.detail);
  667. },
  668. handleTimeReg(list) {
  669. list = list.map((item) => {
  670. let regArr = item.split("]");
  671. let reg = regArr[0];
  672. item = reg.replace("[", "");
  673. return item;
  674. });
  675. return list;
  676. },
  677. //点击字幕节点
  678. editTimeList() {
  679. this.cTVisible = true;
  680. },
  681. initCurQueData() {
  682. let res_data = JSON.parse(JSON.stringify(this.data_structure));
  683. this.changeCurQue(res_data);
  684. },
  685. },
  686. //生命周期 - 创建完成(可以访问当前this实例)
  687. created() {},
  688. //生命周期 - 挂载完成(可以访问DOM元素)
  689. mounted() {
  690. console.log("文章保存");
  691. console.log(this.curQue);
  692. if (this.curQue) {
  693. if (!this.curQue.taskId) {
  694. this.curQue.taskId = "";
  695. }
  696. if (!this.curQue.notice) {
  697. this.curQue.notice = "";
  698. }
  699. if (!this.curQue.checkList) {
  700. this.$set(this.curQue, "checkList", [1, 2, 3]);
  701. }
  702. if (this.curQue.detail && this.curQue.detail.length > 0) {
  703. if (this.curQue.detail[0].para) {
  704. this.isPara = true;
  705. }
  706. if (this.curQue.detail[0].sentences.length > 0) {
  707. this.isClause = true;
  708. }
  709. if (this.curQue.detail[0].seg_words.length > 0) {
  710. this.isByWord = true;
  711. }
  712. }
  713. if (!this.curQue.sentencesEn) {
  714. this.curQue.sentencesEn = [];
  715. }
  716. if (!this.curQue.img_list) {
  717. this.curQue.img_list = [];
  718. }
  719. if (!this.curQue.mp3_list) {
  720. this.curQue.mp3_list = [];
  721. }
  722. this.fileCon.img_list = JSON.parse(JSON.stringify(this.curQue.img_list));
  723. let mp3_list = JSON.parse(JSON.stringify(this.curQue.mp3_list));
  724. this.fileCon.mp3_list = mp3_list.filter((item) => item.source !== "tts");
  725. } else {
  726. this.initCurQueData();
  727. }
  728. },
  729. beforeCreate() {}, //生命周期 - 创建之前
  730. beforeMount() {}, //生命周期 - 挂载之前
  731. beforeUpdate() {}, //生命周期 - 更新之前
  732. updated() {}, //生命周期 - 更新之后
  733. beforeDestroy() {}, //生命周期 - 销毁之前
  734. destroyed() {}, //生命周期 - 销毁完成
  735. activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
  736. };
  737. </script>
  738. <style lang='scss' scoped>
  739. //@import url(); 引入公共css类
  740. .create_mp3_list {
  741. display: flex;
  742. justify-content: flex-start;
  743. align-items: center;
  744. > span {
  745. font-size: 16px;
  746. font-weight: bold;
  747. margin-right: 10px;
  748. }
  749. > img {
  750. width: 24px;
  751. height: 24px;
  752. cursor: pointer;
  753. }
  754. }
  755. p {
  756. margin: 0;
  757. padding: 0;
  758. }
  759. .adult-book-input-role {
  760. clear: both;
  761. overflow: hidden;
  762. > li {
  763. float: left;
  764. display: flex;
  765. justify-content: flex-start;
  766. align-items: center;
  767. padding: 4px 8px;
  768. border: 1px #a7a7a7 solid;
  769. border-radius: 8px;
  770. margin: 0 10px 10px 0px;
  771. .rItem {
  772. display: flex;
  773. justify-content: flex-start;
  774. align-items: center;
  775. .adult-book-input {
  776. &-roleText {
  777. width: 40px;
  778. height: 40px;
  779. background: #a7a7a7;
  780. border-radius: 100%;
  781. text-align: center;
  782. line-height: 40px;
  783. }
  784. &-roleImg {
  785. width: 40px;
  786. height: 40px;
  787. }
  788. }
  789. .pinyin {
  790. font-family: "GB-PINYINOK-B";
  791. font-size: 14px;
  792. line-height: 22px;
  793. color: rgba(0, 0, 0, 0.85);
  794. margin-right: 8px;
  795. margin-left: 8px;
  796. }
  797. .chs {
  798. font-family: "FZJCGFKTK";
  799. font-size: 16px;
  800. line-height: 24px;
  801. color: #000000;
  802. margin-right: 16px;
  803. }
  804. }
  805. > i {
  806. cursor: pointer;
  807. }
  808. }
  809. }
  810. .uploadArt_list {
  811. border: 1px #ccc solid;
  812. border-bottom: 0;
  813. margin-top: 10px;
  814. > li {
  815. display: flex;
  816. justify-content: flex-start;
  817. align-items: center;
  818. border-bottom: 1px #ccc solid;
  819. > span {
  820. width: 320px;
  821. word-wrap: break-word;
  822. font-size: 14px;
  823. color: rgb(112, 110, 110);
  824. border-right: 1px #ccc solid;
  825. padding: 5px 10px;
  826. }
  827. > p {
  828. flex: 1;
  829. padding: 5px 10px;
  830. }
  831. .imgNumber {
  832. width: 80px;
  833. }
  834. .del-close {
  835. width: 24px;
  836. height: 24px;
  837. cursor: pointer;
  838. margin-right: 10px;
  839. }
  840. }
  841. }
  842. .NPC-Book-Article {
  843. > div {
  844. margin-bottom: 20px;
  845. }
  846. }
  847. .NPC-Book-model {
  848. display: flex;
  849. justify-content: flex-start;
  850. align-items: center;
  851. > span {
  852. margin: 0;
  853. }
  854. }
  855. .lrc-box {
  856. display: flex;
  857. justify-content: flex-start;
  858. align-items: center;
  859. > span {
  860. font-size: 14px;
  861. margin-right: 16px;
  862. }
  863. }
  864. </style>