三维课程编辑器课程组件和数据结构修改,升级threejs版本
This commit is contained in:
parent
fb00e1418e
commit
cea95f9d92
@ -2,29 +2,195 @@ import { BASE_ASSET_API } from '@/api/jlmap3d/assets3d.js';
|
||||
|
||||
export function AssetModelManager(scene) {
|
||||
let scope = this;
|
||||
|
||||
|
||||
this.assetList = [];
|
||||
|
||||
this.otherModel = new THREE.Group();
|
||||
|
||||
scene.add(this.otherModel);
|
||||
|
||||
this.loadAsset = [];
|
||||
|
||||
this.loadAsset['default1'] = {
|
||||
modelId:'default1',
|
||||
packageName:"车站",
|
||||
url:"/MODEL/2021-04-06/1381-54584.FBX",
|
||||
mesh:"",
|
||||
assetType:'default',
|
||||
isUse:true,
|
||||
resourceType:"三维课程",
|
||||
};
|
||||
|
||||
//场景中可触发事件模型
|
||||
this.lessonTriggerList = [];
|
||||
|
||||
this.saveModelList = function(){
|
||||
let modelList = {
|
||||
assetList:[],
|
||||
modelList:[],
|
||||
};
|
||||
|
||||
for(let k in scope.loadAsset){
|
||||
modelList.assetList.push({
|
||||
modelId:scope.loadAsset[k].modelId,
|
||||
packageName:scope.loadAsset[k].packageName,
|
||||
url:scope.loadAsset[k].url,
|
||||
assetType:scope.loadAsset[k].assetType,
|
||||
isUse:scope.loadAsset[k].isUse,
|
||||
resourceType:scope.loadAsset[k].resourceType,
|
||||
});
|
||||
}
|
||||
|
||||
for(let i=0;i<scope.lessonTriggerList.length;i++){
|
||||
if(scope.lessonTriggerList[i].showType != "default"){
|
||||
modelList.modelList.push({
|
||||
name:scope.lessonTriggerList[i].name,
|
||||
modelId:scope.lessonTriggerList[i].modelId,
|
||||
label:scope.lessonTriggerList[i].label,
|
||||
pos:{
|
||||
x:scope.lessonTriggerList[i].position.x,
|
||||
y:scope.lessonTriggerList[i].position.y,
|
||||
z:scope.lessonTriggerList[i].position.z
|
||||
},
|
||||
rot:{
|
||||
x:scope.lessonTriggerList[i].position.x,
|
||||
y:scope.lessonTriggerList[i].position.y,
|
||||
z:scope.lessonTriggerList[i].position.z
|
||||
},
|
||||
showType:scope.lessonTriggerList[i].showType,
|
||||
visible:scope.lessonTriggerList[i].visible,
|
||||
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// console.log(modelList);
|
||||
return modelList;
|
||||
}
|
||||
|
||||
//加载课程资源
|
||||
this.lessonAssetsLoader = function(){
|
||||
fbxpromise();
|
||||
this.lessonAssetsLoader = function(assetList,modelList){
|
||||
|
||||
|
||||
let initlist = [];
|
||||
if(assetList){
|
||||
for(let i = 0;i<assetList.length;i++){
|
||||
assetList[i].mesh = "";
|
||||
scope.loadAsset[assetList[i].modelId] = assetList[i];
|
||||
|
||||
}
|
||||
}
|
||||
for(let k in scope.loadAsset){
|
||||
initlist.push(fbxpromise(scope.loadAsset[k]));
|
||||
|
||||
}
|
||||
|
||||
|
||||
return new Promise(function(resolve, reject){
|
||||
Promise.all(initlist).then((result) => {
|
||||
|
||||
|
||||
initTriggerList();
|
||||
for(let i=0;i<modelList.length;i++){
|
||||
console.log(modelList[i]);
|
||||
let newModelTrigger = scope.loadAsset[modelList[i].modelId].mesh.clone(true);
|
||||
newModelTrigger.showType = "loadModel";
|
||||
newModelTrigger.label = modelList[i].label;
|
||||
newModelTrigger.modelId = modelList[i].modelId;
|
||||
newModelTrigger.visible = modelList[i].visible;
|
||||
newModelTrigger.position.copy(modelList[i].pos);
|
||||
newModelTrigger.rotation.copy(modelList[i].rot);
|
||||
scope.otherModel.add(newModelTrigger);
|
||||
scope.lessonTriggerList.push(newModelTrigger);
|
||||
}
|
||||
|
||||
updateTriggerList(scope.lessonTriggerList);
|
||||
resolve("loaderassets"); //['成功了', 'success']
|
||||
}).catch((error) => {
|
||||
//console.log(error);
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
// <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>
|
||||
//FT 扶梯
|
||||
//FTAN 扶梯按钮(急停)
|
||||
//FTD 扶梯灯
|
||||
//FTKG 扶梯开关(钥匙孔)
|
||||
//FTTJ 扶梯台阶
|
||||
function initTriggerList(){
|
||||
scope.loadAsset['default1'].mesh.getObjectByName("FTAN").showType = "default";
|
||||
scope.loadAsset['default1'].mesh.getObjectByName("FTAN").label = "扶梯急停按钮";
|
||||
scope.lessonTriggerList.push(scope.loadAsset['default1'].mesh.getObjectByName("FTAN"));
|
||||
|
||||
scope.loadAsset['default1'].mesh.getObjectByName("FTKG").showType = "default";
|
||||
scope.loadAsset['default1'].mesh.getObjectByName("FTKG").label = "扶梯钥匙孔";
|
||||
scope.lessonTriggerList.push(scope.loadAsset['default1'].mesh.getObjectByName("FTKG"));
|
||||
|
||||
|
||||
// console.log(scope.loadAsset['default1'].mesh.getObjectByName("FTKG"));
|
||||
}
|
||||
|
||||
//动态加载资源
|
||||
this.assetLoader = function(){
|
||||
this.lessonAssetsNewLoader = function(assetData,pos){
|
||||
let isLoaded = false;
|
||||
if(scope.loadAsset[assetData.id]){
|
||||
let newModelTrigger = scope.loadAsset[assetData.id].mesh.clone(true);
|
||||
newModelTrigger.modelId = assetData.id;
|
||||
newModelTrigger.showType = "loadModel";
|
||||
newModelTrigger.label = assetData.packageName;
|
||||
newModelTrigger.position.copy(pos);
|
||||
scope.otherModel.add(newModelTrigger);
|
||||
scope.lessonTriggerList.push(newModelTrigger);
|
||||
updateTriggerList(scope.lessonTriggerList);
|
||||
}else{
|
||||
scope.loadAsset[assetData.id] = {
|
||||
modelId:assetData.id,
|
||||
packageName:assetData.packageName,
|
||||
url:assetData.url,
|
||||
mesh:"",
|
||||
assetType:'loadModel',
|
||||
isUse:true,
|
||||
resourceType:"三维课程",
|
||||
};
|
||||
console.log("new");
|
||||
fbxpromise(scope.loadAsset[assetData.id]).then(function(object){
|
||||
|
||||
let newModelTrigger = scope.loadAsset[assetData.id].mesh.clone(true);
|
||||
newModelTrigger.showType = "loadModel";
|
||||
newModelTrigger.modelId = assetData.id;
|
||||
newModelTrigger.label = assetData.packageName;
|
||||
newModelTrigger.position.copy(pos);
|
||||
scope.otherModel.add(newModelTrigger);
|
||||
scope.lessonTriggerList.push(newModelTrigger);
|
||||
|
||||
updateTriggerList(scope.lessonTriggerList);
|
||||
// resolve("loadednew");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//fbx模型加载
|
||||
function fbxpromise(){
|
||||
function fbxpromise(asset){
|
||||
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 ) {
|
||||
loader.load( BASE_ASSET_API+asset.url, function ( object ) {
|
||||
|
||||
if(asset.assetType == "default"){
|
||||
scene.add(object);
|
||||
}else if(asset.assetType == 'loadModel'){
|
||||
|
||||
scope.loadAsset.push(object);
|
||||
scene.add(object);
|
||||
}
|
||||
asset.mesh = object;
|
||||
resolve();
|
||||
} );
|
||||
|
||||
|
@ -65,7 +65,12 @@ export function Lesson3dEditor(dom,lessonData) {
|
||||
lesson3dUpdateControl(scope.controls);
|
||||
|
||||
let assetModelManager = new AssetModelManager(scene);
|
||||
assetModelManager.lessonAssetsLoader();
|
||||
if(lessonData.assetList.length>0 || lessonData.modelList.length>0){
|
||||
assetModelManager.lessonAssetsLoader(lessonData.assetList,lessonData.modelList);
|
||||
}else{
|
||||
assetModelManager.lessonAssetsLoader();
|
||||
}
|
||||
|
||||
animate();
|
||||
|
||||
|
||||
@ -83,4 +88,27 @@ export function Lesson3dEditor(dom,lessonData) {
|
||||
scope.renderer.setSize(dom.offsetWidth,dom.offsetHeight);
|
||||
}
|
||||
|
||||
this.createModelTrigger = function(assetData,mousePos){
|
||||
|
||||
var mouse = new THREE.Vector2();
|
||||
|
||||
var raycaster = new THREE.Raycaster();
|
||||
|
||||
mouse.x = ( mousePos.x / window.innerWidth ) * 2 - 1;
|
||||
|
||||
mouse.y = - ( mousePos.y / dom.offsetHeight ) * 2 + 1;
|
||||
|
||||
raycaster.setFromCamera(mouse,scope.camerass) // 也可以给构造函数传参的形式写
|
||||
|
||||
var intersects = raycaster.intersectObjects( scene.children,true );
|
||||
|
||||
if(intersects.length>0){
|
||||
assetModelManager.lessonAssetsNewLoader(assetData,intersects[0].point);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
this.saveAssetModel = function(){
|
||||
return assetModelManager.saveModelList();
|
||||
}
|
||||
}
|
||||
|
@ -8,10 +8,13 @@ export function LessonData() {
|
||||
this.lessonStatus = "";
|
||||
this.lessonData = {
|
||||
//资源列表
|
||||
assetmodel:[],
|
||||
assetList:[],
|
||||
//场景交互物体列表
|
||||
modelList:[],
|
||||
//课程组件启用状态
|
||||
lessonTools:[],
|
||||
dataType:"",
|
||||
toolJobPane:[],
|
||||
//课程内容
|
||||
lessonProgress:[
|
||||
|
||||
@ -20,6 +23,7 @@ export function LessonData() {
|
||||
|
||||
this.initLessonProgress = function(){
|
||||
let newLessonProgress = {
|
||||
id:generateUUID(),
|
||||
progressName:"",
|
||||
roleName:"",
|
||||
roleUse:true,
|
||||
@ -49,6 +53,10 @@ export function LessonData() {
|
||||
picurl:"url",
|
||||
text:"内容",
|
||||
},
|
||||
action:{
|
||||
actionType:"事件操作类型",
|
||||
actionMode:"触发事件类型",
|
||||
},
|
||||
};
|
||||
|
||||
scope.lessonData.lessonProgress.push(newLessonProgress);
|
||||
@ -59,10 +67,11 @@ export function LessonData() {
|
||||
console.log(loadData);
|
||||
for(let i=0;i<loadData.length;i++){
|
||||
let newLessonProgress = {
|
||||
id:loadData[i].id,
|
||||
progressName:loadData[i].progressName,
|
||||
roleName:loadData[i].roleName,
|
||||
roleUse:loadData[i].roleUse,
|
||||
|
||||
score:loadData[i].roleUse,
|
||||
progressScene:loadData[i].progressScene,
|
||||
nextCode:loadData[i].nextCode,
|
||||
nextNode:loadData[i].nextNode,
|
||||
@ -81,6 +90,8 @@ export function LessonData() {
|
||||
index:loadData[i].index,
|
||||
stepTipsData:loadData[i].stepTipsData,
|
||||
explainPane:loadData[i].explainPane,
|
||||
action:loadData[i].action,
|
||||
jobPane:[],
|
||||
};
|
||||
|
||||
scope.lessonData.lessonProgress.push(newLessonProgress);
|
||||
@ -90,10 +101,11 @@ export function LessonData() {
|
||||
this.addLessonProgress = function(index){
|
||||
let inheirIndex = index - 1;
|
||||
let newLessonProgress = {
|
||||
id:generateUUID(),
|
||||
progressName:"",
|
||||
roleName:scope.lessonData.lessonProgress[inheirIndex].roleName,
|
||||
roleUse:scope.lessonData.lessonProgress[inheirIndex].roleUse,
|
||||
|
||||
score:0,
|
||||
progressScene:scope.lessonData.lessonProgress[inheirIndex].progressScene,
|
||||
nextCode:"",
|
||||
nextNode:"",
|
||||
@ -122,6 +134,11 @@ export function LessonData() {
|
||||
picurl:"url",
|
||||
text:"内容",
|
||||
},
|
||||
action:{
|
||||
actionType:"事件操作类型",
|
||||
actionMode:"触发事件类型",
|
||||
},
|
||||
jobPane:[],
|
||||
};
|
||||
|
||||
scope.lessonData.lessonProgress.push(newLessonProgress);
|
||||
@ -136,6 +153,18 @@ export function LessonData() {
|
||||
scope.lessonData.lessonProgress.splice(index,1);
|
||||
}
|
||||
|
||||
function generateUUID() {
|
||||
var d = new Date().getTime();
|
||||
if (window.performance && typeof window.performance.now === "function") {
|
||||
d += performance.now(); //use high-precision timer if available
|
||||
}
|
||||
var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
|
||||
var r = (d + Math.random() * 16) % 16 | 0;
|
||||
d = Math.floor(d / 16);
|
||||
return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
|
||||
});
|
||||
return uuid;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
294
src/jlmap3d/lesson3dedit/toolsmodel/jobpanedata.js
Normal file
294
src/jlmap3d/lesson3dedit/toolsmodel/jobpanedata.js
Normal file
@ -0,0 +1,294 @@
|
||||
|
||||
export function JobPaneData() {
|
||||
let scope = this;
|
||||
|
||||
// let
|
||||
this.dataList = [
|
||||
{
|
||||
name:"值班站长",
|
||||
text:"执行分公司、部、中心、车站的有关规章制度,加强班组管理,掌握列车运行情况,安排车站行车组织工作",
|
||||
picurl:"",
|
||||
controlList:[
|
||||
//联控
|
||||
{
|
||||
name:"联控",
|
||||
data:[],
|
||||
},
|
||||
//动作
|
||||
{
|
||||
name:"动作",
|
||||
data:[],
|
||||
},
|
||||
//口呼
|
||||
{
|
||||
name:"口呼",
|
||||
data:[],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name:"行车值班员",
|
||||
text:"在本班组值班站长的指挥下开展工作,负责本班组车站综合控制室,负责车站行车工作,监视列车到、发情况及乘客上下车、候车动态,监控设备运作状况。",
|
||||
picurl:"",
|
||||
controlList:[
|
||||
//联控
|
||||
{
|
||||
name:"联控",
|
||||
data:[],
|
||||
},
|
||||
//动作
|
||||
{
|
||||
name:"动作",
|
||||
data:[],
|
||||
},
|
||||
//口呼
|
||||
{
|
||||
name:"口呼",
|
||||
data:[],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name:"客运值班员",
|
||||
text:"在值班站长的领导下,主管车站客运、票务管理,组织站务员从事客运服务工作",
|
||||
picurl:"",
|
||||
controlList:[
|
||||
//联控
|
||||
{
|
||||
name:"联控",
|
||||
data:[],
|
||||
},
|
||||
//动作
|
||||
{
|
||||
name:"动作",
|
||||
data:[],
|
||||
},
|
||||
//口呼
|
||||
{
|
||||
name:"口呼",
|
||||
data:[],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name:"票厅岗",
|
||||
text:"执行分公司、部、中心、车站的有关规章制度,在客运值班员领导下,负责车站售票工作。",
|
||||
picurl:"",
|
||||
controlList:[
|
||||
//联控
|
||||
{
|
||||
name:"联控",
|
||||
data:[],
|
||||
},
|
||||
//动作
|
||||
{
|
||||
name:"动作",
|
||||
data:[],
|
||||
},
|
||||
//口呼
|
||||
{
|
||||
name:"口呼",
|
||||
data:[],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name:"站台岗",
|
||||
text:"",
|
||||
picurl:"",
|
||||
controlList:[
|
||||
//联控
|
||||
{
|
||||
name:"联控",
|
||||
data:[],
|
||||
},
|
||||
//动作
|
||||
{
|
||||
name:"动作",
|
||||
data:[],
|
||||
},
|
||||
//口呼
|
||||
{
|
||||
name:"口呼",
|
||||
data:[],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name:"站长",
|
||||
text:"在站务中心(副)主任领导下,组织领导站内员工开展车站各项工作。负责车站员工的日常管理,定期进行员工教育,掌握员工思想状况。",
|
||||
picurl:"",
|
||||
controlList:[
|
||||
//联控
|
||||
{
|
||||
name:"联控",
|
||||
data:[],
|
||||
},
|
||||
//动作
|
||||
{
|
||||
name:"动作",
|
||||
data:[],
|
||||
},
|
||||
//口呼
|
||||
{
|
||||
name:"口呼",
|
||||
data:[],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name:"分部助理",
|
||||
text:"",
|
||||
picurl:"",
|
||||
controlList:[
|
||||
//联控
|
||||
{
|
||||
name:"联控",
|
||||
data:[],
|
||||
},
|
||||
//动作
|
||||
{
|
||||
name:"动作",
|
||||
data:[],
|
||||
},
|
||||
//口呼
|
||||
{
|
||||
name:"口呼",
|
||||
data:[],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name:"行车调度",
|
||||
text:"",
|
||||
picurl:"",
|
||||
controlList:[
|
||||
//联控
|
||||
{
|
||||
name:"联控",
|
||||
data:[],
|
||||
},
|
||||
//动作
|
||||
{
|
||||
name:"动作",
|
||||
data:[],
|
||||
},
|
||||
//口呼
|
||||
{
|
||||
name:"口呼",
|
||||
data:[],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name:"生产调度",
|
||||
text:"",
|
||||
picurl:"",
|
||||
controlList:[
|
||||
//联控
|
||||
{
|
||||
name:"联控",
|
||||
data:[],
|
||||
},
|
||||
//动作
|
||||
{
|
||||
name:"动作",
|
||||
data:[],
|
||||
},
|
||||
//口呼
|
||||
{
|
||||
name:"口呼",
|
||||
data:[],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name:"厅巡岗",
|
||||
text:"负责站厅乘客服务,设备的巡视、紧急情况下事件的处理等。",
|
||||
picurl:"",
|
||||
controlList:[
|
||||
//联控
|
||||
{
|
||||
name:"联控",
|
||||
data:[],
|
||||
},
|
||||
//动作
|
||||
{
|
||||
name:"动作",
|
||||
data:[],
|
||||
},
|
||||
//口呼
|
||||
{
|
||||
name:"口呼",
|
||||
data:[],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name:"地铁公安",
|
||||
text:"",
|
||||
picurl:"",
|
||||
controlList:[
|
||||
//联控
|
||||
{
|
||||
name:"联控",
|
||||
data:[],
|
||||
},
|
||||
//动作
|
||||
{
|
||||
name:"动作",
|
||||
data:[],
|
||||
},
|
||||
//口呼
|
||||
{
|
||||
name:"口呼",
|
||||
data:[],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name:"120",
|
||||
text:"",
|
||||
picurl:"",
|
||||
controlList:[
|
||||
//联控
|
||||
{
|
||||
name:"联控",
|
||||
data:[],
|
||||
},
|
||||
//动作
|
||||
{
|
||||
name:"动作",
|
||||
data:[],
|
||||
},
|
||||
//口呼
|
||||
{
|
||||
name:"口呼",
|
||||
data:[],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name:"119",
|
||||
text:"",
|
||||
picurl:"",
|
||||
controlList:[
|
||||
//联控
|
||||
{
|
||||
name:"联控",
|
||||
data:[],
|
||||
},
|
||||
//动作
|
||||
{
|
||||
name:"动作",
|
||||
data:[],
|
||||
},
|
||||
//口呼
|
||||
{
|
||||
name:"口呼",
|
||||
data:[],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
}
|
32
src/jlmap3d/lesson3dedit/toolsmodel/lessontrigger.js
Normal file
32
src/jlmap3d/lesson3dedit/toolsmodel/lessontrigger.js
Normal file
@ -0,0 +1,32 @@
|
||||
|
||||
export function LessonTrigger() {
|
||||
|
||||
let scope = this;
|
||||
|
||||
this.dataList = [
|
||||
|
||||
];
|
||||
// let
|
||||
this.triggerList = [
|
||||
{
|
||||
name:"移动触发器",
|
||||
type:"movetrigger",
|
||||
picurl:"",
|
||||
},
|
||||
{
|
||||
name:"置物触发器",
|
||||
type:"placetrigger",
|
||||
picurl:"",
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
this.createTrigger = function(type){
|
||||
|
||||
|
||||
}
|
||||
|
||||
this.deleteTrigger = function(selected){
|
||||
|
||||
}
|
||||
}
|
0
src/jlmap3d/lesson3dedit/toolsmodel/scenetrigger.js
Normal file
0
src/jlmap3d/lesson3dedit/toolsmodel/scenetrigger.js
Normal file
@ -16,6 +16,7 @@
|
||||
<el-option label="编辑器默认模型" value="EditModel"></el-option>
|
||||
<el-option label="VR模型" value="VrModel"></el-option>
|
||||
<el-option label="客流场景" value="客流模型"></el-option>
|
||||
<el-option label="三维课程" value="三维课程"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备类型">
|
||||
@ -42,6 +43,8 @@
|
||||
<el-option label="通号设备间" value="MaintainerRoom"></el-option>
|
||||
|
||||
<el-option label="静态模型" value="静态模型"></el-option>
|
||||
|
||||
<el-option label="三维课程模型" value="三维课程模型"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="模型信息">
|
||||
|
@ -3,7 +3,7 @@
|
||||
<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" >
|
||||
<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>
|
||||
@ -13,6 +13,12 @@
|
||||
<div class="progressdiv " icon="el-icon-folder-add" @click="addProgress"></div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="课程三维资源列表" name="assetlist" >
|
||||
<div class="progressdiv" v-for="(elementtrigger,indextrigger) in triggerList">
|
||||
{{elementtrigger.label}}
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
</el-tabs>
|
||||
|
||||
</div>
|
||||
@ -38,6 +44,7 @@
|
||||
progressList:[
|
||||
|
||||
],
|
||||
triggerList:[],
|
||||
listLength:0,
|
||||
progressIndex:0,
|
||||
}
|
||||
@ -49,6 +56,8 @@
|
||||
|
||||
},
|
||||
mounted() {
|
||||
window.updateTriggerList = this.updateTriggerList;
|
||||
|
||||
console.log(this.lessonData);
|
||||
},
|
||||
beforeDestroy() {
|
||||
@ -75,6 +84,10 @@
|
||||
console.log(viewIndex);
|
||||
this.$emit('removeProgress',viewIndex);
|
||||
},
|
||||
updateTriggerList(newTriggerList){
|
||||
this.triggerList = newTriggerList;
|
||||
console.log(this.triggerList);
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
@ -15,13 +15,20 @@
|
||||
</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">
|
||||
|
||||
<el-tab-pane label="三维资源" name="modelTrigger">
|
||||
<!-- <Assets-Model></Assets-Model> -->
|
||||
<draggable v-model="lessonAssetList" group="lessonAssetList" @start="drag=true" @end="drag=false" >
|
||||
<div class="progressdiv" v-for="(item,index) in lessonAssetList" @dragend="createModel($event,item,index)">
|
||||
{{item.packageName}}
|
||||
</div>
|
||||
</draggable>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="图片资源列表" name="picasset">
|
||||
<draggable v-model="triggerList" group="picasset" @start="drag=true" @end="drag=false" >
|
||||
<div class="progressdiv" v-for="item in triggerList" @dragend="ondragend(item,index)">
|
||||
</div>
|
||||
</draggable>
|
||||
<!-- <Assets-Model></Assets-Model> -->
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
@ -37,17 +44,24 @@
|
||||
import Vue from 'vue';
|
||||
import localStore from 'storejs';
|
||||
|
||||
import draggable from 'vuedraggable';
|
||||
|
||||
import { getMap3dModelData } from '@/api/jlmap3d/assets3d.js'
|
||||
|
||||
export default {
|
||||
name: 'LessonTools',
|
||||
props:['lessonTools'],
|
||||
components: {
|
||||
|
||||
draggable,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'lessoncomponent',
|
||||
|
||||
lessonAssetList:[],
|
||||
triggerList:[
|
||||
{},
|
||||
{},
|
||||
],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -57,14 +71,31 @@
|
||||
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.lessonTools);
|
||||
|
||||
getMap3dModelData("三维课程").then(netdata => {
|
||||
this.lessonAssetList = netdata.data;
|
||||
}).catch(error => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
beforeDestroy() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event);
|
||||
// console.log(tab, event);
|
||||
},
|
||||
ondragend(item, index) {
|
||||
|
||||
// console.log("```用户完成拖出后触发```");
|
||||
// console.log('开始拖动的元素'+item);
|
||||
console.log("拖出的母元素的下标" + index);
|
||||
console.log(item);
|
||||
|
||||
},
|
||||
createModel(event,item, index) {
|
||||
// console.log(event);
|
||||
this.$emit('createModel',item,{x:event.clientX,y:event.clientY});
|
||||
},
|
||||
|
||||
},
|
||||
@ -93,4 +124,14 @@
|
||||
border:solid 2px #000;
|
||||
}
|
||||
|
||||
.progressdiv{
|
||||
width:100px;
|
||||
height:100px;
|
||||
// display:inline;
|
||||
margin: 20px;
|
||||
float:left;
|
||||
border:solid 2px #000;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
@ -3,7 +3,7 @@
|
||||
<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-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>
|
||||
@ -51,10 +51,7 @@
|
||||
|
||||
<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]">
|
||||
@ -71,11 +68,42 @@
|
||||
<el-input v-model="selected.picurl" ></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="跳转节点:" v-if="selected.nextNode ||selected.nextNode == 0">
|
||||
<el-select v-model="selected.nextNode" placeholder="当前场景镜头控制模式">
|
||||
<el-option
|
||||
v-for="(item,index) in lessonData.lessonData.lessonProgress"
|
||||
:key="index"
|
||||
:label="index"
|
||||
:value="index">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="触发的场景:" v-if="selected.sceneIndex ||selected.sceneIndex == 0">
|
||||
<el-input v-model="selected.sceneIndex" ></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 label="场景中事件" name="modelaction" v-if="lessonData.lessonData.lessonProgress[lessonEditIndex]">
|
||||
<div class="actionlistdiv">
|
||||
|
||||
</div>
|
||||
<el-form>
|
||||
<el-select v-model="selectedAction.actionType" placeholder="请选择场景">
|
||||
<el-option label="接触" value="contact"></el-option>
|
||||
<el-option label="自动" value="auto"></el-option>
|
||||
<el-option label="开关" value="switch"></el-option>
|
||||
</el-select>
|
||||
|
||||
<el-select v-model="selectedAction.actionMode" placeholder="请选择场景">
|
||||
<el-option label="播放动画" value="play"></el-option>
|
||||
<el-option label="显示模型" value="show"></el-option>
|
||||
<el-option label="隐藏模型" value="remove"></el-option>
|
||||
</el-select>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
|
||||
|
||||
@ -102,6 +130,10 @@
|
||||
selected:"",
|
||||
editSelectTool:"",
|
||||
editSelectModel:"",
|
||||
selectedAction:{
|
||||
actionType:"事件操作类型",
|
||||
actionMode:"触发事件类型",
|
||||
},
|
||||
cameraMode:[
|
||||
{
|
||||
value: 'non',
|
||||
@ -143,7 +175,7 @@
|
||||
console.log("reset");
|
||||
this.activeName = 'cameraproperty';
|
||||
},
|
||||
lesson3dSelect(mode,type){
|
||||
lesson3dSelect(mode,type,obj){
|
||||
this.activeName = mode;
|
||||
// console.log(this.lessonData.lessonData.lessonProgress[this.lessonEditIndex].stepTipsData);
|
||||
// this.activeName = 'toolproperty';
|
||||
@ -156,6 +188,10 @@
|
||||
this.selected = this.lessonData.lessonData.lessonProgress[this.lessonEditIndex].explainPane;
|
||||
}
|
||||
|
||||
if(type == "jobpane"){
|
||||
this.selected = obj;
|
||||
}
|
||||
|
||||
},
|
||||
updateData(){
|
||||
// this.lessonData.lessonData.lessonProgress[this.lessonEditIndex].stepTipsData;
|
||||
@ -189,5 +225,18 @@
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.actionlistdiv{
|
||||
// position: absolute;
|
||||
width:100%;
|
||||
height:500px;
|
||||
|
||||
border:solid 2px #000;
|
||||
}
|
||||
|
||||
.actionpropertydiv{
|
||||
width:100%;
|
||||
// position: absolute;
|
||||
border:solid 2px #000;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
@ -2,8 +2,10 @@
|
||||
|
||||
<div id="lesson3ddiv" class="lesson3ddiv">
|
||||
|
||||
<LessonTools-Manager :lessonTools='lessonTools'></LessonTools-Manager>
|
||||
|
||||
<LessonTools-Manager
|
||||
@createModel='createModel'
|
||||
:lessonTools='lessonTools'
|
||||
></LessonTools-Manager>
|
||||
|
||||
<div class="lesson3dedit">
|
||||
<Step-Tips
|
||||
@ -13,7 +15,6 @@
|
||||
</Step-Tips>
|
||||
|
||||
<Process-Log
|
||||
|
||||
v-show="lessonTools[1].isShow && lessonData.lessonData.lessonProgress[lessonEditIndex].progressScene == 'standstation'">
|
||||
</Process-Log>
|
||||
|
||||
@ -23,7 +24,14 @@
|
||||
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>
|
||||
<Job-Pane
|
||||
:jobPaneData='jobPaneData'
|
||||
:lessonData='lessonData'
|
||||
:lessonEditIndex='lessonEditIndex'
|
||||
ref="jobpane"
|
||||
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">
|
||||
@ -31,7 +39,6 @@
|
||||
</div>
|
||||
|
||||
<Lesson-Progress
|
||||
|
||||
:lessonData='lessonData'
|
||||
@addProgress="addProgress"
|
||||
@changeProgressView="changeProgressView"
|
||||
@ -83,6 +90,7 @@
|
||||
import { Lesson3dEditor } from '@/jlmap3d/lesson3dedit/lesson3deditor.js';
|
||||
|
||||
import { LessonData } from '@/jlmap3d/lesson3dedit/model/lessondata.js';
|
||||
import { JobPaneData } from '@/jlmap3d/lesson3dedit/toolsmodel/jobpanedata.js';
|
||||
|
||||
import { getLesson3dData,updateLesson3dData } from '@/api/jmap/lesson3d';
|
||||
export default {
|
||||
@ -114,7 +122,7 @@
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
jobPaneData:{},
|
||||
lessonEditIndex:0,
|
||||
lessonTools:[
|
||||
{
|
||||
@ -162,26 +170,37 @@
|
||||
let dom = document.getElementById('lesson3ddraw');
|
||||
|
||||
this.lessonData = new LessonData();
|
||||
this.jobPaneData = new JobPaneData();
|
||||
let loadData;
|
||||
if(data.data.data){
|
||||
let loadData = JSON.parse(data.data.data);
|
||||
loadData = JSON.parse(data.data.data);
|
||||
|
||||
|
||||
this.jobPaneData.dataList = loadData.toolJobPane;
|
||||
this.$refs.jobpane.initJobList(this.jobPaneData.dataList);
|
||||
|
||||
this.lessonTools = loadData.lessonTools;
|
||||
this.lessonData.loadLessonProgress(loadData.lessonProgress);
|
||||
}else{
|
||||
this.lessonData.initLessonProgress();
|
||||
this.$refs.jobpane.initJobList(this.jobPaneData.dataList);
|
||||
}
|
||||
|
||||
this.jl3d = new Lesson3dEditor(dom,this.lessonData);
|
||||
console.log("loaddata----------------");
|
||||
console.log(loadData);
|
||||
this.jl3d = new Lesson3dEditor(dom,loadData);
|
||||
}).catch(() => {
|
||||
});
|
||||
|
||||
|
||||
|
||||
},
|
||||
|
||||
saveLesson3dData(){
|
||||
this.lessonData.lessonData.lessonTools = this.lessonTools;
|
||||
let saveData = this.lessonData.lessonData;
|
||||
saveData.toolJobPane = this.jobPaneData.dataList;
|
||||
|
||||
let assetModelData = this.jl3d.saveAssetModel();
|
||||
saveData.assetList = assetModelData.assetList;
|
||||
saveData.modelList = assetModelData.modelList;
|
||||
|
||||
this.netData.data = JSON.stringify(saveData);
|
||||
// console.log();
|
||||
updateLesson3dData(this.$route.query.lessonId,this.netData).then(data => {
|
||||
@ -205,7 +224,11 @@
|
||||
},
|
||||
setupclick(){
|
||||
|
||||
}
|
||||
},
|
||||
createModel(assetData,mousePos){
|
||||
this.jl3d.createModelTrigger(assetData,mousePos);
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
|
||||
|
@ -2,17 +2,24 @@
|
||||
|
||||
<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 class="jobdiv" v-for="(jobitem,index) in jobList" @click="selectJob(jobitem)" >{{jobitem.name}}</div>
|
||||
</div>
|
||||
<div class="jobtab" v-if="selectedJob">
|
||||
<div class="jobtabmsg" >
|
||||
<div class="jobtabmsgdiv" >{{selectedJob.name}}</div>
|
||||
<div class="jobtabmsgtext" >{{selectedJob.text}}</div>
|
||||
</div>
|
||||
<div class="eltabpaneover" >
|
||||
<el-tabs >
|
||||
<el-tab-pane v-for="(item,index) in selectedJob.controlList" label-width="33%" :key="item.name" :label="item.name" >
|
||||
<div class="addjobdivs" v-for="(itemin,indexin) in selectedJob.controlList[index].data" @click="selsectJobTool(itemin)">{{itemin.text}}</div>
|
||||
<div class="addjobdiv" @click="addjob(index)">添加</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
@ -20,9 +27,13 @@
|
||||
import Vue from 'vue';
|
||||
import localStore from 'storejs';
|
||||
import { JL3D_LOCAL_STATIC } from '@/api/jlmap3d/assets3d.js';
|
||||
|
||||
|
||||
//岗位
|
||||
export default {
|
||||
name: 'JobPane',
|
||||
props:['jobPaneData','lessonData','lessonEditIndex'],
|
||||
|
||||
components: {
|
||||
|
||||
},
|
||||
@ -31,17 +42,7 @@
|
||||
jobList:[],
|
||||
showJobList:false,
|
||||
showJob:false,
|
||||
jobUse:[
|
||||
{
|
||||
name:"联控"
|
||||
},
|
||||
{
|
||||
name:"动作"
|
||||
},
|
||||
{
|
||||
name:"口呼"
|
||||
},
|
||||
],
|
||||
selectedJob:null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -51,7 +52,7 @@
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.initJobList();
|
||||
// this.initJobList();
|
||||
},
|
||||
beforeDestroy() {
|
||||
|
||||
@ -60,71 +61,35 @@
|
||||
openList(){
|
||||
if(this.showJobList ==false){
|
||||
this.showJobList = true;
|
||||
this.showJob = true;
|
||||
// this.showJob = true;
|
||||
}else{
|
||||
this.showJobList = false;
|
||||
this.showJob = false;
|
||||
this.selectedJob = null;
|
||||
}
|
||||
|
||||
},
|
||||
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:"",
|
||||
},
|
||||
];
|
||||
initJobList(data){
|
||||
this.jobList = data;
|
||||
console.log(data);
|
||||
},
|
||||
selectJob(item){
|
||||
console.log(item);
|
||||
this.selectedJob = item;
|
||||
|
||||
|
||||
},
|
||||
addjob(index){
|
||||
this.selectedJob.controlList[index].data.push({
|
||||
cname:"1",
|
||||
text:"123",
|
||||
nextNode:"null",
|
||||
sceneId:this.lessonData.lessonData.lessonProgress[this.lessonEditIndex].id,
|
||||
type:"",
|
||||
});
|
||||
},
|
||||
selsectJobTool(selectTool){
|
||||
lesson3dSelect('toolproperty','jobpane',selectTool);
|
||||
console.log(selectTool);
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
@ -175,6 +140,7 @@
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
.jobtab{
|
||||
position: absolute;
|
||||
|
||||
@ -185,5 +151,56 @@
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.eltabpaneover{
|
||||
width:300px;
|
||||
height:350px;
|
||||
overflow-y:auto;
|
||||
overflow-x:hidden;
|
||||
}
|
||||
|
||||
.jobtabmsg{
|
||||
width:300px;
|
||||
height:100px;
|
||||
border:solid 2px #000;
|
||||
// position: relative;
|
||||
}
|
||||
|
||||
.jobtabmsgdiv{
|
||||
width:80px;
|
||||
height:80px;
|
||||
position:absolute;
|
||||
top:10px;
|
||||
left:5px;
|
||||
border:solid 2px #000;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.jobtabmsgtext{
|
||||
width:200px;
|
||||
height:80px;
|
||||
// margin-top: 5px;
|
||||
// margin-left: 2px;
|
||||
border:solid 2px #000;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
right:10px;
|
||||
top:10px;
|
||||
}
|
||||
|
||||
.addjobdivs{
|
||||
|
||||
width:98%;
|
||||
margin: 1%;
|
||||
border:solid 2px #000;
|
||||
}
|
||||
|
||||
.addjobdiv{
|
||||
width:98%;
|
||||
height:50px;
|
||||
margin: 1%;
|
||||
border:solid 2px #000;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
1029
static/three.min.js
vendored
1029
static/three.min.js
vendored
File diff suppressed because one or more lines are too long
49188
static/three.module.js
Normal file
49188
static/three.module.js
Normal file
File diff suppressed because one or more lines are too long
49188
static/three.moduleold.js
Normal file
49188
static/three.moduleold.js
Normal file
File diff suppressed because one or more lines are too long
1010
static/threeold.min.js
vendored
1010
static/threeold.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user