Merge branch 'dev_iscs' of https://git.code.tencent.com/lian-cbtc/jl-client into dev_iscs
This commit is contained in:
commit
4c140a7c2a
@ -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);
|
||||
|
@ -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({
|
||||
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.psdClose = new PsdClose({
|
||||
model: {
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + 1,
|
||||
width: this.model.width
|
||||
}
|
||||
});
|
||||
this.doorLeftLine1 = new Line({
|
||||
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
|
||||
this.psdOpen = new PsdOpen({
|
||||
model: {
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + 1,
|
||||
width: this.model.width
|
||||
}
|
||||
});
|
||||
this.doorLeftLine2 = new Line({
|
||||
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
|
||||
this.unknownState = new UnknownState({
|
||||
model: {
|
||||
zlevel: this.zlevel,
|
||||
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
104
src/iscs/shape/psd/psdClose.js
Normal 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);
|
||||
}
|
||||
}
|
@ -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
45
src/iscs/shape/psd/unknownState.js
Normal 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);
|
||||
}
|
||||
}
|
@ -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'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
@ -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 {
|
||||
|
@ -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"
|
||||
@ -66,14 +66,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>
|
||||
@ -88,7 +80,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',
|
||||
@ -99,8 +90,7 @@ export default {
|
||||
FireHydranAlarmButton,
|
||||
GasFireControl,
|
||||
SmokeDetector,
|
||||
TemperatureDetector,
|
||||
PlatformScreenDoor
|
||||
TemperatureDetector
|
||||
},
|
||||
mixins: [
|
||||
],
|
||||
@ -151,4 +141,5 @@ export default {
|
||||
float: right;
|
||||
width: 100%;
|
||||
}
|
||||
.heightClass{height:100%;}
|
||||
</style>
|
||||
|
85
src/views/system/iscsDraw/iscsPsdOperate/index.vue
Normal file
85
src/views/system/iscsDraw/iscsPsdOperate/index.vue
Normal 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>
|
Loading…
Reference in New Issue
Block a user