增加继电器部件显示

src/jlmap3d/jl3ddevicetrain/component/jdqcontrol.js

@@ -23,65 +23,82 @@ export function Jdqcontrol(){
         mesh:selectmodel.children[i],
         index:i,
         show:true,
+        msg:null,
       };
       if(selectmodel.children[i].name == "dizuo"){
         part.text = "底座";
+        part.msg = "";
         selectmodel.children[i].text = "底座";
       }
       if(selectmodel.children[i].name == "cigang"){
         part.text = "磁钢";
+        part.msg = "";
         selectmodel.children[i].text = "磁钢";
       }
       if(selectmodel.children[i].name == "Lxing"){
         part.text = "L型轭铁";
+        part.msg = "扼铁呈Ｌ洲形，由电工纯铁板冲压成型，外表镀多层铬防护。";
         selectmodel.children[i].text = "L型轭铁";
       }
       if(selectmodel.children[i].name == "jiaoxingxiantie"){
         part.text = "角型衔铁";
+        part.msg = "衔铁为角型，靠蝶形钢丝卡固定在轭铁的刀刃上，动作灵活。衔铁由电工纯铁冲压成型，衔铁上铆有重锤片，以保证衔铁靠重力返回";
         selectmodel.children[i].text = "角型衔铁";
       }
       if(selectmodel.children[i].name == "xianquan"){
         part.text = "线圈";
+        part.msg = "线圈水平安装在铁芯上，分为前圈和后圈，之所以采用双线圈，主要是为了增强控制电路的适应性和灵活性，可根据电路需要单线圈控"+
+        "制、双线圈串联控制或双线圈并联控制。";
         selectmodel.children[i].text =  "线圈";
       }
       if(selectmodel.children[i].name == "zhongchuipian"){
         part.text = "重锤片";
+        part.msg = "重锤片由薄钢板制成，其片数由接点组的多少决定，使衔铁的重量基本上满足后接点压力的需要。";
         selectmodel.children[i].text = "重锤片";
       }
       if(selectmodel.children[i].name == "lagan"){
         part.text = "拉杆";
+        part.msg = "拉杆有铁制的和塑料制的，衔铁通过拉杆带动接点组。";
         selectmodel.children[i].text = "拉杆";
       }
       if(selectmodel.children[i].name == "dongjiedianzhou"){
         part.text = "动接点轴";
+        part.msg = "动接点轴由锡磷青铜线制成。";
         selectmodel.children[i].text = "动接点轴";
       }
       if(selectmodel.children[i].name == "neibu"){
         part.text = "内部";
+        part.msg = "";
         selectmodel.children[i].text = "内部";
       }
       if(selectmodel.children[i].name == "jiedian"){
-        part.text = "节点";
+        part.text = "接点";
-        selectmodel.children[i].text = "节点";
+        part.msg = "";
+        selectmodel.children[i].text = "接点";
       }
       if(selectmodel.children[i].name == "yapian"){
         part.text = "压片";
+        part.msg = "压片由弹簧钢板冲压成弓形，分上、下两篇，其作用是保证接点组的稳固性。";
         selectmodel.children[i].text = "压片";
       }
       if(selectmodel.children[i].name == "fanghuozhao"){
         part.text = "防火罩";
+        part.msg = "";
         selectmodel.children[i].text = "防火罩";
       }
       if(selectmodel.children[i].name == "dianyuanpian"){
         part.text = "电源片";
+        part.msg = "电源片单元由黄铜制成的电源片压在胶木内。";
         selectmodel.children[i].text = "电源片";
       }
       if(selectmodel.children[i].name == "xinpian"){
         part.text = "电路板";
+        part.msg = "";
         selectmodel.children[i].text = "电路板";
       }
       if(selectmodel.children[i].name =="jueyuanzhou"){
         part.text = "绝缘轴";
+        part.msg = "绝缘轴用冻石瓷料制成，抗冲击强度足够。";
         selectmodel.children[i].text = "绝缘轴";
       }
 

src/jlmap3d/jl3ddevicetrain/component/moveanimate.js

