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:
fan 2019-12-04 18:41:45 +08:00
parent 60b4d6a060
commit ce0a4f4528
4 changed files with 288 additions and 240 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/views/mapsystem/plugin/delayBox.vue Normal file
View File

@ -0,0 +1,29 @@
<template>
<div v-if="delayShow">
<div v-for="item in delayInfoList" />
</div>
</template>
<script>
import DelayInfo from './delayInfo';
export default {
name: 'DelayBox',
data() {
return {
delayShow: false,
delayInfoList: []
};
},
methods: {
doShow() {
}
}
};
</script>
<style scoped>
</style>

19
src/views/mapsystem/plugin/delayInfo.vue Normal file
View File

@ -0,0 +1,19 @@
<template>
<div><span>人解</span><span>信号机名</span><span>时间</span></div>
</template>
<script>
export default {
name: 'DelayInfo',
props: {
delayInformation: {
type: Object,
required: true
}
}
};
</script>
<style scoped>
</style>

162
src/views/mapsystem/plugin/src/poptip.vue
View File

@ -10,90 +10,90 @@
<script> <script>
export default { export default {
name: 'PopTip', name: 'PopTip',
props: { props: {
position: { position: {
type: Object, type: Object,
required: true, required: true,
default: function () { default: function () {
return { return {
x: 0, x: 0,
y: 0 y: 0
}; };
} }
}, },
tip: { tip: {
type: String, type: String,
required: true required: true
} }
}, },
data() { data() {
return { return {
defaultFontSize: 14, defaultFontSize: 14,
maxWidth: 300, maxWidth: 300,
tPosition: { tPosition: {
x: -300, x: -300,
y: -300, y: -300,
align: 'bottom' align: 'bottom'
}, },
offset: 7 offset: 7
}; };
}, },
computed: { computed: {
width() { width() {
let width = this.tip.length * this.defaultFontSize + 40; let width = this.tip.length * this.defaultFontSize + 40;
if (width > this.maxWidth) { if (width > this.maxWidth) {
width = this.maxWidth; width = this.maxWidth;
} }
return width; return width;
}, },
arrawLeft() { arrawLeft() {
return this.width / 5; return this.width / 5;
} }
}, },
watch: { watch: {
'position.x': function (val) { 'position.x': function (val) {
this.resetShowPosition(); this.resetShowPosition();
}, },
'position.y': function (val) { 'position.y': function (val) {
this.resetShowPosition(); this.resetShowPosition();
}, },
'tip': function (val) { 'tip': function (val) {
this.resetShowPosition(); this.resetShowPosition();
} }
}, },
mounted() { mounted() {
this.resetShowPosition(); this.resetShowPosition();
}, },
methods: { methods: {
resetShowPosition() { resetShowPosition() {
const self = this; const self = this;
this.$nextTick(() => { this.$nextTick(() => {
// 位置 // 位置
const height = self.$el.clientHeight; const height = self.$el.clientHeight;
self.tPosition.align = self.position.align || 'bottom'; self.tPosition.align = self.position.align || 'bottom';
self.tPosition.x = self.position.x - (this.arrawLeft + this.offset); self.tPosition.x = self.position.x - (this.arrawLeft + this.offset);
if (self.tPosition.align == 'top') { if (self.tPosition.align == 'top') {
const distance = 47; const distance = 47;
self.tPosition.y = self.position.y + (distance); self.tPosition.y = self.position.y + (distance);
} else if (self.tPosition.align == 'bottom') { } else if (self.tPosition.align == 'bottom') {
const distance = 5; const distance = 5;
self.tPosition.y = self.position.y - (height + distance); self.tPosition.y = self.position.y - (height + distance);
} }
if (self.tPosition.x < 0) self.tPosition.x = 0; if (self.tPosition.x < 0) self.tPosition.x = 0;
if (self.tPosition.y < 0) self.tPosition.y = 0; if (self.tPosition.y < 0) self.tPosition.y = 0;
}); });
}, },
reset() { reset() {
this.tPosition = { this.tPosition = {
x: -300, x: -300,
y: -300 y: -300
}; };
} }
} }
}; };
</script> </script>

318
src/views/mapsystem/plugin/trainingtip.vue
View File

