三维课程代码，修改课程组件间逻辑，修改课程数据结构。(未实装)
This commit is contained in:
sunzhenyu
parent
2ce3d41cad
commit
1cab2116d6
@ -42,7 +42,7 @@
|
||||
"vue-i18n": "^8.12.0",
|
||||
"vue-quill-editor": "^3.0.6",
|
||||
"vue-router": "^3.1.6",
|
||||
"vuedraggable": "^2.23.2",
|
||||
"vuedraggable": "^2.24.3",
|
||||
"vuex": "^3.1.0",
|
||||
"xlsx": "^0.14.2",
|
||||
"zrender": "^4.0.4"
|
||||
|
||||
72
src/api/jmap/lesson3d.js
Normal file
72
src/api/jmap/lesson3d.js
Normal 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: ''
|
||||
});
|
||||
}
|
||||
|
||||
//
|
||||
@ -3,5 +3,6 @@ export default {
|
||||
mapDesign: 'Map Design',
|
||||
runPlanDesign: 'Run Plan Design',
|
||||
lessonDesign: 'Lesson Design',
|
||||
lesson3dDesign:'Lesson3d Design',
|
||||
scriptDesign: 'Script Design'
|
||||
};
|
||||
|
||||
@ -145,6 +145,7 @@ export default {
|
||||
jlmap3d: '3d editing',
|
||||
publish3d: '3d',
|
||||
assetmanager3d: '3d Asset Manager',
|
||||
lesson3dedit:'3d Lesson Make',
|
||||
stationmanager3d:'3d Station Manager',
|
||||
automaticSignalList: 'Automatic signal list',
|
||||
automaticSignalCode: 'Automatic signal coding',
|
||||
|
||||
@ -3,5 +3,6 @@ export default {
|
||||
mapDesign: '地图设计',
|
||||
runPlanDesign: '运行图设计',
|
||||
lessonDesign: '课程设计',
|
||||
lesson3dDesign: '三维课程设计',
|
||||
scriptDesign: '剧本设计'
|
||||
};
|
||||
|
||||
@ -15,6 +15,7 @@ export default {
|
||||
edit3d: '三维编辑',
|
||||
publish3d: '三维发布',
|
||||
assetmanager3d: '三维资源管理',
|
||||
lesson3dedit:'三维课程制作',
|
||||
stationmanager3d: '三维车站管理',
|
||||
logicalView: '逻辑视图',
|
||||
physicalView: '物理视图',
|
||||
|
||||
@ -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();
|
||||
} );
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
86
src/jlmap3d/lesson3dedit/lesson3deditor.js
Normal file
86
src/jlmap3d/lesson3dedit/lesson3deditor.js
Normal 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);
|
||||
}
|
||||
|
||||
}
|
||||
141
src/jlmap3d/lesson3dedit/model/lessondata.js
Normal file
141
src/jlmap3d/lesson3dedit/model/lessondata.js
Normal 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);
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
@ -13,6 +13,7 @@ const AuthorList = () => import('@/views/authorization/list');
|
||||
|
||||
const Jlmap3dedit = () => import('@/views/jlmap3d/edit/jlmap3dedit');
|
||||
const Jlmap3dAssetManager = () => import('@/views/jlmap3d/jl3dassetmanager/assetmanager');
|
||||
const Jlmap3dLesson3dEdit = () => import('@/views/jlmap3d/lesson3dedit/lesson3dedit');
|
||||
const Jlmap3d = () => import('@/views/jlmap3d/drive/jl3ddrive');
|
||||
const Jlmap3dSandbox = () => import('@/views/jlmap3d/simulation/jl3dsimulation');
|
||||
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 LessonEdit = () => import('@/views/lesson/lessoncategory/index');
|
||||
const LessonHome = () => import('@/views/lesson/home');
|
||||
const Lesson3d = () => import('@/views/lesson/lesson3d');
|
||||
const LessonDetail = () => import('@/views/lesson/details');
|
||||
|
||||
const ScriptmanageHome = () => import('@/views/scriptManage/home');
|
||||
@ -248,6 +250,11 @@ export const constantRoutes = [
|
||||
component: Jlmap3dAssetManager,
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/design/jlmap3d/lesson3dedit',
|
||||
component: Jlmap3dLesson3dEdit,
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/data2json',
|
||||
component: () => import('@/views/planMonitor/data2json/page.vue'),
|
||||
@ -607,6 +614,11 @@ export const asyncRouter = [
|
||||
component: LessonHome,
|
||||
hidden: true
|
||||
},
|
||||
{ // 三维课程列表
|
||||
path: 'lesson/lesson3d',
|
||||
component: Lesson3d,
|
||||
hidden: true
|
||||
},
|
||||
{ // 操作定义
|
||||
path: 'lesson/trainingRule',
|
||||
component: TrainingRuleList,
|
||||
|
||||
@ -159,6 +159,7 @@ export const UrlConfig = {
|
||||
prefix: '/design/home',
|
||||
lessonEdit: '/design/lesson/edit',
|
||||
lessonHome: '/design/lesson/home',
|
||||
lesson3d: '/design/lesson/lesson3d',
|
||||
taskManage: '/design/lesson/taskManage',
|
||||
trainingRule: '/design/lesson/trainingRule',
|
||||
trainingRuleDetail: '/design/lesson/trainingRule/detail',
|
||||
|
||||
@ -5,7 +5,7 @@ export function getBaseUrl() {
|
||||
// BASE_API = 'https://api.joylink.club/jlcloud';
|
||||
BASE_API = 'https://test.joylink.club/jlcloud';
|
||||
// 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.140:9000'; // 杜康
|
||||
// BASE_API = 'http://b29z135112.zicp.vip';
|
||||
|
||||
@ -102,6 +102,10 @@ export default {
|
||||
this.$router.push({ path: `${UrlConfig.design.lessonHome}/${obj.mapId}?lineCode=${obj.lineCode}&cityCode=${obj.cityCode}` });
|
||||
break;
|
||||
}
|
||||
case 'lesson3dDesign': {
|
||||
this.$router.push({ path: `${UrlConfig.design.lesson3d}`});
|
||||
break;
|
||||
}
|
||||
case 'runPlanDesign': {
|
||||
this.$router.push({ path: `${UrlConfig.design.runPlan}/${obj.mapId}?lineCode=${obj.lineCode}` });
|
||||
break;
|
||||
@ -201,7 +205,10 @@ export default {
|
||||
lineCode: elem.lineCode,
|
||||
cityCode: elem.cityCode
|
||||
});
|
||||
// this.isAdministrator() ? elem.children.push({id: '8', name: this.$t('designPlatform.lesson3dDesign'), type: 'lesson3dDesign'}) : '';
|
||||
|
||||
});
|
||||
|
||||
this.treeData = res.data;
|
||||
this.treeList = this.filterText
|
||||
? res.data.filter(elem => { return elem.name.includes(this.filterText); })
|
||||
|
||||
58
src/views/jlmap3d/lesson3dedit/component/assetsmodel.vue
Normal file
58
src/views/jlmap3d/lesson3dedit/component/assetsmodel.vue
Normal 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>
|
||||
130
src/views/jlmap3d/lesson3dedit/component/lessonprogress.vue
Normal file
130
src/views/jlmap3d/lesson3dedit/component/lessonprogress.vue
Normal 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>
|
||||
123
src/views/jlmap3d/lesson3dedit/component/lessonsetup.vue
Normal file
123
src/views/jlmap3d/lesson3dedit/component/lessonsetup.vue
Normal 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>
|
||||
@ -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>
|
||||
189
src/views/jlmap3d/lesson3dedit/component/property.vue
Normal file
189
src/views/jlmap3d/lesson3dedit/component/property.vue
Normal 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>
|
||||
261
src/views/jlmap3d/lesson3dedit/lesson3dedit.vue
Normal file
261
src/views/jlmap3d/lesson3dedit/lesson3dedit.vue
Normal 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>
|
||||
75
src/views/jlmap3d/lesson3dedit/lesson3dshow.vue
Normal file
75
src/views/jlmap3d/lesson3dedit/lesson3dshow.vue
Normal 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>
|
||||
71
src/views/jlmap3d/lesson3dedit/tools/actiontips.vue
Normal file
71
src/views/jlmap3d/lesson3dedit/tools/actiontips.vue
Normal 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>
|
||||
71
src/views/jlmap3d/lesson3dedit/tools/errortips.vue
Normal file
71
src/views/jlmap3d/lesson3dedit/tools/errortips.vue
Normal 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>
|
||||
82
src/views/jlmap3d/lesson3dedit/tools/explainpane.vue
Normal file
82
src/views/jlmap3d/lesson3dedit/tools/explainpane.vue
Normal 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>
|
||||
189
src/views/jlmap3d/lesson3dedit/tools/jobpane.vue
Normal file
189
src/views/jlmap3d/lesson3dedit/tools/jobpane.vue
Normal 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>
|
||||
82
src/views/jlmap3d/lesson3dedit/tools/processlog.vue
Normal file
82
src/views/jlmap3d/lesson3dedit/tools/processlog.vue
Normal 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>
|
||||
75
src/views/jlmap3d/lesson3dedit/tools/stepstips.vue
Normal file
75
src/views/jlmap3d/lesson3dedit/tools/stepstips.vue
Normal 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>
|
||||
201
src/views/jlmap3d/lesson3dedit/tools/toolbar.vue
Normal file
201
src/views/jlmap3d/lesson3dedit/tools/toolbar.vue
Normal 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>
|
||||
216
src/views/lesson/lesson3d.vue
Normal file
216
src/views/lesson/lesson3d.vue
Normal 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>
|
||||
@ -154,9 +154,6 @@ export default {
|
||||
assetmanager3d() {
|
||||
this.$router.push({ path: '/design/jlmap3d/assetmanager' });
|
||||
},
|
||||
|
||||
|
||||
|
||||
importMap() {
|
||||
this.$refs.mapImport.show();
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user