Merge branch 'dev_iscs' of https://git.code.tencent.com/lian-cbtc/jl-client into dev_iscs

# Conflicts:
#	src/iscs/constant/deviceType.js
#	src/iscs/shape/factory.js
#	src/iscs/utils/parser.js

src/iscs/constant/deviceRender.js

@@ -2,18 +2,48 @@ 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
+};
+/** 屏蔽门渲染配置 */
+deviceRender[deviceType.PlatformScreenDoor] = {
+    _type: deviceType.PlatformScreenDoor,
+    zlevel: 1,
+    z: 4
+};
 
 /** FrozenPump渲染配置 */
 deviceRender[deviceType.FrozenPump] = {

src/iscs/constant/deviceType.js

@@ -1,7 +1,12 @@
 const deviceType = {
     ManualAlarmButton: 'manualAlarmButton',
     CheckBox: 'CheckBox',
-    FrozenPump:'FrozenPump'
+    FrozenPump:'FrozenPump',
+    FireHydranAlarmButton: 'fireHydranAlarmButton',
+    GasFireControl: 'gasFireControl',
+    SmokeDetector: 'smokeDetector',
+    TemperatureDetector: 'temperatureDetector',
+    PlatformScreenDoor: 'platformScreenDoor'
 };
 
 export default deviceType;

src/iscs/shape/factory.js

@@ -2,11 +2,22 @@ import ManualAlarmButton from './manualAlarmButton';
 import deviceType from '../constant/deviceType';
 import CheckBox from './checkBox';
 import FrozenPump from './frozenPump';
+import FireHydranAlarmButton from './fireHydrantAlarmButton';
+import GasFireControl from './gasFireControl';
+import SmokeDetector from './smokeDetector';
+import TemperatureDetector from './temperatureDetector';
+import PlatformScreenDoor from './psd/platformScreenDoor';
 
 const iscsShape = {};
 iscsShape[deviceType.ManualAlarmButton] = ManualAlarmButton;
 iscsShape[deviceType.CheckBox] = CheckBox;
 iscsShape[deviceType.FrozenPump] = FrozenPump;
+iscsShape[deviceType.FireHydranAlarmButton] = FireHydranAlarmButton;
+iscsShape[deviceType.GasFireControl] = GasFireControl;
+iscsShape[deviceType.SmokeDetector] = SmokeDetector;
+iscsShape[deviceType.TemperatureDetector] = TemperatureDetector;
+iscsShape[deviceType.PlatformScreenDoor] = PlatformScreenDoor;
+
 function shapefactory(device, iscs) {
     const type = device.model._type;
     const shape = iscsShape[type];

src/iscs/shape/fireHydrantAlarmButton.js

@@ -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,
+            zlevel: this.zlevel,
-            z: this.model.z,
+            z: this.z,
             shape: {
-                x: this.model.point.x,
+                x: 0,
-                y: this.model.point.y,
+                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;
     }
 }

src/iscs/shape/gasFireControl.js

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

src/iscs/shape/psd/platformScreenDoor.js

@@ -0,0 +1,161 @@
+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';
+
+export default class PlatformScreenDoor 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.glass = new Rect({
+            zlevel: this.zlevel,
+            z: this.z,
+            shape: {
+                x: 0,
+                y: 0,
+                width: this.model.width,
+                height: this.model.width / 2
+            },
+            style: {
+                fill: '#FFFFFF'
+            }
+        });
+        this.glassTopLine = new Line({
+            zlevel: this.zlevel,
+            z: this.z,
+            shape: {
+                x1: 0,
+                y1: this.model.width * 5 / 16,
+                x2: this.model.width,
+                y2: this.model.width * 5 / 16
+            },
+            style: {
+                lineWidth: 2,
+                stroke: '#CBCBCB'
+            }
+        });
+        this.glassBottomLine = new Line({
+            zlevel: this.zlevel,
+            z: this.z,
+            shape: {
+                x1: 0,
+                y1: this.model.width * 7 / 16,
+                x2: this.model.width,
+                y2: this.model.width * 7 / 16
+            },
+            style: {
+                lineWidth: 2,
+                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.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.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.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);
+    }
+    setModel(dx, dy) {
+        this.model.point.x += dx;
+        this.model.point.y += dy;
+    }
+}

src/iscs/shape/smokeDetector.js

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

src/iscs/shape/temperatureDetector.js

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

src/iscs/utils/parser.js

@@ -42,6 +42,25 @@ export function parser(data) {
         zrUtil.each(data.frozenPumpList || [], elem => {
             iscsDevice[elem.code] = deviceFactory(deviceType.FrozenPump, 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);
+        });
+
+        zrUtil.each(data.platformScreenDoorList || [], elem =>{
+            iscsDevice[elem.code] = deviceFactory(deviceType.PlatformScreenDoor, elem);
+        });
     }
 
     return iscsDevice;
@@ -59,22 +78,34 @@ function updateIscsListByDevice(iscs, name, device) {
     } else {
         iscs[name] = [device];
     }
-
     return list;
 }
 
 export function updateIscsData(device) {
     const iscsData = store.getters['iscs/iscs'];
     switch (device._type) {
-    case deviceType.ManualAlarmButton : {
+    case deviceType.ManualAlarmButton :
         updateIscsListByDevice(iscsData, 'manualAlarmButtonList', device);
         break;
-    }
+    case deviceType.FireHydranAlarmButton:
-    case deviceType.FrozenPump : {
+        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;
+    case deviceType.PlatformScreenDoor:
+        updateIscsListByDevice(iscsData, 'platformScreenDoorList', device);
+        break;
+    case deviceType.FrozenPump :
         updateIscsListByDevice(iscsData, 'frozenPumpList', device);
         break;
     }
-    }
 
     store.dispatch('iscs/setIscsData', iscsData);
 }

