pbl-teacher-table/src/components/pages/test/smarter.vue

<template>
    <div class="pb_content">
        <div style="width:100%;padding:0;box-sizing: border-box;">
            <div class="pb_head top">
                <div class="pb_head_t_left">
                    <span class="subClick" @click="
                        goTo(
                            '/test?userid=' +
                            userid +
                            '&oid=' +
                            oid +
                            '&org=' +
                            org +
                            '&role=' +
                            role
                        )
                        ">表单管理</span>
                    <!-- v-show="oid == '4c686762-1d0a-11ed-8c78-005056b86db5'" -->
                    <span class="subClick" @click="
                        goTo(
                            '/trainCourse?userid=' +
                            userid +
                            '&oid=' +
                            oid +
                            '&org=' +
                            org +
                            '&role=' +
                            role
                        )
                        ">培训管理</span>
                    <span class="subClick" v-if="examineData.length" @click="
                        goTo(
                            '/testDataBoard?userid=' +
                            userid +
                            '&oid=' +
                            oid +
                            '&org=' +
                            org +
                            '&role=' +
                            role
                        )
                        ">数据看板</span>
                    <span class="sub_head">智能助手</span>
                </div>
                <!-- <div class="pb_head_t_right">
                    <el-tooltip class="item" effect="dark" content="预览" placement="bottom">
                        <span class="preview_icon"></span>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="文件" placement="bottom">
                        <span class="case_icon"></span>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="问题" placement="bottom">
                        <span class="problem_icon"></span>
                    </el-tooltip>
                </div> -->
            </div>
        </div>
        <div class="cc_bottom">
            <div class="cc_b_left" :style="`width:${openLeft?'13%':'50px'}`">
                <div class="menu_container" v-if="openLeft">
                  <div  @click="activeMenu = 1" :class="{active: activeMenu === 1}">
                    <span :class="['session_icon',{active: activeMenu === 1}]"></span>
                    <div>当前会话</div>
                  </div>
                  <div @click="activeMenu = 2" :class="{active: activeMenu === 2}">
                    <span :class="['history_icon',{active: activeMenu === 2}]"></span>
                    <div>历史会话</div>
                  </div>
                    <!-- <div :class="['cc_b_l_menu', { active: activeMenu === 1 }]" @click="activeMenu = 1">
                        <span :class="['session_icon', { active: activeMenu === 1 }]"></span>
                        <div v-if="openLeft" style="margin-left: 10px;margin-top: 1px;font-size: 15px;">当前会话</div>
                    </div>
                    <div :class="['cc_b_l_menu', { active: activeMenu === 2 }]" @click="activeMenu = 2">
                        <span :class="['history_icon', { active: activeMenu === 2 }]"></span>
                        <div v-if="openLeft" style="margin-left: 10px;margin-top: 1px;font-size: 15px;">历史会话</div>
                    </div> -->
                    <!--<div :class="['cc_b_l_menu', { active: activeMenu === 3 }]" @click="activeMenu = 3">
                            <span :class="['mysql_icon', { active: activeMenu === 3 }]"></span>
                            <div style="margin-left: 10px;margin-top: 1px;font-size: 15px;">数据库管理</div>
                        </div> -->
                </div>
                <div class="menu_container" v-if="!openLeft">
                  <span @click="activeMenu = 1"  :class="{active: activeMenu === 1}"><span :class="['session_icon',{active: activeMenu === 1}]"></span></span>
                  <span @click="activeMenu = 2"  :class="{active: activeMenu === 2}"><span :class="['history_icon',{active: activeMenu === 2}]"></span></span>
                </div>
                <div class="fold_btn">
                    <span class="more_icon" :style="`transform: rotate(${openLeft?0:180}deg);`" @click="openLeft=!openLeft"></span>
                </div>
            </div>
            <div v-show="activeMenu == 1" style="width:100%;display: flex;">
                <div class="cc_b_middle">
                    <div style="width:100%;height: 100%;">
                        <aiLeader :courseId="aiBoxRightCid" :worksArray="courseInfoList" :formList="menuList" ref="aiChat"
                            @pushFileData="pushFileData" @clearFileData="clearFileData"></aiLeader>
                    </div>
                </div>
                <div class="cc_b_right">
                    <div v-if="showFileUrl" style="width: 100%;height: 100%;">
                        <div style="display: flex;">
                            <div :class="['preview_file', { active: fileMenu === 1 }]" @click="fileMenu = 1">文件预览</div>
                            <div :class="['bianji_file', { active: fileMenu === 2 }]" @click="fileMenu = 2">文案编辑</div>
                        </div>
                        <div v-show="fileMenu == 1" style=" width: 100%;height: calc(100% - 40px);">
                        <div class="cc_b_r_menu">
                            <div v-for="(item, index) in menuList" @click="changeMenuIndex(index)" :key="index"
                                :class="{ 'cc_b_r_menu_active': menuIndex == index }">
                                <el-tooltip class="item" effect="dark" :content="item.name" placement="top">
                                    <span>{{ item.name }}</span>
                                </el-tooltip>
                                <!-- <div class="cc_b_r_btn"> -->
                                <span class="close_icon" :class="{ active: menuIndex == index }"
                                    @click="deleteMenuItem(index)"></span>
                                <!-- </div> -->
                            </div>
                        </div>
                        <div class="cc_b_r_content">
                            <csvTableView v-if="showFileUrl" :url="showFileUrl" />
                        </div>
                        </div>
                        <div v-show="fileMenu == 2" style="width: 100%;height: calc(100% - 40px)">
                            <div class="bianji_area">
                              <span>
                                <img @click="downUserAsk" src="../../../assets/icon/test/down_icon.svg">
                              </span>
                              <Editor @change="(value)=>userAsk = value" style="width: 100%;height: 100%;" :value="userAsk"/>
                                <!-- <span contenteditable="true" class="userAsk">{{ userAsk }}</span> -->
                                <!-- <span class="aiText" contenteditable="true" v-html="bianjiText"></span>
                                <span v-if="!userAsk" style="display: flex;justify-content: center;">暂无数据</span> -->
                            </div>
                        </div>
                    </div>
                    <div v-else style="margin: 40px 0px 0px 20px">
                        <div>--官方能力演示--</div>
                        <div class="b_r_menu">
                            <div class="b_r_menu_content">
                                <div class="m_c_title">数据处理</div>
                                <div class="m_c_item">缺失值处理</div>
                                <div class="m_c_item">无效样本处理</div>
                                <div class="m_c_item">数据降维</div>
                            </div>
                            <div class="b_r_menu_content">
                                <div class="m_c_title">数据分析</div>
                                <div class="m_c_item">线性回归</div>
                                <div class="m_c_item">相关性分析</div>
                                <div class="m_c_item">关联分心</div>
                            </div>
                            <div class="b_r_menu_content">
                                <div class="m_c_title">图标生成</div>
                                <div class="m_c_item">箱线图</div>
                                <div class="m_c_item">雷达图</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-show="activeMenu == 2" style="width:calc(100% - 148px);">
                <div class="history_talk">
                    <div class="h_t_head">
                        <div class="t_h_left">
                            <span style="font-weight: bold;font-size: 18px;">历史回溯</span>
                            <span>共计{{ tableData.length }}个会话</span>
                        </div>
                        <div class="t_h_right">
                            <div style="margin-right: 10px;position: relative;">
                                <el-input v-model="talkName" class="student_input" placeholder="检索会话名称"></el-input>
                                <span class="serach_icon" @click="historyTalk()"></span>
                            </div>
                        </div>
                    </div>
                    <div class="h_t_table">
                        <el-table :data="tableData" style="width: 100%;cursor: pointer" @row-click="handleRowClick">
                            <el-table-column prop="name" label="会话名称" >
                            </el-table-column>
                            <el-table-column prop="ctime" label="创建时间" width="180">
                            </el-table-column>
                            <el-table-column prop="utime" label="更新时间" width="180">
                            </el-table-column>
                            <el-table-column prop="control" label="操作" width="200">
                                <template slot-scope="scope">
                                    <div style="display: flex;">
                                        <div class="bianji">
                                            <i class="el-icon-edit"></i>
                                            <span @click.stop="openUpdate(scope.row.name, scope.row.id)">重命名</span>
                                        </div>
                                        <div class="bianji">
                                            <i class="el-icon-delete"></i>
                                            <span @click.stop="delete_talk(scope.row.id)">删除</span>
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="h_t_bottom">
                        <span>共{{ tableData.length }}条</span>
                        <el-pagination background layout="prev, pager, next" :page-size="pageSize" :current-page="page"
                            :total="total" @current-change="handleCurrentChange"></el-pagination>
                        <!-- <el-select v-model="value" placeholder="请选择页数" size="mini" class="el_select">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select> -->
                    </div>

                </div>
            </div>
        </div>
        <el-dialog title="修改会话名称" :visible.sync="dialogVisibleUpdate" :append-to-body="true" :before-close="handleClose"
            class="dialog_diy">
            <el-form>
                <el-form-item label="会话名称" :label-width="formLabelWidth">
                    <el-input v-model="talkName1" auto-complete="off" placeholder="请输入会话名称..."></el-input>
                </el-form-item>
            </el-form>
            <span class="rename_btn">
                <el-button @click="dialogVisibleUpdate = false">取 消</el-button>
                <el-button type="primary" @click="UpdateTalkName()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
