iscs 绘图数据修改
This commit is contained in:
parent
8601589112
commit
169035cddf
File diff suppressed because one or more lines are too long
@ -48,8 +48,7 @@ export default class Vidicon extends Group {
|
||||
smooth: 0.2
|
||||
},
|
||||
style: {
|
||||
fill: '#00FF00',
|
||||
stroke: 'rgba(255, 0, 0, 0)'
|
||||
fill: '#00FF00'
|
||||
}
|
||||
});
|
||||
} else { // 镜头在左
|
||||
@ -66,14 +65,12 @@ export default class Vidicon extends Group {
|
||||
smooth: 0.2
|
||||
},
|
||||
style: {
|
||||
fill: '#00FF00',
|
||||
stroke: 'rgba(255, 0, 0, 0)'
|
||||
fill: '#00FF00'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this.grouper.add(this.rect);
|
||||
this.grouper.rotation = Math.PI / 180 * (this.model.rotationAngle || 0);
|
||||
if (this.model.right) {
|
||||
this.grouper.add(this.PolylineRight);
|
||||
} else {
|
||||
|
@ -29,7 +29,7 @@ export default class BorderRadius extends Group {
|
||||
endAngle: Math.PI * 3 / 2
|
||||
},
|
||||
style: {
|
||||
fill: 'rgba(0, 0, 0, 0)',
|
||||
fill: 'rgba(0, 0, 0, 0.1)',
|
||||
stroke: '#EBEE0C'
|
||||
}
|
||||
});
|
||||
@ -44,7 +44,7 @@ export default class BorderRadius extends Group {
|
||||
endAngle: Math.PI / 2
|
||||
},
|
||||
style: {
|
||||
fill: 'rgba(0, 0, 0, 0)',
|
||||
fill: 'rgba(0, 0, 0, 0.1)',
|
||||
stroke: '#EBEE0C'
|
||||
}
|
||||
});
|
||||
@ -58,7 +58,7 @@ export default class BorderRadius extends Group {
|
||||
height: this.model.height
|
||||
},
|
||||
style: {
|
||||
fill: 'rgba(0,0,0,0)',
|
||||
fill: '#000',
|
||||
stroke: '#EBEE0C'
|
||||
}
|
||||
});
|
||||
@ -73,7 +73,7 @@ export default class BorderRadius extends Group {
|
||||
},
|
||||
style: {
|
||||
lineWidth: 3,
|
||||
stroke: '#45607B'
|
||||
stroke: '#000'
|
||||
}
|
||||
});
|
||||
this.rightLine = new Line({
|
||||
@ -87,7 +87,7 @@ export default class BorderRadius extends Group {
|
||||
},
|
||||
style: {
|
||||
lineWidth: 3,
|
||||
stroke: '#45607B'
|
||||
stroke: '#000'
|
||||
}
|
||||
});
|
||||
this.grouper.add(this.leftSector);
|
||||
|
@ -41,7 +41,7 @@ export default class EndDoor extends Group {
|
||||
height: this.model.width * 4 / 17
|
||||
},
|
||||
style: {
|
||||
fill: '#45607B'
|
||||
fill: '#000'
|
||||
}
|
||||
});
|
||||
this.doorknob = new Circle({
|
||||
@ -53,7 +53,7 @@ export default class EndDoor extends Group {
|
||||
r: this.model.width / 17
|
||||
},
|
||||
style: {
|
||||
fill: '#45607B'
|
||||
fill: '#000'
|
||||
}
|
||||
});
|
||||
this.grouper.add(this.door);
|
||||
|
@ -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: {
|
||||
fill: '#45607B'
|
||||
color: '#000'
|
||||
}
|
||||
});
|
||||
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: {
|
||||
fill: '#45607B'
|
||||
color: '#000'
|
||||
}
|
||||
});
|
||||
this.grouper.add(this.polygonTop);
|
||||
|
@ -30,8 +30,7 @@ export default class GasFireControl extends Group {
|
||||
},
|
||||
style: {
|
||||
lineWidth: 1,
|
||||
stroke: '#0F0',
|
||||
fill: 'rgba(0,0,0,0)'
|
||||
stroke: '#0F0'
|
||||
}
|
||||
});
|
||||
this.grouper.add(this.rect);
|
||||
|
@ -30,8 +30,7 @@ export default class manualAlarmButton extends Group {
|
||||
},
|
||||
style: {
|
||||
lineWidth: 1,
|
||||
stroke: '#0F0',
|
||||
fill: 'rgba(0,0,0,0)'
|
||||
stroke: '#0F0'
|
||||
}
|
||||
});
|
||||
this.grouper.add(this.rect);
|
||||
@ -76,7 +75,7 @@ export default class manualAlarmButton extends Group {
|
||||
r: this.model.width / 10
|
||||
},
|
||||
style: {
|
||||
fill: '#45607B'
|
||||
fill: '#000'
|
||||
}
|
||||
});
|
||||
this.grouper.add(this.circleInside);
|
||||
|
@ -28,8 +28,7 @@ export default class SmokeDetector extends Group {
|
||||
},
|
||||
style: {
|
||||
lineWidth: 1,
|
||||
stroke: '#0F0',
|
||||
fill: 'rgba(0,0,0,0)'
|
||||
stroke: '#0F0'
|
||||
}
|
||||
});
|
||||
this.grouper.add(this.circle);
|
||||
|
@ -22,7 +22,6 @@ export default class Staircase extends Group {
|
||||
this.grouper.origin = [this.model.width / 2, this.model.width * 1.368 / 2];
|
||||
this.grouper.scale = [-1, 1];
|
||||
}
|
||||
this.grouper.rotation = Math.PI / 180 * (this.model.rotationAngle || 0);
|
||||
this.grouper.add(this.path);
|
||||
}
|
||||
setModel(dx, dy) {
|
||||
|
@ -28,8 +28,7 @@ export default class TemperatureDetector extends Group {
|
||||
},
|
||||
style: {
|
||||
lineWidth: 1,
|
||||
stroke: '#0F0',
|
||||
fill: 'rgba(0,0,0,0)'
|
||||
stroke: '#0F0'
|
||||
}
|
||||
});
|
||||
this.grouper.add(this.circle);
|
||||
|
@ -34,14 +34,6 @@
|
||||
@deleteDataModel="deleteDataModel"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="扶梯" name="Staircase">
|
||||
<staircase
|
||||
ref="staircase"
|
||||
style="width: 90%;"
|
||||
@createDataModel="createDataModel"
|
||||
@deleteDataModel="deleteDataModel"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="文字" name="IscsText">
|
||||
<iscs-text
|
||||
ref="iscsText"
|
||||
@ -79,7 +71,7 @@
|
||||
import IscsText from '../iscsCommonElem/text';
|
||||
import IscsRect from '../iscsCommonElem/rect';
|
||||
import BrakeMachine from '../iscsAfcOperate/brakeMachine';
|
||||
import Staircase from '../iscsOperate/staircase';
|
||||
|
||||
export default {
|
||||
name: 'IscsOperate',
|
||||
components: {
|
||||
@ -88,8 +80,7 @@
|
||||
IscsRect,
|
||||
IscsLine,
|
||||
IscsText,
|
||||
BrakeMachine,
|
||||
Staircase
|
||||
BrakeMachine
|
||||
},
|
||||
mixins: [
|
||||
],
|
||||
|
@ -10,9 +10,6 @@
|
||||
<el-form-item label="扶梯朝右" prop="isRight">
|
||||
<el-checkbox v-model="addModel.isRight" />
|
||||
</el-form-item>
|
||||
<el-form-item label="旋转角度">
|
||||
<el-input-number v-model="addModel.rotationAngle"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="X轴坐标" prop="x">
|
||||
<el-input-number v-model="addModel.x" />
|
||||
</el-form-item>
|
||||
@ -40,7 +37,6 @@ export default {
|
||||
width: 25,
|
||||
x: 10,
|
||||
y: 10,
|
||||
rotationAngle: 0,
|
||||
isRight:false
|
||||
},
|
||||
rules: {
|
||||
@ -70,7 +66,6 @@ export default {
|
||||
this.addModel.x = model.point.x;
|
||||
this.addModel.y = model.point.y;
|
||||
this.addModel.isRight = model.isRight;
|
||||
this.addModel.rotationAngle = model.rotationAngle || 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -85,7 +80,6 @@ export default {
|
||||
},
|
||||
fill:'#fff',
|
||||
isRight: this.addModel.isRight,
|
||||
rotationAngle: this.addModel.rotationAngle,
|
||||
code: this.isUpdate ? this.addModel.code : getUID('Staircase', this.iscs.staircaseList),
|
||||
_type: 'Staircase',
|
||||
width: this.addModel.width
|
||||
@ -105,7 +99,6 @@ export default {
|
||||
},
|
||||
code: this.addModel.code,
|
||||
isRight: this.addModel.isRight,
|
||||
rotationAngle: this.addModel.rotationAngle,
|
||||
_type: 'Staircase',
|
||||
width: this.addModel.width
|
||||
};
|
||||
@ -121,8 +114,7 @@ export default {
|
||||
width: 25,
|
||||
x: 10,
|
||||
y: 10,
|
||||
isRight:false,
|
||||
rotationAngle: 0
|
||||
isRight:false
|
||||
};
|
||||
}
|
||||
}
|
||||
|
@ -103,7 +103,6 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$emit('iscsChange', this.$route.params.id);
|
||||
},
|
||||
beforeDestroy() {
|
||||
|
||||
|
@ -1,210 +0,0 @@
|
||||
<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>
|
@ -41,11 +41,7 @@
|
||||
<div class="cctv-box-top-right-title" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="cctv-box-content">
|
||||
<div>站厅</div>
|
||||
<div>站台</div>
|
||||
<div>云台</div>
|
||||
</div>
|
||||
<div class="cctv-box-content"></div>
|
||||
<div class="cctv-box-bottom">
|
||||
<div class="cctv-box-bottom-left">
|
||||
<div class="cctv-box-bottom-text">信息提示</div>
|
||||
@ -139,15 +135,7 @@ justify-content:center;text-align:center;
|
||||
border-bottom: 2px solid #fff;
|
||||
margin-left:4px;
|
||||
}
|
||||
.cctv-box-content{
|
||||
width: 1350px;
|
||||
border-top: 2px solid #8c8a89;
|
||||
border-left: 2px solid #8c8a89;
|
||||
border-right: 2px solid #fff;
|
||||
border-bottom: 2px solid #fff;
|
||||
height: 320px;
|
||||
margin:10px auto;
|
||||
}
|
||||
.cctv-box-content{}
|
||||
.cctv-box-bottom{width: 1300px;margin:30px auto;display:flex;}
|
||||
.cctv-box-bottom-left{display:flex;align-items:center;}
|
||||
.cctv-box-bottom-text{color: #56E5DE;width:80px;font-size:14px;}
|
||||
|
@ -1,26 +1,17 @@
|
||||
<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>
|
||||
|
||||
|
@ -1,26 +1,17 @@
|
||||
<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>
|
||||
|
||||
|
@ -1,25 +1,10 @@
|
||||
<template>
|
||||
<div>
|
||||
<iscsSystem ref="iscsPlate" :widthCanvas="1490" />
|
||||
</div>
|
||||
<div>
|
||||
屏蔽门
|
||||
</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>
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<div :id="iscsId" v-loading="loading" :style="{ width: this.canvasWidth +'px', height: this.canvasHeight +'px',background:'#45607B' }" class="iscs-canvas" />
|
||||
<div :id="iscsId" v-loading="loading" :style="{ width: this.canvasWidth +'px', height: this.canvasHeight +'px',background:'#000' }" class="iscs-canvas" />
|
||||
<el-button v-if="showBackButton" class="iscs-button" type="primary" @click="back">{{ $t('global.back') }}</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
Loading…
Reference in New Issue
Block a user