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

绘图显示在iscs界面上

Browse Source
This commit is contained in:
zyy 2020-02-07 10:48:48 +08:00
parent ec5e77ed0a
commit f9eee573b2
14 changed files with 276 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/iscs/constant/iscsData.js
View File

File diff suppressed because one or more lines are too long

10
src/iscs/shape/borderRadius.js
View File

@ -29,7 +29,7 @@ export default class BorderRadius extends Group {
endAngle: Math.PI * 3 / 2
},
style: {
fill: 'rgba(0, 0, 0, 0.1)',
fill: 'rgba(0, 0, 0, 0)',
stroke: '#EBEE0C'
}
});
@ -44,7 +44,7 @@ export default class BorderRadius extends Group {
endAngle: Math.PI / 2
},
style: {
fill: 'rgba(0, 0, 0, 0.1)',
fill: 'rgba(0, 0, 0, 0)',
stroke: '#EBEE0C'
}
});
@ -58,7 +58,7 @@ export default class BorderRadius extends Group {
height: this.model.height
},
style: {
fill: '#000',
fill: 'rgba(0,0,0,0)',
stroke: '#EBEE0C'
}
});
@ -73,7 +73,7 @@ export default class BorderRadius extends Group {
},
style: {
lineWidth: 3,
stroke: '#000'
stroke: '#45607B'
}
});
this.rightLine = new Line({
@ -87,7 +87,7 @@ export default class BorderRadius extends Group {
},
style: {
lineWidth: 3,
stroke: '#000'
stroke: '#45607B'
}
});
this.grouper.add(this.leftSector);

4
src/iscs/shape/endDoor.js
View File

@ -41,7 +41,7 @@ export default class EndDoor extends Group {
height: this.model.width * 4 / 17
},
style: {
fill: '#000'
fill: '#45607B'
}
});
this.doorknob = new Circle({
@ -53,7 +53,7 @@ export default class EndDoor extends Group {
r: this.model.width / 17
},
style: {
fill: '#000'
fill: '#45607B'
}
});
this.grouper.add(this.door);

4
src/iscs/shape/fireHydrantAlarmButton.js
View File

@ -40,7 +40,7 @@ export default class FireHydrantAlarmButton extends Group {
points: [[width / 4, width * 3 / 40], [width * 3 / 4, width * 3 / 40], [width * 3 / 5, width * 5 / 20], [width * 2 / 5, width * 5 / 20]]
},
style: {
color: '#000'
fill: '#45607B'
}
});
this.polygonBottom = new Polygon({
@ -50,7 +50,7 @@ export default class FireHydrantAlarmButton extends Group {
points: [[width * 2 / 5, width * 3 / 10], [width * 3 / 5, width * 3 / 10], [width * 13 / 20, width * 2 / 5], [width * 7 / 20, width * 2 / 5]]
},
style: {
color: '#000'
fill: '#45607B'
}
});
this.grouper.add(this.polygonTop);

3
src/iscs/shape/gasFireControl.js
View File

@ -30,7 +30,8 @@ export default class GasFireControl extends Group {
},
style: {
lineWidth: 1,
stroke: '#0F0'
stroke: '#0F0',
fill: 'rgba(0,0,0,0)'
}
});
this.grouper.add(this.rect);

5
src/iscs/shape/manualAlarmButton.js
View File

@ -30,7 +30,8 @@ export default class manualAlarmButton extends Group {
},
style: {
lineWidth: 1,
stroke: '#0F0'
stroke: '#0F0',
fill: 'rgba(0,0,0,0)'
}
});
this.grouper.add(this.rect);
@ -75,7 +76,7 @@ export default class manualAlarmButton extends Group {
r: this.model.width / 10
},
style: {
fill: '#000'
fill: '#45607B'
}
});
this.grouper.add(this.circleInside);

3
src/iscs/shape/smokeDetector.js
View File

@ -28,7 +28,8 @@ export default class SmokeDetector extends Group {
},
style: {
lineWidth: 1,
stroke: '#0F0'
stroke: '#0F0',
fill: 'rgba(0,0,0,0)'
}
});
this.grouper.add(this.circle);

3
src/iscs/shape/temperatureDetector.js
View File

