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

FAS子系统测试

Browse Source
This commit is contained in:
fan 2020-01-16 09:23:37 +08:00
parent bf1497164c
commit de7176ac5e
12 changed files with 648 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/iscs/constant/deviceRender.js
View File

@ -2,17 +2,41 @@ import deviceType from './deviceType';
const deviceRender = {};
/** IbpText渲染配置*/
deviceRender[deviceType.ManualAlarmButton] = {
_type: deviceType.ManualAlarmButton,
zlevel: 1,
z: 4
};
/** CheckBox渲染配置 */
deviceRender[deviceType.CheckBox] = {
_type: deviceType.CheckBox,
zlevel: 10,
z: 0
};
/** 手动报警按钮渲染配置*/
deviceRender[deviceType.ManualAlarmButton] = {
_type: deviceType.ManualAlarmButton,
zlevel: 1,
z: 4
};
/** 消火栓报警按钮渲染配置 */
deviceRender[deviceType.FireHydranAlarmButton] = {
_type: deviceType.FireHydranAlarmButton,
zlevel: 1,
z: 4
};
/** 气体灭火渲染配置 */
deviceRender[deviceType.GasFireControl] = {
_type: deviceType.GasFireControl,
zlevel: 1,
z: 4
};
/** 烟感探测器渲染配置 */
deviceRender[deviceType.SmokeDetector] = {
_type: deviceType.SmokeDetector,
zlevel: 1,
z: 4
};
/** 温度探测器渲染配置 */
deviceRender[deviceType.TemperatureDetector] = {
_type: deviceType.TemperatureDetector,
zlevel: 1,
z: 4
};
export default deviceRender;

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

@ -1,6 +1,10 @@
const deviceType = {
ManualAlarmButton: 'manualAlarmButton',
CheckBox: 'CheckBox'
CheckBox: 'CheckBox',
FireHydranAlarmButton: 'fireHydranAlarmButton',
GasFireControl: 'gasFireControl',
SmokeDetector: 'smokeDetector',
TemperatureDetector: 'TemperatureDetector'
};
export default deviceType;

8
src/iscs/shape/factory.js
View File

@ -1,10 +1,18 @@
import ManualAlarmButton from './manualAlarmButton';
import deviceType from '../constant/deviceType';
import CheckBox from './checkBox';
import FireHydranAlarmButton from './fireHydrantAlarmButton';
import GasFireControl from './gasFireControl';
import SmokeDetector from './smokeDetector';
import TemperatureDetector from './temperatureDetector';
const iscsShape = {};
iscsShape[deviceType.ManualAlarmButton] = ManualAlarmButton;
iscsShape[deviceType.CheckBox] = CheckBox;
iscsShape[deviceType.FireHydranAlarmButton] = FireHydranAlarmButton;
iscsShape[deviceType.GasFireControl] = GasFireControl;
iscsShape[deviceType.SmokeDetector] = SmokeDetector;
iscsShape[deviceType.TemperatureDetector] = TemperatureDetector;
function shapefactory(device, iscs) {
const type = device.model._type;

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

@ -2,7 +2,7 @@ import Group from 'zrender/src/container/Group';
import Rect from 'zrender/src/graphic/shape/Rect';
import Polygon from 'zrender/src/graphic/shape/Polygon';
export default class FireHydrantAlarmButton extends Group() {
export default class FireHydrantAlarmButton extends Group {
constructor(device) {
super();
this.model = device.model;
@ -13,22 +13,48 @@ export default class FireHydrantAlarmButton extends Group() {
this.create();
}
create() {
this.grouper = new Group({
id: this.model.code,
position: [this.model.point.x, this.model.point.y]
});
this.add(this.grouper);
this.rect = new Rect({
zlevel: this.model.zlevel,
z: this.model.z,
zlevel: this.zlevel,
z: this.z,
shape: {
x: this.model.point.x,
y: this.model.point.y,
x: 0,
y: 0,
width: this.model.width,
height: this.model.height
height: this.model.width / 2
},
style: {
fill: '#0f0'
}
});
this.add(this.rect);
this.grouper.add(this.rect);
const width = this.model.width;
this.polygonTop = new Polygon({
zlevel: this.zlevel,
z: this.z,
shape: {
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'
}
});
this.polygonBottom = new Polygon({
zlevel: this.zlevel,
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]]
}
});
this.grouper.add(this.polygonTop);
this.grouper.add(this.polygonBottom);
}
setModel(dx, dy) {
this.model.point.x += dx;
this.model.point.y += dy;
}
}

