batchClassCard.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603
  1. <template>
  2. <div class="batchClassCard">
  3. <div class="bcc_left">
  4. <el-checkbox v-model="checked" @change="changeChecked"></el-checkbox>
  5. </div>
  6. <div class="bcc_right">
  7. <div class="bcc_r_top">
  8. <div class="bcc_r_t_left">
  9. <div class="bcc_r_t_l_image">
  10. <img
  11. v-if="['text/plain'].includes(cardData.jsonData.fileData.type)"
  12. src="../../../../assets/icon/classroomObservation/file_icon.svg"
  13. />
  14. <img
  15. v-if="['audio/wav','audio/x-m4a','audio/mpeg'].includes(cardData.jsonData.fileData.type)"
  16. src="../../../../assets/icon/classroomObservation/audio_file.svg"
  17. />
  18. <img
  19. v-if="['video/mp4'].includes(cardData.jsonData.fileData.type)"
  20. src="../../../../assets/icon/classroomObservation/videoFile_icon.svg"
  21. />
  22. </div>
  23. <div class="bcc_r_t_l_message">
  24. <div>
  25. <span>{{ cardData.jsonData.baseMessage.courseName }}</span>
  26. <img
  27. src="../../../../assets/icon/classroomObservation/table_edit.svg"
  28. @click="editBaseMessage"
  29. />
  30. </div>
  31. <span>
  32. <div>{{ cardData.create_at }}</div>
  33. <span v-if="cardData.jsonData.fileData && cardData.jsonData.fileData.duration"></span>
  34. <div v-if="cardData.jsonData.fileData && cardData.jsonData.fileData.duration">{{ cardData.jsonData.fileData.duration }}</div>
  35. </span>
  36. </div>
  37. </div>
  38. <div class="bcc_r_t_right">
  39. <span class="status_wait" v-if="cardData.status == '3'">待开始</span>
  40. <span class="status_fail" v-if="cardData.status == '4'">失败</span>
  41. <span class="status_success" v-if="cardData.status == '2'">
  42. <span style="cursor: pointer;" @click="changeShowSteps(!showSteps)">已完成</span>
  43. <div class="stepBox" v-show="showSteps">
  44. <div
  45. class="sb_item"
  46. v-for="(item, index) in cardData.jsonData.steps"
  47. :key="index"
  48. >
  49. <!-- 1完成 -->
  50. <img
  51. src="../../../../assets/icon/classroomObservation/successStatus_icon.svg"
  52. v-if="item.status=='1'"
  53. />
  54. <!-- 0等待 -->
  55. <img
  56. class="rotation"
  57. src="../../../../assets/icon/classroomObservation/waitStatus_icon.svg"
  58. v-if="item.status=='0'"
  59. />
  60. <!-- 2处理中 -->
  61. <img
  62. class="rotation"
  63. src="../../../../assets/icon/classroomObservation/isDoStatus_icon.svg"
  64. v-if="item.status=='2'"
  65. />
  66. <div>{{ item.text }}</div>
  67. <span>
  68. <span v-if="item.startTime">{{ item.startTime }}</span>
  69. <!-- <span
  70. v-if="
  71. item.status == '2' &&
  72. item.progress &&
  73. item.progress !== '0'
  74. "
  75. >{{ item.progress }}%</span> -->
  76. </span>
  77. </div>
  78. </div>
  79. </span>
  80. <span class="status_doing" v-if="cardData.status == '1'">
  81. <span style="cursor: pointer;" @click="changeShowSteps(!showSteps)">处理中</span>
  82. <div class="stepBox" v-show="showSteps">
  83. <div
  84. class="sb_item"
  85. v-for="(item, index) in cardData.jsonData.steps"
  86. :key="index"
  87. >
  88. <!-- 1完成 -->
  89. <img
  90. src="../../../../assets/icon/classroomObservation/successStatus_icon.svg"
  91. v-if="item.status=='1'"
  92. />
  93. <!-- 0等待 -->
  94. <img
  95. class="rotation"
  96. src="../../../../assets/icon/classroomObservation/waitStatus_icon.svg"
  97. v-if="item.status=='0'"
  98. />
  99. <!-- 2处理中 -->
  100. <img
  101. class="rotation"
  102. src="../../../../assets/icon/classroomObservation/isDoStatus_icon.svg"
  103. v-if="item.status=='2'"
  104. />
  105. <div>{{ item.text }}</div>
  106. <span>
  107. <span v-if="item.startTime">{{ item.startTime }}</span>
  108. <!-- <span
  109. v-if="
  110. item.status == '2' &&
  111. item.progress &&
  112. item.progress !== '0'
  113. "
  114. >{{ item.progress }}%</span
  115. > -->
  116. </span
  117. >
  118. </div>
  119. </div>
  120. </span>
  121. <span class="status_wait" v-if="cardData.status == '0'"
  122. >等待处理</span
  123. >
  124. </div>
  125. </div>
  126. <div class="bcc_r_bottom">
  127. <div class="bcc_r_b_left">
  128. <el-input
  129. placeholder="备注"
  130. v-model="cardData.remarks"
  131. @change="changeRemarks"
  132. ></el-input>
  133. </div>
  134. <div class="bcc_r_b_right">
  135. <el-button
  136. size="small"
  137. @click="goToEdit"
  138. v-if="['2'].includes(cardData.status) && cardData.jsonData.createId"
  139. >前往编辑</el-button
  140. >
  141. <el-button
  142. size="small"
  143. @click="lookReport"
  144. v-if="['2'].includes(cardData.status)"
  145. >查看报告</el-button
  146. >
  147. <el-button
  148. size="small"
  149. @click="regenerate"
  150. v-if="['2'].includes(cardData.status)"
  151. >重新生成报告</el-button
  152. >
  153. <el-button
  154. size="small"
  155. type="primary"
  156. v-if="['3', '0'].includes(cardData.status)"
  157. @click="start"
  158. >开始</el-button
  159. >
  160. <el-button
  161. size="small"
  162. v-if="['1'].includes(cardData.status)"
  163. @click="pause"
  164. >暂停</el-button
  165. >
  166. <el-button
  167. size="small"
  168. v-if="['0', '1'].includes(cardData.status)"
  169. type="danger"
  170. @click="stop"
  171. >停止</el-button
  172. >
  173. </div>
  174. </div>
  175. </div>
  176. </div>
  177. </template>
  178. <script>
  179. export default {
  180. props: {
  181. data: {
  182. type: Object,
  183. default: () => {
  184. return {};
  185. }
  186. },
  187. isSelect: {
  188. type: Boolean,
  189. default: false
  190. }
  191. },
  192. data() {
  193. return {
  194. checked: false,
  195. showSteps:false,
  196. cardData: {
  197. id: "1",
  198. name: "文件名称文件名称文件名称",
  199. create_at: "2025-05-07 16.05.03",
  200. remarks: "",
  201. status: "0",
  202. jsonData: {
  203. baseMessage: {
  204. courseName: "",
  205. teacherName: "",
  206. time: "",
  207. grade: "",
  208. subject: "",
  209. textbook: "",
  210. studentNum: 0,
  211. imageList: {
  212. fileList1: [],
  213. fileList2: [],
  214. fileList3: [],
  215. NephogramList: [],
  216. videoList: []
  217. }
  218. },
  219. tagList: [
  220. { value: 0, name: "通用课堂分析", loading: false },
  221. { value: 1, name: "学科课堂分析", loading: false },
  222. { value: 2, name: "扩展分析", loading: false }
  223. ],
  224. steps: [
  225. {
  226. type: "uploadFile",
  227. text: "上传文件",
  228. status: "0",
  229. progress: "0"
  230. },
  231. {
  232. type: "transcription",
  233. text: "文本转录",
  234. status: "0",
  235. progress: "0"
  236. },
  237. {
  238. type: "automaticCoding",
  239. text: "自动编码",
  240. status: "0",
  241. progress: "0"
  242. },
  243. {
  244. type: "generateReport",
  245. text: "生成报告",
  246. status: "0",
  247. progress: "0"
  248. }
  249. ],
  250. analysisList: [],
  251. fileData: {
  252. name: "文件名称",
  253. url: "",
  254. type: "text/plain",
  255. size: "10kb"
  256. },
  257. automaticCoding: false
  258. }
  259. }
  260. };
  261. },
  262. watch: {
  263. isSelect(newValue) {
  264. this.checked = newValue;
  265. },
  266. // checked(newValue) {
  267. // if (newValue && newValue!=this.isSelect) {
  268. // this.$emit("changeChecked", {type:0,id:this.cardData.id});
  269. // } else {
  270. // this.$emit("changeChecked", {type:1,id:this.cardData.id});
  271. // }
  272. // },
  273. data: {
  274. deep: true,
  275. handler(newValue) {
  276. if (newValue) {
  277. this.cardData = JSON.parse(JSON.stringify(newValue));
  278. this.$forceUpdate();
  279. if(newValue.status === "1"){
  280. this.showSteps = true;
  281. }else{
  282. this.showSteps = false;
  283. }
  284. }
  285. }
  286. }
  287. // cardData(newValue) {
  288. // if (JSON.stringify(this.data) != JSON.stringify(newValue)) {
  289. // this.$emit("changeData", {});
  290. // }
  291. // }
  292. },
  293. methods: {
  294. editBaseMessage() {
  295. this.$emit("editBaseMessage", this.cardData.id);
  296. },
  297. //前往编辑
  298. goToEdit() {
  299. this.$emit("goToEdit",this.cardData.id)
  300. },
  301. //查看报告
  302. lookReport() {
  303. window.topU.postMessage(
  304. {
  305. tools: "classroom_observation_board",
  306. type: this.cardData.jsonData.createId
  307. },
  308. "*"
  309. );
  310. // this.$message.info("查看报告");
  311. },
  312. //重新生成
  313. regenerate() {
  314. // this.$message.info("重新生成");
  315. this.$emit("taskBtn", { type: "regenerateTheReport", id: this.cardData.id });
  316. },
  317. changeRemarks(newValue) {
  318. if (this.data.remarks != newValue) {
  319. this.$emit("changeData", { field: ["remarks"], data: this.cardData });
  320. }
  321. },
  322. changeChecked(newValue) {
  323. if (newValue && newValue != this.isSelect) {
  324. this.$emit("changeChecked", { type: 0, id: this.cardData.id });
  325. } else {
  326. this.$emit("changeChecked", { type: 1, id: this.cardData.id });
  327. }
  328. },
  329. start() {
  330. this.$emit("taskBtn", { type: "startTask", id: this.cardData.id });
  331. },
  332. stop() {
  333. this.$emit("taskBtn", { type: "stopTask", id: this.cardData.id });
  334. },
  335. pause() {
  336. this.$emit("taskBtn", { type: "pauseTask", id: this.cardData.id });
  337. },
  338. changeShowSteps(newValue){
  339. this.showSteps = newValue;
  340. },
  341. },
  342. mounted() {
  343. if (this.data) {
  344. this.cardData = JSON.parse(JSON.stringify(this.data));
  345. }
  346. }
  347. };
  348. </script>
  349. <style scoped>
  350. .batchClassCard {
  351. width: 100%;
  352. height: 130px;
  353. margin: 20px 0;
  354. border-radius: 15px;
  355. box-sizing: border-box;
  356. border: 1px solid rgba(150, 155, 163, 0.4);
  357. padding: 20px;
  358. display: flex;
  359. align-items: center;
  360. background-color: #fff;
  361. }
  362. .bcc_left {
  363. width: 50px;
  364. height: 100%;
  365. display: flex;
  366. box-sizing: border-box;
  367. padding-left: 10px;
  368. /* justify-content: center; */
  369. align-items: center;
  370. }
  371. .bcc_right {
  372. width: calc(100% - 50px);
  373. height: 100%;
  374. display: flex;
  375. flex-direction: column;
  376. }
  377. .bcc_r_top {
  378. width: 100%;
  379. height: 60px;
  380. display: flex;
  381. align-items: center;
  382. justify-content: space-between;
  383. }
  384. .bcc_r_t_left {
  385. width: calc(100% - 100px);
  386. height: 100%;
  387. display: flex;
  388. align-items: center;
  389. }
  390. .bcc_r_t_l_image {
  391. width: 50px;
  392. height: 50px;
  393. }
  394. .bcc_r_t_l_image > img {
  395. width: 45px;
  396. height: 45px;
  397. object-fit: cover;
  398. }
  399. .bcc_r_t_right {
  400. width: 100px;
  401. height: 100%;
  402. display: flex;
  403. align-items: flex-start;
  404. justify-content: flex-end;
  405. cursor: pointer;
  406. }
  407. .bcc_r_t_right > span {
  408. font-size: 16px;
  409. display: block;
  410. position: relative;
  411. }
  412. .stepBox {
  413. width: 315px;
  414. height: auto;
  415. background-color: #fff;
  416. position: absolute;
  417. left: calc(100% + 22px);
  418. top: -21px;
  419. box-sizing: border-box;
  420. border: 1px solid #d9d9d9;
  421. border-radius: 12px;
  422. box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
  423. color: #000;
  424. padding: 10px 10px;
  425. cursor: default;
  426. }
  427. .sb_item {
  428. width: 100%;
  429. height: 25px;
  430. display: flex;
  431. align-items: center;
  432. justify-content: space-around;
  433. }
  434. .sb_item > img {
  435. width: 20px;
  436. height: 20px;
  437. }
  438. .sb_item > div {
  439. max-width: calc(100% - 20px - 140px - 15px);
  440. width: calc(100% - 20px - 35px - 15px);
  441. height: 100%;
  442. margin: 0 5px 0 10px;
  443. display: block;
  444. overflow: hidden;
  445. text-overflow: ellipsis;
  446. white-space: nowrap;
  447. line-height: 24px;
  448. }
  449. .sb_item > span {
  450. display: flex;
  451. align-items: center;
  452. justify-content: center;
  453. width: 150px;
  454. height: 100%;
  455. color: rgba(54, 129, 252, 1);
  456. }
  457. .bcc_r_t_l_message {
  458. width: 100%;
  459. height: 50px;
  460. }
  461. .bcc_r_t_l_message > div {
  462. width: 100%;
  463. height: auto;
  464. display: flex;
  465. align-items: center;
  466. }
  467. .bcc_r_t_l_message > div > span {
  468. max-width: calc(100% - 70px);
  469. text-overflow: ellipsis;
  470. overflow: hidden;
  471. white-space: nowrap;
  472. font-size: 16px;
  473. color: #000;
  474. }
  475. .bcc_r_t_l_message > div > img {
  476. width: 18px;
  477. height: 18px;
  478. margin-left: 10px;
  479. cursor: pointer;
  480. }
  481. .bcc_r_t_l_message > span {
  482. margin-top: 10px;
  483. font-size: 14px;
  484. display: flex;
  485. align-items: center;
  486. color: rgba(150, 155, 163, 1);
  487. }
  488. .bcc_r_t_l_message > span>span{
  489. width: 2px;
  490. height: 12px;
  491. display: block;
  492. background-color: #CBCBCB;
  493. margin: 0 10px;
  494. }
  495. .bcc_r_bottom {
  496. width: 100%;
  497. display: flex;
  498. align-items: center;
  499. justify-content: space-between;
  500. height: calc(100% - 60px);
  501. }
  502. .bcc_r_b_left {
  503. /* width: calc(100% - 200px); */
  504. /* width: calc(100% - 290px); */
  505. flex: 1;
  506. height: 100%;
  507. border-radius: 5px;
  508. box-sizing: border-box;
  509. border: dashed 1px rgba(150, 155, 163, 1);
  510. display: flex;
  511. align-items: center;
  512. }
  513. .bcc_r_b_left > span {
  514. display: block;
  515. width: 100%;
  516. height: 100%;
  517. line-height: 25px;
  518. }
  519. .bcc_r_b_left >>> .el-input {
  520. width: 100%;
  521. height: 100%;
  522. }
  523. .bcc_r_b_left >>> .el-input > .el-input__inner {
  524. width: 100%;
  525. height: 100%;
  526. border: none;
  527. outline: none;
  528. }
  529. .bcc_r_b_right {
  530. width: auto;
  531. padding: 0 0 0 10px;
  532. height: 100%;
  533. display: flex;
  534. align-items: center;
  535. justify-content: flex-end;
  536. }
  537. .status_success {
  538. color: rgba(188, 230, 133, 1);
  539. }
  540. .status_doing {
  541. color: rgba(54, 129, 252, 1);
  542. }
  543. .status_wait {
  544. color: rgba(150, 155, 163, 1);
  545. }
  546. .status_fail {
  547. color: rgb(185, 2, 2);
  548. }
  549. .rotation {
  550. animation: rotate 4s linear infinite;
  551. }
  552. @keyframes rotate {
  553. from {
  554. transform: rotate(0deg);
  555. }
  556. to {
  557. transform: rotate(360deg);
  558. }
  559. }
  560. </style>