<template>
|
<div id="wai">
|
<div class="divLeft">
|
<h2 >{{helpDataSys.systemName}}用户操作说明</h2>
|
<div v-for="item in helpDataSys.data" :key="item.id">
|
<h3 @click="toggleCollapse(helpDataSys.data,item.id)" style="cursor: pointer;font-size: 20px">
|
<span :class="{ 'collapsed': item.isCollapsed }">▷</span>
|
{{item.user}}
|
</h3>
|
<ol :class="{'isCollapsed':!item.isCollapsed}" v-show="item.isCollapsed" style="font-weight: initial;line-height: initial;">
|
<li v-for="item1 in item.modules" :key="item1.id" style="margin-top: 10px; margin-bottom: 5px">
|
<span @click="toggleCollapse(item.modules,item1.id)">{{item1.module}}</span>
|
<ol :class="{'isCollapsed':!item1.isCollapsed}" v-show="item1.isCollapsed" class="funcList" style="transition: .5s">
|
<li v-for="item2 in item1.functions" :key="item2.id" class="func" @click="clickFunc(item.user, item1.module, item2.function, item2.docFile, item2.videoFile)">
|
{{item2.function}}</li>
|
</ol>
|
</li>
|
</ol>
|
</div>
|
</div>
|
|
<div class="divRight">
|
<div style="margin: 10px; display: flex;">
|
<div style="flex: 1;">
|
<el-radio-group v-model="dispType" @change="dispTypeChange">
|
<el-radio class="radio" label="1">操作说明</el-radio>
|
<el-radio class="radio" label="2">录屏演示</el-radio>
|
</el-radio-group>
|
</div>
|
<div style="flex: 1; text-align: center" id="helpTitle">
|
<h3 ></h3>
|
</div>
|
<div id="userManual" style="flex: 1; text-align: right;">
|
<el-dropdown trigger="hover">
|
<span class="el-dropdown-link">
|
下载用户手册<i class="el-icon-arrow-down el-icon--right"></i>
|
</span>
|
<el-dropdown-menu @click.native.stop>
|
<el-dropdown-item v-for="item in helpDataSys.userManual" :key="item.id">
|
<a :href="item.file" style="color:#000">{{ item.name }}</a>
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
</div>
|
<div style="height: 100%;">
|
<div id="divDoc" style="height: 100%;">
|
<iframe id="iframe" src="" width="100%" height="95%"></iframe>
|
</div>
|
<div id="divVideo">
|
<video id="video" src="" controls type="video/mp4">
|
</video>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import Cookies from "js-cookie";
|
|
export default {
|
name: 'UserHelp',
|
data(){
|
return{
|
isCollapsed:false,
|
system: '', // djxl, smj
|
helpDataSys: '',
|
dispType: '1',
|
user: '',
|
modulename: '',
|
funcname: '',
|
docfile: '',
|
videofile: '',
|
}
|
},
|
mounted() {
|
this.system = Cookies.get('system');
|
// userhelp_jsondata在/help/helpdata.js中定义，/help/helpdata.js在index.html中引入。
|
if (this.system) {
|
for (let i = 0; i < userhelp_jsondata.length; i++) {
|
if (this.system == userhelp_jsondata[i].system) {
|
this.helpDataSys = userhelp_jsondata[i];
|
}
|
}
|
}else{
|
this.helpDataSys = userhelp_jsondata[0]
|
}
|
},
|
methods: {
|
toggleCollapse(Dates,id) {
|
console.log(id)
|
for (const item of Dates) {
|
console.log(item.id)
|
if (item.id === id) {
|
item.isCollapsed = !item.isCollapsed; // 切换展开（收缩）状态
|
break;
|
}
|
}
|
},
|
switchDispType() {
|
var myIframe = document.getElementById("iframe");
|
var myVideo = document.getElementById("video");
|
if (this.dispType=="1") {
|
document.getElementById("divVideo").style.display="none";
|
document.getElementById("divDoc").style.display="";
|
myIframe.src = this.docfile;
|
if (!myVideo.paused) {
|
myVideo.pause();
|
}
|
} else {
|
document.getElementById("divDoc").style.display="none";
|
document.getElementById("divVideo").style.display="";
|
if (myVideo.paused) {
|
myVideo.src = this.videofile;
|
myVideo.volume=0;
|
myVideo.play();
|
} else {
|
myVideo.pause();
|
myVideo.src = this.videofile;
|
myVideo.volume=0;
|
myVideo.play();
|
}
|
}
|
},
|
clickFunc(user, modulename, funcname, docfile, videofile) {
|
this.user = user;
|
this.modulename = modulename;
|
this.funcname = funcname;
|
this.docfile = docfile;
|
this.videofile = videofile;
|
var myTitle = document.getElementById("helpTitle");
|
myTitle.innerHTML = user+"--"+modulename+"--"+funcname;
|
this.switchDispType();
|
},
|
dispTypeChange() {
|
if (this.funcname) {
|
this.switchDispType();
|
}
|
}
|
}
|
}
|
</script>
|
|
<style>
|
#video {
|
margin: 0;
|
width: 100%;
|
height: 100%;
|
display: block;
|
}
|
#wai{ width:100%; height: 100vh; padding:10px; overflow:hidden;background: #062944;color:#FFF}
|
.divLeft{ float:left; width: 300px; height: 100%; overflow-y:scroll; }
|
.divRight{ margin-left: 310px; height: 100%;}
|
.divRight .radio{
|
color:#fff;
|
}
|
.divLeft>div>h3:hover{
|
background-color:rgba(2, 120, 231, 1);
|
transition: .5s;
|
}
|
.divLeft ol>li>span{
|
font-weight: bold;
|
list-style-position: inside;
|
cursor: pointer;
|
display: inline-block;
|
font-size: 18px;
|
width: 100%;
|
}
|
.divLeft ol>li>span:hover{
|
/*border: 1px solid rgba(2, 120, 231, 1);*/
|
background-color:rgba(2, 120, 231, 1);
|
transition: .5s;
|
}
|
.funcList{ margin-left: 10px;padding-left:10px;font-size: 16px}
|
.funcList li {
|
padding: 5px;
|
color:#fff;
|
list-style-position: inside;
|
}
|
.funcList li:hover{
|
background-color:rgba(2, 120, 231, .6);
|
transition: .5s;
|
}
|
.func{ text-decoration: none; color: #0000ff; cursor:pointer; }
|
/* 正常情况下滑块的样式 */
|
#wai ::-webkit-scrollbar-thumb {
|
background-color: rgba(23, 179, 163, 0.2);
|
border-radius: 2px;
|
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .3);
|
}
|
#wai ::-webkit-scrollbar-corner{
|
background-color: rgba(23, 179, 163, 0.3);
|
}
|
/* 鼠标悬浮在该类指向的控件上时滑块的样式 */
|
#wai :hover::-webkit-scrollbar-thumb {
|
background-color: rgba(23, 179, 163, 0.5);
|
border-radius: 2px;
|
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
|
}
|
|
/* 鼠标悬浮在滑块上时滑块的样式 */
|
#wai ::-webkit-scrollbar-thumb:hover {
|
background-color: rgba(23, 179, 163, 0.5);
|
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
|
}
|
|
/* 正常时候的主干部分 */
|
#wai ::-webkit-scrollbar-track {
|
border-radius: 2px;
|
/*-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);*/
|
}
|
|
/* 鼠标悬浮在滚动条上的主干部分 */
|
#wai::-webkit-scrollbar-track:hover {
|
/*-webkit-box-shadow: inset 0 0 6px rgba(123, 224, 244, 0.1);*/
|
background-color: rgba(23, 179, 163, 0.5);
|
}
|
#wai .el-dropdown{
|
color:#fff;
|
}
|
.collapsed {
|
transform: rotate(0.5turn);
|
}
|
.isCollapsed{
|
display: block;
|
transition: .5s;
|
}
|
</style>
|
