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

Psd子系统

Browse Source
This commit is contained in:
fan 2020-01-16 16:25:33 +08:00
parent 9b26c70100
commit 3b26366935
10 changed files with 376 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -48,6 +48,9 @@ export default class FireHydrantAlarmButton extends Group {
z: this.z,
shape: {
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'
}
});
this.grouper.add(this.polygonTop);

101
src/iscs/shape/psd/platformScreenDoor.js
View File

@ -2,6 +2,9 @@ import Group from 'zrender/src/container/Group';
import Text from 'zrender/src/graphic/Text';
import Rect from 'zrender/src/graphic/shape/Rect';
import Line from 'zrender/src/graphic/shape/Line';
import PsdClose from './psdClose';
import PsdOpen from './psdOpen';
import UnknownState from './unknownState';
export default class PlatformScreenDoor extends Group {
constructor(device) {
@ -60,99 +63,35 @@ export default class PlatformScreenDoor extends Group {
stroke: '#CBCBCB'
}
});
this.door = new Rect({
this.psdClose = new PsdClose({
model: {
zlevel: this.zlevel,
z: this.z,
shape: {
x: this.model.width / 4,
y: 0,
width: this.model.width / 2,
height: this.model.width / 2
},
style: {
fill: '#0F0'
z: this.z + 1,
width: this.model.width
}
});
this.doorLeftLine1 = new Line({
this.psdOpen = new PsdOpen({
model: {
zlevel: this.zlevel,
z: this.z,
shape: {
x1: this.model.width / 4 + 2,
y1: 2,
x2: this.model.width / 4 + 2,
y2: this.model.width / 2
},
style: {
stroke: '#000',
lineWidth: 0.5
z: this.z + 1,
width: this.model.width
}
});
this.doorLeftLine2 = new Line({
this.unknownState = new UnknownState({
model: {
zlevel: this.zlevel,
z: this.z,
shape: {
x1: this.model.width / 4 + 2,
y1: 2,
x2: this.model.width / 2 - 2,
y2: 2
},
style: {
stroke: '#000',
lineWidth: 0.5
z: this.z + 1,
width: this.model.width
}
});
this.doorRightLine1 = new Line({
zlevel: this.zlevel,
z: this.z,
shape: {
x1: this.model.width / 2 + 2,
y1: 2,
x2: this.model.width * 3 / 4 - 2,
y2: 2
},
style: {
stroke: '#000',
lineWidth: 0.5
}
});
this.doorRightLine2 = new Line({
zlevel: this.zlevel,
z: this.z,
shape: {
x1: this.model.width * 3 / 4 - 2,
y1: 2,
x2: this.model.width * 3 / 4 - 2,
y2: this.model.width / 2
},
style: {
stroke: '#000',
lineWidth: 0.5
}
});
this.doorCrack = new Line({
zlevel: this.zlevel,
z: this.z,
shape: {
x1: this.model.width / 2,
y1: 2,
x2: this.model.width / 2,
y2: this.model.width / 2
},
style: {
stroke : '#000',
lineWidth: 2
}
});
this.grouper.add(this.glass);
this.grouper.add(this.glassTopLine);
this.grouper.add(this.glassBottomLine);
this.grouper.add(this.door);
this.grouper.add(this.doorLeftLine1);
this.grouper.add(this.doorLeftLine2);
this.grouper.add(this.doorRightLine1);
this.grouper.add(this.doorRightLine2);
this.grouper.add(this.doorCrack);
this.grouper.add(this.psdClose);
this.grouper.add(this.psdOpen);
this.grouper.add(this.unknownState);
this.unknownState.hide();
this.psdOpen.hide();
}
setModel(dx, dy) {
this.model.point.x += dx;

104
src/iscs/shape/psd/psdClose.js Normal file
View File

@ -0,0 +1,104 @@
import Group from 'zrender/src/container/Group';
import Line from 'zrender/src/graphic/shape/Line';
import Rect from 'zrender/src/graphic/shape/Rect';
export default class PsdClose extends Group {
constructor(device) {
super();
this.model = device.model;
this.zlevel = device.model.zlevel;
this.z = device.model.z;
this.create();
}
create() {
this.door = new Rect({
zlevel: this.zlevel,
z: this.z,
shape: {
x: this.model.width / 4,
y: 0,
width: this.model.width / 2,
height: this.model.width / 2
},
style: {
fill: '#0F0'
}
});
this.doorLeftLine1 = new Line({
zlevel: this.zlevel,
z: this.z + 1,
shape: {
x1: this.model.width / 4 + 2,
y1: 2,
x2: this.model.width / 4 + 2,
y2: this.model.width / 2
},
style: {
stroke: '#000',
lineWidth: 0.5
}
});
this.doorLeftLine2 = new Line({
zlevel: this.zlevel,
z: this.z + 1,
shape: {
x1: this.model.width / 4 + 2,
y1: 2,
x2: this.model.width / 2 - 2,
y2: 2
},
style: {
stroke: '#000',
lineWidth: 0.5
}
});
this.doorRightLine1 = new Line({
zlevel: this.zlevel,
z: this.z + 1,
shape: {
x1: this.model.width / 2 + 2,
y1: 2,
x2: this.model.width * 3 / 4 - 2,
y2: 2
},
style: {
stroke: '#000',
lineWidth: 0.5
}
});
this.doorRightLine2 = new Line({
zlevel: this.zlevel,
z: this.z + 1,
shape: {
x1: this.model.width * 3 / 4 - 2,
y1: 2,
x2: this.model.width * 3 / 4 - 2,
y2: this.model.width / 2
},
style: {
stroke: '#000',
lineWidth: 0.5
}
});
this.doorCrack = new Line({
zlevel: this.zlevel,
z: this.z + 1,
shape: {
x1: this.model.width / 2,
y1: 2,
x2: this.model.width / 2,
y2: this.model.width / 2
},
style: {
stroke : '#000',
lineWidth: 2
}
});
this.add(this.door);
this.add(this.doorLeftLine1);
this.add(this.doorLeftLine2);
this.add(this.doorRightLine1);
this.add(this.doorRightLine2);
this.add(this.doorCrack);
}
}

98
src/iscs/shape/psd/psdOpen.js
View File

@ -0,0 +1,98 @@
import Group from 'zrender/src/container/Group';
import Line from 'zrender/src/graphic/shape/Line';
import Rect from 'zrender/src/graphic/shape/Rect';
import Polygon from 'zrender/src/graphic/shape/Polygon';
export default class PsdOpen extends Group {
constructor(device) {
super();
this.model = device.model;
this.zlevel = device.model.zlevel;
this.z = device.model.z;
this.create();
}
create() {
this.bgRect = new Rect({
zlevel: this.zlevel,
z: this.z - 1,
shape: {
x: this.model.width / 4,
y: 0,
width: this.model.width / 2,
height: this.model.width / 2
},
style: {
fill: '#000'
}
});
this.doorLeftFrame = new Line({
zlevel: this.zlevel,
z: this.z,
shape: {
x1: this.model.width / 4,
y1: 0,
x2: this.model.width / 4,
y2: this.model.width / 2
},
style: {
lineWidth: this.model.width / 40,
stroke: '#10F19A'
}
});
this.doorTopFrame = new Line({
zlevel: this.zlevel,
z: this.z,
shape: {
x1: this.model.width / 4,
y1: this.model.width / 80,
x2: this.model.width * 3 / 4,
y2: this.model.width / 80
},
style: {
lineWidth: this.model.width / 40,
stroke: '#10F19A'
}
});
this.doorRightFrame = new Line({
zlevel: this.zlevel,
z: this.z,
shape: {
x1: this.model.width * 3 / 4,
y1: 0,
x2: this.model.width * 3 / 4,
y2: this.model.width / 2
},
style: {
lineWidth: this.model.width / 40,
stroke: '#10F19A'
}
});
this.leftPolygon = new Polygon({
zlevel: this.zlevel,
z: this.z,
shape: {
points: [[this.model.width * 21 / 80, this.model.width * 3 / 80], [this.model.width * 5 / 12, this.model.width / 8], [this.model.width * 5 / 12, this.model.width * 37 / 80], [this.model.width * 21 / 80, this.model.width * 37 / 80]]
},
style: {
fill: '#00CC33'
}
});
this.rightPolygon = new Polygon({
zlevel: this.zlevel,
z: this.z,
shape: {
points: [
[this.model.width * 7 / 12, this.model.width / 8], [this.model.width * 59 / 80, this.model.width * 3 / 80], [this.model.width * 59 / 80, this.model.width * 37 / 80], [this.model.width * 7 / 12, this.model.width * 37 / 80]]
},
style: {
fill: '#00CC33'
}
});
this.add(this.bgRect);
this.add(this.doorLeftFrame);
this.add(this.doorRightFrame);
this.add(this.doorTopFrame);
this.add(this.leftPolygon);
this.add(this.rightPolygon);
}
}

45
src/iscs/shape/psd/unknownState.js Normal file
View File

@ -0,0 +1,45 @@
import Group from 'zrender/src/container/Group';
import Rect from 'zrender/src/graphic/shape/Rect';
import Line from 'zrender/src/graphic/shape/Line';
export default class UnknownState extends Group {
constructor(device) {
super();
this.model = device.model;
this.zlevel = device.model.zlevel;
this.z = device.model.z;
this.create();
}
create() {
this.doorFrame = new Rect({
zlevel: this.zlevel,
z: this.z,
shape: {
x: this.model.width / 4,
y: 0,
width: this.model.width / 2,
height: this.model.width / 2
},
style: {
stroke: '#10F19A',
fill: '#B5B201'
}
});
this.doorCrack = new Line({
zlevel: this.zlevel,
z: this.z + 1,
shape: {
x1: this.model.width / 2,
y1: 0,
x2: this.model.width / 2,
y2: this.model.width / 2
},
style: {
lineWidth: 2,
stroke: '#10F19A'
}
});
this.add(this.doorFrame);
this.add(this.doorCrack);
}
}

10
src/views/system/iscsDesign/demonList.vue
View File

@ -87,8 +87,8 @@ export default {
type: 'system',
children: [
{
name: 'HMI界面',
mode: 'hmi',
name: 'FAS界面',
mode: 'fas',
id: '1',
type: 'interface'
},
@ -97,6 +97,12 @@ export default {
mode: 'bas',
id: '2',
type: 'interface'
},
{
name: 'PSD界面',
mode: 'psd',
id: '3',
type: 'interface'
}
]
}

9
src/views/system/iscsDraw/index.vue
View File

@ -5,8 +5,9 @@
<iscs-plate ref="iscsPlate" />
</div>
<div class="map-draft">
<iscs-operate v-if="iscsMode=='hmi'" ref="iscsOperate" @iscsChange="iscsChange" />
<iscs-bas-operate v-else-if="iscsMode=='bas'" ref="iscsBasOperate" @iscsChange="iscsChange" />
<iscs-operate v-if="iscsMode==='fas'" ref="iscsOperate" @iscsChange="iscsChange" />
<iscs-bas-operate v-else-if="iscsMode==='bas'" ref="iscsBasOperate" @iscsChange="iscsChange" />
<iscs-psd-operate v-else-if="iscsMode==='psd'" ref="iscsPsdOperate" @iscsChange="iscsChange" />
</div>
</div>
</transition>
@ -15,12 +16,14 @@
import IscsPlate from '@/views/iscsSystem/index';
import IscsOperate from './iscsOperate/index';
import IscsBasOperate from './iscsBasOperate/index';
import IscsPsdOperate from './iscsPsdOperate/index';
export default {
name: 'IscsView',
components: {
IscsPlate,
IscsOperate,
IscsBasOperate
IscsBasOperate,
IscsPsdOperate
},
data() {
return {

17
src/views/system/iscsDraw/iscsOperate/index.vue
View File

@ -1,7 +1,7 @@
<template>
<transition name="el-zoom-in-center">
<div class="map-control" :style="{ height: height+'px' }">
<el-card type="border-card">
<div class="map-control heightClass">
<el-card type="border-card" class="heightClass">
<div slot="header" class="clearfix">
<el-button
type="text"
@ -50,14 +50,6 @@
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane label="屏蔽门" name="psd">
<platform-screen-door
ref="platformScreenDoor"
style="width: 90%;"
@createDataModel="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
</el-tabs>
</el-card>
</div>
@ -70,7 +62,6 @@ import FireHydranAlarmButton from './fireHydranAlarmButton';
import GasFireControl from './gasFireControl';
import SmokeDetector from './smokeDetector';
import TemperatureDetector from './temperatureDetector';
import PlatformScreenDoor from './platformScreenDoor';
export default {
name: 'IscsOperate',
@ -79,8 +70,7 @@ export default {
FireHydranAlarmButton,
GasFireControl,
SmokeDetector,
TemperatureDetector,
PlatformScreenDoor
TemperatureDetector
},
mixins: [
],
@ -131,4 +121,5 @@ export default {
float: right;
width: 100%;
}
.heightClass{height:100%;}
</style>

85
src/views/system/iscsDraw/iscsPsdOperate/index.vue Normal file
View File

@ -0,0 +1,85 @@
<template>
<transition name="el-zoom-in-center">
<div class="map-control heightClass ">
<el-card type="border-card" class="heightClass">
<div slot="header" class="clearfix">
<el-button
type="text"
style="float: right; padding: 3px 0; margin-right: 5px;"
@click="handleSave"
>{{ $t('ibp.save') }}</el-button>
</div>
<el-tabs v-model="enabledTab" class="mapEdit" type="card" @tab-click="handleTabClick">
<el-tab-pane label="屏蔽门" name="psd">
<platform-screen-door
ref="platformScreenDoor"
style="width: 90%;"
@createDataModel="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
</el-tabs>
</el-card>
</div>
</transition>
</template>
<script>
import {deviceFactory} from '@/iscs/utils/parser';
import PlatformScreenDoor from './platformScreenDoor';
export default {
name: 'IscsOperate',
components: {
PlatformScreenDoor
},
mixins: [
],
data() {
return {
enabledTab: 'psd',
data: '',
stationCode: ''
};
},
computed: {
height() {
return this.$store.state.config.height;
}
},
watch: {
'$store.state.iscs.rightClickCount': function (val) {
const model = this.$store.getters['iscs/updateDeviceData'];
this.enabledTab = model._type;
}
},
mounted() {
},
beforeDestroy() {
},
methods: {
createDataModel(model) {
const newModel = deviceFactory(model._type, model);
this.$store.dispatch('iscs/updateIscsDevices', newModel.model);
},
deleteDataModel(model) {
this.$store.dispatch('iscs/deleteIscsDevices', model);
},
handleSave() {
const data = JSON.stringify(this.$store.state.iscs.iscs);
console.log(data);
},
handleTabClick() {
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.map-control {
float: right;
width: 100%;
}
.heightClass{height:100%;}
</style>

0
src/views/system/iscsDraw/iscsOperate/platformScreenDoor.vue → src/views/system/iscsDraw/iscsPsdOperate/platformScreenDoor.vue
View File