84
src/iscs/shape/gasFireControl.js Normal file
View File

@ -0,0 +1,84 @@
import Group from 'zrender/src/container/Group';
import Rect from 'zrender/src/graphic/shape/Rect';
import Isogon from 'zrender/src/graphic/shape/Isogon';
import Circle from 'zrender/src/graphic/shape/Circle';
export default class GasFireControl extends Group {
constructor(device) {
super();
this.model = device.model;
this.zlevel = device.model.zlevel;
this.z = device.z;
this._type = device.model._type;
this._code = device.model.code;
this.create();
}
create() {
this.grouper = new Group({
id: this.model.code,
position: [this.model.point.x, this.model.point.y]
});
this.add(this.grouper);
this.rect = new Rect({
zlevel: this.zlevel,
z: this.z,
shape: {
x: 0,
y: 0,
width: this.model.width,
height: this.model.width
},
style: {
lineWidth: 1,
stroke: '#0F0'
}
});
this.grouper.add(this.rect);
this.isogon = new Isogon({
zlevel: this.zlevel,
z: this.z,
shape: {
x: this.model.width / 3,
y: this.model.width / 2,
r: this.model.width / 4,
n: 3
},
style: {
fill: '#0F0'
}
});
this.isogon.origin = [this.model.width / 3, this.model.width / 2];
this.isogon.rotation = Math.PI / 180 * Number(90);
this.grouper.add(this.isogon);
this.circleTop = new Circle({
zlevel: this.zlevel,
z: this.z,
shape: {
cx: this.model.width * 2 / 3,
cy: this.model.width / 4,
r: this.model.width / 12
},
style: {
fill: '#0F0'
}
});
this.circleBottom = new Circle({
zlevel: this.zlevel,
z: this.z,
shape: {
cx: this.model.width * 2 / 3,
cy: this.model.width * 3 / 4,
r: this.model.width / 12
},
style: {
fill: '#0F0'
}
});
this.grouper.add(this.circleTop);
this.grouper.add(this.circleBottom);
}
setModel(dx, dy) {
this.model.point.x += dx;
this.model.point.y += dy;
}
}

59
src/iscs/shape/smokeDetector.js Normal file
View File

@ -0,0 +1,59 @@
import Group from 'zrender/src/container/Group';
import Circle from 'zrender/src/graphic/shape/Circle';
import Text from 'zrender/src/graphic/Text';
export default class SmokeDetector extends Group {
constructor(device) {
super();
this.model = device.model;
this.zlevel = device.model.zlevel;
this.z = device.z;
this._type = device.model._type;
this._code = device.model.code;
this.create();
}
create() {
this.grouper = new Group({
id: this.model.code,
position: [this.model.point.x, this.model.point.y]
});
this.add(this.grouper);
this.circle = new Circle({
zlevel: this.zlevel,
z: this.z,
shape: {
cx: this.model.width / 2,
cy: this.model.width / 2,
r: this.model.width / 2
},
style: {
lineWidth: 1,
stroke: '#0F0'
}
});
this.grouper.add(this.circle);
this.text = new Text({
zlevel: this.model.zlevel,
z: this.model.z,
style: {
x: this.model.width / 4,
y: 0,
fontWeight: 300,
fontSize: this.model.width,
fontFamily: 'Consolas',
text: 'Y',
textFill: this.model.textFill || '#0F0',
textPosition: this.model.textPosition || 'inside',
textLineHeight: this.model.fontSize || 14
}
});
const boundingRect = this.text.getBoundingRect();
const distance = this.model.width / 2 - boundingRect.y - boundingRect.height / 2;
this.text.setStyle('y', distance);
this.grouper.add(this.text);
}
setModel(dx, dy) {
this.model.point.x += dx;
this.model.point.y += dy;
}
}