// var OpenCC = require("opencc-js");
// let converter = OpenCC.Converter({
//     from: 'hk',
//     to: 'cn'
// })

import radarZong from "./dataCom/radarZong.vue";
import radarTeacher from "./dataCom/radarTeacher.vue";
import aiLeader from "./checkAi/aiLeader.vue";
import Cascader from "./dataCom/cascader.vue";
// import smartMenu from "./smartBox/smartMenu.vue";
import csvTableView from "./choseCheck/csvTableView.vue";
import Editor  from './checkAi/wangEnduit.vue';
import htmlDocx from "html-docx-js/dist/html-docx";
import { saveAs } from "file-saver";
export default {
    name: 'smarter',
    components: {
        radarZong, radarTeacher, Cascader,
        aiLeader, csvTableView,Editor
    },
    data() {
        return {
            // 组件数据
            userid: this.$route.query.userid,
            oid: this.$route.query.oid,
            org: this.$route.query.org,
            role: this.$route.query.role,
            cid: this.$route.query.cid,
            menuList: [],
            aiContentArea: [],
            menuIndex: 0,
            courseInfoList: [],
            page: 1,
            total: 0,
            talkName: '',
            talkName1: '',
            chatId: '',
            formLabelWidth: "100px",
            pageSize: 8,
            loading: true,
            activeMenu: 1, // 默认激活第一个
            fileMenu: 1,
            cutNumber: 1,
            dialogVisibleUpdate: false,
            // bianjiText:"",
            userAsk:"",
            examineData: [],
            tableData: [],
            options: [{
                value: '1',
                label: '20条/页'
            }, {
                value: '2',
                label: '双皮奶'
            }],
            value: '1',
            openLeft:true,
        };
    },
    methods: {
        handleRowClick(row, column, event) {
            this.activeMenu = 1;
            console.log(JSON.stringify(row))
            this.$nextTick(() => {
                // 调试输出
                console.log(this.$refs.aiChat);
                if (this.$refs.aiChat) {
                    this.$refs.aiChat.getChatList(row.chatid);
                    let obj = JSON.parse(row.json)
                    this.menuList = obj;
                    this.$refs.aiChat.fileList = obj.map(i=>i.url)
										this.menuIndex = 0;
                } else {
                    console.error('aiChat ref is not available');
                }
            });
        },
        openUpdate(name, id) {
            this.talkName1 = name;
            this.chatId = id;
            this.dialogVisibleUpdate = true;
        },
        UpdateTalkName() {
            const j = this.menuList.map(i => i.url).join(",")
            let params = [{
                id: this.chatId,
                name: this.talkName1,
                j:j
            }];
            this.ajax
                .post(this.$store.state.api + "updateChat", params)
                .then(res => {
                    if (this.talkName1 == '') {
                        this.$message({
                            message: "不能为空",
                            type: "error",
                        });
                    } else {
                        this.$message({
                            message: "修改成功",
                            type: "success",
                        });
                        this.dialogVisibleUpdate = false;
                        this.historyTalk();
                        this.talkName1 = '';
                    }
                })
                .catch((err) => {
                    console.error(err);
                })
        },
        delete_talk(id) {
            let params = [{
                id: id
            }]
            this.$confirm("确定删除此会话吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.ajax
                        .post(this.$store.state.api + "deleteChat", params)
                        .then((res) => {
                            this.$message({
                                message: "删除成功",
                                type: "success",
                            });
                            this.historyTalk();
                        })
                        .catch((err) => {
                            this.$message.error("删除失败");
                            console.error(err);
                        });
                })
                .catch(() => { });
        },
        handleCurrentChange(newPage) {
            this.page = newPage;
            this.historyTalk();
        },
        handleClose(done) {
            done();
        },
        // 获取基础页面数据
        getPageBase() {
            let params = {
                typ: 2,
                org: this.org,
                oid: this.oid
            };
            // console.log(params);
            this.ajax
                .get(this.$store.state.api + "selectTestExamineBase", params)
                .then(res => {
                    console.log('selectTestExamineBase', res.data[0]);
                    this.examineData = res.data[0]
                })
                .catch(error => {
                    console.log(error);
                });
        },
        deleteMenuItem(index) {
            this.menuList.splice(index, 1);
            this.menuIndex = 0
            this.$refs.aiChat.delFileList(index)
            this.$forceUpdate()
            console.log('menuList', this.menuList);

        },

        historyTalk() {
            let params = {
                uid: this.userid,
                n: this.talkName,
                page: this.page,
                num: this.pageSize
            };
            this.ajax
                .get(this.$store.state.api + "getChatHistory", params)
                .then((res) => {
                    this.tableData = res.data[0]
                    console.log("tableData", this.tableData);
                    this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
                    console.log("111111", this.total);


                })
                .catch((err) => {
                    console.error(err);
                });
        },
        pushFileData(data) {
            this.menuList.push(data)
            console.log("menuList", this.menuList);

        },
        // pushAiContent(aitext,userText){
        //     this.bianjiText = aitext
        //     this.userAsk = userText
        //     console.log("ai回答👉",this.bianjiText);
        //     if(this.bianjiText){
        //         this.fileMenu = 2
        //     }

        // },
        // pushAiContent(data){
        //     this.aiContentArea.push(...data),
        //     console.log("aiContentArea",this.aiContentArea);

        // },
        clearFileData() {
            this.menuList = []
        },
        changeMenuIndex(index) {
            this.menuIndex = index
        },
        goTo(path) {
            this.$router.push(path);
        },
        getData() {
            if (this.cid) {
                this.loading = true
                let cidList = this.cid.split(',')
                let promiseList = []
                cidList.forEach(el => {
                    promiseList.push(this.getCourseData(el))
                })
                Promise.all(promiseList).then(res => {
                    this.courseInfoList = res
                    console.log("courseInfoList", this.courseInfoList)
                    this.loading = false
                }).catch(err => {
                    console.error("Error occurred:", err);
                    this.loading = false;  // 如果有错误，也要停止loading
                });
            }
        },
        getCourseData(courseId) {
            return new Promise((resolve) => {
                let params = {
                    cid: courseId,
                    cn: "",
                    tim: "",
                    tea: ""
                };
                this.ajax
                    .get(this.$store.state.api + "getTestWorksNoPageCopy", params)
                    .then(async (res) => {
                        let testJson = res.data[0][0]
                        let works = res.data[1]
                        let chapters = this.setJSON(this.setJson2(JSON.parse(JSON.stringify(JSON.parse(res.data[0][0].chapters)))))
                        let courseCount11 = []
                        let array = []
                        let courseIds = []; // 初始化一个空数组来存储所有的courseId
                        for (let i = 0; i < works.length; i++) {
                            let cJson = this.setJSON(JSON.parse(JSON.stringify(JSON.parse(works[i].courseJson))))
                            if (JSON.stringify(cJson) == JSON.stringify(chapters)) {
                                let _json = this.JSONSetting(JSON.parse(JSON.stringify(JSON.parse(works[i].courseJson))))
                                for (var ja = 0; ja < _json.length; ja++) {
                                    let _json2 = _json[ja].json;
                                    if (_json[ja].type == 6) {
                                        let courseId = _json2.answer2;
                                        courseIds.push(courseId); // 将type为6的courseId添加到数组中
                                    }
                                    if (_json[ja].type == 11) {
                                        let _answer = _json2.answer2;
                                        _answer.length ? courseCount11 = courseCount11.concat(_answer) : '';
                                        _json[ja].json.courseId = _answer ? _answer : [];
                                        courseIds = courseIds.concat(_answer); // 将type为11的courseId添加到数组中
                                    }
                                }
                            }
                        }
                        // 将所有的courseId去重
                        courseIds = Array.from(new Set(courseIds));
                        // 使用一个数组来存储所有的courseId后，执行getCourseInfoTestAll
                        let courseTitles = {}; // 初始化一个空对象来存储所有的courseTitles
                        let params2 = [{
                            cid: courseIds.join(",")
                        }]

                        let data2 = await this.ajax.post(this.$store.state.api + 'getCourseInfoTestAll2', params2);
                        let result2 = data2.data[0];
                        result2.forEach(i => {
                            courseTitles[i.courseId] = i.title;
                        });

                        for (let i = 0; i < works.length; i++) {
                            let cJson = this.setJSON(JSON.parse(JSON.stringify(JSON.parse(works[i].courseJson))))
                            if (JSON.stringify(cJson) == JSON.stringify(chapters)) {
                                let _json = this.JSONSetting(JSON.parse(JSON.stringify(JSON.parse(works[i].courseJson))))

                                _json.forEach(item => {
                                    if (item.type == 11) {
                                        let cid = item.json.answer2
                                        let _title = []
                                        for (var i = 0; i < cid.length; i++) {
                                            _title.push(courseTitles[cid[i]])
                                        }
                                        item.json.answer2 = _title.length ? _title.join(",") : '';
                                    }
                                    if (item.type == 6) {
                                        let courseId = item.json.answer2;
                                        item.json.answer2 = courseTitles[courseId] || '';
                                    }
                                });
                                // 更新对应的_json对象的answer2
                                array.push({
                                    courseid: works[i].courseid,
                                    id: works[i].id,
                                    userid: works[i].userid,
                                    name: works[i].username ? works[i].username : '匿名',
                                    time: works[i].time,
                                    array: _json,
                                    cut: 0,
                                    uteaName: works[i].uteaName,
                                    courseJson: JSON.parse(works[i].courseJson),
                                })
                            }
                        }
                        let obj = { courseId: testJson.courseId, name: testJson.title, worksArray: array }
                        this.courseInfoList.push(obj)
                        resolve(obj)
                    })
                    .catch((err) => {
                        resolve();
                        console.error(err);
                    });
            })
        },
        async downUserAsk(){
          // console.log(this.userAsk)
          // console.log(this.userAsk)
          await this.generateDocx("文案编辑",this.userAsk);
          this.$message.success("下载成功")
        },
            // 导出docx
    async generateDocx(name, html) {
      // 将html文件中需要用到的数据挂载到store上
      const content = `<!DOCTYPE html>
      <html xmlns:v='urn:schemas-microsoft-com
      :vml'xmlns:o='urn:schemas-microsoft-com:office
      :office'xmlns:w='urn:schemas-microsoft-com:office
      :word'xmlns:m='http://schemas.microsoft.com/office/2004/12/omml'
      xmlns='http://www.w3.org/TR/REC-html40'
      xmlns='http://www.w3.org/1999/xhtml'>
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>${name}</title>
          <style>
						*{
							font-family: '宋体';
							margin:0;
							padding:0;
							line-height:1;
						}
            table {
              border-collapse: collapse; /* 折叠边框 */
              width: 100%;
							font-size:10.5pt;
            }
            th, td {
              border: 1px solid black; /* 线条样式 */
              padding: 8px;
              text-align: left;
							font-size:10.5pt;
            }
						ol,ul{
							margin:0;
							padding:0;
							margin-right:-1in;
						}
						li{
							margin-bottom:0.1in
							margin-right:-1in;
						}
						p{
							line-height:1;
							margin:0;
							padding:0
						}
						.vue-office-docx{height:100%;overflow-y:auto}
						.vue-office-docx .docx-wrapper>section.docx{margin-bottom:5px}
						@media screen and (max-width: 800px){
							.vue-office-docx .docx-wrapper{padding:10px}
							.vue-office-docx .docx-wrapper>section.docx{padding:10px!important;width:100%!important}
						}

.docx-wrapper { background: gray; padding: 30px; padding-bottom: 0px; display: flex; flex-flow: column; align-items: center; }
.docx-wrapper>section.docx { background: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); margin-bottom: 30px; }
.docx { color: black; hyphens: auto; text-underline-position: from-font; }
section.docx { box-sizing: border-box; display: flex; flex-flow: column nowrap; position: relative; overflow: hidden; }
section.docx>article { margin-bottom: auto; z-index: 1; }
section.docx>footer { z-index: 1; }
.docx table { border-collapse: collapse; }
.docx table td, .docx table th { vertical-align: top; }
.docx p { margin: 0pt; min-height: 1em; }
.docx span { white-space: pre-wrap; overflow-wrap: break-word; }
.docx a { color: inherit; text-decoration: inherit; }
.docx svg { fill: transparent; }
.docx {
  --docx-majorHAnsi-font: Calibri Light;
  --docx-minorHAnsi-font: Calibri;
  --docx-dk1-color: #000000;
  --docx-lt1-color: #FFFFFF;
  --docx-dk2-color: #44546A;
  --docx-lt2-color: #E7E6E6;
  --docx-accent1-color: #5B9BD5;
  --docx-accent2-color: #ED7D31;
  --docx-accent3-color: #A5A5A5;
  --docx-accent4-color: #FFC000;
  --docx-accent5-color: #4472C4;
  --docx-accent6-color: #70AD47;
  --docx-hlink-color: #0563C1;
  --docx-folHlink-color: #954F72;
}
.docx span {
  font-family: Times New Roman;
}
.docx p, p.docx_1 {
  text-align: justify;
}
.docx p, p.docx_1 span {
  font-family: var(--docx-minorHAnsi-font);
  min-height: 10.50pt;
  font-size: 10.50pt;
}
.docx table, table.docx_2 td {
  padding-top: 0.00pt;
  padding-left: 5.40pt;
  padding-bottom: 0.00pt;
  padding-right: 5.40pt;
}
table.docx_3 p {
  text-align: justify;
}
table.docx_3 td {
  border-top: 0.50pt solid black;
  border-left: 0.50pt solid black;
  border-bottom: 0.50pt solid black;
  border-right: 0.50pt solid black;
  padding-top: 0.00pt;
  padding-left: 5.40pt;
  padding-bottom: 0.00pt;
  padding-right: 5.40pt;
}
	p.docx-num-2-0:before {
  content: ""counter(docx-num-2-0, decimal)"、";
  counter-increment: docx-num-2-0;
}
p.docx-num-2-0 {
  display: list-item;
  list-style-position: inside;
  list-style-type: none;
}
p.docx-num-1-0:before {
  content: ""counter(docx-num-1-0, decimal)"、";
  counter-increment: docx-num-1-0;
}
p.docx-num-1-0 {
  display: list-item;
  list-style-position: inside;
  list-style-type: none;
}
.docx-wrapper {
  counter-reset: docx-num-2-0 4 docx-num-1-0 0;
}



          </style>
      </head>
      <body>
      ${html}
      </body>
      </html>`;
      // console.log(content)
      // return console.log(content)
      // debugger
      let blob = htmlDocx.asBlob(content);

      // const uploadFile = new File([blob], `${name}.docx`, {
      //   type:
      //     "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
      // });
      saveAs(blob, `${name}.docx`);
      return true;
      // this.beforeUploadHtml(uploadFile);
    },
    },
    computed: {
        showFileUrl() {
            if (this.menuList.length) {
              if(this.menuList[this.menuIndex]){
								return this.menuList[this.menuIndex].url
							}else {
								return ""
							}
            } else {
                return "";
            }
        },
        aiBoxRightCid() {
            let _result = this.cid;

            let _cidList = _result.split(',');
            if (_cidList.length > 1) {
                _cidList.sort((a, b) => parseInt(b) - parseInt(a));
                _result = _cidList.join(',');
            }
            console.log("我是cid", _result);

            return _result
        }
    },
    mounted() {
        this.getData();
        this.getPageBase();
        this.historyTalk();

    },
    watch: {
        activeMenu(newValue) {
            if (newValue === 2) {
                console.log("HelloWorld");
                this.historyTalk();
            }
        },
    }


};
</script>

