You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1677 lines
52 KiB
1677 lines
52 KiB
<template>
|
|
<div style="width: 100%;height: 100%;">
|
|
<img style="width: 100%;height: 100%;position: absolute;z-index:-1;" src="../assets/img/graphbg.png">
|
|
<headInfo></headInfo>
|
|
<!-- 这是内容界面 -->
|
|
<div class="content">
|
|
<div class="leftContent">
|
|
<div class="leftBox1">
|
|
<div style="width: 50%;margin: 0 auto;">
|
|
<p style="font-size: 1vw;">Hi,{{ userName }}~</p>
|
|
<p style="font-size: 0.7vw;">欢迎使用课程辅助系统</p>
|
|
</div>
|
|
</div>
|
|
<div class="leftBox2">
|
|
<div class="muluBox">
|
|
<div class="muluList">
|
|
<div v-for="item in mulu" :key="item">
|
|
<div class="oneMulu" v-if="page!=item.name" @click="goInfo(item.info)">
|
|
<div style="width: 80%;text-align: center;">{{ item.name }}</div>
|
|
<img src="../assets/img/jiantou.png" style="width: 0.9vw;height:0.9vw;object-fit: contain;float: right;margin-top: 11%;">
|
|
</div>
|
|
<div class="oneMuluXuan" v-else>
|
|
<img src="../assets/img/twCircle.png"
|
|
style="width: 0.9vw;height:0.9vw;object-fit: contain;float: right;margin-top: 7%;">
|
|
<div style="width: 55%;text-align: center;">
|
|
{{ item.name }}
|
|
</div>
|
|
<img src="../assets/img/jiantouchoose.png"
|
|
style="width: 0.9vw;height:0.9vw;object-fit: contain;float: right;margin-top: 7%;">
|
|
<img src="../assets/img/muluchoose.png"
|
|
style="width: 19vw;height: 6vw;position: absolute;bottom: -3vw;left: -3.5vw;z-index: -1;"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="color: #ffffff; width: 67%;height:5vw;position: absolute;z-index: 1000;left: 12vw;top: 5vw;display: flex;flex-direction: row;justify-content: space-around;">
|
|
<div class="graphcontains1">
|
|
<div style="width: 100%;height: 1.4vw;position: relative;display: flex;flex-direction: row;justify-content: space-around;margin-bottom: 0.5vw;">
|
|
<div style="width: 43%;display: flex;justify-content: flex-start;">
|
|
<img src="../assets/img/juxing.png" style="width: 1vw;object-fit: contain;margin-right: 0.25vw;">
|
|
<div style="height:1.4vw;line-height: 1.4vw;color: white;font-size: 0.9vw;font-size: 0.9vw; ">关键词：
|
|
</div>
|
|
</div>
|
|
<div style="width:62%;height: 1.4vw;position: relative;">
|
|
<img src="../assets/img/graphInput.png" style="position: absolute;z-index: 99;width:100%;height: 100%;">
|
|
<input
|
|
type="text"
|
|
placeholder="请输入关键词"
|
|
v-model="keywords"
|
|
@keyup.enter="getInfo1()"
|
|
/>
|
|
<div style="width: 10%;height: 0.8vw;position: absolute;right: 0.5vw;z-index: 5555;top: 0.2vw;"
|
|
@click="getInfo1()">
|
|
<img src="../assets/img/look.png" style="width: 100%;height: 100%;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="graphcontains2">
|
|
<div
|
|
style="width: 100%;height: 1.4vw;position: relative;display: flex;flex-direction: row;justify-content: space-around;margin-bottom: 0.5vw;">
|
|
<div style="width: 43%;display: flex;justify-content: flex-start;">
|
|
<img src="../assets/img/juxing.png" style="width: 1vw;object-fit: contain;margin-right: 0.25vw;">
|
|
<div style="height:1.4vw;line-height: 1.4vw;color: white;font-size: 0.9vw;font-size: 0.9vw; ">
|
|
飞机类型：
|
|
</div>
|
|
</div>
|
|
<img src="../assets/img/graphDown.png"
|
|
style="position: absolute;z-index: 99;width: 5%;height: 100%;object-fit: contain;right: 0.5vw;"
|
|
v-if="typePic1==0">
|
|
<img src="../assets/img/graphUp.png"
|
|
style="position: absolute;z-index: 99;width: 5%;height: 100%;object-fit: contain;right: 0.5vw;"
|
|
v-if="typePic1==1">
|
|
<div style="width:62%;height: 1.4vw;position: relative;">
|
|
<img src="../assets/img/graphInput.png" style="position: absolute;z-index: 99;width:100%;height: 100%;">
|
|
<select v-model="value1" @click="changeType1()">
|
|
<option
|
|
v-for="item in options1"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="graphcontains2">
|
|
<div
|
|
style="width: 100%;height: 1.4vw;position: relative;display: flex;flex-direction: row;justify-content: space-around;margin-bottom: 0.5vw;">
|
|
<div style="width: 43%;display: flex;justify-content: flex-start;">
|
|
<img src="../assets/img/juxing.png" style="width: 1vw;object-fit: contain;margin-right: 0.25vw;">
|
|
<div style="height:1.4vw;line-height: 1.4vw;color: white;font-size: 0.9vw;font-size: 0.9vw; ">
|
|
飞行任务：
|
|
</div>
|
|
</div>
|
|
<img src="../assets/img/graphDown.png"
|
|
style="position: absolute;z-index: 99;width: 5%;height: 100%;object-fit: contain;right: 0.5vw;"
|
|
v-if="typePic2==0">
|
|
<img src="../assets/img/graphUp.png"
|
|
style="position: absolute;z-index: 99;width: 5%;height: 100%;object-fit: contain;right: 0.5vw;"
|
|
v-if="typePic2==1">
|
|
<div style="width:62%;height: 1.4vw;position: relative;">
|
|
<img src="../assets/img/graphInput.png" style="position: absolute;z-index: 99;width:100%;height: 100%;">
|
|
<select v-model="value2" @click="changeType2()">
|
|
<option
|
|
v-for="item in options2"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="graphcontains2">
|
|
<div
|
|
style="width: 100%;height: 1.4vw;position: relative;display: flex;flex-direction: row;justify-content: space-around;margin-bottom: 0.5vw;">
|
|
<div style="width: 43%;display: flex;justify-content: flex-start;">
|
|
<img src="../assets/img/juxing.png" style="width: 1vw;object-fit: contain;margin-right: 0.25vw;">
|
|
<div style="height:1.4vw;line-height: 1.4vw;color: white;font-size: 0.9vw;font-size: 0.9vw; ">
|
|
飞行载荷：
|
|
</div>
|
|
</div>
|
|
<img src="../assets/img/graphDown.png"
|
|
style="position: absolute;z-index: 99;width: 5%;height: 100%;object-fit: contain;right: 0.5vw;"
|
|
v-if="typePic3==0">
|
|
<img src="../assets/img/graphUp.png"
|
|
style="position: absolute;z-index: 99;width: 5%;height: 100%;object-fit: contain;right: 0.5vw;"
|
|
v-if="typePic3==1">
|
|
<div style="width:62%;height: 1.4vw;position: relative;">
|
|
<img src="../assets/img/graphInput.png" style="position: absolute;z-index: 99;width:100%;height: 100%;">
|
|
<select v-model="value3" @click="changeType3()">
|
|
<option
|
|
v-for="item in options3"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div style="width: 15%;display: flex;flex-direction: row;justify-content: flex-start;position: absolute;height: 1vw;right: 3vw;z-index: 4444;">
|
|
<div style="margin-left: 2vw;width: 35%;margin-top: 0.6vw;" v-if="userType==1">
|
|
<div style="height: 1.5vw;width: 4.2vw;background-color: transparent;border-radius: 1vw;display: flex;flex-direction: row;justify-content: center;padding: 0 0.1vw;border: 1px #2ed0d6 solid;" @click="openFileInput">
|
|
<img src="../assets/img/Inicon.png" style="height: 1vw;object-fit: contain;margin-top: 0.2vw;" >
|
|
<div style="line-height: 1.5vw;color: #FFFFFF;margin-left: 0.25vw;">导入</div>
|
|
</div>
|
|
<input
|
|
ref="fileInput"
|
|
type="file"
|
|
accept=".doc, .docx"
|
|
style="display: none;"
|
|
@change="handleFileChange"
|
|
/>
|
|
</div>
|
|
<div style="margin-left: 0.5vw;width: 35%;margin-top: 0.6vw;" >
|
|
<div style="height: 1.5vw;width: 5.5vw;background-color: #2ed0d6;border-radius: 1vw;display: flex;flex-direction: row;justify-content: center;padding: 0 0.1vw;border: 1px #2ed0d6 solid;" @click="shengcheng()">
|
|
<img src="../assets/img/shengchengicon.png" style="height: 1vw;object-fit: contain;margin-top: 0.2vw;" >
|
|
<div style="line-height: 1.5vw;color: #FFFFFF;margin-left: 0.25vw;">生成报告</div>
|
|
</div>
|
|
<input
|
|
ref="fileInput"
|
|
type="file"
|
|
accept=".doc, .docx"
|
|
style="display: none;"
|
|
@change="handleFileChange"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rightContent">
|
|
<div class="rightList">
|
|
<div class="tupu">
|
|
<div style="width: 100%;height: 100%;">
|
|
<div class="gContainer">
|
|
<div id="graph-panel" style="width: 100%;height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 操作弹窗 -->
|
|
<el-dialog
|
|
title="操作分支内容"
|
|
:visible.sync="isModalVisible"
|
|
append-to-body
|
|
top="10vh"
|
|
custom-class="custom-dialog"
|
|
>
|
|
|
|
<el-form label-width="90px">
|
|
<el-form-item label="节点名称">
|
|
<el-input v-model="nodeInfo.name" readonly></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="节点层级">
|
|
<el-input v-model="nodeInfo.leve" readonly></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="操作">
|
|
<el-button type="primary" @click="openAdd()">新增下级</el-button>
|
|
<el-button type="warning" @click="openEdit()">修改</el-button>
|
|
<el-button type="danger" @click="deleteTw()">删除</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-dialog>
|
|
|
|
|
|
<!-- 新增分支弹窗 -->
|
|
<el-dialog
|
|
title="添加分支内容"
|
|
:visible.sync="isModalVisible1"
|
|
append-to-body
|
|
top="4vh"
|
|
custom-class="custom-dialog"
|
|
>
|
|
<el-form label-width="90px">
|
|
<el-form-item label="fileId">
|
|
<el-input v-model="newBranchFileId"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="类型">
|
|
<el-select v-model="typeValue" placeholder="请选择类型">
|
|
<el-option label="图文" value="tw"></el-option>
|
|
<el-option label="视频" value="sp"></el-option>
|
|
<el-option label="动画" value="dh"></el-option>
|
|
<el-option label="计算模块" value="jsmk"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="节点名称">
|
|
<el-input v-model="newBranchContent"></el-input>
|
|
</el-form-item>
|
|
<el-form-item style="position: relative ;" label="节点内容" v-if="this.typeValue=='tw'">
|
|
<Editor v-model="newBranchValue" style="height: 10vw;margin-bottom: 5vw;"></Editor>
|
|
</el-form-item>
|
|
|
|
<el-form-item style="position: relative;" label="相关图片" v-if="this.typeValue=='tw'" >
|
|
<el-upload
|
|
action="http://127.0.0.1:10031/fileUpdate/upload"
|
|
list-type="picture-card"
|
|
:on-remove="handleRemove"
|
|
:file-list="fileList"
|
|
:multiple="true"
|
|
:limit="9"
|
|
:on-exceed="handleExceed"
|
|
:before-upload="beforeUpload"
|
|
:on-success="handleSuccess"
|
|
:on-error="handleError">
|
|
<i class="el-icon-plus"></i>
|
|
</el-upload>
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="上传视频" prop="spUrl" v-if="this.typeValue=='sp'">
|
|
<el-upload
|
|
class="avatar-uploader el-upload--text"
|
|
multiple
|
|
:headers="videoUpload.headers"
|
|
:action="videoUpload.url"
|
|
:file-list="videoFileList"
|
|
:show-file-list="false"
|
|
accept=".mp4"
|
|
:on-success="handleVideoSuccess"
|
|
:before-upload="beforeUploadVideo"
|
|
:on-progress="uploadVideoProcess"
|
|
:on-remove="handleVideoRemove"
|
|
>
|
|
<div v-if="!videoFlag && showVideoPath" style="display: flex; flex-wrap: wrap; gap: 10px;">
|
|
<!-- <div v-for="(url, index) in showVideoPath.split(',')" :key="url"-->
|
|
<!-- style="position: relative; flex: 1 1 calc(33.333% - 20px); min-width: 200px; margin-bottom: 10px;">-->
|
|
<video :src="showVideoPath" style="width:50%; height: auto;border-radius: 0.5vw;"
|
|
class="avatar video-avatar" controls>
|
|
您的浏览器不支持视频播放
|
|
</video>
|
|
<img
|
|
src="../assets/img/delete.png"
|
|
@click.stop="handleVideoRemove(videoFileList[0])"
|
|
style="width: 35px; height: 35px;position: absolute; top: 5px; left: 5px; cursor: pointer; z-index: 999;"
|
|
alt="删除"
|
|
/>
|
|
<!-- </div>-->
|
|
</div>
|
|
<el-progress :stroke-width="10" class="progressType" v-if="videoFlag"
|
|
type="circle" :percentage="videoUploadPercent" style="margin-top:30px;"></el-progress>
|
|
<el-button style="z-index: 999;" class="video-btn" slot="trigger" size="small" type="primary">
|
|
点击上传视频
|
|
</el-button>
|
|
</el-upload>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="父级节点ID" style="margin-top: 4vw;">
|
|
<el-input v-model="newBranchParentId" disabled></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="关系">
|
|
<el-input v-model="newBranchRelation"
|
|
@input="newBranchRelation = $event.target.value.replace(/[^a-zA-Z\u4e00-\u9fa5]/g, '')"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="层级">
|
|
<el-input-number v-model="newBranchLevel" controls-position="right" :min="1"></el-input-number>
|
|
</el-form-item>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="closeModal">取 消</el-button>
|
|
<el-button type="primary" @click="addNewBranch">提 交</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
|
|
<!-- 修改分支弹窗 -->
|
|
<el-dialog
|
|
title="修改分支内容"
|
|
:visible.sync="isModalVisible2"
|
|
append-to-body
|
|
top="1vh"
|
|
style="height: 55vw;"
|
|
custom-class="custom-dialog"
|
|
>
|
|
<el-form label-width="90px">
|
|
<el-form-item label="fileId">
|
|
<el-input v-model="editFileId"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="类型">
|
|
<el-select v-model="editType" placeholder="请选择类型">
|
|
<el-option label="图文" value="tw"></el-option>
|
|
<el-option label="视频" value="sp"></el-option>
|
|
<el-option label="动画" value="dh"></el-option>
|
|
<el-option label="计算模块" value="js"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="节点名称">
|
|
<el-input v-model="editName"></el-input>
|
|
</el-form-item>
|
|
<el-form-item style="position: relative ;margin-bottom: 5vw;" label="节点内容" v-if="this.editType=='tw'">
|
|
<Editor v-model="this.editContent" style="height: 6vw;"></Editor>
|
|
</el-form-item>
|
|
<el-form-item label="父级节点ID">
|
|
<el-input v-model="editParentId" disabled></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="关系">
|
|
<el-input v-model="editRelation"
|
|
@input="editRelation = $event.target.value.replace(/[^a-zA-Z\u4e00-\u9fa5]/g, '')"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="层级">
|
|
<el-input-number v-model="editLeve" controls-position="right" :min="1"></el-input-number>
|
|
</el-form-item>
|
|
<el-form-item style="position: relative;" label="相关图片" v-if="this.editType=='tw'">
|
|
<el-upload
|
|
action="http://127.0.0.1:10031/fileUpdate/upload"
|
|
list-type="picture-card"
|
|
:on-remove="handleRemove"
|
|
:file-list="fileList"
|
|
:multiple="true"
|
|
:limit="9"
|
|
:on-exceed="handleExceed"
|
|
:before-upload="beforeUpload"
|
|
:on-success="handleSuccess"
|
|
:on-error="handleError">
|
|
<i class="el-icon-plus"></i>
|
|
</el-upload>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="上传视频" prop="spUrl" v-if="this.editType=='sp'">
|
|
<el-upload
|
|
class="avatar-uploader el-upload--text"
|
|
multiple
|
|
:headers="videoUpload.headers"
|
|
:action="videoUpload.url"
|
|
:file-list="videoFileList"
|
|
:show-file-list="false"
|
|
accept=".mp4"
|
|
:on-success="handleVideoSuccess"
|
|
:before-upload="beforeUploadVideo"
|
|
:on-progress="uploadVideoProcess"
|
|
:on-remove="handleVideoRemove"
|
|
>
|
|
|
|
<div v-if="!videoFlag && showVideoPath" style="display: flex; flex-wrap: wrap; gap: 10px;">
|
|
<div
|
|
style="position: relative; flex: 1 1 calc(33.333% - 20px); min-width: 200px; margin-bottom: 10px;">
|
|
|
|
<video :src="showVideoPath" style="width:50%; height: auto;border-radius: 0.5vw;"
|
|
class="avatar video-avatar" controls>
|
|
您的浏览器不支持视频播放
|
|
</video>
|
|
<img
|
|
src="../assets/img/delete.png"
|
|
@click.stop="handleVideoRemove(videoFileList[0])"
|
|
style="width: 35px; height: 35px;position: absolute; top: 5px; left: 5px; cursor: pointer; z-index: 999;"
|
|
alt="删除"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<el-progress :stroke-width="10" class="progressType" v-if="videoFlag"
|
|
type="circle" :percentage="videoUploadPercent" style="margin-top:30px;"></el-progress>
|
|
<el-button style="z-index: 999;" class="video-btn" slot="trigger" size="small" type="primary">
|
|
点击上传视频
|
|
</el-button>
|
|
</el-upload>
|
|
</el-form-item>
|
|
|
|
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="closeModal1">取 消</el-button>
|
|
<el-button type="primary" @click="editSubmit">提 交</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
<!-- v-if="shengOpen"-->
|
|
<div style="width: 100%;height: 100%;position: absolute;background-color: rgba(0,0,0,0.3);z-index: 8000;top: 0vw;" v-if="shengOpen">
|
|
<div class="bgBao">
|
|
<div style="font-size: 1.2vw;font-weight: 500;width: 100%;text-align: center;">报告标题</div>
|
|
<div v-html="baoContent"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="width: 100%;height: 3%;position: fixed;bottom: 0px;">
|
|
<foot></foot>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
<script>
|
|
import headInfo from '@/components/Head.vue';
|
|
import Foot from "@/components/Foot.vue";
|
|
import {editInfoGraph, getDocList, getInfo, getTwInfo} from "@/api/kcInfo";
|
|
import {getgraphInfo} from "@/api/login";
|
|
import VisGraph from '@/assets/js/graphvis.min.20241008.js'
|
|
import LayoutFactory from '@/assets/js/graphvis.layout.min.js'
|
|
import {config} from '@/assets/defaultConfig.js'
|
|
import {addFile, addNode, getFileIdByDocId} from "@/api/file";
|
|
import Editor from "@/components/Editor.vue";
|
|
import {getToken} from "@/utils/auth";
|
|
import {twdelete} from "@/api/twdelete";
|
|
import {getBaoGaoInfo} from "@/api/baogao";
|
|
|
|
export default {
|
|
// eslint-disable-next-line vue/multi-word-component-names
|
|
name: 'Graph',
|
|
components: {Editor, Foot, headInfo},
|
|
data() {
|
|
return {
|
|
typePic1: 0,
|
|
typePic2: 0,
|
|
typePic3: 0,
|
|
|
|
userName: "",
|
|
userType: 0,
|
|
mulu: [
|
|
{id: 0, name: "图文认知", info: "TwInfo"},
|
|
{id: 1, name: "视频资源", info: "SpInfo"},
|
|
{id: 2, name: "动画显示", info: "DhInfo"},
|
|
{id: 3, name: "计算模块", info: "JsInfo"},
|
|
{id: 4, name: "知识图谱", info: "Graph"},
|
|
{id: 5, name: "帮助文档", info: "Help"}
|
|
],
|
|
page: "知识图谱",
|
|
typeList: ["海洋大气", "海洋文学", "海洋地理", "复杂水声", "复杂电磁"],
|
|
contentList: [],
|
|
selectName: "",
|
|
twType: "",
|
|
pageSize: 6,
|
|
pageNum: 1,
|
|
total: 0,
|
|
totalPage: 0,
|
|
pagesList: [],
|
|
onePagesList: [],
|
|
|
|
infos: [],
|
|
demoData: {},
|
|
graphData: {
|
|
nodes: [],
|
|
links: []
|
|
},
|
|
config,
|
|
visGraph: null, // 组件中保存VisGraph实例
|
|
isModalVisible: false,
|
|
isModalVisible1: false,
|
|
newBranchContent: '',
|
|
selectedNode: null,
|
|
|
|
newBranchValue: '',
|
|
newBranchFileId: '',
|
|
newBranchLevel: null,
|
|
newBranchParentId: '',
|
|
newBranchRelation: '',
|
|
typeValue: '',
|
|
keywords: '',
|
|
|
|
|
|
options1: [{
|
|
value: '1',
|
|
label: '直9'
|
|
}, {
|
|
value: '2',
|
|
label: '直9-c'
|
|
}, {
|
|
value: '3',
|
|
label: '卡式机'
|
|
}],
|
|
value1: '',
|
|
|
|
|
|
options2: [{
|
|
value: '0',
|
|
label: '起飞'
|
|
}, {
|
|
value: '1',
|
|
label: '降落'
|
|
}, {
|
|
value: '2',
|
|
label: '飞行'
|
|
}],
|
|
value2: '',
|
|
|
|
|
|
options3: [{
|
|
value: '0',
|
|
label: '鱼雷'
|
|
}, {
|
|
value: '1',
|
|
label: '导弹'
|
|
}, {
|
|
value: '2',
|
|
label: '侦察'
|
|
}],
|
|
value3: '',
|
|
|
|
|
|
//上传视频
|
|
//上传的视频
|
|
videoUpload: {
|
|
// 设置上传的请求头部
|
|
headers: {Authorization: "Bearer " + getToken()},
|
|
// 上传的地址
|
|
url: "http://127.0.0.1:10031/fileUpdate/upload",
|
|
url2: "http://127.0.0.1:10031",
|
|
},
|
|
videoFlag: false, //是否显示进度条
|
|
videoUploadPercent: "", //进度条的进度，
|
|
isShowUploadVideo: false, //显示上传按钮
|
|
videoFileList: [],
|
|
showVideoPath: "",
|
|
uploadUrl: "",//你要上传视频到你后台的地址
|
|
form: {},
|
|
nodeInfo: {},
|
|
|
|
|
|
//修改
|
|
isModalVisible2: false,
|
|
fileList: [],
|
|
isUpload: 0,
|
|
editName: "",
|
|
editType: 0,
|
|
editLeve: 0,
|
|
editParentId: 0,
|
|
editFileId: 0,
|
|
editContent: 0,
|
|
editRelation: "",
|
|
|
|
|
|
//生成报告
|
|
shengOpen:true,
|
|
baoContent:"",
|
|
}
|
|
|
|
},
|
|
methods: {
|
|
shengcheng(){
|
|
console.log("这里是生成报告的按钮")
|
|
this.shengOpen = true;
|
|
console.log(this.graphData.nodes)
|
|
//循环这些数据放进去
|
|
var one = "";
|
|
var two = "";
|
|
var three = "";
|
|
var four = "";
|
|
var five = "";
|
|
var six = "";
|
|
var seven = "";
|
|
for(let a=0;a<this.graphData.nodes.length;a++){
|
|
var level = this.graphData.nodes[a].properties.leve
|
|
if(level=='1'){
|
|
if(one==""){
|
|
one = this.graphData.nodes[a].properties.docId
|
|
}else {
|
|
one = one+","+this.graphData.nodes[a].properties.docId
|
|
}
|
|
}
|
|
if(level=='2'){
|
|
if(two==""){
|
|
two = this.graphData.nodes[a].properties.docId
|
|
}else {
|
|
two = two+","+this.graphData.nodes[a].properties.docId
|
|
}
|
|
}
|
|
if(level=='3'){
|
|
|
|
if(three==""){
|
|
three = this.graphData.nodes[a].properties.docId
|
|
}else {
|
|
three = three+","+this.graphData.nodes[a].properties.docId
|
|
}
|
|
}
|
|
if(level=='4'){
|
|
if(four==""){
|
|
four = this.graphData.nodes[a].properties.docId
|
|
}else {
|
|
four = four+","+this.graphData.nodes[a].properties.docId
|
|
}
|
|
}
|
|
if(level=='5'){
|
|
if(five==""){
|
|
five = this.graphData.nodes[a].properties.docId
|
|
}else {
|
|
five = five+","+this.graphData.nodes[a].properties.docId
|
|
}
|
|
}
|
|
if(level=='6'){
|
|
if(six==""){
|
|
six = this.graphData.nodes[a].properties.docId
|
|
}else {
|
|
six = six+","+this.graphData.nodes[a].properties.docId
|
|
}
|
|
}
|
|
if(level=='7'){
|
|
if(seven==""){
|
|
seven = this.graphData.nodes[a].properties.docId
|
|
}else {
|
|
seven = seven+","+this.graphData.nodes[a].properties.docId
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
var data = {
|
|
"one":one,
|
|
"two":two,
|
|
"three":three,
|
|
"four":four,
|
|
"five":five,
|
|
"six":six,
|
|
"seven":seven
|
|
|
|
}
|
|
|
|
|
|
//生成报告内容
|
|
getBaoGaoInfo(data).then((res)=>{
|
|
console.log(res);
|
|
this.baoContent = res;
|
|
})
|
|
|
|
},
|
|
|
|
|
|
|
|
changeType1() {
|
|
if (this.typePic1 == 0) {
|
|
this.typePic1 = 1;
|
|
} else {
|
|
this.typePic1 = 0
|
|
}
|
|
},
|
|
changeType2() {
|
|
if (this.typePic2 == 0) {
|
|
this.typePic2 = 1;
|
|
} else {
|
|
this.typePic2 = 0
|
|
}
|
|
},
|
|
changeType3() {
|
|
if (this.typePic3 == 0) {
|
|
this.typePic3 = 1;
|
|
} else {
|
|
this.typePic3 = 0
|
|
}
|
|
},
|
|
//图谱 查询
|
|
selectGraph() {
|
|
console.log("jksajdklaj-----走这里")
|
|
},
|
|
|
|
openFileInput() {
|
|
// 触发隐藏的文件输入框点击事件
|
|
this.$refs.fileInput.click();
|
|
},
|
|
handleFileChange(event) {
|
|
const file = event.target.files[0];
|
|
if (file) {
|
|
this.uploadFile(file);
|
|
}
|
|
},
|
|
uploadFile(file) {
|
|
// 调用API函数进行文件上传
|
|
addFile(file)
|
|
.then(response => {
|
|
if (response.code === 200) {
|
|
this.$message.success('文件上传成功');
|
|
} else {
|
|
this.$message.error('文件上传失败');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('文件上传错误:', error);
|
|
this.$message.error('文件上传失败');
|
|
})
|
|
.finally(() => {
|
|
// 清除文件选择框的内容以便下次使用
|
|
this.$refs.fileInput.value = null;
|
|
});
|
|
},
|
|
goInfo(info) {
|
|
console.log(info)
|
|
this.$router.push('/' + info)
|
|
},
|
|
changeType(item) {
|
|
this.twType = item;
|
|
this.getContentList();
|
|
},
|
|
choosePage(item) {
|
|
console.log(item);
|
|
this.pageNum = item;
|
|
this.getContentList();
|
|
},
|
|
getContentList() {
|
|
var data = {
|
|
name: this.selectName,
|
|
twType: this.twType,
|
|
pageNum: this.pageNum,
|
|
pageSize: this.pageSize
|
|
}
|
|
getDocList(data).then((res) => {
|
|
console.log(res);
|
|
this.contentList = res.data.list;
|
|
this.total = res.data.total;
|
|
this.totalPage = res.data.totalPages;
|
|
|
|
var aaa = 0;
|
|
this.onePagesList = [];
|
|
this.pagesList = [];
|
|
if (this.pageNum < this.totalPage - 3) {
|
|
|
|
for (let i = this.pageNum; i <= this.totalPage; i++) {
|
|
|
|
this.pagesList.push(i);
|
|
this.onePagesList.push(i);
|
|
aaa = aaa + 1;
|
|
console.log(aaa);
|
|
if (aaa == 4) {
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
console.log(this.onePagesList)
|
|
|
|
})
|
|
},
|
|
goXq(id) {
|
|
var data = {
|
|
id: id
|
|
}
|
|
getTwInfo(data).then((res) => {
|
|
this.$router.push({path: '/TwInfoXq', query: {id: id, level: res.data.level, type: "tw"}})
|
|
})
|
|
},
|
|
|
|
|
|
//管理员操作
|
|
deleteTw() {
|
|
var id = this.nodeInfo.docId;
|
|
twdelete(id).then((res) => {
|
|
console.log(res);
|
|
if (res.code == 500) {
|
|
this.$message.error(res.msg);
|
|
}
|
|
if (res.code == 200) {
|
|
this.$message.success("删除成功");
|
|
this.isModalVisible = false;
|
|
this.getInfo();
|
|
}
|
|
})
|
|
},
|
|
editTw(id) {
|
|
//展示出一个修改的弹窗
|
|
var data = {
|
|
id: id
|
|
}
|
|
getTwInfo(data).then((res) => {
|
|
console.log(res.data)
|
|
})
|
|
},
|
|
|
|
|
|
onCreated(editor) {
|
|
this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
|
|
},
|
|
getInfo() {
|
|
this.graphData = undefined;
|
|
this.demoData = {}
|
|
|
|
if (this.keywords != '' && this.keywords != undefined) {
|
|
this.visGraph.clearAll();
|
|
let params = {
|
|
nodename: this.keywords,
|
|
};
|
|
getgraphInfo(params).then((res) => {
|
|
this.zhengl(res.data);
|
|
})
|
|
} else {
|
|
|
|
let params = {};
|
|
getgraphInfo(params).then((res) => {
|
|
this.zhengl(res.data);
|
|
})
|
|
}
|
|
|
|
|
|
},
|
|
getInfo1() {
|
|
this.graphData = undefined;
|
|
this.demoData = {}
|
|
|
|
if (this.keywords != '' && this.keywords != undefined) {
|
|
this.visGraph.clearAll();
|
|
let params = {
|
|
nodename: this.keywords,
|
|
};
|
|
getgraphInfo(params).then((res) => {
|
|
this.zhengl(res.data);
|
|
})
|
|
} else {
|
|
|
|
this.visGraph.clearAll();
|
|
let params = {};
|
|
getgraphInfo(params).then((res) => {
|
|
this.zhengl(res.data);
|
|
})
|
|
}
|
|
|
|
|
|
},
|
|
|
|
async drawGraphData() {
|
|
this.graphData = this.demoData;
|
|
if (this.visGraph === null) {
|
|
this.createGraph();
|
|
// this.genrateGraphData();
|
|
this.visGraph.drawData(this.graphData);
|
|
this.visGraph.incremaNodesCodinate(this.graphData.nodes);
|
|
this.reLayout();
|
|
} else {
|
|
this.createGraph();
|
|
this.visGraph.drawData(this.graphData);
|
|
this.visGraph.incremaNodesCodinate(this.graphData.nodes);
|
|
this.reLayout();
|
|
}
|
|
this.loading = false;
|
|
|
|
},
|
|
// 创建全局绘图客户端对象
|
|
createGraph() {
|
|
const configWithEvents = {
|
|
...this.config,
|
|
node: {
|
|
...this.config.node,
|
|
ondblClick: (event, node) => {
|
|
if (this.userType == 1) {
|
|
this.showPopup(node);
|
|
}
|
|
|
|
}
|
|
}
|
|
};
|
|
this.visGraph = new VisGraph(document.getElementById('graph-panel'), configWithEvents);
|
|
},
|
|
// eslint-disable-next-line no-unused-vars
|
|
async showPopup(node) {
|
|
this.isModalVisible = true; // 显示模态框
|
|
|
|
this.nodeInfo = node.properties;
|
|
|
|
|
|
},
|
|
async openAdd() {
|
|
this.selectedNode = this.nodeInfo;
|
|
this.newBranchParentId = this.nodeInfo.docId;
|
|
this.newBranchLevel = parseInt(this.nodeInfo.leve) + 1;
|
|
|
|
try {
|
|
const response = await this.getFileIdByDocId({docId: this.nodeInfo.docId});
|
|
|
|
this.newBranchFileId = response.fileId;
|
|
this.isModalVisible1 = true;
|
|
} catch (error) {
|
|
console.error('Failed to fetch file ID:', error);
|
|
alert('无法获取文件ID，请稍后再试。');
|
|
return;
|
|
}
|
|
},
|
|
async openEdit() {
|
|
this.isModalVisible2 = true;
|
|
var data = {
|
|
'id': this.nodeInfo.docId,
|
|
}
|
|
getInfo(data).then((res) => {
|
|
console.log(res.data.data)
|
|
if (res.data.data.type == 1) {
|
|
this.editType = "tw";
|
|
}
|
|
if (res.data.data.type == 2) {
|
|
this.editType = "sp";
|
|
}
|
|
if (res.data.data.type == 3) {
|
|
this.editType = "dh";
|
|
}
|
|
if (res.data.data.type == 4) {
|
|
this.editType = "js";
|
|
}
|
|
|
|
this.editName = res.data.data.name;
|
|
this.editLeve = res.data.data.level;
|
|
this.editParentId = res.data.data.parentId;
|
|
this.editFileId = res.data.data.fileId;
|
|
this.editRelation = res.data.data.relation;
|
|
if (this.editType == 'tw') {
|
|
this.editContent = res.data.data.contentInfo;
|
|
var imgs = res.data.data.imgList;
|
|
console.log(imgs)
|
|
this.fileList = [];
|
|
|
|
for (let j = 0; j < imgs.length; j++) {
|
|
var ii = {
|
|
uuid: imgs[j].imgId,
|
|
url: imgs[j].imgUrl
|
|
}
|
|
this.fileList.push(ii)
|
|
}
|
|
}
|
|
if (this.editType == 'sp') {
|
|
console.log(res.data.data.spUrl)
|
|
this.videoFileList = [];
|
|
this.showVideoPath = "";
|
|
if (res.data.data.spUrl != null) {
|
|
this.videoFileList.push({url: res.data.data.spUrl, name: res.data.data.name});
|
|
this.showVideoPath = res.data.data.spUrl;
|
|
}
|
|
}
|
|
|
|
|
|
});
|
|
},
|
|
async editSubmit() {
|
|
if (this.editType == 'tw') {
|
|
const content = this.editName
|
|
const value = this.editContent
|
|
const fileId = this.editFileId
|
|
const relation = this.editRelation
|
|
|
|
if (content) {
|
|
var urlStr = "";
|
|
for (let f = 0; f < this.fileList.length; f++) {
|
|
if (f == 0) {
|
|
if (this.fileList[f].response != null) {
|
|
urlStr = this.fileList[f].response.data.url
|
|
} else {
|
|
urlStr = this.fileList[f].url
|
|
}
|
|
|
|
} else {
|
|
if (this.fileList[f].response != null) {
|
|
urlStr = urlStr + "," + this.fileList[f].response.data.url
|
|
} else {
|
|
urlStr = urlStr + "," + this.fileList[f].url
|
|
}
|
|
|
|
}
|
|
}
|
|
// 构造数据
|
|
const data = {
|
|
id: this.nodeInfo.docId,
|
|
fileId: fileId,
|
|
name: content,
|
|
contentInfo: value,
|
|
relation: relation,
|
|
parentId: this.editParentId,
|
|
level: this.editLeve,
|
|
type: 1,
|
|
imgs: urlStr,
|
|
};
|
|
|
|
try {
|
|
editInfoGraph(data).then((res) => {
|
|
console.log(res);
|
|
this.isModalVisible2 = false;
|
|
})
|
|
|
|
// 刷新图谱
|
|
this.visGraph.drawData(this.graphData);
|
|
this.reLayout();
|
|
// this.closeModal(); // 关闭模态框
|
|
|
|
} catch (error) {
|
|
console.error('Failed to add new branch:', error);
|
|
alert('Failed to add new branch. Please try again.');
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
if (this.editType == 'sp') {
|
|
const content = this.editName.trim();
|
|
const relation = this.editRelation.trim();
|
|
console.log(this.videoFileList[0].url);
|
|
|
|
if (content) {
|
|
// 构造数据
|
|
const data = {
|
|
id: this.nodeInfo.docId,
|
|
type: 2,
|
|
name: content,
|
|
relation: relation,
|
|
parentId: this.editParentId,
|
|
level: this.editLeve,
|
|
spUrl: this.videoFileList[0].url
|
|
};
|
|
|
|
try {
|
|
editInfoGraph(data).then((res) => {
|
|
console.log(res);
|
|
this.isModalVisible2 = false;
|
|
})
|
|
|
|
// 刷新图谱
|
|
this.visGraph.drawData(this.graphData);
|
|
this.reLayout();
|
|
} catch (error) {
|
|
console.error('Failed to add new branch:', error);
|
|
alert('Failed to add new branch. Please try again.');
|
|
}
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
|
|
//上传照片请
|
|
//照片墙
|
|
// 处理图片移除
|
|
handleRemove(file, fileList) {
|
|
console.log('File removed:', file);
|
|
console.log('Current fileList:', fileList);
|
|
},
|
|
// 当超过限制时触发
|
|
handleExceed(files, fileList) {
|
|
this.$message.warning(`当前限制选择 9 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
|
|
},
|
|
// 在上传前进行校验
|
|
beforeUpload(file) {
|
|
const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png';
|
|
const isLt2M = file.size / 1024 / 1024 < 10; // 限制大小不超过2MB
|
|
|
|
if (!isJPGorPNG) {
|
|
this.$message.error('上传图片只能是 JPG/PNG 格式!');
|
|
}
|
|
if (!isLt2M) {
|
|
this.$message.error('上传图片大小不能超过 2MB!');
|
|
}
|
|
return isJPGorPNG && isLt2M;
|
|
},
|
|
// 上传成功后的回调
|
|
handleSuccess(response, file, fileList) {
|
|
|
|
console.log('Upload success:', response);
|
|
// 更新 fileList，确保新上传的文件被正确添加到列表中
|
|
console.log(fileList)
|
|
this.fileList = fileList;
|
|
this.isUpload = 1;
|
|
},
|
|
// 上传失败后的回调
|
|
// eslint-disable-next-line no-unused-vars
|
|
handleError(err, file, fileList) {
|
|
console.log('Upload error:', err);
|
|
this.$message.error('上传失败，请重试！');
|
|
},
|
|
|
|
getFileIdByDocId(data) {
|
|
return getFileIdByDocId(data);
|
|
},
|
|
closeModal() {
|
|
this.isModalVisible1 = false;
|
|
this.newBranchContent = '';
|
|
this.selectedNode = null;
|
|
},
|
|
|
|
closeModal1() {
|
|
this.isModalVisible2 = false;
|
|
this.editContent = '';
|
|
this.selectedNode = null;
|
|
},
|
|
async addNewBranch() {
|
|
if (this.typeValue == 'tw') {
|
|
const content = this.newBranchContent.trim();
|
|
const value = this.newBranchValue.trim();
|
|
const fileId = this.newBranchFileId.trim();
|
|
const relation = this.newBranchRelation.trim();
|
|
|
|
if (this.selectedNode && content && value) {
|
|
|
|
var urlStr = "";
|
|
|
|
for (let f = 0; f < this.fileList.length; f++) {
|
|
if (f == 0) {
|
|
if (this.fileList[f].response != null) {
|
|
urlStr = this.fileList[f].response.data.url
|
|
} else {
|
|
urlStr = this.fileList[f].url
|
|
}
|
|
|
|
} else {
|
|
if (this.fileList[f].response != null) {
|
|
urlStr = urlStr + "," + this.fileList[f].response.data.url
|
|
} else {
|
|
urlStr = urlStr + "," + this.fileList[f].url
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
// 构造数据
|
|
const data = {
|
|
fileId: fileId,
|
|
txtName: content,
|
|
TxtValue: value,
|
|
relation: relation,
|
|
parentId: this.newBranchParentId,
|
|
level: this.newBranchLevel,
|
|
nodeType: 'tw',
|
|
imgs: urlStr
|
|
};
|
|
|
|
try {
|
|
await addNode(data);
|
|
|
|
// 创建新节点
|
|
const newNodeId = Date.now().toString(); // 使用时间戳作为唯一ID
|
|
const newNode = {
|
|
id: newNodeId,
|
|
label: content,
|
|
properties: {name: content, docId: newNodeId, level: this.newBranchLevel},
|
|
...this.getNodeStyle(this.newBranchLevel) // 根据层级应用样式
|
|
};
|
|
const newLink = {
|
|
source: this.selectedNode.id,
|
|
target: newNodeId,
|
|
type: '',
|
|
};
|
|
this.graphData.nodes.push(newNode);
|
|
this.graphData.links.push(newLink);
|
|
|
|
// 刷新图谱
|
|
this.visGraph.drawData(this.graphData);
|
|
this.reLayout();
|
|
this.closeModal(); // 关闭模态框
|
|
this.isModalVisible = false;
|
|
} catch (error) {
|
|
console.error('Failed to add new branch:', error);
|
|
alert('Failed to add new branch. Please try again.');
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
if (this.typeValue == 'sp') {
|
|
console.log(this.videoFileList[0].url)
|
|
const content = this.newBranchContent.trim();
|
|
const relation = this.newBranchRelation.trim();
|
|
|
|
if (this.selectedNode && content) {
|
|
// 构造数据
|
|
const data = {
|
|
nodeType: this.typeValue,
|
|
txtName: content,
|
|
relation: relation,
|
|
parentId: this.newBranchParentId,
|
|
level: this.newBranchLevel,
|
|
spUrl: this.videoFileList[0].url
|
|
};
|
|
|
|
try {
|
|
await addNode(data);
|
|
|
|
// 创建新节点
|
|
const newNodeId = Date.now().toString(); // 使用时间戳作为唯一ID
|
|
const newNode = {
|
|
id: newNodeId,
|
|
label: content,
|
|
properties: {name: content, docId: newNodeId, level: this.newBranchLevel},
|
|
...this.getNodeStyle(this.newBranchLevel) // 根据层级应用样式
|
|
};
|
|
const newLink = {
|
|
source: this.selectedNode.id,
|
|
target: newNodeId,
|
|
type: '',
|
|
};
|
|
this.graphData.nodes.push(newNode);
|
|
this.graphData.links.push(newLink);
|
|
|
|
// 刷新图谱
|
|
this.visGraph.drawData(this.graphData);
|
|
this.reLayout();
|
|
this.closeModal(); // 关闭模态框
|
|
} catch (error) {
|
|
console.error('Failed to add new branch:', error);
|
|
alert('Failed to add new branch. Please try again.');
|
|
}
|
|
}
|
|
}
|
|
|
|
},
|
|
// 执行布局算法
|
|
reLayout(alpha) {
|
|
var that = this;
|
|
if (alpha == null) {
|
|
that.visLayout = null;
|
|
that.visLayout = new LayoutFactory(this.visGraph.getGraphData()).createLayout('fastFR');
|
|
that.visLayout.resetConfig({
|
|
label: {
|
|
show: true
|
|
},
|
|
friction: 0.8,
|
|
linkDistance: 400,
|
|
linkStrength: 0.2,
|
|
charge: -1000,
|
|
gravity: 0.01,
|
|
noverlap: true,
|
|
size: [that.visGraph.stage.width, that.visGraph.stage.height]
|
|
});
|
|
} else {
|
|
that.visLayout.alpha += (alpha > 1 ? 0.2 : alpha); //继续运动
|
|
}
|
|
|
|
runLayout();//开始继续动画执行
|
|
|
|
//通过动画帧控制控制布局算法的执行，有动画效果
|
|
function runLayout() {
|
|
cancelAnimationFrame(that.layoutLoopName);//停止动画控制
|
|
that.visLayout.runLayout(); //运行布局算法
|
|
that.visGraph.refresh();
|
|
if (that.visLayout.alpha > 0.05) {
|
|
that.layoutLoopName = requestAnimationFrame(runLayout);
|
|
} else {
|
|
if (that.visGraph.currentNode && that.visGraph.currentNode.isDragging) {
|
|
that.visLayout.alpha = 0.1; //继续运动
|
|
that.layoutLoopName = requestAnimationFrame(runLayout);
|
|
} else {
|
|
that.visLayout.alpha = 0; //停止运动
|
|
cancelAnimationFrame(that.layoutLoopName);
|
|
}
|
|
}
|
|
}
|
|
|
|
// this.autoLayout();
|
|
},
|
|
zhengl(data) {
|
|
const nodes = []
|
|
const links = [] // 存放节点和关系
|
|
|
|
var nodeList = data.nodes;
|
|
var lineList = data.links;
|
|
var allOne = ""
|
|
|
|
console.log(nodeList)
|
|
if (nodeList != undefined) {
|
|
allOne = nodeList[0].docId
|
|
for (let a = 0; a < nodeList.length; a++) {
|
|
const group = parseInt(nodeList[a].group, 10);
|
|
const style = this.getNodeStyle(group);
|
|
|
|
nodes.push({
|
|
id: nodeList[a].id,
|
|
label: nodeList[a].name,
|
|
properties: {name: nodeList[a].name, docId: nodeList[a].docId, parent: allOne, leve: nodeList[a].group, type:nodeList[a].type},
|
|
...style // 展开 style 对象以应用样式属性
|
|
});
|
|
}
|
|
}
|
|
|
|
// var allOne = nodeList[0].docId
|
|
|
|
|
|
if (lineList != undefined) {
|
|
for (let b = 0; b < lineList.length; b++) {
|
|
|
|
var bbb = {name: lineList[b].relate}
|
|
links.push({
|
|
source: lineList[b].source,
|
|
target: lineList[b].target,
|
|
type: lineList[b].relate,
|
|
properties: bbb,
|
|
color: '202,202,202',
|
|
lineWidth: 3,
|
|
})
|
|
}
|
|
}
|
|
|
|
|
|
this.demoData = {
|
|
"nodes": nodes,
|
|
"links": links
|
|
}
|
|
this.drawGraphData();
|
|
},
|
|
// color: '255,111,62',
|
|
|
|
getNodeStyle(group) {
|
|
const styles = [
|
|
{size: 450, width: 450, height: 450, color: '255,111,62', font: 'normal 68px Arial', fontColor: '255,255,255'},
|
|
{size: 350, width: 350, height: 350, color: '255,163,132', font: 'normal 68px Arial', fontColor: '255,255,255'},
|
|
{size: 300, width: 300, height: 300, color: '0,246,255', font: 'normal 50px Arial', fontColor: '0,0,0'},
|
|
{size: 250, width: 250, height: 250, color: '0,198,255', font: 'normal 40px Arial', fontColor: '0,0,0'},
|
|
{size: 200, width: 200, height: 200, color: '42,152,255', font: 'normal 32px Arial', fontColor: '255,255,255'},
|
|
{size: 150, width: 150, height: 150, color: '0,95,183', font: 'normal 30px Arial', fontColor: '0,0,0'},
|
|
{size: 130, width: 130, height: 130, color: '0,62,164', font: 'normal 28px Arial', fontColor: '255,255,255'}
|
|
];
|
|
|
|
return styles[group] || {};
|
|
},
|
|
|
|
//视频相关
|
|
//视频
|
|
beforeUploadVideo(file) {
|
|
|
|
const isLt1024M = (file.size / 1024 / 1024) < 1024;
|
|
this.form.videoSize = file.size / 1024 / 1024;
|
|
//判断是不是MP4格式视频
|
|
if (['video/mp4'].indexOf(file.type) === -1) {
|
|
this.$message.error('请上传正确的视频格式');
|
|
return false;
|
|
}
|
|
//单个视频大小限制在1024M以内
|
|
if (!isLt1024M) {
|
|
this.$message.error('上传视频大小不能超过1024MB哦!');
|
|
return false;
|
|
}
|
|
return true;
|
|
},
|
|
// eslint-disable-next-line no-unused-vars
|
|
uploadVideoProcess(event, file, fileList) {
|
|
this.videoFlag = true;
|
|
this.videoUploadPercent = file.percentage.toFixed(0) * 1;
|
|
},
|
|
updateCourseUrl() {
|
|
this.form.courseUrl = this.showVideoPath;
|
|
console.log('Updated courseUrl:', this.form.courseUrl);
|
|
},
|
|
|
|
// 上传成功回调
|
|
// eslint-disable-next-line no-unused-vars
|
|
handleVideoSuccess(response, file, fileList) {
|
|
console.log(response.data.url)
|
|
try {
|
|
// 确保res是一个非空字符串
|
|
if (!response.data.url || typeof response.data.url !== 'string') {
|
|
this.$message.error('视频上传失败，请检查服务器响应');
|
|
return;
|
|
}
|
|
const videoUrl = response.data.url.trim();
|
|
if (videoUrl === '') {
|
|
this.$message.error('收到无效的视频URL，请检查服务器响应');
|
|
return;
|
|
}
|
|
// 检查重复
|
|
if (this.videoFileList.some(video => video.url === videoUrl)) {
|
|
this.$message.warning('该视频已存在于列表中');
|
|
return;
|
|
}
|
|
this.videoFileList.push({url: videoUrl, name: file.name});
|
|
this.showVideoPath = this.videoFileList.map(f => f.url).join(',');
|
|
this.updateCourseUrl();
|
|
this.$message.success('视频上传成功');
|
|
console.log('Updated videoFileList:', this.videoFileList);
|
|
console.log('Updated showVideoPath:', this.showVideoPath);
|
|
this.$nextTick(() => {
|
|
this.videoFlag = false;
|
|
});
|
|
} catch (error) {
|
|
this.$message.error('处理上传响应时发生错误：' + error.message);
|
|
console.error('Error in handleVideoSuccess:', error);
|
|
}
|
|
},
|
|
handleVideoRemove(video) {
|
|
if (!video) return;
|
|
// 使用uid唯一标识符进行匹配
|
|
const index = this.videoFileList.findIndex(item => item.uid === video.uid);
|
|
if (index > -1) { // 更新UI
|
|
this.videoFileList.splice(index, 1);
|
|
this.showVideoPath = this.videoFileList.map(f => f.url).join(',');
|
|
this.updateCourseUrl();
|
|
}
|
|
},
|
|
|
|
},
|
|
mounted() {
|
|
this.userType = localStorage.getItem("type");
|
|
this.userName = localStorage.getItem("name");
|
|
this.getContentList();
|
|
this.getInfo();
|
|
},
|
|
created() {
|
|
|
|
var that = this;
|
|
|
|
|
|
//节点的点击事件
|
|
this.config.node.onClick = function (event, node) {
|
|
|
|
console.log(node.properties);
|
|
var data = {
|
|
'id': node.properties.docId,
|
|
}
|
|
getInfo(data).then((res) => {
|
|
|
|
var type = res.data.data.type;
|
|
if (type == 1) {
|
|
that.$router.push({path: '/TwInfoXq', query: {id: res.data.data.id, level: res.data.data.level, type: "tw"}})
|
|
console.log("查看文章详情")
|
|
}
|
|
if (type == 2) {
|
|
that.$router.push({path: '/SpInfoXq', query: {id: res.data.data.id, type: "sp"}})
|
|
}
|
|
});
|
|
};
|
|
}
|
|
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.content {
|
|
width: 100%;
|
|
height: 86%;
|
|
}
|
|
|
|
.leftContent {
|
|
width: 14%;
|
|
height: 100%;
|
|
float: left;
|
|
}
|
|
|
|
.leftBox1 {
|
|
width: 100%;
|
|
height: 10%;
|
|
margin-top: 5%;
|
|
color: #7cdeff;
|
|
}
|
|
|
|
.leftBox2 {
|
|
width: 100%;
|
|
height: 90%;
|
|
|
|
}
|
|
|
|
.muluBox {
|
|
margin: 0 14%;
|
|
height: 92%;
|
|
width: 72%;
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.muluList {
|
|
width: 100%;
|
|
height: 90%;
|
|
//background-color: #7cdeff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
z-index: 2;
|
|
margin-top: 20%;
|
|
|
|
}
|
|
|
|
.oneMulu {
|
|
width: 80%;
|
|
height: 2.5vw;
|
|
line-height: 2.5vw;
|
|
font-size: 0.9vw;
|
|
border-bottom: 1px solid rgba(112, 192, 227, 0.47);
|
|
margin-left: 10%;
|
|
color: #d1d3d7;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.oneMuluXuan {
|
|
width: 90%;
|
|
height: 2.5vw;
|
|
line-height: 2.1vw;
|
|
font-size: 0.9vw;
|
|
color: #13ffff;
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding-left: 10%;
|
|
position: relative;
|
|
}
|
|
|
|
|
|
.rightContent {
|
|
width: 84%;
|
|
height: 100%;
|
|
float: left;
|
|
position: relative;
|
|
}
|
|
|
|
|
|
.rightList {
|
|
width: 96%;
|
|
height: 88%;
|
|
position: absolute;
|
|
z-index: 2;
|
|
//background-color: #42b983;
|
|
margin-top: 1%;
|
|
margin-left: 2.6%;
|
|
margin-bottom: 5%;
|
|
border-radius: 1vw 1vw 1vw 1vw;
|
|
//background-color: rgba(85, 174, 248, 0.22);
|
|
}
|
|
|
|
.rightListContent {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
z-index: 2;
|
|
top: 1%;
|
|
|
|
}
|
|
|
|
.tupu {
|
|
width: 100%;
|
|
height: 90%;
|
|
position: absolute;
|
|
z-index: 3;
|
|
top: 7.5%;
|
|
}
|
|
|
|
.gContainer {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
height: 39vw;
|
|
border-radius: 2vw;
|
|
}
|
|
|
|
.oneRight {
|
|
width: 98%;
|
|
height: 5vw;
|
|
line-height: 5vw;
|
|
//background-color: #42b983;
|
|
margin: 0 1%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.pageList {
|
|
height: 1.5vw;
|
|
width: 20%;
|
|
//background-color: pink;
|
|
margin: 0 40%;
|
|
position: absolute;
|
|
z-index: 2;
|
|
bottom: -0.5%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.custom-dialog {
|
|
margin-top: 0vh !important;
|
|
}
|
|
|
|
|
|
.graphcontains1 {
|
|
width: 60%;
|
|
height: 2vw;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
margin-left: 5%;
|
|
|
|
}
|
|
|
|
.graphcontains2 {
|
|
width: 60%;
|
|
height: 2vw;
|
|
position: relative;
|
|
display: flex
|
|
;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
margin-left: 3%;
|
|
|
|
}
|
|
|
|
input {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
outline: none;
|
|
color: white; /* 文字颜色 */
|
|
background-color: transparent;
|
|
padding-left: 3%;
|
|
position: absolute;
|
|
z-index: 2000;
|
|
|
|
}
|
|
|
|
input::placeholder {
|
|
color: rgba(255, 255, 255, 0.54);
|
|
opacity: 1; /* Firefox 默认将 placeholder 的透明度设置为 0.54 */
|
|
|
|
}
|
|
|
|
|
|
select {
|
|
//background-image: url("../assets/img/zcType.png");
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
outline: none;
|
|
color: white; /* 文字颜色 */
|
|
background-color: transparent;
|
|
padding-left: 3%;
|
|
position: absolute;
|
|
z-index: 2000;
|
|
appearance: none;
|
|
}
|
|
|
|
option {
|
|
color: black;
|
|
background: rgb(255, 255, 255);
|
|
line-height: 20px;
|
|
}
|
|
|
|
option:hover {
|
|
background: #EBCCD1;
|
|
}
|
|
|
|
.bgBao{
|
|
width: 35vw;
|
|
height: 42vw;
|
|
border-radius: 1vw;
|
|
background-color: #FFFFFF;
|
|
position: absolute;
|
|
z-index: 5001;
|
|
left: 32%;
|
|
top: 10%;
|
|
}
|
|
|
|
|
|
</style>
|
|
|