三维课程代码,修改课程组件间逻辑,修改课程数据结构。(未实装)

This commit is contained in:
sunzhenyu 2021-04-02 15:49:24 +08:00
parent 2ce3d41cad
commit 1cab2116d6
29 changed files with 2278 additions and 5 deletions

View File

@ -42,7 +42,7 @@
"vue-i18n": "^8.12.0", "vue-i18n": "^8.12.0",
"vue-quill-editor": "^3.0.6", "vue-quill-editor": "^3.0.6",
"vue-router": "^3.1.6", "vue-router": "^3.1.6",
"vuedraggable": "^2.23.2", "vuedraggable": "^2.24.3",
"vuex": "^3.1.0", "vuex": "^3.1.0",
"xlsx": "^0.14.2", "xlsx": "^0.14.2",
"zrender": "^4.0.4" "zrender": "^4.0.4"

72
src/api/jmap/lesson3d.js Normal file
View File

@ -0,0 +1,72 @@
import request from '@/utils/request';
export function getLesson3dDrftList(params) {
return request({
url: `/api/draft3dLesson/paging`,
method: 'get',
params: params
});
}
export function getLesson3dData(lessonId) {
return request({
url: `/api/draft3dLesson/${lessonId}`,
method: 'get',
params: ''
});
}
//查询发布课程
export function publishedLesson3d() {
return request({
url: `/api/lesson3d/paging`,
method: 'get',
params: ''
});
}
//保存
export function createLesson3d(data) {
return request({
url: `/api/draft3dLesson`,
method: 'post',
data: data
});
}
//发布课程
export function publishLesson3d(lessonId) {
return request({
url: `/api/draft3dLesson/${lessonId}/publish`,
method: 'post',
data: ""
});
}
// 更新基本信息
export function updateLesson3dBasic(lessonId,data) {
return request({
url: `/api/draft3dLesson/${lessonId}/basic`,
method: 'put',
data: data
});
}
// 更新数据
export function updateLesson3dData(lessonId,data) {
return request({
url: `/api/draft3dLesson/${lessonId}/data`,
method: 'put',
data: data
});
}
/** 删除课程*/
export function delLesson3d(lessonId) {
return request({
url: `/api/draft3dLesson/${lessonId}`,
method: 'delete',
data: ''
});
}
//

View File

@ -3,5 +3,6 @@ export default {
mapDesign: 'Map Design', mapDesign: 'Map Design',
runPlanDesign: 'Run Plan Design', runPlanDesign: 'Run Plan Design',
lessonDesign: 'Lesson Design', lessonDesign: 'Lesson Design',
lesson3dDesign:'Lesson3d Design',
scriptDesign: 'Script Design' scriptDesign: 'Script Design'
}; };

View File

@ -145,6 +145,7 @@ export default {
jlmap3d: '3d editing', jlmap3d: '3d editing',
publish3d: '3d', publish3d: '3d',
assetmanager3d: '3d Asset Manager', assetmanager3d: '3d Asset Manager',
lesson3dedit:'3d Lesson Make',
stationmanager3d:'3d Station Manager', stationmanager3d:'3d Station Manager',
automaticSignalList: 'Automatic signal list', automaticSignalList: 'Automatic signal list',
automaticSignalCode: 'Automatic signal coding', automaticSignalCode: 'Automatic signal coding',

View File

@ -3,5 +3,6 @@ export default {
mapDesign: '地图设计', mapDesign: '地图设计',
runPlanDesign: '运行图设计', runPlanDesign: '运行图设计',
lessonDesign: '课程设计', lessonDesign: '课程设计',
lesson3dDesign: '三维课程设计',
scriptDesign: '剧本设计' scriptDesign: '剧本设计'
}; };

View File