59
src/iscs/shape/temperatureDetector.js Normal file
View File

@ -0,0 +1,59 @@
import Group from 'zrender/src/container/Group';
import Circle from 'zrender/src/graphic/shape/Circle';
import Text from 'zrender/src/graphic/Text';
export default class TemperatureDetector extends Group {
constructor(device) {
super();
this.model = device.model;
this.zlevel = device.model.zlevel;
this.z = device.z;
this._type = device.model._type;
this._code = device.model.code;
this.create();
}
create() {
this.grouper = new Group({
id: this.model.code,
position: [this.model.point.x, this.model.point.y]
});
this.add(this.grouper);
this.circle = new Circle({
zlevel: this.zlevel,
z: this.z,
shape: {
cx: this.model.width / 2,
cy: this.model.width / 2,
r: this.model.width / 2
},
style: {
lineWidth: 1,
stroke: '#0F0'
}
});
this.grouper.add(this.circle);
this.text = new Text({
zlevel: this.model.zlevel,
z: this.model.z,
style: {
x: this.model.width / 4,
y: 0,
fontWeight: 300,
fontSize: this.model.width,
fontFamily: 'Consolas',
text: 'W',
textFill: this.model.textFill || '#0F0',
textPosition: this.model.textPosition || 'inside',
textLineHeight: this.model.fontSize || 14
}
});
const boundingRect = this.text.getBoundingRect();
const distance = this.model.width / 2 - boundingRect.y - boundingRect.height / 2;
this.text.setStyle('y', distance);
this.grouper.add(this.text);
}
setModel(dx, dy) {
this.model.point.x += dx;
this.model.point.y += dy;
}
}

28
src/iscs/utils/parser.js
View File

@ -39,6 +39,22 @@ export function parser(data) {
zrUtil.each(data.manualAlarmButtonList || [], elem => {
iscsDevice[elem.code] = deviceFactory(deviceType.ManualAlarmButton, elem);
}, this);
zrUtil.each(data.fireHydranAlarmButtonList || [], elem => {
iscsDevice[elem.code] = deviceFactory(deviceType.FireHydranAlarmButton, elem);
}, this);
zrUtil.each(data.gasFireControlList || [], elem => {
iscsDevice[elem.code] = deviceFactory(deviceType.GasFireControl, elem);
}, this);
zrUtil.each(data.smokeDetectorList || [], elem => {
iscsDevice[elem.code] = deviceFactory(deviceType.SmokeDetector, elem);
}, this);
zrUtil.each(data.temperatureDetectorList || [], elem => {
iscsDevice[elem.code] = deviceFactory(deviceType.TemperatureDetector, elem);
});
}
return iscsDevice;
@ -66,6 +82,18 @@ export function updateIscsData(device) {
case deviceType.ManualAlarmButton :
updateIscsListByDevice(iscsData, 'manualAlarmButtonList', device);
break;
case deviceType.FireHydranAlarmButton:
updateIscsListByDevice(iscsData, 'fireHydranAlarmButtonList', device);
break;
case deviceType.GasFireControl:
updateIscsListByDevice(iscsData, 'gasFireControlList', device);
break;
case deviceType.SmokeDetector:
updateIscsListByDevice(iscsData, 'smokeDetectorList', device);
break;
case deviceType.TemperatureDetector:
updateIscsListByDevice(iscsData, 'temperatureDetectorList', device);
break;
}
store.dispatch('iscs/setIscsData', iscsData);
}

103
src/views/system/iscsDraw/iscsOperate/fireHydranAlarmButton.vue Normal file
View File