<style scoped>
.pb_content {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    padding: 0 20px;
}

.bbox_serch {
    width: 100%;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.top {
    display: flex;
    justify-content: space-between;
    width: 100% !important;
    box-sizing: border-box;
    margin: 0px auto;
    padding: 10px 0;
    height: 54px;
    align-items: center;

}

.pb_head_t_left {
    display: flex;
    align-items: center;
}

/* .pb_head_t_right {} */
.preview_icon {
    background: url('../../../assets/icon/test/test_preview.png') no-repeat;
    width: 22px;
    height: 22px;
    display: inline-block;
    background-size: contain;
    cursor: pointer;
    margin-right: 20px;
}

.case_icon {
    background: url('../../../assets/icon/test/test_case.png') no-repeat;
    width: 22px;
    height: 22px;
    display: inline-block;
    background-size: contain;
    cursor: pointer;
    margin-right: 15px;
}

.problem_icon {
    background: url('../../../assets/icon/test/test_problem.png') no-repeat;
    width: 22px;
    height: 22px;
    display: inline-block;
    background-size: contain;
    cursor: pointer;
    margin-right: 10px;
}

.subClick {
    font-size: 16px;
    cursor: pointer;
    margin-left: 10px;
    /* color: #ab582f; */
    color: #409eff;
}

.sub_head {
    position: relative;
    font-size: 20px;
    font-weight: bold;
    padding: 0 15px;
}

.sub_head::after {
    content: "";
    width: 100%;
    background: #3681FC;
    height: 2px;
    position: absolute;
    left: 0;
    bottom: -8px;
}

.subClick {
    /* font-size: 16px; */
    font-size: 20px;
    cursor: pointer;
    /* margin-left: 17.5px; */
    /* color: #ab582f; */
    /* color: #409eff; */
    color: #999;
    padding: 0 15px;
}

.subClick:hover {
    color: #000;
}

.sub_head+.subClick,
.subClick+.subClick,
.subClick+.sub_head {
    margin-left: 17.5px;
}

.bbox {
    background: #fff;
    border-radius: 0 5px 5px 5px;
    padding: 15px 0;
    box-sizing: border-box;
    min-height: 900px;
}

.bbox_nav {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
    align-items: center;
}

.teaLis {
    display: flex;
}

.teal {
    padding: 10px 20px;
    cursor: pointer;
}

.Tbor {
    border-bottom: 2px rgba(54, 129, 252, 1) solid;
    font-weight: 600;
}


.randarZong {
    max-width: 100%;
    width: 500px;
    height: 500px;
    margin: 0 auto;
}

.randarBox {
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
}

.randarBox .title {
    width: 100%;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
}

.randarTeacher {
    width: calc(100% / 4 - 20px);
    margin-right: 20px;
    margin-bottom: 20px;
}


.randarTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.randarTitle>span:nth-child(1) {}

.randarTitle>span:nth-child(2) {}

.randar {
    width: calc(100%);
    height: 350px;
    border: 1px solid #e4e4e4;
    border-radius: 5px;
}

@media screen and (max-width: 1280px) {
    .randarTeacher {
        width: calc(100% / 2 - 20px);
    }
}

@media screen and (max-width: 800px) {
    .randarTeacher {
        width: calc(100%);
        margin-right: 0;
    }
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 22px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.dialog_diy>>>.el-dialog__header {
    background: #3d67bc !important;
    padding: 15px 20px;
}

.dialog_diy>>>.el-dialog__title {
    color: #fff;
}

.student_table>>>.el-table--border td {
    border-right: 0px !important;
}

.dialog_diy>>>.el-dialog__headerbtn {
    top: 19px;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close {
    color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover {
    color: #fff;
}

.cc_bottom {
    width: 100%;
    height: calc(100% - 66px - 10px);
    background-color: #fff;
    border-radius: 5px;
    display: flex;

}

.cc_b_middle {
    width: 50%;
    height: 100%;
    border-right: 1px solid #E4E7ED;
}

.cc_b_middle>div {
    width: 100%;
    height: 100%;
}

.cc_b_left {
    border-right: 1px solid #E4E7ED;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: 13%;
    overflow: hidden;
    border-radius: 5px;
}

.menu_container {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 占据除折叠按钮外的所有空间 */
}

.menu_container>div{
  display: flex;
  align-items: center;
  width: calc(100% - 20px - 20px);
  height: 40px;
  background-color: #fff;
  margin: 20px 20px 0 20px;
  border-radius: 8px;
  box-sizing: border-box;
  padding-left: 10px;
  color: #828282;
  cursor: pointer;
}



.menu_container>div>span{
  width: 18px;
  height: 18px;
  margin-right: 10px;
}

.menu_container>span{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  padding: 5px;
  background-color: #fff;
  box-sizing: border-box;
  color: #828282;
  cursor: pointer;
  /* margin-top: 10px; */
}

.menu_container>span>span{
  width: 18px;
  height: 18px;
  display: flex;
}

.cc_b_l_menu {
    padding: 10px;
    margin: 17px;
    border-radius: 7px;
    color: #828282;
    cursor: pointer;
    display: flex;
}

.menu_container .active {
    background-color: #3681fc !important;
    color: #fff;
}

.session_icon {
    background: url('../../../assets/icon/test/test_session.png') no-repeat center;
    display: inline-block;
    background-size: contain;
}

.session_icon.active {
    background: url('../../../assets/icon/test/test_session_active.png') no-repeat center;
    display: inline-block;
    background-size: contain;
}

.history_icon {
    background: url('../../../assets/icon/test/test_history.svg') no-repeat center;
    display: inline-block;
    background-size: contain;
}

.history_icon.active {
    background: url('../../../assets/icon/test/test_history_active.svg') no-repeat center;
    display: inline-block;
    background-size: contain;
}

/* .mysql_icon{
    background:url('../../../../assets/icon/test/test_mysql.png') no-repeat;
    width: 18px;
    height: 18px;
    display: inline-block;
    background-size: contain;
}
.mysql_icon.active{
    background:url('../../../../assets/icon/test/test_mysql_active.png') no-repeat;
    width: 18px;
    height: 18px;
    display: inline-block;
    background-size: contain;
} */
.fold_btn {
  width: 100%;
  height: 60px;
  border-top: 1px solid #E4E7ED;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding-left: 15px;
    /* padding: 27px 20px;
    cursor: pointer;
    border-top: 1px solid #E4E7ED;
    margin-top: auto; */
    /* 确保折叠按钮在底部 */
}

.more_icon {
    background: url('../../../assets/icon/test/test_fold.svg') no-repeat;
    background-size: 100%;
    width: 18px;
    height: 18px;
    display: inline-block;
    background-size: contain;
    cursor: pointer;

}

.cc_b_right {
    width: 50%;
    height: 100%;
    box-sizing: border-box;
}

.preview_file,
.bianji_file {
    margin: 10px;
    width: 65px;
    cursor: pointer;
}

.preview_file.active {
    font-weight: bold;
    border-bottom: 2px solid blue;
}

.bianji_file.active {
  font-weight: bold;
    border-bottom: 2px solid blue;
}
[contenteditable="true"]:focus {
  outline: none;
  border: none;
}
.bianji_area {
    margin: 0;
   width: 100%;
   height: 100%;
   position: relative;
}

.bianji_area>span{
  width: 25px;
  height: 25px;
  position: absolute;
  right: 15px;
  top: 8px;
  z-index: 999;
  /* background-color: red; */
}

.bianji_area>span>img{
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.aiText{
    margin-top:10px;
}
.userAsk{
    font-size: 20px;
    font-weight: bold;
}
/* .aiText>p{
    margin-top: 0;
    margin-bottom: 16px;
}
.aiText>ol{
    padding-left: 2em;
    margin-top: 0;
    margin-bottom: 0;
} */
.cc_b_r_menu {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    border-bottom: 1px solid #E4E7ED;
    overflow: auto;
}

.cc_b_r_menu>div {
    height: 100%;
    max-width: 100px;
    padding: 0 15px;
    display: flex;
    text-align: center;
    /* justify-content: center; */
    align-items: center;
    cursor: pointer;
    transition: all 0.3s;
    /* text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap; */
}

.cc_b_r_menu>div:hover {
    background-color: #F5F7FA;
}

.cc_b_r_menu>div>span {
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.cc_b_r_menu_active {
    background-color: #3681FC !important;
    color: #fff;
}

.cc_b_r_content {
    width: 100%;
    overflow-y: auto;
    overflow-x: auto;
    max-height: calc(100% - 50px);
}

.cc_b_r_btn {
    display: flex;
    align-items: center;
}

.close_icon {
    width: 0 !important;
    height: 22px;
    display: inline-block;
    background-size: contain;
    cursor: pointer;
}

.close_icon.active {
    background: url('../../../assets/icon/test/test_close_active.png') no-repeat;
    width: 40px !important;
    height: 22px;
    display: inline-block;
    background-size: contain;
    cursor: pointer;
}

.b_r_menu {
    display: flex;
    justify-content: space-around;
}

.b_r_menu_content {
    display: flex;
    flex-direction: column;
    background: linear-gradient(to bottom, #dfeaff, #ffffff, #f6f9ff);
    border-radius: 9px;
    margin-top: 15px;
    width: 50%;
    margin-right: 14px
}

.m_c_title {
    margin: 10px 7px 7px 21px;
    font-size: 16px;
    font-weight: bold;
}

.m_c_item {
    border-radius: 5px;
    padding: 8px 8px 8px 13px;
    margin: 7px;
    border: 1px solid #E4E7ED;
}

.history_talk {
    background: linear-gradient(to bottom, #dfeaff, #ffffff, #f6f9ff);
    margin: 13px;
    padding: 10px;
}

.h_t_head {
    display: flex;
    justify-content: space-between;
}

.t_h_left {
    margin-left: 13px;
    font-size: 13px;
}

.h_t_table {
    margin: 10px;
    box-shadow: 0px 0px 12px rgb(190 193 199);
}

.h_t_table>>>.el-table td,
.el-table th {
    padding: 9px 0;
}

.bianji {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.bianji:hover {
    color: rgb(14, 173, 236);
    cursor: pointer;
}

.rename_btn {
    display: flex;
    justify-content: flex-end;
}

.h_t_bottom {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: 9px;
}

.el_select {
    width: 89px;
}


.table_title {
    background-color: gray;
}

.student_input>>>.el-input__inner {
    height: 30px;
    width: 179px;
    font-size: 13px;
    padding: 0 10px;
}

.serach_icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 13px;
    height: 13px;
    background: url("../../../assets/icon/test/test_search.png") no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
}

.el-input {
    position: relative;
    font-size: 14px;
    display: inline-block;
    width: 100%;
}

.editor>>>.text{
  height: calc( 100% - 42px);
}
</style>