123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603 |
- <template>
- <div class="batchClassCard">
- <div class="bcc_left">
- <el-checkbox v-model="checked" @change="changeChecked"></el-checkbox>
- </div>
- <div class="bcc_right">
- <div class="bcc_r_top">
- <div class="bcc_r_t_left">
- <div class="bcc_r_t_l_image">
- <img
- v-if="['text/plain'].includes(cardData.jsonData.fileData.type)"
- src="../../../../assets/icon/classroomObservation/file_icon.svg"
- />
- <img
- v-if="['audio/wav','audio/x-m4a','audio/mpeg'].includes(cardData.jsonData.fileData.type)"
- src="../../../../assets/icon/classroomObservation/audio_file.svg"
- />
- <img
- v-if="['video/mp4'].includes(cardData.jsonData.fileData.type)"
- src="../../../../assets/icon/classroomObservation/videoFile_icon.svg"
- />
- </div>
- <div class="bcc_r_t_l_message">
- <div>
- <span>{{ cardData.jsonData.baseMessage.courseName }}</span>
- <img
- src="../../../../assets/icon/classroomObservation/table_edit.svg"
- @click="editBaseMessage"
- />
- </div>
- <span>
- <div>{{ cardData.create_at }}</div>
- <span v-if="cardData.jsonData.fileData && cardData.jsonData.fileData.duration"></span>
- <div v-if="cardData.jsonData.fileData && cardData.jsonData.fileData.duration">{{ cardData.jsonData.fileData.duration }}</div>
- </span>
- </div>
- </div>
- <div class="bcc_r_t_right">
- <span class="status_wait" v-if="cardData.status == '3'">待开始</span>
- <span class="status_fail" v-if="cardData.status == '4'">失败</span>
- <span class="status_success" v-if="cardData.status == '2'">
- <span style="cursor: pointer;" @click="changeShowSteps(!showSteps)">已完成</span>
- <div class="stepBox" v-show="showSteps">
- <div
- class="sb_item"
- v-for="(item, index) in cardData.jsonData.steps"
- :key="index"
- >
- <!-- 1完成 -->
- <img
- src="../../../../assets/icon/classroomObservation/successStatus_icon.svg"
- v-if="item.status=='1'"
- />
- <!-- 0等待 -->
- <img
- class="rotation"
- src="../../../../assets/icon/classroomObservation/waitStatus_icon.svg"
- v-if="item.status=='0'"
- />
- <!-- 2处理中 -->
- <img
- class="rotation"
- src="../../../../assets/icon/classroomObservation/isDoStatus_icon.svg"
- v-if="item.status=='2'"
- />
- <div>{{ item.text }}</div>
- <span>
- <span v-if="item.startTime">{{ item.startTime }}</span>
- <!-- <span
- v-if="
- item.status == '2' &&
- item.progress &&
- item.progress !== '0'
- "
- >{{ item.progress }}%</span> -->
- </span>
- </div>
- </div>
- </span>
- <span class="status_doing" v-if="cardData.status == '1'">
- <span style="cursor: pointer;" @click="changeShowSteps(!showSteps)">处理中</span>
- <div class="stepBox" v-show="showSteps">
- <div
- class="sb_item"
- v-for="(item, index) in cardData.jsonData.steps"
- :key="index"
- >
- <!-- 1完成 -->
- <img
- src="../../../../assets/icon/classroomObservation/successStatus_icon.svg"
- v-if="item.status=='1'"
- />
- <!-- 0等待 -->
- <img
- class="rotation"
- src="../../../../assets/icon/classroomObservation/waitStatus_icon.svg"
- v-if="item.status=='0'"
- />
- <!-- 2处理中 -->
- <img
- class="rotation"
- src="../../../../assets/icon/classroomObservation/isDoStatus_icon.svg"
- v-if="item.status=='2'"
- />
- <div>{{ item.text }}</div>
- <span>
- <span v-if="item.startTime">{{ item.startTime }}</span>
- <!-- <span
- v-if="
- item.status == '2' &&
- item.progress &&
- item.progress !== '0'
- "
- >{{ item.progress }}%</span
- > -->
- </span
- >
- </div>
- </div>
- </span>
- <span class="status_wait" v-if="cardData.status == '0'"
- >等待处理</span
- >
- </div>
- </div>
- <div class="bcc_r_bottom">
- <div class="bcc_r_b_left">
- <el-input
- placeholder="备注"
- v-model="cardData.remarks"
- @change="changeRemarks"
- ></el-input>
- </div>
- <div class="bcc_r_b_right">
- <el-button
- size="small"
- @click="goToEdit"
- v-if="['2'].includes(cardData.status) && cardData.jsonData.createId"
- >前往编辑</el-button
- >
- <el-button
- size="small"
- @click="lookReport"
- v-if="['2'].includes(cardData.status)"
- >查看报告</el-button
- >
- <el-button
- size="small"
- @click="regenerate"
- v-if="['2'].includes(cardData.status)"
- >重新生成报告</el-button
- >
- <el-button
- size="small"
- type="primary"
- v-if="['3', '0'].includes(cardData.status)"
- @click="start"
- >开始</el-button
- >
- <el-button
- size="small"
- v-if="['1'].includes(cardData.status)"
- @click="pause"
- >暂停</el-button
- >
- <el-button
- size="small"
- v-if="['0', '1'].includes(cardData.status)"
- type="danger"
- @click="stop"
- >停止</el-button
- >
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- export default {
- props: {
- data: {
- type: Object,
- default: () => {
- return {};
- }
- },
- isSelect: {
- type: Boolean,
- default: false
- }
- },
- data() {
- return {
- checked: false,
- showSteps:false,
- cardData: {
- id: "1",
- name: "文件名称文件名称文件名称",
- create_at: "2025-05-07 16.05.03",
- remarks: "",
- status: "0",
- jsonData: {
- baseMessage: {
- courseName: "",
- teacherName: "",
- time: "",
- grade: "",
- subject: "",
- textbook: "",
- studentNum: 0,
- imageList: {
- fileList1: [],
- fileList2: [],
- fileList3: [],
- NephogramList: [],
- videoList: []
- }
- },
- tagList: [
- { value: 0, name: "通用课堂分析", loading: false },
- { value: 1, name: "学科课堂分析", loading: false },
- { value: 2, name: "扩展分析", loading: false }
- ],
- steps: [
- {
- type: "uploadFile",
- text: "上传文件",
- status: "0",
- progress: "0"
- },
- {
- type: "transcription",
- text: "文本转录",
- status: "0",
- progress: "0"
- },
- {
- type: "automaticCoding",
- text: "自动编码",
- status: "0",
- progress: "0"
- },
- {
- type: "generateReport",
- text: "生成报告",
- status: "0",
- progress: "0"
- }
- ],
- analysisList: [],
- fileData: {
- name: "文件名称",
- url: "",
- type: "text/plain",
- size: "10kb"
- },
- automaticCoding: false
- }
- }
- };
- },
- watch: {
- isSelect(newValue) {
- this.checked = newValue;
- },
- // checked(newValue) {
- // if (newValue && newValue!=this.isSelect) {
- // this.$emit("changeChecked", {type:0,id:this.cardData.id});
- // } else {
- // this.$emit("changeChecked", {type:1,id:this.cardData.id});
- // }
- // },
- data: {
- deep: true,
- handler(newValue) {
- if (newValue) {
- this.cardData = JSON.parse(JSON.stringify(newValue));
- this.$forceUpdate();
- if(newValue.status === "1"){
- this.showSteps = true;
- }else{
- this.showSteps = false;
- }
- }
- }
- }
- // cardData(newValue) {
- // if (JSON.stringify(this.data) != JSON.stringify(newValue)) {
- // this.$emit("changeData", {});
- // }
- // }
- },
- methods: {
- editBaseMessage() {
- this.$emit("editBaseMessage", this.cardData.id);
- },
- //前往编辑
- goToEdit() {
- this.$emit("goToEdit",this.cardData.id)
- },
- //查看报告
- lookReport() {
- window.topU.postMessage(
- {
- tools: "classroom_observation_board",
- type: this.cardData.jsonData.createId
- },
- "*"
- );
- // this.$message.info("查看报告");
- },
- //重新生成
- regenerate() {
- // this.$message.info("重新生成");
- this.$emit("taskBtn", { type: "regenerateTheReport", id: this.cardData.id });
- },
- changeRemarks(newValue) {
- if (this.data.remarks != newValue) {
- this.$emit("changeData", { field: ["remarks"], data: this.cardData });
- }
- },
- changeChecked(newValue) {
- if (newValue && newValue != this.isSelect) {
- this.$emit("changeChecked", { type: 0, id: this.cardData.id });
- } else {
- this.$emit("changeChecked", { type: 1, id: this.cardData.id });
- }
- },
- start() {
- this.$emit("taskBtn", { type: "startTask", id: this.cardData.id });
- },
- stop() {
- this.$emit("taskBtn", { type: "stopTask", id: this.cardData.id });
- },
- pause() {
- this.$emit("taskBtn", { type: "pauseTask", id: this.cardData.id });
- },
- changeShowSteps(newValue){
- this.showSteps = newValue;
- },
- },
- mounted() {
- if (this.data) {
- this.cardData = JSON.parse(JSON.stringify(this.data));
- }
- }
- };
- </script>
- <style scoped>
- .batchClassCard {
- width: 100%;
- height: 130px;
- margin: 20px 0;
- border-radius: 15px;
- box-sizing: border-box;
- border: 1px solid rgba(150, 155, 163, 0.4);
- padding: 20px;
- display: flex;
- align-items: center;
- background-color: #fff;
- }
- .bcc_left {
- width: 50px;
- height: 100%;
- display: flex;
- box-sizing: border-box;
- padding-left: 10px;
- /* justify-content: center; */
- align-items: center;
- }
- .bcc_right {
- width: calc(100% - 50px);
- height: 100%;
- display: flex;
- flex-direction: column;
- }
- .bcc_r_top {
- width: 100%;
- height: 60px;
- display: flex;
- align-items: center;
- justify-content: space-between;
- }
- .bcc_r_t_left {
- width: calc(100% - 100px);
- height: 100%;
- display: flex;
- align-items: center;
- }
- .bcc_r_t_l_image {
- width: 50px;
- height: 50px;
- }
- .bcc_r_t_l_image > img {
- width: 45px;
- height: 45px;
- object-fit: cover;
- }
- .bcc_r_t_right {
- width: 100px;
- height: 100%;
- display: flex;
- align-items: flex-start;
- justify-content: flex-end;
- cursor: pointer;
- }
- .bcc_r_t_right > span {
- font-size: 16px;
- display: block;
- position: relative;
- }
- .stepBox {
- width: 315px;
- height: auto;
- background-color: #fff;
- position: absolute;
- left: calc(100% + 22px);
- top: -21px;
- box-sizing: border-box;
- border: 1px solid #d9d9d9;
- border-radius: 12px;
- box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
- color: #000;
- padding: 10px 10px;
- cursor: default;
- }
- .sb_item {
- width: 100%;
- height: 25px;
- display: flex;
- align-items: center;
- justify-content: space-around;
- }
- .sb_item > img {
- width: 20px;
- height: 20px;
- }
- .sb_item > div {
- max-width: calc(100% - 20px - 140px - 15px);
- width: calc(100% - 20px - 35px - 15px);
- height: 100%;
- margin: 0 5px 0 10px;
- display: block;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- line-height: 24px;
- }
- .sb_item > span {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 150px;
- height: 100%;
- color: rgba(54, 129, 252, 1);
- }
- .bcc_r_t_l_message {
- width: 100%;
- height: 50px;
- }
- .bcc_r_t_l_message > div {
- width: 100%;
- height: auto;
- display: flex;
- align-items: center;
- }
- .bcc_r_t_l_message > div > span {
- max-width: calc(100% - 70px);
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- font-size: 16px;
- color: #000;
- }
- .bcc_r_t_l_message > div > img {
- width: 18px;
- height: 18px;
- margin-left: 10px;
- cursor: pointer;
- }
- .bcc_r_t_l_message > span {
- margin-top: 10px;
- font-size: 14px;
- display: flex;
- align-items: center;
- color: rgba(150, 155, 163, 1);
- }
- .bcc_r_t_l_message > span>span{
- width: 2px;
- height: 12px;
- display: block;
- background-color: #CBCBCB;
- margin: 0 10px;
- }
- .bcc_r_bottom {
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: space-between;
- height: calc(100% - 60px);
- }
- .bcc_r_b_left {
- /* width: calc(100% - 200px); */
- /* width: calc(100% - 290px); */
- flex: 1;
- height: 100%;
- border-radius: 5px;
- box-sizing: border-box;
- border: dashed 1px rgba(150, 155, 163, 1);
- display: flex;
- align-items: center;
- }
- .bcc_r_b_left > span {
- display: block;
- width: 100%;
- height: 100%;
- line-height: 25px;
- }
- .bcc_r_b_left >>> .el-input {
- width: 100%;
- height: 100%;
- }
- .bcc_r_b_left >>> .el-input > .el-input__inner {
- width: 100%;
- height: 100%;
- border: none;
- outline: none;
- }
- .bcc_r_b_right {
- width: auto;
- padding: 0 0 0 10px;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: flex-end;
- }
- .status_success {
- color: rgba(188, 230, 133, 1);
- }
- .status_doing {
- color: rgba(54, 129, 252, 1);
- }
- .status_wait {
- color: rgba(150, 155, 163, 1);
- }
- .status_fail {
- color: rgb(185, 2, 2);
- }
- .rotation {
- animation: rotate 4s linear infinite;
- }
- @keyframes rotate {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
- }
- </style>
|