@ -0,0 +1,103 @@
<template>
<div>
<el-form ref="form" :rule="rules" :model="addModel" label-width="100px">
<el-form-item v-if="addModel.code" label="按钮编号" prop="code">
<el-input v-model="addModel.code" />
</el-form-item>
<el-form-item label="图形宽度" prop="width">
<el-input-number v-model="addModel.width" />
</el-form-item>
<el-form-item label="X轴坐标" prop="x">
<el-input-number v-model="addModel.x" />
</el-form-item>
<el-form-item label="Y轴坐标" prop="y">
<el-input-number v-model="addModel.y" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
<el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
<el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'FireHydranAlarmButton',
data() {
return {
addModel:{
code: '',
width: 25,
x: 10,
y: 10
},
rules: {
width:[{ required: true, message:'请输入设备图形宽度', trigger: 'blur' }],
x: [{ required: true, message: '请输入设备图形的X轴坐标', trigger: 'blur' }],
y: [{ required: true, message: '请输入设备图形的Y轴坐标', trigger: 'blur' }]
},
showDeleteButton: false,
buttonText: '立即创建'
};
},
methods: {
onSubmit(form) {
if (!this.addModel.code) {
this.generateCode();
}
this.$refs[form].validate((valid) => {
if (valid) {
const maButtonModel = {
point: {
x: this.addModel.x,
y: this.addModel.y
},
code: this.addModel.code,
_type: 'fireHydranAlarmButton',
width: this.addModel.width
};
this.$emit('createDataModel', maButtonModel);
this.initPage();
} else {
return false;
}
});
},
deleteDevice() {
const maButtonModel = {
point: {
x: this.addModel.x,
y: this.addModel.y
},
code: this.addModel.code,
_type: 'fireHydranAlarmButton',
width: this.addModel.width
};
this.$emit('deleteDataModel', maButtonModel);
this.initPage();
},
initPage() {
this.isUpdate = false;
this.buttonText = '立即创建';
this.showDeleteButton = false;
this.addModel = {
code: '',
width: 25,
x: 10,
y: 10
};
},
generateCode() {
const mydate = new Date();
this.addModel.code = 'fireHydranAlarmButton_' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
}
}
};
</script>
<style scoped>
</style>

103
src/views/system/iscsDraw/iscsOperate/gasFireControl.vue Normal file
View File

@ -0,0 +1,103 @@
<template>
<div>
<el-form ref="form" :rule="rules" :model="addModel" label-width="100px">
<el-form-item v-if="addModel.code" label="按钮编号" prop="code">
<el-input v-model="addModel.code" />
</el-form-item>
<el-form-item label="图形宽度" prop="width">
<el-input-number v-model="addModel.width" />
</el-form-item>
<el-form-item label="X轴坐标" prop="x">
<el-input-number v-model="addModel.x" />
</el-form-item>
<el-form-item label="Y轴坐标" prop="y">
<el-input-number v-model="addModel.y" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
<el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
<el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'GasFireControl',
data() {
return {
addModel:{
code: '',
width: 25,
x: 10,
y: 10
},
rules: {
width:[{ required: true, message:'请输入设备图形宽度', trigger: 'blur' }],
x: [{ required: true, message: '请输入设备图形的X轴坐标', trigger: 'blur' }],
y: [{ required: true, message: '请输入设备图形的Y轴坐标', trigger: 'blur' }]
},
showDeleteButton: false,
buttonText: '立即创建'
};
},
methods: {
onSubmit(form) {
if (!this.addModel.code) {
this.generateCode();
}
this.$refs[form].validate((valid) => {
if (valid) {
const maButtonModel = {
point: {
x: this.addModel.x,
y: this.addModel.y
},
code: this.addModel.code,
_type: 'gasFireControl',
width: this.addModel.width
};
this.$emit('createDataModel', maButtonModel);
this.initPage();
} else {
return false;
}
});
},
deleteDevice() {
const maButtonModel = {
point: {
x: this.addModel.x,
y: this.addModel.y
},
code: this.addModel.code,
_type: 'gasFireControl',
width: this.addModel.width
};
this.$emit('deleteDataModel', maButtonModel);
this.initPage();
},
initPage() {
this.isUpdate = false;
this.buttonText = '立即创建';
this.showDeleteButton = false;
this.addModel = {
code: '',
width: 25,
x: 10,
y: 10
};
},
generateCode() {
const mydate = new Date();
this.addModel.code = 'gasFireControl_' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
}
}
};
</script>
<style scoped>
</style>

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

