Merge branch 'test_dispaly' of https://git.code.tencent.com/lian-cbtc/jl-client into test_dispaly
This commit is contained in:
joylink_cuiweidong
commit
a9fbdec815
@ -51,6 +51,7 @@ class Jlmap {
|
||||
this.isUpdateShowTrainList = false;
|
||||
this.isUpdateRunLineTrain = false;
|
||||
this._disposeFlag = false;
|
||||
if (this.methods.initJlmap instanceof Function) { this.methods.initJlmap(); }
|
||||
}
|
||||
|
||||
// 初始化属性有鼠标事件 缩放等
|
||||
@ -119,7 +120,7 @@ class Jlmap {
|
||||
this.$options.scaleIndex = parseInt((scaling / 0.05).toFixed());
|
||||
this.$painter.updateTransform({ scaleRate: scaling, offsetX: origin ? origin.x : 0, offsetY: origin ? origin.y : 0 });
|
||||
}
|
||||
setMap(map, mapDevice, logicData) {
|
||||
setMap(map, mapDevice, logicData, repaint = true) {
|
||||
// 保存皮肤类型
|
||||
if (map.skinVO) {
|
||||
this.lineCode = map.skinVO.code;
|
||||
@ -143,7 +144,11 @@ class Jlmap {
|
||||
if (this.methods.dataLoaded instanceof Function) { this.methods.dataLoaded(this.mapDevice); }
|
||||
|
||||
// 初次渲染视图
|
||||
if (repaint) {
|
||||
this.$painter.repaint(this.mapDevice);
|
||||
} else {
|
||||
this.render(Object.values(this.mapDevice));
|
||||
}
|
||||
|
||||
// 视图加载完成 回调
|
||||
if (this.methods.viewLoaded instanceof Function) { this.methods.viewLoaded(this.mapDevice); }
|
||||
|
||||
@ -203,6 +203,10 @@ export default {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.menus {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
.menus .pop-menu {
|
||||
background: #F0F0F0;
|
||||
}
|
||||
|
||||
@ -224,6 +224,7 @@ const map = {
|
||||
mapDevice: {}, // 解析后的地图数据
|
||||
mapList: {}, // 地图数据列表
|
||||
mapViewLoadedCount: 0, // 地图视图加载完成标识
|
||||
initJlmapLoadedCount: 0, // Jlmap初始化表示
|
||||
mapDataLoadedCount: 0, // 地图数据加载完成标识
|
||||
mapStateLoadedCount: 0, // 地图状态变化完成标识
|
||||
mapDataLoadedScreenCount: 0, // 大屏加载完成
|
||||
@ -850,6 +851,12 @@ const map = {
|
||||
mapViewLoadedCountIncrement: state => {
|
||||
state.mapViewLoadedCount += 1;
|
||||
},
|
||||
initJlmapLoadedCountIncrement: state => {
|
||||
state.initJlmapLoadedCount += 1;
|
||||
},
|
||||
initJlmapLoadedCountClear: state => {
|
||||
state.initJlmapLoadedCount = 0;
|
||||
},
|
||||
mapDataLoadedCountIncrement: state => {
|
||||
state.mapDataLoadedCount += 1;
|
||||
},
|
||||
@ -1252,7 +1259,12 @@ const map = {
|
||||
mapViewLoaded: ({ commit }) => {
|
||||
commit('mapViewLoadedCountIncrement');
|
||||
},
|
||||
|
||||
initJlmapLoaded: ({ commit }) => {
|
||||
commit('initJlmapLoadedCountIncrement');
|
||||
},
|
||||
initJlmapLoadedCountClear:({commit}) => {
|
||||
commit('initJlmapLoadedCountClear');
|
||||
},
|
||||
mapViewScreenLoaded: ({ commit }) => {
|
||||
commit('mapViewLoadedScreenCountIncrement');
|
||||
},
|
||||
|
||||
@ -82,13 +82,14 @@ const training = {
|
||||
// 视图中的列车列表
|
||||
viewTrainList: (state) => () =>{
|
||||
const trainList = [];
|
||||
if (Vue.prototype.$jlmap) {
|
||||
const mapDevice = Vue.prototype.$jlmap.mapDevice;
|
||||
Object.values(mapDevice).forEach(device => {
|
||||
if (device && device._type === deviceType.Train) {
|
||||
trainList.push(device);
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
return trainList;
|
||||
}
|
||||
},
|
||||
@ -187,6 +188,7 @@ const training = {
|
||||
state.prdType = prdType;
|
||||
},
|
||||
setRoles: (state, roles) => {
|
||||
console.log(roles, '---------------roles');
|
||||
state.roles = roles;
|
||||
},
|
||||
notifyGetCommandDefinition: (state, lineCode) => {
|
||||
@ -204,6 +206,7 @@ const training = {
|
||||
state.memberData[item.id].disabled = userId == item.userId;
|
||||
if (userId == item.userId) {
|
||||
state.roles = item.type;
|
||||
state.roleDeviceCode = item.deviceCode;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -24,8 +24,8 @@ export function handlerUrl(data) {
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
// const data = null;
|
||||
// BASE_API = 'https://joylink.club/jlcloud';
|
||||
// BASE_API = 'https://test.joylink.club/jlcloud';
|
||||
BASE_API = 'http://192.168.3.233/rtss-server';
|
||||
BASE_API = 'https://test.joylink.club/jlcloud';
|
||||
// BASE_API = 'http://192.168.3.233/rtss-server';
|
||||
// BASE_API = 'http://114.116.51.125/jlcloud';
|
||||
// BASE_API = 'http://192.168.8.152:9000'; // 袁琪
|
||||
// BASE_API = 'http://192.168.3.94:9000'; // 旭强
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
</el-button-group>
|
||||
|
||||
<template v-for="alarm in alarmList">
|
||||
<audio :key="alarm.code" :id="`buzzer_${alarm.code}`" controls loop="loop">
|
||||
<audio :id="`buzzer_${alarm.code}`" :key="alarm.code" controls loop="loop">
|
||||
<source :src="buzzerAudio" type="audio/mpeg">
|
||||
</audio>
|
||||
</template>
|
||||
@ -125,7 +125,7 @@ export default {
|
||||
methods: {
|
||||
initIbp(offsetX = 0) {
|
||||
this.ibpDestroy();
|
||||
this.loading = true;
|
||||
// this.loading = true;
|
||||
this.$ibp = new IbpPan({
|
||||
dom: document.getElementById(this.ibpId),
|
||||
config: {
|
||||
@ -238,23 +238,23 @@ export default {
|
||||
onKeyboardAction(e) {
|
||||
if (this.preResetBtn) {
|
||||
if (e.type === 'keydown' && e.key === 'Control') {
|
||||
pressedKeys.add(e.key)
|
||||
pressedKeys.add(e.key);
|
||||
this.preResetBtn.press();
|
||||
handleIbpPress(this.$route.query.group, this.stationCode, this.preResetBtn._code).catch(error => { this.$message.error(error.message); });
|
||||
} else if (e.type === 'keyup' && e.key === 'Control') {
|
||||
pressedKeys.delete(e.key)
|
||||
pressedKeys.delete(e.key);
|
||||
this.preResetBtn.release();
|
||||
handleIbpRelease(this.$route.query.group, this.stationCode, this.preResetBtn._code).catch(error => { this.$message.error(error.message); });
|
||||
}
|
||||
}
|
||||
},
|
||||
onMouseDown(em) {
|
||||
if (["SquareButton", "Key"].includes(em.deviceType)){
|
||||
if (['SquareButton', 'Key'].includes(em.deviceType)) {
|
||||
handleIbpPress(this.$route.query.group, this.stationCode, em.deviceCode).catch(error => { this.$message.error(error.message); });
|
||||
}
|
||||
},
|
||||
onMouseUp(em) {
|
||||
if (["SquareButton"].includes(em.deviceType)){
|
||||
if (['SquareButton'].includes(em.deviceType)) {
|
||||
handleIbpRelease(this.$route.query.group, this.stationCode, em.deviceCode).catch(error => { this.$message.error(error.message); });
|
||||
}
|
||||
},
|
||||
|
||||
@ -4,22 +4,22 @@
|
||||
<div v-if="lineCode == '07'" id="jlReal3d" class="jlReal3d">
|
||||
<div class="realCctv1">
|
||||
<video id="myvideo0" class="video-js">
|
||||
<source src="http://160.20.60.15/hls/cctv1.m3u8" type="application/x-mpegURL" />
|
||||
<source src="http://160.20.60.15/hls/cctv1.m3u8" type="application/x-mpegURL">
|
||||
</video>
|
||||
</div>
|
||||
<div class="realCctv2">
|
||||
<video id="myvideo1" class="video-js">
|
||||
<source src="http://160.20.60.15/hls/cctv2.m3u8" type="application/x-mpegURL" />
|
||||
<source src="http://160.20.60.15/hls/cctv2.m3u8" type="application/x-mpegURL">
|
||||
</video>
|
||||
</div>
|
||||
<div class="realCctv3">
|
||||
<video id="myvideo2" class="video-js">
|
||||
<source src="http://160.20.60.15/hls/cctv3.m3u8" type="application/x-mpegURL" />
|
||||
<source src="http://160.20.60.15/hls/cctv3.m3u8" type="application/x-mpegURL">
|
||||
</video>
|
||||
</div>
|
||||
<div class="realCctv4">
|
||||
<video id="myvideo3" class="video-js">
|
||||
<source src="http://160.20.60.15/hls/cctv4.m3u8" type="application/x-mpegURL" />
|
||||
<source src="http://160.20.60.15/hls/cctv4.m3u8" type="application/x-mpegURL">
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
@ -46,12 +46,12 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import Video from 'video.js'
|
||||
import 'video.js/dist/video-js.css'
|
||||
import { Jl3dpassflow } from '@/jlmap3d/jl3dpassflow/jl3dpassflownew.js'
|
||||
import { ProjectIcon, loginInfo } from '@/scripts/ProjectConfig'
|
||||
import { JL3D_LOCAL_STATIC } from '@/api/jlmap3d/assets3d.js'
|
||||
import Vue from 'vue';
|
||||
import Video from 'video.js';
|
||||
import 'video.js/dist/video-js.css';
|
||||
import { Jl3dpassflow } from '@/jlmap3d/jl3dpassflow/jl3dpassflownew.js';
|
||||
import { ProjectIcon, loginInfo } from '@/scripts/ProjectConfig';
|
||||
import { JL3D_LOCAL_STATIC } from '@/api/jlmap3d/assets3d.js';
|
||||
export default {
|
||||
name: 'Passflow',
|
||||
components: {
|
||||
@ -75,34 +75,34 @@ export default {
|
||||
// {sources: [{ type:'application/x-mpegURL', src: 'http://192.168.3.6/hls/vlc.m3u8'}]},
|
||||
// {sources: [{ type:'application/x-mpegURL', src: 'http://192.168.3.6/hls/vlc.m3u8'}]}
|
||||
// ],
|
||||
loadingProjectList: ['login', 'design', 'xty', 'designxty', 'gzb', 'designxty', 'xadt', 'designxadt', 'drts', 'designdrts', 'hlsdrts', 'designhlsdrts'],
|
||||
}
|
||||
loadingProjectList: ['login', 'design', 'xty', 'designxty', 'gzb', 'designxty', 'xadt', 'designxadt', 'drts', 'designdrts', 'hlsdrts', 'designhlsdrts']
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
code() {
|
||||
return this.$route.query.code
|
||||
return this.$route.query.code;
|
||||
},
|
||||
lineCode() {
|
||||
return this.$route.query.lineCode
|
||||
},
|
||||
return this.$route.query.lineCode;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.app.windowSizeCount': function () {
|
||||
this.videoList.forEach((videoPlay, index) => {
|
||||
console.log('??')
|
||||
document.querySelector('.myvideo' + index + '-dimensions').style.width = window.innerWidth / 4 + 'px'
|
||||
document.querySelector('.myvideo' + index + '-dimensions').style.height = window.innerHeight / 2 + 'px'
|
||||
console.log('??');
|
||||
document.querySelector('.myvideo' + index + '-dimensions').style.width = window.innerWidth / 4 + 'px';
|
||||
document.querySelector('.myvideo' + index + '-dimensions').style.height = window.innerHeight / 2 + 'px';
|
||||
// videoPlay.width_ = window.innerWidth / 4;
|
||||
// videoPlay.height_ = window.innerHeight / 2;
|
||||
})
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.loadingProjectList.includes(this.$route.query.project)) {
|
||||
this.$store.dispatch('app/transitionAnimations')
|
||||
this.$store.dispatch('app/transitionAnimations');
|
||||
}
|
||||
document.querySelector("link[rel*='icon']").href =
|
||||
loginInfo[this.$route.query.project].linkIcon || ProjectIcon[this.$route.query.project]
|
||||
loginInfo[this.$route.query.project].linkIcon || ProjectIcon[this.$route.query.project];
|
||||
},
|
||||
mounted() {
|
||||
if (this.lineCode == '07') {
|
||||
@ -117,20 +117,20 @@ export default {
|
||||
width: window.innerWidth / 4 + 'px',
|
||||
height: window.innerHeight / 2 + 'px',
|
||||
hls: {
|
||||
withCredentials: true,
|
||||
},
|
||||
withCredentials: true
|
||||
}
|
||||
},
|
||||
function () {
|
||||
console.log('videojs播放器初始化成功')
|
||||
console.log('videojs播放器初始化成功');
|
||||
}
|
||||
)
|
||||
this.videoList.push(videoPlay)
|
||||
);
|
||||
this.videoList.push(videoPlay);
|
||||
}
|
||||
}
|
||||
this.init()
|
||||
window.updatestationlist = this.updatestationlist
|
||||
this.init();
|
||||
window.updatestationlist = this.updatestationlist;
|
||||
if (this.$route.query.type == 'CCTV') {
|
||||
this.isCctv = false
|
||||
this.isCctv = false;
|
||||
}
|
||||
},
|
||||
|
||||
@ -138,44 +138,44 @@ export default {
|
||||
methods: {
|
||||
init: function () {
|
||||
// let mapdata = this.$store.state.socket.device;
|
||||
let dom = document.getElementById('jl3d')
|
||||
this.jl3d = new Jl3dpassflow(dom, this.$route.query.mapid, this.$route.query.group, 'normal')
|
||||
const dom = document.getElementById('jl3d');
|
||||
this.jl3d = new Jl3dpassflow(dom, this.$route.query.mapid || this.$route.query.mapId, this.$route.query.group, 'normal');
|
||||
},
|
||||
switchrender() {
|
||||
if (this.renderswitch == true) {
|
||||
this.rendermode = '退出监控'
|
||||
this.renderswitch = false
|
||||
this.jl3d.switchviews('freeview')
|
||||
this.rendermode = '退出监控';
|
||||
this.renderswitch = false;
|
||||
this.jl3d.switchviews('freeview');
|
||||
} else {
|
||||
this.rendermode = '监控视角'
|
||||
this.renderswitch = true
|
||||
this.jl3d.switchviews('4views')
|
||||
this.rendermode = '监控视角';
|
||||
this.renderswitch = true;
|
||||
this.jl3d.switchviews('4views');
|
||||
}
|
||||
},
|
||||
switch4view() {
|
||||
this.jl3d.switchviews('4views')
|
||||
this.jl3d.switchviews('4views');
|
||||
},
|
||||
switch2view() {
|
||||
this.jl3d.switchviews('2views')
|
||||
this.jl3d.switchviews('2views');
|
||||
},
|
||||
switchauto() {
|
||||
this.jl3d.switchviews('freeview')
|
||||
this.jl3d.switchviews('freeview');
|
||||
},
|
||||
updatestationlist(list) {
|
||||
// console.log(list);
|
||||
this.value = list[0].name
|
||||
this.stationlist = list
|
||||
this.value = list[0].name;
|
||||
this.stationlist = list;
|
||||
},
|
||||
currentsel(selVal) {
|
||||
this.jl3d.changestation(selVal)
|
||||
this.jl3d.changestation(selVal);
|
||||
// let oldgroupnum = this.groupnum;
|
||||
// this.value = selVal;
|
||||
},
|
||||
back() {
|
||||
window.close()
|
||||
},
|
||||
},
|
||||
window.close();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
/* #jl3d {
|
||||
@ -185,6 +185,10 @@ export default {
|
||||
.jl3dpassflow {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
.jl3ddraw1 {
|
||||
position: absolute;
|
||||
|
||||
@ -2,21 +2,20 @@
|
||||
<div class="main" :style="{width: canvasWidth+'px'}">
|
||||
<transition name="el-zoom-in-bottom">
|
||||
<!-- v-show="!specialDispatch" -->
|
||||
<map-system-draft ref="mapCanvas" @back="back" />
|
||||
<!-- <map-system-draft ref="mapCanvas" @back="back" />-->
|
||||
<terminals-picture ref="terminalsPicture" />
|
||||
</transition>
|
||||
<simulation-control ref="simulationControl" />
|
||||
<simulation-menu ref="simulationMenu" :mode="mode" />
|
||||
<!-- 可切换的终端类型 -->
|
||||
<terminal-list ref="terminalList" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// import { timeFormat } from '@/utils/date';
|
||||
import { getSessionStorage } from '@/utils/auth';
|
||||
import { mapGetters } from 'vuex';
|
||||
import MapSystemDraft from '@/views/newMap/mapsystemNew/index';
|
||||
// import MapSystemDraft from '@/views/newMap/mapsystemNew/index';
|
||||
import TerminalsPicture from './terminals/index';
|
||||
import SimulationMenu from './simulationMenu';
|
||||
import TerminalList from './terminalList';
|
||||
import { clearSimulation, getSimulationInfoNew} from '@/api/simulation';
|
||||
import { destroySimulation, getSimulationInfoByGroup } from '@/api/rtSimulation';
|
||||
import { loadMapDataById } from '@/utils/loaddata';
|
||||
@ -27,9 +26,8 @@ import SimulationControl from './simulationControl.vue';
|
||||
export default {
|
||||
name: 'DisplayDraft',
|
||||
components: {
|
||||
MapSystemDraft,
|
||||
TerminalsPicture,
|
||||
SimulationMenu,
|
||||
TerminalList,
|
||||
SimulationControl
|
||||
},
|
||||
data() {
|
||||
|
||||
452
src/views/newMap/display/messageBoard.vue
Normal file
452
src/views/newMap/display/messageBoard.vue
Normal file
@ -0,0 +1,452 @@
|
||||
<template>
|
||||
<div id="elDialog" class="message-board-box">
|
||||
<div class="message-board-title">留言板</div>
|
||||
<div class="message-board-content">
|
||||
<div v-if="postCommentList.length">
|
||||
<template v-for="(item,i) in postCommentList">
|
||||
<div :key="i" class="eachPostComment">
|
||||
<div style="margin-bottom: 10px;display: flex;align-items: center;">
|
||||
<img :src="avatarUrl(item)" class="head_portrait">
|
||||
<div class="MBCcreatorNickName">{{ item.creatorNickName }}</div>
|
||||
<div style="display: inline-block;">{{ item.createTime }}</div>
|
||||
</div>
|
||||
<div style="margin-left: 60px;" v-html="$escapeHTML(`${item.content}`)" />
|
||||
<div style="width: 100%;display:flex;align-items: center;justify-content: flex-end;">
|
||||
<img :src="replyIcon" class="replyIcon" @click="replyLeaveMessage(item.id, i)">
|
||||
<img v-if="userId == item.creatorId || superAdmin" :src="deleteIcon" class="deleteIcon" @click="deleteMessage(item.id)">
|
||||
</div>
|
||||
<div v-if="item.comments && item.comments.total > 0" class="eachComment">
|
||||
<div v-if="moreMessageId == item.id">
|
||||
<template v-for="(elem,j) in allCommentList">
|
||||
<div :key="j" style="font-size: 14px;margin-top: 10px;">
|
||||
<span style="margin-right: 5px;">{{ computedCommentName(elem) }}</span>
|
||||
<span style="margin-right: 15px;" v-html="$escapeHTML(`${elem.content}`)" />
|
||||
<span style="margin-right: 10px;">{{ elem.commentTime }}</span>
|
||||
<span class="replyLeaveMessage" @click="replyLeaveMessage(item.id, i,elem.id, elem.userNickname)">回复</span>
|
||||
<span v-if="userId == elem.userId || superAdmin" style="color:#409EFF;cursor: pointer;" type="text" @click="deleteComment(item.id, i, elem.id)">删除</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div v-else>
|
||||
<template v-for="(elem,j) in item.comments.list">
|
||||
<div :key="j" style="font-size: 14px;margin-top: 18px;">
|
||||
<span style="margin-right: 5px;">{{ computedCommentName(elem) }}</span>
|
||||
<span style="margin-right: 15px;" v-html="$escapeHTML(`${elem.content}`)" />
|
||||
<span style="margin-right: 10px;">{{ elem.commentTime }}</span>
|
||||
<span class="replyLeaveMessage" @click="replyLeaveMessage(item.id, i,elem.id, elem.userNickname)">回复</span>
|
||||
<span v-if="userId == elem.userId || superAdmin" style="color:#409EFF;cursor: pointer;" type="text" @click="deleteComment(item.id, i, elem.id)">删除</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div v-if="item.comments.total > 3 && moreMessageId != item.id" style="margin-top: 10px;">
|
||||
<span class="view_more" @click="viewMoreComment(item)">{{ `共${item.comments.total}条回复,点击查看更多>>` }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="replyMessageId == item.id" style="width: 80%;margin-left: 10%;text-align: center;">
|
||||
<quill-editor
|
||||
:ref="'answerInput' + item.id"
|
||||
v-model="commentContent"
|
||||
style="width: 80%;margin-left: 10%;margin-top: 10px;"
|
||||
class-name="answer_input"
|
||||
:margin-bottom="20"
|
||||
editor-type="onlyEmoji"
|
||||
:no-handle-p="true"
|
||||
:height="100"
|
||||
:placeholder="replyUserName"
|
||||
/>
|
||||
<div>
|
||||
<el-button type="danger" size="small" @click="commentMessage">回复</el-button>
|
||||
<el-button size="small" @click="cancelComment">取消</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div v-else class="empty-text">
|
||||
<span>暂无留言</span>
|
||||
</div>
|
||||
<div style="width: 100%;text-align: center;">
|
||||
<el-pagination
|
||||
:current-page.sync="pageNum"
|
||||
:page-size="pageSize"
|
||||
layout="total, prev, pager, next,jumper"
|
||||
:total="total"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<quill-editor ref="quillEditor" v-model="content" style="width: 80%;margin-left: 10%;" :margin-bottom="20" editor-type="imgEmoji" :no-handle-p="true" />
|
||||
<span id="boardBottom" class="dialog-footer">
|
||||
<el-button @click="handleClear">清空</el-button>
|
||||
<el-button type="danger" @click="commitComment">留言</el-button>
|
||||
</span>
|
||||
<el-button size="mini" type="danger" class="goSlide" @click="goSlide">我要留言</el-button>
|
||||
<div v-show="imgShow" class="popUpImgView" @click="handelCloseImg">
|
||||
<img id="targetImg" src="" class="popUpImg">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { answerPost, queryMessagePagingByProjectCode, deleteMessageByAdmin, deleteMessageBySelf, commentLevelMessage, commentComents,
|
||||
queryMessageCommentList, deleteCommentByAdmin, deleteCommentBySelf, getPostByProjectCode } from '@/api/learn';
|
||||
import lick_icon from '@/assets/like.png';
|
||||
import unlike_icon from '@/assets/unlike.png';
|
||||
import reply_icon from '@/assets/reply.png';
|
||||
import delete_icon from '@/assets/delete.png';
|
||||
import { superAdmin } from '@/router/index';
|
||||
import { ProjectCode } from '@/scripts/ProjectConfig';
|
||||
import QuillEditor from '@/components/QuillEditor/index';
|
||||
export default {
|
||||
name: 'MessageBoard',
|
||||
components: {
|
||||
QuillEditor
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
content: '',
|
||||
postCommentList: [],
|
||||
pageSize: 10,
|
||||
pageNum: 0,
|
||||
total: 0,
|
||||
imgShow: false,
|
||||
lickIcon: lick_icon,
|
||||
unlikeIcon: unlike_icon,
|
||||
replyIcon: reply_icon,
|
||||
deleteIcon: delete_icon,
|
||||
replyMessageId: '',
|
||||
commentContent: '',
|
||||
replyCommentId: '',
|
||||
replyMessageIndex: '',
|
||||
allCommentList: [],
|
||||
moreMessageId: '',
|
||||
replyUserName: '',
|
||||
postId: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
userId() {
|
||||
return this.$store.state.user.id;
|
||||
},
|
||||
superAdmin() {
|
||||
return this.$store.state.user.roles.includes(superAdmin);
|
||||
},
|
||||
projectCode() {
|
||||
const project = this.$route.query.project;
|
||||
return ProjectCode[project];
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const that = this;
|
||||
window.handleZoomImg = function () {
|
||||
that.imgShow = true;
|
||||
document.getElementById('targetImg').src = event.target.currentSrc;
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
getPostByProjectCode(this.projectCode).then(resp => {
|
||||
this.postId = resp.data.id;
|
||||
});
|
||||
this.handleCurrentChange();
|
||||
},
|
||||
methods: {
|
||||
commitComment() {
|
||||
const images = this.content.match(/<img/g);
|
||||
const answerContent = this.handleEmojiContent(this.content);
|
||||
if (images && images.length > 3) {
|
||||
this.$message.error('留言内容使用图片应小于三张！');
|
||||
return;
|
||||
}
|
||||
if (answerContent.length > 1000) {
|
||||
this.$message.error('留言内容超出最大长度！');
|
||||
return;
|
||||
}
|
||||
if (!answerContent) {
|
||||
this.$message.error('留言内容不能为空！');
|
||||
return;
|
||||
}
|
||||
answerPost({postId: this.postId, content: answerContent}).then(resp => {
|
||||
this.pageNum = 1;
|
||||
this.handleCurrentChange();
|
||||
this.content = '';
|
||||
}).catch(error => {
|
||||
this.$message.error('留言失败 ！');
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
handleCurrentChange() {
|
||||
queryMessagePagingByProjectCode(this.projectCode, {pageSize: this.pageSize, pageNum: this.pageNum}).then(resp => {
|
||||
this.postCommentList = [];
|
||||
(resp.data.list || []).forEach(item => {
|
||||
item.content = this.replaceEmoji(item.content);
|
||||
item.comments && item.comments.list && item.comments.list.forEach(elem => {
|
||||
elem.content = this.replaceEmoji(elem.content);
|
||||
});
|
||||
this.postCommentList.push(item);
|
||||
});
|
||||
this.total = resp.data.total;
|
||||
});
|
||||
},
|
||||
replaceEmoji(content) {
|
||||
let value = content.replace(/<img/g, '<img style="width: 100px;height: auto;cursor: zoom-in;" onclick="handleZoomImg()"');
|
||||
const list = value.match(/<<<([^>]*)>>>/g);
|
||||
(list || []).forEach(elem => {
|
||||
const targetValue = elem.substring(3, elem.length - 3);
|
||||
value = value.replace(elem, `<span class="ql-emojiblot" data-name="${targetValue}"><span contenteditable="false"><span class="ap ap-${targetValue}">ss</span></span></span>`);
|
||||
});
|
||||
return value;
|
||||
},
|
||||
goSlide() {
|
||||
const bottom = document.getElementById('boardBottom');
|
||||
const element = document.getElementById('elDialog').childNodes[0];
|
||||
element.scrollTop = bottom.offsetTop;
|
||||
this.$refs.quillEditor.getFocus();
|
||||
},
|
||||
avatarUrl(val) {
|
||||
if (val && val.creatorAvatarPath) {
|
||||
return this.$store.state.user.resourcesUrl + val.creatorAvatarPath;
|
||||
} else {
|
||||
return 'https://joylink.club/oss/wxmicro_assistant/userhead/defaultuser.png';
|
||||
}
|
||||
},
|
||||
|
||||
handleClear() {
|
||||
this.content = '';
|
||||
},
|
||||
handelCloseImg() {
|
||||
this.imgShow = false;
|
||||
document.getElementById('targetImg').src = '';
|
||||
},
|
||||
replyLeaveMessage(messageId, messageIndex, commentId, userNickname) {
|
||||
this.cancelComment();
|
||||
this.replyMessageId = messageId;
|
||||
this.replyCommentId = commentId;
|
||||
this.replyMessageIndex = messageIndex;
|
||||
if (commentId) {
|
||||
this.replyUserName = '@' + userNickname + ' ';
|
||||
this.commentContent = '';
|
||||
}
|
||||
this.$nextTick(()=>{
|
||||
this.$refs['answerInput' + messageId][0].getFocus();
|
||||
});
|
||||
},
|
||||
cancelComment() {
|
||||
this.replyMessageId = '';
|
||||
this.commentContent = '';
|
||||
this.replyCommentId = '';
|
||||
this.replyMessageIndex = '';
|
||||
this.replyUserName = '';
|
||||
},
|
||||
commentMessage() {
|
||||
const contentValue = this.handleEmojiContent(this.commentContent);
|
||||
if (contentValue.length > 300) {
|
||||
this.$message.error('回复内容超出最大长度！');
|
||||
return;
|
||||
}
|
||||
if (this.replyCommentId) {
|
||||
commentComents(this.replyMessageId, this.replyCommentId, {content:contentValue}).then(resp => {
|
||||
this.getCommentList(this.replyMessageId, this.replyMessageIndex);
|
||||
this.cancelComment();
|
||||
}).catch(error => {
|
||||
this.$message.error('评论回复失败！');
|
||||
console.error(error);
|
||||
});
|
||||
} else {
|
||||
commentLevelMessage(this.replyMessageId, {content:contentValue}).then(resp => {
|
||||
this.getCommentList(this.replyMessageId, this.replyMessageIndex);
|
||||
this.cancelComment();
|
||||
}).catch(error => {
|
||||
this.$message.error('评论回复失败！');
|
||||
console.error(error);
|
||||
});
|
||||
}
|
||||
},
|
||||
getCommentList(messageId, messageIndex) {
|
||||
queryMessageCommentList(messageId).then(resp => {
|
||||
const replaceValue = [];
|
||||
resp.data && resp.data.forEach(item => {
|
||||
item.content = this.replaceEmoji(item.content);
|
||||
replaceValue.push(item);
|
||||
});
|
||||
if (this.moreMessageId == messageId) {
|
||||
this.allCommentList = replaceValue;
|
||||
}
|
||||
if (replaceValue.length > 3) {
|
||||
this.postCommentList[messageIndex].comments.list = replaceValue.slice(0, 3);
|
||||
this.postCommentList[messageIndex].comments.total = replaceValue.length;
|
||||
} else {
|
||||
this.postCommentList[messageIndex].comments.list = replaceValue;
|
||||
this.postCommentList[messageIndex].comments.total = replaceValue.length;
|
||||
}
|
||||
}).catch(error => {
|
||||
this.$message.error('更新回复失败！');
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
computedCommentName(elem) {
|
||||
if (elem.replyUserNickName) {
|
||||
return `${elem.userNickname} 回复@ ${elem.replyUserNickName}：`;
|
||||
} else {
|
||||
return elem.userNickname + '：';
|
||||
}
|
||||
},
|
||||
deleteMessage(messageId) {
|
||||
if (this.superAdmin) {
|
||||
deleteMessageByAdmin(messageId).then(resp => {
|
||||
// this.$message.success('删除留言成功！');
|
||||
this.handleCurrentChange();
|
||||
}).catch(error => {
|
||||
this.$message.error('删除留言失败！');
|
||||
console.error(error);
|
||||
});
|
||||
} else {
|
||||
deleteMessageBySelf(messageId).then(resp => {
|
||||
// this.$message.success('删除留言成功！');
|
||||
this.handleCurrentChange();
|
||||
}).catch(error => {
|
||||
this.$message.error('删除留言失败！');
|
||||
console.error(error);
|
||||
});
|
||||
}
|
||||
},
|
||||
deleteComment(messageId, messageIndex, commentId) {
|
||||
if (this.superAdmin) {
|
||||
deleteCommentByAdmin(commentId).then(resp => {
|
||||
this.getCommentList(messageId, messageIndex);
|
||||
}).catch(error => {
|
||||
this.$message.error('删除回复失败！');
|
||||
console.error(error);
|
||||
});
|
||||
} else {
|
||||
deleteCommentBySelf(commentId).then(resp => {
|
||||
this.getCommentList(messageId, messageIndex);
|
||||
}).catch(error => {
|
||||
this.$message.error('删除回复失败！');
|
||||
console.error(error);
|
||||
});
|
||||
}
|
||||
},
|
||||
viewMoreComment(data) {
|
||||
queryMessageCommentList(data.id).then(resp => {
|
||||
this.allCommentList = [];
|
||||
resp.data && resp.data.forEach(item => {
|
||||
item.content = this.replaceEmoji(item.content);
|
||||
this.allCommentList.push(item);
|
||||
});
|
||||
this.moreMessageId = data.id;
|
||||
}).catch(error => {
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
handleEmojiContent(content) {
|
||||
const list = content.match(/<span class="ql-emojiblot" data-name="(\S*)"><span contenteditable="false"><span class="ap ap-(\S*)<\/span><\/span><\/span>/g);
|
||||
(list || []).forEach(item => {
|
||||
let targetValue = item.split(' ')[2];
|
||||
targetValue = targetValue.substring(11, targetValue.length - 8);
|
||||
content = content.replace(item, '<<<' + targetValue + '>>>');
|
||||
});
|
||||
return content;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog-footer{
|
||||
margin: 0 auto;
|
||||
padding: 10px 0 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.empty-text{
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-size: 18px;
|
||||
color: #ccc;
|
||||
}
|
||||
.head_portrait{
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 25px;
|
||||
}
|
||||
.view_more {
|
||||
cursor: pointer;
|
||||
}
|
||||
.view_more:hover {
|
||||
cursor: pointer;
|
||||
color: #409EFF;
|
||||
}
|
||||
.img-box{
|
||||
width: 100px;
|
||||
height: auto;
|
||||
}
|
||||
.message-board-box{
|
||||
width: 100%;
|
||||
background-image:url('../../../assets/bg_board.jpg');
|
||||
background-size: 100% 100%;
|
||||
min-height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 18;
|
||||
}
|
||||
/deep/.ql-container{
|
||||
height: 80%;
|
||||
}
|
||||
.message-board-title{
|
||||
font-size: 30px;
|
||||
color: #F00;
|
||||
font-family: 'fangsong';
|
||||
font-weight: bolder;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
}
|
||||
.message-board-content{
|
||||
width: 80%;
|
||||
margin-left: 10%;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
background-color: rgba(255,255,255,0);
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||
}
|
||||
.eachPostComment{
|
||||
border: 1px solid #C0C0C0;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 2px 2px 3px #808080;
|
||||
padding: 10px 20px;
|
||||
background-color: #fff
|
||||
}
|
||||
.eachComment{
|
||||
background: #F5F5F5;
|
||||
margin-top: 10px;
|
||||
width: calc(100% - 120px);
|
||||
margin-left: 60px;
|
||||
border-radius: 5px;
|
||||
padding: 1px 10px 10px;
|
||||
}
|
||||
.replyLeaveMessage{color:#409EFF;cursor: pointer;margin-right: 10px;}
|
||||
.MBCcreatorNickName{display: inline-block;margin-right: 20px;margin-left:10px;font-size: 18px;color: #000;}
|
||||
.replyIcon{width: 16px;height: auto;margin-right: 30px;cursor: pointer;}
|
||||
.deleteIcon{width: 16px;height: auto;cursor:pointer;}
|
||||
.goSlide{position: fixed; left: 91%;top: 80px;width: 90px;}
|
||||
.popUpImgView{position: fixed;width: 100%;height: 100%;left: 0;top: 0;background: rgba(0,0,0,0.5);cursor: zoom-out;}
|
||||
.popUpImg{position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);min-width: 500px;max-height: 80%;height: auto;}
|
||||
</style>
|
||||
<style>
|
||||
.ql-size-small {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
.ql-size-large{
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.ql-size-huge{
|
||||
font-size: 2.5em;
|
||||
}
|
||||
</style>
|
||||
271
src/views/newMap/display/stationDiagram/index.vue
Normal file
271
src/views/newMap/display/stationDiagram/index.vue
Normal file
@ -0,0 +1,271 @@
|
||||
<template>
|
||||
<div class="mainContext">
|
||||
<map-common ref="mapCommon" @onSelect="clickEvent" @onMenu="contextmenu" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MapCommon from './jlmap/index';
|
||||
import parseStatus from '@/utils/parseStatus';
|
||||
import {mapGetters} from 'vuex';
|
||||
import { getDeviceMenuByDeviceType, MouseEvent } from '@/scripts/ConstDic';
|
||||
import deviceType from '@/jmapNew/constant/deviceType';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
export default {
|
||||
name: 'MapSystemDraft',
|
||||
components: {
|
||||
MapCommon
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
stomp: null,
|
||||
currentMap: null,
|
||||
mouseNum: 1,
|
||||
mode: '',
|
||||
selected: null,
|
||||
typeObj: {
|
||||
SECTION: '区段',
|
||||
SIGNAL: '信号机',
|
||||
SWITCH: '道岔',
|
||||
PSD: '屏蔽门',
|
||||
STATIONSTAND: '站台'
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('config', [
|
||||
'canvasId'
|
||||
]),
|
||||
group() {
|
||||
return this.$route.query.group;
|
||||
},
|
||||
userId() {
|
||||
return this.$store.state.user.id;
|
||||
},
|
||||
lineCode() {
|
||||
return this.$route.query.lineCode;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.socket.equipmentStatus': function (val) {
|
||||
if (val.length) {
|
||||
this.statusMessage(val);
|
||||
}
|
||||
},
|
||||
'$store.state.socket.deviceStateMessages': function (val) {
|
||||
if (val) {
|
||||
this.statusMessageNew(val);
|
||||
}
|
||||
},
|
||||
'$store.state.map.mousemove': function (val) {
|
||||
this.mousemove();
|
||||
},
|
||||
'$store.state.socket.simulationError': function (val) {
|
||||
if (val) {
|
||||
this.simulationError(val);
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.mode = this.$route.params.mode || '';
|
||||
this.currentMap = this.$refs.mapCommon;
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.$store.dispatch('config/resetCanvasOffset');
|
||||
}, 100);
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
async mapViewLoaded(loading) {
|
||||
this.currentMap.mapViewLoaded(loading);
|
||||
},
|
||||
async statusMessage(list) {
|
||||
await this.$store.dispatch('training/updateMapState', list);
|
||||
await this.$store.dispatch('socket/setEquipmentStatus');
|
||||
},
|
||||
async statusMessageNew(deviceStatus) {
|
||||
const list = parseStatus(deviceStatus);
|
||||
await this.$store.dispatch('training/updateMapState', list);
|
||||
await this.$store.dispatch('socket/setDeviceStateMessages');
|
||||
},
|
||||
simulationError() {
|
||||
this.$store.dispatch('map/clearJlmapTrainView');
|
||||
this.$store.dispatch('map/setTrainWindowShow', false);
|
||||
this.$confirm(this.$t('tip.getMapStateDataException'), this.$t('tip.hint'), {
|
||||
confirmButtonText: this.$t('global.confirm'),
|
||||
showCancelButton: false,
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
mousemove() {
|
||||
this.mouseNum = 1;
|
||||
},
|
||||
// 鼠标左键点击事件
|
||||
clickEvent(em) {
|
||||
this.$store.dispatch('map/setTrainWindowShow', false);
|
||||
var device = { _type: em.deviceType, _code: em.deviceCode, _event: MouseEvent.Left };
|
||||
|
||||
if (em.deviceType === 'StationStand' && this.lineCode === '01') {
|
||||
const menu = getDeviceMenuByDeviceType(device._type) || [];
|
||||
this.$store.dispatch('menuOperation/setPopMenu', { position: { x: em.clientX, y: em.clientY }, menu: menu });
|
||||
}
|
||||
|
||||
if (em.deviceCode) {
|
||||
device = this.getDeviceByEm(em);
|
||||
}
|
||||
this.selected = { ...device, _event: MouseEvent.Left };
|
||||
this.$emit('setSelected', this.selected);
|
||||
this.$store.dispatch('menuOperation/setSelected', {device: this.selected, subType: em.subType});
|
||||
this.$store.dispatch('menuOperation/setLeftClickCount');
|
||||
if (this.lineCode == '07') {
|
||||
this.$store.dispatch('menuOperation/setMenuChange', {device: device, subType: em.subType});
|
||||
}
|
||||
this.$store.dispatch('training/emitTipFresh');
|
||||
if (this.$store.state.map.selectDevice && this.$store.state.map.selectDevice.flag && device._type) {
|
||||
if (device._type.toUpperCase() == this.$store.state.map.selectDevice.type.toUpperCase()) {
|
||||
EventBus.$emit('selectDevice', device);
|
||||
} else {
|
||||
const name = this.typeObj[this.$store.state.map.selectDevice.type];
|
||||
const info = '选择的设备类型不正确' + (name ? `，请选择${name}类型` : '');
|
||||
this.$message.info(info);
|
||||
}
|
||||
}
|
||||
},
|
||||
// 鼠标右键点击事件
|
||||
contextmenu(em) {
|
||||
var menu = null;
|
||||
var device = null;
|
||||
const point = { x: em.clientX, y: em.clientY };
|
||||
if (em.subType === 'TrainWindow') {
|
||||
if (this.lineCode != '06') {
|
||||
device = { _type: deviceType.TrainWindow, code: em.deviceCode, _event: MouseEvent.Right };
|
||||
this.$store.dispatch('map/setTrainWindowShow', true);
|
||||
}
|
||||
} else if (em.subType === 'button' && em.deviceType === 'Station') { // 宁波一号线右键显示控制模式
|
||||
const equipment = this.getDeviceByEm(em);
|
||||
this.$store.dispatch('menuOperation/setSelected', {device:equipment, subType: em.subType});
|
||||
menu = getDeviceMenuByDeviceType('StationControl');
|
||||
this.$store.dispatch('menuOperation/setPopMenu', { position: point, menu: menu });
|
||||
this.$store.dispatch('training/emitTipFresh');
|
||||
device = this.getDeviceByEm(em);
|
||||
this.selected = { ...device, _event: MouseEvent.Right};
|
||||
this.$emit('setSelected', this.selected);
|
||||
return;
|
||||
} else if (em.subType === 'light' && em.deviceType === 'Station') { // 宁波一号线右键显示强制点灯
|
||||
const equipment = this.getDeviceByEm(em);
|
||||
this.$store.dispatch('menuOperation/setSelected', { device: equipment, subType: em.subType });
|
||||
menu = getDeviceMenuByDeviceType('StationLight');
|
||||
this.$store.dispatch('menuOperation/setPopMenu', { position: point, menu: menu });
|
||||
this.$store.dispatch('training/emitTipFresh');
|
||||
device = this.getDeviceByEm(em);
|
||||
this.selected = { ...device, _event: MouseEvent.Right};
|
||||
this.$emit('setSelected', this.selected);
|
||||
return;
|
||||
} else if (em.subType === 'preReset' && em.deviceType === 'Station') { // 宁波一号线右键显示计轴复位
|
||||
const equipment = this.getDeviceByEm(em);
|
||||
this.$store.dispatch('menuOperation/setSelected', { device: equipment, subType: em.subType });
|
||||
menu = getDeviceMenuByDeviceType('StationPreReset');
|
||||
this.$store.dispatch('menuOperation/setPopMenu', { position: point, menu: menu });
|
||||
this.$store.dispatch('training/emitTipFresh');
|
||||
device = this.getDeviceByEm(em);
|
||||
this.selected = { ...device, _event: MouseEvent.Right};
|
||||
this.$emit('setSelected', this.selected);
|
||||
return;
|
||||
} else if (em.subType === 'enabled' && em.deviceType === 'Switch') {
|
||||
menu = getDeviceMenuByDeviceType('Enabled');
|
||||
const equipment = this.getDeviceByEm(em);
|
||||
this.$store.dispatch('menuOperation/setSelected', { device: equipment, subType: em.subType });
|
||||
this.$store.dispatch('menuOperation/setPopMenu', { position: point, menu: menu });
|
||||
device = this.getDeviceByEm(em);
|
||||
this.selected = { ...device, _event: MouseEvent.Right};
|
||||
this.$emit('setSelected', this.selected);
|
||||
return;
|
||||
} else if (em.subType === 'enabled' && em.deviceType === 'Signal') {
|
||||
menu = getDeviceMenuByDeviceType('Enabled');
|
||||
const equipment = this.getDeviceByEm(em);
|
||||
this.$store.dispatch('menuOperation/setSelected', { device: equipment, subType: em.subType });
|
||||
this.$store.dispatch('menuOperation/setPopMenu', { position: point, menu: menu});
|
||||
device = this.getDeviceByEm(em);
|
||||
this.selected = { ...device, _event: MouseEvent.Right};
|
||||
this.$emit('setSelected', this.selected);
|
||||
return;
|
||||
} else if (em.deviceCode && !this.isScreen) {
|
||||
device = this.getDeviceByEm(em);
|
||||
}
|
||||
if (device) {
|
||||
device = this.getSelectedByLineCode(device);
|
||||
this.selected = { ...device, _event: MouseEvent.Right};
|
||||
this.$emit('setSelected', this.selected);
|
||||
if (!this.buttonOperation) {
|
||||
this.$store.dispatch('menuOperation/setSelected', {device: this.selected, subType: em.subType});
|
||||
if (!this.checkShouldPop(device)) {
|
||||
this.$store.dispatch('menuOperation/setPopMenu', { position: point, menu: null });
|
||||
} else {
|
||||
if (em.deviceType === 'StationStand' && this.lineCode === '01') {
|
||||
return;
|
||||
}
|
||||
menu = getDeviceMenuByDeviceType(device._type);
|
||||
this.$store.dispatch('menuOperation/setPopMenu', { position: point, menu: menu });
|
||||
}
|
||||
} else if (this.$route.query.ctc) {
|
||||
this.$store.dispatch('menuOperation/setSelected', {device: this.selected, subType: em.subType});
|
||||
menu = getDeviceMenuByDeviceType(device._type);
|
||||
this.$store.dispatch('menuOperation/setPopMenu', { position: point, menu: menu });
|
||||
}
|
||||
} else {
|
||||
menu = getDeviceMenuByDeviceType('Cancel');
|
||||
this.$store.dispatch('menuOperation/setPopMenu', { position: point, menu: menu });
|
||||
}
|
||||
this.$store.dispatch('training/emitTipFresh');
|
||||
},
|
||||
// 根据皮肤类型转换激活的菜单类型
|
||||
getSelectedByLineCode(device) {
|
||||
const switchSectionIsWitchLineCodeList = ['03'];
|
||||
const lineCode = this.$store.getters['map/lineCode'];
|
||||
if (switchSectionIsWitchLineCodeList.includes(lineCode) && device._type == deviceType.Section) {
|
||||
const section = this.$store.getters['map/getDeviceByCode'](device._code);
|
||||
if (section) {
|
||||
device = this.$store.getters['map/getDeviceByCode'](section.relSwitchCode);
|
||||
}
|
||||
}
|
||||
// 过滤道岔相关区段变成道岔model
|
||||
if (device._type == 'Section' && device.type == '03') {
|
||||
device = this.$store.getters['map/getDeviceByCode'](device.switch.code);
|
||||
}
|
||||
return device;
|
||||
},
|
||||
// 获取设备数据
|
||||
getDeviceByEm(em) {
|
||||
const device = this.$store.getters['map/getDeviceByCode'](em.deviceCode) || null;
|
||||
if (device) {
|
||||
device._viewVal = em.val;
|
||||
}
|
||||
return device;
|
||||
},
|
||||
checkShouldPop(device) {
|
||||
if (device) {
|
||||
if (device._type === 'Signal') {
|
||||
return device._viewVal === '3';
|
||||
} else if (device._type === 'StationControl' && this.lineCode == '01') { // 中控模式显示范围
|
||||
return device._viewVal === '1';
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
.mainContext {
|
||||
font-family: "Helvetica Neue ", Helvetica, "PingFang SC ", "Hiragino Sans GB ", "Microsoft YaHei ", "PingFang SC ", Arial, 'consolas';
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
413
src/views/newMap/display/stationDiagram/jlmap/index.vue
Normal file
413
src/views/newMap/display/stationDiagram/jlmap/index.vue
Normal file
@ -0,0 +1,413 @@
|
||||
<template>
|
||||
<div ref="jlmapCanvas" class="jlmap-canvas" :style="{ width: width+'px', height: height+'px' }" @mousemove="mousemove">
|
||||
<div v-show="maskOpen" class="mask" />
|
||||
<div :id="canvasId" class="display_canvas" />
|
||||
<progress-bar ref="progressBar" />
|
||||
<div v-if="zoomShow" class="zoom-view" :style="{ width: width +'px'}">
|
||||
<el-form :model="dataZoom" label-width="60px" size="mini" inline>
|
||||
<el-form-item label="偏 移:">
|
||||
<el-input v-model="dataZoom.offsetX" :disabled="true" style="width: 95px" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input v-model="dataZoom.offsetY" :disabled="true" style="width: 95px" />
|
||||
</el-form-item>
|
||||
<div style="display: inline-block">
|
||||
<span class="title" style="width: 90px; height: 28px; line-height: 30px;">鼠标偏移:</span>
|
||||
<el-form-item label="x" label-width="12px">
|
||||
<el-input ref="offsetX" v-model="offset.x" :disabled="true" style="width: 95px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="y" label-width="12px">
|
||||
<el-input v-model="offset.y" :disabled="true" style="width: 95px" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item label="缩 放:">
|
||||
<el-input v-model="dataZoom.scaleRate" :disabled="true" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<training-tips ref="trainingTips" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import localStore from 'storejs';
|
||||
import Jlmap from '@/jmapNew/map';
|
||||
import ProgressBar from '@/views/components/progressBar/index';
|
||||
import { TrainingMode } from '@/scripts/ConstDic';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
import Theme from '@/jmapNew/theme/factory';
|
||||
import TrainingTips from '@/views/newMap/mapsystemNew/plugin/trainingtip';
|
||||
export default {
|
||||
name: 'JlmapVisual',
|
||||
components: {
|
||||
ProgressBar,
|
||||
TrainingTips
|
||||
},
|
||||
props: {
|
||||
noMenu: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
dataZoom: {
|
||||
offsetX: '0',
|
||||
offsetY: '0',
|
||||
scaleRate: '1'
|
||||
},
|
||||
offset: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
sectionActive: false,
|
||||
operate: null,
|
||||
concentrationStationList: [],
|
||||
showMode: '02',
|
||||
canvasId:'',
|
||||
previewOrMapDraw: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('training', [
|
||||
'mode'
|
||||
]),
|
||||
...mapGetters('menuOperation', [
|
||||
'buttonOperation'
|
||||
]),
|
||||
width() {
|
||||
return this.$store.state.config.width;
|
||||
},
|
||||
height() {
|
||||
return this.$store.state.config.height;
|
||||
},
|
||||
zoomShow() {
|
||||
if (this.mode == TrainingMode.EDIT || this.mode == TrainingMode.MAP_EDIT) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
showZoom() {
|
||||
return this.$route.path.includes('bigSplitScreen');
|
||||
},
|
||||
maskOpen() {
|
||||
return this.$store.state.config.maskOpen;
|
||||
},
|
||||
isDesign() {
|
||||
return this.$route.path.indexOf('mapPreviewNew') !== -1 || this.$route.path.indexOf('map/draw') !== -1;
|
||||
},
|
||||
lineCode() {
|
||||
return this.$store.getters['map/lineCode'];
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.config.canvasSizeCount': function (val) {
|
||||
this.resetSize();
|
||||
},
|
||||
'$store.state.menuOperation.magnifyCount': function () {
|
||||
this.setMagnify();
|
||||
},
|
||||
'$store.state.menuOperation.shrinkCount': function () {
|
||||
this.setShrink();
|
||||
},
|
||||
$route() {
|
||||
this.mapViewLoaded(true);
|
||||
},
|
||||
'$store.state.socket.simulationReset': function (val) { // 仿真结束标识
|
||||
if (val) {
|
||||
this.simulationReset(val);
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
EventBus.$on('viewLoading', (loading) => {
|
||||
this.mapViewLoaded(loading);
|
||||
});
|
||||
EventBus.$on('viewProgressAt', (percentage) => {
|
||||
this.mapViewProgressAt(percentage);
|
||||
});
|
||||
EventBus.$on('refresh', () => {
|
||||
this.refresh(this.$store.state.map.map);
|
||||
});
|
||||
this.canvasId = ['map', (Math.random().toFixed(5)) * 100000].join('_');
|
||||
this.$store.dispatch('config/setCurrentCancasId', { id: this.canvasId });
|
||||
},
|
||||
mounted() {
|
||||
this.initLoadPage();
|
||||
},
|
||||
beforeDestroy() {
|
||||
EventBus.$off('refresh');
|
||||
EventBus.$off('viewLoading');
|
||||
EventBus.$off('viewProgressAt');
|
||||
this.$store.dispatch('menuOperation/resetRequestList');
|
||||
this.$store.dispatch('socket/setSimulationReset');
|
||||
if (this.$jlmap) {
|
||||
this.$jlmap.dispose();
|
||||
Vue.prototype.$jlmap = null;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 初始化jlmap
|
||||
initLoadPage() {
|
||||
document.getElementById(this.canvasId).oncontextmenu = function (e) {
|
||||
return false;
|
||||
};
|
||||
// 默认个人地图绘制可以滚轮放大缩小 其他地图显示不允许此操作
|
||||
const path = window.location.href;
|
||||
const mouseWheelFlag = true;
|
||||
this.previewOrMapDraw = false;
|
||||
if (path.indexOf('map/draw') !== -1 || path.indexOf('mapPreviewNew') !== -1 || path.indexOf('pictureDraw') !== -1) {
|
||||
this.previewOrMapDraw = true;
|
||||
}
|
||||
const prdType = this.$store.state.training.prdType;
|
||||
const showMode = { '01': '03', '02': '02'}[prdType] || '';
|
||||
|
||||
Vue.prototype.$theme = new Theme();
|
||||
this.selfJlmap = Vue.prototype.$jlmap = new Jlmap({
|
||||
dom: document.getElementById(this.canvasId),
|
||||
config: {
|
||||
renderer: 'canvas',
|
||||
width: this.width,
|
||||
height: this.height
|
||||
},
|
||||
options: {
|
||||
scaleRate: 1,
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
zoomOnMouseWheel: mouseWheelFlag
|
||||
},
|
||||
showConfig: {
|
||||
prdType: prdType,
|
||||
previewOrMapDraw: this.previewOrMapDraw,
|
||||
showMode: showMode
|
||||
},
|
||||
methods: {
|
||||
dataLoaded: this.handleDataLoaded,
|
||||
viewLoaded: this.handleViewLoaded,
|
||||
stateLoaded: this.handleStateLoaded,
|
||||
stateUpdate: this.handleStateUpdate,
|
||||
initJlmap: this.handleInitJlmap
|
||||
}
|
||||
});
|
||||
this.$jlmap.on('dataZoom', this.onDataZoom, this);
|
||||
this.$jlmap.on('selected', this.onSelected, this);
|
||||
this.$jlmap.on('contextmenu', this.onContextMenu, this);
|
||||
if (this.$route.path.startsWith('/design/usermap/map/draw')) {
|
||||
this.$jlmap.on('keyboard', this.onKeyboard, this);
|
||||
} else {
|
||||
this.$jlmap.on('keyboard', this.onSimulationKeyboard, this);
|
||||
}
|
||||
window.document.oncontextmenu = function () {
|
||||
return false;
|
||||
};
|
||||
},
|
||||
// 重置jlmap宽高
|
||||
resetSize() {
|
||||
this.$nextTick(() => {
|
||||
this.$jlmap && this.$jlmap.resize({ width: this.width, height: this.height });
|
||||
setTimeout(() => {
|
||||
this.$store.dispatch('config/resetCanvasOffset');
|
||||
this.$store.dispatch('training/emitTipFresh');
|
||||
}, 100);
|
||||
});
|
||||
},
|
||||
// 设置显示图层
|
||||
setLevelVisible(levels) {
|
||||
this.$jlmap && this.$jlmap.setLevelVisible(levels);
|
||||
},
|
||||
// 设置显示中心
|
||||
setCenter(deviceCode) {
|
||||
this.$jlmap && this.$jlmap.setCenter(deviceCode);
|
||||
},
|
||||
// 地图数据加载完成
|
||||
handleDataLoaded() {
|
||||
this.$store.dispatch('map/mapDataLoaded');
|
||||
const concentrationStationList = [];
|
||||
this.$store.state.map.map.stationList.forEach(item => {
|
||||
if (item.centralized) {
|
||||
concentrationStationList.push({value: item.code, name: item.name});
|
||||
}
|
||||
});
|
||||
this.concentrationStationList = concentrationStationList;
|
||||
this.$store.dispatch('map/setTrainWindowShow', this.previewOrMapDraw);
|
||||
},
|
||||
// 地图视图加载完成
|
||||
handleViewLoaded() {
|
||||
console.log('handleViewLoaded');
|
||||
this.$store.dispatch('map/mapViewLoaded');
|
||||
this.mapViewLoaded(false);
|
||||
},
|
||||
// 地图状态加载完成
|
||||
handleStateLoaded() {
|
||||
this.mapViewLoaded(false);
|
||||
},
|
||||
// 地图状态更新
|
||||
handleStateUpdate(list) {
|
||||
this.$store.dispatch('map/mapStateLoaded');
|
||||
},
|
||||
handleInitJlmap() {
|
||||
this.$store.dispatch('map/initJlmapLoaded');
|
||||
},
|
||||
// 视图参数改变
|
||||
handleOptionsUpdate(options) {
|
||||
},
|
||||
// 键盘快捷键事件
|
||||
onKeyboard(hook) {
|
||||
switch (hook) {
|
||||
case 'Ctrl_Z': this.$store.dispatch('map/setRevocation');
|
||||
break;
|
||||
case 'Ctrl_Y': this.$store.dispatch('map/setRecover');
|
||||
break;
|
||||
case 'Delete': this.$store.dispatch('map/setDeleteCount');
|
||||
break;
|
||||
case 'Update':
|
||||
this.$refs.offsetX.focus();
|
||||
this.$store.dispatch('map/setUpdateCount');
|
||||
break;
|
||||
}
|
||||
},
|
||||
onSimulationKeyboard(hook) {
|
||||
switch (hook) {
|
||||
case 'Update': this.$store.dispatch('map/setKeyboardEnter');
|
||||
break;
|
||||
case 'Tab': EventBus.$emit('CheckFaultModeEvent');
|
||||
break;
|
||||
}
|
||||
},
|
||||
simulationReset() {
|
||||
this.$store.dispatch('socket/setSimulationStart');// 设置仿真状态-结束
|
||||
this.$store.dispatch('map/initClearTrainData'); // 清除战场图列车显示
|
||||
this.$store.dispatch('map/setTrainWindowShow', false); // 结束清除车次窗显示
|
||||
this.$store.dispatch('training/over'); // 设置实训状态-结束
|
||||
this.$store.dispatch('map/resetActiveTrainList'); // 清除活动列车列表
|
||||
this.$store.dispatch('training/setMapDefaultState'); // 设置默认状态
|
||||
},
|
||||
// 视图缩放事件
|
||||
onDataZoom(dataZoom) {
|
||||
this.dataZoom.offsetX = dataZoom.offsetX.toFixed(1) + '';
|
||||
this.dataZoom.offsetY = dataZoom.offsetY.toFixed(1) + '';
|
||||
this.dataZoom.scaleRate = dataZoom.scaleRate + '';
|
||||
this.offset.x = this.dataZoom.offsetX;
|
||||
this.offset.y = this.dataZoom.offsetY;
|
||||
|
||||
if (this.lineCode) {
|
||||
const param = {
|
||||
scaleRate: this.dataZoom.scaleRate,
|
||||
offsetY: this.dataZoom.offsetY,
|
||||
offsetX: this.dataZoom.offsetX,
|
||||
lineCode: this.lineCode
|
||||
};
|
||||
this.$store.commit('map/setDataZoom', this.dataZoom);
|
||||
localStore.set(`scaleRate_${this.lineCode}`, JSON.stringify(param)); // 保存缩放倍数
|
||||
}
|
||||
// 刷新实训提示位置
|
||||
this.$store.dispatch('training/emitTipFresh');
|
||||
},
|
||||
// 鼠标左键点击事件
|
||||
onSelected(em) {
|
||||
this.$emit('onSelect', em);
|
||||
},
|
||||
// 鼠标右键点击事件
|
||||
onContextMenu(em) {
|
||||
this.$emit('onMenu', em);
|
||||
},
|
||||
// 设置地图加载状态
|
||||
mapViewLoaded(loading) {
|
||||
this.loading = loading;
|
||||
if (loading) {
|
||||
this.$refs.progressBar && this.$refs.progressBar.start();
|
||||
} else {
|
||||
this.$refs.progressBar && this.$refs.progressBar.end(true);
|
||||
}
|
||||
},
|
||||
// 设置地图加载进度
|
||||
mapViewProgressAt(percentage) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.progressBar.progressAt(percentage);
|
||||
});
|
||||
},
|
||||
// 设置新的地图数据
|
||||
setMap(map) {
|
||||
this.$jlmap.setMap(map, this.$store.state.map.mapDevice, {routeData:this.$store.state.map.routeData, autoReentryData: this.$store.state.map.autoReentryData});
|
||||
},
|
||||
// 刷新地图数据
|
||||
refresh(map) {
|
||||
},
|
||||
// 缩小
|
||||
setShrink() {
|
||||
this.$jlmap.setOptions({type: 'zoom', scale: -1});
|
||||
},
|
||||
// 放大
|
||||
setMagnify() {
|
||||
this.$jlmap.setOptions({type: 'zoom', scale: 1});
|
||||
},
|
||||
mousemove(e) {
|
||||
this.offset = {
|
||||
x: e.offsetX + Number(this.dataZoom.offsetX),
|
||||
y: e.offsetY + Number(this.dataZoom.offsetY)
|
||||
};
|
||||
this.$store.dispatch('map/setMousemove');
|
||||
},
|
||||
// bigSplitScreen.vue changeSplit 中调用 分屏切换
|
||||
setOffset(data, num, sum, obj) {
|
||||
this.$jlmap.switchScreen(data, num, sum, obj);
|
||||
}
|
||||
}
|
||||
};
|
||||
</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;
|
||||
background: #000;
|
||||
float: left;
|
||||
}
|
||||
.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>
|
||||
@ -1,32 +1,50 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="isShow" class="terminalList">
|
||||
<div v-for="(eachTerminal,index) in terminalList" :key="index" :class="active==index?'eachTerminal active':'eachTerminal'" @click="eachTerminal.click(index)">{{ eachTerminal.name }}</div>
|
||||
<div v-for="(eachTerminal,index) in terminalList" :key="index" :class="active==eachTerminal.code?'eachTerminal active':'eachTerminal'" @click="eachTerminal.click(eachTerminal.code)">{{ eachTerminal.name }}</div>
|
||||
</div>
|
||||
<DispatchCmd v-if="datie" ref="dispatchCmd" @close="close" />
|
||||
<DispatcherLoger v-if="datie" ref="dispatcherLoger" @close="close" />
|
||||
<message-board v-if="active === 'messageBoard'" ref="messageBoard" />
|
||||
<jl3d-drive v-if="active === 'drivingPlan'" ref="jl3dDrive" />
|
||||
<jl3d-device v-if="active === 'jl3dModle'" ref="jl3dModle" />
|
||||
<jl3d-passflow v-if="active === 'cctvView'" ref="cctvView" />
|
||||
<ibp-plate v-show="active === 'ibp'" ref="ibpPlate" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import DispatchCmd from '@/views/dispatcherStationManage/dispatchCmd';
|
||||
import DispatcherLoger from '@/views/dispatcherLoger/index';
|
||||
import MessageBoard from './messageBoard';
|
||||
import {mapGetters} from 'vuex';
|
||||
import Jl3dDrive from '@/views/jlmap3d/drive/jl3ddrive';
|
||||
import Jl3dDevice from '@/views/jlmap3d/device/jl3ddevice';
|
||||
import Jl3dPassflow from '@/views/jlmap3d/passflow/jl3dpassflow';
|
||||
import IbpPlate from '@/views/ibp/ibpsystem/index';
|
||||
export default {
|
||||
name:'TerminalList',
|
||||
components: {
|
||||
DispatchCmd,
|
||||
DispatcherLoger
|
||||
DispatcherLoger,
|
||||
MessageBoard,
|
||||
Jl3dDevice,
|
||||
Jl3dDrive,
|
||||
Jl3dPassflow,
|
||||
IbpPlate
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
terminalList:[],
|
||||
active:0,
|
||||
centralizedStationList: [],
|
||||
centralizedStationMap: {},
|
||||
commonTerminal: [
|
||||
{
|
||||
name: '现地工作站',
|
||||
code: 'localWork',
|
||||
roleList: ['STATION_SUPERVISOR', 'STATION_ASSISTANT', 'STATION_MASTER', 'STATION_SIGNALER', 'STATION_PASSENGER',
|
||||
'STATION_SWITCH_MAN', 'STATION_FACILITATOR', 'STATION_WORKER', 'DEVICE_MANAGER', 'TRAIN_MASTER'],
|
||||
click: this.noEvent
|
||||
click: this.localWorkShow
|
||||
},
|
||||
{
|
||||
name: '行调工作站',
|
||||
@ -69,7 +87,7 @@ export default {
|
||||
code: 'localWork',
|
||||
roleList: ['STATION_SUPERVISOR', 'STATION_ASSISTANT', 'STATION_MASTER', 'STATION_SIGNALER', 'STATION_PASSENGER',
|
||||
'STATION_SWITCH_MAN', 'STATION_FACILITATOR', 'STATION_WORKER', 'DEVICE_MANAGER', 'TRAIN_MASTER'],
|
||||
click: this.noEvent
|
||||
click: this.localWorkShow
|
||||
},
|
||||
{
|
||||
name: '行调工作站',
|
||||
@ -105,7 +123,7 @@ export default {
|
||||
name: 'IBP盘',
|
||||
code: 'ibp',
|
||||
roleList: ['STATION_SUPERVISOR'],
|
||||
click: this.noEvent
|
||||
click: this.ibpShow
|
||||
},
|
||||
{
|
||||
name: '数字沙盘',
|
||||
@ -116,14 +134,21 @@ export default {
|
||||
{ // {label:'留言板', name:'messageBoard', click:this.messageBoard, isShow:false},
|
||||
name: '留言板',
|
||||
code: 'messageBoard',
|
||||
roleList: [''],
|
||||
click: this.noEvent
|
||||
roleList: ['DISPATCHER', 'STATION_SUPERVISOR', 'STATION_ASSISTANT', 'STATION_MASTER', 'STATION_SIGNALER', 'STATION_PASSENGER',
|
||||
'STATION_SWITCH_MAN', 'STATION_FACILITATOR', 'STATION_WORKER', 'DEVICE_MANAGER', 'TRAIN_MASTER'],
|
||||
click: this.messageBoardShow
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
...mapGetters('map', [
|
||||
'sectionList',
|
||||
'signalList',
|
||||
'trainWindowList'
|
||||
|
||||
]),
|
||||
// 设备数据不显示
|
||||
isShow() {
|
||||
return !this.$route.query.projectDevice;
|
||||
@ -141,11 +166,28 @@ export default {
|
||||
},
|
||||
roles() {
|
||||
return this.$store.state.training.roles;
|
||||
},
|
||||
roleDeviceCode() {
|
||||
return this.$store.state.trainingNew.roleDeviceCode;
|
||||
},
|
||||
mapData() {
|
||||
return this.$store.state.map.map;
|
||||
},
|
||||
mapDevice() {
|
||||
return this.$store.state.map.mapDevice;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.training.roles': function (val) {
|
||||
this.initTerminalList();
|
||||
},
|
||||
'$store.state.map.map': function (map) {
|
||||
if (map) {
|
||||
this.setCentralizedStationList(map); // 获取集中站列表
|
||||
}
|
||||
},
|
||||
'$store.state.map.mapViewLoadedCount': function () { // 地图视图加载完成标识
|
||||
this.initPictureShow();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -159,26 +201,118 @@ export default {
|
||||
} else {
|
||||
currentType = 'subway';
|
||||
}
|
||||
console.log(this.roles, this.$store.state.training.roles, '------init');
|
||||
this.terminalMap[currentType].forEach(item => {
|
||||
if (item.roleList.includes(this.roles)) {
|
||||
this.terminalList.push(item);
|
||||
}
|
||||
});
|
||||
},
|
||||
noEvent(index) {
|
||||
this.active = index;
|
||||
noEvent(code) {
|
||||
this.active = code;
|
||||
},
|
||||
schedulingPlan(index) {
|
||||
this.active = index;
|
||||
schedulingPlan(code) {
|
||||
this.active = code;
|
||||
this.$refs.dispatcherLoger.doShow();
|
||||
},
|
||||
dispatchingCommand(index) {
|
||||
this.active = index;
|
||||
dispatchingCommand(code) {
|
||||
this.active = code;
|
||||
this.$refs.dispatchCmd.doShow();
|
||||
},
|
||||
messageBoardShow(code) {
|
||||
this.active = code;
|
||||
},
|
||||
ibpShow(code) {
|
||||
console.log(this.roleDeviceCode, '************');
|
||||
this.active = code;
|
||||
this.$refs.ibpPlate.show(this.roleDeviceCode, '');
|
||||
},
|
||||
close() {
|
||||
this.active = 0;
|
||||
},
|
||||
setCentralizedStationList(map) {
|
||||
this.centralizedStationList = [];
|
||||
(map.stationList || []).forEach(item => {
|
||||
if (item.centralized) {
|
||||
this.centralizedStationList.push({value: item.code, name: item.name});
|
||||
this.centralizedStationMap[item.code] = item.code;
|
||||
item.chargeStationCodeList && item.chargeStationCodeList.length && item.chargeStationCodeList.forEach(ele => {
|
||||
this.centralizedStationMap[ele] = item.code;
|
||||
});
|
||||
}
|
||||
});
|
||||
if (this.centralizedStationList.length && !this.showStation) {
|
||||
this.showStation = this.centralizedStationList[0].value;
|
||||
}
|
||||
},
|
||||
setShow() {
|
||||
this.$jlmap.amendDevice([...this.sectionList, ...this.signalList, ...this.trainWindowList]);
|
||||
this.setShowStation('');
|
||||
},
|
||||
initPictureShow() {
|
||||
const localWorkRoleList = ['STATION_SUPERVISOR', 'STATION_ASSISTANT', 'STATION_MASTER', 'STATION_SIGNALER', 'STATION_PASSENGER', 'STATION_SWITCH_MAN',
|
||||
'STATION_FACILITATOR', 'STATION_WORKER', 'DEVICE_MANAGER', 'TRAIN_MASTER'];
|
||||
if (localWorkRoleList.includes(this.roles)) {
|
||||
this.localWorkShow();
|
||||
} else if (this.roles === 'DISPATCHER') {
|
||||
this.dispatchWorkShow();
|
||||
} else if (this.roles === 'MAINTAINER') {
|
||||
// 通号
|
||||
}
|
||||
|
||||
},
|
||||
switchStationMode(stationCode) {
|
||||
this.showStation = this.centralizedStationMap[stationCode];
|
||||
this.setShowStation(this.showStation);
|
||||
},
|
||||
setShowStation(stationCode) {
|
||||
const showStation = this.centralizedStationMap[stationCode];
|
||||
const list = [];
|
||||
for (const key in this.mapDevice) {
|
||||
list.push(this.mapDevice[key]);
|
||||
}
|
||||
this.$jlmap.updateShowStation(list, showStation);
|
||||
this.$jlmap.setCenter(showStation);
|
||||
},
|
||||
dispatchWorkShow() {
|
||||
this.$jlmap.amendDevice([...this.sectionList, ...this.signalList, ...this.trainWindowList]);
|
||||
const list = [];
|
||||
for (const key in this.mapDevice) {
|
||||
list.push(this.mapDevice[key]);
|
||||
}
|
||||
this.$jlmap.updateShowStation(list);
|
||||
},
|
||||
localWorkShow(code) {
|
||||
this.active = code;
|
||||
if (this.lineCode === '14') {
|
||||
const list = [];
|
||||
this.$jlmap.setMap(this.mapData, this.mapDevice, {routeData:this.$store.state.map.routeData, autoReentryData: this.$store.state.map.autoReentryData});
|
||||
for (const key in this.mapDevice) {
|
||||
list.push(this.mapDevice[key]);
|
||||
}
|
||||
this.$jlmap.updateShowMode(list, '02');
|
||||
}
|
||||
if (this.mapData && this.mapData.pictureList) {
|
||||
const picture = this.mapData.pictureList.find(picture => picture.stationCode === this.roleDeviceCode && picture.type === 'chainStation');
|
||||
if (picture) {
|
||||
const list = [];
|
||||
const deviceList = [];
|
||||
for (const key in this.mapDevice) {
|
||||
list.push(this.mapDevice[key]);
|
||||
deviceList.push(key);
|
||||
}
|
||||
this.$jlmap.updateShowStation(list);
|
||||
this.$store.dispatch('map/setPictureDeviceMap', picture.deviceMap);
|
||||
this.$jlmap.updatePicture(deviceList);
|
||||
this.$jlmap.updateTransform(picture.scaling, picture.origin);
|
||||
this.$store.dispatch('map/setShowCentralizedStationCode', this.centralizedStationMap[this.roleDeviceCode]);
|
||||
} else {
|
||||
this.$jlmap.amendDevice([...this.sectionList, ...this.signalList, ...this.trainWindowList]);
|
||||
this.switchStationMode(this.roleDeviceCode);
|
||||
}
|
||||
} else {
|
||||
this.$jlmap.amendDevice([...this.sectionList, ...this.signalList, ...this.trainWindowList]);
|
||||
this.switchStationMode(this.roleDeviceCode);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -195,6 +329,7 @@ export default {
|
||||
padding-right: 1px;
|
||||
background: #fff;
|
||||
border-radius: 5px 0px 0px 5px;
|
||||
z-index: 2000;
|
||||
}
|
||||
.eachTerminal{
|
||||
padding: 8px 0px;
|
||||
|
||||
72
src/views/newMap/display/terminals/dispatchWork.vue
Normal file
72
src/views/newMap/display/terminals/dispatchWork.vue
Normal file
@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div>
|
||||
<component :is="menus" :selected="selected" @setSelected="setSelected" />
|
||||
<station-diagram ref="stationDiagram" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StationDiagram from '../stationDiagram/index';
|
||||
import {mapGetters} from 'vuex';
|
||||
export default {
|
||||
name: 'DispatchWork',
|
||||
components: {
|
||||
StationDiagram
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
menus: null,
|
||||
selected: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'sectionList',
|
||||
'signalList',
|
||||
'trainWindowList'
|
||||
]),
|
||||
mapData() {
|
||||
return this.$store.state.map.map;
|
||||
},
|
||||
mapDevice() {
|
||||
return this.$store.state.map.mapDevice;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 地图数据加载完毕
|
||||
'$store.state.map.mapDataLoadedCount': function () {
|
||||
const lineCode = this.$jlmap.lineCode;
|
||||
if (lineCode) {
|
||||
this.menus = this.$theme.loadMenuComponent(lineCode);
|
||||
}
|
||||
},
|
||||
'$store.state.map.initJlmapLoadedCount': function (val) {
|
||||
console.log(val, '11111111111');
|
||||
this.handleDispatchWorkData();
|
||||
},
|
||||
mapDevice() {
|
||||
return this.$store.state.map.mapDevice;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setSelected(val) {
|
||||
this.selected = val;
|
||||
},
|
||||
handleDispatchWorkData() {
|
||||
const logicData = {routeData:this.$store.state.map.routeData, autoReentryData: this.$store.state.map.autoReentryData};
|
||||
const repaint = this.$store.state.map.initJlmapLoadedCount === 1;
|
||||
this.$jlmap.setMap(this.mapData, this.mapDevice, logicData, repaint);
|
||||
this.$jlmap.amendDevice([...this.sectionList, ...this.signalList, ...this.trainWindowList]);
|
||||
const list = [];
|
||||
for (const key in this.mapDevice) {
|
||||
list.push(this.mapDevice[key]);
|
||||
}
|
||||
this.$jlmap.updateShowStation(list);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
168
src/views/newMap/display/terminals/index.vue
Normal file
168
src/views/newMap/display/terminals/index.vue
Normal file
@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<div>
|
||||
<dispatcher-work v-if="picture === 'dispatchWork'" ref="dispatcherWork" />
|
||||
<local-work v-else-if="picture === 'localWork'" ref="localWork" :centralized-station-map="centralizedStationMap" />
|
||||
<message-board v-else-if="picture === 'messageBoard'" ref="messageBoard" />
|
||||
<message-board v-else-if="picture === 'messageBoard'" ref="messageBoard" />
|
||||
<jl3d-drive v-else-if="picture === 'drivingPlan'" ref="jl3dDrive" />
|
||||
<jl3d-device v-else-if="picture === 'jl3dModle'" ref="jl3dModle" />
|
||||
<jl3d-passflow v-else-if="picture === 'cctvView'" ref="cctvView" />
|
||||
<ibp-plate v-else-if="picture === 'ibp'" ref="ibpPlate" />
|
||||
<DispatchCmd v-if="datie" ref="dispatchCmd" @close="close" />
|
||||
<DispatcherLoger v-if="datie" ref="dispatcherLoger" @close="close" />
|
||||
<terminal-menu v-if="menuShow" ref="terminalMenu" @pictureChange="pictureChange" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getSimulationMemberList, getAllSimulationUser} from '@/api/simulation';
|
||||
import {getToken} from '@/utils/auth';
|
||||
import {creatSubscribe, clearSubscribe, displayTopic, getTopic} from '@/utils/stomp';
|
||||
import DispatcherWork from './dispatchWork';
|
||||
import LocalWork from './localWork';
|
||||
import TerminalMenu from './terminalMenu';
|
||||
import MessageBoard from '../messageBoard';
|
||||
import DispatchCmd from '@/views/dispatcherStationManage/dispatchCmd';
|
||||
import DispatcherLoger from '@/views/dispatcherLoger/index';
|
||||
import Jl3dDrive from '@/views/jlmap3d/drive/jl3ddrive';
|
||||
import Jl3dDevice from '@/views/jlmap3d/device/jl3ddevice';
|
||||
import Jl3dPassflow from '@/views/jlmap3d/passflow/jl3dpassflow';
|
||||
import IbpPlate from '@/views/ibp/ibpsystem/index';
|
||||
export default {
|
||||
name: 'Index',
|
||||
components: {
|
||||
DispatcherWork,
|
||||
LocalWork,
|
||||
TerminalMenu,
|
||||
MessageBoard,
|
||||
DispatchCmd,
|
||||
DispatcherLoger,
|
||||
Jl3dDevice,
|
||||
Jl3dDrive,
|
||||
Jl3dPassflow,
|
||||
IbpPlate
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
picture: '',
|
||||
menuShow: true,
|
||||
centralizedStationList: [],
|
||||
centralizedStationMap: {}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
group() {
|
||||
return this.$route.query.group;
|
||||
},
|
||||
lineCode() {
|
||||
return this.$route.query.lineCode;
|
||||
},
|
||||
userId() {
|
||||
return this.$store.state.user.id;
|
||||
},
|
||||
datie() {
|
||||
return ['16', '19'].includes(this.$route.query.lineCode);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.map.mapViewLoadedCount': function (val) { // 地图视图加载完成标识 开始加载默认状态
|
||||
this.subscribe();
|
||||
},
|
||||
'$store.state.socket.memberChangeCount': function () { // 仿真成员变更
|
||||
this.initMemberUserInfo();
|
||||
},
|
||||
'$store.state.socket.simulationRoleList': function (val) {
|
||||
if (val && val.length) {
|
||||
this.handlerMemberOnOff(val);
|
||||
}
|
||||
},
|
||||
'$store.state.map.map': function (map) {
|
||||
try {
|
||||
if (map) {
|
||||
this.initMemberUserInfo();
|
||||
this.setCentralizedStationList(map); // 获取集中站列表
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('[ERROR] ', error);
|
||||
this.mapViewLoaded(false);
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$store.commit('training/notifyGetCommandDefinition', this.lineCode); // 获取指令列表
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clearSubscribe();
|
||||
this.$store.dispatch('map/mapClear');
|
||||
this.$store.dispatch('map/initJlmapLoadedCountClear');
|
||||
this.$store.dispatch('socket/clearSimulationRoleList');
|
||||
},
|
||||
methods: {
|
||||
async initMemberUserInfo() {
|
||||
try {
|
||||
let memberResp = '';
|
||||
let userResp = '';
|
||||
memberResp = await getSimulationMemberList(this.group);
|
||||
userResp = await getAllSimulationUser(this.group);
|
||||
this.$store.dispatch('training/setMemberList', {memberList: memberResp.data, userId: this.userId});
|
||||
this.$store.dispatch('training/setSimulationUserList', userResp.data);
|
||||
} catch {
|
||||
this.$messageBox('获取仿真成员或用户列表失败！');
|
||||
}
|
||||
},
|
||||
async subscribe() { // 根据显示端分别订阅
|
||||
this.clearSubscribe();
|
||||
// if (this.picture === 'localWork' || this.picture === 'dispatchWork') {
|
||||
// const header = {group: this.group || '', 'X-Token': getToken()};
|
||||
// await creatSubscribe(`${displayTopic}\/${this.group}`, header);
|
||||
// await creatSubscribe(getTopic('STATE', this.group), header);
|
||||
// if (this.picture === 'ctc') {
|
||||
// await creatSubscribe(getTopic('CTC', this.group), header);
|
||||
// }
|
||||
// await this.$store.dispatch('training/setHasSubscribed');
|
||||
// }
|
||||
const header = {group: this.group || '', 'X-Token': getToken()};
|
||||
await creatSubscribe(`${displayTopic}\/${this.group}`, header);
|
||||
await creatSubscribe(getTopic('STATE', this.group), header);
|
||||
if (this.picture === 'ctc') {
|
||||
await creatSubscribe(getTopic('CTC', this.group), header);
|
||||
}
|
||||
await this.$store.dispatch('training/setHasSubscribed');
|
||||
},
|
||||
clearSubscribe() {
|
||||
clearSubscribe(`${displayTopic}\/${this.group}`);
|
||||
clearSubscribe(getTopic('STATE', this.group));
|
||||
if (this.picture === 'ctc') {
|
||||
clearSubscribe(getTopic('CTC', this.group));
|
||||
}
|
||||
},
|
||||
handlerMemberOnOff(data) { // 处理仿真成员上下线
|
||||
this.$store.dispatch('training/updateMemberAndUser', {simulationUserList: data, userId: this.userId});
|
||||
},
|
||||
pictureChange(val) {
|
||||
console.log(val, '1111');
|
||||
this.picture = val;
|
||||
},
|
||||
setCentralizedStationList(map) {
|
||||
this.centralizedStationList = [];
|
||||
(map.stationList || []).forEach(item => {
|
||||
if (item.centralized) {
|
||||
this.centralizedStationList.push({value: item.code, name: item.name});
|
||||
this.centralizedStationMap[item.code] = item.code;
|
||||
item.chargeStationCodeList && item.chargeStationCodeList.length && item.chargeStationCodeList.forEach(ele => {
|
||||
this.centralizedStationMap[ele] = item.code;
|
||||
});
|
||||
}
|
||||
});
|
||||
if (this.centralizedStationList.length && !this.showStation) {
|
||||
this.showStation = this.centralizedStationList[0].value;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
117
src/views/newMap/display/terminals/localWork.vue
Normal file
117
src/views/newMap/display/terminals/localWork.vue
Normal file
@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div>
|
||||
<component :is="menus" :selected="selected" @setSelected="setSelected" />
|
||||
<station-diagram ref="stationDiagram" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StationDiagram from '../stationDiagram/index';
|
||||
import {mapGetters} from 'vuex';
|
||||
export default {
|
||||
name: 'LocalWork',
|
||||
components: {
|
||||
StationDiagram
|
||||
},
|
||||
props: {
|
||||
centralizedStationMap:{
|
||||
type: Object,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
menus: null,
|
||||
selected: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'sectionList',
|
||||
'signalList',
|
||||
'trainWindowList'
|
||||
|
||||
]),
|
||||
mapData() {
|
||||
return this.$store.state.map.map;
|
||||
},
|
||||
mapDevice() {
|
||||
return this.$store.state.map.mapDevice;
|
||||
},
|
||||
roleDeviceCode() {
|
||||
return this.$store.state.trainingNew.roleDeviceCode;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 地图数据加载完毕
|
||||
'$store.state.map.mapDataLoadedCount': function () {
|
||||
const lineCode = this.$jlmap.lineCode;
|
||||
if (lineCode) {
|
||||
this.menus = this.$theme.loadMenuComponent(lineCode);
|
||||
}
|
||||
},
|
||||
'$store.state.map.initJlmapLoadedCount': function (val) {
|
||||
this.handleLocalWorkData();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setSelected(val) {
|
||||
this.selected = val;
|
||||
},
|
||||
handleLocalWorkData() {
|
||||
const logicData = {routeData:this.$store.state.map.routeData, autoReentryData: this.$store.state.map.autoReentryData};
|
||||
const repaint = this.$store.state.map.initJlmapLoadedCount === 1;
|
||||
this.$jlmap.setMap(this.mapData, this.mapDevice, logicData, repaint);
|
||||
if (this.lineCode === '14') {
|
||||
const list = [];
|
||||
for (const key in this.mapDevice) {
|
||||
list.push(this.mapDevice[key]);
|
||||
}
|
||||
this.$jlmap.updateShowMode(list, '02');
|
||||
}
|
||||
if (this.mapData && this.mapData.pictureList) {
|
||||
const picture = this.mapData.pictureList.find(picture => picture.stationCode === this.roleDeviceCode && picture.type === 'chainStation');
|
||||
if (picture) {
|
||||
this.handlerPictureShow(picture);
|
||||
} else {
|
||||
this.handlerSwitchStationMode();
|
||||
}
|
||||
} else {
|
||||
this.handlerSwitchStationMode();
|
||||
}
|
||||
},
|
||||
// 新的画面显示逻辑
|
||||
handlerPictureShow(picture) {
|
||||
const list = [];
|
||||
const deviceList = [];
|
||||
for (const key in this.mapDevice) {
|
||||
list.push(this.mapDevice[key]);
|
||||
deviceList.push(key);
|
||||
}
|
||||
this.$jlmap.updateShowStation(list);
|
||||
this.$store.dispatch('map/setPictureDeviceMap', picture.deviceMap);
|
||||
this.$jlmap.updatePicture(deviceList);
|
||||
this.$jlmap.updateTransform(picture.scaling, picture.origin);
|
||||
this.$store.dispatch('map/setShowCentralizedStationCode', this.centralizedStationMap[this.roleDeviceCode]);
|
||||
},
|
||||
// 旧的分集中站显示逻辑
|
||||
handlerSwitchStationMode() {
|
||||
this.$jlmap.amendDevice([...this.sectionList, ...this.signalList, ...this.trainWindowList]);
|
||||
this.showStation = this.centralizedStationMap[this.roleDeviceCode];
|
||||
const showStation = this.centralizedStationMap[this.roleDeviceCode];
|
||||
const list = [];
|
||||
for (const key in this.mapDevice) {
|
||||
list.push(this.mapDevice[key]);
|
||||
}
|
||||
this.$jlmap.updateShowStation(list, showStation);
|
||||
this.$jlmap.setCenter(showStation);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
219
src/views/newMap/display/terminals/terminalMenu.vue
Normal file
219
src/views/newMap/display/terminals/terminalMenu.vue
Normal file
@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="isShow" class="terminalList">
|
||||
<div v-for="(eachTerminal,index) in terminalList" :key="index" :class="active==eachTerminal.code?'eachTerminal active':'eachTerminal'" @click="eachTerminal.click(eachTerminal.code)">{{ eachTerminal.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:'TerminalList',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
terminalList:[],
|
||||
active:'localWork',
|
||||
centralizedStationList: [],
|
||||
centralizedStationMap: {},
|
||||
commonTerminal: [
|
||||
{
|
||||
name: '现地工作站',
|
||||
code: 'localWork',
|
||||
roleList: ['STATION_SUPERVISOR', 'STATION_ASSISTANT', 'STATION_MASTER', 'STATION_SIGNALER', 'STATION_PASSENGER',
|
||||
'STATION_SWITCH_MAN', 'STATION_FACILITATOR', 'STATION_WORKER', 'DEVICE_MANAGER', 'TRAIN_MASTER'],
|
||||
click: this.localWorkShow
|
||||
},
|
||||
{
|
||||
name: '行调工作站',
|
||||
code: 'dispatchWork',
|
||||
roleList: ['DISPATCHER'],
|
||||
click: this.dispatchWorkShow
|
||||
}
|
||||
],
|
||||
terminalMap:{
|
||||
'datie': [
|
||||
{
|
||||
name: '车务终端',
|
||||
code: 'trafficTerminal',
|
||||
roleList: ['STATION_SUPERVISOR'],
|
||||
click: this.noEvent
|
||||
},
|
||||
{
|
||||
name: '车务管理终端',
|
||||
code: 'trafficManageTerminal',
|
||||
roleList: ['STATION_SUPERVISOR'],
|
||||
click: this.noEvent
|
||||
},
|
||||
|
||||
{
|
||||
name: '调度计划',
|
||||
code: 'schedulingPlan',
|
||||
roleList: ['DISPATCHER'],
|
||||
click: this.schedulingPlan
|
||||
},
|
||||
{
|
||||
name: '调度命令',
|
||||
code: 'dispatchingCommand',
|
||||
roleList: ['DISPATCHER'],
|
||||
click: this.dispatchingCommand
|
||||
}
|
||||
],
|
||||
'subway': [
|
||||
{
|
||||
name: 'cctv视图',
|
||||
code: 'cctvView',
|
||||
roleList: ['STATION_SUPERVISOR'],
|
||||
click: this.noEvent
|
||||
},
|
||||
{
|
||||
name: '故障设备',
|
||||
code: 'jlmap3dFault',
|
||||
roleList: ['STATION_SUPERVISOR'],
|
||||
click: this.noEvent
|
||||
},
|
||||
{
|
||||
name: '司机视角',
|
||||
code: 'drivingPlan',
|
||||
roleList: ['DRIVER'],
|
||||
click: this.noEvent
|
||||
},
|
||||
{
|
||||
name: 'IBP盘',
|
||||
code: 'ibp',
|
||||
roleList: ['STATION_SUPERVISOR'],
|
||||
click: this.ibpShow
|
||||
},
|
||||
{
|
||||
name: '数字沙盘',
|
||||
code: 'digitalStand',
|
||||
roleList: ['STATION_SUPERVISOR'],
|
||||
click: this.noEvent
|
||||
},
|
||||
{ // {label:'留言板', name:'messageBoard', click:this.messageBoard, isShow:false},
|
||||
name: '留言板',
|
||||
code: 'messageBoard',
|
||||
roleList: ['DISPATCHER', 'STATION_SUPERVISOR', 'STATION_ASSISTANT', 'STATION_MASTER', 'STATION_SIGNALER', 'STATION_PASSENGER',
|
||||
'STATION_SWITCH_MAN', 'STATION_FACILITATOR', 'STATION_WORKER', 'DEVICE_MANAGER', 'TRAIN_MASTER'],
|
||||
click: this.messageBoardShow
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
// 设备数据不显示
|
||||
isShow() {
|
||||
return !this.$route.query.projectDevice;
|
||||
},
|
||||
// 线路类型
|
||||
lineCode() {
|
||||
return this.$route.query.lineCode;
|
||||
},
|
||||
// 大铁线路
|
||||
datie() {
|
||||
return ['16', '19'].includes(this.$route.query.lineCode);
|
||||
},
|
||||
roles() {
|
||||
return this.$store.state.training.roles;
|
||||
},
|
||||
roleDeviceCode() {
|
||||
return this.$store.state.trainingNew.roleDeviceCode;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.training.roles': function (val) {
|
||||
this.initTerminalList();
|
||||
this.initPictureShow();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initTerminalList();
|
||||
},
|
||||
methods:{
|
||||
initTerminalList() {
|
||||
let currentType = '';
|
||||
if (this.datie) {
|
||||
currentType = 'datie';
|
||||
} else {
|
||||
currentType = 'subway';
|
||||
}
|
||||
[...this.commonTerminal, ...this.terminalMap[currentType]].forEach(item => {
|
||||
if (item.roleList.includes(this.roles)) {
|
||||
this.terminalList.push(item);
|
||||
}
|
||||
});
|
||||
},
|
||||
noEvent(code) {
|
||||
this.active = code;
|
||||
},
|
||||
schedulingPlan(code) {
|
||||
this.active = code;
|
||||
this.$refs.dispatcherLoger.doShow();
|
||||
},
|
||||
dispatchingCommand(code) {
|
||||
this.active = code;
|
||||
this.$refs.dispatchCmd.doShow();
|
||||
},
|
||||
messageBoardShow(code) {
|
||||
this.active = code;
|
||||
console.log(this.active, 'messageB', code);
|
||||
this.$emit('pictureChange', code);
|
||||
},
|
||||
ibpShow(code) {
|
||||
this.active = code;
|
||||
this.$refs.ibpPlate.show(this.roleDeviceCode, '');
|
||||
},
|
||||
close() {
|
||||
this.active = 0;
|
||||
},
|
||||
initPictureShow() {
|
||||
const localWorkRoleList = ['STATION_SUPERVISOR', 'STATION_ASSISTANT', 'STATION_MASTER', 'STATION_SIGNALER', 'STATION_PASSENGER', 'STATION_SWITCH_MAN',
|
||||
'STATION_FACILITATOR', 'STATION_WORKER', 'DEVICE_MANAGER', 'TRAIN_MASTER'];
|
||||
if (localWorkRoleList.includes(this.roles)) {
|
||||
this.localWorkShow('localWork');
|
||||
} else if (this.roles === 'DISPATCHER') {
|
||||
this.dispatchWorkShow('dispatchWork');
|
||||
} else if (this.roles === 'MAINTAINER') {
|
||||
// 通号
|
||||
}
|
||||
|
||||
},
|
||||
dispatchWorkShow(code) {
|
||||
this.active = code;
|
||||
this.$emit('pictureChange', code);
|
||||
},
|
||||
localWorkShow(code) {
|
||||
this.active = code;
|
||||
this.$emit('pictureChange', code);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.terminalList{
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 45%;
|
||||
width: 111px;
|
||||
padding-left: 1px;
|
||||
padding-top: 1px;
|
||||
padding-bottom: 1px;
|
||||
padding-right: 1px;
|
||||
background: #fff;
|
||||
border-radius: 5px 0px 0px 5px;
|
||||
z-index: 2000;
|
||||
}
|
||||
.eachTerminal{
|
||||
padding: 8px 0px;
|
||||
text-align: center;
|
||||
border-bottom: 1px #dedede solid;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
.eachTerminal.active{
|
||||
color:#409eff;
|
||||
background: #ffff;
|
||||
}
|
||||
</style>
|
||||
@ -210,6 +210,7 @@ export default {
|
||||
this.refresh(this.$store.state.map.map);
|
||||
});
|
||||
this.canvasId = ['map', (Math.random().toFixed(5)) * 100000].join('_');
|
||||
console.log(this.canvasId, '---------------');
|
||||
this.$store.dispatch('config/setCurrentCancasId', { id: this.canvasId });
|
||||
},
|
||||
mounted() {
|
||||
@ -242,7 +243,7 @@ export default {
|
||||
}
|
||||
const prdType = this.$store.state.training.prdType;
|
||||
const showMode = { '01': '03', '02': '02'}[prdType] || '';
|
||||
|
||||
console.log('initLoadPage');
|
||||
Vue.prototype.$theme = new Theme();
|
||||
this.selfJlmap = Vue.prototype.$jlmap = new Jlmap({
|
||||
dom: document.getElementById(this.canvasId),
|
||||
@ -413,7 +414,7 @@ export default {
|
||||
});
|
||||
window.open(routeData.href, '_blank');
|
||||
} else {
|
||||
window.open(routeData.href, '_blank');
|
||||
// window.open(routeData.href, '_blank');
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -434,7 +435,7 @@ export default {
|
||||
});
|
||||
window.open(routeData.href, '_blank');
|
||||
} else {
|
||||
window.open(routeData.href, '_blank');
|
||||
// window.open(routeData.href, '_blank');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user