绘图相关调整_(延时解锁-未完)
This commit is contained in:
fan
parent
60b4d6a060
commit
ce0a4f4528
29
src/views/mapsystem/plugin/delayBox.vue
Normal file
29
src/views/mapsystem/plugin/delayBox.vue
Normal 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
19
src/views/mapsystem/plugin/delayInfo.vue
Normal 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>
|
||||
@ -10,90 +10,90 @@
|
||||
|
||||
<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
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
width() {
|
||||
let width = this.tip.length * this.defaultFontSize + 40;
|
||||
if (width > this.maxWidth) {
|
||||
width = this.maxWidth;
|
||||
}
|
||||
return 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() {
|
||||
const self = this;
|
||||
this.$nextTick(() => {
|
||||
// 位置
|
||||
const height = self.$el.clientHeight;
|
||||
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
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
width() {
|
||||
let width = this.tip.length * this.defaultFontSize + 40;
|
||||
if (width > this.maxWidth) {
|
||||
width = this.maxWidth;
|
||||
}
|
||||
return 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() {
|
||||
const self = this;
|
||||
this.$nextTick(() => {
|
||||
// 位置
|
||||
const height = self.$el.clientHeight;
|
||||
|
||||
self.tPosition.align = self.position.align || 'bottom';
|
||||
self.tPosition.x = self.position.x - (this.arrawLeft + this.offset);
|
||||
self.tPosition.align = self.position.align || 'bottom';
|
||||
self.tPosition.x = self.position.x - (this.arrawLeft + this.offset);
|
||||
|
||||
if (self.tPosition.align == 'top') {
|
||||
const distance = 47;
|
||||
self.tPosition.y = self.position.y + (distance);
|
||||
} else if (self.tPosition.align == 'bottom') {
|
||||
const distance = 5;
|
||||
self.tPosition.y = self.position.y - (height + distance);
|
||||
}
|
||||
if (self.tPosition.align == 'top') {
|
||||
const distance = 47;
|
||||
self.tPosition.y = self.position.y + (distance);
|
||||
} else if (self.tPosition.align == 'bottom') {
|
||||
const distance = 5;
|
||||
self.tPosition.y = self.position.y - (height + distance);
|
||||
}
|
||||
|
||||
if (self.tPosition.x < 0) self.tPosition.x = 0;
|
||||
if (self.tPosition.y < 0) self.tPosition.y = 0;
|
||||
});
|
||||
},
|
||||
reset() {
|
||||
this.tPosition = {
|
||||
x: -300,
|
||||
y: -300
|
||||
};
|
||||
}
|
||||
}
|
||||
if (self.tPosition.x < 0) self.tPosition.x = 0;
|
||||
if (self.tPosition.y < 0) self.tPosition.y = 0;
|
||||
});
|
||||
},
|
||||
reset() {
|
||||
this.tPosition = {
|
||||
x: -300,
|
||||
y: -300
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -11,171 +11,171 @@ import { getDeviceTypeByDic, getDomIdByOperation } from '@/scripts/ConstDic';
|
||||
import { getDomOffset } from '@/utils/index';
|
||||
|
||||
export default {
|
||||
name: 'TrainingTips',
|
||||
components: { PopTip },
|
||||
data() {
|
||||
return {
|
||||
tipShow: false,
|
||||
popShow: false,
|
||||
position: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
tip: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'canvasWidth',
|
||||
'canvasHeight'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
'$store.state.training.tipEvent': function (val) {
|
||||
this.tipInit();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tipInit() {
|
||||
this.$nextTick(() => {
|
||||
this.$store.dispatch('training/isTeachMode').then(() => {
|
||||
this.tipShow = true;
|
||||
const offset = this.$store.state.config.canvasOffset;
|
||||
if (this.$store.state.training.started) {
|
||||
const order = this.$store.state.training.order;
|
||||
const steps = this.$store.state.training.steps;
|
||||
if (order > -1 && order < steps.length) {
|
||||
const step = steps[order];
|
||||
const distance = 5;
|
||||
this.tip = step.tip;
|
||||
/** 如果mbm或者bar的处理*/
|
||||
if (step.type === 'mbm' || step.type === 'bar') {
|
||||
const position = this.getOtherTipPoint(step);
|
||||
if (position) {
|
||||
this.position = position;
|
||||
this.position.y -= distance;
|
||||
this.popTipShow();
|
||||
}
|
||||
} else if (step.code) {
|
||||
/** 默认是shape类型，如果找不到坐标，则可以认为是存在code的dailog*/
|
||||
const position = this.getShapeTipPoint(step);
|
||||
if (position) {
|
||||
this.position = {
|
||||
x: position.x + offset.x,
|
||||
y: position.y + offset.y - distance
|
||||
};
|
||||
this.popTipShow();
|
||||
} else {
|
||||
const position = this.getOtherTipPoint(step);
|
||||
if (position) {
|
||||
this.position = position;
|
||||
this.position.y -= distance;
|
||||
this.popTipShow();
|
||||
}
|
||||
}
|
||||
} else {
|
||||
/** 不存在code字段的dialog处理*/
|
||||
const position = this.getOtherTipPoint(step);
|
||||
if (position) {
|
||||
this.position = position;
|
||||
this.position.y -= distance;
|
||||
this.popTipShow();
|
||||
} else {
|
||||
this.popTipHide();
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.tipShow = false;
|
||||
}
|
||||
} else {
|
||||
this.tipShow = false;
|
||||
}
|
||||
}).catch(() => {
|
||||
this.tipShow = false;
|
||||
});
|
||||
});
|
||||
},
|
||||
popTipShow() {
|
||||
this.popShow = true;
|
||||
},
|
||||
popTipHide() {
|
||||
this.popShow = false;
|
||||
},
|
||||
// 获取地图设备提示位置
|
||||
getShapeTipPoint(step) {
|
||||
var position = null;
|
||||
const type = getDeviceTypeByDic(step.type);
|
||||
if (type) {
|
||||
position = this.$jlmap.getShapeTipPoint({
|
||||
code: step.code,
|
||||
val: step.val
|
||||
});
|
||||
name: 'TrainingTips',
|
||||
components: { PopTip },
|
||||
data() {
|
||||
return {
|
||||
tipShow: false,
|
||||
popShow: false,
|
||||
position: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
tip: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'canvasWidth',
|
||||
'canvasHeight'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
'$store.state.training.tipEvent': function (val) {
|
||||
this.tipInit();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tipInit() {
|
||||
this.$nextTick(() => {
|
||||
this.$store.dispatch('training/isTeachMode').then(() => {
|
||||
this.tipShow = true;
|
||||
const offset = this.$store.state.config.canvasOffset;
|
||||
if (this.$store.state.training.started) {
|
||||
const order = this.$store.state.training.order;
|
||||
const steps = this.$store.state.training.steps;
|
||||
if (order > -1 && order < steps.length) {
|
||||
const step = steps[order];
|
||||
const distance = 5;
|
||||
this.tip = step.tip;
|
||||
/** 如果mbm或者bar的处理*/
|
||||
if (step.type === 'mbm' || step.type === 'bar') {
|
||||
const position = this.getOtherTipPoint(step);
|
||||
if (position) {
|
||||
this.position = position;
|
||||
this.position.y -= distance;
|
||||
this.popTipShow();
|
||||
}
|
||||
} else if (step.code) {
|
||||
/** 默认是shape类型，如果找不到坐标，则可以认为是存在code的dailog*/
|
||||
const position = this.getShapeTipPoint(step);
|
||||
if (position) {
|
||||
this.position = {
|
||||
x: position.x + offset.x,
|
||||
y: position.y + offset.y - distance
|
||||
};
|
||||
this.popTipShow();
|
||||
} else {
|
||||
const position = this.getOtherTipPoint(step);
|
||||
if (position) {
|
||||
this.position = position;
|
||||
this.position.y -= distance;
|
||||
this.popTipShow();
|
||||
}
|
||||
}
|
||||
} else {
|
||||
/** 不存在code字段的dialog处理*/
|
||||
const position = this.getOtherTipPoint(step);
|
||||
if (position) {
|
||||
this.position = position;
|
||||
this.position.y -= distance;
|
||||
this.popTipShow();
|
||||
} else {
|
||||
this.popTipHide();
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.tipShow = false;
|
||||
}
|
||||
} else {
|
||||
this.tipShow = false;
|
||||
}
|
||||
}).catch(() => {
|
||||
this.tipShow = false;
|
||||
});
|
||||
});
|
||||
},
|
||||
popTipShow() {
|
||||
this.popShow = true;
|
||||
},
|
||||
popTipHide() {
|
||||
this.popShow = false;
|
||||
},
|
||||
// 获取地图设备提示位置
|
||||
getShapeTipPoint(step) {
|
||||
var position = null;
|
||||
const type = getDeviceTypeByDic(step.type);
|
||||
if (type) {
|
||||
position = this.$jlmap.getShapeTipPoint({
|
||||
code: step.code,
|
||||
val: step.val
|
||||
});
|
||||
|
||||
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(step) {
|
||||
const domId = getDomIdByOperation(step.operation);
|
||||
const btnDom = document.getElementById(domId);
|
||||
if (btnDom) {
|
||||
const offset = getDomOffset(btnDom, true);
|
||||
if (offset.x == 0 && offset.y == 0) {
|
||||
return null;
|
||||
}
|
||||
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(step) {
|
||||
const domId = getDomIdByOperation(step.operation);
|
||||
const btnDom = document.getElementById(domId);
|
||||
if (btnDom) {
|
||||
const offset = getDomOffset(btnDom, true);
|
||||
if (offset.x == 0 && offset.y == 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let align = 'bottom';
|
||||
if (this.tipAlignIsTop(step, domId)) {
|
||||
align = 'top';
|
||||
}
|
||||
let align = 'bottom';
|
||||
if (this.tipAlignIsTop(step, 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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
if (/{TOP}/.test(domId)) {
|
||||
return false;
|
||||
}
|
||||
if (/{TOP}/.test(domId)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (/{BOTTOM}/.test(domId)) {
|
||||
return true;
|
||||
}
|
||||
if (/{BOTTOM}/.test(domId)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// 如果domId中不含以下关键字，则箭头朝上
|
||||
const keyList = ['choose', 'select'];
|
||||
for (var key in keyList) {
|
||||
if (domId.toUpperCase().indexOf(keyList[key].toUpperCase()) !== -1) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
// 如果domId中不含以下关键字，则箭头朝上
|
||||
const keyList = ['choose', 'select'];
|
||||
for (var key in keyList) {
|
||||
if (domId.toUpperCase().indexOf(keyList[key].toUpperCase()) !== -1) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// 其他情况默认朝下
|
||||
return true;
|
||||
}
|
||||
}
|
||||
// 其他情况默认朝下
|
||||
return true;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user