@ -12,12 +12,36 @@
<el-tabs v-model="enabledTab" class="mapEdit" type="card" @tab-click="handleTabClick">
<el-tab-pane label="手动报警按钮" name="maButton">
<manual-alarm-button
ref="clock"
ref="maButton"
style="width:90%"
@createDataModel="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane label="消火栓报警按钮" name="fhaButton">
<fire-hydran-alarm-button
ref="fhaButton"
style="width: 90%"
@createDataModel="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane label="气体灭火" name="gasFireControl">
<gas-fire-control
ref="gasFireControl"
style="width: 90%;"
@createDataModel="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane label="烟感探测器" name="smokeDetector">
<smoke-detector
ref="smokeDetector"
style="width: 90%;"
@createDataModel="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
</el-tabs>
</el-card>
</div>
@ -26,11 +50,17 @@
<script>
import {deviceFactory} from '@/iscs/utils/parser';
import ManualAlarmButton from './manualAlarmButton';
import FireHydranAlarmButton from './fireHydranAlarmButton';
import GasFireControl from './gasFireControl';
import SmokeDetector from './smokeDetector';
export default {
name: 'IscsOperate',
components: {
ManualAlarmButton
ManualAlarmButton,
FireHydranAlarmButton,
GasFireControl,
SmokeDetector
},
mixins: [
],

103
src/views/system/iscsDraw/iscsOperate/smokeDetector.vue Normal file
View File

@ -0,0 +1,103 @@
<template>
<div>
<el-form ref="form" :rule="rules" :model="addModel" label-width="100px">
<el-form-item v-if="addModel.code" label="按钮编号" prop="code">
<el-input v-model="addModel.code" />
</el-form-item>
<el-form-item label="图形宽度" prop="width">
<el-input-number v-model="addModel.width" />
</el-form-item>
<el-form-item label="X轴坐标" prop="x">
<el-input-number v-model="addModel.x" />
</el-form-item>
<el-form-item label="Y轴坐标" prop="y">
<el-input-number v-model="addModel.y" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
<el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
<el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'GasFireControl',
data() {
return {
addModel:{
code: '',
width: 25,
x: 10,
y: 10
},
rules: {
width:[{ required: true, message:'请输入设备图形宽度', trigger: 'blur' }],
x: [{ required: true, message: '请输入设备图形的X轴坐标', trigger: 'blur' }],
y: [{ required: true, message: '请输入设备图形的Y轴坐标', trigger: 'blur' }]
},
showDeleteButton: false,
buttonText: '立即创建'
};
},
methods: {
onSubmit(form) {
if (!this.addModel.code) {
this.generateCode();
}
this.$refs[form].validate((valid) => {
if (valid) {
const maButtonModel = {
point: {
x: this.addModel.x,
y: this.addModel.y
},
code: this.addModel.code,
_type: 'smokeDetector',
width: this.addModel.width
};
this.$emit('createDataModel', maButtonModel);
this.initPage();
} else {
return false;
}
});
},
deleteDevice() {
const maButtonModel = {
point: {
x: this.addModel.x,
y: this.addModel.y
},
code: this.addModel.code,
_type: 'smokeDetector',
width: this.addModel.width
};
this.$emit('deleteDataModel', maButtonModel);
this.initPage();
},
initPage() {
this.isUpdate = false;
this.buttonText = '立即创建';
this.showDeleteButton = false;
this.addModel = {
code: '',
width: 25,
x: 10,
y: 10
};
},
generateCode() {
const mydate = new Date();
this.addModel.code = 'smokeDetector_' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
}
}
};
</script>
<style scoped>
</style>