iscs 绘图数据修改

This commit is contained in:
joylink_cuiweidong 2020-02-07 11:25:27 +08:00
parent 8601589112
commit 169035cddf
19 changed files with 37 additions and 318 deletions

File diff suppressed because one or more lines are too long

View File

@ -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 {

View File

@ -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);

View File

@ -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);

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: {
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);

View File

@ -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);

View File

@ -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);

View File

@ -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);

View File

@ -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) {

View File

@ -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);

View File

@ -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: [
],

View File

@ -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
};
}
}

View File

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

View File

@ -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>

View File

@ -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;}

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>