Psd子系统

src/iscs/shape/fireHydrantAlarmButton.js

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

src/iscs/shape/psd/platformScreenDoor.js

@@ -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({
-            zlevel: this.zlevel,
+            model: {
-            z: this.z,
+                zlevel: this.zlevel,
-            shape: {
+                z: this.z + 1,
-                x: this.model.width / 4,
+                width: this.model.width
-                y: 0,
-                width: this.model.width / 2,
-                height: this.model.width / 2
-            },
-            style: {
-                fill: '#0F0'
             }
         });
-        this.doorLeftLine1 = new Line({
+        this.psdOpen = new PsdOpen({
-            zlevel: this.zlevel,
+            model: {
-            z: this.z,
+                zlevel: this.zlevel,
-            shape: {
+                z: this.z + 1,
-                x1: this.model.width / 4 + 2,
+                width: this.model.width
-                y1: 2,
-                x2: this.model.width / 4 + 2,
-                y2: this.model.width / 2
-            },
-            style: {
-                stroke: '#000',
-                lineWidth: 0.5
             }
         });
-        this.doorLeftLine2 = new Line({
+        this.unknownState = new UnknownState({
-            zlevel: this.zlevel,
+            model: {
-            z: this.z,
+                zlevel: this.zlevel,
-            shape: {
+                z: this.z + 1,
-                x1: this.model.width / 4 + 2,
+                width: this.model.width
-                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.psdClose);
-        this.grouper.add(this.doorLeftLine1);
+        this.grouper.add(this.psdOpen);
-        this.grouper.add(this.doorLeftLine2);
+        this.grouper.add(this.unknownState);
-        this.grouper.add(this.doorRightLine1);
+        this.unknownState.hide();
-        this.grouper.add(this.doorRightLine2);
+        this.psdOpen.hide();
-        this.grouper.add(this.doorCrack);
     }
     setModel(dx, dy) {
         this.model.point.x += dx;

src/iscs/shape/psd/psdClose.js

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

src/iscs/shape/psd/psdOpen.js

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

src/iscs/shape/psd/unknownState.js

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

src/views/system/iscsDesign/demonList.vue

@@ -87,8 +87,8 @@ export default {
                     type: 'system',
                     children: [
                         {
-                            name: 'HMI界面',
+                            name: 'FAS界面',
-                            mode: 'hmi',
+                            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'
                         }
                     ]
                 }

src/views/system/iscsDraw/index.vue

@@ -5,8 +5,9 @@
         <iscs-plate ref="iscsPlate" />
       </div>
       <div class="map-draft">
-        <iscs-operate v-if="iscsMode=='hmi'" ref="iscsOperate" @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-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 {

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

@@ -1,7 +1,7 @@
 <template>
   <transition name="el-zoom-in-center">
-    <div class="map-control" :style="{ height: height+'px' }">
+    <div class="map-control heightClass">
-      <el-card type="border-card">
+      <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,
+        TemperatureDetector
-        PlatformScreenDoor
     },
     mixins: [
     ],
@@ -131,4 +121,5 @@ export default {
         float: right;
         width: 100%;
     }
+    .heightClass{height:100%;}
 </style>

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

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