src/views/system/iscsDraw/iscsOperate/fireHydranAlarmButton.vue

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

src/views/system/iscsDraw/iscsOperate/gasFireControl.vue

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

src/views/system/iscsDraw/iscsOperate/index.vue

@@ -12,12 +12,52 @@
         <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-tab-pane label="温度探测器" name="temperatureDetector">
+            <temperature-detector
+              ref="temperatureDetector"
+              style="width: 90%"
+              @createDataModel="createDataModel"
+              @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>
@@ -26,17 +66,27 @@
 <script>
 import {deviceFactory} from '@/iscs/utils/parser';
 import ManualAlarmButton from './manualAlarmButton';
+import FireHydranAlarmButton from './fireHydranAlarmButton';
+import GasFireControl from './gasFireControl';
+import SmokeDetector from './smokeDetector';
+import TemperatureDetector from './temperatureDetector';
+import PlatformScreenDoor from './platformScreenDoor';
 
 export default {
     name: 'IscsOperate',
     components: {
-        ManualAlarmButton
+        ManualAlarmButton,
+        FireHydranAlarmButton,
+        GasFireControl,
+        SmokeDetector,
+        TemperatureDetector,
+        PlatformScreenDoor
     },
     mixins: [
     ],
     data() {
         return {
-            enabledTab: 'Background',
+            enabledTab: 'maButton',
             data: '',
             stationCode: ''
         };

src/views/system/iscsDraw/iscsOperate/platformScreenDoor.vue

@@ -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: 'PlatformScreenDoor',
+    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: 'platformScreenDoor',
+                        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: 'platformScreenDoor',
+                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 = 'platformScreenDoor_' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
+        }
+    }
+
+};
+</script>
+
+<style scoped>
+
+</style>

src/views/system/iscsDraw/iscsOperate/smokeDetector.vue

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

src/views/system/iscsDraw/iscsOperate/temperatureDetector.vue

@@ -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: 'TemperatureDetector',
+    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: 'temperatureDetector',
+                        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: 'temperatureDetector',
+                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 = 'temperatureDetector_' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
+        }
+    }
+
+};
+</script>
+
+<style scoped>
+
+</style>