diff --git a/src/jlmap3d/lesson3dedit/assetmodelmanager/assetmodelmanager.js b/src/jlmap3d/lesson3dedit/assetmodelmanager/assetmodelmanager.js index 13bd13e48..4ca0a71ec 100644 --- a/src/jlmap3d/lesson3dedit/assetmodelmanager/assetmodelmanager.js +++ b/src/jlmap3d/lesson3dedit/assetmodelmanager/assetmodelmanager.js @@ -86,7 +86,7 @@ export function AssetModelManager(scene) { } - + console.log(scope.loadAsset); return new Promise(function(resolve, reject){ Promise.all(initlist).then((result) => { diff --git a/src/jlmap3d/lesson3dedit/lesson3deditor.js b/src/jlmap3d/lesson3dedit/lesson3deditor.js index f6e058dc1..45237eb0a 100644 --- a/src/jlmap3d/lesson3dedit/lesson3deditor.js +++ b/src/jlmap3d/lesson3dedit/lesson3deditor.js @@ -12,7 +12,7 @@ import { SkeletonUtils } from '@/jlmap3d/main/utils/SkeletonUtils.js'; import { AssetModelManager } from '@/jlmap3d/lesson3dedit/assetmodelmanager/assetmodelmanager.js'; - +import { TransformControls } from '@/jlmap3d/jl3dstationmanager/controls/TransformControls'; //动画播放相关 let clock = new THREE.Clock(); @@ -64,26 +64,48 @@ export function Lesson3dEditor(dom,lessonData) { lesson3dUpdateControl(scope.controls); + let transcontrol = new THREE.TransformControls( scope.camerass, scope.renderer.domElement ); + // + transcontrol.addEventListener( 'change', render ); + // + transcontrol.addEventListener( 'dragging-changed', function ( event ) { + scope.controls.enabled = ! event.value; + } ); + // + scene.add(transcontrol); + + + let assetModelManager = new AssetModelManager(scene); - if(lessonData.assetList.length>0 || lessonData.modelList.length>0){ - assetModelManager.lessonAssetsLoader(lessonData.assetList,lessonData.modelList); + console.log(lessonData); + if(lessonData){ + if(lessonData.assetList.length>0 || lessonData.modelList.length>0){ + assetModelManager.lessonAssetsLoader(lessonData.assetList,lessonData.modelList); + }else{ + assetModelManager.lessonAssetsLoader(); + } }else{ assetModelManager.lessonAssetsLoader(); } + animate(); //循环渲染函数 function animate() { - scope.renderer.render( scene, scope.camerass ); + render(); scope.controls.update(); // delta = clock.getDelta(); requestAnimationFrame(animate); } + function render(){ + scope.renderer.render( scene, scope.camerass ); + } + window.onresize = function () { scope.renderer.setSize(dom.offsetWidth,dom.offsetHeight); } @@ -111,4 +133,8 @@ export function Lesson3dEditor(dom,lessonData) { this.saveAssetModel = function(){ return assetModelManager.saveModelList(); } + + this.attachModel = function(selectModel){ + transcontrol.attach(selectModel); + } } diff --git a/src/jmapNew/config/skinCode/datie_01.js b/src/jmapNew/config/skinCode/datie_01.js index 33823fd1e..4c501a85f 100644 --- a/src/jmapNew/config/skinCode/datie_01.js +++ b/src/jmapNew/config/skinCode/datie_01.js @@ -258,71 +258,19 @@ class SkinCode extends defaultStyle { }; this[deviceType.StationStand] = { - // 成都三号线站台元素 站台 站台紧急关闭 扣车元素 停站时间 运行等级 跳停 - elemnetType:['solidStand', 'emergentRhombus', 'detainNormal', 'stopTime', 'level', 'jumpCircle'], + // 站台元素 站台 + elemnetType:['lineStand'], // 站台 - solidStand:{ + lineStand:{ // 层级 z:0, - spareColor: '#ffffff', // 站台空闲颜色 - jumpStopColor: '#808080', // 站台跳停颜色 - designatedJumpStopColor: '#808080', // 站台指定列车跳停颜色 - headFontSize: 10, // 站台首端字体大小 - stopColor: '#FFF000' // 站台列车停站颜色 + spareColor: '#00ff00', // 站台空闲颜色 + lineWidth:2 // 线宽 + // jumpStopColor: '#808080', // 站台跳停颜色 + // designatedJumpStopColor: '#808080', // 站台指定列车跳停颜色 + // headFontSize: 10, // 站台首端字体大小 + // stopColor: '#FFF000' // 站台列车停站颜色 }, - // 站台紧急关闭 - emergentRhombus:{ - z:1, - flicker: true, // 闪烁 - mergentR: 5, // 站台紧急关闭半径 - mergentN: 4, // 站台紧急关闭边数 - insideOffset: { x: 0, y: -30 }, // 内站台紧急关闭偏移量 - outsideOffset: { x: 0, y: 30}, // 外站台紧急关闭偏移量 - closeColor: '#F61107' // 站台紧急关闭颜色 - }, - // 扣车元素 普通扣车 - detainNormal:{ - z:0, - position: -1, // 扣车标识在站台上显示方向 - text: '扣', // 扣车显示内容 - insideOffset: {x: -8, y: 20}, // 内站台扣车偏移量 - outsideOffset: {x: -8, y: 20}, // 外站台扣车偏移量 - centerTrainColor: '#C0C0C0', // 中心扣车颜色 - andCenterTrainColor: '#C0C0C0', // 车站+中心扣车颜色 - detainTrainTextColor: '#E4EF50', // 车站扣除文字颜色 - fontSize: 10, // 字体大小 - fontWeight: 'normal' - }, - // 停站时间 - stopTime:{ - z:1, - textFontSize: 10, // 停站时间字体大小 - textColor: '#FFFFFF', // 停站时间字体颜色 - position: -1, // 停站时间方向 - offset: {x: -8, y: 10} // 停站时间偏移量 - }, - // 运行等级 - level:{ - z:1, - textFontSize: 10, // 运行等级字体大小 - position: 1, // 运行等级方向 - offset: {x: -8, y: 15}, // 运行等级偏移量 - textColor: '#FFF000' // 停站等级字体颜色 - }, - // 跳停 - jumpCircle: { - z:1, - position: 1, // 停跳方向 - text: '跳', // 停跳显示内容 - offset: {x: -8, y: 10}, - textColor: '#00ffcc', // 停跳文字颜色 - arcColor: '#00ffcc', // 停跳圆圈颜色 - fillColor: 'rgba(0,0,0,0)', // 透明填充颜色 - r: 8, // 圆半径大小 - fontWeight: 'normal', // 文字居中 - fontSize: 11 // 文字大小 - }, - common: { // 通用属性 textFontSize: 10, // 站台默认字体大小 functionButtonShow: '03' // 功能灯按钮显示条件（prdType） @@ -479,13 +427,13 @@ class SkinCode extends defaultStyle { }, core: { length: 6, // 道岔单边长度 - graphShow: true, // 图形显示 - graphInversionColor: '#FFFF00', // 反位颜色 - graphLocalColor: '#00FF00' // 定位颜色 + graphShow: true, // 图形显示 + graphInversionColor: '#FFFF00', // 反位颜色 + graphLocalColor: '#00FF00' // 定位颜色 }, jointImg: { // 道岔 A B C D四元素属性配置 - trapezoidLength: 8, // 直角梯形元素默认长度 - faultStatus: true, // 挤岔表示 + trapezoidLength: 8, // 直角梯形元素默认长度 + faultStatus: true, // 挤岔表示 fork: true, // 挤岔专用（如有挤岔操作 变为true） forKColor: 'red' // 挤岔颜色 配合挤岔专用 }, @@ -500,15 +448,15 @@ class SkinCode extends defaultStyle { rectBorderColor: '#fff', // 矩形边框颜色 block: true, // 封锁显示 blockColor: 'red', // 封锁颜色 - followName: true, // 位置跟随名称确定 + followName: true // 位置跟随名称确定 }, - arcBlcok: { // 圆形封锁图形 + arcBlcok: { // 圆形封锁图形 show: true, // 显示 shapeR: 10, arcBorderColor: 'red', // 默认边框颜色 locationColor: 'red', // 定位封锁颜色 inversionColor: 'red' // 反位封锁颜色 - }, + } }; this[deviceType.LcControl] = { diff --git a/src/jmapNew/shape/StationStand/index.js b/src/jmapNew/shape/StationStand/index.js index c037e110c..cdcf8516d 100644 --- a/src/jmapNew/shape/StationStand/index.js +++ b/src/jmapNew/shape/StationStand/index.js @@ -3,6 +3,7 @@ import Group from 'zrender/src/container/Group'; import ESolidStand from './safeStand/ESolidStand'; import EHollowStand from './safeStand/EHollowStand'; import EGapStand from './safeStand/EGapStand'; +import ELineStand from './safeStand/ELineStand'; // 扣车元素 import EDetain from './detain/EDetain'; import EDetainHollow from './detain/EDetainHollow'; @@ -65,6 +66,7 @@ class StationStand extends Group { 'solidStand':ESolidStand, // 矩形实心站台 （普通站台样式） 'hollowStand':EHollowStand, // 矩形空心站台 （西安二号线站台样式） 'gapStand':EGapStand, // 分割站台（哈尔滨站台特有） + 'lineStand':ELineStand, // 大铁折线站台 'emergentCross':EEmergentCross, // 站台紧急关闭 西安二号线 正八边形 'emergentArrow':EEmergentArrow, // 站台紧急关闭 哈尔滨 箭头型 diff --git a/src/jmapNew/shape/StationStand/safeStand/ELineStand.js b/src/jmapNew/shape/StationStand/safeStand/ELineStand.js new file mode 100644 index 000000000..30c5f7435 --- /dev/null +++ b/src/jmapNew/shape/StationStand/safeStand/ELineStand.js @@ -0,0 +1,70 @@ +import Group from 'zrender/src/container/Group'; +import Polyline from 'zrender/src/graphic/shape/Polyline'; +// import Rect from 'zrender/src/graphic/shape/Rect'; +// import Text from 'zrender/src/graphic/Text'; + +class ESolidStand extends Group { + constructor(model) { + super(); + this.model = model; + this.create(); + } + + create() { + const model = this.model.modelData; + const style = this.model.style; + const standX = model.position.x - model.width / 2; + const standY = model.position.y - model.height / 2; + const direction = model.right ? 1 : -1; + + this.stand = new Polyline({ + zlevel: this.model.zlevel, + z: this.model.z + 2, + shape: { + points:[ + [standX, standY + direction * model.height], + [standX, standY], + [standX + model.width, standY], + [standX + model.width, standY + direction * model.height] + ] + }, + style: { + stroke:style.StationStand.lineStand.spareColor, + lineWidth: style.StationStand.lineStand.lineWidth + } + }); + this.add(this.stand); + + // if (style.StationStand.solidStand.stationHoldTrainColor) { + // const direction = model.right ? 1 : -1; + // this.holdTrain = new Rect({ + // zlevel: this.model.zlevel, + // z: this.model.z + 2, + // shape: { + // x: standX, + // y: standY + (1 - direction) / 2 * model.height / 2, + // width: model.width, + // height: model.height / 2 + // }, + // style: { + // fill:style.StationStand.solidStand.spareColor, + // lineWidth: 0 + // } + // }); + // this.add(this.holdTrain); + // this.holdTrain.hide(); + // } + } + setStroke(color) { + this.stand.setStyle('stroke', color); + } + recover() { + // const style = this.model.style; + } + + setState(model) { + } + +} + +export default ESolidStand; diff --git a/src/views/designPlatform/demonList.vue b/src/views/designPlatform/demonList.vue index 9faba0cee..167fefc8b 100644 --- a/src/views/designPlatform/demonList.vue +++ b/src/views/designPlatform/demonList.vue @@ -205,7 +205,7 @@ export default { lineCode: elem.lineCode, cityCode: elem.cityCode }); - // this.isAdministrator() ? elem.children.push({id: '8', name: this.$t('designPlatform.lesson3dDesign'), type: 'lesson3dDesign'}) : ''; + this.isAdministrator() ? elem.children.push({id: '8', name: this.$t('designPlatform.lesson3dDesign'), type: 'lesson3dDesign'}) : ''; }); diff --git a/src/views/jlmap3d/lesson3dedit/component/lessonprogress.vue b/src/views/jlmap3d/lesson3dedit/component/lessonprogress.vue index 44fb719a6..23a2ecf30 100644 --- a/src/views/jlmap3d/lesson3dedit/component/lessonprogress.vue +++ b/src/views/jlmap3d/lesson3dedit/component/lessonprogress.vue @@ -15,7 +15,9 @@
- {{elementtrigger.label}} +
{{elementtrigger.label}}
+
X
+
@@ -84,6 +86,13 @@ console.log(viewIndex); this.$emit('removeProgress',viewIndex); }, + + selectModel(selectedModel){ + this.$emit('selectModel',selectedModel); + }, + deleteModel(selectedModel){ + this.$emit('deleteModel',selectedModel); + }, updateTriggerList(newTriggerList){ this.triggerList = newTriggerList; console.log(this.triggerList); diff --git a/src/views/jlmap3d/lesson3dedit/component/property.vue b/src/views/jlmap3d/lesson3dedit/component/property.vue index 83777ddf9..12df32c40 100644 --- a/src/views/jlmap3d/lesson3dedit/component/property.vue +++ b/src/views/jlmap3d/lesson3dedit/component/property.vue @@ -83,8 +83,36 @@ + + 保存修改 + + + + + + + + + + + + + + + + + @@ -130,6 +158,7 @@ selected:"", editSelectTool:"", editSelectModel:"", + selectType:"", selectedAction:{ actionType:"事件操作类型", actionMode:"触发事件类型", @@ -177,6 +206,7 @@ }, lesson3dSelect(mode,type,obj){ this.activeName = mode; + this.selectType = type; // console.log(this.lessonData.lessonData.lessonProgress[this.lessonEditIndex].stepTipsData); // this.activeName = 'toolproperty'; // this.activeName = 'modelproperty'; @@ -192,6 +222,11 @@ this.selected = obj; } + if(type == "modelproperty"){ + this.selected = obj; + console.log(this.selected); + } + }, updateData(){ // this.lessonData.lessonData.lessonProgress[this.lessonEditIndex].stepTipsData; diff --git a/src/views/jlmap3d/lesson3dedit/lesson3dedit.vue b/src/views/jlmap3d/lesson3dedit/lesson3dedit.vue index d19ff95bf..7b657a117 100644 --- a/src/views/jlmap3d/lesson3dedit/lesson3dedit.vue +++ b/src/views/jlmap3d/lesson3dedit/lesson3dedit.vue @@ -43,6 +43,8 @@ @addProgress="addProgress" @changeProgressView="changeProgressView" @removeProgress="removeProgress" + @selectModel="selectModel" + @deleteModel="deleteModel" > @@ -62,7 +64,11 @@ - + @@ -221,6 +227,14 @@ }, removeProgress(removeIndex){ this.lessonData.removeLessonProgress(removeIndex); + }, + selectModel(selectedModel){ + console.log(selectedModel); + lesson3dSelect('toolproperty','modelproperty',selectedModel); + this.jl3d.attachModel(selectedModel); + }, + deleteModel(selectedModel){ + }, setupclick(){