@ -15,6 +15,7 @@ export default {
edit3d: '三维编辑', edit3d: '三维编辑',
publish3d: '三维发布', publish3d: '三维发布',
assetmanager3d: '三维资源管理', assetmanager3d: '三维资源管理',
lesson3dedit:'三维课程制作',
stationmanager3d: '三维车站管理', stationmanager3d: '三维车站管理',
logicalView: '逻辑视图', logicalView: '逻辑视图',
physicalView: '物理视图', physicalView: '物理视图',

View File

@ -0,0 +1,34 @@
import { BASE_ASSET_API } from '@/api/jlmap3d/assets3d.js';
export function AssetModelManager(scene) {
let scope = this;
this.assetList = [];
this.loadAsset = [];
//加载课程资源
this.lessonAssetsLoader = function(){
fbxpromise();
}
//动态加载资源
this.assetLoader = function(){
}
//fbx模型加载
function fbxpromise(){
return new Promise(function(resolve, reject){
var loader = new THREE.FBXLoader();
loader.load( BASE_ASSET_API+"/MODEL/2021-03-25/1370-3193.FBX", function ( object ) {
scope.loadAsset.push(object);
scene.add(object);
resolve();
} );
});
}
}

View File

@ -0,0 +1,86 @@
import store from '@/store/index';
// import { Loading } from 'element-ui';
import {Stats} from '@/jlmap3d/main/lib/stats.min.js';
//静态资源文件路径
import { JL3D_LOCAL_STATIC } from '@/api/jlmap3d/assets3d.js';
//loader
import { FBXLoader } from '@/jlmap3d/main/loaders/FBXLoader';
//轨道视角控制
import { OrbitControls } from '@/jlmap3d/main/control/OrbitControls';
//骨骼动画模型辅助工具
import { SkeletonUtils } from '@/jlmap3d/main/utils/SkeletonUtils.js';
import { AssetModelManager } from '@/jlmap3d/lesson3dedit/assetmodelmanager/assetmodelmanager.js';
//动画播放相关
let clock = new THREE.Clock();
let delta;
let scene;
export function Lesson3dEditor(dom,lessonData) {
// let stats = new Stats();
// dom.appendChild( stats.dom );
let scope = this;
this.dom = dom;
//定义相机
this.camerass = new THREE.PerspectiveCamera(70, dom.offsetWidth / dom.offsetHeight, 0.01, 1000);
this.camerass.position.set(0, 80, 40);
this.camerass.aspect = dom.offsetWidth / dom.offsetHeight;
this.camerass.updateProjectionMatrix();
//定义场景(渲染容器)
scene = new THREE.Scene();
scene.background = new THREE.Color(0xa0a0a0);
this.renderer = new THREE.WebGLRenderer({ antialias: true });
this.renderer.setClearColor(new THREE.Color(0x000000));
this.renderer.setViewport( 0, 0, dom.offsetWidth, dom.offsetHeight);
this.renderer.setScissor( 0, 0, dom.offsetWidth, dom.offsetHeight);
this.renderer.setScissorTest( false );
this.renderer.setSize(dom.offsetWidth, dom.offsetHeight);
this.renderer.sortObjects = true;
dom.appendChild(scope.renderer.domElement);
//定义全局光
let ambientLight = new THREE.AmbientLight(0xffffff, 1.3);
scene.add(ambientLight);
var light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
light.position.set( 0, 4000, 0 );
scene.add( light );
this.controls = new THREE.OrbitControls(scope.camerass, dom);
this.controls.maxPolarAngle = Math.PI / 2;
this.controls.minPolarangle = Math.PI / 5;
this.controls.maxDistance = 800;
this.controls.screenSpacePanning = true;
this.controls.update();
lesson3dUpdateControl(scope.controls);
let assetModelManager = new AssetModelManager(scene);
assetModelManager.lessonAssetsLoader();
animate();
//循环渲染函数
function animate() {
scope.renderer.render( scene, scope.camerass );
scope.controls.update();
// delta = clock.getDelta();
requestAnimationFrame(animate);
}
window.onresize = function () {
scope.renderer.setSize(dom.offsetWidth,dom.offsetHeight);
}
}

View File

@ -0,0 +1,141 @@
export function LessonData() {
let scope = this;
this.lessonId = "";
this.lessonName = "";
this.lessonType = "";
this.lessonStatus = "";
this.lessonData = {
//资源列表
assetmodel:[],
//课程组件启用状态
lessonTools:[],
dataType:"",
//课程内容
lessonProgress:[
]
};
this.initLessonProgress = function(){
let newLessonProgress = {
progressName:"",
roleName:"",
roleUse:true,
progressScene:"",
nextCode:"",
nextNode:"",
triggerType:"",
triggerMode:"",
triggerTime:"",
triggerModel:"",
controlMode:"",
cameraMode:"",
cameraPosition:"",
cameraTarget:"",
assetId:scope.lessonData.lessonProgress.length,
assetPos:"",
assetRot:"",
assetType:"",
index:"",
stepTipsData:{
tittle:"标题",
text:"内容",
},
explainPane:{
tittle:"",
picurl:"",
text:"",
},
};
scope.lessonData.lessonProgress.push(newLessonProgress);
}
this.loadLessonProgress = function(loadData){
console.log(loadData);
for(let i=0;i<loadData.length;i++){
let newLessonProgress = {
progressName:loadData[i].progressName,
roleName:loadData[i].roleName,
roleUse:loadData[i].roleUse,
progressScene:loadData[i].progressScene,
nextCode:loadData[i].nextCode,
nextNode:loadData[i].nextNode,
triggerType:loadData[i].triggerType,
triggerMode:loadData[i].triggerMode,
triggerTime:loadData[i].triggerTime,
triggerModel:loadData[i].triggerModel,
controlMode:loadData[i].controlMode,
cameraMode:loadData[i].cameraMode,
cameraPosition:loadData[i].cameraPosition,
cameraTarget:loadData[i].cameraTarget,
assetId:loadData[i].assetId,
assetPos:loadData[i].assetPos,
assetRot:loadData[i].assetRot,
assetType:loadData[i].assetType,
index:loadData[i].index,
stepTipsData:loadData[i].stepTipsData,
explainPane:loadData[i].explainPane,
};
scope.lessonData.lessonProgress.push(newLessonProgress);
}
}
this.addLessonProgress = function(index){
let inheirIndex = index - 1;
let newLessonProgress = {
progressName:"",
roleName:scope.lessonData.lessonProgress[inheirIndex].roleName,
roleUse:scope.lessonData.lessonProgress[inheirIndex].roleUse,
progressScene:scope.lessonData.lessonProgress[inheirIndex].progressScene,
nextCode:"",
nextNode:"",
triggerType:"",
triggerMode:"",
triggerTime:"",
triggerModel:"",
controlMode:scope.lessonData.lessonProgress[inheirIndex].controlMode,
cameraMode:scope.lessonData.lessonProgress[inheirIndex].cameraMode,
cameraPosition:scope.lessonData.lessonProgress[inheirIndex].cameraPosition,
cameraTarget:scope.lessonData.lessonProgress[inheirIndex].cameraTarget,
assetId:scope.lessonData.lessonProgress.length,
assetPos:"",
assetRot:"",
assetType:"",
index:"",
triger:[
],
stepTipsData:{
tittle:"标题",
text:"内容",
},
explainPane:{
tittle:"",
picurl:"",
text:"",
},
};
scope.lessonData.lessonProgress.push(newLessonProgress);
}
this.changeLessonProgress = function(){
}
this.removeLessonProgress = function(index){
scope.lessonData.lessonProgress.splice(index,1);
}
}

View File

@ -13,6 +13,7 @@ const AuthorList = () => import('@/views/authorization/list');
const Jlmap3dedit = () => import('@/views/jlmap3d/edit/jlmap3dedit'); const Jlmap3dedit = () => import('@/views/jlmap3d/edit/jlmap3dedit');
const Jlmap3dAssetManager = () => import('@/views/jlmap3d/jl3dassetmanager/assetmanager'); const Jlmap3dAssetManager = () => import('@/views/jlmap3d/jl3dassetmanager/assetmanager');
const Jlmap3dLesson3dEdit = () => import('@/views/jlmap3d/lesson3dedit/lesson3dedit');
const Jlmap3d = () => import('@/views/jlmap3d/drive/jl3ddrive'); const Jlmap3d = () => import('@/views/jlmap3d/drive/jl3ddrive');
const Jlmap3dSandbox = () => import('@/views/jlmap3d/simulation/jl3dsimulation'); const Jlmap3dSandbox = () => import('@/views/jlmap3d/simulation/jl3dsimulation');
const Jlmap3dPassFlow = () => import('@/views/jlmap3d/passflow/jl3dpassflow'); const Jlmap3dPassFlow = () => import('@/views/jlmap3d/passflow/jl3dpassflow');
@ -68,6 +69,7 @@ const TrainingRuleEdit = () => import('@/views/lesson/trainingRule/detail/index'
const Trainingmanage = () => import('@/views/lesson/trainingmanage/index'); const Trainingmanage = () => import('@/views/lesson/trainingmanage/index');
const LessonEdit = () => import('@/views/lesson/lessoncategory/index'); const LessonEdit = () => import('@/views/lesson/lessoncategory/index');
const LessonHome = () => import('@/views/lesson/home'); const LessonHome = () => import('@/views/lesson/home');
const Lesson3d = () => import('@/views/lesson/lesson3d');
const LessonDetail = () => import('@/views/lesson/details'); const LessonDetail = () => import('@/views/lesson/details');
const ScriptmanageHome = () => import('@/views/scriptManage/home'); const ScriptmanageHome = () => import('@/views/scriptManage/home');
@ -248,6 +250,11 @@ export const constantRoutes = [
component: Jlmap3dAssetManager, component: Jlmap3dAssetManager,
hidden: true hidden: true
}, },
{
path: '/design/jlmap3d/lesson3dedit',
component: Jlmap3dLesson3dEdit,
hidden: true
},
{ {
path: '/data2json', path: '/data2json',
component: () => import('@/views/planMonitor/data2json/page.vue'), component: () => import('@/views/planMonitor/data2json/page.vue'),
@ -607,6 +614,11 @@ export const asyncRouter = [
component: LessonHome, component: LessonHome,
hidden: true hidden: true
}, },
{ // 三维课程列表
path: 'lesson/lesson3d',
component: Lesson3d,
hidden: true
},
{ // 操作定义 { // 操作定义
path: 'lesson/trainingRule', path: 'lesson/trainingRule',
component: TrainingRuleList, component: TrainingRuleList,

View File

@ -159,6 +159,7 @@ export const UrlConfig = {
prefix: '/design/home', prefix: '/design/home',
lessonEdit: '/design/lesson/edit', lessonEdit: '/design/lesson/edit',
lessonHome: '/design/lesson/home', lessonHome: '/design/lesson/home',
lesson3d: '/design/lesson/lesson3d',
taskManage: '/design/lesson/taskManage', taskManage: '/design/lesson/taskManage',
trainingRule: '/design/lesson/trainingRule', trainingRule: '/design/lesson/trainingRule',
trainingRuleDetail: '/design/lesson/trainingRule/detail', trainingRuleDetail: '/design/lesson/trainingRule/detail',

View File

@ -5,7 +5,7 @@ export function getBaseUrl() {
// BASE_API = 'https://api.joylink.club/jlcloud'; // BASE_API = 'https://api.joylink.club/jlcloud';
BASE_API = 'https://test.joylink.club/jlcloud'; BASE_API = 'https://test.joylink.club/jlcloud';
// BASE_API = 'http://192.168.8.107:9000'; // 袁琪 // BASE_API = 'http://192.168.8.107:9000'; // 袁琪
// BASE_API = 'http://192.168.8.129:9000'; // 旭强 // BASE_API = 'http://192.168.8.169:9000'; // 旭强
// BASE_API = 'http://192.168.8.119:9000'; // 张赛 // BASE_API = 'http://192.168.8.119:9000'; // 张赛
// BASE_API = 'http://192.168.8.140:9000'; // 杜康 // BASE_API = 'http://192.168.8.140:9000'; // 杜康
// BASE_API = 'http://b29z135112.zicp.vip'; // BASE_API = 'http://b29z135112.zicp.vip';

View File

@ -102,6 +102,10 @@ export default {
this.$router.push({ path: `${UrlConfig.design.lessonHome}/${obj.mapId}?lineCode=${obj.lineCode}&cityCode=${obj.cityCode}` }); this.$router.push({ path: `${UrlConfig.design.lessonHome}/${obj.mapId}?lineCode=${obj.lineCode}&cityCode=${obj.cityCode}` });
break; break;
} }
case 'lesson3dDesign': {
this.$router.push({ path: `${UrlConfig.design.lesson3d}`});
break;
}
case 'runPlanDesign': { case 'runPlanDesign': {
this.$router.push({ path: `${UrlConfig.design.runPlan}/${obj.mapId}?lineCode=${obj.lineCode}` }); this.$router.push({ path: `${UrlConfig.design.runPlan}/${obj.mapId}?lineCode=${obj.lineCode}` });
break; break;
@ -201,7 +205,10 @@ export default {
lineCode: elem.lineCode, lineCode: elem.lineCode,
cityCode: elem.cityCode cityCode: elem.cityCode
}); });
// this.isAdministrator() ? elem.children.push({id: '8', name: this.$t('designPlatform.lesson3dDesign'), type: 'lesson3dDesign'}) : '';
}); });
this.treeData = res.data; this.treeData = res.data;
this.treeList = this.filterText this.treeList = this.filterText
? res.data.filter(elem => { return elem.name.includes(this.filterText); }) ? res.data.filter(elem => { return elem.name.includes(this.filterText); })

