zhouyuanzhi/IETM-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改

Browse Source
This commit is contained in:
CIMYong_Work
2025-10-17 08:28:46 +08:00
parent da3ab119d5
commit 252b2e318b
3 changed files with 310 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/assets/css/style.css
View File

@@ -39,12 +39,13 @@
} }
.rightDiv { .rightDiv {
height: calc(100% - 7px); height: calc(100% - 7px);
width: calc(100% - 372px); width:100%;
/* width: calc(100% - 372px); */
/* background: lightcoral; */ /* background: lightcoral; */
/* height: 600px; */ /* height: 600px; */
overflow: hidden; overflow: hidden;
/* overflow: hidden auto; */ /* overflow: hidden auto; */
padding: 20px; padding: 20px 0;
padding-top: 4px; padding-top: 4px;
padding-right: 0; padding-right: 0;
padding-bottom: 0; padding-bottom: 0;
@@ -536,13 +537,30 @@ button:hover {
/* border-radius: 8px; */ /* border-radius: 8px; */
position: relative; position: relative;
} }
.tree-container {
width: 100% !important; /* 确保容器占满父元素宽度 */
overflow-x: auto !important; /* 允许容器横向滚动 */
padding-bottom: 10px; /* 预留横向滚动条空间 */
}
/* 确保树形组件不被限制宽度 */
.elTree {
min-width: 100% !important; /* 至少占满容器宽度 */
width: auto !important; /* 允许根据内容自动扩展宽度 */
overflow-x: auto !important; /* 强制显示横向滚动条 */
padding-right: 8px;
padding-bottom: 8px; /* 避免内容被横向滚动条遮挡 */
}
.el-tree-node__children{ .el-tree-node__children{
overflow:auto; overflow:auto;
} }
.el-tree-node__content { .el-tree-node__content {
max-width: 280px; max-width: none !important; /* 取消最大宽度限制 */
width: auto !important; /* 允许内容撑开宽度 */
overflow: visible !important;
/* max-width: 280px;
height: 30px; height: 30px;
overflow: auto; overflow: auto; */
} }
.el-tree-node__content span div{ .el-tree-node__content span div{
/* overflow: auto; */ /* overflow: auto; */
@@ -879,18 +897,49 @@ button:hover {
} }
/* 针对树形组件容器添加横向滚动支持 */ /* 针对树形组件容器添加横向滚动支持 */
.tree-container { .tree-container {
/* 限制容器最大宽度（可根据实际布局调整） */ /* 保留现有样式，添加高度限制 */
width: 100%; height: calc(100% - 40px); /* 减去标题高度（根据实际调整） */
height:calc(100% - 90px); overflow: hidden; /* 避免容器自身滚动 */
overflow-x: hidden; /* 横向溢出时显示滚动条 */ }
padding-bottom: 0; /* 预留底部空间，避免滚动条遮挡内容 */ /* 添加以下样式 */
.el-scrollbar {
/* 让滚动条占满容器剩余高度 */
height: calc(100% - 80px); /* 36px 为 navTitle 的大致高度 */
display: block; /* 确保高度生效 */
}
/* 调整树形组件高度，使其在滚动区域内 */
.elTree {
max-height: 100% !important; /* 覆盖原有 max-height，使用滚动条高度 */
height: 100% !important;
}
/* 修复滚动条容器的隐藏问题 */
.el-scrollbar__wrap {
overflow-x: auto !important;
overflow-y: auto !important;
margin-right: -17px; /* 补偿滚动条宽度，避免内容被截断 */
margin-bottom: -17px;
}
/* 确保滚动条轨道可见 */
.el-scrollbar__track {
background: rgba(0, 0, 0, 0.05);
}
.el-scrollbar__thumb {
background: rgba(0, 0, 0, 0.2);
border-radius: 4px;
} }
/* 确保树形组件本身不限制宽度，让内容能撑开容器 */ /* 确保树形组件本身不限制宽度，让内容能撑开容器 */
.elTree { .elTree {
min-width: 100%; /* 至少占满容器宽度 */ /*
display: inline-block; /* 让树组件宽度由内容决定 */ min-width: 100%;
white-space: nowrap; /* 防止节点内容自动换行 */ display: inline-block; /
white-space: nowrap; */
max-height: calc(100% - 38px);
overflow: visible !important; /* 避免覆盖滚动条 */
padding-right: 8px;
} }
/* 优化节点文本显示，避免过长文本被截断 */ /* 优化节点文本显示，避免过长文本被截断 */
@@ -1095,7 +1144,10 @@ button:hover {
text-align: left !important; text-align: left !important;
} }
.navTitle{ .navTitle{
position: relative; position: relative; /* 保持在文档流中 */
z-index: 10; /* 避免被树形组件遮挡 */
padding-bottom: 8px; /* 与树形组件保持间距 */
border-bottom: 1px solid #f0f0f0; /* 可选：添加分隔线 */
} }
.navTitle p { .navTitle p {
margin: 0; margin: 0;
@@ -1107,10 +1159,10 @@ button:hover {
/* 可选样式 */ /* 可选样式 */
} }
.iconImgMulu{ .iconImgMulu{
position: absolute; position: absolute;
right: 0; right: 10px;
/* bottom: 0; */ bottom: 0;
top: 7px; top: 0;
margin: auto; margin: auto;
height: 20px; height: 20px;
cursor: pointer; cursor: pointer;

BIN
src/assets/img/zw.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

379
src/components/wang.vue
View File

@@ -1,17 +1,17 @@
<template> <template>
<div class="editor-container"> <div style="height:100%;width:100%;">
<!-- <router-link to="/WangG2">Wang2 2页面</router-link> <el-container style="height:100%;width:100%;">
<router-link to="/WangG3">Wang3 3页面</router-link> --> <el-aside
<!-- <router-link to="/WangG4">Wang34 4页面</router-link> --> :width="leftWidth + 'px'"
<!-- 左侧操作框 --> style="position: relative; overflow: hidden;"
<!-- <div class="leftDiv" v-if='isLoadXml' :style="{'maxHeight':leftHeight+'px','minHeight':'100px'}" > --> >
<!-- <a href="/#/wangG2" target="_blank">asdasda</a> --> <div class="drag-handle" @mousedown="startDrag"></div>
<div class="leftDiv" v-if='isLoadXml' > <div class="leftDiv" v-if='isLoadXml' style="width:100%;" >
<div id='navMain'> <div id='navMain'>
<!-- 操作栏 --> <!-- 操作栏 -->
<div class="operation-buttons"> <div class="operation-buttons">
<!-- 节点搜索框 --> <!-- 节点搜索框 -->
<div style="margin:5px auto;"> <div style="margin:5px auto;width:100%;">
<el-input <el-input
placeholder="输入节点名称搜索" placeholder="输入节点名称搜索"
v-model="searchText" v-model="searchText"
@@ -36,7 +36,11 @@
<p @click='clearNodeState' :title="getBookName">{{getBookName}}</p> <p @click='clearNodeState' :title="getBookName">{{getBookName}}</p>
<img @click='editBookName' class='iconImgMulu' title='编辑书名' src="../assets/img/bianji.png" alt=""> <img @click='editBookName' class='iconImgMulu' title='编辑书名' src="../assets/img/bianji.png" alt="">
</div> </div>
<!-- 目录结构树 -->
<el-scrollbar style="">
<!-- 滚动内容区域 -->
<div class="scroll-content">
<!-- 目录结构树 -->
<el-tree <el-tree
class="elTree elTreeMain gd" class="elTree elTreeMain gd"
ref="tree" ref="tree"
@@ -89,37 +93,61 @@
<span :title="data.id + '-' + data.name" :class="{ 'highlight': isHighlight(data) }"> <span :title="data.id + '-' + data.name" :class="{ 'highlight': isHighlight(data) }">
{{ data.name }} {{ data.name }}
</span> </span>
<!-- （关键）叶子节点同样条件显示【修改】 -->
<!-- <span
class="modify-btn"
v-if="showModifyBtn && hasMinorVersion01(data)"
@click.stop="handleModify(data)"
>
【修改】
</span> -->
</div> </div>
</template> </template>
</span> </span>
</el-tree> </el-tree>
</div>
</el-scrollbar>
</div> </div>
</div> </div>
<!-- <div id='nav'> <!-- <div id='nav'>
<nav-temp /> <nav-temp />
</div> --> </div> -->
</div> </div>
<!-- 右侧容器 --> </el-aside>
<div class="rightDiv"> <el-main style="">
<div class="rightDiv">
<div class="bName" :title="getBookName">{{getBookName}}</div> <div class="bName" :title="getBookName">{{getBookName}}</div>
<!-- 编辑框 --> <!-- 编辑框 -->
<!-- :style="{height:editorHeight+'px'}" --> <!-- :style="{height:editorHeight+'px'}" -->
<!-- <el-button
type="primary"
icon="el-icon-s-data"
@click="countDomNodes"
style="margin: 5px;"
>
统计DOM节点数量
</el-button> -->
<!-- :class="{ editor2Opacity: dialogVisibleNav||dialogVisibleNavDel|| dialogVisible||dialogVisibleImg||dialogVisibleRight||dialogVisibleTips||dialogVisibleBland||dialogVisibleHistory||dialogVisibleTips2||editBookNameDialog }" --> <!-- :class="{ editor2Opacity: dialogVisibleNav||dialogVisibleNavDel|| dialogVisible||dialogVisibleImg||dialogVisibleRight||dialogVisibleTips||dialogVisibleBland||dialogVisibleHistory||dialogVisibleTips2||editBookNameDialog }" -->
<div id="editor" v-show='currentNode' :class="{ editor2Opacity: dialogVisibleNav||dialogVisibleNavDel|| dialogVisible||dialogVisibleImg||dialogVisibleRight||dialogVisibleTips||dialogVisibleBland||dialogVisibleHistory||dialogVisibleTips2||editBookNameDialog }" ref="editor" ></div> <div id="editor" v-show='currentNode' :class="{ editor2Opacity: dialogVisibleNav||dialogVisibleNavDel|| dialogVisible||dialogVisibleImg||dialogVisibleRight||dialogVisibleTips||dialogVisibleBland||dialogVisibleHistory||dialogVisibleTips2||editBookNameDialog }" ref="editor" ></div>
<!-- 提示信息 --> <!-- 提示信息 -->
<!-- <div class="paAutoStyle" v-show="!currentNode && isLoadXml">请打开所要编辑的的章节目录</div> <!-- <div class="paAutoStyle" v-show="!currentNode && isLoadXml">请打开所要编辑的的章节目录</div>
<div class="paAutoStyle" v-show="!isLoadXml">请加载所要编辑的文档目录</div> --> <div class="paAutoStyle" v-show="!isLoadXml">请加载所要编辑的文档目录</div> -->
</div> </div>
</el-main>
</el-container>
<div class="paAuto paAutoStyle" v-show="!isLoadMsg">请加载有需编辑的项目</div>
<!-- 统计结果弹窗 -->
<el-dialog
title="DOM节点统计结果"
:visible.sync="countDialogVisible"
width="40%"
>
<div class="statistics-result">
<p>目标容器: {{ countTarget }}</p>
<p>总DOM节点数量: <span class="count-number">{{ domCount }}</span></p>
<p>元素节点数量: <span class="count-number">{{ elementCount }}</span></p>
<p>文本节点数量: <span class="count-number">{{ textCount }}</span></p>
<p>注释节点数量: <span class="count-number">{{ commentCount }}</span></p>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="countDialogVisible = false">关闭</el-button>
</span>
</el-dialog>
<!-- 历史弹窗 --> <!-- 历史弹窗 -->
<el-dialog <el-dialog
@@ -390,7 +418,7 @@
<!-- 切换目录时候未保存提示 --> <!-- 切换目录时候未保存提示 -->
<el-dialog <el-dialog
title="提示" title="提 示"
:visible.sync="dialogVisibleTips2" :visible.sync="dialogVisibleTips2"
width="50%" width="50%"
class="custom-dialog" class="custom-dialog"
@@ -509,7 +537,6 @@
<el-button type="primary" @click="editBookFun(true)">修改</el-button> <el-button type="primary" @click="editBookFun(true)">修改</el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
@@ -518,11 +545,20 @@ import WangEditor from 'wangeditor';
import brImg from '../assets/img/br.png'; import brImg from '../assets/img/br.png';
import '../assets/css/style.css' import '../assets/css/style.css'
export default { export default {
name: 'RichTextEditor', name: 'WangEditor',
components: { components: {
}, },
data() { data() {
return { return {
countDialogVisible: false,
domCount: 0,
elementCount: 0,
textCount: 0,
commentCount: 0,
countTarget: '',
leftWidth: 380,
isDragging: false,
isLoadMsg:false,
minLevel:'', minLevel:'',
maxLevel:'', maxLevel:'',
maxPermission:'', maxPermission:'',
@@ -903,19 +939,20 @@ export default {
currentImage: '',//暂无用 currentImage: '',//暂无用
scale: 1,//暂无用 scale: 1,//暂无用
rotation: 0,//暂无用 rotation: 0,//暂无用
isDragging: false,//暂无用
startX: 0,//暂无用 startX: 0,//暂无用
startY: 0,//暂无用 startY: 0,//暂无用
translateX: 0,//暂无用 translateX: 0,//暂无用
translateY: 0,//暂无用 translateY: 0,//暂无用
containerHeight: '90vh', //暂无用 动态控制高度 containerHeight: '90vh', //暂无用 动态控制高度
//查看图片end //查看图片end
oldSelector:[//基础标签模块 // oldSelector:[//基础标签模块
'div','code','hr','br','h1,h2,h3,h4','p','img','table','a','ul','ol','blockquote','pre', // 'div','code','hr','br','h1,h2,h3,h4','p','img','table','a','ul','ol','blockquote','pre',
], // ],
newSelector:[//替换后的标签模块 // newSelector:[//替换后的标签模块
'pDiv','pCode','pHr','pBr','pTitle','pDiv','pImg','pTable','pA','pUl','pOl','pBlockquote','pPre', // 'pDiv','pCode','pHr','pBr','pTitle','pDiv','pImg','pTable','pA','pUl','pOl','pBlockquote','pPre',
], // ],
newSelector:[],
oldSelector:[],
tempDivData:{//当前富文本str tempDivData:{//当前富文本str
innerHTML:'五' innerHTML:'五'
}, },
@@ -1039,7 +1076,7 @@ export default {
//接收富文本内容信息 //接收富文本内容信息
FrontLoadDM_g1(e) { FrontLoadDM_g1(e) {
console.log("加载文档数据 1111") console.log("加载文档数据 1111")
console.log('FrontLoadDM 参数接收111:',e,e.detail) // console.log('FrontLoadDM 参数接收111:',e,e.detail)
// this.editorShow = true; // this.editorShow = true;
let xmlContent = e.detail.trim(); let xmlContent = e.detail.trim();
@@ -1054,10 +1091,10 @@ export default {
// console.log("xmlContent",xmlContent) // console.log("xmlContent",xmlContent)
const parser = new DOMParser() const parser = new DOMParser()
const xmlDoc = parser.parseFromString(xmlContent, "text/xml") const xmlDoc = parser.parseFromString(xmlContent, "text/xml")
console.log("xmlDoc",xmlDoc) // console.log("xmlDoc",xmlDoc)
const contentNodes = xmlDoc.getElementsByTagName('content')[0]; const contentNodes = xmlDoc.getElementsByTagName('content')[0];
console.log("xmlDoc.getElementsByTagName('content')",xmlDoc.getElementsByTagName('content')) // console.log("xmlDoc.getElementsByTagName('content')",xmlDoc.getElementsByTagName('content'))
console.log("contentNodes",contentNodes) // console.log("contentNodes",contentNodes)
const rdfDescription = xmlDoc.querySelector('rdf\\:Description, Description'); const rdfDescription = xmlDoc.querySelector('rdf\\:Description, Description');
@@ -1076,7 +1113,7 @@ export default {
qualityVerification: this.getNodeValue(rdfDescription, 'dc\\:qualityVerification, qualityVerification'), qualityVerification: this.getNodeValue(rdfDescription, 'dc\\:qualityVerification, qualityVerification'),
permission: this.getNodeValue(rdfDescription, 'dc\\:permission, permission') permission: this.getNodeValue(rdfDescription, 'dc\\:permission, permission')
}; };
console.log('XML解析成功', this.form); // console.log('XML解析成功', this.form);
}else{ }else{
this.form = { this.form = {
name: '', name: '',
@@ -1092,10 +1129,10 @@ export default {
console.log("目录解析不成功 置空",this.form) console.log("目录解析不成功 置空",this.form)
} }
if (contentNodes) { if (contentNodes) {
console.log("处理前",contentNodes.innerHTML) // console.log("处理前",contentNodes.innerHTML)
let htmlContent = this.convertXmlContentToHtml(contentNodes.innerHTML) let htmlContent = this.convertXmlContentToHtml(contentNodes.innerHTML)
let htmlContent2 = this.completeModel3DTags(htmlContent) let htmlContent2 = this.completeModel3DTags(htmlContent)
console.log("处理后",htmlContent2) // console.log("处理后",htmlContent2)
const htmlContent3 = this.replaceModel3dToImg(htmlContent2); const htmlContent3 = this.replaceModel3dToImg(htmlContent2);
// this.editor.txt.html(htmlContent) // this.editor.txt.html(htmlContent)
//处理过后再导入 //处理过后再导入
@@ -1481,7 +1518,7 @@ export default {
if(src){ if(src){
const imgUrl = src?src:'http://localhost:5432/DM_Material/a1.jpg'; const imgUrl = src?src:'http://localhost:5432/DM_Material/a1.jpg';
console.log("地址",src,imgUrl) console.log("地址",src,imgUrl)
this.editor.cmd.do('insertHTML', `<img src="${imgUrl}" style="width: 100%;" alt="图片">`) this.editor.cmd.do('insertHTML', `<img src="${imgUrl}" width="50%" alt="图片">`)
} }
} }
}, },
@@ -1510,54 +1547,6 @@ export default {
return htmlString.replace(regex, '<img$1class="$2model3d$3"$4>'); return htmlString.replace(regex, '<img$1class="$2model3d$3"$4>');
}, },
// // 插入视频
// insertVideo() {
// // const videoUrl = 'http://youneed.top:10017/uploads/video.mp4'
// const videoUrl = 'https://r1.realme.net/general/20250530/17485780109181ed6767541a64e7d90626e0a3fd1aaae.mp4?type=video/mp4';
// const videoId = `video-${Date.now()}`
// // 创建视频HTML
// const videoHtml = `
// <div class="video-wrapper" data-video-id="${videoId}">
// <video controls width="50%" style='margin:auto' data-video-id="${videoId}">
// <source src="${videoUrl}" type="video/mp4">
// </video>
// <div class="video-controls" style='display:none;'>
// <span class="video-delete" data-video-id="${videoId}">× 删除</span>
// </div>
// </div>
// <p><br></p>
// `
// // 使用编辑器命令插入
// this.editor.cmd.do('insertHTML', videoHtml)
// // 添加删除事件监听
// this.$nextTick(() => {
// const btn = document.querySelector(`button[data-video-id="${videoId}"]`)
// if (btn) {
// btn.onclick = (e) => {
// e.preventDefault()
// this.deleteVideoById(videoId)
// }
// }
// })
// },
// // 根据ID删除视频（修正版）
// deleteVideoById(videoId) {
// const container = document.querySelector(`.video-container[data-video-id="${videoId}"]`)
// if (container) {
// container.remove()
// this.editor.txt.html(this.editor.txt.html()) // 刷新编辑器
// }
// },
dmcTable() { dmcTable() {
if(this.dmcHint){ if(this.dmcHint){
this.dmcHint = false; this.dmcHint = false;
@@ -2537,18 +2526,23 @@ export default {
//富文本内容打标签 //富文本内容打标签
dataXmlProcessing(type,saveId) { dataXmlProcessing(type,saveId) {
let html = this.editor.txt.html() let html_1 = '';
console.log('保存内容',html); let html = '';
// 正则表达式：匹配img、audio、video标签的src属性 if(this.editor){
// 支持三种标签：<img ...>、<audio ...>、<video ...> html = this.editor.txt.html()
// 捕获组1: 标签名和src="之前的部分 console.log('保存内容',html);
// 捕获组2: 提取文件名（最后一个/后面的内容） // 正则表达式：匹配img、audio、video标签的src属性
// 捕获组3: 保留"及之后的部分 // 支持三种标签：<img ...>、<audio ...>、<video ...>
const reg = /(<(img|audio|video)[^>]+src=")[^"]+\/([^"]+)("[^>]*>)/gi; // 捕获组1: 标签名和src="之前的部分
// 捕获组2: 提取文件名（最后一个/后面的内容）
// 捕获组3: 保留"及之后的部分
const reg = /(<(img|audio|video)[^>]+src=")[^"]+\/([^"]+)("[^>]*>)/gi;
// 替换为：src="文件名"
html_1 = html.replace(reg, '$1$3$4');
console.log('解析地址：',html_1)
}
// 替换为：src="文件名"
let html_1 = html.replace(reg, '$1$3$4');
console.log('解析地址：',html_1)
// const reg2 = /(<(img|audio|video)[^>]+src=")(?!http:\/\/)([^"]+)("[^>]*>)/gi; // const reg2 = /(<(img|audio|video)[^>]+src=")(?!http:\/\/)([^"]+)("[^>]*>)/gi;
// let jc = 'http://localhost:5432/'; // let jc = 'http://localhost:5432/';
@@ -2565,10 +2559,63 @@ export default {
this.xh(this.oldSelector,this.newSelector,type,saveId); this.xh(this.oldSelector,this.newSelector,type,saveId);
}, },
countDomNodes() {
// 重置计数
this.domCount = 0
this.elementCount = 0
this.textCount = 0
this.commentCount = 0
// 这里可以改为你需要统计的容器选择器
// 例如: '#editor' 或 '.tree-container' 或 'body'
const targetSelector = '#editor'
const container = document.querySelector(targetSelector)
if (!container) {
this.$message.error('未找到目标容器')
return
}
this.countTarget = targetSelector
// 递归统计所有节点
this.traverseNodes(container)
// 显示结果弹窗
this.countDialogVisible = true
},
// 递归遍历节点并计数
traverseNodes(node) {
if (!node) return
// 总节点数+1
this.domCount++
// 分类计数
switch(node.nodeType) {
case 1: // 元素节点
this.elementCount++
break
case 3: // 文本节点
// 过滤空白文本节点
if (node.textContent.trim()) {
this.textCount++
}
break
case 8: // 注释节点
this.commentCount++
break
}
// 递归处理子节点
if (node.childNodes && node.childNodes.length) {
Array.from(node.childNodes).forEach(child => {
this.traverseNodes(child)
})
}
},
// XML文件标签剔除 // XML文件标签剔除
restoreContentXh(html) { restoreContentXh(html) {
console.log("XML初始内容：",html) // console.log("XML初始内容：",html)
if (html) { if (html) {
this.tempDivData = document.createElement('div') this.tempDivData = document.createElement('div')
this.tempDivData.innerHTML = html this.tempDivData.innerHTML = html
@@ -2581,7 +2628,7 @@ export default {
dmTitles.forEach(dmTitle => { dmTitles.forEach(dmTitle => {
// 获取dmTitle的子节点 // 获取dmTitle的子节点
const children = Array.from(dmTitle.childNodes) const children = Array.from(dmTitle.childNodes)
console.log("剔除标签:",dmTitles,children) // console.log("剔除标签:",dmTitles,children)
// 在dmTitle之前插入所有子节点 // 在dmTitle之前插入所有子节点
children.forEach(child => { children.forEach(child => {
@@ -2589,12 +2636,12 @@ export default {
}) })
// 移除dmTitle // 移除dmTitle
dmTitle.parentNode.removeChild(dmTitle) dmTitle.parentNode.removeChild(dmTitle)
console.log("剔除标签移除:",dmTitle,'替换成',dmTitle) // console.log("剔除标签移除:",dmTitle,'替换成',dmTitle)
}) })
} }
console.log('内容还原完成！dmTitle标签已被移除') console.log('内容还原完成！dmTitle标签已被移除')
console.log("tempDiv.innerHTML",this.tempDivData.innerHTML) // console.log("tempDiv.innerHTML",this.tempDivData.innerHTML)
const reg2 = /(<(img|audio|video)[^>]+src=")(?!http:\/\/)([^"]+)("[^>]*>)/gi; const reg2 = /(<(img|audio|video)[^>]+src=")(?!http:\/\/)([^"]+)("[^>]*>)/gi;
@@ -2613,7 +2660,7 @@ export default {
let html_2 = this.tempDivData.innerHTML.replace(reg2, `$1${jc}$3$4`); let html_2 = this.tempDivData.innerHTML.replace(reg2, `$1${jc}$3$4`);
// html_2 = this.modelToImg(html_2); // html_2 = this.modelToImg(html_2);
console.log('还原地址：',html_2) // console.log('还原地址：',html_2)
this.editor.txt.html(html_2) this.editor.txt.html(html_2)
this.contentXmlStr = this.editor.txt.html(); this.contentXmlStr = this.editor.txt.html();
}else{ }else{
@@ -2631,7 +2678,7 @@ export default {
// XML文件标签剔除 // XML文件标签剔除
restoreContentXh2(html) { restoreContentXh2(html) {
console.log("XML初始内容：",html) // console.log("XML初始内容：",html)
if (html) { if (html) {
this.tempDivData1 = document.createElement('div') this.tempDivData1 = document.createElement('div')
this.tempDivData1.innerHTML = html this.tempDivData1.innerHTML = html
@@ -2644,7 +2691,7 @@ export default {
dmTitles.forEach(dmTitle => { dmTitles.forEach(dmTitle => {
// 获取dmTitle的子节点 // 获取dmTitle的子节点
const children = Array.from(dmTitle.childNodes) const children = Array.from(dmTitle.childNodes)
console.log("剔除标签:",dmTitles,children) // console.log("剔除标签:",dmTitles,children)
// 在dmTitle之前插入所有子节点 // 在dmTitle之前插入所有子节点
children.forEach(child => { children.forEach(child => {
@@ -2652,12 +2699,12 @@ export default {
}) })
// 移除dmTitle // 移除dmTitle
dmTitle.parentNode.removeChild(dmTitle) dmTitle.parentNode.removeChild(dmTitle)
console.log("剔除标签移除:",dmTitle,'替换成',dmTitle) // console.log("剔除标签移除:",dmTitle,'替换成',dmTitle)
}) })
} }
console.log('内容还原完成！dmTitle标签已被移除') console.log('内容还原完成！dmTitle标签已被移除')
console.log("tempDiv.innerHTML",this.tempDivData1.innerHTML) // console.log("tempDiv.innerHTML",this.tempDivData1.innerHTML)
const reg2 = /(<(model3d|img|audio|video)[^>]+src=")(?!http:\/\/)([^"]+)("[^>]*>)/gi; const reg2 = /(<(model3d|img|audio|video)[^>]+src=")(?!http:\/\/)([^"]+)("[^>]*>)/gi;
@@ -2677,8 +2724,8 @@ export default {
// 这里假设原路径可能包含DM_Material目录，如果不需要可以去掉 // 这里假设原路径可能包含DM_Material目录，如果不需要可以去掉
let html_2 = this.tempDivData1.innerHTML.replace(reg2, `$1${jc}$3$4`); let html_2 = this.tempDivData1.innerHTML.replace(reg2, `$1${jc}$3$4`);
// html_2 = this.modelToImg(html_2); // html_2 = this.modelToImg(html_2);
console.log("大豪科技等哈时间",this.viewLis) // console.log("大豪科技等哈时间",this.viewLis)
console.log('加载还原地址：',html_2) // console.log('加载还原地址：',html_2)
let processedL = this.hintFun(html_2) let processedL = this.hintFun(html_2)
@@ -2855,7 +2902,6 @@ export default {
}else{ }else{
return true return true
} }
}, },
@@ -3030,15 +3076,30 @@ export default {
this.translateY = 0 this.translateY = 0
}, },
//测试 开始拖动 //测试 开始拖动
startDrag(e) { startDrag(e) {
this.isDragging = true this.isDragging = true;
this.startX = e.type === 'mousedown' ? e.clientX : e.touches[0].clientX const startX = e.clientX;
this.startY = e.type === 'mousedown' ? e.clientY : e.touches[0].clientY const startWidth = this.leftWidth;
document.addEventListener('mousemove', this.dragImage) const handleMouseMove = (e) => {
document.addEventListener('touchmove', this.dragImage) if (!this.isDragging) return;
document.addEventListener('mouseup', this.endDrag) const diffX = e.clientX - startX;
document.addEventListener('touchend', this.endDrag) // 限制最小宽度
const newWidth = Math.max(100, startWidth + diffX);
// 限制最大宽度
this.leftWidth = Math.min(500, newWidth);
this.getWindowSize();
};
const handleMouseUp = () => {
this.isDragging = false;
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
};
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
e.preventDefault();
}, },
//测试 拖动图片 //测试 拖动图片
dragImage(e) { dragImage(e) {
@@ -3073,34 +3134,33 @@ export default {
cursor: this.isDragging ? 'grabbing' : 'grab' cursor: this.isDragging ? 'grabbing' : 'grab'
} }
}, },
gengxin() {
if(this.currentNode){
const element = document.querySelector('.w-e-toolbar')
const container = document.querySelector('.w-e-text-container');
const rightDivHeight = document.querySelector(".rightDiv").scrollHeight;
container.style.height = (rightDivHeight -element.scrollHeight - 86 ) +'px' ;
console.log("内容高度", (rightDivHeight -element.scrollHeight - 86 ) +'px')
}
// const heightPx = (window.innerHeight - 240) + 'px';
// console.log("富文本框高度",heightPx)
// document.getElementsByClassName('w-e-text-container')[0].style.height =heightPx;
// document.getElementsByClassName('w-e-text-container')[1].style.height = (window.innerHeight - 240) + 'px' ;
},
//获取屏幕尺寸 //获取屏幕尺寸
getWindowSize() { getWindowSize() {
// this.windowW = window.innerWidth // this.windowW = window.innerWidth
// this.windowH = window.innerHeigh // this.windowH = window.innerHeigh
// t // t
this.leftHeight = window.innerHeight - 200; // this.leftHeight = window.innerHeight - 200;
this.editorHeight = window.innerHeight - 250; // this.editorHeight = window.innerHeight - 250;
if(this.currentNode){ if(this.currentNode){
const element = document.querySelector('.w-e-toolbar') const element = document.querySelector('.w-e-toolbar')
const container = document.querySelector('.w-e-text-container'); const container = document.querySelector('.w-e-text-container');
const rightDivHeight = document.querySelector(".rightDiv").scrollHeight; const rightDivHeight = document.querySelector(".rightDiv").scrollHeight;
container.style.height = (rightDivHeight -element.scrollHeight - 86 ) +'px' ; container.style.height = (rightDivHeight -element.scrollHeight - 80 ) +'px' ;
console.log("内容高度", (rightDivHeight -element.scrollHeight - 86 ) +'px') console.log("内容高度2", (rightDivHeight -element.scrollHeight - 80 ) +'px')
} }
this.windowH = window.innerHeight;
this.leftHeight = window.innerHeight - 200; // 检查此值是否合理
this.editorHeight = window.innerHeight - 250;
// 强制刷新滚动条
this.$nextTick(() => {
const scrollbar = this.$refs.scrollbar; // 需给 el-scrollbar 添加 ref="scrollbar"
if (scrollbar) scrollbar.update();
});
}, },
// 尺寸变化时的处理函数 // 尺寸变化时的处理函数
handleResize() { handleResize() {
@@ -3418,6 +3478,10 @@ export default {
}, },
//保存当前DMC信息 //保存当前DMC信息
saveNowDmc2(type) { saveNowDmc2(type) {
if(this.editor){
const html4 = this.editor.txt.html();
console.log("保存内容4",html4)
}
console.log("保存时候点击",this.lastClick) console.log("保存时候点击",this.lastClick)
if(type == 'save'){ if(type == 'save'){
console.log("保存时候点击 this.currentNode",this.currentNode,this.currentNode.minorVersion) console.log("保存时候点击 this.currentNode",this.currentNode,this.currentNode.minorVersion)
@@ -3430,9 +3494,10 @@ export default {
console.log("保存时候点击 treedata",this.treeData) console.log("保存时候点击 treedata",this.treeData)
this.catalogueAnalysis(this.treeData); this.catalogueAnalysis(this.treeData);
this.generateXml(false,this.lastClick); this.generateXml(false,this.lastClick);
this.contentXmlStr = this.editor.txt.html();
this.contentXmlStr = this.editor.txt.html();
// const targetNode = this.findNodeById(this.treeData, this.lastClick); // const targetNode = this.findNodeById(this.treeData, this.lastClick);
// if (targetNode) { // if (targetNode) {
// targetNode.minorVersion = '01'; // targetNode.minorVersion = '01';
@@ -3535,17 +3600,17 @@ export default {
}, },
//目录节点点击 //目录节点点击
handleNodeClick(data) { handleNodeClick(data) {
this.currentNode = data; // this.currentNode = data; //有问题
this.navIsAdd = ''; this.navIsAdd = '';
console.log("这一次点击的节点信息",data); console.log("这一次点击的节点信息",data);
console.log("上一次点击的时候的ID",this.lastClick) console.log("上一次点击的时候的ID",this.lastClick)
console.log("这一次点击的时候的ID",this.nowClick) console.log("这一次点击的时候的ID",this.nowClick)
if(this.lastClick == this.nowClick.id){ if(this.lastClick == this.nowClick.id){
this.currentNode = data;
this.nowClick = data; this.nowClick = data;
this.lastClick = data.id; this.lastClick = data.id;
// this.generateXml(false);
// this.catalogueAnalysis(this.treeData);
}else{ }else{
console.log("中中中中中",this.lastClick,this.dmcIsChange()) console.log("中中中中中",this.lastClick,this.dmcIsChange())
if(this.lastClick&&!this.dmcIsChange()){ if(this.lastClick&&!this.dmcIsChange()){
this.dialogVisibleTips2 = true; this.dialogVisibleTips2 = true;
@@ -3559,7 +3624,7 @@ export default {
this.$refs.tree.setCurrentKey(this.lastClick); this.$refs.tree.setCurrentKey(this.lastClick);
}); });
}else{ }else{
this.currentNode = data;
const target = this.domNameStr[3]; const target = this.domNameStr[3];
// 假设需要替换的格式是 "前缀_xxx_yy"，其中xxx是3位，yy是2位 // 假设需要替换的格式是 "前缀_xxx_yy"，其中xxx是3位，yy是2位
// 先找到最后两个下划线的位置 // 先找到最后两个下划线的位置
@@ -3596,8 +3661,9 @@ export default {
// this.loadFWBFile(this.getDmName); // this.loadFWBFile(this.getDmName);
} }
console.log("当前节点点击",data); console.log("当前节点点击",data);
this.getWindowSize(); setTimeout(() => {
this.gengxin(); this.getWindowSize();
}, 30);
// this.$sendToDotNet('GetFilePath','PMC',data.id,''); // this.$sendToDotNet('GetFilePath','PMC',data.id,'');
}, },
@@ -3666,6 +3732,7 @@ export default {
this.catalogueAnalysis(this.treeData); this.catalogueAnalysis(this.treeData);
// this.$sendToDotNet('SaveFile','PMC',newNode.id,JSON.stringify(this.currentNode)); // this.$sendToDotNet('SaveFile','PMC',newNode.id,JSON.stringify(this.currentNode));
//创建目录时候同时创建一个空DM文件 //创建目录时候同时创建一个空DM文件
console.log("创建目录时候同时创建一个空DM文件")
this.generateXml(true); this.generateXml(true);
@@ -3934,14 +4001,14 @@ export default {
//解析目录节点数据 //解析目录节点数据
generateTreeData(xmlContent) { generateTreeData(xmlContent) {
console.log("加载XML解析内容 初始化内容",xmlContent) // console.log("加载XML解析内容 初始化内容",xmlContent)
// 1. 解析XML // 1. 解析XML
const parser = new DOMParser(); const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlContent, "text/xml"); const xmlDoc = parser.parseFromString(xmlContent, "text/xml");
console.log("加载XML解析内容 初始化XML",xmlDoc) // console.log("加载XML解析内容 初始化XML",xmlDoc)
// 2. 获取根节点（content下的所有pmEntry） // 2. 获取根节点（content下的所有pmEntry）
const contentNode = xmlDoc.querySelector("content"); const contentNode = xmlDoc.querySelector("content");
console.log("加载XML解析内容 content",contentNode) // console.log("加载XML解析内容 content",contentNode)
const rootPmEntries = contentNode ? Array.from(contentNode.children).filter(node => node.tagName === "pmEntry") : []; const rootPmEntries = contentNode ? Array.from(contentNode.children).filter(node => node.tagName === "pmEntry") : [];
@@ -5153,7 +5220,7 @@ created() {
window.addEventListener('SendProjectName', (e) => { window.addEventListener('SendProjectName', (e) => {
this.domNameStr[1] = this.removeQuotationMarks(e.detail); this.domNameStr[1] = this.removeQuotationMarks(e.detail);
console.log('获取项目文件夹名子：',this.domNameStr,e,e.detail) console.log('获取项目文件夹名子：',this.domNameStr,e,e.detail)
this.isLoadMsg = true;
}) })
@@ -5209,3 +5276,23 @@ created() {
}, },
} }
</script> </script>
<style scoped>
.drag-handle {
position: absolute;
top: 0;
right: 0;
width: 5px;
height: 100%;
cursor: col-resize;
/* background-color: #aaa; */
background-color: rgba(0,0,0,.1);
z-index: 2;
}
.drag-handle:hover {
/* background-color: #666; */
}
.el-main{
padding:0 10px ;
}
</style>