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:
joylink_cuiweidong 2022-10-27 18:13:03 +08:00
parent 44e4673945
commit a2c685d6bb
5 changed files with 1468 additions and 995 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

572
src/views/newMap/display/simulationMenu.vue
View File

File diff suppressed because it is too large Load Diff

176
src/views/newMap/display/trainingList/poptip.vue Normal file
View File

@ -0,0 +1,176 @@
<template>
<div id="pop_tip_dialog" class="pop-dialog" :style="{ height: 'auto', left: tPosition.x+'px', top: tPosition.y+'px' }">
<div ref="tipRef" class="pop-content" :style="{ width: width + 'px',textAlign: textAlign }">
<p style="color: black;" v-html="tip" />
<div v-show="tPosition.align === 'top'" x-arrow class="popper__arraw_top" :style="{left: arrawLeft+'px'}" />
<div v-show="tPosition.align === 'bottom'" x-arrow class=" popper__arraw_bottom" :style="{left: arrawLeft+'px'}" />
</div>
</div>
</template>
<script>
export default {
name: 'PopTip',
props: {
position: {
type: Object,
required: true,
default: function () {
return {
x: 0,
y: 0
};
}
},
tip: {
type: String,
required: true
}
},
data() {
return {
defaultFontSize: 14,
maxWidth: 300,
tPosition: {
x: -300,
y: -300,
align: 'bottom'
},
offset: 7,
textAlign: 'center'
};
},
computed: {
width() {
let width = this.tip.length * this.defaultFontSize + 40;
if (width > this.maxWidth) {
width = this.maxWidth;
}
let parentWidth = 0;
if (this.position.fontNumber) {
parentWidth = this.position.fontNumber * this.defaultFontSize + 40;
}
return parentWidth || width;
},
arrawLeft() {
return this.width / 5;
}
},
watch: {
'position.x': function (val) {
this.resetShowPosition();
},
'position.y': function (val) {
this.resetShowPosition();
},
'tip': function (val) {
this.resetShowPosition();
}
},
mounted() {
this.resetShowPosition();
},
methods: {
resetShowPosition() {
this.$nextTick(() => {
// 位置
const height = this.$el.clientHeight;
this.tPosition.align = this.position.align || 'bottom';
this.tPosition.x = this.position.x - (this.arrawLeft + this.offset);
this.textAlign = this.position.textAlign || 'center';
if (this.tPosition.align == 'top') {
const distance = 47;
this.tPosition.y = this.position.y + (distance);
} else if (this.tPosition.align == 'bottom') {
const distance = 5;
this.tPosition.y = this.position.y - (height + distance);
}
if (this.tPosition.x < 0) this.tPosition.x = 0;
if (this.tPosition.y < 0) this.tPosition.y = 0;
});
},
reset() {
this.tPosition = {
x: -300,
y: -300
};
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
$bg: #FFDD00;
$hoverBg: #f5f7fa;
.pop-dialog {
background-color: $bg;
border-radius: 6px;
position: fixed;
padding: 7px 0px;
z-index: 9998;
.pop-content {
.popper__arraw_bottom {
position: absolute;
height: 14px;
width: 14px;
background: $bg;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.popper__arraw_top {
position: absolute;
height: 14px;
width: 14px;
top: -7px;
background: $bg;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.popper__arraw_left {
position: absolute;
height: 14px;
width: 14px;
left: -7px;
background: $bg;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.popper__arraw_right {
position: absolute;
height: 14px;
width: 14px;
right: -7px;
background: $bg;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
}
.dsp-block {
display: block;
text-align: left;
padding: 6px 15px;
width: 100%;
border-radius: unset;
}
.dsp-block:hover {
background-color: $hoverBg;
}
}
</style>

198
src/views/newMap/display/trainingList/trainingPositionTip.vue Normal file
View File

@ -0,0 +1,198 @@
<template>
<div v-if="tipShow">
<pop-tip v-show="popShow" :position="position" :tip="tip" />
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import PopTip from './poptip';
import OperationHandler from '@/scripts/cmdPlugin/OperationHandler';
import { getDomOffset } from '@/utils/index';
import { ScriptMode } from '@/scripts/ConstDic';
export default {
name: 'TrainingTips',
components: { PopTip },
data() {
return {
tipShow: false,
popShow: false,
position: {
x: 0,
y: 0
},
tip: ''
};
},
computed: {
...mapGetters([
'canvasWidth',
'canvasHeight'
]),
trainingDetail() {
return this.$store.state.trainingNew.trainingDetail;
},
teachMode() {
return this.$store.state.trainingNew.teachMode;
}
},
watch: {
'$store.state.socket.trainingStepTip': function(val) {
if (val && this.trainingDetail.type === 'SINGLE') {
const member = this.$store.state.training.memberData[val.memberId];
this.$nextTick(function() {
this.$store.dispatch('trainingNew/clearOperateOrder');
this.$store.dispatch('trainingNew/stepOrderIncrease');
if (member.userId == this.$store.state.user.id) {
this.tipInit();
}
});
}
},
'$store.state.socket.trainingOverCount': function(val) {
this.tip = '';
this.popShow = false;
this.tipShow = false;
this.position = { x: 0, y: 0 };
},
'$store.state.trainingNew.trainingSwitch': function(val) {
this.tip = '';
this.popShow = false;
this.tipShow = false;
this.position = { x: 0, y: 0 };
}
},
methods: {
tipInit() {
if (this.teachMode === ScriptMode.TEACH) {
this.tipShow = true;
const offset = this.$store.state.config.canvasOffset;
const trainingDetail = this.$store.state.trainingNew.trainingDetail;
const stepOrder = this.$store.state.trainingNew.stepOrder;
const steps = JSON.parse(trainingDetail.stepJson);
if (steps && steps.length) {
const step = steps[stepOrder - 1];
const distance = 5;
this.tip = this.$store.state.socket.trainingStepTip.content;
if (step && step.tipPosition && step.tipPosition.deviceCode) {
const position = this.getShapeTipPoint(step.tipPosition);
if (position) {
this.position = {
x: position.x + offset.x,
y: position.y + offset.y - distance
};
this.popTipShow();
}
} else if (step && step.tipPosition && step.tipPosition.domId) {
const position = this.getOtherTipPoint(step.tipPosition);
if (position) {
this.position = position;
this.position.y -= distance;
this.popTipShow();
}
} else {
this.popTipHide();
}
} else {
this.tipShow = false;
}
} else {
this.tipShow = false;
}
},
popTipShow() {
this.popShow = true;
},
popTipHide() {
this.popShow = false;
},
// 获取地图设备提示位置
getShapeTipPoint(tipPosition) {
var position = null;
// 单独处理 自动折返
const newTipPosition = Object.assign({}, tipPosition);
if (newTipPosition.deviceCode.includes('Cycle')) {
const buttonList = this.$store.state.map.map.cycleButtonList;
if (buttonList && buttonList.length > 0) {
buttonList.forEach(element => {
if (element.cycleCode == newTipPosition.code) {
newTipPosition.deviceCode = element.code;
}
});
}
}
let subDeviceType = '';
if (newTipPosition.subType) { subDeviceType = newTipPosition.subType; } else { subDeviceType = newTipPosition.type; }
position = this.$jlmap.getShapeTipPoint({
code: newTipPosition.deviceCode,
subDeviceType: subDeviceType
});
if (position) {
if (position.x < 0) {
position.x = 0;
}
if (position.x > this.canvasWidth) {
position.x = this.canvasWidth;
}
if (position.y < 0) {
position.y = 0;
}
if (position.y > this.canvasHeight) {
position.y = this.canvasHeight;
}
}
return position;
},
// 获取地图菜单按钮和对话框按钮提示显示位置
getOtherTipPoint(tipPosition) {
const domId = OperationHandler.getDomIdByOperation(tipPosition.domId);
const btnDom = document.getElementById(domId);
if (btnDom) {
const offset = getDomOffset(btnDom);
if (offset.x == 0 && offset.y == 0) {
return null;
}
let align = 'bottom';
if (this.tipAlignIsTop(tipPosition, domId)) {
align = 'top';
}
return {
align: align,
x: offset.x + btnDom.clientWidth / 2,
y: offset.y
};
}
return null;
},
tipAlignIsTop(step, domId) {
// 如果是tip框则箭头朝上
// if (step.type.toUpperCase() === 'bar'.toUpperCase()) {
// return true;
// }
const Dom = document.getElementById(domId);
if (Dom.parentElement.id == 'menuButtons_box') { // 现地操作按钮提示位置判断
return false;
}
if (/{TOP}/.test(domId)) {
return true;
}
if (/{BOTTOM}/.test(domId)) {
return false;
}
// 如果domId中不含以下关键字，则箭头朝上
const keyList = ['choose', 'select'];
for (var key in keyList) {
if (domId.toUpperCase().indexOf(keyList[key].toUpperCase()) !== -1) {
return false;
}
}
// 其他情况默认朝下
return true;
}
}
};
</script>

84
src/views/newMap/display/trainingList/trainingTip.vue Normal file
View File

@ -0,0 +1,84 @@
<template>
<div v-if="trainingTipMessage!=''" class="trainingTipMessage" :style="{top:offset + 55 +'px'}">{{ trainingTipMessage }}</div>
</template>
<script>
import { ScriptMode } from '@/scripts/ConstDic';
export default {
name: 'TrainingTip',
data() {
return {
offset: 0,
trainingTipMessage: ''
};
},
computed: {
teachMode() {
return this.$store.state.trainingNew.teachMode;
},
trainingDetail() {
return this.$store.state.trainingNew.trainingDetail;
}
},
watch: {
'$store.state.socket.trainingStepTip': function(val) {
if (val && this.trainingDetail.type === 'SCENE') {
const member = this.$store.state.training.memberData[val.memberId];
this.$nextTick(function() {
this.$store.dispatch('trainingNew/clearOperateOrder');
this.$store.dispatch('trainingNew/stepOrderIncrease');
if (member.userId == this.$store.state.user.id && (this.teachMode === ScriptMode.TEACH || this.teachMode === ScriptMode.PRACTICE)) {
this.trainingTipMessage = val.content;
}
});
}
},
'$store.state.trainingNew.trainingSwitch': function(val) {
if (!val) {
this.trainingTipMessage = '';
}
},
'$store.state.socket.trainingStepFinishCount': function(val) {
this.trainingTipMessage = '';
},
'$store.state.socket.trainingOverCount': function(val) {
if (this.teachMode === ScriptMode.TEACH) {
this.trainingTipMessage = '实训完成，请点击结束按钮。';
}
},
'$store.state.training.operateErrMsg': function (val) {
this.tipInfo({ color: val.color, message: val.errMsg });
}
},
methods: {
tipInfo(opt) {
if (opt && opt.hasOwnProperty('color') && opt.hasOwnProperty('message')) {
const h = this.$createElement;
this.$notify({
title: this.$t('global.tips'),
message: h('i', { style: 'color:' + opt.color }, opt.message)
});
}
}
}
};
</script>
<style lang="scss" scoped>
.trainingTipMessage{
position: absolute;
width: 400px;
padding: 15px;
background: rgb(255, 221, 0);
left: 50%;
border-radius: 8px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
color: #000;
line-height: 180%;
// z-index: 1501;
z-index: 35;
font-size: 14px;
}
</style>

25
src/views/organization/trainingManage/index.vue
View File

@ -10,7 +10,7 @@ import { createSimulation } from '@/api/simulation';
import ConstConfig from '@/scripts/ConstConfig';
import { getSessionStorage } from '@/utils/auth';
import { launchFullscreen } from '@/utils/screen';
import { getPublishSingleList, getPublishScenesList, getPublishTrainingDetail, loadPublishTraining} from '@/api/jmap/training';
import { getPublishSingleList, getPublishScenesList} from '@/api/jmap/training';
export default {
name:'TrainingManage',
data() {
@ -178,32 +178,9 @@ export default {
}
this.disabled = false;
});
}).catch(()=>{
console.log('获取地图详情失败');
});
// try {
// const detailResp = await getPublishTrainingDetail(data.id);
// this.training = detailResp.data;
// if (detailResp.data.mapLocationJson) {
// const mapLocation = JSON.parse(detailResp.data.mapLocationJson);
// this.$jlmap.updateTransform(mapLocation.scale, {x:mapLocation.x, y:mapLocation.y});
// }
// if (detailResp.data.playerIdJson) {
// const playerId = JSON .parse(detailResp.data.playerIdJson)[0];
// if (playerId) {
// const member = this.$store.state.training.memberData[playerId];
// this.$store.dispatch('training/setPrdType', this.prdTypeMap[member.type]);
// this.$store.dispatch('training/setRoles', member.type);
// }
// }
// this.$store.dispatch('trainingNew/setTrainingDetail', detailResp.data);
// this.$store.dispatch('trainingNew/setTrainingScore', '');
// await loadPublishTraining(this.group, data.id, {mode: this.teachMode});
// this.$message.success('加载实训成功！');
// } catch (e) {
// this.$message.error('加载实训失败！');
// }
}
}
};