View File

@ -0,0 +1,58 @@
<template>
<div id="assetsmodel" class="assetsmodel">
</div>
</template>
<script>
import Vue from 'vue';
import localStore from 'storejs';
export default {
name: 'AssetsModel',
components: {
},
data() {
return {
}
},
computed: {
},
watch: {
},
mounted() {
},
beforeDestroy() {
},
methods: {
},
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.assetsmodel {
position: absolute;
width: 100%;
height: 100%;
overflow-y: auto;
}
</style>

View File

@ -0,0 +1,130 @@
<template>
<div id="lessonprogressdiv" class="lessonprogressdiv">
<div class="progressnum">当前课程页数:{{listLength}}</div>
<el-tabs v-model="activeName" class="activediv" type="card" @tab-click="handleClick">
<el-tab-pane label="客运值班员" name="progresslist" >
<draggable v-model="lessonData.lessonData.lessonProgress" group="people" @start="drag=true" @end="drag=false" >
<div class="progressdiv" v-for="(element,index) in lessonData.lessonData.lessonProgress">
<div class="changeprogressdiv" @click="changeProgressView(index)">{{element.assetId}}</div>
<div class="delprogressdiv" @click="removeProgress(index)" >X</div>
</div>
</draggable>
<div class="progressdiv " icon="el-icon-folder-add" @click="addProgress"></div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import Vue from 'vue';
import localStore from 'storejs';
import draggable from 'vuedraggable';
export default {
name: 'LessonProgress',
props:['lessonData'],
components: {
draggable
},
data() {
return {
activeName: 'progresslist',
progressList:[
],
listLength:0,
progressIndex:0,
}
},
computed: {
},
watch: {
},
mounted() {
console.log(this.lessonData);
},
beforeDestroy() {
},
methods: {
onDragStart (e) {
e.target.classList.add('hideShadow')
},
onDragEnd (e) {
e.target.classList.remove('hideShadow')
},
handleClick(tab, event) {
console.log(tab, event);
},
addProgress(){
this.$emit('addProgress');
},
changeProgressView(viewIndex){
this.$emit('changeProgressView',viewIndex);
console.log(viewIndex);
},
removeProgress(viewIndex){
console.log(viewIndex);
this.$emit('removeProgress',viewIndex);
},
},
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.lessonprogressdiv {
position: absolute;
width: 70%;
height: 30%;
bottom: 0;
left:15%;
border-radius:10px;
border:solid 2px #000;
overflow-y: auto;
}
.progressnum{
position: absolute;
right:10px;
top:5px;
}
.progressdiv{
width:100px;
height:100px;
// display:inline;
margin: 20px;
float:left;
border:solid 2px #000;
}
.changeprogressdiv{
// position: relative;
width: 100%;
height: 80%;
right: 0;
bottom: 0;
border:solid 2px #000;
}
.delprogressdiv{
// position: relative;
width: 100%;
height: 20%;
right: 0;
bottom: 0;
border:solid 2px #000;
}
</style>

View File

@ -0,0 +1,123 @@
<template>
<div id="" class="lessonsetupdiv" v-show="showSetup">
<div style="text-align:center;top:10%;font-size:30px">新建课程信息</div>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="课程名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="课程类型">
<el-select v-model="form.type" placeholder="请选择活动区域">
<el-option label="ATC(CBTC)多媒体教学演练系统" value="1"></el-option>
<el-option label="ZDJ9转辙机检修作业指导虚拟仿真系统" value="2"></el-option>
<el-option label="城市轨道交通车站机电设备虚拟仿真系统" value="3"></el-option>
<el-option label="城市轨道交通电客车虚拟仿真教学系统" value="4"></el-option>
<el-option label="城市轨道交通服务礼仪一点通系统" value="5"></el-option>
<el-option label="城市轨道交通基础知识系统(视频无必要做)" value="6"></el-option>
<el-option label="城市轨道交通考试系统(开始系统另算)" value="7"></el-option>
<el-option label="城市轨道交通手信号系统" value="8"></el-option>
<el-option label="城市轨道交通行车组织系统" value="9"></el-option>
<el-option label="城市轨道交通作业多媒体系统" value="10"></el-option>
<el-option label="城市轨道线路系统" value="11"></el-option>
<el-option label="单车实验虚拟仿真实训系统操作视频" value="12"></el-option>
<el-option label="地铁应急仿真实训操作视频" value="13"></el-option>
<el-option label="地铁站务人员各岗一日作业虚拟仿真实训系统" value="14"></el-option>
<el-option label="电话闭塞" value="15"></el-option>
<el-option label="机电设备短视频" value="16"></el-option>
<el-option label="一次乘务" value="17"></el-option>
<el-option label="一日作业完整版" value="18"></el-option>
<el-option label="一日作业演示版" value="19"></el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="课程简介">
<el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item> -->
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button @click="unSubmit" >取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import Vue from 'vue';
import localStore from 'storejs';
export default {
name: 'LessonSetup',
components: {
},
data() {
return {
showSetup:false,
form: {
name: '',
type: '',
scene:[],
desc: ''
}
}
},
computed: {
},
watch: {
},
mounted() {
},
beforeDestroy() {
},
methods: {
setupView(){
if(this.showSetup == false){
this.showSetup = true;
}else{
this.showSetup = false;
}
},
onSubmit() {
console.log(this.form.scene);
console.log(this.form.role);
console.log('submit!');
this.showSetup = false;
this.$emit('lessonCreate', { name: this.form.name, type: this.form.type });
},
unSubmit(){
this.showSetup = false;
},
},
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.lessonsetupdiv {
position: absolute;
width: 30%;
height: 30%;
top:35%;
left:35%;
background-color: #fff;
border-radius: 18px;
border:solid 2px #000;
z-index: 5;
}
</style>

View File

@ -0,0 +1,96 @@
<template>
<div id="lessontoolsdiv" class="lessontoolsdiv">
<el-tabs v-model="activeName" class="activediv" @tab-click="handleClick">
<el-tab-pane label="课程组件" style="height:400px" name="lessoncomponent" >
<div v-for="(item,index) in lessonTools" class="tooldiv" >
<div>
{{item.name}}
</div>
<el-switch
v-model="item.isShow"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</div>
</el-tab-pane>
<el-tab-pane label="场景触发器" name="lessonasset">
<!-- <Assets-Model></Assets-Model> -->
</el-tab-pane>
<el-tab-pane label="三维资源" name="modelasset">
<!-- <Assets-Model></Assets-Model> -->
</el-tab-pane>
<el-tab-pane label="图片资源列表" name="picasset">
<!-- <Assets-Model></Assets-Model> -->
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import Vue from 'vue';
import localStore from 'storejs';
export default {
name: 'LessonTools',
props:['lessonTools'],
components: {
},
data() {
return {
activeName: 'lessoncomponent',
}
},
computed: {
},
watch: {
},
mounted() {
console.log(this.lessonTools);
},
beforeDestroy() {
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
},
},
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.lessontoolsdiv {
position: absolute;
width: 15%;
height: 100%;
overflow-y: auto;
// background-color: #abc;
}
.tooldiv{
text-align: center;
width:98%;
height:60px;
margin: 1%;
border-radius:10px;
border:solid 2px #000;
}
</style>

View File

@ -0,0 +1,189 @@
<template>
<div id="propertydiv" class="propertydiv">
<el-tabs v-model="activeName" class="activediv" type="card" @tab-click="handleClick">
<el-tab-pane label="当前场景信息" name="cameraproperty">
<el-form ref="form" class="camerapropertydiv" label-width="130px" size="mini" v-if="selectLesson3dControl">
<el-select v-model="lessonData.lessonData.lessonProgress[lessonEditIndex].progressScene" placeholder="请选择场景">
<el-option label="车站" value="standstation"></el-option>
<el-option label="停车场" value="stopstation"></el-option>
<el-option label="单体设备" value="device"></el-option>
<el-option label="线路" value="xl"></el-option>
<el-option label="道岔" value="dc"></el-option>
</el-select>
<el-switch
v-model="lessonData.lessonData.lessonProgress[lessonEditIndex].roleUse"
active-text="启用角色"
inactive-text="禁用角色">
</el-switch>
<el-select v-model="lessonData.lessonData.lessonProgress[lessonEditIndex].roleName" :disabled="!lessonData.lessonData.lessonProgress[lessonEditIndex].roleUse" placeholder="请选择步骤归属角色">
<el-option label="车站" value="standstation"></el-option>
<el-option label="停车场" value="stopstation"></el-option>
<el-option label="单体设备" value="device"></el-option>
<el-option label="线路" value="xl"></el-option>
<el-option label="道岔" value="dc"></el-option>
</el-select>
<el-form-item label="相机坐标:" v-if="selectLesson3dControl.object.position" disabled="true">
<el-input v-model="selectLesson3dControl.object.position.x" ></el-input>
<el-input v-model="selectLesson3dControl.object.position.y" ></el-input>
<el-input v-model="selectLesson3dControl.object.position.z" ></el-input>
</el-form-item>
<el-form-item label="相机角度:" v-if="selectLesson3dControl.target" disabled="true">
<el-input v-model="selectLesson3dControl.target.x" ></el-input>
<el-input v-model="selectLesson3dControl.target.y" ></el-input>
<el-input v-model="selectLesson3dControl.target.z" ></el-input>
</el-form-item>
<el-select v-model="value" placeholder="当前场景镜头控制模式">
<el-option
v-for="item in cameraMode"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-button v-if="selectLesson3dControl" @click="">重置镜头位置</el-button>
<el-button v-if="selectLesson3dControl" @click="">记录初始镜头位置</el-button>
</el-form>
</el-tab-pane>
<el-tab-pane label="组件属性" name="toolproperty" v-if="lessonData.lessonData.lessonProgress[lessonEditIndex]">
<el-form>
<el-form-item label="标题:" v-if="selected.tittle" >
<el-input v-model="selected.tittle" ></el-input>
</el-form-item>
<el-form-item label="信息:" v-if="selected.text">
<el-input v-model="selected.text" ></el-input>
</el-form-item>
<el-form-item label="相机角度:" >
<el-input v-model="selected.picurl" ></el-input>
</el-form-item>
<el-button @click="updateData">保存修改</el-button>
</el-form>
</el-tab-pane>
<el-tab-pane label="模型属性" name="modelproperty">
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import Vue from 'vue';
import localStore from 'storejs';
export default {
name: 'ProPerty',
props:['lessonData','lessonEditIndex'],
components: {
},
data() {
return {
activeName: 'cameraproperty',
selectLesson3dControl:"",
selected:"",
editSelectTool:"",
editSelectModel:"",
cameraMode:[
{
value: 'non',
label: '禁止移动控制'
}, {
value: 'fps',
label: '第一人称控制'
}, {
value: 'free',
label: '自由视角控制'
}
],
value:'',
}
},
computed: {
},
watch: {
},
mounted() {
window.lesson3dUpdateControl = this.lesson3dUpdateControl;
window.lesson3dSelect = this.lesson3dSelect;
},
beforeDestroy() {
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
},
lesson3dUpdateControl(control){
this.activeName = 'cameraproperty';
this.selectLesson3dControl = control;
console.log(this.selectLesson3dControl);
},
reset(){
console.log("reset");
this.activeName = 'cameraproperty';
},
lesson3dSelect(mode,type){
this.activeName = mode;
// console.log(this.lessonData.lessonData.lessonProgress[this.lessonEditIndex].stepTipsData);
// this.activeName = 'toolproperty';
// this.activeName = 'modelproperty';
if(type == "stepTips"){
this.selected = this.lessonData.lessonData.lessonProgress[this.lessonEditIndex].stepTipsData;
}
},
updateData(){
// this.lessonData.lessonData.lessonProgress[this.lessonEditIndex].stepTipsData;
},
},
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.propertydiv {
position: absolute;
width: 15%;
height: 80%;
right:0;
bottom:0;
border-radius:10px;
border:solid 2px #000;
overflow-y: auto;
}
.camerapropertydiv{
// width:100%;
// height:100;
// position: absolute;
text-align: center;
margin: 20px;
}
</style>

View File

@ -0,0 +1,261 @@
<template>
<div id="lesson3ddiv" class="lesson3ddiv">
<LessonTools-Manager :lessonTools='lessonTools'></LessonTools-Manager>
<div class="lesson3dedit">
<Step-Tips
:lessonData='lessonData'
:lessonEditIndex='lessonEditIndex'
v-show="lessonTools[0].isShow && lessonData.lessonData.lessonProgress[lessonEditIndex].progressScene == 'standstation'">
</Step-Tips>
<Process-Log v-show="lessonTools[1].isShow && lessonData.lessonData.lessonProgress[lessonEditIndex].progressScene == 'standstation'"></Process-Log>
<Explain-Pane v-show="lessonTools[2].isShow && lessonData.lessonData.lessonProgress[lessonEditIndex].progressScene == 'standstation'"></Explain-Pane>
<Job-Pane v-show="lessonTools[3].isShow && lessonData.lessonData.lessonProgress[lessonEditIndex].progressScene == 'standstation'"></Job-Pane>
<Tool-Bar v-show="lessonTools[4].isShow && lessonData.lessonData.lessonProgress[lessonEditIndex].progressScene == 'standstation'"></Tool-Bar>
<div id="lesson3ddraw" class="lesson3ddraw">
</div>
</div>
<Lesson-Progress
:lessonData='lessonData'
@addProgress="addProgress"
@changeProgressView="changeProgressView"
@removeProgress="removeProgress"
>
</Lesson-Progress>
<div class="lessonsetup" >
<el-row>
当前课程信息
</el-row>
<el-row>
<el-button @click="setupclick">课程设置</el-button>
</el-row>
<el-row>
<el-button>预览课程</el-button>
</el-row>
<el-row>
<el-button @click="saveLesson3dData">保存当前课程</el-button>
</el-row>
</div>
<Pro-Perty ref="lessonProPerty" :lessonData='lessonData' :lessonEditIndex='lessonEditIndex' ></Pro-Perty>
<canvas id="canvastexture" width="128px" height="64px"></canvas>
</div>
</template>
<script>
import Vue from 'vue';
import localStore from 'storejs';
import LessonProgress from '@/views/jlmap3d/lesson3dedit/component/lessonprogress';
import ProPerty from '@/views/jlmap3d/lesson3dedit/component/property';
import LessonToolsManager from '@/views/jlmap3d/lesson3dedit/component/lessontoolsmanager';
// import AssetsModel from '@/views/jlmap3d/lesson3dedit/component/assetsmodel';
import StepTips from '@/views/jlmap3d/lesson3dedit/tools/stepstips';
import ProcessLog from '@/views/jlmap3d/lesson3dedit/tools/processlog';
import ExplainPane from '@/views/jlmap3d/lesson3dedit/tools/explainpane';
import JobPane from '@/views/jlmap3d/lesson3dedit/tools/jobpane';
import ToolBar from '@/views/jlmap3d/lesson3dedit/tools/toolbar';
import { Lesson3dEditor } from '@/jlmap3d/lesson3dedit/lesson3deditor.js';
import { LessonData } from '@/jlmap3d/lesson3dedit/model/lessondata.js';
import { getLesson3dData,updateLesson3dData } from '@/api/jmap/lesson3d';
export default {
name: 'Lesson3dEdit',
components: {
LessonProgress,
ProPerty,
LessonToolsManager,
// AssetsModel,
StepTips,
ProcessLog,
ExplainPane,
JobPane,
ToolBar
},
data() {
return {
jl3d: null,
netData:{
name:'',
type:'',
data:{},
},
lessonData:{
lessonData:{
lessonProgress:[
]
}
},
lessonEditIndex:0,
lessonTools:[
{
name:"步骤组件",
isShow:false,
},
{
name:"步骤进程日志",
isShow:false,
},
{
name:"步骤提示组件",
isShow:false,
},
{
name:"岗位联络操作",
isShow:false,
},
{
name:"导航工具栏",
isShow:false,
},
],
}
},
computed: {
},
watch: {
},
mounted() {
this.init(this.$route.query.lessonId);
},
beforeDestroy() {
},
methods: {
init(lessonId){
getLesson3dData(lessonId).then(data => {
this.netData.name = data.data.name;
this.netData.type = data.data.type;
let dom = document.getElementById('lesson3ddraw');
this.lessonData = new LessonData();
if(data.data.data){
let loadData = JSON.parse(data.data.data);
this.lessonTools = loadData.lessonTools;
this.lessonData.loadLessonProgress(loadData.lessonProgress);
}else{
this.lessonData.initLessonProgress();
}
this.jl3d = new Lesson3dEditor(dom,this.lessonData);
}).catch(() => {
});
},
saveLesson3dData(){
this.lessonData.lessonData.lessonTools = this.lessonTools;
let saveData = this.lessonData.lessonData;
this.netData.data = JSON.stringify(saveData);
// console.log();
updateLesson3dData(this.$route.query.lessonId,this.netData).then(data => {
console.log(data);
}).catch(() => {
});
},
addProgress(){
this.lessonEditIndex = this.lessonData.lessonData.lessonProgress.length;
console.log(this.lessonEditIndex);
this.lessonData.addLessonProgress(this.lessonEditIndex);
this.$refs.lessonProPerty.reset();
},
changeProgressView(viewIndex){
this.lessonEditIndex = viewIndex;
this.$refs.lessonProPerty.reset();
},
removeProgress(removeIndex){
this.lessonData.removeLessonProgress(removeIndex);
},
setupclick(){
}
},
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
* {
touch-action: none;
}
.lesson3ddiv {
width: 100%;
height: 100%;
}
.lesson3dedit{
width:70%;
height:70%;
position: absolute;
top: 0;
left:15%;
border:solid 2px #000;
}
.lesson3ddraw {
float: left;
//left:20%;
position: absolute;
width: 100%;
height: 100%;
z-inde: -1;
}
.activediv{
position: absolute;
width: 15%;
height:100%;
left:0;
border-radius:10px;
border:solid 2px #000;
}
.lessonsetup {
position: absolute;
width: 15%;
height: 20%;
right:0;
top:0;
border-radius:10px;
border:solid 2px #000;
text-align:center;
}
.el-tabs__content{
position: absolute;
}
</style>

View File

@ -0,0 +1,75 @@
<template>
<div id="lesson3ddiv" class="lesson3ddiv">
<div id="lesson3ddraw" class="lesson3ddraw">
</div>
<canvas id="canvastexture" width="128px" height="64px"></canvas>
</div>
</template>
<script>
import Vue from 'vue';
import localStore from 'storejs';
var train;
export default {
name: 'Lesson3dEdit',
components: {
},
data() {
return {
}
},
computed: {
},
watch: {
},
mounted() {
},
beforeDestroy() {
},
methods: {
},
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
* {
touch-action: none;
}
.lesson3ddiv {
width: 100%;
height: 100%;
}
.lesson3ddraw {
float: left;
//left:20%;
position: absolute;
width: 100%;
height: 100%;
z-inde: -1;
}
</style>

View File

@ -0,0 +1,71 @@
<template>
<div class="stepstipsdiv" >
<div class="stepstipstittle" >
{{tipsTittle}}
</div>
<div class="stepstipstext" >
{{tipsText}}
</div>
</div>
</template>
<script>
import Vue from 'vue';
import localStore from 'storejs';
import { JL3D_LOCAL_STATIC } from '@/api/jlmap3d/assets3d.js';
//
export default {
name: 'ActionTips',
components: {
},
data() {
return {
tipsTittle:"步骤一",
tipsText:"步骤一",
}
},
computed: {
},
watch: {
},
mounted() {
},
beforeDestroy() {
},
methods: {
},
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.stepstipsdiv {
position: absolute;
width: 20%;
height: 20%;
left:0;
top:0;
border-radius:10px;
border:solid 2px #000;
background-color: #fff;
z-index:1;
}
.stepstipstittle{
text-align: center;
font-size: 20px;
}
.stepstipstext{
font-size: 16px;
}
</style>

View File

@ -0,0 +1,71 @@
<template>
<div class="stepstipsdiv" >
<div class="stepstipstittle" >
{{tipsTittle}}
</div>
<div class="stepstipstext" >
{{tipsText}}
</div>
</div>
</template>
<script>
import Vue from 'vue';
import localStore from 'storejs';
import { JL3D_LOCAL_STATIC } from '@/api/jlmap3d/assets3d.js';
//
export default {
name: 'ErrorTips',
components: {
},
data() {
return {
tipsTittle:"步骤一",
tipsText:"步骤一",
}
},
computed: {
},
watch: {
},
mounted() {
},
beforeDestroy() {
},
methods: {
},
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.stepstipsdiv {
position: absolute;
width: 20%;
height: 20%;
left:0;
top:0;
border-radius:10px;
border:solid 2px #000;
background-color: #fff;
z-index:1;
}
.stepstipstittle{
text-align: center;
font-size: 20px;
}
.stepstipstext{
font-size: 16px;
}
</style>

View File

@ -0,0 +1,82 @@
<template>
<div class="explainpanediv" >
<div class="explainpanetittle" >
{{explainTittle}}
</div>
<div class="explainpanepic" >
</div>
<div class="explainpanetext" >
{{explainText}}
</div>
</div>
</template>
<script>
import Vue from 'vue';
import localStore from 'storejs';
import { JL3D_LOCAL_STATIC } from '@/api/jlmap3d/assets3d.js';
export default {
name: 'ExplainPane',
components: {
},
data() {
return {
explainTittle:"步骤一",
explainText:"步骤一",
}
},
computed: {
},
watch: {
},
mounted() {
},
beforeDestroy() {
},
methods: {
},
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.explainpanediv {
position: absolute;
width: 25%;
height: 25%;
left:20%;
top:0;
border-radius:10px;
border:solid 2px #000;
background-color: #fff;
z-index:1;
}
.explainpanetittle{
// height:15%;
text-align: center;
font-size: 20px;
}
.explainpanepic{
height:65%;
border:solid 2px #000;
}
.explainpanetext{
font-size: 14px;
// height:20%;
}
</style>

View File

@ -0,0 +1,189 @@
<template>
<div class="jobpanediv">
<div class="jobshowbutton" @click="openList">岗位联络</div>
<div class="joblistdiv" v-show="showJobList">
<div class="jobdiv" v-for="(jobitem,index) in jobList" >{{jobitem.name}}</div>
</div>
<el-tabs class="jobtab" v-show="showJob">
<el-tab-pane v-for="(item,index) in jobUse" label-width="33%" :key="item.name" :label="item.name">
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import Vue from 'vue';
import localStore from 'storejs';
import { JL3D_LOCAL_STATIC } from '@/api/jlmap3d/assets3d.js';
//
export default {
name: 'JobPane',
components: {
},
data() {
return {
jobList:[],
showJobList:false,
showJob:false,
jobUse:[
{
name:"联控"
},
{
name:"动作"
},
{
name:"口呼"
},
],
}
},
computed: {
},
watch: {
},
mounted() {
this.initJobList();
},
beforeDestroy() {
},
methods: {
openList(){
if(this.showJobList ==false){
this.showJobList = true;
this.showJob = true;
}else{
this.showJobList = false;
this.showJob = false;
}
},
initJobList(){
this.jobList = [
{
name:"值班站长",
picurl:"",
},
{
name:"行车值班员",
picurl:"",
},
{
name:"客运值班员",
picurl:"",
},
{
name:"票厅岗",
picurl:"",
},
{
name:"站台岗",
picurl:"",
},
{
name:"站长",
picurl:"",
},
{
name:"分部助理",
picurl:"",
},
{
name:"行车调度",
picurl:"",
},
{
name:"生产调度",
picurl:"",
},
{
name:"厅巡岗",
picurl:"",
},
{
name:"地铁公安",
picurl:"",
},
{
name:"120",
picurl:"",
},
{
name:"119",
picurl:"",
},
];
},
},
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.jobpanediv {
position: absolute;
// height: 500px;
min-width: 100px;
right:0;
top:0;
// border:solid 2px #000;
z-index:1;
}
.jobshowbutton{
position: absolute;
width:100px;
height:50px;
right:0;
top:0;
border:solid 2px #000;
background-color: #fff;
}
.joblistdiv{
position: absolute;
width:100px;
height:450px;
right:0;
top:50px;
border:solid 2px #000;
overflow-y: auto;
overflow-x: hidden;
background-color: #fff;
}
.jobdiv{
width:75px;
height:75px;
margin-top: 5px;
margin-left: 2px;
border:solid 2px #000;
background-color: #fff;
}
.jobtab{
position: absolute;
right:100px;
top:50px;
width: 300px;
height:450px;
background-color: #fff;
}
</style>

View File

@ -0,0 +1,82 @@
<template>
<div class="processlogdiv" >
<el-tabs type="border-card">
<el-tab-pane label="进程">
<div class="processtext" >
{{processText}}
</div>
</el-tab-pane>
<el-tab-pane label="日志">
<div class="logtext" >
{{logText}}
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import Vue from 'vue';
import localStore from 'storejs';
import { JL3D_LOCAL_STATIC } from '@/api/jlmap3d/assets3d.js';
//
export default {
name: 'ProcessLog',
components: {
},
data() {
return {
processText:"步骤一",
logText:"步骤一",
}
},
computed: {
},
watch: {
},
mounted() {
},
beforeDestroy() {
},
methods: {
},
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.processlogdiv {
position: absolute;
width: 28%;
height: 25%;
right:0;
bottom:0;
// border-radius:10px;
border:solid 2px #000;
background-color: #fff;
z-index:1;
}
.processtext{
font-size: 16px;
}
.logtext{
font-size: 16px;
}
</style>

View File

@ -0,0 +1,75 @@
<template>
<div class="stepstipsdiv" v-if="lessonData.lessonData.lessonProgress[lessonEditIndex]" @click="selectTool">
<div class="stepstipstittle" >
{{lessonData.lessonData.lessonProgress[lessonEditIndex].stepTipsData.tittle}}
</div>
<div class="stepstipstext" >
{{lessonData.lessonData.lessonProgress[lessonEditIndex].stepTipsData.text}}
</div>
</div>
</template>
<script>
import Vue from 'vue';
import localStore from 'storejs';
import { JL3D_LOCAL_STATIC } from '@/api/jlmap3d/assets3d.js';
//
export default {
name: 'StepTips',
props:['lessonData','lessonEditIndex'],
components: {
},
data() {
return {
}
},
computed: {
},
watch: {
},
mounted() {
},
beforeDestroy() {
},
methods: {
selectTool(){
lesson3dSelect('toolproperty','stepTips');
},
},
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.stepstipsdiv {
position: absolute;
width: 20%;
height: 20%;
left:0;
top:0;
border-radius:10px;
border:solid 2px #000;
background-color: #fff;
z-index:1;
}
.stepstipstittle{
text-align: center;
font-size: 20px;
}
.stepstipstext{
font-size: 16px;
}
</style>

View File

@ -0,0 +1,201 @@
<template>
<div class="toolbardiv" >
<div class="toolbarbutton" @click="openGuide"></div>
<div class="toolbarbutton" @click="openBag"></div>
<div class="toolbarbutton" ></div>
<div class="toolbarguides" v-show="showGuide">
<div class="toolbarguide" v-for="(guide,index) in guideList">
{{guide.name}}
</div>
</div>
<div class="toolbarbag" v-show="showBag">
<div class="toolbarplaid" v-for="(tool,index) in toolsList"></div>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import localStore from 'storejs';
import { JL3D_LOCAL_STATIC } from '@/api/jlmap3d/assets3d.js';
//
export default {
name: 'ToolBar',
components: {
},
data() {
return {
tipsTittle:"步骤一",
tipsText:"步骤一",
guideList:[],
toolsList:[],
showGuide:false,
showBag:false,
}
},
computed: {
},
watch: {
},
mounted() {
this.initList();
},
beforeDestroy() {
},
methods: {
openGuide(){
if(this.showGuide == false){
this.showGuide = true;
this.showBag = false;
}else{
this.showGuide = false;
this.showBag = false;
}
},
openBag(){
if(this.showBag == false){
this.showGuide = false;
this.showBag = true;
}else{
this.showGuide = false;
this.showBag = false;
}
},
initList(){
for(let i=0;i<12;i++){
this.toolsList.push(
{
name:"",
picrul:"",
uesmode:"",
}
);
}
this.guideList=[
{
name:"站台",
pos:"",
},
{
name:"站厅",
pos:"",
},
{
name:"车控台",
pos:"",
},
{
name:"票务室",
pos:"",
},
{
name:"站长室",
pos:"",
},
{
name:"备品间",
pos:"",
},
{
name:"电梯",
pos:"",
},
{
name:"上行站台",
pos:"",
},
{
name:"下行站台",
pos:"",
},
];
},
},
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.toolbardiv {
position: absolute;
width: 240px;
height: 80px;
left:0;
bottom:0;
border-radius:10px;
border:solid 2px #000;
background-color: #fff;
z-index:1;
}
.toolbarbutton{
float:left;
width: 74px;
height: 74px;
border-radius:10px;
border:solid 2px #000;
margin: 2px;
}
.toolbarguides{
position: absolute;
bottom: 80px;
left:0;
width:100px;
height:350px;
overflow-y: auto;
overflow-x: hidden;
border-radius:10px;
border:solid 2px #000;
}
.toolbarguide{
width: 90px;
height: 30px;
border-radius:10px;
border:solid 2px #000;
margin: 5px;
}
.toolbarbag{
position: absolute;
bottom: 80px;
left:0;
width:240px;
height:320px;
overflow-y: auto;
border-radius:10px;
border:solid 2px #000;
}
.toolbarplaid{
float:left;
width: 74px;
height: 74px;
border-radius:10px;
border:solid 2px #000;
margin: 2px;
}
.stepstipstittle{
text-align: center;
font-size: 20px;
}
.stepstipstext{
font-size: 16px;
}
</style>

View File

@ -0,0 +1,216 @@
<template>
<div class="joylink-card">
<div class="lesson-header">
<div class="lesson-list">草稿{{ $t('lesson.courseList') }}</div>
<div class="but-group">
<el-button size="mini" type="primary" @click="lessonSetupCreate">{{ $t('lesson.newConstruction') }}</el-button>
</div>
</div>
<QueryListPage ref="queryListPage" :card-padding="50" :query-form="queryForm" :pager-config="pagerConfig" :query-list="queryList" style="width: 91%;margin-left:4%;margin-top:20px;" />
<publish-create ref="publishCreate" @refresh="refresh" />
<publish-lesson ref="publishLesson" @refresh="refresh" />
<lesson-detail ref="lessonDetail" />
<Lesson-Setup ref="lessonsetup" @lessonCreate="lessonCreate"></Lesson-Setup>
</div>
</template>
<script>
// import { releaseOrCancel } from '@/api/lesson3d';
import { getLesson3dDrftList,createLesson3d,updateLesson3dBasic,delLesson3d } from '@/api/jmap/lesson3d';
// import { delLesson } from '@/api/jmap/lesson3d';
import { UrlConfig } from '@/scripts/ConstDic';
import PublishCreate from './lessoncategory/edit/create';
import PublishLesson from './lessoncategory/edit/lesson/publish';
import LessonDetail from '@/views/approval/detail';
import ConstConfig from '@/scripts/ConstConfig';
import LessonSetup from '@/views/jlmap3d/lesson3dedit/component/lessonsetup';
export default {
name: 'Lesson3d',
components: {
PublishCreate,
PublishLesson,
LessonDetail,
LessonSetup
},
data() {
return {
loading: false,
pagerConfig: {
pageSize: 'pageSize',
pageIndex: 'pageNum'
},
queryForm: {
show: false
},
queryList: {
query: this.queryFunction,
selectCheckShow: false,
indexShow: true,
columns: [
{
title: '三维课程名称',
prop: 'name'
},
{
title: '三维课程类型',
prop: 'type'
},
{
title: '创建人',
prop: 'userId'
},
{
title: '创建时间',
prop: 'createTime'
},
{
type: 'button',
title: this.$t('global.operate'),
width: '400',
buttons: [
{
name: this.$t('lesson.courseDetails'),
handleClick: this.goDetail,
type: 'primary',
showControl: (row) => {
return row.status !== '1';
}
},
{
name: this.$t('lesson.notRelease'),
handleClick: this.release,
type: 'primary',
showControl: (row) => {
return row.status !== '1';
}
},
{
name: this.$t('global.delete'),
handleClick: this.deleteLesson,
type: 'danger',
showControl: (row) => {
return row.status !== '1';
}
},
]
}
]
}
};
},
computed: {
mapId() {
return this.$route.params.mapId;
},
isAdmin() {
return this.$store.state.user.roles.includes('04') || this.$store.state.user.roles.includes('05');
},
hasRelease() {
return this.$store.state.user.roles.includes('04') ||
this.$store.state.user.roles.includes('05') || this.$store.state.user.roles.includes('03');
}
},
watch: {
$route() {
this.refresh();
}
},
mounted() {
},
methods: {
queryFunction(params) {
return getLesson3dDrftList();
},
handlerStatus(row) {
let lessonStatus = '';
switch (row.status) {
case '0':
lessonStatus = this.$t('lesson.notRelease');
break;
case '1':
lessonStatus = this.$t('lesson.pendingReview');
break;
case '2':
lessonStatus = this.$t('lesson.published');
break;
case '3':
lessonStatus = this.$t('lesson.rejected');
break;
}
return lessonStatus;
},
refresh() {
this.$refs.queryListPage.refresh(true);
},
lessonSetupCreate() {
this.$refs.lessonsetup.setupView();
},
lessonCreate(creator){
createLesson3d(
{
name:creator.name,
type:creator.type,
}
).then(response => {
this.refresh();
}).catch(() => {
});
},
publish(index, row) {
row.mapId = this.$route.params.mapId;
row.cityCode = this.$route.query.cityCode;
this.$refs.publishLesson.doShow(row);
},
deleteLesson(index, row) {
// console.log(row);
delLesson3d(row.id).then(response => {
this.$message.success(this.$t('tip.successfullyDelete'));
this.loading = true;
this.refresh();
this.loading = false;
}).catch(() => {
this.$messageBox(this.$t('tip.failDelete'));
});
},
release(){
},
goDetail(index, row) {
console.log(row);
this.$router.push({ path: '/design/jlmap3d/lesson3dedit', query: {lessonId: row.id} });
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.joylink-card{
height: 100%;
overflow: auto;
}
.lesson-header{
display:inline-block;margin-top:40px;width: 90%;margin-left:5%;
}
.lesson-list{
display:inline-block;padding:7px 0px
}
.but-group{
float: right;
margin-right:20px;
}
</style>

View File

@ -154,9 +154,6 @@ export default {
assetmanager3d() { assetmanager3d() {
this.$router.push({ path: '/design/jlmap3d/assetmanager' }); this.$router.push({ path: '/design/jlmap3d/assetmanager' });
}, },
importMap() { importMap() {
this.$refs.mapImport.show(); this.$refs.mapImport.show();
} }