Merge branch 'test' of https://git.code.tencent.com/lian-cbtc/jl-client into test
This commit is contained in:
fan
commit
847efa84ce
@ -38,14 +38,14 @@ export function Textconfig(){
|
||||
selectmodel.children[i].text = "电动机";
|
||||
}
|
||||
if(selectmodel.children[i].name == "DINGK"){
|
||||
part.text = "顶盖";
|
||||
part.msg = "保护设备中部件。";
|
||||
selectmodel.children[i].text = "顶盖";
|
||||
part.text = "机盖";
|
||||
part.msg = "用于防护机内零部件。";
|
||||
selectmodel.children[i].text = "机盖";
|
||||
}
|
||||
if(selectmodel.children[i].name == "SZ"){
|
||||
part.text = "锁子";
|
||||
part.msg = "锁子";
|
||||
selectmodel.children[i].text = "锁子";
|
||||
part.text = "锁";
|
||||
part.msg = "用于将机盖锁在底壳上，并用专用钥匙才能打开。最早锁是从底壳内紧固，机外无法拆卸，但由于加工质量及其他原因导致无法开盖，故目前已改为从底壳外紧固。";
|
||||
selectmodel.children[i].text = "锁";
|
||||
}
|
||||
if(selectmodel.children[i].name == "YWJCQ"){
|
||||
part.text = "移位接触器";
|
||||
@ -59,7 +59,7 @@ export function Textconfig(){
|
||||
}
|
||||
if(selectmodel.children[i].name == "SDP"){
|
||||
part.text = "速动片";
|
||||
part.msg = "速动片";
|
||||
part.msg = "速动片的作用是检查主轴解锁、转换和锁闭三个动作过程的完成，并最后使自动开闭器迅速切断电机动作电路，接通表示电路。";
|
||||
selectmodel.children[i].text = "速动片";
|
||||
}
|
||||
if(selectmodel.children[i].name == "JSQ"){
|
||||
@ -89,7 +89,7 @@ export function Textconfig(){
|
||||
}
|
||||
if(selectmodel.children[i].name == "DJZ"){
|
||||
part.text = "电机罩";
|
||||
part.msg = "电机罩";
|
||||
part.msg = "保护电机。";
|
||||
selectmodel.children[i].text = "电机罩";
|
||||
}
|
||||
if(selectmodel.children[i].name == "DK"){
|
||||
@ -99,12 +99,12 @@ export function Textconfig(){
|
||||
}
|
||||
if(selectmodel.children[i].name =="QDP"){
|
||||
part.text = "启动片";
|
||||
part.msg = "启动片";
|
||||
part.msg = "1.起输出轴与主轴间的十字接头作用，使主轴随输出轴同时旋转。2.控制自动开闭器动作，在道岔转换前切断原表示电路，并为电机反转电路准备条件。";
|
||||
selectmodel.children[i].text = "启动片";
|
||||
}
|
||||
if(selectmodel.children[i].name =="ESWCJJ"){
|
||||
part.text = "二十位插接件";
|
||||
part.msg = "二十位插接件";
|
||||
part.msg = "用于机内外电缆连接，方便更换转辙机。";
|
||||
selectmodel.children[i].text = "二十位插接件";
|
||||
}
|
||||
// if(part.text == null){
|
||||
|
||||
@ -5,6 +5,8 @@ import { OrbitControls } from '@/jlmap3d/main/control/OrbitControls';
|
||||
|
||||
import { ModelManager } from '@/jlmap3d/jl3ddevice/loader.js';
|
||||
import { Signallightload } from '@/jlmap3d/jl3ddevice/component/signallight.js';
|
||||
import { Moveanimate } from '@/jlmap3d/jl3ddevice/component/moveanimate.js';
|
||||
import { Textconfig } from '@/jlmap3d/jl3ddevice/component/textconfig.js';
|
||||
|
||||
import StompClient from '@/utils/sock';
|
||||
|
||||
@ -19,6 +21,21 @@ export function Jl3ddevice(dom,group,token) {
|
||||
Signallightload(this.signallights);
|
||||
this.mixers = [];
|
||||
this.showmodel = null;
|
||||
|
||||
//新数据交互
|
||||
let helpbox,textplane;
|
||||
let daochamodel;
|
||||
//点击事件状态
|
||||
this.raycasterstatus = false;
|
||||
//动画状态
|
||||
this.animastats = false;
|
||||
//当前选中模型
|
||||
this.nowobject = null;
|
||||
//当前动画播放模型
|
||||
this.animationmodel = null;
|
||||
this.devicetext = new Textconfig();
|
||||
this.windowstatus = '0';
|
||||
|
||||
//初始化webgl渲染
|
||||
this.renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
|
||||
@ -70,6 +87,10 @@ export function Jl3ddevice(dom,group,token) {
|
||||
this.controls.update();
|
||||
this.selectmodel = null;
|
||||
|
||||
let moveanima = new Moveanimate(scope);
|
||||
document.addEventListener( "mousedown", onselect, false );
|
||||
|
||||
|
||||
let teststomp = new StompClient();
|
||||
let topic = '/user/topic/simulation/assistant/'+group;
|
||||
// let topic = '/user/queue/simulation/jl3d/'+group;
|
||||
@ -83,7 +104,6 @@ export function Jl3ddevice(dom,group,token) {
|
||||
|
||||
function callback(Response) {
|
||||
let data = JSON.parse(Response.body);
|
||||
console.log(data);
|
||||
if(scope.nowcode != data.body.code){
|
||||
scope.nowcode = data.body.code;
|
||||
scope.selectmodel(data);
|
||||
@ -97,11 +117,18 @@ export function Jl3ddevice(dom,group,token) {
|
||||
scope.camera.updateProjectionMatrix();
|
||||
scope.renderer.setSize(scope.dom.offsetWidth, scope.dom.offsetHeight);
|
||||
}
|
||||
|
||||
this.domresize = function(){
|
||||
scope.camera.aspect = scope.dom.offsetWidth / scope.dom.offsetHeight;
|
||||
scope.camera.updateProjectionMatrix();
|
||||
scope.renderer.setSize(scope.dom.offsetWidth, scope.dom.offsetHeight);
|
||||
}
|
||||
this.anime = null;
|
||||
|
||||
this.modelmanager = new ModelManager();
|
||||
this.modelmanager.loadpromise(Staticmodel, scope.mixers).then(function (data) {
|
||||
moveanima.initlistnew(scope.modelmanager.switchmodel.mesh);
|
||||
daochamodel = scope.modelmanager.switchmodel.mesh.getObjectByName("DAOCHA");
|
||||
|
||||
animate();
|
||||
})
|
||||
|
||||
@ -113,6 +140,7 @@ export function Jl3ddevice(dom,group,token) {
|
||||
scope.controls.update();
|
||||
//scope.camera.lookAt(plane);
|
||||
//
|
||||
moveanima.animateupdate();
|
||||
let delta = clock.getDelta();
|
||||
if (scope.mixers) {
|
||||
for (let i = 0; i < scope.mixers.length; i++) {
|
||||
@ -139,7 +167,17 @@ export function Jl3ddevice(dom,group,token) {
|
||||
scope.showmodel = scope.modelmanager.switchmodel.mesh;
|
||||
scope.scene.add(scope.showmodel);
|
||||
|
||||
scope.devicetext.initdevicetext(scope.modelmanager.switchmodel.mesh);
|
||||
scope.nowobject = scope.modelmanager.switchmodel.mesh;
|
||||
updatemenulist(scope.devicetext.devicelist);
|
||||
scope.raycasterstatus = true;
|
||||
|
||||
}else{
|
||||
scope.raycasterstatus = false;
|
||||
scope.nowobject = "";
|
||||
updatemenulist();
|
||||
}
|
||||
|
||||
if (data.body._type == "Signal") {
|
||||
scope.modelmanager.signalmodel.code = data.body.code;
|
||||
|
||||
@ -155,15 +193,25 @@ export function Jl3ddevice(dom,group,token) {
|
||||
scope.showmodel = scope.modelmanager.standmodel.mesh;
|
||||
scope.scene.add(scope.showmodel);
|
||||
}
|
||||
scope.showmodel.code = data.body.code;
|
||||
|
||||
if(scope.showmodel){
|
||||
scope.resetmodel();
|
||||
scope.showmodel.code = data.code;
|
||||
initstatus(data);
|
||||
}
|
||||
|
||||
}
|
||||
} else {
|
||||
if (data.body._type == "Switch") {
|
||||
scope.modelmanager.switchmodel.locateType = data.body.locateType;
|
||||
scope.modelmanager.switchmodel.code = data.body.code;
|
||||
scope.showmodel = scope.modelmanager.switchmodel.mesh;
|
||||
scope.scene.add(scope.showmodel);
|
||||
|
||||
scope.devicetext.initdevicetext(scope.modelmanager.switchmodel.mesh);
|
||||
scope.nowobject = scope.modelmanager.switchmodel.mesh;
|
||||
updatemenulist(scope.devicetext.devicelist);
|
||||
scope.raycasterstatus = true;
|
||||
if (data.body.locateType == "01") {
|
||||
scope.modelmanager.switchmodel.locateType = "01";
|
||||
scope.modelmanager.switchmodel.action.reset();
|
||||
@ -180,6 +228,10 @@ export function Jl3ddevice(dom,group,token) {
|
||||
|
||||
}
|
||||
|
||||
}else{
|
||||
scope.raycasterstatus = false;
|
||||
scope.nowobject = "";
|
||||
updatemenulist();
|
||||
}
|
||||
if (data.body._type == "Signal") {
|
||||
scope.modelmanager.signalmodel.code = data.body.code;
|
||||
@ -442,4 +494,235 @@ export function Jl3ddevice(dom,group,token) {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//设备分解、归位动画按钮
|
||||
this.disperdevice1 = function(){
|
||||
if(scope.nowobject.animacode){
|
||||
if(moveanima.status == true){
|
||||
if(scope.animastats == false){
|
||||
scope.animastats = true;
|
||||
moveanima.setplaylist(moveanima.animatelist[scope.nowobject.animacode+"on"],true)
|
||||
} else if(scope.animastats == true){
|
||||
scope.animastats = false;
|
||||
moveanima.setplaylist(moveanima.animatelist[scope.nowobject.animacode+"off"],true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
this.disperdevice2 = function(){
|
||||
if(scope.nowobject.animacode){
|
||||
if(moveanima.status == true){
|
||||
if(scope.animastats == false){
|
||||
scope.animastats = true;
|
||||
moveanima.setplaylist(moveanima.animatelist[scope.nowobject.animacode+"chaijie"],true);
|
||||
} else if(scope.animastats == true){
|
||||
scope.animastats = false;
|
||||
moveanima.setplaylist(moveanima.animatelist[scope.nowobject.animacode+"fuwei"],true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
this.resetmodel = function(){
|
||||
if(scope.nowobject.animacode){
|
||||
scope.animastats = false;
|
||||
moveanima.setplaylist(moveanima.animatelist[scope.nowobject.animacode+"fuwei"],true);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
this.animationmsgshowon = function(nowobject){
|
||||
scope.animationmodel = nowobject;
|
||||
if(helpbox){
|
||||
scope.animationmodel.helpbox = null;
|
||||
scope.scene.remove( helpbox );
|
||||
helpbox = undefined;
|
||||
}
|
||||
|
||||
settext(scope.animationmodel,scope.animationmodel.position);
|
||||
// console.log(scope.animationmodel);
|
||||
helpbox = new THREE.BoxHelper( scope.animationmodel, 0xff0000 );
|
||||
moveanima.updatehelpbox(helpbox,textplane);
|
||||
// settext(intersects[0].object,intersects[0].point);
|
||||
// getdevicemsg(intersects[0].object.name);
|
||||
scope.scene.add( helpbox );
|
||||
getdevicemsg(nowobject.name);
|
||||
}
|
||||
|
||||
this.animationmsgshowoff = function(nowobject){
|
||||
if(helpbox){
|
||||
scope.animationmodel.helpbox = null;
|
||||
scope.scene.remove( helpbox );
|
||||
helpbox = undefined;
|
||||
}
|
||||
if(textplane){
|
||||
scope.scene.remove(textplane);
|
||||
textplane.geometry.dispose();
|
||||
textplane.material.dispose();
|
||||
}
|
||||
scope.animationmodel = null;
|
||||
}
|
||||
|
||||
this.updateselect = function(updata){
|
||||
// console.log(updata);
|
||||
if(helpbox){
|
||||
scope.scene.remove( helpbox );
|
||||
helpbox = null;
|
||||
}
|
||||
helpbox = new THREE.BoxHelper( updata.mesh, 0xff0000 );
|
||||
// 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);
|
||||
scope.scene.add( helpbox );
|
||||
}
|
||||
|
||||
function getdevicemsg(selectname){
|
||||
// console.log(selectname);
|
||||
for(let i=0,leni=scope.devicetext.devicelist.length;i<leni;i++){
|
||||
|
||||
if(selectname == scope.devicetext.devicelist[i].name){
|
||||
updatemsg(scope.devicetext.devicelist[i].text,scope.devicetext.devicelist[i].msg);
|
||||
i=leni;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.updatewindowstatus = function(nowwindowstatus){
|
||||
scope.windowstatus == nowwindowstatus;
|
||||
}
|
||||
|
||||
function onselect(event){
|
||||
if(event.button == '0'){
|
||||
|
||||
if(scope.raycasterstatus){
|
||||
|
||||
//定义光线
|
||||
let raycaster = new THREE.Raycaster();
|
||||
//定义平面鼠标点击坐标
|
||||
let mouse = new THREE.Vector2();
|
||||
let getBoundingClientRect = scope.dom.getBoundingClientRect()
|
||||
if(scope.windowstatus == '0'){
|
||||
mouse.x = ( (event.clientX - getBoundingClientRect .left) /scope.dom.offsetWidth) * 2-1;
|
||||
mouse.y = -( (event.clientY - getBoundingClientRect .top) / scope.dom.offsetHeight) * 2 + 1;
|
||||
}else{
|
||||
mouse.x = (event.clientX / scope.dom.offsetWidth) * 2 - 1;
|
||||
mouse.y = -(event.clientY / scope.dom.offsetHeight) * 2 + 1;
|
||||
}
|
||||
|
||||
raycaster.setFromCamera( mouse, scope.camera );
|
||||
|
||||
|
||||
let intersects = raycaster.intersectObjects( scope.modelmanager.switchmodel.mesh.children,true);
|
||||
if(helpbox){
|
||||
scope.scene.remove( helpbox );
|
||||
helpbox = null;
|
||||
}
|
||||
if(textplane){
|
||||
scope.scene.remove(textplane);
|
||||
textplane.geometry.dispose();
|
||||
textplane.material.dispose();
|
||||
}
|
||||
if(intersects[0]){
|
||||
|
||||
|
||||
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);
|
||||
|
||||
}
|
||||
|
||||
scope.scene.add( helpbox );
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function settext(intersects,point){
|
||||
if(intersects.text){
|
||||
let textgeometry = new THREE.PlaneBufferGeometry( 18, 12, 1 );
|
||||
let textt = new THREE.CanvasTexture(getTextCanvas(intersects.text));
|
||||
let textmaterial = new THREE.MeshBasicMaterial( {
|
||||
side: THREE.DoubleSide,
|
||||
map:textt ,transparent: true,
|
||||
alphaTest:0.1
|
||||
} );
|
||||
if(textplane){
|
||||
scope.scene.remove(textplane);
|
||||
textplane.geometry.dispose();
|
||||
textplane.material.dispose();
|
||||
}
|
||||
textplane= new THREE.Mesh( textgeometry, textmaterial );
|
||||
// textplane.name = data[i].code;
|
||||
textplane.position.x = point.x;
|
||||
textplane.position.y = point.y+6;
|
||||
textplane.position.z = point.z;
|
||||
// console.log(textplane.position);
|
||||
// textplane.tcode = data[i].code;
|
||||
textplane.rotation.y = -Math.PI/2;
|
||||
textplane.lookAt(scope.camera.position);
|
||||
// scope.textlist.push(textplane);
|
||||
// newmesh.children[0].add(textplane);
|
||||
|
||||
scope.scene.add(textplane);
|
||||
|
||||
textgeometry.dispose();
|
||||
textmaterial.dispose();
|
||||
textt.dispose();
|
||||
}
|
||||
}
|
||||
var beauty = new Image();
|
||||
beauty.src = "../../static/texture/guide.png";
|
||||
//canvas文字贴图方法
|
||||
//PS:待提炼 增强功能
|
||||
function getTextCanvas(text){
|
||||
var canvas = document.getElementById('canvastexture');
|
||||
|
||||
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,256,128);
|
||||
ctx.font = "20px Verdana";
|
||||
ctx.fillStyle = '#FFFFFF';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.clearRect(0,0,256,128);
|
||||
//console.log(text.groupNumber);
|
||||
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,256, 128);
|
||||
return data;
|
||||
|
||||
}
|
||||
this.hideswitch = function (nowswitchstatus){
|
||||
if(nowswitchstatus){
|
||||
scope.modelmanager.switchmodel.mesh.add(daochamodel);
|
||||
}else{
|
||||
scope.modelmanager.switchmodel.mesh.remove(daochamodel);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -66,9 +66,6 @@ function fbxpromise(asset,mixers,model){
|
||||
mixers.push(mixer);
|
||||
//model.action.play();
|
||||
}
|
||||
console.log(object);
|
||||
|
||||
|
||||
resolve(asset.deviceType);
|
||||
} );
|
||||
|
||||
|
||||
@ -28,12 +28,12 @@ export function Jdqcontrol(){
|
||||
};
|
||||
if(selectmodel.children[i].name == "dizuo"){
|
||||
part.text = "底座";
|
||||
part.msg = "";
|
||||
part.msg = "安防继电器部件。";
|
||||
selectmodel.children[i].text = "底座";
|
||||
}
|
||||
if(selectmodel.children[i].name == "cigang"){
|
||||
part.text = "磁钢";
|
||||
part.msg = "";
|
||||
part.msg = "使继电器由于线圈中电流极性不同而具有定位和范围两种稳定状态，这两种稳定状态在线圈中电流小时候，仍能继续保持。";
|
||||
selectmodel.children[i].text = "磁钢";
|
||||
}
|
||||
if(selectmodel.children[i].name == "Lxing"){
|
||||
@ -67,14 +67,14 @@ export function Jdqcontrol(){
|
||||
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 == "neibu"){
|
||||
// part.text = "内部";
|
||||
// part.msg = "";
|
||||
// selectmodel.children[i].text = "内部";
|
||||
// }
|
||||
if(selectmodel.children[i].name == "jiedian"){
|
||||
part.text = "接点";
|
||||
part.msg = "";
|
||||
part.msg = "具有开端功率娇小的接点能力。";
|
||||
selectmodel.children[i].text = "接点";
|
||||
}
|
||||
if(selectmodel.children[i].name == "yapian"){
|
||||
@ -84,7 +84,7 @@ export function Jdqcontrol(){
|
||||
}
|
||||
if(selectmodel.children[i].name == "fanghuozhao"){
|
||||
part.text = "防火罩";
|
||||
part.msg = "";
|
||||
part.msg = "保护继电器内设备运行。";
|
||||
selectmodel.children[i].text = "防火罩";
|
||||
}
|
||||
if(selectmodel.children[i].name == "dianyuanpian"){
|
||||
@ -94,7 +94,7 @@ export function Jdqcontrol(){
|
||||
}
|
||||
if(selectmodel.children[i].name == "xinpian"){
|
||||
part.text = "电路板";
|
||||
part.msg = "";
|
||||
part.msg = "故在电路中起着自动调节、安全保护、转换电路等作用。";
|
||||
selectmodel.children[i].text = "电路板";
|
||||
}
|
||||
if(selectmodel.children[i].name =="jueyuanzhou"){
|
||||
@ -104,12 +104,12 @@ export function Jdqcontrol(){
|
||||
}
|
||||
if(selectmodel.children[i].name =="cichuihuqi"){
|
||||
part.text = "磁吹弧器";
|
||||
part.msg = "磁吹弧器。";
|
||||
part.msg = "通过在接点开关相对位置处设置永久磁铁的技术手段，以永久磁铁的磁场作用力影响接点开关产生的电弧，使得电弧受磁场作用力加速拉长至消灭，从而成为一种遮断电弧的继电器。";
|
||||
selectmodel.children[i].text = "磁吹弧器";
|
||||
}
|
||||
if(selectmodel.children[i].name =="jiaqiangdongjiediandanyuan"){
|
||||
part.text = "加强接点单元";
|
||||
part.msg = "加强接点单元。";
|
||||
part.msg = "具有开端功率较大的接点能力。";
|
||||
selectmodel.children[i].text = "加强接点单元";
|
||||
}
|
||||
if(selectmodel.children[i].name =="yunmugehupian"){
|
||||
@ -124,12 +124,12 @@ export function Jdqcontrol(){
|
||||
}
|
||||
if(selectmodel.children[i].name =="jiedian1"){
|
||||
part.text = "接点";
|
||||
part.msg = "接点。";
|
||||
part.msg = "具有开端功率娇小的接点能力。";
|
||||
selectmodel.children[i].text = "接点";
|
||||
}
|
||||
if(selectmodel.children[i].name =="ccichuihuqi"){
|
||||
part.text = "磁吹弧器";
|
||||
part.msg = "磁吹弧器。";
|
||||
part.msg = "提高了继电器的可靠性。";
|
||||
selectmodel.children[i].text = "磁吹弧器";
|
||||
}
|
||||
|
||||
@ -137,9 +137,11 @@ export function Jdqcontrol(){
|
||||
// if(part.text == null){
|
||||
// console.log(selectmodel.children[i].name);
|
||||
// }
|
||||
|
||||
if(part.text){
|
||||
scope.devicelist.push(part);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -187,11 +187,9 @@ export function Moveanimate(main){
|
||||
this.initlistnew = function(modellist){
|
||||
|
||||
for(let j=0,lenj=modellist.length;j<lenj;j++){
|
||||
console.log(modellist[j].code+"==================================");
|
||||
scope.animatelist[modellist[j].code+"chaijie"] = [];
|
||||
scope.animatelist[modellist[j].code+"fuwei"] = [];
|
||||
for(let i=0,leni=modellist[j].children.length;i<leni;i++){
|
||||
console.log(modellist[j].children[i].name);
|
||||
if(modellist[j].children[i].name == "dizuo"){
|
||||
let points1 = [];
|
||||
points1.push(new THREE.Vector3(modellist[j].children[i].position.x,modellist[j].children[i].position.y,modellist[j].children[i].position.z));
|
||||
|
||||
@ -27,9 +27,6 @@ class Jlmap {
|
||||
// 线路参数
|
||||
this.lineCode = '';
|
||||
|
||||
// 大屏系统
|
||||
this.screenFlag = false;
|
||||
|
||||
// 皮肤风格
|
||||
this.style = {};
|
||||
|
||||
@ -57,7 +54,6 @@ class Jlmap {
|
||||
this.$options = new Options(deepAssign({ scaleRate: 1, offsetX: 0, offsetY: 0 }, opts.options || {}), (dataZoom) => { this.$mouseController.trigger(this.events.DataZoom, dataZoom); }); // 缩放
|
||||
this.$painter = new Painter(this);
|
||||
this.$painter.updateZrSize({width: this.$zr.getWidth(), height: this.$zr.getHeight()});
|
||||
this.$painter.updateTransform(this.$options);
|
||||
|
||||
this.optionsHandler = this.setOptions.bind(this);
|
||||
|
||||
@ -160,9 +156,12 @@ class Jlmap {
|
||||
}
|
||||
}
|
||||
|
||||
setRecover(opts) {
|
||||
this.$painter.updateTransform({ scaleRate: opts.scaleRate, offsetX: opts.offsetX, offsetY: opts.offsetY });
|
||||
}
|
||||
|
||||
setUpdateScreen(opts) {
|
||||
const num = opts.num;
|
||||
const offsetY = (opts.height - 100) / num; // 高度差
|
||||
this.setRecover({ scaleRate: 1, offsetX: 0, offsetY: 0 });
|
||||
const arr = [];
|
||||
const rectList = [];
|
||||
let rect = '';
|
||||
@ -176,21 +175,16 @@ class Jlmap {
|
||||
}
|
||||
}
|
||||
}
|
||||
const screenSplit = opts.list.length ? opts.list : Vue.prototype.$theme.loadPropConvert(store.state.map.map.skinVO.code).screenSplit;
|
||||
const splitList = JSON.parse(JSON.stringify(screenSplit));
|
||||
const num = screenSplit.length + 1;
|
||||
const offsetY = (opts.height - 100) / num; // 高度差
|
||||
const maxWidth = rect.width;
|
||||
splitList.push(maxWidth);
|
||||
const scaleWidth = Math.floor((((opts.width - 200) * num) / rect.width) * 100) / 100;
|
||||
const scaleHeight = Math.floor(((opts.height - 100) / (rect.height * num)) * 100) / 100;
|
||||
const scale = Math.min(scaleWidth, scaleHeight);
|
||||
// const scale = 0.3;
|
||||
// const spliceWidth = (rect.width + 100) / num * scale;
|
||||
// const dx = (opts.width - spliceWidth) / 2;
|
||||
|
||||
// for (let index = 0; index < num; index++) {
|
||||
// const param = { scaleRate: scale, offsetX: ((spliceWidth) * index) - dx, offsetY: -100 - (offsetY * index) };
|
||||
// arr.push(param);
|
||||
// }
|
||||
|
||||
const splitList = Vue.prototype.$theme.loadPropConvert(store.state.map.map.skinVO.code).screenSplit;
|
||||
const maxWidth = rect.width;
|
||||
splitList.push(maxWidth);
|
||||
for (let i = 0; i < splitList.length; i++) {
|
||||
let offsetX = '';
|
||||
if (i == 0) {
|
||||
@ -205,7 +199,6 @@ class Jlmap {
|
||||
rectList.push(rect);
|
||||
}
|
||||
this.$painter.updateTransform1(arr, rectList);
|
||||
this.screenFlag = true;
|
||||
}
|
||||
|
||||
setLevelVisible(list) {
|
||||
@ -545,6 +538,12 @@ class Jlmap {
|
||||
case this.events.Keyboard:
|
||||
this.$keyboardController.on(this.events.Keyboard, cb, context);
|
||||
break;
|
||||
case this.events.__Pan:
|
||||
this.$mouseController.on(this.events.__Pan, this.optionsHandler);
|
||||
break;
|
||||
case this.events.__Zoom:
|
||||
this.$mouseController.on(this.events.__Zoom, this.optionsHandler);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -202,10 +202,6 @@ class Painter {
|
||||
this.screenFlag = true;
|
||||
this.$transformHandleScreen.updateTransform(list, opts);
|
||||
}
|
||||
|
||||
// trainScreen() {
|
||||
// this.$transformHandleScreen.updateTransform(list, opts);
|
||||
// }
|
||||
/**
|
||||
* 更新zrender尺寸
|
||||
* @param {*} opt
|
||||
|
||||
@ -209,4 +209,7 @@ export default class Automactic extends Group {
|
||||
this.text.setStyle('textFill', color);
|
||||
}
|
||||
}
|
||||
screenShow() {
|
||||
this.hideMode();
|
||||
}
|
||||
}
|
||||
|
||||
@ -71,4 +71,7 @@ export default class OutFrame extends Group {
|
||||
this.isShowShape = false;
|
||||
}
|
||||
}
|
||||
screenShow() {
|
||||
this.box && this.box.hide();
|
||||
}
|
||||
}
|
||||
|
||||
@ -147,10 +147,8 @@ class EMouse extends Group {
|
||||
points.unshift(param);
|
||||
} else {
|
||||
const param = [ele.x + directx * this.triangle.getAbsSin(switchWidth), ele.y - directy * this.triangle.getAbsCos(switchWidth)];
|
||||
|
||||
points.unshift(param);
|
||||
}
|
||||
|
||||
});
|
||||
this.lineBorder = new Polygon({
|
||||
zlevel: this.device.zlevel,
|
||||
|
||||
@ -42,7 +42,7 @@ class StationStand extends Group {
|
||||
create() {
|
||||
const model = this.model;
|
||||
const style = this.style;
|
||||
const drict = 1;
|
||||
// const drict = 1;
|
||||
|
||||
/** 列车站台*/
|
||||
const standX = model.position.x - model.width / 2;
|
||||
|
||||
@ -77,4 +77,7 @@ export default class Text2 extends Group {
|
||||
this.isShowShape = false;
|
||||
}
|
||||
}
|
||||
screenShow() {
|
||||
this.text && this.text.hide();
|
||||
}
|
||||
}
|
||||
|
||||
@ -227,7 +227,7 @@ export default {
|
||||
};
|
||||
if (this.operation == OperationEvent.Switch.unlock.menu.operation) {
|
||||
operate.operation = OperationEvent.Switch.unlock.confirm2.operation;
|
||||
operate.cmdType = CMD.Switch.CMD_SWITCH_SINGLE_UNLOCK;
|
||||
operate.cmdType = CMD.Switch.CMD_SWITCH_SINGLE_UNLOCK_CHAIN;
|
||||
} else if (this.operation == OperationEvent.Switch.unblock.menu.operation) {
|
||||
operate.operation = OperationEvent.Switch.unblock.confirm2.operation;
|
||||
operate.cmdType = CMD.Switch.CMD_SWITCH_UNBLOCK;
|
||||
|
||||
@ -60,12 +60,12 @@ export default {
|
||||
{
|
||||
label: '道岔单锁',
|
||||
handler: this.lock,
|
||||
cmdType: CMD.Switch.CMD_SWITCH_SINGLE_LOCK
|
||||
cmdType: CMD.Switch.CMD_SWITCH_SINGLE_LOCK_CHAIN
|
||||
},
|
||||
{
|
||||
label: '道岔单解',
|
||||
handler: this.unlock,
|
||||
cmdType: CMD.Switch.CMD_SWITCH_SINGLE_UNLOCK
|
||||
cmdType: CMD.Switch.CMD_SWITCH_SINGLE_UNLOCK_CHAIN
|
||||
},
|
||||
{
|
||||
label: '道岔封锁',
|
||||
@ -252,7 +252,7 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
// 道岔解锁
|
||||
// 道岔单解
|
||||
unlock() {
|
||||
commitOperate(menuOperate.Switch.unlock, {switchCode:this.selected.code}, 0).then(({valid, operate})=>{
|
||||
if (valid) {
|
||||
|
||||
@ -125,14 +125,16 @@ export const menuOperate = {
|
||||
},
|
||||
Switch:{
|
||||
lock:{
|
||||
// 道岔单锁
|
||||
// 道岔单锁(联锁)
|
||||
operation: OperationEvent.Switch.lock.menu.operation,
|
||||
cmdType: CMD.Switch.CMD_SWITCH_SINGLE_LOCK
|
||||
// cmdType: CMD.Switch.CMD_SWITCH_SINGLE_LOCK
|
||||
cmdType: CMD.Switch.CMD_SWITCH_SINGLE_LOCK_CHAIN
|
||||
},
|
||||
unlock:{
|
||||
// 道岔解锁
|
||||
// 道岔解锁(联锁)
|
||||
operation: OperationEvent.Switch.unlock.menu.operation,
|
||||
cmdType: CMD.Switch.CMD_SWITCH_SINGLE_UNLOCK
|
||||
// cmdType: CMD.Switch.CMD_SWITCH_SINGLE_UNLOCK
|
||||
cmdType: CMD.Switch.CMD_SWITCH_SINGLE_UNLOCK_CHAIN
|
||||
},
|
||||
block:{
|
||||
// 道岔封锁
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
|
||||
import {createTransform, createBoundingRect} from './utils/parser';
|
||||
import Vue from 'vue';
|
||||
import store from '@/store/index_APP_TARGET';
|
||||
|
||||
class TransformHandle {
|
||||
constructor(painter) {
|
||||
@ -34,12 +32,12 @@ class TransformHandle {
|
||||
if (this.checkVisible(view, rect)) {
|
||||
view.transform = this.transform[i];
|
||||
view.decomposeTransform(); // 修改 transform 后同步位置
|
||||
const propConvert = Vue.prototype.$theme.loadPropConvert(store.state.map.map.skinVO.code);
|
||||
if (propConvert.handleScreenProps && propConvert.handleScreenProps(view)) {
|
||||
view.hide();
|
||||
return;
|
||||
if (view.screenShow) {
|
||||
view.screenShow();
|
||||
} else {
|
||||
view.show();
|
||||
}
|
||||
view.show(); return;
|
||||
return;
|
||||
}
|
||||
}
|
||||
view.dirty(); // 更新
|
||||
@ -53,12 +51,11 @@ class TransformHandle {
|
||||
|
||||
// 重新计算显示图形
|
||||
revisibleAll() {
|
||||
this.traverse(this.revisibleView, this);
|
||||
this.traverse(this.transformView, this);
|
||||
}
|
||||
|
||||
// 更新偏移量
|
||||
updateTransform(list, rectList) {
|
||||
// this.rect = { x: opts.x, y: opts.y, width: opts.width, height: opts.height };
|
||||
this.rectList = rectList;
|
||||
this.transform = [];
|
||||
list.forEach(item => {
|
||||
|
||||
@ -8,6 +8,10 @@ export default {
|
||||
CMD_SWITCH_SINGLE_LOCK: {value:'Switch_Single_Lock', label: '单锁'},
|
||||
/** 单解 */
|
||||
CMD_SWITCH_SINGLE_UNLOCK: {value:'Switch_Single_Unlock', label: '单解'},
|
||||
/** 单锁(联动) */
|
||||
CMD_SWITCH_SINGLE_LOCK_CHAIN: {value:'Switch_Single_Lock_Chain', label: '单锁(联动)'},
|
||||
/** 单解(联动) */
|
||||
CMD_SWITCH_SINGLE_UNLOCK_CHAIN: {value:'Switch_Single_Unlock_Chain', label: '单解(联动)'},
|
||||
/** 封锁 */
|
||||
CMD_SWITCH_BLOCK: {value:'Switch_Block', label: '封锁'},
|
||||
/** 解封 */
|
||||
|
||||
@ -198,6 +198,7 @@ const map = {
|
||||
mapIdList: {}, // 地图数据列表(以id为标识)
|
||||
mapViewLoadedCount: 0, // 地图视图加载完成标识
|
||||
mapDataLoadedCount: 0, // 地图数据加载完成标识
|
||||
mapDataLoadedScreenCount: 0, // 大屏加载完成
|
||||
trainDetails: null, // 地图'列车详情'显示
|
||||
deleteCount: 0, // 绘图快捷删除标识
|
||||
updateCount: 0, // 绘图快捷修改标识
|
||||
@ -366,6 +367,13 @@ const map = {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
bigScreenSplitConfig: (state) => {
|
||||
if (state.map) {
|
||||
return state.map.bigScreenSplitConfig || [];
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
indicatorLightList: (state) => {
|
||||
if (state.map) {
|
||||
return state.map.indicatorLightList || [];
|
||||
@ -623,6 +631,9 @@ const map = {
|
||||
mapDataLoadedCountIncrement: (state) => {
|
||||
state.mapDataLoadedCount += 1;
|
||||
},
|
||||
mapViewLoadedScreenCountIncrement: (state) => {
|
||||
state.mapDataLoadedScreenCount += 1;
|
||||
},
|
||||
operateTrainModel: (state, { model, type }) => {
|
||||
if (state.map && model) {
|
||||
const list = state.map.trainModelList || [];
|
||||
@ -860,6 +871,10 @@ const map = {
|
||||
commit('mapViewLoadedCountIncrement');
|
||||
},
|
||||
|
||||
mapViewScreenLoaded: ({ commit }) => {
|
||||
commit('mapViewLoadedScreenCountIncrement');
|
||||
},
|
||||
|
||||
mapDataLoaded: ({ commit }) => {
|
||||
commit('mapDataLoadedCountIncrement');
|
||||
},
|
||||
|
||||
@ -2,11 +2,11 @@ export function getBaseUrl() {
|
||||
let BASE_API;
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
// BASE_API = 'https://joylink.club/jlcloud';
|
||||
// BASE_API = 'https://test.joylink.club/jlcloud';
|
||||
BASE_API = 'https://test.joylink.club/jlcloud';
|
||||
// BASE_API = 'http://192.168.3.5:9000'; // 袁琪
|
||||
// BASE_API = 'http://192.168.3.6:9000'; // 旭强
|
||||
// BASE_API = 'http://192.168.3.41:9000'; // 张赛
|
||||
BASE_API = 'http://192.168.3.82:9000'; // 杜康
|
||||
// BASE_API = 'http://192.168.3.82:9000'; // 杜康
|
||||
// BASE_API = 'http://192.168.3.41:9000'; // 张赛
|
||||
// BASE_API = 'http://b29z135112.zicp.vip';
|
||||
// BASE_API = 'http://2925963m2a.zicp.vip'; // 杜康
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<div class="map-view">
|
||||
<div v-show="maskOpen" class="mask" :style="{'width': maskWidth}" />
|
||||
<jlmap-visual ref="jlmapVisual" />
|
||||
<div class="display-draft">
|
||||
<div v-show="disPlay" class="display-draft">
|
||||
<el-button-group>
|
||||
<el-button type="primary" @click="back">{{ $t('scriptRecord.scriptBack') }}</el-button>
|
||||
</el-button-group>
|
||||
@ -11,6 +12,7 @@
|
||||
<script>
|
||||
import JlmapVisual from '@/views/newMap/jlmapNew/index';
|
||||
import { loadNewMapDataByGroup, loadMapDataById } from '@/utils/loaddata';
|
||||
import { clearSimulation } from '@/api/simulation';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { creatSubscribe, clearSubscribe, displayTopic} from '@/utils/stomp';
|
||||
@ -32,7 +34,10 @@ export default {
|
||||
size: {
|
||||
width: document.documentElement.clientWidth - 400,
|
||||
height: document.documentElement.clientHeight - 80
|
||||
}
|
||||
},
|
||||
maskOpen: false,
|
||||
maskWidth: '100%',
|
||||
disPlay: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -42,6 +47,9 @@ export default {
|
||||
height() {
|
||||
return this.$store.state.app.height - 50 - 30;
|
||||
},
|
||||
...mapGetters('map', [
|
||||
'bigScreenSplitConfig'
|
||||
]),
|
||||
...mapGetters('config', [
|
||||
'canvasId'
|
||||
])
|
||||
@ -63,7 +71,9 @@ export default {
|
||||
this.$jlmap.off('zoom');
|
||||
this.$jlmap.off('pan');
|
||||
this.handleUpdateScreen();
|
||||
if (this.$route.query.group) {
|
||||
this.subscribe();
|
||||
}
|
||||
},
|
||||
'$store.state.socket.equipmentStatus': function (val) {
|
||||
if (val.length && this.$route.query.group) {
|
||||
@ -77,47 +87,42 @@ export default {
|
||||
async mounted() {
|
||||
await this.setWindowSize();
|
||||
await this.initLoadData();
|
||||
this.disPlay = true;
|
||||
if (this.$route.path.includes('design/bigScreen')) {
|
||||
this.disPlay = false;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async initLoadData() { // 加载地图数据
|
||||
if (this.$route.query.group) {
|
||||
await loadNewMapDataByGroup(this.$route.query.group);
|
||||
} else {
|
||||
await loadMapDataById(this.$route.params.mapId);
|
||||
this.loadMapDataById(this.$route.params.mapId);
|
||||
}
|
||||
},
|
||||
// 通过id加载地图数据
|
||||
async loadMapDataById(mapId) {
|
||||
try {
|
||||
await this.$store.dispatch('training/changeMode', { mode: null });
|
||||
loadMapDataById(mapId).then(()=>{
|
||||
this.$store.dispatch('training/over');
|
||||
this.$store.dispatch('training/setMapDefaultState');
|
||||
this.$store.dispatch('map/clearJlmapTrainView');
|
||||
});
|
||||
} catch (error) {
|
||||
this.$messageBox(`获取地图数据失败: ${error.message}`);
|
||||
this.endViewLoading();
|
||||
}
|
||||
},
|
||||
async statusMessage(list) {
|
||||
await this.$store.dispatch('training/updateMapState', list);
|
||||
await this.$store.dispatch('socket/setEquipmentStatus');
|
||||
},
|
||||
// 通过id加载地图数据
|
||||
async loadMapDataById(mapId) {
|
||||
// try {
|
||||
// await this.$store.dispatch('training/changeMode', { mode: null });
|
||||
// loadMapDataById(mapId).then(()=>{
|
||||
// this.$store.dispatch('training/over');
|
||||
// this.$store.dispatch('training/setMapDefaultState');
|
||||
// this.$store.dispatch('map/clearJlmapTrainView');
|
||||
// });
|
||||
// } catch (error) {
|
||||
// this.$messageBox(`获取地图数据失败: ${error.message}`);
|
||||
// this.endViewLoading();
|
||||
// }
|
||||
},
|
||||
// 结束加载状态
|
||||
endViewLoading(isSuccess) {
|
||||
if (!isSuccess) {
|
||||
this.$store.dispatch('map/mapClear');
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
EventBus.$emit('viewLoading', false);
|
||||
});
|
||||
},
|
||||
setWindowSize() {
|
||||
this.$nextTick(() => {
|
||||
if (this.widthLeft) {
|
||||
const width = this.$store.state.app.width - (this.widthLeft || 450) - 2;
|
||||
this.maskWidth = `calc(100% - ${this.widthLeft || 450}px)`;
|
||||
const height = this.height;
|
||||
this.$store.dispatch('config/resize', { width, height });
|
||||
} else {
|
||||
@ -128,24 +133,35 @@ export default {
|
||||
});
|
||||
},
|
||||
handleUpdateScreen() {
|
||||
this.maskOpen = false;
|
||||
if (this.bigScreenSplitConfig.length) {
|
||||
if (this.widthLeft) {
|
||||
const size = {
|
||||
width: this.$store.state.app.width - (this.widthLeft || 450) - 2,
|
||||
height: this.height,
|
||||
num: this.$theme.loadPropConvert(this.$store.state.map.map.skinVO.code).screenLine
|
||||
list: this.bigScreenSplitConfig.map(ele => ele.position)
|
||||
};
|
||||
this.$jlmap.setUpdateScreen(size);
|
||||
} else {
|
||||
|
||||
const size = {
|
||||
width: this.$store.state.app.width - 2,
|
||||
height: this.$store.state.app.height,
|
||||
num: this.$theme.loadPropConvert(this.$store.state.map.map.skinVO.code).screenLine
|
||||
list: this.bigScreenSplitConfig.map(ele => ele.position)
|
||||
};
|
||||
this.$jlmap.setUpdateScreen(size);
|
||||
}
|
||||
this.$refs.jlmapVisual.handleStateLoaded();
|
||||
} else {
|
||||
this.maskOpen = true;
|
||||
this.$messageBox('该线路没有大屏切割位置信息, 请前往地图绘制编辑');
|
||||
}
|
||||
},
|
||||
back() {
|
||||
async back() {
|
||||
if (this.$route.query.group) {
|
||||
await clearSimulation(this.$route.query.group);
|
||||
this.clearSubscribe();
|
||||
}
|
||||
this.$store.dispatch('training/over').then(() => {
|
||||
EventBus.$emit('runPlanStop');
|
||||
EventBus.$emit('chatSubscribeStop');
|
||||
@ -169,11 +185,22 @@ export default {
|
||||
.map-view {
|
||||
float: left;
|
||||
width: auto;
|
||||
}
|
||||
.mask{
|
||||
opacity: 1;
|
||||
background: #000;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 9;
|
||||
}
|
||||
.display-draft {
|
||||
position: absolute;
|
||||
float: right;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
z-index: 19;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
|
||||
<!-- <Jl3d-Simulation v-show="simulationShow" ref="Jl3dSimulation" :panel-show="simulationShow" @showpanel="showpanel" /> -->
|
||||
|
||||
<Jl3d-Device v-if="deviceShow" ref="Jl3dDevice" :panel-show="deviceShow" @showdevice="showdevice" />
|
||||
<Jl3d-Device v-if="deviceShow" ref="Jl3dDevice" :panel-show="deviceShow" @closedevice3dview="devicemodel" />
|
||||
<Jl3d-Drive v-show="drivingShow" ref="Jl3dDrive" :panel-show="drivingShow" @showdriving="showdriving" />
|
||||
|
||||
<scheduling v-if="isShowScheduling" ref="scheduling" :group="group" />
|
||||
|
||||
@ -33,6 +33,7 @@
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
datastatus:"",
|
||||
jl3d: null,
|
||||
psdlist:this.$store.state.map.map.psdList,
|
||||
windowstatus:false,
|
||||
@ -63,6 +64,7 @@
|
||||
},
|
||||
'$store.state.menuOperation.selectedCount': {
|
||||
handler: function (newVal, oldVal) {
|
||||
if(this.datastatus == "new"){
|
||||
if (newVal != oldVal) {
|
||||
if(this.$store.state.menuOperation.selected._type){
|
||||
if(this.$store.state.menuOperation.selected._type == "StationStand"){
|
||||
@ -77,11 +79,10 @@
|
||||
this.jl3d.selectmodel(this.$store.state.menuOperation.selected);
|
||||
}
|
||||
}
|
||||
|
||||
// this.jl3d.selectmodel(this.$store.state.socket.device);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
// '$store.state.socket.device': {
|
||||
// deep: true,
|
||||
@ -111,10 +112,14 @@
|
||||
let header = this.$route.query.token;
|
||||
// console.log(this.$store.state.menuOperation);
|
||||
// console.log(this.$store.state.map.map.linkList);
|
||||
// console.log(this.$store.state.map.map.linkList);
|
||||
if(this.$store.state.map.map.linkList){
|
||||
this.datastatus = "old";
|
||||
this.initolddata(group,header);
|
||||
}else{
|
||||
this.datastatus = "new";
|
||||
this.initnewdata(group,header);
|
||||
|
||||
}
|
||||
// if (group) {
|
||||
// this.init(group,header);
|
||||
|
||||
161
src/views/newMap/jlmapNew/screen.vue
Normal file
161
src/views/newMap/jlmapNew/screen.vue
Normal file
@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<div>
|
||||
<jlmap-canvas @onOffset="onDataZoom" @onSelect="onSelected" @onMenu="onContextMenu" @mapViewLoaded="mapViewLoaded" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JlmapCanvas from './cnavas';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { TrainingMode } from '@/scripts/ConstDic';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
|
||||
export default {
|
||||
name: 'JlmapVisual',
|
||||
components: {
|
||||
JlmapCanvas
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
dataZoom: {
|
||||
offsetX: '0',
|
||||
offsetY: '0',
|
||||
scaleRate: '1'
|
||||
},
|
||||
showMode: '03'
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('training', [
|
||||
'mode',
|
||||
'offsetStationCode'
|
||||
]),
|
||||
...mapGetters('config', [
|
||||
'canvasId'
|
||||
]),
|
||||
width() {
|
||||
return this.$store.state.app.width;
|
||||
},
|
||||
height() {
|
||||
return this.$store.state.app.height - 55;
|
||||
},
|
||||
show() {
|
||||
if (this.mode == TrainingMode.EDIT || this.mode == TrainingMode.MAP_EDIT) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
isScreen() {
|
||||
return this.$route.path.includes('displayBigScreen') || this.$route.path.includes('bigScreen');
|
||||
},
|
||||
maskOpen() {
|
||||
return this.$store.state.config.maskOpen;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
created() {
|
||||
EventBus.$on('viewProgressAt', (percentage) => {
|
||||
this.mapViewProgressAt(percentage);
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
// this.initLoadPage();
|
||||
},
|
||||
beforeDestroy() {
|
||||
EventBus.$off('viewProgressAt');
|
||||
this.$store.dispatch('map/mapClear');
|
||||
if (this.$jlmap) {
|
||||
this.$jlmap.dispose();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onDataZoom() {
|
||||
|
||||
},
|
||||
onSelected() {
|
||||
|
||||
},
|
||||
onContextMenu() {
|
||||
|
||||
},
|
||||
mapViewLoaded() {
|
||||
|
||||
},
|
||||
// 重置jlmap宽高
|
||||
resetWidth(opt) {
|
||||
console.log(opt, '-----');
|
||||
this.$jlmap && this.$jlmap.resize({ width: opt.width, height: opt.height });
|
||||
// this.$nextTick(() => {
|
||||
// this.$jlmap && this.$jlmap.resize({ width: this.width, height: this.height });
|
||||
|
||||
// this.$store.dispatch('training/updateOffsetStationCode', { offsetStationCode: this.offsetStationCode });
|
||||
|
||||
// setTimeout(() => {
|
||||
// this.$store.dispatch('config/resetCanvasOffset');
|
||||
// this.$store.dispatch('training/emitTipFresh');
|
||||
// }, 100);
|
||||
// });
|
||||
},
|
||||
// 设置地图加载进度
|
||||
mapViewProgressAt(percentage) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.progressBar.progressAt(percentage);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.mask{
|
||||
opacity: 0;
|
||||
background: #000;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 9;
|
||||
}
|
||||
.jlmap-canvas {
|
||||
position: relative;
|
||||
-moz-user-select: none;
|
||||
-o-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.title{
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
line-height: 32px;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.zoom-view {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
padding-top: 5px;
|
||||
height: 42px;
|
||||
border-bottom: 1px #f3f3f3 solid;
|
||||
border-right: 1px #f3f3f3 solid;
|
||||
}
|
||||
|
||||
/deep/ {
|
||||
.el-form.el-form--inline {
|
||||
height: 28px !important;
|
||||
line-height: 28px !important
|
||||
}
|
||||
|
||||
.el-loading-mask {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -107,7 +107,7 @@ export default {
|
||||
},
|
||||
methods:{
|
||||
async initPage() {
|
||||
await this.subscribe();
|
||||
this.subscribe();
|
||||
this.getSimulationMembers();
|
||||
getSimulationConversationListNew(this.$route.query.group).then(resp=>{
|
||||
if (resp.data) {
|
||||
@ -146,15 +146,18 @@ export default {
|
||||
data = data.replace(rolename, element.label);
|
||||
}
|
||||
});
|
||||
coversitionName = member.name ? data + '-' + member.name : data;
|
||||
const deviceName = member.deviceName ? '-' + member.deviceName : '';
|
||||
const memberName = member.name ? '-' + member.name : '';
|
||||
coversitionName = data + deviceName + memberName;
|
||||
}
|
||||
});
|
||||
return coversitionName;
|
||||
// conversition.name ? coversitionName + '-' + conversition.name : coversitionName;
|
||||
}
|
||||
},
|
||||
handleMember(member) {
|
||||
return member.name ? member.role + '-' + member.name : member.role;
|
||||
const deviceName = member.deviceName ? '-' + member.deviceName : '';
|
||||
const memberName = member.name ? '-' + member.name : '';
|
||||
return member.role + deviceName + memberName;
|
||||
},
|
||||
// 语音录制开始
|
||||
startRecording() {
|
||||
@ -305,15 +308,17 @@ export default {
|
||||
if (index < 0) {
|
||||
this.coversitionList.push(data);
|
||||
}
|
||||
const headtTitle = this.handleMemberName(data);
|
||||
this.currentCoversition = {id:data.id, group:data.group};
|
||||
this.headerTitle = data.name;
|
||||
this.headerTitle = headtTitle;
|
||||
this.showMembers = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
changeCoversition(coversition) {
|
||||
this.headerTitle = coversition.name;
|
||||
const headtTitle = this.handleMemberName(coversition);
|
||||
this.headerTitle = headtTitle;
|
||||
this.currentCoversition = {id:coversition.id, group:coversition.group};
|
||||
// this.$refs.chatContent.reloadData(this.currentCoversition);
|
||||
}
|
||||
|
||||
@ -180,6 +180,7 @@ export default {
|
||||
this.group = this.$route.query.group;
|
||||
this.mapId = this.$route.query.mapId;
|
||||
this.lineCode = this.$route.query.lineCode;
|
||||
this.drawWay = this.$route.query.drawWay;
|
||||
Message.closeAll();
|
||||
},
|
||||
async mounted() {
|
||||
@ -199,10 +200,14 @@ export default {
|
||||
this.mouseNum = 1;
|
||||
},
|
||||
handleRoomInfo(data) {
|
||||
// debugger;
|
||||
if (data.state == '03') { // 退出房间
|
||||
this.$router.go(-1);
|
||||
} else if (data.state == '01') { // 进入准备中
|
||||
const query = { group: this.group };
|
||||
const query = { group: this.group, lineCode:this.lineCode };
|
||||
if (this.drawWay) {
|
||||
query.drawWay = this.drawWay;
|
||||
}
|
||||
this.$router.replace({ path: `/trainroom`, query: query });
|
||||
}
|
||||
this.$store.dispatch('socket/setJointRoomInfo'); // 清空房间信息
|
||||
|
||||
@ -1,63 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<chat-box :group="group" />
|
||||
<!-- <div v-show="!minimize" class="reminder-drag">
|
||||
<div v-if="userRole != '05' && userRole != ''">
|
||||
<div class="tabs-roles">
|
||||
<div
|
||||
class="roles roles-first"
|
||||
:class="activeName == 'first' ? 'roles-active':''"
|
||||
@click="clickRoles('first')"
|
||||
>角色
|
||||
</div>
|
||||
<div
|
||||
class="roles"
|
||||
:class="activeName == 'second' ? 'roles-active':''"
|
||||
@click="clickRoles('second')"
|
||||
>所有人
|
||||
</div>
|
||||
<div class="minimality" @click="handleMinimality('min')">
|
||||
<i class="el-icon-remove" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabs-content">
|
||||
<div v-show="activeName == 'first'">
|
||||
<chart-view
|
||||
ref="chatView"
|
||||
:group="group"
|
||||
:station-list="stationLists"
|
||||
@showChatSpeak="showChatSpeak"
|
||||
@showChat="showChat"
|
||||
@showChatNone="showChatNone"
|
||||
/>
|
||||
</div>
|
||||
<div style="flex-grow: 1">
|
||||
<chart-window
|
||||
ref="chat"
|
||||
:group="group"
|
||||
:chat-show="chatShow"
|
||||
:speaking="isSpeaking"
|
||||
:is-show-auto="isShowAuto"
|
||||
@handleChatShow="handleChatShow"
|
||||
@handleChatList="handleChatList"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-tabs v-model="activeName2" type="card">
|
||||
<el-tab-pane label="所有人" name="second">
|
||||
<chart-window :speaking="isSpeaking" :group="group" :is-show-auto="true" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <div v-show="minimize" class="reminder-drag minimize-box">
|
||||
<div class="chat-title">聊天窗口</div>
|
||||
<div class="minimality" @click="handleMinimality('max')">
|
||||
<i class="el-icon-circle-plus" />
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="display-draft" :class="{'display-type-hb': $route.query.lineCode == '07' && $store.state.training.prdType=='01'}">
|
||||
<el-button-group>
|
||||
<el-button v-if="isProject && !dataError " type="primary" @click="setRelDevice">{{ $t('joinTraining.connectRealDevices') }}</el-button>
|
||||
@ -124,23 +67,11 @@ export default {
|
||||
return {
|
||||
isDisable: false,
|
||||
backLoading:false,
|
||||
timeNow: 0,
|
||||
remainingTime: 0,
|
||||
recordStep: 'BGSetting',
|
||||
training: {
|
||||
id: '',
|
||||
name: '',
|
||||
remarks: ''
|
||||
},
|
||||
chatShow: true,
|
||||
isShowAuto: false,
|
||||
offset: 10,
|
||||
userId: '',
|
||||
activeName: 'first',
|
||||
activeName2: 'second',
|
||||
stationList: [],
|
||||
stationLists: [],
|
||||
minimize: true
|
||||
stationLists: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -171,6 +102,7 @@ export default {
|
||||
}
|
||||
},
|
||||
'$store.state.socket.roleList': function (val) {
|
||||
debugger;
|
||||
if (val && val.length) {
|
||||
this.$nextTick(() => {
|
||||
this.addrolesList(val);
|
||||
@ -208,63 +140,6 @@ export default {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
// 切换角色tab
|
||||
clickRoles(active) {
|
||||
if (active == 'first') {
|
||||
this.chatShow = true;
|
||||
this.isShowAuto = false;
|
||||
this.$refs.chatView.select(); // 清空选中
|
||||
this.$refs.chat.clearPlay('', ''); // 清空自动播放 会话id
|
||||
|
||||
} else {
|
||||
this.chatShow = false;
|
||||
this.isShowAuto = true;
|
||||
this.$refs.chat.getChathistory('', ''); // 获取所有人列表
|
||||
}
|
||||
this.activeName = active;
|
||||
},
|
||||
|
||||
// handleChatShow(data) {
|
||||
// if (!this.minimize) { // 最大化状态
|
||||
// if (this.activeName == 'first') {
|
||||
// this.$refs.chatView.select(data.id);
|
||||
// this.chatShow = false;
|
||||
// this.isShowAuto = false;
|
||||
// this.$refs.chat.handleTextList(data.conversationId);
|
||||
// } else {
|
||||
// this.activeName = 'first';
|
||||
// this.handleChatShow(data);
|
||||
// }
|
||||
// } else { // 最小化状态
|
||||
// this.minimize = false;
|
||||
// this.handleChatShow(data);
|
||||
// }
|
||||
// },
|
||||
// 切到未读消息并说话
|
||||
// showChatSpeak(data) {
|
||||
// this.chatShow = false;
|
||||
// this.isShowAuto = false;
|
||||
// this.$refs.chat.handleTextList(data.conversationId);
|
||||
// },
|
||||
// 获取历史纪录list
|
||||
showChat(obj) {
|
||||
this.chatShow = false;
|
||||
this.$refs.chat.getChathistory(obj.code, obj.id);
|
||||
},
|
||||
handleChatList(data) {
|
||||
this.$refs.chatView.hintInfo(data);
|
||||
},
|
||||
// 设置不显示
|
||||
showChatNone() {
|
||||
this.chatShow = true;
|
||||
},
|
||||
messageInfo(message, type) {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: message,
|
||||
type: type
|
||||
});
|
||||
},
|
||||
setPosition() {
|
||||
this.$nextTick(() => {
|
||||
let offset = 10;
|
||||
@ -336,14 +211,6 @@ export default {
|
||||
this.$refs.chatView.getUserRole();
|
||||
}
|
||||
},
|
||||
handleClick(tab, event) {
|
||||
if (this.activeName == 'second') {
|
||||
this.$refs.chat.getChathistory();
|
||||
}
|
||||
},
|
||||
initPlannedDriving(isDisable) {
|
||||
this.isDisable = isDisable;
|
||||
},
|
||||
selectBeginTime() {
|
||||
this.$refs.setTime.doShow();
|
||||
},
|
||||
@ -392,6 +259,7 @@ export default {
|
||||
});
|
||||
},
|
||||
back() {
|
||||
debugger;
|
||||
this.$store.dispatch('training/over').then(() => {
|
||||
this.backLoading = true;
|
||||
putJointTrainingSimulationUserNew(this.group).then(() => {
|
||||
|
||||
@ -603,7 +603,8 @@ export default {
|
||||
label: this.$t('map.leftStopPointOffset'),
|
||||
type: 'number',
|
||||
min: 0,
|
||||
disabled: true,
|
||||
max: this.maxLengthFact,
|
||||
// disabled: true,
|
||||
isHidden: !this.isStopPointOffset
|
||||
}, // 左向停车点偏移量
|
||||
{
|
||||
@ -611,7 +612,8 @@ export default {
|
||||
label: this.$t('map.rightStopPointOffset'),
|
||||
type: 'number',
|
||||
min: 0,
|
||||
disabled: true,
|
||||
max: this.maxLengthFact,
|
||||
// disabled: true,
|
||||
isHidden: !this.isStopPointOffset
|
||||
}, // 右向停车点偏移量
|
||||
{
|
||||
@ -651,133 +653,72 @@ export default {
|
||||
},
|
||||
rules() {
|
||||
var validateAssociatedSection = (rule, value, callback) => {
|
||||
const rightSection = value
|
||||
? this.$store.getters['map/getDeviceByCode'](value)
|
||||
: null;
|
||||
if (
|
||||
rightSection &&
|
||||
!(
|
||||
this.checkSectionPointsHasCoincide(
|
||||
rightSection.points,
|
||||
this.editModel.points
|
||||
) ||
|
||||
this.checkSectionPointsHasCoincide(
|
||||
rightSection.points,
|
||||
this.oldPoint
|
||||
)
|
||||
)
|
||||
const rightSection = value ? this.$store.getters['map/getDeviceByCode'](value) : null;
|
||||
if (rightSection && !(this.checkSectionPointsHasCoincide(rightSection.points, this.editModel.points) || this.checkSectionPointsHasCoincide(rightSection.points, this.oldPoint) )
|
||||
) {
|
||||
callback(
|
||||
new Error(
|
||||
this.$t(
|
||||
'rules.theSelectedAssociatedSectionIsNotAdjacent'
|
||||
)
|
||||
)
|
||||
);
|
||||
callback(new Error(this.$t('rules.theSelectedAssociatedSectionIsNotAdjacent')));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
var validateLeftStopPointOffset = (rule, value, callback) => {
|
||||
if (value != this.editModel.rightStopPointOffset) {
|
||||
callback();
|
||||
} else {
|
||||
callback(new Error('不能与右侧停车点一致'));
|
||||
}
|
||||
};
|
||||
var validateRightStopPointOffset = (rule, value, callback) => {
|
||||
if (value != this.editModel.leftStopPointOffset) {
|
||||
callback();
|
||||
} else {
|
||||
callback(new Error('不能与左侧停车点一致'));
|
||||
}
|
||||
};
|
||||
const rules = {
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t('rules.selectEquipment'),
|
||||
trigger: 'change'
|
||||
}
|
||||
{ required: true, message: this.$t('rules.selectEquipment'), trigger: 'change' }
|
||||
],
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t('rules.pleaseEnterSectionName'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
{ required: true, message: this.$t('rules.pleaseEnterSectionName'), trigger: 'blur' }
|
||||
],
|
||||
type: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t('rules.pleaseEnterSectionType'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
{ required: true, message: this.$t('rules.pleaseEnterSectionType'), trigger: 'blur' }
|
||||
],
|
||||
leftStopPointOffset: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t(
|
||||
'rules.pleaseEnterLeftStopPointOffset'
|
||||
),
|
||||
trigger: 'blur'
|
||||
}
|
||||
{ required: true, message: this.$t('rules.pleaseEnterLeftStopPointOffset'), trigger: 'blur' },
|
||||
{ validator: validateLeftStopPointOffset, trigger: 'blur' }
|
||||
],
|
||||
rightStopPointOffset: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t('rules.rightStopPointOffset'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
{ required: true, message: this.$t('rules.rightStopPointOffset'), trigger: 'blur' },
|
||||
{ validator: validateRightStopPointOffset, trigger: 'blur' }
|
||||
],
|
||||
'destinationCodePoint.x': [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t('rules.destinationCodePointX'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
{ required: true, message: this.$t('rules.destinationCodePointX'), trigger: 'blur' }
|
||||
],
|
||||
'destinationCodePoint.y': [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t('rules.destinationCodePointY'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
{ required: true, message: this.$t('rules.destinationCodePointY'), trigger: 'blur' }
|
||||
],
|
||||
'namePosition.x': [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t('rules.sectionNamePointX'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
{ required: true, message: this.$t('rules.sectionNamePointX'), trigger: 'blur' }
|
||||
],
|
||||
'namePosition.y': [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t('rules.sectionNamePointY'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
{ required: true, message: this.$t('rules.sectionNamePointY'), trigger: 'blur' }
|
||||
],
|
||||
logicSectionNameSort: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t('rules.logicSectionNameSort'),
|
||||
trigger: 'change'
|
||||
}
|
||||
{ required: true, message: this.$t('rules.logicSectionNameSort'), trigger: 'change' }
|
||||
],
|
||||
sepTypeLeft: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t('rules.sectionSepTypeLeft'),
|
||||
trigger: 'change'
|
||||
}
|
||||
{ required: true, message: this.$t('rules.sectionSepTypeLeft'), trigger: 'change' }
|
||||
],
|
||||
sepTypeRight: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t('rules.sectionSepTypeRight'),
|
||||
trigger: 'change'
|
||||
}
|
||||
{ required: true, message: this.$t('rules.sectionSepTypeRight'), trigger: 'change' }
|
||||
],
|
||||
relSwitchCode: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t('rules.sectionRelSwitchCode'),
|
||||
trigger: 'change'
|
||||
}
|
||||
{ required: true, message: this.$t('rules.sectionRelSwitchCode'), trigger: 'change' }
|
||||
],
|
||||
belongStation: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择所属车站',
|
||||
trigger: 'change'
|
||||
}
|
||||
{ required: true, message: '请选择所属车站', trigger: 'change' }
|
||||
],
|
||||
leftSectionCode: [
|
||||
{ validator: validateAssociatedSection, trigger: 'change' }
|
||||
@ -824,6 +765,9 @@ export default {
|
||||
}
|
||||
return list;
|
||||
},
|
||||
maxLengthFact() {
|
||||
return this.editModel.lengthFact;
|
||||
},
|
||||
|
||||
// 判断显隐 true 显示 false 隐藏
|
||||
isStationCodeDisabled() {
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
</el-table-column>
|
||||
<el-table-column label="换行位置">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.width }}</span>
|
||||
<span style="margin-left: 10px">{{ scope.row.position }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
@ -34,8 +34,8 @@
|
||||
</div>
|
||||
<div>
|
||||
<el-form ref="hostileForm" :model="addModel" label-width="135px" size="mini" style="margin-top: 15px">
|
||||
<el-form-item label="区段:" prop="section">
|
||||
<el-select v-model="addModel.section" clearable :filterable="true">
|
||||
<el-form-item label="区段:" prop="sectionCode">
|
||||
<el-select v-model="addModel.sectionCode" clearable :filterable="true">
|
||||
<el-option
|
||||
v-for="item in sectionList"
|
||||
:key="item.code"
|
||||
@ -51,9 +51,10 @@
|
||||
</el-form>
|
||||
</div>
|
||||
</el-card>
|
||||
<div style="display: table; margin-left: 90px; margin-top: 12px; margin-bottom: 10px;">
|
||||
<div style="display: table; margin-left: 90px; margin-top: 12px; margin-bottom: 20px;">
|
||||
<el-button type="primary" @click="save">保存</el-button>
|
||||
<!-- <el-button type="primary" @click="preview">预览</el-button> -->
|
||||
<el-button v-if="isPreview" type="primary" @click="preview">预览</el-button>
|
||||
<el-button v-if="!isPreview" type="primary" @click="recover">重置</el-button>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
@ -61,6 +62,7 @@
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { saveMap } from '@/api/jmap/mapdraft';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@ -77,16 +79,18 @@ export default {
|
||||
return {
|
||||
tableData: [],
|
||||
addModel: {
|
||||
section: ''
|
||||
sectionCode: ''
|
||||
},
|
||||
field: '',
|
||||
cardMode: 'generate',
|
||||
index: ''
|
||||
index: '',
|
||||
isPreview: true
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'sectionList'
|
||||
'sectionList',
|
||||
'bigScreenSplitConfig'
|
||||
]),
|
||||
cardTitle() {
|
||||
if (this.cardMode === 'generate') {
|
||||
@ -101,6 +105,11 @@ export default {
|
||||
watch: {
|
||||
selected: function (val, oldVal) {
|
||||
this.deviceSelect(val);
|
||||
},
|
||||
bigScreenSplitConfig: function(val) {
|
||||
if (val.length) {
|
||||
this.handleList(val);
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -112,11 +121,23 @@ export default {
|
||||
this.$refs.make && this.$refs.make.resetFields();
|
||||
if (selected && selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'selectSection'.toUpperCase()) {
|
||||
if (selected.type === '01' || selected.type === '03') {
|
||||
this.addModel.section = selected.code;
|
||||
this.addModel.sectionCode = selected.code;
|
||||
this.field = '';
|
||||
}
|
||||
}
|
||||
},
|
||||
handleList(list) {
|
||||
this.tableData = [];
|
||||
list.forEach(item => {
|
||||
const section = this.$store.getters['map/getDeviceByCode'](item.sectionCode);
|
||||
const param = {
|
||||
position: String(section.points[section.points.length - 1].x),
|
||||
name: `${section.name}(${section.code})`,
|
||||
sectionCode: section.code
|
||||
};
|
||||
this.tableData.push(param);
|
||||
});
|
||||
},
|
||||
hover(field) {
|
||||
this.field = field == this.field ? '' : field;
|
||||
},
|
||||
@ -126,7 +147,7 @@ export default {
|
||||
this.cardMode = 'generate';
|
||||
},
|
||||
editModel(list, index) {
|
||||
this.addModel.section = list[index].code;
|
||||
this.addModel.sectionCode = list[index].sectionCode;
|
||||
this.index = index;
|
||||
this.cardMode = 'edit';
|
||||
},
|
||||
@ -136,14 +157,14 @@ export default {
|
||||
},
|
||||
updateOverlab() {
|
||||
if (this.index || this.index == 0) {
|
||||
if (!this.addModel.section) {
|
||||
if (!this.addModel.sectionCode) {
|
||||
this.$messageBox('请选择区段!');
|
||||
} else {
|
||||
const section = this.$store.getters['map/getDeviceByCode'](this.addModel.section);
|
||||
const section = this.$store.getters['map/getDeviceByCode'](this.addModel.sectionCode);
|
||||
const param = {
|
||||
width: section.points[section.points.length - 1].x,
|
||||
position: String(section.points[section.points.length - 1].x),
|
||||
name: `${section.name}(${section.code})`,
|
||||
code: section.code
|
||||
sectionCode: section.code
|
||||
};
|
||||
this.tableData.splice(this.index, 1, param);
|
||||
}
|
||||
@ -152,24 +173,59 @@ export default {
|
||||
}
|
||||
},
|
||||
save() {
|
||||
console.log(this.tableData); // 保存
|
||||
if (this.tableData.length) {
|
||||
const map = this.$store.state.map.map;
|
||||
const param = {
|
||||
bigScreenSplitConfig: this.tableData,
|
||||
mapId: this.$route.params.mapId
|
||||
};
|
||||
saveMap(Object.assign(map, param)).then(response => {
|
||||
this.$message.success('保存大屏分割位置成功');
|
||||
}).catch(() => {
|
||||
this.$messageBox('保存大屏分割位置失败');
|
||||
});
|
||||
}
|
||||
},
|
||||
preview() { // 预览
|
||||
if (this.tableData.length) {
|
||||
this.isPreview = false;
|
||||
this.$jlmap && this.$jlmap.off('zoom');
|
||||
this.$jlmap && this.$jlmap.off('pan');
|
||||
const size = {
|
||||
width: this.$jlmap.$zr.getWidth(),
|
||||
height: this.$jlmap.$zr.getHeight(),
|
||||
list: this.tableData.map(ele => ele.position)
|
||||
};
|
||||
this.$jlmap && this.$jlmap.setUpdateScreen(size);
|
||||
} else {
|
||||
this.$messageBox('请输入换行位置信息');
|
||||
}
|
||||
},
|
||||
recover() { // 恢复缩放比
|
||||
this.isPreview = true;
|
||||
this.$jlmap && this.$jlmap.on('zoom');
|
||||
this.$jlmap && this.$jlmap.on('pan');
|
||||
const param = {
|
||||
scaleRate: this.$store.state.map.dataZoom.scaleRate,
|
||||
offsetX: this.$store.state.map.dataZoom.offsetX,
|
||||
offsetY: this.$store.state.map.dataZoom.offsetY
|
||||
};
|
||||
this.$jlmap && this.$jlmap.setRecover(param);
|
||||
},
|
||||
clear() {
|
||||
this.$refs.hostileForm.resetFields();
|
||||
this.addModel.section = '';
|
||||
this.addModel.sectionCode = '';
|
||||
this.index = '';
|
||||
},
|
||||
generateOverlab() {
|
||||
if (!this.addModel.section) {
|
||||
if (!this.addModel.sectionCode) {
|
||||
this.$messageBox('请选择区段!');
|
||||
} else {
|
||||
const section = this.$store.getters['map/getDeviceByCode'](this.addModel.section);
|
||||
const section = this.$store.getters['map/getDeviceByCode'](this.addModel.sectionCode);
|
||||
this.tableData.push({
|
||||
width: section.points[section.points.length - 1].x,
|
||||
position: String(section.points[section.points.length - 1].x),
|
||||
name: `${section.name}(${section.code})`,
|
||||
code: section.code
|
||||
sectionCode: section.code
|
||||
});
|
||||
this.clear();
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user