@ -28,7 +28,8 @@ export default class TemperatureDetector extends Group {
},
style: {
lineWidth: 1,
stroke: '#0F0'
stroke: '#0F0',
fill: 'rgba(0,0,0,0)'
}
});
this.grouper.add(this.circle);

1
src/views/iscs/iscsDraw/iscsPsdOperate/index.vue
View File

@ -103,6 +103,7 @@ export default {
}
},
mounted() {
this.$emit('iscsChange', this.$route.params.id);
},
beforeDestroy() {

210
src/views/iscs/iscsSystem/config/canvas/iscsCanvas.vue Normal file
View File

@ -0,0 +1,210 @@
<template>
<div style="width: 100%; height: 100%;">
<div :id="iscsId" v-loading="loading" :style="{ width: widthCanvas +'px', height: canvasHeight +'px' }" class="iscs-canvas" />
<!-- <el-button v-if="showBackButton" class="iscs-button" type="primary" @click="back">{{ $t('global.back') }}</el-button> -->
</div>
</template>
<script>
import Vue from 'vue';
import Iscs from '@/iscs/iscs';
import { parser } from '@/iscs/utils/parser';
import iscsData from '@/iscs/constant/iscsData';
import { mapGetters } from 'vuex';
import { exitFullscreen } from '@/utils/screen';
import { putJointTrainingSimulationUser } from '@/api/chat';
import { handlerIscsEvent } from '@/api/simulation';
import { IscsOperation } from '@/scripts/ConstDic';
export default {
name: 'Iscs',
props: {
size: {
type: Object,
default() {
return null;
}
},
widthCanvas: {
type: Number,
default: 1200
}
},
data() {
return {
dataZoom: {
offsetX: '0',
offsetY: '0',
scaleRate: '1'
},
config: {
scaleRate: '1',
origin: {
x: 0,
y: 0
}
},
showBackButton: true,
initTime: '',
started: false,
loading: false,
stationCode: '',
banUpOpenScreenDoor: false,
banDownOpenScreenDoor: false
};
},
computed: {
...mapGetters([
'canvasWidth',
'canvasHeight'
]),
iscsId() {
return ['iscs', (Math.random().toFixed(5)) * 100000].join('_');
},
width() {
return this.$store.state.config.width;
},
height() {
return this.$store.state.config.height;
}
},
watch: {
'$store.state.config.canvasSizeCount': function (val) {
this.reSize();
},
'$store.state.socket.equipmentStatus': function (val) {
if (val.length) {
this.statusMessage(val);
}
}
},
mounted() {
},
beforeDestroy() {
this.iscsDestroy();
},
methods: {
show (deviceCode) {
if (!deviceCode) {
return;
}
document.getElementById(this.iscsId).oncontextmenu = function (e) {
return false;
};
this.iscsDestroy();
this.loading = true;
const data = parser(iscsData[deviceCode], {width: this.canvasWidth, height: this.canvasHeight});
this.$iscs = new Iscs({
dom: document.getElementById(this.iscsId),
config: {
renderer: 'canvas',
width: this.width,
height: this.height
},
options: {
scaleRate: 1,
offsetX: 0,
offsetY: 0
},
methods: {
viewLoaded: this.handleViewLoaded
}
});
Vue.prototype.$iscs = this.$iscs;
this.$iscs.on('contextmenu', this.onContextMenu, this);
if (this.$route.query.group) {
this.$iscs.on('selected', this.onSelected, this);
}
this.setIscs(data, iscsData[deviceCode]);
this.$store.dispatch('iscs/setIscsData', iscsData[deviceCode]);
window.document.oncontextmenu = function () {
return false;
};
},
setIscs(data, oldData) {
this.$iscs.setIscs(oldData, data);
},
// 点击选择事件
onSelected(em) {
if (em.deviceModel.mean) {
switch (IscsOperation[em.deviceModel.mean].event) {
case 'UpHoldTrain':
case 'UpCancelHoldTrain':
case 'DownHoldTrain':
case 'DownCancelHoldTrain':
handlerIscsEvent(this.$route.query.group, {operate:IscsOperation[em.deviceModel.mean].operate, stationCode:this.stationCode});
break;
case 'BanUpOpenScreenDoor':
this.banUpOpenScreenDoor = !this.banUpOpenScreenDoor;
break;
case 'BanDownOpenScreenDoor':
this.banDownOpenScreenDoor = !this.banDownOpenScreenDoor;
break;
case 'UpOpenScreenDoor':
this.openScreenDoor(this.banUpOpenScreenDoor, IscsOperation[em.deviceModel.mean].operate);
break;
case 'DownOpenScreenDoor':
this.openScreenDoor(this.banDownOpenScreenDoor, IscsOperation[em.deviceModel.mean].operate);
break;
}
}
},
openScreenDoor(flag, operate) {
if (flag) {
handlerIscsEvent(this.$route.query.group, {operate: operate, stationCode:this.stationCode});
}
},
// 右键点击事件
onContextMenu(em) {
if (em.eventTarget) {
this.$store.dispatch('iscs/setUpdateDeviceData', em.eventTarget.model);
}
},
// 绘图时调用，元素可拖拽
drawIscsInit() {
this.$iscs && this.$iscs.drawIscsInit();
this.showBackButton = false;
},
reSize() {
this.$nextTick(() => {
this.width = this.$store.state.config.width;
this.height = this.$store.state.config.height;
this.$iscs && this.$iscs.resize({ width: this.width, height: this.height });
});
},
back() {
this.group = this.$route.query.group;
this.$store.dispatch('training/over').then(() => {
putJointTrainingSimulationUser(this.group).then(() => {
this.$router.replace({ path: `/trainroom`, query: { group: this.group, lineCode:this.$route.query.lineCode } });
exitFullscreen();
});
});
},
iscsDestroy() {
if (this.$iscs) {
this.$iscs.dispose();
this.$iscs = '';
Vue.prototype.$iscs = '';
}
},
handleViewLoaded() {
this.loading = false;
},
statusMessage(val) {
this.$iscs && this.$iscs.setDeviceStatus(val);
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.iscs-button{
position: absolute;
float: right;
right: 20px;
bottom: 15px;
}
.iscs-canvas{
margin: 0 auto;
}
</style>

15
src/views/iscs/iscsSystem/config/fire-alarm/stand.vue
View File

@ -1,17 +1,26 @@
<template>
<div class="">
站台报警
<iscsSystem ref="iscsPlate" :widthCanvas="1490" />
</div>
</template>
<script>
import iscsSystem from '../canvas/iscsCanvas';
export default {
components: {
iscsSystem
},
data() {
return {
mes: '1111'
};
}
},
mounted() {
this.$refs.iscsPlate.show('12');
},
methods: {
},
};
</script>

15
src/views/iscs/iscsSystem/config/fire-alarm/stationHall.vue
View File

@ -1,17 +1,26 @@
<template>
<div class="">
站厅报警
<iscsSystem ref="iscsPlate" :widthCanvas="1300" />
</div>
</template>
<script>
import iscsSystem from '../canvas/iscsCanvas';
export default {
components: {
iscsSystem
},
data() {
return {
mes: '1111'
};
}
},
mounted() {
this.$refs.iscsPlate.show('11');
},
methods: {
},
};
</script>

23
src/views/iscs/iscsSystem/config/psd/psd.vue
View File

@ -1,10 +1,25 @@
<template>
<div>
屏蔽门
</div>
<div>
<iscsSystem ref="iscsPlate" :widthCanvas="1490" />
</div>
</template>
<script>
import iscsSystem from "../canvas/iscsCanvas";
export default {
components: {
iscsSystem
},
data() {
return {
mes: "1111"
};
},
mounted() {
this.$refs.iscsPlate.show("31");
},
methods: {}
};
</script>
<style lang="scss" scoped>
</style>

2
src/views/iscsSystem/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<div :id="iscsId" v-loading="loading" :style="{ width: this.canvasWidth +'px', height: this.canvasHeight +'px',background:'#000' }" class="iscs-canvas" />
<div :id="iscsId" v-loading="loading" :style="{ width: this.canvasWidth +'px', height: this.canvasHeight +'px',background:'#45607B' }" class="iscs-canvas" />
<el-button v-if="showBackButton" class="iscs-button" type="primary" @click="back">{{ $t('global.back') }}</el-button>
</div>
</template>