增加继电器部件显示
This commit is contained in:
sunzhenyu
parent
4ed2b9b371
commit
e8cc316e82
@ -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 = "节点";
|
||||
selectmodel.children[i].text = "节点";
|
||||
part.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 = "绝缘轴";
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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();
|
||||
dom.appendChild( stats.dom );
|
||||
// let stats = new Stats();
|
||||
// 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.height = 256;
|
||||
canvas.width = 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.font = "40px Verdana";
|
||||
ctx.fillRect(0, 0,256,128);
|
||||
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.fillText("设备部件:"+text, 200,64);
|
||||
ctx.drawImage(beauty,0,0,256, 128);
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
<p >设备名称:{{part.text}}</p>
|
||||
<div >
|
||||
<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;
|
||||
|
||||
@ -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;
|
||||
|
||||
BIN
static/texture/showmsg.png
Normal file
BIN
static/texture/showmsg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Loading…
Reference in New Issue
Block a user