@ -11,171 +11,171 @@ import { getDeviceTypeByDic, getDomIdByOperation } from '@/scripts/ConstDic';
import { getDomOffset } from '@/utils/index'; import { getDomOffset } from '@/utils/index';
export default { export default {
name: 'TrainingTips', name: 'TrainingTips',
components: { PopTip }, components: { PopTip },
data() { data() {
return { return {
tipShow: false, tipShow: false,
popShow: false, popShow: false,
position: { position: {
x: 0, x: 0,
y: 0 y: 0
}, },
tip: '' tip: ''
}; };
}, },
computed: { computed: {
...mapGetters([ ...mapGetters([
'canvasWidth', 'canvasWidth',
'canvasHeight' 'canvasHeight'
]) ])
}, },
watch: { watch: {
'$store.state.training.tipEvent': function (val) { '$store.state.training.tipEvent': function (val) {
this.tipInit(); this.tipInit();
} }
}, },
methods: { methods: {
tipInit() { tipInit() {
this.$nextTick(() => { this.$nextTick(() => {
this.$store.dispatch('training/isTeachMode').then(() => { this.$store.dispatch('training/isTeachMode').then(() => {
this.tipShow = true; this.tipShow = true;
const offset = this.$store.state.config.canvasOffset; const offset = this.$store.state.config.canvasOffset;
if (this.$store.state.training.started) { if (this.$store.state.training.started) {
const order = this.$store.state.training.order; const order = this.$store.state.training.order;
const steps = this.$store.state.training.steps; const steps = this.$store.state.training.steps;
if (order > -1 && order < steps.length) { if (order > -1 && order < steps.length) {
const step = steps[order]; const step = steps[order];
const distance = 5; const distance = 5;
this.tip = step.tip; this.tip = step.tip;
/** 如果mbm或者bar的处理*/ /** 如果mbm或者bar的处理*/
if (step.type === 'mbm' || step.type === 'bar') { if (step.type === 'mbm' || step.type === 'bar') {
const position = this.getOtherTipPoint(step); const position = this.getOtherTipPoint(step);
if (position) { if (position) {
this.position = position; this.position = position;
this.position.y -= distance; this.position.y -= distance;
this.popTipShow(); this.popTipShow();
} }
} else if (step.code) { } else if (step.code) {
/** 默认是shape类型，如果找不到坐标，则可以认为是存在code的dailog*/ /** 默认是shape类型，如果找不到坐标，则可以认为是存在code的dailog*/
const position = this.getShapeTipPoint(step); const position = this.getShapeTipPoint(step);
if (position) { if (position) {
this.position = { this.position = {
x: position.x + offset.x, x: position.x + offset.x,
y: position.y + offset.y - distance y: position.y + offset.y - distance
}; };
this.popTipShow(); this.popTipShow();
} else { } else {
const position = this.getOtherTipPoint(step); const position = this.getOtherTipPoint(step);
if (position) { if (position) {
this.position = position; this.position = position;
this.position.y -= distance; this.position.y -= distance;
this.popTipShow(); this.popTipShow();
} }
} }
} else { } else {
/** 不存在code字段的dialog处理*/ /** 不存在code字段的dialog处理*/
const position = this.getOtherTipPoint(step); const position = this.getOtherTipPoint(step);
if (position) { if (position) {
this.position = position; this.position = position;
this.position.y -= distance; this.position.y -= distance;
this.popTipShow(); this.popTipShow();
} else { } else {
this.popTipHide(); this.popTipHide();
} }
} }
} else { } else {
this.tipShow = false; this.tipShow = false;
} }
} else { } else {
this.tipShow = false; this.tipShow = false;
} }
}).catch(() => { }).catch(() => {
this.tipShow = false; this.tipShow = false;
}); });
}); });
}, },
popTipShow() { popTipShow() {
this.popShow = true; this.popShow = true;
}, },
popTipHide() { popTipHide() {
this.popShow = false; this.popShow = false;
}, },
// 获取地图设备提示位置 // 获取地图设备提示位置
getShapeTipPoint(step) { getShapeTipPoint(step) {
var position = null; var position = null;
const type = getDeviceTypeByDic(step.type); const type = getDeviceTypeByDic(step.type);
if (type) { if (type) {
position = this.$jlmap.getShapeTipPoint({ position = this.$jlmap.getShapeTipPoint({
code: step.code, code: step.code,
val: step.val val: step.val
}); });
if (position) { if (position) {
if (position.x < 0) { if (position.x < 0) {
position.x = 0; position.x = 0;
} }
if (position.x > this.canvasWidth) { if (position.x > this.canvasWidth) {
position.x = this.canvasWidth; position.x = this.canvasWidth;
} }
if (position.y < 0) { if (position.y < 0) {
position.y = 0; position.y = 0;
} }
if (position.y > this.canvasHeight) { if (position.y > this.canvasHeight) {
position.y = this.canvasHeight; position.y = this.canvasHeight;
} }
} }
} }
return position; return position;
}, },
// 获取地图菜单按钮和对话框按钮提示显示位置 // 获取地图菜单按钮和对话框按钮提示显示位置
getOtherTipPoint(step) { getOtherTipPoint(step) {
const domId = getDomIdByOperation(step.operation); const domId = getDomIdByOperation(step.operation);
const btnDom = document.getElementById(domId); const btnDom = document.getElementById(domId);
if (btnDom) { if (btnDom) {
const offset = getDomOffset(btnDom, true); const offset = getDomOffset(btnDom, true);
if (offset.x == 0 && offset.y == 0) { if (offset.x == 0 && offset.y == 0) {
return null; return null;
} }
let align = 'bottom'; let align = 'bottom';
if (this.tipAlignIsTop(step, domId)) { if (this.tipAlignIsTop(step, domId)) {
align = 'top'; align = 'top';
} }
return { return {
align: align, align: align,
x: offset.x + btnDom.clientWidth / 2, x: offset.x + btnDom.clientWidth / 2,
y: offset.y y: offset.y
}; };
} }
return null; return null;
}, },
tipAlignIsTop(step, domId) { tipAlignIsTop(step, domId) {
// 如果是tip框则箭头朝上 // 如果是tip框则箭头朝上
if (step.type.toUpperCase() === 'bar'.toUpperCase()) { if (step.type.toUpperCase() === 'bar'.toUpperCase()) {
return true; return true;
} }
if (/{TOP}/.test(domId)) { if (/{TOP}/.test(domId)) {
return false; return false;
} }
if (/{BOTTOM}/.test(domId)) { if (/{BOTTOM}/.test(domId)) {
return true; return true;
} }
// 如果domId中不含以下关键字，则箭头朝上 // 如果domId中不含以下关键字，则箭头朝上
const keyList = ['choose', 'select']; const keyList = ['choose', 'select'];
for (var key in keyList) { for (var key in keyList) {
if (domId.toUpperCase().indexOf(keyList[key].toUpperCase()) !== -1) { if (domId.toUpperCase().indexOf(keyList[key].toUpperCase()) !== -1) {
return false; return false;
} }
} }
// 其他情况默认朝下 // 其他情况默认朝下
return true; return true;
} }
} }
}; };
</script> </script>