@@ -11,7 +11,7 @@ export function Moveanimate(){
     // points.push(new THREE.Vector3(modellist[j].children[i].position.x,modellist[j].children[i].position.y,modellist[j].children[i].position.z));
     // points.push(new THREE.Vector3(modellist[j].children[i].position.x,modellist[j].children[i].position.y,modellist[j].children[i].position.z));
     // scope.initanimate(modellist[j].children[i],modellist[j].name+"select1",points,true);
-    console.log(modellist);
+
     for(let j=0,lenj=modellist.length;j<lenj;j++){
       for(let i=0,leni=modellist[j].children.length;i<leni;i++){
 
@@ -191,14 +191,13 @@ export function Moveanimate(){
       // console.log(scope.enable);
       for(let k in scope.animatelist){
         if(scope.animatelist[k].enable){
-            console.log(scope.animatelist[k].progress);
             if(scope.animatelist[k].progress>=0.99){
               scope.animatelist[k].enable = false;
               scope.animatelist[k].status = "end";
               scope.animatelist[k].progress = 0;
             }else{
               let point = scope.animatelist[k].curve.getPointAt(scope.animatelist[k].progress);
-              console.log(scope.animatelist[k].progress);
+
               scope.animatelist[k].connectmodel.position.x = point.x;
               scope.animatelist[k].connectmodel.position.y = point.y;
               scope.animatelist[k].connectmodel.position.z = point.z;

src/jlmap3d/jl3ddevicetrain/jl3ddevicetrain.js

@@ -46,7 +46,8 @@ export function Jl3ddevice(dom) {
 	this.controls.update();
 	//定义场景(渲染容器)
 	let scene = new THREE.Scene();
-	scene.background = new THREE.Color(0xa0a0a0);
+	var bgTexture = new THREE.TextureLoader().load("../../static/background/background.jpg");
+  scene.background = bgTexture;
 
 	//定义全局光
 	let ambientLight = new THREE.AmbientLight(0xffffff, 1.3);
@@ -81,28 +82,32 @@ export function Jl3ddevice(dom) {
 
 	this.selectmodel = null;
 
+	//菜单选中设备更新设备较少
 	this.updateselect = function(updata){
-		console.log(updata);
+		// console.log(updata);
 		if(helpbox){
 			scene.remove( helpbox );
 			helpbox = null;
 		}
 		helpbox = new THREE.BoxHelper( updata.mesh, 0xff0000 );
-		console.log(updata.mesh);
+		// console.log(updata.mesh);
 		let point = {
 			x:updata.mesh.matrixWorld.elements[12],
 			y:updata.mesh.matrixWorld.elements[13],
 			z:updata.mesh.matrixWorld.elements[14]
 		};
 		settext(updata.mesh,point)
+		getdevicemsg(updata.mesh.name);
 		// moveanima.animatelist[scope.selectmodel.name+"select1"].enable = true;
 		// console.log(intersects[0].object);
 		scene.add( helpbox );
 	}
+
+	//返回设备选择
 	this.backselect = function(){
 		move2();
 		updatemenulist(scope.jdqcontrol.devicelist);
-		
+
 		scope.modelmanager.controllist[0].position.set(19,1270,-165);
 		scope.modelmanager.controllist[0].rotation.y = -Math.PI/2;
 		scope.modelmanager.controllist[0].rotation.z = -Math.PI/2;
@@ -131,9 +136,10 @@ export function Jl3ddevice(dom) {
 		scope.selectmodel = null;
 		scope.jdqcontrol.devicelist = [];
 		scope.animastats = false;
-
+		updatemsg();
 	};
 
+	//设备分解、归位动画按钮
 	this.disperdevice = function(){
 		if(scope.status == '1'){
 			if(scope.animastats == false){
@@ -167,8 +173,8 @@ export function Jl3ddevice(dom) {
 	//
 	// }
 
-	let stats = new Stats();
+	// let stats = new Stats();
-	dom.appendChild( stats.dom );
+	// dom.appendChild( stats.dom );
 
 	document.addEventListener( "mousedown", onselect, false );
 
@@ -177,6 +183,7 @@ export function Jl3ddevice(dom) {
 		camera.updateProjectionMatrix();
 		renderer.setSize(scope.dom.offsetWidth, scope.dom.offsetHeight);
 	}
+
 	this.jdqcontrol = new Jdqcontrol();
 
 	let moveanima = new Moveanimate();
@@ -196,7 +203,7 @@ export function Jl3ddevice(dom) {
 		renderer.render(scene, camera);
 		moveanima.animateupdate();
 		// scope.controls.update();
-	  stats.update();
+	  // stats.update();
 	}
 
 
@@ -324,6 +331,7 @@ export function Jl3ddevice(dom) {
 						scope.jdqcontrol.jdqdevicelist(scope.modelmanager.controllist[i]);
 						updatemenulist(scope.jdqcontrol.devicelist);
 						scope.controls.update();
+
 						scope.selectmodel = scope.modelmanager.controllist[i];
 						scope.status = '1';
 					}
@@ -343,18 +351,25 @@ export function Jl3ddevice(dom) {
 
 
 				let intersects = raycaster.intersectObjects( scope.modelmanager.controllist,true);
-
+				if(helpbox){
+					scene.remove( helpbox );
+					helpbox = null;
+				}
+				if(textplane){
+					scene.remove(textplane);
+					textplane.geometry.dispose();
+					textplane.material.dispose();
+				}
 				if(intersects[0]){
-					if(helpbox){
+
-						scene.remove( helpbox );
-						helpbox = null;
-					}
 					if(intersects[0].object.raycastoff){
 						helpbox = new THREE.BoxHelper( intersects[0].object.parent, 0xff0000 );
 						settext(intersects[0].object.parent,intersects[0].point);
+						getdevicemsg(intersects[0].object.parent.name);
 					}else{
 						helpbox = new THREE.BoxHelper( intersects[0].object, 0xff0000 );
 						settext(intersects[0].object,intersects[0].point);
+						getdevicemsg(intersects[0].object.name);
 					}
 					scene.add( helpbox );
 				}
@@ -363,10 +378,20 @@ export function Jl3ddevice(dom) {
 		}
 
 	}
+
+	function getdevicemsg(selectname){
+		// console.log(selectname);
+		for(let i=0,leni=scope.jdqcontrol.devicelist.length;i<leni;i++){
+
+			if(selectname == scope.jdqcontrol.devicelist[i].name){
+				updatemsg(scope.jdqcontrol.devicelist[i].text,scope.jdqcontrol.devicelist[i].msg);
+				i=leni;
+			}
+		}
+	}
 	function settext(intersects,point){
-		console.log(intersects);
 		if(intersects.text){
-			let textgeometry = new THREE.PlaneBufferGeometry( 600, 400, 1 );
+			let textgeometry = new THREE.PlaneBufferGeometry( 300, 200, 1 );
 			let textt = new THREE.CanvasTexture(getTextCanvas(intersects.text));
 			let textmaterial = new THREE.MeshBasicMaterial( {
 				side: THREE.DoubleSide,
@@ -381,7 +406,7 @@ export function Jl3ddevice(dom) {
 			textplane= new THREE.Mesh( textgeometry, textmaterial );
 			// textplane.name = data[i].code;
 			textplane.position.x = point.x;
-			textplane.position.y = point.y+200;
+			textplane.position.y = point.y+100;
 			textplane.position.z = point.z;
 			// console.log(textplane.position);
 			// textplane.tcode = data[i].code;
@@ -404,26 +429,26 @@ export function Jl3ddevice(dom) {
 	function getTextCanvas(text){
 	  var canvas = document.getElementById('canvastexture');
 
-	  canvas.width = 512;
+	  canvas.width = 256;
-	  canvas.height = 256;
+	  canvas.height = 128;
 
 	  var ctx = canvas.getContext('2d');
 
 	  //var bg = canvas.createPattern(img, "no-repeat");
 	  //ctx.fillStyle = bg;
-	  ctx.fillRect(0, 0,512,256);
+	  ctx.fillRect(0, 0,256,128);
-	  ctx.font = "40px Verdana";
+	  ctx.font = "20px Verdana";
 	  ctx.fillStyle = '#FFFFFF';
 	  ctx.textAlign = 'center';
 	  ctx.textBaseline = 'middle';
-	  ctx.clearRect(0,0,512,256);
+	  ctx.clearRect(0,0,256,128);
 	  //console.log(text.groupNumber);
-	  ctx.drawImage(beauty,0,0,512, 256);
+	  ctx.drawImage(beauty,0,0,256, 128);
-	  ctx.fillText("设备部件:"+text, 200,64);
+	  ctx.fillText("设备部件:"+text, 90,30);
 	  // ctx.fillText("车组人员:XXX", 40,20);
 	  // ctx.fillText("速度:XXX.XXX", 40,30);
 	  //ctx.fillText(text.trainModel.name, width/2,height*3/4);
-	  let data = ctx.getImageData(0, 0,512, 256);
+	  let data = ctx.getImageData(0, 0,256, 128);
 	  return data;
 	}
 

src/views/jlmap3d/devicetrain/component/devicetrainmenu.vue

@@ -7,8 +7,8 @@
             <el-scrollbar ref="devicescrol" style="height:100%;margin-bottom:1px">
                 <el-form ref="form"   label-width="120px" size="mini">
                   <div class="displaylist" v-for="(part,index) in devicelist"  @click="deviceselect(index,part)" v-show="true" >
-                      <div>
+                      <div >
-                        <p >设备名称:{{part.text}}</p>
+                        <p style="border:1px solid #000;">设备名称:{{part.text}}</p>
                       </div>
                   </div>
                 </el-form>
@@ -55,7 +55,6 @@ export default {
     },
 
     'devicelist.length':function(newVal){
-      console.log(newVal);
       this.$refs.devicescrol.update()
     }
 
@@ -63,8 +62,6 @@ export default {
   methods: {
 
     deviceselect(index,train){
-      console.log(index);
-      console.log(train);
       this.$emit('sdevice',train);
     },
     filterNode(value, data) {
@@ -101,6 +98,7 @@ export default {
     // background-size: 100%;
     // border-radius:5px;
   }
+
   .asset-list{
     position:absolute;
     left:0;
@@ -130,7 +128,7 @@ export default {
     width:80%;
     height:20px;
     margin:0px 0px 20px 0px;
-    border-top:1px solid #000;
+
   }
   .modelpic{
     left:0;

src/views/jlmap3d/devicetrain/jl3ddevicetrain.vue

@@ -20,6 +20,14 @@
 		<div id="testjlmap3d" class="jlmap3ddraw">
 			<canvas id="canvastexture" />
 		</div>
+		<div class="showmsg" v-show="msgshow">
+			<div class="msgtop">
+				{{devicename}}
+			</div>
+			<div class="msgdown">
+				{{devicemsg}}
+			</div>
+		</div>
 	</div>
 
 </template>
@@ -36,6 +44,9 @@
 			return {
 				jl3d: null,
 				devicelist:[],
+				msgshow:false,
+				devicename:"",
+				devicemsg:"",
 				devicestats:"设备分解",
 
 			}
@@ -69,7 +80,6 @@
 						if(newVal == true){
 							this.devicestats = "设备归位";
 						}
-						console.log(newVal);
 					}
 				}
 			},
@@ -81,6 +91,7 @@
 		},
 		mounted() {
 			window.updatemenulist = this.updatemenulist;
+			window.updatemsg = this.updatemsg;
       this.init();
 		},
 		beforeDestroy() {
@@ -103,9 +114,19 @@
 				this.jl3d.disperdevice();
 			},
 			updatemenulist(devicelist) {
-				console.log(devicelist);
 				this.devicelist = devicelist;
 			},
+			updatemsg(name,text) {
+				// console.log(name);
+				// console.log(text);
+				if(name){
+					this.msgshow = true;
+					this.devicename = name;
+					this.devicemsg = text;
+				}else{
+					this.msgshow = false;
+				}
+			},
 			back(changedata) {
 				  window.close();
 			},
@@ -127,7 +148,41 @@
 		height: 100%;
 		/* z-index: 1500; */
 	}
+	.showmsg{
+    position: absolute;
+    float:left;
+    left:0;
+    bottom:0;
+    width: 20%;
+    height: 40%;
+		z-index: 10;
+		background-image:url("/static/texture/showmsg.png");
+    background-repeat: no-repeat;
+    background-size: 100%;
 
+  }
+
+	.msgtop{
+		text-align: center;
+		width: 90%;
+		height:10%;
+		position: absolute;
+		top:10%;
+		font-size:30px;
+	  color:#FFFFFF;
+	}
+
+	.msgdown{
+		position: absolute;
+		top:20%;
+		left:5%;
+		width: 90%;
+		height:80%;
+		font-size:20px;
+	  color:#FFFFFF;
+		word-wrap:break-word;
+		letter-spacing:2px;
+	}
 	#canvastexture {
 		position: absolute;
 		float: left;