joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

调整地图样式及加载逻辑

Browse Source
This commit is contained in:
zyy 2020-07-31 18:49:35 +08:00
parent e2c32f2e68
commit fb9e8f0325
13 changed files with 252 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/store/modules/training.js
View File

@ -313,7 +313,7 @@ const training = {
reset: ({ commit }) => { reset: ({ commit }) => {
commit('over'); commit('over');
commit('resetOrder'); commit('resetOrder');
commit('stopCountTime'); // commit('stopCountTime');
// 清空计时器以及得分 // 清空计时器以及得分
commit('resetUsedTime'); commit('resetUsedTime');
@ -330,7 +330,7 @@ const training = {
OperateHandler.cleanOperates(); OperateHandler.cleanOperates();
Handler.clear(); // 两种方式 Handler.clear(); // 两种方式
// 清空计时器以及得分 // 清空计时器以及得分
commit('stopCountTime'); // commit('stopCountTime');
commit('resetUsedTime'); commit('resetUsedTime');
commit('resetScore'); commit('resetScore');
commit('start'); commit('start');
@ -342,7 +342,7 @@ const training = {
over: ({ commit }) => { over: ({ commit }) => {
commit('over'); commit('over');
commit('resetOrder'); commit('resetOrder');
commit('stopCountTime'); // commit('stopCountTime');
}, },
/** /**
@ -358,7 +358,7 @@ const training = {
* 停止计时 * 停止计时
*/ */
setStopCountTime: ({ commit }) => { setStopCountTime: ({ commit }) => {
commit('stopCountTime'); // commit('stopCountTime');
}, },
/** /**
@ -392,16 +392,20 @@ const training = {
commit('changeMode', opts.mode); commit('changeMode', opts.mode);
if (opts.start) { if (opts.start) {
// 清空计时器以及得分 // 清空计时器以及得分
commit('stopCountTime'); // commit('stopCountTime');
commit('resetUsedTime'); commit('resetUsedTime');
commit('resetScore'); commit('resetScore');
// 开始实训 // 开始实训
commit('start'); commit('start');
commit('next'); commit('next');
// 开始计时 // // 开始计时
commit('countUsedTime'); // commit('countUsedTime');
} }
}, },
countUsedTime({ commit }) {
// 开始计时
commit('countUsedTime');
},
/** /**
* 开始实训（模式变更和开始的混合操作） * 开始实训（模式变更和开始的混合操作）
@ -603,7 +607,7 @@ const training = {
end: ({ commit }, mode) => { end: ({ commit }, mode) => {
commit('over'); commit('over');
commit('resetOrder'); commit('resetOrder');
commit('stopCountTime'); // commit('stopCountTime');
commit('changeMode', mode); commit('changeMode', mode);
}, },

4
src/utils/baseUrl.js
View File

@ -2,9 +2,9 @@ export function getBaseUrl() {
let BASE_API; let BASE_API;
if (process.env.NODE_ENV === 'development') { if (process.env.NODE_ENV === 'development') {
// BASE_API = 'https://joylink.club/jlcloud'; // 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.5:9000'; // 袁琪
BASE_API = 'http://192.168.3.6:9000'; // 旭强 // BASE_API = 'http://192.168.3.6:9000'; // 旭强
// BASE_API = 'http://192.168.3.41: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://b29z135112.zicp.vip'; // BASE_API = 'http://b29z135112.zicp.vip';

132
src/views/newMap/chatView/chatBox.vue
View File

@ -1,63 +1,65 @@
<template> <template>
<div class="chatBox" :class="{'active': drawer}" :style="{'bottom':offsetBottom+'px'}"> <div class="chatBox" :class="{'active': drawer}" :style="{'bottom':offsetBottom+'px'}">
<div class="menuTrainListBtn" @click="clickBtn"> <div class="menuTrainListBtn" @click="clickBtn">
<i class="el-icon-more" /> <!-- <i class="el-icon-more" /> -->
<p style="margin: 0;">会</p>
<p style="margin: 0;">话</p>
</div>
<div class="chat-box-main">
<div class="chat-box-header">
<div class="chat-box-header-title">
<el-input v-if="isShow" v-model="queryMember" size="small" placeholder="请输入搜索人员">
<el-button slot="append" icon="el-icon-search" />
</el-input>
</div>
<div class="chat-setting" @click="handleSetting()">
<i class="el-icon-s-tools" />
</div>
</div>
<div v-if="isShow" class="chat-box-content">
<el-tree
ref="tree"
:data="treeData"
:props="defaultProps"
node-key="id"
default-expand-all
:filter-node-method="filterNode"
show-checkbox
style="margin: 10px;overflow-y: auto;height: 100%;margin-right: 0;"
@check-change="handleCheckChange"
>
<span :id="data.id" slot-scope="{ node, data }">
<span style="font-size: 14px">{{ data.label }}</span>
</span>
</el-tree>
</div>
<div v-else class="chat-box-content">
<div class="chatcontent">
<chat-content ref="chatContent" :chat-content-list="chatContentList" />
<div v-if="recordSending" class="chat_record_tip">
<div id="record_progress_bar" :style="'width:'+100/60*seconds+'%'" />
<div class="record_icon" />
<div class="record_tip_text">正在录音...</div>
<div class="record_tip_confirm" @click="stopRecording()">确定</div>
<div class="record_tip_cancle" @click="cancleRecording()">取消</div>
</div>
</div>
<chat-member-list ref="chatMemberList" :current-member-list="currentMemberList" />
</div>
<div class="chat-box-footer">
<div v-if="isShow">
<div class="userString">{{ userString }}</div>
<el-button :loading="loading" size="mini" type="primary" class="chat-box-create-coversite" @click="doCreate">创建会话</el-button>
<div v-if="scriptTip" class="scriptTip">{{ scriptTip }}</div>
</div>
<div v-else>
<div class="chat-box-footer-tool" />
<el-button v-if="isQuitShow" size="mini" type="danger" class="chat-box-footer-quit" :loading="loading" @click="quitConversition()">结束会话</el-button>
<el-button v-if="isStartRecord" class="chat-box-footer-send" size="mini" type="primary" :disabled="recordSending" @click="startRecording()">发送语音</el-button>
<div v-if="scriptTip" class="scriptTip">{{ scriptTip }}</div>
</div>
</div>
</div> </div>
<div class="chat-box-main">
<div class="chat-box-header">
<div class="chat-box-header-title">
<el-input v-if="isShow" v-model="queryMember" size="small" placeholder="请输入搜索人员">
<el-button slot="append" icon="el-icon-search" />
</el-input>
</div>
<div class="chat-setting" @click="handleSetting()">
<i class="el-icon-s-tools" />
</div>
</div>
<div v-if="isShow" class="chat-box-content">
<el-tree
ref="tree"
:data="treeData"
:props="defaultProps"
node-key="id"
default-expand-all
:filter-node-method="filterNode"
show-checkbox
style="margin: 10px;overflow-y: auto;height: 100%;margin-right: 0;"
@check-change="handleCheckChange"
>
<span :id="data.id" slot-scope="{ node, data }">
<span style="font-size: 14px">{{ data.label }}</span>
</span>
</el-tree>
</div>
<div v-else class="chat-box-content">
<div class="chatcontent">
<chat-content ref="chatContent" :chat-content-list="chatContentList" />
<div v-if="recordSending" class="chat_record_tip">
<div id="record_progress_bar" :style="'width:'+100/60*seconds+'%'" />
<div class="record_icon" />
<div class="record_tip_text">正在录音...</div>
<div class="record_tip_confirm" @click="stopRecording()">确定</div>
<div class="record_tip_cancle" @click="cancleRecording()">取消</div>
</div>
</div>
<chat-member-list ref="chatMemberList" :current-member-list="currentMemberList" />
</div>
<div class="chat-box-footer">
<div v-if="isShow">
<div class="userString">{{ userString }}</div>
<el-button :loading="loading" size="mini" type="primary" class="chat-box-create-coversite" @click="doCreate">创建会话</el-button>
<div v-if="scriptTip" class="scriptTip">{{ scriptTip }}</div>
</div>
<div v-else>
<div class="chat-box-footer-tool" />
<el-button v-if="isQuitShow" size="mini" type="danger" class="chat-box-footer-quit" :loading="loading" @click="quitConversition()">结束会话</el-button>
<el-button v-if="isStartRecord" class="chat-box-footer-send" size="mini" type="primary" :disabled="recordSending" @click="startRecording()">发送语音</el-button>
<div v-if="scriptTip" class="scriptTip">{{ scriptTip }}</div>
</div>
</div>
</div>
<chat-setting ref="chatSetting" :form="form" @setSetting="setSetting" /> <chat-setting ref="chatSetting" :form="form" @setSetting="setSetting" />
<chat-tooltip ref="chatToolTip" :group="group" :conversition-id="conversitionId" :invite-user-name="inviteUserName" /> <chat-tooltip ref="chatToolTip" :group="group" :conversition-id="conversitionId" :invite-user-name="inviteUserName" />
</div> </div>
@ -126,7 +128,7 @@ export default {
}, },
data() { data() {
return { return {
drawer: false, drawer: false,
bottom:15, bottom:15,
queryMember:'', queryMember:'',
defaultProps: { defaultProps: {
@ -156,7 +158,7 @@ export default {
} }
}, },
methods:{ methods:{
clickBtn() { clickBtn() {
if (this.drawer) { if (this.drawer) {
this.drawer = false; this.drawer = false;
} else { } else {
@ -300,8 +302,8 @@ export default {
this.dialogVisible = false; this.dialogVisible = false;
}); });
} else { } else {
this.userString = '群聊列表为空, 请选择人员'; this.userString = '群聊列表为空, 请选择人员';
} }
}, },
quitConversition() { quitConversition() {
this.loading = true; this.loading = true;
@ -334,8 +336,6 @@ export default {
} }
} }
.menuTrainListBtn { .menuTrainListBtn {
width: 20px;
height: 40px;
background: #fff; background: #fff;
text-align: center; text-align: center;
border-radius: 0px 6px 6px 0px; border-radius: 0px 6px 6px 0px;
@ -345,6 +345,12 @@ export default {
transform: translateX(502px); transform: translateX(502px);
cursor: pointer; cursor: pointer;
z-index: 9; z-index: 9;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
padding: 5px 3px;
.el-icon-more{ .el-icon-more{
font-size: 20px; font-size: 20px;
margin-top: 9px; margin-top: 9px;

12
src/views/newMap/displayNew/chatView/chatBox.vue
View File

@ -1,7 +1,9 @@
<template> <template>
<div class="chatBox" :class="{'active': drawer}" :style="{'bottom':bottom+'px'}"> <div class="chatBox" :class="{'active': drawer}" :style="{'bottom':bottom+'px'}">
<div class="menuTrainListBtn" @click="clickBtn"> <div class="menuTrainListBtn" @click="clickBtn">
<i class="el-icon-more" /> <!-- <i class="el-icon-more" /> -->
<p style="margin: 0;">会</p>
<p style="margin: 0;">话</p>
</div> </div>
<div class="chat-box-main"> <div class="chat-box-main">
<div class="chat-box-header"> <div class="chat-box-header">
@ -580,8 +582,6 @@ export default {
} }
} }
.menuTrainListBtn { .menuTrainListBtn {
width: 20px;
height: 40px;
background: #fff; background: #fff;
text-align: center; text-align: center;
border-radius: 0px 6px 6px 0px; border-radius: 0px 6px 6px 0px;
@ -591,6 +591,12 @@ export default {
transform: translateX(502px); transform: translateX(502px);
cursor: pointer; cursor: pointer;
z-index: 9; z-index: 9;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
padding: 5px 3px;
.el-icon-more{ .el-icon-more{
font-size: 20px; font-size: 20px;
margin-top: 9px; margin-top: 9px;

3
src/views/newMap/displayNew/index.vue
View File

@ -368,11 +368,12 @@ export default {
const resp = await getSimulationInfoNew(this.group); const resp = await getSimulationInfoNew(this.group);
if (resp && resp.code == 200 && resp.data && !resp.data.dataError) { if (resp && resp.code == 200 && resp.data && !resp.data.dataError) {
this.dataError = false; this.dataError = false;
this.$store.dispatch('scriptRecord/updateSimulationPause', resp.data.pause); this.$store.dispatch('scriptRecord/updateSimulationPause', resp.data.pause); // 是否暂停判断
this.scriptId = Number(resp.data.scriptId) || 0; this.scriptId = Number(resp.data.scriptId) || 0;
this.$store.dispatch('training/setInitTime', +new Date(`${new Date().toLocaleDateString()} ${timeFormat(resp.data.systemTime)}`)); this.$store.dispatch('training/setInitTime', +new Date(`${new Date().toLocaleDateString()} ${timeFormat(resp.data.systemTime)}`));
this.planRunning = resp.data.planRunning; this.planRunning = resp.data.planRunning;
this.$store.dispatch('map/setRunPlanStatus', this.planRunning); this.$store.dispatch('map/setRunPlanStatus', this.planRunning);
this.$store.dispatch('training/countUsedTime');
if (!this.planRunning) { if (!this.planRunning) {
this.$store.dispatch('training/over'); this.$store.dispatch('training/over');
} }

71
src/views/newMap/displayNew/menuDemon.vue
View File

@ -6,6 +6,21 @@
<span v-if="countTime" class="display-score">{{ $t('display.demon.trialTime') }} {{ countTime }}</span> <span v-if="countTime" class="display-score">{{ $t('display.demon.trialTime') }} {{ countTime }}</span>
</el-row> </el-row>
</div> </div>
<div class="display_top_draft" :style="{top: offset+'px'}">
<div class="btn_hover" @click="menuClick">菜单</div>
<el-button-group ref="button_group_box" class="button_group_box" :style="`transform: translateX(-${btnWidth}px)`">
<template v-if="!dataError"> <!-- 地图错误判断 -->
<!-- 设备视图 -->
<el-button v-if="isShow3dmodel && !isShowScheduling" size="small" @click="jumpjlmap3dmodel">{{ jl3dmodel }}</el-button>
<!-- 三维视图 -->
<el-button v-if="!isShowScheduling" size="small" @click="jumpjlmap3d">{{ jl3dname }}</el-button>
<!-- cctv视图 -->
<el-button v-if="!isShowScheduling" size="small" @click="jumpjl3dpassflow">{{ jl3dpassflow }}</el-button>
<!-- 排班计划 -->
<el-button v-if="isShowScheduling" type="primary" size="small" @click="jumpScheduling">{{ $t('display.demon.dispatchingPlan') }}</el-button>
</template>
</el-button-group>
</div>
<div class="display-draft" :class="{'haerbin_btn_box': $route.query.lineCode == '07'}" :style="{bottom: offsetBottom + 'px'}"> <div class="display-draft" :class="{'haerbin_btn_box': $route.query.lineCode == '07'}" :style="{bottom: offsetBottom + 'px'}">
<el-button-group class="button-group-box"> <el-button-group class="button-group-box">
<el-button type="primary" size="small" @click="back">{{ projectDevice?'退出':$t('display.demon.back') }}</el-button> <el-button type="primary" size="small" @click="back">{{ projectDevice?'退出':$t('display.demon.back') }}</el-button>
@ -17,14 +32,6 @@
<el-button type="danger" size="small" @click="end">{{ $t('display.demon.initialize') }}</el-button> <el-button type="danger" size="small" @click="end">{{ $t('display.demon.initialize') }}</el-button>
<el-button type="success" :disabled="isDisable" size="small" @click="selectBeginTime">{{ $t('display.demon.drivingByPlan') }}</el-button> <el-button type="success" :disabled="isDisable" size="small" @click="selectBeginTime">{{ $t('display.demon.drivingByPlan') }}</el-button>
</template> </template>
<!-- 设备视图 -->
<el-button v-if="isShow3dmodel && !isShowScheduling" size="small" @click="jumpjlmap3dmodel">{{ jl3dmodel }}</el-button>
<!-- 三维视图 -->
<el-button v-if="!isShowScheduling" size="small" @click="jumpjlmap3d">{{ jl3dname }}</el-button>
<!-- cctv视图 -->
<el-button v-if="!isShowScheduling" size="small" @click="jumpjl3dpassflow">{{ jl3dpassflow }}</el-button>
<!-- 排班计划 -->
<el-button v-if="isShowScheduling" type="primary" size="small" @click="jumpScheduling">{{ $t('display.demon.dispatchingPlan') }}</el-button>
</template> </template>
</el-button-group> </el-button-group>
</div> </div>
@ -99,7 +106,9 @@ export default {
jl3dstation: this.$t('display.demon.threeDimensionalStation'), jl3dstation: this.$t('display.demon.threeDimensionalStation'),
jl3dmodel: this.$t('display.demon.deviceView'), jl3dmodel: this.$t('display.demon.deviceView'),
isShow3dmodel :false, isShow3dmodel :false,
isGoback: false isGoback: false,
hoverBtn: false,
btnWidth: 0
}; };
}, },
computed: { computed: {
@ -151,6 +160,11 @@ export default {
clearTimeout(this.time); clearTimeout(this.time);
} }
}, },
mounted() {
this.$nextTick(() => {
this.menuClick();
});
},
methods: { methods: {
async initLoadPage() { async initLoadPage() {
try { try {
@ -317,6 +331,15 @@ export default {
this.jl3dname = this.$t('display.demon.threeDimensionalView'); // 三维视图 this.jl3dname = this.$t('display.demon.threeDimensionalView'); // 三维视图
this.isShow3dmodel = true; this.isShow3dmodel = true;
} }
},
menuClick() {
this.hoverBtn = !this.hoverBtn;
if (this.hoverBtn) {
// this.$refs.button_group_box.$el.clientWidth ||
this.btnWidth = 500; // 默认宽度
} else {
this.btnWidth = 0;
}
} }
} }
}; };
@ -359,7 +382,6 @@ export default {
<style lang="scss"> <style lang="scss">
.display-draft { .display-draft {
position: absolute; position: absolute;
// float: right;
right: 10px; right: 10px;
bottom: 15px; bottom: 15px;
button { button {
@ -383,4 +405,33 @@ export default {
} }
} }
.display_top_draft{
position: absolute;
left: 5px;
top: 15px;
height: 32px;
overflow: hidden;
padding-left: 44px;
.btn_hover{
position: absolute;
left: 0;
top: 0;
z-index: 2;
color: #4e4d4d;
font-size: 14px;
background: #fff;
padding: 8px;
border-radius: 5px;
display: table;
cursor: pointer;
float: left;
height: 32px;
}
.button_group_box{
float: left;
transition: all 0.5s;
overflow: hidden;
transform: translateX(0px);
}
}
</style> </style>

2
src/views/newMap/displayNew/menuLesson.vue
View File

@ -185,7 +185,7 @@ export default {
} }
}, },
endCommit() { endCommit() {
this.$store.dispatch('training/setStopCountTime'); // this.$store.dispatch('training/setStopCountTime');
const mode = { const mode = {
mode: this.demoMode, mode: this.demoMode,
id: this.trainingObj.id, id: this.trainingObj.id,

10
src/views/newMap/displayNew/menuTrainList.vue
View File

@ -1,7 +1,9 @@
<template> <template>
<div class="menuTrainListOut" :class="{'xian_01' : lineCode == '11', 'active': drawer}"> <div class="menuTrainListOut" :class="{'xian_01' : lineCode == '11', 'active': drawer}">
<div class="menuTrainListBtn" @click="clickBtn"> <div class="menuTrainListBtn" @click="clickBtn">
<i class="el-icon-more" /> <!-- <i class="el-icon-more" /> -->
<p style="margin: 0;">列</p>
<p style="margin: 0;">车</p>
</div> </div>
<div :show-close="false" class="menuTrainList_box" style="height: 100%;"> <div :show-close="false" class="menuTrainList_box" style="height: 100%;">
<div v-if="lineCode=='10'||lineCode=='11'" class="menuTrainList"> <div v-if="lineCode=='10'||lineCode=='11'" class="menuTrainList">
@ -153,6 +155,12 @@ export default {
z-index: 2; z-index: 2;
transform: translateX(-20px); transform: translateX(-20px);
cursor: pointer; cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
padding: 5px 3px;
.el-icon-more{ .el-icon-more{
font-size: 20px; font-size: 20px;
margin-top: 9px; margin-top: 9px;

6
src/views/newMap/jlmapNew/index.vue
View File

@ -3,7 +3,7 @@
<div v-show="maskOpen" class="mask" /> <div v-show="maskOpen" class="mask" />
<div :id="canvasId" style="background: #000;" class="display_canvas" /> <div :id="canvasId" style="background: #000;" class="display_canvas" />
<progress-bar ref="progressBar" /> <progress-bar ref="progressBar" />
<zoom-box v-if="!showZoom && !isScreen" :scale-rate="dataZoom.scaleRate" @setShrink="setShrink" @setMagnify="setMagnify" /> <!-- <zoom-box v-if="!showZoom && !isScreen" :scale-rate="dataZoom.scaleRate" @setShrink="setShrink" @setMagnify="setMagnify" /> -->
<show-mode v-show="isDesign" :local-station-show="localStationShow" @setShowMode="setShowMode" /> <show-mode v-show="isDesign" :local-station-show="localStationShow" @setShowMode="setShowMode" />
<switch-station v-show="isDesign && (showMode === '03') && localStationShow" ref="switchStation" :concentration-station-list="concentrationStationList" @setShowStation="setShowStation" /> <switch-station v-show="isDesign && (showMode === '03') && localStationShow" ref="switchStation" :concentration-station-list="concentrationStationList" @setShowStation="setShowStation" />
<div v-if="show && !isScreen" class="zoom-view" :style="{ width: width +'px'}"> <div v-if="show && !isScreen" class="zoom-view" :style="{ width: width +'px'}">
@ -35,7 +35,7 @@
import Vue from 'vue'; import Vue from 'vue';
import localStore from 'storejs'; import localStore from 'storejs';
import Jlmap from '@/jmapNew/map'; import Jlmap from '@/jmapNew/map';
import ZoomBox from './pendant/zoom'; // import ZoomBox from './pendant/zoom';
import ShowMode from './pendant/showMode'; import ShowMode from './pendant/showMode';
import SwitchStation from './pendant/switchStation'; import SwitchStation from './pendant/switchStation';
import ProgressBar from '@/views/components/progressBar/index'; import ProgressBar from '@/views/components/progressBar/index';
@ -47,7 +47,7 @@ import Theme from '@/jmapNew/theme/factory';
export default { export default {
name: 'JlmapVisual', name: 'JlmapVisual',
components: { components: {
ZoomBox, // ZoomBox,
ProgressBar, ProgressBar,
ShowMode, ShowMode,
SwitchStation SwitchStation

12
src/views/newMap/jointTrainingNew/chatView/chatBox.vue
View File

@ -1,7 +1,9 @@
<template> <template>
<div class="chatBox" :class="{'active': drawer}" :style="{'bottom':bottom+'px'}"> <div class="chatBox" :class="{'active': drawer}" :style="{'bottom':bottom+'px'}">
<div class="menuTrainListBtn" @click="clickBtn"> <div class="menuTrainListBtn" @click="clickBtn">
<i class="el-icon-more" /> <!-- <i class="el-icon-more" /> -->
<p style="margin: 0;">会</p>
<p style="margin: 0;">话</p>
</div> </div>
<div class="chat-box-main"> <div class="chat-box-main">
<template v-if="!conversitionId && userRole !== 'AUDIENCE' && !commonConversation"> <template v-if="!conversitionId && userRole !== 'AUDIENCE' && !commonConversation">
@ -684,8 +686,6 @@ export default {
} }
} }
.menuTrainListBtn { .menuTrainListBtn {
width: 20px;
height: 40px;
background: #fff; background: #fff;
text-align: center; text-align: center;
border-radius: 0px 6px 6px 0px; border-radius: 0px 6px 6px 0px;
@ -695,6 +695,12 @@ export default {
transform: translateX(502px); transform: translateX(502px);
cursor: pointer; cursor: pointer;
z-index: 9; z-index: 9;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
padding: 5px 3px;
.el-icon-more{ .el-icon-more{
font-size: 20px; font-size: 20px;
margin-top: 9px; margin-top: 9px;

5
src/views/newMap/jointTrainingNew/index.vue
View File

@ -11,6 +11,7 @@
<menu-demon-joint <menu-demon-joint
ref="demonMenu" ref="demonMenu"
:group="group" :group="group"
:offset="offset"
:offset-bottom="offsetBottom" :offset-bottom="offsetBottom"
:data-error="dataError" :data-error="dataError"
:user-role="userRole" :user-role="userRole"
@ -143,9 +144,6 @@ export default {
'map', 'map',
'bigScreenConfig' 'bigScreenConfig'
]), ]),
// ...mapGetters('training', [
// 'offsetStationCode'
// ]),
width() { width() {
return this.$store.state.app.width; return this.$store.state.app.width;
}, },
@ -324,6 +322,7 @@ export default {
} else { } else {
this.$store.dispatch('training/over'); this.$store.dispatch('training/over');
} }
this.$store.dispatch('training/countUsedTime');
} else if (resp && resp.code == 200 && resp.data && resp.data.dataError) { } else if (resp && resp.code == 200 && resp.data && resp.data.dataError) {
this.dataError = true; this.dataError = true;
this.$messageBox('此地图数据正在维护中,无法运行！'); this.$messageBox('此地图数据正在维护中,无法运行！');

119
src/views/newMap/jointTrainingNew/menuDemon.vue
View File

@ -1,8 +1,22 @@
<template> <template>
<div> <div>
<chat-box :group="group" :user-role="userRole" /> <chat-box :group="group" :user-role="userRole" />
<!-- <div class="btn_hover" @mouseenter="btnHover"><i class="el-icon-s-promotion" /></div> --> <div class="display_top_draft" :style="{top: offset+'px'}">
<!-- @mouseenter="btnBoxEnter" @mouseleave.stop="btnBoxLeave" --> <div class="btn_hover" @click="menuClick">菜单</div>
<el-button-group ref="button_group_box" class="button_group_box" :style="`transform: translateX(-${btnWidth}px)`">
<template v-if="!dataError"> <!-- 地图错误判断 -->
<!-- 设备视图 -->
<el-button v-if="isShow3dmodel && isShowScheduling" size="small" @click="jumpjlmap3dmodel">{{ $t('display.demon.deviceView') }}</el-button>
<!-- 三维视图 / 司机视角 -->
<el-button v-if="isShowScheduling || isDriver" size="small" @click="jumpjlmap3d">{{ jl3dname }}</el-button>
<!-- cctv视图 -->
<el-button v-if="isShowScheduling || isStationSupervisor" size="small" @click="jumpjl3dpassflow">{{ $t('display.demon.passengerflow') }}</el-button>
<el-button v-if="isAdmin && !noQrcodeList.includes(project)" type="primary" size="small" @click="generateQrCode">生成二维码</el-button>
<el-button v-if="isAdmin" size="small" @click="memberManage">成员管理</el-button>
<el-button v-if="isAdmin && isProject" size="small" @click="handleEquipment">设备管理</el-button>
</template>
</el-button-group>
</div>
<div class="display-draft" :class="{'display-type-hb': lineCode == '07' && $store.state.training.prdType=='01', 'haerbin_btn_box': lineCode == '07'}" :style="{bottom: offsetBottom + 'px'}"> <div class="display-draft" :class="{'display-type-hb': lineCode == '07' && $store.state.training.prdType=='01', 'haerbin_btn_box': lineCode == '07'}" :style="{bottom: offsetBottom + 'px'}">
<el-button-group class="button-group-box"> <el-button-group class="button-group-box">
<el-button v-if="project==='refereeJsxt'" type="success" size="small" @click="refeeEndCompetition">退出</el-button> <!-- 竞赛退出 --> <el-button v-if="project==='refereeJsxt'" type="success" size="small" @click="refeeEndCompetition">退出</el-button> <!-- 竞赛退出 -->
@ -18,15 +32,6 @@
<el-button :disabled="!jsStart" type="success" size="small" @click="startCompetition">开始</el-button> <el-button :disabled="!jsStart" type="success" size="small" @click="startCompetition">开始</el-button>
<el-button :disabled="jsStart" type="danger" size="small" @click="endCompetition">提交</el-button> <el-button :disabled="jsStart" type="danger" size="small" @click="endCompetition">提交</el-button>
</template> </template>
<!-- 设备视图 -->
<el-button v-if="isShow3dmodel && isShowScheduling" size="small" @click="jumpjlmap3dmodel">{{ $t('display.demon.deviceView') }}</el-button>
<!-- 三维视图 / 司机视角 -->
<el-button v-if="isShowScheduling || isDriver" size="small" @click="jumpjlmap3d">{{ jl3dname }}</el-button>
<!-- cctv视图 -->
<el-button v-if="isShowScheduling || isStationSupervisor" size="small" @click="jumpjl3dpassflow">{{ $t('display.demon.passengerflow') }}</el-button>
<el-button v-if="isAdmin && !noQrcodeList.includes(project)" type="primary" size="small" @click="generateQrCode">生成二维码</el-button>
<el-button v-if="isAdmin" size="small" @click="memberManage">成员管理</el-button>
<el-button v-if="isAdmin && isProject" size="small" @click="handleEquipment">设备管理</el-button>
</template> </template>
</el-button-group> </el-button-group>
</div> </div>
@ -88,6 +93,10 @@ export default {
return false; return false;
} }
}, },
offset: {
type: Number,
required: true
},
offsetBottom: { offsetBottom: {
type: [String, Number], type: [String, Number],
default: 15 default: 15
@ -103,7 +112,8 @@ export default {
noQrcodeList: NoQrcodeList, noQrcodeList: NoQrcodeList,
isShow3dmodel :false, isShow3dmodel :false,
jl3dname: this.$t('display.demon.threeDimensionalView'), jl3dname: this.$t('display.demon.threeDimensionalView'),
hoverBtn: false hoverBtn: false,
btnWidth: 0
}; };
}, },
computed: { computed: {
@ -139,14 +149,7 @@ export default {
}); });
} }
}, },
// '$store.state.socket.simulationStart': async function (val) {
// if (val) {
// // this.$store.dispatch('training/setInitTime', +new Date(val));
// // this.$store.dispatch('training/simulationStart');
// }
// },
'$store.state.training.started': function (val) { '$store.state.training.started': function (val) {
this.isDisable = false;
if (val) { if (val) {
this.isDisable = true; this.isDisable = true;
} }
@ -166,6 +169,9 @@ export default {
}, },
async mounted() { async mounted() {
this.change3dname(); this.change3dname();
this.$nextTick(() => {
this.menuClick();
});
}, },
beforeDestroy() { beforeDestroy() {
this.$store.dispatch('training/setGroup', ''); this.$store.dispatch('training/setGroup', '');
@ -232,6 +238,7 @@ export default {
}, },
// 开始仿真 // 开始仿真
start(model) { start(model) {
this.isDisable = true;
const data = { const data = {
time: model.initTime time: model.initTime
}; };
@ -377,32 +384,16 @@ export default {
this.jl3dname = this.$t('display.demon.threeDimensionalView'); // 三维视图 this.jl3dname = this.$t('display.demon.threeDimensionalView'); // 三维视图
this.isShow3dmodel = true; this.isShow3dmodel = true;
} }
},
menuClick() {
this.hoverBtn = !this.hoverBtn;
if (this.hoverBtn) {
// this.$refs.button_group_box.$el.clientWidth ||
this.btnWidth = 500;
} else {
this.btnWidth = 0;
}
} }
// btnHover() {
// if (!this.btnHoverTime) {
// this.btnHoverTime = setTimeout(() => {
// this.hoverBtn = false;
// }, 8000)
// }
// this.hoverBtn = true;
// },
// btnBoxEnter() {
// if (this.btnHoverTime) {
// clearTimeout(this.btnHoverTime);
// this.btnHoverTime = null;
// }
// if (this.btnBoxLeaveTime) {
// clearTimeout(this.btnBoxLeaveTime);
// this.btnBoxLeaveTime = null;
// }
// },
// btnBoxLeave() {
// if (!this.btnBoxLeaveTime) {
// this.btnBoxLeaveTime = setTimeout(() => {
// this.hoverBtn = false;
// }, 5000)
// }
// }
} }
}; };
</script> </script>
@ -489,19 +480,8 @@ export default {
} }
} }
.btn_hover{
position: absolute;
right: -2px;
bottom: 15px;
color: #fff;
font-size: 24px;
background: #1756e4;
padding: 8px 2px;
border-radius: 5px;
}
.display-draft { .display-draft {
position: absolute; position: absolute;
// float: right;
right: 10px; right: 10px;
bottom: 28px; bottom: 28px;
// transform: translateX(calc(100% + 40px)); // transform: translateX(calc(100% + 40px));
@ -529,6 +509,35 @@ export default {
border-right-color: transparent; border-right-color: transparent;
} }
} }
.display_top_draft{
position: absolute;
left: 5px;
top: 15px;
height: 32px;
overflow: hidden;
padding-left: 44px;
.btn_hover{
position: absolute;
left: 0;
top: 0;
z-index: 2;
color: #4e4d4d;
font-size: 14px;
background: #fff;
padding: 8px;
border-radius: 5px;
display: table;
cursor: pointer;
float: left;
height: 32px;
}
.button_group_box{
float: left;
transition: all 0.5s;
overflow: hidden;
transform: translateX(0px);
}
}
.haerbin_btn_box{ .haerbin_btn_box{
width: 450px; width: 450px;
bottom: 15px!important; bottom: 15px!important;

12
src/views/newMap/jointTrainingNew/menuTrainList.vue
View File

@ -1,7 +1,9 @@
<template> <template>
<div class="menuTrainListOut" :class="{'xian_01' : lineCode == '11', 'active': drawer}"> <div class="menuTrainListOut" :class="{'xian_01' : lineCode == '11', 'active': drawer}">
<div class="menuTrainListBtn" @click="clickBtn"> <div class="menuTrainListBtn" @click="clickBtn">
<i class="el-icon-more" /> <!-- <i class="el-icon-more" /> -->
<p style="margin: 0;">列</p>
<p style="margin: 0;">车</p>
</div> </div>
<div :show-close="false" class="menuTrainList_box" style="height: 100%;"> <div :show-close="false" class="menuTrainList_box" style="height: 100%;">
<div v-if="lineCode=='10'||lineCode=='11'" class="menuTrainList"> <div v-if="lineCode=='10'||lineCode=='11'" class="menuTrainList">
@ -132,8 +134,6 @@ export default {
} }
} }
.menuTrainListBtn{ .menuTrainListBtn{
width: 20px;
height: 40px;
background: #fff; background: #fff;
text-align: center; text-align: center;
border-radius: 6px 0px 0px 6px; border-radius: 6px 0px 0px 6px;
@ -142,6 +142,12 @@ export default {
z-index: 2; z-index: 2;
transform: translateX(-20px); transform: translateX(-20px);
cursor: pointer; cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
padding: 5px 3px;
.el-icon-more{ .el-icon-more{
font-size: 20px; font-size: 20px;
margin-top: 9px; margin-top: 9px;